@eeacms/volto-eea-map 4.1.0 → 5.0.1

package/src/Arcgis/Editor/Panels/StructureWidgetsPanel.jsx

@@ -0,0 +1,181 @@
+import { useState } from 'react';
+import { Icon, InlineForm } from '@plone/volto/components';
+import { withVariationSchemaEnhancer } from '@plone/volto/helpers';
+import addSVG from '@plone/volto/icons/add.svg';
+import Panel from './Panel';
+import Fold from '../Fold/Fold';
+import { debounce, getWidgets } from '../../helpers';
+import {
+  expandKeys,
+  positions,
+  widgets as widgetsOptions,
+  getDefaultWidgets,
+  widgetsSchema,
+} from '@eeacms/volto-eea-map/constants';
+
+const Form = withVariationSchemaEnhancer(InlineForm);
+
+export default function StructureWidgetsPanel({ value, onChangeValue }) {
+  const [widgets, setWidgets] = useState(getWidgets(value));
+
+  return (
+    <Panel
+      header={
+        <div style={{ width: '100%', textAlign: 'right' }}>
+          <button
+            className="btn-primary"
+            onClick={() => {
+              const newWidgets = [
+                ...widgets,
+                { name: null, position: positions[0] },
+              ];
+              setWidgets(newWidgets);
+              debounce(
+                () => {
+                  onChangeValue({
+                    ...value,
+                    widgets: newWidgets,
+                  });
+                },
+                600,
+                'widgets:update',
+              );
+            }}
+          >
+            <Icon name={addSVG} size="16px" /> Widget
+          </button>
+        </div>
+      }
+      content={
+        <>
+          {widgets.map((widget, index) => {
+            const title = `Widget ${index + 1}${
+              widget.name ? ` (${widget.name})` : ''
+            }`;
+            const ExpandProperties = widget.ExpandProperties || {};
+            return (
+              <Fold
+                key={index}
+                title={title}
+                onDelete={() => {
+                  const newWidgets = widgets.filter((_, i) => i !== index);
+                  setWidgets(newWidgets);
+                  debounce(
+                    () => {
+                      onChangeValue({
+                        ...value,
+                        widgets: newWidgets,
+                      });
+                    },
+                    600,
+                    'widgets:update',
+                  );
+                }}
+                foldable
+                deletable
+              >
+                <Form
+                  schema={{
+                    title,
+                    fieldsets: [
+                      {
+                        id: 'default',
+                        title: 'Default',
+                        fields: ['name', 'position', 'expand'],
+                      },
+                    ],
+                    properties: {
+                      name: {
+                        title: 'Name',
+                        choices: widgetsOptions,
+                      },
+                      position: {
+                        title: 'Position',
+                        choices: positions,
+                      },
+                      expand: {
+                        title: 'Expand',
+                        type: 'boolean',
+                      },
+                      expandTooltip: {
+                        title: 'Expand tooltip',
+                      },
+                    },
+                    required: [],
+                  }}
+                  blocksConfig={{
+                    widget: {
+                      schemaEnhancer: ({ schema, formData }) => {
+                        return {
+                          ...schema,
+                          fieldsets: [
+                            {
+                              id: 'default',
+                              title: 'Default',
+                              fields: [
+                                'name',
+                                'position',
+                                ...Object.keys(
+                                  widgetsSchema[formData.name] || {},
+                                ),
+                                'expand',
+                                ...(formData.expand ? ['expandTooltip'] : []),
+                              ],
+                            },
+                          ],
+                          properties: {
+                            ...schema.properties,
+                            ...(widgetsSchema[formData.name] || {}),
+                          },
+                        };
+                      },
+                    },
+                  }}
+                  formData={{
+                    '@type': 'widget',
+                    ...widget,
+                    ...ExpandProperties,
+                  }}
+                  onChangeField={(id, fieldValue) => {
+                    const newWidget =
+                      id === 'name'
+                        ? getDefaultWidgets(
+                            value.settings?.map?.dimension,
+                          ).find(($widget) => $widget.name === fieldValue) || {}
+                        : {};
+                    const newWidgets = widgets.map(($widget, i) => {
+                      if (i !== index) return $widget;
+                      return {
+                        ...$widget,
+                        ...newWidget,
+                        ...(expandKeys.includes(id)
+                          ? {
+                              ExpandProperties: {
+                                ...ExpandProperties,
+                                [id]: fieldValue,
+                              },
+                            }
+                          : { [id]: fieldValue }),
+                      };
+                    });
+                    setWidgets(newWidgets);
+                    debounce(
+                      () => {
+                        onChangeValue({
+                          ...value,
+                          widgets: newWidgets,
+                        });
+                      },
+                      600,
+                      'widgets:update',
+                    );
+                  }}
+                />
+              </Fold>
+            );
+          })}
+        </>
+      }
+    />
+  );
+}

