Code

Overhaul Canvas support#295

Code

Merged

techniq merged 55 commits intomaintechniq/layerchart:mainfrom canvas-markstechniq/layerchart:canvas-marksCopy head branch name to clipboardJan 12, 2025

+2,236-897

Commits

Commits on Jan 7, 2025

• feat: Add new renderPathData() canvas util to simplify rendering SVG path data onto canvas context with CSS class support

  techniq

  committed
  7848b5e

  Copy full SHA for 7848b5e

• fix(circlePath): Correctly handle sweep argument

  techniq

  committed
  403a1fe

  Copy full SHA for 403a1fe

• feat(Spline): Support Canvas context

  techniq

  committed
  fc84ef8

  Copy full SHA for fc84ef8

• breaking(GeoPath): Simplify render prop use case by leveraging renderPathData() (ex. HitCanvas)

  techniq

  committed
  eab12cf

  Copy full SHA for eab12cf

• fix(GeoPath): Always apply classes defined on GeoPath onto <canvas> parent (useful for rendering text, etc)

  techniq

  committed
  ac200d6

  Copy full SHA for ac200d6

• Update more GeoPath render usage

  techniq

  committed
  dc7ab11

  Copy full SHA for dc7ab11

• docs(Spline): Resolve check errors

  techniq

  committed
  be414c2

  Copy full SHA for be414c2

• docs(Spline): Resolve additional check error (not sure why not failing locally)

  techniq

  committed
  d494b45

  Copy full SHA for d494b45

• fix(Spline): Remove transfering classes to <canvas> (after removing from renderPathData())

  techniq

  committed
  8c39f51

  Copy full SHA for 8c39f51

• docs(Spline): Add canvas explicit example

  techniq

  committed
  f5b6024

  Copy full SHA for f5b6024

• feat(Area): Support Canvas context

  techniq

  committed
  3f7827d

  Copy full SHA for 3f7827d

• fix(Canvas): Support multiple children (fix infinite loops, coordinating redraws, etc). Resolves issue #158

  techniq

  committed
  54561c0

  Copy full SHA for 54561c0

• Cleanup unused imports

  techniq

  committed
  52de26e

  Copy full SHA for 52de26e

• Add changeset (ComputedStyles)

  techniq

  committed
  4738e04

  Copy full SHA for 4738e04

• fix(Canvas/GeoPath): Fix tooltip ghosting (recreate geoPath() when geojson data changes). Fix tooltip path performance by rendering to separate <Canvas>

  techniq

  committed
  0f531c6

  Copy full SHA for 0f531c6

• Fix pnpm check errors/warnings

  techniq

  committed
  2a1dccf

  Copy full SHA for 2a1dccf

• docs(ZoomableMap): Hide tooltip when selecting state on canvas examples

  techniq

  committed
  f91c40c

  Copy full SHA for f91c40c

Commits on Jan 9, 2025

• Add and use new getComputedStyles() to create/reuse single svg when calculating styles for canvas (resolving CSS variables or classes).

  techniq

  committed
  71f2f19

  Copy full SHA for 71f2f19

• fix(Circle): Redraw on position changes (fix tooltip highlight)

  techniq

  committed
  df87438

  Copy full SHA for df87438

• fix(renderPathData()): Adhere to CSS paint order: https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order

  techniq

  committed
  50681a8

  Copy full SHA for 50681a8

• fix(Rule): Remove unnecessary classes

  techniq

  committed
  2e5db72

  Copy full SHA for 2e5db72

• feat(Line): Support Canvas context

  techniq

  committed
  55782c7

  Copy full SHA for 55782c7

• fix(Line): Use tweened coords when rendering via canvas

  techniq

  committed
  59807f8

  Copy full SHA for 59807f8

• fix(renderPathData()): Respect opacity CSS style via globalAlpha canvas attribute

  techniq

  committed
  f3ebda0

  Copy full SHA for f3ebda0

• feat: Add new renderText() canvas util to simplify rendering SVG path data onto canvas context with CSS variable and class support

  techniq

  committed
  0346677

  Copy full SHA for 0346677

• feat(Text): Support Canvas context

  techniq

  committed
  4259572

  Copy full SHA for 4259572

