Skip to content

Commit 75c0efb

Browse files
TemplarianTemplarian
committed
node progress
1 parent 9c8347d commit 75c0efb

16 files changed

Lines changed: 263 additions & 82 deletions

File tree

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"remarkable": "^2.0.1"
2525
},
2626
"devDependencies": {
27-
"@pictogrammers/element": "0.0.74",
27+
"@pictogrammers/element": "0.0.76",
2828
"@pictogrammers/element-esbuild": "^0.0.20",
2929
"@pictogrammers/element-jest": "^0.1.10",
3030
"@pictogrammers/fnt": "^1.2.0",

‎src/components/pg/node/__examples__/basic/basic.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@ export default class XPgNodeBasic extends HTMLElement {
1212
@Part() $node: PgNode;
1313

1414
connectedCallback() {
15+
this.$node.fields = [{
16+
label: 'Name',
17+
value: 'foo',
18+
name: 'name',
19+
type: 'text',
20+
}];
1521
this.$node.addEventListener('change', this.#handleChange.bind(this));
1622
this.$node.addEventListener('input', this.#handleInput.bind(this));
1723
}

‎src/components/pg/node/node.css‎

Lines changed: 16 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,24 @@
11
:host {
2-
display: block;
3-
font-family: var(--pg-font-family, system-ui);
2+
display: contents;
43
}
54

6-
[part=input] {
7-
border: 1px solid var(--pg-input-text-border-color, #453C4F);
8-
border-radius: 0.125rem;
9-
padding-inline-start: var(--pg-input-text-padding-inline-start, var(--pg-input-text-padding-inline, 0.5rem));
10-
padding-inline-end: var(--pg-input-text-padding-inline-end, var(--pg-input-text-padding-inline, 0.5rem));
11-
padding-block-start: var(--pg-input-text-padding-block-start, var(--pg-input-text-padding-block, 0.25rem));
12-
padding-block-end: var(--pg-input-text-padding-block-start, var(--pg-input-text-padding-block, 0.25rem));
13-
font-family: var(--pg-input-text-font-family, var(--pg-font-family));
14-
font-size: 1rem;
15-
outline: none;
16-
field-sizing: content;
17-
min-width: calc(
18-
100%
19-
- var(--pg-input-text-padding-inline-start, var(--pg-input-text-padding-inline, 0.5rem))
20-
- var(--pg-input-text-padding-inline-end, var(--pg-input-text-padding-inline, 0.5rem))
21-
- 2px
22-
);
23-
max-width: calc(
24-
var(--pg-input-text-max-width, 100%)
25-
- var(--pg-input-text-padding-inline-start, var(--pg-input-text-padding-inline, 0.5rem))
26-
- var(--pg-input-text-padding-inline-end, var(--pg-input-text-padding-inline, 0.5rem))
27-
- 2px
28-
);
29-
background-color: transparent;
5+
[part=header] {
6+
font-size: 0.875rem;
7+
line-height: 1.25rem;
8+
padding-inline: 0.5rem;
9+
padding-block: 0.125rem 0.25rem;
3010
}
3111

32-
[part=input]:read-only {
33-
border-color: transparent;
12+
[part=node] {
13+
position: absolute;
14+
border: 2px solid rgba(255, 255, 255, 0.5);
15+
border-radius: 0.25rem;
16+
background: #1D1D1D;
17+
color: #FFF;
18+
width: 12rem;
19+
min-height: 3rem;
3420
}
3521

36-
[part=input]:active {
37-
box-shadow: 0 0 0 3px var(--pg-input-text-active-glow, rgb(79, 143, 249, 0.6));
38-
}
39-
[part=input]:focus {
40-
box-shadow: 0 0 0 3px var(--pg-input-text-focus-glow, rgb(79, 143, 249, 0.5));
22+
[part=node]:hover {
23+
border-color: rgba(255, 255, 255, 0.75);
4124
}

‎src/components/pg/node/node.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,4 @@
1-
<div part="items"></div>
1+
<div part="node">
2+
<div part="header">Node</div>
3+
<div part="items"></div>
4+
</div>

‎src/components/pg/node/node.ts‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import { Component, Prop, Part } from '@pictogrammers/element';
1+
import { Component, Prop, Part, forEach } from '@pictogrammers/element';
2+
3+
import PgNodeEditorText from '../nodeEditorText/nodeEditorText';
24

35
import template from './node.html';
46
import style from './node.css';
@@ -9,18 +11,39 @@ import style from './node.css';
911
template,
1012
})
1113
export default class PgNode extends HTMLElement {
12-
@Prop() items: any = [];
14+
@Prop() x: number = 0;
15+
@Prop() y: number = 0;
1316
@Prop() fields: any = [];
1417

18+
@Part() $node: HTMLDivElement;
1519
@Part() $items: HTMLDivElement;
20+
@Part() $header: HTMLDivElement;
1621

1722
connectedCallback() {
23+
forEach({
24+
container: this.$items,
25+
items: this.fields,
26+
type: (item) => PgNodeEditorText,
27+
create: ($item, item) => {
1828

29+
},
30+
});
31+
this.$header.addEventListener('click', this.#handleSelect.bind(this));
1932
}
2033

2134
render(changes: any) {
2235
if (changes.fields) {
2336

2437
}
38+
if (changes.x) {
39+
this.$node.style.setProperty('left', `${this.x}rem`);
40+
}
41+
if (changes.y) {
42+
this.$node.style.setProperty('top', `${this.y}rem`);
43+
}
44+
}
45+
46+
#handleSelect(e: any) {
47+
2548
}
2649
}

‎src/components/pg/nodeEditorText/README.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# `<pg-nodes>`
2+
3+
The `pg-nodes` component allows creating and linking `PgNode` extended data types.
4+
5+
> If a `type` is omitted a `fields` property is required. See below for details.
6+
7+
```typescript
8+
import '@pictogrammers/components/pgNodeEditorText';
9+
import { PgNodeEditorText } from '@pictogrammers/components/pgNodeEditorText';
10+
```
11+
12+
```html
13+
<pg-node-editor-text></pg-node-editor-text>
14+
```
15+
16+
## Attributes
17+
18+
| Attributes | Tested | Description |
19+
| ----------- | -------- | ----------- |
20+
| `items` | | Node list |
21+
22+
> Note: All nodes are sized off a `1rem` grid.
23+
24+
## Events
25+
26+
| Events | Tested | Description |
27+
| ---------- | -------- | ----------- |
28+
| change | | `{ detail: { index, item[, field] }` |
29+
| input | | `{ detail: { index, item[, field] }` |
30+
31+
## CSS Variables
32+
33+
| CSS Variables | Default | Description |
34+
| ------------------- | --------- | ----------- |
35+
| n/a | | |

‎src/components/pg/nodeEditorText/__examples__/basic/basic.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div class="example">
2+
<pg-node-editor-text part="input"></pg-node-editor-text>
3+
<div>
4+
<code>onchange: <span part="value1"></span></code>
5+
</div>
6+
<div>
7+
<code>oninput: <span part="value2"></span></code>
8+
</div>
9+
</div>

‎src/components/pg/nodeEditorText/__examples__/basic/basic.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Component, Part } from '@pictogrammers/element';
2+
import PgNodes from '../../nodeEditorText';
3+
4+
import template from './basic.html';
5+
6+
@Component({
7+
selector: 'x-pg-node-editor-text-basic',
8+
template,
9+
})
10+
export default class XPgNodesEditorTextBasic extends HTMLElement {
11+
12+
@Part() $input: PgNodes;
13+
@Part() $value1: HTMLDivElement;
14+
@Part() $value2: HTMLDivElement;
15+
16+
connectedCallback() {
17+
this.$input.addEventListener('change', this.#handleChange.bind(this));
18+
this.$input.addEventListener('input', this.#handleInput.bind(this));
19+
}
20+
21+
#handleChange(e: CustomEvent) {
22+
const { value } = e.detail;
23+
this.$value1.textContent = value;
24+
}
25+
26+
#handleInput(e: CustomEvent) {
27+
const { value } = e.detail;
28+
this.$value2.textContent = value;
29+
}
30+
}

‎src/components/pg/nodeEditorText/nodeEditorText.css‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
:host {
2+
display: block;
3+
font-family: var(--pg-font-family, system-ui);
4+
}
5+
6+
label {
7+
display: flex;
8+
flex-direction: column;
9+
padding-inline: 0.25rem;
10+
}
11+
12+
[part=label] {
13+
font-size: 0.75rem;
14+
line-height: 0.75rem;
15+
padding-block-end: 0.25rem;
16+
padding-inline: 0.25rem;
17+
}
18+
19+
[part=input] {
20+
border: 0;
21+
border-radius: 0.125rem;
22+
padding-inline-start: 0.25rem;
23+
padding-inline-end: 0.25rem;
24+
padding-block-start: 0;
25+
padding-block-end: 0;
26+
font-family: var(--pg-input-text-font-family, var(--pg-font-family));
27+
font-size: 1rem;
28+
outline: none;
29+
field-sizing: content;
30+
min-width: calc(
31+
100%
32+
- var(--pg-input-text-padding-inline-start, var(--pg-input-text-padding-inline, 0.5rem))
33+
- var(--pg-input-text-padding-inline-end, var(--pg-input-text-padding-inline, 0.5rem))
34+
- 2px
35+
);
36+
background-color: #2B2B2B;
37+
color: #FFF;
38+
}
39+
40+
[part=input]:read-only {
41+
border-color: transparent;
42+
}
43+
44+
[part=input]:active {
45+
box-shadow: 0 0 0 3px var(--pg-input-text-active-glow, rgb(79, 143, 249, 0.6));
46+
}
47+
[part=input]:focus {
48+
box-shadow: 0 0 0 3px var(--pg-input-text-focus-glow, rgb(79, 143, 249, 0.5));
49+
}

0 commit comments

Comments
 (0)