@leafer-in/editor 1.5.1 → 1.5.2
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/dist/editor.cjs +68 -20
- package/dist/editor.cjs.map +1 -1
- package/dist/editor.esm.js +68 -20
- package/dist/editor.esm.js.map +1 -1
- package/dist/editor.esm.min.js +1 -1
- package/dist/editor.esm.min.js.map +1 -1
- package/dist/editor.js +68 -20
- package/dist/editor.js.map +1 -1
- package/dist/editor.min.cjs +1 -1
- package/dist/editor.min.cjs.map +1 -1
- package/dist/editor.min.js +1 -1
- package/dist/editor.min.js.map +1 -1
- package/package.json +5 -5
- package/src/Editor.ts +46 -18
- package/src/config.ts +1 -0
- package/src/display/EditBox.ts +1 -0
- package/src/display/EditSelect.ts +4 -2
- package/src/editor/cursor.ts +1 -1
- package/src/helper/EditDataHelper.ts +4 -0
- package/src/helper/EditorHelper.ts +3 -2
package/dist/editor.js
CHANGED
|
@@ -391,7 +391,8 @@ this.LeaferIN.editor = (function (exports, draw, core) {
|
|
|
391
391
|
return target.leafer !== this.editor.leafer;
|
|
392
392
|
}
|
|
393
393
|
allowDrag(e) {
|
|
394
|
-
|
|
394
|
+
const { boxSelect, multipleSelect } = this.editor.mergeConfig;
|
|
395
|
+
if (this.running && (multipleSelect && boxSelect) && !e.target.draggable) {
|
|
395
396
|
return (!this.editor.editing && this.allow(e.target)) || (e.shiftKey && !findOne(e.path));
|
|
396
397
|
}
|
|
397
398
|
else {
|
|
@@ -409,7 +410,8 @@ this.LeaferIN.editor = (function (exports, draw, core) {
|
|
|
409
410
|
return this.isMultipleSelect(e) ? this.findDeepOne(e) : findOne(e.path);
|
|
410
411
|
}
|
|
411
412
|
isMultipleSelect(e) {
|
|
412
|
-
|
|
413
|
+
const { multipleSelect, continuousSelect } = this.editor.mergeConfig;
|
|
414
|
+
return multipleSelect && (e.shiftKey || continuousSelect);
|
|
413
415
|
}
|
|
414
416
|
__listenEvents() {
|
|
415
417
|
const { editor } = this;
|
|
@@ -584,21 +586,25 @@ this.LeaferIN.editor = (function (exports, draw, core) {
|
|
|
584
586
|
let last;
|
|
585
587
|
switch (direction) {
|
|
586
588
|
case top:
|
|
589
|
+
case topLeft:
|
|
587
590
|
last = { x: 0.5, y: 0 };
|
|
588
591
|
align = 'bottom';
|
|
589
592
|
skewX = 1;
|
|
590
593
|
break;
|
|
591
594
|
case bottom:
|
|
595
|
+
case bottomRight:
|
|
592
596
|
last = { x: 0.5, y: 1 };
|
|
593
597
|
align = 'top';
|
|
594
598
|
skewX = 1;
|
|
595
599
|
break;
|
|
596
600
|
case left$1:
|
|
601
|
+
case bottomLeft:
|
|
597
602
|
last = { x: 0, y: 0.5 };
|
|
598
603
|
align = 'right';
|
|
599
604
|
skewY = 1;
|
|
600
605
|
break;
|
|
601
606
|
case right$1:
|
|
607
|
+
case topRight:
|
|
602
608
|
last = { x: 1, y: 0.5 };
|
|
603
609
|
align = 'left';
|
|
604
610
|
skewY = 1;
|
|
@@ -687,7 +693,7 @@ this.LeaferIN.editor = (function (exports, draw, core) {
|
|
|
687
693
|
let showResize = pointType.includes('resize');
|
|
688
694
|
if (showResize && rotateable && (e.metaKey || e.ctrlKey || !resizeable))
|
|
689
695
|
showResize = false;
|
|
690
|
-
const showSkew = skewable && !showResize && point.name === 'resize-line';
|
|
696
|
+
const showSkew = skewable && !showResize && (point.name === 'resize-line' || pointType === 'skew');
|
|
691
697
|
const cursor = showSkew ? skewCursor : (showResize ? resizeCursor : rotateCursor);
|
|
692
698
|
rotation += (EditDataHelper.getFlipDirection(point.direction, flippedX, flippedY) + 1) * 45;
|
|
693
699
|
rotation = Math.round(draw.MathHelper.formatRotation(rotation, true) / 2) * 2;
|
|
@@ -909,6 +915,8 @@ this.LeaferIN.editor = (function (exports, draw, core) {
|
|
|
909
915
|
editor.onRotate(e);
|
|
910
916
|
if (pointType.includes('resize'))
|
|
911
917
|
editor.onScale(e);
|
|
918
|
+
if (pointType === 'skew')
|
|
919
|
+
editor.onSkew(e);
|
|
912
920
|
updateCursor(editor, e);
|
|
913
921
|
}
|
|
914
922
|
onArrow(e) {
|
|
@@ -1090,6 +1098,7 @@ ${filterStyle}
|
|
|
1090
1098
|
hover: true,
|
|
1091
1099
|
select: 'press',
|
|
1092
1100
|
openInner: 'double',
|
|
1101
|
+
multipleSelect: true,
|
|
1093
1102
|
boxSelect: true,
|
|
1094
1103
|
moveable: true,
|
|
1095
1104
|
resizeable: true,
|
|
@@ -1181,13 +1190,16 @@ ${filterStyle}
|
|
|
1181
1190
|
const ungroupList = [];
|
|
1182
1191
|
app.lockLayout();
|
|
1183
1192
|
list.forEach(leaf => {
|
|
1184
|
-
if (leaf.isBranch
|
|
1193
|
+
if (leaf.isBranch) {
|
|
1185
1194
|
const { parent, children } = leaf;
|
|
1186
1195
|
while (children.length) {
|
|
1187
1196
|
ungroupList.push(children[0]);
|
|
1188
1197
|
children[0].dropTo(parent, parent.children.indexOf(leaf));
|
|
1189
1198
|
}
|
|
1190
|
-
leaf.
|
|
1199
|
+
if (leaf.isBranchLeaf)
|
|
1200
|
+
ungroupList.push(leaf);
|
|
1201
|
+
else
|
|
1202
|
+
leaf.remove();
|
|
1191
1203
|
}
|
|
1192
1204
|
else {
|
|
1193
1205
|
ungroupList.push(leaf);
|
|
@@ -1492,13 +1504,22 @@ ${filterStyle}
|
|
|
1492
1504
|
this.skewOf(origin, skewX, skewY);
|
|
1493
1505
|
}
|
|
1494
1506
|
move(x, y = 0) {
|
|
1495
|
-
const { element } = this;
|
|
1496
1507
|
if (!this.checkTransform('moveable'))
|
|
1497
1508
|
return;
|
|
1498
|
-
|
|
1509
|
+
if (typeof x === 'object')
|
|
1510
|
+
y = x.y, x = x.x;
|
|
1511
|
+
const { element: target } = this, { beforeMove } = this.mergeConfig;
|
|
1512
|
+
if (beforeMove) {
|
|
1513
|
+
const check = beforeMove({ target, x, y });
|
|
1514
|
+
if (typeof check === 'object')
|
|
1515
|
+
x = check.x, y = check.y;
|
|
1516
|
+
else if (check === false)
|
|
1517
|
+
return;
|
|
1518
|
+
}
|
|
1519
|
+
const world = target.getWorldPointByLocal({ x, y }, null, true);
|
|
1499
1520
|
if (this.multiple)
|
|
1500
|
-
|
|
1501
|
-
const data = { target
|
|
1521
|
+
target.safeChange(() => target.move(x, y));
|
|
1522
|
+
const data = { target, editor: this, moveX: world.x, moveY: world.y };
|
|
1502
1523
|
this.emitEvent(new EditorMoveEvent(EditorMoveEvent.BEFORE_MOVE, data));
|
|
1503
1524
|
const event = new EditorMoveEvent(EditorMoveEvent.MOVE, data);
|
|
1504
1525
|
this.editTool.onMove(event);
|
|
@@ -1507,8 +1528,14 @@ ${filterStyle}
|
|
|
1507
1528
|
scaleWithDrag(data) {
|
|
1508
1529
|
if (!this.checkTransform('resizeable'))
|
|
1509
1530
|
return;
|
|
1510
|
-
const { element } = this;
|
|
1511
|
-
|
|
1531
|
+
const { element: target } = this, { beforeScale } = this.mergeConfig;
|
|
1532
|
+
if (beforeScale) {
|
|
1533
|
+
const { origin, scaleX, scaleY, drag } = data;
|
|
1534
|
+
const check = beforeScale({ target, drag, origin, scaleX, scaleY });
|
|
1535
|
+
if (check === false)
|
|
1536
|
+
return;
|
|
1537
|
+
}
|
|
1538
|
+
data = Object.assign(Object.assign({}, data), { target, editor: this, worldOrigin: target.getWorldPoint(data.origin) });
|
|
1512
1539
|
this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data));
|
|
1513
1540
|
const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data);
|
|
1514
1541
|
this.editTool.onScaleWithDrag(event);
|
|
@@ -1517,10 +1544,17 @@ ${filterStyle}
|
|
|
1517
1544
|
scaleOf(origin, scaleX, scaleY = scaleX, _resize) {
|
|
1518
1545
|
if (!this.checkTransform('resizeable'))
|
|
1519
1546
|
return;
|
|
1520
|
-
const { element } = this;
|
|
1547
|
+
const { element: target } = this, { beforeScale } = this.mergeConfig;
|
|
1548
|
+
if (beforeScale) {
|
|
1549
|
+
const check = beforeScale({ target, origin, scaleX, scaleY });
|
|
1550
|
+
if (typeof check === 'object')
|
|
1551
|
+
scaleX = check.scaleX, scaleY = check.scaleY;
|
|
1552
|
+
else if (check === false)
|
|
1553
|
+
return;
|
|
1554
|
+
}
|
|
1521
1555
|
const worldOrigin = this.getWorldOrigin(origin);
|
|
1522
|
-
const transform = this.multiple && this.getChangedTransform(() =>
|
|
1523
|
-
const data = { target
|
|
1556
|
+
const transform = this.multiple && this.getChangedTransform(() => target.safeChange(() => target.scaleOf(origin, scaleX, scaleY)));
|
|
1557
|
+
const data = { target, editor: this, worldOrigin, scaleX, scaleY, transform };
|
|
1524
1558
|
this.emitEvent(new EditorScaleEvent(EditorScaleEvent.BEFORE_SCALE, data));
|
|
1525
1559
|
const event = new EditorScaleEvent(EditorScaleEvent.SCALE, data);
|
|
1526
1560
|
this.editTool.onScale(event);
|
|
@@ -1541,10 +1575,17 @@ ${filterStyle}
|
|
|
1541
1575
|
rotateOf(origin, rotation) {
|
|
1542
1576
|
if (!this.checkTransform('rotateable'))
|
|
1543
1577
|
return;
|
|
1544
|
-
const { element } = this;
|
|
1578
|
+
const { element: target } = this, { beforeRotate } = this.mergeConfig;
|
|
1579
|
+
if (beforeRotate) {
|
|
1580
|
+
const check = beforeRotate({ target, origin, rotation });
|
|
1581
|
+
if (typeof check === 'number')
|
|
1582
|
+
rotation = check;
|
|
1583
|
+
else if (check === false)
|
|
1584
|
+
return;
|
|
1585
|
+
}
|
|
1545
1586
|
const worldOrigin = this.getWorldOrigin(origin);
|
|
1546
|
-
const transform = this.multiple && this.getChangedTransform(() =>
|
|
1547
|
-
const data = { target
|
|
1587
|
+
const transform = this.multiple && this.getChangedTransform(() => target.safeChange(() => target.rotateOf(origin, rotation)));
|
|
1588
|
+
const data = { target, editor: this, worldOrigin, rotation, transform };
|
|
1548
1589
|
this.emitEvent(new EditorRotateEvent(EditorRotateEvent.BEFORE_ROTATE, data));
|
|
1549
1590
|
const event = new EditorRotateEvent(EditorRotateEvent.ROTATE, data);
|
|
1550
1591
|
this.editTool.onRotate(event);
|
|
@@ -1553,10 +1594,17 @@ ${filterStyle}
|
|
|
1553
1594
|
skewOf(origin, skewX, skewY = 0, _resize) {
|
|
1554
1595
|
if (!this.checkTransform('skewable'))
|
|
1555
1596
|
return;
|
|
1556
|
-
const { element } = this;
|
|
1597
|
+
const { element: target } = this, { beforeSkew } = this.mergeConfig;
|
|
1598
|
+
if (beforeSkew) {
|
|
1599
|
+
const check = beforeSkew({ target, origin, skewX, skewY });
|
|
1600
|
+
if (typeof check === 'object')
|
|
1601
|
+
skewX = check.skewX, skewY = check.skewY;
|
|
1602
|
+
else if (check === false)
|
|
1603
|
+
return;
|
|
1604
|
+
}
|
|
1557
1605
|
const worldOrigin = this.getWorldOrigin(origin);
|
|
1558
|
-
const transform = this.multiple && this.getChangedTransform(() =>
|
|
1559
|
-
const data = { target
|
|
1606
|
+
const transform = this.multiple && this.getChangedTransform(() => target.safeChange(() => target.skewOf(origin, skewX, skewY)));
|
|
1607
|
+
const data = { target, editor: this, worldOrigin, skewX, skewY, transform };
|
|
1560
1608
|
this.emitEvent(new EditorSkewEvent(EditorSkewEvent.BEFORE_SKEW, data));
|
|
1561
1609
|
const event = new EditorSkewEvent(EditorSkewEvent.SKEW, data);
|
|
1562
1610
|
this.editTool.onSkew(event);
|