Skip to content

Commit e70ca94

Browse files
microbit-matt-hillsdonmicrobit-matt-hillsdon
committed
Switch to refs, share toolbar
1 parent a8cc1b9 commit e70ca94

File tree

5 files changed

+285
-461
lines changed

5 files changed

+285
-461
lines changed

‎src/stories/HtmlToReactWrapper.tsx

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎src/stories/MakeCodeFrame.stories.tsx

Lines changed: 2 additions & 196 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
import { Project } from '../vanilla/pxt.js';
1010
import { controllerId } from './config.js';
1111
import StoryWrapper from './StoryWrapper.js';
12+
import MakeCodeToolbar from './MakeCodeToolbar.js';
1213

1314
const meta: Meta<typeof MakeCodeFrame> = {
1415
title: 'stories/React/MakeCodeFrame',
@@ -26,16 +27,6 @@ const meta: Meta<typeof MakeCodeFrame> = {
2627
export default meta;
2728
type Story = StoryObj<typeof MakeCodeFrame>;
2829

29-
const EditorWithToolbarStyles = {
30-
actions: {
31-
fontFamily: 'sans-serif',
32-
display: 'flex',
33-
flexWrap: 'wrap',
34-
gap: '5px',
35-
margin: '10px 0',
36-
} as const,
37-
};
38-
3930
const MakeCodeEditorWithControls = (
4031
props: Omit<MakeCodeFrameProps, 'initialProjects'>
4132
) => {
@@ -50,192 +41,7 @@ const MakeCodeEditorWithControls = (
5041
}, []);
5142
return (
5243
<>
53-
<div style={{ display: 'flex', flexDirection: 'column' }}>
54-
<div style={EditorWithToolbarStyles.actions}>
55-
<button onClick={() => ref.current!.switchJavascript()}>
56-
Javascript
57-
</button>
58-
<button onClick={() => ref.current!.switchBlocks()}>Blocks</button>
59-
<button
60-
onClick={async () => {
61-
const info = await ref.current!.info();
62-
console.log(info);
63-
}}
64-
>
65-
Info
66-
</button>
67-
<button onClick={() => ref.current!.newProject()}>New project</button>
68-
<button
69-
onClick={() =>
70-
ref.current!.startActivity({
71-
activityType: 'tutorial',
72-
path: 'microbit-foundation/makecode-tutorials/first-lessons/step-counter',
73-
})
74-
}
75-
>
76-
Load tutorial from GitHub
77-
</button>
78-
<button onClick={() => ref.current!.print()}>Print</button>
79-
<button onClick={() => ref.current!.pair()}>Pair</button>
80-
<button onClick={() => ref.current!.compile()}>Compile</button>
81-
<button onClick={() => ref.current!.saveProject()}>
82-
Save project
83-
</button>
84-
<button onClick={() => ref.current!.unloadProject()}>
85-
Unload project
86-
</button>
87-
<button
88-
onClick={() =>
89-
ref.current!.openHeader(
90-
[...savedProjects.current.values()][0].header!.id
91-
)
92-
}
93-
>
94-
Open header
95-
</button>
96-
<button
97-
onClick={() =>
98-
ref.current!.importProject({
99-
project: defaultMakeCodeProject,
100-
})
101-
}
102-
>
103-
Import project (no header)
104-
</button>
105-
<button
106-
onClick={async () => {
107-
const result = await ref.current!.shareProject({
108-
headerId: [...savedProjects.current!.values()][0].header!.id,
109-
projectName: 'Example project name',
110-
});
111-
console.log(result);
112-
}}
113-
>
114-
Share project
115-
</button>
116-
<button
117-
onClick={() =>
118-
ref.current!.setLanguageRestriction('javascript-only' as const)
119-
}
120-
>
121-
Set language restriction
122-
</button>
123-
<button
124-
onClick={async () => {
125-
const result = await ref.current!.getToolboxCategories({
126-
advanced: true,
127-
});
128-
console.log(result);
129-
}}
130-
>
131-
Get toolbox categories
132-
</button>
133-
<button onClick={() => ref.current!.toggleDebugSloMo()}>
134-
Toggle debug slow mo
135-
</button>
136-
<button onClick={() => ref.current!.toggleGreenScreen()}>
137-
Green screen
138-
</button>
139-
<button onClick={() => ref.current!.toggleHighContrast()}>
140-
Contrast
141-
</button>
142-
<button onClick={() => ref.current!.closeFlyout()}>
143-
Close flyout
144-
</button>
145-
</div>
146-
<div style={EditorWithToolbarStyles.actions}>
147-
<button
148-
onClick={async () => {
149-
const result = await ref.current!.renderBlocks({
150-
ts: 'basic.showNumber(42)',
151-
});
152-
const img = document.body.appendChild(
153-
document.createElement('img')
154-
);
155-
img.src = result!;
156-
}}
157-
>
158-
Render blocks
159-
</button>
160-
<button
161-
onClick={async () => {
162-
const result = await ref.current!.renderPython({
163-
ts: 'basic.showNumber(42)',
164-
});
165-
console.log(result);
166-
}}
167-
>
168-
Render Python
169-
</button>
170-
<button
171-
onClick={async () => {
172-
const result = await ref.current!.renderXml({
173-
xml: defaultMakeCodeProject.text!['main.blocks']!,
174-
});
175-
const img = document.body.appendChild(
176-
document.createElement('img')
177-
);
178-
img.src = result!;
179-
}}
180-
>
181-
Render XML
182-
</button>
183-
<button
184-
onClick={async () => {
185-
const result = await ref.current!.renderByBlockId({
186-
blockId: 'basic_show_icon',
187-
});
188-
const img = document.body.appendChild(
189-
document.createElement('img')
190-
);
191-
img.src = result!;
192-
}}
193-
>
194-
Render by block id
195-
</button>
196-
</div>
197-
<div style={EditorWithToolbarStyles.actions}>
198-
<label>
199-
File to import: <input type="file" id="importFile"></input>
200-
</label>
201-
<button
202-
onClick={async () => {
203-
const importFile = document.querySelector(
204-
'#importFile'
205-
) as HTMLInputElement;
206-
const file = importFile.files?.item(0);
207-
if (file) {
208-
const data = await file.arrayBuffer();
209-
const text = new TextDecoder().decode(data);
210-
ref.current!.importFile({
211-
filename: file.name,
212-
parts: [text],
213-
});
214-
}
215-
}}
216-
>
217-
Import file
218-
</button>
219-
</div>
220-
<div style={EditorWithToolbarStyles.actions}>
221-
<button onClick={() => ref.current!.startSimulator()}>
222-
Start simulator
223-
</button>
224-
<button onClick={() => ref.current!.stopSimulator()}>
225-
Stop simulator
226-
</button>
227-
<button onClick={() => ref.current!.hideSimulator()}>
228-
Hide simulator
229-
</button>
230-
<button
231-
onClick={() => {
232-
ref.current!.setSimulatorFullScreen(true);
233-
}}
234-
>
235-
Set simulator full screen
236-
</button>
237-
</div>
238-
</div>
44+
<MakeCodeToolbar savedProjects={savedProjects} driver={ref} />
23945
<MakeCodeFrame
24046
ref={ref}
24147
controller={1}

0 commit comments

Comments
 (0)