@eeacms/volto-eea-map 4.1.0 → 5.0.0

package/src/Widgets/ArcgisViewpointWidget.jsx

@@ -0,0 +1,112 @@
+import { useEffect, useState } from 'react';
+import { toNumber } from 'lodash';
+import { FormFieldWrapper, InlineForm } from '@plone/volto/components';
+
+export default function ArcgisViewpointWidget(props) {
+  const [watchViewpoint, setWatchViewpoint] = useState(false);
+  const { $map, id, value, onChange } = props;
+
+  useEffect(() => {
+    if (!$map.current?.isReady) return;
+    const homeWidget = $map.current.view.ui.find('Home');
+    if (!homeWidget) return;
+    homeWidget.viewpoint = new $map.current.modules.AgViewpoint({
+      center: [value.longitude, value.latitude],
+      zoom: value.zoom,
+    });
+  }, [$map, value]);
+
+  useEffect(() => {
+    if (watchViewpoint && $map.current?.isReady) {
+      const reactiveUtils = $map.current.modules.agReactiveUtils;
+
+      reactiveUtils.when(
+        () => $map.current.view.stationary,
+        (stationary) => {
+          if (stationary) {
+            const { longitude, latitude } = $map.current.view.center;
+            const zoom = $map.current.view.zoom;
+            onChange(id, {
+              ...value,
+              longitude,
+              latitude,
+              zoom,
+            });
+          }
+          setWatchViewpoint(false);
+        },
+        {
+          once: true,
+        },
+      );
+    }
+  }, [$map, watchViewpoint, id, value, onChange]);
+
+  return (
+    <>
+      <FormFieldWrapper {...props}>
+        <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+          <button
+            className="btn-primary"
+            style={{
+              fontSize: 'var(--font-size-small)',
+              width: '100%',
+              display: 'inline-block',
+              textAlign: 'center',
+            }}
+            onClick={() => {
+              setWatchViewpoint(true);
+            }}
+          >
+            {watchViewpoint ? 'Waiting...' : 'Drag on map'}
+          </button>
+        </div>
+      </FormFieldWrapper>
+      <div className="arcgis-viewpoint-editor">
+        <InlineForm
+          schema={{
+            title: 'Initial viewpoint',
+            fieldsets: [
+              {
+                id: 'default',
+                title: 'Default',
+                fields: ['longitude', 'latitude', 'zoom'],
+              },
+            ],
+            properties: {
+              longitude: {
+                title: 'Longitude',
+                type: 'number',
+                minimum: 0,
+              },
+              latitude: {
+                title: 'Latitude',
+                type: 'number',
+                minimum: 0,
+              },
+              zoom: {
+                title: 'Zoom',
+                type: 'number',
+                minimum: 0,
+              },
+            },
+            required: [],
+          }}
+          formData={value}
+          onChangeField={(fieldId, fieldValue) => {
+            let $fieldValue = fieldValue;
+
+            if (['longitude', 'latitude', 'zoom'].includes(fieldId)) {
+              $fieldValue = Math.max(toNumber($fieldValue) || 0, 0);
+            }
+
+            onChange(id, {
+              ...value,
+              [fieldId]: $fieldValue,
+            });
+          }}
+        />
+      </div>
+    </>
+  );
+}

package/src/{components/visualization → Widgets}/VisualizationViewWidget.jsx

@@ -1,25 +1,24 @@
 import { connect } from 'react-redux';
 import { pickMetadata } from '@eeacms/volto-embed/helpers';
