Enhance (Whiteboards): UX (#8797)

- Improve zooming performance (try zooming using the scrollbar or the trackpad on a portal heavy board)
- Auto remove arrows when we delete connected shapes (see video)
- Create new portals when we Alt+Click on refs in portal elements
- Enable development toolbar within Logseq
- Clear brush (select) area on exit to avoid the leftover when we double click and drag at the same time (see image below)
---------

Co-authored-by: Tienson Qin <tiensonqin@gmail.com>

src/main/frontend/components/block.cljs

@@ -511,6 +511,11 @@
          (:db/id page-entity)
          :page))
 
+      (and (util/meta-key? e) (whiteboard-handler/inside-portal? (.-target e)))
+      (whiteboard-handler/add-new-block-portal-shape!
+       page-name
+       (whiteboard-handler/closest-shape (.-target e)))
+
       whiteboard-page?
       (route-handler/redirect-to-whiteboard! page-name)
 
@@ -884,7 +889,7 @@
                      (:db/id block)
                      :block-ref)
 
-                    (whiteboard-handler/inside-portal? (.-target e))
+                    (and (util/meta-key? e) (whiteboard-handler/inside-portal? (.-target e)))
                     (whiteboard-handler/add-new-block-portal-shape!
                      (:block/uuid block)
                      (whiteboard-handler/closest-shape (.-target e)))
@@ -2151,7 +2156,10 @@
           button (gobj/get e "buttons")
           shift? (gobj/get e "shiftKey")
           meta? (util/meta-key? e)]
-      (if (and meta? (not (state/get-edit-input-id)))
+      (if (and meta?
+               (not (state/get-edit-input-id))
+               (not (dom/has-class? target "page-ref"))
+               (not= "A" (gobj/get target "tagName")))
         (do
           (util/stop e)
           (state/conj-selection-block! (gdom/getElement block-id) :down)