@evoke-ui/zsort3d
Version:
TypeScript z-plane rendering engine with 3D depth simulation using Canvas 2D and mouse-based navigation
51 lines • 1.72 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Z3DContainer = void 0;
const Z3DSortable_1 = require("../core/Z3DSortable");
class Z3DContainer extends Z3DSortable_1.Z3DSortable {
constructor(width = 100, height = 100, fillColor = '#FFFFFF', strokeColor = '#000000') {
super();
this.containerWidth = width;
this.containerHeight = height;
this.width = width;
this.height = height;
this.fillColor = fillColor;
this.strokeColor = strokeColor;
this.strokeWidth = 2;
}
render(ctx) {
const scaledWidth = this.containerWidth * this.scaleX;
const scaledHeight = this.containerHeight * this.scaleY;
const scaledStroke = this.strokeWidth * this.scaleX;
ctx.save();
ctx.translate(this.x - scaledWidth / 2, this.y - scaledHeight / 2);
ctx.fillStyle = this.fillColor;
ctx.fillRect(0, 0, scaledWidth, scaledHeight);
if (this.scaleX > 0.15) {
ctx.strokeStyle = this.strokeColor;
ctx.lineWidth = scaledStroke;
ctx.strokeRect(0, 0, scaledWidth, scaledHeight);
}
ctx.restore();
}
get containerFillColor() {
return this.fillColor;
}
set containerFillColor(color) {
this.fillColor = color;
}
get containerStrokeColor() {
return this.strokeColor;
}
set containerStrokeColor(color) {
this.strokeColor = color;
}
get containerStrokeWidth() {
return this.strokeWidth;
}
set containerStrokeWidth(width) {
this.strokeWidth = width;
}
}
exports.Z3DContainer = Z3DContainer;
//# sourceMappingURL=Z3DContainer.js.map