From 309e55dff124a56be9e661c9fb7313699ead704f Mon Sep 17 00:00:00 2001
From: Vinzenz Aubry <vinzenzaubry@gmail.com>
Date: Tue, 12 Sep 2023 17:44:50 -0400
Subject: [PATCH] added back entry node entry handle and new style for entry

---
 caster-editor/src/assets/scss/_vueflow.scss   |  9 ---
 .../src/components/FlowNodeDefault.vue        | 76 +++++++++++--------
 2 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/caster-editor/src/assets/scss/_vueflow.scss b/caster-editor/src/assets/scss/_vueflow.scss
index 0b889e08..2b0bdb1c 100644
--- a/caster-editor/src/assets/scss/_vueflow.scss
+++ b/caster-editor/src/assets/scss/_vueflow.scss
@@ -3,12 +3,3 @@
 .vue-flow__pane.draggable {
   cursor: move !important;
 }
-
-.gencaster-default-node {
-  background-color: $white;
-  border: 1px solid $mainBlack;
-
-  &.selected {
-    box-shadow: 0px 0px 7px 0px $green-light;
-  }
-}
diff --git a/caster-editor/src/components/FlowNodeDefault.vue b/caster-editor/src/components/FlowNodeDefault.vue
index dcd0d3cf..2e7932fd 100644
--- a/caster-editor/src/components/FlowNodeDefault.vue
+++ b/caster-editor/src/components/FlowNodeDefault.vue
@@ -22,7 +22,7 @@ onMounted(() => {
 <template>
   <div
     class="gencaster-default-node"
-    :class="{ selected: selected }"
+    :class="{ selected: selected, entry: data.isEntryNode }"
   >
     <div class="title">
       <p>
@@ -31,10 +31,7 @@ onMounted(() => {
     </div>
 
     <div class="nodes">
-      <div
-        v-if="!data.isEntryNode"
-        class="in-nodes"
-      >
+      <div class="in-nodes">
         <div
           v-for="(inDoor, index) in data.inNodeDoors"
           :key="inDoor.uuid"
@@ -88,6 +85,10 @@ onMounted(() => {
   width: $nodeDefaultWidth;
   display: flex;
   flex-direction: column;
+  background-color: $white;
+  border: 1px solid $mainBlack;
+  border-radius: 2px;
+  overflow: hidden;
 
   .title {
     background-color: $grey-light;
@@ -95,35 +96,48 @@ onMounted(() => {
     padding: 2px 8px 0 8px;
     margin: 0;
   }
-}
 
-.handle {
-  width: 12px;
-  height: 12px;
-  border-radius: 12px;
-  border: 1px solid $mainBlack;
-  background-color: $grey-light;
-}
+  &.selected {
+    box-shadow: 0px 0px 7px 0px $green-light;
+  }
 
-.out-nodes {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-around;
-  width: 100px;
-  margin-bottom: 12px;
+  &.entry {
+    .title {
+      background-color: $green-light;
+      height: 24px;
+      padding: 2px 8px 0 8px;
+      margin: 0;
+    }
+  }
+
+  .handle {
+    width: 12px;
+    height: 12px;
+    border-radius: 12px;
+    border: 1px solid $mainBlack;
+    background-color: $grey-light;
+  }
+
+  .out-nodes {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    width: 100px;
+    margin-bottom: 12px;
 
-  .out-node {
-    span {
-      position: absolute;
-      text-align: right;
-      pointer-events: none;
-      right: 0;
-      height: 20px;
-      width: calc($nodeDefaultWidth - 24px);
-      transform: translateX(-16px) translateY(-5px);
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
+    .out-node {
+      span {
+        position: absolute;
+        text-align: right;
+        pointer-events: none;
+        right: 0;
+        height: 20px;
+        width: calc($nodeDefaultWidth - 24px);
+        transform: translateX(-16px) translateY(-5px);
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
     }
   }
 }