@arpproject/recrate 0.1.2

package/src/crate-builder/primitives/Map.SelectArea.js

@@ -0,0 +1,359 @@
+/**
+ * L.Map.SelectArea - Area selection tool for leaflet
+ *
+ * @author Alexander Milevski <info@w8r.name>
+ * @see https://github.com/w8r/leaflet-area-select
+ * @license MIT
+ * @preserve
+ */
+
+// UMD
+export default function AreaSelectInit(L) {
+    var trueFn = function () {
+        return true;
+    };
+
+    /**
+     * @class  L.Map.SelectArea
+     * @extends {L.Map.BoxZoom}
+     */
+    L.Map.SelectArea = L.Map.BoxZoom.extend({
+        statics: {
+            /**
+             * @static
+             * @type {String}
+             */
+            AREA_SELECTED: "areaselected",
+
+            /**
+             * @static
+             * @type {String}
+             */
+            AREA_SELECT_START: "areaselectstart",
+
+            /**
+             * @static
+             * @type {String}
+             */
+            AREA_SELECTION_TOGGLED: "areaselecttoggled",
+        },
+
+        options: {
+            shiftKey: false,
+            ctrlKey: true,
+            validate: trueFn,
+            autoDisable: false,
+            cursor: "crosshair",
+        },
+
+        /**
+         * @param  {L.Map} map
+         * @constructor
+         */
+        initialize: function (map, options) {
+            L.Util.setOptions(this, options || {});
+            L.Map.BoxZoom.prototype.initialize.call(this, map);
+
+            /**
+             * @type {Function}
+             */
+            this._validate = null;
+
+            /**
+             * @type {Boolean}
+             */
+            this._moved = false;
+
+            /**
+             * @type {Boolean}
+             */
+            this._autoDisable = !this.options.ctrlKey && this.options.autoDisable;
+
+            /**
+             * @type {L.Point}
+             */
+            this._lastLayerPoint = null;
+
+            /**
+             * @type {String|Null}
+             */
+            this._beforeCursor = null;
+
+            this.setValidate(this.options.validate);
+            this.setAutoDisable(this.options.autoDisable);
+        },
+
+        /**
+         * @param  {Function=} validate
+         * @return {SelectArea}
+         */
+        setValidate: function (validate) {
+            var handler = this;
+            if (typeof validate !== "function") {
+                validate = trueFn;
+            }
+            this._validate = function (layerPoint) {
+                return validate.call(handler, layerPoint);
+            };
+            return this;
+        },
+
+        /**
+         * @param {Boolean} autoDisable
+         */
+        setAutoDisable: function (autoDisable) {
+            this._autoDisable = !!autoDisable;
+        },
+
+        /**
+         * @param {Boolean} on
+         */
+        setControlKey: function (on) {
+            var wasEnabled = this._enabled;
+            if (wasEnabled) this.disable();
+            this.options.ctrlKey = !!on;
+            if (on) this.options.shiftKey = false;
+            if (wasEnabled) this.enable();
+        },
+
+        /**
+         * @param {Boolean} on
+         */
+        setShiftKey: function (on) {
+            var wasEnabled = this._enabled;
+            if (wasEnabled) this.disable();
+            this.options.shiftKey = !!on;
+            if (on) this.options.ctrlKey = false;
+            if (wasEnabled) this.enable();
+        },
+
+        /**
+         * Disable dragging or zoombox
+         * @param {Function=} validate
+         * @param {Boolean=}  autoDisable
+         */
+        enable: function (validate, autoDisable) {
+            if (this.options.shiftKey) {
+                if (this._map.boxZoom) {
+                    this._map.boxZoom.disable();
+                }
+            } else if (!this.options.ctrlKey) {
+                this._map.dragging.disable();
+            }
+            L.Map.BoxZoom.prototype.enable.call(this);
+
+            if (!this.options.ctrlKey) this._setCursor();
+
+            if (validate) this.setValidate(validate);
+            this.setAutoDisable(autoDisable);
+
+            this._map.fire(L.Map.SelectArea.AREA_SELECTION_TOGGLED);
+        },
+
+        /**
+         * Re-enable box zoom or dragging
+         */
+        disable: function () {
+            L.Map.BoxZoom.prototype.disable.call(this);
+
+            if (!this.options.ctrlKey) this._restoreCursor();
+
+            if (this.options.shiftKey) {
+                if (this._map.boxZoom) {
+                    this._map.boxZoom.enable();
+                }
+            } else {
+                this._map.dragging.enable();
+            }
+
+            this._map.fire(L.Map.SelectArea.AREA_SELECTION_TOGGLED);
+        },
+
+        /**
+         * Also listen to ESC to cancel interaction
+         * @override
+         */
+        addHooks: function () {
+            L.Map.BoxZoom.prototype.addHooks.call(this);
+            L.DomEvent.on(document, "keyup", this._onKeyUp, this)
+                .on(document, "keydown", this._onKeyPress, this)
+                .on(document, "contextmenu", this._onMouseDown, this)
+                .on(window, "blur", this._onBlur, this);
+            this._map.on("dragstart", this._onMouseDown, this);
+        },
+
+        /**
+         * @override
+         */
+        removeHooks: function () {
+            L.Map.BoxZoom.prototype.removeHooks.call(this);
+            L.DomEvent.off(document, "keyup", this._onKeyUp, this)
+                .off(document, "keydown", this._onKeyPress, this)
+                .off(document, "contextmenu", this._onMouseDown, this)
+                .off(window, "blur", this._onBlur, this);
+            this._map.off("dragstart", this._onMouseDown, this);
+        },
+
+        /**
+         * @override
+         */
+        _onMouseDown: function (e) {
+            this._moved = false;
+            this._lastLayerPoint = null;
+
+            if (
+                (this.options.shiftKey && !e.shiftKey) ||
+                (this.options.ctrlKey && !e.ctrlKey) ||
+                (e.which !== 1 && e.button !== 1)
+            ) {
+                return false;
+            }
+
+            L.DomEvent.stop(e);
+
+            var layerPoint = this._map.mouseEventToLayerPoint(e);
+            if (!this._validate(layerPoint)) return false;
+
+            L.DomUtil.disableTextSelection();
+            L.DomUtil.disableImageDrag();
+
+            this._startLayerPoint = layerPoint;
+
+            L.DomEvent.on(document, "mousemove", this._onMouseMove, this)
+                .on(document, "mouseup", this._onMouseUp, this)
+                .on(document, "keydown", this._onKeyDown, this);
+        },
+
+        /**
+         * @override
+         */
+        _onMouseMove: function (e) {
+            if (!this._moved) {
+                this._box = L.DomUtil.create("div", "leaflet-zoom-box", this._pane);
+                L.DomUtil.setPosition(this._box, this._startLayerPoint);
+                this._map.fire(L.Map.SelectArea.AREA_SELECT_START);
+            }
+
+            var startPoint = this._startLayerPoint;
+            var box = this._box;
+
+            var layerPoint = this._map.mouseEventToLayerPoint(e);
+            var offset = layerPoint.subtract(startPoint);
+
+            if (!this._validate(layerPoint)) return;
+            this._lastLayerPoint = layerPoint;
+
+            var newPos = new L.Point(
+                Math.min(layerPoint.x, startPoint.x),
+                Math.min(layerPoint.y, startPoint.y)
+            );
+
+            L.DomUtil.setPosition(box, newPos);
+
+            this._moved = true;
+
+            // TODO refactor: remove hardcoded 4 pixels
+            box.style.width = Math.max(0, Math.abs(offset.x) - 4) + "px";
+            box.style.height = Math.max(0, Math.abs(offset.y) - 4) + "px";
+        },
+
+        /**
+         * General on/off toggle
+         * @param  {KeyboardEvent} e
+         */
+        _onKeyUp: function (e) {
+            if (e.keyCode === 27) {
+                if (this._moved && this._box) {
+                    this._finish();
+                }
+                // this.disable();
+            } else if (this.options.ctrlKey) {
+                this._restoreCursor();
+                this._map.dragging.enable();
+            }
+        },
+
+        /**
+         * Key down listener to enable on ctrl-press
+         * @param  {KeyboardEvent} e
+         */
+        _onKeyPress: function (e) {
+            if (
+                this.options.ctrlKey &&
+                (e.ctrlKey || e.type === "dragstart") &&
+                this._beforeCursor === null
+            ) {
+                this._setCursor();
+                this._map.dragging._draggable._onUp(e); // hardcore
+                this._map.dragging.disable();
+            }
+        },
+
+        /**
+         * Window blur listener to restore state
+         * @param  {Event} e
+         */
+        _onBlur: function (e) {
+            this._restoreCursor();
+            this._map.dragging.enable();
+        },
+
+        /**
+         * Set crosshair cursor
+         */
+        _setCursor: function () {
+            this._beforeCursor = this._container.style.cursor;
+            this._container.style.cursor = this.options.cursor;
+        },
+
+        /**
+         * Restore status quo cursor
+         */
+        _restoreCursor: function () {
+            this._container.style.cursor = this._beforeCursor;
+            this._beforeCursor = null;
+        },
+
+        /**
+         * @override
+         */
+        _onMouseUp: function (e) {
+            this._finish();
+
+            var map = this._map;
+            var layerPoint = this._lastLayerPoint; // map.mouseEventToLayerPoint(e);
+
+            if (!layerPoint || this._startLayerPoint.equals(layerPoint)) return;
+            L.DomEvent.stop(e);
+
+            var bounds = new L.LatLngBounds(
+                map.layerPointToLatLng(this._startLayerPoint),
+                map.layerPointToLatLng(layerPoint)
+            );
+
+            //map.fitBounds(bounds);
+
+            if (this._autoDisable) {
+                this.disable();
+            } else {
+                this._restoreCursor();
+            }
+
+            this._moved = false;
+
+            L.Util.requestAnimFrame(function () {
+                map.fire(L.Map.SelectArea.AREA_SELECTED, {
+                    bounds: bounds,
+                });
+            });
+        },
+    });
+
+    // expose setting
+    L.Map.mergeOptions({
+        selectArea: false,
+    });
+
+    // register hook
+    L.Map.addInitHook("addHandler", "selectArea", L.Map.SelectArea);
+}

