Fixed linter errors for renderer

newcat · Jun 4, 2021 · 48fb14f · 48fb14f
1 parent b2c225e
commit 48fb14f
Show file tree

Hide file tree

Showing 29 changed files with 383 additions and 187 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,22 @@
+{
+    "root": true,
+    "parser": "vue-eslint-parser",
+    "parserOptions": {
+        "parser": "@typescript-eslint/parser"
+    },
+    "plugins": ["@typescript-eslint"],
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "prettier",
+        "plugin:vue/vue3-recommended"
+    ],
+    "rules": {
+        "indent": ["warn", 4],
+        "@typescript-eslint/no-non-null-assertion": 0,
+        "@typescript-eslint/no-explicit-any": 0,
+        "@typescript-eslint/explicit-module-boundary-types": 0,
+        "vue/html-indent": ["warn", 4],
+        "vue/no-mutating-props": "off"
+    }
+}
diff --git a/.prettierrc b/.prettierrc
@@ -2,5 +2,6 @@
     "tabWidth": 4,
     "arrowParens": "always",
     "printWidth": 120,
-    "quoteProps": "consistent"
+    "quoteProps": "consistent",
+    "trailingComma": "all"
 }
diff --git a/packages/baklavajs-plugin-renderer-vue/package.json b/packages/baklavajs-plugin-renderer-vue/package.json
@@ -20,7 +20,8 @@
     "scripts": {
         "dev": "vite",
         "build": "rimraf dist && vue-tsc --noEmit && vite build && tsc --emitDeclarationOnly",
-        "docs": "typedoc --json ../../docs/api/plugin-renderer-vue.json --options ../../typedoc.json"
+        "docs": "typedoc --json ../../docs/api/plugin-renderer-vue.json --options ../../typedoc.json",
+        "lint": "eslint --ext .ts,.vue src"
     },
     "repository": {
         "type": "git",

diff --git a/packages/baklavajs-plugin-renderer-vue/src/components/ContextMenu.vue b/packages/baklavajs-plugin-renderer-vue/src/components/ContextMenu.vue
@@ -1,20 +1,39 @@
 <template>
-    <div ref="el" :class="classes" :style="styles" v-show="modelValue">
+    <div
+        v-show="modelValue"
+        ref="el"
+        :class="classes"
+        :style="styles"
+    >
         <template v-for="(item, index) in itemsWithHoverProperty">
-            <div v-if="item.isDivider" :key="`d-${index}`" class="divider"></div>
+            <div
+                v-if="item.isDivider"
+                :key="`d-${index}`"
+                class="divider"
+            />
 
             <div
                 v-else
                 :key="`i-${index}`"
                 :class="{ 'item': true, 'submenu': !!item.submenu, '--disabled': !!item.disabled }"
+                class="d-flex align-items-center"
                 @mouseenter="onMouseEnter($event, index)"
                 @mouseleave="onMouseLeave($event, index)"
                 @click.stop.prevent="onClick(item)"
-                class="d-flex align-items-center"
             >
-                <div class="flex-fill">{{ item.label }}</div>
-                <div v-if="item.submenu" class="ml-3" style="line-height: 1em">
-                    <svg width="13" height="13" viewBox="-60 120 250 250">
+                <div class="flex-fill">
+                    {{ item.label }}
+                </div>
+                <div
+                    v-if="item.submenu"
+                    class="ml-3"
+                    style="line-height: 1em"
+                >
+                    <svg
+                        width="13"
+                        height="13"
+                        viewBox="-60 120 250 250"
+                    >
                         <path
                             d="M160.875 279.5625 L70.875 369.5625 L70.875 189.5625 L160.875 279.5625 Z"
                             stroke="none"
@@ -30,14 +49,14 @@
                     :is-flipped="{ x: flippedX, y: flippedY }"
                     :flippable="flippable"
                     @click="onChildClick"
-                ></context-menu>
+                />
             </div>
         </template>
     </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, Ref, ref, watch, unref } from "vue";
