@baron1996/klinecharts-runtime 0.7.2 → 0.9.2

package/dist/runtime.js

@@ -72,6 +72,8 @@ export class KLineSceneRuntime {
     #unsubscribeCrosshair = null;
     /** 当前选中标注的稳定 ID。 */
     #selectedOverlayId = null;
+    /** 供对象级编辑器订阅 Drawing 变化，不暴露 Adapter 事件。 */
+    #drawingChangeListeners = new Set();
     /** 确定性标注 ID 递增序号。 */
     #overlaySequence = 0;
     /** 确定性指标 ID 递增序号。 */
@@ -104,6 +106,11 @@ export class KLineSceneRuntime {
                 this.#selectedOverlayId = null;
             }
             this.#events.emit(toRuntimeEvent(event));
+            if (event.type.startsWith('overlay-')) {
+                for (const listener of this.#drawingChangeListeners) {
+                    listener();
+                }
+            }
         });
         this.#unsubscribeCrosshair = adapter.subscribeCrosshair((snapshot) => {
             this.#events.emit({
@@ -281,6 +288,13 @@ export class KLineSceneRuntime {
         }
         return overlayToDrawingSnapshot(this.updateOverlay({ ...overlay, text }), this.getScene().period);
     }
+    updateDrawingLocked(id, locked) {
+        const overlay = this.getOverlay(id);
+        if (overlay === undefined) {
+            throw new SceneError('INVALID_REFERENCE', `/overlays/${id}`, `Overlay ${id} does not exist.`);
+        }
+        return overlayToDrawingSnapshot(this.updateOverlay({ ...overlay, locked }), this.getScene().period);
+    }
     removeDrawing(id) {
         return this.removeOverlay(id);
     }
