@chelone/vue 0.0.0-stage → 0.1.0

package/dist/components/maps-draw/shape-inputs.js

@@ -0,0 +1,177 @@
+import { defineComponent, h } from "vue";
+import { useMapsConfig } from "../maps/use-map.js";
+import _sfc_main from "./shape-input.vue.js";
+const DRAW_TOOLS = {
+  Point: ["draw-point"],
+  MultiPoint: ["draw-point"],
+  LineString: ["draw-line"],
+  MultiLineString: ["draw-line"],
+  Polygon: ["draw-polygon", "draw-rectangle", "draw-circle"],
+  MultiPolygon: ["draw-polygon", "draw-rectangle", "draw-circle"]
+};
+const CUT = ["cut"];
+const AFTER_DRAW = ["edit", "move", "delete"];
+function toolsForShapes(shapes) {
+  const drawing = /* @__PURE__ */ new Set();
+  for (const shape of shapes) {
+    for (const tool of DRAW_TOOLS[shape]) drawing.add(tool);
+  }
+  const polygons = shapes.some(
+    (shape) => shape === "Polygon" || shape === "MultiPolygon"
+  );
+  return [...drawing, ...polygons ? CUT : [], ...AFTER_DRAW];
+}
+const { kind: _kind, ...options } = _sfc_main.props;
+function propsOf(extra = {}) {
+  return { ...options, ...extra };
+}
+const emits = {
+  commit: (_value) => true
+};
+const POINT_TOOLS = ["draw-point", "move", "delete"];
+const MULTI_POINT_TOOLS = toolsForShapes(["MultiPoint"]);
+const LINE_TOOLS = toolsForShapes(["LineString"]);
+const AREA_TOOLS = toolsForShapes(["Polygon"]);
+const COLLECTION_TOOLS = toolsForShapes(["Point", "LineString", "Polygon"]);
+const ALL_SHAPES = ["Point", "LineString", "Polygon"];
+function renderShape(props, emit, kind, tools) {
+  return h(_sfc_main, {
+    ...props,
+    kind,
+    tools: props.tools ?? tools,
+    onCommit: (value) => emit("commit", value)
+  });
+}
+function fixedKind(name, kind, tools) {
+  return defineComponent(
+    (props, { emit }) => () => renderShape(props, emit, kind, tools),
+    {
+      name,
+      props: propsOf(),
+      emits
+    }
+  );
+}
+const PointInput = fixedKind("PointInput", "Point", POINT_TOOLS);
+const MultiPointInput = fixedKind(
+  "MultiPointInput",
+  "MultiPoint",
+  MULTI_POINT_TOOLS
+);
+function snapRefine(router) {
+  return (value, { signal }) => {
+    if (!("type" in value) || value.type !== "LineString") return null;
+    if (value.coordinates.length < 2) return null;
+    return router.snapToRoad(value, { signal });
+  };
+}
+const LineStringInput = defineComponent(
+  (props, { emit }) => {
+    const config = useMapsConfig();
+    const router = () => {
+      const { snapToRoads } = props;
+      return snapToRoads === true ? config.router : snapToRoads || void 0;
+    };
+    if (props.snapToRoads === true && !router()) {
+      throw new Error(
+        "LineStringInput needs a routing provider for `snapToRoads`: pass a RoutingProvider as the prop or set `router` on <MapsProvider>."
+      );
+    }
+    return () => {
+      const { snapToRoads: _snap, ...rest } = props;
+      const provider = router();
+      return renderShape(
+        provider ? { ...rest, refine: snapRefine(provider) } : rest,
+        emit,
+        "LineString",
+        LINE_TOOLS
+      );
+    };
+  },
+  {
+    name: "LineStringInput",
+    props: propsOf({
+      snapToRoads: { type: [Boolean, Object], default: false }
+    }),
+    emits
+  }
+);
+const MultiLineStringInput = fixedKind(
+  "MultiLineStringInput",
+  "MultiLineString",
+  LINE_TOOLS
+);
+const PolygonInput = fixedKind("PolygonInput", "Polygon", AREA_TOOLS);
+const MultiPolygonInput = fixedKind(
+  "MultiPolygonInput",
+  "MultiPolygon",
+  AREA_TOOLS
+);
+const GeometryCollectionInput = fixedKind(
+  "GeometryCollectionInput",
+  "GeometryCollection",
+  COLLECTION_TOOLS
+);
+const GeoJsonInput = defineComponent(
+  (props, { emit }) => () => {
+    const { shapes = ALL_SHAPES, collection, ...rest } = props;
+    return renderShape(
+      rest,
+      emit,
+      collection ? "GeometryCollection" : "Geometry",
+      toolsForShapes(shapes)
+    );
+  },
+  {
+    name: "GeoJsonInput",
+    props: propsOf({
+      shapes: { type: Array, default: void 0 },
+      collection: { type: Boolean, default: false }
+    }),
+    emits
+  }
+);
+const FeatureInput = defineComponent(
+  (props, { emit }) => () => {
+    const { shape = "Polygon", ...rest } = props;
+    return renderShape(rest, emit, "Feature", toolsForShapes([shape]));
+  },
+  {
+    name: "FeatureInput",
+    props: propsOf({
+      shape: { type: String, default: void 0 }
+    }),
+    emits
+  }
+);
+const FeatureCollectionInput = defineComponent(
+  (props, { emit }) => () => {
+    const { allowedShapes = ALL_SHAPES, ...rest } = props;
+    return renderShape(
+      rest,
+      emit,
+      "FeatureCollection",
+      toolsForShapes(allowedShapes)
+    );
+  },
+  {
+    name: "FeatureCollectionInput",
+    props: propsOf({
+      allowedShapes: { type: Array, default: void 0 }
+    }),
+    emits
+  }
+);
+export {
+  FeatureCollectionInput,
+  FeatureInput,
+  GeoJsonInput,
+  GeometryCollectionInput,
+  LineStringInput,
+  MultiLineStringInput,
+  MultiPointInput,
+  MultiPolygonInput,
+  PointInput,
+  PolygonInput,
+  toolsForShapes
+};

