@mirasen/chessboard 1.1.4 → 1.2.0

package/dist/extensions/first-party/annotations/denormalize.js

@@ -0,0 +1,22 @@
+import { denormalizeSquare } from '../../../state/board/denormalize.js';
+export function denormalizeCircles(circles) {
+    const result = [];
+    for (const circle of circles.values()) {
+        result.push({
+            square: denormalizeSquare(circle.square),
+            color: circle.color
+        });
+    }
+    return result;
+}
+export function denormalizeArrows(arrows) {
+    const result = [];
+    for (const arrow of arrows.values()) {
+        result.push({
+            from: denormalizeSquare(arrow.from),
+            to: denormalizeSquare(arrow.to),
+            color: arrow.color
+        });
+    }
+    return result;
+}

package/dist/extensions/first-party/annotations/factory.d.ts

@@ -0,0 +1,3 @@
+import type { AnnotationsDefinition } from './types/main.js';
+import type { AnnotationsInitOptions } from './types/public.js';
+export declare function createAnnotations(options?: AnnotationsInitOptions): AnnotationsDefinition;

package/dist/extensions/first-party/annotations/factory.js

@@ -0,0 +1,143 @@
+import { cloneDeep } from 'es-toolkit';
+import { extensionCreateInternalBase, extensionDestroyBase, extensionMountBase, extensionUnmountBase } from '../common/helpers.js';
+import { annotationsClear, annotationsGetArrows, annotationsGetCircles, annotationsGetClearOnCoreInteraction, annotationsGetDrawButton, annotationsGetDrawModifier, annotationsSetArrow, annotationsSetArrows, annotationsSetCircle, annotationsSetCircles, annotationsSetClearOnCoreInteraction, annotationsSetDrawButton, annotationsSetDrawModifier } from './api.js';
+import { cancelAnnotationsDrag, completeAnnotationsDrag, handleAnnotationsEvent } from './interaction.js';
+import { normalizeAnnotationsConfig, normalizeInitialAnnotations } from './normalize.js';
+import { renderCommittedAnnotations } from './render/committed.js';
+import { renderPreviewAnnotations } from './render/preview.js';
+import { EXTENSION_ID, EXTENSION_SLOTS } from './types/main.js';
+import { annotationsOnUpdate } from './update.js';
+export function createAnnotations(options = {}) {
+    const normalizedConfig = normalizeAnnotationsConfig(options.config);
+    const normalizedAnnotations = normalizeInitialAnnotations(options.annotations);
+    return {
+        id: EXTENSION_ID,
+        slots: EXTENSION_SLOTS,
+        createInstance(runtimeOptions) {
+            return createAnnotationsInstance(normalizedConfig, normalizedAnnotations, runtimeOptions);
+        }
+    };
+}
+function createAnnotationsInternal(normalizedConfig, normalizedAnnotations, runtimeOptions) {
+    // Clone to ensure each instance has independent mutable state
+    const config = cloneDeep(normalizedConfig);
+    const annotations = {
+        circles: new Map(normalizedAnnotations.circles),
+        arrows: new Map(normalizedAnnotations.arrows)
+    };
+    return {
+        ...extensionCreateInternalBase(runtimeOptions),
+        runtimeSurface: runtimeOptions.runtimeSurface,
+        svg: {
+            svgCircles: new Map(),
+            svgArrows: new Map()
+        },
+        annotations,
+        config,
+        activeDrawGesture: null,
+        activeDrawPreviewTarget: null,
+        previewSvg: { circle: null, arrow: null }
+    };
+}
+function extensionCleanSvg(state) {
+    state.svg.svgCircles.clear();
+    state.svg.svgArrows.clear();
+    if (state.previewSvg.arrow) {
+        state.previewSvg.arrow.marker.remove();
+    }
+    state.previewSvg.circle = null;
+    state.previewSvg.arrow = null;
+}
+function extensionClean(state) {
+    state.runtimeSurface.events.unsubscribeEvent('pointerdown');
+    state.runtimeSurface.events.unsubscribeEvent('contextmenu');
+    state.activeDrawGesture = null;
+    state.activeDrawPreviewTarget = null;
+    extensionCleanSvg(state);
+}
+function createAnnotationsPublicAPI(state) {
+    return {
+        getCircles() {
+            return annotationsGetCircles(state);
+        },
+        getArrows() {
+            return annotationsGetArrows(state);
+        },
+        setCircles(circles) {
+            annotationsSetCircles(state, circles);
+        },
+        setArrows(arrows) {
+            annotationsSetArrows(state, arrows);
+        },
+        circle(square, annotation) {
+            annotationsSetCircle(state, square, annotation);
+        },
+        arrow(from, to, annotation) {
+            annotationsSetArrow(state, from, to, annotation);
+        },
+        clear() {
+            annotationsClear(state);
+        },
+        get clearOnCoreInteraction() {
+            return annotationsGetClearOnCoreInteraction(state);
+        },
+        set clearOnCoreInteraction(value) {
+            annotationsSetClearOnCoreInteraction(state, value);
+        },
+        get drawButton() {
+            return annotationsGetDrawButton(state);
+        },
+        set drawButton(value) {
+            annotationsSetDrawButton(state, value);
+        },
+        get drawModifier() {
+            return annotationsGetDrawModifier(state);
+        },
+        set drawModifier(value) {
+            annotationsSetDrawModifier(state, value);
+        }
+    };
+}
+function createAnnotationsInstance(normalizedConfig, normalizedAnnotations, runtimeOptions) {
+    const internalState = createAnnotationsInternal(normalizedConfig, normalizedAnnotations, runtimeOptions);
+    const publicAPI = createAnnotationsPublicAPI(internalState);
+    return {
+        id: EXTENSION_ID,
+        mount(env) {
+            extensionMountBase(internalState, env.slotRoots);
+            internalState.runtimeSurface.events.subscribeEvent('pointerdown');
+            internalState.runtimeSurface.events.subscribeEvent('contextmenu');
+        },
+        onUpdate(context) {
+            annotationsOnUpdate(internalState, context);
+        },
+        render(context) {
+            if (context.invalidation.dirtyLayers & 1 /* DirtyLayer.COMMITTED */) {
+                renderCommittedAnnotations(internalState, context.currentFrame.layout.geometry);
+            }
+            if (context.invalidation.dirtyLayers & 2 /* DirtyLayer.PREVIEW */) {
+                renderPreviewAnnotations(internalState, context.currentFrame.layout.geometry);
+            }
+        },
+        onEvent(context) {
+            handleAnnotationsEvent(internalState, context);
+        },
+        completeDrag(session) {
+            completeAnnotationsDrag(internalState, session);
+        },
+        cancelDrag(session) {
+            cancelAnnotationsDrag(internalState, session);
+        },
+        unmount() {
+            extensionClean(internalState);
+            extensionUnmountBase(internalState);
+        },
+        destroy() {
+            extensionClean(internalState);
+            extensionDestroyBase(internalState);
+        },
+        getPublic() {
+            return publicAPI;
+        }
+    };
+}

