@plait/core 0.9.0 → 0.11.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/README.md +64 -1
- package/board/board.component.d.ts +0 -1
- package/esm2020/board/board.component.mjs +7 -9
- package/esm2020/interfaces/board.mjs +2 -2
- package/esm2020/interfaces/viewport.mjs +1 -1
- package/esm2020/plugins/create-board.mjs +2 -1
- package/esm2020/plugins/with-hand.mjs +3 -3
- package/esm2020/plugins/with-moving.mjs +9 -11
- package/esm2020/plugins/with-selection.mjs +9 -11
- package/esm2020/transforms/board.mjs +49 -18
- package/esm2020/utils/board.mjs +11 -2
- package/esm2020/utils/selected-element.mjs +14 -3
- package/esm2020/utils/tree.mjs +8 -3
- package/esm2020/utils/viewport.mjs +9 -5
- package/fesm2015/plait-core.mjs +121 -68
- package/fesm2015/plait-core.mjs.map +1 -1
- package/fesm2020/plait-core.mjs +121 -67
- package/fesm2020/plait-core.mjs.map +1 -1
- package/interfaces/board.d.ts +2 -1
- package/interfaces/viewport.d.ts +6 -0
- package/package.json +1 -1
- package/styles/styles.scss +0 -9
- package/transforms/board.d.ts +3 -0
- package/utils/board.d.ts +1 -0
- package/utils/selected-element.d.ts +2 -1
- 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');
|
|
@@ -1434,19 +1471,6 @@ const Point = {
|
|
|
1434
1471
|
}
|
|
1435
1472
|
};
|
|
1436
1473
|
|
|
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
1474
|
const SAVING = new WeakMap();
|
|
1451
1475
|
const MERGING = new WeakMap();
|
|
1452
1476
|
|
|
@@ -1460,7 +1484,7 @@ const IS_FROM_VIEWPORT_CHANGE = new WeakMap();
|
|
|
1460
1484
|
function getViewportContainerRect(board) {
|
|
1461
1485
|
const { hideScrollbar } = board.options;
|
|
1462
1486
|
const scrollBarWidth = hideScrollbar ? SCROLL_BAR_WIDTH : 0;
|
|
1463
|
-
const viewportRect = PlaitBoard.
|
|
1487
|
+
const viewportRect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
|
|
1464
1488
|
return {
|
|
1465
1489
|
width: viewportRect.width + scrollBarWidth,
|
|
1466
1490
|
height: viewportRect.height + scrollBarWidth
|
|
@@ -1468,7 +1492,7 @@ function getViewportContainerRect(board) {
|
|
|
1468
1492
|
}
|
|
1469
1493
|
function getElementHostBBox(board, zoom) {
|
|
1470
1494
|
const childrenRect = getRectangleByElements(board, board.children, true);
|
|
1471
|
-
const viewportContainerRect = PlaitBoard.
|
|
1495
|
+
const viewportContainerRect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
|
|
1472
1496
|
const containerWidth = viewportContainerRect.width / zoom;
|
|
1473
1497
|
const containerHeight = viewportContainerRect.height / zoom;
|
|
1474
1498
|
let left;
|
|
@@ -1513,7 +1537,7 @@ function clampZoomLevel(zoom, minZoom = 0.2, maxZoom = 4) {
|
|
|
1513
1537
|
return zoom < minZoom ? minZoom : zoom > maxZoom ? maxZoom : zoom;
|
|
1514
1538
|
}
|
|
1515
1539
|
function getViewBox(board, zoom) {
|
|
1516
|
-
const boardContainerRectangle = PlaitBoard.
|
|
1540
|
+
const boardContainerRectangle = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
|
|
1517
1541
|
const elementHostBBox = getElementHostBBox(board, zoom);
|
|
1518
1542
|
const horizontalPadding = boardContainerRectangle.width / 2;
|
|
1519
1543
|
const verticalPadding = boardContainerRectangle.height / 2;
|
|
@@ -1525,6 +1549,10 @@ function getViewBox(board, zoom) {
|
|
|
1525
1549
|
];
|
|
1526
1550
|
return viewBox;
|
|
1527
1551
|
}
|
|
1552
|
+
function getViewBoxCenterPoint(board) {
|
|
1553
|
+
const childrenRectangle = getRectangleByElements(board, board.children, true);
|
|
1554
|
+
return [childrenRectangle.x + childrenRectangle.width / 2, childrenRectangle.y + childrenRectangle.height / 2];
|
|
1555
|
+
}
|
|
1528
1556
|
function setSVGViewBox(board, viewBox) {
|
|
1529
1557
|
const zoom = board.viewport.zoom;
|
|
1530
1558
|
const hostElement = PlaitBoard.getHost(board);
|
|
@@ -1567,7 +1595,7 @@ function initializeViewBox(board) {
|
|
|
1567
1595
|
function initializeViewportOffset(board) {
|
|
1568
1596
|
if (!board.viewport?.origination) {
|
|
1569
1597
|
const zoom = board.viewport.zoom;
|
|
1570
|
-
const viewportContainerRect = PlaitBoard.
|
|
1598
|
+
const viewportContainerRect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
|
|
1571
1599
|
const viewBox = getViewBox(board, zoom);
|
|
1572
1600
|
const centerX = viewBox[0] + viewBox[2] / 2;
|
|
1573
1601
|
const centerY = viewBox[1] + viewBox[3] / 2;
|
|
@@ -1632,9 +1660,9 @@ const updatePointerType = (board, pointer) => {
|
|
|
1632
1660
|
function updateZoom(board, newZoom, isCenter = true) {
|
|
1633
1661
|
newZoom = clampZoomLevel(newZoom);
|
|
1634
1662
|
const mousePoint = PlaitBoard.getMovingPoint(board);
|
|
1635
|
-
const nativeElement = PlaitBoard.
|
|
1663
|
+
const nativeElement = PlaitBoard.getBoardContainer(board);
|
|
1636
1664
|
const nativeElementRect = nativeElement.getBoundingClientRect();
|
|
1637
|
-
const boardContainerRect = PlaitBoard.
|
|
1665
|
+
const boardContainerRect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
|
|
1638
1666
|
let focusPoint = [boardContainerRect.width / 2, boardContainerRect.height / 2];
|
|
1639
1667
|
if (!isCenter && mousePoint && distanceBetweenPointAndRectangle(mousePoint[0], mousePoint[1], nativeElementRect) === 0) {
|
|
1640
1668
|
focusPoint = toPoint(mousePoint[0], mousePoint[1], nativeElement);
|
|
@@ -1647,13 +1675,8 @@ function updateZoom(board, newZoom, isCenter = true) {
|
|
|
1647
1675
|
updateViewport(board, newOrigination, newZoom);
|
|
1648
1676
|
}
|
|
1649
1677
|
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();
|
|
1678
|
+
let scrollBarWidth = getRealScrollBarWidth(board);
|
|
1679
|
+
const boardContainerRect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
|
|
1657
1680
|
const elementHostBox = getRectangleByElements(board, board.children, true);
|
|
1658
1681
|
const zoom = board.viewport.zoom;
|
|
1659
1682
|
const autoFitPadding = 16;
|
|
@@ -1666,12 +1689,47 @@ function fitViewport(board) {
|
|
|
1666
1689
|
else {
|
|
1667
1690
|
newZoom = 1;
|
|
1668
1691
|
}
|
|
1669
|
-
const
|
|
1670
|
-
const centerX = viewBox[0] + viewBox[2] / 2;
|
|
1671
|
-
const centerY = viewBox[1] + viewBox[3] / 2;
|
|
1692
|
+
const centerPoint = getViewBoxCenterPoint(board);
|
|
1672
1693
|
const newOrigination = [
|
|
1673
|
-
|
|
1674
|
-
|
|
1694
|
+
centerPoint[0] - boardContainerRect.width / 2 / newZoom + scrollBarWidth / 2 / zoom,
|
|
1695
|
+
centerPoint[1] - boardContainerRect.height / 2 / newZoom + scrollBarWidth / 2 / zoom
|
|
1696
|
+
];
|
|
1697
|
+
updateViewport(board, newOrigination, newZoom);
|
|
1698
|
+
}
|
|
1699
|
+
function fitViewportWidth(board, options) {
|
|
1700
|
+
let scrollBarWidth = getRealScrollBarWidth(board);
|
|
1701
|
+
const boardContainer = PlaitBoard.getBoardContainer(board);
|
|
1702
|
+
const boardContainerRectangle = boardContainer.getBoundingClientRect();
|
|
1703
|
+
let finalWidth = 0;
|
|
1704
|
+
if (options.maxWidth) {
|
|
1705
|
+
finalWidth = options.maxWidth;
|
|
1706
|
+
}
|
|
1707
|
+
else {
|
|
1708
|
+
finalWidth = boardContainerRectangle.width;
|
|
1709
|
+
}
|
|
1710
|
+
const elementHostBox = getRectangleByElements(board, board.children, true);
|
|
1711
|
+
const contentWidth = finalWidth - 2 * options.autoFitPadding;
|
|
1712
|
+
let newZoom = 0;
|
|
1713
|
+
if (contentWidth < elementHostBox.width) {
|
|
1714
|
+
newZoom = Math.min(contentWidth / elementHostBox.width);
|
|
1715
|
+
}
|
|
1716
|
+
else {
|
|
1717
|
+
newZoom = 1;
|
|
1718
|
+
}
|
|
1719
|
+
let finalHeight = elementHostBox.height * newZoom + 2 * options.autoFitPadding;
|
|
1720
|
+
if (finalHeight > options.limitHeight) {
|
|
1721
|
+
const containerEl = boardContainer.closest(`.${options.containerClass}`);
|
|
1722
|
+
containerEl.style.height = `${finalHeight}px`;
|
|
1723
|
+
initializeViewportContainer(board);
|
|
1724
|
+
}
|
|
1725
|
+
else {
|
|
1726
|
+
finalHeight = options.limitHeight;
|
|
1727
|
+
}
|
|
1728
|
+
const centerX = elementHostBox.x + elementHostBox.width / 2;
|
|
1729
|
+
const centerY = elementHostBox.y + elementHostBox.height / 2;
|
|
1730
|
+
const newOrigination = [
|
|
1731
|
+
centerX - finalWidth / 2 / newZoom + scrollBarWidth / 2 / newZoom,
|
|
1732
|
+
centerY - finalHeight / 2 / newZoom + scrollBarWidth / 2 / newZoom
|
|
1675
1733
|
];
|
|
1676
1734
|
updateViewport(board, newOrigination, newZoom);
|
|
1677
1735
|
}
|
|
@@ -1691,7 +1749,8 @@ const BoardTransforms = {
|
|
|
1691
1749
|
updateViewport,
|
|
1692
1750
|
fitViewport,
|
|
1693
1751
|
updateZoom,
|
|
1694
|
-
updateThemeColor
|
|
1752
|
+
updateThemeColor,
|
|
1753
|
+
fitViewportWidth
|
|
1695
1754
|
};
|
|
1696
1755
|
|
|
1697
1756
|
const Transforms = {
|
|
@@ -1779,6 +1838,7 @@ function createBoard(children, options) {
|
|
|
1779
1838
|
onChange: () => { },
|
|
1780
1839
|
mousedown: (event) => { },
|
|
1781
1840
|
mousemove: (event) => { },
|
|
1841
|
+
mouseleave: (event) => { },
|
|
1782
1842
|
globalMousemove: (event) => { },
|
|
1783
1843
|
mouseup: (event) => { },
|
|
1784
1844
|
globalMouseup: (event) => { },
|
|
@@ -1907,7 +1967,7 @@ function withHandPointer(board) {
|
|
|
1907
1967
|
board.mousedown = (event) => {
|
|
1908
1968
|
if (PlaitBoard.isPointer(board, PlaitPointerType.hand) && isMainPointer(event)) {
|
|
1909
1969
|
isMoving = true;
|
|
1910
|
-
PlaitBoard.
|
|
1970
|
+
PlaitBoard.getBoardContainer(board).classList.add('viewport-moving');
|
|
1911
1971
|
plaitBoardMove.x = event.x;
|
|
1912
1972
|
plaitBoardMove.y = event.y;
|
|
1913
1973
|
}
|
|
@@ -1927,7 +1987,7 @@ function withHandPointer(board) {
|
|
|
1927
1987
|
board.globalMouseup = (event) => {
|
|
1928
1988
|
if (board.selection) {
|
|
1929
1989
|
isMoving = false;
|
|
1930
|
-
PlaitBoard.
|
|
1990
|
+
PlaitBoard.getBoardContainer(board).classList.remove('viewport-moving');
|
|
1931
1991
|
plaitBoardMove.x = 0;
|
|
1932
1992
|
plaitBoardMove.y = 0;
|
|
1933
1993
|
}
|
|
@@ -1967,16 +2027,14 @@ function withSelection(board) {
|
|
|
1967
2027
|
}
|
|
1968
2028
|
const options = board.getPluginOptions(PlaitPluginKey.withSelection);
|
|
1969
2029
|
const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
|
|
1970
|
-
const
|
|
2030
|
+
const range = { anchor: point, focus: point };
|
|
2031
|
+
const hitElements = getHitElements(board, { ranges: [range] });
|
|
1971
2032
|
const selectedElements = getSelectedElements(board);
|
|
1972
|
-
if (
|
|
2033
|
+
if (hitElements.length === 1 && selectedElements.includes(hitElements[0])) {
|
|
1973
2034
|
mousedown(event);
|
|
1974
2035
|
return;
|
|
1975
2036
|
}
|
|
1976
|
-
const range = { anchor: point, focus: point };
|
|
1977
|
-
const hitElements = getHitElements(board, { ranges: [range] });
|
|
1978
2037
|
if (PlaitBoard.isPointer(board, PlaitPointerType.selection) &&
|
|
1979
|
-
getHitElements(board, { ranges: [range] }).length === 0 &&
|
|
1980
2038
|
hitElements.length === 0 &&
|
|
1981
2039
|
options.isMultiple &&
|
|
1982
2040
|
!options.isDisabledSelect) {
|
|
@@ -1986,7 +2044,7 @@ function withSelection(board) {
|
|
|
1986
2044
|
// prevent text from being selected
|
|
1987
2045
|
event.preventDefault();
|
|
1988
2046
|
}
|
|
1989
|
-
Transforms.setSelection(board, { ranges:
|
|
2047
|
+
Transforms.setSelection(board, { ranges: [range] });
|
|
1990
2048
|
mousedown(event);
|
|
1991
2049
|
};
|
|
1992
2050
|
board.globalMousemove = (event) => {
|
|
@@ -2021,7 +2079,7 @@ function withSelection(board) {
|
|
|
2021
2079
|
Transforms.setSelection(board, { ranges: [{ anchor: start, focus: end }] });
|
|
2022
2080
|
}
|
|
2023
2081
|
if (PlaitBoard.isFocus(board)) {
|
|
2024
|
-
const isInBoard = event.target instanceof Node && PlaitBoard.
|
|
2082
|
+
const isInBoard = event.target instanceof Node && PlaitBoard.getBoardContainer(board).contains(event.target);
|
|
2025
2083
|
const isInDocument = event.target instanceof Node && document.contains(event.target);
|
|
2026
2084
|
const isAttachedElement = event.target instanceof Element && event.target.closest(`.${ATTACHED_ELEMENT_CLASS_NAME}`);
|
|
2027
2085
|
// Clear selection when mouse board outside area
|
|
@@ -2097,11 +2155,11 @@ function isSelectionMoving(board) {
|
|
|
2097
2155
|
return !!BOARD_TO_IS_SELECTION_MOVING.get(board);
|
|
2098
2156
|
}
|
|
2099
2157
|
function setSelectionMoving(board) {
|
|
2100
|
-
PlaitBoard.
|
|
2158
|
+
PlaitBoard.getBoardContainer(board).classList.add('selection-moving');
|
|
2101
2159
|
BOARD_TO_IS_SELECTION_MOVING.set(board, true);
|
|
2102
2160
|
}
|
|
2103
2161
|
function clearSelectionMoving(board) {
|
|
2104
|
-
PlaitBoard.
|
|
2162
|
+
PlaitBoard.getBoardContainer(board).classList.remove('selection-moving');
|
|
2105
2163
|
BOARD_TO_IS_SELECTION_MOVING.delete(board);
|
|
2106
2164
|
}
|
|
2107
2165
|
function createSelectionOuterG(board, selectElements) {
|
|
@@ -2152,19 +2210,17 @@ function withMoving(board) {
|
|
|
2152
2210
|
board.mousedown = event => {
|
|
2153
2211
|
const host = BOARD_TO_HOST.get(board);
|
|
2154
2212
|
const point = transformPoint(board, toPoint(event.x, event.y, host));
|
|
2155
|
-
const
|
|
2213
|
+
const range = { anchor: point, focus: point };
|
|
2156
2214
|
let movableElements = board.children.filter(item => board.isMovable(item));
|
|
2157
2215
|
if (movableElements.length) {
|
|
2158
2216
|
startPoint = point;
|
|
2159
2217
|
const selectedRootElements = getSelectedElements(board).filter(item => movableElements.includes(item));
|
|
2160
|
-
const
|
|
2161
|
-
if (
|
|
2218
|
+
const hitElement = getHitElementOfRoot(board, movableElements, range);
|
|
2219
|
+
if (hitElement && selectedRootElements.includes(hitElement)) {
|
|
2162
2220
|
activeElements = selectedRootElements;
|
|
2163
2221
|
}
|
|
2164
|
-
else {
|
|
2165
|
-
activeElements =
|
|
2166
|
-
return board.isHitSelection(item, range);
|
|
2167
|
-
}));
|
|
2222
|
+
else if (hitElement) {
|
|
2223
|
+
activeElements = [hitElement];
|
|
2168
2224
|
}
|
|
2169
2225
|
}
|
|
2170
2226
|
mousedown(event);
|
|
@@ -2190,7 +2246,7 @@ function withMoving(board) {
|
|
|
2190
2246
|
MERGING.set(board, true);
|
|
2191
2247
|
return PlaitNode.get(board, [index]);
|
|
2192
2248
|
});
|
|
2193
|
-
PlaitBoard.
|
|
2249
|
+
PlaitBoard.getBoardContainer(board).classList.add('element-moving');
|
|
2194
2250
|
addMovingElements(board, currentElements);
|
|
2195
2251
|
});
|
|
2196
2252
|
}
|
|
@@ -2224,7 +2280,7 @@ function withMoving(board) {
|
|
|
2224
2280
|
activeElements = [];
|
|
2225
2281
|
removeMovingElements(board);
|
|
2226
2282
|
MERGING.set(board, false);
|
|
2227
|
-
PlaitBoard.
|
|
2283
|
+
PlaitBoard.getBoardContainer(board).classList.remove('element-moving');
|
|
2228
2284
|
}
|
|
2229
2285
|
return board;
|
|
2230
2286
|
}
|
|
@@ -2470,7 +2526,6 @@ class PlaitBoardComponent {
|
|
|
2470
2526
|
this.initializeHookListener();
|
|
2471
2527
|
this.viewportScrollListener();
|
|
2472
2528
|
this.elementResizeListener();
|
|
2473
|
-
this.mouseLeaveListener();
|
|
2474
2529
|
});
|
|
2475
2530
|
BOARD_TO_COMPONENT.set(this.board, this);
|
|
2476
2531
|
BOARD_TO_ROUGH_SVG.set(this.board, roughSVG);
|
|
@@ -2541,6 +2596,12 @@ class PlaitBoardComponent {
|
|
|
2541
2596
|
BOARD_TO_MOVING_POINT.set(this.board, [event.x, event.y]);
|
|
2542
2597
|
this.board.mousemove(event);
|
|
2543
2598
|
});
|
|
2599
|
+
fromEvent(this.host, 'mouseleave')
|
|
2600
|
+
.pipe(takeUntil(this.destroy$))
|
|
2601
|
+
.subscribe((event) => {
|
|
2602
|
+
BOARD_TO_MOVING_POINT.delete(this.board);
|
|
2603
|
+
this.board.mouseleave(event);
|
|
2604
|
+
});
|
|
2544
2605
|
fromEvent(document, 'mousemove')
|
|
2545
2606
|
.pipe(takeUntil(this.destroy$))
|
|
2546
2607
|
.subscribe((event) => {
|
|
@@ -2646,13 +2707,6 @@ class PlaitBoardComponent {
|
|
|
2646
2707
|
});
|
|
2647
2708
|
this.resizeObserver.observe(this.nativeElement);
|
|
2648
2709
|
}
|
|
2649
|
-
mouseLeaveListener() {
|
|
2650
|
-
fromEvent(this.host, 'mouseleave')
|
|
2651
|
-
.pipe(takeUntil(this.destroy$))
|
|
2652
|
-
.subscribe((event) => {
|
|
2653
|
-
BOARD_TO_MOVING_POINT.delete(this.board);
|
|
2654
|
-
});
|
|
2655
|
-
}
|
|
2656
2710
|
initializeIslands() {
|
|
2657
2711
|
this.islands?.forEach(island => {
|
|
2658
2712
|
island.initialize(this.board);
|
|
@@ -2794,5 +2848,5 @@ const clearNodeWeakMap = (object) => {
|
|
|
2794
2848
|
* Generated bundle index. Do not edit.
|
|
2795
2849
|
*/
|
|
2796
2850
|
|
|
2797
|
-
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,
|
|
2851
|
+
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, 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, toPoint, transformPoint, transformPoints, updateForeignObject, updateViewportContainerScroll, updateViewportOffset, updateViewportOrigination, withMoving, withOptions, withSelection };
|
|
2798
2852
|
//# sourceMappingURL=plait-core.mjs.map
|