purgetss 7.4.0 → 7.5.1

package/dist/purgetss.ui.js

@@ -1,17 +1,29 @@
-// PurgeTSS v7.3.1
+// PurgeTSS v7.5.1
 // Created by César Estrada
 // https://purgetss.com
 
 function Animation(args = {}) {
   const params = {
+    // Global
     id: args.id,
+    debug: args.debug ?? false,
+    isIOS: Ti.Platform.osname === 'iphone' || Ti.Platform.osname === 'ipad',
+
+    // Play / Toggle / Sequence
     open: false,
-    draggables: [],
     playing: false,
     delay: args.delay ?? 0,
-    debug: args.debug ?? false,
-    isIOS: Ti.Platform.osname === 'iphone' || Ti.Platform.osname === 'ipad',
-    hasTransformation: (args.scale !== undefined || args.rotate !== undefined)
+    hasTransformation: (args.scale !== undefined || args.rotate !== undefined),
+
+    // Draggable
+    draggables: [],
+
+    // Collision Detection
+    collisionViews: [],
+    dragCB: null,
+    dropCB: null,
+    lastHoverTarget: null,
+    lastKnownTarget: null
   }
 
   logger('Create Animation View: ' + params.id)
@@ -42,6 +54,242 @@ function Animation(args = {}) {
     makeViewsDraggable(_views)
   }
 
+  animationView.detectCollisions = (views, _dragCB, _dropCB) => {
+    if (params.debug) { console.log('') }
+    logger('`detectCollisions` method called on: ' + params.id)
+    if (_dragCB) params.dragCB = _dragCB
+    if (_dropCB) params.dropCB = _dropCB
+    const arr = Array.isArray(views) ? views : [views]
+    arr.forEach(view => {
+      view._collisionEnabled = true
+      if (!params.collisionViews.includes(view)) {
+        params.collisionViews.push(view)
+      }
+    })
+  }
+
+  function resolvePosition(view) {
+    if (view._originTop !== undefined) return { top: view._originTop, left: view._originLeft }
+    if (view.top !== undefined && view.top !== null && view.left !== undefined && view.left !== null) return { top: view.top, left: view.left }
+    const r = view.rect
+    return { top: r.y, left: r.x }
+  }
+
+  function normalizePosition(view) {
+    const pos = resolvePosition(view)
+    view.applyProperties({ top: pos.top, left: pos.left, right: null, bottom: null })
+    view._originTop = pos.top
+    view._originLeft = pos.left
+  }
+
+  animationView.swap = (view1, view2) => {
+    if (params.debug) { console.log('') }
+    logger('`swap` method called on: ' + params.id)
+
+      // Cancel any pending bounce-back animations
+      ;[view1, view2].forEach(v => {
+        if (v._bouncingBack) {
+          logger(`   -> cancelling bounce-back for ${v.id} before swap`)
+          v.applyProperties({ top: v._originTop, left: v._originLeft, transform: Ti.UI.createMatrix2D() })
+          v._bouncingBack = false
+        }
+      })
+
+    // Read REAL positions — rect gives actual rendered position, no stale variables
+    const targetRect = view2.rect
+    const sourceHome = { top: view1._originTop ?? view1.top, left: view1._originLeft ?? view1.left }
+
+    // Source goes to target's real position, target goes to source's home
+    const dest1Top = targetRect.y
+    const dest1Left = targetRect.x
+    const dest2Top = sourceHome.top
+    const dest2Left = sourceHome.left
+
+    logger(`   -> ${view1.id}: home(${sourceHome.top}, ${sourceHome.left}) → dest(${dest1Top}, ${dest1Left})`)
+    logger(`   -> ${view2.id}: rect(${targetRect.y}, ${targetRect.x}) → dest(${dest2Top}, ${dest2Left})`)
+
+    const maxZ = params.draggables.length
+    view1.zIndex = maxZ + 1
+    view2.zIndex = maxZ
+
+    view1.animate({
+      ...args, left: dest1Left, top: dest1Top, transform: Ti.UI.createMatrix2D()
+    }, () => {
+      view1.applyProperties({ left: dest1Left, top: dest1Top, transform: Ti.UI.createMatrix2D() })
+      params.draggables.forEach((d, k) => { d.zIndex = k })
+    })
+
+    view2.animate({
+      ...args, left: dest2Left, top: dest2Top
+    }, () => {
+      view2.applyProperties({ left: dest2Left, top: dest2Top })
+    })
+
+    view1._originTop = dest1Top
+    view1._originLeft = dest1Left
+    view2._originTop = dest2Top
+    view2._originLeft = dest2Left
+  }
+
+  animationView.sequence = (_views, _cb) => {
+    if (params.debug) { console.log('') }
+    logger('`sequence` method called on: ' + params.id)
+    const views = Array.isArray(_views) ? _views : [_views]
+    const total = views.length
+
+    params.open = !params.open
+    chooseAnimationBasedOnState('play')
+
+    function animateNext(index) {
+      if (index >= total) { return }
+      const isLast = index === total - 1
+      playView(views[index], (e) => {
+        if (isLast && typeof _cb === 'function') {
+          _cb(e)
+        } else {
+          animateNext(index + 1)
+        }
+      }, 'play', index, total)
+    }
+
+    animateNext(0)
+  }
+
+  animationView.shake = (view, intensity = 10) => {
+    if (params.debug) { console.log('') }
+    logger('`shake` method called on: ' + params.id)
+    if (!view) { return notFound() }
+
+    view.applyProperties({ transform: Ti.UI.createMatrix2D().translate(-intensity, 0) })
+
+    view.animate({
+      ...args,
+      transform: Ti.UI.createMatrix2D().translate(intensity, 0),
+      duration: Math.round((args.duration ?? 400) / 6),
+      autoreverse: true,
+      repeat: 3,
+      curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
+    }, () => {
+      view.applyProperties({ transform: Ti.UI.createMatrix2D() })
+    })
+  }
+
+  animationView.pulse = (view, count = 1) => {
+    if (params.debug) { console.log('') }
+    logger('`pulse` method called on: ' + params.id)
+    if (!view) { return notFound() }
+
+    view.animate({
+      ...args,
+      transform: args.transform ?? Ti.UI.createMatrix2D().scale(1.2),
+      autoreverse: true,
+      repeat: count,
+      curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
+    }, () => {
+      view.applyProperties({ transform: Ti.UI.createMatrix2D() })
+    })
+  }
+
+  animationView.snapTo = (view, targets) => {
+    if (params.debug) { console.log('') }
+    logger('`snapTo` method called on: ' + params.id)
+    if (!view) { return notFound() }
+
+    const arr = Array.isArray(targets) ? targets : [targets]
+    const vr = view.rect
+    const vcx = (view._visualLeft ?? view.left) + vr.width / 2
+    const vcy = (view._visualTop ?? view.top) + vr.height / 2
+
+    let closest = null
+    let minDist = Infinity
+
+    arr.forEach(target => {
+      if (target === view) { return }
+      const tr = target.rect
+      const tcx = tr.x + tr.width / 2
+      const tcy = tr.y + tr.height / 2
+      const dist = Math.sqrt((vcx - tcx) ** 2 + (vcy - tcy) ** 2)
+      if (dist < minDist) {
+        minDist = dist
+        closest = target
+      }
+    })
+
+    if (!closest) { return null }
+
+    const cr = closest.rect
+    normalizePosition(closest)
+    const destLeft = closest._originLeft + (cr.width - vr.width) / 2
+    const destTop = closest._originTop + (cr.height - vr.height) / 2
+
+    view.animate({
+      ...args, left: destLeft, top: destTop, transform: Ti.UI.createMatrix2D()
+    }, () => {
+      view.applyProperties({ left: destLeft, top: destTop, transform: Ti.UI.createMatrix2D() })
+    })
+
+    view._originTop = destTop
+    view._originLeft = destLeft
+
+    return closest
+  }
+
+  animationView.reorder = (views, newOrder) => {
+    if (params.debug) { console.log('') }
+    logger('`reorder` method called on: ' + params.id)
+    const arr = Array.isArray(views) ? views : [views]
+    if (newOrder.length !== arr.length) { return }
+
+    arr.forEach(v => normalizePosition(v))
+
+    const positions = arr.map(v => ({
+      left: v._originLeft,
+      top: v._originTop
+    }))
+
+    arr.forEach((view, i) => {
+      const dest = positions[newOrder[i]]
+
+      view.animate({
+        ...args, left: dest.left, top: dest.top, transform: Ti.UI.createMatrix2D()
+      }, () => {
+        view.applyProperties({ left: dest.left, top: dest.top, transform: Ti.UI.createMatrix2D() })
+      })
+
+      view._originTop = dest.top
+      view._originLeft = dest.left
+    })
+  }
+
+  animationView.undraggable = (_views) => {
+    if (params.debug) { console.log('') }
+    logger('`undraggable` method called on: ' + params.id)
+    const arr = Array.isArray(_views) ? _views : [_views]
+
+    arr.forEach(view => {
+      if (view._dragListeners) {
+        view.removeEventListener('touchstart', view._dragListeners.onTouchStart)
+        view.removeEventListener('touchend', view._dragListeners.onTouchEnd)
+        view.removeEventListener('touchmove', view._dragListeners.onTouchMove)
+        Ti.Gesture.removeEventListener('orientationchange', view._dragListeners.onOrientationChange)
+        delete view._dragListeners
+      }
+
+      const idx = params.draggables.indexOf(view)
+      if (idx !== -1) { params.draggables.splice(idx, 1) }
+
+      const cIdx = params.collisionViews.indexOf(view)
+      if (cIdx !== -1) { params.collisionViews.splice(cIdx, 1) }
+
+      delete view._originTop
+      delete view._originLeft
+      delete view._visualTop
+      delete view._visualLeft
+      delete view._collisionEnabled
+      delete view._bouncingBack
+    })
+  }
+
   animationView.open = (_views, _cb) => {
     if (params.debug) { console.log('') }
     logger('`open` method called on: ' + params.id)
@@ -54,6 +302,54 @@ function Animation(args = {}) {
     mainPlayApplyFn(_views, _cb, 'play', 'close')
   }
 
+  // Mac Catalyst note: Parent containers of transitioned views should use fixed
+  // dimensions (not Ti.UI.FILL). Resizable containers trigger a UIKit re-layout
+  // that distorts views with rotated Matrix2D transforms.
+  animationView.transition = (views, layouts) => {
+    if (params.debug) { console.log('') }
+    logger('`transition` method called on: ' + params.id)
+
+    const arr = Array.isArray(views) ? views : [views]
+
+    arr.forEach((view, i) => {
+      const layout = layouts[i]
+
+      if (!layout) {
+        view.animate(Ti.UI.createAnimation({ ...args, zIndex: 0, opacity: 0 }), () => {
+          view.applyProperties({ zIndex: 0, opacity: 0, transform: Ti.UI.createMatrix2D(), translation: { x: 0, y: 0 }, rotate: 0, scale: 1 })
+        })
+        return
+      }
+
+      const tx = layout.translation?.x ?? 0
+      const ty = layout.translation?.y ?? 0
+      const rotate = layout.rotate ?? 0
+      const scale = layout.scale ?? 1
+
+      const transform = Ti.UI.createMatrix2D().translate(tx, ty).rotate(rotate).scale(scale)
+
+      const needsFadeIn = view.opacity === 0
+
+      if (layout.zIndex !== undefined) view.zIndex = layout.zIndex
+
+      const animation = Ti.UI.createAnimation({
+        ...args,
+        transform
+      })
+
+      if (needsFadeIn) animation.opacity = 1
+      if (layout.width !== undefined) animation.width = layout.width
+      if (layout.height !== undefined) animation.height = layout.height
+      if (layout.opacity !== undefined) animation.opacity = layout.opacity
+
+      view.animate(animation, () => {
+        const props = { transform, translation: { x: tx, y: ty }, rotate, scale, zIndex: layout.zIndex }
+        if (needsFadeIn) props.opacity = 1
+        view.applyProperties(props)
+      })
+    })
+  }
+
   function handleTransformations(args) {
     if ('anchorPoint' in args || 'rotate' in args || 'scale' in args) {
       logger('   -> Creating transform')
@@ -125,19 +421,113 @@ function Animation(args = {}) {
       let offsetX, offsetY
       setBounds(draggableView, args.bounds)
 
-      draggableView.addEventListener('touchstart', (event) => {
+      const onTouchStart = (event) => {
         offsetX = event.x
         offsetY = event.y
+        draggableView._wasDragged = false
+
+        // If a bounce-back animation is still running, complete it immediately
+        if (draggableView._bouncingBack) {
+          logger(`   -> completing pending bounce-back for ${draggableView.id}`)
+          draggableView.applyProperties({
+            top: draggableView._originTop,
+            left: draggableView._originLeft,
+            transform: Ti.UI.createMatrix2D()
+          })
+          draggableView._bouncingBack = false
+        }
 
         updateDraggableZIndex(event)
         checkDraggable(draggableView, 'drag')
-      })
 
-      draggableView.addEventListener('touchend', () => checkDraggable(draggableView, 'drop'))
+        if (draggableView._collisionEnabled) {
+          if (draggableView._originTop === undefined) {
+            draggableView._originTop = draggableView.top
+            draggableView._originLeft = draggableView.left
+            logger(`   -> touchStart origin capture (first): ${draggableView.id} top=${draggableView.top} left=${draggableView.left}`)
+          } else {
+            logger(`   -> touchStart origin kept: ${draggableView.id} origin=(${draggableView._originTop}, ${draggableView._originLeft}) vs top/left=(${draggableView.top}, ${draggableView.left})`)
+          }
+        }
+      }
 
-      draggableView.addEventListener('touchmove', (event) => handleTouchMove(event, draggableView, offsetX, offsetY))
+      const onTouchEnd = () => {
+        checkDraggable(draggableView, 'drop')
 
-      Ti.Gesture.addEventListener('orientationchange', () => checkBoundaries(draggableView))
+        // Android: consolidate transform after drag so transition reads correct state
+        if (!params.isIOS && draggableView.translation) {
+          const { translation, rotate, scale } = draggableView
+          draggableView.applyProperties({
+            translation, rotate, scale,
+            transform: Ti.UI.createMatrix2D().translate(translation.x, translation.y).rotate(rotate ?? 0).scale(scale ?? 1)
+          })
+        }
+
+        if (draggableView._collisionEnabled) {
+          const directTarget = checkCollision(draggableView)
+          const target = directTarget ?? params.lastKnownTarget
+          logger(`   -> collision check: ${draggableView.id} | direct: ${directTarget?.id ?? 'null'} | lastKnown: ${params.lastKnownTarget?.id ?? 'null'} | final: ${target?.id ?? 'null'}`)
+          if (target) {
+            // On Android, consolidate drag position before snap to avoid animation conflict
+            if (!params.isIOS) {
+              draggableView.applyProperties({
+                top: draggableView._visualTop ?? draggableView.top,
+                left: draggableView._visualLeft ?? draggableView.left
+              })
+            }
+            if (args.animationProperties?.snap?.center) {
+              logger(`   -> snap-center: ${draggableView.id} to ${target.id}`)
+              animationView.snapTo(draggableView, [target])
+            }
+            if (params.dropCB) {
+              logger(`   -> dropCB: ${draggableView.id} on ${target.id}`)
+              params.dropCB(draggableView, target)
+            }
+          } else if (!target && args.animationProperties?.snap?.back) {
+            logger(`   -> bounce-back: ${draggableView.id} to (${draggableView._originTop}, ${draggableView._originLeft})`)
+
+            // On Android, consolidate drag position before bounce-back to avoid animation conflict
+            if (!params.isIOS) {
+              draggableView.applyProperties({
+                top: draggableView._visualTop ?? draggableView.top,
+                left: draggableView._visualLeft ?? draggableView.left
+              })
+            }
+
+            draggableView._bouncingBack = true
+
+            draggableView.animate({
+              ...args,
+              top: draggableView._originTop,
+              left: draggableView._originLeft,
+              transform: Ti.UI.createMatrix2D()
+            }, () => {
+              draggableView._bouncingBack = false
+              draggableView.applyProperties({
+                top: draggableView._originTop,
+                left: draggableView._originLeft,
+                transform: Ti.UI.createMatrix2D()
+              })
+              logger(`   -> bounce-back complete: ${draggableView.id}`)
+            })
+          }
+          params.lastHoverTarget = null
+          params.lastKnownTarget = null
+          if (params.dragCB) {
+            params.dragCB(draggableView, null)
+          }
+        }
+      }
+
+      const onTouchMove = (event) => handleTouchMove(event, draggableView, offsetX, offsetY)
+      const onOrientationChange = () => checkBoundaries(draggableView)
+
+      draggableView._dragListeners = { onTouchStart, onTouchEnd, onTouchMove, onOrientationChange }
+
+      draggableView.addEventListener('touchend', onTouchEnd)
+      draggableView.addEventListener('touchmove', onTouchMove)
+      draggableView.addEventListener('touchstart', onTouchStart)
+      Ti.Gesture.addEventListener('orientationchange', onOrientationChange)
 
       params.draggables.push(draggableView)
     } else {
@@ -146,6 +536,7 @@ function Animation(args = {}) {
   }
 
   function handleTouchMove(event, draggableView, offsetX, offsetY) {
+    draggableView._wasDragged = true
     const convertedPoint = draggableView.convertPointToView({ x: event.x, y: event.y }, draggableView.parent)
     let top = Math.round(convertedPoint.y - offsetY)
     let left = Math.round(convertedPoint.x - offsetX)
@@ -167,11 +558,63 @@ function Animation(args = {}) {
       }
     }
 
+    draggableView._visualTop = top
+    draggableView._visualLeft = left
+
     if (params.isIOS) {
-      const { x, y } = calculateTranslation(draggableView, draggableView.parent.rect, left, top)
-      draggableView.applyProperties({ duration: 0, transform: Ti.UI.createMatrix2D().translate(x, y) })
+      const r = draggableView.rotate ?? 0
+      const s = draggableView.scale ?? 1
+
+      if (r !== 0 || s !== 1) {
+        // Delta-based drag for transformed views (preserves rotate/scale)
+        const translation = draggableView.translation ?? { x: 0, y: 0 }
+        const deltaX = Math.round((event.x - offsetX) * s)
+        const deltaY = Math.round((event.y - offsetY) * s)
+        translation.x += deltaX
+        translation.y += deltaY
+        draggableView.applyProperties({
+          translation, rotate: r, scale: s,
+          transform: Ti.UI.createMatrix2D().translate(translation.x, translation.y).rotate(r).scale(s)
+        })
+      } else {
+        // Standard drag for non-transformed views
+        const { x, y } = calculateTranslation(draggableView, draggableView.parent.rect, left, top)
+        draggableView.applyProperties({ duration: 0, transform: Ti.UI.createMatrix2D().translate(x, y) })
+      }
     } else {
-      draggableView.animate(Ti.UI.createAnimation({ top, left, duration: 0 }))
+      const r = draggableView.rotate ?? 0
+      const s = draggableView.scale ?? 1
+
+      if (r !== 0 || s !== 1) {
+        // Delta-based drag for transformed views on Android
+        const translation = draggableView.translation ?? { x: 0, y: 0 }
+        const deltaX = Math.round((event.x - offsetX) * s)
+        const deltaY = Math.round((event.y - offsetY) * s)
+        translation.x += deltaX
+        translation.y += deltaY
+        draggableView.animate(Ti.UI.createAnimation({
+          transform: Ti.UI.createMatrix2D().translate(translation.x, translation.y).rotate(r).scale(s),
+          duration: 0
+        }))
+        draggableView.translation = translation
+        draggableView.rotate = r
+        draggableView.scale = s
+      } else {
+        draggableView.animate(Ti.UI.createAnimation({ top, left, duration: 0 }))
+      }
+    }
+
+    if (draggableView._collisionEnabled && params.dragCB) {
+      try {
+        const target = checkCollision(draggableView)
+        if (target) { params.lastKnownTarget = target }
+        if (target !== params.lastHoverTarget) {
+          params.lastHoverTarget = target
+          params.dragCB(draggableView, target)
+        }
+      } catch (e) {
+        logger(`   !! collision error in touchmove: ${e.message}`)
+      }
     }
   }
 
@@ -179,15 +622,15 @@ function Animation(args = {}) {
     let x = left - parentViewRect.width / 2 + draggableView.rect.width / 2
     let y = top - parentViewRect.height / 2 + draggableView.rect.height / 2
 
-    if (draggableView.left) {
+    if (draggableView.left != null) {
       x = left - draggableView.left
-    } else if (draggableView.right) {
+    } else if (draggableView.right != null) {
       x = left - (parentViewRect.width - draggableView.right - draggableView.rect.width)
     }
 
-    if (draggableView.top) {
+    if (draggableView.top != null) {
       y = top - draggableView.top
-    } else if (draggableView.bottom) {
+    } else if (draggableView.bottom != null) {
       y = top - (parentViewRect.height - draggableView.bottom - draggableView.rect.height)
     }
 
@@ -207,8 +650,14 @@ function Animation(args = {}) {
   }
 
   function updateDraggableZIndex(event) {
-    params.draggables.push(params.draggables.splice(realSourceView(event.source).zIndex, 1)[0])
-    params.draggables.forEach((draggable, key) => { draggable.zIndex = key })
+    if (args.animationProperties?.keepZIndex) return
+
+    const source = realSourceView(event.source)
+    const idx = params.draggables.indexOf(source)
+    if (idx !== -1) {
+      params.draggables.push(params.draggables.splice(idx, 1)[0])
+      params.draggables.forEach((draggable, key) => { draggable.zIndex = key })
+    }
   }
 
   function realSourceView(_source) {
@@ -270,6 +719,26 @@ function Animation(args = {}) {
     })
   }
 
+  function checkCollision(draggableView) {
+    const top = draggableView._visualTop
+    const left = draggableView._visualLeft
+    if (left === null || left === undefined || top === null || top === undefined) {
+      return null
+    }
+
+    const cy = top + draggableView.rect.height / 2
+    const cx = left + draggableView.rect.width / 2
+
+    for (const other of params.collisionViews) {
+      if (other === draggableView) { continue }
+      const r = other.rect
+      if (cx > r.x && cx < r.x + r.width && cy > r.y && cy < r.y + r.height) {
+        return other
+      }
+    }
+    return null
+  }
+
   function checkDraggable(_view, _action) {
     logger('Check Draggable')
     logger('   -> `' + _action + '`')
@@ -300,18 +769,18 @@ function Animation(args = {}) {
         params.playing = false
         if (typeof _cb === 'function') {
           const enrichedEvent = {
-            // Solo propiedades seguras del event original
+            // Safe properties from the original event
             type: event.type,
             bubbles: event.bubbles,
             cancelBubble: event.cancelBubble,
-            // Nuestras propiedades añadidas (solo primitivos)
+            // Added properties (primitives only)
             action,                             // 'play'
             state: params.open ? 'open' : 'close',
             id: params.id,
-            targetId: view.id || 'unknown',     // Solo el ID del view, no el objeto
+            targetId: view.id || 'unknown',     // View ID only, not the object
             index,
             total,
-            // Método helper para obtener el view
+            // Helper method to get the view
             getTarget: () => view
           }
           _cb(enrichedEvent)
@@ -341,14 +810,14 @@ function Animation(args = {}) {
           type: 'applied',
           bubbles: false,
           cancelBubble: false,
-          // Nuestras propiedades (solo primitivos)
+          // Added properties (primitives only)
           action,                             // 'apply'
           state: params.open ? 'open' : 'close',
           id: params.id,
-          targetId: view.id || 'unknown',     // Solo el ID del view
+          targetId: view.id || 'unknown',     // View ID only, not the object
           index,
           total,
-          // Método helper para obtener el view
+          // Helper method to get the view
           getTarget: () => view
         }
         _cb(enrichedEvent)