@baron1996/klinecharts-adapter 0.9.4 → 0.9.5

package/dist/interaction/overlay-geometry.js

@@ -0,0 +1,228 @@
+function horizontal(bounds, y) {
+    return [{ x: bounds.left, y }, { x: bounds.right, y }];
+}
+function vertical(bounds, x) {
+    return [{ x, y: bounds.top }, { x, y: bounds.bottom }];
+}
+function clippedLine(origin, toward, bounds, minimum, maximum) {
+    const dx = toward.x - origin.x;
+    const dy = toward.y - origin.y;
+    if (dx === 0 && dy === 0) {
+        return [origin, toward];
+    }
+    let from = minimum;
+    let to = maximum;
+    const clipDimension = (coordinate, delta, lower, upper) => {
+        if (delta === 0) {
+            return coordinate >= lower && coordinate <= upper;
+        }
+        const first = (lower - coordinate) / delta;
+        const second = (upper - coordinate) / delta;
+        from = Math.max(from, Math.min(first, second));
+        to = Math.min(to, Math.max(first, second));
+        return from <= to;
+    };
+    if (!clipDimension(origin.x, dx, bounds.left, bounds.right) ||
+        !clipDimension(origin.y, dy, bounds.top, bounds.bottom)) {
+        return null;
+    }
+    return [
+        { x: origin.x + dx * from, y: origin.y + dy * from },
+        { x: origin.x + dx * to, y: origin.y + dy * to },
+    ];
+}
+function infiniteLine(start, end, bounds) {
+    return clippedLine(start, end, bounds, Number.NEGATIVE_INFINITY, Number.POSITIVE_INFINITY);
+}
+function ray(start, toward, bounds) {
+    return clippedLine(start, toward, bounds, 0, Number.POSITIVE_INFINITY);
+}
+function textRectangle(anchor, text, overlay, context, align, baseline) {
+    const measured = context.measureText(text, overlay);
+    const left = align === 'center' ? anchor.x - measured.width / 2 : anchor.x;
+    const top = baseline === 'middle' ? anchor.y - measured.height / 2 : anchor.y - measured.height;
+    return {
+        left,
+        top,
+        right: left + measured.width,
+        bottom: top + measured.height,
+    };
+}
+function projectPoints(overlay, context) {
+    return (overlay.points ?? []).map((point) => context.project(point));
+}
+function sequentialSegments(points) {
+    const segments = [];
+    for (let index = 1; index < points.length; index++) {
+        segments.push([points[index - 1], points[index]]);
+    }
+    return segments;
+}
+function parallelLines(points, bounds, includeMirror) {
+    if (points.length < 2)
+        return [];
+    const segments = [];
+    const base = infiniteLine(points[0], points[1], bounds);
+    if (base !== null)
+        segments.push(base);
+    if (points.length < 3)
+        return segments;
+    const parallelToward = {
+        x: points[2].x + points[1].x - points[0].x,
+        y: points[2].y + points[1].y - points[0].y,
+    };
+    const parallel = infiniteLine(points[2], parallelToward, bounds);
+    if (parallel !== null)
+        segments.push(parallel);
+    if (includeMirror) {
+        const mirroredOrigin = {
+            x: points[0].x * 2 - points[2].x,
+            y: points[0].y * 2 - points[2].y,
+        };
+        const mirroredToward = {
+            x: mirroredOrigin.x + points[1].x - points[0].x,
+            y: mirroredOrigin.y + points[1].y - points[0].y,
+        };
+        const mirrored = infiniteLine(mirroredOrigin, mirroredToward, bounds);
+        if (mirrored !== null)
+            segments.push(mirrored);
+    }
+    return segments;
+}
+function geometry(overlay, sceneIndex, anchors, bodySegments, bodyRectangles = []) {
+    return {
+        overlayId: overlay.id,
+        sceneIndex,
+        zLevel: overlay.zLevel,
+        locked: overlay.locked,
+        anchors,
+        bodySegments,
+        bodyRectangles,
+    };
+}
+/** 将 Drawing 业务几何投影成与画面一致的 CSS 像素命中几何。 */
+export function projectOverlayGeometry(overlay, sceneIndex, context) {
+    const { bounds, referenceTimestamp, referenceValue } = context;
+    switch (overlay.type) {
+        case 'horizontalStraightLine':
+        case 'priceLine':
+        case 'simpleTag': {
+            const anchor = overlay.anchor;
+            if (anchor === undefined || !('value' in anchor))
+                return null;
+            const point = context.project({ timestamp: referenceTimestamp, value: anchor.value });
+            return geometry(overlay, sceneIndex, [point], [horizontal(bounds, point.y)]);
+        }
+        case 'verticalStraightLine': {
+            const anchor = overlay.anchor;
+            if (anchor === undefined || !('timestamp' in anchor))
+                return null;
+            const point = context.project({ timestamp: anchor.timestamp, value: referenceValue });
+            return geometry(overlay, sceneIndex, [point], [vertical(bounds, point.x)]);
+        }
+        case 'horizontalRayLine':
+        case 'horizontalSegment': {
+            if (overlay.value === undefined || overlay.startTimestamp === undefined ||
+                overlay.endTimestamp === undefined)
+                return null;
+            const start = context.project({ timestamp: overlay.startTimestamp, value: overlay.value });
+            const end = context.project({ timestamp: overlay.endTimestamp, value: overlay.value });
+            const body = overlay.type === 'horizontalRayLine' ? ray(start, end, bounds) : [start, end];
+            return geometry(overlay, sceneIndex, [start, end], body === null ? [] : [body]);
+        }
+        case 'verticalRayLine':
+        case 'verticalSegment': {
+            if (overlay.timestamp === undefined || overlay.startValue === undefined ||
+                overlay.endValue === undefined)
+                return null;
+            const start = context.project({ timestamp: overlay.timestamp, value: overlay.startValue });
+            const end = context.project({ timestamp: overlay.timestamp, value: overlay.endValue });
+            const body = overlay.type === 'verticalRayLine' ? ray(start, end, bounds) : [start, end];
+            return geometry(overlay, sceneIndex, [start, end], body === null ? [] : [body]);
+        }
+        case 'segment': {
+            const points = projectPoints(overlay, context);
+            return points.length < 2 ? null : geometry(overlay, sceneIndex, points, sequentialSegments(points));
+        }
+        case 'brush': {
+            const points = projectPoints(overlay, context);
+            return points.length < 2 ? null : geometry(overlay, sceneIndex, [], sequentialSegments(points));
+        }
+        case 'rayLine':
+        case 'straightLine': {
+            const points = projectPoints(overlay, context);
+            if (points.length < 2)
+                return null;
+            const body = overlay.type === 'rayLine'
+                ? ray(points[0], points[1], bounds)
+                : infiniteLine(points[0], points[1], bounds);
+            return geometry(overlay, sceneIndex, points, body === null ? [] : [body]);
+        }
+        case 'fibonacciLine': {
+            const points = projectPoints(overlay, context);
+            if (points.length < 2)
+                return null;
+            const body = [1, 0.786, 0.618, 0.5, 0.382, 0.236, 0].map((percent) => {
+                const y = points[1].y + (points[0].y - points[1].y) * percent;
+                return horizontal(bounds, y);
+            });
+            return geometry(overlay, sceneIndex, points, body);
+        }
+        case 'parallelStraightLine':
+        case 'priceChannelLine': {
+            const points = projectPoints(overlay, context);
+            if (points.length < 2)
+                return null;
+            return geometry(overlay, sceneIndex, points, parallelLines(points, bounds, overlay.type === 'priceChannelLine'));
+        }
+        case 'simpleAnnotation': {
+            if (overlay.point === undefined)
+                return null;
+            const point = context.project(overlay.point);
+            const lineStart = { x: point.x, y: point.y - 6 };
+            const lineEnd = { x: point.x, y: point.y - 56 };
+            const labelAnchor = { x: point.x, y: point.y - 61 };
+            return geometry(overlay, sceneIndex, [point], [[lineStart, lineEnd]], [textRectangle(labelAnchor, overlay.text ?? '', overlay, context, 'center', 'bottom')]);
+        }
+        case 'callout': {
+            if (overlay.point === undefined)
+                return null;
+            const point = context.project(overlay.point);
+            const labelAnchor = { x: point.x + 16, y: point.y - 24 };
+            return geometry(overlay, sceneIndex, [point], [[point, labelAnchor]], [textRectangle(labelAnchor, overlay.text ?? '', overlay, context, 'left', 'bottom')]);
+        }
+        case 'text': {
+            if (overlay.point === undefined)
+                return null;
+            const point = context.project(overlay.point);
+            return geometry(overlay, sceneIndex, [point], [], [textRectangle(point, overlay.text ?? '', overlay, context, 'left', 'middle')]);
+        }
+        case 'crossLine': {
+            if (overlay.point === undefined)
+                return null;
+            const point = context.project(overlay.point);
+            return geometry(overlay, sceneIndex, [point], [horizontal(bounds, point.y), vertical(bounds, point.x)]);
+        }
+        case 'rectangle':
+        case 'priceMeasurement': {
+            if (overlay.start === undefined || overlay.end === undefined)
+                return null;
+            const start = context.project(overlay.start);
+            const end = context.project(overlay.end);
+            const rectangle = {
+                left: Math.min(start.x, end.x),
+                top: Math.min(start.y, end.y),
+                right: Math.max(start.x, end.x),
+                bottom: Math.max(start.y, end.y),
+            };
+            return geometry(overlay, sceneIndex, [start, end], [], [rectangle]);
+        }
+        case 'arrow': {
+            if (overlay.start === undefined || overlay.end === undefined)
+                return null;
+            const start = context.project(overlay.start);
+            const end = context.project(overlay.end);
+            return geometry(overlay, sceneIndex, [start, end], [[start, end]]);
+        }
+    }
+}

package/dist/interaction/touch-precision-drawing.d.ts

@@ -0,0 +1,29 @@
+export interface TouchPrecisionPoint {
+    readonly x: number;
+    readonly y: number;
+}
+export interface TouchPrecisionBounds {
+    readonly left: number;
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+}
+export type TouchPrecisionDrawingPhase = 'move-start' | 'confirm-start' | 'confirm-end';
+export declare const TOUCH_PRECISION_CURSOR_OFFSET: Readonly<{
+    x: -56;
+    y: -104;
+}>;
+export declare const TOUCH_PRECISION_TAP_DISTANCE = 8;
+export declare function resolveTouchPrecisionCursor(pointer: TouchPrecisionPoint, bounds: TouchPrecisionBounds, offset?: TouchPrecisionPoint): TouchPrecisionPoint;
+export declare function isTouchPrecisionTap(origin: TouchPrecisionPoint, current: TouchPrecisionPoint, threshold?: number): boolean;
+export declare class TouchPrecisionDrawingGuide {
+    #private;
+    constructor(container: HTMLElement, onCancel: () => void);
+    show(): void;
+    hide(): void;
+    setPhase(phase: TouchPrecisionDrawingPhase): void;
+    updateCursor(point: TouchPrecisionPoint): void;
+    ownsCancelTarget(target: EventTarget | null): boolean;
+    destroy(): void;
+}
+//# sourceMappingURL=touch-precision-drawing.d.ts.map

