diff --git a/src/Main.elm b/src/Main.elm index 6e1492f..cde0dc2 100644 --- a/src/Main.elm +++ b/src/Main.elm @@ -8,12 +8,12 @@ import Array.Extra as Array import Browser import Browser.Dom exposing (focus, getViewport, Viewport) import Browser.Navigation exposing (Key) -import Browser.Events exposing (onMouseMove, onResize) +import Browser.Events exposing (onMouseMove, onMouseUp, onResize) import Html exposing (Attribute, button, div, h3, input, Html, section, text) import Html.Attributes exposing (class, id, style, value) import Html.Attributes.Extra as Attributes exposing (attributeIf) import Html.Extra exposing (viewMaybe) -import Html.Events exposing (onBlur, onClick, onInput, onMouseEnter) +import Html.Events exposing (onBlur, onClick, onInput, onMouseDown, onMouseEnter) import Html.Lazy exposing (lazy2) import Json.Decode as D import List exposing (map, singleton) @@ -43,6 +43,8 @@ type Msg | TileDeselected Int | HeldOverNewTile Int Int | NewMousePos Int Int + | StartDrag Int Int Tile Int Int + | StopDrag type alias Model = { columns: Array Column @@ -86,23 +88,23 @@ init flags url browserKey = ] |> Array.fromList , mousePos = (200, 200) - , heldTile = Just - { hoveredColumnIndex = 0 - , hoveredTileIndex = 0 - , tile = Tile "hello!" [] - } + , heldTile = Nothing } |> withoutCmd subscriptions : Model -> Sub Msg -subscriptions model = Sub.batch - [ if (isJust model.heldTile) - then onMouseMove <| - D.map2 NewMousePos - (D.field "pageX" D.int) - (D.field "pageY" D.int) - else Sub.none - ] +subscriptions model = + if (isJust model.heldTile) + then + Sub.batch + [ onMouseMove <| + D.map2 NewMousePos + (D.field "pageX" D.int) + (D.field "pageY" D.int) + , onMouseUp <| D.succeed StopDrag + ] + else Sub.none + view : Model -> Browser.Document Msg view {columns, heldTile, mousePos} = @@ -169,7 +171,7 @@ viewTile isTileHeld columnIndex tileIndex tile = ) , attributeIf isTileHeld (onMouseEnter <| HeldOverNewTile columnIndex tileIndex) ] - [ viewGrip + [ viewGrip columnIndex tileIndex tile , input [ value tile.text , onInput (SetTileText columnIndex tileIndex) @@ -186,13 +188,18 @@ viewTile isTileHeld columnIndex tileIndex tile = (map viewSticker tile.stickers) ] -viewGrip : Html any -viewGrip = +viewGrip : Int -> Int -> Tile -> Html Msg +viewGrip colIndx tileIndx tile = svg [ viewBox "0 0 103.4 103.4" , width "30" , height "30" , Svg.Attributes.class "drag-gripper" + , on "mousedown" <| ( + D.map2 (StartDrag colIndx tileIndx tile) + (D.field "pageX" D.int) + (D.field "pageY" D.int) + ) ] [ path [ d gripPath @@ -232,6 +239,23 @@ updateTileText : String -> Tile -> Tile updateTileText text tile = { tile | text = text } +removeTileFromColumn : Int -> Column -> Column +removeTileFromColumn tileIndex column = + { column | tiles = + Array.removeAt + tileIndex + column.tiles + } + +insertTileToColumn : Int -> Tile -> Column -> Column +insertTileToColumn tileIndex tile column = + { column | tiles = + Array.insertAt + tileIndex + tile + column.tiles + } + modTileInColumn : Int -> (Tile -> Tile) -> Column -> Column modTileInColumn tileIndex f column = { column | tiles = @@ -293,4 +317,32 @@ update msg model = case Debug.log "UPDATE" msg of |> withoutCmd NewMousePos x y -> { model | mousePos = (x, y) } - |> withoutCmd \ No newline at end of file + |> withoutCmd + StartDrag colIndx tileIndx tile mouseX mouseY -> + let + modelWithTileRemoved = + modColumnInPage colIndx + (removeTileFromColumn tileIndx) + model + in + { modelWithTileRemoved + | heldTile = Just + { hoveredColumnIndex = colIndx + , hoveredTileIndex = tileIndx + , tile = tile + } + , mousePos = (mouseX, mouseY) + } + |> withoutCmd + StopDrag -> + case model.heldTile of + Nothing -> model |> withoutCmd + Just {hoveredColumnIndex, hoveredTileIndex, tile} -> + let + modelWithTileInserted = + modColumnInPage hoveredColumnIndex + (insertTileToColumn hoveredTileIndex tile) + model + in + { modelWithTileInserted | heldTile = Nothing } + |> withoutCmd \ No newline at end of file