@chelone/vue 0.5.0 → 0.7.0

package/dist/components/maps-draw/geometry-ops.d.ts

@@ -1,27 +1,2 @@
-import { type GeoFeature, type GeoJsonValue } from "@chelone/core";
-export interface CutResult {
-    features: GeoFeature[];
-    /** False when the cutter touched no polygon, so `features` equals the input. */
-    changed: boolean;
-}
-/**
- * Subtracts `cutter` from every Polygon and MultiPolygon feature. A feature the
- * cutter misses comes back as is, a MultiPolygon result splits into one feature
- * per part with the original `properties`, and a feature the cutter covers is
- * removed. A part left with a hole keeps it. Other geometries are untouched.
- */
-export declare function cutFeatures(features: readonly GeoFeature[], cutter: GeoFeature): CutResult;
-export interface SimplifyOptions {
-    /** In degrees. At 0 or below the value comes back unchanged. */
-    tolerance: number;
-    /** Slower, and keeps more of the shape's detail at the same tolerance. */
-    highQuality: boolean;
-}
-/**
- * A thinned copy of a Geometry, Feature or FeatureCollection. Polygon rings stay
- * closed, a Point or MultiPoint comes back equal, and a Feature without a
- * geometry is kept. The input is not changed. Turf also drops collinear
- * vertices at any tolerance above 0, so a tolerance of 0 or less skips it and
- * returns a copy of the value.
- */
-export declare function simplifyGeo(value: GeoJsonValue, options: SimplifyOptions): GeoJsonValue;
+export type { CutResult, DrawFeature, DrawValue, SimplifyOptions, } from "@chelone/utils/geo";
+export { cutFeatures, simplifyGeo } from "@chelone/utils/geo";

package/dist/components/maps-draw/geometry-ops.js

@@ -1,70 +1 @@
-import { geoAreaM2 } from "@chelone/core";
-import { difference } from "@turf/difference";
-import { simplify } from "@turf/simplify";
-function isArea(geometry) {
-  return geometry?.type === "Polygon" || geometry?.type === "MultiPolygon";
-}
-function sameArea(a, b) {
-  return Math.abs(a - b) <= Math.max(a, b) * 1e-9;
-}
-function cutFeatures(features, cutter) {
-  const out = [];
-  let changed = false;
-  const cutGeometry = cutter.geometry;
-  for (const feature of features) {
-    const geometry = feature.geometry;
-    if (!isArea(geometry) || !isArea(cutGeometry)) {
-      out.push(feature);
-      continue;
-    }
-    const left = difference({
-      type: "FeatureCollection",
-      features: [
-        { type: "Feature", properties: {}, geometry },
-        { type: "Feature", properties: {}, geometry: cutGeometry }
-      ]
-    });
-    if (!left) {
-      changed = true;
-      continue;
-    }
-    const rest = left.geometry;
-    if (sameArea(geoAreaM2(rest), geoAreaM2(geometry))) {
-      out.push(feature);
-      continue;
-    }
-    changed = true;
-    const parts = rest.type === "Polygon" ? [rest] : rest.coordinates.map((coordinates) => ({
-      type: "Polygon",
-      coordinates
-    }));
-    parts.forEach((part, index) => {
-      const { id: _id, ...rest2 } = feature;
-      out.push({ ...index === 0 ? feature : rest2, geometry: part });
-    });
-  }
-  return { features: out, changed };
-}
-function simplifyInPlace(value, options) {
-  if (value.type === "FeatureCollection") {
-    value.features = value.features.map(
-      (feature) => simplifyInPlace(feature, options)
-    );
-    return value;
-  }
-  if (value.type === "Feature" && !value.geometry) return value;
-  return simplify(value, {
-    tolerance: options.tolerance,
-    highQuality: options.highQuality,
-    mutate: true
-  });
-}
-function simplifyGeo(value, options) {
-  const copy = structuredClone(value);
-  if (options.tolerance <= 0) return copy;
-  return simplifyInPlace(copy, options);
-}
-export {
-  cutFeatures,
-  simplifyGeo
-};
+export { cutFeatures, simplifyGeo } from "@chelone/utils/geo";

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

