编辑器添加属性和样式配置
suixy
1 month ago
parent
ec693aad62
commit
3dc02c0ec1
@ -0,0 +1,28 @@
|
|||||||
|
<template>
|
||||||
|
<div style="pointer-events: none">
|
||||||
|
<div class="custom-node">
|
||||||
|
<div
|
||||||
|
class="area"
|
||||||
|
:style="`width:${props.pageData?.width || '100px'};height:${props.pageData?.height || '100px'};border: 1px solid #fff;`"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { defineProps } from 'vue';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
pageData: {
|
||||||
|
type: Object,
|
||||||
|
required: false
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.area {
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-color: #0000;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,88 @@
|
|||||||
|
<template>
|
||||||
|
<div :style="{ width: props.dimensions.width * props.ratioWidth + 'px', height: props.dimensions.height * props.ratioHeight + 'px' }">
|
||||||
|
<NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#000" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="custom-node"
|
||||||
|
:style="{
|
||||||
|
width: props.dimensions.width * props.ratioWidth + 'px',
|
||||||
|
lineHeight: props.dimensions.height * props.ratioHeight + 'px',
|
||||||
|
height: props.dimensions.height * props.ratioHeight + 'px',
|
||||||
|
pointerEvents: props.isView ? 'auto' : 'none'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<template v-for="i in 4"></template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { defineEmits, defineProps, ref } from 'vue';
|
||||||
|
import { NodeResizer } from '@vue-flow/node-resizer';
|
||||||
|
import { Handle, Position } from '@vue-flow/core';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
ratioWidth: {
|
||||||
|
type: Number,
|
||||||
|
required: false,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
ratioHeight: {
|
||||||
|
type: Number,
|
||||||
|
required: false,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
isView: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
inputData: {
|
||||||
|
type: Object,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
isHideHandle: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
dimensions: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
networkData: {
|
||||||
|
type: Array,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
pNode: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(props);
|
||||||
|
|
||||||
|
const list = ref([{}]);
|
||||||
|
watch(
|
||||||
|
props.pNode.data.options,
|
||||||
|
(obj1, obj2) => {
|
||||||
|
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ deep: true }
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.custom-node {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,107 @@
|
|||||||
|
<template>
|
||||||
|
<div :style="{ width: props.dimensions.width * props.ratioWidth + 'px', height: props.dimensions.height * props.ratioHeight + 'px' }">
|
||||||
|
<NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#000" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="custom-node"
|
||||||
|
:style="{
|
||||||
|
textAlign: props.data.style.align || 'center',
|
||||||
|
width: props.dimensions.width * props.ratioWidth + 'px',
|
||||||
|
lineHeight: props.dimensions.height * props.ratioHeight + 'px',
|
||||||
|
height: props.dimensions.height * props.ratioHeight + 'px',
|
||||||
|
pointerEvents: props.isView ? 'auto' : 'none'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
:style="{
|
||||||
|
whiteSpace: props.data.style.whiteSpace || 'nowrap',
|
||||||
|
color: props.data.style.color,
|
||||||
|
fontSize: props.dimensions.height * props.ratioHeight + 'px'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ format(props.data.options.value) || (!props.isView ? '文字' : '123') }}</span
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { defineEmits, defineProps, ref } from 'vue';
|
||||||
|
import { NodeResizer } from '@vue-flow/node-resizer';
|
||||||
|
import { Handle, Position } from '@vue-flow/core';
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
ratioWidth: {
|
||||||
|
type: Number,
|
||||||
|
required: false,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
ratioHeight: {
|
||||||
|
type: Number,
|
||||||
|
required: false,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
isView: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
inputData: {
|
||||||
|
type: Object,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
id: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
isHideHandle: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
selected: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
dimensions: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
networkData: {
|
||||||
|
type: Array,
|
||||||
|
required: false
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const format = (e) => {
|
||||||
|
if (!e) return '';
|
||||||
|
return e.replace(/\$\{(.*?)\}/g, (match, key) => {
|
||||||
|
const keys = key.split(',');
|
||||||
|
console.log(props.networkData);
|
||||||
|
let result = props.networkData.find((v) => v.id === props.data.options.id)?.options || {};
|
||||||
|
|
||||||
|
for (let k of keys) {
|
||||||
|
result = result?.[k];
|
||||||
|
|
||||||
|
if (result === undefined) return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => [JSON.parse(JSON.stringify(''))],
|
||||||
|
async (obj1, obj2) => {
|
||||||
|
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ deep: true, immediate: true }
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.custom-node {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,80 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="center" ref="centerRef">
|
||||||
|
<div
|
||||||
|
class="flow"
|
||||||
|
:style="{
|
||||||
|
transform: `scale(${scaleX}, ${scaleY})`,
|
||||||
|
transformOrigin: 'left top'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style="position: absolute"
|
||||||
|
v-for="i in nodes"
|
||||||
|
:style="{
|
||||||
|
left: (i.position?.x / 960) * 100 + '%',
|
||||||
|
top: (i.position?.y / 540) * 100 + '%'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<CircuitComponentNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" v-bind="i" :is-view="true" v-if="i.type === 'circuitComponent'" />
|
||||||
|
<LineNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" v-bind="i" :is-view="true" v-if="i.type === 'line'" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="textFlow">
|
||||||
|
<div
|
||||||
|
style="position: absolute"
|
||||||
|
v-for="i in nodes"
|
||||||
|
:style="{
|
||||||
|
left: (i.position?.x / 960) * 100 + '%',
|
||||||
|
top: (i.position?.y / 540) * 100 + '%'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<TextNode :ratioWidth="ratioWidth" :ratioHeight="ratioHeight" v-bind="i" :is-view="true" v-if="i.type === 'text1'" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import CircuitComponentNode from './nodes/circuitComponent.vue';
|
||||||
|
import LineNode from './nodes/line.vue';
|
||||||
|
import TextNode from './nodes/text.vue';
|
||||||
|
|
||||||
|
const nodes = ref([]);
|
||||||
|
const centerRef = ref(null);
|
||||||
|
const ratioWidth = ref(1);
|
||||||
|
const ratioHeight = ref(1);
|
||||||
|
const scaleX = ref(1);
|
||||||
|
const scaleY = ref(1);
|
||||||
|
onMounted(() => {
|
||||||
|
nodes.value = JSON.parse(localStorage.getItem('NODES') || '[]');
|
||||||
|
const rect = centerRef.value.getBoundingClientRect();
|
||||||
|
scaleX.value = rect.width / 960;
|
||||||
|
scaleY.value = rect.height / 540;
|
||||||
|
|
||||||
|
// const { offsetWidth, offsetHeight } = centerRef.value;
|
||||||
|
// ratioWidth.value = offsetWidth / 960;
|
||||||
|
// ratioHeight.value = offsetHeight / 540;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.center {
|
||||||
|
width: 1000px;
|
||||||
|
height: 400px;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow {
|
||||||
|
position: absolute;
|
||||||
|
width: 960px;
|
||||||
|
height: 540px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textFlow {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue