chore: refactoring

lib/Controls/Controller.js

@@ -188,7 +188,7 @@ class ControlsController extends CoreBase {
 				}
 
 				if (type) {
-					this.createBankControl(location, type)
+					this.createButtonControl(location, type)
 				}
 			}
 		)
@@ -1485,7 +1485,7 @@ class ControlsController extends CoreBase {
 	 * @returns {string | null} controlId
 	 * @access public
 	 */
-	createBankControl(location, newType) {
+	createButtonControl(location, newType) {
 		if (!this.page.isPageValid(location.pageNumber)) return null
 
 		const controlId = CreateBankControlId(nanoid())

lib/Data/ImportExport.js

@@ -516,7 +516,7 @@ class DataImportExport extends CoreBase {
 				const oldControlId = this.page.getControlIdAt(location)
 				if (oldControlId) this.controls.deleteControl(oldControlId)
 
-				this.controls.createBankControl(location, definition.type)
+				this.controls.createButtonControl(location, definition.type)
 			}
 		}
 	}
@@ -708,7 +708,7 @@ class DataImportExport extends CoreBase {
 				this.page.resetPage(pageNumber)
 
 				for (const { type, location } of default_nav_buttons_definitions) {
-					this.controls.createBankControl(
+					this.controls.createButtonControl(
 						{
 							pageNumber,
 							...location,
@@ -730,7 +730,7 @@ class DataImportExport extends CoreBase {
 			(pageNumber) => {
 				// make magical page buttons!
 				for (const { type, location } of default_nav_buttons_definitions) {
-					this.controls.createBankControl(
+					this.controls.createButtonControl(
 						{
 							pageNumber,
 							...location,
@@ -987,7 +987,7 @@ class DataImportExport extends CoreBase {
 
 				if (!skipNavButtons) {
 					for (const { type, location } of default_nav_buttons_definitions) {
-						this.controls.createBankControl(
+						this.controls.createButtonControl(
 							{
 								pageNumber,
 								...location,

lib/Graphics/Controller.js

@@ -145,7 +145,7 @@ class GraphicsController extends CoreBase {
 						render = this.#renderLRUCache.get(key)
 
 						if (!render) {
-							const { buffer, width, height, dataUrl, draw_style } = await this.#pool.exec('drawBankImage', [
+							const { buffer, width, height, dataUrl, draw_style } = await this.#pool.exec('drawButtonImage', [
 								this.#drawOptions,
 								buttonStyle,
 								location,
@@ -178,7 +178,7 @@ class GraphicsController extends CoreBase {
 						this.emit('button_drawn', location, render)
 					}
 				} catch (e) {
-					this.logger.warn(`drawBankImage failed: ${e}`)
+					this.logger.warn(`drawButtonImage failed: ${e}`)
 				}
 			},
 			5
@@ -240,7 +240,7 @@ class GraphicsController extends CoreBase {
 			size: buttonStyle.size === 'auto' ? 'auto' : Number(buttonStyle.size),
 		}
 
-		const { buffer, width, height, dataUrl, draw_style } = await this.#pool.exec('drawBankImage', [
+		const { buffer, width, height, dataUrl, draw_style } = await this.#pool.exec('drawButtonImage', [
 			this.#drawOptions,
 			drawStyle,
 		])

lib/Graphics/Renderer.js

@@ -111,8 +111,8 @@ export default class GraphicsRenderer {
 	 * @returns {Promise<{ buffer: Buffer, width: number, height: number, dataUrl: string, draw_style: import('../Data/Model/StyleModel.js').DrawStyleModel['style'] | undefined}>} Image render object
 	 */
 	static async drawButtonImageUnwrapped(options, drawStyle, location, pagename) {
-		// console.log('starting drawBankImage '+ performance.now())
-		// console.time('drawBankImage')
+		// console.log('starting drawButtonImage '+ performance.now())
+		// console.time('drawButtonImage')
 		const img = new Image(72, 72, 4)
 
 		/** @type {import('../Data/Model/StyleModel.js').DrawStyleModel['style'] | undefined} */
@@ -180,7 +180,7 @@ export default class GraphicsRenderer {
 			await GraphicsRenderer.#drawButtonMain(img, options, drawStyle, location)
 		}
 
-		// console.timeEnd('drawBankImage')
+		// console.timeEnd('drawButtonImage')
 		return {
 			buffer: img.buffer(),
 			width: img.realwidth,

lib/Graphics/Thread.js

@@ -19,5 +19,5 @@ import GraphicsRenderer from './Renderer.js'
 import workerPool from 'workerpool'
 
 workerPool.worker({
-	drawBankImage: GraphicsRenderer.drawButtonImageUnwrapped,
+	drawButtonImage: GraphicsRenderer.drawButtonImageUnwrapped,
 })

webui/src/App.scss

@@ -9,7 +9,7 @@
 @import 'scss/tablet';
 
 @import 'scss/action-recorder';
-@import 'scss/bank';
+@import 'scss/button-control';
 @import 'scss/button-edit';
 @import 'scss/button-grid';
 @import 'scss/controls';

webui/src/Buttons/ActionRecorder.jsx

@@ -397,7 +397,7 @@ function ButtonPicker({ selectButton }) {
 
 				<ButtonGridHeader pageNumber={pageNumber} changePage={changePage} setPage={setPageNumber} />
 			</div>
-			<div className="bankgrid" ref={isInViewRef}>
+			<div className="buttongrid" ref={isInViewRef}>
 				{hasBeenInView && (
 					<ButtonInfiniteGrid
 						ref={gridRef}

webui/src/Components/ButtonPreview.jsx

@@ -7,7 +7,7 @@ export const RedImage =
 
 export const ButtonPreview = React.memo(function (props) {
 	const classes = {
-		bank: true,
+		'button-control': true,
 		fixed: !!props.fixedSize,
 		drophere: props.canDrop,
 		drophover: props.dropHover,
@@ -45,7 +45,7 @@ export const ButtonPreview = React.memo(function (props) {
 			}}
 		>
 			<div
-				className="bank-border"
+				className="button-border"
 				ref={props.dragRef}
 				style={{
 					backgroundImage: props.preview ? `url(${props.preview})` : undefined,

webui/src/Controls/ActionSetEditor.jsx

@@ -474,7 +474,7 @@ function ActionTableRow({
 						<div className="cell-description">{actionSpec?.description || ''}</div>
 
 						{location && showButtonPreview && (
-							<div className="cell-bank-preview">
+							<div className="cell-button-preview">
 								<OptionButtonPreview location={location} options={action.options} />
 							</div>
 						)}

webui/src/Controls/FeedbackEditor.jsx

@@ -447,7 +447,7 @@ function FeedbackEditor({
 					<div className="cell-description">{feedbackSpec?.description || ''}</div>
 
 					{location && showButtonPreview && (
-						<div className="cell-bank-preview">
+						<div className="cell-button-preview">
 							<OptionButtonPreview location={location} options={feedback.options} />
 						</div>
 					)}

webui/src/Emulator/Emulator.jsx

@@ -271,13 +271,13 @@ function CyclePages({ imageCache, setKeyDown, columns, rows }) {
 							)} */}
 						{/* </h1> */}
 					</div>
-					<div className="bankgrid">
+					<div className="buttongrid">
 						{' '}
 						{Array(rows)
 							.fill(0)
 							.map((_, y) => {
 								return (
-									<CCol key={y} sm={12} className="pagebank-row">
+									<CCol key={y} sm={12} className="buttongrid-row">
 										{Array(columns)
 											.fill(0)
 											.map((_2, x) => {

webui/src/ImportExport/Import/Page.jsx

@@ -86,7 +86,7 @@ export function ImportPageWizard({ snapshot, instanceRemap, setInstanceRemap, do
 								setPage={isSinglePage ? null : setImportPageNumber}
 							/>
 						</CCol>
-						<div className="bankgrid" ref={hasBeenRenderedRef}>
+						<div className="buttongrid" ref={hasBeenRenderedRef}>
 							{hasBeenRendered && (
 								<ButtonInfiniteGrid
 									ref={sourceGridRef}
@@ -118,7 +118,7 @@ export function ImportPageWizard({ snapshot, instanceRemap, setInstanceRemap, do
 
 							<ButtonGridHeader pageNumber={pageNumber} changePage={changePage} setPage={setPageNumber} />
 						</CCol>
-						<div className="bankgrid">
+						<div className="buttongrid">
 							{hasBeenRendered && (
 								<ButtonInfiniteGrid
 									ref={destinationGridRef}

webui/src/TabletView/index.jsx

@@ -149,7 +149,7 @@ export function TabletView() {
 
 							<div className="button-zone">
 								<CRow>
-									<CCol sm={12} className="pagebank-row">
+									<CCol sm={12} className="buttongrid-row">
 										<div ref={elementSizeRef} className="buttons-holder">
 											{validPages.map((number, i) => (
 												<MyErrorBoundary key={i}>

webui/src/scss/_bank.scss → webui/src/scss/_button-control.scss

@@ -1,4 +1,4 @@
-.bank {
+.button-control {
 	-webkit-touch-callout: none !important;
 	-webkit-user-select: none !important;
 	user-select: none !important;
@@ -13,12 +13,12 @@
 		cursor: pointer;
 	}
 
-	&.selected .bank-border {
+	&.selected .button-border {
 		border: 1px solid #d50215 !important;
 		box-shadow: 0px 0px 0px 1px #d50215 inset;
 	}
 
-	&.fixed .bank-border {
+	&.fixed .button-border {
 		width: 72px;
 		height: 72px;
 	}
@@ -37,7 +37,7 @@
 	// 	-webkit-user-drag: inherit;
 	// }
 
-	.bank-border {
+	.button-border {
 		position: relative;
 		object-fit: contain;
 		display: block;

webui/src/scss/_button-edit.scss

@@ -123,11 +123,11 @@ table.feedback-table {
 			grid-column: 1;
 		}
 
-		.cell-bank-preview {
+		.cell-button-preview {
 			grid-row: 2 / 5;
 			grid-column: 2;
 
-			.bank {
+			.button-control {
 				padding: 0;
 			}
 		}

webui/src/scss/_button-grid.scss

@@ -17,7 +17,7 @@
 	color: black;
 }
 
-.bankgrid {
+.buttongrid {
 	-webkit-touch-callout: none !important;
 	-webkit-user-select: none !important;
 	user-select: none !important;
@@ -26,11 +26,11 @@
 	grid-auto-flow: row;
 	grid-auto-rows: 1fr;
 
-	&.bank-armed .pagebank-row {
+	&.button-armed .buttongrid-row {
 		background-color: rgba(255, 0, 0, 0.5);
 	}
 
-	.pagebank-row {
+	.buttongrid-row {
 		display: grid;
 		grid-auto-flow: column;
 		grid-auto-columns: 1fr;
@@ -96,7 +96,7 @@
 	border-radius: 5px;
 	overflow: scroll;
 
-	&.bank-armed {
+	&.button-armed {
 		background-color: #7f1111;
 	}
 
@@ -171,7 +171,7 @@
 			}
 		}
 
-		.bank {
+		.button-control {
 			position: absolute;
 			float: left;
 		}

webui/src/scss/_tablet.scss

@@ -75,26 +75,26 @@
 
 		width: 100%;
 
-		.bank {
+		.button-control {
 			border: none;
 			position: absolute;
 			float: left;
 		}
 
-		.bank img {
+		.button-control img {
 			max-width: 150px;
 			max-height: 150px;
 		}
 
-		&.bank-armed .pagebank-row {
+		&.button-armed .buttongrid-row {
 			background-color: rgba(255, 0, 0, 0.5);
 		}
 
 		.buttons-holder {
 			position: relative;
 		}
 
-		.pagebank-row {
+		.buttongrid-row {
 			display: grid;
 			// grid-auto-flow: column;
 			grid-auto-columns: 1fr;