|
|
@@ -0,0 +1,164 @@
|
|
|
+import { ModuleControl } from "queenjs";
|
|
|
+import { reactive } from "vue";
|
|
|
+import { EditorModule } from "../../module";
|
|
|
+import { DesignComp } from "../../objects/DesignTemp/DesignComp";
|
|
|
+import { Matrix } from "../TransferCtrl/Matrix";
|
|
|
+
|
|
|
+/**
|
|
|
+ * 页面画布空间进行选择
|
|
|
+ */
|
|
|
+const MODE_SEL_RECT = 1;
|
|
|
+const MODE_NONE = 0;
|
|
|
+
|
|
|
+export class SelectCtrl extends ModuleControl<EditorModule> {
|
|
|
+ transEvent = {
|
|
|
+ startX: 0,
|
|
|
+ startY: 0,
|
|
|
+ offsetX: 0,
|
|
|
+ offsetY: 0,
|
|
|
+ width: 0,
|
|
|
+ height: 0,
|
|
|
+ };
|
|
|
+
|
|
|
+ transferStyle = reactive({
|
|
|
+ width: "",
|
|
|
+ height: "",
|
|
|
+ transform: {
|
|
|
+ rotate: "0deg",
|
|
|
+ translateX: 0,
|
|
|
+ translateY: 0,
|
|
|
+ scale: 1,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ selectIds = []; //选中的所有组件ids
|
|
|
+
|
|
|
+ pageEl?:HTMLElement
|
|
|
+ selCanvas= {} as HTMLCanvasElement
|
|
|
+
|
|
|
+ _downed = false;
|
|
|
+ _selCtx = {} as CanvasRenderingContext2D
|
|
|
+ _state = MODE_SEL_RECT;
|
|
|
+
|
|
|
+ _selDownX = 0;
|
|
|
+ _selDownY = 0;
|
|
|
+ _selBox = {} as DOMRect;
|
|
|
+ _selCanvaseSize = {w: 0, h: 0};
|
|
|
+
|
|
|
+ initEvents(pageEl: HTMLElement, selCanvas: HTMLCanvasElement) {
|
|
|
+ this.pageEl = pageEl;
|
|
|
+ this.selCanvas = selCanvas;
|
|
|
+ const b = selCanvas.getBoundingClientRect();
|
|
|
+ selCanvas.width = b.width *2;
|
|
|
+ selCanvas.height = b.height *2;
|
|
|
+
|
|
|
+ this._selCtx = selCanvas.getContext("2d") as CanvasRenderingContext2D;
|
|
|
+
|
|
|
+ this._selCanvaseSize.w = selCanvas.width *2;
|
|
|
+ this._selCanvaseSize.h = selCanvas.height *2;
|
|
|
+
|
|
|
+ document.addEventListener("mousedown", this.onDocMouseDown.bind(this))
|
|
|
+ document.addEventListener("mousemove", this.onDocMouseMove.bind(this))
|
|
|
+ document.addEventListener("mouseup", this.onDocMouseUp.bind(this))
|
|
|
+
|
|
|
+ window.addEventListener("resize", this.onResize.bind(this));
|
|
|
+ }
|
|
|
+
|
|
|
+ onDocMouseDown(e: MouseEvent) {
|
|
|
+ if (!this.pageEl || !this.selCanvas ) return;
|
|
|
+
|
|
|
+ let box = this.pageEl.getBoundingClientRect();
|
|
|
+ const pageX = e.clientX- box?.left
|
|
|
+ const pageY = e.clientY- box?.top
|
|
|
+
|
|
|
+ const card = this.store.currStreamCard.$el;
|
|
|
+ box = card.getBoundingClientRect();
|
|
|
+ const cardX = pageX;
|
|
|
+ const cardY = e.clientY - box.top;
|
|
|
+
|
|
|
+ const sel = this.selCanvas.getBoundingClientRect();
|
|
|
+ const selX = (e.clientX - sel.left);
|
|
|
+ const sely = (e.clientY - sel.top);
|
|
|
+ this._selDownX = selX;
|
|
|
+ this._selDownY = sely;
|
|
|
+ this._selBox = sel;
|
|
|
+
|
|
|
+ console.log(cardX,selX, cardY, sely)
|
|
|
+
|
|
|
+ this._downed = true;
|
|
|
+ this._state = MODE_SEL_RECT;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ onDocMouseMove(e: MouseEvent) {
|
|
|
+ if (!this.pageEl ) return;
|
|
|
+
|
|
|
+ if (!this._downed) {
|
|
|
+ this.checkHover();
|
|
|
+ }
|
|
|
+
|
|
|
+ switch (this._state) {
|
|
|
+ case MODE_SEL_RECT: //选框模式
|
|
|
+ this.drawSelRect(e);
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ onDocMouseUp(e: MouseEvent) {
|
|
|
+ console.log("up");
|
|
|
+ this._state = MODE_NONE;
|
|
|
+ this._selCtx?.clearRect(0, 0, this._selCanvaseSize.w, this._selCanvaseSize.h)
|
|
|
+ }
|
|
|
+
|
|
|
+ selectId(id :string) { //选中ids之前 id对应组件必须已经渲染
|
|
|
+ console.log("selectId=>", id)
|
|
|
+ }
|
|
|
+
|
|
|
+ drawSelRect(e:MouseEvent) {
|
|
|
+
|
|
|
+ const ctx = this._selCtx;
|
|
|
+
|
|
|
+ const dx = this._selDownX;
|
|
|
+ const dy = this._selDownY;
|
|
|
+ const currX = e.clientX - this._selBox.left;
|
|
|
+ const currY = e.clientY - this._selBox.top;
|
|
|
+ const x = Math.min(currX, dx), y = Math.min(dy, currY)
|
|
|
+ ctx.clearRect(0, 0, this._selCanvaseSize.w, this._selCanvaseSize.h)
|
|
|
+
|
|
|
+ ctx.fillStyle = "rgba(232, 139, 0, 0.16)";
|
|
|
+ ctx.fillRect(x*2, y*2, Math.abs(currX-dx)*2, Math.abs(currY-dy)*2);
|
|
|
+
|
|
|
+ ctx.lineWidth = 2;
|
|
|
+ ctx.strokeStyle = "#E88B00";
|
|
|
+ ctx.strokeRect(x*2, y*2, Math.abs(currX-dx)*2, Math.abs(currY-dy)*2);
|
|
|
+ }
|
|
|
+
|
|
|
+ checkHover() {
|
|
|
+ this.selectIds;
|
|
|
+ }
|
|
|
+
|
|
|
+ onResize() {
|
|
|
+
|
|
|
+ const b = this.selCanvas.getBoundingClientRect();
|
|
|
+ this.selCanvas.width = b.width *2;
|
|
|
+ this.selCanvas.height = b.height *2;
|
|
|
+ this._selCtx = this.selCanvas.getContext("2d") as CanvasRenderingContext2D;
|
|
|
+ this._selCanvaseSize.w = b.width *2;
|
|
|
+ this._selCanvaseSize.h = b.height *2;
|
|
|
+ }
|
|
|
+ //
|
|
|
+ checkIntersect(compId:string, e:MouseEvent) {
|
|
|
+ const currCard = this.store.currStreamCard.$el;
|
|
|
+
|
|
|
+ const comp = this.store.designData.compMap[compId];
|
|
|
+
|
|
|
+ //排除坐标没有在streamCard空间内的坐标
|
|
|
+
|
|
|
+ //把当前的card坐标转为 组件的自己local坐标判断是否在方框外面
|
|
|
+ const cardBox = currCard.getBoundingClientRect();
|
|
|
+ const cardX = e.clientX - cardBox.left;
|
|
|
+ const cardY = e.clientY - cardBox.top;
|
|
|
+
|
|
|
+ //const m = Matrix.createFromComp(comp.layout.transform)
|
|
|
+
|
|
|
+ }
|
|
|
+}
|
liwei