microboard-ui-temp 0.1.13 → 0.1.15

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/board.html +85 -82
  2. package/dist/index.css +0 -62
  3. package/dist/index.js +63 -446
  4. package/package.json +2 -2
package/dist/board.html CHANGED
@@ -1,87 +1,90 @@
1
- <head>
2
- <meta charset="utf-8" />
3
- <meta name="last-event-order" content="0" />
4
- <title>Microboard basic board</title>
5
- <link rel="preconnect" href="https://fonts.googleapis.com" />
6
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
7
- <link
8
- href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap"
9
- rel="stylesheet"
10
- />
11
- <link rel="stylesheet" crossorigin href="https://unpkg.com/microboard-ui-temp/dist/board.css" />
12
- </head>
13
- <body style="overflow-x: hidden; overflow-y: hidden">
14
- <div id="items">
15
- <shape-item
16
- id="c8afcf81-52fa-4d10-b20e-5b8d646144cb"
17
- data-shape-type="Rhombus"
18
- fill="none"
19
- stroke="rgb(20, 21, 26)"
20
- data-border-style="solid"
21
- stroke-dasharray=""
22
- stroke-width="1"
23
- data-link-to=""
24
- style="
25
- width: 100.465px;
26
- height: 100.465px;
27
- transform-origin: left top;
28
- transform: translate(490.324px, 232.34px) scale(2.15218, 2.15218);
29
- position: absolute;
30
- "
31
- ><svg
32
- width="100.46464515049854px"
33
- height="100.4646451504986px"
34
- viewBox="0 0 100.46464515049854 100.4646451504986"
35
- transform-origin="0 0"
36
- transform="scale(0.46464515049856425, 0.46464515049856425)"
37
- style="position: absolute; overflow: visible"
38
- >
39
- <path
40
- d="M 0 50 L 50 0 L 100 50 L 50 100 L 0 50 Z"
41
- fill="none"
42
- fill-opacity="1"
43
- stroke="rgb(20, 21, 26)"
44
- vector-effect="non-scaling-stroke"
45
- stroke-width="1"
46
- stroke-opacity="1"
47
- stroke-dasharray=""
48
- transform-origin="0 0"
49
- transform="scale(2.15218, 2.15218)"
50
- ></path>
51
- </svg>
52
- <rich-text
53
- id="c8afcf81-52fa-4d10-b20e-5b8d646144cb_text"
54
- data-vertical-alignment="center"
55
- data-placeholder-text="&nbsp;"
56
- data-real-size="14"
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta name="last-event-order" content="0" />
6
+ <title>Microboard basic board</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9
+ <link
10
+ href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap"
11
+ rel="stylesheet"
12
+ />
13
+ <link rel="stylesheet" crossorigin href="https://unpkg.com/microboard-ui-temp/dist/board.css" />
14
+ </head>
15
+ <body style="overflow-x: hidden; overflow-y: hidden">
16
+ <div id="items">
17
+ <shape-item
18
+ id="c8afcf81-52fa-4d10-b20e-5b8d646144cb"
19
+ data-shape-type="Rhombus"
20
+ fill="none"
21
+ stroke="rgb(20, 21, 26)"
22
+ data-border-style="solid"
23
+ stroke-dasharray=""
24
+ stroke-width="1"
57
25
  data-link-to=""
58
26
  style="
59
- width: 112.609px;
60
- height: 107.609px;
27
+ width: 100.465px;
28
+ height: 100.465px;
61
29
  transform-origin: left top;
62
- transform: translate(23.2122px, 24.3738px) scale(0.464645, 0.464645);
30
+ transform: translate(490.324px, 232.34px) scale(2.15218, 2.15218);
63
31
  position: absolute;
64
- overflow: auto;
65
- overflow-wrap: break-word;
66
- max-width: 216.218px;
67
- margin-top: 20.4465px;
68
32
  "
