diff --git a/package.json b/package.json index 2022b46..26b2e6d 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "prettier": "^2.6.1", "rollup": "^2.70.1", "rollup-plugin-terser": "^7.0.2", - "terriajs": "8.1.26", + "terriajs": "8.2.3", "tslib": "^2.3.1", "typescript": "^3.9.4" } diff --git a/src/TestTool.tsx b/src/TestTool.tsx new file mode 100644 index 0000000..d22948a --- /dev/null +++ b/src/TestTool.tsx @@ -0,0 +1,25 @@ +import { observer } from "mobx-react"; +import React from "react"; +import { Icon, ViewState } from "terriajs-plugin-api"; +import WorkflowPanel from "terriajs/lib/ReactViews/Workflow/WorkflowPanel"; + +interface PropsType { + viewState: ViewState; +} + +// Note: we need to wrap this in observer() right now or else it results in a render loop. +// Will have to debug that later. +const TestTool: React.FC = observer((props: PropsType) => { + return ( + {props.viewState.closeTool()}}> +

Hello, world

+
+ ); +}); + +export default TestTool; diff --git a/src/index.ts b/src/index.ts index 373ee1f..02f8364 100644 --- a/src/index.ts +++ b/src/index.ts @@ -11,6 +11,7 @@ import { Workbench } from "terriajs-plugin-api"; import BoxDrawingCatalogItem from "./BoxDrawingCatalogItem"; +import TestTool from "./TestTool"; const plugin: TerriaPlugin = { name: "Sample plugin", @@ -22,11 +23,16 @@ const plugin: TerriaPlugin = { icon: Icon.GLYPHS.cube, text: "Draw a 3D box", onUserEnterMode: () => { - userDrawing = createUserRectangleDrawing(terria, rectangle => { - create3dBoxItemFromRectangle(terria, workbench, rectangle); - drawModeButton.closeMode(); + // userDrawing = createUserRectangleDrawing(terria, rectangle => { + // create3dBoxItemFromRectangle(terria, workbench, rectangle); + // drawModeButton.closeMode(); + // }); + // userDrawing.enterDrawMode(); + viewState.openTool({ + toolName: "My Tool", + getToolComponent: () => TestTool, + showCloseButton: false }); - userDrawing.enterDrawMode(); }, onUserCloseMode: () => { userDrawing?.endDrawing();