Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: temporarily disable functionality in scratch-gui for compatibility with patched scratch-blocks #1

Merged
merged 1 commit into from
Apr 19, 2024
Merged

fix: temporarily disable functionality in scratch-gui for compatibility with patched scratch-blocks #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 33 additions & 22 deletions src/containers/blocks.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,14 +95,24 @@ class Blocks extends React.Component {
this.ScratchBlocks.statusButtonCallback = this.handleConnectionModalStart;
this.ScratchBlocks.recordSoundCallback = this.handleOpenSoundRecorder;

this.ScratchBlocks.FieldColourSlider.activateEyedropper_ = this.props.onActivateColorPicker;
// this.ScratchBlocks.FieldColourSlider.activateEyedropper_ = this.props.onActivateColorPicker;
this.ScratchBlocks.Procedures.externalProcedureDefCallback = this.props.onActivateCustomProcedures;
this.ScratchBlocks.ScratchMsgs.setLocale(this.props.locale);

const theme = this.ScratchBlocks.Theme.defineTheme('Scratch', {
'base': this.ScratchBlocks.Themes.Zelos,
'startHats': true
});
const workspaceConfig = defaultsDeep({},
Blocks.defaultOptions,
this.props.options,
{rtl: this.props.isRtl, toolbox: this.props.toolboxXML, colours: getColorsForTheme(this.props.theme)}
{
rtl: this.props.isRtl,
toolbox: this.props.toolboxXML,
colours: getColorsForTheme(this.props.theme),
gonfunko marked this conversation as resolved.
Show resolved Hide resolved
renderer: 'zelos',
theme: theme,
}
);
this.workspace = this.ScratchBlocks.inject(this.blocks, workspaceConfig);

