@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/fesm2015/plait-core.mjs
CHANGED
|
@@ -28,10 +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) {
|
|
32
|
-
var _a;
|
|
31
|
+
function depthFirstRecursion(node, callback, recursion, isReverse) {
|
|
33
32
|
if (!recursion || recursion(node)) {
|
|
34
|
-
|
|
33
|
+
let children = [];
|
|
34
|
+
if (node.children) {
|
|
35
|
+
children = [...node.children];
|
|
36
|
+
}
|
|
37
|
+
children = isReverse ? children.reverse() : children;
|
|
38
|
+
children.forEach(child => {
|
|
35
39
|
depthFirstRecursion(child, callback, recursion);
|
|
36
40
|
});
|
|
37
41
|
}
|
|
@@ -173,7 +177,7 @@ const PlaitBoard = {
|
|
|
173
177
|
getComponent(board) {
|
|
174
178
|
return BOARD_TO_COMPONENT.get(board);
|
|
175
179
|
},
|
|
176
|
-
|
|
180
|
+
getBoardContainer(board) {
|
|
177
181
|
return PlaitBoard.getComponent(board).nativeElement;
|
|
178
182
|
},
|
|
179
183
|
getRectangle(board) {
|
|
@@ -765,10 +769,27 @@ function distanceBetweenPointAndRectangle(x, y, rect) {
|
|
|
765
769
|
return Math.sqrt(dx * dx + dy * dy);
|
|
766
770
|
}
|
|
767
771
|
|
|
772
|
+
const SELECTION_BORDER_COLOR = '#6698FF';
|
|
773
|
+
const SELECTION_FILL_COLOR = '#6698FF19'; // 主色 0.1 透明度
|
|
774
|
+
const Selection = {
|
|
775
|
+
isCollapsed(selection) {
|
|
776
|
+
if (selection.anchor[0] == selection.focus[0] && selection.anchor[1] === selection.focus[1]) {
|
|
777
|
+
return true;
|
|
778
|
+
}
|
|
779
|
+
else {
|
|
780
|
+
return false;
|
|
781
|
+
}
|
|
782
|
+
}
|
|
783
|
+
};
|
|
784
|
+
|
|
768
785
|
const getHitElements = (board, selection) => {
|
|
769
786
|
const realSelection = selection || board.selection;
|
|
770
787
|
const selectedElements = [];
|
|
788
|
+
const isCollapsed = realSelection && realSelection.ranges.length === 1 && Selection.isCollapsed(realSelection.ranges[0]);
|
|
771
789
|
depthFirstRecursion(board, node => {
|
|
790
|
+
if (selectedElements.length > 0 && isCollapsed) {
|
|
791
|
+
return;
|
|
792
|
+
}
|
|
772
793
|
if (!PlaitBoard.isBoard(node) &&
|
|
773
794
|
realSelection &&
|
|
774
795
|
realSelection.ranges.some(range => {
|
|
@@ -783,10 +804,16 @@ const getHitElements = (board, selection) => {
|
|
|
783
804
|
else {
|
|
784
805
|
return false;
|
|
785
806
|
}
|
|
786
|
-
});
|
|
807
|
+
}, true);
|
|
787
808
|
return selectedElements;
|
|
788
809
|
};
|
|
789
|
-
const
|
|
810
|
+
const getHitElementOfRoot = (board, rootElements, range) => {
|
|
811
|
+
const newRootElements = [...rootElements].reverse();
|
|
812
|
+
return newRootElements.find(item => {
|
|
813
|
+
return board.isHitSelection(item, range);
|
|
814
|
+
});
|
|
815
|
+
};
|
|
816
|
+
const isHitElements = (board, elements, ranges) => {
|
|
790
817
|
let isIntersectionElements = false;
|
|
791
818
|
if (elements.length) {
|
|
792
819
|
elements.map(item => {
|
|
@@ -919,11 +946,20 @@ function transformPoint(board, point) {
|
|
|
919
946
|
return newPoint;
|
|
920
947
|
}
|
|
921
948
|
function isInPlaitBoard(board, x, y) {
|
|
922
|
-
const plaitBoardElement = PlaitBoard.
|
|
949
|
+
const plaitBoardElement = PlaitBoard.getBoardContainer(board);
|
|
923
950
|
const plaitBoardRect = plaitBoardElement.getBoundingClientRect();
|
|
924
951
|
const distances = distanceBetweenPointAndRectangle(x, y, plaitBoardRect);
|
|
925
952
|
return distances === 0;
|
|
926
953
|
}
|
|
954
|
+
function getRealScrollBarWidth(board) {
|
|
955
|
+
const { hideScrollbar } = board.options;
|
|
956
|
+
let scrollBarWidth = 0;
|
|
957
|
+
if (!hideScrollbar) {
|
|
958
|
+
const viewportContainer = PlaitBoard.getViewportContainer(board);
|
|
959
|
+
scrollBarWidth = viewportContainer.offsetWidth - viewportContainer.clientWidth;
|
|
960
|
+
}
|
|
961
|
+
return scrollBarWidth;
|
|
962
|
+
}
|
|
927
963
|
|
|
928
964
|
function createForeignObject(x, y, width, height) {
|
|
929
965
|
var newForeignObject = document.createElementNS(NS, 'foreignObject');
|
|
@@ -1416,19 +1452,6 @@ const Point = {
|
|
|
1416
1452
|
}
|
|
1417
1453
|
};
|
|
1418
1454
|
|
|
1419
|
-
const SELECTION_BORDER_COLOR = '#6698FF';
|
|
1420
|
-
const SELECTION_FILL_COLOR = '#6698FF19'; // 主色 0.1 透明度
|
|
1421
|
-
const Selection = {
|
|
1422
|
-
isCollapsed(selection) {
|
|
1423
|
-
if (selection.anchor[0] == selection.focus[0] && selection.anchor[1] === selection.focus[1]) {
|
|
1424
|
-
return true;
|
|
1425
|
-
}
|
|
1426
|
-
else {
|
|
1427
|
-
return false;
|
|
1428
|
-
}
|
|
1429
|
-
}
|
|
1430
|
-
};
|
|
1431
|
-
|
|
1432
1455
|
const SAVING = new WeakMap();
|
|
1433
1456
|
const MERGING = new WeakMap();
|
|
1434
1457
|
|
|
@@ -1442,7 +1465,7 @@ const IS_FROM_VIEWPORT_CHANGE = new WeakMap();
|
|
|
1442
1465
|
function getViewportContainerRect(board) {
|
|
1443
1466
|
const { hideScrollbar } = board.options;
|
|
1444
1467
|
const scrollBarWidth = hideScrollbar ? SCROLL_BAR_WIDTH : 0;
|
|
1445
|
-
const viewportRect = PlaitBoard.
|
|
1468
|
+
const viewportRect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
|
|
1446
1469
|
return {
|
|
1447
1470
|
width: viewportRect.width + scrollBarWidth,
|
|
1448
1471
|
height: viewportRect.height + scrollBarWidth
|
|
@@ -1450,7 +1473,7 @@ function getViewportContainerRect(board) {
|
|
|
1450
1473
|
}
|
|
1451
1474
|
function getElementHostBBox(board, zoom) {
|
|
1452
1475
|
const childrenRect = getRectangleByElements(board, board.children, true);
|
|
1453
|
-
const viewportContainerRect = PlaitBoard.
|
|
1476
|
+
const viewportContainerRect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
|
|
1454
1477
|
const containerWidth = viewportContainerRect.width / zoom;
|
|
1455
1478
|
const containerHeight = viewportContainerRect.height / zoom;
|
|
1456
1479
|
let left;
|
|
@@ -1495,7 +1518,7 @@ function clampZoomLevel(zoom, minZoom = 0.2, maxZoom = 4) {
|
|
|
1495
1518
|
return zoom < minZoom ? minZoom : zoom > maxZoom ? maxZoom : zoom;
|
|
1496
1519
|
}
|
|
1497
1520
|
function getViewBox(board, zoom) {
|
|
1498
|
-
const boardContainerRectangle = PlaitBoard.
|
|
1521
|
+
const boardContainerRectangle = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
|
|
1499
1522
|
const elementHostBBox = getElementHostBBox(board, zoom);
|
|
1500
1523
|
const horizontalPadding = boardContainerRectangle.width / 2;
|
|
1501
1524
|
const verticalPadding = boardContainerRectangle.height / 2;
|
|
@@ -1507,6 +1530,10 @@ function getViewBox(board, zoom) {
|
|
|
1507
1530
|
];
|
|
1508
1531
|
return viewBox;
|
|
1509
1532
|
}
|
|
1533
|
+
function getViewBoxCenterPoint(board) {
|
|
1534
|
+
const childrenRectangle = getRectangleByElements(board, board.children, true);
|
|
1535
|
+
return [childrenRectangle.x + childrenRectangle.width / 2, childrenRectangle.y + childrenRectangle.height / 2];
|
|
1536
|
+
}
|
|
1510
1537
|
function setSVGViewBox(board, viewBox) {
|
|
1511
1538
|
const zoom = board.viewport.zoom;
|
|
1512
1539
|
const hostElement = PlaitBoard.getHost(board);
|
|
@@ -1550,7 +1577,7 @@ function initializeViewportOffset(board) {
|
|
|
1550
1577
|
var _a;
|
|
1551
1578
|
if (!((_a = board.viewport) === null || _a === void 0 ? void 0 : _a.origination)) {
|
|
1552
1579
|
const zoom = board.viewport.zoom;
|
|
1553
|
-
const viewportContainerRect = PlaitBoard.
|
|
1580
|
+
const viewportContainerRect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
|
|
1554
1581
|
const viewBox = getViewBox(board, zoom);
|
|
1555
1582
|
const centerX = viewBox[0] + viewBox[2] / 2;
|
|
1556
1583
|
const centerY = viewBox[1] + viewBox[3] / 2;
|
|
@@ -1612,9 +1639,9 @@ const updatePointerType = (board, pointer) => {
|
|
|
1612
1639
|
function updateZoom(board, newZoom, isCenter = true) {
|
|
1613
1640
|
newZoom = clampZoomLevel(newZoom);
|
|
1614
1641
|
const mousePoint = PlaitBoard.getMovingPoint(board);
|
|
1615
|
-
const nativeElement = PlaitBoard.
|
|
1642
|
+
const nativeElement = PlaitBoard.getBoardContainer(board);
|
|
1616
1643
|
const nativeElementRect = nativeElement.getBoundingClientRect();
|
|
1617
|
-
const boardContainerRect = PlaitBoard.
|
|
1644
|
+
const boardContainerRect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
|
|
1618
1645
|
let focusPoint = [boardContainerRect.width / 2, boardContainerRect.height / 2];
|
|
1619
1646
|
if (!isCenter && mousePoint && distanceBetweenPointAndRectangle(mousePoint[0], mousePoint[1], nativeElementRect) === 0) {
|
|
1620
1647
|
focusPoint = toPoint(mousePoint[0], mousePoint[1], nativeElement);
|
|
@@ -1627,13 +1654,8 @@ function updateZoom(board, newZoom, isCenter = true) {
|
|
|
1627
1654
|
updateViewport(board, newOrigination, newZoom);
|
|
1628
1655
|
}
|
|
1629
1656
|
function fitViewport(board) {
|
|
1630
|
-
|
|
1631
|
-
|
|
1632
|
-
if (!hideScrollbar) {
|
|
1633
|
-
const viewportContainer = PlaitBoard.getViewportContainer(board);
|
|
1634
|
-
scrollBarWidth = viewportContainer.offsetWidth - viewportContainer.clientWidth;
|
|
1635
|
-
}
|
|
1636
|
-
const boardContainerRect = PlaitBoard.getBoardNativeElement(board).getBoundingClientRect();
|
|
1657
|
+
let scrollBarWidth = getRealScrollBarWidth(board);
|
|
1658
|
+
const boardContainerRect = PlaitBoard.getBoardContainer(board).getBoundingClientRect();
|
|
1637
1659
|
const elementHostBox = getRectangleByElements(board, board.children, true);
|
|
1638
1660
|
const zoom = board.viewport.zoom;
|
|
1639
1661
|
const autoFitPadding = 16;
|
|
@@ -1646,12 +1668,47 @@ function fitViewport(board) {
|
|
|
1646
1668
|
else {
|
|
1647
1669
|
newZoom = 1;
|
|
1648
1670
|
}
|
|
1649
|
-
const
|
|
1650
|
-
const
|
|
1651
|
-
|
|
1671
|
+
const centerPoint = getViewBoxCenterPoint(board);
|
|
1672
|
+
const newOrigination = [
|
|
1673
|
+
centerPoint[0] - boardContainerRect.width / 2 / newZoom + scrollBarWidth / 2 / zoom,
|
|
1674
|
+
centerPoint[1] - boardContainerRect.height / 2 / newZoom + scrollBarWidth / 2 / zoom
|
|
1675
|
+
];
|
|
1676
|
+
updateViewport(board, newOrigination, newZoom);
|
|
1677
|
+
}
|
|
1678
|
+
function fitViewportWidth(board, options) {
|
|
1679
|
+
let scrollBarWidth = getRealScrollBarWidth(board);
|
|
1680
|
+
const boardContainer = PlaitBoard.getBoardContainer(board);
|
|
1681
|
+
const boardContainerRectangle = boardContainer.getBoundingClientRect();
|
|
1682
|
+
let finalWidth = 0;
|
|
1683
|
+
if (options.maxWidth) {
|
|
1684
|
+
finalWidth = options.maxWidth;
|
|
1685
|
+
}
|
|
1686
|
+
else {
|
|
1687
|
+
finalWidth = boardContainerRectangle.width;
|
|
1688
|
+
}
|
|
1689
|
+
const elementHostBox = getRectangleByElements(board, board.children, true);
|
|
1690
|
+
const contentWidth = finalWidth - 2 * options.autoFitPadding;
|
|
1691
|
+
let newZoom = 0;
|
|
1692
|
+
if (contentWidth < elementHostBox.width) {
|
|
1693
|
+
newZoom = Math.min(contentWidth / elementHostBox.width);
|
|
1694
|
+
}
|
|
1695
|
+
else {
|
|
1696
|
+
newZoom = 1;
|
|
1697
|
+
}
|
|
1698
|
+
let finalHeight = elementHostBox.height * newZoom + 2 * options.autoFitPadding;
|
|
1699
|
+
if (finalHeight > options.limitHeight) {
|
|
1700
|
+
const containerEl = boardContainer.closest(`.${options.containerClass}`);
|
|
1701
|
+
containerEl.style.height = `${finalHeight}px`;
|
|
1702
|
+
initializeViewportContainer(board);
|
|
1703
|
+
}
|
|
1704
|
+
else {
|
|
1705
|
+
finalHeight = options.limitHeight;
|
|
1706
|
+
}
|
|
1707
|
+
const centerX = elementHostBox.x + elementHostBox.width / 2;
|
|
1708
|
+
const centerY = elementHostBox.y + elementHostBox.height / 2;
|
|
1652
1709
|
const newOrigination = [
|
|
1653
|
-
centerX -
|
|
1654
|
-
centerY -
|
|
1710
|
+
centerX - finalWidth / 2 / newZoom + scrollBarWidth / 2 / newZoom,
|
|
1711
|
+
centerY - finalHeight / 2 / newZoom + scrollBarWidth / 2 / newZoom
|
|
1655
1712
|
];
|
|
1656
1713
|
updateViewport(board, newOrigination, newZoom);
|
|
1657
1714
|
}
|
|
@@ -1671,7 +1728,8 @@ const BoardTransforms = {
|
|
|
1671
1728
|
updateViewport,
|
|
1672
1729
|
fitViewport,
|
|
1673
1730
|
updateZoom,
|
|
1674
|
-
updateThemeColor
|
|
1731
|
+
updateThemeColor,
|
|
1732
|
+
fitViewportWidth
|
|
1675
1733
|
};
|
|
1676
1734
|
|
|
1677
1735
|
const Transforms = Object.assign(Object.assign(Object.assign(Object.assign({}, GeneralTransforms), ViewportTransforms$1), SelectionTransforms), NodeTransforms);
|
|
@@ -1754,6 +1812,7 @@ function createBoard(children, options) {
|
|
|
1754
1812
|
onChange: () => { },
|
|
1755
1813
|
mousedown: (event) => { },
|
|
1756
1814
|
mousemove: (event) => { },
|
|
1815
|
+
mouseleave: (event) => { },
|
|
1757
1816
|
globalMousemove: (event) => { },
|
|
1758
1817
|
mouseup: (event) => { },
|
|
1759
1818
|
globalMouseup: (event) => { },
|
|
@@ -1882,7 +1941,7 @@ function withHandPointer(board) {
|
|
|
1882
1941
|
board.mousedown = (event) => {
|
|
1883
1942
|
if (PlaitBoard.isPointer(board, PlaitPointerType.hand) && isMainPointer(event)) {
|
|
1884
1943
|
isMoving = true;
|
|
1885
|
-
PlaitBoard.
|
|
1944
|
+
PlaitBoard.getBoardContainer(board).classList.add('viewport-moving');
|
|
1886
1945
|
plaitBoardMove.x = event.x;
|
|
1887
1946
|
plaitBoardMove.y = event.y;
|
|
1888
1947
|
}
|
|
@@ -1902,7 +1961,7 @@ function withHandPointer(board) {
|
|
|
1902
1961
|
board.globalMouseup = (event) => {
|
|
1903
1962
|
if (board.selection) {
|
|
1904
1963
|
isMoving = false;
|
|
1905
|
-
PlaitBoard.
|
|
1964
|
+
PlaitBoard.getBoardContainer(board).classList.remove('viewport-moving');
|
|
1906
1965
|
plaitBoardMove.x = 0;
|
|
1907
1966
|
plaitBoardMove.y = 0;
|
|
1908
1967
|
}
|
|
@@ -1942,16 +2001,14 @@ function withSelection(board) {
|
|
|
1942
2001
|
}
|
|
1943
2002
|
const options = board.getPluginOptions(PlaitPluginKey.withSelection);
|
|
1944
2003
|
const point = transformPoint(board, toPoint(event.x, event.y, PlaitBoard.getHost(board)));
|
|
1945
|
-
const
|
|
2004
|
+
const range = { anchor: point, focus: point };
|
|
2005
|
+
const hitElements = getHitElements(board, { ranges: [range] });
|
|
1946
2006
|
const selectedElements = getSelectedElements(board);
|
|
1947
|
-
if (
|
|
2007
|
+
if (hitElements.length === 1 && selectedElements.includes(hitElements[0])) {
|
|
1948
2008
|
mousedown(event);
|
|
1949
2009
|
return;
|
|
1950
2010
|
}
|
|
1951
|
-
const range = { anchor: point, focus: point };
|
|
1952
|
-
const hitElements = getHitElements(board, { ranges: [range] });
|
|
1953
2011
|
if (PlaitBoard.isPointer(board, PlaitPointerType.selection) &&
|
|
1954
|
-
getHitElements(board, { ranges: [range] }).length === 0 &&
|
|
1955
2012
|
hitElements.length === 0 &&
|
|
1956
2013
|
options.isMultiple &&
|
|
1957
2014
|
!options.isDisabledSelect) {
|
|
@@ -1961,7 +2018,7 @@ function withSelection(board) {
|
|
|
1961
2018
|
// prevent text from being selected
|
|
1962
2019
|
event.preventDefault();
|
|
1963
2020
|
}
|
|
1964
|
-
Transforms.setSelection(board, { ranges:
|
|
2021
|
+
Transforms.setSelection(board, { ranges: [range] });
|
|
1965
2022
|
mousedown(event);
|
|
1966
2023
|
};
|
|
1967
2024
|
board.globalMousemove = (event) => {
|
|
@@ -1996,7 +2053,7 @@ function withSelection(board) {
|
|
|
1996
2053
|
Transforms.setSelection(board, { ranges: [{ anchor: start, focus: end }] });
|
|
1997
2054
|
}
|
|
1998
2055
|
if (PlaitBoard.isFocus(board)) {
|
|
1999
|
-
const isInBoard = event.target instanceof Node && PlaitBoard.
|
|
2056
|
+
const isInBoard = event.target instanceof Node && PlaitBoard.getBoardContainer(board).contains(event.target);
|
|
2000
2057
|
const isInDocument = event.target instanceof Node && document.contains(event.target);
|
|
2001
2058
|
const isAttachedElement = event.target instanceof Element && event.target.closest(`.${ATTACHED_ELEMENT_CLASS_NAME}`);
|
|
2002
2059
|
// Clear selection when mouse board outside area
|
|
@@ -2072,11 +2129,11 @@ function isSelectionMoving(board) {
|
|
|
2072
2129
|
return !!BOARD_TO_IS_SELECTION_MOVING.get(board);
|
|
2073
2130
|
}
|
|
2074
2131
|
function setSelectionMoving(board) {
|
|
2075
|
-
PlaitBoard.
|
|
2132
|
+
PlaitBoard.getBoardContainer(board).classList.add('selection-moving');
|
|
2076
2133
|
BOARD_TO_IS_SELECTION_MOVING.set(board, true);
|
|
2077
2134
|
}
|
|
2078
2135
|
function clearSelectionMoving(board) {
|
|
2079
|
-
PlaitBoard.
|
|
2136
|
+
PlaitBoard.getBoardContainer(board).classList.remove('selection-moving');
|
|
2080
2137
|
BOARD_TO_IS_SELECTION_MOVING.delete(board);
|
|
2081
2138
|
}
|
|
2082
2139
|
function createSelectionOuterG(board, selectElements) {
|
|
@@ -2127,19 +2184,17 @@ function withMoving(board) {
|
|
|
2127
2184
|
board.mousedown = event => {
|
|
2128
2185
|
const host = BOARD_TO_HOST.get(board);
|
|
2129
2186
|
const point = transformPoint(board, toPoint(event.x, event.y, host));
|
|
2130
|
-
const
|
|
2187
|
+
const range = { anchor: point, focus: point };
|
|
2131
2188
|
let movableElements = board.children.filter(item => board.isMovable(item));
|
|
2132
2189
|
if (movableElements.length) {
|
|
2133
2190
|
startPoint = point;
|
|
2134
2191
|
const selectedRootElements = getSelectedElements(board).filter(item => movableElements.includes(item));
|
|
2135
|
-
const
|
|
2136
|
-
if (
|
|
2192
|
+
const hitElement = getHitElementOfRoot(board, movableElements, range);
|
|
2193
|
+
if (hitElement && selectedRootElements.includes(hitElement)) {
|
|
2137
2194
|
activeElements = selectedRootElements;
|
|
2138
2195
|
}
|
|
2139
|
-
else {
|
|
2140
|
-
activeElements =
|
|
2141
|
-
return board.isHitSelection(item, range);
|
|
2142
|
-
}));
|
|
2196
|
+
else if (hitElement) {
|
|
2197
|
+
activeElements = [hitElement];
|
|
2143
2198
|
}
|
|
2144
2199
|
}
|
|
2145
2200
|
mousedown(event);
|
|
@@ -2165,7 +2220,7 @@ function withMoving(board) {
|
|
|
2165
2220
|
MERGING.set(board, true);
|
|
2166
2221
|
return PlaitNode.get(board, [index]);
|
|
2167
2222
|
});
|
|
2168
|
-
PlaitBoard.
|
|
2223
|
+
PlaitBoard.getBoardContainer(board).classList.add('element-moving');
|
|
2169
2224
|
addMovingElements(board, currentElements);
|
|
2170
2225
|
});
|
|
2171
2226
|
}
|
|
@@ -2199,7 +2254,7 @@ function withMoving(board) {
|
|
|
2199
2254
|
activeElements = [];
|
|
2200
2255
|
removeMovingElements(board);
|
|
2201
2256
|
MERGING.set(board, false);
|
|
2202
|
-
PlaitBoard.
|
|
2257
|
+
PlaitBoard.getBoardContainer(board).classList.remove('element-moving');
|
|
2203
2258
|
}
|
|
2204
2259
|
return board;
|
|
2205
2260
|
}
|
|
@@ -2445,7 +2500,6 @@ class PlaitBoardComponent {
|
|
|
2445
2500
|
this.initializeHookListener();
|
|
2446
2501
|
this.viewportScrollListener();
|
|
2447
2502
|
this.elementResizeListener();
|
|
2448
|
-
this.mouseLeaveListener();
|
|
2449
2503
|
});
|
|
2450
2504
|
BOARD_TO_COMPONENT.set(this.board, this);
|
|
2451
2505
|
BOARD_TO_ROUGH_SVG.set(this.board, roughSVG);
|
|
@@ -2516,6 +2570,12 @@ class PlaitBoardComponent {
|
|
|
2516
2570
|
BOARD_TO_MOVING_POINT.set(this.board, [event.x, event.y]);
|
|
2517
2571
|
this.board.mousemove(event);
|
|
2518
2572
|
});
|
|
2573
|
+
fromEvent(this.host, 'mouseleave')
|
|
2574
|
+
.pipe(takeUntil(this.destroy$))
|
|
2575
|
+
.subscribe((event) => {
|
|
2576
|
+
BOARD_TO_MOVING_POINT.delete(this.board);
|
|
2577
|
+
this.board.mouseleave(event);
|
|
2578
|
+
});
|
|
2519
2579
|
fromEvent(document, 'mousemove')
|
|
2520
2580
|
.pipe(takeUntil(this.destroy$))
|
|
2521
2581
|
.subscribe((event) => {
|
|
@@ -2625,13 +2685,6 @@ class PlaitBoardComponent {
|
|
|
2625
2685
|
});
|
|
2626
2686
|
this.resizeObserver.observe(this.nativeElement);
|
|
2627
2687
|
}
|
|
2628
|
-
mouseLeaveListener() {
|
|
2629
|
-
fromEvent(this.host, 'mouseleave')
|
|
2630
|
-
.pipe(takeUntil(this.destroy$))
|
|
2631
|
-
.subscribe((event) => {
|
|
2632
|
-
BOARD_TO_MOVING_POINT.delete(this.board);
|
|
2633
|
-
});
|
|
2634
|
-
}
|
|
2635
2688
|
initializeIslands() {
|
|
2636
2689
|
var _a;
|
|
2637
2690
|
(_a = this.islands) === null || _a === void 0 ? void 0 : _a.forEach(island => {
|
|
@@ -2776,5 +2829,5 @@ const clearNodeWeakMap = (object) => {
|
|
|
2776
2829
|
* Generated bundle index. Do not edit.
|
|
2777
2830
|
*/
|
|
2778
2831
|
|
|
2779
|
-
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,
|
|
2832
|
+
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 };
|
|
2780
2833
|
//# sourceMappingURL=plait-core.mjs.map
|