Skip to content

Commit 1ea69aa

Browse files
meganindyameganindya
authored
Merge pull request #164 from sugarlabs/155-api-specification
Editor: Add instructions API specification
2 parents 3100e64 + f0719dd commit 1ea69aa

File tree

6 files changed

+348
-123
lines changed

6 files changed

+348
-123
lines changed

‎src/components/editor/core/index.ts

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,49 @@ import {
66
generateSnapshot,
77
registerElementSpecificationEntries,
88
resetSyntaxTree,
9+
getSpecificationSnapshot,
910
} from '@sugarlabs/musicblocks-v4-lib';
1011

12+
import {
13+
addInstance,
14+
getInstance,
15+
removeInstance,
16+
} from '@sugarlabs/musicblocks-v4-lib/syntax/warehouse/warehouse';
17+
1118
import { librarySpecification } from '@sugarlabs/musicblocks-v4-lib';
1219
registerElementSpecificationEntries(librarySpecification);
1320

1421
// -- public functions -----------------------------------------------------------------------------
1522

23+
/**
24+
* Generates the API for the loaded specification.
25+
* @returns list of valid instruction signatures
26+
*/
27+
export function generateAPI(): string {
28+
const snapshot = getSpecificationSnapshot();
29+
const api: string[] = [];
30+
31+
Object.entries(snapshot)
32+
.filter(
33+
([_, specification]) =>
34+
specification.type === 'Statement' &&
35+
['Graphics', 'Pen'].includes(specification.category),
36+
)
37+
.forEach(([elementName, _]) => {
38+
const instanceID = addInstance(elementName);
39+
const instance = getInstance(instanceID)!.instance;
40+
const args: [string, string][] = instance.argLabels.map((arg) => [
41+
arg,
42+
instance.getArgType(arg).join('|'),
43+
]);
44+
removeInstance(instanceID);
45+
46+
api.push(`${elementName} ${args.map(([name, types]) => `${name}:${types}`).join(' ')}`);
47+
});
48+
49+
return api.join('\n');
50+
}
51+
1652
/**
1753
* Validates code, transpiles it, and generates the Syntax Tree in the Programming Engine.
1854
* @param code editor's code

‎src/components/editor/index.ts

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,16 @@ import { IComponentMenu } from '@/@types/components/menu';
33
import { getComponent } from '@/config';
44
import { setToolbarExtended, unsetToolbarExtended } from '@/view';
55

6-
import { getElement, resetStatus, setButtonState, setup as setupView } from './view';
7-
import { resetProgram } from './core';
6+
import {
7+
getElement,
8+
resetStates,
9+
setButtonState,
10+
setCode,
11+
setHelp,
12+
setStatus,
13+
setup as setupView,
14+
} from './view';
15+
import { generateAPI, resetProgram } from './core';
816

917
// -- public functions -----------------------------------------------------------------------------
1018

@@ -28,18 +36,42 @@ export function setup(): Promise<void> {
2836
const menu = getComponent('menu');
2937
if (menu) {
3038
(menu as IComponentMenu).mountHook('reset', () => {
31-
resetStatus();
39+
setStatus('');
3240
resetProgram();
3341
});
3442
}
3543

44+
setCode(`set-thickness value:4
45+
set-color value:5
46+
repeat times:6
47+
move-forward steps:100
48+
turn-right angle:60
49+
set-color value:9
50+
repeat times:6
51+
move-forward steps:100
52+
turn-left angle:60`);
53+
54+
setCode(`set-thickness value:4
55+
set-color value:5
56+
move-forward steps:100
57+
turn-right angle:60
58+
move-forward steps:100
59+
turn-right angle:60
60+
move-forward steps:100
61+
turn-right angle:60
62+
move-forward steps:100
63+
turn-right angle:60`);
64+
65+
setHelp(generateAPI());
66+
3667
const btn = getElement('button');
3768

3869
let state: 'initial' | 'float' | 'pinned' = 'initial';
3970

4071
const setState = (_state: 'initial' | 'float' | 'pinned') => {
4172
if (_state === 'initial') {
4273
unsetToolbarExtended();
74+
resetStates();
4375
} else {
4476
const toolbarContent = setToolbarExtended('Editor', _state, {
4577
pin: () => setState('pinned'),

‎src/components/editor/view/components/index.scss

Lines changed: 132 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,173 @@
11
@import '@/scss/colors';
22

33
#editor {
4-
display: flex;
5-
flex-direction: column;
64
width: 100%;
75
height: 100%;
86

9-
> * {
7+
.editor-wrapper {
8+
display: flex;
9+
flex-direction: column;
1010
width: 100%;
11-
margin: 0;
12-
}
13-
14-
#editor-codebox {
15-
flex-shrink: 1;
1611
height: 100%;
17-
margin-bottom: 0.5rem;
18-
padding: 0.5rem;
19-
border: none;
20-
border-radius: 0.25rem 0.25rem;
21-
font-size: 0.9rem;
22-
font-family: 'Courier New', Courier, monospace;
23-
font-weight: bold;
24-
color: $text-dark;
25-
resize: none;
26-
27-
&:focus {
28-
outline: none;
29-
}
30-
}
3112

32-
#editor-console {
33-
flex-shrink: 0;
34-
display: flex;
35-
flex-direction: row;
36-
align-items: center;
37-
width: 100%;
38-
height: 2.5rem;
39-
border-radius: 0 0 0.25rem 0.25rem;
13+
&.editor-wrapper-hidden {
14+
display: none;
15+
}
4016

4117
> * {
42-
box-sizing: border-box;
43-
height: 100%;
18+
width: 100%;
19+
margin: 0;
4420
}
4521

46-
#editor-status-wrapper {
22+
#editor-codebox {
4723
flex-shrink: 1;
24+
height: 100%;
25+
margin-bottom: 0.5rem;
26+
padding: 0.5rem;
27+
border: none;
28+
border-radius: 0.25rem 0.25rem;
29+
font-size: 0.9rem;
30+
font-family: 'Courier New', Courier, monospace;
31+
font-weight: bold;
32+
color: $text-dark;
33+
resize: none;
34+
35+
&:focus {
36+
outline: none;
37+
}
38+
}
39+
40+
#editor-console {
41+
flex-shrink: 0;
42+
display: flex;
43+
flex-direction: row;
44+
align-items: center;
4845
width: 100%;
49-
margin-right: 0.5rem;
46+
height: 2.5rem;
47+
border-radius: 0 0 0.25rem 0.25rem;
5048

51-
#editor-status {
52-
width: 100%;
49+
> * {
50+
box-sizing: border-box;
5351
height: 100%;
54-
margin: 0;
52+
margin-right: 0.5rem;
53+
}
54+
55+
#editor-btn-help {
56+
flex-shrink: 0;
57+
width: 2.5rem;
5558
padding: 0.5rem;
59+
border: none;
5660
border-radius: 0.25rem;
57-
font-size: 0.9rem;
58-
font-family: 'Courier New', Courier, monospace;
59-
font-weight: bold;
60-
color: $text-dark;
61-
background-color: $background-light;
62-
overflow: auto;
61+
text-transform: uppercase;
62+
background-color: white;
63+
cursor: pointer;
64+
transition: all 0.25s ease;
65+
66+
svg {
67+
width: 100%;
68+
height: 100%;
69+
70+
.path-fill {
71+
fill: $mb-accent;
72+
transition: all 0.25s ease;
73+
}
74+
}
75+
}
76+
77+
#editor-status-wrapper {
78+
flex-shrink: 1;
79+
width: 100%;
80+
81+
#editor-status {
82+
width: 100%;
83+
height: 100%;
84+
margin: 0;
85+
padding: 0.5rem;
86+
border-radius: 0.25rem;
87+
font-size: 0.9rem;
88+
font-family: 'Courier New', Courier, monospace;
89+
font-weight: bold;
90+
color: $text-dark;
91+
background-color: $background-light;
92+
overflow: auto;
93+
}
94+
}
95+
96+
#editor-btn-build {
97+
flex-shrink: 0;
98+
width: 2.5rem;
99+
margin-right: 0;
100+
padding: 0.5rem;
101+
border: none;
102+
border-radius: 0.25rem;
103+
text-transform: uppercase;
104+
background-color: white;
105+
cursor: pointer;
106+
transition: all 0.25s ease;
107+
108+
svg {
109+
width: 100%;
110+
height: 100%;
111+
112+
.path-fill {
113+
fill: $mb-accent;
114+
transition: all 0.25s ease;
115+
}
116+
}
117+
118+
&:hover {
119+
svg {
120+
.path-fill {
121+
fill: $mb-accent-light;
122+
}
123+
}
124+
}
125+
}
126+
}
127+
128+
#editor-help {
129+
flex-shrink: 1;
130+
height: 100%;
131+
margin-bottom: 0.5rem;
132+
padding: 0.5rem;
133+
border: none;
134+
border-radius: 0.25rem;
135+
font-size: 0.9rem;
136+
font-family: 'Courier New', Courier, monospace;
137+
font-weight: bold;
138+
color: $mb-accent-light;
139+
background-color: $mb-accent-dark;
140+
resize: none;
141+
142+
&:focus {
143+
outline: none;
63144
}
64145
}
65146

66-
#editor-btn-build {
147+
#editor-help-close {
67148
flex-shrink: 0;
68149
width: 2.5rem;
69-
padding: 0.5rem;
150+
height: 2.5rem;
70151
border: none;
71152
border-radius: 0.25rem;
72-
text-transform: uppercase;
73-
background-color: white;
153+
background-color: unset;
74154
cursor: pointer;
75-
transition: all 0.25s ease;
76155

77156
svg {
78-
width: 100%;
79-
height: 100%;
157+
width: calc(100% - 0.5rem);
158+
height: calc(100% - 0.5rem);
159+
margin: 0.25rem;
80160

81161
.path-fill {
82-
fill: $mb-accent;
162+
fill: $mb-accent-dark;
83163
transition: all 0.25s ease;
84164
}
85165
}
86166

87167
&:hover {
88168
svg {
89169
.path-fill {
90-
fill: $mb-accent-light;
170+
fill: $text-light;
91171
}
92172
}
93173
}

0 commit comments

Comments
 (0)