mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-10 20:11:49 +00:00
Tanish Manku
ac0c7b2210
Two PageScene-only divergences from how the working pages
(PageDraw / PageImage / PageVideo) handle the same upload modals:
1. `handleOverlayClick` on the top/bottom controls overlays called
`event.stopPropagation()` for every click that bubbled through
them. Modals rendered as JSX children of `Controls3D` (the
upload-3D / upload-image / upload-splat dialogs) are
React-tree descendants even though `Modal`'s `Dialog.Portal`
puts them at `document.body` in the DOM. React synthetic
stopPropagation calls native `Event.stopPropagation()`, which
silences `react-drag-drop-files`'s native `addEventListener("click", u)`
on the file-input label — so clicking the drop zone never opens
the OS file picker.
Narrow the handler to `event.target === event.currentTarget` so
it only fires on the transparent overlay area itself, never on
bubbles from children. The original "control buttons don't
interact with canvas" intent is preserved without the side
effect — the canvas listener is bound to the canvas element only,
so clicks on overlay siblings never reach it regardless.
2. `tabIndex={0}` + `outline: none` on the editor canvas. Added in
`61c4936c29` "so [the canvas] can receive keyboard focus," but
`useViewportKeyboard` listens at `document` (not on canvas) so
the focus isn't actually required. Other pages don't make their
canvas focusable; remove for parity.
Frontend
This is an nx monorepo that can contain multiple apps and shared libraries.
All commands to run these projects are performed from this directory.
Install dependencies
npm install
Editor2d
Run dev server:
nx dev editor2d
artcraft
Run dev server:
nx dev artcraft
call when starting on main or a new branch:
./clean_modules
The names for @frontend and @storyteller come from the package.json file in the libs folder.
import { Login } from "@frontend/login";
import { api } from "@storyteller/api";
For shared UI components, import from @storyteller/ui-[componentname].
import { Button } from "@storyteller/ui-button";
import { Modal } from "@storyteller/ui-modal";
building:
npx nx build artcraft
npx nx build editor2d
dev:
npx nx dev artcraft
npx nx dev editor2d
# component build
1.
npx nx g @nx/react:library libs/components/toaster --import-path=@storyteller/ui-toaster --bundler=vite
npm install
2.import it first in code
3.nx sync
4.nx build
or
# frontend build
in frontend folder
% nx build -project type
% nx build artcraft
% nx dev artcraft