diff --git a/.DS_Store b/.DS_Store
index c24e8ca32bfb1fbdce957faea9c078eea2f1eb8d..45a9dea3dd493872732dd723e18101c769848734 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 412c69414ac7a0d87ed03dae19d27716f0ebb089..324e4674ef4c08c4c4066601f1b6c5dc595e84b9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,17 @@
+# 0.1.34
+
+_6th November 2020_
+
+### Changed
+
+- Added organise mode tips node
+- Edits to text to help onboarding
+- updates icons to new style
+
+### Fixed
+
+- when zoomed out you can now move nodes correctly
+
# 0.1.33
_4th November 2020_
@@ -22,10 +36,6 @@ _30th October 2020_
- missing markdown guide link in collect view explainer card
- fixed so shortcuts now work all the time
-### Known Issue
-
-- If you are in a microcosm and use URL scheme to create a new microcosm the data will not refresh until you create a new node or switch routes.
-
# 0.1.31
_30th October 2020_
diff --git a/app/package.json b/app/package.json
index 6f39a7fefeea35846f9c13d4a66a2dad3bccbe4b..f006ec013d9ca066d5a001b71a8827afaf63700e 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,6 +1,6 @@
{
"name": "nodenogg.in",
- "version": "0.1.33",
+ "version": "0.1.34",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
diff --git a/app/src/components/ModesCard.vue b/app/src/components/ModesCard.vue
index c04f38e2b6df07c717d36a974a7a590f6b2f0c52..c6ffb4b7b01b5e66e5f1aeb076688e7958e19790 100644
--- a/app/src/components/ModesCard.vue
+++ b/app/src/components/ModesCard.vue
@@ -8,7 +8,7 @@
quickly and easily as possible.
</p>
<p>
- Tap or press the add node icon
+ Tap or press the add a new node icon to start
<svg
class="example"
xmlns="http://www.w3.org/2000/svg"
@@ -31,9 +31,11 @@
(shortcut <strong>n</strong>)
</p>
<p>
- Don't forget you can use
- <a href="https://guides.github.com/features/mastering-markdown/"
- >markdown</a
+ You can use
+ <strong
+ ><a href="https://guides.github.com/features/mastering-markdown/"
+ >markdown</a
+ ></strong
>
to quickly format your text and add images from websources, you can even
use html and embed codes.
@@ -42,10 +44,46 @@
To see what everyone else has collected in your team and to start
organising, just switch to organise mode (best on a large display).
</p>
+ <p>
+ If you want to hide any nodes tap or press the hide icon
+ <svg
+ class="example"
+ xmlns="http://www.w3.org/2000/svg"
+ width="50"
+ viewBox="0 0 158 158"
+ >
+ <g transform="translate(-1591.6 -842.601)">
+ <path
+ d="M55,9.465c30.376,0,71.063,15.16,71.063,45.535S85.376,101.028,55,101.028-15.718,85.376-15.718,55,24.624,9.465,55,9.465Z"
+ transform="translate(1610 875)"
+ />
+ <g class="z" transform="translate(1616 865)">
+ <path
+ class="x"
+ d="M 55.00000381469727 97.52814483642578 C 47.5827751159668 97.52814483642578 39.61429595947266 96.55204010009766 31.95606803894043 94.70535278320312 C 23.91633796691895 92.76667022705078 16.30660820007324 89.87577056884766 9.949525833129883 86.34516906738281 C 3.042046308517456 82.50887298583984 -2.367432832717896 77.99252319335938 -6.128662109375 72.92156219482422 C -10.16918277740479 67.47402191162109 -12.21789073944092 61.44435501098633 -12.21789073944092 55 C -12.21789073944092 39.30952072143555 -0.1744952797889709 29.4342098236084 9.928650856018066 23.91279411315918 C 13.16560935974121 22.1437931060791 16.71875381469727 20.5400218963623 20.4893798828125 19.14606475830078 C 24.12692070007324 17.80127334594727 27.97865104675293 16.64689826965332 31.93756675720215 15.71498107910156 C 39.58069229125977 13.91579341888428 47.55554580688477 12.96479320526123 55.00000381469727 12.96479320526123 C 62.44902420043945 12.96479320526123 70.44358825683594 13.91604328155518 78.11937713623047 15.71568870544434 C 86.21414947509766 17.61356353759766 93.86746215820312 20.4495849609375 100.2518997192383 23.91716766357422 C 110.4301071166992 29.44523048400879 122.5629806518555 39.32521057128906 122.5629806518555 55 C 122.5629806518555 61.43754196166992 120.4986724853516 67.46379089355469 116.4273986816406 72.911376953125 C 112.6376113891602 77.98233795166016 107.1883773803711 82.50062561035156 100.2310638427734 86.34071350097656 C 93.83364868164062 89.87177276611328 86.18119049072266 92.76396179199219 78.10095977783203 94.70460510253906 C 70.40991973876953 96.55177307128906 62.42173385620117 97.52814483642578 55.00000381469727 97.52814483642578 Z"
+ />
+ <path
+ class="w"
+ d="M 54.99999618530273 16.46478271484375 C 28.28687286376953 16.46478271484375 -8.717903137207031 29.85636138916016 -8.717903137207031 55.0000114440918 C -8.717903137207031 80.46525573730469 28.28687286376953 94.02813720703125 54.99999618530273 94.02813720703125 C 81.85781860351562 94.02813720703125 119.0629959106445 80.46525573730469 119.0629959106445 55.0000114440918 C 119.0629959106445 29.85636138916016 81.85781860351562 16.46478271484375 54.99999618530273 16.46478271484375 M 54.99999618530273 9.46478271484375 C 85.37564849853516 9.46478271484375 126.0629959106445 24.62433624267578 126.0629959106445 55.0000114440918 C 126.0629959106445 85.37565612792969 85.37564849853516 101.0281372070312 54.99999618530273 101.0281372070312 C 24.62434387207031 101.0281372070312 -15.71790313720703 85.37565612792969 -15.71790313720703 55.0000114440918 C -15.71790313720703 24.62433624267578 24.62434387207031 9.46478271484375 54.99999618530273 9.46478271484375 Z"
+ />
+ </g>
+ <circle
+ cx="21.5"
+ cy="21.5"
+ r="21.5"
+ transform="translate(1650 898)"
+ />
+ <line
+ class="y"
+ x1="138"
+ y2="138"
+ transform="translate(1601.5 852.5)"
+ />
+ </g>
+ </svg>
+ </p>
- <div class="btn-row">
- <BaseButton buttonClass="danger" @click="hideTips()">Hide</BaseButton>
- </div>
+ <SvgButton @click="hideTips()" />
</div>
<div v-show="!tipsplease"></div>
</div>
@@ -54,6 +92,7 @@
<script>
import marked from 'marked'
import { mapState } from 'vuex'
+import SvgButton from '@/components/SvgButton'
export default {
data: function () {
@@ -79,6 +118,9 @@ export default {
// this.hidetipsstate = false
},
},
+ components: {
+ SvgButton,
+ },
}
</script>
@@ -93,7 +135,7 @@ img {
width: 95%;
margin-top: 1em;
margin-left: 0.5em;
- background-color: white;
+ background-color: #6fcf97;
border: 2px solid black;
padding: 1em;
}
@@ -118,20 +160,37 @@ img {
}
.b {
fill: #fff;
+ stroke: #333;
}
.b,
.c {
- stroke: #333;
stroke-width: 7px;
}
.c,
.e {
fill: none;
}
+.c {
+ stroke: #2d9cdb;
+}
.d {
stroke: none;
}
+.z {
+ fill: #fff;
+}
+.y {
+ fill: none;
+ stroke: #2d9cdb;
+ stroke-linecap: round;
+ stroke-width: 14px;
+}
+.x,
+.w {
+ stroke: none;
+}
+
.btn-row {
margin-bottom: 5px;
padding: 0px 0px 15px 10px;
diff --git a/app/src/components/ModesCardorg.vue b/app/src/components/ModesCardorg.vue
index 94baf2f435e5c82bc781a18fc3cdb761cdcaa621..d64be91811ab2c3340f5e65eb38725595ea9e15c 100644
--- a/app/src/components/ModesCardorg.vue
+++ b/app/src/components/ModesCardorg.vue
@@ -3,14 +3,14 @@
<draggable
class="innernode"
:w="450"
- :h="590"
+ :h="690"
:x="50"
:y="15"
:z="1"
:scale="scale"
:draggable="true"
- :resizable="true"
- style="background-color: #6fcf97"
+ :resizable="false"
+ style="background-color: #6fcf97; border: 2px solid black"
>
<div class="nodes welcome">
<img src="https://alpha.nodenogg.in/files/organise.png" />
@@ -20,7 +20,8 @@
together in your team.
</p>
<p>
- You can move nodes together in real time using the arrow icon
+ You can move nodes together in real time by pressing or tapping the
+ arrow icon
<svg
class="example"
@@ -59,7 +60,7 @@
(shortcut <strong>a</strong>)
</p>
<p>
- You can also use the connection icon
+ You can also press or tap the connections icon
<svg
class="example"
@@ -96,21 +97,77 @@
</g>
</g>
</svg>
- to draw connections between nodes, you can create as many as you want
- as can each team member (shortcut <strong>c</strong>)
+ to create connections between any nodes (shortcut <strong>c</strong>),
+ you can create as many as you want per node as can each team member.
</p>
<p>
- You can still use
- <a href="https://guides.github.com/features/mastering-markdown/"
- >markdown</a
+ You can still use add & edit your (<strong
+ ><a href="https://guides.github.com/features/mastering-markdown/"
+ >markdown</a
+ ></strong
>
- to quickly format your text and add images from websources, you can
- even use html and embed codes.
+ formatted) nodes here. Tap or press the add node icon tap or press the
+ add a new node icon to start
+ <svg
+ class="example"
+ xmlns="http://www.w3.org/2000/svg"
+ width="50"
+ viewBox="0 0 143 106"
+ >
+ <g transform="translate(-1345 -843)">
+ <g class="aa" transform="translate(1345 865)">
+ <rect class="dd" width="127" height="84" />
+ <rect class="ee" x="0.5" y="0.5" width="126" height="83" />
+ </g>
+ <g class="bb" transform="translate(1361 843)">
+ <rect class="dd" width="127" height="84" />
+ <rect class="ee" x="3.5" y="3.5" width="120" height="77" />
+ </g>
+ <line class="cc" x2="41" transform="translate(1406.5 884.5)" />
+ <line class="cc" y2="41" transform="translate(1426.5 863.5)" />
+ </g>
+ </svg>
</p>
- <SvgButton />
- <div class="btn-row">
- <BaseButton buttonClass="danger" @click="hideTips()">Hide</BaseButton>
- </div>
+
+ <p>
+ And dont forget to hide any nodes just tap or press the hide icon
+ <svg
+ class="example"
+ xmlns="http://www.w3.org/2000/svg"
+ width="50"
+ viewBox="0 0 158 158"
+ >
+ <g transform="translate(-1591.6 -842.601)">
+ <path
+ d="M55,9.465c30.376,0,71.063,15.16,71.063,45.535S85.376,101.028,55,101.028-15.718,85.376-15.718,55,24.624,9.465,55,9.465Z"
+ transform="translate(1610 875)"
+ />
+ <g class="z" transform="translate(1616 865)">
+ <path
+ class="x"
+ d="M 55.00000381469727 97.52814483642578 C 47.5827751159668 97.52814483642578 39.61429595947266 96.55204010009766 31.95606803894043 94.70535278320312 C 23.91633796691895 92.76667022705078 16.30660820007324 89.87577056884766 9.949525833129883 86.34516906738281 C 3.042046308517456 82.50887298583984 -2.367432832717896 77.99252319335938 -6.128662109375 72.92156219482422 C -10.16918277740479 67.47402191162109 -12.21789073944092 61.44435501098633 -12.21789073944092 55 C -12.21789073944092 39.30952072143555 -0.1744952797889709 29.4342098236084 9.928650856018066 23.91279411315918 C 13.16560935974121 22.1437931060791 16.71875381469727 20.5400218963623 20.4893798828125 19.14606475830078 C 24.12692070007324 17.80127334594727 27.97865104675293 16.64689826965332 31.93756675720215 15.71498107910156 C 39.58069229125977 13.91579341888428 47.55554580688477 12.96479320526123 55.00000381469727 12.96479320526123 C 62.44902420043945 12.96479320526123 70.44358825683594 13.91604328155518 78.11937713623047 15.71568870544434 C 86.21414947509766 17.61356353759766 93.86746215820312 20.4495849609375 100.2518997192383 23.91716766357422 C 110.4301071166992 29.44523048400879 122.5629806518555 39.32521057128906 122.5629806518555 55 C 122.5629806518555 61.43754196166992 120.4986724853516 67.46379089355469 116.4273986816406 72.911376953125 C 112.6376113891602 77.98233795166016 107.1883773803711 82.50062561035156 100.2310638427734 86.34071350097656 C 93.83364868164062 89.87177276611328 86.18119049072266 92.76396179199219 78.10095977783203 94.70460510253906 C 70.40991973876953 96.55177307128906 62.42173385620117 97.52814483642578 55.00000381469727 97.52814483642578 Z"
+ />
+ <path
+ class="w"
+ d="M 54.99999618530273 16.46478271484375 C 28.28687286376953 16.46478271484375 -8.717903137207031 29.85636138916016 -8.717903137207031 55.0000114440918 C -8.717903137207031 80.46525573730469 28.28687286376953 94.02813720703125 54.99999618530273 94.02813720703125 C 81.85781860351562 94.02813720703125 119.0629959106445 80.46525573730469 119.0629959106445 55.0000114440918 C 119.0629959106445 29.85636138916016 81.85781860351562 16.46478271484375 54.99999618530273 16.46478271484375 M 54.99999618530273 9.46478271484375 C 85.37564849853516 9.46478271484375 126.0629959106445 24.62433624267578 126.0629959106445 55.0000114440918 C 126.0629959106445 85.37565612792969 85.37564849853516 101.0281372070312 54.99999618530273 101.0281372070312 C 24.62434387207031 101.0281372070312 -15.71790313720703 85.37565612792969 -15.71790313720703 55.0000114440918 C -15.71790313720703 24.62433624267578 24.62434387207031 9.46478271484375 54.99999618530273 9.46478271484375 Z"
+ />
+ </g>
+ <circle
+ cx="21.5"
+ cy="21.5"
+ r="21.5"
+ transform="translate(1650 898)"
+ />
+ <line
+ class="y"
+ x1="138"
+ y2="138"
+ transform="translate(1601.5 852.5)"
+ />
+ </g>
+ </svg>
+ </p>
+ <SvgButton @click="hideTips()" />
</div>
</draggable>
<div v-show="!tipsplease"></div>
@@ -175,6 +232,29 @@ img {
padding: 0.5em;
cursor: pointer;
}
+/* add new node */
+.aa {
+ fill: #333;
+ stroke: #707070;
+}
+.bb {
+ fill: #fff;
+ stroke: #333;
+}
+.bb,
+.cc {
+ stroke-width: 7px;
+}
+.cc,
+.ee {
+ fill: none;
+}
+.cc {
+ stroke: #2d9cdb;
+}
+.dd {
+ stroke: none;
+}
/* connections */
.h,
@@ -225,6 +305,20 @@ img {
.e {
stroke: none;
}
+
+.z {
+ fill: #fff;
+}
+.y {
+ fill: none;
+ stroke: #2d9cdb;
+ stroke-linecap: round;
+ stroke-width: 14px;
+}
+.x,
+.w {
+ stroke: none;
+}
.btn-row {
margin-bottom: 5px;
padding: 0px 0px 15px 10px;
diff --git a/app/src/components/PanzoomLayer.vue b/app/src/components/PanzoomLayer.vue
deleted file mode 100644
index 1a01c5ed32da21c29a9dfb0ff004acd86be6bf60..0000000000000000000000000000000000000000
--- a/app/src/components/PanzoomLayer.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
- <div>
- <div v-if="mode == 'move'" style="overflow: hidden">
- <div id="panzoom-element">
- <slot />
- </div>
- </div>
-
- <div v-else>
- <div>
- <slot />
- </div>
- </div>
- </div>
-</template>
-<script>
-import Panzoom from '@panzoom/panzoom'
-import { mapState } from 'vuex'
-
-export default {
- props: {
- options: { type: Object, default: () => {} },
- },
-
- created() {},
-
- // FIX: ONLY FIRES ONCE
- mounted() {
- this.panzoom = Panzoom(document.getElementById('panzoom-element'))
- document.addEventListener('wheel', this.panzoom.zoomWithWheel)
- document.addEventListener('wheel', function (event) {
- if (!event.shiftKey) return
- this.panzoom.zoomWithWheel(event)
- })
- },
- computed: {
- ...mapState({
- mode: (state) => state.ui.mode,
- }),
- },
- methods: {},
-}
-
-// This demo binds to shift + wheel
-</script>
diff --git a/app/src/components/SvgButton.vue b/app/src/components/SvgButton.vue
index f656e3e7757b885177b0d5bcecd0a6779e4b59e9..173d712eb1fea5fd9f67c02e867b8e66b16b6da5 100644
--- a/app/src/components/SvgButton.vue
+++ b/app/src/components/SvgButton.vue
@@ -1,42 +1,75 @@
<template>
<div>
<!-- Hide icon ONLY for now -->
- <svg
- xmlns="http://www.w3.org/2000/svg"
- width="50"
- viewBox="0 0 147.899 147.9"
- >
- <g transform="translate(-1596.55 -847.55)">
- <g class="a" transform="translate(1613 868)">
- <circle class="c" cx="55" cy="55" r="55" />
- <circle class="d" cx="55" cy="55" r="51.5" />
+ <button v-on="$listeners" class="button" :class="buttonClass">
+ <svg xmlns="http://www.w3.org/2000/svg" width="50" viewBox="0 0 158 158">
+ <g transform="translate(-1591.6 -842.601)">
+ <path
+ d="M55,9.465c30.376,0,71.063,15.16,71.063,45.535S85.376,101.028,55,101.028-15.718,85.376-15.718,55,24.624,9.465,55,9.465Z"
+ transform="translate(1610 875)"
+ />
+ <g class="z" transform="translate(1616 865)">
+ <path
+ class="x"
+ d="M 55.00000381469727 97.52814483642578 C 47.5827751159668 97.52814483642578 39.61429595947266 96.55204010009766 31.95606803894043 94.70535278320312 C 23.91633796691895 92.76667022705078 16.30660820007324 89.87577056884766 9.949525833129883 86.34516906738281 C 3.042046308517456 82.50887298583984 -2.367432832717896 77.99252319335938 -6.128662109375 72.92156219482422 C -10.16918277740479 67.47402191162109 -12.21789073944092 61.44435501098633 -12.21789073944092 55 C -12.21789073944092 39.30952072143555 -0.1744952797889709 29.4342098236084 9.928650856018066 23.91279411315918 C 13.16560935974121 22.1437931060791 16.71875381469727 20.5400218963623 20.4893798828125 19.14606475830078 C 24.12692070007324 17.80127334594727 27.97865104675293 16.64689826965332 31.93756675720215 15.71498107910156 C 39.58069229125977 13.91579341888428 47.55554580688477 12.96479320526123 55.00000381469727 12.96479320526123 C 62.44902420043945 12.96479320526123 70.44358825683594 13.91604328155518 78.11937713623047 15.71568870544434 C 86.21414947509766 17.61356353759766 93.86746215820312 20.4495849609375 100.2518997192383 23.91716766357422 C 110.4301071166992 29.44523048400879 122.5629806518555 39.32521057128906 122.5629806518555 55 C 122.5629806518555 61.43754196166992 120.4986724853516 67.46379089355469 116.4273986816406 72.911376953125 C 112.6376113891602 77.98233795166016 107.1883773803711 82.50062561035156 100.2310638427734 86.34071350097656 C 93.83364868164062 89.87177276611328 86.18119049072266 92.76396179199219 78.10095977783203 94.70460510253906 C 70.40991973876953 96.55177307128906 62.42173385620117 97.52814483642578 55.00000381469727 97.52814483642578 Z"
+ />
+ <path
+ class="w"
+ d="M 54.99999618530273 16.46478271484375 C 28.28687286376953 16.46478271484375 -8.717903137207031 29.85636138916016 -8.717903137207031 55.0000114440918 C -8.717903137207031 80.46525573730469 28.28687286376953 94.02813720703125 54.99999618530273 94.02813720703125 C 81.85781860351562 94.02813720703125 119.0629959106445 80.46525573730469 119.0629959106445 55.0000114440918 C 119.0629959106445 29.85636138916016 81.85781860351562 16.46478271484375 54.99999618530273 16.46478271484375 M 54.99999618530273 9.46478271484375 C 85.37564849853516 9.46478271484375 126.0629959106445 24.62433624267578 126.0629959106445 55.0000114440918 C 126.0629959106445 85.37565612792969 85.37564849853516 101.0281372070312 54.99999618530273 101.0281372070312 C 24.62434387207031 101.0281372070312 -15.71790313720703 85.37565612792969 -15.71790313720703 55.0000114440918 C -15.71790313720703 24.62433624267578 24.62434387207031 9.46478271484375 54.99999618530273 9.46478271484375 Z"
+ />
+ </g>
+ <circle
+ cx="21.5"
+ cy="21.5"
+ r="21.5"
+ transform="translate(1650 898)"
+ />
+ <line
+ class="y"
+ x1="138"
+ y2="138"
+ transform="translate(1601.5 852.5)"
+ />
</g>
- <circle cx="21.5" cy="21.5" r="21.5" transform="translate(1647 901)" />
- <line class="b" x1="138" y2="138" transform="translate(1601.5 852.5)" />
- </g>
- </svg>
+ </svg>
+ </button>
</div>
</template>
<script>
-export default {}
+export default {
+ props: {
+ buttonClass: {
+ type: String,
+ },
+ },
+}
</script>
<style lang="css" scoped>
-.a {
+button {
+ background-color: #6fcf97;
+ touch-action: manipulation;
+ border: none;
+ outline: none;
+ cursor: pointer;
+}
+
+button.list {
+ background-color: white;
+}
+
+.z {
fill: #fff;
- stroke: #000;
- stroke-width: 7px;
}
-.b,
-.d {
+.y {
fill: none;
-}
-.b {
stroke: #2d9cdb;
+ stroke-linecap: round;
stroke-width: 14px;
}
-.c {
+.x,
+.w {
stroke: none;
}
</style>
diff --git a/app/src/components/TipsLayer.vue b/app/src/components/TipsLayer.vue
index 507088512217859d66feea4584abbbc652efc711..25cefb91103e174592eab9555314a8d5ab61c493 100644
--- a/app/src/components/TipsLayer.vue
+++ b/app/src/components/TipsLayer.vue
@@ -11,16 +11,12 @@
:scale="scale"
:draggable="true"
:resizable="false"
- style="background-color: #6fcf97"
+ style="background-color: #6fcf97; border: 2px solid black"
>
<div>
<p id="nodeid" :inner-html.prop="nodetext | marked"></p>
- <div class="btn-row">
- <BaseButton buttonClass="danger" @click="hideTips()"
- >Hide</BaseButton
- >
- </div>
+ <SvgButton @click="hideTips()" />
</div>
</draggable>
</div>
@@ -32,12 +28,13 @@
<script>
import marked from 'marked'
import draggable from '@/experimental/Draggable'
+import SvgButton from '@/components/SvgButton'
import { mapState } from 'vuex'
export default {
data: function () {
return {
nodetext:
- '## Shortcuts 🢠-> 🰠\n **n** to create new nodes. </br> **c** create connections </br> **a** or **s** select mode. </br> **m** move mode',
+ '## Shortcuts 🢠-> 🰠\n **n** to create new nodes. </br> **c** create connections </br> **a** or **s** select & move nodes. </br> **m** pan and zoom canvas',
tipsplease: true,
}
},
@@ -55,6 +52,7 @@ export default {
},
components: {
draggable,
+ SvgButton,
},
}
</script>
diff --git a/app/src/experimental/icons/library/addNode.vue b/app/src/experimental/icons/library/addNode.vue
index 0956ca949f128aca93b821cd631509c875b3c13c..cdfcf9dcd1f3a2edd640a6a8a0e2a66ddbd6be0c 100644
--- a/app/src/experimental/icons/library/addNode.vue
+++ b/app/src/experimental/icons/library/addNode.vue
@@ -1,20 +1,46 @@
<template>
- <g>
- <path
- fill-rule="evenodd"
- clip-rule="evenodd"
- d="M37 15H17.1154V30.8636H37V15ZM15.1154 13V32.8636H39V13H15.1154Z"
- />
- <path
- fill-rule="evenodd"
- clip-rule="evenodd"
- d="M26 27L26 19L28 19L28 27L26 27Z"
- />
- <path fill-rule="evenodd" clip-rule="evenodd" d="M31 24H23V22H31V24Z" />
- <path
- fill-rule="evenodd"
- clip-rule="evenodd"
- d="M16 16.1364H12V36H35.8846V32H16V16.1364Z"
- />
- </g>
+ <svg
+ class="example"
+ xmlns="http://www.w3.org/2000/svg"
+ width="50"
+ viewBox="-10 0 168 96"
+ >
+ <g transform="translate(-1345 -843)">
+ <g class="a" transform="translate(1345 865)">
+ <rect class="d" width="127" height="84" />
+ <rect class="e" x="0.5" y="0.5" width="126" height="83" />
+ </g>
+ <g class="b" transform="translate(1361 843)">
+ <rect class="d" width="127" height="84" />
+ <rect class="e" x="3.5" y="3.5" width="120" height="77" />
+ </g>
+ <line class="c" x2="41" transform="translate(1406.5 884.5)" />
+ <line class="c" y2="41" transform="translate(1426.5 863.5)" />
+ </g>
+ </svg>
</template>
+
+<style lang="css" scoped>
+.a {
+ fill: #333;
+ stroke: #707070;
+}
+.b {
+ fill: #fff;
+ stroke: #333;
+}
+.b,
+.c {
+ stroke-width: 7px;
+}
+.c,
+.e {
+ fill: none;
+}
+.c {
+ stroke: #2d9cdb;
+}
+.d {
+ stroke: none;
+}
+</style>
diff --git a/app/src/experimental/icons/library/connection.vue b/app/src/experimental/icons/library/connection.vue
index b1e0253c7c5a091bde569af70c1b766e13bd2d76..ef58f9a165c9afa447bbca2cf8cccaa49fd4cae4 100644
--- a/app/src/experimental/icons/library/connection.vue
+++ b/app/src/experimental/icons/library/connection.vue
@@ -1,22 +1,72 @@
<template>
- <g>
- <path
- fill-rule="evenodd"
- clip-rule="evenodd"
- d="M28.2955 18.1664C27.2995 19.3045 26.6217 21.2073 26.1616 24.9098C25.8433 27.4712 25.1242 29.9039 23.7129 31.8781C22.2843 33.8766 20.1924 35.3393 17.2696 36.011L16.8217 34.0618C19.2903 33.4945 20.9538 32.2987 22.0859 30.715C23.2352 29.1073 23.8822 27.0345 24.1769 24.6631C24.6433 20.9095 25.3698 18.4727 26.7905 16.8493C28.2298 15.2046 30.2389 14.5616 32.7304 13.989L33.1783 15.9382C30.6931 16.5093 29.2729 17.0496 28.2955 18.1664Z"
- />
- <path
- fill-rule="evenodd"
- clip-rule="evenodd"
- d="M35.4302 12.3426C34.3537 12.5899 33.6816 13.6632 33.9289 14.7397C34.1763 15.8162 35.2495 16.4883 36.3261 16.241C37.4026 15.9936 38.0747 14.9204 37.8273 13.8439C37.58 12.7673 36.5067 12.0952 35.4302 12.3426ZM31.9797 15.1876C31.485 13.0346 32.8293 10.8881 34.9823 10.3934C37.1353 9.89862 39.2818 11.2429 39.7765 13.3959C40.2713 15.549 38.927 17.6954 36.774 18.1902C34.6209 18.6849 32.4745 17.3406 31.9797 15.1876Z"
- />
- <path
- d="M17.0457 35.0364C17.4167 36.6511 16.4085 38.261 14.7937 38.632C13.179 39.0031 11.5691 37.9949 11.1981 36.3801C10.827 34.7653 11.8352 33.1555 13.45 32.7844C15.0648 32.4134 16.6746 33.4216 17.0457 35.0364Z"
- />
- <path
- fill-rule="evenodd"
- clip-rule="evenodd"
- d="M13.618 33.5154C12.4069 33.7937 11.6507 35.0011 11.929 36.2121C12.2073 37.4232 13.4147 38.1794 14.6258 37.9011C15.8368 37.6228 16.593 36.4154 16.3147 35.2043C16.0364 33.9933 14.829 33.2371 13.618 33.5154ZM10.4671 36.5481C10.0033 34.5296 11.2636 32.5173 13.282 32.0535C15.3005 31.5897 17.3128 32.8499 17.7766 34.8684C18.2404 36.8869 16.9802 38.8991 14.9617 39.363C12.9432 39.8268 10.9309 38.5665 10.4671 36.5481Z"
- />
- </g>
+ <svg
+ class="example"
+ xmlns="http://www.w3.org/2000/svg"
+ width="50"
+ viewBox="0 0 160 194"
+ >
+ <g transform="translate(-914 -825)">
+ <path
+ class="h"
+ d="M849.969,915.934c94.642,0-12.173-151.082,80.414-151.082"
+ transform="translate(106 84)"
+ />
+ <g class="i" transform="translate(920 979)">
+ <circle class="m" cx="20" cy="20" r="20" />
+ <circle class="n" cx="20" cy="20" r="19.5" />
+ </g>
+ <g class="j" transform="translate(1034 829)">
+ <circle class="m" cx="20" cy="20" r="20" />
+ <circle class="n" cx="20" cy="20" r="16.5" />
+ </g>
+ <path
+ class="k"
+ d="M849.969,915.934c94.642,0-12.173-151.082,80.414-151.082"
+ transform="translate(100 80)"
+ />
+ <g class="l" transform="translate(914 975)">
+ <circle class="m" cx="20" cy="20" r="20" />
+ <circle class="n" cx="20" cy="20" r="16.5" />
+ </g>
+ <g class="l" transform="translate(1028 825)">
+ <circle class="m" cx="20" cy="20" r="20" />
+ <circle class="n" cx="20" cy="20" r="16.5" />
+ </g>
+ </g>
+ </svg>
</template>
+
+<style scoped>
+.h,
+.k,
+.n {
+ fill: none;
+}
+.h,
+.i,
+.j {
+ stroke: #4f4f4f;
+}
+.h,
+.j,
+.k,
+.l {
+ stroke-width: 7px;
+}
+.i {
+ fill: #333;
+}
+.j {
+ fill: #4f4f4f;
+}
+.k {
+ stroke: #2d9cdb;
+}
+.l {
+ fill: #fff;
+ stroke: #333;
+}
+.m {
+ stroke: none;
+}
+</style>
diff --git a/app/src/experimental/icons/library/select.vue b/app/src/experimental/icons/library/select.vue
index c09bb6c395226c6c1781e5b159a4518d5ac3d1ec..6fdbceb42ce17776b98dd752acb05fbf715657d2 100644
--- a/app/src/experimental/icons/library/select.vue
+++ b/app/src/experimental/icons/library/select.vue
@@ -1,7 +1,54 @@
<template>
- <path
- fill-rule="evenodd"
- clip-rule="evenodd"
- d="M15.7225 12.4585C16.3175 11.9652 17.1443 11.8601 17.8453 12.1887L36.0247 20.7103C36.7467 21.0487 37.1998 21.7833 37.1781 22.58C37.1564 23.3768 36.6641 24.0837 35.9248 24.3794L28.049 27.5298L23.8492 34.8793C23.4455 35.5857 22.6536 35.976 21.8469 35.866C21.0401 35.756 20.3796 35.1677 20.1766 34.3786L15.0637 14.4949C14.8708 13.7449 15.1274 12.9519 15.7225 12.4585ZM26.6578 25.9302L35.1794 22.5216L17 14L22.113 33.8837L26.6578 25.9302Z"
- />
+ <svg
+ class="example"
+ xmlns="http://www.w3.org/2000/svg"
+ width="50"
+ viewBox="5 0 182 196.814"
+ >
+ <g transform="translate(-1485.374 -735.578)">
+ <g class="a" transform="translate(1489.998 835.06) rotate(-47)">
+ <path
+ class="d"
+ d="M53.519,0l53.519,142.717L53.055,101.138,0,142.717Z"
+ />
+ <path
+ class="e"
+ d="M 53.51882553100586 19.93599700927734 L 15.31051635742188 121.824821472168 L 48.73732376098633 95.62881469726562 L 53.01795196533203 92.27416229248047 L 57.32657623291016 95.59273529052734 L 91.86629486083984 122.195915222168 L 53.51882553100586 19.93599700927734 M 53.51882553100586 -1.52587890625e-05 L 107.0376510620117 142.7168579101562 L 53.05514907836914 101.1384582519531 L 0 142.7168579101562 L 53.51882553100586 -1.52587890625e-05 Z"
+ />
+ </g>
+ <path
+ class="b"
+ d="M53.519,0l53.519,142.717L53.055,101.138,0,142.717Z"
+ transform="translate(1489.998 835.06) rotate(-47)"
+ />
+ <g class="c" transform="translate(1485.374 813.861) rotate(-47)">
+ <path
+ class="d"
+ d="M 99.45198822021484 132.4564208984375 L 55.19086837768555 98.3656005859375 L 53.03655624389648 96.70631408691406 L 50.89624404907227 98.38362121582031 L 7.655252933502197 132.2708435058594 L 53.51882553100586 9.967990875244141 L 99.45198822021484 132.4564208984375 Z"
+ />
+ <path
+ class="e"
+ d="M 53.51882553100586 19.93599700927734 L 15.31051635742188 121.824821472168 L 48.73732376098633 95.62881469726562 L 53.01795196533203 92.27416229248047 L 57.32657623291016 95.59273529052734 L 91.86629486083984 122.195915222168 L 53.51882553100586 19.93599700927734 M 53.51882553100586 -1.52587890625e-05 L 107.0376510620117 142.7168579101562 L 53.05514907836914 101.1384582519531 L 0 142.7168579101562 L 53.51882553100586 -1.52587890625e-05 Z"
+ />
+ </g>
+ </g>
+ </svg>
</template>
+
+<style scoped>
+/* arrow */
+.a {
+ fill: none;
+}
+.b,
+.e {
+ fill: #333;
+}
+.c {
+ fill: #fff;
+}
+.d,
+.e {
+ stroke: none;
+}
+</style>
diff --git a/app/src/experimental/modes/index.js b/app/src/experimental/modes/index.js
index 1aad8696c73171955b06bbf77cf85664ce84f39b..15e3b453f3dc1fcb2d5b441caa8205c1276bda19 100644
--- a/app/src/experimental/modes/index.js
+++ b/app/src/experimental/modes/index.js
@@ -1,22 +1,22 @@
-export const select = {
- name: 'select',
+export const addNode = {
+ name: 'addNode',
view: {
pan: false,
zoom: false,
},
- icon: 'select',
- cursor: 'initial',
+ icon: 'addNode',
+ cursor: 'copy',
shortcut: false,
}
-export const addNode = {
- name: 'addNode',
+export const select = {
+ name: 'select',
view: {
pan: false,
zoom: false,
},
- icon: 'addNode',
- cursor: 'copy',
+ icon: 'select',
+ cursor: 'initial',
shortcut: false,
}
@@ -42,16 +42,16 @@ export const connect = {
shortcut: false,
}
-export const draw = {
- name: 'draw',
- view: {
- pan: false,
- zoom: false,
- },
- icon: 'draw',
- cursor: 'crosshair',
- shortcut: false,
-}
+// export const draw = {
+// name: 'draw',
+// view: {
+// pan: false,
+// zoom: false,
+// },
+// icon: 'draw',
+// cursor: 'crosshair',
+// shortcut: false,
+// }
export const upload = {
name: 'upload',
diff --git a/app/src/views/List.vue b/app/src/views/List.vue
index a690eb41bffdb0879b142770ea20514847760d35..3c686e8df4533ea630c7e0003503462989c9c2f9 100644
--- a/app/src/views/List.vue
+++ b/app/src/views/List.vue
@@ -178,16 +178,19 @@ export default {
}
.b {
fill: #fff;
+ stroke: #333;
}
.b,
.c {
- stroke: #333;
stroke-width: 7px;
}
.c,
.e {
fill: none;
}
+.c {
+ stroke: #2d9cdb;
+}
.d {
stroke: none;
}
diff --git a/app/src/views/Organise.vue b/app/src/views/Organise.vue
index 4faa184ab01fda3d256244ec78cd4d7b7f1bf538..966f06bfea69c04631c499985b4dc802f7c95e4b 100644
--- a/app/src/views/Organise.vue
+++ b/app/src/views/Organise.vue
@@ -28,7 +28,7 @@
<div class="online" v-else>
<div ref="container" class="wrapper" v-bind:style="modeContainerStyle">
- <!-- <PanzoomLayer> -->
+
<PanZoomContainer
v-bind:width="width"
v-bind:height="height"
@@ -79,7 +79,7 @@
<ConnectionsLayer />
</div>
<ScribbleLayer v-bind:drawready="drawready"></ScribbleLayer>
- <!-- </PanzoomLayer> -->
+
</PanZoomContainer>
<!-- <ToolBar /> -->
<ModeToolbar
@@ -107,7 +107,7 @@ import PanZoomContainer from '@/experimental/PanZoomContainer'
import ConnectionsLayer from '@/components/ConnectionsLayer'
import NodesLayer from '@/components/NodesLayer'
import OffLine from '@/components/OffLine'
-// import PanzoomLayer from '@/components/PanzoomLayer'
+
// import ToolBar from '@/components/ToolBar'
import ScribbleLayer from '@/components/ScribbleLayer'
import UploadLayer from '@/components/UploadLayer'
@@ -235,7 +235,7 @@ export default {
components: {
ModeToolbar,
ViewToolbar,
- //PanzoomLayer,
+
PanZoomContainer,
// SelectionLayer,
NodesLayer,