69
- ><p style="text-align: center; line-height: 1.4; margin: 0px">
70
- <span
71
- style="
72
- font-weight: 400;
73
- color: black;
74
- font-size: 14px;
75
- font-family: &quot;Open Sans&quot;;
76
- "
77
- >123</span
78
- >
79
- </p></rich-text
80
- ></shape-item
81
- >
82
- </div>
83
- <script type="module" src="https://unpkg.com/microboard-ui-temp/dist/customWebComponents.js"></script>
84
- <script type="module" src="https://unpkg.com/microboard-ui-temp/dist/controlsHandlers.js"></script>
85
- <script type="module" src="https://unpkg.com/microboard-ui-temp/dist/titlePanel.js"></script>
86
- <script defer src="https://unpkg.com/microboard-ui-temp/dist/loadLinksImages.js"></script>
87
- </body>
33
+ ><svg
34
+ width="100.46464515049854px"
35
+ height="100.4646451504986px"
36
+ viewBox="0 0 100.46464515049854 100.4646451504986"
37
+ transform-origin="0 0"
38
+ transform="scale(0.46464515049856425, 0.46464515049856425)"
39
+ style="position: absolute; overflow: visible"
40
+ >
41
+ <path
42
+ d="M 0 50 L 50 0 L 100 50 L 50 100 L 0 50 Z"
43
+ fill="none"
44
+ fill-opacity="1"
45
+ stroke="rgb(20, 21, 26)"
46
+ vector-effect="non-scaling-stroke"
47
+ stroke-width="1"
48
+ stroke-opacity="1"
49
+ stroke-dasharray=""
50
+ transform-origin="0 0"
51
+ transform="scale(2.15218, 2.15218)"
52
+ ></path>
53
+ </svg>
54
+ <rich-text
55
+ id="c8afcf81-52fa-4d10-b20e-5b8d646144cb_text"
56
+ data-vertical-alignment="center"
57
+ data-placeholder-text="&nbsp;"
58
+ data-real-size="14"
59
+ data-link-to=""
60
+ style="
61
+ width: 112.609px;
62
+ height: 107.609px;
63
+ transform-origin: left top;
64
+ transform: translate(23.2122px, 24.3738px) scale(0.464645, 0.464645);
65
+ position: absolute;
66
+ overflow: auto;
67
+ overflow-wrap: break-word;
68
+ max-width: 216.218px;
69
+ margin-top: 20.4465px;
70
+ "
71
+ ><p style="text-align: center; line-height: 1.4; margin: 0px">
72
+ <span
73
+ style="
74
+ font-weight: 400;
75
+ color: black;
76
+ font-size: 14px;
77
+ font-family: &quot;Open Sans&quot;;
78
+ "
79
+ >123</span
80
+ >
81
+ </p></rich-text
82
+ ></shape-item
83
+ >
84
+ </div>
85
+ <script type="module" src="https://unpkg.com/microboard-ui-temp/dist/customWebComponents.js"></script>
86
+ <script type="module" src="https://unpkg.com/microboard-ui-temp/dist/controlsHandlers.js"></script>
87
+ <script type="module" src="https://unpkg.com/microboard-ui-temp/dist/titlePanel.js"></script>
88
+ <script defer src="https://unpkg.com/microboard-ui-temp/dist/loadLinksImages.js"></script>
89
+ </body>
90
+ </html>
package/dist/index.css CHANGED
@@ -13659,68 +13659,6 @@ audio::-webkit-media-controls-enclosure {
13659
13659
  }
13660
13660
 
13661
13661
  /* node_modules/microboard-temp/dist/microboard.css */
