Using nudgeMultiplier and range currently only uses range.

import { types as t } from '@theatre/core'

sheet
  .object('Example', {
    multiplierWorks: t.number(0, { nudgeMultiplier: 1 }),
    rangeWorks: t.number(0, { range: [-1, 100] }),
    nudgeError: t.number(0, { nudgeMultiplier: 1, range: [-1, 100] }),
  })
  .onValuesChange((values: any) => {
    console.log(values)
  })

Adds support for alt + \ by key (while still supporting the old shortcut e.code === 'Backslash' and adding support for e.code === 'IntlBackslash').

Updates the logged message when the studio is hidden:

Theatre Studio is hidden. Use the keyboard shortcut 'alt + \' to restore the studio, or call studio.ui.restore().

With these changes, alt + \ should in most cases toggle the studio visibility.

related to #34

Make sure that @theatre/core and @theatre/studio can be used with the most popular setups (parcel, vite, vanilla rollup, etc.).

Note: Our first approach was this PR which had to be closed due to the limitations of yarn workspaces.

glTF files may contain points, lines, line strips, and line loops in addition to triangle meshes. Userland code can register those types with the editable(...) API, but the snapshot view will crash when these types are encountered. This PR attempts to fix that, so these types can be viewed and moved in the snapshot view.

Test model:

primitive_modes.glb.zip

This contribution is funded by The New York Times.

The current example incorrectly uses <e.perspectiveCamera>, which doesn't make itself the default one, so the scene is actually still viewed through the default camera that r3f creates for us.

The correct solution is to create an editable perspective camera from drei's PerspectiveCamera, which exposes the option to make it the scene's default camera declaratively through the makeDefault prop.

I have created a Theatrejs 0.5.0-rc-3 playground with react 18 and jsx:

https://github.com/tombombadilom/scene-editor-jsx

I have only one error that looks like typescript from @theatre/r3f and without any tsconfig in that directory i cannot ugrade r3f to meet my threejs three-and three-fiber versions :

Uncaught TypeError: import_three.Group is not a constructor
    at config (store.ts:61:1)
    at create2 (vanilla.js:72:1)
    at ./node_modules/@theatre/r3f/dist/index.js (store.ts:109:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/App.jsx (bundle.js:18:70)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)

I admit that for testing purposes I have mounted all the dependencies at their ultimate versions: I must have broken something and I apologize in advance.

below my package.json

{
  "name": "scene-editor",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@theatre/core": "^0.5",
    "@theatre/r3f": "^0.5",
    "@theatre/studio": "^0.5",
    "@theatre/react": "^0.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.19.0",
    "@babel/plugin-syntax-flow": "^7.18.6",
    "@babel/plugin-transform-react-jsx": "^7.19.0",
    "@babel/preset-env": "^7.19.0",
    "@react-three/fiber": "^8.7.2",
    "@testing-library/dom": "^8.17.1",
    "@types/three": "^0.144.0",
    "three": "^0.144.0"
  }
}

and my app.jsx where everything is called:

import React, { useEffect } from 'react';
import { Canvas } from '@react-three/fiber';
import { SheetProvider, editable as e } from '@theatre/r3f';
import { getProject } from '@theatre/core';
import demoProjectState from './state.json';
import studio from '@theatre/studio';
import extension from '@theatre/r3f/dist/extension';
studio.initialize();
studio.extend(extension);

const demoSheet = getProject('Demo Project', { state: demoProjectState }).sheet('Demo Sheet')


const App = () =>  {
  useEffect(() => {
      demoSheet.sequence.play({ iterationCount: Infinity, range: [0, 1] })
    }, [])
  return (
    <Canvas camera={{ position: [5, 5, -5] }}>
    <SheetProvider sheet={demoSheet}>
      <ambientLight />
      <e.pointLight uniqueName="Light" position={[10, 10, 10]} />
      <e.mesh uniqueName="Cube">
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="orange" />
      </e.mesh>
    </SheetProvider> 
  </Canvas>
  );
}

export default App;

Objectives

• [x] Add a Get started guide
• [x] Improve the in-code documentation (Edit: this happened to a very small extent. We agreed on the strategy to update the in-code docs whenever someone has a question about something that is not documented well enough.)

Hi, thanks for the amazing library, it is being ultra useful. I'm facing an issue:

• using the mousewheel + shift on the studio timeline seems to always zoom out

