github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-01 19:03:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: resize and drag component

Browse Source
This commit is contained in:
Qiuxia Fan 2021-12-22 15:52:39 +08:00
parent 91982557a3
commit d98280c427
3 changed files with 134 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
package-lock.json generated
View File

@ -14726,6 +14726,90 @@
}
}
},
"postcss-html": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/postcss-html/-/postcss-html-1.3.0.tgz",
"integrity": "sha512-ewbwd7OGW4dLsErtvZH9HpVMEcXnlhYSzKsr7MepGlOT8imHTIZ/+pdfEruLS+hTYapLTQAWDnoQcJpsYU4uRw==",
"dev": true,
"requires": {
"htmlparser2": "^7.1.2",
"postcss": "^8.4.0",
"postcss-safe-parser": "^6.0.0"
},
"dependencies": {
"dom-serializer": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
"integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
"dev": true,
"requires": {
"domelementtype": "^2.0.1",
"domhandler": "^4.2.0",
"entities": "^2.0.0"
},
"dependencies": {
"entities": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz",
"integrity": "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==",
"dev": true
}
}
},
"domelementtype": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
"integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
"dev": true
},
"domutils": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
"integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
"dev": true,
"requires": {
"dom-serializer": "^1.0.1",
"domelementtype": "^2.2.0",
"domhandler": "^4.2.0"
}
},
"entities": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
"integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
"dev": true
},
"htmlparser2": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-7.2.0.tgz",
"integrity": "sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==",
"dev": true,
"requires": {
"domelementtype": "^2.0.1",
"domhandler": "^4.2.2",
"domutils": "^2.8.0",
"entities": "^3.0.1"
}
},
"postcss": {
"version": "8.4.5",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
"integrity": "sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==",
"dev": true,
"requires": {
"nanoid": "^3.1.30",
"picocolors": "^1.0.0",
"source-map-js": "^1.0.1"
}
},
"source-map-js": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.1.tgz",
"integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==",
"dev": true
}
}
},
"postcss-load-config": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.2.tgz",

3
package.json
View File

@ -45,6 +45,7 @@
"husky": "^7.0.4",
"lint-staged": "^12.1.3",
"node-sass": "^6.0.1",
"postcss-html": "^1.3.0",
"postcss-scss": "^4.0.2",
"prettier": "^2.2.1",
"sass-loader": "^10.2.0",
@ -111,7 +112,7 @@
"*.vue": [
"eslint --fix",
"prettier --write",
"stylelint --fix --custom-syntax postcss-scss"
"stylelint --fix --custom-syntax postcss-html"
],
"{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
"prettier --write--parser json"

107
src/views/dashboard/Edit.vue
View File

@ -20,84 +20,60 @@ limitations under the License. -->
</div>
<div class="flex-h ds-main">
<div class="ds-layout">
<GridLayout
v-model="layout"
:col-num="12"
:row-height="30"
:is-draggable="draggable"
:is-resizable="resizable"
:vertical-compact="true"
:use-css-transforms="true"
<VueDragResize
:isActive="item.static"
:w="item.w"
:h="item.h"
:x="item.x"
:y="item.y"
@resizing="resize"
@dragging="resize"
v-for="item in layout"
:key="item.i"
>
<GridItem
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>
</GridItem>
</GridLayout>
<h3>Hello World {{ item.i }}</h3>
</VueDragResize>
</div>
<div class="ds-config">Configurations</div>
</div>
</template>
<script lang="ts">
import { ref, reactive, defineComponent } from "vue";
import { toRefs, defineComponent, reactive, ref } from "vue";
import { ElButton } from "element-plus";
import VueGridLayout, { GridItemData } from "vue-grid-layout";
interface CustomData extends GridItemData {
import VueDragResize from "vue-drag-resize";
export interface GridItemData {
x: number;
y: number;
w: number;
h: number;
i: number;
static: boolean;
}
console.log(VueGridLayout.GridLayout);
export default defineComponent({
name: "dashboardEdit",
components: {
ElButton,
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem,
VueDragResize,
},
setup() {
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 },
const layout = ref<GridItemData[]>([
{ x: 300, y: 100, w: 200, h: 200, i: 0, static: true },
{ x: 500, y: 100, w: 200, h: 200, i: 1, static: true },
{ x: 700, y: 100, w: 200, h: 200, i: 2, static: true },
{ x: 900, y: 100, w: 200, h: 200, i: 3, static: true },
]);
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;
function resize(newRect: {
width: number;
height: number;
top: number;
left: number;
}) {
console.log(newRect);
}
return { draggable, resizable, index, layout, itemTitle };
return { resize, layout };
},
});
</script>
@ -108,9 +84,11 @@ export default defineComponent({
background: rgb(240, 242, 245);
// border-bottom: 1px solid rgb(240, 242, 245);
}
.ds-main {
background: rgb(240, 242, 245);
}
.ds-layout {
// background: rgb(240, 242, 245);
// background-color: #fafbfc;
@ -119,6 +97,7 @@ export default defineComponent({
overflow: auto;
// padding: 0 5px;
}
.ds-config {
width: 360px;
margin: 5px 0;
@ -126,6 +105,7 @@ export default defineComponent({
box-shadow: 5px 5px 5px #fff;
text-align: center;
}
.panel {
width: 300px;
height: 300px;
@ -133,19 +113,24 @@ export default defineComponent({
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;
@ -158,16 +143,20 @@ export default defineComponent({
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;