@eeacms/volto-bise-policy 1.3.11 → 1.3.13

package/src/components/manage/Blocks/CaseStudyExplorer/FeatureInteraction.jsx

@@ -1,100 +0,0 @@
-import React from 'react';
-import { withOpenLayers } from '@eeacms/volto-openlayers-map';
-import { useMapContext } from '@eeacms/volto-openlayers-map/api';
-import { scrollToElement, zoomMapToFeatures } from './utils';
-
-export const useStyles = ({ ol }) => {
-  const selected = React.useMemo(
-    () =>
-      new ol.style.Style({
-        image: new ol.style.Circle({
-          radius: 12,
-          fill: new ol.style.Fill({
-            color: '#ccc',
-          }),
-          stroke: new ol.style.Stroke({
-            color: '#fff',
-            width: 0,
-          }),
-        }),
-      }),
-    [ol.style],
-  );
-
-  const selectStyle = React.useCallback(() => {
-    selected.image_.getFill().setColor('#0A99FF');
-    return selected;
-  }, [selected]);
-
-  return { selected, selectStyle };
-};
-
-function FeatureInteraction({ onFeatureSelect, hideFilters, ol }) {
-  const { map } = useMapContext();
-  const { selectStyle } = useStyles({ ol });
-
-  // Keep callbacks current without recreating the OpenLayers interaction.
-  const onFeatureSelectRef = React.useRef(onFeatureSelect);
-  onFeatureSelectRef.current = onFeatureSelect;
-  const hideFiltersRef = React.useRef(hideFilters);
-  hideFiltersRef.current = hideFilters;
-  const olRef = React.useRef(ol);
-  olRef.current = ol;
-
-  // Select stores the selected rendered cluster feature and applies its style
-  // directly to that feature. Recreating it after selectedCase changes clears
-  // that collection and restores the feature's original style.
-  const selectRef = React.useRef(null);
-  if (!selectRef.current) {
-    selectRef.current = new ol.interaction.Select({
-      condition: ol.condition.click,
-      style: hideFilters ? null : selectStyle,
-    });
-  }
-  const select = selectRef.current;
-
-  React.useEffect(() => {
-    if (!map) return;
-
-    const onSelect = (e) => {
-      const features = e.target.getFeatures().getArray();
-
-      features.forEach((feature) => {
-        const subfeatures = feature.values_.features;
-        if (subfeatures.length === 1) {
-          const selectedFeature = subfeatures[0].values_;
-          if (hideFiltersRef.current) {
-            const url = window.location.origin + selectedFeature.path;
-            // window.open(url);
-            window.location.href = url;
-          }
-          onFeatureSelectRef.current(selectedFeature);
-          scrollToElement('ol-map-container');
-        } else {
-          onFeatureSelectRef.current(null);
-          zoomMapToFeatures({ map, features: subfeatures, ol: olRef.current });
-        }
-      });
-    };
-
-    select.on('select', onSelect);
-    map.addInteraction(select);
-
-    const onPointerMove = (e) => {
-      const pixel = map.getEventPixel(e.originalEvent);
-      const hit = map.hasFeatureAtPixel(pixel);
-      map.getViewport().style.cursor = hit ? 'pointer' : '';
-    };
-    map.on('pointermove', onPointerMove);
-
-    return () => {
-      select.un('select', onSelect);
-      map.un('pointermove', onPointerMove);
-      map.removeInteraction(select);
-    };
-  }, [map, select]);
-
-  return null;
-}
-
-export default withOpenLayers(FeatureInteraction);

package/src/components/manage/Blocks/CaseStudyExplorer/FeatureInteraction.test.jsx

