mobx#observe JavaScript Examples

componentDidMount() {
    Promise.all(this.props.annotation.objects.map(o => {
      return o.isReady
        ? Promise.resolve(o.isReady)
        : new Promise(resolve => {
          const dispose = observe(o, "isReady", ()=>{
            dispose();
            resolve();
          });
        });
    })).then(()=>{
      // ~2 ticks for canvas to be rendered and resized completely
      setTimeout(this.props.onFinish, 32);
    });
  }

componentDidMount() {
    const { item } = this.props;

    item.setNeedsUpdateCallbacks(
      this._moveElementsToWorkingNode,
      this._returnElementsFromWorkingNode,
    );

    if (!item.inline) {
      this.dispose = observe(item, "_isReady", this.updateLoadingVisibility, true);
    }
  }

observeQueryParams() {
		observe(
			rootStore.routingStore,
			'queryParams',
			async change => {
				if (this.loading) {
					return;
				}

				const { searchQuery = '' } = toJS(change.newValue);

				if (rootStore.routingStore.getPage() === pageNames.manageLiveEvents) {
					await this.reload({ searchQuery });
				}
			}
		);
	}

observeQueryParams() {
		observe(
			rootStore.routingStore,
			'queryParams',
			change => {
				if (this.loading) {
					return;
				}

				const { dateModified = '', dateCreated = '' } =
					toJS(change.newValue);

				if (dateModified === this.selectedFilterParams.dateModified &&
					dateCreated === this.selectedFilterParams.dateCreated
				) {
					return;
				}

				this.selectedFilterParams = { dateModified, dateCreated };
			}
		);
	}

observeQueryParams() {
		observe(
			rootStore.routingStore,
			'queryParams',
			change => {
				if (this.loading) {
					return;
				}

				const {
					searchQuery: updatedSearchQuery = '',
					sortQuery: updatedSortQuery = 'updatedAt:desc',
					dateCreated: updatedDateCreated = '',
					dateModified: updatedDateModified = ''
				} = toJS(change.newValue);

				const { searchQuery, sortQuery, dateCreated, dateModified } =
					this.queryParams;

				if (updatedSearchQuery === searchQuery && updatedSortQuery === sortQuery &&
					updatedDateCreated === dateCreated && updatedDateModified === dateModified
				) {
					return;
				}

				this.queryParams = {
					searchQuery: updatedSearchQuery,
					sortQuery: updatedSortQuery,
					dateCreated: updatedDateCreated,
					dateModified: updatedDateModified
				};
				this.reloadPage();
			}
		);
	}

observeSuccessfulUpload() {
		observe(
			this.uploader,
			'successfulUpload',
			async change => {
				if (change.newValue &&
					change.newValue.content &&
					!this.areAnyFiltersActive()) {
					return this.addNewItemIntoContentItems(toJS(change.newValue));
				}
			}
		);
	}

observeSubView() {
		observe(
			rootStore.routingStore,
			'subView',
			async change => {
				if (!change.oldValue &&
					change.newValue === pageNames.manageLiveEventsCreate) {
					this.reloadPage();
				}
			}
		);
	}

observeQueryParams() {
		observe(
			rootStore.routingStore,
			'queryParams',
			async() => {
				if (this.loading) {
					return;
				}

				if (rootStore.routingStore.page === pageNames.manageLiveEvents &&
					rootStore.routingStore.subView === pageNames.manageLiveEventsEdit) {
					this.reloadPage();
				}
			}
		);
	}

observeQueryParams() {
		observe(
			rootStore.routingStore,
			'queryParams',
			change => {
				if (this.loading) {
					return;
				}

				const { contentType = '', dateModified = '', dateCreated = '' } =
					toJS(change.newValue);

				if (contentType === this.selectedFilterParams.contentType &&
					dateModified === this.selectedFilterParams.dateModified &&
					dateCreated === this.selectedFilterParams.dateCreated
				) {
					return;
				}

				this.selectedFilterParams = { contentType, dateModified, dateCreated };
			}
		);
	}

observeQueryParams() {
		observe(
			rootStore.routingStore,
			'queryParams',
			change => {
				if (this.loading) {
					return;
				}

				const {
					searchQuery: updatedSearchQuery = '',
					sortQuery: updatedSortQuery = 'updatedAt:desc',
					contentType: updatedContentType = '',
					dateCreated: updatedDateCreated = '',
					dateModified: updatedDateModified = ''
				} = toJS(change.newValue);

				const { searchQuery, sortQuery, contentType, dateCreated, dateModified } =
					this.queryParams;

				if (updatedSearchQuery === searchQuery && updatedSortQuery === sortQuery &&
					updatedContentType === contentType && updatedDateCreated === dateCreated &&
					updatedDateModified === dateModified
				) {
					return;
				}

				this.queryParams = {
					searchQuery: updatedSearchQuery,
					sortQuery: updatedSortQuery,
					contentType: updatedContentType,
					dateCreated: updatedDateCreated,
					dateModified: updatedDateModified
				};
				this.reloadPage();
			}
		);
	}

