|
|
@@ -1,194 +1,198 @@
|
|
|
-import { Effect, ModuleControl } from "queenjs";
|
|
|
+import { ModuleControl } from "queenjs";
|
|
|
+import { onMounted, ref } from "vue";
|
|
|
import { EditorModule } from "../../module";
|
|
|
-import { DesignComp } from "../../objects/DesignTemp/DesignComp";
|
|
|
-import { Matrix } from "../SelectCtrl/matrix";
|
|
|
-import {ref, onMounted, nextTick} from "vue";
|
|
|
import { RxValue } from "../ReactCtrl/rxValue";
|
|
|
-import { DisplayObject } from "../SelectCtrl/objects/displayObject";
|
|
|
import { ObjsContainer } from "../SelectCtrl/ObjsContainer";
|
|
|
-import { settingsStore } from "@queenjs-modules/queditor/module/stores/settings";
|
|
|
-import { object } from "vue-types";
|
|
|
-
|
|
|
|
|
|
const KeySpace = 32;
|
|
|
|
|
|
export class EditorCtrl extends ModuleControl<EditorModule> {
|
|
|
-
|
|
|
- state = RxValue.create({
|
|
|
- width: 1500,
|
|
|
- height: 1000,
|
|
|
- pos: {
|
|
|
- x: 0, y:0
|
|
|
- },
|
|
|
- mouse: {
|
|
|
- x: 0, y: 0
|
|
|
- },
|
|
|
- scale: 1,
|
|
|
- keyCode: -1,
|
|
|
- moveMode: false,
|
|
|
- page: {w: 375, h: 650}
|
|
|
- })
|
|
|
-
|
|
|
- doms:any = {};
|
|
|
+ state = RxValue.create({
|
|
|
+ width: 1500,
|
|
|
+ height: 1000,
|
|
|
+ pos: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ },
|
|
|
+ mouse: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ },
|
|
|
+ scale: 1,
|
|
|
+ keyCode: -1,
|
|
|
+ moveMode: false,
|
|
|
+ page: { w: 375, h: 650 },
|
|
|
+ });
|
|
|
+
|
|
|
+ doms: any = {};
|
|
|
|
|
|
useEditor() {
|
|
|
- const EditorRef = ref<HTMLElement>();
|
|
|
- const ParentRef = ref<HTMLElement>();
|
|
|
- const PageRef = ref<HTMLElement>();
|
|
|
- const CanvasRef = ref<HTMLElement>();
|
|
|
- let inited = false;
|
|
|
-
|
|
|
- const init = () => {
|
|
|
- if (!EditorRef.value || !CanvasRef.value || !ParentRef.value || inited) return;
|
|
|
-
|
|
|
- clearInterval(refInteral.value)
|
|
|
- refInteral.value = null;
|
|
|
- inited = true;
|
|
|
-
|
|
|
- console.log("xxxxxxxx=>" , ParentRef.value, PageRef.value);
|
|
|
- EditorRef.value.style.width = this.state.width + "px";
|
|
|
- EditorRef.value.style.height = this.state.height + "px";
|
|
|
- EditorRef.value.style.position = "absolute";
|
|
|
- // EditorRef.value.style.backgroundColor = "greenyellow";
|
|
|
- EditorRef.value.style.left = "0";
|
|
|
- EditorRef.value.style.top = "0";
|
|
|
- CanvasRef.value.style.width = "100%"
|
|
|
- CanvasRef.value.style.height = "100%"
|
|
|
- EditorRef.value.style.position = "absolute";
|
|
|
-
|
|
|
- this.initEditorEvent(EditorRef.value, ParentRef.value as any);
|
|
|
- }
|
|
|
-
|
|
|
- const refInteral = ref();
|
|
|
- onMounted(()=>{
|
|
|
- refInteral.value = setInterval(init, 100);
|
|
|
- })
|
|
|
-
|
|
|
- this.doms = {editor:EditorRef, parent: ParentRef, page:PageRef, canvas: CanvasRef};
|
|
|
- return this.doms;
|
|
|
+ const EditorRef = ref<HTMLElement>();
|
|
|
+ const ParentRef = ref<HTMLElement>();
|
|
|
+ const PageRef = ref<HTMLElement>();
|
|
|
+ const CanvasRef = ref<HTMLElement>();
|
|
|
+ let inited = false;
|
|
|
+
|
|
|
+ const init = () => {
|
|
|
+ if (!EditorRef.value || !CanvasRef.value || !ParentRef.value || inited)
|
|
|
+ return;
|
|
|
+
|
|
|
+ clearInterval(refInteral.value);
|
|
|
+ refInteral.value = null;
|
|
|
+ inited = true;
|
|
|
+
|
|
|
+ console.log("xxxxxxxx=>", ParentRef.value, PageRef.value);
|
|
|
+ EditorRef.value.style.width = this.state.width + "px";
|
|
|
+ EditorRef.value.style.height = this.state.height + "px";
|
|
|
+ EditorRef.value.style.position = "absolute";
|
|
|
+ // EditorRef.value.style.backgroundColor = "greenyellow";
|
|
|
+ EditorRef.value.style.left = "0";
|
|
|
+ EditorRef.value.style.top = "0";
|
|
|
+ CanvasRef.value.style.width = "100%";
|
|
|
+ CanvasRef.value.style.height = "100%";
|
|
|
+ EditorRef.value.style.position = "absolute";
|
|
|
+
|
|
|
+ this.initEditorEvent(EditorRef.value, ParentRef.value as any);
|
|
|
+ };
|
|
|
+
|
|
|
+ const refInteral = ref();
|
|
|
+ onMounted(() => {
|
|
|
+ refInteral.value = setInterval(init, 100);
|
|
|
+ });
|
|
|
+
|
|
|
+ this.doms = {
|
|
|
+ editor: EditorRef,
|
|
|
+ parent: ParentRef,
|
|
|
+ page: PageRef,
|
|
|
+ canvas: CanvasRef,
|
|
|
+ };
|
|
|
+ return this.doms;
|
|
|
}
|
|
|
-
|
|
|
- isKeyDown( key:number) {
|
|
|
+
|
|
|
+ isKeyDown(key: number) {
|
|
|
return this.state.keyCode === key;
|
|
|
}
|
|
|
isMoving() {
|
|
|
return this.isKeyDown(KeySpace) || this.state.moveMode;
|
|
|
}
|
|
|
|
|
|
- moveEditor(){
|
|
|
- if(!this.doms.parent?.value) return;
|
|
|
- this.doms.parent.value.style.cursor = this.state.moveMode ? "default" : "grab";
|
|
|
+ moveEditor() {
|
|
|
+ if (!this.doms.parent?.value) return;
|
|
|
+ this.doms.parent.value.style.cursor = this.state.moveMode
|
|
|
+ ? "default"
|
|
|
+ : "grab";
|
|
|
this.state.setMoveMode(!this.state.moveMode);
|
|
|
}
|
|
|
|
|
|
editRoot = new ObjsContainer([]);
|
|
|
- initEditorEvent(editorLayer:HTMLElement, parent:HTMLElement) {
|
|
|
+ initEditorEvent(editorLayer: HTMLElement, parent: HTMLElement) {
|
|
|
// 监听键盘的 keydown 事件
|
|
|
- document.addEventListener("keydown", (event)=>{
|
|
|
- this.state.keyCode = event.keyCode;
|
|
|
- if (this.isKeyDown(KeySpace)) {
|
|
|
- parent.style.cursor = "grab";
|
|
|
- }
|
|
|
+ document.addEventListener("keydown", (event) => {
|
|
|
+ this.state.keyCode = event.keyCode;
|
|
|
+ if (this.isKeyDown(KeySpace)) {
|
|
|
+ parent.style.cursor = "grab";
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
// 监听键盘的 keyup 事件
|
|
|
- document.addEventListener("keyup", (event)=>{
|
|
|
- this.state.keyCode = -1;
|
|
|
- isMoving = false;
|
|
|
- if(!this.isMoving()){
|
|
|
- parent.style.cursor = "default";
|
|
|
- }
|
|
|
+ document.addEventListener("keyup", (event) => {
|
|
|
+ this.state.keyCode = -1;
|
|
|
+ isMoving = false;
|
|
|
+ if (!this.isMoving()) {
|
|
|
+ parent.style.cursor = "default";
|
|
|
+ }
|
|
|
});
|
|
|
-
|
|
|
|
|
|
- parent.addEventListener("wheel", (event:any)=>{
|
|
|
- // 检查滚轮方向
|
|
|
- let delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)))
|
|
|
- console.log( delta );
|
|
|
+ parent.addEventListener("wheel", (event: any) => {
|
|
|
+ // 检查滚轮方向
|
|
|
+ let delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail));
|
|
|
+ console.log(delta);
|
|
|
|
|
|
- let s = this.state.scale + 0.1 * delta
|
|
|
- if ( s < 0.5 ) s = 0.5;
|
|
|
- if (s > 2) s = 2.0;
|
|
|
- this.state.setScale( s)
|
|
|
+ let s = this.state.scale + 0.1 * delta;
|
|
|
+ if (s < 0.5) s = 0.5;
|
|
|
+ if (s > 2) s = 2.0;
|
|
|
+ this.state.setScale(s);
|
|
|
});
|
|
|
|
|
|
let isMoving = false;
|
|
|
- let moveX = 0, moveY = 0;
|
|
|
+ let moveX = 0,
|
|
|
+ moveY = 0;
|
|
|
|
|
|
-
|
|
|
const obj = this.editRoot;
|
|
|
- this.state.onWidthChanged(()=>{
|
|
|
- obj.rect.width = this.state.width;
|
|
|
- })
|
|
|
- this.state.onWidthChanged(()=>{
|
|
|
- obj.rect.height = this.state.height;
|
|
|
- })
|
|
|
-
|
|
|
- parent.addEventListener("mousemove",(e:MouseEvent)=>{
|
|
|
-
|
|
|
- const s = this.state.scale;
|
|
|
- const b = editorLayer.getBoundingClientRect()
|
|
|
- this.state.setMouse({x: (e.clientX - b.left) / s , y: (e.clientY - b.top) / s});
|
|
|
-
|
|
|
- if (isMoving || e.button == 2) { //鼠标右键
|
|
|
- e.preventDefault();
|
|
|
- parent.style.cursor = "grab";
|
|
|
- const xOffset = e.pageX - moveX;
|
|
|
- const yOffset = e.pageY - moveY;
|
|
|
-
|
|
|
- obj.translate(xOffset, yOffset);
|
|
|
- editorLayer.style.transform = obj.parent.worldTransform.getMatrixStr();
|
|
|
- //this.state.setPos({x: this.state.pos.x + xOffset, y: this.state.pos.y + yOffset});
|
|
|
- }
|
|
|
- moveX = e.pageX;
|
|
|
- moveY = e.pageY;
|
|
|
+ this.state.onWidthChanged(() => {
|
|
|
+ obj.rect.width = this.state.width;
|
|
|
+ });
|
|
|
+ this.state.onWidthChanged(() => {
|
|
|
+ obj.rect.height = this.state.height;
|
|
|
});
|
|
|
-
|
|
|
- parent.addEventListener("mouseup",(e:MouseEvent)=>{
|
|
|
- if(this.state.moveMode) this.moveEditor();
|
|
|
- })
|
|
|
-
|
|
|
- document.addEventListener("mouseup",(e:MouseEvent)=>{
|
|
|
- if(!this.isMoving()){
|
|
|
- parent.style.cursor = "default";
|
|
|
- } else if(isMoving) {
|
|
|
- parent.style.cursor = "pointer";
|
|
|
- }
|
|
|
- isMoving = false;
|
|
|
- })
|
|
|
-
|
|
|
- this.state.onScaleChanged((v)=>{
|
|
|
- obj.setPivot2(this.state.mouse.x, this.state.mouse.y)
|
|
|
- obj.scale(v, v);
|
|
|
- editorLayer.style.transformOrigin = `0 0`;
|
|
|
+
|
|
|
+ parent.addEventListener("mousemove", (e: MouseEvent) => {
|
|
|
+ const s = this.state.scale;
|
|
|
+ const b = editorLayer.getBoundingClientRect();
|
|
|
+ this.state.setMouse({
|
|
|
+ x: (e.clientX - b.left) / s,
|
|
|
+ y: (e.clientY - b.top) / s,
|
|
|
+ });
|
|
|
+
|
|
|
+ if (isMoving || e.button == 2) {
|
|
|
+ //鼠标右键
|
|
|
+ e.preventDefault();
|
|
|
+ parent.style.cursor = "grab";
|
|
|
+ const xOffset = e.pageX - moveX;
|
|
|
+ const yOffset = e.pageY - moveY;
|
|
|
+
|
|
|
+ obj.translate(xOffset, yOffset);
|
|
|
editorLayer.style.transform = obj.parent.worldTransform.getMatrixStr();
|
|
|
- //editorLayer.style.left
|
|
|
- })
|
|
|
+ //this.state.setPos({x: this.state.pos.x + xOffset, y: this.state.pos.y + yOffset});
|
|
|
+ }
|
|
|
+ moveX = e.pageX;
|
|
|
+ moveY = e.pageY;
|
|
|
+ });
|
|
|
|
|
|
+ parent.addEventListener("mouseup", (e: MouseEvent) => {
|
|
|
+ if (this.state.moveMode) this.moveEditor();
|
|
|
+ });
|
|
|
|
|
|
- this.state.onPosChanged((v)=>{
|
|
|
- editorLayer.style.left= v.x + "px";
|
|
|
- editorLayer.style.top = v.y + "px";
|
|
|
- })
|
|
|
+ document.addEventListener("mouseup", (e: MouseEvent) => {
|
|
|
+ if (!this.isMoving()) {
|
|
|
+ parent.style.cursor = "default";
|
|
|
+ } else if (isMoving) {
|
|
|
+ parent.style.cursor = "pointer";
|
|
|
+ }
|
|
|
+ isMoving = false;
|
|
|
+ });
|
|
|
|
|
|
- parent.addEventListener("mousedown", (e:MouseEvent)=>{
|
|
|
- isMoving = this.isMoving() || e.button == 2;
|
|
|
- if (isMoving) {
|
|
|
- parent.style.cursor = "grab";
|
|
|
- e.preventDefault();
|
|
|
- editorLayer.focus();
|
|
|
- }
|
|
|
- moveX = e.pageX;
|
|
|
- moveY = e.pageY;
|
|
|
- })
|
|
|
+ this.state.onScaleChanged((v) => {
|
|
|
+ obj.setPivot2(this.state.mouse.x, this.state.mouse.y);
|
|
|
+ obj.scale(v, v);
|
|
|
+ editorLayer.style.transformOrigin = `0 0`;
|
|
|
+ editorLayer.style.transform = obj.parent.worldTransform.getMatrixStr();
|
|
|
+ //editorLayer.style.left
|
|
|
+ });
|
|
|
|
|
|
- window.addEventListener("resize", ()=>this.updateEditorSize());
|
|
|
- this.state.onPageChanged(()=>this.updateCardSize());
|
|
|
+ this.state.onPosChanged((v) => {
|
|
|
+ editorLayer.style.left = v.x + "px";
|
|
|
+ editorLayer.style.top = v.y + "px";
|
|
|
+ });
|
|
|
+
|
|
|
+ parent.addEventListener("mousedown", (e: MouseEvent) => {
|
|
|
+ isMoving = this.isMoving() || e.button == 2;
|
|
|
+ if (isMoving) {
|
|
|
+ parent.style.cursor = "grab";
|
|
|
+ e.preventDefault();
|
|
|
+ editorLayer.focus();
|
|
|
+ }
|
|
|
+ moveX = e.pageX;
|
|
|
+ moveY = e.pageY;
|
|
|
+ });
|
|
|
+
|
|
|
+ window.addEventListener("resize", () => this.updateEditorSize());
|
|
|
+ this.state.onPageChanged(() => this.updateCardSize());
|
|
|
|
|
|
setTimeout(() => {
|
|
|
- this.updateEditorSize();
|
|
|
+ this.updateEditorSize();
|
|
|
}, 1000);
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
updateCardSize() {
|
|
|
const page = this.doms.page.value as HTMLElement;
|
|
|
@@ -204,39 +208,59 @@ export class EditorCtrl extends ModuleControl<EditorModule> {
|
|
|
updateEditorSize() {
|
|
|
const state = this.state;
|
|
|
const parent = this.doms.parent.value as HTMLElement;
|
|
|
- const left = ( parent.clientWidth - state.width) / 2.0;
|
|
|
- const top = (parent.clientHeight - state.height) / 2.0;
|
|
|
-
|
|
|
- this.state.setPos({x: left, y: top});
|
|
|
-}
|
|
|
+ const left = (parent.clientWidth - state.width) / 2.0;
|
|
|
+ const top = (parent.clientHeight - state.height) / 2.0;
|
|
|
+
|
|
|
+ this.state.setPos({ x: left, y: top });
|
|
|
+ }
|
|
|
|
|
|
autoInScreen() {
|
|
|
-
|
|
|
- this.setScale(1);
|
|
|
- const bound = this.store.currStreamCard.$el.getBoundingClientRect();
|
|
|
- console.log(bound.width, bound.height);
|
|
|
+ let scale = 1;
|
|
|
+ const parent = this.doms.parent.value as HTMLElement;
|
|
|
+ const parentb = parent.getBoundingClientRect();
|
|
|
|
|
|
- const parent = this.doms.parent.value as HTMLElement;
|
|
|
+ const designW =
|
|
|
+ this.helper.designSizeToPx(this.store.currStreamCard.layout.size[0]) + 80;
|
|
|
+ if (parentb.width < designW) {
|
|
|
+ scale = parentb.width / designW;
|
|
|
+ }
|
|
|
+ this.setScale(scale);
|
|
|
|
|
|
- const parentb = parent.getBoundingClientRect();
|
|
|
+ const bound = this.store.currStreamCard.$el.getBoundingClientRect();
|
|
|
|
|
|
- const left = parentb.left + ( parentb.width - bound.width) / 2.0; //屏幕坐标位置
|
|
|
- const top = parentb.top + ( parentb.height - bound.height) / 2.0;
|
|
|
+ const left = parentb.left + (parentb.width - bound.width) / 2.0; //屏幕坐标位置
|
|
|
+ const top = parentb.top + (parentb.height - bound.height) / 2.0;
|
|
|
|
|
|
- let offsetX = left - bound.left;
|
|
|
- let offsetY = top -bound.top;
|
|
|
+ let offsetX = left - bound.left;
|
|
|
+ let offsetY = top - bound.top;
|
|
|
|
|
|
- this.editRoot.translate(offsetX, offsetY);
|
|
|
+ this.editRoot.translate(offsetX, offsetY);
|
|
|
|
|
|
- const editor = this.doms.editor.value as HTMLElement;
|
|
|
+ const editor = this.doms.editor.value as HTMLElement;
|
|
|
editor.style.transform = this.editRoot.parent.worldTransform.getMatrixStr();
|
|
|
}
|
|
|
|
|
|
+ clickChangeScale(scale: number) {
|
|
|
+ const parent = this.doms.parent.value as HTMLElement;
|
|
|
+ const parentb = parent.getBoundingClientRect();
|
|
|
+ const left = parentb.left + parentb.width / 2.0; //屏幕坐标位置
|
|
|
+ const top = parentb.top + parentb.height / 2.0;
|
|
|
+ const editor = this.doms.editor.value as HTMLElement;
|
|
|
+ const editorb = editor.getBoundingClientRect();
|
|
|
+
|
|
|
+ const leftE = left - editorb.left;
|
|
|
+ const topE = top - editorb.top;
|
|
|
+ this.state.setMouse({
|
|
|
+ x: leftE / this.state.scale,
|
|
|
+ y: topE / this.state.scale,
|
|
|
+ });
|
|
|
+ this.setScale(scale);
|
|
|
+ }
|
|
|
+
|
|
|
setScale(scale: number) {
|
|
|
if (isNaN(scale)) scale = this.state.scale;
|
|
|
else if (scale < 0.5) scale = 0.5;
|
|
|
else if (scale > 2) scale = 2.0;
|
|
|
this.state.setScale(scale);
|
|
|
}
|
|
|
-
|
|
|
}
|
