mirrors/clog
1
Fork 0
mirror of https://github.com/rabbibotton/clog.git synced 2025-12-06 10:40:45 -08:00
Code Issues Projects Releases Wiki Activity

improvements to windowing

Browse source
This commit is contained in:
David Botton 2021-02-07 23:53:43 -05:00
parent 30e50aadc0
commit a4a25c96a6
5 changed files with 54 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

10
clog-base.lisp
View file

@ -885,15 +885,16 @@ is nil unbind the event."))
;; set-on-mouse-down ;; ;; set-on-mouse-down ;;
;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;
(defgeneric set-on-mouse-down (clog-obj on-mouse-down-handler) (defgeneric set-on-mouse-down (clog-obj on-mouse-down-handler &key one-time)
(:documentation "Set the ON-MOUSE-DOWN-HANDLER for CLOG-OBJ. If (:documentation "Set the ON-MOUSE-DOWN-HANDLER for CLOG-OBJ. If
ON-MOUSE-DOWN-HANDLER is nil unbind the event.")) ON-MOUSE-DOWN-HANDLER is nil unbind the event."))
(defmethod set-on-mouse-down ((obj clog-obj) handler) (defmethod set-on-mouse-down ((obj clog-obj) handler &key (one-time nil))
(set-event obj "mousedown" (set-event obj "mousedown"
(when handler (when handler
(lambda (data) (lambda (data)
(funcall handler obj (parse-mouse-event data)))) (funcall handler obj (parse-mouse-event data))))
:one-time one-time
:call-back-script mouse-event-script)) :call-back-script mouse-event-script))
;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;
@ -991,12 +992,12 @@ is nil unbind the event."))
;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;
(defgeneric set-on-pointer-down (clog-obj on-pointer-down-handler (defgeneric set-on-pointer-down (clog-obj on-pointer-down-handler
&key capture-pointer) &key capture-pointer one-time)
(:documentation "Set the ON-POINTER-DOWN-HANDLER for CLOG-OBJ. If (:documentation "Set the ON-POINTER-DOWN-HANDLER for CLOG-OBJ. If
ON-POINTER-DOWN-HANDLER is nil unbind the event.")) ON-POINTER-DOWN-HANDLER is nil unbind the event."))
(defmethod set-on-pointer-down ((obj clog-obj) handler (defmethod set-on-pointer-down ((obj clog-obj) handler
&key (capture-pointer nil)) &key (capture-pointer nil) (one-time nil))
(set-event obj "pointerdown" (set-event obj "pointerdown"
(when handler (when handler
(lambda (data) (lambda (data)
@ -1005,6 +1006,7 @@ ON-POINTER-DOWN-HANDLER is nil unbind the event."))
(format nil "; ~A.setPointerCapture(e.pointerId)" (format nil "; ~A.setPointerCapture(e.pointerId)"
(script-id obj)) (script-id obj))
"") "")
:one-time one-time
:call-back-script pointer-event-script)) :call-back-script pointer-event-script))
;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;

10
clog-element.lisp
View file

@ -2095,6 +2095,16 @@ A list of standard cursor types can be found at:
(defmethod remove-from-dom ((obj clog-element)) (defmethod remove-from-dom ((obj clog-element))
(jquery-execute obj "remove()")) (jquery-execute obj "remove()"))
;;;;;;;;;;;;;;;;;;;;;;
;; remove-from-clog ;;
;;;;;;;;;;;;;;;;;;;;;;
(defgeneric remove-from-clog (clog-element)
(:documentation "Remove CLOG-Element from the clog cache on browser."))
(defmethod remove-from-clog ((obj clog-element))
(js-execute obj (format nil "~A=null;" (script-id obj))))
;;;;;;;;;;; ;;;;;;;;;;;
;; click ;; ;; click ;;
;;;;;;;;;;; ;;;;;;;;;;;

1
clog.lisp
View file

@ -310,6 +310,7 @@ embedded in a native template application.)"
(remove-class generic-function) (remove-class generic-function)
(toggle-class generic-function) (toggle-class generic-function)
(remove-from-dom generic-function) (remove-from-dom generic-function)
(remove-from-clog generic-function)
(click generic-function) (click generic-function)
"CLOG-Element - DOM Traversal Methods" "CLOG-Element - DOM Traversal Methods"

29
demos/03-demo.lisp
View file

@ -34,7 +34,6 @@
(drag-obj (attach-as-child obj id-drag)) (drag-obj (attach-as-child obj id-drag))
(pointer-x (getf data ':screen-x)) (pointer-x (getf data ':screen-x))
(pointer-y (getf data ':screen-y)) (pointer-y (getf data ':screen-y))
;; (z (parse-integer (z-index drag-obj) :junk-allowed t))
(obj-top) (obj-top)
(obj-left)) (obj-left))
(if (equalp (in-drag app) "m") (if (equalp (in-drag app) "m")
@ -54,15 +53,18 @@
(let* ((app (connection-data-item obj "app-data")) (let* ((app (connection-data-item obj "app-data"))
(drag-obj (attach-as-child obj (attribute obj "data-drag-obj"))) (drag-obj (attach-as-child obj (attribute obj "data-drag-obj")))
(x (getf data ':screen-x)) (x (getf data ':screen-x))
(y (getf data ':screen-y))) (y (getf data ':screen-y))
(adj-y (- y (drag-y app)))
(adj-x (- x (drag-x app))))
(when (and (> adj-x 0) (> adj-y 30))
(if (equalp (in-drag app) "m") (if (equalp (in-drag app) "m")
(progn (progn
(setf (top drag-obj) (format nil "~Apx" (- y (drag-y app)))) (setf (top drag-obj) (format nil "~Apx" adj-y))
(setf (left drag-obj) (format nil "~Apx" (- x (drag-x app))))) (setf (left drag-obj) (format nil "~Apx" adj-x)))
(progn (progn
(js-execute drag-obj (format nil "editor_~A.resize()" (html-id drag-obj))) (js-execute drag-obj (format nil "editor_~A.resize()" (html-id drag-obj)))
(setf (height drag-obj) (format nil "~Apx" (- y (drag-y app)))) (setf (height drag-obj) (format nil "~Apx" adj-y))
(setf (width drag-obj) (format nil "~Apx" (- x (drag-x app)))))))) (setf (width drag-obj) (format nil "~Apx" adj-x)))))))
(defun on-ide-drag-stop (obj data) (defun on-ide-drag-stop (obj data)
(let ((app (connection-data-item obj "app-data"))) (let ((app (connection-data-item obj "app-data")))
@ -77,7 +79,6 @@
(defmethod create-window ((obj clog-obj) title &key (defmethod create-window ((obj clog-obj) title &key
(html-id nil) (html-id nil)
(top-bar "")
(content "") (content "")
(left 60) (left 60)
(top 60) (top 60)
@ -98,16 +99,15 @@
style='flex-grow:9;user-select:none;cursor:move;'>~A</span> style='flex-grow:9;user-select:none;cursor:move;'>~A</span>
<span id='~A-close' <span id='~A-close'
style='cursor:pointer;user-select:none;'>X</span> style='cursor:pointer;user-select:none;'>X</span>
~A
</div> </div>
<div id='~A-body' class='w3-border-blue' style='flex-grow:9;'>~A</div> <div id='~A-body' style='flex-grow:9;'>~A</div>
<div id='~A-size' style='user-select:none;height:1px; <div id='~A-size' style='user-select:none;height:1px;
cursor:se-resize;opacity:0' cursor:se-resize;opacity:0'
class='w3-right' data-drag-obj='~A' data-drag-type='s'>+</div> class='w3-right' data-drag-obj='~A' data-drag-type='s'>+</div>
</div>" </div>"
top left width height (incf *last-z*) ; outer div top left width height (incf *last-z*) ; outer div
html-id html-id html-id ; title bar html-id html-id html-id ; title bar
title html-id top-bar ; title title html-id ; title
html-id content ; body html-id content ; body
html-id html-id) ; size html-id html-id) ; size
:html-id html-id)) :html-id html-id))
@ -139,11 +139,12 @@
(defun do-ide-help-about (obj) (defun do-ide-help-about (obj)
(let* ((app (connection-data-item obj "app-data")) (let* ((app (connection-data-item obj "app-data"))
(about (create-window (body app) "About" (about (create-window (body app) "About"
:top-bar "<center><img src='/demo/clogwicon.png'></center> :content "<div class='w3-black'>
<center><img src='/demo/clogwicon.png'></center>
<center>CLOG</center> <center>CLOG</center>
<center>The Common Lisp Omnificent GUI</center>" <center>The Common Lisp Omnificent GUI</center></div>
:content "<p><center>Demo 3</center> <div><p><center>Demo 3</center>
<center>(c) 2021 - David Botton</center></p>" <center>(c) 2021 - David Botton</center></p></div>"
:left (- (/ (width (body app)) 2) 100) :left (- (/ (width (body app)) 2) 100)
:width 200 :width 200
:height 200))))) :height 200)))))

18
static-files/demo/frame.html
View file

@ -14,23 +14,24 @@
</HEAD> </HEAD>
<BODY class="w3-teal"> <BODY class="w3-teal">
<div class="w3-bar w3-black w3-card-4"> <div id='ide-menu' class="w3-bar w3-black w3-card-4">
<button id='ide-logo' class="w3-button w3-bar-item"> <button id='ide-logo' class="w3-button w3-bar-item">
<img height=22 src="/demo/clogwicon.png"></button> <img height=22 src="/demo/clogwicon.png"></button>
<div class="w3-dropdown-hover"> <div class="w3-dropdown-hover">
<button class="w3-button">File</button> <button class="w3-button">File</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4"> <div class="w3-dropdown-content w3-bar-block w3-card-4">
<span id='ide-file-new' class="w3-bar-item w3-button">New</span> <span id='ide-file-new' class="w3-bar-item w3-button">New</span>
<span class="w3-bar-item w3-button">Open...</span> <span id='ide-file-open' class="w3-bar-item w3-button">Open...</span>
<span class="w3-bar-item w3-button">Save</span> <span id='ide-file-save' class="w3-bar-item w3-button">Save</span>
<span class="w3-bar-item w3-button">Save as...</span> <span id='ide-file-save-as' class="w3-bar-item w3-button">Save as...</span>
</div> </div>
</div> </div>
<div class="w3-dropdown-hover"> <div class="w3-dropdown-hover">
<button class="w3-button">Edit</button> <button class="w3-button">Edit</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4"> <div class="w3-dropdown-content w3-bar-block w3-card-4">
<span class="w3-bar-item w3-button">Copy</span> <span id="ide-edit-copy" class="w3-bar-item w3-button">Copy</span>
<span class="w3-bar-item w3-button">Paste</span> <span id="ide-edit-cut" class="w3-bar-item w3-button">Cut</span>
<span id="ide-edit-paste" class="w3-bar-item w3-button">Paste</span>
</div> </div>
</div> </div>
<div class="w3-dropdown-hover"> <div class="w3-dropdown-hover">
@ -39,7 +40,10 @@
<span id="ide-help-about" class="w3-bar-item w3-button">About CLOG Demo 3</span> <span id="ide-help-about" class="w3-bar-item w3-button">About CLOG Demo 3</span>
</div> </div>
</div> </div>
<span class="w3-bar-item w3-right" onClick="documentElement.requestFullscreen()">⤢</span> <span class="w3-bar-item w3-right" style='user-select:none;'
onClick="if (document.fullscreenElement==null) {
documentElement.requestFullscreen()
} else {document.exitFullscreen();}">⤢</span>
</div> </div>
</BODY> </BODY>