From 4f3c1c4c9f736b7eb28d894c1e101cabcf4fed7e Mon Sep 17 00:00:00 2001
From: Daniel Mulholland <dan.mulholland@gmail.com>
Date: Tue, 14 Nov 2023 08:25:20 +1300
Subject: [PATCH] feat: add more primary apparatus icons

Closes #46.
---
 dist/__snapshots__/oscd-designer.spec.snap.js | 214 ++++++++++-
 icons.ts                                      | 340 ++++++++++++++----
 oscd-designer.spec.ts                         |  11 +-
 oscd-designer.ts                              |   5 +-
 sld-editor.ts                                 | 100 ++++--
 util.ts                                       |  22 ++
 6 files changed, 583 insertions(+), 109 deletions(-)

diff --git a/dist/__snapshots__/oscd-designer.spec.snap.js b/dist/__snapshots__/oscd-designer.spec.snap.js
index e8259e3..7a20558 100644
--- a/dist/__snapshots__/oscd-designer.spec.snap.js
+++ b/dist/__snapshots__/oscd-designer.spec.snap.js
@@ -242,6 +242,16 @@ snapshots["Designer given conducting equipment grounds equipment on connection p
           <Terminal name="erroneous">
           </Terminal>
         </ConductingEquipment>
+        <ConductingEquipment
+          esld:lx="22"
+          esld:ly="8"
+          esld:rot="3"
+          esld:x="22"
+          esld:y="8"
+          name="SMC1"
+          type="SMC"
+        >
+        </ConductingEquipment>
       </Bay>
     </VoltageLevel>
   </Substation>
@@ -409,6 +419,16 @@ snapshots["Designer given conducting equipment connects equipment on connection
           <Terminal name="erroneous">
           </Terminal>
         </ConductingEquipment>
+        <ConductingEquipment
+          esld:lx="22"
+          esld:ly="8"
+          esld:rot="3"
+          esld:x="22"
+          esld:y="8"
+          name="SMC1"
+          type="SMC"
+        >
+        </ConductingEquipment>
       </Bay>
     </VoltageLevel>
   </Substation>
@@ -664,6 +684,16 @@ snapshots["Designer given conducting equipment connects equipment on connect men
           <Terminal name="erroneous">
           </Terminal>
         </ConductingEquipment>
+        <ConductingEquipment
+          esld:lx="22"
+          esld:ly="8"
+          esld:rot="3"
+          esld:x="22"
+          esld:y="8"
+          name="SMC1"
+          type="SMC"
+        >
+        </ConductingEquipment>
         <ConnectivityNode
           name="L2"
           pathName="S1/V2/B1/L2"
@@ -931,6 +961,16 @@ snapshots["Designer given conducting equipment with established connectivity uni
           <Terminal name="erroneous">
           </Terminal>
         </ConductingEquipment>
+        <ConductingEquipment
+          esld:lx="22"
+          esld:ly="8"
+          esld:rot="3"
+          esld:x="22"
+          esld:y="8"
+          name="SMC1"
+          type="SMC"
+        >
+        </ConductingEquipment>
       </Bay>
     </VoltageLevel>
   </Substation>
@@ -1136,6 +1176,16 @@ snapshots["Designer given conducting equipment with established connectivity con
           <Terminal name="erroneous">
           </Terminal>
         </ConductingEquipment>
+        <ConductingEquipment
+          esld:lx="22"
+          esld:ly="8"
+          esld:rot="3"
+          esld:x="22"
+          esld:y="8"
+          name="SMC1"
+          type="SMC"
+        >
+        </ConductingEquipment>
       </Bay>
     </VoltageLevel>
   </Substation>
@@ -1303,6 +1353,16 @@ snapshots["Designer given conducting equipment with established connectivity avo
           <Terminal name="erroneous">
           </Terminal>
         </ConductingEquipment>
+        <ConductingEquipment
+          esld:lx="22"
+          esld:ly="8"
+          esld:rot="3"
+          esld:x="22"
+          esld:y="8"
+          name="SMC1"
+          type="SMC"
+        >
+        </ConductingEquipment>
       </Bay>
     </VoltageLevel>
   </Substation>
@@ -1577,6 +1637,16 @@ snapshots["Designer given conducting equipment with established connectivity kee
           <Terminal name="erroneous">
           </Terminal>
         </ConductingEquipment>
+        <ConductingEquipment
+          esld:lx="22"
+          esld:ly="8"
+          esld:rot="3"
+          esld:x="22"
+          esld:y="8"
+          name="SMC1"
+          type="SMC"
+        >
+        </ConductingEquipment>
       </Bay>
     </VoltageLevel>
   </Substation>
@@ -1742,6 +1812,16 @@ snapshots["Designer given conducting equipment with established connectivity bet
           type="BAT"
         >
         </ConductingEquipment>
+        <ConductingEquipment
+          esld:lx="22"
+          esld:ly="8"
+          esld:rot="3"
+          esld:x="22"
+          esld:y="8"
+          name="SMC1"
+          type="SMC"
+        >
+        </ConductingEquipment>
       </Bay>
     </VoltageLevel>
   </Substation>
@@ -1917,6 +1997,16 @@ snapshots["Designer given conducting equipment with established connectivity bet
           <Terminal name="erroneous">
           </Terminal>
         </ConductingEquipment>
+        <ConductingEquipment
+          esld:lx="22"
+          esld:ly="8"
+          esld:rot="3"
+          esld:x="22"
+          esld:y="8"
+          name="SMC1"
+          type="SMC"
+        >
+        </ConductingEquipment>
         <ConnectivityNode
           name="L2"
           pathName="S1/V2/B1/L2"
@@ -2227,6 +2317,16 @@ snapshots["Designer given conducting equipment with established connectivity bet
           <Terminal name="erroneous">
           </Terminal>
         </ConductingEquipment>
+        <ConductingEquipment
+          esld:lx="22"
+          esld:ly="8"
+          esld:rot="3"
+          esld:x="22"
+          esld:y="8"
+          name="SMC1"
+          type="SMC"
+        >
+        </ConductingEquipment>
         <ConnectivityNode
           name="L1"
           pathName="S1/V2/B1/L1"
@@ -2517,6 +2617,16 @@ snapshots["Designer given conducting equipment with established connectivity bet
           <Terminal name="erroneous">
           </Terminal>
         </ConductingEquipment>
+        <ConductingEquipment
+          esld:lx="22"
+          esld:ly="8"
+          esld:rot="3"
+          esld:x="22"
+          esld:y="8"
+          name="SMC1"
+          type="SMC"
+        >
+        </ConductingEquipment>
         <ConnectivityNode
           name="L1"
           pathName="S1/V2/B1/L1"
@@ -2741,6 +2851,16 @@ snapshots["Designer given conducting equipment with established connectivity bet
           <Terminal name="erroneous">
           </Terminal>
         </ConductingEquipment>
+        <ConductingEquipment
+          esld:lx="22"
+          esld:ly="8"
+          esld:rot="3"
+          esld:x="22"
+          esld:y="8"
+          name="SMC1"
+          type="SMC"
+        >
+        </ConductingEquipment>
         <ConnectivityNode
           name="L1"
           pathName="S1/V2/B1/L1"
@@ -2900,6 +3020,16 @@ snapshots["Designer given conducting equipment with established connectivity bet
           <Terminal name="erroneous">
           </Terminal>
         </ConductingEquipment>
+        <ConductingEquipment
+          esld:lx="22"
+          esld:ly="8"
+          esld:rot="3"
+          esld:x="22"
+          esld:y="8"
+          name="SMC1"
+          type="SMC"
+        >
+        </ConductingEquipment>
       </Bay>
     </VoltageLevel>
   </Substation>
@@ -3017,6 +3147,16 @@ snapshots["Designer given conducting equipment with established connectivity bet
           <Terminal name="erroneous">
           </Terminal>
         </ConductingEquipment>
+        <ConductingEquipment
+          esld:lx="22"
+          esld:ly="8"
+          esld:rot="3"
+          esld:x="22"
+          esld:y="8"
+          name="SMC1"
+          type="SMC"
+        >
+        </ConductingEquipment>
         <ConnectivityNode
           name="L1"
           pathName="S2/V2/B1/L1"
@@ -3240,6 +3380,16 @@ snapshots["Designer given conducting equipment with established connectivity bet
           <Terminal name="erroneous">
           </Terminal>
         </ConductingEquipment>
+        <ConductingEquipment
+          esld:lx="22"
+          esld:ly="8"
+          esld:rot="3"
+          esld:x="22"
+          esld:y="8"
+          name="SMC1"
+          type="SMC"
+        >
+        </ConductingEquipment>
       </Bay>
     </VoltageLevel>
   </Substation>
@@ -3367,6 +3517,16 @@ snapshots["Designer given conducting equipment with established connectivity bet
           <Terminal name="erroneous">
           </Terminal>
         </ConductingEquipment>
+        <ConductingEquipment
+          esld:lx="22"
+          esld:ly="8"
+          esld:rot="3"
+          esld:x="22"
+          esld:y="8"
+          name="SMC1"
+          type="SMC"
+        >
+        </ConductingEquipment>
         <ConnectivityNode
           name="L1"
           pathName="S1/V2/B1/L1"
@@ -3621,6 +3781,16 @@ snapshots["Designer given conducting equipment with established connectivity bet
           <Terminal name="erroneous">
           </Terminal>
         </ConductingEquipment>
+        <ConductingEquipment
+          esld:lx="22"
+          esld:ly="7"
+          esld:rot="3"
+          esld:x="22"
+          esld:y="7"
+          name="SMC1"
+          type="SMC"
+        >
+        </ConductingEquipment>
         <ConnectivityNode
           name="L1"
           pathName="S1/V2/B1/L1"
@@ -3904,6 +4074,16 @@ snapshots["Designer given conducting equipment with established connectivity bet
           <Terminal name="erroneous">
           </Terminal>
         </ConductingEquipment>
+        <ConductingEquipment
+          esld:lx="22"
+          esld:ly="8"
+          esld:rot="3"
+          esld:x="22"
+          esld:y="8"
+          name="SMC1"
+          type="SMC"
+        >
+        </ConductingEquipment>
         <ConnectivityNode
           name="L2"
           pathName="S1/V2/B1/L2"
@@ -4786,7 +4966,7 @@ snapshots["Designer given conducting equipment with established connectivity bet
 snapshots["Designer given a voltage level opens a menu on voltage level right click"] = 
 `<menu
   id="sld-context-menu"
-  style="position: fixed; top: 0px; left: 0px; background: var(--oscd-base3, white); margin: 0px; padding: 0px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); --mdc-list-vertical-padding: 0px;"
+  style="position: fixed; top: 0px; left: 0px; background: var(--oscd-base3, white); margin: 0px; padding: 0px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); --mdc-list-vertical-padding: 0px; overflow-y: auto;"
 >
   <mwc-list>
     <mwc-list-item
@@ -4866,7 +5046,7 @@ snapshots["Designer given a voltage level opens a menu on voltage level right cl
 snapshots["Designer given conducting equipment opens a menu on equipment right click"] = 
 `<menu
   id="sld-context-menu"
-  style="position: fixed; top: 550px; left: 750px; background: var(--oscd-base3, white); margin: 0px; padding: 0px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); --mdc-list-vertical-padding: 0px;"
+  style="position: fixed; top: 550px; left: 750px; background: var(--oscd-base3, white); margin: 0px; padding: 0px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); --mdc-list-vertical-padding: 0px; overflow-y: auto;"
 >
   <mwc-list>
     <mwc-list-item
@@ -5246,6 +5426,16 @@ snapshots["Designer given conducting equipment with established connectivity bet
           <Terminal name="erroneous">
           </Terminal>
         </ConductingEquipment>
+        <ConductingEquipment
+          esld:lx="22"
+          esld:ly="8"
+          esld:rot="3"
+          esld:x="22"
+          esld:y="8"
+          name="SMC1"
+          type="SMC"
+        >
+        </ConductingEquipment>
         <ConnectivityNode
           name="L1"
           pathName="S1/V2/B1/L1"
@@ -5527,6 +5717,16 @@ snapshots["Designer given conducting equipment with established connectivity bet
           <Terminal name="erroneous">
           </Terminal>
         </ConductingEquipment>
+        <ConductingEquipment
+          esld:lx="22"
+          esld:ly="8"
+          esld:rot="3"
+          esld:x="22"
+          esld:y="8"
+          name="SMC1"
+          type="SMC"
+        >
+        </ConductingEquipment>
         <ConnectivityNode
           name="L1"
           pathName="S1/V2/B1/L1"
@@ -6031,6 +6231,16 @@ snapshots["Designer given conducting equipment with established connectivity bet
           <Terminal name="erroneous">
           </Terminal>
         </ConductingEquipment>
+        <ConductingEquipment
+          esld:lx="22"
+          esld:ly="8"
+          esld:rot="3"
+          esld:x="22"
+          esld:y="8"
+          name="SMC1"
+          type="SMC"
+        >
+        </ConductingEquipment>
         <ConnectivityNode
           name="L1"
           pathName="S1/V2/B1/L1"
diff --git a/icons.ts b/icons.ts
index 9af264e..d30611e 100644
--- a/icons.ts
+++ b/icons.ts
@@ -1,4 +1,5 @@
-import { html, svg, TemplateResult } from 'lit';
+import { html, nothing, svg, TemplateResult } from 'lit';
+import { EqType, eqTypes, isEqType, ringedEqTypes } from './util.js';
 
 export const resizePath = svg`<path
   d="M120 616v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm160 0v-80h80v80h-80Zm160 640v-80h80v80h-80Zm0-640v-80h80v80h-80Zm160 640v-80h80v80h-80Zm160 0v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160v-80h80v80h-80Zm0-160V296H600v-80h240v240h-80ZM120 936V696h80v160h160v80H120Z"
@@ -8,7 +9,7 @@ export const movePath = svg`<path d="M480 976 310 806l57-57 73 73V616l-205-1 73
 
 const voltageLevelPath = svg`<path
     d="M 4 4 L 12.5 21 L 21 4"
-    fill="transparent"
+    fill="none"
     stroke="currentColor"
     stroke-width="3"
     stroke-linejoin="round"
@@ -17,7 +18,7 @@ const voltageLevelPath = svg`<path
 
 const bayPath = svg`<path
     d="M 3 2 L 22 2"
-    fill="transparent"
+    fill="none"
     stroke="currentColor"
     stroke-width="1.5"
     stroke-linejoin="round"
@@ -25,7 +26,7 @@ const bayPath = svg`<path
   />
   <path
     d="M 3 5 L 22 5"
-    fill="transparent"
+    fill="none"
     stroke="currentColor"
     stroke-width="1.5"
     stroke-linejoin="round"
@@ -33,7 +34,7 @@ const bayPath = svg`<path
   />
   <path
     d="M 7 2 L 7 7.5"
-    fill="transparent"
+    fill="none"
     stroke="currentColor"
     stroke-width="1.5"
     stroke-linejoin="round"
@@ -41,7 +42,7 @@ const bayPath = svg`<path
   />
   <path
     d="M 18 5 L 18 7.5"
-    fill="transparent"
+    fill="none"
     stroke="currentColor"
     stroke-width="1.5"
     stroke-linejoin="round"
@@ -49,7 +50,7 @@ const bayPath = svg`<path
   />
   <path
     d="M 5.5 8.5 L 7 11 L 7 13 L 18 13 L 18 11 L 16.5 8.5"
-    fill="transparent"
+    fill="none"
     stroke="currentColor"
     stroke-width="1.5"
     stroke-linejoin="round"
@@ -57,7 +58,7 @@ const bayPath = svg`<path
   />
   <path
     d="M 12.5 13 L 12.5 15"
-    fill="transparent"
+    fill="none"
     stroke="currentColor"
     stroke-width="1.5"
     stroke-linejoin="round"
@@ -65,7 +66,7 @@ const bayPath = svg`<path
   />
   <path
     d="M 11 16 L 12.5 18.5 L 12.5 23"
-    fill="transparent"
+    fill="none"
     stroke="currentColor"
     stroke-width="1.5"
     stroke-linejoin="round"
@@ -73,7 +74,7 @@ const bayPath = svg`<path
   />
   <path
     d="M 10.5 21 L 12.5 23 L 14.5 21"
-    fill="transparent"
+    fill="none"
     stroke="currentColor"
     stroke-width="1.5"
     stroke-linejoin="round"
@@ -120,61 +121,74 @@ export const bayGraphic = html`<svg
   ${bayPath}
 </svg>`;
 
-const equipmentPaths: Partial<Record<string, TemplateResult<2>>> = {
-  IFL: svg`
+const equipmentPaths: Record<EqType, TemplateResult<2>> = {
+  CAB: svg`
   <path
-    d="M 12.5 0 L 12.5 4"
-    fill="transparent"
+    d="M 12.5,0 V 4"
+    fill="none"
     stroke="currentColor"
     stroke-width="1.5"
     stroke-linecap="round"
-  />
+    />
   <path
-    d=" M 12.5 25 L 12.5 21"
-    fill="transparent"
+    d="M 9.4,4.2 H 15.6 L 12.5,8.3 Z"
+    fill="currentColor"
     stroke="currentColor"
     stroke-width="1.5"
     stroke-linecap="round"
-  />
-  <polygon
-    points="4,4 12.5,21 21,4"
-    fill="transparent"
+    />
+  <path
+    d="m 12.5,8.3 v 9"
+    fill="none"
     stroke="currentColor"
     stroke-width="1.5"
-    stroke-linejoin="round"
     stroke-linecap="round"
-  />
-`,
-  DIS: svg`
+    />
   <path
-    d="M 12.5 0 L 12.5 4"
-    fill="transparent"
+    d="m 9.4,21.3 h 6.2 l -3.1,-4.1 z"
+    fill="currentColor"
     stroke="currentColor"
     stroke-width="1.5"
     stroke-linecap="round"
-  />
+    />
   <path
-    d=" M 12.5 25 L 12.5 21"
-    fill="transparent"
+    d="m 12.5,21.3 v 4"
+    fill="none"
     stroke="currentColor"
     stroke-width="1.5"
     stroke-linecap="round"
-  />
+    />
+  `,
+  CAP: svg`
   <path
-    d="M 12.5 21 L 4 4"
-    fill="transparent"
+    d="M 6.5,10.1 H 18.5"
+    fill="none"
     stroke="currentColor"
     stroke-width="1.5"
     stroke-linecap="round"
-  />
+    />
   <path
-    d="M 8 4 L 17 4"
-    fill="transparent"
+    d="M 12.5,0 V 10.1"
+    fill="none"
     stroke="currentColor"
     stroke-width="1.5"
     stroke-linecap="round"
-  />
-`,
+    />
+  <path
+    d="M 6.5,14.9 H 18.5"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    />
+  <path
+    d="M 12.5,14.9 V 25"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    />
+  `,
   CBR: svg`
   <line
     x1="12.5"
@@ -221,7 +235,7 @@ const equipmentPaths: Partial<Record<string, TemplateResult<2>>> = {
     stroke-width="1.5"
     stroke-linecap="round"
   />
-`,
+  `,
   CTR: svg`
   <line
     x1="12.5"
@@ -237,11 +251,206 @@ const equipmentPaths: Partial<Record<string, TemplateResult<2>>> = {
     cy="12.5"
     r="7.5"
     stroke="currentColor"
-    fill="transparent"
+    fill="none"
     stroke-width="1.5"
     stroke-linecap="round"
   />
-`,
+  `,
+  DIS: svg`
+  <path
+    d="M 12.5 0 L 12.5 4"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  <path
+    d=" M 12.5 25 L 12.5 21"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  <path
+    d="M 12.5 21 L 4 4"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  <path
+    d="M 8 4 L 17 4"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  `,
+  GEN: svg`
+  <path
+    d="m 16.2,12.5 v 4.2 q -0.2,0.2 -0.6,0.6 -0.4,0.4 -1.1,0.7 -0.7,0.3 -1.8,0.3 -1.8,0 -2.9,-1.2 -1.1,-1.2 -1.1,-3.6 v -2.1 q 0,-2.4 1,-3.6 1,-1.1 2.9,-1.1 1.7,0 2.6,0.9 0.9,0.9 1,2.6 h -1.4 q -0.1,-1.1 -0.6,-1.6 -0.5,-0.6 -1.5,-0.6 -1.3,0 -1.8,0.9 -0.5,0.9 -0.5,2.6 v 2.1 q 0,1.8 0.7,2.7 0.7,0.9 1.9,0.9 1,0 1.4,-0.3 0.4,-0.3 0.6,-0.5 v -2.6 h -2.1 v -1.2 z"
+    stroke="currentColor"
+    fill="currentColor"
+    stroke-width="0.3"
+    stroke-linecap="round"
+  />
+  `,
+  IFL: svg`
+  <path
+    d="M 12.5 0 L 12.5 4"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  <path
+    d="M 12.5 25 L 12.5 21"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  <polygon
+    points="4,4 12.5,21 21,4"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linejoin="round"
+    stroke-linecap="round"
+  />
+  `,
+  LIN: svg`
+  <path
+    d="M 12.5,0 V 25"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  <path
+    d="m 10.3,12.5 4.3,-2.5"
+    fill="currentColor"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  <path
+    d="m 10.3,15 4.3,-2.5"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  `,
+  MOT: svg`
+  <path
+    d="m 12.5,15.5 2.3,-7.8 h 1.4 v 9.6 h -1.1 v -3.7 l 0.1,-3.7 -2.3,7.4 h -0.9 L 9.8,9.8 9.9,13.6 v 3.7 H 8.8 V 7.7 h 1.4 z"
+    stroke="currentColor"
+    fill="currentColor"
+    stroke-width="0.3"
+    stroke-linecap="round"
+  />
+  `,
+  REA: svg`
+  <path
+    d="m 4.5,12.5 h 8 V 0"
+    stroke="currentColor"
+    fill="none"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  <path
+    d="m 4.5,12.5 a 8,8 0 0 1 8,-8 8,8 0 0 1 8,8 8,8 0 0 1 -8,8"
+    stroke="currentColor"
+    fill="none"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  <path
+    d="M 12.5,20.5 V 25"
+    stroke="currentColor"
+    fill="none"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  `,
+  RES: svg`
+  <path
+    d="M 12.5,0 V 4"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  <path
+    d="m 12.5 25 v -4"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  <rect
+    y="4"
+    x="8.5"
+    height="17"
+    width="8"
+    stroke="currentColor"
+    fill="none"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  `,
+  SAR: svg`
+  <path
+    d="M 12.5,0 V 8"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    />
+  <path
+    d="m 12.5,21 v 4"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  <line
+    x1="10"
+    y1="24.25"
+    x2="15"
+    y2="24.25"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  <path
+    d="M 11.2,8 12.5,11 13.8,8 Z"
+    fill="currentColor"
+    stroke="currentColor"
+    stroke-width="1"
+    stroke-linecap="round"
+  />
+  <rect
+    y="4"
+    x="8.5"
+    height="17"
+    width="8"
+    stroke="currentColor"
+    fill="none"
+    stroke-width="1.5"
+    stroke-linecap="round"
+  />
+  `,
+  SMC: svg`
+  <path
+    d="m 16.6,12.5 c -0.7,1.4 -1.3,2.8 -2.1,2.8 -1.5,0 -2.6,-5.6 -4.1,-5.6 -0.7,0 -1.4,1.4 -2.1,2.8"
+    stroke="currentColor"
+    fill="none"
+    stroke-width="1.2"
+    stroke-linecap="round"
+  />
+  `,
   VTR: svg`
   <line
     x1="12.5"
@@ -257,7 +466,7 @@ const equipmentPaths: Partial<Record<string, TemplateResult<2>>> = {
     cy="10"
     r="5"
     stroke="currentColor"
-    fill="transparent"
+    fill="none"
     stroke-width="1.5"
     stroke-linecap="round"
   />
@@ -266,30 +475,31 @@ const equipmentPaths: Partial<Record<string, TemplateResult<2>>> = {
     cy="15"
     r="5"
     stroke="currentColor"
-    fill="transparent"
+    fill="none"
     stroke-width="1.5"
     stroke-linecap="round"
   />
-  <line
-    x1="12.5"
-    y1="20"
-    x2="12.5"
-    y2="25"
+`,
+};
+
+export const eqRingPath = svg`
+  <path
+    d="M 12.5,0 V 4"
+    fill="none"
     stroke="currentColor"
     stroke-width="1.5"
     stroke-linecap="round"
-  />
-  <line
-    x1="9"
-    y1="24.25"
-    x2="16"
-    y2="24.25"
+    />
+  <circle
+    cx="12.5"
+    cy="12.5"
+    r="8.5"
     stroke="currentColor"
+    fill="none"
     stroke-width="1.5"
     stroke-linecap="round"
   />
-`,
-};
+  `;
 
 const defaultEquipmentPath = svg`
   <circle
@@ -298,13 +508,13 @@ const defaultEquipmentPath = svg`
     r="11"
     stroke-width="1.5"
     stroke="currentColor"
-    fill="transparent"
+    fill="none"
   />
   <path
     d=" M 7.5 17.5
     L 12 13
     Z"
-    fill="transparent"
+    fill="none"
     stroke="currentColor"
     stroke-width="2"
     stroke-linejoin="round"
@@ -324,7 +534,7 @@ const defaultEquipmentPath = svg`
     d=" M 13 9
     L 16 6
     Z"
-    fill="transparent"
+    fill="none"
     stroke="currentColor"
     stroke-width="2"
     stroke-linejoin="round"
@@ -334,7 +544,7 @@ const defaultEquipmentPath = svg`
     d=" M 16 12
     L 19 9
     Z"
-    fill="transparent"
+    fill="none"
     stroke="currentColor"
     stroke-width="2"
     stroke-linejoin="round"
@@ -343,7 +553,7 @@ const defaultEquipmentPath = svg`
 `;
 
 export function equipmentPath(equipmentType: string | null): TemplateResult<2> {
-  if (equipmentType && equipmentType in equipmentPaths)
+  if (equipmentType && isEqType(equipmentType))
     return equipmentPaths[equipmentType]!;
   return defaultEquipmentPath;
 }
@@ -359,6 +569,7 @@ export function equipmentGraphic(
     slot="graphic"
   >
     ${equipmentPath(equipmentType)}
+    ${equipmentType && ringedEqTypes.has(equipmentType) ? eqRingPath : nothing}
   </svg>`;
 }
 
@@ -371,6 +582,7 @@ export function equipmentIcon(equipmentType: string): TemplateResult<1> {
     slot="icon"
   >
     ${equipmentPath(equipmentType)}
+    ${ringedEqTypes.has(equipmentType) ? eqRingPath : nothing}
   </svg>`;
 }
 
@@ -453,7 +665,7 @@ export const powerTransformerTwoWindingSymbol = svg`<symbol
     cy="10"
     r="5"
     stroke="currentColor"
-    fill="transparent"
+    fill="none"
     stroke-width="1.5"
     stroke-linecap="round"
   />
@@ -462,7 +674,7 @@ export const powerTransformerTwoWindingSymbol = svg`<symbol
     cy="15"
     r="5"
     stroke="currentColor"
-    fill="transparent"
+    fill="none"
     stroke-width="1.5"
     stroke-linecap="round"
   />
@@ -491,7 +703,7 @@ export const symbols = svg`
   <line x1="1" y1="0" x2="1" y2="1" stroke="#888" stroke-opacity="0.3" stroke-width="0.06" />
   <line x1="0" y1="1" x2="1" y2="1" stroke="#888" stroke-opacity="0.3" stroke-width="0.06" />
   </pattern>
-  ${Object.keys(equipmentPaths).map(eqType => equipmentSymbol(eqType))}
+  ${eqTypes.map(eqType => equipmentSymbol(eqType))}
   ${equipmentSymbol('ConductingEquipment')}
   ${connectivityNodeMarker}
   ${groundedMarker}
diff --git a/oscd-designer.spec.ts b/oscd-designer.spec.ts
index aceede3..5e567cd 100644
--- a/oscd-designer.spec.ts
+++ b/oscd-designer.spec.ts
@@ -69,6 +69,7 @@ export const equipmentDocString = `<?xml version="1.0" encoding="UTF-8"?>
         <ConductingEquipment type="BAT" name="BAT1" esld:x="19" esld:y="7" esld:rot="3" esld:lx="19" esld:ly="7">
           <Terminal name="erroneous"/>
         </ConductingEquipment>
+        <ConductingEquipment type="SMC" name="SMC1" esld:x="22" esld:y="8" esld:rot="3" esld:lx="22" esld:ly="8" />
       </Bay>
     </VoltageLevel>
   </Substation>
@@ -339,7 +340,7 @@ describe('Designer', () => {
       }).dispatchEvent(new PointerEvent('contextmenu'));
       await element.updateComplete;
       expect(queryUI({ ui: 'menu' })).to.exist;
-      expect(queryUI({ ui: 'menu' })).dom.to.equalSnapshot();
+      await expect(queryUI({ ui: 'menu' })).dom.to.equalSnapshot();
     });
 
     it('resizes voltage levels on resize menu item select', async () => {
@@ -673,7 +674,7 @@ describe('Designer', () => {
     });
 
     it('allows placing new conducting equipment', async () => {
-      element.shadowRoot!.querySelector<Button>('[label="Add CBR"]')?.click();
+      element.shadowRoot!.querySelector<Button>('[label="Add GEN"]')?.click();
       expect(element)
         .property('placing')
         .to.have.property('tagName', 'ConductingEquipment');
@@ -753,7 +754,7 @@ describe('Designer', () => {
 
     it('requests equipment edit wizard on edit menu item select', async () => {
       queryUI({
-        scl: '[type="CTR"]',
+        scl: '[type="SMC"]',
         ui: 'rect',
       }).dispatchEvent(new PointerEvent('contextmenu'));
       const sldEditor =
@@ -764,7 +765,7 @@ describe('Designer', () => {
       )!.selected = true;
       await sldEditor.updateComplete;
       expect(lastCalledWizard).to.equal(
-        element.doc.querySelector('[type="CTR"]')
+        element.doc.querySelector('[type="SMC"]')
       );
     });
 
@@ -825,7 +826,7 @@ describe('Designer', () => {
       );
       await element.updateComplete;
       expect(queryUI({ ui: 'menu' })).to.exist;
-      expect(queryUI({ ui: 'menu' })).dom.to.equalSnapshot();
+      await expect(queryUI({ ui: 'menu' })).dom.to.equalSnapshot();
     });
 
     it('flips equipment on mirror menu item select', async () => {
diff --git a/oscd-designer.ts b/oscd-designer.ts
index 75eaefb..13a81b3 100644
--- a/oscd-designer.ts
+++ b/oscd-designer.ts
@@ -18,6 +18,7 @@ import {
   ConnectDetail,
   ConnectEvent,
   connectionStartPoints,
+  eqTypes,
   isBusBar,
   PlaceEvent,
   PlaceLabelEvent,
@@ -587,7 +588,7 @@ export default class Designer extends LitElement {
           : nothing}${Array.from(
           this.doc.querySelectorAll(':root > Substation > VoltageLevel > Bay')
         ).find(bay => !isBusBar(bay))
-          ? ['CTR', 'VTR', 'DIS', 'CBR', 'IFL']
+          ? eqTypes
               .map(
                 eqType => html`<mwc-fab
                   mini
@@ -667,7 +668,7 @@ export default class Designer extends LitElement {
           @click=${() => this.zoomOut()}
         >
         </mwc-icon-button
-        >${this.placing || this.resizing
+        >${this.placing || this.resizing || this.connecting || this.placingLabel
           ? html`<mwc-icon-button
               icon="close"
               label="Cancel action"
diff --git a/sld-editor.ts b/sld-editor.ts
index c4735ca..34507c6 100644
--- a/sld-editor.ts
+++ b/sld-editor.ts
@@ -18,6 +18,7 @@ import '@material/mwc-textfield';
 import { getReference, identity } from '@openscd/oscd-scl';
 import {
   bayGraphic,
+  eqRingPath,
   equipmentGraphic,
   movePath,
   resizePath,
@@ -29,6 +30,7 @@ import {
   connectionStartPoints,
   elementPath,
   isBusBar,
+  isEqType,
   newConnectEvent,
   newPlaceEvent,
   newPlaceLabelEvent,
@@ -42,6 +44,7 @@ import {
   privType,
   removeNode,
   removeTerminal,
+  ringedEqTypes,
   sldNs,
   svgNs,
   xmlBoolean,
@@ -127,17 +130,17 @@ const parentTags: Partial<Record<string, string>> = {
 };
 
 const singleTerminal = new Set([
-  'VTR',
+  'BAT',
+  'EFN',
+  'FAN',
   'GEN',
+  'IFL',
   'MOT',
-  'FAN',
   'PMP',
-  'EFN',
-  'BAT',
   'RRC',
   'SAR',
   'SMC',
-  'IFL',
+  'VTR',
 ]);
 
 function preventDefault(e: Event) {
@@ -238,7 +241,7 @@ export class SLDEditor extends LitElement {
   coordinatesRef: Ref<HTMLElement> = createRef();
 
   positionCoordinates(e: MouseEvent) {
-    const coordinatesDiv = this.coordinatesRef.value;
+    const coordinatesDiv = this.coordinatesRef?.value;
     if (coordinatesDiv) {
       coordinatesDiv.style.top = `${e.clientY}px`;
       coordinatesDiv.style.left = `${e.clientX + 16}px`;
@@ -365,19 +368,20 @@ export class SLDEditor extends LitElement {
       e.stopImmediatePropagation();
       this.menu = undefined;
     }
-    this.positionCoordinates(e);
   };
 
   connectedCallback() {
     super.connectedCallback();
     window.addEventListener('keydown', this.handleKeydown);
     window.addEventListener('click', this.handleClick, true);
+    window.addEventListener('click', this.positionCoordinates);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     window.removeEventListener('keydown', this.handleKeydown);
     window.removeEventListener('click', this.handleClick);
+    window.removeEventListener('click', this.positionCoordinates);
   }
 
   nearestOpenTerminal(equipment?: Element): 'top' | 'bottom' | undefined {
@@ -773,20 +777,26 @@ export class SLDEditor extends LitElement {
       <menu
         id="sld-context-menu"
         style="position: fixed; top: ${this.menu.top}px; left: ${this.menu
-          .left}px; background: var(--oscd-base3, white); margin: 0px; padding: 0px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); --mdc-list-vertical-padding: 0px;"
-        ${ref(async (m?: Element) => {
-          if (!(m instanceof HTMLElement)) return;
+          .left}px; background: var(--oscd-base3, white); margin: 0px; padding: 0px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); --mdc-list-vertical-padding: 0px; overflow-y: auto;"
+        ${ref(async (menu?: Element) => {
+          if (!(menu instanceof HTMLElement)) return;
+          const nav = (
+            this.parentElement!.getRootNode() as ShadowRoot
+          ).querySelector('nav')!;
+          const navHeight = nav.offsetHeight + 12;
           await this.updateComplete;
-          const { bottom, right } = m.getBoundingClientRect();
-          if (bottom > window.innerHeight) {
-            m.style.removeProperty('top');
+          const { bottom, right } = menu.getBoundingClientRect();
+          if (bottom > window.innerHeight - navHeight) {
+            menu.style.removeProperty('top');
             // eslint-disable-next-line no-param-reassign
-            m.style.bottom = '0px';
+            menu.style.bottom = `${navHeight}px`;
+            // eslint-disable-next-line no-param-reassign
+            menu.style.maxHeight = `calc(100vh - ${navHeight + 68}px)`;
           }
           if (right > window.innerWidth) {
-            m.style.removeProperty('left');
+            menu.style.removeProperty('left');
             // eslint-disable-next-line no-param-reassign
-            m.style.right = '0px';
+            menu.style.right = '0px';
           }
         })}
       >
@@ -835,23 +845,21 @@ export class SLDEditor extends LitElement {
     }
 
     let coordinates = html``;
+    let invalid = false;
+    let hidden = true;
     if (this.placing) {
       const {
         dim: [w0, h0],
       } = attributes(this.placing);
-      const invalid = !this.canPlaceAt(
+      hidden = false;
+      invalid = !this.canPlaceAt(
         this.placing,
         this.mouseX,
         this.mouseY,
         w0,
         h0
       );
-      coordinates = html`<div
-        ${ref(this.coordinatesRef)}
-        class="${classMap({ coordinates: true, invalid })}"
-      >
-        (${this.mouseX},${this.mouseY})
-      </div>`;
+      coordinates = html`${this.mouseX},${this.mouseY}`;
     }
 
     if (this.resizing && !isBusBar(this.resizing)) {
@@ -860,14 +868,16 @@ export class SLDEditor extends LitElement {
       } = attributes(this.resizing);
       const newW = Math.max(1, this.mouseX - x + 1);
       const newH = Math.max(1, this.mouseY - y + 1);
-      const invalid = !this.canResizeTo(this.resizing, newW, newH);
-      coordinates = html`<div
-        ${ref(this.coordinatesRef)}
-        class="${classMap({ coordinates: true, invalid })}"
-      >
-        (${newW}&times;${newH})
-      </div>`;
+      hidden = false;
+      invalid = !this.canResizeTo(this.resizing, newW, newH);
+      coordinates = html`${newW}&times;${newH}`;
     }
+    const coordinateTooltip = html`<div
+      ${ref(this.coordinatesRef)}
+      class="${classMap({ coordinates: true, invalid, hidden })}"
+    >
+      (${coordinates})
+    </div>`;
 
     const connectionPreview = [];
     if (this.connecting) {
@@ -995,7 +1005,8 @@ export class SLDEditor extends LitElement {
             visibility: visible;
             opacity: 1;
           }
-          rect {
+          g.voltagelevel > rect,
+          g.bay > rect {
             shape-rendering: crispEdges;
           }
           section:not(:hover) .preview {
@@ -1047,7 +1058,7 @@ export class SLDEditor extends LitElement {
         ).map(element => this.renderLabel(element))}
         ${placingLabelTarget}
       </svg>
-      ${menu} ${coordinates}
+      ${menu} ${coordinateTooltip}
       <mwc-dialog
         id="resizeSubstationUI"
         heading="Resize ${this.substation.getAttribute('name')}"
@@ -1309,9 +1320,17 @@ export class SLDEditor extends LitElement {
     const deg = 90 * rot;
 
     const eqType = equipment.getAttribute('type')!;
-    const symbol = ['CBR', 'CTR', 'VTR', 'DIS', 'IFL'].includes(eqType)
-      ? eqType
-      : 'ConductingEquipment';
+    const ringed = ringedEqTypes.has(eqType);
+    const symbol = isEqType(eqType) ? eqType : 'ConductingEquipment';
+    const icon = ringed
+      ? svg`<svg
+    viewBox="0 0 25 25"
+    width="1"
+    height="1"
+  >
+    ${eqRingPath}
+  </svg>`
+      : svg`<use href="#${symbol}" pointer-events="none" />`;
 
     let handleClick = () => {
       this.dispatchEvent(newStartPlaceEvent(equipment));
@@ -1418,7 +1437,13 @@ export class SLDEditor extends LitElement {
       flip ? ' scale(-1,1)' : ''
     }" transform-origin="0.5 0.5">
       <title>${equipment.getAttribute('name')}</title>
-      <use href="#${symbol}" pointer-events="none" />
+      ${icon}
+      ${
+        ringed
+          ? svg`<use transform="rotate(${-deg} 0.5 0.5)" href="#${symbol}"
+        pointer-events="none" />`
+          : nothing
+      }
       <rect width="1" height="1" fill="none" pointer-events="${
         connect ? 'none' : 'all'
       }"
@@ -1636,6 +1661,9 @@ export class SLDEditor extends LitElement {
       --mdc-icon-size: 24px;
     }
 
+    .hidden {
+      display: none;
+    }
     .coordinates {
       position: fixed;
       pointer-events: none;
diff --git a/util.ts b/util.ts
index ac522be..d0c347f 100644
--- a/util.ts
+++ b/util.ts
@@ -6,6 +6,28 @@ export const sldNs = 'https://transpower.co.nz/SCL/SSD/SLD/v0';
 export const xmlnsNs = 'http://www.w3.org/2000/xmlns/';
 export const svgNs = 'http://www.w3.org/2000/svg';
 
+export const eqTypes = [
+  'CAB',
+  'CAP',
+  'CBR',
+  'CTR',
+  'DIS',
+  'GEN',
+  'IFL',
+  'LIN',
+  'MOT',
+  'REA',
+  'RES',
+  'SAR',
+  'SMC',
+  'VTR',
+] as const;
+export type EqType = (typeof eqTypes)[number];
+export function isEqType(str: string): str is EqType {
+  return eqTypes.includes(str as EqType);
+}
+export const ringedEqTypes = new Set(['GEN', 'MOT', 'SMC']);
+
 export type Point = [number, number];
 export type Attrs = {
   pos: Point;