layerchart 2.0.0-next.1 → 2.0.0-next.11

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 (275) 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 +143 -0
  4. package/dist/components/AnnotationLine.svelte.d.ts +30 -0
  5. package/dist/components/AnnotationPoint.svelte +119 -0
  6. package/dist/components/AnnotationPoint.svelte.d.ts +34 -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 +320 -179
  14. package/dist/components/Axis.svelte.d.ts +127 -0
  15. package/dist/components/Bar.svelte +166 -107
  16. package/dist/components/Bar.svelte.d.ts +51 -0
  17. package/dist/components/Bars.svelte +56 -67
  18. package/dist/components/Bars.svelte.d.ts +27 -0
  19. package/dist/components/Blur.svelte +42 -12
  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 +71 -21
  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 +49 -13
  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 +30 -14
  66. package/dist/components/Graticule.svelte.d.ts +11 -52
  67. package/dist/components/Grid.svelte +230 -117
  68. package/dist/components/Grid.svelte.d.ts +71 -0
  69. package/dist/components/Group.svelte +173 -106
  70. package/dist/components/Group.svelte.d.ts +81 -0
  71. package/dist/components/Highlight.svelte +410 -308
  72. package/dist/components/Highlight.svelte.d.ts +107 -0
  73. package/dist/components/Hull.svelte +97 -46
  74. package/dist/components/Hull.svelte.d.ts +40 -30
  75. package/dist/components/Labels.svelte +127 -47
  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 +148 -77
  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 +107 -63
  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 +463 -197
  118. package/dist/components/Text.svelte.d.ts +136 -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 +153 -103
  131. package/dist/components/Voronoi.svelte.d.ts +42 -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 +444 -393
  135. package/dist/components/charts/AreaChart.svelte.d.ts +61 -0
  136. package/dist/components/charts/BarChart.svelte +463 -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 +366 -315
  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 +332 -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 +59 -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 +347 -171
  156. package/dist/components/layout/Canvas.svelte.d.ts +110 -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 +253 -78
  166. package/dist/components/tooltip/Tooltip.svelte.d.ts +149 -31
  167. package/dist/components/tooltip/TooltipContext.svelte +426 -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 +3 -1
  184. package/dist/docs/Blockquote.svelte.d.ts +5 -16
  185. package/dist/docs/Code.svelte +20 -12
  186. package/dist/docs/Code.svelte.d.ts +12 -22
  187. package/dist/docs/ConnectorSweepMenuField.svelte +17 -0
  188. package/dist/docs/ConnectorSweepMenuField.svelte.d.ts +7 -0
  189. package/dist/docs/ConnectorTypeMenuField.svelte +17 -0
  190. package/dist/docs/ConnectorTypeMenuField.svelte.d.ts +7 -0
  191. package/dist/docs/CurveMenuField.svelte +14 -3
  192. package/dist/docs/CurveMenuField.svelte.d.ts +9 -18
  193. package/dist/docs/GeoDebug.svelte +47 -42
  194. package/dist/docs/GeoDebug.svelte.d.ts +4 -16
  195. package/dist/docs/Header1.svelte +4 -2
  196. package/dist/docs/Header1.svelte.d.ts +5 -18
  197. package/dist/docs/Json.svelte +11 -3
  198. package/dist/docs/Json.svelte.d.ts +9 -17
  199. package/dist/docs/Layout.svelte +10 -7
  200. package/dist/docs/Layout.svelte.d.ts +5 -15
  201. package/dist/docs/Link.svelte +7 -3
  202. package/dist/docs/Link.svelte.d.ts +5 -27
  203. package/dist/docs/PathDataMenuField.svelte +14 -10
  204. package/dist/docs/PathDataMenuField.svelte.d.ts +8 -18
  205. package/dist/docs/Preview.svelte +20 -7
  206. package/dist/docs/Preview.svelte.d.ts +12 -22
  207. package/dist/docs/TilesetField.svelte +20 -19
  208. package/dist/docs/TilesetField.svelte.d.ts +6 -19
  209. package/dist/docs/TransformDebug.svelte +5 -6
  210. package/dist/docs/TransformDebug.svelte.d.ts +18 -14
  211. package/dist/docs/ViewSourceButton.svelte +7 -4
  212. package/dist/docs/ViewSourceButton.svelte.d.ts +8 -18
  213. package/dist/types/d3-shape-extentions.d.ts +7 -0
  214. package/dist/utils/afterTick.d.ts +5 -0
  215. package/dist/utils/afterTick.js +8 -0
  216. package/dist/utils/arcText.svelte.d.ts +57 -0
  217. package/dist/utils/arcText.svelte.js +262 -0
  218. package/dist/utils/array.d.ts +9 -1
  219. package/dist/utils/array.js +13 -0
  220. package/dist/utils/attributes.d.ts +29 -0
  221. package/dist/utils/attributes.js +40 -0
  222. package/dist/utils/canvas.js +47 -10
  223. package/dist/utils/chart.d.ts +78 -0
  224. package/dist/utils/chart.js +512 -0
  225. package/dist/utils/color.d.ts +1 -0
  226. package/dist/utils/color.js +8 -0
  227. package/dist/utils/common.d.ts +3 -5
  228. package/dist/utils/common.js +3 -2
  229. package/dist/utils/connectorUtils.d.ts +21 -0
  230. package/dist/utils/connectorUtils.js +111 -0
  231. package/dist/utils/createId.d.ts +7 -0
  232. package/dist/utils/createId.js +9 -0
  233. package/dist/utils/debug.d.ts +1 -0
  234. package/dist/utils/debug.js +84 -0
  235. package/dist/utils/filterObject.d.ts +9 -0
  236. package/dist/utils/filterObject.js +12 -0
  237. package/dist/utils/graph/dagre.d.ts +34 -0
  238. package/dist/utils/graph/dagre.js +78 -0
  239. package/dist/utils/graph/dagre.test.d.ts +1 -0
  240. package/dist/utils/{graph.test.js → graph/dagre.test.js} +19 -33
  241. package/dist/utils/graph/sankey.d.ts +28 -0
  242. package/dist/utils/{graph.js → graph/sankey.js} +13 -41
  243. package/dist/utils/index.d.ts +3 -1
  244. package/dist/utils/index.js +3 -1
  245. package/dist/utils/key.svelte.d.ts +3 -0
  246. package/dist/utils/key.svelte.js +11 -0
  247. package/dist/utils/legendPayload.d.ts +7 -0
  248. package/dist/utils/legendPayload.js +8 -0
  249. package/dist/utils/motion.svelte.d.ts +140 -0
  250. package/dist/utils/motion.svelte.js +180 -0
  251. package/dist/utils/motion.test.d.ts +1 -0
  252. package/dist/utils/motion.test.js +213 -0
  253. package/dist/utils/{rect.d.ts → rect.svelte.d.ts} +7 -4
  254. package/dist/utils/rect.svelte.js +105 -0
  255. package/dist/utils/scales.svelte.d.ts +91 -0
  256. package/dist/utils/scales.svelte.js +201 -0
  257. package/dist/utils/stack.d.ts +2 -3
  258. package/dist/utils/stack.js +1 -1
  259. package/dist/utils/string.js +87 -0
  260. package/dist/utils/ticks.d.ts +9 -3
  261. package/dist/utils/ticks.js +122 -147
  262. package/dist/utils/ticks.test.d.ts +1 -0
  263. package/dist/utils/ticks.test.js +57 -0
  264. package/dist/utils/types.d.ts +81 -0
  265. package/package.json +28 -24
  266. package/dist/components/ChartContext.svelte +0 -295
  267. package/dist/components/ChartContext.svelte.d.ts +0 -139
  268. package/dist/components/TransformContext.svelte.d.ts +0 -158
  269. package/dist/stores/motionStore.d.ts +0 -30
  270. package/dist/stores/motionStore.js +0 -62
  271. package/dist/utils/graph.d.ts +0 -37
  272. package/dist/utils/rect.js +0 -107
  273. package/dist/utils/scales.d.ts +0 -66
  274. package/dist/utils/scales.js +0 -136
  275. /package/dist/{utils/graph.test.d.ts → components/charts/types.js} +0 -0
