From 8722c53cdcb78d8e9c3c9cb0fd08295e1f89971a Mon Sep 17 00:00:00 2001
From: betty2310 <huynh.dh2310@gmail.com>
Date: Sat, 11 May 2024 14:35:36 +0700
Subject: [PATCH] feat(components): support Diode model 1N914

---
 src/CustomEdge.vue                          |  2 +-
 src/assets/svgs/Diode.svg                   |  5 ++
 src/components/CircuitsListBar.vue          |  8 +++
 src/components/MainCircuit.vue              | 16 +++---
 src/components/PropertiesListBar.vue        | 12 ++++-
 src/components/circuits/DiodeNode.vue       | 56 +++++++++++++++++++++
 src/components/properties/DiodeProperty.vue | 37 ++++++++++++++
 src/logic/main.ts                           | 25 +++++----
 src/logic/models/Diode.ts                   |  9 ++++
 src/logic/models/index.ts                   |  5 +-
 src/types/index.ts                          | 21 +++++++-
 11 files changed, 168 insertions(+), 28 deletions(-)
 create mode 100644 src/assets/svgs/Diode.svg
 create mode 100644 src/components/circuits/DiodeNode.vue
 create mode 100644 src/components/properties/DiodeProperty.vue
 create mode 100644 src/logic/models/Diode.ts

diff --git a/src/CustomEdge.vue b/src/CustomEdge.vue
index 15d7bc1..56d405b 100644
--- a/src/CustomEdge.vue
+++ b/src/CustomEdge.vue
@@ -25,7 +25,7 @@ const turnBack = () => {
     selectedOption.value = '';
     let edge = findEdge(props.id)
     if (edge) {
-        edge.data = '';
+      edge.data = {}
     }
 };
 </script>
diff --git a/src/assets/svgs/Diode.svg b/src/assets/svgs/Diode.svg
new file mode 100644
index 0000000..c37a8e1
--- /dev/null
+++ b/src/assets/svgs/Diode.svg
@@ -0,0 +1,5 @@
+<svg width="64" height="32" viewBox="0 0 64 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M46 17V32H48V16.5H64V15.5H48V0H46V15L45.7639 14.882L18 1L16 0V2.23607V15.5H0V16.5H16V29.7639V32L18 31L45.7639 17.118L46 17ZM18 28.7639V3.23607L43.5279 16L18 28.7639Z"
+          fill="black"/>
+</svg>
diff --git a/src/components/CircuitsListBar.vue b/src/components/CircuitsListBar.vue
index 1dc1184..6cf9ec3 100644
--- a/src/components/CircuitsListBar.vue
+++ b/src/components/CircuitsListBar.vue
@@ -37,6 +37,14 @@
         <button
           class="btn"
           :draggable="true"
+          @click="onAutoCreate(CircuitComponent.Diode)"
+          @dragstart="onDragStart($event, CircuitComponent.Diode)"
+        >
+          Diode
+        </button>
+        <button
+          :draggable="true"
+          class="btn"
           @click="onAutoCreate(CircuitComponent.DCVoltageSource)"
           @dragstart="onDragStart($event, CircuitComponent.DCVoltageSource)"
         >
diff --git a/src/components/MainCircuit.vue b/src/components/MainCircuit.vue
index f119a88..42f8caa 100644
--- a/src/components/MainCircuit.vue
+++ b/src/components/MainCircuit.vue
@@ -1,13 +1,7 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import { Background } from '@vue-flow/background'
-import {
-  ConnectionLineType,
-  VueFlow,
-  useVueFlow,
-  type DefaultEdgeOptions,
-  type Node
-} from '@vue-flow/core'
+import { ConnectionLineType, type DefaultEdgeOptions, type Node, useVueFlow, VueFlow } from '@vue-flow/core'
 import useDragAndDrop from '@/hooks/useDnDCircuitComponent'
 import useCircuitStore from '@/stores/circuitStore'
 
@@ -18,9 +12,9 @@ import ACVoltage from '@/components/circuits/sources/ACVoltage.vue'
 
 import { type ComponentData } from '@/types'
 import CustomEdge from '@/CustomEdge.vue'
-import { obj } from '@/stores/exampleFlowObject'
 import GroundNode from '@/components/circuits/GroundNode.vue'
 import InductorNode from '@/components/circuits/passive/InductorNode.vue'
+import DiodeNode from '@/components/circuits/DiodeNode.vue'
 
 type NodeTypes = 'resistor' | 'voltagesource' | 'ground'
 