package/dist/extensions/first-party/annotations/interaction.d.ts

@@ -0,0 +1,8 @@
+import type { ExtensionDragSessionSnapshot } from '../../types/basic/interaction.js';
+import type { ExtensionOnEventContext } from '../../types/context/events.js';
+import type { AnnotationColor, AnnotationsConfig } from './types/internal.js';
+import type { AnnotationsStateInternal } from './types/main.js';
+export declare function resolveAnnotationColor(config: AnnotationsConfig, rawEvent: PointerEvent): AnnotationColor;
+export declare function handleAnnotationsEvent(state: AnnotationsStateInternal, context: ExtensionOnEventContext): void;
+export declare function completeAnnotationsDrag(state: AnnotationsStateInternal, session: ExtensionDragSessionSnapshot): void;
+export declare function cancelAnnotationsDrag(state: AnnotationsStateInternal, session: ExtensionDragSessionSnapshot): void;

package/dist/extensions/first-party/annotations/interaction.js

@@ -0,0 +1,129 @@
+import assert from '@ktarmyshov/assert';
+import { clearCommittedAnnotations, hasCommittedAnnotations } from './committed.js';
+import { markCommittedDirtyAndRequestRender } from './invalidation.js';
+import { arrowAnnotationKeyNormalized } from './normalize.js';
+const ANNOTATIONS_IDLE_CLEAR_DRAG_TYPE = 'ext:idle-clear';
+const ANNOTATIONS_DRAW_DRAG_TYPE = 'ext:draw';
+export function resolveAnnotationColor(config, rawEvent) {
+    if (config.drawModifier != null) {
+        return config.colors[config.drawModifier];
+    }
+    if (rawEvent.ctrlKey)
+        return config.colors.ctrl;
+    if (rawEvent.shiftKey)
+        return config.colors.shift;
+    if (rawEvent.altKey)
+        return config.colors.alt;
+    if (rawEvent.metaKey)
+        return config.colors.meta;
+    return config.colors.none;
+}
+export function handleAnnotationsEvent(state, context) {
+    assert(context.rawEvent.type === 'pointerdown' || context.rawEvent.type === 'contextmenu');
+    if (context.rawEvent.type === 'contextmenu') {
+        // Browser context menus are separate from the pointer drag lifecycle.
+        // The board owns secondary-button interaction, so suppress the browser menu.
+        context.rawEvent.preventDefault();
+        return;
+    }
+    const rawEvent = context.rawEvent;
+    // The configured draw button owns annotation drawing gestures.
+    // If configured as primary, drawing intentionally takes precedence over idle-clear.
+    if (rawEvent.button === state.config.drawButton) {
+        const targetSquare = context.sceneEvent?.targetSquare;
+        if (targetSquare === undefined || targetSquare === null)
+            return;
+        state.activeDrawGesture = {
+            sourceSquare: targetSquare,
+            color: resolveAnnotationColor(state.config, rawEvent)
+        };
+        const success = state.runtimeSurface.commands.startDrag({
+            type: ANNOTATIONS_DRAW_DRAG_TYPE,
+            sourceSquare: targetSquare,
+            sourcePieceCode: null,
+            targetSquare: targetSquare
+        });
+        if (success) {
+            rawEvent.preventDefault();
+        }
+        else {
+            state.activeDrawGesture = null;
+        }
+        return;
+    }
+    // Drawing uses the configured draw button above.
+    // The remaining primary-button path is reserved for idle-clear.
+    if (rawEvent.button !== 0)
+        return;
+    const targetSquare = context.sceneEvent?.targetSquare;
+    if (targetSquare === undefined || targetSquare === null)
+        return;
+    if (context.runtimeInteractionActionPreview !== null)
+        return;
+    if (!state.config.clearOnCoreInteraction)
+        return;
+    if (!hasCommittedAnnotations(state))
+        return;
+    const success = state.runtimeSurface.commands.startDrag({
+        type: ANNOTATIONS_IDLE_CLEAR_DRAG_TYPE,
+        sourceSquare: targetSquare,
+        sourcePieceCode: null,
+        targetSquare: targetSquare
+    });
+    if (success) {
+        rawEvent.preventDefault();
+    }
+}
+export function completeAnnotationsDrag(state, session) {
+    if (session.type === ANNOTATIONS_DRAW_DRAG_TYPE) {
+        const gesture = state.activeDrawGesture;
+        state.activeDrawGesture = null;
+        state.activeDrawPreviewTarget = null;
+        if (!gesture)
+            return;
+        if (session.targetSquare === null)
+            return;
+        if (gesture.sourceSquare === session.targetSquare) {
+            commitCircleToggle(state, gesture.sourceSquare, gesture.color);
+        }
+        else {
+            commitArrowToggle(state, gesture.sourceSquare, session.targetSquare, gesture.color);
+        }
+        return;
+    }
+    if (session.type !== ANNOTATIONS_IDLE_CLEAR_DRAG_TYPE)
+        return;
+    if (session.targetSquare === null)
+        return;
+    if (!hasCommittedAnnotations(state))
+        return;
+    clearCommittedAnnotations(state);
+    markCommittedDirtyAndRequestRender(state);
+}
+export function cancelAnnotationsDrag(state, session) {
+    if (session.type === ANNOTATIONS_DRAW_DRAG_TYPE) {
+        state.activeDrawGesture = null;
+        state.activeDrawPreviewTarget = null;
+    }
+}
+function commitCircleToggle(state, square, color) {
+    const existing = state.annotations.circles.get(square);
+    if (existing && existing.color === color) {
+        state.annotations.circles.delete(square);
+    }
+    else {
+        state.annotations.circles.set(square, { key: square, square, color });
+    }
+    markCommittedDirtyAndRequestRender(state);
+}
+function commitArrowToggle(state, from, to, color) {
+    const key = arrowAnnotationKeyNormalized(from, to);
+    const existing = state.annotations.arrows.get(key);
+    if (existing && existing.color === color) {
+        state.annotations.arrows.delete(key);
+    }
+    else {
+        state.annotations.arrows.set(key, { key, from, to, color });
+    }
+    markCommittedDirtyAndRequestRender(state);
+}