package/dist/components/maps-draw/simplify-input.vue.d.ts

@@ -0,0 +1,46 @@
+import type { MapStyleInput, ShapeStyle } from "@chelone/core";
+export type SimplifyQuality = "Default" | "High";
+/** Props for {@link SimplifyInput}. */
+export interface SimplifyInputProps {
+    /** The form field holding a Geometry, Feature or FeatureCollection. */
+    source: string;
+    /** The legend. A string is translated; `false` renders none. */
+    label?: string | false;
+    helperText?: string | false;
+    /** Read once at mount. Defaults to 13. */
+    zoom?: number;
+    /** `[lat, lng]`. Read once at mount. Defaults to `[0, 0]`. */
+    defaultCenter?: readonly [lat: number, lng: number];
+    /** In pixels, or any CSS length. Defaults to 400. */
+    height?: number | string;
+    /** Defaults to the style from `MapsProvider`. */
+    mapStyle?: MapStyleInput;
+    /** Partial over `DEFAULT_SHAPE_STYLE`. */
+    shapeStyle?: ShapeStyle;
+    /** The range input's initial value, in degrees. Defaults to 0.01. */
+    tolerance?: number;
+    /** Defaults to 0. */
+    minTolerance?: number;
+    /** Defaults to 0.05. */
+    maxTolerance?: number;
+    /** Defaults to 0.001. */
+    step?: number;
+    /** The initial algorithm. `High` is slower and keeps more detail. Defaults to `Default`. */
+    quality?: SimplifyQuality;
+    class?: string;
+}
+declare const _default: import("vue").DefineComponent<SimplifyInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SimplifyInputProps> & Readonly<{}>, {
+    label: string | false;
+    height: number | string;
+    step: number;
+    helperText: string | false;
+    mapStyle: MapStyleInput;
+    zoom: number;
+    tolerance: number;
+    shapeStyle: ShapeStyle;
+    defaultCenter: readonly [lat: number, lng: number];
+    minTolerance: number;
+    maxTolerance: number;
+    quality: SimplifyQuality;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/maps-draw/simplify-input.vue.js

@@ -0,0 +1,192 @@
+import { defineComponent, ref, watch, toRaw, computed, openBlock, createElementBlock, normalizeClass, unref, createVNode, createCommentVNode, Fragment, withCtx, createElementVNode, toDisplayString, createTextVNode, normalizeStyle, createBlock } from "vue";
+import { isGeoJsonValue } from "@chelone/core";
+import { useInput } from "../../form/use-input.js";
+import { useTranslate } from "../../i18n/use-translate.js";
+import { cn } from "../../lib/utils.js";
+import _sfc_main$5 from "../admin/common/input-helper-text.vue.js";
+import _sfc_main$6 from "../admin/common/validation-error.vue.js";
+import _sfc_main$1 from "../admin/common/field-label-text.vue.js";
+import _sfc_main$3 from "../maps/geo-json-layers.vue.js";
+import _sfc_main$2 from "../maps/map-canvas.vue.js";
+import _sfc_main$4 from "../ui/button.vue.js";
+import { FieldError } from "../ui/field.js";
+import { simplifyGeo } from "./geometry-ops.js";
+const _hoisted_1 = ["data-invalid"];
+const _hoisted_2 = {
+  key: 0,
+  class: "mb-1.5 text-sm font-medium"
+};
+const _hoisted_3 = { key: 0 };
+const _hoisted_4 = { class: "flex flex-wrap items-center gap-4" };
+const _hoisted_5 = { class: "flex min-w-48 flex-1 flex-col gap-2" };
+const _hoisted_6 = ["min", "max", "step", "value"];
+const _hoisted_7 = {
+  role: "group",
+  class: "inline-flex gap-1"
+};
+function sameJson(a, b) {
+  return a === b || JSON.stringify(a) === JSON.stringify(b);
+}
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "simplify-input",
+  props: {
+    source: {},
+    label: { type: [String, Boolean], default: void 0 },
+    helperText: { type: [String, Boolean], default: void 0 },
+    zoom: { default: 13 },
+    defaultCenter: { default: () => [0, 0] },
+    height: { default: 400 },
+    mapStyle: { default: void 0 },
+    shapeStyle: { default: void 0 },
+    tolerance: { default: 0.01 },
+    minTolerance: { default: 0 },
+    maxTolerance: { default: 0.05 },
+    step: { default: 1e-3 },
+    quality: { default: "Default" },
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const translate = useTranslate();
+    const input = useInput({
+      source: props.source,
+      format: (v) => v ?? null
+    });
+    const initial = input.value.value;
+    if (initial !== null && !isGeoJsonValue(initial)) {
+      throw new Error("SimplifyInput: source must be GeoJSON or null");
+    }
+    const tolerance = ref(props.tolerance);
+    const quality = ref(props.quality);
+    let original = null;
+    let written = null;
+    watch(
+      [() => input.value.value, tolerance, quality],
+      () => {
+        const value = toRaw(input.value.value);
+        if (!isGeoJsonValue(value)) return;
+        if (original === null || value !== written) original = value;
+        const next = simplifyGeo(original, {
+          tolerance: tolerance.value,
+          highQuality: quality.value === "High"
+        });
+        if (sameJson(next, value)) return;
+        written = next;
+        input.setValue(next);
+      },
+      { immediate: true }
+    );
+    const geometry = computed(() => {
+      const value = toRaw(input.value.value);
+      return isGeoJsonValue(value) ? value : null;
+    });
+    const invalid = computed(
+      () => input.touched.value && input.error.value != null
+    );
+    const rangeId = `${input.id}-tolerance`;
+    const toleranceText = computed(
+      () => translate("chelone.map.simplify.tolerance", {
+        value: tolerance.value.toFixed(3),
+        _: "Tolerance: {value}"
+      })
+    );
+    const cssHeight = computed(
+      () => typeof props.height === "number" ? `${props.height}px` : props.height
+    );
+    function onRange(event) {
+      tolerance.value = Number(event.target.value);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("fieldset", {
+        "data-slot": "simplify-input",
+        class: normalizeClass(unref(cn)("flex min-w-0 flex-col gap-3 border-0 p-0", props.class)),
+        "data-invalid": invalid.value || void 0
+      }, [
+        props.label !== false && props.label !== "" ? (openBlock(), createElementBlock("legend", _hoisted_2, [
+          createVNode(_sfc_main$1, {
+            label: props.label,
+            source: props.source
+          }, null, 8, ["label", "source"]),
+          unref(input).isRequired ? (openBlock(), createElementBlock("span", _hoisted_3, " *")) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true),
+        geometry.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          createVNode(_sfc_main$2, {
+            center: props.defaultCenter,
+            zoom: props.zoom,
+            height: props.height,
+            "map-style": props.mapStyle
+          }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$3, {
+                data: geometry.value,
+                "shape-style": props.shapeStyle
+              }, null, 8, ["data", "shape-style"])
+            ]),
+            _: 1
+          }, 8, ["center", "zoom", "height", "map-style"]),
+          createElementVNode("div", _hoisted_4, [
+            createElementVNode("div", _hoisted_5, [
+              createElementVNode("label", {
+                for: rangeId,
+                class: "text-sm"
+              }, toDisplayString(toleranceText.value), 1),
+              createElementVNode("input", {
+                id: rangeId,
+                type: "range",
+                min: props.minTolerance,
+                max: props.maxTolerance,
+                step: props.step,
+                value: tolerance.value,
+                onInput: onRange,
+                onChange: _cache[0] || (_cache[0] = ($event) => unref(input).blur())
+              }, null, 40, _hoisted_6)
+            ]),
+            createElementVNode("div", _hoisted_7, [
+              createVNode(_sfc_main$4, {
+                variant: "outline",
+                size: "sm",
+                "aria-pressed": quality.value === "Default",
+                onClick: _cache[1] || (_cache[1] = ($event) => quality.value = "Default")
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(translate)("chelone.map.simplify.default", { _: "Default" })), 1)
+                ]),
+                _: 1
+              }, 8, ["aria-pressed"]),
+              createVNode(_sfc_main$4, {
+                variant: "outline",
+                size: "sm",
+                "aria-pressed": quality.value === "High",
+                onClick: _cache[2] || (_cache[2] = ($event) => quality.value = "High")
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(translate)("chelone.map.simplify.high", { _: "High" })), 1)
+                ]),
+                _: 1
+              }, 8, ["aria-pressed"])
+            ])
+          ])
+        ], 64)) : (openBlock(), createElementBlock("div", {
+          key: 2,
+          "data-slot": "simplify-input-empty",
+          class: "flex items-center justify-center rounded-md border border-dashed text-sm text-muted-foreground",
+          style: normalizeStyle({ height: cssHeight.value })
+        }, toDisplayString(unref(translate)("chelone.map.no_geometry", { _: "No geometry" })), 5)),
+        createVNode(_sfc_main$5, {
+          "helper-text": props.helperText
+        }, null, 8, ["helper-text"]),
+        invalid.value ? (openBlock(), createBlock(unref(FieldError), { key: 3 }, {
+          default: withCtx(() => [
+            createVNode(_sfc_main$6, {
+              error: unref(input).error.value
+            }, null, 8, ["error"])
+          ]),
+          _: 1
+        })) : createCommentVNode("", true)
+      ], 10, _hoisted_1);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/maps-draw/simplify-input2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./simplify-input.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/maps-draw/use-terra-draw.d.ts

