<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>
