gsuiOscillator: handle 'source' or 'wave'

Author: mr21

gsuiOscillator/gsuiOscillator.css

@@ -80,6 +80,7 @@ gsui-oscillator[ type="noise" ] .gsuiOscillator-detune .gsuiOscillator-sliderVal
 /* .......................................................................... */
 .gsuiOscillator-waveWrap {
 	position: relative;
+	overflow: hidden;
 	grid-area: wave;
 	display: flex;
 	border-radius: 3px;
@@ -89,9 +90,11 @@ gsui-oscillator[ type="noise" ] .gsuiOscillator-detune .gsuiOscillator-sliderVal
 	flex: 1;
 	display: flex;
 	flex-direction: column;
+	overflow: hidden;
 }
 .gsuiOscillator-waveWrap-top {
 	display: flex;
+	height: 18px;
 }
 .gsuiOscillator-wave {
 	flex: 1;
@@ -119,11 +122,23 @@ gsui-oscillator[ type="noise" ] .gsuiOscillator-detune .gsuiOscillator-sliderVal
 	opacity: .5;
 	transition: .1s opacity;
 }
+gsui-oscillator[ source ] .gsuiOscillator-waveBtn,
+gsui-oscillator[ source ] .gsuiOscillator-waveSelect,
+gsui-oscillator[ wave ] .gsuiOscillator-sourceIcon,
+gsui-oscillator[ wave ] .gsuiOscillator-sourceName {
+	display: none;
+}
+.gsuiOscillator-sourceIcon,
 .gsuiOscillator-waveBtn {
 	width: 14px;
 	font-size: 16px;
 	text-align: center;
 }
+.gsuiOscillator-sourceIcon {
+	margin-left: 6px;
+	font-size: 12px;
+	opacity: .5;
+}
 .gsuiOscillator-remove {
 	position: absolute;
 	inset: 0 2px auto auto;
@@ -141,13 +156,18 @@ gsui-oscillator[ type="noise" ] .gsuiOscillator-detune .gsuiOscillator-sliderVal
 }
 
 /* .......................................................................... */
+.gsuiOscillator-sourceName,
 .gsuiOscillator-waveSelect {
 	flex: 1;
 	padding-left: 6px;
 	font-size: 12px;
 	font-family: inherit;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 	-moz-appearance: none;
 	-webkit-appearance: none;
+	opacity: .5;
 }
 .gsuiOscillator-waveOpt {
 	background-color: var( --gsuiOscillator-wave-option );

gsuiOscillator/gsuiOscillator.html.js

@@ -12,6 +12,8 @@ GSUsetTemplate( "gsui-oscillator", waves => {
 					GSUcreateSelect( { class: "gsuiOscillator-waveSelect" },
 						waves.map( w => GSUcreateOption( { class: "gsuiOscillator-waveOptNative", value: w } ) )
 					),
+					GSUcreateI( { class: "gsuiOscillator-sourceIcon gsuiIcon", "data-icon": "waveform" } ),
+					GSUcreateSpan( { class: "gsuiOscillator-sourceName" } ),
 				),
 				GSUcreateDiv( { class: "gsuiOscillator-wave" },
 					GSUcreateElement( "gsui-periodicwave" ),

gsuiOscillator/gsuiOscillator.js

@@ -20,6 +20,7 @@ class gsuiOscillator extends HTMLElement {
 		waveSelect: ".gsuiOscillator-waveSelect",
 		wavePrev: ".gsuiOscillator-wavePrev",
 		waveNext: ".gsuiOscillator-waveNext",
+		sourceName: ".gsuiOscillator-sourceName",
 		waves: [
 			"gsui-periodicwave:first-child",
 			"gsui-periodicwave:last-child",
@@ -90,7 +91,8 @@ class gsuiOscillator extends HTMLElement {
 			this.#elements.waves[ 1 ].$nbLines( 1 );
 			GSUrecallAttributes( this, {
 				order: 0,
-				wave: "sine",
+				wave: undefined,
+				source: undefined,
 				detune: 0,
 				detunefine: 0,
 				gain: 1,
@@ -103,7 +105,7 @@ class gsuiOscillator extends HTMLElement {
 		}
 	}
 	static get observedAttributes() {
-		return [ "order", "wave", "detune", "detunefine", "gain", "pan", "unisonvoices", "unisondetune", "unisonblend" ];
+		return [ "order", "wave", "source", "detune", "detunefine", "gain", "pan", "unisonvoices", "unisondetune", "unisonblend" ];
 	}
 	attributeChangedCallback( prop, prev, val ) {
 		if ( !this.#children && prev !== val ) {
@@ -112,6 +114,7 @@ class gsuiOscillator extends HTMLElement {
 			switch ( prop ) {
 				case "order": this.#changeOrder( num ); break;
 				case "wave": this.#changeWave( val ); break;
+				case "source": this.#changeSource( val ); break;
 				case "unisonvoices":
 					this.#updateUnisonGraphVoices( num );
 					this.#changePropSlider( "unisonvoices", num );
@@ -169,6 +172,10 @@ class gsuiOscillator extends HTMLElement {
 	#changeOrder( n ) {
 		this.dataset.order = n;
 	}
+	#changeSource( src ) {
+		this.#elements.sourceName.textContent = src;
+		GSUsetAttribute( this, "wave", false );
+	}
 	#changeWave( w ) {
 		const noise = w === "noise";
 
@@ -178,6 +185,7 @@ class gsuiOscillator extends HTMLElement {
 		GSUsetAttribute( this.#elements.sliders.unisonvoices[ 0 ], "disabled", noise );
 		GSUsetAttribute( this.#elements.sliders.unisondetune[ 0 ], "disabled", noise );
 		GSUsetAttribute( this.#elements.sliders.unisonblend[ 0 ], "disabled", noise );
+		GSUsetAttribute( this, "source", false );
 	}
 	#changePropSlider( prop, val ) {
 		const [ sli, span ] = this.#elements.sliders[ prop ];

gsuiOscillator/index.html

@@ -66,6 +66,8 @@
 GSUsetAttribute( elOsc, "wave", "square" );
 GSUsetAttribute( elOsc, "wave", "sawtooth" );
 GSUsetAttribute( elOsc, "gain", .5 );
+// GSUsetAttribute( elOsc, "source", "A buffer instead of a wave" );
+// GSUsetAttribute( elOsc, "wave", "noise" );
 </script>
 </body>
 </html>