Pixijs editor

[Handzo]

Hello! I wanna make graphical editor base on pixijs! And I have several problems.

1) Scene consists of multiple PIXI.Graphics (component). Each component has bounding box shown when you edit component. If you drag bounding box corner the component should scale up/down (standard behaviour for graphical editor). Each component may consists of several components. I've managed to make it work. But if I flip horizontally several components. All calculations work abnormally. Same thing with rotation;

{
  name: "root",
  scale: { x: -1 },
  children: [
    {
      name: "comp1",
  	  scale: { x: -1 },
      children: [
        {
          name: "comp2",
  		  scale: { x: -1 },
        }
      ]
    }
  ]
}

All works as suppose to as long as all components have scale.x > 0 and scale.y > 0. Otherwise I have to get scale sign up to stage. Any suggestions? Maybe I should use transform directly?
2)  I need to draw bounding box on top of all components. Currently I am using pixi-layers. Each component has bounding box (PIXI.Graphics) as component child. And component.parentLayer = boundsLayer. It works, but I don't think it is best solution.

[ivan.popelyshev]

i dont have enough time. in short, if you dont know how 2d transforms, matrices and localBounds/bounds work - you are in a big problem. also, "setFromMatrix" might be your best friend in some cases.

[Handzo]

I think that I can figure out how 2d transform works. I just want to know if it will solve the problem?

[ivan.popelyshev]

the problem with "skewing" when you rotate and scale at the same time  is usually solved with setFromMatrix, however scales can change sign because of that, and you have to handle a few cases to preserve them. +1 for using layers, thank you!

[Handzo]

I don't need to rotate and scale simultaneously. I will try to make it work via transform. Thank you very much!

[ivan.popelyshev]

huh. then what exactly is the problem?

[Handzo]

The problem is that I had some troubles with nested objects with scale.x = -1 or scale.y = -1. But if I will use transform it might be easy to manage

[Handzo]

Still can not solve the problem with rotation. Example:

RotateGrip instance attached to Component (PIXI.Graphics) which I to want to rotate;

class RotateGrip extends PIXI.Graphics {
    constructor() {
        super();
 
        this._isRotating = false;
        this.interactive = true;
        this.on('pointerdown', this.onRotateStart, this);
        this.on('pointerup', this.onRotateEnd, this);
        this.on('pointerupoutside', this.onRotateEnd, this);
    }
 
    onRotateStart(event) {      
        if (this._isRotating)
            return;
        this._isRotating = true;
        this.on('pointermove', this.onRotate, this);
        
        this.globalPivot = this.parent.toGlobal(this.parent.pivot);
        this.prevPoint = event.data.global;
        this.prevPoint.x -= this.globalPivot.x;
        this.prevPoint.y -= this.globalPivot.y;
    }
 
    onRotateEnd() {
        if (!this._isRotating)
            return;
        this._isRotating = false;
        this.off('pointermove', this.onRotate, this);
    }
 
    onRotate(event) {
        if (!this._isRotating)
            return;
 
        // current position relative to global parent pivot
        const p = event.data.global;
        p.x -= this.globalPivot.x;
        p.y -= this.globalPivot.y;
 
        // angle between prevPoint and p vectors
        const angle = Math.atan2(-this.startPoint.y, this.startPoint.x) - Math.atan2(-p.y, p.x);
 
        // rotate matrix around globalPivot
        const m = this.parent.worldTransform.clone();
        m.translate(-this.globalPivot.x, -this.globalPivot.y);
        m.rotate(angle);
        m.translate(this.globalPivot.x, this.globalPivot.y);
 
        this.parent.transform.setFromMatrix(m);
      
      	this.prevPoint.x = p.x;
      	this.prevPoint.y = p.y;
    }
}

It doesn't work as I thought it should.

1) I'm getting halved angle. It works if I will do m.rotate(angle*2) I can't figure out why);

2) If I have such structure:

{
  root: {
    scale: { x: -0,5, y: -0.5 },
    children: [
      component: {
      	children: [
      	  RotateGrip: {}
    	]
      }
    ]
  }
}

I'm rotating 'component' object  with my RotatgeGrip,

// rotate matrix around globalPivot
const m = this.parent.worldTransform.clone();
m.translate(-this.globalPivot.x, -this.globalPivot.y);
m.rotate(angle);
m.translate(this.globalPivot.x, this.globalPivot.y);

// matrix m scale factor = 0.05, if I decompose it to parent transform
// scale factor applies to localTransorm as well, Math.abs(this.parent.scale.x) === 0.5 and Math.abs(this.parent.scale.y) === 0.5
this.parent.transform.setFromMatrix(m);

Is there any way to apply rotation ignoring scale?

Edited August 27, 2021 by Handzo

[Handzo]

I solve problems but it leads me to another one. I have global rotation angle, how do I get sign of rotation. scale affects on rotation sign. And components, which have ascendents flipped by xAxis or yAxis, rotating in wrong direction