@vcmap/core 5.0.0-rc.22 → 5.0.0-rc.24

package/src/style/arrowStyle.js

@@ -0,0 +1,269 @@
+import { Cartesian3 } from '@vcmap/cesium';
+import {
+  Circle,
+  Fill,
+  Icon,
+  Stroke,
+  Style,
+  Image as OlImage,
+} from 'ol/style.js';
+import { parseEnumValue, parseNumber } from '@vcsuite/parsers';
+import { getCartesianBearing } from '../util/math.js';
+import { PrimitiveOptionsType } from '../layer/vectorProperties.js';
+import { getStringColor, parseColor } from './styleHelpers.js';
+
+/**
+ * @typedef {Object} ArrowStyleOptions
+ * @property {import("ol/color").Color|import("ol/colorlike").ColorLike} [color='#000000'] - color used to color in the line & the icon
+ * @property {number} [width=1] - passed to ol.Style.Stroke
+ * @property {number} [zIndex] - passed to ol.Style
+ * @property {import("ol/style/Icon").Options|import("ol/style").Image} [arrowIcon] - icon options to use. if none are provided, if is attempted to derive the arrow icon from the primitive options. if providing your own icon, the color will not be options.color by default
+ * @property {VectorPropertiesPrimitiveOptions} [primitiveOptions] - the default primitive options are a cylinder with a bottom radius of 1/3 its length and 0 top radius
+ * @property {ArrowEnd} [end=ArrowEnd.END] - end to place the arrow head at
+ */
+
+/**
+ * @enum {string}
+ */
+export const ArrowEnd = {
+  NONE: 'none',
+  BOTH: 'both',
+  START: 'start',
+  END: 'end',
+};
+
+/**
+ * @param {VectorPropertiesPrimitiveOptions} primitiveOptions
+ * @param {number} [twoDFactor=1.5]
+ * @returns {string}
+ * @private
+ */
+export function getDefaultArrowIconSrc(primitiveOptions, twoDFactor = 1.5) {
+  let height = 13;
+  let width = 13;
+  let points = [[0, 13], [13, 13], [6, 0]];
+
+  if (primitiveOptions.type === PrimitiveOptionsType.SPHERE) {
+    const radius = Math.floor((primitiveOptions.geometryOptions?.radius ?? 1) * twoDFactor);
+    return `<svg height="${radius * 2}" width="${radius * 2}" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="${radius}" cy="${radius}" r="${radius}" style="fill:white;" />
+</svg>`;
+  }
+
+  if (
+    primitiveOptions.type === PrimitiveOptionsType.BOX &&
+    primitiveOptions.geometryOptions.minimum &&
+    primitiveOptions.geometryOptions.maximum
+  ) {
+    const min = Array.isArray(primitiveOptions.geometryOptions.minimum) ?
+      primitiveOptions.geometryOptions.minimum :
+      Cartesian3.pack(primitiveOptions.geometryOptions.minimum, []);
+
+    const max = Array.isArray(primitiveOptions.geometryOptions.maximum) ?
+      primitiveOptions.geometryOptions.maximum :
+      Cartesian3.pack(primitiveOptions.geometryOptions.maximum, []);
+
+    width = Math.floor((max[0] - min[0]) * twoDFactor);
+    height = Math.floor((max[1] - min[1]) * twoDFactor);
+
+    points = [
+      [0, 0],
+      [width, 0],
+      [width, height],
+      [0, height],
+    ];
+  } else if (
+    primitiveOptions.type === PrimitiveOptionsType.CYLINDER &&
+    primitiveOptions.geometryOptions.length
+  ) {
+    const topRadius = Math.floor(primitiveOptions.geometryOptions.topRadius * twoDFactor);
+    const bottomRadius = Math.floor(primitiveOptions.geometryOptions.bottomRadius * twoDFactor);
+    const maxRadius = Math.max(topRadius, bottomRadius);
+
+    height = Math.floor(primitiveOptions.geometryOptions.length * twoDFactor);
+    width = maxRadius * 2;
+
+    points = [
+      [(width / 2) - bottomRadius, height],
+      [(width / 2) + bottomRadius, height],
+      [(width / 2) + topRadius, 0],
+      [(width / 2) - topRadius, 0],
+    ];
+    if (bottomRadius === 0) {
+      points.splice(1, 1);
+    } else if (topRadius === 0) {
+      points.splice(2, 1);
+    }
+  }
+  return `<svg height="${height}" width="${width}" xmlns="http://www.w3.org/2000/svg"><polygon points="${points.map(p => p.join(',')).join(' ')}" style="fill:white;" /></svg>`;
+}
+
+/**
+ * @returns {VectorPropertiesPrimitiveOptions}
+ */
+function getDefaultArrowPrimitive() {
+  return {
+    type: PrimitiveOptionsType.CYLINDER,
+    geometryOptions: {
+      length: 9,
+      bottomRadius: 3,
+      topRadius: 0,
+    },
+    offset: [0, 0, -4.3],
+  };
+}
+
+/**
+ * A style which renders arrow heads at the ends of a line string. This style cannot be applied to non-LineString geometries.
+ * When setting this on a layer with heterogeneous geometry types, use a style function.
+ * @class
+ * @extends {Style}
+ */
+class ArrowStyle extends Style {
+  /**
+   * @param {ArrowStyleOptions} [options={}]
+   */
+  constructor(options = {}) {
+    const color = options.color ?? '#000000';
+    const styleOptions = {
+      stroke: new Stroke({
+        color,
+        width: parseNumber(options.width, 1),
+      }),
+      zIndex: options.zIndex,
+    };
+
+    const primitiveOptions = options.primitiveOptions ?? getDefaultArrowPrimitive();
+    const iconOptions = options.arrowIcon ?? {
+      src: `data:image/svg+xml,${encodeURIComponent(getDefaultArrowIconSrc(primitiveOptions))}`,
+      color: parseColor(color),
+    };
+    styleOptions.image = iconOptions instanceof OlImage ? iconOptions : new Icon(iconOptions);
+    super(styleOptions);
+
+    /**
+     * @type {VectorPropertiesPrimitiveOptions}
+     */
+    this.primitiveOptions = primitiveOptions;
+    /**
+     * @type {ArrowEnd}
+     */
+    this.end = parseEnumValue(options.end, ArrowEnd, ArrowEnd.END);
+    this.setRenderer(this._render.bind(this));
+  }
+
+  /**
+   * Same as getStroke().getWidth() / getStroke().setWidth()
+   * @type {number}
+   */
+  get width() {
+    return this.getStroke().getWidth();
+  }
+
+  /**
+   * @param {number} width
+   */
+  set width(width) {
+    this.getStroke().setWidth(width);
+  }
+
+  /**
+   * The color of the stroke and icon styles. Setting the color will not re-apply the icons color.
+   * @type {import("ol/color").Color|import("ol/colorlike").ColorLike}
+   */
+  get color() {
+    return this.getStroke().getColor();
+  }
+
+  /**
+   * @param {import("ol/color").Color|import("ol/colorlike").ColorLike} color
+   */
+  set color(color) {
+    this.getStroke().setColor(color);
+  }
+
+  /**
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {import("ol/coordinate").Coordinate} imagePosition
+   * @param {number} rotation
+   * @param {number} pixelRatio
+   * @private
+   */
+  _drawArrow(ctx, imagePosition, rotation, pixelRatio) {
+    ctx.save();
+    let scale = this.getImage().getScale();
+    scale = Array.isArray(scale) ? scale : [scale, scale];
+    ctx.setTransform(scale[0], 0, 0, scale[1], imagePosition[0], imagePosition[1]);
+    ctx.rotate(Math.PI - rotation);
+    const image = this.getImage().getImage(pixelRatio);
+    ctx.translate(0, Math.floor(image.height / 2));
+    ctx.drawImage(image, -image.width / 2, -image.height / 2);
+    ctx.restore();
+  }
+
+  /**
+   * @param {Array<import("ol/coordinate").Coordinate>} geom
+   * @param {import("ol/render").State} e
+   * @private
+   */
+  _render(geom, e) {
+    if (e.geometry.getType() === 'LineString' && geom.length > 1) {
+      const ctx = e.context;
+      if (this.end !== ArrowEnd.NONE) {
+        if (this.end === ArrowEnd.START || this.end === ArrowEnd.BOTH) {
+          this._drawArrow(ctx, geom[0], getCartesianBearing(geom[1], geom[0]), e.pixelRatio);
+        }
+
+        if (this.end === ArrowEnd.END || this.end === ArrowEnd.BOTH) {
+          this._drawArrow(ctx, geom.at(-1), getCartesianBearing(geom.at(-2), geom.at(-1)), e.pixelRatio);
+        }
+      }
+      ctx.save();
+      ctx.lineJoin = 'round';
+      ctx.lineWidth = this.width;
+      ctx.strokeStyle = getStringColor(this.color);
+      ctx.beginPath();
+      ctx.moveTo(geom[0][0], geom[0][1]);
+      for (let i = 0; i < geom.length; i++) {
+        ctx.lineTo(geom[i][0], geom[i][1]);
+      }
+      ctx.stroke();
+      ctx.restore();
+    }
+  }
+
+  /**
+   * Returns the style used to render primitives (a style with a circle image and the color of this style).
+   * @returns {import("ol/style").Style}
+   */
+  getOlcsStyle() {
+    return new Style({
+      image: new Circle({
+        radius: 2,
+        fill: new Fill({ color: this.color }),
+      }),
+    });
+  }
+
+  /**
+   * @returns {ArrowStyleOptions}
+   * @protected
+   */
+  _getCloneOptions() {
+    return {
+      color: this.color,
+      width: this.width,
+      arrowIcon: this.getImage().clone(),
+      zIndex: this.getZIndex(),
+    };
+  }
+
+  /**
+   * @returns {ArrowStyle}
+   */
+  clone() {
+    return new ArrowStyle(this._getCloneOptions());
+  }
+}
+
+export default ArrowStyle;

