Implement properly the multiselection handler.

This commit is contained in:
Andrey Antukh 2016-02-26 20:04:08 +02:00
parent 1a44b75790
commit e2af1a451b
3 changed files with 24 additions and 35 deletions

View file

@ -79,7 +79,7 @@
:on-mouse-down on-mouse-down :on-mouse-down on-mouse-down
:on-mouse-up on-mouse-up} :on-mouse-up on-mouse-up}
(uusc/render-shape shape #(uusc/shape %)) (uusc/render-shape shape #(uusc/shape %))
(when selected? (when (and selected? (= (count selected) 1))
(handlers shape))]))) (handlers shape))])))
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

View file

@ -56,7 +56,7 @@
(background) (background)
(grid 1) (grid 1)
[:svg.page-layout {} [:svg.page-layout {}
#_(shapes-selection shapes-selected) (shapes-selection)
[:g.main {} [:g.main {}
(for [item (:shapes page)] (for [item (:shapes page)]
(-> (uus/shape item) (-> (uus/shape item)

View file

@ -1,45 +1,34 @@
(ns uxbox.ui.workspace.canvas.selection (ns uxbox.ui.workspace.canvas.selection
(:require [sablono.core :as html :refer-macros [html]] (:require [sablono.core :as html :refer-macros [html]]
[rum.core :as rum] [rum.core :as rum]
[beicon.core :as rx]
[cats.labs.lens :as l] [cats.labs.lens :as l]
[uxbox.rstore :as rs] [uxbox.state :as ust]
[uxbox.state :as st] [uxbox.shapes :as ush]
[uxbox.shapes :as sh] [uxbox.util.lens :as ul]
[uxbox.ui.workspace.base :as wb] [uxbox.ui.workspace.base :as wb]
[uxbox.ui.mixins :as mx] [uxbox.ui.mixins :as mx]))
[uxbox.util.dom :as dom]))
(def ^:private selection-circle-style (def ^:const selected-shapes-l
{:fillOpacity "0.5" (letfn [(getter [state]
:strokeWidth "1px" (let [selected (get-in state [:workspace :selected])]
:vectorEffect "non-scaling-stroke"}) (mapv #(get-in state [:shapes-by-id %]) selected)))]
(as-> (ul/getter getter) $
(def ^:private default-selection-props (l/focus-atom $ ust/state))))
{:r 5 :style selection-circle-style
:fill "#333"
:stroke "#333"})
(defn shapes-selection-render (defn shapes-selection-render
[own shapes] [own]
(when (seq shapes) (let [shapes (rum/react selected-shapes-l)]
(let [{:keys [width height x y]} (sh/outer-rect shapes)] (when (> (count shapes) 1)
(let [{:keys [width height x y]} (ush/outer-rect shapes)]
(html (html
[:g.controls [:g.controls
[:rect {:x x :y y :width width :height height :stroke-dasharray "5,5" [:rect {:x x :y y :width width :height height
:stroke-dasharray "5,5"
:style {:stroke "#333" :fill "transparent" :style {:stroke "#333" :fill "transparent"
:stroke-opacity "1"}}] :stroke-opacity "1"}}]])))))
[:circle.top-left (merge default-selection-props
{:cx x :cy y})]
[:circle.top-right (merge default-selection-props
{:cx (+ x width) :cy y})]
[:circle.bottom-left (merge default-selection-props
{:cx x :cy (+ y height)})]
[:circle.bottom-right (merge default-selection-props
{:cx (+ x width) :cy (+ y height)})]]))))
(def ^:static shapes-selection (def ^:const shapes-selection
(mx/component (mx/component
{:render shapes-selection-render {:render shapes-selection-render
:name "shapes-selection" :name "shapes-selection"
:mixins [mx/static]})) :mixins [rum/reactive mx/static]}))