@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 • 9.95 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 __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 { BaseRectangleItemHandler } from "./BaseRectangleItemHandler";
import { Graphics } from "../Graphics";
import { RectangleF, PointF } from "@aurigma/design-atoms-model/Math";
var GridItemHandler = /** @class */ (function (_super) {
__extends(GridItemHandler, _super);
function GridItemHandler(item, textWhizz, colorPreviewService) {
if (textWhizz === void 0) { textWhizz = null; }
return _super.call(this, 0, 0, 0, 0, item, textWhizz, colorPreviewService) || this;
}
Object.defineProperty(GridItemHandler.prototype, "item", {
get: function () {
return this._getItem();
},
enumerable: true,
configurable: true
});
Object.defineProperty(GridItemHandler.prototype, "locked", {
get: function () {
return this.item.locked;
},
set: function (value) {
this.item.locked = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(GridItemHandler.prototype, "cols", {
get: function () {
return this.item.cols;
},
set: function (value) {
this.item.cols = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(GridItemHandler.prototype, "rows", {
get: function () {
return this.item.rows;
},
set: function (value) {
this.item.rows = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(GridItemHandler.prototype, "stepX", {
get: function () {
return this.item.stepX;
},
set: function (value) {
this.item.stepX = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(GridItemHandler.prototype, "stepY", {
get: function () {
return this.item.stepY;
},
set: function (value) {
this.item.stepY = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(GridItemHandler.prototype, "horizontalLineColor", {
get: function () {
return this.item.horizontalLineColor;
},
set: function (value) {
this.item.horizontalLineColor = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(GridItemHandler.prototype, "verticalLineColor", {
get: function () {
return this.item.verticalLineColor;
},
set: function (value) {
this.item.verticalLineColor = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(GridItemHandler.prototype, "lineWidth", {
get: function () {
return this.item.lineWidth;
},
set: function (value) {
this.item.lineWidth = value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(GridItemHandler.prototype, "fixedLineWidth", {
get: function () {
return this.item.fixedLineWidth;
},
set: function (value) {
this.item.fixedLineWidth = value;
},
enumerable: true,
configurable: true
});
GridItemHandler.prototype.getControlBounds = function () {
var w = this.item.cols * this.stepX;
var h = this.item.rows * this.stepY;
return new RectangleF(this.item.location.x, this.item.location.y, w, h);
};
GridItemHandler.prototype.drawItemHandler = function (itemHandlerCtx) {
if (itemHandlerCtx == null) {
return;
}
if (!this._isReadyToDraw) {
this.canvas.drawWaitClock(itemHandlerCtx, this.rectangle.center);
return;
}
itemHandlerCtx.save();
var location = this.item.location;
var center = this.getControlCenter();
var _a = this._getItemColorPreviews(), horizontalLineColorPreview = _a.horizontalLineColorPreview, verticalLineColorPreview = _a.verticalLineColorPreview;
var lineWidth = this.lineWidth;
if (this.fixedLineWidth) {
lineWidth /= this.canvas.zoom;
}
var halfLineWidthHor = lineWidth / 2 / this.item.transform.scaleX;
var halfLineWidthVer = lineWidth / 2 / this.item.transform.scaleY;
var horizontalLineLength = this.stepX * this.cols;
var verticalLineLength = this.stepY * this.rows;
for (var i = 0; i <= this.rows; i++) {
var x0 = location.x - halfLineWidthHor;
var x1 = location.x + horizontalLineLength + halfLineWidthHor;
var y = location.y + i * this.stepY;
var point0 = new PointF(x0, y).transform(this.item.transform, center);
var point1 = new PointF(x1, y).transform(this.item.transform, center);
Graphics.drawLine(itemHandlerCtx, point0.x, point0.y, point1.x, point1.y, lineWidth, horizontalLineColorPreview === null || horizontalLineColorPreview === void 0 ? void 0 : horizontalLineColorPreview.toString(), this.item.opacity);
}
for (var i = 0; i <= this.cols; i++) {
var x = location.x + i * this.stepX;
var y0 = location.y - halfLineWidthVer;
var y1 = location.y + verticalLineLength + halfLineWidthVer;
var point0 = new PointF(x, y0).transform(this.item.transform, center);
var point1 = new PointF(x, y1).transform(this.item.transform, center);
Graphics.drawLine(itemHandlerCtx, point0.x, point0.y, point1.x, point1.y, lineWidth, verticalLineColorPreview === null || verticalLineColorPreview === void 0 ? void 0 : verticalLineColorPreview.toString(), this.item.opacity);
}
itemHandlerCtx.restore();
};
GridItemHandler.prototype._getColors = function () {
return __spread([this.item.horizontalLineColor, this.item.verticalLineColor], _super.prototype._getColors.call(this));
};
Object.defineProperty(GridItemHandler.prototype, "_areColorPreviewsReady", {
get: function () {
var _a = this._getItemColorPreviews(), horizontalLineColorPreview = _a.horizontalLineColorPreview, verticalLineColorPreview = _a.verticalLineColorPreview;
return (this.item.horizontalLineColor == null || horizontalLineColorPreview != null)
&& (this.item.verticalLineColor == null || verticalLineColorPreview != null);
},
enumerable: true,
configurable: true
});
Object.defineProperty(GridItemHandler.prototype, "_isReadyToDraw", {
get: function () {
return this._areColorPreviewsReady;
},
enumerable: true,
configurable: true
});
GridItemHandler.prototype._getItemColorPreviews = function () {
var horizontalLineColorPreview = this._colorPreviewService.getPreview(this.item.horizontalLineColor);
if (this.item.horizontalLineColor != null && horizontalLineColorPreview == null) {
this._colorPreviewService.subscribeToPreviewLoaded(this.item.horizontalLineColor, this._onColorPreviewLoaded);
}
var verticalLineColorPreview = this._colorPreviewService.getPreview(this.item.verticalLineColor);
if (this.item.verticalLineColor != null && verticalLineColorPreview == null) {
this._colorPreviewService.subscribeToPreviewLoaded(this.item.verticalLineColor, this._onColorPreviewLoaded);
}
return {
horizontalLineColorPreview: horizontalLineColorPreview,
verticalLineColorPreview: verticalLineColorPreview
};
};
GridItemHandler.prototype._onItemPropertyChanged = function (sender, propertyName) {
switch (propertyName) {
case "location":
case "cols":
case "rows":
case "stepX":
case "stepY":
case "horizontalLineColor":
case "verticalLineColor":
case "lineWidth":
case "fixedLineWidth":
break;
}
};
GridItemHandler.prototype._getBoundsMargin = function () {
var lineWidth = this.lineWidth;
if (this.fixedLineWidth)
lineWidth /= this.canvas.zoom;
return lineWidth;
};
return GridItemHandler;
}(BaseRectangleItemHandler));
export { GridItemHandler };
//# sourceMappingURL=GridItemHandler.js.map