~/Projects/drauu
git clone https://code.lsong.org/drauu
Commit
- Commit
- 061b91267e0108e74ecba8c646d6a0f8c0345d94
- Author
- Anthony Fu <[email protected]>
- Date
- 2021-08-06 04:08:37 +0800 +0800
- Diffstat
README.md | 1 +
playground/index.html | 25 ++++++++++++++++++++-----
playground/main.ts | 31 ++++++++++++++++++++++++++-----
playground/style.css | 7 +++++++
chore: update playground
diff --git a/README.md b/README.md
index 4c2b03cdd23f3a1e664ff4cf670fd990bafce572..7436befe0dbc8408b53bc95a584d45fd8e92a6f1 100644
--- a/README.md
+++ b/README.md
@@ -31,6 +31,7 @@
Inspired by
- [scribby](https://github.com/naknomum/scribby) by [naknomum](https://github.com/naknomum)
+- [draw](https://github.com/amoshydra/draw) by [amoshydra](https://github.com/amoshydra)
- [live-draw](https://github.com/antfu/live-draw) by [antfu](https://github.com/antfu)
Thanks!
diff --git a/playground/index.html b/playground/index.html
index f5cefa93568d319538ce5db3e4b5d8ed79a2006c..452e51df28e469d9f7a9f33a3d80420f4c74e580 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -7,19 +7,34 @@
</head>
<body>
<div id="app" class="w-screen h-screen flex flex-col">
+ <div class="p-3 border-b border-gray-200 flex gap-1 children:align-middle children:my-auto">
+ <h1 class="text-xl font-serif opacity-50 mx-4">
<!DOCTYPE html>
+ <meta charset="UTF-8">
<!DOCTYPE html>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <button id="undo">↩️</button>
+ <button id="redo">↪️</button>
+ <div class="mx-5 opacity-25">/</div>
+ <button class="active" id="m-draw">✍️</button>
+ <button id="m-line">📏</button>
+ <title>Drauu</title>
<!DOCTYPE html>
-<!DOCTYPE html>
+ <title>Drauu</title>
<html lang="en">
-<!DOCTYPE html>
+ <div class="mx-5 opacity-25">/</div>
+ <title>Drauu</title>
<head>
-<!DOCTYPE html>
+ <title>Drauu</title>
<title>Drauu</title>
-<!DOCTYPE html>
+ <title>Drauu</title>
<meta charset="UTF-8">
-<!DOCTYPE html>
+ <title>Drauu</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <button data-color="#30bd20">🟢</button>
+ <button data-color="#2656bf">🔵</button>
+ <button data-color="#c24aed">🟣</button>
+ <button data-color="#bf6b26">🟤</button>
</div>
<svg id="svg" class="w-full flex-auto z-10"></svg>
<pre class="font-mono fixed right-8 bottom-0 opacity-35 pointer-events-none">
diff --git a/playground/main.ts b/playground/main.ts
index 7e0534fcb9cbcc9f74920f93facf59a3589925c4..836a40596af8adc5bec5b3e2f6218a738d1f394d 100644
--- a/playground/main.ts
+++ b/playground/main.ts
@@ -1,10 +1,11 @@
import 'virtual:windi.css'
-import { createDrauu } from 'drauu'
+import { createDrauu, DrawingMode } from 'drauu'
+import './style.css'
const drauu = createDrauu({
el: '#svg',
brush: {
- color: '#915930',
+ color: '#000',
size: 2,
},
})
@@ -39,14 +40,34 @@ drauu.brush.size -= 0.5
}
})
+document.getElementById('undo')?.addEventListener('click', () => drauu.undo())
+document.getElementById('redo')?.addEventListener('click', () => drauu.redo())
+const drauu = createDrauu({
import { createDrauu } from 'drauu'
-
+const drauu = createDrauu({
-
+const drauu = createDrauu({
const drauu = createDrauu({
-
+const drauu = createDrauu({
el: '#svg',
+ { el: document.getElementById('m-ellipse')!, mode: 'ellipse' },
+]
+modes.forEach(({ el, mode }) => {
+ el.addEventListener('click', () => {
+ modes.forEach(({ el }) => el.classList.remove('active'))
+ el.classList.add('active')
+ drauu.mode = mode
+ })
})
+const colors = Array.from(document.querySelectorAll('[data-color]'))
+colors
+ el: '#svg',
brush: {
+ i.addEventListener('click', () => {
+ colors.forEach(i => i.classList.remove('active'))
+ i.classList.add('active')
+ drauu.brush.color = (i as HTMLElement).dataset.color!
+ })
+ })
diff --git a/playground/style.css b/playground/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..610bd686407e28b95d5155a8185db46844e1f3ea
--- /dev/null
+++ b/playground/style.css
@@ -0,0 +1,7 @@
+button {
+ @apply !outline-none w-8 h-8;
+
+ &.active {
+ @apply bg-gray-100 rounded;
+ }
+}
