From 82c7c37f4f08f724690f8d1e2abdb6da3b851731 Mon Sep 17 00:00:00 2001
From: Lumi Pakkanen <lumi.pakkanen@gmail.com>
Date: Thu, 29 Feb 2024 20:11:54 +0200
Subject: [PATCH] Add MOS indicators on Circle tab of Rank 2 Temperament

ref #580
---
 package-lock.json                            | 18 +++---
 package.json                                 |  4 +-
 src/components/PeriodCircle.vue              | 62 ++++++++++++++++++++
 src/components/modals/generation/RankTwo.vue |  1 +
 4 files changed, 74 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4a9e6874..e141e27b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "dependencies": {
         "isomorphic-qwerty": "^0.0.2",
         "jszip": "^3.10.1",
-        "moment-of-symmetry": "^0.4.0",
+        "moment-of-symmetry": "^0.4.1",
         "pinia": "^2.1.7",
         "qs": "^6.11.2",
         "scale-workshop-core": "github:xenharmonic-devs/scale-workshop-core#v0.1.2",
@@ -18,7 +18,7 @@
         "vue": "^3.3.4",
         "vue-router": "^4.2.5",
         "webmidi": "^3.1.7",
-        "xen-dev-utils": "^0.2.6",
+        "xen-dev-utils": "^0.2.7",
         "xen-midi": "^0.1.2"
       },
       "devDependencies": {
@@ -4297,11 +4297,11 @@
       }
     },
     "node_modules/moment-of-symmetry": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/moment-of-symmetry/-/moment-of-symmetry-0.4.0.tgz",
-      "integrity": "sha512-ehqLpVBDN12aSisjijQzXXEAb11oySe7sD3KXvdYF5j16VZMCFG3fJQrOiao0ieA/OrHYXL2pxSK0/UTKi/IRQ==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/moment-of-symmetry/-/moment-of-symmetry-0.4.1.tgz",
+      "integrity": "sha512-uT4K/nUca6e8z/LruWbZROqi0efB+P3zZ5U4ffGWigKqkvGkUGI12pGWbssLjMobzoJHaluFgnxmD2N3fb6uGA==",
       "dependencies": {
-        "xen-dev-utils": "^0.2.6"
+        "xen-dev-utils": "^0.2.7"
       },
       "funding": {
         "type": "github",
@@ -6456,9 +6456,9 @@
       }
     },
     "node_modules/xen-dev-utils": {
-      "version": "0.2.6",
-      "resolved": "https://registry.npmjs.org/xen-dev-utils/-/xen-dev-utils-0.2.6.tgz",
-      "integrity": "sha512-CuQe4xftJateZ2H+rJ8xpd4JxnUUEVie74xtSIpilGYu3yJXeFS8MzVAiI6MCm4NFKpgrFdG8YoyQLkVzpEx8g==",
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/xen-dev-utils/-/xen-dev-utils-0.2.7.tgz",
+      "integrity": "sha512-BEnjjUNxNX0V4WUTFOcljWrLr4CjmExmLdxTLTEPLnoPiMNclwmZl3MN6AeWf6cm2CBdSeOygky4Jau0kHenaw==",
       "engines": {
         "node": ">=10.6.0"
       },
diff --git a/package.json b/package.json
index 2d395c93..60ad8f1c 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
   "dependencies": {
     "isomorphic-qwerty": "^0.0.2",
     "jszip": "^3.10.1",
-    "moment-of-symmetry": "^0.4.0",
+    "moment-of-symmetry": "^0.4.1",
     "pinia": "^2.1.7",
     "qs": "^6.11.2",
     "scale-workshop-core": "github:xenharmonic-devs/scale-workshop-core#v0.1.2",
@@ -25,7 +25,7 @@
     "vue": "^3.3.4",
     "vue-router": "^4.2.5",
     "webmidi": "^3.1.7",
-    "xen-dev-utils": "^0.2.6",
+    "xen-dev-utils": "^0.2.7",
     "xen-midi": "^0.1.2"
   },
   "devDependencies": {
diff --git a/src/components/PeriodCircle.vue b/src/components/PeriodCircle.vue
index 2a7b12c1..52bf63ef 100644
--- a/src/components/PeriodCircle.vue
+++ b/src/components/PeriodCircle.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
 import { LEFT_MOUSE_BTN } from '@/constants'
+import { generatorRanges } from 'moment-of-symmetry'
 import type { Scale } from 'scale-workshop-core'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { mmod } from 'xen-dev-utils'
 
+const TAU = 2 * Math.PI
 const CIRCLE_RADIUS = 40
+const MOS_RANGE_RADIUS = 41
 const SCALE_TICK_HEIGHT = 4
 const GENERATOR_TICK_HEIGHT = 5
 
@@ -13,10 +17,41 @@ const props = defineProps<{
   periodCents: number | null
   size: number
   up: number
+  numPeriods: number
 }>()
 
 const emit = defineEmits(['update:generatorCents'])
 
+const ranges = computed(() =>
+  generatorRanges(props.size).map((r) => ({
+    ...r,
+    lowerBound: r.lowerBound.valueOf(),
+    upperBound: r.upperBound.valueOf()
+  }))
+)
+
+const paths = computed(() => {
+  let bright = ''
+  let dark = ''
+  for (const range of ranges.value) {
+    const theta1 = TAU * range.lowerBound
+    const theta2 = TAU * range.upperBound
+    const x1 = 50 + MOS_RANGE_RADIUS * Math.sin(theta1)
+    const y1 = 50 - MOS_RANGE_RADIUS * Math.cos(theta1)
+    const x2 = 50 + MOS_RANGE_RADIUS * Math.sin(theta2)
+    const y2 = 50 - MOS_RANGE_RADIUS * Math.cos(theta2)
+    const largeArcFlag = theta2 - theta1 > Math.PI ? 1 : 0
+    const arc = `M ${x1} ${y1} A ${MOS_RANGE_RADIUS} ${MOS_RANGE_RADIUS} 0 ${largeArcFlag} 1 ${x2} ${y2}`
+    if (range.bright) {
+      bright += arc
+    } else {
+      dark += arc
+    }
+  }
+
+  return { bright, dark }
+})
+
 const periodCents = computed(() => {
   if (props.periodCents !== null) {
     return props.periodCents
@@ -27,6 +62,19 @@ const periodCents = computed(() => {
   return 1200
 })
 
+const mosLabel = computed(() => {
+  if (props.generatorCents === null) {
+    return ''
+  }
+  const g = mmod(props.generatorCents / periodCents.value, 1)
+  for (const range of ranges.value) {
+    if (g >= range.lowerBound && g <= range.upperBound) {
+      return `${range.numberOfLargeSteps * props.numPeriods}L ${range.numberOfSmallSteps * props.numPeriods}s`
+    }
+  }
+  return ''
+})
+
 const scaleTickDirections = computed(() => {
   if (props.scale === null) {
     return []
@@ -216,6 +264,13 @@ onUnmounted(() => {
     @touchmove="onTouchMove"
     ref="container"
   >
+    <path :d="paths.dark" stroke-width="0.5%" class="dark" fill="none" />
+    <path :d="paths.bright" stroke-width="0.5%" class="bright" fill="none" />
+
+    <text x="50%" y="50%" font-size="4" text-anchor="middle" dominant-baseline="middle">
+      {{ mosLabel }}
+    </text>
+
     <line
       v-for="(attrs, index) of generatorTrajectory"
       :key="index"
@@ -291,4 +346,11 @@ svg text {
 svg text.generator {
   fill: var(--color-accent-text-btn);
 }
+
+path.bright {
+  stroke: #23ff23;
+}
+path.dark {
+  stroke: #007200;
+}
 </style>
diff --git a/src/components/modals/generation/RankTwo.vue b/src/components/modals/generation/RankTwo.vue
index 813b9036..438e3792 100644
--- a/src/components/modals/generation/RankTwo.vue
+++ b/src/components/modals/generation/RankTwo.vue
@@ -312,6 +312,7 @@ function generate() {
               :periodCents="rank2.circlePeriodCents"
               :size="rank2.generatorsPerPeriod"
               :up="rank2.safeUp / rank2.safeNumPeriods"
+              :numPeriods="rank2.safeNumPeriods"
               @update:generatorCents="updateCircleGenerator"
             />
           </div>