Skip to content

Commit 9ed7070

Browse files
DenisaCGDenisaCG
committed
Added complete toolbox and opening with Blockly Editor option
1 parent 070fdeb commit 9ed7070

File tree

8 files changed

+739
-67
lines changed

8 files changed

+739
-67
lines changed

‎binder/postBuild

100755100644
File mode changed.

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,8 @@
4747
"dependencies": {
4848
"@jupyterlab/application": "^4.0.0-alpha.4",
4949
"@jupyterlab/apputils": "^4.0.0-alpha.4",
50+
"@jupyterlab/docregistry": "^4.0.0-alpha.4",
51+
"@lumino/signaling": "^1.10.1",
5052
"@lumino/widgets": "^1.31.0",
5153
"blockly": "^7.20211209.2"
5254
},

‎src/factory.ts

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import {
2+
ABCWidgetFactory,
3+
DocumentRegistry,
4+
DocumentModel
5+
} from '@jupyterlab/docregistry';
6+
7+
import { BlocklyEditor, BlocklyPanel } from './widget';
8+
9+
/**
10+
* A widget factory to create new instances of ExampleDocWidget.
11+
*/
12+
export class BlocklyEditorFactory extends ABCWidgetFactory<
13+
BlocklyEditor,
14+
DocumentModel
15+
> {
16+
/**
17+
* Constructor of ExampleWidgetFactory.
18+
*
19+
* @param options Constructor options
20+
*/
21+
constructor(options: DocumentRegistry.IWidgetFactoryOptions) {
22+
super(options);
23+
}
24+
25+
/**
26+
* Create a new widget given a context.
27+
*
28+
* @param context Contains the information of the file
29+
* @returns The widget
30+
*/
31+
protected createNewWidget(
32+
context: DocumentRegistry.IContext<DocumentModel>
33+
): BlocklyEditor {
34+
return new BlocklyEditor({
35+
context,
36+
content: new BlocklyPanel(context)
37+
});
38+
}
39+
}

‎src/index.ts

Lines changed: 131 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -4,94 +4,159 @@ import {
44
ILayoutRestorer
55
} from '@jupyterlab/application';
66

7-
import {
8-
ICommandPalette,
9-
MainAreaWidget,
10-
WidgetTracker
11-
} from '@jupyterlab/apputils';
12-
13-
import { Widget } from '@lumino/widgets';
14-
15-
import * as Blockly from 'blockly';
16-
17-
namespace CommandIDs {
18-
export const open = 'jupyterlab-blocky:open-editor';
19-
}
20-
21-
const TOOLBOX = {
22-
kind: 'flyoutToolbox',
23-
contents: [
24-
{
25-
kind: 'block',
26-
type: 'controls_if'
27-
},
28-
{
29-
kind: 'block',
30-
type: 'controls_whileUntil'
31-
}
32-
]
33-
};
7+
// import {
8+
// ICommandPalette,
9+
// MainAreaWidget,
10+
// WidgetTracker
11+
// } from '@jupyterlab/apputils';
12+
13+
// import { Widget } from '@lumino/widgets';
14+
15+
import { WidgetTracker } from '@jupyterlab/apputils';
16+
17+
// import * as Blockly from 'blockly';
18+
19+
import { BlocklyEditorFactory } from './factory';
20+
21+
// namespace CommandIDs {
22+
// export const open = 'jupyterlab-blocky:open-editor';
23+
// }
24+
25+
import { BlocklyEditor } from './widget';
26+
27+
// const TOOLBOX = {
28+
// kind: 'flyoutToolbox',
29+
// contents : [
30+
// {
31+
// kind : 'block',
32+
// type : 'controls_if'
33+
// },
34+
// {
35+
// kind : 'block',
36+
// type : 'controls_ifelse'
37+
// },
38+
// {
39+
// kind : 'block',
40+
// type : 'logic_compare'
41+
// },
42+
// {
43+
// kind : 'block',
44+
// type : 'logic_operation'
45+
// },
46+
// {
47+
// kind : 'block',
48+
// type : 'logic_boolean'
49+
// },
50+
// {
51+
// kind : 'block',
52+
// type : 'controls_whileUntil'
53+
// },
54+
// {
55+
// kind : 'block',
56+
// type : 'controls_repeat_ext'
57+
// },
58+
// {
59+
// kind : 'block',
60+
// type : 'controls_for'
61+
// },
62+
// {
63+
// kind : 'block',
64+
// type : 'math_number'
65+
// },
66+
// {
67+
// kind : 'block',
68+
// type : 'math_arithmetic'
69+
// }
70+
// ]
71+
// };
72+
73+
/**
74+
* The name of the factory that creates the editor widgets.
75+
*/
76+
const FACTORY = 'Blockly editor';
3477

