@plait/mind 0.93.2 → 0.93.3
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/fesm2022/plait-mind.mjs +306 -95
- package/fesm2022/plait-mind.mjs.map +1 -1
- package/package.json +1 -1
- package/types/plait-mind.d.ts +5 -2
package/fesm2022/plait-mind.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { DEFAULT_COLOR, DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, rgbaToHEX, PlaitElement, PlaitNode, Path, isNullOrUndefined, PlaitBoard, getSelectedElements, getI18nValue, idCreator, Transforms, clearSelectedElement, addSelectedElement, distanceBetweenPointAndRectangle, RectangleClient,
|
|
1
|
+
import { DEFAULT_COLOR, DefaultThemeColor, ColorfulThemeColor, SoftThemeColor, RetroThemeColor, DarkThemeColor, StarryThemeColor, rgbaToHEX, PlaitElement, PlaitNode, Path, isNullOrUndefined, PlaitBoard, getSelectedElements, getI18nValue, idCreator, Transforms, clearSelectedElement, addSelectedElement, distanceBetweenPointAndRectangle, RectangleClient, Direction, isHorizontalDirection, depthFirstRecursion, getIsRecursionFunc, setDragging, drawRoundRectangle, drawLinearPath, drawBezierPath, setStrokeLinecap, createG, createForeignObject, updateForeignObject, getRectangleByElements, toActiveRectangleFromViewBoxRectangle, ACTIVE_STROKE_WIDTH, SELECTION_RECTANGLE_CLASS_NAME, NODE_TO_PARENT, removeSelectedElement, PlaitHistoryBoard, createText, isSelectionMoving, isDragging, isMovingElements, NODE_TO_INDEX, PlaitPointerType, isMainPointer, toViewBoxPoint, toHostPoint, getHitElementByPoint, distanceBetweenPointAndPoint, CoreTransforms, toActivePointFromViewBoxPoint, BoardTransforms, throttleRAF, createDebugGenerator, getElementById, isTouchDevice, isSelectedElement, isContextmenu, temporaryDisableSelection, hotkeys, createClipboardContext, WritableClipboardType, Point, ResizeCursorClass, WritableClipboardOperationType, addOrCreateClipboardContext } from '@plait/core';
|
|
2
2
|
import { MindLayoutType, AbstractNode, isIndentedLayout, isHorizontalLogicLayout, ConnectingPosition, isHorizontalLayout, getNonAbstractChildren, isStandardLayout, isLeftLayout, isRightLayout, isVerticalLogicLayout, isTopLayout, isBottomLayout, getCorrectStartEnd, getAbstractLayout, GlobalLayout } from '@plait/layouts';
|
|
3
|
-
import { StrokeStyle, getFirstTextManage, buildText, getElementSize, DEFAULT_FONT_FAMILY, RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, addElementOfFocusedImage, ImageGenerator, removeElementOfFocusedImage, getStrokeLineDash,
|
|
3
|
+
import { StrokeStyle, getFirstTextManage, buildText, getElementSize, DEFAULT_FONT_FAMILY, RESIZE_HANDLE_DIAMETER, getRectangleResizeHandleRefs, getXDistanceBetweenPoint, addElementOfFocusedImage, ImageGenerator, removeElementOfFocusedImage, getStrokeLineDash, moveXOfPoint, moveYOfPoint, Generator, PropertyTransforms, TRANSPARENT, measureElement, isResizing, CommonElementFlavour, WithTextPluginKey, TextManage, isDrawingMode, isDndMode, setCreationMode, BoardCreationMode, isExpandHotkey, isTabHotkey, isEnterHotkey, isVirtualKey, isDelete, isSpaceHotkey, getElementOfFocusedImage, acceptImageTypes, buildImage, withResize, getElementsText } from '@plait/common';
|
|
4
4
|
import { DEFAULT_FONT_SIZE, PlaitMarkEditor, MarkTypes, FontSizes } from '@plait/text-plugins';
|
|
5
5
|
import { Node as Node$1, Path as Path$1 } from 'slate';
|
|
6
6
|
import { pointsOnBezierCurves } from 'points-on-curve';
|
|
@@ -1050,6 +1050,263 @@ const getHitImageResizeHandleDirection = (board, element, point) => {
|
|
|
1050
1050
|
return result;
|
|
1051
1051
|
};
|
|
1052
1052
|
|
|
1053
|
+
var HorizontalPlacement;
|
|
1054
|
+
(function (HorizontalPlacement) {
|
|
1055
|
+
HorizontalPlacement["left"] = "left";
|
|
1056
|
+
HorizontalPlacement["center"] = "center";
|
|
1057
|
+
HorizontalPlacement["right"] = "right";
|
|
1058
|
+
})(HorizontalPlacement || (HorizontalPlacement = {}));
|
|
1059
|
+
var VerticalPlacement;
|
|
1060
|
+
(function (VerticalPlacement) {
|
|
1061
|
+
VerticalPlacement["top"] = "top";
|
|
1062
|
+
VerticalPlacement["middle"] = "middle";
|
|
1063
|
+
VerticalPlacement["bottom"] = "bottom";
|
|
1064
|
+
})(VerticalPlacement || (VerticalPlacement = {}));
|
|
1065
|
+
|
|
1066
|
+
const getPointByPlacement = (client, placement) => {
|
|
1067
|
+
let x = client.x;
|
|
1068
|
+
let y = client.y;
|
|
1069
|
+
if (placement[0] === HorizontalPlacement.center) {
|
|
1070
|
+
x = client.x + client.width / 2;
|
|
1071
|
+
}
|
|
1072
|
+
if (placement[0] === HorizontalPlacement.right) {
|
|
1073
|
+
x = client.x + client.width;
|
|
1074
|
+
}
|
|
1075
|
+
if (placement[1] === VerticalPlacement.middle) {
|
|
1076
|
+
y = client.y + client.height / 2;
|
|
1077
|
+
}
|
|
1078
|
+
if (placement[1] === VerticalPlacement.bottom) {
|
|
1079
|
+
y = client.y + client.height;
|
|
1080
|
+
}
|
|
1081
|
+
return [x, y];
|
|
1082
|
+
};
|
|
1083
|
+
const getYDistanceBetweenPoint = (point1, point2, isHorizontalLayout) => {
|
|
1084
|
+
getXDistanceBetweenPoint(point1, point2, !isHorizontalLayout);
|
|
1085
|
+
};
|
|
1086
|
+
const getLayoutDirection = (node, isHorizontal) => {
|
|
1087
|
+
if (isHorizontal) {
|
|
1088
|
+
if (node.left) {
|
|
1089
|
+
return LayoutDirection.left;
|
|
1090
|
+
}
|
|
1091
|
+
else {
|
|
1092
|
+
return LayoutDirection.right;
|
|
1093
|
+
}
|
|
1094
|
+
}
|
|
1095
|
+
else {
|
|
1096
|
+
if (node.up) {
|
|
1097
|
+
return LayoutDirection.top;
|
|
1098
|
+
}
|
|
1099
|
+
else {
|
|
1100
|
+
return LayoutDirection.bottom;
|
|
1101
|
+
}
|
|
1102
|
+
}
|
|
1103
|
+
};
|
|
1104
|
+
const transformPlacement = (placement, direction) => {
|
|
1105
|
+
// to left
|
|
1106
|
+
if (direction === LayoutDirection.left) {
|
|
1107
|
+
if (placement[0] === HorizontalPlacement.right) {
|
|
1108
|
+
placement[0] = HorizontalPlacement.left;
|
|
1109
|
+
}
|
|
1110
|
+
else if (placement[0] === HorizontalPlacement.left) {
|
|
1111
|
+
placement[0] = HorizontalPlacement.right;
|
|
1112
|
+
}
|
|
1113
|
+
}
|
|
1114
|
+
// to bottom
|
|
1115
|
+
if (direction === LayoutDirection.bottom || direction === LayoutDirection.top) {
|
|
1116
|
+
let horizontal = HorizontalPlacement.center;
|
|
1117
|
+
let vertical = VerticalPlacement.middle;
|
|
1118
|
+
if (placement[1] === VerticalPlacement.top) {
|
|
1119
|
+
horizontal = HorizontalPlacement.left;
|
|
1120
|
+
}
|
|
1121
|
+
if (placement[1] === VerticalPlacement.bottom) {
|
|
1122
|
+
horizontal = HorizontalPlacement.right;
|
|
1123
|
+
}
|
|
1124
|
+
if (placement[0] === HorizontalPlacement.left) {
|
|
1125
|
+
vertical = VerticalPlacement.top;
|
|
1126
|
+
}
|
|
1127
|
+
if (placement[0] === HorizontalPlacement.right) {
|
|
1128
|
+
vertical = VerticalPlacement.bottom;
|
|
1129
|
+
}
|
|
1130
|
+
placement[0] = horizontal;
|
|
1131
|
+
placement[1] = vertical;
|
|
1132
|
+
}
|
|
1133
|
+
// to up
|
|
1134
|
+
if (direction === LayoutDirection.top) {
|
|
1135
|
+
if (placement[1] === VerticalPlacement.bottom) {
|
|
1136
|
+
placement[1] = VerticalPlacement.top;
|
|
1137
|
+
}
|
|
1138
|
+
else if (placement[1] === VerticalPlacement.top) {
|
|
1139
|
+
placement[1] = VerticalPlacement.bottom;
|
|
1140
|
+
}
|
|
1141
|
+
}
|
|
1142
|
+
};
|
|
1143
|
+
|
|
1144
|
+
const isLayoutRoot = (element) => {
|
|
1145
|
+
return PlaitMind.isMind(element) || !!element.layout;
|
|
1146
|
+
};
|
|
1147
|
+
const resolveLayoutRelationDirection = (board, relation) => {
|
|
1148
|
+
const layout = MindQueries.getCorrectLayoutByElement(board, relation.parent);
|
|
1149
|
+
const parentNode = MindElement.getNode(relation.parent);
|
|
1150
|
+
if (relation.type === 'sibling') {
|
|
1151
|
+
// Siblings follow the cross axis and keep the parent's final mirrored orientation.
|
|
1152
|
+
const isSiblingHorizontal = !isHorizontalLayout(layout);
|
|
1153
|
+
const nextDirection = getLayoutDirection(parentNode, isSiblingHorizontal);
|
|
1154
|
+
return relation.order === 'next' ? nextDirection : getLayoutReverseDirection(nextDirection);
|
|
1155
|
+
}
|
|
1156
|
+
if (isIndentedLayout(layout) && isLayoutRoot(relation.parent)) {
|
|
1157
|
+
return getLayoutDirection(parentNode, false);
|
|
1158
|
+
}
|
|
1159
|
+
return getLayoutDirection(MindElement.getNode(relation.child), isHorizontalLayout(layout));
|
|
1160
|
+
};
|
|
1161
|
+
|
|
1162
|
+
const DirectionToLayoutDirection = {
|
|
1163
|
+
[Direction.left]: LayoutDirection.left,
|
|
1164
|
+
[Direction.right]: LayoutDirection.right,
|
|
1165
|
+
[Direction.top]: LayoutDirection.top,
|
|
1166
|
+
[Direction.bottom]: LayoutDirection.bottom
|
|
1167
|
+
};
|
|
1168
|
+
const getMindElementCenter = (element) => {
|
|
1169
|
+
return RectangleClient.getCenterPoint(getRectangleByNode(MindElement.getNode(element)));
|
|
1170
|
+
};
|
|
1171
|
+
const isInNavigationDirection = (direction, source, target) => {
|
|
1172
|
+
const sourceCenter = getMindElementCenter(source);
|
|
1173
|
+
const targetCenter = getMindElementCenter(target);
|
|
1174
|
+
if (direction === Direction.left) {
|
|
1175
|
+
return targetCenter[0] < sourceCenter[0];
|
|
1176
|
+
}
|
|
1177
|
+
if (direction === Direction.right) {
|
|
1178
|
+
return targetCenter[0] > sourceCenter[0];
|
|
1179
|
+
}
|
|
1180
|
+
if (direction === Direction.top) {
|
|
1181
|
+
return targetCenter[1] < sourceCenter[1];
|
|
1182
|
+
}
|
|
1183
|
+
return targetCenter[1] > sourceCenter[1];
|
|
1184
|
+
};
|
|
1185
|
+
const isInSameNavigationLane = (direction, source, target) => {
|
|
1186
|
+
const sourceRectangle = getRectangleByNode(MindElement.getNode(source));
|
|
1187
|
+
const targetRectangle = getRectangleByNode(MindElement.getNode(target));
|
|
1188
|
+
if (isHorizontalDirection(direction)) {
|
|
1189
|
+
return RectangleClient.isHitY(sourceRectangle, targetRectangle);
|
|
1190
|
+
}
|
|
1191
|
+
return RectangleClient.isHitX(sourceRectangle, targetRectangle);
|
|
1192
|
+
};
|
|
1193
|
+
const getDistanceInNavigationDirection = (direction, source, target) => {
|
|
1194
|
+
const sourceCenter = getMindElementCenter(source);
|
|
1195
|
+
const targetCenter = getMindElementCenter(target);
|
|
1196
|
+
if (isHorizontalDirection(direction)) {
|
|
1197
|
+
return Math.abs(targetCenter[0] - sourceCenter[0]);
|
|
1198
|
+
}
|
|
1199
|
+
return Math.abs(targetCenter[1] - sourceCenter[1]);
|
|
1200
|
+
};
|
|
1201
|
+
const getVisibleMindElements = (board, root) => {
|
|
1202
|
+
const elements = [];
|
|
1203
|
+
depthFirstRecursion(root, (node) => {
|
|
1204
|
+
if (!AbstractNode.isAbstract(node)) {
|
|
1205
|
+
elements.push(node);
|
|
1206
|
+
}
|
|
1207
|
+
}, getIsRecursionFunc(board));
|
|
1208
|
+
return elements;
|
|
1209
|
+
};
|
|
1210
|
+
const getVisibleChildren = (board, element) => {
|
|
1211
|
+
if (!getIsRecursionFunc(board)(element)) {
|
|
1212
|
+
return [];
|
|
1213
|
+
}
|
|
1214
|
+
return element.children?.filter((child) => !AbstractNode.isAbstract(child)) || [];
|
|
1215
|
+
};
|
|
1216
|
+
const getVisibleParent = (element) => {
|
|
1217
|
+
let parent = MindElement.findParent(element);
|
|
1218
|
+
while (parent && AbstractNode.isAbstract(parent)) {
|
|
1219
|
+
parent = MindElement.findParent(parent);
|
|
1220
|
+
}
|
|
1221
|
+
return parent;
|
|
1222
|
+
};
|
|
1223
|
+
const getLayoutNavigationCandidates = (board, source) => {
|
|
1224
|
+
const candidates = [];
|
|
1225
|
+
const parent = getVisibleParent(source);
|
|
1226
|
+
if (parent) {
|
|
1227
|
+
const incomingDirection = resolveLayoutRelationDirection(board, {
|
|
1228
|
+
type: 'parent-child',
|
|
1229
|
+
parent,
|
|
1230
|
+
child: source
|
|
1231
|
+
});
|
|
1232
|
+
candidates.push({
|
|
1233
|
+
element: parent,
|
|
1234
|
+
relation: 'parent',
|
|
1235
|
+
direction: getLayoutReverseDirection(incomingDirection)
|
|
1236
|
+
});
|
|
1237
|
+
}
|
|
1238
|
+
getVisibleChildren(board, source).forEach((child) => {
|
|
1239
|
+
candidates.push({
|
|
1240
|
+
element: child,
|
|
1241
|
+
relation: 'child',
|
|
1242
|
+
direction: resolveLayoutRelationDirection(board, {
|
|
1243
|
+
type: 'parent-child',
|
|
1244
|
+
parent: source,
|
|
1245
|
+
child
|
|
1246
|
+
})
|
|
1247
|
+
});
|
|
1248
|
+
});
|
|
1249
|
+
if (parent) {
|
|
1250
|
+
const siblings = getVisibleChildren(board, parent);
|
|
1251
|
+
const sourceIndex = siblings.indexOf(source);
|
|
1252
|
+
if (sourceIndex !== -1) {
|
|
1253
|
+
const previousSibling = siblings[sourceIndex - 1];
|
|
1254
|
+
const nextSibling = siblings[sourceIndex + 1];
|
|
1255
|
+
if (previousSibling) {
|
|
1256
|
+
candidates.push({
|
|
1257
|
+
element: previousSibling,
|
|
1258
|
+
relation: 'previous-sibling',
|
|
1259
|
+
direction: resolveLayoutRelationDirection(board, {
|
|
1260
|
+
type: 'sibling',
|
|
1261
|
+
parent,
|
|
1262
|
+
order: 'previous'
|
|
1263
|
+
})
|
|
1264
|
+
});
|
|
1265
|
+
}
|
|
1266
|
+
if (nextSibling) {
|
|
1267
|
+
candidates.push({
|
|
1268
|
+
element: nextSibling,
|
|
1269
|
+
relation: 'next-sibling',
|
|
1270
|
+
direction: resolveLayoutRelationDirection(board, {
|
|
1271
|
+
type: 'sibling',
|
|
1272
|
+
parent,
|
|
1273
|
+
order: 'next'
|
|
1274
|
+
})
|
|
1275
|
+
});
|
|
1276
|
+
}
|
|
1277
|
+
}
|
|
1278
|
+
}
|
|
1279
|
+
return candidates;
|
|
1280
|
+
};
|
|
1281
|
+
const resolveLayoutNavigationTarget = (candidates, direction, previousElement) => {
|
|
1282
|
+
const matches = candidates.filter((candidate) => candidate.direction === direction);
|
|
1283
|
+
const sibling = matches.find((candidate) => candidate.relation === 'previous-sibling' || candidate.relation === 'next-sibling');
|
|
1284
|
+
if (sibling) {
|
|
1285
|
+
return sibling.element;
|
|
1286
|
+
}
|
|
1287
|
+
const parent = matches.find((candidate) => candidate.relation === 'parent');
|
|
1288
|
+
if (parent) {
|
|
1289
|
+
return parent.element;
|
|
1290
|
+
}
|
|
1291
|
+
const children = matches.filter((candidate) => candidate.relation === 'child');
|
|
1292
|
+
const rememberedChild = children.find((candidate) => candidate.element === previousElement);
|
|
1293
|
+
return rememberedChild?.element || children[0]?.element;
|
|
1294
|
+
};
|
|
1295
|
+
const getNextMindElementByGeometry = (board, source, direction) => {
|
|
1296
|
+
const root = MindElement.getRoot(board, source);
|
|
1297
|
+
return getVisibleMindElements(board, root)
|
|
1298
|
+
.filter((element) => element !== source &&
|
|
1299
|
+
isInNavigationDirection(direction, source, element) &&
|
|
1300
|
+
isInSameNavigationLane(direction, source, element))
|
|
1301
|
+
.sort((a, b) => getDistanceInNavigationDirection(direction, source, a) - getDistanceInNavigationDirection(direction, source, b))[0];
|
|
1302
|
+
};
|
|
1303
|
+
const getNextMindElementByDirection = (board, source, direction, previousElement) => {
|
|
1304
|
+
const layoutDirection = DirectionToLayoutDirection[direction];
|
|
1305
|
+
const candidates = getLayoutNavigationCandidates(board, source);
|
|
1306
|
+
const layoutTarget = resolveLayoutNavigationTarget(candidates, layoutDirection, previousElement);
|
|
1307
|
+
return layoutTarget || getNextMindElementByGeometry(board, source, direction);
|
|
1308
|
+
};
|
|
1309
|
+
|
|
1053
1310
|
const adjustRootToNode = (board, node) => {
|
|
1054
1311
|
const newNode = { ...node };
|
|
1055
1312
|
delete newNode.rightNodeCount;
|
|
@@ -1352,97 +1609,6 @@ function drawRoundRectangleByElement(board, nodeRectangle, element) {
|
|
|
1352
1609
|
return nodeG;
|
|
1353
1610
|
}
|
|
1354
1611
|
|
|
1355
|
-
var HorizontalPlacement;
|
|
1356
|
-
(function (HorizontalPlacement) {
|
|
1357
|
-
HorizontalPlacement["left"] = "left";
|
|
1358
|
-
HorizontalPlacement["center"] = "center";
|
|
1359
|
-
HorizontalPlacement["right"] = "right";
|
|
1360
|
-
})(HorizontalPlacement || (HorizontalPlacement = {}));
|
|
1361
|
-
var VerticalPlacement;
|
|
1362
|
-
(function (VerticalPlacement) {
|
|
1363
|
-
VerticalPlacement["top"] = "top";
|
|
1364
|
-
VerticalPlacement["middle"] = "middle";
|
|
1365
|
-
VerticalPlacement["bottom"] = "bottom";
|
|
1366
|
-
})(VerticalPlacement || (VerticalPlacement = {}));
|
|
1367
|
-
|
|
1368
|
-
const getPointByPlacement = (client, placement) => {
|
|
1369
|
-
let x = client.x;
|
|
1370
|
-
let y = client.y;
|
|
1371
|
-
if (placement[0] === HorizontalPlacement.center) {
|
|
1372
|
-
x = client.x + client.width / 2;
|
|
1373
|
-
}
|
|
1374
|
-
if (placement[0] === HorizontalPlacement.right) {
|
|
1375
|
-
x = client.x + client.width;
|
|
1376
|
-
}
|
|
1377
|
-
if (placement[1] === VerticalPlacement.middle) {
|
|
1378
|
-
y = client.y + client.height / 2;
|
|
1379
|
-
}
|
|
1380
|
-
if (placement[1] === VerticalPlacement.bottom) {
|
|
1381
|
-
y = client.y + client.height;
|
|
1382
|
-
}
|
|
1383
|
-
return [x, y];
|
|
1384
|
-
};
|
|
1385
|
-
const getYDistanceBetweenPoint = (point1, point2, isHorizontalLayout) => {
|
|
1386
|
-
getXDistanceBetweenPoint(point1, point2, !isHorizontalLayout);
|
|
1387
|
-
};
|
|
1388
|
-
const getLayoutDirection = (node, isHorizontal) => {
|
|
1389
|
-
if (isHorizontal) {
|
|
1390
|
-
if (node.left) {
|
|
1391
|
-
return LayoutDirection.left;
|
|
1392
|
-
}
|
|
1393
|
-
else {
|
|
1394
|
-
return LayoutDirection.right;
|
|
1395
|
-
}
|
|
1396
|
-
}
|
|
1397
|
-
else {
|
|
1398
|
-
if (node.up) {
|
|
1399
|
-
return LayoutDirection.top;
|
|
1400
|
-
}
|
|
1401
|
-
else {
|
|
1402
|
-
return LayoutDirection.bottom;
|
|
1403
|
-
}
|
|
1404
|
-
}
|
|
1405
|
-
};
|
|
1406
|
-
const transformPlacement = (placement, direction) => {
|
|
1407
|
-
// to left
|
|
1408
|
-
if (direction === LayoutDirection.left) {
|
|
1409
|
-
if (placement[0] === HorizontalPlacement.right) {
|
|
1410
|
-
placement[0] = HorizontalPlacement.left;
|
|
1411
|
-
}
|
|
1412
|
-
else if (placement[0] === HorizontalPlacement.left) {
|
|
1413
|
-
placement[0] = HorizontalPlacement.right;
|
|
1414
|
-
}
|
|
1415
|
-
}
|
|
1416
|
-
// to bottom
|
|
1417
|
-
if (direction === LayoutDirection.bottom || direction === LayoutDirection.top) {
|
|
1418
|
-
let horizontal = HorizontalPlacement.center;
|
|
1419
|
-
let vertical = VerticalPlacement.middle;
|
|
1420
|
-
if (placement[1] === VerticalPlacement.top) {
|
|
1421
|
-
horizontal = HorizontalPlacement.left;
|
|
1422
|
-
}
|
|
1423
|
-
if (placement[1] === VerticalPlacement.bottom) {
|
|
1424
|
-
horizontal = HorizontalPlacement.right;
|
|
1425
|
-
}
|
|
1426
|
-
if (placement[0] === HorizontalPlacement.left) {
|
|
1427
|
-
vertical = VerticalPlacement.top;
|
|
1428
|
-
}
|
|
1429
|
-
if (placement[0] === HorizontalPlacement.right) {
|
|
1430
|
-
vertical = VerticalPlacement.bottom;
|
|
1431
|
-
}
|
|
1432
|
-
placement[0] = horizontal;
|
|
1433
|
-
placement[1] = vertical;
|
|
1434
|
-
}
|
|
1435
|
-
// to up
|
|
1436
|
-
if (direction === LayoutDirection.top) {
|
|
1437
|
-
if (placement[1] === VerticalPlacement.bottom) {
|
|
1438
|
-
placement[1] = VerticalPlacement.top;
|
|
1439
|
-
}
|
|
1440
|
-
else if (placement[1] === VerticalPlacement.top) {
|
|
1441
|
-
placement[1] = VerticalPlacement.bottom;
|
|
1442
|
-
}
|
|
1443
|
-
}
|
|
1444
|
-
};
|
|
1445
|
-
|
|
1446
1612
|
function drawIndentedLink(board, parent, child, needDrawUnderline = true, defaultStrokeColor = null, defaultStrokeWidth, defaultStrokeStyle) {
|
|
1447
1613
|
const branchShape = getBranchShapeByMindElement(board, parent.origin);
|
|
1448
1614
|
const branchWidth = defaultStrokeWidth || getBranchWidthByMindElement(board, child.origin);
|
|
@@ -3451,20 +3617,65 @@ const withCreateMind = (board) => {
|
|
|
3451
3617
|
return newBoard;
|
|
3452
3618
|
};
|
|
3453
3619
|
|
|
3620
|
+
const NAVIGATION_SELECTED_ELEMENT = new WeakMap();
|
|
3621
|
+
const getNavigationDirection = (event) => {
|
|
3622
|
+
if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
|
|
3623
|
+
return null;
|
|
3624
|
+
}
|
|
3625
|
+
switch (event.key) {
|
|
3626
|
+
case 'ArrowLeft':
|
|
3627
|
+
return Direction.left;
|
|
3628
|
+
case 'ArrowRight':
|
|
3629
|
+
return Direction.right;
|
|
3630
|
+
case 'ArrowUp':
|
|
3631
|
+
return Direction.top;
|
|
3632
|
+
case 'ArrowDown':
|
|
3633
|
+
return Direction.bottom;
|
|
3634
|
+
default:
|
|
3635
|
+
return null;
|
|
3636
|
+
}
|
|
3637
|
+
};
|
|
3638
|
+
const selectMindElement = (board, element, previous) => {
|
|
3639
|
+
NAVIGATION_SELECTED_ELEMENT.set(board, { selected: element, previous });
|
|
3640
|
+
const center = getMindElementCenter(element);
|
|
3641
|
+
Transforms.setSelection(board, { anchor: center, focus: center });
|
|
3642
|
+
};
|
|
3454
3643
|
const withMindHotkey = (baseBoard) => {
|
|
3455
3644
|
const board = baseBoard;
|
|
3456
|
-
const { keyDown, globalKeyDown } = board;
|
|
3645
|
+
const { keyDown, globalKeyDown, pointerDown } = board;
|
|
3646
|
+
board.pointerDown = (event) => {
|
|
3647
|
+
NAVIGATION_SELECTED_ELEMENT.delete(board);
|
|
3648
|
+
pointerDown(event);
|
|
3649
|
+
};
|
|
3457
3650
|
board.keyDown = (event) => {
|
|
3458
3651
|
const selectedElements = getSelectedElements(board);
|
|
3459
3652
|
const isSingleSelection = selectedElements.length === 1;
|
|
3460
3653
|
const isSingleMindElement = selectedElements.length === 1 && MindElement.isMindElement(board, selectedElements[0]);
|
|
3461
3654
|
const targetElement = selectedElements[0];
|
|
3655
|
+
let navigationSelectedElement = NAVIGATION_SELECTED_ELEMENT.get(board);
|
|
3656
|
+
if (navigationSelectedElement && navigationSelectedElement.selected !== targetElement) {
|
|
3657
|
+
NAVIGATION_SELECTED_ELEMENT.delete(board);
|
|
3658
|
+
navigationSelectedElement = undefined;
|
|
3659
|
+
}
|
|
3462
3660
|
if (isExpandHotkey(event) && isSingleMindElement && !PlaitMind.isMind(targetElement)) {
|
|
3463
3661
|
if (targetElement.children && targetElement.children.length > 0) {
|
|
3464
3662
|
Transforms.setNode(board, { isCollapsed: targetElement.isCollapsed ? false : true }, PlaitBoard.findPath(board, targetElement));
|
|
3465
3663
|
return;
|
|
3466
3664
|
}
|
|
3467
3665
|
}
|
|
3666
|
+
const navigationDirection = getNavigationDirection(event);
|
|
3667
|
+
if (navigationDirection &&
|
|
3668
|
+
isSingleMindElement &&
|
|
3669
|
+
!PlaitBoard.hasBeenTextEditing(board)) {
|
|
3670
|
+
const nextElement = getNextMindElementByDirection(board, targetElement, navigationDirection, navigationSelectedElement?.previous);
|
|
3671
|
+
if (nextElement) {
|
|
3672
|
+
event.preventDefault();
|
|
3673
|
+
selectMindElement(board, nextElement, targetElement);
|
|
3674
|
+
return;
|
|
3675
|
+
}
|
|
3676
|
+
event.preventDefault();
|
|
3677
|
+
return;
|
|
3678
|
+
}
|
|
3468
3679
|
if (!PlaitBoard.isReadonly(board)) {
|
|
3469
3680
|
if (isTabHotkey(event) && isSingleMindElement) {
|
|
3470
3681
|
event.preventDefault();
|
|
@@ -4295,5 +4506,5 @@ class MindEmojiBaseComponent {
|
|
|
4295
4506
|
* Generated bundle index. Do not edit.
|
|
4296
4507
|
*/
|
|
4297
4508
|
|
|
4298
|
-
export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, ABSTRACT_NODE_TEXT, AbstractHandlePosition, AbstractResizeState, BASE, BranchShape, DEFAULT_MIND_IMAGE_WIDTH, DefaultAbstractNodeStyle, DefaultNodeStyle, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, LayoutDirection, LayoutDirectionsMap, MIND_CENTRAL_TEXT, MIND_ELEMENT_TO_NODE, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindI18nKey, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, NODE_ADD_CIRCLE_COLOR, NODE_ADD_HOVER_COLOR, NODE_ADD_INNER_CROSS_COLOR, NODE_MORE_BRIDGE_DISTANCE, NODE_MORE_ICON_DIAMETER, NODE_MORE_LINE_DISTANCE, NODE_MORE_STROKE_WIDTH, NodeSpace, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, RESIZE_HANDLE_BUFFER_DISTANCE, ROOT_TOPIC_FONT_SIZE, STROKE_WIDTH, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, WithMindPluginKey, addActiveOnDragOrigin, addImageFocus, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, findLastChild, findLocationLeftIndex, findNewChildNodePath, findNewRightChildNodePath, findNewSiblingNodePath, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAbstractNodeText, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultFontSizeForMindElement, getDefaultLayout, getDefaultMindNameText, getEmojiFontSize, getEmojiForeignRectangle, getEmojiRectangle, getEmojisWidthHeight, getFillByElement, getFirstLevelElement, getFontSizeByMindElement, getHitAbstractHandle, getHitImageResizeHandleDirection, getImageForeignRectangle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutOptions, getLayoutReverseDirection, getLocationScope, getMindThemeColor, getNewNodeHeight, getNextBranchColor, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getSelectedMindElements, getShapeByElement, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildOfAbstract, isChildRight, isChildUp, isCorrectLayout, isDropStandardRight, isHitEmojis, isHitImage, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, normalizeWidthAndHeight, removeActiveOnDragOrigin, removeImageFocus, separateChildren, setMindDragging, withEmoji, withMind, withMindExtend };
|
|
4509
|
+
export { ABSTRACT_HANDLE_COLOR, ABSTRACT_HANDLE_LENGTH, ABSTRACT_HANDLE_MASK_WIDTH, ABSTRACT_INCLUDED_OUTLINE_OFFSET, ABSTRACT_NODE_TEXT, AbstractHandlePosition, AbstractResizeState, BASE, BranchShape, DEFAULT_MIND_IMAGE_WIDTH, DefaultAbstractNodeStyle, DefaultNodeStyle, GRAY_COLOR, INHERIT_ATTRIBUTE_KEYS, LayoutDirection, LayoutDirectionsMap, MIND_CENTRAL_TEXT, MIND_ELEMENT_TO_NODE, MindColorfulThemeColor, MindDarkThemeColor, MindDefaultThemeColor, MindElement, MindElementShape, MindEmojiBaseComponent, MindI18nKey, MindNode, MindNodeComponent, MindPointerType, MindQueries, MindRetroThemeColor, MindSoftThemeColor, MindStarryThemeColor, MindThemeColor, MindThemeColors, MindTransforms, NODE_ADD_CIRCLE_COLOR, NODE_ADD_HOVER_COLOR, NODE_ADD_INNER_CROSS_COLOR, NODE_MORE_BRIDGE_DISTANCE, NODE_MORE_ICON_DIAMETER, NODE_MORE_LINE_DISTANCE, NODE_MORE_STROKE_WIDTH, NodeSpace, PRIMARY_COLOR, PlaitMind, PlaitMindComponent, RESIZE_HANDLE_BUFFER_DISTANCE, ROOT_TOPIC_FONT_SIZE, STROKE_WIDTH, TOPIC_DEFAULT_MAX_WORD_COUNT, TOPIC_FONT_SIZE, WithMindPluginKey, addActiveOnDragOrigin, addImageFocus, adjustAbstractToNode, adjustNodeToRoot, adjustRootToNode, canSetAbstract, copyNewNode, correctLayoutByDirection, createEmptyMind, createMindElement, deleteElementHandleAbstract, deleteElementsHandleRightNodeCount, detectDropTarget, directionCorrector, directionDetector, divideElementByParent, drawFakeDragNode, drawFakeDropNode, editTopic, findLastChild, findLocationLeftIndex, findNewChildNodePath, findNewRightChildNodePath, findNewSiblingNodePath, getAbstractBranchColor, getAbstractBranchWidth, getAbstractHandleRectangle, getAbstractNodeText, getAllowedDirection, getAvailableSubLayoutsByLayoutDirections, getBehindAbstracts, getBranchColorByMindElement, getBranchDirectionsByLayouts, getBranchShapeByMindElement, getBranchWidthByMindElement, getChildrenCount, getCorrespondingAbstract, getDefaultBranchColor, getDefaultBranchColorByIndex, getDefaultFontSizeForMindElement, getDefaultLayout, getDefaultMindNameText, getEmojiFontSize, getEmojiForeignRectangle, getEmojiRectangle, getEmojisWidthHeight, getFillByElement, getFirstLevelElement, getFontSizeByMindElement, getHitAbstractHandle, getHitImageResizeHandleDirection, getImageForeignRectangle, getInCorrectLayoutDirection, getLayoutDirection$1 as getLayoutDirection, getLayoutOptions, getLayoutReverseDirection, getLocationScope, getMindElementCenter, getMindThemeColor, getNewNodeHeight, getNextBranchColor, getNextMindElementByDirection, getOverallAbstracts, getPathByDropTarget, getRectangleByElement, getRectangleByNode, getRectangleByResizingLocation, getRelativeStartEndByAbstractRef, getRootLayout, getSelectedMindElements, getShapeByElement, getStrokeColorByElement, getStrokeStyleByElement, getStrokeWidthByElement, getTopicRectangleByElement, getTopicRectangleByNode, getValidAbstractRefs, handleTouchedAbstract, hasPreviousOrNextOfDropPath, insertElementHandleAbstract, insertElementHandleRightNodeCount, insertMindElement, isChildElement, isChildOfAbstract, isChildRight, isChildUp, isCorrectLayout, isDropStandardRight, isHitEmojis, isHitImage, isHitMindElement, isInRightBranchOfStandardLayout, isMixedLayout, isSetAbstract, isValidTarget, normalizeWidthAndHeight, removeActiveOnDragOrigin, removeImageFocus, separateChildren, setMindDragging, withEmoji, withMind, withMindExtend };
|
|
4299
4510
|
//# sourceMappingURL=plait-mind.mjs.map
|