package/dist/extensions/first-party/annotations/invalidation.d.ts

@@ -0,0 +1,3 @@
+import type { AnnotationsStateInternal } from './types/main.js';
+export declare function markDirtyAndRequestRender(state: AnnotationsStateInternal, layers: number): void;
+export declare function markCommittedDirtyAndRequestRender(state: AnnotationsStateInternal): void;

package/dist/extensions/first-party/annotations/invalidation.js

@@ -0,0 +1,7 @@
+export function markDirtyAndRequestRender(state, layers) {
+    state.runtimeSurface.invalidation.markDirty(layers);
+    state.runtimeSurface.commands.requestRender({ state: true });
+}
+export function markCommittedDirtyAndRequestRender(state) {
+    markDirtyAndRequestRender(state, 1 /* DirtyLayer.COMMITTED */);
+}

package/dist/extensions/first-party/annotations/normalize.d.ts

@@ -0,0 +1,12 @@
+import type { SquareString } from '../../../state/board/types/input.js';
+import type { Square } from '../../../state/board/types/internal.js';
+import type { AnnotationsConfig, ArrowAnnotation, ArrowAnnotationKey, CircleAnnotation, CircleAnnotationKey } from './types/internal.js';
+import type { AnnotationsStateInternalAnnotations } from './types/main.js';
+import type { AnnotationsInitOptionsAnnotations, AnnotationsInitOptionsConfig, ArrowAnnotationPublic, CircleAnnotationPublic } from './types/public.js';
+export declare function normalizeAnnotationsConfig(input?: AnnotationsInitOptionsConfig): AnnotationsConfig;
+export declare function circleAnnotationKey(square: SquareString): CircleAnnotationKey;
+export declare function normalizeCircleAnnotation(pub: CircleAnnotationPublic): CircleAnnotation;
+export declare function arrowAnnotationKeyNormalized(from: Square, to: Square): ArrowAnnotationKey;
+export declare function arrowAnnotationKey(from: SquareString, to: SquareString): ArrowAnnotationKey;
+export declare function normalizeArrowAnnotation(pub: ArrowAnnotationPublic): ArrowAnnotation;
+export declare function normalizeInitialAnnotations(input?: AnnotationsInitOptionsAnnotations): AnnotationsStateInternalAnnotations;

