@unicom-cloud/ui 0.8.168 → 0.8.170

package/draw/element/mutateElement.js

@@ -0,0 +1,68 @@
+/* 潘启宝 2026-06-25 17:54:57 星期四 山东省济南市 */
+import { getSizeFromPoints as e } from "../common/points.js";
+import { getUpdatedTimestamp as t } from "../common/utils.js";
+import { randomInteger as n } from "../common/random.js";
+import "../common/index.js";
+import { isElbowArrow as r } from "./typeChecks.js";
+import { updateElbowArrowPoints as i } from "./elbowArrow.js";
+import { ShapeCache as a } from "./shape.js";
+//#region components/pc/draw/element/mutateElement.ts
+var o = (o, s, c, l) => {
+	let u = !1, { points: d, fixedSegments: f, fileId: p } = c;
+	r(o) && (Object.keys(c).length === 0 || d !== void 0 || f !== void 0) ? c = {
+		...c,
+		angle: 0,
+		...i({
+			...o,
+			x: c.x || o.x,
+			y: c.y || o.y
+		}, s, c, l)
+	} : d !== void 0 && (c = {
+		...e(d),
+		...c
+	});
+	for (let e in c) {
+		let t = c[e];
+		if (t !== void 0) {
+			if (o[e] === t && (typeof t != "object" || !t || e === "groupIds" || e === "scale")) continue;
+			if (e === "scale") {
+				let n = o[e], r = t;
+				if (n[0] === r[0] && n[1] === r[1]) continue;
+			} else if (e === "points") {
+				let n = o[e], r = t;
+				if (n.length === r.length) {
+					let e = !1, t = n.length;
+					for (; --t;) {
+						let i = n[t], a = r[t];
+						if (i[0] !== a[0] || i[1] !== a[1]) {
+							e = !0;
+							break;
+						}
+					}
+					if (!e) continue;
+				}
+			}
+			o[e] = t, u = !0;
+		}
+	}
+	return u ? ((c.height !== void 0 || c.width !== void 0 || p !== void 0 || d !== void 0) && a.delete(o), o.version = c.version ?? o.version + 1, o.versionNonce = c.versionNonce ?? n(), o.updated = t(), o) : o;
+}, s = (e, r, i = !1) => {
+	let a = !1;
+	for (let t in r) {
+		let n = r[t];
+		if (n !== void 0) {
+			if (e[t] === n && (typeof n != "object" || !n)) continue;
+			a = !0;
+		}
+	}
+	return !a && !i ? e : {
+		...e,
+		...r,
+		version: r.version ?? e.version + 1,
+		versionNonce: r.versionNonce ?? n(),
+		updated: t()
+	};
+}, c = (e, r) => (e.version = (r ?? e.version) + 1, e.versionNonce = n(), e.updated = t(), e);
+//#endregion
+export { c as bumpVersion, o as mutateElement, s as newElementWith };
+/* 独立思考，明辨是非 */

package/draw/element/newElement.d.ts

@@ -0,0 +1,62 @@
+import type { MarkOptional } from '../common/utility-types';
+import type { Arrowhead, DrawArrowElement, DrawElbowArrowElement, DrawEmbeddableElement, DrawFrameElement, DrawFreeDrawElement, DrawGenericElement, DrawIframeElement, DrawImageElement, DrawLineElement, DrawLinearElement, DrawMagicFrameElement, DrawTextContainer, DrawTextElement, ElementsMap, FontFamilyValues, NonDeleted, TextAlign, VerticalAlign } from './types';
+export type ElementConstructorOpts = MarkOptional<Omit<DrawGenericElement, 'id' | 'type' | 'isDeleted' | 'updated'>, 'width' | 'height' | 'angle' | 'groupIds' | 'frameId' | 'index' | 'boundElements' | 'seed' | 'version' | 'versionNonce' | 'link' | 'strokeStyle' | 'fillStyle' | 'strokeColor' | 'backgroundColor' | 'roughness' | 'strokeWidth' | 'roundness' | 'locked' | 'opacity' | 'customData'>;
+export declare const newElement: (opts: {
+    type: DrawGenericElement["type"];
+} & ElementConstructorOpts) => NonDeleted<DrawGenericElement>;
+export declare const newEmbeddableElement: (opts: {
+    type: "embeddable";
+} & ElementConstructorOpts) => NonDeleted<DrawEmbeddableElement>;
+export declare const newIframeElement: (opts: {
+    type: "iframe";
+} & ElementConstructorOpts) => NonDeleted<DrawIframeElement>;
+export declare const newFrameElement: (opts: {
+    name?: string;
+} & ElementConstructorOpts) => NonDeleted<DrawFrameElement>;
+export declare const newMagicFrameElement: (opts: {
+    name?: string;
+} & ElementConstructorOpts) => NonDeleted<DrawMagicFrameElement>;
+export declare const newTextElement: (opts: {
+    text: string;
+    originalText?: string;
+    fontSize?: number;
+    fontFamily?: FontFamilyValues;
+    textAlign?: TextAlign;
+    verticalAlign?: VerticalAlign;
+    containerId?: DrawTextContainer["id"] | null;
+    lineHeight?: DrawTextElement["lineHeight"];
+    autoResize?: DrawTextElement["autoResize"];
+} & ElementConstructorOpts) => NonDeleted<DrawTextElement>;
+export declare const refreshTextDimensions: (textElement: DrawTextElement, container: DrawTextContainer | null, elementsMap: ElementsMap, text?: string) => {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    text: string;
+} | undefined;
+export declare const newFreeDrawElement: (opts: {
+    type: "freedraw";
+    points?: DrawFreeDrawElement["points"];
+    simulatePressure: boolean;
+    pressures?: DrawFreeDrawElement["pressures"];
+} & ElementConstructorOpts) => NonDeleted<DrawFreeDrawElement>;
+export declare const newLinearElement: (opts: {
+    type: DrawLinearElement["type"];
+    points?: DrawLinearElement["points"];
+    polygon?: DrawLineElement["polygon"];
+} & ElementConstructorOpts) => NonDeleted<DrawLinearElement>;
+export declare const newArrowElement: <T extends boolean>(opts: {
+    type: DrawArrowElement["type"];
+    startArrowhead?: Arrowhead | null;
+    endArrowhead?: Arrowhead | null;
+    points?: DrawArrowElement["points"];
+    elbowed?: T;
+    fixedSegments?: DrawElbowArrowElement["fixedSegments"] | null;
+} & ElementConstructorOpts) => T extends true ? NonDeleted<DrawElbowArrowElement> : NonDeleted<DrawArrowElement>;
+export declare const newImageElement: (opts: {
+    type: DrawImageElement["type"];
+    status?: DrawImageElement["status"];
+    fileId?: DrawImageElement["fileId"];
+    scale?: DrawImageElement["scale"];
+    crop?: DrawImageElement["crop"];
+} & ElementConstructorOpts) => NonDeleted<DrawImageElement>;

