Line data    Source code

       1             : // @ts-check
       2             : import Vue from "vue";
       3             : import { first, invoke } from "lodash";
       4             : 
       5             : import Card from "./Card.vue";
       6             : import Transition from "./SSVGPropList/Transition.vue";
       7             : import Property from "./SSVGPropList/Property.vue";
       8             : import Computed from "./SSVGPropList/Computed.vue";
       9             : import CreatePropertyDialog from "./SSVGPropList/CreatePropertyDialog.vue";
      10             : import CreateTransitionDialog from "./SSVGPropList/CreateTransitionDialog.vue";
      11             : 
      12             : /**
      13             :  * @typedef {typeof import("@cern/base-vue").BaseDialog} BaseDialog
      14             :  */
      15             : 
      16           1 : const component = /** @type {V.Constructor<any, any>} */ (Vue).extend({
      17             :   name: "SSVGPropList",
      18             :   components: { Card, Transition, Property, Computed, CreatePropertyDialog,
      19             :     CreateTransitionDialog },
      20             :   props: {
      21             :     stateElement: { type: SVGElement, default: null }
      22             :   },
      23             :   /**
      24             :    * @return {{
      25             :    *  properties: Element[]|null,
      26             :    *  computed: Element[]|null,
      27             :    *  transition: Element|null }}
      28             :    */
      29             :   data() {
      30           3 :     return { properties: null, computed: null, transition: null };
      31             :   },
      32             :   watch: {
      33           2 :     stateElement() { this.load(); }
      34             :   },
      35             :   mounted() {
      36           3 :     this.load();
      37             :   },
      38             :   methods: {
      39             :     load() {
      40           5 :       this.properties = invoke(this,
      41             :         [ "stateElement", "getElementsByTagName" ], "property") ?? null;
      42           5 :       this.computed = invoke(this,
      43             :         [ "stateElement", "getElementsByTagName" ], "computed") ?? null;
      44           5 :       const transition = first(this.stateElement?.children) ?? null;
      45           5 :       this.transition = (transition?.tagName === "transition") ? transition : null;
      46             :     },
      47             :     async setSelected() {
      48           0 :       if (this.$store.state?.selection?.state !== this.stateElement) {
      49           0 :         return await this.$store.dispatch("selection/select",
      50             :           { state: this.stateElement });
      51             :       }
      52             :     },
      53             :     async doCreateProperty() {
      54           0 :       try {
      55           0 :         await this.setSelected();
      56           0 :         const prop = await /** @type {V.Instance<BaseDialog>} */(
      57             :           this.$root.$refs?.createPropertyDialog)?.request();
      58           0 :         if (!prop) { return; }
      59           0 :         await this.$store.dispatch("add", prop);
      60             :       }
      61             :       catch (e) {
      62           0 :         console.warn(e);
      63             :       }
      64             :     },
      65             :     async doCreateTransition() {
      66           0 :       try {
      67           0 :         await this.setSelected();
      68           0 :         const prop = await /** @type {V.Instance<BaseDialog>} */(
      69             :           this.$root.$refs?.createTransitionDialog)?.request();
      70           0 :         if (!prop) { return; }
      71           0 :         await this.$store.dispatch("add", prop);
      72             :       }
      73             :       catch (e) {
      74           0 :         console.warn(e);
      75             :       }
      76             :     }
      77             :   }
      78             : });
      79             : export default component;