This repository has been archived by the owner on Jan 25, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
7ee392d
commit 11df603
Showing
4 changed files
with
71 additions
and
102 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,97 +1,74 @@ | ||
| /** @jsx jsx */ | ||
| import { AllWidgetProps, BaseWidget, jsx, React } from "jimu-core"; | ||
| import { IMConfig } from "../config"; | ||
| import { AllWidgetProps, jsx, React } from "jimu-core"; | ||
| import { JimuMapViewComponent, JimuMapView } from "jimu-arcgis"; | ||
| const { useRef, useState, useEffect } = React; | ||
|
|
||
| import DistanceMeasurement2D = require("esri/widgets/DistanceMeasurement2D"); | ||
| import * as DistanceMeasurement2D from "esri/widgets/DistanceMeasurement2D"; | ||
|
|
||
| interface IState { | ||
| jimuMapView: JimuMapView; | ||
| currentWidget: DistanceMeasurement2D; | ||
| } | ||
|
|
||
| export default class Widget extends BaseWidget<AllWidgetProps<IMConfig>, any> { | ||
| private myRef = React.createRef<HTMLDivElement>(); | ||
|
|
||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| jimuMapView: null, | ||
| currentWidget: null | ||
| }; | ||
| } | ||
| export default function Setting(props: AllWidgetProps<any>) { | ||
| const widgetRef = useRef<HTMLDivElement>(); | ||
| const [currentWidget, setCurrentWidget] = useState<DistanceMeasurement2D>(); | ||
|
|
||
| activeViewChangeHandler = (jmv: JimuMapView) => { | ||
| if (this.state.jimuMapView) { | ||
| const activeViewChangeHandler = (jmv: JimuMapView) => { | ||
| if (currentWidget && currentWidget !== undefined) { | ||
| // we have a "previous" map where we added the widget | ||
| // (ex: case where two Maps in single Experience page and user is switching | ||
| // between them in the dropdown) - we must destroy the old widget in this case. | ||
| if (this.state.currentWidget) { | ||
| this.state.currentWidget.destroy(); | ||
| } | ||
| currentWidget.destroy(); | ||
| } | ||
|
|
||
| if (jmv) { | ||
| this.setState({ | ||
| jimuMapView: jmv | ||
| }); | ||
|
|
||
| if(this.myRef.current) { | ||
| if (widgetRef.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); | ||
| widgetRef.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 | ||
| }); | ||
| setCurrentWidget(distanceMeasurement2D); | ||
| } else { | ||
| console.error('could not find this.myRef.current'); | ||
| console.error('could not find widgetRef.current'); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| // activeViewChangeHandler is not called in the builder when "None" is selected | ||
| // for the map, so we must cleanup here: | ||
| componentDidUpdate = evt => { | ||
| if (this.props.useMapWidgetIds.length === 0) { | ||
| // "None" was selected in the "Select map widget" dropdown: | ||
| if (this.state.currentWidget) { | ||
| this.state.currentWidget.destroy(); | ||
| } | ||
| useEffect(() => { | ||
| if (props.useMapWidgetIds && props.useMapWidgetIds.length === 0 && currentWidget) { | ||
| console.log('destroying'); | ||
| currentWidget.destroy(); | ||
| } | ||
| }; | ||
| }); | ||
|
|
||
| render() { | ||
| // If the user has selected a map, include JimuMapViewComponent. | ||
| // If not, show a message asking for the Experience Author to select it. | ||
| let jmc = <p>Please select a map.</p>; | ||
| if ( | ||
| this.props.hasOwnProperty("useMapWidgetIds") && | ||
| this.props.useMapWidgetIds && | ||
| this.props.useMapWidgetIds.length === 1 | ||
| ) { | ||
| jmc = ( | ||
| <JimuMapViewComponent | ||
| useMapWidgetIds={this.props.useMapWidgetIds} | ||
| onActiveViewChange={this.activeViewChangeHandler} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div | ||
| className="widget-js-api-widget-wrapper jimu-widget" | ||
| style={{ overflow: "auto" }} | ||
| > | ||
| <div className="here" ref={this.myRef}></div> | ||
| {jmc} | ||
| </div> | ||
| // If the user has selected a map, include JimuMapViewComponent. | ||
| // If not, show a message asking for the Experience Author to select it. | ||
| let jmc = <p>Please select a map.</p>; | ||
| if ( | ||
| props.hasOwnProperty("useMapWidgetIds") && | ||
| props.useMapWidgetIds && | ||
| props.useMapWidgetIds.length === 1 | ||
| ) { | ||
| jmc = ( | ||
| <JimuMapViewComponent | ||
| useMapWidgetId={props.useMapWidgetIds?.[0]} | ||
| onActiveViewChange={activeViewChangeHandler} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <div | ||
| className="widget-js-api-widget-wrapper jimu-widget" | ||
| style={{ overflow: "auto" }} | ||
| > | ||
| <div ref={widgetRef}></div> | ||
| {jmc} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,40 +1,34 @@ | ||
| import { React, FormattedMessage } from "jimu-core"; | ||
| import { BaseWidgetSetting, AllWidgetSettingProps } from "jimu-for-builder"; | ||
| import { IMConfig } from "../config"; | ||
| import { React } from "jimu-core"; | ||
| import { AllWidgetSettingProps } from "jimu-for-builder"; | ||
| import defaultMessages from "./translations/default"; | ||
| import { | ||
| JimuMapViewSelector, | ||
| SettingSection, | ||
| SettingRow | ||
| } from "jimu-ui/setting-components"; | ||
| } from "jimu-ui/advanced/setting-components"; | ||
|
|
||
| export default class Setting extends BaseWidgetSetting< | ||
| AllWidgetSettingProps<IMConfig>, | ||
| any | ||
| > { | ||
| onMapWidgetSelected = (useMapWidgetIds: string[]) => { | ||
| this.props.onSettingChange({ | ||
| id: this.props.id, | ||
| export default function Setting(props: AllWidgetSettingProps<any>) { | ||
|
|
||
| const onMapWidgetSelected = (useMapWidgetIds: string[]) => { | ||
| props.onSettingChange({ | ||
| id: props.id, | ||
| useMapWidgetIds: useMapWidgetIds | ||
| }); | ||
| }; | ||
|
|
||
| render() { | ||
| return ( | ||
| <div className="widget-setting-js-api-widget-wrapper"> | ||
| <SettingSection | ||
| className="map-selector-section" | ||
| title={this.props.intl.formatMessage({ | ||
| id: "selectMapWidget", | ||
| defaultMessage: defaultMessages.selectMapWidget | ||
| })} | ||
| > | ||
| <JimuMapViewSelector | ||
| onSelect={this.onMapWidgetSelected} | ||
| useMapWidgetIds={this.props.useMapWidgetIds} | ||
| /> | ||
| </SettingSection> | ||
| </div> | ||
| ); | ||
| } | ||
| return ( | ||
| <div className="widget-setting-js-api-widget-wrapper"> | ||
| <SettingSection | ||
| className="map-selector-section" | ||
| title={props.intl.formatMessage({ | ||
| id: "selectMapWidget", | ||
| defaultMessage: defaultMessages.selectMapWidget | ||
| })} | ||
| > | ||
| <JimuMapViewSelector | ||
| onSelect={onMapWidgetSelected} | ||
| useMapWidgetIds={props.useMapWidgetIds} | ||
| /> | ||
| </SettingSection> | ||
| </div> | ||
| ); | ||
| } |