electron-rare/lego-builder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adds : global state

Browse Source
This commit is contained in:
bhushan6
2023-08-13 21:10:35 +05:30
parent 4784eea0ac
commit 2c961e18c2
12 changed files with 186 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+117
View File
@@ -12,6 +12,7 @@
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.4",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-menubar": "^1.0.3",
"@radix-ui/react-slider": "^1.1.2",
"@radix-ui/react-toggle-group": "^1.0.4",
"@react-three/drei": "^9.80.2",
@@ -1302,6 +1303,78 @@
}
}
},
"node_modules/@radix-ui/react-menu": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.5.tgz",
"integrity": "sha512-Gw4f9pwdH+w5w+49k0gLjN0PfRDHvxmAgG16AbyJZ7zhwZ6PBHKtWohvnSwfusfnK3L68dpBREHpVkj8wEM7ZA==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.1",
"@radix-ui/react-collection": "1.0.3",
"@radix-ui/react-compose-refs": "1.0.1",
"@radix-ui/react-context": "1.0.1",
"@radix-ui/react-direction": "1.0.1",
"@radix-ui/react-dismissable-layer": "1.0.4",
"@radix-ui/react-focus-guards": "1.0.1",
"@radix-ui/react-focus-scope": "1.0.3",
"@radix-ui/react-id": "1.0.1",
"@radix-ui/react-popper": "1.1.2",
"@radix-ui/react-portal": "1.0.3",
"@radix-ui/react-presence": "1.0.1",
"@radix-ui/react-primitive": "1.0.3",
"@radix-ui/react-roving-focus": "1.0.4",
"@radix-ui/react-slot": "1.0.2",
"@radix-ui/react-use-callback-ref": "1.0.1",
"aria-hidden": "^1.1.1",
"react-remove-scroll": "2.5.5"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-menubar": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.0.3.tgz",
"integrity": "sha512-GqjdxzYCjjKhcgEODDP8SrYfbWNh/Hm3lyuFkP5Q5IbX0QfXklLF1o1AqA3oTV2kulUgN/kOZVS92hIIShEgpA==",
"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.1",
"@radix-ui/react-collection": "1.0.3",
"@radix-ui/react-compose-refs": "1.0.1",
"@radix-ui/react-context": "1.0.1",
"@radix-ui/react-direction": "1.0.1",
"@radix-ui/react-id": "1.0.1",
"@radix-ui/react-menu": "2.0.5",
"@radix-ui/react-primitive": "1.0.3",
"@radix-ui/react-roving-focus": "1.0.4",
"@radix-ui/react-use-controllable-state": "1.0.1"
},
"peerDependencies": {
"@types/react": "*",
"@types/react-dom": "*",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
}
}
},
"node_modules/@radix-ui/react-popper": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.2.tgz",
@@ -6272,6 +6345,50 @@
"@radix-ui/react-use-layout-effect": "1.0.1"
}
},
"@radix-ui/react-menu": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.0.5.tgz",
"integrity": "sha512-Gw4f9pwdH+w5w+49k0gLjN0PfRDHvxmAgG16AbyJZ7zhwZ6PBHKtWohvnSwfusfnK3L68dpBREHpVkj8wEM7ZA==",
"requires": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.1",
"@radix-ui/react-collection": "1.0.3",
"@radix-ui/react-compose-refs": "1.0.1",
"@radix-ui/react-context": "1.0.1",
"@radix-ui/react-direction": "1.0.1",
"@radix-ui/react-dismissable-layer": "1.0.4",
"@radix-ui/react-focus-guards": "1.0.1",
"@radix-ui/react-focus-scope": "1.0.3",
"@radix-ui/react-id": "1.0.1",
"@radix-ui/react-popper": "1.1.2",
"@radix-ui/react-portal": "1.0.3",
"@radix-ui/react-presence": "1.0.1",
"@radix-ui/react-primitive": "1.0.3",
"@radix-ui/react-roving-focus": "1.0.4",
"@radix-ui/react-slot": "1.0.2",
"@radix-ui/react-use-callback-ref": "1.0.1",
"aria-hidden": "^1.1.1",
"react-remove-scroll": "2.5.5"
}
},
"@radix-ui/react-menubar": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.0.3.tgz",
"integrity": "sha512-GqjdxzYCjjKhcgEODDP8SrYfbWNh/Hm3lyuFkP5Q5IbX0QfXklLF1o1AqA3oTV2kulUgN/kOZVS92hIIShEgpA==",
"requires": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.1",
"@radix-ui/react-collection": "1.0.3",
"@radix-ui/react-compose-refs": "1.0.1",
"@radix-ui/react-context": "1.0.1",
"@radix-ui/react-direction": "1.0.1",
"@radix-ui/react-id": "1.0.1",
"@radix-ui/react-menu": "2.0.5",
"@radix-ui/react-primitive": "1.0.3",
"@radix-ui/react-roving-focus": "1.0.4",
"@radix-ui/react-use-controllable-state": "1.0.1"
}
},
"@radix-ui/react-popper": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.2.tgz",
package.json
+1
View File
@@ -14,6 +14,7 @@
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-dialog": "^1.0.4",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-menubar": "^1.0.3",
"@radix-ui/react-slider": "^1.1.2",
"@radix-ui/react-toggle-group": "^1.0.4",
"@react-three/drei": "^9.80.2",
src/components/3D/BrickOutline.jsx
+5 -2
View File
@@ -2,7 +2,7 @@
/* eslint-disable no-unused-vars */
/* eslint-disable react/prop-types */
/* eslint-disable react/display-name */
import { useSelect } from ".";
// import { useSelect } from ".";
import React, { useLayoutEffect, useMemo, useRef } from "react";
import {
createGeometry,
@@ -11,6 +11,7 @@ import {
outlineWidth,
} from "../../utils";
import { BackSide, Object3D } from "three";
import { useStore } from "../../store";
const dummy = new Object3D();
@@ -81,7 +82,9 @@ const OutlineMesh = ({ meshesData }) => {
};
export const BrickOutline = () => {
const selected = useSelect().map((sel) => sel.userData);
const selected = useStore((state) => state.selectedBricks).map(
(sel) => sel.userData
);
const selectedMeshes = useMemo(() => {
const meshesAccrodingToType = {};
src/components/3D/ChangeColor.jsx
+4 -2
View File
@@ -3,10 +3,12 @@
/* eslint-disable react/prop-types */
/* eslint-disable react/display-name */
import React, { useDeferredValue, useEffect, useRef } from "react";
import { useSelect } from ".";
import { useStore } from "../../store";
export const ChangeColor = ({ color, setBricks }) => {
const selected = useSelect().map((sel) => sel.userData.uID);
const selected = useStore((state) => state.selectedBricks).map(
(sel) => sel.userData.uID
);
const prevColor = useRef(color);
src/components/3D/ControlsWrapper.jsx
+1 -2
View File
@@ -2,9 +2,8 @@
/* eslint-disable no-unused-vars */
/* eslint-disable react/prop-types */
/* eslint-disable react/display-name */
import React, { useEffect, useRef } from "react";
import React, { useRef } from "react";
import { useThree } from "@react-three/fiber";
import { useControls } from "leva";
import { OrbitControls } from "@react-three/drei";
export const ControlsWrapper = () => {
src/components/3D/DeleteBrick.jsx
+10 -3
View File
@@ -2,13 +2,16 @@
/* eslint-disable no-unused-vars */
/* eslint-disable react/prop-types */
/* eslint-disable react/display-name */
import { useSelect, useSetSelection } from ".";
// import { useSelect, useSetSelection } from ".";
import React from "react";
import { useDeleteShortcut } from "../../utils";
import { useStore } from "../../store";
export const DeleteBrick = ({ setBricks }) => {
const selected = useSelect().map((sel) => sel.userData.uID);
const setSelection = useSetSelection();
const selected = useStore((state) => state.selectedBricks).map(
(sel) => sel.userData.uID
);
const setSelection = useStore((state) => state.setSelectedBricks);
const onDelete = () => {
setSelection({});
@@ -16,5 +19,9 @@ export const DeleteBrick = ({ setBricks }) => {
useDeleteShortcut(selected, setBricks, onDelete);
const bricks = useStore((state) => state.bricks);
console.log(bricks, ":::::::");
return <></>;
};
src/components/3D/Scene.jsx
+12 -11
View File
@@ -9,7 +9,6 @@ import {
BrickOutline,
DeleteBrick,
Select,
useSetSelection,
} from ".";
import { Vector3, Box3 } from "three";
import {
@@ -25,7 +24,9 @@ import { useStore } from "../../store";
import { BorderPlane } from "./BorderPlane";
export const Scene = () => {
const [bricks, setBricks] = useState([]);
// const [bricks, setBricks] = useState([]);
const bricks = useStore((state) => state.bricks);
const setBricks = useStore((state) => state.setBricks);
const bricksBoundBox = useRef([]);
@@ -43,15 +44,15 @@ export const Scene = () => {
const color = useStore((state) => state.color);
// useAnchorShorcuts(anchorX, anchorZ, set);
const setSelection = useSetSelection();
// const setSelection = useStore(state => state.setSelectedBricks)
function undoAddedBrick() {
setSelection({}); // this should unselect the bricks but Doesn't work for now because of undo is button within leva
setBricks((prevBricks) => {
prevBricks.pop();
return [...prevBricks];
});
}
// function undoAddedBrick() {
// setSelection({}); // this should unselect the bricks but Doesn't work for now because of undo is button within leva
// setBricks((prevBricks) => {
// prevBricks.pop();
// return [...prevBricks];
// });
// }
const addBrick = (e) => {
e.stopPropagation();
@@ -179,7 +180,7 @@ export const Scene = () => {
return (
<>
<color attach="background" args={["#202025"]} />
<Select box multiple onChange={console.log}>
<Select box multiple>
{bricks.map((b, i) => {
return (
<Brick
src/components/3D/Select/index.jsx
+13 -33
View File
@@ -9,9 +9,6 @@ import { shallow } from "zustand/shallow";
import { useStore } from "../../../store";
import { EDIT_MODE } from "../../../utils";
const context = React.createContext([]);
const dispatchContext = React.createContext(() => {});
export function Select({
box,
multiple,
@@ -30,38 +27,34 @@ export function Select({
const enable = mode === EDIT_MODE;
const [active, dispatch] = React.useReducer((state, { object, shift }) => {
if (object === undefined) return [];
else if (Array.isArray(object)) return object;
else if (!shift) return state[0] === object ? [] : [object];
else if (state.includes(object)) return state.filter((o) => o !== object);
else return [object, ...state];
}, []);
const setSelectedBricks = useStore((state) => state.setSelectedBricks);
React.useEffect(() => {
if (downed) onChange?.(active);
else onChangePointerUp?.(active);
}, [active, downed]);
// React.useEffect(() => {
// if (downed) onChange?.(active);
// else onChangePointerUp?.(active);
// }, [active, downed]);
const onClick = React.useCallback(
(e) => {
e.stopPropagation();
if (!enable) return;
dispatch({
setSelectedBricks({
object: customFilter([e.object])[0],
shift: multiple && e.shiftKey,
});
},
[enable]
[enable, multiple]
);
React.useEffect(() => {
if (!enable) {
dispatch({});
setSelectedBricks({});
}
}, [enable]);
const onPointerMissed = React.useCallback((e) => dispatch({}), []);
const onPointerMissed = React.useCallback((e) => {
setSelectedBricks({});
}, []);
const ref = React.useRef(null);
@@ -166,7 +159,6 @@ export function Select({
pos.copy(camera.position).add(vec.multiplyScalar(distance));
console.log(pos, "start");
onSelectStart(event);
prepareRay(event, selBox.startPoint);
}
@@ -183,7 +175,7 @@ export function Select({
.filter((o) => o.isMesh);
if (!shallow(allSelected, previous)) {
previous = allSelected;
dispatch({ object: customFilter(allSelected) });
setSelectedBricks({ object: customFilter(allSelected) });
}
}
}
@@ -214,19 +206,7 @@ export function Select({
onPointerMissed={onPointerMissed}
{...props}
>
<context.Provider value={active}>
<dispatchContext.Provider value={dispatch}>
{children}
</dispatchContext.Provider>
</context.Provider>
{children}
</group>
);
}
export function useSelect() {
return React.useContext(context);
}
export function useSetSelection() {
return React.useContext(dispatchContext);
}
src/components/3D/Translate.jsx
-35
View File
@@ -1,35 +0,0 @@
/* eslint-disable react/no-unknown-property */
/* eslint-disable no-unused-vars */
/* eslint-disable react/prop-types */
/* eslint-disable react/display-name */
import React, { useEffect } from "react";
import { useSelect } from ".";
import { useControls } from "leva";
import { Group } from "three";
const group = new Group();
export const Translate = () => {
const [{ Translate }, set] = useControls(() => ({
Translate: false,
}));
const selected = useSelect();
useEffect(() => {
const keypress = (e) => {
if (!Translate) return;
console.log(e.key);
if (e.key === "6") {
selected.forEach((mesh) => group.add(mesh));
console.log(group);
}
};
document.addEventListener("keypress", keypress);
return () => document.removeEventListener("keypress", keypress);
}, [Translate, selected]);
return <></>;
};
src/components/3D/index.js
+1 -2
View File
@@ -5,7 +5,6 @@ export { DeleteBrick } from "./DeleteBrick";
export { LegoRoom } from "./LegoRoom";
export { Lights } from "./Lights";
export { Scene } from "./Scene";
export { Translate } from "./Translate";
export { Workspace } from "./Workspace";
export { Brick } from "./Brick";
export { Select, useSelect, useSetSelection } from "./Select/index";
export { Select } from "./Select/index";
src/store/index.js
+20
View File
@@ -22,4 +22,24 @@ export const useStore = create((set) => ({
color: "#ff0000",
setColor: (newColor) => set({ color: newColor }),
selectedBricks: [],
setSelectedBricks: ({ object, shift }) =>
set((state) => {
if (object === undefined) return { selectedBricks: [] };
else if (Array.isArray(object)) return { selectedBricks: object };
else if (!shift)
return state.selectedBricks[0] === object
? { selectedBricks: [] }
: { selectedBricks: [object] };
else if (state.selectedBricks.includes(object))
return {
selectedBricks: state.selectedBricks.filter((o) => o !== object),
};
else return { selectedBricks: [object, ...state.selectedBricks] };
}),
bricks: [],
setBricks: (getBricks) =>
set((state) => ({ bricks: getBricks(state.bricks) })),
}));
src/utils/helpers.js
+2 -2
View File
@@ -9,7 +9,7 @@ export function CSSToHex(cssColor) {
export function getMeasurementsFromDimensions({ x, y, z }) {
return {
width: base * x,
height: base * y || base,
height: base * y || (base * 2) / 1.5,
depth: base * z,
};
}
@@ -34,7 +34,7 @@ export function createGeometry({
for (let j = 0; j < dimensions.z; j++) {
const cylinder = new CylinderGeometry(knobDim, knobDim, knobDim, 20);
const x = base * i - ((dimensions.x - 1) * base) / 2;
const y = base - 12.5;
const y = base / 1.5;
const z = base * j - ((dimensions.z - 1) * base) / 2;
cylinder.translate(x, y, z);
geometries.push(cylinder);