package/draw/element/newElement.js

@@ -0,0 +1,165 @@
+/* 潘启宝 2026-06-25 17:54:57 星期四 山东省济南市 */
+import { DEFAULT_ELEMENT_PROPS as e, DEFAULT_FONT_FAMILY as t, VERTICAL_ALIGN as n } from "../common/constants.js";
+import { getLineHeight as r } from "../common/font-metadata.js";
+import { getFontString as i, getUpdatedTimestamp as a } from "../common/utils.js";
+import { randomId as o, randomInteger as s } from "../common/random.js";
+import "../common/index.js";
+import { isLineElement as c } from "./typeChecks.js";
+import { measureText as l, normalizeText as u } from "./textMeasurements.js";
+import { wrapText as d } from "./textWrapping.js";
+import { getBoundTextMaxWidth as f } from "./textElement.js";
+import { newElementWith as p } from "./mutateElement.js";
+import { getElementAbsoluteCoords as m, getResizedElementAbsoluteCoords as h } from "./bounds.js";
+//#region components/pc/draw/element/newElement.ts
+var g = (t, { x: n, y: r, strokeColor: i = e.strokeColor, backgroundColor: c = e.backgroundColor, fillStyle: l = e.fillStyle, strokeWidth: u = e.strokeWidth, strokeStyle: d = e.strokeStyle, roughness: f = e.roughness, opacity: p = e.opacity, width: m = 0, height: h = 0, angle: g = 0, groupIds: _ = [], frameId: v = null, index: y = null, roundness: b = null, boundElements: x = null, link: S = null, locked: C = e.locked, ...w }) => ((n < -1e6 || n > 1e6 || r < -1e6 || r > 1e6 || m < -1e6 || m > 1e6 || h < -1e6 || h > 1e6) && console.error("New element size or position is too large", {
+	x: n,
+	y: r,
+	width: m,
+	height: h,
+	points: w.points
+}), {
+	id: w.id || o(),
+	type: t,
+	x: n,
+	y: r,
+	width: m,
+	height: h,
+	angle: g,
+	strokeColor: i,
+	backgroundColor: c,
+	fillStyle: l,
+	strokeWidth: u,
+	strokeStyle: d,
+	roughness: f,
+	opacity: p,
+	groupIds: _,
+	frameId: v,
+	index: y,
+	roundness: b,
+	seed: w.seed ?? s(),
+	version: w.version || 1,
+	versionNonce: w.versionNonce ?? 0,
+	isDeleted: !1,
+	boundElements: x,
+	updated: a(),
+	link: S,
+	locked: C,
+	customData: w.customData
+}), _ = (e) => g(e.type, e), v = (e) => g("embeddable", e), y = (e) => ({ ...g("iframe", e) }), b = (e) => p({
+	...g("frame", e),
+	type: "frame",
+	name: e?.name || null
+}, {}), x = (e) => p({
+	...g("magicframe", e),
+	type: "magicframe",
+	name: e?.name || null
+}, {}), S = (e, t) => ({
+	x: e.textAlign === "center" ? t.width / 2 : e.textAlign === "right" ? t.width : 0,
+	y: e.verticalAlign === "middle" ? t.height / 2 : 0
+}), C = (e) => {
+	let n = e.fontFamily || t, a = e.fontSize || 20, o = e.lineHeight || r(n), s = u(e.text), c = l(s, i({
+		fontFamily: n,
+		fontSize: a
+	}), o), d = e.textAlign || "left", f = e.verticalAlign || "top", m = S({
+		textAlign: d,
+		verticalAlign: f
+	}, c);
+	return p({
+		...g("text", e),
+		text: s,
+		fontSize: a,
+		fontFamily: n,
+		textAlign: d,
+		verticalAlign: f,
+		x: e.x - m.x,
+		y: e.y - m.y,
+		width: c.width,
+		height: c.height,
+		containerId: e.containerId || null,
+		originalText: e.originalText ?? s,
+		autoResize: e.autoResize ?? !0,
+		lineHeight: o
+	}, {});
+}, w = (e, t, r) => {
+	let { width: a, height: o } = l(r, i(e), e.lineHeight);
+	e.autoResize || (a = e.width);
+	let { textAlign: s, verticalAlign: c } = e, u, d;
+	if (s === "center" && c === n.MIDDLE && !e.containerId && e.autoResize) {
+		let t = l(e.text, i(e), e.lineHeight), n = S(e, {
+			width: a - t.width,
+			height: o - t.height
+		});
+		u = e.x - n.x, d = e.y - n.y;
+	} else {
+		let [n, r, i, c] = m(e, t), [l, f, p, g] = h(e, a, o, !1), _ = (n - l) / 2, v = (r - f) / 2, y = (i - p) / 2, b = (c - g) / 2;
+		[u, d] = T({
+			s: !0,
+			e: s === "center" || s === "left",
+			w: s === "center" || s === "right"
+		}, e.x, e.y, e.angle, _, v, y, b);
+	}
+	return {
+		width: a,
+		height: o,
+		x: Number.isFinite(u) ? u : e.x,
+		y: Number.isFinite(d) ? d : e.y
+	};
+}, T = (e, t, n, r, i, a, o, s) => {
+	let c = Math.cos(r), l = Math.sin(r);
+	return e.e && e.w ? t += i + o : e.e ? (t += i * (1 + c), n += i * l, t += o * (1 - c), n += o * -l) : e.w && (t += i * (1 - c), n += i * -l, t += o * (1 + c), n += o * l), e.n && e.s ? n += a + s : e.n ? (t += a * l, n += a * (1 - c), t += s * -l, n += s * (1 + c)) : e.s && (t += a * -l, n += a * (1 + c), t += s * l, n += s * (1 - c)), [t, n];
+}, E = (e, t, n, r = e.text) => {
+	if (e.isDeleted) return;
+	(t || !e.autoResize) && (r = d(r, i(e), t ? f(t, e) : e.width));
+	let a = w(e, n, r);
+	return {
+		text: r,
+		...a
+	};
+}, D = (e) => ({
+	...g(e.type, e),
+	points: e.points || [],
+	pressures: e.pressures || [],
+	simulatePressure: e.simulatePressure
+}), O = (e) => {
+	let t = {
+		...g(e.type, e),
+		points: e.points || [],
+		startBinding: null,
+		endBinding: null,
+		startArrowhead: null,
+		endArrowhead: null
+	};
+	return c(t) ? {
+		...t,
+		polygon: e.polygon ?? !1
+	} : t;
+}, k = (e) => e.elbowed ? {
+	...g(e.type, e),
+	points: e.points || [],
+	startBinding: null,
+	endBinding: null,
+	startArrowhead: e.startArrowhead || null,
+	endArrowhead: e.endArrowhead || null,
+	elbowed: !0,
+	fixedSegments: e.fixedSegments || [],
+	startIsSpecial: !1,
+	endIsSpecial: !1
+} : {
+	...g(e.type, e),
+	points: e.points || [],
+	startBinding: null,
+	endBinding: null,
+	startArrowhead: e.startArrowhead || null,
+	endArrowhead: e.endArrowhead || null,
+	elbowed: !1
+}, A = (e) => ({
+	...g("image", e),
+	strokeColor: "transparent",
+	status: e.status ?? "pending",
+	fileId: e.fileId ?? null,
+	scale: e.scale ?? [1, 1],
+	crop: e.crop ?? null
+});
+//#endregion
+export { k as newArrowElement, _ as newElement, v as newEmbeddableElement, b as newFrameElement, D as newFreeDrawElement, y as newIframeElement, A as newImageElement, O as newLinearElement, x as newMagicFrameElement, C as newTextElement, E as refreshTextDimensions };
+/* 独立思考，明辨是非 */

