@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
219 lines • 11.2 kB
JavaScript
import { PointF, RectangleF } from "@aurigma/design-atoms-model/Math";
export class CoordinatesConvertUtils {
static workspaceToContentPoint(point, context) {
return CoordinatesConvertUtils.controlToContentPoint(CoordinatesConvertUtils.workspaceToControlPoint(point, context), context);
}
static controlToContentPoint(point, context) {
const viewportLocation = context.getViewportLocation();
const sp = context.getActualScrollPosition();
let pt = new PointF(0, 0);
const x = point.x;
const y = point.y;
pt.x = x - viewportLocation.x + sp.x;
pt.y = y - viewportLocation.y + sp.y;
return pt.round();
}
static controlToPagePoint(point, viewerElement) {
const pageCoords = this.getElementPageCoord(viewerElement);
const x = point.x;
const y = point.y;
const pageX = x + pageCoords.left;
const pageY = y + pageCoords.top;
return new PointF(Math.round(pageX), Math.round(pageY));
}
static contentToControlPoint(point, context) {
const vl = context.getViewportLocation();
const sp = context.getActualScrollPosition();
let pt = new PointF(0, 0);
pt.x = point.x + vl.x - sp.x;
pt.y = point.y + vl.y - sp.y;
return pt.round();
}
static controlToContentRectangle(rect, context) {
let pt1 = new PointF(rect.left, rect.top);
let pt2 = new PointF(rect.left + rect.width, rect.top + rect.height);
pt1 = CoordinatesConvertUtils.controlToContentPoint(pt1, context);
pt2 = CoordinatesConvertUtils.controlToContentPoint(pt2, context);
return new RectangleF(pt1.x, pt1.y, pt2.x - pt1.x, pt2.y - pt1.y);
}
static contentToControlRectangle(rect, context) {
let pt1 = new PointF(rect.left, rect.top);
let pt2 = new PointF(rect.left + rect.width, rect.top + rect.height);
pt1 = CoordinatesConvertUtils.contentToControlPoint(pt1, context);
pt2 = CoordinatesConvertUtils.contentToControlPoint(pt2, context);
return new RectangleF(pt1.x, pt1.y, pt2.x - pt1.x, pt2.y - pt1.y);
}
static workspaceToControlPoint(point, context) {
const z = context.zoom;
const x = point.x;
const y = point.y;
const pt = new PointF(Math.round(x * z * context.screenXDpi / 72), Math.round(y * z * context.screenYDpi / 72));
return CoordinatesConvertUtils.contentToControlPoint(pt, context).round();
}
static productToControlPoint(point, context, offset) {
const wkPoint = this.productToWorkspace(point, offset);
return this.workspaceToControlPoint(wkPoint, context);
}
static workspaceToWhiteSpacePoint(point, context) {
const result = CoordinatesConvertUtils.workspaceToContentPoint(point, context);
const rulerWidth = context.rulerEnabled ? context.rulerWidth : 0;
const viewportLocation = context.getViewportLocation();
return new PointF(result.x - rulerWidth + viewportLocation.x, result.y - rulerWidth + viewportLocation.y);
}
static workspaceToWhiteSpacePointCorrect(point, context) {
const ws = this._transformByContentAngleWsToPage(point, context);
const result = CoordinatesConvertUtils.workspaceToWhiteSpacePoint(ws, context);
return result;
}
static whitespaceToWorkspacePoint(point, context) {
const rulerWidth = context.rulerEnabled ? context.rulerWidth : 0;
const viewportLocation = context.getViewportLocation();
return CoordinatesConvertUtils.controlToWorkspacePoint(this.contentToControlPoint(new PointF(point.x - viewportLocation.x + rulerWidth, point.y - viewportLocation.y + rulerWidth), context), context);
}
// ?
static whitespaceToWorkspacePointCorrect(point, context) {
const rulerWidth = context.rulerEnabled ? context.rulerWidth : 0;
const viewportLocation = context.getViewportLocation();
let pt = CoordinatesConvertUtils.controlToWorkspacePoint(this.contentToControlPoint(new PointF(point.x - viewportLocation.x + rulerWidth, point.y - viewportLocation.y + rulerWidth), context), context);
pt = this._transformByContentAnglePageToWs(pt, context);
return pt;
}
/**
* Translates coordinates from the control-related coordinate system to the workspace-related one
* @param point Coordinates in the control coordinate system
* @returns Coordinates in the workspace coordinate system
*/
static controlToWorkspacePoint(point, context) {
const zoom = context.zoom;
const contentPoint = CoordinatesConvertUtils.controlToContentPoint(point, context);
return new PointF(contentPoint.x / (zoom * context.screenXDpi / 72), contentPoint.y / (zoom * context.screenYDpi / 72));
}
/**
* Translates coordinates from the control-related coordinate system to the workspace-related one.
* @param point - Coordinates in the control coordinate system (PointF).
* @returns Coordinates in the workspace coordinate system (PointF).
*/
static controlToWorkspacePointCorrect(point, context) {
const z = context.zoom;
let pt = CoordinatesConvertUtils.controlToContentPoint(point, context);
pt = new PointF(pt.x / (z * context.screenXDpi / 72), pt.y / (z * context.screenYDpi / 72));
pt = this._transformByContentAnglePageToWs(pt, context);
return pt;
}
static workspaceToControlRectangle(rect, context) {
const z = context.zoom;
const hs = context.screenXDpi / 72 * z;
const vs = context.screenYDpi / 72 * z;
const newRect = new RectangleF(Math.round(rect.left * hs), Math.round(rect.top * vs), Math.round(rect.width * hs), Math.round(rect.height * vs));
return CoordinatesConvertUtils.contentToControlRectangle(newRect, context);
}
/**
* Translates coordinates from the page-related coordinate system to the control-related one
* @param pagePoint Coordinates in the page coordinate system.
*/
static pageToControlPoint(pagePoint, viewer) {
const pageCoords = this.getElementPageCoord(viewer.element);
const holderX = pagePoint.x - pageCoords.left;
const holderY = pagePoint.y - pageCoords.top;
return new PointF(Math.round(holderX), Math.round(holderY));
}
/**
* Translates coordinates from the page-related coordinate system to the workspace-related one
* @param pagePoint Coordinates in the page coordinate system
*/
static pageToWorkspacePoint(pagePoint, viewer, dontRotate = false) {
//TODO: get rid of canvas workspace reference
const p = CoordinatesConvertUtils.controlToWorkspacePoint(this.pageToControlPoint(pagePoint, viewer), viewer);
let point = new PointF(p.x, p.y);
if (dontRotate !== true)
point = this._transformByContentAnglePageToWs(point, viewer);
return point;
}
static pageToWhitespace(pagePoint, viewer) {
const workspacePoint = this.pageToWorkspacePoint(pagePoint, viewer, true);
const whitespace = this.workspaceToWhiteSpacePoint(workspacePoint, viewer);
return whitespace;
}
static workspaceToPagePoint(source, viewer) {
const controlPoint = this.workspaceToControlPointCorrect(source, viewer);
return this.controlToPagePoint(controlPoint, viewer.element);
}
static _transformByContentAnglePageToWs(source, context) {
let pagePoint = new PointF(source.x, source.y);
const angle = context.contentAngle;
if (angle > 0) {
pagePoint.rotate(-angle);
if (angle === 90) {
pagePoint.translate(0, context.workspaceHeight);
}
else if (angle === 180) {
pagePoint.translate(context.workspaceWidth, context.workspaceHeight);
}
else if (angle === 270) {
pagePoint.translate(context.workspaceWidth, 0);
}
}
return pagePoint;
}
static _transformByContentAngleWsToPage(source, context) {
let wsPoint = new PointF(source.x, source.y);
const angle = context.contentAngle;
if (angle > 0) {
switch (angle) {
case 0:
break;
case 90:
wsPoint.translate(0, -context.workspaceHeight);
break;
case 180:
wsPoint.translate(-context.workspaceWidth, -context.workspaceHeight);
break;
case 270:
wsPoint.translate(-context.workspaceWidth, 0);
break;
default:
throw new Error(`Unexpected content angle: ${angle}`);
}
wsPoint.rotate(angle);
}
return wsPoint;
}
static workspaceToControlPointCorrect(source, context) {
const wsPoint = this._transformByContentAngleWsToPage(source, context);
const controlPoint = this.workspaceToControlPoint(wsPoint, context);
return controlPoint;
}
/**
* Translates rectangle coordinates from the control-related coordinate system to the workspace-related one.
* @param rect - Rectangle coordinates in the control coordinate system (Rectangle).
* @returns Rectangle coordinates in the workspace coordinate system (Rectangle).
*/
static controlToWorkspaceRectangle(rectangle, context) {
const z = context.zoom;
const hs = 1 / (z * context.screenXDpi / 72);
const vs = 1 / (z * context.screenYDpi / 72);
const newRect = CoordinatesConvertUtils.controlToContentRectangle(rectangle, context);
return new RectangleF(newRect.left * hs, newRect.top * vs, newRect.width * hs, newRect.height * vs);
}
static contentToWhitespaceRectangle(rect, context) {
const rulerWidth = context.rulerEnabled ? context.rulerWidth : 0;
const viewportLocation = context.getViewportLocation();
return new RectangleF(rect.left + viewportLocation.x - rulerWidth, rect.top + viewportLocation.y - rulerWidth, rect.width, rect.height);
}
static workspaceToProduct(workspacePoint, offset) {
if (offset == null || offset.isOrigin())
return workspacePoint.clone();
return new PointF(workspacePoint.x - offset.x, workspacePoint.y - offset.y);
}
static productToWorkspace(product, offset) {
if (offset == null || offset.isOrigin())
return product.clone();
return new PointF(product.x + offset.x, product.y + offset.y);
}
static getElementPageCoord(domElement) {
//TODO for IE pinch zoom need specific calculation?
const offset = domElement.getBoundingClientRect();
return { left: offset.left, top: offset.top };
}
}
//# sourceMappingURL=CoordinatesConvertUtils.js.map