Skip to content

Commit 7a6ce50

Browse files
C2CoderC2Coder
authored
Merge pull request #1 from C2Coder/Blockly-V9
2 parents f2b86b4 + fc988a0 commit 7a6ce50

36 files changed

Lines changed: 2077 additions & 1321 deletions

‎package-lock.json‎

Lines changed: 996 additions & 820 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,35 +10,35 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13-
"@blockly/field-colour": "^4.0.0",
14-
"@types/w3c-web-serial": "^1.0.3",
15-
"axios": "^1.7.5",
16-
"blockly": "^10.0.0",
17-
"classnames": "^2.3.2",
13+
"@blockly/field-colour": "^6.0.0",
14+
"@types/w3c-web-serial": "^1.0.8",
15+
"axios": "^1.12.2",
16+
"blockly": "^12.3.1",
17+
"classnames": "^2.5.1",
1818
"jaculus-tools": "^0.0.23",
19-
"react": "^18.2.0",
20-
"react-blockly": "^7.2.2",
21-
"react-dom": "^18.2.0",
19+
"react": "^18.3.1",
20+
"react-blockly": "^9.0.0",
21+
"react-dom": "^18.3.1",
2222
"react-syntax-highlighter": "^15.6.6",
2323
"tailwind-override": "^0.6.1",
24-
"typescript": "^5.1.6",
24+
"typescript": "^5.9.3",
2525
"util": "^0.12.5"
2626
},
2727
"devDependencies": {
2828
"@types/node": "^20.4.1",
29-
"@types/react": "^18.2.14",
30-
"@types/react-dom": "^18.2.6",
31-
"@types/react-syntax-highlighter": "^15.5.7",
32-
"@vitejs/plugin-react": "^4.0.1",
33-
"autoprefixer": "^10.4.14",
34-
"eslint": "^8.44.0",
35-
"eslint-plugin-react": "^7.32.2",
36-
"eslint-plugin-react-hooks": "^4.6.0",
37-
"eslint-plugin-react-refresh": "^0.4.1",
38-
"postcss": "^8.4.25",
39-
"tailwindcss": "^3.4.10",
29+
"@types/react": "^19.2.2",
30+
"@types/react-dom": "^19.2.1",
31+
"@types/react-syntax-highlighter": "^15.5.13",
32+
"@vitejs/plugin-react": "^5.0.4",
33+
"autoprefixer": "^10.4.21",
34+
"eslint": "^9.37.0",
35+
"eslint-plugin-react": "^7.37.5",
36+
"eslint-plugin-react-hooks": "^6.1.1",
37+
"eslint-plugin-react-refresh": "^0.4.23",
38+
"postcss": "^8.5.6",
39+
"tailwindcss": "^3.4.18",
4040
"vite": "^7.1.9",
41-
"vite-plugin-checker": "^0.6.1",
41+
"vite-plugin-checker": "^0.11.0",
4242
"vite-plugin-node-polyfills": "^0.24.0"
4343
}
4444
}

