@thanhthbm/scene-editor 0.1.0

package/src/editor/js/Animation.js

@@ -0,0 +1,618 @@
+import { UIPanel, UIText, UIButton, UINumber } from './libs/ui.js';
+
+import { AnimationPathHelper } from 'three/addons/helpers/AnimationPathHelper.js';
+
+function Animation( editor ) {
+
+	const signals = editor.signals;
+	const strings = editor.strings;
+	const mixer = editor.mixer;
+
+	const container = new UIPanel();
+	container.setId( 'animation' );
+	container.dom.style.flexDirection = 'column';
+
+	let panelHeight = 36;
+
+	// Listen for resizer changes
+	signals.animationPanelResized.add( function ( height ) {
+
+		panelHeight = height;
+		container.dom.style.height = height + 'px';
+		signals.animationPanelChanged.dispatch( height );
+
+	} );
+
+	// Top bar - playback controls
+	const controlsPanel = new UIPanel();
+	controlsPanel.dom.style.padding = '6px 10px';
+	controlsPanel.dom.style.borderBottom = '1px solid #ccc';
+	controlsPanel.dom.style.display = 'flex';
+	controlsPanel.dom.style.alignItems = 'center';
+	controlsPanel.dom.style.justifyContent = 'center';
+	controlsPanel.dom.style.gap = '6px';
+	controlsPanel.dom.style.flexShrink = '0';
+	container.add( controlsPanel );
+
+	// SVG icons
+	const playIcon = '<svg width="12" height="12" viewBox="0 0 12 12"><path d="M3 1.5v9l7-4.5z" fill="currentColor"/></svg>';
+	const pauseIcon = '<svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 1h3v10H2zM7 1h3v10H7z" fill="currentColor"/></svg>';
+	const stopIcon = '<svg width="12" height="12" viewBox="0 0 12 12"><rect x="2" y="2" width="8" height="8" fill="currentColor"/></svg>';
+
+	const playButton = new UIButton();
+	playButton.dom.innerHTML = playIcon;
+	playButton.dom.style.width = '24px';
+	playButton.dom.style.height = '24px';
+	playButton.dom.style.padding = '0';
+	playButton.dom.style.borderRadius = '4px';
+	playButton.dom.style.display = 'flex';
+	playButton.dom.style.alignItems = 'center';
+	playButton.dom.style.justifyContent = 'center';
+	playButton.onClick( function () {
+
+		if ( currentAction ) {
+
+			if ( currentAction.paused ) {
+
+				currentAction.paused = false;
+
+			} else if ( ! currentAction.isRunning() ) {
+
+				currentAction.reset();
+				currentAction.play();
+
+			}
+
+		}
+
+	} );
+	controlsPanel.add( playButton );
+
+	const pauseButton = new UIButton();
+	pauseButton.dom.innerHTML = pauseIcon;
+	pauseButton.dom.style.width = '24px';
+	pauseButton.dom.style.height = '24px';
+	pauseButton.dom.style.padding = '0';
+	pauseButton.dom.style.borderRadius = '4px';
+	pauseButton.dom.style.display = 'flex';
+	pauseButton.dom.style.alignItems = 'center';
+	pauseButton.dom.style.justifyContent = 'center';
+	pauseButton.onClick( function () {
+
+		if ( currentAction ) {
+
+			currentAction.paused = true;
+
+		}
+
+	} );
+	controlsPanel.add( pauseButton );
+
+	const stopButton = new UIButton();
+	stopButton.dom.innerHTML = stopIcon;
+	stopButton.dom.style.width = '24px';
+	stopButton.dom.style.height = '24px';
+	stopButton.dom.style.padding = '0';
+	stopButton.dom.style.borderRadius = '4px';
+	stopButton.dom.style.display = 'flex';
+	stopButton.dom.style.alignItems = 'center';
+	stopButton.dom.style.justifyContent = 'center';
+	stopButton.onClick( function () {
+
+		if ( currentAction ) {
+
+			currentAction.stop();
+
+		}
+
+	} );
+	controlsPanel.add( stopButton );
+
+	// Time display
+	const timeDisplay = document.createElement( 'div' );
+	timeDisplay.style.display = 'flex';
+	timeDisplay.style.alignItems = 'center';
+	timeDisplay.style.justifyContent = 'center';
+	timeDisplay.style.gap = '4px';
+	timeDisplay.style.height = '24px';
+	timeDisplay.style.padding = '0 8px';
+	timeDisplay.style.background = 'rgba(0,0,0,0.05)';
+	timeDisplay.style.borderRadius = '4px';
+	timeDisplay.style.fontFamily = 'monospace';
+	timeDisplay.style.fontSize = '11px';
+	controlsPanel.dom.appendChild( timeDisplay );
+
+	const timeText = new UIText( '0.00' ).setWidth( '36px' );
+	timeText.dom.style.textAlign = 'right';
+	timeDisplay.appendChild( timeText.dom );
+
+	const separator = new UIText( '/' );
+	timeDisplay.appendChild( separator.dom );
+
+	const durationText = new UIText( '0.00' ).setWidth( '36px' );
+	timeDisplay.appendChild( durationText.dom );
+
+	// Time Scale
+	const mixerTimeScaleNumber = new UINumber( 1 ).setWidth( '60px' ).setRange( - 10, 10 );
+	mixerTimeScaleNumber.onChange( function () {
+
+		mixer.timeScale = mixerTimeScaleNumber.getValue();
+
+	} );
+
+	controlsPanel.add( new UIText( strings.getKey( 'sidebar/animations/timescale' ) ).setClass( 'Label' ) );
+	controlsPanel.add( mixerTimeScaleNumber );
+
+	// Timeline area with track rows
+	const timelineArea = document.createElement( 'div' );
+	timelineArea.style.flex = '1';
+	timelineArea.style.display = 'flex';
+	timelineArea.style.flexDirection = 'column';
+	timelineArea.style.overflow = 'hidden';
+	timelineArea.style.position = 'relative';
+	container.dom.appendChild( timelineArea );
+
+	// Scrollable track list
+	const trackListContainer = document.createElement( 'div' );
+	trackListContainer.style.flex = '1';
+	trackListContainer.style.overflowY = 'auto';
+	trackListContainer.style.overflowX = 'hidden';
+	timelineArea.appendChild( trackListContainer );
+
+	// Playhead (spans entire timeline area)
+	const playhead = document.createElement( 'div' );
+	playhead.style.position = 'absolute';
+	playhead.style.top = '0';
+	playhead.style.bottom = '0';
+	playhead.style.width = '2px';
+	playhead.style.background = '#f00';
+	playhead.style.left = '150px'; // Start at timeline start (after labels)
+	playhead.style.pointerEvents = 'none';
+	playhead.style.zIndex = '10';
+	timelineArea.appendChild( playhead );
+
+	// Timeline scrubbing
+	let isDragging = false;
+	const labelWidth = 150;
+
+	function updateTimeFromPosition( clientX ) {
+
+		const rect = timelineArea.getBoundingClientRect();
+		const timelineStart = labelWidth;
+		const timelineWidth = rect.width - labelWidth;
+		const x = Math.max( 0, Math.min( clientX - rect.left - timelineStart, timelineWidth ) );
+		const percent = x / timelineWidth;
+
+		if ( currentAction && currentClip ) {
+
+			const time = percent * currentClip.duration;
+			currentAction.play();
+			currentAction.time = time;
+			currentAction.paused = true;
+			editor.mixer.update( 0 );
+
+		}
+
+	}
+
+	timelineArea.addEventListener( 'mousedown', function ( event ) {
+
+		const rect = timelineArea.getBoundingClientRect();
+		if ( event.clientX - rect.left > labelWidth ) {
+
+			event.preventDefault();
+
+			isDragging = true;
+			updateTimeFromPosition( event.clientX );
+
+		}
+
+	} );
+
+	document.addEventListener( 'mousemove', function ( event ) {
+
+		if ( isDragging ) {
+
+			updateTimeFromPosition( event.clientX );
+
+		}
+
+	} );
+
+	document.addEventListener( 'mouseup', function () {
+
+		isDragging = false;
+
+	} );
+
+	// Track colors by type
+	const trackColors = {
+		position: '#4CAF50',
+		quaternion: '#2196F3',
+		rotation: '#2196F3',
+		scale: '#FF9800',
+		morphTargetInfluences: '#9C27B0',
+		default: '#607D8B'
+	};
+
+	function getTrackColor( trackName ) {
+
+		for ( const type in trackColors ) {
+
+			if ( trackName.endsWith( '.' + type ) ) {
+
+				return trackColors[ type ];
+
+			}
+
+		}
+
+		return trackColors.default;
+
+	}
+
+	function getTrackType( trackName ) {
+
+		const parts = trackName.split( '.' );
+		return parts[ parts.length - 1 ];
+
+	}
+
+	// Hover path helper
+	let hoverHelper = null;
+	let currentAction = null;
+	let currentClip = null;
+	let currentRoot = null;
+
+	// Get all clips from scene animations
+	function getAnimationClips() {
+
+		const scene = editor.scene;
+		const clips = [];
+		const seen = new Set();
+
+		scene.traverse( function ( object ) {
+
+			if ( object.animations && object.animations.length > 0 ) {
+
+				for ( const clip of object.animations ) {
+
+					if ( ! seen.has( clip.uuid ) ) {
+
+						seen.add( clip.uuid );
+						clips.push( { clip: clip, root: object } );
+
+					}
+
+				}
+
+			}
+
+		} );
+
+		// Also check scene.animations directly
+		for ( const clip of scene.animations ) {
+
+			if ( ! seen.has( clip.uuid ) ) {
+
+				seen.add( clip.uuid );
+				clips.push( { clip: clip, root: scene } );
+
+			}
+
+		}
+
+		return clips;
+
+	}
+
+	function getObjectName( trackName, root ) {
+
+		// Extract UUID from track name (format: uuid.property)
+		const dotIndex = trackName.lastIndexOf( '.' );
+		if ( dotIndex === - 1 ) return trackName;
+
+		const uuid = trackName.substring( 0, dotIndex );
+		const object = root.getObjectByProperty( 'uuid', uuid );
+
+		return object ? ( object.name || 'Object' ) : uuid.substring( 0, 8 );
+
+	}
+
+	function update() {
+
+		trackListContainer.innerHTML = '';
+
+		container.setDisplay( 'flex' );
+		container.dom.style.height = panelHeight + 'px';
+		signals.animationPanelChanged.dispatch( panelHeight );
+
+		const clips = getAnimationClips();
+
+		if ( clips.length === 0 ) {
+
+			return;
+
+		}
+
+		for ( const { clip, root } of clips ) {
+
+			// Clip header row
+			const clipRow = document.createElement( 'div' );
+			clipRow.style.display = 'flex';
+			clipRow.style.alignItems = 'center';
+			clipRow.style.height = '24px';
+			clipRow.style.borderBottom = '1px solid #ccc';
+			clipRow.style.cursor = 'pointer';
+			clipRow.style.background = currentClip === clip ? 'rgba(0, 136, 255, 0.1)' : '';
+
+			const clipLabel = document.createElement( 'div' );
+			clipLabel.style.width = labelWidth + 'px';
+			clipLabel.style.padding = '0 10px';
+			clipLabel.style.fontSize = '11px';
+			clipLabel.style.fontWeight = 'bold';
+			clipLabel.style.overflow = 'hidden';
+			clipLabel.style.textOverflow = 'ellipsis';
+			clipLabel.style.whiteSpace = 'nowrap';
+			clipLabel.style.flexShrink = '0';
+			clipLabel.style.boxSizing = 'border-box';
+			clipLabel.textContent = clip.name || 'Animation';
+			clipRow.appendChild( clipLabel );
+
+			const clipTimeline = document.createElement( 'div' );
+			clipTimeline.style.flex = '1';
+			clipTimeline.style.height = '100%';
+			clipTimeline.style.background = 'rgba(0,0,0,0.03)';
+			clipRow.appendChild( clipTimeline );
+
+			clipRow.addEventListener( 'click', function () {
+
+				if ( editor.selected !== root ) {
+
+					signals.objectSelected.remove( selectDefaultClip );
+					editor.select( root );
+					signals.objectSelected.add( selectDefaultClip );
+
+				}
+
+				selectClip( clip, root );
+				update(); // Refresh to update highlighting
+
+			} );
+
+			trackListContainer.appendChild( clipRow );
+
+			// Only show tracks for selected clip
+			if ( currentClip === clip ) {
+
+				const duration = clip.duration;
+
+				for ( const track of clip.tracks ) {
+
+					const times = track.times;
+					if ( times.length === 0 ) continue;
+
+					const startTime = times[ 0 ];
+					const endTime = times[ times.length - 1 ];
+					const startPercent = ( startTime / duration ) * 100;
+					const widthPercent = ( ( endTime - startTime ) / duration ) * 100;
+
+					const trackRow = document.createElement( 'div' );
+					trackRow.style.display = 'flex';
+					trackRow.style.alignItems = 'center';
+					trackRow.style.height = '20px';
+					trackRow.style.borderBottom = '1px solid #eee';
+
+					// Track label
+					const trackLabel = document.createElement( 'div' );
+					trackLabel.style.width = labelWidth + 'px';
+					trackLabel.style.padding = '0 10px 0 20px';
+					trackLabel.style.fontSize = '10px';
+					trackLabel.style.overflow = 'hidden';
+					trackLabel.style.textOverflow = 'ellipsis';
+					trackLabel.style.whiteSpace = 'nowrap';
+					trackLabel.style.flexShrink = '0';
+					trackLabel.style.boxSizing = 'border-box';
+					trackLabel.style.color = '#666';
+
+					const objectName = getObjectName( track.name, root );
+					const trackType = getTrackType( track.name );
+					trackLabel.textContent = objectName + '.' + trackType;
+					trackLabel.title = track.name;
+					trackRow.appendChild( trackLabel );
+
+					// Track timeline with block
+					const trackTimeline = document.createElement( 'div' );
+					trackTimeline.style.flex = '1';
+					trackTimeline.style.height = '100%';
+					trackTimeline.style.position = 'relative';
+					trackTimeline.style.background = 'rgba(0,0,0,0.02)';
+
+					const block = document.createElement( 'div' );
+					block.style.position = 'absolute';
+					block.style.left = startPercent + '%';
+					block.style.width = Math.max( 0.5, widthPercent ) + '%';
+					block.style.top = '3px';
+					block.style.bottom = '3px';
+					block.style.background = getTrackColor( track.name );
+					block.style.borderRadius = '2px';
+					block.style.opacity = '0.6';
+					block.title = trackType + ': ' + startTime.toFixed( 2 ) + 's - ' + endTime.toFixed( 2 ) + 's';
+
+					trackTimeline.appendChild( block );
+
+					// Add keyframe markers
+					for ( let i = 0; i < times.length; i ++ ) {
+
+						const keyframePercent = ( times[ i ] / duration ) * 100;
+						const keyframe = document.createElement( 'div' );
+						keyframe.style.position = 'absolute';
+						keyframe.style.left = keyframePercent + '%';
+						keyframe.style.top = '50%';
+						keyframe.style.width = '6px';
+						keyframe.style.height = '6px';
+						keyframe.style.marginLeft = '-3px';
+						keyframe.style.marginTop = '-3px';
+						keyframe.style.background = getTrackColor( track.name );
+						keyframe.style.borderRadius = '1px';
+						keyframe.style.transform = 'rotate(45deg)';
+						keyframe.title = times[ i ].toFixed( 3 ) + 's';
+						trackTimeline.appendChild( keyframe );
+
+					}
+
+					trackRow.appendChild( trackTimeline );
+
+					// Hover on position tracks to show path helper
+					if ( track.name.endsWith( '.position' ) && track.getValueSize() === 3 ) {
+
+						const uuid = track.name.replace( '.position', '' );
+						const object = root.getObjectByProperty( 'uuid', uuid );
+
+						if ( object ) {
+
+							trackRow.addEventListener( 'mouseenter', function () {
+
+								showPath( clip, object );
+
+							} );
+
+							trackRow.addEventListener( 'mouseleave', function () {
+
+								hidePath();
+
+							} );
+
+						}
+
+					}
+
+					trackListContainer.appendChild( trackRow );
+
+				}
+
+			}
+
+		}
+
+	}
+
+	function selectClip( clip, root ) {
+
+		// Stop current action
+		if ( currentAction ) {
+
+			currentAction.stop();
+
+		}
+
+		if ( currentClip === clip ) {
+
+			// Unselect clip
+			currentAction = null;
+			currentClip = null;
+			currentRoot = null;
+
+			timeText.setValue( '0.00' );
+			durationText.setValue( '0.00' );
+
+		} else {
+
+			// Select clip without playing
+			currentClip = clip;
+			currentRoot = root;
+			currentAction = editor.mixer.clipAction( clip, root );
+
+			// Update duration display
+			durationText.setValue( clip.duration.toFixed( 2 ) );
+
+		}
+
+	}
+
+	function showPath( clip, object ) {
+
+		hidePath();
+
+		hoverHelper = new AnimationPathHelper( currentRoot, clip, object );
+		editor.sceneHelpers.add( hoverHelper );
+		signals.sceneGraphChanged.dispatch();
+
+	}
+
+	function hidePath() {
+
+		if ( hoverHelper ) {
+
+			editor.sceneHelpers.remove( hoverHelper );
+			hoverHelper.dispose();
+			hoverHelper = null;
+			signals.sceneGraphChanged.dispatch();
+
+		}
+
+	}
+
+	function clear() {
+
+		hidePath();
+		trackListContainer.innerHTML = '';
+		currentAction = null;
+		currentClip = null;
+		currentRoot = null;
+		timeText.setValue( '0.00' );
+		durationText.setValue( '0.00' );
+
+	}
+
+	// Update time display and playhead during playback
+	function updateTime() {
+
+		if ( currentAction && currentClip ) {
+
+			const time = currentAction.time % currentClip.duration;
+			timeText.setValue( time.toFixed( 2 ) );
+
+			// Update playhead position
+			const rect = timelineArea.getBoundingClientRect();
+			const timelineWidth = rect.width - labelWidth;
+			const playheadX = labelWidth + ( time / currentClip.duration ) * timelineWidth;
+			playhead.style.left = playheadX + 'px';
+
+		}
+
+		requestAnimationFrame( updateTime );
+
+	}
+
+	function selectDefaultClip( object ) {
+
+		if ( object !== null && object.animations && object.animations.length > 0 ) {
+
+			selectClip( object.animations[ 0 ], object );
+			update();
+
+		}
+
+	}
+
+	updateTime();
+
+	// Auto-select clip when an object with animations is selected
+	signals.objectSelected.add( selectDefaultClip );
+
+	// Update when scene changes
+	signals.editorCleared.add( clear );
+	signals.objectAdded.add( update );
+	signals.objectRemoved.add( update );
+
+	// Show panel on initial load
+	container.setDisplay( 'flex' );
+	container.dom.style.height = panelHeight + 'px';
+	signals.animationPanelChanged.dispatch( panelHeight );
+
+	return container;
+
+}
+
+export { Animation };

package/src/editor/js/AnimationResizer.js

@@ -0,0 +1,73 @@
+import { UIElement } from './libs/ui.js';
+
+function AnimationResizer( editor ) {
+
+	const signals = editor.signals;
+
+	const dom = document.createElement( 'div' );
+	dom.id = 'animation-resizer';
+
+	let panelHeight = 36;
+	let startY = 0;
+	let startHeight = 0;
+
+	function onPointerDown( event ) {
+
+		if ( event.isPrimary === false ) return;
+
+		startY = event.clientY;
+		startHeight = panelHeight;
+
+		dom.ownerDocument.addEventListener( 'pointermove', onPointerMove );
+		dom.ownerDocument.addEventListener( 'pointerup', onPointerUp );
+
+	}
+
+	function onPointerUp( event ) {
+
+		if ( event.isPrimary === false ) return;
+
+		dom.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
+		dom.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
+
+	}
+
+	function onPointerMove( event ) {
+
+		if ( event.isPrimary === false ) return;
+
+		const deltaY = startY - event.clientY;
+		const newHeight = startHeight + deltaY;
+		const maxHeight = window.innerHeight / 2;
+
+		// Clamp between 36px (top bar only) and half the window height
+		panelHeight = Math.max( 36, Math.min( maxHeight, newHeight ) );
+
+		signals.animationPanelResized.dispatch( panelHeight );
+
+	}
+
+	dom.addEventListener( 'pointerdown', onPointerDown );
+
+	// Show/hide based on animation panel visibility
+	signals.animationPanelChanged.add( function ( height ) {
+
+		if ( height === false ) {
+
+			dom.style.display = 'none';
+
+		} else {
+
+			dom.style.display = 'block';
+			dom.style.bottom = height + 'px';
+			panelHeight = height;
+
+		}
+
+	} );
+
+	return new UIElement( dom );
+
+}
+
+export { AnimationResizer };