@sakuzu/maplibre-gl-draw 1.0.0 → 2.0.0

package/dist/modes/draw/trace-support.js

@@ -3,90 +3,117 @@
 import { resolveVertexCoordinates } from '../../operations/shared-vertex.js';
 import { buildTraceGraph, findTracePath } from '../../operations/trace-graph.js';
 import { degreesPerPixel } from '../../snapping/geometry.js';
-import { isSnapVisible } from '../../snapping/providers/shared.js';
 import { DEFAULT_SNAP_OPTIONS } from '../../snapping/types.js';
+import { isLocallyHidden } from '../../store/local-visibility.js';
 /**
  * The margin of the extent over which the material of the graph is collected
  * (as a ratio of the bbox of the two endpoints)
  */
 const TRACE_BBOX_MARGIN_RATIO = 0.2;
+/** A feature of the document or a row, in the shape the graph is built from */
+function graphFeature(id, geometry, type = geometry.type) {
+    return {
+        id,
+        type,
+        geometry,
+        layerId: '',
+        groupId: undefined,
+        properties: {},
+        locked: false,
+        visible: true,
+        style: {},
+    };
+}
 /**
- * Whether tracing is enabled (if there is no configuration, it is regarded as enabled)
+ * The trace source over the context of a mode: the options of the instance, the features of
+ * the document by extent and the rows of the datasets to trace along
  */
