goessner / g2 Goto Github PK

View Code? Open in Web Editor NEW

34.0 34.0 6.0 9.61 MB

A 2d graphics command queue micro-library.

Home Page: https://goessner.github.io/g2

License: MIT License

JavaScript 100.00%

g2's People

Contributors

Stargazers

Watchers

Forkers

xiaohan2013 guoyu07

g2's Issues

symbols documentation

Symbols seem to be in g2.ext.js:

// g2 symbols (values & geometries) predefined
g2.symbol.nodcolor = "#333";
g2.symbol.nodfill  = "#dedede";
g2.symbol.nodfill2 = "#aeaeae";
g2.symbol.linkcolor = "#666";
g2.symbol.linkfill = "rgba(225,225,225,0.75)";
g2.symbol.dimcolor = "darkslategray";
g2.symbol.solid = [];
g2.symbol.dash = [15,10];
g2.symbol.dot = [4,4];
g2.symbol.tick = g2().p().m({x:0,y:-2}).l({x:0,y:2}).stroke({lc:"round",lwnosc:true});
g2.symbol.dashdot = [25,6.5,2,6.5];
g2.symbol.labelSignificantDigits = 3;  //  0.1234 => 0.123,  0.01234 => 0.0123, 1.234 => 1.23, 12.34 => 12.3, 123.4 => 123, 1234 => 1234

g2.symbol.dot = g2().cir({x:0,y:0,r:2,ls:"transparent"});
g2.symbol.sqr = g2().rec({x:-1.5,y:-1.5,b:3,h:3,ls:"transparent"});

This needs to be documented, especially in the API documentation.
Also in g2.core's use() it needs to be clearly stated where symbols can be found.

.exe() not chainable

.exe().exe() is not possible.
suspicion lies on async-functionality

mec pulley() bug?

See

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link href="https://gitcdn.xyz/repo/goessner/CodeMirror/master/theme/fh-do.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/codemirror.css">
</head>

<body>
  <canvas id="canvas" width="200" height="120" class="playable-canvas"></canvas>
  <div class="playable-buttons">
    <input id="edit" type="button" value="Edit" />
    <input id="reset" type="button" value="Reset" />
  </div>
  <textarea id="code" class="playable-code">
g.view({cartesian:true})
 .rope({p1:{x:50,y:50},r1:-20,p2:{x:125,y:50},r2:-30})
 .pulley({x:50,y:50,r:20})
 .nod({x:50,y:50})
 .pulley2({x:125,y:50,w:Math.PI/2,r:30})
 .nod({x:125,y:50})
 .exe(ctx)</textarea>

 <script src="https://rawgit.com/klawr/jauhl.github.io/master/src/g2.js"></script>
 <script src="https://rawgit.com/klawr/jauhl.github.io/master/src/g2.ext.js"></script>
 <script src="https://rawgit.com/klawr/jauhl.github.io/master/src/g2.mec.js"></script>
 <!-- <script src="https://gitcdn.xyz/repo/goessner/g2/master/src/g2.js"></script>
  -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/codemirror.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/mode/javascript/javascript.js"></script>
  <script>

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let reset = document.getElementById("reset");
let edit = document.getElementById("edit");
let g = g2();
let editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  mode:  "javascript",
  lineNumbers: true,
  theme: "fh-do",
  styleActiveLine: true,
  matchBrackets: true,
});
let code = editor.getValue();

function drawCanvas() {
  g.del().clr();
  eval(editor.getValue());
}

reset.addEventListener("click", function() {
  editor.setValue(code);
  drawCanvas();
});

edit.addEventListener("click", function() {
  editor.focus();
})

window.addEventListener("load", drawCanvas);

editor.on('change', function (editor) {
  drawCanvas();
});

</script>
</body>

</html>

This works as it should.

Now instead of

<script src="https://rawgit.com/klawr/jauhl.github.io/master/src/g2.js"></script>
<script src="https://rawgit.com/klawr/jauhl.github.io/master/src/g2.ext.js"></script>
<script src="https://rawgit.com/klawr/jauhl.github.io/master/src/g2.mec.js"></script>

(which were put by you in the fork of my pages repo) activate

<script src="https://gitcdn.xyz/repo/goessner/g2/master/src/g2.js"></script>

The layout is now broken.

The origin seems to be not in 0|0 anymore but instead in x|y of pulley().

g2.ext.md

.mark() still takes arrays as loc parameters e.g.:
.mark({mrk:'tick', loc:[0, 1/8, 2/8, 3/8, 4/8, 5/8, 6/8, 7/8, 1], dir:1}) is valid.

This needs to be added to the documentation.

g2 chart

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <canvas id="canvas" width="750" height="270" ></canvas>
    <script src="https://gitcdn.xyz/repo/goessner/g2/master/src/g2.js"></script>
    <script>

// aus Aufgabe 2.2
function buildgraph() {
    mec.values = [];
    for (mec.phi = 0; mec.phi < 360-1; mec.phi++) {  // phi in Grad
        mec.phi = mec.phi*Math.PI/180; // phi to Rad für Math-Funktionen
        mec.values.push(+mec.A().x.toFixed(2),+mec.A().y.toFixed(2));
        mec.phi = mec.phi*180/Math.PI; // phi to Grad zum Inkrementieren
    }
    mec.phi = 0;
}


let ctx = document.getElementById("canvas").getContext("2d"),
    mec = { // aus Aufgabe 2.2
        phi:0,
        a:170,
        b:50,

        ephi: function() { return { x:Math.cos(this.phi),
                                    y:Math.sin(this.phi) }},

        A: function() {return { x:this.a*this.ephi().x,
                                y:this.b*this.ephi().y }},
        values: []
    },
    g = g2()
;


buildgraph();

g.view({cartesian:true})
 .chart({ x:35, y:35, b:680, h:200,
          title:"Aufgabe 3.2 (2.2)",
          funcs:[{
              data:mec.values,
              fill:true
          }],
          xaxis:{
              title:"x",
              origin:true,
              grid:true
          },
          yaxis:{
              title:"y",
              origin:true,
              grid:true
          }
        })
 .exe(ctx);


    </script>
</body>
</html>

throws error ReferenceError: assignment to undeclared variable z0

State and Style example ...

The most inner beg ... end effects only the embedded circle of the yingyang symbol, so that it is more natural to add the style to the circle directly ...

    const ctx=document.getElementById("c").getContext("2d"),
          pi = Math.PI, dark = "#444", light = "#eee";
    g2().beg({x:50,y:50,scl:2,fs:light,ls:dark,lw:2})
            .cir({x:0,y:0,r:20})
            .beg({fs:"@ls"})
                .p()
                .m({x:0,y:-20})
                .a({dw:pi,x:0,y:0})
                .a({dw:-pi,x:0,y:20})
                .a({dw:-pi,x:0,y:-20})
                .z()
                .fill()
                .cir({x:0,y:-10,r:3})
//                .beg({ls:light,fs:"@ls"})
                    .cir({x:0,y:10,r:3,ls:light,fs:"@ls"})
//                .end()
            .end()
        .end()
        .exe(ctx);

Line Dash Error

"ld" and "lw" results after repeated execution to display errors.

var g = g2().clr().style("ld",[10,10],"lw",2).lin(15,120,312,120);
g.exe(ctx);                    // works
g.exe(ctx).exe(ctx).exe(ctx);  // does not work correctly by executing repeatedly

"lw" has an influence on the amount of change.

When defining img shapes in mecEdit/mec2 g2.img() is used. Although the documentation states that parameters b and h are optional, no image is shown when they're omitted. This needs to be looked into.

chart-element should reside in dist folder

'ins' command should accept 'g2' objects

It is implemented by

    ins(arg) {
        return typeof arg === 'function' ? (arg(this) || this)                   // no further processing by handler ...
             : typeof arg === 'object'   ? ( this.commands.push({a:arg}), this ) // no explicit command name .. !
             : this;
    },

and

    async exe(commands) {
        for (let cmd of commands) {
            if (cmd.c && this[cmd.c]) {         // explicit command name .. !
                const rx = this[cmd.c](cmd.a);
                if (rx && rx instanceof Promise) {
                    await rx;
                }
            } else if (cmd.a) {                 // should be from 'ins' command
                if (cmd.a.commands)                // cmd.a is a `g2` object, so directly execute its commands array.
                    this.exe(cmd.a.commands);
                if (cmd.a.g2)                      // cmd.a is an object offering a `g2` method, so call it and execute its returned commands array.
                    this.exe(cmd.a.g2().commands);
            }
        }
    },

Please add and test.

tests for extensions are in old repositories

remove usage of Map in g2.core

... use plain JS objects instead.

pntToUsr Bug

g2.js line 145: "ctx.canvas.height" should be replaced by "h"?

truss example missing bar labels ...

The bar labels are missing with last truss example in g2.mec documentation.

g2.editor.js should be removed ...

... as long as there ...

is no sufficient documentation.
are undocumented and unresolved dependencies (mixin.js)

state stack ...

... not working properly.

Line width of square in 'mousedrag.html' should be '1px'.

'format' property for 'ply' command

The case, where an empty pts array is handed over to the ply command is met now by an optional format property of type string. It must have one of the values

'x,y' for a flat array of coordinates
'[x,y]' for an array of coordinate arrays.
'{x,y}' for an array of coordinate objects.

extend argument objects only, if they are pure js objects.

so instead of

if (a) { /* extend a */ }

we should do now

if (a && Object.getPrototypeOf(a) === Object.prototype) { /* extend a */ }

in order to avoid modifying custom user objects.

Microsoft Edge not supported

Using the concatenated and minified version of g2 (including g2.chart), g2.js leads to errors in Microsoft Edge 42.17134.1.0, Microsoft EdgeHTML 17.17134.

It seems that Edge does not fully support object spreading, which is utilized often in g2.chart.

Since mecEdit will be available as a UWP PWA in the future, it is highly desired and a requirement, that Edge is fully supported.

Maybe implement Object.apply() instead, like here g2_apply.js. Note that this renders mecEdit without errors in Edge but is otherwise completely untested!

trf0

Change name of the viewport command 'trf0' in 'trf'.

xmin, xmax in chart do not work properly

They just cut to the y of the next point.
The respective values should instead interpolate between both points and show that instead.

Cheat sheet ...

misses documentation of g2 constructor calls.

'scl' property of 'img' disappeared

mec.shape.img is handing over a scl property to g2.img command. Examples using this worked some months ago.

This is needed to perform a homogenious scaling. Using b and h properties for scaling does not work, as the real dimensions of the image are not known to the user.

pulley2 angle not working

At least .pulley2() should support w as an argument and does that according to the API reference.
However, after passing a dynamic w the orientation of the pulley remains static.

.pulley2({x:mec.A.x, y:mec.A.y, r:R, w:-phi*l/R})

Since i can't find any trace of w in the associated methods (pulley() and pulley2()), this seems to be an oversight...

mec documentation missing most symbols

The only documented symbol seems to be .pol(). Other symbols, e.g. .nodfix(), are not metioned and there's is no overview of what they look like.

'grid()' does not work...

... without arguments object for constructor function:

g2({}).grid(); // works
g2().grid();   // does not work