Skip to content

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

--

parent 0bce7f80
Expand all Hide 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)
events.$emit('canvasKeyVupdate', {props,activeComponent: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;
......@@ -113,6 +112,8 @@ export default {
created(){
//alert()
this.zoom=0.5;
events.$emit('autoSelectState', this.autoSelectState)
document.body.addEventListener('mousewheel',(e)=>{
this.mouseWheel(e)
......@@ -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) {
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});
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('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)
this.nodePath = this.$refs.runtimeLayer.getNodePathWithPos({x:x/this.zoom, y: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
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