browser.js

var Design = require('./lib/design')
var Vec2 = require('./lib/geom/vec2')
var Rect = require('./lib/geom/rect')
var sbolv = require('./font/sbolv/main')
var sbolvImprovedDirectionality = require('./font/sbolv-improved-directionality/main')

var SBOLDocument = require('sboljs')
var soToGlyphType = require('./lib/soToGlyphType')

var pigeon = require('./lib/pigeon-parser')
var genbank = require('./lib/genbank')

var getDisplayList = require('./lib/getDisplayList').getDisplayList
var getInteractionList = require('./lib/getInteractionList')


var design = new Design({
    element: document.getElementById('design'),
    font: sbolvImprovedDirectionality
});

var currentDisplayList = [];

function refreshEditorSize(editor) {
    editor.editor.setOptions({
        maxLines: 50
    });
}

function Editor(element, sourceFile, mode, parser, active) {
    var editorElement = element.children('.editor');

    this.element = editorElement
    this.editor = ace.edit(editorElement[0]);

    this.editor.setTheme("ace/theme/solarized_light");
    this.editor.getSession().setMode(mode);
    this.editor.$blockScrolling = Infinity;

    this.parser = parser;

    element.data('visbol-editor', this);

    var self = this;

    $.get(sourceFile, function(content) {

        self.setValue(content);

    }, 'text');

    self.editor.on('change', function() {

        self.updateDesign();
    });

    this.setActive(active || false);
}

function updateDesign(displayList) {

    if(displayList instanceof Error) {
        $('#designLoading,#design').hide();
        $('#designError').text(displayList.toString()).show();

        return;
    }

    currentDisplayList = displayList;

    $('#designLoading,#designError').hide();
    $('#design').show();

    $('#scale').prop('disabled', $('#proportional').is(':disabled'));

    if(!displayListEditor.active) {
        displayListEditor.setValue(JSON.stringify(displayList, null, 2));
    }

    var fontName = $('#font').val()

    design.setFont(({
        'sbolv': sbolv,
        'sbolv-improved-directionality': sbolvImprovedDirectionality
    })[fontName])

    design.setProportional($('#proportional').is(':checked'));
    design.setScale($('#scale').val() / 100.0);
    design.setDisplayList(displayList);

    design.displayList.components.forEach(function(component) {

        component.segments.forEach(function(segment) {

            segment.sequence.forEach(function(glyph) {

                if(glyph.svg !== undefined) {

                    var $node = $(glyph.svg.node);

                    var title = ({
						'aptamer': 'Aptamer',
						'assembly-scar': 'Assembly Scar',
						'biopolymer-junction': 'Biopolymer Junction',
						'biopolymer-base': 'Biopolymer Base',
						'biopolymer-amino-acid': 'Biopolymer Amino Acid',
						'blunt-restriction-site': 'Blunt Restriction Site',
                                                'primer-binding-site': 'Primer Binding Site',
                                                'overhang-site-5': '5\' Overhang Site',
                                                'overhang-site-3': '3\' Overhang Site',
                                                'sticky-restriction-site-5': '5\' Sticky Restriction Site',
                                                'cds': 'Coding Site',
						'engineered-region': 'Engineered Region',
                                                'signature': 'Signature',
						'insulator': 'Insulator',
						'mature-transcript-region': 'Mature Transcript Region',
                                                'origin-of-replication': 'Origin of Replication',
                                                'origin-of-transfer': 'Origin of Transfer',
                                                'operator': 'Operator',
                                                'poly-a': 'PolyA',
                                                'promoter': 'Promoter',
						'protease-site': 'Protease Site',
						'protein-stability': 'Protein Stability Element',
                                                 'res': 'Ribosome Entry Site',
                                                 'restriction-site': 'Restriction Site',
						'ribonuclease-site': 'Ribonuclease Site',
						'rna-stability': 'RNA Stability Element',
                                                'stem-loop': 'Stem Loop',
                                                 'scar': 'Scar',
						'terminator': 'Terminator',
						'unspecified': 'Unspecifed',
                                                'non-coding-rna-gene': 'Non Coding RNA Gene',
                                                'no-glyph-assigned': 'No Glyph Assigned'
                    })[glyph.type];

                    if(glyph.start !== glyph.end) {
                        title += '\n';
                        title += glyph.start + ' -> ' + glyph.end;
                    }

                    $node.tooltip({
                        container: 'body',
                        placement: 'bottom',
                        title: title,
                        animation: false
                    });
                }
            });

        });


    });
}

$('#font,#proportional,#scale').change(function() {
    updateDesign(currentDisplayList);
});

