 (defn fill! [] (.fill ctx))
 (defn stroke! [] (.stroke ctx))
 (defn circle! [x y r] (begin-path!) (arc! x y r 0 (* 2 PI) false))
+(defn move-to! [x y] (.moveTo ctx x y))
+(defn line-to! [x y] (.lineTo ctx x y))
+(defn stroke-line! [x0 y0 x1 y1] (begin-path!) (move-to! x0 y0) (line-to! x1 y1) (stroke!))
 (defn get-global-alpha [] (aget ctx "globalAlpha"))
 (defn set-global-alpha [x] (aset ctx "globalAlpha" x))
 (defn global-alpha! [x] (set-global-alpha (* x (get-global-alpha))))

  (draw-title! (:title @state))
  (draw-js-core! (:js-core @state))
  (draw-js-face! (:js-face @state))

  (restore!))


  (restore!)
  )

(defn draw-es-captions!
  [{:keys [es3 es5 es6 es7 es8]}]
  (save!)
  (doseq [[i es] (map-indexed vector [es3 es5 es6 es7 es8])]
    (when-not (zero? (:alpha es))
      (save!)
      (global-alpha! (:alpha es))
      (let [angle (/ PI 4)
            dx (cos angle)
            dy (sin angle)
            r (-> @state :js-face :r)
            dr (get-core-dr r)
            cr (- (get-core-radius i r) (/ dr 2))
            y (- (* dy cr))
            x0 (* dx cr)
            x1 250
            a 10
            at (/ a 3)]

        ;; highlight the layer
        (line-width! dr)
        (circle! 0 0 cr)
        (stroke-style! "#1EA")
        (stroke!)

        ;; point at layer
        (line-width! 5)
        (line-cap! "round")
        (stroke-line! x0 y x1 y)
        (stroke!)

        ;; draw caption
        (let [layer (get core-layers i)]
          (text-baseline! "middle")
          (text-align! "left")
          (fill-style! "#EEE")
          (font! "100 40px Roboto")
          (fill-text! (:name layer) (+ 10 x1) y)
          (fill-style! "#AAA")
          (font! "100 14px Roboto")
          (fill-text! (:desc layer) (+ 15 x1) (+ 30 y)))

        )
      (restore!)
      ))
  (restore!)
  )


;;--------------------------------------------------------------------------------
;; Drawing
