@eeacms/volto-eea-map 4.1.0 → 5.0.0

package/src/Arcgis/Widget/Widget.jsx

@@ -0,0 +1,170 @@
+import { useContext, useEffect, useMemo, memo } from 'react';
+import { EventEmitter } from 'events';
+
+import MapContext from '../Map/MapContext';
+
+import useClass from '@eeacms/volto-eea-map/hooks/useClass';
+
+const modules = {};
+
+const TIMEOUT = 2000;
+
+class $Widget extends EventEmitter {
+  #isReady = false;
+  #props = {};
+  #name = '';
+  #order = -1;
+  #initiate = false;
+  #widget = null;
+  #expand = null;
+  #modulesLoaded = false;
+  #clock = null;
+
+  constructor(props) {
+    super();
+
+    this.#props = props;
+    this.#name = props.name;
+    this.#order = props.order || 1;
+
+    if (this.order <= 1) {
+      this.#initiate = true;
+      return;
+    }
+
+    this.#props.$map.on('widget-added', (widget) => {
+      if (this.#isReady) return;
+      if (this.#order - widget.order === 1) {
+        this.#initiate = true;
+      }
+    });
+  }
+
+  get isReady() {
+    return this.#isReady && !!this.#widget;
+  }
+
+  get widget() {
+    return this.#widget;
+  }
+
+  get order() {
+    return this.#order;
+  }
+
+  async loadModules() {
+    const $arcgis = __CLIENT__ ? window.$arcgis : null;
+    if (__SERVER__ || !$arcgis || !this.#name) return Promise.reject();
+    if (!this.#modulesLoaded) {
+      const AgWidget = modules[`Ag${this.#name}`];
+      modules[`Ag${this.#name}`] =
+        AgWidget || (await $arcgis.import(`esri/widgets/${this.#name}`));
+      modules.AgExpand = await $arcgis.import('esri/widgets/Expand');
+      this.#modulesLoaded = true;
+    }
+    return Promise.resolve();
+  }
+
+  init() {
+    const {
+      $map,
+      expand,
+      position = 'top-left',
+      ExpandProperties = {},
+    } = this.#props;
+    const AgWidget = modules[`Ag${this.#name}`];
+    const AgExpand = modules.AgExpand;
+    if (!this.#modulesLoaded || !$map.isReady) return;
+    if (!AgWidget || !AgExpand) {
+      throw new Error('$Widget modules not loaded');
+    }
+
+    this.#widget = new AgWidget({
+      view: $map.view,
+      ...(!this.#expand ? { id: this.#name } : {}),
+      ...(this.#props || {}),
+    });
+
+    if (expand) {
+      this.#expand = new AgExpand({
+        view: $map.view,
+        content: this.#widget,
+        id: this.#name,
+        mode: 'floating',
+        ...ExpandProperties,
+      });
+    }
+
+    const content = this.#expand || this.#widget;
+
+    $map.view.ui.add(content, position);
+
+    this.#isReady = true;
+    this.#initiate = false;
+
+    this.emit('connected');
+    $map.emit('widget-added', this);
+  }
+
+  connect() {
+    clearInterval(this.#clock);
+    this.loadModules()
+      .then(() => {
+        if (this.#order <= 1) {
+          this.init();
+          return;
+        }
+        let time = 0;
+        this.#clock = setInterval(() => {
+          if (time >= TIMEOUT || this.#isReady) {
+            clearInterval(this.#clock);
+            return;
+          }
+          time += 50;
+          if (!this.#initiate) return;
+          clearInterval(this.#clock);
+          this.init();
+        }, 50);
+      })
+      .catch(() => {});
+  }
+
+  disconnect() {
+    if (!this.#isReady) return;
+    if (this.#widget) {
+      this.#widget.destroy();
+    }
+    if (this.#expand) {
+      this.#expand.destroy();
+    }
+    this.#widget = null;
+    this.#expand = null;
+    this.#isReady = false;
+    clearInterval(this.#clock);
+    this.emit('disconnected');
+  }
+}
+
+// https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Widget.html
+function Widget(props) {
+  const { $map } = useContext(MapContext);
+  const context = useMemo(() => ({ ...props, $map }), [props, $map]);
+
+  const $widget = useClass($Widget, context);
+
+  useEffect(() => {
+    if (!$widget) return;
+
+    if ($map.isReady) {
+      $widget.connect();
+    }
+
+    return () => {
+      $widget.disconnect();
+    };
+  }, [$map, $widget]);
+
+  return null;
+}
+
+export default memo(Widget);

package/src/Arcgis/helpers.js

@@ -0,0 +1,140 @@
+import { isArray } from 'lodash';
+import { formatQuery as $formatQuery } from 'react-querybuilder';
+import { getDefaultWidgets } from '@eeacms/volto-eea-map/constants';
+
+const timer = {};
+
+export function formatQuery(...args) {
+  let query = args[0];
+  const data_query = args[1];
+  if (query?.rules) {
+    query = {
+      ...query,
+      rules: query.rules
+        .map((rule) => {
+          if (!data_query) return rule;
+          data_query.forEach((query) => {
+            if (rule.dataQuery.includes(query.i)) {
+              rule.value = query.v;
+              if (
+                isArray(rule.value) &&
+                rule.value.length > 1 &&
+                rule.operator === '='
+              ) {
+                rule.operator = 'in';
+              }
+            }
+          });
+          return rule;
+        })
+        .filter((rule) => rule.value),
+    };
+  }
+  return $formatQuery(query, ...args.slice(2));
+}
+
+export function debounce(func, wait = 300, id) {
+  if (typeof func !== 'function') return;
+  const name = id || func.name || 'generic';
+  if (timer[name]) clearTimeout(timer[name]);
+  timer[name] = setTimeout(func, wait);
+}
+
+export function omitBy(obj, keys = []) {
+  return Object.keys(obj).reduce((acc, key) => {
+    if (!keys.includes(key)) {
+      acc[key] = obj[key];
+    }
+    return acc;
+  }, {});
+}
+
+export function getBasemap(data) {
+  if (!data) return {};
+  return {
+    name: data.basemap?.name || data.base?.base_layer,
+    url_template: data.basemap?.url_template || data.base?.custom_base_layer,
+  };
+}
+
+export function getLayers(data = {}, parseQuery = true) {
+  if (!data?.layers) return [];
+  const { data_query } = data;
+  const renderer = getOldRenderer(data.styles);
+
+  return (
+    (
+      (Array.isArray(data.layers) ? data.layers : data.layers?.map_layers) || []
+    )?.map(($layer) => {
+      const layer = $layer.map_layer ? $layer.map_layer?.layer : $layer;
+      const url = $layer.url ?? $layer.map_layer?.map_service_url;
+      const subLayers = getLayers({ layers: $layer.subLayers, data_query });
+
+      let definitionExpression =
+        layer.definitionExpression || data.definitionExpression;
+
+      try {
+        definitionExpression =
+          parseQuery && definitionExpression
+            ? formatQuery(definitionExpression, data_query, 'sql')
+            : definitionExpression;
+      } catch {}
+
+      return {
+        ...(renderer ? { renderer } : {}),
+        ...omitBy(layer, ['geometryType', 'blendMode', 'definitionExpression']),
+        ...(definitionExpression ? { definitionExpression } : {}),
+        blendMode: layer.blendMode ?? 'normal',
+        url,
+        title: layer.name,
+        subLayers: subLayers.length > 0 ? subLayers : null,
+      };
+    }) || []
+  );
+}
+
+export function getLayerDefaults(layer = {}) {
+  const renderer = layer.drawingInfo?.renderer;
+  return {
+    minScale: layer.minScale,
+    maxScale: layer.maxScale,
+    renderer: renderer ? { ...renderer, autocast: false } : undefined,
+    blendMode: layer.blendMode || 'normal',
+    opacity: 1,
+  };
+}
+
+export function getWidgets(data = {}) {
+  return data.widgets ?? getDefaultWidgets(data.settings?.map?.dimension);
+}
+
+export function getOldRenderer(styles) {
+  if (!styles) return;
+  return {
+    type: 'simple',
+    autocast: true,
+    symbol: {
+      type: 'simple-fill',
+      color: styles?.symbol_color
+        ? styles?.symbol_color?.rgb
+        : {
+            r: 0,
+            g: 0,
+            b: 0,
+            a: 1,
+          },
+      style: 'solid',
+      outline: {
+        color: styles?.outline_color
+          ? styles?.outline_color?.rgb
+          : {
+              r: 0,
+              g: 0,
+              b: 0,
+              a: 1,
+            },
+        width: styles?.outline_width ? styles?.outline_width : 1,
+      },
+    },
+  };
+}

package/src/Blocks/EmbedEEAMap/Edit.jsx

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react';
+import { Message } from 'semantic-ui-react';
+
+import { SidebarPortal } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
+
+import { schema } from './schema';
+import View from './View';
+
+const Edit = (props) => {
+  const { block, onChangeBlock, selected, data } = props;
+
+  const url = useMemo(() => flattenToAppURL(data.vis_url), [data.vis_url]);
+
+  return (
+    <>
+      {!url && (
+        <Message>Please select a "Map (simple)" from block editor.</Message>
+      )}
+      <View {...props} mode="edit" />
+      <SidebarPortal selected={selected}>
+        <BlockDataForm
+          block={block}
+          title={schema.title}
+          schema={schema}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          formData={data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default Edit;

package/src/Blocks/EmbedEEAMap/View.jsx

@@ -0,0 +1,122 @@
+import React, { useMemo, useEffect } from 'react';
+import { v4 as uuid } from 'uuid';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import { getContent } from '@plone/volto/actions';
+import { PrivacyProtection } from '@eeacms/volto-embed';
+import { getLayers } from '@eeacms/volto-eea-map/Arcgis/helpers';
+import MapBuilder from '@eeacms/volto-eea-map/Arcgis/Map/MapBuilder';
+import Toolbar from '@eeacms/volto-eea-map/Toolbar/Toolbar';
+
+import { getMapData } from './helpers';
+
+const View = (props) => {
+  const { id, mode, data, getContent, content } = props;
+  const {
+    vis_url,
+    data_query_params,
+    enable_queries,
+    show_note = true,
+    show_more_info = true,
+    show_share = true,
+    dataprotection = { enabled: true },
+    height = '',
+  } = data;
+
+  const url = useMemo(() => flattenToAppURL(vis_url), [vis_url]);
+
+  const mapData = useMemo(() => getMapData({ content, data }), [content, data]);
+
+  const mapServiceURL = useMemo(() => {
+    const url = getLayers(mapData)?.[0]?.url;
+
+    if (url) {
+      return `${url}?f=jsapi`;
+    }
+    return '';
+  }, [mapData]);
+
+  const definitionExpression = useMemo(
+    () =>
+      enable_queries
+        ? {
+            id: uuid(),
+            combinator: 'and',
+            not: false,
+            rules: data_query_params
+              .map((query) => {
+                if (!query.alias || !query.i) {
+                  return null;
+                }
+                return {
+                  id: uuid(),
+                  dataQuery: [query.i],
+                  field: query.alias,
+                  operator: '=',
+                  value: '',
+                  valueSource: 'value',
+                };
+              })
+              .filter((query) => {
+                return query?.field;
+              }),
+          }
+        : null,
+    [data_query_params, enable_queries],
+  );
+
+  useEffect(() => {
+    if (mode !== 'edit') return;
+    const mapPath = flattenToAppURL(mapData['@id'] || '');
+    if (!mapData?.error && url && url !== mapPath) {
+      getContent(url, null, id);
+    }
+  }, [id, mode, url, mapData, getContent]);
+
+  if (!mapData || !url) {
+    return null;
+  }
+
+  if (mapData?.error) {
+    return <p dangerouslySetInnerHTML={{ __html: mapData.error }} />;
+  }
+
+  return (
+    <PrivacyProtection
+      {...props}
+      data={mapServiceURL ? { ...data, url: mapServiceURL } : data}
+    >
+      <div className="embed-map-visualization">
+        <MapBuilder
+          data={mapData}
+          properties={{ ...(props.properties || {}), definitionExpression }}
+          height={height}
+        />
+        <Toolbar
+          style={{ marginTop: '1rem' }}
+          data={{
+            ...data,
+            show_note,
+            show_sources: true,
+            show_more_info,
+            show_share,
+            dataprotection,
+            mapData,
+          }}
+        />
+      </div>
+    </PrivacyProtection>
+  );
+};
+
+export default compose(
+  connect(
+    (state, props) => {
+      return {
+        content: state.content.subrequests?.[props.id]?.data,
+      };
+    },
+    { getContent },
+  ),
+)(View);

package/src/Blocks/EmbedEEAMap/helpers.js

@@ -0,0 +1,12 @@
+import { pickMetadata } from '@eeacms/volto-embed/helpers';
+
+function getMapData({ content = {}, data }) {
+  const map_visualization_data =
+    content?.map_visualization_data || data?.map_visualization_data || {};
+  return {
+    ...pickMetadata(content),
+    ...map_visualization_data,
+  };
+}
+
+export { getMapData };

package/src/Blocks/EmbedEEAMap/schema.js

@@ -0,0 +1,126 @@
+const protectionSchema = {
+  title: 'Data Protection',
+
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: [
+        'privacy_statement',
+        'privacy_cookie_key',
+        'enabled',
+        'background_image',
+      ],
+    },
+  ],
+
+  properties: {
+    privacy_statement: {
+      title: 'Privacy statement',
+      description: 'Defined in template. Change only if necessary',
+      widget: 'slate_richtext',
+      className: 'slate-Widget',
+      defaultValue: [
+        {
+          children: [
+            {
+              text: 'This map is hosted by a third party, Environmental Systems Research Institute. By showing the external content you accept the terms and conditions of ',
+            },
+            {
+              type: 'a',
+              url: 'https://www.esri.com',
+              children: [
+                {
+                  text: 'esri.com',
+                },
+              ],
+            },
+            {
+              text: '. This includes their cookie policies, which we have no control over.',
+            },
+          ],
+        },
+      ],
+    },
+    privacy_cookie_key: {
+      title: 'Privacy cookie key',
+      description: 'Use default for Esri maps, otherwise change',
+      defaultValue: 'esri-maps',
+    },
+    enabled: {
+      title: 'Data protection disclaimer enabled',
+      description: 'Enable/disable the privacy protection',
+      type: 'boolean',
+    },
+    background_image: {
+      title: 'Static map preview image',
+      widget: 'file',
+      required: true,
+    },
+  },
+
+  required: ['background_image'],
+};
+
+export const schema = {
+  title: 'Embed Map layers (ArcGis)',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['vis_url', 'description', 'height'],
+    },
+    {
+      id: 'toolbar',
+      title: 'Toolbar',
+      fields: ['show_note', 'show_more_info', 'show_share'],
+    },
+    {
+      fields: ['dataprotection'],
+      title: 'Data Protection',
+    },
+  ],
+  properties: {
+    vis_url: {
+      widget: 'internal_url',
+      title: 'Visualization',
+    },
+    height: {
+      title: 'Height',
+      description:
+        'Map block height in px. Default is 500px. Change only if necessary',
+      type: 'number',
+    },
+    description: {
+      title: 'Description',
+      widget: 'slate',
+    },
+    show_note: {
+      title: 'Show note',
+      type: 'boolean',
+      defaultValue: true,
+    },
+    show_sources: {
+      title: 'Show sources',
+      description: 'Will show sources set in this page Data provenance',
+      type: 'boolean',
+      defaultValue: true,
+    },
+    show_more_info: {
+      title: 'Show more info',
+      type: 'boolean',
+      defaultValue: true,
+    },
+    show_share: {
+      title: 'Show share button',
+      type: 'boolean',
+      defaultValue: true,
+    },
+    dataprotection: {
+      widget: 'object',
+      schema: protectionSchema,
+      default: { enabled: true },
+    },
+  },
+  required: [],
+};

package/src/{components → Toolbar}/Share.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Popup, Input, Button } from 'semantic-ui-react';
-import { useCopyToClipboard } from '../utils.js';
+import useCopyToClipboard from '@eeacms/volto-eea-map/hooks/useCopyToClipboard';
 import cx from 'classnames';
 
 const Share = ({ contentTypeLink = '' }) => {

package/src/{components/ExtraViews.jsx → Toolbar/Toolbar.jsx}

@@ -8,29 +8,26 @@ import {
   MoreInfo,
   Share,
 } from '@eeacms/volto-embed/Toolbar';
-import LegendView from '@eeacms/volto-eea-map/components/LegendView';
 
 import '@eeacms/volto-embed/Toolbar/styles.less';
 
-const ExtraViews = ({ data, screen }) => {
-  const toolbar = useRef();
+const Toolbar = ({ data, screen, style }) => {
+  const el = useRef();
   const [mobile, setMobile] = useState(false);
   const {
-    map_visualization_data = {},
+    mapData = {},
     description,
-    show_legend,
-    show_viewer,
     show_note = true,
     show_sources = true,
     show_more_info = true,
     show_share = true,
   } = data;
 
-  const { data_provenance = {}, figure_note = [] } = map_visualization_data;
+  const { data_provenance = {}, figure_note = [] } = mapData;
 
   useEffect(() => {
-    if (toolbar.current) {
-      const toolbarParentWidth = toolbar.current.parentElement.offsetWidth;
+    if (el.current) {
+      const toolbarParentWidth = el.current.parentElement.offsetWidth;
 
       if (toolbarParentWidth < 600 && !mobile) {
         setMobile(true);
@@ -42,17 +39,18 @@ const ExtraViews = ({ data, screen }) => {
 
   return (
     <>
-      {show_legend && map_visualization_data && (
-        <LegendView data={map_visualization_data} show_viewer={show_viewer} />
-      )}
-      <div className={cx('visualization-toolbar', { mobile })} ref={toolbar}>
+      <div
+        className={cx('visualization-toolbar', { mobile })}
+        style={style}
+        ref={el}
+      >
         <div className="left-col">
           {show_note && <FigureNote notes={figure_note || []} />}
           {show_sources && <Sources sources={data_provenance?.data} />}
-          {show_more_info && <MoreInfo href={map_visualization_data['@id']} />}
+          {show_more_info && <MoreInfo href={mapData['@id']} />}
         </div>
         <div className="right-col">
-          {show_share && <Share href={map_visualization_data['@id']} />}
+          {show_share && <Share href={mapData['@id']} />}
         </div>
       </div>
       {description && serializeNodes(description)}
@@ -62,4 +60,4 @@ const ExtraViews = ({ data, screen }) => {
 
 export default connect((state) => ({
   screen: state.screen,
-}))(ExtraViews);
+}))(Toolbar);