terriajs-plugin-sample - npm Package Compare versions

Comparing version 0.0.1-alpha.7 to 0.0.1-alpha.8

dist/index.js

@@ -1,1 +0,14 @@
-import t from"terriajs-cesium/Source/Core/createGuid";import{Icon as e,primitiveTrait as i,mixTraits as o,MappableTraits as n,CatalogMemberTraits as r,objectTrait as s,LatLonHeightTraits as a,HeadingPitchRollTraits as m,ModelTraits as l,updateModelFromJson as d,CatalogMemberMixin as h,MappableMixin as p,CreateModel as u,BoxDrawing as c,runWorkflow as g,CommonStrata as w,CatalogMemberFactory as v,MapToolbar as x,UserDrawing as f}from"terriajs-plugin-api";import{__decorate as y}from"tslib";import{computed as b,action as C}from"mobx";import S from"terriajs-cesium/Source/Core/Cartesian3";import D from"terriajs-cesium/Source/Core/Cartographic";import R from"terriajs-cesium/Source/Core/HeadingPitchRoll";import T from"terriajs-cesium/Source/Core/Matrix3";import F from"terriajs-cesium/Source/Core/Matrix4";import j from"terriajs-cesium/Source/Core/Quaternion";import M from"terriajs-cesium/Source/Core/Rectangle";import H from"terriajs-cesium/Source/Core/Transforms";import L from"terriajs-cesium/Source/Core/TranslationRotationScale";var P=require("terriajs-plugin-sample/assets/icons/cube.svg");class V{constructor(t){this.item=t,this.name="Edit box transform",this.icon=e.GLYPHS.cube}get selectableDimensions(){return[this.positionControls,this.dimensionsControls]}get positionControls(){const t=this.item.position;return{type:"group",id:"position",name:"Position",selectableDimensions:[{type:"numeric",id:"latitude",name:"Latitude",value:t.latitude,min:-90,max:90,setDimensionValue:(t,e)=>{void 0!==e&&this.item.position.setTrait(t,"latitude",e)}},{type:"numeric",id:"longitude",name:"Longitude",value:t.longitude,min:-180,max:180,setDimensionValue:(t,e)=>{void 0!==e&&this.item.position.setTrait(t,"longitude",e)}},{type:"numeric",id:"height",name:"Height",value:t.height,setDimensionValue:(t,e)=>{void 0!==e&&this.item.position.setTrait(t,"height",e)}}]}}get dimensionsControls(){const t=this.item.dimensions;return{type:"group",id:"dimensions",name:"Dimensions (in meters)",selectableDimensions:[{type:"numeric",id:"width",name:"Width",min:1,value:t.width,setDimensionValue:(t,e)=>{void 0!==e&&this.item.dimensions.setTrait(t,"width",e)}},{type:"numeric",id:"length",name:"Length",min:1,value:t.length,setDimensionValue:(t,e)=>{void 0!==e&&this.item.dimensions.setTrait(t,"length",e)}},{type:"numeric",id:"height",name:"Height",min:1,value:t.height,setDimensionValue:(t,e)=>{void 0!==e&&this.item.dimensions.setTrait(t,"height",e)}}]}}}y([b],V.prototype,"selectableDimensions",null),y([b],V.prototype,"positionControls",null),y([b],V.prototype,"dimensionsControls",null);class B extends l{static setFromCartesianScale(t,e,i){d(t,e,{width:i.x,length:i.y,height:i.z})}}y([i({type:"number",name:"Length",description:"Length in meters"})],B.prototype,"length",void 0),y([i({type:"number",name:"Width",description:"Width in meters"})],B.prototype,"width",void 0),y([i({type:"number",name:"Height",description:"Height in metres"})],B.prototype,"height",void 0);class k extends(o(n,r)){}y([s({type:a,name:"Origin",description:"The position of the box expressed as a longitude and latitude in degrees and a height above terrain in meters."})],k.prototype,"position",void 0),y([s({type:m,name:"Rotation",description:"The rotation of the model expressed as heading, pitch and roll in the local frame of reference."})],k.prototype,"rotation",void 0),y([s({type:B,name:"Dimensions",description:"The dimensions of the box expressed as lengt, width and height in meters."})],k.prototype,"dimensions",void 0);class G extends(h(p(u(k)))){constructor(t,e){super(t,e),this.type=G.type}forceLoadMapItems(){return Promise.resolve()}get mapItems(){const t=this.terria.cesium;return t?this.boxDrawing||(this.boxDrawing=c.fromTranslationRotationScale(t,this.translationRotationScale,{keepBoxAboveGround:!0,onChange:({translationRotationScale:t})=>{this.setTraitsFromTranslationRotationScale(t)}})):this.boxDrawing=void 0,this.boxDrawing?(this.boxDrawing.setTranslationRotationScale(this.translationRotationScale),this.boxDrawing.dataSource.show=this.show,[this.boxDrawing.dataSource]):[]}get viewingControls(){return[{id:"edit-box-transform",name:"Edit box",icon:{glyph:e.GLYPHS.cube},onClick:t=>{g(t,new V(this))}}]}positionBoxFromRectangle(t){const e=D.toCartesian(M.center(t)),i=S.fromRadians(t.west,t.north),o=S.fromRadians(t.west,t.south),n=S.fromRadians(t.east,t.north),r=S.distance(i,o),s=S.distance(i,n),a=Math.min(r,s),m=j.fromRotationMatrix(F.getMatrix3(H.eastNorthUpToFixedFrame(e),new T)),l=new S(s,r,a),d=new L(e,m,l);this.setTraitsFromTranslationRotationScale(d)}setTraitsFromTranslationRotationScale(t){a.setFromCartesian(this.position,w.user,t.translation),m.setFromQuaternion(this.rotation,w.user,t.rotation),B.setFromCartesianScale(this.dimensions,w.user,t.scale)}get translationRotationScale(){var t,e,i,o,n,r,s,a,m;const l=D.toCartesian(D.fromDegrees(null!==(t=this.position.longitude)&&void 0!==t?t:0,null!==(e=this.position.latitude)&&void 0!==e?e:0,null!==(i=this.position.height)&&void 0!==i?i:0)),d=j.fromHeadingPitchRoll(R.fromDegrees(null!==(o=this.rotation.heading)&&void 0!==o?o:0,null!==(n=this.rotation.pitch)&&void 0!==n?n:0,null!==(r=this.rotation.roll)&&void 0!==r?r:0)),h=new S(null!==(s=this.dimensions.width)&&void 0!==s?s:1,null!==(a=this.dimensions.length)&&void 0!==a?a:1,null!==(m=this.dimensions.height)&&void 0!==m?m:1);return new L(l,d,h)}}G.type="box-drawing",y([b],G.prototype,"mapItems",null),y([b],G.prototype,"viewingControls",null),y([C],G.prototype,"positionBoxFromRectangle",null),y([C],G.prototype,"setTraitsFromTranslationRotationScale",null),y([b],G.prototype,"translationRotationScale",null),v.register(G.type,G);const E={name:"Sample plugin",description:"A sample terria plugin that adds a tool for drawing a 3d box.",version:"0.0.1",register({viewState:e,terria:i,workbench:o}){let n;const r=x.addModeButton(e,{icon:P,text:"Draw a 3D box",onUserEnterMode:()=>{n=function(t,e){return new f({terria:t,messageHeader:"Click two points to draw a 3D box",drawRectangle:!0,onDrawingComplete:({rectangle:t})=>{t&&e(t)}})}(i,(e=>{!function(e,i,o){const n=new G(t(),e);n.setTrait(w.user,"name","3D box"),n.positionBoxFromRectangle(o),e.addModel(n),i.add(n)}(i,o,e),r.closeMode()})),n.enterDrawMode()},onUserCloseMode:()=>{null==n||n.endDrawing()}})}};export{E as default};
+export { p as default, t as toolId } from './index-724c7bff.js';
+import 'terriajs-plugin-api';
+import 'tslib';
+import 'mobx';
+import 'terriajs-cesium/Source/Core/Cartesian3';
+import 'terriajs-cesium/Source/Core/Cartographic';
+import 'terriajs-cesium/Source/Core/HeadingPitchRoll';
+import 'terriajs-cesium/Source/Core/Matrix3';
+import 'terriajs-cesium/Source/Core/Matrix4';
+import 'terriajs-cesium/Source/Core/Quaternion';
+import 'terriajs-cesium/Source/Core/Rectangle';
+import 'terriajs-cesium/Source/Core/Transforms';
+import 'terriajs-cesium/Source/Core/TranslationRotationScale';
+import 'terriajs-cesium/Source/Core/createGuid';

