8000 Can use device info and connect from any page · joshbrew/graphscript@dfc8dd9 · GitHub
[go: up one dir, main page]

Skip to content

Commit dfc8dd9

Browse files
committed
Can use device info and connect from any page
1 parent 2677653 commit dfc8dd9

File tree

4 files changed

+52
-45
lines changed

4 files changed

+52
-45
lines changed

examples/editing/WebComponent.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ export class WebComponent {
1515
Object.assign(this, properties);
1616
}
1717

18-
connect (properties: GraphNodeProperties, graph?: Graph) {
18+
connect (properties: GraphNodeProperties, graph?: Graph, parent?: GraphNode) {
1919

2020
if (graph) {
21-
const node = graph.add(properties)
21+
const node = graph.add(properties, parent)
2222
if (node) {
2323
this.node = node
2424
this.__props = this.node.__props

examples/editing/editor/node/Node.ts

Lines changed: 42 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -44,11 +44,12 @@ export class Node extends WebComponent {
4444

4545
elements: {
4646
main: HTMLDivElement
47+
} = {
48+
main: document.createElement('div')
4749
}
4850

4951

5052
__onrender(el) {
51-
this.elements = { main: (el.shadowRoot ?? el).shadowRoot.querySelector('#ports') }
5253
if (this.info) this.updatePorts()
5354

5455
// if (!this.editor) this.editor = (this.parentNode.parentNode as any).host
@@ -66,7 +67,6 @@ export class Node extends WebComponent {
6667
<div id="header">
6768
${node.tag}
6869
</div>
69-
<div id="ports"></div>
7070
</div>
7171
`
7272

@@ -78,6 +78,9 @@ export class Node extends WebComponent {
7878
parentNode
7979
})
8080

81+
this.elements.main.id = 'ports'
82+
this.elements.main.innerHTML = `<div id="defaultPorts"><slot></slot></div>`
83+
8184
// if (node.__onrender) {
8285
// const onrender = this.__onrender
8386
// this.__onrender = (el) => {
@@ -88,20 +91,15 @@ export class Node extends WebComponent {
8891

8992

9093
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
9994

10095
this.connect(
10196
this,
10297
this.editor.graph
10398
)
10499

100+
const container = (this.node.shadowRoot).querySelector('div')
101+
container.appendChild(this.elements.main)
102+
this.setNode(node.info)
105103
}
106104

107105
updatePosition (x, y) {
@@ -112,11 +110,17 @@ export class Node extends WebComponent {
112110

113111
setNode (info) {
114112
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
115120
this.updatePorts(info)
116121
}
117122

118123
async updatePorts(info=this.info) {
119-
120124
const notify = (tag, value, type) => {
121125
const got = this.portCategories[type].get(tag)
122126

@@ -127,28 +131,35 @@ export class Node extends WebComponent {
127131
}
128132

129133
const type = 'properties'
130-
Object.keys(info).forEach(tag => {
134+
135+
let n = 0
136+
Object.keys(info).forEach((tag, i) => {
131137
if (tag.slice(0,2) === '__') return // no __ special properties
132138
if (isPrivate(tag)) return // no underscore (pseudo-private) properties
133139

134140
let thisType = type
135141
if (tag === 'default' || tag === '__operator') thisType = 'default'
136-
if (this.portCategories[thisType].has(tag)) {
142+
if (this.portCategories?.[thisType]?.has(tag)) {
137143
notify(tag, this.ports.get(tag), thisType)
138144
return
139145
}
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+
}
141151
})
142152

143153
// Add Port for Each Active ES Component instance (i.e. the internal graph)
144154
const components = info.__children as {[x:string]: GraphNode}
145155
if (components) {
146156
const type = 'children'
147157
Object.keys(components).forEach((tag) => {
148-
if (this.portCategories[type].has(tag)) {
158+
if (this.portCategories?.[type]?.has(tag)) {
149159
notify(tag, this.ports.get(tag), type)
150160
return
151161
}
162+
console.log('Adding Port: ', tag, type, this)
152163
this.addPort({ tag, type, node: this })
153164
})
154165
}
@@ -171,28 +182,37 @@ export class Node extends WebComponent {
171182
deleteEdge(id) {
172183
this.edges.delete(id)
173184
}
174-
175-
addPort (info: PortProps) {
176-
177-
const type = info.type ?? 'default'
178185

186+
#addPortCategory (type: string) {
187+
179188
let ports = this.elements[type]
180189

181190
if (!ports) {
182191
this.elements[type] = ports = document.createElement('div')
183-
ports.id = `${info.type}Ports`
192+
ports.id = `${type}Ports`
184193

185-
const idx = this.portOrder.findIndex(str => str === info.type)
194+
const idx = this.portOrder.findIndex(str => str === type)
186195
const beforeChild = this.elements.main.children[idx]
187196
if (beforeChild) this.elements.main.insertBefore(ports, beforeChild);
188197
else this.elements.main.appendChild(ports)
189198
}
190199

200+
return ports
201+
}
202+
203+
addPort (info: PortProps) {
204+
205+
const type = info.type ?? 'default'
206+
207+
const categoryDiv = this.#addPortCategory(type)
191208
const category = this.portCategories[type] ?? this.portCategories.default // Set in type-specific registry
192209

193-
const port = new Port({ ...info, node: this}, ports)
210+
const port = new Port({ ...info, node: this})
194211
this.ports.set(port.tag, port)
195212
category.set(port.tag, port)
213+
214+
console.log('Appending', port)
215+
categoryDiv.appendChild(port.__props) // Append to port category
196216

197217

198218
return port

examples/editing/editor/node/port/Port.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,17 +39,16 @@ export class Port extends WebComponent {
3939
const tag = port.tag
4040

4141
const html = `
42-
<div>
43-
<div id="input" class="port${isListenerPort(tag) ? ' hidden' : ''}"></div>
44-
${tag}
45-
<div id="output" class="port"></div>
46-
</div>
47-
`
42+
<div id="input" class="port${isListenerPort(tag) ? ' hidden' : ''}"></div>
43+
${tag}
44+
<div id="output" class="port"></div>
45+
`
4846

4947
super({
5048
__element: 'escode-port',
5149
__template: html,
5250
__css: style,
51+
// useShadow: false,
5352
parentNode
5453
})
5554

@@ -60,7 +59,8 @@ export class Port extends WebComponent {
6059

6160
this.connect(
6261
this,
63-
// this.node.editor.graph
62+
this.node.editor.graph,
63+
this.node.node
6464
)
6565
}
6666

examples/editing/editor/node/port/styles.css

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,7 @@
33
}
44

55
:host {
6-
display: block;
7-
pointer-events: none;
8-
--grid-color: rgb(210, 210, 210);
9-
}
10-
11-
:host > div {
6+
pointer-events: none;
127
width: 100%;
138
display: flex;
149
align-items: center;
@@ -40,11 +35,3 @@
4035
border-radius: 10px;
4136
z-index: -1;
4237
}
43-
44-
@media (prefers-color-scheme: dark) {
45-
46-
:host {
47-
--grid-color: rgb(45, 45, 45);
48-
}
49-
50-
}

0 commit comments

Comments
 (0)
0