Skip to content
This repository was archived by the owner on Mar 17, 2024. It is now read-only.

Commit 5f91cac

Browse files
ArenukvernArenukvern
committed
refactor: optimized a little GridViewBuilder
1 parent 88da8b5 commit 5f91cac

File tree

6 files changed

+118
-77
lines changed

6 files changed

+118
-77
lines changed

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@xsoulspace/vue_flutter_tailwind",
33
"description": "Vue3 styled like Flutter with Tailwind CSS",
4-
"version": "0.6.9",
4+
"version": "0.6.10",
55
"private": false,
66
"author": {
77
"name": "Anton Malofeev",
@@ -59,7 +59,7 @@
5959
"lint-staged": "^10.5.4",
6060
"prettier": "^2.2.1",
6161
"sass": "^1.26.5",
62-
"sass-loader": "^11.0.1",
62+
"sass-loader": "^10.1.1",
6363
"typescript": "^4.1.5",
6464
"vue-jest": "^5.0.0-0"
6565
},

‎src/components/GridView.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ export class GridView {
6666
GridViewBuilder,
6767
},
6868
setup() {
69+
console.log('init gridview')
6970
const resolvedIsDraggable = computed(() =>
7071
isDraggable?.value == false ? false : true
7172
)
@@ -79,9 +80,6 @@ export class GridView {
7980
const resolvedPlaceAnywhere = computed(() =>
8081
placeAnywhere?.value == false ? false : true
8182
)
82-
const widgets = computed(() =>
83-
delegate.widgets.map((el) => h(el ?? <div />))
84-
)
8583

8684
return () =>
8785
h(
@@ -93,9 +91,7 @@ export class GridView {
9391
placeAnywhere={resolvedPlaceAnywhere.value}
9492
delegate={delegate}
9593
onPositionUpdate={onPositionUpdate}
96-
>
97-
{...widgets.value}
98-
</grid-view-builder>
94+
/>
9995
)
10096
},
10197
})

‎src/components/GridViewBuilder.vue