observeSuccessfulUpload() {
		observe(
			this.uploader,
			'successfulUpload',
			async change => {
				if (change.newValue &&
					change.newValue.content &&
					!this.areAnyFiltersActive()) {
					return this.addNewItemIntoContentItems(toJS(change.newValue));
				}
			}
		);
	}

constructor() {
		super();
		observe(
			this.rootStore.routingStore,
			'subView',
			change => {
				if (this.rootStore.routingStore.page === 'manage') {
					this.loadSubView(change.newValue);
				}
			}
		);

		observe(
			this.rootStore.routingStore,
			'page',
			change => {
				if (change.newValue === 'manage') {
					console.log(`Four page changed from ${change.oldValue} to ${change.newValue}`);
				}

				if (this.rootStore.routingStore.page === 'manage') {
					console.log(`Your page changed from ${change.oldValue} to ${change.newValue}`);
				}
			}
		);
	}

handleUpdate() {
    this.disposers = ["x", "y", "radiusX", "radiusY", "rotation"].map(property => {
      return observe(this.element, property, this.onUpdate, true);
    });
  }

handleUpdate() {
    this.disposers = ["x", "y", "width", "height"].map(property => {
      return observe(this.element, property, this.onUpdate, true);
    });
  }

createPropertyWatcher = props => {
  return class {
    constructor(root, element, callback) {
      this.root = root;
      this.element = element;
      this.callback = callback;

      this.handleUpdate();
    }

    handleUpdate() {
      this.disposers = this._watchProperties(this.element, props, []);
    }

    onUpdate = debounce(() => {
      this.callback();
    }, 10);

    destroy() {
      this.disposers.forEach(dispose => dispose());
    }

    _watchProperties(element, propsList, disposers) {
      return propsList.reduce((res, property) => {
        if (typeof property !== "string") {
          Object.keys(property).forEach(propertyName => {
            this._watchProperties(element[propertyName], property[propertyName], disposers);
          });
        } else {
          if (Array.isArray(element)) {
            element.forEach(el => this._watchProperties(el, propsList, disposers));
          } else {
            res.push(observe(element, property, this.onUpdate, true));
          }
        }

        return res;
      }, disposers);
    }
  };
}

_Tool = types
  .model("PolygonTool", {
    group: "segmentation",
    shortcut: "P",
  })
  .views(self => {
    const Super = {
      createRegionOptions: self.createRegionOptions,
      isIncorrectControl: self.isIncorrectControl,
      isIncorrectLabel: self.isIncorrectLabel,
      startDrawing: self.startDrawing,
    };

    return {
      get getActivePolygon() {
        const poly = self.currentArea;

        if (poly && poly.closed) return null;
        if (poly === undefined) return null;
        if (poly && poly.type !== "polygonregion") return null;

        return poly;
      },

      get tagTypes() {
        return {
          stateTypes: "polygonlabels",
          controlTagTypes: ["polygonlabels", "polygon"],
        };
      },

      get viewTooltip() {
        return "Polygon region";
      },
      get iconComponent() {
        return self.dynamic
          ? NodeViews.PolygonRegionModel.altIcon
          : NodeViews.PolygonRegionModel.icon;
      },

      get defaultDimensions() {
        return DEFAULT_DIMENSIONS.polygon;
      },

      moreRegionParams(obj) {
        return {
          x: obj.value.points[0][0],
          y: obj.value.points[0][1],
        };
      },

      createRegionOptions({ x, y }) {
        return Super.createRegionOptions({
          points: [[x, y]],
          width: 10,
        });
      },

      startDrawing(x, y) {
        if (isFF(FF_DEV_2432)) {
          self.annotation.history.freeze();
          self.mode = "drawing";

          self.currentArea = self.createRegion(self.createRegionOptions({ x, y }));
        } else {
          Super.startDrawing(x, y);
        }
      },

      isIncorrectControl() {
        return Super.isIncorrectControl() && self.current() === null;
      },
      isIncorrectLabel() {
        return !self.current() && Super.isIncorrectLabel();
      },
      canStart() {
        return self.current() === null;
      },

      current() {
        return self.getActivePolygon;
      },
    };
  })
  .actions(self => {
    let disposer;
    let closed;

    return {
      handleToolSwitch(tool) {

        if (self.getCurrentArea()?.isDrawing && tool.toolName !== 'ZoomPanTool') {
          const shape = self.getCurrentArea()?.toJSON();
          
          if (shape?.points?.length > 2) self.finishDrawing();
          else self.cleanupUncloseableShape();
        }
      },
      listenForClose() {
        closed = false;
        disposer = observe(self.getCurrentArea(), "closed", () => {
          if (self.getCurrentArea().closed && !closed) {
            self.finishDrawing();
          }
        }, true);
      },
      closeCurrent() {
        if (disposer) disposer();
        if (closed) return;
        closed = true;
        self.getCurrentArea().closePoly();
      },
    };
  })