GDevelop/Extensions/PrimitiveDrawing/shapepainterruntimeobject.ts

/*
 *  GDevelop JS Platform
 *  2013 Florian Rival (Florian.Rival@gmail.com)
 */
namespace gdjs {
  /** Represents a color in RGB Format */
  export type RGBColor = {
    /** The Red component of the color, from 0 to 255. */
    r: integer;
    /** The Green component of the color, from 0 to 255. */
    g: integer;
    /** The Blue component of the color, from 0 to 255. */
    b: integer;
  };

  /** Initial properties for a for {@link gdjs.ShapePainterRuntimeObject}. */
  export type ShapePainterObjectDataType = {
    /** The color (in RGB format) of the inner part of the painted shape */
    fillColor: RGBColor;
    /** The color (in RGB format) of the outline of the painted shape */
    outlineColor: RGBColor;
    /** The opacity of the inner part of the painted shape, from 0 to 255 */
    fillOpacity: float;
    /** The opacity of the outline of the painted shape, from 0 to 255 */
    outlineOpacity: float;
    /** The size of the outline of the painted shape, in pixels. */
    outlineSize: float;
    /** Use absolute coordinates? */
    absoluteCoordinates: boolean;
    /** Clear the previous render before the next draw? */
    clearBetweenFrames: boolean;
  };

  export type ShapePainterObjectData = ObjectData & ShapePainterObjectDataType;

  /**
   * The ShapePainterRuntimeObject allows to draw graphics shapes on screen.
   */
  export class ShapePainterRuntimeObject extends gdjs.RuntimeObject {
    _fillColor: integer;
    _outlineColor: integer;
    _fillOpacity: float;
    _outlineOpacity: float;
    _outlineSize: float;
    _absoluteCoordinates: boolean;
    _clearBetweenFrames: boolean;
    _renderer: gdjs.ShapePainterRuntimeObjectRenderer;

    /**
     * @param runtimeScene The scene the object belongs to.
     * @param shapePainterObjectData The initial properties of the object
     */
    constructor(
      runtimeScene: gdjs.RuntimeScene,
      shapePainterObjectData: ShapePainterObjectData
    ) {
      super(runtimeScene, shapePainterObjectData);
      this._fillColor = parseInt(
        gdjs.rgbToHex(
          shapePainterObjectData.fillColor.r,
          shapePainterObjectData.fillColor.g,
          shapePainterObjectData.fillColor.b
        ),
        16
      );
      this._outlineColor = parseInt(
        gdjs.rgbToHex(
          shapePainterObjectData.outlineColor.r,
          shapePainterObjectData.outlineColor.g,
          shapePainterObjectData.outlineColor.b
        ),
        16
      );
      this._fillOpacity = shapePainterObjectData.fillOpacity;
      this._outlineOpacity = shapePainterObjectData.outlineOpacity;
      this._outlineSize = shapePainterObjectData.outlineSize;
      this._absoluteCoordinates = shapePainterObjectData.absoluteCoordinates;
      this._clearBetweenFrames = shapePainterObjectData.clearBetweenFrames;
      this._renderer = new gdjs.ShapePainterRuntimeObjectRenderer(
        this,
        runtimeScene
      );

      // *ALWAYS* call `this.onCreated()` at the very end of your object constructor.
      this.onCreated();
    }

    getRendererObject() {
      return this._renderer.getRendererObject();
    }

