import {
  DiagramComponent,
  pickAttributes,
  validateOptionalHandler
} from "./diagram-component.js";
import { DrawingNode } from "./drawing-core.js";

const NODE_ATTRIBUTES = [
  "content",
  "contentType",
  "x",
  "y",
  "width",
  "height",
  "backgroundColor",
  "borderColor",
  "borderWidth",
  "textColor"
];

/**
 * Public rendering handle for one diagram node.
 *
 * DiagramEngine creates nodes and owns their lifetime. The editor uses this
 * handle to update presentation attributes and receive completed moves.
 */
export class DiagramNode extends DiagramComponent {
  constructor(engine, attributes) {
    const component = new DrawingNode(pickAttributes(attributes, NODE_ATTRIBUTES));
    super(engine, component, NODE_ATTRIBUTES);
  }

  /** Constrain or observe the node while it is being dragged. */
  onMove(handler) {
    validateOptionalHandler(handler, "move");
    this.component.moveHandler = handler ?
      (x, y) => handler(this, x, y) : null;
    return this;
  }

  /** Register a callback for the end of a node drag gesture. */
  onMoveEnd(handler) {
    validateOptionalHandler(handler, "move-end");
    this.component.moveEndHandler = handler ?
      (x, y, event) => handler(this, x, y, event) : null;
    return this;
  }
}