SolidJS-多文件间传递同一个信号量

SolidJS-多文件间传递同一个信号量

现在我在controlPanel.tsx中返回了一个控制面板（HTML代码），可以控制node、link、step1和step2的值。在matrixWave.tsx中我根据node、link、step1和step2的值进行数据的过滤，然后生成对应的matrixWave的SVG图。因此，我希望在web中对node、link、step1和step2的值进行更改后，效果能及时反映在matrixWave的界面中。

App.tsx对应代码

• 根据定义的FilterFactor数据结构，创建对应的信号量
• 在controlPanel中对filter的四个子值进行修改，则赋 setFilter
• 在matrixWave中需要读取filter的值来对数据进行过滤，赋 filter

import ControlPanel  from './assets/components/ControlPanel';
import MatrixWave from './assets/components/MatrixWave';
import {FilterFactor} from "./assets/utils/type"

const App: Component = () => {
  const [filter, setFilter] = createSignal<FilterFactor>({
    node: 75,
    link: 75,
    step1: 1,
    step2: 6,
  });
  
  return (
    <div>
      <ControlPanel setFilter={setFilter} filter={filter}/>
      <MatrixWave filter={filter} />
    </div>
  );
};

export default App;

controlPanel.tsx对应代码

• 注意controlPanel输入的参数！！！

const ControlPanel = (props: { 
  setFilter: (filter: FilterFactor) => void,
  filter: () => FilterFactor
}) => {
  let nodeFilterInput: HTMLInputElement | undefined;
  let linkFilterInput: HTMLInputElement | undefined;
  let step1FilterInput: HTMLInputElement | undefined;
  let step2FilterInput: HTMLInputElement | undefined;

  createEffect(() => {
    if (nodeFilterInput) {
      nodeFilterInput.value = "75"; // 初始值
    }
    if (linkFilterInput) {
      linkFilterInput.value = "75"; // 初始值
    }
    if (step1FilterInput) {
      step1FilterInput.value = "1"; // 初始值
    }
    if (step2FilterInput) {
      step2FilterInput.value = "6"; // 初始值
    }
  });
  const handleNodeFilterChange = (event: Event) => {
    const value = (event.target as HTMLInputElement).value;
    props.setFilter({ ...props.filter(), node: parseInt(value, 10) });
  };

  const handleLinkFilterChange = (event: Event) => {
    const value = (event.target as HTMLInputElement).value;
    props.setFilter({ ...props.filter(), link: parseInt(value, 10) });
  };

  const handleStep1FilterChange = (event: Event) => {
    const value = (event.target as HTMLInputElement).value;
    props.setFilter({ ...props.filter(), step1: parseInt(value, 10) });
  };

  const handleStep2FilterChange = (event: Event) => {
    const value = (event.target as HTMLInputElement).value;
    props.setFilter({ ...props.filter(), step2: parseInt(value, 10) });
  };

  return (
    <div id="controlPanel">
                    <input type="text" name="nodeFilter" id="nodeFilterValue" style="width:75%"
                      value="75" 
                      ref={nodeFilterInput}
                      onInput={handleNodeFilterChange}/>
                      <input type="text" name="linkFilter" id="linkFilterValue" style="width:75%" 
                      ref={linkFilterInput}
                      onInput={handleLinkFilterChange} />
                      <input type="text" name="stepFilter1" id="stepFilter1" style="width:30%"
                        ref={step1FilterInput}
                        onInput={handleStep1FilterChange} /> ...
                      <input type="text" name="stepFilter2" id="stepFilter2" style="width:30%"
                        ref={step2FilterInput}
                        onInput={handleStep2FilterChange} />
    </div>
  );
};

matrixWave.tsx代码

import { Component, createEffect, createSignal, onCleanup } from "solid-js";
import * as d3 from "d3";
import Papa from "papaparse";
import {FilterFactor} from "../utils/type";


const MatrixWave = (props: { filter: () => FilterFactor }) => {
  const [filter, setFilter] = createSignal<FilterFactor>({
    node: 75,
    link: 75,
    step1: 1,
    step2: 6,
  });

  createEffect(() => {
    // 监听filter的变化
    const filterValue = props.filter();
    filterFactor = { ...filterFactor, ...filterValue };
    console.log("Updated filterFactor:", filterFactor);
    
    if (csvDataA().length > 0 && csvDataB().length > 0 ) {
      getShowData("update");
      console.log("datasetA: ", datasetA);
      console.log("datasetb: ", datasetB);
      getNodeSet();
      getEdgeSet();
      console.log("nodeSet: ", nodeSet);
      console.log("edgeSet: ", edgeSet);
      getDataInStep_Node();
      getDataInStep_Link();
      filterNodeSet();
      filterEdgeSet();
      setStepIndexToDataInStep();
      console.log("DataInStep:",dataInStep);
      const matrix = new Matrix("matrixWave");
      setMatrixInstance(matrix);

    }
  });

  return (
    <div>
      <div id='matrixWave'>
        {/* <p>Node Filter Value: {props.nodeFilter()}</p> */}
        <p>step1 Filter Value: {filter().step1}</p> 显示node的值
      </div>
    </div>
  );
};

export default MatrixWave;