Expand All @@ -129,10 +139,11 @@ class Blocks extends React.Component {
// we actually never want the workspace to enable "refresh toolbox" - this basically re-renders the
// entire toolbox every time we reset the workspace. We call updateToolbox as a part of
// componentDidUpdate so the toolbox will still correctly be updated
this.setToolboxRefreshEnabled = this.workspace.setToolboxRefreshEnabled.bind(this.workspace);
this.workspace.setToolboxRefreshEnabled = () => {
this.setToolboxRefreshEnabled(false);
};
this.setToolboxRefreshEnabled = () => {};
// this.workspace.setToolboxRefreshEnabled.bind(this.workspace);
// this.workspace.setToolboxRefreshEnabled = () => {
// this.setToolboxRefreshEnabled(false);
// };

// @todo change this when blockly supports UI events
addFunctionListener(this.workspace, 'translate', this.onWorkspaceMetricsChange);
Expand Down Expand Up @@ -213,20 +224,20 @@ class Blocks extends React.Component {
this.ScratchBlocks.ScratchMsgs.setLocale(this.props.locale);
this.props.vm.setLocale(this.props.locale, this.props.messages)
.then(() => {
this.workspace.getFlyout().setRecyclingEnabled(false);
// this.workspace.getFlyout().setRecyclingEnabled(false);
this.props.vm.refreshWorkspace();
this.requestToolboxUpdate();
this.withToolboxUpdates(() => {
this.workspace.getFlyout().setRecyclingEnabled(true);
// this.workspace.getFlyout().setRecyclingEnabled(true);
});
});
}

updateToolbox () {
this.toolboxUpdateTimeout = false;

const categoryId = this.workspace.toolbox_.getSelectedCategoryId();
const offset = this.workspace.toolbox_.getCategoryScrollOffset();
// const categoryId = this.workspace.toolbox_.getSelectedItem().getId();
// const offset = this.workspace.toolbox_.getCategoryScrollOffset();
this.workspace.updateToolbox(this.props.toolboxXML);
this._renderedToolboxXML = this.props.toolboxXML;

Expand All @@ -235,13 +246,13 @@ class Blocks extends React.Component {
// Using the setter function will rerender the entire toolbox which we just rendered.
this.workspace.toolboxRefreshEnabled_ = true;

const currentCategoryPos = this.workspace.toolbox_.getCategoryPositionById(categoryId);
const currentCategoryLen = this.workspace.toolbox_.getCategoryLengthById(categoryId);
if (offset < currentCategoryLen) {
this.workspace.toolbox_.setFlyoutScrollPos(currentCategoryPos + offset);
} else {
this.workspace.toolbox_.setFlyoutScrollPos(currentCategoryPos);
}
// const currentCategoryPos = this.workspace.toolbox_.getCategoryPositionById(categoryId);
// const currentCategoryLen = this.workspace.toolbox_.getCategoryLengthById(categoryId);
// if (offset < currentCategoryLen) {
// this.workspace.toolbox_.setFlyoutScrollPos(currentCategoryPos + offset);
// } else {
// this.workspace.toolbox_.setFlyoutScrollPos(currentCategoryPos);
// }

const queue = this.toolboxUpdateQueue;
this.toolboxUpdateQueue = [];
Expand Down Expand Up @@ -329,16 +340,16 @@ class Blocks extends React.Component {
}
}
onScriptGlowOn (data) {
this.workspace.glowStack(data.id, true);
// this.workspace.glowStack(data.id, true);
}
onScriptGlowOff (data) {
this.workspace.glowStack(data.id, false);
// this.workspace.glowStack(data.id, false);
}
onBlockGlowOn (data) {
this.workspace.glowBlock(data.id, true);
// this.workspace.glowBlock(data.id, true);
}
onBlockGlowOff (data) {
this.workspace.glowBlock(data.id, false);
// this.workspace.glowBlock(data.id, false);
}
onVisualReport (data) {
this.workspace.reportValue(data.id, data.value);
Expand Down Expand Up @@ -382,7 +393,7 @@ class Blocks extends React.Component {

// Remove and reattach the workspace listener (but allow flyout events)
this.workspace.removeChangeListener(this.props.vm.blockListener);
const dom = this.ScratchBlocks.Xml.textToDom(data.xml);
const dom = this.ScratchBlocks.utils.xml.textToDom(data.xml);
try {
this.ScratchBlocks.Xml.clearWorkspaceAndLoadFromXml(dom, this.workspace);
} catch (error) {
Expand Down
40 changes: 25 additions & 15 deletions src/lib/blocks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* @return {ScratchBlocks} ScratchBlocks connected with the vm
*/
export default function (vm, useCatBlocks) {
const ScratchBlocks = useCatBlocks ? require('cat-blocks') : require('scratch-blocks');
const {ScratchBlocks} = useCatBlocks ? require('cat-blocks') : require('scratch-blocks');
gonfunko marked this conversation as resolved.
Show resolved Hide resolved
const jsonForMenuBlock = function (name, menuOptionsFn, colors, start) {
return {
message0: '%1',
Expand Down Expand Up @@ -82,7 +82,7 @@ export default function (vm, useCatBlocks) {
}
menu.push([
ScratchBlocks.ScratchMsgs.translate('SOUND_RECORD', 'record...'),
ScratchBlocks.recordSoundCallback
'SOUND_RECORD'
]);
return menu;
};
Expand Down Expand Up @@ -158,6 +158,16 @@ export default function (vm, useCatBlocks) {
ScratchBlocks.Blocks.sound_sounds_menu.init = function () {
const json = jsonForMenuBlock('SOUND_MENU', soundsMenu, soundColors, []);
this.jsonInit(json);
this.inputList[0].removeField('SOUND_MENU');
this.inputList[0].appendField(new ScratchBlocks.FieldDropdown(() => {
return soundsMenu();
}, (newValue) => {
if (newValue === 'SOUND_RECORD') {
ScratchBlocks.recordSoundCallback();
return null;
gonfunko marked this conversation as resolved.
Show resolved Hide resolved
}
return newValue;
}), 'SOUND_MENU');
};

ScratchBlocks.Blocks.looks_costume.init = function () {
Expand Down Expand Up @@ -323,16 +333,16 @@ export default function (vm, useCatBlocks) {
return monitoredBlock ? monitoredBlock.isMonitored : false;
};

ScratchBlocks.FlyoutExtensionCategoryHeader.getExtensionState = function (extensionId) {
if (vm.getPeripheralIsConnected(extensionId)) {
return ScratchBlocks.StatusButtonState.READY;
}
return ScratchBlocks.StatusButtonState.NOT_READY;
};

ScratchBlocks.FieldNote.playNote_ = function (noteNum, extensionId) {
vm.runtime.emit('PLAY_NOTE', noteNum, extensionId);
};
// ScratchBlocks.FlyoutExtensionCategoryHeader.getExtensionState = function (extensionId) {
// if (vm.getPeripheralIsConnected(extensionId)) {
// return ScratchBlocks.StatusButtonState.READY;
// }
// return ScratchBlocks.StatusButtonState.NOT_READY;
// };
//
// ScratchBlocks.FieldNote.playNote_ = function (noteNum, extensionId) {
// vm.runtime.emit('PLAY_NOTE', noteNum, extensionId);
// };

// Use a collator's compare instead of localeCompare which internally
// creates a collator. Using this is a lot faster in browsers that create a
Expand All @@ -341,9 +351,9 @@ export default function (vm, useCatBlocks) {
sensitivity: 'base',
numeric: true
});
ScratchBlocks.scratchBlocksUtils.compareStrings = function (str1, str2) {
return collator.compare(str1, str2);
};
// ScratchBlocks.scratchBlocksUtils.compareStrings = function (str1, str2) {
// return collator.compare(str1, str2);
// };

// Blocks wants to know if 3D CSS transforms are supported. The cross
// section of browsers Scratch supports and browsers that support 3D CSS
Expand Down
20 changes: 10 additions & 10 deletions src/lib/make-toolbox-xml.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import ScratchBlocks from 'scratch-blocks';
import {ScratchBlocks} from 'scratch-blocks';
import {defaultColors} from './themes';

const categorySeparator = '<sep gap="36"/>';
Expand All @@ -13,7 +13,7 @@ const motion = function (isInitialSetup, isStage, targetId, colors) {
);
// Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
return `
<category name="%{BKY_CATEGORY_MOTION}" id="motion" colour="${colors.primary}" secondaryColour="${colors.tertiary}">
<category name="${ScratchBlocks.ScratchMsgs.translate('CATEGORY_MOTION', 'Motion')}" id="motion" colour="${colors.primary}" secondaryColour="${colors.tertiary}">
${isStage ? `
<label text="${stageSelected}"></label>
` : `
Expand Down Expand Up @@ -158,7 +158,7 @@ const looks = function (isInitialSetup, isStage, targetId, costumeName, backdrop
const hmm = ScratchBlocks.ScratchMsgs.translate('LOOKS_HMM', 'Hmm...');
// Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
return `
<category name="%{BKY_CATEGORY_LOOKS}" id="looks" colour="${colors.primary}" secondaryColour="${colors.tertiary}">
<category name="${ScratchBlocks.ScratchMsgs.translate('CATEGORY_LOOKS', 'Looks')}" id="looks" colour="${colors.primary}" secondaryColour="${colors.tertiary}">
${isStage ? '' : `
<block type="looks_sayforsecs">
<value name="MESSAGE">
Expand Down Expand Up @@ -294,7 +294,7 @@ const looks = function (isInitialSetup, isStage, targetId, costumeName, backdrop
const sound = function (isInitialSetup, isStage, targetId, soundName, colors) {
// Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
return `
<category name="%{BKY_CATEGORY_SOUND}" id="sound" colour="${colors.primary}" secondaryColour="${colors.tertiary}">
<category name="${ScratchBlocks.ScratchMsgs.translate('CATEGORY_SOUND', 'Sound')}" id="sound" colour="${colors.primary}" secondaryColour="${colors.tertiary}">
<block id="${targetId}_sound_playuntildone" type="sound_playuntildone">
<value name="SOUND_MENU">
<shadow type="sound_sounds_menu">
Expand Down Expand Up @@ -350,7 +350,7 @@ const sound = function (isInitialSetup, isStage, targetId, soundName, colors) {
const events = function (isInitialSetup, isStage, targetId, colors) {
// Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
return `
<category name="%{BKY_CATEGORY_EVENTS}" id="events" colour="${colors.primary}" secondaryColour="${colors.tertiary}">
<category name="${ScratchBlocks.ScratchMsgs.translate('CATEGORY_EVENTS', 'Events')}" id="events" colour="${colors.primary}" secondaryColour="${colors.tertiary}">
<block type="event_whenflagclicked"/>
<block type="event_whenkeypressed">
</block>
Expand Down Expand Up @@ -391,7 +391,7 @@ const control = function (isInitialSetup, isStage, targetId, colors) {
// Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
return `
<category
name="%{BKY_CATEGORY_CONTROL}"
name="${ScratchBlocks.ScratchMsgs.translate('CATEGORY_CONTROL', 'Control')}"
id="control"
colour="${colors.primary}"
secondaryColour="${colors.tertiary}">
Expand Down Expand Up @@ -444,7 +444,7 @@ const sensing = function (isInitialSetup, isStage, targetId, colors) {
// Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
return `
<category
name="%{BKY_CATEGORY_SENSING}"
name="${ScratchBlocks.ScratchMsgs.translate('CATEGORY_SENSING', 'Sensing')}"
id="sensing"
colour="${colors.primary}"
secondaryColour="${colors.tertiary}">
Expand Down Expand Up @@ -526,7 +526,7 @@ const operators = function (isInitialSetup, isStage, targetId, colors) {
// Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
return `
<category
name="%{BKY_CATEGORY_OPERATORS}"
name="${ScratchBlocks.ScratchMsgs.translate('CATEGORY_OPERATORS', 'Operators')}"
id="operators"
colour="${colors.primary}"
secondaryColour="${colors.tertiary}">
Expand Down Expand Up @@ -715,7 +715,7 @@ const variables = function (isInitialSetup, isStage, targetId, colors) {
// Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
return `
<category
name="%{BKY_CATEGORY_VARIABLES}"
name="${ScratchBlocks.ScratchMsgs.translate('CATEGORY_VARIABLES', 'Variables')}"
id="variables"
colour="${colors.primary}"
secondaryColour="${colors.tertiary}"
Expand All @@ -728,7 +728,7 @@ const myBlocks = function (isInitialSetup, isStage, targetId, colors) {
// Note: the category's secondaryColour matches up with the blocks' tertiary color, both used for border color.
return `
<category
name="%{BKY_CATEGORY_MYBLOCKS}"
name="${ScratchBlocks.ScratchMsgs.translate('CATEGORY_MYBLOCKS', 'My Blocks')}"
id="myBlocks"
colour="${colors.primary}"
secondaryColour="${colors.tertiary}"
Expand Down