How to use ember-flexberry-designer - 10 common examples

let projectContext = this.get('projectContext');
      let store = this.get('store');

      projectContext.setCurrentConfiguration(project.get('configuration'));
      projectContext.setCurrentStage(project);

      // Clear store.
      store.unloadAll('fd-dev-class');
      store.unloadAll('fd-dev-association');
      store.unloadAll('fd-dev-aggregation');
      store.unloadAll('fd-dev-inheritance');
      store.unloadAll('fd-dev-system');
      store.unloadAll('new-platform-flexberry-services-lock');

      this.get('appState').loading();
      FdPreloadStageMetadata.call(this, store, projectContext.getCurrentStage()).then(() =>
        projectContext.getAutogeneratedSystemPromise()).then(() => {
          this.get('appState').reset();
          this.transitionToRoute('fd-application-model');
        });
    },

store.query(modelName, builder.build()).then((result) => {
        if (result && result.get('length') !== undefined && result.get('length') === 1) {
          let stage = result.objectAt(0);
          context.setCurrentConfiguration(stage.get('configuration'));
          context.setCurrentStage(stage);
          FdPreloadStageMetadata.call(this, store, context.getCurrentStage()).then(() =>
            context.getAutogeneratedSystemPromise()).then(() => {
              if (this.get('controller.currentRouteName') === 'fd-appstruct-form') {
                this.refresh();
              } else {
                this.transitionTo('fd-appstruct-form');
              }

              this.get('appState').reset();
            });
        }
      });
    } else if (this.get('router.location.location.href').split('?').length < 2) {

maxX += sidebarWidth;
        maxY = 840;
      } else {
        maxX = minX + maxX + sidebarWidth;
        maxY = minY + maxY;
      }

      _this.paper = new joint.dia.Paper({
        el: paper,
        width: maxX,
        height: maxY,
        gridSize: 1,
        model: _this.graph,
      });

      var linkNoteConnector = new NoteConnector({
        startPoint:{ x:100, y:100 },
        endPoint: { x:300, y:100 },
        source: { x:100, y:100 },
        target: { x:300, y:100 },
        attrs: { path: { title:'Коннектор комментария (Note Connector)' } }
      });

      var linkEventMessage = new Dependency({
        startPoint:{ x:100, y:150 },
        endPoint: { x:300, y:150 },
        source: { x:100, y:150 },
        target: { x:300, y:150 },
        labels:[{
          attrs: { text: { text: 'EventMessage' } }
        }],
        attrs: { path: { title:'Сообщение (Event Message)' } }

maxX += sidebarWidth;
        maxY = 840;
      } else {
        maxX = minX + maxX + sidebarWidth;
        maxY = minY + maxY;
      }

      _this.paper = new joint.dia.Paper({
        el: paper,
        width: maxX,
        height: maxY,
        gridSize: 1,
        model: _this.graph,
      });

      var linkNoteConnector = new NoteConnector({
        startPoint:{ x:100, y:100 },
        endPoint: { x:300, y:100 },
        source: { x:100, y:100 },
        target: { x:300, y:100 },
        attrs: { path: { title:'Коннектор комментария (Note Connector)' } }
      });

      var linkDependency = new Dependency({
        startPoint:{ x:100, y:150 },
        endPoint: { x:300, y:150 },
        source: { x:100, y:150 },
        target: { x:300, y:150 },
        labels:[{
          attrs: { text: { text: 'Dependency' } }
        }],
        attrs: { path: { title:'Переход (Dependency)' } }

maxX += sidebarWidth;
        maxY = 840;
      } else {
        maxX = minX + maxX + sidebarWidth;
        maxY = minY + maxY;
      }

      _this.paper = new joint.dia.Paper({
        el: paper,
        width: maxX,
        height: maxY,
        gridSize: 1,
        model: _this.graph,
      });

      var linkNoteConnector = new NoteConnector({
        startPoint:{ x:100, y:100 },
        endPoint: { x:300, y:100 },
        source: { x:100, y:100 },
        target: { x:300, y:100 },
        attrs: { path: { title:'Коннектор комментария (Note Connector)' } }
      });

      var linkObjectFlow = new ObjectFlow({
        startPoint:{ x:100, y:150 },
        endPoint: { x:300, y:150 },
        source: { x:100, y:150 },
        target: { x:300, y:150 },
        labels:[{
          attrs: { text: { text: 'Label' } }
        }],
        attrs: {

path: { title:'Изменение объекта (Object Flow)' },
        }
      });

      var linkTransition = new Transition({
        startPoint:{ x:100, y:250 },
        endPoint: { x:300, y:250 },
        source: { x:100, y:250 },
        target: { x:300, y:250 },
        labels:[{
          attrs: { text: { text: 'Label' } }
        }],
        attrs: { path: { title:'Переход (Transition)' } }
      });

      var сomplexTransitionHorizon = new ComplexTransitionH({
        size: { width: 100 },
        position: { x: 100, y: 300 },
        attrs: {
          text: { text: 'Some text' },
          '.rotatable': { title:'Синхронизатор/разветвитель (Complex Transition)' } }
      });

      var сomplexTransitionVertical = new ComplexTransitionV({
        size: { height: 100 },
        position: { x: 100, y: 350 },
        attrs: {
          text: { text: 'Some text' },
          '.rotatable': { title:'Синхронизатор/разветвитель (Complex Transition)' } }
      });

      _this.graph.addCell([linkNoteConnector, linkObjectFlow, linkTransition, сomplexTransitionHorizon, сomplexTransitionVertical]);

let startState = new StartState({
        position: { x: 100, y: 204 },
        attrs: {
          text: { text: 'Start State' }
        }
      });

      let endState = new FinalState({
        position: { x: 150, y: 200 },
        attrs: {
          text: { text: 'End State' }
        }
      });

      var сomplexTransitionHorizon = new ComplexTransitionH({
        size: { width: 200 },
        position: { x: 100, y: 300 },
        attrs: {
          text: { text: 'Some text' },
          '.rotatable': { title:'Синхронизатор/разветвитель (Complex Transition)' } }
      });

      var сomplexTransitionVertical = new ComplexTransitionV({
        size: { height: 200 },
        position: { x: 100, y: 350 },
        attrs: {
          text: { text: 'Some text' },
          '.rotatable': { title:'Синхронизатор/разветвитель (Complex Transition)' } }
      });

      var history = new History({

let endState = new FinalState({
        position: { x: 150, y: 200 },
        attrs: {
          text: { text: 'End State' }
        }
      });

      var сomplexTransitionHorizon = new ComplexTransitionH({
        size: { width: 200 },
        position: { x: 100, y: 300 },
        attrs: {
          text: { text: 'Some text' },
          '.rotatable': { title:'Синхронизатор/разветвитель (Complex Transition)' } }
      });

      var сomplexTransitionVertical = new ComplexTransitionV({
        size: { height: 200 },
        position: { x: 100, y: 350 },
        attrs: {
          text: { text: 'Some text' },
          '.rotatable': { title:'Синхронизатор/разветвитель (Complex Transition)' } }
      });

      var history = new History({
        position: { x: 250, y: 200 },
      });

      var deepHistory = new DeepHistory({
        position: { x: 280, y: 200 },
      });

      var compositeState = new CompositeState({

target: { x:300, y:250 },
        labels:[{
          attrs: { text: { text: 'Label' } }
        }],
        attrs: { path: { title:'Переход (Transition)' } }
      });

      var сomplexTransitionHorizon = new ComplexTransitionH({
        size: { width: 100 },
        position: { x: 100, y: 300 },
        attrs: {
          text: { text: 'Some text' },
          '.rotatable': { title:'Синхронизатор/разветвитель (Complex Transition)' } }
      });

      var сomplexTransitionVertical = new ComplexTransitionV({
        size: { height: 100 },
        position: { x: 100, y: 350 },
        attrs: {
          text: { text: 'Some text' },
          '.rotatable': { title:'Синхронизатор/разветвитель (Complex Transition)' } }
      });

      _this.graph.addCell([linkNoteConnector, linkObjectFlow, linkTransition, сomplexTransitionHorizon, сomplexTransitionVertical]);

      let note = new Note({
        position: { x: 450, y: 100 },
        size: { width: 100, height: 50 },
        name: 'note',
        attrs: { '.rotatable': { title:'Комментарий (Note)' } }
      });

target: { x:300, y:100 },
        attrs: { path: { title:'Коннектор комментария (Note Connector)' } }
      });

      var linkDependency = new Dependency({
        startPoint:{ x:100, y:150 },
        endPoint: { x:300, y:150 },
        source: { x:100, y:150 },
        target: { x:300, y:150 },
        labels:[{
          attrs: { text: { text: 'Dependency' } }
        }],
        attrs: { path: { title:'Переход (Dependency)' } }
      });

      var linkConnection = new Connection({
        startPoint:{ x:100, y:200 },
        endPoint: { x:300, y:200 },
        source: { x:100, y:200 },
        target: { x:300, y:200 },
        labels:[{
          attrs: { text: { text: 'Connection' } }
        }],
        attrs: { path: { title:'Связь (Connection)' } }
      });

      _this.graph.addCell([linkNoteConnector, linkDependency, linkConnection]);

      var component = new Component({
        position: { x: 450, y: 100 },
        size: { width: 80, height: 40 },
        name: ['StateName'],