package.json

 {
   "name": "terriajs-plugin-sample",
-  "version": "0.0.1-alpha.7",
+  "version": "0.0.1-alpha.8",
   "description": "A sample terriajs plugin.",
@@ -11,15 +11,19 @@ "module": "dist/index.js",
   "dependencies": {
-    "terriajs-plugin-api": "0.0.1-alpha.6"
+    "terriajs-plugin-api": "0.0.1-alpha.16"
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^23.0.2",
     "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-replace": "^5.0.1",
     "@rollup/plugin-typescript": "^8.3.1",
-    "mobx": "^4.15.4",
-    "prettier": "^2.6.1",
+    "prettier": "2.7.1",
     "rollup": "^2.70.1",
     "rollup-plugin-terser": "^7.0.2",
-    "terriajs": "8.2.11",
-    "tslib": "^2.3.1",
-    "typescript": "^3.9.4"
+    "typescript": "~5.2.0"
+  },
+  "scripts": {
+    "build": "rollup -c rollup.config.ts",
+    "watch": "rollup -c rollup.config.ts -w",
+    "test": "exit 0"
   }
 }

README.md

@@ -1,30 +0,46 @@
-<i>🚧 Warning: This project is work-in-progress and things can break or be entirely scrapped without notice.</i>
+# TerriaJS sample plugin
 
