When modeling with @observable decorator

[codemilli]

Hello all,
I am building a Canvas Image Editor with MobX, and I use decorator to make state observable.
Whenever changes detected, autorun is called and read every properties from model and draw canvas application.

I want autorun is called when image is loaded, so I did modeling like below

class A {
  @observable
  private _image: HTMLImageElement;

  public getImage() {
    return this._image;
  }
}

For me, making HTMLImageElement type observable data seems not that good, is this valid or is there any better modeling?

[kubk]

Mobx skips converting unknown classes. You can check it by running console.log(isObservable(this._image)). It'll give false.

I want autorun is called when image is loaded, so I did modeling like below

No need to use autorun for that. You can collocate event with reaction like this:

loadImage(image: HTMLImageElement) {
  // run code from autorun
}

[codemilli]

"Mobx skips converting unknown classes." now I got it. Thank you.
So mobx observes only the reference change?

[codemilli]

In my case, I have to place that logic in the autorun.

[kubk]

So mobx observes only the reference change?

@codemilli Mobx just ignores unknown classes, so they don't become observable at all.

[codemilli]

So, if I wanna observe whether image is loaded and get loaded image in autorun, I need another flags like below, do I?

class A {
  private _image: HTMLImageElement;
  
  @observable
  private _imageLoaded = false;
  
  @computed
  public get image() {
    return this._imageLoaded ? this._image : null;
  };  

  public loadImage() { ....  }
}

[kubk]

@codemilli That should work 👍