Skip to content

can't have more than 2 sequence diagrams in each page #1

New issue
New issue
Closed
Closed
can't have more than 2 sequence diagrams in each page#1
Labels
T: bugBug.

Description

@arthurtofani
arthurtofani
opened on Mar 4, 2015

It's not possible to add more than 2 sequence diagrams in each page. After that, all code blocks are rendered as simple code blocks. I have also tried with flow charts and the behavior is the same...

That's my test.

Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow

Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow

Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow

Activity

  1. facelessuser commented on Mar 4, 2015

    @facelessuser
    facelessuser
    on Mar 4, 2015
    Owner

    Yeah, my Javascript skills are pretty week as I am not a web developer. I am sure JS code is bombing. I just haven't tested more than two until now. Extensions are still in a beta state as a couple of things like this turn up now and then. Thanks for the report. I'll figure it out and let you know.

  2. arthurtofani commented on Mar 4, 2015

    @arthurtofani
    arthurtofani
    on Mar 4, 2015
    Author

    I think these extensions are great, thank you for that! I got a fork and I wished to try to solve this by myself but I didn't understand how to set an environment up to edit it. If you could send me some clues, maybe I could do it here and send a pull request... (is that a matter of JS code? I thought it was a python issue...)

  3. facelessuser commented on Mar 4, 2015

    @facelessuser
    facelessuser
    on Mar 4, 2015
    Owner

    Nah, it's without a doubt JS. My Python-fu is much greater than my JS-fu. I assume you are using the JS that I provided. I guess that is the next question, how are you loading things up?

    On my end, everything is actually classed up just fine in HTML. Python code actually just has an exception for flow and sequence language, and adds a class to the pre block and skips code highlighting. Pretty straight forward. And if you look at the HTML, you will see it's all there. The grunt work is actually done by flowchart.js or sequence-diagram.js, and I just provide a JS wrapper around that to automate the converting of pre blocks with the class uml-flowchart (albeit a crappy wrapper).

    Basically, I was supposed to be looping through the pre objects that were classed up as uml-flowchart. I extract the text from the code block, render the flowchart with flowchart.js or the sequence-diagrams.js. Insert the svg image before the pre and remove the pre. But the browsers, they say NO.

    Something changes after the first two blocks are processed, because the parentNodes of anything after the first two suddenly become null. If your JS-fu is greater, take a swing. It will probably take me a bit to re-think and re-factor this. I know it's something silly in my assumptions of the DOM or something. Logic wise, I don't see the problem, but my lack of understanding of how the DOM responds is my weakness.

    (function (win, doc) {
  win.convertUML = function(className, converter, settings) {
    var charts = doc.querySelectorAll("pre." + className),
        arr = [],
        i, maxItem, diagaram, text, curNode;

    // Is there a settings object?
    if (settings === void 0) {
        settings = {};
    }

    // Make sure we are dealing with an array
    for(i = 0, maxItem = charts.length; i < maxItem; i++) arr.push(charts[i])

    // Find the UML source element and get the text
    for (i = 0, maxItem = arr.length; i < maxItem; i++) {
        childEl = arr[i].firstChild;
        parentEl = childEl.parentNode;
        text = "";
        for (var i = 0; i < childEl.childNodes.length; i++) {
            curNode = childEl.childNodes[i];
            whitespace = /^\s*$/;
            if (curNode.nodeName === "#text" && !(whitespace.test(curNode.nodeValue))) {
                text = curNode.nodeValue;
                break;
            }
        }

        // Do UML conversion and replace source
        el = doc.createElement('div');
        el.className = className;
        parentEl.parentNode.insertBefore(el, parentEl);
        parentEl.parentNode.removeChild(parentEl);
        diagram = converter.parse(text);
        diagram.drawSVG(el, settings);
    }
  }
})(window, document)

  4. facelessuser commented on Mar 4, 2015

    @facelessuser
    facelessuser
    on Mar 4, 2015
    Owner

    Hah, I'm an idiot. Man those is and js look the same sometimes 😄.

    This worked for me. Notice above I am reusing i in all of them. There was nothing wrong with the flow, but I was screwing up my indexing.

    (function (win, doc) {
  win.convertUML = function(className, converter, settings) {
    var charts = doc.querySelectorAll("pre." + className),
        arr = [],
        i, j, maxItem, diagaram, text, curNode;

    // Is there a settings object?
    if (settings === void 0) {
        settings = {};
    }

    // Make sure we are dealing with an array
    for(i = 0, maxItem = charts.length; i < maxItem; i++) arr.push(charts[i])

    // Find the UML source element and get the text
    for (i = 0, maxItem = arr.length; i < maxItem; i++) {
        childEl = arr[i].firstChild;
        parentEl = childEl.parentNode;
        text = "";
        for (j = 0; j < childEl.childNodes.length; j++) {
            curNode = childEl.childNodes[j];
            whitespace = /^\s*$/;
            if (curNode.nodeName === "#text" && !(whitespace.test(curNode.nodeValue))) {
                text = curNode.nodeValue;
                break;
            }
        }

        // Do UML conversion and replace source
        el = doc.createElement('div');
        el.className = className;
        parentEl.parentNode.insertBefore(el, parentEl);
        parentEl.parentNode.removeChild(parentEl);
        diagram = converter.parse(text);
        diagram.drawSVG(el, settings);
    }
  }
})(window, document)

  5. facelessuser commented on Mar 4, 2015

    @facelessuser
    facelessuser
    on Mar 4, 2015
    Owner

    If your issue was the same as mine, I will commit this and hopefully your issue will be fixed.

  6. arthurtofani commented on Mar 4, 2015

    @arthurtofani
    arthurtofani
    on Mar 4, 2015
    Author

    I tried it here and it worked for me too. Thanks!
    Do you know how to update this on Sublime Markdown Preview package?

  7. arthurtofani
    closed this as completedon Mar 4, 2015

  8. facelessuser commented on Mar 4, 2015

    @facelessuser
    facelessuser
    on Mar 4, 2015
    Owner

    Yeah, I'll do it. I have a push I havn't committed yet. I'll add it to that.

  9. arthurtofani commented on Mar 4, 2015

    @arthurtofani
    arthurtofani
    on Mar 4, 2015
    Author

    👍 👍 👍 👍

  10. facelessuser
    added
    T: bugBug.
    Severity - Minor
    on Mar 4, 2015

  11. facelessuser commented on Mar 4, 2015

    @facelessuser
    facelessuser
    on Mar 4, 2015
    Owner

    Reopenning until I actually push the fix.

  12. facelessuser
    reopened this on Mar 4, 2015

  13. facelessuser commented on Mar 4, 2015

    @facelessuser
    facelessuser
    on Mar 4, 2015
    Owner

    The extension itself doesn't provide the JS file, that is provided by PyMdown or Markdown Preview in this case. But the file has been updated in PyMdown facelessuser/PyMdown@884fc6a.

  14. facelessuser commented on Mar 6, 2015

    @facelessuser
    facelessuser
    on Mar 6, 2015
    Owner

    This has been merged in Markdown Preview and released.

  15. facelessuser
    closed this as completedon Mar 6, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    T: bugBug.

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions