Skip to content

Z
zeroing-editor
Commit ef45b774 authored by 张晨辰's avatar 张晨辰
Browse files
Options

fixed: scripts.options -> scripts.props

parent 07ecf566
Hide whitespace changes
Inline Side-by-side
Showing with 81 additions and 61 deletions
src/store/modules/project.js
View file @ ef45b774
......@@ -126,6 +126,7 @@ export const projectStore = {
state.operateStack.pop();
}
// 将数据更新至当前选中的节点上
_.forIn(view, (value, key) => {
Vue.set(state.activeComponent, key, _view[key]);
})
......@@ -143,6 +144,7 @@ export const projectStore = {
Vue.set(state.activeComponent, 'properties', _properties);
}
// 同步修改镜像节点
state.activeComponentCopy = _.cloneDeep(state.activeComponent);
},
/**
......@@ -434,7 +436,7 @@ export const projectStore = {
let _scripts = _.cloneDeep(state.activeComponent.scripts || []);
_scripts.push({
script: script,
options: {}
props: {}
});
commit('modifyActiveView', {
scripts: _scripts
......
src/utils/common.js
View file @ ef45b774
......@@ -26,8 +26,8 @@ export const componentsMap = [
// 属性的计算方法
const propsComputeRules = {
x: 'add',
y: 'add',
left: 'add',
top: 'add',
rotation: 'add',
scaleX: 'multi',
scaleY: 'multi',
......@@ -47,8 +47,8 @@ function invalidAttr(key, value) {
// 属性简称 对照表
const attrShortMapper = {
x: 'left',
y: 'top',
// x: 'left',
// y: 'top',
align: 'text-align',
size: 'font-size',
alpha: 'opacity',
......@@ -60,12 +60,14 @@ const attrShortMapper = {
// 编辑时想拖拽组件需要生成的css属性
// 只需要位置，不需要来源透明度等等
const operatProps = ['x', 'y', 'left', 'top', 'width', 'height', 'rotation'];
const operatProps = ['left', 'top','right', 'bottom', 'width', 'height', 'rotation'];
// 属性单位 对照表, 如果是数值的时候需要添加单位
const attrUnitMapper = {
x: 'px',
y: 'px',
left: 'px',
top: 'px',
right: 'px',
bottom: 'px',
width: 'px',
height: 'px',
fontSize: 'px',
......@@ -136,18 +138,22 @@ export const flattenViews = function (views) {
*/
function inheritProps(props, parent) {
_.forIn(parent, (value, key) => {
let _pValue = parent[key];
if (_pValue === null || _pValue === undefined) {
return ;
}
let rule = propsComputeRules[key];
// 加法
if (rule === 'add') {
props[key] += parent[key];
props[key] += _pValue;
}
// 乘法
if (rule === 'multi') {
props[key] *= parent[key];
props[key] *= _pValue;
}
// 可见，特殊处理
if (rule === 'visible') {
props[key] = !props[key] || !parent[key] ? false : true;
props[key] = !props[key] || !_pValue ? false : true;
}
});
}
......@@ -175,10 +181,14 @@ function completeSelfProps(component) {
export const styles = {
getStyles(value, key) {
const attr = attrShortMapper[key] || changeCamle(key);
const unit = attrUnitMapper[key] || '';
let unit = attrUnitMapper[key] || '';
if (invalidAttr(key, value)) return '';
// if ((key === 'width' || key === 'height') && (value + '').indexOf('%') > -1) {
// unit = '';
// }
switch (attr) {
case 'rotation':
return ['transform', [`rotate(${value}deg)`]]; //`transform: rotate(${value}deg);`;
......@@ -267,7 +277,7 @@ export const styles = {
});
result += `background-position: center;background-size: 100% 100%;`
// console.log('getComponentStyle', result);
// console.log('getComponentStyle',component.name, result);
return result;
}
}
......
src/utils/properties.js
View file @ ef45b774
......@@ -3,15 +3,25 @@
export default {
node: {
groupName: '基础',
x: {
title: 'X坐标',
left: {
title: '左边距',
type: 'inputNumber',
value: 0
value: undefined,
},
top: {
title: '上边距',
type: 'inputNumber',
value: undefined,
},
y: {
title: 'Y坐标',
right: {
title: '右边距',
type: 'inputNumber',
value: 0
value: undefined,
},
bottom: {
title: '下边距',
type: 'inputNumber',
value: undefined,
},
width: {
title: '宽度',
......@@ -23,6 +33,18 @@ export default {
type: 'inputNumber',
value: 1
},
horizonCenter: {
title: '水平偏移',
type: 'inputNumber',
value: undefined,
desc: '相对于父元素中心点的水平偏移，0为正中心'
},
verticalCenter: {
title: '垂直偏移',
type: 'inputNumber',
value: undefined,
desc: '相对于父元素中心点的垂直偏移，0为正中心'
},
rotation: {
title: '旋转',
type: 'inputNumber',
......@@ -66,27 +88,8 @@ export default {
width: 40
},
value: true
},
left: {
title: '左边距',
type: 'inputNumber',
value: undefined,
},
top: {
title: '上边距',
type: 'inputNumber',
value: undefined,
},
right: {
title: '右边距',
type: 'inputNumber',
value: undefined,
},
bottom: {
title: '下边距',
type: 'inputNumber',
value: undefined,
},
}
},
label: {
groupName: '文本',
......
src/views/Editor/Inspector/PropsTab.vue
View file @ ef45b774
......@@ -15,7 +15,12 @@
<template v-for="(p, key) in cmpProps">
<el-form-item v-if="key !== 'groupName'" :id="activeComponent.uuid + '-' + key" :key="activeComponent.uuid + key" :label="p.title">
<!-- {{key}} -->
<dynamic-component :component-value="getPropValue(p, key)" :component-props="getPropProps(p)" :component-type="getPropCmpType(p)" @onChange="v => handlePropertiesChange(key, v)"></dynamic-component>
<el-tooltip :disabled="!p.desc" placement="top-start">
<div slot="content">{{p.desc}}</div>
<div>
<dynamic-component :component-value="getPropValue(p, key)" :component-props="getPropProps(p)" :component-type="getPropCmpType(p)" @onChange="v => handlePropertiesChange(key, v)"></dynamic-component>
</div>
</el-tooltip>
</el-form-item>
</template>
</el-collapse-item>
......@@ -160,6 +165,8 @@ export default {
return getCmpProps(this.activeComponent.type);
},
scripts: function() {
console.log('scripts', this.$store.state.env.scripts);
return this.$store.state.env.scripts;
}
},
......@@ -201,11 +208,11 @@ export default {
* 事件属性发生改变
*/
handleScriptChange(index, key, v) {
let _options = {};
_options[key] = v;
let _props = {};
_props[key] = v;
let _scripts = _.cloneDeep(this.activeComponent.scripts);
let _script = _scripts[index];
_script.options = _.assign(_script.options, _options);
_script.props = _.assign(_script.props, _props);
_scripts[index] = _script;
this.$store.dispatch('modifyActiveView', {
scripts: _scripts
......@@ -239,7 +246,7 @@ export default {
getScriptValue(item, key, index) {
let _script = this.activeComponent.scripts[index];
// let result =
return _script.options[key] || item.default;
return _script.props[key] || item.default;
},
getScriptProps(item, index) {
let _type = item.type;
......@@ -272,14 +279,12 @@ export default {
return scriptTypeMap[_type].component;
},
getScriptName(id) {
console.log('getScriptName', id);
let _script = this.scripts.find(script => script.id === id);
return _script ? _script.name : '';
},
getScriptOptions(id) {
let _script = this.scripts.find(script => script.id === id);
return _script ? _script.options : {};
return _script ? _script.props : {};
}
}
};
......
src/views/Editor/components/drawPanel.vue
View file @ ef45b774
......@@ -51,8 +51,8 @@ export default {
if (_prop.x !== x || _prop.y !== y || _prop.width !== w || _prop.height !== h) {
this.$store.dispatch('modifyCopyProperties', {
x: x,
y: y,
left: x,
top: y,
width: w,
height: h
});
......@@ -68,8 +68,8 @@ export default {
if (_prop.x !== x || _prop.y !== y) {
this.$store.dispatch('modifyCopyProperties', {
x: x,
y: y
left: x,
top: y
});
// console.log('handleDragging', x, y);
}
......@@ -80,10 +80,10 @@ export default {
}
let _prop = this.activeComponent.properties;
if (_prop.x !== x || _prop.y !== y || _prop.width !== w || _prop.height !== h) {
if (_prop.left !== x || _prop.top !== y || _prop.width !== w || _prop.height !== h) {
this.$store.dispatch('modifyProperties', {
x: x,
y: y,
left: x,
top: y,
width: w,
height: h
});
......@@ -95,10 +95,10 @@ export default {
}
let _prop = this.activeComponent.properties;
if (_prop.x !== x || _prop.y !== y) {
if (_prop.left !== x || _prop.top !== y) {
this.$store.dispatch('modifyProperties', {
x: x,
y: y
left: x,
top: y
});
}
}
......@@ -118,8 +118,8 @@ export default {
const _node = properties.node;
// console.log('********', _props);
let result = {
x: _props.x || _node.x.value,
y: _props.y || _node.y.value,
x: _props.left || _node.left.value,
y: _props.top || _node.top.value,
w: _props.width || _node.width.value,
h: _props.height || _node.height.value
};
......
src/views/Editor/components/dynamicComponent.vue
View file @ ef45b774
<template>
<component v-if="cmpValue !== null" :is="componentType" v-model="cmpValue" v-bind="componentProps" @change="v => handleChange(v)" @input="v=>handleInput(v)">
<component v-if="cmpValue !== null" :is="componentType" v-model="cmpValue" v-bind="componentProps" @change="v => handleChange(v)" @input="v=>handleInput(v)">
<d-slot
v-for="oitem in componentProps.options"
:is="componentProps.slotComponent"
......
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