package/dist/components/Group.svelte CHANGED
@@ -1,135 +1,202 @@
1
- <script lang="ts">
2
- import { onDestroy, tick } from 'svelte';
3
- import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
1
+ <script lang="ts" module>
2
+ import type { Snippet } from 'svelte';
3
+ import type { HTMLAttributes, TouchEventHandler } from 'svelte/elements';
4
+ import type { Transition, TransitionParams, Without } from '../utils/types.js';
5
+ import { createMotion, extractTweenConfig, type MotionProp } from '../utils/motion.svelte.js';
6
+
7
+ export type GroupPropsWithoutHTML<In extends Transition = Transition> = {
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
+ /**
48
+ * The opacity of the element. (0 to 1)
49
+ */
50
+ opacity?: number;
51
+
52
+ children?: Snippet;
53
+
54
+ /**
55
+ * A reference to the rendered DOM element, which could be
56
+ * either nothing, a `<g>` element (when using `<Svg>`), or a `<div>` element
57
+ * (when using `<Html>`).
58
+ *
59
+ * @bindable
60
+ */
61
+ ref?: Element;
62
+
63
+ motion?: MotionProp;
64
+
65
+ /**
66
+ * Transition function for entering elements
67
+ * @default defaults to fade if the motion prop is set to tweened
68
+ */
69
+ transitionIn?: In;
70
+
71
+ /**
72
+ * Parameters for the transitionIn function
73
+ * @default { easing: cubicIn }
74
+ */
75
+ transitionInParams?: TransitionParams<In>;
76
+ };
77
+
78
+ export type GroupProps = GroupPropsWithoutHTML &
79
+ Without<HTMLAttributes<Element>, GroupPropsWithoutHTML>;
80
+ </script>
81
+
82
+ <script lang="ts" generics="T extends Transition = Transition">
83
+ import { fade } from 'svelte/transition';
84
+ import { cubicIn } from 'svelte/easing';
85
+
4
86
  import { cls } from '@layerstack/tailwind';
