mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-06 10:11:31 +00:00
Tanish Manku
8bb8c186a3
- Add `nativeWidth`/`nativeHeight` to `Model3DParams` so the 3D overlay always renders at the model's original undistorted dimensions. When a node is stretched via the Konva transformer, the overlay CSS-scales the native framebuffer to fill the stretched frame, giving a live stretch preview. The committed PNG is at native size; Konva applies the visual stretch, preserving it across re-edits. - Fix `renderer.setSize(..., false)` so Three.js does not overwrite the canvas inline CSS, allowing Tailwind `h-full w-full` to control display size and produce the stretch effect. - Extract "Edit 3D" button into an isolated `memo`-wrapped `Edit3DButton` component that owns its own `forceUpdate` state and Konva event listeners (stage pan/zoom + transformer drag). Konva events now only re-render the small button element, not the entire PageDraw tree. - Button position reads directly from the live Konva node via `stage.findOne()` so it tracks transformer handle movement in real-time, before `onTransformEnd` bakes the values back into the store.
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