Commit 1f1b6a07 authored by Adam Procter's avatar Adam Procter

project so far

parent 480dcbdf
......@@ -11871,6 +11871,11 @@
"vue-style-loader": "4.1.1"
}
},
"vue-router": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.1.tgz",
"integrity": "sha512-vLLoY452L+JBpALMP5UHum9+7nzR9PeIBCghU9ZtJ1eWm6ieUI8Zb/DI3MYxH32bxkjzYV1LRjNv4qr8d+uX/w=="
},
"vue-style-loader": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.1.tgz",
......@@ -11897,6 +11902,11 @@
"integrity": "sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==",
"dev": true
},
"vuex": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.0.1.tgz",
"integrity": "sha512-wLoqz0B7DSZtgbWL1ShIBBCjv22GV5U+vcBFox658g6V0s4wZV9P4YjCNyoHSyIBpj1f29JBoNQIqD82cR4O3w=="
},
"watchpack": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz",
......
......@@ -8,7 +8,9 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"vue": "^2.5.17"
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.0-rc.12",
......
......@@ -13,5 +13,8 @@
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "app",
components: {
HelloWorld
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
"use strict";
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
(function e(t, n, r) {
function s(o, u) {
if (!n[o]) {
if (!t[o]) {
var a = typeof require == "function" && require;if (!u && a) return a(o, !0);if (i) return i(o, !0);var f = new Error("Cannot find module '" + o + "'");throw f.code = "MODULE_NOT_FOUND", f;
}var l = n[o] = { exports: {} };t[o][0].call(l.exports, function (e) {
var n = t[o][1][e];return s(n ? n : e);
}, l, l.exports, e, t, n, r);
}return n[o].exports;
}var i = typeof require == "function" && require;for (var o = 0; o < r.length; o++) {
s(r[o]);
}return s;
})({ 1: [function (require, module, exports) {
var Id = require("idy"),
SetOrGet = require("set-or-get"),
IterateObject = require("iterate-object"),
Deffy = require("deffy");var _connections = {},
_betweenTwoBubbles = {},
container = null,
markers = null;function connectable(options, elmTarget) {
var con = {};if (elmTarget === undefined) {
elmTarget = options;options = {};
}container = options.container || container;var elmSource = this;markers = options.markers || markers;options.k = options.k || 100;options.kk = options.kk || 10;var marker = markers.marker(10, 10),
markerId = "triangle-" + Id(),
line = container.path().attr("marker-end", "url(#" + markerId + ")").fill("none");marker.attr({ id: markerId, viewBox: "0 0 10 10", refX: "0", refY: "5", markerUnits: "strokeWidth", markerWidth: "4", markerHeight: "5" });marker.path().attr({ d: "M 0 0 L 10 5 L 0 10 z" });var sPos = {},
tPos = {};con.source = elmSource;con.target = elmTarget;con.line = line;con.marker = marker;SetOrGet(_connections, con.source.id(), []).push(con);SetOrGet(_connections, con.target.id(), []).push(con);SetOrGet(_betweenTwoBubbles, { toString: function toString() {
var ids = [con.source.id(), con.target.id()],
id1 = ids.join("->"),
id2 = ids.reverse().join("->");con._ = con.id = id1;if (_betweenTwoBubbles[id2]) {
con._ = id2;return id2;
}con.id = id1;return id1;
} }, []).push(con);con.computeLineCoordinates = function (cons) {
var output = [],
l = cons.length;IterateObject(cons, function (con, i) {
var sT = con.source.transform(),
tT = con.target.transform(),
sB = con.source.bbox(),
tB = con.target.bbox(),
x1 = sT.x + sB.width / 2,
y1 = sT.y + sB.height / 2,
x2 = tT.x + tB.width / 2,
y2 = tT.y + tB.height / 2,
cx = (x1 + x2) / 2,
cy = (y1 + y2) / 2,
dx = Math.abs((x1 - x2) / 2),
dy = Math.abs((y1 - y2) / 2),
dd = null,
out = { x1: x1, y1: y1, x2: x2, y2: y2, ex: x1, ey: y1 };if (i !== (l - 1) / 2) {
dd = Math.sqrt(dx * dx + dy * dy);out.ex = cx + dy / dd * options.k * (i - (l - 1) / 2);out.ey = cy - dx / dd * options.k * (i - (l - 1) / 2);
}output.push(out);
});return output;
};if (options.padEllipse) {
con.computeLineCoordinates = function (cons) {
var output = [],
l = cons.length;IterateObject(cons, function (con, i) {
var elmS = con.source.node.querySelector("ellipse") || con.source.node.querySelector("circle"),
elmT = con.target.node.querySelector("ellipse") || con.target.node.querySelector("circle"),
xR1,
xR2,
yR1,
yR2,
sT = con.source.transform(),
tT = con.target.transform(),
sB = con.source.bbox(),
tB = con.target.bbox();if (elmS.tagName === "circle") {
xR1 = yR1 = parseFloat(elmS.getAttribute("r"));xR2 = yR2 = parseFloat(elmT.getAttribute("r"));
} else {
xR1 = parseFloat(elmS.getAttribute("rx"));yR1 = parseFloat(elmS.getAttribute("ry"));xR2 = parseFloat(elmT.getAttribute("rx"));yR2 = parseFloat(elmT.getAttribute("ry"));
}var sx = sT.x + xR1 / 2,
sy = sT.y + yR1 / 2,
tx = tT.x + xR2 / 2,
ty = tT.y + yR2 / 2,
dx = tx - sx,
dy = ty - sy,
d = Math.sqrt(dx * dx + dy * dy),
ux = dx / d,
uy = dy / d,
cx1 = sx + xR1 * ux,
cy1 = sy + yR1 * uy,
cx2 = sx + (d - xR2 - 5) * ux,
cy2 = sy + (d - yR2 - 5) * uy;var x1 = cx1 + xR1 / 2,
y1 = cy1 + yR1 / 2,
x2 = cx2 + xR2 / 2,
y2 = cy2 + yR2 / 2;var cx = (x1 + x2) / 2,
cy = (y1 + y2) / 2,
dd = null,
out = { x1: x1, y1: y1, x2: x2, y2: y2, ex: x1, ey: y1 };if (isNaN(out.x1)) {
out.x1 = sT.x + xR1 * 2;out.y1 = sT.y + yR1 / 2;out.x2 = sT.x;out.y2 = out.y1;out.ex = (out.x1 + out.x2) / 2;out.ey = out.y1 - options.kk * (i + 1);
} else {
dx = Math.abs((x1 - x2) / 2);dy = Math.abs((y1 - y2) / 2);if (i !== (l - 1) / 2) {
dd = Math.sqrt(dx * dx + dy * dy);out.ex = cx + dy / dd * options.k * (i - (l - 1) / 2);out.ey = cy - dx / dd * options.k * (i - (l - 1) / 2);
}
}output.push(out);
});return output;
};
}elmSource.cons = elmSource.cons || [];elmSource.cons.push(con);con.update = function () {
var cons = Deffy(_betweenTwoBubbles[con._], []),
results = con.computeLineCoordinates(cons);IterateObject(results, function (r, i) {
cons[i].line.plot("M" + r.x1 + " " + r.y1 + " Q" + r.ex + " " + r.ey + " " + r.x2 + " " + r.y2);
});
};con.update();elmSource.on("dragmove", con.update);elmTarget.on("dragmove", con.update);con.setLineColor = function (color, c) {
c = c || this;c.line.stroke(color);c.marker.fill(color);
};return con;
}if (typeof SVG === "function") {
SVG.extend(SVG.Element, { connectable: connectable });
} else if ((typeof window === "undefined" ? "undefined" : _typeof(window)) === "object") {
throw new Error("SVG.js is not loaded but it is required.");
}module.exports = connectable;
}, { deffy: 2, idy: 4, "iterate-object": 5, "set-or-get": 6 }], 2: [function (require, module, exports) {
var Typpy = require("typpy");function Deffy(input, def, options) {
if (typeof def === "function") {
return def(input);
}options = Typpy(options) === "boolean" ? { empty: options } : { empty: false };if (options.empty) {
return input || def;
}if (Typpy(input) === Typpy(def)) {
return input;
}return def;
}module.exports = Deffy;
}, { typpy: 3 }], 3: [function (require, module, exports) {
function Typpy(input, target) {
if (arguments.length === 2) {
return Typpy.is(input, target);
}return Typpy.get(input, true);
}Typpy.is = function (input, target) {
return Typpy.get(input, typeof target === "string") === target;
};Typpy.get = function (input, str) {
if (typeof input === "string") {
return str ? "string" : String;
}if (null === input) {
return str ? "null" : null;
}if (undefined === input) {
return str ? "undefined" : undefined;
}if (input !== input) {
return str ? "nan" : NaN;
}return str ? input.constructor.name.toLowerCase() : input.constructor;
};module.exports = Typpy;
}, {}], 4: [function (require, module, exports) {
function Idy(length) {
length = length || 10;return Math.random().toString(35).substr(2, length);
}module.exports = Idy;
}, {}], 5: [function (require, module, exports) {
function IterateObject(obj, fn) {
var i = 0,
keys = [];if (Array.isArray(obj)) {
for (; i < obj.length; ++i) {
if (fn(obj[i], i, obj) === false) {
break;
}
}
} else {
keys = Object.keys(obj);for (; i < keys.length; ++i) {
if (fn(obj[keys[i]], keys[i], obj) === false) {
break;
}
}
}
}module.exports = IterateObject;
}, {}], 6: [function (require, module, exports) {
var Deffy = require("deffy");function SetOrGet(input, field, def) {
return input[field] = Deffy(input[field], def);
}module.exports = SetOrGet;
}, { deffy: 7 }], 7: [function (require, module, exports) {
arguments[4][2][0].apply(exports, arguments);
}, { dup: 2, typpy: 8 }], 8: [function (require, module, exports) {
arguments[4][3][0].apply(exports, arguments);
}, { dup: 3 }] }, {}, [1]);
\ No newline at end of file
(function() {
SVG.extend(SVG.Element, {
/**
* draggy
* Makes an element draggable.
*
* @name draggy
* @function
* @param {Object|Function} constraint An object containing the
* constraint values or a function which gets the `x` and `y` values
* and returns a boolean or an object containing the `x` and `y`
* boolean values.`false` skips moving while `true` allows it.
* @return {SVG} The SVG element.
*/
draggy: function (constraint) {
var start
, drag
, end
, element = this
;
// Remove draggable if already present
if (typeof this.fixed === "function") {
this.fixed();
}
// Ensure constraint object
constraint = constraint || {};
// Start dragging
start = function(event) {
var parent = this.parent(SVG.Nested) || this.parent(SVG.Doc);
event = event || window.event;
// Invoke any callbacks
if (element.beforedrag) {
element.beforedrag(event);
}
// Get element bounding box
var box = element.bbox();
if (element instanceof SVG.G) {
box.x = element.x();
box.y = element.y();
} else if (element instanceof SVG.Nested) {
box = {
x: element.x()
, y: element.y()
, width: element.width()
, height: element.height()
};
}
// Store event
element.startEvent = event;
// Store start position
element.startPosition = {
x: box.x
, y: box.y
, width: box.width
, height: box.height
, zoom: parent.viewbox().zoom
, rotation: element.transform("rotation") * Math.PI / 180
};
// Add while and end events to window
SVG.on(window, "mousemove", drag);
SVG.on(window, "touchmove", drag);
SVG.on(window, "mouseup", end);
SVG.on(window, "touchend", end);
// Invoke any callbacks
element.node.dispatchEvent(new CustomEvent("dragstart", {
detail: {
event: event
, delta: {
x: 0
, y: 0
}
}
}));
// Prevent selection dragging
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
};
function elmZoom(elm) {
if (!elm || typeof elm.transform !== "function") { return { x: 1, y: 1 }; }
var p = elm.parent();
var t = elm.transform();
pz = {};
var pz = elmZoom(p);
return {
x: t.scaleX * pz.x
, y: t.scaleY * pz.y
};
}
// While dragging
drag = function(event) {
event = event || window.event;
if (element.startEvent) {
// Calculate move position
var x
, y
, rotation = element.startPosition.rotation
, width = element.startPosition.width
, height = element.startPosition.height
, zoom = element.startPosition.zoom
, delta = {
x: event.pageX - element.startEvent.pageX
, y: event.pageY - element.startEvent.pageY
}
;
if (/^touchstart|touchmove$/.test(event.type)) {
delta.x = event.touches[0].pageX - element.startEvent.touches[0].pageX;
delta.y = event.touches[0].pageY - element.startEvent.touches[0].pageY;
} else if(/^click|mousedown|mousemove$/.test(event.type)) {
delta.x = event.pageX - element.startEvent.pageX;
delta.y = event.pageY - element.startEvent.pageY;
}
delta.scale = elmZoom(element);
x = element.startPosition.x + (delta.x * Math.cos(rotation) + delta.y * Math.sin(rotation)) / Math.pow(delta.scale.x * zoom, 1);
y = element.startPosition.y + (delta.y * Math.cos(rotation) + delta.x * Math.sin(-rotation)) / Math.pow(delta.scale.y * zoom, 1);
// Move the element to its new position, if possible by constraint
if (typeof constraint === "function") {
var coord = constraint(x, y);
if (typeof coord === "object") {
if (typeof coord.x !== "boolean" || coord.x) {
x = typeof coord.x === "number" ? coord.x : x;
element.x(x);
} else {
x = element.x();
}
if (typeof coord.y !== "boolean" || coord.y) {
y = typeof coord.y === "number" ? coord.y : y;
element.y(y);
} else {
y = element.y();
}
} else if (typeof coord === "boolean" && coord) {
element.move(x, y);
} else {
x = element.x();
y = element.y();
}
} else if (typeof constraint === "object") {
// Keep element within constrained box
if (constraint.minX !== null && x < constraint.minX) {
x = constraint.minX;
} else if (constraint.maxX !== null && x > constraint.maxX - width) {
x = constraint.maxX - width;
}
if (constraint.minY !== null && y < constraint.minY) {
y = constraint.minY;
} else if (constraint.maxY !== null && y > constraint.maxY - height) {
y = constraint.maxY - height;
}
element.move(x, y);
}
// Calculate the total movement
delta.movedX = x - element.startPosition.x;
delta.movedY = y - element.startPosition.y;
// Invoke any callbacks
element.node.dispatchEvent(new CustomEvent("dragmove", {
detail: {
delta: delta
, event: event
}
}));
}
};
// When dragging ends
end = function(event) {
event = event || window.event;
// Calculate move position
var delta = {
x: event.pageX - element.startEvent.pageX
, y: event.pageY - element.startEvent.pageY
, zoom: element.startPosition.zoom
};
// Reset store
element.startEvent = null;
element.startPosition = null;
// Remove while and end events to window
SVG.off(window, "mousemove", drag);
SVG.off(window, "touchmove", drag);
SVG.off(window, "mouseup", end);
SVG.off(window, "touchend", end);
// Invoke any callbacks
element.node.dispatchEvent(new CustomEvent("dragend", {
detail: {
delta: {
x: 0
, y: 0
}
, event: event
}
}));
};
// Bind mousedown event
element.on("mousedown", start);
element.on("touchstart", start);
// Disable draggable
element.fixed = function() {
element.off("mousedown", start);
element.off("touchstart", start);
SVG.off(window, "mousemove", drag);
SVG.off(window, "touchmove", drag);
SVG.off(window, "mouseup", end);
SVG.off(window, "touchend", end);
start = drag = end = null;
return element;
};
return this;
}
});
}).call(this);
export const A = () => {
var draw = SVG('app').size(300, 300)
var links = draw.group()
var markers = draw.group()
var nodes = draw.group()
var rect_1 = nodes.group().draggy();
var rect_2 = nodes.group().translate(200, 200).draggy();
var rect_3 = nodes.group().translate(100, 200).draggy();
rect_1.rect(50, 50).attr({ fill: '#f06' })
rect_2.rect(50, 50).attr({ fill: '#f08' })
rect_3.rect(50, 50).attr({ fill: '#f12' })
rect_1.connectable({
container: links,
markers: markers
}, rect_2).setLineColor("#000000");
}
\ No newline at end of file
This diff is collapsed.
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
<template>
<div class="hello">
<h1>{{msg}}</h1>
</div>
</template>
<script>
export default {
name: "Noggin",
data(){
return{
msg: 'Hello People'
}
}
};
</script>
<!-- scoped means limited to this component only -->
<style src="../assets/main.css" scoped>
</style>
\ No newline at end of file
require('@/assets/svg')
require('@/assets/draggy')
require('@/assets/connectable')
import Vue from "vue";
import App from "./App.vue";
import store from './store'
import router from './router'
Vue.config.productionTip = false;
new Vue({
store,
router,
render: h => h(App)
}).$mount("#app");
mounted:{
require('@/assets/mysvg')
}
\ No newline at end of file
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
}
]
})
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
}
})
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
<template>
<div class="home">
<Noggin/>
</div>
</template>
<script>
// @ is an alias to /src
import Noggin from '@/components/Noggin.vue'
export default {