├── .eslintrc.js
├── .github
    ├── FUNDING.yml
    └── workflows
    │   ├── main.yml
    │   └── size.yml
├── .gitignore
├── .prettierrc
├── .storybook
    ├── index.globalcss
    ├── main.js
    └── preview.js
├── LICENSE
├── README.md
├── example
    ├── .env
    ├── .eslintcache
    ├── .gitignore
    ├── README.md
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── logo192.png
    │   ├── logo512.png
    │   ├── manifest.json
    │   └── robots.txt
    ├── src
    │   ├── App.tsx
    │   ├── index.css
    │   ├── index.tsx
    │   ├── react-app-env.d.ts
    │   ├── reportWebVitals.ts
    │   └── setupTests.ts
    ├── tsconfig.json
    └── yarn.lock
├── package.json
├── postcss.config.js
├── src
    ├── components
    │   ├── EditableProxy.tsx
    │   ├── Editor.tsx
    │   ├── EnvironmentPreview.tsx
    │   ├── PropertiesPanel.tsx
    │   ├── ProxyManager.tsx
    │   ├── ReferenceWindow.tsx
    │   ├── SceneOutlinePanel.tsx
    │   ├── TransformControls.tsx
    │   ├── TransformControlsModeSelect.tsx
    │   ├── TransformControlsSpaceSelect.tsx
    │   ├── UI.tsx
    │   ├── ViewportSettings.tsx
    │   ├── ViewportShadingSelect.tsx
    │   ├── ViewportShadingSettings.tsx
    │   ├── editable.tsx
    │   └── elements
    │   │   ├── Button.tsx
    │   │   ├── Checkbox.tsx
    │   │   ├── Code.tsx
    │   │   ├── CompactModeSelect.tsx
    │   │   ├── FormControl.tsx
    │   │   ├── FormLabel.tsx
    │   │   ├── Heading.tsx
    │   │   ├── IconButton.tsx
    │   │   ├── IdProvider.ts
    │   │   ├── Input.tsx
    │   │   ├── Legend.tsx
    │   │   ├── Modal.tsx
    │   │   ├── Popover.tsx
    │   │   ├── PortalManager.tsx
    │   │   ├── SettingsButton.tsx
    │   │   ├── Tooltip.tsx
    │   │   ├── VisuallyHidden.ts
    │   │   └── index.ts
    ├── index.tsx
    ├── store.ts
    ├── styles.css
    └── types
    │   └── index.d.ts
├── stories
    ├── Button.stories.tsx
    ├── Code.stories.tsx
    ├── CompactModeSelect.stories.tsx
    ├── Editor.stories.tsx
    ├── FormLabel.stories.tsx
    ├── Heading.stories.tsx
    ├── IconButton.stories.tsx
    ├── Input.stories.tsx
    ├── Legend.stories.tsx
    ├── Modal.stories.tsx
    ├── Popover.stories.tsx
    ├── SetingsButton.stories.tsx
    ├── Setup.tsx
    ├── Suitcase.tsx
    ├── Tooltip.stories.tsx
    ├── editableState.json
    └── public
    │   ├── equi.hdr
    │   ├── suitcase.gltf
    │   └── suzanne.glb
├── tailwind.config.js
├── test
    └── index.test.tsx
├── tsconfig.json
├── tsdx.config.js
└── yarn.lock


/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   extends: [
 3 |     'react-app',
 4 |     'prettier/@typescript-eslint',
 5 |   ],
 6 |   settings: {
 7 |     react: {
 8 |       version: 'detect',
 9 |     },
10 |   },
11 | };
12 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github: AndrewPrifer
2 | 


--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | name: CI
 2 | on: [push]
 3 | jobs:
 4 |   build:
 5 |     name: Build, lint, and test on Node ${{ matrix.node }} and ${{ matrix.os }}
 6 | 
 7 |     runs-on: ${{ matrix.os }}
 8 |     strategy:
 9 |       matrix:
10 |         node: ['10.x', '12.x', '14.x']
11 |         os: [ubuntu-latest, windows-latest, macOS-latest]
12 | 
13 |     steps:
14 |       - name: Checkout repo
15 |         uses: actions/checkout@v2
16 | 
17 |       - name: Use Node ${{ matrix.node }}
18 |         uses: actions/setup-node@v1
19 |         with:
20 |           node-version: ${{ matrix.node }}
21 | 
22 |       - name: Install deps and build (with cache)
23 |         uses: bahmutov/npm-install@v1
24 | 
25 |       - name: Lint
26 |         run: yarn lint
27 | 
28 |       - name: Test
29 |         run: yarn test --ci --coverage --maxWorkers=2
30 | 
31 |       - name: Build
32 |         run: yarn build
33 | 


--------------------------------------------------------------------------------
/.github/workflows/size.yml:
--------------------------------------------------------------------------------
 1 | name: size
 2 | on: [pull_request]
 3 | jobs:
 4 |   size:
 5 |     runs-on: ubuntu-latest
 6 |     env:
 7 |       CI_JOB_NUMBER: 1
 8 |     steps:
 9 |       - uses: actions/checkout@v1
10 |       - uses: andresz1/size-limit-action@v1
11 |         with:
12 |           github_token: ${{ secrets.GITHUB_TOKEN }}
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.log
2 | .DS_Store
3 | node_modules
4 | .cache
5 | dist
6 | 
7 | .idea
8 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "singleQuote": true
3 | }
4 | 


--------------------------------------------------------------------------------
/.storybook/index.globalcss:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   canvas {
 7 |     outline: none
 8 |   }
 9 | }
10 | 
11 | 
12 | 
13 | html,
14 | body,
15 | #root {
16 |     width: 100%;
17 |     height: 100%;
18 |     margin: 0;
19 |     padding: 0;
20 |     -webkit-touch-callout: none;
21 |     -webkit-user-select: none;
22 |     -khtml-user-select: none;
23 |     -moz-user-select: none;
24 |     -ms-user-select: none;
25 |     user-select: none;
26 |     overflow: hidden;
27 |     background-color: white;
28 | }
29 | 
30 | #root {
31 |     overflow: auto;
32 | }
33 | 
34 | .sb-show-main {
35 |     padding: 0 !important;
36 | }
37 | 
38 | .html-story-block {
39 |     color: white;
40 |     width: 120px;
41 |     position: relative;
42 |     margin-left: 100px;
43 | }
44 | 
45 | .html-story-block:before {
46 |     content: '';
47 |     display: block;
48 |     position: absolute;
49 | 
50 |     top: 50%;
51 |     left: -60px;
52 | 
53 |     width: 60px;
54 |     height: 1px;
55 |     background-color: white;
56 | }
57 | 


--------------------------------------------------------------------------------
/.storybook/main.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | function regexEqual(x, y) {
 4 |   return (
 5 |     x instanceof RegExp &&
 6 |     y instanceof RegExp &&
 7 |     x.source === y.source &&
 8 |     x.global === y.global &&
 9 |     x.ignoreCase === y.ignoreCase &&
10 |     x.multiline === y.multiline
11 |   );
12 | }
13 | 
14 | module.exports = {
15 |   stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
16 |   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
17 |   // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
18 |   typescript: {
19 |     check: true, // type-check stories during Storybook build
20 |   },
21 |   webpackFinal: async (config, { configType }) => {
22 |     let oldCssRule;
23 |     config.module.rules.forEach((rule) => {
24 |       if (regexEqual(rule.test, /\.css$/)) {
25 |         oldCssRule = { ...rule };
26 |         oldCssRule.use = [...rule.use];
27 |         rule.use.shift();
28 |         rule.use.unshift('to-string-loader');
29 |       }
30 |     });
31 | 
32 |     oldCssRule.test = /\.globalcss$/;
33 |     config.module.rules.push(oldCssRule);
34 | 
35 |     return config;
36 |   },
37 | };
38 | 


--------------------------------------------------------------------------------
/.storybook/preview.js:
--------------------------------------------------------------------------------
1 | import './index.globalcss';
2 | 
3 | // https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
4 | export const parameters = {
5 |   // https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args
6 |   actions: { argTypesRegex: '^on.*' },
7 | };
8 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Andrew Prifer
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React Three Editable
  2 | 
  3 | > ⚠️ React Three Editable is now part of [Theatre.js](https://github.com/theatre-js/theatre) and can be found on NPM as `@theatre/r3f`. The new project is functionally almost the same as this one, just with more features, regular maintenance and... animation tools! 🎉 Chances are your current r3e code will work without any modifications.
  4 | >
  5 | > For those that haven't heard the news, I'm now also working on Theatre.js, and `@theatre/r3f` will be receiving regular improvements and maintenance as an official Theatre.js extension.
  6 | >
  7 | > With that, however, this package (`react-three-editable`) is deprecated in favor of `@theatre/r3f`. I encourage you all to check it out at [Theatre.js](https://github.com/theatre-js/theatre) and file issues there!
  8 | 
  9 | React Three Editable is a library for React and react-three-fiber that lets you edit your scene in a visual editor while requiring minimal modifications to your r3f code. To get a quick idea of what it's all about, please take a look at this [codesandbox](https://codesandbox.io/s/ide-cream-demo-hcgcd).
 10 | 
 11 | **Here be dragons! 🐉** React Three Editable is relatively stable, however being pre-1.0.0 software, the API and the internal logic can drastically change at any time, without warning.
 12 | 
 13 | ## Quick start
 14 | 
 15 | ```
 16 | yarn add react-three-editable
 17 | ```
 18 | 
 19 | ```tsx
 20 | import React from 'react';
 21 | import { Canvas } from 'react-three-fiber';
 22 | import { editable as e, configure } from 'react-three-editable';
 23 | 
 24 | // Import your previously exported state
 25 | import editableState from './editableState.json';
 26 | 
 27 | const bind = configure({
 28 |   // Enables persistence in development so your edits aren't discarded when you close the browser window
 29 |   enablePersistence: true,
 30 |   // Useful if you use r3e in multiple projects
 31 |   localStorageNamespace: 'Example',
 32 | });
 33 | 
 34 | export default function App() {
 35 |   return (
 36 |     <Canvas onCreated={bind({ state: editableState })}>
 37 |       <ambientLight intensity={0.5} />
 38 |       {/* Mark objects as editable. */}
 39 |       {/* Properties in the code are used as initial values and reset points in the editor. */}
 40 |       <e.spotLight
 41 |         position={[10, 10, 10]}
 42 |         angle={0.15}
 43 |         penumbra={1}
 44 |         uniqueName="Spotlight"
 45 |       />
 46 |       <e.pointLight uniqueName="PointLight" />
 47 |       <e.mesh uniqueName="Box">
 48 |         <boxBufferGeometry />
 49 |         <meshStandardMaterial color="orange" />
 50 |       </e.mesh>
 51 |     </Canvas>
 52 |   );
 53 | }
 54 | ```
 55 | 
 56 | ([Codesandbox](https://codesandbox.io/s/minimal-r3e-demo-o1brl))
 57 | 
 58 | ## Why
 59 | 
 60 | When creating a 3D scene for react-three-fiber, you can choose two routes: you can either code it in r3f, which gives you reactivity, and the flexibility that comes with it, or you can use a 3D software like Blender and export it, but then if you want to dynamically modify that scene at runtime, you'll have to fall back to imperative code.
 61 | 
 62 | The best middle ground so far has been *gltfjsx*, which generates JSX from your exported scene, however it still involves a lot of manual work if you want to split your scene into components, and any modifications you make will have to be reapplied if you make changes to the scene.
 63 | 
 64 | React Three Editable aims to fill this gap by allowing you to set up your scene in JSX, giving you reactivity, while allowing you to tweak the properties of these objects in a visual editor, including their transforms, which you can then bake into a json file to be used by the runtime in production. An explicit goal of the project is to mirror regular react-three-fiber code as much as possible. This lets you add it to an existing project with ease, take it out when you don't need it, and generally use it as little or as much as you want, without feeling locked in.
 65 | 
 66 | ## API
 67 | 
 68 | ### `editable`
 69 | 
 70 | Use it to make objects editable. The properties on `editable` mirror the intrinsic elements of react-three-fiber, however there's no full parity yet. E.g. if you want to create an editable `<mesh>`, you do it by using `<editable.mesh>` instead. These elements have the same interface as the normal ones, with the addition of the below props. Any editable property you set in the code (like `position`) will be used as an initial value/reset point in the editor.
 71 | 
 72 | `editable` is also a function, which allows you to make your custom components editable. Your component does have to be compatible with the interface of the editable object type it is meant to represent. You need to pass it the component you want to wrap, and the object type it represents (see object types).
 73 | 
 74 | ```ts
 75 | import { editable } from 'react-three-editable';
 76 | import { PerspectiveCamera } from '@react-three/drei';
 77 | 
 78 | const EditableCamera = editable(PerspectiveCamera, 'perspectiveCamera');
 79 | ```
 80 | 
 81 | #### Props
 82 | 
 83 | `uniqueName: string`: a unique name used to identify the object in the editor.
 84 | 
 85 | ### `configure(options)`
 86 | 
 87 | Lets you configure the editor.
 88 | 
 89 | #### Parameters
 90 | 
 91 | `options.localStorageNamespace: string = ''`: allows you to namespace the key used for automatically persisting the editor state in development. Useful if you're working on multiple projects at the same time and you don't want one project overwriting the other.
 92 | 
 93 | `options.enablePersistence: boolean = true`: sets whether to enable persistence or not.
 94 | 
 95 | #### Returns
 96 | 
 97 | `bind`: a function that you can use to connect canvases to React Three Editable, see below.
 98 | 
 99 | ### `bind(options)`
100 | 
101 | Bind is a curried function that you call with `options` and returns another function that has to be called with `gl` and `scene`.
102 | 
103 | Use it to bind a `Canvas` to React Three Editable: `<Canvas onCreated={bind(options)}>`. If you use `onCreated` for other things as well, you have to manually call the function returned by `bind()`:
104 | 
105 | ```tsx
106 | <Canvas onCreated={({ gl, scene }) => {
107 |   bind(options)({ gl, scene });
108 | }}>
109 |   // ...
110 | </Canvas>
111 | ```
112 | 
113 | ❓ "The above snippet looks wrong...": `bind` is a curried function, so that you don't have to pass `gl` and `scene` manually in the average case when your `onCreated` is empty. The downside is that it looks like this when you have to manually call it with `gl` and `scene`.
114 | 
115 | ⚠️ For now, you can only connect a single canvas, however multi-canvas support is planned.
116 | 
117 | #### Parameters
118 | 
119 | `options.state?: EditableState`: a previously exported state.
120 | 
121 | `options.allowImplicitInstancing: boolean = false`: allows implicit instancing of editable objects through reusing `uniqueName`s. These objects will share all editable properties. It is discouraged since you'll miss out on warnings if you accidentally reuse a `uniqueName`, and will be superseded by prefabs in the future.
122 | 
123 | 
124 | ## Object types
125 | 
126 | React Three Editable currently supports the following object types:
127 | 
128 | - group
129 | - mesh
130 | - spotLight
131 | - directionalLight
132 | - pointLight
133 | - perspectiveCamera
134 | - orthographicCamera
135 | 
136 | These are available as properties of `editable`, and you need to pass them as the second parameter when wrapping custom components.
137 | 
138 | ## Production/development build
139 | 
140 | React Three Editable automatically displays the editor in development and removes it in production, similarly to how React has two different builds. To make use of this, you need to have your build system set up to handle `process.env.NODE_ENV` checks. If you are using CRA or Next.js, this is already done for you.
141 | 
142 | In production, the bundle size of r3e is [2.9 kB](https://bundlephobia.com/result?p=react-three-editable).
143 | 
144 | ## Contributing
145 | 
146 | **Any help is welcome!**
147 | 
148 | This project is still very much in the concept phase, so feedback and ideas are just as valuable a contribution as helping out with the code, or supporting development.
149 | 
150 | If you have time, please go through the issues and see if there's anything you can help with.
151 | 


--------------------------------------------------------------------------------
/example/.env:
--------------------------------------------------------------------------------
1 | SKIP_PREFLIGHT_CHECK=true
2 | DISABLE_NEW_JSX_TRANSFORM=true
3 | 


--------------------------------------------------------------------------------
/example/.eslintcache:
--------------------------------------------------------------------------------
1 | [{"/Users/andrew/Projects/react-three-editable/example/src/App.tsx":"1"},{"size":1531,"mtime":1609089394049,"results":"2","hashOfConfig":"3"},{"filePath":"4","messages":"5","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1e3o450","/Users/andrew/Projects/react-three-editable/example/src/App.tsx",[]]


--------------------------------------------------------------------------------
/example/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
 1 | # Getting Started with Create React App
 2 | 
 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 4 | 
 5 | ## Available Scripts
 6 | 
 7 | In the project directory, you can run:
 8 | 
 9 | ### `yarn start`
10 | 
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
13 | 
14 | The page will reload if you make edits.\
15 | You will also see any lint errors in the console.
16 | 
17 | ### `yarn test`
18 | 
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 | 
22 | ### `yarn build`
23 | 
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 | 
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 | 
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 | 
32 | ### `yarn eject`
33 | 
34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
35 | 
36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 | 
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
39 | 
40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41 | 
42 | ## Learn More
43 | 
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 | 
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.11.4",
 7 |     "@testing-library/react": "^11.1.0",
 8 |     "@testing-library/user-event": "^12.1.10",
 9 |     "@types/jest": "^26.0.15",
10 |     "@types/node": "^12.0.0",
11 |     "react-scripts": "4.0.1",
12 |     "web-vitals": "^0.2.4"
13 |   },
14 |   "scripts": {
15 |     "start": "react-scripts start",
16 |     "build": "react-scripts build",
17 |     "test": "react-scripts test",
18 |     "eject": "react-scripts eject"
19 |   },
20 |   "eslintConfig": {
21 |     "extends": [
22 |       "react-app",
23 |       "react-app/jest"
24 |     ]
25 |   },
26 |   "browserslist": {
27 |     "production": [
28 |       ">0.2%",
29 |       "not dead",
30 |       "not op_mini all"
31 |     ],
32 |     "development": [
33 |       "last 1 chrome version",
34 |       "last 1 firefox version",
35 |       "last 1 safari version"
36 |     ]
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/example/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AndrewPrifer/react-three-editable/6e4224d8466df80b4118cd70545fa3a39fb1c74f/example/public/favicon.ico


--------------------------------------------------------------------------------
/example/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/example/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AndrewPrifer/react-three-editable/6e4224d8466df80b4118cd70545fa3a39fb1c74f/example/public/logo192.png


--------------------------------------------------------------------------------
/example/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AndrewPrifer/react-three-editable/6e4224d8466df80b4118cd70545fa3a39fb1c74f/example/public/logo512.png


--------------------------------------------------------------------------------
/example/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/example/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/example/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Canvas } from 'react-three-fiber';
 3 | import { editable as e, configure } from '../../';
 4 | import { PerspectiveCamera } from '@react-three/drei';
 5 | 
 6 | const bind = configure();
 7 | 
 8 | const ECamera = e(PerspectiveCamera, 'perspectiveCamera');
 9 | 
10 | function App() {
11 |   return (
12 |     <Canvas shadowMap onCreated={bind()}>
13 |       <ECamera makeDefault uniqueName="Camera" />
14 |       <e.spotLight
15 |         uniqueName="Key Light"
16 |         shadow-mapSize-width={2048}
17 |         shadow-mapSize-height={2048}
18 |         castShadow
19 |       />
20 |       <e.spotLight
21 |         uniqueName="Fill Light"
22 |         shadow-mapSize-width={2048}
23 |         shadow-mapSize-height={2048}
24 |         castShadow
25 |       />
26 |       <e.mesh uniqueName="Ground" receiveShadow>
27 |         <planeBufferGeometry />
28 |         <meshStandardMaterial color="lightblue" />
29 |       </e.mesh>
30 |       <e.group uniqueName="Ice Cream">
31 |         <e.mesh uniqueName="Cone" castShadow>
32 |           <coneBufferGeometry />
33 |           <meshStandardMaterial color="orange" />
34 |         </e.mesh>
35 |         <e.mesh uniqueName="Scoop 1" castShadow>
36 |           <sphereBufferGeometry />
37 |           <meshStandardMaterial color="red" />
38 |         </e.mesh>
39 |         <e.mesh uniqueName="Scoop 2" castShadow>
40 |           <sphereBufferGeometry />
41 |           <meshStandardMaterial color="green" />
42 |         </e.mesh>
43 |         <e.mesh uniqueName="Scoop 3" castShadow>
44 |           <sphereBufferGeometry />
45 |           <meshStandardMaterial color="blue" />
46 |         </e.mesh>
47 |       </e.group>
48 |     </Canvas>
49 |   );
50 | }
51 | 
52 | export default App;
53 | 


--------------------------------------------------------------------------------
/example/src/index.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | html,
 6 | body,
 7 | #root {
 8 |   width: 100%;
 9 |   height: 100%;
10 |   margin: 0;
11 |   padding: 0;
12 | }
13 | 
14 | body {
15 |   background: white;
16 | }
17 | 


--------------------------------------------------------------------------------
/example/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | 
 7 | ReactDOM.render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>,
11 |   document.getElementById('root')
12 | );
13 | 
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 | 


--------------------------------------------------------------------------------
/example/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/example/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
 1 | import { ReportHandler } from 'web-vitals';
 2 | 
 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
 4 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 5 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 6 |       getCLS(onPerfEntry);
 7 |       getFID(onPerfEntry);
 8 |       getFCP(onPerfEntry);
 9 |       getLCP(onPerfEntry);
10 |       getTTFB(onPerfEntry);
11 |     });
12 |   }
13 | };
14 | 
15 | export default reportWebVitals;
16 | 


