Implemented placeable icons including text icons. Fixed #17

Author: Sparen

docs.html

@@ -37,8 +37,8 @@ <h1 style="background-color:#AAAAAA;color:white">Lines and Stations</h1>
 <li><code style="color:red">strokes</code> - Array of line stroke objects. See below for specification.</li>
 <li><code style="color:red">stationtypes</code> - Array of station type objects. See below for specification.</li>
 <li><code style="color:red">stations</code> - Array of station objects. See below for specification.</li>
-<li><code style="color:blue">canvasheight</code> - Canvas Height. Defaults to <code>2000</code> pixels.</li>
-<li><code style="color:blue">canvaswidth</code> - Canvas Width. Defaults to <code>480</code> pixels.</li>
+<li><code style="color:blue">canvasheight</code> - Canvas Height. Defaults to <code>480</code> pixels.</li>
+<li><code style="color:blue">canvaswidth</code> - Canvas Width. Defaults to <code>2000</code> pixels.</li>
 <li><code style="color:blue">lineheight</code> - Line Height. Controls how far down vertically the main line is. Defaults to <code>240</code> pixels.</li>
 <li><code style="color:blue">linestart</code> - Line Start x coordinate. Controls where the main line starts. Defaults to <code>128</code>.</li>
 <li><code style="color:blue">lineend</code> - Line End x coordinate. Controls where the main line ends and is used in determining the spacing between stations. Defaults to <code>1800</code>.</li>
@@ -48,6 +48,7 @@ <h1 style="background-color:#AAAAAA;color:white">Lines and Stations</h1>
 <li><code style="color:blue">texticonfontsize</code> - Font size to use for text icons. Defaults to <code>20</code>.</li>
 <li><code style="color:blue">maincustomsvgbg</code> - Custom SVG (renders in the background).</li>
 <li><code style="color:blue">maincustomsvgfg</code> - Custom SVG (renders in the foreground).</li>
+<li><code style="color:blue">extraicons</code> - Array of extra icons (standard + text) rendered on map. See Icons section for specification</li>
 </ul>
 
 <p>The required <code>strokes</code> field of the line object is an array of objects that has the following options.</p>
@@ -121,6 +122,14 @@ <h1 style="background-color:#AAAAAA;color:white">Icons</h1>
 <li><code style="color:red">scale</code> - Scalings of this icon. First is the large icon (Displayed to the left of the line's name, Recommended: <code>1</code>). Second is the small icon (Displayed under stations, Recommended: <code>0.67</code>)</li>
 <li><code style="color:red">iconSVG</code> - SVG of the icon. The provided SVG should fit within the stated height and width.</li>
 <li><code style="color:blue">iconlink</code> - URL that is traveled to when clicking the icon as a transfer icon.</li>
+</ul>
+
+<p>The optional <code>extraicons</code> field of the line object object is an array of objects that has the following options. This is optional and is primarily utilized for through-running connections or where multiple lines share track. For a working example, refer to Test 3 in the <a href="./test-internal/test-internal.html">Internal Test Suite</a>.</p>
+<p>As a convenience, text icons are supported by this method for the placement of arbitrary text on the map.</p>
+<ul>
+<li><code style="color:red">iconID</code> - The Icon ID of the extra icon.</li>
+<li><code style="color:red">iconx</code> - The x coordinate (in pixels) of the extra icon.</li>
+<li><code style="color:red">icony</code> - The y coordinate (in pixels) of the extra icon. Note that the line height defaults to 240, so use 240 in order to align the icon to the base line.</li>
 </ul>
     </div>
 </div>

strip-map-gen.js

@@ -55,6 +55,11 @@ function SMG_loadMap(lineobj, iconobj, targetdiv) {
         smsvg += lineobj.maincustomsvgfg;
     }
 
+    // Extra Icons
+    if ("extraicons" in lineobj) {
+        smsvg += SMG_drawExtraIcons(lineobj.extraicons, lineobj, iconobj);
+    }
+
     smsvg += '</svg>';
     document.getElementById(targetdiv).innerHTML = smsvg;
     return smsvg;
@@ -316,6 +321,50 @@ function SMG_drawStationIcons(stationIcons, lineobj, iconobj, stationxpos, icony
     return iconsvg;
 }
 
+// Helper function for SMG_loadMap that handles extra icons
+// Takes the array of extra icons, the line object, and the master icon object
+function SMG_drawExtraIcons(extraIcons, lineobj, iconobj) {
+    let iconsvg = "";
+    // For every extra icon
+    for (let j = 0; j < extraIcons.length; j += 1) {
+        let iconfound = false; // Whether or not the icon was found. If not found, defaults to printing the text.
+        // For each icon in the line, get necessary information for rendering
+        let currobj = extraIcons[j];
+        let curriconht = 0;
+        let curriconwd = 0;
+        let lineIcon = SMG_getIconByID(iconobj, currobj.iconID);
+        if (!(lineIcon === null)) {
+             iconfound = true;
+        }
+        if (iconfound) {
+            curriconht = lineIcon.height * lineIcon.scale[1];
+            curriconwd = lineIcon.width * lineIcon.scale[1];
+        }
+
+        let iconx = currobj.iconx;
+        let icony = currobj.icony;
+
+        // Don't crash
+        if (iconx === undefined) {iconx = 0; console.log("Note: X coordinate not found for icon. Defaulting to 0");}
+        if (icony === undefined) {icony = 0; console.log("Note: Y coordinate not found for icon. Defaulting to 0");}
+
+        // Icon was not found. Display text. DOES NOT SUPPORT MULTIPLE ARBITRARY TEXT FIELDS IN A ROW.
+        if (!iconfound) {
+            iconsvg += '<text x="' + iconx + '" y="' + icony + '" font-family="' + lineobj.fonttype + '" font-size="' + lineobj.texticonfontsize + 'px" fill="black" text-anchor="middle" dominant-baseline="central">' + currobj.iconID + '</text>';
+        } else {
+            let currx = (iconx - curriconwd/2); // Station position, offset left to center rect.
+            if ("iconlink" in lineIcon) {
+                iconsvg += '<a xlink:href="' + lineIcon.iconlink + '"><g>';
+            }
+            iconsvg += '<rect x="' + currx + '" y="' + (icony - curriconht/2) + '" height="' + curriconht + '" width="' + curriconwd + '" fill="url(#PATTERN_' + currobj.iconID + '_SCALE2)" />';
+            if ("iconlink" in lineIcon) {
+                iconsvg += '</g></a>';
+            }
+        }
+    }
+    return iconsvg;
+}
+
 /* ---------------- Accessory Functions ---------------- */
 
 // Returns the icon object associated with the provided ID, or null if DNE

test-internal/icon_test.js

@@ -45,7 +45,16 @@ var obj_iconTest = {
             "height": 48,
             "width": 48,
             "scale": [1.0, 0.67],
-            "iconSVG": "<circle cx='24' cy='24' r='18' stroke-width='8px' stroke='#AAFF00' fill='#FFFFFF'></circle><text x='24' y='24' font-family='Arial' font-size='18px' fill='black' font-weight='bold' text-anchor='middle' dominant-baseline='central'>16</text>"
+            "iconSVG": "<circle cx='24' cy='24' r='18' stroke-width='8px' stroke='#AAFF00' fill='#FFFFFF'></circle><text x='24' y='24' font-family='Arial' font-size='18px' fill='black' font-weight='bold' text-anchor='middle' dominant-baseline='central'>16</text>",
+            "iconlink": "./test-internal.html#line16"
+        },
+        {
+            "iconID": "ICON_LINE17",
+            "height": 48,
+            "width": 48,
+            "scale": [1.0, 0.67],
+            "iconSVG": "<circle cx='24' cy='24' r='18' stroke-width='8px' stroke='#00AAFF' fill='#FFFFFF'></circle><text x='24' y='24' font-family='Arial' font-size='18px' fill='black' font-weight='bold' text-anchor='middle' dominant-baseline='central'>17</text>",
+            "iconlink": "./test-internal.html#line17"
         }
     ]
 };

test-internal/line_test.js

@@ -511,6 +511,23 @@ var obj_lineC = {
     "iconID": ["ICON_LINE14"],
     "fonttype": "'DIN Alternate', 'Helvetica', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, 'メイリオ', 'Meiryo'",
     "maincustomsvgbg": "<text x='16' y='460' font-family='DIN Alternate' font-size='20px' fill='#AAAAAA' text-anchor='start' dominant-baseline='central'>01/2019</text>",
+    "extraicons": [
+        {
+            "iconID": "ICON_LINE17",
+            "iconx": 64,
+            "icony": 240
+        },
+        {
+            "iconID": "Through",
+            "iconx": 64,
+            "icony": 272
+        },
+        {
+            "iconID": "Service",
+            "iconx": 64,
+            "icony": 292
+        }
+    ],
     "strokes": [
         {
             "color": "#AACCFF",
@@ -523,6 +540,12 @@ var obj_lineC = {
         {
             "color": "#FFAAAA",
             "strokewidth": "8px"
+        },
+        {
+            "color": "#00AAFF",
+            "strokewidth": "8px",
+            "startpoint": -0.5,
+            "endpoint": 0
         }
     ],
     "stationtypes": [

test-internal/test-internal.html

@@ -30,6 +30,10 @@ <h1 style="background-color:#FFAAAA;color:white" id="line14">Test 3 - Line 14 (J
       <div id="targetdiv3"></div>
       <h1 style="background-color:#AA00FF;color:white" id="line15">Test 4 - Line 15 (Loops with xshift and locknumstations)</h1>
       <div id="targetdiv4"></div>
+      <h1 style="background-color:#AAFF00;color:white" id="line16">Line 16 (Icon Linking - Stations)</h1>
+      <div id="targetdiv5"></div>
+      <h1 style="background-color:#00AAFF;color:white" id="line17">Line 17 (Icon Linking - Extra Icons)</h1>
+      <div id="targetdiv6"></div>
 </div>
 
     <script type="text/javascript" src="../docs.js"></script>