@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
182 lines • 9.86 kB
JavaScript
import { EqualsOfFloatNumbers, Transform, PointF, ConvertDegreeToRadian } from "@aurigma/design-atoms-model/Math";
import { CanvasElementHandler } from "../CanvasElementHandler";
import { TextRenderer } from "./TextRenderer";
import Environment from "@aurigma/design-atoms-model/Utils/Environment";
import { toTextWhizzPath } from "@aurigma/design-atoms-text/Utils/PathUtils";
import { TextWhizzWrapper } from "@aurigma/design-atoms-text/TextEditor";
import { Size } from "@aurigma/design-atoms-model";
export class WebGLTextRenderer extends TextRenderer {
constructor(staticCanvas, activeCanvas, textWhizz, zoom, offset, viewportHandler, selectionStyle, rgbColorParser, canvasElementHandler) {
super(staticCanvas, activeCanvas, textWhizz, zoom, offset, viewportHandler, selectionStyle, rgbColorParser, canvasElementHandler);
this._currentCanvas = null;
this._needWorkaroundForIOs = false;
this._needWorkaroundForIOs = Environment.IsIos();
this._setCurrentCanvas(this._staticCanvas);
}
drawText(handler, transform, center, previewScale, opacity, clippingPath) {
const matrix = this._getTextTransform(transform, center.clone(), previewScale);
try {
this._activeCanvas.style.opacity = (opacity !== null && opacity !== void 0 ? opacity : 1).toString();
this._setCurrentCanvas(this._activeCanvas);
this._textWhizz.clearContext();
this._textWhizz.setContextTransform(matrix);
const fullClippingPath = this._getFullClippingPath(transform, previewScale, clippingPath, center);
if (fullClippingPath)
this._textWhizz.setClippingPaths(fullClippingPath);
else
this._textWhizz.clearClippingPaths();
this._textWhizz.addTextToContext(handler);
}
catch (e) {
throw TextWhizzWrapper.createException(this._textWhizz, e);
}
}
transformText(handler, transform, center, previewScale, opacity, clippingPath) {
if (this._currentCanvas != this._activeCanvas) {
this.drawText(handler, transform, center, previewScale, opacity, clippingPath);
return;
}
const matrix = this._getTextTransform(transform, center, previewScale);
this._textWhizz.setContextTransform(matrix);
}
clearText() {
this._setCurrentCanvas(this._activeCanvas);
this._textWhizz.clearContext();
}
drawSelection(handler, selection, transform, center, previewScale) {
if (this._currentCanvas != this._activeCanvas)
return;
try {
let clippingPath = this._getFullClippingPath(transform, previewScale, null, center.clone());
this._textWhizz.setClippingPaths(clippingPath);
if (this._isSelectionEmpty(selection))
return;
this._textWhizz.clearContext();
const rectangles = selection.getArea();
let leftSelectionPosition = selection.getStart();
let rightSelectionPosition = selection.getEnd();
if ((selection.getStart().getLineIndex() > selection.getEnd().getLineIndex()) ||
(selection.getStart().getLineIndex() == selection.getEnd().getLineIndex() && selection.getStart().getOffset() > selection.getEnd().getOffset())) {
rightSelectionPosition = selection.getStart();
leftSelectionPosition = selection.getEnd();
}
let selectionBgColor = this._colorToTextWhizz(this._rgbColorParser.parse(this._selectionStyle.color));
this._textWhizz.addShapeToContext(rectangles, selectionBgColor);
let preTextRange = new this._textWhizz.TextRange(handler.getFirstPosition(), leftSelectionPosition);
this._textWhizz.addTextRangeToContext(handler, preTextRange);
let postTextRange = new this._textWhizz.TextRange(rightSelectionPosition, handler.getLastPosition());
this._textWhizz.addTextRangeToContext(handler, postTextRange);
let selectionTextColor = this._colorToTextWhizz(this._rgbColorParser.parse(this._selectionStyle.textColor));
this._textWhizz.addColorTextRangeToContext(handler, selection, selectionTextColor, true);
}
catch (e) {
throw TextWhizzWrapper.createException(this._textWhizz, e);
}
}
getTextImage(handler, bounds, previewScale) {
if (EqualsOfFloatNumbers(0, bounds.width) || EqualsOfFloatNumbers(0, bounds.height))
return null;
const scale = this._scale;
const scaledBounds = this._getScaledBounds(bounds);
const scaledBoundsWithoutRound = this._getScaledBoundsWithoutRound(bounds);
const cx = Math.round(scaledBoundsWithoutRound.left - scaledBounds.left);
const cy = Math.round(scaledBoundsWithoutRound.top - scaledBounds.top);
const staticCanvasMargin = TextRenderer.staticCanvasMargin;
const size = new Size(scaledBounds.width + staticCanvasMargin * 2, scaledBounds.height + staticCanvasMargin * 2);
CanvasElementHandler.setElementSize(this._staticCanvas, size.width, size.height);
try {
this._setCurrentCanvas(this._staticCanvas);
const matrix = this._textWhizz.Matrix.createScale(previewScale * scale, previewScale * scale);
matrix.translate(-scaledBounds.left - cx + staticCanvasMargin, -scaledBounds.top - cy + staticCanvasMargin);
this._textWhizz.setContextTransform(matrix);
this._textWhizz.clearContext();
this._textWhizz.addTextToContext(handler);
}
catch (e) {
throw TextWhizzWrapper.createException(this._textWhizz, e);
}
try {
return this._copyCanvas(this._staticCanvas, size);
}
catch (e) {
console.warn(`Cannot get base64 image for text. Reason: ${e}`);
return null;
}
}
_isSelectionEmpty(selection) {
let rectangles = selection.getArea();
if (rectangles.getBounds().width == 0)
return true;
const start = selection.getStart();
const end = selection.getEnd();
if (start.getOffset() == end.getOffset()
&& start.getLineIndex() == end.getLineIndex()
&& start.getParagraphIndex() == end.getParagraphIndex())
return true;
return false;
}
_setCurrentCanvas(canvas) {
if (this._currentCanvas != canvas) {
this._textWhizz.setCurrentContext(`#${canvas.id}`);
this._textWhizz.clearContext();
this._currentCanvas = canvas;
if (canvas == this._activeCanvas && this._needWorkaroundForIOs) {
this._textWhizz.setCurrentContextSize(Math.ceil(canvas.width + 1), Math.ceil(canvas.height + 1));
this._needWorkaroundForIOs = false;
}
}
this._textWhizz.setCurrentContextSize(Math.ceil(canvas.width), Math.ceil(canvas.height));
}
_getTextTransform(transform, center, previewScale) {
const scale = this._scale * previewScale;
const matrix = this._textWhizz.Matrix.createIdentity();
center.scale(1 / previewScale, 1 / previewScale);
matrix.translate(-center.x, -center.y);
matrix.scale(transform.scaleX, transform.scaleY);
matrix.rotate(ConvertDegreeToRadian(transform.angle));
matrix.translate(transform.translateX / previewScale, transform.translateY / previewScale);
matrix.translate(center.x, center.y);
matrix.translate(this._offset.x / previewScale, this._offset.y / previewScale);
matrix.scale(scale, scale);
this._viewportHandler.applyViewportTransformToTwMatrix(matrix, this._activeCanvas);
return matrix;
}
_getFullClippingPath(transform, previewScale, clippingPath, center) {
const allClippingPathsTw = [];
const surfaceClippingPath = this._getSurfaceClippingPath(transform, previewScale, center.clone());
if (surfaceClippingPath)
allClippingPathsTw.push(surfaceClippingPath);
if (clippingPath != null) {
const path = clippingPath.clone();
path.transform(new Transform(1 / previewScale, 1 / previewScale, 0, 0, 0), new PointF(0, 0));
allClippingPathsTw.push(toTextWhizzPath(this._textWhizz, path));
}
if (allClippingPathsTw.length == 0)
return null;
let current = null;
allClippingPathsTw.forEach(x => {
if (current == null)
current = x;
else
current = this._textWhizz.Path.union(current, x);
});
return current;
}
_getSurfaceClippingPath(transform, previewScale, center) {
if (this._workspaceWidth == null || this._workspaceHeight == null)
return null;
const left = this._offset != null ? -this._offset.x : 0;
const top = this._offset != null ? -this._offset.y : 0;
const clippingPathTw = new this._textWhizz.Path();
clippingPathTw.rect(left, top, this._workspaceWidth, this._workspaceHeight);
clippingPathTw.translate(-transform.translateX, -transform.translateY);
clippingPathTw.scale(1 / previewScale, 1 / previewScale);
center.scale(1 / previewScale, 1 / previewScale);
clippingPathTw.translate(-center.x, -center.y);
clippingPathTw.rotate(ConvertDegreeToRadian(-transform.angle));
clippingPathTw.translate(center.x, center.y);
return clippingPathTw;
}
}
WebGLTextRenderer.staticCanvasMargin = 5;
//# sourceMappingURL=WebGLTextRenderer.js.map