Drag and Drop - Lexical scope for SET-ON-DROP question

[aykaramba]

Rabbi Botton:

QUESTION: The form (set-on-drop) does not seem to follow lexical binding. Instead, it is always bound to the last object that (set-on-drop) refers to.

1. I have created the simplest possible todo widget to demonstrate the (set-on-drop) behaviour here: https://github.com/aykaramba/todo-04

2. Each object has its "draggablep" property set correctly.

3. Each object has a (set-on-click) lexicaly bound and the (place-inside-bottom-of target item-***) works properly.

4. ONLY the (set-on-drop) form seems to either ignore the lexical binding or the form behaviour is something other than what I am expecting.

5. Here is a video of the (set-on-click) form properly doing (place-inside-bottom-of) form behaviour, whereas the (set-on-drop) form is only doing (place-inside-bottom-of) form behaviour on the last object it was bound to:

simplescreenrecorder-2023-08-06_18.27.46.mp4

Thoughts?

Code: https://github.com/aykaramba/todo-04/blob/main/todo-04.lisp

[cerk]

First of all, I don't do a lot of web programming so my terminology is probably incorrect.

That being said, I believe what is happening is that when you call:

      (set-on-drop target...)

four times (one for each item-drop-0n), you are actually adding four handlers to target. Then when an item is dropped onto target, it calls all four of these handlers. You can verify this by replacing your

      (set-on-drop target...)

forms with something like:

      (set-on-drop target 
                   (lambda (obj data)
                     (declare (ignore obj))
		     (print (getf data :drag-data))
		     (force-output)
                     (place-inside-bottom-of target item-drop-0n)  ; where n = 1..4
                     ))

Also, replace

      (set-on-drag-start item-drop-0n (lambda (obj)(declare (ignore obj))()) :drag-data "some data")  ; where n = 1..4

with

      (set-on-drag-start item-drop-0n (lambda (obj)(declare (ignore obj))()) :drag-data "n")  ; where n = 1..4

Now when you drop an item on target, you'll see that four messages get dumped and they all print out the same number (the number of the item you dragged). For example, if you drop "object 01" onto the target, you should see:

"1"
"1"
"1"
"1"

This implies that all four target handlers are being called with the same item that you dropped onto it. However, each target handler also calls place-inside-bottom-of with item-drop-0n (for n = 1..4). These handlers get called in order so item-drop-01 gets placed first inside target. Then item-drop-02 replaces item-drop-01 in target. Then item-drop-03 replaces item-drop-02 in target. And finally item-drop-04 replaces item-drop-03 in target. So every time you drop an item, you see item-drop-04 in target.

To fix this, I deleted all the

      (set-on-drop target...)

sections of code. Then I added one target handler like this:

      (set-on-drop target 
                   (lambda (obj data)
                     (declare (ignore obj))
		     (print (getf data :drag-data))
		     (force-output)
		     (cond ((string= (getf data :drag-data) "1")
			    (place-inside-bottom-of target item-drop-01))
			   ((string= (getf data :drag-data) "2")
			    (place-inside-bottom-of target item-drop-02))
			   ((string= (getf data :drag-data) "3")
			    (place-inside-bottom-of target item-drop-03))
			   ((string= (getf data :drag-data) "4")
			    (place-inside-bottom-of target item-drop-04))
			   (t ()))
		     ))

Lots of code duplication in that handler but it worked for me.

[aykaramba]

Hi!

Oh wow. Thank you very kindly for spending time on my nonsense question. This has helped me tremendously.

Details:

1. Okay, I see my mistake and where my conceptualization of what is actually going was inaccurate. The duplication of of (set-on-drop) is a bit of a head slapper, yes of course that makes sense now.

Learning about (let) vs (let*), lexical scope, bindings and so forth have been fun puzzles. I am still reading forms wrong and make assumptions based on that reading. This illustration really helps with that.

