@eeacms/volto-eea-map 4.0.0 → 5.0.0

package/src/Widgets/ArcgisRendererWidget/RendererEditor/Simple.jsx

@@ -0,0 +1,109 @@
+import { toNumber } from 'lodash';
+
+import { InlineForm } from '@plone/volto/components';
+
+import { simpleSymbols as simpleSymbolsOptions } from '@eeacms/volto-eea-map/constants';
+
+import { simpleSymbols } from '../RendererEditor/_defaults';
+
+export default function Simple(props) {
+  const { $map, value, id, onChange } = props;
+
+  const symbol = value?.symbol || {};
+
+  return (
+    <InlineForm
+      schema={{
+        title: 'Symbol',
+        fieldsets: [
+          {
+            id: 'default',
+            title: 'Default',
+            fields: [],
+          },
+          {
+            id: 'symbol',
+            title: 'Symbol',
+            fields: [
+              'type',
+              ...(['simple-fill', 'simple-marker', 'simple-line'].includes(
+                symbol.type,
+              )
+                ? ['color']
+                : []),
+              ...(['simple-fill', 'simple-marker'].includes(symbol.type)
+                ? ['outline_color', 'outline_width']
+                : []),
+              ...(symbol.type === 'simple-marker' ? ['size'] : []),
+              ...(symbol.type === 'simple-line' ? ['width'] : []),
+            ],
+          },
+        ],
+        properties: {
+          type: {
+            title: 'Type',
+            choices: simpleSymbolsOptions,
+          },
+          color: {
+            title: 'Color',
+            widget: 'arcgis_color_picker',
+            $map,
+          },
+          outline_color: {
+            title: 'Outline color',
+            widget: 'arcgis_color_picker',
+            $map,
+          },
+          outline_width: {
+            title: 'Outline width',
+            type: 'number',
+            minimum: 0,
+            step: 0.1,
+          },
+          size: {
+            title: 'Size',
+            type: 'number',
+            minimum: 0,
+            step: 0.1,
+          },
+          width: {
+            title: 'Width',
+            type: 'number',
+            minimum: 0,
+            step: 0.1,
+          },
+        },
+        required: [],
+      }}
+      formData={{
+        ...symbol,
+        outline_color: symbol.outline?.color,
+        outline_width: symbol.outline?.width,
+      }}
+      onChangeField={(symbolId, fieldValue) => {
+        let $fieldValue = fieldValue;
+
+        if (['outline_width', 'size', 'width'].includes(symbolId)) {
+          $fieldValue = Math.max(toNumber(fieldValue) || 0, 0);
+        }
+
+        onChange(id, {
+          ...(value || {}),
+          ...(symbolId === 'type' ? { autocast: true } : {}),
+          symbol: {
+            ...(symbolId !== 'type' ? symbol : {}),
+            ...(symbolId === 'type' ? simpleSymbols[fieldValue] || {} : {}),
+            ...(['outline_color', 'outline_width'].includes(symbolId)
+              ? {
+                  outline: {
+                    ...(symbol.outline || {}),
+                    [symbolId.replace('outline_', '')]: $fieldValue,
+                  },
+                }
+              : { [symbolId]: $fieldValue }),
+          },
+        });
+      }}
+    />
+  );
+}

package/src/Widgets/ArcgisRendererWidget/RendererEditor/UniqueValue.jsx

@@ -0,0 +1,8 @@
+export default function UniqueValue() {
+  return (
+    <p>
+      Renderer visual editor under work. Please edit it through json editor by
+      pressing the "Renderer" button
+    </p>
+  );
+}

package/src/Widgets/ArcgisRendererWidget/RendererEditor/_Editor.jsx

@@ -0,0 +1,29 @@
+import { useMemo } from 'react';
+
+import Simple from './Simple';
+import UniqueValue from './UniqueValue';
+import Heatmap from './Heatmap';
+import ClassBreaks from './ClassBreaks';
+import Dictionary from './Dictionary';
+import DotDensity from './DotDensity';
+import PieChart from './PieChart';
+
+const types = {
+  simle: Simple,
+  'unique-value': UniqueValue,
+  heatmap: Heatmap,
+  'class-breaks': ClassBreaks,
+  dictionary: Dictionary,
+  'dot-density': DotDensity,
+  'pie-chart': PieChart,
+};
+
+function getRendererByType(type) {
+  return types[type] || Simple;
+}
+
+export default function Editor(props) {
+  const Renderer = useMemo(() => getRendererByType(props.type), [props.type]);
+
+  return <Renderer {...props} />;
+}

package/src/Widgets/ArcgisRendererWidget/RendererEditor/_EditorModal.jsx

