feat: add Grid Layout

package-lock.json

@@ -1321,6 +1321,132 @@
         "@hapi/hoek": "^8.3.0"
       }
     },
+    "@interactjs/actions": {
+      "version": "1.10.11",
+      "resolved": "https://registry.npmjs.org/@interactjs/actions/-/actions-1.10.11.tgz",
+      "integrity": "sha512-P39zeefr4hkmKx+5nZ+mrH1s0l2YJ3gIHrthXmE81n6MlMa42m0WtHcTms4C5JTTNBP2EEDY+KGgGxSnmJKvUw==",
+      "requires": {
+        "@interactjs/interact": "1.10.11"
+      }
+    },
+    "@interactjs/auto-scroll": {
+      "version": "1.10.11",
+      "resolved": "https://registry.npmjs.org/@interactjs/auto-scroll/-/auto-scroll-1.10.11.tgz",
+      "integrity": "sha512-feHNjhi0EMNLV2nQcEgjYPz2mI54aeSW2RiaoNtFLyBvtXKp0b4DmluwDv6DvuXmUpDwD5g/Hk1gGM2rgl7iqQ==",
+      "requires": {
+        "@interactjs/interact": "1.10.11"
+      }
+    },
+    "@interactjs/auto-start": {
+      "version": "1.10.11",
+      "resolved": "https://registry.npmjs.org/@interactjs/auto-start/-/auto-start-1.10.11.tgz",
+      "integrity": "sha512-cIg5CcalCPtC6AiGq6j/0hKUtL2MweEpvw12FuB19sz2Q9Dye0J4GliHKhOYvtumNinnvfVAZ4FZMqZEuX7YZA==",
+      "requires": {
+        "@interactjs/interact": "1.10.11"
+      }
+    },
+    "@interactjs/core": {
+      "version": "1.10.11",
+      "resolved": "https://registry.npmjs.org/@interactjs/core/-/core-1.10.11.tgz",
+      "integrity": "sha512-aJ50ccVeszpJt7wPH7Yfqm7f1aG1SA94qd90P0NaESh5/QUXn4CESO6igobo4DFHQ5z+1Rfdl8aphP4JxlH4gw=="
+    },
+    "@interactjs/dev-tools": {
+      "version": "1.10.11",
+      "resolved": "https://registry.npmjs.org/@interactjs/dev-tools/-/dev-tools-1.10.11.tgz",
+      "integrity": "sha512-BP2FNfMbF7zLuOAUGMkDhCo1e1B0fnqyb9ih/Y8yAIJuoLrZxP/9htbsS1vZOIVZ4UgtrId4cYOwfcAZBMQtmw==",
+      "requires": {
+        "@interactjs/interact": "1.10.11"
+      }
+    },
+    "@interactjs/inertia": {
+      "version": "1.10.11",
+      "resolved": "https://registry.npmjs.org/@interactjs/inertia/-/inertia-1.10.11.tgz",
+      "integrity": "sha512-h+sknCzRqBSyHy4ctPNsq56mxkAMMdwHWD6en7rDEw899gdGKYaXVDVdv1jMfiwNRw0eRFBNoCiol8r3a/a3Jw==",
+      "requires": {
+        "@interactjs/interact": "1.10.11",
+        "@interactjs/offset": "1.10.11"
+      }
+    },
+    "@interactjs/interact": {
+      "version": "1.10.11",
+      "resolved": "https://registry.npmjs.org/@interactjs/interact/-/interact-1.10.11.tgz",
+      "integrity": "sha512-0iZJ9l547JuBA/lKxK4ARGYVmMqRSsAdA8gXL1zWe51qEIQq8PyWmMipoi8JbDaL7exC2THKwkXu5uq5ndT+iA==",
+      "requires": {
+        "@interactjs/core": "1.10.11",
+        "@interactjs/types": "1.10.11",
+        "@interactjs/utils": "1.10.11"
+      }
+    },
+    "@interactjs/interactjs": {
+      "version": "1.10.11",
+      "resolved": "https://registry.npmjs.org/@interactjs/interactjs/-/interactjs-1.10.11.tgz",
+      "integrity": "sha512-cGOxf6rp3Y8/sk88LhIT0XDn4gCiCzAnUG5Kkj9SAqiUO6BK/9+Wbp1IBkNaPgl/8uG8gNHh/dXBrlBBNcqJAg==",
+      "requires": {
+        "@interactjs/actions": "1.10.11",
+        "@interactjs/auto-scroll": "1.10.11",
+        "@interactjs/auto-start": "1.10.11",
+        "@interactjs/core": "1.10.11",
+        "@interactjs/dev-tools": "1.10.11",
+        "@interactjs/inertia": "1.10.11",
+        "@interactjs/interact": "1.10.11",
+        "@interactjs/modifiers": "1.10.11",
+        "@interactjs/offset": "1.10.11",
+        "@interactjs/pointer-events": "1.10.11",
+        "@interactjs/reflow": "1.10.11",
+        "@interactjs/utils": "1.10.11"
+      }
+    },
+    "@interactjs/modifiers": {
+      "version": "1.10.11",
+      "resolved": "https://registry.npmjs.org/@interactjs/modifiers/-/modifiers-1.10.11.tgz",
+      "integrity": "sha512-ltqX1RSqeAIikixlQBlyEUdclT5+rbfIGi3sIdLLYaIZQnltYkWqL9MHKx/w5b+hV+Mc0p5MLUFWJbTdkSCZ9g==",
+      "requires": {
+        "@interactjs/interact": "1.10.11",
+        "@interactjs/snappers": "1.10.11"
+      }
+    },
+    "@interactjs/offset": {
+      "version": "1.10.11",
+      "resolved": "https://registry.npmjs.org/@interactjs/offset/-/offset-1.10.11.tgz",
+      "integrity": "sha512-mBT7eIfy5ivofECiv+VwtEwwIMLV54fT9ujSMWJPduxdSYIHepUWgEf/3zjJknFh6jQc7pqz9dtjvVvyzRCLlQ==",
+      "requires": {
+        "@interactjs/interact": "1.10.11"
+      }
+    },
+    "@interactjs/pointer-events": {
+      "version": "1.10.11",
+      "resolved": "https://registry.npmjs.org/@interactjs/pointer-events/-/pointer-events-1.10.11.tgz",
+      "integrity": "sha512-yBT8JJVMZ+MgBay5l1WAHnL8ch/mZsRfaFahti+QFYeQyRloDtsWmEMDSYI/Onyy9+hS3gN/ge77ArGciZZ0Ow==",
+      "requires": {
+        "@interactjs/interact": "1.10.11"
+      }
+    },
+    "@interactjs/reflow": {
+      "version": "1.10.11",
+      "resolved": "https://registry.npmjs.org/@interactjs/reflow/-/reflow-1.10.11.tgz",
+      "integrity": "sha512-NSCtcCkjImOYSbxzzv2kFqR9t49J8KlhEr9UoePc7GyLbNXsiv3WQ3n0ehZd7CgZXQDiVXnP2UnmIOv5Zd4HQg==",
+      "requires": {
+        "@interactjs/interact": "1.10.11"
+      }
+    },
+    "@interactjs/snappers": {
+      "version": "1.10.11",
+      "resolved": "https://registry.npmjs.org/@interactjs/snappers/-/snappers-1.10.11.tgz",
+      "integrity": "sha512-yYtOMUZ7aFUZ1IYheq9Tj5hZ4J1r5dnaXhLF44WsI/awQ5L0DjZf07GPWof0B+7rZHEVudxyQNbPfFmb+1K94Q==",
+      "requires": {
+        "@interactjs/interact": "1.10.11"
+      }
+    },
+    "@interactjs/types": {
+      "version": "1.10.11",
+      "resolved": "https://registry.npmjs.org/@interactjs/types/-/types-1.10.11.tgz",
+      "integrity": "sha512-YRsVFWjL8Gkkvlx3qnjeaxW4fnibSJ9791g8BA7Pv5ANByI64WmtR1vU7A2rXcrOn8XvyCEfY0ss1s8NhZP+MA=="
+    },
+    "@interactjs/utils": {
+      "version": "1.10.11",
+      "resolved": "https://registry.npmjs.org/@interactjs/utils/-/utils-1.10.11.tgz",
+      "integrity": "sha512-410ZoxKF+r1roeSelL+WHXfdryUMg5iykC1XwQ3l6XqNw43IMACzyvTH6k6Pwxj7w7x42nce0Qdn1GQ3Y8xyCw=="
+    },
     "@intervolga/optimize-cssnano-plugin": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@intervolga/optimize-cssnano-plugin/-/optimize-cssnano-plugin-1.0.6.tgz",
