start to state based filtering

Conaws · Oct 27, 2016 · 61b2adb · 61b2adb
1 parent 6749626
commit 61b2adb
Show file tree

Hide file tree

Showing 12 changed files with 213 additions and 32 deletions.
diff --git a/Gif/.DS_Store b/Gif/.DS_Store
diff --git a/Gif/drag.gif b/Gif/drag.gif
diff --git a/Gif/setdrag.mov b/Gif/setdrag.mov
diff --git a/Gif/tags.gif b/Gif/tags.gif
diff --git a/Gif/tags.mov b/Gif/tags.mov
diff --git a/TODO.org b/TODO.org
@@ -692,14 +692,62 @@ basically, the only thing that are "members" right now are the poems
 long term, I'll need to straighten that out, so that, rather than looking for members
 you just take the base "type", and you look for the elements that have those, and treat those as members rather than subsets
 
+** 14:39:54
 
 
+Nice helpers
 
+(defn constrain [v min-v max-v]
+  (cond (< v min-v) min-v
+        (> v max-v) max-v
+        :else v))
 
+(defn e->translation [e {:keys [mouse-start-state elem-start-state]}]
+  (let [[delta-x delta-y] (mouse-delta e mouse-start-state)]
+    {:x (constrain (+ (:x elem-start-state) delta-x) 0 (:canvas-width config))
+     :y (constrain (+ (:y elem-start-state) delta-y) 0 (:canvas-height config))}))
 
 
 
 
+(defn drag-move [e]
+  (when (:dragging (selected-elem))
+    (swap-selected-elem! merge (e->translation e @transients))))
+
+(defn drag-end [e]
+  (when (:dragging (selected-elem))
+    (swap-selected-elem! merge (e->translation e @transients) {:dragging false})
+    (set-cursor! :auto)))
+
+
+
+
+
+
+;;; also potentially useful
+
+;;; alll from here https://github.com/yayitswei/t-edit/blob/master/src/tedit/core.cljs
+
+(defn dominant [f values]
+  (apply (partial max-key Math/abs) values))
+
+(defn e->scale [e {:keys [mouse-start-state elem-start-state]}]
+  (let [deltas (mouse-delta e mouse-start-state)]
+    #_(swap! debug merge {:font-size new-font-size :deltas (print-str deltas)
+                        :dominant-delta (dominant Math/abs deltas)})
+    (case (:type elem-start-state)
+      :text {:font-size (max (+ (:font-size elem-start-state)
+                                (dominant Math/abs deltas)) 10)}
+      :art {:scale (max (+ (:scale elem-start-state)
+                           (/ (dominant Math/abs deltas) 100)) 0.1)})))
+
+** 14:45:51 better draggable example
+
+https://github.com/borkdude/draggable-button-in-reagent/blob/master/src-cljs/drag/main.cljs
+
+
+now.. this is pretttyyy gnarly in some ways, quite low level
+but... that has tradeoffs good and bad --- what is droppable?
 
 
 

diff --git a/project.clj b/project.clj
@@ -26,7 +26,9 @@
                  [day8/re-frame-tracer "0.1.1-SNAPSHOT"]
                  [cljsjs/firebase "3.2.1-0"]
                  [keybind "2.0.0"]
