move Mark class (#1235)

Author: mbostock

package.json

@@ -39,7 +39,9 @@
   "_moduleAliases": {
     "@observablehq/plot": "./src/index.js"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "./src/plot.js"
+  ],
   "devDependencies": {
     "@esbuild-kit/core-utils": "^2.0.2",
     "@rollup/plugin-commonjs": "^23.0.4",

src/index.js

@@ -1,4 +1,5 @@
-export {plot, Mark, marks} from "./plot.js";
+export {plot, marks} from "./plot.js";
+export {Mark} from "./mark.js";
 export {Area, area, areaX, areaY} from "./marks/area.js";
 export {Arrow, arrow} from "./marks/arrow.js";
 export {BarX, BarY, barX, barY} from "./marks/bar.js";

src/mark.js

@@ -0,0 +1,73 @@
+import {Channels, channelDomain, valueObject} from "./channel.js";
+import {defined} from "./defined.js";
+import {arrayify, isDomainSort, range} from "./options.js";
+import {keyword, maybeNamed} from "./options.js";
+import {maybeProject} from "./projection.js";
+import {maybeClip, styles} from "./style.js";
+import {basic, initializer} from "./transforms/basic.js";
+
+export class Mark {
+  constructor(data, channels = {}, options = {}, defaults) {
+    const {facet = "auto", fx, fy, sort, dx, dy, clip, channels: extraChannels} = options;
+    this.data = data;
+    this.sort = isDomainSort(sort) ? sort : null;
+    this.initializer = initializer(options).initializer;
+    this.transform = this.initializer ? options.transform : basic(options).transform;
+    if (facet === null || facet === false) {
+      this.facet = null;
+    } else {
+      this.facet = keyword(facet === true ? "include" : facet, "facet", ["auto", "include", "exclude"]);
+      this.fx = fx;
+      this.fy = fy;
+    }
+    channels = maybeNamed(channels);
+    if (extraChannels !== undefined) channels = {...maybeNamed(extraChannels), ...channels};
+    if (defaults !== undefined) channels = {...styles(this, options, defaults), ...channels};
+    this.channels = Object.fromEntries(
+      Object.entries(channels).filter(([name, {value, optional}]) => {
+        if (value != null) return true;
+        if (optional) return false;
+        throw new Error(`missing channel value: ${name}`);
+      })
+    );
+    this.dx = +dx || 0;
+    this.dy = +dy || 0;
+    this.clip = maybeClip(clip);
+  }
+  initialize(facets, facetChannels) {
+    let data = arrayify(this.data);
+    if (facets === undefined && data != null) facets = [range(data)];
+    if (this.transform != null) ({facets, data} = this.transform(data, facets)), (data = arrayify(data));
+    const channels = Channels(this.channels, data);
+    if (this.sort != null) channelDomain(channels, facetChannels, data, this.sort); // mutates facetChannels!
+    return {data, facets, channels};
+  }
+  filter(index, channels, values) {
+    for (const name in channels) {
+      const {filter = defined} = channels[name];
+      if (filter !== null) {
+        const value = values[name];
+        index = index.filter((i) => filter(value[i]));
+      }
+    }
+    return index;
+  }
+  // If there is a projection, and there are both x and y channels (or x1 and
+  // y1, or x2 and y2 channels), and those channels are associated with the x
+  // and y scale respectively (and not already in screen coordinates as with an
+  // initializer), then apply the projection, replacing the x and y values. Note
+  // that the x and y scales themselves don’t exist if there is a projection,
+  // but whether the channels are associated with scales still determines
+  // whether the projection should apply; think of the projection as a
+  // combination xy-scale.
+  project(channels, values, context) {
+    maybeProject("x", "y", channels, values, context);
+    maybeProject("x1", "y1", channels, values, context);
+    maybeProject("x2", "y2", channels, values, context);
+  }
+  scale(channels, scales, context) {
+    const values = valueObject(channels, scales);
+    if (context.projection) this.project(channels, values, context);
+    return values;
+  }
+}

src/marks/area.js

@@ -2,7 +2,7 @@ import {area as shapeArea} from "d3";
 import {create} from "../context.js";
 import {Curve} from "../curve.js";
 import {first, indexOf, maybeZ, second} from "../options.js";
-import {Mark} from "../plot.js";
+import {Mark} from "../mark.js";
 import {
   applyDirectStyles,
   applyIndirectStyles,

src/marks/arrow.js

@@ -1,7 +1,7 @@
 import {create} from "../context.js";
 import {radians} from "../math.js";
 import {constant} from "../options.js";
-import {Mark} from "../plot.js";
+import {Mark} from "../mark.js";
 import {applyChannelStyles, applyDirectStyles, applyIndirectStyles, applyTransform} from "../style.js";
 import {maybeSameValue} from "./link.js";
 

src/marks/bar.js

@@ -1,6 +1,6 @@
 import {create} from "../context.js";
 import {identity, indexOf, number} from "../options.js";
-import {Mark} from "../plot.js";
+import {Mark} from "../mark.js";
 import {isCollapsed} from "../scales.js";
 import {
   applyDirectStyles,

src/marks/delaunay.js

@@ -2,7 +2,7 @@ import {group, pathRound as path, select, Delaunay} from "d3";
 import {create} from "../context.js";
 import {Curve} from "../curve.js";
 import {constant, maybeTuple, maybeZ} from "../options.js";
-import {Mark} from "../plot.js";
+import {Mark} from "../mark.js";
 import {
   applyChannelStyles,
   applyDirectStyles,

src/marks/density.js

@@ -1,6 +1,6 @@
 import {contourDensity, create, geoPath} from "d3";
 import {isTypedArray, maybeTuple, maybeZ} from "../options.js";
-import {Mark} from "../plot.js";
+import {Mark} from "../mark.js";
 import {Position} from "../projection.js";
 import {coerceNumbers} from "../scales.js";
 import {

src/marks/dot.js

@@ -2,7 +2,7 @@ import {pathRound as path, symbolCircle} from "d3";
 import {create} from "../context.js";
 import {negative, positive} from "../defined.js";
 import {identity, maybeFrameAnchor, maybeNumberChannel, maybeTuple} from "../options.js";
-import {Mark} from "../plot.js";
+import {Mark} from "../mark.js";
 import {
   applyChannelStyles,
   applyDirectStyles,

src/marks/frame.js

@@ -1,6 +1,6 @@
 import {create} from "../context.js";
 import {number} from "../options.js";
-import {Mark} from "../plot.js";
+import {Mark} from "../mark.js";
 import {applyDirectStyles, applyIndirectStyles, applyTransform} from "../style.js";
 
 const defaults = {