@baron1996/klinecharts-runtime 0.9.14 → 0.9.16

package/README.md

@@ -4,7 +4,7 @@ Browser editing runtime and standard annotation toolbar for deterministic KLineC
 ChartScene files.
 
 ```bash
-npm install --save-exact @baron1996/kline-scene-schema@0.9.14 @baron1996/klinecharts-runtime@0.9.14
+npm install --save-exact @baron1996/kline-scene-schema@0.9.16 @baron1996/klinecharts-runtime@0.9.16
 ```
 
 ```ts

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 /** Web Runtime npm 包版本；ChartScene runtimeVersion 是独立的数据契约版本。 */
-export declare const WEB_RUNTIME_PACKAGE_VERSION: "0.9.14";
+export declare const WEB_RUNTIME_PACKAGE_VERSION: "0.9.16";
 export { SUPPORTED_OVERLAYS } from '@baron1996/klinecharts-adapter';
 export * from './cross-period/coordinator.js';
 export * from './drawing/capabilities.js';

package/dist/index.js

@@ -1,5 +1,5 @@
 /** Web Runtime npm 包版本；ChartScene runtimeVersion 是独立的数据契约版本。 */
-export const WEB_RUNTIME_PACKAGE_VERSION = '0.9.14';
+export const WEB_RUNTIME_PACKAGE_VERSION = '0.9.16';
 export { SUPPORTED_OVERLAYS } from '@baron1996/klinecharts-adapter';
 export * from './cross-period/coordinator.js';
 export * from './drawing/capabilities.js';

package/dist/toolbar/chart-workspace-toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-workspace-toolbar.d.ts","sourceRoot":"","sources":["../../src/toolbar/chart-workspace-toolbar.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACX,gCAAgC,EAChC,wBAAwB,EACxB,8BAA8B,EAC9B,0BAA0B,EAC1B,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAC;AAYxF,KAAK,qBAAqB,GAAG,wBAAwB,GACpD,0BAA0B,GAC1B,8BAA8B,GAC9B,gCAAgC,CAAC;AAElC,MAAM,WAAW,8BAA8B;IAC9C,6CAA6C;IAC7C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,4BAA4B;IAC5C,uDAAuD;IACvD,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAC;IACzD,8BAA8B;IAC9B,QAAQ,CAAC,mBAAmB,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAC;IAC/D,QAAQ,CAAC,sBAAsB,CAAC,EAAE,SAAS,8BAA8B,EAAE,CAAC;IAC5E,QAAQ,CAAC,0BAA0B,CAAC,EAAE,MAAM,CAAC;IAC7C,QAAQ,CAAC,uBAAuB,CAAC,EAAE,CAClC,MAAM,EAAE,8BAA8B,KAClC,IAAI,CAAC;IACV,QAAQ,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IACxC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAClD;AAED,MAAM,WAAW,+BAA+B;IAC/C,QAAQ,CAAC,GAAG,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,qBAAqB;IACrC,QAAQ,CAAC,UAAU,EAAE,WAAW,CAAC;IACjC,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC;IAClC,sBAAsB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAChD,yBAAyB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IACnD,kBAAkB,CACjB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE;QACN,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;QAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;QAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;QAC3B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KACtC,GACC,IAAI,CAAC;IACR,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9C,OAAO,IAAI,IAAI,CAAC;CAChB;AAsPD;;;GAGG;AACH,wBAAgB,2BAA2B,CAC1C,UAAU,EAAE,+BAA+B,EAC3C,OAAO,EAAE,qBAAqB,EAC9B,OAAO,GAAE,4BAAiC,GACxC,qBAAqB,CAuiBvB"}
+{"version":3,"file":"chart-workspace-toolbar.d.ts","sourceRoot":"","sources":["../../src/toolbar/chart-workspace-toolbar.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACX,gCAAgC,EAChC,wBAAwB,EACxB,8BAA8B,EAC9B,0BAA0B,EAC1B,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAC;AAaxF,KAAK,qBAAqB,GAAG,wBAAwB,GACpD,0BAA0B,GAC1B,8BAA8B,GAC9B,gCAAgC,CAAC;AAElC,MAAM,WAAW,8BAA8B;IAC9C,6CAA6C;IAC7C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,4BAA4B;IAC5C,uDAAuD;IACvD,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAC;IACzD,8BAA8B;IAC9B,QAAQ,CAAC,mBAAmB,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAC;IAC/D,QAAQ,CAAC,sBAAsB,CAAC,EAAE,SAAS,8BAA8B,EAAE,CAAC;IAC5E,QAAQ,CAAC,0BAA0B,CAAC,EAAE,MAAM,CAAC;IAC7C,QAAQ,CAAC,uBAAuB,CAAC,EAAE,CAClC,MAAM,EAAE,8BAA8B,KAClC,IAAI,CAAC;IACV,QAAQ,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;IACxC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;CAClD;AAED,MAAM,WAAW,+BAA+B;IAC/C,QAAQ,CAAC,GAAG,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,qBAAqB;IACrC,QAAQ,CAAC,UAAU,EAAE,WAAW,CAAC;IACjC,QAAQ,CAAC,WAAW,EAAE,WAAW,CAAC;IAClC,sBAAsB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IAChD,yBAAyB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAC;IACnD,kBAAkB,CACjB,QAAQ,EAAE,MAAM,EAChB,KAAK,EAAE;QACN,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;QAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;QAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;QAC3B,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KACtC,GACC,IAAI,CAAC;IACR,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9C,OAAO,IAAI,IAAI,CAAC;CAChB;AAiTD;;;GAGG;AACH,wBAAgB,2BAA2B,CAC1C,UAAU,EAAE,+BAA+B,EAC3C,OAAO,EAAE,qBAAqB,EAC9B,OAAO,GAAE,4BAAiC,GACxC,qBAAqB,CA0jBvB"}

package/dist/toolbar/chart-workspace-toolbar.js

@@ -5,6 +5,12 @@ import { CHART_WORKSPACE_TOOLBAR_STYLES } from './chart-workspace-toolbar-styles
 import { createToolbarIcon } from './toolbar-icons.js';
 import { OVERLAY_TOOL_PRESENTATIONS, TEXT_OVERLAY_TYPES, TOOLBAR_GROUPS, } from './toolbar-tools.js';
 let nextWorkspaceToolbarId = 1;
+function resolvePortalHost(anchor) {
+    const fullscreenElement = document.fullscreenElement;
+    return fullscreenElement !== null && fullscreenElement.contains(anchor)
+        ? fullscreenElement
+        : document.body;
+}
 function runtimeStateCapability(runtime) {
     const candidate = runtime;
     return typeof candidate.getRuntimeState === 'function' &&
@@ -12,6 +18,12 @@ function runtimeStateCapability(runtime) {
         ? candidate
         : undefined;
 }
+function workspaceEventCapability(runtime) {
+    const candidate = runtime;
+    return typeof candidate.subscribe === 'function'
+        ? candidate
+        : undefined;
+}
 function createButton(options) {
     const button = document.createElement('button');
     button.type = 'button';
@@ -39,7 +51,7 @@ function createPopover(button, id, cleanupCallbacks) {
     element.hidden = true;
     button.setAttribute('aria-controls', id);
     button.setAttribute('aria-expanded', 'false');
-    document.body.append(element);
+    resolvePortalHost(button).append(element);
     const position = () => {
         const anchor = button.getBoundingClientRect();
         const bounds = element.getBoundingClientRect();
@@ -53,6 +65,10 @@ function createPopover(button, id, cleanupCallbacks) {
         element.hidden = true;
     };
     const open = () => {
+        const portalHost = resolvePortalHost(button);
+        if (element.parentNode !== portalHost) {
+            portalHost.append(element);
+        }
         element.hidden = false;
         position();
         button.setAttribute('aria-expanded', 'true');
@@ -86,15 +102,26 @@ function createPopover(button, id, cleanupCallbacks) {
         }
     };
     const handleViewportChange = () => close();
+    const handleFullscreenChange = () => {
+        const portalHost = resolvePortalHost(button);
+        if (element.parentNode !== portalHost) {
+            portalHost.append(element);
+        }
+        if (!element.hidden) {
+            position();
+        }
+    };
     button.addEventListener('click', handleButtonClick);
     document.addEventListener('pointerdown', handleOutsidePointer, true);
     document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
     window.addEventListener('resize', handleViewportChange);
     window.addEventListener('scroll', handleViewportChange, true);
     cleanupCallbacks.push(() => {
         button.removeEventListener('click', handleButtonClick);
         document.removeEventListener('pointerdown', handleOutsidePointer, true);
         document.removeEventListener('keydown', handleKeyDown);
+        document.removeEventListener('fullscreenchange', handleFullscreenChange);
         window.removeEventListener('resize', handleViewportChange);
         window.removeEventListener('scroll', handleViewportChange, true);
     });
@@ -114,19 +141,29 @@ function createTooltip(cleanupCallbacks) {
     tooltip.setAttribute('role', 'tooltip');
     tooltip.hidden = true;
     document.body.append(tooltip);
+    let activeButton = null;
     const hide = () => {
         tooltip.hidden = true;
+        activeButton = null;
+    };
+    const position = (button) => {
+        const bounds = button.getBoundingClientRect();
+        const tooltipBounds = tooltip.getBoundingClientRect();
+        const left = Math.min(bounds.right + 8, window.innerWidth - tooltipBounds.width - 8);
+        const top = Math.min(Math.max(8, bounds.top + (bounds.height - tooltipBounds.height) / 2), window.innerHeight - tooltipBounds.height - 8);
+        tooltip.style.left = `${Math.round(left)}px`;
+        tooltip.style.top = `${Math.round(top)}px`;
     };
     const bind = (button, label) => {
         const show = () => {
-            const bounds = button.getBoundingClientRect();
+            activeButton = button;
+            const portalHost = resolvePortalHost(button);
+            if (tooltip.parentNode !== portalHost) {
+                portalHost.append(tooltip);
+            }
             tooltip.textContent = label;
             tooltip.hidden = false;
-            const tooltipBounds = tooltip.getBoundingClientRect();
-            const left = Math.min(bounds.right + 8, window.innerWidth - tooltipBounds.width - 8);
-            const top = Math.min(Math.max(8, bounds.top + (bounds.height - tooltipBounds.height) / 2), window.innerHeight - tooltipBounds.height - 8);
-            tooltip.style.left = `${Math.round(left)}px`;
-            tooltip.style.top = `${Math.round(top)}px`;
+            position(button);
         };
         button.addEventListener('mouseenter', show);
         button.addEventListener('mouseleave', hide);
@@ -139,6 +176,18 @@ function createTooltip(cleanupCallbacks) {
             button.removeEventListener('blur', hide);
         });
     };
+    const handleFullscreenChange = () => {
+        if (activeButton === null || tooltip.hidden) {
+            return;
+        }
+        const portalHost = resolvePortalHost(activeButton);
+        if (tooltip.parentNode !== portalHost) {
+            portalHost.append(tooltip);
+        }
+        position(activeButton);
+    };
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
+    cleanupCallbacks.push(() => document.removeEventListener('fullscreenchange', handleFullscreenChange));
     return { bind, hide, destroy: () => tooltip.remove() };
 }
 function applyHostActionState(control, state) {
@@ -547,6 +596,11 @@ export function createChartWorkspaceToolbar(containers, runtime, options = {}) {
             left.append(section);
         }
     }
+    const clearDrawingToolSelection = () => {
+        for (const button of overlayButtons) {
+            button.setAttribute('aria-pressed', 'false');
+        }
+    };
     const drawingActions = createSection('标注操作');
     const clearButton = createButton({ label: '清空全部标注', icon: 'clearAll' });
     clearButton.dataset.action = 'clear-all';
@@ -567,6 +621,18 @@ export function createChartWorkspaceToolbar(containers, runtime, options = {}) {
     left.append(drawingActions);
     containers.top.append(top);
     containers.left.append(left);
+    const eventCapability = workspaceEventCapability(runtime);
+    if (eventCapability !== undefined) {
+        cleanupCallbacks.push(eventCapability.subscribe((event) => {
+            if ((event.type === 'drawing-candidate' && event.operation === 'create') ||
+                event.type === 'drawing-committed' ||
+                event.type === 'drawing-rejected' ||
+                (event.type === 'selection-changed' && event.id === null) ||
+                event.type === 'workspace-error') {
+                clearDrawingToolSelection();
+            }
+        }));
+    }
     const stateCapability = runtimeStateCapability(runtime);
     let runtimeReady = stateCapability === undefined;
     let hostDataDisabled = false;

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

@@ -1,8 +1,8 @@
 import type { DrawingRuntimeCapability } from '../drawing/capabilities.js';
 import type { DrawingFloatingToolbar, DrawingFloatingToolbarOptions } from '../types.js';
 /**
- * 创建选中 Drawing 的对象级浮动工具栏。工具栏使用 body portal，避免修改图表引擎 DOM；
- * 拖动位置只保存在当前实例内，刷新后回到图表顶部中央。
+ * 创建选中 Drawing 的对象级浮动工具栏。普通模式使用 body portal，目标图表所属工作区
+ * 进入元素全屏时迁入对应全屏子树；拖动位置只保存在当前实例内，刷新后回到图表顶部中央。
  */
 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

@@ -1 +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"}
+{"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,CA4XxB"}

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

@@ -62,8 +62,8 @@ function selectedDrawing(runtime) {
     return id === undefined ? undefined : runtime.getDrawing(id);
 }
 /**
- * 创建选中 Drawing 的对象级浮动工具栏。工具栏使用 body portal，避免修改图表引擎 DOM；
- * 拖动位置只保存在当前实例内，刷新后回到图表顶部中央。
+ * 创建选中 Drawing 的对象级浮动工具栏。普通模式使用 body portal，目标图表所属工作区
+ * 进入元素全屏时迁入对应全屏子树；拖动位置只保存在当前实例内，刷新后回到图表顶部中央。
  */
 export function createDrawingFloatingToolbar(target, runtime, options = {}) {
     const style = document.createElement('style');
@@ -125,7 +125,13 @@ export function createDrawingFloatingToolbar(target, runtime, options = {}) {
     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);
+    const resolvePortalHost = () => {
+        const fullscreenElement = document.fullscreenElement;
+        return fullscreenElement !== null && fullscreenElement.contains(target)
+            ? fullscreenElement
+            : document.body;
+    };
+    resolvePortalHost().append(root);
     let destroyed = false;
     let userPositioned = false;
     let dragging = null;
@@ -327,8 +333,16 @@ export function createDrawingFloatingToolbar(target, runtime, options = {}) {
     grip.addEventListener('pointercancel', finishDrag);
     const unsubscribe = runtime.subscribeDrawingChanges(render);
     const handleViewportChange = () => clampCurrentPosition();
+    const handleFullscreenChange = () => {
+        const portalHost = resolvePortalHost();
+        if (root.parentNode !== portalHost) {
+            portalHost.append(root);
+        }
+        clampCurrentPosition();
+    };
     window.addEventListener('resize', handleViewportChange);
     window.addEventListener('scroll', handleViewportChange, true);
+    document.addEventListener('fullscreenchange', handleFullscreenChange);
     const resizeObserver = typeof ResizeObserver === 'undefined'
         ? null
         : new ResizeObserver(handleViewportChange);
@@ -354,6 +368,7 @@ export function createDrawingFloatingToolbar(target, runtime, options = {}) {
             resizeObserver?.disconnect();
             window.removeEventListener('resize', handleViewportChange);
             window.removeEventListener('scroll', handleViewportChange, true);
+            document.removeEventListener('fullscreenchange', handleFullscreenChange);
             colorInput.removeEventListener('change', handleColorChange);
             lineStyle.select.removeEventListener('change', handleLineStyleChange);
             lineWidth.select.removeEventListener('change', handleLineWidthChange);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baron1996/klinecharts-runtime",
-  "version": "0.9.14",
+  "version": "0.9.16",
   "description": "Web runtime for deterministic KLineCharts scenes.",
   "type": "module",
   "license": "Apache-2.0",
@@ -39,8 +39,8 @@
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@baron1996/kline-scene-schema": "0.9.14",
-    "@baron1996/klinecharts-adapter": "0.9.14",
+    "@baron1996/kline-scene-schema": "0.9.16",
+    "@baron1996/klinecharts-adapter": "0.9.16",
     "@js-temporal/polyfill": "0.5.1"
   }
 }