refactoring update logics; fix performance issue in diffing; alpha re…

…lease

README.md

@@ -11,7 +11,7 @@ Previews http://repo.quamolit.org/phlox/ .
 [![Clojars Project](https://img.shields.io/clojars/v/quamolit/phlox.svg)](https://clojars.org/quamolit/phlox)
 
 ```edn
-[quamolit/phlox "0.1.3-a3"]
+[quamolit/phlox "0.1.3-a4"]
 ```
 
 `render!` to add canvas to `<body/>`:

pom.xml

@@ -3,7 +3,7 @@
   <modelVersion>4.0.0</modelVersion>
   <groupId>quamolit</groupId>
   <artifactId>phlox</artifactId>
-  <version>0.1.3-a3</version>
+  <version>0.1.3-a4</version>
   <name>phlox</name>
 
   <url>https://github.com/Quamolit/phlox</url>

src/phlox/app/container.cljs

@@ -96,20 +96,15 @@
    :container
    {:position [200 20]}
    (->> (range 40)
-        (mapcat (fn [x] (->> (range 20) (map (fn [y] [x y])))))
+        (mapcat (fn [x] (->> (range 30) (map (fn [y] [x y])))))
         (map
          (fn [[x y]]
            [(str x "+" y)
             (rect
              {:position [(* x 14) (* y 14)],
               :size [10 10],
               :fill (hslx 200 80 80),
-              :on {:mouseover (fn [e d!] (println "hover:" x y))}})]))))
-  (rect
-   {:position [300 320],
-    :size [40 30],
-    :fill (hslx 40 80 80),
-    :on {:pointerdown (fn [e d!] (println "corsur"))}})))
+              :on {:mouseover (fn [e d!] (println "hover:" x y))}})]))))))
 
 (defcomp
  comp-tab-entry
@@ -139,7 +134,7 @@
 (defcomp
  comp-container
  (store)
- (println "Store" store (:tab store))
+ (comment println "Store" store (:tab store))
  (container
   {}
   (comp-tabs (:tab store))

src/phlox/check.cljs

@@ -20,7 +20,8 @@
 
 (def in-dev? (do ^boolean js/goog.DEBUG))
 
-(def lilac-line-style (record+ {:width (number+), :color (number+), :alpha (number+)}))
+(def lilac-line-style
+  (record+ {:width (number+), :color (number+), :alpha (optional+ (number+))}))
 
 (def lilac-point (tuple+ [(number+) (number+)]))
 

src/phlox/render.cljs

@@ -13,15 +13,15 @@
             [phlox.render.draw
              :refer
              [call-graphics-ops
-              set-position
-              set-pivot
-              set-rotation
-              set-alpha
-              init-events
+              update-position
+              update-pivot
+              update-rotation
+              update-alpha
               update-events
-              set-line-style
+              update-line-style
               draw-circle
               draw-rect
+              init-events
               init-position
               init-pivot
               init-angle
@@ -77,7 +77,7 @@
         line-style (:line-style props)
         events (:on props)]
     (if (some? (:fill props)) (.beginFill target (:fill props)))
-    (set-line-style target line-style)
+    (init-line-style target line-style)
     (draw-rect target (:position props) (:size props))
     (if (some? (:fill props)) (.endFill target))
     (init-pivot target (:pivot props))
@@ -135,7 +135,7 @@
         position (:position props)
         events (:on props)]
     (when (some? (:fill props)) (.beginFill target (:fill props)))
-    (set-line-style target line-style)
+    (init-line-style target line-style)
     (draw-circle target position (:radius props))
     (when (some? (:fill props)) (.endFill target))
     (init-events target events dispatch!)
@@ -152,7 +152,7 @@
       (.addChild target (render-element (peek child-pair) dispatch!))
       (js/console.log "nil child:" child-pair))))
 