@@ -0,0 +1,4 @@
+import shape_input_vue_vue_type_script_setup_true_lang_default from "./shape-input.vue_vue_type_script_setup_true_lang.js";
+// src/components/maps-draw/shape-input.vue
+var shape_input_default = shape_input_vue_vue_type_script_setup_true_lang_default;
+export { shape_input_default as default };

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

@@ -50,26 +50,35 @@ export interface ShapeInputProps {
      * line to roads. It runs once the edit is in the form, never on load or
      * reset, and a newer edit or an unmount aborts `signal`. A result that is
      * not null and differs is written, unless the field changed meanwhile. A
-     * thrown error keeps the value as drawn.
+     * thrown error keeps the value as drawn. A null result is "nothing to
+     * change" unless `refineFailedMessage` is set, which a throw also notifies.
      */
     refine?: (value: ShapeValue, options: {
         signal: AbortSignal;
     }) => Promise<ShapeValue | null> | ShapeValue | null;
+    /**
+     * Message key notified as a warning when `refine` resolves to null or throws
+     * (an abort excepted), and the value is kept as drawn. `LineStringInput` sets it for
+     * `snapToRoads`.
+     */
+    refineFailedMessage?: string;
     class?: string;
 }
-declare const _default: import("vue").DefineComponent<ShapeInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<ShapeInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     commit: (value: ShapeValue | null) => any;
 }, string, import("vue").PublicProps, Readonly<ShapeInputProps> & Readonly<{
     onCommit?: ((value: ShapeValue | null) => any) | undefined;
 }>, {
     disabled: boolean;
     label: string | false;
-    height: number | string;
-    helperText: string | false;
+    height: string | number;
     validate: Validator | readonly Validator[];
+    helperText: string | false;
+    tools: readonly ToolbarTool[];
     mapStyle: MapStyleInput;
     zoom: number;
-    tools: readonly ToolbarTool[];
     snappable: boolean;
     snapDistance: number;
     shapeStyle: ShapeStyle;
@@ -83,5 +92,5 @@ declare const _default: import("vue").DefineComponent<ShapeInputProps, {}, {}, {
     refine: (value: ShapeValue, options: {
         signal: AbortSignal;
     }) => Promise<ShapeValue | null> | ShapeValue | null;
+    refineFailedMessage: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/maps-draw/shape-input.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,379 @@
+import { useCheloneNotifications } from "../../context.js";
+import { useInput } from "../../form/use-input.js";
+import { useTranslate } from "../../i18n/use-translate.js";
+import { cn } from "../../lib/utils.js";
+import input_helper_text_default from "../admin/common/input-helper-text.js";
+import validation_error_default from "../admin/common/validation-error.js";
+import field_label_text_default from "../admin/common/field-label-text.js";
+import map_canvas_default from "../maps/map-canvas.js";
+import { FieldError } from "../ui/field.js";
+import draw_toolbar_default from "./draw-toolbar.js";
+import { cutFeatures } from "./geometry-ops.js";
+import { uniqueGeoJsonSourceId, useGeoJsonSource } from "../maps/use-geo-json-source.js";
+import { useMap } from "../maps/use-map.js";
+import { useTerraDraw } from "./use-terra-draw.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, normalizeClass, onBeforeUnmount, openBlock, ref, shallowRef, toDisplayString, toRaw, unref, watch, withCtx } from "vue";
+import { deepEqual, featuresToShape, geoBounds, heldFeatures, isLngLatBox, maxVertices, minAreaM2, minVertices, noSelfIntersection, shapeToFeatures } from "@chelone/core";
+// src/components/maps-draw/shape-input.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-invalid"];
+var _hoisted_2 = {
+	key: 0,
+	class: "mb-1.5 text-sm font-medium"
+};
+var _hoisted_3 = { key: 0 };
+var _hoisted_4 = {
+	key: 2,
+	"data-slot": "shape-input-warning",
+	class: "text-sm text-amber-600 dark:text-amber-500"
+};
+var AREA_TOOLS = [
+	"draw-polygon",
+	"draw-rectangle",
+	"draw-circle",
+	"cut",
+	"edit",
+	"move",
+	"delete"
+];
+/** The kinds whose value keeps every feature, not just the last one drawn. */
+var HOLDS_MANY = /* @__PURE__ */ new Set([
+	"MultiPoint",
+	"MultiLineString",
+	"MultiPolygon",
+	"GeometryCollection",
+	"FeatureCollection"
+]);
+/** The tools that make sense for what a field of `kind` holds. */
+function defaultTools(kind) {
+	switch (kind) {
+		case "Point":
+		case "MultiPoint": return [
+			"draw-point",
+			"move",
+			"delete"
+		];
+		case "LineString":
+		case "MultiLineString": return [
+			"draw-line",
+			"edit",
+			"move",
+			"delete"
+		];
+		case "Polygon":
+		case "MultiPolygon": return AREA_TOOLS;
+		case "BBox": return [
+			"draw-rectangle",
+			"edit",
+			"move",
+			"delete"
+		];
+		default: return [
+			"draw-point",
+			"draw-line",
+			...AREA_TOOLS
+		];
+	}
+}
+/**
+* Lives in the `MapCanvas` slot, where `useMap()` works. Runs the Terra Draw
+* editor, draws the read-only held parts, frames the first shape once, and
+* hands the selection controls up to the toolbar.
+*/
+var Editor = defineComponent((props, { emit }) => {
+	const map = useMap();
+	useGeoJsonSource(uniqueGeoJsonSourceId(), () => ({
+		type: "FeatureCollection",
+		features: toRaw(props.held)
+	}), () => props.shapeStyle ?? {});
+	emit("controls", useTerraDraw({
+		state: () => ({
+			features: props.features,
+			tool: props.tool,
+			disabled: props.disabled
+		}),
+		snappable: props.snappable,
+		snapDistance: props.snapDistance,
+		shapeStyle: props.shapeStyle,
+		onEdit: (edit) => emit("edit", edit)
+	}));
+	onBeforeUnmount(() => emit("controls", null));
+	const box = computed(() => geoBounds({
+		type: "FeatureCollection",
+		features: [...toRaw(props.features), ...toRaw(props.held)]
+	}));
+	const boxKey = computed(() => box.value ? box.value.join(",") : "");
+	let fitted = false;
+	watch(boxKey, () => {
+		const corners = box.value;
+		if (!props.fit || fitted || !corners) return;
+		fitted = true;
+		if (props.getValue() === props.written.current) return;
+		if (!isLngLatBox(corners)) return;
+		map.fitBounds(corners, {
+			padding: 20,
+			maxZoom: 18,
+			duration: 0
+		});
+	}, { immediate: true });
+	return () => null;
+}, {
+	name: "ShapeInputEditor",
+	props: {
+		features: {
+			type: null,
+			required: true
+		},
+		held: {
+			type: null,
+			required: true
+		},
+		tool: {
+			type: null,
+			default: null
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		snappable: {
+			type: Boolean,
+			default: true
+		},
+		snapDistance: {
+			type: Number,
+			default: 20
+		},
+		shapeStyle: {
+			type: null,
+			default: void 0
+		},
+		fit: {
+			type: Boolean,
+			default: true
+		},
+		getValue: {
+			type: null,
+			required: true
+		},
+		written: {
+			type: null,
+			required: true
+		}
+	},
+	emits: {
+		edit: (_edit) => true,
+		controls: (_controls) => true
+	}
+});
+var shape_input_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "shape-input",
+	props: {
+		source: {},
+		kind: {},
+		label: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		helperText: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		validate: {
+			type: [Function, Array],
+			default: void 0
+		},
+		minVertices: { default: void 0 },
+		maxVertices: { default: void 0 },
+		minAreaM2: { default: void 0 },
+		allowSelfIntersection: {
+			type: Boolean,
+			default: true
+		},
+		tools: { default: void 0 },
+		snappable: {
+			type: Boolean,
+			default: true
+		},
+		snapDistance: { default: 20 },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		defaultCenter: { default: () => [0, 0] },
+		zoom: { default: 13 },
+		height: { default: 300 },
+		mapStyle: { default: void 0 },
+		shapeStyle: { default: void 0 },
+		aspectRatio: { default: void 0 },
+		fitBounds: {
+			type: Boolean,
+			default: true
+		},
+		refine: {
+			type: Function,
+			default: void 0
+		},
+		refineFailedMessage: { default: void 0 },
+		class: {}
+	},
+	emits: ["commit"],
+	setup(__props, { emit: __emit }) {
+		/**
+		* Edits a GeoJSON value in a form field by drawing on a map. The field is the
+		* only copy of the value: the map editor shows it and proposes edits, and each
+		* finished drawing, vertex drag, move or removal is written to the field and
+		* announced with `commit`. Parts the editor cannot hold (a Polygon with holes,
+		* a Multi geometry inside a collection) show read-only and stay in the value.
+		*
+		* Needs the optional `maplibre-gl`, `terra-draw` and
+		* `terra-draw-maplibre-gl-adapter` peers.
+		*
+		* @example
+		* <ShapeInput source="area" kind="Polygon" label="Area" />
+		*/
+		const props = __props;
+		const emit = __emit;
+		const translate = useTranslate();
+		const notifications = useCheloneNotifications();
+		const validators = [
+			...props.minVertices === void 0 ? [] : [minVertices(props.minVertices)],
+			...props.maxVertices === void 0 ? [] : [maxVertices(props.maxVertices)],
+			...props.minAreaM2 === void 0 ? [] : [minAreaM2(props.minAreaM2)],
+			...props.allowSelfIntersection ? [] : [noSelfIntersection()],
+			...Array.isArray(props.validate) ? props.validate : props.validate ? [props.validate] : []
+		];
+		const input = useInput({
+			source: props.source,
+			validate: validators,
+			format: (v) => v ?? null
+		});
+		const draft = computed(() => shapeToFeatures(props.kind, input.value.value));
+		const held = computed(() => heldFeatures(props.kind, input.value.value));
+		const tool = ref(null);
+		const controls = shallowRef(null);
+		const written = { current: void 0 };
+		const invalid = computed(() => input.touched.value && input.error.value != null);
+		let refining = null;
+		onBeforeUnmount(() => refining?.abort());
+		async function runRefine(committed) {
+			const refineValue = props.refine;
+			if (!refineValue) return;
+			const abort = new AbortController();
+			refining = abort;
+			const warnFailed = () => {
+				const message = props.refineFailedMessage;
+				if (message) notifications?.notify(message, { type: "warning" });
+			};
+			let result;
+			try {
+				result = await refineValue(committed, { signal: abort.signal });
+			} catch {
+				if (!abort.signal.aborted) warnFailed();
+				return;
+			}
+			if (abort.signal.aborted) return;
+			if (result === null) {
+				warnFailed();
+				return;
+			}
+			if (toRaw(input.value.value) !== toRaw(committed) || deepEqual(result, committed)) return;
+			written.current = result;
+			input.setValue(result);
+			input.blur();
+			emit("commit", result);
+		}
+		function onEdit(edit) {
+			refining?.abort();
+			const refused = HOLDS_MANY.has(props.kind) ? controls.value?.refused.value ?? [] : [];
+			let features = [...edit.features, ...refused];
+			const prev = input.value.value;
+			let addHeld = true;
+			if (edit.type === "cut") {
+				tool.value = null;
+				const cut = cutFeatures([...features, ...heldFeatures(props.kind, prev)], edit.cutter);
+				if (!cut.changed) return;
+				if (!HOLDS_MANY.has(props.kind) && cut.features.length > 1) return;
+				features = cut.features;
+				addHeld = false;
+			}
+			const next = featuresToShape(props.kind, features, prev, {
+				aspectRatio: props.aspectRatio,
+				addHeld
+			});
+			written.current = next ?? void 0;
+			input.setValue(next);
+			input.blur();
+			if (edit.type === "draw") tool.value = null;
+			emit("commit", next);
+			if (next !== null) runRefine(next);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("fieldset", {
+				"data-slot": "shape-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(field_label_text_default, {
+					label: props.label,
+					source: props.source
+				}, null, 8, ["label", "source"]), unref(input).isRequired ? (openBlock(), createElementBlock("span", _hoisted_3, " *")) : createCommentVNode("", true)])) : createCommentVNode("", true),
+				!props.disabled ? (openBlock(), createBlock(draw_toolbar_default, {
+					key: 1,
+					active: tool.value,
+					"onUpdate:active": _cache[0] || (_cache[0] = ($event) => tool.value = $event),
+					tools: props.tools ?? defaultTools(props.kind),
+					"can-delete": (controls.value?.selectedId.value ?? null) !== null,
+					onDelete: _cache[1] || (_cache[1] = ($event) => controls.value?.deleteSelected())
+				}, null, 8, [
+					"active",
+					"tools",
+					"can-delete"
+				])) : createCommentVNode("", true),
+				createVNode(map_canvas_default, {
+					center: props.defaultCenter,
+					zoom: props.zoom,
+					height: props.height,
+					"map-style": props.mapStyle
+				}, {
+					default: withCtx(() => [createVNode(unref(Editor), {
+						features: draft.value,
+						held: held.value,
+						tool: tool.value,
+						disabled: props.disabled,
+						snappable: props.snappable,
+						"snap-distance": props.snapDistance,
+						"shape-style": props.shapeStyle,
+						fit: props.fitBounds,
+						"get-value": () => unref(input).value.value,
+						written,
+						onEdit,
+						onControls: _cache[2] || (_cache[2] = ($event) => controls.value = $event)
+					}, null, 8, [
+						"features",
+						"held",
+						"tool",
+						"disabled",
+						"snappable",
+						"snap-distance",
+						"shape-style",
+						"fit",
+						"get-value"
+					])]),
+					_: 1
+				}, 8, [
+					"center",
+					"zoom",
+					"height",
+					"map-style"
+				]),
+				(controls.value?.refused.value.length ?? 0) > 0 ? (openBlock(), createElementBlock("p", _hoisted_4, toDisplayString(unref(translate)("chelone.map.shape_not_shown", { _: "Part of this shape cannot be shown on the map" })), 1)) : createCommentVNode("", true),
+				createVNode(input_helper_text_default, { "helper-text": props.helperText }, null, 8, ["helper-text"]),
+				invalid.value ? (openBlock(), createBlock(unref(FieldError), { key: 3 }, {
+					default: withCtx(() => [createVNode(validation_error_default, { error: unref(input).error.value }, null, 8, ["error"])]),
+					_: 1
+				})) : createCommentVNode("", true)
+			], 10, _hoisted_1);
+		};
+	}
+});
+export { shape_input_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/maps-draw/shape-inputs.d.ts

@@ -12,6 +12,12 @@ export type GeometryShape = "Point" | "MultiPoint" | "LineString" | "MultiLineSt
  * `move` and `delete`.
  */
 export declare function toolsForShapes(shapes: readonly GeometryShape[]): ToolbarTool[];
+/**
+ * The props every input in this file forwards to `ShapeInput`: all of them but
+ * `kind`. A prop an input is not given reaches `ShapeInput` as `undefined`,
+ * which takes `ShapeInput`'s own default.
+ */
+export declare const geoJsonInputBaseKeys: readonly ["source", "label", "helperText", "validate", "minVertices", "maxVertices", "minAreaM2", "allowSelfIntersection", "tools", "snappable", "snapDistance", "disabled", "defaultCenter", "zoom", "height", "mapStyle", "shapeStyle", "aspectRatio", "fitBounds", "refine", "refineFailedMessage", "class"];
 /**
  * Edits a GeoJSON Point by drawing on a map. A new point replaces the old one.
  *
@@ -34,10 +40,12 @@ export interface LineStringInputProps extends GeoJsonInputBaseProps {
      * Snap each line the user draws or edits to the road network. `true` uses the
      * `router` of `MapsProvider`; a `RoutingProvider` is used as given. A saved
      * line is left alone until the user edits it, and a failed snap keeps the
-     * drawn line. Takes the place of `refine`.
+     * drawn line and warns. Takes the place of `refine`.
      */
     snapToRoads?: boolean | RoutingProvider;
 }
