bramp / js-sequence-diagrams

Draws simple SVG sequence diagrams from textual representation of the diagram
https://bramp.github.io/js-sequence-diagrams/
BSD 2-Clause "Simplified" License
7.81k stars 1.08k forks source link

Lodash 1.8.3 fails to draw the example #158

Closed dcousens closed 7 years ago

dcousens commented 8 years ago
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js "></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.1/raphael.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-sequence-diagrams/1.0.6/sequence-diagram-min.js"></script>
<div id="diagram"></div>
<script>
  var diagram = Diagram.parse("A->B: Does something")
  diagram.drawSVG('diagram')
</script>

The error

sequence-diagram.js:1069Uncaught TypeError: Cannot read property '_actors_height' of undefined
JoelOnGithub commented 8 years ago

If you load this one as well, it works: https://bramp.github.io/js-sequence-diagrams/js/underscore-min.js

dcousens commented 8 years ago

Kind of defeats the point though

QHose commented 8 years ago

Hi,

I use meteor 1.3, and also when I load your suggested module, I still get the error

TypeError: Cannot read property '_actors_height' of undefined
    at sequence-diagram-min.js:7
    at arrayEach (modules.js?hash=a266233…:7137)
    at Function.forEach (modules.js?hash=a266233…:15225)
    at HandRaphaelTheme.layout (sequence-diagram-min.js:7)
    at HandRaphaelTheme.draw (sequence-diagram-min.js:7)
    at Diagram.drawSVG (sequence-diagram-min.js:7)
    at HTMLDivElement.<anonymous> (sequence-diagram-min.js:7)
    at Function.each (jquery.js:384)
    at jQuery.each (jquery.js:136)
    at jQuery.undefined.$.fn.sequenceDiagram (sequence-diagram-min.js:7)

my code

import { Template } from 'meteor/templating';
import { Session } from 'meteor/session';
import '/imports/ui/UIHelpers';
import { APILogs } from '/imports/api/APILogs';
import '/imports/ui/external/raphael-min';
import '/imports/ui/external/sequence-diagram-min';
import '/imports/ui/external/underscore-min';

Template.APILogs.onRendered(function() {
    $(".diagram").sequenceDiagram({theme: 'hand'});
});

html

<div class="row">
            <h3 class="ui header">            
                Sequence diagram</h3>
            <p>In this schema you will see the flow from the user requesting the demo page, though the source code of this demo platform to Qlik Sense and back</p>
            <div class="diagram">Andrew->China: Says Hello Note right of China: China thinks\nabout it China-->Andrew: How are you? Andrew->>China: I am good thanks!</div>
        </div>
QHose commented 8 years ago

Also see https://forums.meteor.com/t/sequence-diagram-in-meteor-cannot-read-property--actors-height-of-undefined/27956/6

bramp commented 7 years ago

Sorry for the delay here. You say "Lodash 1.8.3 " but your example shows "lodash.js/4.13.1/lodash.min.js". Anyway I now test against Lodash 4.17.x, and after a few fixes ebb8987325d6d49287c8672f9b94aae90b03ca01 it all seems to work. Please wait for a v2.0.2 release.

dcousens commented 7 years ago

Thanks @bramp, looking back, I have no idea where 1.8.3 came from. Thanks for the hard work. :+1: