@unicom-cloud/ui 0.8.168 → 0.8.169

package/draw/core/mermaid.d.ts

@@ -0,0 +1 @@
+export declare const isMaybeMermaidDefinition: (text: string) => boolean;

package/draw/core/polyfill.d.ts

@@ -0,0 +1,2 @@
+declare const polyfill: () => void;
+export default polyfill;

package/draw/core/polyfill.js

@@ -0,0 +1,6 @@
+/* 潘启宝 2026-06-25 08:58:50 星期四 山东省济南市 */
+//#region components/pc/draw/core/polyfill.ts
+var e = () => {};
+//#endregion
+export { e as default };
+/* 独立思考，明辨是非 */

package/draw/core/reactUtils.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @param func handler taking at most single parameter (event).
+ */
+export declare const withBatchedUpdates: <TFunction extends ((event: any) => void) | (() => void)>(func: Parameters<TFunction>["length"] extends 0 | 1 ? TFunction : never) => TFunction;
+/**
+ * barches React state updates and throttles the calls to a single call per
+ * animation frame
+ */
+export declare const withBatchedUpdatesThrottled: <TFunction extends ((event: any) => void) | (() => void)>(func: Parameters<TFunction>["length"] extends 0 | 1 ? TFunction : never) => {
+    (...args: Parameters<TFunction>): void;
+    flush(): void;
+    cancel(): void;
+};
+export declare const isRenderThrottlingEnabled: () => boolean;

package/draw/core/reactUtils.js

@@ -0,0 +1,24 @@
+/* 潘启宝 2026-06-25 08:58:50 星期四 山东省济南市 */
+import { throttleRAF as e } from "../common/utils.js";
+import "../common/index.js";
+import { version as t } from "react";
+import { unstable_batchedUpdates as n } from "react-dom";
+//#region components/pc/draw/core/reactUtils.ts
+var r = (e) => ((t) => {
+	n(e, t);
+}), i = (t) => e(((e) => {
+	n(t, e);
+})), a = (() => {
+	let e;
+	try {
+		let n = t.split(".");
+		e = Number(n[0]) > 17;
+	} catch {
+		e = !1;
+	}
+	let n = !1;
+	return () => window.DRAW_THROTTLE_RENDER === !0 ? e ? !0 : (n || (n = !0, console.warn("Draw: render throttling is disabled on React versions < 18.")), !1) : !1;
+})();
+//#endregion
+export { a as isRenderThrottlingEnabled, r as withBatchedUpdates, i as withBatchedUpdatesThrottled };
+/* 独立思考，明辨是非 */

package/draw/core/renderer/animation.d.ts

@@ -0,0 +1,10 @@
+export type Animation<R extends object> = (params: {
+    deltaTime: number;
+    state?: R;
+}) => R | null | undefined;
+export declare class AnimationController {
+    #private;
+    static start<R extends object>(key: string, animation: Animation<R>): void;
+    static running(key: string): boolean;
+    static cancel(key: string): void;
+}

package/draw/core/renderer/animation.js

@@ -0,0 +1,43 @@
+/* 潘启宝 2026-06-25 08:58:50 星期四 山东省济南市 */
+import { isRenderThrottlingEnabled as e } from "../reactUtils.js";
+//#region components/pc/draw/core/renderer/animation.ts
+var t = class t {
+	static #e = !1;
+	static #t = /* @__PURE__ */ new Map();
+	static start(n, r) {
+		let i = r({
+			deltaTime: 0,
+			state: void 0
+		});
+		i && (t.#t.set(n, {
+			animation: r,
+			lastTime: 0,
+			state: i
+		}), t.#e || (t.#e = !0, e() ? requestAnimationFrame(t.#n) : setTimeout(t.#n, 0)));
+	}
+	static #n() {
+		if (t.#t.size > 0) {
+			for (let [e, n] of t.#t) {
+				let r = performance.now(), i = n.lastTime === 0 ? 0 : r - n.lastTime, a = n.animation({
+					deltaTime: i,
+					state: n.state
+				});
+				if (a) n.lastTime = r, n.state = a;
+				else if (t.#t.delete(e), t.#t.size === 0) {
+					t.#e = !1;
+					return;
+				}
+			}
+			e() ? requestAnimationFrame(t.#n) : setTimeout(t.#n, 0);
+		}
+	}
+	static running(e) {
+		return t.#t.has(e);
+	}
+	static cancel(e) {
+		t.#t.delete(e);
+	}
+};
+//#endregion
+export { t as AnimationController };
+/* 独立思考，明辨是非 */

package/draw/core/renderer/helpers.d.ts

@@ -0,0 +1,16 @@
+import type { AppState, StaticCanvasAppState } from '../../interface';
+import type { StaticCanvasRenderConfig } from '../scene/types';
+export declare const fillCircle: (context: CanvasRenderingContext2D, cx: number, cy: number, radius: number, stroke: boolean, fill?: boolean) => void;
+export declare const getNormalizedCanvasDimensions: (canvas: HTMLCanvasElement, scale: number) => [number, number];
+export declare const bootstrapCanvas: ({ canvas, scale, normalizedWidth, normalizedHeight, theme, isExporting, viewBackgroundColor, }: {
+    canvas: HTMLCanvasElement;
+    scale: number;
+    normalizedWidth: number;
+    normalizedHeight: number;
+    theme?: AppState["theme"];
+    isExporting?: StaticCanvasRenderConfig["isExporting"];
+    viewBackgroundColor?: StaticCanvasAppState["viewBackgroundColor"];
+}) => CanvasRenderingContext2D;
+export declare const strokeRectWithRotation_simple: (context: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, cx: number, cy: number, angle: number, fill?: boolean, 
+/** should account for zoom */
+radius?: number) => void;

