From 940276ca5128541349a96fb5c155811cc54adf0a Mon Sep 17 00:00:00 2001 From: roovo Date: Thu, 16 Nov 2023 21:24:56 +0000 Subject: [PATCH 01/12] DndSettings: handle mouse down on board name --- src/Page/Settings.elm | 57 +++++++++++++++++++++++++++++++++++++++++-- typescript/view.ts | 2 ++ 2 files changed, 57 insertions(+), 2 deletions(-) diff --git a/src/Page/Settings.elm b/src/Page/Settings.elm index 4f232a15..6f5616a0 100644 --- a/src/Page/Settings.elm +++ b/src/Page/Settings.elm @@ -12,12 +12,15 @@ import AssocList as Dict exposing (Dict) import BoardConfig exposing (BoardConfig) import ColumnNames exposing (ColumnNames) import DataviewTaskCompletion exposing (DataviewTaskCompletion) +import DragAndDrop.Coords as Coords +import DragAndDrop.DragTracker as DragTracker exposing (DragTracker) import FeatherIcons import Filter exposing (Filter, Polarity) import GlobalSettings exposing (GlobalSettings, TaskCompletionFormat) import Html exposing (Html) import Html.Attributes exposing (class, placeholder, selected, type_, value) import Html.Events exposing (onClick, onInput) +import Html.Events.Extra.Mouse exposing (onDown) import Html.Keyed import InteropPorts import List.Extra as LE @@ -90,6 +93,7 @@ type Msg | AddBoardConfirmed | BackspacePressed | BoardNameClicked Int + | BoardNameMouseDown ( String, DragTracker.ClientData ) | BoardTypeSelected String | DeleteBoardRequested | DeleteBoardConfirmed @@ -115,6 +119,11 @@ type Msg | ToggleTagFilterScope +dragType : String +dragType = + "card-board-settings-board-name" + + switchSettingsState : (SettingsState -> SettingsState) -> Model -> Model switchSettingsState fn model = let @@ -153,6 +162,12 @@ update msg model = BoardNameClicked index -> wrap <| switchSettingsState (SettingsState.editBoardAt index) model + BoardNameMouseDown ( domId, clientData ) -> + ( { model | session = Session.waitForDrag clientData model.session } + , InteropPorts.trackDraggable dragType clientData.clientPos domId + , Session.NoOp + ) + BoardTypeSelected boardType -> mapBoardBeingAdded (BoardConfig.updateBoardType boardType) model @@ -1341,17 +1356,55 @@ polaritySelect polarity = settingTitleSelectedView : Int -> BoardConfig -> Html Msg settingTitleSelectedView index boardConfig = + let + domId : String + domId = + "card-board-setting-board-name:" ++ String.fromInt index + + title : String + title = + BoardConfig.title boardConfig + in Html.div [ class "vertical-tab-nav-item is-active" , onClick <| BoardNameClicked index + , onDown + (\e -> + BoardNameMouseDown <| + ( domId + , { uniqueId = title + , clientPos = Coords.fromFloatTuple e.clientPos + , offsetPos = Coords.fromFloatTuple e.offsetPos + } + ) + ) ] - [ Html.text <| BoardConfig.title boardConfig ] + [ Html.text title ] settingTitleView : Int -> BoardConfig -> Html Msg settingTitleView index boardConfig = + let + domId : String + domId = + "card-board-setting-board-name:" ++ String.fromInt index + + title : String + title = + BoardConfig.title boardConfig + in Html.div [ class "vertical-tab-nav-item" , onClick <| BoardNameClicked index + , onDown + (\e -> + BoardNameMouseDown <| + ( domId + , { uniqueId = title + , clientPos = Coords.fromFloatTuple e.clientPos + , offsetPos = Coords.fromFloatTuple e.offsetPos + } + ) + ) ] - [ Html.text <| BoardConfig.title boardConfig ] + [ Html.text title ] diff --git a/typescript/view.ts b/typescript/view.ts index cbd16e81..ee89f5c5 100644 --- a/typescript/view.ts +++ b/typescript/view.ts @@ -342,6 +342,8 @@ export class CardBoardView extends ItemView { document.addEventListener("mousemove", maybeDragMove); document.addEventListener("mouseup", stopAwaitingDrag); + console.log("tracking " + beaconType); + function maybeDragMove(moveEvent: MouseEvent) { const dragDistance = distance({ x: data.clientPos.x, y: data.clientPos.y}, coords(moveEvent)); From 2fbb711cb9a72c6fa235f562794b4eecdb329606 Mon Sep 17 00:00:00 2001 From: roovo Date: Thu, 16 Nov 2023 21:34:14 +0000 Subject: [PATCH 02/12] DndSettings: add beacons to the view --- src/Page/Settings.elm | 82 ++++++++++++++++++++++++++++--------------- typescript/view.ts | 2 ++ 2 files changed, 55 insertions(+), 29 deletions(-) diff --git a/src/Page/Settings.elm b/src/Page/Settings.elm index 6f5616a0..64d6b088 100644 --- a/src/Page/Settings.elm +++ b/src/Page/Settings.elm @@ -12,17 +12,19 @@ import AssocList as Dict exposing (Dict) import BoardConfig exposing (BoardConfig) import ColumnNames exposing (ColumnNames) import DataviewTaskCompletion exposing (DataviewTaskCompletion) +import DragAndDrop.BeaconPosition as BeaconPosition exposing (BeaconPosition) import DragAndDrop.Coords as Coords import DragAndDrop.DragTracker as DragTracker exposing (DragTracker) import FeatherIcons import Filter exposing (Filter, Polarity) import GlobalSettings exposing (GlobalSettings, TaskCompletionFormat) import Html exposing (Html) -import Html.Attributes exposing (class, placeholder, selected, type_, value) +import Html.Attributes exposing (attribute, class, placeholder, selected, style, type_, value) import Html.Events exposing (onClick, onInput) import Html.Events.Extra.Mouse exposing (onDown) import Html.Keyed import InteropPorts +import Json.Encode as JE import List.Extra as LE import Page.Helper.Multiselect as MultiSelect import SafeZipper exposing (SafeZipper) @@ -1365,21 +1367,25 @@ settingTitleSelectedView index boardConfig = title = BoardConfig.title boardConfig in - Html.div - [ class "vertical-tab-nav-item is-active" - , onClick <| BoardNameClicked index - , onDown - (\e -> - BoardNameMouseDown <| - ( domId - , { uniqueId = title - , clientPos = Coords.fromFloatTuple e.clientPos - , offsetPos = Coords.fromFloatTuple e.offsetPos - } - ) - ) + Html.div [] + [ beacon (BeaconPosition.Before title) + , Html.div + [ class "vertical-tab-nav-item is-active" + , onClick <| BoardNameClicked index + , onDown + (\e -> + BoardNameMouseDown <| + ( domId + , { uniqueId = title + , clientPos = Coords.fromFloatTuple e.clientPos + , offsetPos = Coords.fromFloatTuple e.offsetPos + } + ) + ) + ] + [ Html.text title ] + , beacon (BeaconPosition.After title) ] - [ Html.text title ] settingTitleView : Int -> BoardConfig -> Html Msg @@ -1393,18 +1399,36 @@ settingTitleView index boardConfig = title = BoardConfig.title boardConfig in - Html.div - [ class "vertical-tab-nav-item" - , onClick <| BoardNameClicked index - , onDown - (\e -> - BoardNameMouseDown <| - ( domId - , { uniqueId = title - , clientPos = Coords.fromFloatTuple e.clientPos - , offsetPos = Coords.fromFloatTuple e.offsetPos - } - ) - ) + Html.div [] + [ beacon (BeaconPosition.Before title) + , Html.div + [ class "vertical-tab-nav-item" + , onClick <| BoardNameClicked index + , onDown + (\e -> + BoardNameMouseDown <| + ( domId + , { uniqueId = title + , clientPos = Coords.fromFloatTuple e.clientPos + , offsetPos = Coords.fromFloatTuple e.offsetPos + } + ) + ) + ] + [ Html.text title ] + , beacon (BeaconPosition.After title) + ] + + +beaconType : String +beaconType = + "data-" ++ dragType ++ "-beacon" + + +beacon : BeaconPosition -> Html Msg +beacon beaconPosition = + Html.span + [ attribute beaconType (JE.encode 0 <| BeaconPosition.encoder beaconPosition) + , style "font-size" "0" ] - [ Html.text title ] + [] diff --git a/typescript/view.ts b/typescript/view.ts index ee89f5c5..91a70473 100644 --- a/typescript/view.ts +++ b/typescript/view.ts @@ -379,6 +379,8 @@ export class CardBoardView extends ItemView { const ribbon = document.getElementsByClassName("workspace-ribbon")[0]; const leftSplit = document.getElementsByClassName("workspace-split")[0]; + console.log("dragEvent " + dragAction); + if ((ribbon instanceof HTMLElement) && (leftSplit instanceof HTMLElement) && (draggedElement instanceof HTMLElement)) { From 5388f60e760a0c002869cb781b8bf267b17e9d31 Mon Sep 17 00:00:00 2001 From: roovo Date: Fri, 17 Nov 2023 10:40:23 +0000 Subject: [PATCH 03/12] DndSettings: give the dragables ids --- src/Page/Settings.elm | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/Page/Settings.elm b/src/Page/Settings.elm index 64d6b088..641e6543 100644 --- a/src/Page/Settings.elm +++ b/src/Page/Settings.elm @@ -19,7 +19,7 @@ import FeatherIcons import Filter exposing (Filter, Polarity) import GlobalSettings exposing (GlobalSettings, TaskCompletionFormat) import Html exposing (Html) -import Html.Attributes exposing (attribute, class, placeholder, selected, style, type_, value) +import Html.Attributes exposing (attribute, class, id, placeholder, selected, style, type_, value) import Html.Events exposing (onClick, onInput) import Html.Events.Extra.Mouse exposing (onDown) import Html.Keyed @@ -1370,7 +1370,8 @@ settingTitleSelectedView index boardConfig = Html.div [] [ beacon (BeaconPosition.Before title) , Html.div - [ class "vertical-tab-nav-item is-active" + [ id domId + , class "vertical-tab-nav-item is-active" , onClick <| BoardNameClicked index , onDown (\e -> @@ -1402,7 +1403,8 @@ settingTitleView index boardConfig = Html.div [] [ beacon (BeaconPosition.Before title) , Html.div - [ class "vertical-tab-nav-item" + [ id domId + , class "vertical-tab-nav-item" , onClick <| BoardNameClicked index , onDown (\e -> From dcbe02826eaa2394b6fd1a228f29e0d617929625 Mon Sep 17 00:00:00 2001 From: roovo Date: Fri, 17 Nov 2023 10:41:42 +0000 Subject: [PATCH 04/12] DndSettings: pass ElementDragged Msg to Settings page --- src/Main.elm | 5 +++-- src/Page/Settings.elm | 9 +++++++++ 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/Main.elm b/src/Main.elm index deb9b777..c46569d2 100644 --- a/src/Main.elm +++ b/src/Main.elm @@ -162,8 +162,9 @@ update msg model = BoardPage.update (BoardPage.ElementDragged dragData) subModel |> updateWith Boards GotBoardPageMsg - ( ElementDragged _, _ ) -> - ( model, Cmd.none ) + ( ElementDragged dragData, Settings subModel ) -> + SettingsPage.update (SettingsPage.ElementDragged dragData) subModel + |> updateWith Settings GotSettingsPageMsg ( FilterCandidatesReceived filterCandidates, Settings subModel ) -> SettingsPage.update (SettingsPage.FilterCandidatesReceived filterCandidates) subModel diff --git a/src/Page/Settings.elm b/src/Page/Settings.elm index 641e6543..e8573031 100644 --- a/src/Page/Settings.elm +++ b/src/Page/Settings.elm @@ -14,6 +14,7 @@ import ColumnNames exposing (ColumnNames) import DataviewTaskCompletion exposing (DataviewTaskCompletion) import DragAndDrop.BeaconPosition as BeaconPosition exposing (BeaconPosition) import DragAndDrop.Coords as Coords +import DragAndDrop.DragData exposing (DragData) import DragAndDrop.DragTracker as DragTracker exposing (DragTracker) import FeatherIcons import Filter exposing (Filter, Polarity) @@ -99,6 +100,7 @@ type Msg | BoardTypeSelected String | DeleteBoardRequested | DeleteBoardConfirmed + | ElementDragged DragData | EnteredColumName String String | EnteredCompletedCount String | EnteredNewBoardTitle String @@ -179,6 +181,13 @@ update msg model = DeleteBoardConfirmed -> wrap <| switchSettingsState SettingsState.confirmDeleteBoard model + ElementDragged dragData -> + let + foo = + Debug.log "dragData" dragData + in + ( model, Cmd.none, Session.NoOp ) + EnteredColumName column name -> wrap { model From 57c9db56dcc15c9489ed712ad97f56d152198864 Mon Sep 17 00:00:00 2001 From: roovo Date: Fri, 17 Nov 2023 18:41:14 +0000 Subject: [PATCH 05/12] DndSettings: handle the board title dragging --- src/Page/Settings.elm | 44 +++++++++++++++++++++++++++++++++++++------ src/SettingsState.elm | 37 ++++++++++++++++++++++++++++++++++++ 2 files changed, 75 insertions(+), 6 deletions(-) diff --git a/src/Page/Settings.elm b/src/Page/Settings.elm index e8573031..23ce5521 100644 --- a/src/Page/Settings.elm +++ b/src/Page/Settings.elm @@ -14,8 +14,9 @@ import ColumnNames exposing (ColumnNames) import DataviewTaskCompletion exposing (DataviewTaskCompletion) import DragAndDrop.BeaconPosition as BeaconPosition exposing (BeaconPosition) import DragAndDrop.Coords as Coords -import DragAndDrop.DragData exposing (DragData) +import DragAndDrop.DragData as DragData exposing (DragData) import DragAndDrop.DragTracker as DragTracker exposing (DragTracker) +import DragAndDrop.Rect as Rect import FeatherIcons import Filter exposing (Filter, Polarity) import GlobalSettings exposing (GlobalSettings, TaskCompletionFormat) @@ -182,11 +183,24 @@ update msg model = wrap <| switchSettingsState SettingsState.confirmDeleteBoard model ElementDragged dragData -> - let - foo = - Debug.log "dragData" dragData - in - ( model, Cmd.none, Session.NoOp ) + case dragData.dragAction of + DragData.Move -> + if dragData.dragType == dragType then + ( model + |> updateBoardOrder (Session.dragTracker model.session) dragData + |> (\m -> { m | session = Session.moveDragable dragData m.session }) + , Cmd.none + , Session.NoOp + ) + + else + ( model, Cmd.none, Session.NoOp ) + + DragData.Stop -> + ( { model | session = Session.stopTrackingDragable model.session } + , Cmd.none + , Session.NoOp + ) EnteredColumName column name -> wrap @@ -379,6 +393,24 @@ mapBoardBeingEdited fn model = wrap { model | settingsState = SettingsState.mapBoardBeingEdited fn model.settingsState } +updateBoardOrder : DragTracker -> DragData -> Model -> Model +updateBoardOrder dragTracker { cursor, beacons } model = + case dragTracker of + DragTracker.Dragging clientData _ -> + case Rect.closestTo cursor beacons of + Nothing -> + model + + Just position -> + { model + | settingsState = + SettingsState.moveBoard clientData.uniqueId position model.settingsState + } + + _ -> + model + + wrap : Model -> ( Model, Cmd Msg, Session.Msg ) wrap model = ( model, Cmd.none, Session.NoOp ) diff --git a/src/SettingsState.elm b/src/SettingsState.elm index cc733c8b..344b7f59 100644 --- a/src/SettingsState.elm +++ b/src/SettingsState.elm @@ -12,10 +12,12 @@ module SettingsState exposing , mapBoardBeingAdded , mapBoardBeingEdited , mapGlobalSettings + , moveBoard , settings ) import BoardConfig exposing (BoardConfig) +import DragAndDrop.BeaconPosition as BeaconPosition exposing (BeaconPosition) import GlobalSettings exposing (GlobalSettings) import SafeZipper exposing (SafeZipper) import Settings exposing (Settings) @@ -216,6 +218,15 @@ editGlobalSettings settingsState = settingsState +moveBoard : String -> BeaconPosition -> SettingsState -> SettingsState +moveBoard draggedId beaconPosition settingsState = + mapSettings (Settings.moveBoard draggedId beaconPosition) settingsState + + + +-- MAPPING + + mapBoardBeingAdded : (BoardConfig -> BoardConfig) -> SettingsState -> SettingsState mapBoardBeingAdded fn settingsState = case settingsState of @@ -244,3 +255,29 @@ mapGlobalSettings fn settingsState = _ -> settingsState + + + +-- PRIVATE + + +mapSettings : (Settings -> Settings) -> SettingsState -> SettingsState +mapSettings fn settingsState = + case settingsState of + AddingBoard config settings_ -> + AddingBoard config (fn settings_) + + ClosingPlugin settings_ -> + ClosingPlugin (fn settings_) + + ClosingSettings settings_ -> + ClosingSettings (fn settings_) + + DeletingBoard settings_ -> + DeletingBoard (fn settings_) + + EditingBoard settings_ -> + EditingBoard (fn settings_) + + EditingGlobalSettings settings_ -> + EditingGlobalSettings (fn settings_) From 68473568c517da1d2b49bd8e111362ef766015d8 Mon Sep 17 00:00:00 2001 From: roovo Date: Fri, 17 Nov 2023 21:16:25 +0000 Subject: [PATCH 06/12] DndSettings: show ghost image --- src/Page/Settings.elm | 85 ++++++++++++++++++++++++++++++++++--------- 1 file changed, 67 insertions(+), 18 deletions(-) diff --git a/src/Page/Settings.elm b/src/Page/Settings.elm index 23ce5521..f9ac9520 100644 --- a/src/Page/Settings.elm +++ b/src/Page/Settings.elm @@ -427,10 +427,14 @@ type CurrentSection view : Model -> Html Msg view model = + let + dragTracker = + Session.dragTracker model.session + in case model.settingsState of SettingsState.AddingBoard newConfig settings -> Html.div [] - [ boardSettingsView (Settings.boardConfigs settings) model.multiSelect + [ boardSettingsView (Settings.boardConfigs settings) model.multiSelect dragTracker , modalAddBoard newConfig ] @@ -442,15 +446,17 @@ view model = SettingsState.DeletingBoard settings -> Html.div [] - [ boardSettingsView (Settings.boardConfigs settings) model.multiSelect + [ boardSettingsView (Settings.boardConfigs settings) model.multiSelect dragTracker , modalConfirmDelete ] SettingsState.EditingBoard settings -> - boardSettingsView (Settings.boardConfigs settings) model.multiSelect + boardSettingsView (Settings.boardConfigs settings) + model.multiSelect + dragTracker SettingsState.EditingGlobalSettings settings -> - globalSettingsView (Session.dataviewTaskCompletion <| toSession model) settings + globalSettingsView (Session.dataviewTaskCompletion <| toSession model) settings dragTracker modalAddBoard : BoardConfig -> Html Msg @@ -546,8 +552,8 @@ modalConfirmDelete = ] -settingsSurroundView : CurrentSection -> SafeZipper BoardConfig -> List (Html Msg) -> Html Msg -settingsSurroundView currentSection configs formContents = +settingsSurroundView : CurrentSection -> SafeZipper BoardConfig -> DragTracker -> List (Html Msg) -> Html Msg +settingsSurroundView currentSection configs dragTracker formContents = let boardMapFn : Int -> BoardConfig -> Html Msg boardMapFn = @@ -566,6 +572,14 @@ settingsSurroundView currentSection configs formContents = Boards -> "vertical-tab-nav-item" + + isDragging : Bool + isDragging = + DragTracker.isDragging dragTracker && draggedType == Just dragType + + draggedType : Maybe String + draggedType = + DragTracker.dragType dragTracker in Html.div [ class "modal-container" ] [ Html.div @@ -611,6 +625,10 @@ settingsSurroundView currentSection configs formContents = (configs |> SafeZipper.indexedMapSelectedAndRest boardMapFn settingTitleView |> SafeZipper.toList + |> (\hs -> + List.append hs + [ settingTitleDraggedView isDragging (SafeZipper.current configs) dragTracker ] + ) ) ] ] @@ -623,18 +641,18 @@ settingsSurroundView currentSection configs formContents = ] -boardSettingsView : SafeZipper BoardConfig -> MultiSelect.Model Msg Filter -> Html Msg -boardSettingsView boardConfigs multiselect = +boardSettingsView : SafeZipper BoardConfig -> MultiSelect.Model Msg Filter -> DragTracker -> Html Msg +boardSettingsView boardConfigs multiselect dragTracker = boardSettingsForm (SafeZipper.current boardConfigs) (SafeZipper.currentIndex boardConfigs) multiselect - |> settingsSurroundView Boards boardConfigs + |> settingsSurroundView Boards boardConfigs dragTracker -globalSettingsView : DataviewTaskCompletion -> Settings -> Html Msg -globalSettingsView dataviewTaskCompletion settings = +globalSettingsView : DataviewTaskCompletion -> Settings -> DragTracker -> Html Msg +globalSettingsView dataviewTaskCompletion settings dragTracker = settings |> Settings.globalSettings |> globalSettingsForm dataviewTaskCompletion - |> settingsSurroundView Options (Settings.boardConfigs settings) + |> settingsSurroundView Options (Settings.boardConfigs settings) dragTracker globalSettingsForm : DataviewTaskCompletion -> GlobalSettings -> List (Html Msg) @@ -1397,8 +1415,8 @@ polaritySelect polarity = ) -settingTitleSelectedView : Int -> BoardConfig -> Html Msg -settingTitleSelectedView index boardConfig = +settingTitleView : Int -> BoardConfig -> Html Msg +settingTitleView index boardConfig = let domId : String domId = @@ -1412,7 +1430,7 @@ settingTitleSelectedView index boardConfig = [ beacon (BeaconPosition.Before title) , Html.div [ id domId - , class "vertical-tab-nav-item is-active" + , class "vertical-tab-nav-item" , onClick <| BoardNameClicked index , onDown (\e -> @@ -1430,8 +1448,8 @@ settingTitleSelectedView index boardConfig = ] -settingTitleView : Int -> BoardConfig -> Html Msg -settingTitleView index boardConfig = +settingTitleSelectedView : Int -> BoardConfig -> Html Msg +settingTitleSelectedView index boardConfig = let domId : String domId = @@ -1445,7 +1463,7 @@ settingTitleView index boardConfig = [ beacon (BeaconPosition.Before title) , Html.div [ id domId - , class "vertical-tab-nav-item" + , class "vertical-tab-nav-item is-active" , onClick <| BoardNameClicked index , onDown (\e -> @@ -1463,6 +1481,37 @@ settingTitleView index boardConfig = ] +settingTitleDraggedView : Bool -> Maybe BoardConfig -> DragTracker -> Html Msg +settingTitleDraggedView isDragging boardConfig dragTracker = + case ( isDragging, boardConfig, dragTracker ) of + ( True, Just config, DragTracker.Dragging clientData domData ) -> + Html.div [] + [ Html.div + [ id "card-board-settings-board-title:being-dragged" + , class "vertical-tab-nav-item is-active" + , style "position" "fixed" + , style "top" + (String.fromFloat + (clientData.clientPos.y - domData.offset.y - clientData.offsetPos.y) + ++ "px" + ) + , style "left" + (String.fromFloat + (domData.draggedNodeStartRect.x - domData.offset.x) + ++ "px" + ) + , style "width" (String.fromFloat domData.draggedNodeStartRect.width ++ "px") + , style "height" (String.fromFloat domData.draggedNodeStartRect.height ++ "px") + , style "cursor" "grabbing" + , style "opacity" "0.85" + ] + [ Html.text (BoardConfig.title config) ] + ] + + _ -> + Html.text "" + + beaconType : String beaconType = "data-" ++ dragType ++ "-beacon" From 86bef7f0ac876c9fceedd6f20d1513a53bb19b8e Mon Sep 17 00:00:00 2001 From: roovo Date: Sat, 18 Nov 2023 08:17:12 +0000 Subject: [PATCH 07/12] DndSettings: hide the board name that is being dragged --- src/Page/Settings.elm | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/src/Page/Settings.elm b/src/Page/Settings.elm index f9ac9520..7bc6c79b 100644 --- a/src/Page/Settings.elm +++ b/src/Page/Settings.elm @@ -20,7 +20,7 @@ import DragAndDrop.Rect as Rect import FeatherIcons import Filter exposing (Filter, Polarity) import GlobalSettings exposing (GlobalSettings, TaskCompletionFormat) -import Html exposing (Html) +import Html exposing (Attribute, Html) import Html.Attributes exposing (attribute, class, id, placeholder, selected, style, type_, value) import Html.Events exposing (onClick, onInput) import Html.Events.Extra.Mouse exposing (onDown) @@ -562,7 +562,7 @@ settingsSurroundView currentSection configs dragTracker formContents = settingTitleView Boards -> - settingTitleSelectedView + settingTitleSelectedView isDragging globalSettingsClass : String globalSettingsClass = @@ -1448,8 +1448,8 @@ settingTitleView index boardConfig = ] -settingTitleSelectedView : Int -> BoardConfig -> Html Msg -settingTitleSelectedView index boardConfig = +settingTitleSelectedView : Bool -> Int -> BoardConfig -> Html Msg +settingTitleSelectedView isDragging index boardConfig = let domId : String domId = @@ -1464,6 +1464,7 @@ settingTitleSelectedView index boardConfig = , Html.div [ id domId , class "vertical-tab-nav-item is-active" + , attributeIf isDragging (style "opacity" "0.0") , onClick <| BoardNameClicked index , onDown (\e -> @@ -1524,3 +1525,16 @@ beacon beaconPosition = , style "font-size" "0" ] [] + + + +-- HELPERS + + +attributeIf : Bool -> Attribute msg -> Attribute msg +attributeIf condition attribute = + if condition then + attribute + + else + class "" From ca16ee23177ff60a1caf33ff14bde39a99430f6b Mon Sep 17 00:00:00 2001 From: roovo Date: Sat, 18 Nov 2023 08:25:21 +0000 Subject: [PATCH 08/12] DndSettings: use grab and grabbing cursors --- src/Page/Settings.elm | 5 ++++- styles.css | 1 + 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/Page/Settings.elm b/src/Page/Settings.elm index 7bc6c79b..24b0536e 100644 --- a/src/Page/Settings.elm +++ b/src/Page/Settings.elm @@ -581,7 +581,10 @@ settingsSurroundView currentSection configs dragTracker formContents = draggedType = DragTracker.dragType dragTracker in - Html.div [ class "modal-container" ] + Html.div + [ class "modal-container" + , attributeIf isDragging (style "cursor" "grabbing") + ] [ Html.div [ class "modal-bg" , onClick ModalCloseClicked diff --git a/styles.css b/styles.css index 33947395..34acbb9e 100644 --- a/styles.css +++ b/styles.css @@ -386,6 +386,7 @@ ul.card-board-column-list > li.card-board-card::before { .card-board-view .vertical-tab-nav-item { padding-right: 1.5em; + cursor: grab; } .modal-form { From a7012c51b730743bef6e82aa52f8528c0c2c58dc Mon Sep 17 00:00:00 2001 From: roovo Date: Sat, 18 Nov 2023 11:26:31 +0000 Subject: [PATCH 09/12] DndSettings: elm-review --- src/DragAndDrop/DragData.elm | 1 - src/DragAndDrop/DragTracker.elm | 5 +++-- src/Page/Settings.elm | 1 + src/Session.elm | 17 ----------------- src/SettingsState.elm | 2 +- tests/DragAndDrop/BeaconPositionTests.elm | 1 - tests/DragAndDrop/DragTrackerTests.elm | 12 ++++++------ tests/SessionTests.elm | 7 ++++++- 8 files changed, 17 insertions(+), 29 deletions(-) diff --git a/src/DragAndDrop/DragData.elm b/src/DragAndDrop/DragData.elm index 79ce625e..f6e9c7c4 100644 --- a/src/DragAndDrop/DragData.elm +++ b/src/DragAndDrop/DragData.elm @@ -8,7 +8,6 @@ module DragAndDrop.DragData exposing import DragAndDrop.BeaconPosition as BeaconPosition exposing (BeaconPosition) import DragAndDrop.Coords as Coords exposing (Coords) import DragAndDrop.Rect as Rect exposing (Rect) -import Json.Encode as JE import TsJson.Decode as TsDecode diff --git a/src/DragAndDrop/DragTracker.elm b/src/DragAndDrop/DragTracker.elm index 69b8c343..7e1c5910 100644 --- a/src/DragAndDrop/DragTracker.elm +++ b/src/DragAndDrop/DragTracker.elm @@ -1,5 +1,6 @@ module DragAndDrop.DragTracker exposing ( ClientData + , DomData , DragTracker(..) , dragType , init @@ -9,9 +10,9 @@ module DragAndDrop.DragTracker exposing , waitForDrag ) -import DragAndDrop.Coords as Coords exposing (Coords) +import DragAndDrop.Coords exposing (Coords) import DragAndDrop.DragData exposing (DragData) -import DragAndDrop.Rect as Rect exposing (Rect) +import DragAndDrop.Rect exposing (Rect) diff --git a/src/Page/Settings.elm b/src/Page/Settings.elm index 24b0536e..c0544afc 100644 --- a/src/Page/Settings.elm +++ b/src/Page/Settings.elm @@ -428,6 +428,7 @@ type CurrentSection view : Model -> Html Msg view model = let + dragTracker : DragTracker dragTracker = Session.dragTracker model.session in diff --git a/src/Session.elm b/src/Session.elm index bb488a80..1ad8186a 100644 --- a/src/Session.elm +++ b/src/Session.elm @@ -43,10 +43,8 @@ import Card exposing (Card) import ColumnNames exposing (ColumnNames) import DataviewTaskCompletion exposing (DataviewTaskCompletion) import DragAndDrop.BeaconPosition exposing (BeaconPosition) -import DragAndDrop.Coords exposing (Coords) import DragAndDrop.DragData exposing (DragData) import DragAndDrop.DragTracker as DragTracker exposing (DragTracker) -import DragAndDrop.Rect as Rect exposing (Rect) import GlobalSettings exposing (GlobalSettings) import InteropDefinitions import SafeZipper exposing (SafeZipper) @@ -373,21 +371,6 @@ updatePath oldPath newPath (Session config) = -- PRIVATE -updateBoardOrder : DragData -> Session -> Session -updateBoardOrder { cursor, beacons } ((Session config) as session) = - case config.dragTracker of - DragTracker.Dragging clientData _ -> - case Rect.closestTo cursor beacons of - Nothing -> - session - - Just position -> - moveBoard clientData.uniqueId position session - - _ -> - session - - updateTaskListState : State TaskList -> Session -> Session updateTaskListState taskListState (Session config) = Session { config | taskList = taskListState } diff --git a/src/SettingsState.elm b/src/SettingsState.elm index 344b7f59..29867857 100644 --- a/src/SettingsState.elm +++ b/src/SettingsState.elm @@ -17,7 +17,7 @@ module SettingsState exposing ) import BoardConfig exposing (BoardConfig) -import DragAndDrop.BeaconPosition as BeaconPosition exposing (BeaconPosition) +import DragAndDrop.BeaconPosition exposing (BeaconPosition) import GlobalSettings exposing (GlobalSettings) import SafeZipper exposing (SafeZipper) import Settings exposing (Settings) diff --git a/tests/DragAndDrop/BeaconPositionTests.elm b/tests/DragAndDrop/BeaconPositionTests.elm index e5ea015c..1f620121 100644 --- a/tests/DragAndDrop/BeaconPositionTests.elm +++ b/tests/DragAndDrop/BeaconPositionTests.elm @@ -3,7 +3,6 @@ module DragAndDrop.BeaconPositionTests exposing (suite) import DragAndDrop.BeaconPosition as BeaconPosition exposing (BeaconPosition(..)) import Expect import Helpers.DecodeHelpers as DecodeHelpers -import Json.Decode as JD import Json.Encode as JE import Test exposing (..) diff --git a/tests/DragAndDrop/DragTrackerTests.elm b/tests/DragAndDrop/DragTrackerTests.elm index d950fe4f..88c67359 100644 --- a/tests/DragAndDrop/DragTrackerTests.elm +++ b/tests/DragAndDrop/DragTrackerTests.elm @@ -105,6 +105,7 @@ moveDragable = [ test "does nothing if in NotDragging state" <| \() -> let + dragData : DragData.DragData dragData = { dragType = "aDragType" , dragAction = DragData.Move @@ -120,6 +121,7 @@ moveDragable = , test "moves into the Dragging state if it was Waiting" <| \() -> let + dragData : DragData.DragData dragData = { dragType = "aDragType" , dragAction = DragData.Move @@ -129,6 +131,7 @@ moveDragable = , beacons = [] } + clientData : DragTracker.ClientData clientData = { uniqueId = "an id" , clientPos = { x = 0, y = 1 } @@ -151,6 +154,7 @@ moveDragable = , test "updates clientPos, offset and dragType if it was already Dragging" <| \() -> let + dragData : DragData.DragData dragData = { dragType = "aDragType" , dragAction = DragData.Move @@ -159,12 +163,6 @@ moveDragable = , draggedNodeRect = { x = 2, y = 3, width = 4, height = 5 } , beacons = [] } - - clientData = - { uniqueId = "an id" - , clientPos = { x = 0, y = 1 } - , offsetPos = { x = 1, y = 2 } - } in DragTracker.Dragging { uniqueId = "an id" @@ -206,6 +204,7 @@ waitForDrag = [ test "is in the waiting state" <| \() -> let + clientData : DragTracker.ClientData clientData = { uniqueId = "an id" , clientPos = { x = 0, y = 1 } @@ -217,6 +216,7 @@ waitForDrag = , test "it is not dragging" <| \() -> let + clientData : DragTracker.ClientData clientData = { uniqueId = "an id" , clientPos = { x = 0, y = 1 } diff --git a/tests/SessionTests.elm b/tests/SessionTests.elm index 21131867..4d303610 100644 --- a/tests/SessionTests.elm +++ b/tests/SessionTests.elm @@ -3,7 +3,7 @@ module SessionTests exposing (suite) import BoardConfig import DataviewTaskCompletion import DragAndDrop.DragData as DragData -import DragAndDrop.DragTracker as DragTracker exposing (DragTracker) +import DragAndDrop.DragTracker as DragTracker import Expect import Filter import GlobalSettings @@ -173,6 +173,7 @@ waitForDrag = [ test "puts the dragTracker in Waiting state" <| \() -> let + clientData : DragTracker.ClientData clientData = { uniqueId = "an id" , clientPos = { x = 0, y = 1 } @@ -192,6 +193,7 @@ moveDragable = [ test "puts the dragTracker in Dragging state" <| \() -> let + dragData : DragData.DragData dragData = { dragType = "aDragType" , dragAction = DragData.Move @@ -201,6 +203,7 @@ moveDragable = , beacons = [] } + clientData : DragTracker.ClientData clientData = { uniqueId = "an id" , clientPos = { x = 0, y = 1 } @@ -263,6 +266,7 @@ stopTrackingDragable = [ test "puts the dragTracker in Dragging state" <| \() -> let + dragData : DragData.DragData dragData = { dragType = "aDragType" , dragAction = DragData.Move @@ -272,6 +276,7 @@ stopTrackingDragable = , beacons = [] } + clientData : DragTracker.ClientData clientData = { uniqueId = "an id" , clientPos = { x = 0, y = 1 } From 5e4fe668f1a183d1c21223655d270219f8438b51 Mon Sep 17 00:00:00 2001 From: roovo Date: Sat, 18 Nov 2023 11:28:04 +0000 Subject: [PATCH 10/12] DndSettings: update TODO --- TODO.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/TODO.md b/TODO.md index 4249a86f..63b2187a 100644 --- a/TODO.md +++ b/TODO.md @@ -1,7 +1,5 @@ -- enable reorder boards on settings page too +- why isn't grab cursor working over "draggables"? - tidy typescript -- tidy elm - - can I animate tab moving so it isn't instantaneous? - touch events - iPad ?? From 6f420503bf5cf7031a7d66939d21096d54973171 Mon Sep 17 00:00:00 2001 From: roovo Date: Sat, 18 Nov 2023 11:29:06 +0000 Subject: [PATCH 11/12] DndSettings: update README --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 764aed93..35f33ae0 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,8 @@ An [Obsidian](https://obsidian.md/) plugin to make working with tasks a pleasure - Tag based (uses `#tags` to define your boards). ## New -- Board reordering - drag and drop the tab headers +- Board reordering + - drag and drop tab headers or board names in the settings dialog - Improved styling of tab headers (consistent with obsidian) ![date based board screenshot](/images/dateBoard.png?raw=true) From 189d7d115673a6f6d83085a1526a95049d19155d Mon Sep 17 00:00:00 2001 From: roovo Date: Sat, 18 Nov 2023 11:36:18 +0000 Subject: [PATCH 12/12] DndSettings: remove console log degugging --- typescript/view.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/typescript/view.ts b/typescript/view.ts index 91a70473..cbd16e81 100644 --- a/typescript/view.ts +++ b/typescript/view.ts @@ -342,8 +342,6 @@ export class CardBoardView extends ItemView { document.addEventListener("mousemove", maybeDragMove); document.addEventListener("mouseup", stopAwaitingDrag); - console.log("tracking " + beaconType); - function maybeDragMove(moveEvent: MouseEvent) { const dragDistance = distance({ x: data.clientPos.x, y: data.clientPos.y}, coords(moveEvent)); @@ -379,8 +377,6 @@ export class CardBoardView extends ItemView { const ribbon = document.getElementsByClassName("workspace-ribbon")[0]; const leftSplit = document.getElementsByClassName("workspace-split")[0]; - console.log("dragEvent " + dragAction); - if ((ribbon instanceof HTMLElement) && (leftSplit instanceof HTMLElement) && (draggedElement instanceof HTMLElement)) {