+import { computed, defineComponent, Ref, ref, watch } from "vue";
 import { onClickOutside } from "@vueuse/core";
 
 export interface IMenuItem {
@@ -52,32 +71,32 @@ export default defineComponent({
     props: {
         modelValue: {
             type: Boolean,
-            default: false,
+            default: false
         },
         items: {
             type: Array as () => IMenuItem[],
-            required: true,
+            required: true
         },
         x: {
             type: Number,
-            default: 0,
+            default: 0
         },
         y: {
             type: Number,
-            default: 0,
+            default: 0
         },
         isNested: {
             type: Boolean,
-            default: false,
+            default: false
         },
         isFlipped: {
             type: Object as () => { x: boolean; y: boolean },
-            default: () => ({ x: false, y: false }),
+            default: () => ({ x: false, y: false })
         },
         flippable: {
             type: Boolean,
-            default: false,
-        },
+            default: false
+        }
     },
     emits: ["click", "update:modelValue"],
     setup(props, { emit }) {
@@ -105,7 +124,7 @@ export default defineComponent({
                 "dark-context-menu": true,
                 "--flipped-x": flippedX.value,
                 "--flipped-y": flippedY.value,
-                "--nested": props.isNested,
+                "--nested": props.isNested
             };
         });
 
@@ -171,8 +190,8 @@ export default defineComponent({
             onChildClick,
             onClickOutside,
             onMouseEnter,
-            onMouseLeave,
+            onMouseLeave
         };
-    },
+    }
 });
 </script>
diff --git a/packages/baklavajs-plugin-renderer-vue/src/components/Minimap.vue b/packages/baklavajs-plugin-renderer-vue/src/components/Minimap.vue
@@ -7,11 +7,11 @@
         @mousedown.self="mousedown"
         @mousemove.self="mousemove"
         @mouseup="mouseup"
-    ></canvas>
+    />
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, ref, toRef, watch } from "vue";
+import { defineComponent, onMounted, ref } from "vue";
 import { AbstractNode } from "@baklavajs/core";
 import getDomElements, { getDomElementOfNode } from "../connection/domResolver";
 import { getPortCoordinates } from "../connection/portCoordinates";
@@ -53,7 +53,7 @@ export default defineComponent({
                     x1: posX,
                     y1: posY,
                     x2: posX + width,
-                    y2: posY + height,
+                    y2: posY + height
                 });
                 nodeDomElements.set(n, domElement);
             }