package/draw/core/renderer/helpers.js

@@ -0,0 +1,16 @@
+/* 潘启宝 2026-06-25 08:58:50 星期四 山东省济南市 */
+import { applyDarkModeFilter as e } from "../../common/colors.js";
+import { THEME as t } from "../../common/constants.js";
+import "../../common/index.js";
+//#region components/pc/draw/core/renderer/helpers.ts
+var n = (e, t, n, r, i, a = !0) => {
+	e.beginPath(), e.arc(t, n, r, 0, Math.PI * 2), a && e.fill(), i && e.stroke();
+}, r = (e, t) => [e.width / t, e.height / t], i = ({ canvas: n, scale: r, normalizedWidth: i, normalizedHeight: a, theme: o, isExporting: s, viewBackgroundColor: c }) => {
+	let l = n.getContext("2d");
+	return l.setTransform(1, 0, 0, 1, 0, 0), l.scale(r, r), typeof c == "string" ? ((c === "transparent" || c.length === 5 || c.length === 9 || /(hsla|rgba)\(/.test(c)) && l.clearRect(0, 0, i, a), l.save(), l.fillStyle = o === t.DARK ? e(c) : c, l.fillRect(0, 0, i, a), l.restore()) : l.clearRect(0, 0, i, a), l;
+}, a = (e, t, n, r, i, a, o, s, c = !1, l = 0) => {
+	e.save(), e.translate(a, o), e.rotate(s), c && e.fillRect(t - a, n - o, r, i), l && e.roundRect ? (e.beginPath(), e.roundRect(t - a, n - o, r, i, l), e.stroke(), e.closePath()) : e.strokeRect(t - a, n - o, r, i), e.restore();
+};
+//#endregion
+export { i as bootstrapCanvas, n as fillCircle, r as getNormalizedCanvasDimensions, a as strokeRectWithRotation_simple };
+/* 独立思考，明辨是非 */

package/draw/core/renderer/interactiveScene.d.ts

@@ -0,0 +1,14 @@
+import { getScrollBars } from '../scene/scrollbars';
+import type { InteractiveSceneRenderConfig, RenderableElementsMap } from '../scene/types';
+declare const _renderInteractiveScene: ({ app, canvas, elementsMap, visibleElements, selectedElements, allElementsMap, scale, appState, renderConfig, editorInterface, animationState, deltaTime, }: InteractiveSceneRenderConfig) => {
+    scrollBars?: ReturnType<typeof getScrollBars>;
+    atLeastOneVisibleElement: boolean;
+    elementsMap: RenderableElementsMap;
+    animationState?: typeof animationState;
+};
+/**
+ * Interactive scene is the ui-canvas where we render bounding boxes, selections
+ * and other ui stuff.
+ */
+export declare const renderInteractiveScene: <U extends typeof _renderInteractiveScene>(renderConfig: InteractiveSceneRenderConfig) => ReturnType<U>;
+export {};

package/draw/core/renderer/interactiveScene.js

@@ -0,0 +1,392 @@
+/* 潘启宝 2026-06-25 08:58:50 星期四 山东省济南市 */
+import { clamp as e } from "../../libs/math/utils.js";
+import { FRAME_STYLE as t, THEME as n } from "../../common/constants.js";
+import { pointFrom as r, pointsEqual as i } from "../../libs/math/point.js";
+import "../../libs/math/index.js";
+import { arrayToMap as a, getFeatureFlag as o, invariant as s } from "../../common/utils.js";
+import "../../common/index.js";
+import { isArrowElement as c, isBindableElement as l, isElbowArrow as u, isFrameLikeElement as d, isImageElement as f, isLineElement as p, isLinearElement as m, isTextElement as h } from "../../element/typeChecks.js";
+import { getElementsInGroup as g, getSelectedGroupIds as _, isSelectedViaGroup as v, selectGroupsFromGivenElements as y } from "../../element/groups.js";
+import { renderSelectionElement as b } from "../../element/renderElement.js";
+import { deconstructDiamondElement as x, deconstructRectanguloidElement as S } from "../../element/utils.js";
+import { FOCUS_POINT_SIZE as C, getGlobalFixedPointForBindableElement as w } from "../../element/binding.js";
+import { LinearElementEditor as T } from "../../element/linearElementEditor.js";
+import { elementCenterPoint as E, getCommonBounds as D, getElementAbsoluteCoords as O } from "../../element/bounds.js";
+import { isFocusPointVisible as k } from "../../element/arrows/focus.js";
+import { getOmitSidesForEditorInterface as A, getTransformHandles as j, getTransformHandlesFromCoords as M, hasBoundingBox as N } from "../../element/transformHandles.js";
+import "../../element/index.js";
+import { bootstrapCanvas as P, fillCircle as F, getNormalizedCanvasDimensions as I, strokeRectWithRotation_simple as L } from "./helpers.js";
+import { roundRect as ee } from "./roundRect.js";
+import { getClientColor as te, renderRemoteCursors as ne } from "../clients.js";
+import { SCROLLBAR_COLOR as re, getScrollBars as ie } from "../scene/scrollbars.js";
+import { renderSnaps as R } from "./renderSnaps.js";
+//#region components/pc/draw/core/renderer/interactiveScene.ts
+var z = (e, t) => {
+	s(t.selectedLinearElement, "selectedLinearElement is null");
+	let { segmentMidPointHoveredCoords: n } = t.selectedLinearElement;
+	s(n, "midPointCoords is null"), e.save(), e.translate(t.scrollX, t.scrollY), V(n, e, t), e.restore();
+}, B = (e, t, n) => {
+	let { elementId: r, hoverPointIndex: i } = t.selectedLinearElement;
+	if (t.selectedLinearElement?.isEditing && t.selectedLinearElement?.selectedPointsIndices?.includes?.(i) || t.selectedLinearElement?.isDragging) return;
+	let a = T.getElement(r, n);
+	if (!a) return;
+	let o = T.getPointAtIndexGlobalCoordinates(a, i, n);
+	e.save(), e.translate(t.scrollX, t.scrollY), V(o, e, t), e.restore();
+}, V = (e, t, n) => {
+	t.fillStyle = "rgba(105, 101, 219, 0.4)", F(t, e[0], e[1], T.POINT_HANDLE_SIZE / n.zoom.value, !1);
+}, H = (e, t, n) => {
+	e.save(), e.translate(t.scrollX, t.scrollY), V(n, e, t), e.restore();
+}, U = (e, t, n, r, i, a, o) => {
+	e.strokeStyle = "#5e5ad8", e.setLineDash([]), e.fillStyle = "rgba(255, 255, 255, 0.9)", i ? e.fillStyle = "rgba(134, 131, 226, 0.9)" : a && (e.fillStyle = "rgba(177, 151, 252, 0.7)"), F(e, n[0], n[1], (o ? r * (t.selectedLinearElement?.isEditing ? 1.5 : 2) : r) / t.zoom.value, !a, !o || i);
+}, W = (r, i, a, o) => {
+	let s = i.frameId && a.get(i.frameId);
+	switch (s && d(s) && (r.translate(s.x, s.y), r.beginPath(), t.radius && r.roundRect ? r.roundRect(-1, -1, s.width + 1, s.height + 1, t.radius / o.zoom.value) : r.rect(-1, -1, s.width + 1, s.height + 1), r.clip(), r.translate(-s.x, -s.y)), i.type) {
+		case "magicframe":
+		case "frame":
+			r.save(), r.translate(i.x, i.y), r.lineWidth = t.strokeWidth / o.zoom.value, r.strokeStyle = o.theme === n.DARK ? "rgba(3, 93, 161, 1)" : "rgba(106, 189, 252, 1)", t.radius && r.roundRect ? (r.beginPath(), r.roundRect(0, 0, i.width, i.height, t.radius / o.zoom.value), r.stroke(), r.closePath()) : r.strokeRect(0, 0, i.width, i.height), r.restore();
+			break;
+		default:
+			r.save();
+			let s = E(i, a);
+			switch (r.translate(s[0], s[1]), r.rotate(i.angle), r.translate(-s[0], -s[1]), r.translate(i.x, i.y), r.lineWidth = e(1.75, i.strokeWidth, 4) / Math.max(.25, o.zoom.value), r.strokeStyle = o.theme === n.DARK ? "rgba(3, 93, 161, 1)" : "rgba(106, 189, 252, 1)", i.type) {
+				case "ellipse":
+					r.beginPath(), r.ellipse(i.width / 2, i.height / 2, i.width / 2, i.height / 2, 0, 0, 2 * Math.PI), r.closePath(), r.stroke();
+					break;
+				case "diamond":
+					{
+						let [e, t] = x(i);
+						e.forEach((e) => {
+							r.beginPath(), r.moveTo(e[0][0] - i.x, e[0][1] - i.y), r.lineTo(e[1][0] - i.x, e[1][1] - i.y), r.stroke();
+						}), t.forEach((e) => {
+							let [t, n, a, o] = e;
+							r.beginPath(), r.moveTo(t[0] - i.x, t[1] - i.y), r.bezierCurveTo(n[0] - i.x, n[1] - i.y, a[0] - i.x, a[1] - i.y, o[0] - i.x, o[1] - i.y), r.stroke();
+						});
+					}
+					break;
+				default:
+					{
+						let [e, t] = S(i);
+						e.forEach((e) => {
+							r.beginPath(), r.moveTo(e[0][0] - i.x, e[0][1] - i.y), r.lineTo(e[1][0] - i.x, e[1][1] - i.y), r.stroke();
+						}), t.forEach((e) => {
+							let [t, n, a, o] = e;
+							r.beginPath(), r.moveTo(t[0] - i.x, t[1] - i.y), r.bezierCurveTo(n[0] - i.x, n[1] - i.y, a[0] - i.x, a[1] - i.y, o[0] - i.x, o[1] - i.y), r.stroke();
+						});
+					}
+					break;
+			}
+			r.restore();
+			break;
+	}
+}, G = (r, i, a, o, s, c, l) => {
+	let u = r.state.bindMode === "orbit" && r.bindModeHandler !== null, f = 700 - (l?.runtime ?? (u ? 0 : 700)), p = e(1 / 700 * f, 1e-4, 1), m = a.strokeWidth / 2, h = a.frameId && o.get(a.frameId);
+	switch (h && d(h) && (i.translate(h.x, h.y), i.beginPath(), t.radius && i.roundRect ? i.roundRect(-1, -1, h.width + 1, h.height + 1, t.radius / s.zoom.value) : i.rect(-1, -1, h.width + 1, h.height + 1), i.clip(), i.translate(-h.x, -h.y)), a.type) {
+		case "magicframe":
+		case "frame":
+			i.save(), i.translate(a.x, a.y), i.lineWidth = t.strokeWidth / s.zoom.value, i.strokeStyle = s.theme === n.DARK ? `rgba(3, 93, 161, ${p})` : `rgba(106, 189, 252, ${p})`, t.radius && i.roundRect ? (i.beginPath(), i.roundRect(0, 0, a.width, a.height, t.radius / s.zoom.value), i.stroke(), i.closePath()) : i.strokeRect(0, 0, a.width, a.height), i.restore();
+			break;
+		default:
+			i.save();
+			let r = E(a, o), c = r[0] + s.scrollX, l = r[1] + s.scrollY;
+			switch (i.translate(c, l), i.rotate(a.angle), i.translate(-c, -l), i.translate(a.x + s.scrollX - m, a.y + s.scrollY - m), i.lineWidth = e(2.5, a.strokeWidth * 1.75, 4) / Math.max(.25, s.zoom.value), i.strokeStyle = s.theme === n.DARK ? `rgba(3, 93, 161, ${p / 2})` : `rgba(106, 189, 252, ${p / 2})`, a.type) {
+				case "ellipse":
+					i.beginPath(), i.ellipse((a.width + m * 2) / 2, (a.height + m * 2) / 2, (a.width + m * 2) / 2, (a.height + m * 2) / 2, 0, 0, 2 * Math.PI), i.closePath(), i.stroke();
+					break;
+				case "diamond":
+					{
+						let [e, t] = x(a, m);
+						e.forEach((e) => {
+							i.beginPath(), i.moveTo(e[0][0] - a.x + m, e[0][1] - a.y + m), i.lineTo(e[1][0] - a.x + m, e[1][1] - a.y + m), i.stroke();
+						}), t.forEach((e) => {
+							let [t, n, r, o] = e;
+							i.beginPath(), i.moveTo(t[0] - a.x + m, t[1] - a.y + m), i.bezierCurveTo(n[0] - a.x + m, n[1] - a.y + m, r[0] - a.x + m, r[1] - a.y + m, o[0] - a.x + m, o[1] - a.y + m), i.stroke();
+						});
+					}
+					break;
+				default:
+					{
+						let [e, t] = S(a, m);
+						e.forEach((e) => {
+							i.beginPath(), i.moveTo(e[0][0] - a.x + m, e[0][1] - a.y + m), i.lineTo(e[1][0] - a.x + m, e[1][1] - a.y + m), i.stroke();
+						}), t.forEach((e) => {
+							let [t, n, r, o] = e;
+							i.beginPath(), i.moveTo(t[0] - a.x + m, t[1] - a.y + m), i.bezierCurveTo(n[0] - a.x + m, n[1] - a.y + m, r[0] - a.x + m, r[1] - a.y + m, o[0] - a.x + m, o[1] - a.y + m), i.stroke();
+						});
+					}
+					break;
+			}
+			i.restore();
+			break;
+	}
+	if (!u || (l?.runtime ?? 0) > 700) return;
+	let g = .5 * (Math.min(a.width, a.height) / 2);
+	if (!d(a)) {
+		i.save(), i.translate(a.x + s.scrollX, a.y + s.scrollY);
+		let e = 1 / 700 * f;
+		i.strokeStyle = "rgba(0, 0, 0, 0.2)", i.lineWidth = 1 / s.zoom.value, i.setLineDash([4 / s.zoom.value, 4 / s.zoom.value]), i.lineDashOffset = -e * 10 / s.zoom.value, i.beginPath(), i.ellipse(a.width / 2, a.height / 2, g, g, 0, 0, 2 * Math.PI), i.stroke(), i.fillStyle = "rgba(0, 0, 0, 0.04)", i.beginPath(), i.ellipse(a.width / 2, a.height / 2, g * (1 - p), g * (1 - p), 0, 0, 2 * Math.PI), i.fill(), i.restore();
+	}
+	return { runtime: (l?.runtime ?? 0) + c };
+}, K = (e, t, n, r, i, a, s) => {
+	if (o("COMPLEX_BINDINGS")) return G(e, t, n, r, i, a, s);
+	t.save(), t.translate(i.scrollX, i.scrollY), W(t, n, r, i), t.restore();
+}, q = (e, t, n) => {
+	let { angle: r, x1: i, y1: a, x2: o, y2: s, selectionColors: c, cx: l, cy: u, dashed: d, activeEmbeddable: f } = n, p = o - i, m = s - a, h = (n.padding ?? 4) / t.zoom.value, g = 8 / t.zoom.value, _ = 4 / t.zoom.value;
+	e.save(), e.translate(t.scrollX, t.scrollY), e.lineWidth = (f ? 4 : 1) / t.zoom.value;
+	let v = c.length;
+	for (let t = 0; t < v; ++t) e.strokeStyle = c[t], d && e.setLineDash([g, _ + (g + _) * (v - 1)]), e.lineDashOffset = (g + _) * t, L(e, i - h, a - h, p + h * 2, m + h * 2, l, u, r);
+	e.restore();
+}, J = (e, n, r, i) => {
+	let [a, o, s, c] = O(r, i), l = s - a, u = c - o;
+	e.strokeStyle = "rgb(0,118,255)", e.lineWidth = t.strokeWidth / n.zoom.value, e.save(), e.translate(n.scrollX, n.scrollY), L(e, a, o, l, u, a + l / 2, o + u / 2, r.angle, !1, t.radius / n.zoom.value), e.restore();
+}, Y = (e, t, n, r) => {
+	let { colors: i = ["rgb(0,118,255)"], dashed: a = !1 } = r || {}, o = n.filter((e) => e.groupIds.length === 0), s = n.filter((e) => e.groupIds.length > 0), c = (e) => {
+		let [t, n, r, o] = D(e);
+		return {
+			angle: 0,
+			x1: t,
+			x2: r,
+			y1: n,
+			y2: o,
+			selectionColors: i,
+			dashed: a,
+			cx: t + (r - t) / 2,
+			cy: n + (o - n) / 2,
+			activeEmbeddable: !1
+		};
+	}, l = (e) => c(g(n, e));
+	Object.entries(y(s, t)).filter(([e, t]) => t).map(([e, t]) => e).map((e) => l(e)).concat(o.map((e) => c([e]))).forEach((n) => q(e, t, n));
+}, X = (e, t, n, a) => {
+	if (!t.selectedLinearElement) return;
+	e.save(), e.translate(t.scrollX, t.scrollY), e.lineWidth = 1 / t.zoom.value;
+	let o = T.getPointsGlobalCoordinates(n, a), { POINT_HANDLE_SIZE: s } = T, c = t.selectedLinearElement?.isEditing ? s : s / 2, l = u(n), d = p(n);
+	if (o.forEach((r, a) => {
+		if (l && a !== 0 && a !== o.length - 1) return;
+		let s = a > 0 && (a !== o.length - 1 || !d || !n.polygon) && i(r, a === o.length - 1 ? o[0] : o[a - 1], 2 / t.zoom.value), u = !!t.selectedLinearElement?.isEditing && !!t.selectedLinearElement?.selectedPointsIndices?.includes?.(a);
+		d && n.polygon && !u && a === n.points.length - 1 && t.selectedLinearElement?.isEditing && t.selectedLinearElement?.selectedPointsIndices?.includes?.(0) && (u = !0), U(e, t, r, c, u, !1, s);
+	}), u(n)) {
+		let i = n.fixedSegments?.map?.((e) => e.index) || [];
+		o.slice(0, -1).forEach((a, c) => {
+			T.isSegmentTooShort(n, o[c + 1], o[c], c, t.zoom) || U(e, t, r((a[0] + o[c + 1][0]) / 2, (a[1] + o[c + 1][1]) / 2), s / 2, !1, !i.includes(c + 1), !1);
+		});
+	} else T.getEditorMidPoints(n, a, t).filter((e, t, r) => e !== null && !(u(n) && (t === 0 || t === r.length - 1))).forEach((n) => {
+		(t.selectedLinearElement?.isEditing || o.length === 2) && U(e, t, n, s / 2, !1, !0, !1);
+	});
+	e.restore();
+}, ae = (e, t, n, r) => {
+	e.save(), e.translate(t.scrollX, t.scrollY), e.strokeStyle = "rgba(134, 131, 226, 0.6)", e.lineWidth = 1 / t.zoom.value, e.setLineDash([4 / t.zoom.value, 4 / t.zoom.value]), e.beginPath(), e.moveTo(n[0], n[1]), e.lineTo(r[0], r[1]), e.stroke(), e.restore();
+}, oe = (e, t, n, r, i) => {
+	e.save(), e.translate(t.scrollX, t.scrollY), e.strokeStyle = "rgba(134, 131, 226, 0.6)", e.lineWidth = 1 / t.zoom.value, e.setLineDash([]), e.fillStyle = i ? "rgba(134, 131, 226, 0.9)" : "rgba(255, 255, 255, 0.9)", F(e, n[0], n[1], r / t.zoom.value, !0, !0), e.restore();
+}, Z = ({ arrow: e, appState: t, type: n, context: r, elementsMap: i }) => {
+	let a = n === "start" ? e.startBinding : e.endBinding, o = a?.elementId && i.get(a.elementId);
+	if (!o || !l(o) || o.isDeleted) return;
+	let s = w(a.fixedPoint, o, i);
+	if (!k(s, e, o, i, t)) return;
+	let c = t.selectedLinearElement, u = !!c?.isDragging, d = n === "start" ? 0 : e.points.length - 1, f = !!c?.selectedPointsIndices?.includes?.(d);
+	if (c?.hoveredFocusPointBinding === n && !c.draggedFocusPointBinding && H(r, t, s), !(f && u)) {
+		let s = w(a.fixedPoint, o, i), l = c?.hoveredFocusPointBinding === n;
+		ae(r, t, T.getPointAtIndexGlobalCoordinates(e, d, i), s), oe(r, t, s, C / 1.5, l);
+	}
+}, Q = (e, t, n, r, i) => {
+	Object.keys(r).forEach((a) => {
+		let o = r[a];
+		if (o !== void 0) {
+			let [r, s, c, l] = o;
+			e.save(), e.lineWidth = 1 / n.zoom.value, t.selectionColor && (e.strokeStyle = t.selectionColor), a === "rotation" ? F(e, r + c / 2, s + l / 2, c / 2, !0) : e.roundRect ? (e.beginPath(), e.roundRect(r, s, c, l, 2 / n.zoom.value), e.fill(), e.stroke()) : L(e, r, s, c, l, r + c / 2, s + l / 2, i, !0), e.restore();
+		}
+	});
+}, $ = (e, t, n, r, i) => {
+	let [a, o, , , s, c] = O(r, i), l = 3 / n.zoom.value, u = l / 2, d = s - a + l, f = c - o + l, p = Math.min(20 / n.zoom.value, d), m = Math.min(20 / n.zoom.value, f);
+	e.save(), e.fillStyle = t.selectionColor, e.strokeStyle = t.selectionColor, e.lineWidth = l, [
+		[
+			[-d, -f],
+			[0, u],
+			[p, u],
+			[u, 0],
+			[u, m]
+		],
+		[
+			[d - u, -f],
+			[u, u],
+			[-p + u, u],
+			[0, 0],
+			[0, m]
+		],
+		[
+			[-d, f],
+			[0, -u],
+			[p, -u],
+			[u, 0],
+			[u, -m]
+		],
+		[
+			[d - u, f],
+			[u, -u],
+			[-p + u, -u],
+			[0, 0],
+			[0, -m]
+		]
+	].forEach((t) => {
+		let [[n, i], [a, o], [l, u], [d, f], [p, m]] = t;
+		e.save(), e.translate(s, c), e.rotate(r.angle), e.beginPath(), e.moveTo(n + a, i + o), e.lineTo(n + l, i + u), e.stroke(), e.beginPath(), e.moveTo(n + d, i + f), e.lineTo(n + p, i + m), e.stroke(), e.restore();
+	}), e.restore();
+}, se = (e, t, n, r) => {
+	t.save();
+	let i = 4 / n.zoom.value, a = e.width + i * 2, o = e.height + i * 2, s = e.x + a / 2, c = e.y + o / 2, l = -(a / 2 + i), u = -(o / 2 + i);
+	t.translate(s + n.scrollX, c + n.scrollY), t.rotate(e.angle), t.lineWidth = 1 / n.zoom.value, t.strokeStyle = r, t.strokeRect(l, u, a, o), t.restore();
+}, ce = ({ app: e, canvas: t, elementsMap: r, visibleElements: i, selectedElements: o, allElementsMap: s, scale: l, appState: p, renderConfig: y, editorInterface: x, animationState: S, deltaTime: C }) => {
+	if (t === null) return {
+		atLeastOneVisibleElement: !1,
+		elementsMap: r
+	};
+	let [w, E] = I(t, l), k = S, F = P({
+		canvas: t,
+		scale: l,
+		normalizedWidth: w,
+		normalizedHeight: E
+	});
+	F.save(), F.scale(p.zoom.value, p.zoom.value);
+	let V;
+	if (i.forEach((e) => {
+		p.selectedLinearElement?.isEditing && p.selectedLinearElement.elementId === e.id && e && (V = e);
+	}), V && X(F, p, V, r), p.selectionElement && !p.isCropping) try {
+		b(p.selectionElement, F, p, y.selectionColor);
+	} catch (e) {
+		console.error(e);
+	}
+	if (p.editingTextElement && h(p.editingTextElement)) {
+		let e = s.get(p.editingTextElement.id);
+		e && !e.autoResize && se(e, F, p, y.selectionColor);
+	}
+	if (k = p.isBindingEnabled && p.suggestedBinding ? {
+		...S,
+		bindingHighlight: K(e, F, p.suggestedBinding, s, p, C, S?.bindingHighlight)
+	} : {
+		...S,
+		bindingHighlight: void 0
+	}, p.frameToHighlight && J(F, p, p.frameToHighlight, r), p.elementsToHighlight && Y(F, p, p.elementsToHighlight), p.activeLockedId) {
+		let e = s.get(p.activeLockedId);
+		Y(F, p, e ? [e] : g(s, p.activeLockedId), {
+			colors: ["#ced4da"],
+			dashed: !0
+		});
+	}
+	let H = o.some((e) => d(e));
+	o.length === 1 && p.selectedLinearElement?.isEditing && p.selectedLinearElement.elementId === o[0].id && X(F, p, o[0], r);
+	let U = p.selectedLinearElement, W = U && T.getElement(U.elementId, s);
+	if (W && (p.selectedLinearElement.isDragging || (U.segmentMidPointHoveredCoords ? z(F, p) : (u(W) ? U.hoverPointIndex === 0 || U.hoverPointIndex === W.points.length - 1 : U.hoverPointIndex >= 0) && B(F, p, r)), c(W) && (Z({
+		arrow: W,
+		elementsMap: s,
+		appState: p,
+		context: F,
+		type: "start"
+	}), Z({
+		arrow: W,
+		elementsMap: s,
+		appState: p,
+		context: F,
+		type: "end"
+	}))), !p.multiElement && !p.newElement && !p.selectedLinearElement?.isEditing) {
+		let e = N(o, p, x), t = o.length === 1 && m(o[0]);
+		t && p.selectedLinearElement?.elementId === o[0].id && !o[0].locked && X(F, p, o[0], r);
+		let n = y.selectionColor || "#000";
+		if (e) {
+			let e = a(o), i = [];
+			for (let a of r.values()) {
+				let o = [], s = y.remoteSelectedElementIds.get(a.id);
+				if (t && u(a) && (a.startBinding || a.endBinding) || (e.has(a.id) && !v(p, a) && o.push(n), s && o.push(...s.map((e) => te(e, p.collaborators.get(e))))), o.length) {
+					let [e, t, n, c, l, u] = O(a, r, !0);
+					i.push({
+						angle: a.angle,
+						x1: e,
+						y1: t,
+						x2: n,
+						y2: c,
+						selectionColors: a.locked ? ["#ced4da"] : o,
+						dashed: !!s || a.locked,
+						cx: l,
+						cy: u,
+						activeEmbeddable: p.activeEmbeddable?.element === a && p.activeEmbeddable.state === "active",
+						padding: a.id === p.croppingElementId || f(a) ? 0 : void 0
+					});
+				}
+			}
+			let s = (e) => {
+				let t = g(r, e), [n, a, o, s] = D(t);
+				i.push({
+					angle: 0,
+					x1: n,
+					x2: o,
+					y1: a,
+					y2: s,
+					selectionColors: t.some((e) => e.locked) ? ["#ced4da"] : ["#000"],
+					dashed: !0,
+					cx: n + (o - n) / 2,
+					cy: a + (s - a) / 2,
+					activeEmbeddable: !1
+				});
+			};
+			for (let e of _(p)) s(e);
+			p.editingGroupId && s(p.editingGroupId), i.forEach((e) => q(F, p, e));
+		}
+		if (F.save(), F.translate(p.scrollX, p.scrollY), o.length === 1) {
+			F.fillStyle = "#fff";
+			let t = j(o[0], p.zoom, r, "mouse", A(x));
+			if (!p.viewModeEnabled && e && !h(p.editingTextElement) && !p.croppingElementId && Q(F, y, p, t, o[0].angle), p.croppingElementId && !p.isCropping) {
+				let e = r.get(p.croppingElementId);
+				e && f(e) && $(F, y, p, e, r);
+			}
+		} else if (o.length > 1 && !p.isRotating && !o.some((e) => e.locked)) {
+			let e = 4 / p.zoom.value;
+			F.fillStyle = "#fff";
+			let [t, i, a, s] = D(o, r), c = F.getLineDash();
+			F.setLineDash([2 / p.zoom.value]);
+			let l = F.lineWidth;
+			F.lineWidth = 1 / p.zoom.value, F.strokeStyle = n, L(F, t - e, i - e, a - t + e * 2, s - i + e * 2, (t + a) / 2, (i + s) / 2, 0), F.lineWidth = l, F.setLineDash(c);
+			let u = M([
+				t,
+				i,
+				a,
+				s,
+				(t + a) / 2,
+				(i + s) / 2
+			], 0, p.zoom, "mouse", H ? {
+				...A(x),
+				rotation: !0
+			} : A(x));
+			o.some((e) => !e.locked) && Q(F, y, p, u, 0);
+		}
+		F.restore();
+	}
+	p.searchMatches?.matches?.forEach?.(({ id: e, focus: t, matchedLines: i }) => {
+		let a = r.get(e);
+		if (a) {
+			let [e, o, , , s, c] = O(a, r, !0);
+			F.save(), p.theme === n.LIGHT ? t ? F.fillStyle = "rgba(255, 124, 0, 0.4)" : F.fillStyle = "rgba(255, 226, 0, 0.4)" : t ? F.fillStyle = "rgba(229, 82, 0, 0.4)" : F.fillStyle = "rgba(99, 52, 0, 0.4)";
+			let l = d(a) ? p.zoom.value : 1;
+			F.translate(p.scrollX, p.scrollY), F.translate(s, c), F.rotate(a.angle), i.forEach((n) => {
+				(n.showOnCanvas || t) && F.fillRect(e + n.offsetX / l - s, o + n.offsetY / l - c, n.width / l, n.height / l);
+			}), F.restore();
+		}
+	}), R(F, p), F.restore(), ne({
+		context: F,
+		renderConfig: y,
+		appState: p,
+		normalizedWidth: w,
+		normalizedHeight: E
+	});
+	let G;
+	return y.renderScrollbars && (G = ie(r, w, E, p), F.save(), F.fillStyle = re, F.strokeStyle = "rgba(255,255,255,0.8)", [G.horizontal, G.vertical].forEach((e) => {
+		e && ee(F, e.x, e.y, e.width, e.height, 6 / 2);
+	}), F.restore()), {
+		scrollBars: G,
+		atLeastOneVisibleElement: i.length > 0,
+		elementsMap: r,
+		animationState: k
+	};
+}, le = (e) => {
+	let t = ce(e);
+	return e.callback(t), t;
+};
+//#endregion
+export { le as renderInteractiveScene };
+/* 独立思考，明辨是非 */

package/draw/core/renderer/renderNewElementScene.d.ts

@@ -0,0 +1,7 @@
+import type { NewElementSceneRenderConfig } from '../scene/types';
+export declare const renderNewElementSceneThrottled: {
+    (config: NewElementSceneRenderConfig): void;
+    flush(): void;
+    cancel(): void;
+};
+export declare const renderNewElementScene: (renderConfig: NewElementSceneRenderConfig, throttle?: boolean) => void;

package/draw/core/renderer/renderNewElementScene.js

@@ -0,0 +1,40 @@
+/* 潘启宝 2026-06-25 08:58:50 星期四 山东省济南市 */
+import { throttleRAF as e } from "../../common/utils.js";
+import "../../common/index.js";
+import { getTargetFrame as t, shouldApplyFrameClip as n } from "../../element/frame.js";
+import { renderElement as r } from "../../element/renderElement.js";
+import { isInvisiblySmallElement as i } from "../../element/sizeHelpers.js";
+import "../../element/index.js";
+import { bootstrapCanvas as a, getNormalizedCanvasDimensions as o } from "./helpers.js";
+import { frameClip as s } from "./staticScene.js";
+//#region components/pc/draw/core/renderer/renderNewElementScene.ts
+var c = ({ canvas: e, rc: c, newElement: l, elementsMap: u, allElementsMap: d, scale: f, appState: p, renderConfig: m }) => {
+	if (e) {
+		let [h, g] = o(e, f), _ = a({
+			canvas: e,
+			scale: f,
+			normalizedWidth: h,
+			normalizedHeight: g
+		});
+		if (_.save(), _.scale(p.zoom.value, p.zoom.value), l && l.type !== "selection") {
+			if (i(l)) return;
+			if ((l.frameId || p.frameToHighlight?.id) && p.frameRendering.enabled && p.frameRendering.clip) {
+				let e = t(l, u, p);
+				e && n(l, e, p, u) && s(e, _, m, p);
+			}
+			r(l, u, d, c, _, m, p);
+		} else _.clearRect(0, 0, h, g);
+		_.restore();
+	}
+}, l = e((e) => {
+	c(e);
+}, { trailing: !0 }), u = (e, t) => {
+	if (t) {
+		l(e);
+		return;
+	}
+	c(e);
+};
+//#endregion
+export { u as renderNewElementScene };
+/* 独立思考，明辨是非 */

package/draw/core/renderer/renderSnaps.d.ts

@@ -0,0 +1,2 @@
+import type { InteractiveCanvasAppState } from '../../interface';
+export declare const renderSnaps: (context: CanvasRenderingContext2D, appState: InteractiveCanvasAppState) => void;

package/draw/core/renderer/renderSnaps.js

@@ -0,0 +1,39 @@
+/* 潘启宝 2026-06-25 08:58:50 星期四 山东省济南市 */
+import { THEME as e } from "../../common/constants.js";
+import { pointFrom as t } from "../../libs/math/point.js";
+import "../../libs/math/index.js";
+import "../../common/index.js";
+//#region components/pc/draw/core/renderer/renderSnaps.ts
+var n = "#ff6b6b", r = "#ff0000", i = 1, a = 2, o = (t, a) => {
+	if (!a.snapLines.length) return;
+	let o = a.theme === e.LIGHT || a.zenModeEnabled ? n : r, l = (a.zenModeEnabled ? i * 1.5 : i) / a.zoom.value;
+	t.save(), t.translate(a.scrollX, a.scrollY);
+	for (let e of a.snapLines) e.type === "pointer" ? (t.lineWidth = l, t.strokeStyle = o, c(e, t, a)) : e.type === "gap" ? (t.lineWidth = l, t.strokeStyle = o, d(e.points[0], e.points[1], e.direction, a, t)) : e.type === "points" && (t.lineWidth = l, t.strokeStyle = o, s(e, t, a));
+	t.restore();
+}, s = (e, t, n) => {
+	if (!n.zenModeEnabled) {
+		let n = e.points[0], r = e.points[e.points.length - 1];
+		u(n, r, t);
+	}
+	for (let r of e.points) l(r, n, t);
+}, c = (e, t, n) => {
+	l(e.points[0], n, t), n.zenModeEnabled || u(e.points[0], e.points[1], t);
+}, l = ([e, t], n, r) => {
+	r.save();
+	let i = (n.zenModeEnabled ? a * 1.5 : a) / n.zoom.value;
+	r.beginPath(), r.moveTo(e - i, t - i), r.lineTo(e + i, t + i), r.moveTo(e + i, t - i), r.lineTo(e - i, t + i), r.stroke(), r.restore();
+}, u = (e, t, n) => {
+	n.beginPath(), n.lineTo(e[0], e[1]), n.lineTo(t[0], t[1]), n.stroke();
+}, d = (e, n, r, i, a) => {
+	let o = 8 / i.zoom.value, s = o / 2, c = o / 4;
+	if (r === "horizontal") {
+		let r = [(e[0] + n[0]) / 2, e[1]];
+		i.zenModeEnabled || u(t(e[0], e[1] - o), t(e[0], e[1] + o), a), u(t(r[0] - c, r[1] - s), t(r[0] - c, r[1] + s), a), u(t(r[0] + c, r[1] - s), t(r[0] + c, r[1] + s), a), i.zenModeEnabled || (u(t(n[0], n[1] - o), t(n[0], n[1] + o), a), u(e, n, a));
+	} else {
+		let r = [e[0], (e[1] + n[1]) / 2];
+		i.zenModeEnabled || u(t(e[0] - o, e[1]), t(e[0] + o, e[1]), a), u(t(r[0] - s, r[1] - c), t(r[0] + s, r[1] - c), a), u(t(r[0] - s, r[1] + c), t(r[0] + s, r[1] + c), a), i.zenModeEnabled || (u(t(n[0] - o, n[1]), t(n[0] + o, n[1]), a), u(e, n, a));
+	}
+};
+//#endregion
+export { o as renderSnaps };
+/* 独立思考，明辨是非 */

package/draw/core/renderer/roundRect.d.ts

@@ -0,0 +1,11 @@
+/**
+ * https://stackoverflow.com/a/3368118
+ * Draws a rounded rectangle using the current state of the canvas.
+ * @param {CanvasRenderingContext2D} context
+ * @param {Number} x The top left x coordinate
+ * @param {Number} y The top left y coordinate
+ * @param {Number} width The width of the rectangle
+ * @param {Number} height The height of the rectangle
+ * @param {Number} radius The corner radius
+ */
+export declare const roundRect: (context: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number, strokeColor?: string) => void;