@macrowing/filepilot-parser-drawio 0.1.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.cjs +112 -2
  2. package/dist/index.js +112 -2
  3. package/drawioviewer/index.html +13 -6
  4. package/package.json +2 -2
package/dist/index.cjs CHANGED
@@ -45,6 +45,112 @@ var toViewerFileUrl = (fileUrl) => {
45
45
  if (typeof window === "undefined" || /^(?:https?:|data:|blob:)/i.test(fileUrl)) return fileUrl;
46
46
  return new URL(fileUrl, window.location.href).href;
47
47
  };
48
+ var loadingKeyframes = `
49
+ @keyframes fp-drawio-loading-spin {
50
+ to {
51
+ transform: rotate(360deg);
52
+ }
53
+ }
54
+
55
+ @keyframes fp-drawio-loading-line-pulse {
56
+ 0%,
57
+ 100% {
58
+ opacity: 0.45;
59
+ transform: scaleX(0.86);
60
+ transform-origin: left center;
61
+ }
62
+
63
+ 50% {
64
+ opacity: 1;
65
+ transform: scaleX(1);
66
+ }
67
+ }
68
+ `;
69
+ var DrawioLoadingState = ({ stage = "Draw.io \u89E3\u6790\u5668\u52A0\u8F7D\u4E2D", message = "\u6B63\u5728\u51C6\u5907\u6587\u4EF6\u9884\u89C8\u80FD\u529B", progress }) => {
70
+ const resolvedProgress = typeof progress === "number" && Number.isFinite(progress) ? Math.max(0, Math.min(1, progress)) : void 0;
71
+ const progressWidth = `${Math.round((resolvedProgress ?? 0.42) * 100)}%`;
72
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
73
+ display: "grid",
74
+ placeItems: "center",
75
+ alignContent: "center",
76
+ gap: 18,
77
+ width: "100%",
78
+ minHeight: "100%",
79
+ padding: 24,
80
+ color: "#1f2937",
81
+ textAlign: "center",
82
+ background: "radial-gradient(circle at center, rgba(56, 103, 214, 0.12), transparent 42%), #f8fafc"
83
+ }, children: [
84
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: loadingKeyframes }),
85
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "relative", display: "grid", placeItems: "center", width: 112, height: 112 }, children: [
86
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
87
+ position: "absolute",
88
+ inset: 0,
89
+ border: "3px solid rgba(56, 103, 214, 0.14)",
90
+ borderTopColor: "#3867d6",
91
+ borderRightColor: "#7298f0",
92
+ borderRadius: 999,
93
+ boxShadow: "0 0 0 8px rgba(255, 255, 255, 0.58), 0 18px 42px rgba(56, 103, 214, 0.16)",
94
+ animation: "fp-drawio-loading-spin 0.92s linear infinite"
95
+ } }),
96
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
97
+ position: "relative",
98
+ display: "block",
99
+ width: 56,
100
+ height: 66,
101
+ background: "#ffffff",
102
+ border: "1px solid rgba(56, 103, 214, 0.18)",
103
+ borderRadius: 8,
104
+ boxShadow: "0 14px 28px rgba(31, 41, 55, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.68)"
105
+ }, children: [
106
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
107
+ position: "absolute",
108
+ left: -8,
109
+ bottom: 8,
110
+ width: 45,
111
+ height: 54,
112
+ background: "rgba(56, 103, 214, 0.08)",
113
+ border: "1px solid rgba(56, 103, 214, 0.12)",
114
+ borderRadius: 8,
115
+ transform: "rotate(-5deg)",
116
+ zIndex: -1
117
+ } }),
118
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
119
+ position: "absolute",
120
+ top: -1,
121
+ right: -1,
122
+ width: 18,
123
+ height: 18,
124
+ background: "linear-gradient(135deg, rgba(56, 103, 214, 0.18) 0 50%, transparent 50% 100%)",
125
+ borderTopRightRadius: 8
126
+ } }),
127
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { position: "absolute", top: 18, left: 12, right: 10, display: "grid", gap: 6 }, children: [
128
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { display: "block", height: 5, background: "rgba(56, 103, 214, 0.16)", borderRadius: 999, animation: "fp-drawio-loading-line-pulse 1.25s ease-in-out infinite" } }),
129
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { display: "block", height: 5, width: "78%", background: "rgba(56, 103, 214, 0.16)", borderRadius: 999, animation: "fp-drawio-loading-line-pulse 1.25s ease-in-out infinite", animationDelay: "0.12s" } }),
130
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { display: "block", height: 5, width: "56%", background: "rgba(56, 103, 214, 0.16)", borderRadius: 999, animation: "fp-drawio-loading-line-pulse 1.25s ease-in-out infinite", animationDelay: "0.24s" } })
131
+ ] })
132
+ ] })
133
+ ] }),
134
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "grid", gap: 6, maxWidth: "min(360px, 100%)" }, children: [
135
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { style: { color: "#1f2937", fontSize: 16 }, children: "\u6B63\u5728\u52A0\u8F7D\u6587\u6863..." }),
136
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#526173", fontSize: 13, lineHeight: 1.6 }, children: stage }),
137
+ message ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#526173", fontSize: 13, lineHeight: 1.6 }, children: message }) : null
138
+ ] }),
139
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "grid", gap: 7, width: "min(320px, 76vw)", marginTop: 8 }, children: [
140
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { position: "relative", height: 7, overflow: "hidden", background: "rgba(56, 103, 214, 0.1)", borderRadius: 999 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: {
141
+ position: "absolute",
142
+ inset: "0 auto 0 0",
143
+ width: progressWidth,
144
+ minWidth: 8,
145
+ background: "linear-gradient(90deg, #3867d6, #7298f0)",
146
+ borderRadius: "inherit",
147
+ transition: "width 0.16s ease",
148
+ animation: resolvedProgress == null ? "fp-drawio-loading-line-pulse 1.05s ease-in-out infinite" : void 0
149
+ } }) }),
150
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#526173", fontSize: 12 }, children: resolvedProgress == null ? "\u51C6\u5907\u4E2D" : `${Math.round(resolvedProgress * 100)}%` })
151
+ ] })
152
+ ] });
153
+ };
48
154
  var createViewerSrc = (viewerUrl, fileUrl, locale, customParams) => {
49
155
  const params = new URLSearchParams({
50
156
  lightbox: "1",
@@ -64,6 +170,7 @@ var createViewerSrc = (viewerUrl, fileUrl, locale, customParams) => {
64
170
  function DrawioParser({ file, className, style, options, locale }) {
65
171
  const [objectUrl, setObjectUrl] = (0, import_react.useState)();
66
172
  const [error, setError] = (0, import_react.useState)();
173
+ const [viewerReady, setViewerReady] = (0, import_react.useState)(false);
67
174
  const viewerUrl = options?.viewerUrl ?? DEFAULT_DRAWIO_VIEWER_URL;
68
175
  const source = file.source;
69
176
  const directUrl = typeof source === "string" && isSourceUrl(source) ? source : void 0;
@@ -71,6 +178,7 @@ function DrawioParser({ file, className, style, options, locale }) {
71
178
  let active = true;
72
179
  let nextObjectUrl;
73
180
  setError(void 0);
181
+ setViewerReady(false);
74
182
  setObjectUrl(void 0);
75
183
  if (directUrl) return;
76
184
  readSourceText(source, options?.fetchOptions).then((text) => {
@@ -90,15 +198,17 @@ function DrawioParser({ file, className, style, options, locale }) {
90
198
  () => fileUrl ? createViewerSrc(viewerUrl, fileUrl, locale, options?.urlParams) : void 0,
91
199
  [fileUrl, viewerUrl, locale, options?.urlParams]
92
200
  );
93
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, style: { height: "100%", minHeight: options?.minHeight ?? 480, ...style }, children: [
201
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, style: { position: "relative", height: "100%", minHeight: options?.minHeight ?? 480, overflow: "hidden", ...style }, children: [
94
202
  error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: error instanceof Error ? error.message : "Failed to load Draw.io file." }) : null,
95
203
  viewerSrc ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
96
204
  "iframe",
97
205
  {
98
206
  title: options?.iframeTitle ?? file.name ?? "Draw.io viewer",
99
207
  src: viewerSrc,
208
+ onLoad: () => setViewerReady(true),
100
209
  style: { width: "100%", height: "100%", minHeight: options?.minHeight ?? 480, border: 0 }
101
210
  }
102
- ) : null
211
+ ) : null,
212
+ !error && !viewerReady ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { position: "absolute", inset: 0, zIndex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawioLoadingState, {}) }) : null
103
213
  ] });
104
214
  }
