layerchart 2.0.0-next.1 → 2.0.0-next.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 (266) hide show
  1. package/dist/actions/movable.d.ts +28 -0
  2. package/dist/actions/movable.js +91 -0
  3. package/dist/components/AnnotationLine.svelte +155 -0
  4. package/dist/components/AnnotationLine.svelte.d.ts +28 -0
  5. package/dist/components/AnnotationPoint.svelte +121 -0
  6. package/dist/components/AnnotationPoint.svelte.d.ts +32 -0
  7. package/dist/components/AnnotationRange.svelte +147 -0
  8. package/dist/components/AnnotationRange.svelte.d.ts +40 -0
  9. package/dist/components/Arc.svelte +344 -151
  10. package/dist/components/Arc.svelte.d.ts +138 -0
  11. package/dist/components/Area.svelte +165 -149
  12. package/dist/components/Area.svelte.d.ts +45 -0
  13. package/dist/components/Axis.svelte +287 -174
  14. package/dist/components/Axis.svelte.d.ts +116 -0
  15. package/dist/components/Bar.svelte +163 -107
  16. package/dist/components/Bar.svelte.d.ts +48 -0
  17. package/dist/components/Bars.svelte +54 -68
  18. package/dist/components/Bars.svelte.d.ts +27 -0
  19. package/dist/components/Blur.svelte +31 -7
  20. package/dist/components/Blur.svelte.d.ts +23 -21
  21. package/dist/components/Bounds.svelte +49 -19
  22. package/dist/components/Bounds.svelte.d.ts +24 -50
  23. package/dist/components/BrushContext.svelte +296 -168
  24. package/dist/components/BrushContext.svelte.d.ts +97 -65
  25. package/dist/components/Calendar.svelte +116 -59
  26. package/dist/components/Calendar.svelte.d.ts +50 -31
  27. package/dist/components/Chart.svelte +1289 -398
  28. package/dist/components/Chart.svelte.d.ts +535 -410
  29. package/dist/components/ChartClipPath.svelte +37 -15
  30. package/dist/components/ChartClipPath.svelte.d.ts +21 -19
  31. package/dist/components/Circle.svelte +124 -85
  32. package/dist/components/Circle.svelte.d.ts +52 -0
  33. package/dist/components/CircleClipPath.svelte +76 -16
  34. package/dist/components/CircleClipPath.svelte.d.ts +46 -0
  35. package/dist/components/ClipPath.svelte +60 -15
  36. package/dist/components/ClipPath.svelte.d.ts +40 -27
  37. package/dist/components/ColorRamp.svelte +75 -9
  38. package/dist/components/ColorRamp.svelte.d.ts +37 -19
  39. package/dist/components/ComputedStyles.svelte +17 -5
  40. package/dist/components/ComputedStyles.svelte.d.ts +11 -19
  41. package/dist/components/Connector.svelte +149 -0
  42. package/dist/components/Connector.svelte.d.ts +51 -0
  43. package/dist/components/Dagre.svelte +211 -122
  44. package/dist/components/Dagre.svelte.d.ts +119 -56
  45. package/dist/components/ForceSimulation.svelte +215 -90
  46. package/dist/components/ForceSimulation.svelte.d.ts +82 -35
  47. package/dist/components/Frame.svelte +33 -13
  48. package/dist/components/Frame.svelte.d.ts +13 -17
  49. package/dist/components/GeoCircle.svelte +29 -16
  50. package/dist/components/GeoCircle.svelte.d.ts +22 -24
  51. package/dist/components/GeoContext.svelte +113 -72
  52. package/dist/components/GeoContext.svelte.d.ts +49 -41
  53. package/dist/components/GeoEdgeFade.svelte +47 -12
  54. package/dist/components/GeoEdgeFade.svelte.d.ts +17 -19
  55. package/dist/components/GeoPath.svelte +157 -127
  56. package/dist/components/GeoPath.svelte.d.ts +48 -36
  57. package/dist/components/GeoPoint.svelte +52 -20
  58. package/dist/components/GeoPoint.svelte.d.ts +25 -22
  59. package/dist/components/GeoSpline.svelte +75 -26
  60. package/dist/components/GeoSpline.svelte.d.ts +29 -20
  61. package/dist/components/GeoTile.svelte +100 -49
  62. package/dist/components/GeoTile.svelte.d.ts +38 -23
  63. package/dist/components/GeoVisible.svelte +17 -9
  64. package/dist/components/GeoVisible.svelte.d.ts +10 -18
  65. package/dist/components/Graticule.svelte +28 -13
  66. package/dist/components/Graticule.svelte.d.ts +11 -52
  67. package/dist/components/Grid.svelte +226 -114
  68. package/dist/components/Grid.svelte.d.ts +70 -0
  69. package/dist/components/Group.svelte +132 -105
  70. package/dist/components/Group.svelte.d.ts +53 -0
  71. package/dist/components/Highlight.svelte +409 -307
  72. package/dist/components/Highlight.svelte.d.ts +107 -0
  73. package/dist/components/Hull.svelte +96 -45
  74. package/dist/components/Hull.svelte.d.ts +40 -30
  75. package/dist/components/Labels.svelte +125 -46
  76. package/dist/components/Labels.svelte.d.ts +70 -27
  77. package/dist/components/Legend.svelte +374 -190
  78. package/dist/components/Legend.svelte.d.ts +95 -44
  79. package/dist/components/Line.svelte +163 -125
  80. package/dist/components/Line.svelte.d.ts +75 -0
  81. package/dist/components/LinearGradient.svelte +153 -78
  82. package/dist/components/LinearGradient.svelte.d.ts +66 -31
  83. package/dist/components/Link.svelte +160 -104
  84. package/dist/components/Link.svelte.d.ts +54 -0
  85. package/dist/components/Marker.svelte +100 -39
  86. package/dist/components/Marker.svelte.d.ts +59 -27
  87. package/dist/components/MarkerWrapper.svelte +35 -0
  88. package/dist/components/MarkerWrapper.svelte.d.ts +18 -0
  89. package/dist/components/MonthPath.svelte +65 -20
  90. package/dist/components/MonthPath.svelte.d.ts +23 -17
  91. package/dist/components/MotionPath.svelte +80 -24
  92. package/dist/components/MotionPath.svelte.d.ts +46 -27
  93. package/dist/components/Pack.svelte +53 -17
  94. package/dist/components/Pack.svelte.d.ts +42 -21
  95. package/dist/components/Partition.svelte +64 -22
  96. package/dist/components/Partition.svelte.d.ts +49 -26
  97. package/dist/components/Pattern.svelte +297 -11
  98. package/dist/components/Pattern.svelte.d.ts +103 -19
  99. package/dist/components/Pie.svelte +122 -76
  100. package/dist/components/Pie.svelte.d.ts +65 -51
  101. package/dist/components/Point.svelte +20 -9
  102. package/dist/components/Point.svelte.d.ts +16 -20
  103. package/dist/components/Points.svelte +148 -137
  104. package/dist/components/Points.svelte.d.ts +45 -34
  105. package/dist/components/RadialGradient.svelte +143 -70
  106. package/dist/components/RadialGradient.svelte.d.ts +69 -31
  107. package/dist/components/Rect.svelte +121 -102
  108. package/dist/components/Rect.svelte.d.ts +36 -0
  109. package/dist/components/RectClipPath.svelte +82 -18
  110. package/dist/components/RectClipPath.svelte.d.ts +55 -0
  111. package/dist/components/Rule.svelte +105 -62
  112. package/dist/components/Rule.svelte.d.ts +40 -19
  113. package/dist/components/Sankey.svelte +132 -55
  114. package/dist/components/Sankey.svelte.d.ts +61 -31
  115. package/dist/components/Spline.svelte +281 -218
  116. package/dist/components/Spline.svelte.d.ts +95 -0
  117. package/dist/components/Text.svelte +437 -176
  118. package/dist/components/Text.svelte.d.ts +130 -0
  119. package/dist/components/Threshold.svelte +48 -16
  120. package/dist/components/Threshold.svelte.d.ts +29 -31
  121. package/dist/components/TileImage.svelte +103 -30
  122. package/dist/components/TileImage.svelte.d.ts +48 -23
  123. package/dist/components/TransformContext.svelte +365 -171
  124. package/dist/components/TransformControls.svelte +50 -26
  125. package/dist/components/TransformControls.svelte.d.ts +27 -19
  126. package/dist/components/Tree.svelte +74 -33
  127. package/dist/components/Tree.svelte.d.ts +42 -30
  128. package/dist/components/Treemap.svelte +119 -42
  129. package/dist/components/Treemap.svelte.d.ts +75 -27
  130. package/dist/components/Voronoi.svelte +106 -75
  131. package/dist/components/Voronoi.svelte.d.ts +40 -41
  132. package/dist/components/charts/ArcChart.svelte +464 -0
  133. package/dist/components/charts/ArcChart.svelte.d.ts +90 -0
  134. package/dist/components/charts/AreaChart.svelte +450 -393
  135. package/dist/components/charts/AreaChart.svelte.d.ts +61 -0
  136. package/dist/components/charts/BarChart.svelte +454 -389
  137. package/dist/components/charts/BarChart.svelte.d.ts +76 -0
  138. package/dist/components/charts/ChartAnnotations.svelte +37 -0
  139. package/dist/components/charts/ChartAnnotations.svelte.d.ts +10 -0
  140. package/dist/components/charts/DefaultTooltip.svelte +60 -0
  141. package/dist/components/charts/DefaultTooltip.svelte.d.ts +10 -0
  142. package/dist/components/charts/LineChart.svelte +369 -314
  143. package/dist/components/charts/LineChart.svelte.d.ts +53 -0
  144. package/dist/components/charts/PieChart.svelte +458 -316
  145. package/dist/components/charts/PieChart.svelte.d.ts +137 -353
  146. package/dist/components/charts/ScatterChart.svelte +334 -296
  147. package/dist/components/charts/ScatterChart.svelte.d.ts +39 -0
  148. package/dist/components/charts/index.d.ts +8 -0
  149. package/dist/components/charts/index.js +7 -0
  150. package/dist/components/charts/types.d.ts +253 -0
  151. package/dist/components/charts/utils.svelte.d.ts +30 -0
  152. package/dist/components/charts/utils.svelte.js +55 -0
  153. package/dist/components/index.d.ts +76 -4
  154. package/dist/components/index.js +76 -5
  155. package/dist/components/layout/Canvas.svelte +321 -155
  156. package/dist/components/layout/Canvas.svelte.d.ts +104 -55
  157. package/dist/components/layout/Html.svelte +82 -42
  158. package/dist/components/layout/Html.svelte.d.ts +39 -28
  159. package/dist/components/layout/Layer.svelte +39 -0
  160. package/dist/components/layout/Layer.svelte.d.ts +17 -0
  161. package/dist/components/layout/Svg.svelte +122 -70
  162. package/dist/components/layout/Svg.svelte.d.ts +53 -34
  163. package/dist/components/layout/WebGL.svelte +135 -0
  164. package/dist/components/layout/WebGL.svelte.d.ts +50 -0
  165. package/dist/components/tooltip/Tooltip.svelte +246 -78
  166. package/dist/components/tooltip/Tooltip.svelte.d.ts +149 -31
  167. package/dist/components/tooltip/TooltipContext.svelte +409 -271
  168. package/dist/components/tooltip/TooltipContext.svelte.d.ts +86 -55
  169. package/dist/components/tooltip/TooltipHeader.svelte +100 -11
  170. package/dist/components/tooltip/TooltipHeader.svelte.d.ts +43 -23
  171. package/dist/components/tooltip/TooltipItem.svelte +167 -27
  172. package/dist/components/tooltip/TooltipItem.svelte.d.ts +63 -31
  173. package/dist/components/tooltip/TooltipList.svelte +22 -3
  174. package/dist/components/tooltip/TooltipList.svelte.d.ts +6 -17
  175. package/dist/components/tooltip/TooltipSeparator.svelte +27 -1
  176. package/dist/components/tooltip/TooltipSeparator.svelte.d.ts +6 -15
  177. package/dist/components/tooltip/index.d.ts +6 -0
  178. package/dist/components/tooltip/index.js +6 -0
  179. package/dist/components/tooltip/tooltipMetaContext.d.ts +79 -0
  180. package/dist/components/tooltip/tooltipMetaContext.js +139 -0
  181. package/dist/components/types.d.ts +1 -0
  182. package/dist/components/types.js +1 -0
  183. package/dist/docs/Blockquote.svelte.d.ts +18 -14
  184. package/dist/docs/Code.svelte.d.ts +26 -22
  185. package/dist/docs/ConnectorSweepMenuField.svelte +17 -0
  186. package/dist/docs/ConnectorSweepMenuField.svelte.d.ts +7 -0
  187. package/dist/docs/ConnectorTypeMenuField.svelte +17 -0
  188. package/dist/docs/ConnectorTypeMenuField.svelte.d.ts +7 -0
  189. package/dist/docs/CurveMenuField.svelte +14 -3
  190. package/dist/docs/CurveMenuField.svelte.d.ts +9 -18
  191. package/dist/docs/GeoDebug.svelte +47 -42
  192. package/dist/docs/GeoDebug.svelte.d.ts +4 -16
  193. package/dist/docs/Header1.svelte.d.ts +27 -16
  194. package/dist/docs/Json.svelte.d.ts +20 -16
  195. package/dist/docs/Layout.svelte.d.ts +18 -13
  196. package/dist/docs/Link.svelte.d.ts +33 -21
  197. package/dist/docs/PathDataMenuField.svelte +14 -10
  198. package/dist/docs/PathDataMenuField.svelte.d.ts +8 -18
  199. package/dist/docs/Preview.svelte +20 -7
  200. package/dist/docs/Preview.svelte.d.ts +12 -22
  201. package/dist/docs/TilesetField.svelte.d.ts +21 -17
  202. package/dist/docs/TransformDebug.svelte +5 -6
  203. package/dist/docs/TransformDebug.svelte.d.ts +18 -14
  204. package/dist/docs/ViewSourceButton.svelte.d.ts +21 -17
  205. package/dist/types/d3-shape-extentions.d.ts +7 -0
  206. package/dist/utils/afterTick.d.ts +5 -0
  207. package/dist/utils/afterTick.js +8 -0
  208. package/dist/utils/arcText.svelte.d.ts +57 -0
  209. package/dist/utils/arcText.svelte.js +262 -0
  210. package/dist/utils/array.d.ts +9 -1
  211. package/dist/utils/array.js +13 -0
  212. package/dist/utils/attributes.d.ts +29 -0
  213. package/dist/utils/attributes.js +40 -0
  214. package/dist/utils/canvas.js +47 -10
  215. package/dist/utils/chart.d.ts +78 -0
  216. package/dist/utils/chart.js +512 -0
  217. package/dist/utils/color.d.ts +1 -0
  218. package/dist/utils/color.js +8 -0
  219. package/dist/utils/common.d.ts +3 -5
  220. package/dist/utils/common.js +3 -2
  221. package/dist/utils/connectorUtils.d.ts +21 -0
  222. package/dist/utils/connectorUtils.js +111 -0
  223. package/dist/utils/createId.d.ts +7 -0
  224. package/dist/utils/createId.js +9 -0
  225. package/dist/utils/debug.d.ts +1 -0
  226. package/dist/utils/debug.js +84 -0
  227. package/dist/utils/filterObject.d.ts +9 -0
  228. package/dist/utils/filterObject.js +12 -0
  229. package/dist/utils/graph/dagre.d.ts +34 -0
  230. package/dist/utils/graph/dagre.js +78 -0
  231. package/dist/utils/graph/dagre.test.d.ts +1 -0
  232. package/dist/utils/{graph.test.js → graph/dagre.test.js} +19 -33
  233. package/dist/utils/graph/sankey.d.ts +28 -0
  234. package/dist/utils/{graph.js → graph/sankey.js} +13 -41
  235. package/dist/utils/index.d.ts +3 -1
  236. package/dist/utils/index.js +3 -1
  237. package/dist/utils/key.svelte.d.ts +3 -0
  238. package/dist/utils/key.svelte.js +11 -0
  239. package/dist/utils/legendPayload.d.ts +7 -0
  240. package/dist/utils/legendPayload.js +8 -0
  241. package/dist/utils/motion.svelte.d.ts +140 -0
  242. package/dist/utils/motion.svelte.js +180 -0
  243. package/dist/utils/motion.test.d.ts +1 -0
  244. package/dist/utils/motion.test.js +213 -0
  245. package/dist/utils/{rect.d.ts → rect.svelte.d.ts} +7 -4
  246. package/dist/utils/rect.svelte.js +105 -0
  247. package/dist/utils/scales.svelte.d.ts +90 -0
  248. package/dist/utils/{scales.js → scales.svelte.js} +100 -39
  249. package/dist/utils/stack.d.ts +2 -3
  250. package/dist/utils/stack.js +1 -1
  251. package/dist/utils/string.js +87 -0
  252. package/dist/utils/ticks.d.ts +8 -2
  253. package/dist/utils/ticks.js +28 -0
  254. package/dist/utils/ticks.test.d.ts +1 -0
  255. package/dist/utils/ticks.test.js +67 -0
  256. package/dist/utils/types.d.ts +81 -0
  257. package/package.json +21 -19
  258. package/dist/components/ChartContext.svelte +0 -295
  259. package/dist/components/ChartContext.svelte.d.ts +0 -139
  260. package/dist/components/TransformContext.svelte.d.ts +0 -158
  261. package/dist/stores/motionStore.d.ts +0 -30
  262. package/dist/stores/motionStore.js +0 -62
  263. package/dist/utils/graph.d.ts +0 -37
  264. package/dist/utils/rect.js +0 -107
  265. package/dist/utils/scales.d.ts +0 -66
  266. /package/dist/{utils/graph.test.d.ts → components/charts/types.js} +0 -0