5
87
 
6
88
  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));
89
+ import { registerCanvasComponent } from './layout/Canvas.svelte';
90
+
91
+ import { getChartContext } from './Chart.svelte';
92
+ import { layerClass } from '../utils/attributes.js';
93
+
94
+ const ctx = getChartContext();
95
+
96
+ let {
97
+ x,
98
+ initialX: initialXProp,
99
+ y,
100
+ initialY: initialYProp,
101
+ center = false,
102
+ preventTouchMove = false,
103
+ opacity = 1,
104
+ motion,
105
+ transitionIn: transitionInProp,
106
+ transitionInParams: transitionInParamsProp,
107
+ class: className,
108
+ children,
109
+ ref: refProp = $bindable(),
110
+ ...restProps
111
+ }: GroupProps = $props();
112
+
113
+ let ref = $state<Element>();
114
+
115
+ $effect.pre(() => {
116
+ refProp = ref;
50
117
  });
51
118
 
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
- }
119
+ const initialX = initialXProp ?? x;
120
+ const initialY = initialYProp ?? y;
56
121
 
57
- const renderContext = getRenderContext();
58
- const canvasContext = getCanvasContext();
122
+ const trueX = $derived(x ?? (center === 'x' || center === true ? ctx.width / 2 : 0));
123
+ const trueY = $derived(y ?? (center === 'y' || center === true ? ctx.height / 2 : 0));
124
+ const motionX = createMotion(initialX, () => trueX, motion);
125
+ const motionY = createMotion(initialY, () => trueY, motion);
59
126
 
60
- function render(ctx: CanvasRenderingContext2D) {
61
- ctx.translate($tweened_x ?? 0, $tweened_y ?? 0);
62
- }
127
+ const transitionIn = $derived(
128
+ transitionInProp ? transitionInProp : extractTweenConfig(motion)?.options ? fade : () => {}
129
+ ) as T;
130
+ const transitionInParams = $derived(
131
+ transitionInParamsProp ? transitionInParamsProp : { easing: cubicIn }
132
+ );
63
133
 
64
- $: if (renderContext === 'canvas') {
65
- $tweened_x && $tweened_y;
66
- canvasContext.invalidate();
67
- }
134
+ const transform = $derived.by(() => {
135
+ if (center || x != null || y != null) {
136
+ return `translate(${motionX.current}px, ${motionY.current}px)`;
137
+ }
138
+ });
139
+
140
+ const renderCtx = getRenderContext();
68
141
 