@@ -100,6 +94,10 @@ onNodeClick((event) => {
       <InductorNode v-bind="inductorNodeProps" />
     </template>
 
+    <template #node-diode="diodeNodeProps">
+      <DiodeNode v-bind="diodeNodeProps" />
+    </template>
+
     <template #node-voltagesource="voltagesourceNodeProps">
       <VoltageSource v-bind="voltagesourceNodeProps" />
     </template>
diff --git a/src/components/PropertiesListBar.vue b/src/components/PropertiesListBar.vue
index ab4528f..8b05743 100644
--- a/src/components/PropertiesListBar.vue
+++ b/src/components/PropertiesListBar.vue
@@ -45,18 +45,28 @@
       <div v-else-if="props.selectedComponent.type == CircuitComponent.Inductor">
         <InductorProperty v-bind="props.selectedComponent.data as InductorData" />
       </div>
+      <div v-else-if="props.selectedComponent.type == CircuitComponent.Diode">
+        <DiodeProperty v-bind="props.selectedComponent.data as DiodeData" />
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { type Node } from '@vue-flow/core'
-import { CircuitComponent, type ACVoltageSourceData, type CapacitorData, type InductorData } from '@/types'
+import {
+  type ACVoltageSourceData,
+  type CapacitorData,
+  CircuitComponent,
+  type DiodeData,
+  type InductorData
+} from '@/types'
 import ResistorProperty from './properties/ResistorProperty.vue'
 import CapacitorProperty from './properties/CapacitorProperty.vue'
 import VoltageSourceProperty from './properties/VoltageSourceProperty.vue'
 import ACVoltageSourceProperty from './properties/ACVoltageSourceProperty.vue'
 import InductorProperty from '@/components/properties/InductorProperty.vue'
+import DiodeProperty from '@/components/properties/DiodeProperty.vue'
 
 interface Props {
   selectedComponent: Node | null
diff --git a/src/components/circuits/DiodeNode.vue b/src/components/circuits/DiodeNode.vue
new file mode 100644
index 0000000..0aa36e0
--- /dev/null
+++ b/src/components/circuits/DiodeNode.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue'
+import { Handle, type NodeProps, Position, useVueFlow } from '@vue-flow/core'
+import { NodeToolbar } from '@vue-flow/node-toolbar'
+import IconComponent from '@/assets/svgs/Diode.svg?component'
+
+import type { DiodeData } from '@/types'
+
+const props = defineProps<NodeProps<DiodeData>>()
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const { updateNodeData, onNodeClick, removeNodes } = useVueFlow()
+
+onMounted(() => {
+  const id = props.id.split(' ')[1]
+  updateNodeData<DiodeData>(props.id, {
+    id: `D${id}`,
+    type: 'diode',
+    description: 'Diode model 1N914',
+    toolbarPosition: Position.Right,
+    toolbarVisible: false
+  })
+})
+const toolbarVisible = ref(props.data.toolbarVisible)
+
+onNodeClick((event) => {
+  if (event.node.id !== props.id) return
+  toolbarVisible.value = !toolbarVisible.value
+})
+
+const handleRemoveNode = () => {
+  removeNodes(props.id, true)
+}
+</script>
+
+<template>
+  <div class="font-mono">{{ props.data.id }}</div>
+  <NodeToolbar
+    :is-visible="toolbarVisible"
+    :position="data.toolbarPosition"
+    style="display: flex; gap: 0.5rem; align-items: center"
+  >
+    <div class="flex flex-col gap-2">
+      <button class="btn btn-error" @click="handleRemoveNode">x</button>
+    </div>
+  </NodeToolbar>
+
+  <IconComponent />
+  &#160;
+
+  <Handle :position="Position.Left" type="source" />
+  <Handle :position="Position.Right" type="target" />
+</template>
diff --git a/src/components/properties/DiodeProperty.vue b/src/components/properties/DiodeProperty.vue
new file mode 100644
index 0000000..e0fb839
--- /dev/null
+++ b/src/components/properties/DiodeProperty.vue
@@ -0,0 +1,37 @@
+<template>
+  <!--  <div class="flex items-center justify-between mx-4">-->
+  <!--    <label for="input-field" class="mr-2">Diode</label>-->
+  <!--    <div class="relative">-->
+  <!--      <input-->
+  <!--        type="number"-->
+  <!--        id="input-field"-->
+  <!--        class="px-3 py-2 input input-bordered w-auto"-->
+  <!--        v-model="inductance"-->
+  <!--        @change="handleUpdate"-->
+  <!--      />-->
+  <!--      <span class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500">H</span>-->
+  <!--    </div>-->
+  <!--  </div>-->
+</template>
+
+<script lang="ts" setup>
+import type { DiodeData } from '@/types'
+
+const props = defineProps<DiodeData>()
+
+// const inductance = ref(props.inductance)
+// watch(
+//   () => props.inductance,
+//   (value) => {
+//     inductance.value = value
+//   }
+// )
+//
+// const circuitStore = useCircuitStore()
+//
+// function handleUpdate() {
+//   const node = circuitStore.getSelectedNode()
+//   if (!node) return
+//   node.data.inductance = inductance.value
+// }
+</script>
diff --git a/src/logic/main.ts b/src/logic/main.ts
index 836f976..2edbc28 100644
--- a/src/logic/main.ts
+++ b/src/logic/main.ts
@@ -1,15 +1,7 @@
 import type { Edge, FlowExportObject, Node } from '@vue-flow/core'
 import useRunStore from '@/stores/runStore'
-import {
-  ACVoltageSource,
-  Capacitor,
-  DCVoltageSource,
-  Ground,
-  Resistor,
-  Component,
-  Inductor
-} from './models'
-import { CircuitComponent, type ACVoltageSourceData } from '@/types'
+import { ACVoltageSource, Capacitor, Component, DCVoltageSource, Diode, Ground, Inductor, Resistor } from './models'
+import { type ACVoltageSourceData, CircuitComponent } from '@/types'
 
 function convertGraphToNetlist(circuit: FlowExportObject): string {
   const nodeMap: { [nodeId: string]: Component } = {}
@@ -34,6 +26,9 @@ function convertGraphToNetlist(circuit: FlowExportObject): string {
       case CircuitComponent.DCVoltageSource:
         component = new DCVoltageSource(`V${++idSourceComponent}`, node.data.Dc)
         break
+      case CircuitComponent.Diode:
+        component = new Diode(node.data.id)
+        break
       case CircuitComponent.output:
         component = new Ground(node.id)
         break
@@ -52,16 +47,16 @@ function convertGraphToNetlist(circuit: FlowExportObject): string {
     nodeMap[node.id] = component
   })
 
-  // Update component connections based on edges
   let edgeId = 0
   circuit.edges.forEach((edge: Edge) => {
     const sourceNode = nodeMap[edge.source]
     const targetNode = nodeMap[edge.target]
 
     if (targetNode instanceof Ground || sourceNode instanceof Ground) {
-      edge.data.id = 0
+      console.log(typeof edge.data)
+      edge.data.id = '0'
     } else {
-      edge.data.id = ++edgeId
+      edge.data.id = `${++edgeId}`
     }
 
     sourceNode.neg = edge.data.id
@@ -80,6 +75,8 @@ function convertGraphToNetlist(circuit: FlowExportObject): string {
       netlist.push(`${component.id} ${component.pos} ${component.neg} ${component.capacitance}`)
     } else if (component instanceof Inductor) {
       netlist.push(`${component.id} ${component.pos} ${component.neg} ${component.inductance}`)
+    } else if (component instanceof Diode) {
+      netlist.push(`${component.id} ${component.pos} ${component.neg} 1N914`)
     } else if (component instanceof DCVoltageSource) {
       netlist.push(`${component.id} ${component.pos} ${component.neg} ${component.voltage}`)
     } else if (component instanceof ACVoltageSource) {
@@ -127,6 +124,8 @@ function handleAPI(circuit: FlowExportObject) {
   const title = 'Circuit Analysis\n'
   netlist = title + netlist
   const exportNodes = getAnalysisType(circuit.edges)
+
+  netlist = netlist + '\n.model 1N914 D(Is=1e-14 Rs=0 N=1 Bv=1e30 Cjo=0 M=0.5 tt=0)'
   netlist = netlist + `\n.END`
   const mode = useRunStore().getMode()
 
diff --git a/src/logic/models/Diode.ts b/src/logic/models/Diode.ts
new file mode 100644
index 0000000..096e23f
--- /dev/null
+++ b/src/logic/models/Diode.ts
@@ -0,0 +1,9 @@
+import { Component } from '@/logic/models/Component'
+
+export class Diode extends Component {
+  // TODO: diode have model
+
+  constructor(id: string) {
+    super(id)
+  }
+}
\ No newline at end of file
diff --git a/src/logic/models/index.ts b/src/logic/models/index.ts
index a3d6a7c..2d0245c 100644
--- a/src/logic/models/index.ts
+++ b/src/logic/models/index.ts
@@ -1,6 +1,7 @@
 import { Component } from './Component'
-import { Resistor, Capacitor, Inductor } from './Passive'
+import { Capacitor, Inductor, Resistor } from './Passive'
 import { Ground } from './Ground'
+import { Diode } from './Diode'
 import { ACVoltageSource, DCVoltageSource } from './Sources'
 
-export { Component, Resistor, Capacitor, Inductor,  DCVoltageSource, ACVoltageSource, Ground }
+export { Component, Resistor, Capacitor, Inductor, DCVoltageSource, ACVoltageSource, Ground, Diode }
diff --git a/src/types/index.ts b/src/types/index.ts
index 3f7d398..ebbdffb 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,4 +1,5 @@
 import type { Position } from '@vue-flow/core'
+import { SimulationMode } from './SimulationMode'
 
 enum CircuitComponent {
   Ground = 'ground',
@@ -7,6 +8,7 @@ enum CircuitComponent {
   ACVoltageSource = 'acvoltagesource',
   Capacitor = 'capacitor',
   Inductor = 'inductor',
+  Diode = 'diode',
   output = 'output'
 }
 
@@ -42,8 +44,23 @@ interface InductorData extends ComponentData {
   inductance: number
 }
 
-export type { ComponentData, VoltageSourceData, ResistorData, ACVoltageSourceData, CapacitorData, InductorData }
+interface DiodeData extends ComponentData {
+  IS?: string,
+  RS?: string,
+  N?: string,
+  BV?: string,
+  IBV?: string,
+}
+
+export type {
+  ComponentData,
+  VoltageSourceData,
+  ResistorData,
+  ACVoltageSourceData,
+  CapacitorData,
+  InductorData,
+  DiodeData
+}
 export { CircuitComponent }
 
-import { SimulationMode } from './SimulationMode'
 export { SimulationMode }