@leafer-in/editor 1.9.6 → 1.9.7
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 +51 -29
- package/dist/editor.esm.js +51 -29
- package/dist/editor.esm.min.js +1 -1
- package/dist/editor.esm.min.js.map +1 -1
- package/dist/editor.js +50 -28
- 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 +6 -6
- package/src/Editor.ts +19 -3
- package/src/decorator/data.ts +9 -4
- package/src/display/EditBox.ts +29 -28
- package/src/editor/cursor.ts +10 -4
- package/types/index.d.ts +6 -3
package/dist/editor.cjs
CHANGED
|
@@ -54,12 +54,15 @@ function targetAttr(fn) {
|
|
|
54
54
|
set(value) {
|
|
55
55
|
const old = this[privateKey];
|
|
56
56
|
if (old !== value) {
|
|
57
|
-
|
|
57
|
+
const t = this;
|
|
58
|
+
if (t.config) {
|
|
58
59
|
const isSelect = key === "target";
|
|
59
60
|
if (isSelect) {
|
|
61
|
+
t.setDimOthers(false);
|
|
62
|
+
t.setBright(false);
|
|
60
63
|
if (draw.isArray(value) && value.length > 1 && value[0].locked) value.splice(0, 1);
|
|
61
|
-
if (
|
|
62
|
-
const {beforeSelect: beforeSelect} =
|
|
64
|
+
if (t.single) t.element.syncEventer = null;
|
|
65
|
+
const {beforeSelect: beforeSelect} = t.config;
|
|
63
66
|
if (beforeSelect) {
|
|
64
67
|
const check = beforeSelect({
|
|
65
68
|
target: value
|
|
@@ -69,7 +72,7 @@ function targetAttr(fn) {
|
|
|
69
72
|
}
|
|
70
73
|
const type = isSelect ? EditorEvent.BEFORE_SELECT : EditorEvent.BEFORE_HOVER;
|
|
71
74
|
if (this.hasEvent(type)) this.emitEvent(new EditorEvent(type, {
|
|
72
|
-
editor:
|
|
75
|
+
editor: t,
|
|
73
76
|
value: value,
|
|
74
77
|
oldValue: old
|
|
75
78
|
}));
|
|
@@ -740,13 +743,18 @@ const cacheCursors = {};
|
|
|
740
743
|
function updatePointCursor(editBox, e) {
|
|
741
744
|
const {enterPoint: point, dragging: dragging, skewing: skewing, resizing: resizing, flippedX: flippedX, flippedY: flippedY} = editBox;
|
|
742
745
|
if (!point || !editBox.editor.editing || !editBox.canUse) return;
|
|
746
|
+
if (point.name === "rect") return updateMoveCursor(editBox);
|
|
743
747
|
if (point.name === "circle") return;
|
|
744
|
-
|
|
748
|
+
let {rotation: rotation} = editBox;
|
|
749
|
+
const {pointType: pointType} = point, {moveCursor: moveCursor, resizeCursor: resizeCursor, rotateCursor: rotateCursor, skewCursor: skewCursor, moveable: moveable, resizeable: resizeable, rotateable: rotateable, skewable: skewable} = editBox.mergeConfig;
|
|
750
|
+
if (pointType === "move") {
|
|
751
|
+
point.cursor = moveCursor;
|
|
752
|
+
if (!moveable) point.visible = false;
|
|
753
|
+
return;
|
|
754
|
+
} else if (pointType === "button") {
|
|
745
755
|
if (!point.cursor) point.cursor = "pointer";
|
|
746
756
|
return;
|
|
747
757
|
}
|
|
748
|
-
let {rotation: rotation} = editBox;
|
|
749
|
-
const {pointType: pointType} = point, {resizeCursor: resizeCursor, rotateCursor: rotateCursor, skewCursor: skewCursor, resizeable: resizeable, rotateable: rotateable, skewable: skewable} = editBox.mergeConfig;
|
|
750
758
|
let showResize = pointType.includes("resize");
|
|
751
759
|
if (showResize && rotateable && (editBox.isHoldRotateKey(e) || !resizeable)) showResize = false;
|
|
752
760
|
const showSkew = skewable && !showResize && (point.name === "resize-line" || pointType === "skew");
|
|
@@ -827,7 +835,7 @@ class EditBox extends draw.Group {
|
|
|
827
835
|
constructor(editor) {
|
|
828
836
|
super();
|
|
829
837
|
this.view = new draw.Group;
|
|
830
|
-
this.rect = new
|
|
838
|
+
this.rect = new EditPoint({
|
|
831
839
|
name: "rect",
|
|
832
840
|
hitFill: "all",
|
|
833
841
|
hitStroke: "none",
|
|
@@ -889,12 +897,13 @@ class EditBox extends draw.Group {
|
|
|
889
897
|
this.listenPointEvents(resizePoint, "resize", i);
|
|
890
898
|
}
|
|
891
899
|
this.listenPointEvents(circle, "rotate", 2);
|
|
900
|
+
this.listenPointEvents(rect, "move", 8);
|
|
892
901
|
view.addMany(...rotatePoints, rect, circle, buttons, ...resizeLines, ...resizePoints);
|
|
893
902
|
this.add(view);
|
|
894
903
|
}
|
|
895
904
|
load() {
|
|
896
|
-
const {target: target, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, resizePoints: resizePoints} = this;
|
|
897
|
-
const {stroke: stroke, strokeWidth: strokeWidth} = mergeConfig;
|
|
905
|
+
const {target: target, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, resizePoints: resizePoints, resizeLines: resizeLines} = this;
|
|
906
|
+
const {stroke: stroke, strokeWidth: strokeWidth, resizeLine: resizeLine} = mergeConfig;
|
|
898
907
|
const pointsStyle = this.getPointsStyle();
|
|
899
908
|
const middlePointsStyle = this.getMiddlePointsStyle();
|
|
900
909
|
this.visible = !target.locked;
|
|
@@ -903,6 +912,10 @@ class EditBox extends draw.Group {
|
|
|
903
912
|
resizeP = resizePoints[i];
|
|
904
913
|
resizeP.set(this.getPointStyle(i % 2 ? middlePointsStyle[(i - 1) / 2 % middlePointsStyle.length] : pointsStyle[i / 2 % pointsStyle.length]));
|
|
905
914
|
resizeP.rotation = (i - (i % 2 ? 1 : 0)) / 2 * 90;
|
|
915
|
+
if (i % 2) resizeLines[(i - 1) / 2].set(Object.assign({
|
|
916
|
+
pointType: "resize",
|
|
917
|
+
rotation: (i - 1) / 2 * 90
|
|
918
|
+
}, resizeLine || {}));
|
|
906
919
|
}
|
|
907
920
|
circle.set(this.getPointStyle(mergeConfig.circle || mergeConfig.rotatePoint || pointsStyle[0]));
|
|
908
921
|
rect.set(Object.assign({
|
|
@@ -947,10 +960,12 @@ class EditBox extends draw.Group {
|
|
|
947
960
|
if (this.app) this.rect.syncEventer = this.app.interaction.bottomList = null;
|
|
948
961
|
}
|
|
949
962
|
updateBounds(bounds) {
|
|
950
|
-
const {
|
|
951
|
-
const {
|
|
952
|
-
const {middlePoint: middlePoint, resizeable: resizeable, rotateable: rotateable, hideOnSmall: hideOnSmall, editBox: editBox, mask: mask, spread: spread, hideRotatePoints: hideRotatePoints, hideResizeLines: hideResizeLines} = mergeConfig;
|
|
963
|
+
const {editor: editor, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, buttons: buttons, resizePoints: resizePoints, rotatePoints: rotatePoints, resizeLines: resizeLines} = this;
|
|
964
|
+
const {editMask: editMask} = editor;
|
|
965
|
+
const {middlePoint: middlePoint, resizeable: resizeable, rotateable: rotateable, hideOnSmall: hideOnSmall, editBox: editBox, mask: mask, dimOthers: dimOthers, bright: bright, spread: spread, hideRotatePoints: hideRotatePoints, hideResizeLines: hideResizeLines} = mergeConfig;
|
|
953
966
|
editMask.visible = mask ? true : 0;
|
|
967
|
+
editor.setDimOthers(dimOthers);
|
|
968
|
+
editor.setBright(!!dimOthers || bright);
|
|
954
969
|
if (spread) draw.BoundsHelper.spread(bounds, spread);
|
|
955
970
|
if (this.view.worldOpacity) {
|
|
956
971
|
const {width: width, height: height} = bounds;
|
|
@@ -971,10 +986,10 @@ class EditBox extends draw.Group {
|
|
|
971
986
|
resizeL.visible = resizeP.visible && !hideResizeLines;
|
|
972
987
|
resizeP.visible = rotateP.visible = showPoints && !!middlePoint;
|
|
973
988
|
if ((i + 1) / 2 % 2) {
|
|
974
|
-
resizeL.width = width;
|
|
989
|
+
resizeL.width = width + resizeL.height;
|
|
975
990
|
if (hideOnSmall && resizeP.width * 2 > width) resizeP.visible = false;
|
|
976
991
|
} else {
|
|
977
|
-
resizeL.
|
|
992
|
+
resizeL.width = height + resizeL.height;
|
|
978
993
|
if (hideOnSmall && resizeP.width * 2 > height) resizeP.visible = false;
|
|
979
994
|
}
|
|
980
995
|
}
|
|
@@ -1051,7 +1066,7 @@ class EditBox extends draw.Group {
|
|
|
1051
1066
|
this.dragging = true;
|
|
1052
1067
|
const point = this.dragPoint = e.current, {pointType: pointType} = point;
|
|
1053
1068
|
const {editor: editor, dragStartData: dragStartData} = this, {target: target} = this, {moveable: moveable, resizeable: resizeable, rotateable: rotateable, skewable: skewable, hideOnMove: hideOnMove} = this.mergeConfig;
|
|
1054
|
-
if (
|
|
1069
|
+
if (pointType === "move") {
|
|
1055
1070
|
moveable && (this.moving = true);
|
|
1056
1071
|
editor.opacity = hideOnMove ? 0 : 1;
|
|
1057
1072
|
} else {
|
|
@@ -1076,23 +1091,22 @@ class EditBox extends draw.Group {
|
|
|
1076
1091
|
if (this.moving && this.mergeConfig.dragLimitAnimate && this.target.dragBounds) this.transformTool.onMove(e);
|
|
1077
1092
|
this.dragPoint = null;
|
|
1078
1093
|
this.resetDoing();
|
|
1079
|
-
const {
|
|
1080
|
-
if (
|
|
1094
|
+
const {pointType: pointType} = e.current;
|
|
1095
|
+
if (pointType === "move") this.editor.opacity = 1;
|
|
1081
1096
|
if (pointType && pointType.includes("resize")) draw.ResizeEvent.resizingKeys = null;
|
|
1082
1097
|
}
|
|
1083
1098
|
onDrag(e) {
|
|
1084
1099
|
const {transformTool: transformTool, moving: moving, resizing: resizing, rotating: rotating, skewing: skewing} = this;
|
|
1085
1100
|
if (moving) {
|
|
1086
1101
|
transformTool.onMove(e);
|
|
1087
|
-
updateMoveCursor(this);
|
|
1088
1102
|
} else if (resizing || rotating || skewing) {
|
|
1089
1103
|
const point = e.current;
|
|
1090
1104
|
if (point.pointType) this.enterPoint = point;
|
|
1091
1105
|
if (rotating) transformTool.onRotate(e);
|
|
1092
1106
|
if (resizing) transformTool.onScale(e);
|
|
1093
1107
|
if (skewing) transformTool.onSkew(e);
|
|
1094
|
-
updatePointCursor(this, e);
|
|
1095
1108
|
}
|
|
1109
|
+
updatePointCursor(this, e);
|
|
1096
1110
|
}
|
|
1097
1111
|
resetDoing() {
|
|
1098
1112
|
if (this.canUse) this.dragging = this.gesturing = this.moving = this.resizing = this.rotating = this.skewing = false;
|
|
@@ -1188,17 +1202,15 @@ class EditBox extends draw.Group {
|
|
|
1188
1202
|
listenPointEvents(point, type, direction) {
|
|
1189
1203
|
point.direction = direction;
|
|
1190
1204
|
point.pointType = type;
|
|
1191
|
-
|
|
1192
|
-
this.enterPoint = null;
|
|
1193
|
-
} ] ];
|
|
1194
|
-
if (point.name !== "circle") events.push([ core.PointerEvent.ENTER, e => {
|
|
1205
|
+
this.__eventIds.push(point.on_([ [ core.DragEvent.START, this.onDragStart, this ], [ core.DragEvent.DRAG, this.onDrag, this ], [ core.DragEvent.END, this.onDragEnd, this ], [ core.PointerEvent.ENTER, e => {
|
|
1195
1206
|
this.enterPoint = point, updatePointCursor(this, e);
|
|
1196
|
-
} ])
|
|
1197
|
-
|
|
1207
|
+
} ], [ core.PointerEvent.LEAVE, () => {
|
|
1208
|
+
this.enterPoint = null;
|
|
1209
|
+
} ] ]));
|
|
1198
1210
|
}
|
|
1199
1211
|
__listenEvents() {
|
|
1200
1212
|
const {rect: rect, editor: editor, __eventIds: events} = this;
|
|
1201
|
-
events.push(rect.on_([ [ core.
|
|
1213
|
+
events.push(rect.on_([ [ core.PointerEvent.DOUBLE_TAP, this.onDoubleTap, this ], [ core.PointerEvent.LONG_PRESS, this.onLongPress, this ] ]));
|
|
1202
1214
|
this.waitLeafer(() => {
|
|
1203
1215
|
events.push(editor.app.on_([ [ [ core.KeyEvent.HOLD, core.KeyEvent.UP ], this.onKey, this ], [ core.KeyEvent.DOWN, this.onArrow, this ], [ core.MoveEvent.BEFORE_MOVE, this.onMove, this, true ], [ core.ZoomEvent.BEFORE_ZOOM, this.onScale, this, true ], [ core.RotateEvent.BEFORE_ROTATE, this.onRotate, this, true ], [ core.MoveEvent.END, this.onMoveEnd, this ], [ core.ZoomEvent.END, this.resetDoing, this ], [ core.RotateEvent.END, this.resetDoing, this ] ]));
|
|
1204
1216
|
});
|
|
@@ -1926,6 +1938,16 @@ exports.Editor = class Editor extends draw.Group {
|
|
|
1926
1938
|
shiftItem(item) {
|
|
1927
1939
|
this.hasItem(item) ? this.removeItem(item) : this.addItem(item);
|
|
1928
1940
|
}
|
|
1941
|
+
setDimOthers(value, attrName = "dim", list) {
|
|
1942
|
+
if (!list) {
|
|
1943
|
+
const {dimTarget: dimTarget, targetLeafer: targetLeafer} = this;
|
|
1944
|
+
list = dimTarget ? draw.isArray(dimTarget) ? dimTarget : [ dimTarget ] : [ targetLeafer ];
|
|
1945
|
+
}
|
|
1946
|
+
if (list[0] && list[0][attrName] !== (value || false)) list.forEach(item => draw.DataHelper.stintSet(item, attrName, value));
|
|
1947
|
+
}
|
|
1948
|
+
setBright(value) {
|
|
1949
|
+
this.setDimOthers(value, "bright", this.list);
|
|
1950
|
+
}
|
|
1929
1951
|
update() {
|
|
1930
1952
|
if (this.editing) {
|
|
1931
1953
|
if (!this.element.parent) return this.cancel();
|
|
@@ -2148,10 +2170,10 @@ exports.Editor = class Editor extends draw.Group {
|
|
|
2148
2170
|
|
|
2149
2171
|
__decorate([ mergeConfigAttr() ], exports.Editor.prototype, "mergeConfig", void 0);
|
|
2150
2172
|
|
|
2151
|
-
__decorate([ targetAttr(onHover) ], exports.Editor.prototype, "hoverTarget", void 0);
|
|
2152
|
-
|
|
2153
2173
|
__decorate([ targetAttr(onTarget) ], exports.Editor.prototype, "target", void 0);
|
|
2154
2174
|
|
|
2175
|
+
__decorate([ targetAttr(onHover) ], exports.Editor.prototype, "hoverTarget", void 0);
|
|
2176
|
+
|
|
2155
2177
|
exports.Editor = __decorate([ core.useModule(TransformTool, [ "editBox", "editTool", "emitEvent" ]) ], exports.Editor);
|
|
2156
2178
|
|
|
2157
2179
|
class InnerEditor {
|
package/dist/editor.esm.js
CHANGED
|
@@ -52,12 +52,15 @@ function targetAttr(fn) {
|
|
|
52
52
|
set(value) {
|
|
53
53
|
const old = this[privateKey];
|
|
54
54
|
if (old !== value) {
|
|
55
|
-
|
|
55
|
+
const t = this;
|
|
56
|
+
if (t.config) {
|
|
56
57
|
const isSelect = key === "target";
|
|
57
58
|
if (isSelect) {
|
|
59
|
+
t.setDimOthers(false);
|
|
60
|
+
t.setBright(false);
|
|
58
61
|
if (isArray(value) && value.length > 1 && value[0].locked) value.splice(0, 1);
|
|
59
|
-
if (
|
|
60
|
-
const {beforeSelect: beforeSelect} =
|
|
62
|
+
if (t.single) t.element.syncEventer = null;
|
|
63
|
+
const {beforeSelect: beforeSelect} = t.config;
|
|
61
64
|
if (beforeSelect) {
|
|
62
65
|
const check = beforeSelect({
|
|
63
66
|
target: value
|
|
@@ -67,7 +70,7 @@ function targetAttr(fn) {
|
|
|
67
70
|
}
|
|
68
71
|
const type = isSelect ? EditorEvent.BEFORE_SELECT : EditorEvent.BEFORE_HOVER;
|
|
69
72
|
if (this.hasEvent(type)) this.emitEvent(new EditorEvent(type, {
|
|
70
|
-
editor:
|
|
73
|
+
editor: t,
|
|
71
74
|
value: value,
|
|
72
75
|
oldValue: old
|
|
73
76
|
}));
|
|
@@ -738,13 +741,18 @@ const cacheCursors = {};
|
|
|
738
741
|
function updatePointCursor(editBox, e) {
|
|
739
742
|
const {enterPoint: point, dragging: dragging, skewing: skewing, resizing: resizing, flippedX: flippedX, flippedY: flippedY} = editBox;
|
|
740
743
|
if (!point || !editBox.editor.editing || !editBox.canUse) return;
|
|
744
|
+
if (point.name === "rect") return updateMoveCursor(editBox);
|
|
741
745
|
if (point.name === "circle") return;
|
|
742
|
-
|
|
746
|
+
let {rotation: rotation} = editBox;
|
|
747
|
+
const {pointType: pointType} = point, {moveCursor: moveCursor, resizeCursor: resizeCursor, rotateCursor: rotateCursor, skewCursor: skewCursor, moveable: moveable, resizeable: resizeable, rotateable: rotateable, skewable: skewable} = editBox.mergeConfig;
|
|
748
|
+
if (pointType === "move") {
|
|
749
|
+
point.cursor = moveCursor;
|
|
750
|
+
if (!moveable) point.visible = false;
|
|
751
|
+
return;
|
|
752
|
+
} else if (pointType === "button") {
|
|
743
753
|
if (!point.cursor) point.cursor = "pointer";
|
|
744
754
|
return;
|
|
745
755
|
}
|
|
746
|
-
let {rotation: rotation} = editBox;
|
|
747
|
-
const {pointType: pointType} = point, {resizeCursor: resizeCursor, rotateCursor: rotateCursor, skewCursor: skewCursor, resizeable: resizeable, rotateable: rotateable, skewable: skewable} = editBox.mergeConfig;
|
|
748
756
|
let showResize = pointType.includes("resize");
|
|
749
757
|
if (showResize && rotateable && (editBox.isHoldRotateKey(e) || !resizeable)) showResize = false;
|
|
750
758
|
const showSkew = skewable && !showResize && (point.name === "resize-line" || pointType === "skew");
|
|
@@ -825,7 +833,7 @@ class EditBox extends Group {
|
|
|
825
833
|
constructor(editor) {
|
|
826
834
|
super();
|
|
827
835
|
this.view = new Group;
|
|
828
|
-
this.rect = new
|
|
836
|
+
this.rect = new EditPoint({
|
|
829
837
|
name: "rect",
|
|
830
838
|
hitFill: "all",
|
|
831
839
|
hitStroke: "none",
|
|
@@ -887,12 +895,13 @@ class EditBox extends Group {
|
|
|
887
895
|
this.listenPointEvents(resizePoint, "resize", i);
|
|
888
896
|
}
|
|
889
897
|
this.listenPointEvents(circle, "rotate", 2);
|
|
898
|
+
this.listenPointEvents(rect, "move", 8);
|
|
890
899
|
view.addMany(...rotatePoints, rect, circle, buttons, ...resizeLines, ...resizePoints);
|
|
891
900
|
this.add(view);
|
|
892
901
|
}
|
|
893
902
|
load() {
|
|
894
|
-
const {target: target, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, resizePoints: resizePoints} = this;
|
|
895
|
-
const {stroke: stroke, strokeWidth: strokeWidth} = mergeConfig;
|
|
903
|
+
const {target: target, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, resizePoints: resizePoints, resizeLines: resizeLines} = this;
|
|
904
|
+
const {stroke: stroke, strokeWidth: strokeWidth, resizeLine: resizeLine} = mergeConfig;
|
|
896
905
|
const pointsStyle = this.getPointsStyle();
|
|
897
906
|
const middlePointsStyle = this.getMiddlePointsStyle();
|
|
898
907
|
this.visible = !target.locked;
|
|
@@ -901,6 +910,10 @@ class EditBox extends Group {
|
|
|
901
910
|
resizeP = resizePoints[i];
|
|
902
911
|
resizeP.set(this.getPointStyle(i % 2 ? middlePointsStyle[(i - 1) / 2 % middlePointsStyle.length] : pointsStyle[i / 2 % pointsStyle.length]));
|
|
903
912
|
resizeP.rotation = (i - (i % 2 ? 1 : 0)) / 2 * 90;
|
|
913
|
+
if (i % 2) resizeLines[(i - 1) / 2].set(Object.assign({
|
|
914
|
+
pointType: "resize",
|
|
915
|
+
rotation: (i - 1) / 2 * 90
|
|
916
|
+
}, resizeLine || {}));
|
|
904
917
|
}
|
|
905
918
|
circle.set(this.getPointStyle(mergeConfig.circle || mergeConfig.rotatePoint || pointsStyle[0]));
|
|
906
919
|
rect.set(Object.assign({
|
|
@@ -945,10 +958,12 @@ class EditBox extends Group {
|
|
|
945
958
|
if (this.app) this.rect.syncEventer = this.app.interaction.bottomList = null;
|
|
946
959
|
}
|
|
947
960
|
updateBounds(bounds) {
|
|
948
|
-
const {
|
|
949
|
-
const {
|
|
950
|
-
const {middlePoint: middlePoint, resizeable: resizeable, rotateable: rotateable, hideOnSmall: hideOnSmall, editBox: editBox, mask: mask, spread: spread, hideRotatePoints: hideRotatePoints, hideResizeLines: hideResizeLines} = mergeConfig;
|
|
961
|
+
const {editor: editor, mergeConfig: mergeConfig, single: single, rect: rect, circle: circle, buttons: buttons, resizePoints: resizePoints, rotatePoints: rotatePoints, resizeLines: resizeLines} = this;
|
|
962
|
+
const {editMask: editMask} = editor;
|
|
963
|
+
const {middlePoint: middlePoint, resizeable: resizeable, rotateable: rotateable, hideOnSmall: hideOnSmall, editBox: editBox, mask: mask, dimOthers: dimOthers, bright: bright, spread: spread, hideRotatePoints: hideRotatePoints, hideResizeLines: hideResizeLines} = mergeConfig;
|
|
951
964
|
editMask.visible = mask ? true : 0;
|
|
965
|
+
editor.setDimOthers(dimOthers);
|
|
966
|
+
editor.setBright(!!dimOthers || bright);
|
|
952
967
|
if (spread) BoundsHelper.spread(bounds, spread);
|
|
953
968
|
if (this.view.worldOpacity) {
|
|
954
969
|
const {width: width, height: height} = bounds;
|
|
@@ -969,10 +984,10 @@ class EditBox extends Group {
|
|
|
969
984
|
resizeL.visible = resizeP.visible && !hideResizeLines;
|
|
970
985
|
resizeP.visible = rotateP.visible = showPoints && !!middlePoint;
|
|
971
986
|
if ((i + 1) / 2 % 2) {
|
|
972
|
-
resizeL.width = width;
|
|
987
|
+
resizeL.width = width + resizeL.height;
|
|
973
988
|
if (hideOnSmall && resizeP.width * 2 > width) resizeP.visible = false;
|
|
974
989
|
} else {
|
|
975
|
-
resizeL.
|
|
990
|
+
resizeL.width = height + resizeL.height;
|
|
976
991
|
if (hideOnSmall && resizeP.width * 2 > height) resizeP.visible = false;
|
|
977
992
|
}
|
|
978
993
|
}
|
|
@@ -1049,7 +1064,7 @@ class EditBox extends Group {
|
|
|
1049
1064
|
this.dragging = true;
|
|
1050
1065
|
const point = this.dragPoint = e.current, {pointType: pointType} = point;
|
|
1051
1066
|
const {editor: editor, dragStartData: dragStartData} = this, {target: target} = this, {moveable: moveable, resizeable: resizeable, rotateable: rotateable, skewable: skewable, hideOnMove: hideOnMove} = this.mergeConfig;
|
|
1052
|
-
if (
|
|
1067
|
+
if (pointType === "move") {
|
|
1053
1068
|
moveable && (this.moving = true);
|
|
1054
1069
|
editor.opacity = hideOnMove ? 0 : 1;
|
|
1055
1070
|
} else {
|
|
@@ -1074,23 +1089,22 @@ class EditBox extends Group {
|
|
|
1074
1089
|
if (this.moving && this.mergeConfig.dragLimitAnimate && this.target.dragBounds) this.transformTool.onMove(e);
|
|
1075
1090
|
this.dragPoint = null;
|
|
1076
1091
|
this.resetDoing();
|
|
1077
|
-
const {
|
|
1078
|
-
if (
|
|
1092
|
+
const {pointType: pointType} = e.current;
|
|
1093
|
+
if (pointType === "move") this.editor.opacity = 1;
|
|
1079
1094
|
if (pointType && pointType.includes("resize")) ResizeEvent.resizingKeys = null;
|
|
1080
1095
|
}
|
|
1081
1096
|
onDrag(e) {
|
|
1082
1097
|
const {transformTool: transformTool, moving: moving, resizing: resizing, rotating: rotating, skewing: skewing} = this;
|
|
1083
1098
|
if (moving) {
|
|
1084
1099
|
transformTool.onMove(e);
|
|
1085
|
-
updateMoveCursor(this);
|
|
1086
1100
|
} else if (resizing || rotating || skewing) {
|
|
1087
1101
|
const point = e.current;
|
|
1088
1102
|
if (point.pointType) this.enterPoint = point;
|
|
1089
1103
|
if (rotating) transformTool.onRotate(e);
|
|
1090
1104
|
if (resizing) transformTool.onScale(e);
|
|
1091
1105
|
if (skewing) transformTool.onSkew(e);
|
|
1092
|
-
updatePointCursor(this, e);
|
|
1093
1106
|
}
|
|
1107
|
+
updatePointCursor(this, e);
|
|
1094
1108
|
}
|
|
1095
1109
|
resetDoing() {
|
|
1096
1110
|
if (this.canUse) this.dragging = this.gesturing = this.moving = this.resizing = this.rotating = this.skewing = false;
|
|
@@ -1186,17 +1200,15 @@ class EditBox extends Group {
|
|
|
1186
1200
|
listenPointEvents(point, type, direction) {
|
|
1187
1201
|
point.direction = direction;
|
|
1188
1202
|
point.pointType = type;
|
|
1189
|
-
|
|
1190
|
-
this.enterPoint = null;
|
|
1191
|
-
} ] ];
|
|
1192
|
-
if (point.name !== "circle") events.push([ PointerEvent.ENTER, e => {
|
|
1203
|
+
this.__eventIds.push(point.on_([ [ DragEvent.START, this.onDragStart, this ], [ DragEvent.DRAG, this.onDrag, this ], [ DragEvent.END, this.onDragEnd, this ], [ PointerEvent.ENTER, e => {
|
|
1193
1204
|
this.enterPoint = point, updatePointCursor(this, e);
|
|
1194
|
-
} ])
|
|
1195
|
-
|
|
1205
|
+
} ], [ PointerEvent.LEAVE, () => {
|
|
1206
|
+
this.enterPoint = null;
|
|
1207
|
+
} ] ]));
|
|
1196
1208
|
}
|
|
1197
1209
|
__listenEvents() {
|
|
1198
1210
|
const {rect: rect, editor: editor, __eventIds: events} = this;
|
|
1199
|
-
events.push(rect.on_([ [
|
|
1211
|
+
events.push(rect.on_([ [ PointerEvent.DOUBLE_TAP, this.onDoubleTap, this ], [ PointerEvent.LONG_PRESS, this.onLongPress, this ] ]));
|
|
1200
1212
|
this.waitLeafer(() => {
|
|
1201
1213
|
events.push(editor.app.on_([ [ [ KeyEvent.HOLD, KeyEvent.UP ], this.onKey, this ], [ KeyEvent.DOWN, this.onArrow, this ], [ MoveEvent.BEFORE_MOVE, this.onMove, this, true ], [ ZoomEvent.BEFORE_ZOOM, this.onScale, this, true ], [ RotateEvent.BEFORE_ROTATE, this.onRotate, this, true ], [ MoveEvent.END, this.onMoveEnd, this ], [ ZoomEvent.END, this.resetDoing, this ], [ RotateEvent.END, this.resetDoing, this ] ]));
|
|
1202
1214
|
});
|
|
@@ -1924,6 +1936,16 @@ let Editor = class Editor extends Group {
|
|
|
1924
1936
|
shiftItem(item) {
|
|
1925
1937
|
this.hasItem(item) ? this.removeItem(item) : this.addItem(item);
|
|
1926
1938
|
}
|
|
1939
|
+
setDimOthers(value, attrName = "dim", list) {
|
|
1940
|
+
if (!list) {
|
|
1941
|
+
const {dimTarget: dimTarget, targetLeafer: targetLeafer} = this;
|
|
1942
|
+
list = dimTarget ? isArray(dimTarget) ? dimTarget : [ dimTarget ] : [ targetLeafer ];
|
|
1943
|
+
}
|
|
1944
|
+
if (list[0] && list[0][attrName] !== (value || false)) list.forEach(item => DataHelper.stintSet(item, attrName, value));
|
|
1945
|
+
}
|
|
1946
|
+
setBright(value) {
|
|
1947
|
+
this.setDimOthers(value, "bright", this.list);
|
|
1948
|
+
}
|
|
1927
1949
|
update() {
|
|
1928
1950
|
if (this.editing) {
|
|
1929
1951
|
if (!this.element.parent) return this.cancel();
|
|
@@ -2146,10 +2168,10 @@ let Editor = class Editor extends Group {
|
|
|
2146
2168
|
|
|
2147
2169
|
__decorate([ mergeConfigAttr() ], Editor.prototype, "mergeConfig", void 0);
|
|
2148
2170
|
|
|
2149
|
-
__decorate([ targetAttr(onHover) ], Editor.prototype, "hoverTarget", void 0);
|
|
2150
|
-
|
|
2151
2171
|
__decorate([ targetAttr(onTarget) ], Editor.prototype, "target", void 0);
|
|
2152
2172
|
|
|
2173
|
+
__decorate([ targetAttr(onHover) ], Editor.prototype, "hoverTarget", void 0);
|
|
2174
|
+
|
|
2153
2175
|
Editor = __decorate([ useModule(TransformTool, [ "editBox", "editTool", "emitEvent" ]) ], Editor);
|
|
2154
2176
|
|
|
2155
2177
|
class InnerEditor {
|