bookmark order WIP!

src/PRo3D.Core/Groups-Model.fs

@@ -127,10 +127,17 @@ type Node with
         }
 
 type TreeSelection = {
-    id : Guid
+    id   : Guid
     path : list<Index>
     name : string
-}
+} with 
+    static member init (id, path, name) = 
+        {
+            id   = id
+            path = path
+            name = name
+        }
+
 
 [<CompilationRepresentation(CompilationRepresentationFlags.ModuleSuffix)>]
 module Group =
@@ -185,6 +192,7 @@ type GroupsModel = {
     rootGroup            : Node
     activeGroup          : TreeSelection
     activeChild          : TreeSelection
+    dragging             : option<TreeSelection>
     flat                 : HashMap<Guid,Leaf>
     groupsLookup         : HashMap<Guid,string>
     lastSelectedItem     : SelectedItem
@@ -305,6 +313,7 @@ module GroupsModel =
                 lastSelectedItem    = SelectedItem.Child
                 selectedLeaves      = HashSet.Empty 
                 singleSelectLeaf    = None
+                dragging            = None
             }
         }
 
@@ -318,6 +327,7 @@ module GroupsModel =
         lastSelectedItem = SelectedItem.Child
         selectedLeaves   = HashSet.Empty
         singleSelectLeaf = None
+        dragging         = None
     }
 
 

src/PRo3D.Core/GroupsApp.fs

@@ -17,7 +17,7 @@ open PRo3D
 
 type GroupsAppAction =
     | ToggleExpand          of list<Index>
-    | SetActiveGroup        of Guid*list<Index>*string
+    | SetActiveGroup        of TreeSelection
     | AddGroup              of list<Index>
     | AddLeaves             of list<Index>*IndexList<Leaf>    
     | RemoveGroup           of list<Index>
@@ -38,9 +38,27 @@ type GroupsAppAction =
     | ClearSnapshotsGroup
     | ClearSelection
     | UpdateCam             of Guid
+    | StartDragging         of TreeSelection
+    | Drop                  of TreeSelection
     | Nop
 
 module GroupsApp =
+
+    module DragDrop =
+        let requirements = 
+            [
+             { kind = Script; name = "dragDrop"; url = "dragDrop.js" }
+            ]
+
+        let onDrop action =
+            onEvent "ondrop" ["{ data : event.dataTransfer.getData('data')}"] 
+                    (fun args -> printfn "dragged thing: %A" args; action args)
+
+        let allowDrop () =
+            attribute "ondragover" "allowDrop(event)" 
+
+        let onDragStart data =
+            attribute "ondragstart" (sprintf "drag(event, '%s')" data)
 
     let getNode (path : list<Index>) (root : Node) : Node =
         let rec goDeeper (p : list<Index>) (node : Node) =
@@ -364,9 +382,7 @@ module GroupsApp =
 
     let update (model : GroupsModel) (action : GroupsAppAction) =
         match action with
-        | SetActiveGroup (g, p, s) -> 
-            let selection = { id = g; path = p; name = s}
-
+        | SetActiveGroup selection -> 
             { model with 
                 activeGroup      = selection
                 lastSelectedItem = SelectedItem.Group
@@ -542,6 +558,10 @@ module GroupsApp =
                 lastSelectedItem = SelectedItem.Group } 
         | ClearSnapshotsGroup -> 
             clearGroupAtRoot model "snapshots"
+        | StartDragging selection ->
+            {model with dragging = Some selection}
+        | Drop selection ->
+            {model with dragging = None}
         | _ -> 
             model
 
@@ -582,7 +602,9 @@ module GroupsApp =
                                    (msg : GroupsAppAction -> 'a) =
         amap {
             let! name = group.name
-            let setActive = GroupsAppAction.SetActiveGroup (group.key |> AVal.force, path, name)
+            let setActive = 
+                GroupsAppAction.SetActiveGroup 
+                    (TreeSelection.init (group.key |> AVal.force, path, name))
             let! icon = activeIcon model group
             yield clazz icon
             yield onClick (fun _ -> (msg setActive))

src/PRo3D.SimulatedViews/Snapshots/GroupExtensions.fs

@@ -15,6 +15,8 @@ open Aardvark.VRVis.Opc
 open PRo3D.Base
 open PRo3D
 
+
+
 module GroupsApp =
     let clearGroupAtRoot (model : GroupsModel) (groupName : string) =
         let node = 

src/PRo3D.Viewer/PRo3D.Viewer.fsproj

@@ -72,6 +72,7 @@
     <Compile Include="QueriesRemoteApi.fs" />
     <Compile Include="RemoteApi.fs" />
     <Compile Include="Program.fs" />
+    <EmbeddedResource Include="resources\dragDrop.js" />
 
     <Content Include="resources\rotationcubeXYZ\back.png">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>

src/PRo3D.Viewer/resources/dragDrop.js

@@ -0,0 +1,15 @@
+function allowDrop(ev) {
+    ev.preventDefault();
+}
+
+function drag(ev, data) {
+    ev.dataTransfer.setData("data", data);
+}
+
+relativeTo = function (event, container) {
+    var container = document.getElementsByClassName(container)[0];
+    var bounds = container.getBoundingClientRect();
+    var x = event.clientX - bounds.left;
+    var y = event.clientY - bounds.top;
+    return { x: x, y: y };
+}