    updateFromObjectData(
      oldObjectData: ShapePainterObjectData,
      newObjectData: ShapePainterObjectData
    ): boolean {
      if (
        oldObjectData.fillColor.r !== newObjectData.fillColor.r ||
        oldObjectData.fillColor.g !== newObjectData.fillColor.g ||
        oldObjectData.fillColor.b !== newObjectData.fillColor.b
      ) {
        this.setFillColor(
          '' +
            newObjectData.fillColor.r +
            ';' +
            newObjectData.fillColor.g +
            ';' +
            newObjectData.fillColor.b
        );
      }
      if (
        oldObjectData.outlineColor.r !== newObjectData.outlineColor.r ||
        oldObjectData.outlineColor.g !== newObjectData.outlineColor.g ||
        oldObjectData.outlineColor.b !== newObjectData.outlineColor.b
      ) {
        this.setOutlineColor(
          '' +
            newObjectData.outlineColor.r +
            ';' +
            newObjectData.outlineColor.g +
            ';' +
            newObjectData.outlineColor.b
        );
      }
      if (oldObjectData.fillOpacity !== newObjectData.fillOpacity) {
        this.setFillOpacity(newObjectData.fillOpacity);
      }
      if (oldObjectData.outlineOpacity !== newObjectData.outlineOpacity) {
        this.setOutlineOpacity(newObjectData.outlineOpacity);
      }
      if (oldObjectData.outlineSize !== newObjectData.outlineSize) {
        this.setOutlineSize(newObjectData.outlineSize);
      }
      if (
        oldObjectData.absoluteCoordinates !== newObjectData.absoluteCoordinates
      ) {
        this._absoluteCoordinates = newObjectData.absoluteCoordinates;
        this._renderer.updateXPosition();
        this._renderer.updateYPosition();
      }
      if (
        oldObjectData.clearBetweenFrames !== newObjectData.clearBetweenFrames
      ) {
        this._clearBetweenFrames = newObjectData.clearBetweenFrames;
      }
      return true;
    }

    stepBehaviorsPreEvents(runtimeScene: gdjs.RuntimeScene) {
      //We redefine stepBehaviorsPreEvents just to clear the graphics before running events.
      if (this._clearBetweenFrames) {
        this.clear();
      }
      super.stepBehaviorsPreEvents(runtimeScene);
    }

    /**
     * Clear the graphics.
     */
    clear() {
      this._renderer.clear();
    }

    getVisibilityAABB() {
      return this._absoluteCoordinates ? null : this.getAABB();
    }

    drawRectangle(x1: float, y1: float, x2: float, y2: float) {
      this._renderer.drawRectangle(x1, y1, x2, y2);
    }

    drawCircle(x: float, y: float, radius: float) {
      this._renderer.drawCircle(x, y, radius);
    }

    drawLine(x1: float, y1: float, x2: float, y2: float, thickness: float) {
      this._renderer.drawLine(x1, y1, x2, y2, thickness);
    }

    drawLineV2(x1: float, y1: float, x2: float, y2: float, thickness: float) {
      this._renderer.drawLineV2(x1, y1, x2, y2, thickness);
    }

    drawEllipse(centerX: float, centerY: float, width: float, height: float) {
      this._renderer.drawEllipse(centerX, centerY, width, height);
    }

    drawRoundedRectangle(
      startX1: float,
      startY1: float,
      endX2: float,
      endY2: float,
      radius: float
    ) {
      this._renderer.drawRoundedRectangle(
        startX1,
        startY1,
        endX2,
        endY2,
        radius
      );
    }

    drawStar(
      centerX: float,
      centerY: float,
      points: float,
      radius: float,
      innerRadius: float,
      rotation: float
    ) {
      this._renderer.drawStar(
        centerX,
        centerY,
        points,
        radius,
        innerRadius,
        rotation
      );
    }

    drawArc(
      centerX: float,
      centerY: float,
      radius: float,
      startAngle: float,
      endAngle: float,
      anticlockwise: boolean,
      closePath: boolean
    ) {
      this._renderer.drawArc(
        centerX,
        centerY,
        radius,
        startAngle,
        endAngle,
        anticlockwise,
        closePath
      );
    }

    drawBezierCurve(
      x1: float,
      y1: float,
      cpX: float,
      cpY: float,
      cpX2: float,
      cpY2: float,
      x2: float,
      y2: float
    ) {
      this._renderer.drawBezierCurve(x1, y1, cpX, cpY, cpX2, cpY2, x2, y2);
    }

    drawQuadraticCurve(
      x1: float,
      y1: float,
      cpX: float,
      cpY: float,
      x2: float,
      y2: float
    ) {
      this._renderer.drawQuadraticCurve(x1, y1, cpX, cpY, x2, y2);
    }

    beginFillPath(x1: float, y1: float) {
      this._renderer.beginFillPath();
      this._renderer.drawPathMoveTo(x1, y1);
    }

    endFillPath() {
      this._renderer.endFillPath();
    }

    drawPathMoveTo(x1: float, y1: float) {
      this._renderer.drawPathMoveTo(x1, y1);
    }

    drawPathLineTo(x1: float, y1: float) {
      this._renderer.drawPathLineTo(x1, y1);
    }

