Angular Sample - XML supplied to Blockly.inject does not appear in browser about blockly-samples HOT 7 CLOSED

Additional Observations

Whilst working on this a bit more, I've noticed what I assume are side effects of the Blockly.inject() method not being in play, the following don't work on my instance

1. The scroll bars are inactive
2. I'm unable to drag blocks around the workspace
3. The wheel doesn't zoom in/out of the workspace.

from blockly-samples.

If you pass the toolbox in Blockly.inject as a string, then Blockly would parse that xml string. If you pass the toolbox as an xml string, then it's not injected anywhere in the browser.
Think of it as Blockly having two ways of reading toolbox xml:

• the xml is already injected (by you) in the browser, and you pass us the XML Element (Node)
• the xml you're passing is an xml string, and we can parse that string ourselves.
  See https://github.com/google/blockly/blob/master/core/options.js#L304 for details.

The Blockly Angular sample takes the second approach.

Hard to say what's going on with your code without seeing the xml service, but if it returns a string then it needs to be a parsable xml string by Blockly.xml.textToDom, otherwise it must return an xml dom element.

Here's a working example of using a dom element for the toolbox instead of a string:
https://github.com/google/blockly-samples/compare/angular_toolbox_dom

from blockly-samples.

Thanks for all that Sam,

It does rather sound like I'm passing it in the wrong format. I'll have a look a bit later and see if that does the trick.

If you're interested, my repo can be found here - https://github.com/christopherallanperry/ng_blockly

And thanks again.

from blockly-samples.

I've just pushed an updated version to my repo based on turning the output of the Blockly service into an XML DOM structure, then injected that into Blockly.inject().

Again, without using blocklyDiv.innerHTML = xml to set up the DOM, I'm seeing the same errors. Note: the version I've just pushed has all that commented out for the moment, so you should see what I do if you spin it up.

Grateful for any additional suggestions at this point.

from blockly-samples.

Took a quick look at your repo, and it looks like there's a few things interfering with each other.
The angular sample injects a blockly workspace into the #blocklyDiv div, but then you have the code demo in there which injects a workspace in the #content_blocks div.

The toolbox XML specifies each category name using Blockly's messaging format (eg: <category name="%{BKY_CATLOGIC}">)
This is why when you use the XML from the code demo with the angular sample, without running through the step the code demo does to replace these encoded messages with their values from Blockly.Msg you end up with the result above.

To get around this, you can either remove these category names and replace them with English strings, if English is the only language you're hoping to support.
Alternatively, you can do something like what the code demo does and these messages to the Blockly.Msg Object like so:

import { Component, OnInit } from "@angular/core";

import { BlocklyXmlService } from "src/app/_services/blocklyXml.service";
import * as Blockly from "blockly"; // Includes Blockly core, Blockly built-in blocks, the JavaScript generator and the English lang files.

@Component({
  selector: "app-blockly",
  templateUrl: "./blockly.component.html",
  styleUrls: ["./blockly.component.css"],
  providers: [BlocklyXmlService]
})
export class BlocklyComponent implements OnInit {
  public blocklyXml;

  constructor(private blocklyXmlService: BlocklyXmlService) {}

  createBlocklyDiv(xml: string) {
    const blocklyDiv = document.getElementById("blocklyDiv");

    Blockly.Msg['CATLOGIC'] = 'Logic';
    Blockly.Msg['CATLOOPS'] = 'Loops';
    Blockly.Msg['CATMATH'] = 'Math';
    Blockly.Msg['CATTEXT'] = 'Text';
    Blockly.Msg['CATLISTS'] = 'Lists';
    Blockly.Msg['CATCOLOUR'] = 'Colour';
    Blockly.Msg['CATVARIABLES'] = 'Variables';
    Blockly.Msg['CATFUNCTIONS'] = 'Functions';
    
    if (xml.length > 0) {
      Blockly.inject(blocklyDiv, {
        readOnly: false,
        move: {
          scrollbars: true,
          drag: true,
          wheel: true
        },
        toolbox: xml
      } as Blockly.BlocklyOptions);
    } else {
      console.log("XML data is not here yet.");
    }
  }

  ngOnInit() {
    this.blocklyXmlService
      .getBlocklyXml()
      .subscribe(xmlString => this.createBlocklyDiv(xmlString));
  }
}

from blockly-samples.

Sam,

This morning, I've been looking at your suggestions and have had mixed success.

For the messaging format, I've gone with using English strings, that will work fine for our target audience at this point in time.

For the workspace conflict, I've been having less success. Using a component set up as you've shown above, I get the following:

1. -ve: The grid and workspace controls (zoom in/out, zoom reset) are missing
2. -ve: The tabs for the code languages are inaccessible
3. The console shows an Uncaught TypeError: Cannot read property 'outerHTML' of null
4. +ve: Blocks placed on the workspace can be receive focus and can be repositioned

If I add the line blocklyDiv.innerHTML = xml; back in, I get:

1. +ve: The grid and controls are visible
2. +ve: The tabs for the code languages are accessible and showing their respective outputs
3. +ve: No console errors
4. -ve: Once released onto the workspace, blocks cannot receive focus, and cannot be re-positioned. New blocks can be docked with those already on the workspace, but cannot be moved again once the mouse button has been released.

For context, what I've been asked to look at is whether we could use Blockly as a user friendly way of generating business rules, that we can output into XML to use as a feed for generating ALFA(XACML). For that, I need to be able to generate suitable custom blocks, and then output the XML.

I very much appreciate your help on this. Can you offer any guidance on the best way of ending up with the workspace I need to achieve the goal above?

from blockly-samples.

I've been able to resolve the focus/re-positioning issue by setting a negative z-index on blocklyDiv. That in combination with putting blocklyDiv.innerHTML = xml; back into the blockly.component.ts file has got me pretty much where I need to be at this point, though I recognise that there may still be things in the background that need addressing.

I'm happy to close the issue down at this point. Again, many thanks for your help. I've a much better understanding of some of the behaviour of Blockly than I did have.

Thanks

from blockly-samples.