@flyfish-group/file-viewer3 1.0.26 → 2.0.0

package/dist/components/DrawingViewer.js

@@ -1,295 +0,0 @@
-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 };