@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
163 lines • 7.35 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";
export class RotateHandler {
constructor(canvas, viewer) {
this.rotateDiv = null;
this._canvas = canvas;
this._viewer = viewer;
this._rotationStyle = null;
}
addRotationStyle() {
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 =
`
#rotate-circle svg {
position: absolute;
width: 16px;
height: 16px;
top: 3px;
left: 3px;
}
#degree {
position: absolute;
border-radius: 5px;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
font-size: 12px;
line-height: 14px;
height: 22px;
width: 45px;
transition: 0.3s opacity;
}
`;
document.head.appendChild(this._rotationStyle);
}
addRotateDiv(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);
}
removeRotateDiv() {
if (this.rotateDiv == null)
return;
removePointerEventsStopPropagation(this.rotateDiv);
this.rotateDiv.remove();
this.rotateDiv = null;
}
updateRotatePositionDiv(top, left) {
if (this.rotateDiv == null)
return;
this.rotateDiv.style.top = `${top}px`;
this.rotateDiv.style.left = `${left}px`;
}
updateRotateDegreeDiv(angle) {
if (this.rotateDiv == null)
return;
this.rotateDiv.innerHTML = `${Math.round(angle) % 360}°`;
}
calculatePositionRotateDiv(contentAngle, offsetLeft, offsetTop, pt, contentWidth, contentHeight) {
let marginFromCursor = 20;
let 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);
}
static getRotatedPointFromSize(point, size, angle) {
const 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;
}
updateView(selectedHandler, pt, state, angle) {
var currentPlaceholderItem = selectedHandler != null && isPlaceholder(selectedHandler) ? selectedHandler : null;
let shownSelection = () => {
if (currentPlaceholderItem != null) {
if (currentPlaceholderItem.handleButton != null)
CanvasElementHandler.showElement(currentPlaceholderItem.handleButton);
if (currentPlaceholderItem.selectButton != null)
CanvasElementHandler.showElement(currentPlaceholderItem.selectButton);
}
this.removeRotateDiv();
};
const viewerElement = this._viewer.element;
const positionDiv = CoordinatesConvertUtils.workspaceToWhiteSpacePointCorrect(pt, this._viewer);
positionDiv.translate(30, 15);
let scrollTop = viewerElement.scrollTop;
let scrollLeft = viewerElement.scrollLeft;
let isScrollLeft = ((viewerElement.scrollWidth > viewerElement.clientWidth) && scrollLeft == 0) || scrollLeft > 0;
let isScrollTop = ((viewerElement.scrollHeight > viewerElement.clientHeight) && scrollTop == 0) || scrollTop > 0;
const scrollSize = Environment.IsTouchDevice() ? 0 : 17; // px
let offsetBottom = 35 + (isScrollLeft ? scrollSize : 0); // px
let offsetRight = 58 + (isScrollTop ? scrollSize : 0); // px
let stopLineBottom = this._viewer.height - offsetBottom + scrollTop;
let 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();
}
}
//# sourceMappingURL=RotateHandler.js.map