package/dist/extensions/first-party/annotations/normalize.js

@@ -0,0 +1,54 @@
+import { cloneDeep, toMerged } from 'es-toolkit';
+import { normalizeSquare } from '../../../state/board/normalize.js';
+import { DEFAULT_CONFIG } from './constants.js';
+export function normalizeAnnotationsConfig(input) {
+    if (!input) {
+        return cloneDeep(DEFAULT_CONFIG);
+    }
+    return toMerged(DEFAULT_CONFIG, input);
+}
+export function circleAnnotationKey(square) {
+    return normalizeSquare(square);
+}
+export function normalizeCircleAnnotation(pub) {
+    const square = normalizeSquare(pub.square);
+    return {
+        key: square,
+        square,
+        color: pub.color
+    };
+}
+export function arrowAnnotationKeyNormalized(from, to) {
+    if (from === to) {
+        throw new Error("Invalid arrow: 'from' and 'to' must be different squares");
+    }
+    return from * 64 + to;
+}
+export function arrowAnnotationKey(from, to) {
+    const fromKey = normalizeSquare(from);
+    const toKey = normalizeSquare(to);
+    return arrowAnnotationKeyNormalized(fromKey, toKey);
+}
+export function normalizeArrowAnnotation(pub) {
+    const from = normalizeSquare(pub.from);
+    const to = normalizeSquare(pub.to);
+    const key = arrowAnnotationKeyNormalized(from, to);
+    return { key, from, to, color: pub.color };
+}
+export function normalizeInitialAnnotations(input) {
+    const circles = new Map();
+    const arrows = new Map();
+    if (input?.circles) {
+        for (const pub of input.circles) {
+            const circle = normalizeCircleAnnotation(pub);
+            circles.set(circle.key, circle);
+        }
+    }
+    if (input?.arrows) {
+        for (const pub of input.arrows) {
+            const arrow = normalizeArrowAnnotation(pub);
+            arrows.set(arrow.key, arrow);
+        }
+    }
+    return { circles, arrows };
+}

