ggaction 0.0.1

package/src/actions/marks/line.js

@@ -0,0 +1,248 @@
+import { action } from "../../core/action.js";
+import { deriveLineSeries } from "../../grammar/lineSeries.js";
+import { mapContinuousScaleValues, mapOrdinalValues } from "../../grammar/scales.js";
+import { validateUserId } from "../../core/identifiers.js";
+import { validateNonNegativeFinite } from "../../core/validation.js";
+import {
+  assertMarkAvailable,
+  resolveMarkId,
+  resolveMarkData,
+  validateMarkOptions
+} from "./shared.js";
+import { DEFAULT_COLORS } from "../../theme/defaults.js";
+import { findDataset } from "../../selectors/datasets.js";
+import { findLayer, resolveEligibleLayer } from "../../selectors/layers.js";
+import {
+  buildCurvePathCommands,
+  validateCurveInterpolation
+} from "../../grammar/curveCommands.js";
+import { normalizeStrokeDashPattern } from "../../grammar/scales.js";
+import { canMaterializeLine } from "../../materialization/marks.js";
+import { resolveMarkGraphicPlacement } from
+  "../../materialization/graphicHierarchy.js";
+
+const DEFAULT_LINE_STROKE = DEFAULT_COLORS.mark;
+const DEFAULT_LINE_WIDTH = 2;
+const CREATE_OPTIONS = Object.freeze(["id", "data", "strokeWidth", "curve"]);
+const EDIT_OPTIONS = Object.freeze(["target", "strokeWidth", "curve"]);
+const REMATERIALIZE_OPTIONS = Object.freeze(["id"]);
+
+const createLineMark = action(
+  {
+    op: "createLineMark",
+    description: "Create a semantic line mark and empty path collection."
+  },
+  function (args = {}) {
+    validateMarkOptions(args, CREATE_OPTIONS, "createLineMark");
+    const id = resolveMarkId(this, args.id, {
+      defaultId: "line",
+      label: "Line mark id",
+      markType: "line",
+      operation: "createLineMark"
+    });
+    const { data } = resolveMarkData(this, args);
+    const strokeWidth = validateNonNegativeFinite(
+      args.strokeWidth ?? DEFAULT_LINE_WIDTH,
+      "Line strokeWidth"
+    );
+    const curve = validateCurveInterpolation(args.curve ?? "linear");
+    assertMarkAvailable(this, id);
+
+    return this
+      .editSemantic({
+        property: `layer[${id}].mark.type`,
+        value: "line"
+      })
+      .editSemantic({
+        property: `layer[${id}].data`,
+        value: data
+      })
+      .createGraphics({
+        id,
+        type: "path",
+        length: 0,
+        ...resolveMarkGraphicPlacement(this, { data, markType: "line" })
+      })
+      ._withMarkConfig(
+        id,
+        {
+          ...(Object.hasOwn(args, "strokeWidth") ? { strokeWidth } : {}),
+          ...(Object.hasOwn(args, "curve") ? { curve } : {})
+        }
+      );
+  }
+);
+
+function requireLine(program, id) {
+  const layer = findLayer(program, id);
+
+  if (layer?.mark?.type !== "line") {
+    throw new Error(`Unknown line mark "${id}".`);
+  }
+
+  const dataset = findDataset(program, layer.data);
+
+  if (dataset === undefined) {
+    throw new Error(`Line mark "${id}" requires an existing dataset.`);
+  }
+
+  if (program.graphicSpec.objects[id]?.type !== "path") {
+    throw new Error(`Line mark "${id}" requires path graphics.`);
+  }
+
+  return { dataset, layer };
+}
+
+const rematerializeLineMark = action(
+  {
+    op: "rematerializeLineMark",
+    description: "Recompute aggregate series and concrete line paths."
+  },
+  function (args = {}) {
+    validateMarkOptions(
+      args,
+      REMATERIALIZE_OPTIONS,
+      "rematerializeLineMark"
+    );
+    const id = validateUserId(args.id, "Line mark id");
+    const highlights = Object.entries(
+      this.materializationConfigs.highlights ?? {}
+    ).filter(([, config]) => config.target === id);
+    if (highlights.length > 0) {
+      let baseline = this;
+      for (const [highlightId] of highlights) {
+        baseline = baseline._withoutMaterializationConfig(["highlights", highlightId]);
+      }
+      return baseline
+        .editGraphics({ target: id, property: "length", value: 0 })
+        .rematerializeLineMark({ id })
+        .rematerializeMarkHighlights({ target: id, highlights });
+    }
+    const { dataset, layer } = requireLine(this, id);
+    const existingChildren = this.graphicSpec.objects[id].items;
+    const xScaleId = layer.encoding?.x?.scale;
+    const yScaleId = layer.encoding?.y?.scale;
+    const derived = deriveLineSeries(dataset.values, layer);
+
+    if (xScaleId === undefined || yScaleId === undefined) {
+      throw new Error(`Line mark "${id}" requires x and y scales.`);
+    }
+
+    let resolved = this
+      .rematerializeScale({ id: xScaleId })
+      .rematerializeScale({ id: yScaleId });
+
+    for (const channel of ["color", "strokeDash"]) {
+      const scaleId = layer.encoding?.[channel]?.scale;
+      if (scaleId !== undefined) {
+        resolved = resolved.rematerializeScale({ id: scaleId });
+      }
+    }
+
+    const xScale = resolved.resolvedScales[xScaleId];
+    const yScale = resolved.resolvedScales[yScaleId];
+    const commands = derived.series.map(series => {
+      const x = mapContinuousScaleValues(
+        series.values.map(value => value.x),
+        xScale
+      );
+      const y = mapContinuousScaleValues(
+        series.values.map(value => value.y),
+        yScale
+      );
+
+      return buildCurvePathCommands(
+        series.values.map((_, index) => ({ x: x[index], y: y[index] })),
+        this.markConfigs[id]?.curve ?? "linear"
+      );
+    });
+    const colorEncoding = layer.encoding?.color;
+    const dashEncoding = layer.encoding?.strokeDash;
+    const strokes = colorEncoding?.scale === undefined
+      ? commands.map(
+          (_, index) =>
+            existingChildren[index]?.properties.stroke ?? DEFAULT_LINE_STROKE
+        )
+      : mapOrdinalValues(
+          derived.series.map(series => series.key[colorEncoding.field]),
+          resolved.resolvedScales[colorEncoding.scale].domain,
+          resolved.resolvedScales[colorEncoding.scale].range
+        );
+    const strokeWidths = commands.map(
+      (_, index) =>
+        this.markConfigs[id]?.strokeWidth ??
+        existingChildren[index]?.properties.strokeWidth ??
+        DEFAULT_LINE_WIDTH
+    );
+    const strokeDashes = dashEncoding?.datum !== undefined
+      ? commands.map(() => normalizeStrokeDashPattern(dashEncoding.datum))
+      : dashEncoding?.scale === undefined
+      ? commands.map(
+          (_, index) => existingChildren[index]?.properties.strokeDash ?? []
+        )
+      : mapOrdinalValues(
+          derived.series.map(series => series.key[dashEncoding.field]),
+          resolved.resolvedScales[dashEncoding.scale].domain,
+          resolved.resolvedScales[dashEncoding.scale].range
+        );
+
+    return resolved
+      .editGraphics({ target: id, property: "length", value: commands.length })
+      .editGraphics({ target: id, property: "commands", value: commands })
+      .editGraphics({ target: id, property: "stroke", value: strokes })
+      .editGraphics({ target: id, property: "strokeWidth", value: strokeWidths })
+      .editGraphics({
+        target: id,
+        property: "strokeDash",
+        value: strokeDashes
+      });
+  }
+);
+
+const editLineMark = action(
+  {
+    op: "editLineMark",
+    description: "Edit line-mark curve and stroke width."
+  },
+  function (args = {}) {
+    validateMarkOptions(args, EDIT_OPTIONS, "editLineMark");
+    if (
+      !Object.hasOwn(args, "strokeWidth") &&
+      !Object.hasOwn(args, "curve")
+    ) {
+      throw new Error("editLineMark requires strokeWidth or curve.");
+    }
+    const target = Object.hasOwn(args, "target")
+      ? validateUserId(args.target, "Line mark id")
+      : undefined;
+    const layer = resolveEligibleLayer(this, {
+      target,
+      predicate: candidate => candidate.mark?.type === "line",
+      label: "line mark"
+    });
+    const config = {
+      ...this.markConfigs[layer.id],
+      ...(Object.hasOwn(args, "strokeWidth")
+        ? {
+            strokeWidth: validateNonNegativeFinite(
+              args.strokeWidth,
+              "Line strokeWidth"
+            )
+          }
+        : {}),
+      ...(Object.hasOwn(args, "curve")
+        ? { curve: validateCurveInterpolation(args.curve) }
+        : {})
+    };
+    const next = this._withMarkConfig(layer.id, config);
+    return canMaterializeLine(next, layer)
+      ? next.rematerializeLineMark({ id: layer.id })
+      : next;
+  }
+);
+
+export function registerLineMarkActions(ProgramClass) {
+  ProgramClass.prototype.createLineMark = createLineMark;
+  ProgramClass.prototype.editLineMark = editLineMark;
+  ProgramClass.prototype.rematerializeLineMark = rematerializeLineMark;
+}