-(defn set-angle [target v] (set! (.-angle target) (or v 0)))
+(defn update-angle [target v v0] (when (not= v v0) (set! (.-angle target) v)))
 
 (defn update-circle [element old-element target dispatch!]
   (let [props (:props element)
@@ -169,38 +169,34 @@
               (not= (:fill props) (:fill props')))
       (.clear target)
       (when (some? (:fill props)) (.beginFill target (:fill props)))
-      (set-line-style target line-style)
+      (update-line-style target line-style line-style')
       (draw-circle target position (:radius props))
       (when (some? (:fill props)) (.endFill target))
-      (when (not= (:alpha props) (:alpha props')) (set-alpha target (:alpha props)))
-      (when (not= (:angle props) (:angle props')) (set-angle target (:angle props)))
-      (when (not= (:rotation props) (:rotation props'))
-        (set-rotation target (:rotation props)))
-      (when (not= (:pivot props) (:pivot props')) (set-pivot target (:pivot props))))
+      (update-alpha target (:alpha props) (:alpha props'))
+      (update-angle target (:angle props) (:angle props'))
+      (update-rotation target (:rotation props) (:rotation props'))
+      (update-pivot target (:pivot props) (:pivot props')))
     (update-events target (-> element :props :on) (-> old-element :props :on) dispatch!)))
 
 (defn update-container [element old-element target]
   (let [props (:props element), props' (:props old-element)]
-    (when (not= (:position props) (:position props')) (set-position target (:position props)))
-    (when (not= (:pivot props) (:pivot props')) (set-pivot target (:pivot props)))
-    (when (not= (:angle props) (:angle props')) (set-angle target (:angle props)))
-    (when (not= (:rotation props) (:rotation props'))
-      (set-rotation target (:rotation props)))
-    (when (not= (:alpha props) (:alpha props')) (set-alpha target (:alpha props)))))
+    (update-position target (:position props) (:position props'))
+    (update-pivot target (:pivot props) (:pivot props'))
+    (update-angle target (:angle props) (:angle props'))
+    (update-rotation target (:rotation props) (:rotation props'))
+    (update-alpha target (:alpha props) (:alpha props'))))
 
 (defn update-graphics [element old-element target dispatch!]
   (let [props (:props element)
         props' (:props old-element)
         ops (:ops props)
         ops' (:ops props')]
     (when (not= ops ops') (.clear target) (call-graphics-ops target ops))
-    (when (not= (:position props) (:position props'))
-      (set-position target (:position props)))
-    (when (not= (:rotation props) (:rotation props'))
-      (set-rotation target (:rotation props)))
-    (when (not= (:angle props) (:angle props')) (set-angle target (:angle props)))
-    (when (not= (:pivot props) (:pivot props')) (set-pivot target (:pivot props)))
-    (when (not= (:alpha props) (:alpha props')) (set-alpha target (:alpha props)))
+    (update-position target (:position props) (:position props'))
+    (update-rotation target (:rotation props) (:rotation props'))
+    (update-angle target (:angle props) (:angle props'))
+    (update-pivot target (:pivot props) (:pivot props'))
+    (update-alpha target (:alpha props) (:alpha props'))
     (update-events target (-> element :props :on) (-> old-element :props :on) dispatch!)))
 
 (defn update-rect [element old-element target dispatch!]
@@ -218,14 +214,13 @@
               (not= (:fill props) (:fill props')))
       (.clear target)
       (if (some? (:fill props)) (.beginFill target (:fill props)))
-      (set-line-style target line-style)
+      (update-line-style target line-style line-style')
       (draw-rect target position size)
       (if (some? (:fill props)) (.endFill target)))
-    (when (not= (:rotation props) (:rotation props'))
-      (set-rotation target (:rotation props)))
-    (when (not= (:angle props) (:angle props')) (set-angle target (:angle props)))
-    (when (not= (:pivot props) (:pivot props')) (set-pivot target (:pivot props)))
-    (when (not= (:alpha props) (:alpha props')) (set-alpha target (:alpha props)))
+    (update-rotation target (:rotation props) (:rotation props'))
+    (update-angle target (:angle props) (:angle props'))
+    (update-pivot target (:pivot props) (:pivot props'))
+    (update-alpha target (:alpha props) (:alpha props'))
     (update-events target (-> element :props :on) (-> old-element :props :on) dispatch!)))
 
 (defn update-text [element old-element target]
@@ -237,13 +232,11 @@
     (when (not= text-style text-style')
       (let [new-style (new (.-TextStyle PIXI) (convert-line-style text-style))]
         (set! (.-style target) new-style)))
-    (when (not= (:position props) (:position props'))
-      (set-position target (:position props)))
-    (when (not= (:rotation props) (:rotation props'))
-      (set-rotation target (:rotation props)))
-    (when (not= (:angle props) (:angle props')) (set-angle target (:angle props)))
-    (when (not= (:pivot props) (:pivot props')) (set-pivot target (:pivot props)))
-    (when (not= (:alpha props) (:alpha props')) (set-alpha target (:alpha props)))))
+    (update-position target (:position props) (:position props'))
+    (update-rotation target (:rotation props) (:rotation props'))
+    (update-angle target (:angle props) (:angle props'))
+    (update-pivot target (:pivot props) (:pivot props'))
+    (update-alpha target (:alpha props) (:alpha props'))))
 
 (defn update-element [element old-element parent-element idx dispatch! options]
   (cond
@@ -289,13 +282,12 @@
      (and (every? some? (map peek children-dict))
           (every? some? (map peek old-children-dict)))
      "children should not contain nil element"))
-  (let [list-ops (:acc
-                  (find-minimal-ops
-                   lcs-state-0
-                   (map first old-children-dict)
-                   (map first children-dict)))]
-    (comment js/console.log "ops" list-ops old-children-dict children-dict)
-    (loop [idx 0, ops list-ops, xs children-dict, ys old-children-dict]
+  (let [list-ops (find-minimal-ops
+                  lcs-state-0
+                  (map first old-children-dict)
+                  (map first children-dict))]
+    (comment js/console.log "ops" (:total list-ops))
+    (loop [idx 0, ops (:acc list-ops), xs children-dict, ys old-children-dict]
       (when-not (empty? ops)
         (let [op (first ops)]
           (case (first op)

src/phlox/render/draw.cljs

@@ -112,27 +112,8 @@
 
 (defn init-rotation [target v] (when (some? v) (set! (.-rotation target) v)))
 
-(defn set-alpha [target alpha] (set! (-> target .-alpha) (or alpha 1)))
-
-(defn set-line-style [target line-style]
-  (if (some? line-style)
-    (.lineStyle
-     target
-     (use-number (:width line-style))
-     (use-number (:color line-style))
-     (:alpha line-style))
-    (.lineStyle target 0 0 0)))
-
-(defn set-pivot [target pivot]
-  (dev-check pivot (optional+ lilac-point))
-  (set! (-> target .-pivot .-x) (if (vector? pivot) (first pivot) 0))
-  (set! (-> target .-pivot .-y) (if (vector? pivot) (peek pivot) 0)))
-
-(defn set-position [target point]
-  (set! (-> target .-position .-x) (if (vector? point) (first point) 0))
-  (set! (-> target .-position .-y) (if (vector? point) (peek point) 0)))
-
-(defn set-rotation [target v] (set! (.-rotation target) (or v 0)))
+(defn update-alpha [target alpha alpha0]
+  (when (not= alpha alpha0) (set! (-> target .-alpha) alpha)))
 
 (defn update-events [target events old-events dispatch!]
   (doseq [[k listener] old-events] (.off target (name k)))
@@ -141,3 +122,25 @@
   (if (some? events)
     (do (set! (.-buttonMode target) true) (set! (.-interactive target) true))
     (do (set! (.-buttonMode target) false) (set! (.-interactive target) false))))
+
+(defn update-line-style [target line-style line-style0]
+  (when (not= line-style line-style0)
+    (if (some? line-style)
+      (.lineStyle
+       target
+       (use-number (:width line-style))
+       (use-number (:color line-style))
+       (:alpha line-style))
+      (.lineStyle target 0 0 0))))
+
+(defn update-pivot [target pivot pivot0]
+  (when (not= pivot pivot0)
+    (set! (-> target .-pivot .-x) (if (vector? pivot) (first pivot) nil))
+    (set! (-> target .-pivot .-y) (if (vector? pivot) (peek pivot) nil))))
+
+(defn update-position [target point point0]
+  (when (not= point point0)
+    (set! (-> target .-position .-x) (if (vector? point) (first point) nil))
+    (set! (-> target .-position .-y) (if (vector? point) (peek point) nil))))
+
+(defn update-rotation [target v v0] (when (not= v v0) (set! (.-rotation target) v)))

src/phlox/util/lcs.cljs

@@ -2,6 +2,7 @@
 (ns phlox.util.lcs )
 
 (defn find-minimal-ops [state xs ys]
+  (comment println "find ops" state (count xs) (count ys))
   (cond
     (and (empty? xs) (empty? ys)) state
     (and (empty? xs) (not (empty? ys)))
@@ -18,23 +19,35 @@
        [])
     :else
       (let [x0 (first xs), y0 (first ys)]
-        (if (= x0 y0)
-          (recur
-           (-> state (update :acc (fn [acc] (conj acc [:remains x0]))))
-           (rest xs)
-           (rest ys))
-          (let [solution-a (find-minimal-ops
-                            (-> state
-                                (update :acc (fn [acc] (conj acc [:remove (first xs)])))
-                                (update :step inc))
-                            (rest xs)
-                            ys)
-                solution-b (find-minimal-ops
-                            (-> state
-                                (update :acc (fn [acc] (conj acc [:add (first ys)])))
-                                (update :step inc))
-                            xs
-                            (rest ys))]
-            (if (<= (:step solution-a) (:step solution-b)) solution-a solution-b))))))
+        (cond
+          (= x0 y0)
+            (recur
+             (-> state (update :acc (fn [acc] (conj acc [:remains x0]))) (update :step inc))
+             (rest xs)
+             (rest ys))
+          (nil? (some (fn [y] (= x0 y)) ys))
+            (recur
+             (-> state (update :acc (fn [acc] (conj acc [:remove x0]))) (update :step inc))
+             (rest xs)
+             ys)
+          (nil? (some (fn [x] (= y0 x)) xs))
+            (recur
+             (-> state (update :acc (fn [acc] (conj acc [:add y0]))) (update :step inc))
+             xs
+             (rest ys))
+          :else
+            (let [solution-a (find-minimal-ops
+                              (-> state
+                                  (update :acc (fn [acc] (conj acc [:remove (first xs)])))
+                                  (update :step inc))
+                              (rest xs)
+                              ys)
+                  solution-b (find-minimal-ops
+                              (-> state
+                                  (update :acc (fn [acc] (conj acc [:add (first ys)])))
+                                  (update :step inc))
+                              xs
+                              (rest ys))]
+              (if (<= (:step solution-a) (:step solution-b)) solution-a solution-b))))))
 
 (def lcs-state-0 {:acc [], :step 0})