package/dist/index.js CHANGED
@@ -21,6 +21,112 @@ var toViewerFileUrl = (fileUrl) => {
21
21
  if (typeof window === "undefined" || /^(?:https?:|data:|blob:)/i.test(fileUrl)) return fileUrl;
22
22
  return new URL(fileUrl, window.location.href).href;
23
23
  };
24
+ var loadingKeyframes = `
25
+ @keyframes fp-drawio-loading-spin {
26
+ to {
27
+ transform: rotate(360deg);
28
+ }
29
+ }
30
+
31
+ @keyframes fp-drawio-loading-line-pulse {
32
+ 0%,
33
+ 100% {
34
+ opacity: 0.45;
35
+ transform: scaleX(0.86);
36
+ transform-origin: left center;
37
+ }
38
+
39
+ 50% {
40
+ opacity: 1;
41
+ transform: scaleX(1);
42
+ }
43
+ }
44
+ `;
45
+ var DrawioLoadingState = ({ stage = "Draw.io \u89E3\u6790\u5668\u52A0\u8F7D\u4E2D", message = "\u6B63\u5728\u51C6\u5907\u6587\u4EF6\u9884\u89C8\u80FD\u529B", progress }) => {
46
+ const resolvedProgress = typeof progress === "number" && Number.isFinite(progress) ? Math.max(0, Math.min(1, progress)) : void 0;
47
+ const progressWidth = `${Math.round((resolvedProgress ?? 0.42) * 100)}%`;
48
+ return /* @__PURE__ */ jsxs("div", { style: {
49
+ display: "grid",
50
+ placeItems: "center",
51
+ alignContent: "center",
52
+ gap: 18,
53
+ width: "100%",
54
+ minHeight: "100%",
55
+ padding: 24,
56
+ color: "#1f2937",
57
+ textAlign: "center",
58
+ background: "radial-gradient(circle at center, rgba(56, 103, 214, 0.12), transparent 42%), #f8fafc"
59
+ }, children: [
60
+ /* @__PURE__ */ jsx("style", { children: loadingKeyframes }),
61
+ /* @__PURE__ */ jsxs("div", { style: { position: "relative", display: "grid", placeItems: "center", width: 112, height: 112 }, children: [
62
+ /* @__PURE__ */ jsx("div", { style: {
63
+ position: "absolute",
64
+ inset: 0,
65
+ border: "3px solid rgba(56, 103, 214, 0.14)",
66
+ borderTopColor: "#3867d6",
67
+ borderRightColor: "#7298f0",
68
+ borderRadius: 999,
69
+ boxShadow: "0 0 0 8px rgba(255, 255, 255, 0.58), 0 18px 42px rgba(56, 103, 214, 0.16)",
70
+ animation: "fp-drawio-loading-spin 0.92s linear infinite"
71
+ } }),
72
+ /* @__PURE__ */ jsxs("div", { style: {
73
+ position: "relative",
74
+ display: "block",
75
+ width: 56,
76
+ height: 66,
77
+ background: "#ffffff",
78
+ border: "1px solid rgba(56, 103, 214, 0.18)",
79
+ borderRadius: 8,
80
+ boxShadow: "0 14px 28px rgba(31, 41, 55, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.68)"
81
+ }, children: [
82
+ /* @__PURE__ */ jsx("div", { style: {
83
+ position: "absolute",
84
+ left: -8,
85
+ bottom: 8,
86
+ width: 45,
87
+ height: 54,
88
+ background: "rgba(56, 103, 214, 0.08)",
89
+ border: "1px solid rgba(56, 103, 214, 0.12)",
90
+ borderRadius: 8,
91
+ transform: "rotate(-5deg)",
92
+ zIndex: -1
93
+ } }),
94
+ /* @__PURE__ */ jsx("div", { style: {
95
+ position: "absolute",
96
+ top: -1,
97
+ right: -1,
98
+ width: 18,
99
+ height: 18,
100
+ background: "linear-gradient(135deg, rgba(56, 103, 214, 0.18) 0 50%, transparent 50% 100%)",
101
+ borderTopRightRadius: 8
102
+ } }),
103
+ /* @__PURE__ */ jsxs("div", { style: { position: "absolute", top: 18, left: 12, right: 10, display: "grid", gap: 6 }, children: [
104
+ /* @__PURE__ */ jsx("span", { style: { display: "block", height: 5, background: "rgba(56, 103, 214, 0.16)", borderRadius: 999, animation: "fp-drawio-loading-line-pulse 1.25s ease-in-out infinite" } }),
105
+ /* @__PURE__ */ jsx("span", { style: { display: "block", height: 5, width: "78%", background: "rgba(56, 103, 214, 0.16)", borderRadius: 999, animation: "fp-drawio-loading-line-pulse 1.25s ease-in-out infinite", animationDelay: "0.12s" } }),
106
+ /* @__PURE__ */ jsx("span", { style: { display: "block", height: 5, width: "56%", background: "rgba(56, 103, 214, 0.16)", borderRadius: 999, animation: "fp-drawio-loading-line-pulse 1.25s ease-in-out infinite", animationDelay: "0.24s" } })
107
+ ] })
108
+ ] })
109
+ ] }),
110
+ /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 6, maxWidth: "min(360px, 100%)" }, children: [
111
+ /* @__PURE__ */ jsx("strong", { style: { color: "#1f2937", fontSize: 16 }, children: "\u6B63\u5728\u52A0\u8F7D\u6587\u6863..." }),
112
+ /* @__PURE__ */ jsx("span", { style: { color: "#526173", fontSize: 13, lineHeight: 1.6 }, children: stage }),
113
+ message ? /* @__PURE__ */ jsx("span", { style: { color: "#526173", fontSize: 13, lineHeight: 1.6 }, children: message }) : null
114
+ ] }),
115
+ /* @__PURE__ */ jsxs("div", { style: { display: "grid", gap: 7, width: "min(320px, 76vw)", marginTop: 8 }, children: [
116
+ /* @__PURE__ */ jsx("div", { style: { position: "relative", height: 7, overflow: "hidden", background: "rgba(56, 103, 214, 0.1)", borderRadius: 999 }, children: /* @__PURE__ */ jsx("span", { style: {
117
+ position: "absolute",
118
+ inset: "0 auto 0 0",
119
+ width: progressWidth,
120
+ minWidth: 8,
121
+ background: "linear-gradient(90deg, #3867d6, #7298f0)",
122
+ borderRadius: "inherit",
123
+ transition: "width 0.16s ease",
124
+ animation: resolvedProgress == null ? "fp-drawio-loading-line-pulse 1.05s ease-in-out infinite" : void 0
125
+ } }) }),
126
+ /* @__PURE__ */ jsx("span", { style: { color: "#526173", fontSize: 12 }, children: resolvedProgress == null ? "\u51C6\u5907\u4E2D" : `${Math.round(resolvedProgress * 100)}%` })
127
+ ] })
128
+ ] });
129
+ };
24
130
  var createViewerSrc = (viewerUrl, fileUrl, locale, customParams) => {
25
131
  const params = new URLSearchParams({
26
132
  lightbox: "1",
@@ -40,6 +146,7 @@ var createViewerSrc = (viewerUrl, fileUrl, locale, customParams) => {
40
146
  function DrawioParser({ file, className, style, options, locale }) {
41
147
  const [objectUrl, setObjectUrl] = useState();
42
148
  const [error, setError] = useState();
149
+ const [viewerReady, setViewerReady] = useState(false);
43
150
  const viewerUrl = options?.viewerUrl ?? DEFAULT_DRAWIO_VIEWER_URL;
44
151
  const source = file.source;
45
152
  const directUrl = typeof source === "string" && isSourceUrl(source) ? source : void 0;
@@ -47,6 +154,7 @@ function DrawioParser({ file, className, style, options, locale }) {
47
154
  let active = true;
48
155
  let nextObjectUrl;
49
156
  setError(void 0);
157
+ setViewerReady(false);
50
158
  setObjectUrl(void 0);
51
159
  if (directUrl) return;
52
160
  readSourceText(source, options?.fetchOptions).then((text) => {
@@ -66,16 +174,18 @@ function DrawioParser({ file, className, style, options, locale }) {
66
174
  () => fileUrl ? createViewerSrc(viewerUrl, fileUrl, locale, options?.urlParams) : void 0,
67
175
  [fileUrl, viewerUrl, locale, options?.urlParams]
68
176
  );
69
- return /* @__PURE__ */ jsxs("div", { className, style: { height: "100%", minHeight: options?.minHeight ?? 480, ...style }, children: [
177
+ return /* @__PURE__ */ jsxs("div", { className, style: { position: "relative", height: "100%", minHeight: options?.minHeight ?? 480, overflow: "hidden", ...style }, children: [
70
178
  error ? /* @__PURE__ */ jsx("div", { children: error instanceof Error ? error.message : "Failed to load Draw.io file." }) : null,
71
179
  viewerSrc ? /* @__PURE__ */ jsx(
72
180
  "iframe",
73
181
  {
74
182
  title: options?.iframeTitle ?? file.name ?? "Draw.io viewer",
75
183
  src: viewerSrc,
184
+ onLoad: () => setViewerReady(true),
76
185
  style: { width: "100%", height: "100%", minHeight: options?.minHeight ?? 480, border: 0 }
77
186
  }
78
- ) : null
187
+ ) : null,
188
+ !error && !viewerReady ? /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, zIndex: 1 }, children: /* @__PURE__ */ jsx(DrawioLoadingState, {}) }) : null
79
189
  ] });
80
190
  }
81
191
  export {
package/drawioviewer/index.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <meta name="Keywords" content="drawio, diagram, online, flow chart, flowchart maker, uml, erd">
9
9
  <meta itemprop="name" content="draw.io - free flowchart maker and diagrams online">
10
10
  <meta itemprop="description" content="draw.io is a free online diagramming application and flowchart maker . You can use it to create UML, entity relationship,
11
- org charts, BPMN and BPM, database schema and networks. Also possible are telecommunication network, workflow, flowcharts, maps overlays and GIS, electronic
11
+ org charts, BPMN and BPM, database schema and networks. Also possible are telecommunication network, workflow, flowcharts, maps overlays and GIS, electronic
12
12
  circuit and social network diagrams.">
13
13
  <meta itemprop="image" content="https://lh4.googleusercontent.com/-cLKEldMbT_E/Tx8qXDuw6eI/AAAAAAAAAAs/Ke0pnlk8Gpg/w500-h344-k/BPMN%2Bdiagram%2Brc2f.png">
14
14
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
@@ -20,15 +20,22 @@
20
20
  <link rel="icon" href="favicon.ico" sizes="any">
21
21
  <link rel="shortcut icon" href="favicon.ico">
22
22
  <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
23
+ <style type="text/css">html,body{background:#fff!important;}#geInfo,#geStatus,.geSpinnerStatus,.spinner{display:none!important;}</style>
23
24
  <link rel="stylesheet" type="text/css" href="styles/grapheditor.css">
24
25
  <link rel="stylesheet" media="(forced-colors:active)" href="styles/high-contrast.css" id="high-contrast-stylesheet">
25
26
  <style type="text/css">.geBlock{z-index:-3;margin:100px;margin-top:40px;margin-bottom:30px;padding:20px;text-align:center;min-width:50%}.geBlock h1,.geBlock h2{margin-top:0;padding-top:0}</style>
27
+ <script>
28
+ (() => {
29
+ const hideSpinner = () => {
30
+ document.querySelectorAll('#geInfo, #geStatus, .geSpinnerStatus, .spinner').forEach(node => node.remove());
31
+ };
32
+ document.addEventListener('DOMContentLoaded', hideSpinner);
33
+ new MutationObserver(hideSpinner).observe(document.documentElement, { childList: true, subtree: true });
34
+ window.addEventListener('load', hideSpinner, { once: true });
35
+ hideSpinner();
36
+ })();
37
+ </script>
26
38
  </head>
27
39
  <body class="geEditor geClassic">
28
- <div id="geInfo">
29
- <div class="geBlock">
30
- <h2 id="geStatus"><img src="images/spin1.gif"></h2>
31
- </div>
32
- </div>
33
40
  <script defer="defer" src="./index.js"></script></body>
34
41
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@macrowing/filepilot-parser-drawio",
3
- "version": "0.1.0",
3
+ "version": "1.0.0",
4
4
  "description": "Draw.io parser powered by a compiled diagrams.net viewer for FilePilot.",
5
5
  "type": "module",
6
6
  "sideEffects": false,
@@ -22,7 +22,7 @@
22
22
  "react": ">=18.2.0 || >=19.0.0"
23
23
  },
24
24
  "dependencies": {
25
- "@macrowing/filepilot-types": "0.1.0"
25
+ "@macrowing/filepilot-types": "0.2.0"
26
26
  },
27
27
  "devDependencies": {
28
28
  "@types/react": "^19.0.12",