@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
239 lines • 11.2 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";
export class CanvasViolationVisualizer {
constructor(canvas, _conf, violationService, _violationServiceFactory, _productHandler, _messages, _eventManager) {
this._conf = _conf;
this._violationServiceFactory = _violationServiceFactory;
this._productHandler = _productHandler;
this._messages = _messages;
this._eventManager = _eventManager;
this._onViolationViewChanged = (args) => {
const item = args.item;
const itemHandler = this._productHandler.getHandler(item);
if (itemHandler == null)
return;
const 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 = (value) => {
const item = value.item;
if (!(item instanceof PlaceholderItem || item instanceof ImageItem))
return;
const imageItem = item instanceof PlaceholderItem ? (item.content instanceof ImageItem ? item.imageContent : null) : item;
if (imageItem == null)
return;
const placeholderOrImageItemHandler = this._productHandler.getHandler(item);
const itemDpi = Math.round(value.newValue);
const targetDpi = this._getTargetDpiForItem(item);
const levels = this._conf.qualityMeter.qualityLevels;
const text = this._getQualityChangeInfoBarText(itemDpi, targetDpi, levels);
placeholderOrImageItemHandler.setQualityChangeInfoBarText(text);
const 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);
}
_getTargetDpiForItem(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;
}
_getQualityChangeInfoBarText(value, renderingDpi, levels) {
const targetDpi = Math.round((levels.warning / 100) * renderingDpi);
return `${value}/${targetDpi} dpi`;
}
_getQualityChangeScaleBarProgress(value, renderingDpi, levels, state) {
const isBadState = state === ViolationState.Bad;
const levelsEquality = levels.bad === levels.warning;
const leftDpiLimit = (levelsEquality ? levels.bad * 0.5 : isBadState ? levels.bad - (levels.warning - levels.bad) : levels.bad) * (renderingDpi / 100);
const targetLevelDpi = Math.round(((isBadState ? levels.bad : levels.warning) / 100) * renderingDpi);
return (1 - (targetLevelDpi - value) / (targetLevelDpi - leftDpiLimit)) * 100;
}
_setScaleBarClass(state, levels, placeholderOrImageItemHandler) {
const isBadState = state === ViolationState.Bad;
const levelsEquality = levels.bad === levels.warning;
if (levelsEquality) {
placeholderOrImageItemHandler.setBadToGoodChangeScaleBarClass();
}
else {
if (isBadState) {
placeholderOrImageItemHandler.setBadToWarningChangeScaleBarClass();
}
else {
placeholderOrImageItemHandler.setWarningToGoodChangeScaleBarClass();
}
}
}
_addStyles() {
const violationServiceStyle = document.createElement("style");
violationServiceStyle.type = "text/css";
violationServiceStyle.innerHTML = `#cvWhitespace .da-quality-change-container {
padding: 2px;
margin: 4px;
background-color: rgba(97, 97, 97, 0.9);
height: 24px;
z-index: -2;
min-width: 76px;
flex-direction: column;
display: none;
}
#cvWhitespace .da-quality-change-container.buttonsShown {
display: flex;
}
#cvWhitespace .da-quality-change-container .da-quality-change-scale-bar {
width: 72px;
height: 4px;
position: relative;
transition: width 0.1s linear;
}
#cvWhitespace .da-quality-change-container .da-quality-change-scale-bar.da-no-animation {
transition: none;
}
#cvWhitespace .da-quality-change-container .da-quality-change-scale-bar:before {
position: absolute;
content: "";
width: 72px;
height: 4px;
z-index: -1;
}
#cvWhitespace .da-quality-change-container .da-quality-change-scale-bar.da-bad-to-warning {
background-color: #FFB300;
}
#cvWhitespace .da-quality-change-container .da-quality-change-scale-bar.da-bad-to-warning:before {
background-color: red;
}
#cvWhitespace .da-quality-change-container .da-quality-change-scale-bar.da-warning-to-good {
background-color: lawngreen;
}
#cvWhitespace .da-quality-change-container .da-quality-change-scale-bar.da-warning-to-good:before {
background-color: #FFB300;
}
#cvWhitespace .da-quality-change-container .da-quality-change-scale-bar.da-bad-to-good {
background-color: lawngreen;
}
#cvWhitespace .da-quality-change-container .da-quality-change-scale-bar.da-bad-to-good:before {
background-color: red;
}
#cvWhitespace .da-quality-change-container .da-quality-change-info-bar {
font-family: 'Roboto';
font-weight: 500;
font-size: 8pt;
color: white;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
#cvWhitespace .da-violation-container {
display: flex;
align-items: center;
pointer-events: none;
}
#cvWhitespace .da-violation-icon {
text-shadow: none;
padding: 0;
background: transparent;
border: none;
visibility: hidden;
outline: none !important;
pointer-events: none !important;
width: 32px;
height: 32px;
}
.da-quality-change-container.buttonsShown ~ .da-violation-icon {
width: 0 !important;
height: 0 !important;
opacity: 0;
}
#cvWhitespace .da-violation-icon svg {
width: 100%;
height: 100%;
transform: scale(0.8);
transition: opacity 0.25s ease-in-out, transform 0.25s linear, color 0.25s linear;
display: none;
}
#cvWhitespace .da-violation-icon.da-violation-icon-bad,
#cvWhitespace .da-violation-icon.da-violation-icon-warning,
#cvWhitespace .da-violation-icon.da-violation-icon-good {
display: flex;
}
#cvWhitespace .da-violation-icon.da-violation-icon-warning,
#cvWhitespace .da-violation-icon.da-violation-icon-bad {
pointer-events: auto !important;
}
#cvWhitespace .da-violation-icon.da-violation-icon-good .good-svg {
opacity: 1;
display: flex;
}
#cvWhitespace .da-violation-icon.da-violation-icon-bad .warning-svg {
opacity: 0.75;
color: red;
display: flex;
}
#cvWhitespace .da-violation-icon.da-violation-icon-bad:active .warning-svg {
color: #da0000;
}
#cvWhitespace .da-violation-icon.da-violation-icon-warning .warning-svg {
display: flex;
color: #FFB300;
opacity: 0.55;
}
#cvWhitespace .da-violation-icon.da-violation-icon-warning:active .warning-svg {
color: #da8f00;
}
#cvWhitespace .da-violation-icon.da-violation-icon-good .good-svg {
opacity: 1;
color: lawngreen;
}
#cvWhitespace .da-violation-icon.da-violation-icon-good:active .good-svg {
color: #63c900;
}
#cvWhitespace .da-violation-icon.active svg,
#cvWhitespace .da-violation-icon.active svg {
opacity: 1 !important;
}
#cvWhitespace .da-violation-icon:active svg,
#cvWhitespace .da-violation-icon:hover svg,
#cvWhitespace .da-violation-icon:active svg,
#cvWhitespace .da-violation-icon:hover svg {
opacity: 1 !important;
transform: scale(1);
}`;
document.head.appendChild(violationServiceStyle);
}
dispose() {
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);
}
}
//# sourceMappingURL=CanvasViolationVisualizer.js.map