diff --git a/gsuiBlocksManager/gsuiBlocksManager.js b/gsuiBlocksManager/gsuiBlocksManager.js index 742fff37..9c0242c2 100644 --- a/gsuiBlocksManager/gsuiBlocksManager.js +++ b/gsuiBlocksManager/gsuiBlocksManager.js @@ -68,29 +68,29 @@ class gsuiBlocksManager { } // ......................................................................... - getOpts() { return this.#opts; } - setData( data ) { this.#data = data; } - setFontSize( px ) { this.#fontSize = px; } - setPxPerBeat( px ) { this.#pxPerBeat = px; } - getFontSize() { return this.#fontSize; } - getPxPerBeat() { return this.#pxPerBeat; } - getRows() { return this.#nlRows; } - getBlocks() { return this.#blcs; } - getSelectedBlocks() { return this.#blcsSelected; } + $getOpts() { return this.#opts; } + $setData( data ) { this.#data = data; } + $setFontSize( px ) { this.#fontSize = px; } + $setPxPerBeat( px ) { this.#pxPerBeat = px; } + $getFontSize() { return this.#fontSize; } + $getPxPerBeat() { return this.#pxPerBeat; } + $getRows() { return this.#nlRows; } + $getBlocks() { return this.#blcs; } + $getSelectedBlocks() { return this.#blcsSelected; } // ......................................................................... #getRow0BCR() { return this.#nlRows[ 0 ].getBoundingClientRect(); } - getRowByIndex( ind ) { return this.#nlRows[ ind ]; } - getRowIndexByRow( row ) { return Array.prototype.indexOf.call( this.#nlRows, row ); } - getRowIndexByPageY( pageY ) { + $getRowByIndex( ind ) { return this.#nlRows[ ind ]; } + $getRowIndexByRow( row ) { return Array.prototype.indexOf.call( this.#nlRows, row ); } + $getRowIndexByPageY( pageY ) { const ind = Math.floor( ( pageY - this.#getRow0BCR().top ) / this.#fontSize ); return Math.max( 0, Math.min( ind, this.#nlRows.length - 1 ) ); } - getWhenByPageX( pageX ) { + $getWhenByPageX( pageX ) { return Math.max( 0, ( pageX - this.#getRow0BCR().left ) / this.#pxPerBeat ); } - roundBeat( beat ) { + $roundBeat( beat ) { return Math.max( 0, this.timeline.beatFloor( beat ) ); } @@ -179,7 +179,7 @@ class gsuiBlocksManager { } // ......................................................................... - onmousedown( e ) { + $onmousedown( e ) { const blc = this.#getBlc( e.currentTarget ); GSUunselectText(); @@ -193,16 +193,16 @@ class gsuiBlocksManager { this.#blcsEditing.set( blc.dataset.id, blc ); } } else if ( e.button === 0 ) { - const mdWhenReal = this.getWhenByPageX( e.pageX ); + const mdWhenReal = this.$getWhenByPageX( e.pageX ); this.#mdPageX = e.pageX; this.#mdPageY = e.pageY; - this.#mdWhen = this.roundBeat( mdWhenReal ); + this.#mdWhen = this.$roundBeat( mdWhenReal ); this.#beatSnap = this.#getBeatSnap(); if ( e.shiftKey ) { this.#mmFn = gsuiBlocksManager.#mousemoveFns.selection1; this.#status = "selecting-1"; - this.#mdRowInd = this.getRowIndexByPageY( e.pageY ); + this.#mdRowInd = this.$getRowIndexByPageY( e.pageY ); } else if ( blc ) { const fnAct = gsuiBlocksManager.#mousedownFns[ e.target.dataset.action ]; @@ -221,9 +221,9 @@ class gsuiBlocksManager { static #onmousedownMove( data, blcsEditing, _blc, e ) { this.#mmFn = gsuiBlocksManager.#mousemoveFns.move; this.#status = "moving"; - this.#mdRowInd = this.getRowIndexByPageY( e.pageY ); + this.#mdRowInd = this.$getRowIndexByPageY( e.pageY ); blcsEditing.forEach( ( blc, id ) => { - const valB = this.getRowIndexByRow( blc.parentNode.parentNode ); + const valB = this.$getRowIndexByRow( blc.parentNode.parentNode ); this.#valueAMin = Math.min( this.#valueAMin, data[ id ].when ); this.#valueBMin = Math.min( this.#valueBMin, valB ); @@ -265,9 +265,9 @@ class gsuiBlocksManager { this.#mmPageX = e.pageX; this.#mmPageY = e.pageY; } - const mmWhenReal = this.getWhenByPageX( this.#mmPageX ); + const mmWhenReal = this.$getWhenByPageX( this.#mmPageX ); - this.#mmWhen = this.roundBeat( mmWhenReal ); + this.#mmWhen = this.$roundBeat( mmWhenReal ); this.#mmFn( e ); } } @@ -298,7 +298,7 @@ class gsuiBlocksManager { const when = Math.max( this.#valueAMin, Math.round( ( this.#mmWhen - this.#mdWhen ) / this.#beatSnap ) * this.#beatSnap ); const rows = Math.max( this.#valueBMin, Math.min( this.#valueBMax, - this.getRowIndexByPageY( this.#mmPageY ) - this.#mdRowInd ) ); + this.$getRowIndexByPageY( this.#mmPageY ) - this.#mdRowInd ) ); if ( when !== this.#valueA ) { this.#valueA = when; @@ -330,13 +330,13 @@ class gsuiBlocksManager { static #onmousemoveSelection2() { const rowH = this.#fontSize; const st = this.#elSelection.style; - const rowIndB = this.getRowIndexByPageY( this.#mmPageY ); + const rowIndB = this.$getRowIndexByPageY( this.#mmPageY ); const when = Math.min( this.#mdWhen, this.#mmWhen ); const duration = this.#getBeatSnap() + Math.abs( this.#mdWhen - this.#mmWhen ); const topRow = Math.min( this.#mdRowInd, rowIndB ); const bottomRow = Math.max( this.#mdRowInd, rowIndB ); - const rowA = this.getRowByIndex( topRow ); - const rowB = this.getRowByIndex( bottomRow ); + const rowA = this.$getRowByIndex( topRow ); + const rowB = this.$getRowByIndex( bottomRow ); const blcs = Object.entries( this.#data ).reduce( ( map, [ id, blc ] ) => { if ( !this.#blcsSelected.has( id ) && blc.when < when + duration && diff --git a/gsuiPatternroll/gsuiPatternroll.js b/gsuiPatternroll/gsuiPatternroll.js index 2758d93d..6b47ef6f 100644 --- a/gsuiPatternroll/gsuiPatternroll.js +++ b/gsuiPatternroll/gsuiPatternroll.js @@ -78,7 +78,7 @@ class gsuiPatternroll extends HTMLElement { const elTrack = this.#tracklist.addTrack( id ); const row = elTrack.rowElement; - row.classList.toggle( "gsui-row-small", this.#blcManager.getFontSize() <= 44 ); + row.classList.toggle( "gsui-row-small", this.#blcManager.$getFontSize() <= 44 ); row.onmousedown = this.#rowMousedown.bind( this ); this.#rowsByTrackId.set( row.dataset.id, row ); this.#win.querySelector( ".gsuiTimewindow-rows" ).append( row ); @@ -96,42 +96,42 @@ class gsuiPatternroll extends HTMLElement { elBlc.dataset.pattern = obj.pattern; elBlc.onmousedown = this.#blcMousedown.bind( this, id ); GSUsetAttribute( elBlc, "data-missing", !dataReady ); - this.#blcManager.getBlocks().set( id, elBlc ); + this.#blcManager.$getBlocks().set( id, elBlc ); this.onaddBlock( id, obj, elBlc ); } removeBlock( id ) { - this.#blcManager.getBlocks().get( id ).remove(); - this.#blcManager.getBlocks().delete( id ); - this.#blcManager.getSelectedBlocks().delete( id ); + this.#blcManager.$getBlocks().get( id ).remove(); + this.#blcManager.$getBlocks().delete( id ); + this.#blcManager.$getSelectedBlocks().delete( id ); } changeBlockProp( id, prop, val ) { - const blc = this.#blcManager.getBlocks().get( id ); + const blc = this.#blcManager.$getBlocks().get( id ); this.#blockDOMChange( blc, prop, val ); if ( prop === "track" ) { blc.dataset.track = val; } else if ( prop === "selected" ) { val - ? this.#blcManager.getSelectedBlocks().set( id, blc ) - : this.#blcManager.getSelectedBlocks().delete( id ); + ? this.#blcManager.$getSelectedBlocks().set( id, blc ) + : this.#blcManager.$getSelectedBlocks().delete( id ); } } updateBlockViewBox( id, obj ) { - this.oneditBlock( id, obj, this.#blcManager.getBlocks().get( id ) ); + this.oneditBlock( id, obj, this.#blcManager.$getBlocks().get( id ) ); } // ......................................................................... - setData( data ) { - this.#blcManager.setData( data ); + $setData( data ) { + this.#blcManager.$setData( data ); } setCallbacks( cb ) { this.onchange = cb.onchange; this.onaddBlock = cb.onaddBlock; this.oneditBlock = cb.oneditBlock; - this.#blcManager.getOpts().oneditBlock = cb.oneditBlock; + this.#blcManager.$getOpts().oneditBlock = cb.oneditBlock; } - getBlocks() { - return this.#blcManager.getBlocks(); + $getBlocks() { + return this.#blcManager.$getBlocks(); } timedivision( timediv ) { GSUsetAttribute( this.#win, "timedivision", timediv ); @@ -160,30 +160,30 @@ class gsuiPatternroll extends HTMLElement { #getRowByTrackId( id ) { return this.#rowsByTrackId.get( id ); } #incrTrackId( id, incr ) { const row = this.#getRowByTrackId( id ); - const rowInd = this.#blcManager.getRowIndexByRow( row ) + incr; + const rowInd = this.#blcManager.$getRowIndexByRow( row ) + incr; - return this.#blcManager.getRowByIndex( rowInd ).dataset.id; + return this.#blcManager.$getRowByIndex( rowInd ).dataset.id; } // ......................................................................... #ongsuiTimewindowPxperbeat( ppb ) { - this.#blcManager.setPxPerBeat( ppb ); + this.#blcManager.$setPxPerBeat( ppb ); } #ongsuiTimewindowLineheight( px ) { - this.#blcManager.setFontSize( px ); - Array.from( this.#blcManager.getRows() ).forEach( el => el.classList.toggle( "gsui-row-small", px <= 44 ) ); + this.#blcManager.$setFontSize( px ); + Array.from( this.#blcManager.$getRows() ).forEach( el => el.classList.toggle( "gsui-row-small", px <= 44 ) ); } // ......................................................................... #rowMousedown( e ) { - this.#blcManager.onmousedown( e ); - if ( e.button === 0 && !e.shiftKey && this.#blcManager.getSelectedBlocks().size ) { + this.#blcManager.$onmousedown( e ); + if ( e.button === 0 && !e.shiftKey && this.#blcManager.$getSelectedBlocks().size ) { this.onchange( "unselection" ); } } #blcMousedown( id, e ) { e.stopPropagation(); - this.#blcManager.onmousedown( e ); + this.#blcManager.$onmousedown( e ); } #drop( e ) { const [ patType, patId ] = GSUgetDataTransfer( e, [ @@ -196,8 +196,8 @@ class gsuiPatternroll extends HTMLElement { ] ); if ( patId ) { - const when = this.#blcManager.roundBeat( this.#blcManager.getWhenByPageX( e.pageX ) ); - const track = this.#blcManager.getRowByIndex( this.#blcManager.getRowIndexByPageY( e.pageY ) ).dataset.id; + const when = this.#blcManager.$roundBeat( this.#blcManager.$getWhenByPageX( e.pageX ) ); + const track = this.#blcManager.$getRowByIndex( this.#blcManager.$getRowIndexByPageY( e.pageY ) ).dataset.id; this.onchange( "add", patType, patId, when, track ); } diff --git a/gsuiPianoroll/gsuiPianoroll.js b/gsuiPianoroll/gsuiPianoroll.js index 39fa35ee..5366cf24 100644 --- a/gsuiPianoroll/gsuiPianoroll.js +++ b/gsuiPianoroll/gsuiPianoroll.js @@ -108,8 +108,8 @@ class gsuiPianoroll extends HTMLElement { reset() { this.#currKeyDuration = 1; } - setData( data ) { - this.#blcManager.setData( data ); + $setData( data ) { + this.#blcManager.$setData( data ); } setCallbacks( cb ) { this.onchange = cb.onchange; @@ -167,10 +167,10 @@ class gsuiPianoroll extends HTMLElement { blc._draglineDrop = blc.querySelector( ".gsuiDragline-drop" ); blc.append( dragline.rootElement ); dragline.getDropAreas = this.#getDropAreas.bind( this, id ); - this.#blcManager.getBlocks().set( id, blc ); + this.#blcManager.$getBlocks().set( id, blc ); obj.selected - ? this.#blcManager.getSelectedBlocks().set( id, blc ) - : this.#blcManager.getSelectedBlocks().delete( id ); + ? this.#blcManager.$getSelectedBlocks().set( id, blc ) + : this.#blcManager.$getSelectedBlocks().delete( id ); this.#uiSliderGroup.set( id, obj.when, obj.duration, obj[ this.#slidersSelect.value ] ); this.#blockDOMChange( blc, "key", obj.key ); this.#blockDOMChange( blc, "when", obj.when ); @@ -186,19 +186,19 @@ class gsuiPianoroll extends HTMLElement { this.#blockDOMChange( blc, "next", obj.next ); } removeKey( id ) { - const blc = this.#blcManager.getBlocks().get( id ); - const blcPrev = this.#blcManager.getBlocks().get( blc.dataset.prev ); + const blc = this.#blcManager.$getBlocks().get( id ); + const blcPrev = this.#blcManager.$getBlocks().get( blc.dataset.prev ); blc.remove(); if ( blcPrev ) { blcPrev._dragline.linkTo( null ); } - this.#blcManager.getBlocks().delete( id ); - this.#blcManager.getSelectedBlocks().delete( id ); + this.#blcManager.$getBlocks().delete( id ); + this.#blcManager.$getSelectedBlocks().delete( id ); this.#uiSliderGroup.delete( id ); } changeKeyProp( id, prop, val ) { - const blc = this.#blcManager.getBlocks().get( id ); + const blc = this.#blcManager.$getBlocks().get( id ); this.#blockDOMChange( blc, prop, val ); if ( val === null ) { @@ -208,8 +208,8 @@ class gsuiPianoroll extends HTMLElement { } if ( prop === "selected" ) { val - ? this.#blcManager.getSelectedBlocks().set( id, blc ) - : this.#blcManager.getSelectedBlocks().delete( id ); + ? this.#blcManager.$getSelectedBlocks().set( id, blc ) + : this.#blcManager.$getSelectedBlocks().delete( id ); } } #blockDOMChange( el, prop, val ) { @@ -243,13 +243,13 @@ class gsuiPianoroll extends HTMLElement { this.#blockRedrawDragline( el ); } break; case "prev": { - const blc = this.#blcManager.getBlocks().get( val ); + const blc = this.#blcManager.$getBlocks().get( val ); el.classList.toggle( "gsuiPianoroll-block-prevLinked", !!val ); blc && blc._dragline.linkTo( el._draglineDrop ); } break; case "next": { - const blc = this.#blcManager.getBlocks().get( val ); + const blc = this.#blcManager.$getBlocks().get( val ); el.classList.toggle( "gsuiPianoroll-block-nextLinked", !!val ); el._dragline.linkTo( blc && blc._draglineDrop ); @@ -272,7 +272,7 @@ class gsuiPianoroll extends HTMLElement { } } #blockRedrawDragline( el ) { - const blcPrev = this.#blcManager.getBlocks().get( el.dataset.prev ); + const blcPrev = this.#blcManager.$getBlocks().get( el.dataset.prev ); el._dragline.redraw(); blcPrev && blcPrev._dragline.redraw(); @@ -284,14 +284,14 @@ class gsuiPianoroll extends HTMLElement { // ........................................................................ #ongsuiTimewindowPxperbeat( ppb ) { - this.#blcManager.setPxPerBeat( ppb ); - this.#blcManager.getBlocks().forEach( blc => blc._dragline.redraw() ); + this.#blcManager.$setPxPerBeat( ppb ); + this.#blcManager.$getBlocks().forEach( blc => blc._dragline.redraw() ); GSUsetAttribute( this.#uiSliderGroup, "pxperbeat", ppb ); } #ongsuiTimewindowLineheight( px ) { - this.#blcManager.setFontSize( px ); - Array.from( this.#blcManager.getRows() ).forEach( el => el.classList.toggle( "gsui-row-small", px <= 44 ) ); - this.#blcManager.getBlocks().forEach( blc => blc._dragline.redraw() ); + this.#blcManager.$setFontSize( px ); + Array.from( this.#blcManager.$getRows() ).forEach( el => el.classList.toggle( "gsui-row-small", px <= 44 ) ); + this.#blcManager.$getBlocks().forEach( blc => blc._dragline.redraw() ); } #ongsuiTimelineChangeCurrentTime( t ) { GSUsetAttribute( this.#uiSliderGroup, "currenttime", t ); @@ -366,13 +366,13 @@ class gsuiPianoroll extends HTMLElement { e.stopPropagation(); if ( !dline.contains( e.target ) ) { - this.#blcManager.onmousedown( e ); + this.#blcManager.$onmousedown( e ); } } #rowMousedown( key, e ) { - this.#blcManager.onmousedown( e ); + this.#blcManager.$onmousedown( e ); if ( e.button === 0 && !e.shiftKey ) { - const when = this.#blcManager.roundBeat( this.#blcManager.getWhenByPageX( e.pageX ) ); + const when = this.#blcManager.$roundBeat( this.#blcManager.$getWhenByPageX( e.pageX ) ); this.onchange( "add", key, when, this.#currKeyDuration ); } @@ -389,7 +389,7 @@ class gsuiPianoroll extends HTMLElement { case "gainLFOAmp": grp.options( { min: -6, max: 6, def: 0, step: 1 } ); break; case "gainLFOSpeed": grp.options( { min: -6, max: 6, def: 0, step: 1 } ); break; } - this.#blcManager.getBlocks().forEach( ( blc, id ) => { + this.#blcManager.$getBlocks().forEach( ( blc, id ) => { const val = +blc.dataset[ prop ]; const val2 = prop.startsWith( "gainLFO" ) ? gsuiPianoroll.#mulToX( val ) @@ -424,11 +424,11 @@ class gsuiPianoroll extends HTMLElement { // Key's functions // ........................................................................ #getDropAreas( id ) { - const d = this.#blcManager.getBlocks().get( id ).dataset; + const d = this.#blcManager.$getBlocks().get( id ).dataset; const when = +d.when + +d.duration; const arr = []; - this.#blcManager.getBlocks().forEach( blc => { + this.#blcManager.$getBlocks().forEach( blc => { const d = blc.dataset; if ( +d.when >= when && ( d.prev === undefined || d.prev === id ) ) {