package/dist/interaction/touch-precision-drawing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"touch-precision-drawing.d.ts","sourceRoot":"","sources":["../../src/interaction/touch-precision-drawing.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,mBAAmB;IACnC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACpC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,MAAM,0BAA0B,GACnC,YAAY,GACZ,eAAe,GACf,aAAa,CAAC;AAEjB,eAAO,MAAM,6BAA6B;;;EAGxC,CAAC;AAEH,eAAO,MAAM,4BAA4B,IAAI,CAAC;AAE9C,wBAAgB,2BAA2B,CAC1C,OAAO,EAAE,mBAAmB,EAC5B,MAAM,EAAE,oBAAoB,EAC5B,MAAM,GAAE,mBAAmD,GACzD,mBAAmB,CAKrB;AAED,wBAAgB,mBAAmB,CAClC,MAAM,EAAE,mBAAmB,EAC3B,OAAO,EAAE,mBAAmB,EAC5B,SAAS,SAA+B,GACtC,OAAO,CAET;AAiLD,qBAAa,0BAA0B;;gBAUnB,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,IAAI;IAqDxD,IAAI,IAAI,IAAI;IAIZ,IAAI,IAAI,IAAI;IAKZ,QAAQ,CAAC,KAAK,EAAE,0BAA0B,GAAG,IAAI;IAOjD,YAAY,CAAC,KAAK,EAAE,mBAAmB,GAAG,IAAI;IAQ9C,gBAAgB,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO;IAOrD,OAAO,IAAI,IAAI;CAOtB"}

