diff --git a/examples/drag-and-drop/drag-and-drop-1.rkt b/examples/drag-and-drop/drag-and-drop-1.rkt index 5fd6f0a..12a3e13 100644 --- a/examples/drag-and-drop/drag-and-drop-1.rkt +++ b/examples/drag-and-drop/drag-and-drop-1.rkt @@ -1,6 +1,10 @@ #lang planet dyoo/whalesong -(require (planet dyoo/whalesong/web-world)) +(require (planet dyoo/whalesong/web-world) + (planet dyoo/whalesong/resource)) + +(define-resource view.html) +(define-resource style.css) ;; A small drag-and-drop example using the web-world library. ;; @@ -12,3 +16,47 @@ (define-struct box (id x y)) + +;; add-fresh-box: world view -> world +;; Given a world, creates a new world within the boundaries of the playground. +(define (add-fresh-box w v) + (define-values (max-width max-height) (width-and-height "playground")) + (define new-world (cons (make-box (fresh-id) + (random max-width) + (random max-height)) + w)) + new-world) + + + +;; FIXME: do some javascript stuff here to get at this. +;; +(define (width-and-height element-id) + (values 500 500)) + + +(define (draw w v) + (foldl (lambda (a-box v) + (cond + [(view-focus? v (box-id a-box)) + v] + [else + (view-append-child v + (xexp->dom `(span (@ (class "box") + (id ,(box-id a-box)) + (style ,(format "position: relative; left: ~apx; top: ~apx" + (box-x a-box) + (box-y a-box)))) + "I am a box")))])) + (view-focus v "playground") + w)) + +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + +(define the-view (view-bind-many view.html + ["add" "click" add-fresh-box])) + +(big-bang (list) + (initial-view the-view) + (to-draw draw)) + \ No newline at end of file diff --git a/examples/drag-and-drop/style.css b/examples/drag-and-drop/style.css index fceb373..178ea33 100644 --- a/examples/drag-and-drop/style.css +++ b/examples/drag-and-drop/style.css @@ -1,17 +1,15 @@ -html { - width: 100%; - height: 100%; -} - -body { - width: 100%; - height: 100%; -} #playground { background-color: lightgray; border: 1px solid black; - width: 70%; - height: 70%; + width: 500px; + height: 500px; display: block; +} + + +.box { + position: relative; + background-color: orange; + border: 1px solid black; } \ No newline at end of file diff --git a/examples/drag-and-drop/view.html b/examples/drag-and-drop/view.html index 2771d5f..50e4714 100644 --- a/examples/drag-and-drop/view.html +++ b/examples/drag-and-drop/view.html @@ -10,7 +10,7 @@ This is the playground. - + diff --git a/web-world/js-impl.js b/web-world/js-impl.js index 28519bf..64f5178 100644 --- a/web-world/js-impl.js +++ b/web-world/js-impl.js @@ -543,7 +543,7 @@ }, function(eventHandlers) { return eventHandlers; }, function(view) { - var clone = deepClone(domNode); + var clone = $(deepClone(domNode)); clone.appendTo($(view.focus)); view.focus = clone.get(0); } @@ -557,7 +557,7 @@ }, function(eventHandlers) { return eventHandlers; }, function(view) { - var clone = deepClone(domNode); + var clone = $(deepClone(domNode)); clone.insertAfter($(view.focus)); view.focus = clone.get(0); } @@ -571,7 +571,7 @@ }, function(eventHandlers) { return eventHandlers; }, function(view) { - var clone = deepClone(domNode); + var clone = $(deepClone(domNode)); clone.insertBefore($(view.focus)); view.focus = clone.get(0); }