@sakuzu/maplibre-gl-draw 1.0.0 → 2.0.0

package/dist/view/ui/selection-ui/extension-registry.d.ts

@@ -1,22 +1,11 @@
-/**
- * The registry of the Selection UI extension points
- *
- * A mechanism for the custom feature types of extension implementations to provide their own
- * boundingBox computation / resize handles / resize strategy / point frame extent.
- *
- * One registry belongs to one draw instance (it is created by createMapLibreGLDraw and handed
- * to the CustomLayer, the modes and the extension API). Two draw instances on the same page
- * never see each other's registrations, and destroying an instance clears its registry.
- * The tile size of the instance's map is held here as well, because the custom bounding box
- * calculators take it as an argument.
- */
 import type { Feature } from '../../../store/types.js';
-import type { AdditionalResizeHandlesCalculator, CustomBoundingBoxCalculator, CustomResizeCalculator, PointFrameExtent, PointFrameExtentProvider, ResizeStrategy } from './types.js';
+import type { AdditionalResizeHandlesCalculator, CustomBoundingBoxCalculator, FramePoint, PointFrameExtent, PointFrameExtentProvider, PointFrameOutlineProvider, ResizeStrategy, TypeResizeCalculator } from './types.js';
 /**
  * The side of the square selection frame of a point, in CSS px: 12.
  *
- * The same value as DEFAULT_POINT_STYLE.size. Types with no registered extent become this
- * square (the same look as the former fixed value).
+ * The same value as DEFAULT_POINT_STYLE.size. Types with neither a registered extent nor a
+ * default extent of the registry become this square. A draw instance gives its registry the
+ * extent of the marker of a built-in point as the default.
  */
 export declare const DEFAULT_POINT_FRAME_SIZE = 12;
 /**
@@ -35,9 +24,9 @@ export interface SelectionExtensionRegistry {
     /** Returns the additional resize handles calculator of a type, or `undefined` */
     getAdditionalResizeHandlesCalculator(type: string): AdditionalResizeHandlesCalculator | undefined;
     /** Registers how a feature type is resized, replacing the built-in computation */
-    registerCustomResize(type: string, calculator: CustomResizeCalculator): () => void;
+    registerCustomResize(type: string, calculator: TypeResizeCalculator): () => void;
     /** Returns the custom resize calculator of a type, or `undefined` */
-    getCustomResizeCalculator(type: string): CustomResizeCalculator | undefined;
+    getCustomResizeCalculator(type: string): TypeResizeCalculator | undefined;
     /** Registers whether a feature type resizes by its coordinates or by its scale */
     registerResizeStrategy(type: string, strategy: ResizeStrategy): () => void;
     /** Returns the resize strategy of a type, or `undefined` */