@@ -0,0 +1,88 @@
+import { useEffect, useRef } from 'react';
+import { Modal, Button } from 'semantic-ui-react';
+import { toast } from 'react-toastify';
+import { Toast } from '@plone/volto/components';
+import {
+  initEditor,
+  destroyEditor,
+  validateEditor,
+  onPasteEditor,
+} from '@eeacms/volto-eea-map/jsoneditor';
+
+export default function EditorModal(props) {
+  const { value, onClose, onChange } = props;
+  const editor = useRef();
+  const initailValue = useRef(props.value);
+
+  async function getValue() {
+    const valid = await validateEditor(editor);
+    if (!valid) {
+      throw new Error('Invalid JSON');
+    }
+    try {
+      return editor.current.get();
+    } catch {
+      throw new Error('Invalid JSON');
+    }
+  }
+
+  useEffect(() => {
+    initEditor({
+      el: 'jsoneditor-plotlyjson',
+      editor,
+      options: {
+        schema: undefined,
+      },
+      dflt: initailValue.current,
+    });
+
+    const editorCurr = editor.current;
+
+    return () => {
+      destroyEditor(editorCurr);
+    };
+  }, []);
+
+  return (
+    <Modal size="fullscreen" open={true} className="plotly-json-modal">
+      <Modal.Content scrolling>
+        <div
+          id="jsoneditor-plotlyjson"
+          style={{ width: '100%', height: '100%' }}
+          onPaste={(e) => {
+            onPasteEditor(editor);
+          }}
+        />
+      </Modal.Content>
+      <Modal.Actions>
+        <Button
+          onClick={() => {
+            onChange(initailValue.current);
+            onClose();
+          }}
+        >
+          Close
+        </Button>
+        <Button
+          primary
+          onClick={async () => {
+            try {
+              const newValue = {
+                ...value,
+                ...(await getValue()),
+              };
+              onChange(newValue);
+              onClose();
+            } catch (error) {
+              toast.error(
+                <Toast error title={'JSON error'} content={error.message} />,
+              );
+            }
+          }}
+        >
+          Apply
+        </Button>
+      </Modal.Actions>
+    </Modal>
+  );
+}

package/src/Widgets/ArcgisRendererWidget/RendererEditor/_defaults.js

@@ -0,0 +1,30 @@
+export const simpleFillSymbol = {
+  type: 'simple-fill',
+  color: [17, 157, 255, 0.5],
+  outline: {
+    color: [17, 157, 255, 0.6],
+    width: 0.5,
+  },
+};
+
+export const simpleMarkerSymbol = {
+  type: 'simple-marker',
+  size: 8,
+  color: [17, 157, 255, 0.2],
+  outline: {
+    color: [17, 157, 255, 0.8],
+    width: 0.5,
+  },
+};
+
+export const simpleLineSymbol = {
+  type: 'simple-line',
+  color: [17, 157, 255, 0.5],
+  width: 1,
+};
+
+export const simpleSymbols = {
+  'simple-fill': simpleFillSymbol,
+  'simple-line': simpleLineSymbol,
+  'simple-marker': simpleMarkerSymbol,
+};

package/src/Widgets/ArcgisSliderWidget.jsx

