Skip to content

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

feat: 调整编辑区拖拽组件

parent acd1cda3
Hide whitespace changes
Inline Side-by-side
Showing with 241 additions and 24 deletions
src/components/customElement/node/index.vue
View file @ 0fcc4e27
<template>
<div class="zero-custom-cmp zero-custom-node" v-html="selfText"></div>
<div :style="customStyle" class="zero-custom-cmp zero-custom-node" v-html="selfText"></div>
</template>
<style>
.zero-custom-cmp{
position: absolute;
box-sizing: border-box;
}
</style>
<script>
export default {
name: 'customNode',
props: {
customStyle: {
type: String,
default: ''
},
properties: {
type: Object,
default: () => {}
......
src/main.js
View file @ 0fcc4e27
......@@ -10,9 +10,6 @@ import './assets/style.css'
import './plugins/element.js'
import './themes/light/index.scss'
import VueDraggableResizable from 'duiba-draggable-resizable';
Vue.component('vue-draggable-resizable', VueDraggableResizable);
new Vue({
router,
store,
......
src/utils/common.js
View file @ 0fcc4e27
......@@ -47,6 +47,10 @@ const attrShortMapper = {
'source': 'background-image'
};
// 编辑时想拖拽组件需要生成的css属性
// 只需要位置，不需要来源透明度等等
const operatProps = ['x', 'y', 'width', 'height', 'rotate'];
// 属性单位 对照表, 如果是数值的时候需要添加单位
const attrUnitMapper = {
x: 'px',
......@@ -169,10 +173,10 @@ export const styles = {
return ['transform', [`rotate(${value}deg)`]]; //`transform: rotate(${value}deg);`;
case 'background-image':
return ['background-image', [`url(${value})`]]; //`background-image: url(${value});background-position:center;background-size:contain;`;
case 'scale-x':
return ['transform', [`scaleX(${value})`]]; //`transform: scaleX(${value});`;
case 'scale-y':
return ['transform', [`scaleY(${value})`]]; //`transform: scaleY(${value});`;
// case 'scale-x':
// return ['transform', [`scaleX(${value})`]]; //`transform: scaleX(${value});`;
// case 'scale-y':
// return ['transform', [`scaleY(${value})`]]; //`transform: scaleY(${value});`;
case 'visible':
return ['display', [value ? 'block' : 'none']]; // `display: ${value ? 'block' : 'none'};`;
default:
......@@ -208,7 +212,10 @@ export const styles = {
* 根据组件数据，生成完整的style
* @param {*} component
*/
getComponentStyle(component, project, componentList) {
getComponentStyle(component, project, componentList, onlyOpera) {
if (!component || !component.uuid) {
return '';
}
// debugger;
let result = '';
let cmpSelfProps = completeSelfProps(component);
......@@ -223,6 +230,22 @@ export const styles = {
});
}
if (cmpSelfProps.scaleX) {
cmpSelfProps.width *= cmpSelfProps.scaleX;
}
if (cmpSelfProps.scaleY) {
cmpSelfProps.height *= cmpSelfProps.scaleY;
}
if (onlyOpera) {
_.forIn(cmpSelfProps, (val, key) => {
if (operatProps.indexOf(key) === -1) {
delete cmpSelfProps[key];
}
});
}
// console.log('cmpSelfProps after inherit ', cmpSelfProps);
cmpSelfProps = styles.getStylesFromObj(cmpSelfProps, project);
_.forIn(cmpSelfProps, (value, key) => {
......
src/views/Editor/components/drawPanel.vue
View file @ 0fcc4e27
......@@ -6,32 +6,165 @@
:key="item.uuid"
v-for="item in componentList"
>
<wrapper :component-data="item"/>
<wrap :component-data="item"/>
</div>
<template v-if="!!this.activeComponentId">
<vue-draggable-resizable
:prevent-deactivation="true"
class-name="db-draggable"
:min-width="1"
:min-height="1"
:z="2"
:active="true"
:style="styleObject"
v-bind="position"
@dragging="handleDragging"
@resizing="handleResize"
@resizestop="resizeStop"
@deactivated="handleDeactivated"
>
</vue-draggable-resizable>
</template>
</div>
<div class="zero-draw-panel-body"></div>
</div>
</template>
<style lang="less">
</style>
<script>
import { mapGetters } from 'vuex';
import wrapper from './wrapper';
import { mapState, mapGetters } from 'vuex';
import wrap from './wrap';
import { styles, getParentCmps } from '../../../utils/common';
import properties from '../../../utils/properties';
import VueDraggableResizable from 'vue-draggable-resizable';
export default {
components: { wrapper },
components: { wrap, VueDraggableResizable },
methods: {
activeComponent(item) {
this.$store.dispatch('activeComponent', item);
handleDeactivated() {
// this.$store.dispatch('changeEditaleStatus', false);
},
handleResize(x, y, w, h) {
if (!this.active || !this.activeComponentId) {
return false;
}
let _prop = this.activeComponent.properties;
if (_prop.x !== x || _prop.y !== y || _prop.width !== w || _prop.height !== h) {
this.$store.dispatch('modifyProperties', {
x: x,
y: y,
width: w,
height: h
});
console.log('handleResize', x, y, w, h);
}
},
handleDragging(x, y) {
if (!this.active || !this.activeComponentId) {
return false;
}
let _prop = this.activeComponent.properties;
if (_prop.x !== x || _prop.y !== y) {
this.$store.dispatch('modifyProperties', {
x: x,
y: y
});
console.log('handleDragging', x, y);
}
},
changeActiveIdList(item) {
this.$store.commit('changeActiveIdList', item);
resizeStop(x, y, w, h) {
console.log('resizeStop', x, y, w, h);
}
},
computed: {
...mapGetters(['componentList'])
...mapState(['project']),
...mapGetters(['activeComponent', 'componentList', 'activeComponentId']),
active() {
return !!this.activeComponentId;
// return this.activeComponentId === (this.activeComponent || {}).uuid;
},
styleObject() {
return styles.getComponentStyle(this.activeComponent, this.project, this.componentList, true);
},
position() {
let _props = this.activeComponent.properties || {};
const _node = properties.node;
// console.log('********', _props);
let result = {
x: _props.x || _node.x.value,
y: _props.y || _node.y.value,
w: _props.width || _node.width.value,
h: _props.height || _node.height.value
};
console.log('####position', result);
return result;
}
}
};
</script>
<style lang="scss">
.db-draggable {
position: absolute;
box-sizing: border-box;
&.active {
border: 1px dashed black;
}
}
.handle {
box-sizing: border-box;
display: none;
position: absolute;
width: 10px;
height: 10px;
font-size: 1px;
background: #EEE;
border: 1px solid #333;
}
.handle-tl {
top: -10px;
left: -10px;
cursor: nw-resize;
}
.handle-tm {
top: -10px;
left: 50%;
margin-left: -5px;
cursor: n-resize;
}
.handle-tr {
top: -10px;
right: -10px;
cursor: ne-resize;
}
.handle-ml {
top: 50%;
margin-top: -5px;
left: -10px;
cursor: w-resize;
}
.handle-mr {
top: 50%;
margin-top: -5px;
right: -10px;
cursor: e-resize;
}
.handle-bl {
bottom: -10px;
left: -10px;
cursor: sw-resize;
}
.handle-bm {
bottom: -10px;
left: 50%;
margin-left: -5px;
cursor: s-resize;
}
.handle-br {
bottom: -10px;
right: -10px;
cursor: se-resize;
}
</style>
src/views/Editor/components/wrap.vue 0 → 100644
View file @ 0fcc4e27
<template>
<!-- <vue-draggable-resizable
:minw="1"
:minh="1"
:z="2"
:style="styleObject"
:class="[active ? 'choosed-cmp' : 'unchoosed-cmp', isTyping && 'isTyping']"
v-bind="position"
@dragging="handleDragging"
@resizing="handleResize"
@deactivated="handleDeactivated"
>
<div
class="sword-compomnent-content-wrapper"
:contenteditable="false"
@dblclick="handleEnableInput"
@input="handleInput"
@keyup.delete.prevent="changeEditRange"
>
</div>
</vue-draggable-resizable> -->
<custom-node :custom-style="styleObject" :properties="componentData.properties"></custom-node>
</template>
<script>
import { mapState, mapGetters } from 'vuex';
import { styles } from '../../../utils/common';
import customNode from '../../../components/customElement/node/index.vue';
export default {
props: {
componentData: {
type: Object,
require: true
}
},
data() {
return {};
},
components: {
'custom-node': customNode
},
computed: {
...mapState(['project']),
...mapGetters(['componentList']),
styleObject() {
return styles.getComponentStyle(this.componentData, this.project, this.componentList);
}
}
};
</script>
<style>
</style>
src/views/Editor/components/wrapper.vue
View file @ 0fcc4e27
......@@ -76,7 +76,7 @@ export default {
if (!this.active) {
return false;
}
let _prop = this.componentData.properties;
let _prop = this.activeComponentId.properties;
if (_prop.x !== x || _prop.y !== y || _prop.width !== w || _prop.height !== h) {
this.$store.dispatch('modifyProperties', {
......
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