-export function isTraceEnabled(context) {
-    return context.trace?.enabled !== false;
+export function traceSourceOf(ctx) {
+    const { draw, store } = ctx;
+    const shown = (feature) => {
+        if (!feature.visible)
+            return false;
+        if (!store.getLayer(feature.layerId)?.visible)
+            return false;
+        if (feature.groupId && store.getGroup(feature.groupId)?.visible === false)
+            return false;
+        return !isLocallyHidden(feature, store);
+    };
+    return {
+        isEnabled: () => draw.options.get().tracing?.enabled !== false,
+        tolerancePx: () => draw.options.get().snapping?.tolerancePx ?? DEFAULT_SNAP_OPTIONS.tolerancePx,
+        zoom: () => ctx.screen.zoom,
+        geometryOf(anchor) {
+            if (anchor.datasetId === undefined) {
+                return draw.features.get(anchor.featureId)?.geometry ?? null;
+            }
+            const dataset = draw.datasets.get(anchor.datasetId);
+            const index = dataset?.findRow(anchor.featureId);
+            if (!dataset || index === null || index === undefined)
+                return null;
+            return dataset.getRow(index)?.geometry ?? null;
+        },
+        features(bbox) {
+            const extent = [bbox.minX, bbox.minY, bbox.maxX, bbox.maxY];
+            const features = draw.features
+                .list({ bbox: extent })
+                .filter(shown)
+                .map((feature) => feature);
+            for (const { row } of ctx.listTraceRows(extent)) {
+                if (row.geometry)
+                    features.push(graphFeature(String(row.id), row.geometry));
+            }
+            return features;
+        },
+    };
 }
 /**
- * Reads the snap target of the event that was just delivered as an endpoint of a trace
+ * Reads the snap target of an input as an endpoint of a trace
  *
- * Returns null for snaps that cannot be used for tracing (a guide, an intersection without
- * vertex references, an external candidate without a feature ID) and when nothing was snapped.
+ * Returns null for snaps that cannot be used for tracing (a guide, an intersection, an
+ * external candidate without a feature ID), when nothing was snapped, and when tracing is off.
  */
-export function readTraceAnchor(context, event) {
-    if (!isTraceEnabled(context))
+export function readTraceAnchor(source, event) {
+    if (!source.isEnabled())
         return null;
-    const result = context.getSnapResult?.();
-    const target = result?.target;
-    if (!result || !target || target.featureId === undefined)
+    const target = event.snapped.target;
+    if (!target || target.featureId === undefined)
         return null;
-    // For an event delivered without going through snapping (such as snap: false of a synthetic
-    // input), the most recent result belongs to a different coordinate, so it is not used
-    if (result.lngLat.lng !== event.lngLat.lng || result.lngLat.lat !== event.lngLat.lat) {
-        return null;
-    }
-    const coordinate = [result.lngLat.lng, result.lngLat.lat];
-    if (target.vertex) {
-        return {
-            featureId: target.featureId,
-            datasetId: target.datasetId,
-            endpoint: { coordinate, vertex: target.vertex },
-        };
-    }
-    const segment = target.segment;
-    if (segment?.startRef && segment.endRef) {
-        return {
-            featureId: target.featureId,
-            datasetId: target.datasetId,
-            endpoint: {
-                coordinate,
-                segment: { startRef: segment.startRef, endRef: segment.endRef },
-            },
-        };
+    const coordinate = [event.snapped.lngLat[0], event.snapped.lngLat[1]];
+    const anchor = (endpoint) => ({
+        featureId: target.featureId,
+        ...(target.datasetId !== undefined && { datasetId: target.datasetId }),
+        endpoint,
+    });
+    if (target.vertex)
+        return anchor({ coordinate, vertex: target.vertex });
+    if (target.kind === 'edge' && target.segment) {
+        const { start, end } = target.segment;
+        return anchor({
+            coordinate,
+            segment: { start: [start[0], start[1]], end: [end[0], end[1]] },
+        });
     }
     return null;
 }
 /**
- * Looks up the feature of the snap target
- *
- * Where it is resolved from depends on its origin. One from the Store is looked up with
- * store.getFeature, one from a dataset with getDatasetFeature.
+ * Turns the snap target into an endpoint of the graph (resolves a vertex reference into the
+ * coordinate the feature holds)
  */
-function anchorFeature(context, anchor) {
-    if (anchor.datasetId === undefined) {
-        return context.store.getFeature(anchor.featureId) ?? null;
-    }
-    return context.getDatasetFeature?.(anchor.datasetId, anchor.featureId) ?? null;
-}
-/**
- * Turns the snap target into an endpoint of the graph (resolves the vertex references into
- * actual coordinates)
- */
-function toGraphEndpoint(context, anchor) {
+function toGraphEndpoint(source, anchor) {
     const { coordinate, vertex, segment } = anchor.endpoint;
-    const feature = anchorFeature(context, anchor);
+    const geometry = source.geometryOf(anchor);
+    if (!geometry)
+        return null;
     if (vertex) {
-        // For a snap to a vertex the snapped coordinate is the vertex itself, but if the feature
-        // can be looked up, that one is taken as authoritative
-        const resolved = feature ? resolveVertexCoordinates(feature, [vertex])[0] : undefined;
+        const resolved = resolveVertexCoordinates(graphFeature(anchor.featureId, geometry), [
+            vertex,
+        ])[0];
         return { coordinate, node: resolved ?? coordinate };
     }
-    if (!segment || !feature)
-        return null;
-    const start = resolveVertexCoordinates(feature, [segment.startRef])[0];
-    const end = resolveVertexCoordinates(feature, [segment.endRef])[0];
-    if (!start || !end)
+    if (!segment)
         return null;
-    return { coordinate, segment: { start, end } };
+    return { coordinate, segment };
 }
 /**
  * The extent over which the material of the graph is collected
@@ -94,13 +121,13 @@ function toGraphEndpoint(context, anchor) {
  * The bbox of the two endpoints is expanded by 20 percent of its size plus the snapping
  * tolerance.
  */
-function traceBounds(context, from, to) {
+function traceBounds(source, from, to) {
     const minX = Math.min(from[0], to[0]);
     const maxX = Math.max(from[0], to[0]);
     const minY = Math.min(from[1], to[1]);
     const maxY = Math.max(from[1], to[1]);
-    const tolerancePx = context.snapOptions?.tolerancePx ?? DEFAULT_SNAP_OPTIONS.tolerancePx;
-    const perPixel = degreesPerPixel((minY + maxY) / 2, context.map.getZoom());
+    const tolerancePx = source.tolerancePx();
+    const perPixel = degreesPerPixel((minY + maxY) / 2, source.zoom());
     const marginX = (maxX - minX) * TRACE_BBOX_MARGIN_RATIO + perPixel.lng * tolerancePx;
     const marginY = (maxY - minY) * TRACE_BBOX_MARGIN_RATIO + perPixel.lat * tolerancePx;
     return {
@@ -110,35 +137,6 @@ function traceBounds(context, from, to) {
         maxY: maxY + marginY,
     };
 }
-/**
- * Collects the features that become the material of the graph
- *
- * The same scope as the targets of snapping, that is, the visible features of the Store and,
- * when snapping to data is enabled, the visible features of the datasets.
- */
-function collectTraceFeatures(context, bbox) {
-    const lng = (bbox.minX + bbox.maxX) / 2;
-    const lat = (bbox.minY + bbox.maxY) / 2;
-    // findNear looks up with a square extent, so the larger of the two radii is used
-    const radius = Math.max(bbox.maxX - lng, bbox.maxY - lat);
-    const features = [];
-    const seen = new Set();
-    for (const id of context.spatialIndex.findNear([lng, lat], radius)) {
-        if (seen.has(id))
-            continue;
-        seen.add(id);
-        const feature = context.store.getFeature(id);
-        if (!feature)
-            continue;
-        if (!isSnapVisible(feature, context.store))
-            continue;
-        features.push(feature);
-    }
-    const display = context.getDatasetTraceFeatures?.(bbox);
-    if (display)
-        features.push(...display);
-    return features;
-}
 /**
  * Derives the path between the previous confirmed click and the current snap target
  *
@@ -148,14 +146,13 @@ function collectTraceFeatures(context, bbox) {
  * shared vertex. Returns null when the two ends are not connected or when an endpoint cannot
  * be resolved (the caller then treats it as a straight line).
  */
-export function computeTracePath(context, from, to) {
+export function computeTracePath(source, from, to) {
     if (!from || !to)
         return null;
-    const fromEndpoint = toGraphEndpoint(context, from);
-    const toEndpoint = toGraphEndpoint(context, to);
+    const fromEndpoint = toGraphEndpoint(source, from);
+    const toEndpoint = toGraphEndpoint(source, to);
     if (!fromEndpoint || !toEndpoint)
         return null;
-    const bbox = traceBounds(context, fromEndpoint.coordinate, toEndpoint.coordinate);
-    const features = collectTraceFeatures(context, bbox);
-    return findTracePath(buildTraceGraph(features, bbox), fromEndpoint, toEndpoint);
+    const bbox = traceBounds(source, fromEndpoint.coordinate, toEndpoint.coordinate);
+    return findTracePath(buildTraceGraph(source.features(bbox), bbox), fromEndpoint, toEndpoint);
 }

package/dist/modes/draw/vertex-drawing.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/modes/draw/vertex-drawing.js

@@ -0,0 +1,176 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+import { computeTracePath, readTraceAnchor, traceSourceOf } from './trace-support.js';
+/** How near the closing vertex a click finishes the shape, in pixels */
+const VERTEX_CLICK_TOLERANCE = 10;
+/**
+ * Creates the handler of a mode that draws a shape vertex by vertex
+ *
+ * @internal
+ */
+export function createVertexDrawing(ctx, shape) {
+    const source = traceSourceOf(ctx);
+    let vertices = [];
+    /** The vertices undone, to redo */
+    let redo = [];
+    /** The last position of the pointer, to keep the dashed line on undo and redo */
+    let pointer = null;
+    /** Whether the pointer is on the closing vertex */
+    let nearClosing = false;
+    /** The snap target of the last placed vertex: where the next trace starts */
+    let traceAnchor = null;
+    /** The traced vertices up to the pointer, shown before they are placed */
+    let tracePreview = null;
+    const closable = () => vertices.length >= shape.minVertices && nearClosing;
+    /**
+     * Whether the input is on a placed vertex: within the click tolerance for the pointer, and at
+     * exactly its position for the input made from code, which is not a click of a hand
+     */
+    const onVertex = (event, index) => {
+        const vertex = vertices[index];
+        if (event.programmatic) {
+            return event.snapped.lngLat[0] === vertex[0] && event.snapped.lngLat[1] === vertex[1];
+        }
+        const [x, y] = ctx.screen.project(vertex);
+        return Math.hypot(event.point[0] - x, event.point[1] - y) <= VERTEX_CLICK_TOLERANCE;
+    };
+    const show = (withPointer) => {
+        if (vertices.length === 0) {
+            ctx.preview.clear();
+            return;
+        }
+        const tail = withPointer && pointer ? [...(tracePreview ?? []), pointer] : null;
+        const { feature, options } = shape.preview(vertices, tail, closable());
+        ctx.preview.set(feature, options);
+    };
+    const clearTrace = () => {
+        traceAnchor = null;
+        tracePreview = null;
+    };
+    const reset = () => {
+        vertices = [];
+        redo = [];
+        pointer = null;
+        nearClosing = false;
+        clearTrace();
+        ctx.preview.clear();
+    };
+    const finish = () => {
+        if (vertices.length < shape.minVertices)
+            return;
+        const input = shape.feature(vertices);
+        ctx.draw.transact(() => {
+            const feature = ctx.commitFeature(input);
+            if (feature)
+                ctx.draw.selection.set('feature', [feature.id]);
+        });
+        reset();
+        ctx.setMode('select');
+    };
+    const place = (event) => {
+        // The vertices of the boundary between the last placed vertex and this one come first
+        const anchor = readTraceAnchor(source, event);
+        const path = computeTracePath(source, traceAnchor, anchor);
+        if (path)
+            vertices.push(...path);
+        traceAnchor = anchor;
+        tracePreview = null;
+        vertices.push([event.snapped.lngLat[0], event.snapped.lngLat[1]]);
+        redo = [];
+        show(false);
+    };
+    const snapPreference = {
+        // The boundary the trace started along wins a tie between snapping candidates
+        get prefer() {
+            if (!traceAnchor || !source.isEnabled())
+                return null;
+            return {
+                featureId: traceAnchor.featureId,
+                ...(traceAnchor.datasetId !== undefined && { datasetId: traceAnchor.datasetId }),
+            };
+        },
+    };
+    return {
+        writes: true,
+        snapPreference,
+        onEnter() {
+            ctx.cursor.set('crosshair');
+            ctx.draw.transact(() => ctx.draw.selection.clear(), { source: 'silent' });
+            reset();
+        },
+        onExit() {
+            ctx.cursor.reset();
+            reset();
+        },
+        // What was being drawn is dropped when the state is reset from outside
+        onCancel: reset,
+        // A double click comes after its two clicks, which placed its position once (or finished
+        // the shape on the closing vertex); it finishes the shape and never zooms the map
+        onDoubleClick() {
+            finish();
+            return true;
+        },
+        onClick(event) {
+            // Read from the click itself: no pointer move has to come between two clicks
+            nearClosing = vertices.length > 0 && onVertex(event, shape.closingVertex(vertices));
+            if (closable())
+                finish();
+            // The second click of a double click lands on the vertex the first one placed
+            else if (vertices.length === 0 || !onVertex(event, vertices.length - 1))
+                place(event);
+            return true;
+        },
+        onPointerMove(event) {
+            pointer = [event.snapped.lngLat[0], event.snapped.lngLat[1]];
+            nearClosing = vertices.length > 0 && onVertex(event, shape.closingVertex(vertices));
+            tracePreview = computeTracePath(source, traceAnchor, readTraceAnchor(source, event));
+            ctx.cursor.set(closable() ? 'pointer' : 'crosshair');
+            if (vertices.length > 0)
+                show(true);
+            return false;
+        },
+        onKeyDown(event) {
+            switch (event.key) {
+                case 'Escape':
+                    if (vertices.length > 0)
+                        reset();
+                    else
+                        ctx.setMode('select');
+                    return true;
+                case 'Enter':
+                    finish();
+                    return true;
+                case 'Backspace':
+                case 'Delete':
+                    if (vertices.length > 0) {
+                        vertices.pop();
+                        // A vertex removed with the keyboard cannot be redone, and the trace starts over
+                        redo = [];
+                        clearTrace();
+                        show(false);
+                    }
+                    return true;
+                default:
+                    return false;
+            }
+        },
+        onUndoVertex() {
+            const removed = vertices.pop();
+            if (!removed)
+                return false;
+            redo.push(removed);
+            clearTrace();
+            show(true);
+            return true;
+        },
+        onRedoVertex() {
+            const restored = redo.pop();
+            if (!restored)
+                return false;
+            vertices.push(restored);
+            clearTrace();
+            show(true);
+            return true;
+        },
+    };
+}