+/** The props `LineStringInput` takes: the base props and `snapToRoads`. */
+export declare const lineStringInputKeys: readonly ["source", "label", "helperText", "validate", "minVertices", "maxVertices", "minAreaM2", "allowSelfIntersection", "tools", "snappable", "snapDistance", "disabled", "defaultCenter", "zoom", "height", "mapStyle", "shapeStyle", "aspectRatio", "fitBounds", "refine", "refineFailedMessage", "class", "snapToRoads"];
 /**
  * Edits a GeoJSON LineString. A new line replaces the old one.
  *
@@ -85,6 +93,8 @@ export interface GeoJsonInputProps extends GeoJsonInputBaseProps {
      */
     collection?: boolean;
 }
+/** The props `GeoJsonInput` takes: the base props, `shapes` and `collection`. */
+export declare const geoJsonInputKeys: readonly ["source", "label", "helperText", "validate", "minVertices", "maxVertices", "minAreaM2", "allowSelfIntersection", "tools", "snappable", "snapDistance", "disabled", "defaultCenter", "zoom", "height", "mapStyle", "shapeStyle", "aspectRatio", "fitBounds", "refine", "refineFailedMessage", "class", "shapes", "collection"];
 /**
  * Edits any one GeoJSON geometry, or with `collection` a GeometryCollection,
  * limited to the drawn `shapes`.
@@ -105,6 +115,8 @@ export interface FeatureInputProps extends GeoJsonInputBaseProps {
      */
     shape?: GeometryShape;
 }
+/** The props `FeatureInput` takes: the base props and `shape`. */
+export declare const featureInputKeys: readonly ["source", "label", "helperText", "validate", "minVertices", "maxVertices", "minAreaM2", "allowSelfIntersection", "tools", "snappable", "snapDistance", "disabled", "defaultCenter", "zoom", "height", "mapStyle", "shapeStyle", "aspectRatio", "fitBounds", "refine", "refineFailedMessage", "class", "shape"];
 /**
  * Edits a GeoJSON Feature. An edit keeps the feature's `id` and `properties`.
  *
@@ -120,6 +132,8 @@ export interface FeatureCollectionInputProps extends GeoJsonInputBaseProps {
     /** The shapes the user may draw. Defaults to `Point`, `LineString` and `Polygon`. */
     allowedShapes?: readonly GeometryShape[];
 }
+/** The props `FeatureCollectionInput` takes: the base props and `allowedShapes`. */
+export declare const featureCollectionInputKeys: readonly ["source", "label", "helperText", "validate", "minVertices", "maxVertices", "minAreaM2", "allowSelfIntersection", "tools", "snappable", "snapDistance", "disabled", "defaultCenter", "zoom", "height", "mapStyle", "shapeStyle", "aspectRatio", "fitBounds", "refine", "refineFailedMessage", "class", "allowedShapes"];
 /**
  * Edits a GeoJSON FeatureCollection. Each feature keeps its own `properties`
  * when another is removed.