0.0.63 • Published 12 months ago

d8d-blockly v0.0.63

Weekly downloads
-
License
MIT
Repository
-
Last release
12 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

12 months ago

0.0.63

12 months ago

0.0.60

12 months ago

0.0.61

12 months ago

0.0.59

12 months ago

0.0.51

1 year ago

0.0.52

1 year ago

0.0.53

1 year ago

0.0.54

1 year ago

0.0.55

12 months ago

0.0.56

12 months ago

0.0.57

12 months ago

0.0.58

12 months ago

0.0.50

1 year ago

0.0.45

1 year ago

0.0.46

1 year ago

0.0.47

1 year ago

0.0.48

1 year ago

0.0.49

1 year ago

0.0.44

1 year ago

0.0.43

1 year ago

0.0.40

1 year ago

0.0.41

1 year ago

0.0.42

1 year ago

0.0.24

1 year ago

0.0.25

1 year ago

0.0.37

1 year ago

0.0.38

1 year ago

0.0.39

1 year ago

0.0.30

1 year ago

0.0.31

1 year ago

0.0.32

1 year ago

0.0.33

1 year ago

0.0.34

1 year ago

0.0.35

1 year ago

0.0.36

1 year 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