Skip to content

Instantly share code, notes, and snippets.

@vitalipe

vitalipe/demo.cljs

Last active June 4, 2020 19:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save vitalipe/c78b5bf7838a4cb199fdc8c34ead649d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save vitalipe/c78b5bf7838a4cb199fdc8c34ead649d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
demo.cljs
;; this macro will send paint instructions to hudini paint worklet and will setup
;; custom css keys so that we can pass params (color in this example)
(defpaint color-circle [{:keys [color]} {:keys [width height ctx]}]
(doto ctx ;; <-- need to make a nicer paint API, for now it's almost 1:1 with the js api
(.arc (/ width 2) (/ height 2))
(.fillColor color)
(.fill)))
(defw counter [{:keys [dummpy-link]}]
:state [count 0] ;; <-- internal state
(mouse-sensor ;; events, behaviour, content, and layout are un-complected,
;; you can wrap any component in a event sensor without passing callbacks
:click #(swap! count inc)
(row
(text count)
(padding :top 10
:bottom 20
(link :to dummy-link
(image :src "...."))))))
(defw composite-comp [_ {{:keys [main-font]} :theme}]
(grid :areas ["100px" "1fr"
[:menu :counters] "200px"
[:menu :counters] "1fr"
[:footer :footer] "20px"]
:menu (padding 10
(menu-component))
:counters (column :place [:center :center]
;; adding mouse events for custom component, without wrapper divs or new props
(mouse-sensor :hover #(js/console.log (if % "mouse-in" "mouse-out"))
(counter :dummpy-link "/a"))
(counter :dummpy-link "/b")
(counter :dummpy-link "/c"))
:footer (box ;; <-- box is almost like container in flutter
:background (color-circle :color "red") ;; <- this is a custom hudini painter
:padding [10 0 0 10]
(text :font main-font
:color "red"
"..... footer...."))))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment