om_compose_canvas.cljs

(defmulti render :type)

(defn render-off-screen [f w h]
  (let [canvas (doto (.createElement js/document "canvas")
                 (aset "width" w) (aset "height" h))
        ctx (.getContext canvas "2d")]
    (f ctx)
    canvas))

(defn clear-canvas [canvas]
  (doto (.getContext canvas "2d")
    (.clearRect 0 0 (.-width canvas) (.-height canvas))))

(defn surface [data owner]
  (reify
    om/IDisplayName
    (display-name [_] "Surface")
    om/IWillUpdate
    (will-update [_ _ _] (.log js/console "updating canvas") (clear-canvas (om/get-node owner)))
    om/IRender
    (render [_]
      (apply dom/canvas #js {:width 300 :height 300} (map #(render (assoc % :surface owner)) data)))))

(defn render-to-cache [owner render-fn w h]
  (om/set-state! owner :rendered (render-off-screen render-fn w h)))

(defn render-cached [owner]
  (let [ctx (-> (om/get-props owner :surface) (om/get-node) (.getContext "2d"))]
    (.drawImage ctx (om/get-state owner :rendered) 0 0)))

(defn surface-square [{:keys [width height x y] :as data} owner]
  (let [render (fn [ctx] (.fillRect ctx x y width height))]
    (reify
      om/IShouldUpdate (should-update [_ _ _] true)
      om/IDisplayName (display-name [_] "Square")
      om/IDidMount
      (did-mount [_]
        (render-to-cache owner render width height)
        (render-cached owner))
      om/IDidUpdate
      (did-update [_ props _]
        (if (not= props data) (render-to-cache owner render width height))
        (render-cached owner))
      om/IRender
      (render [_] nil))))

(defmethod render :square [d] (om/build surface-square d))

(om/build surface
  [{:type :square :x 10 :y 10 :width 20 :height 20}])