Fixes #3681 Note Value Icons now display for Apple Devices (#4127)

* Function to check if browser is on Mac/iPad

* Generates custom block for embedding SVG

* Fixes the font icons for Apple devices

Author: jivansh77

js/blocks/RhythmBlockPaletteBlocks.js

@@ -277,7 +277,15 @@ function setupRhythmBlockPaletteBlocks(activity) {
          * Constructs a SixtyFourthNoteBlock.
          */
         constructor() {
-            super("sixtyfourthNote", _("1/64 note") + " 𝅘𝅥𝅱");
+            if (isAppleBrowser()) {
+                super("sixtyfourthNote", _("1/64 note"));
+                // Custom generator only needed for Apple devices
+                this.appleNoteBlock();
+            } else {
+                // TRANS: Do not modify the following line
+                super("sixtyfourthNote", _("1/64 note") + " 𝅘𝅥𝅱");
+            }
+
             this.setPalette(rhythmBlockPalette, activity);
             this.setHelpString();
             this.makeMacro((x, y) => [
@@ -300,8 +308,14 @@ function setupRhythmBlockPaletteBlocks(activity) {
          * Constructs a ThirtySecondNoteBlock instance.
          */
         constructor() {
-            // TRANS: Do not modify the following line
-            super("thirtysecondNote", _("1/32 note") + " 𝅘𝅥𝅰");
+            if (isAppleBrowser()) {
+                super("thirtysecondNote", _("1/32 note"));
+                // Custom generator only needed for Apple devices
+                this.appleNoteBlock();
+            } else {
+                // TRANS: Do not modify the following line
+                super("thirtysecondNote", _("1/32 note") + " 𝅘𝅥𝅰");
+            }
 
             // Set the palette and activity for the block
             this.setPalette(rhythmBlockPalette, activity);
@@ -328,8 +342,14 @@ function setupRhythmBlockPaletteBlocks(activity) {
          * Constructs a SixteenthNoteBlock instance.
          */
         constructor() {
-            // TRANS: Do not modify the following line
-            super("sixteenthNote", _("1/16 note") + " 𝅘𝅥𝅯");
+            if (isAppleBrowser()) {
+                super("sixteenthNote", _("1/16 note"));
+                // Custom generator only needed for Apple devices
+                this.appleNoteBlock();
+            } else {
+                // TRANS: Do not modify the following line
+                super("sixteenthNote", _("1/16 note") + " 𝅘𝅥𝅯");
+            }
 
             // Set the palette and activity for the block
             this.setPalette(rhythmBlockPalette, activity);
@@ -412,8 +432,14 @@ function setupRhythmBlockPaletteBlocks(activity) {
          * Constructs a HalfNoteBlock instance.
          */
         constructor() {
-            // TRANS: Do not modify the following line
-            super("halfNote", _("half note") + " 𝅗𝅥");
+            if (isAppleBrowser()) {
+                super("halfNote", _("half note"));
+                // Custom generator only needed for Apple devices
+                this.appleNoteBlock();
+            } else {
+                // TRANS: Do not modify the following line
+                super("halfNote", _("half note") + " 𝅗𝅥");
+            }
 
             // Set the palette and activity for the block
             this.setPalette(rhythmBlockPalette, activity);
@@ -440,8 +466,14 @@ function setupRhythmBlockPaletteBlocks(activity) {
          * Constructs a WholeNoteBlock instance.
          */
         constructor() {
-            // TRANS: Do not modify the following line
-            super("wholeNote", _("whole note") + " 𝅝");
+            if (isAppleBrowser()) {
+                super("wholeNote", _("whole note"));
+                // Custom generator only needed for Apple devices
+                this.appleNoteBlock();
+            } else {
+                // TRANS: Do not modify the following line
+                super("wholeNote", _("whole note") + " 𝅝");
+            }
 
             // Set the palette and activity for the block
             this.setPalette(rhythmBlockPalette, activity);
@@ -996,3 +1028,13 @@ function setupRhythmBlockPaletteBlocks(activity) {
     new TripletBlock().setup(activity);
     new STupletBlock().setup(activity);
 }
+
+// Function to check if the browser is Safari or Chrome on a Mac or iPad
+function isAppleBrowser() {
+    const userAgent = navigator.userAgent;
+    const isMac = userAgent.includes('Macintosh');
+    const isIPad = userAgent.includes('iPad') || (userAgent.includes('Macintosh') && 'ontouchend' in document); // Detects iPad in desktop mode
+    const isSafari = userAgent.includes('Safari') && !userAgent.includes('Chrome');
+    const isChrome = userAgent.includes('Chrome');
+    return (isMac || isIPad) && (isSafari || isChrome);
+}

js/protoblocks.js

@@ -2050,6 +2050,88 @@ class BaseBlock extends ProtoBlock {
         this.beginnerModeBlock = value;
     }
 
+    /**
+     * Used for blocks that need custom SVG note symbols (Apple Devices only).
+     */
+    appleNoteBlock() {
+        this.style = "basic";
+        this.size = 1;
+        this.args = 0;
+        this.dockTypes.push("out");
+        this.dockTypes.push("in");
+        this.generator = this.appleNoteBlockGenerator;
+    }
+
+    /**
+     * Generates SVG for a note block with custom musical notation.
+     * @returns {array} - Array containing SVG elements and dimensions.
+     */
+    appleNoteBlockGenerator() {
+        const svg = new SVG();
+        svg.setScale(this.scale);
+        svg.setTab(true);
+        svg.setSlot(true);
+        svg.setExpand(30 + this.extraWidth, 0, 0, 0);
+
+        if (this.fontsize) {
+            svg.setFontSize(this.fontsize);
+        }
+
+        // Get the basic block shape
+        const block = svg.basicBlock();
+        
+        // Add the note symbol as SVG based on the block name
+        let noteSymbol;
+        switch(this.name) {
+            case "wholeNote":
+                noteSymbol = `<g transform="translate(-312.0000,-493.37592) scale(1.1)">
+                    <g transform="translate(7.9606,5.6125499)" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">
+                        <path d="m 369.80263,457.99537 q 1.104,0 1.872,0.432 0.768,0.416 0.768,1.2 0,0.752 -0.752,1.168 -0.752,0.4 -1.808,0.4 -1.104,0 -1.856,-0.416 -0.752,-0.416 -0.752,-1.232 0,-0.576 0.464,-0.944 0.48,-0.368 1.008,-0.48 0.528,-0.128 1.056,-0.128 z m -0.864,1.136 q 0,0.672 0.304,1.184 0.304,0.512 0.784,0.512 0.736,0 0.736,-0.8 0,-0.64 -0.304,-1.136 -0.288,-0.512 -0.8,-0.512 -0.72,0 -0.72,0.752 z" />
+                    </g>
+                </g>`;
+                break;
+            case "halfNote":
+                noteSymbol = `<g transform="translate(-290.23523,-445.37592)">
+                    <g style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">
+                        <path d="m 375.23523,465.70392 q 0,-0.832 0.816,-1.472 0.816,-0.656 1.728,-0.656 0.528,0 0.944,0.272 l 0,-9.472 0.352,0 0,10.352 q 0,0.896 -0.784,1.488 -0.784,0.592 -1.728,0.592 -0.528,0 -0.928,-0.304 -0.4,-0.32 -0.4,-0.8 z m 0.736,0.48 q 0.848,0 1.712,-0.72 0.88,-0.72 0.88,-1.072 0,-0.224 -0.192,-0.224 -0.592,0 -1.632,0.688 -1.024,0.672 -1.024,1.12 0,0.208 0.256,0.208 z" />
+                    </g>
+                </g>`;
+                break;
+            case "sixteenthNote":
+                noteSymbol = `<g transform="translate(-92.21292,-422.51877)">
+                    <g style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">
+                        <path d="m 182.21292,442.84677 q 0,-0.832 0.816,-1.472 0.816,-0.656 1.728,-0.656 0.528,0 0.944,0.272 l 0,-9.472 0.336,0 q 0.064,0.56 0.4,1.088 0.352,0.512 0.8,0.944 0.448,0.416 0.88,0.864 0.448,0.432 0.752,1.024 0.304,0.576 0.304,1.232 0,0.544 -0.256,1.104 0.304,0.448 0.304,1.184 0,1.232 -0.608,2.24 l -0.384,0 q 0.56,-1.12 0.56,-2.032 0,-0.512 -0.256,-0.96 -0.24,-0.448 -0.752,-0.816 -0.496,-0.368 -0.832,-0.56 -0.32,-0.192 -0.896,-0.48 l 0,5.52 q 0,0.896 -0.784,1.488 -0.784,0.592 -1.728,0.592 -0.528,0 -0.928,-0.304 -0.4,-0.32 -0.4,-0.8 z m 6.464,-5.904 q 0,-1.648 -2.624,-3.072 0,0.464 0.192,0.88 0.192,0.416 0.512,0.752 0.32,0.32 0.656,0.592 0.336,0.272 0.688,0.608 0.352,0.32 0.544,0.608 0.032,-0.256 0.032,-0.368 z" />
+                    </g>
+                </g>`;
+                break;
+            case "thirtysecondNote":
+                noteSymbol = `<g transform="translate(-540.78433,-233.88335)">
+                    <g style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">
+                        <path d="m 630.78433,254.27535 q 0,-0.832 0.816,-1.472 0.816,-0.656 1.728,-0.656 0.528,0 0.944,0.272 l 0,-11.536 0.352,0 q 0.048,0.56 0.384,1.072 0.336,0.496 0.768,0.912 0.432,0.4 0.864,0.848 0.432,0.448 0.72,1.104 0.304,0.656 0.304,1.456 0,0.48 -0.16,1.056 0.224,0.416 0.224,0.912 0,0.512 -0.24,0.976 0.304,0.448 0.304,1.168 0,1.232 -0.608,2.24 l -0.384,0 q 0.56,-1.12 0.56,-2.032 0,-0.512 -0.256,-0.96 -0.24,-0.448 -0.752,-0.816 -0.496,-0.368 -0.832,-0.56 -0.32,-0.192 -0.896,-0.48 l 0,5.52 q 0,0.896 -0.784,1.488 -0.784,0.592 -1.728,0.592 -0.528,0 -0.928,-0.304 -0.4,-0.32 -0.4,-0.8 z m 6.448,-7.872 q 0,-0.496 -0.208,-0.928 -0.192,-0.432 -0.64,-0.832 -0.432,-0.416 -0.784,-0.672 -0.352,-0.256 -0.976,-0.656 0.032,0.448 0.352,0.896 0.32,0.432 0.704,0.752 0.4,0.32 0.848,0.8 0.464,0.464 0.704,0.912 l 0,-0.272 z m 0,2.096 q 0,-0.4 -0.16,-0.768 -0.144,-0.368 -0.32,-0.608 -0.16,-0.256 -0.592,-0.608 -0.416,-0.352 -0.672,-0.528 -0.256,-0.176 -0.848,-0.576 0.064,0.48 0.4,0.976 0.336,0.48 0.72,0.816 0.4,0.336 0.832,0.784 0.448,0.432 0.64,0.784 l 0,-0.272 z" />
+                    </g>
+                </g>`;
+                break;
+            case "sixtyfourthNote":
+                noteSymbol = `<g transform="translate(-255.3223,-318.39492)">
+                    <g transform="translate(3.1093785,1.6864426)" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">
+                        <path d="m 342.21292,337.13248 q 0,-0.832 0.816,-1.472 0.816,-0.656 1.728,-0.656 0.528,0 0.944,0.272 l 0,-11.568 0.336,0 q 0.064,0.64 0.384,1.104 0.336,0.464 0.752,0.768 0.416,0.304 0.832,0.656 0.416,0.336 0.688,0.928 0.288,0.592 0.288,1.44 0,0.24 -0.144,0.768 0.256,0.608 0.256,1.376 0,0.32 -0.16,0.896 0.224,0.416 0.224,0.912 0,0.496 -0.24,0.96 0.304,0.448 0.304,1.024 0,0.384 -0.08,0.688 -0.08,0.304 -0.16,0.448 -0.08,0.144 -0.368,0.608 l -0.384,0 q 0.08,-0.16 0.192,-0.368 0.112,-0.224 0.16,-0.32 0.064,-0.096 0.112,-0.24 0.064,-0.144 0.08,-0.288 0.016,-0.144 0.016,-0.32 0,-0.272 -0.096,-0.512 -0.08,-0.256 -0.176,-0.432 -0.096,-0.192 -0.32,-0.4 -0.224,-0.208 -0.368,-0.32 -0.144,-0.128 -0.464,-0.304 -0.304,-0.192 -0.432,-0.256 -0.128,-0.064 -0.48,-0.224 -0.336,-0.176 -0.4,-0.208 l 0,4.064 q 0,0.896 -0.784,1.488 -0.784,0.592 -1.728,0.592 -0.528,0 -0.928,-0.304 -0.4,-0.32 -0.4,-0.8 z m 6.352,-8.384 q 0,-0.352 -0.144,-0.688 -0.128,-0.352 -0.288,-0.576 -0.16,-0.224 -0.48,-0.496 -0.32,-0.272 -0.512,-0.4 -0.192,-0.144 -0.592,-0.384 -0.384,-0.24 -0.496,-0.32 0.032,0.432 0.352,0.832 0.32,0.384 0.704,0.656 0.4,0.272 0.816,0.72 0.432,0.432 0.624,0.912 0.016,-0.176 0.016,-0.256 z m 0.016,2.128 q 0,-0.208 -0.048,-0.4 -0.032,-0.192 -0.08,-0.336 -0.048,-0.16 -0.176,-0.336 -0.128,-0.176 -0.208,-0.288 -0.08,-0.112 -0.272,-0.272 -0.192,-0.176 -0.288,-0.256 -0.096,-0.08 -0.352,-0.256 -0.24,-0.176 -0.336,-0.224 -0.096,-0.064 -0.384,-0.24 -0.288,-0.192 -0.384,-0.256 0.032,0.464 0.368,0.88 0.336,0.416 0.736,0.704 0.4,0.272 0.816,0.688 0.416,0.416 0.576,0.864 0.032,-0.192 0.032,-0.272 z m -0.016,1.936 q 0,-0.848 -0.624,-1.504 -0.608,-0.672 -1.872,-1.392 0.064,0.464 0.384,0.896 0.336,0.416 0.72,0.688 0.4,0.272 0.8,0.704 0.4,0.416 0.576,0.88 0.016,-0.064 0.016,-0.272 z" />
+                    </g>
+                </g>`;
+                break;
+        }
+
+        // Insert the note symbol after the text
+        const blockWithNote = block.replace('</svg>', `${noteSymbol}</svg>`);
+
+        return [
+            blockWithNote,
+            svg.docks,
+            svg.getWidth(),
+            svg.getHeight(),
+            svg.getHeight()
+        ];
+    }
+
     /**
      * Performs setup for the block within the provided activity.
      * @param {object} activity - The activity context to set up the block in.