|
|
@@ -7,6 +7,7 @@ import Event from "./event";
|
|
|
import { Matrix } from "./matrix";
|
|
|
import { Project, VectorLenth } from "./objects/mathUtils";
|
|
|
import { Point } from "./objects/point";
|
|
|
+import { indexOf } from "lodash";
|
|
|
|
|
|
/**
|
|
|
* 页面画布空间进行选择
|
|
|
@@ -31,6 +32,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
|
|
|
transferStyle = reactive({
|
|
|
baseCardTop: "0px",
|
|
|
showGizmo: false,
|
|
|
+ editingText: false,
|
|
|
width: 0,
|
|
|
height: 0,
|
|
|
relWidth: 0,
|
|
|
@@ -116,9 +118,17 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ _downClickedCompId = "";
|
|
|
onDocMouseDown(e: MouseEvent) {
|
|
|
this._mouseDownTimestamp = Date.now();
|
|
|
|
|
|
+ const compKey = this.getDivFlag(e.target as any, "compKey");
|
|
|
+ console.log("compKey === >", compKey);
|
|
|
+ if (compKey == "Text" && !this.transferStyle.editingText) {
|
|
|
+ e.preventDefault();
|
|
|
+ e.stopPropagation();
|
|
|
+ }
|
|
|
+
|
|
|
if (!this.pageEl || !this.selCanvas) return;
|
|
|
if (this.store.textEditingState) return;
|
|
|
|
|
|
@@ -147,10 +157,10 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
|
|
|
this._downClientX = e.clientX;
|
|
|
this._downClientY = e.clientY;
|
|
|
|
|
|
- // console.log(cardX, selX, cardY, sely);
|
|
|
+ this._downClickedCompId = this.compClickTest2(e);
|
|
|
|
|
|
this._downed = true;
|
|
|
- this._mouseDownFlag = this.getDivFlag(e.target as any);
|
|
|
+ this._mouseDownFlag = this.getDivTransformFlag(e.target as any);
|
|
|
if (!this._mouseDownFlag) {
|
|
|
//选框点击判断
|
|
|
let isClickSelRect = false;
|
|
|
@@ -164,19 +174,9 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
|
|
|
this._state = MODE_MOVING;
|
|
|
}
|
|
|
}
|
|
|
- if (!isClickSelRect) {
|
|
|
- //判断是否有点击到card stream
|
|
|
- const comps = this.compClickTest(e);
|
|
|
- console.log("comps=>", comps);
|
|
|
- if (comps.length < 1) {
|
|
|
- const test = this.streamCardClickTest(e);
|
|
|
- if (test) {
|
|
|
- const childs = this.compMap[test.id].children.default || [];
|
|
|
- if (childs.length < 1) {
|
|
|
- return;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
+ if (!isClickSelRect) { //点击在选框之外
|
|
|
+
|
|
|
+ if (!this._downClickedCompId) {//没有点击到组件
|
|
|
const view = this.viewport?.getBoundingClientRect() as any;
|
|
|
const isOut =
|
|
|
e.clientX < view.left ||
|
|
|
@@ -187,7 +187,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
|
|
|
this._state = MODE_SEL_RECT;
|
|
|
}
|
|
|
}
|
|
|
- //else {
|
|
|
+ //else {//点击到选框之外的组件, 把时间放到mouseup 时相应.
|
|
|
// this._state = MODE_MOVING;
|
|
|
// const obj = this.compMap[comps[0].id];
|
|
|
// this.selecteObjs([new CompObject(obj)]);
|
|
|
@@ -195,7 +195,7 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
|
|
|
}
|
|
|
} else if (this._mouseDownFlag == "rotate") {
|
|
|
this._state = MODE_ROTATE;
|
|
|
- } else if (this._mouseDownFlag == "move") {
|
|
|
+ } else if (this._mouseDownFlag.indexOf("move") > -1) {
|
|
|
this._state = MODE_MOVING;
|
|
|
} else if (this._mouseDownFlag.indexOf("scale") > -1) {
|
|
|
this._state = MODE_SCALE;
|
|
|
@@ -203,20 +203,33 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
|
|
|
|
|
|
this._movePreClientX = this._downClientX;
|
|
|
this._movePreClientY = this._downClientY;
|
|
|
+ this._initMovePos.x = -1;
|
|
|
+ this._initMovePos.y = -1;
|
|
|
|
|
|
- if (this._state == MODE_MOVING) {
|
|
|
- const obj = this.objContainer as ObjsContainer;
|
|
|
- this._initMovePos = { x: obj.parent.x, y: obj.parent.y };
|
|
|
- }
|
|
|
}
|
|
|
- _initMovePos = { x: 0, y: 0 };
|
|
|
+ _initMovePos = { x: -1, y: -1 };
|
|
|
+
|
|
|
+ getDivFlag(div: HTMLElement, flag="editable") {
|
|
|
+ let c: any = div;
|
|
|
+ if (!c) return ""
|
|
|
+ let i = 0;
|
|
|
+ do {
|
|
|
+ if (c[flag]) return c[flag];
|
|
|
+ c = c.parentElement;
|
|
|
+ i += 1;
|
|
|
+ if (i > 16) {
|
|
|
+ return ""
|
|
|
+ }
|
|
|
+ } while (c);
|
|
|
+ return "";
|
|
|
+ }
|
|
|
|
|
|
- getDivFlag(div: HTMLElement) {
|
|
|
+ getDivId(div: HTMLElement) {
|
|
|
let c: any = div;
|
|
|
if (!c) return;
|
|
|
let i = 0;
|
|
|
do {
|
|
|
- if (c.editable) return c.editable;
|
|
|
+ if (c.id) return c.id;
|
|
|
c = c.parentElement;
|
|
|
i += 1;
|
|
|
if (i > 5) {
|
|
|
@@ -224,6 +237,20 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
|
|
|
}
|
|
|
} while (c);
|
|
|
}
|
|
|
+
|
|
|
+ getDivTransformFlag(div: HTMLElement) {
|
|
|
+ const id = this.getDivId(div);
|
|
|
+ if (!id) return "";
|
|
|
+ if ( id.indexOf("rotate")>-1 || id.indexOf("move") > -1 || id.indexOf("scale") > -1 || id.indexOf("toolbar") > -1) return id;
|
|
|
+ return "";
|
|
|
+ }
|
|
|
+
|
|
|
+ compClickTest2(e: MouseEvent) {
|
|
|
+ const compId = this.getDivFlag(e.target as any, "compId");
|
|
|
+ console.log("down click=>", compId);
|
|
|
+
|
|
|
+ return compId;
|
|
|
+ }
|
|
|
|
|
|
compClickTest(e: MouseEvent) {
|
|
|
const cards = this.store.streamCardIds;
|
|
|
@@ -300,6 +327,10 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
|
|
|
movingMousemove(e: MouseEvent) {
|
|
|
const objContainer = this.objContainer as ObjsContainer;
|
|
|
|
|
|
+ if (this._initMovePos.x == -1 && this._initMovePos.y == -1) {
|
|
|
+ const obj = this.objContainer as ObjsContainer;
|
|
|
+ this._initMovePos = { x: obj.parent.x, y: obj.parent.y };
|
|
|
+ }
|
|
|
objContainer.setPivot(0);
|
|
|
objContainer.translate(
|
|
|
e.clientX - this._movePreClientX,
|
|
|
@@ -346,6 +377,13 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
|
|
|
}
|
|
|
|
|
|
onDocMouseUp(e: MouseEvent) {
|
|
|
+ let isClick = false;
|
|
|
+ let offsetT = Date.now() - this._mouseDownTimestamp;
|
|
|
+ const dx = Math.abs(e.clientX - this._downClientX);
|
|
|
+ const dy = Math.abs(e.clientY - this._downClientY);
|
|
|
+ if (dx < 2 && dy < 2 && offsetT < 200) {
|
|
|
+ isClick = true;
|
|
|
+ }
|
|
|
document.removeEventListener("mousemove", this.onDocMouseMove, {
|
|
|
capture: true,
|
|
|
});
|
|
|
@@ -354,23 +392,33 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
- let isClick = false;
|
|
|
- let offsetT = Date.now() - this._mouseDownTimestamp;
|
|
|
- const dx = Math.abs(e.clientX - this._downClientX);
|
|
|
- const dy = Math.abs(e.clientY - this._downClientY);
|
|
|
- if (dx < 2 && dy < 2 && !this.store.textEditingState && offsetT < 200) {
|
|
|
- isClick = true;
|
|
|
+ if (isClick) {
|
|
|
+ this.actions.pickComp(this._downClickedCompId);
|
|
|
}
|
|
|
+
|
|
|
if (isClick) {
|
|
|
this._state = MODE_NONE;
|
|
|
const comps = this.compClickTest(e);
|
|
|
if (comps.length < 1) {
|
|
|
setTimeout(() => {
|
|
|
+ this.transferStyle.editingText = false;
|
|
|
this.actions.selectObjs([]) //清空选择
|
|
|
}, 0);
|
|
|
+ } else {
|
|
|
+ const compKey = this.getDivFlag(e.target as any, "compKey");
|
|
|
+ console.log("up compKey === >", compKey);
|
|
|
+ if (compKey == "Text" ) { //点击鼠标上来后 focus文本选中
|
|
|
+ const compId = this.getDivFlag(e.target as any, "compId");
|
|
|
+ if ( this.selected.length == 1 && this.selected[0].comp.id == compId ) {
|
|
|
+
|
|
|
+ //取消当前选择
|
|
|
+ this.selecteObjs([])
|
|
|
+ this.actions.textFocus(compId);
|
|
|
+ this.transferStyle.editingText = true;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- } else {
|
|
|
- e.stopPropagation();
|
|
|
}
|
|
|
|
|
|
if (this._state == MODE_SEL_RECT && !isClick) {
|
|
|
@@ -415,6 +463,16 @@ export class SelectCtrl extends ModuleControl<EditorModule> {
|
|
|
const initX = this._initMovePos.x,
|
|
|
initY = this._initMovePos.y;
|
|
|
|
|
|
+ this._initMovePos.x = -1;
|
|
|
+ this._initMovePos.y = -1;
|
|
|
+
|
|
|
+ if (this.store.selected.length == 1 && this.store.currComp.compKey == "Text") {
|
|
|
+ this.actions.textFocus(this.store.currCompId, false)
|
|
|
+ }
|
|
|
+
|
|
|
+ if (initX == -1 && initY == -1) return;
|
|
|
+
|
|
|
+
|
|
|
obj.setPivot(0);
|
|
|
|
|
|
history.record({
|
liwei