13662
- :root {
13663
- --background-surface-default: #fff;
13664
- --background-button-secondary: #fff;
13665
- --background-button-secondary-hover: #f7f7f8;
13666
- --background-badge-purple-disabled: #f7f1fd;
13667
- --background-badge-gray: #e9eaec;
13668
- --background-accent-purple: #924fe8;
13669
- --border-action-normal: #dedfe3;
13670
- --border-action-focus: #924fe8;
13671
- --border-select-primary: #924fe8;
13672
- --text-base-primary: #14151a;
13673
- --text-base-secondary: #0f132499;
13674
- --text-base-quaternary: #0a0f2940;
13675
- --text-accent-purple: #9859e9;
13676
- --icon-base-primary: #14151a;
13677
- --icon-base-secondary: #696b76;
13678
- --icon-accent-purple: #924fe8;
13679
- --absolute-position-panel-padding: 12px;
13680
- }
13681
-
13682
- * {
13683
- box-sizing: border-box;
13684
- background: none;
13685
- border: none;
13686
- margin: 0;
13687
- padding: 0;
13688
- font-family: inherit;
13689
- }
13690
-
13691
- html {
13692
- font-size: 62.5%;
13693
- }
13694
-
13695
- body {
13696
- color: var(--text-base-primary);
13697
- font-optical-sizing: auto;
13698
- font-family: Manrope, sans-serif;
13699
- font-size: 1.6rem;
13700
- font-style: normal;
13701
- }
13702
-
13703
- html, body {
13704
- overscroll-behavior-x: none;
13705
- -webkit-user-select: none;
13706
- }
13707
-
13708
- input:-webkit-autofill {
13709
- -webkit-box-shadow: inset 0 0 0 30px #fff !important;
13710
- }
13711
-
13712
- input:-webkit-autofill:hover {
13713
- -webkit-box-shadow: inset 0 0 0 30px #fff !important;
13714
- }
13715
-
13716
- input:-webkit-autofill:focus {
13717
- -webkit-box-shadow: inset 0 0 0 30px #fff !important;
13718
- }
13719
-
13720
- input:-webkit-autofill:active {
13721
- -webkit-box-shadow: inset 0 0 0 30px #fff !important;
13722
- }
13723
-
13724
13662
  .microboard-quickAddButton {
13725
13663
  transform-origin: 50%;
13726
13664
  z-index: 2;
package/dist/index.js CHANGED
@@ -255858,6 +255858,17 @@ function throttle2(func, delay) {
255858
255858
  }
255859
255859
  };
255860
255860
  }
255861
+ var editModeHotkeyRegistry = {};
255862
+ var viewModeHotkeyRegistry = {};
255863
+ var hotkeyNames = {};
255864
+ function registerHotkey({ name, hotkey, hotkeyConfig, boardMode }) {
255865
+ if (boardMode === "edit") {
255866
+ editModeHotkeyRegistry[name] = hotkeyConfig;
255867
+ } else {
255868
+ viewModeHotkeyRegistry[name] = hotkeyConfig;
255869
+ }
255870
+ hotkeyNames[name] = hotkey;
255871
+ }
255861
255872
  var defaultCardData = {
255862
255873
  itemType: "Card",
255863
255874
  isOpen: false,
@@ -255973,6 +255984,23 @@ registerItem({
255973
255984
  item: Card,
255974
255985
  defaultData: defaultCardData
255975
255986
  });
255987
+ registerHotkey({
255988
+ name: "flipCard",
255989
+ hotkey: { key: { button: "KeyF" }, label: { windows: "F", mac: "F" } },
255990
+ boardMode: "edit",
255991
+ hotkeyConfig: {
255992
+ allItemsType: ["Card"],
255993
+ cb: (event, board) => {
255994
+ const cards = board?.selection.items.list();
255995
+ if (!cards) {
255996
+ return;
255997
+ }
255998
+ cards.forEach((card) => {
255999
+ card.toggleIsOpen();
256000
+ });
256001
+ }
256002
+ }
256003
+ });
255976
256004
  var defaultDeckData = {
255977
256005
  itemType: "Deck"
255978
256006
  };
@@ -257344,10 +257372,11 @@ var hotkeys_default = {
257344
257372
  }
257345
257373
  };
