aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/nodes/KeyValueBox.scss70
-rw-r--r--src/client/views/nodes/KeyValueBox.tsx69
-rw-r--r--src/client/views/nodes/KeyValuePair.tsx31
3 files changed, 144 insertions, 26 deletions
diff --git a/src/client/views/nodes/KeyValueBox.scss b/src/client/views/nodes/KeyValueBox.scss
index e946275fa..63ae75424 100644
--- a/src/client/views/nodes/KeyValueBox.scss
+++ b/src/client/views/nodes/KeyValueBox.scss
@@ -1,31 +1,57 @@
+@import "../global_variables";
.keyValueBox-cont {
- overflow-y: scroll;
- height: 100%;
- border: black;
- border-width: 1px;
- border-style: solid;
- box-sizing: border-box;
- display: inline-block;
- .imageBox-cont img {
- max-height: 45px;
- height: auto;
- }
+ overflow-y: scroll;
+ height: 100%;
+ background-color: $light-color;
+ border: 1px solid $intermediate-color;
+ border-radius: $border-radius;
+ box-sizing: border-box;
+ display: inline-block;
+ .imageBox-cont img {
+ max-height: 45px;
+ height: auto;
+ }
+ td {
+ padding: 6px 8px;
+ border-right: 1px solid $intermediate-color;
+ border-top: 1px solid $intermediate-color;
+ &:last-child {
+ border-right: none;
+ }
+ }
}
+
.keyValueBox-table {
- position: relative;
+ position: relative;
+ border-collapse: collapse;
}
+
.keyValueBox-header {
- background: gray;
+ background: $intermediate-color;
+ color: $light-color;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ font-size: 12px;
+ height: 30px;
+ padding-top: 4px;
+ th {
+ font-weight: normal;
+ &:first-child {
+ border-right: 1px solid $light-color;
+ }
+ }
}
+
.keyValueBox-evenRow {
- background: white;
- .formattedTextBox-cont {
- background: white;
- }
+ background: $light-color;
+ .formattedTextBox-cont {
+ background: $light-color;
+ }
}
+
.keyValueBox-oddRow {
- background: lightGray;
- .formattedTextBox-cont {
- background: lightgray;
- }
-}
+ background: $light-color-secondary;
+ .formattedTextBox-cont {
+ background: $light-color-secondary;
+ }
+} \ No newline at end of file
diff --git a/src/client/views/nodes/KeyValueBox.tsx b/src/client/views/nodes/KeyValueBox.tsx
index ac8c949a9..283c1f732 100644
--- a/src/client/views/nodes/KeyValueBox.tsx
+++ b/src/client/views/nodes/KeyValueBox.tsx
@@ -2,17 +2,62 @@
import { observer } from "mobx-react";
import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app
import { Document } from '../../../fields/Document';
-import { FieldWaiting } from '../../../fields/Field';
+import { FieldWaiting, Field } from '../../../fields/Field';
import { KeyStore } from '../../../fields/KeyStore';
import { FieldView, FieldViewProps } from './FieldView';
import "./KeyValueBox.scss";
import { KeyValuePair } from "./KeyValuePair";
import React = require("react")
+import { CompileScript, ToField } from "../../util/Scripting";
+import { Key } from '../../../fields/Key';
+import { observable, action } from "mobx";
@observer
export class KeyValueBox extends React.Component<FieldViewProps> {
public static LayoutString(fieldStr: string = "DataKey") { return FieldView.LayoutString(KeyValueBox, fieldStr) }
+ @observable private _keyInput: string = "";
+ @observable private _valueInput: string = "";
+
+
+ constructor(props: FieldViewProps) {
+ super(props);
+ }
+
+
+
+ shouldComponentUpdate() {
+ return false;
+ }
+
+ @action
+ onEnterKey = (e: React.KeyboardEvent): void => {
+ if (e.key == 'Enter') {
+ if (this._keyInput && this._valueInput) {
+ let doc = this.props.doc.GetT(KeyStore.Data, Document);
+ if (!doc || doc == FieldWaiting) {
+ return
+ }
+ let realDoc = doc;
+
+ let script = CompileScript(this._valueInput, undefined, true);
+ if (!script.compiled) {
+ return;
+ }
+ let field = script();
+ if (field instanceof Field) {
+ realDoc.Set(new Key(this._keyInput), field);
+ } else {
+ let dataField = ToField(field);
+ if (dataField) {
+ realDoc.Set(new Key(this._keyInput), dataField);
+ }
+ }
+ this._keyInput = ""
+ this._valueInput = ""
+ }
+ }
+ }
onPointerDown = (e: React.PointerEvent): void => {
if (e.buttons === 1 && this.props.isSelected()) {
@@ -33,7 +78,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
let ids: { [key: string]: string } = {};
let protos = doc.GetAllPrototypes();
for (const proto of protos) {
- proto._proxies.forEach((val, key) => {
+ proto._proxies.forEach((val: any, key: string) => {
if (!(key in ids)) {
ids[key] = key;
}
@@ -48,9 +93,26 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
return rows;
}
+ @action
+ keyChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+ this._keyInput = e.currentTarget.value;
+ }
+
+ @action
+ valueChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+ this._valueInput = e.currentTarget.value;
+ }
- render() {
+ newKeyValue = () => {
+ return (
+ <tr>
+ <td><input type="text" value={this._keyInput} placeholder="Key" onChange={this.keyChanged} /></td>
+ <td><input type="text" value={this._valueInput} placeholder="Value" onChange={this.valueChanged} onKeyPress={this.onEnterKey} /></td>
+ </tr>
+ )
+ }
+ render() {
return (<div className="keyValueBox-cont" onWheel={this.onPointerWheel}>
<table className="keyValueBox-table">
<tbody>
@@ -59,6 +121,7 @@ export class KeyValueBox extends React.Component<FieldViewProps> {
<th>Fields</th>
</tr>
{this.createTable()}
+ {this.newKeyValue()}
</tbody>
</table>
</div>)
diff --git a/src/client/views/nodes/KeyValuePair.tsx b/src/client/views/nodes/KeyValuePair.tsx
index a97e98313..111f85a05 100644
--- a/src/client/views/nodes/KeyValuePair.tsx
+++ b/src/client/views/nodes/KeyValuePair.tsx
@@ -8,6 +8,8 @@ import { observable, action } from 'mobx';
import { Document } from '../../../fields/Document';
import { Key } from '../../../fields/Key';
import { Server } from "../../Server"
+import { EditableView } from "../EditableView";
+import { CompileScript, ToField } from "../../util/Scripting";
// Represents one row in a key value plane
@@ -48,10 +50,37 @@ export class KeyValuePair extends React.Component<KeyValuePairProps> {
bindings: {},
selectOnLoad: false,
}
+ let contents = (
+ <FieldView {...props} />
+ );
return (
<tr className={this.props.rowStyle}>
<td>{this.key.Name}</td>
- <td><FieldView {...props} /></td>
+ <td><EditableView contents={contents} height={36} GetValue={() => {
+ let field = props.doc.Get(props.fieldKey);
+ if (field && field instanceof Field) {
+ return field.ToScriptString();
+ }
+ return field || "";
+ }}
+ SetValue={(value: string) => {
+ let script = CompileScript(value, undefined, true);
+ if (!script.compiled) {
+ return false;
+ }
+ let field = script();
+ if (field instanceof Field) {
+ props.doc.Set(props.fieldKey, field);
+ return true;
+ } else {
+ let dataField = ToField(field);
+ if (dataField) {
+ props.doc.Set(props.fieldKey, dataField);
+ return true;
+ }
+ }
+ return false;
+ }}></EditableView></td>
</tr>
)
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 13:50:21 +0000