Line data    Source code

       1             : // @ts-check
       2             : 
       3             : import Vue from "vue";
       4             : import { mapState } from "vuex";
       5             : 
       6             : import { openLintPanel } from "@codemirror/lint";
       7             : 
       8             : import { ssvgElements, ssvgPrettyPrint } from "../../utils/SSVGLint";
       9             : import { noop } from "lodash";
      10             : import RelationCodeEditor from "./RelationCodeEditor.vue";
      11             : 
      12             : /**
      13             :  * @typedef {{ schema: typeof schema }} Opts
      14             :  * @typedef {{ cm: HTMLElement }} Refs
      15             :  */
      16             : 
      17           1 : const schema = [
      18             :   { ...ssvgElements.property, top: true },
      19             :   { ...ssvgElements.computed, top: true },
      20             :   { ...ssvgElements.relation },
      21             :   { ...ssvgElements.transform },
      22             :   { ...ssvgElements.direct },
      23             :   { ...ssvgElements.transition }
      24             : ];
      25             : 
      26           1 : const component = /** @type {V.Constructor<Opts, Refs>} */ (Vue).extend({
      27             :   name: "PropertyCodeEditor",
      28             :   extends: RelationCodeEditor,
      29             :   computed: {
      30             :     .../** @type {{ property(): Element|null }} */(mapState("selection", [ "property" ])),
      31             :     /** @return {string} */
      32             :     currentContent() {
      33           1 :       return (this.property) ? ssvgPrettyPrint(this.property.outerHTML) : "";
      34             :     }
      35             :   },
      36             :   mounted() {
      37           1 :     this.$options.schema = schema;
      38           1 :     this.updateLanguage();
      39             :   },
      40             :   methods: {
      41             :     async doApply() {
      42           0 :       if (!this.property) { /* noop */ }
      43           0 :       else if (this.$refs.cm?.getElementsByClassName("cm-lint-marker-error").length > 0) {
      44           0 :         openLintPanel(this.getEditor());
      45           0 :         return false;
      46             :       }
      47             :       else {
      48           0 :         await this.$store.dispatch("replace", this.editValue).catch(noop);
      49           0 :         return true;
      50             :       }
      51             :     }
      52             :   }
      53             : });
      54             : export default component;