257346
257374
  function isHotkeyPushed(hotkey, event) {
257347
- if (!hotkeys_default[hotkey]) {
257375
+ const hotkeys2 = { ...hotkeys_default, ...hotkeyNames };
257376
+ if (!hotkeys2[hotkey]) {
257348
257377
  return false;
257349
257378
  }
257350
- const { key } = hotkeys_default[hotkey];
257379
+ const { key } = hotkeys2[hotkey];
257351
257380
  const isControlPushed = event.ctrlKey || event.metaKey;
257352
257381
  const isShiftPushed = event.shiftKey;
257353
257382
  const isAltPushed = event.altKey;
@@ -257721,13 +257750,14 @@ function logHotkey(hotkeyConfig, hotkeyName, status, context) {
257721
257750
  console.groupEnd();
257722
257751
  }
257723
257752
  function checkHotkeys(hotkeyMap, event, board) {
257724
- const entries = Object.entries(hotkeyMap);
257753
+ const fullHotkeysMap = { ...hotkeyMap, ...board.getInterfaceType() === "edit" ? editModeHotkeyRegistry : viewModeHotkeyRegistry };
257754
+ const entries = Object.entries(fullHotkeysMap);
257725
257755
  for (const [hotkey, configOrCb] of entries) {
257726
257756
  if (isHotkeyPushed(hotkey, event)) {
257727
257757
  const context = board.selection.getContext();
257728
257758
  if (typeof configOrCb === "function") {
257729
257759
  event.preventDefault();
257730
- configOrCb(event);
257760
+ configOrCb(event, board);
257731
257761
  logHotkey(configOrCb, hotkey, "triggered", context);
257732
257762
  return true;
257733
257763
  }
@@ -257754,7 +257784,7 @@ function checkHotkeys(hotkeyMap, event, board) {
257754
257784
  if (preventDefault) {
257755
257785
  event.preventDefault();
257756
257786
  }
257757
- cb(event);
257787
+ cb(event, board);
257758
257788
  logHotkey(configOrCb, hotkey, "triggered", context);
257759
257789
  return true;
257760
257790
  }
@@ -260966,410 +260996,6 @@ class BoardSelection {
260966
260996
  });
260967
260997
  }
260968
260998
  }
260969
- var customWebComponents_default = `/* eslint-disable max-classes-per-file, @typescript-eslint/no-useless-constructor */
260970
- class RichTextElement extends HTMLElement {
260971
- constructor() {
260972
- super();
260973
- }
260974
- }
260975
-
260976
- class ShapeItemElement extends HTMLElement {
260977
- constructor() {
260978
- super();
260979
- }
260980
- }
260981
-
260982
- class StickerElement extends HTMLElement {
260983
- constructor() {
260984
- super();
260985
- }
260986
- }
260987
-
260988
- class DrawingElement extends HTMLElement {
260989
- constructor() {
260990
- super();
260991
- }
260992
- }
260993
-
260994
- class ConnectorElement extends HTMLElement {
260995
- constructor() {
260996
- super();
260997
- }
260998
- }
260999
-
261000
- class FrameItemElement extends HTMLElement {
261001
- constructor() {
261002
- super();
261003
- }
261004
- }
261005
-
261006
- class ImageItemElement extends HTMLElement {
261007
- constructor() {
261008
- super();
261009
- }
261010
- }
261011
-
261012
- class LinkItemElement extends HTMLElement {
261013
- constructor() {
261014
- super();
261015
- }
261016
- }
261017
-
261018
- class AINodeItemElement extends HTMLElement {
261019
- constructor() {
261020
- super();
261021
- }
261022
- }
261023
-
261024
- class VideoItemElement extends HTMLElement {
261025
- constructor() {
261026
- super();
261027
- }
261028
- }
261029
-
261030
- class CommentElement extends HTMLElement {
261031
- constructor() {
261032
- super();
261033
- }
261034
- }
261035
-
261036
- class AudioItemElement extends HTMLElement {
261037
- constructor() {
261038
- super();
261039
- }
261040
- }
261041
-
261042
- customElements.define("rich-text", RichTextElement);
261043
- customElements.define("shape-item", ShapeItemElement);
261044
- customElements.define("sticker-item", StickerElement);
261045
- customElements.define("drawing-item", DrawingElement);
261046
- customElements.define("connector-item", ConnectorElement);
261047
- customElements.define("frame-item", FrameItemElement);
261048
- customElements.define("image-item", ImageItemElement);
261049
- customElements.define("link-item", LinkItemElement);
261050
- customElements.define("ainode-item", AINodeItemElement);
261051
- customElements.define("video-item", VideoItemElement);
261052
- customElements.define("comment-item", CommentElement);
261053
- customElements.define("audio-item", AudioItemElement);
261054
-
261055
- document.addEventListener("DOMContentLoaded", () => {
261056
- const itemsDiv = document.querySelector("#items");
261057
- if (!itemsDiv) {
261058
- console.error("ITEMS DIV NOT FOUND!");
261059
- return;
261060
- }
261061
- let isDragging = false;
261062
- let startX, startY;
261063
- let translateX = 0;
261064
- let translateY = 0;
261065
- let scale = 1;
261066
-
261067
- itemsDiv.style.transformOrigin = "0 0";
261068
- document.body.style.cursor = "grab";
261069
-
261070
- function updateTransform() {
261071
- itemsDiv.style.transform =
261072
- "translate(" +
261073
- translateX +
261074
- "px, " +
261075
- translateY +
261076
- "px) scale(" +
261077
- scale +
261078
- ")";
261079
- }
261080
-
261081
- function handleMouseDown(ev) {
261082
- isDragging = true;
261083
- startX = ev.clientX;
261084
- startY = ev.clientY;
261085
- itemsDiv.style.cursor = "grabbing";
261086
- }
261087
-
261088
- function handleMouseMove(ev) {
261089
- if (!isDragging) {
261090
- return;
261091
- }
261092
- const dx = ev.clientX - startX;
261093
- const dy = ev.clientY - startY;
261094
- startX += dx;
261095
- startY += dy;
261096
- translateX += dx;
261097
- translateY += dy;
261098
- updateTransform();
261099
- }
261100
-
261101
- function handleMouseUp(ev) {
261102
- if (!isDragging) {
261103
- return;
261104
- }
261105
- isDragging = false;
261106
- itemsDiv.style.cursor = "grab";
261107
- }
261108
-
261109
- function handleWheel(ev) {
261110
- ev.preventDefault();
261111
- const factor = ev.deltaY < 0 ? 1.1 : 0.9;
261112
- translateX = ev.clientX - (ev.clientX - translateX) * factor;
261113
- translateY = ev.clientY - (ev.clientY - translateY) * factor;
261114
- scale *= factor;
261115
- updateTransform();
261116
- }
261117
-
261118
- document.addEventListener("mousedown", handleMouseDown);
261119
- document.addEventListener("mousemove", handleMouseMove);
261120
- document.addEventListener("mouseup", handleMouseUp);
261121
- document.addEventListener("wheel", handleWheel, { passive: false });
261122
-
261123
- const titlePanel = document.createElement("div");
261124
- titlePanel.style.boxShadow = "0px 10px 16px -3px rgba(20, 21, 26, 0.08)";
261125
- titlePanel.style.position = "fixed";
261126
- titlePanel.style.left = "12px";
261127
- titlePanel.style.top = "12px";
261128
- titlePanel.style.borderRadius = "12px";
261129
- titlePanel.style.backgroundColor = "#ffff";
261130
- titlePanel.style.display = "flex";
261131
- titlePanel.style.alignItems = "center";
261132
- titlePanel.style.gap = "8px";
261133
- titlePanel.style.padding = "0 12px";
261134
- titlePanel.style.height = "48px";
261135
- const editButton = document.createElement("button");
261136
- const editIcon = document.createElementNS(
261137
- "http://www.w3.org/2000/svg",
261138
- "svg",
261139
- );
261140
- editIcon.setAttribute("width", "13");
261141
- editIcon.setAttribute("height", "13");
261142
- editIcon.setAttribute("viewBox", "0 0 13 13");
261143
- editIcon.setAttribute("fill", "none");
261144
- editIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
261145
- const editIconPath = document.createElementNS(
261146
- "http://www.w3.org/2000/svg",
261147
- "path",
261148
- );
261149
- editIconPath.setAttribute(
261150
- "d",
261151
- "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",
261152
- );
261153
- editIconPath.setAttribute("fill", "#ffff");
261154
- editIcon.appendChild(editIconPath);
261155
- editButton.appendChild(editIcon);
261156
- const editFileText = document.createElement("p");
261157
- const isSnapshotInIframe =
261158
- window.parent &&
261159
- window.parent !== window &&
261160
- window.parent.location.href.includes("/snapshots/");
261161
- editFileText.textContent = isSnapshotInIframe ? "Edit copy" : "Edit file";
261162
- editButton.appendChild(editFileText);
261163
-
261164
- editButton.style.backgroundColor = "rgba(20, 21, 26, 1)";
261165
- editButton.style.cursor = "pointer";
261166
- editButton.style.boxShadow = "0px 1px 2px 0px rgba(20, 21, 26, 0.05)";
261167
- editButton.style.color = "#ffff";
261168
- editButton.style.fontSize = "14px";
261169
- editButton.style.lineHeight = "20px";
261170
- editButton.style.display = "flex";
261171
- editButton.style.alignItems = "center";
261172
- editButton.style.gap = "8px";
261173
- editButton.style.padding = "8px";
261174
- editButton.style.borderRadius = "10px";
261175
- const separator = document.createElement("div");
261176
- separator.style.borderRight = "1px solid rgba(222, 224, 227, 1)";
261177
- separator.style.height = "100%";
261178
- const boardName = document.createElement("div");
261179
- const fileIcon = document.createElementNS(
261180
- "http://www.w3.org/2000/svg",
261181
- "svg",
261182
- );
261183
- fileIcon.setAttribute("width", "16");
261184
- fileIcon.setAttribute("height", "18");
261185
- fileIcon.setAttribute("viewBox", "0 0 16 18");
261186
- fileIcon.setAttribute("fill", "none");
261187
- fileIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
261188
- const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
261189
- path.setAttribute(
261190
- "d",
261191
- "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",
261192
- );
261193
- path.setAttribute("fill", "#696B76");
261194
- fileIcon.appendChild(path);
261195
- boardName.appendChild(fileIcon);
261196
- const boardNameTag = document.querySelector('meta[name="board-name"]');
261197
- let boardNameStr = "Untitled";
261198
- if (boardNameTag) {
261199
- boardNameStr = boardNameTag.getAttribute("content");
261200
- }
261201
- const p = document.createElement("p");
261202
- p.textContent = boardNameStr;
261203
- p.style.fontSize = "16px";
261204
- p.style.lineHeight = "24px";
261205
- boardName.appendChild(p);
261206
- const cloudIcon = document.createElementNS(
261207
- "http://www.w3.org/2000/svg",
261208
- "svg",
261209
- );
261210
- cloudIcon.setAttribute("width", "20");
261211
- cloudIcon.setAttribute("height", "18");
261212
- cloudIcon.setAttribute("viewBox", "0 0 20 18");
261213
- cloudIcon.setAttribute("fill", "none");
261214
- cloudIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
261215
- const cloudIconPath = document.createElementNS(
261216
- "http://www.w3.org/2000/svg",
261217
- "path",
261218
- );
261219
- cloudIconPath.setAttribute(
261220
- "d",
261221
- "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",
261222
- );
261223
- cloudIconPath.setAttribute("fill", "#696B76");
261224
- cloudIcon.appendChild(cloudIconPath);
261225
- boardName.appendChild(cloudIcon);
261226
- boardName.style.display = "flex";
261227
- boardName.style.alignItems = "center";
261228
- boardName.style.gap = "8px";
261229
- titlePanel.appendChild(boardName);
261230
- titlePanel.appendChild(separator);
261231
- titlePanel.appendChild(editButton);
261232
- document.body.appendChild(titlePanel);
261233
-
261234
- editButton.onclick = async () => {
261235
- editButton.disabled = true;
261236
- editButton.textContent = "Loading...";
261237
-
261238
- try {
261239
- document.removeEventListener("mousedown", handleMouseDown);
261240
- document.removeEventListener("mousemove", handleMouseMove);
261241
- document.removeEventListener("mouseup", handleMouseUp);
261242
- document.removeEventListener("wheel", handleWheel, {
261243
- passive: false,
261244
- });
261245
- translateX = 0;
261246
- translateY = 0;
261247
- scale = 1;
261248
- updateTransform();
261249
-
261250
- const { initBrowserSettings } = await import(
261251
- "https://www.unpkg.com/test_package_board@0.0.99/dist/bundle.js"
261252
- );
261253
- initBrowserSettings();
261254
-
261255
- const { createApp } = await import(
261256
- "https://www.unpkg.com/test_package_board@0.0.99/dist/bundle.js"
261257
- );
261258
-
261259
- const app = createApp();
261260
- window.app = app;
261261
- const stringed = await app.openAndEditFile();
261262
-
261263
- if (stringed) {
261264
- await app.openBoardFromFile();
261265
- app.getBoard().deserializeHTML(stringed);
261266
- app.localRender("items");
261267
- }
261268
-
261269
- const response = await fetch(
261270
- "https://www.unpkg.com/test_package_board@0.0.99/dist/bundle.css",
261271
- );
261272
- const cssText = await response.text();
261273
- const styleEl = document.createElement("style");
261274
- styleEl.textContent = cssText;
261275
- document.body.appendChild(styleEl);
261276
-
261277
- const responseSvg = await fetch(
261278
- "https://www.unpkg.com/test_package_board@0.0.99/dist/sprite.svg",
261279
- );
261280
- const svgText = await responseSvg.text();
261281
- const div = document.createElement("div");
261282
- div.style.display = "none";
261283
- div.id = "sprite";
261284
- div.innerHTML = svgText;
261285
- document.body.appendChild(div);
261286
- } finally {
261287
- editButton.disabled = false;
261288
- editButton.textContent = "Edit board";
261289
- }
261290
- };
261291
- });
261292
- `;
261293
- var public_default = `@import "https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap";
261294
- @import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap";
261295
-
261296
- /* ../src/index.css */
261297
- :root {
261298
- --background-surface-default: rgb(255, 255, 255);
261299
- --background-button-secondary: rgb(255, 255, 255);
261300
- --background-button-secondary-hover: rgb(247, 247, 248);
261301
- --background-badge-purple-disabled: rgb(247, 241, 253);
261302
- --background-badge-gray: rgb(233, 234, 236);
261303
- --background-accent-purple: rgb(146, 79, 232);
261304
- --border-action-normal: rgb(222, 223, 227);
261305
- --border-action-focus: rgb(146, 79, 232);
261306
- --border-select-primary: rgb(146, 79, 232);
261307
- --text-base-primary: rgb(20, 21, 26);
261308
- --text-base-secondary: rgba(15, 19, 36, 0.6);
261309
- --text-base-quaternary: rgb(10, 15, 41, 0.25);
261310
- --text-accent-purple: rgb(152, 89, 233);
261311
- --icon-base-primary: rgb(20, 21, 26);
261312
- --icon-base-secondary: rgb(105, 107, 118);
261313
- --icon-accent-purple: rgb(146, 79, 232);
261314
- --absolute-position-panel-padding: 12px;
261315
- }
261316
- * {
261317
- box-sizing: border-box;
261318
- padding: 0;
261319
- margin: 0;
261320
- border: none;
261321
- background: none;
261322
- font-family: inherit;
261323
- }
261324
- html {
261325
- font-size: 62.5%;
261326
- }
261327
- body {
261328
- color: var(--text-base-primary);
261329
- font-size: 1.6rem;
261330
- font-optical-sizing: auto;
261331
- font-style: normal;
261332
- font-family: "Manrope", sans-serif;
261333
- }
261334
- html,
261335
- body {
261336
- overscroll-behavior-x: none;
261337
- -webkit-user-select: none;
261338
- }
261339
- input:-webkit-autofill,
261340
- input:-webkit-autofill:hover,
261341
- input:-webkit-autofill:focus,
261342
- input:-webkit-autofill:active {
261343
- -webkit-box-shadow: 0 0 0 30px white inset !important;
261344
- }
261345
- `;
261346
- var loadLinkImages_default = `document.addEventListener("DOMContentLoaded", function () {
261347
- document.querySelectorAll(".link-object").forEach(linkItem => {
261348
- const linkImage = linkItem.querySelector(".link-image");
261349
- const linkContainer = linkItem.querySelector("a");
261350
- linkImage.onerror = () => {
261351
- linkImage.onerror = null;
261352
- linkImage.style.display = "none";
261353
- const svgNamespace = "http://www.w3.org/2000/svg";
261354
- const svg = document.createElementNS(svgNamespace, "svg");
261355
- svg.setAttribute("width", "20");
261356
- svg.setAttribute("height", "20");
261357
- svg.setAttribute("viewBox", "0 0 13 14");
261358
- svg.setAttribute("fill", "none");
261359
-
261360
- const path = document.createElementNS(svgNamespace, "path");
261361
- path.setAttribute(
261362
- "d",
261363
- "M11.0054 3.414L2.39838 12.021L0.984375 10.607L9.59037 2H2.00538V0H13.0054V11H11.0054V3.414Z",
261364
- );
261365
- path.setAttribute("fill", "#924FE8");
261366
- svg.appendChild(path);
261367
-
261368
- linkContainer.appendChild(svg);
261369
- };
261370
- });
261371
- });
261372
- `;
261373
260999
 
261374
261000
  class Board {
261375
261001
  boardId;
@@ -261752,47 +261378,29 @@ class Board {
261752
261378
  return this.copy();
261753
261379
  }
261754
261380
  serializeHTML() {
261755
- const customTagsScript = customWebComponents_default;
261756
- const loadLinksImagesScript = loadLinkImages_default;
261757
- const css = public_default;
261758
261381
  const boardName = this.getName() || this.getBoardId();
261759
261382
  const items = this.items.getWholeHTML(conf.documentFactory);
261760
261383
  const itemsDiv = `<div id="items">${items}</div>`;
261761
261384
  const scripts = `
261762
- <script type="module">${customTagsScript}</script>
261763
- <script defer>${loadLinksImagesScript}</script>
261385
+ <script type="module" src="https://unpkg.com/microboard-ui-temp/dist/customWebComponents.js"></script>
261386
+ <script type="module" src="https://unpkg.com/microboard-ui-temp/dist/controlsHandlers.js"></script>
261387
+ <script type="module" src="https://unpkg.com/microboard-ui-temp/dist/titlePanel.js"></script>
261388
+ <script defer src="https://unpkg.com/microboard-ui-temp/dist/loadLinksImages.js"></script>
261764
261389
  `;
261765
261390
  const body = `<body style="overflow-x: hidden; overflow-y: hidden;">${itemsDiv}${scripts}</body>`;
261766
261391
  const head = `
261767
- <head>
261768
- <meta charset="utf-8" />
261769
- <meta name="last-event-order" content="${this.events?.log.getLastIndex()}" />
261770
- <title>Microboard ${this.getBoardId()}</title>
261771
- <link rel="preconnect" href="https://fonts.googleapis.com">
261772
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
261773
- <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap"
261774
- rel="stylesheet"
261775
- />
261776
- <style>${css}</style>
261777
- <style>
261778
- ::-webkit-scrollbar {
261779
- appearance: none;
261780
- width: 3px;
261781
- height: 3px
261782
- }
261783
- ::-webkit-scrollbar-button {
261784
- display: none;
261785
- }
261786
- ::-webkit-scrollbar-thumb {
261787
- display: block;
261788
- background-color: black;
261789
- border-radius: 2px;
261790
- }
261791
- body {
261792
- background-color: rgba(200, 200, 200, 0.2);
261793
- }
261794
- </style>
261795
- </head>`.replace(/\t|\n/g, "");
261392
+ <head>
261393
+ <meta charset="utf-8" />
261394
+ <meta name="last-event-order" content="${this.events?.log.getLastIndex()}" />
261395
+ <title>Microboard ${boardName}</title>
261396
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
261397
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
261398
+ <link
261399
+ href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap"
261400
+ rel="stylesheet"
261401
+ />
261402
+ <link rel="stylesheet" crossorigin href="https://unpkg.com/microboard-ui-temp/dist/board.css" />
261403
+ </head>`.replace(/\t|\n/g, "");
261796
261404
  return `${head}${body}`;
261797
261405
  }
261798
261406
  deserializeHTMLAndEmit(stringedHTML) {
@@ -261862,7 +261470,10 @@ class Board {
261862
261470
  const addItem = (itemData) => {
261863
261471
  const item = this.createItem(itemData.id, itemData);
261864
261472
  if (item instanceof Connector2) {
261865
- createdConnectors[itemData.id] = { item, itemData };
261473
+ createdConnectors[itemData.id] = {
261474
+ item,
261475
+ itemData
261476
+ };
261866
261477
  }
261867
261478
  if ("index" in item && item.index) {
261868
261479
  createdGroups[item.getId()] = { item, itemData };
@@ -261897,10 +261508,16 @@ class Board {
261897
261508
  for (const itemData of items) {
261898
261509
  const item = this.createItem(itemData.id, itemData);
261899
261510
  if (item instanceof Connector2) {
261900
- createdConnectors[itemData.id] = { item, itemData };
261511
+ createdConnectors[itemData.id] = {
261512
+ item,
261513
+ itemData
261514
+ };
261901
261515
  }
261902
261516
  if ("index" in item && item.index) {
261903
- createdGroups[item.getId()] = { item, itemData };
261517
+ createdGroups[item.getId()] = {
261518
+ item,
261519
+ itemData
261520
+ };
261904
261521
  }
261905
261522
  this.index.insert(item);
261906
261523
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "microboard-ui-temp",
3
- "version": "0.1.13",
3
+ "version": "0.1.15",
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.107",
54
+ "microboard-temp": "^0.5.0",
55
55
  "nanoid": "^5.1.5",
56
56
  "prop-types": "^15.8.1",
57
57
  "react-hot-toast": "2.4.1",