@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
289 lines • 14.2 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 { toTextWhizzPath, fromTextWhizzPath } from "@aurigma/design-atoms-text/Utils";
import { debounce } from "@aurigma/design-atoms-model/Utils/debounce";
export class SafetyLinesHandler {
constructor(conf, colorParser, textWhizz) {
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;
this._textWhizz = textWhizz;
}
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._printZoneConf.printArea = Object.assign(Object.assign({}, defaultConfig.printArea), ((value === null || value === void 0 ? void 0 : value.printArea) || {}));
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 printAreaConf = this._printZoneConf.printArea;
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) {
const bleedPath = this._createBleedPath(printArea);
this._addSafetyLineContainer(result, printArea.name, bleedPath, bleedConf.width, bleedConf.step, bleedConf.color, "bleed", bleedConf.altColor);
}
if (printAreaConf.visible && !(!printArea.slug.isEmpty && trimConf.visible) && (printArea.bleed.isEmpty || !bleedConf.visible)) {
const defStyles = printAreaConf.default;
const bleedPath = this._createBleedPath(printArea);
this._addSafetyLineContainer(result, printArea.name, bleedPath, defStyles.width, defStyles.step, defStyles.color, "print-area", defStyles.altColor);
}
if (!printArea.slug.isEmpty && trimConf.visible) {
this._addSafetyLineContainer(result, printArea.name, printArea.shape, trimConf.width, trimConf.step, trimConf.color, "trim", trimConf.altColor);
}
}
if (regionConf.visible) {
this.surface.containers.where(c => c.region != null).forEach(c => {
const regionPath = Path.roundedRectangle(c.region.left, c.region.top, c.region.width, c.region.height, null);
this._addSafetyLineContainer(result, c.name, regionPath, regionConf.width, regionConf.step, regionConf.color, "region");
});
}
return result;
}
_addSafetyLineContainer(collection, name, path, width, step, color, propName, altColor) {
const container = this._createContainer(`${propName.charAt(0).toUpperCase() + propName.slice(1)}[${name}]`);
collection.add(container);
const item = this._createDashedRect(path, 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);
const path = Path.roundedRectangle(rectangle.left, rectangle.top, rectangle.width, rectangle.height, radiuses);
return this._createDashedRect(path, safetyLine.widthPx, safetyLine.stepPx, safetyLine.color, safetyLine.name, safetyLine.altColor);
}
_createDashedRect(path, width, step, color, name, altColor) {
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;
}
_createBleedPath(printArea) {
var _a, _b;
if (printArea.isRectangle) {
const { width, height, top, left } = printArea.bounds.getExpanded(printArea.bleed);
return Path.rectangle(left, top, width, height);
}
else {
const twPrintAreaShape = toTextWhizzPath(this._textWhizz.module, printArea.shape);
const bleedOffset = (_b = (_a = printArea.bleed) === null || _a === void 0 ? void 0 : _a.top) !== null && _b !== void 0 ? _b : 0;
twPrintAreaShape.offsetContour(bleedOffset);
return fromTextWhizzPath(twPrintAreaShape);
}
}
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
},
printArea: {
default: {
color: "rgb(255, 0, 255)",
altColor: "rgba(0, 0, 0, 0)",
step: 8,
width: 1,
},
visible: false
}
};
}
}
SafetyLinesHandler.handlerPrefix = "$SAFETY_LINE";
SafetyLinesHandler.isSafetyLineItemHandler = (h) => h.name.startsWith(SafetyLinesHandler.handlerPrefix);
//# sourceMappingURL=SafetyLinesHandler.js.map