package/dist/extensions/first-party/annotations/render/committed.d.ts

@@ -0,0 +1,3 @@
+import type { SceneRenderGeometry } from '../../../../layout/geometry/types.js';
+import type { AnnotationsStateInternal } from '../types/main.js';
+export declare function renderCommittedAnnotations(state: AnnotationsStateInternal, geometry: SceneRenderGeometry): void;

package/dist/extensions/first-party/annotations/render/committed.js

@@ -0,0 +1,123 @@
+import assert from '@ktarmyshov/assert';
+import { VISUAL_CONFIG } from '../constants.js';
+import { arrowAnnotationKeyNormalized } from '../normalize.js';
+import { createAnnotationArrowSvg, removeAnnotationArrowSvg, updateAnnotationArrowSvg } from './helpers/arrows.js';
+import { createAnnotationCircleSvg, removeAnnotationCircleSvg, updateAnnotationCircleSvg } from './helpers/circles.js';
+export function renderCommittedAnnotations(state, geometry) {
+    assert(state.slotRoots, 'Expected slotRoots to be initialized before rendering annotations');
+    renderCommittedCircles(state, geometry);
+    renderCommittedArrows(state, geometry);
+}
+function getSuppressedCircleKey(state) {
+    const gesture = state.activeDrawGesture;
+    const target = state.activeDrawPreviewTarget;
+    if (gesture === null || target === null)
+        return null;
+    if (target !== gesture.sourceSquare)
+        return null;
+    const existing = state.annotations.circles.get(target);
+    if (existing === undefined || existing.color !== gesture.color)
+        return null;
+    return target;
+}
+function getSuppressedArrowKey(state) {
+    const gesture = state.activeDrawGesture;
+    const target = state.activeDrawPreviewTarget;
+    if (gesture === null || target === null)
+        return null;
+    if (target === gesture.sourceSquare)
+        return null;
+    const key = arrowAnnotationKeyNormalized(gesture.sourceSquare, target);
+    const existing = state.annotations.arrows.get(key);
+    if (existing === undefined || existing.color !== gesture.color)
+        return null;
+    return key;
+}
+function renderCommittedCircles(state, geometry) {
+    const { committed } = VISUAL_CONFIG.circle;
+    const suppressedKey = getSuppressedCircleKey(state);
+    const seenKeys = new Set();
+    for (const [key, circle] of state.annotations.circles) {
+        if (key === suppressedKey)
+            continue;
+        seenKeys.add(key);
+        const params = {
+            parent: state.slotRoots.overPieces,
+            dataId: `annotation-circle-committed-${key}`,
+            square: circle.square,
+            color: circle.color,
+            radius: committed.radius,
+            strokeWidth: committed.strokeWidth,
+            opacity: committed.opacity,
+            geometry
+        };
+        const existing = state.svg.svgCircles.get(key);
+        if (existing) {
+            updateAnnotationCircleSvg(existing, params);
+        }
+        else {
+            const rendered = createAnnotationCircleSvg(params);
+            state.svg.svgCircles.set(key, rendered);
+        }
+    }
+    for (const [key, rendered] of state.svg.svgCircles) {
+        if (!seenKeys.has(key)) {
+            removeAnnotationCircleSvg(rendered);
+            state.svg.svgCircles.delete(key);
+        }
+    }
+}
+function renderCommittedArrows(state, geometry) {
+    const { committed } = VISUAL_CONFIG.arrow;
+    const suppressedKey = getSuppressedArrowKey(state);
+    const seenKeys = new Set();
+    for (const [key, arrow] of state.annotations.arrows) {
+        if (key === suppressedKey)
+            continue;
+        seenKeys.add(key);
+        const fromRect = geometry.getSquareRect(arrow.from);
+        const toRect = geometry.getSquareRect(arrow.to);
+        const fromCx = fromRect.x + fromRect.width / 2;
+        const fromCy = fromRect.y + fromRect.height / 2;
+        const toCx = toRect.x + toRect.width / 2;
+        const toCy = toRect.y + toRect.height / 2;
+        const dx = toCx - fromCx;
+        const dy = toCy - fromCy;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        if (dist === 0) {
+            seenKeys.delete(key);
+            continue;
+        }
+        const markerId = state.svgIds.makeId('annotations', `arrowhead-${key}`);
+        const markerHref = `url(${state.svgIds.makeHref('annotations', `arrowhead-${key}`)})`;
+        const params = {
+            defsRoot: state.slotRoots.defs,
+            visualRoot: state.slotRoots.overPieces,
+            markerDataId: `annotation-arrowhead-committed-${key}`,
+            markerPathDataId: `annotation-arrowhead-path-committed-${key}`,
+            lineDataId: `annotation-arrow-committed-${key}`,
+            markerId,
+            markerHref,
+            from: arrow.from,
+            to: arrow.to,
+            color: arrow.color,
+            opacity: committed.opacity,
+            visual: committed,
+            geometry
+        };
+        const existing = state.svg.svgArrows.get(key);
+        if (existing) {
+            updateAnnotationArrowSvg(existing, params);
+        }
+        else {
+            const rendered = createAnnotationArrowSvg(params);
+            state.svg.svgArrows.set(key, rendered);
+        }
+    }
+    for (const [key, rendered] of state.svg.svgArrows) {
+        if (!seenKeys.has(key)) {
+            removeAnnotationArrowSvg(rendered);
+            state.svg.svgArrows.delete(key);
+        }
+    }
+}