-import Webmap from '../Webmap';
-import ExtraViews from '../ExtraViews';
+import MapBuilder from '@eeacms/volto-eea-map/Arcgis/Map/MapBuilder';
+import Toolbar from '../Toolbar/Toolbar';
 
 function VisualizationViewWidget(props) {
-  const { value: map_visualization_data = {} } = props;
+  const { value: mapData = {}, content } = props;
 
   return (
     <>
-      <Webmap data={map_visualization_data} />
-      <ExtraViews
+      <MapBuilder data={mapData} />
+      <Toolbar
+        style={{ marginTop: '1rem' }}
         data={{
-          show_viewer: true,
-          show_legend: true,
           show_note: false,
           show_sources: false,
           show_more_info: false,
           show_share: true,
-          map_visualization_data: {
-            ...map_visualization_data,
-            ...pickMetadata(props.content),
+          mapData: {
+            ...mapData,
+            ...pickMetadata(content),
           },
         }}
       />

package/src/Widgets/VisualizationWidget.jsx

@@ -0,0 +1,200 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Modal, Button, Grid } from 'semantic-ui-react';
+import { toast } from 'react-toastify';
+
+import { FormFieldWrapper, Icon, Toast } from '@plone/volto/components';
+
+import MapBuilder from '@eeacms/volto-eea-map/Arcgis/Map/MapBuilder';
+import {
+  initEditor,
+  destroyEditor,
+  validateEditor,
+  onPasteEditor,
+} from '@eeacms/volto-eea-map/jsoneditor';
+
+import editSVG from '@plone/volto/icons/editing.svg';
+
+import '@eeacms/volto-eea-map/styles/editor.less';
+import MapEditor from '../Arcgis/Editor/Editor';
+
+function JsonEditorModal(props) {
+  const { value, onClose, onChange } = props;
+  const editor = useRef();
+  const initailValue = useRef(props.value);
+
+  async function getValue() {
+    const valid = await validateEditor(editor);
+    if (!valid) {
+      throw new Error('Invalid JSON');
+    }
+    try {
+      return editor.current.get();
+    } catch {
+      throw new Error('Invalid JSON');
+    }
+  }
+
+  useEffect(() => {
+    initEditor({
+      el: 'jsoneditor-plotlyjson',
+      editor,
+      options: {
+        schema: undefined,
+      },
+      dflt: initailValue.current,
+    });
+
+    const editorCurr = editor.current;
+
+    return () => {
+      destroyEditor(editorCurr);
+    };
+  }, []);
+
+  return (
+    <Modal size="fullscreen" open={true} className="plotly-json-modal">
+      <Modal.Content scrolling>
+        <div
+          id="jsoneditor-plotlyjson"
+          style={{ width: '100%', height: '100%' }}
+          onPaste={(e) => {
+            onPasteEditor(editor);
+          }}
+        />
+      </Modal.Content>
+      <Modal.Actions>
+        <Button
+          onClick={() => {
+            onChange(initailValue.current);
+            onClose();
+          }}
+        >
+          Close
+        </Button>
+        <Button
+          primary
+          onClick={async () => {
+            try {
+              const newValue = {
+                ...value,
+                ...(await getValue()),
+              };
+              onChange(newValue);
+              onClose();
+            } catch (error) {
+              toast.error(
+                <Toast error title={'JSON error'} content={error.message} />,
+              );
+            }
+          }}
+        >
+          Apply
+        </Button>
+      </Modal.Actions>
+    </Modal>
+  );
+}
+
+function MapEditorModal(props) {
+  const [value, setValue] = useState(props.value);
+  const [open, setOpen] = useState(false);
+
+  const properties = props.formData;
+
+  return (
+    <>
+      <Modal open={true} size="fullscreen" className="chart-editor-modal">
+        <Modal.Content scrolling>
+          <MapEditor
+            value={value}
+            properties={properties}
+            onChangeValue={(value) => {
+              setValue(value);
+            }}
+          />
+        </Modal.Content>
+        <Modal.Actions>
+          <Grid>
+            <Grid.Row>
+              <Grid.Column
+                verticalAlign="middle"
+                style={{
+                  display: 'inline-flex',
+                  flexFlow: 'row',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <Button
+                  secondary
+                  className="json-btn"
+                  onClick={() => setOpen(true)}
+                >
+                  <Icon name={editSVG} size="20px" />
+                  JSON
+                </Button>
+                <div style={{ display: 'flex' }}>
+                  <Button floated="right" onClick={props.onClose}>
+                    Close
+                  </Button>
+                  <Button
+                    primary
+                    floated="right"
+                    onClick={() => {
+                      props.onChange(props.id, value);
+                      props.onClose();
+                    }}
+                  >
+                    Apply
+                  </Button>
+                </div>
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+        </Modal.Actions>
+      </Modal>
+      {open && (
+        <JsonEditorModal
+          value={value}
+          onChange={setValue}
+          onClose={() => setOpen(false)}
+        />
+      )}
+    </>
+  );
+}
+
+const VisualizationWidget = (props) => {
+  const { id, title, description, value } = props;
+  const [showMapEditor, setShowMapEditor] = useState(false);
+
+  if (__SERVER__) return '';
+
+  return (
+    <FormFieldWrapper {...props} columns={1}>
+      <div className="wrapper">
+        <label htmlFor={`field-${id}`}>{title}</label>
+        <Button
+          floated="right"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setShowMapEditor(true);
+          }}
+        >
+          Open Map Editor
+        </Button>
+      </div>
+      {description && <p className="help">{description}</p>}
+      <MapBuilder data={value} />
+      {showMapEditor && (
+        <MapEditorModal
+          {...props}
+          value={value || {}}
+          onClose={() => setShowMapEditor(false)}
+        />
+      )}
+    </FormFieldWrapper>
+  );
+};
+
+export default VisualizationWidget;

package/src/arcgis.js

@@ -0,0 +1,48 @@
+export default function arcgis(version = '4.29') {
+  if (__SERVER__) return null;
+
+  const getId = (type) => {
+    return `arcgis${type}-${version}`;
+  };
+
+  const linkId = getId('css');
+  const scriptId = getId('js');
+
+  function loadCss() {
+    let link = document.getElementById(linkId);
+    if (!link) {
+      link = document.createElement('link');
+      link.rel = 'stylesheet';
+      link.href = `https://js.arcgis.com/${version}/esri/themes/light/main.css`;
+      link.id = getId('css');
+      document.head.appendChild(link);
+      link.addEventListener('load', () => {
+        loadScript();
+      });
+    }
+  }
+
+  function loadScript() {
+    let script = document.getElementById(scriptId);
+    if (!script) {
+      script = document.createElement('script');
+      script.src = `https://js.arcgis.com/${version}/init.js`;
+      script.id = scriptId;
+      document.body.appendChild(script);
+      script.addEventListener('load', () => {
+        if (window.$arcgis) {
+          window.postMessage({
+            type: 'arcgis-loaded',
+          });
+        }
+      });
+    }
+  }
+
+  if (window.$arcgis) {
+    return window.$arcgis;
+  } else {
+    loadCss();
+    return null;
+  }
+}

package/src/constants.js

@@ -1,10 +1,17 @@
-const positions = ['bottom-right', 'bottom-left', 'top-right', 'top-left'].map(
-  (n) => {
-    return { key: n, value: n, text: n };
-  },
-);
+import { capitalize } from 'lodash';
+
+export const positions = [
+  'top-left',
+  'top-right',
+  'bottom-right',
+  'bottom-left',
+].map((n) => {
+  return [n, capitalize(n.replaceAll('-', ' '))];
+});
 
-const base_layers = [
+export const basemaps = [
+  'positron-composite',
+  'blossom-composite',
   'dark-gray',
   'dark-gray-vector',
   'gray',
@@ -22,8 +29,219 @@ const base_layers = [
   'terrain',
   'topo',
   'topo-vector',
+].map((n) => {
+  return [n, capitalize(n.replaceAll('-', ' '))];
+});
+
+export const widgets = [
+  'AreaMeasurement2D',
+  'AreaMeasurement3D',
+  'Attachments',
+  'Attribution',
+  'BasemapGallery',
+  'BasemapLayerList',
+  'BasemapToggle',
+  'Bookmarks',
+  'BuildingExplorer',
+  'Compass',
+  'CoordinateConversion',
+  'Daylight',
+  'DirectLineMeasurement3D',
+  'DirectionalPad',
+  'Directions',
+  'DistanceMeasurement2D',
+  'Editor',
+  'ElevationProfile',
+  'Feature',
+  'FeatureForm',
+  'FeatureTable',
+  'FeatureTemplates',
+  'Features',
+  'FloorFilter',
+  'Fullscreen',
+  'Histogram',
+  'HistogramRangeSlider',
+  'Home',
+  'LayerList',
+  'Legend',
+  'LineOfSight',
+  'Locate',
+  'Measurement',
+  'NavigationToggle',
+  'OrientedImageryViewer',
+  'Print',
+  'ScaleBar',
+  'ScaleRangeSlider',
+  'Search',
+  'ShadowCast',
+  'Sketch',
+  'Slice',
+  'Slider',
+  'TableList',
+  'TimeSlider',
+  'TimeZoneLabel',
+  'Track',
+  'UtilityNetworkAssociations',
+  'UtilityNetworkTrace',
+  'UtilityNetworkValidateTopology',
+  'ValuePicker',
+  'Weather',
+  'Zoom',
 ].map((n) => {
   return [n, n];
 });
 
-export { positions, base_layers };
+export const blendModes = [
+  'average',
+  'color-burn',
+  'color-dodge',
+  'color',
+  'darken',
+  'destination-atop',
+  'destination-in',
+  'destination-out',
+  'destination-over',
+  'difference',
+  'exclusion',
+  'hard-light',
+  'hue',
+  'invert',
+  'lighten',
+  'lighter',
+  'luminosity',
+  'minus',
+  'multiply',
+  'normal',
+  'overlay',
+  'plus',
+  'reflect',
+  'saturation',
+  'screen',
+  'soft-light',
+  'source-atop',
+  'source-in',
+  'source-out',
+  'vivid-light',
+  'xor',
+].map((n) => {
+  return [n, capitalize(n.replaceAll('-', ' '))];
+});
+
+export const geometryTypes = [
+  'point',
+  'multipoint',
+  'polyline',
+  'polygon',
+  'multipatch',
+  'mesh',
+].map((n) => {
+  return [n, capitalize(n.replaceAll('-', ' '))];
+});
+
+export const rendererTypes = [
+  'simple',
+  'unique-value',
+  'heatmap',
+  'class-breaks',
+  'dictionary',
+  'dot-density',
+  'pie-chart',
+].map((n) => ({ value: n, label: capitalize(n.replaceAll('-', ' ')) }));
+
+export const simpleSymbols = [
+  'simple-fill',
+  'simple-marker',
+  'simple-line',
+].map((n) => {
+  return [n, capitalize(n.replaceAll('-', ' '))];
+});
+
+export const expandKeys = ['expandTooltip'];
+
+export const getDefaultWidgets = (dimension = '2d') => [
+  { name: 'Zoom', position: 'top-left' },
+  ...(dimension === '3d'
+    ? [{ name: 'NavigationToggle', position: 'top-left' }]
+    : []),
+  {
+    name: 'Home',
+    position: 'top-left',
+  },
+  {
+    name: 'Compass',
+    position: 'top-left',
+  },
+  {
+    name: 'LayerList',
+    position: 'top-right',
+    expand: true,
+    ExpandProperties: {
+      expandTooltip: 'Layers',
+    },
+  },
+  {
+    name: 'Print',
+    position: 'top-right',
+    expand: true,
+    ExpandProperties: {
+      expandTooltip: 'Print',
+    },
+  },
+  {
+    name: 'Fullscreen',
+    position: 'top-right',
+  },
+  {
+    name: 'Legend',
+    position: 'bottom-left',
+    expand: true,
+    respectLayerVisibility: false,
+    ExpandProperties: {
+      expandTooltip: 'Legend',
+    },
+  },
+  {
+    name: 'ScaleBar',
+    position: 'bottom-right',
+    unit: 'dual',
+  },
+];
+
+export const widgetsSchema = {
+  ScaleBar: {
+    unit: {
+      title: 'Unit',
+      choices: [
+        ['metric', 'Metric'],
+        ['imperial', 'Imperial'],
+        ['dual', 'Dual'],
+        ['non-metric', 'Non metric'],
+      ],
+    },
+  },
+  Legend: {
+    respectLayerVisibility: {
+      title: 'Respect layer visibility',
+      type: 'boolean',
+    },
+  },
+};
+
+export const withSublayers = ['MapImageLayer'];
+
+export const layersMapping = {
+  'Raster Layer': 'MapImageLayer',
+};
+
+export const geometryTypeMapping = {
+  esriGeometryPoint: 'point',
+  esriGeometryMultipoint: 'multipoint',
+  esriGeometryPolyline: 'polyline',
+  esriGeometryPolygon: 'polygon',
+  esriGeometryMultipatch: 'multipatch',
+  esriGeometryMesh: 'mesh',
+};
+
+export const renderersMapping = {
+  uniqueValue: 'unique-value',
+};

package/src/hocs/withArcgis.jsx

@@ -0,0 +1,27 @@
+import React, { forwardRef, useEffect, useState } from 'react';
+import loadArcgis from '@eeacms/volto-eea-map/arcgis';
+
+export default function withArcgis(WrappedComponent) {
+  return forwardRef((props, ref) => {
+    const [agLoaded, setAgLoaded] = useState(false);
+
+    const interceptArcgis = (event) => {
+      if (event.type === 'message' && event.data.type === 'arcgis-loaded') {
+        setAgLoaded(true);
+      }
+    };
+
+    useEffect(() => {
+      if (window.$arcgis) {
+        setAgLoaded(true);
+      }
+      loadArcgis();
+      window.addEventListener('message', interceptArcgis);
+      return () => {
+        window.removeEventListener('message', interceptArcgis);
+      };
+    }, []);
+
+    return <WrappedComponent {...props} agLoaded={agLoaded} ref={ref} />;
+  });
+}

package/src/hooks/useChangedProps.jsx

@@ -0,0 +1,24 @@
+import { useEffect, useRef } from 'react';
+import { isFunction, isEqual } from 'lodash';
+
+export default function useChangedEffect(callback, props) {
+  const prevPropsRef = useRef(props);
+
+  useEffect(() => {
+    const currentChangedProps = Object.keys(props).reduce((acc, key) => {
+      if (
+        !['children'].includes(key) &&
+        !isEqual(props[key], prevPropsRef.current[key])
+      ) {
+        acc[key] = props[key];
+      }
+      return acc;
+    }, {});
+
+    if (isFunction(callback)) {
+      callback(currentChangedProps);
+    }
+
+    prevPropsRef.current = props;
+  }, [callback, props]);
+}

package/src/hooks/useClass.jsx

@@ -0,0 +1,17 @@
+import { useEffect, useRef } from 'react';
+
+export default function useClass(Class, ...props) {
+  const refObject = useRef(null);
+
+  useEffect(() => {
+    return () => {
+      refObject.current = null;
+    };
+  }, []);
+
+  if (refObject.current === null) {
+    refObject.current = new Class(...props);
+  }
+
+  return refObject.current;
+}