@@ -44,11 +44,12 @@ export class Node extends WebComponent {
44
44
45
45
elements : {
46
46
main : HTMLDivElement
47
+ } = {
48
+ main : document . createElement ( 'div' )
47
49
}
48
50
49
51
50
52
__onrender ( el ) {
51
- this . elements = { main : ( el . shadowRoot ?? el ) . shadowRoot . querySelector ( '#ports' ) }
52
53
if ( this . info ) this . updatePorts ( )
53
54
54
55
// if (!this.editor) this.editor = (this.parentNode.parentNode as any).host
@@ -66,7 +67,6 @@ export class Node extends WebComponent {
66
67
<div id="header">
67
68
${ node . tag }
68
69
</div>
69
- <div id="ports"></div>
70
70
</div>
71
71
`
72
72
@@ -78,6 +78,9 @@ export class Node extends WebComponent {
78
78
parentNode
79
79
} )
80
80
81
+ this . elements . main . id = 'ports'
82
+ this . elements . main . innerHTML = `<div id="defaultPorts"><slot></slot></div>`
83
+
81
84
// if (node.__onrender) {
82
85
// const onrender = this.__onrender
83
86
// this.__onrender = (el) => {
@@ -88,20 +91,15 @@ export class Node extends WebComponent {
88
91
89
92
90
93
this . editor = node . editor
91
- this . info = node . info
92
- if ( ! this . info . __escode ) this . info . __escode = { x : 0 , y :0 } // Save ESCode Properties
93
-
94
- this . tag = this . info . __node . tag
95
- this . id = this . info . __node . unique
96
-
97
- this . info . __escode . x = this . x = node . x ?? this . info . __escode . x ?? 0
98
- this . info . __escode . y = this . y = node . y ?? this . info . __escode . y ?? 0
99
94
100
95
this . connect (
101
96
this ,
102
97
this . editor . graph
103
98
)
104
99
100
+ const container = ( this . node . shadowRoot ) . querySelector ( 'div' )
101
+ container . appendChild ( this . elements . main )
102
+ this . setNode ( node . info )
105
103
}
106
104
107
105
updatePosition ( x , y ) {
@@ -112,11 +110,17 @@ export class Node extends WebComponent {
112
110
113
111
setNode ( info ) {
114
112
this . info = info
113
+ if ( ! this . info . __escode ) this . info . __escode = { x : 0 , y :0 } // Save ESCode Properties
114
+
115
+ this . tag = this . info . __node . ta
A3D4
g
116
+ this . id = this . info . __node . unique
117
+
118
+ this . info . __escode . x = this . x = this . info . __escode . x ?? 0
119
+ this . info . __escode . y = this . y = this . info . __escode . y ?? 0
115
120
this . updatePorts ( info )
116
121
}
117
122
118
123
async updatePorts ( info = this . info ) {
119
-
120
124
const notify = ( tag , value , type ) => {
121
125
const got = this . portCategories [ type ] . get ( tag )
122
126
@@ -127,28 +131,35 @@ export class Node extends WebComponent {
127
131
}
128
132
129
133
const type = 'properties'
130
- Object . keys ( info ) . forEach ( tag => {
134
+
135
+ let n = 0
136
+ Object . keys ( info ) . forEach ( ( tag , i ) => {
131
137
if ( tag . slice ( 0 , 2 ) === '__' ) return // no __ special properties
132
138
if ( isPrivate ( tag ) ) return // no underscore (pseudo-private) properties
133
139
134
140
let thisType = type
135
141
if ( tag === 'default' || tag === '__operator' ) thisType = 'default'
136
- if ( this . portCategories [ thisType ] . has ( tag ) ) {
142
+ if ( this . portCategories ?. [ thisType ] ? .has ( tag ) ) {
137
143
notify ( tag , this . ports . get ( tag ) , thisType )
138
144
return
139
145
}
140
- this . addPort ( { tag, node : this , type : thisType as 'properties' || 'default' } )
146
+ console . log ( 'Trying to add' , tag , i )
147
+ if ( n < 20 ) {
148
+ this . addPort ( { tag, node : this , type : thisType as 'properties' || 'default' } )
149
+ n ++
150
+ }
141
151
} )
142
152
143
153
// Add Port for Each Active ES Component instance (i.e. the internal graph)
144
154
const components = info . __children as { [ x :string ] : GraphNode }
145
155
if ( components ) {
146
156
const type = 'children'
147
157
Object . keys ( components ) . forEach ( ( tag ) => {
148
- if ( this . portCategories [ type ] . has ( tag ) ) {
158
+ if ( this . portCategories ?. [ type ] ? .has ( tag ) ) {
149
159
notify ( tag , this . ports . get ( tag ) , type )
150
160
return
151
161
}
162
+ console . log ( 'Adding Port: ' , tag , type , this )
152
163
this . addPort ( { tag, type, node : this } )
153
164
} )
154
165
}
@@ -171,28 +182,37 @@ export class Node extends WebComponent {
171
182
deleteEdge ( id ) {
172
183
this . edges . delete ( id )
173
184
}
174
-
175
- addPort ( info : PortProps ) {
176
-
177
- const type = info . type ?? 'default'
178
185
186
+ #addPortCategory ( type : string ) {
187
+
179
188
let ports = this . elements [ type ]
180
189
181
190
if ( ! ports ) {
182
191
this . elements [ type ] = ports = document . createElement ( 'div' )
183
- ports . id = `${ info . type } Ports`
192
+ ports . id = `${ type } Ports`
184
193
185
- const idx = this . portOrder . findIndex ( str => str === info . type )
194
+ const idx = this . portOrder . findIndex ( str => str === type )
186
195
const beforeChild = this . elements . main . children [ idx ]
187
196
if ( beforeChild ) this . elements . main . insertBefore ( ports , beforeChild ) ;
188
197
else this . elements . main . appendChild ( ports )
189
198
}
190
199
200
+ return ports
201
+ }
202
+
203
+ addPort ( info : PortProps ) {
204
+
205
+ const type = info . type ?? 'default'
206
+
207
+ const categoryDiv = this . #addPortCategory( type )
191
208
const category = this . portCategories [ type ] ?? this . portCategories . default // Set in type-specific registry
192
209
193
- const port = new Port ( { ...info , node : this } , ports )
210
+ const port = new Port ( { ...info , node : this } )
194
211
this . ports . set ( port . tag , port )
195
212
category . set ( port . tag , port )
213
+
214
+ console . log ( 'Appending' , port )
215
+ categoryDiv . appendChild ( port . __props ) // Append to port category
196
216
197
217
198
218
return port
0 commit comments