adding joint.js to my current project need help with making the transition from plain old js/jquery to joint style

198 views
Skip to first unread message

Jason Thomas

unread,
May 17, 2016, 10:37:59 AM5/17/16
to JointJS
Hello
I've been developing my own graph editor with old fashion javascript for a few weeks now and then BOOM!!! all of the sudden jointjs is needed. I gotta say though I'm glad I didnt git to far into the action events (like drag and drop) but I'm having a hard time trying to figure out how to use jointjs in the code I already have setup. 

Can anybody help me out here?
I cant find any adequate tutorials or explanation on how this all works...


here is the js code I already have.
it basically draws a circle, ellipse, p, and a q to my canvas.
the jQuery at the end is a switch statement for when I enter either a -c,e,p, or q- and the coordinating shape appears on the canvas
would I have to totally erease all of this and start over with joint or is there a way to convert this code in order to use the new library? 


Enter code here...

function drawCircle(){

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.arc(100, 75, 25, 0, 2 * Math.PI);
    ctx.stroke();

}

function clearArea() {

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    return false;
}

function drawEllipse(){

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.ellipse(100, 100, 50, 80, 90 * Math.PI/180, 0, 2 * Math.PI);
    ctx.stroke();

}

function drawP(){

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.font = "24px serif";
    ctx.fillText("p", 50, 100);
}

function drawQ(){

    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    ctx.font = "24px serif";
    ctx.fillText("q", 50, 100);
}
function OnClickDraw() {
    var drawtype = $('#drawType').val().toLowerCase();
    var drawcommands = drawtype.split(',');
    for (var i = 0; i <= drawcommands.length - 1; i++) {
        var dc = drawcommands[i].toLowerCase();
        switch (dc) {
            case 'c':
                drawCircle();
                break;
            case 'e':
                drawEllipse();
                break;
            case 'p':
                drawP();
                break;
            case 'q':
                drawQ();
                break;
        }

    }
    return false;
}

 This is my html file here

Enter code here...<!DOCTYPE html>
<html>
<head>
    <!-- meta tag goes here -->
    <title>EG_Editor</title>
   <!--custom stylesheets for jquery -->
    <link rel="stylesheet" type="text/css" href="../view/styles.css">
    <!-- Bootstrap core CSS-->
    <link href="../libs/bootstrap/bootstrap.css" rel="stylesheet">
    <!-- Bootstrap javascript link-->
    <script src="../libs/bootstrap/bootstrap.js"></script>
    <!--jquery link -->
    <script type="text/javascript" src="../jquery-2.2.3.js"></script>
    <!--link to custom javascript file -->
    <script type="text/javascript" src="../app.js"></script>
    <!--link to joint.js.css-->
    <link rel="stylesheet" href="../libs/joint.css" />
    <!--link to jquery.js-->
    <script src="../libs/jquery.js"></script>
    <!--link to lodash.js-->
    <script src="../libs/lodash.js"></script>
    <!--link to backbone.js-->
    <script src="../libs/backbone.js"></script>
    <!--link to joint.js-->
    <script src="../libs/joint.js"></script>
</head>
<body>
<div class="page-header">
    <h1>EG Editor -UAH-<small> SMAP</small></h1>
    <img id="uah" src="../images/uahLogo.png" />

</div>
<form>
        <label class="label label-primary" for="drawType">Enter Expression (e, c, p, q):</label>
    <div class="input-group">
        <input id="drawType" type="text" class="form-control" placeholder="Enter Expression" aria-describedby="basic-addon2">
        <span  class="input-group-addon" id="drawC" onclick="return OnClickDraw();">Submit</span>
        <span  class="input-group-addon" id="clear" onclick="return clearArea();">Clear</span>
        <span  class="input-group-addon" id="save">Save</span>
    </div>
</form>
<br>
<p></p>
<div class="panel panel-primary">
    <div class="panel-body">
        <section>
            <div id="one"><canvas id="myCanvas" ></canvas></div>
            <div id="two"><canvas id="sideCanvas" ></canvas></div>
        </section>
    </div>
    <!--br-->
    <div class="list-group">
        <a href="#" class="list-group-item active">
            <h4 class="list-group-item-heading">This is a UAH Project Done by the SMAP Center</h4>
            <p class="list-group-item-text">...</p>
        </a>
    </div>

    <div class="panel-footer">Developed by: Jason Thomas, Telly Polychroniades, & Dr. William Sabados</div>
</div>
</body>
</html>

 
snapshot1.png

Vladimír Talaš

unread,
May 18, 2016, 10:27:01 AM5/18/16
to joi...@googlegroups.com
Hi Jason, 

First of all go to http://jointjs.com/tutorial It is a great source for validation if joints could fits your needs for your project

If you want to go deeper, checkout tutorials and 'how it works' here : http://jointjs.com/tutorial

From my perspective start over with joint js is a better option as a lot of stuff is allready sorted out in joint js ( eg connecting elements, dragging...) 

Another thing I'd like to point out is a jointjs extension - Rappid http://jointjs.com/rappid. It has many plugins which could make development of your app even more faster. Here is an example of app made with Rappid http://jointjs.com/rappid
 

Regards, 


--

---
You received this message because you are subscribed to the Google Groups "JointJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jointjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--
Vladimir Talas
Client IO

Jason Thomas

unread,
May 18, 2016, 11:01:58 AM5/18/16
to joi...@googlegroups.com

I just need to know how to create all the joint stuff like canvas and other things in my html externaly like any other javascript file because right now it's making me insert all the jointjs code inline with all of my html code which absolutley sucks. and how would I make my diferent modules like dialog box, side panel, etc. comunicate with each other if need being?

You received this message because you are subscribed to a topic in the Google Groups "JointJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jointjs/1oT80egBBuw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jointjs+u...@googlegroups.com.

Vladimír Talaš

unread,
May 20, 2016, 8:33:37 AM5/20/16
to joi...@googlegroups.com
Hi Jason, 

I'm not sure I understand your issue with jointjs correctely, nevertheless jointjs does not support HTML5 canvas, it's based on SVG, so could not use your eneties anyway. 

Reagrds, 
Reply all
Reply to author
Forward
0 new messages