Line data    Source code

       1             : // @ts-check
       2             : 
       3             : import { noop } from "lodash";
       4             : import Vue from "vue";
       5             : import { mapGetters } from "vuex";
       6             : 
       7             : import { getAttribute } from "../../utils/element";
       8             : import BadgeButton from "../BadgeButton.vue";
       9             : 
      10             : 
      11           1 : const component = /** @type {V.Constructor<any, any>} */ (Vue).extend({
      12             :   name: "Transition",
      13             :   components: { BadgeButton },
      14             :   props: {
      15             :     /* eslint-disable-next-line vue/require-prop-types */
      16             :     state: { /* type: SVGElement, VueX typecheck issues */ default: null },
      17             :     /* eslint-disable-next-line vue/require-prop-types */
      18             :     property: { /* type: SVGElement, VueX typecheck issues */ default: null },
      19             :     /* eslint-disable-next-line vue/require-prop-types */
      20             :     relation: { /* type: SVGElement, VueX typecheck issues */ default: null },
      21             :     /* eslint-disable-next-line vue/require-prop-types */
      22             :     transition: { /* type: SVGElement, VueX typecheck issues */ default: null }
      23             :   },
      24             :   computed: {
      25             :     .../**
      26             :     @type {{ selectedElement(): Element|null }} */(
      27             :       mapGetters("selection", [ "selectedElement" ])),
      28             :     /** @return {boolean} */
      29             :     isSelected() {
      30           5 :       return this.transition === this.selectedElement;
      31             :     },
      32             :     /** @returns {string} */
      33             :     duration() {
      34           4 :       return getAttribute(this.transition, "duration") ?? "0s";
      35             :     },
      36             :     /** @returns {string} */
      37             :     tfunc() {
      38           4 :       return getAttribute(this.transition, "timing-function") ?? "linear";
      39             :     },
      40             :     /** @returns {string} */
      41             :     type() {
      42           4 :       return getAttribute(this.transition, "type") ?? "strict";
      43             :     },
      44             :     /** @returns {string} */
      45             :     info() {
      46           4 :       if (!this.transition) { return ""; }
      47           4 :       return `${this.duration} ${this.tfunc} ${this.type}`;
      48             :     }
      49             :   },
      50             :   methods: {
      51             :     setSelected() {
      52           0 :       this.$store.dispatch("selection/select", {
      53             :         state: this.state, relation: this.relation, property: this.property,
      54             :         transition: this.transition
      55             :       }).catch(noop);
      56             :     }
      57             :   }
      58             : });
      59             : export default component;