3578
/**
3679
* Initialization data for the jupyterlab-blocky extension.
3780
*/
3881
const plugin: JupyterFrontEndPlugin<void> = {
3982
id: 'jupyterlab-blocky:plugin',
4083
autoStart: true,
41-
requires: [ICommandPalette, ILayoutRestorer],
42-
activate: (
43-
app: JupyterFrontEnd,
44-
palette: ICommandPalette,
45-
restorer: ILayoutRestorer
46-
) => {
84+
// requires: [ICommandPalette, ILayoutRestorer],
85+
// activate: (
86+
// app: JupyterFrontEnd,
87+
// palette: ICommandPalette,
88+
// restorer: ILayoutRestorer
89+
// ) => {
90+
requires: [ILayoutRestorer],
91+
activate: (app: JupyterFrontEnd, restorer: ILayoutRestorer) => {
4792
console.log('JupyterLab extension jupyterlab-blocky is activated!');
4893

49-
let editorPanel: MainAreaWidget | null = null;
94+
// let editorPanel: MainAreaWidget | null = null;
5095

51-
// Namespace for the tracker
52-
const namespace = 'documents-example';
96+
// // Namespace for the tracker
97+
// const namespace = 'documents-example';
98+
const namespace = 'jupyterlab-blocky';
5399
// Creating the tracker for the document
54-
const tracker = new WidgetTracker<MainAreaWidget>({ namespace });
100+
// const tracker = new WidgetTracker<MainAreaWidget>({ namespace });
101+
const tracker = new WidgetTracker<BlocklyEditor>({ namespace });
55102

56103
// Handle state restoration.
57104
if (restorer) {
58105
// When restoring the app, if the document was open, reopen it
59106
restorer.restore(tracker, {
60-
command: CommandIDs.open,
61-
name: widget => ''
107+
// command: CommandIDs.open,
108+
// name: widget => ''
109+
command: 'docmanager:open',
110+
args: widget => ({ path: widget.context.path, factory: FACTORY }),
111+
name: widget => widget.context.path
62112
});
63113
}
64114

65-
app.commands.addCommand(CommandIDs.open, {
66-
label: 'Open Blockly Editor',
67-
caption: 'Open Blockly Editor',
68-
isEnabled: () => true,
69-
execute: () => {
70-
const content = new Widget();
71-
content.id = 'jp-Blockly-container';
72-
editorPanel = new MainAreaWidget({ content });
73-
editorPanel.title.label = 'Blockly Editor';
74-
75-
editorPanel.disposed.connect(() => {
76-
editorPanel = null;
77-
workspace.dispose();
78-
});
79-
80-
app.shell.add(editorPanel, 'main');
81-
82-
const workspace = Blockly.inject(content.node, {
83-
toolbox: TOOLBOX
84-
});
85-
console.debug('Blockly:', workspace);
86-
}
115+
// app.commands.addCommand(CommandIDs.open, {
116+
// label: 'Open Blockly Editor',
117+
// caption: 'Open Blockly Editor',
118+
// isEnabled: () => true,
119+
// execute: () => {
120+
// const content = new Widget();
121+
// content.id = 'jp-Blockly-container';
122+
// editorPanel = new MainAreaWidget({ content });
123+
// editorPanel.title.label = 'Blockly Editor';
124+
125+
// editorPanel.disposed.connect(() => {
126+
// editorPanel = null;
127+
// workspace.dispose();
128+
// });
129+
130+
// app.shell.add(editorPanel, 'main');
131+
132+
// const workspace = Blockly.inject(content.node, {
133+
// toolbox: TOOLBOX
134+
// });
135+
// console.debug('Blockly:', workspace);
136+
// }
137+
// Creating the widget factory to register it so the document manager knows about
138+
// our new DocumentWidget
139+
const widgetFactory = new BlocklyEditorFactory({
140+
name: FACTORY,
141+
modelName: 'text',
142+
fileTypes: ['json']
87143
});
88144

89-
if (palette) {
90-
palette.addItem({
91-
command: CommandIDs.open,
92-
category: 'Blockly Editor'
145+
// if (palette) {
146+
// palette.addItem({
147+
// command: CommandIDs.open,
148+
// category: 'Blockly Editor'
149+
// Add the widget to the tracker when it's created
150+
widgetFactory.widgetCreated.connect((sender, widget) => {
151+
// Notify the instance tracker if restore data needs to update.
152+
widget.context.pathChanged.connect(() => {
153+
tracker.save(widget);
93154
});
94-
}
155+
// }
156+
tracker.add(widget);
157+
});
158+
// Registering the widget factory
159+
app.docRegistry.addWidgetFactory(widgetFactory);
95160
}
96161
};
97162

0 commit comments

Comments
 (0)