编辑器添加属性和样式配置
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