eval(zebra.Import...) & zebkit.require(..) to add sub package

[erata]

hi, i used previous edition zebkit (zebra) and i could import package and run it with eval(zebra.Import(...)). when i try to upgrade script to zebkit (in angular 2) i take error because of zebkit.require usage. i take errors like below:

TypeError: Cannot read property 'setLayout' of undefined zebkit.js?1506582261744:1116 TypeError: Cannot read property 'setLayout' of undefined at Package.eval

i can reach zebkit object successfully but root element undefined. console.warn(zebkit) //got reference let root:any = new ui.zCanvas(pageCanvas).root; //existing canvas ref console.warn( root) //undefined

is there a way load sub package of zebkit as previous version zebra as zebra.ready.. zebra.Import.., i take error with require usage of zebkit.

[barmalei]

Building code with "zebra.require(...)" is the right place that guarantees zebkit has been initialized. This is more flexible way (not for now, but for future dynamic packages loading) replacement for "zebkit.ready(...)" method.

In your case, most likely, JSON resources required with zebkit were not found and loaded properly. Please check JS console regarding HTTP 404 errors. Zebkit expects "rs" folder with JSON files be stored in the same place where zebkit JS is located.

Zebkit still provides shortcut to import package entities into a local name space. Use "zebkit.import(...)" instead of "zebkit.Import(...)". Pay attention the method has been deprecated and can be removed in the next zebkit version.

[erata]

i download all scripts and json files from http://zebkit.org/ver/latest/zebkit.runtime.zip and i see no problem with json file load on network (status 200). as you said above i tried import zebkit.import but nothing changed. my code is below:

 zebkit.require("ui", "layout", function(ui:any, layout:any) {
       ui.config("theme", "light");
       eval(zebkit.import("ui","layout"))

       //var htmlCanvas = document.getElementById("canvasX");
       //console.warn(htmlCanvas)
       //var canvas = new ui.zCanvas(htmlCanvas);

       var canvas = new ui.zCanvas(500, 400);
       console.warn("zebkit canvas: ",canvas)

       var root = canvas.root;
       console.warn("root: ", root)

       root.setLayout(new layout.BorderLayout(8));
       root.add("bottom", new ui.Button("Hello zebkit"));
     })

with this code i get the error:

only one time i get what i want but i could not catch it again which is below:

with existing html canvas (above code - taken into the comment line ) i get belove error:

i call zebkit code in a function as initZebkit(){...} when i log it i see it some time enter in zebkit.require(...) sometime dont,

i dont understand where i mix. when i use zebkit.ready it always enter in when it ready, but zebkit.require not.

[barmalei]

Ok, is it possible to have small test case angular + zebkit for me to explore the situation in more details ?

Think it can be a bug in zebkit ("zebkit.require()" is called earlier then JSON stuff) and the bug is triggered with combination Angular + zebkit.

[erata]

Ok, in angular 2 i want to add some shapes to pdf page with zebkit (pdf pages are canvas and i could add shapes using previous version of zebkit, zebra). when pdf doc load i call initZebkit() function and i try to add some shapes (above code Button) on existing pdf page canvas (for example i get page 1:
var htmlCanvas = document.getElementById("1")).

my code structure is belove: load pdf -> call zebkit (initZebkit()) -> add shape to pdf page

when i call initZebkit(){...} it sometime enter in require block

 zebkit.require("ui", "layout", function(ui:any, layout:any) {
  var canvas = new ui.zCanvas(500, 400);
   console.warn("zebkit canvas: ", canvas)
})

some time not. when enter require block i mostly get undefined or null console values, I took the value I wanted in just a few experiments.

[barmalei]

Are you using "<script src="..." ...>" element to load zebkit JS ?

[erata]

No, i use angular 2 seed and i add zebkit scripts in project.config.ts file as:

{src: `${this.APP_SRC}/template/js/plugins/ui/zebkit/zebkit.js`, inject: true, vendor: false},
  {src: `${this.APP_SRC}/template/js/plugins/ui/zebkit/zebkit_designer.js`, inject: true, vendor: false},
  {src: `${this.APP_SRC}/template/js/plugins/ui/zebkit/ui.date.js`, inject: true, vendor: false},
  {src: `${this.APP_SRC}/template/js/plugins/ui/zebkit/ui.vk.js`, inject: true, vendor: false},

i add zebkit files as:

and network load status is below:

[erata]

hi, is there a way to overcome this initialize issue, what can i do for the shortest way

[barmalei]

If you have an option to load zebkit JS statically via script section in a page you should try. Definitely the reason is Angular dynamic loading. It can take time to fix zebkit to track its loading correctly under angular (or a similar case).

[erata]

i add to index.html page <script type="text/javascript" src="http://zebkit.org/ver/latest/zebkit.min.js"></script> but nothing changed. problem continues

[barmalei]

Very strange thing. May be a bit stupid question, but anyway if you open "http://www.zebkit.org/website/dark/about.html" page on zebkit web site does it load examples correctly ?

[erata]

i try again, with usage <script type="text/javascript" src="http://zebkit.org/ver/latest/zebkit.min.js"></script>

the initialize frequency increased of zebkit.require.

if i first load page i get values null-undefined with error:

if i refresh page second ot third time, i start to take wanted value:

i think, running with cached script, it give wanted values

[erata]

"...does it load examples correctly ?", yes it does. no problem opening page.

[barmalei]

Weird. The main question to me how to re-produce it in my local environment.

[erata]

i use declared variable as reference to zebkit.js to reach zebkit package declare var zebkit:any;

when i write declared variable at console.log for the first load, i see no problem

[erata]

i think, reaching sub package "ui","draw","layout"... is the main problem.

[erata]

"if i refresh page second ot third time, i start to take wanted value"

this is not very consistent, sometimes it should refresh six or seven time refresh to get wanted values of sub package initialize

 var canvas = new ui.zCanvas(500, 400);
   console.warn("zebkit canvas: ", canvas)

[barmalei]

Loading zebkit triggers loading bunch of JSONs. The situation you have described most likely has caused with earlier (then expected) call of passed to "zebkit.require(...)" callback. Earlier means "ui.web.json" configuration file loading is not completed yet ("ui.web.json" is responsible for zCanvas "root" field initialization). I think you should see it in JS console: exception should precede loading of "ui.web.json" file.

"Now I have no idea how it can happen with static zebkit JS loading. It works everywhere, but for some reason not in your case. Probably I have to try ts + Angular + zebkit to reproduce the situation.

[erata]

is it possible call "ui.web.json" file manually before zebkit.require(...) with some code crack as require('...ui.web.json'); then call zebkit.require. if it possible could you show me how. thanks again.

[barmalei]

Have installed angular and build simple application. Think I was able to re-produce the problem. Hope can fix it soon.

[barmalei]

Actually the simple angular application doesn't expose any problem with zebkit loading. Have added zebkit canvas in angular app html as follow:

<!doctype html>
<html lang="en">
<head>
    <script type="text/javascript" src="http://zebkit.org/ver/latest/zebkit.min.js"></script>

  <meta charset="utf-8">
  <title>Ngapp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>

    <script>
        zebkit.require("ui", function(ui) {
            var c = new ui.zCanvas();
            c.root.add(new ui.Button("Test").setBounds(30, 30, 200, 80));
        });
    </script>

  <app-root></app-root>
</body>
</html>

[barmalei]

Also "declare var zebkit:any;" declaration works in my case. The step I have passed to make zebkit visible in angular ts are the following:

• Add zebkit stuff into "src/assets/js" of your project
• Add zebkit script section into "index.html" :

  <script type="text/javascript" src="./assets/js/zebkit.js"></script>  

• Add "declare var zebkit:any;" into app.component.ts
• Call "zebkit.require(...)" in constrictor of class in app.component.ts

[erata]

Hi, again. as you said i add script ref as <script type="text/javascript" src="./template/js/plugins/ui/zebkit/zebkit.js"></script> with the code

 console.warn(zebkit);
    zebkit.ui.config("theme", "light");

    zebkit.require("ui", function(ui:any) {
      var c = new ui.zCanvas();
      c.root.add(new ui.Button("Test").setBounds(30, 30, 200, 80));
      console.warn("zebkit canvas: ", c)
    });

i get this result if enter in require block(if do not enter in only write zebkit value):

i call zebkit in prepare.component.ts (sub component of app.component.ts)

it did not run yet.

[erata]

After restart computer with below code ( and declare var zebkit:any exist)

initZebra() {
    console.warn("init zebkit")

    console.warn(zebkit);
    zebkit.ui.config("theme", "light");

    zebkit.require("ui", function(ui:any) {
      var c = new ui.zCanvas();
      console.warn("zebkit canvas: ", c)
      c.root.add(new ui.Button("Test").setBounds(30, 30, 200, 80));
    });
}

i got the error, different from last experinced:

[erata]

before getting zebkit add error (https://user-images.githubusercontent.com/3416873/31059688-28836af4-a70f-11e7-9315-eddf08909f51.PNG) i got below console err messages:

[barmalei]

Looks like total mess :) Is it possible for you to bundle simplified and cut variant of your project that exposes the problem or problems ? It is really helps faster understanding and fixing the problem.

Which version of zebkit are you using: -- latest -- github -- 2017.05 ? (I have also a little bit improved JSON loading schema, but have not committed updated code yet in git, but it can be found in "http://zebkit.org/ver/sandbox")

Actually in my case Angular 2 + zebkit works in different variations. I will continue looking for a problem.

[erata]

i create a new angular 2 CLI project and test zebkit.js as you said above settings and it run properly

index.html ref:

the code:

    console.warn(zebkit);
    zebkit.ui.config("theme", "light");

    zebkit.require("ui", function(ui) {
        var c = new ui.zCanvas(800,600);
        c.setBackground("yellow")
        console.log(zebkit);
        c.root.add(new ui.Button("Test").setBounds(30, 30, 200, 80));
        c.root.add(new ui.Button("Test2").setBounds(30, 130, 200, 80));
        console.log(c);
    });

when i run the same code with same settings in angular 2 seed network:

console error message:

i also test sandbox version( http://zebkit.org/ver/sandbox/zebkit.min.js ) it run with angular cli but not angular seed. i got the same result above of them.

angular cli and angular seed results are different.