package/dist/extensions/first-party/annotations/render/helpers/arrows.d.ts

@@ -0,0 +1,33 @@
+import type { SceneRenderGeometry } from '../../../../../layout/geometry/types.js';
+import type { Square } from '../../../../../state/board/types/internal.js';
+import type { RenderedAnnotationArrowSvg } from '../../types/main.js';
+export interface AnnotationArrowSvgVisualConfig {
+    readonly strokeWidth: number;
+    readonly startOffset: number;
+    readonly endOffset: number;
+    readonly opacity: number;
+    readonly markerWidth: number;
+    readonly markerHeight: number;
+    readonly markerRefX: number;
+    readonly markerRefY: number;
+    readonly markerViewBox: string;
+    readonly markerPathD: string;
+}
+export interface AnnotationArrowSvgParams {
+    readonly defsRoot: SVGDefsElement;
+    readonly visualRoot: SVGGElement;
+    readonly markerDataId: string;
+    readonly markerPathDataId: string;
+    readonly lineDataId: string;
+    readonly markerId: string;
+    readonly markerHref: string;
+    readonly from: Square;
+    readonly to: Square;
+    readonly color: string;
+    readonly opacity: number;
+    readonly visual: AnnotationArrowSvgVisualConfig;
+    readonly geometry: SceneRenderGeometry;
+}
+export declare function createAnnotationArrowSvg(params: AnnotationArrowSvgParams): RenderedAnnotationArrowSvg;
+export declare function updateAnnotationArrowSvg(rendered: RenderedAnnotationArrowSvg, params: AnnotationArrowSvgParams): void;
+export declare function removeAnnotationArrowSvg(rendered: RenderedAnnotationArrowSvg): void;

package/dist/extensions/first-party/annotations/render/helpers/arrows.js