@@ -1,189 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import FeatureInteraction from './FeatureInteraction';
-import { scrollToElement, zoomMapToFeatures } from './utils';
-import { createMockOl } from './testUtils';
-
-jest.mock('@eeacms/volto-openlayers-map', () => ({
-  withOpenLayers: (Comp) => Comp,
-}));
-
-const addInteraction = jest.fn();
-const removeInteraction = jest.fn();
-const onMap = jest.fn();
-const getEventPixel = jest.fn(() => [10, 20]);
-const hasFeatureAtPixel = jest.fn(() => true);
-const getViewport = jest.fn(() => ({ style: {} }));
-
-jest.mock('@eeacms/volto-openlayers-map/api', () => ({
-  useMapContext: () => ({
-    map: mockMap,
-  }),
-}));
-
-jest.mock('./utils', () => ({
-  scrollToElement: jest.fn(),
-  zoomMapToFeatures: jest.fn(),
-}));
-
-let mockSelectCb;
-const mockOl = createMockOl({
-  interaction: {
-    Select: jest.fn(() => ({
-      on: jest.fn((evt, cb) => {
-        if (evt === 'select') {
-          mockSelectCb = cb;
-        }
-      }),
-      un: jest.fn(),
-    })),
-  },
-});
-
-const mockMap = {
-  addInteraction,
-  removeInteraction,
-  on: onMap,
-  un: jest.fn(),
-  getEventPixel,
-  hasFeatureAtPixel,
-  getViewport,
-};
-
-function triggerSelectEvent(subfeatures) {
-  const feature = { values_: { features: subfeatures } };
-  const mockE = {
-    target: {
-      getFeatures: () => ({
-        getArray: () => [feature],
-      }),
-    },
-  };
-  mockSelectCb(mockE);
-}
-
-describe('FeatureInteraction', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-    mockSelectCb = null;
-  });
-
-  it('configures the selection style when filters are visible', () => {
-    render(
-      <FeatureInteraction
-        onFeatureSelect={jest.fn()}
-        hideFilters={false}
-        selectedCase={null}
-        ol={mockOl}
-      />,
-    );
-
-    const options = mockOl.interaction.Select.mock.calls[0][0];
-    expect(options.style).toEqual(expect.any(Function));
-  });
-
-  it('keeps one Select interaction across rerenders', () => {
-    const { rerender } = render(
-      <FeatureInteraction
-        onFeatureSelect={jest.fn()}
-        hideFilters={false}
-        selectedCase={null}
-        ol={mockOl}
-      />,
-    );
-
-    rerender(
-      <FeatureInteraction
-        onFeatureSelect={jest.fn()}
-        hideFilters={false}
-        selectedCase={{ path: '/selected' }}
-        ol={{ ...mockOl }}
-      />,
-    );
-
-    expect(mockOl.interaction.Select).toHaveBeenCalledTimes(1);
-    expect(addInteraction).toHaveBeenCalledTimes(1);
-  });
-
-  it('selects a single feature and calls onFeatureSelect + scrollToElement (hideFilters=false)', () => {
-    const onFeatureSelect = jest.fn();
-    const singleFeature = {
-      values_: { path: '/path1', geometry: {}, foo: 'bar' },
-    };
-
-    render(
-      <FeatureInteraction
-        onFeatureSelect={onFeatureSelect}
-        hideFilters={false}
-        selectedCase={null}
-        ol={mockOl}
-      />,
-    );
-
-    triggerSelectEvent([singleFeature]);
-
-    expect(onFeatureSelect).toHaveBeenCalledWith(singleFeature.values_);
-    expect(scrollToElement).toHaveBeenCalledWith('ol-map-container');
-  });
-
-  it('selects a single feature and changes window.location when hideFilters=true', () => {
-    const onFeatureSelect = jest.fn();
-    const singleFeature = { values_: { path: '/go-here', geometry: {} } };
-    delete window.location;
-    window.location = { href: '' };
-
-    render(
-      <FeatureInteraction
-        onFeatureSelect={onFeatureSelect}
-        hideFilters={true}
-        selectedCase={null}
-        ol={mockOl}
-      />,
-    );
-
-    triggerSelectEvent([singleFeature]);
-
-    expect(window.location.href).toContain('/go-here');
-  });
-
-  it('selects multiple features and calls zoomMapToFeatures', () => {
-    const onFeatureSelect = jest.fn();
-    const subfeatures = [
-      { values_: { path: '/f1' } },
-      { values_: { path: '/f2' } },
-    ];
-
-    render(
-      <FeatureInteraction
-        onFeatureSelect={onFeatureSelect}
-        hideFilters={false}
-        selectedCase={null}
-        ol={mockOl}
-      />,
-    );
-
-    triggerSelectEvent(subfeatures);
-
-    expect(onFeatureSelect).toHaveBeenCalledWith(null);
-    expect(zoomMapToFeatures).toHaveBeenCalledWith({
-      map: mockMap,
-      features: subfeatures,
-      ol: mockOl,
-    });
-  });
-
-  it('adds and removes interaction on mount/unmount', () => {
-    const { unmount } = render(
-      <FeatureInteraction
-        onFeatureSelect={jest.fn()}
-        hideFilters={false}
-        selectedCase={null}
-        ol={mockOl}
-      />,
-    );
-
-    expect(addInteraction).toHaveBeenCalled();
-    unmount();
-    expect(removeInteraction).toHaveBeenCalled();
-  });
-});