package/draw/element/positionElementsOnGrid.d.ts

@@ -0,0 +1,2 @@
+import type { DrawElement } from './types';
+export declare const positionElementsOnGrid: <TElement extends DrawElement>(elements: TElement[] | TElement[][], centerX: number, centerY: number, padding?: number) => TElement[];

package/draw/element/positionElementsOnGrid.js

@@ -0,0 +1,47 @@
+/* 潘启宝 2026-06-25 17:54:57 星期四 山东省济南市 */
+import { newElementWith as e } from "./mutateElement.js";
+import { getCommonBounds as t } from "./bounds.js";
+//#region components/pc/draw/element/positionElementsOnGrid.ts
+var n = (n, r, i, a = 50) => {
+	if (!n || n.length === 0) return [];
+	let o = [], s = Array.isArray(n[0]) ? n : n.map((e) => [e]), c = s.length, l = Math.max(1, Math.ceil(Math.sqrt(c))), u = [];
+	for (let e = 0; e < c; e += l) u.push(s.slice(e, e + l));
+	let d = 0, f = u.map((e) => {
+		let n = 0, r = 0, i = e.map((e) => {
+			let [n, r, i, a] = t(e);
+			return {
+				elements: e,
+				bounds: [
+					n,
+					r,
+					i,
+					a
+				],
+				width: i - n,
+				height: a - r
+			};
+		});
+		return i.forEach((e, t) => {
+			n += e.width, t < i.length - 1 && (n += a), e.height > r && (r = e.height);
+		}), d += r, {
+			unitBounds: i,
+			width: n,
+			maxHeight: r
+		};
+	}), p = i - (d + Math.max(0, u.length - 1) * a) / 2;
+	return f.forEach((t) => {
+		let { unitBounds: n, width: i, maxHeight: s } = t, c = r - i / 2;
+		n.forEach((t) => {
+			let [n, r] = t.bounds, i = c - n, s = p - r;
+			t.elements.forEach((t) => {
+				o.push(e(t, {
+					x: t.x + i,
+					y: t.y + s
+				}));
+			}), c += t.width + a;
+		}), p += s + a;
+	}), o;
+};
+//#endregion
+export { n as positionElementsOnGrid };
+/* 独立思考，明辨是非 */

