[기능] 노드 리사이저 시각화 (#56)

Terraform-Canvas · Jul 31, 2023 · bf3ea4e · bf3ea4e
2 parents aa687e9 + 111901d
commit bf3ea4e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/src/components/aws/ResourceNodeCommon.vue b/src/components/aws/ResourceNodeCommon.vue
@@ -69,9 +69,17 @@ const onRemove = () => {
             variant="plain"
         />
     </div>
-    <NodeResizer
-        line-style="visibility: hidden"
-        min-width="100"
-        min-height="30"
-    />
+    <NodeResizer min-width="100" min-height="30" />
 </template>
+
+<style>
+.vue-flow__resize-control.line {
+    opacity: 0;
+}
+.vue-flow__resize-control.handle {
+    opacity: 50%;
+    background-color: #252f3e !important;
+    height: 5px !important;
+    width: 5px !important;
+}
+</style>
diff --git a/src/styles/nodeflow.css b/src/styles/nodeflow.css
@@ -13,7 +13,7 @@
     content: '';
     position: absolute;
     top: -10px;
-    left: -1px;
+    left: 3px;
     height: 10px;
     width: 30%;
 }
@@ -44,7 +44,7 @@
     background: #2ca138;
     position: absolute;
     top: -10px;
-    left: -1px;
+    left: 3px;
     height: 10px;
     width: 30%;
 }
@@ -61,7 +61,7 @@
     background: #f68536;
     position: absolute;
     top: -10px;
-    left: -1px;
+    left: 3px;
     height: 10px;
     width: 30%;
 }
@@ -78,7 +78,7 @@
     background: #f68536;
     position: absolute;
     top: -10px;
-    left: -1px;
+    left: 3px;
     height: 10px;
     width: 30%;
 }
@@ -96,7 +96,7 @@
     background: #f68536;
     position: absolute;
     top: -10px;
-    left: -1px;
+    left: 3px;
     height: 10px;
     width: 30%;
 }
@@ -113,7 +113,7 @@
     background: #f68536;
     position: absolute;
     top: -10px;
-    left: -1px;
+    left: 3px;
     height: 10px;
     width: 30%;
 }
@@ -130,7 +130,7 @@
     background: #2ca138;
     position: absolute;
     top: -10px;
-    left: -1px;
+    left: 3px;
     height: 10px;
     width: 50px;
 }
@@ -147,7 +147,7 @@
     background: #2ca138;
     position: absolute;
     top: -10px;
-    left: -1px;
+    left: 3px;
     height: 10px;
     width: 50px;
 }
@@ -164,7 +164,7 @@
     background: #0d7317;
     position: absolute;
     top: -10px;
-    left: -1px;
+    left: 3px;
     height: 10px;
     width: 30%;
 }