@@ -4898,6 +5024,11 @@
       "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
       "dev": true
     },
+    "batch-processor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz",
+      "integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg="
+    },
     "bcrypt-pbkdf": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz",
@@ -7594,6 +7725,14 @@
         "normalize-wheel-es": "^1.1.0"
       }
     },
+    "element-resize-detector": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
+      "integrity": "sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==",
+      "requires": {
+        "batch-processor": "1.0.0"
+      }
+    },
     "elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
@@ -18649,6 +18788,27 @@
         }
       }
     },
+    "vue-grid-layout": {
+      "version": "3.0.0-beta1",
+      "resolved": "https://registry.npmjs.org/vue-grid-layout/-/vue-grid-layout-3.0.0-beta1.tgz",
+      "integrity": "sha512-MsW0yfYNtnAO/uDhfZvkP6effxSJxvhAFbIL37x6Rn3vW9xf0WHVefKaSbQMLpSq3mXnR6ut0pg2Cd5lqIIZzg==",
+      "requires": {
+        "@interactjs/actions": "^1.10.2",
+        "@interactjs/auto-start": "^1.10.2",
+        "@interactjs/dev-tools": "^1.10.2",
+        "@interactjs/interactjs": "^1.10.2",
+        "@interactjs/modifiers": "^1.10.2",
+        "element-resize-detector": "^1.2.1",
+        "mitt": "^2.1.0"
+      },
+      "dependencies": {
+        "mitt": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
+          "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
+        }
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -18741,6 +18901,21 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue-types": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/vue-types/-/vue-types-4.1.1.tgz",
+      "integrity": "sha512-Jq2GZ/w6rExJbLA/h7nHBFLciu+YNekgox0DB64wN1snZ4IIJMq+qnqp1/vE4fc7vEjZcP5KGhLzkkSjIHLRzw==",
+      "requires": {
+        "is-plain-object": "5.0.0"
+      },
+      "dependencies": {
+        "is-plain-object": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+          "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q=="
+        }
+      }
+    },
     "vuex": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",