@@ -50,10 +39,21 @@ export interface SelectionExtensionRegistry {
      * Resolve the half width and half height of the selection box of a zero-area point
      *
      * Types with no registration, types that return null and values that are not finite
-     * degrade to the default square (the frame is not broken while the actual size on the
-     * extension side is not yet determined).
+     * degrade to the default extent of the registry, and then to the default square (the frame
+     * is not broken while the actual size on the extension side is not yet determined).
      */
     resolvePointFrameExtent(feature: Feature): PointFrameExtent;
+    /** Registers the outline of the selection frame of a point-like feature type */
+    registerPointFrameOutline(type: string, provider: PointFrameOutlineProvider): () => void;
+    /**
+     * The four corners of the selection frame of a zero-area feature on the screen, expanded by
+     * the margin: the registered outline when it gives four finite corners, else the rectangle
+     * of {@link resolvePointFrameExtent} around the center
+     *
+     * @param center The center of the frame on the screen, in CSS px
+     * @param margin The margin of the frame, in CSS px
+     */
+    resolvePointFrameCorners(feature: Feature, center: FramePoint, margin: number): FramePoint[];
     /** The tile size in px of the instance's map (passed to the custom bounding box calculators) */
     getTileSize(): number;
     /** Sets the tile size in px (the draw instance sets it from the map) */
@@ -65,12 +65,23 @@ export interface SelectionExtensionRegistry {
  * Creates an empty {@link SelectionExtensionRegistry} with a tile size of 512 px, for testing a
  * custom feature handler in isolation.
  *
+ * @param defaultPointFrameExtent - The extent of the frame of a point whose type registers
+ *   none, or whose provider gives none; without it (or when it returns null) the frame is the
+ *   square of DEFAULT_POINT_FRAME_SIZE
  * @returns A new registry with no registration
  */
-export declare function createSelectionExtensionRegistry(): SelectionExtensionRegistry;
+export declare function createSelectionExtensionRegistry(defaultPointFrameExtent?: PointFrameExtentProvider): SelectionExtensionRegistry;
 /**
  * Resolve the extent of a point's selection box with an optional provider
  *
  * Without a registry (callers outside a draw instance) the default square is returned.
  */
 export declare function resolvePointFrameExtentWith(provider: PointFrameExtentProvider | undefined, feature: Feature): PointFrameExtent;
+/**
+ * The four corners of the selection frame of a zero-area feature on the screen, expanded by
+ * the margin, with optional providers
+ *
+ * An outline of four finite corners has every edge moved outward by the margin; any other
+ * outline, or none, gives the rectangle of the extent around the center, widened the same way.
+ */
+export declare function resolvePointFrameCornersWith(extentProvider: PointFrameExtentProvider | undefined, outlineProvider: PointFrameOutlineProvider | undefined, feature: Feature, center: FramePoint, margin: number): FramePoint[];

package/dist/view/ui/selection-ui/extension-registry.js

@@ -1,10 +1,24 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * The registry of the Selection UI extension points
+ *
+ * A mechanism for the custom feature types of extension implementations to provide their own
+ * boundingBox computation / resize handles / resize strategy / point frame extent.
+ *
+ * One registry belongs to one draw instance (it is created by its engine and handed to the
+ * CustomLayer, the modes and the extension host). Two draw instances on the same page
+ * never see each other's registrations, and destroying an instance clears its registry.
+ * The tile size of the instance's map is held here as well, because the custom bounding box
+ * calculators take it as an argument.
+ */
+import { expandQuad } from '../../../shared/math/transform.js';
 /**
  * The side of the square selection frame of a point, in CSS px: 12.
  *
- * The same value as DEFAULT_POINT_STYLE.size. Types with no registered extent become this
- * square (the same look as the former fixed value).
+ * The same value as DEFAULT_POINT_STYLE.size. Types with neither a registered extent nor a
+ * default extent of the registry become this square. A draw instance gives its registry the
+ * extent of the marker of a built-in point as the default.
  */
 export const DEFAULT_POINT_FRAME_SIZE = 12;
 /** The tile size used until the map reports its own (maplibre's default) */
@@ -23,15 +37,28 @@ function registerIn(map, type, value) {
  * Creates an empty {@link SelectionExtensionRegistry} with a tile size of 512 px, for testing a
  * custom feature handler in isolation.
  *
+ * @param defaultPointFrameExtent - The extent of the frame of a point whose type registers
+ *   none, or whose provider gives none; without it (or when it returns null) the frame is the
+ *   square of DEFAULT_POINT_FRAME_SIZE
  * @returns A new registry with no registration
  */
-export function createSelectionExtensionRegistry() {
+export function createSelectionExtensionRegistry(defaultPointFrameExtent) {
     const boundingBoxes = new Map();
     const additionalHandles = new Map();
     const customResizes = new Map();
     const resizeStrategies = new Map();
     const pointFrameExtents = new Map();
+    const pointFrameOutlines = new Map();
     let tileSize = DEFAULT_REGISTRY_TILE_SIZE;
+    /** The extent provider of a type, falling back to the default extent of the registry */
+    const extentProviderOf = (type) => {
+        const own = pointFrameExtents.get(type);
+        if (!defaultPointFrameExtent)
+            return own;
+        if (!own)
+            return defaultPointFrameExtent;
+        return (feature) => validExtent(own(feature)) ?? defaultPointFrameExtent(feature);
+    };
     return {
         registerBoundingBox: (type, calculator) => registerIn(boundingBoxes, type, calculator),
         getBoundingBoxCalculator: (type) => boundingBoxes.get(type),
@@ -44,7 +71,11 @@ export function createSelectionExtensionRegistry() {
         registerPointFrameExtent: (type, provider) => registerIn(pointFrameExtents, type, provider),
         getPointFrameExtentProvider: (type) => pointFrameExtents.get(type),
         resolvePointFrameExtent(feature) {
-            return resolvePointFrameExtentWith(pointFrameExtents.get(feature.type), feature);
+            return resolvePointFrameExtentWith(extentProviderOf(feature.type), feature);
+        },
+        registerPointFrameOutline: (type, provider) => registerIn(pointFrameOutlines, type, provider),
+        resolvePointFrameCorners(feature, center, margin) {
+            return resolvePointFrameCornersWith(extentProviderOf(feature.type), pointFrameOutlines.get(feature.type), feature, center, margin);
         },
         getTileSize: () => tileSize,
         setTileSize(value) {
@@ -56,6 +87,7 @@ export function createSelectionExtensionRegistry() {
             customResizes.clear();
             resizeStrategies.clear();
             pointFrameExtents.clear();
+            pointFrameOutlines.clear();
         },
     };
 }
@@ -65,14 +97,45 @@ export function createSelectionExtensionRegistry() {
  * Without a registry (callers outside a draw instance) the default square is returned.
  */
 export function resolvePointFrameExtentWith(provider, feature) {
-    const extent = provider?.(feature);
+    const extent = validExtent(provider?.(feature));
+    if (!extent) {
+        const half = DEFAULT_POINT_FRAME_SIZE / 2;
+        return { halfWidth: half, halfHeight: half };
+    }
+    return extent;
+}
+/** The extent when it is one (finite and not negative), else null */
+function validExtent(extent) {
     if (!extent ||
         !Number.isFinite(extent.halfWidth) ||
         !Number.isFinite(extent.halfHeight) ||
         extent.halfWidth < 0 ||
         extent.halfHeight < 0) {
-        const half = DEFAULT_POINT_FRAME_SIZE / 2;
-        return { halfWidth: half, halfHeight: half };
+        return null;
     }
     return extent;
 }
+/**
+ * The four corners of the selection frame of a zero-area feature on the screen, expanded by
+ * the margin, with optional providers
+ *
+ * An outline of four finite corners has every edge moved outward by the margin; any other
+ * outline, or none, gives the rectangle of the extent around the center, widened the same way.
+ */
+export function resolvePointFrameCornersWith(extentProvider, outlineProvider, feature, center, margin) {
+    const outline = outlineProvider?.(feature);
+    if (outline &&
+        outline.length === 4 &&
+        outline.every((corner) => Number.isFinite(corner.x) && Number.isFinite(corner.y))) {
+        return expandQuad(outline, margin);
+    }
+    const extent = resolvePointFrameExtentWith(extentProvider, feature);
+    const halfWidth = extent.halfWidth + margin;
+    const halfHeight = extent.halfHeight + margin;
+    return [
+        { x: center.x - halfWidth, y: center.y - halfHeight },
+        { x: center.x + halfWidth, y: center.y - halfHeight },
+        { x: center.x + halfWidth, y: center.y + halfHeight },
+        { x: center.x - halfWidth, y: center.y + halfHeight },
+    ];
+}

package/dist/view/ui/selection-ui/index.d.ts

@@ -7,6 +7,6 @@
  */
 export { computeBoundingBox, computeCombinedBoundingBox, hasZeroArea, rotateBoundingBox, } from './bounding-box.js';
 export type { SelectionExtensionRegistry } from './extension-registry.js';
-export { createSelectionExtensionRegistry, DEFAULT_POINT_FRAME_SIZE, resolvePointFrameExtentWith, } from './extension-registry.js';
+export { createSelectionExtensionRegistry, DEFAULT_POINT_FRAME_SIZE, resolvePointFrameCornersWith, resolvePointFrameExtentWith, } from './extension-registry.js';
 export { SelectionUIRenderer } from './renderer.js';
-export type { AdditionalHandleInfo, AdditionalResizeHandlesCalculator, BoundingBoxCoords, CustomBoundingBoxCalculator, CustomResizeCalculator, PointFrameExtent, PointFrameExtentProvider, ResizeStrategy, } from './types.js';
+export type { AdditionalHandleInfo, AdditionalResizeHandlesCalculator, BoundingBoxCoords, CustomBoundingBoxCalculator, FramePoint, PointFrameExtent, PointFrameExtentProvider, PointFrameOutlineProvider, ResizeStrategy, TypeResizeCalculator, } from './types.js';

package/dist/view/ui/selection-ui/index.js

@@ -8,5 +8,5 @@
  * symbols.
  */
 export { computeBoundingBox, computeCombinedBoundingBox, hasZeroArea, rotateBoundingBox, } from './bounding-box.js';
-export { createSelectionExtensionRegistry, DEFAULT_POINT_FRAME_SIZE, resolvePointFrameExtentWith, } from './extension-registry.js';
+export { createSelectionExtensionRegistry, DEFAULT_POINT_FRAME_SIZE, resolvePointFrameCornersWith, resolvePointFrameExtentWith, } from './extension-registry.js';
 export { SelectionUIRenderer } from './renderer.js';

package/dist/view/ui/selection-ui/renderer.js

@@ -129,18 +129,13 @@ _SelectionUIRenderer_strokeRenderer = new WeakMap(), _SelectionUIRenderer_extens
         // coordinates must not be treated as a Coordinate)
         if (hasZeroArea(bbox)) {
             const center = transform.project(bbox.center);
-            const extent = __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f").resolvePointFrameExtent(feature);
-            const halfWidth = extent.halfWidth + margin;
-            const halfHeight = extent.halfHeight + margin;
-            const topLeft = transform.unproject({ x: center.x - halfWidth, y: center.y - halfHeight });
-            const bottomRight = transform.unproject({
-                x: center.x + halfWidth,
-                y: center.y + halfHeight,
-            });
-            minLng = Math.min(minLng, topLeft.lng, bottomRight.lng);
-            maxLng = Math.max(maxLng, topLeft.lng, bottomRight.lng);
-            minLat = Math.min(minLat, topLeft.lat, bottomRight.lat);
-            maxLat = Math.max(maxLat, topLeft.lat, bottomRight.lat);
+            for (const corner of __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f").resolvePointFrameCorners(feature, center, margin)) {
+                const at = transform.unproject(corner);
+                minLng = Math.min(minLng, at.lng);
+                maxLng = Math.max(maxLng, at.lng);
+                minLat = Math.min(minLat, at.lat);
+                maxLat = Math.max(maxLat, at.lat);
+            }
             continue;
         }
         const marginedBbox = applyMarginToBoundingBox(bbox, margin, transform, zoom);
@@ -175,34 +170,16 @@ _SelectionUIRenderer_strokeRenderer = new WeakMap(), _SelectionUIRenderer_extens
 }, _SelectionUIRenderer_drawPointBoundingBox = function _SelectionUIRenderer_drawPointBoundingBox(feature, coord, zoom) {
     if (!__classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f"))
         return;
-    const center = __classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f").project(coord);
+    const transform = __classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f");
+    const center = transform.project(coord);
     const margin = __classPrivateFieldGet(this, _SelectionUIRenderer_config, "f").boundingBox.margin;
-    const extent = __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f").resolvePointFrameExtent(feature);
-    const halfWidth = extent.halfWidth + margin;
-    const halfHeight = extent.halfHeight + margin;
-    const topLeft = __classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f").unproject({
-        x: center.x - halfWidth,
-        y: center.y - halfHeight,
-    });
-    const topRight = __classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f").unproject({
-        x: center.x + halfWidth,
-        y: center.y - halfHeight,
-    });
-    const bottomRight = __classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f").unproject({
-        x: center.x + halfWidth,
-        y: center.y + halfHeight,
+    const coords = __classPrivateFieldGet(this, _SelectionUIRenderer_extensions, "f")
+        .resolvePointFrameCorners(feature, center, margin)
+        .map((corner) => {
+        const at = transform.unproject(corner);
+        return [at.lng, at.lat];
     });
-    const bottomLeft = __classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f").unproject({
-        x: center.x - halfWidth,
-        y: center.y + halfHeight,
-    });
-    const coords = [
-        [topLeft.lng, topLeft.lat],
-        [topRight.lng, topRight.lat],
-        [bottomRight.lng, bottomRight.lat],
-        [bottomLeft.lng, bottomLeft.lat],
-        [topLeft.lng, topLeft.lat],
-    ];
+    coords.push(coords[0]);
     __classPrivateFieldGet(this, _SelectionUIRenderer_instances, "m", _SelectionUIRenderer_strokePath).call(this, coords, zoom);
 }, _SelectionUIRenderer_applyMargin = function _SelectionUIRenderer_applyMargin(bbox, zoom) {
     if (!__classPrivateFieldGet(this, _SelectionUIRenderer_transform, "f"))

package/dist/view/ui/selection-ui/types.d.ts

@@ -5,7 +5,7 @@
  */
 import type { BoundingBoxCoords } from '../../../shared/types/selection-box.js';
 import type { Coordinate, Feature } from '../../../store/types.js';
-export type { CustomResizeCalculator } from '../../../extension/index.js';
+export type { TypeResizeCalculator } from '../../../extension/index.js';
 export type { BoundingBoxCoords } from '../../../shared/types/selection-box.js';
 /**
  * Computes the selection box of a feature of a custom type.
@@ -29,9 +29,24 @@ export interface PointFrameExtent {
 /**
  * Returns the size of the selection frame of a point-like feature.
  *
- * Returning null gives the default dimensions (the square of DEFAULT_POINT_FRAME_SIZE).
+ * Returning null gives the default dimensions: the extent of the marker for a point the
+ * built-in type draws, else the square of DEFAULT_POINT_FRAME_SIZE.
  */
 export type PointFrameExtentProvider = (feature: Feature) => PointFrameExtent | null;
+/** A point on the screen in CSS px, from the top left of the map */
+export interface FramePoint {
+    x: number;
+    y: number;
+}
+/**
+ * Returns the outline of the selection frame of a point-like feature: its four corners on the
+ * screen in CSS px, in the order top left, top right, bottom right, bottom left of the shape.
+ *
+ * The frame of a rotated shape is drawn along it. The point stays zero-area: no resize or
+ * rotate handle appears. Returning null (or anything but four finite corners) gives the frame
+ * of {@link PointFrameExtentProvider}.
+ */
+export type PointFrameOutlineProvider = (feature: Feature) => readonly FramePoint[] | null;
 /**
  * A resize handle a custom feature type adds to the built-in ones (the same shape as
  * {@link HandleInfo}).

package/dist/view/ui/selection-ui-drawer.d.ts

@@ -32,6 +32,14 @@ export declare function renderSelectionUI(selectedFeatures: Feature[], zoom: num
  * not suggest editing).
  */
 isLocked?: boolean): void;
+/**
+ * Draw the auxiliary handles that belong to no feature (`getGlobalHandles`), whatever is
+ * selected
+ *
+ * The caller draws them only while they can be grabbed (the select mode, and the document
+ * neither read-only nor under the interaction lock).
+ */
+export declare function renderGlobalAuxiliaryHandles(zoom: number, projectionData: CustomRenderMethodInput['defaultProjectionData'], deps: SelectionUIDrawerDeps, dragState: DragState | null): void;
 /**
  * The minimal interface of the Store that drawing the following vertices needs
  *

package/dist/view/ui/selection-ui-drawer.js

@@ -57,14 +57,75 @@ isLocked = false) {
     if (selectedFeatures.length === 1) {
         // Get the selected vertex reference (only for the target feature)
         const selectedVertexRefs = selectedVertices?.featureId === selectedFeatures[0].id
-            ? selectedVertices.vertexIndices
+            ? selectedVertices.vertices
             : undefined;
         renderSingleSelectionHandles(selectedFeatures[0], zoom, selectionUIRenderer, selectionHandlesRenderer, operation, dragState, selectedVertexRefs, prepareVisibleHandleSet(selectedFeatures[0], map, scope), scope);
+        // The handles of the extensions, shown as the other handles are (hidden while another
+        // operation runs)
+        if (operation === null || operation === 'auxiliary') {
+            const context = auxiliaryHandleContext(map, zoom);
+            const positions = scope.auxiliaryHandles
+                .list()
+                .flatMap((provider) => provider.getHandles(selectedFeatures[0], context).map((handle) => handle.position));
+            if (positions.length > 0)
+                selectionHandlesRenderer.drawAuxiliaryHandles(positions, zoom);
+        }
     }
     else {
         renderMultiSelectionHandles(selectedFeatures, bbox, zoom, selectionHandlesRenderer, operation, scope);
     }
 }
+/**
+ * Draw the auxiliary handles that belong to no feature (`getGlobalHandles`), whatever is
+ * selected
+ *
+ * The caller draws them only while they can be grabbed (the select mode, and the document
+ * neither read-only nor under the interaction lock).
+ */
+export function renderGlobalAuxiliaryHandles(zoom, projectionData, deps, dragState) {
+    const { selectionHandlesRenderer, pointInstanceRenderer, map, scope } = deps;
+    if (!selectionHandlesRenderer)
+        return;
+    const operation = dragState?.operation ?? null;
+    if (operation !== null && operation !== 'auxiliary')
+        return;
+    const providers = scope.auxiliaryHandles.list();
+    if (!providers.some((provider) => provider.getGlobalHandles !== undefined))
+        return;
+    const context = auxiliaryHandleContext(map, zoom);
+    const positions = providers.flatMap((provider) => provider.getGlobalHandles?.(context).map((handle) => handle.position) ?? []);
+    if (positions.length === 0)
+        return;
+    if (pointInstanceRenderer)
+        pointInstanceRenderer.setProjectionData(projectionData);
+    selectionHandlesRenderer.setTransform(coordinateTransformOf(map));
+    selectionHandlesRenderer.setProjectionData(projectionData);
+    selectionHandlesRenderer.drawAuxiliaryHandles(positions, zoom);
+}
+/** The coordinate transform of the map */
+function coordinateTransformOf(map) {
+    return {
+        project: (lngLat) => map.project([lngLat[0], lngLat[1]]),
+        unproject: (point) => {
+            const ll = map.unproject([point.x, point.y]);
+            return { lng: ll.lng, lat: ll.lat };
+        },
+    };
+}
+/**
+ * The context the providers of auxiliary handles get when their handles are drawn: the
+ * point is the center of the canvas, as there is no pointer to test
+ */
+function auxiliaryHandleContext(map, zoom) {
+    const transform = coordinateTransformOf(map);
+    const canvas = map.getCanvas();
+    return {
+        point: { x: canvas.clientWidth / 2, y: canvas.clientHeight / 2 },
+        project: (lngLat) => transform.project(lngLat),
+        unproject: (point) => transform.unproject(point),
+        zoom,
+    };
+}
 /**
  * Prepare the thinning set
  *
@@ -153,7 +214,7 @@ export function renderFollowedVertices(followedVertices, store, zoom, projection
         // The handles of features that disappeared or were hidden during the drag are not drawn
         if (!feature?.visible || isLocallyHidden(feature, store))
             continue;
-        selectionHandlesRenderer.drawFollowedVertexHandles(feature, followed.vertexIndices, zoom);
+        selectionHandlesRenderer.drawFollowedVertexHandles(feature, followed.vertices, zoom);
     }
 }
 /**

package/dist/view/ui/tentative.js

@@ -1,6 +1,6 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
-import { destinationPoint } from '../../geometry/index.js';
+import { destinationPoint } from '../../geometry/distance.js';
 import { generateCirclePolygon } from '../../shared/math/index.js';
 import { FillShaderManager } from '../renderers/polygon/fill.js';
 /**

package/dist/webgl/index.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Write your own shaders that draw the way the library does.
+ *
+ * Use it only when a custom feature type or an overlay needs a shader of its own. The
+ * {@link maplibre-gl-draw!RenderContext | RenderContext} a renderer receives already carries
+ * the shared renderers of lines, areas and point markers, and most renderers need nothing
+ * more. This entry holds the GLSL of the projection, the uniforms that go with it, the quad
+ * shader, and the rules the shared renderers follow for dashes and terrain. The parts that draw
+ * on the terrain take the render context of the draw call (or its `terrain`). Unlike the main
+ * entry, it may change in a minor release.
+ *
+ * ```ts
+ * import {
+ *   createProgram, OFFSET_MODE_GLSL, ProjectionUniformManager,
+ * } from '@sakuzu/maplibre-gl-draw/webgl';
+ *
+ * let program: WebGLProgram | null = null;
+ * let uniforms: ProjectionUniformManager | null = null;
+ * draw.extensions.overlays.add({
+ *   name: 'my-shader',
+ *   onAdd: () => {},
+ *   draw(ctx) {
+ *     if (!program) {
+ *       const vertex = vertexSource(ctx.shader.vertexShaderPrelude, OFFSET_MODE_GLSL);
+ *       program = createProgram(ctx.gl, vertex, fragmentSource);
+ *       uniforms = new ProjectionUniformManager(ctx.gl);
+ *       uniforms.getLocations(program);
+ *     }
+ *     ctx.gl.useProgram(program);
+ *     uniforms?.setTerrain(ctx);
+ *     uniforms?.setUniforms(ctx.projection, ctx.zoom, ctx.offset);
+ *     // bind the buffers of your shape and draw it
+ *   },
+ *   onRemove: (_map, gl) => gl.deleteProgram(program),
+ * });
+ * ```
+ *
+ * Read next: the guide
+ * [custom feature types](https://sakuzu.github.io/maplibre-gl-draw/guides/custom-types). The
+ * parts used most are {@link createProgram}, {@link OFFSET_MODE_GLSL} and
+ * {@link ProjectionUniformManager}.
+ *
+ * @module webgl
+ */
+export { DEFAULT_TILE_SIZE } from '../shared/math/constants.js';
+export { calculateLngLatOffset, createProgram, OFFSET_MODE_GLSL, } from '../view/shaders/helpers.js';
+export { ProjectionUniformManager } from '../view/shaders/projection.js';
+export { applyDrawBlendState } from '../view/layer/blend.js';
+export { drawBillboardsWithoutDepth } from '../view/renderers/point/billboard-depth.js';
+export type { QuadDrapeGlyphs } from '../view/terrain/drape/quad.js';
+export type { QuadVertices } from '../view/shaders/quad.js';
+export { computeQuadVertices, drawQuadSurfaceOnTerrain, QuadShader } from '../view/shaders/quad.js';
+export { QUAD_GLYPH_STRIDE } from '../view/terrain/drape/quad-glyphs.js';
+export type { SDFStrokeOptions, SDFStrokeStyle } from '../view/renderers/line/sdf-line.js';
+export type { WidthUnit } from '../view/renderers/stroke.js';
+export { getStrokeDashPattern as dashPattern, splitIntoDashes, } from '../view/renderers/line/dash.js';
+export { terrainTessellationStep } from '../view/terrain/polygon.js';
+export { densifyPath } from '../view/terrain/tessellation.js';
+export { PointHitTestStrategy } from '../dispatcher/hit-test/strategies/point.js';
+export type { Coordinate } from '../shared/types/model.js';
+export type { BlendCapableGL } from '../view/layer/blend.js';
+export type { DashSegment } from '../view/renderers/line/dash.js';
+export type { ProjectionUniformLocations } from '../view/shaders/projection.js';
+export type { DrapeQuadCorners, QuadDrapeColor, QuadDrapeFill, QuadDrapeSurface, } from '../view/terrain/drape/quad.js';
+export type { MercatorRect, TessellationStep, TessellationTiling, } from '../view/terrain/tessellation.js';

package/dist/webgl/index.js

@@ -0,0 +1,62 @@
+// SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
+// SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * Write your own shaders that draw the way the library does.
+ *
+ * Use it only when a custom feature type or an overlay needs a shader of its own. The
+ * {@link maplibre-gl-draw!RenderContext | RenderContext} a renderer receives already carries
+ * the shared renderers of lines, areas and point markers, and most renderers need nothing
+ * more. This entry holds the GLSL of the projection, the uniforms that go with it, the quad
+ * shader, and the rules the shared renderers follow for dashes and terrain. The parts that draw
+ * on the terrain take the render context of the draw call (or its `terrain`). Unlike the main
+ * entry, it may change in a minor release.
+ *
+ * ```ts
+ * import {
+ *   createProgram, OFFSET_MODE_GLSL, ProjectionUniformManager,
+ * } from '@sakuzu/maplibre-gl-draw/webgl';
+ *
+ * let program: WebGLProgram | null = null;
+ * let uniforms: ProjectionUniformManager | null = null;
+ * draw.extensions.overlays.add({
+ *   name: 'my-shader',
+ *   onAdd: () => {},
+ *   draw(ctx) {
+ *     if (!program) {
+ *       const vertex = vertexSource(ctx.shader.vertexShaderPrelude, OFFSET_MODE_GLSL);
+ *       program = createProgram(ctx.gl, vertex, fragmentSource);
+ *       uniforms = new ProjectionUniformManager(ctx.gl);
+ *       uniforms.getLocations(program);
+ *     }
+ *     ctx.gl.useProgram(program);
+ *     uniforms?.setTerrain(ctx);
+ *     uniforms?.setUniforms(ctx.projection, ctx.zoom, ctx.offset);
+ *     // bind the buffers of your shape and draw it
+ *   },
+ *   onRemove: (_map, gl) => gl.deleteProgram(program),
+ * });
+ * ```
+ *
+ * Read next: the guide
+ * [custom feature types](https://sakuzu.github.io/maplibre-gl-draw/guides/custom-types). The
+ * parts used most are {@link createProgram}, {@link OFFSET_MODE_GLSL} and
+ * {@link ProjectionUniformManager}.
+ *
+ * @module webgl
+ */
+// biome-ignore-all assist/source/organizeImports: the exports are grouped by section
+// Shaders and projection
+export { DEFAULT_TILE_SIZE } from '../shared/math/constants.js';
+export { calculateLngLatOffset, createProgram, OFFSET_MODE_GLSL, } from '../view/shaders/helpers.js';
+export { ProjectionUniformManager } from '../view/shaders/projection.js';
+// Blending and billboards
+export { applyDrawBlendState } from '../view/layer/blend.js';
+export { drawBillboardsWithoutDepth } from '../view/renderers/point/billboard-depth.js';
+export { computeQuadVertices, drawQuadSurfaceOnTerrain, QuadShader } from '../view/shaders/quad.js';
+export { QUAD_GLYPH_STRIDE } from '../view/terrain/drape/quad-glyphs.js';
+export { getStrokeDashPattern as dashPattern, splitIntoDashes, } from '../view/renderers/line/dash.js';
+// Terrain
+export { terrainTessellationStep } from '../view/terrain/polygon.js';
+export { densifyPath } from '../view/terrain/tessellation.js';
+// Hit testing
+export { PointHitTestStrategy } from '../dispatcher/hit-test/strategies/point.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sakuzu/maplibre-gl-draw",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "WebGL2 drawing and editing engine for MapLibre GL JS: points, lines, and polygons rendered in a custom layer, with selection, hit testing, and geometry utilities.",
   "keywords": [
     "maplibre",
@@ -38,10 +38,15 @@
       "import": "./dist/geometry/index.js",
       "default": "./dist/geometry/index.js"
     },
-    "./columnar": {
-      "types": "./dist/display/columnar/index.d.ts",
-      "import": "./dist/display/columnar/index.js",
-      "default": "./dist/display/columnar/index.js"
+    "./table": {
+      "types": "./dist/table/index.d.ts",
+      "import": "./dist/table/index.js",
+      "default": "./dist/table/index.js"
+    },
+    "./webgl": {
+      "types": "./dist/webgl/index.d.ts",
+      "import": "./dist/webgl/index.js",
+      "default": "./dist/webgl/index.js"
     },
     "./package.json": "./package.json"
   },
@@ -67,10 +72,10 @@
     "build": "rm -rf dist tsconfig.build.tsbuildinfo && tsc -p tsconfig.build.json",
     "typecheck": "tsc --noEmit",
     "check:spdx": "node scripts/spdx.mjs",
-    "lint": "biome check src examples playground bench scripts && npm run check:layers && npm run check:terms && npm run check:spdx",
+    "lint": "biome check src examples playground bench scripts docs/.vitepress/config.mts && npm run check:layers && npm run check:terms && npm run check:spdx",
     "check:layers": "node scripts/check-layers.mjs",
     "check:terms": "node scripts/check-terms.mjs",
-    "docs:api": "typedoc",
+    "docs:api": "typedoc --options typedoc.site.json",
     "docs:check": "node scripts/docs-check.mjs",
     "docs:image": "node scripts/capture-readme-image.mjs",
     "build:site": "node scripts/build-site.mjs",
@@ -83,8 +88,11 @@
     "dev": "npm run dev -w examples",
     "dev:playground": "npm run dev -w playground",
     "dev:bench": "npm run dev -w bench",
-    "check:package": "publint && rm -rf .pack && mkdir -p .pack && npm pack --ignore-scripts --pack-destination .pack >/dev/null && attw .pack/*.tgz --profile esm-only && node --input-type=module -e \"await import('./dist/index.js'); await import('./dist/geometry/index.js'); await import('./dist/display/columnar/index.js'); console.log('dist imports ok')\" && rm -rf .pack",
-    "prepack": "npm run build"
+    "check:package": "publint && rm -rf .pack && mkdir -p .pack && npm pack --ignore-scripts --pack-destination .pack >/dev/null && attw .pack/*.tgz --profile esm-only && node --input-type=module -e \"await import('./dist/index.js'); await import('./dist/geometry/index.js'); await import('./dist/table/index.js'); await import('./dist/webgl/index.js'); console.log('dist imports ok')\" && rm -rf .pack",
+    "prepack": "npm run build",
+    "site:dev": "npm run docs:api && vitepress dev docs",
+    "site:build": "npm run docs:api && vitepress build docs",
+    "site:preview": "vitepress preview docs"
   },
   "dependencies": {
     "@types/geojson": "^7946.0.16",
@@ -107,7 +115,10 @@
     "playwright-core": "1.62.1",
     "publint": "^0.3.24",
     "typedoc": "0.28.20",
+    "typedoc-plugin-markdown": "^4.13.1",
+    "typedoc-vitepress-theme": "^1.1.4",
     "typescript": "^6.0.3",
+    "vitepress": "^1.6.4",
     "vitest": "^4.1.11"
   }
 }