-                 [reagent-forms "0.5.27"]]
+                 [reagent-forms "0.5.27"]
+                 [cljsjs/dragula "3.6.8-0"]
+                 [org.clojars.frozenlock/reagent-table "0.1.3"]]
 
   :clean-targets ^{:protect false} ["resources/public/js/compiled"
                   "target"

diff --git a/resources/public/cards.html b/resources/public/cards.html
@@ -1,26 +1,26 @@
 <!DOCTYPE html>
 <html>
   <head>
-      <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">
     <link rel="stylesheet" href="assets/css/material-design-iconic-font.min.css">
     <link rel="stylesheet" href="assets/css/re-com.css">
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.9/cytoscape.js"></script>
-    <!-- <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> -->
-<script src="https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>
-	 <script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
-	 <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-cose-bilkent/1.0.5/cytoscape-cose-bilkent.js"></script>
 
-	 <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.1.2/cytoscape-dagre.js"></script>
-   <!-- <link href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic" rel="stylesheet" type="text/css"> -->
-   <!-- <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300' rel='stylesheet' type='text/css'> -->
-   <!-- <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> -->
-   <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css">
-   <!-- <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script> -->
+   <link href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic" rel="stylesheet" type="text/css">
+   <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300' rel='stylesheet' type='text/css'>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <meta charset="UTF-8">
     <link href="/css/undead.css" rel="stylesheet" type="text/css">
   </head>
   <body>
-    <script src="/js/compiled/devcards.js" type="text/javascript"></script>
+   <!-- <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script> -->
+   <!-- <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> -->
+    <!-- <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> -->
+    <script src="https://npmcdn.com/[email protected]/dist/ReactDnD.min.js"></script>
+	 <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.1.2/cytoscape-dagre.js"></script>
+    <script src="https://npmcdn.com/[email protected]/dist/ReactDnDHTML5Backend.min.js"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.9/cytoscape.js"></script>
+	 <script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
+  <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-cose-bilkent/1.0.5/cytoscape-cose-bilkent.js"></script>  
+      <script src="/js/compiled/devcards.js" type="text/javascript"></script>
   </body>
 </html>
diff --git a/resources/public/css/dragula.min.css b/resources/public/css/dragula.min.css
diff --git a/src/undead/cards/multi.cljs b/src/undead/cards/multi.cljs
@@ -5,7 +5,6 @@
    [re-com.core :as rc :refer [v-box box input-text h-box]]
    [datascript.core :as d]
    [reagent-forms.core :refer [bind-fields]]
-   [clojure.string :as str]
    [reagent.core :as r]
    [re-frame.core :refer [subscribe dispatch]])
   (:require-macros
@@ -136,9 +135,9 @@
              matching-options))]]])
        )))
 
-(defcard-rg bbc
+(defcard-rg tags-example
   [multi {:highlight-class "highlight"
-          :options ["E" "F" "Ab""Abb" "bbbAaaa"]}]
+          :options ["Reagent""Re-frame""Re-com""Reaction"]}]
   )
 
 

diff --git a/src/undead/cards/poem.cljs b/src/undead/cards/poem.cljs
@@ -2,6 +2,7 @@
   (:require
    [goog.i18n.DateTimeFormat :as dtf]
    [posh.core :as posh :refer [posh!]]
+   [reagent-table.core :as rt]
    [cljs-time.core :as time :refer [now]]
    [keybind.core :as keys]
    [cljs.pprint :refer [pprint]]
@@ -28,8 +29,22 @@
                   :set/members          {:db/valueType   :db.type/ref
                                     :db/cardinality :db.cardinality/many}})
 
+#_(defcard-rg tabletester
+  (fn []
+    [rt/reagent-table (r/atom {:headers ["Row 1" "Row 2" "Row 5" "Row 3" "Col 4"]
+
+                               :rows [[1 1 1 1 "D"]
+                                      [2 20 2 2 "B"]
+                                      [30 3 33 3 "C"]
+                                      [3 3 3 0 "A"]
+                                      ]}
 
 
+                              )
+     {:rows-selection [:ul {:li {:class "btnn"}}]}
+
+     ]))
+
 
 
 (def poemdb
@@ -388,6 +403,9 @@ Be the dust at the Wise One's door, and speak!" }])
 
 
 
+
+
+
 (defn filter-view [{:keys [set/title set/subsets set/members] :as n} ]
   (let [my-atom (r/atom false)]
     (fn []
@@ -422,6 +440,118 @@ Be the dust at the Wise One's door, and speak!" }])
                   :set/subsets
                   [{:set/title "Sufi", :set/members [{:db/id 1}]}]}]}]
   )
