-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add movable building block short cut dialogue ✨
- Loading branch information
1 parent
a64b7bd
commit db3f76b
Showing
7 changed files
with
161 additions
and
250 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| module LocalStorage.ModalPositions | ||
|
|
||
| open Feliz | ||
| open Fable.Core.JsInterop | ||
|
|
||
| type Position = { | ||
| X: int | ||
| Y: int | ||
| } with | ||
| static member init () = { | ||
| X = 0 | ||
| Y = 0 | ||
| } | ||
|
|
||
| open Fable.SimpleJson | ||
|
|
||
| [<RequireQualifiedAccess>] | ||
| module LocalStorage = | ||
|
|
||
| open Browser | ||
|
|
||
| let [<Literal>] private DataTheme_Key_Prefix = "ModalPosition_" | ||
|
|
||
| let write(modalName:string, dt: Position) = | ||
| let s = Json.serialize dt | ||
| WebStorage.localStorage.setItem(DataTheme_Key_Prefix + modalName, s) | ||
|
|
||
| let load(modalName:string) = | ||
| let key = DataTheme_Key_Prefix + modalName | ||
| try | ||
| WebStorage.localStorage.getItem(key) | ||
| |> Json.parseAs<Position> | ||
| |> Some | ||
| with | ||
| |_ -> | ||
| WebStorage.localStorage.removeItem(key) | ||
| printfn "Could not find %s" key | ||
| None | ||
|
|
||
| let [<Literal>] BuildingBlockModal = "BuildingBlock" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| namespace MainComponents | ||
|
|
||
| open Feliz | ||
| open Feliz.Bulma | ||
| open Browser.Types | ||
|
|
||
| open LocalStorage.ModalPositions | ||
|
|
||
| module InitExtensions = | ||
|
|
||
| type Position with | ||
| static member initBuildingBlock() = | ||
| match LocalStorage.load LocalStorage.ModalPositions.BuildingBlockModal with | ||
| | Some p -> p | ||
| | None -> Position.init() | ||
|
|
||
| open InitExtensions | ||
|
|
||
| type Modals = | ||
|
|
||
| [<ReactComponent>] | ||
| static member BuildingBlock (model, dispatch, rmv: MouseEvent -> unit) = | ||
| let position, setPosition = React.useState(Position.initBuildingBlock) | ||
| let startPosition, setStartPosition = React.useState(None) | ||
| let isMoving, setIsMoving = React.useState false | ||
| let element = React.useElementRef() | ||
| Bulma.modalCard [ | ||
| prop.ref element | ||
| prop.style [style.overflow.visible; style.top position.Y; style.left position.X; style.position.absolute] | ||
| prop.children [ | ||
| Bulma.modalCardHead [ | ||
| prop.onMouseDown(fun e -> | ||
| let x = e.clientX - element.current.Value.offsetLeft | ||
| let y = e.clientY - element.current.Value.offsetTop; | ||
| setStartPosition <| Some {X = int x; Y = int y} | ||
| setIsMoving true | ||
| ) | ||
| prop.onMouseMove(fun e -> | ||
| if isMoving then | ||
| log "move" | ||
| let maxX = Browser.Dom.window.innerWidth - element.current.Value.offsetWidth; | ||
| let tempX = int e.clientX - startPosition.Value.X | ||
| let newX = System.Math.Min(System.Math.Max(tempX,0),int maxX) | ||
| let maxY = Browser.Dom.window.innerHeight - element.current.Value.offsetHeight; | ||
| let tempY = int e.clientY - startPosition.Value.Y | ||
| let newY = System.Math.Min(System.Math.Max(tempY,0),int maxY) | ||
| setPosition {X = newX; Y = newY} | ||
| ) | ||
| prop.onMouseUp(fun _ -> | ||
| setStartPosition None | ||
| LocalStorage.write(BuildingBlockModal,position) | ||
| setIsMoving false | ||
| ) | ||
| prop.style [style.cursor.move] | ||
| prop.children [ | ||
| Bulma.modalCardTitle Html.none | ||
| Bulma.delete [ prop.onClick rmv ] | ||
| ] | ||
| ] | ||
| Bulma.modalCardBody [ | ||
| BuildingBlock.SearchComponent.Main model dispatch | ||
| ] | ||
| ] | ||
| ] | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.