package/src/components/manage/Blocks/CaseStudyExplorer/InfoOverlay.jsx

@@ -1,111 +0,0 @@
-import React from 'react';
-import { useMapContext } from '@eeacms/volto-openlayers-map/api';
-import { withOpenLayers } from '@eeacms/volto-openlayers-map';
-import FeatureDisplay from './FeatureDisplay';
-import { usePrevious } from '@plone/volto/helpers/Utils/usePrevious';
-
-function InfoOverlay({
-  selectedFeature,
-  onFeatureSelect,
-  layerId,
-  hideFilters,
-  ol,
-}) {
-  const { map } = useMapContext();
-  const [tooltip, setTooltipRef] = React.useState();
-  const [showTooltip, setShowTooltip] = React.useState();
-  const overlayRef = React.useRef(null);
-
-  // `ol` is a fresh object literal on every render (see withOpenLayers) and
-  // `onFeatureSelect`/`hideFilters` can change identity; keep them in refs so
-  // the overlay and its map handler are created only once per mount.
-  const olRef = React.useRef(ol);
-  olRef.current = ol;
-  const onFeatureSelectRef = React.useRef(onFeatureSelect);
-  onFeatureSelectRef.current = onFeatureSelect;
-  const hideFiltersRef = React.useRef(hideFilters);
-  hideFiltersRef.current = hideFilters;
-
-  const prevLayerId = usePrevious(layerId);
-
-  React.useEffect(() => {
-    if (prevLayerId && layerId !== prevLayerId) {
-      setShowTooltip(false);
-    }
-  }, [layerId, prevLayerId]);
-
-  React.useEffect(() => {
-    if (!(map && tooltip)) return;
-
-    const overlay = new olRef.current.Overlay({
-      element: tooltip,
-      positioning: 'bottom-center',
-      offset: [0, -10],
-      stopEvent: false,
-    });
-    overlayRef.current = overlay;
-    map.addOverlay(overlay);
-
-    function handler(evt) {
-      const { pixel, target } = evt;
-      const features = target.getFeaturesAtPixel(pixel);
-      const popupOverlay = overlay.element; // document.getElementById('popup-overlay');
-
-      if (
-        features.length &&
-        !hideFiltersRef.current // && !isCluster(features)
-      ) {
-        setShowTooltip(true);
-      } else {
-        // handle a click in an overlay popup
-        if (evt.originalEvent.target.tagName === 'A') return;
-        setShowTooltip(false);
-        popupOverlay.style.display = 'none';
-        onFeatureSelectRef.current(null);
-      }
-    }
-
-    map.on('click', handler);
-
-    return () => {
-      map.un('click', handler);
-      map.removeOverlay(overlay);
-      overlayRef.current = null;
-    };
-  }, [map, tooltip]);
-
-  // Anchor the popup to the selected case study and show it above the marker.
-  // Selecting a cluster (null feature) or clicking the map clears the popup.
-  React.useEffect(() => {
-    const overlay = overlayRef.current;
-    if (!overlay) return;
-
-    const coordinates = selectedFeature?.geometry?.flatCoordinates;
-    if (coordinates) {
-      overlay.setPosition(coordinates);
-      setShowTooltip(true);
-    } else {
-      overlay.setPosition(undefined);
-      setShowTooltip(false);
-    }
-  }, [selectedFeature, tooltip]);
-
-  const [isClient, setIsClient] = React.useState(false);
-  React.useEffect(() => setIsClient(true), []);
-
-  return isClient ? (
-    <div
-      id="popup-overlay"
-      style={{
-        position: 'absolute',
-        zIndex: 1,
-        visibility: showTooltip ? 'visible' : 'hidden',
-      }}
-      ref={setTooltipRef}
-    >
-      {selectedFeature ? <FeatureDisplay feature={selectedFeature} /> : null}
-    </div>
-  ) : null;
-}
-
-export default withOpenLayers(InfoOverlay);

package/src/components/manage/Blocks/CaseStudyExplorer/InfoOverlay.test.jsx

