Commit 2ab49ba5 authored by Adam Procter's avatar Adam Procter

finally SVG.js working

parent 662aeb79
Pipeline #80 failed with stages
in 1 minute and 28 seconds
This diff is collapsed.
...@@ -123,7 +123,11 @@ body{ ...@@ -123,7 +123,11 @@ body{
border-right: 30px solid grey; border-right: 30px solid grey;
} }
#spatialui{
width:600px;
background-color:#BCDFDA;
margin-bottom:30px;
}
......
<template> <template>
<div id="spatialui"> <div id="spatialui">
<!-- the SVG.js stuff appears here -->
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'spatialui', name: 'spatialui',
props: { props: {
object: Object object: Object
} },
}
mounted: function() {
// SVG UI needs // SVG UI needs
// var draw = SVG('spatialui').size(300, 300) var draw = SVG('spatialui').size(600, 300)
// var links = draw.group() var links = draw.group()
// var markers = draw.group() var markers = draw.group()
// var nodes = draw.group() var nodes = draw.group()
// var rect_1 = nodes.group().draggy(); var rect_1 = nodes.group().draggy();
// var rect_2 = nodes.group().translate(200, 200).draggy(); var rect_2 = nodes.group().translate(200, 200).draggy();
// var rect_3 = nodes.group().translate(100, 200).draggy(); var rect_3 = nodes.group().translate(100, 200).draggy();
// var rect_1 = draw.rect(50, 50).attr({ fill: '#f06' }) rect_1.rect(50, 50).attr({ fill: '#f06' })
// rect_2.rect(50, 50).attr({ fill: '#f08' }) rect_2.rect(50, 50).attr({ fill: '#f08' })
// rect_3.rect(50, 50).attr({ fill: '#f12' }) rect_3.rect(50, 50).attr({ fill: '#f12' })
// rect_1.connectable({ rect_1.connectable({
// container: links, container: links,
// markers: markers markers: markers
// }, rect_2).setLineColor("#000000"); }, rect_2).setLineColor("#000000");
}
}
</script> </script>
......
...@@ -10,21 +10,14 @@ library.add(faSignInAlt) ...@@ -10,21 +10,14 @@ library.add(faSignInAlt)
Vue.component('font-awesome-icon', FontAwesomeIcon) Vue.component('font-awesome-icon', FontAwesomeIcon)
// end Font Awesome // end Font Awesome
import SVG from 'svg.js' import SVG from 'svg.js'
import draggy from 'svg.draggy.js' import draggy from 'svg.draggy.js'
import connectable from 'svg.connectable.js'
//Vue.component('svgjs', SVG)
//Vue.prototype.$MYSVG = SVG
// import connect from 'svg.connectable.js'
Vue.config.productionTip = false Vue.config.productionTip = false
//Object.defineProperty(Vue.prototype, '$connect', { value: connect });
//Object.defineProperty(Vue.prototype, '$draggy', { value: draggy });
new Vue({ new Vue({
router, router,
render: h => h(App) render: h => h(App)
...@@ -34,6 +27,3 @@ new Vue({ ...@@ -34,6 +27,3 @@ new Vue({
require('@/assets/js/custom') require('@/assets/js/custom')
} }
var draw = SVG('testsvg').size(300, 300)
var rect_1 = draw.rect(50, 50).attr({ fill: '#f06' })
rect_1.draggy();
\ No newline at end of file
...@@ -8,11 +8,6 @@ ...@@ -8,11 +8,6 @@
<register></register> <register></register>
</div> </div>
<div id="testsvg">
<p>SVG icon and draggable</p>
<!-- the SVG.js stuff appears here -->
</div>
</div> </div>
</template> </template>
......
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