@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
897 lines • 53.3 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __spread = (this && this.__spread) || function () {
for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
return ar;
};
var __values = (this && this.__values) || function(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
import { RotatedRectangleF, PointF, RectangleF, Path, Matrix, Transform, Environment, SurfaceContainer, MockupContainer, flatten, EqualsOfFloatNumbers } from "@aurigma/design-atoms-model";
import { toTextWhizzPath, MobileTextEditor } from "@aurigma/design-atoms-text";
import { Graphics } from "./Graphics";
import { RenderState, PlaceholderItemHandler, NewBaseTextItemHandler, GroupItemHandler } from "./ItemHandlers";
import { PlaceholderEditingViewMode, InteractiveZoneLabelPosition } from "./Viewer/Interfaces";
import { CanvasRendererStyle } from "./Canvas/CanvasRendererStyle";
import { CoordinatesConvertUtils } from "./Utils/CoordinatesConvertUtils";
import { parseMargin } from "./Utils";
import { Margin } from "@aurigma/design-atoms-model/Math/Margin";
import { StringUtils } from "./Utils/StringUtils";
var CanvasRenderer = /** @class */ (function () {
function CanvasRenderer(_selection, _dndHandler, handlerConfiguration, _rubberbandHandler, _viewportHandler, _spotlightHandler, _hoverHandler, _snapLinesHandler, _canvasElementHandler, _interactiveZonesHandler) {
var _this = this;
this._selection = _selection;
this._dndHandler = _dndHandler;
this._rubberbandHandler = _rubberbandHandler;
this._viewportHandler = _viewportHandler;
this._spotlightHandler = _spotlightHandler;
this._hoverHandler = _hoverHandler;
this._snapLinesHandler = _snapLinesHandler;
this._canvasElementHandler = _canvasElementHandler;
this._interactiveZonesHandler = _interactiveZonesHandler;
this._loadingImage = new Image();
this._rotationIconImage = null;
this._snapLineMarkSize = 2;
this.style = new CanvasRendererStyle();
this.previewMode = false;
this._loadRotationIconImage = function () {
var brandPrimaryColor = getComputedStyle(document.documentElement).getPropertyValue("--de-brand-primary");
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("width", "16");
svg.setAttribute("height", "16");
svg.setAttribute("viewBox", "0 0 16 16");
svg.setAttribute("fill", "none");
svg.innerHTML = "<path d=\"M11.151 2.54293C14.1643 4.28262 15.1967 8.13564 13.457 11.1489C13.175 11.6374 12.8374 12.0738 12.4569 12.4548L10.5467 14.3629M4.85101 13.4548C1.83777 11.7151 0.805356 7.86213 2.54505 4.84888C2.82707 4.36041 3.16463 3.924 3.54514 3.54301L5.4555 1.63498M10.5456 11.182L10.5467 14.3629M10.5467 14.3629L13.7275 14.364M5.45439 4.81807L5.4555 1.63498M5.4555 1.63498L2.27241 1.63609\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>";
svg.style.color = brandPrimaryColor;
var xml = new XMLSerializer().serializeToString(svg);
var svg64 = btoa(xml);
var b64Start = 'data:image/svg+xml;base64,';
var image64 = b64Start + svg64;
var image = document.createElement("img");
image.onload = function () {
_this._rotationIconImage = image;
};
image.src = image64;
};
this.conf = handlerConfiguration;
this._loadRotationIconImage();
}
Object.defineProperty(CanvasRenderer.prototype, "textRenderer", {
set: function (value) {
this._textRenderer = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(CanvasRenderer.prototype, "conf", {
set: function (conf) {
this._handlerConfiguration = __assign({ placeholderEditingViewMode: PlaceholderEditingViewMode.Overlay }, (conf || {}));
},
enumerable: true,
configurable: true
});
CanvasRenderer.prototype.setTextWhizzModule = function (textWhizz) {
this._textWhizz = textWhizz;
};
CanvasRenderer.prototype.redrawActiveTextCanvas = function (context, layers) {
if (this._textRenderer == null)
return;
var excludeEditedText = context.textEditor instanceof MobileTextEditor;
var allItemHandlers = this._getItemHandlersByRenderState(layers, RenderState.Active, excludeEditedText);
var textItemHandlers = [];
allItemHandlers.forEach(function (handler) {
if (handler instanceof NewBaseTextItemHandler)
textItemHandlers.push(handler);
if (handler instanceof GroupItemHandler) {
var nestedTextHandlers = handler.getNestedItemHandlers().filter(function (childHandler) { return childHandler instanceof NewBaseTextItemHandler; });
textItemHandlers.push.apply(textItemHandlers, __spread(nestedTextHandlers));
}
});
this._textRenderer.clearText();
textItemHandlers.forEach(function (handler) {
var _a, _b;
if (((_a = handler.textEditorController) === null || _a === void 0 ? void 0 : _a.isActive) || (((_b = handler.textEditorController) === null || _b === void 0 ? void 0 : _b.isInEdit) && context.textEditor.redrawActiveTextInEditMode))
handler.redrawActiveText();
});
};
CanvasRenderer.prototype.redrawActiveCanvas = function (layers, activeCanvas, workspace, productHandler, offset) {
var _this = this;
var activeCtx = this._getScaledContext(activeCanvas, workspace, offset);
if (activeCtx == null)
return;
this._getItemHandlersByRenderState(layers, RenderState.Active, false)
.forEach(function (i) { return _this._drawHandler(i, activeCtx, productHandler, workspace, offset); });
var selectedItemHandlers = this._selection.selectedItemHandlers;
var multiselection = selectedItemHandlers.length > 1;
if (!multiselection) {
var current = this._selection.currentItemHandler;
if (current != null && this._isEditing(current)) {
if (this._handlerConfiguration.placeholderEditingViewMode === PlaceholderEditingViewMode.Overlay && current instanceof PlaceholderItemHandler) {
this._drawHandler(current, activeCtx, productHandler, workspace, offset);
}
}
}
this._dndHandler.draw();
activeCtx.restore();
};
CanvasRenderer.prototype.redrawSelectionCanvas = function (designCanvas, workspace, style, textContext, viewer, contentAngle, offset, drawShadow, drawSnapLines) {
var designCtx = this._getScaledContext(designCanvas, workspace, offset, false);
if (designCtx == null)
return;
if (drawShadow)
this._drawShadow(designCtx, workspace, offset);
this._drawInteractiveZones(designCtx);
this._drawSpotlights(designCtx, style);
this._drawHighlight(designCtx, textContext);
this._drawHover(designCtx);
this._drawSelection(designCtx, viewer, offset, contentAngle);
if (drawSnapLines)
this._drawSnapLines(designCtx, contentAngle);
this._rubberbandHandler.draw(designCtx, this, offset);
this._drawLimitsMessage(designCtx, textContext);
designCtx.restore();
};
CanvasRenderer.prototype.redrawInactiveCanvas = function (layers, surfaceCanvas, inactiveCanvas, workspace, margins, mul, productHandler, offset, mockupMarginWorkaroundEnabled) {
var _this = this;
var surfaceCtx = this._getScaledContext(surfaceCanvas, workspace, offset);
var inactiveCtx = this._getScaledContext(inactiveCanvas, workspace, offset);
if (surfaceCtx == null || inactiveCtx == null)
return;
this._drawMargins(surfaceCtx, margins, workspace, mul, offset);
var drawnMockupWorkaround = false;
var drawMockupWorkaroundMargin = function (container, context) {
if (mockupMarginWorkaroundEnabled === false)
return;
if (drawnMockupWorkaround || container instanceof MockupContainer === false)
return;
context.restore();
_this.applyContextScale(context, workspace, offset, false);
_this._drawMockupWorkaround(context, workspace.width, workspace.height, offset);
context.restore();
_this.applyContextScale(context, workspace, offset);
drawnMockupWorkaround = true;
};
this._getItemHandlersByRenderState(layers, RenderState.Bottom, false).forEach(function (i) {
drawMockupWorkaroundMargin(i.layer.container, surfaceCtx);
_this._drawHandler(i, surfaceCtx, productHandler, workspace, offset);
});
this._getItemHandlersByRenderState(layers, RenderState.Top, false).forEach(function (i) {
drawMockupWorkaroundMargin(i.layer.container, inactiveCtx);
_this._drawHandler(i, inactiveCtx, productHandler, workspace, offset);
});
inactiveCtx.restore();
surfaceCtx.restore();
};
CanvasRenderer.prototype.drawRubberband = function (context, rubberband, offset) {
if (offset != null && !offset.isOrigin()) {
rubberband = rubberband.translate(new PointF(-offset.x, -offset.y));
}
var transform = context.getTransform();
var matrix = new Matrix(transform.a, transform.b, transform.c, transform.d, transform.e, transform.f);
context.setTransform(1, 0, 0, 1, 0, 0);
var rectCenterX = rubberband.left + (rubberband.right - rubberband.left) / 2;
var rectCenterY = rubberband.top + (rubberband.bottom - rubberband.top) / 2;
var rectWidth = (rubberband.right - rubberband.left);
var rectHeight = (rubberband.bottom - rubberband.top);
var rect = new RotatedRectangleF(rectCenterX, rectCenterY, rectWidth, rectHeight, 0);
rect = this._applyMatrixToRectangle(rect, matrix);
var rb = this.style.rubberband;
Graphics.rectangle(context, rect, rb.width * Environment.devicePixelRatio, rb.color, rb.fillColor, 1, rb.dashPattern);
context.setTransform(transform);
};
CanvasRenderer.prototype.drawWaitClock = function (context, center, mul) {
var rect = new RotatedRectangleF(center.x || 0, center.y || 0, this._loadingImage.width / mul, this._loadingImage.height / mul, 0);
if (this._loadingImage.complete) {
Graphics.drawImage(context, this._loadingImage, rect, mul, mul);
}
};
CanvasRenderer.prototype.setLoadingImageUrl = function (url) {
if (url != null) {
this._loadingImage.crossOrigin = "anonymous";
this._loadingImage.src = url;
}
};
CanvasRenderer.prototype.drawTextCursor = function (canvas, itemHandler, callback, workspace, mul, offset) {
var renderingContext = this._getScaledContext(canvas, workspace, offset);
if (renderingContext == null)
return;
var matrix = itemHandler.item.transform.toMatrix();
var center = itemHandler.getControlCenter();
renderingContext.translate(center.x, center.y);
renderingContext.transform(matrix.m00, matrix.m10, matrix.m01, matrix.m11, matrix.m02, matrix.m12);
renderingContext.translate(-center.x, -center.y);
callback(renderingContext);
renderingContext.strokeStyle = "white";
renderingContext.lineWidth = 1 / mul;
renderingContext.stroke();
renderingContext.restore();
};
CanvasRenderer.prototype.clearTextCursor = function (canvas) {
var context = this._getContext(canvas);
if (context == null)
return;
context.restore();
};
CanvasRenderer.prototype.applyContextScale = function (renderingContext, workspace, offset, clipByWorkspace) {
if (clipByWorkspace === void 0) { clipByWorkspace = true; }
renderingContext.save();
var canvas = renderingContext.canvas;
this._viewportHandler.applyViewportTransformTo2dContext(renderingContext, canvas);
var scale = Environment.screenDpi * workspace.zoom / 72;
renderingContext.scale(scale, scale);
if (offset != null && !offset.isOrigin()) {
renderingContext.translate(offset.x, offset.y);
}
if (clipByWorkspace) {
this._contextSetClipping(renderingContext, workspace.width, workspace.height, offset);
}
return renderingContext;
};
CanvasRenderer.prototype._getScaleFactor = function (ctx) {
var transform = ctx.getTransform();
var matrix = new Matrix(transform.a, transform.b, transform.c, transform.d, transform.e, transform.f);
var rect = new RectangleF(0, 0, 1, 1);
var scaledRect = rect.updateByMatrix(matrix);
return Math.abs(scaledRect.width);
};
CanvasRenderer.prototype._drawInteractiveZones = function (ctx) {
var e_1, _a;
if (this._interactiveZonesHandler == null)
return;
var zones = this._interactiveZonesHandler.interactiveZones;
if (zones == null || zones.length == 0)
return;
var scaleFactor = this._getScaleFactor(ctx);
var activeZone = this._interactiveZonesHandler.activeZone;
var highlightedZone = this._interactiveZonesHandler.highlightZone;
try {
for (var zones_1 = __values(zones), zones_1_1 = zones_1.next(); !zones_1_1.done; zones_1_1 = zones_1.next()) {
var zone = zones_1_1.value;
if (zone == activeZone)
continue;
if (zone == highlightedZone)
continue;
this._drawInteractiveZone(ctx, zone, false, false, scaleFactor);
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (zones_1_1 && !zones_1_1.done && (_a = zones_1.return)) _a.call(zones_1);
}
finally { if (e_1) throw e_1.error; }
}
if (activeZone != null && activeZone != highlightedZone)
this._drawInteractiveZone(ctx, activeZone, true, false, scaleFactor);
if (highlightedZone != null && highlightedZone != activeZone)
this._drawInteractiveZone(ctx, highlightedZone, false, true, scaleFactor);
if (activeZone != null && activeZone == highlightedZone)
this._drawInteractiveZone(ctx, activeZone, true, true, scaleFactor);
};
CanvasRenderer.prototype._drawInteractiveZone = function (ctx, zone, isActive, isHover, scaleFactor) {
var _a, _b, _c, _d, _e, _f;
if (this._interactiveZonesHandler.isReady() == false)
return;
var style = this._interactiveZonesHandler.getZoneStyle(zone, isActive, isHover);
var dash = [];
if (((_a = style.borderDash) === null || _a === void 0 ? void 0 : _a.length) > 0) {
for (var i = 0; i < style.borderDash.length; i++)
dash[i] = style.borderDash[i] / scaleFactor;
}
var width = style.borderWidth / scaleFactor;
if (style.fillColor)
Graphics.fillPath(ctx, zone.path, new PointF(), new Transform(), style.fillColor);
Graphics.drawPath(ctx, zone.path, new PointF(), new Transform(), width, style.borderColor, 1, dash, style.borderAltColor);
var title = (_b = style.labelTitle) !== null && _b !== void 0 ? _b : zone.name;
if (style.showLabel && title) {
var transform = ctx.getTransform();
var matrix = new Matrix(transform.a, transform.b, transform.c, transform.d, transform.e, transform.f);
ctx.setTransform(1, 0, 0, 1, 0, 0);
var _g = this._getLabelPosition(zone, style, matrix), point = _g.point, align = _g.align, baseline = _g.baseline;
var margin = parseMargin((_c = style.labelMargin) !== null && _c !== void 0 ? _c : 3);
var labelColor = (_d = style.labelColor) !== null && _d !== void 0 ? _d : "black";
var font = (_e = style.labelFont) !== null && _e !== void 0 ? _e : "Roboto";
var pxRatioRounded = Math.round(Environment.devicePixelRatio);
var fontSize = ((_f = style.labelFontSize) !== null && _f !== void 0 ? _f : 24) * pxRatioRounded;
Graphics.text(ctx, StringUtils.toSingleLine(title), point, fontSize + "pt " + font, labelColor, null, 0, null, align, baseline, style.labelBackgroundColor, null, null, margin);
ctx.setTransform(transform);
}
};
CanvasRenderer.prototype._getLabelPosition = function (zone, style, matrix) {
var _a;
var bounds = this._interactiveZonesHandler.getZoneBounds(zone);
var boundsRect = this._applyMatrixToRectangle(RotatedRectangleF.fromRectangleF(bounds), matrix);
if (style.labelPosition == InteractiveZoneLabelPosition.outside) {
var margin = parseMargin((_a = style.labelMargin) !== null && _a !== void 0 ? _a : 3);
var pt = boundsRect.getUpperLeftCorner().translate(margin.left - 1, -margin.bottom + 1);
return { point: pt, align: "left", baseline: "bottom" };
}
else { // inside
return { point: boundsRect.center, align: "center", baseline: "middle" };
}
};
CanvasRenderer.prototype._drawShadow = function (ctx, workspace, offset) {
var transform = ctx.getTransform();
var matrix = new Matrix(transform.a, transform.b, transform.c, transform.d, transform.e, transform.f);
ctx.setTransform(1, 0, 0, 1, 0, 0);
var left = offset != null ? -offset.x : 0;
var top = offset != null ? -offset.y : 0;
var rotRect = RotatedRectangleF.fromRectangleF(new RectangleF(left, top, workspace.width, workspace.height));
var rect = this._applyMatrixToRectangle(rotRect, matrix);
Graphics.rectangle(ctx, rect, 1, "gray", null, 0.5);
rect.width += 2;
rect.height += 2;
Graphics.rectangle(ctx, rect, 1, "gray", null, 0.3);
rect.width += 2;
rect.height += 2;
Graphics.rectangle(ctx, rect, 1, "gray", null, 0.2);
rect.width += 2;
rect.height += 2;
Graphics.rectangle(ctx, rect, 1, "gray", null, 0.1);
rect.width += 2;
rect.height += 2;
Graphics.rectangle(ctx, rect, 1, "gray", null, 0.1);
ctx.setTransform(transform);
};
CanvasRenderer.prototype._applyMatrixToPoint = function (point, matrix) {
point = matrix.transformPoint(point, true);
this._alignPoint(point);
return point;
};
CanvasRenderer.prototype._applyMatrixToRectangle = function (rect, matrix, align) {
if (align === void 0) { align = false; }
var rect1 = rect.toRectangleF();
rect1.updateByMatrix(matrix);
var rect2 = RectangleF.FromLTRB(Math.floor(rect1.left), Math.floor(rect1.top), Math.ceil(rect1.right), Math.ceil(rect1.bottom));
var rect3 = RotatedRectangleF.fromRectangleF(rect2, rect.angle);
if (align)
this._alignRectangle(rect3);
return rect3;
};
CanvasRenderer.prototype._drawSnapLines = function (ctx, contentAngle) {
var _this = this;
var transform = ctx.getTransform();
var matrix = new Matrix(transform.a, transform.b, transform.c, transform.d, transform.e, transform.f);
ctx.setTransform(1, 0, 0, 1, 0, 0);
var drawVertical = this._selection.manipulationPermissions.allowMoveVertical;
var drawHorizontal = this._selection.manipulationPermissions.allowMoveHorizontal;
var getLimitPoints = function (position, limitValues, matrix, isVertical) {
if (limitValues == null || limitValues.length == 0)
return null;
if (_this._snapLinesHandler.currentItemRectangle == null)
return null;
var getPosValue = function (pt) { return isVertical ? pt.x : pt.y; };
var getOtherValue = function (pt) { return isVertical ? pt.y : pt.x; };
var curRect = _this._snapLinesHandler.currentItemRectangle;
var possiblePointsAll = [curRect.getUpperLeftCorner(), curRect.getUpperRightCorner(), curRect.center, curRect.getBottomLeftCorner(), curRect.getBottomRightCorner()];
var possiblePoints = possiblePointsAll
.filter(function (pt) { return EqualsOfFloatNumbers(getPosValue(pt), position); });
var values = __spread(limitValues, possiblePoints.map(function (pt) { return getOtherValue(pt); }));
var min = Math.min.apply(Math, __spread(values));
var max = Math.max.apply(Math, __spread(values));
var middle = values.filter(function (v) { return v > min && v < max; });
var resultNumbers = __spread([min, max], middle);
if (isVertical)
return resultNumbers.map(function (v) { return _this._applyMatrixToPoint(new PointF(position, v), matrix); });
else
return resultNumbers.map(function (v) { return _this._applyMatrixToPoint(new PointF(v, position), matrix); });
};
if (drawVertical) {
var verticalLineData = this._snapLinesHandler.getVerticalLineData();
if (verticalLineData != null) {
var pt = new PointF(verticalLineData.anchor.position, 0);
pt = this._applyMatrixToPoint(pt, matrix);
var limitPoints = getLimitPoints(verticalLineData.anchor.position, verticalLineData.anchor.limitPoints, matrix, true);
if (contentAngle == 90 || contentAngle == 270)
this._drawHorizontalLine(ctx, pt.y, verticalLineData.config.color, limitPoints);
else
this._drawVerticalLine(ctx, pt.x, verticalLineData.config.color, limitPoints);
}
}
if (drawHorizontal) {
var horizontalLineData = this._snapLinesHandler.getHorizontalLineData();
if (horizontalLineData != null) {
var limitPoints = getLimitPoints(horizontalLineData.anchor.position, horizontalLineData.anchor.limitPoints, matrix, false);
var pt = new PointF(0, horizontalLineData.anchor.position);
pt = this._applyMatrixToPoint(pt, matrix);
if (contentAngle == 90 || contentAngle == 270)
this._drawVerticalLine(ctx, pt.x, horizontalLineData.config.color, limitPoints);
else
this._drawHorizontalLine(ctx, pt.y, horizontalLineData.config.color, limitPoints);
}
}
ctx.setTransform(transform);
};
CanvasRenderer.prototype._getResizeIndex = function (contentAngle, rectSigns) {
var index = this._selection.resizeIndex;
if (rectSigns.x == -1) {
var xremap = [0, 2, 1, 4, 3, 7, 6, 5, 8];
index = xremap[index];
}
if (rectSigns.y == -1) {
var yremap = [0, 4, 3, 2, 1, 5, 8, 7, 6];
index = yremap[index];
}
var remap = null;
switch (contentAngle) {
case 90:
remap = [0, 2, 3, 4, 1, 6, 7, 8, 5];
break;
case 180:
remap = [0, 3, 4, 1, 2, 7, 8, 5, 6];
break;
case 270:
remap = [0, 4, 1, 2, 3, 8, 5, 6, 7];
break;
default:
remap = [0, 1, 2, 3, 4, 5, 6, 7, 8];
break;
}
return remap[index];
};
CanvasRenderer.prototype._drawSelection = function (renderingContext, context, offset, contentAngle) {
var _this = this;
this._selection.isDragging;
var selectedItemHandlers = this._selection.selectedItemHandlers;
var multiselection = selectedItemHandlers.length > 1;
if (!multiselection) {
var current = this._selection.currentItemHandler;
if (current != null && this._isEditing(current)) {
if (this._handlerConfiguration.placeholderEditingViewMode === PlaceholderEditingViewMode.Overlay && current instanceof PlaceholderItemHandler) {
this._drawFade(renderingContext, current, context, offset);
}
}
}
var transform = renderingContext.getTransform();
var matrix = new Matrix(transform.a, transform.b, transform.c, transform.d, transform.e, transform.f);
renderingContext.setTransform(1, 0, 0, 1, 0, 0);
if (this._selection.parentRectangle) {
var rect = this._applyMatrixToRectangle(this._selection.parentRectangle, matrix);
Graphics.rectangle(renderingContext, rect, this.style.selection.width * Environment.devicePixelRatio, this.style.selection.color, null, 1, [3, 3]);
}
var isInEdit = (this._selection.currentItemHandler instanceof NewBaseTextItemHandler && this._selection.currentItemHandler.isInEdit);
if (this._selection.visibleRectangle && !isInEdit) {
var rect = this._applyMatrixToRectangle(this._selection.visibleRectangle, matrix);
Graphics.rectangle(renderingContext, rect, this.style.selection.width * Environment.devicePixelRatio, this.style.selection.color, this.style.selection.fillColor, 1, this.style.selection.dashPattern);
var angle = rect.angle;
var selectionOptions_1 = this._selection.getSelectionDrawingParams();
var drawGrip = function (index) {
if (!selectionOptions_1.resize)
return false;
if (!selectionOptions_1.arbitraryHeightResize && (index == 6 || index == 8))
return false;
if (!selectionOptions_1.arbitraryWidthResize && (index == 5 || index == 7))
return false;
if (_this._selection.isIdle)
return true;
if (index === _this._getResizeIndex(contentAngle, _this._selection.rectangleSigns))
return true;
return false;
};
if (drawGrip(1))
this._drawGripRectangle(renderingContext, rect.getUpperLeftCorner(), angle);
if (drawGrip(2))
this._drawGripRectangle(renderingContext, rect.getUpperRightCorner(), angle);
if (drawGrip(4))
this._drawGripRectangle(renderingContext, rect.getBottomLeftCorner(), angle);
if (drawGrip(3))
this._drawGripRectangle(renderingContext, rect.getBottomRightCorner(), angle);
if (drawGrip(6))
this._drawGripRectangle(renderingContext, rect.getUpperCenterPoint(), angle);
if (drawGrip(8))
this._drawGripRectangle(renderingContext, rect.getBottomCenterPoint(), angle);
if (drawGrip(5))
this._drawGripRectangle(renderingContext, rect.getLeftCenterPoint(), angle);
if (drawGrip(7))
this._drawGripRectangle(renderingContext, rect.getRightCenterPoint(), angle);
var drawRotateGrip = function () {
if (!selectionOptions_1.rotate)
return false;
if (_this._selection.isIdle)
return true;
if (_this._selection.isRotating)
return true;
return false;
};
if (drawRotateGrip())
this._drawRotateGrip(renderingContext, rect, angle);
}
renderingContext.setTransform(transform);
};
CanvasRenderer.prototype._drawSpotlights = function (ctx, style) {
var _this = this;
var spotlightedItems = this._spotlightHandler.getSpotlightItems()
.filter(function (x) { return !_this._selection.selectedItemHandlers.contains(x.handler); });
var transform = ctx.getTransform();
var matrix = new Matrix(transform.a, transform.b, transform.c, transform.d, transform.e, transform.f);
ctx.setTransform(1, 0, 0, 1, 0, 0);
spotlightedItems.forEach(function (spotlight) {
var _a, _b, _c, _d, _e, _f, _g;
spotlight.options.color = (_a = spotlight.options.color) !== null && _a !== void 0 ? _a : style.spotlight.color;
spotlight.options.width = (_b = spotlight.options.width) !== null && _b !== void 0 ? _b : style.spotlight.width;
spotlight.options.showLabel = (_c = spotlight.options.showLabel) !== null && _c !== void 0 ? _c : style.spotlight.showLabel;
spotlight.options.fillColor = (_d = spotlight.options.fillColor) !== null && _d !== void 0 ? _d : style.spotlight.fillColor;
spotlight.options.textStyle = (_e = spotlight.options.textStyle) !== null && _e !== void 0 ? _e : style.spotlight.textStyle;
spotlight.options.textColor = (_f = spotlight.options.textColor) !== null && _f !== void 0 ? _f : style.spotlight.textColor;
spotlight.options.dashPattern = (_g = spotlight.options.dashPattern) !== null && _g !== void 0 ? _g : style.spotlight.dashPattern;
_this._drawSpotlight(ctx, spotlight, matrix);
});
ctx.setTransform(transform);
};
CanvasRenderer.prototype._drawHover = function (ctx) {
if (!this.style.canvasItemHoverEnabled)
return;
if (this._selection.selectedItemHandlers.contains(this._hoverHandler.currentHandler))
return;
var transform = ctx.getTransform();
var matrix = new Matrix(transform.a, transform.b, transform.c, transform.d, transform.e, transform.f);
ctx.setTransform(1, 0, 0, 1, 0, 0);
var rect = (this._hoverHandler.currentHandler) ?
this._hoverHandler.currentHandler.getHighlightRectangles({ includeChildren: false, includeParent: true })[0] : null;
if (rect)
this._drawHoverRect(ctx, rect, this._hoverHandler.label, matrix);
var rectPermanent = this._hoverHandler.rectanglePermanent;
if (rectPermanent)
this._drawHoverRect(ctx, rectPermanent, this._hoverHandler.labelPermanent, matrix);
ctx.setTransform(transform);
};
CanvasRenderer.prototype._drawHoverRect = function (ctx, rect, label, matrix) {
var hoverRect = this._applyMatrixToRectangle(rect, matrix);
Graphics.rectangle(ctx, hoverRect, this.style.hover.width * Environment.devicePixelRatio, this.style.hover.color, this.style.hover.fillColor, 1, this.style.hover.dashPattern);
if (label && this.style.hover.showLabel) {
var _a = this._calculateLabelPlacement(hoverRect), point = _a.point, angle = _a.angle;
Graphics.text(ctx, StringUtils.toSingleLine(label), point, this.style.hover.textStyle, this.style.hover.textColor, null, angle, undefined);
}
};
CanvasRenderer.prototype._calculateLabelPlacement = function (hoverRect) {
var pt0 = hoverRect.getUpperLeftCorner();
var pt1 = hoverRect.getUpperRightCorner();
var pt2 = hoverRect.getBottomRightCorner();
var pt3 = hoverRect.getBottomLeftCorner();
var angle = hoverRect.angle;
var points = [
{ index: 0, point: pt0 },
{ index: 1, point: pt1 },
{ index: 2, point: pt2 },
{ index: 3, point: pt3 }
];
points.sort(function (a, b) { return a.point.y - b.point.y; });
var topPointIndex = points[0].index;
var labelPoint = null;
var labelAngle = angle;
if (topPointIndex == 0) {
if (angle <= 45)
labelPoint = pt0;
else {
labelPoint = pt3;
labelAngle = angle - 90;
}
}
else if (topPointIndex == 1) {
if (angle <= 315) {
labelPoint = pt1;
labelAngle = angle + 90;
}
else
labelPoint = pt0;
}
else if (topPointIndex == 2) {
if (angle <= 230) {
labelPoint = pt2;
labelAngle = angle + 180;
}
else {
labelPoint = pt1;
labelAngle = angle + 90;
}
}
else if (topPointIndex == 3) {
if (angle <= 135) {
labelPoint = pt3;
labelAngle = angle - 90;
}
else {
labelPoint = pt2;
labelAngle = angle + 180;
}
}
var pt = labelPoint;
pt.translate(0, -5);
return { point: pt, angle: labelAngle };
};
CanvasRenderer.prototype._drawHighlight = function (ctx, textLimitsContext) {
var transform = ctx.getTransform();
var matrix = new Matrix(transform.a, transform.b, transform.c, transform.d, transform.e, transform.f);
ctx.setTransform(1, 0, 0, 1, 0, 0);
var rects = this._selection.getHighlightRectangles();
this._drawHighlightRects(ctx, rects, matrix, textLimitsContext);
ctx.setTransform(transform);
};
CanvasRenderer.prototype._drawHighlightRects = function (ctx, rectangles, matrix, textLimitsContext) {
var _this = this;
if (rectangles == null)
return;
rectangles.forEach(function (r) {
var rect = _this._applyMatrixToRectangle(r, matrix);
Graphics.rectangle(ctx, rect, _this.style.selection.width * Environment.devicePixelRatio, (textLimitsContext.errorInput) ? "rgba(255,0,0,1)" : _this.style.selection.color, _this.style.selection.fillColor, 1, _this.style.selection.dashPattern);
});
};
CanvasRenderer.prototype._drawSpotlight = function (ctx, spotlight, matrix) {
var rect = this._applyMatrixToRectangle(spotlight.handler.rectangle, matrix);
Graphics.rectangle(ctx, rect, spotlight.options.width * Environment.devicePixelRatio, spotlight.options.color, spotlight.options.fillColor, 1, spotlight.options.dashPattern);
if (spotlight.options.name && spotlight.options.showLabel) {
var pt = rect.getUpperLeftCorner();
pt.translate(0, -5);
Graphics.text(ctx, StringUtils.toSingleLine(spotlight.options.name), pt, spotlight.options.textStyle, spotlight.options.textColor, null, 0, rect.width);
}
};
CanvasRenderer.prototype._alignPoint = function (point) {
point.x = Math.ceil(point.x) - 0.5;
point.y = Math.ceil(point.y) - 0.5;
};
CanvasRenderer.prototype._alignRectangle = function (rect) {
if (rect.centerX % 1 > 0.1) { // 0.5
if (rect.width % 2 == 1)
rect.width += 1;
}
else {
if (rect.width % 2 == 0)
rect.width += 1;
}
if (rect.centerY % 1 > 0.1) { // 0.5
if (rect.height % 2 == 1)
rect.height += 1;
}
};
CanvasRenderer.prototype._drawRotateGrip = function (ctx, rectangle, angle) {
if (!this._rotationIconImage)
return;
var gripSize = (Environment.IsTouchDevice()) ? this.style.selection.rotationGripSizeOnTouchDevice : this.style.selection.rotationGripSize;
var size = gripSize * Environment.devicePixelRatio;
var shadowSize = (gripSize + 2) * Environment.devicePixelRatio;
var svgSize = size / 1.35;
var gripPoint = new PointF(rectangle.centerX, rectangle.centerY + rectangle.height / 2 + size * 1.5);
gripPoint.rotateAt(angle, rectangle.center);
var fullRect = new RotatedRectangleF(gripPoint.x, gripPoint.y, size, size, 0);
var shadowRect = new RotatedRectangleF(gripPoint.x, gripPoint.y, shadowSize, shadowSize, 0);
var circle = new RotatedRectangleF(gripPoint.x, gripPoint.y, svgSize, svgSize, 0);
ctx.fillStyle = "transparent";
ctx.strokeStyle = "rgba(0, 0, 0, 20%)";
ctx.lineWidth = 1 * Environment.devicePixelRatio;
Graphics.drawRoundedRectangle(ctx, shadowRect.toRectangleF(), shadowSize / 2);
ctx.fillStyle = this.style.rotationGripColor;
ctx.strokeStyle = this.style.rotationGripLineColor;
ctx.lineWidth = 1;
Graphics.drawRoundedRectangle(ctx, fullRect.toRectangleF(), size / 2);
Graphics.drawImage(ctx, this._rotationIconImage, circle, size / 24, size / 24);
};
CanvasRenderer.prototype._drawGripRectangle = function (ctx, point, angle) {
var gripRectSize = this.style.selection.resizeGripSize * Environment.devicePixelRatio;
var gripRect = new RotatedRectangleF(Math.ceil(point.x) + 0.5, Math.ceil(point.y) + 0.5, gripRectSize, gripRectSize, angle);
Graphics.fillRectangle(ctx, gripRect, this.style.selection.resizeGripColor);
Graphics.rectangle(ctx, gripRect, this.style.selection.resizeGripLineWidth * Environment.devicePixelRatio, this.style.selection.resizeGripLineColor, this.style.selection.resizeGripColor, 1);
};
CanvasRenderer.prototype._getMemoryCanvas = function (width, height) {
var memoryCanvas = this._canvasElementHandler.viewportMemoryCanvas;
memoryCanvas.width = width;
memoryCanvas.height = height;
return memoryCanvas;
};
CanvasRenderer.prototype._getTextureCanvas = function (width, height) {
var textureCanvas = this._canvasElementHandler.viewportTextureCanvas;
textureCanvas.width = width;
textureCanvas.height = height;
return textureCanvas;
};
CanvasRenderer.prototype._drawHandler = function (handler, renderingContext, productHandler, workspace, offset) {
var _this = this;
var _a, _b;
var memoryCanvas = null;
var memoryCanvasCtx = null;
var textureCanvas = null;
var textureCanvasCtx = null;
if (handler.isNormalRenderingType == false) {
var width = renderingContext.canvas.width;
var height = renderingContext.canvas.height;
memoryCanvas = this._getMemoryCanvas(width, height);
memoryCanvasCtx = this._getScaledContext(memoryCanvas, workspace, offset);
textureCanvas = this._getTextureCanvas(width, height);
textureCanvasCtx = this._getScaledContext(textureCanvas, workspace, offset);
}
var isMasked = productHandler.isMasked(handler.layer.container);
var isDrawn = false;
if (!this.previewMode)
return handler.draw(renderingContext, null, textureCanvas, textureCanvasCtx, memoryCanvas, memoryCanvasCtx, this, isMasked);
var container = (_a = handler === null || handler === void 0 ? void 0 : handler.item) === null || _a === void 0 ? void 0 : _a.parentContainer;
if (container instanceof SurfaceContainer) {
(_b = container === null || container === void 0 ? void 0 : container.parentComponent) === null || _b === void 0 ? void 0 : _b.printAreas.forEach(function (p) {
var printAreaPath = Path.rectangle(p.bounds.left, p.bounds.top, p.bounds.width, p.bounds.height);
if (printAreaPath != null) {
isDrawn = true;
handler.draw(renderingContext, printAreaPath, textureCanvas, textureCanvasCtx, memoryCanvas, memoryCanvasCtx, _this, isMasked);
}
});
}
if (!isDrawn)
handler.draw(renderingContext, null, textureCanvas, textureCanvasCtx, memoryCanvas, memoryCanvasCtx, this, isMasked);
};
CanvasRenderer.prototype._drawMockupWorkaround = function (ctx, workspaceWidth, workspaceHeight, offset) {
var transform = ctx.getTransform();
var matrix = new Matrix(transform.a, transform.b, transform.c, transform.d, transform.e, transform.f);
ctx.setTransform(1, 0, 0, 1, 0, 0);
var clipRect = this._getClippingRectangle(workspaceWidth, workspaceHeight, offset);
var clipRectRot = RotatedRectangleF.fromRectangleF(clipRect);
clipRectRot = this._applyMatrixToRectangle(clipRectRot, matrix, false);
clipRectRot.width -= 1;
clipRectRot.height -= 1;
var clipRectRot1 = clipRectRot.clone();
clipRectRot1.width -= 2;
clipRectRot1.height -= 2;
var clipRectRot2 = clipRectRot.clone();
clipRectRot2.width += 2;
clipRectRot2.height += 2;
Graphics.rectangle(ctx, clipRectRot, 1, "white", null, 1);
Graphics.rectangle(ctx, clipRectRot1, 1, "white", null, 1);
Graphics.rectangle(ctx, clipRectRot2, 1, "white", null, 1);
ctx.setTransform(transform);
};
CanvasRenderer.prototype._needToShowLimits = function (context) {
var _a = context.textEditor.textLimits, characterLimit = _a.characterLimit, maxLineCount = _a.maxLineCount, maxLineLength = _a.maxLineLength, isSingleLineText = _a.isSingleLineText;
if (characterLimit || maxLineLength)
return true;
if (maxLineCount && !isSingleLineText)
return true;
return false;
};
CanvasRenderer.prototype._drawLimitsMessage = function (renderingContext, context) {
var _a, _b;
if (!((_a = context === null || context === void 0 ? void 0 : context.textEditor) === null || _a === void 0 ? void 0 : _a.isActive) || !context.textEditor.textLimits)
return;
if (this._needToShowLimits(context) == false)
return;
var _c = context.textEditor.textLimits, characterLimit = _c.characterLimit, maxLineCount = _c.maxLineCount, maxLineLength = _c.maxLineLength;
var _d = context.textEditor.textMetrics, textLength = _d.textLength, currentLineLength = _d.currentLineLength, linesCount = _d.linesCount;
var backgroundColor = context.errorInput ? "rgba(224,0,0,0.8)" : "rgba(0,0,0,0.8)";
var message = "";
if (((_b = context.lastLimitsEvent) === null || _b === void 0 ? void 0 : _b.isPastePrevented) && context.errorInput) {
message += context.translations.pasteLimitsExceededMsg;
}
else {
if (maxLineLength)
message += context.translations.charactersInParagraphMsg.replace("{value}", currentLineLength === null || currentLineLength === void 0 ? void 0 : currentLineLength.toString())
.replace("{maxValue}", maxLineLength.toString());
if (maxLineCount) {
message += maxLineLength ? "\n" : "";
message += context.translations.paragraphsMsg.substring(0).replace("{value}", linesCount === null || linesCount === void 0 ? void 0 : linesCount.toString())
.replace("{maxValue}", maxLineCount.toString());
;
}
if (characterLimit) {
message += maxLineCount || maxLineLength ? "\n" : "";
message += ("" + (maxLineLength ? context.translations.totalCharactersMsg : context.translations.charactersMsg)).substring(0).replace("{value}", textLength === null || textLength === void 0 ? void 0 : textLength.toString())
.replace("{maxValue}", characterLimit.toString());
;
}
}
var pxRatioRounded = Math.round(Environment.devicePixelRatio);
var width = renderingContext.canvas.width;
var height = renderingContext.canvas.height;
renderingContext.setTransform(1, 0, 0, 1, 0, 0);
var pt = new PointF(width / 2, height - 24 * pxRatioRounded);
var fontsize = 14 * pxRatioRounded;
Graphics.text(renderingContext, message, pt, "normal " + fontsize + "px Roboto", "rgba(255,255,255,0.8)", "rgba(255,255,255,0.8)", 0, width - 48 * pxRatioRounded, "center", "bottom", backgroundColor, null, 0, new Margin({ horizontal: 16, vertical: 8 }), 8 * pxRatioRounded);
};
CanvasRenderer.prototype._drawVerticalLine = function (context, xAnchor, color, points) {
var e_2, _a;
var lineWidth = 1;
var h = context.canvas.clientHeight * Environment.devicePixelRatio;
if ((points === null || points === void 0 ? void 0 : points.length) >= 2) {
Graphics.drawLine(context, points[0].x, points[0].y, points[1].x, points[1].y, lineWidth, color);
try {
for (var points_1 = __values(points), points_1_1 = points_1.next(); !points_1_1.done; points_1_1 = points_1.next()) {
var pt = points_1_1.value;
this._drawSnapLineMark(context, pt, lineWidth, color);
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (points_1_1 && !points_1_1.done && (_a = points_1.return)) _a.call(points_1);
}
finally { if (e_2) throw e_2.error; }
}
}
else
Graphics.drawLine(context, xAnchor, 0, xAnchor, h, lineWidth, color);
};
CanvasRenderer.prototype._drawSnapLineMark = function (context, pt, lineWidth, color) {
Graphics.drawCross(context, pt.x, pt.y, this._snapLineMarkSize * 2, lineWidth, color);
};
CanvasRenderer.prototype._drawHorizontalLine = function (context, yAnchor, color, points) {
var e_3, _a;
var lineWidth = 1;
var h = context.canvas.clientWidth * Environment.devicePixelRatio;
if ((points === null || points === void 0 ? void 0 : points.length) >= 2) {
Graphics.drawLine(context, points[0].x, points[0].y, points[1].x, points[1].y, lineWidth, color);
try {
for (var points_2 = __values(points), points_2_1 = points_2.next(); !points_2_1.done; points_2_1 = points_2.next()) {
var pt = points_2_1.value;
this._drawSnapLineMark(context, pt, lineWidth, color);
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (points_2_1 && !points_2_1.done && (_a = points_2.return)) _a.call(points_2);
}
finally { if (e_3) throw e_3.error; }
}
}
else
Graphics.drawLine(context, 0, yAnchor, h, yAnchor, lineWidth, color);
};
CanvasRenderer.prototype._getContext = function (canvas) {
if (canvas == null)
return null;
if (canvas.width == 0 || canvas.height == 0)
return null;
var context = canvas.getContext("2d");
if (context == null)
return null;
Graphics.clearCanvas(context);
return context;
};
CanvasRenderer.prototype._getScaledContext = function (canvas, workspace, offset, clipByWorkspace) {
if (clipByWorkspace === void 0) { clipByWorkspace = true; }
var context = this._getContext(canvas);
if (context == null)
return;
this.applyContextScale(context, workspace, offset, clipByWorkspace);
return context;
};
CanvasRenderer.prototype._getClippingRectangle = function (workspaceWidth, workspaceHeight, offset) {
var left = offset != null ? -offset.x : 0;
var top = offset != null ? -offset.y : 0;
return new RectangleF(left, top, workspaceWidth, workspaceHeight);
};
CanvasRenderer.prototype._contextSetClipping = function (context, workspaceWidth, workspaceHeight, offset) {
var rect = this._getClippingRectangle(workspaceWidth, workspaceHeight, offset);
var path = new Path2D();
path.rect(rect.left, rect.top, rect.width, rect.height);
context.clip(path);
};
CanvasRenderer.prototype._isEditing = function (itemHandler) {
return itemHandler instanceof PlaceholderItemHandler && itemHandler.edi