@wcardinal/wcardinal-geditor
Version:
WebGL-based graphic editor, tester and viewer for supervisory systems
515 lines • 21.1 kB
JavaScript
import { __extends } from "tslib";
import { DApplications, DControllers, EShapeCapability, EShapePointsFormatters, EShapePointsStyle, UtilKeyboardEvent, UtilPointerEvent } from "@wcardinal/wcardinal-ui";
import { Graphics, Matrix, Point } from "pixi.js";
import { ECommandShapeReplaceOne } from "../command/e-command-shape-replace-one";
import { EToolShapeEditLineHitArea } from "./e-tool-shape-edit-line-base-hit-area";
var EToolShapeEditLineBase = /** @class */ (function (_super) {
__extends(EToolShapeEditLineBase, _super);
function EToolShapeEditLineBase(options) {
var _this = _super.call(this) || this;
_this._options = options;
_this._selection = options.selection;
_this._diagram = options.diagram;
_this._onDownPoint = new Point();
_this._points = [];
_this._pointsStyle = EShapePointsStyle.NONE;
_this._onMovePoint = new Point();
_this._isEditing = false;
_this._isEdited = false;
_this._isActive = false;
_this._shape = null;
_this._capability = EShapeCapability.LINE_TAIL | EShapeCapability.LINE_HEAD;
_this._scaleBound = 1;
_this._scaleBoundInverse = 1;
_this._lastHitAnchor = -1;
_this._lastHitSegment = -1;
_this._lastHitSegmentPosition = -1;
_this._targetCopy = new Point();
_this._target = null;
_this._targetIndex = -1;
_this._onDownBound = function (e) {
_this.onDown(e);
};
_this._onMoveBound = function (e) {
_this.onMove(e);
};
_this._onUpBound = function (e) {
_this.onUp(e);
};
_this._onKeydownBound = function (e) {
_this.onKeydown(e);
};
_this._onSetBound = function (canvas) {
_this.onSet(canvas);
};
_this._onUnsetBound = function (canvas) {
_this.onUnset(canvas);
};
_this.cursor = "grab";
_this.interactive = true;
_this.hitArea = new EToolShapeEditLineHitArea(_this);
_this._unformatted = {
length: 0,
plength: 0,
values: [],
segments: [],
style: EShapePointsStyle.NONE
};
_this._formatted = {
length: 0,
plength: 0,
values: [],
segments: [],
style: EShapePointsStyle.NONE
};
return _this;
}
EToolShapeEditLineBase.prototype.onPrerender = function () {
var scale0 = this.getParentScale();
var scale1 = this._scaleBound;
if (0.001 < Math.abs(scale0 - scale1)) {
this._scaleBound = scale0;
this._scaleBoundInverse = 1 / scale0;
this.reshape();
}
};
EToolShapeEditLineBase.prototype.getParentScale = function () {
var parent = this.parent;
return parent != null ? parent.scale.y : 1;
};
EToolShapeEditLineBase.prototype.render = function (renderer) {
this.onPrerender();
_super.prototype.render.call(this, renderer);
};
EToolShapeEditLineBase.prototype.getAnchorSize = function () {
return 6 * this._scaleBoundInverse;
};
EToolShapeEditLineBase.prototype.activate = function () {
if (!this._isActive) {
this._isActive = true;
this.onActivate();
}
};
EToolShapeEditLineBase.prototype.onActivate = function () {
this._isEditing = false;
this._isEdited = false;
this._target = null;
this._targetIndex = -1;
var diagram = this._diagram;
var layer = DApplications.getLayer(diagram);
if (layer) {
var interactionManager = layer.renderer.plugins.interaction;
diagram.on(UtilPointerEvent.down, this._onDownBound);
interactionManager.on(UtilPointerEvent.move, this._onMoveBound);
var onUpBound = this._onUpBound;
interactionManager.on(UtilPointerEvent.up, onUpBound);
interactionManager.on(UtilPointerEvent.upoutside, onUpBound);
interactionManager.on(UtilPointerEvent.cancel, onUpBound);
diagram.on("keydown", this._onKeydownBound);
diagram.on("set", this._onSetBound);
diagram.on("unset", this._onUnsetBound);
}
var selection = this._selection;
selection.modifier.disallow();
selection.updateModifier();
};
EToolShapeEditLineBase.prototype.deactivate = function () {
if (this._isActive) {
this._isActive = false;
this.onDeactivate();
}
};
EToolShapeEditLineBase.prototype.onDeactivate = function () {
this._isEditing = false;
this._isEdited = false;
this._target = null;
this._targetIndex = -1;
this.shape = null;
var diagram = this._diagram;
var layer = DApplications.getLayer(diagram);
if (layer) {
var interactionManager = layer.renderer.plugins.interaction;
diagram.off(UtilPointerEvent.down, this._onDownBound);
interactionManager.off(UtilPointerEvent.move, this._onMoveBound);
var onUpBound = this._onUpBound;
interactionManager.off(UtilPointerEvent.up, onUpBound);
interactionManager.off(UtilPointerEvent.upoutside, onUpBound);
interactionManager.off(UtilPointerEvent.cancel, onUpBound);
diagram.off("keydown", this._onKeydownBound);
diagram.off("set", this._onSetBound);
diagram.off("unset", this._onUnsetBound);
}
var selection = this._selection;
selection.modifier.allow();
selection.updateModifier();
};
EToolShapeEditLineBase.prototype.onSet = function (canvas) {
// DO NOTHING
};
EToolShapeEditLineBase.prototype.onUnset = function (canvas) {
this.onCancel();
};
EToolShapeEditLineBase.prototype.isActive = function () {
return this._isActive;
};
EToolShapeEditLineBase.prototype.isEditing = function () {
return this._isEditing;
};
Object.defineProperty(EToolShapeEditLineBase.prototype, "points", {
get: function () {
return this._points;
},
enumerable: false,
configurable: true
});
Object.defineProperty(EToolShapeEditLineBase.prototype, "closed", {
get: function () {
return (this._pointsStyle & EShapePointsStyle.CLOSED) !== 0;
},
enumerable: false,
configurable: true
});
Object.defineProperty(EToolShapeEditLineBase.prototype, "shape", {
get: function () {
return this._shape;
},
set: function (shape) {
var _a, _b;
if (this._shape !== shape) {
this._shape = shape;
var capability = this.toCapability(shape);
this.hitArea.capability = capability;
this._capability = capability;
this._isEdited = false;
if (shape == null) {
this._points = [];
this._pointsStyle = EShapePointsStyle.NONE;
this._formatter = undefined;
var parent_1 = this.parent;
if (parent_1) {
parent_1.removeChild(this);
DApplications.update(this);
}
}
else {
var points = shape.points;
if (points) {
shape.updateTransform();
this._points = this.toPoints(shape, points, this.toTransform(shape));
var pointsStyle = points.style;
this._pointsStyle = pointsStyle;
this._formatter =
(_a = points.formatter) !== null && _a !== void 0 ? _a : (_b = EShapePointsFormatters.find(pointsStyle)) === null || _b === void 0 ? void 0 : _b.formatter;
}
else {
this._points = [];
this._pointsStyle = EShapePointsStyle.NONE;
this._formatter = undefined;
}
this.reshape();
var canvas = this._diagram.canvas;
if (canvas) {
canvas.addChild(this);
}
}
}
},
enumerable: false,
configurable: true
});
EToolShapeEditLineBase.prototype.toTransform = function (shape) {
var _a;
var result = ((_a = this._workTransform) !== null && _a !== void 0 ? _a : (this._workTransform = new Matrix()));
result.copyFrom(shape.transform.internalTransform);
// If the layer this shape belongs to has a non-zero position,
// we have to take that into consideration.
var parent = shape.root.parent;
if (parent) {
result.prepend(parent.transform.localTransform);
}
return result;
};
EToolShapeEditLineBase.prototype.toPoints = function (shape, points, transform) {
var result = [];
var values = points.values;
for (var i = 0, imax = values.length; i < imax; i += 2) {
var point = new Point(values[i + 0], values[i + 1]);
result.push(transform.apply(point, point));
}
return result;
};
EToolShapeEditLineBase.prototype.setLastHitAnchor = function (index) {
if (this._lastHitAnchor !== index || this._lastHitSegment !== -1) {
this._lastHitAnchor = index;
this._lastHitSegment = -1;
this._lastHitSegmentPosition = -1;
this.reshape();
DApplications.update(this);
}
};
EToolShapeEditLineBase.prototype.setLastHitSegment = function (index, position) {
this._lastHitSegmentPosition = position;
if (this._lastHitAnchor !== -1 || this._lastHitSegment !== index) {
this._lastHitAnchor = -1;
this._lastHitSegment = index;
this.reshape();
DApplications.update(this);
}
};
EToolShapeEditLineBase.prototype.reshape = function () {
var graphics = this;
var points = this._points;
var pointsLength = points.length;
var pointsStyle = this._pointsStyle;
var formatter = this._formatter;
var pointsClosed = !!(pointsStyle & EShapePointsStyle.CLOSED);
var capability = this._capability;
var hasTail = !!(capability & EShapeCapability.LINE_TAIL);
var hasHead = !!(capability & EShapeCapability.LINE_HEAD);
graphics.clear();
if (0 < pointsLength) {
var s = this.getAnchorSize();
var hs = s * 0.5;
var color = 0x1e87f0;
var colorHit = 0xf36f27;
var colorFormatted = 0xaaaaaa;
var alpha = 1;
var alphaFormatted = 0.5;
var anchor = this._lastHitAnchor;
var segment = this._lastHitSegment;
// Formatted
if (formatter != null) {
var unformatted = this._unformatted;
var uvalues = unformatted.values;
var usegments = unformatted.segments;
for (var i = 0, j = 0; i < pointsLength; i += 1, j += 2) {
var point = points[i];
uvalues[j] = point.x;
uvalues[j + 1] = point.y;
}
var formatted = this._formatted;
formatter(pointsLength, uvalues, usegments, pointsStyle, formatted);
var fvalues = formatted.values;
graphics.lineStyle(hs, colorFormatted, alphaFormatted);
if (0 < fvalues.length) {
graphics.moveTo(fvalues[0], fvalues[1]);
for (var i = 2, imax = fvalues.length; i < imax; i += 2) {
graphics.lineTo(fvalues[i], fvalues[i + 1]);
}
}
}
// Line
for (var i = 0, imax = pointsLength - 1; i < imax; ++i) {
var p0 = points[i];
var p1 = points[i + 1];
var c = segment === i ? colorHit : color;
graphics.lineStyle(hs, c, alpha);
graphics.moveTo(p0.x, p0.y);
graphics.lineTo(p1.x, p1.y);
}
if (hasTail && hasHead && pointsClosed) {
var i = points.length - 1;
var p0 = points[i];
var p1 = points[0];
var c = segment === i ? colorHit : color;
graphics.lineStyle(hs, c, alpha);
graphics.moveTo(p0.x, p0.y);
graphics.lineTo(p1.x, p1.y);
}
// Anchors
var targetIndex = this._targetIndex;
for (var i = hasTail ? 0 : 1, imax = pointsLength - (hasHead ? 0 : 1); i < imax; ++i) {
var point = points[i];
var c = anchor === i || targetIndex === i ? colorHit : color;
graphics.lineStyle(hs, c, alpha);
graphics.beginFill(c, alpha);
graphics.drawRect(point.x - hs, point.y - hs, s, s);
graphics.endFill();
}
}
};
EToolShapeEditLineBase.prototype.replace = function () {
var oldShape = this._shape;
var points = this._points;
if (oldShape && oldShape.parent && 2 <= points.length) {
var values = this.toValues(points, oldShape);
if (2 < values.length) {
var newShape = this.newShape(values, [], this._pointsStyle, oldShape);
DControllers.getCommandController().push(new ECommandShapeReplaceOne(newShape, oldShape, oldShape.parent, this._selection));
}
}
};
EToolShapeEditLineBase.prototype.toValues = function (points, shape) {
shape.updateTransform();
var transform = this.toTransform(shape).invert();
var result = [];
var a = transform.a;
var b = transform.b;
var c = transform.c;
var d = transform.d;
var tx = transform.tx;
var ty = transform.ty;
var pprevx = NaN;
var pprevy = NaN;
for (var i = 0, imax = points.length; i < imax; ++i) {
var point = points[i];
var px = point.x;
var py = point.y;
if (pprevx !== px || pprevy !== py) {
var x = a * px + c * py + tx;
var y = b * px + d * py + ty;
result.push(x, y);
pprevx = x;
pprevy = y;
}
}
return result;
};
EToolShapeEditLineBase.prototype.onDown = function (e) {
if (e.target === this) {
var originalEvent = e.data.originalEvent;
if (originalEvent.altKey) {
return;
}
var diagram = this._diagram;
var canvas = diagram.canvas;
if (canvas != null && !this._isEditing) {
var lastHitAnchor = this._lastHitAnchor;
var points = this._points;
var onDownPoint = this._onDownPoint;
if (0 <= lastHitAnchor && lastHitAnchor < points.length) {
this._isEditing = true;
canvas.toLocal(e.data.global, undefined, onDownPoint);
this._target = points[lastHitAnchor];
this._targetCopy.copyFrom(this._target);
this._targetIndex = lastHitAnchor;
this.onTargetChange(lastHitAnchor, onDownPoint);
this.reshape();
DApplications.update(this);
}
else {
var lastHitSegment = this._lastHitSegment;
if (0 <= lastHitSegment) {
this._lastHitSegment = -1;
this._isEditing = true;
canvas.toLocal(e.data.global, undefined, onDownPoint);
var p0 = points[lastHitSegment + 0];
var p1 = points[lastHitSegment < points.length - 1 ? lastHitSegment + 1 : 0];
var t = this._lastHitSegmentPosition;
var ti = 1 - t;
var x = ti * p0.x + t * p1.x;
var y = ti * p0.y + t * p1.y;
var point = new Point(x, y);
points.splice(lastHitSegment + 1, 0, point);
this._target = point;
this._targetCopy.copyFrom(point);
this._targetIndex = lastHitSegment + 1;
this.onTargetChange(this._targetIndex, onDownPoint);
this.reshape();
DApplications.update(this);
}
}
}
}
else {
this.onDone();
}
};
EToolShapeEditLineBase.prototype.onTargetChange = function (targetIndex, point) {
// DO NOTHING
};
EToolShapeEditLineBase.prototype.onMove = function (e) {
if (this._isEditing) {
var originalEvent = e.data.originalEvent;
if (originalEvent.altKey) {
return;
}
var diagram = this._diagram;
var canvas = diagram.canvas;
var target = this._target;
var targetCopy = this._targetCopy;
if (canvas && target) {
this._isEdited = true;
var onDownPoint = this._onDownPoint;
var onMovePoint = canvas.toLocal(e.data.global, undefined, this._onMovePoint);
target.set(targetCopy.x + onMovePoint.x - onDownPoint.x, targetCopy.y + onMovePoint.y - onDownPoint.y);
this.toSnapped(target, diagram, target);
if (originalEvent.shiftKey) {
var points = this._points;
var targetIndex = this._targetIndex;
var previousIndex = 0 < targetIndex ? targetIndex - 1 : targetIndex + 1;
if (0 <= previousIndex && previousIndex < points.length) {
var previous = points[previousIndex];
var dx = target.x - previous.x;
var dy = target.y - previous.y;
var dangle = Math.PI * 0.25;
var angle = Math.round(Math.atan2(dy, dx) / dangle) * dangle;
var d = Math.sqrt(dx * dx + dy * dy);
target.set(previous.x + d * Math.cos(angle), previous.y + d * Math.sin(angle));
}
}
this.onTargetMove(onMovePoint);
this.reshape();
DApplications.update(this);
}
}
else {
this.onTargetNotMove(e);
}
};
EToolShapeEditLineBase.prototype.onTargetMove = function (point) {
// DO NOTHING
};
EToolShapeEditLineBase.prototype.onTargetNotMove = function (e) {
// DO NOTHING
};
EToolShapeEditLineBase.prototype.toSnapped = function (target, diagram, result) {
diagram.snapper.toSnapped(target, result);
};
EToolShapeEditLineBase.prototype.onUp = function (e) {
if (this._isEditing) {
this._isEditing = false;
this._target = null;
}
};
EToolShapeEditLineBase.prototype.onDone = function () {
this._isEditing = false;
if (this._isEdited) {
this._isEdited = false;
this.replace();
}
this.emit("done", this);
};
EToolShapeEditLineBase.prototype.onCancel = function () {
this._isEditing = false;
this._isEdited = false;
var parent = this.parent;
if (parent) {
parent.removeChild(this);
DApplications.update(this);
}
this.emit("cancel", this);
};
EToolShapeEditLineBase.prototype.onKeydown = function (e) {
if (UtilKeyboardEvent.isCancelKey(e)) {
this.onDone();
}
else if (UtilKeyboardEvent.isDeleteKey(e)) {
var targetIndex = this._targetIndex;
var points = this._points;
if (0 <= targetIndex && targetIndex < points.length && 2 < points.length) {
this._isEdited = true;
points.splice(targetIndex, 1);
if (targetIndex === points.length) {
this._targetIndex -= 1;
this.onTargetChange(this._targetIndex, null);
}
this.reshape();
DApplications.update(this);
}
}
};
return EToolShapeEditLineBase;
}(Graphics));
export { EToolShapeEditLineBase };
//# sourceMappingURL=e-tool-shape-edit-line-base.js.map