--------------------------------------------------------------------------------
/example/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/example/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "noFallthroughCasesInSwitch": true,
16 |     "module": "esnext",
17 |     "moduleResolution": "node",
18 |     "resolveJsonModule": true,
19 |     "isolatedModules": true,
20 |     "noEmit": true,
21 |     "jsx": "react"
22 |   },
23 |   "include": [
24 |     "src"
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "version": "0.8.1",
  3 |   "license": "MIT",
  4 |   "description": "️Edit your react-three-fiber scene with a visual editor without giving up control over your code.",
  5 |   "keywords": [
  6 |     "3d",
  7 |     "editor",
  8 |     "react",
  9 |     "react-three-fiber",
 10 |     "r3f",
 11 |     "three",
 12 |     "threejs",
 13 |     "webgl",
 14 |     "webgl2"
 15 |   ],
 16 |   "repository": "AndrewPrifer/react-three-editable",
 17 |   "main": "dist/index.js",
 18 |   "typings": "dist/index.d.ts",
 19 |   "files": [
 20 |     "dist",
 21 |     "src"
 22 |   ],
 23 |   "engines": {
 24 |     "node": ">=10"
 25 |   },
 26 |   "scripts": {
 27 |     "start": "tsdx watch",
 28 |     "build": "NODE_ENV=production tsdx build --format cjs",
 29 |     "test": "tsdx test --passWithNoTests",
 30 |     "lint": "tsdx lint",
 31 |     "prepare": "NODE_ENV=production tsdx build  --format cjs",
 32 |     "size": "size-limit",
 33 |     "analyze": "size-limit --why",
 34 |     "storybook": "start-storybook -s ./stories/public -p 6006",
 35 |     "build-storybook": "build-storybook",
 36 |     "np": "NODE_ENV=production np --any-branch"
 37 |   },
 38 |   "peerDependencies": {
 39 |     "react": ">=16",
 40 |     "react-dom": ">=16",
 41 |     "react-three-fiber": "*",
 42 |     "three": "*"
 43 |   },
 44 |   "husky": {
 45 |     "hooks": {
 46 |       "pre-commit": "tsdx lint"
 47 |     }
 48 |   },
 49 |   "prettier": {
 50 |     "printWidth": 80,
 51 |     "semi": true,
 52 |     "singleQuote": true,
 53 |     "trailingComma": "es5"
 54 |   },
 55 |   "name": "react-three-editable",
 56 |   "author": "Andrew Prifer",
 57 |   "size-limit": [
 58 |     {
 59 |       "path": "dist/react-three-editable.cjs.production.min.js",
 60 |       "limit": "10 KB"
 61 |     }
 62 |   ],
 63 |   "devDependencies": {
 64 |     "@babel/core": "^7.12.3",
 65 |     "@size-limit/preset-small-lib": "^4.6.0",
 66 |     "@storybook/addon-essentials": "^6.1.6",
 67 |     "@storybook/addon-info": "^5.3.21",
 68 |     "@storybook/addon-links": "^6.1.6",
 69 |     "@storybook/addons": "^6.1.6",
 70 |     "@storybook/react": "^6.1.6",
 71 |     "@tailwindcss/forms": "^0.2.1",
 72 |     "@types/react": "^17.0.0",
 73 |     "@types/react-dom": "^17.0.0",
 74 |     "@typescript-eslint/eslint-plugin": "^4.8.2",
 75 |     "@typescript-eslint/parser": "^4.8.2",
 76 |     "autoprefixer": "^10.0.2",
 77 |     "babel-loader": "^8.1.0",
 78 |     "eslint-plugin-prettier": "^3.1.4",
 79 |     "husky": "^4.3.0",
 80 |     "postcss": "^8.1.10",
 81 |     "prettier": "^2.1.2",
 82 |     "react": "^17.0.1",
 83 |     "react-dom": "^17.0.1",
 84 |     "react-is": "^17.0.1",
 85 |     "react-three-fiber": "^5.3.4",
 86 |     "rollup-plugin-postcss": "^3.1.8",
 87 |     "size-limit": "^4.6.0",
 88 |     "tailwindcss": "^2.0.1",
 89 |     "three": "^0.121.1",
 90 |     "to-string-loader": "^1.1.6",
 91 |     "tsdx": "^0.14.1",
 92 |     "tslib": "^2.0.3",
 93 |     "typescript": "4.0.5"
 94 |   },
 95 |   "dependencies": {
 96 |     "@react-icons/all-files": "^4.1.0",
 97 |     "@react-three/drei": "^2.2.10",
 98 |     "@types/file-saver": "^2.0.1",
 99 |     "fast-deep-equal": "^3.1.3",
100 |     "file-saver": "^2.0.2",
101 |     "prism-react-renderer": "^1.1.1",
102 |     "prop-types": "^15.7.2",
103 |     "react-hook-form": "^6.11.0",
104 |     "react-merge-refs": "^1.1.0",
105 |     "react-shadow": "^18.5.1",
106 |     "react-use-measure": "^2.0.3",
107 |     "reakit": "^1.3.0",
108 |     "zustand": "^3.2.0"
109 |   },
110 |   "resolutions": {
111 |     "postcss": "8.1.7",
112 |     "**/typescript": "4.0.5",
113 |     "**/@typescript-eslint/eslint-plugin": "^4.6.1",
114 |     "**/@typescript-eslint/parser": "^4.6.1"
115 |   }
116 | }
117 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/src/components/EditableProxy.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   BoxHelper,
  3 |   CameraHelper,
  4 |   DirectionalLightHelper,
  5 |   Object3D,
  6 |   PointLightHelper,
  7 |   SpotLightHelper,
  8 | } from 'three';
  9 | import React, {
 10 |   ReactElement,
 11 |   useEffect,
 12 |   useLayoutEffect,
 13 |   useRef,
 14 |   useState,
 15 |   VFC,
 16 | } from 'react';
 17 | import { useHelper, Sphere, Html } from '@react-three/drei';
 18 | import { EditableType, useEditorStore } from '../store';
 19 | import shallow from 'zustand/shallow';
 20 | import { BsFillCollectionFill } from '@react-icons/all-files/bs/BsFillCollectionFill';
 21 | import { GiLightProjector } from '@react-icons/all-files/gi/GiLightProjector';
 22 | import { BiSun } from '@react-icons/all-files/bi/BiSun';
 23 | import { GiCube } from '@react-icons/all-files/gi/GiCube';
 24 | import { GiLightBulb } from '@react-icons/all-files/gi/GiLightBulb';
 25 | import { BsCameraVideoFill } from '@react-icons/all-files/bs/BsCameraVideoFill';
 26 | import { IconType } from '@react-icons/all-files';
 27 | 
 28 | export interface EditableProxyProps {
 29 |   editableName: string;
 30 |   editableType: EditableType;
 31 |   object: Object3D;
 32 |   onChange?: () => void;
 33 | }
 34 | 
 35 | const EditableProxy: VFC<EditableProxyProps> = ({
 36 |   editableName,
 37 |   editableType,
 38 |   object,
 39 | }) => {
 40 |   const [
 41 |     selected,
 42 |     showOverlayIcons,
 43 |     setSelected,
 44 |     setSnapshotProxyObject,
 45 |   ] = useEditorStore(
 46 |     (state) => [
 47 |       state.selected,
 48 |       state.showOverlayIcons,
 49 |       state.setSelected,
 50 |       state.setSnapshotProxyObject,
 51 |     ],
 52 |     shallow
 53 |   );
 54 | 
 55 |   useEffect(() => {
 56 |     setSnapshotProxyObject(object, editableName);
 57 | 
 58 |     return () => setSnapshotProxyObject(null, editableName);
 59 |   }, [editableName, object, setSnapshotProxyObject]);
 60 | 
 61 |   // set up helper
 62 |   let Helper:
 63 |     | typeof SpotLightHelper
 64 |     | typeof DirectionalLightHelper
 65 |     | typeof PointLightHelper
 66 |     | typeof BoxHelper
 67 |     | typeof CameraHelper;
 68 | 
 69 |   switch (editableType) {
 70 |     case 'spotLight':
 71 |       Helper = SpotLightHelper;
 72 |       break;
 73 |     case 'directionalLight':
 74 |       Helper = DirectionalLightHelper;
 75 |       break;
 76 |     case 'pointLight':
 77 |       Helper = PointLightHelper;
 78 |       break;
 79 |     case 'perspectiveCamera':
 80 |     case 'orthographicCamera':
 81 |       Helper = CameraHelper;
 82 |       break;
 83 |     case 'group':
 84 |     case 'mesh':
 85 |       Helper = BoxHelper;
 86 |   }
 87 | 
 88 |   let helperArgs: [string] | [number, string] | [];
 89 |   const size = 1;
 90 |   const color = 'darkblue';
 91 | 
 92 |   switch (editableType) {
 93 |     case 'directionalLight':
 94 |     case 'pointLight':
 95 |       helperArgs = [size, color];
 96 |       break;
 97 |     case 'group':
 98 |     case 'mesh':
 99 |     case 'spotLight':
100 |       helperArgs = [color];
101 |       break;
102 |     case 'perspectiveCamera':
103 |     case 'orthographicCamera':
104 |       helperArgs = [];
105 |   }
106 | 
107 |   let icon: ReactElement<IconType>;
108 |   switch (editableType) {
109 |     case 'group':
110 |       icon = <BsFillCollectionFill />;
111 |       break;
112 |     case 'mesh':
113 |       icon = <GiCube />;
114 |       break;
115 |     case 'pointLight':
116 |       icon = <GiLightBulb />;
117 |       break;
118 |     case 'spotLight':
119 |       icon = <GiLightProjector />;
120 |       break;
121 |     case 'directionalLight':
122 |       icon = <BiSun />;
123 |       break;
124 |     case 'perspectiveCamera':
125 |     case 'orthographicCamera':
126 |       icon = <BsCameraVideoFill />;
127 |   }
128 | 
129 |   const objectRef = useRef(object);
130 | 
131 |   useLayoutEffect(() => {
132 |     objectRef.current = object;
133 |   }, [object]);
134 | 
135 |   const dimensionless = [
136 |     'spotLight',
137 |     'pointLight',
138 |     'directionalLight',
139 |     'perspectiveCamera',
140 |     'orthographicCamera',
141 |   ];
142 | 
143 |   const [hovered, setHovered] = useState(false);
144 | 
145 |   useHelper(
146 |     objectRef,
147 |     selected === editableName || dimensionless.includes(editableType) || hovered
148 |       ? Helper
149 |       : null,
150 |     ...helperArgs
151 |   );
152 | 
153 |   return (
154 |     <>
155 |       <group
156 |         onClick={(e) => {
157 |           if (e.delta < 2) {
158 |             e.stopPropagation();
159 |             setSelected(editableName);
160 |           }
161 |         }}
162 |         onPointerOver={(e) => {
163 |           e.stopPropagation();
164 |           setHovered(true);
165 |         }}
166 |         onPointerOut={(e) => {
167 |           e.stopPropagation();
168 |           setHovered(false);
169 |         }}
170 |       >
171 |         <primitive object={object}>
172 |           {showOverlayIcons && (
173 |             <Html
174 |               center
175 |               className="pointer-events-none p-1 rounded bg-white bg-opacity-70 shadow text-gray-700"
176 |             >
177 |               {icon}
178 |             </Html>
179 |           )}
180 |           {dimensionless.includes(editableType) && (
181 |             <Sphere
182 |               args={[2, 4, 2]}
183 |               onClick={(e) => {
184 |                 if (e.delta < 2) {
185 |                   e.stopPropagation();
186 |                   setSelected(editableName);
187 |                 }
188 |               }}
189 |               userData={{ helper: true }}
190 |             >
191 |               <meshBasicMaterial visible={false} />
192 |             </Sphere>
193 |           )}
194 |         </primitive>
195 |       </group>
196 |     </>
197 |   );
198 | };
199 | 
200 | export default EditableProxy;
201 | 


--------------------------------------------------------------------------------
/src/components/Editor.tsx:
--------------------------------------------------------------------------------
  1 | import React, {
  2 |   useEffect,
  3 |   useLayoutEffect,
  4 |   useRef,
  5 |   useState,
  6 |   VFC,
  7 |   Suspense,
  8 | } from 'react';
  9 | import { Canvas, useThree } from 'react-three-fiber';
 10 | import { useEditorStore } from '../store';
 11 | import { OrbitControls, Environment } from '@react-three/drei';
 12 | import shallow from 'zustand/shallow';
 13 | import root from 'react-shadow';
 14 | import styles from '../styles.css';
 15 | import UI from './UI';
 16 | import ProxyManager from './ProxyManager';
 17 | import {
 18 |   Button,
 19 |   Heading,
 20 |   Code,
 21 |   PortalManager,
 22 |   Modal,
 23 |   ModalHeader,
 24 |   ModalFooter,
 25 |   ModalBody,
 26 |   IdProvider,
 27 | } from './elements';
 28 | 
 29 | const EditorScene = () => {
 30 |   const orbitControlsRef = useRef<OrbitControls>();
 31 |   const { camera } = useThree();
 32 | 
 33 |   const [
 34 |     selectedHdr,
 35 |     useHdrAsBackground,
 36 |     showGrid,
 37 |     showAxes,
 38 |     setOrbitControlsRef,
 39 |   ] = useEditorStore(
 40 |     (state) => [
 41 |       state.selectedHdr,
 42 |       state.useHdrAsBackground,
 43 |       state.showGrid,
 44 |       state.showAxes,
 45 |       state.setOrbitControlsRef,
 46 |     ],
 47 |     shallow
 48 |   );
 49 | 
 50 |   useEffect(() => {
 51 |     setOrbitControlsRef(orbitControlsRef);
 52 |   }, [camera, setOrbitControlsRef]);
 53 | 
 54 |   return (
 55 |     <>
 56 |       <Suspense fallback={null}>
 57 |         {selectedHdr && (
 58 |           <Environment
 59 |             // @ts-ignore
 60 |             files={selectedHdr}
 61 |             path=""
 62 |             background={useHdrAsBackground}
 63 |           />
 64 |         )}
 65 |       </Suspense>
 66 |       {showGrid && <gridHelper args={[1000, 1000, 0x444444, 0x888888]} />}
 67 |       {showAxes && <axesHelper args={[500]} />}
 68 |       <OrbitControls ref={orbitControlsRef} />
 69 |       <ProxyManager orbitControlsRef={orbitControlsRef} />
 70 |     </>
 71 |   );
 72 | };
 73 | 
 74 | const Editor: VFC = () => {
 75 |   const [
 76 |     sceneSnapshot,
 77 |     editorOpen,
 78 |     initialState,
 79 |     setEditorOpen,
 80 |     setSelected,
 81 |     createSnapshot,
 82 |     isPersistedStateDifferentThanInitial,
 83 |     applyPersistedState,
 84 |   ] = useEditorStore(
 85 |     (state) => [
 86 |       state.sceneSnapshot,
 87 |       state.editorOpen,
 88 |       state.initialState,
 89 |       state.setEditorOpen,
 90 |       state.setSelected,
 91 |       state.createSnapshot,
 92 |       state.isPersistedStateDifferentThanInitial,
 93 |       state.applyPersistedState,
 94 |     ],
 95 |     shallow
 96 |   );
 97 | 
 98 |   const [stateMismatch, setStateMismatch] = useState(false);
 99 | 
100 |   useLayoutEffect(() => {
101 |     if (initialState) {
102 |       setStateMismatch(isPersistedStateDifferentThanInitial());
103 |     } else {
104 |       applyPersistedState();
105 |     }
106 |   }, [applyPersistedState, initialState, isPersistedStateDifferentThanInitial]);
107 | 
108 |   return (
109 |     <root.div>
110 |       <div id="react-three-editable-editor-root">
111 |         <PortalManager>
112 |           <IdProvider>
113 |             <div className="relative z-50">
114 |               <div
115 |                 className={`fixed ${editorOpen ? 'block' : 'hidden'} inset-0`}
116 |               >
117 |                 {sceneSnapshot ? (
118 |                   <>
119 |                     <div className="relative z-0 h-full">
120 |                       <Canvas
121 |                         colorManagement
122 |                         camera={{ position: [20, 20, 20] }}
123 |                         onCreated={({ gl }) => {
124 |                           gl.setClearColor('white');
125 |                         }}
126 |                         shadowMap
127 |                         pixelRatio={window.devicePixelRatio}
128 |                         onPointerMissed={() => setSelected(null)}
129 |                       >
130 |                         <EditorScene />
131 |                       </Canvas>
132 |                     </div>
133 | 
134 |                     <UI />
135 |                   </>
136 |                 ) : (
137 |                   <div className="flex justify-center items-center bg-white h-screen">
138 |                     <div className="flex flex-col gap-5 items-center ">
139 |                       <Heading className="text-2xl mb-4">
140 |                         No canvas connected
141 |                       </Heading>
142 |                       <div>
143 |                         Please use <Code>configure()</Code> and{' '}
144 |                         <Code>bind()</Code> to connect a canvas to React Three
145 |                         Editable.
146 |                       </div>
147 |                       <Code block>
148 |                         {`import React from 'react';
149 | import { Canvas } from 'react-three-fiber';
150 | import { configure, editable as e } from 'react-three-editable';
151 | 
152 | const bind = configure({
153 |   localStorageNamespace: "MyProject"
154 | });
155 | 
156 | const MyComponent = () => (
157 |   <Canvas onCreated={bind()}>
158 |     <e.mesh uniqueName="My First Editable Object">
159 |       <sphereBufferGeometry />
160 |       <meshStandardMaterial color="rebeccapurple" />
161 |     </e.mesh>
162 |   </Canvas>
163 | );`}
164 |                       </Code>
165 |                       <div>
166 |                         For more details, please consult the{' '}
167 |                         <a
168 |                           className="rounded-md font-medium text-green-600 hover:text-green-500"
169 |                           href="https://github.com/AndrewPrifer/react-three-editable"
170 |                           rel="noreferrer"
171 |                           target="_blank"
172 |                         >
173 |                           documentation
174 |                         </a>
175 |                         .
176 |                       </div>
177 |                       <Button
178 |                         className=""
179 |                         onClick={() => {
180 |                           setEditorOpen(false);
181 |                         }}
182 |                       >
183 |                         Close
184 |                       </Button>
185 |                     </div>
186 |                   </div>
187 |                 )}
188 |               </div>
189 |               {editorOpen || (
190 |                 <Button
191 |                   className="fixed bottom-5 left-5"
192 |                   onClick={() => {
193 |                     if (!sceneSnapshot) {
194 |                       createSnapshot();
195 |                     }
196 |                     setEditorOpen(true);
197 |                   }}
198 |                 >
199 |                   Editor
200 |                 </Button>
201 |               )}
202 |             </div>
203 |             <Modal visible={stateMismatch}>
204 |               <ModalHeader>Saved state found</ModalHeader>
205 |               <ModalBody>
206 |                 Would you like to use initial state or saved state?
207 |               </ModalBody>
208 |               <ModalFooter>
209 |                 <Button
210 |                   className="flex-1"
211 |                   onClick={() => {
212 |                     applyPersistedState();
213 |                     setStateMismatch(false);
214 |                   }}
215 |                 >
216 |                   Saved
217 |                 </Button>
218 |                 <Button
219 |                   className="flex-1"
220 |                   onClick={() => {
221 |                     setStateMismatch(false);
222 |                   }}
223 |                 >
224 |                   Initial
225 |                 </Button>
226 |               </ModalFooter>
227 |             </Modal>
228 |             <style type="text/css">{styles}</style>
229 |           </IdProvider>
230 |         </PortalManager>
231 |       </div>
232 |     </root.div>
233 |   );
234 | };
235 | 
236 | export default Editor;
237 | 


