@wcardinal/wcardinal-geditor
Version:
WebGL-based graphic editor, tester and viewer for supervisory systems
516 lines • 23.4 kB
JavaScript
import { __extends } from "tslib";
import { DApplications, DControllers, EShapeBase, EShapeCapabilities, EShapeCapability, ESnapperModifierAnchor, UtilKeyboardEvent, UtilPointerEvent } from "@wcardinal/wcardinal-ui";
import { Point, Rectangle } from "pixi.js";
import { UtilShapeAreaSelect } from "../util/util-shape-area-select";
import { ECommandShapeSelect } from "../command/e-command-shape-select";
import { EToolImpl } from "./e-tool-impl";
import { EToolSelectArea } from "./e-tool-select-area";
import { EToolSelectSelection } from "./e-tool-select-selection";
import { UtilHitTest } from "../util/util-hit-test";
import { UtilShapeSearch } from "../util/util-shape-search";
var toSelectionOptions = function (options) {
var selection = options.selection;
return {
diagram: options.diagram,
modifier: selection && selection.modifier
};
};
var EToolSelect = /** @class */ (function (_super) {
__extends(EToolSelect, _super);
function EToolSelect(options) {
var _this = _super.call(this) || this;
_this._selection = new EToolSelectSelection(toSelectionOptions(options));
_this._area = new EToolSelectArea();
_this._diagram = options.diagram;
_this._applicationLayer = null;
_this._onDownPoint = new Point();
_this._onMovePoint = new Point();
_this._onUpPoint = new Point();
_this._areaRect = new Rectangle();
_this._mode = 0 /* EToolSelectMode.NONE */;
_this._isFirstMove = false;
_this._childSelectTime = -1;
_this._childSelectChild = null;
var allow = options.allow;
if (allow) {
_this._isTransformationAllowed = allow.transformation !== false;
_this._isDeletionAllowed = allow.deletion !== false;
}
else {
_this._isTransformationAllowed = true;
_this._isDeletionAllowed = true;
}
_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._onKeyupBound = function (e) {
_this.onKeyup(e);
};
_this._onDblClickBound = function (e) {
_this.onDblClick(e);
};
return _this;
}
Object.defineProperty(EToolSelect.prototype, "selection", {
get: function () {
return this._selection;
},
enumerable: false,
configurable: true
});
EToolSelect.prototype.onActivate = function () {
var diagram = this._diagram;
diagram.on(UtilPointerEvent.down, this._onDownBound);
diagram.on("dblclick", this._onDblClickBound);
diagram.on("keydown", this._onKeydownBound);
diagram.on("keyup", this._onKeyupBound);
};
EToolSelect.prototype.onDeactivate = function () {
var diagram = this._diagram;
diagram.off(UtilPointerEvent.down, this._onDownBound);
diagram.off("dblclick", this._onDblClickBound);
diagram.off("keydown", this._onKeydownBound);
diagram.off("keyup", this._onKeyupBound);
};
EToolSelect.prototype.onDown = function (e) {
var originalEvent = e.data.originalEvent;
if (originalEvent.altKey) {
return;
}
var diagram = this._diagram;
var diagramCanvas = diagram.canvas;
var diagramLayer = diagram.layer;
if (diagramCanvas && diagramLayer) {
var isAddMode = originalEvent.ctrlKey || originalEvent.shiftKey;
if (this._mode === 1 /* EToolSelectMode.SELECT */) {
this._mode = 0 /* EToolSelectMode.NONE */;
this.onSelectEnd(diagramCanvas, diagramLayer, isAddMode);
return;
}
var global_1 = e.data.global;
var onDownPoint = this._onDownPoint;
onDownPoint.copyFrom(global_1);
var selection = this._selection;
var modifier = selection.modifier;
var hitObject = this.hitTest(global_1, modifier, diagramLayer);
var commandController = DControllers.getCommandController();
if (hitObject instanceof EShapeBase) {
if (isAddMode) {
var before = selection.store();
selection.toggle(hitObject);
var after = selection.store();
commandController.push(new ECommandShapeSelect(before, after, selection));
}
else if (!selection.contains(hitObject)) {
var first = selection.first();
if (first == null) {
var before = selection.store();
if (selection.set(hitObject.root)) {
var after = selection.store();
commandController.push(new ECommandShapeSelect(before, after, selection));
}
}
else {
var selected = UtilShapeSearch.toSelected(hitObject);
if (selected != null) {
if (EShapeCapabilities.contains(selected, EShapeCapability.CHILDREN)) {
this._childSelectTime = Date.now();
this._childSelectChild = UtilShapeSearch.toOfParent(hitObject, selected);
}
}
else {
var sharedParent = UtilShapeSearch.toSharedParent(first, hitObject);
var before = selection.store();
if (selection.set(UtilShapeSearch.toOfParent(hitObject, sharedParent))) {
var after = selection.store();
commandController.push(new ECommandShapeSelect(before, after, selection));
}
}
}
}
if (this._isTransformationAllowed && selection.prepareTranslate()) {
selection.prepareTranslateSnap();
this._mode = 2 /* EToolSelectMode.TRANSLATE */;
this._isFirstMove = true;
}
}
else if (hitObject === modifier) {
switch (modifier.getLastHitAnchor()) {
case ESnapperModifierAnchor.ROTATION:
if (selection.prepareRotate(global_1)) {
selection.prepareRotateSnap();
this._mode = 4 /* EToolSelectMode.ROTATE */;
this._isFirstMove = true;
}
break;
default:
if (selection.prepareScale(modifier.getLastHitAnchor())) {
selection.prepareScaleSnap();
this._mode = 3 /* EToolSelectMode.SCALE */;
this._isFirstMove = true;
}
}
}
else {
// Select area
var area = this._area;
diagramCanvas.toLocal(global_1, undefined, onDownPoint);
area.x = onDownPoint.x;
area.y = onDownPoint.y;
area.size.set(0, 0);
area.update();
diagramCanvas.addChild(area);
DApplications.update(diagram);
// Select mode
this._mode = 1 /* EToolSelectMode.SELECT */;
}
if (this._mode !== 0 /* EToolSelectMode.NONE */) {
var oldApplicationLayer = this._applicationLayer;
if (oldApplicationLayer) {
this._applicationLayer = null;
var oldInteractionManager = oldApplicationLayer.renderer.plugins.interaction;
oldInteractionManager.off(UtilPointerEvent.move, this._onMoveBound);
var onUpBound = this._onUpBound;
oldInteractionManager.off(UtilPointerEvent.up, onUpBound);
oldInteractionManager.off(UtilPointerEvent.upoutside, onUpBound);
oldInteractionManager.off(UtilPointerEvent.cancel, onUpBound);
}
var newApplicationLayer = DApplications.getLayer(diagram);
if (newApplicationLayer) {
this._applicationLayer = newApplicationLayer;
var newInteractionManager = newApplicationLayer.renderer.plugins.interaction;
newInteractionManager.on(UtilPointerEvent.move, this._onMoveBound);
var onUpBound = this._onUpBound;
newInteractionManager.on(UtilPointerEvent.up, onUpBound);
newInteractionManager.on(UtilPointerEvent.upoutside, onUpBound);
newInteractionManager.on(UtilPointerEvent.cancel, onUpBound);
}
}
}
};
EToolSelect.prototype.onMove = function (e) {
var originalEvent = e.data.originalEvent;
if (originalEvent.altKey) {
return;
}
var diagram = this._diagram;
var diagramCanvas = diagram.canvas;
var diagramLayer = diagram.layer;
var mode = this._mode;
var applicationLayer = this._applicationLayer;
if (diagramCanvas && diagramLayer && mode !== 0 /* EToolSelectMode.NONE */ && applicationLayer) {
var global_2 = e.data.global;
applicationLayer.lock();
var onDownPoint = this._onDownPoint;
if (mode === 1 /* EToolSelectMode.SELECT */) {
var area = this._area;
var onMovePoint = diagramCanvas.toLocal(global_2, undefined, this._onMovePoint);
area.x = Math.min(onDownPoint.x, onMovePoint.x);
area.y = Math.min(onDownPoint.y, onMovePoint.y);
area.size.set(Math.max(onDownPoint.x, onMovePoint.x) - area.x, Math.max(onDownPoint.y, onMovePoint.y) - area.y);
area.update();
}
else {
var dx = global_2.x - onDownPoint.x;
var dy = global_2.y - onDownPoint.y;
if (1 <= Math.abs(dx) || 1 <= Math.abs(dy)) {
var isFirstMove = this._isFirstMove;
this._isFirstMove = false;
this._childSelectChild = null;
var selection = this._selection;
selection.modifier.disallow();
switch (mode) {
case 2 /* EToolSelectMode.TRANSLATE */:
if (isFirstMove) {
selection.saveForTranslate();
}
selection.translate(dx, dy, true);
break;
case 4 /* EToolSelectMode.ROTATE */:
if (isFirstMove) {
selection.saveForRotate();
}
selection.rotateTo(global_2, true);
break;
case 3 /* EToolSelectMode.SCALE */:
if (isFirstMove) {
selection.saveForScale();
}
var keepRatio = originalEvent.shiftKey;
selection.scale(dx, dy, keepRatio, true);
break;
}
}
}
applicationLayer.unlock();
applicationLayer.update();
}
};
EToolSelect.prototype.hitTest = function (global, modifier, diagramLayer) {
// Modifier
if (this._isTransformationAllowed && modifier.visible) {
var applicationLayer = DApplications.getLayer(diagramLayer);
if (applicationLayer) {
var interactionManager = applicationLayer.renderer.plugins.interaction;
var modifierHit = UtilHitTest.execute(global, modifier, interactionManager);
if (modifierHit != null) {
return modifierHit;
}
}
}
// Layer
if (diagramLayer.visible) {
return UtilHitTest.execute(global, diagramLayer);
}
// Found nothing
return null;
};
EToolSelect.prototype.onSelectEnd = function (canvas, diagramLayer, isAddMode) {
var area = this._area;
var selection = this._selection;
var commandController = DControllers.getCommandController();
if (0 < area.size.x && 0 < area.size.y) {
var areaRect = area.getBounds(false, this._areaRect);
var foundShapes = [];
UtilShapeAreaSelect.findShapes(diagramLayer, areaRect, foundShapes);
if (isAddMode) {
if (0 < foundShapes.length) {
var before = selection.store();
if (selection.addAll(foundShapes)) {
var after = selection.store();
commandController.push(new ECommandShapeSelect(before, after, selection));
}
}
}
else {
if (0 < foundShapes.length || !selection.isEmpty()) {
var before = selection.store();
if (selection.clearAndAddAll(foundShapes)) {
var after = selection.store();
commandController.push(new ECommandShapeSelect(before, after, selection));
}
}
}
}
else if (!isAddMode) {
if (!selection.isEmpty()) {
var before = selection.store();
if (selection.clear()) {
var after = selection.store();
commandController.push(new ECommandShapeSelect(before, after, selection));
}
}
}
canvas.removeChild(area);
DApplications.update(diagramLayer);
};
EToolSelect.prototype.onUp = function (e) {
var diagram = this._diagram;
var diagramCanvas = diagram.canvas;
var diagramLayer = diagram.layer;
var mode = this._mode;
var applicationLayer = this._applicationLayer;
if (applicationLayer) {
this._applicationLayer = null;
var interactionManager = applicationLayer.renderer.plugins.interaction;
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);
}
if (diagramCanvas && diagramLayer && mode !== 0 /* EToolSelectMode.NONE */) {
this._mode = 0 /* EToolSelectMode.NONE */;
if (mode === 1 /* EToolSelectMode.SELECT */) {
var originalEvent = e.data.originalEvent;
var isAddMode = originalEvent.ctrlKey || originalEvent.shiftKey;
this.onSelectEnd(diagramCanvas, diagramLayer, isAddMode);
}
else {
var selection = this._selection;
// Finalize
selection.finalize();
// Select the child
var childSelectChild = this._childSelectChild;
if (childSelectChild != null) {
this._childSelectChild = null;
var elapsedTime = Date.now() - this._childSelectTime;
if (elapsedTime < 333) {
var before = selection.store();
if (selection.set(childSelectChild)) {
var after = selection.store();
DControllers.getCommandController().push(new ECommandShapeSelect(before, after, selection));
}
}
}
//
selection.modifier.allow();
selection.updateModifier();
if (applicationLayer) {
applicationLayer.update();
}
}
}
};
EToolSelect.prototype.getRotateAmount = function (e) {
return (Math.PI * (e.ctrlKey ? 1 : 15)) / 180;
};
EToolSelect.prototype.getScaleAmount = function (e) {
return e.ctrlKey ? 1 : 10;
};
EToolSelect.prototype.getTranslateAmount = function (e) {
return e.ctrlKey ? 1 : 10;
};
EToolSelect.prototype.onKeydown = function (e) {
var selection = this._selection;
if (!selection.isEmpty()) {
if (this._isTransformationAllowed) {
if (UtilKeyboardEvent.isArrowUpKey(e)) {
if (e.shiftKey) {
if (selection.prepareScale(ESnapperModifierAnchor.NONE)) {
selection.saveForScale();
selection.scale(0, this.getScaleAmount(e), false, false);
selection.finalize();
}
}
else {
if (selection.prepareTranslate()) {
selection.saveForTranslate();
selection.translate(0, -this.getTranslateAmount(e), false);
selection.finalize();
}
}
e.preventDefault();
}
else if (UtilKeyboardEvent.isArrowRightKey(e)) {
if (e.altKey) {
if (selection.prepareRotate()) {
selection.saveForRotate();
selection.rotate(this.getRotateAmount(e));
selection.finalize();
}
}
else if (e.shiftKey) {
if (selection.prepareScale(ESnapperModifierAnchor.NONE)) {
selection.saveForScale();
selection.scale(this.getScaleAmount(e), 0, false, false);
selection.finalize();
}
}
else {
if (selection.prepareTranslate()) {
selection.saveForTranslate();
selection.translate(this.getTranslateAmount(e), 0, false);
selection.finalize();
}
}
e.preventDefault();
}
else if (UtilKeyboardEvent.isArrowDownKey(e)) {
if (e.shiftKey) {
if (selection.prepareScale(ESnapperModifierAnchor.NONE)) {
selection.saveForScale();
selection.scale(0, -this.getScaleAmount(e), false, false);
selection.finalize();
}
}
else {
if (selection.prepareTranslate()) {
selection.saveForTranslate();
selection.translate(0, this.getTranslateAmount(e), false);
selection.finalize();
}
}
e.preventDefault();
}
else if (UtilKeyboardEvent.isArrowLeftKey(e)) {
if (e.altKey) {
if (selection.prepareRotate()) {
selection.saveForRotate();
selection.rotate(-this.getRotateAmount(e));
selection.finalize();
}
}
else if (e.shiftKey) {
if (selection.prepareScale(ESnapperModifierAnchor.NONE)) {
selection.saveForScale();
selection.scale(-this.getScaleAmount(e), 0, false, false);
selection.finalize();
}
}
else {
if (selection.prepareTranslate()) {
selection.saveForTranslate();
selection.translate(-this.getTranslateAmount(e), 0, false);
selection.finalize();
}
}
e.preventDefault();
}
}
if (this._isDeletionAllowed) {
if (UtilKeyboardEvent.isDeleteKey(e)) {
selection.delete();
e.preventDefault();
}
}
}
if (UtilKeyboardEvent.isSelectAllKey(e)) {
var first = selection.first();
var parent_1 = first == null ? this._diagram.layer : first.parent;
if (parent_1 != null) {
var children = parent_1.children;
if (0 < children.length) {
var before = selection.store();
if (e.altKey) {
var types = new Set();
for (var i = 0, imax = before.length; i < imax; ++i) {
types.add(before[i].type);
}
var after = [];
for (var i = 0, imax = children.length; i < imax; ++i) {
var child = children[i];
if (child.selected) {
after.push(child);
}
else if (types.has(child.type)) {
after.push(child);
}
}
if (selection.clearAndAddAll(after)) {
DControllers.getCommandController().push(new ECommandShapeSelect(before, after, selection));
}
}
else {
if (selection.clearAndAddAll(children)) {
var after = selection.store();
DControllers.getCommandController().push(new ECommandShapeSelect(before, after, selection));
}
}
}
}
}
};
EToolSelect.prototype.onKeyup = function (e) {
// DO NOTHING
};
EToolSelect.prototype.onDblClick = function (e) {
var selection = this._selection;
var last = selection.last();
if (last != null) {
this.emit("edit", last, this);
}
};
return EToolSelect;
}(EToolImpl));
export { EToolSelect };
//# sourceMappingURL=e-tool-select.js.map