ExternalVendorCode/ChainForge
1
0
Fork 0
mirror of https://github.com/ianarawjo/ChainForge.git synced 2025-03-14 16:26:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #12 from ianarawjo/pv

Browse Source 
Add ability to delete text fields
This commit is contained in:
ianarawjo 2023-05-03 14:01:25 -04:00 committed by GitHub
commit 6655d95fd8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
chain-forge/src/ScriptNode.js
View File

@ -1,17 +1,23 @@
import React, { useState, useRef, useEffect, useCallback } from 'react';
import useStore from './store';
import NodeLabel from './NodeLabelComponent'
import NodeLabel from './NodeLabelComponent';
import { IconSettingsAutomation } from '@tabler/icons-react';
const ScriptNode = ({ data, id }) => {
const setDataPropsForNode = useStore((state) => state.setDataPropsForNode);
const delButtonId = 'del-';
var [idCounter, setIDCounter] = useState(0);
const get_id = () => {
setIDCounter(idCounter + 1);
return 'f' + idCounter.toString();
}
// Handle a change in a scripts' input.
const handleInputChange = useCallback((event) => {
// Update the data for this script node's id.
let new_data = { 'scriptFiles': { ...data.scriptFiles } };
new_data.scriptFiles[event.target.id] = event.target.value;
console.log(new_data);
setDataPropsForNode(id, new_data);
}, [data, id, setDataPropsForNode]);
@ -23,7 +29,7 @@ const ScriptNode = ({ data, id }) => {
delete new_data.scriptFiles[item_id];
// if the new_data is empty, initialize it with one empty field
if (Object.keys(new_data.scriptFiles).length === 0) {
new_data.scriptFiles['f0'] = '';
new_data.scriptFiles[get_id()] = '';
}
console.log(new_data);
setDataPropsForNode(id, new_data);
@ -33,12 +39,12 @@ const ScriptNode = ({ data, id }) => {
const [scriptFiles, setScriptFiles] = useState([]);
useEffect(() => {
if (!data.scriptFiles)
setDataPropsForNode(id, { scriptFiles: { f0: '' } });
}, [data.scriptFiles, id, setDataPropsForNode]);
setDataPropsForNode(id, { scriptFiles: { [get_id()]: '' } });
}, []);
// Whenever 'data' changes, update the input fields to reflect the current state.
useEffect(() => {
const f = data.scriptFiles ? Object.keys(data.scriptFiles) : ['f0'];
const f = data.scriptFiles ? Object.keys(data.scriptFiles) : [];
setScriptFiles(f.map((i) => {
const val = data.scriptFiles ? data.scriptFiles[i] : '';
return (
@ -52,16 +58,15 @@ const ScriptNode = ({ data, id }) => {
// Add a field
const handleAddField = useCallback(() => {
// Update the data for this script node's id.
const num_files = data.scriptFiles ? Object.keys(data.scriptFiles).length : 0;
let new_data = { 'scriptFiles': { ...data.scriptFiles } };
new_data.scriptFiles['f' + num_files.toString()] = "";
new_data.scriptFiles[get_id()] = "";
setDataPropsForNode(id, new_data);
}, [data, id, setDataPropsForNode]);
return (
<div className="script-node cfnode">
<div className="node-header">
<NodeLabel title={data.title || 'Global Scripts'} nodeId={id} editable={false} />
<NodeLabel title={data.title || 'Global Scripts'} nodeId={id} editable={false} icon={<IconSettingsAutomation size="16px" />}/>
</div>
<label htmlFor="num-generations" style={{fontSize: '10pt'}}>Enter folder paths for external modules you wish to import.</label> <br/><br/>
<div>

31
chain-forge/src/TextFieldsNode.js
View File

@ -28,6 +28,13 @@ const TextFieldsNode = ({ data, id }) => {
const [templateVars, setTemplateVars] = useState(data.vars || []);
const setDataPropsForNode = useStore((state) => state.setDataPropsForNode);
const delButtonId = 'del-';
var [idCounter, setIDCounter] = useState(0);
const get_id = () => {
setIDCounter(idCounter + 1);
return 'f' + idCounter.toString();
}
// Handle a change in a text fields' input.
const handleInputChange = useCallback((event) => {
@ -58,31 +65,43 @@ const TextFieldsNode = ({ data, id }) => {
setDataPropsForNode(id, new_data);
}, [data, id, setDataPropsForNode, templateVars]);
// Handle delete script file.
const handleDelete = useCallback((event) => {
// Update the data for this script node's id.
let new_data = { 'fields': { ...data.fields } };
var item_id = event.target.id.substring(delButtonId.length);
delete new_data.fields[item_id];
// if the new_data is empty, initialize it with one empty field
if (Object.keys(new_data.fields).length === 0) {
new_data.fields[get_id()] = '';
}
setDataPropsForNode(id, new_data);
}, [data, id, setDataPropsForNode]);
// Initialize fields (run once at init)
const [fields, setFields] = useState([]);
useEffect(() => {
if (!data.fields)
setDataPropsForNode(id, { fields: {f0: ''}} );
setDataPropsForNode(id, { fields: {[get_id()]: ''}} );
}, []);
// Whenever 'data' changes, update the input fields to reflect the current state.
useEffect(() => {
const f = data.fields ? Object.keys(data.fields) : ['f0'];
const f = data.fields ? Object.keys(data.fields) : [];
setFields(f.map((i) => {
const val = data.fields ? data.fields[i] : '';
return (
<div className="input-field" key={i}>
<textarea id={i} name={i} className="text-field-fixed nodrag" rows="2" cols="40" defaultValue={val} onChange={handleInputChange} />
<textarea id={i} name={i} className="text-field-fixed nodrag" rows="2" cols="40" value={val} onChange={handleInputChange} /><button id={delButtonId + i} onClick={handleDelete}>x</button>
</div>
)}));
}, [data.fields, handleInputChange]);
}, [data.fields, handleInputChange, handleDelete]);
// Add a field
const handleAddField = useCallback(() => {
// Update the data for this text fields' id.
const num_fields = data.fields ? Object.keys(data.fields).length : 0;
let new_data = { 'fields': {...data.fields} };
new_data.fields['f'+num_fields.toString()] = "";
new_data.fields[get_id()] = "";
setDataPropsForNode(id, new_data);
}, [data, id, setDataPropsForNode]);