--------------------------------------------------------------------------------
/src/components/EnvironmentPreview.tsx:
--------------------------------------------------------------------------------
 1 | import React, { VFC, Suspense } from 'react';
 2 | import { Canvas } from 'react-three-fiber';
 3 | import { Environment, OrbitControls, TorusKnot } from '@react-three/drei';
 4 | import { Clickable, ClickableProps } from 'reakit';
 5 | import { IoIosClose } from '@react-icons/all-files/io/IoIosClose';
 6 | 
 7 | export interface EnvironmentPreviewProps extends ClickableProps {
 8 |   url: string | null;
 9 |   selected: boolean;
10 | }
11 | 
12 | const EnvironmentPreview: VFC<EnvironmentPreviewProps> = ({
13 |   url,
14 |   selected,
15 |   ...props
16 | }) => {
17 |   return (
18 |     <Clickable
19 |       {...props}
20 |       as="div"
21 |       className={`${
22 |         selected
23 |           ? 'ring-4 ring-green-800 hover:ring-green-900'
24 |           : 'hover:ring-4 hover:ring-gray-200'
25 |       } focus:outline-none focus:ring-4 rounded overflow-hidden`}
26 |     >
27 |       <div className="h-full relative">
28 |         {url ? (
29 |           <>
30 |             <Canvas>
31 |               <Suspense fallback={null}>
32 |                 <OrbitControls enableZoom={false} enablePan={false} />
33 |                 <Environment
34 |                   // @ts-ignore
35 |                   files={url}
36 |                   path=""
37 |                   background={true}
38 |                 />
39 |               </Suspense>
40 |               <TorusKnot>
41 |                 <meshStandardMaterial metalness={1} roughness={0} />
42 |               </TorusKnot>
43 |             </Canvas>
44 |             <div className="absolute inset-1 pointer-events-none flex flex-col justify-end items-center">
45 |               <div className="bg-white p-0.5 text-xxs rounded shadow">
46 |                 {url ?? 'None'}
47 |               </div>
48 |             </div>
49 |           </>
50 |         ) : (
51 |           <div className="flex justify-center items-center h-full bg-gray-100">
52 |             <IoIosClose size="3em" />
53 |           </div>
54 |         )}
55 |       </div>
56 |     </Clickable>
57 |   );
58 | };
59 | 
60 | export default EnvironmentPreview;
61 | 


--------------------------------------------------------------------------------
/src/components/PropertiesPanel.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useCallback, useEffect, VFC } from 'react';
  2 | import { useForm, UseFormMethods } from 'react-hook-form';
  3 | import { useEditorStore } from '../store';
  4 | import { Euler, Matrix4, Quaternion, Vector3 } from 'three';
  5 | import shallow from 'zustand/shallow';
  6 | import {
  7 |   FormControl,
  8 |   Heading,
  9 |   Input,
 10 |   Legend,
 11 |   VisuallyHidden,
 12 | } from './elements';
 13 | import { Button } from 'reakit';
 14 | import { MdRestore } from '@react-icons/all-files/md/MdRestore';
 15 | 
 16 | interface Vector3InputProps {
 17 |   register: UseFormMethods['register'];
 18 |   onBlur?: () => void;
 19 |   label: string;
 20 |   name: string;
 21 | }
 22 | 
 23 | const Vector3Input: VFC<Vector3InputProps> = ({
 24 |   register,
 25 |   onBlur,
 26 |   label,
 27 |   name,
 28 | }) => {
 29 |   return (
 30 |     <fieldset>
 31 |       <Legend>{label}</Legend>
 32 |       <div className="flex gap-3">
 33 |         <FormControl id={`${name}-x`}>
 34 |           <Input name={`${name}X`} ref={register} onBlur={onBlur} />
 35 |         </FormControl>
 36 |         <FormControl id={`${name}-y`}>
 37 |           <Input name={`${name}Y`} ref={register} onBlur={onBlur} />
 38 |         </FormControl>
 39 |         <FormControl id={`${name}-z`}>
 40 |           <Input name={`${name}Z`} ref={register} onBlur={onBlur} />
 41 |         </FormControl>
 42 |       </div>
 43 |     </fieldset>
 44 |   );
 45 | };
 46 | 
 47 | type Inputs = {
 48 |   positionX: string;
 49 |   positionY: string;
 50 |   positionZ: string;
 51 |   rotationX: string;
 52 |   rotationY: string;
 53 |   rotationZ: string;
 54 |   scaleX: string;
 55 |   scaleY: string;
 56 |   scaleZ: string;
 57 | };
 58 | 
 59 | const PropertiesPanel: VFC = () => {
 60 |   const [selected, setEditableTransform] = useEditorStore(
 61 |     (state) => [state.selected, state.setEditableTransform],
 62 |     shallow
 63 |   );
 64 | 
 65 |   const getFormValuesFromEditable = useCallback(() => {
 66 |     if (!selected) {
 67 |       return;
 68 |     }
 69 | 
 70 |     const position = new Vector3();
 71 |     const rotation = new Quaternion();
 72 |     const scale = new Vector3();
 73 | 
 74 |     useEditorStore
 75 |       .getState()
 76 |       .editables[selected].properties.transform.decompose(
 77 |         position,
 78 |         rotation,
 79 |         scale
 80 |       );
 81 | 
 82 |     const rotationEuler = new Euler();
 83 |     rotationEuler.setFromQuaternion(rotation);
 84 | 
 85 |     return {
 86 |       positionX: position.x.toFixed(2),
 87 |       positionY: position.y.toFixed(2),
 88 |       positionZ: position.z.toFixed(2),
 89 |       rotationX: rotationEuler.x.toFixed(2),
 90 |       rotationY: rotationEuler.y.toFixed(2),
 91 |       rotationZ: rotationEuler.z.toFixed(2),
 92 |       scaleX: scale.x.toFixed(2),
 93 |       scaleY: scale.y.toFixed(2),
 94 |       scaleZ: scale.z.toFixed(2),
 95 |     };
 96 |   }, [selected]);
 97 | 
 98 |   const { handleSubmit, register, setValue, reset } = useForm<Inputs>({
 99 |     defaultValues: getFormValuesFromEditable(),
100 |   });
101 | 
102 |   useEffect(() => {
103 |     if (!selected) {
104 |       return;
105 |     }
106 | 
107 |     const formValues = getFormValuesFromEditable();
108 |     if (formValues) {
109 |       Object.entries(formValues).forEach(([key, value]) => {
110 |         // avoids rerenders, unlike reset
111 |         setValue(key, value);
112 |       });
113 |     }
114 | 
115 |     const unsub = useEditorStore.subscribe(
116 |       () => {
117 |         const formValues = getFormValuesFromEditable();
118 |         if (formValues) {
119 |           Object.entries(formValues).forEach(([key, value]) => {
120 |             // avoids rerenders, unlike reset
121 |             setValue(key, value);
122 |           });
123 |         }
124 |       },
125 |       (state) => state.editables[selected]
126 |     );
127 | 
128 |     return () => unsub();
129 |   }, [getFormValuesFromEditable, selected, setValue]);
130 | 
131 |   return selected ? (
132 |     <div className="overflow-y-auto w-80 h-full p-5 border-l bg-white">
133 |       <Heading className="mb-5 text-3xl">Properties</Heading>
134 |       <form
135 |         onSubmit={handleSubmit((values) => {
136 |           const position = new Vector3(
137 |             Number(values.positionX),
138 |             Number(values.positionY),
139 |             Number(values.positionZ)
140 |           );
141 |           const rotation = new Quaternion().setFromEuler(
142 |             new Euler(
143 |               Number(values.rotationX),
144 |               Number(values.rotationY),
145 |               Number(values.rotationZ)
146 |             )
147 |           );
148 |           const scale = new Vector3(
149 |             Number(values.scaleX),
150 |             Number(values.scaleY),
151 |             Number(values.scaleZ)
152 |           );
153 |           const transform = new Matrix4().compose(position, rotation, scale);
154 |           setEditableTransform(selected, transform);
155 |         })}
156 |       >
157 |         <div className="flex flex-col gap-3">
158 |           <div className="flex justify-between items-center text-xl font-medium">
159 |             <div>Transforms</div>
160 |             <Button
161 |               // @ts-ignore
162 |               className="rounded-full focus:outline-none focus:ring transition-transform transform hover:scale-125"
163 |               onClick={() => {
164 |                 const editable = useEditorStore.getState().editables[selected];
165 |                 setEditableTransform(
166 |                   selected,
167 |                   editable.initialProperties.transform.clone()
168 |                 );
169 |               }}
170 |             >
171 |               <MdRestore />
172 |             </Button>
173 |           </div>
174 |           <Vector3Input
175 |             register={register}
176 |             onBlur={() => reset(getFormValuesFromEditable())}
177 |             label="Position"
178 |             name="position"
179 |           />
180 |           <Vector3Input
181 |             register={register}
182 |             onBlur={() => reset(getFormValuesFromEditable())}
183 |             label="Rotation"
184 |             name="rotation"
185 |           />
186 |           <Vector3Input
187 |             register={register}
188 |             onBlur={() => reset(getFormValuesFromEditable())}
189 |             label="Scale"
190 |             name="scale"
191 |           />
192 |         </div>
193 |         {/* so that submitting with enter works */}
194 |         <VisuallyHidden as="input" type="submit" />
195 |       </form>
196 |     </div>
197 |   ) : null;
198 | };
199 | 
200 | export default PropertiesPanel;
201 | 


--------------------------------------------------------------------------------
/src/components/ProxyManager.tsx:
--------------------------------------------------------------------------------
  1 | import React, {
  2 |   useEffect,
  3 |   useLayoutEffect,
  4 |   useMemo,
  5 |   useRef,
  6 |   useState,
  7 |   VFC,
  8 | } from 'react';
  9 | import { useEditorStore } from '../store';
 10 | import { createPortal } from 'react-three-fiber';
 11 | import EditableProxy from './EditableProxy';
 12 | import { OrbitControls } from '@react-three/drei';
 13 | import TransformControls from './TransformControls';
 14 | import shallow from 'zustand/shallow';
 15 | import {
 16 |   Material,
 17 |   Matrix4,
 18 |   Mesh,
 19 |   MeshBasicMaterial,
 20 |   MeshPhongMaterial,
 21 |   Object3D,
 22 | } from 'three';
 23 | 
 24 | export interface ProxyManagerProps {
 25 |   orbitControlsRef: React.MutableRefObject<OrbitControls | undefined>;
 26 | }
 27 | 
 28 | type EditableProxy = {
 29 |   portal: ReturnType<typeof createPortal>;
 30 |   object: Object3D;
 31 | };
 32 | 
 33 | const ProxyManager: VFC<ProxyManagerProps> = ({ orbitControlsRef }) => {
 34 |   const isBeingEdited = useRef(false);
 35 |   const [
 36 |     sceneSnapshot,
 37 |     selected,
 38 |     transformControlsMode,
 39 |     transformControlsSpace,
 40 |     viewportShading,
 41 |     setEditableTransform,
 42 |   ] = useEditorStore(
 43 |     (state) => [
 44 |       state.sceneSnapshot,
 45 |       state.selected,
 46 |       state.transformControlsMode,
 47 |       state.transformControlsSpace,
 48 |       state.viewportShading,
 49 |       state.setEditableTransform,
 50 |     ],
 51 |     shallow
 52 |   );
 53 |   const sceneProxy = useMemo(() => sceneSnapshot?.clone(), [sceneSnapshot]);
 54 |   const [editableProxies, setEditableProxies] = useState<{
 55 |     [name: string]: EditableProxy;
 56 |   }>({});
 57 | 
 58 |   // set up scene proxies
 59 |   useLayoutEffect(() => {
 60 |     if (!sceneProxy) {
 61 |       return;
 62 |     }
 63 | 
 64 |     const editableProxies: { [name: string]: EditableProxy } = {};
 65 | 
 66 |     sceneProxy.traverse((object) => {
 67 |       if (object.userData.__editable) {
 68 |         // there are duplicate uniqueNames in the scene, only display one instance in the editor
 69 |         if (editableProxies[object.userData.__editableName]) {
 70 |           object.parent!.remove(object);
 71 |         } else {
 72 |           editableProxies[object.userData.__editableName] = {
 73 |             portal: createPortal(
 74 |               <EditableProxy
 75 |                 editableName={object.userData.__editableName}
 76 |                 editableType={object.userData.__editableType}
 77 |                 object={object}
 78 |               />,
 79 |               object.parent
 80 |             ),
 81 |             object: object,
 82 |           };
 83 |         }
 84 |       }
 85 |     });
 86 | 
 87 |     setEditableProxies(editableProxies);
 88 |   }, [orbitControlsRef, sceneProxy]);
 89 | 
 90 |   // subscribe to external changes
 91 |   useEffect(() => {
 92 |     if (!selected) {
 93 |       return;
 94 |     }
 95 | 
 96 |     const unsub = useEditorStore.subscribe(
 97 |       (transform) => {
 98 |         if (isBeingEdited.current) {
 99 |           return;
100 |         }
101 | 
102 |         const object = editableProxies[selected].object;
103 | 
104 |         (transform as Matrix4).decompose(
105 |           object.position,
106 |           object.quaternion,
107 |           object.scale
108 |         );
109 |       },
110 |       (state) => state.editables[selected].properties.transform
111 |     );
112 | 
113 |     return () => void unsub();
114 |   }, [editableProxies, selected]);
115 | 
116 |   // set up viewport shading modes
117 |   const [renderMaterials, setRenderMaterials] = useState<{
118 |     [id: string]: Material | Material[];
119 |   }>({});
120 | 
121 |   useLayoutEffect(() => {
122 |     if (!sceneProxy) {
123 |       return;
124 |     }
125 | 
126 |     const renderMaterials: {
127 |       [id: string]: Material | Material[];
128 |     } = {};
129 | 
130 |     sceneProxy.traverse((object) => {
131 |       const mesh = object as Mesh;
132 |       if (mesh.isMesh && !mesh.userData.helper) {
133 |         renderMaterials[mesh.id] = mesh.material;
134 |       }
135 |     });
136 | 
137 |     setRenderMaterials(renderMaterials);
138 | 
139 |     return () => {
140 |       Object.entries(renderMaterials).forEach(([id, material]) => {
141 |         (sceneProxy.getObjectById(
142 |           Number.parseInt(id)
143 |         ) as Mesh).material = material;
144 |       });
145 |     };
146 |   }, [sceneProxy]);
147 | 
148 |   useLayoutEffect(() => {
149 |     if (!sceneProxy) {
150 |       return;
151 |     }
152 | 
153 |     sceneProxy.traverse((object) => {
154 |       const mesh = object as Mesh;
155 |       if (mesh.isMesh && !mesh.userData.helper) {
156 |         let material;
157 |         switch (viewportShading) {
158 |           case 'wireframe':
159 |             mesh.material = new MeshBasicMaterial({
160 |               wireframe: true,
161 |               color: 'black',
162 |             });
163 |             break;
164 |           case 'flat':
165 |             // it is possible that renderMaterials hasn't updated yet
166 |             if (!renderMaterials[mesh.id]) {
167 |               return;
168 |             }
169 |             material = new MeshBasicMaterial();
170 |             if (renderMaterials[mesh.id].hasOwnProperty('color')) {
171 |               material.color = (renderMaterials[mesh.id] as any).color;
172 |             }
173 |             if (renderMaterials[mesh.id].hasOwnProperty('map')) {
174 |               material.map = (renderMaterials[mesh.id] as any).map;
175 |             }
176 |             if (renderMaterials[mesh.id].hasOwnProperty('vertexColors')) {
177 |               material.vertexColors = (renderMaterials[
178 |                 mesh.id
179 |               ] as any).vertexColors;
180 |             }
181 |             mesh.material = material;
182 |             break;
183 |           case 'solid':
184 |             // it is possible that renderMaterials hasn't updated yet
185 |             if (!renderMaterials[mesh.id]) {
186 |               return;
187 |             }
188 |             material = new MeshPhongMaterial();
189 |             if (renderMaterials[mesh.id].hasOwnProperty('color')) {
190 |               material.color = (renderMaterials[mesh.id] as any).color;
191 |             }
192 |             if (renderMaterials[mesh.id].hasOwnProperty('map')) {
193 |               material.map = (renderMaterials[mesh.id] as any).map;
194 |             }
195 |             if (renderMaterials[mesh.id].hasOwnProperty('vertexColors')) {
196 |               material.vertexColors = (renderMaterials[
197 |                 mesh.id
198 |               ] as any).vertexColors;
199 |             }
200 |             mesh.material = material;
201 |             break;
202 |           case 'rendered':
203 |             mesh.material = renderMaterials[mesh.id];
204 |         }
205 |       }
206 |     });
207 |   }, [viewportShading, renderMaterials, sceneProxy]);
208 | 
209 |   if (!sceneProxy) {
210 |     return null;
211 |   }
212 | 
213 |   return (
214 |     <>
215 |       <primitive object={sceneProxy} />
216 |       {selected && (
217 |         <TransformControls
218 |           mode={transformControlsMode}
219 |           space={transformControlsSpace}
220 |           orbitControlsRef={orbitControlsRef}
221 |           object={editableProxies[selected].object}
222 |           onObjectChange={() => {
223 |             setEditableTransform(
224 |               selected,
225 |               editableProxies[selected].object.matrix.clone()
226 |             );
227 |           }}
228 |           onDraggingChange={(event) => (isBeingEdited.current = event.value)}
229 |         />
230 |       )}
231 |       {Object.values(editableProxies).map(({ portal }) => portal)}
232 |     </>
233 |   );
234 | };
235 | 
236 | export default ProxyManager;
237 | 


--------------------------------------------------------------------------------
/src/components/ReferenceWindow.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useLayoutEffect, useRef, VFC } from 'react';
 2 | import { useEditorStore } from '../store';
 3 | import shallow from 'zustand/shallow';
 4 | import { WebGLRenderer } from 'three';
 5 | import useMeasure from 'react-use-measure';
 6 | 
 7 | interface ReferenceWindowProps {
 8 |   height: number;
 9 | }