Lines changed: 69 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
</grid-layout>
2626
</template>
2727
<script lang="ts">
28-
import { computed, reactive, watch } from 'vue'
28+
import { computed, reactive, ref, watch } from 'vue'
2929
3030
import { GridViewItemBuilder } from './GridViewItemBuilder'
3131
import {
@@ -35,6 +35,9 @@ import {
3535
} from '../abstract/Grid'
3636
import { Maybe, ValueChanged } from '../abstract/BasicTypes'
3737
import { getChangesFromOldAndNewArrays } from '@/functions'
38+
39+
type PackageGridItemPositionIndex = number
40+
3841
export default {
3942
name: 'GridViewBuilder',
4043
props: {
@@ -71,31 +74,15 @@ export default {
7174
GridViewItemBuilder,
7275
},
7376
setup(props) {
74-
const internalLayoutMatrixMap = reactive<
75-
Map<PackageGridItemPosition['i'], PackageGridItemPosition>
76-
>(new Map())
77-
const changeIndexedMap = ({
78-
positionsToUpdate,
79-
}: {
80-
positionsToUpdate: PackageGridItemPosition[]
81-
}) => {
82-
const { created, updated, removed } = getChangesFromOldAndNewArrays({
83-
newArr: positionsToUpdate,
84-
oldArr: internalLayoutMatrix.value,
85-
idPropertyName: 'i',
86-
})
87-
for (const removedPosition of removed) {
88-
internalLayoutMatrixMap.delete(removedPosition.i)
89-
}
90-
for (const createdPosition of created.concat(updated)) {
91-
internalLayoutMatrixMap.set(createdPosition.i, createdPosition)
92-
}
93-
}
94-
95-
const internalLayoutMatrix = computed({
96-
set: (positionsToUpdate) => changeIndexedMap({ positionsToUpdate }),
97-
get: () => [...internalLayoutMatrixMap.values()],
98-
})
77+
/**
78+
* This an persistent matrix which always up to date and synced
79+
* with vue-grid. AllChanges must go on from it or be written to it.
80+
*/
81+
const internalLayoutMatrix = reactive<PackageGridItemPosition[]>([])
82+
console.log('init')
83+
/**
84+
* Sending changes up
85+
*/
9986
const fixedTypeOnPositionUpdate = props.onPositionUpdate as Maybe<
10087
ValueChanged<GridViewItemPosition>
10188
>
@@ -127,21 +114,74 @@ export default {
127114
if (fixedTypeOnPositionUpdate)
128115
await fixedTypeOnPositionUpdate(newPosition)
129116
}
130-
const itemBuilder = ({ index }) => props.delegate.itemBuilder({ index })
117+
118+
/**
119+
* Getting changes down
120+
* 1. Watch for changes in delegate.
121+
* If its changes, run items check.
122+
* 2. If items is changed, then change interfnal matrix
123+
*/
124+
125+
const internalLayoutMapOfIndexes = computed(() => {
126+
const map = new Map<
127+
PackageGridItemPosition['i'],
128+
PackageGridItemPositionIndex
129+
>()
130+
for (let i = 0; i < internalLayoutMatrix.length; i++) {
131+
const position = internalLayoutMatrix[i]
132+
map.set(position.i, i)
133+
}
134+
return map
135+
})
136+
const isInit = ref(false)
137+
const changeIndexedMap = ({
138+
newArr,
139+
}: {
140+
newArr: PackageGridItemPosition[]
141+
}) => {
142+
const { created, updated, removed } = getChangesFromOldAndNewArrays({
143+
newArr,
144+
oldArr: internalLayoutMatrix,
145+
idPropertyName: 'i',
146+
})
147+
console.log({ created, updated, removed })
148+
for (const removedPosition of removed) {
149+
const index = internalLayoutMapOfIndexes.value.get(removedPosition.i)
150+
if (index) internalLayoutMatrix.splice(index, 1)
151+
}
152+
for (const createdPosition of created.concat(updated)) {
153+
const index = internalLayoutMapOfIndexes.value.get(createdPosition.i)
154+
155+
if (index) {
156+
internalLayoutMatrix[index] = createdPosition
157+
} else {
158+
internalLayoutMatrix.push(createdPosition)
159+
}
160+
}
161+
}
162+
131163
watch(
132164
props.delegate.reactive,
133165
() => {
134-
const positionsToUpdate = props.delegate.layoutMatrix.map((el) => ({
166+
if (isInit.value) {
167+
return
168+
} else {
169+
isInit.value = true
170+
}
171+
const newArr = props.delegate.layoutMatrix.map((el) => ({
135172
x: el.x,
136173
y: el.y,
137174
w: el.width,
138175
h: el.height,
139176
i: el.index,
140177
}))
141-
changeIndexedMap({ positionsToUpdate })
178+
console.log({ newArr, internalLayoutMatrix })
179+
changeIndexedMap({ newArr })
142180
},
143181
{ deep: true, immediate: true }
144182
)
183+
const itemBuilder = ({ index }) => props.delegate.itemBuilder({ index })
184+
145185
return {
146186
internalLayoutMatrix,
147187
handleResized,

‎src/components/GridViewItemBuilder.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,9 @@ export const GridViewItemBuilder = defineComponent({
1313
required: true,
1414
},
1515
},
16-
render() {
17-
const fixedItemBuilder = this.itemBuilder as ItemBuilder
18-
return h(fixedItemBuilder({ index: this.index }))
16+
setup(props) {
17+
const fixedItemBuilder = props.itemBuilder as ItemBuilder
18+
19+
return () => h(fixedItemBuilder({ index: props.index }))
1920
},
2021
})

‎src/components/Scaffold.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import { Component, defineComponent, h } from 'vue'
22

33
export const Scaffold = ({ body }: { body: Component }) => {
44
return defineComponent({
5+
name: 'Scaffold',
56
render() {
6-
return h('div', { class: 'min-h-screen relative leading-tight' }, h(body))
7+
return h('div', { class: '' }, h(body))
78
},
89
})
910
}

‎src/example/App.tsx

Lines changed: 39 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -135,34 +135,50 @@ export const WrapperApp = () => {
135135
width: EdgeInsetsStep.s96,
136136
})
137137
const isEnabled = ref(true)
138-
const layoutMatrix = reactive([
139-
{ x: 0, y: 0, width: 2, height: 2, index: 0 },
140-
{ x: 2, y: 0, width: 2, height: 4, index: 1 },
141-
{ x: 4, y: 0, width: 6, height: 8, index: 2 },
142-
{ x: 6, y: 0, width: 2, height: 3, index: 3 },
143-
{ x: 8, y: 0, width: 2, height: 3, index: 4 },
144-
{ x: 10, y: 0, width: 2, height: 3, index: 5 },
145-
{ x: 0, y: 5, width: 2, height: 5, index: 6 },
146-
{ x: 2, y: 5, width: 2, height: 5, index: 7 },
147-
{ x: 4, y: 5, width: 2, height: 5, index: 8 },
148-
{ x: 6, y: 3, width: 2, height: 4, index: 9 },
149-
{ x: 8, y: 4, width: 2, height: 4, index: 10 },
150-
{ x: 10, y: 4, width: 2, height: 4, index: 11 },
151-
{ x: 0, y: 10, width: 2, height: 5, index: 12 },
152-
{ x: 2, y: 10, width: 2, height: 5, index: 13 },
153-
{ x: 4, y: 8, width: 2, height: 4, index: 14 },
154-
{ x: 6, y: 8, width: 2, height: 4, index: 15 },
155-
{ x: 8, y: 10, width: 2, height: 5, index: 16 },
156-
{ x: 10, y: 4, width: 2, height: 2, index: 17 },
157-
{ x: 0, y: 9, width: 2, height: 3, index: 18 },
158-
{ x: 2, y: 6, width: 2, height: 2, index: 19 },
159-
])
138+
160139
return defineComponent({
161140
name: 'App',
162141
setup() {
142+
const layoutMatrix = reactive([
143+
{ x: 0, y: 0, width: 2, height: 2, index: 0 },
144+
{ x: 2, y: 0, width: 2, height: 4, index: 1 },
145+
{ x: 4, y: 0, width: 6, height: 8, index: 2 },
146+
{ x: 6, y: 0, width: 2, height: 3, index: 3 },
147+
{ x: 8, y: 0, width: 2, height: 3, index: 4 },
148+
{ x: 10, y: 0, width: 2, height: 3, index: 5 },
149+
{ x: 0, y: 5, width: 2, height: 5, index: 6 },
150+
{ x: 2, y: 5, width: 2, height: 5, index: 7 },
151+
{ x: 4, y: 5, width: 2, height: 5, index: 8 },
152+
{ x: 6, y: 3, width: 2, height: 4, index: 9 },
153+
{ x: 8, y: 4, width: 2, height: 4, index: 10 },
154+
{ x: 10, y: 4, width: 2, height: 4, index: 11 },
155+
{ x: 0, y: 10, width: 2, height: 5, index: 12 },
156+
{ x: 2, y: 10, width: 2, height: 5, index: 13 },
157+
{ x: 4, y: 8, width: 2, height: 4, index: 14 },
158+
{ x: 6, y: 8, width: 2, height: 4, index: 15 },
159+
{ x: 8, y: 10, width: 2, height: 5, index: 16 },
160+
{ x: 10, y: 4, width: 2, height: 2, index: 17 },
161+
{ x: 0, y: 9, width: 2, height: 3, index: 18 },
162+
{ x: 2, y: 6, width: 2, height: 2, index: 19 },
163+
])
163164
const navigationController = MultiProvider.get<NavigationController>(
164165
NavigationController
165166
)
167+
const gridViewDelegate = GridViewDelegate.use({
168+
gridViewItems: layoutMatrix.map((el) =>
169+
GridViewItem({
170+
child: TextButton({
171+
child: Text({
172+
text: ref(`text key:${el.index}`),
173+
}),
174+
expand: true,
175+
onTap: () => alert(`Hola ${el.index}!`),
176+
}),
177+
position: el,
178+
})
179+
),
180+
})
181+
166182
return () =>
167183
h(
168184
Scaffold({
@@ -257,20 +273,7 @@ export const WrapperApp = () => {
257273
console.log({ i })
258274
layoutMatrix.splice(i, 1, newPosition)
259275
},
260-
delegate: GridViewDelegate.use({
261-
gridViewItems: layoutMatrix.map((el) =>
262-
GridViewItem({
263-
child: TextButton({
264-
child: Text({
265-
text: ref(`text key:${el.index}`),
266-
}),
267-
expand: true,
268-
onTap: () => alert(`Hola ${el.index}!`),
269-
}),
270-
position: el,
271-
})
272-
),
273-
}),
276+
delegate: gridViewDelegate,
274277
}),
275278
],
276279
}),

0 commit comments

Comments
 (0)