Skip to content

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

--

parent 0bce7f80
Expand all Show whitespace changes
Inline Side-by-side
Showing with 702 additions and 109 deletions
public/index.html
View file @ 7b484780
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<title>烽火台</title> <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/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> </head>
<body> <body>
......
src/store/modules/project.js
View file @ 7b484780
...@@ -57,6 +57,9 @@ const defaultOptions = { ...@@ -57,6 +57,9 @@ const defaultOptions = {
const OPERATE_MAX_LENGTH = 200; // 撤销重做栈最大值 const OPERATE_MAX_LENGTH = 200; // 撤销重做栈最大值
let nodeUUidCatch=null;
export const projectStore = { export const projectStore = {
modules: { modules: {
package: packageStore, package: packageStore,
...@@ -814,8 +817,11 @@ export const projectStore = { ...@@ -814,8 +817,11 @@ export const projectStore = {
}); });
console.log("props",props,state.activeComponent) console.log("props",props,state.activeComponent)
// if(nodeUUidCatch==state.activeComponent.uuid){
events.$emit('canvasKeyVupdate', {props,activeComponent:state.activeComponent}); events.$emit('canvasKeyVupdate', {props,activeComponent:state.activeComponent});
// }
nodeUUidCatch=state.activeComponent.uuid
console.log("nodeUUidCatch",nodeUUidCatch)
/*if (hasAssetsDep) { /*if (hasAssetsDep) {
commit('updateAssetDep'); commit('updateAssetDep');
}*/ }*/
......
src/views/Editor/Playground.vue
View file @ 7b484780
...@@ -18,10 +18,16 @@ ...@@ -18,10 +18,16 @@
size="mini">舞台边缘裁剪 size="mini">舞台边缘裁剪
</el-checkbox> </el-checkbox>
</el-form-item> </el-form-item>
<el-form-item>
<el-checkbox
v-model="autoSelectState"
size="mini">自动框选
</el-checkbox>
</el-form-item>
</el-form> </el-form>
</div> </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"> --> <!-- <div class="zero-playground-draw-panel"> -->
<draw-canvas-panel></draw-canvas-panel> <draw-canvas-panel></draw-canvas-panel>
<!-- </div> --> <!-- </div> -->
...@@ -47,19 +53,12 @@ export default { ...@@ -47,19 +53,12 @@ export default {
return { return {
zoom:0.5, zoom:0.5,
hasCtrlState:false, hasCtrlState:false,
overFlowState:false overFlowState:false,
autoSelectState:true
} }
}, },
methods: { 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){ mouseWheel(e){
if(!this.hasCtrlState){ if(!this.hasCtrlState){
return; return;
...@@ -114,6 +113,8 @@ export default { ...@@ -114,6 +113,8 @@ export default {
//alert() //alert()
this.zoom=0.5; this.zoom=0.5;
events.$emit('autoSelectState', this.autoSelectState)
document.body.addEventListener('mousewheel',(e)=>{ document.body.addEventListener('mousewheel',(e)=>{
this.mouseWheel(e) this.mouseWheel(e)
},false) },false)
...@@ -136,7 +137,12 @@ export default { ...@@ -136,7 +137,12 @@ export default {
mounted(){ mounted(){
events.$emit('setPlaygroundZoom', {zoom:this.zoom}); events.$emit('setPlaygroundZoom', {zoom:this.zoom});
console.log(123) console.log(123)
},
watch: {
autoSelectState() {
events.$emit('autoSelectState', this.autoSelectState);
} }
},
}; };
</script> </script>
......
src/views/Editor/Views.vue
View file @ 7b484780
...@@ -125,11 +125,13 @@ ...@@ -125,11 +125,13 @@
this.expandedKeys = [node.uuid]; this.expandedKeys = [node.uuid];
}, },
locateViewNodeActive(node) { locateViewNodeActive(node) {
if(this.$refs.tree){
this.$refs.tree.setCurrentKey(node.uuid); this.$refs.tree.setCurrentKey(node.uuid);
this.expandedKeys = [node.uuid]; this.expandedKeys = [node.uuid];
let data=this.$refs.tree.getCurrentNode() let data=this.$refs.tree.getCurrentNode()
let nodeDom=this.$refs.tree.getNode(data) let nodeDom=this.$refs.tree.getNode(data)
this.$store.dispatch('activeComponent', {data, node:nodeDom}); this.$store.dispatch('activeComponent', {data, node:nodeDom});
}
}, },
updateFilter() { updateFilter() {
if (this.$refs.tree) { if (this.$refs.tree) {
...@@ -211,9 +213,11 @@ ...@@ -211,9 +213,11 @@
}, },
allowDrag(draggingNode) { allowDrag(draggingNode) {
//return draggingNode.parent.parent; //return draggingNode.parent.parent;
return true; return true;
}, },
allowDrop(draggingNode, dropNode, type) { allowDrop(draggingNode, dropNode, type) {
//
if(!draggingNode.parent.parent){ //根视图拖动 if(!draggingNode.parent.parent){ //根视图拖动
return !dropNode.parent.parent && type !== 'inner'; return !dropNode.parent.parent && type !== 'inner';
}else{ }else{
...@@ -222,14 +226,45 @@ ...@@ -222,14 +226,45 @@
}, },
onNodeDrop(){ onNodeDrop(){
this.makeProjectDirty(); this.makeProjectDirty();
//setTimeout(()=>{
events.$emit("canvasViewUpdate")
//},200)
}, },
/** /**
* 点击左侧视图列表 * 点击左侧视图列表
*/ */
handleNodeClick(data, node) { handleNodeClick(data, node) {
console.log('handleNodeClick',data,node); console.log('handleNodeClick',data,node);
console.log(this.getCurrentPath(node))
this.$store.dispatch('activeComponent', {data, 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() { toAddView() {
this.$prompt(this.$t('Input view name'), this.$t('Alert'), { this.$prompt(this.$t('Input view name'), this.$t('Alert'), {
......
src/views/Editor/components/RuntimeLayer.vue
View file @ 7b484780
...@@ -81,6 +81,7 @@ ...@@ -81,6 +81,7 @@
modifyProps(nodePath, props, callback) { modifyProps(nodePath, props, callback) {
let result = engine.editorStage.modifyProps(nodePath, props); let result = engine.editorStage.modifyProps(nodePath, props);
if (result) { if (result) {
//callback()
setTimeout(callback, 100); setTimeout(callback, 100);
} }
return result; return result;
......
src/views/Editor/components/drawCanvasPanel.vue
View file @ 7b484780
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<template> <template>
<div class="zero-draw-panel-container" > <div class="zero-draw-panel-container" >
<div class="zero-components-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"> <div class="playground-wrapper">
<runtime-layer ref="runtimeLayer" <runtime-layer ref="runtimeLayer"
:design-width="parseInt(options.designWidth)" :design-width="parseInt(options.designWidth)"
...@@ -11,8 +11,9 @@ ...@@ -11,8 +11,9 @@
@launched="onRuntimeLayerLaunched" @launched="onRuntimeLayerLaunched"
@select-node="onSelectNode" @select-node="onSelectNode"
/> />
<!-- <div class="touch-layer" @click="onClickTouchLayer"></div> --> <!-- <div class="touch-layer"></div> -->
</div> </div>
<edit-control-view :targetNode="targetNode" :activeComponent="activeComponent"></edit-control-view>
</div> </div>
</div> </div>
</template> </template>
...@@ -23,11 +24,14 @@ ...@@ -23,11 +24,14 @@
import { mapState, mapGetters } from 'vuex'; import { mapState, mapGetters } from 'vuex';
import RuntimeLayer from "./RuntimeLayer"; import RuntimeLayer from "./RuntimeLayer";
import SInput from "./SInput"; import SInput from "./SInput";
import EditControlView from './editControlView';
export default { export default {
data() { data() {
return { return {
zoom:0.5, zoom:0.5,
autoSelectState:true,
options: { options: {
designWidth: 750, designWidth: 750,
designHeight: 1624, designHeight: 1624,
...@@ -50,7 +54,7 @@ ...@@ -50,7 +54,7 @@
} }
}, },
components: { viewsCanvasTree,SInput, components: { viewsCanvasTree,SInput,
RuntimeLayer,}, RuntimeLayer,EditControlView},
methods: { methods: {
moveEdit(e,type){ moveEdit(e,type){
events.$emit('setMoveEdit', {e,type}); events.$emit('setMoveEdit', {e,type});
...@@ -80,29 +84,54 @@ ...@@ -80,29 +84,54 @@
events.$emit('locate-view-node-active', this.targetNode); events.$emit('locate-view-node-active', this.targetNode);
}, },
onModifyProp(key,value,data) { onModifyProp(key,value,data) {
console.log(data.activeComponent.name,this.targetNode.name,this.nodePath)
if(data.activeComponent.uuid==this.targetNode.uuid){ let activeComponent=data.activeComponent
console.log() 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, { this.$refs.runtimeLayer.modifyProps(this.nodePath, {
[key]: value, [key]: value,
}, () => { }, () => {
this.getNode(); this.getNode();
}) })
} }
// }
// console.log(data.activeComponent.name,this.targetNode.name,this.nodePath)
}, },
onClickTouchLayer(e){ onClickTouchLayer(e){
const {x,y} = e; const {x,y} = e;
if(!this.autoSelectState){
return false;
}
console.log("sdsd",x/this.zoom,y/this.zoom) 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}); this.nodePath = this.$refs.runtimeLayer.getNodePathWithPos({x:x/this.zoom, y:y/this.zoom});
}
},100)
console.log(this.nodePath) console.log(this.nodePath)
}, },
canvasKeyVupdate(data){ canvasKeyVupdate(data){
console.log(10,data) console.log(10,data)
let _data=data;
for(let item in data.props){ for(let item in _data.props){
console.log(item) 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: { computed: {
...@@ -115,13 +144,25 @@ ...@@ -115,13 +144,25 @@
events.$on("setPlaygroundZoom", data => { events.$on("setPlaygroundZoom", data => {
this.zoom=data.zoom; this.zoom=data.zoom;
}); });
events.$on("onClickTouchLayer",this.onClickTouchLayer);
//视图点击定位
events.$on("onClickTouchLayer",this.onClickTouchLayer);
//视图keyv更新
events.$on('canvasKeyVupdate', this.canvasKeyVupdate); events.$on('canvasKeyVupdate', this.canvasKeyVupdate);
//视图更新
events.$on('canvasViewUpdate', this.canvasViewUpdate);
events.$on('canvasActiveNodeByTree', this.canvasActiveNodeByTree);
//是否自动点选
events.$on('autoSelectState', (data)=>{
this.autoSelectState=data
});
}, },
watch: { watch: {
nodePath() { nodePath() {
this.getNode(); this.getNode();
},
views() {
this.$refs.runtimeLayer.showView(this.views[0]);
} }
}, },
}; };
......
src/views/Editor/components/editControlView copy.vue 0 → 100644
View file @ 7b484780
This diff is collapsed.
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