10 | 
11 | const ReferenceWindow: VFC<ReferenceWindowProps> = ({ height }) => {
12 |   const canvasRef = useRef<HTMLCanvasElement>(null);
13 | 
14 |   const [gl] = useEditorStore((state) => [state.gl], shallow);
15 |   const [ref, bounds] = useMeasure();
16 | 
17 |   useLayoutEffect(() => {
18 |     if (gl) {
19 |       ref(gl?.domElement);
20 |     }
21 |   }, [gl, ref]);
22 | 
23 |   useEffect(() => {
24 |     let animationHandle: number;
25 |     const draw = (gl: WebGLRenderer) => () => {
26 |       animationHandle = requestAnimationFrame(draw(gl));
27 | 
28 |       if (!gl.domElement) {
29 |         return;
30 |       }
31 | 
32 |       const width = (gl.domElement.width / gl.domElement.height) * height;
33 | 
34 |       const ctx = canvasRef.current!.getContext('2d')!;
35 | 
36 |       // https://stackoverflow.com/questions/17861447/html5-canvas-drawimage-how-to-apply-antialiasing
37 |       ctx.imageSmoothingQuality = 'high';
38 | 
39 |       ctx.fillStyle = 'white';
40 |       ctx.fillRect(0, 0, width, height);
41 |       ctx.drawImage(gl.domElement, 0, 0, width, height);
42 |     };
43 | 
44 |     if (gl) {
45 |       draw(gl)();
46 |     }
47 | 
48 |     return () => {
49 |       cancelAnimationFrame(animationHandle);
50 |     };
51 |   }, [gl, height]);
52 | 
53 |   return gl?.domElement ? (
54 |     <div className="rounded overflow-hidden shadow-2xl">
55 |       <canvas
56 |         ref={canvasRef}
57 |         width={
58 |           ((bounds.width || gl.domElement.width) /
59 |             (bounds.height || gl.domElement.height)) *
60 |           height
61 |         }
62 |         height={height}
63 |       />
64 |     </div>
65 |   ) : null;
66 | };
67 | 
68 | export default ReferenceWindow;
69 | 


--------------------------------------------------------------------------------
/src/components/SceneOutlinePanel.tsx:
--------------------------------------------------------------------------------
  1 | import React, { ReactElement, VFC } from 'react';
  2 | import { EditableType, useEditorStore } from '../store';
  3 | import shallow from 'zustand/shallow';
  4 | import { Button as ButtonImpl, ButtonProps, Group } from 'reakit';
  5 | import { IconType } from '@react-icons/all-files';
  6 | import { BsFillCollectionFill } from '@react-icons/all-files/bs/BsFillCollectionFill';
  7 | import { GiLightProjector } from '@react-icons/all-files/gi/GiLightProjector';
  8 | import { BiSun } from '@react-icons/all-files/bi/BiSun';
  9 | import { GiCube } from '@react-icons/all-files/gi/GiCube';
 10 | import { GiLightBulb } from '@react-icons/all-files/gi/GiLightBulb';
 11 | import { BsCameraVideoFill } from '@react-icons/all-files/bs/BsCameraVideoFill';
 12 | import { Heading, Button } from './elements';
 13 | 
 14 | interface ObjectButtonProps extends ButtonProps {
 15 |   objectName: string;
 16 |   editableType: EditableType;
 17 |   selected: string | null;
 18 | }
 19 | 
 20 | const ObjectButton: VFC<ObjectButtonProps> = ({
 21 |   objectName,
 22 |   editableType,
 23 |   selected,
 24 |   ...props
 25 | }) => {
 26 |   let icon: ReactElement<IconType>;
 27 |   switch (editableType) {
 28 |     case 'group':
 29 |       icon = <BsFillCollectionFill />;
 30 |       break;
 31 |     case 'mesh':
 32 |       icon = <GiCube />;
 33 |       break;
 34 |     case 'pointLight':
 35 |       icon = <GiLightBulb />;
 36 |       break;
 37 |     case 'spotLight':
 38 |       icon = <GiLightProjector />;
 39 |       break;
 40 |     case 'directionalLight':
 41 |       icon = <BiSun />;
 42 |       break;
 43 |     case 'perspectiveCamera':
 44 |     case 'orthographicCamera':
 45 |       icon = <BsCameraVideoFill />;
 46 |   }
 47 | 
 48 |   return (
 49 |     <ButtonImpl
 50 |       // @ts-ignore
 51 |       {...props}
 52 |       className={`inline-flex justify-start items-center rounded-md px-4 py-2 font-medium focus:outline-none focus:ring focus:ring-blue-300 ${
 53 |         objectName === selected
 54 |           ? 'bg-green-800 hover:bg-green-900 text-white'
 55 |           : 'text-gray-700 hover:bg-gray-200'
 56 |       }`}
 57 |     >
 58 |       <span className="mr-2">{icon}</span>
 59 |       {objectName}
 60 |     </ButtonImpl>
 61 |   );
 62 | };
 63 | 
 64 | const SceneOutlinePanel: VFC = () => {
 65 |   const [
 66 |     editablesSnapshot,
 67 |     selected,
 68 |     setSelected,
 69 |     createSnapshot,
 70 |   ] = useEditorStore(
 71 |     (state) => [
 72 |       state.editablesSnapshot,
 73 |       state.selected,
 74 |       state.setSelected,
 75 |       state.createSnapshot,
 76 |     ],
 77 |     shallow
 78 |   );
 79 | 
 80 |   if (editablesSnapshot === null) {
 81 |     return null;
 82 |   }
 83 | 
 84 |   return (
 85 |     <div className="flex flex-col overflow-y-auto w-80 h-full p-5 border-r bg-white">
 86 |       <Heading className="mb-5 ml-3 text-3xl">Outline</Heading>
 87 |       <Group
 88 |         // @ts-ignore
 89 |         className="flex flex-col gap-3 flex-1"
 90 |       >
 91 |         {Object.entries(editablesSnapshot).map(
 92 |           ([name, editable]) =>
 93 |             editable.role === 'active' && (
 94 |               <ObjectButton
 95 |                 key={name}
 96 |                 objectName={name}
 97 |                 editableType={editable.type}
 98 |                 selected={selected}
 99 |                 onClick={() => {
100 |                   setSelected(name);
101 |                 }}
102 |               />
103 |             )
104 |         )}
105 |       </Group>
106 |       <div className="flex-0 mt-3">
107 |         <Button
108 |           className="w-full"
109 |           onClick={() => {
110 |             createSnapshot();
111 |           }}
112 |         >
113 |           Sync editor
114 |         </Button>
115 |       </div>
116 |     </div>
117 |   );
118 | };
119 | 
120 | export default SceneOutlinePanel;
121 | 


--------------------------------------------------------------------------------
/src/components/TransformControls.tsx:
--------------------------------------------------------------------------------
 1 | import { Object3D, Event } from 'three';
 2 | import React, { forwardRef, useLayoutEffect, useEffect, useMemo } from 'react';
 3 | import { ReactThreeFiber, useThree, Overwrite } from 'react-three-fiber';
 4 | import { TransformControls as TransformControlsImpl } from 'three/examples/jsm/controls/TransformControls';
 5 | import { OrbitControls } from '@react-three/drei';
 6 | 
 7 | type R3fTransformControls = Overwrite<
 8 |   ReactThreeFiber.Object3DNode<
 9 |     TransformControlsImpl,
10 |     typeof TransformControlsImpl
11 |   >,
12 |   { target?: ReactThreeFiber.Vector3 }
13 | >;
14 | 
15 | export interface TransformControlsProps extends R3fTransformControls {
16 |   object: Object3D;
17 |   orbitControlsRef?: React.MutableRefObject<OrbitControls | undefined>;
18 |   onObjectChange?: (event: Event) => void;
19 |   onDraggingChange?: (event: Event) => void;
20 | }
21 | 
22 | const TransformControls = forwardRef(
23 |   (
24 |     {
25 |       children,
26 |       object,
27 |       orbitControlsRef,
28 |       onObjectChange,
29 |       onDraggingChange,
30 |       ...props
31 |     }: TransformControlsProps,
32 |     ref
33 |   ) => {
34 |     const { camera, gl, invalidate } = useThree();
35 |     const controls = useMemo(
36 |       () => new TransformControlsImpl(camera, gl.domElement),
37 |       [camera, gl.domElement]
38 |     );
39 | 
40 |     useLayoutEffect(() => {
41 |       controls.attach(object);
42 | 
43 |       return () => void controls.detach();
44 |     }, [object, controls]);
45 | 
46 |     useEffect(() => {
47 |       controls?.addEventListener?.('change', invalidate);
48 |       return () => controls?.removeEventListener?.('change', invalidate);
49 |     }, [controls, invalidate]);
50 | 
51 |     useEffect(() => {
52 |       const callback = (event: Event) => {
53 |         if (orbitControlsRef && orbitControlsRef.current) {
54 |           orbitControlsRef.current.enabled = !event.value;
55 |         }
56 |       };
57 | 
58 |       if (controls) {
59 |         controls.addEventListener!('dragging-changed', callback);
60 |       }
61 | 
62 |       return () => {
63 |         controls.removeEventListener!('dragging-changed', callback);
64 |       };
65 |     }, [controls, orbitControlsRef]);
66 | 
67 |     useEffect(() => {
68 |       if (onObjectChange) {
69 |         controls.addEventListener('objectChange', onObjectChange);
70 |       }
71 | 
72 |       return () => {
73 |         if (onObjectChange) {
74 |           controls.removeEventListener('objectChange', onObjectChange);
75 |         }
76 |       };
77 |     }, [onObjectChange, controls]);
78 | 
79 |     useEffect(() => {
80 |       if (onDraggingChange) {
81 |         controls.addEventListener('dragging-changed', onDraggingChange);
82 |       }
83 | 
84 |       return () => {
85 |         if (onDraggingChange) {
86 |           controls.removeEventListener('dragging-changed', onDraggingChange);
87 |         }
88 |       };
89 |     }, [controls, onDraggingChange]);
90 | 
91 |     return <primitive dispose={null} object={controls} ref={ref} {...props} />;
92 |   }
93 | );
94 | 
95 | export default TransformControls;
96 | 


--------------------------------------------------------------------------------
/src/components/TransformControlsModeSelect.tsx:
--------------------------------------------------------------------------------
 1 | import React, { VFC } from 'react';
 2 | import { GiResize } from '@react-icons/all-files/gi/GiResize';
 3 | import { GiMove } from '@react-icons/all-files/gi/GiMove';
 4 | import { GiClockwiseRotation } from '@react-icons/all-files/gi/GiClockwiseRotation';
 5 | import { TransformControlsMode } from '../store';
 6 | import { CompactModeSelect } from './elements';
 7 | 
 8 | export interface TransformControlsModeSelectProps {
 9 |   value: TransformControlsMode;
10 |   onChange: (value: TransformControlsMode) => void;
11 | }
12 | 
13 | const TransformControlsModeSelect: VFC<TransformControlsModeSelectProps> = ({
14 |   value,
15 |   onChange,
16 | }) => (
17 |   <CompactModeSelect
18 |     value={value}
19 |     onChange={onChange}
20 |     options={[
21 |       {
22 |         option: 'translate',
23 |         label: 'Tool: Translate',
24 |         icon: <GiMove />,
25 |       },
26 |       {
27 |         option: 'rotate',
28 |         label: 'Tool: Rotate',
29 |         icon: <GiClockwiseRotation />,
30 |       },
31 |       {
32 |         option: 'scale',
33 |         label: 'Tool: Scale',
34 |         icon: <GiResize />,
35 |       },
36 |     ]}
37 |   />
38 | );
39 | 
40 | export default TransformControlsModeSelect;
41 | 


--------------------------------------------------------------------------------
/src/components/TransformControlsSpaceSelect.tsx:
--------------------------------------------------------------------------------
 1 | import React, { VFC } from 'react';
 2 | import { TransformControlsSpace } from '../store';
 3 | import { CompactModeSelect } from './elements';
 4 | import { BiGlobe } from '@react-icons/all-files/bi/BiGlobe';
 5 | import { BiCube } from '@react-icons/all-files/bi/BiCube';
 6 | 
 7 | export interface TransformControlsSpaceSelectProps {
 8 |   value: TransformControlsSpace;
 9 |   onChange: (value: TransformControlsSpace) => void;
10 | }
11 | 
12 | const TransformControlsSpaceSelect: VFC<TransformControlsSpaceSelectProps> = ({
13 |   value,
14 |   onChange,
15 | }) => (
16 |   <CompactModeSelect
17 |     value={value}
18 |     onChange={onChange}
19 |     options={[
20 |       {
21 |         option: 'world',
22 |         label: 'Space: World',
23 |         icon: <BiGlobe />,
24 |       },
25 |       {
26 |         option: 'local',
27 |         label: 'Space: Local',
28 |         icon: <BiCube />,
29 |       },
30 |     ]}
31 |   />
32 | );
33 | 
34 | export default TransformControlsSpaceSelect;
35 | 


--------------------------------------------------------------------------------
/src/components/UI.tsx:
--------------------------------------------------------------------------------
  1 | import React, { VFC } from 'react';
  2 | import TransformControlsModeSelect from './TransformControlsModeSelect';
  3 | import { useEditorStore } from '../store';
  4 | import shallow from 'zustand/shallow';
  5 | import ReferenceWindow from './ReferenceWindow';
  6 | import { saveAs } from 'file-saver';
  7 | import { Vector3 } from 'three';
  8 | import { RiFocus3Line } from '@react-icons/all-files/ri/RiFocus3Line';
  9 | import { GiPocketBow } from '@react-icons/all-files/gi/GiPocketBow';
 10 | import { AiFillEye } from '@react-icons/all-files/ai/AiFillEye';
 11 | import TransformControlsSpaceSelect from './TransformControlsSpaceSelect';
 12 | import ViewportShadingSelect from './ViewportShadingSelect';
 13 | import SceneOutlinePanel from './SceneOutlinePanel';
 14 | import PropertiesPanel from './PropertiesPanel';
 15 | import { IconButton, Button, SettingsButton } from './elements';
 16 | import ViewportSettings from './ViewportSettings';
 17 | 
 18 | const UI: VFC = () => {
 19 |   const [
 20 |     transformControlsMode,
 21 |     transformControlsSpace,
 22 |     viewportShading,
 23 |     setTransformControlsMode,
 24 |     setTransformControlsSpace,
 25 |     setViewportShading,
 26 |     setEditorOpen,
 27 |     setEditableTransform,
 28 |   ] = useEditorStore(
 29 |     (state) => [
 30 |       state.transformControlsMode,
 31 |       state.transformControlsSpace,
 32 |       state.viewportShading,
 33 |       state.setTransformControlsMode,
 34 |       state.setTransformControlsSpace,
 35 |       state.setViewportShading,
 36 |       state.setEditorOpen,
 37 |       state.setEditableTransform,
 38 |     ],
 39 |     shallow
 40 |   );
 41 | 
 42 |   return (
 43 |     <div className="absolute inset-0 z-50 pointer-events-none">
 44 |       <div className="flex h-full">
 45 |         <div className="w-min pointer-events-auto">
 46 |           <SceneOutlinePanel />
 47 |         </div>
 48 |         <div className="relative flex-1 m-5">
 49 |           <div className="flex items-start justify-between">
 50 |             <div className="flex gap-4">
 51 |               <div className="pointer-events-auto">
 52 |                 <TransformControlsModeSelect
 53 |                   value={transformControlsMode}
 54 |                   onChange={(value) => setTransformControlsMode(value)}
 55 |                 />
 56 |               </div>
 57 |               <div className="pointer-events-auto">
 58 |                 <TransformControlsSpaceSelect
 59 |                   value={transformControlsSpace}
 60 |                   onChange={setTransformControlsSpace}
 61 |                 />
 62 |               </div>
 63 |               <div className="pointer-events-auto">
 64 |                 <ViewportShadingSelect
 65 |                   value={viewportShading}
 66 |                   onChange={setViewportShading}
 67 |                 />
 68 |               </div>
 69 |               <div className="pointer-events-auto">
 70 |                 <IconButton
 71 |                   label="Focus on selected"
 72 |                   icon={<RiFocus3Line />}
 73 |                   onClick={() => {
 74 |                     const orbitControls = useEditorStore.getState()
 75 |                       .orbitControlsRef?.current;
 76 |                     const selected = useEditorStore.getState().selected;
 77 |                     let focusObject;
 78 | 
 79 |                     if (selected) {
 80 |                       focusObject = useEditorStore.getState()
 81 |                         .editablesSnapshot![selected].proxyObject;
 82 |                     }
 83 | 
 84 |                     if (orbitControls && focusObject) {
 85 |                       focusObject.getWorldPosition(
 86 |                         orbitControls.target as Vector3
 87 |                       );
 88 |                     }
 89 |                   }}
 90 |                 />
 91 |               </div>
 92 |               <div className="pointer-events-auto">
 93 |                 <IconButton
 94 |                   label="Align object to view"
 95 |                   icon={<GiPocketBow />}
 96 |                   onClick={() => {
 97 |                     const camera = useEditorStore.getState().orbitControlsRef
 98 |                       ?.current?.object;
 99 |                     const selected = useEditorStore.getState().selected;
100 | 
101 |                     let proxyObject;
102 | 
103 |                     if (selected) {
104 |                       proxyObject = useEditorStore.getState()
105 |                         .editablesSnapshot![selected].proxyObject;
106 | 
107 |                       if (proxyObject && camera) {
108 |                         const direction = new Vector3();
109 |                         const position = camera.position.clone();
110 | 
111 |                         camera.getWorldDirection(direction);
112 |                         proxyObject.position.set(0, 0, 0);
113 |                         proxyObject.lookAt(direction);
114 | 
115 |                         proxyObject.parent!.worldToLocal(position);
116 |                         proxyObject.position.copy(position);
117 | 
118 |                         proxyObject.updateMatrix();
119 | 
120 |                         setEditableTransform(
121 |                           selected,
122 |                           proxyObject.matrix.clone()
123 |                         );
124 |                       }
125 |                     }
126 |                   }}
127 |                 />
128 |               </div>
129 |               <div className="pointer-events-auto">
130 |                 <SettingsButton icon={<AiFillEye />} label="Viewport settings">
131 |                   <ViewportSettings />
132 |                 </SettingsButton>
133 |               </div>
134 |             </div>
135 |             <div className="absolute right-0 top-0 -z-10">
136 |               <ReferenceWindow height={120} />
137 |             </div>
138 |           </div>
139 | 
140 |           {/* Bottom-left corner*/}
141 |           <Button
142 |             className="absolute left-0 bottom-0 pointer-events-auto"
143 |             onClick={() => setEditorOpen(false)}
144 |           >
145 |             Close
146 |           </Button>
147 | 
148 |           {/* Bottom-right corner */}
149 |           <Button
150 |             className="absolute right-0 bottom-0 pointer-events-auto"
151 |             onClick={() => {
152 |               const blob = new Blob(
153 |                 [JSON.stringify(useEditorStore.getState().serialize())],
154 |                 { type: 'text/json;charset=utf-8' }
155 |               );
156 |               saveAs(blob, 'editableState.json');
157 |             }}
158 |           >
159 |             Save
160 |           </Button>
161 |         </div>
162 |         <div className="w-min pointer-events-auto">
163 |           <PropertiesPanel />
164 |         </div>
165 |       </div>
166 |     </div>
167 |   );
168 | };
169 | 
170 | export default UI;
171 | 


--------------------------------------------------------------------------------
/src/components/ViewportSettings.tsx:
--------------------------------------------------------------------------------
 1 | import React, { VFC } from 'react';
 2 | import { useEditorStore } from '../store';
 3 | import shallow from 'zustand/shallow';
 4 | import { Checkbox, FormControl } from './elements';
 5 | 
 6 | const ViewportShadingSettings: VFC = () => {
 7 |   const [
 8 |     showOverlayIcons,
 9 |     showGrid,
10 |     showAxes,
11 |     setShowOverlayIcons,
12 |     setShowGrid,
13 |     setShowAxes,
14 |   ] = useEditorStore(
15 |     (state) => [
16 |       state.showOverlayIcons,
17 |       state.showGrid,
18 |       state.showAxes,
19 |       state.setShowOverlayIcons,
20 |       state.setShowGrid,
21 |       state.setShowAxes,
22 |     ],
23 |     shallow
24 |   );
25 | 
26 |   return (
27 |     <div className="flex flex-col gap-3">
28 |       <FormControl>
29 |         <Checkbox
30 |           // @ts-ignore
31 |           checked={showOverlayIcons}
32 |           onChange={() => setShowOverlayIcons(!showOverlayIcons)}
33 |         >
34 |           Show overlay icons
35 |         </Checkbox>
36 |       </FormControl>
37 |       <FormControl>
38 |         <Checkbox
39 |           // @ts-ignore
40 |           checked={showGrid}
41 |           onChange={() => setShowGrid(!showGrid)}
42 |         >
43 |           Show grid
44 |         </Checkbox>
45 |       </FormControl>
46 |       <FormControl>
47 |         <Checkbox
48 |           // @ts-ignore
49 |           checked={showAxes}
50 |           onChange={() => setShowAxes(!showAxes)}
51 |         >
52 |           Show axes
53 |         </Checkbox>
54 |       </FormControl>
55 |     </div>
56 |   );
57 | };
58 | 
59 | export default ViewportShadingSettings;
60 | 


--------------------------------------------------------------------------------
/src/components/ViewportShadingSelect.tsx:
--------------------------------------------------------------------------------
 1 | import React, { VFC } from 'react';
 2 | import { GiIceCube } from '@react-icons/all-files/gi/GiIceCube';
 3 | import { BiCube } from '@react-icons/all-files/bi/BiCube';
 4 | import { FaCube } from '@react-icons/all-files/fa/FaCube';
 5 | import { GiCube } from '@react-icons/all-files/gi/GiCube';
 6 | import { ViewportShading } from '../store';
 7 | import { CompactModeSelect } from './elements';
 8 | import ViewportShadingSettings from './ViewportShadingSettings';
 9 | 
10 | export interface ViewportShadingSelectProps {
11 |   value: ViewportShading;
12 |   onChange: (value: ViewportShading) => void;
13 | }
14 | 
15 | const ViewportShadingSelect: VFC<ViewportShadingSelectProps> = ({
16 |   value,
17 |   onChange,
18 | }) => (
19 |   <CompactModeSelect
20 |     value={value}
21 |     onChange={onChange}
22 |     options={[
23 |       {
24 |         option: 'wireframe',
25 |         label: 'Display: Wireframe',
26 |         icon: <BiCube />,
27 |       },
28 |       {
29 |         option: 'flat',
30 |         label: 'Display: Flat',
31 |         icon: <GiCube />,
32 |       },
33 |       {
34 |         option: 'solid',
35 |         label: 'Display: Solid',
36 |         icon: <FaCube />,
37 |       },
38 |       {
39 |         option: 'rendered',
40 |         label: 'Display: Rendered',
41 |         icon: <GiIceCube />,
42 |       },
43 |     ]}
44 |     settingsPanel={<ViewportShadingSettings />}
45 |   />
46 | );
47 | 
48 | export default ViewportShadingSelect;
49 | 


--------------------------------------------------------------------------------
/src/components/ViewportShadingSettings.tsx:
--------------------------------------------------------------------------------
 1 | import React, { VFC } from 'react';
 2 | import { useEditorStore } from '../store';
 3 | import shallow from 'zustand/shallow';
 4 | import EnvironmentPreview from './EnvironmentPreview';
 5 | import { Checkbox, FormControl, Heading } from './elements';
 6 | 
 7 | const ViewportShadingSettings: VFC = () => {
 8 |   const [
 9 |     hdrPaths,
10 |     selectedHdr,
11 |     useHdrAsBackground,
12 |     setSelectedHdr,
13 |     setUseHdrAsBackground,
14 |   ] = useEditorStore(
15 |     (state) => [
16 |       state.hdrPaths,
17 |       state.selectedHdr,
18 |       state.useHdrAsBackground,
19 |       state.setSelectedHdr,
20 |       state.setUseHdrAsBackground,
21 |     ],
22 |     shallow
23 |   );
24 | 
25 |   return (
26 |     <div className="w-full">
27 |       <Heading className="text-xl mb-3">Environment</Heading>
28 |       <div className="flex flex-col gap-3">
29 |         <div className="grid grid-cols-2 gap-4 auto-rows-16">
30 |           <EnvironmentPreview
31 |             url={null}
32 |             selected={selectedHdr === null}
33 |             onClick={() => {
34 |               setSelectedHdr(null);
35 |             }}
36 |           />
37 |           {hdrPaths.map((hdrPath) => (
38 |             <EnvironmentPreview
39 |               key={hdrPath}
40 |               url={hdrPath}
41 |               selected={hdrPath === selectedHdr}
42 |               onClick={() => {
43 |                 setSelectedHdr(hdrPath);
44 |               }}
45 |             />
46 |           ))}
47 |         </div>
48 |         <FormControl>
49 |           <Checkbox
50 |             checked={useHdrAsBackground}
51 |             onChange={() => setUseHdrAsBackground(!useHdrAsBackground)}
52 |           >
53 |             Use as background
54 |           </Checkbox>
55 |         </FormControl>
56 |       </div>
57 |     </div>
58 |   );
59 | };
60 | 
61 | export default ViewportShadingSettings;
62 | 


--------------------------------------------------------------------------------
/src/components/editable.tsx:
--------------------------------------------------------------------------------
  1 | import React, {
  2 |   ComponentProps,
  3 |   forwardRef,
  4 |   JSXElementConstructor,
  5 |   RefAttributes,
  6 |   useLayoutEffect,
  7 |   useRef,
  8 | } from 'react';
  9 | import {
 10 |   DirectionalLight,
 11 |   Euler,
 12 |   Group,
 13 |   Matrix4,
 14 |   Mesh,
 15 |   OrthographicCamera,
 16 |   PerspectiveCamera,
 17 |   PointLight,
 18 |   Quaternion,
 19 |   SpotLight,
 20 |   Vector3,
 21 | } from 'three';
 22 | import { EditableType, useEditorStore } from '../store';
 23 | import shallow from 'zustand/shallow';
 24 | import mergeRefs from 'react-merge-refs';
 25 | 
 26 | interface Elements {
 27 |   group: Group;
 28 |   mesh: Mesh;
 29 |   spotLight: SpotLight;
 30 |   directionalLight: DirectionalLight;
 31 |   perspectiveCamera: PerspectiveCamera;
 32 |   orthographicCamera: OrthographicCamera;
 33 |   pointLight: PointLight;
 34 | }
 35 | 
 36 | const editable = <
 37 |   T extends JSXElementConstructor<any> | EditableType,
 38 |   U extends EditableType
 39 | >(
 40 |   Component: T,
 41 |   type: U
 42 | ) =>
 43 |   forwardRef(
 44 |     (
 45 |       {
 46 |         uniqueName,
 47 |         position,
 48 |         rotation,
 49 |         scale,
 50 |         ...props
 51 |       }: ComponentProps<T> & {
 52 |         uniqueName: string;
 53 |       } & RefAttributes<Elements[U]>,
 54 |       ref
 55 |     ) => {
 56 |       const objectRef = useRef<Elements[U]>();
 57 | 
 58 |       const [addEditable, removeEditable] = useEditorStore(
 59 |         (state) => [state.addEditable, state.removeEditable],
 60 |         shallow
 61 |       );
 62 | 
 63 |       const transformDeps: string[] = [];
 64 | 
 65 |       ['x', 'y', 'z'].forEach((axis) => {
 66 |         transformDeps.push(
 67 |           props[`position-${axis}`],
 68 |           props[`rotation-${axis}`],
 69 |           props[`scale-${axis}`]
 70 |         );
 71 |       });
 72 | 
 73 |       useLayoutEffect(() => {
 74 |         // calculate initial properties before adding the editable
 75 |         const pos: Vector3 = position
 76 |           ? new Vector3(...position)
 77 |           : new Vector3();
 78 |         const rot: Vector3 = rotation
 79 |           ? new Vector3(...rotation)
 80 |           : new Vector3();
 81 |         const scal: Vector3 = scale
 82 |           ? new Vector3(...scale)
 83 |           : new Vector3(1, 1, 1);
 84 | 
 85 |         ['x', 'y', 'z'].forEach((axis, index) => {
 86 |           if (props[`position-${axis}`])
 87 |             pos.setComponent(index, props[`position-${axis}`]);
 88 |           if (props[`rotation-${axis}`])
 89 |             rot.setComponent(index, props[`rotation-${axis}`]);
 90 |           if (props[`scale-${axis}`])
 91 |             scal.setComponent(index, props[`scale-${axis}`]);
 92 |         });
 93 | 
 94 |         const quaternion = new Quaternion().setFromEuler(
 95 |           new Euler().setFromVector3(rot)
 96 |         );
 97 | 
 98 |         addEditable(type, uniqueName, {
 99 |           transform: new Matrix4().compose(pos, quaternion, scal),
100 |         });
101 | 
102 |         return () => {
103 |           removeEditable(uniqueName);
104 |         };
105 |         // eslint-disable-next-line react-hooks/exhaustive-deps
106 |       }, [
107 |         addEditable,
108 |         position,
109 |         removeEditable,
110 |         rotation,
111 |         scale,
112 |         uniqueName,
113 | 
114 |         // nasty
115 |         // eslint-disable-next-line react-hooks/exhaustive-deps
116 |         ...transformDeps,
117 |       ]);
118 | 
119 |       useLayoutEffect(() => {
120 |         const object = objectRef.current!;
121 |         // source of truth is .position, .quaternion and .scale, not the matrix, so we have to do this instead of setting the matrix
122 |         useEditorStore
123 |           .getState()
124 |           .editables[uniqueName].properties.transform.decompose(
125 |             object.position,
126 |             object.quaternion,
127 |             object.scale
128 |           );
129 | 
130 |         const unsub = useEditorStore.subscribe(
131 |           (transform: Matrix4 | null) => {
132 |             if (transform) {
133 |               useEditorStore
134 |                 .getState()
135 |                 .editables[uniqueName].properties.transform.decompose(
136 |                   object.position,
137 |                   object.quaternion,
138 |                   object.scale
139 |                 );
140 |             }
141 |           },
142 |           (state) => state.editables[uniqueName].properties.transform
143 |         );
144 | 
145 |         return () => {
146 |           unsub();
147 |         };
148 |       }, [uniqueName]);
149 | 
150 |       return (
151 |         // @ts-ignore
152 |         <Component
153 |           ref={mergeRefs([objectRef, ref])}
154 |           {...props}
155 |           userData={{
156 |             __editable: true,
157 |             __editableName: uniqueName,
158 |             __editableType: type,
159 |           }}
160 |         />
161 |       );
162 |     }
163 |   );
164 | 
165 | const createEditable = <T extends EditableType>(type: T) =>
166 |   editable(type, type);
167 | 
168 | editable.group = createEditable('group');
169 | editable.mesh = createEditable('mesh');
170 | editable.spotLight = createEditable('spotLight');
171 | editable.directionalLight = createEditable('directionalLight');
172 | editable.pointLight = createEditable('pointLight');
173 | editable.perspectiveCamera = createEditable('perspectiveCamera');
174 | editable.orthographicCamera = createEditable('orthographicCamera');
175 | 
176 | export default editable;
177 | 


--------------------------------------------------------------------------------
/src/components/elements/Button.tsx:
--------------------------------------------------------------------------------
 1 | import React, { forwardRef } from 'react';
 2 | import { Button as ButtonImpl, ButtonProps } from 'reakit';
 3 | 
 4 | export { ButtonProps };
 5 | 
 6 | const Button = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
 7 |   return (
 8 |     <ButtonImpl
 9 |       // @ts-ignore
10 |       ref={ref}
11 |       {...props}
12 |       className={`${props.className} inline-flex justify-center rounded-md px-4 py-2 font-medium bg-gray-100 text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring focus:ring-blue-300`}
13 |     />
14 |   );
15 | });
16 | 
17 | export default Button;
18 | 


--------------------------------------------------------------------------------
/src/components/elements/Checkbox.tsx:
--------------------------------------------------------------------------------
 1 | import React, { forwardRef } from 'react';
 2 | import { Checkbox as CheckboxImpl, CheckboxProps } from 'reakit';
 3 | import { useFormControlContext } from './FormControl';
 4 | 
 5 | export { CheckboxProps };
 6 | 
 7 | const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
 8 |   ({ children, ...props }, ref) => {
 9 |     const id = useFormControlContext();
10 | 
11 |     return (
12 |       <div className="flex items-start">
13 |         <div className="flex items-center h-5">
14 |           <CheckboxImpl
15 |             // @ts-ignore
16 |             {...props}
17 |             id={props.id ?? id}
18 |             ref={ref}
19 |             className="focus:ring focus:ring-opacity-50 focus:ring-blue-500 focus:ring-offset-0 h-4 w-4 text-green-800 border-gray-300 hover:border-gray-400 rounded"
20 |           />
21 |         </div>
22 |         <div className="ml-3 text-sm">
23 |           <label htmlFor={props.id ?? id} className="font-medium text-gray-700">
24 |             {children}
25 |           </label>
26 |         </div>
27 |       </div>
28 |     );
29 |   }
30 | );
31 | 
32 | export default Checkbox;
33 | 


--------------------------------------------------------------------------------
/src/components/elements/Code.tsx:
--------------------------------------------------------------------------------
 1 | import React, { VFC } from 'react';
 2 | import Highlight, { defaultProps } from 'prism-react-renderer';
 3 | import theme from 'prism-react-renderer/themes/github';
 4 | 
 5 | export interface CodeProps {
 6 |   children: string;
 7 |   block?: boolean;
 8 | }
 9 | 
10 | const Code: VFC<CodeProps> = ({ children, block }) => {
11 |   return (
12 |     <Highlight {...defaultProps} theme={theme} code={children} language="tsx">
13 |       {({ className, style, tokens, getLineProps, getTokenProps }) => (
14 |         <code
15 |           className={`${className} font-mono whitespace-pre rounded ${
16 |             block ? 'block p-4' : 'inline p-1'
17 |           }`}
18 |           style={style}
19 |         >
20 |           {tokens.map((line, i) => (
21 |             <div
22 |               {...getLineProps({ line, key: i })}
23 |               className={block ? 'block' : 'inline'}
24 |             >
25 |               {line.map((token, key) => (
26 |                 <span {...getTokenProps({ token, key })} />
27 |               ))}
28 |             </div>
29 |           ))}
30 |         </code>
31 |       )}
32 |     </Highlight>
33 |   );
34 | };
35 | export default Code;
36 | 


--------------------------------------------------------------------------------
/src/components/elements/CompactModeSelect.tsx:
--------------------------------------------------------------------------------
  1 | import React, { ReactElement, ReactNode, VFC } from 'react';
  2 | import { Group, Button } from 'reakit';
  3 | import { FiChevronDown } from '@react-icons/all-files/fi/FiChevronDown';
  4 | import { IconType } from '@react-icons/all-files';
  5 | import {
  6 |   Tooltip,
  7 |   TooltipReference,
  8 |   usePopoverState,
  9 |   useTooltipState,
 10 |   PopoverDisclosure,
 11 |   Popover,
 12 | } from '.';
 13 | 
 14 | interface OptionButtonProps<Option> {
 15 |   value: Option;
 16 |   option: Option;
 17 |   label: string;
 18 |   icon: ReactElement<IconType>;
 19 |   onClick: () => void;
 20 | }
 21 | 
 22 | const OptionButton = <Option,>({
 23 |   value,
 24 |   option,
 25 |   label,
 26 |   icon,
 27 |   onClick,
 28 | }: OptionButtonProps<Option>) => {
 29 |   const tooltip = useTooltipState();
 30 |   return (
 31 |     <>
 32 |       <TooltipReference
 33 |         {...tooltip}
 34 |         as={Button}
 35 |         className={`flex relative items-center justify-center align-middle w-auto text-sm font-semibold h-7 px-2 first:rounded-l last:rounded-r focus:outline-none focus:ring focus:ring-blue-300 focus:ring-inset ${
 36 |           option === value
 37 |             ? 'bg-green-800 hover:bg-green-900 text-white'
 38 |             : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
 39 |         }`}
 40 |         aria-label={label}
 41 |         onClick={onClick}
 42 |       >
 43 |         {icon}
 44 |       </TooltipReference>
 45 |       <Tooltip {...tooltip}>{label}</Tooltip>
 46 |     </>
 47 |   );
 48 | };
 49 | 
 50 | interface SettingsProps {
 51 |   children: ReactNode;
 52 | }
 53 | 
 54 | const Settings: VFC<SettingsProps> = ({ children }) => {
 55 |   const tooltip = useTooltipState();
 56 |   const popover = usePopoverState();
 57 | 
 58 |   return (
 59 |     <>
 60 |       <TooltipReference
 61 |         {...tooltip}
 62 |         as={'div'}
 63 |         tabIndex={-1}
 64 |         className="focus:outline-none"
 65 |       >
 66 |         <PopoverDisclosure
 67 |           // @ts-ignore
 68 |           {...popover}
 69 |           className={`flex relative items-center justify-center align-middle w-auto text-sm font-semibold h-7 px-1 rounded-r bg-gray-800 text-white hover:bg-gray-900 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-inset`}
 70 |         >
 71 |           <FiChevronDown />
 72 |         </PopoverDisclosure>
 73 |       </TooltipReference>
 74 |       <Tooltip {...tooltip}>Settings</Tooltip>
 75 |       <Popover
 76 |         {...popover}
 77 |         // this seems to be necessary to prevent the popup from forever being closed after the first opening
 78 |         hideOnClickOutside={false}
 79 |         aria-label="More options"
 80 |       >
 81 |         {children}
 82 |       </Popover>
 83 |     </>
 84 |   );
 85 | };
 86 | 
 87 | export interface CompactModeSelectProps<Option> {
 88 |   value: Option;
 89 |   onChange: (value: Option) => void;
 90 |   options: {
 91 |     option: Option;
 92 |     label: string;
 93 |     icon: ReactElement<IconType>;
 94 |   }[];
 95 |   settingsPanel?: ReactNode;
 96 | }
 97 | 
 98 | const CompactModeSelect = <Option extends string | number>({
 99 |   value,
100 |   onChange,
101 |   options,
102 |   settingsPanel,
103 | }: CompactModeSelectProps<Option>) => {
104 |   return (
105 |     <Group
106 |       // @ts-ignore
107 |       className="flex"
108 |     >
109 |       {options.map(({ label, icon, option }) => (
110 |         <OptionButton
111 |           key={option}
112 |           value={value}
113 |           option={option}
114 |           label={label}
115 |           icon={icon}
116 |           onClick={() => onChange(option)}
117 |         />
118 |       ))}
119 |       {settingsPanel && <Settings>{settingsPanel}</Settings>}
120 |     </Group>
121 |   );
122 | };
123 | 
124 | export default CompactModeSelect;
125 | 


--------------------------------------------------------------------------------
/src/components/elements/FormControl.tsx:
--------------------------------------------------------------------------------
 1 | import React, { createContext, ReactNode, useContext, VFC } from 'react';
 2 | import { useId } from '.';
 3 | 
 4 | const FormControlContext = createContext<string | undefined>(undefined);
 5 | 
 6 | interface FormControlProps {
 7 |   id?: string;
 8 |   children: ReactNode;
 9 | }
10 | 
11 | export const FormControl: VFC<FormControlProps> = ({ children, ...props }) => {
12 |   const { id } = useId(props);
13 | 
14 |   return (
15 |     <FormControlContext.Provider value={id}>
16 |       {children}
17 |     </FormControlContext.Provider>
18 |   );
19 | };
20 | 
21 | export const useFormControlContext = () => useContext(FormControlContext);
22 | 


