@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
249 lines • 12.8 kB
JavaScript
import { BaseProductCommand } from "./BaseProductCommand";
import { Configuration } from "@aurigma/design-atoms-model/Configuration";
import { NotImplementedException } from "@aurigma/design-atoms-model/Exception";
import { RotatedRectangleF, Path, RectangleF } from "@aurigma/design-atoms-model/Math";
import { ImageMetaData, ImageItem, RectangleItem, PlaceholderItem, ResizeMode } from "@aurigma/design-atoms-model/Product/Items";
import { ItemUtils } from "../../Utils/ItemUtils";
import { Color, RgbColors } from "@aurigma/design-atoms-model/Colors";
import { ProductThemeApplier } from "../../Services/ProductTheme/ProductThemeApplier";
import { PrintAreaBoundsType } from "@aurigma/design-atoms-model/Product/PrintAreaBoundsType";
import { SetImageMetadataCommand } from "../ItemsCommands/SetImageMetadataCommand";
import { ItemsCommand, SurfaceCommand } from "@aurigma/design-atoms-interfaces";
export class ChangeBackgroundCommand extends BaseProductCommand {
constructor(_productHandler, historyArgs, product, args, _commandManager, _productThemeManager, _canvas, _eventManager) {
super(product, historyArgs, args);
this._productHandler = _productHandler;
this._commandManager = _commandManager;
this._productThemeManager = _productThemeManager;
this._canvas = _canvas;
this._eventManager = _eventManager;
}
async _executeCommandBody() {
const isImageMeta = this._args.data instanceof ImageMetaData;
return this.changeBackground(this._args.surfaces, isImageMeta ? "image" : "solidColor", isImageMeta ? bgPh => {
if (bgPh instanceof PlaceholderItem)
this._setBgImage(bgPh, this._args.data);
} :
async (bgRec) => {
if (bgRec instanceof PlaceholderItem || bgRec instanceof RectangleItem)
await this._selectBgRectangleColor(bgRec, this._args.data);
}, isImageMeta ? null : this._args.data);
}
async changeBackground(surfaces, type, changeBgItem, value) {
try {
let bgPlaceholders;
switch (type) {
case "image":
bgPlaceholders = surfaces
.map(s => { return this.getOrCreateBgItems(s, type); })
.reduce((prev, cur) => prev.concat(cur), []);
break;
case "solidColor":
bgPlaceholders = surfaces
.map(s => { return this.getOrCreateBgItems(s, type); })
.reduce((prev, cur) => prev.concat(cur), []);
break;
default:
throw new NotImplementedException();
}
for (let bgPlaceholder of bgPlaceholders) {
if (!(bgPlaceholder instanceof PlaceholderItem || bgPlaceholder instanceof RectangleItem))
continue;
if (bgPlaceholder instanceof PlaceholderItem) {
ItemUtils.clearImageContent(bgPlaceholder);
const contentItem = bgPlaceholder.content;
if (value instanceof Color) {
if (!value.equals(bgPlaceholder.fillColor)) {
bgPlaceholder.themeBinding.fill = null;
contentItem.themeBinding.fill = null;
}
bgPlaceholder.fillColor = value;
}
else if (value != null) {
bgPlaceholder.themeBinding.fill = value.title;
contentItem.themeBinding.fill = value.title;
}
}
await changeBgItem(bgPlaceholder);
}
ItemUtils.updateItems(bgPlaceholders, this._productHandler, this._canvas);
return bgPlaceholders;
}
finally {
}
}
getOrCreateBgItems(surface, type) {
const createPlaceholder = (rec) => {
const ph = new PlaceholderItem(rec);
ph.contentResizeMode = ResizeMode.Fill;
ph.content = new ImageItem();
const contentHandler = this._productHandler.getHandler(ph.content);
contentHandler.setRectangle(RotatedRectangleF.fromRectangleF(rec));
return ph;
};
const createRectangle = (rec) => {
const recBg = new RectangleItem(rec);
const recBgHandler = this._productHandler.getHandler(recBg);
recBgHandler.setRectangle(RotatedRectangleF.fromRectangleF(rec));
recBg.borderWidth = 0;
return recBg;
};
const isNormalizedContent = (bgContainerItems) => {
return bgContainerItems.every(i => i instanceof PlaceholderItem || i instanceof RectangleItem);
};
const bgContainer = surface
.containers
.first(c => c.name === Configuration.BG_CONTAINER_NAME);
let bgItems = bgContainer.items.toArray();
if (bgItems.length === 0) {
const printArea = surface.printAreas.getItem(0);
const ph = createPlaceholder(printArea.getBounds(PrintAreaBoundsType.Bleed));
this._addItem(surface, bgContainer, ph, false);
return [ph];
}
else if (surface.printAreas.length === bgItems.length) {
const phs = [];
for (let i = 0; i < surface.printAreas.length; i++) {
const printArea = surface.printAreas.getItem(i);
const bgItem = bgItems[i];
if (bgItem instanceof ImageItem) {
const bgImg = bgItem;
const frontendPermissions = bgImg.frontendPermissions;
this._commandManager.execute(ItemsCommand.deleteItems, {
items: [bgImg],
force: true
});
const ph = createPlaceholder(printArea.getBounds(PrintAreaBoundsType.Bleed));
ph.frontendPermissions = frontendPermissions;
this._addItem(surface, bgContainer, ph, false);
phs.push(ph);
}
else if (bgItem instanceof PlaceholderItem) {
const bgPh = bgItem;
//Reset paths, rectangles of shape background
if (type !== Configuration.BG_SOLIDCOLOR) {
const rectangle = printArea.getBounds(PrintAreaBoundsType.Bleed);
const path = Path.rectangle(rectangle.left, rectangle.top, rectangle.width, rectangle.height);
let changed = false;
if (!bgPh.sourcePath.isEqual(path)) {
bgPh.sourcePath = path;
changed = true;
}
if (!RectangleF.isEqual(bgPh.sourceRectangle, rectangle)) {
bgPh.transform.clear();
bgPh.sourceRectangle = rectangle;
changed = true;
}
if (changed && bgPh.transform.translateX !== 0 || bgPh.transform.translateY !== 0) {
bgPh.transform.setTranslateX(0);
bgPh.transform.setTranslateY(0);
}
const rotatedRectangle = RotatedRectangleF.fromRectangleF(rectangle);
const contentHandler = this._productHandler.getHandler(bgPh.content);
if (!contentHandler.getTransformedRectangle().equals(rotatedRectangle)) {
contentHandler.setTransformedRectangle(rotatedRectangle, true);
changed = true;
}
if (changed) {
ItemUtils.updateItems(bgItems, this._productHandler, this._canvas, { redraw: false });
}
}
else if (bgPh.content instanceof ImageItem) {
bgPh.transform.clear();
bgPh.sourceRectangle = printArea.getBounds(PrintAreaBoundsType.Bleed);
}
phs.push(bgPh);
}
}
return phs;
}
else if (isNormalizedContent(bgItems)) {
//workaround для BUG 1817 - Folding Line отображается на Hi-res
const solidColorType = Configuration.BG_SOLIDCOLOR;
if (type === solidColorType) {
const solidColorRec = bgItems.find(i => i.name === solidColorType);
if (solidColorRec == null) {
const printArea = surface.printAreas.getItem(0);
const commonBgPlaceholder = createRectangle(printArea.getBounds(PrintAreaBoundsType.Bleed));
commonBgPlaceholder.name = solidColorType;
this._addItem(surface, bgContainer, commonBgPlaceholder, false);
}
}
if (this._historyArgs.history != null)
this._historyArgs.history.pause();
bgItems = bgContainer.items.toArray();
if (isNormalizedContent(bgItems)) {
for (const bg of bgItems) {
const noShowNPrint = bg.name === solidColorType;
bg.visualizationPermissions.noPrint = type === solidColorType ? !noShowNPrint : noShowNPrint;
bg.visualizationPermissions.noShow = type === solidColorType ? !noShowNPrint : noShowNPrint;
}
}
ItemUtils.updateItems(bgItems, this._productHandler, this._canvas, { redraw: true });
if (this._historyArgs.history != null)
this._historyArgs.history.resume();
return bgItems;
}
else {
throw new NotImplementedException("Containers contains unexpected content");
}
}
_addItem(surface, container, item, selectOnCanvas) {
this._commandManager.execute(SurfaceCommand.addItems, {
surface: surface,
targetContainer: container,
items: [item],
selectOnCanvas: false
});
}
_setBgImage(bgPh, imageData) {
var _a;
const imageItem = bgPh.content;
const imageItemHandler = this._productHandler.getHandler(imageItem);
imageItemHandler.setTransformedRectangle(this._getBgImageRectangle(bgPh, imageData));
bgPh.fillColor = RgbColors.transparent;
imageItem.fillColor = RgbColors.transparent;
if (imageItem.overlayEffect != null) {
if (imageItem.imagePermissions.allowKeepOverlayColor)
ItemUtils.setOverlayEffectColor(imageItem, imageItem.overlayEffect.color);
else
imageItem.overlayEffect.color = null;
}
SetImageMetadataCommand.setDataToImage(imageData, imageItem);
(_a = this._eventManager) === null || _a === void 0 ? void 0 : _a.imageContentChangedEvent.fire(bgPh);
}
_getBgImageRectangle(ph, imageData) {
let newWidth;
let newHeight;
const phHandler = this._productHandler.getHandler(ph);
const phRectangle = phHandler.getTransformedRectangle(false);
const widthToHeightImage = imageData.size.width / imageData.size.height;
const widthToHeightPlaceholder = phRectangle.width / phRectangle.height;
if (widthToHeightImage < widthToHeightPlaceholder) {
newWidth = phRectangle.width;
newHeight = newWidth / widthToHeightImage;
}
else {
newHeight = phRectangle.height;
newWidth = newHeight * widthToHeightImage;
}
return new RotatedRectangleF(phRectangle.centerX, phRectangle.centerY, newWidth, newHeight, 0);
}
async _selectBgRectangleColor(bgRec, value) {
if (value instanceof Color) {
bgRec.fillColor = value;
}
else if (value != null) {
bgRec.themeBinding.fill = value.title;
await new ProductThemeApplier(this._canvas.viewer.colorPreviewService, this._canvas.viewer.colorParser)
.applyToItem(bgRec, this._productThemeManager.currentProductTheme);
}
}
redo() {
throw new NotImplementedException();
}
undo() {
throw new NotImplementedException();
}
}
//# sourceMappingURL=ChangeBackgroundCommand.js.map