@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
143 lines • 7.75 kB
JavaScript
import { PointF } from "@aurigma/design-atoms-model/Math";
import { isPlaceholder } from "./ItemHandlers/HandlerUtils";
import { CanvasElementHandler } from "./CanvasElementHandler";
import Environment from "@aurigma/design-atoms-model/Utils/Environment";
import { InputState } from "./Input/InputManager/IInputManager";
import { addPointerEventsStopPropagation, removePointerEventsStopPropagation } from "./Utils/Dom";
import { CoordinatesConvertUtils } from "./Utils/CoordinatesConvertUtils";
var RotateHandler = /** @class */ (function () {
function RotateHandler(canvas, viewer) {
this.rotateDiv = null;
this._canvas = canvas;
this._viewer = viewer;
this._rotationStyle = null;
}
RotateHandler.prototype.addRotationStyle = function () {
if (this._viewer == null)
return;
if (this._rotationStyle != null)
this._rotationStyle.remove();
this._rotationStyle = document.createElement("style");
this._rotationStyle.type = "text/css";
this._rotationStyle.innerHTML =
"\n #rotate-circle svg { \n position: absolute; \n width: 16px; \n height: 16px; \n top: 3px; \n left: 3px; \n } \n #degree { \n position: absolute; \n border-radius: 5px; \n background-color: rgba(0, 0, 0, 0.8); \n color: #fff; \n display: flex; \n align-items: center; \n justify-content: center; \n z-index: 2; \n font-size: 12px; \n line-height: 14px; \n height: 22px; \n width: 45px; \n transition: 0.3s opacity; \n }\n ";
document.head.appendChild(this._rotationStyle);
};
RotateHandler.prototype.addRotateDiv = function (top, left) {
if (this._viewer == null || this._viewer.whitespaceDiv == null)
return;
var whitespace = this._viewer.whitespaceDiv;
this.rotateDiv = document.createElement("div");
addPointerEventsStopPropagation(this.rotateDiv);
this.rotateDiv.id = "degree";
whitespace.appendChild(this.rotateDiv);
this.updateRotatePositionDiv(top, left);
};
RotateHandler.prototype.removeRotateDiv = function () {
if (this.rotateDiv == null)
return;
removePointerEventsStopPropagation(this.rotateDiv);
this.rotateDiv.remove();
this.rotateDiv = null;
};
RotateHandler.prototype.updateRotatePositionDiv = function (top, left) {
if (this.rotateDiv == null)
return;
this.rotateDiv.style.top = top + "px";
this.rotateDiv.style.left = left + "px";
};
RotateHandler.prototype.updateRotateDegreeDiv = function (angle) {
if (this.rotateDiv == null)
return;
this.rotateDiv.innerHTML = Math.round(angle) % 360 + "°";
};
RotateHandler.prototype.calculatePositionRotateDiv = function (contentAngle, offsetLeft, offsetTop, pt, contentWidth, contentHeight) {
var marginFromCursor = 20;
var mul = this._canvas.mul;
switch (contentAngle) {
case 0:
var left = pt.x * mul + offsetLeft + marginFromCursor;
var top = pt.y * mul + offsetTop + marginFromCursor;
break;
case 90:
var left = contentHeight - (pt.y * mul) + offsetLeft + marginFromCursor;
var top = pt.x * mul + offsetTop + marginFromCursor;
break;
case 180:
var left = contentWidth - (pt.x * mul) + offsetLeft + marginFromCursor;
var top = contentHeight - (pt.y * mul) + offsetTop + marginFromCursor;
break;
case 270:
var left = (pt.y * mul) + offsetLeft + marginFromCursor;
var top = contentWidth - (pt.x * mul) + offsetTop + marginFromCursor;
break;
}
return new PointF(left, top);
};
RotateHandler.getRotatedPointFromSize = function (point, size, angle) {
var result = point.clone();
result.rotateAt(angle, new PointF());
if (angle === 90)
result.translate(size.height, 0);
else if (angle === 180)
result.translate(size.width, size.height);
else if (angle === 270)
result.translate(0, size.width);
return result;
};
RotateHandler.prototype.updateView = function (selectedHandler, pt, state, angle) {
var _this = this;
var currentPlaceholderItem = selectedHandler != null && isPlaceholder(selectedHandler) ? selectedHandler : null;
var shownSelection = function () {
if (currentPlaceholderItem != null) {
if (currentPlaceholderItem.handleButton != null)
CanvasElementHandler.showElement(currentPlaceholderItem.handleButton);
if (currentPlaceholderItem.selectButton != null)
CanvasElementHandler.showElement(currentPlaceholderItem.selectButton);
}
_this.removeRotateDiv();
};
var viewerElement = this._viewer.element;
var positionDiv = CoordinatesConvertUtils.workspaceToWhiteSpacePointCorrect(pt, this._viewer);
positionDiv.translate(30, 15);
var scrollTop = viewerElement.scrollTop;
var scrollLeft = viewerElement.scrollLeft;
var isScrollLeft = ((viewerElement.scrollWidth > viewerElement.clientWidth) && scrollLeft == 0) || scrollLeft > 0;
var isScrollTop = ((viewerElement.scrollHeight > viewerElement.clientHeight) && scrollTop == 0) || scrollTop > 0;
var scrollSize = Environment.IsTouchDevice() ? 0 : 17; // px
var offsetBottom = 35 + (isScrollLeft ? scrollSize : 0); // px
var offsetRight = 58 + (isScrollTop ? scrollSize : 0); // px
var stopLineBottom = this._viewer.height - offsetBottom + scrollTop;
var stopLineRight = this._viewer.width - offsetRight + scrollLeft;
if (positionDiv.y > stopLineBottom)
positionDiv.y = stopLineBottom;
else if (positionDiv.y < scrollTop)
positionDiv.y = scrollTop;
if (positionDiv.x > stopLineRight)
positionDiv.x = stopLineRight;
else if (positionDiv.x < scrollLeft)
positionDiv.x = scrollLeft;
if (state !== InputState.Finished) {
if (currentPlaceholderItem != null) {
if (currentPlaceholderItem.handleButton != null)
CanvasElementHandler.hideElement(currentPlaceholderItem.handleButton);
if (currentPlaceholderItem.selectButton != null)
CanvasElementHandler.hideElement(currentPlaceholderItem.selectButton);
}
if (this.rotateDiv == null)
this.addRotateDiv(positionDiv.y, positionDiv.x);
else
this.updateRotatePositionDiv(positionDiv.y, positionDiv.x);
this.updateRotateDegreeDiv(angle);
}
else {
shownSelection();
}
if (state === InputState.Finished)
shownSelection();
this._canvas.updatePlaceholderButtonGroups();
};
return RotateHandler;
}());
export { RotateHandler };
//# sourceMappingURL=RotateHandler.js.map