@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
823 lines • 35.1 kB
JavaScript
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";
import { PlaceholderFitModeType } from "../Viewer/Interfaces";
// ReSharper disable once InconsistentNaming
export class PlaceholderItemHandler extends ShapeItemHandler {
constructor(item, textWhizz = null, apiClient, colorPreviewService, options) {
var _a, _b;
super(PlaceholderItemHandler._getItemPath(item), item, textWhizz, apiClient, colorPreviewService);
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._isCropMode = false;
this.onHandleButtonClick = () => {
var _a;
this.editing = true;
(_a = this.canvas) === null || _a === void 0 ? void 0 : _a.updatePlaceholderButtonGroup(this);
this.currentRectangle = this.rectangle.clone();
};
this.onDoneButtonClick = () => {
var _a;
this.editing = false;
(_a = this.canvas) === null || _a === void 0 ? void 0 : _a.setSelectedItemHandlers([this]);
this.currentRectangle = this._calcCurrentRectangle();
this.update();
};
this._onContentReady = () => {
this._dispatchReadyEvent();
};
this.currentRectangle = this._calcCurrentRectangle();
this._isCropMode = (_a = options === null || options === void 0 ? void 0 : options.isCropMode) !== null && _a !== void 0 ? _a : false;
this._fitModeType = (_b = options === null || options === void 0 ? void 0 : options.fitModeType) !== null && _b !== void 0 ? _b : PlaceholderFitModeType.Always;
this._selectButtonClickHandler = this._onSelectButtonClick.bind(this);
}
isHighlightNeeded() {
return this.editing;
}
get isCropMode() {
return this._isCropMode;
}
get imageIsLoading() {
return this._imageIsLoading;
}
set imageIsLoading(condition) {
this._imageIsLoading = condition;
this._onImageIsLoadingChanged();
}
get item() {
return this._getItem();
}
set item(item) {
super._setItem(item);
}
get previousRectangle() {
return this._previousRectangle;
}
set previousRectangle(value) {
this._previousRectangle = value;
}
get content() {
return this._content;
}
set content(value) {
const canvas = this.canvas;
if (canvas != null && !this.isStubOrEmpty()) {
canvas.removeViolationContainer(this._content);
}
const 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);
this.currentRectangle = this._calcCurrentRectangle();
}
if (canvas != null) {
this._reloadPlaceholderButtons();
if (this._content == null)
return;
this._content.canvas = canvas;
if (oldContent && oldContent != this._content)
this.canvas.deleteItemHandler(oldContent);
}
}
get topFrames() {
return this._topFrames;
}
set topFrames(v) {
this._topFrames = v;
this._updateTopFrames(handler => {
handler.contentType = ContentType.TopFrame;
handler.layer = this.layer;
handler.parentPlaceholder = this;
handler.canvas = this.canvas;
});
}
get bottomFrames() {
return this._bottomFrames;
}
set bottomFrames(v) {
this._bottomFrames = v;
this._updateBottomFrames(handler => {
handler.contentType = ContentType.BottomFrame;
handler.layer = this.layer;
handler.parentPlaceholder = this;
handler.canvas = this.canvas;
});
}
get editing() {
return !this.isStubOrEmpty() && this._editing;
}
set editing(value) {
if (this._editing === value)
return;
if (value && !this.getPermissions().allowEditContent && this.isStubOrEmpty())
return;
this._editing = value;
this.raiseChanged();
if (value === false) {
this.currentRectangle = this._calcCurrentRectangle();
}
this._isEditingChangedEvent.notify(this);
if (this.canvas == null)
return;
this.canvas.updateSelection();
this.canvas.updatePlaceholderButtonGroup(this);
this.canvas.redraw();
}
get showMaskedContent() {
return this._showMaskedContent;
}
set showMaskedContent(value) {
this._showMaskedContent = value;
}
get isQualityChangeBarEmpty() {
const canvas = this.canvas;
if (this._qualityChangeScaleBar == null || canvas == null)
return true;
if (this._qualityChangeScaleBar.className === this.canvas.qualityChangeScaleBarCssClass)
return true;
return false;
}
get qualityChangeScaleBar() {
return this._qualityChangeScaleBar;
}
set qualityChangeScaleBar(v) {
this._qualityChangeScaleBar = v;
}
get qualityChangeInfoBar() {
return this._qualityChangeInfoBar;
}
set qualityChangeInfoBar(v) {
this._qualityChangeInfoBar = v;
}
get qualityChangeContainer() {
return this._qualityChangeContainer;
}
set qualityChangeContainer(v) {
this._qualityChangeContainer = v;
}
get forceQualityChangeInfoBar() {
return this._forceQualityChangeInfoBar;
}
set forceQualityChangeInfoBar(v) {
this._forceQualityChangeInfoBar = v;
const canvas = this.canvas;
if (canvas != null) {
canvas.updateViolationContainer(this);
}
}
get placeholderButtonGroup() {
return this._placeholderButtonGroup;
}
set placeholderButtonGroup(v) {
this._placeholderButtonGroup = v;
}
get doneButtonGroup() {
return this._doneButtonGroup;
}
set doneButtonGroup(v) {
this._doneButtonGroup = v;
}
get selectButton() {
return this._selectButton;
}
set selectButton(v) {
this._selectButton = v;
}
get doneButton() {
return this._doneButton;
}
set doneButton(v) {
this._doneButton = v;
}
get handleButton() {
return this._handleButton;
}
set handleButton(v) {
this._handleButton = v;
}
get selectButtonClickHandler() {
return this._selectButtonClickHandler;
}
get editButtonGroup() {
return this._editButtonGroup;
}
set editButtonGroup(v) {
this._editButtonGroup = v;
}
addIsEditingChanged(listener) {
this._isEditingChangedEvent.add(listener);
}
removeIsEditingChanged(listener) {
this._isEditingChangedEvent.remove(listener);
}
quickUpdate() {
if (this.isVisible())
this.update();
if (this.canvas != null)
this.canvas.updatePlaceholderButtonGroup(this);
}
getContentScale() {
if (this.isStubOrEmpty())
return null;
const placeholderRect = this.getTransformedRectangle(false);
const imageRect = this.content.getTransformedRectangle(false);
//If the content is rotated at 90 degrees, Width and Height change places.
const rotated = normalizeAngle(placeholderRect.angle - imageRect.angle) === 90
|| normalizeAngle(placeholderRect.angle - imageRect.angle) === 270;
const widthRatio = rotated ? imageRect.height / placeholderRect.width : imageRect.width / placeholderRect.width;
const 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;
}
}
setContentScale(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();
}
resetContent() {
if (this.isStubOrEmpty())
return;
const placeholderRect = this.getTransformedRectangle(false);
const imageRect = this.content.getTransformedRectangle(false);
const currentScale = 100 / this.getContentScale();
//If the content is rotated at 90 degrees, Width and Height change places.
const rotated = normalizeAngle(placeholderRect.angle - imageRect.angle) === 90
|| normalizeAngle(placeholderRect.angle - imageRect.angle) === 270;
//In case of arbitrary resize
const contentItem = this.content.item;
const currentRatio = rotated ? imageRect.height / imageRect.width : imageRect.width / imageRect.height;
const sourceRatio = contentItem.ratioWidthToHeight || (contentItem.sourceRectangle.width / contentItem.sourceRectangle.height);
const defaultScaleX = currentRatio < sourceRatio ? currentScale * (sourceRatio / currentRatio) : currentScale;
const defaultScaleY = currentRatio > sourceRatio ? currentScale * (currentRatio / sourceRatio) : currentScale;
const defWidth = rotated ? imageRect.height * defaultScaleX : imageRect.width * defaultScaleX;
const defHeight = rotated ? imageRect.width * defaultScaleY : imageRect.height * defaultScaleY;
const 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();
}
getSelectToolbarButtonClickEvent() {
return this._selectButtonClickEvent;
}
getTopFrame(index) {
return this._topFrames != null ? this._topFrames[index] : null;
}
setTopFrame(index, v) {
v._contentType = ContentType.TopFrame;
v._layer = this.layer;
v._parentPlaceholder = this;
v.canvas = this.canvas;
this._topFrames[index] = v;
}
getBottomFrame(index) {
return this._bottomFrames != null ? this._bottomFrames[index] : null;
}
setBottomFrame(index, v) {
v._contentType = ContentType.BottomFrame;
v._layer = this.layer;
v._parentPlaceholder = this;
v.canvas = this.canvas;
this._bottomFrames[index] = v;
}
isEmptyContent() {
return this._content == null;
}
isStubOrEmpty() {
return this.item.isStubContent || this.isEmptyContent();
}
isCoverMode() {
return this.item.isCoverMode;
}
showEditButton() {
const baseValue = super.showEditToolbarButton;
const contentValue = this.isStubOrEmpty() ? true : !this.item.imageContent.source.isVector;
return baseValue && contentValue;
}
showHandleToolbarButton() {
const perms = this.getPermissions();
return perms.allowEditContent && perms.showHandleToolbarButton && !this.isStubOrEmpty();
}
getPermissions(forcePermissionContent) {
if (!this.editing || (forcePermissionContent != null && forcePermissionContent))
return super.getPermissions();
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);
}
setBadToWarningChangeScaleBarClass() {
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);
}
setWarningToGoodChangeScaleBarClass() {
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);
}
setBadToGoodChangeScaleBarClass() {
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);
}
rotateContentLeft() {
this._rotateContent(-90);
}
rotateContentRight() {
this._rotateContent(90);
}
setRectangle(rectangle, suppressOnChanged, forcePlaceholderSet) {
this._previousRectangle = suppressOnChanged ? this.rectangle.clone() : null;
if (!this.editing || forcePlaceholderSet) {
super.setRectangle(rectangle, suppressOnChanged);
this.currentRectangle = this._calcCurrentRectangle();
}
else {
this._content.setRectangle(rectangle, suppressOnChanged);
}
}
drawItemHandler(itemHandlerCtx) {
if (itemHandlerCtx == null)
return;
const drawFunc = (handler) => {
handler.drawItemHandler(itemHandlerCtx);
};
const drawMaskedContent = this.editing && this.showMaskedContent;
if (!drawMaskedContent) {
this._updateBottomFrames(drawFunc);
}
const gr = Graphics;
const path = this.originalPath;
const center = this.getControlCenter();
const transform = this.item.transform;
if (this.isEmptyContent()) {
if (this.imageIsLoading) {
this.canvas.drawWaitClock(itemHandlerCtx, this.bounds.center);
}
else {
super.drawItemHandler(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);
}
const opacity = this.isNormalRenderingType ? this.item.opacity : 1;
itemHandlerCtx.save();
const transformedPath = this._getTransformedPath();
gr.clipPath(itemHandlerCtx, transformedPath);
if (this.currentRectangle && !this.currentRectangle.equals(this.rectangle) && this._isCropMode) {
const crPath = Path.rectangle(this.currentRectangle.bounds.left, this.currentRectangle.bounds.top, this.currentRectangle.width, this.currentRectangle.height);
gr.clipPath(itemHandlerCtx, crPath);
}
if (this.item.mask != null && this.item.mask.vectorMask != null) {
const vectorMaskPath = this._getTransformedClippingPath();
gr.clipPath(itemHandlerCtx, vectorMaskPath);
}
if (path != null) {
const { fillColorPreview } = this._getItemColorPreviews();
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();
const { borderColorPreview, altBorderColorPreview } = this._getItemColorPreviews();
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);
}
getSelectionRectangle() {
if (this.editing) {
return this._content.getSelectionRectangle();
}
else {
return this.currentRectangle;
}
}
getBorderMargin() {
if (this.editing)
return this._content.getBorderMargin();
else
return super.getBorderMargin();
}
addSelectButtonClick(handler) {
this._selectButtonClickEvent.add(handler);
}
removeSelectButtonClick(handler) {
this._selectButtonClickEvent.remove(handler);
}
getChangeContentButtonClickEvent() {
return this._selectButtonClickEvent;
}
startTransform() {
super.startTransform();
if (!this.rectangle.equals(this.currentRectangle)) {
this.setRectangle(this.currentRectangle, true);
}
if (this.editing) {
this._startRectangle = this._content.rectangle;
}
this.updateContentAndFrames((handler) => { handler._startRectangle = handler.rectangle; });
}
endTransform(changed, resized) {
this._endTransform(changed, resized);
}
transformChanged() {
super.transformChanged();
var canvas = this.canvas;
if (canvas != null)
canvas.updatePlaceholderButtonGroupPosition(this);
}
onResized() {
this.updateContentAndFrames(function (handler) { handler.onResized(); });
return super.onResized();
}
showSelectButton() {
return this.isStubOrEmpty() && this.getPermissions().showSelectButton;
}
showSelectToolbarButton() {
return this.getPermissions().showSelectToolbarButton && !this.isStubOrEmpty();
}
showHandleButton() {
const { contentResizeMode } = this.item;
const isAlwaysFitMode = contentResizeMode === ResizeMode.Fit && this._fitModeType === PlaceholderFitModeType.Always && !this._isCropMode;
return !this.isStubOrEmpty() &&
this.getPermissions().allowEditContent &&
this.getPermissions().showHandleButton &&
!this._editing &&
!isAlwaysFitMode;
}
_calcCurrentRectangle() {
var _a;
if (this._isCropMode) {
return this.content == null ? this.rectangle.clone()
: (_a = RotatedRectangleF.intersect(this.rectangle, this.content.rectangle)) !== null && _a !== void 0 ? _a : this.rectangle.clone();
}
else {
return this.rectangle.clone();
}
}
setContentUpdating(v) {
this._isContentUpdating = v;
}
isContentUpdating() {
return this._isContentUpdating;
}
updateContentAndFrames(func) {
this._updateContent(func);
this._updateFrames(func);
}
getBoundsIncludingFrames() {
var bounds = this.bounds;
this._updateFrames(vo => {
bounds = RectangleF.union(bounds, vo.bounds);
});
return bounds;
}
getRectangleIncludingFrames() {
let rectangle = this.rectangle;
this._updateFrames(vo => {
rectangle =
RotatedRectangleF.union(vo.rectangle, rectangle);
});
return rectangle;
}
setQualityChangeScaleBarWidth(progress) {
if (this._qualityChangeScaleBar == null)
return;
progress = Math.max(0, progress);
progress = Math.min(100, progress);
this._qualityChangeScaleBar.style.width = `${progress}%`;
}
setQualityChangeInfoBarText(value) {
if (this._qualityChangeInfoBar == null)
return;
this._qualityChangeInfoBar.innerText = value;
}
_isReady() {
return super._isReady() && (this.isEmptyContent() || this.content.ready);
}
_getColors() {
var _a, _b;
const contentColors = (_b = (_a = this.content) === null || _a === void 0 ? void 0 : _a.getColors()) !== null && _b !== void 0 ? _b : [];
return [...contentColors, ...super._getColors()];
}
async _updateImpl() {
this.updateContentAndFrames(handler => { handler.update(); });
if (this.canvas != null)
this.canvas.updatePlaceholderButtonGroup(this);
}
_onAddedOnCanvas(canvas) {
super._onAddedOnCanvas(canvas);
this.updateContentAndFrames(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;
}
_onRemovedFromCanvas(canvas) {
super._onRemovedFromCanvas(canvas);
this.editing = false;
this.updateContentAndFrames((handler) => {
//TODO: rewrite to events
handler._onRemovedFromCanvas(canvas);
});
if (canvas != null)
canvas.removePlaceholderButtonGroup(this);
}
_onTransformRectangle(startRectangle, endRectangle, highlightOnly) {
this._previousRectangle = this.rectangle;
super._onTransformRectangle(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);
}
}
const updateFunc = (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);
}
_endTransform(changed, resized, suppressOnChanged = false) {
if (changed && (resized || this._startRectangle != null)) {
//TODO: rewrite to events
this.updateContentAndFrames(contentItemHandler => 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);
}
}
_getHighlightRectangle() {
if (this.editing) {
return this.rectangle;
}
else {
return this.currentRectangle;
}
}
_getDefaultPermissions() {
const permissions = super._getDefaultPermissions();
permissions.manipulation.resizeGrips = new ResizeGripsPermissions(true, true, false);
return permissions;
}
_getItemPermissions() {
const permissions = super._getItemPermissions();
permissions.placeholder = this.item.placeholderPermissions;
return permissions;
}
_onItemPropertyChanged(sender, propertyName) {
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(fi => this.canvas.getItemHandler(fi));
this.update();
break;
case "bottomFrames":
if (this.canvas != null)
this.bottomFrames = sender.bottomFrames.map(fi => 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._onItemPropertyChanged(sender, propertyName);
}
_onItemVisibilityChanged() {
var _a;
super._onItemVisibilityChanged();
(_a = this.canvas) === null || _a === void 0 ? void 0 : _a.updatePlaceholderButtonGroup(this);
}
_refreshState() {
var _a;
super._refreshState();
if (this._isIgnorePermissionsMode())
(_a = this.canvas) === null || _a === void 0 ? void 0 : _a.updatePlaceholderButtonGroup(this);
}
_createDataInstance(itemHandler) {
return new PlaceholderHandlerData(itemHandler);
}
_updateFrames(func) {
this._updateTopFrames(func);
this._updateBottomFrames(func);
}
_updateTopFrames(func, updateArray) {
if (this._topFrames != null) {
for (var i = 0; i < this._topFrames.length; i++) {
func(this._topFrames[i], updateArray != null ? updateArray[i] : null);
}
}
}
_updateBottomFrames(func, updateArray) {
if (this._bottomFrames != null) {
for (var i = 0; i < this._bottomFrames.length; i++) {
func(this._bottomFrames[i], updateArray != null ? updateArray[i] : null);
}
}
}
_updateContent(func) {
if (!this.isEmptyContent())
func(this._content);
}
_onSelectButtonClick() {
this._selectButtonClickEvent.notify(this);
}
_onImageIsLoadingChanged() {
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();
}
_rotateContent(angle) {
if (this.isStubOrEmpty())
return;
const rectangle = this.content.getTransformedRectangle(false);
rectangle.angle = normalizeAngle((rectangle.angle + angle) % 360);
this.content.setTransformedRectangle(rectangle);
this.canvas.redraw();
}
_reloadPlaceholderButtons() {
const canvas = this.canvas;
if (canvas != null) {
canvas.removePlaceholderButtonGroup(this);
canvas.addPlaceholderButtonGroup(this);
if (this.isStubOrEmpty()) {
canvas.removeViolationContainer(this._content);
}
else {
canvas.addViolationContainer(this._content);
}
}
}
static _getItemPath(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";
//# sourceMappingURL=PlaceholderItemHandler.js.map