Line data    Source code

       1             : // @ts-check
       2             : 
       3             : import Vue from "vue";
       4             : import { last, noop } from "lodash";
       5             : import SVGSelector from "../SVGSelector.vue";
       6             : import CreateRelationDialog from "./CreateRelationDialog.vue";
       7             : import CreateTransformDialog from "./CreateTransformDialog.vue";
       8             : import CreateDirectDialog from "./CreateDirectDialog.vue";
       9             : 
      10             : /**
      11             :  * @typedef {typeof import("@cern/base-vue").BaseDialog} BaseDialog
      12             :  * @typedef {{
      13             :  *  selector: V.Instance<typeof SVGSelector>,
      14             :  *  relationDialog: V.Instance<BaseDialog>,
      15             :  *  transformDialog: V.Instance<BaseDialog>,
      16             :  *  directDialog: V.Instance<BaseDialog>
      17             :  * }} Refs
      18             :  */
      19             : 
      20             : export default /** @type {V.Constructor<any, Refs>} */ (Vue).extend({
      21             :   name: "CreateRelationButton",
      22             :   components: { SVGSelector, CreateRelationDialog, CreateTransformDialog,
      23             :     CreateDirectDialog },
      24             :   props: {
      25             :     state: { type: SVGElement, default: null },
      26             :     property: { type: SVGElement, default: null }
      27             :   },
      28             :   /**
      29             :    * @return {{ isSelecting: boolean, query: string|null }}
      30             :    */
      31          12 :   data() { return { isSelecting: false, query: null }; },
      32             :   methods: {
      33             :     /**
      34             :      * @param {string} type
      35             :      */
      36             :     async add(type) {
      37           0 :       try {
      38           0 :         if (!this.property) { return; }
      39           0 :         this.isSelecting = true;
      40           0 :         this.query = await this.$refs.selector.select();
      41           0 :         this.isSelecting = false;
      42           0 :         if (!this.query) { return; }
      43             : 
      44             :         let element;
      45           0 :         if (type === "relation") {
      46           0 :           element = await this.$refs.relationDialog.request();
      47             :         }
      48           0 :         else if (type === "transform") {
      49           0 :           element = await this.$refs.transformDialog.request();
      50             :         }
      51           0 :         else if (type === "direct") {
      52           0 :           element = await this.$refs.directDialog.request();
      53             :         }
      54           0 :         if (!element) { return; }
      55             : 
      56           0 :         await this.$store.dispatch("add", element).catch(noop);
      57             : 
      58           0 :         const relation = last(this.property.getElementsByTagName(type));
      59           0 :         await this.$store.dispatch("selection/select", {
      60             :           state: this.state, property: this.property, relation
      61             :         }).catch(noop);
      62           0 :         this.query = null;
      63             :       }
      64             :       catch (e) {
      65           0 :         console.warn(e);
      66             :       }
      67             :       finally {
      68           0 :         this.isSelecting = false;
      69             :       }
      70             :     }
      71             :   }
      72             : });