diff --git a/README.md b/README.md index e3485c2..5cd37cd 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,29 @@ The main example here includes the [2D Measurement widget](https://developers.ar ![Screenshot](https://github.com/gavinr/js-api-widget-wrapper-experience-builder/raw/master/screencast.gif) -### Icon Widget +([builder interface](https://github.com/gavinr/js-api-widget-wrapper-experience-builder/raw/master/builder-screencast.mp4)) + +## Quick Start - Download + +1. [Download](https://developers.arcgis.com/downloads/apis-and-sdks?product=arcgis-experience-builder) and unzip [Experience Builder Developer Edition](https://developers.arcgis.com/experience-builder/). +2. Download the latest [release](https://github.com/gavinr/js-api-widget-wrapper-experience-builder/releases) from this repository. +3. Unzip the downloaded files, and copy the `js-api-widget-wrapper` folder into the `client\your-extensions\widgets\js-api-widget-wrapper` folder of the extracted Experience Builder files. + +## Quick Start - Git + +1. [Download](https://developers.arcgis.com/downloads/apis-and-sdks?product=arcgis-experience-builder) and unzip [Experience Builder Developer Edition](https://developers.arcgis.com/experience-builder/). +2. Open a new terminal window and browse to the `client` folder. +3. `git clone https://github.com/gavinr/js-api-widget-wrapper-experience-builder` +4. `npm ci` +5. `npm start` +6. Start Experience Builder server per the instructions (in a separate terminal, `cd server`, `npm ci`, `npm start`) + +## Development + +1. Open the `client` folder as a project in VS Code (or similar code editor). +1. Make sure *both* scripts are running (in the `server` folder and `client`) folder). +1. Every time you make a change to your widget, it will be re-built with webpack automatically. + +## Icon Widget If you want to include a widget that is primarily placed as an icon over the map (using `view.ui.add()`), like the [Compass widget](https://developers.arcgis.com/javascript/latest/sample-code/widgets-compass-2d/index.html), an example is shown in the [compass branch here](https://github.com/gavinr/js-api-widget-wrapper-experience-builder/tree/compass) ([download zip](https://github.com/gavinr/js-api-widget-wrapper-experience-builder/archive/compass.zip)). This will be a less-common use case for custom widgets, because the out-of-the-box Experience Builder Map Widget allows you to easily enable/disable these types of widgets in the widget settings. diff --git a/builder-screencast.mp4 b/builder-screencast.mp4 new file mode 100644 index 0000000..382a457 Binary files /dev/null and b/builder-screencast.mp4 differ diff --git a/config.json b/config.json deleted file mode 100644 index 783d28f..0000000 --- a/config.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "exampleConfigProperty": "test" -} diff --git a/manifest.json b/manifest.json index 0444c35..dd0269c 100644 --- a/manifest.json +++ b/manifest.json @@ -1,20 +1,6 @@ { - "name": "js-api-widget-wrapper", - "label": "JS API Wrapper", - "type": "widget", - "version": "1.0.0", - "dependency": "jimu-arcgis", - "exbVersion": "1.0.0-beta.2", - "author": "Gavin Rehkemper, Esri", - "description": "Example of an Experience Builder widget that can wrap any ArcGIS API for JavaScript widget.", - "copyright": "", - "license": "http://www.apache.org/licenses/LICENSE-2.0", - "properties": {}, - "supportedLocales": [ - "en" - ], - "defaultSize": { - "width": 800, - "height": 500 - } + "name": "js-api-widget-wrapper-experience-builder", + "type": "exb-web-extension-repo", + "description": "This is a extension repository that contains the js-api-widget-wrapper widget.", + "license": "http://www.apache.org/licenses/LICENSE-2.0" } \ No newline at end of file diff --git a/screencast.gif b/screencast.gif index dc3e199..26e8cc6 100644 Binary files a/screencast.gif and b/screencast.gif differ diff --git a/src/config.ts b/src/config.ts deleted file mode 100644 index 2eae796..0000000 --- a/src/config.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { ImmutableObject } from "seamless-immutable"; - -export interface Config { - exampleConfigProperty: string; -} - -export type IMConfig = ImmutableObject; diff --git a/tests/widget.test.tsx b/tests/widget.test.tsx deleted file mode 100644 index 2ade415..0000000 --- a/tests/widget.test.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import * as React from "react"; -import { shallow, configure } from "enzyme"; - -import _Widget from "../src/runtime/widget"; -import { wrapWidget } from "jimu-for-test"; - -// setup file -import * as Adapter from "enzyme-adapter-react-16"; - -configure({ adapter: new Adapter() }); - -describe("simple widget", function() { - it("with config", function() { - const config = { - exampleConfigProperty: "test" - }; - let Widget = wrapWidget(_Widget, { - config: config, - manifest: { name: "simple" } as any, - messages: {} - }); - let wrapper = shallow().shallow(); - expect(wrapper.find(".widget-simple").length).toEqual(1); - }); - - it("without config", function() { - let Widget = wrapWidget(_Widget, { - manifest: { name: "simple" } as any, - messages: {} - }); - let wrapper = shallow().shallow(); - expect(wrapper.find(".widget-simple").length).toEqual(1); - }); -}); diff --git a/widgets/js-api-widget-wrapper/config.json b/widgets/js-api-widget-wrapper/config.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/widgets/js-api-widget-wrapper/config.json @@ -0,0 +1 @@ +{} diff --git a/icon.svg b/widgets/js-api-widget-wrapper/icon.svg similarity index 100% rename from icon.svg rename to widgets/js-api-widget-wrapper/icon.svg diff --git a/widgets/js-api-widget-wrapper/manifest.json b/widgets/js-api-widget-wrapper/manifest.json new file mode 100644 index 0000000..1ab5cbb --- /dev/null +++ b/widgets/js-api-widget-wrapper/manifest.json @@ -0,0 +1,19 @@ +{ + "name": "js-api-widget-wrapper", + "label": "JS API Wrapper", + "type": "widget", + "version": "1.0.0", + "dependency": "jimu-arcgis", + "exbVersion": "1.0.0", + "author": "Gavin Rehkemper, Esri", + "description": "Example of an Experience Builder widget that can wrap any ArcGIS API for JavaScript widget.", + "license": "http://www.apache.org/licenses/LICENSE-2.0", + "properties": {}, + "supportedLocales": [ + "en" + ], + "defaultSize": { + "width": 800, + "height": 500 + } +} \ No newline at end of file diff --git a/src/runtime/translations/default.ts b/widgets/js-api-widget-wrapper/src/runtime/translations/default.ts similarity index 100% rename from src/runtime/translations/default.ts rename to widgets/js-api-widget-wrapper/src/runtime/translations/default.ts diff --git a/src/runtime/widget.tsx b/widgets/js-api-widget-wrapper/src/runtime/widget.tsx similarity index 76% rename from src/runtime/widget.tsx rename to widgets/js-api-widget-wrapper/src/runtime/widget.tsx index e06c02d..7d929f4 100644 --- a/src/runtime/widget.tsx +++ b/widgets/js-api-widget-wrapper/src/runtime/widget.tsx @@ -36,19 +36,23 @@ export default class Widget extends BaseWidget, any> { jimuMapView: jmv }); - // since the widget replaces the container, we must create a new DOM node - // so when we destory we will not remove the "ref" DOM node - const container = document.createElement("div"); - this.myRef.current.appendChild(container); - - const distanceMeasurement2D = new DistanceMeasurement2D({ - view: jmv.view, - container: container - }); - // Save reference to the "Current widget" in State so we can destroy later if necessary. - this.setState({ - currentWidget: distanceMeasurement2D - }); + if(this.myRef.current) { + // since the widget replaces the container, we must create a new DOM node + // so when we destroy we will not remove the "ref" DOM node + const container = document.createElement("div"); + this.myRef.current.appendChild(container); + + const distanceMeasurement2D = new DistanceMeasurement2D({ + view: jmv.view, + container: container + }); + // Save reference to the "Current widget" in State so we can destroy later if necessary. + this.setState({ + currentWidget: distanceMeasurement2D + }); + } else { + console.error('could not find this.myRef.current'); + } } }; @@ -85,8 +89,8 @@ export default class Widget extends BaseWidget, any> { className="widget-js-api-widget-wrapper jimu-widget" style={{ overflow: "auto" }} > - {jmc}
+ {jmc} ); } diff --git a/src/setting/setting.tsx b/widgets/js-api-widget-wrapper/src/setting/setting.tsx similarity index 100% rename from src/setting/setting.tsx rename to widgets/js-api-widget-wrapper/src/setting/setting.tsx diff --git a/src/setting/translations/default.ts b/widgets/js-api-widget-wrapper/src/setting/translations/default.ts similarity index 100% rename from src/setting/translations/default.ts rename to widgets/js-api-widget-wrapper/src/setting/translations/default.ts