Skip to content

Commit d491d56

Browse files
committed
redrawing moved to onUpdated
1 parent c708e8c commit d491d56

File tree

4 files changed

+15
-18
lines changed

4 files changed

+15
-18
lines changed

codeglynuikit-0.0.1.tgz

-28 Bytes
Binary file not shown.

demo-app/src/App.vue

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
<template>
2-
<SketchyDiv>INsied</SketchyDiv>
2+
<SketchyDiv class="pd">INsied</SketchyDiv>
33
</template>
44

55
<script setup>
66
import { SketchyDiv } from "codeglynuikit";
7+
// import { SketchyDiv } from '../../lib/src';
78
</script>
9+
10+
<style>
11+
.pd {
12+
padding: 80px;
13+
}
14+
</style>

lib/src/components/sketchydiv/SketchyDiv.vue

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
onUpdated,
88
ref,
99
useCssModule,
10-
watch,
1110
} from "vue";
1211
import rough from "roughjs";
1312
@@ -67,10 +66,6 @@ export default {
6766
}
6867
return updatedClasses;
6968
});
70-
watch(props, () => {
71-
clearCanvas();
72-
drawDiv();
73-
});
7469
7570
function drawDiv() {
7671
const rc = rough.canvas(canvasRef.value);
@@ -87,26 +82,19 @@ export default {
8782
size.value.width = containerRef.value.clientWidth;
8883
size.value.height = containerRef.value.clientHeight;
8984
drawDiv();
90-
91-
// This part automatically update the convas as it's external parent's size is updated
92-
// const contResizeObserver = new ResizeObserver(() => {
93-
// if (containerRef.value) {
94-
// size.value.width = containerRef.value.clientWidth;
95-
// size.value.height = containerRef.value.clientHeight;
96-
// clearCanvas();
97-
// drawDiv();
98-
// }
99-
// });
100-
// contResizeObserver.observe(containerRef.value);
10185
});
10286
});
10387
onUpdated(() => {
10488
nextTick(() => {
89+
size.value.width = containerRef.value.clientWidth;
90+
size.value.height = containerRef.value.clientHeight;
10591
clearCanvas();
10692
drawDiv();
10793
});
10894
});
10995
96+
97+
11098
return () => {
11199
const child = [
112100
h("canvas", {
@@ -139,4 +127,6 @@ export default {
139127
left: 0;
140128
right: 0;
141129
}
130+
131+
142132
</style>

lib/vite.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,6 @@ export default defineConfig({
2121
},
2222
},
2323
},
24-
cssCodeSplit: false
24+
// cssCodeSplit: false
2525
},
2626
});

0 commit comments

Comments
 (0)