package/src/actions/marks/point.js

@@ -0,0 +1,420 @@
+import { action } from "../../core/action.js";
+import { validateUserId } from "../../core/identifiers.js";
+import {
+  validateNonEmptyString,
+  validateNonNegativeFinite,
+  validateUnitInterval
+} from "../../core/validation.js";
+import { getPointGraphicType } from "../../grammar/schemas/mark.js";
+import {
+  createPointShapeGraphic,
+  validatePointShape
+} from "../../grammar/pointShapes.js";
+import {
+  mapContinuousScaleValues,
+  mapDiscretizedColors,
+  mapOrdinalPositionValues,
+  mapOrdinalValues,
+  mapSequentialColors,
+  readScaleField,
+  readNominalField,
+  readQuantitativeField,
+  readTemporalField
+} from "../../grammar/scales.js";
+import {
+  assertMarkAvailable,
+  resolveLayeredMarkInheritance,
+  resolveMarkId,
+  resolveMarkData,
+  validateMarkOptions
+} from "./shared.js";
+import { DEFAULT_COLORS } from "../../theme/defaults.js";
+import { findDataset } from "../../selectors/datasets.js";
+import { findLayer } from "../../selectors/layers.js";
+import { rematerializeExistingLegend } from "../encodings/shared.js";
+import { resolveMarkGraphicPlacement } from
+  "../../materialization/graphicHierarchy.js";
+
+const POINT_MARK_OPTIONS = Object.freeze(["id", "data", "shape"]);
+const EDIT_POINT_OPTIONS = Object.freeze([
+  "target", "shape", "fill", "opacity", "stroke", "strokeWidth"
+]);
+const REMATERIALIZE_OPTIONS = Object.freeze(["id"]);
+const DEFAULT_POINT_FILL = DEFAULT_COLORS.mark;
+
+const createPointMark = action(
+  {
+    op: "createPointMark",
+    description: "Create a semantic point mark and concrete point graphics."
+  },
+  function (args = {}) {
+    validateMarkOptions(args, POINT_MARK_OPTIONS, "createPointMark");
+    const id = resolveMarkId(this, args.id, {
+      defaultId: "point",
+      label: "Point mark id",
+      markType: "point",
+      operation: "createPointMark"
+    });
+    const inherited = resolveLayeredMarkInheritance(this, args);
+    const { data, dataset } = resolveMarkData(this, {
+      ...args,
+      ...(args.data === undefined &&
+        this.context.currentData === undefined &&
+        inherited?.data !== undefined
+        ? { data: inherited.data }
+        : {})
+    });
+    const shape = Object.hasOwn(args, "shape") ? args.shape : "circle";
+    validatePointShape(shape);
+    const resolvedType = getPointGraphicType(shape);
+    const graphicType = resolvedType === "path" ? "circle" : resolvedType;
+
+    assertMarkAvailable(this, id);
+
+    let next = this
+      .editSemantic({
+        property: `layer[${id}].mark.type`,
+        value: "point"
+      })
+      .editSemantic({
+        property: `layer[${id}].data`,
+        value: data
+      });
+    if (inherited?.coordinate !== undefined) {
+      next = next.editSemantic({
+        property: `layer[${id}].coordinate`,
+        value: inherited.coordinate
+      });
+    }
+    for (const channel of ["x", "y"]) {
+      for (const [property, value] of Object.entries(
+        inherited?.encoding[channel] ?? {}
+      )) {
+        next = next.editSemantic({
+          property: `layer[${id}].encoding.${channel}.${property}`,
+          value
+        });
+      }
+    }
+    next = next
+      .createGraphics({
+        id,
+        type: graphicType,
+        length: dataset.values.length,
+        ...resolveMarkGraphicPlacement(next, { data, markType: "point" })
+      })
+      ._withMarkConfig(id, { shape });
+    const inheritedEncodings = Object.values(inherited?.encoding ?? {});
+    const canMaterializeInherited = inheritedEncodings.length > 0 &&
+      inheritedEncodings.every(encoding =>
+        encoding.scale !== undefined && next.resolvedScales[encoding.scale] !== undefined
+      );
+    return !canMaterializeInherited
+      ? next
+      : next.rematerializePointMark({ id });
+  }
+);
+
+function resolveMappedValues(program, layer, dataset, channel) {
+  const encoding = layer.encoding?.[channel];
+  if (encoding === undefined) return undefined;
+  const scale = program.resolvedScales[encoding.scale];
+  if (scale === undefined) {
+    throw new Error(
+      `Point mark "${layer.id}" requires resolved ${channel} scale "${encoding.scale}".`
+    );
+  }
+  const ordinal = ["nominal", "ordinal"].includes(encoding.fieldType);
+  const values = Object.hasOwn(scale, "unknown")
+    ? readScaleField(dataset.values, encoding.field, encoding.fieldType, {
+        allowUnknown: true
+      })
+    : ordinal
+      ? readNominalField(dataset.values, encoding.field)
+      : encoding.fieldType === "temporal"
+        ? readTemporalField(dataset.values, encoding.field)
+        : readQuantitativeField(dataset.values, encoding.field);
+  if (channel === "color" && scale.type === "sequential") {
+    return mapSequentialColors(values, scale.domain, scale.range, {
+      interpolation: scale.interpolate,
+      clamp: scale.clamp ?? false,
+      ...(Object.hasOwn(scale, "unknown") ? { unknown: scale.unknown } : {})
+    });
+  }
+  if (
+    channel === "color" &&
+    ["quantize", "quantile", "threshold"].includes(scale.type)
+  ) {
+    return mapDiscretizedColors(values, scale);
+  }
+  return ordinal
+    ? ["x", "y"].includes(channel)
+      ? mapOrdinalPositionValues(values, scale)
+      : mapOrdinalValues(values, scale.domain, scale.range, {
+          ...(Object.hasOwn(scale, "unknown") ? { unknown: scale.unknown } : {})
+        })
+    : mapContinuousScaleValues(values, scale);
+}
+
+function compactProperties(properties) {
+  return Object.fromEntries(
+    Object.entries(properties).filter(([, value]) => value !== undefined)
+  );
+}
+
+function incompleteShapeGraphic(shape, properties) {
+  const type = getPointGraphicType(shape);
+  const incomplete = type === "path"
+    ? { fill: properties.fill, opacity: properties.opacity }
+    : properties;
+  return { type, properties: compactProperties(incomplete) };
+}
+
+function existingArea(child, parentType) {
+  const type = child?.type ?? parentType;
+  if (type === "circle" && Number.isFinite(child?.properties?.radius)) {
+    return Math.PI * child.properties.radius ** 2;
+  }
+  if (
+    type === "rect" &&
+    Number.isFinite(child.properties?.width) &&
+    Number.isFinite(child.properties?.height)
+  ) {
+    return child.properties.width * child.properties.height;
+  }
+  return undefined;
+}
+
+const rematerializePointMark = action(
+  {
+    op: "rematerializePointMark",
+    description: "Recompute concrete point geometry and appearance."
+  },
+  function (args = {}) {
+    validateMarkOptions(args, REMATERIALIZE_OPTIONS, "rematerializePointMark");
+    const id = validateUserId(args.id, "Point mark id");
+    const highlights = Object.entries(
+      this.materializationConfigs.highlights ?? {}
+    ).filter(([, config]) => config.target === id);
+    if (highlights.length > 0) {
+      let baseline = this;
+      for (const [highlightId] of highlights) {
+        baseline = baseline._withoutMaterializationConfig([
+          "highlights",
+          highlightId
+        ]);
+      }
+      return baseline
+        .editGraphics({ target: id, property: "items", value: [] })
+        .rematerializePointMark({ id })
+        .rematerializeMarkHighlights({ target: id, highlights });
+    }
+    const layer = findLayer(this, id);
+    const graphic = this.graphicSpec.objects[id];
+
+    if (layer?.mark?.type !== "point") {
+      throw new Error(`Unknown point mark "${id}".`);
+    }
+    if (!["circle", "rect", "path", "collection"].includes(graphic?.type)) {
+      throw new Error(`Point mark "${id}" requires point graphics.`);
+    }
+    const dataset = findDataset(this, layer.data);
+    if (dataset === undefined) {
+      throw new Error(`Point mark "${id}" requires an existing dataset.`);
+    }
+
+    const x = resolveMappedValues(this, layer, dataset, "x");
+    const y = resolveMappedValues(this, layer, dataset, "y");
+    const mappedFill = resolveMappedValues(this, layer, dataset, "color");
+    const area = resolveMappedValues(this, layer, dataset, "size");
+    const encodedShape = resolveMappedValues(this, layer, dataset, "shape");
+    const encodedOpacity = resolveMappedValues(this, layer, dataset, "opacity");
+    const config = this.markConfigs[id] ?? {};
+    const fill = mappedFill ?? config.fill ?? DEFAULT_POINT_FILL;
+    const shapes = encodedShape ?? dataset.values.map(() => config.shape ?? "circle");
+    const existingChildren = graphic.items ?? [];
+    const constantShape = validatePointShape(config.shape ?? "circle");
+    const requiresMixedCollection =
+      encodedShape !== undefined ||
+      graphic.type === "collection" ||
+      getPointGraphicType(constantShape) !== graphic.type;
+
+    if (requiresMixedCollection) {
+      const items = dataset.values.map((_, index) => {
+        const shape = shapes[index];
+        const existing = existingChildren[index]?.properties ?? {};
+        const color = mappedFill?.[index] ?? config.fill ??
+          existing.fill ?? DEFAULT_POINT_FILL;
+        const opacity = encodedOpacity?.[index] ?? config.opacity ?? existing.opacity;
+        const resolvedArea = area?.[index] ??
+          (config.radius === undefined
+            ? existingArea(existingChildren[index], graphic.type)
+            :
+            Math.PI * config.radius ** 2);
+        const centerX = x?.[index] ?? existing.x;
+        const centerY = y?.[index] ?? existing.y;
+        if (
+          resolvedArea === undefined ||
+          !Number.isFinite(centerX) ||
+          !Number.isFinite(centerY)
+        ) {
+          return incompleteShapeGraphic(shape, {
+            x: centerX,
+            y: centerY,
+            fill: color,
+            opacity
+          });
+        }
+        return createPointShapeGraphic({
+          shape,
+          x: centerX,
+          y: centerY,
+          area: resolvedArea,
+          fill: color,
+          ...(config.stroke === undefined ? {} : { stroke: config.stroke }),
+          ...(config.strokeWidth === undefined
+            ? {}
+            : { strokeWidth: config.strokeWidth }),
+          opacity
+        });
+      });
+      return this.editGraphics({ target: id, property: "items", value: items });
+    }
+
+    let next = graphic.items.length === dataset.values.length
+      ? this
+      : this.editGraphics({
+          target: id,
+          property: "length",
+          value: dataset.values.length
+        });
+    if (x !== undefined) next = next.editGraphics({ target: id, property: "x", value: x });
+    if (y !== undefined) next = next.editGraphics({ target: id, property: "y", value: y });
+    if (fill !== undefined) {
+      next = next.editGraphics({ target: id, property: "fill", value: fill });
+    }
+    if (graphic.type === "circle") {
+      const radii = area === undefined
+        ? config.radius
+        : area.map(value => Math.sqrt(value / Math.PI));
+      if (radii !== undefined) {
+        next = next.editGraphics({ target: id, property: "radius", value: radii });
+      }
+    } else if (area !== undefined || config.radius !== undefined) {
+      const sides = area === undefined
+        ? config.radius * Math.sqrt(Math.PI)
+        : area.map(value => Math.sqrt(value));
+      const centersX = x ?? existingChildren.map(child => child.properties.x);
+      const centersY = y ?? existingChildren.map(child => child.properties.y);
+      if (centersX.every(Number.isFinite)) {
+        next = next.editGraphics({
+          target: id,
+          property: "x",
+          value: centersX.map((value, index) => value - (Array.isArray(sides) ? sides[index] : sides) / 2)
+        });
+      }
+      if (centersY.every(Number.isFinite)) {
+        next = next.editGraphics({
+          target: id,
+          property: "y",
+          value: centersY.map((value, index) => value - (Array.isArray(sides) ? sides[index] : sides) / 2)
+        });
+      }
+      next = next
+        .editGraphics({ target: id, property: "width", value: sides })
+        .editGraphics({ target: id, property: "height", value: sides })
+        .editGraphics({ target: id, property: "stroke", value: fill ?? DEFAULT_POINT_FILL })
+        .editGraphics({ target: id, property: "strokeWidth", value: 0 });
+    }
+    if (config.opacity !== undefined) {
+      next = next.editGraphics({ target: id, property: "opacity", value: config.opacity });
+    } else if (encodedOpacity !== undefined) {
+      next = next.editGraphics({ target: id, property: "opacity", value: encodedOpacity });
+    }
+    if (config.stroke !== undefined) {
+      next = next.editGraphics({ target: id, property: "stroke", value: config.stroke });
+      next = next.editGraphics({
+        target: id,
+        property: "strokeWidth",
+        value: config.strokeWidth
+      });
+    }
+    return next;
+  }
+);
+
+const editPointMark = action(
+  {
+    op: "editPointMark",
+    description: "Edit constant point-mark appearance."
+  },
+  function (args = {}) {
+    validateMarkOptions(args, EDIT_POINT_OPTIONS, "editPointMark");
+    const editable = ["shape", "fill", "opacity", "stroke", "strokeWidth"];
+    if (!editable.some(property => Object.hasOwn(args, property))) {
+      throw new Error(
+        "editPointMark requires shape, fill, opacity, stroke, or strokeWidth."
+      );
+    }
+    const candidates = this.semanticSpec.layers.filter(
+      layer => layer.mark?.type === "point"
+    );
+    const current = findLayer(this, this.context.currentMark);
+    const requested = args.target ??
+      (current?.mark?.type === "point" ? current.id : undefined);
+    const inferred = requested ?? (candidates.length === 1
+      ? candidates[0].id
+      : undefined);
+    const id = validateUserId(inferred, "Point mark id");
+    const layer = findLayer(this, id);
+    if (layer?.mark?.type !== "point") {
+      throw new Error(`Unknown point mark "${id}".`);
+    }
+    if (Object.hasOwn(args, "shape") && layer.encoding?.shape !== undefined) {
+      throw new Error(
+        "editPointMark shape cannot be combined with a shape encoding."
+      );
+    }
+    if (Object.hasOwn(args, "fill") && layer.encoding?.color !== undefined) {
+      throw new Error(
+        "editPointMark fill cannot be combined with a color encoding."
+      );
+    }
+    const config = { ...this.markConfigs[id] };
+    if (Object.hasOwn(args, "shape")) {
+      config.shape = validatePointShape(args.shape);
+    }
+    if (Object.hasOwn(args, "fill")) {
+      config.fill = validateNonEmptyString(args.fill, "Point fill");
+    }
+    if (Object.hasOwn(args, "opacity")) {
+      config.opacity = validateUnitInterval(args.opacity, "Point opacity");
+    }
+    if (Object.hasOwn(args, "stroke")) {
+      config.stroke = validateNonEmptyString(args.stroke, "Point stroke");
+      config.strokeWidth ??= 1;
+    }
+    if (Object.hasOwn(args, "strokeWidth")) {
+      if (config.stroke === undefined) {
+        throw new Error("Point strokeWidth requires an active stroke.");
+      }
+      config.strokeWidth = validateNonNegativeFinite(
+        args.strokeWidth,
+        "Point strokeWidth"
+      );
+    }
+    const next = this
+      ._withMarkConfig(id, config)
+      .rematerializePointMark({ id });
+    const legend = next.guideConfigs.legend?.series;
+    return legend?.target === id && legend.channels.includes("shape")
+      ? rematerializeExistingLegend(next)
+      : next;
+  }
+);
+
+export function registerPointMarkActions(ProgramClass) {
+  ProgramClass.prototype.createPointMark = createPointMark;
+  ProgramClass.prototype.editPointMark = editPointMark;
+  ProgramClass.prototype.rematerializePointMark = rematerializePointMark;
+}