@eeacms/volto-eea-map 4.0.0 → 5.0.0

package/CHANGELOG.md

@@ -4,7 +4,42 @@ 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).
 
-### [4.0.0](https://github.com/eea/volto-eea-map/compare/3.3.1...4.0.0) - 22 April 2024
+### [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
+
+- Update package.json [ichim-david - [`52e141a`](https://github.com/eea/volto-eea-map/commit/52e141a3fab57904c4acb5e7e412c079f78fb0e0)]
+- bump cypress version to 13.1.0 which is what is used by volto 17 [David Ichim - [`01abef9`](https://github.com/eea/volto-eea-map/commit/01abef9089385ee0b672e09aa37c1bf89d9f21b6)]
+## [4.0.0](https://github.com/eea/volto-eea-map/compare/3.3.1...4.0.0) - 22 April 2024
 
 #### :rocket: New Features
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "4.0.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,20 +21,23 @@
     "@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",
-    "cypress": "10.3.1",
+    "cypress": "13.1.0",
     "cypress-fail-fast": "^5.0.1",
     "dotenv": "^16.3.2",
     "husky": "^8.0.3",

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