@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
110 lines • 11.6 kB
JavaScript
import { ViolationState } from "./Violations/Violation";
import { PlaceholderItem, ImageItem } from "@aurigma/design-atoms-model/Product/Items";
import { ViolationViewController } from "./ViolationViewController";
import { SurfaceContainer } from "@aurigma/design-atoms-model/Product/Container";
var CanvasViolationVisualizer = /** @class */ (function () {
function CanvasViolationVisualizer(canvas, _conf, violationService, _violationServiceFactory, _productHandler, _messages, _eventManager) {
var _this = this;
this._conf = _conf;
this._violationServiceFactory = _violationServiceFactory;
this._productHandler = _productHandler;
this._messages = _messages;
this._eventManager = _eventManager;
this._onViolationViewChanged = function (args) {
var item = args.item;
var itemHandler = _this._productHandler.getHandler(item);
if (itemHandler == null)
return;
var title = args.messages != null ? (args.messages.length === 1 ? args.messages[0] : _this._messages.moreThanOneWarning) : null;
switch (args.state) {
case ViolationState.Good:
itemHandler.setGoodViolationIcon("");
break;
case ViolationState.Warning:
itemHandler.setWarningViolationIcon(title);
break;
case ViolationState.Bad:
itemHandler.setBadViolationIcon(title);
break;
case ViolationState.None:
itemHandler.setNoneViolationIcon();
break;
}
};
this._onItemDpiChanged = function (value) {
var item = value.item;
if (!(item instanceof PlaceholderItem || item instanceof ImageItem))
return;
var imageItem = item instanceof PlaceholderItem ? (item.content instanceof ImageItem ? item.imageContent : null) : item;
if (imageItem == null)
return;
var placeholderOrImageItemHandler = _this._productHandler.getHandler(item);
var itemDpi = Math.round(value.newValue);
var targetDpi = _this._getTargetDpiForItem(item);
var levels = _this._conf.qualityMeter.qualityLevels;
var text = _this._getQualityChangeInfoBarText(itemDpi, targetDpi, levels);
placeholderOrImageItemHandler.setQualityChangeInfoBarText(text);
var progress = _this._getQualityChangeScaleBarProgress(itemDpi, targetDpi, levels, value.state);
placeholderOrImageItemHandler.setQualityChangeScaleBarWidth(progress);
_this._setScaleBarClass(value.state, levels, placeholderOrImageItemHandler);
};
canvas.violationWarningButtonsEnabled = _conf.violationWarningButtonsEnabled;
canvas.qualityChangeContainersEnabled = _conf.qualityChangeContainersEnabled;
if (!this._conf.qualityChangeContainersEnabled && !this._conf.violationWarningButtonsEnabled)
return;
this._addStyles();
if (canvas.violationWarningButtonsEnabled) {
this._violationViewController = new ViolationViewController(violationService);
this._violationViewController.addViolationViewChanged(this._onViolationViewChanged);
}
if (this._conf.qualityChangeContainersEnabled)
this._eventManager.addImageDpiChanged(this._onItemDpiChanged);
}
CanvasViolationVisualizer.prototype._getTargetDpiForItem = function (item) {
var _a, _b;
if (item.parentContainer instanceof SurfaceContainer) {
return (_b = (_a = item.parentContainer.printingTechniqueConstraints) === null || _a === void 0 ? void 0 : _a.targetDpi) !== null && _b !== void 0 ? _b : this._violationServiceFactory.renderingDpi;
}
return this._violationServiceFactory.renderingDpi;
};
CanvasViolationVisualizer.prototype._getQualityChangeInfoBarText = function (value, renderingDpi, levels) {
var targetDpi = Math.round((levels.warning / 100) * renderingDpi);
return value + "/" + targetDpi + " dpi";
};
CanvasViolationVisualizer.prototype._getQualityChangeScaleBarProgress = function (value, renderingDpi, levels, state) {
var isBadState = state === ViolationState.Bad;
var levelsEquality = levels.bad === levels.warning;
var leftDpiLimit = (levelsEquality ? levels.bad * 0.5 : isBadState ? levels.bad - (levels.warning - levels.bad) : levels.bad) * (renderingDpi / 100);
var targetLevelDpi = Math.round(((isBadState ? levels.bad : levels.warning) / 100) * renderingDpi);
return (1 - (targetLevelDpi - value) / (targetLevelDpi - leftDpiLimit)) * 100;
};
CanvasViolationVisualizer.prototype._setScaleBarClass = function (state, levels, placeholderOrImageItemHandler) {
var isBadState = state === ViolationState.Bad;
var levelsEquality = levels.bad === levels.warning;
if (levelsEquality) {
placeholderOrImageItemHandler.setBadToGoodChangeScaleBarClass();
}
else {
if (isBadState) {
placeholderOrImageItemHandler.setBadToWarningChangeScaleBarClass();
}
else {
placeholderOrImageItemHandler.setWarningToGoodChangeScaleBarClass();
}
}
};
CanvasViolationVisualizer.prototype._addStyles = function () {
var violationServiceStyle = document.createElement("style");
violationServiceStyle.type = "text/css";
violationServiceStyle.innerHTML = "#cvWhitespace .da-quality-change-container {\n padding: 2px;\n margin: 4px;\n background-color: rgba(97, 97, 97, 0.9);\n height: 24px;\n z-index: -2;\n min-width: 76px;\n flex-direction: column; \n display: none;\n }\n #cvWhitespace .da-quality-change-container.buttonsShown {\n display: flex;\n }\n #cvWhitespace .da-quality-change-container .da-quality-change-scale-bar {\n width: 72px;\n height: 4px;\n position: relative;\n transition: width 0.1s linear;\n }\n #cvWhitespace .da-quality-change-container .da-quality-change-scale-bar.da-no-animation {\n transition: none;\n }\n #cvWhitespace .da-quality-change-container .da-quality-change-scale-bar:before {\n position: absolute;\n content: \"\";\n width: 72px;\n height: 4px;\n z-index: -1;\n }\n #cvWhitespace .da-quality-change-container .da-quality-change-scale-bar.da-bad-to-warning {\n background-color: #FFB300;\n }\n #cvWhitespace .da-quality-change-container .da-quality-change-scale-bar.da-bad-to-warning:before {\n background-color: red;\n }\n #cvWhitespace .da-quality-change-container .da-quality-change-scale-bar.da-warning-to-good {\n background-color: lawngreen;\n }\n #cvWhitespace .da-quality-change-container .da-quality-change-scale-bar.da-warning-to-good:before {\n background-color: #FFB300;\n }\n #cvWhitespace .da-quality-change-container .da-quality-change-scale-bar.da-bad-to-good {\n background-color: lawngreen;\n }\n #cvWhitespace .da-quality-change-container .da-quality-change-scale-bar.da-bad-to-good:before {\n background-color: red;\n }\n #cvWhitespace .da-quality-change-container .da-quality-change-info-bar {\n font-family: 'Roboto';\n font-weight: 500;\n font-size: 8pt;\n color: white;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 1;\n }\n #cvWhitespace .da-violation-container {\n display: flex;\n align-items: center;\n pointer-events: none;\n }\n #cvWhitespace .da-violation-icon { \n text-shadow: none;\n padding: 0; \n background: transparent;\n border: none;\n visibility: hidden;\n outline: none !important;\n pointer-events: none !important;\n width: 32px;\n height: 32px;\n }\n .da-quality-change-container.buttonsShown ~ .da-violation-icon {\n width: 0 !important;\n height: 0 !important;\n opacity: 0;\n }\n #cvWhitespace .da-violation-icon svg {\n width: 100%;\n height: 100%;\n transform: scale(0.8);\n transition: opacity 0.25s ease-in-out, transform 0.25s linear, color 0.25s linear;\n display: none;\n }\n #cvWhitespace .da-violation-icon.da-violation-icon-bad,\n #cvWhitespace .da-violation-icon.da-violation-icon-warning,\n #cvWhitespace .da-violation-icon.da-violation-icon-good {\n display: flex;\n }\n #cvWhitespace .da-violation-icon.da-violation-icon-warning,\n #cvWhitespace .da-violation-icon.da-violation-icon-bad {\n pointer-events: auto !important;\n }\n #cvWhitespace .da-violation-icon.da-violation-icon-good .good-svg {\n opacity: 1;\n display: flex;\n }\n #cvWhitespace .da-violation-icon.da-violation-icon-bad .warning-svg {\n opacity: 0.75;\n color: red;\n display: flex;\n }\n #cvWhitespace .da-violation-icon.da-violation-icon-bad:active .warning-svg {\n color: #da0000;\n }\n #cvWhitespace .da-violation-icon.da-violation-icon-warning .warning-svg {\n display: flex;\n color: #FFB300;\n opacity: 0.55;\n }\n #cvWhitespace .da-violation-icon.da-violation-icon-warning:active .warning-svg {\n color: #da8f00;\n }\n #cvWhitespace .da-violation-icon.da-violation-icon-good .good-svg {\n opacity: 1;\n color: lawngreen;\n }\n #cvWhitespace .da-violation-icon.da-violation-icon-good:active .good-svg {\n color: #63c900;\n }\n #cvWhitespace .da-violation-icon.active svg,\n #cvWhitespace .da-violation-icon.active svg {\n opacity: 1 !important;\n }\n #cvWhitespace .da-violation-icon:active svg,\n #cvWhitespace .da-violation-icon:hover svg,\n #cvWhitespace .da-violation-icon:active svg,\n #cvWhitespace .da-violation-icon:hover svg {\n opacity: 1 !important;\n transform: scale(1);\n }";
document.head.appendChild(violationServiceStyle);
};
CanvasViolationVisualizer.prototype.dispose = function () {
var _a, _b;
(_a = this._violationViewController) === null || _a === void 0 ? void 0 : _a.removeViolationViewChanged(this._onViolationViewChanged);
(_b = this._eventManager) === null || _b === void 0 ? void 0 : _b.removeImageDpiChanged(this._onItemDpiChanged);
};
return CanvasViolationVisualizer;
}());
export { CanvasViolationVisualizer };
//# sourceMappingURL=CanvasViolationVisualizer.js.map