Skip to content

Commit b395c3f

Browse files
bonnyr-f5bonnyr-f5
committed
modified transformations to ensure that all used coord units match and the element is the appropriate size
1 parent 805a1bf commit b395c3f

File tree

2 files changed

+50
-55
lines changed

2 files changed

+50
-55
lines changed

‎src/vid2805-dual-stepper-element.stories.ts

-9
Original file line numberDiff line numberDiff line change
@@ -64,15 +64,6 @@ const Template = ({
6464

6565
export const Default = Template.bind({});
6666
Default.args = {
67-
// outerLength: 20,
68-
// outerAngle: 0,
69-
// outerColour: 'grey',
70-
// outerShape: 'plain',
71-
// innerLength: 20,
72-
// innerAngle: 0,
73-
// innerColour: 'darkgrey',
74-
// innerShape: 'plain',
75-
7667
innerHand: new StepperHand(25, 'red', 'arrow', 225),
7768
outerHand: new StepperHand(30, 'green', 'arrow', 270),
7869
};

‎src/vid2805-dual-stepper-element.ts

+50-46
Original file line numberDiff line numberDiff line change
@@ -61,17 +61,19 @@ export class VID2805DualStepperElement extends LitElement {
6161

6262
get pinInfo(): ElementPin[] {
6363
const { x, y, innerOff, outerOff, trY } = this.coords();
64-
const factor = 1;
64+
const pinX = (x: number) => {
65+
return (21.5 + x * 2.54) * mmToPix;
66+
};
6567

6668
const pi = [
67-
{ name: 'A1+', y: 10, x: 10 * factor, number: 1, signals: [] },
68-
{ name: 'A1-', y: trY, x: 65 * factor, number: 2, signals: [] },
69-
{ name: 'B1+', y: trY, x: 72 * factor, number: 3, signals: [] },
70-
{ name: 'B1-', y: trY, x: 79 * factor, number: 4, signals: [] },
71-
{ name: 'A2+', y: trY, x: 86 * factor, number: 5, signals: [] },
72-
{ name: 'A2-', y: trY, x: 93 * factor, number: 6, signals: [] },
73-
{ name: 'B2+', y: trY, x: 100 * factor, number: 7, signals: [] },
74-
{ name: 'B2-', y: trY, x: 107 * factor, number: 8, signals: [] },
69+
{ name: 'A1+', y: trY, x: pinX(0), number: 1, signals: [] },
70+
{ name: 'A1-', y: trY, x: pinX(1), number: 2, signals: [] },
71+
{ name: 'B1+', y: trY, x: pinX(2), number: 3, signals: [] },
72+
{ name: 'B1-', y: trY, x: pinX(3), number: 4, signals: [] },
73+
{ name: 'A2+', y: trY, x: pinX(4), number: 5, signals: [] },
74+
{ name: 'A2-', y: trY, x: pinX(5), number: 6, signals: [] },
75+
{ name: 'B2+', y: trY, x: pinX(6), number: 7, signals: [] },
76+
{ name: 'B2-', y: trY, x: pinX(7), number: 8, signals: [] },
7577
];
7678

7779
console.debug(pi);
@@ -112,55 +114,60 @@ export class VID2805DualStepperElement extends LitElement {
112114
console.debug(x);
113115
console.debug(y);
114116

115-
const h = html`
116-
<svg id="Layer_2" xmlns="http://www.w3.org/2000/svg" width=70mm height=70mm viewBox="0 0 180 180">
117+
return html`
118+
<svg id="VID2805" xmlns="http://www.w3.org/2000/svg" width=70mm height=70mm viewBox="0 0 265 265">
117119
<defs>
118-
<style>.cls-1{fill:#939598;}.cls-2{fill:#f1f2f2;}.cls-3{fill:#808285;}.cls-4{fill:#ed1f24;}.cls-5{fill:#70bf44;}.cls-6{fill:#414042;}
119-
.cls-h{fill:"blue";stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:.1px;
120-
transform-box: fill-box;
121-
}
122-
120+
<style>
121+
.cls-1{fill:#939598;}
122+
.cls-2{fill:#d2d2d2;}
123+
.cls-3{fill:#808285;}
124+
.cls-4{fill:#ed1f24;}
125+
.cls-5{fill:#70bf44;}
126+
.cls-6{fill:#414042;}
127+
.cls-h{fill:"blue";stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:.1px;transform-box:fill-box;}
123128
</style>
129+
<linearGradient
130+
id="hole-gradient"
131+
>
132+
<stop stop-color="#4f4f4f" offset="-25%" />
133+
<stop stop-color="grey" offset="75%" />
134+
</linearGradient>
124135
</defs>
125-
<g id="Layer_1-2" transform="translate(0,${trY})">
126-
<g id="scaled_body">
127-
<g id="pins" transform="scale(1)">
128-
<path id="pin-1" class="cls-3" d="m 58 5 v -5 c 0 -2 -2 -2 -2 0 v 5 z" />
129-
<use href="#pin-1" x=7 />
130-
<use href="#pin-1" x=14 />
131-
<use href="#pin-1" x=21 />
132-
<use href="#pin-1" x=28 />
133-
<use href="#pin-1" x=35 />
134-
<use href="#pin-1" x=42 />
135-
<use href="#pin-1" x=49 />
136-
<!-- <path id="pin-2" class="cls-3" d="m 65 0 v 5 c 0 2 2 2 2 0 v -5 z" />
137-
<path id="pin-3" class="cls-3" d="m 72 0 v 5 c 0 2 2 2 2 0 v -5 z" />
138-
<path id="pin-4" class="cls-3" d="m 79 0 v 5 c 0 2 2 2 2 0 v -5 z" />
139-
<path id="pin-5" class="cls-3" d="m 86 0 v 5 c 0 2 2 2 2 0 v -5 z" />
140-
<path id="pin-6" class="cls-3" d="m 93 0 v 5 c 0 2 2 2 2 0 v -5 z" />
141-
<path id="pin-7" class="cls-3" d="m 100 0 v 5 c 0 2 2 2 2 0 v -5 z" />
142-
<path id="pin-8" class="cls-3" d="m 107 0 v 5 c 0 2 2 2 2 0 v -5 z" /> -->
143-
</g>
136+
<g id="vid2805-translated" transform="translate(0,${trY})">
137+
138+
<!-- pins - translate to top of base, between holes -->
139+
<g id="pins" transform="scale(${mmToPix}) translate(21 3) ">
140+
<path id="pin-1" class="cls-3" d="m 0 0 v -3 c 0 -1 1 -1 1 0 v 3 z" />
141+
<use href="#pin-1" x=2.54 />
142+
<use href="#pin-1" x=5.08 />
143+
<use href="#pin-1" x=7.62 />
144+
<use href="#pin-1" x=10.16 />
145+
<use href="#pin-1" x=12.70 />
146+
<use href="#pin-1" x=15.24 />
147+
<use href="#pin-1" x=17.78 />
148+
</g>
149+
150+
<g id="scaled_body" transform="scale(1.333)">
144151
<path id="base" class="cls-6" d="M170.08,32.12c-4.98-15.86-18.92-27.75-35.9-29.71-1.2-1.4-2.96-2.31-4.96-2.31s-3.76,.91-4.96,2.31c-2.13,.25-4.2,.67-6.23,1.22H51.81c-1.93-.52-3.9-.92-5.92-1.17-1.2-1.48-3.01-2.45-5.07-2.45s-3.82,.94-5.02,2.39C19,4.27,5.19,15.86,0,31.41v27.09c5.15,15.43,18.82,26.97,35.45,28.97,1.2,1.56,3.06,2.58,5.17,2.58s3.98-1.02,5.17-2.58c2.18-.26,4.3-.7,6.37-1.28H117.67c2.07,.58,4.19,1.01,6.37,1.28,1.2,1.56,3.06,2.58,5.17,2.58s3.98-1.02,5.17-2.58c16.89-2.04,30.72-13.89,35.69-29.68v-25.67Z" />
145152
<g id="ribs">
146153
<path class="cls-3" d="M51.36,17.58l7.77-13.95h-5.11l-17.04,30.61c-.85-.27-1.74-.44-2.66-.5L30.9,3.26c-1.48,.34-2.93,.77-4.35,1.27l3.34,29.78c-1.43,.48-2.71,1.23-3.83,2.2l-13.79-10.54-.03,.03c-.38-.26-.82-.44-1.31-.44-1.33,0-2.4,1.08-2.4,2.4,0,1.2,.9,2.16,2.06,2.33l12.75,9.75c-.42,.84-.77,1.72-.97,2.67H.22v4.47H22.3c.18,1.01,.51,1.97,.95,2.87l-12.69,9.94c-1.14,.18-2.03,1.13-2.03,2.33,0,1.33,1.08,2.4,2.4,2.4,.79,0,1.46-.4,1.89-.99l.08,.1,13.03-10.2c1.1,.98,2.37,1.75,3.78,2.25l-3.18,29.5c1.42,.5,2.87,.93,4.35,1.27l3.25-30.13c1.05-.05,2.05-.25,3.01-.57l16.78,30.25h5.11l-7.82-14.1H118.91l-7.85,14.1h5.11l16.81-30.2c.81,.25,1.66,.42,2.54,.49l3.38,30.17c1.48-.34,2.93-.78,4.35-1.27l-3.3-29.44c1.59-.52,3.04-1.36,4.24-2.48l12.76,9.75c.36,.87,1.22,1.49,2.22,1.49,1.33,0,2.4-1.08,2.4-2.4,0-.81-.43-1.49-1.04-1.93l.02-.02-13.75-10.51c.38-.84,.67-1.74,.84-2.67h22.43v-4.47h-22.49c-.19-.88-.5-1.7-.88-2.49l12.62-9.88c1.25-.09,2.24-1.1,2.24-2.37s-1.08-2.4-2.4-2.4c-.3,0-.58,.07-.85,.17l-.13-.17-14.15,11.08c-1.13-1.02-2.45-1.8-3.91-2.3l3.21-29.78c-1.42-.5-2.87-.93-4.35-1.27l-3.28,30.45c-.89,.05-1.75,.21-2.57,.46L116.18,3.62h-5.11l7.74,13.95h-31.55V3.62h-4.47v13.95h-31.43Zm31.43,50.05H48.73l-7.71-13.9c1.93-1.67,3.3-3.95,3.77-6.56h28.93c.84,4.63,4.45,8.29,9.07,9.18v11.28Zm0-33.75c-4.5,.87-8.06,4.36-9.01,8.83h-29.04c-.54-2.53-1.94-4.71-3.85-6.32l7.79-13.99h34.12v11.48Zm4.47-11.48h34.22l7.7,13.88c-1.98,1.61-3.43,3.84-3.98,6.43h-1.92c-1.03-5.27-5.66-9.25-11.23-9.25s-10.21,3.98-11.23,9.25h-4.65c-.95-4.43-4.45-7.92-8.91-8.82v-11.49Zm0,33.94c4.57-.93,8.13-4.57,8.96-9.17h4.6c1.05,5.24,5.68,9.2,11.23,9.2s10.18-3.95,11.23-9.2h1.87c.49,2.68,1.92,5,3.92,6.68l-7.67,13.77h-34.14v-11.29Z" />
147154
</g>
148155
<g id="holes">
149156
<g>
150-
<circle class="cls-2" cx="40.81" cy="6.55" r="4.83" />
151-
<path class="cls-1" d="M40.81,3.32c1.78,0,3.23,1.45,3.23,3.23s-1.45,3.23-3.23,3.23-3.23-1.45-3.23-3.23,1.45-3.23,3.23-3.23m0-3.2c-3.55,0-6.43,2.88-6.43,6.43s2.88,6.43,6.43,6.43,6.43-2.88,6.43-6.43S44.36,.12,40.81,.12h0Z" />
157+
<circle cx="40.75" cy="6.55" r="6.5" class="cls-1" />
158+
<circle cx="40.75" cy="6.55" r="3.25" fill="url(#hole-gradient)" />
152159
</g>
153160
<g>
154-
<path class="cls-2" d="M40.62,88.33c-2.66,0-4.83-2.17-4.83-4.83s2.17-4.83,4.83-4.83,4.83,2.17,4.83,4.83-2.17,4.83-4.83,4.83Z" />
155-
<path class="cls-1" d="M40.62,80.26c1.78,0,3.23,1.45,3.23,3.23s-1.45,3.23-3.23,3.23-3.23-1.45-3.23-3.23,1.45-3.23,3.23-3.23m0-3.2c-3.55,0-6.43,2.88-6.43,6.43s2.88,6.43,6.43,6.43,6.43-2.88,6.43-6.43-2.88-6.43-6.43-6.43h0Z" />
161+
<circle cx="40.75" cy="83.5" r="6.5" class="cls-1" />
162+
<circle cx="40.75" cy="83.5" r="3.25" fill="url(#hole-gradient)"/>
156163
</g>
157164
<g>
158-
<path class="cls-2" d="M129.22,88.32c-2.66,0-4.83-2.17-4.83-4.83s2.17-4.83,4.83-4.83,4.83,2.17,4.83,4.83-2.17,4.83-4.83,4.83Z" />
159-
<path class="cls-1" d="M129.22,80.26c1.78,0,3.23,1.45,3.23,3.23s-1.45,3.23-3.23,3.23-3.23-1.45-3.23-3.23,1.45-3.23,3.23-3.23m0-3.2c-3.55,0-6.43,2.88-6.43,6.43s2.88,6.43,6.43,6.43,6.43-2.88,6.43-6.43-2.88-6.43-6.43-6.43h0Z" />
165+
<circle cx="129.25" cy="6.55" r="6.5" class="cls-1" />
166+
<circle cx="129.25" cy="6.55" r="3.25" fill="url(#hole-gradient)" />
160167
</g>
161168
<g>
162-
<path class="cls-2" d="M129.22,11.38c-2.66,0-4.83-2.17-4.83-4.83s2.17-4.83,4.83-4.83,4.83,2.17,4.83,4.83-2.17,4.83-4.83,4.83Z" />
163-
<path class="cls-1" d="M129.22,3.32c1.78,0,3.23,1.45,3.23,3.23s-1.45,3.23-3.23,3.23-3.23-1.45-3.23-3.23,1.45-3.23,3.23-3.23m0-3.2c-3.55,0-6.43,2.88-6.43,6.43s2.88,6.43,6.43,6.43,6.43-2.88,6.43-6.43S132.77,.12,129.22,.12h0Z" />
169+
<circle cx="129.25" cy="83.5" r="6.5" class="cls-1" />
170+
<circle cx="129.25" cy="83.5" r="3.25" fill="url(#hole-gradient)" />
164171
</g>
165172
</g>
166173
<g id="hours">
@@ -180,8 +187,5 @@ export class VID2805DualStepperElement extends LitElement {
180187
</g>
181188
</g>
182189
</svg>`;
183-
184-
console.debug(h);
185-
return h;
186190
}
187191
}

0 commit comments

Comments
 (0)