file-viewer3 1.0.8 → 1.0.26

package/dist/components/DrawingViewer.js

@@ -0,0 +1,295 @@
+import { n as e, t } from "./objectSpread2.js";
+import { n, t as r } from "./asyncToGenerator.js";
+import { r as i } from "./util.js";
+import { n as a, r as o, t as s } from "./viewerZoom.js";
+import { t as c } from "./_plugin-vue_export-helper.js";
+import { computed as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, defineComponent as p, nextTick as m, normalizeStyle as h, onBeforeUnmount as g, onMounted as _, openBlock as v, ref as y, toDisplayString as b, watch as x } from "vue";
+n(), e();
+var S = { class: "drawing-toolbar" }, C = { class: "drawing-title" }, w = { class: "drawing-actions" }, T = { class: "drawing-stage" }, E = {
+	key: 0,
+	class: "drawing-state"
+}, ee = {
+	key: 1,
+	class: "drawing-state error"
+}, te = { class: "drawing-scroll" }, D = "https://viewer.diagrams.net/js/viewer-static.min.js", O = "http://www.w3.org/2000/svg", ne = 6e3, k = /*#__PURE__*/ c(/* @__PURE__ */ p({
+	__name: "DrawingViewer",
+	props: {
+		data: {},
+		type: {}
+	},
+	setup(e) {
+		let n = e, c = null, p = y("loading"), k = y(""), A = y(null), j = y(null), M = y(1), N = s(), P = l(() => n.type.toLowerCase()), F = l(() => P.value === "excalidraw"), I = l(() => P.value === "dio" ? "DRAWIO" : P.value.toUpperCase()), L = l(() => F.value ? {
+			transform: `scale(${M.value})`,
+			transformOrigin: "top center"
+		} : { zoom: M.value }), R = (e) => Math.min(3, Math.max(.5, Number(e.toFixed(2)))), z = () => {
+			M.value = R(M.value + .15);
+		}, B = () => {
+			M.value = R(M.value - .15);
+		}, V = () => {
+			M.value = 1;
+		}, H = () => ({
+			scale: M.value,
+			label: `${Math.round(M.value * 100)}%`,
+			canZoomIn: M.value < 3,
+			canZoomOut: M.value > .5,
+			canReset: M.value !== 1,
+			minScale: .5,
+			maxScale: 3
+		}), U = () => {
+			let e = A.value;
+			e && a(e, {
+				zoomIn: () => (z(), H()),
+				zoomOut: () => (B(), H()),
+				resetZoom: () => (V(), H()),
+				setZoom: (e) => (M.value = R(e), H()),
+				getState: H,
+				subscribe: N.subscribe
+			});
+		}, W = () => {
+			let e = j.value;
+			if (e) for (delete e.dataset.drawingRendered; e.firstChild;) e.removeChild(e.firstChild);
+		}, G = () => window.GraphViewer ? Promise.resolve() : (c || (c = new Promise((e, t) => {
+			let n = document.querySelector(`script[src="${D}"]`);
+			if (n) {
+				n.addEventListener("load", () => e(), { once: !0 }), n.addEventListener("error", () => t(/* @__PURE__ */ Error("diagrams.net viewer 加载失败")), { once: !0 });
+				return;
+			}
+			let r = document.createElement("script");
+			r.src = D, r.async = !0, r.onload = () => e(), r.onerror = () => t(/* @__PURE__ */ Error("diagrams.net viewer 加载失败")), document.head.appendChild(r);
+		})), c), K = (e, t = 0) => {
+			let n = Number(e);
+			return Number.isFinite(n) ? n : t;
+		}, q = (e) => !e || e === "transparent" || e === "rgba(0, 0, 0, 0)", J = (e) => document.createElementNS(O, e), re = function() {
+			var e = r(function* (e, t, n) {
+				let r;
+				try {
+					return yield Promise.race([e, new Promise((e, i) => {
+						r = setTimeout(() => i(Error(n)), t);
+					})]);
+				} finally {
+					r && clearTimeout(r);
+				}
+			});
+			return function(t, n, r) {
+				return e.apply(this, arguments);
+			};
+		}(), Y = (e, t) => e.dataset.drawingRendered ? !1 : (e.dataset.drawingRendered = t, !0), X = (e, t, n) => {
+			Y(e, n) && (t.classList.add("drawing-svg"), e.appendChild(t));
+		}, ie = () => {
+			let e = console.error, t = (...t) => {
+				t.map((e) => String(e)).join(" ").includes("Failed to use workers for subsetting") || e(...t);
+			};
+			return console.error = t, () => {
+				console.error === t && (console.error = e);
+			};
+		}, Z = (e) => Array.isArray(e.points) && e.points.length ? e.points.map((t) => [K(e.x) + K(t[0]), K(e.y) + K(t[1])]) : [[K(e.x), K(e.y)], [K(e.x) + K(e.width), K(e.y) + K(e.height)]], ae = (e) => {
+			let t = Z(e), n = t.map((e) => e[0]), r = t.map((e) => e[1]);
+			return Array.isArray(e.points) || (n.push(K(e.x) + K(e.width)), r.push(K(e.y) + K(e.height))), {
+				minX: Math.min(...n),
+				minY: Math.min(...r),
+				maxX: Math.max(...n),
+				maxY: Math.max(...r)
+			};
+		}, oe = (e) => {
+			let t = e.reduce((e, t) => {
+				let n = ae(t);
+				return {
+					minX: Math.min(e.minX, n.minX),
+					minY: Math.min(e.minY, n.minY),
+					maxX: Math.max(e.maxX, n.maxX),
+					maxY: Math.max(e.maxY, n.maxY)
+				};
+			}, {
+				minX: Infinity,
+				minY: Infinity,
+				maxX: -Infinity,
+				maxY: -Infinity
+			});
+			return Number.isFinite(t.minX) ? t : {
+				minX: 0,
+				minY: 0,
+				maxX: 800,
+				maxY: 480
+			};
+		}, se = (e) => {
+			let t = q(e.backgroundColor) ? void 0 : e.backgroundColor;
+			return {
+				stroke: e.strokeColor || "#1e1e1e",
+				strokeWidth: Math.max(1, K(e.strokeWidth, 1)),
+				roughness: Math.max(0, K(e.roughness, 1)),
+				fill: t,
+				fillStyle: e.fillStyle || "hachure",
+				seed: K(e.seed, 1),
+				strokeLineDash: e.strokeStyle === "dashed" ? [10, 8] : e.strokeStyle === "dotted" ? [2, 6] : void 0
+			};
+		}, Q = (e, t, n) => {
+			let r = K(t.opacity, 100) / 100;
+			r < 1 && n.setAttribute("opacity", String(r)), e.appendChild(n);
+		}, ce = (e) => {
+			let t = J("g"), n = K(e.angle);
+			if (n) {
+				let r = K(e.x) + K(e.width) / 2, i = K(e.y) + K(e.height) / 2;
+				t.setAttribute("transform", `rotate(${n * 180 / Math.PI} ${r} ${i})`);
+			}
+			return t;
+		}, le = (e, t) => {
+			let n = String(t.text || "");
+			if (!n.trim()) return;
+			let r = J("text"), i = Math.max(8, K(t.fontSize, 20)), a = i * 1.25, o = n.split(/\r?\n/), s = {
+				1: "Virgil, Segoe Print, Comic Sans MS, sans-serif",
+				2: "Helvetica, Arial, sans-serif",
+				3: "Cascadia Mono, Menlo, Consolas, monospace"
+			};
+			r.setAttribute("x", String(K(t.x))), r.setAttribute("y", String(K(t.y) + i)), r.setAttribute("fill", t.strokeColor || "#1e1e1e"), r.setAttribute("font-size", String(i)), r.setAttribute("font-family", s[K(t.fontFamily, 1)] || s[1]), r.setAttribute("font-weight", String(t.fontWeight || 400)), r.setAttribute("text-anchor", t.textAlign === "center" ? "middle" : t.textAlign === "right" ? "end" : "start"), t.textAlign === "center" ? r.setAttribute("x", String(K(t.x) + K(t.width) / 2)) : t.textAlign === "right" && r.setAttribute("x", String(K(t.x) + K(t.width))), o.forEach((e, n) => {
+				let i = J("tspan");
+				i.setAttribute("x", r.getAttribute("x") || String(K(t.x))), i.setAttribute("dy", n === 0 ? "0" : String(a)), i.textContent = e, r.appendChild(i);
+			}), Q(e, t, r);
+		}, ue = (e, t, n) => {
+			if (!(t.endArrowhead || t.startArrowhead) || n.length < 2) return;
+			let r = n[n.length - 1], i = n[n.length - 2], a = Math.atan2(r[1] - i[1], r[0] - i[0]), o = Math.max(10, K(t.strokeWidth, 1) * 7), s = [r[0] - o * Math.cos(a - Math.PI / 7), r[1] - o * Math.sin(a - Math.PI / 7)], c = [r[0] - o * Math.cos(a + Math.PI / 7), r[1] - o * Math.sin(a + Math.PI / 7)], l = J("polygon");
+			l.setAttribute("points", `${r.join(",")} ${s.join(",")} ${c.join(",")}`), l.setAttribute("fill", t.strokeColor || "#1e1e1e"), l.setAttribute("stroke", t.strokeColor || "#1e1e1e"), Q(e, t, l);
+		}, $ = function() {
+			var e = r(function* (e, t, n) {
+				var r;
+				let { default: i } = yield import("./rough.esm.js").then((e) => e.n), a = oe(t), o = Math.max(320, a.maxX - a.minX + 160), s = Math.max(220, a.maxY - a.minY + 160), c = J("svg"), l = J("g"), u = i.svg(c);
+				c.setAttribute("viewBox", `${a.minX - 80} ${a.minY - 80} ${o} ${s}`), c.setAttribute("width", String(o)), c.setAttribute("height", String(s)), c.setAttribute("role", "img"), c.setAttribute("aria-label", "Excalidraw rough.js preview");
+				let d = J("rect");
+				d.setAttribute("x", String(a.minX - 80)), d.setAttribute("y", String(a.minY - 80)), d.setAttribute("width", String(o)), d.setAttribute("height", String(s)), d.setAttribute("fill", ((r = e.appState) == null ? void 0 : r.viewBackgroundColor) || "#ffffff"), c.appendChild(d), c.appendChild(l), t.forEach((e) => {
+					let t = ce(e), n = se(e), r = K(e.x), i = K(e.y), a = K(e.width), o = K(e.height);
+					if (e.type === "text") le(t, e);
+					else if (e.type === "rectangle") Q(t, e, u.rectangle(r, i, a, o, n));
+					else if (e.type === "diamond") Q(t, e, u.polygon([
+						[r + a / 2, i],
+						[r + a, i + o / 2],
+						[r + a / 2, i + o],
+						[r, i + o / 2]
+					], n));
+					else if (e.type === "ellipse") Q(t, e, u.ellipse(r + a / 2, i + o / 2, Math.abs(a), Math.abs(o), n));
+					else if (e.type === "line" || e.type === "arrow" || e.type === "freedraw") {
+						let r = Z(e);
+						Q(t, e, u.linearPath(r, n)), e.type === "arrow" && ue(t, e, r);
+					}
+					t.childNodes.length && l.appendChild(t);
+				}), X(n, c, "rough");
+			});
+			return function(t, n, r) {
+				return e.apply(this, arguments);
+			};
+		}(), de = function() {
+			var e = r(function* (e, n, r) {
+				let i = ie(), a = setTimeout(i, 7e3), { exportToSvg: o, restore: s } = yield import("./prod.js");
+				try {
+					let i = s({
+						elements: n,
+						appState: e.appState || {},
+						files: e.files || {}
+					}, null, null, {
+						repairBindings: !0,
+						refreshDimensions: !0
+					});
+					X(r, yield o({
+						elements: i.elements.filter((e) => !e.isDeleted),
+						appState: t(t({}, i.appState), {}, {
+							exportBackground: !0,
+							viewBackgroundColor: i.appState.viewBackgroundColor || "#ffffff"
+						}),
+						files: i.files || {}
+					}), "official");
+				} finally {
+					clearTimeout(a), i();
+				}
+			});
+			return function(t, n, r) {
+				return e.apply(this, arguments);
+			};
+		}(), fe = function() {
+			var e = r(function* (e) {
+				let t = j.value;
+				if (!t) return;
+				let n = JSON.parse(e), r = Array.isArray(n.elements) ? n.elements.filter((e) => !e.isDeleted) : [];
+				if (!r.length) throw Error("Excalidraw 文件中没有可预览图元");
+				try {
+					yield re(de(n, r, t), ne, "Excalidraw 官方导出超时，自动切换 rough.js 兼容渲染");
+				} catch (e) {
+					console.warn(e), yield $(n, r, t);
+				}
+			});
+			return function(t) {
+				return e.apply(this, arguments);
+			};
+		}(), pe = function() {
+			var e = r(function* (e) {
+				let t = j.value;
+				if (!t) return;
+				yield G(), yield m();
+				let n = document.createElement("div");
+				if (n.className = "mxgraph drawing-mxgraph", n.setAttribute("data-mxgraph", JSON.stringify({
+					xml: e,
+					toolbar: "zoom layers lightbox",
+					nav: !0,
+					resize: !0,
+					"auto-fit": !0,
+					"auto-crop": !0,
+					"auto-origin": !0,
+					"allow-zoom-in": !0,
+					"allow-zoom-out": !0,
+					border: 16,
+					highlight: "#0f766e"
+				})), t.appendChild(n), !window.GraphViewer) throw Error("diagrams.net viewer 未正确初始化");
+				window.GraphViewer.createViewerForElement(n);
+			});
+			return function(t) {
+				return e.apply(this, arguments);
+			};
+		}(), me = function() {
+			var e = r(function* () {
+				p.value = "loading", k.value = "", M.value = 1, W();
+				try {
+					let e = yield i(n.data);
+					F.value ? yield fe(e) : yield pe(e), p.value = "ready";
+				} catch (e) {
+					console.error(e), k.value = e instanceof Error ? e.message : String(e), p.value = "error";
+				}
+			});
+			return function() {
+				return e.apply(this, arguments);
+			};
+		}();
+		return x(M, () => {
+			N.emit();
+		}), _(() => {
+			U(), me();
+		}), g(() => {
+			o(A.value);
+		}), (e, t) => (v(), d("div", {
+			ref_key: "root",
+			ref: A,
+			class: "drawing-viewer",
+			"data-viewer-zoom-provider": "drawing"
+		}, [f("div", S, [f("div", C, [f("span", null, b(I.value), 1), f("strong", null, b(F.value ? "Excalidraw 官方 SVG 预览" : "diagrams.net 官方 Viewer 预览"), 1)]), f("div", w, [
+			f("button", {
+				type: "button",
+				title: "缩小",
+				onClick: B
+			}, "-"),
+			f("span", null, b(Math.round(M.value * 100)) + "%", 1),
+			f("button", {
+				type: "button",
+				title: "放大",
+				onClick: z
+			}, "+"),
+			f("button", {
+				type: "button",
+				title: "适合宽度",
+				onClick: V
+			}, "适合")
+		])]), f("div", T, [p.value === "loading" ? (v(), d("div", E, "正在加载官方绘图预览器...")) : p.value === "error" ? (v(), d("div", ee, b(k.value), 1)) : u("", !0), f("div", te, [f("div", {
+			ref_key: "stage",
+			ref: j,
+			class: "drawing-canvas",
+			style: h(L.value)
+		}, null, 4)])])], 512));
+	}
+}), [["__scopeId", "data-v-baefd833"]]);
+//#endregion
+export { k as default };