vibe-editor 0.0.6 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vibe-editor",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "main": "src/scripts/js/scripts/VIBE.js",
   "keywords": [],
   "author": "Matthias Nowakowski",

package/src/scripts/js/scripts/Core.js

@@ -104,7 +104,7 @@ class Core {
                         this.undoAnnotationStacks.push([annotCanvas, annotList]);
                         annotCanvas.replaceWith(annotstate[0]);
                         annotList.replaceWith(annotstate[1]);
-                        this.keyboardHandler.resetListeners();
+                        this.globalKeyboardHandler.resetListeners();
                         this.container.dispatchEvent(new Event("annotationCanvasChanged"));
                     }
                     resolve(true);
@@ -136,7 +136,7 @@ class Core {
                         this.undoAnnotationStacks.push([annotCanvas, annotList]);
                         annotCanvas.replaceWith(annotstate[0]);
                         annotList.replaceWith(annotstate[1]);
-                        this.keyboardHandler.resetListeners();
+                        this.globalKeyboardHandler.resetListeners();
                     }
                     resolve(true);
                     return;
@@ -303,6 +303,7 @@ class Core {
                 d = new XMLSerializer().serializeToString(data);
                 u = false;
                 break;
+            case null:
             case undefined:
                 d = new mei_template_1.default().emptyMEI();
                 u = false;
@@ -472,6 +473,7 @@ class Core {
         this.labelHandler
             .setContainerId(this.containerId)
             .setCurrentMEI(this.currentMEIDoc)
+            .setm2s(this.m2s)
             .reset();
         this.insertModeHandler
             .setContainerId(this.containerId)
@@ -480,7 +482,7 @@ class Core {
             .setMusicProcessor(this.musicProcessor)
             .setDeleteHandler(this.deleteHandler)
             .setLabelHandler(this.labelHandler)
-            .activateHarmonyMode()
+            //.activateHarmonyMode()
             //.activateSelectionMode()
             .setInsertCallback(this.insert)
             .setDeleteCallback(this.delete)
@@ -634,7 +636,6 @@ class Core {
             (_a = document.getElementById(this.containerId).querySelector("#interactionOverlay #scoreRects")) === null || _a === void 0 ? void 0 : _a.remove();
             var scoreRects = document.createElementNS(constants_1.constants._SVGNS_, "svg");
             scoreRects.setAttribute("id", "scoreRects");
-            //scoreRects.setAttribute("viewBox", ["0", "0", rootWidth.toString(), rootHeigth.toString()].join(" "))
             Array.from(refSVG.attributes).forEach(a => {
                 if (!["id", "width", "height"].includes(a.name)) {
                     this.interactionOverlay.setAttribute(a.name, a.value);
@@ -644,20 +645,28 @@ class Core {
             refSVG.insertAdjacentElement("beforebegin", this.interactionOverlay);
             if (loadBBoxes) {
                 var svgBoxes = Array.from(document.getElementById(this.containerId)
-                    .querySelectorAll(".definition-scale :is(g,path)")) //".definition-scale path, .definition-scale .bounding-box"))
+                    .querySelectorAll(".definition-scale :is(g,path)"))
                     .filter(el => {
                     var condition = !["system", "measure", "layer", "ledgerLines", "flag"].some(cn => el.classList.contains(cn));
                     return condition;
                 });
                 var reorderedBoxes = new Array(); // reorder so that dependent elements are already in array
-                svgBoxes.forEach(sb => {
-                    if (sb.querySelector(":scope > use, :scope > rect, :scope > path") === null) {
-                        reorderedBoxes.push(sb);
-                    }
-                    else {
-                        reorderedBoxes.unshift(sb);
-                    }
+                var classOrder = ["harm", "slur", "tie", "tupleNum", "tupletBracket", "clef", "meterSig", "keySig", "notehead", "stem", "rest", "barLine", "staff"];
+                let filteredElements;
+                classOrder.forEach(c => {
+                    filteredElements = svgBoxes.filter(e => e.classList.contains(c));
+                    reorderedBoxes.push(...filteredElements);
                 });
+                filteredElements = svgBoxes.filter(e => e.classList.length === 0 || !classOrder.some(c => e.classList.contains(c)));
+                // {  
+                // if(e.classList.length === 0){
+                //     return e
+                //   }
+                //   if(!classOrder.some(c => e.classList.contains(c))){
+                //     return e
+                //   }
+                // })
+                reorderedBoxes.push(...filteredElements);
                 // staff always has to be on top of sibling elements, so that one can interact with score elements
                 reorderedBoxes = reorderedBoxes.reverse();
                 async function computeCoords(box, interactionOverlay) {

package/src/scripts/js/scripts/VIBE.js

@@ -182,7 +182,7 @@ class VIBE {
                 });
             }
             this.tabbar
-                .setImportCallback(this.coreInstance.loadDataHandler)
+                .setLoadDataCallback(this.coreInstance.loadDataHandler)
                 .setAlignCallback(this.coreInstance.alignFunctionHandler)
                 .setGetMEICallback(this.coreInstance.getMEI.bind(this.coreInstance));
             //block everthing when firefox is not at least version 114.0

package/src/scripts/js/scripts/gui/HarmonyLabel.js

@@ -25,7 +25,7 @@ class HarmonyLabel {
             this.isText = true;
         }
         else if (isEmpty) {
-            this.element.dispatchEvent(new Event("emptyHarmonyText"));
+            this.element.textContent = "";
         }
         else {
             this.isBassoContinuo = true;

package/src/scripts/js/scripts/gui/Tabbar.js

@@ -366,6 +366,7 @@ class Tabbar {
         }
         this.colorGroup.append(ReactWrapper.createColorPicker("colorPicker", handleColor.bind(this)));
         this.fileSelectGroup = cq.getContainer(this.containerId).querySelector("#fileSelectGroup");
+        this.fileSelectGroup.append(dc.makeNewButton("Empty Score", "emptyScoreBtn", buttonStyleDarkOutline));
         this.fileSelectGroup.append(dc.makeNewInput("importAudioFile", "file", ""));
         this.fileSelectGroup.append(dc.makeNewButton("Import Audiofile", "importAudioFileBtn", buttonStyleDarkOutline));
         this.fileSelectGroup.append(dc.makeNewInput("importXML", "file", ""));
@@ -516,10 +517,11 @@ class Tabbar {
         cq.getContainer(this.containerId).querySelector("#importXML").addEventListener("input", function (e) {
             var fr = new FileReader();
             fr.onload = function () {
-                that.importCallback("", fr.result, false, constants_1.constants._TARGETDIVID_).then(mei => {
+                that.loadDataCallback("", fr.result, false, constants_1.constants._TARGETDIVID_).then(mei => {
                     var meiXml = meioperations.mergeSectionScoreDefToLayer(mei);
-                    meiXml = meioperations.mergeArticToParent(meiXml);
-                    that.importCallback("", meiXml, false, constants_1.constants._TARGETDIVID_);
+                    meiXml = meioperations.mergeNotechildrenToAttributes(meiXml);
+                    meiXml = meioperations.adjustOrderNumbers(meiXml);
+                    that.loadDataCallback("", meiXml, false, constants_1.constants._TARGETDIVID_);
                     that.align(null, null);
                 });
             };
@@ -560,6 +562,9 @@ class Tabbar {
                 that.download(fileName, mei);
             });
         });
+        cq.getContainer(this.containerId).querySelector("#emptyScoreBtn").addEventListener("click", function () {
+            that.loadDataCallback("", null, false, constants_1.constants._TARGETDIVID_).then(() => cq.getContainer(that.containerId).querySelectorAll("#annotationCanvas > g").forEach(g => g.remove()));
+        });
     }
     /**
      * Call the alignCallback with parameters. Only when the audioBlob and audioFile are defined, an alignment can take place.
@@ -673,8 +678,8 @@ class Tabbar {
      * Callback from Core, so that imported mei or musicxml can be loaded in the editor
      * @param importCallback
      */
-    setImportCallback(importCallback) {
-        this.importCallback = importCallback;
+    setLoadDataCallback(loadDataCallback) {
+        this.loadDataCallback = loadDataCallback;
         return this;
     }
     setAlignCallback(alignCallback) {

package/src/scripts/js/scripts/handlers/AnnotationChangeHandler.js

@@ -27,6 +27,8 @@ class AnnotationChangeHandler {
         this.dragAnnotEndEvent = new Event("dragAnnotEnd");
         this.isInteracting = false;
         this.factor = 100;
+        this.positionx = 0;
+        this.positiony = 0;
     }
     setListeners() {
         //if(document.getElementById(this.containerId).querySelector(".sidebar.openSidebar") != null) return
@@ -74,7 +76,7 @@ class AnnotationChangeHandler {
                     that.interactTarget.dispatchEvent(that.annotResizedEvent);
                     that.isInteracting = false;
                 }
-            },
+            }
         })
             .draggable({
             listeners: {
@@ -86,12 +88,12 @@ class AnnotationChangeHandler {
                     that.isInteracting = false;
                 }
             },
-            modifiers: [
-                interactjs_1.default.modifiers.restrictRect({
-                    restriction: 'parent',
-                    endOnly: true
-                })
-            ]
+            // modifiers: [
+            //     interact.modifiers.restrictRect({
+            //         restriction: 'parent',
+            //         endOnly: true
+            //     })
+            // ]
         });
         this.lineListener = interactjs_1.default("#" + this.containerId + " #interactionOverlay .lineDragRect.x1")
             .draggable({

package/src/scripts/js/scripts/handlers/DeleteHandler.js

@@ -29,6 +29,8 @@ class DeleteHandler {
         this.backSpaceHandler = (function backSpaceHandler(e) {
             if (!cq.hasActiveElement(this.containerId))
                 return;
+            if (cq.getContainer(this.containerId).querySelector("[contenteditable=\"true\"]"))
+                return;
             if (e.code !== "Backspace")
                 return;
             var hasRests = false;

package/src/scripts/js/scripts/handlers/InsertModeHandler.js

@@ -63,52 +63,65 @@ class InsertModeHandler {
             .resetListeners();
         this.deleteHandler.setListeners();
         (_a = this.annotations) === null || _a === void 0 ? void 0 : _a.setm2s(this.m2s);
+        this.labelHandler.deactivateHarmonyHighlight();
         //this.annotations?.updateCanvas()
         //this.annotations?.resetTextListeners() // annotations should also be interactable when in notation mode
         //this.activateSelectionMode()
     }
     activateAnnotationMode() {
-        var _a;
+        var _a, _b;
         this.insertDeactivate();
         var that = this;
         this.keyMode = false;
         this.clickInsertMode = false;
-        var selectedButton = (_a = this.container.querySelector("#annotGroupKM button.selected")) === null || _a === void 0 ? void 0 : _a.id;
-        switch (selectedButton) {
-            case "harmonyAnnotButton":
-                this.activateHarmonyMode();
-                this.harmonyMode = true;
-                this.annotationMode = false;
-                break;
-            case "staticTextButton":
-            case "linkedAnnotButton":
-                this.container.classList.remove("harmonyMode");
-                this.annotationMode = true;
-                this.harmonyMode = false;
-                if (this.annotations == undefined) {
-                    this.annotations = new Annotations_1.default(this.containerId);
-                }
-                else {
-                    this.annotations.updateCanvas();
-                }
-                this.annotations.setAnnotationCanvas(cq.getInteractOverlay(this.containerId).querySelector("#annotationCanvas"));
-                this.annotations.updateLinkedTexts();
-                break;
+        var selectedButtonId = (_a = this.container.querySelector("#annotGroupKM button.selected")) === null || _a === void 0 ? void 0 : _a.id;
+        setAnnotationState(selectedButtonId);
+        // the annotationgroup buttons are just created, when AnnnotationTabBtn is clicked
+        (_b = Array.from(this.container.querySelectorAll("#annotGroupKM button"))) === null || _b === void 0 ? void 0 : _b.forEach(b => {
+            b.addEventListener("click", setButtonId);
+        });
+        function setButtonId(e) {
+            selectedButtonId = e.target.id;
+            setAnnotationState(selectedButtonId);
+        }
+        function setAnnotationState(selectedButtonId) {
+            switch (selectedButtonId) {
+                case "harmonyAnnotButton":
+                    that.harmonyMode = true;
+                    that.annotationMode = false;
+                    that.isGlobal = false;
+                    that.activateHarmonyMode();
+                    break;
+                case "staticTextButton":
+                case "linkedAnnotButton":
+                    that.container.classList.remove("harmonyMode");
+                    that.annotationMode = true;
+                    that.harmonyMode = false;
+                    if (that.annotations == undefined) {
+                        that.annotations = new Annotations_1.default(that.containerId);
+                    }
+                    else {
+                        that.annotations.updateCanvas();
+                    }
+                    that.annotations.setAnnotationCanvas(cq.getInteractOverlay(that.containerId).querySelector("#annotationCanvas"));
+                    that.annotations.updateLinkedTexts();
+                    break;
+            }
+            that.annotations
+                .setContainerId(that.containerId)
+                .setm2s(that.m2s)
+                .setMusicProcessor(that.musicPlayer)
+                //.setToFront()
+                .setListeners()
+                .setMenuClickHandler();
         }
-        this.annotations
-            .setContainerId(this.containerId)
-            .setm2s(this.m2s)
-            .setMusicProcessor(this.musicPlayer)
-            //.setToFront()
-            .setListeners()
-            .setMenuClickHandler();
     }
     activateHarmonyMode() {
         if (this.labelHandler == undefined) {
             this.labelHandler = new LabelHandler_1.default(this.containerId);
         }
         //Activate/ Deactivate Global functions according to selected harmonymode
-        if (this.container.querySelector("#activateHarm.selected, #harmonyAnnotButton.selected") !== null) {
+        if (!this.isGlobal) {
             this.insertDeactivate();
             this.container.classList.add("harmonyMode");
             this.isGlobal = false;

package/src/scripts/js/scripts/handlers/LabelHandler.js

@@ -183,7 +183,7 @@ class LabelHandler {
      * Open Inputbox for (first) selected Note
      */
     harmonyLabelHandler(e) {
-        var nextNote = this.vrvSVG.querySelector(".note.marked, .chord.marked");
+        var nextNote = this.vrvSVG.querySelector(".note.marked, .chord.marked, .rest.marked");
         if (nextNote === null) {
             return;
         }
@@ -328,7 +328,7 @@ class LabelHandler {
         if (refElementClass === "harm") { // change existing harm
             let harmLabel = label;
             harmLabel.modifyLabel(text);
-            //this.currentMEI.getElementById(harmLabel.getElement().id).replaceWith(harmLabel.getElement())
+            this.currentMEI.getElementById(harmLabel.getElement().id).replaceWith(harmLabel.getElement());
         }
         else if (["note", "chord"].some(cn => refElementClass === cn)) { //create new harm
             let harmLabel = this.setLabel(labelDiv.textContent, labelDiv.closest("g").getAttribute("refElementId"));
@@ -382,8 +382,8 @@ class LabelHandler {
         text.setAttribute("y", (posy).toString());
         textForeignObject.setAttribute("x", "0");
         textForeignObject.setAttribute("y", "0");
-        textForeignObject.setAttribute("height", "1000"); //(textDiv.clientHeight + 2 * rectPadding).toString())
-        textForeignObject.setAttribute("width", "1000"); //(textDiv.clientHeight + 2 * rectPadding).toString())
+        // textForeignObject.setAttribute("height", "1000") //(textDiv.clientHeight + 2 * rectPadding).toString())
+        // textForeignObject.setAttribute("width", "1000")//(textDiv.clientHeight + 2 * rectPadding).toString())
         this.labelCanvas.appendChild(textGroup);
         textGroup.appendChild(text);
         textForeignObject.appendChild(textDiv);

package/src/scripts/js/scripts/handlers/PhantomElementHandler.js

@@ -89,7 +89,13 @@ class PhantomElementHandler {
         }
         this.isTrackingMouse = true;
         var target = e.target;
-        target = target.closest("g");
+        try {
+            target = target.closest("g");
+        }
+        catch (error) {
+            console.log(e, target);
+            return;
+        }
         var options = {};
         if (target === null || target === void 0 ? void 0 : target.classList.contains("staffLine")) {
             options["staffLineId"] = target.id;

package/src/scripts/js/scripts/utils/MEIOperations.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setArticulation = exports.getTimestamp = exports.getElementTimestampById = exports.insertTempo = exports.insertMeter = exports.replaceMeterInScoreDef = exports.insertKey = exports.replaceKeyInScoreDef = exports.insertClef = exports.replaceClefinScoreDef = exports.paste = exports.createTuplet = exports.addLayerForStaff = exports.removeStaff = exports.addStaff = exports.removeMeasure = exports.addMeasure = exports.cleanUp = exports.elementIsOverfilling = exports.changeDur = exports.changeDurationsInLayer = exports.fillLayerWithRests = exports.fillWithRests = exports.disableFeatures = exports.changeMeter = exports.transposeByStep = exports.mergeArticToParent = exports.mergeSectionScoreDefToLayer = exports.adjustAccids = exports.extrapolateMeter = exports.getAbsoluteRatio = exports.connectNotes = exports.addToMEI = exports.getMeterRatioLocal = exports.removeFromMEI = void 0;
+exports.setArticulation = exports.getTimestamp = exports.getElementTimestampById = exports.insertTempo = exports.insertMeter = exports.replaceMeterInScoreDef = exports.insertKey = exports.replaceKeyInScoreDef = exports.insertClef = exports.replaceClefinScoreDef = exports.paste = exports.createTuplet = exports.addLayerForStaff = exports.removeStaff = exports.addStaff = exports.removeMeasure = exports.addMeasure = exports.adjustOrderNumbers = exports.cleanUp = exports.elementIsOverfilling = exports.changeDur = exports.changeDurationsInLayer = exports.fillLayerWithRests = exports.fillWithRests = exports.disableFeatures = exports.changeMeter = exports.transposeByStep = exports.mergeNotechildrenToAttributes = exports.mergeArticToParent = exports.mergeSectionScoreDefToLayer = exports.adjustAccids = exports.extrapolateMeter = exports.getAbsoluteRatio = exports.connectNotes = exports.addToMEI = exports.getMeterRatioLocal = exports.removeFromMEI = void 0;
 const meiConverter = require("./MEIConverter");
 const random_1 = require("./random");
 const constants_1 = require("../constants");
@@ -980,6 +980,14 @@ function mergeArticToParent(currentMEI) {
     return currentMEI;
 }
 exports.mergeArticToParent = mergeArticToParent;
+function mergeNotechildrenToAttributes(currentMEI) {
+    currentMEI.querySelectorAll("note > *").forEach(a => {
+        a.parentElement.setAttribute(a.tagName, a.getAttribute(a.tagName));
+        a.remove();
+    });
+    return currentMEI;
+}
+exports.mergeNotechildrenToAttributes = mergeNotechildrenToAttributes;
 /**
  * Transpose marked notes according to direcion (up or down)
  * @param currentMEI
@@ -1137,65 +1145,6 @@ function fillLayerWithRests(layer, currentMEI) {
     }
 }
 exports.fillLayerWithRests = fillLayerWithRests;
-/**
- * Fill Empty Space with rest
- * @deprecated
- * @param currentMEI
- */
-function _fillWithRests(currentMEI) {
-    var staffDef = currentMEI.getElementsByTagName("staffDef").item(0);
-    var meterCount;
-    var meterUnit;
-    var meterRatio;
-    if (staffDef.getAttribute(constants_1.constants._METERCOUNT_) !== null && staffDef.getAttribute(constants_1.constants._METERUNIT_) !== null) {
-        meterCount = staffDef.getAttribute(constants_1.constants._METERCOUNT_);
-        meterUnit = staffDef.getAttribute(constants_1.constants._METERUNIT_);
-        meterRatio = parseInt(meterCount) / parseInt(meterUnit);
-    }
-    else {
-        var meterRatio = getMeterRatioGlobal(currentMEI);
-        meterCount = (meterRatio * 4).toString();
-        meterUnit = "4";
-    }
-    currentMEI.querySelectorAll("measure").forEach(m => {
-        m.querySelectorAll("staff").forEach(s => {
-            s.querySelectorAll("layer").forEach((l, idx) => {
-                //mRest for empty Layer
-                if (l.childElementCount === 0) {
-                    if (idx === 0) {
-                        var restEl = document.createElementNS(constants_1.constants._MEINS_, "mRest");
-                        l.appendChild(restEl);
-                    }
-                    else { // remove 1+ empty layer
-                        l.remove();
-                    }
-                }
-                else {
-                    var actualMeterFill = getAbsoluteRatio(l);
-                    var ratioDiff = Math.abs(actualMeterFill - meterRatio);
-                    var smallestValue = gcd(ratioDiff);
-                    //var restDurs = findDotsRecursive(ratioDiff, gcd(ratioDiff))
-                    if (Number.isInteger(ratioDiff / smallestValue) && ratioDiff > 0) {
-                        var leftRatio = ratioDiff;
-                        var durArr = new Array();
-                        while (!Number.isInteger(1 / leftRatio)) {
-                            var leftRatio = ratioDiff - smallestValue;
-                            durArr.push(1 / smallestValue);
-                        }
-                        durArr.push(1 / leftRatio);
-                        durArr = durArr.reverse();
-                        durArr.forEach(dur => {
-                            var newRest = currentMEI.createElementNS(constants_1.constants._MEINS_, "rest");
-                            newRest.setAttribute("dur", dur.toString());
-                            l.appendChild(newRest);
-                        });
-                    }
-                    //console.log(document.getElementById(l.id), ratioDiff, gcd(ratioDiff), durArr)
-                }
-            });
-        });
-    });
-}
 /**
  * Replace given id with rest
  * @param element element from svg
@@ -1519,6 +1468,27 @@ function adjustRests(currentMEI) {
         }
     });
 }
+function adjustOrderNumbers(currentMEI) {
+    function setN(nodeList) {
+        var tagCounter = new Map();
+        nodeList.forEach(n => {
+            if (!tagCounter.has(n.tagName)) {
+                tagCounter.set(n.tagName, 1);
+            }
+            n.setAttribute("n", tagCounter.get(n.tagName).toString());
+            tagCounter.set(n.tagName, tagCounter.get(n.tagName) + 1);
+        });
+    }
+    setN(currentMEI.querySelectorAll("measure"));
+    currentMEI.querySelectorAll("measure").forEach(m => {
+        setN(m.querySelectorAll("staff"));
+    });
+    currentMEI.querySelectorAll("staff").forEach(s => {
+        setN(s.querySelectorAll("layer"));
+    });
+    return currentMEI;
+}
+exports.adjustOrderNumbers = adjustOrderNumbers;
 /**
  * Give harm new start id if related note was included in chord during process
  * @param currentMEI

package/src/scripts/js/scripts/utils/SVGEditor.js

@@ -427,9 +427,24 @@ class SVGEditor {
     }
     setActiveLayer() {
         var container = cq.getContainer(this.containerId);
-        if (!container.querySelector(".layer.activeLayer")) {
-            container.querySelectorAll(".layer[n='1']").forEach(l => l.classList.add("activeLayer"));
-        }
+        var staffN = "0";
+        // find out if all staves have at least one active layer
+        container.querySelectorAll(".staff").forEach(s => {
+            var n = s.getAttribute("n");
+            if (parseInt(n) > parseInt(staffN))
+                staffN = n;
+        });
+        var i = 1;
+        do {
+            let activeLayer = container.querySelector(`.staff[n='${i}'] > .layer.activeLayer`);
+            if (!activeLayer) {
+                container.querySelectorAll(`.staff[n='${i}'] > .layer[n='1']`).forEach(l => l.classList.add("activeLayer"));
+            }
+            i += 1;
+        } while (i <= parseInt(staffN));
+        // if (!container.querySelector(".layer.activeLayer")) {
+        //     container.querySelectorAll(".layer[n='1']").forEach(l => l.classList.add("activeLayer"))
+        // }
         container.querySelectorAll(".activeLayer").forEach(al => {
             var staffN = al.closest(".staff").getAttribute("n");
             var layerN = al.getAttribute("n");

package/src/styles/vibe.css

@@ -471,7 +471,7 @@ text{
 
 
 
-.annotLinkedText .annotFO{
+.annotLinkedText .annotDiv{
     /*background-color: rgba(255, 255, 153, 0.8);*/
     background-color: rgba(0, 0, 0, 0.1);
     border-radius: 0px 10px 10px 10px;
@@ -618,17 +618,20 @@ g.currentlyPlaying *{
 .labelDiv{
     border: 2px solid black;
     border-radius: 10px;
-    height: fit-content;
+    /* height: fit-content;
     width: fit-content;
-    min-width: 50px;
+    min-width: 50px; */
     background-color: beige;
-    font-size: 40px;
-    font-family: 'Times New Roman', Times, serif;
+    /* font-size: 40px;
+    font-family: 'Times New Roman', Times, serif; */
 }
 
-.labekFO{
+.labelFO{
+    font-size: 16pt;
+    font-family: 'Times New Roman', Times, serif;
+    text-align: center;
+    width: 10%;
     height: 100%;
-    width: 100%;
 }
 
 /* KEYMODE */