@eeacms/volto-eea-map 4.0.0 → 5.0.0

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;
+}

package/src/hooks/useCopyToClipboard.jsx

@@ -0,0 +1,25 @@
+import { useState, useEffect, useCallback } from 'react';
+
+const useCopyToClipboard = (text) => {
+  const [copyStatus, setCopyStatus] = useState('inactive');
+  const copy = useCallback(() => {
+    navigator.clipboard.writeText(text).then(
+      () => setCopyStatus('copied'),
+      () => setCopyStatus('failed'),
+    );
+  }, [text]);
+
+  useEffect(() => {
+    if (copyStatus === 'inactive') {
+      return;
+    }
+
+    const timeout = setTimeout(() => setCopyStatus('inactive'), 3000);
+
+    return () => clearTimeout(timeout);
+  }, [copyStatus]);
+
+  return [copyStatus, copy];
+};
+
+export default useCopyToClipboard;

package/src/index.js

@@ -1,20 +1,20 @@
 import { uniqBy } from 'lodash';
 
-import EmbedMapView from './components/Blocks/EmbedEEAMap/View';
-import EmbedMapEdit from './components/Blocks/EmbedEEAMap/Edit';
+import EmbedMapView from './Blocks/EmbedEEAMap/View';
+import EmbedMapEdit from './Blocks/EmbedEEAMap/Edit';
 
 import world from '@plone/volto/icons/world.svg';
 
-import DataQueryWidget from './components/widgets/DataQueryWidget';
-import LayerSelectWidget from './components/widgets/LayerSelectWidget';
+import VisualizationWidget from './Widgets/VisualizationWidget';
 
-import VisualizationEditorWidget from './components/visualization/VisualizationEditorWidget';
-import VisualizationViewWidget from './components/visualization/VisualizationViewWidget';
-import VisualizationView from './components/visualization/VisualizationView';
+import ArcgisRendererWidget from './Widgets/ArcgisRendererWidget/ArcgisRendererWidget';
+import ArcgisColorPickerWidget from './Widgets/ArcgisColorPickerWidget';
+import ArcgisSliderWidget from './Widgets/ArcgisSliderWidget';
+import ArcgisViewpointWidget from './Widgets/ArcgisViewpointWidget';
 
-import SimpleColorPickerWidget from './components/widgets/SimpleColorPickerWidget';
+import VisualizationViewWidget from './Widgets/VisualizationViewWidget';
 
-import './less/global.less';
+import VisualizationView from './Views/VisualizationView';
 
 const applyConfig = (config) => {
   config.settings.allowed_cors_destinations = [
@@ -64,15 +64,15 @@ const applyConfig = (config) => {
     'id',
   );
 
-  config.widgets.widget.map_layers_widget = LayerSelectWidget;
-  config.widgets.widget.data_query_widget = DataQueryWidget;
-  config.widgets.widget.simple_color_picker_widget = SimpleColorPickerWidget;
+  config.views.contentTypesViews.map_visualization = VisualizationView;
+
+  config.widgets.widget.arcgis_renderer = ArcgisRendererWidget;
+  config.widgets.widget.arcgis_color_picker = ArcgisColorPickerWidget;
+  config.widgets.widget.arcgis_slider = ArcgisSliderWidget;
+  config.widgets.widget.arcgis_viewpoint = ArcgisViewpointWidget;
 
-  //map editor for the visualization(content-type)
-  config.widgets.id.map_visualization_data = VisualizationEditorWidget;
+  config.widgets.id.map_visualization_data = VisualizationWidget;
   config.widgets.views.id.map_visualization_data = VisualizationViewWidget;
-  //map viewer for the visualization(content-type)
-  config.views.contentTypesViews.map_visualization = VisualizationView;
 
   return config;
 };

package/src/jsoneditor.js

@@ -0,0 +1,72 @@
+import { isString } from 'lodash';
+import { toast } from 'react-toastify';
+import { Toast } from '@plone/volto/components';
+
+import loadable from '@loadable/component';
+
+const LoadableJsonEditor = loadable.lib(() => import('jsoneditor'));
+
+const jsoneditor = __CLIENT__ && LoadableJsonEditor;
+
+export async function initEditor({ el, editor, dflt, options, onInit }) {
+  if (!jsoneditor) return;
+  const module = await jsoneditor.load();
+  const { default: JSONEditor } = module;
+  // create the editor
+  const container = isString(el) ? document.getElementById(el) : el;
+
+  if (!container) {
+    return;
+  }
+
+  container.innerHTML = '';
+
+  const _options = {
+    mode: 'code',
+    enableTransform: false,
+    schema: {
+      type: 'array',
+      items: {
+        type: 'object',
+      },
+    },
+    ...options,
+  };
+
+  editor.current = new JSONEditor(container, _options);
+  // set initial json
+  editor.current.set(dflt);
+
+  if (onInit) onInit();
+}
+
+export function destroyEditor(editor) {
+  if (editor) {
+    editor.destroy();
+    editor = null;
+  }
+}
+
+export async function validateEditor(editor) {
+  const err = await editor.current.validate();
+
+  if (err.length) {
+    toast.warn(
+      <Toast
+        error
+        title={'JSON validation'}
+        content={'Please make sure all the fields are in the correct format'}
+      />,
+    );
+    return false;
+  }
+
+  return true;
+}
+
+export function onPasteEditor(editor) {
+  try {
+    editor.current.repair();
+    editor.current.format();
+  } catch {}
+}