rnd.cljs

(h/load-jspm-native-modules ["react-rnd"])

(def data 
  (r/atom {:notes [ {:id 1 :content [:div 
                                     [:video {:controls true :auto-play false} 
                                      [:source {:type "video/mp4"
                                                :src "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"}]
                                      "Your browser does not support the video tag."]
                                     ]}
            {:id 2 :content [:div.bg-red-500 "z-index ordering is up to the developer add your z-index by sorting (data :notes)"]}]
   :layout {1 {:x 300 :y 300 :width 300 :height 300}
            2 {:x 100 :y 100 :width 300 :height 200}}}))

(defn sort-notes
  [data note]
  (let [n (filter #( not= note %)(:notes @data))]
    (swap! data assoc :notes (conj n note))))

(defn add-note  
  [data text] 
  (let [{:keys [notes layout]} @data
        id (inc (count notes))]
    (swap! data (fn [d]
                   (-> d
      (update-in [:notes] conj {:id id :content [:div (reader/read-string text)]})
      (assoc-in [:layout id] {:x 10 :y 10 :width 300 :height 300})
      ))))) 

(defn view
  []
  (let [new-node-data (atom "")
        capture-new-node-data #(reset! new-node-data (-> % .-target .-value))]
    (fn []
     [:div.relative
      [ant/input {:placeholder "Add text or hiccup."
                  :on-change capture-new-node-data}]
      [ant/button {:on-click #(add-note data @new-node-data)} "add note"]
       [:div.bg-gray-100
       {:style {:width 1200 :height 700}}
       (keep-indexed
        (fn 
          [idx {:keys [content id] :as note}]
         [:> js/reactRnd.Rnd
        {:class-name "bg-gray-200 border overflow-hidden container hover:shadow-lg hover:bg-gray-300"
         :bounds     "parent"
         :z? idx
         :default    (get-in @data [:layout id] )
         :on-drag (fn [e] #_(js/console.log id " -- " e ))
         :on-drag-start (fn [e] 
                          (js/console.log note)
                          (js/console.log (sort-notes data note))
                          )}
        [:div
         [:div.h-5.bg-gray-300.text-right.pr-1.handle "----" ]
         [:div.p-5
         [:div.flex.flex-col  content]]]])
         (@data :notes))
        ]]))) 

[:div 
 [:div.p-2.bg-red-100 
  [:a.underline {:href   "https://github.com/bokuweb/react-rnd"
              :target "_blank"} "react-rnd"]
         [:div "note this lib seems to conflict with prosemirror's focus. Prosemirror seems to lose focus when this is added here."]]
 [view]
 [:div.p-4 
  
  ]]

here