    drawPathBezierCurveTo(
      cpX: float,
      cpY: float,
      cpX2: float,
      cpY2: float,
      toX: float,
      toY: float
    ) {
      this._renderer.drawPathBezierCurveTo(cpX, cpY, cpX2, cpY2, toX, toY);
    }

    drawPathArc(
      cx: float,
      cy: float,
      radius: float,
      startAngle: float,
      endAngle: float,
      anticlockwise: boolean
    ) {
      this._renderer.drawPathArc(
        cx,
        cy,
        radius,
        startAngle,
        endAngle,
        anticlockwise
      );
    }

    drawPathQuadraticCurveTo(cpX: float, cpY: float, toX: float, toY: float) {
      this._renderer.drawPathQuadraticCurveTo(cpX, cpY, toX, toY);
    }

    closePath() {
      this._renderer.closePath();
    }

    setClearBetweenFrames(value: boolean): void {
      this._clearBetweenFrames = value;
    }

    isClearedBetweenFrames(): boolean {
      return this._clearBetweenFrames;
    }

    setCoordinatesRelative(value: boolean): void {
      this._absoluteCoordinates = !value;
    }

    areCoordinatesRelative(): boolean {
      return !this._absoluteCoordinates;
    }

    /**
     *
     * @param rgbColor semicolon separated decimal values
     */
    setFillColor(rgbColor: string): void {
      const colors = rgbColor.split(';');
      if (colors.length < 3) {
        return;
      }
      this._fillColor = parseInt(
        gdjs.rgbToHex(
          parseInt(colors[0], 10),
          parseInt(colors[1], 10),
          parseInt(colors[2], 10)
        ),
        16
      );
    }

    getFillColorR(): integer {
      return gdjs.hexNumberToRGB(this._fillColor).r;
    }
    getFillColorG(): integer {
      return gdjs.hexNumberToRGB(this._fillColor).g;
    }
    getFillColorB(): integer {
      return gdjs.hexNumberToRGB(this._fillColor).b;
    }

    /**
     *
     * @param rgbColor semicolon separated decimal values
     */
    setOutlineColor(rgbColor: string): void {
      const colors = rgbColor.split(';');
      if (colors.length < 3) {
        return;
      }
      this._outlineColor = parseInt(
        gdjs.rgbToHex(
          parseInt(colors[0], 10),
          parseInt(colors[1], 10),
          parseInt(colors[2], 10)
        ),
        16
      );
      this._renderer.updateOutline();
    }

    getOutlineColorR(): integer {
      return gdjs.hexNumberToRGB(this._outlineColor).r;
    }
    getOutlineColorG(): integer {
      return gdjs.hexNumberToRGB(this._outlineColor).g;
    }
    getOutlineColorB(): integer {
      return gdjs.hexNumberToRGB(this._outlineColor).b;
    }

    setOutlineSize(size: float): void {
      this._outlineSize = size;
      this._renderer.updateOutline();
    }

    getOutlineSize() {
      return this._outlineSize;
    }

    /**
     *
     * @param opacity from 0 to 255
     */
    setFillOpacity(opacity: float): void {
      this._fillOpacity = opacity;
    }

    /**
     *
     * @returns an opacity value from 0 to 255.
     */
    getFillOpacity() {
      return this._fillOpacity;
    }

    /**
     *
     * @param opacity from 0 to 255
     */
    setOutlineOpacity(opacity: float): void {
      this._outlineOpacity = opacity;
      this._renderer.updateOutline();
    }

    /**
     *
     * @returns an opacity value from 0 to 255.
     */
    getOutlineOpacity() {
      return this._outlineOpacity;
    }

    setX(x: float): void {
      if (x === this.x) {
        return;
      }
      super.setX(x);
      this._renderer.updateXPosition();
    }

    setY(y: float): void {
      if (y === this.y) {
        return;
      }
      super.setY(y);
      this._renderer.updateYPosition();
    }

    getWidth(): float {
      return 32;
    }

    getHeight(): float {
      return 32;
    }
  }
  gdjs.registerObject(
    'PrimitiveDrawing::Drawer',
    gdjs.ShapePainterRuntimeObject
  );
  ShapePainterRuntimeObject.supportsReinitialization = false;
}