enhance connector drawing

vsm · Aug 22, 2020 · 015976e · 015976e
1 parent 3a2c0d0
commit 015976e
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 24 deletions.
diff --git a/src/subcomponents/Conn.vue b/src/subcomponents/Conn.vue
@@ -1,24 +1,20 @@
 <template>
-  <g class="conn">
+  <g
+    :class="['conn', {
+      't' : !isList && !isRef,
+      'l' : isList,
+      'r' : isRef,
+      'uc': isUC,
+    }]"
+  >
     <line
-      v-if="drawBack"
+      v-if="!isRef && drawBack"
       :x1="backX1 - lwh"
       :y1="backY + h"
-      :x2="backXM + 0.5"
-      :y2="backY + h"
-      :style="backStyle"
-      :stroke-dasharray="isRef ? sizes.connRefDashes : 'none'"
-      class="back left"
-    />
-    <line
-      v-if="drawBack"
-      :x1="backX2 + lwh + h + h"
-      :y1="backY + h"
-      :x2="backXM - 0.5"
+      :x2="backX2 + lwh + h + h"
       :y2="backY + h"
       :style="backStyle"
-      :stroke-dasharray="isRef ? sizes.connRefDashes : 'none'"
-      class="back right"
+      class="back"
     />
     <line
       v-if="isList && drawBack"
@@ -29,6 +25,26 @@
       :style="backStyle"
       class="back two"
     />
+    <line
+      v-if="isRef && drawBack"
+      :x1="backX1 - lwh"
+      :y1="backY + h"
+      :x2="backXM"
+      :y2="backY + h"
+      :style="backStyle"
+      :stroke-dasharray="sizes.connRefDashes"
+      class="back left"
+    />
+    <line
+      v-if="isRef && drawBack"
+      :x1="backX2 + lwh + h + h"
+      :y1="backY + h"
+      :x2="backXM"
+      :y2="backY + h"
+      :style="backStyle"
+      :stroke-dasharray="sizes.connRefDashes"
+      class="back right"
+    />
     <conn-leg
       v-for="(leg, i) in legs"
       :key="i"
@@ -112,6 +128,7 @@ export default {
 
     isRef () { return this.conn.type == 'R' },
     isList() { return this.conn.type == 'L' },
+    isUC  () { return this.legs.filter(o => o.isUC).length > 0 },
 
     realPos() { return this.conn.pos.filter(p => p >= 0) },
     posA() { return Math.min(...this.realPos) },  // Outer left Term position.

diff --git a/src/subcomponents/ConnLeg.vue b/src/subcomponents/ConnLeg.vue
@@ -5,23 +5,32 @@
     }]"
   >
     <line
-      v-if="showFoot"
+      v-if="!isRef && showFoot"
+      :x1="leg.footX1 + sizes.connFootIndent"
+      :y1="footY"
+      :x2="leg.footX2 - sizes.connFootIndent"
+      :y2="footY"
+      :style="`stroke: ${ footColor }; stroke-width: ${ l.lw };`"
+      class="foot"
+    />
+    <line
+      v-if="isRef && showFoot"
       :x1="footXM"
       :y1="footY"
       :x2="leg.footX1 + sizes.connFootIndent"
       :y2="footY"
       :style="`stroke: ${ footColor }; stroke-width: ${ l.lw };`"
-      :stroke-dasharray="dashes"
+      :stroke-dasharray="sizes.connRefDashes"
       class="foot left"
     />
     <line
-      v-if="showFoot"
+      v-if="isRef && showFoot"
       :x1="footXM"
       :y1="footY"
       :x2="leg.footX2 - sizes.connFootIndent"
       :y2="footY"
       :style="`stroke: ${ footColor }; stroke-width: ${ l.lw };`"
-      :stroke-dasharray="dashes"
+      :stroke-dasharray="sizes.connRefDashes"
       class="foot right"
     />
     <line
@@ -30,7 +39,7 @@
       :x2="x"
       :y2="leg.y1 - l.lwh + (leg.isUC ? l.lw : 0)"
       :style="`stroke: ${ legColor }; stroke-width: ${ l.lw };`"
-      :stroke-dasharray="dashes"
+      :stroke-dasharray="isRef ? sizes.connRefDashes : false"
       class="leg"
     />
     <!-- eslint-disable -->
@@ -100,9 +109,8 @@ export default {
 
 
   computed: {
-    dashes()  {
-      return ['P', 'C'].includes(this.leg.type) ?
-        this.sizes.connRefDashes : 'none';
+    isRef() {
+      return [ 'C', 'P' ].includes(this.leg.type);
     },
 
     x() {
@@ -147,7 +155,7 @@ export default {
     footColor() {
       return this.leg.isUC ?
         this.sizes.connUCFootColor : this.sizes.connFootColor;
-    },
+    }
   }
 };
 </script>