buttons.cljs

(defn tool-button [{:keys [tool text]}]
  (let [selected-tool (re-frame/subscribe [::subs/selected-tool])
        active? (= @selected-tool tool)]
    [re-com/button
     :label text
     :class (if active? "btn-outline-primary active" "btn-outline-primary")
     :on-click #(re-frame/dispatch [::events/set-tool tool])]))

(defn undo-button
  "Undo once"
  []
  (let [undos? (re-frame/subscribe [:undos?])]
    (fn []
      [re-com/button
       :class "btn-warning"
       :label "Undo"
       :disabled? (not @undos?)
       :on-click #(re-frame/dispatch [:undo])])))

(defn redo-button
  "Redo once"
  []
  (let [redos? (re-frame/subscribe [:redos?])]
    (fn []
      [re-com/button
       :class "btn-warning"
       :label "Redo"
       :disabled? (not @redos?)
       :on-click #(re-frame/dispatch [:redo])])))

(defn box [child]
  [re-com/box
   :align-self :center
   :child child])

(defn draw-buttons []
  [re-com/v-box
   :align :center
   :gap "1px"
   :children [[box [re-com/button
                    :class "btn-danger"
                    :label "Clear all!"
                    :on-click #(re-frame/dispatch [::events/clear-shapes])]]
              [box [undo-button]]
              [box [redo-button]]
              [box [:div "Tools"]]
              [box [tool-button {:tool :line :text "Line"}]]
              [box [tool-button {:tool :rectangle :text "Rectangle"}]]
              [box [tool-button {:tool :circle :text "Circle"}]]]])

(defn draw-panel []
  [re-com/h-box
   :gap "2px"
   :children [[re-com/box :size "none" :class "draw-buttons" :child [draw-buttons]]
              [re-com/box :child [canvas]]
              [re-com/box :child [:div "Hello world"]]]])
(defmethod routes/panels :draw [] [draw-panel])