@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
148 lines • 7.04 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, Path } from "@aurigma/design-atoms-model/Math";
import { TextRenderer } from "./TextRenderer";
import { Graphics } from "../Graphics";
import { TextWhizzWrapper } from "@aurigma/design-atoms-text/TextEditor";
import { Size } from "@aurigma/design-atoms-model/Product/Items";
var Ctx2dTextRenderer = /** @class */ (function (_super) {
__extends(Ctx2dTextRenderer, _super);
function Ctx2dTextRenderer() {
return _super !== null && _super.apply(this, arguments) || this;
}
Ctx2dTextRenderer.prototype.drawText = function (handler, transform, center, previewScale, opacity, clippingPath) {
var ctx = this._getScaledContext(transform, center, previewScale);
ctx.globalAlpha = opacity !== null && opacity !== void 0 ? opacity : 1;
var fullClippingPath = this._getFullClippingPath(transform, previewScale, clippingPath);
if (fullClippingPath)
Graphics.clipPath(ctx, fullClippingPath);
try {
handler.draw(ctx);
}
catch (e) {
throw TextWhizzWrapper.createException(this._textWhizz, e);
}
finally {
ctx.restore();
}
};
Ctx2dTextRenderer.prototype.transformText = function (handler, transform, center, previewScale, opacity, clippingPath) {
this.drawText(handler, transform, center, previewScale, opacity, clippingPath);
};
Ctx2dTextRenderer.prototype.clearText = function () {
var ctx = this._activeCanvas.getContext("2d");
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
};
Ctx2dTextRenderer.prototype.drawSelection = function (handler, selection, transform, center, previewScale) {
var ctx = this._getScaledContext(transform, center, previewScale);
try {
var fullClippingPath = this._getFullClippingPath(transform, previewScale, null);
Graphics.clipPath(ctx, fullClippingPath);
var rectangles = selection.getArea();
rectangles.addToContext(ctx);
ctx.fillStyle = this._selectionStyle.color;
ctx.fill();
handler.draw(ctx);
var selectionTextColor = this._colorToTextWhizz(this._rgbColorParser.parse(this._selectionStyle.textColor));
selection.draw(ctx, selectionTextColor);
}
catch (e) {
throw TextWhizzWrapper.createException(this._textWhizz, e);
}
finally {
ctx.restore();
}
};
Ctx2dTextRenderer.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);
var canvas = this._createCanvas(size);
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.save();
ctx.translate(-scaledBounds.left - cx + staticCanvasMargin, -scaledBounds.top - cy + staticCanvasMargin);
ctx.scale(scale * previewScale, scale * previewScale);
try {
handler.draw(ctx);
}
catch (e) {
throw TextWhizzWrapper.createException(this._textWhizz, e);
}
finally {
ctx.restore();
}
try {
return canvas;
}
catch (e) {
console.warn("Cannot get base64 image for text. Reason: " + e);
return null;
}
};
Ctx2dTextRenderer.prototype._getFullClippingPath = function (transform, previewScale, clippingPath) {
var clippingPaths = [];
var surfaceClippingPath = this._getSurfaceClippingPath(transform, previewScale);
if (surfaceClippingPath)
clippingPaths.push(surfaceClippingPath);
if (clippingPath != null) {
var path = clippingPath.clone();
path.transform(new Transform(1 / previewScale, 1 / previewScale, 0, 0, 0), new PointF(0, 0));
clippingPaths.push(path);
}
if (clippingPaths.length == 0)
return null;
var current = null;
clippingPaths.forEach(function (element) {
current = current == null
? element
: current.addPath(element);
});
return current;
};
Ctx2dTextRenderer.prototype._getSurfaceClippingPath = function (transform, previewScale) {
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 clippingPath = Path.rectangle(left, top, this._workspaceWidth, this._workspaceHeight);
clippingPath.translate(-transform.translateX, -transform.translateY);
clippingPath.scale(1 / previewScale, 1 / previewScale);
return clippingPath;
};
Ctx2dTextRenderer.prototype._getScaledContext = function (transform, center, previewScale) {
var ctx = this._activeCanvas.getContext("2d");
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.save();
this._viewportHandler.applyViewportTransformTo2dContext(ctx, this._activeCanvas);
var scale = this._scale;
ctx.scale(scale, scale);
ctx.translate(this._offset.x, this._offset.y);
var matrix = transform.toMatrix();
ctx.translate(center.x, center.y);
ctx.transform(matrix.m00, matrix.m10, matrix.m01, matrix.m11, matrix.m02, matrix.m12);
ctx.translate(-center.x, -center.y);
ctx.scale(previewScale, previewScale);
return ctx;
};
return Ctx2dTextRenderer;
}(TextRenderer));
export { Ctx2dTextRenderer };
//# sourceMappingURL=Ctx2dTextRenderer.js.map