Skip to content

Commit 5a6a025

Browse files
ksassnowskiksassnowski
committed
feat: pass properties along to top-level svg elements
1 parent 0ddb4c1 commit 5a6a025

File tree

8 files changed

+93
-81
lines changed

8 files changed

+93
-81
lines changed

‎src/components/Ellipse.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<ellipse
3+
v-bind="$attrs"
34
:cx="position.x"
45
:cy="position.y"
56
:rx="scaledRadius.x"

‎src/components/Label.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<template>
2-
<g :transform="`rotate(${-rotation}, ${position.x}, ${position.y})`">
2+
<g
3+
v-bind="$attrs"
4+
:transform="`rotate(${-rotation}, ${position.x}, ${position.y})`"
5+
>
36
<rect
47
v-if="border"
58
:x="position.x - scaledBoxWidth / 2"

‎src/components/Line.vue

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
<template>
2-
<line
3-
:x1="from.x"
4-
:y1="from.y"
5-
:x2="to.x"
6-
:y2="to.y"
7-
:stroke="color"
8-
:stroke-width="lineWidth * invScale"
9-
:stroke-dasharray="dashArray"
10-
/>
11-
<Label
12-
v-if="label"
13-
:text="label"
14-
:position="labelPosition"
15-
:color="color"
16-
:size="labelSize"
17-
/>
2+
<g v-bind="$attrs">
3+
<line
4+
:x1="from.x"
5+
:y1="from.y"
6+
:x2="to.x"
7+
:y2="to.y"
8+
:stroke="color"
9+
:stroke-width="lineWidth * invScale"
10+
:stroke-dasharray="dashArray"
11+
/>
12+
<Label
13+
v-if="label"
14+
:text="label"
15+
:position="labelPosition"
16+
:color="color"
17+
:size="labelSize"
18+
/>
19+
</g>
1820
</template>
1921

2022
<script setup lang="ts">

‎src/components/Point.vue

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
<template>
2-
<circle
3-
:cx="scaledPosition.x"
4-
:cy="scaledPosition.y"
5-
:r="radius"
6-
:fill="filled ? color : 'none'"
7-
:stroke="filled ? 'none' : color"
8-
:stroke-width="lineWidth * invScale"
9-
/>
2+
<g v-bind="$attrs">
3+
<circle
4+
:cx="scaledPosition.x"
5+
:cy="scaledPosition.y"
6+
:r="radius"
7+
:fill="filled ? color : 'none'"
8+
:stroke="filled ? 'none' : color"
9+
:stroke-width="lineWidth * invScale"
10+
/>
1011

11-
<Label
12-
v-if="label"
13-
:text="label"
14-
:position="labelPosition"
15-
:color="color"
16-
size="small"
17-
/>
12+
<Label
13+
v-if="label"
14+
:text="label"
15+
:position="labelPosition"
16+
:color="color"
17+
size="small"
18+
/>
19+
</g>
1820
</template>
1921

2022
<script setup lang="ts">

‎src/components/PolyLine.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<path
3+
v-bind="$attrs"
34
:d="`M ${parsedPoints[0].x} ${parsedPoints[0].y} L ${parsedPoints
45
.slice(1)
56
.map((point) => `${point.x} ${point.y}`)

‎src/components/Polygon.vue

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
<template>
2-
<polygon
3-
:points="`${points.map((p) => `${p.x},${p.y}`).join(' ')}`"
4-
:stroke="stroke"
5-
:stroke-width="lineWidth * invScale"
6-
:fill="fill"
7-
/>
2+
<g v-bind="$attrs">
3+
<polygon
4+
:points="`${points.map((p) => `${p.x},${p.y}`).join(' ')}`"
5+
:stroke="stroke"
6+
:stroke-width="lineWidth * invScale"
7+
:fill="fill"
8+
/>
89

9-
<Angle
10-
v-if="props.angles"
11-
v-for="angle in angles"
12-
:a="angle.a"
13-
:b="angle.b"
14-
:c="angle.c"
15-
:radius="angleRadius"
16-
:dashed="angleDashed"
17-
/>
10+
<Angle
11+
v-if="props.angles"
12+
v-for="angle in angles"
13+
:a="angle.a"
14+
:b="angle.b"
15+
:c="angle.c"
16+
:radius="angleRadius"
17+
:dashed="angleDashed"
18+
/>
19+
</g>
1820
</template>
1921

2022
<script setup lang="ts">

‎src/components/Sector.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<path
3+
v-bind="$attrs"
34
:d="`M ${position.x} ${position.y} L ${line1To.x} ${line1To.y} A ${scaledRadius} ${scaledRadius} 0 ${sweep} 0 ${line2To.x} ${line2To.y} L ${position.x} ${position.y} z`"
45
:stroke="strokeColor"
56
:stroke-width="lineWidth * invScale"

‎src/components/Vector.vue

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,40 @@
11
<template>
2-
<defs>
3-
<marker
4-
:id="id"
5-
:refY="arrowSize / 3"
6-
:markerWidth="arrowSize"
7-
:markerHeight="arrowSize / 1.5"
8-
orient="auto"
9-
markerUnits="userSpaceOnUse"
10-
>
11-
<polygon
12-
:points="`0 0, ${arrowSize} ${arrowSize / 3}, 0 ${arrowSize / 1.5}`"
13-
:fill="color"
14-
/>
15-
</marker>
16-
</defs>
2+
<g v-bind="$attrs">
3+
<defs>
4+
<marker
5+
:id="id"
6+
:refY="arrowSize / 3"
7+
:markerWidth="arrowSize"
8+
:markerHeight="arrowSize / 1.5"
9+
orient="auto"
10+
markerUnits="userSpaceOnUse"
11+
>
12+
<polygon
13+
:points="`0 0, ${arrowSize} ${arrowSize / 3}, 0 ${arrowSize / 1.5}`"
14+
:fill="color"
15+
/>
16+
</marker>
17+
</defs>
1718

18-
<line
19-
:x1="from.x"
20-
:y1="from.y"
21-
:x2="to.x"
22-
:y2="to.y"
23-
:stroke-width="lineWidth * invScale"
24-
:stroke="color"
25-
:stroke-dasharray="dashArray"
26-
:marker-end="`url(#${id})`"
27-
/>
19+
<line
20+
:x1="from.x"
21+
:y1="from.y"
22+
:x2="to.x"
23+
:y2="to.y"
24+
:stroke-width="lineWidth * invScale"
25+
:stroke="color"
26+
:stroke-dasharray="dashArray"
27+
:marker-end="`url(#${id})`"
28+
/>
2829

29-
<Label
30-
v-if="label"
31-
:text="label"
32-
:position="labelPosition"
33-
:color="color"
34-
:size="labelSize"
35-
/>
36-
37-
<slot />
30+
<Label
31+
v-if="label"
32+
:text="label"
33+
:position="labelPosition"
34+
:color="color"
35+
:size="labelSize"
36+
/>
37+
</g>
3838
</template>
3939

4040
<script setup lang="ts">

0 commit comments

Comments
 (0)