JSFiddle - React, Tailwind, and code Playground

by jglodek

HTML

<button id="add-node">add node</button>
<div id="container"></div>

SCSS

#container {background-color:#ddd;}

CoffeeScript

dojo.require 'dojox.gfx'
dojo.require 'dojox.gfx.move'

connecting = false
connectingFrom = [0,0]


dojo.addOnLoad ->
    createBubble = (data, g) ->
        bub = g.createCircle
                r:60
                x:-30
                y:-30
        .setFill([255, 255, 255, 0.5])
        .setStroke "#aaa"        
        bu2 = g.createCircle
                r:50
                x:-25
                y:-25
        .setFill([255,80,80,1])
        .setStroke "#aaa"            
        
    createExpandHandle = (data, g) ->
        expand= g.createRect
            width:20
            height:20
            x:-10
            y:-10
        .setFill 'red'
        expand
    
    createText = (data, parent) ->
        text = parent.createText
                 text:"Nauki "
                 align:"middle"
            .setFill 'black'
                 
    
    createNode = (data, parent) ->
        g = parent.createGroup()
        createBubble data, g
        createText data, g
        createExpandHandle data, g
        new dojox.gfx.Moveable g
        g

    container =dojo.byId 'container'
    surf = dojox.gfx.createSurface container, 800,800
    
    dojo.connect(dojo.byId('add-node'), 'onclick', ()-> createNode({},surf))
    dojo.subscribe "/gfx/move/start", (m) -> 
        m.shape.moveToFront()