-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
223 lines (207 loc) · 15 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
<!-- Reload Plugin reloadSandbox();-->
<!-- https://miro.com/oauth/authorize/?response_type=code&client_id=3074457364714057684&redirect_uri=%2Fconfirm-app-install%2F -->
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://miro.com/app/static/sdk.1.1.js"></script>
<script>
let activatedExtension = false;
let inspectedObjects = {};
let loadCount = 0;
let checkLinesTo = true;
let checkLinesFrom = true;
let propagateTo = false;
let propagateFrom = false;
let getLinesTo = async function(lines) {
loadCount++;
let objects = [];
for (const line in lines) {
let object = await miro.board.widgets.get({ id: lines[line].startWidgetId });
if (typeof inspectedObjects[object[0].id] == "undefined") {
inspectedObjects[object[0].id] = { "checked": true };
objects.push(object[0])
}
}
highlightLinesWorker(objects);
loadCount--;
}
let getLinesFrom = async function(lines) {
loadCount++;
let objects = [];
for (const line in lines) {
let object = await miro.board.widgets.get({ id: lines[line].endWidgetId });
if (typeof inspectedObjects[object[0].id] == "undefined") {
inspectedObjects[object[0].id] = { "checked": true };
objects.push(object[0])
}
}
highlightLinesWorker(objects);
loadCount--;
}
let highlightLinesWorker = async function(selectedObjects) {
miro.board.ui.openBottomPanel("loader.html", { width: 120 });
let linesTo = [];
let linesFrom = [];
if (selectedObjects.length > 0) {
for (const object in selectedObjects) {
if (selectedObjects[object].type == 'IMAGE' || selectedObjects[object].type == 'STICKER') {
let objectId = selectedObjects[object].id;
let linesToTemp = await miro.board.widgets.get({ type: 'line', endWidgetId: objectId });
let linesFromTemp = await miro.board.widgets.get({ type: 'line', startWidgetId: objectId });
linesToTemp.forEach(line => {
linesTo.push(line)
})
linesFromTemp.forEach(line => {
linesFrom.push(line)
})
}
if (linesFrom.length > 0 && checkLinesFrom) {
for (const line in linesFrom) {
linesFrom[line].clientVisible = true
linesFrom[line].style = { 'lineColor': '#8fd14f', 'lineThickness': 5 }
}
if (propagateFrom) {
getLinesFrom(linesFrom);
}
} else {
}
if (linesTo.length > 0 && checkLinesTo) {
for (const line in linesTo) {
linesTo[line].clientVisible = true
linesTo[line].style = { 'lineColor': '#f24726', 'lineThickness': 5 }
}
if (propagateTo) {
getLinesTo(linesTo);
}
} else {
}
}
} else {
}
if (loadCount == 0) {
inspectedObjects = {};
const allLines = linesTo.concat(linesFrom);
if ((linesTo.length > 0 && checkLinesTo) || (linesFrom.length > 0 && checkLinesFrom)) {
await miro.board.widgets.bringForward(allLines)
await miro.board.widgets.update(allLines)
}
miro.board.ui.closeBottomPanel()
}
}
let highlightLines = async function() {
//console.log("Connections are getting highlighted, please wait...");
let selectedObjects = await miro.board.selection.get()
selectedObjects.forEach(object => {
inspectedObjects[object.id] = { "checked": true };
})
highlightLinesWorker(selectedObjects);
}
let resetLines = async function() {
//console.log("Highlighting will be resetted, please wait...");
miro.board.ui.openBottomPanel("loader.html", { width: 120 });
let lines = await miro.board.widgets.get({ type: 'line', clientVisible: true });
lines.forEach(line => {
line.style = { 'lineColor': '#808080', 'lineThickness': 1 }
line.clientVisible = false
})
miro.board.widgets.sendBackward(lines)
miro.board.widgets.update(lines)
miro.board.ui.closeBottomPanel()
}
let goToObjectFrom = async function(){
let selectedWidgets = await miro.board.selection.get()
let sticker = selectedWidgets[0]
miro.board.viewport.zoomToObject(selectedWidgets[0].startWidgetId)
}
let goToObjectTo = async function(){
let selectedWidgets = await miro.board.selection.get()
let sticker = selectedWidgets[0]
miro.board.viewport.zoomToObject(selectedWidgets[0].endWidgetId)
}
let initFunctions = function() {
miro.initialize({
extensionPoints: {
getWidgetMenuItems: (widgets) => {
return Promise.resolve([{
tooltip: 'trace direct connections',
svgIcon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="24" height="24" fill="white"/> <path d="M7 3.5C7 4.88071 5.88071 6 4.5 6C3.11929 6 2 4.88071 2 3.5C2 2.11929 3.11929 1 4.5 1C5.88071 1 7 2.11929 7 3.5Z" fill="#050038"/> <path d="M13 11C13 12.6569 11.6569 14 10 14C8.34315 14 7 12.6569 7 11C7 9.34315 8.34315 8 10 8C11.6569 8 13 9.34315 13 11Z" fill="#050038"/> <path d="M21 5.5C21 6.88071 19.8807 8 18.5 8C17.1193 8 16 6.88071 16 5.5C16 4.11929 17.1193 3 18.5 3C19.8807 3 21 4.11929 21 5.5Z" fill="#050038"/> <path d="M22 15.5C22 16.8807 20.8807 18 19.5 18C18.1193 18 17 16.8807 17 15.5C17 14.1193 18.1193 13 19.5 13C20.8807 13 22 14.1193 22 15.5Z" fill="#050038"/> <path d="M15 20.5C15 21.8807 13.8807 23 12.5 23C11.1193 23 10 21.8807 10 20.5C10 19.1193 11.1193 18 12.5 18C13.8807 18 15 19.1193 15 20.5Z" fill="#050038"/> <path d="M7 17.5C7 18.8807 5.88071 20 4.5 20C3.11929 20 2 18.8807 2 17.5C2 16.1193 3.11929 15 4.5 15C5.88071 15 7 16.1193 7 17.5Z" fill="#050038"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M10 11L4 4L4.75926 3.34921L10.7593 10.3492L10 11Z" fill="#050038"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M10 11L18 5L18.6 5.8L10.6 11.8L10 11Z" fill="#050038"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M11 11L19 15L18.5528 15.8944L10.5528 11.8944L11 11Z" fill="#050038"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M10 11L13 20L12.0513 20.3162L9.05132 11.3162L10 11Z" fill="#050038"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M10 11L4 19L3.2 18.4L9.2 10.4L10 11Z" fill="#050038"/> <circle cx="10" cy="11" r="2.25" fill="white" stroke="#050038" stroke-width="1.5"/> </svg>',
onClick: (widgets) => {
checkLinesFrom = true;
checkLinesTo = true;
propagateTo = false;
propagateFrom = false;
highlightLines();
}
}, {
tooltip: 'trace up',
svgIcon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="24" height="24" fill="white"/> <path d="M7 3.5C7 4.88071 5.88071 6 4.5 6C3.11929 6 2 4.88071 2 3.5C2 2.11929 3.11929 1 4.5 1C5.88071 1 7 2.11929 7 3.5Z" fill="#050038"/> <path d="M21 5.5C21 6.88071 19.8807 8 18.5 8C17.1193 8 16 6.88071 16 5.5C16 4.11929 17.1193 3 18.5 3C19.8807 3 21 4.11929 21 5.5Z" fill="#050038"/> <path d="M15 20.5C15 21.8807 13.8807 23 12.5 23C11.1193 23 10 21.8807 10 20.5C10 19.1193 11.1193 18 12.5 18C13.8807 18 15 19.1193 15 20.5Z" fill="#050038"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M10 11L4 4L4.75926 3.34921L10.7593 10.3492L10 11Z" fill="#050038"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M10 11L18 5L18.6 5.8L10.6 11.8L10 11Z" fill="#050038"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M10 11L13 20L12.0513 20.3162L9.05132 11.3162L10 11Z" fill="#050038"/> <circle cx="12.2" cy="20.2" r="2.25" fill="white" stroke="#050038" stroke-width="1.5"/> <circle cx="10" cy="11" r="2.5" fill="#050038"/> </svg>',
onClick: (widgets) => {
checkLinesFrom = false;
checkLinesTo = true;
propagateTo = true;
propagateFrom = false;
highlightLines();
}
}, {
tooltip: 'trace down',
svgIcon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="24" height="24" fill="white"/> <path d="M7 3.5C7 4.88071 5.88071 6 4.5 6C3.11929 6 2 4.88071 2 3.5C2 2.11929 3.11929 1 4.5 1C5.88071 1 7 2.11929 7 3.5Z" fill="#050038"/> <path d="M22 15.5C22 16.8807 20.8807 18 19.5 18C18.1193 18 17 16.8807 17 15.5C17 14.1193 18.1193 13 19.5 13C20.8807 13 22 14.1193 22 15.5Z" fill="#050038"/> <path d="M15 20.5C15 21.8807 13.8807 23 12.5 23C11.1193 23 10 21.8807 10 20.5C10 19.1193 11.1193 18 12.5 18C13.8807 18 15 19.1193 15 20.5Z" fill="#050038"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M10 11L4 4L4.75926 3.34921L10.7593 10.3492L10 11Z" fill="#050038"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M11 11L19 15L18.5528 15.8944L10.5528 11.8944L11 11Z" fill="#050038"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M10 11L13 20L12.0513 20.3162L9.05132 11.3162L10 11Z" fill="#050038"/> <circle cx="4.5" cy="3.5" r="2.5" fill="#C4C4C4"/> <circle cx="10" cy="11" r="2.5" fill="#050038"/> <circle cx="5" cy="4" r="2.25" fill="white" stroke="#050038" stroke-width="1.5"/> </svg> ',
onClick: (widgets) => {
checkLinesFrom = true;
checkLinesTo = false;
propagateTo = false;
propagateFrom = true;
highlightLines();
}
}, {
tooltip: 'hide all lines',
svgIcon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7 3.5C7 4.88071 5.88071 6 4.5 6C3.11929 6 2 4.88071 2 3.5C2 2.11929 3.11929 1 4.5 1C5.88071 1 7 2.11929 7 3.5Z" fill="#050038"/> <path d="M21 5.5C21 6.88071 19.8807 8 18.5 8C17.1193 8 16 6.88071 16 5.5C16 4.11929 17.1193 3 18.5 3C19.8807 3 21 4.11929 21 5.5Z" fill="#050038"/> <path d="M22 15.5C22 16.8807 20.8807 18 19.5 18C18.1193 18 17 16.8807 17 15.5C17 14.1193 18.1193 13 19.5 13C20.8807 13 22 14.1193 22 15.5Z" fill="#050038"/> <path d="M15 20.5C15 21.8807 13.8807 23 12.5 23C11.1193 23 10 21.8807 10 20.5C10 19.1193 11.1193 18 12.5 18C13.8807 18 15 19.1193 15 20.5Z" fill="#050038"/> <path d="M7 17.5C7 18.8807 5.88071 20 4.5 20C3.11929 20 2 18.8807 2 17.5C2 16.1193 3.11929 15 4.5 15C5.88071 15 7 16.1193 7 17.5Z" fill="#050038"/> <circle cx="10" cy="11" r="2.5" fill="#050038"/> </svg>',
onClick: () => {
resetLines();
}
},
{
tooltip: 'move up to connected object',
svgIcon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16 8L6.5 17.5" stroke="#050038"/> <path d="M19.5 7C19.5 8.38071 18.3807 9.5 17 9.5C15.6193 9.5 14.5 8.38071 14.5 7C14.5 5.61929 15.6193 4.5 17 4.5C18.3807 4.5 19.5 5.61929 19.5 7Z" fill="#050038"/> <rect x="11.5" y="1.5" width="11" height="11" stroke="#050038" stroke-dasharray="2 2"/> <path d="M6.39999 14V17.5355H9.93553" stroke="#050038"/> <circle cx="4" cy="20" r="2.25" fill="white" stroke="#050038" stroke-width="1.5"/></svg>', onClick: () => {
goToObjectFrom();
}
},{
tooltip: 'move down to connected object',
svgIcon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 6L8.5 15.5" stroke="#050038"/> <path d="M21.5 5C21.5 6.38071 20.3807 7.5 19 7.5C17.6193 7.5 16.5 6.38071 16.5 5C16.5 3.61929 17.6193 2.5 19 2.5C20.3807 2.5 21.5 3.61929 21.5 5Z" fill="#050038"/> <circle cx="19" cy="5" r="2.25" fill="white" stroke="#050038" stroke-width="1.5"/> <path d="M9 17.5C9 18.8807 7.88071 20 6.5 20C5.11929 20 4 18.8807 4 17.5C4 16.1193 5.11929 15 6.5 15C7.88071 15 9 16.1193 9 17.5Z" fill="#050038"/> <rect x="2.5" y="10.5" width="11" height="11" stroke="#050038" stroke-dasharray="2 2"/> <path d="M8.39999 12V15.5355H11.9355" stroke="#050038"/></svg>', onClick: () => {
goToObjectTo();
}
}])
}
}
})
}
let initPlugin = function() {
miro.initialize({
extensionPoints: {
bottomBar: {
title: 'Enable Tracy',
svgIcon: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M2.5 4.5L12 7L21.5 4.5" stroke="#050038"/> <path d="M12 7L13.5 20.5" stroke="#050038"/> <path d="M5 4.5C5 5.88071 3.88071 7 2.5 7C1.11929 7 0 5.88071 0 4.5C0 3.11929 1.11929 2 2.5 2C3.88071 2 5 3.11929 5 4.5Z" fill="#050038"/> <path d="M24 4.5C24 5.88071 22.8807 7 21.5 7C20.1193 7 19 5.88071 19 4.5C19 3.11929 20.1193 2 21.5 2C22.8807 2 24 3.11929 24 4.5Z" fill="#050038"/> <path d="M16 20.5C16 21.8807 14.8807 23 13.5 23C12.1193 23 11 21.8807 11 20.5C11 19.1193 12.1193 18 13.5 18C14.8807 18 16 19.1193 16 20.5Z" fill="#050038"/> <circle cx="12" cy="7" r="2.25" fill="white" stroke="#050038" stroke-width="1.5"/> </svg>',
onClick: () => {
if(!activatedExtension){
var r = confirm("This is an experimental extension for hiding and highlighting paths. Only proceed if you know what this is. Otherwise THIS MIGHT MESS UP YOUR BOARD. More info https://github.com/ardoq/tracy_for_miro");
if (r == true) {
initFunctions();
activatedExtension = true;
}
}else{
alert("You already activated the extension. Select one or more elements to access the functions. If nothing happens, make sure you've activated the extension for your personal Miro account. More info https://github.com/ardoq/tracy_for_miro")
}
}
}
}
})
}
miro.onReady(() => {
initPlugin();
})
</script>
</head>
<body>
<script type="text/javascript">
</script>
</body>
</html>