spatialillusions / milsymbol

Military Symbols in JavaScript
www.spatialillusions.com/milsymbol
MIT License
556 stars 136 forks source link

Cannot addIconParts #249

Closed nicolasgeneva closed 1 year ago

nicolasgeneva commented 4 years ago

I am tying to add an horizontal "supply" line to an existing symbol.

var symbol = new ms.Symbol(
          "SFG*UCIZ--*****",
          {
            size: 35,
            monoColor: 'blue',
          },
          { fill: false }
        );

        symbol.addIconParts(function(
          iconParts,
          metadata,
          colors,
          std2525,
          monoColor,
          alternateMedal
        ) {
          /*
            iconParts: Object - The existing object of icon parts
            metadata: Object - propterties object
            colors: Object - color object
            std2525: Boolean - Is it 2525 then true, otherwise false
            alternateMedal: Boolean - true/false for sea mine stuff
            */

          // Adding a custom part for tactical graphics
          iconParts["LOG"] = {
            type: "path",
            fill: false,
            d: "M 25,120 l150,0"
          };

          /*
            Since we are modifying directly to the existing object of icon parts,
            we don't have to return anything.
            */
        });

        document.write(
          symbol.asSVG()
        );

But I get an error !

MattShawPhoto commented 3 years ago

Hi,

Assuming you want do something from this table in APP-6/MIL-STD-2525

APP-6 Ref

You can use use ms.addSymbolPart() in the following way which will yield the following:

Result
  var supplyLine = function (symbol, size) {
        // calc start and finish postn for line
        var x1 = (size/2)
        var x2 = symbol.metadata.baseGeometry.bbox.width() + (size)
        var supplyLine = [{
            // use a translation to positn within the frae
            type: "translate",
            x: symbol.metadata.baseGeometry.bbox.x1,
            y: 15,
            // the actual draw instructions
            draw: [{
                type: "path",
                stroke: "#000",
                d: "M -" + x1 + ",120 l" + x2 + ",0"
            }]
        }]
        return supplyLine;
    }

    /**
     * Symbol parts are added to the global ms namespace
     * This makes the new part optionally available to 
     * all symbols
     */
    ms.addSymbolPart(function () {
        var drawArray1 = []; // array for parts that will be added before the exisitng symbol
        var drawArray2 = []; // array for parts that will be added after the exisitng symbol
        var _DEFAULT_SIZE_ = 50;

        if (this.options.isSupply !== undefined) {
            var size;
            size = (this.options.supplyLineSize !== undefined) ? size = this.options.supplyLineSize : size = _DEFAULT_SIZE_
            drawArray2.push(supplyLine(this, size));
        }

        // Add addtional parts here

        return {
            pre: drawArray1,
            post: drawArray2,
        };
    });

    function init() {
        var sidc1 = "sfgaewrh--mt";
        var sidc2 = "SFG*UCIZ--*****";
        var symb = new ms.Symbol(sidc2, {
            // quantity: 200,
            staffComments: "Staff Comments".toUpperCase(),
            additionalInformation: "Additional Information".toUpperCase(),
            type: "ABCDEF".toUpperCase(),
            dtg: "30140000ZSEP97",
            location: "0900000.0E570306.0N",
            size: 35,
            isSupply: true,
            supplyLineSize:150
        });
spatialillusions commented 1 year ago

@MattShawPhoto solution should solve this problem, or simply use the mil-std-2525D code for that icon.