@@ -1,159 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import InfoOverlay from './InfoOverlay';
-import '@testing-library/jest-dom';
-
-jest.mock('@eeacms/volto-openlayers-map', () => ({
-  withOpenLayers: (Comp) => Comp,
-}));
-
-const onMap = jest.fn();
-const unMap = jest.fn();
-const addOverlay = jest.fn();
-const removeOverlay = jest.fn();
-jest.mock('@eeacms/volto-openlayers-map/api', () => ({
-  useMapContext: () => ({
-    map: mockMap,
-  }),
-}));
-
-jest.mock('./FeatureDisplay', () => () => (
-  <div data-testid="feature-display" />
-));
-
-const mockAddOverlayInstance = {};
-jest.mock('ol/Overlay', () => {
-  return jest.fn().mockImplementation((config) => {
-    return { ...mockAddOverlayInstance, element: config.element };
-  });
-});
-
-const mockOl = {
-  Overlay: jest.fn((config) => ({
-    element: config.element,
-    setPosition: jest.fn(),
-  })),
-};
-
-const mockMap = {
-  on: onMap,
-  un: unMap,
-  addOverlay,
-  removeOverlay,
-};
-
-jest.mock('@plone/volto/helpers/Utils/usePrevious', () => ({
-  usePrevious: (val) => undefined,
-}));
-
-const defaultProps = {
-  layerId: 'layer1',
-  hideFilters: false,
-  ol: mockOl,
-  onFeatureSelect: jest.fn(),
-};
-
-describe('InfoOverlay', () => {
-  let overlayElement;
-  beforeEach(() => {
-    jest.clearAllMocks();
-    overlayElement = document.createElement('div');
-    overlayElement.id = 'popup-overlay';
-    document.body.appendChild(overlayElement);
-  });
-
-  afterEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  it('renders FeatureDisplay when selectedFeature is provided', () => {
-    const { getByTestId } = render(
-      <InfoOverlay {...defaultProps} selectedFeature={{ id: 1 }} />,
-    );
-    expect(getByTestId('feature-display')).toBeInTheDocument();
-  });
-
-  it('does not render FeatureDisplay when selectedFeature is null', () => {
-    const { queryByTestId } = render(
-      <InfoOverlay {...defaultProps} selectedFeature={null} />,
-    );
-    expect(queryByTestId('feature-display')).toBeNull();
-  });
-
-  it('attaches and detaches click handler on map', () => {
-    const { unmount } = render(
-      <InfoOverlay {...defaultProps} selectedFeature={null} />,
-    );
-    expect(addOverlay).toHaveBeenCalled();
-    expect(onMap).toHaveBeenCalledWith('click', expect.any(Function));
-
-    unmount();
-    expect(unMap).toHaveBeenCalledWith('click', expect.any(Function));
-    expect(removeOverlay).toHaveBeenCalled();
-  });
-
-  it('click handler hides tooltip when no features found', () => {
-    const onFeatureSelect = jest.fn();
-    render(
-      <InfoOverlay
-        {...defaultProps}
-        selectedFeature={{}}
-        onFeatureSelect={onFeatureSelect}
-      />,
-    );
-
-    const handler = onMap.mock.calls.find(([event]) => event === 'click')[1];
-
-    const evt = {
-      pixel: [0, 0],
-      target: { getFeaturesAtPixel: () => [] },
-      originalEvent: { target: { tagName: 'DIV' } },
-    };
-    handler(evt);
-
-    expect(onFeatureSelect).toHaveBeenCalledWith(null);
-    const overlay = mockOl.Overlay.mock.results[0].value;
-    expect(overlay.element.style.display).toBe('none');
-  });
-
-  it('ignores click when target is a link (A tag)', () => {
-    const onFeatureSelect = jest.fn();
-    render(
-      <InfoOverlay
-        {...defaultProps}
-        selectedFeature={{}}
-        onFeatureSelect={onFeatureSelect}
-      />,
-    );
-
-    const handler = onMap.mock.calls.find(([event]) => event === 'click')[1];
-
-    const evt = {
-      pixel: [0, 0],
-      target: { getFeaturesAtPixel: () => [] },
-      originalEvent: { target: { tagName: 'A' } },
-    };
-    handler(evt);
-
-    expect(onFeatureSelect).not.toHaveBeenCalled();
-  });
-
-  it('positions the overlay over the selected feature', () => {
-    render(
-      <InfoOverlay
-        {...defaultProps}
-        selectedFeature={{ geometry: { flatCoordinates: [10, 20] } }}
-      />,
-    );
-
-    const overlay = mockOl.Overlay.mock.results[0].value;
-    expect(overlay.setPosition).toHaveBeenCalledWith([10, 20]);
-  });
-
-  it('clears the overlay position when no feature is selected', () => {
-    render(<InfoOverlay {...defaultProps} selectedFeature={null} />);
-
-    const overlay = mockOl.Overlay.mock.results[0].value;
-    expect(overlay.setPosition).toHaveBeenCalledWith(undefined);
-  });
-});