Skip to content

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

--

parent 25a47f09
Show whitespace changes
Inline Side-by-side
Showing with 286 additions and 134 deletions
src/themes/light/playground.scss
View file @ daeca6f5
.zero-playground-body-center{
position: relative;
width: 750px;
height: 1206px;
height: 1624px;
margin: 10px auto;
// max-height: 1200px;
background-color: transparent;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
overflow-x: hidden;
overflow-y: auto;
//overflow-x: hidden;
//overflow-y: auto;
/*transform: scale(.5, .5);
transform-origin: 50% 0%;*/
//zoom: 0.5;
......
src/views/Editor/Playground.vue
View file @ daeca6f5
<template>
<pane icon="el-icon-s-open" class="pane-playground" :title="$t('panes.Playground')">
<div class="zero-playground-body-center" :style="playgroundStyle">
<div class="draw-body">
<div class="playground-con">
<!-- <label class="el-form-item__label">滑动滚轮进行缩放</label> -->
<el-button size="mini" @click="setZoom(true)"><i class="el-icon-plus"></i></el-button>
<el-input class="el-input el-input--mini" :value="parseInt(zoom*100)+'%'" style="width:60px" readonly/>
<el-button size="mini" @click="setZoom(false)"><i class="el-icon-minus"></i></el-button>
</div>
<div class="zero-playground-body-center" :style="playgroundStyle" >
<!-- <div class="zero-playground-draw-panel"> -->
<draw-canvas-panel></draw-canvas-panel>
<!-- </div> -->
</div>
</div>
</pane>
</template>
......@@ -18,21 +28,51 @@ export default {
name: 'Playground',
components: { Pane, DrawPanel,DrawCanvasPanel},
props: {
zoom:0.5
},
data:{
data () {
return {
zoom:0.5,
hasCtrlState:false
}
},
methods: {
mouseWheel(e){
console.log(e)
console.log(this.hasCtrlState)
if(!this.hasCtrlState){
return;
}
if(e.deltaY>0){
this.zoom-=0.1
this.setZoom(false)
}else if(e.deltaY<0){
this.zoom+=0.1
this.setZoom(true)
}
console.log(this.zoom)
// this.$set(this.zoom, this.zoomj)
},
setZoom(state){
if(state){
if(this.zoom>=1.4){
this.zoom=1.4
}else{
this.zoom+=0.05
}
}else{
if(this.zoom<=0.2){
this.zoom=0.2
}else{
this.zoom-=0.05
}
}
// this.zoom=this.zoom.toFixed(2)
events.$emit('setPlaygroundZoom', {zoom:this.zoom});
},
keyDo(state){
console.log(state)
this.hasCtrlState=state;
}
},
computed: {
......@@ -48,13 +88,46 @@ export default {
created(){
//alert()
this.zoom=0.5;
document.body.addEventListener('mousewheel',(e)=>{
this.mouseWheel(e)
},false)
document.onkeydown = (e)=>{
let key = window.event.keyCode;
if (key == 18) {
this.keyDo(true);
}
};
document.onkeyup = (e)=>{
let key = window.event.keyCode;
if (key == 18) {
this.keyDo(false);
}
};
},
mounted(){
events.$emit('setPlaygroundZoom', {zoom:this.zoom});
console.log(123)
}
};
</script>
<style scoped>
</style>
<style lang="scss">
.pane-playground{
}
.draw-body{
width:100%;
height: 100%;
overflow: auto;
}
.playground-con{
width: 100%;
height: 50px;
}
</style>
\ No newline at end of file
src/views/Editor/components/editControlView.vue
View file @ daeca6f5
<template>
<div class="edit-control-view" @mousedown="moveEdit($event,`mousedown`)">
<!-- <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>
......@@ -20,6 +24,7 @@
></div>
</div>
</div>
</template>
......@@ -35,7 +40,11 @@ export default {
},
activeComponent: {}
},
data: {
data () {
return {
styleCatch:{},
boxStyleCatch:{},
canMove: false,
editEvent: "",
changeWidth: 0,
......@@ -50,7 +59,10 @@ export default {
catchHeight: 0,
catchX:0,
catchY:0,
zoom:2
}
},
components: {},
methods: {
moveEdit(e, type) {
......@@ -91,152 +103,182 @@ export default {
this.catchHeight=0;
this.catchY=0;
this.catchY=0;
//this.styleCatch=this.activeComponent.properties;
// this.boxStyleCatch=this.activeComponent.properties;
}
}
},
catchWidthCon() {
if (this.editEvent == "bottomright") {
this.catchWidth = this.activeComponent.properties.width;
this.catchHeight = this.activeComponent.properties.height;
this.catchWidth = this.styleCatch.width? this.styleCatch.width:0;
this.catchHeight = this.styleCatch.height? this.styleCatch.height:0;
}else if (this.editEvent == "topright") {
this.catchWidth = this.activeComponent.properties.width;
this.catchHeight = this.activeComponent.properties.height;
this.catchY = this.activeComponent.properties.y;
this.catchWidth = this.styleCatch.width? this.styleCatch.width:0;
this.catchHeight = this.styleCatch.height? this.styleCatch.height:0;
this.catchY = this.styleCatch.y? this.styleCatch.y:0;
}else if (this.editEvent == "top") {
this.catchHeight = this.activeComponent.properties.height;
this.catchY = this.activeComponent.properties.y;
this.catchHeight = this.styleCatch.height? this.styleCatch.height:0;
this.catchY = this.styleCatch.y? this.styleCatch.y:0;
}else if (this.editEvent == "right") {
this.catchWidth = this.activeComponent.properties.width;
this.catchY = this.activeComponent.properties.y;
this.catchWidth = this.styleCatch.width? this.styleCatch.width:0;
this.catchY = this.styleCatch.y? this.styleCatch.y:0;
} else if (this.editEvent == "left") {
this.catchWidth = this.activeComponent.properties.width;
this.catchX = this.activeComponent.properties.x;
this.catchWidth = this.styleCatch.width? this.styleCatch.width:0;
this.catchX = this.styleCatch.x? this.styleCatch.x:0;
} else if (this.editEvent == "bottom") {
this.catchHeight = this.activeComponent.properties.height;
this.catchHeight = this.styleCatch.height? this.styleCatch.height:0;
} else if (this.editEvent == "topleft") {
this.catchWidth = this.activeComponent.properties.width;
this.catchHeight = this.activeComponent.properties.height;
this.catchY = this.activeComponent.properties.y;
this.catchX = this.activeComponent.properties.x;
this.catchWidth = this.styleCatch.width? this.styleCatch.width:0;
this.catchHeight = this.styleCatch.height? this.styleCatch.height:0;
this.catchY = this.styleCatch.y? this.styleCatch.y:0;
this.catchX = this.styleCatch.x? this.styleCatch.x:0;
} else if (this.editEvent == "bottomleft") {
this.catchWidth = this.activeComponent.properties.width;
this.catchHeight = this.activeComponent.properties.height;
this.catchX = this.activeComponent.properties.x;
this.catchWidth = this.styleCatch.width? this.styleCatch.width:0;
this.catchHeight = this.styleCatch.height? this.styleCatch.height:0;
this.catchX = this.styleCatch.x? this.styleCatch.x:0;
} else if (this.editEvent == "center") {
this.catchWidth = this.activeComponent.properties.anchorX;
this.catchHeight = this.activeComponent.properties.anchorY;
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.activeComponent.properties.x;
this.catchY = this.activeComponent.properties.y;
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 * 2,
height: this.catchHeight + this.changeMoveY * 2
});
// this.$store.dispatch("modifyCopyProperties", {
// width: this.catchWidth + this.changeMoveX * this.zoom,
// height: this.catchHeight + this.changeMoveY * this.zoom
// });
this.boxStyleCatch.width=this.catchWidth + this.changeMoveX * this.zoom
this.boxStyleCatch.height=this.catchHeight + this.changeMoveY * this.zoom
} else if (this.editEvent == "top") {
this.$store.dispatch("modifyCopyProperties", {
height: this.catchHeight - this.changeMoveY * 2,
y:this.catchY+this.changeMoveY * 2
});
// this.$store.dispatch("modifyCopyProperties", {
// height: this.catchHeight - this.changeMoveY * this.zoom,
// y:this.catchY+this.changeMoveY * this.zoom
// });
this.boxStyleCatch.height=this.catchHeight - this.changeMoveY * this.zoom;
this.boxStyleCatch.y=this.catchY+this.changeMoveY * this.zoom
} else if (this.editEvent == "right") {
this.$store.dispatch("modifyCopyProperties", {
width: this.catchWidth + this.changeMoveX * 2,
});
// this.$store.dispatch("modifyCopyProperties", {
// width: this.catchWidth + this.changeMoveX * this.zoom,
// });
this.boxStyleCatch.width=this.catchWidth + this.changeMoveX * this.zoom;
} else if (this.editEvent == "left") {
this.$store.dispatch("modifyCopyProperties", {
width: this.catchWidth - this.changeMoveX * 2,
x:this.catchX+this.changeMoveX * 2
});
// this.$store.dispatch("modifyCopyProperties", {
// width: this.catchWidth - this.changeMoveX * this.zoom,
// x:this.catchX+this.changeMoveX * this.zoom
// });
this.boxStyleCatch.width=this.catchWidth - this.changeMoveX * this.zoom
this.boxStyleCatch.x=this.catchX+this.changeMoveX * this.zoom
} else if (this.editEvent == "bottom") {
this.$store.dispatch("modifyCopyProperties", {
height: this.catchHeight + this.changeMoveY * 2,
});
// this.$store.dispatch("modifyCopyProperties", {
// height: this.catchHeight + this.changeMoveY * this.zoom,
// });
this.boxStyleCatch.height=this.catchHeight + this.changeMoveY * this.zoom
} else if (this.editEvent == "topright") {
this.$store.dispatch("modifyCopyProperties", {
width: this.catchWidth + this.changeMoveX * 2,
height: this.catchHeight - this.changeMoveY * 2,
y:this.catchY+this.changeMoveY * 2
});
// 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.boxStyleCatch.width=this.catchWidth + this.changeMoveX * this.zoom
this.boxStyleCatch.height=this.catchHeight - this.changeMoveY * this.zoom
this.boxStyleCatch.y=this.catchY+this.changeMoveY * this.zoom
} else if (this.editEvent == "topleft") {
this.$store.dispatch("modifyCopyProperties", {
width: this.catchWidth - this.changeMoveX * 2,
height: this.catchHeight - this.changeMoveY * 2,
y:this.catchY+this.changeMoveY * 2,
x:this.catchX+this.changeMoveX * 2
});
// 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.boxStyleCatch.width=this.catchWidth - this.changeMoveX * this.zoom
this.boxStyleCatch.height=this.catchHeight - this.changeMoveY * this.zoom
this.boxStyleCatch.y=this.catchY+this.changeMoveY * this.zoom
this.boxStyleCatch.x=this.catchX+this.changeMoveX * this.zoom
} else if (this.editEvent == "bottomleft") {
this.$store.dispatch("modifyCopyProperties", {
width: this.catchWidth - this.changeMoveX * 2,
height: this.catchHeight + this.changeMoveY * 2,
x:this.catchX+this.changeMoveX * 2
});
// 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.boxStyleCatch.width=this.catchWidth - this.changeMoveX * this.zoom
this.boxStyleCatch.height=this.catchHeight + this.changeMoveY * this.zoom
this.boxStyleCatch.x=this.catchX+this.changeMoveX * this.zoom
} else if (this.editEvent == "center") {
this.$store.dispatch("modifyCopyProperties", {
anchorX: this.catchWidth + this.changeMoveX * 2,
anchorY: this.catchHeight + this.changeMoveY * 2
});
// this.$store.dispatch("modifyCopyProperties", {
// anchorX: this.catchWidth + this.changeMoveX * this.zoom,
// anchorY: this.catchHeight + this.changeMoveY * this.zoom
// });
this.boxStyleCatch.anchorX=this.catchWidth + this.changeMoveX * this.zoom
this.boxStyleCatch.anchorY=this.catchHeight + this.changeMoveY * this.zoom
} else if (this.editEvent == "move") {
this.$store.dispatch("modifyCopyProperties", {
y:this.catchY+this.changeMoveY * 2,
x:this.catchX+this.changeMoveX * 2
});
// this.$store.dispatch("modifyCopyProperties", {
// y:this.catchY+this.changeMoveY * this.zoom,
// x:this.catchX+this.changeMoveX * this.zoom
// });
this.boxStyleCatch.y=this.catchY+this.changeMoveY * this.zoom
this.boxStyleCatch.x=this.catchX+this.changeMoveX * this.zoom
}
},
modifyPropertiesCon() {
if (this.editEvent == "bottomright") {
this.$store.dispatch("modifyProperties", {
width: this.catchWidth + this.changeMoveX * 2,
height: this.catchHeight + this.changeMoveY * 2
width: parseInt(this.catchWidth + this.changeMoveX * this.zoom),
height: parseInt(this.catchHeight + this.changeMoveY * this.zoom)
});
}else if (this.editEvent == "top") {
this.$store.dispatch("modifyProperties", {
height: this.catchHeight - this.changeMoveY * 2,
y:this.catchY+this.changeMoveY * 2
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: this.catchWidth + this.changeMoveX * 2,
width: parseInt(this.catchWidth + this.changeMoveX * this.zoom),
});
} else if (this.editEvent == "left") {
this.$store.dispatch("modifyProperties", {
width: this.catchWidth - this.changeMoveX * 2,
x:this.catchX+this.changeMoveX * 2
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: this.catchHeight + this.changeMoveY * 2,
height: parseInt(this.catchHeight + this.changeMoveY * this.zoom),
});
} else if (this.editEvent == "topright") {
this.$store.dispatch("modifyProperties", {
width: this.catchWidth + this.changeMoveX * 2,
height: this.catchHeight - this.changeMoveY * 2,
y:this.catchY+this.changeMoveY * 2
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: this.catchWidth - this.changeMoveX * 2,
height: this.catchHeight - this.changeMoveY * 2,
y:this.catchY+this.changeMoveY * 2,
x:this.catchX+this.changeMoveX * 2
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: this.catchWidth - this.changeMoveX * 2,
height: this.catchHeight + this.changeMoveY * 2,
x:this.catchX+this.changeMoveX * 2
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: this.catchWidth + this.changeMoveX * 2,
anchorY: this.catchHeight + this.changeMoveY * 2
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:this.catchY+this.changeMoveY * 2,
x:this.catchX+this.changeMoveX * 2
y:parseInt(this.catchY+this.changeMoveY * this.zoom),
x:parseInt(this.catchX+this.changeMoveX * this.zoom)
});
}
},
......@@ -248,36 +290,67 @@ export default {
events.$on("setMoveEdit", data => {
this.moveEdit(data.e, data.type);
});
events.$on("setPlaygroundZoom", data => {
// this.moveEdit(data.e, data.type);
console.log("data.zoom",data.zoom)
this.zoom=1/data.zoom;
});
// events.$emit('setPlaygroundZoom', {zoom:this.zoom});
document.body.addEventListener("mouseup",(e)=>{
this.moveEdit(e,`mouseup`)
})
document.body.addEventListener("mousemove",(e)=>{
this.moveEdit(e,`mousemove`)
})
this.styleCatch=this.activeComponent.properties;
this.boxStyleCatch=this.activeComponent.properties;
},
computed: {
position() {
let result = {};
result.x = this.activeComponent.properties.x;
result.y = this.activeComponent.properties.y;
result.x = this.styleCatch.x;
result.y = this.styleCatch.y;
return result;
},
styleEdit() {
if (!this.activeComponent) {
return {};
}
console.log(this.activeComponent.properties);
console.log( this.styleCatch);
let result={
width: `${this.activeComponent.properties.width}px`,
height: `${this.activeComponent.properties.height}px`,
marginTop: `${this.activeComponent.properties.y}px`,
marginLeft: `${this.activeComponent.properties.x}px`,
transform: `rotate(${this.activeComponent.properties.rotation?this.activeComponent.properties.rotation:0}deg)
scaleX(${this.activeComponent.properties.scaleX?this.activeComponent.properties.scaleX:1})
scaleY(${this.activeComponent.properties.scaleY?this.activeComponent.properties.scaleY:1})`,
webkitTransformOriginY: `${this.activeComponent.properties.anchorY}px`,
webkitTransformOriginX: `${this.activeComponent.properties.anchorX}px`,
width: `${ this.styleCatch.width}px`,
height: `${ this.styleCatch.height}px`,
marginTop: `${ this.styleCatch.y}px`,
marginLeft: `${ this.styleCatch.x}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}px`,
webkitTransformOriginX: `${ this.styleCatch.anchorX}px`,
}
return result
},
boxstyleEdit(){
if (!this.activeComponent) {
return {};
}
console.log( this.boxStyleCatch);
let result={
width: `${ this.boxStyleCatch.width}px`,
height: `${ this.boxStyleCatch.height}px`,
marginTop: `${ this.boxStyleCatch.y}px`,
marginLeft: `${ this.boxStyleCatch.x}px`,
transform: `rotate(${ this.boxStyleCatch.rotation? this.boxStyleCatch.rotation:0}deg)
scaleX(${ this.boxStyleCatch.scaleX? this.boxStyleCatch.scaleX:1})
scaleY(${ this.boxStyleCatch.scaleY? this.boxStyleCatch.scaleY:1})`,
webkitTransformOriginY: `${ this.boxStyleCatch.anchorY}px`,
webkitTransformOriginX: `${ this.boxStyleCatch.anchorX}px`,
}
return result
......@@ -290,20 +363,20 @@ export default {
top: 0,
left: 0
};
if (this.activeComponent.properties.anchorX) {
result.left = `${(this.activeComponent.properties.anchorX /
this.activeComponent.properties.width) *
if ( this.styleCatch.anchorX) {
result.left = `${( this.styleCatch.anchorX /
this.styleCatch.width) *
100}%`;
} else {
this.activeComponent.properties.anchorX = 0;
this.styleCatch.anchorX = 0;
}
if (this.activeComponent.properties.anchorY) {
result.top = `${(this.activeComponent.properties.anchorY /
this.activeComponent.properties.height) *
if ( this.styleCatch.anchorY) {
result.top = `${( this.styleCatch.anchorY /
this.styleCatch.height) *
100}%`;
} else {
this.activeComponent.properties.anchorY = 0;
this.styleCatch.anchorY = 0;
}
return result;
}
......@@ -329,6 +402,12 @@ export default {
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;
......
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