0a45311f30
This PR adds support for Outer variants of each DropDirection. When calculating the drop direction, the cursor position is calculated relevant to the box over which it is hovering. The following diagram shows how drop directions are calculated. The colored in center is currently not supported, it is assigned to the top, bottom, left, right direction for now, though it will ultimately be its own distinct direction. ![IMG_3505](https://github.com/wavetermdev/thenextwave/assets/16651283/a7ea7387-b95d-4831-9e29-d3225b824c97) When an outer drop direction is provided for a move operation, if the reference node flexes in the same axis as the drop direction, the new node will be inserted at the same level as the parent of the reference node. If the reference node flexes in a different direction or the reference node does not have a grandparent, the operation will fall back to its non-Outer variant. This also removes some chatty debug statements, adds a blur to the currently-dragging node to indicate that it cannot be dropped onto, and simplifies the deriving of the layout state atom from the tab atom so there's no longer another intermediate derived atom for the layout node. This also adds rudimentary support for rendering custom preview images for any tile being dragged. Right now, this is a simple block containing the block ID, but this can be anything. This resolves an issue where letting React-DnD generate its own previews could take up to a half second, and would block dragging until complete. For Monaco, this was outright failing. It also fixes an issue where the tile layout could animate on first paint. Now, I use React Suspense to prevent the layout from displaying until all the children have loaded. |
||
---|---|---|
.storybook | ||
.vscode | ||
build | ||
cmd | ||
db | ||
frontend | ||
pkg | ||
public | ||
.editorconfig | ||
.gitignore | ||
.prettierignore | ||
.yarnrc.yml | ||
eslint.config.js | ||
go.mod | ||
go.sum | ||
main.go | ||
package.json | ||
prettier.config.js | ||
README.md | ||
Taskfile.yml | ||
tsconfig.json | ||
vite.config.ts | ||
vitest.config.ts | ||
yarn.lock |
The Next Wave
To build you need to have wails3 installed. You need to check out the repo, switch to the v3-alpha
branch, then install the wails3
command. you should also install the "task" command (wails3 uses a Taskfile.yml file).
Install task:
brew install go-task/tap/go-task
Install wails3:
git clone git@github.com:wailsapp/wails.git
cd wails
git checkout v3-alpha
cd v3/cmd/wails3
go install
To test if wails3 is installed correctly you can run wails3 doctor
(it should say "success" at the bottom).
Now, this directory must live as a sibling to thenextwave
repo (because we have a special replace directive in the go.mod file).
# move back to the *parent* directory of your wails clone
git clone git@github.com:wavetermdev/thenextwave.git
cd thenextwave
Now to run the dev version of the app:
wails3 dev
You should see the app!
Now to build a MacOS application:
task build
task create:app:bundle
now in your ./bin
directory you should see bin/NextWave
(a standalone executable), and you'll also see bin/NextWave.app
which is a MacOS application. You can run bin/NextWave
directly, or run the app using open bin/NextWave.app
(or click on it in the finder).