package/draw/element/renderElement.d.ts

@@ -0,0 +1,25 @@
+import type { InteractiveCanvasRenderConfig, RenderableElementsMap, StaticCanvasRenderConfig } from '../core/scene/types';
+import type { AppState, ElementsPendingErasure, InteractiveCanvasAppState, PendingDrawElements, StaticCanvasAppState } from '../interface';
+import type { GlobalPoint } from '../libs/math';
+import type { RoughCanvas } from '../libs/roughjs/canvas';
+import type { DrawElement, DrawFrameLikeElement, DrawFreeDrawElement, DrawImageElement, DrawTextElement, ElementsMap, NonDeletedDrawElement, NonDeletedSceneElementsMap } from './types';
+export declare const getRenderOpacity: (element: DrawElement, containingFrame: DrawFrameLikeElement | null, elementsPendingErasure: ElementsPendingErasure, pendingNodes: Readonly<PendingDrawElements> | null, globalAlpha?: number) => number;
+export interface DrawElementWithCanvas {
+    element: DrawElement | DrawTextElement;
+    canvas: HTMLCanvasElement;
+    theme: AppState['theme'];
+    scale: number;
+    angle: number;
+    zoomValue: AppState['zoom']['value'];
+    canvasOffsetX: number;
+    canvasOffsetY: number;
+    boundTextElementVersion: number | null;
+    imageCrop: DrawImageElement['crop'] | null;
+    containingFrameOpacity: number;
+    boundTextCanvas: HTMLCanvasElement;
+}
+export declare const DEFAULT_LINK_SIZE = 14;
+export declare const elementWithCanvasCache: WeakMap<DrawElement, DrawElementWithCanvas>;
+export declare const renderSelectionElement: (element: NonDeletedDrawElement, context: CanvasRenderingContext2D, appState: InteractiveCanvasAppState, selectionColor: InteractiveCanvasRenderConfig["selectionColor"]) => void;
+export declare const renderElement: (element: NonDeletedDrawElement, elementsMap: RenderableElementsMap, allElementsMap: NonDeletedSceneElementsMap, rc: RoughCanvas, context: CanvasRenderingContext2D, renderConfig: StaticCanvasRenderConfig, appState: StaticCanvasAppState | InteractiveCanvasAppState) => void;
+export declare function getFreedrawOutlineAsSegments(element: DrawFreeDrawElement, points: [number, number][], elementsMap: ElementsMap): import("../libs/math").LineSegment<GlobalPoint>[];

package/draw/element/renderElement.js

