|
1 | 1 | # LayerChart |
2 | 2 |
|
| 3 | +## 2.0.0-next.55 |
| 4 | + |
| 5 | +### Minor Changes |
| 6 | + |
| 7 | +- feat(Bar, Bars): Support `<Html>` layer ([#449](https://github.com/techniq/layerchart/pull/449)) |
| 8 | + |
| 9 | + Bar/Bars now render in `<Html>` layers in addition to `<Svg>` and `<Canvas>`, including per-corner `rounded` variants (`top`, `bottom`, `left`, `right`, `edge`, and individual corners). Previously, any non-uniform `rounded` value fell through to a `<Path>` and was SVG-only. |
| 10 | + |
| 11 | +- feat(ClipPath, RectClipPath, CircleClipPath, GeoClipPath): HTML layer support + unified `path` API ([#449](https://github.com/techniq/layerchart/pull/449)) |
| 12 | + |
| 13 | + `ClipPath` now accepts a single `path: string` (SVG path `d` syntax) that drives all three layers: |
| 14 | + - **SVG**: rendered as `<path d={path}>` inside the `<clipPath>` element. |
| 15 | + - **Canvas**: wrapped in `Path2D` and applied via `ctx.clip(...)`. |
| 16 | + - **HTML**: emitted as `clip-path: path("${path}")` on a wrapper `<div>` covering the chart container. |
| 17 | + |
| 18 | + This replaces the previous `canvasClip` / `canvasClipDeps` callbacks (and skipped HTML entirely) with a single declarative value. The `clip` snippet is still accepted for advanced/custom SVG content. |
| 19 | + |
| 20 | + `RectClipPath`, `CircleClipPath`, and `GeoClipPath` are rewritten on top of this — they each compute a path string (d3-geo-path already emits one natively) and pass it through. All three now support `<Html>` layers in addition to `<Svg>` and `<Canvas>`. |
| 21 | + |
| 22 | + Note: `clip-path: path()` requires Chrome 88+, Safari 13.1+, Firefox 118+. |
| 23 | + |
| 24 | +- feat(ClipPath, RectClipPath, CircleClipPath, GeoClipPath): Add `invert` prop to render content _outside_ the clip shape (cutouts/masks) across SVG, Canvas, and HTML layers ([#449](https://github.com/techniq/layerchart/pull/449)) |
| 25 | + |
| 26 | +- feat(Line, Rect, Circle, Text): Multi-layer compatible `dashArray` and inline color props ([#449](https://github.com/techniq/layerchart/pull/449)) |
| 27 | + - Added a typed `dashArray` prop to `Line`, `Rect`, and `Circle`. Accepts a number, array, or SVG-style string and maps to `stroke-dasharray` (SVG), `setLineDash` (Canvas), and either `repeating-linear-gradient` (HTML lines) or `border-style: dashed` (HTML borders). Previously dashed styling was SVG-only when applied via CSS class or attribute. |
| 28 | + - `Text` and `Line` HTML branches now honor the `fill`/`stroke` props as inline `color`/`background`, so prop-based colors work across all three layers (not just SVG/Canvas). |
| 29 | + - `Grid.x`/`Grid.y` and `Axis.grid` now accept `stroke`, `strokeWidth`, `opacity`, and `dashArray` in their object form, matching the props forwarded to the underlying line. |
| 30 | + - `Rule` already forwarded arbitrary Line props via spread; `dashArray` now works there unchanged. |
| 31 | + - Exports `parseDashArray` and `dashArrayToGradient` helpers from `path` utils. |
| 32 | + |
| 33 | +- feat(Tree, Link, Connector): Add radial support ([#831](https://github.com/techniq/layerchart/pull/831)) |
| 34 | + |
| 35 | + `Tree` now detects `<Chart radial>` and lays out with `d3.tree().size([2π, min(width, height)/2])` plus radial separation. Nodes emit polar coords (`x` = angle, `y` = radius). |
| 36 | + |
| 37 | + `Connector` gains a `radial` prop (defaults to `ctx.radial`) that interprets `source`/`target` as polar and dispatches to new `getConnectorRadialPresetPath` / `getConnectorRadialD3Path` helpers. Radial behavior per connector `type`: |
| 38 | + - `straight` — straight cartesian line |
| 39 | + - `square` — radial → arc at midR → radial |
| 40 | + - `beveled` — chord at source radius with chamfered corner (controlled by `radius`) |
| 41 | + - `rounded` — visx LinkRadialCurve Bezier |
| 42 | + - `d3` — `d3.linkRadial` by default; with a `curve` prop, `curveStep` / `curveStepBefore` / `curveStepAfter` map to polar arcs/radials, other curves go through `d3.lineRadial` |
| 43 | + |
| 44 | + `Link` forwards `radial` to `Connector` automatically when inside a radial `<Chart>`. |
| 45 | + |
| 46 | +- feat(Rect): Add `corners` prop for per-corner rounding ([#449](https://github.com/techniq/layerchart/pull/449)) |
| 47 | + |
| 48 | + New `corners` prop accepts either a number (equivalent to `rx`), a `[topLeft, topRight, bottomRight, bottomLeft]` tuple, or `{ topLeft, topRight, bottomRight, bottomLeft }`. Works across `<Svg>`, `<Canvas>`, and `<Html>` layers — Svg renders a `<rect>` when corners are uniform and a `<path>` when they differ, Canvas uses `roundRect`'s per-corner radii, and Html uses the 4-value `border-radius` shorthand. |
| 49 | + |
| 50 | + Also exports a shared `roundedRectPath(x, y, width, height, [tl, tr, br, bl])` helper from `path` utils for building per-corner rounded-rect path data. |
| 51 | + |
| 52 | +### Patch Changes |
| 53 | + |
| 54 | +- fix(canvas): Compose globalAlpha multiplicatively so Group opacity propagates to children ([#831](https://github.com/techniq/layerchart/pull/831)) |
| 55 | + |
| 56 | + Canvas `renderPathData` was overwriting `ctx.globalAlpha` with absolute values for element opacity, fill opacity, and stroke opacity. This meant a parent `<Group opacity={0.2}>` had no effect on child marks rendered on canvas — the child's own opacity (defaulting to 1) would replace the inherited value. |
| 57 | + |
| 58 | + Now all three sites multiply against the current `globalAlpha`, which correctly composes with ancestor Group opacity set via `save()`/`restore()` scoping. Also removes double-application of element `opacity` inside the fill/stroke blocks (it's already applied at the element level). |
| 59 | + |
3 | 60 | ## 2.0.0-next.54 |
4 | 61 |
|
5 | 62 | ### Minor Changes |
|
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4&size=40){kind=avatar}
0 commit comments