-# What?
+This repository implements a sample TerriaJS plugin. The plugin implements a
+custom tool for drawin an interactive 3D box on the map. It serves as an
+example for setting up an loading an external plugin library that adds some new
+functionality to Terria without forking it.
 
-This repo implements a sample TerriaJS plugin. It uses the experimental [terriajs-plugin-api](https://github.com/terriajs/plugin-api) to interface with the TerriaJS library.
+Plugins allow extending Terria in two ways:
 
-Terria plugins simply provide a means of building functionality for Terria outside of the main TerriaJS library. The additional functionality can be support for a new data source by implementing a new [catalog item type](https://docs.terria.io/guide/connecting-to-data/catalog-items/). Or it can add a new feature to Terria by implementing a new UI [workflow](#workflow-tbd)(TBD).
+  - By adding support for new data formats or APIs through implementing new [catalog item ](https://docs.terria.io/guide/connecting-to-data/catalog-items/) types. 
+  - and extending the UI in limited ways to create custom workflows.
 
-# Current status
+This plugin code utilizes these additional peer dependencies from the TerriaJS
+library and are pre-requisites for understanding the code:
 
-* The repo builds without errors inside a yarn workspace within the terriamap repo ([details on how to setup the workspace](#suggested-plugin-development-workflow)).
+- [terriajs-plugin-api](https://github.com/terriajs/plugin-api) - for interfacing with the TerriaJS library.
+- [CesiumJS](https://github.com/cesiumgs/cesium/) - The 3D mapping library
+- [mobx](https://mobx.js.org/) - Reactive state management library
+- [ReactJS](https://react.dev/)
+- [styled-components](https://styled-components.com/)
 
-* Outside a yarn workspace, the project builds and emits types but with errors. The errors are because the current TerriaJS bundle does not emit and export its types. (issue tracking this problem).
 
-# TODOs
+Additional documentation for developing with terria is available at
+[https://docs.terria.io/](https://docs.terria.io/). You can also reach us [through our discussion](https://github.com/TerriaJS/terriajs/discussions) forum if you require additional help.
 
-- [x] Packaging icon asset files.
-- [ ] Adding translation support
 
-# Adding this plugin to your terriamap
+This plugin repository is a work in progress and will be updated as the plugin
+interfaces evolve. Meanwhile expect breaking changes.
 
-### Clone terriamap (plugins branch)
+### Current status
+- [x] Load external plugins in TerriaJS at build time
+- [x] Support for registering custom data types (aka catalog items)
+- [x] Initial, limited support for extending UI to add custom workflows
+- [ ] Testing
+- [ ] Linting
+
+# Adding the plugin to your terriamap
+
+### Clone terriamap
 ```bash
 git clone https://github.com/terriajs/terriamap
 cd terriamap
-git checkout plugins
 ```
 
-### Add this plugin as dependency to package.json
+### Add this plugin as dependency in package.json
 ```bash
@@ -34,3 +50,3 @@ yarn add -W 'terriajs-plugin-sample'
 
-### Add plugin to `plugins.ts`
+### Add it to the plugin loader file `plugins.ts`
 ```typescript
@@ -40,3 +56,3 @@ const plugins: any[] = [
 ];
-
+...
 export default plugins;
@@ -47,22 +63,32 @@ ```
 
-### Now build terriamap and start the server
+### Now build your terriamap and start the server
 
 ```
 # From the terriamap directory run
-yarn run gulp build
-# Start terriamap web server
-yarn run start
+yarn run gulp dev
 ```
 
-Once the server is running visit http://localhost:3001 to load the app. You should see a new plugin button to draw a 3D box on the right hand side of the app.
+Once the server is running visit http://localhost:3001 to load the app. You should see a new plugin button added to the map toolbar on the right hand side. Opening the tool will prompt the user to draw a rectangle on the map, this will place a 3d box of the same dimension on the map. Screenshot of the plugin in action:
 
-# Suggested plugin development workflow
+![Sample plugin](sample-plugin.png "Sample plugin")
 
-We currently suggest using yarn workspaces to develop plugins for terriamap. Follow these steps to to setup a yarn workspace for this plugin:
+# Plugin development workflow
 
-### Checkout the plugin into packages folder
+Developing the plugin requires correctly setting up the yarn workspace. Your local directory structure should look something like:
+```
+terriamap/
+  packages/
+  ├── plugin-sample
+  └── terriajs
+```
 
+The `terriajs` and  `plugin-sample` repositories must be checked out under `terriamap/packages/` folder
+
+
+### Checkout terriajs and sample-plugin into the packages folder
+
 ```bash
 cd terriamap/
 mkdir -p packages
+git clone https://github.com/terriajs/terriajs packages/terriajs
 git clone https://github.com/terriajs/plugin-sample packages/plugin-sample
@@ -89,5 +115,4 @@ ```
    "dependencies": {
-    "pm2": "^3.2.2",
-    "terriajs-plugin-api": "0.0.1-alpha.5",
-    "terriajs-plugin-sample": "0.0.1-alpha.6", // <-- plugin-sample version changed to match the version in packages/plugin-sample/package.json
+    "terriajs-plugin-api": "0.0.1-alpha.16",
+    "terriajs-plugin-sample": "0.0.1-alpha.8", // <-- plugin-sample version should match the version in packages/plugin-sample/package.json
 ```
@@ -97,3 +122,3 @@
 
-From your terriamap folder run:
+From your `terriamap` folder run:
 
@@ -111,5 +136,7 @@ ```bash
 # Start a plugin build process that watches for file changes
-rollup -c rollup.config.ts -w
+yarn run watch
 ```
 
-Now when you make changes to the plugin code, terriamap will automatically rebuild the changes.
+Start making make changes to the plugin code, terriamap will automatically
+rebuild the changes. Note that the page doesn't reload automatically, so you
+will need to refresh to see the changes.

rollup.config.ts

@@ -23,5 +23,5 @@ import nodeResolve from "@rollup/plugin-node-resolve";
   preserveSymlinks: true,
-  external: depPath => {
+  external: (depPath) => {
     // exclude files in exclusionList from the build pipeline
-    return externalPaths.some(ext => {
+    return externalPaths.some((ext) => {
       if (typeof ext === "string") {
@@ -36,3 +36,8 @@ return depPath === ext;
   },
-  plugins: [nodeResolve(), resolveSvgIcons(), typescript(), terser()]
+  plugins: [
+    nodeResolve(),
+    resolveSvgIcons(),
+    typescript()
+    /*terser() // enable terser if you want to minify your code */
+  ]
 };
@@ -39,0 +44,0 @@

tsconfig.json

@@ -10,2 +10,3 @@ {
     "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
     "allowSyntheticDefaultImports": true,
@@ -15,4 +16,5 @@ "resolveJsonModule": true,
     "checkJs": false,
-    "declaration": true,
     "strict": true,
+    "esModuleInterop": true,
+    //"skipLibCheck": true
     // Although this can result in subtle bugs, they are required for us to
@@ -27,8 +29,8 @@ // ignore TS errors on js files inside terria.  We'll get rid of them when
     "typeRoots": [
-      "node_modules/terriajs/lib/ThirdParty",
-      // need this if we are in a yarn workspace
       "../../node_modules/terriajs/lib/ThirdParty"
+      //"../../node_modules"
+      // "node_modules"
     ]
   },
-  "include": ["src"]
+  "include": ["./src/**/*"]
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1105805

1767.76%

Dev dependency count

8

-11.11%

Number of lines in readme file

137

24.55%

Worsened metrics

Number of package files

10

-9.09%

Lines of code

511

-40.86%

Number of medium supply chain risk alerts

2

Infinity%

Dependency changes

• + Added

  terriajs-plugin-api@0.0.1-alpha.16
  (transitive)

• - Removed

  terriajs-plugin-api@0.0.1-alpha.6
  (transitive)

• Updated

  terriajs-plugin-api@0.0.1-alpha.16