49 lines
1.2 KiB
JavaScript
49 lines
1.2 KiB
JavaScript
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;
|
|
}
|
|
}
|