package/dist/components/Group.svelte CHANGED
@@ -1,135 +1,162 @@
1
+ <script lang="ts" module>
2
+ import type { Snippet } from 'svelte';
3
+ import type { HTMLAttributes, TouchEventHandler } from 'svelte/elements';
4
+ import type { Without } from '../utils/types.js';
5
+ import { createMotion, type MotionProp } from '../utils/motion.svelte.js';
6
+
7
+ export type GroupPropsWithoutHTML = {
8
+ /**
9
+ * Translate x
10
+ */
11
+ x?: number;
12
+
13
+ /**
14
+ * Initial translate x
15
+ *
16
+ * @default x
17
+ */
18
+ initialX?: number;
19
+
20
+ /**
21
+ * Translate y
22
+ */
23
+ y?: number;
24
+
25
+ /**
26
+ * Initial translate y
27
+ *
28
+ * @default y
29
+ */
30
+ initialY?: number;
31
+
32
+ /**
33
+ * Center within chart
34
+ *
35
+ * @default false
36
+ */
37
+ center?: boolean | 'x' | 'y';
38
+
39
+ /**
40
+ * Prevent `touchmove` default, which can interfere with `pointermove` when
41
+ * used with `Tooltip`, for example.
42
+ *
43
+ * @default false
44
+ */
45
+ preventTouchMove?: boolean;
46
+
47
+ children?: Snippet;
48
+
49
+ /**
50
+ * A reference to the rendered DOM element, which could be
51
+ * either nothing, a `<g>` element (when using `<Svg>`), or a `<div>` element
52
+ * (when using `<Html>`).
53
+ *
54
+ * @bindable
55
+ */
56
+ ref?: Element;
57
+
58
+ motion?: MotionProp;
59
+ };
60
+
61
+ export type GroupProps = GroupPropsWithoutHTML &
62
+ Without<HTMLAttributes<Element>, GroupPropsWithoutHTML>;
63
+ </script>
64
+
1
65
  <script lang="ts">