+
+
+
+#_(def attr-query '[:find [(pull ?attributes
+                               [:set/title :set/members
+                                {:set/subsets ...}]) ...]
+                  :in $ ?type
+                  :where [?e :set/title ?type]
+                  [?e :set/attributes ?attributes]
+                  ])
+
+
+(deftrack state-via-pull [conn attr]
+  @(posh/q conn '[:find [?e ...]
+                  :in $ ?type
+                  :where [?e :set/title ?type]
+                  [?e :set/attributes ?attributes]]
+           attr))
+
+
+(def app-state (r/atom {:queries {2 {:id 2
+                                     :selected #{5}}
+                                  7 {:id 7
+                                     :selected #{ 9 }} }}))
+
+;; (get-in db [:queries t :selected]) (:db/id s)
+(defn filter-load [a conn db]
+  (let [x (posh/pull conn '[:set/title :db/id
+                            {:set/subsets ...
+                             :set/members ...}] a)
+        b (r/atom false)]
+    (fn [a conn db]
+      (let [t (:db/id @x)]
+        [:div
+         [:h1 (pr-str @db)]
+         [:h1 (:set/title @x)]
+         [:h1 (:db/id @x)]
+         (for [s (:set/subsets @x)]
+           [:div
+            [:button
+             {:on-click
+              #(swap! db update-in
+                     [:queries t :selected] disj (:db/id s))
+
+              }
+             "remove"]
+
+            [:button
+             {:on-click #(do
+                           (if ((get-in db [:queries t :selected] #{})
+                                (:db/id s))
+                             (js/alert "yo")
+                             (swap! db update-in
+                                    [:queries t :selected] (fnil conj #{}) (:db/id s))))}]]
+           )]
+
+        ))))
+
+
+(defn filter2 [conn db]
+  (let [qattrs
+        (posh/q conn '[:find [?attrs ...]
+                       :in $ ?type
+                       :where
+                       [?e :set/title ?type]
+                       [?e :set/attributes ?attrs]]
+                "Poem")]
+    (fn [conn db]
+      [:div
+       [:h1 (pr-str @qattrs)]
+       (for [a @qattrs]
+              ^{:key (pr-str a)}
+              [filter-load a conn db]
+
+              )]
+
+      )
+      )
+  )
+
+
+
+(defcard-rg ffff
+  [filter2 poem-conn app-state])
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

diff --git a/src/undead/cards/setdrag.cljs b/src/undead/cards/setdrag.cljs
@@ -1,16 +1,18 @@
 (ns undead.cards.setdrag
   (:require [datascript.core :as d]
             [posh.core :as posh :refer [posh! pull q]] 
-            [reagent.core :as r]
+            [reagent.core :as reagent]
             [clojure.set :as set])
   (:require-macros
    [cljs.test :refer [is testing]]
    [devcards.core :refer [defcard-rg deftest]]))
 
-(defonce app-state (r/atom {:list (vec (take 11 "abcdefghijkl"))
+(defonce app-state (reagent/atom {:list (vec (take 11 "abcdefghijkl"))
                        :over -1
                        :dragging false}))
 
+
+
 (defn splice [x vctr pstn]
   (let [vctr (vec (filter #(not (= x %)) vctr))
         start (subvec vctr 0 pstn)
@@ -19,7 +21,6 @@
 
 
 
-
 (defn placeholder [i v]
   [:li {:style {; :height "2em"
                 :background "rgb(255,240,120)"}}
@@ -48,7 +49,6 @@
         [placeholder (:dragging @s) v]
         [:li {:data-id i
               :draggable true
-   ;           :class-name "placeholder"
               :style {:display
                       (if (= v (:dragging @s))
                         "none"
@@ -68,17 +68,8 @@
               :on-drag-start (fn [e]
                                (swap! s assoc :dragging v
                                       :oldlist (:list @s)))
-              :on-drag-end (fn [e]
-                             #_(do
-                               (swap! s update :list (fn [l]
-                                                       (swap-in-vector
-                                                        l
-                                                        :placeholder
-                                                        (:dragging @s))))
-                               (swap! s assoc
-                                      :over false
-                                      :dragging false)))}
-         v]))) 
+              }
+         v])))
 
 
 
@@ -119,3 +110,13 @@
 
 
 
+
+
+
+
+
+
+
+
+
+