energy-visual-editor/src/views/visualEditor/nodes/line.vue

<template>
  <div :style="{ width: props.dimensions.width * props.ratioWidth + 'px', height: props.dimensions.height * props.ratioHeight + 'px' }">
    <NodeResizer color="#000" v-if="!props.isView && !props.isHideHandle && props.selected" />

    <div
      class="custom-node"
      :style="{
        width: props.dimensions.width * props.ratioWidth + 'px',
        height: props.dimensions.height * props.ratioHeight + 'px',
        pointerEvents: props.isView ? 'auto' : 'none'
      }"
    >
      <div :style="lineStyle"></div>
    </div>
  </div>
</template>
<script setup>
import { defineProps } from 'vue';
import { NodeResizer } from '@vue-flow/node-resizer';

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
  }
});

const lineStyle = computed(() => {
  return {
    position: 'absolute',
    top: props.data.style.lineType === 0 ? '50%' : '0%',
    left: props.data.style.lineType === 0 ? '0%' : '50%',
    transform: `${props.data.style.lineType === 0 ? 'translateY(-50%)' : 'translateX(-50%)'} rotate(${props.data.style.rotate}deg)`,
    transformOrigin: `${props.data.style.transformOrigin1} ${props.data.style.transformOrigin2}`,
    backgroundColor: props.data.style.color,
    width: props.data.style.lineType === 0 ? '100%' : `${props.data.style.width}px`,
    height: props.data.style.lineType === 0 ? `${props.data.style.width}px` : '100%'
  };
});

onMounted(() => {});
</script>
<style scoped>
.custom-node {
  position: relative;
}
</style>