‎src/App.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ function App() {
2828
return (
2929
<DeviceProvider >
3030
<GenerateCodeProvider>
31-
<div className="flex flex-col h-full w-full">
31+
<div className="flex flex-col h-full w-full light">
3232
<Header />
3333
<TopBar
3434
currentWorkspaceJson={currentWorkspaceJson}

‎src/components/buttons/Button.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
1-
import classNamesOriginal, {Argument} from "classnames";
2-
import {overrideTailwindClasses} from "tailwind-override";
3-
import {FC, InputHTMLAttributes} from "react";
41

5-
export const classNamesOverride = (...args: Argument[]) =>
6-
overrideTailwindClasses(classNamesOriginal(...args));
2+
import { classNamesOverride } from "../../utils/classNamesOverride";
3+
import { FC, InputHTMLAttributes } from "react";
74

85

96
export interface ButtonProps extends InputHTMLAttributes<HTMLInputElement> {
107
text: string,
118
classNames?: string,
129
onClick?: () => void,
1310
active?: boolean,
14-
1511
}
1612

1713

‎src/components/buttons/CopyBtn.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { FC, InputHTMLAttributes, useState } from "react";
2-
import Button, { classNamesOverride } from "./Button";
2+
import Button from "./Button";
3+
import { classNamesOverride } from "../../utils/classNamesOverride";
34
import { useGenerateCode } from "../../context/GenerateCodeContext";
45

56
export interface CopyBtnProps extends InputHTMLAttributes<HTMLInputElement> {

‎src/components/buttons/LoadBtn.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { FC, InputHTMLAttributes, useState } from "react";
2-
import Button, { classNamesOverride } from "./Button";
2+
import Button from "./Button";
3+
import { classNamesOverride } from "../../utils/classNamesOverride";
34
import { loadWorkspaceFromFile, isValidWorkspaceJson } from "../../utils/blocklyStorage";
45

56
export interface LoadBtnProps extends InputHTMLAttributes<HTMLInputElement> {

‎src/components/buttons/SaveBtn.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { FC, InputHTMLAttributes, useState } from "react";
2-
import Button, { classNamesOverride } from "./Button";
2+
import Button from "./Button";
3+
import { classNamesOverride } from "../../utils/classNamesOverride";
34
import { saveWorkspaceToFile } from "../../utils/blocklyStorage";
45

56
export interface SaveBtnProps extends InputHTMLAttributes<HTMLInputElement> {

‎src/components/labels/Label.tsx‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
import classNamesOriginal, {Argument} from "classnames";
2-
import {overrideTailwindClasses} from "tailwind-override";
3-
import {FC, InputHTMLAttributes} from "react";
41

5-
export const classNamesOverride = (...args: Argument[]) =>
6-
overrideTailwindClasses(classNamesOriginal(...args));
2+
import { classNamesOverride } from "../../utils/classNamesOverride";
3+
import { FC, InputHTMLAttributes } from "react";
74

85

96
export interface LabelProps extends InputHTMLAttributes<HTMLInputElement> {

‎src/components/topLevel/BlocklyEditor.tsx‎

Lines changed: 91 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import {FC, InputHTMLAttributes, useRef, useState, useEffect} from "react";
22
import {useGenerateCode} from "../../context/GenerateCodeContext";
3-
import Blockly from "blockly";
4-
import {javascriptGenerator} from "blockly/javascript";
5-
import {BlocklyWorkspace} from "react-blockly";
3+
import {javascriptGenerator as jsg} from "blockly/javascript";
4+
import {BlocklyWorkspace, WorkspaceSvg} from "react-blockly";
65
import "./../../customBlocks/customBlocks";
6+
import "../../styles/blockly-custom.css";
77

88
import {toolbox} from "../../customBlocks/toolbox";
99
export interface HeaderProps extends InputHTMLAttributes<HTMLInputElement> {
@@ -29,10 +29,10 @@ const BlocklyEditor: FC<HeaderProps> = ({ onWorkspaceChange, externalJson }) =>
2929
}
3030
}, [externalJson]);
3131

32-
const handleWorkspaceChange = (newWorkspace: Blockly.WorkspaceSvg) => {
32+
const handleWorkspaceChange = (newWorkspace: WorkspaceSvg) => {
3333
console.log("Workspace changed")
3434
try {
35-
let jsCode = javascriptGenerator.workspaceToCode(newWorkspace);
35+
let jsCode = jsg.workspaceToCode(newWorkspace);
3636
setCode(jsCode);
3737
} catch (e) {
3838
console.error("Error generating code: " + e);
@@ -52,17 +52,99 @@ const BlocklyEditor: FC<HeaderProps> = ({ onWorkspaceChange, externalJson }) =>
5252
return (
5353
<BlocklyWorkspace
5454
key={workspaceKey} // Force re-mount when key changes
55-
className="w-full h-full"
55+
className="w-full h-full blockly-custom-theme"
5656
toolboxConfiguration={toolbox}
5757
onWorkspaceChange={handleWorkspaceChange}
5858
initialJson={json}
5959
onJsonChange={onJsonChange}
6060
workspaceConfiguration={{
6161
renderer: "zelos",
62+
theme: {
63+
name: "custom",
64+
base: "classic", // Can be 'classic', 'modern', or 'deuteranopia'
65+
componentStyles: {
66+
workspaceBackgroundColour: "#f7fafc",
67+
toolboxBackgroundColour: "#2d3748",
68+
toolboxForegroundColour: "#f7fafc",
69+
flyoutBackgroundColour: "#1a202c",
70+
flyoutForegroundColour: "#f7fafc",
71+
flyoutOpacity: 1,
72+
scrollbarColour: "#4a5568",
73+
insertionMarkerColour: "#60a5fa",
74+
insertionMarkerOpacity: 0.3,
75+
markerColour: "#60a5fa",
76+
cursorColour: "#60a5fa"
77+
},
78+
blockStyles: {
79+
logic_blocks: {
80+
colourPrimary: "#615BA5",
81+
colourSecondary: "#715CA5",
82+
colourTertiary: "#5B4A95"
83+
},
84+
loop_blocks: {
85+
colourPrimary: "#5B67A5",
86+
colourSecondary: "#6B77B5",
87+
colourTertiary: "#4B5795"
88+
},
89+
math_blocks: {
90+
colourPrimary: "#5B80A5",
91+
colourSecondary: "#6B90B5",
92+
colourTertiary: "#4B7095"
93+
},
94+
text_blocks: {
95+
colourPrimary: "#5BA55B",
96+
colourSecondary: "#6BB56B",
97+
colourTertiary: "#4B954B"
98+
},
99+
list_blocks: {
100+
colourPrimary: "#5BA55B",
101+
colourSecondary: "#6BB56B",
102+
colourTertiary: "#4B954B"
103+
},
104+
variable_blocks: {
105+
colourPrimary: "#A55B80",
106+
colourSecondary: "#B56B90",
107+
colourTertiary: "#954B70"
108+
},
109+
procedure_blocks: {
110+
colourPrimary: "#995BA5",
111+
colourSecondary: "#A96BB5",
112+
colourTertiary: "#894B95"
113+
}
114+
},
115+
categoryStyles: {
116+
logic_category: {
117+
colour: "#615BA5"
118+
},
119+
loop_category: {
120+
colour: "#5B67A5"
121+
},
122+
math_category: {
123+
colour: "#5B80A5"
124+
},
125+
text_category: {
126+
colour: "#5BA55B"
127+
},
128+
list_category: {
129+
colour: "#5BA55B"
130+
},
131+
variable_category: {
132+
colour: "#A55B80"
133+
},
134+
procedure_category: {
135+
colour: "#995BA5"
136+
}
137+
},
138+
fontStyle: {
139+
family: "Inter, system-ui, sans-serif",
140+
weight: "normal",
141+
size: 12
142+
}
143+
},
62144
grid: {
63145
spacing: 20,
64146
length: 3,
65-
colour: "#ccc",
147+
colour: "#e2e8f0",
66148
snap: true
67149
},
68150
zoom: {
@@ -71,8 +153,8 @@ const BlocklyEditor: FC<HeaderProps> = ({ onWorkspaceChange, externalJson }) =>
71153
startScale: 1.0,
72154
maxScale: 3,
73155
minScale: 0.3,
74-
scaleSpeed: 1.2
75-
},
156+
scaleSpeed: 1.1,
157+
}
76158
}}
77159
/>
78160
)

‎src/components/topLevel/CodeResult.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
1-
import {FC, InputHTMLAttributes} from "react";
2-
import {useGenerateCode} from "../../context/GenerateCodeContext";
1+
import { FC, InputHTMLAttributes } from "react";
2+
import { useGenerateCode } from "../../context/GenerateCodeContext";
33
import SyntaxHighlighter from 'react-syntax-highlighter';
4-
import { atomOneDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
4+
import { atomOneDark as theme } from 'react-syntax-highlighter/dist/esm/styles/hljs';
55

66

7+
theme.hljs.padding = "10px";
8+
79
// @ts-expect-error
8-
import {INITIAL_TOOLBOX_JSON} from "../../blockly-config";
10+
import { INITIAL_TOOLBOX_JSON } from "../../blockly-config";
911

1012
export interface CodeResultProps extends InputHTMLAttributes<HTMLInputElement> {
1113
}
1214

1315

14-
const CodeResult: FC<CodeResultProps> = ({}) => {
15-
const {code} = useGenerateCode();
16+
const CodeResult: FC<CodeResultProps> = ({ }) => {
17+
const { code } = useGenerateCode();
1618

1719

1820
return (
1921
<div className="code-result w-full overflow-auto hide-scrollbar font-mono rounded">
2022
<SyntaxHighlighter
21-
language="javascript"
22-
style={atomOneDark}
23-
showLineNumbers
24-
lineNumberContainerStyle={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', }}
25-
lineNumberStyle={{ gridColumn: '1', minWidth: 'unset', width: '1.5em', textAlign: 'right', paddingRight: 'unset', marginRight: '1em', marginLeft: '0',}}
26-
>
23+
language="javascript"
24+
style={theme}
25+
showLineNumbers
26+
>
2727
{code}
2828
</SyntaxHighlighter>
2929
</div>

0 commit comments

Comments
 (0)