|
1 | 1 | <script lang="ts"> |
2 | | - import { elementInspector } from "@/lib/core/ElementInspector"; |
3 | | - import { |
4 | | - MetaDataStore, |
5 | | - TrackersStore, |
6 | | - UIStore, |
7 | | - } from "@/lib/store/index.svelte"; |
| 2 | + import { elementInspector } from "@/lib/core/ElementInspector"; |
| 3 | + import { |
| 4 | + MetaDataStore, |
| 5 | + TrackersStore, |
| 6 | + UIStore, |
| 7 | + } from "@/lib/store/index.svelte"; |
8 | 8 |
|
9 | | - interface RulerProps { |
10 | | - gridSize?: number; |
11 | | - color?: string; |
12 | | - zIndex?: number; |
13 | | - } |
| 9 | + interface RulerProps { |
| 10 | + gridSize?: number; |
| 11 | + color?: string; |
| 12 | + zIndex?: number; |
| 13 | + } |
14 | 14 |
|
15 | | - let { |
16 | | - gridSize = 8, |
17 | | - color = "#3b82f6", |
18 | | - zIndex = 9998, |
19 | | - }: RulerProps = $props(); |
| 15 | + let { gridSize = 8, color = "#3b82f6", zIndex = 9998 }: RulerProps = $props(); |
20 | 16 |
|
21 | | - const metadataStore = getContext<MetaDataStore>("metadataStore"); |
22 | | - const trackersStore = getContext<TrackersStore>("trackersStore"); |
23 | | - const uiStore = getContext<UIStore>("uiStore"); |
| 17 | + const metadataStore = getContext<MetaDataStore>("metadataStore"); |
| 18 | + const trackersStore = getContext<TrackersStore>("trackersStore"); |
| 19 | + const uiStore = getContext<UIStore>("uiStore"); |
24 | 20 |
|
25 | | - let isDragging = $state(false); |
26 | | - let measurementStart = $state<{ x: number; y: number } | null>( |
27 | | - null, |
28 | | - ); |
29 | | - let measurementEnd = $state<{ x: number; y: number } | null>(null); |
30 | | - let measurements = $state< |
31 | | - Array<{ |
32 | | - id: string; |
33 | | - start: { x: number; y: number }; |
34 | | - end: { x: number; y: number }; |
35 | | - distance: number; |
36 | | - angle: number; |
37 | | - }> |
38 | | - >([]); |
| 21 | + let isDragging = $state(false); |
| 22 | + let measurementStart = $state<{ x: number; y: number } | null>(null); |
| 23 | + let measurementEnd = $state<{ x: number; y: number } | null>(null); |
| 24 | + let measurements = $state< |
| 25 | + Array<{ |
| 26 | + id: string; |
| 27 | + start: { x: number; y: number }; |
| 28 | + end: { x: number; y: number }; |
| 29 | + distance: number; |
| 30 | + angle: number; |
| 31 | + }> |
| 32 | + >([]); |
39 | 33 |
|
40 | | - const mouse = metadataStore.mouse; |
41 | | - const svg = uiStore.svg; |
| 34 | + const mouse = metadataStore.mouse; |
| 35 | + const svg = uiStore.svg; |
42 | 36 | </script> |
43 | 37 |
|
44 | 38 | {#if uiStore.isActive} |
45 | | - <defs> |
46 | | - <marker |
47 | | - id="arrowhead" |
48 | | - markerWidth="10" |
49 | | - markerHeight="7" |
50 | | - refX="9" |
51 | | - refY="3.5" |
52 | | - orient="auto" |
53 | | - > |
54 | | - <polygon points="0 0, 10 3.5, 0 7" fill={color} /> |
55 | | - </marker> |
| 39 | + <defs> |
| 40 | + <marker |
| 41 | + id="arrowhead" |
| 42 | + markerWidth="10" |
| 43 | + markerHeight="7" |
| 44 | + refX="9" |
| 45 | + refY="3.5" |
| 46 | + orient="auto" |
| 47 | + > |
| 48 | + <polygon points="0 0, 10 3.5, 0 7" fill={color} /> |
| 49 | + </marker> |
56 | 50 |
|
57 | | - <pattern |
58 | | - id="grid" |
59 | | - width={gridSize} |
60 | | - height={gridSize} |
61 | | - patternUnits="userSpaceOnUse" |
62 | | - > |
63 | | - <path |
64 | | - d="M {gridSize} 0 L 0 0 0 {gridSize}" |
65 | | - fill="none" |
66 | | - stroke="#e5e7eb" |
67 | | - stroke-width="0.5" |
68 | | - opacity="0.3" |
69 | | - /> |
70 | | - </pattern> |
71 | | - </defs> |
| 51 | + <pattern |
| 52 | + id="grid" |
| 53 | + width={gridSize} |
| 54 | + height={gridSize} |
| 55 | + patternUnits="userSpaceOnUse" |
| 56 | + > |
| 57 | + <path |
| 58 | + d="M {gridSize} 0 L 0 0 0 {gridSize}" |
| 59 | + fill="none" |
| 60 | + stroke="#e5e7eb" |
| 61 | + stroke-width="0.5" |
| 62 | + opacity="0.3" |
| 63 | + /> |
| 64 | + </pattern> |
| 65 | + </defs> |
72 | 66 |
|
73 | | - {#if uiStore.svg.showGrid} |
74 | | - <rect |
75 | | - class="anim" |
76 | | - width="100%" |
77 | | - height="100%" |
78 | | - fill="url(#grid)" |
79 | | - style={`--x: ${metadataStore.mouse.x}; --y:${metadataStore.mouse.y}`} |
80 | | - /> |
81 | | - {/if} |
| 67 | + {#if uiStore.svg.showGrid} |
| 68 | + <rect |
| 69 | + class="anim" |
| 70 | + width="100%" |
| 71 | + height="100%" |
| 72 | + fill="url(#grid)" |
| 73 | + style={`--x: ${metadataStore.mouse.x}; --y:${metadataStore.mouse.y}`} |
| 74 | + /> |
| 75 | + {/if} |
82 | 76 |
|
83 | | - <!-- {#if showMeasurements} |
| 77 | + <!-- {#if showMeasurements} |
84 | 78 | {#each getTrackerDistances() as distance} |
85 | 79 | <g class="tracker-distance"> |
86 | 80 | <line |
|
112 | 106 | {/if} |
113 | 107 |
|
114 | 108 | <style> |
115 | | - /* .anim { |
| 109 | + /* .anim { |
116 | 110 | --x: 0; |
117 | 111 | --y: 0; |
118 | 112 | --sin-x: sin(var(--x)); |
119 | 113 | --cos-y: cos(var(--y)); |
120 | 114 | transition: transform 0.5s cubic-bezier(0.6, -0.28, 0.735, 0.045); |
121 | 115 | transform: scale(1) skewX(calc(--cos-y * 180deg)) |
122 | 116 | skewY(calc(--sin-x * 3600deg)); */ |
123 | | - /* animation: glitch-loop-1 0.5s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55) alternate-reverse; */ |
124 | | - /* transform-origin: center; */ |
125 | | - /* } */ |
| 117 | + /* animation: glitch-loop-1 0.5s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55) alternate-reverse; */ |
| 118 | + /* transform-origin: center; */ |
| 119 | + /* } */ |
126 | 120 |
|
127 | | - @keyframes glitch-loop-1 { |
128 | | - 0% { |
129 | | - transform: scale(1) skewX(0deg) skewY(60deg); |
130 | | - } |
131 | | - 25% { |
132 | | - transform: scale(1) skewX(60deg) skewY(-60deg); |
133 | | - } |
134 | | - 50% { |
135 | | - transform: scale(1) skewX(-60deg) skewY(60deg); |
136 | | - } |
137 | | - 75% { |
138 | | - transform: scale(1) skewX(60deg) skewY(-60deg); |
139 | | - } |
140 | | - 100% { |
141 | | - transform: scale(1) skewX(0deg) skewY(60deg); |
142 | | - } |
143 | | - } |
| 121 | + @keyframes glitch-loop-1 { |
| 122 | + 0% { |
| 123 | + transform: scale(1) skewX(0deg) skewY(60deg); |
| 124 | + } |
| 125 | + 25% { |
| 126 | + transform: scale(1) skewX(60deg) skewY(-60deg); |
| 127 | + } |
| 128 | + 50% { |
| 129 | + transform: scale(1) skewX(-60deg) skewY(60deg); |
| 130 | + } |
| 131 | + 75% { |
| 132 | + transform: scale(1) skewX(60deg) skewY(-60deg); |
| 133 | + } |
| 134 | + 100% { |
| 135 | + transform: scale(1) skewX(0deg) skewY(60deg); |
| 136 | + } |
| 137 | + } |
144 | 138 |
|
145 | | - @keyframes glitch-loop-2 { |
146 | | - 0% { |
147 | | - transform: scale(1) skewX(0deg); |
148 | | - } |
149 | | - 25% { |
150 | | - transform: scale(1) skewX(90deg); |
151 | | - } |
152 | | - 50% { |
153 | | - transform: scale(1) skewX(-90deg); |
154 | | - } |
155 | | - 75% { |
156 | | - transform: scale(1) skewX(90deg); |
157 | | - } |
158 | | - 100% { |
159 | | - transform: scale(1) skewX(0deg); |
160 | | - } |
161 | | - } |
| 139 | + @keyframes glitch-loop-2 { |
| 140 | + 0% { |
| 141 | + transform: scale(1) skewX(0deg); |
| 142 | + } |
| 143 | + 25% { |
| 144 | + transform: scale(1) skewX(90deg); |
| 145 | + } |
| 146 | + 50% { |
| 147 | + transform: scale(1) skewX(-90deg); |
| 148 | + } |
| 149 | + 75% { |
| 150 | + transform: scale(1) skewX(90deg); |
| 151 | + } |
| 152 | + 100% { |
| 153 | + transform: scale(1) skewX(0deg); |
| 154 | + } |
| 155 | + } |
162 | 156 |
|
163 | | - @keyframes glitch-loop-3 { |
164 | | - 0% { |
165 | | - transform: scale(1) skewY(0deg); |
166 | | - } |
167 | | - 25% { |
168 | | - transform: scale(1) skewY(90deg); |
169 | | - } |
170 | | - 50% { |
171 | | - transform: scale(1) skewY(-90deg); |
172 | | - } |
173 | | - 75% { |
174 | | - transform: scale(1) skewY(90deg); |
175 | | - } |
176 | | - 100% { |
177 | | - transform: scale(1) skewY(0deg); |
178 | | - } |
179 | | - } |
| 157 | + @keyframes glitch-loop-3 { |
| 158 | + 0% { |
| 159 | + transform: scale(1) skewY(0deg); |
| 160 | + } |
| 161 | + 25% { |
| 162 | + transform: scale(1) skewY(90deg); |
| 163 | + } |
| 164 | + 50% { |
| 165 | + transform: scale(1) skewY(-90deg); |
| 166 | + } |
| 167 | + 75% { |
| 168 | + transform: scale(1) skewY(90deg); |
| 169 | + } |
| 170 | + 100% { |
| 171 | + transform: scale(1) skewY(0deg); |
| 172 | + } |
| 173 | + } |
180 | 174 | </style> |
0 commit comments