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 id="node" class="nodeclass" style="left:200px; top:250px;"><h1 id="ha">Title</h1><p id="p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus adipiscing 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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus adipiscing ante et mi aliquet non lobortis nisi auctor. Sed erat odio, sodales nec suscipit eget, ...</p></div>
<xline id="line1" idref="effect" />
<p>Drawing on a &lt;canvas&gt with coordinates from &lt;div&gt; elements...
TidyUp

CSS

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

div h1 { 
    font:bold 12px Georgia,serif;
    padding: 2px;
    margin: 2px;
    background-color:white;
    float:left;
    -moz-border-radius: 4px;
}
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;
    opacity: 0.85;
    z-index: 0;
}

JavaScript

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

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

var maxZ = 0;

var node = $('node').set({
    selected: false,
    //content: $('node.p'),
    events: {
        mousedown: function() {
            maxZ = maxZ + 1;
            this.setStyle('z-index', maxZ);
        }, dblclick: function() {
            var content = this.getElementsByTagName("p");
            var title = this.getElementsByTagName("h1");
            if (!this.selected) {
                this.morph({
                    'height': '200px',
                    'width': '200px'
                });
                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'
                });
                title[0].morph({
                    'font-size': '12px'
                });
            }
            this.selected = !this.selected;
        }
    }
});
//new Drag(node);
new Drag.Move(node, {
    handle: 'ha'
});

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