start toolbox

hlorenzi · Apr 14, 2019 · 97c7ab4 · 97c7ab4
1 parent cd810d6
commit 97c7ab4
Show file tree

Hide file tree

Showing 9 changed files with 154 additions and 5 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,14 @@
+{
+	"plugins": ["@babel/plugin-proposal-class-properties"],
+	"presets":
+	[
+		[
+			"@babel/preset-env",
+			{
+				corejs: 3,
+				useBuiltIns: "entry"
+			}
+		],
+		"@babel/preset-react"
+	]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+/node_modules/
+/.webpack/
+package-lock.json
diff --git a/index.html b/index.html
@@ -10,13 +10,15 @@
 
 	<body style="text-align:center;">
 		<canvas id="canvasMain" width="960" height="540"></canvas>
+		<br>
+		<div id="divToolbox"></div>
 	</body>
 
 
 	<style>
 	</style>
 
 
-	<script type="module" src="src/main.js"></script>
+	<script src=".webpack/main.js"></script>
 
 </html>
diff --git a/package.json b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "composer",
+  "version": "1.0.0",
+  "description": "",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack",
+    "watch": "webpack --watch --mode development",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "browserslist": [
+    "last 2 Chrome versions"
+  ],
+  "author": "",
+  "dependencies": {
+    "@babel/core": "^7.4.3",
+    "@babel/plugin-proposal-class-properties": "^7.4.0",
+    "@babel/preset-env": "^7.4.3",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.5",
+    "core-js": "^3.0.1",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.0"
+  }
+}
diff --git a/src/editor/editor.js b/src/editor/editor.js
@@ -43,7 +43,7 @@ export class Editor
 			.upsertMeterChange(new MeterChange(new Rational(11, 4), 5, 4))
 
 			.upsertKeyChange(new KeyChange(new Rational(0, 4), new Key(0, 0, scales.major.pitches)))
-			.upsertKeyChange(new KeyChange(new Rational(7, 4), new Key(9, 0, scales.minor.pitches)))
+			.upsertKeyChange(new KeyChange(new Rational(7, 4), new Key(5, 1, scales.minor.pitches)))
 			.upsertKeyChange(new KeyChange(new Rational(9, 4), new Key(7, -1, scales.dorian.pitches)))
 
 		this.timeScale = 200
@@ -177,13 +177,15 @@ export class Editor
 		if (this.mouseDownAction & Editor.ACTION_PAN)
 			this.canvas.style.cursor = "default"
 
+		this.toolboxRefreshFn()
 		this.draw()
 	}
 
 
 	onMouseMove(ev)
 	{
-		ev.preventDefault()
+		if (this.mouseDown)
+			ev.preventDefault()
 
 		this.mousePos = this.getMousePos(ev)
 		this.mouseTime = this.getTimeAtPos(this.mousePos)
@@ -250,18 +252,19 @@ export class Editor
 
 	onMouseUp(ev)
 	{
-		ev.preventDefault()
-
 		if (!this.mouseDown)
 			return
 
+		ev.preventDefault()
+
 		this.mouseDown = false
 		this.mousePos = this.getMousePos(ev)
 		this.mouseTime = this.getTimeAtPos(this.mousePos)
 
 		for (const track of this.tracks)
 			track.onMouseUp(ev, true, { x: this.mousePos.x - track.area.x, y: this.mousePos.y - track.area.y })
 
+		this.toolboxRefreshFn()
 		this.draw()
 	}
 

diff --git a/src/main.js b/src/main.js
@@ -1,4 +1,7 @@
+import React from "react"
+import ReactDOM from "react-dom"
 import { Editor } from "./editor/editor.js"
+import Toolbox from "./toolbox/toolbox.js"
 
 
 let gEditor = null
@@ -7,5 +10,12 @@ let gEditor = null
 document.body.onload = function()
 {
 	gEditor = new Editor(document.getElementById("canvasMain"))
+
+	gEditor.toolboxRefreshFn = () =>
+	{
+		ReactDOM.render(<Toolbox editor={ gEditor }/>, document.getElementById("divToolbox"))
+	}
+
+	gEditor.toolboxRefreshFn()
 	gEditor.draw()
 }
diff --git a/src/toolbox/toolbox.js b/src/toolbox/toolbox.js
@@ -0,0 +1,35 @@
+import React from "react"
+import { KeyChange } from "../song/song.js"
+import { Key, scales, getScaleDegreeForPitch, getNameForPitch, getColorForScaleDegree, getColorRotationForScale } from "../util/theory.js"
+import { Rational } from "../util/rational.js"
+
+
+function NoteToolbox(props)
+{
+	return <div>
+		<span>Key: { props.songKey.getName() }</span>
+		<br/>
+
+		{ [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(pitch =>
+			{
+				const degree = getScaleDegreeForPitch(props.songKey, pitch + props.songKey.tonicPitch + props.songKey.tonicAccidental)
+				const inKey = Math.floor(degree) == degree
+				const noteName = getNameForPitch(props.songKey, pitch + props.songKey.tonicPitch + props.songKey.tonicAccidental)
+				const colorRotation = getColorRotationForScale(props.songKey.scalePitches)
+				const color = getColorForScaleDegree(colorRotation + degree)
+				return <button key={pitch} style={{ position:"relative", top:(inKey ? "1em" : "0"), width:"3em", height:"4em", backgroundColor: color, border:"0", borderRadius:"0.25em", margin:"0.1em" }}>
+					<span style={{ fontWeight:"bold" }}>{ noteName }</span>					
+				</button>
+			}
+		)}
+
+	</div>
+}
+
+
+export default function Toolbox(props)
+{
+	const keyChange = props.editor.song.keyChanges.findActiveAt(props.editor.cursorTime.start) || new KeyChange(new Rational(0), new Key(0, 0, scales.major.pitches))
+
+	return <div style={{ fontFamily:"Verdana", fontSize:"18px" }}><NoteToolbox songKey={ keyChange.key }/></div>
+}
diff --git a/src/util/theory.js b/src/util/theory.js
@@ -178,6 +178,29 @@ export function getPitchForScaleDegree(key, degree)
 }
 
 
+export function getNameForPitch(key, pitch)
+{
+	const baseLabels = [0, 0, 1, 1, 2, 3, 3, 4, 4, 5, 5, 6]
+	const baseAccidentals = [0, 1, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0]
+	const letterStrs = ["C", "D", "E", "F", "G", "A", "B"]
+	const letterPitches = [0, 2, 4, 5, 7, 9, 11]
+
+	pitch = mod(pitch, 12)
+	const degree = mod(getScaleDegreeForPitch(key, pitch), 7)
+
+	const keyLetter = baseLabels[key.tonicPitch]
+	const noteLetter = mod(keyLetter + Math.floor(degree), 7)
+	const accidental = mod(pitch - letterPitches[noteLetter] + 6, 12) - 6
+
+	const accidentalStr = 
+		accidental == 0 ? "" :
+		accidental >  0 ? "♯".repeat(accidental) :
+		"♭".repeat(-accidental)
+
+	return letterStrs[noteLetter] + accidentalStr
+}
+
+
 export function getColorForScaleDegree(degree)
 {
 	switch (mod(degree, 7))

diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,31 @@
+const path = require("path")
+
+module.exports =
+{
+	mode: "production",
+	entry:
+	{
+		main: path.resolve(__dirname, "src/main.js"),
+	},
+
+	output:
+	{
+		filename: "[name].js",
+		path: path.resolve(__dirname, ".webpack")
+	},
+
+	module:
+	{
+		rules:
+		[
+			{
+				test: /\.(js|jsx)$/,
+				exclude: /node_modules/,
+				use:
+				{
+					loader: "babel-loader"
+				}
+			}
+		]
+	}
+}