Skip to content

Commit 50f08ba

Browse files
author
Gwenael Pluchon
committed
version bump
1 parent d6983d4 commit 50f08ba

16 files changed

+115
-94
lines changed

‎package.json

-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
"name": "vue-diagrams",
33
"title": "An easy to use diagram editor component",
44
"description": "Diagram component for vue.js, inspired by react-diagrams",
5-
"type": "module",
65
"version": "1.0.1",
76
"license": "MIT",
87
"main": "dist/vue-diagrams.js",

‎src/DiagramModel.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// @ts-check
22
import DiagramNode from "./DiagramNode";
33
import Emitter from 'tiny-emitter';
4-
import generateId from './generateId.ts';
4+
import generateId from './generateId';
55
import type { Point } from "./types/Point";
66

77
type Port = any;
@@ -14,7 +14,7 @@ export type InternalDiagramModel = {
1414
* @class DiagramModel
1515
*/
1616
class DiagramModel {
17-
private _model: InternalDiagramModel;
17+
_model: InternalDiagramModel;
1818
public emitter: any;
1919

2020
constructor() {
@@ -75,8 +75,8 @@ class DiagramModel {
7575
addLink(from: Port, to: Port, points:Array<Point> = [], options = {}) {
7676
this._model.links.push({
7777
id: generateId(),
78-
from: from.id,
79-
to: to.id,
78+
from: from.id || from,
79+
to: to.id || to,
8080
positionFrom: {},
8181
positionTo: {},
8282
points,

‎src/components/Diagram.vue

+66-36
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@
8080
</g>
8181
<DiagramNode
8282
:ref="'node-' + nodeIndex"
83+
class="node-abstract-wrapper"
8384
:title="node.title"
8485
:nodeModel="node"
8586
:diagram="model"
@@ -98,6 +99,30 @@
9899
@onStartDrag="startDragItem"
99100
@delete="model.deleteNode(node)"
100101
>
102+
<g class="tooltips"></g>
103+
<template v-for="(port, portIndex) in node.ports">
104+
<g
105+
v-if="port.options?.tooltip?.text"
106+
:class="{
107+
'tooltip': true,
108+
'tooltip-show-on-port-hover': port.options?.tooltip?.trigger === 'hoverPort'
109+
}"
110+
:style="{
111+
opacity: port.options?.tooltip?.opacity
112+
}"
113+
>
114+
<rect
115+
:fill="port.options?.tooltip?.fill || '#eeeeee'"
116+
:stroke="port.options?.tooltip?.stroke || '#bbbbbb'"
117+
:x="port.type === 'in' ? -50 : node.width + 10" :y="portIndex * 20 + 25"
118+
:rx="3" :ry="3"
119+
:width="40" :height="16"
120+
/>
121+
<text :x="port.type === 'in' ? -42 : node.width + 18" :y="portIndex * 20 + 36" font-size="8pt" fill="#000000">
122+
{{port.options?.tooltip?.text}}
123+
</text>
124+
</g>
125+
</template>
101126
<foreignObject :width="node.width + 10" x="-5" :height="node.height - 20" y="20">
102127
<div class="diagram-node-content-wrapper">
103128
<DiagramPort
@@ -694,40 +719,45 @@ export default defineComponent({
694719
});
695720
</script>
696721
<style scoped>
697-
svg{
698-
user-select: none;
699-
font-family: Helvetica;
700-
}
701-
.thumbViewClass {
702-
position: absolute;
703-
width: 100px;
704-
height: 70px;
705-
background: white;
706-
border: 1px solid black;
707-
}
708-
.vue-diagrams :deep(.svg-pan-zoom__scope) {
709-
position: absolute;
710-
top: 0;
711-
left: 0;
712-
width: 100%;
713-
height: 100%;
714-
z-index: 120;
715-
}
716-
.vue-diagrams :deep(.svg-pan-zoom__thumbnail) {
717-
position: absolute;
718-
top: 0px;
719-
left: 0px;
720-
}
721-
.vue-diagrams :deep(.svg-pan-zoom__scope .scope) {
722-
fill: red;
723-
fill-opacity: 0.1;
724-
stroke: red;
725-
stroke-width: 2px;
726-
}
727-
#smallGrid path {
728-
stroke: #ccc;
729-
}
730-
#grid path {
731-
stroke: gray;
732-
}
722+
svg {
723+
user-select: none;
724+
font-family: Helvetica;
725+
}
726+
.thumbViewClass {
727+
position: absolute;
728+
width: 100px;
729+
height: 70px;
730+
background: white;
731+
border: 1px solid black;
732+
}
733+
.vue-diagrams :deep(.svg-pan-zoom__scope) {
734+
position: absolute;
735+
top: 0;
736+
left: 0;
737+
width: 100%;
738+
height: 100%;
739+
z-index: 120;
740+
}
741+
.vue-diagrams :deep(.svg-pan-zoom__thumbnail) {
742+
position: absolute;
743+
top: 0px;
744+
left: 0px;
745+
}
746+
.vue-diagrams :deep(.svg-pan-zoom__scope .scope) {
747+
fill: red;
748+
fill-opacity: 0.1;
749+
stroke: red;
750+
stroke-width: 2px;
751+
}
752+
#smallGrid path {
753+
stroke: #ccc;
754+
}
755+
#grid path {
756+
stroke: gray;
757+
}
758+
.tooltip {
759+
opacity: 0.7;
760+
transition: opacity 0.2s;
761+
}
762+
733763
</style>

‎src/components/DiagramNode.vue

+6-1
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ import ImageNode from './NodeTypes/Image.vue';
5050
import ShaderNode from './NodeTypes/Shader.vue';
5151
import DiagramElement from '../mixins/DiagramElement';
5252
import { defineComponent } from 'vue';
53+
import Diagram from './Diagram.vue';
5354
5455
export default defineComponent({
5556
name: 'DiagramNode',
@@ -111,7 +112,11 @@ export default defineComponent({
111112
label: 'Delete node',
112113
handler() {
113114
_this.diagram.deleteNode(_this.nodeModel);
114-
_this.$parent?.$parent?.updateLinksPositions();
115+
if (_this.$parent?.$parent instanceof Diagram) {
116+
_this.$parent?.$parent?.updateLinksPositions();
117+
} else {
118+
throw 'Main diagram component not found';
119+
}
115120
},
116121
classes: [],
117122
}],

‎src/components/DiagramPort.vue

+5-35
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
'diagram-port': true,
44
'has-menu': true,
55
hover
6-
}" :aria-label="port.id" data-cooltipz-dir="bottom-right"
6+
}"
77
style="overflow: visible; position: relative; padding-left: 10px;"
88
>
99
<!--<rect
@@ -43,31 +43,6 @@
4343
/>
4444
<PortLabel v-else :port="port" :width="width" />
4545
</div>
46-
<div
47-
v-if="port.options?.tooltip?.text"
48-
:class="{
49-
'tooltip': true,
50-
'tooltip-show-on-port-hover': port.options?.tooltip?.trigger === 'hoverPort'
51-
}"
52-
>
53-
<!--
54-
<component
55-
:is="getPortShapeComponent(port.display_shape)"
56-
class="label"
57-
:port="port"
58-
/>
59-
-->
60-
<!--
61-
<rect
62-
:fill="port.options?.tooltip?.fill || '#eeeeee'"
63-
:stroke="port.options?.tooltip?.stroke || '#bbbbbb'"
64-
:x="0" y="0"
65-
rx="3" ry="3"
66-
width="40" height="18"
67-
/>
68-
-->
69-
<span x="10" y="13" font-size="8pt" fill="#000000">{{port.options?.tooltip?.text}}</span>
70-
</div>
7146
</div>
7247
</template>
7348
<script lang="ts">
@@ -128,14 +103,14 @@ export default defineComponent({
128103
}
129104
},
130105
methods: {
131-
getPortShapeComponent(shape) {
106+
getPortShapeComponent(shape: string) {
132107
if(shape === undefined) {
133108
return 'DotShapePort';
134109
}
135110
const component = resolveComponent(`vue-diagrams-port-shape-${shape}`);
136111
return typeof component !== 'string' ? `vue-diagrams-port-shape-${shape}` : 'DotShapePort';
137112
},
138-
getPortLabelComponent(valueType) {
113+
getPortLabelComponent(valueType: string) {
139114
if (valueType) {
140115
const component = resolveComponent(`vue-diagrams-port-label-${valueType}`);
141116
console.log('component?', valueType, component, `vue-diagrams-port-label-${valueType}`)
@@ -149,6 +124,7 @@ export default defineComponent({
149124
150125
enter() {
151126
this.fill = "#999999";
127+
console.log('hover port', this.port, this.$parent.$parent?.$parent?.$parent.model._model.links.filter(l => l.from === this.port.id || l.to === this.port.id), this.$parent.$parent?.$parent?.$parent.model);
152128
this.hover = true;
153129
},
154130
@@ -165,13 +141,7 @@ export default defineComponent({
165141
<style scoped>
166142
.diagram-port {
167143
position: relative;
168-
}
169-
.tooltip {
170-
position: absolute;
171-
left: -40px;
172-
top: 0;
173-
opacity: 0.8;
174-
transition: opacity 0.2s;
144+
cursor: unset;
175145
}
176146
.tooltip-show-on-port-hover {
177147
opacity: 0;

‎src/components/NodeTypes/Card.vue

+20-7
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
font-weight="bold"
2121
fill="#000000"
2222
ref="title"
23-
@click="nodeModel.options.editableTitle ? $parent.$parent.$parent.editText(nodeModel, 'title', $refs.title) : undefined"
23+
@click="nodeModel.options.editableTitle ? mainDiagramComponent.editText(nodeModel, 'title', $refs.title) : undefined"
2424
>
2525
{{nodeModel.title}}
2626
</text>
@@ -30,8 +30,9 @@
3030
</g>
3131
</g>
3232
</template>
33-
<script>
33+
<script lang="ts">
3434
import { defineComponent } from 'vue';
35+
import Diagram from '../Diagram.vue';
3536
3637
export default defineComponent({
3738
props: {
@@ -45,19 +46,31 @@ export default defineComponent({
4546
},
4647
},
4748
data() {
49+
return {
50+
menu: undefined,
51+
};
52+
},
53+
computed: {
54+
mainDiagramComponent () {
55+
if (this?.$parent?.$parent?.$parent instanceof Diagram) {
56+
return this.$parent.$parent.$parent;
57+
} else throw 'Main Diagram component not found';
58+
}
59+
},
60+
mounted() {
61+
/*
4862
let menu;
4963
if(this.nodeModel.options.editableTitle) {
64+
const _this = this;
5065
menu = [{
5166
label: 'icone',
5267
children: types.map(t => ({
5368
label: t.label,
54-
handler() { this.nodeModel.options.icon = t.icon; }
69+
handler() { _this.nodeModel.options.icon = t.icon; }
5570
}))
5671
}];
5772
}
58-
return {
59-
menu
60-
};
61-
},
73+
*/
74+
}
6275
});
6376
</script>

‎src/components/ports/BlenderStyleInput.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<input type="number" />
55
</div>
66
</template>
7-
<script setup>
7+
<script setup lang="ts">
88
const props = defineProps({
99
label: String,
1010
});

‎src/components/ports/DiamondDotPort.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<polygon class="port-shape" points="0 10,5 15,10 10,5 5" />
33
<circle class="port-shape" cx="5" cy="10" r=".5" />
44
</template>
5-
<script setup>
5+
<script setup lang="ts">
66
defineProps({
77
port: Object,
88
});

‎src/components/ports/DiamondPort.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<polygon class="port-shape" points="0 10,5 15,10 10,5 5" />
33
</template>
4-
<script setup>
4+
<script setup lang="ts">
55
defineProps({
66
port: Object,
77
});

‎src/components/ports/DotPort.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<circle class="port-shape" cx="5" cy="9" r="4" />
33
</template>
4-
<script setup>
4+
<script setup lang="ts">
55
defineProps({
66
port: Object,
77
});

‎src/components/ports/PortLabel.vue

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
<template>
2-
<span :class="`port-name port-${props.port.type}`" y="8" :x="width - horizontalPadding" >{{props.port.name}}</span>
2+
<span :class="`port-name port-${props.port.type}`" y="8" :x="(width || 0) - horizontalPadding" >{{props.port.name}}</span>
33
</template>
4-
<script setup>
4+
<script setup lang="ts">
55
const horizontalPadding = 10;
66
77
const props = defineProps({
8-
port: Object,
8+
port: {
9+
type: Object,
10+
required: true
11+
},
912
width: Number,
1013
});
1114

‎src/components/ports/PortLabelCheckbox.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<input type="checkbox" />
44
</div>
55
</template>
6-
<script>
6+
<script lang="ts">
77
export default {
88
props: {
99
port: Object,

‎src/components/ports/PortLabelSelect.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</select>
66
</div>
77
</template>
8-
<script>
8+
<script lang="ts">
99
export default {
1010
props: {
1111
port: Object,

‎src/components/ports/PortLabelVector.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<PortLabel v-else :port="port" :width="width" />
1010
</div>
1111
</template>
12-
<script>
12+
<script lang="ts">
1313
import PortLabel from './PortLabel.vue';
1414
import BlenderStyleInput from './BlenderStyleInput.vue';
1515

‎src/mixins/DiagramElement.js ‎src/mixins/DiagramElement.ts

File renamed without changes.

0 commit comments

Comments
 (0)