From be0ee537139ef73ce7c06cb458208ee0da0caeeb Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Sat, 22 Jul 2023 17:57:29 +0800
Subject: [PATCH] fix: config not working, wrong tooltip position

---
 src/components/SvgCanvas.vue | 1 +
 src/pages/index.vue          | 2 +-
 src/styles/main.css          | 6 ++++--
 src/utils/toast.ts           | 6 +++++-
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/SvgCanvas.vue b/src/components/SvgCanvas.vue
index 5a89617..73d6f0f 100644
--- a/src/components/SvgCanvas.vue
+++ b/src/components/SvgCanvas.vue
@@ -73,6 +73,7 @@ const brushworkLines = computed(() => lines.value.map((line) => {
 
 watch([
   () => props.replayOptions,
+  () => props.drawOptions,
   () => props.width,
   () => props.height,
 ], submitSvg, { deep: true })
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 0d375e2..cc7f55c 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -74,7 +74,7 @@ function onShare(e: MouseEvent) {
   const url = createShareUrl(svgRef.value?.lines, { drawOptions, replayOptions, brushOptions, width: width.value, height: height.value })
   copy(url)
   const target = e.target as HTMLElement
-  createToast(target, 'Share link copied!')
+  createToast(target, 'Share link copied!', { position: 'top' })
 }
 
 function debugPane() {
diff --git a/src/styles/main.css b/src/styles/main.css
index ae48e2a..a1c9672 100755
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -50,11 +50,13 @@ html {
   content: "";
   display: block;
   position: absolute;
-  bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
   width: 0;
   height: 0;
   border: 0.25rem solid transparent;
-  border-bottom-color: #222;
+}
+.toast--top::after {
+  top: 100%;
+  border-top-color: #222;
 }
\ No newline at end of file
diff --git a/src/utils/toast.ts b/src/utils/toast.ts
index a9b7889..a0092f8 100644
--- a/src/utils/toast.ts
+++ b/src/utils/toast.ts
@@ -15,7 +15,11 @@ export function createToast(
   toast.style.position = 'fixed'
   toast.style.zIndex = '999'
   toast.style.left = `${rect.left + rect.width / 2}px`
-  toast.style.top = `${rect.bottom + 10}px`
+  if (options?.position === 'top')
+    toast.style.bottom = `${window.innerHeight - rect.top + 10}px`
+  else if (options?.position === 'bottom')
+    toast.style.top = `${rect.bottom + 10}px`
+
   toast.style.transform = 'translateX(-50%)'
   toast.style.opacity = '1'
   toast.style.transition = 'opacity 0.3s ease'