@@ -0,0 +1,235 @@
+/* 潘启宝 2026-06-25 17:54:57 星期四 山东省济南市 */
+import { isRightAngleRads as e } from "../libs/math/angle.js";
+import { applyDarkModeFilter as t } from "../common/colors.js";
+import { DARK_THEME_FILTER as n, DEFAULT_REDUCED_GLOBAL_ALPHA as r, FRAME_STYLE as i, MIME_TYPES as a, THEME as o } from "../common/constants.js";
+import { isSafari as s } from "../common/editorInterface.js";
+import { getVerticalOffset as c } from "../common/font-metadata.js";
+import { pointFrom as l, pointRotateRads as u } from "../libs/math/point.js";
+import { lineSegment as d } from "../libs/math/segment.js";
+import "../libs/math/index.js";
+import { distance as f, getFontString as p, invariant as m, isRTL as h } from "../common/utils.js";
+import "../common/index.js";
+import g from "../libs/roughjs/rough.js";
+import { getUncroppedImageElement as _ } from "./cropElement.js";
+import { hasBoundTextElement as v, isArrowElement as y, isFreeDrawElement as b, isImageElement as x, isInitializedImageElement as S, isLinearElement as C, isMagicFrameElement as w, isTextElement as T } from "./typeChecks.js";
+import { getLineHeightInPx as E } from "./textMeasurements.js";
+import { getBoundTextElement as D, getBoundTextMaxHeight as O, getBoundTextMaxWidth as k, getContainerCoords as A, getContainerElement as j } from "./textElement.js";
+import { getContainingFrame as M } from "./frame.js";
+import { ShapeCache as N } from "./shape.js";
+import { getCornerRadius as P } from "./utils.js";
+import { LinearElementEditor as F } from "./linearElementEditor.js";
+import { getElementAbsoluteCoords as I, getElementBounds as L } from "./bounds.js";
+//#region components/pc/draw/element/renderElement.ts
+var R = (e, t) => S(e) && !t.imageCache.has(e.fileId), z = (e) => {
+	switch (e.type) {
+		case "freedraw": return e.strokeWidth * 12;
+		case "text": return e.fontSize / 2;
+		case "arrow": return e.endArrowhead || e.endArrowhead ? 40 : 20;
+		default: return 20;
+	}
+}, B = (e, t, n, r, i = 1) => {
+	let a = (t?.opacity ?? 100) * e.opacity / 1e4 * i;
+	return (n.has(e.id) || r && r.some((t) => t.id === e.id) || t && n.has(t.id)) && (a *= 20 / 100), a;
+}, V = (e, t, n) => {
+	let r = 16777216, i = 32767, a = z(e), [o, s, c, l] = I(e, t), u = C(e) || b(e) ? f(o, c) : e.width, d = C(e) || b(e) ? f(s, l) : e.height, p = u * window.devicePixelRatio + a * 2, m = d * window.devicePixelRatio + a * 2, h = n.value;
+	return (p * h > i || m * h > i) && (h = Math.min(i / p, i / m)), p * m * h * h > r && (h = Math.sqrt(r / (p * m))), p = Math.floor(p * h), m = Math.floor(m * h), {
+		width: p,
+		height: m,
+		scale: h
+	};
+}, H = (e, t, n, r, i) => {
+	let a = document.createElement("canvas"), o = a.getContext("2d"), s = z(e), { width: c, height: l, scale: u } = V(e, t, n);
+	if (!c || !l) return null;
+	a.width = c, a.height = l;
+	let d = -100, p = 0;
+	if (C(e) || b(e)) {
+		let [n, r] = I(e, t);
+		d = e.x > n ? f(e.x, n) * window.devicePixelRatio * u : 0, p = e.y > r ? f(e.y, r) * window.devicePixelRatio * u : 0, o.translate(d, p);
+	}
+	o.save(), o.translate(s * u, s * u), o.scale(window.devicePixelRatio * u, window.devicePixelRatio * u), K(e, g.canvas(a), o, r), o.restore();
+	let m = D(e, t), h = document.createElement("canvas"), _ = h.getContext("2d");
+	if (y(e) && m) {
+		let [n, r, i, o] = I(e, t), c = Math.max(f(n, i), f(r, o));
+		h.width = c * window.devicePixelRatio * u + s * u * 10, h.height = c * window.devicePixelRatio * u + s * u * 10, _.translate(h.width / 2, h.height / 2), _.rotate(e.angle), _.drawImage(a, -a.width / 2, -a.height / 2, a.width, a.height);
+		let [, , , , l, d] = I(m, t);
+		_.rotate(-e.angle);
+		let p = (h.width - a.width) / 2, g = (h.height - a.height) / 2, v = h.width / 2 - (l - n) * window.devicePixelRatio * u - p - s * u, y = h.height / 2 - (d - r) * window.devicePixelRatio * u - g - s * u;
+		_.translate(-v, -y), _.clearRect(-(m.width / 2 + 5) * window.devicePixelRatio * u, -(m.height / 2 + 5) * window.devicePixelRatio * u, (m.width + 10) * window.devicePixelRatio * u, (m.height + 10) * window.devicePixelRatio * u);
+	}
+	return {
+		element: e,
+		canvas: a,
+		theme: i.theme,
+		scale: u,
+		zoomValue: n.value,
+		canvasOffsetX: d,
+		canvasOffsetY: p,
+		boundTextElementVersion: D(e, t)?.version || null,
+		containingFrameOpacity: M(e, t)?.opacity || 100,
+		boundTextCanvas: h,
+		angle: e.angle,
+		imageCrop: x(e) ? e.crop : null
+	};
+}, U = typeof document < "u" ? document.createElement("img") : { src: "" };
+U.src = `data:${a.svg},%3Csvg%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%20data-prefix%3D%22fas%22%20data-icon%3D%22image%22%20class%3D%22svg-inline--fa%20fa-image%20fa-w-16%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22%23888%22%20d%3D%22M464%20448H48c-26.51%200-48-21.49-48-48V112c0-26.51%2021.49-48%2048-48h416c26.51%200%2048%2021.49%2048%2048v288c0%2026.51-21.49%2048-48%2048zM112%20120c-30.928%200-56%2025.072-56%2056s25.072%2056%2056%2056%2056-25.072%2056-56-25.072-56-56-56zM64%20384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971%200L208%20320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971%200L64%20336v48z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E`;
+var W = typeof document < "u" ? document.createElement("img") : { src: "" };
+W.src = `data:${a.svg},%3Csvg%20viewBox%3D%220%200%20668%20668%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%22%3E%3Cpath%20d%3D%22M464%20448H48c-26.51%200-48-21.49-48-48V112c0-26.51%2021.49-48%2048-48h416c26.51%200%2048%2021.49%2048%2048v288c0%2026.51-21.49%2048-48%2048ZM112%20120c-30.928%200-56%2025.072-56%2056s25.072%2056%2056%2056%2056-25.072%2056-56-25.072-56-56-56ZM64%20384h384V272l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971%200L208%20320l-55.515-55.515c-4.686-4.686-12.284-4.686-16.971%200L64%20336v48Z%22%20style%3D%22fill%3A%23888%3Bfill-rule%3Anonzero%22%20transform%3D%22matrix(.81709%200%200%20.81709%20124.825%20145.825)%22%2F%3E%3Cpath%20d%3D%22M256%208C119.034%208%208%20119.033%208%20256c0%20136.967%20111.034%20248%20248%20248s248-111.034%20248-248S392.967%208%20256%208Zm130.108%20117.892c65.448%2065.448%2070%20165.481%2020.677%20235.637L150.47%20105.216c70.204-49.356%20170.226-44.735%20235.638%2020.676ZM125.892%20386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53%20406.784c-70.203%2049.356-170.226%2044.736-235.638-20.676Z%22%20style%3D%22fill%3A%23888%3Bfill-rule%3Anonzero%22%20transform%3D%22matrix(.30366%200%200%20.30366%20506.822%2060.065)%22%2F%3E%3C%2Fsvg%3E`;
+var G = (e, t, n) => {
+	t.fillStyle = n === o.DARK ? "#2E2E2E" : "#E7E7E7", t.fillRect(0, 0, e.width, e.height);
+	let r = Math.min(e.width, e.height), i = Math.min(r, Math.min(r * .4, 100));
+	t.drawImage(e.status === "error" ? W : U, e.width / 2 - i / 2, e.height / 2 - i / 2, i, i);
+}, K = (e, r, i, l) => {
+	switch (e.type) {
+		case "rectangle":
+		case "iframe":
+		case "embeddable":
+		case "diamond":
+		case "ellipse":
+			i.lineJoin = "round", i.lineCap = "round", r.draw(N.generateElementShape(e, l));
+			break;
+		case "arrow":
+		case "line":
+			i.lineJoin = "round", i.lineCap = "round", N.generateElementShape(e, l).forEach((e) => {
+				r.draw(e);
+			});
+			break;
+		case "freedraw": {
+			i.save();
+			let n = N.generateElementShape(e, l);
+			for (let a of n) typeof a == "string" ? (i.fillStyle = l.theme === o.DARK ? t(e.strokeColor) : e.strokeColor, i.fill(new Path2D(a))) : r.draw(a);
+			i.restore();
+			break;
+		}
+		case "image": {
+			i.save();
+			let t = e.fileId === null ? null : l.imageCache.get(e.fileId), r = S(e) ? t?.image : void 0;
+			if (r != null && !(r instanceof Promise)) {
+				e.roundness && i.roundRect && (i.beginPath(), i.roundRect(0, 0, e.width, e.height, P(Math.min(e.width, e.height), e)), i.clip());
+				let { x: c, y: u, width: d, height: f } = e.crop ? e.crop : {
+					x: 0,
+					y: 0,
+					width: r.naturalWidth,
+					height: r.naturalHeight
+				}, p = l.theme === o.DARK && t?.mimeType === a.svg;
+				if (p && s) {
+					let t = window.devicePixelRatio || 1, n = document.createElement("canvas");
+					n.width = e.width * t, n.height = e.height * t;
+					let a = n.getContext("2d");
+					if (a) {
+						a.scale(t, t), a.drawImage(r, c, u, d, f, 0, 0, e.width, e.height);
+						let o = a.getImageData(0, 0, n.width, n.height), s = o.data;
+						for (let e = 0; e < s.length; e += 4) s[e] = 255 - s[e], s[e + 1] = 255 - s[e + 1], s[e + 2] = 255 - s[e + 2];
+						a.putImageData(o, 0, 0), i.drawImage(n, 0, 0, n.width, n.height, 0, 0, e.width, e.height);
+					}
+				} else p && (i.filter = n), i.drawImage(r, c, u, d, f, 0, 0, e.width, e.height);
+			} else G(e, i, l.theme);
+			i.restore();
+			break;
+		}
+		default: if (T(e)) {
+			let n = h(e.text), r = n && !i.canvas.isConnected;
+			r && document.body.appendChild(i.canvas), i.canvas.setAttribute("dir", n ? "rtl" : "ltr"), i.save(), i.font = p(e), i.fillStyle = l.theme === o.DARK ? t(e.strokeColor) : e.strokeColor, i.textAlign = e.textAlign;
+			let a = e.text.replace(/\r\n?/g, "\n").split("\n"), s = e.textAlign === "center" ? e.width / 2 : e.textAlign === "right" ? e.width : 0, u = E(e.fontSize, e.lineHeight), d = c(e.fontFamily, e.fontSize, u);
+			for (let e = 0; e < a.length; e++) i.fillText(a[e], s, e * u + d);
+			i.restore(), r && i.canvas.remove();
+		} else throw Error(`Unimplemented type ${e.type}`);
+	}
+}, q = /* @__PURE__ */ new WeakMap(), J = (e, t, n, r) => {
+	let i = n ? r.zoom : { value: 1 }, a = q.get(e), o = a && a.zoomValue !== i.value && !r?.shouldCacheIgnoreZoom, s = D(e, t), c = s?.version || null, l = x(e) ? e.crop : null, u = M(e, t)?.opacity || 100;
+	if (!a || o || a.theme !== r.theme || a.boundTextElementVersion !== c || a.imageCrop !== l || a.containingFrameOpacity !== u || y(e) && s && e.angle !== a.angle) {
+		let a = H(e, t, i, n, r);
+		return a ? (q.set(e, a), a) : null;
+	}
+	return a;
+}, Y = (e, t, n, r, i) => {
+	let a = e.element, o = z(a), s = e.scale, [c, l, u, d] = I(a, i), f = ((c + u) / 2 + r.scrollX) * window.devicePixelRatio, p = ((l + d) / 2 + r.scrollY) * window.devicePixelRatio;
+	t.save(), t.scale(1 / window.devicePixelRatio, 1 / window.devicePixelRatio);
+	let m = D(a, i);
+	if (y(a) && m) {
+		let n = (e.boundTextCanvas.width - e.canvas.width) / 2, r = (e.boundTextCanvas.height - e.canvas.height) / 2;
+		t.translate(f, p), t.drawImage(e.boundTextCanvas, -(u - c) / 2 * window.devicePixelRatio - n / s - o, -(d - l) / 2 * window.devicePixelRatio - r / s - o, e.boundTextCanvas.width / s, e.boundTextCanvas.height / s);
+	} else {
+		t.translate(f, p), t.rotate(a.angle), "scale" in e.element && !R(a, n) && t.scale(e.element.scale[0], e.element.scale[1]), t.translate(-f, -p), t.drawImage(e.canvas, (c + r.scrollX) * window.devicePixelRatio - o * e.scale / e.scale, (l + r.scrollY) * window.devicePixelRatio - o * e.scale / e.scale, e.canvas.width / e.scale, e.canvas.height / e.scale);
+		let s = !0;
+		if (s = !1, s && v(a)) {
+			let e = D(a, i), n = A(a);
+			t.strokeStyle = "#c92a2a", t.lineWidth = 3, t.strokeRect((n.x + r.scrollX) * window.devicePixelRatio, (n.y + r.scrollY) * window.devicePixelRatio, k(a, e) * window.devicePixelRatio, O(a, e) * window.devicePixelRatio);
+		}
+	}
+	t.restore();
+}, X = (e, t, n, r) => {
+	t.save(), t.translate(e.x + n.scrollX, e.y + n.scrollY), t.fillStyle = "rgba(0, 0, 200, 0.04)";
+	let i = .5 / n.zoom.value;
+	t.fillRect(i, i, e.width, e.height), t.lineWidth = 1 / n.zoom.value, t.strokeStyle = r, t.strokeRect(i, i, e.width, e.height), t.restore();
+}, Z = (n, a, s, c, l, u, d) => {
+	let p = d.openDialog?.name === "elementLinkSelector" && !d.selectedElementIds[n.id] && !d.hoveredElementIds[n.id];
+	switch (l.globalAlpha = B(n, M(n, a), u.elementsPendingErasure, u.pendingFlowchartNodes, p ? r : 1), n.type) {
+		case "magicframe":
+		case "frame":
+			d.frameRendering.enabled && d.frameRendering.outline && (l.save(), l.translate(n.x + d.scrollX, n.y + d.scrollY), l.fillStyle = "rgba(0, 0, 200, 0.04)", l.lineWidth = i.strokeWidth / d.zoom.value, l.strokeStyle = d.theme === o.DARK ? t(i.strokeColor) : i.strokeColor, w(n) && (l.strokeStyle = d.theme === o.LIGHT ? "#7affd7" : t("#1d8264")), i.radius && l.roundRect ? (l.beginPath(), l.roundRect(0, 0, n.width, n.height, i.radius / d.zoom.value), l.stroke(), l.closePath()) : l.strokeRect(0, 0, n.width, n.height), l.restore());
+			break;
+		case "freedraw":
+			if (u.isExporting) {
+				let [e, t, r, i] = I(n, a), o = (e + r) / 2 + d.scrollX, s = (t + i) / 2 + d.scrollY, f = (r - e) / 2 - (n.x - e), p = (i - t) / 2 - (n.y - t);
+				l.save(), l.translate(o, s), l.rotate(n.angle), l.translate(-f, -p), K(n, c, l, u), l.restore();
+			} else {
+				let e = J(n, s, u, d);
+				if (!e) return;
+				Y(e, l, u, d, s);
+			}
+			break;
+		case "rectangle":
+		case "diamond":
+		case "ellipse":
+		case "line":
+		case "arrow":
+		case "image":
+		case "text":
+		case "iframe":
+		case "embeddable":
+			if (u.isExporting) {
+				let [e, t, r, i] = I(n, a), o = (e + r) / 2 + d.scrollX, s = (t + i) / 2 + d.scrollY, p = (r - e) / 2 - (n.x - e), m = (i - t) / 2 - (n.y - t);
+				if (T(n)) {
+					let o = j(n, a);
+					if (y(o)) {
+						let s = F.getBoundTextElementPosition(o, n, a);
+						p = (r - e) / 2 - (s.x - e), m = (i - t) / 2 - (s.y - t);
+					}
+				}
+				l.save(), l.translate(o, s);
+				let h = D(n, a);
+				if (y(n) && h) {
+					let o = document.createElement("canvas"), s = o.getContext("2d"), c = Math.max(f(e, r), f(t, i)), _ = z(n);
+					o.width = c * d.exportScale + _ * 10 * d.exportScale, o.height = c * d.exportScale + _ * 10 * d.exportScale, s.translate(o.width / 2, o.height / 2), s.scale(d.exportScale, d.exportScale), p = n.width / 2 - (n.x - e), m = n.height / 2 - (n.y - t), s.rotate(n.angle);
+					let v = g.canvas(o);
+					s.translate(-p, -m), K(n, v, s, u), s.translate(p, m), s.rotate(-n.angle);
+					let [, , , , y, b] = I(h, a), x = (e + r) / 2 - y, S = (t + i) / 2 - b;
+					s.translate(-x, -S), s.clearRect(-h.width / 2, -h.height / 2, h.width, h.height), l.scale(1 / d.exportScale, 1 / d.exportScale), l.drawImage(o, -o.width / 2, -o.height / 2, o.width, o.height);
+				} else l.rotate(n.angle), n.type === "image" && l.scale(n.scale[0], n.scale[1]), l.translate(-p, -m), K(n, c, l, u);
+				l.restore();
+			} else {
+				let t = J(n, s, u, d);
+				if (!t) return;
+				let r = l.imageSmoothingEnabled;
+				if (!d?.shouldCacheIgnoreZoom && (!n.angle || e(n.angle)) && (l.imageSmoothingEnabled = !1), n.id === d.croppingElementId && x(t.element) && t.element.crop !== null) {
+					l.save(), l.globalAlpha = .1;
+					let e = H(_(t.element, a), s, d.zoom, u, d);
+					e && Y(e, l, u, d, s), l.restore();
+				}
+				Y(t, l, u, d, s), l.imageSmoothingEnabled = r;
+			}
+			break;
+		default: throw Error(`Unimplemented type ${n.type}`);
+	}
+	l.globalAlpha = 1;
+};
+function Q(e, t, n) {
+	let r = L({
+		...e,
+		angle: 0
+	}, n), i = l((r[0] + r[2]) / 2, (r[1] + r[3]) / 2);
+	return m(t.length >= 2, "Freepath outline must have at least 2 points"), t.slice(2).reduce((t, n) => (t.push(d(t[t.length - 1][1], u(l(n[0] + e.x, n[1] + e.y), i, e.angle))), t), [d(u(l(t[0][0] + e.x, t[0][1] + e.y), i, e.angle), u(l(t[1][0] + e.x, t[1][1] + e.y), i, e.angle))]);
+}
+//#endregion
+export { q as elementWithCanvasCache, Q as getFreedrawOutlineAsSegments, B as getRenderOpacity, Z as renderElement, X as renderSelectionElement };
+/* 独立思考，明辨是非 */

