microboard-temp 0.4.107 → 0.5.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.
- package/dist/cjs/browser.js +68 -452
- package/dist/cjs/index.js +68 -452
- package/dist/cjs/node.js +68 -452
- package/dist/esm/browser.js +68 -452
- package/dist/esm/index.js +68 -452
- package/dist/esm/node.js +68 -452
- package/dist/microboard.css +1 -1
- package/dist/types/Keyboard/HotkeyRegistry.d.ts +13 -0
- package/dist/types/Keyboard/index.d.ts +1 -0
- package/package.json +1 -1
- package/dist/types/public/customWebComponents.d.ts +0 -24
- package/dist/types/public/loadLinkImages.d.ts +0 -0
package/dist/esm/browser.js
CHANGED
|
@@ -47673,6 +47673,19 @@ function throttle(func, delay) {
|
|
|
47673
47673
|
};
|
|
47674
47674
|
}
|
|
47675
47675
|
|
|
47676
|
+
// src/Keyboard/HotkeyRegistry.ts
|
|
47677
|
+
var editModeHotkeyRegistry = {};
|
|
47678
|
+
var viewModeHotkeyRegistry = {};
|
|
47679
|
+
var hotkeyNames = {};
|
|
47680
|
+
function registerHotkey({ name, hotkey, hotkeyConfig, boardMode }) {
|
|
47681
|
+
if (boardMode === "edit") {
|
|
47682
|
+
editModeHotkeyRegistry[name] = hotkeyConfig;
|
|
47683
|
+
} else {
|
|
47684
|
+
viewModeHotkeyRegistry[name] = hotkeyConfig;
|
|
47685
|
+
}
|
|
47686
|
+
hotkeyNames[name] = hotkey;
|
|
47687
|
+
}
|
|
47688
|
+
|
|
47676
47689
|
// src/Items/Examples/CardGame/Card/Card.ts
|
|
47677
47690
|
var defaultCardData = {
|
|
47678
47691
|
itemType: "Card",
|
|
@@ -47789,6 +47802,23 @@ registerItem({
|
|
|
47789
47802
|
item: Card,
|
|
47790
47803
|
defaultData: defaultCardData
|
|
47791
47804
|
});
|
|
47805
|
+
registerHotkey({
|
|
47806
|
+
name: "flipCard",
|
|
47807
|
+
hotkey: { key: { button: "KeyF" }, label: { windows: "F", mac: "F" } },
|
|
47808
|
+
boardMode: "edit",
|
|
47809
|
+
hotkeyConfig: {
|
|
47810
|
+
allItemsType: ["Card"],
|
|
47811
|
+
cb: (event, board) => {
|
|
47812
|
+
const cards = board?.selection.items.list();
|
|
47813
|
+
if (!cards) {
|
|
47814
|
+
return;
|
|
47815
|
+
}
|
|
47816
|
+
cards.forEach((card) => {
|
|
47817
|
+
card.toggleIsOpen();
|
|
47818
|
+
});
|
|
47819
|
+
}
|
|
47820
|
+
}
|
|
47821
|
+
});
|
|
47792
47822
|
// src/Items/Examples/CardGame/Deck/Deck.ts
|
|
47793
47823
|
var defaultDeckData = {
|
|
47794
47824
|
itemType: "Deck"
|
|
@@ -49219,10 +49249,11 @@ var hotkeys_default = {
|
|
|
49219
49249
|
|
|
49220
49250
|
// src/Keyboard/isHotkeyPushed.ts
|
|
49221
49251
|
function isHotkeyPushed(hotkey, event) {
|
|
49222
|
-
|
|
49252
|
+
const hotkeys = { ...hotkeys_default, ...hotkeyNames };
|
|
49253
|
+
if (!hotkeys[hotkey]) {
|
|
49223
49254
|
return false;
|
|
49224
49255
|
}
|
|
49225
|
-
const { key } =
|
|
49256
|
+
const { key } = hotkeys[hotkey];
|
|
49226
49257
|
const isControlPushed = event.ctrlKey || event.metaKey;
|
|
49227
49258
|
const isShiftPushed = event.shiftKey;
|
|
49228
49259
|
const isAltPushed = event.altKey;
|
|
@@ -49602,13 +49633,14 @@ function logHotkey(hotkeyConfig, hotkeyName, status, context) {
|
|
|
49602
49633
|
|
|
49603
49634
|
// src/Keyboard/checkHotkeys.ts
|
|
49604
49635
|
function checkHotkeys(hotkeyMap, event, board) {
|
|
49605
|
-
const
|
|
49636
|
+
const fullHotkeysMap = { ...hotkeyMap, ...board.getInterfaceType() === "edit" ? editModeHotkeyRegistry : viewModeHotkeyRegistry };
|
|
49637
|
+
const entries = Object.entries(fullHotkeysMap);
|
|
49606
49638
|
for (const [hotkey, configOrCb] of entries) {
|
|
49607
49639
|
if (isHotkeyPushed(hotkey, event)) {
|
|
49608
49640
|
const context = board.selection.getContext();
|
|
49609
49641
|
if (typeof configOrCb === "function") {
|
|
49610
49642
|
event.preventDefault();
|
|
49611
|
-
configOrCb(event);
|
|
49643
|
+
configOrCb(event, board);
|
|
49612
49644
|
logHotkey(configOrCb, hotkey, "triggered", context);
|
|
49613
49645
|
return true;
|
|
49614
49646
|
}
|
|
@@ -49635,7 +49667,7 @@ function checkHotkeys(hotkeyMap, event, board) {
|
|
|
49635
49667
|
if (preventDefault) {
|
|
49636
49668
|
event.preventDefault();
|
|
49637
49669
|
}
|
|
49638
|
-
cb(event);
|
|
49670
|
+
cb(event, board);
|
|
49639
49671
|
logHotkey(configOrCb, hotkey, "triggered", context);
|
|
49640
49672
|
return true;
|
|
49641
49673
|
}
|
|
@@ -52882,416 +52914,6 @@ class BoardSelection {
|
|
|
52882
52914
|
});
|
|
52883
52915
|
}
|
|
52884
52916
|
}
|
|
52885
|
-
// src/public/customWebComponents.js
|
|
52886
|
-
var customWebComponents_default = `/* eslint-disable max-classes-per-file, @typescript-eslint/no-useless-constructor */
|
|
52887
|
-
class RichTextElement extends HTMLElement {
|
|
52888
|
-
constructor() {
|
|
52889
|
-
super();
|
|
52890
|
-
}
|
|
52891
|
-
}
|
|
52892
|
-
|
|
52893
|
-
class ShapeItemElement extends HTMLElement {
|
|
52894
|
-
constructor() {
|
|
52895
|
-
super();
|
|
52896
|
-
}
|
|
52897
|
-
}
|
|
52898
|
-
|
|
52899
|
-
class StickerElement extends HTMLElement {
|
|
52900
|
-
constructor() {
|
|
52901
|
-
super();
|
|
52902
|
-
}
|
|
52903
|
-
}
|
|
52904
|
-
|
|
52905
|
-
class DrawingElement extends HTMLElement {
|
|
52906
|
-
constructor() {
|
|
52907
|
-
super();
|
|
52908
|
-
}
|
|
52909
|
-
}
|
|
52910
|
-
|
|
52911
|
-
class ConnectorElement extends HTMLElement {
|
|
52912
|
-
constructor() {
|
|
52913
|
-
super();
|
|
52914
|
-
}
|
|
52915
|
-
}
|
|
52916
|
-
|
|
52917
|
-
class FrameItemElement extends HTMLElement {
|
|
52918
|
-
constructor() {
|
|
52919
|
-
super();
|
|
52920
|
-
}
|
|
52921
|
-
}
|
|
52922
|
-
|
|
52923
|
-
class ImageItemElement extends HTMLElement {
|
|
52924
|
-
constructor() {
|
|
52925
|
-
super();
|
|
52926
|
-
}
|
|
52927
|
-
}
|
|
52928
|
-
|
|
52929
|
-
class LinkItemElement extends HTMLElement {
|
|
52930
|
-
constructor() {
|
|
52931
|
-
super();
|
|
52932
|
-
}
|
|
52933
|
-
}
|
|
52934
|
-
|
|
52935
|
-
class AINodeItemElement extends HTMLElement {
|
|
52936
|
-
constructor() {
|
|
52937
|
-
super();
|
|
52938
|
-
}
|
|
52939
|
-
}
|
|
52940
|
-
|
|
52941
|
-
class VideoItemElement extends HTMLElement {
|
|
52942
|
-
constructor() {
|
|
52943
|
-
super();
|
|
52944
|
-
}
|
|
52945
|
-
}
|
|
52946
|
-
|
|
52947
|
-
class CommentElement extends HTMLElement {
|
|
52948
|
-
constructor() {
|
|
52949
|
-
super();
|
|
52950
|
-
}
|
|
52951
|
-
}
|
|
52952
|
-
|
|
52953
|
-
class AudioItemElement extends HTMLElement {
|
|
52954
|
-
constructor() {
|
|
52955
|
-
super();
|
|
52956
|
-
}
|
|
52957
|
-
}
|
|
52958
|
-
|
|
52959
|
-
customElements.define("rich-text", RichTextElement);
|
|
52960
|
-
customElements.define("shape-item", ShapeItemElement);
|
|
52961
|
-
customElements.define("sticker-item", StickerElement);
|
|
52962
|
-
customElements.define("drawing-item", DrawingElement);
|
|
52963
|
-
customElements.define("connector-item", ConnectorElement);
|
|
52964
|
-
customElements.define("frame-item", FrameItemElement);
|
|
52965
|
-
customElements.define("image-item", ImageItemElement);
|
|
52966
|
-
customElements.define("link-item", LinkItemElement);
|
|
52967
|
-
customElements.define("ainode-item", AINodeItemElement);
|
|
52968
|
-
customElements.define("video-item", VideoItemElement);
|
|
52969
|
-
customElements.define("comment-item", CommentElement);
|
|
52970
|
-
customElements.define("audio-item", AudioItemElement);
|
|
52971
|
-
|
|
52972
|
-
document.addEventListener("DOMContentLoaded", () => {
|
|
52973
|
-
const itemsDiv = document.querySelector("#items");
|
|
52974
|
-
if (!itemsDiv) {
|
|
52975
|
-
console.error("ITEMS DIV NOT FOUND!");
|
|
52976
|
-
return;
|
|
52977
|
-
}
|
|
52978
|
-
let isDragging = false;
|
|
52979
|
-
let startX, startY;
|
|
52980
|
-
let translateX = 0;
|
|
52981
|
-
let translateY = 0;
|
|
52982
|
-
let scale = 1;
|
|
52983
|
-
|
|
52984
|
-
itemsDiv.style.transformOrigin = "0 0";
|
|
52985
|
-
document.body.style.cursor = "grab";
|
|
52986
|
-
|
|
52987
|
-
function updateTransform() {
|
|
52988
|
-
itemsDiv.style.transform =
|
|
52989
|
-
"translate(" +
|
|
52990
|
-
translateX +
|
|
52991
|
-
"px, " +
|
|
52992
|
-
translateY +
|
|
52993
|
-
"px) scale(" +
|
|
52994
|
-
scale +
|
|
52995
|
-
")";
|
|
52996
|
-
}
|
|
52997
|
-
|
|
52998
|
-
function handleMouseDown(ev) {
|
|
52999
|
-
isDragging = true;
|
|
53000
|
-
startX = ev.clientX;
|
|
53001
|
-
startY = ev.clientY;
|
|
53002
|
-
itemsDiv.style.cursor = "grabbing";
|
|
53003
|
-
}
|
|
53004
|
-
|
|
53005
|
-
function handleMouseMove(ev) {
|
|
53006
|
-
if (!isDragging) {
|
|
53007
|
-
return;
|
|
53008
|
-
}
|
|
53009
|
-
const dx = ev.clientX - startX;
|
|
53010
|
-
const dy = ev.clientY - startY;
|
|
53011
|
-
startX += dx;
|
|
53012
|
-
startY += dy;
|
|
53013
|
-
translateX += dx;
|
|
53014
|
-
translateY += dy;
|
|
53015
|
-
updateTransform();
|
|
53016
|
-
}
|
|
53017
|
-
|
|
53018
|
-
function handleMouseUp(ev) {
|
|
53019
|
-
if (!isDragging) {
|
|
53020
|
-
return;
|
|
53021
|
-
}
|
|
53022
|
-
isDragging = false;
|
|
53023
|
-
itemsDiv.style.cursor = "grab";
|
|
53024
|
-
}
|
|
53025
|
-
|
|
53026
|
-
function handleWheel(ev) {
|
|
53027
|
-
ev.preventDefault();
|
|
53028
|
-
const factor = ev.deltaY < 0 ? 1.1 : 0.9;
|
|
53029
|
-
translateX = ev.clientX - (ev.clientX - translateX) * factor;
|
|
53030
|
-
translateY = ev.clientY - (ev.clientY - translateY) * factor;
|
|
53031
|
-
scale *= factor;
|
|
53032
|
-
updateTransform();
|
|
53033
|
-
}
|
|
53034
|
-
|
|
53035
|
-
document.addEventListener("mousedown", handleMouseDown);
|
|
53036
|
-
document.addEventListener("mousemove", handleMouseMove);
|
|
53037
|
-
document.addEventListener("mouseup", handleMouseUp);
|
|
53038
|
-
document.addEventListener("wheel", handleWheel, { passive: false });
|
|
53039
|
-
|
|
53040
|
-
const titlePanel = document.createElement("div");
|
|
53041
|
-
titlePanel.style.boxShadow = "0px 10px 16px -3px rgba(20, 21, 26, 0.08)";
|
|
53042
|
-
titlePanel.style.position = "fixed";
|
|
53043
|
-
titlePanel.style.left = "12px";
|
|
53044
|
-
titlePanel.style.top = "12px";
|
|
53045
|
-
titlePanel.style.borderRadius = "12px";
|
|
53046
|
-
titlePanel.style.backgroundColor = "#ffff";
|
|
53047
|
-
titlePanel.style.display = "flex";
|
|
53048
|
-
titlePanel.style.alignItems = "center";
|
|
53049
|
-
titlePanel.style.gap = "8px";
|
|
53050
|
-
titlePanel.style.padding = "0 12px";
|
|
53051
|
-
titlePanel.style.height = "48px";
|
|
53052
|
-
const editButton = document.createElement("button");
|
|
53053
|
-
const editIcon = document.createElementNS(
|
|
53054
|
-
"http://www.w3.org/2000/svg",
|
|
53055
|
-
"svg",
|
|
53056
|
-
);
|
|
53057
|
-
editIcon.setAttribute("width", "13");
|
|
53058
|
-
editIcon.setAttribute("height", "13");
|
|
53059
|
-
editIcon.setAttribute("viewBox", "0 0 13 13");
|
|
53060
|
-
editIcon.setAttribute("fill", "none");
|
|
53061
|
-
editIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
|
|
53062
|
-
const editIconPath = document.createElementNS(
|
|
53063
|
-
"http://www.w3.org/2000/svg",
|
|
53064
|
-
"path",
|
|
53065
|
-
);
|
|
53066
|
-
editIconPath.setAttribute(
|
|
53067
|
-
"d",
|
|
53068
|
-
"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",
|
|
53069
|
-
);
|
|
53070
|
-
editIconPath.setAttribute("fill", "#ffff");
|
|
53071
|
-
editIcon.appendChild(editIconPath);
|
|
53072
|
-
editButton.appendChild(editIcon);
|
|
53073
|
-
const editFileText = document.createElement("p");
|
|
53074
|
-
const isSnapshotInIframe =
|
|
53075
|
-
window.parent &&
|
|
53076
|
-
window.parent !== window &&
|
|
53077
|
-
window.parent.location.href.includes("/snapshots/");
|
|
53078
|
-
editFileText.textContent = isSnapshotInIframe ? "Edit copy" : "Edit file";
|
|
53079
|
-
editButton.appendChild(editFileText);
|
|
53080
|
-
|
|
53081
|
-
editButton.style.backgroundColor = "rgba(20, 21, 26, 1)";
|
|
53082
|
-
editButton.style.cursor = "pointer";
|
|
53083
|
-
editButton.style.boxShadow = "0px 1px 2px 0px rgba(20, 21, 26, 0.05)";
|
|
53084
|
-
editButton.style.color = "#ffff";
|
|
53085
|
-
editButton.style.fontSize = "14px";
|
|
53086
|
-
editButton.style.lineHeight = "20px";
|
|
53087
|
-
editButton.style.display = "flex";
|
|
53088
|
-
editButton.style.alignItems = "center";
|
|
53089
|
-
editButton.style.gap = "8px";
|
|
53090
|
-
editButton.style.padding = "8px";
|
|
53091
|
-
editButton.style.borderRadius = "10px";
|
|
53092
|
-
const separator = document.createElement("div");
|
|
53093
|
-
separator.style.borderRight = "1px solid rgba(222, 224, 227, 1)";
|
|
53094
|
-
separator.style.height = "100%";
|
|
53095
|
-
const boardName = document.createElement("div");
|
|
53096
|
-
const fileIcon = document.createElementNS(
|
|
53097
|
-
"http://www.w3.org/2000/svg",
|
|
53098
|
-
"svg",
|
|
53099
|
-
);
|
|
53100
|
-
fileIcon.setAttribute("width", "16");
|
|
53101
|
-
fileIcon.setAttribute("height", "18");
|
|
53102
|
-
fileIcon.setAttribute("viewBox", "0 0 16 18");
|
|
53103
|
-
fileIcon.setAttribute("fill", "none");
|
|
53104
|
-
fileIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
|
|
53105
|
-
const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
53106
|
-
path.setAttribute(
|
|
53107
|
-
"d",
|
|
53108
|
-
"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",
|
|
53109
|
-
);
|
|
53110
|
-
path.setAttribute("fill", "#696B76");
|
|
53111
|
-
fileIcon.appendChild(path);
|
|
53112
|
-
boardName.appendChild(fileIcon);
|
|
53113
|
-
const boardNameTag = document.querySelector('meta[name="board-name"]');
|
|
53114
|
-
let boardNameStr = "Untitled";
|
|
53115
|
-
if (boardNameTag) {
|
|
53116
|
-
boardNameStr = boardNameTag.getAttribute("content");
|
|
53117
|
-
}
|
|
53118
|
-
const p = document.createElement("p");
|
|
53119
|
-
p.textContent = boardNameStr;
|
|
53120
|
-
p.style.fontSize = "16px";
|
|
53121
|
-
p.style.lineHeight = "24px";
|
|
53122
|
-
boardName.appendChild(p);
|
|
53123
|
-
const cloudIcon = document.createElementNS(
|
|
53124
|
-
"http://www.w3.org/2000/svg",
|
|
53125
|
-
"svg",
|
|
53126
|
-
);
|
|
53127
|
-
cloudIcon.setAttribute("width", "20");
|
|
53128
|
-
cloudIcon.setAttribute("height", "18");
|
|
53129
|
-
cloudIcon.setAttribute("viewBox", "0 0 20 18");
|
|
53130
|
-
cloudIcon.setAttribute("fill", "none");
|
|
53131
|
-
cloudIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
|
|
53132
|
-
const cloudIconPath = document.createElementNS(
|
|
53133
|
-
"http://www.w3.org/2000/svg",
|
|
53134
|
-
"path",
|
|
53135
|
-
);
|
|
53136
|
-
cloudIconPath.setAttribute(
|
|
53137
|
-
"d",
|
|
53138
|
-
"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",
|
|
53139
|
-
);
|
|
53140
|
-
cloudIconPath.setAttribute("fill", "#696B76");
|
|
53141
|
-
cloudIcon.appendChild(cloudIconPath);
|
|
53142
|
-
boardName.appendChild(cloudIcon);
|
|
53143
|
-
boardName.style.display = "flex";
|
|
53144
|
-
boardName.style.alignItems = "center";
|
|
53145
|
-
boardName.style.gap = "8px";
|
|
53146
|
-
titlePanel.appendChild(boardName);
|
|
53147
|
-
titlePanel.appendChild(separator);
|
|
53148
|
-
titlePanel.appendChild(editButton);
|
|
53149
|
-
document.body.appendChild(titlePanel);
|
|
53150
|
-
|
|
53151
|
-
editButton.onclick = async () => {
|
|
53152
|
-
editButton.disabled = true;
|
|
53153
|
-
editButton.textContent = "Loading...";
|
|
53154
|
-
|
|
53155
|
-
try {
|
|
53156
|
-
document.removeEventListener("mousedown", handleMouseDown);
|
|
53157
|
-
document.removeEventListener("mousemove", handleMouseMove);
|
|
53158
|
-
document.removeEventListener("mouseup", handleMouseUp);
|
|
53159
|
-
document.removeEventListener("wheel", handleWheel, {
|
|
53160
|
-
passive: false,
|
|
53161
|
-
});
|
|
53162
|
-
translateX = 0;
|
|
53163
|
-
translateY = 0;
|
|
53164
|
-
scale = 1;
|
|
53165
|
-
updateTransform();
|
|
53166
|
-
|
|
53167
|
-
const { initBrowserSettings } = await import(
|
|
53168
|
-
"https://www.unpkg.com/test_package_board@0.0.99/dist/bundle.js"
|
|
53169
|
-
);
|
|
53170
|
-
initBrowserSettings();
|
|
53171
|
-
|
|
53172
|
-
const { createApp } = await import(
|
|
53173
|
-
"https://www.unpkg.com/test_package_board@0.0.99/dist/bundle.js"
|
|
53174
|
-
);
|
|
53175
|
-
|
|
53176
|
-
const app = createApp();
|
|
53177
|
-
window.app = app;
|
|
53178
|
-
const stringed = await app.openAndEditFile();
|
|
53179
|
-
|
|
53180
|
-
if (stringed) {
|
|
53181
|
-
await app.openBoardFromFile();
|
|
53182
|
-
app.getBoard().deserializeHTML(stringed);
|
|
53183
|
-
app.localRender("items");
|
|
53184
|
-
}
|
|
53185
|
-
|
|
53186
|
-
const response = await fetch(
|
|
53187
|
-
"https://www.unpkg.com/test_package_board@0.0.99/dist/bundle.css",
|
|
53188
|
-
);
|
|
53189
|
-
const cssText = await response.text();
|
|
53190
|
-
const styleEl = document.createElement("style");
|
|
53191
|
-
styleEl.textContent = cssText;
|
|
53192
|
-
document.body.appendChild(styleEl);
|
|
53193
|
-
|
|
53194
|
-
const responseSvg = await fetch(
|
|
53195
|
-
"https://www.unpkg.com/test_package_board@0.0.99/dist/sprite.svg",
|
|
53196
|
-
);
|
|
53197
|
-
const svgText = await responseSvg.text();
|
|
53198
|
-
const div = document.createElement("div");
|
|
53199
|
-
div.style.display = "none";
|
|
53200
|
-
div.id = "sprite";
|
|
53201
|
-
div.innerHTML = svgText;
|
|
53202
|
-
document.body.appendChild(div);
|
|
53203
|
-
} finally {
|
|
53204
|
-
editButton.disabled = false;
|
|
53205
|
-
editButton.textContent = "Edit board";
|
|
53206
|
-
}
|
|
53207
|
-
};
|
|
53208
|
-
});
|
|
53209
|
-
`;
|
|
53210
|
-
|
|
53211
|
-
// src/public/index.css
|
|
53212
|
-
var public_default = `@import "https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap";
|
|
53213
|
-
@import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap";
|
|
53214
|
-
|
|
53215
|
-
/* ../src/index.css */
|
|
53216
|
-
:root {
|
|
53217
|
-
--background-surface-default: rgb(255, 255, 255);
|
|
53218
|
-
--background-button-secondary: rgb(255, 255, 255);
|
|
53219
|
-
--background-button-secondary-hover: rgb(247, 247, 248);
|
|
53220
|
-
--background-badge-purple-disabled: rgb(247, 241, 253);
|
|
53221
|
-
--background-badge-gray: rgb(233, 234, 236);
|
|
53222
|
-
--background-accent-purple: rgb(146, 79, 232);
|
|
53223
|
-
--border-action-normal: rgb(222, 223, 227);
|
|
53224
|
-
--border-action-focus: rgb(146, 79, 232);
|
|
53225
|
-
--border-select-primary: rgb(146, 79, 232);
|
|
53226
|
-
--text-base-primary: rgb(20, 21, 26);
|
|
53227
|
-
--text-base-secondary: rgba(15, 19, 36, 0.6);
|
|
53228
|
-
--text-base-quaternary: rgb(10, 15, 41, 0.25);
|
|
53229
|
-
--text-accent-purple: rgb(152, 89, 233);
|
|
53230
|
-
--icon-base-primary: rgb(20, 21, 26);
|
|
53231
|
-
--icon-base-secondary: rgb(105, 107, 118);
|
|
53232
|
-
--icon-accent-purple: rgb(146, 79, 232);
|
|
53233
|
-
--absolute-position-panel-padding: 12px;
|
|
53234
|
-
}
|
|
53235
|
-
* {
|
|
53236
|
-
box-sizing: border-box;
|
|
53237
|
-
padding: 0;
|
|
53238
|
-
margin: 0;
|
|
53239
|
-
border: none;
|
|
53240
|
-
background: none;
|
|
53241
|
-
font-family: inherit;
|
|
53242
|
-
}
|
|
53243
|
-
html {
|
|
53244
|
-
font-size: 62.5%;
|
|
53245
|
-
}
|
|
53246
|
-
body {
|
|
53247
|
-
color: var(--text-base-primary);
|
|
53248
|
-
font-size: 1.6rem;
|
|
53249
|
-
font-optical-sizing: auto;
|
|
53250
|
-
font-style: normal;
|
|
53251
|
-
font-family: "Manrope", sans-serif;
|
|
53252
|
-
}
|
|
53253
|
-
html,
|
|
53254
|
-
body {
|
|
53255
|
-
overscroll-behavior-x: none;
|
|
53256
|
-
-webkit-user-select: none;
|
|
53257
|
-
}
|
|
53258
|
-
input:-webkit-autofill,
|
|
53259
|
-
input:-webkit-autofill:hover,
|
|
53260
|
-
input:-webkit-autofill:focus,
|
|
53261
|
-
input:-webkit-autofill:active {
|
|
53262
|
-
-webkit-box-shadow: 0 0 0 30px white inset !important;
|
|
53263
|
-
}
|
|
53264
|
-
`;
|
|
53265
|
-
|
|
53266
|
-
// src/public/loadLinkImages.js
|
|
53267
|
-
var loadLinkImages_default = `document.addEventListener("DOMContentLoaded", function () {
|
|
53268
|
-
document.querySelectorAll(".link-object").forEach(linkItem => {
|
|
53269
|
-
const linkImage = linkItem.querySelector(".link-image");
|
|
53270
|
-
const linkContainer = linkItem.querySelector("a");
|
|
53271
|
-
linkImage.onerror = () => {
|
|
53272
|
-
linkImage.onerror = null;
|
|
53273
|
-
linkImage.style.display = "none";
|
|
53274
|
-
const svgNamespace = "http://www.w3.org/2000/svg";
|
|
53275
|
-
const svg = document.createElementNS(svgNamespace, "svg");
|
|
53276
|
-
svg.setAttribute("width", "20");
|
|
53277
|
-
svg.setAttribute("height", "20");
|
|
53278
|
-
svg.setAttribute("viewBox", "0 0 13 14");
|
|
53279
|
-
svg.setAttribute("fill", "none");
|
|
53280
|
-
|
|
53281
|
-
const path = document.createElementNS(svgNamespace, "path");
|
|
53282
|
-
path.setAttribute(
|
|
53283
|
-
"d",
|
|
53284
|
-
"M11.0054 3.414L2.39838 12.021L0.984375 10.607L9.59037 2H2.00538V0H13.0054V11H11.0054V3.414Z",
|
|
53285
|
-
);
|
|
53286
|
-
path.setAttribute("fill", "#924FE8");
|
|
53287
|
-
svg.appendChild(path);
|
|
53288
|
-
|
|
53289
|
-
linkContainer.appendChild(svg);
|
|
53290
|
-
};
|
|
53291
|
-
});
|
|
53292
|
-
});
|
|
53293
|
-
`;
|
|
53294
|
-
|
|
53295
52917
|
// src/Board.ts
|
|
53296
52918
|
class Board {
|
|
53297
52919
|
boardId;
|
|
@@ -53674,47 +53296,29 @@ class Board {
|
|
|
53674
53296
|
return this.copy();
|
|
53675
53297
|
}
|
|
53676
53298
|
serializeHTML() {
|
|
53677
|
-
const customTagsScript = customWebComponents_default;
|
|
53678
|
-
const loadLinksImagesScript = loadLinkImages_default;
|
|
53679
|
-
const css = public_default;
|
|
53680
53299
|
const boardName = this.getName() || this.getBoardId();
|
|
53681
53300
|
const items = this.items.getWholeHTML(conf.documentFactory);
|
|
53682
53301
|
const itemsDiv = `<div id="items">${items}</div>`;
|
|
53683
53302
|
const scripts = `
|
|
53684
|
-
<script type="module"
|
|
53685
|
-
|
|
53303
|
+
<script type="module" src="https://unpkg.com/microboard-ui-temp/dist/customWebComponents.js"></script>
|
|
53304
|
+
<script type="module" src="https://unpkg.com/microboard-ui-temp/dist/controlsHandlers.js"></script>
|
|
53305
|
+
<script type="module" src="https://unpkg.com/microboard-ui-temp/dist/titlePanel.js"></script>
|
|
53306
|
+
<script defer src="https://unpkg.com/microboard-ui-temp/dist/loadLinksImages.js"></script>
|
|
53686
53307
|
`;
|
|
53687
53308
|
const body = `<body style="overflow-x: hidden; overflow-y: hidden;">${itemsDiv}${scripts}</body>`;
|
|
53688
53309
|
const head = `
|
|
53689
|
-
|
|
53690
|
-
|
|
53691
|
-
|
|
53692
|
-
|
|
53693
|
-
|
|
53694
|
-
|
|
53695
|
-
|
|
53696
|
-
|
|
53697
|
-
|
|
53698
|
-
|
|
53699
|
-
|
|
53700
|
-
|
|
53701
|
-
appearance: none;
|
|
53702
|
-
width: 3px;
|
|
53703
|
-
height: 3px
|
|
53704
|
-
}
|
|
53705
|
-
::-webkit-scrollbar-button {
|
|
53706
|
-
display: none;
|
|
53707
|
-
}
|
|
53708
|
-
::-webkit-scrollbar-thumb {
|
|
53709
|
-
display: block;
|
|
53710
|
-
background-color: black;
|
|
53711
|
-
border-radius: 2px;
|
|
53712
|
-
}
|
|
53713
|
-
body {
|
|
53714
|
-
background-color: rgba(200, 200, 200, 0.2);
|
|
53715
|
-
}
|
|
53716
|
-
</style>
|
|
53717
|
-
</head>`.replace(/\t|\n/g, "");
|
|
53310
|
+
<head>
|
|
53311
|
+
<meta charset="utf-8" />
|
|
53312
|
+
<meta name="last-event-order" content="${this.events?.log.getLastIndex()}" />
|
|
53313
|
+
<title>Microboard ${boardName}</title>
|
|
53314
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
53315
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
53316
|
+
<link
|
|
53317
|
+
href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap"
|
|
53318
|
+
rel="stylesheet"
|
|
53319
|
+
/>
|
|
53320
|
+
<link rel="stylesheet" crossorigin href="https://unpkg.com/microboard-ui-temp/dist/board.css" />
|
|
53321
|
+
</head>`.replace(/\t|\n/g, "");
|
|
53718
53322
|
return `${head}${body}`;
|
|
53719
53323
|
}
|
|
53720
53324
|
deserializeHTMLAndEmit(stringedHTML) {
|
|
@@ -53784,7 +53388,10 @@ class Board {
|
|
|
53784
53388
|
const addItem = (itemData) => {
|
|
53785
53389
|
const item = this.createItem(itemData.id, itemData);
|
|
53786
53390
|
if (item instanceof Connector2) {
|
|
53787
|
-
createdConnectors[itemData.id] = {
|
|
53391
|
+
createdConnectors[itemData.id] = {
|
|
53392
|
+
item,
|
|
53393
|
+
itemData
|
|
53394
|
+
};
|
|
53788
53395
|
}
|
|
53789
53396
|
if ("index" in item && item.index) {
|
|
53790
53397
|
createdGroups[item.getId()] = { item, itemData };
|
|
@@ -53819,10 +53426,16 @@ class Board {
|
|
|
53819
53426
|
for (const itemData of items) {
|
|
53820
53427
|
const item = this.createItem(itemData.id, itemData);
|
|
53821
53428
|
if (item instanceof Connector2) {
|
|
53822
|
-
createdConnectors[itemData.id] = {
|
|
53429
|
+
createdConnectors[itemData.id] = {
|
|
53430
|
+
item,
|
|
53431
|
+
itemData
|
|
53432
|
+
};
|
|
53823
53433
|
}
|
|
53824
53434
|
if ("index" in item && item.index) {
|
|
53825
|
-
createdGroups[item.getId()] = {
|
|
53435
|
+
createdGroups[item.getId()] = {
|
|
53436
|
+
item,
|
|
53437
|
+
itemData
|
|
53438
|
+
};
|
|
53826
53439
|
}
|
|
53827
53440
|
this.index.insert(item);
|
|
53828
53441
|
}
|
|
@@ -56820,6 +56433,7 @@ function initBrowserSettings() {
|
|
|
56820
56433
|
// src/browser.ts
|
|
56821
56434
|
initBrowserSettings();
|
|
56822
56435
|
export {
|
|
56436
|
+
viewModeHotkeyRegistry,
|
|
56823
56437
|
validateRichTextData,
|
|
56824
56438
|
validateItemsMap,
|
|
56825
56439
|
uploadVideoToStorage,
|
|
@@ -56859,6 +56473,7 @@ export {
|
|
|
56859
56473
|
isFiniteNumber,
|
|
56860
56474
|
isControlCharacter,
|
|
56861
56475
|
initI18N,
|
|
56476
|
+
hotkeyNames,
|
|
56862
56477
|
getYouTubeVideoPreview,
|
|
56863
56478
|
getYouTubeThumbnail,
|
|
56864
56479
|
getVideoMetadata,
|
|
@@ -56873,6 +56488,7 @@ export {
|
|
|
56873
56488
|
forceNumberIntoInterval,
|
|
56874
56489
|
fileTosha256,
|
|
56875
56490
|
exportBoardSnapshot,
|
|
56491
|
+
editModeHotkeyRegistry,
|
|
56876
56492
|
decodeHtml,
|
|
56877
56493
|
defaultCursors as cursors,
|
|
56878
56494
|
createVideoItem,
|