@vue-lynx-example/7guis 0.2.0 → 0.2.1

package/src/circle-drawer/App.vue

@@ -1,27 +1,40 @@
 <script setup>
-import { ref, shallowReactive } from 'vue'
+import { ref, shallowReactive, computed } from 'vue'
 
 const history = shallowReactive([[]])
 const historyIndex = ref(0)
 const circles = ref([])
 const selectedId = ref(-1)
-const adjusting = ref(false)
+const showModal = ref(false)
 
 let nextId = 0
 
+// Modal slider state
+const sliderWidth = 200 // Width of slider track in px
+const minRadius = 5
+const maxRadius = 150
+
+// Double tap detection
+const lastTapTime = ref(0)
+const lastTapId = ref(-1)
+const DOUBLE_TAP_DELAY = 300 // ms
+
+const selectedCircle = computed(() => {
+  return circles.value.find(c => c.id === selectedId.value)
+})
+
 function onCanvasTap(e) {
-  if (adjusting.value) {
-    adjusting.value = false
-    selectedId.value = -1
-    push()
+  // If modal is open, close it without creating new circle
+  if (showModal.value) {
+    closeModal()
     return
   }
 
-  // Check if tapped on an existing circle
+  // Get touch coordinates - relative to the full view
   const x = e.detail?.x ?? e.touches?.[0]?.pageX ?? 0
   const y = e.detail?.y ?? e.touches?.[0]?.pageY ?? 0
-  console.log('[circle-drawer] tap event:', { x, y, detail: e.detail, type: e.type, raw: { clientX: e.clientX, clientY: e.clientY } })
 
+  // Check if tapped on an existing circle
   const hit = [...circles.value].reverse().find((c) => {
     const dx = c.x - x
     const dy = c.y - y
@@ -29,7 +42,7 @@ function onCanvasTap(e) {
   })
 
   if (hit) {
-    selectedId.value = hit.id
+    handleCircleTap(hit.id)
   } else {
     circles.value.push({ id: nextId++, x, y, r: 30 })
     selectedId.value = -1
@@ -37,37 +50,108 @@ function onCanvasTap(e) {
   }
 }
 
-function startAdjust() {
-  if (selectedId.value >= 0) {
-    adjusting.value = true
+function handleCircleTap(circleId) {
+  const now = Date.now()
+  const timeSinceLastTap = now - lastTapTime.value
+  
+  if (lastTapId.value === circleId && timeSinceLastTap < DOUBLE_TAP_DELAY) {
+    // Double tap detected - open modal
+    showModal.value = true
+    lastTapId.value = -1
+    lastTapTime.value = 0
+  } else {
+    // Single tap - just select
+    selectedId.value = circleId
+    lastTapId.value = circleId
+    lastTapTime.value = now
   }
 }
 
-function adjustRadius(delta) {
-  const circle = circles.value.find((c) => c.id === selectedId.value)
-  if (circle) {
-    circle.r = Math.max(5, Math.min(150, circle.r + delta))
+function onCircleTap(e, circle) {
+  // Use catchtap to stop event bubbling to parent
+  e?.stopPropagation?.()
+  handleCircleTap(circle.id)
+}
+
+function closeModal() {
+  if (showModal.value) {
+    showModal.value = false
+    push()
   }
 }
 
+function onModalTap(e) {
+  // Stop propagation to prevent canvas interaction
+  e?.stopPropagation?.()
+}
+
+function onOverlayTap(e) {
+  // Close modal when tapping overlay background
+  e?.stopPropagation?.()
+  closeModal()
+}
+
+// Slider drag handling
+const isDragging = ref(false)
+const sliderValue = computed({
+  get() {
+    return selectedCircle.value?.r ?? minRadius
+  },
+  set(val) {
+    if (selectedCircle.value) {
+      selectedCircle.value.r = Math.max(minRadius, Math.min(maxRadius, val))
+    }
+  }
+})
+
+function onSliderTouchStart(e) {
+  isDragging.value = true
+  updateSliderFromTouch(e)
+}
+
+function onSliderTouchMove(e) {
+  if (isDragging.value) {
+    updateSliderFromTouch(e)
+  }
+}
+
+function onSliderTouchEnd(e) {
+  isDragging.value = false
+}
+
+function updateSliderFromTouch(e) {
+  const touch = e.touches?.[0] ?? e.changedTouches?.[0]
+  if (!touch) return
+  
+  // Calculate position relative to slider track
+  const trackLeft = (globalThis.window?.innerWidth ?? 375) / 2 - sliderWidth / 2
+  const relativeX = touch.pageX - trackLeft
+  const percentage = Math.max(0, Math.min(1, relativeX / sliderWidth))
+  sliderValue.value = minRadius + percentage * (maxRadius - minRadius)
+}
+
 function push() {
   history.length = ++historyIndex.value
   history.push(circles.value.map((c) => ({ ...c })))
 }
 
-function undo() {
+function undo(e) {
+  // Use catchtap to prevent event from reaching canvas
+  e?.stopPropagation?.()
   if (historyIndex.value > 0) {
     circles.value = history[--historyIndex.value].map((c) => ({ ...c }))
     selectedId.value = -1
-    adjusting.value = false
+    showModal.value = false
   }
 }
 
-function redo() {
+function redo(e) {
+  // Use catchtap to prevent event from reaching canvas
+  e?.stopPropagation?.()
   if (historyIndex.value < history.length - 1) {
     circles.value = history[++historyIndex.value].map((c) => ({ ...c }))
     selectedId.value = -1
-    adjusting.value = false
+    showModal.value = false
   }
 }
 </script>
@@ -78,7 +162,7 @@ function redo() {
     :style="{ width: '100%', height: '100vh', minHeight: '400px', backgroundColor: '#f0f0f0', position: 'relative' }"
     @tap="onCanvasTap"
   >
-    <!-- Hint text -->
+    <!-- Hint text for empty state -->
     <text
       v-if="circles.length === 0"
       :style="{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', color: '#bbb', fontSize: 14, textAlign: 'center' }"
@@ -97,10 +181,11 @@ function redo() {
         width: circle.r * 2 + 'px',
         height: circle.r * 2 + 'px',
         borderRadius: circle.r + 'px',
-        backgroundColor: circle.id === selectedId ? '#ccc' : '#fff',
-        borderWidth: 1,
-        borderColor: '#333',
+        backgroundColor: circle.id === selectedId ? '#0077ff' : '#fff',
+        borderWidth: circle.id === selectedId ? 3 : 1,
+        borderColor: circle.id === selectedId ? '#0055cc' : '#333',
       }"
+      @tap="(e) => onCircleTap(e, circle)"
     />
 
     <!-- Undo / Redo overlaid at the top -->
@@ -119,33 +204,109 @@ function redo() {
       </view>
     </view>
 
-    <!-- Adjust controls overlaid at the bottom -->
-    <view v-if="selectedId >= 0" :style="{ position: 'absolute', bottom: 20, left: 0, right: 0, alignItems: 'center', gap: 8 }">
-      <view v-if="!adjusting">
+    <!-- Hint for interaction -->
+    <text
+      v-if="circles.length > 0 && !showModal"
+      :style="{ position: 'absolute', bottom: 20, left: 0, right: 0, textAlign: 'center', color: '#666', fontSize: 12 }"
+    >
+      Double-tap a circle to adjust radius
+    </text>
+
+    <!-- Modal Overlay -->
+    <view
+      v-if="showModal"
+      :style="{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 100,
+      }"
+      @tap="onOverlayTap"
+    >
+      <!-- Modal Content -->
+      <view
+        :style="{
+          backgroundColor: '#fff',
+          borderRadius: 12,
+          padding: '24px 32px',
+          alignItems: 'center',
+          minWidth: '280px',
+        }"
+        @tap="onModalTap"
+      >
+        <text :style="{ fontSize: 18, fontWeight: 'bold', color: '#333', marginBottom: 16 }">
+          Adjust Radius
+        </text>
+        
+        <text :style="{ fontSize: 24, fontWeight: 'bold', color: '#0077ff', marginBottom: 20 }">
+          {{ Math.round(selectedCircle?.r ?? 0) }}px
+        </text>
+
+        <!-- Slider Track -->
         <view
-          :style="{ padding: '8px 20px', backgroundColor: '#0077ff', borderRadius: 6 }"
-          @tap="startAdjust"
+          :style="{
+            width: sliderWidth + 'px',
+            height: 6,
+            backgroundColor: '#e0e0e0',
+            borderRadius: 3,
+            position: 'relative',
+          }"
+          @touchstart="onSliderTouchStart"
+          @touchmove="onSliderTouchMove"
+          @touchend="onSliderTouchEnd"
         >
-          <text :style="{ color: '#fff', fontSize: 14 }">Adjust Radius</text>
-        </view>
-      </view>
-      <view v-else :style="{ alignItems: 'center', gap: 6 }">
-        <text :style="{ fontSize: 14 }">
-          Radius: {{ circles.find(c => c.id === selectedId)?.r ?? 0 }}
-        </text>
-        <view :style="{ display: 'flex', flexDirection: 'row', gap: 8 }">
+          <!-- Filled portion -->
           <view
-            :style="{ padding: '6px 16px', backgroundColor: '#eee', borderRadius: 4 }"
-            @tap="adjustRadius(-5)"
-          >
-            <text :style="{ fontSize: 16 }">-</text>
-          </view>
+            :style="{
+              position: 'absolute',
+              left: 0,
+              top: 0,
+              height: 6,
+              width: (((selectedCircle?.r ?? minRadius) - minRadius) / (maxRadius - minRadius)) * sliderWidth + 'px',
+              backgroundColor: '#0077ff',
+              borderRadius: 3,
+            }"
+          />
+          <!-- Thumb -->
           <view
-            :style="{ padding: '6px 16px', backgroundColor: '#eee', borderRadius: 4 }"
-            @tap="adjustRadius(5)"
-          >
-            <text :style="{ fontSize: 16 }">+</text>
-          </view>
+            :style="{
+              position: 'absolute',
+              top: -7,
+              left: (((selectedCircle?.r ?? minRadius) - minRadius) / (maxRadius - minRadius)) * sliderWidth - 10 + 'px',
+              width: 20,
+              height: 20,
+              backgroundColor: '#0077ff',
+              borderRadius: 10,
+              borderWidth: 2,
+              borderColor: '#fff',
+              boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
+            }"
+          />
+        </view>
+
+        <!-- Slider Labels -->
+        <view :style="{ width: sliderWidth + 'px', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', marginTop: 8 }">
+          <text :style="{ fontSize: 12, color: '#999' }">{{ minRadius }}px</text>
+          <text :style="{ fontSize: 12, color: '#999' }">{{ maxRadius }}px</text>
+        </view>
+
+        <!-- Done Button -->
+        <view
+          :style="{
+            marginTop: 24,
+            padding: '10px 32px',
+            backgroundColor: '#0077ff',
+            borderRadius: 6,
+          }"
+          @tap="closeModal"
+        >
+          <text :style="{ color: '#fff', fontSize: 16, fontWeight: 'bold' }">Done</text>
         </view>
       </view>
     </view>