@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.
- package/esm2020/interfaces/board.mjs +2 -2
- package/esm2020/interfaces/viewport.mjs +1 -1
- package/esm2020/plugins/with-hand.mjs +3 -3
- package/esm2020/plugins/with-moving.mjs +9 -11
- package/esm2020/plugins/with-selection.mjs +9 -10
- package/esm2020/transforms/board.mjs +49 -18
- package/esm2020/utils/board.mjs +11 -2
- package/esm2020/utils/index.mjs +2 -1
- package/esm2020/utils/selected-element.mjs +14 -3
- package/esm2020/utils/to-image.mjs +106 -0
- package/esm2020/utils/tree.mjs +8 -3
- package/esm2020/utils/viewport.mjs +9 -5
- package/fesm2015/plait-core.mjs +221 -59
- package/fesm2015/plait-core.mjs.map +1 -1
- package/fesm2020/plait-core.mjs +218 -58
- package/fesm2020/plait-core.mjs.map +1 -1
- package/interfaces/board.d.ts +1 -1
- package/interfaces/viewport.d.ts +6 -0
- package/package.json +1 -1
- package/transforms/board.d.ts +3 -0
- package/utils/board.d.ts +1 -0
- package/utils/index.d.ts +1 -0
- package/utils/selected-element.d.ts +2 -1
- package/utils/to-image.d.ts +10 -0
- package/utils/tree.d.ts +1 -1
- package/utils/viewport.d.ts +1 -0
package/fesm2020/plait-core.mjs
CHANGED
|
@@ -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
|
-
|
|
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
|
-
|
|
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
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
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.
|
|
1767
|
+
const nativeElement = PlaitBoard.getBoardContainer(board);
|
|
1636
1768
|
const nativeElementRect = nativeElement.getBoundingClientRect();
|
|
1637
|
-
const boardContainerRect = PlaitBoard.
|
|
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
|
-
|
|
1651
|
-
|
|
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
|
|
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
|
-
|
|
1674
|
-
|
|
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.
|
|
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.
|
|
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
|
|
2134
|
+
const range = { anchor: point, focus: point };
|
|
2135
|
+
const hitElements = getHitElements(board, { ranges: [range] });
|
|
1972
2136
|
const selectedElements = getSelectedElements(board);
|
|
1973
|
-
if (
|
|
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:
|
|
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.
|
|
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.
|
|
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.
|
|
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
|
|
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
|
|
2161
|
-
if (
|
|
2322
|
+
const hitElement = getHitElementOfRoot(board, movableElements, range);
|
|
2323
|
+
if (hitElement && selectedRootElements.includes(hitElement)) {
|
|
2162
2324
|
activeElements = selectedRootElements;
|
|
2163
2325
|
}
|
|
2164
|
-
else {
|
|
2165
|
-
activeElements =
|
|
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.
|
|
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.
|
|
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,
|
|
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
|