Small improvements (#42)

* add euler to lib

* quick scene navigate

Author: dsehnal

CHANGELOG.md

@@ -11,7 +11,7 @@ All notable changes to this project will be documented in this file, following t
   - User quota management (100 sessions/states per user)
   - Docker containerization with production deployment configuration
   - Comprehensive test suite with pytest coverage
-- `Vec3`, `Mat3`, `Mat4`, `Quat` accessible in the code editor
+- `Vec3`, `Mat3`, `Mat4`, `Quat`, `Euler` accessible in the code editor
 
 ### Changed
 - **Session Upload Optimization**: Replaced base64 encoding with native FormData uploads

scripts/process-mvs-types.mjs

@@ -3,6 +3,8 @@ import fs from 'fs';
 let data = fs.readFileSync('./tmp/mvs.d.ts', 'utf-8');
 data = data.replaceAll('`', '\\`').replaceAll('${', '\\${').replaceAll(/(\r\n|\n|\r)/g, '\n');
 
+const lib = ['Vec3', 'Mat3', 'Mat4', 'Quat', 'Euler'];
+
 const lines = data.split('\n'); // .filter(line => !line.startsWith('export '));
 const final = [
     '// Automatically generated file. Do not edit manually.',
@@ -14,10 +16,7 @@ const final = [
     '}',
     '',
     'declare const builder: _.Builder;',
-    'declare const Vec3: typeof _.Vec3;',
-    'declare const Mat3: typeof _.Mat3;',
-    'declare const Mat4: typeof _.Mat4;',
-    'declare const Quat: typeof _.Quat;',
+    ...lib.map(name => `declare const ${name}: typeof _.${name};`),
     '`;',
 ];
 

scripts/types.d.ts

@@ -1,4 +1,5 @@
 import * as _ from '../node_modules/molstar/lib/extensions/mvs/mvs-data.d.ts';
 export { Vec3, Mat3, Mat4, Quat } from '../node_modules/molstar/lib/mol-math/linear-algebra.d.ts';
+export { Euler } from '../node_modules/molstar/lib/mol-math/linear-algebra/3d/euler.d.ts';
 
 export type Builder = ReturnType<typeof _.MVSData.createBuilder>;

src/app/examples/empty.ts

@@ -1,7 +1,8 @@
 import { UUID } from 'molstar/lib/mol-util';
 import { Story } from '../state/types';
+import { BuilderLibNamespaces } from '../state/actions';
 
-const LibraryFns = `// Mol* library functions: Vec3, Mat3, Mat4, Quat`;
+const LibraryFns = `// Mol* library functions: ${BuilderLibNamespaces.join(', ')}\n`;
 
 export const EmptyStory: Story = {
   metadata: { title: 'New Story' },

src/app/state/actions.ts

@@ -33,6 +33,7 @@ import { MVSData, Snapshot } from 'molstar/lib/extensions/mvs/mvs-data';
 import { Mat3, Mat4, Quat, Vec3 } from 'molstar/lib/mol-math/linear-algebra';
 import { tryFindIfStoryIsShared } from '@/lib/data-utils';
 import { toast } from 'sonner';
+import { Euler } from 'molstar/lib/mol-math/linear-algebra/3d/euler';
 
 // Extended session interface that may include story data
 export interface SessionWithData extends SessionItem {
@@ -91,21 +92,33 @@ export function newStory() {
   setSessionIdUrl(undefined);
 }
 
+// Should be sync with typing generation in the scripts directory
+const BuilderLib = {
+  Vec3,
+  Mat3,
+  Mat4,
+  Quat,
+  Euler,
+};
+
+export const BuilderLibNamespaces = Object.keys(BuilderLib);
+
 const createStateProvider = (code: string) => {
-  return new Function('builder', 'index', 'Vec3', 'Mat3', 'Mat4', 'Quat', code);
+  return new Function('builder', 'index', '__lib__', code);
 };
 
 async function getMVSSnapshot(story: Story, scene: SceneData, index: number) {
   try {
     const stateProvider = createStateProvider(`
+const { ${Object.keys(BuilderLib).join(', ')} } = __lib__;
 async function _run_builder() {
       ${story.javascript}\n\n${scene.javascript}
 }
 return _run_builder();
 `);
     const builder = MVSData.createBuilder();
     toast.dismiss('state-build-error');
-    await stateProvider(builder, index, Vec3, Mat3, Mat4, Quat);
+    await stateProvider(builder, index, BuilderLib);
     if (scene.camera) {
       builder.camera({
         position: adjustedCameraPosition(scene.camera),

src/app/version.ts

@@ -1 +1 @@
-export const APP_VERSION = '1.0.0-beta.6';
+export const APP_VERSION = '1.0.0-beta.7';

src/components/story-builder/Toolbar.tsx

@@ -3,6 +3,10 @@
 import { Menubar } from '@/components/ui/menubar';
 import { Separator } from '@/components/ui/separator';
 import { SceneMenu, StoryPreview, StoryOptions, SceneSelector } from './menus';
+import { Button } from '../ui/button';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useAtom, useAtomValue } from 'jotai';
+import { ActiveSceneAtom, CurrentViewAtom, StoryAtom } from '@/app/appstate';
 
 export function StoriesToolBar() {
   return (
@@ -30,6 +34,8 @@ export function StoriesToolBar() {
                 <SceneMenu />
                 <Separator orientation='vertical' className='h-6' />
                 <SceneSelector />
+                <NextScene dir={-1} />
+                <NextScene dir={1} />
               </Menubar>
             </div>
           </div>
@@ -49,3 +55,34 @@ export function StoriesToolBar() {
     </>
   );
 }
+
+function NextScene({ dir }: { dir: -1 | 1 }) {
+  const [currentView, setCurrentView] = useAtom(CurrentViewAtom);
+  const story = useAtomValue(StoryAtom);
+  const activeScene = useAtomValue(ActiveSceneAtom);
+
+  const Icon = dir < 0 ? ChevronLeft : ChevronRight;
+  const onClick = () => {
+    if (currentView.type !== 'scene') {
+      setCurrentView({ type: 'scene', id: story.scenes[0].id.toString(), subview: 'scene-options' });
+      return;
+    }
+
+    let idx = story.scenes.findIndex((s) => s.id === activeScene.id);
+    idx += dir;
+    if (idx < 0) idx = story.scenes.length - 1;
+    if (idx >= story.scenes.length) idx = 0;
+
+    setCurrentView({ type: 'scene', id: story.scenes[idx].id.toString(), subview: 'scene-options' });
+  };
+  return (
+    <Button
+      className='text-sm has-[>svg]:px-1 cursor-pointer rounded-none'
+      variant='link'
+      onClick={onClick}
+      title={dir < 0 ? 'Previous Scene' : 'Next Scene'}
+    >
+      <Icon className='size-4' />
+    </Button>
+  );
+}

src/components/story-builder/editors/StoryCodeEditor.tsx

@@ -5,6 +5,7 @@ import Editor, { OnMount } from '@monaco-editor/react';
 import * as monaco from 'monaco-editor';
 import { useAtom } from 'jotai';
 import { useEffect, useRef, useState } from 'react';
+import { setupMonacoCodeCompletion } from './common';
 
 export function StoryCodeEditor() {
   const [story, setStory] = useAtom(StoryAtom);
@@ -32,6 +33,7 @@ export function StoryCodeEditor() {
 
   const handleEditorDidMount: OnMount = (editor, monaco) => {
     editorRef.current = editor;
+    setupMonacoCodeCompletion(monaco);
     editor.layout();
 
     // Add Alt+S keyboard shortcut for saving markdown

src/components/story-builder/editors/common.ts

@@ -3,7 +3,10 @@ import { MVSTypes } from './mvs-typing';
 
 export function setupMonacoCodeCompletion(monaco: Monaco) {
   monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true);
-  monaco.languages.typescript.javascriptDefaults.addExtraLib(MVSTypes, 'ts:mvs.d.ts');
+  const extraLibs = monaco.languages.typescript.javascriptDefaults.getExtraLibs();
+  if (!('ts:mvs.d.ts' in extraLibs)) {
+    monaco.languages.typescript.javascriptDefaults.addExtraLib(MVSTypes, 'ts:mvs.d.ts');
+  }
   monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
     target: monaco.languages.typescript.ScriptTarget.ES2020,
     allowNonTsExtensions: true,

src/components/story-builder/editors/mvs-typing.ts

@@ -2963,7 +2963,7 @@ namespace _ {
     
     type Builder = ReturnType<typeof MVSData.createBuilder>;
     
-    export { Mat3, Mat4, Quat, Vec3 };
+    export { Euler, Mat3, Mat4, Quat, Vec3 };
     export type { Builder };
     
 }
@@ -2973,4 +2973,5 @@ declare const Vec3: typeof _.Vec3;
 declare const Mat3: typeof _.Mat3;
 declare const Mat4: typeof _.Mat4;
 declare const Quat: typeof _.Quat;
+declare const Euler: typeof _.Euler;
 `;