@threlte/theatre 0.0.2 → 0.1.0-next.1

package/dist/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @threlte/extras
 
+## 0.1.0-next.1
+
+### Minor Changes
+
+- 4b67b473: The hook useStudio exposes Theatre.js' studio instance.
+
+## 0.0.3-next.0
+
+### Patch Changes
+
+- d41cb6cf: Adapted theatre package to new TransformControls syntax
+
 ## 0.0.2
 
 ### Patch Changes

package/dist/components/Editable/Editable.svelte

@@ -1,8 +1,8 @@
-<script>import { TransformControls, useParent, useThrelte } from '@threlte/core';
-import { getContext, onDestroy } from 'svelte';
+<script>import { createRawEventDispatcher, useParent, useThrelte } from '@threlte/core';
+import { TransformControls } from '@threlte/extras';
+import { getContext, onDestroy, onMount } from 'svelte';
 import { DEG2RAD, RAD2DEG } from 'three/src/math/MathUtils';
 import { globalObjects, globalStudio } from '../consts';
-import { createRawEventDispatcher } from './createRawEventDispatcher';
 import { isObject3D, isOrthographicOrPerspectiveCamera, isPrimitive } from './typeGuards';
 import { getAutoPropValue, parseAutoPropKeyByPath, resolve } from './utils';
 export let name;
@@ -10,6 +10,10 @@ export let transform = false;
 export let props = undefined;
 export let controls = undefined;
 export let snap = undefined;
