ggaction 0.0.2 → 0.0.4

package/src/renderers/canvas/index.js

@@ -4,7 +4,10 @@ import { drawPathGraphic } from "./path.js";
 import { drawRectGraphic } from "./rect.js";
 import { drawTextGraphic } from "./text.js";
 import { requireFiniteProperty } from "./validation.js";
-import { walkGraphicDrawOrder } from "../../grammar/schemas/graphicTree.js";
+import {
+  requireSingleOrderedGraphicByType,
+  walkGraphicTreeEvents
+} from "../../grammar/schemas/graphicTree.js";
 
 const DRAWERS = Object.freeze({
   circle: drawCircleGraphic,
@@ -46,16 +49,41 @@ function requireCanvasContext(context) {
   }
 }
 
-function findCanvas(graphicSpec) {
-  const canvasIds = graphicSpec.order.filter(
-    id => graphicSpec.objects[id]?.type === "canvas"
-  );
+function requireContextMethod(context, method, label) {
+  if (typeof context[method] !== "function") {
+    throw new TypeError(`${label} requires Canvas context ${method}().`);
+  }
+}
 
-  if (canvasIds.length !== 1) {
-    throw new Error("graphicSpec must contain exactly one ordered canvas.");
+function fillCanvasBackground(context, id, canvas, width, height) {
+  if (canvas.properties.background === undefined) return;
+  if (typeof canvas.properties.background !== "string") {
+    throw new Error(
+      `Graphic "${id}" requires a string background property.`
+    );
   }
+  context.globalAlpha = 1;
+  context.fillStyle = canvas.properties.background;
+  context.fillRect(0, 0, width, height);
+}
 
-  return { id: canvasIds[0], graphic: graphicSpec.objects[canvasIds[0]] };
+function enterNestedCanvas(context, id, canvas) {
+  const properties = canvas.properties ?? {};
+  const x = requireFiniteProperty(properties, "x", id);
+  const y = requireFiniteProperty(properties, "y", id);
+  const width = requireFiniteProperty(properties, "width", id);
+  const height = requireFiniteProperty(properties, "height", id);
+  if (width < 0 || height < 0) {
+    throw new Error(`Nested Canvas "${id}" width and height must not be negative.`);
+  }
+  requireContextMethod(context, "rect", `Nested Canvas "${id}"`);
+  requireContextMethod(context, "clip", `Nested Canvas "${id}"`);
+  context.save();
+  context.translate(x, y);
+  context.beginPath();
+  context.rect(0, 0, width, height);
+  context.clip();
+  fillCanvasBackground(context, id, canvas, width, height);
 }
 
 export function render(program, context, { pixelRatio = 1 } = {}) {
@@ -77,7 +105,8 @@ export function render(program, context, { pixelRatio = 1 } = {}) {
     throw new RangeError("render pixelRatio must be a positive finite number.");
   }
 
-  const { id: canvasId, graphic: canvas } = findCanvas(graphicSpec);
+  const { id: canvasId, object: canvas } =
+    requireSingleOrderedGraphicByType(graphicSpec, "canvas");
   const width = requireFiniteProperty(canvas.properties ?? {}, "width", canvasId);
   const height = requireFiniteProperty(
     canvas.properties ?? {},
@@ -97,20 +126,37 @@ export function render(program, context, { pixelRatio = 1 } = {}) {
     context.scale(pixelRatio, pixelRatio);
     context.clearRect(0, 0, width, height);
 
-    if (canvas.properties.background !== undefined) {
-      if (typeof canvas.properties.background !== "string") {
-        throw new Error(
-          `Graphic "${canvasId}" requires a string background property.`
-        );
+    fillCanvasBackground(context, canvasId, canvas, width, height);
+
+    walkGraphicTreeEvents(graphicSpec, {
+      enter({ id, object }) {
+        if (id === canvasId) return;
+        if (object.type === "canvas") {
+          enterNestedCanvas(context, id, object);
+          return;
+        }
+        if (object.type === "collection") {
+          context.save();
+          return;
+        }
+        if (!Array.isArray(object.items)) {
+          drawConcreteGraphic(context, id, object);
+        }
+      },
+      item({ id, object, owner }) {
+        drawConcreteGraphic(context, id, {
+          ...object,
+          type: object.type ?? owner.type
+        });
+      },
+      exit({ id, object }) {
+        if (
+          id !== canvasId &&
+          (object.type === "collection" || object.type === "canvas")
+        ) {
+          context.restore();
+        }
       }
-
-      context.globalAlpha = 1;
-      context.fillStyle = canvas.properties.background;
-      context.fillRect(0, 0, width, height);
-    }
-
-    walkGraphicDrawOrder(graphicSpec, ({ id, object }) => {
-      if (id !== canvasId) drawConcreteGraphic(context, id, object);
     });
   } finally {
     context.restore();

package/src/renderers/canvas/text.js

@@ -2,6 +2,18 @@ import { requireFiniteProperty, requireStringProperty } from "./validation.js";
 import { validateConcreteGraphicProperties } from
   "../../grammar/schemas/concreteGraphic.js";
 
+const MIN_CANVAS_NUMERIC_FONT_WEIGHT = 100;
+const MAX_CANVAS_NUMERIC_FONT_WEIGHT = 900;
+
+export function normalizeCanvasFontWeight(fontWeight) {
+  if (typeof fontWeight !== "number") return fontWeight;
+  const rounded = Math.round(fontWeight / 100) * 100;
+  return Math.min(
+    MAX_CANVAS_NUMERIC_FONT_WEIGHT,
+    Math.max(MIN_CANVAS_NUMERIC_FONT_WEIGHT, rounded)
+  );
+}
+
 function drawText(context, child, collectionId) {
   const properties = child.properties ?? {};
   const graphicId = child.id ?? collectionId;
@@ -73,7 +85,8 @@ function drawText(context, child, collectionId) {
   try {
     context.fillStyle = fill;
     context.globalAlpha = opacity;
-    context.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+    const canvasFontWeight = normalizeCanvasFontWeight(fontWeight);
+    context.font = `${canvasFontWeight} ${fontSize}px ${fontFamily}`;
     context.textAlign = textAlign;
     context.textBaseline = textBaseline;
     context.translate(x, y);

package/types/extension.d.ts

@@ -6,9 +6,13 @@ export { ChartProgram };
 export interface ActionMetadata {
   op: string;
   description: string;
+  scope?: "unit" | "composition" | "any";
 }
 
 export function action<TOptions extends ActionOptions = ActionOptions>(
   metadata: ActionMetadata,
   implementation: (this: ChartProgram, options: TOptions) => ChartProgram
-): (this: ChartProgram, options?: TOptions) => ChartProgram;
+): <TProgram extends ChartProgram>(
+  this: TProgram,
+  options?: TOptions
+) => TProgram;

package/types/index.d.ts

@@ -1,4 +1,4 @@
-import type { ChartProgram } from "./program.js";
+import type { ChartProgram, CompositionOptions } from "./program.js";
 
 export type {
   ActionOptions,
@@ -18,19 +18,56 @@ export type {
   ColorLayout,
   ColorEncodingOptions,
   CompleteAxisOptions,
+  ConcatCompositionSpec,
+  CompositionAlign,
+  CompositionOptions,
+  CompositionPadding,
+  CompositionProgramEntry,
+  CompositionSpec,
   ChartProgram,
   ConcretePathCommand,
   CurveInterpolation,
+  CreateDerivedDataOptions,
   CreateAxesOptions,
+  CreateCoordinateOptions,
+  CreateGuidesOptions,
   CreateGridOptions,
+  CreateRegressionBandOptions,
+  CreateRegressionLineOptions,
+  CreateScaleOptions,
   DashPattern,
   DashScaleOptions,
   DashStyle,
+  DatasetDensityTransform,
+  DatasetFilterTransform,
+  DatasetIntervalOutputFields,
+  DatasetIntervalTransform,
+  DatasetRegressionTransform,
+  DatasetScalar,
+  DatasetTransform,
   EditGraphicsOptions,
+  EditCompositionLayoutOptions,
+  EditFacetHeadersOptions,
+  EditAxisOptions,
+  EditGridDirectionsOptions,
   EditGridOptions,
+  EditErrorBandBoundaryOptions,
+  EditErrorBandOptions,
+  EditErrorBarOptions,
+  EditBoxPlotOptions,
+  EditLegendBorderOptions,
+  EditLegendLabelsOptions,
+  EditLegendLayoutOptions,
+  EditLegendSymbolsOptions,
+  EditLegendTitleOptions,
   EditScaleOptions,
   EditSemanticOptions,
   FieldType,
+  FacetCompositionSpec,
+  FacetGuideOptions,
+  FacetOptions,
+  FacetScaleResolution,
+  FacetScaleResolutions,
   GraphicObject,
   GraphicSpec,
   GraphicType,
@@ -57,23 +94,41 @@ export type {
   RegressionInterval,
   RegressionMethod,
   RegressionOptions,
+  RectMarkOptions,
+  ReplaceCompositionChildOptions,
+  EditRegressionOptions,
+  EditRectMarkOptions,
+  RemoveAxisOptions,
+  RemoveGridOptions,
+  RemoveLegendOptions,
+  RemoveMarkOptions,
   ScaleRange,
   ScaleOptions,
   ScaleType,
   StackMode,
+  SemanticCoordinate,
+  SemanticDataset,
+  SemanticLayer,
+  SemanticScale,
   SemanticSpec,
   SelectMarksOptions,
   StrokeDashEncodingOptions,
   TraceNode,
   TitleOptions,
   EditTitleOptions,
+  EditTextMarkOptions,
   TitleTextStyleOptions,
+  TextEncodingOptions,
+  TextFormat,
+  TextMarkOptions,
   XAxisPosition,
   YAxisPosition,
   XOffsetEncodingOptions
 } from "./program.js";
 
 export function chart(): ChartProgram;
+export function hconcat(options: CompositionOptions): ChartProgram;
+export function vconcat(options: CompositionOptions): ChartProgram;
 export function render(
   program: Pick<ChartProgram, "graphicSpec">,
   context: CanvasRenderingContext2D,