package/src/Arcgis/Editor/Panels/index.js

@@ -0,0 +1,6 @@
+export { default as Panel } from './Panel';
+export { default as StructureBaseLayerPanel } from './StructureBaseLayerPanel';
+export { default as StructureLayersPanel } from './StructureLayersPanel';
+export { default as StructureWidgetsPanel } from './StructureWidgetsPanel';
+export { default as SettingsGeneralPanel } from './SettingsGeneralPanel';
+export { default as SettingsLayersPanel } from './SettingsLayersPanel';

package/src/Arcgis/Editor/SidebarGroup.jsx

@@ -0,0 +1,62 @@
+import { useEffect, useState, useMemo } from 'react';
+import cx from 'classnames';
+
+import { Icon } from '@plone/volto/components';
+
+import upKeySVG from '@plone/volto/icons/up-key.svg';
+
+export default function SidebarGroup({ title, items, active, setActive }) {
+  const [expanded, setExpanded] = useState(false);
+  const isActive = useMemo(
+    () =>
+      active.sidebar === title &&
+      items.filter((item) => active.panel.title === item.title).length === 1,
+    [active, title, items],
+  );
+
+  useEffect(() => {
+    if (isActive) {
+      setExpanded(true);
+    }
+  }, [isActive]);
+
+  return (
+    <div
+      className={cx('sidebar-group', {
+        'sidebar-group--expanded': expanded,
+        'sidebar-group--is-active': isActive,
+      })}
+    >
+      <div
+        role="button"
+        tabIndex={0}
+        className="sidebar-group--title"
+        onClick={() => setExpanded(!expanded)}
+        onKeyDown={() => {}}
+      >
+        <div className="sidebar-group--title__icon">
+          <Icon name={upKeySVG} size="20px" />
+        </div>
+        <div className="sidebar-group--title__label">{title}</div>
+      </div>
+      {expanded &&
+        items.map((item) => (
+          <div
+            role="button"
+            tabIndex={0}
+            key={item.title}
+            className={cx('sidebar-group--item', {
+              'sidebar-group--item__is-active':
+                isActive && active.panel.title === item.title,
+            })}
+            onClick={() => {
+              setActive({ sidebar: title, panel: item });
+            }}
+            onKeyDown={() => {}}
+          >
+            {item.title}
+          </div>
+        ))}
+    </div>
+  );
+}

package/src/Arcgis/Layer/Layer.jsx

