@mhkeller/layercake-annotations 0.3.0 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/Editor.svelte +6 -3
  2. package/dist/Static.svelte +4 -2
  3. package/dist/components/ArrowheadMarker.svelte +3 -3
  4. package/dist/components/ArrowheadMarker.svelte.d.ts +2 -0
  5. package/dist/components/Arrows.svelte +4 -4
  6. package/dist/components/Arrows.svelte.d.ts +2 -0
  7. package/package.json +2 -2
package/dist/Editor.svelte CHANGED
@@ -20,6 +20,8 @@
20
20
  import createRef from './modules/createRef.svelte.js';
21
21
  import newAnnotation from './modules/newAnnotation.js';
22
22
 
23
+ const markerId = $props.id();
24
+
23
25
  /** @type {{ annotations?: Annotation[], containerClass?: string }} */
24
26
  let { annotations: annos = $bindable([]), containerClass } = $props();
25
27
 
@@ -178,11 +180,11 @@
178
180
  </script>
179
181
 
180
182
  {#snippet defs()}
181
- <ArrowheadMarker />
183
+ <ArrowheadMarker {markerId} />
182
184
  {/snippet}
183
185
 
184
186
  <Svg {defs}>
185
- <Arrows annotations={annos} />
187
+ <Arrows annotations={annos} {markerId} />
186
188
  </Svg>
187
189
 
188
190
  <Html>
@@ -222,7 +224,8 @@
222
224
  z-index: 1;
223
225
  pointer-events: none;
224
226
  }
225
- .layercake-annotations :global(.draggable) {
227
+ .layercake-annotations :global(.draggable),
228
+ .layercake-annotations :global(.arrow-zone) {
226
229
  pointer-events: auto;
227
230
  }
228
231
  </style>
package/dist/Static.svelte CHANGED
@@ -9,14 +9,16 @@
9
9
 
10
10
  /** @type {{ annotations?: Annotation[] }} */
11
11
  let { annotations = [] } = $props();
12
+
13
+ const markerId = $props.id();
12
14
  </script>
13
15
 
14
16
  {#snippet defs()}
15
- <ArrowheadMarker />
17
+ <ArrowheadMarker {markerId} />
16
18
  {/snippet}
17
19
 
18
20
  <Svg {defs} pointerEvents={false}>
19
- <Arrows {annotations} />
21
+ <Arrows {annotations} {markerId} />
20
22
  </Svg>
21
23
 
22
24
  <Html pointerEvents={false}>
package/dist/components/ArrowheadMarker.svelte CHANGED
@@ -3,12 +3,12 @@
3
3
  Generates an SVG marker containing a marker for a triangle makes a nice arrowhead. Add it to the named slot called "defs" on the SVG layout component.
4
4
  -->
5
5
  <script>
6
- /** @type {{ fill?: string, stroke?: string }} */
7
- let { fill = '#000', stroke = '#000' } = $props();
6
+ /** @type {{ markerId: string, fill?: string, stroke?: string }} */
7
+ let { markerId, fill = '#000', stroke = '#000' } = $props();
8
8
  </script>
9
9
 
10
10
  <marker
11
- id="layercake-annotation-arrowhead"
11
+ id={markerId}
12
12
  viewBox="-10 -10 20 20"
13
13
  markerWidth="17"
14
14
  markerHeight="17"
package/dist/components/ArrowheadMarker.svelte.d.ts CHANGED
@@ -5,10 +5,12 @@ type ArrowheadMarker = {
5
5
  };
6
6
  /** Generates an SVG marker containing a marker for a triangle makes a nice arrowhead. Add it to the named slot called "defs" on the SVG layout component. */
7
7
  declare const ArrowheadMarker: import("svelte").Component<{
8
+ markerId: string;
8
9
  fill?: string;
9
10
  stroke?: string;
10
11
  }, {}, "">;
11
12
  type $$ComponentProps = {
13
+ markerId: string;
12
14
  fill?: string;
13
15
  stroke?: string;
14
16
  };
package/dist/components/Arrows.svelte CHANGED
@@ -18,8 +18,8 @@
18
18
  import { createArrowPath } from '../modules/arrowUtils.js';
19
19
  import { getArrowSource, getArrowTarget } from '../modules/coordinates.js';
20
20
 
21
- /** @type {{ annotations?: Annotation[] }} */
22
- let { annotations = [] } = $props();
21
+ /** @type {{ annotations?: Annotation[], markerId: string }} */
22
+ let { annotations = [], markerId } = $props();
23
23
 
24
24
  const { xScale, yScale, x, y, width, height } = getContext('LayerCake');
25
25
 
@@ -127,7 +127,7 @@
127
127
  {#if !isBeingDragged}
128
128
  {@const pathD = getStaticPath(anno, arrow)}
129
129
  <!-- Visible arrow -->
130
- <path class="arrow-visible" marker-end="url(#layercake-annotation-arrowhead)" d={pathD}
130
+ <path class="arrow-visible" marker-end="url(#{markerId})" d={pathD}
131
131
  ></path>
132
132
  <!-- Invisible hit area for clicking (edit mode only) -->
133
133
  {#if modifyArrow}
@@ -148,7 +148,7 @@
148
148
 
149
149
  <!-- Arrow being dragged (new or existing) - rendered with live coordinates -->
150
150
  {#if dragPath}
151
- <path class="arrow-visible" marker-end="url(#layercake-annotation-arrowhead)" d={dragPath}
151
+ <path class="arrow-visible" marker-end="url(#{markerId})" d={dragPath}
152
152
  ></path>
153
153
  {/if}
154
154
  </g>
package/dist/components/Arrows.svelte.d.ts CHANGED
@@ -14,7 +14,9 @@ type Arrows = {
14
14
  */
15
15
  declare const Arrows: import("svelte").Component<{
16
16
  annotations?: Annotation[];
17
+ markerId: string;
17
18
  }, {}, "">;
18
19
  type $$ComponentProps = {
19
20
  annotations?: Annotation[];
21
+ markerId: string;
20
22
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mhkeller/layercake-annotations",
3
- "version": "0.3.0",
3
+ "version": "0.3.2",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "vite build && pnpm package",
@@ -43,7 +43,7 @@
43
43
  "prettier": "^3.1.1",
44
44
  "prettier-plugin-svelte": "^3.1.2",
45
45
  "publint": "^0.2.0",
46
- "svelte": "^5.0.0",
46
+ "svelte": "^5.46.1",
47
47
  "svelte-check": "^4.0.0",
48
48
  "typescript": "^5.0.0",
49
49
  "vite": "^5.0.11"