Example #1
0
  render() {
    if (this.highlightedInstance === null) {
      this.highlightRectangle.visible = false;
      return;
    }

    const highlightRectangle = transformRect(
      this.toCanvasCoordinates,
      this.instanceMeasurer.getInstanceRect(this.highlightedInstance)
    );

    this.highlightRectangle.visible = true;
    this.highlightRectangle.clear();
    this.highlightRectangle.beginFill(0xeeeeff);
    this.highlightRectangle.fillAlpha = 0.1;
    this.highlightRectangle.alpha = 0.8;
    this.highlightRectangle.lineStyle(1, 0x000000, 1);
    this.highlightRectangle.drawRect(
      highlightRectangle.x,
      highlightRectangle.y,
      highlightRectangle.width,
      highlightRectangle.height
    );
    this.highlightRectangle.endFill();
  }
Example #2
0
File: Grid.js Project: Lizard-13/GD
  render() {
    const options = this.options;

    if (!options.grid) {
      this.pixiGrid.visible = false;
      return;
    }

    this.pixiGrid.visible = true;
    this.pixiGrid.clear();
    this.pixiGrid.beginFill(0x6868e8);
    this.pixiGrid.lineStyle(1, 0x6868e8, 1);
    this.pixiGrid.fillAlpha = 0.1;
    this.pixiGrid.alpha = 0.8;

    const sceneStartPoint = this.viewPosition.toSceneCoordinates(0, 0);
    const sceneEndPoint = this.viewPosition.toSceneCoordinates(
      this.viewPosition.getWidth(),
      this.viewPosition.getHeight()
    );

    const startXPos =
      Math.floor(sceneStartPoint[0] / options.gridWidth) * options.gridWidth;
    const startYPos =
      Math.floor(sceneStartPoint[1] / options.gridHeight) * options.gridHeight;

    const endXPos =
      Math.ceil(sceneEndPoint[0] / options.gridWidth) * options.gridWidth;
    const endYPos =
      Math.ceil(sceneEndPoint[1] / options.gridHeight) * options.gridHeight;

    for (
      let Xpos = startXPos + options.gridOffsetX;
      Xpos < endXPos;
      Xpos += options.gridWidth
    ) {
      const start = this.viewPosition.toCanvasCoordinates(Xpos, startYPos);
      const end = this.viewPosition.toCanvasCoordinates(Xpos, endYPos);

      this.pixiGrid.moveTo(start[0], start[1]);
      this.pixiGrid.lineTo(end[0], end[1]);
    }

    for (
      let Ypos = startYPos + options.gridOffsetY;
      Ypos < endYPos;
      Ypos += options.gridHeight
    ) {
      const start = this.viewPosition.toCanvasCoordinates(startXPos, Ypos);
      const end = this.viewPosition.toCanvasCoordinates(endXPos, Ypos);

      this.pixiGrid.moveTo(start[0], start[1]);
      this.pixiGrid.lineTo(end[0], end[1]);
    }

    this.pixiGrid.endFill();
  }
Example #3
0
    render() {
        this.graphics.clear();
        this.graphics.position.x = this.positionX - this.options.center[0];
        this.graphics.position.y = this.positionY - this.options.center[1];

        this.graphics.beginFill(this.options.fillColor, this.options.fillAlpha);
        this.graphics.lineStyle(5, colors.secondary);
        this.graphics.moveTo(this.points[0][0], this.points[0][1]);
        for (var i = 1; i < this.points.length; i++) {
            var [pointX, pointY] = this.points[i];
            this.graphics.lineTo(pointX, pointY);
        }
    }