@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
259 lines • 10.9 kB
JavaScript
import { EventObject } from "@aurigma/design-atoms-model/EventObject";
import { BaseRectangleItemHandler } from "./BaseRectangleItemHandler";
import { Path, PointF } from "@aurigma/design-atoms-model/Math";
import { Graphics } from "../Graphics";
import { ShapeHandlerData } from "./ShapeHandlerData";
import { ClipartItem, WrappingMode } from "@aurigma/design-atoms-model/Product/Items";
import { PathHandler } from "./PathHandler";
import { Deferred } from "../Utils/Deferred";
export { WrappingMode };
export class ShapeItemHandler extends BaseRectangleItemHandler {
constructor(path, item, textWhizz = null, apiClient = null, colorPreviewService = null) {
super(null, null, null, null, item, textWhizz, colorPreviewService);
this._apiClient = apiClient;
this._originalPathId = null;
this._isLoadingPath = false;
this._isLoadedPath = false;
this.originalPath = path != null ? path : new Path("");
this._addedOnCanvasEvent = new EventObject();
if (item != null && item.sourcePathId != null) {
this.setOriginalPathId(item.sourcePathId);
}
this._allowNegativeResize = false;
this._updateControlPointsSync();
}
get item() {
return super._getItem();
}
set item(item) {
super._setItem(item);
}
get originalPath() {
return this.item.sourcePath;
}
set originalPath(path) {
this.item.sourcePath = path;
this._isLoadedPath = true;
}
getOriginalPathId() {
return this._originalPathId;
}
async setOriginalPathId(id) {
this._handlerUpdated = new Deferred();
this._originalPathId = id;
if (this._originalPathId == null)
return;
this._isLoadingPath = true;
this._isLoadedPath = false;
await this._waitAddOnCanvas();
if (this.canvas == null)
return;
try {
const result = this._apiClient.getContentPath(this._originalPathId);
const path = new Path(await result);
this.item.sourcePathLoaded = true;
this.originalPath = path;
this._updateControlPoints();
this._isLoadedPath = true;
this._handlerUpdated.resolve();
}
catch (ex) {
console.error(`Unable to load content path. Reason: ${ex}`);
this._isLoadedPath = false;
this._handlerUpdated.reject(ex);
}
finally {
this._isLoadingPath = false;
this.item.sourcePathLoaded = false;
this.item.getPathLoadedEvent().notify();
}
this.canvas.redraw();
}
drawItemHandler(itemHandlerCtx) {
if (itemHandlerCtx == null) {
return;
}
if (!this._isReadyToDraw) {
this.canvas.drawWaitClock(itemHandlerCtx, this.rectangle.center);
return;
}
if (this._hasVectorMask()) {
itemHandlerCtx.save();
this._clip(itemHandlerCtx);
}
const { fillColorPreview, borderColorPreview, altBorderColorPreview } = this._getItemColorPreviews();
Graphics.path(itemHandlerCtx, this.item.sourcePath, this.getControlCenter(), this.item.transform, fillColorPreview === null || fillColorPreview === void 0 ? void 0 : fillColorPreview.toString(), 0, null, this.item.opacity, null);
const dash = this._getActualDash();
Graphics.drawStroke(itemHandlerCtx, this.item.sourcePath, this.getControlCenter(), this.item.transform, this._getActualBorderWidth(), borderColorPreview === null || borderColorPreview === void 0 ? void 0 : borderColorPreview.toString(), altBorderColorPreview === null || altBorderColorPreview === void 0 ? void 0 : altBorderColorPreview.toString(), this.item.opacity, dash);
if (this._hasVectorMask())
itemHandlerCtx.restore();
}
onTextWhizzInit() {
super.onTextWhizzInit();
this._updateControlPoints();
}
getTextWrappingPath() {
if (this.item.textWrappingMode === WrappingMode.Tight)
return this._getTransformedPath();
return super.getTextWrappingPath();
}
_getColors() {
return [this.item.fillColor, this.item.borderColor, this.item.altBorderColor, ...super._getColors()];
}
async _updateImpl(beforeUpdate, afterUpdate) {
if (typeof beforeUpdate != "function") {
return;
}
if (this.isVisible()) {
super._update(null, beforeUpdate, afterUpdate);
}
else {
beforeUpdate();
}
}
get _areColorPreviewsReady() {
const { fillColorPreview, borderColorPreview, altBorderColorPreview } = this._getItemColorPreviews();
return (this.item.fillColor == null || fillColorPreview != null)
&& (this.item.borderColor == null || borderColorPreview != null)
&& (this.item.altBorderColor == null || altBorderColorPreview != null);
}
get _isReadyToDraw() {
return !this._isLoadingPath
&& this._isLoadedPath
&& this._areColorPreviewsReady;
}
_setDataItem(item, itemHandlerData) {
super._setDataItem(item, itemHandlerData);
this.item.fillColor = item.fillColor;
this.item.borderColor = item.borderColor;
this.item.sourcePath = item.sourcePath;
this.item.altBorderColor = item.altBorderColor;
this.item.borderWidth = item.borderWidth;
this.item.dash = item.dash;
this.item.fixedBorderWidth = item.fixedBorderWidth;
}
_onItemPropertyChanged(sender, propertyName) {
const canvas = this.canvas;
switch (propertyName) {
case "fillColor":
case "borderColor":
case "altBorderColor":
if (!(this.item.parentGroupItem instanceof ClipartItem)) {
this.update();
if (this.canvas != null)
this.canvas.redraw();
}
break;
case "fixedBorderWidth":
case "borderWidth":
if (canvas != null) {
canvas.updateSelection();
canvas.redraw();
}
break;
case "sourceRectangle":
this.originalPath = Path.rectangle(this.item.sourceRectangle.left, this.item.sourceRectangle.top, this.item.sourceRectangle.width, this.item.sourceRectangle.height);
this._controlPoints = [
new PointF(this.item.sourceRectangle.left, this.item.sourceRectangle.top),
new PointF(this.item.sourceRectangle.right, this.item.sourceRectangle.bottom)
];
break;
default:
}
super._onItemPropertyChanged(sender, propertyName);
}
_getActualBorderWidth() {
var borderWidth = this.item.borderWidth;
var canvas = this.canvas;
if (this.item.fixedBorderWidth && canvas != null)
borderWidth /= canvas.zoom;
return borderWidth;
}
_getBoundsMargin() {
return this._getActualBorderWidth();
}
_getTransformedPath() {
var center = this.getControlCenter();
var path = this.item.sourcePath.clone();
path.transform(this.item.transform, center);
return path;
}
_createDataInstance(itemHandler) {
return new ShapeHandlerData(itemHandler);
}
_getItemColorPreviews() {
const colors = [this.item.fillColor, this.item.borderColor, this.item.altBorderColor];
const previews = this._colorPreviewService.getPreviews(colors);
let fillColorPreview = null;
if (this.item.fillColor != null) {
fillColorPreview = previews[0];
if (this.item.fillColor != null && fillColorPreview == null) {
this._colorPreviewService.subscribeToPreviewLoaded(this.item.fillColor, this._onColorPreviewLoaded);
}
}
let borderColorPreview = null;
if (this.item.borderColor != null) {
borderColorPreview = previews[1];
if (this.item.borderColor != null && borderColorPreview == null) {
this._colorPreviewService.subscribeToPreviewLoaded(this.item.borderColor, this._onColorPreviewLoaded);
}
}
let altBorderColorPreview = null;
if (this.item.altBorderColor != null) {
altBorderColorPreview = previews[2];
if (this.item.altBorderColor != null && altBorderColorPreview == null) {
this._colorPreviewService.subscribeToPreviewLoaded(this.item.altBorderColor, this._onColorPreviewLoaded);
}
}
return {
fillColorPreview: fillColorPreview,
borderColorPreview: borderColorPreview,
altBorderColorPreview: altBorderColorPreview
};
}
_onAddedOnCanvas(canvas, supressUpdate) {
super._onAddedOnCanvas(canvas, supressUpdate);
this._apiClient = canvas.designAtomsApiClient;
this._addedOnCanvasEvent.notify();
this._updateControlPoints();
}
async _updateControlPoints() {
if (this.item.sourcePath == null)
return;
const bounds = await PathHandler.getBounds(this.item.sourcePath);
this.controlPoints = [new PointF(bounds.left, bounds.top), new PointF(bounds.right, bounds.bottom)];
}
_updateControlPointsSync() {
if (this.item.sourcePath == null)
return;
const bounds = PathHandler.getBoundsSync(this.item.sourcePath);
if (bounds == null)
return;
this.controlPoints = [new PointF(bounds.left, bounds.top), new PointF(bounds.right, bounds.bottom)];
}
async _waitAddOnCanvas() {
if (this.canvas != null)
return;
await new Promise(resolve => {
var handler = () => {
resolve();
this._addedOnCanvasEvent.remove(handler);
};
this._addedOnCanvasEvent.add(handler);
});
}
_getActualDash() {
var dash = this.item.dash;
if (dash == null)
return dash;
var canvas = this.canvas;
var actualDash = dash.slice(0);
if (actualDash.length > 0 && this.item.fixedBorderWidth && canvas != null) {
for (var i = 0; i < actualDash.length; i++)
actualDash[i] /= canvas.zoom;
}
return actualDash;
}
}
ShapeItemHandler.typeName = "ShapeItemHandler";
//# sourceMappingURL=ShapeItemHandler.js.map