2
- import { onDestroy, tick } from 'svelte';
3
- import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
4
66
  import { cls } from '@layerstack/tailwind';
5
67
 
6
68
  import { getRenderContext } from './Chart.svelte';
7
- import { chartContext } from './ChartContext.svelte';
8
- import { motionStore } from '../stores/motionStore.js';
9
- import { getCanvasContext } from './layout/Canvas.svelte';
10
- const { width, height } = chartContext();
11
-
12
- /**
13
- * Translate x
14
- */
15
- export let x: number | undefined = undefined;
16
- export let initialX = x;
17
-
18
- /**
19
- * Translate x
20
- */
21
- export let y: number | undefined = undefined;
22
- export let initialY = y;
23
-
24
- /**
25
- * Center within chart
26
- */
27
- export let center: boolean | 'x' | 'y' = false;
28
-
29
- /**
30
- * Prevent `touchmove` default, which can interfer with `pointermove` when used with `Tooltip`, for example
31
- */
32
- export let preventTouchMove = false;
33
-
34
- export let onclick: ((e: MouseEvent) => void) | undefined = undefined;
35
- export let ondblclick: ((e: MouseEvent) => void) | undefined = undefined;
36
- export let onpointerenter: ((e: PointerEvent) => void) | undefined = undefined;
37
- export let onpointermove: ((e: PointerEvent) => void) | undefined = undefined;
38
- export let onpointerleave: ((e: PointerEvent) => void) | undefined = undefined;
39
- export let onpointerdown: ((e: PointerEvent) => void) | undefined = undefined;
40
-
41
- export let spring: boolean | Parameters<typeof springStore>[1] = undefined;
42
- export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
43
-
44
- let tweened_x = motionStore(initialX, { spring, tweened });
45
- let tweened_y = motionStore(initialY, { spring, tweened });
46
-
47
- $: tick().then(() => {
48
- tweened_x.set(x ?? (center === 'x' || center === true ? $width / 2 : 0));
49
- tweened_y.set(y ?? (center === 'y' || center === true ? $height / 2 : 0));
69
+ import { registerCanvasComponent } from './layout/Canvas.svelte';
70
+
71
+ import { getChartContext } from './Chart.svelte';
72
+ import { layerClass } from '../utils/attributes.js';
73
+
74
+ const ctx = getChartContext();
75
+
76
+ let {
77
+ x,
78
+ initialX: initialXProp,
79
+ y,
80
+ initialY: initialYProp,
81
+ center = false,
82
+ preventTouchMove = false,
83
+ motion,
84
+ class: className,
85
+ children,
86
+ ref: refProp = $bindable(),
87
+ ...restProps
88
+ }: GroupProps = $props();
89
+
90
+ let ref = $state<Element>();
91
+
92
+ $effect.pre(() => {
93
+ refProp = ref;
50
94
  });
51
95
 
52
- let transform: string | undefined = undefined;
53
- $: if (center || x != null || y != null) {
54
- transform = `translate(${$tweened_x ?? 0}px, ${$tweened_y ?? 0}px)`;
55
- }
96
+ const initialX = initialXProp ?? x;
97
+ const initialY = initialYProp ?? y;
56
98
 
57
- const renderContext = getRenderContext();
58
- const canvasContext = getCanvasContext();
99
+ const trueX = $derived(x ?? (center === 'x' || center === true ? ctx.width / 2 : 0));
100
+ const trueY = $derived(y ?? (center === 'y' || center === true ? ctx.height / 2 : 0));
101
+ const motionX = createMotion(initialX, () => trueX, motion);
102
+ const motionY = createMotion(initialY, () => trueY, motion);
59
103
 
60
- function render(ctx: CanvasRenderingContext2D) {
61
- ctx.translate($tweened_x ?? 0, $tweened_y ?? 0);
62
- }
104
+ const transform = $derived.by(() => {
105
+ if (center || x != null || y != null) {
106
+ return `translate(${motionX.current}px, ${motionY.current}px)`;
107
+ }
108
+ });
63
109
 
64
- $: if (renderContext === 'canvas') {
65
- $tweened_x && $tweened_y;
66
- canvasContext.invalidate();
67
- }
110
+ const renderCtx = getRenderContext();
68
111
 
69
- let canvasUnregister: ReturnType<typeof canvasContext.register>;
70
- $: if (renderContext === 'canvas') {
71
- canvasUnregister = canvasContext.register({
112
+ if (renderCtx === 'canvas') {
113
+ registerCanvasComponent({
72
114
  name: 'Group',
73
- render,
115
+ render: (ctx) => {
116
+ ctx.translate(motionX.current ?? 0, motionY.current ?? 0);
117
+ },
74
118
  retainState: true,
75
119
  events: {
76
- click: onclick,
77
- dblclick: ondblclick,
78
- pointerenter: onpointerenter,
79
- pointermove: onpointermove,
80
- pointerleave: onpointerleave,
81
- pointerdown: onpointerdown,
120
+ click: restProps.onclick,
121
+ dblclick: restProps.ondblclick,
122
+ pointerenter: restProps.onpointerenter,
123
+ pointermove: restProps.onpointermove,
124
+ pointerleave: restProps.onpointerleave,
125
+ pointerdown: restProps.onpointerdown,
82
126
  },
127
+ deps: () => [motionX.current, motionY.current],
83
128
  });
84
129
  }
85
130
 
86
- onDestroy(() => {
87
- if (renderContext === 'canvas') {
88
- canvasUnregister();
131
+ const handleTouchMove: TouchEventHandler<Element> = (e) => {
132
+ if (preventTouchMove) {
133
+ // Prevent touch to not interfere with pointer
134
+ e.preventDefault();
89
135
  }
90
- });
136
+ restProps.ontouchmove?.(e);
137
+ };
91
138
  </script>
92
139
 
93
- {#if renderContext === 'canvas'}
94
- <slot />
95
- {:else if renderContext === 'svg'}
96
- <!-- TODO: Find out why `<svelte:element this={renderContext === 'html' ? 'div' : 'g'}>` doesn't work for the SVG use case -->
140
+ {#if renderCtx === 'canvas'}
141
+ {@render children?.()}
142
+ {:else if renderCtx === 'svg'}
97
143
  <g
98
144
  style:transform
99
- {...$$restProps}
100
- on:click={onclick}
101
- on:dblclick={ondblclick}
102
- on:pointerenter={onpointerenter}
103
- on:pointermove={onpointermove}
104
- on:pointerleave={onpointerleave}
105
- on:pointerdown={onpointerdown}
106
- on:touchmove={(e) => {
107
- if (preventTouchMove) {
108
- // Prevent touch to not interfer with pointer
109
- e.preventDefault();
110
- }
111
- }}
145
+ class={cls(layerClass('group-g'), className)}
146
+ {...restProps}
147
+ ontouchmove={handleTouchMove}
148
+ bind:this={ref}
112
149
  >
113
- <slot />
150
+ {@render children?.()}
114
151
  </g>
115
152
  {:else}
116
153
  <div
154
+ bind:this={ref}
117
155
  style:transform
118
- {...$$restProps}
119
- class={cls('absolute', $$restProps.class)}
120
- on:click={onclick}
121
- on:dblclick={ondblclick}
122
- on:pointerenter={onpointerenter}
123
- on:pointermove={onpointermove}
124
- on:pointerleave={onpointerleave}
125
- on:pointerdown={onpointerdown}
126
- on:touchmove={(e) => {
127
- if (preventTouchMove) {
128
- // Prevent touch to not interfer with pointer
129
- e.preventDefault();
130
- }
131
- }}
156
+ {...restProps}
157
+ class={cls(layerClass('group-div'), 'absolute', className)}
158
+ ontouchmove={handleTouchMove}
132
159
  >
133
- <slot />
160
+ {@render children?.()}
134
161
  </div>
135
162
  {/if}
package/dist/components/Group.svelte.d.ts ADDED
@@ -0,0 +1,53 @@
1
+ import type { Snippet } from 'svelte';
2
+ import type { HTMLAttributes } from 'svelte/elements';
3
+ import type { Without } from '../utils/types.js';
4
+ import { type MotionProp } from '../utils/motion.svelte.js';
5
+ export type GroupPropsWithoutHTML = {
6
+ /**
7
+ * Translate x
8
+ */
9
+ x?: number;
10
+ /**
11
+ * Initial translate x
12
+ *
13
+ * @default x
14
+ */
15
+ initialX?: number;
16
+ /**
17
+ * Translate y
18
+ */
19
+ y?: number;
20
+ /**
21
+ * Initial translate y
22
+ *
23
+ * @default y
24
+ */
25
+ initialY?: number;
26
+ /**
27
+ * Center within chart
28
+ *
29
+ * @default false
30
+ */
31
+ center?: boolean | 'x' | 'y';
32
+ /**
33
+ * Prevent `touchmove` default, which can interfere with `pointermove` when
34
+ * used with `Tooltip`, for example.
35
+ *
36
+ * @default false
37
+ */
38
+ preventTouchMove?: boolean;
39
+ children?: Snippet;
40
+ /**
41
+ * A reference to the rendered DOM element, which could be
42
+ * either nothing, a `<g>` element (when using `<Svg>`), or a `<div>` element
43
+ * (when using `<Html>`).
44
+ *
45
+ * @bindable
46
+ */
47
+ ref?: Element;
48
+ motion?: MotionProp;
49
+ };
50
+ export type GroupProps = GroupPropsWithoutHTML & Without<HTMLAttributes<Element>, GroupPropsWithoutHTML>;
51
+ declare const Group: import("svelte").Component<GroupProps, {}, "ref">;
52
+ type Group = ReturnType<typeof Group>;
53
+ export default Group;