71 lines
2 KiB
JavaScript
71 lines
2 KiB
JavaScript
|
import { Mouse } from './pointing.js';
|
||
|
|
export class BoardObject {
|
||
|
|
constructor(x, y, width, height, className, margins = { left: 0, right: 0, top: 0, bottom: 0 }) {
|
||
|
|
this.el = document.createElement('div');
|
||
|
|
this.el.className = className;
|
||
|
|
this.width = width;
|
||
|
|
this.height = height;
|
||
|
|
this.margins = margins;
|
||
|
|
this.updatePosition(x, y);
|
||
|
|
this.grabbable = false;
|
||
|
|
this.widgets = [];
|
||
|
|
}
|
||
|
|
updatePosition(x, y) {
|
||
|
|
this.x = x;
|
||
|
|
this.y = y;
|
||
|
|
this.el.style.left = `${x}px`;
|
||
|
|
this.el.style.top = `${y}px`;
|
||
|
|
}
|
||
|
|
|
||
|
|
nudgePosition(dx, dy) {
|
||
|
|
this.x = this.x + dx;
|
||
|
|
this.y = this.y + dy;
|
||
|
|
this.el.style.left = `${this.x}px`;
|
||
|
|
this.el.style.top = `${this.y}px`;
|
||
|
|
}
|
||
|
|
|
||
|
|
addWidget(widget) {
|
||
|
|
widget.setParent(this);
|
||
|
|
widget.resize();
|
||
|
|
this.el.appendChild(widget.el);
|
||
|
|
this.widgets.push(widget);
|
||
|
|
}
|
||
|
|
|
||
|
|
addWidgets(widgetList) {
|
||
|
|
for (const widget of widgetList) {
|
||
|
|
this.addWidget(widget);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
removeWidget(widget) {
|
||
|
|
this.widgets = this.widgets.filter(function (currentWidget) {
|
||
|
|
return currentWidget !== widget;
|
||
|
|
});
|
||
|
|
widget.el.remove();
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
registerGrabEvent() {
|
||
|
|
this.grabbable = true;
|
||
|
|
this.el.classList.add("grabable");
|
||
|
|
this.el.addEventListener("mousedown", event => {
|
||
|
|
if (!(event.target == this.el || event.target.clickThrough)) return;
|
||
|
|
|
||
|
|
this.el.parentNode.append(this.el);
|
||
|
|
Mouse.isDown = true;
|
||
|
|
Mouse.dragging = this;
|
||
|
|
const x = event.screenX - this.x;
|
||
|
|
const y = event.screenY - this.y;
|
||
|
|
Mouse.offset = [x, y];
|
||
|
|
});
|
||
|
|
this.el.addEventListener("touchstart", event => {
|
||
|
|
if (!(event.target == this.el || event.target.clickThrough)) return;
|
||
|
|
this.el.parentNode.append(this.el);
|
||
|
|
|
||
|
|
Mouse.isDown = true;
|
||
|
|
Mouse.dragging = this;
|
||
|
|
console.log("touchstart", Mouse.dragging);
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|