package/draw/element/resizeElements.d.ts

@@ -0,0 +1,32 @@
+import type { PointerDownState } from '../interface';
+import type { LocalPoint } from '../libs/math';
+import type { Scene } from './Scene';
+import type { BoundingBox } from './bounds';
+import type { MaybeTransformHandleType, TransformHandleDirection } from './transformHandles';
+import type { DrawElement, DrawLinearElement, DrawTextElement, ElementsMap, NonDeleted, NonDeletedDrawElement } from './types';
+export declare const transformElements: (originalElements: PointerDownState["originalElements"], transformHandleType: MaybeTransformHandleType, selectedElements: readonly NonDeletedDrawElement[], scene: Scene, shouldRotateWithDiscreteAngle: boolean, shouldResizeFromCenter: boolean, shouldMaintainAspectRatio: boolean, pointerX: number, pointerY: number, centerX: number, centerY: number) => boolean;
+export declare const rescalePointsInElement: (element: NonDeletedDrawElement, width: number, height: number, normalizePoints: boolean) => {
+    points: LocalPoint[];
+} | {
+    points?: undefined;
+};
+export declare const measureFontSizeFromWidth: (element: NonDeleted<DrawTextElement>, elementsMap: ElementsMap, nextWidth: number) => {
+    size: number;
+} | null;
+export declare const resizeSingleTextElement: (origElement: NonDeleted<DrawTextElement>, element: NonDeleted<DrawTextElement>, scene: Scene, transformHandleType: TransformHandleDirection, shouldResizeFromCenter: boolean, nextWidth: number, nextHeight: number) => void;
+export declare const getResizeOffsetXY: (transformHandleType: MaybeTransformHandleType, selectedElements: NonDeletedDrawElement[], elementsMap: ElementsMap, x: number, y: number) => [number, number];
+export declare const getResizeArrowDirection: (transformHandleType: MaybeTransformHandleType, element: NonDeleted<DrawLinearElement>) => "origin" | "end";
+export declare const resizeSingleElement: (nextWidth: number, nextHeight: number, latestElement: DrawElement, origElement: DrawElement, originalElementsMap: ElementsMap, scene: Scene, handleDirection: TransformHandleDirection, { shouldInformMutation, shouldMaintainAspectRatio, shouldResizeFromCenter, }?: {
+    shouldMaintainAspectRatio?: boolean;
+    shouldResizeFromCenter?: boolean;
+    shouldInformMutation?: boolean;
+}) => void;
+export declare const resizeMultipleElements: (selectedElements: readonly NonDeletedDrawElement[], elementsMap: ElementsMap, handleDirection: TransformHandleDirection, scene: Scene, originalElementsMap: ElementsMap, { shouldMaintainAspectRatio, shouldResizeFromCenter, flipByX, flipByY, nextHeight, nextWidth, originalBoundingBox, }?: {
+    nextWidth?: number;
+    nextHeight?: number;
+    shouldMaintainAspectRatio?: boolean;
+    shouldResizeFromCenter?: boolean;
+    flipByX?: boolean;
+    flipByY?: boolean;
+    originalBoundingBox?: BoundingBox;
+}) => void;