2. Thank you kindly for the insights on how to troubleshoot. Particularly with respect to (print) and (force-output). I just learned that CL also has (finish-output) and (clear-output) so that expands my toolkit.

3. I should have thought about using condition checking functions, that is an obvious miss as well.

4. Your thorough write up was tremendous. I really appreciate that and I hope this helps other noobs as well.

Lisp is fun and CLOG is just the kind of hook that I needed to get me really interested in pushing and learning.

Appreciate the amazing help.

[aykaramba]

I created a version of the app with 3 drag targets. I suspect I will be able to compress the code once I learn about object orientation, for now this is just to demonstrate basic CLOG drag/drop functionality.

Video of functionality:

demo-2023-08-17_03.56.08.mp4

Note: The repo with the sample code is deleted. For anyone looking for an example of working code it is pasted here.

Code for the demo in the video:

(defpackage #:todo-04
  (:use #:cl #:clog #:clog-gui)
  (:export start-app))

(in-package :todo-04)

(defclass app-data ()
  ((data
    :accessor data)))

(defun on-new-window (body)
  
  (let* (
         (app (make-instance 'app-data))
         ;; containers
         (container-main (create-div body :content "" :class "w3-container w3-red w3-margin"))
         (container-target-01 (create-div container-main :class "w3-yellow w3-padding w3-third w3-center w3-margin-top w3-margin-bottom"))
         (container-target-02 (create-div container-main :class "w3-yellow w3-padding w3-third w3-center w3-margin-top w3-margin-bottom w3-leftbar w3-rightbar w3-border-red"))
         (container-target-03 (create-div container-main :class "w3-yellow w3-padding w3-third w3-center w3-margin-top w3-margin-bottom"))
         ;; draggable objects
         (object01 (create-div body :content "draggable - object 01" :class "w3-light-blue  w3-quarter w3-padding"))
         (object02 (create-div body :content "draggable - object 02" :class "w3-light-gray  w3-quarter w3-padding"))
         (object03 (create-div body :content "draggable - object 03" :class "w3-light-green  w3-quarter w3-padding"))
         (object04 (create-div body :content "draggable - object 04" :class "w3-pale-yellow  w3-quarter w3-padding"))
         )

    ;;-------------------
    ;; *
    ;;--
    (setf (connection-data-item body "app-data") app)
    (setf (title (html-document body)) "Todo 03")
    (clog-gui-initialize body)
    (add-class body "w3-teal")
    (setf (height container-target-01) 250)
    (setf (height container-target-02) 250)
    (setf (height container-target-03) 250)
    (create-div container-target-01 :content "<b>~-- TARGET 01 --~</b>" )
    (create-div container-target-02 :content "<b>~-- TARGET 02 --~</b>" )
    (create-div container-target-03 :content "<b>~-- TARGET 03 --~</b>" )

    (let* (
          (item-drop-01 object01)
          (item-drop-02 object02)
          (item-drop-03 object03)
          (item-drop-04 object04)
          (target-01 container-target-01)
          (target-02 container-target-02)
          (target-03 container-target-03)
          )

      ;; -------------------
      ;; item-drop-01
      ;; --
      (setf (draggablep item-drop-01)  t )
      (set-on-drag-start item-drop-01 (lambda (obj)(declare (ignore obj))()) :drag-data "1")
       
      ;; -------------------
      ;; item-drop-02
      ;; --
      (setf (draggablep item-drop-02)  t )
      (set-on-drag-start item-drop-02 (lambda (obj)(declare (ignore obj))()) :drag-data "2")
      
      ;; -------------------
      ;; item-drop-03
      ;; --
      (setf (draggablep item-drop-03)  t )
      (set-on-drag-start item-drop-03 (lambda (obj)(declare (ignore obj))()) :drag-data "3")
      
      ;; -------------------
      ;; item-drop-04
      ;; --
      (setf (draggablep item-drop-04)  t )
      (set-on-drag-start item-drop-04 (lambda (obj)(declare (ignore obj))()) :drag-data "4")

      ;; -------------------
      ;; set target for all
      ;; --
      (set-on-drag-over target-01 (lambda (obj)(declare (ignore obj))()))
      (set-on-drag-over target-02 (lambda (obj)(declare (ignore obj))()))
      (set-on-drag-over target-03 (lambda (obj)(declare (ignore obj))()))

      ;; -------------------
      ;; drop for target-01
      ;; --
      (set-on-drop target-01 
                   (lambda (obj data)
                     (declare (ignore obj))
                     (print (getf data :drag-data))
                     (force-output)
                     (cond 
                       ((string= (getf data :drag-data) "1")
                        (place-inside-bottom-of target-01 item-drop-01)
                        (setf (css-class-name item-drop-01) "w3-pink w3-margin"))
                       ((string= (getf data :drag-data) "2")
                        (place-inside-bottom-of target-01 item-drop-02)
                        (setf (css-class-name item-drop-02) "w3-pink w3-margin"))
                       ((string= (getf data :drag-data) "3")
                        (place-inside-bottom-of target-01 item-drop-03)
                        (setf (css-class-name item-drop-03) "w3-pink w3-margin"))
                       ((string= (getf data :drag-data) "4")
                        (place-inside-bottom-of target-01 item-drop-04)
                        (setf (css-class-name item-drop-04) "w3-pink w3-margin"))
                       (t ()))
                     ))

      ;; -------------------
      ;; drop for target-02
      ;; --
      (set-on-drop target-02 
                   (lambda (obj data)
                     (declare (ignore obj))
                     (print (getf data :drag-data))
                     (force-output)
                     (cond 
                       ((string= (getf data :drag-data) "1")
                        (place-inside-bottom-of target-02 item-drop-01)
                        (setf (css-class-name item-drop-01) "w3-deep-orange w3-margin"))
                       ((string= (getf data :drag-data) "2")
                        (place-inside-bottom-of target-02 item-drop-02)
                        (setf (css-class-name item-drop-02) "w3-deep-orange w3-margin"))
                       ((string= (getf data :drag-data) "3")
                        (place-inside-bottom-of target-02 item-drop-03)
                        (setf (css-class-name item-drop-03) "w3-deep-orange w3-margin"))
                       ((string= (getf data :drag-data) "4")
                        (place-inside-bottom-of target-02 item-drop-04)
                        (setf (css-class-name item-drop-04) "w3-deep-orange w3-margin"))
                       (t ()))
                     ))

      ;; -------------------
      ;; drop for target-03
      ;; --
      (set-on-drop target-03 
                   (lambda (obj data)
                     (declare (ignore obj))
                     (print (getf data :drag-data))
                     (force-output)
                     (cond 
                       ((string= (getf data :drag-data) "1")
                        (place-inside-bottom-of target-03 item-drop-01)
                        (setf (css-class-name item-drop-01) "w3-blue-gray w3-margin"))
                       ((string= (getf data :drag-data) "2")
                        (place-inside-bottom-of target-03 item-drop-02)
                        (setf (css-class-name item-drop-02) "w3-blue-gray w3-margin"))
                       ((string= (getf data :drag-data) "3")
                        (place-inside-bottom-of target-03 item-drop-03)
                        (setf (css-class-name item-drop-03) "w3-blue-gray w3-margin"))
                       ((string= (getf data :drag-data) "4")
                        (place-inside-bottom-of target-03 item-drop-04)
                        (setf (css-class-name item-drop-04) "w3-blue-gray w3-margin"))
                       (t ()))
                     ))
      )))

;; -------------------
;; start app
;; --
(defun start-app ()
  (initialize 'on-new-window
              :static-root (merge-pathnames "./www/"
                                            (asdf:system-source-directory :todo-04)))
  (open-browser))