wip: miscellaneous UI improvements

ca-d · Dec 8, 2023 · 8a4347e · 8a4347e
1 parent de8731c
commit 8a4347e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 18 deletions.
diff --git a/oscd-designer.ts b/oscd-designer.ts
@@ -177,13 +177,13 @@ export default class Designer extends LitElement {
   @query('#about')
   about?: Dialog;
 
-  zoomIn(step = 4) {
-    this.gridSize += step;
+  zoomIn() {
+    this.gridSize += 3;
   }
 
-  zoomOut(step = 4) {
-    this.gridSize -= step;
-    if (this.gridSize < 4) this.gridSize = 4;
+  zoomOut() {
+    this.gridSize -= 3;
+    if (this.gridSize < 2) this.gridSize = 2;
   }
 
   startResizingBottomRight(element: Element | undefined) {
@@ -967,16 +967,20 @@ export default class Designer extends LitElement {
         ? html`<mwc-icon-button
               icon="zoom_in"
               label="Zoom In"
-              title="Zoom In"
+              title="Zoom In (${Math.round((100 * (this.gridSize + 3)) / 32)}%)"
               @click=${() => this.zoomIn()}
             >
             </mwc-icon-button
-            ><mwc-icon-button
-              icon="zoom_out"
-              label="Zoom Out"
-              title="Zoom Out"
-              @click=${() => this.zoomOut()}
-            ></mwc-icon-button>`
+            >${this.gridSize > 3
+              ? html`<mwc-icon-button
+                  icon="zoom_out"
+                  label="Zoom Out"
+                  title="Zoom Out (${Math.round(
+                    (100 * (this.gridSize - 3)) / 32
+                  )}%)"
+                  @click=${() => this.zoomOut()}
+                ></mwc-icon-button>`
+              : nothing}`
         : nothing
     }
         </mwc-icon-button

diff --git a/sld-editor.ts b/sld-editor.ts
@@ -2471,11 +2471,10 @@ export class SLDEditor extends LitElement {
     const zigZag =
       zigZagTransform === undefined
         ? nothing
-        : svg`<g stroke="black" transform="rotate(${
-            rot * 90
-          } ${cx} ${cy}) translate(${cx - 1.5} ${
-            cy - 1.5
-          }) ${zigZagTransform}">${zigZagPath}</g>`;
+        : svg`<g stroke="black" stroke-linecap="round"
+                transform="rotate(${rot * 90} ${cx} ${cy})
+                translate(${cx - 1.5} ${cy - 1.5})
+                ${zigZagTransform}">${zigZagPath}</g>`;
     return svg`<g class="winding"
         @contextmenu=${(e: MouseEvent) => this.openMenu(winding, e)}
     ><circle cx="${cx}" cy="${cy}" r="${size}" stroke="black" stroke-width="0.06" />${arcPath}${zigZag}${ltcArrow}${ports}</g>`;
@@ -2815,7 +2814,8 @@ export class SLDEditor extends LitElement {
     const bay = cNode.closest('Bay');
     const targetSize = 0.5;
     const pointerEvents =
-      !this.resizingBR || (this.resizingBR === bay && isBusBar(this.resizingBR))
+      !this.placing &&
+      (!this.resizingBR || (this.resizingBR === bay && isBusBar(bay)))
         ? 'all'
         : 'none';
     sections.forEach(section => {