Types Union Thing

store-union-test.js

import { types } from 'mobx-state-tree';

const ItemUI = types.model(
  'ItemUI',
  {
    id: types.identifier(),
    position: types.optional(types.frozen, { x: 0, y: 0 }),
    text: types.string,
    width: types.string,
    height: types.string,
    backgroundColor: types.string,
    selected: types.optional(types.boolean, false),
    type: types.optional(types.literal('text'), 'text')
  },
  {
    setPosition(x, y) {
      this.position = { x: x, y: y };
    },
    setSelected(selected) {
      this.selected = selected;
    }
  }
);

const ImageUI = types.model(
  'ImageUI',
  {
    id: types.identifier(),
    position: types.optional(types.frozen, { x: 0, y: 0 }),
    text: types.string,
    width: types.string,
    height: types.string,
    backgroundColor: types.string,
    rotation: types.number,
    selected: types.optional(types.boolean, false),
    type: types.optional(types.literal('image'), 'image')
  },
  {
    setPosition(x, y) {
      this.position = { x: x + 20, y: y + 20 };
    },
    setSelected(selected) {
      this.selected = selected;
    }
  }
);

const ItemStoreUI = types.model(
  'ItemStoreUI',
  {
    items: types.optional(types.array(types.union(ItemUI, ImageUI)), []),
    get selectedItems() {
      return this.items.filter(item => item.selected);
    },
    get updatedItems() {
      return this.items.filter(item => item.selected);
    }
  },
  {
    addItem(item) {
      this.items.push(item);
    },
    updatePosition() {
      this.items[0].setPosition(Math.random(), Math.random());
      this.items[1].setPosition(Math.random(), Math.random());
    }
  }
);

export { ItemUI, ImageUI, ItemStoreUI };