@baron1996/klinecharts-runtime 0.1.0

package/dist/toolbar/standard-toolbar-styles.js

@@ -0,0 +1,219 @@
+export const STANDARD_TOOLBAR_STYLES = String.raw `
+.baron-kline-toolbar,
+.baron-kline-toolbar *,
+.baron-kline-toolbar-tooltip,
+.baron-kline-toolbar-tooltip * {
+	box-sizing: border-box;
+}
+
+.baron-kline-toolbar {
+	position: relative;
+	display: flex;
+	width: 100%;
+	min-width: 0;
+	color: rgba(32, 35, 42, 1);
+	background: rgba(255, 255, 255, 1);
+	border-bottom: 1px solid rgba(218, 220, 226, 1);
+	font-family: "Baron Sans", "Noto Sans SC", sans-serif;
+}
+
+.baron-kline-toolbar__viewport {
+	width: 100%;
+	min-width: 0;
+	overflow-x: auto;
+	overflow-y: hidden;
+	contain: layout paint;
+	scrollbar-width: none;
+}
+
+.baron-kline-toolbar__viewport::-webkit-scrollbar {
+	display: none;
+}
+
+.baron-kline-toolbar__content {
+	display: flex;
+	gap: 0;
+	align-items: center;
+	width: max-content;
+	min-width: 100%;
+	min-height: 50px;
+	padding: 8px;
+}
+
+.baron-kline-toolbar__group {
+	display: flex;
+	flex: 0 0 auto;
+	gap: 2px;
+	align-items: center;
+}
+
+.baron-kline-toolbar__group + .baron-kline-toolbar__group,
+.baron-kline-toolbar__text-field {
+	padding-left: 5px;
+	margin-left: 3px;
+	border-left: 1px solid rgba(217, 220, 227, 1);
+}
+
+.baron-kline-toolbar__button {
+	position: relative;
+	display: grid;
+	flex: 0 0 auto;
+	width: 34px;
+	height: 34px;
+	padding: 0;
+	place-items: center;
+	color: rgba(32, 35, 42, 1);
+	background: transparent;
+	border: 0;
+	border-radius: 8px;
+	cursor: pointer;
+	transition:
+		color 140ms ease,
+		background-color 140ms ease,
+		transform 140ms ease;
+}
+
+.baron-kline-toolbar__button:hover {
+	color: rgba(41, 98, 255, 1);
+	background: rgba(41, 98, 255, 0.1);
+	transform: translateY(-1px);
+}
+
+.baron-kline-toolbar__button:focus-visible {
+	outline: 2px solid rgba(41, 98, 255, 1);
+	outline-offset: 2px;
+}
+
+.baron-kline-toolbar__button[aria-pressed="true"] {
+	color: rgba(255, 255, 255, 1);
+	background: rgba(41, 98, 255, 1);
+}
+
+.baron-kline-toolbar__button svg {
+	width: 19px;
+	height: 19px;
+}
+
+.baron-kline-toolbar__text-field {
+	display: flex;
+	flex: 0 0 auto;
+	align-items: center;
+}
+
+.baron-kline-toolbar__text-input {
+	width: 152px;
+	height: 34px;
+	padding: 0 10px;
+	color: rgba(32, 35, 42, 1);
+	background: rgba(248, 249, 251, 1);
+	border: 1px solid rgba(217, 220, 227, 1);
+	border-radius: 7px;
+	font: inherit;
+	font-size: 12px;
+	outline: none;
+	transition:
+		background-color 140ms ease,
+		border-color 140ms ease,
+		box-shadow 140ms ease;
+}
+
+.baron-kline-toolbar__text-input::placeholder {
+	color: rgba(116, 122, 136, 1);
+}
+
+.baron-kline-toolbar__text-input:hover {
+	background: rgba(255, 255, 255, 1);
+	border-color: rgba(184, 188, 198, 1);
+}
+
+.baron-kline-toolbar__text-input:focus {
+	background: rgba(255, 255, 255, 1);
+	border-color: rgba(41, 98, 255, 1);
+	box-shadow: 0 0 0 2px rgba(41, 98, 255, 0.12);
+}
+
+.baron-kline-toolbar__visually-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+.baron-kline-toolbar-tooltip {
+	position: fixed;
+	z-index: 10000;
+	display: grid;
+	gap: 3px;
+	min-width: max-content;
+	padding: 7px 9px;
+	color: rgba(245, 247, 251, 1);
+	background: rgba(24, 27, 34, 1);
+	border: 1px solid rgba(255, 255, 255, 0.12);
+	border-radius: 6px;
+	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
+	opacity: 0;
+	pointer-events: none;
+	transform: translateY(-3px);
+	transition:
+		opacity 120ms ease,
+		transform 120ms ease;
+}
+
+.baron-kline-toolbar-tooltip[hidden] {
+	display: none;
+}
+
+.baron-kline-toolbar-tooltip--visible {
+	opacity: 1;
+	transform: translateY(0);
+}
+
+.baron-kline-toolbar-tooltip strong {
+	font-size: 11px;
+	font-weight: 650;
+	line-height: 1.2;
+}
+
+.baron-kline-toolbar-tooltip code {
+	color: rgba(158, 173, 209, 1);
+	font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
+	font-size: 8px;
+	line-height: 1.2;
+}
+
+@media (max-width: 480px) {
+	.baron-kline-toolbar::after {
+		position: absolute;
+		z-index: 2;
+		top: 0;
+		right: 0;
+		bottom: 1px;
+		width: 34px;
+		background: linear-gradient(
+			90deg,
+			rgba(255, 255, 255, 0),
+			rgba(255, 255, 255, 0.98)
+		);
+		content: "";
+		pointer-events: none;
+	}
+
+	.baron-kline-toolbar__content {
+		min-height: 48px;
+		padding: 7px;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.baron-kline-toolbar__button,
+	.baron-kline-toolbar__text-input,
+	.baron-kline-toolbar-tooltip {
+		transition: none;
+	}
+}
+`;