+/**
+ * @default false
+ */
+export let detach = false;
 const parent = useParent();
 const { invalidate } = useThrelte();
 /**
@@ -108,19 +112,29 @@ const parsedProps = Object.entries($$restProps)
     throw new Error(`Invalid prop type for auto prop ${key}: ` + typeof value + '. Expected boolean or string.');
 })
     .reduce((acc, curr) => ({ ...acc, ...curr }), {});
+const dispatch = createRawEventDispatcher();
 const sheet = getContext('theatre-sheet');
 const projectId = sheet.address.projectId;
 const sheetId = sheet.address.sheetId;
 const instanceId = sheet.address.sheetInstanceId;
-const object = globalObjects.get(`${projectId}-${sheetId}-${instanceId}-${name}`) ??
+export const object = globalObjects.get(`${projectId}-${sheetId}-${instanceId}-${name}`) ??
     sheet.object(name, {
         ...parsedProps,
         ...props,
         ...transformProps
+    }, {
+        reconfigure: true
     });
 globalObjects.set(`${projectId}-${sheetId}-${instanceId}-${name}`, object);
+onDestroy(() => {
+    if (detach) {
+        sheet.detachObject(name);
+    }
+});
 let values = object.value;
-const dispatchRaw = createRawEventDispatcher();
+onMount(() => {
+    dispatch('create', object.value);
+});
 let selected = false;
 let isMouseDown = false;
 /**
@@ -142,7 +156,7 @@ const unsubscribe = object.onValuesChange((newValues) => {
     // assign new values to slot prop
     values = newValues;
     // dispatch events to parent component callbacks
-    dispatchRaw('change', newValues);
+    dispatch('change', newValues);
     // update auto props
     Object.entries(newValues).forEach((prop) => {
         // do not apply values while the transformControls are on
@@ -253,6 +267,7 @@ $: snapValues = {
     rotate: (snap?.rotate ?? 45) * DEG2RAD,
     scale: snap?.scale ?? 0.1
 };
+let space = 'local';
 const onKeyPress = (e) => {
     if (e.key === 't') {
         mode = 'translate';
@@ -263,6 +278,14 @@ const onKeyPress = (e) => {
     if (e.key === 's') {
         mode = 'scale';
     }
+    if (e.key === 'g') {
+        if (space === 'local') {
+            space = 'world';
+        }
+        else {
+            space = 'local';
+        }
+    }
 };
 const onKeyDown = (e) => {
     if (e.key === 'Shift') {
@@ -276,27 +299,20 @@ const onKeyUp = (e) => {
 };
 </script>
 
-<svelte:window
-  on:keypress={onKeyPress}
-  on:keydown={onKeyDown}
-  on:keyup={onKeyUp}
-/>
+<svelte:window on:keypress={onKeyPress} on:keydown={onKeyDown} on:keyup={onKeyUp} />
 
 {#if selected && isObject3D($parent) && transform && controls}
   <TransformControls
     {mode}
+    object={$parent}
     translationSnap={snapActive ? snapValues.translate : null}
     rotationSnap={snapActive ? snapValues.rotate : null}
     scaleSnap={snapActive ? snapValues.scale : null}
+    {space}
     on:change={onChange}
     on:mouseDown={onMouseDown}
     on:mouseUp={onMouseUp}
   />
 {/if}
 
-<slot
-  {values}
-  {read}
-  {sheet}
-  {object}
-/>
+<slot {values} {read} {sheet} {object} />

package/dist/components/Editable/types.d.ts

@@ -13,6 +13,8 @@ export declare type Props<T extends UnknownShorthandCompoundProps> = {
         scale?: number;
     };
     read?: () => void;
+    object?: ISheetObject<T>;
+    detach?: boolean;
 } & Record<string, AutoProp | any>;
 export declare type Slots<T extends UnknownShorthandCompoundProps> = {
     default: {
@@ -24,5 +26,6 @@ export declare type Slots<T extends UnknownShorthandCompoundProps> = {
 };
 export declare type Events<T extends UnknownShorthandCompoundProps> = {
     change: ISheetObject<T>['value'];
+    create: ISheetObject<T>['value'];
 };
 export declare type PropTransform = 'none' | 'euler';

package/dist/components/Project/Project.svelte

@@ -3,7 +3,7 @@ import { getProject } from '../theatre';
 import { setContext } from 'svelte';
 export let name = 'default';
 export let config = undefined;
-const project = globalProjects.get(name) ?? getProject(name, config);
+export const project = globalProjects.get(name) ?? getProject(name, config);
 globalProjects.set(name, project);
 let isReady = false;
 const init = async () => {

package/dist/components/Project/Project.svelte.d.ts

@@ -4,6 +4,7 @@ declare const __propDef: {
     props: {
         name?: string | undefined;
         config?: IProjectConfig | undefined;
+        project?: import("@theatre/core").IProject | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -18,5 +19,6 @@ export declare type ProjectProps = typeof __propDef.props;
 export declare type ProjectEvents = typeof __propDef.events;
 export declare type ProjectSlots = typeof __propDef.slots;
 export default class Project extends SvelteComponentTyped<ProjectProps, ProjectEvents, ProjectSlots> {
+    get project(): import("@theatre/core").IProject;
 }
 export {};

package/dist/components/Sheet/Sheet.svelte

@@ -61,10 +61,4 @@ onDestroy(() => {
 });
 </script>
 
-<slot
-  {sheet}
-  {sequence}
-  {isPlaying}
-  {play}
-  {pause}
-/>
+<slot {sheet} {sequence} {isPlaying} {play} {pause} />

package/dist/components/Sheet/Sheet.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
             range?: [from: number, to: number] | undefined;
             rate?: number | undefined;
             direction?: ("reverse" | "alternate" | "normal" | "alternateReverse") | undefined;
+            rafDriver?: import("@theatre/core").IRafDriver | undefined;
         } & {
             delay?: number | undefined;
         }) | undefined;
@@ -26,6 +27,7 @@ declare const __propDef: {
             range?: [from: number, to: number] | undefined;
             rate?: number | undefined;
             direction?: ("reverse" | "alternate" | "normal" | "alternateReverse") | undefined;
+            rafDriver?: import("@theatre/core").IRafDriver | undefined;
         } | undefined) => Promise<boolean>) | undefined;
         pause?: (() => void) | undefined;
         position?: number | undefined;
@@ -43,6 +45,7 @@ declare const __propDef: {
                 range?: [from: number, to: number] | undefined;
                 rate?: number | undefined;
                 direction?: ("reverse" | "alternate" | "normal" | "alternateReverse") | undefined;
+                rafDriver?: import("@theatre/core").IRafDriver | undefined;
             } | undefined) => Promise<boolean>;
             pause: () => void;
         };
@@ -59,6 +62,7 @@ export default class Sheet extends SvelteComponentTyped<SheetProps, SheetEvents,
         range?: [from: number, to: number] | undefined;
         rate?: number | undefined;
         direction?: ("reverse" | "alternate" | "normal" | "alternateReverse") | undefined;
+        rafDriver?: import("@theatre/core").IRafDriver | undefined;
     } | undefined) => Promise<boolean>;
     get pause(): () => void;
 }

package/dist/components/Studio/InnerStudio.svelte

@@ -1,16 +1,41 @@
-<script>import { globalStudio } from '../consts';
-import { onDestroy, onMount } from 'svelte';
+<script>import { watch } from '@threlte/core';
+import { onMount } from 'svelte';
+import { writable } from 'svelte/store';
+import { globalStudio } from '../consts';
+import { useStudio } from './useStudio';
+export let studio = undefined;
+export let hide;
+const hideStore = writable(hide);
+$: hideStore.set(hide);
+const studioCtx = useStudio();
+let initialized = false;
 onMount(async () => {
     if ($globalStudio) {
-        $globalStudio.ui.restore();
+        studioCtx.studio.set($globalStudio);
+        initialized = true;
         return;
     }
-    const studioPkg = await import('@theatre/studio');
-    const studio = studioPkg.default;
-    studio.initialize();
-    globalStudio.set(studio);
+    const pkg = await import('@theatre/studio');
+    const Studio = pkg.default;
+    Studio.initialize();
+    globalStudio.set(Studio);
+    studioCtx.studio.set(Studio);
+    studio = Studio;
+    initialized = true;
 });
-onDestroy(() => {
-    $globalStudio?.ui.hide();
+watch([globalStudio, hideStore], ([studio, hide]) => {
+    if (hide) {
+        studio?.ui.hide();
+    }
+    else {
+        studio?.ui.restore();
+    }
+    return () => {
+        studio?.ui.hide();
+    };
 });
 </script>
+
+{#if initialized}
+  <slot />
+{/if}

package/dist/components/Studio/InnerStudio.svelte.d.ts

@@ -1,10 +1,16 @@
 import { SvelteComponentTyped } from "svelte";
+import type { IStudio } from '@theatre/studio';
 declare const __propDef: {
-    props: {};
+    props: {
+        studio?: IStudio | undefined;
+        hide: boolean;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export declare type InnerStudioProps = typeof __propDef.props;
 export declare type InnerStudioEvents = typeof __propDef.events;

package/dist/components/Studio/Studio.svelte

@@ -1,10 +1,18 @@
-<script>import InnerStudio from './InnerStudio.svelte';
+<script>import { currentWritable } from '@threlte/core';
+import { setContext } from 'svelte';
+import InnerStudio from './InnerStudio.svelte';
 export let enabled = true;
+export let hide = false;
 const browser = typeof window !== 'undefined';
+export let studio = undefined;
+const studioCtx = currentWritable(undefined);
+setContext('theatre-studio', studioCtx);
 </script>
 
 {#if browser && enabled}
-  <InnerStudio />
+  <InnerStudio bind:studio {hide}>
+    <slot />
+  </InnerStudio>
+{:else}
+  <slot />
 {/if}
-
-<slot />

package/dist/components/Studio/Studio.svelte.d.ts

@@ -1,7 +1,10 @@
 import { SvelteComponentTyped } from "svelte";
+import type { IStudio } from '@theatre/studio';
 declare const __propDef: {
     props: {
         enabled?: boolean | undefined;
+        hide?: boolean | undefined;
+        studio?: IStudio | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/Studio/useStudio.d.ts

@@ -0,0 +1,5 @@
+import type { IStudio } from '@theatre/studio';
+import type { CurrentWritable } from '@threlte/core';
+export declare const useStudio: () => {
+    studio: CurrentWritable<IStudio | undefined>;
+};

package/dist/components/Studio/useStudio.js

@@ -0,0 +1,8 @@
+import { getContext } from 'svelte';
+export const useStudio = () => {
+    const studio = getContext('theatre-studio');
+    if (!studio) {
+        throw new Error('Theatre context not found, did you forget to wrap your app in <Theatre>?');
+    }
+    return { studio };
+};

package/dist/components/consts.d.ts

@@ -3,4 +3,4 @@ import type { IStudio } from '@theatre/studio';
 export declare const globalProjects: Map<string, IProject>;
 export declare const globalSheets: Map<string, ISheet>;
 export declare const globalObjects: Map<string, ISheetObject<import("@theatre/core").UnknownShorthandCompoundProps>>;
-export declare const globalStudio: import("svelte/store").Writable<IStudio | undefined>;
+export declare const globalStudio: import("@threlte/core").CurrentWritable<IStudio | undefined>;

package/dist/components/consts.js

@@ -1,5 +1,5 @@
-import { writable } from 'svelte/store';
+import { currentWritable } from '@threlte/core';
 export const globalProjects = new Map();
 export const globalSheets = new Map();
 export const globalObjects = new Map();
-export const globalStudio = writable(undefined);
+export const globalStudio = currentWritable(undefined);

package/dist/index.d.ts

@@ -3,3 +3,4 @@ export { default as Project } from './components/Project/Project.svelte';
 export { default as Sheet } from './components/Sheet/Sheet.svelte';
 export { default as Editable } from './components/Editable/Editable.svelte';
 export { default as Theatre } from './components/Theatre/Theatre.svelte';
+export { useStudio } from './components/Studio/useStudio';

package/dist/index.js

@@ -4,3 +4,5 @@ export { default as Project } from './components/Project/Project.svelte';
 export { default as Sheet } from './components/Sheet/Sheet.svelte';
 export { default as Editable } from './components/Editable/Editable.svelte';
 export { default as Theatre } from './components/Theatre/Theatre.svelte';
+// hooks
+export { useStudio } from './components/Studio/useStudio';

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@threlte/theatre",
-  "version": "0.0.2",
+  "version": "0.1.0-next.1",
   "author": "Grischa Erbe <hello@legrisch.com> (https://legrisch.com)",
   "license": "MIT",
   "devDependencies": {
     "@sveltejs/adapter-auto": "1.0.0-next.61",
     "@sveltejs/adapter-static": "1.0.0-next.35",
     "@sveltejs/kit": "1.0.0-next.377",
-    "@theatre/core": "0.5.1-rc.1",
-    "@theatre/studio": "0.5.1-rc.1",
-    "@threlte/core": "5.0.7",
+    "@theatre/core": "0.6.0",
+    "@theatre/studio": "0.6.0",
+    "@threlte/core": "6.0.0-next.2",
+    "@threlte/extras": "5.0.0-next.5",
     "@types/node": "^18.0.3",
     "@types/three": "^0.144.0",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
@@ -24,7 +25,7 @@
     "svelte-check": "^2.7.0",
     "svelte-preprocess": "^4.10.5",
     "svelte2tsx": "^0.5.9",
-    "three": "^0.145.0",
+    "three": "^0.151.3",
     "ts-node": "^10.8.2",
     "tsafe": "^0.9.0",
     "tslib": "^2.3.1",

package/dist/components/Editable/createRawEventDispatcher.d.ts

@@ -1,7 +0,0 @@
-/**
- * This event dispatcher creates Raw Events unline sveltes own event dispatcher
- * which nests the data in a detail object. This is not nesessary for our use
- * case and makes it harder to work with the data.
- * @returns
- */
-export declare function createRawEventDispatcher<EventMap extends Record<string, unknown> = any>(): <EventKey extends Extract<keyof EventMap, string>>(type: EventKey, value?: EventMap[EventKey]) => void;

package/dist/components/Editable/createRawEventDispatcher.js

@@ -1,19 +0,0 @@
-import { get_current_component } from 'svelte/internal';
-/**
- * This event dispatcher creates Raw Events unline sveltes own event dispatcher
- * which nests the data in a detail object. This is not nesessary for our use
- * case and makes it harder to work with the data.
- * @returns
- */
-export function createRawEventDispatcher() {
-    const component = get_current_component();
-    const dispatchRawEvent = (type, value) => {
-        const callbacks = component.$$.callbacks[type];
-        if (callbacks) {
-            callbacks.forEach((fn) => {
-                fn(value);
-            });
-        }
-    };
-    return dispatchRawEvent;
-}