Skip to content

Commit 1005d13

Browse files
microbit-gracemicrobit-grace
committed
Add controls to makeCodeFrameDriver stories
1 parent f60a419 commit 1005d13

File tree

3 files changed

+206
-5
lines changed

3 files changed

+206
-5
lines changed

‎src/stories/StoryWrapper.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { ReactNode } from 'react';
22

3-
const StoryWrapper = (props: { id?: string; children?: ReactNode }) => (
3+
const StoryWrapper = (props: { children: ReactNode }) => (
44
<div
5-
id={props.id}
65
style={{
76
display: 'flex',
87
flexDirection: 'column',

‎src/stories/makeCodeFrameDriver.stories.tsx‎

Lines changed: 205 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
Options,
66
} from '../vanilla/makecode-frame-driver.js';
77
import { Project } from '../vanilla/pxt.js';
8-
import StoryWrapper from './StoryWrapper.js';
98
import { defaultMakeCodeProject } from '../vanilla/examples.js';
109

1110
interface StoryArgs {
@@ -43,6 +42,15 @@ const renderEditor = (args: StoryArgs) => {
4342
iframe.width = '100%';
4443
iframe.height = '100%';
4544

45+
const savedProjects: Map<string, Project> = new Map();
46+
const toolbarStyles = {
47+
fontFamily: 'sans-serif',
48+
display: 'flex',
49+
flexWrap: 'wrap',
50+
gap: '5px',
51+
margin: '10px 0',
52+
} as const;
53+
4654
// Create and initialise an instance of MakeCodeFrameDriver.
4755
const driverRef = new MakeCodeFrameDriver(
4856
{
@@ -53,7 +61,9 @@ const renderEditor = (args: StoryArgs) => {
5361
onWorkspaceReset: (e) => console.log('workspaceReset', e),
5462
onWorkspaceEvent: (e) => console.log('workspaceEvent', e),
5563
onWorkspaceSave: (e) => {
56-
console.log(e.project!.header!.id, e.project);
64+
const headerId = e.project!.header!.id;
65+
savedProjects.set(headerId, e.project);
66+
console.log(savedProjects);
5767
},
5868
onTutorialEvent: (e) => console.log('tutorialEvent', e),
5969
...(args.callbacks ?? {}),
@@ -72,7 +82,199 @@ const renderEditor = (args: StoryArgs) => {
7282
};
7383
waitForElementLoaded();
7484

75-
return <StoryWrapper id={elementId} />;
85+
return (
86+
<>
87+
<div style={{ display: 'flex', flexDirection: 'column' }}>
88+
<div style={toolbarStyles}>
89+
<button onClick={() => driverRef.switchJavascript()}>
90+
Javascript
91+
</button>
92+
<button onClick={() => driverRef.switchBlocks()}>Blocks</button>
93+
<button
94+
onClick={async () => {
95+
const info = await driverRef.info();
96+
console.log(info);
97+
}}
98+
>
99+
Info
100+
</button>
101+
<button onClick={() => driverRef.newProject()}>New project</button>
102+
<button
103+
onClick={() =>
104+
driverRef.startActivity({
105+
activityType: 'tutorial',
106+
path: 'microbit-foundation/makecode-tutorials/first-lessons/step-counter',
107+
})
108+
}
109+
>
110+
Load tutorial from GitHub
111+
</button>
112+
<button onClick={() => driverRef.print()}>Print</button>
113+
<button onClick={() => driverRef.pair()}>Pair</button>
114+
<button onClick={() => driverRef.compile()}>Compile</button>
115+
<button onClick={() => driverRef.saveProject()}>Save project</button>
116+
<button onClick={() => driverRef.unloadProject()}>
117+
Unload project
118+
</button>
119+
<button
120+
onClick={() =>
121+
driverRef.openHeader([...savedProjects.values()][0].header!.id)
122+
}
123+
>
124+
Open header
125+
</button>
126+
<button
127+
onClick={() =>
128+
driverRef.importProject({
129+
project: defaultMakeCodeProject,
130+
})
131+
}
132+
>
133+
Import project (no header)
134+
</button>
135+
<button
136+
onClick={async () => {
137+
const result = await driverRef.shareProject({
138+
headerId: [...savedProjects.values()][0].header!.id,
139+
projectName: 'Example project name',
140+
});
141+
console.log(result);
142+
}}
143+
>
144+
Share project
145+
</button>
146+
<button
147+
onClick={() =>
148+
driverRef.setLanguageRestriction('javascript-only' as const)
149+
}
150+
>
151+
Set language restriction
152+
</button>
153+
<button
154+
onClick={async () => {
155+
const result = await driverRef.getToolboxCategories({
156+
advanced: true,
157+
});
158+
console.log(result);
159+
}}
160+
>
161+
Get toolbox categories
162+
</button>
163+
<button onClick={() => driverRef.toggleDebugSloMo()}>
164+
Toggle debug slow mo
165+
</button>
166+
<button onClick={() => driverRef.toggleGreenScreen()}>
167+
Green screen
168+
</button>
169+
<button onClick={() => driverRef.toggleHighContrast()}>
170+
Contrast
171+
</button>
172+
<button onClick={() => driverRef.closeFlyout()}>Close flyout</button>
173+
</div>
174+
<div style={toolbarStyles}>
175+
<button
176+
onClick={async () => {
177+
const result = await driverRef.renderBlocks({
178+
ts: 'basic.showNumber(42)',
179+
});
180+
const img = document.body.appendChild(
181+
document.createElement('img')
182+
);
183+
img.src = result!;
184+
}}
185+
>
186+
Render blocks
187+
</button>
188+
<button
189+
onClick={async () => {
190+
const result = await driverRef.renderPython({
191+
ts: 'basic.showNumber(42)',
192+
});
193+
console.log(result);
194+
}}
195+
>
196+
Render Python
197+
</button>
198+
<button
199+
onClick={async () => {
200+
const result = await driverRef.renderXml({
201+
xml: defaultMakeCodeProject.text!['main.blocks']!,
202+
});
203+
const img = document.body.appendChild(
204+
document.createElement('img')
205+
);
206+
img.src = result!;
207+
}}
208+
>
209+
Render XML
210+
</button>
211+
<button
212+
onClick={async () => {
213+
const result = await driverRef.renderByBlockId({
214+
blockId: 'basic_show_icon',
215+
});
216+
const img = document.body.appendChild(
217+
document.createElement('img')
218+
);
219+
img.src = result!;
220+
}}
221+
>
222+
Render by block id
223+
</button>
224+
</div>
225+
<div style={toolbarStyles}>
226+
<label>
227+
File to import: <input type="file" id="importFile"></input>
228+
</label>
229+
<button
230+
onClick={async () => {
231+
const importFile = document.querySelector(
232+
'#importFile'
233+
) as HTMLInputElement;
234+
const file = importFile.files?.item(0);
235+
if (file) {
236+
const data = await file.arrayBuffer();
237+
const text = new TextDecoder().decode(data);
238+
driverRef.importFile({
239+
filename: file.name,
240+
parts: [text],
241+
});
242+
}
243+
}}
244+
>
245+
Import file
246+
</button>
247+
</div>
248+
<div style={toolbarStyles}>
249+
<button onClick={() => driverRef.startSimulator()}>
250+
Start simulator
251+
</button>
252+
<button onClick={() => driverRef.stopSimulator()}>
253+
Stop simulator
254+
</button>
255+
<button onClick={() => driverRef.hideSimulator()}>
256+
Hide simulator
257+
</button>
258+
<button
259+
onClick={() => {
260+
driverRef.setSimulatorFullScreen(true);
261+
}}
262+
>
263+
Set simulator full screen
264+
</button>
265+
</div>
266+
</div>
267+
<div
268+
id={elementId}
269+
style={{
270+
display: 'flex',
271+
flexDirection: 'column',
272+
width: '100%',
273+
height: 700,
274+
}}
275+
/>
276+
</>
277+
);
76278
};
77279

78280
export const MakeCodeEditorWithControlsStory: Story = {

‎src/stories/utils.ts‎

Whitespace-only changes.

0 commit comments

Comments
 (0)