@wcardinal/wcardinal-geditor
Version:
WebGL-based graphic editor, tester and viewer for supervisory systems
172 lines • 6.88 kB
JavaScript
import { __extends } from "tslib";
import { createLine, DApplications, DControllers, EShapeDefaults, EShapePointsStyle, UtilKeyboardEvent, UtilPointerEvent } from "@wcardinal/wcardinal-ui";
import { Point } from "pixi.js";
import { ECommandShapeCreate } from "../command/e-command-shape-create";
import { EToolImpl } from "./e-tool-impl";
var EToolShapeCreateLine = /** @class */ (function (_super) {
__extends(EToolShapeCreateLine, _super);
function EToolShapeCreateLine(options) {
var _this = _super.call(this) || this;
_this._options = options;
_this._selection = options.selection;
_this._diagram = options.diagram;
_this._isNewPoint = false;
_this._onDownPoint = new Point();
_this._onMovePoint = new Point();
_this._onDownBound = function (e) {
_this.onDown(e);
};
_this._onMoveBound = function (e) {
_this.onMove(e);
};
_this._onDblClickBound = function () {
_this.onDblClick();
};
_this._onKeydownBound = function (e) {
_this.onKeydown(e);
};
return _this;
}
EToolShapeCreateLine.prototype.onActivate = function () {
var diagram = this._diagram;
diagram.on(UtilPointerEvent.down, this._onDownBound);
diagram.on(UtilPointerEvent.move, this._onMoveBound);
diagram.on("dblclick", this._onDblClickBound);
diagram.on("keydown", this._onKeydownBound);
var selection = this._selection;
selection.modifier.disallow();
selection.updateModifier();
};
EToolShapeCreateLine.prototype.onDeactivate = function () {
var diagram = this._diagram;
diagram.off(UtilPointerEvent.down, this._onDownBound);
diagram.off(UtilPointerEvent.move, this._onMoveBound);
diagram.off("dblclick", this._onDblClickBound);
diagram.off("keydown", this._onKeydownBound);
this.onCancel();
var selection = this._selection;
selection.modifier.allow();
selection.updateModifier();
};
EToolShapeCreateLine.prototype.onDown = function (e) {
var originalEvent = e.data.originalEvent;
if (originalEvent.altKey) {
return;
}
var diagram = this._diagram;
var canvas = diagram.canvas;
var layer = diagram.layer;
if (canvas && layer) {
this._isNewPoint = true;
var line = this._line;
if (line == null) {
var onDownPoint = this._onDownPoint;
canvas.toLocal(e.data.global, undefined, onDownPoint);
diagram.snapper.toSnapped(onDownPoint, onDownPoint);
layer.transform.localTransform.applyInverse(onDownPoint, onDownPoint);
var newLine = createLine([onDownPoint.x, onDownPoint.y], [], EShapeDefaults.STROKE_WIDTH, EShapePointsStyle.NONE);
newLine.attach(layer);
this._line = newLine;
}
}
};
EToolShapeCreateLine.prototype.onMove = function (e) {
var originalEvent = e.data.originalEvent;
if (originalEvent.altKey) {
return;
}
var line = this._line;
if (line) {
var diagram = this._diagram;
var canvas = diagram.canvas;
if (canvas) {
var values = line.points.values;
if (this._isNewPoint) {
this._isNewPoint = false;
values.push(0, 0);
}
var onMovePoint = this._onMovePoint;
canvas.toLocal(e.data.global, undefined, onMovePoint);
diagram.snapper.toSnapped(onMovePoint, onMovePoint);
var parent_1 = line.parent;
if (parent_1) {
parent_1.transform.localTransform.applyInverse(onMovePoint, onMovePoint);
}
var position = line.transform.position;
var x = onMovePoint.x - position.x;
var y = onMovePoint.y - position.y;
var length_1 = values.length;
if (originalEvent.shiftKey && 4 <= length_1) {
var px = values[length_1 - 4];
var py = values[length_1 - 3];
var dx = x - px;
var dy = y - py;
var dangle = Math.PI * 0.25;
var angle = Math.round(Math.atan2(dy, dx) / dangle) * dangle;
var d = Math.sqrt(dx * dx + dy * dy) | 0;
values[length_1 - 2] = px + d * Math.cos(angle);
values[length_1 - 1] = py + d * Math.sin(angle);
}
else {
values[length_1 - 2] = x | 0;
values[length_1 - 1] = y | 0;
}
line.points.values = values;
DApplications.update(diagram);
}
}
};
EToolShapeCreateLine.prototype.toValues = function (line) {
var position = line.transform.position;
var px = position.x;
var py = position.y;
var values = line.points.values;
var result = [];
var prevx = NaN;
var prevy = NaN;
for (var i = 0, imax = values.length; i < imax; i += 2) {
var x = values[i + 0];
var y = values[i + 1];
if (prevx !== x || prevy !== y) {
result.push(px + x, py + y);
prevx = x;
prevy = y;
}
}
return result;
};
EToolShapeCreateLine.prototype.add = function (values) {
var diagram = this._diagram;
var layer = diagram.layer;
if (layer && 4 <= values.length) {
var newLine = createLine(values, [], EShapeDefaults.STROKE_WIDTH, EShapePointsStyle.NONE);
newLine.attach(layer);
DControllers.getCommandController().push(new ECommandShapeCreate([newLine], layer, this._selection, true));
}
};
EToolShapeCreateLine.prototype.onDblClick = function () {
var line = this._line;
if (line) {
this._line = undefined;
line.detach();
this.add(this.toValues(line));
DApplications.update(this._diagram);
this.emit("done", this);
}
};
EToolShapeCreateLine.prototype.onCancel = function () {
var line = this._line;
if (line) {
line.points.values.length -= 2;
this.onDblClick();
}
};
EToolShapeCreateLine.prototype.onKeydown = function (e) {
if (UtilKeyboardEvent.isCancelKey(e)) {
this.onCancel();
}
};
return EToolShapeCreateLine;
}(EToolImpl));
export { EToolShapeCreateLine };
//# sourceMappingURL=e-tool-shape-create-line.js.map