@al8b/screen 0.1.0

package/dist/drawing/primitives-screen.mjs

@@ -0,0 +1,662 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/drawing/primitives-screen.ts
+import { APIErrorCode as APIErrorCode2, reportRuntimeError as reportRuntimeError2 } from "@al8b/diagnostics";
+
+// src/core/base-screen.ts
+import { APIErrorCode, createDiagnostic, formatForBrowser, reportRuntimeError } from "@al8b/diagnostics";
+
+// src/tri/ttri.ts
+var ZBuffer = class {
+  static {
+    __name(this, "ZBuffer");
+  }
+  buffer;
+  width;
+  height;
+  constructor(width, height) {
+    this.width = width;
+    this.height = height;
+    this.buffer = new Float32Array(width * height);
+  }
+  clear() {
+    this.buffer.fill(0);
+  }
+  get(x, y) {
+    return this.buffer[y * this.width + x] || 0;
+  }
+  set(x, y, z) {
+    this.buffer[y * this.width + x] = z;
+  }
+  resize(width, height) {
+    if (this.width !== width || this.height !== height) {
+      this.width = width;
+      this.height = height;
+      this.buffer = new Float32Array(width * height);
+    }
+  }
+};
+
+// src/core/base-screen.ts
+var BaseScreen = class {
+  static {
+    __name(this, "BaseScreen");
+  }
+  canvas;
+  context;
+  runtime;
+  width;
+  height;
+  // Drawing state
+  alpha = 1;
+  pixelated = 1;
+  line_width = 1;
+  font = "BitCell";
+  // Transformations
+  translation_x = 0;
+  translation_y = 0;
+  rotation = 0;
+  scale_x = 1;
+  scale_y = 1;
+  screen_transform = false;
+  // Object transformations
+  object_rotation = 0;
+  object_scale_x = 1;
+  object_scale_y = 1;
+  anchor_x = 0;
+  anchor_y = 0;
+  // Blending + font caches
+  blending = {};
+  font_load_requested = {};
+  font_loaded = {};
+  // Interface cache
+  interfaceCache = null;
+  // Cursor management
+  cursor = "default";
+  cursor_visibility = "auto";
+  last_mouse_move = Date.now();
+  // 3D helper
+  zBuffer;
+  constructor(options = {}) {
+    this.runtime = options.runtime;
+    if (options.canvas) {
+      this.canvas = options.canvas;
+      if (this.canvas.width === 0 || this.canvas.height === 0) {
+        this.canvas.width = options.width || 1080;
+        this.canvas.height = options.height || 1920;
+      }
+    } else {
+      this.canvas = document.createElement("canvas");
+      this.canvas.width = options.width || 1080;
+      this.canvas.height = options.height || 1920;
+    }
+    this.initContext();
+    this.blending = {
+      normal: "source-over",
+      additive: "lighter"
+    };
+    const blendModes = [
+      "source-over",
+      "source-in",
+      "source-out",
+      "source-atop",
+      "destination-over",
+      "destination-in",
+      "destination-out",
+      "destination-atop",
+      "lighter",
+      "copy",
+      "xor",
+      "multiply",
+      "screen",
+      "overlay",
+      "darken",
+      "lighten",
+      "color-dodge",
+      "color-burn",
+      "hard-light",
+      "soft-light",
+      "difference",
+      "exclusion",
+      "hue",
+      "saturation",
+      "color",
+      "luminosity"
+    ];
+    for (const mode of blendModes) {
+      this.blending[mode] = mode;
+    }
+    this.loadFont(this.font);
+    this.zBuffer = new ZBuffer(this.canvas.width, this.canvas.height);
+    this.cursor = "default";
+    this.canvas.addEventListener("mousemove", () => {
+      this.last_mouse_move = Date.now();
+      if (this.cursor !== "default" && this.cursor_visibility === "auto") {
+        this.cursor = "default";
+        this.canvas.style.cursor = "default";
+      }
+    });
+    this.canvas.addEventListener("contextrestored", () => {
+      this.initContext();
+    });
+    setInterval(() => this.checkMouseCursor(), 1e3);
+    this.cursor_visibility = "auto";
+  }
+  initContext() {
+    const ctx = this.canvas.getContext("2d", {
+      alpha: false
+    });
+    if (!ctx) {
+      const diagnostic = createDiagnostic(APIErrorCode.E7001);
+      const formatted = formatForBrowser(diagnostic);
+      reportRuntimeError(this.runtime?.listener, APIErrorCode.E7001, {});
+      throw new Error(formatted);
+    }
+    if (ctx !== this.context) {
+      this.context = ctx;
+    } else {
+      this.context.restore();
+    }
+    this.context.save();
+    this.context.translate(this.canvas.width / 2, this.canvas.height / 2);
+    const ratio = Math.min(this.canvas.width / 200, this.canvas.height / 200);
+    this.context.scale(ratio, ratio);
+    this.width = this.canvas.width / ratio;
+    this.height = this.canvas.height / ratio;
+    this.context.lineCap = "round";
+  }
+  /**
+  * Initialize draw state (called before each draw frame)
+  */
+  initDraw() {
+    this.alpha = 1;
+    this.line_width = 1;
+  }
+  /**
+  * Update interface dimensions (called before each draw frame)
+  */
+  updateInterface() {
+    if (this.interfaceCache) {
+      this.interfaceCache.width = this.width;
+      this.interfaceCache.height = this.height;
+    }
+  }
+  clear(color) {
+    this.context.globalAlpha = 1;
+    this.context.globalCompositeOperation = "source-over";
+    this.context.fillStyle = color || "#000";
+    this.context.strokeStyle = color || "#000";
+    this.context.fillRect(-this.width / 2, -this.height / 2, this.width, this.height);
+    this.zBuffer.clear();
+  }
+  setColor(color) {
+    if (!color) return;
+    if (!Number.isNaN(Number.parseInt(String(color)))) {
+      const num = Number.parseInt(String(color));
+      const r = Math.floor(num / 100) % 10 / 9 * 255;
+      const g = Math.floor(num / 10) % 10 / 9 * 255;
+      const b = num % 10 / 9 * 255;
+      const c = 4278190080 + (r << 16) + (g << 8) + b;
+      const hex = "#" + c.toString(16).substring(2, 8);
+      this.context.fillStyle = hex;
+      this.context.strokeStyle = hex;
+    } else if (typeof color === "string") {
+      const isValidColor = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(color) || /^rgb\(|^rgba\(|^hsl\(|^hsla\(/.test(color) || /^(red|green|blue|yellow|cyan|magenta|black|white|gray|grey|orange|pink|purple|brown|transparent)$/i.test(color);
+      if (!isValidColor) {
+        reportRuntimeError(this.runtime?.listener, APIErrorCode.E7003, {
+          color
+        });
+        return;
+      }
+      this.context.fillStyle = color;
+      this.context.strokeStyle = color;
+    }
+  }
+  setAlpha(alpha) {
+    this.alpha = alpha;
+  }
+  setPixelated(pixelated) {
+    this.pixelated = pixelated;
+  }
+  setBlending(blending) {
+    const blend = this.blending[blending || "normal"];
+    if (!blend) {
+      reportRuntimeError(this.runtime?.listener, APIErrorCode.E7007, {
+        blendMode: blending
+      });
+      this.context.globalCompositeOperation = "source-over";
+      return;
+    }
+    this.context.globalCompositeOperation = blend;
+  }
+  setLineWidth(width) {
+    this.line_width = width;
+  }
+  setLineDash(dash) {
+    if (!Array.isArray(dash)) {
+      this.context.setLineDash([]);
+    } else {
+      this.context.setLineDash(dash);
+    }
+  }
+  setLinearGradient(x1, y1, x2, y2, c1, c2) {
+    const grd = this.context.createLinearGradient(x1, -y1, x2, -y2);
+    grd.addColorStop(0, c1);
+    grd.addColorStop(1, c2);
+    this.context.fillStyle = grd;
+    this.context.strokeStyle = grd;
+  }
+  setRadialGradient(x, y, radius, c1, c2) {
+    const grd = this.context.createRadialGradient(x, -y, 0, x, -y, radius);
+    grd.addColorStop(0, c1);
+    grd.addColorStop(1, c2);
+    this.context.fillStyle = grd;
+    this.context.strokeStyle = grd;
+  }
+  setFont(font) {
+    this.font = font || "Verdana";
+    this.loadFont(this.font);
+  }
+  loadFont(font = "BitCell") {
+    if (this.font_load_requested[font]) {
+      return;
+    }
+    this.font_load_requested[font] = true;
+    try {
+      document.fonts?.load?.(`16pt ${font}`).catch(() => {
+        reportRuntimeError(this.runtime?.listener, APIErrorCode.E7006, {
+          font
+        });
+      });
+    } catch {
+      reportRuntimeError(this.runtime?.listener, APIErrorCode.E7006, {
+        font
+      });
+    }
+  }
+  isFontReady(font = this.font) {
+    if (this.font_loaded[font]) {
+      return 1;
+    }
+    try {
+      const ready = document.fonts?.check?.(`16pt ${font}`) ?? true;
+      if (ready) {
+        this.font_loaded[font] = true;
+      }
+      return ready ? 1 : 0;
+    } catch {
+      return 1;
+    }
+  }
+  setTranslation(tx, ty) {
+    this.translation_x = isFinite(tx) ? tx : 0;
+    this.translation_y = isFinite(ty) ? ty : 0;
+    this.updateScreenTransform();
+  }
+  setScale(x, y) {
+    this.scale_x = isFinite(x) && x !== 0 ? x : 1;
+    this.scale_y = isFinite(y) && y !== 0 ? y : 1;
+    this.updateScreenTransform();
+  }
+  setRotation(rotation) {
+    this.rotation = isFinite(rotation) ? rotation : 0;
+    this.updateScreenTransform();
+  }
+  updateScreenTransform() {
+    this.screen_transform = this.translation_x !== 0 || this.translation_y !== 0 || this.scale_x !== 1 || this.scale_y !== 1 || this.rotation !== 0;
+  }
+  setDrawAnchor(ax, ay) {
+    this.anchor_x = typeof ax === "number" ? ax : 0;
+    this.anchor_y = typeof ay === "number" ? ay : 0;
+  }
+  setDrawRotation(rotation) {
+    this.object_rotation = rotation;
+  }
+  setDrawScale(x, y = x) {
+    this.object_scale_x = x;
+    this.object_scale_y = y;
+  }
+  initDrawOp(x, y, object_transform = true) {
+    let res = false;
+    if (this.screen_transform) {
+      this.context.save();
+      res = true;
+      this.context.translate(this.translation_x, -this.translation_y);
+      this.context.scale(this.scale_x, this.scale_y);
+      this.context.rotate(-this.rotation / 180 * Math.PI);
+      this.context.translate(x, y);
+    }
+    if (object_transform && (this.object_rotation !== 0 || this.object_scale_x !== 1 || this.object_scale_y !== 1)) {
+      if (!res) {
+        this.context.save();
+        res = true;
+        this.context.translate(x, y);
+      }
+      if (this.object_rotation !== 0) {
+        this.context.rotate(-this.object_rotation / 180 * Math.PI);
+      }
+      if (this.object_scale_x !== 1 || this.object_scale_y !== 1) {
+        this.context.scale(this.object_scale_x, this.object_scale_y);
+      }
+    }
+    return res;
+  }
+  closeDrawOp() {
+    this.context.restore();
+  }
+  /**
+  * Check mouse cursor visibility
+  * Auto-hides cursor after 4 seconds of inactivity
+  */
+  checkMouseCursor() {
+    if (Date.now() > this.last_mouse_move + 4e3 && this.cursor_visibility === "auto") {
+      if (this.cursor !== "none") {
+        this.cursor = "none";
+        this.canvas.style.cursor = "none";
+      }
+    }
+  }
+  /**
+  * Set cursor visibility
+  */
+  setCursorVisible(visible) {
+    this.cursor_visibility = visible ? "default" : "none";
+    if (visible) {
+      this.cursor = "default";
+      this.canvas.style.cursor = "default";
+    } else {
+      this.cursor = "none";
+      this.canvas.style.cursor = "none";
+    }
+  }
+  getCanvas() {
+    return this.canvas;
+  }
+  getContext() {
+    return this.context;
+  }
+  resize(width, height) {
+    if (width && height) {
+      if (width <= 0 || height <= 0 || !isFinite(width) || !isFinite(height)) {
+        reportRuntimeError(this.runtime?.listener, APIErrorCode.E7002, {
+          width,
+          height
+        });
+        return;
+      }
+      this.canvas.width = width;
+      this.canvas.height = height;
+      this.initContext();
+      this.zBuffer.resize(width, height);
+      this.updateInterface();
+    }
+  }
+};
+
+// src/drawing/primitives-screen.ts
+var PrimitiveScreen = class extends BaseScreen {
+  static {
+    __name(this, "PrimitiveScreen");
+  }
+  fillRect(x, y, w, h, color) {
+    if (!this.context) {
+      reportRuntimeError2(this.runtime?.listener, APIErrorCode2.E7092, {});
+      return;
+    }
+    if (!isFinite(x) || !isFinite(y) || !isFinite(w) || !isFinite(h) || w <= 0 || h <= 0) {
+      reportRuntimeError2(this.runtime?.listener, APIErrorCode2.E7093, {
+        error: `Invalid parameters: x=${x}, y=${y}, w=${w}, h=${h}`
+      });
+      return;
+    }
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    if (this.initDrawOp(x, -y)) {
+      this.context.fillRect(-w / 2 - this.anchor_x * w / 2, -h / 2 + this.anchor_y * h / 2, w, h);
+      this.closeDrawOp();
+    } else {
+      this.context.fillRect(x - w / 2 - this.anchor_x * w / 2, -y - h / 2 + this.anchor_y * h / 2, w, h);
+    }
+  }
+  fillRoundRect(x, y, w, h, round = 10, color) {
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    const transform = this.initDrawOp(x, -y);
+    const rx = (transform ? -w / 2 : x - w / 2) - this.anchor_x * w / 2;
+    const ry = (transform ? -h / 2 : -y - h / 2) + this.anchor_y * h / 2;
+    this.context.beginPath();
+    if (this.context.roundRect) {
+      this.context.roundRect(rx, ry, w, h, round);
+    } else {
+      const r = Math.min(round, w / 2, h / 2);
+      this.context.moveTo(rx + r, ry);
+      this.context.lineTo(rx + w - r, ry);
+      this.context.quadraticCurveTo(rx + w, ry, rx + w, ry + r);
+      this.context.lineTo(rx + w, ry + h - r);
+      this.context.quadraticCurveTo(rx + w, ry + h, rx + w - r, ry + h);
+      this.context.lineTo(rx + r, ry + h);
+      this.context.quadraticCurveTo(rx, ry + h, rx, ry + h - r);
+      this.context.lineTo(rx, ry + r);
+      this.context.quadraticCurveTo(rx, ry, rx + r, ry);
+      this.context.closePath();
+    }
+    this.context.fill();
+    if (transform) this.closeDrawOp();
+  }
+  fillRound(x, y, w, h, color) {
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    w = Math.abs(w);
+    h = Math.abs(h);
+    if (this.initDrawOp(x, -y)) {
+      this.context.beginPath();
+      this.context.ellipse(-this.anchor_x * w / 2, this.anchor_y * h / 2, w / 2, h / 2, 0, 0, Math.PI * 2, false);
+      this.context.fill();
+      this.closeDrawOp();
+    } else {
+      this.context.beginPath();
+      this.context.ellipse(x - this.anchor_x * w / 2, -y + this.anchor_y * h / 2, w / 2, h / 2, 0, 0, Math.PI * 2, false);
+      this.context.fill();
+    }
+  }
+  drawRect(x, y, w, h, color) {
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    this.context.lineWidth = this.line_width;
+    if (this.initDrawOp(x, -y)) {
+      this.context.strokeRect(-w / 2 - this.anchor_x * w / 2, -h / 2 + this.anchor_y * h / 2, w, h);
+      this.closeDrawOp();
+    } else {
+      this.context.strokeRect(x - w / 2 - this.anchor_x * w / 2, -y - h / 2 + this.anchor_y * h / 2, w, h);
+    }
+  }
+  drawRoundRect(x, y, w, h, round = 10, color) {
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    this.context.lineWidth = this.line_width;
+    const transform = this.initDrawOp(x, -y);
+    const rx = (transform ? -w / 2 : x - w / 2) - this.anchor_x * w / 2;
+    const ry = (transform ? -h / 2 : -y - h / 2) + this.anchor_y * h / 2;
+    this.context.beginPath();
+    if (this.context.roundRect) {
+      this.context.roundRect(rx, ry, w, h, round);
+    } else {
+      const r = Math.min(round, w / 2, h / 2);
+      this.context.moveTo(rx + r, ry);
+      this.context.lineTo(rx + w - r, ry);
+      this.context.quadraticCurveTo(rx + w, ry, rx + w, ry + r);
+      this.context.lineTo(rx + w, ry + h - r);
+      this.context.quadraticCurveTo(rx + w, ry + h, rx + w - r, ry + h);
+      this.context.lineTo(rx + r, ry + h);
+      this.context.quadraticCurveTo(rx, ry + h, rx, ry + h - r);
+      this.context.lineTo(rx, ry + r);
+      this.context.quadraticCurveTo(rx, ry, rx + r, ry);
+      this.context.closePath();
+    }
+    this.context.stroke();
+    if (transform) this.closeDrawOp();
+  }
+  drawRound(x, y, w, h, color) {
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    this.context.lineWidth = this.line_width;
+    w = Math.abs(w);
+    h = Math.abs(h);
+    if (this.initDrawOp(x, -y)) {
+      this.context.beginPath();
+      this.context.ellipse(-this.anchor_x * w / 2, this.anchor_y * h / 2, w / 2, h / 2, 0, 0, Math.PI * 2, false);
+      this.context.stroke();
+      this.closeDrawOp();
+    } else {
+      this.context.beginPath();
+      this.context.ellipse(x - this.anchor_x * w / 2, -y + this.anchor_y * h / 2, w / 2, h / 2, 0, 0, Math.PI * 2, false);
+      this.context.stroke();
+    }
+  }
+  drawLine(x1, y1, x2, y2, color) {
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    this.context.lineWidth = this.line_width;
+    const transform = this.initDrawOp(0, 0, false);
+    this.context.beginPath();
+    this.context.moveTo(x1, -y1);
+    this.context.lineTo(x2, -y2);
+    this.context.stroke();
+    if (transform) this.closeDrawOp();
+  }
+  drawPolygon(args) {
+    const { color, points } = this.extractPoints(args);
+    if (!points || points.length < 4) return;
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    this.context.lineWidth = this.line_width;
+    const len = Math.floor(points.length / 2);
+    const transform = this.initDrawOp(0, 0, false);
+    this.context.beginPath();
+    this.context.moveTo(points[0], -points[1]);
+    for (let i = 1; i < len; i++) {
+      this.context.lineTo(points[i * 2], -points[i * 2 + 1]);
+    }
+    this.context.closePath();
+    this.context.stroke();
+    if (transform) this.closeDrawOp();
+  }
+  drawPolyline(args) {
+    const { color, points } = this.extractPoints(args);
+    if (!points || points.length < 4) return;
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    this.context.lineWidth = this.line_width;
+    const len = Math.floor(points.length / 2);
+    const transform = this.initDrawOp(0, 0, false);
+    this.context.beginPath();
+    this.context.moveTo(points[0], -points[1]);
+    for (let i = 1; i < len; i++) {
+      this.context.lineTo(points[i * 2], -points[i * 2 + 1]);
+    }
+    this.context.stroke();
+    if (transform) this.closeDrawOp();
+  }
+  fillPolygon(args) {
+    const { color, points } = this.extractPoints(args);
+    if (!points || points.length < 4) return;
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    const len = Math.floor(points.length / 2);
+    const transform = this.initDrawOp(0, 0, false);
+    this.context.beginPath();
+    this.context.moveTo(points[0], -points[1]);
+    for (let i = 1; i < len; i++) {
+      this.context.lineTo(points[i * 2], -points[i * 2 + 1]);
+    }
+    this.context.fill();
+    if (transform) this.closeDrawOp();
+  }
+  drawQuadCurve(args) {
+    const { color, points } = this.extractPoints(args);
+    if (!points || points.length < 4) return;
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    this.context.lineWidth = this.line_width;
+    const transform = this.initDrawOp(0, 0, false);
+    this.context.beginPath();
+    this.context.moveTo(points[0], -points[1]);
+    let index = 2;
+    while (index <= points.length - 4) {
+      this.context.quadraticCurveTo(points[index], -points[index + 1], points[index + 2], -points[index + 3]);
+      index += 4;
+    }
+    this.context.stroke();
+    if (transform) this.closeDrawOp();
+  }
+  drawBezierCurve(args) {
+    const { color, points } = this.extractPoints(args);
+    if (!points || points.length < 4) return;
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    this.context.lineWidth = this.line_width;
+    const transform = this.initDrawOp(0, 0, false);
+    this.context.beginPath();
+    this.context.moveTo(points[0], -points[1]);
+    let index = 2;
+    while (index <= points.length - 6) {
+      this.context.bezierCurveTo(points[index], -points[index + 1], points[index + 2], -points[index + 3], points[index + 4], -points[index + 5]);
+      index += 6;
+    }
+    this.context.stroke();
+    if (transform) this.closeDrawOp();
+  }
+  drawArc(x, y, radius, angle1, angle2, ccw, color) {
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    this.context.lineWidth = this.line_width;
+    if (this.initDrawOp(x, -y)) {
+      this.context.beginPath();
+      this.context.arc(0, 0, radius, -angle1 / 180 * Math.PI, -angle2 / 180 * Math.PI, ccw);
+      this.context.stroke();
+      this.closeDrawOp();
+    } else {
+      this.context.beginPath();
+      this.context.arc(x, -y, radius, -angle1 / 180 * Math.PI, -angle2 / 180 * Math.PI, ccw);
+      this.context.stroke();
+    }
+  }
+  fillArc(x, y, radius, angle1, angle2, ccw, color) {
+    if (color) this.setColor(color);
+    this.context.globalAlpha = this.alpha;
+    if (this.initDrawOp(x, -y)) {
+      this.context.beginPath();
+      this.context.arc(0, 0, radius, -angle1 / 180 * Math.PI, -angle2 / 180 * Math.PI, ccw);
+      this.context.fill();
+      this.closeDrawOp();
+    } else {
+      this.context.beginPath();
+      this.context.arc(x, -y, radius, -angle1 / 180 * Math.PI, -angle2 / 180 * Math.PI, ccw);
+      this.context.fill();
+    }
+  }
+  extractPoints(args) {
+    let color;
+    let points;
+    if (args.length > 0 && args.length % 2 === 1 && typeof args[args.length - 1] === "string") {
+      color = args[args.length - 1];
+      points = args.slice(0, -1);
+    } else if (Array.isArray(args[0])) {
+      if (args[1] && typeof args[1] === "string") {
+        color = args[1];
+      }
+      points = args[0];
+    } else {
+      points = args;
+    }
+    return {
+      color,
+      points
+    };
+  }
+};
+export {
+  PrimitiveScreen
+};
+//# sourceMappingURL=primitives-screen.mjs.map