feat(slide-potentiometer): make travel length configurable #94

close #94

Author: AriellaE

src/slide-potentiometer-element.stories.ts

@@ -5,16 +5,31 @@ import './slide-potentiometer-element';
 export default {
   title: 'Slide Potentiometer',
   component: 'wokwi-slide-potentiometer',
+  argTypes: {
+    travelLength: { control: { type: 'range', min: 15, max: 100 } },
+  },
+  args: {
+    travelLength: 30,
+  },
 };
 
-const Template = ({ degrees = 0 }) => html` <div
-  style="transform: rotate(${degrees}deg) translate(50%, 50%); width:400px; height: 400px;"
->
-  <wokwi-slide-potentiometer @input=${action('input')} />
-</div>`;
+const Template = ({ travelLength, degrees = 0 }) => html`
+  <div style="transform: rotate(${degrees}deg) translate(50%, 50%); width: 500px; height: 400px;">
+    <wokwi-slide-potentiometer .travelLength=${travelLength} @input=${action('input')} />
+  </div>
+`;
 
 export const Default = Template.bind({});
 Default.args = {};
 
 export const Rotated = Template.bind({});
 Rotated.args = { ...Default.args, degrees: 90 };
+
+export const Short = Template.bind({});
+Short.args = { travelLength: 15 };
+
+export const Long = Template.bind({});
+Long.args = { travelLength: 60 };
+
+export const ExtraLong = Template.bind({});
+ExtraLong.args = { travelLength: 100 };

src/slide-potentiometer-element.ts

@@ -1,18 +1,30 @@
-import { css, customElement, html, LitElement, property, svg } from 'lit-element';
+import { css, customElement, html, LitElement, property } from 'lit-element';
 import { analog, ElementPin } from './pin';
 import { clamp } from './utils/clamp';
+import { mmToPix } from './utils/units';
 
 @customElement('wokwi-slide-potentiometer')
 export class SlidePotentiometerElement extends LitElement {
+  @property() travelLength = 30;
   @property() value = 0;
   @property() min = 0;
   @property() max = 100;
   @property() step = 2;
-  readonly pinInfo: ElementPin[] = [
-    { name: 'VCC', x: 1, y: 43, number: 1, signals: [{ type: 'power', signal: 'VCC' }] },
-    { name: 'SIG', x: 1, y: 66.5, number: 2, signals: [analog(0)] },
-    { name: 'GND', x: 207, y: 43, number: 3, signals: [{ type: 'power', signal: 'GND' }] },
-  ];
+
+  get pinInfo(): ElementPin[] {
+    return [
+      { name: 'VCC', x: 1, y: 43, number: 1, signals: [{ type: 'power', signal: 'VCC' }] },
+      { name: 'SIG', x: 1, y: 66.5, number: 2, signals: [analog(0)] },
+      {
+        name: 'GND',
+        x: 93.6 + this.travelLength * mmToPix,
+        y: 43,
+        number: 3,
+        signals: [{ type: 'power', signal: 'GND' }],
+      },
+    ];
+  }
+
   private isPressed = false;
   private zoom = 1;
   private pageToLocalTransformationMatrix: DOMMatrix | null = null;
@@ -34,12 +46,12 @@ export class SlidePotentiometerElement extends LitElement {
   }
 
   render() {
-    const { value, min: minValue, max: maxValue } = this;
-    const tipTravelInMM = 30;
+    const { value, min: minValue, max: maxValue, travelLength } = this;
     // Tip is centered by default
-    const tipBaseOffsetX = -(tipTravelInMM / 2);
-    const tipMovementX = (value / (maxValue - minValue)) * tipTravelInMM;
-    const tipOffSetX = tipMovementX + tipBaseOffsetX;
+    const tipBaseOffsetX = -15;
+    const tipMovementX = (value / (maxValue - minValue)) * travelLength;
+    const tipOffsetX = tipMovementX + tipBaseOffsetX;
+
     return html`
       <input
         tabindex="0"
@@ -55,10 +67,10 @@ export class SlidePotentiometerElement extends LitElement {
         class="hide-input"
       />
       <svg
-        width="55mm"
+        width="${travelLength + 25}mm"
         height="29mm"
         version="1.1"
-        viewBox="0 0 55 29"
+        viewBox="0 0 ${travelLength + 25} 29"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
       >
@@ -89,7 +101,7 @@ export class SlidePotentiometerElement extends LitElement {
             gradientUnits="userSpaceOnUse"
           >
             <stop stop-color="#d2d2d2" offset="0" />
-            <stop stop-color="#2a2a2a" offset="1" />
+            <stop stop-color="#7a7a7a" offset="1" />
           </radialGradient>
           <g id="screw">
             <circle cx="0" cy="0" r="1" fill="#858585" stroke="#000" stroke-width=".05" />
@@ -99,7 +111,7 @@ export class SlidePotentiometerElement extends LitElement {
         <!-- pins -->
         <g fill="#ccc">
           <rect x="0" y="11" width="5" height="0.75" />
-          <rect x="50" y="11" width="5" height="0.75" />
+          <rect x="${travelLength + 20}" y="11" width="5" height="0.75" />
           <rect x="0" y="17.25" width="5" height="0.75" />
         </g>
         <g transform="translate(5 5)">
@@ -108,26 +120,34 @@ export class SlidePotentiometerElement extends LitElement {
             id="sliderCase"
             x="0"
             y="5"
-            width="45"
+            width="${travelLength + 15}"
             height="9"
             rx=".2"
             ry=".2"
             fill="url(#bodyGradient)"
             fill-rule="evenodd"
           />
-          <rect x="3.25" y="8" width="38.5" height="3" rx=".1" ry=".1" fill="#3f1e1e" />
+          <rect
+            x="3.25"
+            y="8"
+            width="${travelLength + 8.5}"
+            height="3"
+            rx=".1"
+            ry=".1"
+            fill="#3f1e1e"
+          />
           <!-- Screw Left -->
           <g transform="translate(1.625 9.5) rotate(45)">
             <use href="#screw" />
           </g>
           <!-- Screw Right -->
-          <g transform="translate(43.375 9.5) rotate(45)">
+          <g transform="translate(${travelLength + 13.375} 9.5) rotate(45)">
             <use href="#screw" />
           </g>
           <!-- Tip -->
           <g
             id="tip"
-            transform="translate(${tipOffSetX} 0)"
+            transform="translate(${tipOffsetX} 0)"
             @mousedown=${this.down}
             @touchstart=${this.down}
             @touchmove=${this.touchMove}
@@ -234,7 +254,7 @@ export class SlidePotentiometerElement extends LitElement {
       localPosition = localPosition.matrixTransform(this.pageToLocalTransformationMatrix);
       const caseBorderWidth = 7.5;
       const tipPositionXinMM = localPosition.x - caseBorderWidth;
-      const mmPerIncrement = 30 / (this.max - this.min);
+      const mmPerIncrement = this.travelLength / (this.max - this.min);
       this.updateValue(Math.round(tipPositionXinMM / mmPerIncrement));
     }
   }