@eeacms/volto-eea-map 4.1.0 → 5.0.0

package/src/{components/visualization → Views}/VisualizationView.jsx

@@ -2,13 +2,13 @@ import React from 'react';
 import { hasBlocksData } from '@plone/volto/helpers';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 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';
 
 const VisualizationView = (props) => {
   const content = props && props.content ? props.content : {};
 
-  const map_visualization_data =
+  const mapData =
     content && content.map_visualization_data
       ? content.map_visualization_data
       : {};
@@ -19,17 +19,16 @@ const VisualizationView = (props) => {
         <RenderBlocks {...props} />
       ) : (
         <>
-          <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,
+              mapData: {
+                ...mapData,
                 ...pickMetadata(content),
               },
             }}

package/src/Widgets/ArcgisColorPickerWidget.jsx

@@ -0,0 +1,95 @@
+import { useEffect, useState, useRef } from 'react';
+import { FormFieldWrapper, Icon } from '@plone/volto/components';
+import { Button } from 'semantic-ui-react';
+import loadable from '@loadable/component';
+import clearSVG from '@plone/volto/icons/clear.svg';
+
+const ReactColor = loadable.lib(() => import('react-color'));
+
+function colorToRGBA(color) {
+  const r = color.r;
+  const g = color.g;
+  const b = color.b;
+  const a = color.a;
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+
+export default function ArcgisColorPickerWidget(props) {
+  const el = useRef(null);
+  const colorPickerEl = useRef(null);
+  const { $map, id, value, onChange, available_colors } = props;
+  const [showColorPicker, setShowColorPicker] = useState(false);
+
+  const color = new $map.current.modules.AgColor(value);
+
+  function onClickOutside(e) {
+    if (el.current && !el.current.contains(e.target)) {
+      setShowColorPicker(false);
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener('click', onClickOutside);
+
+    return () => {
+      window.removeEventListener('click', onClickOutside);
+    };
+  }, []);
+
+  return (
+    <FormFieldWrapper {...props}>
+      <div ref={el} style={{ display: 'flex', alignItems: 'center' }}>
+        <Button
+          style={{
+            margin: 0,
+            backgroundColor: colorToRGBA(color),
+          }}
+          onClick={() =>
+            setShowColorPicker((showColorPicker) => !showColorPicker)
+          }
+          size="small"
+          fluid
+          title="Show color picker"
+        />
+        <Button
+          compact
+          style={{ margin: 0, padding: '8px' }}
+          onClick={() => onChange(id, null)}
+        >
+          <Icon name={clearSVG} size="18px" color="red" style={{ margin: 0 }} />
+        </Button>
+        {showColorPicker && (
+          <div
+            ref={colorPickerEl}
+            style={{
+              position: 'absolute',
+              bottom: '100%',
+              left: '50%',
+              transform: 'translateX(-50%)',
+            }}
+          >
+            <ReactColor>
+              {({ SketchPicker }) => {
+                return (
+                  <SketchPicker
+                    width="180px"
+                    style={{
+                      borderBottomLeftRadius: 0,
+                      borderBottomRightRadius: 0,
+                    }}
+                    colors={available_colors}
+                    color={color}
+                    onChangeComplete={(color) => {
+                      const { r, g, b, a } = color.rgb;
+                      onChange(id, [r, g, b, a]);
+                    }}
+                  />
+                );
+              }}
+            </ReactColor>
+          </div>
+        )}
+      </div>
+    </FormFieldWrapper>
+  );
+}

package/src/Widgets/ArcgisRendererWidget/ArcgisRendererWidget.jsx

@@ -0,0 +1,106 @@
+import { useState } from 'react';
+import { compose } from 'redux';
+import { injectIntl } from 'react-intl';
+import { FormFieldWrapper, Icon } from '@plone/volto/components';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import {
+  customSelectStyles,
+  DropdownIndicator,
+  ClearIndicator,
+  Option,
+  selectTheme,
+  MultiValueContainer,
+} from '@plone/volto/components/manage/Widgets/SelectStyling';
+import { normalizeValue } from '@plone/volto/components/manage/Widgets/SelectUtils';
+import {
+  rendererTypes,
+  renderersMapping,
+} from '@eeacms/volto-eea-map/constants';
+import RendererEditor from './RendererEditor/_Editor';
+import RendererEditorModal from './RendererEditor/_EditorModal';
+import { simpleFillSymbol } from './RendererEditor/_defaults';
+
+import editSVG from '@plone/volto/icons/editing.svg';
+
+function ArcgisRendererWidget(props) {
+  const [open, setOpen] = useState(false);
+  const { value, id, intl, onChange } = props;
+  const $type = renderersMapping[value?.type] || value?.type;
+  const type = normalizeValue(rendererTypes, $type, intl);
+
+  const Select = props.reactSelect.default;
+
+  return (
+    <>
+      <FormFieldWrapper
+        {...props}
+        title={
+          <button
+            className="btn-primary"
+            style={{ fontSize: 'var(--font-size-small)' }}
+            onClick={() => {
+              setOpen(true);
+            }}
+          >
+            <Icon name={editSVG} size="20px" />
+            Renderer
+          </button>
+        }
+      >
+        <Select
+          id={`field-${id}`}
+          name={id}
+          menuShouldScrollIntoView={false}
+          isDisabled={false}
+          isSearchable={true}
+          className="react-select-container"
+          classNamePrefix="react-select"
+          isMulti={false}
+          options={rendererTypes}
+          styles={customSelectStyles}
+          theme={selectTheme}
+          components={{
+            MultiValueContainer,
+            DropdownIndicator,
+            ClearIndicator,
+            Option: props.customOptionStyling || Option,
+          }}
+          value={type}
+          placeholder="Select a renderer type..."
+          onChange={(selectedOption) => {
+            return onChange(id, {
+              autocast: true,
+              type:
+                selectedOption && selectedOption.value !== 'no-value'
+                  ? selectedOption.value
+                  : undefined,
+              ...(selectedOption.value === 'simple'
+                ? { symbol: simpleFillSymbol }
+                : {}),
+            });
+          }}
+        />
+      </FormFieldWrapper>
+      <div className="arcgis-renderer-editor">
+        <RendererEditor {...props} type={$type} />
+        {open && (
+          <RendererEditorModal
+            value={value}
+            onChange={(newValue) => {
+              onChange(id, newValue);
+            }}
+            onClose={() => {
+              setOpen(false);
+            }}
+          />
+        )}
+      </div>
+    </>
+  );
+}
+
+export const ArcgisRendererWidgetComponent = injectIntl(ArcgisRendererWidget);
+
+export default compose(injectLazyLibs(['reactSelect']))(
+  ArcgisRendererWidgetComponent,
+);

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

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

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

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

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

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

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

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

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

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

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;