@rokkit/chart 1.0.0-next.150 → 1.0.0-next.155

package/src/patterns/patterns.js

@@ -29,180 +29,332 @@
 
 /** @type {Record<string, PatternMark[]>} */
 export const PATTERNS = {
-  // ── Line-based ──────────────────────────────────────────────────────────────
-
-  brick: [
-    { type: 'line', x1: 0,   y1: 0.25, x2: 0.5, y2: 0.25 },
-    { type: 'line', x1: 0.5, y1: 0.75, x2: 1,   y2: 0.75 },
-    { type: 'line', x1: 0,   y1: 0,    x2: 0,   y2: 1    },
-    { type: 'line', x1: 1,   y1: 0,    x2: 1,   y2: 1    },
-    { type: 'line', x1: 0.5, y1: 0,    x2: 0.5, y2: 1    }
-  ],
-
-  hatch: [
-    { type: 'line', x1: 0,    y1: 0.25, x2: 1,    y2: 0.25 },
-    { type: 'line', x1: 0,    y1: 0.5,  x2: 1,    y2: 0.5  },
-    { type: 'line', x1: 0,    y1: 0.75, x2: 1,    y2: 0.75 },
-    { type: 'line', x1: 0.25, y1: 0,    x2: 0.25, y2: 1    },
-    { type: 'line', x1: 0.5,  y1: 0,    x2: 0.5,  y2: 1    },
-    { type: 'line', x1: 0.75, y1: 0,    x2: 0.75, y2: 1    }
-  ],
-
-  // Coordinates intentionally exceed 0–1 so lines tile seamlessly at tile edges
-  diagonal: [
-    { type: 'line', x1: -0.5, y1: 0.5,  x2: 0.5,  y2: -0.5 },
-    { type: 'line', x1:  0,   y1: 1,    x2: 1,    y2:  0   },
-    { type: 'line', x1:  0.5, y1: 1.5,  x2: 1.5,  y2:  0.5 }
-  ],
-
-  // Two sets of diagonals crossing to form a diamond lattice
-  diamonds: [
-    { type: 'line', x1:  0,   y1: 1,    x2: 1,    y2:  0   },
-    { type: 'line', x1: -0.5, y1: 0.5,  x2: 0.5,  y2: -0.5 },
-    { type: 'line', x1:  0.5, y1: 1.5,  x2: 1.5,  y2:  0.5 },
-    { type: 'line', x1:  0,   y1: 0,    x2: 1,    y2:  1   },
-    { type: 'line', x1: -0.5, y1: 0.5,  x2: 0.5,  y2:  1.5 },
-    { type: 'line', x1:  0.5, y1: -0.5, x2: 1.5,  y2:  0.5 }
-  ],
-
-  tile: [
-    { type: 'line', x1: 0,   y1: 0.5, x2: 1,   y2: 0.5 },
-    { type: 'line', x1: 0.5, y1: 0,   x2: 0.5, y2: 1   }
-  ],
-
-  // ── Path-based ──────────────────────────────────────────────────────────────
-
-  swell: [
-    { type: 'path', d: [['M', 0, 0.3], ['A', 0.6, 0.5, 0, 0, 0, 1, 0.3]] }
-  ],
-
-  waves: [
-    { type: 'path', d: [['M', 0, 0.5], ['L', 0.25, 0], ['L', 0.75, 1], ['L', 1, 0.5]] }
-  ],
-
-  // ── Circle-based ────────────────────────────────────────────────────────────
-
-  // Small filled dots in an X pattern across the tile
-  dots: [
-    { type: 'circle', cx: 0.2, cy: 0.2, r: 0.08, fill: true },
-    { type: 'circle', cx: 0.4, cy: 0.4, r: 0.08, fill: true },
-    { type: 'circle', cx: 0.6, cy: 0.6, r: 0.08, fill: true },
-    { type: 'circle', cx: 0.8, cy: 0.8, r: 0.08, fill: true },
-    { type: 'circle', cx: 0.8, cy: 0.2, r: 0.08, fill: true },
-    { type: 'circle', cx: 0.6, cy: 0.4, r: 0.08, fill: true },
-    { type: 'circle', cx: 0.4, cy: 0.6, r: 0.08, fill: true },
-    { type: 'circle', cx: 0.2, cy: 0.8, r: 0.08, fill: true }
-  ],
-
-  // Outlined diamond (rotated square)
-  lattice: [
-    { type: 'polygon', points: [[0.5, 0.22], [0.78, 0.5], [0.5, 0.78], [0.22, 0.5]] }
-  ],
-
-  // Fish-scale geometry as stroke only — same circles as petals, no fill
-  scales: [
-    {
-      type: 'path',
-      d: [
-        ['M', -0.7071, 0],    ['a', 0.7071, 0.7071, 0, 1, 0,  1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
-        ['M',  0.2929, 0],    ['a', 0.7071, 0.7071, 0, 1, 0,  1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
-        ['M', -0.2071, 0.5],  ['a', 0.7071, 0.7071, 0, 1, 0,  1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
-        ['M', -0.7071, 1],    ['a', 0.7071, 0.7071, 0, 1, 0,  1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
-        ['M',  0.2929, 1],    ['a', 0.7071, 0.7071, 0, 1, 0,  1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
-      ]
-    }
-  ],
-
-  // Filled circles at tile corners + center (5-point dice pattern)
-  circles: [
-    { type: 'circle', cx: 0.5, cy: 0.5, r: 0.2, fill: true },
-    { type: 'circle', cx: 0,   cy: 0,   r: 0.2, fill: true },
-    { type: 'circle', cx: 1,   cy: 0,   r: 0.2, fill: true },
-    { type: 'circle', cx: 0,   cy: 1,   r: 0.2, fill: true },
-    { type: 'circle', cx: 1,   cy: 1,   r: 0.2, fill: true }
-  ],
-
-  // Diagonal cross strokes with a filled circle at the center
-  pip: [
-    { type: 'line',   x1: 0, y1: 0, x2: 1, y2: 1 },
-    { type: 'line',   x1: 0, y1: 1, x2: 1, y2: 0 },
-    { type: 'circle', cx: 0.5, cy: 0.5, r: 0.22, fill: true }
-  ],
-
-  // Two outlined circles + two filled circles in a 2×2 grid
-  rings: [
-    { type: 'circle', cx: 0.25, cy: 0.25, r: 0.2              },
-    { type: 'circle', cx: 0.75, cy: 0.75, r: 0.2              },
-    { type: 'circle', cx: 0.25, cy: 0.75, r: 0.2, fill: true },
-    { type: 'circle', cx: 0.75, cy: 0.25, r: 0.2, fill: true }
-  ],
-
-  // Fish-scale: circles centered at corners + tile center, r = 0.5√2 so each
-  // circle passes through its adjacent neighbors' centers. Even-odd fill produces
-  // the scallop/petal pattern where overlapping regions alternate filled/clear.
-  petals: [
-    {
-      type: 'path', fill: true, fillRule: 'evenodd',
-      d: [
-        // center (0, 0)   r=0.7071  leftmost = (-0.7071, 0)
-        ['M', -0.7071, 0],    ['a', 0.7071, 0.7071, 0, 1, 0,  1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
-        // center (1, 0)   leftmost = (0.2929, 0)
-        ['M',  0.2929, 0],    ['a', 0.7071, 0.7071, 0, 1, 0,  1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
-        // center (0.5, 0.5)  leftmost = (-0.2071, 0.5)
-        ['M', -0.2071, 0.5],  ['a', 0.7071, 0.7071, 0, 1, 0,  1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
-        // center (0, 1)   leftmost = (-0.7071, 1)
-        ['M', -0.7071, 1],    ['a', 0.7071, 0.7071, 0, 1, 0,  1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
-        // center (1, 1)   leftmost = (0.2929, 1)
-        ['M',  0.2929, 1],    ['a', 0.7071, 0.7071, 0, 1, 0,  1.4142, 0], ['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
-      ]
-    }
-  ],
-
-  // ── Polygon-based ───────────────────────────────────────────────────────────
-
-  // Three filled triangles tiling the corners + center of the tile
-  triangles: [
-    { type: 'polygon', points: [[0, 0.5], [0.5, 1], [0, 1]],     fill: true },
-    { type: 'polygon', points: [[0.5, 0], [0, 0],   [0, 0.5]],   fill: true },
-    { type: 'polygon', points: [[1, 0],   [0.5, 0.5], [1, 1]],   fill: true }
-  ],
-
-  // Two filled triangles scattered at opposite corners
-  shards: [
-    { type: 'polygon', points: [[0.25, 0.017], [0, 0.417], [0.5, 0.417]], fill: true },
-    { type: 'polygon', points: [[0.5, 0.583], [1, 0.583], [0.75, 0.983]], fill: true }
-  ],
-
-  // Diagonal corner split — two-tone polygon division
-  wedge: [
-    { type: 'polygon', points: [[1, 1], [0.45, 1], [0, 0.55], [0, 0]],                 fill: true },
-    { type: 'polygon', points: [[1, 0], [0, 0], [1, 1]],               fill: true, fillOpacity: 0.55 }
-  ],
-
-  // Two triangles pointing inward from top and bottom edges
-  argyle: [
-    { type: 'polygon', points: [[1, 0], [0.5, 0.5], [0, 0]],   fill: true },
-    { type: 'polygon', points: [[1, 1], [0.5, 0.5], [0, 1]],   fill: true }
-  ],
-
-  // triangles pattern rotated 90° clockwise: (x,y) → (1−y, x)
-  chevrons: [
-    { type: 'polygon', points: [[0, 0], [0.5, 0], [0, 0.5]],   fill: true },
-    { type: 'polygon', points: [[0.5, 0], [1, 0], [1, 0.5]],   fill: true },
-    { type: 'polygon', points: [[0, 1], [1, 1], [0.5, 0.5]],   fill: true }
-  ],
-
-  // ── Rect-based ──────────────────────────────────────────────────────────────
-
-  checkerboard: [
-    { type: 'rect', x: 0,   y: 0,   w: 0.5, h: 0.5, fill: true },
-    { type: 'rect', x: 0.5, y: 0.5, w: 0.5, h: 0.5, fill: true }
-  ],
-
-  // Quarter-circle filled shape (bottom-left corner) with two accent dots
-  shell: [
-    { type: 'path', d: [['M', 0, 1], ['V', 0], ['H', 0.6], ['V', 0.4], ['A', 0.6, 0.6, 0, 0, 1, 0, 1]], fill: true },
-    { type: 'circle', cx: 0.798, cy: 0.298, r: 0.081, fill: true },
-    { type: 'circle', cx: 0.798, cy: 0.702, r: 0.081, fill: true }
-  ],
+	// ── Line-based ──────────────────────────────────────────────────────────────
+
+	brick: [
+		{ type: 'line', x1: 0, y1: 0.25, x2: 0.5, y2: 0.25 },
+		{ type: 'line', x1: 0.5, y1: 0.75, x2: 1, y2: 0.75 },
+		{ type: 'line', x1: 0, y1: 0, x2: 0, y2: 1 },
+		{ type: 'line', x1: 1, y1: 0, x2: 1, y2: 1 },
+		{ type: 'line', x1: 0.5, y1: 0, x2: 0.5, y2: 1 }
+	],
+
+	hatch: [
+		{ type: 'line', x1: 0, y1: 0.25, x2: 1, y2: 0.25 },
+		{ type: 'line', x1: 0, y1: 0.5, x2: 1, y2: 0.5 },
+		{ type: 'line', x1: 0, y1: 0.75, x2: 1, y2: 0.75 },
+		{ type: 'line', x1: 0.25, y1: 0, x2: 0.25, y2: 1 },
+		{ type: 'line', x1: 0.5, y1: 0, x2: 0.5, y2: 1 },
+		{ type: 'line', x1: 0.75, y1: 0, x2: 0.75, y2: 1 }
+	],
+
+	// Coordinates intentionally exceed 0–1 so lines tile seamlessly at tile edges
+	diagonal: [
+		{ type: 'line', x1: -0.5, y1: 0.5, x2: 0.5, y2: -0.5 },
+		{ type: 'line', x1: 0, y1: 1, x2: 1, y2: 0 },
+		{ type: 'line', x1: 0.5, y1: 1.5, x2: 1.5, y2: 0.5 }
+	],
+
+	// Two sets of diagonals crossing to form a diamond lattice
+	diamonds: [
+		{ type: 'line', x1: 0, y1: 1, x2: 1, y2: 0 },
+		{ type: 'line', x1: -0.5, y1: 0.5, x2: 0.5, y2: -0.5 },
+		{ type: 'line', x1: 0.5, y1: 1.5, x2: 1.5, y2: 0.5 },
+		{ type: 'line', x1: 0, y1: 0, x2: 1, y2: 1 },
+		{ type: 'line', x1: -0.5, y1: 0.5, x2: 0.5, y2: 1.5 },
+		{ type: 'line', x1: 0.5, y1: -0.5, x2: 1.5, y2: 0.5 }
+	],
+
+	tile: [
+		{ type: 'line', x1: 0, y1: 0.5, x2: 1, y2: 0.5 },
+		{ type: 'line', x1: 0.5, y1: 0, x2: 0.5, y2: 1 }
+	],
+
+	// ── Path-based ──────────────────────────────────────────────────────────────
+
+	swell: [
+		{
+			type: 'path',
+			d: [
+				['M', 0, 0.3],
+				['A', 0.6, 0.5, 0, 0, 0, 1, 0.3]
+			]
+		}
+	],
+
+	waves: [
+		{
+			type: 'path',
+			d: [
+				['M', 0, 0.5],
+				['L', 0.25, 0],
+				['L', 0.75, 1],
+				['L', 1, 0.5]
+			]
+		}
+	],
+
+	// ── Circle-based ────────────────────────────────────────────────────────────
+
+	// Small filled dots in an X pattern across the tile
+	dots: [
+		{ type: 'circle', cx: 0.2, cy: 0.2, r: 0.08, fill: true },
+		{ type: 'circle', cx: 0.4, cy: 0.4, r: 0.08, fill: true },
+		{ type: 'circle', cx: 0.6, cy: 0.6, r: 0.08, fill: true },
+		{ type: 'circle', cx: 0.8, cy: 0.8, r: 0.08, fill: true },
+		{ type: 'circle', cx: 0.8, cy: 0.2, r: 0.08, fill: true },
+		{ type: 'circle', cx: 0.6, cy: 0.4, r: 0.08, fill: true },
+		{ type: 'circle', cx: 0.4, cy: 0.6, r: 0.08, fill: true },
+		{ type: 'circle', cx: 0.2, cy: 0.8, r: 0.08, fill: true }
+	],
+
+	// Outlined diamond (rotated square)
+	lattice: [
+		{
+			type: 'polygon',
+			points: [
+				[0.5, 0.22],
+				[0.78, 0.5],
+				[0.5, 0.78],
+				[0.22, 0.5]
+			]
+		}
+	],
+
+	// Fish-scale geometry as stroke only — same circles as petals, no fill
+	scales: [
+		{
+			type: 'path',
+			d: [
+				['M', -0.7071, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+				['M', 0.2929, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+				['M', -0.2071, 0.5],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+				['M', -0.7071, 1],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+				['M', 0.2929, 1],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0]
+			]
+		}
+	],
+
+	// Filled circles at tile corners + center (5-point dice pattern)
+	circles: [
+		{ type: 'circle', cx: 0.5, cy: 0.5, r: 0.2, fill: true },
+		{ type: 'circle', cx: 0, cy: 0, r: 0.2, fill: true },
+		{ type: 'circle', cx: 1, cy: 0, r: 0.2, fill: true },
+		{ type: 'circle', cx: 0, cy: 1, r: 0.2, fill: true },
+		{ type: 'circle', cx: 1, cy: 1, r: 0.2, fill: true }
+	],
+
+	// Diagonal cross strokes with a filled circle at the center
+	pip: [
+		{ type: 'line', x1: 0, y1: 0, x2: 1, y2: 1 },
+		{ type: 'line', x1: 0, y1: 1, x2: 1, y2: 0 },
+		{ type: 'circle', cx: 0.5, cy: 0.5, r: 0.22, fill: true }
+	],
+
+	// Two outlined circles + two filled circles in a 2×2 grid
+	rings: [
+		{ type: 'circle', cx: 0.25, cy: 0.25, r: 0.2 },
+		{ type: 'circle', cx: 0.75, cy: 0.75, r: 0.2 },
+		{ type: 'circle', cx: 0.25, cy: 0.75, r: 0.2, fill: true },
+		{ type: 'circle', cx: 0.75, cy: 0.25, r: 0.2, fill: true }
+	],
+
+	// Fish-scale: circles centered at corners + tile center, r = 0.5√2 so each
+	// circle passes through its adjacent neighbors' centers. Even-odd fill produces
+	// the scallop/petal pattern where overlapping regions alternate filled/clear.
+	petals: [
+		{
+			type: 'path',
+			fill: true,
+			fillRule: 'evenodd',
+			d: [
+				// center (0, 0)   r=0.7071  leftmost = (-0.7071, 0)
+				['M', -0.7071, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+				// center (1, 0)   leftmost = (0.2929, 0)
+				['M', 0.2929, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+				// center (0.5, 0.5)  leftmost = (-0.2071, 0.5)
+				['M', -0.2071, 0.5],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+				// center (0, 1)   leftmost = (-0.7071, 1)
+				['M', -0.7071, 1],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0],
+				// center (1, 1)   leftmost = (0.2929, 1)
+				['M', 0.2929, 1],
+				['a', 0.7071, 0.7071, 0, 1, 0, 1.4142, 0],
+				['a', 0.7071, 0.7071, 0, 1, 0, -1.4142, 0]
+			]
+		}
+	],
+
+	// ── Polygon-based ───────────────────────────────────────────────────────────
+
+	// Three filled triangles tiling the corners + center of the tile
+	triangles: [
+		{
+			type: 'polygon',
+			points: [
+				[0, 0.5],
+				[0.5, 1],
+				[0, 1]
+			],
+			fill: true
+		},
+		{
+			type: 'polygon',
+			points: [
+				[0.5, 0],
+				[0, 0],
+				[0, 0.5]
+			],
+			fill: true
+		},
+		{
+			type: 'polygon',
+			points: [
+				[1, 0],
+				[0.5, 0.5],
+				[1, 1]
+			],
+			fill: true
+		}
+	],
+
+	// Two filled triangles scattered at opposite corners
+	shards: [
+		{
+			type: 'polygon',
+			points: [
+				[0.25, 0.017],
+				[0, 0.417],
+				[0.5, 0.417]
+			],
+			fill: true
+		},
+		{
+			type: 'polygon',
+			points: [
+				[0.5, 0.583],
+				[1, 0.583],
+				[0.75, 0.983]
+			],
+			fill: true
+		}
+	],
+
+	// Diagonal corner split — two-tone polygon division
+	wedge: [
+		{
+			type: 'polygon',
+			points: [
+				[1, 1],
+				[0.45, 1],
+				[0, 0.55],
+				[0, 0]
+			],
+			fill: true
+		},
+		{
+			type: 'polygon',
+			points: [
+				[1, 0],
+				[0, 0],
+				[1, 1]
+			],
+			fill: true,
+			fillOpacity: 0.55
+		}
+	],
+
+	// Two triangles pointing inward from top and bottom edges
+	argyle: [
+		{
+			type: 'polygon',
+			points: [
+				[1, 0],
+				[0.5, 0.5],
+				[0, 0]
+			],
+			fill: true
+		},
+		{
+			type: 'polygon',
+			points: [
+				[1, 1],
+				[0.5, 0.5],
+				[0, 1]
+			],
+			fill: true
+		}
+	],
+
+	// triangles pattern rotated 90° clockwise: (x,y) → (1−y, x)
+	chevrons: [
+		{
+			type: 'polygon',
+			points: [
+				[0, 0],
+				[0.5, 0],
+				[0, 0.5]
+			],
+			fill: true
+		},
+		{
+			type: 'polygon',
+			points: [
+				[0.5, 0],
+				[1, 0],
+				[1, 0.5]
+			],
+			fill: true
+		},
+		{
+			type: 'polygon',
+			points: [
+				[0, 1],
+				[1, 1],
+				[0.5, 0.5]
+			],
+			fill: true
+		}
+	],
+
+	// ── Rect-based ──────────────────────────────────────────────────────────────
+
+	checkerboard: [
+		{ type: 'rect', x: 0, y: 0, w: 0.5, h: 0.5, fill: true },
+		{ type: 'rect', x: 0.5, y: 0.5, w: 0.5, h: 0.5, fill: true }
+	],
+
+	// Quarter-circle filled shape (bottom-left corner) with two accent dots
+	shell: [
+		{
+			type: 'path',
+			d: [
+				['M', 0, 1],
+				['V', 0],
+				['H', 0.6],
+				['V', 0.4],
+				['A', 0.6, 0.6, 0, 0, 1, 0, 1]
+			],
+			fill: true
+		},
+		{ type: 'circle', cx: 0.798, cy: 0.298, r: 0.081, fill: true },
+		{ type: 'circle', cx: 0.798, cy: 0.702, r: 0.081, fill: true }
+	]
 }

package/src/patterns/scale.js

@@ -24,11 +24,20 @@
  * @returns {(string|number)[]}
  */
 function scalePathCmd(cmd, size) {
-  const [op, ...args] = cmd
-  if (op === 'A' || op === 'a') {
-    return [op, args[0] * size, args[1] * size, args[2], args[3], args[4], args[5] * size, args[6] * size]
-  }
-  return [op, ...args.map((v) => (typeof v === 'number' ? v * size : v))]
+	const [op, ...args] = cmd
+	if (op === 'A' || op === 'a') {
+		return [
+			op,
+			args[0] * size,
+			args[1] * size,
+			args[2],
+			args[3],
+			args[4],
+			args[5] * size,
+			args[6] * size
+		]
+	}
+	return [op, ...args.map((v) => (typeof v === 'number' ? v * size : v))]
 }
 
 /**
@@ -39,22 +48,34 @@ function scalePathCmd(cmd, size) {
  * @returns {object}
  */
 export function scaleMark(mark, size) {
-  switch (mark.type) {
-    case 'line':
-      return { ...mark, x1: mark.x1 * size, y1: mark.y1 * size, x2: mark.x2 * size, y2: mark.y2 * size }
-    case 'circle':
-      return { ...mark, cx: mark.cx * size, cy: mark.cy * size, r: mark.r * size }
-    case 'rect': {
-      const { w, h, ...rest } = mark
-      return { ...rest, x: mark.x * size, y: mark.y * size, width: w * size, height: h * size }
-    }
-    case 'polygon':
-      return { ...mark, points: mark.points.map(([x, y]) => `${x * size},${y * size}`).join(' ') }
-    case 'path':
-      return { ...mark, d: mark.d.map((cmd) => scalePathCmd(cmd, size)).map((cmd) => cmd.join(' ')).join(' ') }
-    default:
-      return mark
-  }
+	switch (mark.type) {
+		case 'line':
+			return {
+				...mark,
+				x1: mark.x1 * size,
+				y1: mark.y1 * size,
+				x2: mark.x2 * size,
+				y2: mark.y2 * size
+			}
+		case 'circle':
+			return { ...mark, cx: mark.cx * size, cy: mark.cy * size, r: mark.r * size }
+		case 'rect': {
+			const { w, h, ...rest } = mark
+			return { ...rest, x: mark.x * size, y: mark.y * size, width: w * size, height: h * size }
+		}
+		case 'polygon':
+			return { ...mark, points: mark.points.map(([x, y]) => `${x * size},${y * size}`).join(' ') }
+		case 'path':
+			return {
+				...mark,
+				d: mark.d
+					.map((cmd) => scalePathCmd(cmd, size))
+					.map((cmd) => cmd.join(' '))
+					.join(' ')
+			}
+		default:
+			return mark
+	}
 }
 
 /**
@@ -71,17 +92,25 @@ export function scaleMark(mark, size) {
  * @returns {{ type: string, attrs: object }}
  */
 export function resolveMarkAttrs(scaledMark, { fill, stroke, thickness }) {
-  const { type, fill: isFill, strokeWidth, fillOpacity, opacity, fillRule, ...geometry } = scaledMark
+	const {
+		type,
+		fill: isFill,
+		strokeWidth,
+		fillOpacity,
+		opacity,
+		fillRule,
+		...geometry
+	} = scaledMark
 
-  const attrs = {
-    ...geometry,
-    fill: isFill ? fill : 'none',
-    stroke: isFill ? 'none' : stroke,
-    'stroke-width': isFill ? 0 : (strokeWidth ?? thickness),
-  }
-  if (fillOpacity !== null && fillOpacity !== undefined) attrs['fill-opacity'] = fillOpacity
-  if (opacity !== null && opacity !== undefined) attrs.opacity = opacity
-  if (fillRule !== null && fillRule !== undefined) attrs['fill-rule'] = fillRule
+	const attrs = {
+		...geometry,
+		fill: isFill ? fill : 'none',
+		stroke: isFill ? 'none' : stroke,
+		'stroke-width': isFill ? 0 : (strokeWidth ?? thickness)
+	}
+	if (fillOpacity !== null && fillOpacity !== undefined) attrs['fill-opacity'] = fillOpacity
+	if (opacity !== null && opacity !== undefined) attrs.opacity = opacity
+	if (fillRule !== null && fillRule !== undefined) attrs['fill-rule'] = fillRule
 
-  return { type, attrs }
+	return { type, attrs }
 }