@@ -296,6 +310,17 @@ export class KLineSceneRuntime {
     hitTestDrawing(point) {
         return this.#adapter.hitTestOverlay(point)?.overlayId ?? null;
     }
+    getDrawingMutationState() {
+        this.#assertActive();
+        return 'ready';
+    }
+    subscribeDrawingChanges(listener) {
+        this.#assertActive();
+        this.#drawingChangeListeners.add(listener);
+        return () => {
+            this.#drawingChangeListeners.delete(listener);
+        };
+    }
     exportArtifact(fileName = this.#defaultFileName) {
         return {
             bytes: serializeCanonicalScene(this.exportScene()),
@@ -436,6 +461,7 @@ export class KLineSceneRuntime {
         this.#adapter.dispose();
         this.#unsubscribeAdapter();
         this.#events.clear();
+        this.#drawingChangeListeners.clear();
     }
 }
 export async function createKLineSceneRuntime(container, scene, options = {}) {

package/dist/toolbar/drawing-floating-toolbar-styles.d.ts

@@ -0,0 +1,2 @@
+export declare const DRAWING_FLOATING_TOOLBAR_STYLES: string;
+//# sourceMappingURL=drawing-floating-toolbar-styles.d.ts.map

package/dist/toolbar/drawing-floating-toolbar-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawing-floating-toolbar-styles.d.ts","sourceRoot":"","sources":["../../src/toolbar/drawing-floating-toolbar-styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,+BAA+B,QAyP3C,CAAC"}

package/dist/toolbar/drawing-floating-toolbar-styles.js

@@ -0,0 +1,250 @@
+export const DRAWING_FLOATING_TOOLBAR_STYLES = String.raw `
+.baron-drawing-toolbar,
+.baron-drawing-toolbar * {
+	box-sizing: border-box;
+}
+
+.baron-drawing-toolbar {
+	position: fixed;
+	z-index: 9998;
+	display: flex;
+	align-items: center;
+	min-height: 48px;
+	padding: 5px 7px 5px 4px;
+	color: rgba(32, 35, 42, 1);
+	background: rgba(255, 255, 255, 0.98);
+	border: 1px solid rgba(218, 220, 226, 1);
+	border-radius: 12px;
+	box-shadow:
+		0 2px 5px rgba(20, 29, 48, 0.08),
+		0 10px 28px rgba(20, 29, 48, 0.13);
+	font-family: "Baron Sans", "Noto Sans SC", sans-serif;
+	font-size: 12px;
+	line-height: 1;
+	user-select: none;
+	transition:
+		opacity 120ms ease,
+		box-shadow 120ms ease;
+}
+
+.baron-drawing-toolbar[hidden] {
+	display: none;
+}
+
+.baron-drawing-toolbar[data-dragging="true"] {
+	box-shadow:
+		0 3px 8px rgba(20, 29, 48, 0.12),
+		0 16px 40px rgba(20, 29, 48, 0.18);
+}
+
+.baron-drawing-toolbar__grip {
+	display: grid;
+	flex: 0 0 auto;
+	grid-template-columns: repeat(2, 3px);
+	gap: 3px;
+	width: 24px;
+	height: 36px;
+	padding: 8px 6px;
+	place-content: center;
+	color: rgba(153, 158, 170, 1);
+	background: transparent;
+	border: 0;
+	border-radius: 7px;
+	cursor: grab;
+	touch-action: none;
+}
+
+.baron-drawing-toolbar__grip:active {
+	cursor: grabbing;
+}
+
+.baron-drawing-toolbar__grip-dot {
+	width: 3px;
+	height: 3px;
+	background: currentcolor;
+	border-radius: 50%;
+}
+
+.baron-drawing-toolbar__type,
+.baron-drawing-toolbar__button,
+.baron-drawing-toolbar__control {
+	position: relative;
+	display: grid;
+	flex: 0 0 auto;
+	height: 36px;
+	place-items: center;
+	color: rgba(32, 35, 42, 1);
+	background: transparent;
+	border: 0;
+	border-radius: 8px;
+}
+
+.baron-drawing-toolbar__type,
+.baron-drawing-toolbar__button {
+	width: 38px;
+}
+
+.baron-drawing-toolbar__type {
+	color: rgba(62, 68, 80, 1);
+}
+
+.baron-drawing-toolbar__type svg,
+.baron-drawing-toolbar__button svg {
+	width: 21px;
+	height: 21px;
+}
+
+.baron-drawing-toolbar__button {
+	cursor: pointer;
+	transition:
+		color 120ms ease,
+		background-color 120ms ease;
+}
+
+.baron-drawing-toolbar__button:hover:not(:disabled),
+.baron-drawing-toolbar__grip:hover {
+	color: rgba(41, 98, 255, 1);
+	background: rgba(41, 98, 255, 0.08);
+}
+
+.baron-drawing-toolbar__button:focus-visible,
+.baron-drawing-toolbar__grip:focus-visible,
+.baron-drawing-toolbar__control:focus-within {
+	outline: 2px solid rgba(41, 98, 255, 1);
+	outline-offset: 1px;
+}
+
+.baron-drawing-toolbar__button:disabled,
+.baron-drawing-toolbar__control:has(:disabled) {
+	cursor: not-allowed;
+	opacity: 0.42;
+}
+
+.baron-drawing-toolbar__separator {
+	flex: 0 0 auto;
+	width: 1px;
+	height: 26px;
+	margin: 0 4px;
+	background: rgba(218, 220, 226, 1);
+}
+
+.baron-drawing-toolbar__control {
+	min-width: 48px;
+	padding: 0 5px;
+}
+
+.baron-drawing-toolbar__control select {
+	height: 30px;
+	padding: 0 20px 0 7px;
+	color: inherit;
+	background: transparent;
+	border: 0;
+	font: inherit;
+	cursor: pointer;
+	outline: 0;
+}
+
+.baron-drawing-toolbar__control--style select {
+	min-width: 66px;
+}
+
+.baron-drawing-toolbar__control--width select {
+	min-width: 58px;
+	font-size: 15px;
+}
+
+.baron-drawing-toolbar__color {
+	position: relative;
+	display: grid;
+	flex: 0 0 auto;
+	width: 42px;
+	height: 36px;
+	place-items: center;
+	border-radius: 8px;
+	cursor: pointer;
+}
+
+.baron-drawing-toolbar__color:hover {
+	background: rgba(41, 98, 255, 0.08);
+}
+
+.baron-drawing-toolbar__color input {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	opacity: 0;
+	pointer-events: none;
+}
+
+.baron-drawing-toolbar__color-icon {
+	position: relative;
+	display: block;
+	width: 22px;
+	height: 22px;
+}
+
+.baron-drawing-toolbar__color-icon::before {
+	position: absolute;
+	top: 2px;
+	left: 7px;
+	width: 8px;
+	height: 14px;
+	content: "";
+	border: 2px solid currentcolor;
+	border-radius: 2px 2px 5px 2px;
+	transform: rotate(42deg);
+}
+
+.baron-drawing-toolbar__color-icon::after {
+	position: absolute;
+	right: 1px;
+	bottom: 0;
+	left: 1px;
+	height: 4px;
+	content: "";
+	background: var(--baron-drawing-line-color, rgba(41, 98, 255, 1));
+	border-radius: 2px;
+}
+
+.baron-drawing-toolbar__text {
+	width: 128px;
+	height: 30px;
+	padding: 0 9px;
+	color: rgba(32, 35, 42, 1);
+	background: rgba(248, 249, 251, 1);
+	border: 1px solid rgba(218, 220, 226, 1);
+	border-radius: 7px;
+	font: inherit;
+	outline: 0;
+}
+
+.baron-drawing-toolbar__text:focus {
+	border-color: rgba(41, 98, 255, 1);
+}
+
+.baron-drawing-toolbar__status {
+	position: absolute;
+	top: calc(100% + 6px);
+	left: 8px;
+	max-width: 320px;
+	padding: 6px 8px;
+	color: rgba(179, 44, 38, 1);
+	background: rgba(255, 247, 246, 0.98);
+	border: 1px solid rgba(226, 181, 177, 1);
+	border-radius: 6px;
+	font-size: 11px;
+	line-height: 1.35;
+	box-shadow: 0 6px 18px rgba(20, 29, 48, 0.1);
+}
+
+.baron-drawing-toolbar__status[hidden] {
+	display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.baron-drawing-toolbar,
+	.baron-drawing-toolbar__button {
+		transition: none;
+	}
+}
+`;

package/dist/toolbar/drawing-floating-toolbar.d.ts

@@ -0,0 +1,8 @@
+import type { DrawingRuntimeCapability } from '../drawing/capabilities.js';
+import type { DrawingFloatingToolbar, DrawingFloatingToolbarOptions } from '../types.js';
+/**
+ * 创建选中 Drawing 的对象级浮动工具栏。工具栏使用 body portal，避免修改图表引擎 DOM；
+ * 拖动位置只保存在当前实例内，刷新后回到图表顶部中央。
+ */
+export declare function createDrawingFloatingToolbar(target: HTMLElement, runtime: DrawingRuntimeCapability, options?: DrawingFloatingToolbarOptions): DrawingFloatingToolbar;
+//# sourceMappingURL=drawing-floating-toolbar.d.ts.map

package/dist/toolbar/drawing-floating-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawing-floating-toolbar.d.ts","sourceRoot":"","sources":["../../src/toolbar/drawing-floating-toolbar.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAC3E,OAAO,KAAK,EACX,sBAAsB,EACtB,6BAA6B,EAC7B,MAAM,aAAa,CAAC;AAgFrB;;;GAGG;AACH,wBAAgB,4BAA4B,CAC3C,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,wBAAwB,EACjC,OAAO,GAAE,6BAAkC,GACzC,sBAAsB,CA6WxB"}

package/dist/toolbar/drawing-floating-toolbar.js

@@ -0,0 +1,373 @@
+import { registerRuntimeTeardown } from '../lifecycle.js';
+import { createToolbarIcon } from './toolbar-icons.js';
+import { OVERLAY_TOOL_PRESENTATIONS } from './toolbar-tools.js';
+import { DRAWING_FLOATING_TOOLBAR_STYLES } from './drawing-floating-toolbar-styles.js';
+const VIEWPORT_PADDING = 8;
+const TARGET_PADDING = 10;
+const TARGET_TOP_GAP = 12;
+const TEXT_DRAWING_TYPES = new Set(['simpleAnnotation', 'simpleTag', 'callout', 'text']);
+function htmlHexColorToSceneRgba(value) {
+    const match = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(value);
+    if (match === null) {
+        throw new TypeError(`Invalid HTML color value: ${value}`);
+    }
+    return `rgba(${Number.parseInt(match[1], 16)}, ${Number.parseInt(match[2], 16)}, ${Number.parseInt(match[3], 16)}, 1)`;
+}
+function sceneColorToHtmlHex(value) {
+    const hex = /^#([0-9a-f]{6})$/i.exec(value.trim());
+    if (hex !== null) {
+        return `#${hex[1].toLowerCase()}`;
+    }
+    const rgba = /^rgba?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)/i.exec(value);
+    if (rgba === null) {
+        return '#2962ff';
+    }
+    return `#${[rgba[1], rgba[2], rgba[3]]
+        .map((component) => Math.max(0, Math.min(255, Math.round(Number(component)))).toString(16).padStart(2, '0'))
+        .join('')}`;
+}
+function createSeparator() {
+    const separator = document.createElement('span');
+    separator.className = 'baron-drawing-toolbar__separator';
+    separator.setAttribute('aria-hidden', 'true');
+    return separator;
+}
+function createSelect(className, action, label, values) {
+    const root = document.createElement('label');
+    root.className = `baron-drawing-toolbar__control ${className}`;
+    const select = document.createElement('select');
+    select.dataset.action = action;
+    select.setAttribute('aria-label', label);
+    for (const item of values) {
+        const option = document.createElement('option');
+        option.value = item.value;
+        option.textContent = item.label;
+        select.append(option);
+    }
+    root.append(select);
+    return { label: root, select };
+}
+function createButton(action, label, icon) {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'baron-drawing-toolbar__button';
+    button.dataset.action = action;
+    button.setAttribute('aria-label', label);
+    button.title = label;
+    button.append(createToolbarIcon(icon));
+    return button;
+}
+function selectedDrawing(runtime) {
+    const id = runtime.getSelectedDrawingId();
+    return id === undefined ? undefined : runtime.getDrawing(id);
+}
+/**
+ * 创建选中 Drawing 的对象级浮动工具栏。工具栏使用 body portal，避免修改图表引擎 DOM；
+ * 拖动位置只保存在当前实例内，刷新后回到图表顶部中央。
+ */
+export function createDrawingFloatingToolbar(target, runtime, options = {}) {
+    const style = document.createElement('style');
+    style.dataset.baronDrawingToolbarStyles = '';
+    style.textContent = DRAWING_FLOATING_TOOLBAR_STYLES;
+    const root = document.createElement('div');
+    root.className = 'baron-drawing-toolbar';
+    root.setAttribute('role', 'toolbar');
+    root.setAttribute('aria-label', '选中 Drawing 设置');
+    root.hidden = true;
+    const grip = document.createElement('button');
+    grip.type = 'button';
+    grip.className = 'baron-drawing-toolbar__grip';
+    grip.dataset.action = 'drag';
+    grip.setAttribute('aria-label', '拖动 Drawing 工具栏');
+    grip.title = '拖动工具栏';
+    for (let index = 0; index < 6; index++) {
+        const dot = document.createElement('span');
+        dot.className = 'baron-drawing-toolbar__grip-dot';
+        grip.append(dot);
+    }
+    grip.hidden = options.draggable === false;
+    const type = document.createElement('span');
+    type.className = 'baron-drawing-toolbar__type';
+    type.dataset.action = 'drawing-type';
+    const color = document.createElement('label');
+    color.className = 'baron-drawing-toolbar__color';
+    color.setAttribute('aria-label', '线色');
+    color.title = '线色';
+    const colorIcon = document.createElement('span');
+    colorIcon.className = 'baron-drawing-toolbar__color-icon';
+    const colorInput = document.createElement('input');
+    colorInput.type = 'color';
+    colorInput.dataset.action = 'line-color';
+    colorInput.setAttribute('aria-label', '线色');
+    color.append(colorIcon, colorInput);
+    const lineStyle = createSelect('baron-drawing-toolbar__control--style', 'line-style', '线型', [
+        { value: 'solid', label: '实线' },
+        { value: 'dashed', label: '虚线' },
+        { value: 'dotted', label: '点线' },
+    ]);
+    const lineWidth = createSelect('baron-drawing-toolbar__control--width', 'line-width', '线宽', [0.5, 1, 1.5, 2, 3, 4, 6, 8, 10].map((value) => ({
+        value: String(value),
+        label: `${value}px`,
+    })));
+    const textInput = document.createElement('input');
+    textInput.type = 'text';
+    textInput.className = 'baron-drawing-toolbar__text';
+    textInput.dataset.action = 'drawing-text';
+    textInput.setAttribute('aria-label', 'Drawing 文本');
+    textInput.placeholder = '输入文本';
+    textInput.hidden = true;
+    const lock = createButton('toggle-lock', '锁定 Drawing', 'lock');
+    const remove = createButton('delete', '删除 Drawing', 'trash');
+    const status = document.createElement('span');
+    status.className = 'baron-drawing-toolbar__status';
+    status.setAttribute('role', 'status');
+    status.setAttribute('aria-live', 'polite');
+    status.hidden = true;
+    root.append(grip, type, createSeparator(), color, lineStyle.label, lineWidth.label, textInput, createSeparator(), lock, remove, status);
+    document.head.append(style);
+    document.body.append(root);
+    let destroyed = false;
+    let userPositioned = false;
+    let dragging = null;
+    let currentId;
+    const setStatus = (message) => {
+        status.textContent = message;
+        status.hidden = message.length === 0;
+    };
+    const bounds = () => {
+        const targetRect = target.getBoundingClientRect();
+        const width = root.offsetWidth;
+        const height = root.offsetHeight;
+        const viewportMinLeft = VIEWPORT_PADDING;
+        const viewportMaxLeft = Math.max(viewportMinLeft, window.innerWidth - width - VIEWPORT_PADDING);
+        const targetMinLeft = targetRect.left + TARGET_PADDING;
+        const targetMaxLeft = targetRect.right - width - TARGET_PADDING;
+        const minLeft = Math.max(viewportMinLeft, Math.min(targetMinLeft, viewportMaxLeft));
+        const maxLeft = Math.max(minLeft, Math.min(viewportMaxLeft, targetMaxLeft));
+        const viewportMinTop = VIEWPORT_PADDING;
+        const viewportMaxTop = Math.max(viewportMinTop, window.innerHeight - height - VIEWPORT_PADDING);
+        const targetMinTop = targetRect.top + TARGET_PADDING;
+        const targetMaxTop = targetRect.bottom - height - TARGET_PADDING;
+        const minTop = Math.max(viewportMinTop, Math.min(targetMinTop, viewportMaxTop));
+        const maxTop = Math.max(minTop, Math.min(viewportMaxTop, targetMaxTop));
+        return { minLeft, maxLeft, minTop, maxTop };
+    };
+    const setPosition = (left, top) => {
+        const value = bounds();
+        root.style.left = `${Math.round(Math.max(value.minLeft, Math.min(value.maxLeft, left)))}px`;
+        root.style.top = `${Math.round(Math.max(value.minTop, Math.min(value.maxTop, top)))}px`;
+    };
+    const positionAtDefault = () => {
+        if (root.hidden) {
+            return;
+        }
+        const targetRect = target.getBoundingClientRect();
+        setPosition(targetRect.left + (targetRect.width - root.offsetWidth) / 2, targetRect.top + TARGET_TOP_GAP);
+    };
+    const clampCurrentPosition = () => {
+        if (root.hidden) {
+            return;
+        }
+        if (!userPositioned) {
+            positionAtDefault();
+            return;
+        }
+        const left = Number.parseFloat(root.style.left);
+        const top = Number.parseFloat(root.style.top);
+        setPosition(Number.isFinite(left) ? left : 0, Number.isFinite(top) ? top : 0);
+    };
+    const updateStyles = (drawing, change) => {
+        runtime.updateDrawingStyles(drawing.id, {
+            ...structuredClone(drawing.styles),
+            line: {
+                ...structuredClone(drawing.styles.line),
+                ...change,
+            },
+        });
+    };
+    const performMutation = (action) => {
+        const drawing = selectedDrawing(runtime);
+        if (drawing === undefined || runtime.getDrawingMutationState() !== 'ready') {
+            return;
+        }
+        try {
+            setStatus('');
+            action(drawing);
+        }
+        catch (error) {
+            setStatus(error instanceof Error ? error.message : String(error));
+        }
+    };
+    const render = () => {
+        if (destroyed) {
+            return;
+        }
+        const drawing = selectedDrawing(runtime);
+        if (drawing === undefined) {
+            currentId = undefined;
+            root.hidden = true;
+            setStatus('');
+            return;
+        }
+        const wasHidden = root.hidden;
+        root.hidden = false;
+        root.dataset.drawingId = drawing.id;
+        root.dataset.drawingType = drawing.type;
+        if (currentId !== drawing.id) {
+            currentId = drawing.id;
+            setStatus('');
+        }
+        type.replaceChildren();
+        const presentation = OVERLAY_TOOL_PRESENTATIONS[drawing.type];
+        type.append(createToolbarIcon(presentation.icon));
+        type.title = presentation.label;
+        type.setAttribute('aria-label', presentation.label);
+        const colorValue = sceneColorToHtmlHex(drawing.styles.line.color);
+        colorInput.value = colorValue;
+        colorIcon.style.setProperty('--baron-drawing-line-color', drawing.styles.line.color);
+        lineStyle.select.value = drawing.styles.line.style;
+        const widthValue = String(drawing.styles.line.size);
+        if (!Array.from(lineWidth.select.options).some((option) => option.value === widthValue)) {
+            const option = document.createElement('option');
+            option.value = widthValue;
+            option.textContent = `${widthValue}px`;
+            lineWidth.select.append(option);
+        }
+        lineWidth.select.value = widthValue;
+        const isText = TEXT_DRAWING_TYPES.has(drawing.type);
+        textInput.hidden = !isText;
+        textInput.value = isText ? drawing.text ?? '' : '';
+        lock.replaceChildren(createToolbarIcon(drawing.locked ? 'lock' : 'lockOpen'));
+        lock.setAttribute('aria-label', drawing.locked ? '解锁 Drawing' : '锁定 Drawing');
+        lock.title = drawing.locked ? '解锁' : '锁定';
+        lock.setAttribute('aria-pressed', String(drawing.locked));
+        const busy = runtime.getDrawingMutationState() !== 'ready';
+        colorInput.disabled = busy || drawing.locked;
+        lineStyle.select.disabled = busy || drawing.locked;
+        lineWidth.select.disabled = busy || drawing.locked;
+        textInput.disabled = busy || drawing.locked;
+        lock.disabled = busy;
+        remove.disabled = busy || drawing.locked;
+        root.setAttribute('aria-busy', String(busy));
+        if (wasHidden || !userPositioned) {
+            positionAtDefault();
+        }
+        else {
+            clampCurrentPosition();
+        }
+    };
+    const handleColorChange = () => performMutation((drawing) => {
+        updateStyles(drawing, { color: htmlHexColorToSceneRgba(colorInput.value) });
+    });
+    const handleLineStyleChange = () => performMutation((drawing) => {
+        updateStyles(drawing, {
+            style: lineStyle.select.value,
+        });
+    });
+    const handleLineWidthChange = () => performMutation((drawing) => {
+        updateStyles(drawing, { size: Number(lineWidth.select.value) });
+    });
+    const handleTextChange = () => performMutation((drawing) => {
+        runtime.updateDrawingText(drawing.id, textInput.value);
+    });
+    const handleLock = () => performMutation((drawing) => {
+        runtime.updateDrawingLocked(drawing.id, !drawing.locked);
+    });
+    const handleDelete = () => performMutation((drawing) => {
+        if (drawing.locked) {
+            return;
+        }
+        if ((options.deleteBehavior ?? 'direct') === 'request') {
+            runtime.requestDrawingDelete(drawing.id);
+        }
+        else {
+            runtime.removeDrawing(drawing.id);
+        }
+    });
+    const handleDragStart = (event) => {
+        if (options.draggable === false || event.button !== 0) {
+            return;
+        }
+        const rect = root.getBoundingClientRect();
+        dragging = {
+            pointerId: event.pointerId,
+            offsetX: event.clientX - rect.left,
+            offsetY: event.clientY - rect.top,
+        };
+        userPositioned = true;
+        root.dataset.dragging = 'true';
+        grip.setPointerCapture(event.pointerId);
+        event.preventDefault();
+    };
+    const handleDragMove = (event) => {
+        if (dragging === null || dragging.pointerId !== event.pointerId) {
+            return;
+        }
+        setPosition(event.clientX - dragging.offsetX, event.clientY - dragging.offsetY);
+    };
+    const finishDrag = (event) => {
+        if (dragging === null || dragging.pointerId !== event.pointerId) {
+            return;
+        }
+        if (grip.hasPointerCapture(event.pointerId)) {
+            grip.releasePointerCapture(event.pointerId);
+        }
+        dragging = null;
+        root.dataset.dragging = 'false';
+    };
+    colorInput.addEventListener('change', handleColorChange);
+    lineStyle.select.addEventListener('change', handleLineStyleChange);
+    lineWidth.select.addEventListener('change', handleLineWidthChange);
+    textInput.addEventListener('change', handleTextChange);
+    lock.addEventListener('click', handleLock);
+    remove.addEventListener('click', handleDelete);
+    grip.addEventListener('pointerdown', handleDragStart);
+    grip.addEventListener('pointermove', handleDragMove);
+    grip.addEventListener('pointerup', finishDrag);
+    grip.addEventListener('pointercancel', finishDrag);
+    const unsubscribe = runtime.subscribeDrawingChanges(render);
+    const handleViewportChange = () => clampCurrentPosition();
+    window.addEventListener('resize', handleViewportChange);
+    window.addEventListener('scroll', handleViewportChange, true);
+    const resizeObserver = typeof ResizeObserver === 'undefined'
+        ? null
+        : new ResizeObserver(handleViewportChange);
+    resizeObserver?.observe(target);
+    render();
+    let unregisterRuntime = () => { };
+    const toolbar = {
+        element: root,
+        resetPosition() {
+            if (destroyed) {
+                throw new Error('DRAWING_FLOATING_TOOLBAR_DESTROYED');
+            }
+            userPositioned = false;
+            positionAtDefault();
+        },
+        destroy() {
+            if (destroyed) {
+                return;
+            }
+            destroyed = true;
+            unregisterRuntime();
+            unsubscribe();
+            resizeObserver?.disconnect();
+            window.removeEventListener('resize', handleViewportChange);
+            window.removeEventListener('scroll', handleViewportChange, true);
+            colorInput.removeEventListener('change', handleColorChange);
+            lineStyle.select.removeEventListener('change', handleLineStyleChange);
+            lineWidth.select.removeEventListener('change', handleLineWidthChange);
+            textInput.removeEventListener('change', handleTextChange);
+            lock.removeEventListener('click', handleLock);
+            remove.removeEventListener('click', handleDelete);
+            grip.removeEventListener('pointerdown', handleDragStart);
+            grip.removeEventListener('pointermove', handleDragMove);
+            grip.removeEventListener('pointerup', finishDrag);
+            grip.removeEventListener('pointercancel', finishDrag);
+            root.remove();
+            style.remove();
+        },
+    };
+    unregisterRuntime = registerRuntimeTeardown(runtime, () => toolbar.destroy());
+    return toolbar;
+}