@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
942 lines • 44.6 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __spread = (this && this.__spread) || function () {
for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
return ar;
};
import { ShapeItemHandler } from "./ShapeItemHandler";
import { RectangleF, RotatedRectangleF, Path, normalizeAngle, EqualsOfFloatNumbers } from "@aurigma/design-atoms-model/Math";
import { ContentType } from "./ContentType";
import { Permission } from "../Permission";
import { Graphics } from "../Graphics";
import { RgbColor, RgbColors } from "@aurigma/design-atoms-model/Colors";
import { EventWithSenderArg, EventObject } from "@aurigma/design-atoms-model/EventObject";
import { PlaceholderHandlerData } from "./PlaceholderHandlerData";
import { ResizeMode, ResizeGripsPermissions } from "@aurigma/design-atoms-model/Product/Items";
// ReSharper disable once InconsistentNaming
var PlaceholderItemHandler = /** @class */ (function (_super) {
__extends(PlaceholderItemHandler, _super);
function PlaceholderItemHandler(item, textWhizz, apiClient, colorPreviewService) {
if (textWhizz === void 0) { textWhizz = null; }
var _this = _super.call(this, PlaceholderItemHandler._getItemPath(item), item, textWhizz, apiClient, colorPreviewService) || this;
_this._previousRectangle = null;
_this._isEditingChangedEvent = new EventObject();
_this._selectButtonClickEvent = new EventWithSenderArg();
_this._content = null;
_this._topFrames = [];
_this._bottomFrames = [];
_this._editing = false;
_this._showMaskedContent = true;
_this._isContentUpdating = false;
_this._placeholderButtonGroup = null;
_this._editButtonGroup = null;
_this._doneButtonGroup = null;
_this._selectButton = null;
_this._doneButton = null;
_this._handleButton = null;
_this._qualityChangeContainer = null;
_this._qualityChangeScaleBar = null;
_this._qualityChangeInfoBar = null;
_this._forceQualityChangeInfoBar = false;
_this._emptyPlaceholderBorderColor = new RgbColor(204, 204, 204, 255);
_this._emptyPlaceholderBorderWidth = 1;
_this._imageIsLoading = false;
_this.onHandleButtonClick = function () {
var _a;
_this.editing = true;
(_a = _this.canvas) === null || _a === void 0 ? void 0 : _a.updatePlaceholderButtonGroup(_this);
};
_this.onDoneButtonClick = function () {
var _a;
_this.editing = false;
(_a = _this.canvas) === null || _a === void 0 ? void 0 : _a.setSelectedItemHandlers([_this]);
};
_this._onContentReady = function () {
_this._dispatchReadyEvent();
};
_this._selectButtonClickHandler = _this._onSelectButtonClick.bind(_this);
return _this;
}
PlaceholderItemHandler.prototype.isHighlightNeeded = function () {
return this.editing;
};
Object.defineProperty(PlaceholderItemHandler.prototype, "imageIsLoading", {
get: function () {
return this._imageIsLoading;
},
set: function (condition) {
this._imageIsLoading = condition;
this._onImageIsLoadingChanged();
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItemHandler.prototype, "item", {
get: function () {
return this._getItem();
},
set: function (item) {
_super.prototype._setItem.call(this, item);
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItemHandler.prototype, "previousRectangle", {
get: function () {
return this._previousRectangle;
},
set: function (value) {
this._previousRectangle = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItemHandler.prototype, "content", {
get: function () {
return this._content;
},
set: function (value) {
var canvas = this.canvas;
if (canvas != null && !this.isStubOrEmpty()) {
canvas.removeViolationContainer(this._content);
}
var oldContent = this._content;
oldContent === null || oldContent === void 0 ? void 0 : oldContent.removeReady(this._onContentReady);
this._content = value;
if (this._content != null) {
this._content.layer = this.layer;
this._content.parentPlaceholder = this;
this._content.contentType = ContentType.PlaceholderContent;
this._content.addReady(this._onContentReady);
}
if (canvas != null) {
this._reloadPlaceholderButtons();
if (this._content == null)
return;
this._content.canvas = canvas;
if (oldContent && oldContent != this._content)
this.canvas.deleteItemHandler(oldContent);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItemHandler.prototype, "topFrames", {
get: function () {
return this._topFrames;
},
set: function (v) {
var _this = this;
this._topFrames = v;
this._updateTopFrames(function (handler) {
handler.contentType = ContentType.TopFrame;
handler.layer = _this.layer;
handler.parentPlaceholder = _this;
handler.canvas = _this.canvas;
});
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItemHandler.prototype, "bottomFrames", {
get: function () {
return this._bottomFrames;
},
set: function (v) {
var _this = this;
this._bottomFrames = v;
this._updateBottomFrames(function (handler) {
handler.contentType = ContentType.BottomFrame;
handler.layer = _this.layer;
handler.parentPlaceholder = _this;
handler.canvas = _this.canvas;
});
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItemHandler.prototype, "editing", {
get: function () {
return !this.isStubOrEmpty() && this._editing;
},
set: function (value) {
if (this._editing === value)
return;
if (value && !this.getPermissions().allowEditContent && this.isStubOrEmpty())
return;
this._editing = value;
this.raiseChanged();
this._isEditingChangedEvent.notify(this);
if (this.canvas == null)
return;
this.canvas.updateSelection();
this.canvas.updatePlaceholderButtonGroup(this);
this.canvas.redraw();
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItemHandler.prototype, "showMaskedContent", {
get: function () {
return this._showMaskedContent;
},
set: function (value) {
this._showMaskedContent = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItemHandler.prototype, "isQualityChangeBarEmpty", {
get: function () {
var canvas = this.canvas;
if (this._qualityChangeScaleBar == null || canvas == null)
return true;
if (this._qualityChangeScaleBar.className === this.canvas.qualityChangeScaleBarCssClass)
return true;
return false;
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItemHandler.prototype, "qualityChangeScaleBar", {
get: function () {
return this._qualityChangeScaleBar;
},
set: function (v) {
this._qualityChangeScaleBar = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItemHandler.prototype, "qualityChangeInfoBar", {
get: function () {
return this._qualityChangeInfoBar;
},
set: function (v) {
this._qualityChangeInfoBar = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItemHandler.prototype, "qualityChangeContainer", {
get: function () {
return this._qualityChangeContainer;
},
set: function (v) {
this._qualityChangeContainer = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItemHandler.prototype, "forceQualityChangeInfoBar", {
get: function () {
return this._forceQualityChangeInfoBar;
},
set: function (v) {
this._forceQualityChangeInfoBar = v;
var canvas = this.canvas;
if (canvas != null) {
canvas.updateViolationContainer(this);
}
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItemHandler.prototype, "placeholderButtonGroup", {
get: function () {
return this._placeholderButtonGroup;
},
set: function (v) {
this._placeholderButtonGroup = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItemHandler.prototype, "doneButtonGroup", {
get: function () {
return this._doneButtonGroup;
},
set: function (v) {
this._doneButtonGroup = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItemHandler.prototype, "selectButton", {
get: function () {
return this._selectButton;
},
set: function (v) {
this._selectButton = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItemHandler.prototype, "doneButton", {
get: function () {
return this._doneButton;
},
set: function (v) {
this._doneButton = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItemHandler.prototype, "handleButton", {
get: function () {
return this._handleButton;
},
set: function (v) {
this._handleButton = v;
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItemHandler.prototype, "selectButtonClickHandler", {
get: function () {
return this._selectButtonClickHandler;
},
enumerable: true,
configurable: true
});
Object.defineProperty(PlaceholderItemHandler.prototype, "editButtonGroup", {
get: function () {
return this._editButtonGroup;
},
set: function (v) {
this._editButtonGroup = v;
},
enumerable: true,
configurable: true
});
PlaceholderItemHandler.prototype.addIsEditingChanged = function (listener) {
this._isEditingChangedEvent.add(listener);
};
PlaceholderItemHandler.prototype.removeIsEditingChanged = function (listener) {
this._isEditingChangedEvent.remove(listener);
};
PlaceholderItemHandler.prototype.quickUpdate = function () {
if (this.isVisible())
this.update();
if (this.canvas != null)
this.canvas.updatePlaceholderButtonGroup(this);
};
PlaceholderItemHandler.prototype.getContentScale = function () {
if (this.isStubOrEmpty())
return null;
var placeholderRect = this.getTransformedRectangle(false);
var imageRect = this.content.getTransformedRectangle(false);
//If the content is rotated at 90 degrees, Width and Height change places.
var rotated = normalizeAngle(placeholderRect.angle - imageRect.angle) === 90
|| normalizeAngle(placeholderRect.angle - imageRect.angle) === 270;
var widthRatio = rotated ? imageRect.height / placeholderRect.width : imageRect.width / placeholderRect.width;
var heightRatio = rotated ? imageRect.width / placeholderRect.height : imageRect.height / placeholderRect.height;
if (this.item.contentResizeMode === ResizeMode.Fit)
return Math.max(widthRatio, heightRatio) * 100;
else
return Math.min(widthRatio, heightRatio) * 100;
};
PlaceholderItemHandler.prototype.setContentScale = function (value) {
if (this.isStubOrEmpty())
return;
var imageRect = this.content.getTransformedRectangle(false);
var targetScale = value / this.getContentScale();
this.content
.setTransformedRectangle(new RotatedRectangleF(imageRect.centerX, imageRect.centerY, imageRect.width * targetScale, imageRect.height * targetScale, imageRect.angle));
this.raiseChanging(this.item);
this.canvas.redraw();
};
PlaceholderItemHandler.prototype.resetContent = function () {
if (this.isStubOrEmpty())
return;
var placeholderRect = this.getTransformedRectangle(false);
var imageRect = this.content.getTransformedRectangle(false);
var currentScale = 100 / this.getContentScale();
//If the content is rotated at 90 degrees, Width and Height change places.
var rotated = normalizeAngle(placeholderRect.angle - imageRect.angle) === 90
|| normalizeAngle(placeholderRect.angle - imageRect.angle) === 270;
//In case of arbitrary resize
var contentItem = this.content.item;
var currentRatio = rotated ? imageRect.height / imageRect.width : imageRect.width / imageRect.height;
var sourceRatio = contentItem.ratioWidthToHeight || (contentItem.sourceRectangle.width / contentItem.sourceRectangle.height);
var defaultScaleX = currentRatio < sourceRatio ? currentScale * (sourceRatio / currentRatio) : currentScale;
var defaultScaleY = currentRatio > sourceRatio ? currentScale * (currentRatio / sourceRatio) : currentScale;
var defWidth = rotated ? imageRect.height * defaultScaleX : imageRect.width * defaultScaleX;
var defHeight = rotated ? imageRect.width * defaultScaleY : imageRect.height * defaultScaleY;
var defScale = this.item.contentResizeMode === ResizeMode.Fit
? Math.min(placeholderRect.width / defWidth, placeholderRect.height / defHeight)
: Math.max(placeholderRect.width / defWidth, placeholderRect.height / defHeight);
this.content
.setTransformedRectangle(new RotatedRectangleF(placeholderRect.centerX, placeholderRect.centerY, defWidth * defScale, defHeight * defScale, placeholderRect.angle));
this.content.item.getItemChangedEvent().notify();
this.canvas.redraw();
};
PlaceholderItemHandler.prototype.getSelectToolbarButtonClickEvent = function () {
return this._selectButtonClickEvent;
};
PlaceholderItemHandler.prototype.getTopFrame = function (index) {
return this._topFrames != null ? this._topFrames[index] : null;
};
PlaceholderItemHandler.prototype.setTopFrame = function (index, v) {
v._contentType = ContentType.TopFrame;
v._layer = this.layer;
v._parentPlaceholder = this;
v.canvas = this.canvas;
this._topFrames[index] = v;
};
PlaceholderItemHandler.prototype.getBottomFrame = function (index) {
return this._bottomFrames != null ? this._bottomFrames[index] : null;
};
PlaceholderItemHandler.prototype.setBottomFrame = function (index, v) {
v._contentType = ContentType.BottomFrame;
v._layer = this.layer;
v._parentPlaceholder = this;
v.canvas = this.canvas;
this._bottomFrames[index] = v;
};
PlaceholderItemHandler.prototype.isEmptyContent = function () {
return this._content == null;
};
PlaceholderItemHandler.prototype.isStubOrEmpty = function () {
return this.item.isStubContent || this.isEmptyContent();
};
PlaceholderItemHandler.prototype.isCoverMode = function () {
return this.item.isCoverMode;
};
PlaceholderItemHandler.prototype.showEditButton = function () {
var baseValue = _super.prototype.showEditToolbarButton;
var contentValue = this.isStubOrEmpty() ? true : !this.item.imageContent.source.isVector;
return baseValue && contentValue;
};
PlaceholderItemHandler.prototype.showHandleToolbarButton = function () {
var perms = this.getPermissions();
return perms.allowEditContent && perms.showHandleToolbarButton && !this.isStubOrEmpty();
};
PlaceholderItemHandler.prototype.getPermissions = function (forcePermissionContent) {
if (!this.editing || (forcePermissionContent != null && forcePermissionContent))
return _super.prototype.getPermissions.call(this);
if (!this.isEmptyContent()) {
var result = this._content.getPermissions().clone();
//You cannot delete the content in the edit mode!
result.allowDelete = false;
return result;
}
return new Permission({}, false);
};
PlaceholderItemHandler.prototype.setBadToWarningChangeScaleBarClass = function () {
var canvas = this.canvas;
if (this._qualityChangeScaleBar == null || canvas == null)
return;
var oldClass = this._qualityChangeScaleBar.getAttribute("class");
var btwClassName = canvas.qualityBadToWarningChangeScaleBarCssClass;
if (btwClassName != null && btwClassName !== "")
this._qualityChangeScaleBar.classList.toggle(btwClassName, true);
var wtgClassName = canvas.qualityWarningToGoodChangeScaleBarCssClass;
if (wtgClassName != null && wtgClassName !== "")
this._qualityChangeScaleBar.classList.toggle(wtgClassName, false);
var btgwtgClassName = canvas.qualityBadToGoodChangeScaleBarCssClass;
if (btgwtgClassName != null && btgwtgClassName !== "")
this._qualityChangeScaleBar.classList.toggle(btgwtgClassName, false);
var naClassName = canvas.qualityNoAnimationChangeScaleBarCssClass;
if (naClassName != null && naClassName !== "")
this._qualityChangeScaleBar.classList.toggle(naClassName, this._qualityChangeScaleBar.getAttribute("class") !== oldClass);
this.canvas.updateViolationContainer(this);
};
PlaceholderItemHandler.prototype.setWarningToGoodChangeScaleBarClass = function () {
var canvas = this.canvas;
if (this._qualityChangeScaleBar == null || canvas == null)
return;
var oldClass = this._qualityChangeScaleBar.getAttribute("class");
var wtgClassName = canvas.qualityWarningToGoodChangeScaleBarCssClass;
if (wtgClassName != null && wtgClassName !== "")
this._qualityChangeScaleBar.classList.toggle(wtgClassName, true);
var btwClassName = canvas.qualityBadToWarningChangeScaleBarCssClass;
if (btwClassName != null && btwClassName !== "")
this._qualityChangeScaleBar.classList.toggle(btwClassName, false);
var btgwtgClassName = canvas.qualityBadToGoodChangeScaleBarCssClass;
if (btgwtgClassName != null && btgwtgClassName !== "")
this._qualityChangeScaleBar.classList.toggle(btgwtgClassName, false);
var naClassName = canvas.qualityNoAnimationChangeScaleBarCssClass;
if (naClassName != null && naClassName !== "")
this._qualityChangeScaleBar.classList.toggle(naClassName, this._qualityChangeScaleBar.getAttribute("class") !== oldClass);
this.canvas.updateViolationContainer(this);
};
PlaceholderItemHandler.prototype.setBadToGoodChangeScaleBarClass = function () {
var canvas = this.canvas;
if (this._qualityChangeScaleBar == null || canvas == null)
return;
var oldClass = this._qualityChangeScaleBar.getAttribute("class");
var btgwtgClassName = canvas.qualityBadToGoodChangeScaleBarCssClass;
if (btgwtgClassName != null && btgwtgClassName !== "")
this._qualityChangeScaleBar.classList.toggle(btgwtgClassName, true);
var btwClassName = canvas.qualityBadToWarningChangeScaleBarCssClass;
if (btwClassName != null && btwClassName !== "")
this._qualityChangeScaleBar.classList.toggle(btwClassName, false);
var wtgClassName = canvas.qualityWarningToGoodChangeScaleBarCssClass;
if (wtgClassName != null && wtgClassName !== "")
this._qualityChangeScaleBar.classList.toggle(wtgClassName, false);
var naClassName = canvas.qualityNoAnimationChangeScaleBarCssClass;
if (naClassName != null && naClassName !== "")
this._qualityChangeScaleBar.classList.toggle(naClassName, this._qualityChangeScaleBar.getAttribute("class") !== oldClass);
this.canvas.updateViolationContainer(this);
};
PlaceholderItemHandler.prototype.rotateContentLeft = function () {
this._rotateContent(-90);
};
PlaceholderItemHandler.prototype.rotateContentRight = function () {
this._rotateContent(90);
};
PlaceholderItemHandler.prototype.setRectangle = function (rectangle, suppressOnChanged, forcePlaceholderSet) {
this._previousRectangle = suppressOnChanged ? this.rectangle.clone() : null;
if (!this.editing || forcePlaceholderSet) {
_super.prototype.setRectangle.call(this, rectangle, suppressOnChanged);
}
else
this._content.setRectangle(rectangle, suppressOnChanged);
};
PlaceholderItemHandler.prototype.drawItemHandler = function (itemHandlerCtx) {
if (itemHandlerCtx == null)
return;
var drawFunc = function (handler) {
handler.drawItemHandler(itemHandlerCtx);
};
var drawMaskedContent = this.editing && this.showMaskedContent;
if (!drawMaskedContent) {
this._updateBottomFrames(drawFunc);
}
var gr = Graphics;
var path = this.originalPath;
var center = this.getControlCenter();
var transform = this.item.transform;
if (this.isEmptyContent()) {
if (this.imageIsLoading) {
this.canvas.drawWaitClock(itemHandlerCtx, this.bounds.center);
}
else {
_super.prototype.drawItemHandler.call(this, itemHandlerCtx);
}
if (EqualsOfFloatNumbers(0, this.item.borderWidth)) {
gr.drawPath(itemHandlerCtx, path, center, transform, this._emptyPlaceholderBorderWidth, this._emptyPlaceholderBorderColor.toString(), 1);
}
}
else if (this._areColorPreviewsReady) {
if (drawMaskedContent) {
this._content.drawMaskedContent(itemHandlerCtx);
}
var opacity = this.isNormalRenderingType ? this.item.opacity : 1;
itemHandlerCtx.save();
var transformedPath = this._getTransformedPath();
gr.clipPath(itemHandlerCtx, transformedPath);
if (this.item.mask != null && this.item.mask.vectorMask != null) {
var vectorMaskPath = this._getTransformedClippingPath();
gr.clipPath(itemHandlerCtx, vectorMaskPath);
}
if (path != null) {
var fillColorPreview = this._getItemColorPreviews().fillColorPreview;
gr.fillPath(itemHandlerCtx, path, center, transform, fillColorPreview === null || fillColorPreview === void 0 ? void 0 : fillColorPreview.toString(), opacity);
}
if (this.imageIsLoading) {
this.canvas.drawWaitClock(itemHandlerCtx, this.bounds.center);
}
else {
this._content.drawItemHandler(itemHandlerCtx);
}
if (this.canvas.isDragSource(this)) {
itemHandlerCtx.globalCompositeOperation = "destination-out";
gr.fillRectangle(itemHandlerCtx, this.rectangle, RgbColors.black, 0.3);
itemHandlerCtx.globalCompositeOperation = "source-over";
}
itemHandlerCtx.restore();
var _a = this._getItemColorPreviews(), borderColorPreview = _a.borderColorPreview, altBorderColorPreview = _a.altBorderColorPreview;
gr.drawStroke(itemHandlerCtx, path, center, transform, this._getActualBorderWidth(), borderColorPreview === null || borderColorPreview === void 0 ? void 0 : borderColorPreview.toString(), altBorderColorPreview === null || altBorderColorPreview === void 0 ? void 0 : altBorderColorPreview.toString(), opacity, this.item.dash);
}
else {
this.canvas.drawWaitClock(itemHandlerCtx, this.rectangle.center);
}
if (drawMaskedContent) {
itemHandlerCtx.globalCompositeOperation = "destination-over";
if (this._bottomFrames != null) {
for (var i = this._bottomFrames.length - 1; i >= 0; i--) {
drawFunc(this._bottomFrames[i]);
}
}
itemHandlerCtx.globalCompositeOperation = "source-over";
}
if (this.canvas.isDragTarget(this) && this.isNormalRenderingType) {
gr.fillRectangle(itemHandlerCtx, this.rectangle, RgbColors.black, 0.5);
}
this._updateTopFrames(drawFunc);
};
PlaceholderItemHandler.prototype.getSelectionRectangle = function () {
if (this.editing)
return this._content.getSelectionRectangle();
else
return _super.prototype.getSelectionRectangle.call(this);
};
PlaceholderItemHandler.prototype.getBorderMargin = function () {
if (this.editing)
return this._content.getBorderMargin();
else
return _super.prototype.getBorderMargin.call(this);
};
PlaceholderItemHandler.prototype.addSelectButtonClick = function (handler) {
this._selectButtonClickEvent.add(handler);
};
PlaceholderItemHandler.prototype.removeSelectButtonClick = function (handler) {
this._selectButtonClickEvent.remove(handler);
};
PlaceholderItemHandler.prototype.getChangeContentButtonClickEvent = function () {
return this._selectButtonClickEvent;
};
PlaceholderItemHandler.prototype.startTransform = function (operation) {
_super.prototype.startTransform.call(this, operation);
if (this.editing) {
this._startRectangle = this._content.rectangle;
}
this.updateContentAndFrames(function (handler) { handler._startRectangle = handler.rectangle; });
};
PlaceholderItemHandler.prototype.endTransform = function (changed, resized) {
this._endTransform(changed, resized);
};
PlaceholderItemHandler.prototype.transformChanged = function () {
_super.prototype.transformChanged.call(this);
var canvas = this.canvas;
if (canvas != null)
canvas.updatePlaceholderButtonGroupPosition(this);
};
PlaceholderItemHandler.prototype.onResized = function () {
this.updateContentAndFrames(function (handler) { handler.onResized(); });
return _super.prototype.onResized.call(this);
};
PlaceholderItemHandler.prototype.showSelectButton = function () {
return this.isStubOrEmpty() && this.getPermissions().showSelectButton;
};
PlaceholderItemHandler.prototype.showSelectToolbarButton = function () {
return this.getPermissions().showSelectToolbarButton && !this.isStubOrEmpty();
};
PlaceholderItemHandler.prototype.showHandleButton = function () {
var contentResizeMode = this.item.contentResizeMode;
var isFitMode = contentResizeMode === ResizeMode.Fit;
return !this.isStubOrEmpty() && this.getPermissions().allowEditContent && this.getPermissions().showHandleButton && !this._editing && !isFitMode;
};
PlaceholderItemHandler.prototype.setContentUpdating = function (v) {
this._isContentUpdating = v;
};
PlaceholderItemHandler.prototype.isContentUpdating = function () {
return this._isContentUpdating;
};
PlaceholderItemHandler.prototype.updateContentAndFrames = function (func) {
this._updateContent(func);
this._updateFrames(func);
};
PlaceholderItemHandler.prototype.getBoundsIncludingFrames = function () {
var bounds = this.bounds;
this._updateFrames(function (vo) {
bounds = RectangleF.union(bounds, vo.bounds);
});
return bounds;
};
PlaceholderItemHandler.prototype.getRectangleIncludingFrames = function () {
var rectangle = this.rectangle;
this._updateFrames(function (vo) {
rectangle =
RotatedRectangleF.union(vo.rectangle, rectangle);
});
return rectangle;
};
PlaceholderItemHandler.prototype.setQualityChangeScaleBarWidth = function (progress) {
if (this._qualityChangeScaleBar == null)
return;
progress = Math.max(0, progress);
progress = Math.min(100, progress);
this._qualityChangeScaleBar.style.width = progress + "%";
};
PlaceholderItemHandler.prototype.setQualityChangeInfoBarText = function (value) {
if (this._qualityChangeInfoBar == null)
return;
this._qualityChangeInfoBar.innerText = value;
};
PlaceholderItemHandler.prototype._isReady = function () {
return _super.prototype._isReady.call(this) && (this.isEmptyContent() || this.content.ready);
};
PlaceholderItemHandler.prototype._getColors = function () {
var _a, _b;
var contentColors = (_b = (_a = this.content) === null || _a === void 0 ? void 0 : _a.getColors()) !== null && _b !== void 0 ? _b : [];
return __spread(contentColors, _super.prototype._getColors.call(this));
};
PlaceholderItemHandler.prototype._updateImpl = function () {
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_a) {
this.updateContentAndFrames(function (handler) { handler.update(); });
if (this.canvas != null)
this.canvas.updatePlaceholderButtonGroup(this);
return [2 /*return*/];
});
});
};
PlaceholderItemHandler.prototype._onAddedOnCanvas = function (canvas) {
var _this = this;
_super.prototype._onAddedOnCanvas.call(this, canvas);
this.updateContentAndFrames(function (handler) {
handler.layer = _this.layer;
handler.parentPlaceholder = _this;
handler.canvas = canvas;
});
if (canvas != null && this.placeholderButtonGroup == null)
canvas.addPlaceholderButtonGroup(this);
if (this.content != null)
this.content.canvas = canvas;
};
PlaceholderItemHandler.prototype._onRemovedFromCanvas = function (canvas) {
_super.prototype._onRemovedFromCanvas.call(this, canvas);
this.editing = false;
this.updateContentAndFrames(function (handler) {
//TODO: rewrite to events
handler._onRemovedFromCanvas(canvas);
});
if (canvas != null)
canvas.removePlaceholderButtonGroup(this);
};
PlaceholderItemHandler.prototype._onTransformRectangle = function (startRectangle, endRectangle, highlightOnly) {
this._previousRectangle = this.rectangle;
_super.prototype._onTransformRectangle.call(this, startRectangle, endRectangle, highlightOnly);
if (!this.isEmptyContent() && this.content.startRectangle != null) {
if (this.item.isStubContent && this.item.fixedStubContentSize && !this.editing) {
var endRectangleWithoutScale = endRectangle.clone();
endRectangleWithoutScale.Width = startRectangle.Width;
endRectangleWithoutScale.Height = startRectangle.Height;
this.content.transformRectangle(startRectangle, endRectangleWithoutScale);
}
else {
this.content.transformRectangle(startRectangle, endRectangle);
}
}
var updateFunc = function (handler) {
if (handler.startRectangle != null) {
handler.transformRectangle(startRectangle, endRectangle);
}
};
if (!this.editing) {
this._updateFrames(updateFunc);
}
this._previousRectangle = null;
var canvas = this.canvas;
if (canvas != null)
canvas.updatePlaceholderButtonGroupPosition(this);
};
PlaceholderItemHandler.prototype._endTransform = function (changed, resized, suppressOnChanged) {
if (suppressOnChanged === void 0) { suppressOnChanged = false; }
if (changed && (resized || this._startRectangle != null)) {
//TODO: rewrite to events
this.updateContentAndFrames(function (contentItemHandler) { return contentItemHandler._endTransform(changed, resized, true); });
if (!suppressOnChanged)
this._itemPropertyChangedEvent.notify(this, "transform");
}
if (!changed || !resized) {
delete this._startRectangle;
this.updateContentAndFrames(function (handler) { delete handler._startRectangle; });
}
if (this.canvas != null) {
this.canvas.updateViolationContainer(this, true);
}
};
PlaceholderItemHandler.prototype._getHighlightRectangle = function () {
if (this.editing)
return this.rectangle;
else
return _super.prototype._getHighlightRectangle.call(this);
};
PlaceholderItemHandler.prototype._getDefaultPermissions = function () {
var permissions = _super.prototype._getDefaultPermissions.call(this);
permissions.manipulation.resizeGrips = new ResizeGripsPermissions(true, true, false);
return permissions;
};
PlaceholderItemHandler.prototype._getItemPermissions = function () {
var permissions = _super.prototype._getItemPermissions.call(this);
permissions.placeholder = this.item.placeholderPermissions;
return permissions;
};
PlaceholderItemHandler.prototype._onItemPropertyChanged = function (sender, propertyName) {
var _this = this;
var _a;
switch (propertyName) {
case "content":
this.content = sender.content != null && this.canvas != null ? this.canvas.getItemHandler(sender.content) : null;
this.update();
break;
case "topFrames":
if (this.canvas != null)
this.topFrames = sender.topFrames.map(function (fi) { return _this.canvas.getItemHandler(fi); });
this.update();
break;
case "bottomFrames":
if (this.canvas != null)
this.bottomFrames = sender.bottomFrames.map(function (fi) { return _this.canvas.getItemHandler(fi); });
this.update();
break;
case "locked":
(_a = this.canvas) === null || _a === void 0 ? void 0 : _a.updatePlaceholderButtonGroup(this);
break;
case "isStubContent":
this._reloadPlaceholderButtons();
break;
case "isCoverMode":
if (this._content != null && this.item.isCoverMode) {
//Fixing the position and size of the content if the content is loaded not by the rules of coverMode.
this._content.setRectangle(this._content.rectangle);
}
break;
case "contentOverlayEffect":
this.update();
break;
default:
}
_super.prototype._onItemPropertyChanged.call(this, sender, propertyName);
};
PlaceholderItemHandler.prototype._onItemVisibilityChanged = function () {
var _a;
_super.prototype._onItemVisibilityChanged.call(this);
(_a = this.canvas) === null || _a === void 0 ? void 0 : _a.updatePlaceholderButtonGroup(this);
};
PlaceholderItemHandler.prototype._refreshState = function () {
var _a;
_super.prototype._refreshState.call(this);
if (this._isIgnorePermissionsMode())
(_a = this.canvas) === null || _a === void 0 ? void 0 : _a.updatePlaceholderButtonGroup(this);
};
PlaceholderItemHandler.prototype._createDataInstance = function (itemHandler) {
return new PlaceholderHandlerData(itemHandler);
};
PlaceholderItemHandler.prototype._updateFrames = function (func) {
this._updateTopFrames(func);
this._updateBottomFrames(func);
};
PlaceholderItemHandler.prototype._updateTopFrames = function (func, updateArray) {
if (this._topFrames != null) {
for (var i = 0; i < this._topFrames.length; i++) {
func(this._topFrames[i], updateArray != null ? updateArray[i] : null);
}
}
};
PlaceholderItemHandler.prototype._updateBottomFrames = function (func, updateArray) {
if (this._bottomFrames != null) {
for (var i = 0; i < this._bottomFrames.length; i++) {
func(this._bottomFrames[i], updateArray != null ? updateArray[i] : null);
}
}
};
PlaceholderItemHandler.prototype._updateContent = function (func) {
if (!this.isEmptyContent())
func(this._content);
};
PlaceholderItemHandler.prototype._onSelectButtonClick = function () {
this._selectButtonClickEvent.notify(this);
};
PlaceholderItemHandler.prototype._onImageIsLoadingChanged = function () {
var _a, _b, _c;
if (this.imageIsLoading) {
(_a = this.canvas) === null || _a === void 0 ? void 0 : _a.removePlaceholderButtonGroup(this);
}
else {
(_b = this.canvas) === null || _b === void 0 ? void 0 : _b.addPlaceholderButtonGroup(this);
}
(_c = this.canvas) === null || _c === void 0 ? void 0 : _c.redraw();
};
PlaceholderItemHandler.prototype._rotateContent = function (angle) {
if (this.isStubOrEmpty())
return;
var rectangle = this.content.getTransformedRectangle(false);
rectangle.angle = normalizeAngle((rectangle.angle + angle) % 360);
this.content.setTransformedRectangle(rectangle);
this.canvas.redraw();
};
PlaceholderItemHandler.prototype._reloadPlaceholderButtons = function () {
var canvas = this.canvas;
if (canvas != null) {
canvas.removePlaceholderButtonGroup(this);
canvas.addPlaceholderButtonGroup(this);
if (this.isStubOrEmpty()) {
canvas.removeViolationContainer(this._content);
}
else {
canvas.addViolationContainer(this._content);
}
}
};
PlaceholderItemHandler._getItemPath = function (item) {
if (item == null)
return null;
if (item.sourcePath != null)
return item.sourcePath;
if (item.sourceRectangle != null)
return Path.rectangle(item.sourceRectangle.left, item.sourceRectangle.top, item.sourceRectangle.width, item.sourceRectangle.height);
return null;
};
PlaceholderItemHandler.typeName = "PlaceholderItemHandler";
return PlaceholderItemHandler;
}(ShapeItemHandler));
export { PlaceholderItemHandler };
//# sourceMappingURL=PlaceholderItemHandler.js.map