@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
284 lines • 15.7 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { getStringEnumValue } from "@aurigma/design-atoms-model/Utils/Utils";
import { ArgumentException } from "@aurigma/design-atoms-model/Exception";
import { BaseRectangleItemHandler, NewBaseTextItemHandler } from "../../ItemHandlers";
import { EqualsOfFloatNumbers, RotatedRectangleF } from "@aurigma/design-atoms-model/Math";
import { FloatingToolbarElementHandler, UpdatePositionMode } from "./FloatingToolbarElementHandler";
import { isPlaceholder, isImageOrPlaceholder, isGroup } from "../../ItemHandlers/HandlerUtils";
import * as _ from "underscore";
var FloatingToolbarManager = /** @class */ (function () {
function FloatingToolbarManager(_canvasElementHandler, _viewer, _canvas, _selectionHandler, config) {
var _this = this;
this._canvasElementHandler = _canvasElementHandler;
this._viewer = _viewer;
this._canvas = _canvas;
this._selectionHandler = _selectionHandler;
this._dndIsInProgress = false;
this._isInEditMode = false;
this._handleId = "Handle";
this._selectId = "Select";
this._editId = "Edit";
this._deleteId = "Delete";
this._onItemHandlerHover = function (handlers) {
if (_this._config.mode !== FloatingToolbarMode.Inside)
return;
var firstImageOrPlaceholderItemHandler = handlers === null || handlers === void 0 ? void 0 : handlers.find(function (h) { return isImageOrPlaceholder(h); });
if (firstImageOrPlaceholderItemHandler == null) {
if (_this._currentHandlerItem != _this._selectedHandler)
_this._setCurrentItemHandler(_this._selectedHandler);
}
if (_this._getPositionMode(firstImageOrPlaceholderItemHandler) === UpdatePositionMode.Center) {
var oldCurrentHandler = _this._currentHandlerItem;
var visible = _this._floatingToolbarElementHandler.visible;
if (visible)
_this._floatingToolbarElementHandler.changeVisibility(false);
_this._setCurrentItemHandler(firstImageOrPlaceholderItemHandler);
if (!_this._floatingToolbarElementHandler.isElementVisible || _this._floatingToolbarElementHandler.isToolbarLargerThanRectangle(firstImageOrPlaceholderItemHandler.rectangle)) {
_this._setCurrentItemHandler(oldCurrentHandler);
_this._floatingToolbarElementHandler.changeVisibility(visible);
}
else {
_this._updateView();
}
}
};
this._onSelectButtonClick = function () {
_this._eventManager.selectToolbarButtonClickEvent.notify(_this._currentHandlerItem.item);
};
this._onHandleButtonClick = function () {
_this._eventManager.handleToolbarButtonClickEvent.notify(_this._currentHandlerItem.item);
};
this._onEditButtonClick = function () {
_this._eventManager.editToolbarButtonClickEvent.notify(_this._currentHandlerItem.item);
};
this._onDeleteButtonClick = function () {
_this._eventManager.deleteToolbarButtonClickEvent.notify(_this._currentHandlerItem.item);
};
this._setCurrentItemHandler = function (itemHandler) {
if (_this._currentHandlerItem == itemHandler)
return;
if (_this._currentHandlerItem instanceof NewBaseTextItemHandler) {
_this._currentHandlerItem.exitedEditModeEvent.remove(_this._currentItemHandlerExitedEditMode);
_this._currentHandlerItem.enteredEditModeEvent.remove(_this._currentItemHandlerEnteredEditMode);
}
_this._currentHandlerItem = itemHandler;
_this._isInEditMode = false;
if (_this._currentHandlerItem instanceof NewBaseTextItemHandler) {
_this._currentHandlerItem.exitedEditModeEvent.add(_this._currentItemHandlerExitedEditMode);
_this._currentHandlerItem.enteredEditModeEvent.add(_this._currentItemHandlerEnteredEditMode);
}
if (itemHandler == null)
return _this._floatingToolbarElementHandler.changeVisibility(false);
_this._fullUpdate();
};
this._currentItemHandlerExitedEditMode = function () {
_this._isInEditMode = false;
_this._fullUpdate();
};
this._currentItemHandlerEnteredEditMode = function () {
_this._isInEditMode = true;
_this._fullUpdate();
};
this._updateButtonsVisibility = function () {
if (_this._currentHandlerItem == null || _this._descriptors == null)
return;
var perms = _this._getCurrentPermissions();
_this._floatingToolbarElementHandler.changeButtonsVisibility([
{ id: _this._deleteId, visible: perms.delete },
{ id: _this._editId, visible: perms.edit },
{ id: _this._selectId, visible: perms.select },
{ id: _this._handleId, visible: perms.handle },
].filter(function (param) { return _this._descriptors.has(param.id); }));
};
this._getCurrentPermissions = function () {
if (_this._currentHandlerItem == null)
return null;
var handler = _this._currentHandlerItem;
return {
delete: handler.showDeleteToolbarButton() && !_this._canvas.simpleMode,
edit: handler.showEditToolbarButton(),
select: (isImageOrPlaceholder(handler) || isGroup(handler)) && handler.showSelectToolbarButton(),
handle: handler.showHandleToolbarButton()
};
};
this._onItemPropertyChanged = function (sender, propName) {
var _a;
if (((_a = _this._currentHandlerItem) === null || _a === void 0 ? void 0 : _a.item) != sender)
return;
if (propName === "transform" || propName === "content" || propName === "source" || propName === "permissions") {
_this._fullUpdate();
}
};
this._fullUpdate = function () {
_this._updateButtonsVisibility();
_this._updateView();
};
this._onSelectedItemChanged = function () {
var handlers = _this._selectionHandler.selectedItemHandlers.ofType(BaseRectangleItemHandler);
var current = handlers.count() == 1 ? handlers.first() : null;
_this._setCurrentItemHandler(current);
_this._selectedHandler = current;
};
this._updateView = function () {
if (!_this._isShowFloatingItemToolbar) {
return _this._floatingToolbarElementHandler.changeVisibility(false);
}
if (_this._isInEditMode)
return _this._floatingToolbarElementHandler.changeVisibility(false);
var visibility = _this._floatingToolbarElementHandler.changeVisibility(true);
if (visibility)
_this._updatePosition();
};
this._updatePosition = function () {
var _a;
var visibleRect = (_a = _this._currentHandlerItem) === null || _a === void 0 ? void 0 : _a.rectangle;
if (visibleRect == null)
return;
var rect = RotatedRectangleF.getRectWithOffset(visibleRect, _this._canvas.offset);
_this._floatingToolbarElementHandler.updatePosition(rect, _this._getPositionMode(_this._currentHandlerItem));
};
this._onDndStarted = function () {
_this._dndIsInProgress = true;
_this._updateView();
};
this._onDndFinished = function () {
_this._dndIsInProgress = false;
_this._updateView();
};
this.configuration = config;
}
Object.defineProperty(FloatingToolbarManager.prototype, "configuration", {
set: function (conf) {
var _a, _b, _c;
(_a = this._floatingToolbarElementHandler) === null || _a === void 0 ? void 0 : _a.dispose();
this._config = __assign(__assign({}, this._defaultConfig), (conf || {}));
var mode = getStringEnumValue(FloatingToolbarMode, this._config.mode);
if (mode == null)
throw new ArgumentException("Canvas.ts: cannot parse FloatingToolbarMode: " + mode);
this._config.mode = mode;
var allowedButtons = [this._handleId, this._selectId, this._editId, this._deleteId];
var buttons = _.uniq((_c = (_b = this._config.buttons) === null || _b === void 0 ? void 0 : _b.map(function (b) { return allowedButtons.find(function (ab) { return ab.toLowerCase() === b.toLowerCase(); }); })) === null || _c === void 0 ? void 0 : _c.filter(function (b) { return b != null; }));
if (buttons.length === 0)
return;
var descriptions = [
[this._handleId, { cssClass: this._config.handleButtonClass, defaultText: this._handleId, handler: this._onHandleButtonClick, visible: true }],
[this._selectId, { cssClass: this._config.selectButtonClass, defaultText: this._selectId, handler: this._onSelectButtonClick, visible: true }],
[this._editId, { cssClass: this._config.editButtonClass, defaultText: this._editId, handler: this._onEditButtonClick, visible: true }],
[this._deleteId, { cssClass: this._config.deleteButtonClass, defaultText: this._deleteId, handler: this._onDeleteButtonClick, visible: true }],
];
var targetDescriptions = buttons.map(function (b) { return descriptions.find(function (d) { return d[0] === b; }); });
this._descriptors = new Map(targetDescriptions);
this._floatingToolbarElementHandler = new FloatingToolbarElementHandler(this._canvasElementHandler, this._viewer, this._config.cssClass, this._config.bigButtonCssClass);
this._floatingToolbarElementHandler.init(this._descriptors);
},
enumerable: true,
configurable: true
});
Object.defineProperty(FloatingToolbarManager.prototype, "eventManager", {
// TODO: there is no time to make it good now.
// Unfortunately, we have a terrible init process.
// In this case canvas must have his own eventManager and Viewer Event Manager must be as proxy, I think.
set: function (eventManager) {
this._eventManager = eventManager;
this._eventManager.addSelectedItemChanged(this._onSelectedItemChanged);
this._eventManager.addItemChanging(this._updateView);
this._eventManager.addIsEditingChanged(this._fullUpdate);
this._eventManager.addItemPropertyChanged(this._onItemPropertyChanged);
this._canvas.add_zoomChanged(this._updatePosition);
this._eventManager.addItemHandlerHover(this._onItemHandlerHover);
this._eventManager.addDndStarted(this._onDndStarted);
this._eventManager.addDndFinished(this._onDndFinished);
},
enumerable: true,
configurable: true
});
FloatingToolbarManager.prototype._getPositionMode = function (handler) {
var angle = handler === null || handler === void 0 ? void 0 : handler.rectangle.angle;
return (this._config.mode === FloatingToolbarMode.Inside &&
isImageOrPlaceholder(handler) &&
(EqualsOfFloatNumbers(angle % 90, 0) || EqualsOfFloatNumbers(angle, 360))) ?
UpdatePositionMode.Center :
UpdatePositionMode.Smart;
};
Object.defineProperty(FloatingToolbarManager.prototype, "_defaultConfig", {
get: function () {
return {
enabled: true,
mode: FloatingToolbarMode.Classic,
buttons: [this._selectId, this._editId, this._deleteId]
};
},
enumerable: true,
configurable: true
});
Object.defineProperty(FloatingToolbarManager.prototype, "enabled", {
get: function () {
return this._config.enabled;
},
set: function (v) {
if (v === this._config.enabled)
return;
this._config.enabled = v;
this._floatingToolbarElementHandler.changeVisibility(v);
},
enumerable: true,
configurable: true
});
Object.defineProperty(FloatingToolbarManager.prototype, "_isShowFloatingItemToolbar", {
get: function () {
if (this._dndIsInProgress)
return false;
var handler = this._currentHandlerItem;
if (handler == null ||
!this._config.enabled ||
!this._canvas.viewer.inputHandlerManager.isDefault ||
!handler.isVisible() ||
handler.isLocked())
return false;
var isModifyHandlerOperation = this._selectionHandler.isDragging || this._selectionHandler.isResizing || this._selectionHandler.isRotating;
if (isModifyHandlerOperation)
return false;
if (this._canvas.contentEditingPlaceholderItemHandler != null)
return false;
return !(this._canvas.autoPlaceholderEditModeEnabled && isPlaceholder(handler));
},
enumerable: true,
configurable: true
});
FloatingToolbarManager.prototype.dispose = function () {
var _a, _b, _c, _d, _e, _f;
(_a = this._floatingToolbarElementHandler) === null || _a === void 0 ? void 0 : _a.dispose();
(_b = this._eventManager) === null || _b === void 0 ? void 0 : _b.removeSelectedItemChanged(this._onSelectedItemChanged);
(_c = this._eventManager) === null || _c === void 0 ? void 0 : _c.removeItemChanging(this._updateView);
(_d = this._eventManager) === null || _d === void 0 ? void 0 : _d.removeIsEditingChanged(this._fullUpdate);
(_e = this._eventManager) === null || _e === void 0 ? void 0 : _e.removeItemPropertyChanged(this._onItemPropertyChanged);
this._canvas.remove_zoomChanged(this._updatePosition);
(_f = this._eventManager) === null || _f === void 0 ? void 0 : _f.removeItemHandlerHover(this._onItemHandlerHover);
this._eventManager.removeDndStarted(this._onDndStarted);
this._eventManager.removeDndFinished(this._onDndFinished);
};
return FloatingToolbarManager;
}());
export { FloatingToolbarManager };
/**
* Floating Toolbar modes.
* @public
*/
export var FloatingToolbarMode;
(function (FloatingToolbarMode) {
/** Displays the toolbar on the canvas regardless of user hover. */
FloatingToolbarMode["Classic"] = "Classic";
/** Displays the toolbar on top of images and image placeholders when the user hovers over the item. */
FloatingToolbarMode["Inside"] = "Inside";
})(FloatingToolbarMode || (FloatingToolbarMode = {}));
//# sourceMappingURL=FloatingToolbarManager.js.map