0.0.63 • Published 10 months ago

d8d-blockly v0.0.63

Weekly downloads
-
License
MIT
Repository
-
Last release
10 months ago

d8d-blockly

项目简介

这是一个基于React的区块编辑器项目,使用了d8d-blockly库来实现可视化的代码块编辑功能。项目包含两个主要组件:单一编辑器(App.tsx)和多编辑器(AppMulti.tsx)。

功能特点

单一编辑器 (App.tsx)

  • 使用BlockEditor组件实现代码块编辑
  • 支持自定义区块类型和分类
  • 实时更新代码块、JavaScript代码和导入代码
  • 支持复制和粘贴代码块

多编辑器 (AppMulti.tsx)

  • 支持多个BlockEditor实例
  • 可以动态添加新的编辑器
  • 支持在不同编辑器之间切换
  • 共享复制的代码块across编辑器

技术栈

  • React
  • TypeScript
  • d8d-blockly库

使用说明

  1. 克隆项目到本地
  2. 安装依赖:npm install
  3. 运行项目:npm start

代码示例

单一编辑器 (App.tsx)

import { useState } from "react";
import "./App.css";
import { BlockEditor, baseBlocks, baseCateItems } from "d8d-blockly";
import blockTypes from "@/app/blockTypes.json";
import { blocks, cates } from "@/app/test";

function App() {
  const [blockCode, setBlockCode] = useState<TBlockCodeMap>(new Map());
  const [copyBlocks, setCopyBlocks] = useState<TBlockNode[]>([]);
  const cateItems = [...baseCateItems, ...cates];
  const blocksCateConfig = {
    ...baseBlocks,
    ...blocks,
  };

  const onBlockChange = (
    blockCode: TBlockCodeMap,
    jsCode: string,
    importCode: string
  ) => {
    console.log(blockCode, [...blockCode.values()]);
    console.log(jsCode);
    console.log(importCode);
    setBlockCode(blockCode);
  };

  const onCopyBlocksChange = (blocks: TBlockNode[]) => {
    console.log("onCopyBlocksChange", blocks);
    setCopyBlocks(blocks);
  };

  return (
    <>
      <div className="db-w-screen db-h-screen">
        <BlockEditor
          blockCode={blockCode}
          onBlockChange={onBlockChange}
          blocksCateConfig={blocksCateConfig}
          cateItems={cateItems}
          blockTypes={blockTypes}
          copyBlocks={copyBlocks}
          onCopyBlocksChange={onCopyBlocksChange}
        />
      </div>
    </>
  );
}

export default App;

多编辑器 (AppMulti.tsx)

import { useCallback, useState } from "react";
import "./App.css";
import { BlockEditor, baseBlocks, baseCateItems } from "d8d-blockly";
import blockTypes from "@/app/blockTypes.json";
import { blocks, cates } from "@/app/test";

// 定义 BlockEditor 的状态类型
type TBlockEditorState = {
  blockCode: Map<string, any>;
  jsCode: string;
  importCode: string;
};

function App() {
  // 初始化 BlockEditor 状态数组
  const [editors, setEditors] = useState<TBlockEditorState[]>([
    { blockCode: new Map(), jsCode: "", importCode: "" }, // 初始状态
  ]);
  const [activeIndex, setActiveIndex] = useState(0); // 当前激活的 BlockEditor 索引
  const [copyBlocks, setCopyBlocks] = useState<any[]>([]);

  const cateItems = [...baseCateItems, ...cates];
  const blocksCateConfig = {
    ...baseBlocks,
    ...blocks,
  };

  const onBlockChange =
    (index: number) =>
    (blockCode: Map<string, any>, jsCode: string, importCode: string) => {
      const newEditors = [...editors];
      newEditors[index] = { blockCode, jsCode, importCode };
      setEditors(newEditors);
    };

  const onCopyBlocksChange = (blocks: any[]) => {
    console.log("onCopyBlocksChange", blocks);
    setCopyBlocks(blocks);
  };

  // 添加新的 BlockEditor
  const addEditor = () => {
    setEditors([
      ...editors,
      { blockCode: new Map(), jsCode: "", importCode: "" },
    ]);
  };

  // 切换激活的 BlockEditor
  const switchEditor = (index: number) => {
    setActiveIndex(index);
  };

  const EditorNode = useCallback(
    (props: any) => {
      const currentEditor = editors[activeIndex];
      return (
        currentEditor && (
          <BlockEditor
            blockCode={currentEditor.blockCode}
            onBlockChange={onBlockChange(activeIndex)}
            blocksCateConfig={blocksCateConfig}
            cateItems={cateItems}
            blockTypes={blockTypes}
            {...props}
          />
        )
      );
    },
    [activeIndex]
  );

  return (
    <>
      <div className="db-w-screen db-h-screen">
        <button
          type="button"
          className="db-bg-yellow-500 db-p-2 db-text-white db-rounded-md"
          onClick={addEditor}
        >
          Add Editor
        </button>
        <div className="db-space-x-2">
          {editors.map((_, index) => (
            <button
              key={index}
              type="button"
              className="db-bg-blue-500 db-p-2 db-text-white db-rounded-md"
              onClick={() => switchEditor(index)}
            >
              Switch to Editor {index + 1}
            </button>
          ))}
        </div>
        <div className="db-w-full db-h-[calc(100vh-100px)] db-bg-gray-100">
          <EditorNode
            copyBlocks={copyBlocks}
            onCopyBlocksChange={onCopyBlocksChange}
          />
        </div>
      </div>
    </>
  );
}

export default App;

注意事项

  • 确保已正确安装并配置d8d-blockly库
  • 项目使用了自定义的CSS类名,可能需要相应的CSS框架支持

贡献

欢迎提交问题和合并请求,为项目做出贡献。

许可证

MIT

0.0.62

10 months ago

0.0.63

10 months ago

0.0.60

10 months ago

0.0.61

10 months ago

0.0.59

10 months ago

0.0.51

11 months ago

0.0.52

11 months ago

0.0.53

11 months ago

0.0.54

11 months ago

0.0.55

10 months ago

0.0.56

10 months ago

0.0.57

10 months ago

0.0.58

10 months ago

0.0.50

11 months ago

0.0.45

11 months ago

0.0.46

11 months ago

0.0.47

11 months ago

0.0.48

11 months ago

0.0.49

11 months ago

0.0.44

12 months ago

0.0.43

12 months ago

0.0.40

12 months ago

0.0.41

12 months ago

0.0.42

12 months ago

0.0.24

1 year ago

0.0.25

1 year ago

0.0.37

12 months ago

0.0.38

12 months ago

0.0.39

12 months ago

0.0.30

1 year ago

0.0.31

1 year ago

0.0.32

12 months ago

0.0.33

12 months ago

0.0.34

12 months ago

0.0.35

12 months ago

0.0.36

12 months ago

0.0.26

1 year ago

0.0.27

1 year ago

0.0.28

1 year ago

0.0.29

1 year ago

0.0.22

1 year ago

0.0.23

1 year ago

0.0.21

1 year ago

0.0.20

1 year ago

0.0.19

1 year ago

0.0.18

1 year ago

0.0.17

1 year ago

0.0.16

1 year ago

0.0.15

1 year ago

0.0.14

1 year ago

0.0.13

1 year ago

0.0.12

1 year ago

0.0.11

1 year ago

0.0.10

1 year ago

0.0.9

1 year ago

0.0.8

1 year ago

0.0.7

1 year ago

0.0.6

1 year ago

0.0.5

1 year ago

0.0.4

1 year ago

0.0.3

1 year ago

0.0.2

1 year ago

0.0.1

1 year ago