@@ -0,0 +1,93 @@
+import { createSvgElement, updateSvgElementAttributes } from '../../../../../render/svg/helpers.js';
+function computeArrowGeometry(params) {
+    const { from, to, visual, geometry } = params;
+    const squareSize = geometry.squareSize;
+    const fromRect = geometry.getSquareRect(from);
+    const toRect = geometry.getSquareRect(to);
+    const fromCx = fromRect.x + fromRect.width / 2;
+    const fromCy = fromRect.y + fromRect.height / 2;
+    const toCx = toRect.x + toRect.width / 2;
+    const toCy = toRect.y + toRect.height / 2;
+    const dx = toCx - fromCx;
+    const dy = toCy - fromCy;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    const ux = dx / dist;
+    const uy = dy / dist;
+    const absoluteStartOffset = squareSize * visual.startOffset;
+    const absoluteEndOffset = squareSize * visual.endOffset;
+    return {
+        x1: (fromCx + ux * absoluteStartOffset).toString(),
+        y1: (fromCy + uy * absoluteStartOffset).toString(),
+        x2: (toCx - ux * absoluteEndOffset).toString(),
+        y2: (toCy - uy * absoluteEndOffset).toString(),
+        strokeWidth: (squareSize * visual.strokeWidth).toString()
+    };
+}
+export function createAnnotationArrowSvg(params) {
+    const { defsRoot, visualRoot, markerDataId, markerPathDataId, lineDataId, markerId, markerHref, color, opacity, visual } = params;
+    const geo = computeArrowGeometry(params);
+    const marker = createSvgElement(defsRoot, 'marker', {
+        'data-chessboard-id': markerDataId,
+        id: markerId,
+        markerUnits: 'strokeWidth',
+        markerWidth: visual.markerWidth.toString(),
+        markerHeight: visual.markerHeight.toString(),
+        refX: visual.markerRefX.toString(),
+        refY: visual.markerRefY.toString(),
+        orient: 'auto',
+        overflow: 'visible',
+        viewBox: visual.markerViewBox
+    });
+    const markerPath = createSvgElement(marker, 'path', {
+        'data-chessboard-id': markerPathDataId,
+        d: visual.markerPathD,
+        fill: color
+    });
+    const line = createSvgElement(visualRoot, 'line', {
+        'data-chessboard-id': lineDataId,
+        x1: geo.x1,
+        y1: geo.y1,
+        x2: geo.x2,
+        y2: geo.y2,
+        stroke: color,
+        'stroke-width': geo.strokeWidth,
+        'stroke-linecap': 'round',
+        opacity: opacity.toString(),
+        'marker-end': markerHref
+    });
+    return { line, marker, markerPath };
+}
+export function updateAnnotationArrowSvg(rendered, params) {
+    const { markerId, markerHref, color, opacity, visual } = params;
+    const geo = computeArrowGeometry(params);
+    updateSvgElementAttributes(rendered.marker, {
+        id: markerId,
+        markerUnits: 'strokeWidth',
+        markerWidth: visual.markerWidth.toString(),
+        markerHeight: visual.markerHeight.toString(),
+        refX: visual.markerRefX.toString(),
+        refY: visual.markerRefY.toString(),
+        orient: 'auto',
+        overflow: 'visible',
+        viewBox: visual.markerViewBox
+    });
+    updateSvgElementAttributes(rendered.markerPath, {
+        d: visual.markerPathD,
+        fill: color
+    });
+    updateSvgElementAttributes(rendered.line, {
+        x1: geo.x1,
+        y1: geo.y1,
+        x2: geo.x2,
+        y2: geo.y2,
+        stroke: color,
+        'stroke-width': geo.strokeWidth,
+        'stroke-linecap': 'round',
+        opacity: opacity.toString(),
+        'marker-end': markerHref
+    });
+}
+export function removeAnnotationArrowSvg(rendered) {
+    rendered.line.remove();
+    rendered.marker.remove();
+}

package/dist/extensions/first-party/annotations/render/helpers/circles.d.ts

@@ -0,0 +1,18 @@
+import type { SceneRenderGeometry } from '../../../../../layout/geometry/types.js';
+import type { Square } from '../../../../../state/board/types/internal.js';
+import type { RenderedAnnotationCircleSvg } from '../../types/main.js';
+export interface AnnotationCircleSvgAttributeParams {
+    readonly square: Square;
+    readonly color: string;
+    readonly radius: number;
+    readonly strokeWidth: number;
+    readonly opacity: number;
+    readonly geometry: SceneRenderGeometry;
+}
+export interface AnnotationCircleSvgCreateParams extends AnnotationCircleSvgAttributeParams {
+    readonly parent: SVGGElement;
+    readonly dataId: string;
+}
+export declare function createAnnotationCircleSvg(params: AnnotationCircleSvgCreateParams): RenderedAnnotationCircleSvg;
+export declare function updateAnnotationCircleSvg(rendered: RenderedAnnotationCircleSvg, params: AnnotationCircleSvgAttributeParams): void;
+export declare function removeAnnotationCircleSvg(rendered: RenderedAnnotationCircleSvg): void;