• docs: Use new renderText() to simplify manual rendering on geo example

  techniq

  committed
  a147c1c

  Copy full SHA for a147c1c

• feat: Add new renderRect() canvas util to simplify rendering rectangles onto canvas context with CSS variable and class support

  techniq

  committed
  bf3b41d

  Copy full SHA for bf3b41d

• feat(Rect): Support Canvas context

  techniq

  committed
  bc83c5c

  Copy full SHA for bc83c5c

• fix(render()): Support strokeDasharray style via ctx.setLineDash()

  techniq

  committed
  39e855f

  Copy full SHA for 39e855f

Commits on Jan 10, 2025

• fix(Points): Render primative components (Circle /Link) instead of using renderPathData directly to fix tweening and support links

  techniq

  committed
  4bcd239

  Copy full SHA for 4bcd239

• fix(Spline): Fix opacity for svg context

  techniq

  committed
  ba6da85

  Copy full SHA for ba6da85

• Add spikePath() util

  techniq

  committed
  30e14c7

  Copy full SHA for 30e14c7

• docs: Simplify SpikeMap canvas example using renderPathData() and new spikePath util

  techniq

  committed
  2d1f4d8

  Copy full SHA for 2d1f4d8

• feat: Support renderContext prop to switch between Svg (default) and Canvas for all simplified charts (AreaChart, BarChart, LineChart, PieChart, and ScatterChart)

  techniq

  committed
  dc5b22e

  Copy full SHA for dc5b22e

• feat(Canvas): Support center prop (similar to Svg) to translate children to center (useful for radial layouts)

  techniq

  committed
  2a3f7da

  Copy full SHA for 2a3f7da

• fix(PieChart): Use center prop (broke after recent refactor)

  techniq

  committed
  3c3c939

  Copy full SHA for 3c3c939

• Fix CI failures (pnpm check)

  techniq

  committed
  1130406

  Copy full SHA for 1130406

• feat(render): Support fill-opacity

  techniq

  committed
  7f392ad

  Copy full SHA for 7f392ad

• feat(Arc): Support Canvas context

  techniq

  committed
  085fd8c

  Copy full SHA for 085fd8c

• feat(Group): Support Canvas context

  techniq

  committed
  a9c16ba

  Copy full SHA for a9c16ba

• fix(Canvas): Change registration API. Pass config instead of simple function to enable retainState use case (fix Group translate() use case). Return unregister function

  techniq

  committed
  6e91781

  Copy full SHA for 6e91781

• fix: Reduce likihood of clipping for Canvas-rendered simplified charts by increasing default padding (and add top))

  techniq

  committed
  dcc9440

  Copy full SHA for dcc9440

• fix: Support fillOpacity with more primatives

  techniq

  committed
  a27cc5a

  Copy full SHA for a27cc5a

• fix(render): Restore globalAlpha after using for fillOpacity

  techniq

  committed
  ba1ff68

  Copy full SHA for ba1ff68

• fix(Text): Fix font color class override on canvas

  techniq

  committed
  6108ae5

  Copy full SHA for 6108ae5

• fix(render): Do not apply fill when set to none

  techniq

  committed
  a2b69b1

  Copy full SHA for a2b69b1

• fix(Bar): Fix fully rounded when using canvas renderContext by always using Spline (path) instead of Rect

  techniq

  committed
  811fe38

  Copy full SHA for 811fe38

• fix(render): Workaround when using tabular-nums causing computedStyles.font to return empty

  techniq

  committed
  279e73e

  Copy full SHA for 279e73e

Commits on Jan 12, 2025

• feat(LinearGradient): Support Canvas context (WIP)

  techniq

  committed
  3a0d228

  Copy full SHA for 3a0d228

• Add parsePercent util and use for gradient color stops

  techniq

  committed
  231e624

  Copy full SHA for 231e624

• breaking(LinearGradient|RadialGradient): Rename url slot prop to gradient. Improves name, especially within canvas context

  techniq

  committed
  8e18545

  Copy full SHA for 8e18545

• chore(RadialGradient): Stub out canvas support

  techniq

  committed
  133468e

  Copy full SHA for 133468e

• Simplify changesets

  techniq

  committed
  683dc93

  Copy full SHA for 683dc93

• Refine changeset

  techniq

  committed
  3b0415c

  Copy full SHA for 3b0415c