-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
20 changed files
with
216 additions
and
239 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 |
|---|---|---|
| @@ -1,52 +1,35 @@ | ||
| // If you want to use Phoenix channels, run `mix help phx.gen.channel` | ||
| // to get started and then uncomment the line below. | ||
| // import "./user_socket.js" | ||
|
|
||
| // You can include dependencies in two ways. | ||
| // | ||
| // The simplest option is to put them in assets/vendor and | ||
| // import them using relative paths: | ||
| // | ||
| // import "../vendor/some-package.js" | ||
| // | ||
| // Alternatively, you can `npm install some-package --prefix assets` and import | ||
| // them using a path starting with the package name: | ||
| // | ||
| // import "some-package" | ||
| // | ||
| import React from "react"; | ||
| import {createRoot} from "react-dom/client"; | ||
| import AppContainer from "./components/app-container"; | ||
| const reactAppContainer = document.getElementById("react-app-container"); | ||
| const root = createRoot(reactAppContainer); | ||
| root.render(<AppContainer />); | ||
|
|
||
| // // Establish Phoenix Socket and LiveView configuration. | ||
| // Include phoenix_html to handle method=PUT/DELETE in forms and buttons. | ||
| import "phoenix_html"; | ||
| // Establish Phoenix Socket and LiveView configuration. | ||
| import {Socket} from "phoenix"; | ||
| import {LiveSocket} from "phoenix_live_view"; | ||
| import topbar from "../vendor/topbar"; | ||
| // import "phoenix_html"; | ||
| // import {Socket} from "phoenix"; | ||
| // import {LiveSocket} from "phoenix_live_view"; | ||
| // import topbar from "../vendor/topbar"; | ||
|
|
||
| let csrfToken = document | ||
| .querySelector("meta[name='csrf-token']") | ||
| .getAttribute("content"); | ||
| let liveSocket = new LiveSocket("/live", Socket, { | ||
| longPollFallbackMs: 2500, | ||
| params: {_csrf_token: csrfToken}, | ||
| }); | ||
| // let csrfToken = document | ||
| // .querySelector("meta[name='csrf-token']") | ||
| // .getAttribute("content"); | ||
| // let liveSocket = new LiveSocket("/live", Socket, { | ||
| // longPollFallbackMs: 2500, | ||
| // params: {_csrf_token: csrfToken}, | ||
| // }); | ||
|
|
||
| // Show progress bar on live navigation and form submits | ||
| topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"}); | ||
| window.addEventListener("phx:page-loading-start", (_info) => topbar.show(300)); | ||
| window.addEventListener("phx:page-loading-stop", (_info) => topbar.hide()); | ||
| // // Show progress bar on live navigation and form submits | ||
| // topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"}); | ||
| // window.addEventListener("phx:page-loading-start", (_info) => topbar.show(300)); | ||
| // window.addEventListener("phx:page-loading-stop", (_info) => topbar.hide()); | ||
|
|
||
| // connect if there are any LiveViews on the page | ||
| liveSocket.connect(); | ||
| // // connect if there are any LiveViews on the page | ||
| // liveSocket.connect(); | ||
|
|
||
| // expose liveSocket on window for web console debug logs and latency simulation: | ||
| // >> liveSocket.enableDebug() | ||
| // >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session | ||
| // >> liveSocket.disableLatencySim() | ||
| window.liveSocket = liveSocket; | ||
|
|
||
| import React from "react"; | ||
| import {createRoot} from "react-dom/client"; | ||
| import AppRoot from "./components/app-root"; | ||
| const reactAppContainer = document.getElementById("react-app-container"); | ||
| const root = createRoot(reactAppContainer); | ||
| root.render(<AppRoot />); | ||
| // // expose liveSocket on window for web console debug logs and latency simulation: | ||
| // // >> liveSocket.enableDebug() | ||
| // // >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session | ||
| // // >> liveSocket.disableLatencySim() | ||
| // window.liveSocket = liveSocket; |
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
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 was deleted.
Oops, something went wrong.
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,84 @@ | ||
| import React, {FC} from "react"; | ||
| import { | ||
| DRAWING_MODE_ICONS, | ||
| DrawingMode, | ||
| getDrawingModeIcon, | ||
| } from "../drawing/types"; | ||
| import {useAppStore} from "../store/store"; | ||
| import {Button} from "./ui/button"; | ||
| import {LucideIcon} from "lucide-react"; | ||
| import {cn} from "./ui/utils"; | ||
|
|
||
| export type ModeSelectorProps = {}; | ||
|
|
||
| const ToolbarButton: FC<{ | ||
| icon: LucideIcon; | ||
| isSelected?: boolean; | ||
| onClick: () => void; | ||
| }> = ({icon: Icon, isSelected, onClick}) => { | ||
| return ( | ||
| <Button | ||
| className={cn("border bg-gray-400 hover:bg-gray-600 transition-colors", { | ||
| "bg-gray-700": isSelected, | ||
| shadow: isSelected, | ||
| })} | ||
| size="icon" | ||
| onClick={onClick} | ||
| > | ||
| {Icon ? <Icon size="16px" /> : null} | ||
| </Button> | ||
| ); | ||
| }; | ||
|
|
||
| export const ToolbarContainer: FC<ModeSelectorProps> = (props) => { | ||
| const drawingMode = useAppStore((state) => state.mode); | ||
| const setDrawingMode = useAppStore((state) => state.setDrawingMode); | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-1"> | ||
| {Object.keys(DrawingMode).map((mode) => { | ||
| return ( | ||
| <ToolbarButton | ||
| key={mode} | ||
| icon={getDrawingModeIcon(DrawingMode[mode])} | ||
| isSelected={DrawingMode[mode] === drawingMode} | ||
| onClick={() => setDrawingMode(DrawingMode[mode])} | ||
| /> | ||
| ); | ||
| })} | ||
| </div> | ||
|
|
||
| // <DropdownMenu> | ||
| // <DropdownMenuTrigger asChild> | ||
| // <div className="flex flex-row gap-2 items-center"> | ||
| // <Button variant="default"> | ||
| // <HamburgerMenuIcon /> | ||
| // </Button> | ||
| // <div className="font-sm">{drawingMode}</div> | ||
| // </div> | ||
| // </DropdownMenuTrigger> | ||
| // <DropdownMenuContent className="w-56" align="start"> | ||
| // <DropdownMenuLabel>Drawing Mode</DropdownMenuLabel> | ||
| // <DropdownMenuSeparator /> | ||
| // <DropdownMenuGroup> | ||
| // {Object.keys(DrawingMode).map((mode) => ( | ||
| // <DropdownMenuItem | ||
| // key={mode} | ||
| // onClick={() => setDrawingMode(DrawingMode[mode])} | ||
| // > | ||
| // {DrawingMode[mode]} | ||
| // <DropdownMenuShortcut> | ||
| // {KEYSTROKES_BY_MODE[DrawingMode[mode]]} | ||
| // </DropdownMenuShortcut> | ||
| // </DropdownMenuItem> | ||
| // ))} | ||
| // </DropdownMenuGroup> | ||
| // <DropdownMenuSeparator /> | ||
| // <DropdownMenuItem disabled> | ||
| // Pan the map | ||
| // <DropdownMenuShortcut>Space + Drag</DropdownMenuShortcut> | ||
| // </DropdownMenuItem> | ||
| // </DropdownMenuContent> | ||
| // </DropdownMenu> | ||
| ); | ||
| }; |
This file was deleted.
Oops, something went wrong.
File renamed without changes.
Oops, something went wrong.