@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
254 lines • 12.4 kB
JavaScript
import { Collection } from "@aurigma/design-atoms-model/Collection";
import { Container } from "@aurigma/design-atoms-model/Product/Container";
import { EventWithSenderArg, EventObject } from "@aurigma/design-atoms-model/EventObject";
import { ShapeItem } from "@aurigma/design-atoms-model/Product/Items/ShapeItem";
import { Path } from "@aurigma/design-atoms-model/Math/Path";
import { PrintAreaBoundsType } from "@aurigma/design-atoms-model/Product/PrintAreaBoundsType";
import { debounce } from "@aurigma/design-atoms-model";
export class SafetyLinesHandler {
constructor(conf, colorParser) {
this._changedEvent = new EventWithSenderArg();
this._visibilityChangedEvent = new EventObject();
this._containers = null;
this._visible = false;
this._printZoneConf = SafetyLinesHandler._getDefaultPrintZoneConfig();
this._onPrintAreaAdded = (data) => {
this._clearCurrentSafetyLinesContainers();
this._subscribePrintAreaEvents(data.item);
this._changedEvent.notify(this);
};
this._onPrintAreaRemoved = (data) => {
this._clearCurrentSafetyLinesContainers();
this._unsubscribePrintAreaEvents(data.item);
this._changedEvent.notify(this);
};
this._onSafetyLinePropertyChanged = () => {
this._clearCurrentSafetyLinesContainers();
this._changedEvent.notify(this);
};
this._onSafetyLinesCollectionRemoved = (data) => {
this._unsubscribeSafetyLineEvents(data.item);
this._clearCurrentSafetyLinesContainers();
this._changedEvent.notify(this);
};
this._onSafetyLinesCollectionAdded = (data) => {
this._subscribeSafetyLineEvents(data.item);
this._clearCurrentSafetyLinesContainers();
this._changedEvent.notify(this);
};
this._onSurfaceContainerAdded = (data) => {
this._clearCurrentSafetyLinesContainers();
this._subscribeContainerEvents(data.item);
this._changedEvent.notify(this);
};
this._onSurfaceContainerRemoved = (data) => {
this._clearCurrentSafetyLinesContainers();
this._unsubscribeContainerEvents(data.item);
this._changedEvent.notify(this);
};
this._onPrintAreaPropertyChanged = (sender, propName) => {
if (!["bleed", "slug", "bounds", "region", "shape"].includes(propName)) {
return;
}
this._clearCurrentSafetyLinesContainers();
this._changedEvent.notify(this);
};
this._onPrintAreaPropertyChangedDebounce = debounce(this._onPrintAreaPropertyChanged, 100);
this.conf = conf;
this._colorParser = colorParser;
}
get conf() {
return this._printZoneConf;
}
set conf(value) {
const defaultConfig = SafetyLinesHandler._getDefaultPrintZoneConfig();
this._printZoneConf.bleed = Object.assign(Object.assign({}, defaultConfig.bleed), ((value === null || value === void 0 ? void 0 : value.bleed) || {}));
this._printZoneConf.trim = Object.assign(Object.assign({}, defaultConfig.trim), ((value === null || value === void 0 ? void 0 : value.trim) || {}));
this._printZoneConf.region = Object.assign(Object.assign({}, defaultConfig.region), ((value === null || value === void 0 ? void 0 : value.region) || {}));
this._clearCurrentSafetyLinesContainers();
this._changedEvent.notify(this);
}
get surface() {
return this._surface;
}
set surface(value) {
if (this._surface === value)
return;
if (this._surface != null) {
this._surface.printAreas.remove_itemAdded(this._onPrintAreaAdded);
this._surface.printAreas.remove_itemRemoved(this._onPrintAreaRemoved);
this._surface.printAreas.forEach((printArea) => this._unsubscribePrintAreaEvents(printArea));
this._surface.containers.remove_itemAdded(this._onSurfaceContainerAdded);
this._surface.containers.remove_itemRemoved(this._onSurfaceContainerRemoved);
this._surface.containers.forEach((containers) => this._unsubscribeContainerEvents(containers));
}
this._surface = value;
this._clearCurrentSafetyLinesContainers();
if (this._surface == null)
return;
this._surface.printAreas.add_itemAdded(this._onPrintAreaAdded);
this._surface.printAreas.add_itemRemoved(this._onPrintAreaRemoved);
this._surface.printAreas.forEach((printArea) => this._subscribePrintAreaEvents(printArea));
this._surface.containers.add_itemAdded(this._onSurfaceContainerAdded);
this._surface.containers.add_itemRemoved(this._onSurfaceContainerRemoved);
this._surface.containers.forEach((containers) => this._subscribeContainerEvents(containers));
}
get safetyLinesContainers() {
if (this._containers == null)
this._containers = this._buildSafetyLinesContainers();
return this._containers;
}
get visible() {
return this._visible;
}
set visible(value) {
if (this._visible === value)
return;
this._visible = value;
if (this._containers != null) {
let changed = false;
for (let c of this._containers) {
if (c.visible === this._visible)
continue;
c.visible = this._visible;
changed = true;
}
if (changed)
this._visibilityChangedEvent.notify();
}
}
addChanged(h) {
this._changedEvent.add(h);
}
removeChanged(h) {
this._changedEvent.remove(h);
}
addVisibilityChanged(listener) {
this._visibilityChangedEvent.add(listener);
}
removeVisibilityChanged(listener) {
this._visibilityChangedEvent.remove(listener);
}
_clearCurrentSafetyLinesContainers() {
this._containers = null;
}
_subscribePrintAreaEvents(printArea) {
printArea.safetyLines.add_itemAdded(this._onSafetyLinesCollectionAdded);
printArea.safetyLines.add_itemRemoved(this._onSafetyLinesCollectionRemoved);
printArea.safetyLines.forEach((safetyLine) => this._subscribeSafetyLineEvents(safetyLine));
printArea.addPropertyChanged(this._onPrintAreaPropertyChangedDebounce);
}
_unsubscribePrintAreaEvents(printArea) {
printArea.safetyLines.forEach((safetyLine) => this._unsubscribeSafetyLineEvents(safetyLine));
printArea.safetyLines.remove_itemAdded(this._onSafetyLinesCollectionAdded);
printArea.safetyLines.remove_itemRemoved(this._onSafetyLinesCollectionRemoved);
printArea.removePropertyChanged(this._onPrintAreaPropertyChangedDebounce);
}
_subscribeSafetyLineEvents(safetyLine) {
safetyLine.addPropertyChanged(this._onSafetyLinePropertyChanged);
}
_unsubscribeSafetyLineEvents(safetyLine) {
safetyLine.removePropertyChanged(this._onSafetyLinePropertyChanged);
}
_subscribeContainerEvents(container) {
container.addPropertyChanged(this._onPrintAreaPropertyChangedDebounce);
}
_unsubscribeContainerEvents(container) {
container.removePropertyChanged(this._onPrintAreaPropertyChangedDebounce);
}
_buildSafetyLinesContainers() {
const result = new Collection();
const bleedConf = this._printZoneConf.bleed;
const trimConf = this._printZoneConf.trim;
const regionConf = this._printZoneConf.region;
if (this.surface == null)
return result;
for (let printArea of this.surface.printAreas) {
if (printArea.safetyLines != null) {
for (let safetyLine of printArea.safetyLines) {
const container = this._createContainer(`SafetyLines[${printArea.name}]`);
const item = this._createDashedRectangleFromSafetyLine(printArea.bounds, safetyLine);
container.items.add(item);
result.add(container);
}
}
if (!printArea.bleed.isEmpty && bleedConf.visible)
this._addSafetyLineContainer(result, printArea.name, printArea.getBounds(PrintAreaBoundsType.Bleed), bleedConf.width, bleedConf.step, bleedConf.color, "bleed", bleedConf.altColor);
if ((!printArea.slug.isEmpty || !printArea.bleed.isEmpty) && trimConf.visible)
this._addSafetyLineContainer(result, printArea.name, printArea.bounds, trimConf.width, trimConf.step, trimConf.color, "trim", trimConf.altColor);
}
if (regionConf.visible) {
this.surface.containers.where(c => c.region != null).forEach(c => {
this._addSafetyLineContainer(result, c.name, c.region, regionConf.width, regionConf.step, regionConf.color, "region");
});
}
return result;
}
_addSafetyLineContainer(collection, name, bounds, width, step, color, propName, altColor) {
const container = this._createContainer(`${propName.charAt(0).toUpperCase() + propName.slice(1)}[${name}]`);
collection.add(container);
const item = this._createDashedRect(bounds, width, step, this._colorParser.parse(color), propName, altColor && this._colorParser.parse(altColor));
container.items.add(item);
}
_createContainer(name) {
const container = new Container();
container.locked = true;
container.name = `Bleed[${name}]`;
container.visible = this._visible;
return container;
}
_createDashedRectangleFromSafetyLine(bounds, safetyLine) {
const rectangle = safetyLine.getRectangle(bounds);
const radiuses = safetyLine.getCornerRadiuses(bounds);
return this._createDashedRect(rectangle, safetyLine.widthPx, safetyLine.stepPx, safetyLine.color, safetyLine.name, safetyLine.altColor, radiuses);
}
_createDashedRect(bounds, width, step, color, name, altColor, radiuses) {
const path = Path.roundedRectangle(bounds.left, bounds.top, bounds.width, bounds.height, radiuses);
const shapeItem = new ShapeItem(path);
(shapeItem.name = `${SafetyLinesHandler.handlerPrefix}_${name}_shape`), (shapeItem.borderColor = color);
shapeItem.fillColor = this._colorParser.parse("transparent");
shapeItem.fixedBorderWidth = true;
shapeItem.borderWidth = width;
if (altColor != null)
shapeItem.altBorderColor = altColor;
shapeItem.dash = [step, 3];
return shapeItem;
}
dispose() {
if (this._surface == null)
return;
this._surface.printAreas.remove_itemAdded(this._onPrintAreaAdded);
this._surface.printAreas.remove_itemRemoved(this._onPrintAreaRemoved);
this._surface.printAreas.forEach((printArea) => this._unsubscribePrintAreaEvents(printArea));
this._surface.containers.remove_itemAdded(this._onSurfaceContainerAdded);
this._surface.containers.remove_itemRemoved(this._onSurfaceContainerRemoved);
this._surface.containers.forEach((containers) => this._unsubscribeContainerEvents(containers));
}
static _getDefaultPrintZoneConfig() {
return {
bleed: {
color: "rgb(255, 0, 0)",
altColor: "rgb(255, 0, 0)",
step: 1,
width: 1,
visible: true
},
trim: {
color: "rgb(255, 0, 0)",
step: 5,
width: 1,
visible: true
},
region: {
color: "rgb(74, 255, 255)",
altColor: "rgb(255, 0, 0)",
step: 5,
width: 1,
visible: false
}
};
}
}
SafetyLinesHandler.handlerPrefix = "$SAFETY_LINE";
SafetyLinesHandler.isSafetyLineItemHandler = (h) => h.name.startsWith(SafetyLinesHandler.handlerPrefix);
//# sourceMappingURL=SafetyLinesHandler.js.map