package.json

@@ -16,8 +16,10 @@
     "three": "^0.131.3",
     "three-orbit-controls": "^82.1.0",
     "vue": "^3.0.0",
+    "vue-grid-layout": "^3.0.0-beta1",
     "vue-i18n": "^9.1.9",
     "vue-router": "^4.0.0-0",
+    "vue-types": "^4.1.1",
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {

src/types/global.d.ts

@@ -0,0 +1,114 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type {
+  ComponentRenderProxy,
+  VNode,
+  VNodeChild,
+  ComponentPublicInstance,
+  FunctionalComponent,
+  PropType as VuePropType,
+} from "vue";
+
+declare module "three";
+declare module "three-orbit-controls";
+declare module "element-plus";
+declare global {
+  const __APP_INFO__: {
+    pkg: {
+      name: string;
+      version: string;
+      dependencies: Recordable<string>;
+      devDependencies: Recordable<string>;
+    };
+    lastBuildTime: string;
+  };
+
+  // vue
+  declare type PropType<T> = VuePropType<T>;
+  declare type VueNode = VNodeChild | JSX.Element;
+
+  export type Writable<T> = {
+    -readonly [P in keyof T]: T[P];
+  };
+
+  declare type Nullable<T> = T | null;
+  declare type NonNullable<T> = T extends null | undefined ? never : T;
+  declare type Recordable<T = any> = Record<string, T>;
+  declare type ReadonlyRecordable<T = any> = {
+    readonly [key: string]: T;
+  };
+  declare type Indexable<T = any> = {
+    [key: string]: T;
+  };
+  declare type DeepPartial<T> = {
+    [P in keyof T]?: DeepPartial<T[P]>;
+  };
+  declare type TimeoutHandle = ReturnType<typeof setTimeout>;
+  declare type IntervalHandle = ReturnType<typeof setInterval>;
+
+  declare interface ChangeEvent extends Event {
+    target: HTMLInputElement;
+  }
+
+  declare interface WheelEvent {
+    path?: EventTarget[];
+  }
+  interface ImportMetaEnv extends ViteEnv {
+    __: unknown;
+  }
+
+  declare interface ViteEnv {
+    VITE_PORT: number;
+    VITE_USE_MOCK: boolean;
+    VITE_USE_PWA: boolean;
+    VITE_PUBLIC_PATH: string;
+    VITE_PROXY: [string, string][];
+    VITE_GLOB_APP_TITLE: string;
+    VITE_GLOB_APP_SHORT_NAME: string;
+    VITE_USE_CDN: boolean;
+    VITE_DROP_CONSOLE: boolean;
+    VITE_BUILD_COMPRESS: "gzip" | "brotli" | "none";
+    VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE: boolean;
+    VITE_LEGACY: boolean;
+    VITE_USE_IMAGEMIN: boolean;
+    VITE_GENERATE_UI: string;
+  }
+
+  declare function parseInt(s: string | number, radix?: number): number;
+
+  declare function parseFloat(string: string | number): number;
+
+  namespace JSX {
+    type Element = VNode;
+    type ElementClass = ComponentRenderProxy;
+    interface ElementAttributesProperty {
+      $props: any;
+    }
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+    interface IntrinsicAttributes {
+      [elem: string]: any;
+    }
+  }
+}
+
+declare module "vue" {
+  export type JSXComponent<Props = any> =
+    | { new (): ComponentPublicInstance<Props> }
+    | FunctionalComponent<Props>;
+}

src/types/vue-grid-item.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+declare module "vue-grid-layout" {
+  import Vue from "vue";
+
+  export class GridLayout extends Vue {}
+
+  export class GridItem extends Vue {}
+
+  export interface GridItemData {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    i: string;
+  }
+}

src/views/dashboard/Edit.vue

@@ -19,16 +19,74 @@ limitations under the License. -->
     <el-button size="mini" type="primary">Apply</el-button>
   </div>
   <div class="flex-h ds-main">
-    <div class="ds-layout flex-h">
+    <div class="ds-layout">
-      <div class="panel">item</div>
+      <grid-layout
-      <div class="panel">item</div>
+        v-model="layout"
-      <div class="panel">item</div>
+        :col-num="12"
+        :row-height="30"
+        :is-draggable="draggable"
+        :is-resizable="resizable"
+        :vertical-compact="true"
+        :use-css-transforms="true"
+      >
+        <grid-item
+          v-for="item in layout"
+          :static="item.static"
+          :x="item.x"
+          :y="item.y"
+          :w="item.w"
+          :h="item.h"
+          :i="item.i"
+          :key="item.i"
+        >
+          <span class="text">{{ itemTitle(item) }}</span>
+        </grid-item>
+      </grid-layout>
     </div>
-    <div class="ds-config">config</div>
+    <div class="ds-config">Configurations</div>
   </div>
 </template>
 <script lang="ts" setup>
+import { ref, reactive } from "vue";
 import { ElButton } from "element-plus";
+import { GridLayout, GridItem, GridItemData } from "vue-grid-layout";
+interface CustomData extends GridItemData {
+  label?: string;
+  static: boolean;
+}
+const layout = reactive<CustomData[]>([
+  { x: 0, y: 0, w: 2, h: 2, i: "0", static: false },
+  { x: 2, y: 0, w: 2, h: 4, i: "1", static: true },
+  { x: 4, y: 0, w: 2, h: 5, i: "2", static: false },
+  { x: 6, y: 0, w: 2, h: 3, i: "3", static: false },
+  { x: 8, y: 0, w: 2, h: 3, i: "4", static: false },
+  { x: 10, y: 0, w: 2, h: 3, i: "5", static: false },
+  { x: 0, y: 5, w: 2, h: 5, i: "6", static: false },
+  { x: 2, y: 5, w: 2, h: 5, i: "7", static: false },
+  { x: 4, y: 5, w: 2, h: 5, i: "8", static: false },
+  { x: 6, y: 3, w: 2, h: 4, i: "9", static: true },
+  { x: 8, y: 4, w: 2, h: 4, i: "10", static: false },
+  { x: 10, y: 4, w: 2, h: 4, i: "11", static: false },
+  { x: 0, y: 10, w: 2, h: 5, i: "12", static: false },
+  { x: 2, y: 10, w: 2, h: 5, i: "13", static: false },
+  { x: 4, y: 8, w: 2, h: 4, i: "14", static: false },
+  { x: 6, y: 8, w: 2, h: 4, i: "15", static: false },
+  { x: 8, y: 10, w: 2, h: 5, i: "16", static: false },
+  { x: 10, y: 4, w: 2, h: 2, i: "17", static: false },
+  { x: 0, y: 9, w: 2, h: 3, i: "18", static: false },
+  { x: 2, y: 6, w: 2, h: 2, i: "19", static: false },
+]);
+console.log(layout);
+const draggable = ref(true);
+const resizable = ref(true);
+const index = ref(0);
+function itemTitle(item: any) {
+  let result = item.i;
+  if (item.static) {
+    result += " - Static";
+  }
+  return result;
+}
 </script>
 <style lang="scss" scoped>
 .dashboard-tool {
@@ -52,6 +110,8 @@ import { ElButton } from "element-plus";
   width: 360px;
   margin: 5px 0;
   background-color: #fff;
+  box-shadow: 5px 5px 5px #fff;
+  text-align: center;
 }
 .panel {
   width: 300px;
@@ -60,4 +120,54 @@ import { ElButton } from "element-plus";
   margin: 5px;
   text-align: center;
 }
+.vue-grid-layout {
+  background: #eee;
+}
+.vue-grid-item:not(.vue-grid-placeholder) {
+  background: #ccc;
+  border: 1px solid black;
+}
+.vue-grid-item .resizing {
+  opacity: 0.9;
+}
+.vue-grid-item .static {
+  background: #cce;
+}
+.vue-grid-item .text {
+  font-size: 24px;
+  text-align: center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  height: 100%;
+  width: 100%;
+}
+.vue-grid-item .no-drag {
+  height: 100%;
+  width: 100%;
+}
+.vue-grid-item .minMax {
+  font-size: 12px;
+}
+.vue-grid-item .add {
+  cursor: pointer;
+}
+.vue-draggable-handle {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  top: 0;
+  left: 0;
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>")
+    no-repeat;
+  background-position: bottom right;
+  padding: 0 8px 8px 0;
+  background-repeat: no-repeat;
+  background-origin: content-box;
+  box-sizing: border-box;
+  cursor: pointer;
+}
 </style>

tsconfig.json

@@ -34,6 +34,7 @@
       "webpack-env",
       "jest"
     ],
+    "typeRoots": ["./node_modules/@types/", "./types"],
     "paths": {
       "@/*": [
         "src/*"