|
7 | 7 | [reagent.core :as reagent]
|
8 | 8 | [reagent.dom.server :as server]
|
9 | 9 | [renderer.app.subs :as-alias app.subs]
|
10 |
| - [renderer.document.subs :as-alias document.subs] |
11 | 10 | [renderer.element.hierarchy :as element.hierarchy]
|
12 | 11 | [renderer.element.subs :as-alias element.subs]
|
13 | 12 | [renderer.element.views :as element.views]
|
|
17 | 16 | [renderer.utils.pointer :as utils.pointer]
|
18 | 17 | [renderer.utils.wheel :as utils.wheel]))
|
19 | 18 |
|
| 19 | +(defn wheel-handler! |
| 20 | + [^js/WheelEvent e] |
| 21 | + (.stopPropagation e) |
| 22 | + (when (.-ctrlKey e) (.preventDefault e)) ; Disable wheel zoom on canvas. |
| 23 | + (rf/dispatch-sync [::tool.events/wheel-event (utils.wheel/event-formatter e)])) |
| 24 | + |
20 | 25 | (defn inner-component
|
21 | 26 | "We need access to the iframe's window to add the pointer move listener.
|
22 | 27 | This is required in order to track pointer movement outside of our canvas.
|
23 | 28 | https://github.com/ryanseddon/react-frame-component#accessing-the-iframes-window-and-document
|
24 | 29 | https://github.com/reagent-project/reagent/blob/master/doc/ReactFeatures.md#function-components"
|
25 | 30 | []
|
26 |
| - (let [frame-window (.-window (useFrame)) |
27 |
| - wheel-handler (fn [e] |
28 |
| - (.stopPropagation e) |
29 |
| - ;; Disable wheel zoom on canvas. |
30 |
| - (when (.-ctrlKey e) (.preventDefault e)) |
31 |
| - (rf/dispatch-sync [::tool.events/wheel-event (utils.wheel/event-formatter e)]))] |
| 31 | + (let [frame-window (.-window (useFrame))] |
32 | 32 | (reagent/create-class
|
33 | 33 | {:component-did-mount
|
34 | 34 | (fn []
|
35 |
| - (doseq |
36 |
| - [event ["pointermove" "pointerup"]] |
| 35 | + (doseq [event ["pointermove" "pointerup"]] |
37 | 36 | (.addEventListener frame-window event utils.pointer/event-handler!))
|
38 |
| - (.addEventListener frame-window "wheel" wheel-handler #js {:passive false})) |
| 37 | + (.addEventListener frame-window "wheel" wheel-handler! #js {:passive false})) |
39 | 38 |
|
40 | 39 | :component-will-unmount
|
41 | 40 | (fn []
|
42 |
| - (doseq |
43 |
| - [event ["pointermove" "pointerup"]] |
| 41 | + (doseq [event ["pointermove" "pointerup"]] |
44 | 42 | (.removeEventListener frame-window event utils.pointer/event-handler!))
|
45 |
| - (.removeEventListener frame-window "wheel" wheel-handler)) |
| 43 | + (.removeEventListener frame-window "wheel" wheel-handler!)) |
46 | 44 |
|
47 | 45 | :reagent-render #()})))
|
48 | 46 |
|
49 |
| -(defn markup |
50 |
| - "https://github.com/ryanseddon/react-frame-component#initialcontent" |
51 |
| - [] |
| 47 | +(defonce initial-markup |
| 48 | + ;; https://github.com/ryanseddon/react-frame-component#initialcontent |
52 | 49 | [:html
|
53 | 50 | [:head]
|
54 | 51 | [:body {:style {:width "100%"
|
|
94 | 91 | (js/KeyboardEvent. (.-type e)
|
95 | 92 | e)))]
|
96 | 93 | [:> Frame
|
97 |
| - {:initial-content (server/render-to-static-markup [markup]) |
| 94 | + {:initial-content (server/render-to-static-markup initial-markup) |
98 | 95 | :mount-target "body"
|
99 | 96 | :class "overflow-hidden flex-1 border-0"
|
100 | 97 | :on-key-down on-keyboard-event
|
|
0 commit comments