Skip to content

Commit a3c95ff

Browse files
committed
sketchyhline component added
1 parent d65979b commit a3c95ff

File tree

4 files changed

+58
-4
lines changed

4 files changed

+58
-4
lines changed

codeglynuikit-0.0.1.tgz

537 Bytes
Binary file not shown.

demo-app/src/App.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
22
<SketchyDiv class="pd" style="margin-bottom: 10px;">INsied</SketchyDiv>
3-
<SketchyBtn label="Click" style="padding: 10px 5px; font-size: 18px;"/>
3+
<SketchyBtn label="Click" style="padding: 10px 5px; font-size: 18px; margin-bottom: 100px;"/>
4+
<SketchyHLine />
45
</template>
56

67
<script setup>
78
import { SketchyDiv } from "codeglynuikit";
8-
// import { SketchyDiv } from '../../lib/src';
99
import { SketchyBtn } from "codeglynuikit";
10-
// import SketchyBtn from "../../lib/src/components/sketchybtn/SketchyBtn.vue";
10+
import { SketchyHLine } from "codeglynuikit";
1111
</script>
1212

1313
<style>
Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<template>
2+
<div class="container" ref="containerRef">
3+
<canvas ref="canvasRef" class="hline-canvas" :width="size.width" height="2"></canvas>
4+
</div>
5+
</template>
6+
<script setup>
7+
import { onMounted, onUpdated, ref } from 'vue'
8+
import rough from 'roughjs'
9+
const canvasRef = ref(null)
10+
const containerRef = ref(null)
11+
const size = ref({
12+
width: null
13+
})
14+
15+
function drawHLine() {
16+
const rc = rough.canvas(canvasRef.value)
17+
rc.line(0, 0, size.value.width, 0, { strokeWidth: 2, seed: 20 }) // I like seed 5, 20
18+
}
19+
function clearCanvas() {
20+
canvasRef.value.getContext('2d').clearRect(0, 0, size.value.width, 2)
21+
}
22+
23+
onMounted(() => {
24+
// draw on canvas after 100ms so refs are properly working
25+
const timeOut = setTimeout(() => {
26+
size.value.width = containerRef.value.clientWidth
27+
drawHLine()
28+
29+
// This part automatically update the convas as it's external parent's size is updated
30+
const contResizeObserver = new ResizeObserver(() => {
31+
if (containerRef.value) {
32+
size.value.width = containerRef.value.clientWidth
33+
clearCanvas()
34+
drawHLine()
35+
}
36+
})
37+
contResizeObserver.observe(containerRef.value)
38+
clearTimeout(timeOut)
39+
}, 100)
40+
})
41+
onUpdated(() => {
42+
// redraw everything after something is updated about the component
43+
size.value.width = containerRef.value.clientWidth
44+
drawHLine()
45+
})
46+
</script>
47+
48+
<style scoped>
49+
.container {
50+
width: 100%;
51+
}
52+
</style>
53+

lib/src/index.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import SketchyDiv from "./components/sketchydiv/SketchyDiv.vue";
22
import SketchyBtn from "./components/sketchybtn/SketchyBtn.vue";
3+
import SketchyHLine from "./components/sketchyhline/SketchyHLine.vue";
34

4-
export { SketchyDiv, SketchyBtn };
5+
export { SketchyDiv, SketchyBtn, SketchyHLine };

0 commit comments

Comments
 (0)