package/dist/toolbar/standard-toolbar.d.ts

@@ -0,0 +1,5 @@
+import type { KLineSceneRuntime } from '../runtime.js';
+import type { StandardToolbar, StandardToolbarOptions } from '../types.js';
+/** 创建不含撤销/重做的标准离线编辑工具栏。 */
+export declare function createStandardToolbar(container: HTMLElement, runtime: KLineSceneRuntime, options?: StandardToolbarOptions): StandardToolbar;
+//# sourceMappingURL=standard-toolbar.d.ts.map

package/dist/toolbar/standard-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"standard-toolbar.d.ts","sourceRoot":"","sources":["../../src/toolbar/standard-toolbar.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,KAAK,EACX,eAAe,EACf,sBAAsB,EAEtB,MAAM,aAAa,CAAC;AA2KrB,2BAA2B;AAC3B,wBAAgB,qBAAqB,CACpC,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,iBAAiB,EAC1B,OAAO,GAAE,sBAA2B,GAClC,eAAe,CAoIjB"}

package/dist/toolbar/standard-toolbar.js

@@ -0,0 +1,219 @@
+import { serializeCanonicalScene } from '@baron1996/kline-scene-schema';
+import { SUPPORTED_OVERLAYS } from '@baron1996/klinecharts-adapter';
+import { registerRuntimeTeardown } from '../lifecycle.js';
+import { createToolbarIcon } from './toolbar-icons.js';
+import { STANDARD_TOOLBAR_STYLES } from './standard-toolbar-styles.js';
+import { OVERLAY_TOOL_PRESENTATIONS, TEXT_OVERLAY_TYPES, TOOLBAR_ACTIONS, TOOLBAR_GROUPS, } from './toolbar-tools.js';
+let nextToolbarId = 1;
+function createIconButton(presentation, action) {
+    const element = document.createElement('button');
+    element.type = 'button';
+    element.className = 'baron-kline-toolbar__button';
+    element.setAttribute('aria-label', presentation.label);
+    element.append(createToolbarIcon(presentation.icon));
+    element.addEventListener('click', action);
+    return {
+        element,
+        cleanup: () => element.removeEventListener('click', action),
+    };
+}
+function createTooltip(viewport, tooltipId) {
+    const element = document.createElement('div');
+    element.id = tooltipId;
+    element.className = 'baron-kline-toolbar-tooltip';
+    element.setAttribute('role', 'tooltip');
+    element.hidden = true;
+    const name = document.createElement('strong');
+    const type = document.createElement('code');
+    element.append(name, type);
+    document.body.append(element);
+    let anchor;
+    const position = (button) => {
+        const viewportPadding = 8;
+        const tooltipGap = 8;
+        const buttonRect = button.getBoundingClientRect();
+        const viewportRect = viewport.getBoundingClientRect();
+        const tooltipRect = element.getBoundingClientRect();
+        const centeredLeft = buttonRect.left + (buttonRect.width - tooltipRect.width) / 2;
+        const minimumLeft = Math.max(viewportRect.left + viewportPadding, viewportPadding);
+        const maximumLeft = Math.min(viewportRect.right - tooltipRect.width - viewportPadding, window.innerWidth - tooltipRect.width - viewportPadding);
+        const left = Math.max(minimumLeft, Math.min(centeredLeft, maximumLeft));
+        element.style.left = `${Math.round(left)}px`;
+        element.style.top = `${Math.round(buttonRect.bottom + tooltipGap)}px`;
+    };
+    const hide = () => {
+        anchor?.removeAttribute('aria-describedby');
+        element.classList.remove('baron-kline-toolbar-tooltip--visible');
+        element.hidden = true;
+        anchor = undefined;
+    };
+    const show = (button, label, tooltipType) => {
+        anchor?.removeAttribute('aria-describedby');
+        anchor = button;
+        name.textContent = label;
+        type.textContent = tooltipType;
+        element.hidden = false;
+        button.setAttribute('aria-describedby', tooltipId);
+        position(button);
+        element.classList.add('baron-kline-toolbar-tooltip--visible');
+    };
+    const bind = (button, label, tooltipType) => {
+        const handleMouseEnter = () => show(button, label, tooltipType);
+        const handleMouseLeave = () => {
+            if (document.activeElement !== button) {
+                hide();
+            }
+        };
+        const handleFocus = () => show(button, label, tooltipType);
+        const handleBlur = () => hide();
+        button.addEventListener('mouseenter', handleMouseEnter);
+        button.addEventListener('mouseleave', handleMouseLeave);
+        button.addEventListener('focus', handleFocus);
+        button.addEventListener('blur', handleBlur);
+        return () => {
+            button.removeEventListener('mouseenter', handleMouseEnter);
+            button.removeEventListener('mouseleave', handleMouseLeave);
+            button.removeEventListener('focus', handleFocus);
+            button.removeEventListener('blur', handleBlur);
+            if (anchor === button) {
+                hide();
+            }
+        };
+    };
+    const handleViewportChange = () => hide();
+    viewport.addEventListener('scroll', handleViewportChange);
+    window.addEventListener('resize', handleViewportChange);
+    window.addEventListener('scroll', handleViewportChange, true);
+    return {
+        bind,
+        hide,
+        destroy() {
+            hide();
+            viewport.removeEventListener('scroll', handleViewportChange);
+            window.removeEventListener('resize', handleViewportChange);
+            window.removeEventListener('scroll', handleViewportChange, true);
+            element.remove();
+        },
+    };
+}
+function downloadScene(runtime, fileName) {
+    const bytes = serializeCanonicalScene(runtime.exportScene());
+    const blob = new Blob([bytes], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = fileName;
+    anchor.click();
+    URL.revokeObjectURL(url);
+}
+function setActiveOverlayButton(buttons, activeButton) {
+    for (const button of buttons) {
+        button.setAttribute('aria-pressed', String(button === activeButton));
+    }
+}
+/** 创建不含撤销/重做的标准离线编辑工具栏。 */
+export function createStandardToolbar(container, runtime, options = {}) {
+    const toolbarId = nextToolbarId++;
+    const root = document.createElement('div');
+    root.className = 'baron-kline-toolbar';
+    root.setAttribute('role', 'toolbar');
+    root.setAttribute('aria-label', 'K 线标注工具');
+    const style = document.createElement('style');
+    style.dataset.baronToolbarStyles = '';
+    style.textContent = STANDARD_TOOLBAR_STYLES;
+    const viewport = document.createElement('div');
+    viewport.className = 'baron-kline-toolbar__viewport';
+    const content = document.createElement('div');
+    content.className = 'baron-kline-toolbar__content';
+    viewport.append(content);
+    root.append(style, viewport);
+    const tooltip = createTooltip(viewport, `baron-kline-toolbar-tooltip-${toolbarId}`);
+    const cleanupCallbacks = [];
+    const overlayButtons = [];
+    const textInput = document.createElement('input');
+    textInput.type = 'text';
+    textInput.className = 'baron-kline-toolbar__text-input';
+    textInput.dataset.action = 'overlay-text';
+    textInput.setAttribute('aria-label', '标注文本');
+    textInput.placeholder = '输入标注文本';
+    for (const group of TOOLBAR_GROUPS) {
+        const groupElement = document.createElement('div');
+        groupElement.className = 'baron-kline-toolbar__group';
+        groupElement.dataset.toolbarGroup = group.id;
+        groupElement.setAttribute('role', 'group');
+        groupElement.setAttribute('aria-label', group.label);
+        if (group.id === 'action') {
+            for (const presentation of TOOLBAR_ACTIONS) {
+                const action = presentation.action === 'delete'
+                    ? () => {
+                        const id = runtime.getSelectedOverlayId();
+                        if (id === undefined) {
+                            return;
+                        }
+                        const overlay = runtime.getOverlay(id);
+                        if (overlay !== undefined && !overlay.locked) {
+                            runtime.removeOverlay(id);
+                        }
+                    }
+                    : () => {
+                        downloadScene(runtime, options.downloadFileName ?? 'kline-scene.json');
+                    };
+                const button = createIconButton(presentation, action);
+                button.element.dataset.action = presentation.action;
+                groupElement.append(button.element);
+                cleanupCallbacks.push(button.cleanup, tooltip.bind(button.element, presentation.label, presentation.action));
+            }
+        }
+        else {
+            for (const overlayType of SUPPORTED_OVERLAYS) {
+                const presentation = OVERLAY_TOOL_PRESENTATIONS[overlayType];
+                if (presentation.group !== group.id) {
+                    continue;
+                }
+                let buttonElement;
+                const action = () => {
+                    runtime.startOverlayDrawing(overlayType, TEXT_OVERLAY_TYPES.has(overlayType)
+                        ? { text: textInput.value }
+                        : {});
+                    setActiveOverlayButton(overlayButtons, buttonElement);
+                    tooltip.hide();
+                };
+                const button = createIconButton(presentation, action);
+                buttonElement = button.element;
+                buttonElement.dataset.overlayType = overlayType;
+                buttonElement.setAttribute('aria-pressed', 'false');
+                overlayButtons.push(buttonElement);
+                groupElement.append(buttonElement);
+                cleanupCallbacks.push(button.cleanup, tooltip.bind(buttonElement, presentation.label, overlayType));
+            }
+        }
+        content.append(groupElement);
+    }
+    const textField = document.createElement('label');
+    textField.className = 'baron-kline-toolbar__text-field';
+    const textLabel = document.createElement('span');
+    textLabel.className = 'baron-kline-toolbar__visually-hidden';
+    textLabel.textContent = '标注文本';
+    textField.append(textLabel, textInput);
+    content.append(textField);
+    container.append(root);
+    let destroyed = false;
+    let unregisterRuntime = () => { };
+    const toolbar = {
+        element: root,
+        destroy() {
+            if (destroyed) {
+                return;
+            }
+            destroyed = true;
+            unregisterRuntime();
+            for (const cleanup of cleanupCallbacks) {
+                cleanup();
+            }
+            tooltip.destroy();
+            root.remove();
+        },
+    };
+    unregisterRuntime = registerRuntimeTeardown(runtime, () => toolbar.destroy());
+    return toolbar;
+}