Blockly Factory workspace loses focus while updating preview workspace

[anand abv]

I am integrating blockly workspace into my react application. I'm following the same approach from the blocklyfactory demo codebase  (https://github.com/google/blockly/blob/b6282096429c9a4ef9c53228097cd744457f1065/demos/blockfactory/factory.js#L164) for updating preview workspace. But whenever the previewworkspace gets disposed and injected again, I'm losing focus from the factory workspace which interrups the user flow. 

For eg. I've created a value block in the factory workspace now that block gets updated in the preview workspace and when I start to type NAME or any value, the focus gets removed half the way itself.

createPreviewBlock(blockType, code) {

const jsonCode = JSON.parse(code);

this.createNewBlock(blockType, jsonCode);

const previewBlock = this.previewWorkspace.newBlock(blockType);

previewBlock.initSvg();

previewBlock.render();

previewBlock.setMovable(false);

previewBlock.setDeletable(false);

previewBlock.moveBy(15, 10);

this.previewWorkspace.clearUndo();

}

updateFactoryPreview() {

try {

if (this.previewWorkspace) {

this.previewWorkspace.dispose();

}

const blocklyConfig = {

media: '/blockly/media/',

scrollbars: true,

theme: DarkTheme,

grid: {

spacing: 20,

length: 3,

colour: 'rgba(255, 255, 255, 0.1)',

snap: true,

},

};

this.previewWorkspace = BlocklyFactory.inject(

this.manager.containers.blocklyPreviewContainer,

blocklyConfig,

);

this.previewWorkspace.clear();

const { blockType, code } = this.getCodeFromBlocks();

if (code) {

this.createPreviewBlock(blockType, code);

}

} catch (error) {

console.error(error);

}

}

In the above code, If I didn't assign the newly created workspace to this.previewWorkspace, the focus is still there (ofcourse the new blocks won't be created). and also If I comment the "this.createPreviewBlock(blockType, code)" line, the focus is still there...

What can I do to make the focus to stay in the factory workspace itself like the one in the hosted demo (https://blockly-demo.appspot.com/static/demos/blockfactory/index.html)

[Beka Westberg]

Hello,

Can you explain what you mean by the focus being removed? Is the text input being closed in the middle of editing?

Hopefully with a bit more information I can give a suggestion of how to deal with this!

--Beka

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/1c8fdc7a-2728-465d-b897-9783aa9b24b3n%40googlegroups.com.

[anand abv]

Yes,
The text input closes in the middle of editing.
Any popup that was opened was closed immediately.
 

For eg:  I couldn't use the angle clock from angle input or color input properly (since each change in the angle clock is an update that triggers the updation or previewWorkspace).

[Beka Westberg]

Hello again,

I think there's a call to `hideChaff` happening somewhere which is hiding the text input. Text inputs exist globally and aren't specific to an individual workspace.

My guess is that the `this.previewWorkspace.clear()` is triggering it. I would try commenting that out and seeing if it removes the focus / hideChaff issues.

I hope that helps! If you have any further questions please reply!

--Beka

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/f9f49162-6cc2-4039-b565-1e06f4511bd1n%40googlegroups.com.

[Mark Friedman]

Anand,

  Note that the code Blockly Factory code that you link to (here) only re-injects the preview workspace when the LTR/RTL text direction changes, whereas afaict your code appears to be always re-injecting the preview workspace.  Perhaps that could be a cause of the behavior that you are seeing.

-Mark

On Fri, Jan 5, 2024 at 8:21 AM anand abv <ananda...@gmail.com> wrote:

--

[anand abv]

Hello,
    Thank you @mark for pointing me the issue. That is the exact issue in my codebase. I didn't notice the direction change condition on the updatePreview function. Thank you @mark and @beka for your timely help.

-Anand