JSFiddle - React, Tailwind, and code Playground

by Yoshiharu Kamata

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<svg width="100%" height="600px" ></svg>

CSS

svg g.node rect {
  fill: lightgray;
  stroke: gray;
}
svg g.node.select rect {
  stroke: red;
}
svg g.node.sonar rect {
  stroke: black;
  fill:   yellow;
}
}

CoffeeScript

console.log "start"
db = 
  resources: {}
  ch: []
  psvr: []
  lsvr: []
  lpf: []
  t: []
window.db = db
class Resource
  type: "resource"
  name: ""
  width: 50
  height: 50
  rx: 5
  ry: 5
  constructor: (attr)->
    _.extend @, attr
    @_children = []
    @_parents = {}
    @id = _.uniqueId()
    db.resources[@id] = @
    @
  addChild: (child)->
    child._parents[@type] = @id
    @_children.push child.id
    @
  parent: (type)->
    db.resources[@parents[type]]
  children: ->
    _.map @_children, (id)->
      db.resources[id]
  childrenLink: ->
    _(@children()).map (child)=>
      _(child._parents).reject (id, type)=>
        type == @type
      .map (id)->
        db.resources[id]
      .valueOf()
    .flatten()
    .valueOf()
    
  descendants: ->
    children = @children()
    if _.isEmpty children
      []
    else
      _(children).map (child)->
        child.descendants()
      .flatten()
      .union(children)
      .valueOf()
        
  ancestors: (options)->
    reject = options?.reject
    console.log "r=",reject
    parents = _(@_parents).map (id)->
      db.resources[id]
    .reject (item)->
      _.include reject, item.type
    .valueOf()
    
    _(parents).map (parent)->
      parent.ancestors()
    .flatten()
    .union(parents)
    .valueOf()

  isLeaf: ->
    _.isEmpty @children()
    
  leafs: ->
    if @isLeaf()
      []
    else
      _(@children()).map (child)->
        if child.isLeaf()
          child
         else
          child.leafs()
      .flatten()
      .valueOf()

  sonar: (types)->  
    if @isLeaf()
      @ancestors reject: types
    else
      children = @children()
      _(@children()).map (child)=>
        child.sonar _.union(types, [@type])
      .flatten()
      .union(children)
      .valueOf()

class Ch extends Resource
  type: "ch"
    
class Psvr extends Resource
  type: "psvr"
  height: 20

class Lsvr extends Resource
  type: "lsvr"
  width: 2
  height: 2

class Lpf extends Resource
  type: "lpf"
  height:...