Commit 832cb165 authored by Adam Procter's avatar Adam Procter

first set of files

parent 82c06474
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Nodes test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.connectable.js/2.0.0/svg.connectable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.draggy.js/1.1.1/svg.draggy.min.js"></script>
</head>
<body style="background-color: black">
<div id="drawing"></div>
<script src="main.js"></script>
</body>
</html>
\ No newline at end of file
console.clear()
var draw = SVG('drawing').size(1024, 768)
// Connectable items
var links = draw.group()
var markers = draw.group()
var nodes = draw.group()
// Put vars into a nodes group and make each node draggable
var obj1 = nodes.group().draggy({minX: 0,
minY: 0,
maxX: 1024,
maxY: 768})
var obj2 = nodes.group().draggy({minX: 0,
minY: 0,
maxX: 1024,
maxY: 768})
var obj3 = nodes.group().draggy({minX: 0,
minY: 0,
maxX: 1024,
maxY: 768})
var obj4 = nodes.group().draggy({minX: 0,
minY: 0,
maxX: 1024,
maxY: 768})
// Draw items
obj1.svg('<g id="doc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect id="Rectangle-2" fill="#000000" x="3" y="0" width="115" height="171"></rect><rect id="Rectangle" stroke="#FFFFFF" stroke-width="7" x="3.5" y="3.5" width="113" height="164"></rect><path d="M23.5,40.5 L95,40.5" id="Line-3" stroke="#979797" stroke-width="4" stroke-linecap="square"></path><path d="M24.5,54.25 L96,54.25" id="Line-3-Copy" stroke="#979797" stroke-width="4" stroke-linecap="square"></path><path d="M24.5,69.25 L96,69.25" id="Line-3-Copy-2" stroke="#979797" stroke-width="4" stroke-linecap="square"></path><path d="M24.5,86.25 L70,86.25" id="Line-3-Copy-3" stroke="#979797" stroke-width="4" stroke-linecap="square"></path></g>')
obj2.svg('<g id="media" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect id="Rectangle-2" fill="#000000" x="4" y="0" width="149" height="151"></rect><polygon id="Triangle" stroke="#979797" fill="#D8D8D8" points="118.003906 75.8867188 45.0039062 112.386719 45.0039063 39.3867188"></polygon><rect id="Rectangle" stroke="#FFFFFF" stroke-width="7" x="3.5" y="3.5" width="148" height="144"></rect></g>')
obj3.svg('<g id="slides" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect id="Rectangle-2" fill="#000000" x="5" y="0" width="175" height="114"></rect><rect id="Rectangle" stroke="#FFFFFF" stroke-width="7" x="3.5" y="3.5" width="175" height="107"></rect><path d="M3.5,3.31428571 L177.006484,112.375504" id="Line" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square"></path><path d="M180.5,1.31179775 L3.25158675,111.843112" id="Line-2" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square"></path></g>')
obj4.svg('<g id="doc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect id="Rectangle-2" fill="#000000" x="3" y="0" width="115" height="171"></rect><rect id="Rectangle" stroke="#FFFFFF" stroke-width="7" x="3.5" y="3.5" width="113" height="164"></rect><path d="M23.5,40.5 L95,40.5" id="Line-3" stroke="#979797" stroke-width="4" stroke-linecap="square"></path><path d="M24.5,54.25 L96,54.25" id="Line-3-Copy" stroke="#979797" stroke-width="4" stroke-linecap="square"></path><path d="M24.5,69.25 L96,69.25" id="Line-3-Copy-2" stroke="#979797" stroke-width="4" stroke-linecap="square"></path><path d="M24.5,86.25 L70,86.25" id="Line-3-Copy-3" stroke="#979797" stroke-width="4" stroke-linecap="square"></path></g>')
// initial setup of positioning
obj1.move(10,100)
//draw.scale(0.5)
//customsvg.move(10,50)
var conn1 = obj1.connectable({
container: links,
markers: markers,
}, obj2).setLineColor("#5D4037")
// conn1.connector.stroke({width: 5
// }).attr({
// "stroke-dasharray": "5, 10"
// })
<?xml version="1.0" encoding="UTF-8"?>
<svg width="120px" height="171px" viewBox="0 0 120 171" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
<title>doc</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="doc" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-2" fill="#000000" x="3" y="0" width="115" height="171"></rect>
<rect id="Rectangle" stroke="#FFFFFF" stroke-width="7" x="3.5" y="3.5" width="113" height="164"></rect>
<path d="M23.5,40.5 L95,40.5" id="Line-3" stroke="#979797" stroke-width="4" stroke-linecap="square"></path>
<path d="M24.5,54.25 L96,54.25" id="Line-3-Copy" stroke="#979797" stroke-width="4" stroke-linecap="square"></path>
<path d="M24.5,69.25 L96,69.25" id="Line-3-Copy-2" stroke="#979797" stroke-width="4" stroke-linecap="square"></path>
<path d="M24.5,86.25 L70,86.25" id="Line-3-Copy-3" stroke="#979797" stroke-width="4" stroke-linecap="square"></path>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="155px" height="151px" viewBox="0 0 155 151" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
<title>media</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="media" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-2" fill="#000000" x="4" y="0" width="149" height="151"></rect>
<polygon id="Triangle" stroke="#979797" fill="#D8D8D8" points="118.003906 75.8867188 45.0039062 112.386719 45.0039063 39.3867188"></polygon>
<rect id="Rectangle" stroke="#FFFFFF" stroke-width="7" x="3.5" y="3.5" width="148" height="144"></rect>
</g>
</svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8"?>
<svg width="182px" height="114px" viewBox="0 0 182 114" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
<title>slides</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="slides" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-2" fill="#000000" x="5" y="0" width="175" height="114"></rect>
<rect id="Rectangle" stroke="#FFFFFF" stroke-width="7" x="3.5" y="3.5" width="175" height="107"></rect>
<path d="M3.5,3.31428571 L177.006484,112.375504" id="Line" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square"></path>
<path d="M180.5,1.31179775 L3.25158675,111.843112" id="Line-2" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square"></path>
</g>
</svg>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment