@plait/core 0.10.0 → 0.12.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.
@@ -28,9 +28,14 @@ const BOARD_TO_TEMPORARY_ELEMENTS = new WeakMap();
28
28
  const BOARD_TO_MOVING_ELEMENT = new WeakMap();
29
29
  const PATH_REFS = new WeakMap();
30
30
 
31
- function depthFirstRecursion(node, callback, recursion) {
31
+ function depthFirstRecursion(node, callback, recursion, isReverse) {
32
32
  if (!recursion || recursion(node)) {
33
- node.children?.forEach(child => {
33
+ let children = [];
34
+ if (node.children) {
35
+ children = [...node.children];
36
+ }
37
+ children = isReverse ? children.reverse() : children;
38
+ children.forEach(child => {
34
39
  depthFirstRecursion(child, callback, recursion);
35
40
  });
36
41
  }
@@ -172,7 +177,7 @@ const PlaitBoard = {
172
177
  getComponent(board) {
173
178
  return BOARD_TO_COMPONENT.get(board);
174
179
  },
175
- getBoardNativeElement(board) {
180
+ getBoardContainer(board) {
176
181
  return PlaitBoard.getComponent(board).nativeElement;
177
182
  },
178
183
  getRectangle(board) {
@@ -767,10 +772,27 @@ function distanceBetweenPointAndRectangle(x, y, rect) {
767
772
  * Extendable Custom Types Interface
768
773
  */
769
774
 
775
+ const SELECTION_BORDER_COLOR = '#6698FF';
776
+ const SELECTION_FILL_COLOR = '#6698FF19'; // 主色 0.1 透明度
777
+ const Selection = {
778
+ isCollapsed(selection) {
779
+ if (selection.anchor[0] == selection.focus[0] && selection.anchor[1] === selection.focus[1]) {
780
+ return true;
781
+ }
782
+ else {
783
+ return false;
784
+ }
785
+ }
786
+ };
787
+
770
788
  const getHitElements = (board, selection) => {
771
789
  const realSelection = selection || board.selection;
772
790
  const selectedElements = [];
791
+ const isCollapsed = realSelection && realSelection.ranges.length === 1 && Selection.isCollapsed(realSelection.ranges[0]);
773
792
  depthFirstRecursion(board, node => {
793
+ if (selectedElements.length > 0 && isCollapsed) {
794
+ return;
795
+ }
774
796
  if (!PlaitBoard.isBoard(node) &&
775
797
  realSelection &&
776
798
  realSelection.ranges.some(range => {
@@ -785,10 +807,16 @@ const getHitElements = (board, selection) => {
785
807
  else {
786
808
  return false;
787
809
  }
788
- });
810
+ }, true);
789
811
  return selectedElements;
790
812
  };
791
- const isIntersectionElements = (board, elements, ranges) => {
813
+ const getHitElementOfRoot = (board, rootElements, range) => {
814
+ const newRootElements = [...rootElements].reverse();
815
+ return newRootElements.find(item => {
816
+ return board.isHitSelection(item, range);
817
+ });
818
+ };
819
+ const isHitElements = (board, elements, ranges) => {
792
820
  let isIntersectionElements = false;
793
821
  if (elements.length) {
794
822
  elements.map(item => {
@@ -921,11 +949,20 @@ function transformPoint(board, point) {
921
949
  return newPoint;
922
950
  }
923
951
  function isInPlaitBoard(board, x, y) {
924
- const plaitBoardElement = PlaitBoard.getBoardNativeElement(board);
952
+ const plaitBoardElement = PlaitBoard.getBoardContainer(board);
925
953
  const plaitBoardRect = plaitBoardElement.getBoundingClientRect();
926
954
  const distances = distanceBetweenPointAndRectangle(x, y, plaitBoardRect);
927
955
  return distances === 0;
928
956
  }
957
+ function getRealScrollBarWidth(board) {
958
+ const { hideScrollbar } = board.options;
959
+ let scrollBarWidth = 0;
960
+ if (!hideScrollbar) {
961
+ const viewportContainer = PlaitBoard.getViewportContainer(board);
962
+ scrollBarWidth = viewportContainer.offsetWidth - viewportContainer.clientWidth;
963
+ }
964
+ return scrollBarWidth;
965
+ }
929
966
 
930
967
  function createForeignObject(x, y, width, height) {
931
968
  var newForeignObject = document.createElementNS(NS, 'foreignObject');
@@ -1286,6 +1323,110 @@ const cacheMovingElements = (board, elements) => {
1286
1323
  BOARD_TO_MOVING_ELEMENT.set(board, elements);
1287
1324
  };
1288
1325
 
1326
+ function cloneCSSStyle(nativeNode, clonedNode) {
1327
+ const targetStyle = clonedNode.style;
1328
+ if (!targetStyle) {
1329
+ return;
1330
+ }
1331
+ const sourceStyle = window.getComputedStyle(nativeNode);
1332
+ if (sourceStyle.cssText) {
1333
+ targetStyle.cssText = sourceStyle.cssText;
1334
+ targetStyle.transformOrigin = sourceStyle.transformOrigin;
1335
+ }
1336
+ else {
1337
+ Array.from(sourceStyle).forEach(name => {
1338
+ let value = sourceStyle.getPropertyValue(name);
1339
+ targetStyle.setProperty(name, value, sourceStyle.getPropertyPriority(name));
1340
+ });
1341
+ }
1342
+ }
1343
+ function createCanvas(width, height, fillStyle) {
1344
+ const canvas = document.createElement('canvas');
1345
+ const ctx = canvas.getContext('2d');
1346
+ canvas.width = width;
1347
+ canvas.height = height;
1348
+ canvas.style.width = `${width}px`;
1349
+ canvas.style.height = `${height}px`;
1350
+ ctx.strokeStyle = '#ffffff';
1351
+ ctx.fillStyle = fillStyle;
1352
+ ctx.fillRect(0, 0, width, height);
1353
+ return {
1354
+ canvas,
1355
+ ctx
1356
+ };
1357
+ }
1358
+ function isElementNode(node) {
1359
+ return node.nodeType === Node.ELEMENT_NODE;
1360
+ }
1361
+ function cloneSvg(board, options) {
1362
+ const elementHostBox = getRectangleByElements(board, board.children, true);
1363
+ const { width, height, x, y } = elementHostBox;
1364
+ const { padding = 4, inlineStyleClassNames } = options;
1365
+ const sourceSvg = PlaitBoard.getHost(board);
1366
+ const cloneSvgElement = sourceSvg.cloneNode(true);
1367
+ cloneSvgElement.style.width = `${width}px`;
1368
+ cloneSvgElement.style.height = `${height}px`;
1369
+ cloneSvgElement.style.backgroundColor = '';
1370
+ cloneSvgElement.setAttribute('width', `${width}`);
1371
+ cloneSvgElement.setAttribute('height', `${height}`);
1372
+ cloneSvgElement.setAttribute('viewBox', [x - padding, y - padding, width + 2 * padding, height + 2 * padding].join(','));
1373
+ if (inlineStyleClassNames) {
1374
+ const sourceNodes = Array.from(sourceSvg.querySelectorAll(inlineStyleClassNames));
1375
+ const cloneNodes = Array.from(cloneSvgElement.querySelectorAll(inlineStyleClassNames));
1376
+ sourceNodes.forEach((node, index) => {
1377
+ const cloneNode = cloneNodes[index];
1378
+ const childElements = Array.from(node.querySelectorAll('*')).filter(isElementNode);
1379
+ const cloneChildElements = Array.from(cloneNode.querySelectorAll('*')).filter(isElementNode);
1380
+ sourceNodes.push(...childElements);
1381
+ cloneNodes.push(...cloneChildElements);
1382
+ });
1383
+ sourceNodes.forEach((node, index) => {
1384
+ const cloneNode = cloneNodes[index];
1385
+ cloneCSSStyle(node, cloneNode);
1386
+ });
1387
+ }
1388
+ return cloneSvgElement;
1389
+ }
1390
+ function loadImage(src) {
1391
+ return new Promise((resolve, reject) => {
1392
+ const img = new Image();
1393
+ img.onload = () => resolve(img);
1394
+ img.onerror = () => reject(new Error('Failed to load image'));
1395
+ img.src = src;
1396
+ });
1397
+ }
1398
+ async function toImage(board, options) {
1399
+ if (!board) {
1400
+ return undefined;
1401
+ }
1402
+ const elementHostBox = getRectangleByElements(board, board.children, true);
1403
+ const { ratio = 2, fillStyle = 'transparent' } = options;
1404
+ const { width, height } = elementHostBox;
1405
+ const ratioWidth = width * ratio;
1406
+ const ratioHeight = height * ratio;
1407
+ const cloneSvgElement = cloneSvg(board, options);
1408
+ const { canvas, ctx } = createCanvas(ratioWidth, ratioHeight, fillStyle);
1409
+ const svgStr = new XMLSerializer().serializeToString(cloneSvgElement);
1410
+ const imgSrc = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgStr)}`;
1411
+ try {
1412
+ const img = await loadImage(imgSrc);
1413
+ ctx.drawImage(img, 0, 0, ratioWidth, ratioHeight);
1414
+ const url = canvas.toDataURL('image/png');
1415
+ return url;
1416
+ }
1417
+ catch (error) {
1418
+ console.error('Error converting SVG to image:', error);
1419
+ return undefined;
1420
+ }
1421
+ }
1422
+ function downloadImage(url, name) {
1423
+ const a = document.createElement('a');
1424
+ a.href = url;
1425
+ a.download = name;
1426
+ a.click();
1427
+ a.remove();
1428
+ }
1429
+
1289
1430
  const PlaitElement = {
1290
1431
  isRootElement(value) {
1291
1432
  const parent = NODE_TO_PARENT.get(value);
@@ -1434,19 +1575,6 @@ const Point = {
1434
1575
  }
1435
1576
  };
1436
1577
 
1437
- const SELECTION_BORDER_COLOR = '#6698FF';
1438
- const SELECTION_FILL_COLOR = '#6698FF19'; // 主色 0.1 透明度
1439
- const Selection = {
1440
- isCollapsed(selection) {
1441
- if (selection.anchor[0] == selection.focus[0] && selection.anchor[1] === selection.focus[1]) {
1442
- return true;
1443
- }
1444
- else {
1445
- return false;
1446
- }
1447
- }
1448
- };
1449
-
1450
1578
  const SAVING = new WeakMap();
1451
1579
  const MERGING = new WeakMap();
1452
1580
 
@@ -1460,7 +1588,7 @@ const IS_FROM_VIEWPORT_CHANGE = new WeakMap();
1460
1588
  function getViewportContainerRect(board) {
1461
1589
  const { hideScrollbar } = board.options;
1462
1590
  const scrollBarWidth = hideScrollbar ? SCROLL_BAR_WIDTH : 0;
1463
- const viewportRect = PlaitBoard.getBoardNativeElement(board).getBoundingClientRect();
1591
+ const viewportRect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
1464
1592
  return {
1465
1593
  width: viewportRect.width + scrollBarWidth,
1466
1594
  height: viewportRect.height + scrollBarWidth
@@ -1468,7 +1596,7 @@ function getViewportContainerRect(board) {
1468
1596
  }
1469
1597
  function getElementHostBBox(board, zoom) {
1470
1598
  const childrenRect = getRectangleByElements(board, board.children, true);
1471
- const viewportContainerRect = PlaitBoard.getBoardNativeElement(board).getBoundingClientRect();
1599
+ const viewportContainerRect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
1472
1600
  const containerWidth = viewportContainerRect.width / zoom;
1473
1601
  const containerHeight = viewportContainerRect.height / zoom;
1474
1602
  let left;
@@ -1513,7 +1641,7 @@ function clampZoomLevel(zoom, minZoom = 0.2, maxZoom = 4) {
1513
1641
  return zoom < minZoom ? minZoom : zoom > maxZoom ? maxZoom : zoom;
1514
1642
  }
1515
1643
  function getViewBox(board, zoom) {
1516
- const boardContainerRectangle = PlaitBoard.getBoardNativeElement(board).getBoundingClientRect();
1644
+ const boardContainerRectangle = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
1517
1645
  const elementHostBBox = getElementHostBBox(board, zoom);
1518
1646
  const horizontalPadding = boardContainerRectangle.width / 2;
1519
1647
  const verticalPadding = boardContainerRectangle.height / 2;
@@ -1525,6 +1653,10 @@ function getViewBox(board, zoom) {
1525
1653
  ];
1526
1654
  return viewBox;
1527
1655
  }
1656
+ function getViewBoxCenterPoint(board) {
1657
+ const childrenRectangle = getRectangleByElements(board, board.children, true);
1658
+ return [childrenRectangle.x + childrenRectangle.width / 2, childrenRectangle.y + childrenRectangle.height / 2];
1659
+ }
1528
1660
  function setSVGViewBox(board, viewBox) {
1529
1661
  const zoom = board.viewport.zoom;
1530
1662
  const hostElement = PlaitBoard.getHost(board);
@@ -1567,7 +1699,7 @@ function initializeViewBox(board) {
1567
1699
  function initializeViewportOffset(board) {
1568
1700
  if (!board.viewport?.origination) {
1569
1701
  const zoom = board.viewport.zoom;
1570
- const viewportContainerRect = PlaitBoard.getBoardNativeElement(board).getBoundingClientRect();
1702
+ const viewportContainerRect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
1571
1703
  const viewBox = getViewBox(board, zoom);
1572
1704
  const centerX = viewBox[0] + viewBox[2] / 2;
1573
1705
  const centerY = viewBox[1] + viewBox[3] / 2;
@@ -1632,9 +1764,9 @@ const updatePointerType = (board, pointer) => {
1632
1764
  function updateZoom(board, newZoom, isCenter = true) {
1633
1765
  newZoom = clampZoomLevel(newZoom);
1634
1766
  const mousePoint = PlaitBoard.getMovingPoint(board);
1635
- const nativeElement = PlaitBoard.getBoardNativeElement(board);
1767
+ const nativeElement = PlaitBoard.getBoardContainer(board);
1636
1768
  const nativeElementRect = nativeElement.getBoundingClientRect();
1637
- const boardContainerRect = PlaitBoard.getBoardNativeElement(board).getBoundingClientRect();
1769
+ const boardContainerRect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
1638
1770
  let focusPoint = [boardContainerRect.width / 2, boardContainerRect.height / 2];
1639
1771
  if (!isCenter && mousePoint && distanceBetweenPointAndRectangle(mousePoint[0], mousePoint[1], nativeElementRect) === 0) {
1640
1772
  focusPoint = toPoint(mousePoint[0], mousePoint[1], nativeElement);
@@ -1647,13 +1779,8 @@ function updateZoom(board, newZoom, isCenter = true) {
1647
1779
  updateViewport(board, newOrigination, newZoom);
1648
1780
  }
1649
1781
  function fitViewport(board) {
1650
- const { hideScrollbar } = board.options;
1651
- let scrollBarWidth = 0;
1652
- if (!hideScrollbar) {
1653
- const viewportContainer = PlaitBoard.getViewportContainer(board);
1654
- scrollBarWidth = viewportContainer.offsetWidth - viewportContainer.clientWidth;
1655
- }
1656
- const boardContainerRect = PlaitBoard.getBoardNativeElement(board).getBoundingClientRect();
1782
+ let scrollBarWidth = getRealScrollBarWidth(board);
1783
+ const boardContainerRect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
1657
1784
  const elementHostBox = getRectangleByElements(board, board.children, true);
1658
1785
  const zoom = board.viewport.zoom;
1659
1786
  const autoFitPadding = 16;
@@ -1666,12 +1793,47 @@ function fitViewport(board) {
1666
1793
  else {
1667
1794
  newZoom = 1;
1668
1795
  }
1669
- const viewBox = getViewBox(board, newZoom);
1670
- const centerX = viewBox[0] + viewBox[2] / 2;
1671
- const centerY = viewBox[1] + viewBox[3] / 2;
1796
+ const centerPoint = getViewBoxCenterPoint(board);
1672
1797
  const newOrigination = [
1673
- centerX - boardContainerRect.width / 2 / newZoom + scrollBarWidth / 2 / zoom,
1674
- centerY - boardContainerRect.height / 2 / newZoom + scrollBarWidth / 2 / zoom
1798
+ centerPoint[0] - boardContainerRect.width / 2 / newZoom + scrollBarWidth / 2 / zoom,
1799
+ centerPoint[1] - boardContainerRect.height / 2 / newZoom + scrollBarWidth / 2 / zoom
1800
+ ];
1801
+ updateViewport(board, newOrigination, newZoom);
1802
+ }
1803
+ function fitViewportWidth(board, options) {
1804
+ let scrollBarWidth = getRealScrollBarWidth(board);
1805
+ const boardContainer = PlaitBoard.getBoardContainer(board);
1806
+ const boardContainerRectangle = boardContainer.getBoundingClientRect();
1807
+ let finalWidth = 0;
1808
+ if (options.maxWidth) {
1809
+ finalWidth = options.maxWidth;
1810
+ }
1811
+ else {
1812
+ finalWidth = boardContainerRectangle.width;
1813
+ }
1814
+ const elementHostBox = getRectangleByElements(board, board.children, true);
1815
+ const contentWidth = finalWidth - 2 * options.autoFitPadding;
1816
+ let newZoom = 0;
1817
+ if (contentWidth < elementHostBox.width) {
1818
+ newZoom = Math.min(contentWidth / elementHostBox.width);
1819
+ }
1820
+ else {
1821
+ newZoom = 1;
1822
+ }
1823
+ let finalHeight = elementHostBox.height * newZoom + 2 * options.autoFitPadding;
1824
+ if (finalHeight > options.limitHeight) {
1825
+ const containerEl = boardContainer.closest(`.${options.containerClass}`);
1826
+ containerEl.style.height = `${finalHeight}px`;
1827
+ initializeViewportContainer(board);
1828
+ }
1829
+ else {
1830
+ finalHeight = options.limitHeight;
1831
+ }
1832
+ const centerX = elementHostBox.x + elementHostBox.width / 2;
1833
+ const centerY = elementHostBox.y + elementHostBox.height / 2;
1834
+ const newOrigination = [
1835
+ centerX - finalWidth / 2 / newZoom + scrollBarWidth / 2 / newZoom,
1836
+ centerY - finalHeight / 2 / newZoom + scrollBarWidth / 2 / newZoom
1675
1837
  ];
1676
1838
  updateViewport(board, newOrigination, newZoom);
1677
1839
  }
@@ -1691,7 +1853,8 @@ const BoardTransforms = {
1691
1853
  updateViewport,
1692
1854
  fitViewport,
1693
1855
  updateZoom,
1694
- updateThemeColor
1856
+ updateThemeColor,
1857
+ fitViewportWidth
1695
1858
  };
1696
1859
 
1697
1860
  const Transforms = {
@@ -1908,7 +2071,7 @@ function withHandPointer(board) {
1908
2071
  board.mousedown = (event) => {
1909
2072
  if (PlaitBoard.isPointer(board, PlaitPointerType.hand) && isMainPointer(event)) {
1910
2073
  isMoving = true;
1911
- PlaitBoard.getBoardNativeElement(board).classList.add('viewport-moving');
2074
+ PlaitBoard.getBoardContainer(board).classList.add('viewport-moving');
1912
2075
  plaitBoardMove.x = event.x;
1913
2076
  plaitBoardMove.y = event.y;
1914
2077
  }
@@ -1928,7 +2091,7 @@ function withHandPointer(board) {
1928
2091
  board.globalMouseup = (event) => {
1929
2092
  if (board.selection) {
1930
2093
  isMoving = false;
1931
- PlaitBoard.getBoardNativeElement(board).classList.remove('viewport-moving');
2094
+ PlaitBoard.getBoardContainer(board).classList.remove('viewport-moving');
1932
2095
  plaitBoardMove.x = 0;
1933
2096
  plaitBoardMove.y = 0;
1934
2097
  }
@@ -1968,14 +2131,13 @@ function withSelection(board) {
1968
2131
  }
1969
2132
  const options = board.getPluginOptions(PlaitPluginKey.withSelection);
1970
2133
  const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
1971
- const ranges = [{ anchor: point, focus: point }];
2134
+ const range = { anchor: point, focus: point };
2135
+ const hitElements = getHitElements(board, { ranges: [range] });
1972
2136
  const selectedElements = getSelectedElements(board);
1973
- if (isIntersectionElements(board, selectedElements, ranges)) {
2137
+ if (hitElements.length === 1 && selectedElements.includes(hitElements[0])) {
1974
2138
  mousedown(event);
1975
2139
  return;
1976
2140
  }
1977
- const range = { anchor: point, focus: point };
1978
- const hitElements = getHitElements(board, { ranges: [range] });
1979
2141
  if (PlaitBoard.isPointer(board, PlaitPointerType.selection) &&
1980
2142
  hitElements.length === 0 &&
1981
2143
  options.isMultiple &&
@@ -1986,7 +2148,7 @@ function withSelection(board) {
1986
2148
  // prevent text from being selected
1987
2149
  event.preventDefault();
1988
2150
  }
1989
- Transforms.setSelection(board, { ranges: ranges });
2151
+ Transforms.setSelection(board, { ranges: [range] });
1990
2152
  mousedown(event);
1991
2153
  };
1992
2154
  board.globalMousemove = (event) => {
@@ -2021,7 +2183,7 @@ function withSelection(board) {
2021
2183
  Transforms.setSelection(board, { ranges: [{ anchor: start, focus: end }] });
2022
2184
  }
2023
2185
  if (PlaitBoard.isFocus(board)) {
2024
- const isInBoard = event.target instanceof Node && PlaitBoard.getBoardNativeElement(board).contains(event.target);
2186
+ const isInBoard = event.target instanceof Node && PlaitBoard.getBoardContainer(board).contains(event.target);
2025
2187
  const isInDocument = event.target instanceof Node && document.contains(event.target);
2026
2188
  const isAttachedElement = event.target instanceof Element && event.target.closest(`.${ATTACHED_ELEMENT_CLASS_NAME}`);
2027
2189
  // Clear selection when mouse board outside area
@@ -2097,11 +2259,11 @@ function isSelectionMoving(board) {
2097
2259
  return !!BOARD_TO_IS_SELECTION_MOVING.get(board);
2098
2260
  }
2099
2261
  function setSelectionMoving(board) {
2100
- PlaitBoard.getBoardNativeElement(board).classList.add('selection-moving');
2262
+ PlaitBoard.getBoardContainer(board).classList.add('selection-moving');
2101
2263
  BOARD_TO_IS_SELECTION_MOVING.set(board, true);
2102
2264
  }
2103
2265
  function clearSelectionMoving(board) {
2104
- PlaitBoard.getBoardNativeElement(board).classList.remove('selection-moving');
2266
+ PlaitBoard.getBoardContainer(board).classList.remove('selection-moving');
2105
2267
  BOARD_TO_IS_SELECTION_MOVING.delete(board);
2106
2268
  }
2107
2269
  function createSelectionOuterG(board, selectElements) {
@@ -2152,19 +2314,17 @@ function withMoving(board) {
2152
2314
  board.mousedown = event => {
2153
2315
  const host = BOARD_TO_HOST.get(board);
2154
2316
  const point = transformPoint(board, toPoint(event.x, event.y, host));
2155
- const ranges = [{ anchor: point, focus: point }];
2317
+ const range = { anchor: point, focus: point };
2156
2318
  let movableElements = board.children.filter(item => board.isMovable(item));
2157
2319
  if (movableElements.length) {
2158
2320
  startPoint = point;
2159
2321
  const selectedRootElements = getSelectedElements(board).filter(item => movableElements.includes(item));
2160
- const intersectionSelectedElement = isIntersectionElements(board, selectedRootElements, ranges);
2161
- if (intersectionSelectedElement) {
2322
+ const hitElement = getHitElementOfRoot(board, movableElements, range);
2323
+ if (hitElement && selectedRootElements.includes(hitElement)) {
2162
2324
  activeElements = selectedRootElements;
2163
2325
  }
2164
- else {
2165
- activeElements = movableElements.filter(item => ranges.some(range => {
2166
- return board.isHitSelection(item, range);
2167
- }));
2326
+ else if (hitElement) {
2327
+ activeElements = [hitElement];
2168
2328
  }
2169
2329
  }
2170
2330
  mousedown(event);
@@ -2190,7 +2350,7 @@ function withMoving(board) {
2190
2350
  MERGING.set(board, true);
2191
2351
  return PlaitNode.get(board, [index]);
2192
2352
  });
2193
- PlaitBoard.getBoardNativeElement(board).classList.add('element-moving');
2353
+ PlaitBoard.getBoardContainer(board).classList.add('element-moving');
2194
2354
  addMovingElements(board, currentElements);
2195
2355
  });
2196
2356
  }
@@ -2224,7 +2384,7 @@ function withMoving(board) {
2224
2384
  activeElements = [];
2225
2385
  removeMovingElements(board);
2226
2386
  MERGING.set(board, false);
2227
- PlaitBoard.getBoardNativeElement(board).classList.remove('element-moving');
2387
+ PlaitBoard.getBoardContainer(board).classList.remove('element-moving');
2228
2388
  }
2229
2389
  return board;
2230
2390
  }
@@ -2792,5 +2952,5 @@ const clearNodeWeakMap = (object) => {
2792
2952
  * Generated bundle index. Do not edit.
2793
2953
  */
2794
2954
 
2795
- export { BOARD_TO_COMPONENT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, CLIP_BOARD_FORMAT_KEY, ColorfulThemeColor, DarkThemeColor, DefaultThemeColor, ELEMENT_TO_COMPONENT, FLUSHING, IS_APPLE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_SAFARI, IS_TEXT_EDITABLE, MAX_RADIUS, MERGING, NODE_TO_INDEX, NODE_TO_PARENT, NS, PATH_REFS, POINTER_BUTTON, Path, PlaitBoard, PlaitBoardComponent, PlaitChildrenElement, PlaitElement, PlaitElementComponent, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitModule, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, RectangleClient, RetroThemeColor, SAVING, SCROLL_BAR_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, Selection, SoftThemeColor, StarryThemeColor, ThemeColorMode, ThemeColors, Transforms, Viewport, addMovingElements, addSelectedElement, arrowPoints, cacheMovingElements, cacheSelectedElements, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createForeignObject, createG, createPath, createSVG, createSelectionOuterG, createTestingBoard, createText, debounce, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, drawAbstractRoundRectangle, drawArrow, drawCircle, drawLine, drawLinearPath, drawRoundRectangle, fakeNodeWeakMap, getBoardRectangle, getElementHostBBox, getHitElements, getMovingElements, getRectangleByElements, getSelectedElements, getTemporaryElements, getViewBox, getViewportContainerRect, getViewportOrigination, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isDOMElement, isDOMNode, isFromScrolling, isFromViewportChange, isInPlaitBoard, isIntersectionElements, isMainPointer, isNullOrUndefined, isSecondaryPointer, isSelectedElement, isSelectionMoving, isSetViewportOperation, normalizePoint, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setIsFromScrolling, setIsFromViewportChange, setSVGViewBox, setSelectionMoving, shouldClear, shouldMerge, shouldSave, throttleRAF, toPoint, transformPoint, transformPoints, updateForeignObject, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withMoving, withOptions, withSelection };
2955
+ export { BOARD_TO_COMPONENT, BOARD_TO_ELEMENT_HOST, BOARD_TO_HOST, BOARD_TO_IS_SELECTION_MOVING, BOARD_TO_MOVING_ELEMENT, BOARD_TO_MOVING_POINT, BOARD_TO_ON_CHANGE, BOARD_TO_ROUGH_SVG, BOARD_TO_SELECTED_ELEMENT, BOARD_TO_TEMPORARY_ELEMENTS, BOARD_TO_VIEWPORT_ORIGINATION, BoardTransforms, CLIP_BOARD_FORMAT_KEY, ColorfulThemeColor, DarkThemeColor, DefaultThemeColor, ELEMENT_TO_COMPONENT, FLUSHING, IS_APPLE, IS_BOARD_CACHE, IS_CHROME, IS_CHROME_LEGACY, IS_EDGE_LEGACY, IS_FIREFOX, IS_IOS, IS_SAFARI, IS_TEXT_EDITABLE, MAX_RADIUS, MERGING, NODE_TO_INDEX, NODE_TO_PARENT, NS, PATH_REFS, POINTER_BUTTON, Path, PlaitBoard, PlaitBoardComponent, PlaitChildrenElement, PlaitElement, PlaitElementComponent, PlaitHistoryBoard, PlaitIslandBaseComponent, PlaitModule, PlaitNode, PlaitOperation, PlaitPluginElementComponent, PlaitPluginKey, PlaitPointerType, Point, RectangleClient, RetroThemeColor, SAVING, SCROLL_BAR_WIDTH, SELECTION_BORDER_COLOR, SELECTION_FILL_COLOR, Selection, SoftThemeColor, StarryThemeColor, ThemeColorMode, ThemeColors, Transforms, Viewport, addMovingElements, addSelectedElement, arrowPoints, cacheMovingElements, cacheSelectedElements, clampZoomLevel, clearNodeWeakMap, clearSelectedElement, clearSelectionMoving, clearViewportOrigination, createForeignObject, createG, createPath, createSVG, createSelectionOuterG, createTestingBoard, createText, debounce, deleteTemporaryElements, depthFirstRecursion, distanceBetweenPointAndPoint, distanceBetweenPointAndRectangle, distanceBetweenPointAndSegment, downloadImage, drawAbstractRoundRectangle, drawArrow, drawCircle, drawLine, drawLinearPath, drawRoundRectangle, fakeNodeWeakMap, getBoardRectangle, getElementHostBBox, getHitElementOfRoot, getHitElements, getMovingElements, getRealScrollBarWidth, getRectangleByElements, getSelectedElements, getTemporaryElements, getViewBox, getViewBoxCenterPoint, getViewportContainerRect, getViewportOrigination, hasBeforeContextChange, hasInputOrTextareaTarget, hasOnBoardChange, hasOnContextChanged, hotkeys, idCreator, initializeViewBox, initializeViewportContainer, initializeViewportOffset, inverse, isDOMElement, isDOMNode, isFromScrolling, isFromViewportChange, isHitElements, isInPlaitBoard, isMainPointer, isNullOrUndefined, isSecondaryPointer, isSelectedElement, isSelectionMoving, isSetViewportOperation, normalizePoint, removeMovingElements, removeSelectedElement, rotate, scrollToRectangle, setIsFromScrolling, setIsFromViewportChange, setSVGViewBox, setSelectionMoving, shouldClear, shouldMerge, shouldSave, throttleRAF, toImage, toPoint, transformPoint, transformPoints, updateForeignObject, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withMoving, withOptions, withSelection };
2796
2956
  //# sourceMappingURL=plait-core.mjs.map