forked from noflo/noflo-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
388 lines (361 loc) · 17.9 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
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NoFlo Development Environment</title>
<link rel="shortcut icon" href="favicon.ico" />
<!-- Polymer deps -->
<script src="bower_components/platform/platform.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<script src="browser/noflo-noflo-indexeddb/vendor/IndexedDBShim.min.js"></script>
<link rel="import" href="bower_components/the-graph/the-graph-editor/the-graph-editor.html">
<noflo-polymer name="the-graph-editor" inports="graph width height" outports="changed nodeclick edgeclick"></noflo-polymer>
<link rel="import" href="browser/noflo-noflo-polymer/noflo-polymer/noflo-polymer.html">
<link rel="import" href="elements/noflo-context.html">
<noflo-polymer name="noflo-context" inports="editor project graphs component node edge buttons search clear getpanel" outports="project graphs currentgraph component newgraph nodes edges button result toolpanel contextpanel"></noflo-polymer>
<link rel="import" href="elements/noflo-main.html">
<noflo-polymer name="noflo-main" inports="open projects sketches examples graphs components route" outports="newsketch newproject project graph component download"></noflo-polymer>
<link rel="import" href="elements/noflo-runtime.html">
<noflo-polymer name="noflo-runtime" inports="graphs edges panel" outports="runtime"></noflo-polymer>
<link rel="import" href="elements/noflo-search.html">
<noflo-polymer name="noflo-search" inports="buttons results project graphs component panel" outports="menu search"></noflo-polymer>
<link rel="import" href="elements/noflo-library.html">
<noflo-polymer name="noflo-library" inports="buttons editor search" outports="button result"></noflo-polymer>
<link rel="import" href="elements/noflo-account.html">
<link rel="import" href="elements/noflo-project.html">
<noflo-polymer name="noflo-project" inports="project graphs components" outports="newgraph newcomponent"></noflo-polymer>
<link rel="import" href="elements/noflo-component-editor.html">
<noflo-polymer name="noflo-component-editor" inports="component graphs" outports="changed"></noflo-polymer>
<script src="./browser/noflo-ui.js"></script>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/noflo-ui.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
</head>
<body>
<div id="container">
<noflo-main></noflo-main>
<noflo-context></noflo-context>
<noflo-runtime></noflo-runtime>
<noflo-search></noflo-search>
<noflo-library></noflo-library>
<noflo-project></noflo-project>
<main id="workspace">
<noflo-component-editor></noflo-component-editor>
<the-graph-editor></the-graph-editor>
</main>
</div>
<script type="application/fbp" id="PrepareStorage">
EXPORT=OPEN.NAME:NAME
EXPORT=ERRORS.OUT:ERROR
EXPORT=SPLITDB.OUT:DB
Open(indexeddb/Open) ERROR -> IN Errors(core/Merge)
'1' -> VERSION Open
Open DB -> IN SplitDb(core/Split)
# Database upgrade setup
Open UPGRADE -> UPGRADE Upgrade(indexeddb/UpgradeRouter)
# ## Version 1
# Project storage
'projects' -> NAME CreateProjects(indexeddb/CreateStore)
'id' -> KEYPATH CreateProjects
Upgrade VERSIONS -> DB CreateProjects
CreateProjects ERROR -> IN Errors
# Graph storage
'graphs' -> NAME CreateGraphs(indexeddb/CreateStore)
'id' -> KEYPATH CreateGraphs
CreateProjects DB -> DB CreateGraphs
CreateGraphs ERROR -> IN Errors
'project' -> NAME GraphProject(indexeddb/CreateIndex)
'project' -> KEYPATH GraphProject
CreateGraphs STORE -> STORE GraphProject
# Migrate old LocalStorage data
GraphProject STORE -> GRAPHSTORE Migrate(ui/MigrateLocalStorage)
GraphProject ERROR -> IN Errors
# Component storage
'components' -> NAME CreateComponents(indexeddb/CreateStore)
'id' -> KEYPATH CreateComponents
CreateGraphs DB -> DB CreateComponents
CreateComponents ERROR -> IN Errors
'project' -> NAME ComponentProject(indexeddb/CreateIndex)
'project' -> KEYPATH ComponentProject
CreateComponents STORE -> STORE ComponentProject
ComponentProject ERROR -> IN Errors
</script>
<script type="application/fbp" id="LoadData">
EXPORT=READ.DB:DB
EXPORT=MERGESTART.IN:LOAD
EXPORT=GETPROJECTS.ITEM:PROJECTS
EXPORT=GETGRAPHS.ITEM:GRAPHS
EXPORT=GETCOMPONENTS.ITEM:COMPONENTS
EXPORT=READ.COMPLETE:COMPLETE
MergeStart(core/Merge) OUT -> IN SplitStart(core/Split)
'readonly' -> DATA HoldMode(core/Kick) OUT -> MODE Read(indexeddb/BeginTransaction)
SplitStart OUT -> IN HoldMode
'projects,graphs,components' -> DATA HoldStores(core/Kick) OUT -> STORES Read
SplitStart OUT -> IN HoldStores
# Read projects list
'projects' -> DATA HoldProjectStore(core/Kick) OUT -> NAME ProjectStore(indexeddb/GetStore)
SplitStart OUT -> IN HoldProjectStore
Read TRANSACTION -> TRANSACTION ProjectStore
'' -> DATA HoldAllProjects(core/Kick) OUT -> ALL GetProjects(indexeddb/Query)
SplitStart OUT -> IN HoldAllProjects
ProjectStore STORE -> STORE GetProjects
# Read graphs list
'graphs' -> DATA HoldGraphStore(core/Kick) OUT -> NAME GraphStore(indexeddb/GetStore)
SplitStart OUT -> IN HoldGraphStore
ProjectStore TRANSACTION -> TRANSACTION GraphStore
'' -> DATA HoldAllGraphs(core/Kick) OUT -> ALL GetGraphs(indexeddb/Query)
GetProjects ITEM -> IN HoldAllGraphs
GraphStore STORE -> STORE GetGraphs
# Read components list
'components' -> DATA HoldComponentStore(core/Kick) OUT -> NAME ComponentStore(indexeddb/GetStore)
SplitStart OUT -> IN HoldComponentStore
GraphStore TRANSACTION -> TRANSACTION ComponentStore
'' -> DATA HoldAllComponents(core/Kick) OUT -> ALL GetComponents(indexeddb/Query)
GetProjects ITEM -> IN HoldAllComponents
ComponentStore STORE -> STORE GetComponents
</script>
<script type="application/fbp" id="StoreGraph">
EXPORT=MERGE.IN:ITEM
EXPORT=HOLDDB.DATA:DB
EXPORT=PUTGRAPH.KEY:KEY
Merge(core/Merge) OUT -> IN DropExamples(ui/DropExamples)
DropExamples OUT -> IN Disc(core/DisconnectAfterPacket) OUT -> IN SplitGraph(core/Split)
SplitGraph OUT -> IN HoldDb(core/Kick) OUT -> DB Read(indexeddb/BeginTransaction)
'readwrite' -> DATA HoldMode(core/Kick) OUT -> MODE Read
SplitGraph OUT -> IN HoldMode
'graphs' -> DATA HoldStore(core/Kick) OUT -> IN SplitStore(core/Split) OUT -> STORES Read
SplitGraph OUT -> IN HoldStore
SplitStore OUT -> NAME GraphStore(indexeddb/GetStore)
Read TRANSACTION -> TRANSACTION GraphStore STORE -> STORE PutGraph(indexeddb/Put)
'project' -> KEY GetProject(objects/GetObjectKey)
SplitGraph OUT -> IN GetProject OBJECT -> IN MergeStorable(core/Merge) OUT -> VALUE PutGraph
GetProject OUT -> IN DropProject(core/Drop)
'' -> DATA HoldProject(core/Kick) OUT -> VALUE SetProject(objects/SetPropertyValue)
SplitGraph OUT -> IN HoldProject
'project' -> PROPERTY SetProject
GetProject MISSED -> IN SetProject OUT -> IN MergeStorable
</script>
<script type="application/fbp" id="LoadProject">
EXPORT=HOLDDB.DATA:DB
EXPORT=SPLITID.IN:ID
EXPORT=GET.ITEM:PROJECT
SplitId(core/Split) OUT -> IN HoldDb(core/Kick) OUT -> DB Read(indexeddb/BeginTransaction)
'readonly' -> DATA HoldMode(core/Kick) OUT -> MODE Read
SplitId OUT -> IN HoldMode
'projects' -> DATA HoldStore(core/Kick) OUT -> IN SplitStore(core/Split) OUT -> STORES Read
SplitId OUT -> IN HoldStore
SplitStore OUT -> NAME Store(indexeddb/GetStore)
Read TRANSACTION -> TRANSACTION Store STORE -> STORE Get(indexeddb/Get)
SplitId OUT -> KEY Get
</script>
<script type="application/fbp" id="PrepareProject">
EXPORT=GENERATEID.IN:IN
EXPORT=STOREGRAPH.DB:DB
EXPORT=SETMAIN.OUT:OUT
GenerateId(local/GenerateId) OUT -> IN Split(core/Split)
'id' -> KEY GetId(objects/GetObjectKey)
'project' -> PROPERTY SetProject(objects/SetPropertyValue)
GetId OUT -> VALUE SetProject
Split OUT -> IN GetId
'name' -> KEY GetName(objects/GetObjectKey)
'name' -> PROPERTY SetName(objects/SetPropertyValue)
GetName OUT -> VALUE SetName
Split OUT -> IN GetName
'type' -> KEY GetType(objects/GetObjectKey)
'type' -> PROPERTY SetType(objects/SetPropertyValue)
GetType OUT -> VALUE SetType
Split OUT -> IN GetType
Split OUT -> START InitializeGraph(objects/CreateObject)
InitializeGraph OUT -> IN SetName OUT -> IN SetType OUT -> DETAILS ToGraph(ui/CreateGraph)
'toJSON' -> METHOD Convert(objects/CallMethod)
ToGraph OUT -> IN Convert OUT -> IN SetProject OUT -> IN GenGraphId(local/GenerateId)
GenGraphId OUT -> ITEM StoreGraph(local/StoreGraph)
'main' -> PROPERTY SetMain(objects/SetPropertyValue)
StoreGraph KEY -> IN SplitGraphId(core/Split) OUT -> VALUE SetMain
Split OUT -> DATA HoldProject(core/Kick) OUT -> IN SetMain
SplitGraphId OUT -> IN HoldProject
</script>
<script type="application/fbp" id="StoreProject">
EXPORT=DISC.IN:ITEM
EXPORT=HOLDDB.DATA:DB
EXPORT=PUTPROJECT.KEY:KEY
Disc(core/DisconnectAfterPacket) OUT -> IN Split(core/Split)
Split OUT -> IN HoldDb(core/Kick) OUT -> DB Read(indexeddb/BeginTransaction)
'readwrite' -> DATA HoldMode(core/Kick) OUT -> MODE Read
Split OUT -> IN HoldMode
'projects' -> DATA HoldStore(core/Kick) OUT -> IN SplitStore(core/Split) OUT -> STORES Read
Split OUT -> IN HoldStore
SplitStore OUT -> NAME Store(indexeddb/GetStore)
Read TRANSACTION -> TRANSACTION Store STORE -> STORE PutProject(indexeddb/Put)
Split OUT -> VALUE PutProject
</script>
<script type="application/fbp" id="StoreComponent">
EXPORT=MERGE.IN:ITEM
EXPORT=HOLDDB.DATA:DB
EXPORT=PUT.KEY:KEY
Merge(core/Merge) OUT -> IN Disc(core/DisconnectAfterPacket) OUT -> IN Split(core/Split)
Split OUT -> IN HoldDb(core/Kick) OUT -> DB Read(indexeddb/BeginTransaction)
'readwrite' -> DATA HoldMode(core/Kick) OUT -> MODE Read
Split OUT -> IN HoldMode
'components' -> DATA HoldStore(core/Kick) OUT -> IN SplitStore(core/Split) OUT -> STORES Read
Split OUT -> IN HoldStore
SplitStore OUT -> NAME Store(indexeddb/GetStore)
Read TRANSACTION -> TRANSACTION Store STORE -> STORE Put(indexeddb/Put)
Split OUT -> VALUE Put
</script>
<script type="application/fbp" id="LoadExample">
EXPORT=SPLITGIST.IN:GIST
EXPORT=PARSEEXAMPLE.OUT:GRAPH
EXPORT=ERRORS.OUT:ERROR
'https://api.github.com/gists' -> STRING GistPrefix(strings/SendString)
'/' -> DELIMITER CreateUrl(strings/CompileString)
SplitGist(core/Split) OUT -> IN GistPrefix
GistPrefix OUT -> IN CreateUrl
SplitGist OUT -> IN CreateUrl
CreateUrl OUT -> URL GetGist(ajax/GetJsonP)
'data' -> KEY GetData(objects/GetObjectKey)
'files' -> KEY GetFiles(objects/GetObjectKey)
'noflo.json' -> KEY GetFile(objects/GetObjectKey)
'content' -> KEY GetFileContent(objects/GetObjectKey)
GetGist OUT -> IN GetData
GetData OUT -> IN GetFiles OUT -> IN GetFile OUT -> IN GetFileContent
GetFiles MISSED -> IN Errors
GetFileContent OUT -> IN ParseExample(strings/ParseJson)
</script>
<script type="application/fbp" id="GenerateId">
EXPORT=SPLITITEM.IN:IN
EXPORT=SETID.OUT:OUT
'id' -> PROPERTY SetId(objects/SetPropertyValue)
SplitItem(core/Split) OUT -> START Generate(ui/GenerateId)
Generate OUT -> VALUE SetId
SplitItem OUT -> IN SetId
</script>
<script type="application/fbp" id="ProjectContext">
EXPORT=CONTEXT.PROJECT:PROJECT
EXPORT=CONTEXT.GRAPHS:GRAPHS
EXPORT=CONTEXT.COMPONENT:COMPONENT
EXPORT=CONTEXT.CLEAR:CLEAR
EXPORT=GRAPHEDITOR.CHANGED:GRAPHCHANGED
EXPORT=COMPONENTEDITOR.CHANGED:COMPONENTCHANGED
EXPORT=MERGENEWGRAPH.OUT:NEWGRAPH
EXPORT=PROJECT.NEWCOMPONENT:NEWCOMPONENT
EXPORT=LOADPROJECTDATA.DB:DB
'noflo-context' -> SELECTOR Context(polymer/noflo-context)
# Runtime handling
'noflo-runtime' -> SELECTOR Runtime(polymer/noflo-runtime)
Context GRAPHS -> GRAPHS Runtime
Context EDGES -> EDGES Runtime
# Search handling
'noflo-search' -> SELECTOR Search(polymer/noflo-search)
Context GRAPHS -> GRAPHS Search
Context COMPONENT -> COMPONENT Search
Context PROJECT -> PROJECT Search
# Panel handling
'' -> GETPANEL Context TOOLPANEL -> PANEL Runtime
Context CONTEXTPANEL -> PANEL Search
# Library handling
'noflo-library' -> SELECTOR Library(polymer/noflo-library)
# Main menu
Search MENU -> BUTTONS Context BUTTON -> BUTTONS Search
Search MENU -> BUTTONS Library BUTTON -> BUTTONS Search
# UI searching
Search SEARCH -> SEARCH Library RESULT -> RESULTS Search
Search SEARCH -> SEARCH Context RESULT -> RESULTS Search
# Project menu
'noflo-project' -> SELECTOR Project(polymer/noflo-project)
Context PROJECT -> PROJECT Project
Project NEWGRAPH -> IN MergeNewGraph(core/Merge)
Context NEWGRAPH -> IN MergeNewGraph
# Prepare graph editor
Context CURRENTGRAPH -> CURRENTGRAPH GraphEditor(local/GraphEditor)
Runtime RUNTIME -> RUNTIME GraphEditor
Context NEWGRAPH -> NEWGRAPH GraphEditor
Context PROJECT -> PROJECT GraphEditor
GraphEditor NODECLICK -> NODE Context
GraphEditor EDGECLICK -> EDGE Context
GraphEditor EDITOR -> EDITOR Library
GraphEditor EDITOR -> EDITOR Context
# Prepare component editor
'noflo-component-editor' -> SELECTOR ComponentEditor(polymer/noflo-component-editor)
Context COMPONENT -> COMPONENT ComponentEditor
Context GRAPHS -> GRAPHS ComponentEditor
</script>
<script type="application/fbp" id="ComponentEditor">
EXPORT=SPLITCOMPONENT.IN:COMPONENT
EXPORT=CREATEEDITOR.CONTAINER:WORKSPACE
EXPORT=EDITOR.CHANGED:CHANGED
'noflo-component-editor' -> STRING Send(strings/SendString) OUT -> TAGNAME CreateEditor(dom/CreateElement)
CreateEditor ELEMENT -> IN SplitEditor(core/Split) OUT -> ELEMENT Editor(polymer/noflo-component-editor)
SplitComponent OUT -> STRING HoldComponent(strings/SendString) OUT -> COMPONENT Editor
SplitComponent(core/Split) OUT -> IN Send
SplitEditor OUT -> IN HoldComponent
</script>
<script type="application/fbp" id="GraphEditor">
EXPORT=LOADEDITOR.CONTAINER:WORKSPACE
EXPORT=CONNECTRUNTIME.RUNTIME:RUNTIME
EXPORT=CONNECTRUNTIME.PROJECT:PROJECT
EXPORT=CONNECTRUNTIME.NEWGRAPH:NEWGRAPH
EXPORT=GRAPHEDITOR.GRAPH:CURRENTGRAPH
EXPORT=SPLITEDITOR.OUT:EDITOR
EXPORT=GRAPHEDITOR.NODECLICK:NODECLICK
EXPORT=GRAPHEDITOR.EDGECLICK:EDGECLICK
EXPORT=CONVERT.OUT:CHANGED
'the-graph-editor' -> SELECTOR GraphEditor(polymer/the-graph-editor)
GraphEditor ELEMENT -> IN Async(core/RepeatAsync) OUT -> IN SplitEditor(core/Split)
'' -> START ListenWindow(interaction/ListenResize)
ListenWindow WIDTH -> WIDTH GraphEditor
ListenWindow HEIGHT -> HEIGHT GraphEditor
SplitEditor OUT -> EDITOR ConnectRuntime(ui/ConnectRuntime)
'toJSON' -> METHOD Convert(objects/CallMethod)
GraphEditor CHANGED -> IN Convert
</script>
<script type="application/fbp" id="main">
'noflo-ui' -> NAME Storage(local/PrepareStorage)
# Prepare the main view
'noflo-main' -> SELECTOR Main(polymer/noflo-main)
Storage DB -> DB LoadData(local/LoadData)
Storage ERROR -> IN ShowErrors(core/Output)
'' -> LOAD LoadData
LoadData PROJECTS -> PROJECTS Main
LoadData GRAPHS -> GRAPHS Main
LoadData COMPONENTS -> COMPONENTS Main
Storage DB -> DB StoreNewGraph(local/StoreGraph)
Main NEWSKETCH -> IN NewGraphId(local/GenerateId) OUT -> ITEM StoreNewGraph
Storage DB -> DB StoreNewProject(local/StoreProject)
Storage DB -> DB PrepareProject(local/PrepareProject)
Main NEWPROJECT -> IN PrepareProject OUT -> ITEM StoreNewProject
# Prepare workspace
#'#workspace' -> SELECTOR GetWorkspace(dom/GetElement) ELEMENT -> IN Workspace(core/Split)
#Workspace OUT -> WORKSPACE Context
# Prepare the context
Router(ui/Router) ROUTE -> CLEAR Context(local/ProjectContext)
Router ROUTE -> ROUTE Main
Main PROJECT -> PROJECT Context
Main GRAPH -> GRAPHS Context
Main COMPONENT -> COMPONENT Context
Storage DB -> DB StoreComponent(local/StoreComponent)
Context COMPONENTCHANGED -> IN SplitChangedComponent(core/Split) OUT -> ITEM StoreComponent
SplitChangedComponent OUT -> COMPONENTS Main
Storage DB -> DB StoreGraph(local/StoreGraph)
'id' -> KEY CheckGraphID(objects/GetObjectKey)
Context GRAPHCHANGED -> IN Check(ui/IgnoreExamples) OUT -> IN SplitChangedGraph(core/Split) OUT -> ITEM StoreGraph
SplitChangedGraph OUT -> GRAPHS Main
Context NEWGRAPH -> IN NewProjectGraphId(local/GenerateId) OUT -> ITEM StoreGraph
Context NEWCOMPONENT -> IN NewProjectComponentId(local/GenerateId) OUT -> ITEM StoreComponent
Main DOWNLOAD -> IN Show(core/Output)
# Example handling
Router EXAMPLE -> GIST LoadExample(local/LoadExample)
LoadExample GRAPH -> GRAPHS Context
# Show/hide main widget
'true' -> DATA ShowMain(core/Kick) OUT -> OPEN Main
'false' -> DATA HideMain(core/Kick) OUT -> OPEN Main
Router MAIN -> IN ShowMain
Router ROUTE -> IN HideMain
# Routing
LoadData COMPLETE -> START ListenHash(interaction/ListenHash)
ListenHash INITIAL -> URL Router
ListenHash CHANGE -> URL Router
</script>
<script src="app/noflo.js"></script>
</body>
</html>