steltenpower/.block

## .block
license: gpl-3.0

## README.md

      
    Raw
  

              README.md
            
          
    A demonstration of handling multitouch events using D3. Requires a touch-supporting browser, such as iOS Safari.
forked from mbostock's block: Multitouch

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1">
<style>

html,body {height: 100%;}
     body {margin: 0;}
svg {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

</style>
<body>
<!--
<g id="edges">
  <g id="outputs_0">
    <path d="M" id="edge_0_1" title="loves"/>
  </g>
</g>
<g id="nodes">
  <circle cx="20" cy="20" r="10" id="node_0" title="steltenpower"/>
  <circle cx="100" cy="100" r="10" id="node_1" title="web"/>
</g>
<g id="edgeNames">
  <text x="60" y="60">loves</text>
</g>
<g id="NodeNames">
  <text x="20" y="20">steltenpower</text>
  <text x="100" y="100">web</text>
</g>
// http://bl.ocks.org/tmcw/4444952
-->

<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var svg = d3.select("body").append("svg").attr("width",innerWidth).attr("height", innerHeight)
.on("touchstart",touch).on("touchmove",touch).on("touchend",touch);;
//var color = d3.scale.linear().domain([0,1,2]).range(['red','green','blue']);

var state="0base";
//var nodes=[]; // 1 node = elm_incl_cx_cy_id_title, [{relation,destinationId}]

function touch() {
  d3.event.preventDefault();
/*
clear
  touch0 (and back up) : if eventOnNode get i in nodes array, otherwise i=nodes.length;  Node[i].x=event.x; Node[i].y=event.y;
reading nodeNameA : changing nodes[i].name
  touch1 (and back up)    /     touch0up==>touch0=touch1;  : if eventOnNode get i in nodes array, otherwise i=nodes.length;  Node[i].x=event.x; Node[i].y=event.y;    /
reading relationName
  touch2 (and back up)
reading nodeNameB
*/
switch (state) {
  case "0base":
    if ((event.target.type=="circle")&&(event.type==touchstart)){
      A=event.target;
    }else A=new Circle(event.x,event.y); // take id of last node, add 1
    state="1start";
    // create txtA=textfield(A.name) and give it focus
    break;
  case "1Start":
    if ((event.target.type=="circle")&&(event.type==touchend)){
      A.name=txtA.value; //and hide txtA
      state="0base";
    }else{
      if (event.type=touchstart){
        if (event.target.type=="circle") B=event.target;
        else B=new Circle(event.x,event.y) // take id of last node, add 1
        // add edge (A,B)
        state="2go"
        // create txtR=textfield and give it focus
      }
    }
    break;
  case "2go":
    if ((event.target.type=="circle")&&(event.type==touchend)){
      //edges(A,B,txtRel.value);  //hide txtRel
      state="1start";
    }else{
      if (event.type=touchstart){
          if (event.target.type=="circle") B=new Circle(event.x,event.y); // take id of last node, add 1
          nodes[A].edges.push(B,"")
        }
        state="2go"
        // create txtR=textfield and give it focus
      }
    }
    break;
  case "3end":
    break;
  default:
    console.log("this code should never be reached");
    break;
}

  circle = circle
      .data(d3.touches(svg.node()), function(d) { return d.identifier; });

  circle.enter().append("circle")
      .attr("class", "node")
      .attr("r", 36)
      .style("fill", function(d) { return color(d.identifier); })
    .transition()
      .duration(500)
      .ease("elastic")
      .attr("r", 48);

  circle
      .attr("cx", function(d) { return d[0]; })
      .attr("cy", function(d) { return d[1]; })
      .on("touchstart",touch).on("touchmove",touch).on("touchend",touch);

}
</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1,maximum-scale=1">
	<style>

	html,body {height: 100%;}
	body {margin: 0;}
	svg {
	display: block;
	overflow: hidden;
	width: 100%;
	height: 100%;
	}

	</style>
	<body>
	<!--
	<g id="edges">
	<g id="outputs_0">
	<path d="M" id="edge_0_1" title="loves"/>
	</g>
	</g>
	<g id="nodes">
	<circle cx="20" cy="20" r="10" id="node_0" title="steltenpower"/>
	<circle cx="100" cy="100" r="10" id="node_1" title="web"/>
	</g>
	<g id="edgeNames">
	<text x="60" y="60">loves</text>
	</g>
	<g id="NodeNames">
	<text x="20" y="20">steltenpower</text>
	<text x="100" y="100">web</text>
	</g>
	// http://bl.ocks.org/tmcw/4444952
	-->

	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>
	var svg = d3.select("body").append("svg").attr("width",innerWidth).attr("height", innerHeight)
	.on("touchstart",touch).on("touchmove",touch).on("touchend",touch);;
	//var color = d3.scale.linear().domain([0,1,2]).range(['red','green','blue']);

	var state="0base";
	//var nodes=[]; // 1 node = elm_incl_cx_cy_id_title, [{relation,destinationId}]

	function touch() {
	d3.event.preventDefault();
	/*
	clear
	touch0 (and back up) : if eventOnNode get i in nodes array, otherwise i=nodes.length; Node[i].x=event.x; Node[i].y=event.y;
	reading nodeNameA : changing nodes[i].name
	touch1 (and back up) / touch0up==>touch0=touch1; : if eventOnNode get i in nodes array, otherwise i=nodes.length; Node[i].x=event.x; Node[i].y=event.y; /
	reading relationName
	touch2 (and back up)
	reading nodeNameB
	*/
	switch (state) {
	case "0base":
	if ((event.target.type=="circle")&&(event.type==touchstart)){
	A=event.target;
	}else A=new Circle(event.x,event.y); // take id of last node, add 1
	state="1start";
	// create txtA=textfield(A.name) and give it focus
	break;
	case "1Start":
	if ((event.target.type=="circle")&&(event.type==touchend)){
	A.name=txtA.value; //and hide txtA
	state="0base";
	}else{
	if (event.type=touchstart){
	if (event.target.type=="circle") B=event.target;
	else B=new Circle(event.x,event.y) // take id of last node, add 1
	// add edge (A,B)
	state="2go"
	// create txtR=textfield and give it focus
	}
	}
	break;
	case "2go":
	if ((event.target.type=="circle")&&(event.type==touchend)){
	//edges(A,B,txtRel.value); //hide txtRel
	state="1start";
	}else{
	if (event.type=touchstart){
	if (event.target.type=="circle") B=new Circle(event.x,event.y); // take id of last node, add 1
	nodes[A].edges.push(B,"")
	}
	state="2go"
	// create txtR=textfield and give it focus
	}
	}
	break;
	case "3end":
	break;
	default:
	console.log("this code should never be reached");
	break;
	}

	circle = circle
	.data(d3.touches(svg.node()), function(d) { return d.identifier; });

	circle.enter().append("circle")
	.attr("class", "node")
	.attr("r", 36)
	.style("fill", function(d) { return color(d.identifier); })
	.transition()
	.duration(500)
	.ease("elastic")
	.attr("r", 48);

	circle
	.attr("cx", function(d) { return d[0]; })
	.attr("cy", function(d) { return d[1]; })
	.on("touchstart",touch).on("touchmove",touch).on("touchend",touch);

	}
	</script>