scriptable-testlab/dist/cjs/mocks/ui/draw-context.js

A lightweight, efficient tool designed to manage and update scripts for Scriptable.

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var draw_context_exports = {};
__export(draw_context_exports, {
  MockDrawContext: () => MockDrawContext
});
module.exports = __toCommonJS(draw_context_exports);
var import_scriptable_abstract = require("scriptable-abstract");
var import_image = require("../media/image");
var import_size = require("./size");
const DEFAULT_STATE = {
  size: new import_size.MockSize(0, 0),
  respectScreenScale: true,
  opaque: false,
  lineWidth: 1,
  canvas: new import_image.MockImage(),
  textAlignment: "left",
  operations: []
};
class MockDrawContext extends import_scriptable_abstract.AbsDrawContext {
  constructor() {
    super(DEFAULT_STATE);
  }
  /**
   * Creates a new drawing context with the specified size.
   */
  static create(width, height) {
    const context = new MockDrawContext();
    context.size = new import_size.MockSize(width, height);
    return context;
  }
  get size() {
    return this.state.size;
  }
  set size(value) {
    this.setState({ size: value });
  }
  get respectScreenScale() {
    return this.state.respectScreenScale;
  }
  set respectScreenScale(value) {
    this.setState({ respectScreenScale: value });
  }
  get opaque() {
    return this.state.opaque;
  }
  set opaque(value) {
    this.setState({ opaque: value });
  }
  /**
   * Gets the image that was drawn in the context.
   */
  getImage() {
    return this.state.canvas;
  }
  /**
   * Draws an image in the specified rect.
   */
  drawImageInRect(image, rect) {
    this.state.operations.push({
      type: "image",
      data: { image, rect, mode: "rect" }
    });
    this.setState({
      canvas: image,
      operations: this.state.operations
    });
  }
  /**
   * Draws an image at the specified point.
   */
  drawImageAtPoint(image, point) {
    this.state.operations.push({
      type: "image",
      data: { image, point, mode: "point" }
    });
    this.setState({
      canvas: image,
      operations: this.state.operations
    });
  }
  /**
   * Sets the fill color used when filling paths and shapes.
   */
  setFillColor(color) {
    this.setState({ fillColor: color });
  }
  /**
   * Sets the stroke color used when stroking paths and shapes.
   */
  setStrokeColor(color) {
    this.setState({ strokeColor: color });
  }
  /**
   * Sets the width of lines when stroking paths and shapes.
   */
  setLineWidth(width) {
    if (width < 0) {
      throw new Error("Line width must be non-negative");
    }
    this.setState({ lineWidth: width });
  }
  /**
   * Begins a new path.
   */
  beginPath() {
    this.setState({ currentPath: void 0 });
  }
  /**
   * Moves to a point in the current path.
   */
  moveToPoint(point) {
    this.state.operations.push({
      type: "path",
      data: { type: "moveTo", point }
    });
    this.setState({ operations: this.state.operations });
  }
  /**
   * Adds a line to a point in the current path.
   */
  addLineToPoint(point) {
    this.state.operations.push({
      type: "path",
      data: { type: "lineTo", point }
    });
    this.setState({ operations: this.state.operations });
  }
  /**
   * Adds a curve to the current path.
   */
  addCurveToPoint(point, control1, control2) {
    this.state.operations.push({
      type: "path",
      data: { type: "curveTo", point, control1, control2 }
    });
    this.setState({ operations: this.state.operations });
  }
  /**
   * Adds a quadratic curve to the current path.
   */
  addQuadCurveToPoint(point, control) {
    this.state.operations.push({
      type: "path",
      data: { type: "quadCurveTo", point, control }
    });
    this.setState({ operations: this.state.operations });
  }
  /**
   * Closes the current path.
   */
  closePath() {
    this.state.operations.push({
      type: "path",
      data: { type: "close" }
    });
    this.setState({ operations: this.state.operations });
  }
  /**
   * Strokes the current path.
   */
  strokePath() {
    this.state.operations.push({
      type: "path",
      data: {
        type: "stroke",
        color: this.state.strokeColor,
        lineWidth: this.state.lineWidth
      }
    });
    this.setState({ operations: this.state.operations });
  }
  /**
   * Fills the current path.
   */
  fillPath() {
    this.state.operations.push({
      type: "path",
      data: {
        type: "fill",
        color: this.state.fillColor
      }
    });
    this.setState({ operations: this.state.operations });
  }
  /**
   * Fills and strokes the current path.
   */
  fillAndStrokePath() {
    this.fillPath();
    this.strokePath();
  }
  /**
   * Adds a rectangle to the current path.
   */
  addRect(rect) {
    const { x, y, width, height } = rect;
    this.moveToPoint({ x, y });
    this.addLineToPoint({ x: x + width, y });
    this.addLineToPoint({ x: x + width, y: y + height });
    this.addLineToPoint({ x, y: y + height });
    this.closePath();
  }
  /**
   * Adds an ellipse to the current path.
   */
  addEllipseInRect(rect) {
    const { x, y, width, height } = rect;
    const kappa = 0.5522848;
    const ox = width / 2 * kappa;
    const oy = height / 2 * kappa;
    const xe = x + width;
    const ye = y + height;
    const xm = x + width / 2;
    const ym = y + height / 2;
    this.moveToPoint({ x, y: ym });
    this.addCurveToPoint({ x: xm, y }, { x, y: y + oy }, { x: xm - ox, y });
    this.addCurveToPoint({ x: xe, y: ym }, { x: xm + ox, y }, { x: xe, y: ym - oy });
    this.addCurveToPoint({ x: xm, y: ye }, { x: xe, y: ym + oy }, { x: xm + ox, y: ye });
    this.addCurveToPoint({ x, y: ym }, { x: xm - ox, y: ye }, { x, y: ym + oy });
  }
  /**
   * Fills a rectangle.
   */
  fill(rect) {
    this.fillRect(rect);
  }
  /**
   * Fills a rectangle.
   */
  fillRect(rect) {
    this.state.operations.push({
      type: "rect",
      data: { rect, mode: "fill", color: this.state.fillColor }
    });
    this.setState({ operations: this.state.operations });
  }
  /**
   * Fills an ellipse.
   */
  fillEllipse(rect) {
    this.state.operations.push({
      type: "ellipse",
      data: { rect, mode: "fill", color: this.state.fillColor }
    });
    this.setState({ operations: this.state.operations });
  }
  /**
   * Strokes a rectangle.
   */
  stroke(rect) {
    this.strokeRect(rect);
  }
  /**
   * Strokes a rectangle.
   */
  strokeRect(rect) {
    this.state.operations.push({
      type: "rect",
      data: {
        rect,
        mode: "stroke",
        color: this.state.strokeColor,
        lineWidth: this.state.lineWidth
      }
    });
    this.setState({ operations: this.state.operations });
  }
  /**
   * Strokes an ellipse.
   */
  strokeEllipse(rect) {
    this.state.operations.push({
      type: "ellipse",
      data: {
        rect,
        mode: "stroke",
        color: this.state.strokeColor,
        lineWidth: this.state.lineWidth
      }
    });
    this.setState({ operations: this.state.operations });
  }
  /**
   * Adds a path to the context.
   */
  addPath(path) {
    this.setState({ currentPath: path });
  }
  /**
   * Draws text at a position.
   */
  drawText(text, pos) {
    if (!this.state.textColor) {
      throw new Error("Text color must be set before drawing text");
    }
    if (!this.state.font) {
      throw new Error("Font must be set before drawing text");
    }
    this.state.operations.push({
      type: "text",
      data: {
        text,
        pos,
        color: this.state.textColor,
        font: this.state.font,
        alignment: this.state.textAlignment
      }
    });
    this.setState({ operations: this.state.operations });
  }
  /**
   * Draws text in a rectangle.
   */
  drawTextInRect(text, rect) {
    if (!this.state.textColor) {
      throw new Error("Text color must be set before drawing text");
    }
    if (!this.state.font) {
      throw new Error("Font must be set before drawing text");
    }
    this.state.operations.push({
      type: "text",
      data: {
        text,
        rect,
        color: this.state.textColor,
        font: this.state.font,
        alignment: this.state.textAlignment
      }
    });
    this.setState({ operations: this.state.operations });
  }
  /**
   * Sets the font to use when drawing text.
   */
  setFont(font) {
    this.setState({ font });
  }
  /**
   * Sets the text color used when drawing text.
   */
  setTextColor(color) {
    this.setState({ textColor: color });
  }
  /**
   * Specifies that texts should be left aligned.
   */
  setTextAlignedLeft() {
    this.setState({ textAlignment: "left" });
  }
  /**
   * Specifies that texts should be center aligned.
   */
  setTextAlignedCenter() {
    this.setState({ textAlignment: "center" });
  }
  /**
   * Specifies that texts should be right aligned.
   */
  setTextAlignedRight() {
    this.setState({ textAlignment: "right" });
  }
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  MockDrawContext
});
//# sourceMappingURL=draw-context.js.map