workspace to readOnly true

[vantest...@gmail.com]

Hi

When you start blockly, it runs through this piece of code:

workspace = Blockly.inject('blocklyDiv',
          {comments: true,
           collapse: true,
           disable: true,
           grid:
             {spacing: 25,
              length: 3,
              colour: '#ccc',
              snap: true},
           horizontalLayout: side == 'top' || side == 'bottom',
           maxBlocks: Infinity,
           media: '../media/',
           oneBasedIndex: true,
           readOnly: false,
           rtl: rtl,
           scrollbars: true,
           toolbox: toolbox,
           toolboxPosition: side == 'top' || side == 'start' ? 'start' : 'end',
           zoom:
             {controls: true,
              wheel: true,
              startScale: 1.0,
              maxScale: 4,
              minScale: .25,
              scaleSpeed: 1.1}
          });

There is a readOnly field somewhere in the middle.
I would like to make it true when I press a button.
Is this possible?

Thanks,
Walter

[Neil Fraser]

Readonly cannot be changed after init.  There are too many event handlers that would need to be added and removed.

The best option for faking it is to place a transparent div on top of Blockly so that the user can't interact with the blocks.  You should also de-select the current block so that the delete key won't work.  If you want to get it completely correct, you'll also need to deal with paste (maybe by clearing Blockly.clipboard).

--
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+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Neil Fraser
https://neil.fraser.name

[vantest...@gmail.com]

Hi Neil

Thanks, I can work with this.

Walter

Op vrijdag 24 maart 2017 11:22:13 UTC+1 schreef Neil Fraser:

To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Harsh Chaturvedi]

Hi Neil,

I was working with your suggestions and added an element on top of the workspace.

However, the scroll is not working (mouse wheel scroll, the scrolling through scroll bar still works). Here is the relevant code - 

Html - 

<div id="blocklyDiv-readOnly" style="height: 100%; width: 100%;"></div>

JS - 

blocklyReadOnlyWorkspace = Blockly.inject(blocklyDivId + "-readOnly", {
            toolbox: blocklyNamespace.Constants.EmptyToolbox,
            scrollbars: true,
            move: {
                scrollbars: {
                    horizontal: true,
                    vertical: true
                },
                drag: true,
                wheel: true
            },
            //initialising the theme to customise the block colours and block styles
            theme: Blockly.Themes.Majestic
        });

CSS - 

#blocklyDiv-readOnly:before {
            content: '';
            height: 98%;
            width: 98%;
            display: block;
            position: absolute;
            background-color: transparent;
            z-index: 99;
        }

Any help to make the scrolling functional would be appreciated.

Regards,

Harsh

To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Neil Fraser]

You can change this boolean to activate or deactivate the mouse wheel for scrolling:

Blockly.getMainWorkspace().options.moveOptions.wheel = false;

Blockly.getMainWorkspace().options.moveOptions.wheel = true;

There's also a companion property for zooming with the mouse wheel:

Blockly.getMainWorkspace().options.zoomOptions.wheel = false;

Blockly.getMainWorkspace().options.zoomOptions.wheel = true;

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/6989f993-171e-4c22-9acb-d7a32e871178n%40googlegroups.com.