JSFiddle - React, Tailwind, and code Playground

by Teppo Jussmäki

HTML

<script src="http://github.com/Mtillmann/mootools-canvas-lib/raw/master/mcl-min.js"></script>
<canvas id="canvas_area" width="500" height="500"></canvas>
<div class="nodeclass" style="left:200px; top:250px;"><h1>Title</h1><p id="p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ad>ipiscing ante et mi aliquet non lobortis nisi auctor. Sed erat odio, sodales nec suscipit eget, ...</p></div>
<div class="nodeclass" style="left:100px; top:150px;"><h1>Title</h1><p id="p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ad>ipiscing ante et mi aliquet non lobortis nisi auctor. Sed erat odio, sodales nec suscipit eget, ...</p></div>

<!--<div id="effect" class="effectclass" style="left:100px; top:80px;"><h1>Title</h1><p>Testi</p></div>-->
<p>Drawing on a &lt;canvas&gt with coordinates from &lt;div&gt; elements...

CSS

div.nodeclass {
    border:10px #AA00AA solid;
    background:#FFFFFF;
    width:0px;
    height:0px;
    position:absolute;
    cursor:move border-radius:10px;
    -moz-border-radius: 10px;
    
}

div h1 { 
    font:bold 12px Georgia,serif;
    padding: 2px;
    margin: 2px;
    background-color:white;
    float:left;
    -moz-border-radius: 4px;
    cursor: move;
}
div p {
   float:left;
   font-size:12px;
   opacity: 0.0;
   margin: 5px;
   min-width:180px;
}

div.effectclass {
    border:7px #22AA22 solid;
    background:#FFFFFF;
    width:0px;
    height:0px;
    position:absolute;
    cursor:move border-radius:7px;
    -moz-border-radius: 7px;
}

JavaScript

CANVAS.init({
    canvasElement: 'canvas_area',
    enableMouse : true
});

CANVAS.layers.add(new Layer({ id: 'ground' }));
CANVAS.layers.add(new Layer({ id: 'lines'  }));

var node = $$('div').set({
    selected: false,
    //content: $('node.p'),
    events:{ dblclick: function(){
        var content = this.getElementsByTagName("p");
        var title = this.getElementsByTagName("h1");
        if(!this.selected){
            this.morph({'height': '200px','width': '200px', 'z-index': '1'});
            content[0].morph({'opacity': '1.0'});
            title[0].morph({'font-size': '24px'});
        } else if(this.selected) {
            content[0].morph({'opacity': '0.0'});
            this.morph({'height': '0px','width': '0px', 'z-index': '0'});
            title[0].morph({'font-size': '12px'});
        }
        this.selected = !this.selected;
    } , mousedown: function() {
        var drag = new Drag(this, {handle: 'div h1'});
             
            }
    }
    
});
//new Drag.Move(node, {handle: 'ha'});

//new Drag(node);
//new Drag.Move(node, {handle: 'ha'});

//var eff = $('effect').set({
//    selected: false,
    //content: $('node.p'),
//    events:{ dblclick: function(){
//        var content = this.getElementsByTagName("p");
//        var title = this.getElementsByTagName("h1");
//        if(!this.selected){
//            this.morph({'height': '200px','width': '200px', 'z-index': '1'});
//            content[0].morph({'opacity': '1.0'});
//            title[0].morph({'font-size': '24px'});
//        } else if(this.selected) {
//            content[0].morph({'opacity': '0.0'});
//            this.morph({'height': '0px','width': '0px', 'z-index': '0'});
//            title[0].morph({'font-size': '12px'});
//        }
//        this.selected = !this.selected;
//    }}
//});

//new Drag(eff);



//node.addEvents({
//   dblclick: function(){
//        this.morph({'height': '200px','width': '200px'});
        //this.selected = TRUE;
//    }});

//var...