@@ -63,7 +63,7 @@ export default defineComponent({
                 x1: Number.MAX_SAFE_INTEGER,
                 y1: Number.MAX_SAFE_INTEGER,
                 x2: Number.MIN_SAFE_INTEGER,
-                y2: Number.MIN_SAFE_INTEGER,
+                y2: Number.MIN_SAFE_INTEGER
             };
             for (const nc of nodeCoords.values()) {
                 if (nc.x1 < newBounds.x1) {
@@ -120,7 +120,7 @@ export default defineComponent({
                 ctx.stroke();
             }
 
-            if (showViewBounds) {
+            if (showViewBounds.value) {
                 const viewBounds = getViewBounds();
                 const [x1, y1] = transformCoordinates(viewBounds.x1, viewBounds.y1);
                 const [x2, y2] = transformCoordinates(viewBounds.x2, viewBounds.y2);
@@ -133,15 +133,15 @@ export default defineComponent({
         const transformCoordinates = (origX: number, origY: number): [number, number] => {
             return [
                 ((origX - bounds.x1) / (bounds.x2 - bounds.x1)) * ctx!.canvas.clientWidth,
-                ((origY - bounds.y1) / (bounds.y2 - bounds.y1)) * ctx!.canvas.clientHeight,
+                ((origY - bounds.y1) / (bounds.y2 - bounds.y1)) * ctx!.canvas.clientHeight
             ];
         };
 
         /** Transforms coordinates from minimap space to editor space */
         const reverseTransform = (thisX: number, thisY: number): [number, number] => {
             return [
                 (thisX * (bounds.x2 - bounds.x1)) / ctx!.canvas.clientWidth + bounds.x1,
-                (thisY * (bounds.y2 - bounds.y1)) / ctx!.canvas.clientHeight + bounds.y1,
+                (thisY * (bounds.y2 - bounds.y1)) / ctx!.canvas.clientHeight + bounds.y1
             ];
         };
 
@@ -240,6 +240,6 @@ export default defineComponent({
         });
 
         return { canvas, showViewBounds, mousedown, mousemove, mouseup, mouseenter, mouseleave };
-    },
+    }
 });
 </script>
diff --git a/packages/baklavajs-plugin-renderer-vue/src/components/Sidebar.vue b/packages/baklavajs-plugin-renderer-vue/src/components/Sidebar.vue
@@ -1,16 +1,29 @@
 <template>
-    <div ref="el" :class="['sidebar', { '--open': graph.sidebar.visible }]" :style="styles">
-        <div class="__resizer" @mousedown="startResize"></div>
+    <div
+        ref="el"
+        :class="['sidebar', { '--open': graph.sidebar.visible }]"
+        :style="styles"
+    >
+        <div
+            class="__resizer"
+            @mousedown="startResize"
+        />
 
         <div class="d-flex align-items-center">
-            <button tabindex="-1" class="__close" @click="close">&times;</button>
+            <button
+                tabindex="-1"
+                class="__close"
+                @click="close"
+            >
+                &times;
+            </button>
             <div class="ml-2">
                 <b>{{ nodeName }}</b>
             </div>
         </div>
 
         <!-- TODO: Make unique so it works with multiple Baklava instances on the same page -->
-        <div id="sidebar-container"></div>
+        <div id="sidebar-container" />
     </div>
 </template>
 
@@ -32,7 +45,7 @@ export default defineComponent({
         });
 
         const styles = computed(() => ({
-            width: `${width}px`,
+            width: `${width.value}px`
         }));
 
         const close = () => {
@@ -61,6 +74,6 @@ export default defineComponent({
         };
 
         return { el, graph, nodeName, styles, startResize, close };
-    },
+    }
 });
 </script>
diff --git a/packages/baklavajs-plugin-renderer-vue/src/connection/ConnectionView.vue b/packages/baklavajs-plugin-renderer-vue/src/connection/ConnectionView.vue
@@ -1,5 +1,8 @@
 <template>
-    <path :d="d" :class="classes"></path>
+    <path
+        :d="d"
+        :class="classes"
+    />
 </template>
 
 <script lang="ts">

diff --git a/packages/baklavajs-plugin-renderer-vue/src/connection/ConnectionWrapper.vue b/packages/baklavajs-plugin-renderer-vue/src/connection/ConnectionWrapper.vue
@@ -1,5 +1,11 @@
 <template>
-    <connection-view :x1="d.x1" :y1="d.y1" :x2="d.x2" :y2="d.y2" :state="state"></connection-view>
+    <connection-view
+        :x1="d.x1"
+        :y1="d.y1"
+        :x2="d.x2"
+        :y2="d.y2"
+        :state="state"
+    />
 </template>
 
 <script lang="ts">
@@ -12,13 +18,13 @@ import { useGraph } from "../utility";
 
 export default defineComponent({
     components: {
-        "connection-view": ConnectionView,
+        "connection-view": ConnectionView
     },
     props: {
         connection: {
             type: Object as () => Connection,
-            required: true,
-        },
+            required: true
+        }
     },
     setup(props) {
         const { graph } = useGraph();
@@ -43,7 +49,7 @@ export default defineComponent({
                     resolved.node.offsetTop +
                         resolved.interface.offsetTop +
                         resolved.port.offsetTop +
-                        resolved.port.clientHeight / 2,
+                        resolved.port.clientHeight / 2
                 ];
             } else {
                 return [0, 0];
@@ -80,7 +86,7 @@ export default defineComponent({
 
         watch([fromNodePosition, toNodePosition], () => updateCoords(), { deep: true });
 
-        return { d, state, connection: props.connection };
-    },
+        return { d, state };
+    }
 });
 </script>