69
- let canvasUnregister: ReturnType<typeof canvasContext.register>;
70
- $: if (renderContext === 'canvas') {
71
- canvasUnregister = canvasContext.register({
142
+ if (renderCtx === 'canvas') {
143
+ registerCanvasComponent({
72
144
  name: 'Group',
73
- render,
145
+ render: (ctx) => {
146
+ const currentGlobalAlpha = ctx.globalAlpha;
147
+ ctx.globalAlpha = opacity;
148
+
149
+ ctx.translate(motionX.current ?? 0, motionY.current ?? 0);
150
+
151
+ // Restore in case it was modified by `opacity`
152
+ ctx.globalAlpha = currentGlobalAlpha;
153
+ },
74
154
  retainState: true,
75
155
  events: {
76
- click: onclick,
77
- dblclick: ondblclick,
78
- pointerenter: onpointerenter,
79
- pointermove: onpointermove,
80
- pointerleave: onpointerleave,
81
- pointerdown: onpointerdown,
156
+ click: restProps.onclick,
157
+ dblclick: restProps.ondblclick,
158
+ pointerenter: restProps.onpointerenter,
159
+ pointermove: restProps.onpointermove,
160
+ pointerleave: restProps.onpointerleave,
161
+ pointerdown: restProps.onpointerdown,
82
162
  },
163
+ deps: () => [motionX.current, motionY.current, opacity],
83
164
  });
84
165
  }
85
166
 
86
- onDestroy(() => {
87
- if (renderContext === 'canvas') {
88
- canvasUnregister();
167
+ const handleTouchMove: TouchEventHandler<Element> = (e) => {
168
+ if (preventTouchMove) {
169
+ // Prevent touch to not interfere with pointer
170
+ e.preventDefault();
89
171
  }
90
- });
172
+ restProps.ontouchmove?.(e);
173
+ };
91
174
  </script>
92
175
 
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 -->
176
+ {#if renderCtx === 'canvas'}
177
+ {@render children?.()}
178
+ {:else if renderCtx === 'svg'}
97
179
  <g
98
180
  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
- }}
181
+ class={cls(layerClass('group-g'), className)}
182
+ in:transitionIn={transitionInParams}
183
+ {opacity}
184
+ {...restProps}
185
+ ontouchmove={handleTouchMove}
186
+ bind:this={ref}
112
187
  >
113
- <slot />
188
+ {@render children?.()}
114
189
  </g>
115
190
  {:else}
116
191
  <div
192
+ bind:this={ref}
117
193
  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
- }}
194
+ style:opacity
195
+ in:transitionIn={transitionInParams}
196
+ {...restProps}
197
+ class={cls(layerClass('group-div'), 'absolute', className)}
198
+ ontouchmove={handleTouchMove}
132
199
  >
133
- <slot />
200
+ {@render children?.()}
134
201
  </div>
135
202
  {/if}
package/dist/components/Group.svelte.d.ts ADDED
@@ -0,0 +1,81 @@
1
+ import type { Snippet } from 'svelte';
2
+ import type { HTMLAttributes } from 'svelte/elements';
3
+ import type { Transition, TransitionParams, Without } from '../utils/types.js';
4
+ import { type MotionProp } from '../utils/motion.svelte.js';
5
+ export type GroupPropsWithoutHTML<In extends Transition = Transition> = {
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
+ /**
40
+ * The opacity of the element. (0 to 1)
41
+ */
42
+ opacity?: number;
43
+ children?: Snippet;
44
+ /**
45
+ * A reference to the rendered DOM element, which could be
46
+ * either nothing, a `<g>` element (when using `<Svg>`), or a `<div>` element
47
+ * (when using `<Html>`).
48
+ *
49
+ * @bindable
50
+ */
51
+ ref?: Element;
52
+ motion?: MotionProp;
53
+ /**
54
+ * Transition function for entering elements
55
+ * @default defaults to fade if the motion prop is set to tweened
56
+ */
57
+ transitionIn?: In;
58
+ /**
59
+ * Parameters for the transitionIn function
60
+ * @default { easing: cubicIn }
61
+ */
62
+ transitionInParams?: TransitionParams<In>;
63
+ };
64
+ export type GroupProps = GroupPropsWithoutHTML & Without<HTMLAttributes<Element>, GroupPropsWithoutHTML>;
65
+ declare class __sveltets_Render<T extends Transition = Transition> {
66
+ props(): GroupProps;
67
+ events(): {};
68
+ slots(): {};
69
+ bindings(): "ref";
70
+ exports(): {};
71
+ }
72
+ interface $$IsomorphicComponent {
73
+ new <T extends Transition = Transition>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
74
+ $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
75
+ } & ReturnType<__sveltets_Render<T>['exports']>;
76
+ <T extends Transition = Transition>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
77
+ z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
78
+ }
79
+ declare const Group: $$IsomorphicComponent;
80
+ type Group<T extends Transition = Transition> = InstanceType<typeof Group<T>>;
81
+ export default Group;