penpot/frontend/src/uxbox/main/ui/shapes/selection.cljs

;; This Source Code Form is subject to the terms of the Mozilla Public
;; License, v. 2.0. If a copy of the MPL was not distributed with this
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
;;
;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>

(ns uxbox.main.ui.shapes.selection
  "Multiple selection handlers component."
  (:require [lentes.core :as l]
            [beicon.core :as rx]
            [uxbox.store :as st]
            [uxbox.util.mixins :as mx :include-macros true]
            [potok.core :as ptk]
            [uxbox.main.data.shapes :as uds]
            [uxbox.main.ui.workspace.base :as wb]
            [uxbox.util.rlocks :as rlocks]
            [uxbox.main.ui.shapes.common :as scommon]
            [uxbox.main.geom :as geom]
            [uxbox.util.geom.point :as gpt]
            [uxbox.util.dom :as dom]))

;; --- Refs & Constants

(def ^:private +circle-props+
  {:r 6
   :style {:fillOpacity "1"
           :strokeWidth "1px"
           :vectorEffect "non-scaling-stroke"}
   :fill "#31e6e0"
   :stroke "#28c4d4"})

(defn- focus-selected-shapes
  [state]
  (let [selected (get-in state [:workspace :selected])]
    (mapv #(get-in state [:shapes %]) selected)))

(def ^:private selected-shapes-ref
  (-> (l/lens focus-selected-shapes)
      (l/derive st/state)))

(def edition-ref scommon/edition-ref)

;; --- Resize Implementation

(defn- start-resize
  [vid sid]
  (letfn [(on-resize [[delta ctrl?]]
            (let [params {:vid vid :delta (assoc delta :lock ctrl?)}]
              (st/emit! (uds/update-vertex-position sid params))))
          (on-end []
            (rlocks/release! :shape/resize))]
    (let [stoper (->> wb/events-s
                      (rx/map first)
                      (rx/filter #(= % :mouse/up))
                      (rx/take 1))
          stream (->> wb/mouse-delta-s
                      (rx/take-until stoper)
                      (rx/with-latest-from vector wb/mouse-ctrl-s))]
      (rlocks/acquire! :shape/resize)
      (when @wb/alignment-ref
        (st/emit! (uds/initial-vertext-align sid vid)))
      (rx/subscribe stream on-resize nil on-end))))

;; --- Selection Handlers (Component)

(mx/defc multiple-selection-handlers
  [shapes]
  (let [{:keys [width height x y]} (geom/outer-rect-coll shapes)]
    [:g.controls
     [:rect.main {:x x :y y
                  :width width
                  :height height
                  :stroke-dasharray "5,5"
                  :style {:stroke "#333" :fill "transparent"
                          :stroke-opacity "1"}}]]))

(mx/defc single-not-editable-selection-handlers
  [{:keys [id] :as shape} zoom]
  (let [{:keys [width height x y]} (geom/outer-rect shape)]
    [:g.controls
     [:rect.main {:x x :y y
                  :width width
                  :height height
                  :stroke-dasharray (str (/ 5.0 zoom) "," (/ 5.0 zoom))
                  :style {:stroke "#333"
                          :fill "transparent"
                          :stroke-opacity "1"}}]]))

(mx/defc single-selection-handlers
  [{:keys [id] :as shape} zoom]
  (letfn [(on-mouse-down [vid event]
            (dom/stop-propagation event)
            (start-resize vid id))]
    (let [{:keys [x y width height]} (geom/outer-rect shape)]
      [:g.controls
       [:rect.main {:x x :y y
                    :width width
                    :height height
                    :stroke-dasharray (str (/ 5.0 zoom) "," (/ 5.0 zoom))
                    :style {:stroke "#333"
                            :fill "transparent"
                            :stroke-opacity "1"}}]
       [:circle.top
        (merge +circle-props+
               {:on-mouse-down #(on-mouse-down :top %)
                :r (/ 6.0 zoom)
                :cx (+ x (/ width 2))
                :cy (- y 2)})]
       [:circle.right
        (merge +circle-props+
               {:on-mouse-down #(on-mouse-down :right %)
                :r (/ 6.0 zoom)
                :cy (+ y (/ height 2))
                :cx (+ x width 1)})]
       [:circle.bottom
        (merge +circle-props+
               {:on-mouse-down #(on-mouse-down :bottom %)
                :r (/ 6.0 zoom)
                :cx (+ x (/ width 2))
                :cy (+ y height 2)})]
       [:circle.left
        (merge +circle-props+
               {:on-mouse-down #(on-mouse-down :left %)
                :r (/ 6.0 zoom)
                :cy (+ y (/ height 2))
                :cx (- x 3)})]
       [:circle.top-left
        (merge +circle-props+
               {:on-mouse-down #(on-mouse-down :top-left %)
                :r (/ 6.0 zoom)
                :cx x
                :cy y})]
       [:circle.top-right
        (merge +circle-props+
               {:on-mouse-down #(on-mouse-down :top-right %)
                :r (/ 6.0 zoom)
                :cx (+ x width)
                :cy y})]
       [:circle.bottom-left
        (merge +circle-props+
               {:on-mouse-down #(on-mouse-down :bottom-left %)
                :r (/ 6.0 zoom)
                :cx x
                :cy (+ y height)})]
       [:circle.bottom-right
        (merge +circle-props+
               {:on-mouse-down #(on-mouse-down :bottom-right %)
                :r (/ 6.0 zoom)
                :cx (+ x width)
                :cy (+ y height)})]])))

(defn start-path-edition
  [shape-id index]
  (letfn [(on-move [delta]
            (st/emit! (uds/update-path shape-id index delta)))
          (on-end []
            (rlocks/release! :shape/resize))]
    (let [stoper (->> wb/events-s
                      (rx/map first)
                      (rx/filter #(= % :mouse/up))
                      (rx/take 1))
          stream (rx/take-until stoper wb/mouse-delta-s)]
      (rlocks/acquire! :shape/resize)
      (when @wb/alignment-ref
        (st/emit! (uds/initial-path-point-align shape-id index)))
      (rx/subscribe stream on-move nil on-end))))

(mx/defc path-edition-selection-handlers
  [{:keys [id points] :as shape} zoom]
  (letfn [(on-mouse-down [index event]
            (dom/stop-propagation event)
            (rlocks/acquire! :shape/resize)
            (start-path-edition id index))]
    [:g.controls
     (for [[index {:keys [x y]}] (map-indexed vector points)]
       [:circle {:cx x :cy y
                 :r (/ 6.0 zoom)
                 :on-mouse-down (partial on-mouse-down index)
                 :fill "#31e6e0"
                 :stroke "#28c4d4"
                 :style {:cursor "pointer"}}])]))

(mx/defc selection-handlers
  {:mixins [mx/reactive mx/static]}
  []
  (let [shapes (mx/react selected-shapes-ref)
        edition (mx/react scommon/edition-ref)
        zoom (mx/react wb/zoom-ref)
        shapes-num (count shapes)
        shape (first shapes)]
    (cond
      (zero? shapes-num)
      nil

      (> shapes-num 1)
      (multiple-selection-handlers shapes zoom)

      :else
      (cond
        (= :path (:type shape))
        (if (= @edition-ref (:id shape))
          (path-edition-selection-handlers shape zoom)
          (single-not-editable-selection-handlers shape zoom))

        (= :text (:type shape))
        (if (= @edition-ref (:id shape))
          (single-not-editable-selection-handlers shape zoom)
          (single-selection-handlers (first shapes) zoom))

        (= :group (:type shape))
        (single-not-editable-selection-handlers shape zoom)

        :else
        (single-selection-handlers (first shapes) zoom)))))