@@ -0,0 +1,79 @@
+/**
+ * ArcgisSliderWidget component.
+ * @module components/manage/Widgets/ArcgisSliderWidget
+ */
+
+import React, { Component } from 'react';
+
+import { FormFieldWrapper } from '@plone/volto/components';
+
+/**
+ * The simple slider widget.
+ *
+ * It is the default fallback widget, so if no other widget is found based on
+ * passed field properties, it will be used.
+ */
+class ArcgisSliderWidget extends Component {
+  /**
+   * Component did mount lifecycle method
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    if (this.props.focus) {
+      this.node.focus();
+    }
+  }
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const { id, value, onChange, min = 0, max = 1, step = 0.1 } = this.props;
+
+    return (
+      <FormFieldWrapper {...this.props} className="text">
+        <div style={{ display: 'flex', flexFlow: 'column', marginTop: '1rem' }}>
+          <input
+            className="map-number-input"
+            type="number"
+            min={min}
+            max={max}
+            step={step}
+            value={value}
+            onChange={({ target }) => {
+              if (target.value < min) {
+                target.value = min;
+              }
+              if (target.value > max) {
+                target.value = max;
+              }
+              onChange(id, target.value === '' ? undefined : target.value);
+            }}
+          />
+          <input
+            className="map-range-input"
+            type="range"
+            min={min}
+            max={max}
+            step={step}
+            value={value}
+            onChange={({ target }) => {
+              if (target.value < min) {
+                target.value = min;
+              }
+              if (target.value > max) {
+                target.value = max;
+              }
+              onChange(id, target.value === '' ? undefined : target.value);
+            }}
+          />
+        </div>
+      </FormFieldWrapper>
+    );
+  }
+}
+
+export default ArcgisSliderWidget;

package/src/Widgets/ArcgisViewpointWidget.jsx

@@ -0,0 +1,112 @@
+import { useEffect, useState } from 'react';
+import { toNumber } from 'lodash';
+import { FormFieldWrapper, InlineForm } from '@plone/volto/components';
+
+export default function ArcgisViewpointWidget(props) {
+  const [watchViewpoint, setWatchViewpoint] = useState(false);
+  const { $map, id, value, onChange } = props;
+
+  useEffect(() => {
+    if (!$map.current?.isReady) return;
+    const homeWidget = $map.current.view.ui.find('Home');
+    if (!homeWidget) return;
+    homeWidget.viewpoint = new $map.current.modules.AgViewpoint({
+      center: [value.longitude, value.latitude],
+      zoom: value.zoom,
+    });
+  }, [$map, value]);
+
+  useEffect(() => {
+    if (watchViewpoint && $map.current?.isReady) {
+      const reactiveUtils = $map.current.modules.agReactiveUtils;
+
+      reactiveUtils.when(
+        () => $map.current.view.stationary,
+        (stationary) => {
+          if (stationary) {
+            const { longitude, latitude } = $map.current.view.center;
+            const zoom = $map.current.view.zoom;
+            onChange(id, {
+              ...value,
+              longitude,
+              latitude,
+              zoom,
+            });
+          }
+          setWatchViewpoint(false);
+        },
+        {
+          once: true,
+        },
+      );
+    }
+  }, [$map, watchViewpoint, id, value, onChange]);
+
+  return (
+    <>
+      <FormFieldWrapper {...props}>
+        <div style={{ display: 'flex', alignItems: 'center', width: '100%' }}>
+          <button
+            className="btn-primary"
+            style={{
+              fontSize: 'var(--font-size-small)',
+              width: '100%',
+              display: 'inline-block',
+              textAlign: 'center',
+            }}
+            onClick={() => {
+              setWatchViewpoint(true);
+            }}
+          >
+            {watchViewpoint ? 'Waiting...' : 'Drag on map'}
+          </button>
+        </div>
+      </FormFieldWrapper>
+      <div className="arcgis-viewpoint-editor">
+        <InlineForm
+          schema={{
+            title: 'Initial viewpoint',
+            fieldsets: [
+              {
+                id: 'default',
+                title: 'Default',
+                fields: ['longitude', 'latitude', 'zoom'],
+              },
+            ],
+            properties: {
+              longitude: {
+                title: 'Longitude',
+                type: 'number',
+                minimum: 0,
+              },
+              latitude: {
+                title: 'Latitude',
+                type: 'number',
+                minimum: 0,
+              },
+              zoom: {
+                title: 'Zoom',
+                type: 'number',
+                minimum: 0,
+              },
+            },
+            required: [],
+          }}
+          formData={value}
+          onChangeField={(fieldId, fieldValue) => {
+            let $fieldValue = fieldValue;
+
+            if (['longitude', 'latitude', 'zoom'].includes(fieldId)) {
+              $fieldValue = Math.max(toNumber($fieldValue) || 0, 0);
+            }
+
+            onChange(id, {
+              ...value,
+              [fieldId]: $fieldValue,
+            });
+          }}
+        />
+      </div>
+    </>
+  );
+}

package/src/{components/visualization → Widgets}/VisualizationViewWidget.jsx

@@ -1,25 +1,24 @@
 import { connect } from 'react-redux';
 import { pickMetadata } from '@eeacms/volto-embed/helpers';
-import Webmap from '../Webmap';
-import ExtraViews from '../ExtraViews';
+import MapBuilder from '@eeacms/volto-eea-map/Arcgis/Map/MapBuilder';
+import Toolbar from '../Toolbar/Toolbar';
 
 function VisualizationViewWidget(props) {
-  const { value: map_visualization_data = {} } = props;
+  const { value: mapData = {}, content } = props;
 
   return (
     <>
-      <Webmap data={map_visualization_data} />
-      <ExtraViews
+      <MapBuilder data={mapData} />
+      <Toolbar
+        style={{ marginTop: '1rem' }}
         data={{
-          show_viewer: true,
-          show_legend: true,
           show_note: false,
           show_sources: false,
           show_more_info: false,
           show_share: true,
-          map_visualization_data: {
-            ...map_visualization_data,
-            ...pickMetadata(props.content),
+          mapData: {
+            ...mapData,
+            ...pickMetadata(content),
           },
         }}
       />

package/src/Widgets/VisualizationWidget.jsx

@@ -0,0 +1,200 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Modal, Button, Grid } from 'semantic-ui-react';
+import { toast } from 'react-toastify';
+
+import { FormFieldWrapper, Icon, Toast } from '@plone/volto/components';
+
+import MapBuilder from '@eeacms/volto-eea-map/Arcgis/Map/MapBuilder';
+import {
+  initEditor,
+  destroyEditor,
+  validateEditor,
+  onPasteEditor,
+} from '@eeacms/volto-eea-map/jsoneditor';
+
+import editSVG from '@plone/volto/icons/editing.svg';
+
+import '@eeacms/volto-eea-map/styles/editor.less';
+import MapEditor from '../Arcgis/Editor/Editor';
+
+function JsonEditorModal(props) {
+  const { value, onClose, onChange } = props;
+  const editor = useRef();
+  const initailValue = useRef(props.value);
+
+  async function getValue() {
+    const valid = await validateEditor(editor);
+    if (!valid) {
+      throw new Error('Invalid JSON');
+    }
+    try {
+      return editor.current.get();
+    } catch {
+      throw new Error('Invalid JSON');
+    }
+  }
+
+  useEffect(() => {
+    initEditor({
+      el: 'jsoneditor-plotlyjson',
+      editor,
+      options: {
+        schema: undefined,
+      },
+      dflt: initailValue.current,
+    });
+
+    const editorCurr = editor.current;
+
+    return () => {
+      destroyEditor(editorCurr);
+    };
+  }, []);
+
+  return (
+    <Modal size="fullscreen" open={true} className="plotly-json-modal">
+      <Modal.Content scrolling>
+        <div
+          id="jsoneditor-plotlyjson"
+          style={{ width: '100%', height: '100%' }}
+          onPaste={(e) => {
+            onPasteEditor(editor);
+          }}
+        />
+      </Modal.Content>
+      <Modal.Actions>
+        <Button
+          onClick={() => {
+            onChange(initailValue.current);
+            onClose();
+          }}
+        >
+          Close
+        </Button>
+        <Button
+          primary
+          onClick={async () => {
+            try {
+              const newValue = {
+                ...value,
+                ...(await getValue()),
+              };
+              onChange(newValue);
+              onClose();
+            } catch (error) {
+              toast.error(
+                <Toast error title={'JSON error'} content={error.message} />,
+              );
+            }
+          }}
+        >
+          Apply
+        </Button>
+      </Modal.Actions>
+    </Modal>
+  );
+}
+
+function MapEditorModal(props) {
+  const [value, setValue] = useState(props.value);
+  const [open, setOpen] = useState(false);
+
+  const properties = props.formData;
+
+  return (
+    <>
+      <Modal open={true} size="fullscreen" className="chart-editor-modal">
+        <Modal.Content scrolling>
+          <MapEditor
+            value={value}
+            properties={properties}
+            onChangeValue={(value) => {
+              setValue(value);
+            }}
+          />
+        </Modal.Content>
+        <Modal.Actions>
+          <Grid>
+            <Grid.Row>
+              <Grid.Column
+                verticalAlign="middle"
+                style={{
+                  display: 'inline-flex',
+                  flexFlow: 'row',
+                  justifyContent: 'space-between',
+                }}
+              >
+                <Button
+                  secondary
+                  className="json-btn"
+                  onClick={() => setOpen(true)}
+                >
+                  <Icon name={editSVG} size="20px" />
+                  JSON
+                </Button>
+                <div style={{ display: 'flex' }}>
+                  <Button floated="right" onClick={props.onClose}>
+                    Close
+                  </Button>
+                  <Button
+                    primary
+                    floated="right"
+                    onClick={() => {
+                      props.onChange(props.id, value);
+                      props.onClose();
+                    }}
+                  >
+                    Apply
+                  </Button>
+                </div>
+              </Grid.Column>
+            </Grid.Row>
+          </Grid>
+        </Modal.Actions>
+      </Modal>
+      {open && (
+        <JsonEditorModal
+          value={value}
+          onChange={setValue}
+          onClose={() => setOpen(false)}
+        />
+      )}
+    </>
+  );
+}
+
+const VisualizationWidget = (props) => {
+  const { id, title, description, value } = props;
+  const [showMapEditor, setShowMapEditor] = useState(false);
+
+  if (__SERVER__) return '';
+
+  return (
+    <FormFieldWrapper {...props} columns={1}>
+      <div className="wrapper">
+        <label htmlFor={`field-${id}`}>{title}</label>
+        <Button
+          floated="right"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setShowMapEditor(true);
+          }}
+        >
+          Open Map Editor
+        </Button>
+      </div>
+      {description && <p className="help">{description}</p>}
+      <MapBuilder data={value} />
+      {showMapEditor && (
+        <MapEditorModal
+          {...props}
+          value={value || {}}
+          onClose={() => setShowMapEditor(false)}
+        />
+      )}
+    </FormFieldWrapper>
+  );
+};
+
+export default VisualizationWidget;