Was able to circumvent this by @AriaMinaei advice of dragging the lower scrollbar to scale and for now is good to go for me. But anyway here is the bug report. Thanks!

The goal of this PR is to create a unified notification system that can be used across core, studio, and extensions.

Goals:

• Make it easy to create high quality notifications that provide helpful information in an easy to parse way.
• Should be a unified system for displaying both Studio notifications, and console notifications
• Should be unobtrusive, but unmissable

The way this is achieved is the following.

The notification API provides a structure that makes it easy to craft high-quality notifications:

notify.warning(
  // Title
  'Invalid path provided to object',
  // Message. Can include markdown.
  `The path in \`${fnName}("${unsanitisedPath}")\` was sanitized to \`"${sanitisedPath}"\`.\n\n` +
    'Please replace the path with the sanitized one, otherwise it will likely break in the future.',
  // Relevant docs
  [
    {
      url: 'https://www.theatrejs.com/docs/latest/manual/objects#creating-sheet-objects',
      title: 'Sheet Objects',
    },
    {
      url: 'https://www.theatrejs.com/docs/latest/api/core#sheet.object',
      title: 'API',
    },
  ],
)

This will cause a notification to appear in studio's notification manager:

Notifications can freely include markdown paragraphs, code blocks, lists, etc.

Additionally, for warnings, a console log is also printed with the same message.

The collapsed notification manager shows the types of notifications currently in the list:

Notifications are by default deduplicated. A notification is only shown if there isn't already one displayed with the same content. This is useful since while we often don't care about cluttering the console, the studio UI is a different matter. Calling notify should be idempotent in most cases. This way we don't have to worry about react rendering twice in a row, or calling notify in a loop even.

You can opt out of this behavior through the last argument:

// this notification will be fired as many times as this code is run
notify.warning(
  'My notification',
  'Some message',
  [],
  // allow duplicates
  true
)

The notification system is accessible across studio, extensions, and core.

When used in studio, the API is accessible through the following import:

import {notify} from '@theatre/studio/notify'

When used in core, the API is accessible through the following import:

import {notify} from '@theatre/shared/notify'

When used in extension code, the API is accessible through the following import:

import {notify} from '@theatre/studio'

Note, notifications fired in core will only be displayed if studio is loaded.

The main LICENSE file and the github sidebar say the repo is Apache-2.0 license

But there is AGPL code in the repo

It is not at all clear from first blush that the repo contains AGPL code. Is the AGPL licensing a mistake or is the project license file in error?

Do not squash commits!

A large assortment of changes that address performance & memory issues described in #261

https://linear.app/theatre/issue/P-268/fix-the-memory-leak

https://user-images.githubusercontent.com/2925395/182226127-cd03b5e8-4969-4324-87bc-4151414f5429.mp4

development environment： os：win11；node 16.10.0 ,yarn 3.2.0