@@ -0,0 +1,66 @@
+import { type GeoFeature, type ShapeStyle } from "@chelone/core";
+import { type Ref } from "vue";
+/** A toolbar button that switches the editor's mode. */
+export type DrawTool = "draw-point" | "draw-line" | "draw-polygon" | "draw-rectangle" | "draw-circle" | "cut" | "edit" | "move";
+/** The Terra Draw mode a tool switches on. No tool, or `disabled`, is `render`. */
+export declare function toolMode(tool: DrawTool | null | undefined, disabled?: boolean): string;
+/** What the user did on the map: drew a shape, changed one, or removed one. */
+export type TerraDrawEdit = {
+    type: "draw" | "edit" | "delete";
+    /** The user's features after the edit. */
+    features: GeoFeature[];
+} | {
+    /** A polygon finished while the `cut` tool was active. */
+    type: "cut";
+    /** The user's features without the cutter. */
+    features: GeoFeature[];
+    /** The finished polygon, which the editor no longer holds. */
+    cutter: GeoFeature;
+};
+export interface UseTerraDrawOptions {
+    /**
+     * A getter for what to show: the features, the active tool and whether the
+     * editor is read-only. The editor takes a new array of features when it
+     * differs from its own, and switches mode when the tool or `disabled` changes.
+     */
+    state: () => {
+        features: GeoFeature[];
+        /** The active tool. Defaults to none. */
+        tool?: DrawTool | null;
+        /** Switches to the `render` mode, which shows the features and edits nothing. */
+        disabled?: boolean;
+    };
+    /** Snap to existing coordinates and lines. Read once. Defaults to true. */
+    snappable?: boolean;
+    /** Pixels within which the pointer grabs a vertex or snaps; every mode's `pointerDistance`. Read once. Defaults to 20. */
+    snapDistance?: number;
+    /** Read once. */
+    shapeStyle?: ShapeStyle;
+    /** Called when a drawing or an edit finishes and when a feature is removed, never during a drag. */
+    onEdit?: (edit: TerraDrawEdit) => void;
+}
+export interface UseTerraDrawResult {
+    /** The id of the selected feature, or `null`. */
+    selectedId: Readonly<Ref<string | number | null>>;
+    /** Removes the selected feature, which calls `onEdit` with type `delete`. */
+    deleteSelected: () => void;
+    /**
+     * The entries of `features` the editor refused, as given. They are not drawn
+     * and not in any `onEdit`: a caller that keeps them in its value adds them back.
+     */
+    refused: Readonly<Ref<GeoFeature[]>>;
+}
+/**
+ * Runs one Terra Draw editor on the surrounding `MapCanvas` and keeps it equal
+ * to `state().features`. The caller owns the data: the editor only shows the
+ * features and proposes edits through `onEdit`.
+ *
+ * Modes, snapping and styles are read once, when the editor is built: change
+ * `key` to rebuild. Terra Draw moves and restores the map's drag pan itself
+ * during its own drags, so nothing here touches `map.dragPan`. A selected line
+ * or polygon rotates with Terra Draw's key chord, `Control` and `r`.
+ *
+ * Call it in the setup of a component rendered inside a `MapCanvas`. Needs the
+ * optional `terra-draw` and `terra-draw-maplibre-gl-adapter` peers.
+ */
+export declare function useTerraDraw(options: UseTerraDrawOptions): UseTerraDrawResult;