package/dist/interaction/touch-precision-drawing.js

@@ -0,0 +1,273 @@
+export const TOUCH_PRECISION_CURSOR_OFFSET = Object.freeze({
+    x: -56,
+    y: -104,
+});
+export const TOUCH_PRECISION_TAP_DISTANCE = 8;
+export function resolveTouchPrecisionCursor(pointer, bounds, offset = TOUCH_PRECISION_CURSOR_OFFSET) {
+    return {
+        x: Math.max(bounds.left, Math.min(pointer.x + offset.x, bounds.right)),
+        y: Math.max(bounds.top, Math.min(pointer.y + offset.y, bounds.bottom)),
+    };
+}
+export function isTouchPrecisionTap(origin, current, threshold = TOUCH_PRECISION_TAP_DISTANCE) {
+    return Math.hypot(current.x - origin.x, current.y - origin.y) < threshold;
+}
+const TOUCH_PRECISION_DRAWING_STYLES = String.raw `
+.baron-touch-drawing-guide,
+.baron-touch-drawing-guide * {
+	box-sizing: border-box;
+}
+
+.baron-touch-drawing-guide {
+	position: absolute;
+	inset: 0;
+	z-index: 50;
+	overflow: hidden;
+	pointer-events: none;
+	font-family: inherit;
+	font-synthesis: none;
+}
+
+.baron-touch-drawing-guide[hidden] {
+	display: none;
+}
+
+.baron-touch-drawing-guide__prompt {
+	position: absolute;
+	top: max(8px, env(safe-area-inset-top));
+	right: 8px;
+	left: 8px;
+	display: grid;
+	grid-template-columns: auto minmax(0, 1fr) 44px;
+	align-items: center;
+	min-height: 44px;
+	color: rgba(255, 255, 255, 0.96);
+	background: rgba(31, 34, 38, 0.94);
+	border: 1px solid rgba(255, 255, 255, 0.09);
+	border-radius: 12px;
+	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
+	backdrop-filter: blur(10px);
+}
+
+.baron-touch-drawing-guide__progress {
+	min-width: 44px;
+	margin-left: 6px;
+	padding: 6px 8px;
+	color: rgba(255, 255, 255, 0.8);
+	background: rgba(255, 255, 255, 0.1);
+	border-radius: 8px;
+	font-size: 11px;
+	font-variant-numeric: tabular-nums;
+	font-weight: 750;
+	line-height: 1;
+	text-align: center;
+}
+
+.baron-touch-drawing-guide__message {
+	min-width: 0;
+	padding: 0 10px;
+	overflow: hidden;
+	font-size: 13px;
+	font-weight: 700;
+	line-height: 18px;
+	text-align: center;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.baron-touch-drawing-guide__cancel {
+	display: grid;
+	width: 44px;
+	height: 44px;
+	padding: 0;
+	place-items: center;
+	color: rgba(255, 255, 255, 0.82);
+	background: transparent;
+	border: 0;
+	border-radius: 10px;
+	cursor: pointer;
+	pointer-events: auto;
+	touch-action: manipulation;
+}
+
+.baron-touch-drawing-guide__cancel:active {
+	color: rgba(255, 255, 255, 1);
+	background: rgba(255, 255, 255, 0.12);
+}
+
+.baron-touch-drawing-guide__cancel:focus-visible {
+	outline: 2px solid rgba(112, 140, 255, 1);
+	outline-offset: -3px;
+}
+
+.baron-touch-drawing-guide__cancel svg {
+	width: 20px;
+	height: 20px;
+	fill: none;
+	stroke: currentcolor;
+	stroke-linecap: round;
+	stroke-linejoin: round;
+	stroke-width: 1.8;
+}
+
+.baron-touch-drawing-guide__cursor {
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+	width: 0;
+	height: 0;
+	transform: translate3d(
+		var(--baron-touch-cursor-x, 0),
+		var(--baron-touch-cursor-y, 0),
+		0
+	);
+	transition: opacity 120ms ease;
+}
+
+.baron-touch-drawing-guide[data-has-cursor="true"] .baron-touch-drawing-guide__cursor {
+	display: block;
+}
+
+.baron-touch-drawing-guide__cursor::before,
+.baron-touch-drawing-guide__cursor::after {
+	position: absolute;
+	content: "";
+	opacity: 0.72;
+	pointer-events: none;
+}
+
+.baron-touch-drawing-guide__cursor::before {
+	top: calc(-1 * var(--baron-touch-cursor-y, 0));
+	left: 0;
+	width: 0;
+	height: 100vh;
+	border-left: 1px dashed rgba(41, 98, 255, 0.72);
+}
+
+.baron-touch-drawing-guide__cursor::after {
+	top: 0;
+	left: calc(-1 * var(--baron-touch-cursor-x, 0));
+	width: 100vw;
+	height: 0;
+	border-top: 1px dashed rgba(41, 98, 255, 0.72);
+}
+
+.baron-touch-drawing-guide__cursor-dot {
+	position: absolute;
+	top: -4px;
+	left: -4px;
+	z-index: 1;
+	width: 9px;
+	height: 9px;
+	background: rgba(41, 98, 255, 1);
+	border: 2px solid rgba(255, 255, 255, 0.98);
+	border-radius: 50%;
+	box-shadow: 0 1px 5px rgba(17, 24, 39, 0.24);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.baron-touch-drawing-guide__cursor {
+		transition: none;
+	}
+}
+`;
+function promptForPhase(phase) {
+    switch (phase) {
+        case 'move-start':
+            return { progress: '1 / 4', message: '将光标移至起点' };
+        case 'confirm-start':
+            return { progress: '2 / 4', message: '点击设置第一个点' };
+        case 'confirm-end':
+            return { progress: '4 / 4', message: '点击即可完成' };
+    }
+}
+export class TouchPrecisionDrawingGuide {
+    #container;
+    #root;
+    #progress;
+    #message;
+    #cancel;
+    #originalInlinePosition;
+    #changedContainerPosition;
+    #handleCancel;
+    constructor(container, onCancel) {
+        this.#container = container;
+        this.#originalInlinePosition = container.style.position;
+        this.#changedContainerPosition = (container.ownerDocument.defaultView?.getComputedStyle(container).position ??
+            container.style.position) === 'static';
+        if (this.#changedContainerPosition) {
+            container.style.position = 'relative';
+        }
+        const document = container.ownerDocument;
+        const root = document.createElement('div');
+        root.className = 'baron-touch-drawing-guide';
+        root.dataset.touchDrawingGuide = '';
+        root.hidden = true;
+        const style = document.createElement('style');
+        style.dataset.baronTouchDrawingGuideStyles = '';
+        style.textContent = TOUCH_PRECISION_DRAWING_STYLES;
+        const prompt = document.createElement('div');
+        prompt.className = 'baron-touch-drawing-guide__prompt';
+        const progress = document.createElement('span');
+        progress.className = 'baron-touch-drawing-guide__progress';
+        const message = document.createElement('span');
+        message.className = 'baron-touch-drawing-guide__message';
+        message.setAttribute('role', 'status');
+        message.setAttribute('aria-live', 'polite');
+        const cancel = document.createElement('button');
+        cancel.type = 'button';
+        cancel.className = 'baron-touch-drawing-guide__cancel';
+        cancel.dataset.touchDrawingCancel = '';
+        cancel.setAttribute('aria-label', '取消绘制线段');
+        cancel.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 7h14M9 7V4h6v3m-8 0 1 13h8l1-13M10 11v5m4-5v5"/></svg>';
+        prompt.append(progress, message, cancel);
+        const cursor = document.createElement('div');
+        cursor.className = 'baron-touch-drawing-guide__cursor';
+        const dot = document.createElement('span');
+        dot.className = 'baron-touch-drawing-guide__cursor-dot';
+        cursor.append(dot);
+        root.append(style, prompt, cursor);
+        container.append(root);
+        this.#root = root;
+        this.#progress = progress;
+        this.#message = message;
+        this.#cancel = cancel;
+        this.#handleCancel = () => onCancel();
+        cancel.addEventListener('click', this.#handleCancel);
+        this.setPhase('move-start');
+    }
+    show() {
+        this.#root.hidden = false;
+    }
+    hide() {
+        this.#root.hidden = true;
+        delete this.#root.dataset.hasCursor;
+    }
+    setPhase(phase) {
+        const prompt = promptForPhase(phase);
+        this.#root.dataset.phase = phase;
+        this.#progress.textContent = prompt.progress;
+        this.#message.textContent = prompt.message;
+    }
+    updateCursor(point) {
+        this.#root.dataset.hasCursor = 'true';
+        this.#root.dataset.cursorX = String(Math.round(point.x));
+        this.#root.dataset.cursorY = String(Math.round(point.y));
+        this.#root.style.setProperty('--baron-touch-cursor-x', `${point.x}px`);
+        this.#root.style.setProperty('--baron-touch-cursor-y', `${point.y}px`);
+    }
+    ownsCancelTarget(target) {
+        return target !== null &&
+            typeof target === 'object' &&
+            'nodeType' in target &&
+            this.#cancel.contains(target);
+    }
+    destroy() {
+        this.#cancel.removeEventListener('click', this.#handleCancel);
+        this.#root.remove();
+        if (this.#changedContainerPosition) {
+            this.#container.style.position = this.#originalInlinePosition;
+        }
+    }
+}

package/dist/version.d.ts

@@ -1,5 +1,5 @@
 /** Adapter 包版本。 */
-export declare const ADAPTER_PACKAGE_VERSION: "0.9.4";
+export declare const ADAPTER_PACKAGE_VERSION: "0.9.5";
 /** 唯一允许加载的 KLineCharts 引擎版本。 */
 export declare const KLINECHARTS_ENGINE_VERSION: "10.0.0";
 /** 与 ChartScene 绑定的 Runtime 协议版本。 */

package/dist/version.js

@@ -1,5 +1,5 @@
 /** Adapter 包版本。 */
-export const ADAPTER_PACKAGE_VERSION = '0.9.4';
+export const ADAPTER_PACKAGE_VERSION = '0.9.5';
 /** 唯一允许加载的 KLineCharts 引擎版本。 */
 export const KLINECHARTS_ENGINE_VERSION = '10.0.0';
 /** 与 ChartScene 绑定的 Runtime 协议版本。 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baron1996/klinecharts-adapter",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "description": "Controlled ChartScene adapter for KLineCharts.",
   "type": "module",
   "license": "Apache-2.0",