--------------------------------------------------------------------------------
/src/components/elements/FormLabel.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ComponentProps, forwardRef } from 'react';
 2 | import { useFormControlContext } from './FormControl';
 3 | 
 4 | export type FormLabelProps = ComponentProps<'label'>;
 5 | 
 6 | const FormLabel = forwardRef<HTMLLabelElement, FormLabelProps>((props, ref) => {
 7 |   const id = useFormControlContext();
 8 | 
 9 |   return (
10 |     <label
11 |       ref={ref}
12 |       {...props}
13 |       id={props.id ?? id}
14 |       className={`${props.className} font-medium mb-2`}
15 |     />
16 |   );
17 | });
18 | 
19 | export default FormLabel;
20 | 


--------------------------------------------------------------------------------
/src/components/elements/Heading.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ComponentProps, forwardRef } from 'react';
 2 | 
 3 | export type HeadingProps = ComponentProps<'h1'>;
 4 | 
 5 | const Heading = forwardRef<HTMLHeadingElement, HeadingProps>((props, ref) => {
 6 |   return (
 7 |     // eslint-disable-next-line jsx-a11y/heading-has-content
 8 |     <h1 ref={ref} {...props} className={`${props.className} font-bold`} />
 9 |   );
10 | });
11 | 
12 | export default Heading;
13 | 


--------------------------------------------------------------------------------
/src/components/elements/IconButton.tsx:
--------------------------------------------------------------------------------
 1 | import React, { forwardRef, ReactElement } from 'react';
 2 | import { Button, ButtonProps } from 'reakit';
 3 | import { IconType } from '@react-icons/all-files';
 4 | import { Tooltip, TooltipReference, useTooltipState } from './index';
 5 | 
 6 | export interface IconButtonProps extends Exclude<ButtonProps, 'children'> {
 7 |   icon: ReactElement<IconType>;
 8 |   label: string;
 9 | }
10 | 
11 | const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
12 |   ({ label, icon, className, ...props }, ref) => {
13 |     const tooltip = useTooltipState();
14 |     return (
15 |       <>
16 |         <TooltipReference
17 |           ref={ref}
18 |           {...props}
19 |           {...tooltip}
20 |           as={Button}
21 |           className={`${className} flex relative items-center justify-center align-middle w-auto text-sm font-semibold h-7 px-2 first:rounded-l last:rounded-r bg-gray-100 text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-inset`}
22 |           aria-label={label}
23 |         >
24 |           {icon}
25 |         </TooltipReference>
26 |         <Tooltip {...tooltip}>{label}</Tooltip>
27 |       </>
28 |     );
29 |   }
30 | );
31 | 
32 | export default IconButton;
33 | 


--------------------------------------------------------------------------------
/src/components/elements/IdProvider.ts:
--------------------------------------------------------------------------------
1 | export {
2 |   unstable_IdProvider as IdProvider,
3 |   unstable_IdProviderProps as IdProviderProps,
4 |   unstable_useId as useId,
5 | } from 'reakit';
6 | 


--------------------------------------------------------------------------------
/src/components/elements/Input.tsx:
--------------------------------------------------------------------------------
 1 | import React, { forwardRef } from 'react';
 2 | import { Input as InputImpl, InputProps } from 'reakit';
 3 | import { useFormControlContext } from './FormControl';
 4 | 
 5 | export { InputProps };
 6 | 
 7 | const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
 8 |   const id = useFormControlContext();
 9 | 
10 |   return (
11 |     <InputImpl
12 |       // @ts-ignore
13 |       ref={ref}
14 |       {...props}
15 |       id={props.id ?? id}
16 |       className={`${props.className} w-full h-8 px-3 border rounded-sm focus:outline-none focus:ring focus:ring-blue-300`}
17 |     />
18 |   );
19 | });
20 | 
21 | export default Input;
22 | 


--------------------------------------------------------------------------------
/src/components/elements/Legend.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ComponentProps, forwardRef } from 'react';
 2 | 
 3 | export type LegendProps = ComponentProps<'legend'>;
 4 | 
 5 | const Input = forwardRef<HTMLLegendElement, LegendProps>((props, ref) => {
 6 |   return (
 7 |     <legend
 8 |       ref={ref}
 9 |       {...props}
10 |       className={`${props.className} font-medium mb-2`}
11 |     />
12 |   );
13 | });
14 | 
15 | export default Input;
16 | 


--------------------------------------------------------------------------------
/src/components/elements/Modal.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ComponentProps, forwardRef, VFC } from 'react';
 2 | import { Dialog, DialogBackdrop, DialogProps, useDialogState } from 'reakit';
 3 | 
 4 | // we are abstracting away stuff like baseId because we are not going to use DialogDisclosure
 5 | export type ModalProps = Pick<DialogProps, 'children' | 'visible' | 'hide'>;
 6 | 
 7 | export const Modal: VFC<ModalProps> = ({ children, ...props }) => {
 8 |   const dialog = { ...useDialogState(), ...props };
 9 | 
10 |   return (
11 |     <DialogBackdrop
12 |       // @ts-ignore
13 |       {...dialog}
14 |       className="fixed inset-0 bg-black bg-opacity-40 z-50 flex justify-center items-start"
15 |     >
16 |       <Dialog
17 |         // @ts-ignore
18 |         {...dialog}
19 |         className="flex flex-col my-14 max-w-md w-full bg-white rounded-md shadow-lg focus:outline-none"
20 |         aria-label="Dialog"
21 |       >
22 |         {children}
23 |       </Dialog>
24 |     </DialogBackdrop>
25 |   );
26 | };
27 | 
28 | export const useModal = () => {
29 |   const { show, hide, visible } = useDialogState();
30 | 
31 |   return { show, hide, visible };
32 | };
33 | 
34 | export type ModalHeaderProps = ComponentProps<'header'>;
35 | 
36 | export const ModalHeader = forwardRef<HTMLElement, ModalHeaderProps>(
37 |   ({ className, ...props }, ref) => {
38 |     return (
39 |       <header
40 |         ref={ref}
41 |         {...props}
42 |         className={`${className} flex-0 px-6 py-4 text-xl font-semibold`}
43 |       />
44 |     );
45 |   }
46 | );
47 | 
48 | export type ModalBodyProps = ComponentProps<'div'>;
49 | 
50 | export const ModalBody = forwardRef<HTMLDivElement, ModalBodyProps>(
51 |   ({ className, ...props }, ref) => {
52 |     return (
53 |       <div ref={ref} {...props} className={`${className} flex-1 px-6 py-2`} />
54 |     );
55 |   }
56 | );
57 | 
58 | export type ModalFooterProps = ComponentProps<'footer'>;
59 | 
60 | export const ModalFooter = forwardRef<HTMLElement, ModalFooterProps>(
61 |   ({ className, ...props }, ref) => {
62 |     return (
63 |       <footer
64 |         ref={ref}
65 |         {...props}
66 |         className={`${className} flex px-6 py-4 justify-end gap-3`}
67 |       />
68 |     );
69 |   }
70 | );
71 | 


--------------------------------------------------------------------------------
/src/components/elements/Popover.tsx:
--------------------------------------------------------------------------------
 1 | import React, { VFC } from 'react';
 2 | 
 3 | import {
 4 |   usePopoverState,
 5 |   Popover as PopoverImpl,
 6 |   PopoverProps,
 7 |   PopoverDisclosure,
 8 | } from 'reakit';
 9 | 
10 | export { PopoverProps, PopoverDisclosure, usePopoverState };
11 | 
12 | export const Popover: VFC<PopoverProps> = ({
13 |   className,
14 |   children,
15 |   ...props
16 | }) => {
17 |   return (
18 |     <>
19 |       <PopoverImpl
20 |         // @ts-ignore
21 |         {...props}
22 |         className="flex p-4 w-80 rounded overflow-hidden shadow-2xl focus:outline-none bg-white"
23 |       >
24 |         {/* it seems that rendering Canvas in a display: none element permanently breaks its sizing, so we don't */}
25 |         {props.visible && children}
26 |       </PopoverImpl>
27 |     </>
28 |   );
29 | };
30 | 


--------------------------------------------------------------------------------
/src/components/elements/PortalManager.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ReactNode, useLayoutEffect, useState } from 'react';
 2 | import { PortalContext } from 'reakit';
 3 | 
 4 | export interface PortalManagerProps {
 5 |   children: ReactNode;
 6 | }
 7 | 
 8 | const PortalManager: React.VFC<PortalManagerProps> = ({ children }) => {
 9 |   const wrapperRef = React.useRef<HTMLDivElement>(null);
10 | 
11 |   // force update on initial render
12 |   const [, forceUpdate] = useState(false);
13 |   useLayoutEffect(() => {
14 |     forceUpdate((i) => !i);
15 |   }, []);
16 | 
17 |   return (
18 |     <PortalContext.Provider value={wrapperRef.current}>
19 |       {children}
20 |       <div ref={wrapperRef} className="relative z-50" />
21 |     </PortalContext.Provider>
22 |   );
23 | };
24 | 
25 | export default PortalManager;
26 | 


--------------------------------------------------------------------------------
/src/components/elements/SettingsButton.tsx:
--------------------------------------------------------------------------------
 1 | import React, { ReactElement, ReactNode, VFC } from 'react';
 2 | import { FiChevronDown } from '@react-icons/all-files/fi/FiChevronDown';
 3 | import { IconType } from '@react-icons/all-files';
 4 | import {
 5 |   Popover,
 6 |   PopoverDisclosure,
 7 |   Tooltip,
 8 |   TooltipReference,
 9 |   usePopoverState,
10 |   useTooltipState,
11 | } from './index';
12 | 
13 | export interface SettingsButtonProps {
14 |   icon: ReactElement<IconType>;
15 |   label: string;
16 |   children: ReactNode;
17 | }
18 | 
19 | const SettingsButton: VFC<SettingsButtonProps> = ({
20 |   children,
21 |   icon,
22 |   label,
23 | }) => {
24 |   const tooltip = useTooltipState();
25 |   const popover = usePopoverState();
26 | 
27 |   return (
28 |     <>
29 |       <TooltipReference
30 |         {...tooltip}
31 |         as={'div'}
32 |         tabIndex={-1}
33 |         className="inline-block focus:outline-none"
34 |       >
35 |         <PopoverDisclosure
36 |           // @ts-ignore
37 |           {...popover}
38 |           className={`flex gap-1 relative items-center justify-center align-middle w-auto text-sm font-semibold h-7 px-2 rounded bg-gray-100 text-gray-700 hover:bg-gray-200 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-inset`}
39 |         >
40 |           {icon}
41 |           <FiChevronDown />
42 |         </PopoverDisclosure>
43 |       </TooltipReference>
44 |       <Tooltip {...tooltip}>{label}</Tooltip>
45 |       <Popover
46 |         {...popover}
47 |         // this seems to be necessary to prevent the popup from forever being closed after the first opening
48 |         hideOnClickOutside={false}
49 |         aria-label={label}
50 |       >
51 |         {children}
52 |       </Popover>
53 |     </>
54 |   );
55 | };
56 | 
57 | export default SettingsButton;
58 | 


--------------------------------------------------------------------------------
/src/components/elements/Tooltip.tsx:
--------------------------------------------------------------------------------
 1 | import React, { VFC } from 'react';
 2 | import {
 3 |   Tooltip as TooltipImpl,
 4 |   TooltipProps,
 5 |   TooltipReference,
 6 |   TooltipReferenceProps,
 7 |   useTooltipState,
 8 | } from 'reakit';
 9 | 
10 | export {
11 |   TooltipProps,
12 |   TooltipReference,
13 |   TooltipReferenceProps,
14 |   useTooltipState,
15 | };
16 | 
17 | export const Tooltip: VFC<TooltipProps> = ({ className, ...props }) => (
18 |   <TooltipImpl
19 |     // @ts-ignore
20 |     {...props}
21 |     className={`${className} px-2 py-1  text-white bg-gray-700 rounded-sm text-sm pointer-events-none shadow-md`}
22 |   />
23 | );
24 | 


--------------------------------------------------------------------------------
/src/components/elements/VisuallyHidden.ts:
--------------------------------------------------------------------------------
1 | export { VisuallyHidden } from 'reakit';
2 | 


--------------------------------------------------------------------------------
/src/components/elements/index.ts:
--------------------------------------------------------------------------------
 1 | export { default as Button, ButtonProps } from './Button';
 2 | export { default as Heading, HeadingProps } from './Heading';
 3 | export { default as Code, CodeProps } from './Code';
 4 | export * from './Modal';
 5 | export { default as PortalManager, PortalManagerProps } from './PortalManager';
 6 | export {
 7 |   default as CompactModeSelect,
 8 |   CompactModeSelectProps,
 9 | } from './CompactModeSelect';
10 | export * from './Tooltip';
11 | export { default as IconButton, IconButtonProps } from './IconButton';
12 | export { default as Input } from './Input';
13 | export { default as Legend, LegendProps } from './Legend';
14 | export { FormControl, useFormControlContext } from './FormControl';
15 | export { default as FormLabel, FormLabelProps } from './FormLabel';
16 | export * from './IdProvider';
17 | export * from './VisuallyHidden';
18 | export {
19 |   Popover,
20 |   PopoverProps,
21 |   usePopoverState,
22 |   PopoverDisclosure,
23 | } from './Popover';
24 | export {
25 |   default as SettingsButton,
26 |   SettingsButtonProps,
27 | } from './SettingsButton';
28 | export { default as Checkbox, CheckboxProps } from './Checkbox';
29 | 


--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render } from 'react-dom';
 3 | import Editor from './components/Editor';
 4 | export { default as editable } from './components/editable';
 5 | export { EditableState, configure, BindFunction } from './store';
 6 | 
 7 | if (process.env.NODE_ENV === 'development') {
 8 |   const editorRoot = document.createElement('div');
 9 |   document.body.appendChild(editorRoot);
10 | 
11 |   render(<Editor />, editorRoot);
12 | }
13 | 


--------------------------------------------------------------------------------
/src/store.ts:
--------------------------------------------------------------------------------
  1 | import create, { StateCreator } from 'zustand';
  2 | import {
  3 |   DefaultLoadingManager,
  4 |   Matrix4,
  5 |   Object3D,
  6 |   Scene,
  7 |   WebGLRenderer,
  8 | } from 'three';
  9 | import { MutableRefObject } from 'react';
 10 | import { OrbitControls } from '@react-three/drei';
 11 | import deepEqual from 'fast-deep-equal';
 12 | 
 13 | export type EditableType =
 14 |   | 'group'
 15 |   | 'mesh'
 16 |   | 'spotLight'
 17 |   | 'directionalLight'
 18 |   | 'pointLight'
 19 |   | 'perspectiveCamera'
 20 |   | 'orthographicCamera';
 21 | export type TransformControlsMode = 'translate' | 'rotate' | 'scale';
 22 | export type TransformControlsSpace = 'world' | 'local';
 23 | export type ViewportShading = 'wireframe' | 'flat' | 'solid' | 'rendered';
 24 | 
 25 | export interface AbstractEditable<T extends EditableType> {
 26 |   type: T;
 27 |   role: 'active' | 'removed';
 28 |   properties: {};
 29 |   initialProperties: this['properties'];
 30 | }
 31 | 
 32 | // all these identical types are to prepare for a future in which different object types have different properties
 33 | export interface EditableGroup extends AbstractEditable<'group'> {
 34 |   properties: {
 35 |     transform: Matrix4;
 36 |   };
 37 | }
 38 | 
 39 | export interface EditableMesh extends AbstractEditable<'mesh'> {
 40 |   properties: {
 41 |     transform: Matrix4;
 42 |   };
 43 | }
 44 | 
 45 | export interface EditableSpotLight extends AbstractEditable<'spotLight'> {
 46 |   properties: {
 47 |     transform: Matrix4;
 48 |   };
 49 | }
 50 | 
 51 | export interface EditableDirectionalLight
 52 |   extends AbstractEditable<'directionalLight'> {
 53 |   properties: {
 54 |     transform: Matrix4;
 55 |   };
 56 | }
 57 | 
 58 | export interface EditablePointLight extends AbstractEditable<'pointLight'> {
 59 |   properties: {
 60 |     transform: Matrix4;
 61 |   };
 62 | }
 63 | 
 64 | export interface EditablePerspectiveCamera
 65 |   extends AbstractEditable<'perspectiveCamera'> {
 66 |   properties: {
 67 |     transform: Matrix4;
 68 |   };
 69 | }
 70 | 
 71 | export interface EditableOrthographicCamera
 72 |   extends AbstractEditable<'orthographicCamera'> {
 73 |   properties: {
 74 |     transform: Matrix4;
 75 |   };
 76 | }
 77 | 
 78 | export type Editable =
 79 |   | EditableGroup
 80 |   | EditableMesh
 81 |   | EditableSpotLight
 82 |   | EditableDirectionalLight
 83 |   | EditablePointLight
 84 |   | EditablePerspectiveCamera
 85 |   | EditableOrthographicCamera;
 86 | 
 87 | export type EditableSnapshot<T extends Editable = Editable> = {
 88 |   proxyObject?: Object3D | null;
 89 | } & T;
 90 | 
 91 | export interface AbstractSerializedEditable<T extends EditableType> {
 92 |   type: T;
 93 | }
 94 | 
 95 | export interface SerializedEditableGroup
 96 |   extends AbstractSerializedEditable<'group'> {
 97 |   properties: {
 98 |     transform: number[];
 99 |   };
100 | }
101 | 
102 | export interface SerializedEditableMesh
103 |   extends AbstractSerializedEditable<'mesh'> {
104 |   properties: {
105 |     transform: number[];
106 |   };
107 | }
108 | 
109 | export interface SerializedEditableSpotLight
110 |   extends AbstractSerializedEditable<'spotLight'> {
111 |   properties: {
112 |     transform: number[];
113 |   };
114 | }
115 | 
116 | export interface SerializedEditableDirectionalLight
117 |   extends AbstractSerializedEditable<'directionalLight'> {
118 |   properties: {
119 |     transform: number[];
120 |   };
121 | }
122 | 
123 | export interface SerializedEditablePointLight
124 |   extends AbstractSerializedEditable<'pointLight'> {
125 |   properties: {
126 |     transform: number[];
127 |   };
128 | }
129 | 
130 | export interface SerializedEditablePerspectiveCamera
131 |   extends AbstractSerializedEditable<'perspectiveCamera'> {
132 |   properties: {
133 |     transform: number[];
134 |   };
135 | }
136 | 
137 | export interface SerializedEditableOrthographicCamera
138 |   extends AbstractSerializedEditable<'orthographicCamera'> {
139 |   properties: {
140 |     transform: number[];
141 |   };
142 | }
143 | 
144 | export type SerializedEditable =
145 |   | SerializedEditableGroup
146 |   | SerializedEditableMesh
147 |   | SerializedEditableSpotLight
148 |   | SerializedEditableDirectionalLight
149 |   | SerializedEditablePointLight
150 |   | SerializedEditablePerspectiveCamera
151 |   | SerializedEditableOrthographicCamera;
152 | 
153 | export interface EditableState {
154 |   editables: Record<string, SerializedEditable>;
155 | }
156 | 
157 | export type EditorStore = {
158 |   scene: Scene | null;
159 |   gl: WebGLRenderer | null;
160 |   allowImplicitInstancing: boolean;
161 |   orbitControlsRef: MutableRefObject<OrbitControls | undefined> | null;
162 |   editables: Record<string, Editable>;
163 |   // this will come in handy when we start supporting multiple canvases
164 |   canvasName: string;
165 |   initialState: EditableState | null;
166 |   selected: string | null;
167 |   transformControlsMode: TransformControlsMode;
168 |   transformControlsSpace: TransformControlsSpace;
169 |   viewportShading: ViewportShading;
170 |   editorOpen: boolean;
171 |   sceneSnapshot: Scene | null;
172 |   editablesSnapshot: Record<string, EditableSnapshot> | null;
173 |   hdrPaths: string[];
174 |   selectedHdr: string | null;
175 |   showOverlayIcons: boolean;
176 |   useHdrAsBackground: boolean;
177 |   showGrid: boolean;
178 |   showAxes: boolean;
179 | 
180 |   init: (
181 |     scene: Scene,
182 |     gl: WebGLRenderer,
183 |     allowImplicitInstancing: boolean,
184 |     initialState?: EditableState
185 |   ) => void;
186 |   setOrbitControlsRef: (
187 |     orbitControlsRef: MutableRefObject<OrbitControls | undefined>
188 |   ) => void;
189 |   addEditable: <T extends EditableType>(
190 |     type: T,
191 |     uniqueName: string,
192 |     initialProperties: Extract<Editable, { type: T }>['properties']
193 |   ) => void;
194 |   removeEditable: (uniqueName: string) => void;
195 |   setEditableTransform: (uniqueName: string, transform: Matrix4) => void;
196 |   setSelected: (name: string | null) => void;
197 |   setSelectedHdr: (hdr: string | null) => void;
198 |   setTransformControlsMode: (mode: TransformControlsMode) => void;
199 |   setTransformControlsSpace: (mode: TransformControlsSpace) => void;
200 |   setViewportShading: (mode: ViewportShading) => void;
201 |   setShowOverlayIcons: (show: boolean) => void;
202 |   setUseHdrAsBackground: (use: boolean) => void;
203 |   setShowGrid: (show: boolean) => void;
204 |   setShowAxes: (show: boolean) => void;
205 |   setEditorOpen: (open: boolean) => void;
206 |   createSnapshot: () => void;
207 |   setSnapshotProxyObject: (
208 |     proxyObject: Object3D | null,
209 |     uniqueName: string
210 |   ) => void;
211 |   serialize: () => EditableState;
212 |   isPersistedStateDifferentThanInitial: () => boolean;
213 |   applyPersistedState: () => void;
214 | };
215 | 
216 | interface PersistedState {
217 |   canvases: {
218 |     [name: string]: EditableState;
219 |   };
220 | }
221 | 
222 | const config: StateCreator<EditorStore> = (set, get) => {
223 |   setTimeout(() => {
224 |     const existingHandler = DefaultLoadingManager.onProgress;
225 |     DefaultLoadingManager.onProgress = (url, loaded, total) => {
226 |       existingHandler(url, loaded, total);
227 |       if (url.match(/\.hdr$/)) {
228 |         set((state) => {
229 |           const newPaths = new Set(state.hdrPaths);
230 |           newPaths.add(url);
231 |           return { hdrPaths: Array.from(newPaths) };
232 |         });
233 |       }
234 |     };
235 |   });
236 | 
237 |   return {
238 |     scene: null,
239 |     gl: null,
240 |     allowImplicitInstancing: false,
241 |     orbitControlsRef: null,
242 |     editables: {},
243 |     canvasName: 'default',
244 |     initialState: null,
245 |     selected: null,
246 |     transformControlsMode: 'translate',
247 |     transformControlsSpace: 'world',
248 |     viewportShading: 'rendered',
249 |     editorOpen: false,
250 |     sceneSnapshot: null,
251 |     editablesSnapshot: null,
252 |     hdrPaths: [],
253 |     selectedHdr: null,
254 |     showOverlayIcons: false,
255 |     useHdrAsBackground: true,
256 |     showGrid: true,
257 |     showAxes: true,
258 | 
259 |     init: (scene, gl, allowImplicitInstancing, initialState) => {
260 |       const editables = get().editables;
261 | 
262 |       const newEditables: Record<string, Editable> = initialState
263 |         ? Object.fromEntries(
264 |             Object.entries(initialState.editables).map(([name, editable]) => {
265 |               const originalEditable = editables[name];
266 |               return [
267 |                 name,
268 |                 {
269 |                   type: editable.type,
270 |                   role: originalEditable?.role ?? 'removed',
271 |                   properties: {
272 |                     transform: new Matrix4().fromArray(
273 |                       editable.properties.transform
274 |                     ),
275 |                   },
276 |                   initialProperties: originalEditable?.initialProperties ?? {
277 |                     transform: new Matrix4(),
278 |                   },
279 |                 },
280 |               ];
281 |             })
282 |           )
283 |         : editables;
284 | 
285 |       set({
286 |         scene,
287 |         gl,
288 |         allowImplicitInstancing,
289 |         editables: newEditables,
290 |         initialState,
291 |       });
292 |     },
293 |     addEditable: (type, uniqueName, initialProperties) =>
294 |       set((state) => {
295 |         let properties = initialProperties;
296 |         if (state.editables[uniqueName]) {
297 |           if (
298 |             state.editables[uniqueName].type !== type &&
299 |             process.env.NODE_ENV === 'development'
300 |           ) {
301 |             console.error(`Warning: There is a mismatch between the serialized type of ${uniqueName} and the one set when adding it to the scene.
302 |   Serialized: ${state.editables[uniqueName].type}.
303 |   Current: ${type}.
304 |   
305 |   This might have happened either because you changed the type of an object, in which case a re-export will solve the issue, or because you re-used the uniqueName for an object of a different type, which is an error.`);
306 |           }
307 |           if (
308 |             state.editables[uniqueName].role === 'active' &&
309 |             !state.allowImplicitInstancing
310 |           ) {
311 |             throw Error(
312 |               `Scene already has an editable object named ${uniqueName}.
313 |   If this is intentional, please set the allowImplicitInstancing prop of EditableManager to true.`
314 |             );
315 |           } else {
316 |             properties = state.editables[uniqueName].properties;
317 |           }
318 |         }
319 | 
320 |         return {
321 |           editables: {
322 |             ...state.editables,
323 |             [uniqueName]: {
324 |               type: type as EditableType,
325 |               role: 'active',
326 |               properties,
327 |               initialProperties,
328 |             },
329 |           },
330 |         };
331 |       }),
332 |     setOrbitControlsRef: (camera) => {
333 |       set({ orbitControlsRef: camera });
334 |     },
335 |     removeEditable: (name) =>
336 |       set((state) => {
337 |         const { [name]: removed, ...rest } = state.editables;
338 |         return {
339 |           editables: {
340 |             ...rest,
341 |             [name]: { ...removed, role: 'removed' },
342 |           },
343 |         };
344 |       }),
345 |     setEditableTransform: (uniqueName, transform) => {
346 |       set((state) => ({
347 |         editables: {
348 |           ...state.editables,
349 |           [uniqueName]: {
350 |             ...state.editables[uniqueName],
351 |             properties: { transform },
352 |           },
353 |         },
354 |       }));
355 |     },
356 |     setSelected: (name) => {
357 |       set({ selected: name });
358 |     },
359 |     setSelectedHdr: (hdr) => {
360 |       set({ selectedHdr: hdr });
361 |     },
362 |     setTransformControlsMode: (mode) => {
363 |       set({ transformControlsMode: mode });
364 |     },
365 |     setTransformControlsSpace: (mode) => {
366 |       set({ transformControlsSpace: mode });
367 |     },
368 |     setViewportShading: (mode) => {
369 |       set({ viewportShading: mode });
370 |     },
371 |     setShowOverlayIcons: (show) => {
372 |       set({ showOverlayIcons: show });
373 |     },
374 |     setUseHdrAsBackground: (use) => {
375 |       set({ useHdrAsBackground: use });
376 |     },
377 |     setShowGrid: (show) => {
378 |       set({ showGrid: show });
379 |     },
380 |     setShowAxes: (show) => {
381 |       set({ showAxes: show });
382 |     },
383 |     setEditorOpen: (open) => {
384 |       set({ editorOpen: open });
385 |     },
386 |     createSnapshot: () => {
387 |       set((state) => ({
388 |         sceneSnapshot: state.scene?.clone(),
389 |         editablesSnapshot: state.editables,
390 |       }));
391 |     },
392 |     setSnapshotProxyObject: (proxyObject, uniqueName) => {
393 |       set((state) => ({
394 |         editablesSnapshot: {
395 |           ...state.editablesSnapshot,
396 |           [uniqueName]: {
397 |             ...state.editablesSnapshot![uniqueName],
398 |             proxyObject,
399 |           },
400 |         },
401 |       }));
402 |     },
403 |     serialize: () => ({
404 |       editables: Object.fromEntries(
405 |         Object.entries(get().editables).map(([name, editable]) => [
406 |           name,
407 |           {
408 |             type: editable.type,
409 |             properties: {
410 |               transform: editable.properties.transform.toArray(),
411 |             },
412 |           },
413 |         ])
414 |       ),
415 |     }),
416 |     isPersistedStateDifferentThanInitial: () => {
417 |       const initialState = get().initialState;
418 |       const canvasName = get().canvasName!;
419 | 
420 |       if (!initialState || !initialPersistedState) {
421 |         return false;
422 |       }
423 | 
424 |       return !deepEqual(
425 |         initialPersistedState.canvases[canvasName],
426 |         initialState
427 |       );
428 |     },
429 |     applyPersistedState: () => {
430 |       const editables = get().editables;
431 |       const canvasName = get().canvasName!;
432 | 
433 |       if (!initialPersistedState) {
434 |         return;
435 |       }
436 | 
437 |       const newEditables: Record<string, Editable> = Object.fromEntries(
438 |         Object.entries(
439 |           initialPersistedState.canvases[canvasName].editables
440 |         ).map(([name, editable]) => {
441 |           const originalEditable = editables[name];
442 |           return [
443 |             name,
444 |             {
445 |               type: editable.type,
446 |               role: originalEditable?.role ?? 'removed',
447 |               properties: {
448 |                 transform: new Matrix4().fromArray(
449 |                   editable.properties.transform
450 |                 ),
451 |               },
452 |               initialProperties: originalEditable?.initialProperties ?? {
453 |                 transform: new Matrix4(),
454 |               },
455 |             },
456 |           ];
457 |         })
458 |       );
459 | 
460 |       set({
461 |         editables: newEditables,
462 |       });
463 |     },
464 |   };
465 | };
466 | 
467 | export const useEditorStore = create<EditorStore>(config);
468 | 
469 | const initPersistence = (
470 |   key: string
471 | ): [PersistedState | null, (() => void) | undefined] => {
472 |   let initialPersistedState: PersistedState | null = null;
473 |   let unsub;
474 | 
475 |   if (process.env.NODE_ENV === 'development') {
476 |     try {
477 |       const rawPersistedState = localStorage.getItem(key);
478 |       if (rawPersistedState) {
479 |         initialPersistedState = JSON.parse(rawPersistedState);
480 |       }
481 |     } catch (e) {}
482 | 
483 |     unsub = useEditorStore.subscribe(
484 |       () => {
485 |         const canvasName = useEditorStore.getState().canvasName;
486 |         const serialize = useEditorStore.getState().serialize;
487 |         if (canvasName) {
488 |           const editables = serialize();
489 |           localStorage.setItem(
490 |             key,
491 |             JSON.stringify({
492 |               canvases: {
493 |                 [canvasName]: editables,
494 |               },
495 |             })
496 |           );
497 |         }
498 |       },
499 |       (state) => state.editables
500 |     );
501 |   }
502 | 
503 |   return [initialPersistedState, unsub];
504 | };
505 | 
506 | let [initialPersistedState, unsub] = initPersistence('react-three-editable_');
507 | 
508 | export type BindFunction = (options?: {
509 |   allowImplicitInstancing?: boolean;
510 |   state?: EditableState;
511 | }) => (options: { gl: WebGLRenderer; scene: Scene }) => void;
512 | 
513 | export const configure = ({
514 |   localStorageNamespace = '',
515 |   enablePersistence = true,
516 | } = {}): BindFunction => {
517 |   if (unsub) {
518 |     unsub();
519 |   }
520 | 
521 |   if (enablePersistence) {
522 |     const persistence = initPersistence(
523 |       `react-three-editable_${localStorageNamespace}`
524 |     );
525 | 
526 |     initialPersistedState = persistence[0];
527 |     unsub = persistence[1];
528 |   } else {
529 |     initialPersistedState = null;
530 |     unsub = undefined;
531 |   }
532 | 
533 |   return ({ allowImplicitInstancing = false, state } = {}) => {
534 |     return ({ gl, scene }) => {
535 |       const init = useEditorStore.getState().init;
536 |       init(scene, gl, allowImplicitInstancing, state);
537 |     };
538 |   };
539 | };
540 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   /*
 7 |     Shadow dom base styles
 8 |     ========
 9 |     */
10 | 
11 |   #react-three-editable-editor-root {
12 |     -moz-tab-size: 4;
13 |     tab-size: 4;
14 |     line-height: 1.15; /* 1 */
15 |     -webkit-text-size-adjust: 100%; /* 2 */
16 |     margin: 0;
17 |     font-family: system-ui, -apple-system,
18 |       /* Firefox supports this but not yet `system-ui` */ 'Segoe UI', Roboto,
19 |       Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
20 |   }
21 | 
22 |   canvas {
23 |     outline: none
24 |   }
25 | }
26 | 
27 | 


--------------------------------------------------------------------------------
/src/types/index.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.css' {
2 |   const styles: string;
3 |   export default styles;
4 | }
5 | 


--------------------------------------------------------------------------------
/stories/Button.stories.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Meta, Story } from '@storybook/react';
 3 | import { Button } from '../src/components/elements';
 4 | 
 5 | const meta: Meta = {
 6 |   title: 'Button',
 7 |   component: Button,
 8 |   argTypes: { onClick: { action: 'onClick' } },
 9 |   parameters: {
10 |     controls: { expanded: false },
11 |   },
12 | };
13 | 
14 | export default meta;
15 | 
16 | const Template: Story = (args) => <Button {...args} />;
17 | 
18 | export const Default = Template.bind({});
19 | 
20 | Default.args = {
21 |   children: 'Button',
22 | };
23 | 


--------------------------------------------------------------------------------
/stories/Code.stories.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Meta, Story } from '@storybook/react';
 3 | import { Code } from '../src/components/elements';
 4 | 
 5 | const meta: Meta = {
 6 |   title: 'Code',
 7 |   component: Code,
 8 |   argTypes: { onClick: { action: 'onClick' } },
 9 |   parameters: {
10 |     controls: { expanded: false },
11 |   },
12 |   decorators: [
13 |     (Story) => (
14 |       <div className="bg-white">
15 |         <Story />
16 |       </div>
17 |     ),
18 |   ],
19 | };
20 | 
21 | export default meta;
22 | 
23 | const Template: Story = (args) => (
24 |   <div className="p-5">
25 |     Surrounding <Code {...args} /> text
26 |   </div>
27 | );
28 | 
29 | export const Inline = Template.bind({});
30 | export const Block = Template.bind({});
31 | 
32 | Inline.args = {
33 |   children: '<Editor />',
34 | };
35 | 
36 | Block.args = {
37 |   block: true,
38 |   children: '<Canvas>\n  <EditableManager /> {/* !!! */}\n</Canvas>',
39 | };
40 | 


--------------------------------------------------------------------------------
/stories/CompactModeSelect.stories.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Meta, Story } from '@storybook/react';
 3 | import { BiAbacus } from '@react-icons/all-files/bi/BiAbacus';
 4 | import { BiBullseye } from '@react-icons/all-files/bi/BiBullseye';
 5 | import { BiCube } from '@react-icons/all-files/bi/BiCube';
 6 | import { CompactModeSelect } from '../src/components/elements';
 7 | 
 8 | const meta: Meta = {
 9 |   title: 'CompactModeSelect',
10 |   component: CompactModeSelect,
11 |   argTypes: { onChange: { action: 'onChange' } },
12 |   parameters: {
13 |     controls: { expanded: false },
14 |   },
15 | };
16 | 
17 | export default meta;
18 | 
19 | const Template: Story = (args) => <CompactModeSelect {...args} />;
20 | 
21 | export const Default = Template.bind({});
22 | 
23 | Default.args = {
24 |   value: 'first',
25 |   options: [
26 |     {
27 |       option: 'first',
28 |       label: 'First',
29 |       icon: <BiBullseye />,
30 |     },
31 |     {
32 |       option: 'second',
33 |       label: 'Second',
34 |       icon: <BiCube />,
35 |     },
36 |     {
37 |       option: 'third',
38 |       label: 'Third',
39 |       icon: <BiAbacus />,
40 |     },
41 |   ],
42 |   settingsPanel: <div>Hi</div>,
43 | };
44 | 


--------------------------------------------------------------------------------
/stories/Editor.stories.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Meta, Story } from '@storybook/react';
 3 | import { configure } from '../src/store';
 4 | // @ts-ignore
 5 | import Setup from './Setup';
 6 | import editableState from './editableState.json';
 7 | import Editor from '../src/components/Editor';
 8 | 
 9 | const bind = configure({
10 |   localStorageNamespace: 'Storybook',
11 |   enablePersistence: true,
12 | });
13 | 
14 | const meta: Meta = {
15 |   title: 'Editor',
16 |   component: Editor,
17 |   argTypes: {},
18 |   parameters: {
19 |     controls: { expanded: false },
20 |   },
21 | };
22 | 
23 | export default meta;
24 | 
25 | const Template: Story = (args) => (
26 |   <>
27 |     <Editor />
28 |     <Setup onCreated={bind({ state: args.editableState })} />
29 |   </>
30 | );
31 | 
32 | // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
33 | // https://storybook.js.org/docs/react/workflows/unit-testing
34 | export const Default = Template.bind({});
35 | 
36 | export const WithInitialState = Template.bind({});
37 | 
38 | Default.args = {};
39 | WithInitialState.args = { editableState };
40 | 


--------------------------------------------------------------------------------
/stories/FormLabel.stories.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Meta, Story } from '@storybook/react';
 3 | import { FormLabel } from '../src/components/elements';
 4 | 
 5 | const meta: Meta = {
 6 |   title: 'FormLabel',
 7 |   component: FormLabel,
 8 |   parameters: {
 9 |     controls: { expanded: false },
10 |   },
11 | };
12 | 
13 | export default meta;
14 | 
15 | const Template: Story = (args) => <FormLabel {...args} />;
16 | 
17 | export const Default = Template.bind({});
18 | 
19 | Default.args = {
20 |   children: "I'm a label",
21 | };
22 | 


--------------------------------------------------------------------------------
/stories/Heading.stories.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Meta, Story } from '@storybook/react';
 3 | import { Heading } from '../src/components/elements';
 4 | 
 5 | const meta: Meta = {
 6 |   title: 'Heading',
 7 |   component: Heading,
 8 |   argTypes: { onClick: { action: 'onClick' } },
 9 |   parameters: {
10 |     controls: { expanded: false },
11 |   },
12 |   decorators: [
13 |     (Story) => (
14 |       <div className="bg-white">
15 |         <Story />
16 |       </div>
17 |     ),
18 |   ],
19 | };
20 | 
21 | export default meta;
22 | 
23 | const Template: Story = (args) => <Heading {...args} />;
24 | 
25 | export const Default = Template.bind({});
26 | 
27 | Default.args = {
28 |   children: "I'm a Heading",
29 | };
30 | 


--------------------------------------------------------------------------------
/stories/IconButton.stories.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Meta, Story } from '@storybook/react';
 3 | import { Gi3DHammer } from '@react-icons/all-files/gi/Gi3DHammer';
 4 | import { IconButton } from '../src/components/elements';
 5 | 
 6 | const meta: Meta = {
 7 |   title: 'IconButton',
 8 |   component: IconButton,
 9 |   argTypes: { onClick: { action: 'onClick' } },
10 |   parameters: {
11 |     controls: { expanded: false },
12 |   },
13 | };
14 | 
15 | export default meta;
16 | 
17 | const Template: Story = (args) => <IconButton {...args} />;
18 | 
19 | export const Default = Template.bind({});
20 | 
21 | Default.args = {
22 |   icon: <Gi3DHammer />,
23 |   label: 'This a label',
24 | };
25 | 