Editor.prototype = {
    setActive: function(active) {

        this.active = active;

        if(active) {

            refreshEditorSize(this);
            this.updateDesign();

        }
    },

    setValue: function(value) {
        this.editor.setValue(value, -1);
    },

    getValue: function() {
        return this.editor.getValue();
    },

    updateDesign: function() {
        if(this.active)
            this.parser.call(this, this.getValue(), updateDesign);
    }
};

var displayListEditor = new Editor($('#sourceSBDL'), 'sample.json', 'ace/mode/json', function(source, callback) {

    console.log('parsing display list length ' + source.length)

    try {

        var displayList = JSON.parse(source);

        callback(displayList);

        console.log('done')

    } catch(e) {

        console.log('error parsing display list json')
        console.log(e)

        callback({})

    }
});

var editors = [

    displayListEditor,

    new Editor($('#sourceSBOL'), 'sbol2.xml', 'ace/mode/xml', function(source, callback) {

        $('#design').hide();
        $('#designLoading').show();

        SBOLDocument.loadRDF(source, function(err, sbol) {

            if(err) {
                callback({})
                return
            }

            var component = {
                segments: []
            }

            var interactions = [];

            sbol.componentDefinitions.forEach(function(componentDefinition) {

                component.segments = component.segments.concat(getDisplayList(componentDefinition).components[0].segments[0])
            })

           //processing module definition
           sbol.moduleDefinitions.forEach(function(moduleDefinition) {

               console.log(moduleDefinition)
               currentInteractions = getInteractionList(moduleDefinition);
               for (let i in currentInteractions) {

                  interactions.push(currentInteractions[i]);

               }

           })

            callback({
                version: 1,
                components: [
                    component
                ],
               interactions: interactions

            })
        })
    }, true),

    new Editor($('#sourceGenbank'), 'sample.gbf', 'ace/mode/text', function(source, callback) {

        var gbf = genbank.parseGBF(source);

        callback(genbank.gbfToDisplayList(gbf));
    }),

    new Editor($('#sourcePigeon'), 'sample.pigeon', 'ace/mode/text', function(source, callback) {

        var displayList = pigeon.parsePigeon(source);

        callback(displayList);

    })
];

$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {

    var tab = $(e.target).attr("href");

    var editor = $(tab).data('visbol-editor');

    editors.forEach(function(ed) {

        ed.setActive(ed === editor);

    });
});


function createSVGDocument() {

    /* This grabs the parent node of the SVG element in Chrome, but in Safari it grabs
     * the SVG element instead (whereas innerHTML on the SVG element does not work
     * in Safari.)
     */
    var svgElementHtml = document.getElementById('design').parentNode.innerHTML;

    /* Therefore, we might have the parent element or we might have the SVG element itself.
     * This quick hack strips out the opening and closing tags if present.
     */
    if(svgElementHtml.indexOf('<svg') !== -1) {

        var tagClose = svgElementHtml.indexOf('>');

        svgElementHtml = svgElementHtml.slice(tagClose + 1).split('</svg>').join('');
    }

    /* Now wrap the extracted SVG into something that resembles a respectable SVG document.
     */
    return [
        '<?xml version="1.0" encoding="iso-8859-1"?>',
        '<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">',
        '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"',
             'width="' + design.getSize().x + 'px" height="' + design.getSize().y + 'px" ' +
                'viewBox="0 0 ' + design.getSize().x + ' ' + design.getSize().y + '" xml:space="preserve">',

        '<title>' + (design.getName() || 'Untitled VisBOL Design') + '</title>',
        '<desc>Generated by the VisBOL design visualizer at http://visbol.org</desc>',

         svgElementHtml,

        '</svg>'

    ].join('\n');
}


$('#downloadSVG').click(function() {

    open("data:image/svg+xml," + encodeURIComponent(createSVGDocument()));

});

$('#downloadPNG').click(function() {

    var canvas = document.createElement('canvas');

    canvas.width = design.size.x;
    canvas.height = design.size.y;

    var context = canvas.getContext('2d');

    context.rect(0, 0, canvas.width, canvas.height);
    context.fillStyle = 'white';
    context.fill();

    var image = new Image();

    image.onload = function() {
        context.drawImage(image, 0, 0);
        open(canvas.toDataURL("image/png"));
    }

    image.src = 'data:image/svg+xml,' + encodeURIComponent(createSVGDocument());
    image.width = design.size.x;
    image.height = design.size.y;

});

$('#downloadSBDL').click(function() {

    console.log(JSON.stringify(currentDisplayList, null, 2))

    open("data:application/json," + encodeURIComponent(JSON.stringify(currentDisplayList, null, 2)))

})

var splitter = $("#split").splitter({
    splitVertical: true,
    outline: true,
    resizeTo: window
});