package/src/util/editor/createFeatureSession.js

@@ -30,7 +30,7 @@ import ObliqueMap from '../../map/obliqueMap.js';
  * @param {GeometryType} geometryType
  * @returns {CreateFeatureSession}
  */
-export default function startCreateFeatureSession(app, layer, geometryType) {
+function startCreateFeatureSession(app, layer, geometryType) {
   check(app, VcsApp);
   check(layer, VectorLayer);
   check(geometryType, Object.values(GeometryType));
@@ -180,3 +180,5 @@ export default function startCreateFeatureSession(app, layer, geometryType) {
     stop,
   };
 }
+
+export default startCreateFeatureSession;

package/src/util/editor/editFeaturesSession.js

@@ -0,0 +1,315 @@
+import { Circle, Fill, Style, Stroke } from 'ol/style.js';
+import { getLogger } from '@vcsuite/logger';
+
+import VcsEvent from '../../vcsEvent.js';
+import { SessionType, setupInteractionChain, setupScratchLayer } from './editorSessionHelpers.js';
+import SelectMultiFeatureInteraction from './interactions/selectMultiFeatureInteraction.js';
+import EditFeaturesMouseOverInteraction from './interactions/editFeaturesMouseOverInteraction.js';
+import createTransformationHandler from './transformation/transformationHandler.js';
+import { TransformationMode } from './transformation/transformationTypes.js';
+import MapInteractionController from './interactions/mapInteractionController.js';
+import TranslateInteraction from './transformation/translateInteraction.js';
+import RotateInteraction from './transformation/rotateInteraction.js';
+import ScaleInteraction from './transformation/scaleInteraction.js';
+import { createSync, obliqueGeometry } from '../../layer/vectorSymbols.js';
+import ExtrudeInteraction from './transformation/extrudeInteraction.js';
+import { ModificationKeyType } from '../../interaction/interactionType.js';
+import ObliqueMap from '../../map/obliqueMap.js';
+import { ensureFeatureAbsolute } from './editorHelpers.js';
+import CesiumMap from '../../map/cesiumMap.js';
+import EnsureHandlerSelectionInteraction from './interactions/ensureHandlerSelectionInteraction.js';
+
+/**
+ * @typedef {EditorSession} EditFeaturesSession
+ * @property {SelectMultiFeatureInteraction} featureSelection
+ * @property {TransformationMode} mode - read only access to the current mode
+ * @property {function(TransformationMode):void} setMode
+ * @property {import("@vcmap/core").VcsEvent<TransformationMode>} modeChanged
+ */
+
+/**
+ * Creates a selection set from the selected features. This maintains `createSync` symbol, highlight and allow picking on
+ * currently selected features and listens to changes until stopped.
+ * @param {import("@vcmap/core").VectorLayer} layer
+ * @param {SelectMultiFeatureInteraction} selectFeatureInteraction
+ * @param {import("ol/style").Style} highlightStyle
+ * @param {import("@vcmap/core").EventHandler} eventHandler
+ * @returns {function():void} un-highlight all and stop listening to changes
+ */
+function createSelectionSet(layer, selectFeatureInteraction, highlightStyle, eventHandler) {
+  let currentIds = new Set();
+  /** @type {Map<string|number, boolean|undefined>} */
+  const allowPickingMap = new Map();
+  const modifierChangedListener = eventHandler.modifierChanged.addEventListener((mod) => { // CTRL is used to modify the current selection set, we must allow picking again so you can deselect a feature
+    const allowPicking = mod === ModificationKeyType.CTRL;
+    selectFeatureInteraction.selectedFeatures.forEach((f) => { f.set('olcs_allowPicking', allowPicking); });
+  });
+
+  const clearFeature = (f) => {
+    delete f[createSync];
+    const allowPicking = allowPickingMap.get(f.getId());
+    if (allowPicking != null) {
+      f.set('olcs_allowPicking', allowPicking);
+    } else {
+      f.unset('olcs_allowPicking');
+    }
+  };
+
+  const featureChangedListener = selectFeatureInteraction.featuresChanged.addEventListener((newFeatures) => {
+    const newIds = new Set(newFeatures.map((f) => {
+      const id = f.getId();
+      if (!allowPickingMap.has(id)) {
+        allowPickingMap.set(id, f.get('olcs_allowPicking'));
+      }
+      f[createSync] = true;
+      f.set('olcs_allowPicking', false);
+      return id;
+    }));
+    const idsToHighlight = [];
+    newIds.forEach((id) => {
+      if (!currentIds.has(id)) {
+        idsToHighlight.push(id);
+      }
+    });
+
+    const idsToUnHighlight = [];
+    currentIds.forEach((id) => {
+      if (!newIds.has(id)) {
+        idsToUnHighlight.push(id);
+      }
+    });
+
+    layer.featureVisibility.unHighlight(idsToUnHighlight);
+    layer.featureVisibility.highlight(Object.fromEntries(idsToHighlight.map(id => [id, highlightStyle])));
+    layer.getFeaturesById(idsToUnHighlight)
+      .forEach(clearFeature);
+
+    currentIds = newIds;
+  });
+
+  return () => {
+    modifierChangedListener();
+    featureChangedListener();
+    if (currentIds.size > 0) {
+      const idsToUnHighlight = [...currentIds];
+      layer.getFeaturesById(idsToUnHighlight)
+        .forEach(clearFeature);
+      layer.featureVisibility.unHighlight(idsToUnHighlight);
+    }
+  };
+}
+
+/**
+ * @returns {import("ol/style").Style}
+ */
+function getDefaultHighlightStyle() {
+  const fill = new Fill({ color: 'rgba(76,175,80,0.2)' });
+  const stroke = new Stroke({ color: '#4CAF50', width: 2 });
+
+  return new Style({
+    fill,
+    stroke,
+    image: new Circle({
+      fill,
+      stroke,
+      radius: 14,
+    }),
+  });
+}
+
+/**
+ * Creates an editor session to select, translate, rotate & scale the feature on a given layer
+ * @param {import("@vcmap/core").VcsApp} app
+ * @param {import("@vcmap/core").VectorLayer} layer
+ * @param {TransformationMode=} [initialMode=TransformationMode.TRANSLATE]
+ * @param {import("ol/style").Style=} [highlightStyle]
+ * @returns {EditFeaturesSession}
+ */
+function startEditFeaturesSession(
+  app,
+  layer,
+  initialMode = TransformationMode.TRANSLATE,
+  highlightStyle = getDefaultHighlightStyle(),
+) {
+  const scratchLayer = setupScratchLayer(app.layers);
+  /** @type {VcsEvent<void>} */
+  const stopped = new VcsEvent();
+  const {
+    interactionChain,
+    removed: interactionRemoved,
+    destroy: destroyInteractionChain,
+  } = setupInteractionChain(app.maps.eventHandler);
+  const selectFeatureInteraction = new SelectMultiFeatureInteraction(layer);
+  const destroySelectionSet = createSelectionSet(
+    layer,
+    selectFeatureInteraction,
+    highlightStyle,
+    app.maps.eventHandler,
+  );
+  interactionChain.addInteraction(selectFeatureInteraction);
+  interactionChain.addInteraction(new EnsureHandlerSelectionInteraction(selectFeatureInteraction));
+
+  const mapInteractionController = new MapInteractionController();
+  interactionChain.addInteraction(mapInteractionController);
+
+  const mouseOverInteraction = new EditFeaturesMouseOverInteraction(
+    layer.name,
+    selectFeatureInteraction,
+  );
+  interactionChain.addInteraction(mouseOverInteraction);
+
+  let mode = initialMode;
+  let destroyTransformation = () => {};
+  const createTransformations = () => {
+    destroyTransformation();
+    const transformationHandler = createTransformationHandler(
+      app.maps.activeMap,
+      layer,
+      selectFeatureInteraction,
+      scratchLayer,
+      mode,
+    );
+
+    let interaction;
+    if (mode === TransformationMode.TRANSLATE) {
+      interaction = new TranslateInteraction(transformationHandler);
+      interaction.translated.addEventListener(([dx, dy, dz]) => {
+        transformationHandler.translate(dx, dy, dz);
+        selectFeatureInteraction.selectedFeatures.forEach((f) => {
+          const geometry = f[obliqueGeometry] ?? f.getGeometry();
+          geometry.applyTransform((input, output) => {
+            const inputLength = input.length;
+            for (let i = 0; i < inputLength; i += 3) {
+              output[i] = input[i] + dx;
+              output[i + 1] = input[i + 1] + dy;
+              output[i + 2] = input[i + 2] + dz;
+            }
+            return output;
+          });
+        });
+      });
+    } else if (mode === TransformationMode.EXTRUDE) {
+      interaction = new ExtrudeInteraction(transformationHandler);
+      interaction.extruded.addEventListener((dz) => {
+        selectFeatureInteraction.selectedFeatures.forEach((f) => {
+          ensureFeatureAbsolute(f, layer, app.maps.activeMap);
+          let extrudedHeight = f.get('olcs_extrudedHeight') ?? 0;
+          extrudedHeight += dz;
+          f.set('olcs_extrudedHeight', extrudedHeight);
+        });
+      });
+    } else if (mode === TransformationMode.ROTATE) {
+      interaction = new RotateInteraction(transformationHandler);
+      interaction.rotated.addEventListener(({ angle }) => {
+        const { center } = transformationHandler;
+        selectFeatureInteraction.selectedFeatures.forEach((f) => {
+          const geometry = f[obliqueGeometry] ?? f.getGeometry();
+          geometry.rotate(angle, center);
+        });
+      });
+    } else if (mode === TransformationMode.SCALE) {
+      interaction = new ScaleInteraction(transformationHandler);
+      interaction.scaled.addEventListener(([sx, sy]) => {
+        const { center } = transformationHandler;
+        selectFeatureInteraction.selectedFeatures.forEach((f) => {
+          const geometry = f[obliqueGeometry] ?? f.getGeometry();
+          geometry.scale(sx, sy, center);
+        });
+      });
+    } else {
+      throw new Error(`Unknown transformation mode ${mode}`);
+    }
+
+    interactionChain.addInteraction(interaction);
+
+    destroyTransformation = () => {
+      interactionChain.removeInteraction(interaction);
+      interaction.destroy();
+      transformationHandler.destroy();
+    };
+  };
+
+  /**
+   * @type {VcsEvent<TransformationMode>}
+   */
+  const modeChanged = new VcsEvent();
+  const setMode = (newMode) => {
+    if (newMode !== mode) {
+      if (newMode === TransformationMode.EXTRUDE && !(app.maps.activeMap instanceof CesiumMap)) {
+        getLogger('EditFeaturesSession').warning('Cannot set extrude mode if map is not a CesiumMap');
+      } else {
+        mode = newMode;
+        createTransformations();
+        modeChanged.raiseEvent(mode);
+      }
+    }
+  };
+  /**
+   * @type {ObliqueMap|null}
+   */
+  let obliqueMap = null;
+  /**
+   * @type {function():void}
+   */
+  let obliqueImageChangedListener = () => {};
+  const mapChanged = (map) => {
+    obliqueImageChangedListener();
+    if (map instanceof ObliqueMap) {
+      selectFeatureInteraction.clear();
+      obliqueImageChangedListener = map.imageChanged.addEventListener(() => {
+        selectFeatureInteraction.clear();
+        createTransformations();
+      });
+      obliqueMap = map;
+    } else {
+      if (obliqueMap) {
+        selectFeatureInteraction.clear();
+      }
+      obliqueMap = null;
+      obliqueImageChangedListener = () => {};
+    }
+    if (mode === TransformationMode.EXTRUDE && !(map instanceof CesiumMap)) {
+      setMode(TransformationMode.TRANSLATE);
+    } else {
+      createTransformations();
+    }
+  };
+  const mapChangedListener = app.maps.mapActivated.addEventListener(mapChanged);
+  mapChanged(app.maps.activeMap);
+
+  selectFeatureInteraction.featuresChanged.addEventListener((selectedFeatures) => {
+    if (obliqueMap) {
+      obliqueMap.switchEnabled = selectedFeatures.length === 0;
+    }
+  });
+
+  const stop = () => {
+    obliqueImageChangedListener();
+    if (obliqueMap) {
+      obliqueMap.switchEnabled = true;
+    }
+    mapChangedListener();
+    destroyTransformation();
+    destroySelectionSet();
+    app.layers.remove(scratchLayer);
+    destroyInteractionChain();
+    stopped.raiseEvent();
+    stopped.destroy();
+    modeChanged.destroy();
+  };
+  interactionRemoved.addEventListener(stop);
+
+  return {
+    type: SessionType.EDIT_FEATURES,
+    featureSelection: selectFeatureInteraction,
+    stopped,
+    stop,
+    get mode() {
+      return mode;
+    },
+    modeChanged,
+    setMode,
+  };
+}
+
+export default startEditFeaturesSession;

package/src/util/editor/editGeometrySession.js

@@ -14,6 +14,7 @@ import geometryIsValid from './validateGeoemetry.js';
 import ObliqueMap from '../../map/obliqueMap.js';
 import { emptyStyle } from '../../style/styleHelpers.js';
 import MapInteractionController from './interactions/mapInteractionController.js';
+import { originalStyle } from '../../layer/featureVisibility.js';
 
 /**
  * @typedef {EditorSession} EditGeometrySession
@@ -228,6 +229,7 @@ function createEditSimplePolygonInteraction(feature, scratchLayer) {
 function createEditPointInteraction(feature, scratchLayer) {
   const vertex = createVertex(feature.getGeometry().getCoordinates());
   const featureStyle = feature.getStyle();
+  feature[originalStyle] = featureStyle;
   feature.setStyle(emptyStyle);
   scratchLayer.addFeatures([vertex]);
   const translateVertex = new TranslateVertexInteraction();
@@ -255,7 +257,7 @@ function createEditPointInteraction(feature, scratchLayer) {
  * @param {import("@vcmap/core").VectorLayer} layer
  * @returns {EditGeometrySession}
  */
-export default function startEditGeometrySession(app, layer) {
+function startEditGeometrySession(app, layer) {
   const {
     interactionChain,
     removed: interactionRemoved,
@@ -399,3 +401,5 @@ export default function startEditGeometrySession(app, layer) {
     stop,
   };
 }
+
+export default startEditGeometrySession;