--------------------------------------------------------------------------------
/stories/Input.stories.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Meta, Story } from '@storybook/react';
 3 | import { Input } from '../src/components/elements';
 4 | 
 5 | const meta: Meta = {
 6 |   title: 'Input',
 7 |   component: Input,
 8 |   argTypes: { onChange: { action: 'onChange' } },
 9 |   parameters: {
10 |     controls: { expanded: false },
11 |   },
12 | };
13 | 
14 | export default meta;
15 | 
16 | const Template: Story = (args) => <Input {...args} />;
17 | 
18 | export const Default = Template.bind({});
19 | 
20 | Default.args = {};
21 | 


--------------------------------------------------------------------------------
/stories/Legend.stories.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Meta, Story } from '@storybook/react';
 3 | import { Legend } from '../src/components/elements';
 4 | 
 5 | const meta: Meta = {
 6 |   title: 'Legend',
 7 |   component: Legend,
 8 |   parameters: {
 9 |     controls: { expanded: false },
10 |   },
11 | };
12 | 
13 | export default meta;
14 | 
15 | const Template: Story = (args) => <Legend {...args} />;
16 | 
17 | export const Default = Template.bind({});
18 | 
19 | Default.args = {
20 |   children: "I'm a legend",
21 | };
22 | 


--------------------------------------------------------------------------------
/stories/Modal.stories.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Meta, Story } from '@storybook/react';
 3 | import {
 4 |   Button,
 5 |   Modal,
 6 |   ModalBody,
 7 |   ModalFooter,
 8 |   ModalHeader,
 9 |   PortalManager,
10 | } from '../src/components/elements';
11 | 
12 | const meta: Meta = {
13 |   title: 'Modal',
14 |   component: Modal,
15 |   argTypes: { onClick: { action: 'onClick' } },
16 |   parameters: {
17 |     controls: { expanded: false },
18 |   },
19 |   decorators: [
20 |     (Story) => (
21 |       <PortalManager>
22 |         <Story />
23 |       </PortalManager>
24 |     ),
25 |   ],
26 | };
27 | 
28 | export default meta;
29 | 
30 | const Template: Story = (args) => <Modal {...args} />;
31 | 
32 | export const Default = Template.bind({});
33 | 
34 | Default.args = {
35 |   visible: true,
36 |   children: (
37 |     <>
38 |       <ModalHeader>Saved state found</ModalHeader>
39 |       <ModalBody>Would you like to use initial state or saved state?</ModalBody>
40 |       <ModalFooter>
41 |         <Button className="flex-1">Saved</Button>
42 |         <Button className="flex-1">Initial</Button>
43 |       </ModalFooter>
44 |     </>
45 |   ),
46 | };
47 | 


--------------------------------------------------------------------------------
/stories/Popover.stories.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Meta, Story } from '@storybook/react';
 3 | import {
 4 |   Popover,
 5 |   PopoverDisclosure,
 6 |   PortalManager,
 7 |   usePopoverState,
 8 | } from '../src/components/elements';
 9 | import EnvironmentPreview from '../src/components/EnvironmentPreview';
10 | 
11 | const meta: Meta = {
12 |   title: 'Popover',
13 |   component: Popover,
14 |   parameters: {
15 |     controls: { expanded: false },
16 |   },
17 |   decorators: [
18 |     (Story) => (
19 |       <PortalManager>
20 |         <Story />
21 |       </PortalManager>
22 |     ),
23 |   ],
24 | };
25 | 
26 | export default meta;
27 | 
28 | const Template: Story = (args) => {
29 |   const popover = usePopoverState();
30 |   return (
31 |     <>
32 |       <PopoverDisclosure
33 |         // @ts-ignore
34 |         {...popover}
35 |       >
36 |         Popover target
37 |       </PopoverDisclosure>
38 |       <Popover {...popover} {...args} />
39 |     </>
40 |   );
41 | };
42 | 
43 | export const Default = Template.bind({});
44 | 
45 | Default.args = {
46 |   children: (
47 |     <div className="grid grid-cols-2 gap-4 auto-rows-14">
48 |       <EnvironmentPreview url="/equi.hdr" />
49 |       <EnvironmentPreview url="/equi.hdr" />
50 |     </div>
51 |   ),
52 |   visible: true,
53 | };
54 | 


--------------------------------------------------------------------------------
/stories/SetingsButton.stories.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Meta, Story } from '@storybook/react';
 3 | import { AiFillEye } from '@react-icons/all-files/ai/AiFillEye';
 4 | import { SettingsButton } from '../src/components/elements';
 5 | 
 6 | const meta: Meta = {
 7 |   title: 'SettingsButton',
 8 |   component: SettingsButton,
 9 |   parameters: {
10 |     controls: { expanded: false },
11 |   },
12 | };
13 | 
14 | export default meta;
15 | 
16 | const Template: Story = (args) => <SettingsButton {...args} />;
17 | 
18 | export const Default = Template.bind({});
19 | 
20 | Default.args = {
21 |   icon: <AiFillEye />,
22 |   label: 'This a label',
23 |   children: <div>Hi</div>,
24 | };
25 | 


--------------------------------------------------------------------------------
/stories/Setup.tsx:
--------------------------------------------------------------------------------
  1 | import React, { ReactNode, VFC, Suspense, useRef } from 'react';
  2 | import { Canvas, ContainerProps } from 'react-three-fiber';
  3 | import Suitcase from './Suitcase';
  4 | 
  5 | import {
  6 |   Box,
  7 |   Plane,
  8 |   Sphere,
  9 |   useGLTF,
 10 |   PerspectiveCamera,
 11 |   Environment,
 12 | } from '@react-three/drei';
 13 | import e from '../src/components/editable';
 14 | 
 15 | interface SetupProps extends Omit<ContainerProps, 'children'> {
 16 |   children?: ReactNode;
 17 |   cameraPosition?: [number, number, number];
 18 |   controls?: boolean;
 19 | }
 20 | 
 21 | const Suzanne = () => {
 22 |   const suzanne = useGLTF('/suzanne.glb');
 23 | 
 24 |   return <primitive object={suzanne.scene} />;
 25 | };
 26 | 
 27 | const EditableCamera = e(PerspectiveCamera, 'perspectiveCamera');
 28 | const EditablePlane = e(Plane, 'mesh');
 29 | 
 30 | const SetupScene = () => {
 31 |   // const material = useResource<Material>();
 32 |   const material = useRef();
 33 |   return (
 34 |     <>
 35 |       <EditableCamera makeDefault uniqueName="Camera1" />
 36 |       <Suspense fallback={null}>
 37 |         {/* @ts-ignore */}
 38 |         <Environment background files="equi.hdr" path={'/'} />
 39 |       </Suspense>
 40 |       <ambientLight intensity={0.2} />
 41 |       <e.spotLight
 42 |         position={[5, 5, 5]}
 43 |         penumbra={1}
 44 |         angle={Math.PI / 6}
 45 |         shadow-mapSize-width={2048}
 46 |         shadow-mapSize-height={2048}
 47 |         castShadow
 48 |         uniqueName="SpotLight1"
 49 |       />
 50 |       <pointLight position={[-10, 30, 30]} />
 51 |       <EditablePlane
 52 |         rotation={[-Math.PI / 2, 0, 0]}
 53 |         scale={[10, 10, 10]}
 54 |         material={material.current}
 55 |         receiveShadow
 56 |         uniqueName="ground"
 57 |       >
 58 |         <meshStandardMaterial />
 59 |       </EditablePlane>
 60 |       <Box castShadow receiveShadow position={[-3, 3, -3]}>
 61 |         <meshStandardMaterial color="red" />
 62 |       </Box>
 63 |       <group position={[0, -1, 0]}>
 64 |         <e.group uniqueName="monkey" position={[0, 3, 0]}>
 65 |           <Suspense fallback={null}>
 66 |             <Suzanne />
 67 |             <Suitcase />
 68 |           </Suspense>
 69 |         </e.group>
 70 |         <group position={[0, 1, 0]} scale={[2, 1, 1]}>
 71 |           <e.group position={[0.5, 0.5, 0.5]} uniqueName="Box1">
 72 |             <Box castShadow receiveShadow>
 73 |               <meshStandardMaterial color="hotpink" />
 74 |             </Box>
 75 |           </e.group>
 76 |           <e.group position={[3, 2, 1]} uniqueName="Box2">
 77 |             <Sphere material={material.current} castShadow receiveShadow>
 78 |               <meshStandardMaterial />
 79 |             </Sphere>
 80 |           </e.group>
 81 |           <e.mesh uniqueName="Mesh1">
 82 |             <dodecahedronBufferGeometry />
 83 |             <meshStandardMaterial />
 84 |             <e.mesh uniqueName="Mesh2" position={[0, 3, 0]}>
 85 |               <dodecahedronBufferGeometry />
 86 |               <meshStandardMaterial color="red" />
 87 |             </e.mesh>
 88 |           </e.mesh>
 89 |         </group>
 90 |       </group>
 91 |     </>
 92 |   );
 93 | };
 94 | 
 95 | const EBox = e(Box, 'mesh');
 96 | 
 97 | const SmallScene = () => {
 98 |   return (
 99 |     <EBox castShadow receiveShadow uniqueName="Box">
100 |       <meshBasicMaterial color="hotpink" />
101 |     </EBox>
102 |   );
103 | };
104 | 
105 | const Setup: VFC<SetupProps> = ({
106 |   children,
107 |   cameraPosition = [-5, 5, 5] as [number, number, number],
108 |   ...props
109 | }) => {
110 |   return (
111 |     <div
112 |       style={{
113 |         height: '100%',
114 |       }}
115 |     >
116 |       <Canvas
117 |         colorManagement
118 |         shadowMap
119 |         camera={{ position: cameraPosition }}
120 |         pixelRatio={window.devicePixelRatio}
121 |         {...props}
122 |       >
123 |         {children}
124 |         <SetupScene />
125 |       </Canvas>
126 |     </div>
127 |   );
128 | };
129 | 
130 | export default Setup;
131 | 


--------------------------------------------------------------------------------
/stories/Suitcase.tsx:
--------------------------------------------------------------------------------
 1 | import * as THREE from 'three';
 2 | import React, { useRef } from 'react';
 3 | import { useLoader } from 'react-three-fiber';
 4 | import { GLTFLoader, GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
 5 | import e from '../src/components/editable';
 6 | 
 7 | type GLTFResult = GLTF & {
 8 |   nodes: {
 9 |     about_button: THREE.Mesh;
10 |     interests_button: THREE.Mesh;
11 |     projects_button: THREE.Mesh;
12 |     social_links_button: THREE.Mesh;
13 |     work_button: THREE.Mesh;
14 |     suitcase_top: THREE.Mesh;
15 |     handle: THREE.Mesh;
16 |     clasp: THREE.Mesh;
17 |     clasp001: THREE.Mesh;
18 |     static: THREE.Mesh;
19 |     static001: THREE.Mesh;
20 |     Text: THREE.Mesh;
21 |   };
22 |   materials: {
23 |     realistic: THREE.MeshStandardMaterial;
24 |   };
25 | };
26 | 
27 | export default function Model(props: JSX.IntrinsicElements['group']) {
28 |   const group = useRef<THREE.Group>();
29 |   const { nodes } = useLoader<GLTFResult>(GLTFLoader, '/suitcase.gltf');
30 | 
31 |   const lidRef = useRef<THREE.Mesh>();
32 | 
33 |   // useFrame(() => {
34 |   //   lidRef.current!.rotation.set(
35 |   //     ...(animation.lid.rotation.get() as [number, number, number])
36 |   //   );
37 |   // });
38 | 
39 |   return (
40 |     <>
41 |       <e.group
42 |         ref={group}
43 |         {...props}
44 |         dispose={null}
45 |         rotation={[0, Math.PI, 0]}
46 |         uniqueName="Suitcase"
47 |       >
48 |         <primitive object={nodes.static} />
49 |         <e.mesh
50 |           ref={lidRef}
51 |           geometry={nodes.suitcase_top.geometry}
52 |           material={nodes.suitcase_top.material}
53 |           position={[0, 1.53, 2.79]}
54 |           rotation={[0, 0, 0]}
55 |           uniqueName="Lid"
56 |         >
57 |           <mesh
58 |             material={nodes.clasp.material}
59 |             geometry={nodes.clasp.geometry}
60 |             position={[-2.28, 0.38, -5.68]}
61 |           />
62 |           <mesh
63 |             material={nodes.clasp001.material}
64 |             geometry={nodes.clasp001.geometry}
65 |             position={[2.28, 0.38, -5.68]}
66 |           />
67 |           <primitive object={nodes.static001} />
68 |         </e.mesh>
69 |         <e.mesh
70 |           geometry={nodes.Text.geometry}
71 |           uniqueName="React Three Editable Text"
72 |         >
73 |           <meshStandardMaterial color="hotpink" />
74 |         </e.mesh>
75 |       </e.group>
76 |     </>
77 |   );
78 | }
79 | 


--------------------------------------------------------------------------------
/stories/Tooltip.stories.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Meta, Story } from '@storybook/react';
 3 | import {
 4 |   Tooltip,
 5 |   Button,
 6 |   useTooltipState,
 7 |   TooltipReference,
 8 | } from '../src/components/elements';
 9 | 
10 | const meta: Meta = {
11 |   title: 'Tooltip',
12 |   component: Tooltip,
13 |   parameters: {
14 |     controls: { expanded: false },
15 |   },
16 | };
17 | 
18 | export default meta;
19 | 
20 | const Template: Story = (args) => {
21 |   const tooltip = useTooltipState();
22 | 
23 |   return (
24 |     <>
25 |       <TooltipReference {...tooltip} as={Button}>
26 |         Hover me
27 |       </TooltipReference>
28 |       <Tooltip {...tooltip} {...args} />
29 |     </>
30 |   );
31 | };
32 | 
33 | export const Default = Template.bind({});
34 | 
35 | Default.args = {
36 |   children: "I'm a tooltip!",
37 | };
38 | 


--------------------------------------------------------------------------------
/stories/editableState.json:
--------------------------------------------------------------------------------
1 | {"editables":{"Suitcase":{"type":"group","properties":{"transform":[-1.0000000000000009,-8.603688911431441e-17,-8.715074031899993e-17,0,1.848892746611747e-32,0.7116397999788806,-0.7025445146650987,0,1.2246467991473537e-16,-0.702544514665099,-0.7116397999788808,0,0,7.530225676351588,0,1]}},"Lid":{"type":"mesh","properties":{"transform":[-0.22090751021067234,0.585216432966638,-0.7802061256606017,0,0.6335287095142456,-0.522110104704498,-0.5710012371148357,0,-0.7415128091636289,-0.6204214415631223,-0.25541336827778016,0,0.246725282310582,1.53,14.601854246297883,1]}},"React Three Editable Text":{"type":"mesh","properties":{"transform":[1,-1.2162312555952148e-16,-1.0813243808899676e-16,0,1.2162312555952148e-16,0.11703163586200704,0.9931281871981394,0,-1.0813243808899676e-16,-0.9931281871981394,0.11703163586200704,0,-3.0515538687713516e-16,5.320035190745957,-1.8292174157257863,1]}},"Camera1":{"type":"perspectiveCamera","properties":{"transform":[1,0,0,0,0,0.9024893266307351,-0.4307122186769276,0,0,0.4307122186769276,0.9024893266307351,0,-0.5703944857802101,14.208606591060851,14.998407059573633,1]}},"SpotLight1":{"type":"spotLight","properties":{"transform":[1,0,0,0,0,1,0,0,0,0,1,0,6.20426254014603,2.4923406012642824,12.682341247650957,1]}},"ground":{"type":"mesh","properties":{"transform":[10,0,0,0,0,2.220446049250313e-15,-10,0,0,10,2.220446049250313e-15,0,-0.1954718248471996,0,0.08297889825568738,1]}},"monkey":{"type":"group","properties":{"transform":[1,0,0,0,0,1,0,0,0,0,1,0,0,3,0,1]}},"Box1":{"type":"group","properties":{"transform":[1,0,0,0,0,1,0,0,0,0,1,0,0.5,0.5,0.5,1]}},"Box2":{"type":"group","properties":{"transform":[1,0,0,0,0,1,0,0,0,0,1,0,3,2,1,1]}},"Mesh1":{"type":"mesh","properties":{"transform":[1,0,0,0,0,1,0,0,0,0,1,0,0.1377318469177751,0.7845714553446164,0.031755957823530245,1]}},"Mesh2":{"type":"mesh","properties":{"transform":[1,0,0,0,0,1,0,0,0,0,1,0,0,3,0,1]}}}}
2 | 


--------------------------------------------------------------------------------
/stories/public/equi.hdr:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AndrewPrifer/react-three-editable/6e4224d8466df80b4118cd70545fa3a39fb1c74f/stories/public/equi.hdr


--------------------------------------------------------------------------------
/stories/public/suzanne.glb:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AndrewPrifer/react-three-editable/6e4224d8466df80b4118cd70545fa3a39fb1c74f/stories/public/suzanne.glb


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   purge: {
 3 |     layers: ['components', 'utilities'],
 4 |     content: ['./src/**/*.tsx'],
 5 |   },
 6 |   darkMode: false, // or 'media' or 'class'
 7 |   theme: {
 8 |     extend: {
 9 |       zIndex: {
10 |         '-10': '-10',
11 |       },
12 |       gridAutoRows: (theme) => theme('height'),
13 |       fontSize: {
14 |         xxs: ['0.5rem', '0.75rem'],
15 |       },
16 |     },
17 |   },
18 |   variants: {
19 |     extend: {
20 |       borderRadius: ['first', 'last'],
21 |       ringWidth: ['hover'],
22 |       ringColor: ['hover'],
23 |     },
24 |   },
25 |   plugins: [require('@tailwindcss/forms')],
26 | };
27 | 


--------------------------------------------------------------------------------
/test/index.test.tsx:
--------------------------------------------------------------------------------
1 | describe('Editor', () => {
2 |   it("No tests for now because Jest doesn't handle three's ESM imports. If you know how to fix this, please open a pull request. :)", () => {});
3 | });
4 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
 3 |   "include": ["src", "types"],
 4 |   "compilerOptions": {
 5 |     "target": "ES5",
 6 |     "resolveJsonModule": true,
 7 |     "module": "esnext",
 8 |     "lib": ["dom", "esnext"],
 9 |     "importHelpers": true,
10 |     // output .d.ts declaration files for consumers
11 |     "declaration": true,
12 |     // output .js.map sourcemap files for consumers
13 |     "sourceMap": true,
14 |     // match output dir to input dir. e.g. dist/index instead of dist/src/index
15 |     "rootDir": "./src",
16 |     // stricter type-checking for stronger correctness. Recommended by TS
17 |     "strict": true,
18 |     // linter checks for common issues
19 |     "noImplicitReturns": true,
20 |     "noFallthroughCasesInSwitch": true,
21 |     // noUnused* overlap with @typescript-eslint/no-unused-vars, can disable if duplicative
22 |     "noUnusedLocals": true,
23 |     "noUnusedParameters": true,
24 |     // use Node's module resolution algorithm, instead of the legacy TS one
25 |     "moduleResolution": "node",
26 |     // transpile JSX to React.createElement
27 |     "jsx": "react",
28 |     // interop between ESM and CJS modules. Recommended by TS
29 |     "esModuleInterop": true,
30 |     // significant perf increase by skipping checking .d.ts files, particularly those in node_modules. Recommended by TS
31 |     "skipLibCheck": true,
32 |     // error out if import and file system have a casing mismatch. Recommended by TS
33 |     "forceConsistentCasingInFileNames": true,
34 |     // `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc`
35 |     "noEmit": true
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/tsdx.config.js:
--------------------------------------------------------------------------------
 1 | const postcss = require('rollup-plugin-postcss');
 2 | 
 3 | module.exports = {
 4 |   rollup(config, options) {
 5 |     config.plugins.push(
 6 |       postcss({
 7 |         inject: false,
 8 |       })
 9 |     );
10 |     config.treeshake.moduleSideEffects = false;
11 |     return config;
12 |   },
13 | };
14 | 


--------------------------------------------------------------------------------