@arpproject/recrate 0.1.7 → 0.1.8

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

@@ -1,359 +0,0 @@
-/**
- * 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

@@ -1,61 +0,0 @@
-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

@@ -1,124 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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
-    }
-  }
-};