Added duration setting.

mrdoob · mrdoob · commit 7f83131c2b95 · 2024-11-11T21:03:14.000+09:00
diff --git a/examples/threejs_shaders.json b/examples/threejs_shaders.json
@@ -1,5 +1,7 @@
 {
-	"config": {},
+	"config": {
+		"duration": 70
+	},
 	"scripts": [
 		{
 			"name": "Renderer",
diff --git a/index.html b/index.html
@@ -60,6 +60,7 @@
 
 			// LocalStorage
 
+			editor.signals.durationChanged.add( saveState );
 			editor.signals.animationAdded.add( saveState );
 			editor.signals.animationModified.add( saveState );
 			editor.signals.animationRemoved.add( saveState );
diff --git a/js/Editor.js b/js/Editor.js
@@ -12,6 +12,12 @@ function Editor() {
 	this.signals = {
 
 		editorCleared: new Signal(),
+		projectLoaded: new Signal(),
+
+		// config
+
+		duration: new Signal(),
+		durationChanged: new Signal(),
 
 		// scripts
 
@@ -65,7 +71,7 @@ function Editor() {
 	this.player = new Player();
 	this.resources = new Resources();
 
-	this.duration = 500;
+	this.duration = 120;
 
 	this.scripts = [];
 	this.effects = [];
@@ -77,6 +83,13 @@ function Editor() {
 
 	var scope = this;
 
+	this.signals.duration.add( function ( value ) {
+
+		scope.duration = value;
+		scope.signals.durationChanged.dispatch();
+
+	} );
+
 	this.signals.animationModified.add( function () {
 
 		scope.timeline.reset();
@@ -441,6 +454,12 @@ Editor.prototype = {
 
 		var scope = this;
 
+		if ( json.config && json.config.duration ) {
+
+			scope.duration = json.config.duration;
+
+		}
+
 		var scripts = json.scripts;
 
 		for ( var i = 0, l = scripts.length; i < l; i ++ ) {
@@ -498,14 +517,17 @@ Editor.prototype = {
 
 		}
 
+		scope.signals.projectLoaded.dispatch();
 		scope.setTime( 0 );
 
 	},
 
 	toJSON: function () {
 
 		var json = {
-			"config": {},
+			"config": {
+				"duration": this.duration,
+			},
 			"scripts": [],
 			"effects": [],
 			// "curves": [],
diff --git a/js/SidebarProject.js b/js/SidebarProject.js
@@ -11,6 +11,47 @@ function SidebarProject( editor ) {
 	var container = new UIPanel();
 	container.setId( 'project' );
 
+	// Config
+
+	container.add( new UIText( 'Config' ).setTextTransform( 'uppercase' ) );
+	container.add( new UIBreak(), new UIBreak() );
+
+	var row = new UIRow();
+	row.add( new UIText( 'Duration' ).setWidth( '90px' ) );
+	container.add( row );
+
+	function toSeconds( time ) {
+
+		const parts = time.split( ':' );
+		return parseInt( parts[ 0 ] ) * 60 + parseInt( parts[ 1 ] );
+
+	}
+
+	function fromSeconds( seconds ) {
+
+		var minute = Math.floor( seconds / 60 );
+		var second = Math.floor( seconds % 60 );
+
+		return `${ minute }:${ second.toString().padStart( 2, '0' ) }`;
+
+	}
+
+	var duration = new UIInput( '2:00' ).setWidth( '80px' );
+	duration.onChange( function () {
+
+		signals.duration.dispatch( toSeconds( this.getValue() ) );
+
+	} );
+	row.add( duration );
+
+	signals.projectLoaded.add( function () {
+
+		duration.setValue( fromSeconds( editor.duration ) );
+
+	} );
+
+	container.add( new UIBreak() );
+
 	// Scripts
 
 	container.add( new UIText( 'Scripts' ).setTextTransform( 'uppercase' ) );
diff --git a/js/Timeline.js b/js/Timeline.js
@@ -37,10 +37,10 @@ function Timeline( editor ) {
 			// Get mouse position relative to the timeline
 			const rect = timeline.dom.getBoundingClientRect();
 			const mouseX = event.clientX - rect.left;
-			
+
 			// Calculate the time at the mouse position
 			const mouseTime = (scroller.scrollLeft + mouseX) / scale;
-			
+
 			// Update scale
 			scale = Math.max( 2, scale - ( event.deltaY / 10 ) );
 			signals.timelineScaled.dispatch( scale );
@@ -253,6 +253,13 @@ function Timeline( editor ) {
 
 	// signals
 
+	signals.durationChanged.add( function () {
+
+		updateMarks();
+		updateContainers();
+
+	} );
+
 	signals.timeChanged.add( function () {
 
 		updateTimeMark();

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,7 @@`
`1`	`1`	`{`
`2`		`- "config": {},`
	`2`	`+ "config": {`
	`3`	`+ "duration": 70`
	`4`	`+ },`
`3`	`5`	`"scripts": [`
`4`	`6`	`{`
`5`	`7`	`"name": "Renderer",`