@@ -0,0 +1,247 @@
+import { useContext, useEffect, useMemo, memo } from 'react';
+import { EventEmitter } from 'events';
+import { uniq, isObject, isNaN } from 'lodash';
+
+import useClass from '@eeacms/volto-eea-map/hooks/useClass';
+import useChangedProps from '@eeacms/volto-eea-map/hooks/useChangedProps';
+
+import { omitBy } from '@eeacms/volto-eea-map/Arcgis/helpers';
+import { layersMapping, withSublayers } from '@eeacms/volto-eea-map/constants';
+
+import MapContext from '@eeacms/volto-eea-map/Arcgis/Map/MapContext';
+
+let modules = {};
+
+class $Layer extends EventEmitter {
+  #isReady = false;
+  #props = {};
+  #layer = null;
+  #modulesLoaded = false;
+
+  constructor(props = {}) {
+    super();
+
+    this.#props = props;
+  }
+
+  get props() {
+    return this.#props;
+  }
+
+  get isReady() {
+    return this.#isReady && !!this.#layer;
+  }
+
+  get layer() {
+    return this.#layer;
+  }
+
+  set props(props = {}) {
+    this.#props = props;
+  }
+
+  getUrl(id) {
+    return this.#props.url
+      ? `${this.#props.url}${id ? `/${id}` : ''}`
+      : undefined;
+  }
+
+  getType(type) {
+    return layersMapping[type] || type?.replaceAll(' ', '');
+  }
+
+  getLayersTypes(layer) {
+    return uniq([
+      this.getType(layer.type),
+      ...(layer.subLayers || []).reduce((acc, layer) => {
+        acc.push(...this.getLayersTypes(layer));
+        return acc;
+      }, []),
+    ]);
+  }
+
+  getRenderer(renderer) {
+    const { $map } = this.#props;
+    const agJsonUtils = $map.modules.agJsonUtils;
+
+    if (!renderer) return;
+
+    if (renderer.autocast) {
+      return renderer;
+    }
+    return agJsonUtils.fromJSON(renderer);
+  }
+
+  async loadModules() {
+    const $arcgis = __CLIENT__ ? window.$arcgis : null;
+    if (__SERVER__ || !$arcgis) return Promise.reject();
+    if (!this.#modulesLoaded) {
+      const types = this.getLayersTypes(this.#props);
+      for (const type of types) {
+        if (!modules[`Ag${type}`] && type) {
+          modules[`Ag${type}`] = await $arcgis.import(`esri/layers/${type}`);
+        }
+      }
+      this.#modulesLoaded = true;
+    }
+    return Promise.resolve();
+  }
+
+  createLayer(props) {
+    const type = this.getType(props.type);
+
+    if (!type) return null;
+
+    const AgLayer = modules[`Ag${type}`];
+
+    if (!AgLayer) {
+      throw new Error('$Layer modules not loaded');
+    }
+
+    const renderer = this.getRenderer(props.renderer);
+
+    const layerProps = omitBy(props || {}, [
+      '$map',
+      'type',
+      'url',
+      'id',
+      'renderer',
+    ]);
+
+    if (renderer) {
+      layerProps.renderer = renderer;
+    }
+
+    const layer = new AgLayer(
+      withSublayers.includes(type)
+        ? {
+            url: this.getUrl(),
+            sublayers: props.sublayers || [layerProps],
+          }
+        : {
+            url: this.getUrl(props.id),
+            ...layerProps,
+          },
+    );
+
+    if (props.subLayers) {
+      props.subLayers.forEach((subLayer) => {
+        layer.add(this.createLayer(subLayer));
+      });
+    }
+
+    return layer;
+  }
+
+  init() {
+    const $map = this.#props.$map;
+    if (!$map.isReady || (!this.#props.url && !this.#props.source)) return;
+    if (!this.#modulesLoaded) {
+      throw new Error('$Layer modules not loaded');
+    }
+
+    this.#layer = this.createLayer(this.#props);
+
+    if (this.#layer?.queryExtent && this.#props.zoomToExtent) {
+      this.#layer.when(async () => {
+        const data = await this.#layer.queryExtent();
+        if (!$map.view) return;
+        $map.view.goTo(data.extent).then(() => {
+          const homeWidget = $map.view.ui.find('Home');
+          if (!homeWidget) return;
+          homeWidget.viewpoint = new $map.modules.AgViewpoint({
+            center: $map.view.center,
+            zoom: $map.view.zoom,
+          });
+        });
+      });
+    }
+
+    if (this.#layer) {
+      $map.map.add(this.#layer);
+    }
+
+    this.#isReady = true;
+
+    this.emit('connected');
+  }
+
+  updateProps(props) {
+    if (isNaN(props) || !isObject(props)) return;
+    Object.keys(props).forEach((key) => {
+      if (key === '$map') return;
+      this.#props[key] = props[key];
+    });
+    this.update(props);
+  }
+
+  update(props) {
+    const { $map } = this.#props;
+    if (!this.isReady || !$map.isReady) return;
+
+    Object.keys(
+      omitBy(props || this.#props || {}, ['$map', 'id', 'type', 'url']),
+    ).forEach((key) => {
+      switch (key) {
+        case 'renderer':
+          const renderer = this.getRenderer(this.#props[key]);
+          if (renderer) {
+            this.#layer.renderer = renderer;
+          }
+          break;
+        default:
+          this.#layer[key] = this.#props[key];
+          break;
+      }
+    });
+  }
+
+  connect() {
+    this.loadModules().then(() => {
+      this.init();
+    });
+  }
+
+  disconnect() {
+    this.#modulesLoaded = false;
+    if (!this.#isReady) return;
+    if (this.#layer) {
+      this.#layer.destroy();
+    }
+    this.#layer = null;
+    this.#isReady = false;
+    this.emit('disconnected');
+  }
+}
+
+// https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-Layer.html
+function Layer(props) {
+  const { $map } = useContext(MapContext);
+  const context = useMemo(() => ({ ...props, $map }), [props, $map]);
+
+  const $layer = useClass($Layer, context);
+
+  useChangedProps((props) => {
+    if (!$layer || !$map || !$map.isReady) return;
+    $layer.updateProps(props);
+  }, props);
+
+  useEffect(() => {
+    if (!$layer) return;
+
+    $layer.props = context;
+
+    $layer.connect();
+
+    return () => {
+      if (!$layer) return;
+      $layer.disconnect();
+    };
+    // We handle the props change in the useEffect above.
+    /* eslint-disable-next-line */
+  }, [$map, $layer, context.id, context.type, context.url, context.source]);
+
+  return null;
+}
+
+export default memo(Layer);