@aurigma/design-atoms
Version:
Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.
154 lines • 6.22 kB
JavaScript
import { BaseRectangleItemHandler } from "./BaseRectangleItemHandler";
import { Graphics } from "../Graphics";
import { RectangleF, PointF } from "@aurigma/design-atoms-model/Math";
export class GridItemHandler extends BaseRectangleItemHandler {
constructor(item, textWhizz = null, colorPreviewService) {
super(0, 0, 0, 0, item, textWhizz, colorPreviewService);
}
get item() {
return this._getItem();
}
get locked() {
return this.item.locked;
}
set locked(value) {
this.item.locked = value;
}
get cols() {
return this.item.cols;
}
set cols(value) {
this.item.cols = value;
}
get rows() {
return this.item.rows;
}
set rows(value) {
this.item.rows = value;
}
get stepX() {
return this.item.stepX;
}
set stepX(value) {
this.item.stepX = value;
}
get stepY() {
return this.item.stepY;
}
set stepY(value) {
this.item.stepY = value;
}
get horizontalLineColor() {
return this.item.horizontalLineColor;
}
set horizontalLineColor(value) {
this.item.horizontalLineColor = value;
}
get verticalLineColor() {
return this.item.verticalLineColor;
}
set verticalLineColor(value) {
this.item.verticalLineColor = value;
}
get lineWidth() {
return this.item.lineWidth;
}
set lineWidth(value) {
this.item.lineWidth = value;
}
get fixedLineWidth() {
return this.item.fixedLineWidth;
}
set fixedLineWidth(value) {
this.item.fixedLineWidth = value;
}
getControlBounds() {
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);
}
drawItemHandler(itemHandlerCtx) {
if (itemHandlerCtx == null) {
return;
}
if (!this._isReadyToDraw) {
this.canvas.drawWaitClock(itemHandlerCtx, this.rectangle.center);
return;
}
itemHandlerCtx.save();
const location = this.item.location;
const center = this.getControlCenter();
const { horizontalLineColorPreview, verticalLineColorPreview } = this._getItemColorPreviews();
let lineWidth = this.lineWidth;
if (this.fixedLineWidth) {
lineWidth /= this.canvas.zoom;
}
const halfLineWidthHor = lineWidth / 2 / this.item.transform.scaleX;
const halfLineWidthVer = lineWidth / 2 / this.item.transform.scaleY;
const horizontalLineLength = this.stepX * this.cols;
const verticalLineLength = this.stepY * this.rows;
for (let i = 0; i <= this.rows; i++) {
const x0 = location.x - halfLineWidthHor;
const x1 = location.x + horizontalLineLength + halfLineWidthHor;
const y = location.y + i * this.stepY;
const point0 = new PointF(x0, y).transform(this.item.transform, center);
const 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 (let i = 0; i <= this.cols; i++) {
const x = location.x + i * this.stepX;
const y0 = location.y - halfLineWidthVer;
const y1 = location.y + verticalLineLength + halfLineWidthVer;
const point0 = new PointF(x, y0).transform(this.item.transform, center);
const 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();
}
_getColors() {
return [this.item.horizontalLineColor, this.item.verticalLineColor, ...super._getColors()];
}
get _areColorPreviewsReady() {
const { horizontalLineColorPreview, verticalLineColorPreview } = this._getItemColorPreviews();
return (this.item.horizontalLineColor == null || horizontalLineColorPreview != null)
&& (this.item.verticalLineColor == null || verticalLineColorPreview != null);
}
get _isReadyToDraw() {
return this._areColorPreviewsReady;
}
_getItemColorPreviews() {
const horizontalLineColorPreview = this._colorPreviewService.getPreview(this.item.horizontalLineColor);
if (this.item.horizontalLineColor != null && horizontalLineColorPreview == null) {
this._colorPreviewService.subscribeToPreviewLoaded(this.item.horizontalLineColor, this._onColorPreviewLoaded);
}
const 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
};
}
_onItemPropertyChanged(sender, propertyName) {
switch (propertyName) {
case "location":
case "cols":
case "rows":
case "stepX":
case "stepY":
case "horizontalLineColor":
case "verticalLineColor":
case "lineWidth":
case "fixedLineWidth":
break;
}
}
_getBoundsMargin() {
var lineWidth = this.lineWidth;
if (this.fixedLineWidth)
lineWidth /= this.canvas.zoom;
return lineWidth;
}
}
//# sourceMappingURL=GridItemHandler.js.map