Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
d8d-blockly
Advanced tools
A Blockly-DIY library for creating and managing block-based programming interfaces. Includes features for custom blocks, block validation, and block events. 简体中文: 自写的Blockly的库,用于创建和管理基于块的编程界面。包括自定义块、块验证和块事件等功能。
这是一个基于React的区块编辑器项目,使用了d8d-blockly库来实现可视化的代码块编辑功能。项目包含两个主要组件:单一编辑器(App.tsx)和多编辑器(AppMulti.tsx)。
npm install
npm start
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;
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;
欢迎提交问题和合并请求,为项目做出贡献。
MIT
FAQs
A Blockly-DIY library for creating and managing block-based programming interfaces. Includes features for custom blocks, block validation, and block events. 简体中文: 自写的Blockly的库,用于创建和管理基于块的编程界面。包括自定义块、块验证和块事件等功能。
The npm package d8d-blockly receives a total of 35 weekly downloads. As such, d8d-blockly popularity was classified as not popular.
We found that d8d-blockly demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.