Skip to content

Z
zeroing-editor
Commit 7b484780 authored by 任建锋's avatar 任建锋
Browse files
Options

--

parent 0bce7f80
Show whitespace changes
Inline Side-by-side
Showing with 702 additions and 109 deletions
public/index.html
View file @ 7b484780
......@@ -8,7 +8,7 @@
<title>烽火台</title>
<script src="//yun.duiba.com.cn/js-libs/psd.js/3.2.0/psd.min.js"></script>
<script src="//yun.duiba.com.cn/editor/zeroing/libs/engine.50767b1fe652a3daf7f557e5cfb9eaa6090fc805.js"></script>
<script src="//yun.duiba.com.cn/editor/zeroing/libs/engine.a0a1c11664d9ed4ac76999a01ceb9a729e1b27c1.js"></script>
</head>
<body>
......
src/store/modules/project.js
View file @ 7b484780
......@@ -57,6 +57,9 @@ const defaultOptions = {
const OPERATE_MAX_LENGTH = 200; // 撤销重做栈最大值
let nodeUUidCatch=null;
export const projectStore = {
modules: {
package: packageStore,
......@@ -814,8 +817,11 @@ export const projectStore = {
});
console.log("props",props,state.activeComponent)
// if(nodeUUidCatch==state.activeComponent.uuid){
events.$emit('canvasKeyVupdate', {props,activeComponent:state.activeComponent});
// }
nodeUUidCatch=state.activeComponent.uuid
console.log("nodeUUidCatch",nodeUUidCatch)
/*if (hasAssetsDep) {
commit('updateAssetDep');
}*/
......
src/views/Editor/Playground.vue
View file @ 7b484780
......@@ -18,10 +18,16 @@
size="mini">舞台边缘裁剪
</el-checkbox>
</el-form-item>
<el-form-item>
<el-checkbox
v-model="autoSelectState"
size="mini">自动框选
</el-checkbox>
</el-form-item>
</el-form>
</div>
<div class="zero-playground-body-center" :style="playgroundStyle" ref="zeroPlayground" @mousedown="clickViewHandle" >
<div class="zero-playground-body-center" :style="playgroundStyle">
<!-- <div class="zero-playground-draw-panel"> -->
<draw-canvas-panel></draw-canvas-panel>
<!-- </div> -->
......@@ -47,19 +53,12 @@ export default {
return {
zoom:0.5,
hasCtrlState:false,
overFlowState:false
overFlowState:false,
autoSelectState:true
}
},
methods: {
clickViewHandle(e) {
console.log(e.pageX-this.$refs.zeroPlayground.getBoundingClientRect().left/2)
events.$emit("onClickTouchLayer",{
x:e.pageX-this.$refs.zeroPlayground.getBoundingClientRect().left/2,
y:e.pageY-this.$refs.zeroPlayground.getBoundingClientRect().top/2
});
// this.$store.dispatch('activeComponent', {data, fromPlayground: true});
},
mouseWheel(e){
if(!this.hasCtrlState){
return;
......@@ -114,6 +113,8 @@ export default {
//alert()
this.zoom=0.5;
events.$emit('autoSelectState', this.autoSelectState)
document.body.addEventListener('mousewheel',(e)=>{
this.mouseWheel(e)
},false)
......@@ -136,7 +137,12 @@ export default {
mounted(){
events.$emit('setPlaygroundZoom', {zoom:this.zoom});
console.log(123)
},
watch: {
autoSelectState() {
events.$emit('autoSelectState', this.autoSelectState);
}
},
};
</script>
......
src/views/Editor/Views.vue
View file @ 7b484780
......@@ -125,11 +125,13 @@
this.expandedKeys = [node.uuid];
},
locateViewNodeActive(node) {
if(this.$refs.tree){
this.$refs.tree.setCurrentKey(node.uuid);
this.expandedKeys = [node.uuid];
let data=this.$refs.tree.getCurrentNode()
let nodeDom=this.$refs.tree.getNode(data)
this.$store.dispatch('activeComponent', {data, node:nodeDom});
}
},
updateFilter() {
if (this.$refs.tree) {
......@@ -211,9 +213,11 @@
},
allowDrag(draggingNode) {
//return draggingNode.parent.parent;
return true;
},
allowDrop(draggingNode, dropNode, type) {
//
if(!draggingNode.parent.parent){ //根视图拖动
return !dropNode.parent.parent && type !== 'inner';
}else{
......@@ -222,14 +226,45 @@
},
onNodeDrop(){
this.makeProjectDirty();
//setTimeout(()=>{
events.$emit("canvasViewUpdate")
//},200)
},
/**
* 点击左侧视图列表
*/
handleNodeClick(data, node) {
console.log('handleNodeClick',data,node);
console.log(this.getCurrentPath(node))
this.$store.dispatch('activeComponent', {data, node});
events.$emit('canvasActiveNodeByTree', this.getCurrentPath(node));
},
/**
* 获取树的路径，返回格式:0/0/1
*/
getCurrentPath (node) {
let currentPath
if (node && node.data) {
let nodeParent = node.parent
currentPath = [node]
while (nodeParent && nodeParent.data && typeof nodeParent.data === 'object') {
currentPath.unshift(nodeParent)
nodeParent = nodeParent.parent
}
}
let path=[]
for(let item of currentPath){
if(item.parent){
for(let cNode in item.parent.childNodes){
if(item.parent.childNodes[cNode]==item){
path.push(cNode)
}
}
}
}
path.shift();
return path.join("/");
},
toAddView() {
this.$prompt(this.$t('Input view name'), this.$t('Alert'), {
......
src/views/Editor/components/RuntimeLayer.vue
View file @ 7b484780
......@@ -81,6 +81,7 @@
modifyProps(nodePath, props, callback) {
let result = engine.editorStage.modifyProps(nodePath, props);
if (result) {
//callback()
setTimeout(callback, 100);
}
return result;
......
src/views/Editor/components/drawCanvasPanel.vue
View file @ 7b484780
......@@ -2,7 +2,7 @@
<template>
<div class="zero-draw-panel-container" >
<div class="zero-components-container" >
<views-canvas-tree :views="views" ></views-canvas-tree>
<!-- <views-canvas-tree :views="views" ></views-canvas-tree> -->
<div class="playground-wrapper">
<runtime-layer ref="runtimeLayer"
:design-width="parseInt(options.designWidth)"
......@@ -11,8 +11,9 @@
@launched="onRuntimeLayerLaunched"
@select-node="onSelectNode"
/>
<!-- <div class="touch-layer" @click="onClickTouchLayer"></div> -->
<!-- <div class="touch-layer"></div> -->
</div>
<edit-control-view :targetNode="targetNode" :activeComponent="activeComponent"></edit-control-view>
</div>
</div>
</template>
......@@ -23,11 +24,14 @@
import { mapState, mapGetters } from 'vuex';
import RuntimeLayer from "./RuntimeLayer";
import SInput from "./SInput";
import EditControlView from './editControlView';
export default {
data() {
return {
zoom:0.5,
autoSelectState:true,
options: {
designWidth: 750,
designHeight: 1624,
......@@ -50,7 +54,7 @@
}
},
components: { viewsCanvasTree,SInput,
RuntimeLayer,},
RuntimeLayer,EditControlView},
methods: {
moveEdit(e,type){
events.$emit('setMoveEdit', {e,type});
......@@ -80,29 +84,54 @@
events.$emit('locate-view-node-active', this.targetNode);
},
onModifyProp(key,value,data) {
console.log(data.activeComponent.name,this.targetNode.name,this.nodePath)
if(data.activeComponent.uuid==this.targetNode.uuid){
console.log()
let activeComponent=data.activeComponent
console.log("activeComponent",activeComponent)
// if(activeComponent){
// return false;
// }
// if(activeComponent.uuid==this.targetNode.uuid){
console.log("修改 key v")
if(this.$refs.runtimeLayer){
this.$refs.runtimeLayer.modifyProps(this.nodePath, {
[key]: value,
}, () => {
this.getNode();
})
}
// }
// console.log(data.activeComponent.name,this.targetNode.name,this.nodePath)
},
onClickTouchLayer(e){
const {x,y} = e;
if(!this.autoSelectState){
return false;
}
console.log("sdsd",x/this.zoom,y/this.zoom)
setTimeout(()=>{
if(this.$refs.runtimeLayer){
this.nodePath = this.$refs.runtimeLayer.getNodePathWithPos({x:x/this.zoom, y:y/this.zoom});
}
},100)
console.log(this.nodePath)
},
canvasKeyVupdate(data){
console.log(10,data)
for(let item in data.props){
let _data=data;
for(let item in _data.props){
console.log(item)
this.onModifyProp(item, data.props[item],data)
this.onModifyProp(item, _data.props[item],_data)
}
},
canvasViewUpdate(){
console.log("视图更新")
this.$refs.runtimeLayer.showView(this.views[0]);
}
,canvasActiveNodeByTree(nodePath){
this.nodePath=nodePath
this.getNode()
}
},
computed: {
......@@ -115,13 +144,25 @@
events.$on("setPlaygroundZoom", data => {
this.zoom=data.zoom;
});
events.$on("onClickTouchLayer",this.onClickTouchLayer);
//视图点击定位
events.$on("onClickTouchLayer",this.onClickTouchLayer);
//视图keyv更新
events.$on('canvasKeyVupdate', this.canvasKeyVupdate);
//视图更新
events.$on('canvasViewUpdate', this.canvasViewUpdate);
events.$on('canvasActiveNodeByTree', this.canvasActiveNodeByTree);
//是否自动点选
events.$on('autoSelectState', (data)=>{
this.autoSelectState=data
});
},
watch: {
nodePath() {
this.getNode();
},
views() {
this.$refs.runtimeLayer.showView(this.views[0]);
}
},
};
......
src/views/Editor/components/editControlView copy.vue 0 → 100644
View file @ 7b484780
<template>
<div class="edit-control-view" @mousedown="moveEdit($event,`mousedown`)" ref="zeroPlayground" @click="onClickTouchLayer">
<!-- <div class="edit-box-con-body" :style="boxstyleEdit">
</div> -->
<div class="edit-con-body" :style="styleEdit">
<div class="edit-con-move" @mousedown="editStateCon(`move`)"></div>
<div class="edit-con-com edit-left-con" @mousedown="editStateCon(`left`)"></div>
<div class="edit-con-com edit-right-con" @mousedown="editStateCon(`right`)"></div>
<div class="edit-con-com edit-top-con" @mousedown="editStateCon(`top`)"></div>
<div class="edit-con-com edit-bottom-con" @mousedown="editStateCon(`bottom`)"></div>
<div class="edit-con-com edit-topleft-con" @mousedown="editStateCon(`topleft`)"></div>
<div class="edit-con-com edit-topright-con" @mousedown="editStateCon(`topright`)"></div>
<div class="edit-con-com edit-bottomleft-con" @mousedown="editStateCon(`bottomleft`)"></div>
<div class="edit-con-com edit-bottomright-con" @mousedown="editStateCon(`bottomright`)"></div>
<div
class="edit-con-com edit-center-con"
:style="styleEditAnchor"
@mousedown="editStateCon(`center`)"
></div>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import events from "@/global-events.js";
export default {
props: {
views: {
type: Array,
default: []
},
activeComponent: {}
},
data () {
return {
styleCatch:{},
boxStyleCatch:{},
canMove: false,
canFouce: true,
editEvent: "",
changeWidth: 0,
changeWidthStart: 0,
changeHeight: 0,
changeHeightStart: 0,
changeMoveX: 0,
changeMoveY: 0,
changeEndX: 0,
changeEndY: 0,
catchWidth: 0,
catchHeight: 0,
catchX:0,
catchY:0,
zoom:2
}
},
components: {},
methods: {
onClickTouchLayer(e) {
if(!this.canFouce){
return false;
}
events.$emit("onClickTouchLayer",{
x:e.pageX-this.$refs.zeroPlayground.getBoundingClientRect().left/2,
y:e.pageY-this.$refs.zeroPlayground.getBoundingClientRect().top/2
});
},
moveEdit(e, type) {
if (!this) {
return;
}
if (this.editEvent != "") {
if (type == "mousedown") {
this.canMove = true;
this.canFouce=false
this.changeWidthStart = e.x;
this.changeHeightStart = e.y;
this.catchWidthCon();
}
if (type == "mousemove") {
if (!this.canMove) {
return;
}
this.changeMoveX = e.x - this.changeWidthStart;
this.changeMoveY = e.y - this.changeHeightStart;
this.modifyCopyPropertiesCon();
}
if (type == "mouseup") {
this.canMove = false;
// setTimeout(()=>{
this.canFouce=true
// },500)
this.changeEndX = e.x;
this.changeEndY = e.y;
this.modifyPropertiesCon();
this.editEvent = "";
this.changeWidth=0;
this.changeWidthStart=0;
this.changeHeight=0;
this.changeHeightStart=0;
this.changeMoveX=0;
this.changeMoveY=0;
this.changeEndX=0;
this.changeEndY=0;
this.catchWidth=0;
this.catchHeight=0;
this.catchY=0;
this.catchY=0;
}
}
},
catchWidthCon() {
this.catchY = this.styleCatch.y? this.styleCatch.y:0;
this.catchX = this.styleCatch.x? this.styleCatch.x:0;
if (this.editEvent == "bottomright") {
this.catchWidth = this.styleCatch.width? this.styleCatch.width:(this.styleCatch.imageWidth?this.styleCatch.imageWidth:0);
this.catchHeight = this.styleCatch.height? this.styleCatch.height:(this.styleCatch.imageHeight?this.styleCatch.imageHeight:0);
this.$store.dispatch("modifyProperties", {
width: parseInt(this.catchWidth),
height: parseInt(this.catchHeight),
});
}else if (this.editEvent == "topright") {
this.catchWidth = this.styleCatch.width? this.styleCatch.width:(this.styleCatch.imageWidth?this.styleCatch.imageWidth:0);
this.catchHeight = this.styleCatch.height? this.styleCatch.height:(this.styleCatch.imageHeight?this.styleCatch.imageHeight:0);
}else if (this.editEvent == "top") {
this.catchHeight = this.styleCatch.height? this.styleCatch.height:(this.styleCatch.imageHeight?this.styleCatch.imageHeight:0);
}else if (this.editEvent == "right") {
this.catchWidth = this.styleCatch.width? this.styleCatch.width:(this.styleCatch.imageWidth?this.styleCatch.imageWidth:0);
this.$store.dispatch("modifyProperties", {
width: parseInt(this.catchWidth),
});
} else if (this.editEvent == "left") {
this.catchWidth = this.styleCatch.width? this.styleCatch.width:(this.styleCatch.imageWidth?this.styleCatch.imageWidth:0);
} else if (this.editEvent == "bottom") {
this.catchHeight = this.styleCatch.height? this.styleCatch.height:(this.styleCatch.imageHeight?this.styleCatch.imageHeight:0);
this.$store.dispatch("modifyProperties", {
height: parseInt(this.catchHeight),
});
} else if (this.editEvent == "topleft") {
this.catchWidth = this.styleCatch.width? this.styleCatch.width:(this.styleCatch.imageWidth?this.styleCatch.imageWidth:0);
this.catchHeight = this.styleCatch.height? this.styleCatch.height:(this.styleCatch.imageHeight?this.styleCatch.imageHeight:0);
} else if (this.editEvent == "bottomleft") {
this.catchWidth = this.styleCatch.width? this.styleCatch.width:(this.styleCatch.imageWidth?this.styleCatch.imageWidth:0);
this.catchHeight = this.styleCatch.height? this.styleCatch.height:(this.styleCatch.imageHeight?this.styleCatch.imageHeight:0);
} else if (this.editEvent == "center") {
this.catchWidth = this.styleCatch.anchorX? this.styleCatch.anchorX:0;
this.catchHeight = this.styleCatch.anchorY? this.styleCatch.anchorY:0;
} else if (this.editEvent == "move") {
// this.catchX = this.styleCatch.x? this.styleCatch.x:0;
// this.catchY = this.styleCatch.y? this.styleCatch.y:0;
}
},
modifyCopyPropertiesCon() {
if (this.editEvent == "bottomright") {
// this.$store.dispatch("modifyCopyProperties", {
// width: this.catchWidth + this.changeMoveX * this.zoom,
// height: this.catchHeight + this.changeMoveY * this.zoom
// });
this.styleCatch.width=this.catchWidth + this.changeMoveX * this.zoom
this.styleCatch.height=this.catchHeight + this.changeMoveY * this.zoom
this.styleCatch.y=this.catchY
this.styleCatch.x=this.catchX
console.log(this.styleCatch.width)
} else if (this.editEvent == "top") {
// this.$store.dispatch("modifyCopyProperties", {
// height: this.catchHeight - this.changeMoveY * this.zoom,
// y:this.catchY+this.changeMoveY * this.zoom
// });
this.styleCatch.height=this.catchHeight - this.changeMoveY * this.zoom;
this.styleCatch.y=this.catchY+this.changeMoveY * this.zoom
} else if (this.editEvent == "right") {
// this.$store.dispatch("modifyCopyProperties", {
// width: this.catchWidth + this.changeMoveX * this.zoom,
// });
this.styleCatch.width=this.catchWidth + this.changeMoveX * this.zoom;
} else if (this.editEvent == "left") {
// this.$store.dispatch("modifyCopyProperties", {
// width: this.catchWidth - this.changeMoveX * this.zoom,
// x:this.catchX+this.changeMoveX * this.zoom
// });
this.styleCatch.width=this.catchWidth - this.changeMoveX * this.zoom
this.styleCatch.x=this.catchX+this.changeMoveX * this.zoom
} else if (this.editEvent == "bottom") {
// this.$store.dispatch("modifyCopyProperties", {
// height: this.catchHeight + this.changeMoveY * this.zoom,
// });
this.styleCatch.height=this.catchHeight + this.changeMoveY * this.zoom
} else if (this.editEvent == "topright") {
// this.$store.dispatch("modifyCopyProperties", {
// width: this.catchWidth + this.changeMoveX * this.zoom,
// height: this.catchHeight - this.changeMoveY * this.zoom,
// y:this.catchY+this.changeMoveY * this.zoom
// });
this.styleCatch.width=this.catchWidth + this.changeMoveX * this.zoom
this.styleCatch.height=this.catchHeight - this.changeMoveY * this.zoom
this.styleCatch.y=this.catchY+this.changeMoveY * this.zoom
} else if (this.editEvent == "topleft") {
// this.$store.dispatch("modifyCopyProperties", {
// width: this.catchWidth - this.changeMoveX * this.zoom,
// height: this.catchHeight - this.changeMoveY * this.zoom,
// y:this.catchY+this.changeMoveY * this.zoom,
// x:this.catchX+this.changeMoveX * this.zoom
// });
this.styleCatch.width=this.catchWidth - this.changeMoveX * this.zoom
this.styleCatch.height=this.catchHeight - this.changeMoveY * this.zoom
this.styleCatch.y=this.catchY+this.changeMoveY * this.zoom
this.styleCatch.x=this.catchX+this.changeMoveX * this.zoom
} else if (this.editEvent == "bottomleft") {
// this.$store.dispatch("modifyCopyProperties", {
// width: this.catchWidth - this.changeMoveX * this.zoom,
// height: this.catchHeight + this.changeMoveY * this.zoom,
// x:this.catchX+this.changeMoveX * this.zoom
// });
this.styleCatch.width=this.catchWidth - this.changeMoveX * this.zoom
this.styleCatch.height=this.catchHeight + this.changeMoveY * this.zoom
this.styleCatch.x=this.catchX+this.changeMoveX * this.zoom
} else if (this.editEvent == "center") {
// this.$store.dispatch("modifyCopyProperties", {
// anchorX: this.catchWidth + this.changeMoveX * this.zoom,
// anchorY: this.catchHeight + this.changeMoveY * this.zoom
// });
this.styleCatch.anchorX=this.catchWidth + this.changeMoveX * this.zoom
this.styleCatch.anchorY=this.catchHeight + this.changeMoveY * this.zoom
} else if (this.editEvent == "move") {
// this.$store.dispatch("modifyCopyProperties", {
// y:this.catchY+this.changeMoveY * this.zoom,
// x:this.catchX+this.changeMoveX * this.zoom
// });
this.styleCatch.y=this.catchY+this.changeMoveY * this.zoom
this.styleCatch.x=this.catchX+this.changeMoveX * this.zoom
}
},
modifyPropertiesCon() {
// events.$emit('canvasKeyVupdate', {properties:this.activeComponent.properties});
if (this.editEvent == "bottomright") {
this.$store.dispatch("modifyProperties", {
width: parseInt(this.catchWidth + this.changeMoveX * this.zoom),
height: parseInt(this.catchHeight + this.changeMoveY * this.zoom),
y:parseInt(this.catchY),
x:parseInt(this.catchX)
});
}else if (this.editEvent == "top") {
this.$store.dispatch("modifyProperties", {
height: parseInt(this.catchHeight - this.changeMoveY * this.zoom),
y:parseInt(this.catchY+this.changeMoveY * this.zoom)
});
} else if (this.editEvent == "right") {
this.$store.dispatch("modifyProperties", {
width: parseInt(this.catchWidth + this.changeMoveX * this.zoom),
});
} else if (this.editEvent == "left") {
this.$store.dispatch("modifyProperties", {
width: parseInt(this.catchWidth - this.changeMoveX * this.zoom),
x:parseInt(this.catchX+this.changeMoveX * this.zoom)
});
} else if (this.editEvent == "bottom") {
this.$store.dispatch("modifyProperties", {
height: parseInt(this.catchHeight + this.changeMoveY * this.zoom),
});
} else if (this.editEvent == "topright") {
this.$store.dispatch("modifyProperties", {
width: parseInt(this.catchWidth + this.changeMoveX * this.zoom),
height: parseInt(this.catchHeight - this.changeMoveY * this.zoom),
y:parseInt(this.catchY+this.changeMoveY * this.zoom)
});
}else if (this.editEvent == "topleft") {
this.$store.dispatch("modifyProperties", {
width: parseInt(this.catchWidth - this.changeMoveX * this.zoom),
height: parseInt(this.catchHeight - this.changeMoveY * this.zoom),
y:parseInt(this.catchY+this.changeMoveY * this.zoom),
x:parseInt(this.catchX+this.changeMoveX * this.zoom)
});
} else if (this.editEvent == "bottomleft") {
this.$store.dispatch("modifyProperties", {
width: parseInt(this.catchWidth - this.changeMoveX * this.zoom),
height: parseInt(this.catchHeight + this.changeMoveY * this.zoom),
x:parseInt(this.catchX+this.changeMoveX * this.zoom)
});
} else if (this.editEvent == "center") {
this.$store.dispatch("modifyProperties", {
anchorX: parseInt(this.catchWidth + this.changeMoveX * this.zoom),
anchorY: parseInt(this.catchHeight + this.changeMoveY * this.zoom)
});
} else if (this.editEvent == "move") {
this.$store.dispatch("modifyProperties", {
y:parseInt(this.catchY+this.changeMoveY * this.zoom),
x:parseInt(this.catchX+this.changeMoveX * this.zoom)
});
}
},
editStateCon(state) {
this.editEvent = state;
}
},
created() {
events.$on("setMoveEdit", data => {
this.moveEdit(data.e, data.type);
});
events.$on("setPlaygroundZoom", data => {
this.zoom=1/data.zoom;
});
document.body.addEventListener("mouseup",(e)=>{
this.moveEdit(e,`mouseup`)
})
document.body.addEventListener("mousemove",(e)=>{
this.moveEdit(e,`mousemove`)
})
this.styleCatch=JSON.parse(JSON.stringify(this.activeComponent.properties));
},
computed: {
position() {
let result = {};
result.x = this.styleCatch.x;
result.y = this.styleCatch.y;
return result;
},
styleEdit() {
if (!this.activeComponent) {
return {};
}
let result={
width: `${ this.styleCatch.width?this.styleCatch.width:(this.styleCatch.imageWidth?this.styleCatch.imageWidth:0)}px`,
height: `${ this.styleCatch.height?this.styleCatch.height:(this.styleCatch.imageHeight?this.styleCatch.imageHeight:0)}px`,
marginTop: `${ this.styleCatch.y?this.styleCatch.y:0}px`,
marginLeft: `${ this.styleCatch.x?this.styleCatch.x:0}px`,
transform: `rotate(${ this.styleCatch.rotation? this.styleCatch.rotation:0}deg)
scaleX(${ this.styleCatch.scaleX? this.styleCatch.scaleX:1})
scaleY(${ this.styleCatch.scaleY? this.styleCatch.scaleY:1})`,
webkitTransformOriginY: `${ this.styleCatch.anchorY?this.styleCatch.anchorY:0}px`,
webkitTransformOriginX: `${ this.styleCatch.anchorX?this.styleCatch.anchorX:0}px`,
}
return result
},
styleEditAnchor() {
if (!this.activeComponent) {
return {};
}
let result = {
top: 0,
left: 0
};
if ( this.styleCatch.anchorX) {
result.left = `${( this.styleCatch.anchorX /
(this.styleCatch.width?this.styleCatch.width:(this.styleCatch.imageWidth?this.styleCatch.imageWidth:0))) *
100}%`;
} else {
this.styleCatch.anchorX = 0;
}
if ( this.styleCatch.anchorY) {
result.top = `${( this.styleCatch.anchorY /
(this.styleCatch.height?this.styleCatch.height:(this.styleCatch.imageHeight?this.styleCatch.imageHeight:0))) *
100}%`;
} else {
this.styleCatch.anchorY = 0;
}
return result;
}
},
watch: {
views: function(newVal) {
console.log(newVal);
},
// activeComponent: function(newVal) {
// console.log(newVal.name);
// console.log(newVal);
// setInterval(()=>{
// console.log(this.activeComponent.properties.width)
// },1000)
// },
"activeComponent.properties":{
handler (newVal) {
console.error("样式改变")
this.styleCatch=JSON.parse(JSON.stringify(this.activeComponent.properties));
},
deep: true
}
}
};
</script>
<style lang="scss">
.edit-control-view {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
user-select: none;
}
.edit-box-con-body{
box-sizing: border-box;
cursor: move;
border: 3px solid #ccc;
position: absolute;
}
.edit-con-body {
box-sizing: border-box;
cursor: move;
border: 1px solid #ccc;
position: absolute;
.edit-con-move{
position: absolute;
top: 0%;
left: 0;
width: 100%;
height: 100%;
// background: blue;
}
.edit-con-com {
box-sizing: border-box;
border: 1px solid #444;
position: absolute;
width: 14px;
height: 14px;
margin: -7px -7px;
}
.edit-left-con {
left: 0;
top: 50%;
cursor: w-resize;
}
.edit-right-con {
right: 0;
top: 50%;
cursor: e-resize;
}
.edit-bottom-con {
left: 50%;
bottom: 0%;
cursor: s-resize;
}
.edit-top-con {
left: 50%;
top: 0%;
cursor: n-resize;
}
.edit-topleft-con {
left: 0;
top: 0;
cursor: nw-resize;
}
.edit-topright-con {
right: 0;
top: 0;
cursor: ne-resize;
}
.edit-bottomleft-con {
left: 0%;
bottom: 0%;
cursor: sw-resize;
}
.edit-bottomright-con {
right: 0%;
bottom: 0%;
cursor: se-resize;
}
.edit-center-con {
cursor: crosshair;
border-radius: 7px;
background: #999;
border: 1px solid #444;
}
}
</style>
\ No newline at end of file
src/views/Editor/components/editControlView.vue
View file @ 7b484780
<template>
<div class="edit-control-view" @mousedown="moveEdit($event,`mousedown`)">
<!-- <div class="edit-box-con-body" :style="boxstyleEdit">
</div> -->
<div class="edit-control-view" @mousedown="moveEdit($event,`mousedown`)" ref="zeroPlayground" @click="onClickTouchLayer">
<div class="edit-con-body" :style="styleEdit">
<div class="edit-con-move" @mousedown="editStateCon(`move`)"></div>
<div class="edit-con-com edit-left-con" @mousedown="editStateCon(`left`)"></div>
......@@ -34,17 +30,14 @@ import events from "@/global-events.js";
export default {
props: {
views: {
type: Array,
default: []
},
activeComponent: {}
targetNode: {},
},
data () {
return {
styleCatch:{},
boxStyleCatch:{},
canMove: false,
canFouce: true,
editEvent: "",
changeWidth: 0,
changeWidthStart: 0,
......@@ -64,6 +57,15 @@ export default {
components: {},
methods: {
onClickTouchLayer(e) {
if(!this.canFouce){
return false;
}
events.$emit("onClickTouchLayer",{
x:e.pageX-this.$refs.zeroPlayground.getBoundingClientRect().left/2,
y:e.pageY-this.$refs.zeroPlayground.getBoundingClientRect().top/2
});
},
moveEdit(e, type) {
if (!this) {
return;
......@@ -71,6 +73,7 @@ export default {
if (this.editEvent != "") {
if (type == "mousedown") {
this.canMove = true;
this.canFouce=false
this.changeWidthStart = e.x;
this.changeHeightStart = e.y;
this.catchWidthCon();
......@@ -86,6 +89,9 @@ export default {
if (type == "mouseup") {
this.canMove = false;
// setTimeout(()=>{
this.canFouce=true
// },500)
this.changeEndX = e.x;
this.changeEndY = e.y;
this.modifyPropertiesCon();
......@@ -144,16 +150,10 @@ export default {
this.catchWidth = this.styleCatch.anchorX? this.styleCatch.anchorX:0;
this.catchHeight = this.styleCatch.anchorY? this.styleCatch.anchorY:0;
} else if (this.editEvent == "move") {
// this.catchX = this.styleCatch.x? this.styleCatch.x:0;
// this.catchY = this.styleCatch.y? this.styleCatch.y:0;
}
},
modifyCopyPropertiesCon() {
if (this.editEvent == "bottomright") {
// this.$store.dispatch("modifyCopyProperties", {
// width: this.catchWidth + this.changeMoveX * this.zoom,
// height: this.catchHeight + this.changeMoveY * this.zoom
// });
this.styleCatch.width=this.catchWidth + this.changeMoveX * this.zoom
this.styleCatch.height=this.catchHeight + this.changeMoveY * this.zoom
......@@ -163,79 +163,49 @@ export default {
console.log(this.styleCatch.width)
} else if (this.editEvent == "top") {
// this.$store.dispatch("modifyCopyProperties", {
// height: this.catchHeight - this.changeMoveY * this.zoom,
// y:this.catchY+this.changeMoveY * this.zoom
// });
this.styleCatch.height=this.catchHeight - this.changeMoveY * this.zoom;
this.styleCatch.y=this.catchY+this.changeMoveY * this.zoom
} else if (this.editEvent == "right") {
// this.$store.dispatch("modifyCopyProperties", {
// width: this.catchWidth + this.changeMoveX * this.zoom,
// });
this.styleCatch.width=this.catchWidth + this.changeMoveX * this.zoom;
} else if (this.editEvent == "left") {
// this.$store.dispatch("modifyCopyProperties", {
// width: this.catchWidth - this.changeMoveX * this.zoom,
// x:this.catchX+this.changeMoveX * this.zoom
// });
this.styleCatch.width=this.catchWidth - this.changeMoveX * this.zoom
this.styleCatch.x=this.catchX+this.changeMoveX * this.zoom
} else if (this.editEvent == "bottom") {
// this.$store.dispatch("modifyCopyProperties", {
// height: this.catchHeight + this.changeMoveY * this.zoom,
// });
this.styleCatch.height=this.catchHeight + this.changeMoveY * this.zoom
} else if (this.editEvent == "topright") {
// this.$store.dispatch("modifyCopyProperties", {
// width: this.catchWidth + this.changeMoveX * this.zoom,
// height: this.catchHeight - this.changeMoveY * this.zoom,
// y:this.catchY+this.changeMoveY * this.zoom
// });
this.styleCatch.width=this.catchWidth + this.changeMoveX * this.zoom
this.styleCatch.height=this.catchHeight - this.changeMoveY * this.zoom
this.styleCatch.y=this.catchY+this.changeMoveY * this.zoom
} else if (this.editEvent == "topleft") {
// this.$store.dispatch("modifyCopyProperties", {
// width: this.catchWidth - this.changeMoveX * this.zoom,
// height: this.catchHeight - this.changeMoveY * this.zoom,
// y:this.catchY+this.changeMoveY * this.zoom,
// x:this.catchX+this.changeMoveX * this.zoom
// });
this.styleCatch.width=this.catchWidth - this.changeMoveX * this.zoom
this.styleCatch.height=this.catchHeight - this.changeMoveY * this.zoom
this.styleCatch.y=this.catchY+this.changeMoveY * this.zoom
this.styleCatch.x=this.catchX+this.changeMoveX * this.zoom
} else if (this.editEvent == "bottomleft") {
// this.$store.dispatch("modifyCopyProperties", {
// width: this.catchWidth - this.changeMoveX * this.zoom,
// height: this.catchHeight + this.changeMoveY * this.zoom,
// x:this.catchX+this.changeMoveX * this.zoom
// });
this.styleCatch.width=this.catchWidth - this.changeMoveX * this.zoom
this.styleCatch.height=this.catchHeight + this.changeMoveY * this.zoom
this.styleCatch.x=this.catchX+this.changeMoveX * this.zoom
} else if (this.editEvent == "center") {
// this.$store.dispatch("modifyCopyProperties", {
// anchorX: this.catchWidth + this.changeMoveX * this.zoom,
// anchorY: this.catchHeight + this.changeMoveY * this.zoom
// });
this.styleCatch.anchorX=this.catchWidth + this.changeMoveX * this.zoom
this.styleCatch.anchorY=this.catchHeight + this.changeMoveY * this.zoom
} else if (this.editEvent == "move") {
// this.$store.dispatch("modifyCopyProperties", {
// y:this.catchY+this.changeMoveY * this.zoom,
// x:this.catchX+this.changeMoveX * this.zoom
// });
this.styleCatch.y=this.catchY+this.changeMoveY * this.zoom
this.styleCatch.x=this.catchX+this.changeMoveX * this.zoom
console.log("this.catchY",this.catchY,this.changeMoveY)
this.styleCatch.ty=this.catchY+this.changeMoveY * this.zoom
this.styleCatch.tx=this.catchX+this.changeMoveX * this.zoom
console.log("this.styleCatch",this.styleCatch.x,this.styleCatch.y)
}
},
modifyPropertiesCon() {
// events.$emit('canvasKeyVupdate', {properties:this.activeComponent.properties});
if (this.editEvent == "bottomright") {
this.$store.dispatch("modifyProperties", {
width: parseInt(this.catchWidth + this.changeMoveX * this.zoom),
......@@ -310,24 +280,41 @@ export default {
this.moveEdit(e,`mousemove`)
})
this.styleCatch=JSON.parse(JSON.stringify(this.activeComponent.properties));
//this.styleCatch=JSON.parse(JSON.stringify(this.targetNode));
this.styleCatch={
x:this.targetNode.x,
y:this.targetNode.y,
tx:this.targetNode.worldMatrix.tx,
ty:this.targetNode.worldMatrix.ty,
width:this.targetNode.width,
height:this.targetNode.height,
left:this.targetNode.left,
top:this.targetNode.top,
right:this.targetNode.right,
bottom:this.targetNode.bottom,
horizonCenter:this.targetNode.horizonCenter,
verticalCenter:this.targetNode.verticalCenter,
source:this.targetNode.source,
}
},
computed: {
position() {
console.log("位置更新")
let result = {};
result.x = this.styleCatch.x;
result.y = this.styleCatch.y;
return result;
},
styleEdit() {
if (!this.activeComponent) {
if (!this.targetNode) {
return {};
}
let result={
width: `${ this.styleCatch.width?this.styleCatch.width:(this.styleCatch.imageWidth?this.styleCatch.imageWidth:0)}px`,
height: `${ this.styleCatch.height?this.styleCatch.height:(this.styleCatch.imageHeight?this.styleCatch.imageHeight:0)}px`,
marginTop: `${ this.styleCatch.y?this.styleCatch.y:0}px`,
marginLeft: `${ this.styleCatch.x?this.styleCatch.x:0}px`,
marginTop: `${ this.styleCatch.ty?this.styleCatch.ty:0}px`,
marginLeft: `${ this.styleCatch.tx?this.styleCatch.tx:0}px`,
transform: `rotate(${ this.styleCatch.rotation? this.styleCatch.rotation:0}deg)
scaleX(${ this.styleCatch.scaleX? this.styleCatch.scaleX:1})
scaleY(${ this.styleCatch.scaleY? this.styleCatch.scaleY:1})`,
......@@ -338,7 +325,7 @@ export default {
return result
},
styleEditAnchor() {
if (!this.activeComponent) {
if (!this.targetNode) {
return {};
}
let result = {
......@@ -362,25 +349,56 @@ export default {
}
return result;
}
},
watch: {
views: function(newVal) {
console.log(newVal);
},
// activeComponent: function(newVal) {
// console.log(newVal.name);
// console.log(newVal);
// setInterval(()=>{
// console.log(this.activeComponent.properties.width)
// },1000)
// },
"activeComponent.properties":{
handler (newVal) {
console.error("样式改变")
this.styleCatch=JSON.parse(JSON.stringify(this.activeComponent.properties));
//this.styleCatch=JSON.parse(JSON.stringify(this.activeComponent.properties));
},
deep: true
},
targetNode:function(){
console.log("now view data",this.targetNode)
let {
x,
y,
width,
height,
left,
top,
right,
bottom,
horizonCenter,
verticalCenter,
source,
}=this.targetNode
// let x=this.targetNode.worldMatrix.tx;
// let y=this.targetNode.worldMatrix.ty;
this.styleCatch={
x,
y,
tx:this.targetNode.worldMatrix.tx,
ty:this.targetNode.worldMatrix.ty,
width,
height,
left,
top,
right,
bottom,
horizonCenter,
verticalCenter,
source,
}
// this.styleCatch=JSON.parse(JSON.stringify(this.targetNode));
}
}
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment