microboard-ui-temp 0.1.4 → 0.1.6
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.
- package/dist/board.html +2 -0
- package/dist/controlsHandlers.js +85 -0
- package/dist/customWebComponents.js +0 -251
- package/dist/index.js +1 -1
- package/dist/loadLinksImages.js +4 -1
- package/dist/titlePanel.js +264 -0
- package/package.json +2 -2
package/dist/board.html
CHANGED
|
@@ -79,6 +79,8 @@
|
|
|
79
79
|
>
|
|
80
80
|
</div>
|
|
81
81
|
<script type="module" src="https://unpkg.com/microboard-ui-temp/dist/customWebComponents.js"></script>
|
|
82
|
+
<script type="module" src="https://unpkg.com/microboard-ui-temp/dist/controlsHandlers.js"></script>
|
|
83
|
+
<script type="module" src="https://unpkg.com/microboard-ui-temp/dist/titlePanel.js"></script>
|
|
82
84
|
<script defer src="https://unpkg.com/microboard-ui-temp/dist/loadLinksImages.js"></script>
|
|
83
85
|
</body>
|
|
84
86
|
</head>
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
// src/public/controlsHandlers.ts
|
|
2
|
+
var isDragging = false;
|
|
3
|
+
var startX = 0;
|
|
4
|
+
var startY = 0;
|
|
5
|
+
var translateX = 0;
|
|
6
|
+
var translateY = 0;
|
|
7
|
+
var scale = 1;
|
|
8
|
+
function updateTransform(itemsDiv) {
|
|
9
|
+
itemsDiv.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
|
|
10
|
+
}
|
|
11
|
+
function createMouseDownHandler(itemsDiv) {
|
|
12
|
+
return (ev) => {
|
|
13
|
+
isDragging = true;
|
|
14
|
+
startX = ev.clientX;
|
|
15
|
+
startY = ev.clientY;
|
|
16
|
+
itemsDiv.style.cursor = "grabbing";
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
function createMouseMoveHandler(itemsDiv) {
|
|
20
|
+
return (ev) => {
|
|
21
|
+
if (!isDragging)
|
|
22
|
+
return;
|
|
23
|
+
const dx = ev.clientX - startX;
|
|
24
|
+
const dy = ev.clientY - startY;
|
|
25
|
+
startX += dx;
|
|
26
|
+
startY += dy;
|
|
27
|
+
translateX += dx;
|
|
28
|
+
translateY += dy;
|
|
29
|
+
updateTransform(itemsDiv);
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
function createMouseUpHandler(itemsDiv) {
|
|
33
|
+
return (_ev) => {
|
|
34
|
+
if (!isDragging)
|
|
35
|
+
return;
|
|
36
|
+
isDragging = false;
|
|
37
|
+
itemsDiv.style.cursor = "grab";
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
function createWheelHandler(itemsDiv) {
|
|
41
|
+
return (ev) => {
|
|
42
|
+
ev.preventDefault();
|
|
43
|
+
const factor = ev.deltaY < 0 ? 1.1 : 0.9;
|
|
44
|
+
translateX = ev.clientX - (ev.clientX - translateX) * factor;
|
|
45
|
+
translateY = ev.clientY - (ev.clientY - translateY) * factor;
|
|
46
|
+
scale *= factor;
|
|
47
|
+
updateTransform(itemsDiv);
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
var handlers = {};
|
|
51
|
+
function initListeners() {
|
|
52
|
+
const itemsDiv = document.querySelector("#items");
|
|
53
|
+
if (!itemsDiv) {
|
|
54
|
+
console.error("ITEMS DIV NOT FOUND!");
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
itemsDiv.style.transformOrigin = "0 0";
|
|
58
|
+
document.body.style.cursor = "grab";
|
|
59
|
+
handlers.mousedown = createMouseDownHandler(itemsDiv);
|
|
60
|
+
handlers.mousemove = createMouseMoveHandler(itemsDiv);
|
|
61
|
+
handlers.mouseup = createMouseUpHandler(itemsDiv);
|
|
62
|
+
handlers.wheel = createWheelHandler(itemsDiv);
|
|
63
|
+
Object.keys(handlers).forEach((event) => {
|
|
64
|
+
document.addEventListener(event, handlers[event]);
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
function cleanupListeners() {
|
|
68
|
+
Object.keys(handlers).forEach((event) => {
|
|
69
|
+
document.removeEventListener(event, handlers[event]);
|
|
70
|
+
});
|
|
71
|
+
translateX = 0;
|
|
72
|
+
translateY = 0;
|
|
73
|
+
scale = 1;
|
|
74
|
+
const itemsDiv = document.querySelector("#items");
|
|
75
|
+
if (!itemsDiv) {
|
|
76
|
+
console.error("ITEMS DIV NOT FOUND!");
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
updateTransform(itemsDiv);
|
|
80
|
+
}
|
|
81
|
+
document.addEventListener("DOMContentLoaded", initListeners);
|
|
82
|
+
export {
|
|
83
|
+
initListeners,
|
|
84
|
+
cleanupListeners
|
|
85
|
+
};
|
|
@@ -1,27 +1,3 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __toESM = (mod, isNodeMode, target) => {
|
|
7
|
-
target = mod != null ? __create(__getProtoOf(mod)) : {};
|
|
8
|
-
const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
|
|
9
|
-
for (let key of __getOwnPropNames(mod))
|
|
10
|
-
if (!__hasOwnProp.call(to, key))
|
|
11
|
-
__defProp(to, key, {
|
|
12
|
-
get: () => mod[key],
|
|
13
|
-
enumerable: true
|
|
14
|
-
});
|
|
15
|
-
return to;
|
|
16
|
-
};
|
|
17
|
-
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
|
|
18
|
-
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
|
|
19
|
-
}) : x)(function(x) {
|
|
20
|
-
if (typeof require !== "undefined")
|
|
21
|
-
return require.apply(this, arguments);
|
|
22
|
-
throw Error('Dynamic require of "' + x + '" is not supported');
|
|
23
|
-
});
|
|
24
|
-
|
|
25
1
|
// src/public/customWebComponents.ts
|
|
26
2
|
class RichTextElement extends HTMLElement {
|
|
27
3
|
constructor() {
|
|
@@ -106,230 +82,3 @@ customElements.define("ainode-item", AINodeItemElement);
|
|
|
106
82
|
customElements.define("video-item", VideoItemElement);
|
|
107
83
|
customElements.define("comment-item", CommentElement);
|
|
108
84
|
customElements.define("audio-item", AudioItemElement);
|
|
109
|
-
document.addEventListener("DOMContentLoaded", () => {
|
|
110
|
-
const itemsDiv = document.querySelector("#items");
|
|
111
|
-
if (!itemsDiv) {
|
|
112
|
-
console.error("ITEMS DIV NOT FOUND!");
|
|
113
|
-
return;
|
|
114
|
-
}
|
|
115
|
-
let isDragging = false;
|
|
116
|
-
let startX, startY;
|
|
117
|
-
let translateX = 0;
|
|
118
|
-
let translateY = 0;
|
|
119
|
-
let scale = 1;
|
|
120
|
-
itemsDiv.style.transformOrigin = "0 0";
|
|
121
|
-
document.body.style.cursor = "grab";
|
|
122
|
-
function updateTransform() {
|
|
123
|
-
if (!itemsDiv) {
|
|
124
|
-
return;
|
|
125
|
-
}
|
|
126
|
-
itemsDiv.style.transform = "translate(" + translateX + "px, " + translateY + "px) scale(" + scale + ")";
|
|
127
|
-
}
|
|
128
|
-
function handleMouseDown(ev) {
|
|
129
|
-
if (!itemsDiv) {
|
|
130
|
-
return;
|
|
131
|
-
}
|
|
132
|
-
isDragging = true;
|
|
133
|
-
startX = ev.clientX;
|
|
134
|
-
startY = ev.clientY;
|
|
135
|
-
itemsDiv.style.cursor = "grabbing";
|
|
136
|
-
}
|
|
137
|
-
function handleMouseMove(ev) {
|
|
138
|
-
if (!isDragging || !itemsDiv) {
|
|
139
|
-
return;
|
|
140
|
-
}
|
|
141
|
-
const dx = ev.clientX - startX;
|
|
142
|
-
const dy = ev.clientY - startY;
|
|
143
|
-
startX += dx;
|
|
144
|
-
startY += dy;
|
|
145
|
-
translateX += dx;
|
|
146
|
-
translateY += dy;
|
|
147
|
-
updateTransform();
|
|
148
|
-
}
|
|
149
|
-
function handleMouseUp(ev) {
|
|
150
|
-
if (!isDragging || !itemsDiv) {
|
|
151
|
-
return;
|
|
152
|
-
}
|
|
153
|
-
isDragging = false;
|
|
154
|
-
itemsDiv.style.cursor = "grab";
|
|
155
|
-
}
|
|
156
|
-
function handleWheel(ev) {
|
|
157
|
-
ev.preventDefault();
|
|
158
|
-
const factor = ev.deltaY < 0 ? 1.1 : 0.9;
|
|
159
|
-
translateX = ev.clientX - (ev.clientX - translateX) * factor;
|
|
160
|
-
translateY = ev.clientY - (ev.clientY - translateY) * factor;
|
|
161
|
-
scale *= factor;
|
|
162
|
-
updateTransform();
|
|
163
|
-
}
|
|
164
|
-
document.addEventListener("mousedown", handleMouseDown);
|
|
165
|
-
document.addEventListener("mousemove", handleMouseMove);
|
|
166
|
-
document.addEventListener("mouseup", handleMouseUp);
|
|
167
|
-
document.addEventListener("wheel", handleWheel);
|
|
168
|
-
const titlePanel = document.createElement("div");
|
|
169
|
-
titlePanel.style.boxShadow = "0px 10px 16px -3px rgba(20, 21, 26, 0.08)";
|
|
170
|
-
titlePanel.style.position = "fixed";
|
|
171
|
-
titlePanel.style.left = "12px";
|
|
172
|
-
titlePanel.style.top = "12px";
|
|
173
|
-
titlePanel.style.borderRadius = "12px";
|
|
174
|
-
titlePanel.style.backgroundColor = "#ffff";
|
|
175
|
-
titlePanel.style.display = "flex";
|
|
176
|
-
titlePanel.style.alignItems = "center";
|
|
177
|
-
titlePanel.style.gap = "8px";
|
|
178
|
-
titlePanel.style.padding = "0 12px";
|
|
179
|
-
titlePanel.style.height = "48px";
|
|
180
|
-
const editButton = document.createElement("button");
|
|
181
|
-
const editIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
182
|
-
editIcon.setAttribute("width", "13");
|
|
183
|
-
editIcon.setAttribute("height", "13");
|
|
184
|
-
editIcon.setAttribute("viewBox", "0 0 13 13");
|
|
185
|
-
editIcon.setAttribute("fill", "none");
|
|
186
|
-
editIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
|
|
187
|
-
const editIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
188
|
-
editIconPath.setAttribute("d", "M7.838 0.999902V2.33324H1.33333V11.6666H10.6667V5.1619H12V12.3332C12 12.51 11.9298 12.6796 11.8047 12.8046C11.6797 12.9297 11.5101 12.9999 11.3333 12.9999H0.666667C0.489856 12.9999 0.320286 12.9297 0.195262 12.8046C0.0702379 12.6796 0 12.51 0 12.3332V1.66657C0 1.48976 0.0702379 1.32019 0.195262 1.19516C0.320286 1.07014 0.489856 0.999902 0.666667 0.999902H7.838ZM11.1847 0.872018C11.4453 0.611315 11.868 0.611355 12.1285 0.872108C12.3889 1.1327 12.3889 1.55503 12.1284 1.81553L6.472 7.4719L5.53067 7.4739L5.52933 6.52924L11.1847 0.872018Z");
|
|
189
|
-
editIconPath.setAttribute("fill", "#ffff");
|
|
190
|
-
editIcon.appendChild(editIconPath);
|
|
191
|
-
editButton.appendChild(editIcon);
|
|
192
|
-
const editFileText = document.createElement("p");
|
|
193
|
-
const isSnapshotInIframe = window.parent && window.parent !== window && window.parent.location.href.includes("/snapshots/");
|
|
194
|
-
const editFileTextContent = isSnapshotInIframe ? "Edit copy" : "Edit file";
|
|
195
|
-
editFileText.textContent = editFileTextContent;
|
|
196
|
-
editButton.appendChild(editFileText);
|
|
197
|
-
editButton.style.backgroundColor = "rgba(20, 21, 26, 1)";
|
|
198
|
-
editButton.style.cursor = "pointer";
|
|
199
|
-
editButton.style.boxShadow = "0px 1px 2px 0px rgba(20, 21, 26, 0.05)";
|
|
200
|
-
editButton.style.color = "#ffff";
|
|
201
|
-
editButton.style.fontSize = "14px";
|
|
202
|
-
editButton.style.lineHeight = "20px";
|
|
203
|
-
editButton.style.display = "flex";
|
|
204
|
-
editButton.style.alignItems = "center";
|
|
205
|
-
editButton.style.gap = "8px";
|
|
206
|
-
editButton.style.padding = "8px";
|
|
207
|
-
editButton.style.borderRadius = "10px";
|
|
208
|
-
const shareButton = document.createElement("button");
|
|
209
|
-
const shareButtonText = document.createElement("p");
|
|
210
|
-
const shareButtonTextContent = "Share with friends";
|
|
211
|
-
shareButtonText.textContent = shareButtonTextContent;
|
|
212
|
-
shareButton.appendChild(shareButtonText);
|
|
213
|
-
shareButton.style.backgroundColor = "rgba(20, 21, 26, 1)";
|
|
214
|
-
shareButton.style.cursor = "pointer";
|
|
215
|
-
shareButton.style.boxShadow = "0px 1px 2px 0px rgba(20, 21, 26, 0.05)";
|
|
216
|
-
shareButton.style.color = "#ffff";
|
|
217
|
-
shareButton.style.fontSize = "14px";
|
|
218
|
-
shareButton.style.lineHeight = "20px";
|
|
219
|
-
shareButton.style.display = "flex";
|
|
220
|
-
shareButton.style.alignItems = "center";
|
|
221
|
-
shareButton.style.gap = "8px";
|
|
222
|
-
shareButton.style.padding = "8px";
|
|
223
|
-
shareButton.style.borderRadius = "10px";
|
|
224
|
-
const separator = document.createElement("div");
|
|
225
|
-
separator.style.borderRight = "1px solid rgba(222, 224, 227, 1)";
|
|
226
|
-
separator.style.height = "100%";
|
|
227
|
-
const boardName = document.createElement("div");
|
|
228
|
-
const fileIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
229
|
-
fileIcon.setAttribute("width", "16");
|
|
230
|
-
fileIcon.setAttribute("height", "18");
|
|
231
|
-
fileIcon.setAttribute("viewBox", "0 0 16 18");
|
|
232
|
-
fileIcon.setAttribute("fill", "none");
|
|
233
|
-
fileIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
|
|
234
|
-
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
235
|
-
path.setAttribute("d", "M10.5 2.33341H2.16667V15.6667H13.8333V5.66675H10.5V2.33341ZM0.5 1.49341C0.5 1.03675 0.8725 0.666748 1.3325 0.666748H11.3333L15.5 4.83342V16.4942C15.5008 16.6037 15.48 16.7122 15.4388 16.8136C15.3976 16.915 15.3369 17.0073 15.2601 17.0852C15.1832 17.1631 15.0918 17.2252 14.991 17.2678C14.8902 17.3103 14.7819 17.3327 14.6725 17.3334H1.3275C1.10865 17.3319 0.899181 17.2443 0.744348 17.0897C0.589515 16.935 0.501746 16.7256 0.5 16.5067V1.49341ZM7.16667 8.16675V5.66675H8.83333V8.16675H11.3333V9.83342H8.83333V12.3334H7.16667V9.83342H4.66667V8.16675H7.16667Z");
|
|
236
|
-
path.setAttribute("fill", "#696B76");
|
|
237
|
-
fileIcon.appendChild(path);
|
|
238
|
-
boardName.appendChild(fileIcon);
|
|
239
|
-
const boardNameTag = document.querySelector('meta[name="board-name"]');
|
|
240
|
-
let boardNameStr = "Untitled";
|
|
241
|
-
if (boardNameTag) {
|
|
242
|
-
boardNameStr = boardNameTag.getAttribute("content") || "";
|
|
243
|
-
}
|
|
244
|
-
const p = document.createElement("p");
|
|
245
|
-
p.textContent = boardNameStr;
|
|
246
|
-
p.style.fontSize = "16px";
|
|
247
|
-
p.style.lineHeight = "24px";
|
|
248
|
-
boardName.appendChild(p);
|
|
249
|
-
const cloudIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
250
|
-
cloudIcon.setAttribute("width", "20");
|
|
251
|
-
cloudIcon.setAttribute("height", "18");
|
|
252
|
-
cloudIcon.setAttribute("viewBox", "0 0 20 18");
|
|
253
|
-
cloudIcon.setAttribute("fill", "none");
|
|
254
|
-
cloudIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
|
|
255
|
-
const cloudIconPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
256
|
-
cloudIconPath.setAttribute("d", "M2.92711 0.75009L18.8371 16.6601L17.6579 17.8393L15.9796 16.1601C15.401 16.3854 14.7855 16.5007 14.1646 16.5001H5.83128C4.65063 16.5008 3.50782 16.0838 2.60518 15.3227C1.70255 14.5617 1.09833 13.5058 0.89953 12.342C0.700726 11.1782 0.920157 9.98165 1.51897 8.96413C2.11778 7.94662 3.05734 7.17382 4.17128 6.78259C4.13561 6.05854 4.23538 5.3342 4.46544 4.64676L1.74794 1.92842L2.92711 0.75009ZM5.83128 6.50009C5.83128 6.56759 5.83294 6.63592 5.83628 6.70259L5.89461 7.94259L4.72461 8.35426C3.98336 8.6164 3.35857 9.132 2.96052 9.81003C2.56248 10.4881 2.41678 11.2849 2.54916 12.0599C2.68153 12.8349 3.08347 13.5383 3.684 14.0457C4.28453 14.5532 5.04504 14.8322 5.83128 14.8334H14.1646C14.3196 14.8334 14.4721 14.8226 14.6213 14.8026L5.85628 6.03759C5.83961 6.18926 5.83128 6.34342 5.83128 6.50009ZM9.99794 0.666756C10.7878 0.666732 11.5694 0.827112 12.2954 1.13817C13.0214 1.44923 13.6767 1.90449 14.2215 2.47635C14.7664 3.04821 15.1894 3.72476 15.4649 4.46498C15.7405 5.2052 15.8629 5.99367 15.8246 6.78259C16.5167 7.02639 17.1467 7.41945 17.6699 7.93391C18.1931 8.44837 18.5967 9.07163 18.8521 9.75951C19.1076 10.4474 19.2085 11.183 19.1479 11.9143C19.0873 12.6455 18.8665 13.3545 18.5013 13.9909L17.2571 12.7468C17.5023 12.1401 17.5636 11.4747 17.4331 10.8335C17.3027 10.1924 16.9864 9.60375 16.5237 9.14112C16.061 8.67849 15.4723 8.36232 14.8311 8.23202C14.1899 8.10173 13.5245 8.16308 12.9179 8.40842L11.6729 7.16259C12.4071 6.74176 13.2571 6.50009 14.1646 6.50009C14.1646 5.73714 13.9551 4.98884 13.559 4.33679C13.1629 3.68473 12.5953 3.15396 11.9182 2.80235C11.2411 2.45073 10.4805 2.29177 9.71923 2.34281C8.95799 2.39384 8.22538 2.65291 7.60127 3.09176L6.40961 1.90009C7.43392 1.09887 8.69749 0.664571 9.99794 0.666756Z");
|
|
257
|
-
cloudIconPath.setAttribute("fill", "#696B76");
|
|
258
|
-
cloudIcon.appendChild(cloudIconPath);
|
|
259
|
-
boardName.appendChild(cloudIcon);
|
|
260
|
-
boardName.style.display = "flex";
|
|
261
|
-
boardName.style.alignItems = "center";
|
|
262
|
-
boardName.style.gap = "8px";
|
|
263
|
-
titlePanel.appendChild(boardName);
|
|
264
|
-
titlePanel.appendChild(separator);
|
|
265
|
-
titlePanel.appendChild(editButton);
|
|
266
|
-
titlePanel.appendChild(shareButton);
|
|
267
|
-
document.body.appendChild(titlePanel);
|
|
268
|
-
function setButtonsLoading() {
|
|
269
|
-
const loadingContent = "Loading…";
|
|
270
|
-
editButton.disabled = true;
|
|
271
|
-
editFileText.textContent = loadingContent;
|
|
272
|
-
shareButton.disabled = true;
|
|
273
|
-
shareButtonText.textContent = loadingContent;
|
|
274
|
-
}
|
|
275
|
-
function resetButtons() {
|
|
276
|
-
editButton.disabled = false;
|
|
277
|
-
editFileText.textContent = editFileTextContent;
|
|
278
|
-
shareButton.disabled = false;
|
|
279
|
-
shareButtonText.textContent = shareButtonTextContent;
|
|
280
|
-
}
|
|
281
|
-
function onClickWrapper(handler) {
|
|
282
|
-
return async function(ev) {
|
|
283
|
-
setButtonsLoading();
|
|
284
|
-
try {
|
|
285
|
-
await handler.call(this, ev);
|
|
286
|
-
} finally {
|
|
287
|
-
resetButtons();
|
|
288
|
-
}
|
|
289
|
-
};
|
|
290
|
-
}
|
|
291
|
-
editButton.addEventListener("click", onClickWrapper(async function(ev) {
|
|
292
|
-
ev.preventDefault();
|
|
293
|
-
document.removeEventListener("mousedown", handleMouseDown);
|
|
294
|
-
document.removeEventListener("mousemove", handleMouseMove);
|
|
295
|
-
document.removeEventListener("mouseup", handleMouseUp);
|
|
296
|
-
document.removeEventListener("wheel", handleWheel);
|
|
297
|
-
translateX = 0;
|
|
298
|
-
translateY = 0;
|
|
299
|
-
scale = 1;
|
|
300
|
-
updateTransform();
|
|
301
|
-
const { initInter } = await import("https://www.unpkg.com/microboard-ui-temp/dist/index.js");
|
|
302
|
-
initInter();
|
|
303
|
-
const { createApp } = await import("https://www.unpkg.com/microboard-ui-temp/dist/index.js");
|
|
304
|
-
const app = createApp();
|
|
305
|
-
window.app = app;
|
|
306
|
-
const stringed = await app.openAndEditFile();
|
|
307
|
-
if (stringed) {
|
|
308
|
-
await app.openBoardFromFile();
|
|
309
|
-
app.getBoard().deserializeHTML(stringed);
|
|
310
|
-
app.localRender("items");
|
|
311
|
-
}
|
|
312
|
-
const response = await fetch("https://www.unpkg.com/microboard-ui-temp/dist/index.css");
|
|
313
|
-
const cssText = await response.text();
|
|
314
|
-
const styleEl = document.createElement("style");
|
|
315
|
-
styleEl.textContent = cssText;
|
|
316
|
-
document.body.appendChild(styleEl);
|
|
317
|
-
const responseSvg = await fetch("https://www.unpkg.com/microboard-ui-temp/dist/sprite.svg");
|
|
318
|
-
const svgText = await responseSvg.text();
|
|
319
|
-
const div = document.createElement("div");
|
|
320
|
-
div.style.display = "none";
|
|
321
|
-
div.id = "sprite";
|
|
322
|
-
div.innerHTML = svgText;
|
|
323
|
-
document.body.appendChild(div);
|
|
324
|
-
}));
|
|
325
|
-
shareButton.addEventListener("click", onClickWrapper(async function(ev) {
|
|
326
|
-
ev.preventDefault();
|
|
327
|
-
const htmlContent = document.documentElement.innerHTML;
|
|
328
|
-
const boardName2 = document.title?.trim() || "shared-board";
|
|
329
|
-
const { boardsApi, api } = await import("https://www.unpkg.com/microboard-ui-temp/dist/index.js");
|
|
330
|
-
api.updateURL("https://dev-app.microboard.io/api/v1");
|
|
331
|
-
const boardRes = await boardsApi.createBoard(boardName2, true);
|
|
332
|
-
await boardsApi.publishSnapshot(htmlContent, boardRes.data.id, boardRes.data.id);
|
|
333
|
-
window.location.href = `https://dev-app.microboard.io/boards/${boardRes.data.id}`;
|
|
334
|
-
}));
|
|
335
|
-
});
|
package/dist/index.js
CHANGED
|
@@ -230146,7 +230146,7 @@ class BaseItem extends Mbr {
|
|
|
230146
230146
|
}
|
|
230147
230147
|
emit(operation) {
|
|
230148
230148
|
if (this.board.events) {
|
|
230149
|
-
const command = new BaseCommand([this], operation);
|
|
230149
|
+
const command = new BaseCommand(this.board, [this.getId()], operation);
|
|
230150
230150
|
command.apply();
|
|
230151
230151
|
this.board.events.emit(operation, command);
|
|
230152
230152
|
} else {
|
package/dist/loadLinksImages.js
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
// src/public/loadLinksImages.
|
|
1
|
+
// src/public/loadLinksImages.ts
|
|
2
2
|
document.addEventListener("DOMContentLoaded", function() {
|
|
3
3
|
document.querySelectorAll(".link-object").forEach((linkItem) => {
|
|
4
4
|
const linkImage = linkItem.querySelector(".link-image");
|
|
5
5
|
const linkContainer = linkItem.querySelector("a");
|
|
6
|
+
if (!linkImage || !linkContainer) {
|
|
7
|
+
return;
|
|
8
|
+
}
|
|
6
9
|
linkImage.onerror = () => {
|
|
7
10
|
linkImage.onerror = null;
|
|
8
11
|
linkImage.style.display = "none";
|
|
@@ -0,0 +1,264 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __toESM = (mod, isNodeMode, target) => {
|
|
7
|
+
target = mod != null ? __create(__getProtoOf(mod)) : {};
|
|
8
|
+
const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
|
|
9
|
+
for (let key of __getOwnPropNames(mod))
|
|
10
|
+
if (!__hasOwnProp.call(to, key))
|
|
11
|
+
__defProp(to, key, {
|
|
12
|
+
get: () => mod[key],
|
|
13
|
+
enumerable: true
|
|
14
|
+
});
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
|
|
18
|
+
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
|
|
19
|
+
}) : x)(function(x) {
|
|
20
|
+
if (typeof require !== "undefined")
|
|
21
|
+
return require.apply(this, arguments);
|
|
22
|
+
throw Error('Dynamic require of "' + x + '" is not supported');
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
// src/public/controlsHandlers.ts
|
|
26
|
+
var isDragging = false;
|
|
27
|
+
var startX = 0;
|
|
28
|
+
var startY = 0;
|
|
29
|
+
var translateX = 0;
|
|
30
|
+
var translateY = 0;
|
|
31
|
+
var scale = 1;
|
|
32
|
+
function updateTransform(itemsDiv) {
|
|
33
|
+
itemsDiv.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
|
|
34
|
+
}
|
|
35
|
+
function createMouseDownHandler(itemsDiv) {
|
|
36
|
+
return (ev) => {
|
|
37
|
+
isDragging = true;
|
|
38
|
+
startX = ev.clientX;
|
|
39
|
+
startY = ev.clientY;
|
|
40
|
+
itemsDiv.style.cursor = "grabbing";
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
function createMouseMoveHandler(itemsDiv) {
|
|
44
|
+
return (ev) => {
|
|
45
|
+
if (!isDragging)
|
|
46
|
+
return;
|
|
47
|
+
const dx = ev.clientX - startX;
|
|
48
|
+
const dy = ev.clientY - startY;
|
|
49
|
+
startX += dx;
|
|
50
|
+
startY += dy;
|
|
51
|
+
translateX += dx;
|
|
52
|
+
translateY += dy;
|
|
53
|
+
updateTransform(itemsDiv);
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
function createMouseUpHandler(itemsDiv) {
|
|
57
|
+
return (_ev) => {
|
|
58
|
+
if (!isDragging)
|
|
59
|
+
return;
|
|
60
|
+
isDragging = false;
|
|
61
|
+
itemsDiv.style.cursor = "grab";
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
function createWheelHandler(itemsDiv) {
|
|
65
|
+
return (ev) => {
|
|
66
|
+
ev.preventDefault();
|
|
67
|
+
const factor = ev.deltaY < 0 ? 1.1 : 0.9;
|
|
68
|
+
translateX = ev.clientX - (ev.clientX - translateX) * factor;
|
|
69
|
+
translateY = ev.clientY - (ev.clientY - translateY) * factor;
|
|
70
|
+
scale *= factor;
|
|
71
|
+
updateTransform(itemsDiv);
|
|
72
|
+
};
|
|
73
|
+
}
|
|
74
|
+
var handlers = {};
|
|
75
|
+
function initListeners() {
|
|
76
|
+
const itemsDiv = document.querySelector("#items");
|
|
77
|
+
if (!itemsDiv) {
|
|
78
|
+
console.error("ITEMS DIV NOT FOUND!");
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
itemsDiv.style.transformOrigin = "0 0";
|
|
82
|
+
document.body.style.cursor = "grab";
|
|
83
|
+
handlers.mousedown = createMouseDownHandler(itemsDiv);
|
|
84
|
+
handlers.mousemove = createMouseMoveHandler(itemsDiv);
|
|
85
|
+
handlers.mouseup = createMouseUpHandler(itemsDiv);
|
|
86
|
+
handlers.wheel = createWheelHandler(itemsDiv);
|
|
87
|
+
Object.keys(handlers).forEach((event) => {
|
|
88
|
+
document.addEventListener(event, handlers[event]);
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
function cleanupListeners() {
|
|
92
|
+
Object.keys(handlers).forEach((event) => {
|
|
93
|
+
document.removeEventListener(event, handlers[event]);
|
|
94
|
+
});
|
|
95
|
+
translateX = 0;
|
|
96
|
+
translateY = 0;
|
|
97
|
+
scale = 1;
|
|
98
|
+
const itemsDiv = document.querySelector("#items");
|
|
99
|
+
if (!itemsDiv) {
|
|
100
|
+
console.error("ITEMS DIV NOT FOUND!");
|
|
101
|
+
return;
|
|
102
|
+
}
|
|
103
|
+
updateTransform(itemsDiv);
|
|
104
|
+
}
|
|
105
|
+
document.addEventListener("DOMContentLoaded", initListeners);
|
|
106
|
+
|
|
107
|
+
// src/public/titlePanel.ts
|
|
108
|
+
var isSnapshotInIframe = window.parent && window.parent !== window && window.parent.location.href.includes("/snapshots/");
|
|
109
|
+
var TITLE_PANEL_STYLES = {
|
|
110
|
+
boxShadow: "0px 10px 16px -3px rgba(20, 21, 26, 0.08)",
|
|
111
|
+
position: "fixed",
|
|
112
|
+
left: "12px",
|
|
113
|
+
top: "12px",
|
|
114
|
+
borderRadius: "12px",
|
|
115
|
+
backgroundColor: "#fff",
|
|
116
|
+
display: "flex",
|
|
117
|
+
alignItems: "center",
|
|
118
|
+
gap: "8px",
|
|
119
|
+
padding: "0 12px",
|
|
120
|
+
height: "48px"
|
|
121
|
+
};
|
|
122
|
+
var BUTTON_STYLES = {
|
|
123
|
+
backgroundColor: "rgba(20, 21, 26, 1)",
|
|
124
|
+
cursor: "pointer",
|
|
125
|
+
boxShadow: "0px 1px 2px 0px rgba(20, 21, 26, 0.05)",
|
|
126
|
+
color: "#fff",
|
|
127
|
+
fontSize: "14px",
|
|
128
|
+
lineHeight: "20px",
|
|
129
|
+
display: "flex",
|
|
130
|
+
alignItems: "center",
|
|
131
|
+
gap: "8px",
|
|
132
|
+
padding: "8px",
|
|
133
|
+
borderRadius: "10px"
|
|
134
|
+
};
|
|
135
|
+
var TEXT_DEAFULT = {
|
|
136
|
+
editButton: isSnapshotInIframe ? "Edit copy" : "Edit file",
|
|
137
|
+
shareButton: "Share with friends"
|
|
138
|
+
};
|
|
139
|
+
var buttons;
|
|
140
|
+
function applyStyles(el, styles) {
|
|
141
|
+
Object.entries(styles).forEach(([key, value]) => {
|
|
142
|
+
el.style[key] = value;
|
|
143
|
+
});
|
|
144
|
+
}
|
|
145
|
+
function createSvgIcon(pathData, width = 16, height = 16, viewBox = "0 0 16 16", fill = "#FFFFFF") {
|
|
146
|
+
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
147
|
+
svg.setAttribute("width", width.toString());
|
|
148
|
+
svg.setAttribute("height", height.toString());
|
|
149
|
+
svg.setAttribute("viewBox", viewBox);
|
|
150
|
+
svg.setAttribute("fill", "none");
|
|
151
|
+
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
152
|
+
path.setAttribute("d", pathData);
|
|
153
|
+
path.setAttribute("fill", fill);
|
|
154
|
+
svg.appendChild(path);
|
|
155
|
+
return svg;
|
|
156
|
+
}
|
|
157
|
+
function onClickWrapper(handler, button) {
|
|
158
|
+
return async function(ev) {
|
|
159
|
+
const mouseEvent = ev;
|
|
160
|
+
setLoadingState(true, button);
|
|
161
|
+
try {
|
|
162
|
+
await handler.call(this, mouseEvent);
|
|
163
|
+
} finally {
|
|
164
|
+
setLoadingState(false, button);
|
|
165
|
+
}
|
|
166
|
+
};
|
|
167
|
+
}
|
|
168
|
+
function setLoadingState(loading, { button, text, defaultText }) {
|
|
169
|
+
const loadingText = "Loading…";
|
|
170
|
+
button.disabled = loading;
|
|
171
|
+
text.textContent = loading ? loadingText : defaultText;
|
|
172
|
+
}
|
|
173
|
+
async function handleEdit(ev) {
|
|
174
|
+
ev.preventDefault();
|
|
175
|
+
const module = await import("https://www.unpkg.com/microboard-ui-temp/dist/index.js");
|
|
176
|
+
module.initInter();
|
|
177
|
+
const app = module.createApp();
|
|
178
|
+
window.app = app;
|
|
179
|
+
const content = await app.openAndEditFile();
|
|
180
|
+
if (content) {
|
|
181
|
+
cleanupListeners();
|
|
182
|
+
await app.openBoardFromFile();
|
|
183
|
+
app.getBoard().deserializeHTML(content);
|
|
184
|
+
app.localRender("items");
|
|
185
|
+
await injectStyles();
|
|
186
|
+
await injectSprite();
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
async function handleShare(ev) {
|
|
190
|
+
ev.preventDefault();
|
|
191
|
+
const html = document.documentElement.innerHTML;
|
|
192
|
+
const name = getBoardName();
|
|
193
|
+
const { boardsApi, api } = await import("https://www.unpkg.com/microboard-ui-temp/dist/index.js");
|
|
194
|
+
api.updateURL("https://dev-app.microboard.io/api/v1");
|
|
195
|
+
const res = await boardsApi.createBoard(name, true);
|
|
196
|
+
await boardsApi.publishSnapshot(html, res.data.id, res.data.id);
|
|
197
|
+
window.location.href = `https://dev-app.microboard.io/boards/${res.data.id}`;
|
|
198
|
+
}
|
|
199
|
+
async function injectStyles() {
|
|
200
|
+
const resp = await fetch("https://www.unpkg.com/microboard-ui-temp/dist/index.css");
|
|
201
|
+
const css = await resp.text();
|
|
202
|
+
const style = document.createElement("style");
|
|
203
|
+
style.textContent = css;
|
|
204
|
+
document.head.appendChild(style);
|
|
205
|
+
}
|
|
206
|
+
async function injectSprite() {
|
|
207
|
+
const resp = await fetch("https://www.unpkg.com/microboard-ui-temp/dist/sprite.svg");
|
|
208
|
+
const svgText = await resp.text();
|
|
209
|
+
const div = document.createElement("div");
|
|
210
|
+
div.style.display = "none";
|
|
211
|
+
div.id = "sprite";
|
|
212
|
+
div.innerHTML = svgText;
|
|
213
|
+
document.body.appendChild(div);
|
|
214
|
+
}
|
|
215
|
+
function getBoardName() {
|
|
216
|
+
return document.title.trim() || "Shared Board";
|
|
217
|
+
}
|
|
218
|
+
function createTitlePanel() {
|
|
219
|
+
const panel = document.createElement("div");
|
|
220
|
+
applyStyles(panel, TITLE_PANEL_STYLES);
|
|
221
|
+
const fileIconD = "M10.5 2.33341H2.16667V15.6667H13.8333V5.66675H10.5V2.33341ZM0.5 1.49341C0.5 1.03675 0.8725 0.666748 1.3325 0.666748H11.3333L15.5 4.83342V16.4942C15.5008 16.6037 15.48 16.7122 15.4388 16.8136C15.3976 16.915 15.3369 17.0073 15.2601 17.0852C15.1832 17.1631 15.0918 17.2252 14.991 17.2678C14.8902 17.3103 14.7819 17.3327 14.6725 17.3334H1.3275C1.10865 17.3319 0.899181 17.2443 0.744348 17.0897C0.589515 16.935 0.501746 16.7256 0.5 16.5067V1.49341ZM7.16667 8.16675V5.66675H8.83333V8.16675H11.3333V9.83342H8.83333V12.3334H7.16667V9.83342H4.66667V8.16675H7.16667Z";
|
|
222
|
+
const fileIcon = createSvgIcon(fileIconD, 16, 18, "0 0 16 18", "rgba(105,107,118,1)");
|
|
223
|
+
const title = document.createElement("p");
|
|
224
|
+
title.textContent = getBoardName();
|
|
225
|
+
title.style.fontSize = "16px";
|
|
226
|
+
title.style.lineHeight = "24px";
|
|
227
|
+
const nameWrapper = document.createElement("div");
|
|
228
|
+
applyStyles(nameWrapper, {
|
|
229
|
+
display: "flex",
|
|
230
|
+
alignItems: "center",
|
|
231
|
+
gap: "8px"
|
|
232
|
+
});
|
|
233
|
+
nameWrapper.append(fileIcon, title);
|
|
234
|
+
panel.append(nameWrapper);
|
|
235
|
+
const sep = document.createElement("div");
|
|
236
|
+
sep.style.borderRight = "1px solid rgba(222,224,227,1)";
|
|
237
|
+
sep.style.height = "100%";
|
|
238
|
+
panel.append(sep);
|
|
239
|
+
const editSvg = createSvgIcon("M7.838 0.999902V2.33324H1.33333V11.6666H10.6667V5.1619H12V12.3332C12 12.51 11.9298 12.6796 11.8047 12.8046C11.6797 12.9297 11.5101 12.9999 11.3333 12.9999H0.666667C0.489856 12.9999 0.320286 12.9297 0.195262 12.8046C0.0702379 12.6796 0 12.51 0 12.3332V1.66657C0 1.48976 0.0702379 1.32019 0.195262 1.19516C0.320286 1.07014 0.489856 0.999902 0.666667 0.999902H7.838ZM11.1847 0.872018C11.4453 0.611315 11.868 0.611355 12.1285 0.872108C12.3889 1.1327 12.3889 1.55503 12.1284 1.81553L6.472 7.4719L5.53067 7.4739L5.52933 6.52924L11.1847 0.872018Z", 13, 13, "0 0 13 13");
|
|
240
|
+
const editButton = createButton("editButton", handleEdit, editSvg);
|
|
241
|
+
const shareButton = createButton("shareButton", handleShare);
|
|
242
|
+
buttons = { editButton, shareButton };
|
|
243
|
+
panel.append(editButton.button, shareButton.button);
|
|
244
|
+
return panel;
|
|
245
|
+
}
|
|
246
|
+
function createButton(buttonType, handler, icon) {
|
|
247
|
+
const button = document.createElement("button");
|
|
248
|
+
applyStyles(button, BUTTON_STYLES);
|
|
249
|
+
if (icon) {
|
|
250
|
+
button.appendChild(icon);
|
|
251
|
+
}
|
|
252
|
+
const defaultText = TEXT_DEAFULT[buttonType];
|
|
253
|
+
const text = document.createElement("p");
|
|
254
|
+
text.textContent = defaultText;
|
|
255
|
+
button.append(text);
|
|
256
|
+
const buttonWrapper = { button, text, defaultText, icon };
|
|
257
|
+
button.addEventListener("click", onClickWrapper(handler, buttonWrapper));
|
|
258
|
+
return buttonWrapper;
|
|
259
|
+
}
|
|
260
|
+
function initUI() {
|
|
261
|
+
const panel = createTitlePanel();
|
|
262
|
+
document.body.append(panel);
|
|
263
|
+
}
|
|
264
|
+
document.addEventListener("DOMContentLoaded", initUI);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "microboard-ui-temp",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.6",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"i18next-browser-languagedetector": "^8.2.0",
|
|
52
52
|
"js-cookie": "^3.0.5",
|
|
53
53
|
"jwt-decode": "^4.0.0",
|
|
54
|
-
"microboard-temp": "^0.4.
|
|
54
|
+
"microboard-temp": "^0.4.102",
|
|
55
55
|
"nanoid": "^5.1.5",
|
|
56
56
|
"prop-types": "^15.8.1",
|
|
57
57
|
"react-hot-toast": "2.4.1",
|