package/src/crate-builder/primitives/Map.stories.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import Map from './Map';
+
+export default {
+  title: 'Primitives/Map',
+  component: Map,
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<typeof Map>;
+
+const Template: StoryFn<typeof Map> = (args) => <Map {...args} />;
+
+const entities = [
+  {
+    "@id": "#geo_1",
+    "@type": ["GeoCoordinates"],
+    name: "geocoordinates",
+    geojson: [
+      JSON.stringify({
+        type: "Feature",
+        properties: { name: "Nyaki Nyaki / Njaki Njaki" },
+        geometry: {
+          type: "Point",
+          coordinates: ["118.75508272649", "-32.390945191928"]
+        }
+      })
+    ],
+  },
+  {
+    "@id": "#geo_2",
+    "@type": ["GeoShape"],
+    name: "geoshape",
+    geojson: [
+      JSON.stringify({
+        type: "Feature",
+        geometry: {
+          type: "Polygon",
+          coordinates: [[[158.76561641693118,-7.710991655433217],[158.76561641693118,-47.040182144806664],[109.54686641693117,-47.040182144806664],[109.54686641693117,-7.710991655433217]]],
+        }
+      })
+    ],
+  },
+];
+
+export const GeoJSONPoint = Template.bind({});
+GeoJSONPoint.args = {
+  entity: entities[0],
+  crateManager: {
+    getEntity: ({ id }) => entities[0],
+  },
+};
+
+export const GeoJSONArea = Template.bind({});
+GeoJSONArea.args = {
+  entity: entities[1],
+  crateManager: {
+    getEntity: ({ id }) => entities[1],
+  },
+};

package/src/crate-builder/primitives/Map.tsx

@@ -0,0 +1,124 @@
+import React, { useEffect, useRef } from 'react';
+import "leaflet/dist/leaflet.css";
+import L from "leaflet";
+import { wktToGeoJSON } from "@terraformer/wkt";
+
+export interface MapProps {
+  entity: {
+    "@id": string;
+    asWKT?: string[];
+    geojson?: string[];
+  };
+  crateManager: {
+    getEntity: (params: { id: string }) => any;
+  };
+}
+
+const Map: React.FC<MapProps> = ({ entity, crateManager }) => {
+  const mapRef = useRef<HTMLDivElement>(null);
+  const mapInstance = useRef<L.Map | null>(null);
+  const layers = useRef<L.Layer[]>([]);
+  const mapId = btoa(entity["@id"]);
+
+  useEffect(() => {
+    if (!mapRef.current || !crateManager) return;
+  
+    // Initialize map
+    const map = L.map(mapRef.current, {
+      center: [0, 0],
+      zoom: 1,
+      scrollWheelZoom: false,
+      touchZoom: false,
+    });
+  
+    // Set default icon
+    const DefaultIcon = L.icon({
+      iconUrl: '/marker-icon.png',
+      shadowUrl: '/marker-shadow.png',
+    });
+    L.Marker.prototype.options.icon = DefaultIcon;
+  
+    mapInstance.current = map;
+    initMap(); // This will now have access to crateManager
+  
+    return () => {
+      map.off();
+      map.remove();
+    };
+  }, [crateManager]); // Add crateManager to dependencies
+
+  const removeExistingLayers = () => {
+    layers.current.forEach((layer) => mapInstance.current?.removeLayer(layer));
+    layers.current = [];
+  };
+
+  const addFeatureGroup = (geoJSON: any[]) => {
+    try {
+      if (!mapInstance.current) return;
+
+      const fg = L.featureGroup(
+        geoJSON.map((json) =>
+          L.geoJSON(json, {
+            pointToLayer: (feature, latlng) => L.marker(latlng),
+          })
+        )
+      );
+
+      fg.setStyle({ color: "#334155", weight: 2, fill: false });
+      fg.addTo(mapInstance.current);
+      layers.current.push(fg);
+
+      setTimeout(() => {
+        try {
+          mapInstance.current?.flyToBounds(fg.getBounds(), { maxZoom: 3, duration: 2 });
+        } catch (error) {
+          // swallow zoom errors as it's most likely to be because the map is no longer showing
+        }
+      }, 1500);
+
+      return fg;
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const initMap = async () => {
+    if (!mapInstance.current || !crateManager) return;
+  
+    const currentEntity = crateManager.getEntity({ id: entity["@id"] });
+    if (!currentEntity) return;
+    
+    // Add tile layer
+    L.tileLayer(
+      "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}",
+      {
+        attribution:
+          "Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012",
+        minZoom: 1,
+        maxZoom: 16,
+      }
+    ).addTo(mapInstance.current);
+
+    // we need to give leaflet and react and the dom a couple seconds before continuing
+    await new Promise((resolve) => setTimeout(resolve, 200));
+
+    // preference WKT in order to be conformant with the spec...
+    if (currentEntity?.asWKT) {
+      removeExistingLayers();
+      await new Promise((resolve) => setTimeout(resolve, 200));
+      const geojsons = currentEntity.asWKT.map((wkt: string) => wktToGeoJSON(wkt));
+      addFeatureGroup(geojsons);
+    } else if (currentEntity?.geojson) {
+      const geojson = JSON.parse(currentEntity.geojson[0]);
+      removeExistingLayers();
+      await new Promise((resolve) => setTimeout(resolve, 200));
+      addFeatureGroup([geojson]);
+    }
+  };
+
+  return (
+    <div id={mapId} className="w-[600px] h-[520px] describo-property-type-map" ref={mapRef} />
+  );
+};
+
+export default Map;

package/src/crate-builder/primitives/Number.stories.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import NumberComponent from './Number';
+
+// Update i18n translations for number component
+import i18next from 'i18next';
+
+// Add translations if not already present
+if (!i18next.exists('invalid_number_value')) {
+  i18next.addResourceBundle('en', 'translation', {
+    invalid_number_value: 'Invalid number value: {{value}}',
+    number_constraints_error_message: 'Number constraints not met: {{value}}'
+  }, true, true);
+}
+
+const meta: Meta<typeof NumberComponent> = {
+  component: NumberComponent,
+  title: 'Primitives/Number',
+  argTypes: {
+    value: {
+      control: { type: 'text' }
+    },
+    onSaveProperty: { action: 'saveProperty' },
+    definition: { control: 'object' }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NumberComponent>;
+
+export const SimpleNumber: Story = {
+  args: {
+    property: 'number',
+    value: 1
+  }
+};
+
+export const InvalidNumber: Story = {
+  args: {
+    property: 'number',
+    value: 'not a number'
+  }
+};
+
+export const WithMinValue: Story = {
+  args: {
+    property: 'number',
+    value: 5,
+    definition: {
+      minValue: 10
+    }
+  }
+};
+
+export const WithMaxValue: Story = {
+  args: {
+    property: 'number',
+    value: 15,
+    definition: {
+      maxValue: 10
+    }
+  }
+};
+
+export const WithNumberType: Story = {
+  args: {
+    property: 'number',
+    value: 10.5,
+    definition: {
+      numberType: ['int'] // Only integers allowed
+    }
+  }
+};