@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
200 lines • 11.1 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
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";
var WebGLTextRenderer = /** @class */ (function (_super) {
__extends(WebGLTextRenderer, _super);
function WebGLTextRenderer(staticCanvas, activeCanvas, textWhizz, zoom, offset, viewportHandler, selectionStyle, rgbColorParser, canvasElementHandler) {
var _this = _super.call(this, staticCanvas, activeCanvas, textWhizz, zoom, offset, viewportHandler, selectionStyle, rgbColorParser, canvasElementHandler) || this;
_this._currentCanvas = null;
_this._needWorkaroundForIOs = false;
_this._needWorkaroundForIOs = Environment.IsIos();
_this._setCurrentCanvas(_this._staticCanvas);
return _this;
}
WebGLTextRenderer.prototype.drawText = function (handler, transform, center, previewScale, opacity, clippingPath) {
var 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);
var 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);
}
};
WebGLTextRenderer.prototype.transformText = function (handler, transform, center, previewScale, opacity, clippingPath) {
if (this._currentCanvas != this._activeCanvas) {
this.drawText(handler, transform, center, previewScale, opacity, clippingPath);
return;
}
var matrix = this._getTextTransform(transform, center, previewScale);
this._textWhizz.setContextTransform(matrix);
};
WebGLTextRenderer.prototype.clearText = function () {
this._setCurrentCanvas(this._activeCanvas);
this._textWhizz.clearContext();
};
WebGLTextRenderer.prototype.drawSelection = function (handler, selection, transform, center, previewScale) {
if (this._currentCanvas != this._activeCanvas)
return;
try {
var clippingPath = this._getFullClippingPath(transform, previewScale, null, center.clone());
this._textWhizz.setClippingPaths(clippingPath);
if (this._isSelectionEmpty(selection))
return;
this._textWhizz.clearContext();
var rectangles = selection.getArea();
var leftSelectionPosition = selection.getStart();
var 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();
}
var selectionBgColor = this._colorToTextWhizz(this._rgbColorParser.parse(this._selectionStyle.color));
this._textWhizz.addShapeToContext(rectangles, selectionBgColor);
var preTextRange = new this._textWhizz.TextRange(handler.getFirstPosition(), leftSelectionPosition);
this._textWhizz.addTextRangeToContext(handler, preTextRange);
var postTextRange = new this._textWhizz.TextRange(rightSelectionPosition, handler.getLastPosition());
this._textWhizz.addTextRangeToContext(handler, postTextRange);
var selectionTextColor = this._colorToTextWhizz(this._rgbColorParser.parse(this._selectionStyle.textColor));
this._textWhizz.addColorTextRangeToContext(handler, selection, selectionTextColor, true);
}
catch (e) {
throw TextWhizzWrapper.createException(this._textWhizz, e);
}
};
WebGLTextRenderer.prototype.getTextImage = function (handler, bounds, previewScale) {
if (EqualsOfFloatNumbers(0, bounds.width) || EqualsOfFloatNumbers(0, bounds.height))
return null;
var scale = this._scale;
var scaledBounds = this._getScaledBounds(bounds);
var scaledBoundsWithoutRound = this._getScaledBoundsWithoutRound(bounds);
var cx = Math.round(scaledBoundsWithoutRound.left - scaledBounds.left);
var cy = Math.round(scaledBoundsWithoutRound.top - scaledBounds.top);
var staticCanvasMargin = TextRenderer.staticCanvasMargin;
var size = new Size(scaledBounds.width + staticCanvasMargin * 2, scaledBounds.height + staticCanvasMargin * 2);
CanvasElementHandler.setElementSize(this._staticCanvas, size.width, size.height);
try {
this._setCurrentCanvas(this._staticCanvas);
var 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;
}
};
WebGLTextRenderer.prototype._isSelectionEmpty = function (selection) {
var rectangles = selection.getArea();
if (rectangles.getBounds().width == 0)
return true;
var start = selection.getStart();
var end = selection.getEnd();
if (start.getOffset() == end.getOffset()
&& start.getLineIndex() == end.getLineIndex()
&& start.getParagraphIndex() == end.getParagraphIndex())
return true;
return false;
};
WebGLTextRenderer.prototype._setCurrentCanvas = function (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));
};
WebGLTextRenderer.prototype._getTextTransform = function (transform, center, previewScale) {
var scale = this._scale * previewScale;
var 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;
};
WebGLTextRenderer.prototype._getFullClippingPath = function (transform, previewScale, clippingPath, center) {
var _this = this;
var allClippingPathsTw = [];
var surfaceClippingPath = this._getSurfaceClippingPath(transform, previewScale, center.clone());
if (surfaceClippingPath)
allClippingPathsTw.push(surfaceClippingPath);
if (clippingPath != null) {
var 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;
var current = null;
allClippingPathsTw.forEach(function (x) {
if (current == null)
current = x;
else
current = _this._textWhizz.Path.union(current, x);
});
return current;
};
WebGLTextRenderer.prototype._getSurfaceClippingPath = function (transform, previewScale, center) {
if (this._workspaceWidth == null || this._workspaceHeight == null)
return null;
var left = this._offset != null ? -this._offset.x : 0;
var top = this._offset != null ? -this._offset.y : 0;
var 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;
return WebGLTextRenderer;
}(TextRenderer));
export { WebGLTextRenderer };
//# sourceMappingURL=WebGLTextRenderer.js.map