Skip to content

Z
zeroing-editor
Commit aa38e101 authored by rockyl's avatar rockyl
Browse files
Options

修复百分比属性的问题

parent b01812b1
Hide whitespace changes
Inline Side-by-side
Showing with 170 additions and 136 deletions
public/index.html
View file @ aa38e101
...@@ -8,7 +8,8 @@ ...@@ -8,7 +8,8 @@
<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.fbc60c6d3cb30e5ab97e82d392d9efeee91b8581.js"></script> <!-- <script src="http://0.0.0.0:4002/debug/engine.js"></script>-->
<script src="//yun.duiba.com.cn/editor/zeroing/libs/engine.cfb1f45ea0206b8e50e55213f624e81d67432f81.js"></script>
<script src="//yun.duiba.com.cn/editor/zeroing/libs/svga.469e6ae1d98c9017953cf9375559c2575b293b59.js"></script> <script src="//yun.duiba.com.cn/editor/zeroing/libs/svga.469e6ae1d98c9017953cf9375559c2575b293b59.js"></script>
</head> </head>
<body> <body>
......
src/components/inputs/NumberInput.vue
View file @ aa38e101
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
<el-input-number :disabled="!editable" :value="editValue" @change="onInput" controls-position="right" <el-input-number :disabled="!editable" :value="editValue" @change="onInput" controls-position="right"
:placeholder="defaultValue"> :placeholder="defaultValue">
</el-input-number> </el-input-number>
<span @click="onClickPercent" v-if="config && config.percent" style="position: absolute; right: 42px; cursor: pointer" <span @click="onClickPercent" v-if="config && config.percent"
style="position: absolute; right: 42px; cursor: pointer"
:class="{'percent-on': isPercent, 'percent-off': !isPercent}">%</span> :class="{'percent-on': isPercent, 'percent-off': !isPercent}">%</span>
</div> </div>
</template> </template>
...@@ -20,7 +21,7 @@ ...@@ -20,7 +21,7 @@
data() { data() {
return { return {
isPercent: false, isPercent: false,
editValue:null editValue: null
} }
}, },
computed: { computed: {
...@@ -41,32 +42,32 @@ ...@@ -41,32 +42,32 @@
return getInputDefaultValue(this.property); return getInputDefaultValue(this.property);
}, },
}, },
mounted(){ mounted() {
this.updateValue() this.updateValue()
}, },
methods: { methods: {
updateValue() { updateValue() {
if(this.container.hasOwnProperty('_' + this.propertyName)){ if (this.container.hasOwnProperty('_' + this.propertyName)) {
if(this.container['_' + this.propertyName]){ if (this.container['_' + this.propertyName]) {
this.editValue = this.container['_' + this.propertyName]; this.editValue = this.container['_' + this.propertyName];
}else{ } else {
this.editValue = undefined; this.editValue = undefined;
} }
}else if(this.propertyName.indexOf("_")!=-1){ } else if (this.propertyName.indexOf("_") != -1) {
if(this.container[this.propertyName]){ if (this.container[this.propertyName]) {
this.editValue = this.container[this.propertyName] this.editValue = this.container[this.propertyName]
}else{ } else {
this.editValue = undefined; this.editValue = undefined;
} }
}else{ } else {
let v = this.value; let v = this.value;
if (v === undefined) { if (v === undefined) {
this.isPercent = false; this.isPercent = false;
this.editValue = this.property.default?this.property.default:undefined; this.editValue = this.property.default ? this.property.default : undefined;
} else { } else {
this.isPercent = typeof v === 'string'; this.isPercent = typeof v === 'string';
if(typeof v === 'string'){ if (typeof v === 'string') {
v = parseInt(v); v = parseInt(v);
} }
this.editValue = v; this.editValue = v;
...@@ -75,24 +76,27 @@ ...@@ -75,24 +76,27 @@
} }
}, },
onInput(v) { onInput(v) {
if (v !== this.value) { //if (v !== this.value) {
this.$emit('input', v, this.container, this.propertyName, this.value); let value;
} if (this.isPercent) {
if (!v && v !== 0) {
value = undefined;
} else {
value = v + '%';
}
} else {
value = parseInt(v);
}
this.$emit('input', value, this.container, this.propertyName, this.value);
//}
}, },
onClickPercent() { onClickPercent() {
if(this.isPercent){ //设置非百分比 this.isPercent = !this.isPercent;
this.onInput(parseInt(this.value)) this.onInput(this.value);
}else{ //设置成百分比
if(!this.value && this.value !== 0){
this.onInput(undefined)
}else{
this.onInput(this.value + '%')
}
}
}, },
}, },
watch:{ watch: {
value(v){ value(v) {
this.updateValue() this.updateValue()
} }
} }
...@@ -101,4 +105,4 @@ ...@@ -101,4 +105,4 @@
<style scoped> <style scoped>
</style> </style>
\ No newline at end of file
src/locales/zh-CN.json
View file @ aa38e101
...@@ -194,8 +194,6 @@ ...@@ -194,8 +194,6 @@
"Save this behavior before": "是否先保存这个行为?", "Save this behavior before": "是否先保存这个行为?",
"Failed to import view": "导入视图失败", "Failed to import view": "导入视图失败",
"Failed to upload file": "上传文件失败", "Failed to upload file": "上传文件失败",
"Single view": "单视图",
"Multi views": "多视图",
"Import single": "导入单", "Import single": "导入单",
"Import multi": "导入多", "Import multi": "导入多",
"Import view success": "视图导入成功", "Import view success": "视图导入成功",
...@@ -463,5 +461,11 @@ ...@@ -463,5 +461,11 @@
"top": "顶部裁剪", "top": "顶部裁剪",
"center": "上下裁剪", "center": "上下裁剪",
"bottom": "底部裁剪" "bottom": "底部裁剪"
},
"importViewMenu": {
"psd_single": "单视图PSD",
"psd_multi": "多视图PSD",
"view_single": "单视图文件",
"view_multi": "多视图文件"
} }
} }
src/store/modules/project.js
View file @ aa38e101
...@@ -14,7 +14,7 @@ import { ...@@ -14,7 +14,7 @@ import {
findProcess, findProcess,
getMockServeEnabled, getMockServeEnabled,
saveAs, saveAs,
traverseViewNode traverseViewNode, zipViewFile
} from "../../utils" } from "../../utils"
import {template} from "../../template" import {template} from "../../template"
import {packAssetsGroups} from "../../utils/assets-pack" import {packAssetsGroups} from "../../utils/assets-pack"
...@@ -28,6 +28,7 @@ import {arrayFind} from "element-ui/src/utils/util"; ...@@ -28,6 +28,7 @@ import {arrayFind} from "element-ui/src/utils/util";
import {uploadFiles} from "./editor"; import {uploadFiles} from "./editor";
import events from "@/global-events.js" import events from "@/global-events.js"
import zlib from 'zlib';
const storeName = 'project'; const storeName = 'project';
const psStoreName = 'pack-history'; const psStoreName = 'pack-history';
...@@ -58,7 +59,7 @@ const defaultOptions = { ...@@ -58,7 +59,7 @@ const defaultOptions = {
const OPERATE_MAX_LENGTH = 200; // 撤销重做栈最大值 const OPERATE_MAX_LENGTH = 200; // 撤销重做栈最大值
let nodeUUidCatch=null; let nodeUUidCatch = null;
export const projectStore = { export const projectStore = {
...@@ -451,6 +452,7 @@ export const projectStore = { ...@@ -451,6 +452,7 @@ export const projectStore = {
} }
} }
} }
events.$emit("viewReset") events.$emit("viewReset")
}, },
...@@ -779,14 +781,14 @@ export const projectStore = { ...@@ -779,14 +781,14 @@ export const projectStore = {
commit('updateProjectUpdateTime', {time: state.base_time}); commit('updateProjectUpdateTime', {time: state.base_time});
} }
getters.project.data=getters.project.data.replace(/editScroll/g,"scroll") getters.project.data = getters.project.data.replace(/editScroll/g, "scroll")
let project = Object.assign({}, getters.project); let project = Object.assign({}, getters.project);
if (data) { if (data) {
project.data = data; project.data = data;
} }
console.log("data",getters.project,project.data) console.log("data", getters.project, project.data)
let resp = await projectApi.saveOne(project, remark); let resp = await projectApi.saveOne(project, remark);
if (resp.result) { if (resp.result) {
...@@ -811,11 +813,11 @@ export const projectStore = { ...@@ -811,11 +813,11 @@ export const projectStore = {
*/ */
activeComponent({state, commit}, data) { activeComponent({state, commit}, data) {
// debugger; // debugger;
console.log("resetScrollType",data) console.log("resetScrollType", data)
resetScrollType(data.data) resetScrollType(data.data)
let getTopView = node => { let getTopView = node => {
// console.log("node",node) // console.log("node",node)
if (node.parent && !node.parent.parent) { if (node.parent && !node.parent.parent) {
return node; return node;
} else { } else {
...@@ -862,10 +864,10 @@ export const projectStore = { ...@@ -862,10 +864,10 @@ export const projectStore = {
}); });
//console.log("props",commit,state,props,state.activeComponent) //console.log("props",commit,state,props,state.activeComponent)
if(nodeUUidCatch==state.activeComponent.uuid){ if (nodeUUidCatch == state.activeComponent.uuid) {
// events.$emit('canvasKeyVupdate', {props},"update"); // events.$emit('canvasKeyVupdate', {props},"update");
} }
nodeUUidCatch=state.activeComponent.uuid nodeUUidCatch = state.activeComponent.uuid
//console.log("nodeUUidCatch",nodeUUidCatch) //console.log("nodeUUidCatch",nodeUUidCatch)
/*if (hasAssetsDep) { /*if (hasAssetsDep) {
...@@ -931,38 +933,29 @@ export const projectStore = { ...@@ -931,38 +933,29 @@ export const projectStore = {
scripts: _scripts scripts: _scripts
}) })
}, },
async importPsd({commit}, {file, action, mode}) { async importView({dispatch}, {file, action, mode}) {
const result = await toZeroing(file, {mode}); let result;
if (action === 1 || action === 2) { //普通视图
result = await zipViewFile(file);
} else { //psd
result = await toZeroing(file, {mode});
}
let viewFile = new File([result], 'view.json'); let viewFile = new File([result], 'view.json');
await dispatch('uploadView', {originFile: file, viewFile, action})
},
async uploadView({commit}, {originFile, viewFile, action}) {
//console.log(viewFile);
const {view, assets} = await editorApi.uploadView(viewFile); const {view, assets} = await editorApi.uploadView(viewFile);
switch (action) { if (action % 2 === 1) {//视图文件
case 0: //单视图 view.name = originFile.name.substring(0, originFile.name.lastIndexOf('.'));
view.name = file.name.substring(0, file.name.lastIndexOf('.')); commit('importView', view);
commit('importView', view); } else {//多视图PSD
break; for (let subView of view.children) {
case 1: //多视图 commit('importView', subView)
for (let subView of view.children) { }
commit('importView', subView)
}
break
} }
commit('importAssets', assets) commit('importAssets', assets)
}, },
async importView({commit}, {file, action}) {
const {view, assets} = await editorApi.importView(file);
switch (action) {
case 0: //单视图
view.name = file.name.substring(0, file.name.lastIndexOf('.'));
commit('importView', view);
break;
case 1: //多视图
for (let subView of view.children) {
commit('importView', subView);
}
break;
}
commit('importAssets', assets);
},
exportView({state}, view) { exportView({state}, view) {
let zip = new JSZip(); let zip = new JSZip();
zip.file('view.json', JSON.stringify(view)); zip.file('view.json', JSON.stringify(view));
...@@ -1064,14 +1057,14 @@ function setUUIDForAllChildren(node) { ...@@ -1064,14 +1057,14 @@ function setUUIDForAllChildren(node) {
//重置编辑视图数据为实际视图数据 //重置编辑视图数据为实际视图数据
function resetScrollType(data) { function resetScrollType(data) {
if(data.type=="editScrollList"){ if (data.type == "editScrollList") {
data.type="scrollList" data.type = "scrollList"
} }
if(data.type=="editScrollView"){ if (data.type == "editScrollView") {
data.type="scrollView" data.type = "scrollView"
} }
if(data.children){ if (data.children) {
for(let itme of data.children){ for (let itme of data.children) {
resetScrollType(itme) resetScrollType(itme)
} }
} }
......
src/utils/index.js
View file @ aa38e101
...@@ -6,6 +6,7 @@ import {Message, Loading} from "element-ui"; ...@@ -6,6 +6,7 @@ import {Message, Loading} from "element-ui";
import i18n from '../i18n' import i18n from '../i18n'
import generateUUID from "uuid/v4"; import generateUUID from "uuid/v4";
import moment from "moment"; import moment from "moment";
import zlib from "zlib";
/** /**
* 动态数据图标映射 * 动态数据图标映射
...@@ -484,3 +485,19 @@ export function dataURLtoBlob(dataUrl) { ...@@ -484,3 +485,19 @@ export function dataURLtoBlob(dataUrl) {
} }
return new Blob([u8arr], {type: mime}); return new Blob([u8arr], {type: mime});
} }
export async function zipViewFile(file){
let dataString = await readTextFile(file);
let buf = new Buffer(dataString);
return await new Promise((resolve, reject) => {
zlib.gzip(buf, function (err, res) {
if (err) {
reject(err);
} else {
console.log(res.length);
resolve(res);
}
})
})
}
src/views/Editor/Views.vue
View file @ aa38e101
...@@ -7,8 +7,7 @@ ...@@ -7,8 +7,7 @@
<el-dropdown trigger="hover" placement="top" size="mini" @command="onImportCommand"> <el-dropdown trigger="hover" placement="top" size="mini" @command="onImportCommand">
<el-link icon="el-icon-arrow-down" :underline="false"></el-link> <el-link icon="el-icon-arrow-down" :underline="false"></el-link>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="single">{{$t('Single view')}}</el-dropdown-item> <el-dropdown-item v-for="(item, key) in importViewMenu" :key="key" :command="key">{{item}}</el-dropdown-item>
<el-dropdown-item command="multi">{{$t('Multi views')}}</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
...@@ -42,8 +41,9 @@ ...@@ -42,8 +41,9 @@
@node-drop="onNodeDrop" @node-drop="onNodeDrop"
> >
<div slot-scope="{ node, data }" class="tree-node"> <div slot-scope="{ node, data }" class="tree-node">
<div class="node-name" > <div class="node-name">
<i v-show="Object.keys(iconMap).includes(data.type)" :class="iconMap[data.type]" style="color:#9b82e3"></i> <i v-show="Object.keys(iconMap).includes(data.type)" :class="iconMap[data.type]"
style="color:#9b82e3"></i>
{{data.name}} {{data.name}}
</div> </div>
...@@ -91,11 +91,12 @@ ...@@ -91,11 +91,12 @@
label: 'name' label: 'name'
}, },
expandedKeys: [], expandedKeys: [],
nodeFilterPresets: this.$t('nodeFilterPresets'), nodeFilterPresets: this.$t('nodeFilterPresets'),
iconMap: { importViewMenu: this.$t('importViewMenu'),
image: 'el-icon-picture', iconMap: {
label: 'el-icon-edit-outline' image: 'el-icon-picture',
} label: 'el-icon-edit-outline'
}
}; };
}, },
mounted() { mounted() {
...@@ -128,27 +129,27 @@ ...@@ -128,27 +129,27 @@
}, },
//重置编辑视图数据为实际视图数据 //重置编辑视图数据为实际视图数据
resetScrollType(data) { resetScrollType(data) {
if(data.type=="editScrollList"){ if (data.type == "editScrollList") {
data.type="scrollList" data.type = "scrollList"
} }
if(data.type=="editScrollView"){ if (data.type == "editScrollView") {
data.type="scrollView" data.type = "scrollView"
} }
if(data.children){ if (data.children) {
for(let itme of data.children){ for (let itme of data.children) {
this.resetScrollType(itme) this.resetScrollType(itme)
} }
} }
//console.log("1122334") //console.log("1122334")
}, },
locateViewNodeActive(node) { locateViewNodeActive(node) {
if(this.$refs.tree){ if (this.$refs.tree) {
//console.log("选中") //console.log("选中")
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.resetScrollType(this.activeComponent) //this.resetScrollType(this.activeComponent)
this.resetScrollType(data) this.resetScrollType(data)
this.resetScrollType(nodeDom.data) this.resetScrollType(nodeDom.data)
...@@ -162,23 +163,23 @@ ...@@ -162,23 +163,23 @@
// nodeDom.data.type="scrollView" // nodeDom.data.type="scrollView"
// } // }
//console.log(data,nodeDom) //console.log(data,nodeDom)
this.$store.dispatch('activeComponent', {data, node:nodeDom}); this.$store.dispatch('activeComponent', {data, node: nodeDom});
let styleCatch={ let styleCatch = {
x:node.x, x: node.x,
y:node.y, y: node.y,
anchorX:node.anchorX, anchorX: node.anchorX,
anchorY:node.anchorY, anchorY: node.anchorY,
scaleX:node.scaleX, scaleX: node.scaleX,
scaleY:node.scaleY, scaleY: node.scaleY,
// imageWidth:parseInt(node.imageWidth), // imageWidth:parseInt(node.imageWidth),
// imageHeight:parseInt(node.imageHeight), // imageHeight:parseInt(node.imageHeight),
width:node._width, width: node._width,
_width:node._width, _width: node._width,
_height:node._height, _height: node._height,
height:node._height, height: node._height,
} }
this.$store.dispatch("modifyProperties", styleCatch); this.$store.dispatch("modifyProperties", styleCatch);
} }
}, },
updateFilter() { updateFilter() {
...@@ -261,28 +262,28 @@ ...@@ -261,28 +262,28 @@
}, },
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 {
return dropNode.parent.parent || type === 'inner'; return dropNode.parent.parent || type === 'inner';
} }
}, },
onNodeDrop(){ onNodeDrop() {
this.makeProjectDirty(); this.makeProjectDirty();
//setTimeout(()=>{ //setTimeout(()=>{
events.$emit("canvasViewUpdate") events.$emit("canvasViewUpdate")
//},200) //},200)
}, },
/** /**
* 点击左侧视图列表 * 点击左侧视图列表
*/ */
handleNodeClick(data, node) { handleNodeClick(data, node) {
this.resetScrollType(data) this.resetScrollType(data)
this.resetScrollType(node.data) this.resetScrollType(node.data)
...@@ -290,13 +291,13 @@ ...@@ -290,13 +291,13 @@
// console.log(this.getCurrentPath(node)) // console.log(this.getCurrentPath(node))
this.$store.dispatch('activeComponent', {data, node}); this.$store.dispatch('activeComponent', {data, node});
events.$emit('canvasActiveNodeByTree', this.getCurrentPath(node)); events.$emit('canvasActiveNodeByTree', this.getCurrentPath(node));
}, },
/** /**
* 获取树的路径，返回格式:0/0/1 * 获取树的路径，返回格式:0/0/1
*/ */
getCurrentPath (node) { getCurrentPath(node) {
let currentPath let currentPath
if (node && node.data) { if (node && node.data) {
let nodeParent = node.parent let nodeParent = node.parent
...@@ -306,11 +307,11 @@ ...@@ -306,11 +307,11 @@
nodeParent = nodeParent.parent nodeParent = nodeParent.parent
} }
} }
let path=[] let path = []
for(let item of currentPath){ for (let item of currentPath) {
if(item.parent){ if (item.parent) {
for(let cNode in item.parent.childNodes){ for (let cNode in item.parent.childNodes) {
if(item.parent.childNodes[cNode]==item){ if (item.parent.childNodes[cNode] == item) {
path.push(cNode) path.push(cNode)
} }
} }
...@@ -340,7 +341,7 @@ ...@@ -340,7 +341,7 @@
selectFile(async files => { selectFile(async files => {
events.$emit('upload-indicator', true); events.$emit('upload-indicator', true);
try { try {
await this.importPsd({ await this.importView({
file: files[0], file: files[0],
action, action,
mode, mode,
...@@ -351,18 +352,30 @@ ...@@ -351,18 +352,30 @@
}) })
}, },
onImportCommand(importType) { onImportCommand(importType) {
this.$refs.selectDesignModeDialog.show(importType); let action, needSelectDesign = true;
},
onSelectDesignMode(mode, importType){
let action;
switch (importType) { switch (importType) {
case 'single': case 'view_single':
action = 0;
break;
case 'multi':
action = 1; action = 1;
needSelectDesign = false;
break; break;
case 'view_multi':
action = 2;
needSelectDesign = false;
break;
case 'psd_single':
action = 3;
break;
case 'psd_multi':
action = 4;
break;
}
if(needSelectDesign){
this.$refs.selectDesignModeDialog.show(action);
}else{
this.toImport(action);
} }
},
onSelectDesignMode(mode, action) {
this.toImport(action, mode); this.toImport(action, mode);
}, },
onMoreMenu(command, data, node) { onMoreMenu(command, data, node) {
...@@ -395,20 +408,20 @@ ...@@ -395,20 +408,20 @@
this.copyNode({ this.copyNode({
node: data, node: data,
parentNode: node.parent.data, parentNode: node.parent.data,
copyState:1 copyState: 1
}); });
}, },
() => { () => {
//copyState：1复制行为，2不复制行为 //copyState：1复制行为，2不复制行为
this.copyNode({ this.copyNode({
node: data, node: data,
parentNode: node.parent.data, parentNode: node.parent.data,
copyState:2 copyState: 2
}); });
} }
) )
break; break;
case 'paste': case 'paste':
this.pasteNode({ this.pasteNode({
...@@ -440,7 +453,7 @@ ...@@ -440,7 +453,7 @@
} }
}, },
...mapMutations(['copyNode', 'pasteNode', 'deleteNode', 'addNode', 'makeProjectDirty']), ...mapMutations(['copyNode', 'pasteNode', 'deleteNode', 'addNode', 'makeProjectDirty']),
...mapActions(['exportView', 'importView', 'importPsd']) ...mapActions(['exportView', 'importView'])
} }
}; };
</script> </script>
...@@ -458,4 +471,4 @@ ...@@ -458,4 +471,4 @@
.more-button { .more-button {
margin: 0 3px; margin: 0 3px;
} }
</style> </style>
\ No newline at end of file
src/views/Editor/components/RuntimeLayer.vue
View file @ aa38e101
...@@ -69,7 +69,9 @@ ...@@ -69,7 +69,9 @@
}, },
resize() { resize() {
this.$nextTick(() => { this.$nextTick(() => {
engine.editorStage.resizeStage(); if(engine.editorStage){
engine.editorStage.resizeStage();
}
}); });
}, },
showView(viewConfig) { showView(viewConfig) {
...@@ -95,7 +97,7 @@ ...@@ -95,7 +97,7 @@
let view = this.getNode('', true); let view = this.getNode('', true);
return node.getIndexPath(view); return node.getIndexPath(view);
}, },
} }
} }
</script> </script>
...@@ -107,4 +109,4 @@ ...@@ -107,4 +109,4 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
</style> </style>
\ No newline at end of file
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