@eeacms/volto-eea-map 4.1.0 → 5.0.0

package/CHANGELOG.md

@@ -4,6 +4,35 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [5.0.0](https://github.com/eea/volto-eea-map/compare/4.1.0...5.0.0) - 25 July 2024
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`aadf771`](https://github.com/eea/volto-eea-map/commit/aadf771b40e0a190c29de42d99466d2e6ef440e7)]
+- style: Automated code fix [eea-jenkins - [`edfae3b`](https://github.com/eea/volto-eea-map/commit/edfae3b8ab4cdef23ae23ed7ea008043601dd783)]
+- style: Automated code fix [eea-jenkins - [`fd6c49f`](https://github.com/eea/volto-eea-map/commit/fd6c49f6d0d5081a230f9b4427844eace0321361)]
+- style: Automated code fix [eea-jenkins - [`5bcee12`](https://github.com/eea/volto-eea-map/commit/5bcee12ab667ad89096baae214ade24fa1c98fd1)]
+- style: Automated code fix [eea-jenkins - [`9bf0079`](https://github.com/eea/volto-eea-map/commit/9bf0079694c16fa20c857f896e303850cf67da43)]
+- style: Automated code fix [eea-jenkins - [`3d9adb6`](https://github.com/eea/volto-eea-map/commit/3d9adb6cee7ff1c45ae88d816e7f17de4bbaba37)]
+- style: Automated code fix [eea-jenkins - [`f310427`](https://github.com/eea/volto-eea-map/commit/f3104279ad719b16a149a357c0eab2f8b7fd8ef7)]
+- style: Automated code fix [eea-jenkins - [`fcf5adf`](https://github.com/eea/volto-eea-map/commit/fcf5adf32a73d388d97597dd9c88c3da362f90b8)]
+
+#### :hammer_and_wrench: Others
+
+- remove uneeded logo [Miu Razvan - [`759a07b`](https://github.com/eea/volto-eea-map/commit/759a07b587b8298d88800346a230fd55304aadf9)]
+- fix bugs [Miu Razvan - [`ccccc8a`](https://github.com/eea/volto-eea-map/commit/ccccc8a1fac321d3968ffdc0843ff87138748476)]
+- fix infinite rerenders [Miu Razvan - [`8dbb501`](https://github.com/eea/volto-eea-map/commit/8dbb5016741f2518668cfe1d40abe1484b53bfc3)]
+- lint fix [Miu Razvan - [`56c2138`](https://github.com/eea/volto-eea-map/commit/56c2138099d7425e21a566cb13fee814acdaea68)]
+- merge origin/develop into revamp branch [Miu Razvan - [`01ea06c`](https://github.com/eea/volto-eea-map/commit/01ea06ccad2b337a28f4e5847116a41bdda749e3)]
+- fix zoom to layer extent [Miu Razvan - [`28bc084`](https://github.com/eea/volto-eea-map/commit/28bc08456fbaa66938e8d0bf5f25ceaff753fae3)]
+- finalize eea-map refactoring [Miu Razvan - [`3c6abf9`](https://github.com/eea/volto-eea-map/commit/3c6abf998e3fdca55b1e81a0553749ee90bfbcd6)]
+- update [Miu Razvan - [`65205bc`](https://github.com/eea/volto-eea-map/commit/65205bc494f1d3c1b381ed6f9af01ed022e87c75)]
+- Update [Miu Razvan - [`13468a3`](https://github.com/eea/volto-eea-map/commit/13468a3c6738e612115535813e64b0a6af4c97d7)]
+- wip [Miu Razvan - [`901fcc3`](https://github.com/eea/volto-eea-map/commit/901fcc318c618c0307a64081002ab4a048be70a7)]
+- Update [Miu Razvan - [`d70dcf2`](https://github.com/eea/volto-eea-map/commit/d70dcf293b1395741ccbc524fa19145c829f72a9)]
+- Update [Miu Razvan - [`a35b941`](https://github.com/eea/volto-eea-map/commit/a35b941700d985c6f3b53247cb60ecc103c4f339)]
+- Widget component + other [Miu Razvan - [`291f5ad`](https://github.com/eea/volto-eea-map/commit/291f5ad97945cacb1bc4c6d12d177f232b907184)]
+- update [Miu Razvan - [`b073166`](https://github.com/eea/volto-eea-map/commit/b073166de8be0b709e5b2ec397ba9d768c8c2fc8)]
 ### [4.1.0](https://github.com/eea/volto-eea-map/compare/4.0.0...4.1.0) - 7 June 2024
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "4.1.0",
+  "version": "5.0.0",
   "description": "@eeacms/volto-eea-map: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -21,16 +21,19 @@
     "@eeacms/volto-object-widget"
   ],
   "dependencies": {
+    "@arcgis/core": "4.29.10",
     "@eeacms/volto-embed": "*",
     "@eeacms/volto-object-widget": "*",
     "@plone/scripts": "*",
     "esri-loader": "3.6.0",
+    "jsoneditor": "10.1.0",
     "lodash": "4.17.21",
     "razzle-plugin-scss": "4.2.18",
     "react-color": "~2.19.3",
-    "react-querybuilder": "4.2.3"
+    "react-querybuilder": "6.5.5"
   },
   "devDependencies": {
+    "@babel/preset-env": "7.24.6",
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",

package/src/Arcgis/Editor/Editor.jsx

@@ -0,0 +1,130 @@
+import { memo, useRef, useState, useMemo } from 'react';
+import { isNil } from 'lodash';
+
+import SidebarGroup from './SidebarGroup';
+
+import _MapBuilder from '../Map/MapBuilder';
+
+import {
+  StructureBaseLayerPanel,
+  StructureLayersPanel,
+  StructureWidgetsPanel,
+  SettingsGeneralPanel,
+  SettingsLayersPanel,
+} from './Panels';
+
+import EditorContext from './EditorContext';
+
+import 'react-querybuilder/dist/query-builder.css';
+import 'jsoneditor/dist/jsoneditor.min.css';
+
+const MapBuilder = memo(_MapBuilder);
+
+const panels = {
+  structure: [
+    {
+      title: 'Base layer',
+      Panel: StructureBaseLayerPanel,
+    },
+    {
+      title: 'Layers',
+      Panel: StructureLayersPanel,
+    },
+    {
+      title: 'Widgets',
+      Panel: StructureWidgetsPanel,
+    },
+  ],
+  settings: [
+    { title: 'General', Panel: SettingsGeneralPanel },
+    { title: 'Layers', Panel: SettingsLayersPanel },
+  ],
+};
+
+function useApi() {
+  const [data, setData] = useState({});
+  const [loading, setLoading] = useState({});
+  const [loaded, setLoaded] = useState({});
+  const [error, setError] = useState({});
+
+  const load = async (url, opts) => {
+    if (data[url]) return data[url];
+    let response, result;
+    setLoading((prev) => ({ ...prev, [url]: true }));
+    try {
+      response = await fetch(`${url}?f=json`, opts);
+    } catch {
+      response = { ok: false, statusText: 'Unexpected error' };
+    }
+    try {
+      result = await response.json();
+    } catch {
+      result = response.ok
+        ? {
+            code: 500,
+            message: 'Unexpected error',
+          }
+        : {
+            code: response.status,
+            message: response.statusText,
+          };
+    }
+
+    if (!response.ok || (!isNil(result.code) && result.code !== 200)) {
+      setData((prev) => ({ ...prev, [url]: null }));
+      setError((prev) => ({ ...prev, [url]: result }));
+      setLoading((prev) => ({ ...prev, [url]: false }));
+      setLoaded((prev) => ({ ...prev, [url]: false }));
+      return;
+    }
+    setData((prev) => ({ ...prev, [url]: result }));
+    setError((prev) => ({ ...prev, [url]: null }));
+    setLoading((prev) => ({ ...prev, [url]: false }));
+    setLoaded((prev) => ({ ...prev, [url]: true }));
+  };
+
+  return { data, loading, loaded, error, load };
+}
+
+export default function Editor({ value, properties, onChangeValue }) {
+  const $map = useRef(null);
+  const [active, setActive] = useState({
+    sidebar: 'structure',
+    panel: panels.structure[0],
+  });
+  const servicesApi = useApi();
+  const layersApi = useApi();
+
+  const Panel = useMemo(() => active.panel.Panel, [active]);
+
+  return (
+    <EditorContext.Provider value={{ servicesApi, layersApi }}>
+      <div className="arcgis-map__editor">
+        <div className="arcgis-map__controls">
+          <div className="arcgis-map__sidebar">
+            {Object.keys(panels).map((panel) => (
+              <SidebarGroup
+                key={panel}
+                title={panel}
+                items={panels[panel]}
+                active={active}
+                setActive={setActive}
+              />
+            ))}
+          </div>
+          <div className="arcgis-map__panel">
+            <Panel
+              $map={$map}
+              value={value}
+              properties={properties}
+              onChangeValue={onChangeValue}
+            />
+          </div>
+        </div>
+        <div className="arcgis-map__view">
+          <MapBuilder data={value} ref={$map} />
+        </div>
+      </div>
+    </EditorContext.Provider>
+  );
+}

package/src/Arcgis/Editor/EditorContext.jsx

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export default createContext(null);

package/src/Arcgis/Editor/Fold/Fold.jsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import cx from 'classnames';
+
+import { Icon } from '@plone/volto/components';
+
+import clearSVG from '@plone/volto/icons/clear.svg';
+import upKeySVG from '@plone/volto/icons/up-key.svg';
+
+export default function Fold({
+  children,
+  title,
+  icon,
+  foldable,
+  deletable,
+  onDelete,
+}) {
+  const [fold, setFold] = useState(false);
+
+  const isfolded = foldable && fold;
+
+  return (
+    <div className={cx('fold', { fold__open: !isfolded, foldable })}>
+      <div
+        className="fold--top"
+        {...(foldable
+          ? {
+              role: 'button',
+              tabIndex: 0,
+              onClick: () => setFold(!fold),
+              onKeyDown: () => {},
+            }
+          : {})}
+      >
+        <div className="fold--top__content">
+          {foldable && (
+            <Icon name={upKeySVG} className="fold--top__fold" size="16px" />
+          )}
+          {!!icon && <Icon name={icon} size="16px" />}
+          {!!title && <div className="fold--top__title">{title}</div>}
+        </div>
+        {deletable && (
+          <Icon
+            name={clearSVG}
+            className="fold--top__delete"
+            size="16px"
+            onClick={(e) => {
+              onDelete(e);
+              e.stopPropagation();
+            }}
+          />
+        )}
+      </div>
+      {!isfolded && <div className="fold--content">{children}</div>}
+    </div>
+  );
+}

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

@@ -0,0 +1,8 @@
+export default function Panel({ header, content }) {
+  return (
+    <div className="panel">
+      {!!header && <div className="panel--header">{header}</div>}
+      {!!content && <div className="panel--content">{content}</div>}
+    </div>
+  );
+}

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

@@ -0,0 +1,217 @@
+import { toNumber } from 'lodash';
+import { InlineForm } from '@plone/volto/components';
+import Panel from './Panel';
+import Fold from '../Fold/Fold';
+import { getDefaultWidgets } from '@eeacms/volto-eea-map/constants';
+
+const mapSchema = {
+  title: '',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['dimension'],
+    },
+  ],
+  properties: {
+    dimension: {
+      title: 'Dimension',
+      choices: [
+        ['2d', '2D'],
+        ['3d', '3D'],
+      ],
+    },
+  },
+  required: [],
+};
+
+const getViewConstraintsSchema = ({ $map }) => {
+  return {
+    title: 'Map View',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['initialExtent'],
+      },
+      {
+        id: 'constraints',
+        title: 'Constraints',
+        fields: [
+          'minScale',
+          'maxScale',
+          'minZoom',
+          'maxZoom',
+          'rotationEnabled',
+        ],
+      },
+    ],
+    properties: {
+      initialExtent: {
+        title: 'Initial viewpoint',
+        widget: 'arcgis_viewpoint',
+        $map,
+      },
+      minScale: {
+        title: 'Min scale',
+        type: 'number',
+        minimum: 0,
+      },
+      maxScale: {
+        title: 'Max scale',
+        type: 'number',
+        minimum: 0,
+      },
+      minZoom: {
+        title: 'Min zoom',
+        type: 'number',
+        minimum: 0,
+      },
+      maxZoom: {
+        title: 'Max zoom',
+        type: 'number',
+        minimum: 0,
+      },
+      rotationEnabled: {
+        title: 'Rotation enabled',
+        type: 'boolean',
+      },
+    },
+    required: [],
+  };
+};
+
+export default function SettingsGeneralPanel({ $map, value, onChangeValue }) {
+  const viewConstraints = value.settings?.view?.constraints || {};
+  const dimension = value.settings?.map?.dimension || '2d';
+
+  return (
+    <Panel
+      content={
+        <>
+          <Fold
+            title={
+              <>
+                <a
+                  href="https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                  style={{ color: '#fff' }}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Map
+                </a>
+              </>
+            }
+            foldable
+          >
+            <InlineForm
+              schema={mapSchema}
+              formData={{
+                ...(value.settings?.map || {}),
+                dimension: value.settings?.map?.dimension || '2d',
+              }}
+              onChangeField={(id, fieldValue) => {
+                let $fieldValue = fieldValue;
+
+                onChangeValue({
+                  ...value,
+                  ...(id === 'dimension'
+                    ? {
+                        widgets: getDefaultWidgets($fieldValue),
+                      }
+                    : {}),
+                  settings: {
+                    ...(value.settings || {}),
+                    map: {
+                      ...(value.settings?.map || {}),
+                      [id]: $fieldValue,
+                    },
+                  },
+                });
+              }}
+            />
+          </Fold>
+          {dimension === '2d' && (
+            <Fold
+              title={
+                <>
+                  <a
+                    href="https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                    }}
+                    style={{ color: '#fff' }}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    View
+                  </a>
+                </>
+              }
+              foldable
+            >
+              <InlineForm
+                schema={getViewConstraintsSchema({ $map })}
+                formData={{
+                  initialExtent: {
+                    longitude: value.settings?.view?.center?.[0],
+                    latitude: value.settings?.view?.center?.[1],
+                    zoom: value.settings?.view?.zoom,
+                  },
+                  ...viewConstraints,
+                }}
+                onChangeField={(id, fieldValue) => {
+                  let $fieldValue = fieldValue;
+
+                  if (
+                    ['minScale', 'maxScale', 'minZoom', 'maxZoom'].includes(id)
+                  ) {
+                    $fieldValue = Math.max(toNumber(fieldValue) || 0, 0);
+                  }
+
+                  if (id === 'initialExtent') {
+                    const center = [
+                      $fieldValue.longitude || 0,
+                      $fieldValue.latitude || 0,
+                    ];
+                    const zoom = $fieldValue.zoom;
+
+                    onChangeValue({
+                      ...value,
+                      settings: {
+                        ...(value.settings || {}),
+                        view: {
+                          ...(value.settings?.view || {}),
+                          center,
+                          zoom,
+                        },
+                      },
+                    });
+                    return;
+                  }
+
+                  onChangeValue({
+                    ...value,
+                    settings: {
+                      ...(value.settings || {}),
+                      view: {
+                        ...(value.settings?.view || {}),
+                        constraints: {
+                          ...(value.settings?.view?.constraints || {}),
+                          [id]: $fieldValue,
+                        },
+                      },
+                    },
+                  });
+                }}
+              />
+            </Fold>
+          )}
+        </>
+      }
+    />
+  );
+}

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

@@ -0,0 +1,216 @@
+import { useState, useEffect, useContext, useMemo } from 'react';
+import { Segment, Dimmer, Loader } from 'semantic-ui-react';
+import { isNil, toNumber } from 'lodash';
+import { v4 as uuid } from 'uuid';
+import { InlineForm } from '@plone/volto/components';
+import {
+  debounce,
+  getLayers,
+  getLayerDefaults,
+} from '@eeacms/volto-eea-map/Arcgis/helpers';
+import { blendModes } from '@eeacms/volto-eea-map/constants';
+import EditorContext from '@eeacms/volto-eea-map/Arcgis/Editor/EditorContext';
+import Panel from './Panel';
+import Fold from '../Fold/Fold';
+
+function Layer({ $map, layer, layers, index, value, onChangeValue }) {
+  const uid = useState(uuid());
+  const [isReady, setIsReady] = useState(false);
+  const { layersApi } = useContext(EditorContext);
+
+  const layerPath = useMemo(
+    () =>
+      !isNil(layer.url) && !isNil(layer.id) ? `${layer.url}/${layer.id}` : null,
+    [layer.url, layer.id],
+  );
+
+  const $layer = useMemo(
+    () => ({
+      data: layersApi.data[layerPath],
+      error: layersApi.error[layerPath],
+      loading: layersApi.loading[layerPath],
+      loaded: layersApi.loaded[layerPath],
+      load: layersApi.load,
+    }),
+    [layersApi, layerPath],
+  );
+
+  const schema = useMemo(
+    () => ({
+      title: 'General',
+      fieldsets: [
+        {
+          id: 'default',
+          title: 'Default',
+          fields: ['blendMode', 'minScale', 'maxScale', 'opacity', 'renderer'],
+        },
+      ],
+      properties: {
+        blendMode: {
+          title: 'Blend mode',
+          choices: blendModes,
+        },
+        minScale: {
+          title: 'Min scale',
+          type: 'number',
+          minimum: 0,
+        },
+        maxScale: {
+          title: 'Max scale',
+          type: 'number',
+          minimum: 0,
+        },
+        opacity: {
+          title: 'Opacity',
+          widget: 'arcgis_slider',
+        },
+        renderer: {
+          title: 'Renderer',
+          widget: 'arcgis_renderer',
+          $map,
+        },
+      },
+      required: [],
+    }),
+    [$map],
+  );
+
+  useEffect(() => {
+    if (!$layer.loaded && !$layer.loading && !$layer.error && layerPath) {
+      debounce(
+        () => {
+          $layer.load(layerPath);
+        },
+        300,
+        `fetch:${uid}:${layerPath}`,
+      );
+    }
+  }, [uid, $layer, layerPath]);
+
+  useEffect(() => {
+    if (!$layer.loaded || $layer.data.id !== layer.id) return;
+    const defaults = getLayerDefaults($layer.data);
+    if (JSON.stringify(defaults) !== JSON.stringify(layer.defaults)) {
+      onChangeValue({
+        ...value,
+        layers: layers.map((layer, i) => {
+          if (i !== index) return layer;
+          return {
+            ...layer,
+            defaults,
+          };
+        }),
+      });
+    }
+    setIsReady(true);
+  }, [index, layer, $layer, layers, value, onChangeValue]);
+
+  if (!isReady) return null;
+
+  return (
+    <>
+      <Dimmer active={$layer.loading}>
+        <Loader />
+      </Dimmer>
+
+      <InlineForm
+        schema={schema}
+        formData={{
+          ...(layer.defaults || {}),
+          ...layer,
+        }}
+        onChangeField={(id, fieldValue) => {
+          let $fieldValue = fieldValue;
+
+          if (
+            ['minScale', 'maxScale', 'minZoom', 'maxZoom', 'opacity'].includes(
+              id,
+            )
+          ) {
+            $fieldValue = Math.max(toNumber(fieldValue) || 0, 0);
+          }
+
+          onChangeValue({
+            ...value,
+            layers: layers.map((layer, i) => {
+              if (i !== index) return layer;
+              return {
+                ...layer,
+                [id]: $fieldValue,
+              };
+            }),
+          });
+        }}
+      />
+      {layer.defaults && (
+        <Segment attached style={{ textAlign: 'right' }}>
+          <button
+            className="btn-primary"
+            onClick={() => {
+              const defaults = { ...layer };
+              Object.keys(schema.properties).forEach((key) => {
+                if (key in layer.defaults) {
+                  defaults[key] = layer.defaults[key];
+                }
+              });
+              onChangeValue({
+                ...value,
+                layers: layers.map((layer, i) => {
+                  if (i !== index) return layer;
+                  return defaults;
+                }),
+              });
+            }}
+          >
+            Defaults
+          </button>
+        </Segment>
+      )}
+    </>
+  );
+}
+
+export default function SettingsLayersPanel({
+  $map,
+  value,
+  properties,
+  onChangeValue,
+}) {
+  const data_query = properties?.data_query;
+
+  const layers = useMemo(
+    () =>
+      getLayers(
+        { layers: value.layers, styles: value.styles, data_query },
+        false,
+      ),
+    [value.layers, value.styles, data_query],
+  );
+
+  return (
+    <Panel
+      content={
+        <>
+          {layers.map((layer, index) => (
+            <Fold
+              key={index}
+              title={`Layer ${index + 1}${
+                layer.name ? ` - ${layer.name}` : ''
+              }`}
+              foldable
+            >
+              <Layer
+                $map={$map}
+                layer={layer}
+                layers={layers}
+                index={index}
+                value={value}
+                onChangeValue={onChangeValue}
+              />
+            </Fold>
+          ))}
+        </>
+      }
+    />
+  );
+}