when i run ‘yarn run build’， a error is there `$ yarn run build $ yarn run build:ts $ yarn workspace theatre run build $ yarn workspace $'@theatre/dataverse' run build $ yarn workspace $'@theatre/react' run build $ yarn workspace $'@theatre/browser-bundles' run build $ yarn workspace $'@theatre/r3f' run build

error: The entry point "F:\kingfisher\ainimation\theatre\packages\react\src\index.ts" cannot be marked as external

F:\kingfisher\ainimation\theatre\packages\react\node_modules\esbuild\lib\main.js:1449 let error = new Error(${text}${summary}); ^

Error: Build failed with 1 error: error: The entry point "F:\kingfisher\ainimation\theatre\packages\react\src\index.ts" cannot be marked as external at failureErrorWithLog (F:\kingfisher\ainimation\theatre\packages\react\node_modules\esbuild\lib\main.js:1449:15) at F:\kingfisher\ainimation\theatre\packages\react\node_modules\esbuild\lib\main.js:1131:28 at runOnEndCallbacks (F:\kingfisher\ainimation\theatre\packages\react\node_modules\esbuild\lib\main.js:921:63) at buildResponseToResult (F:\kingfisher\ainimation\theatre\packages\react\node_modules\esbuild\lib\main.js:1129:7) at F:\kingfisher\ainimation\theatre\packages\react\node_modules\esbuild\lib\main.js:1236:14 at F:\kingfisher\ainimation\theatre\packages\react\node_modules\esbuild\lib\main.js:609:9 at handleIncomingPacket (F:\kingfisher\ainimation\theatre\packages\react\node_modules\esbuild\lib\main.js:706:9) at Socket.readFromStdout (F:\kingfisher\ainimation\theatre\packages\react\node_modules\esbuild\lib\main.js:576:7) at Socket.emit (node:events:390:28) at addChunk (node:internal/streams/readable:315:12) { errors: [ { detail: undefined, location: null, notes: [], pluginName: '', text: 'The entry point "F:\\kingfisher\\ainimation\\theatre\\packages\\react\\src\\index.ts" cannot be marked as external' } ], warnings: [] } ERROR: "build:js" exited with 1. file:///F:/kingfisher/ainimation/theatre/node_modules/zx/index.mjs:49 let output = new ProcessOutput({ ^

ProcessOutput [Error]: > error: The entry point "F:\kingfisher\ainimation\theatre\packages\react\src\index.ts" cannot be marked as external

F:\kingfisher\ainimation\theatre\packages\react\node_modules\esbuild\lib\main.js:1449 let error = new Error(${text}${summary}); ^

Error: Build failed with 1 error: error: The entry point "F:\kingfisher\ainimation\theatre\packages\react\src\index.ts" cannot be marked as external at failureErrorWithLog (F:\kingfisher\ainimation\theatre\packages\react\node_modules\esbuild\lib\main.js:1449:15) at F:\kingfisher\ainimation\theatre\packages\react\node_modules\esbuild\lib\main.js:1131:28 at runOnEndCallbacks (F:\kingfisher\ainimation\theatre\packages\react\node_modules\esbuild\lib\main.js:921:63) at buildResponseToResult (F:\kingfisher\ainimation\theatre\packages\react\node_modules\esbuild\lib\main.js:1129:7) at F:\kingfisher\ainimation\theatre\packages\react\node_modules\esbuild\lib\main.js:1236:14 at F:\kingfisher\ainimation\theatre\packages\react\node_modules\esbuild\lib\main.js:609:9 at handleIncomingPacket (F:\kingfisher\ainimation\theatre\packages\react\node_modules\esbuild\lib\main.js:706:9) at Socket.readFromStdout (F:\kingfisher\ainimation\theatre\packages\react\node_modules\esbuild\lib\main.js:576:7) at Socket.emit (node:events:390:28) at addChunk (node:internal/streams/readable:315:12) { errors: [ { detail: undefined, location: null, notes: [], pluginName: '', text: 'The entry point "F:\\kingfisher\\ainimation\\theatre\\packages\\react\\src\\index.ts" cannot be marked as external' } ], warnings: [] } ERROR: "build:js" exited with 1. at file:///F:/kingfisher/ainimation/theatre/scripts/build.mjs:36:29 at ChildProcess. (file:///F:/kingfisher/ainimation/theatre/node_modules/zx/index.mjs:49:22) at ChildProcess.emit (node:events:390:28) at maybeClose (node:internal/child_process:1064:16) at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5) `

Context

Since OrbitControls component is used in the snapshot viewer sometimes controls can run out of zoom ability. This happens in other softwares as well (e.g Blender) and the way Blender gets around this is it adds first person controls for free navigation (using WASD) to be able to get real close to objects. It'd be nice to add another option for controls that's not Orbit that can be toggled from the snapshot sheet object for use cases where you need to get really close to examine something or when the scale of the scene is pretty small.

Context

Since the outline list is a full height scrolling list, it's pretty easy to navigate it even as it grows (albeit IMO namespace collapsing would still be helpful #356). However when the timeline list grows it becomes hard to keep track of the entire list (even when collapsing objects). It'd be nice to add an outline show/hide icon that toggles between showing the object track in the timeline and hiding it. Was imagining it'd still play it's animations even when hidden but would give you the ability to focus only on the animations you are currently working on.

Context

Right now there's a small triangle next to the namespaces (and other objects too) in the outline view that hints that by clicking it you can collapse it, however it doesn't collapse when clicked. It'd be really helpful to add the ability to collapse namespaces in the outline.

Context

It'd really helpful to be able to edit the common values of multiple objects together when multi selecting them from the outline. This might be a big feature request and there are multiple ways to implement this so wanted to suggest two ways I see as potentially viable

1. When selecting multiple objects that share some common values from the outline the prop panel shows you only the common values that can be changed together
2. Instead of implementing outline multi-select - when using namespaces the namespace sheet object itself can be clicked to reveal only the common values of children that live under it, such that they can be edited together