@teachinglab/omd 0.4.1 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teachinglab/omd",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "omd",
   "main": "./index.js",
   "module": "./index.js",
@@ -16,7 +16,6 @@
     "index.js",
     "src/",
     "omd/",
-    "jsvg/",
     "docs/",
     "canvas/"
   ],

package/jsvg/jsvg.js

@@ -1,898 +0,0 @@
-
-
-// ================ jsvgObject ================================= //
-
-export class jsvgObject
-{
-    constructor()
-    {
-        this.name = "";
-        this.xpos = 0;
-        this.scale = 1.0;
-        this.rotation = 0.0;
-        this.ypos = 0;
-        this.width = 0;
-        this.height = 0;
-        this.opacity = 1.0;
-        this.visible = true;
-        this.svgObject = null;
-        this.childList = [];
-        this.parent = null;
-    }
-
-    // set properties 
-
-    setName( N )
-    {
-        this.name = N;
-    }
-
-    setPosition( x, y )
-    {
-        this.xpos = x;
-        this.ypos = y;
-        this.updateTransform();
-    }
-
-    setScale( s )
-    {
-        this.scale = s;
-        this.updateTransform();
-    }
-
-    setRotation( r )
-    {
-        this.rotation = r;
-        this.updateTransform();
-    }
-
-    updateTransform()
-    {
-        // Ensure xpos and ypos are valid numbers
-        const x = isNaN(this.xpos) ? 0 : this.xpos;
-        const y = isNaN(this.ypos) ? 0 : this.ypos;
-        
-        var transformParams = " translate(" + x.toString() + "," + y.toString() + ") "
-        if ( this.scale != 1.0 )
-            transformParams += " scale(" + this.scale.toString()  + ")";
-        if ( this.rotation != 0.0 )
-            transformParams += " rotate(" + this.rotation + ")";
-        this.svgObject.setAttribute("transform", transformParams );
-    }
-
-    setWidth( w )
-    {
-        this.width = w;
-        this.svgObject.setAttribute("width", this.width.toString() );
-    }
-
-    setHeight( h )
-    {
-        this.height = h;
-        this.svgObject.setAttribute("height", this.height.toString() );
-    }
-
-    setWidthAndHeight( w,h )
-    {
-        this.setWidth( w );
-        this.setHeight( h );
-    }
-
-    setFillColor( color )
-    {
-        this.svgObject.setAttribute( "fill", color );
-    }
-
-    setStrokeColor( color )
-    {
-        this.svgObject.setAttribute( "stroke", color );
-    }
-
-    setStrokeWidth( sW )
-    {
-        this.svgObject.setAttribute( "stroke-width", sW.toString() );
-    }
-
-    setOpacity( opacity )
-    {
-        this.opacity = opacity;
-        this.svgObject.style.opacity = opacity;
-    }
-
-    setDropShadow()
-    {
-        // this is a generic dropshadow
-        this.svgObject.style.filter = "drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.4))";
-    }
-
-    show()
-    {
-        this.visible = true;
-        this.svgObject.style.display = "";
-    }
-
-    hide()
-    {
-        this.visible = false;
-        this.svgObject.style.display = "none";
-    }
-
-    // update
-
-    update()
-    {
-        if ( ! this.visible )
-            return;
-        
-        for( var C of this.childList )
-        {
-            C.update();
-        }
-    }
-
-    // child stuff
-
-    addChild( child )
-    {
-        if ( this.svgObject && child.svgObject )
-        {
-            this.childList.push( child );
-            this.svgObject.appendChild( child.svgObject );
-            child.parent = this;
-        }
-    }
-
-    getChild( index )
-    {
-        return this.childList[index];
-    }
-
-    replaceChild( newChild, oldChild )
-    {
-        // replace the node
-        this.svgObject.replaceChild( newChild.svgObject, oldChild.svgObject );
-
-        // replace in childList
-        for ( var i=0; i<this.childList.length; i++ )
-        {
-            if ( this.childList[i] == oldChild )
-            {
-                this.childList[i] = newChild;
-                break;
-            }
-        }
-
-        oldChild.parent = null;
-        newChild.parent = this;
-    }
-
-    getNumberOfChildren()
-    {
-        return this.childList.length;
-    }
-
-    removeChild( C )
-    {
-        const index = this.childList.indexOf(C);
-        this.removeChildByIndex( index );
-        C.parent = null;
-    }
-
-    removeChildByIndex( index )
-    {
-        if (index >= 0) 
-        { 
-            var C = this.childList[index];
-            this.childList.splice(index, 1);
-            this.svgObject.removeChild( C.svgObject );
-            C.parent = null;
-        }
-    }
-
-    removeAllChildren()
-    {
-        while( this.svgObject.firstChild ) 
-        {
-            this.svgObject.removeChild( this.svgObject.lastChild );
-        }
-        this.childList = [];
-    }
-
-    sortChildren( sortFunction )
-    {
-        this.childList.sort( sortFunction );
-
-        // If the  child is a reference to an existing node in the document, appendChild() moves it from its current position to the new positio
-        this.childList.forEach(child => this.svgObject.appendChild( child.svgObject ));
-    }
-
-    // set up events
-    setClickCallback( callback )
-    {
-        if ( this.svgObject )
-        {
-            var outerThis = this;
-            this.svgObject.onclick = function() { callback(outerThis) };
-            this.svgObject.style.cursor = "pointer";
-        }
-    }
-
-    enableDragging()
-    {
-        this.svgObject.style.cursor = "pointer";
-
-        // on mouse down
-        var outerThis = this;
-        this.svgObject.onmousedown = function(E) 
-        {
-            // console.log("mouse down");
-            outerThis.lastX = E.clientX;
-            outerThis.lastY = E.clientY;
-            
-            // register on mouse move function (unregister on mouseup)
-            window.onmousemove = function(E)
-            {
-                // console.log("mouse move");
-                var dX = E.clientX - outerThis.lastX;       // this method works if there's no scaling or rotation
-                var dY = E.clientY - outerThis.lastY;
-                outerThis.lastX = E.clientX;
-                outerThis.lastY = E.clientY;
-                outerThis.setPosition( outerThis.xpos+dX, outerThis.ypos+dY );
-            }
-
-            // on mouse up
-            window.onmouseup = function() 
-            {
-                // console.log("mouse up");
-                window.onmousemove = null;
-            }
-        }
-    }
-}
-
-
-// ================ jsvgContainer ================================= //
-
-export class jsvgContainer extends jsvgObject
-{
-    constructor()
-    {
-        super();
-
-        const svgNS = "http://www.w3.org/2000/svg";
-        this.svgObject = document.createElementNS(svgNS, "svg");
-        this.svgObject.setAttribute("x", "0");
-        this.svgObject.setAttribute("y", "0");
-        this.svgObject.setAttribute("width", "500");
-        this.svgObject.setAttribute("height", "500");
-        this.svgObject.setAttribute("backgroundColor", "blue");
-    }
-
-    setViewbox( w, h )
-    {
-        this.setWidth(w);
-        this.setHeight(h);
-        var viewBoxParams = "0 0 " + w.toString() + " " + h.toString();
-        this.svgObject.setAttribute("viewBox", viewBoxParams );
-    }
-}
-
-// ================ jsvgGroup ================================= //
-
-export class jsvgGroup extends jsvgObject
-{
-    constructor()
-    {
-        super();
-
-        const svgNS = "http://www.w3.org/2000/svg";
-        this.svgObject = document.createElementNS(svgNS, "g");
-        this.svgObject.setAttribute("x", "0");
-        this.svgObject.setAttribute("y", "0");
-        this.svgObject.setAttribute("width", "500");
-        this.svgObject.setAttribute("height", "500");
-        this.svgObject.setAttribute("viewBox", "0 0 500 500");
-    }
-}
-
-// ================ jsvgLine ================================= //
-
-export class jsvgLine extends jsvgObject
-{
-    constructor()
-    {
-        super();
-
-        this.x1 = 0;
-        this.y1 = 0;
-        this.x2 = 100;
-        this.y2 = 100;
-
-        const svgNS = "http://www.w3.org/2000/svg";
-        this.svgObject = document.createElementNS(svgNS, "line");
-        this.svgObject.setAttribute("x1", "0");
-        this.svgObject.setAttribute("y1", "0");
-        this.svgObject.setAttribute("x2", "100");
-        this.svgObject.setAttribute("y2", "100");
-        
-        this.setStrokeColor("black");
-        this.setStrokeWidth( 1 );
-
-        this.setEndpointA( this.x1, this.y1 );
-        this.setEndpointB( this.x2, this.y2 );
-    }
-
-    setEndpointA( x, y )
-    {
-        this.x1 = x;
-        this.y1 = y;
-        this.svgObject.setAttribute("x1", x.toString() );
-        this.svgObject.setAttribute("y1", y.toString() );
-    }
-
-    setEndpointB( x, y )
-    {
-        this.x2 = x;
-        this.y2 = y;
-        this.svgObject.setAttribute("x2", x.toString() );
-        this.svgObject.setAttribute("y2", y.toString() );
-    }
-
-    setEndpoints( x1,y1, x2,y2 )
-    {
-        this.setEndpointA( x1,y1 );
-        this.setEndpointB( x2,y2 );
-    }
-}
-
-// ================ jsvgRect ================================= //
-
-export class jsvgRect extends jsvgObject
-{
-    constructor()
-    {
-        super();
-
-        this.cornerRadius = 0;
-
-        const svgNS = "http://www.w3.org/2000/svg";
-        this.svgObject = document.createElementNS(svgNS, "rect");
-        this.setWidthAndHeight( 100,100 );
-        this.setFillColor( "white" );
-        this.setStrokeColor( "black" );
-        this.setStrokeWidth( 0 );
-    }
-
-    setCornerRadius( r )
-    {
-        this.cornerRadius = r;
-        this.svgObject.setAttribute( "rx", r.toString() );
-        this.svgObject.setAttribute( "ry", r.toString() );
-    }
-}
-
-// ================ jsvgEllipse ================================= //
-
-export class jsvgEllipse extends jsvgObject
-{
-    constructor()
-    {
-        super();
-
-        const svgNS = "http://www.w3.org/2000/svg";
-        this.svgObject = document.createElementNS(svgNS, "ellipse");
-
-        this.setPosition( 0,0 );
-        this.setWidthAndHeight( 100,100 );
-        this.setFillColor( "white" );
-        this.setStrokeColor( "black" );
-        this.setStrokeWidth( 0 );
-    }
-
-    setWidth( w )
-    {
-        this.width = w;
-        this.svgObject.setAttribute("rx", (this.width/2).toString() );
-    }
-
-    setHeight( h )
-    {
-        this.height = h;
-        this.svgObject.setAttribute("ry", (this.height/2).toString() );
-    }
-}
-
-
-// ================ jsvgArc ================================= //
-
-export class jsvgArc extends jsvgObject
-{
-    constructor()
-    {
-        super();
-
-        const svgNS = "http://www.w3.org/2000/svg";
-        this.svgObject = document.createElementNS(svgNS, "path");
-        
-        this.setFillColor("white");
-        this.setStrokeColor("black");
-        this.setStrokeWidth(0);
-    }
-
-    createPieSlice(radius, startAngle, endAngle)
-    {
-        // Convert polar coordinates to Cartesian for SVG arc
-        function polarToCartesian(radius, angleInDegrees) 
-        {
-            const angleInRadians = (angleInDegrees - 90) * Math.PI / 180;
-            return {
-                x: (radius * Math.cos(angleInRadians)),
-                y: (radius * Math.sin(angleInRadians))
-            };
-        }
-        
-        const start = polarToCartesian(radius, endAngle);
-        const end = polarToCartesian(radius, startAngle);
-
-        const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
-
-        const d = [
-            `M ${0} ${0}`, // Move to center
-            `L ${start.x} ${start.y}`, // Draw line to start of arc
-            `A ${radius} ${radius} 0 ${largeArcFlag} 0 ${end.x} ${end.y}`, // Draw arc
-            `Z` // Close path to center
-        ].join(" ");
-
-        this.svgObject.setAttribute("d", d);
-    }
-}
-
-// ================ jsvgPath ================================= //
-
-export class jsvgPath extends jsvgObject
-{
-    constructor() 
-    {  
-        super();
-
-        // Create the path element and add it to the SVG element
-        this.path = document.createElementNS("http://www.w3.org/2000/svg", "path");
-        this.path.setAttribute("fill", "none"); // Default fill is none
-        this.path.setAttribute("stroke", "black"); // Default stroke is black
-        this.path.setAttribute("stroke-width", "2"); // Default stroke width
-        // this.svgElement.appendChild(this.path);
-
-        this.svgObject = this.path;
-
-        // Initialize the points array
-        this.points = [];
-
-        // Update the path's 'd' attribute
-        this.updatePath();
-    }
-  
-    addPoint(x, y) 
-    {
-        if (typeof x !== "number" || typeof y !== "number") 
-        {
-            throw new Error("Coordinates must be numbers.");
-        }
-
-        this.points.push({ x:x, y:y });
-        
-        // must call updatePath to see new points
-    }
-  
-    updatePath() 
-    {
-        if (this.points.length === 0)
-        {
-            this.path.setAttribute("d", "");
-            return;
-        }
-  
-        // Create the 'd' attribute for the path
-        const d = this.points
-            .map((point, index) => (index === 0 ? `M ${point.x},${point.y}` : `L ${point.x},${point.y}`))
-            .join(" ");
-  
-        // Close the polygon if it has at least three points
-        const pathData = d;
-  
-        this.path.setAttribute("d", pathData);
-    }
-
-    clearPoints() 
-    {
-        this.points = [];
-        this.updatePath();
-    }
-}
-
-
-// ================ jsvgClipMask ================================= //
-
-export class jsvgClipMask extends jsvgObject
-{
-    constructor( width=300, height=300, cornerRadius=10 ) 
-    {  
-        super();
-
-        // make a new svg group
-        const svgNamespace = "http://www.w3.org/2000/svg";
-        const svg = document.createElementNS(svgNamespace, "g");
-        this.svgObject = svg;
-
-        this.width = width;
-        this.height = height;
-        this.cornerRadius = cornerRadius;
-
-        this.maskID = "clipMaskID" + Math.random();
-
-        svg.setAttribute("width", this.width);
-        svg.setAttribute("height", this.height);
-        svg.setAttribute("viewBox", `0 0 ${this.width} ${this.height}`);
-    
-        // Create a clipPath to apply rounded corners
-        const clipPath = document.createElementNS(svgNamespace, "clipPath");
-        clipPath.setAttribute("id", this.maskID );
-    
-        this.clipRect = document.createElementNS(svgNamespace, "rect");
-        this.clipRect.setAttribute("x", 0);
-        this.clipRect.setAttribute("y", 0);
-        this.clipRect.setAttribute("width", this.width);
-        this.clipRect.setAttribute("height", this.height);
-        this.clipRect.setAttribute("rx", this.cornerRadius); // Rounded corner radius
-        this.clipRect.setAttribute("ry", this.cornerRadius);
-    
-        clipPath.appendChild(this.clipRect);
-        svg.appendChild(clipPath); 
-        
-        // we create an inner group that gets masked
-        // all children get added this group
-        this.clipGroup = new jsvgGroup();
-        this.clipGroup.svgObject.setAttribute("clip-path", `url(#${this.maskID})`);
-        super.addChild( this.clipGroup );   // use super to avoid recursion
-    }
-
-    setWidth( width )
-    {
-        this.width = width;
-
-        this.svgObject.setAttribute("width", this.width);
-        this.svgObject.setAttribute("viewBox", `0 0 ${this.width} ${this.height}`);
-        this.clipRect.setAttribute("width", this.width);
-    }
-
-    setHeight( height )
-    {
-        this.height = height;
-
-        this.svgObject.setAttribute("height", this.height);
-        this.svgObject.setAttribute("viewBox", `0 0 ${this.width} ${this.height}`);
-        this.clipRect.setAttribute("height", this.height);
-    }
-
-    // setWidthAndHeight( width, height )
-    // {
-    //     this.width = width;
-    //     this.height = height;
-
-    //     this.svgObject.setAttribute("width", this.width);
-    //     this.svgObject.setAttribute("height", this.height);
-    //     this.svgObject.setAttribute("viewBox", `0 0 ${this.width} ${this.height}`);
-
-    //     this.clipRect.setAttribute("width", this.width);
-    //     this.clipRect.setAttribute("height", this.height);
-    // }
-
-    setCornerRadius( cornerRadius ) 
-    {
-        this.cornerRadius = cornerRadius;
-        this.clipRect.setAttribute("rx", this.cornerRadius); // Rounded corner radius
-        this.clipRect.setAttribute("ry", this.cornerRadius);
-    }
-
-    addChild( obj )
-    {
-        // add to masked clip group
-        this.clipGroup.addChild( obj );
-    }
-}
-
-
-
-
-// ================ jsvgImage ================================= //
-
-export class jsvgImage extends jsvgObject
-{
-    constructor()
-    {
-        super();
-
-        this.preserveAspectRatio = true;
-
-        const svgNS = "http://www.w3.org/2000/svg";
-        this.svgObject = document.createElementNS(svgNS, "image");
-        this.setWidthAndHeight( 100,100 );
-    }
-
-    setImageURL( newURL )
-    {
-        this.svgObject.setAttribute("href", newURL );
-        this.imageURL = newURL;
-    }
-
-    setAspectRatio( svgAspectRatio )
-    {
-        // to fill the whole space use "xMidYMid slice"
-        this.svgObject.setAttribute("preserveAspectRatio", svgAspectRatio );
-    }
-
-    applyRoundedCorners( cornerRadius, svgAspectRatio = 0 )
-    {
-        // remove the original image
-        if ( this.svgObject )
-            this.svgObject.remove();
-
-        // make a new svg image
-        const svgNamespace = "http://www.w3.org/2000/svg";
-        const svg = document.createElementNS(svgNamespace, "g");
-        this.svgObject = svg;
-
-        svg.setAttribute("width", this.width);
-        svg.setAttribute("height", this.height);
-        svg.setAttribute("viewBox", `0 0 ${this.width} ${this.height}`);
-    
-        // Create a clipPath to apply rounded corners
-        const clipPath = document.createElementNS(svgNamespace, "clipPath");
-        clipPath.setAttribute("id", "rounded-corners");
-    
-        const rect = document.createElementNS(svgNamespace, "rect");
-        rect.setAttribute("x", 0);
-        rect.setAttribute("y", 0);
-        rect.setAttribute("width", this.width);
-        rect.setAttribute("height", this.height);
-        rect.setAttribute("rx", cornerRadius); // Rounded corner radius
-        rect.setAttribute("ry", cornerRadius);
-    
-        clipPath.appendChild(rect);
-        svg.appendChild(clipPath);
-    
-        // Create the image element
-        const image = document.createElementNS(svgNamespace, "image");
-        image.setAttribute("href", this.imageURL );
-        image.setAttribute("width", this.width);
-        image.setAttribute("height", this.height);
-        image.setAttribute("clip-path", "url(#rounded-corners)");
-        if ( svgAspectRatio )
-            image.setAttribute("preserveAspectRatio", svgAspectRatio );
-
-        svg.appendChild(image);
-    }
-}
-
-
-// ================ jsvgTextLine ================================= //
-
-export class jsvgTextLine extends jsvgObject
-{
-    constructor()
-    {
-        super();
-
-        this.text = "";
-
-        const svgNS = "http://www.w3.org/2000/svg";
-        this.svgObject = document.createElementNS(svgNS, "text");
-        this.svgObject.textContent = "hello world";
-        this.svgObject.setAttribute("x", "0");       // x-coordinate of the rectangle
-        this.svgObject.setAttribute("y", "0");       // y-coordinate of the rectangle
-        this.svgObject.setAttribute("fill", "black");  // fill color of the rectangle
-        this.svgObject.style.fontFamily = "Arial, Helvetica, sans-serif;";
-    }
-
-    setText( text ) { this.text = text; this.svgObject.textContent = text;  }
-    getText() { return this.text; }
-
-    setFontSize( S ) { this.svgObject.style.fontSize = S.toString() + 'px'; }
-
-    setFontFamily( F ) { this.svgObject.style.fontFamily = F; }
-
-    setFontColor( C ) { this.svgObject.style.fill = C; }
-
-    setTextAnchor( A )
-    {
-        // left, middle or right
-        this.svgObject.setAttribute("text-anchor", A );  // fill color of the rectangle
-    }
-
-    setAlignment( A ) 
-    {
-        this.alignment = A;
-        if ( A == 'left' )
-            this.setTextAnchor( 'start' );
-        if ( A == 'center' )
-            this.setTextAnchor( 'middle' );
-        if ( A == 'right' )
-            this.setTextAnchor( 'end' );
-    }   
-
-    setFontWeight( W ) { 
-        this.svgObject.style.fontWeight = W.toString(); 
-    }
-}
-
-
-// ================ jsvgTextBox (Div) ================================= //
-
-export class jsvgTextBox extends jsvgGroup
-{
-    constructor()
-    {
-        super();
-
-        this.text = "";
-        
-        var ns = 'http://www.w3.org/2000/svg';
-        this.foreignObject = document.createElementNS( ns, 'foreignObject');
-
-        this.foreignObject.style.backgroundColor = 'none';
-        this.svgObject.appendChild( this.foreignObject );
-
-        this.div = document.createElement('div');
-        this.foreignObject.appendChild( this.div ); 
-
-        this.setWidthAndHeight( 200,100 );
-    }
-
-    setText( T ) { this.text = T; this.div.innerHTML = T; }
-
-    getText() { return this.text; }
-
-    setStyle( S )   // for style setting with CSS
-    { 
-        this.div.className = S; 
-        this.div.style.position = 'fixed';      // for safari
-    };       
-
-    setFontFamily( F ) { this.div.style.fontFamily = F; }
-
-    setFontSize( S ) { this.div.style.fontSize = S.toString() + "px"; }
-
-    setLineHeight( H ) { this.div.style.lineHeight = H + 'px'; }
-
-    setFontWeight( W ) { this.div.style.fontWeight = W; }
-
-    setFontColor( C )  { this.div.style.color = C; }
-
-    setAlignment( A )  { this.div.style.textAlign = A; }
-    
-    setVerticalCentering()
-    {
-        this.div.style.display = "flex";
-        this.div.style.flexFlow = "column"
-        this.div.style.justifyContent = "center";
-        this.div.style.alignItems = "center";
-    }
-
-    makeEditable()
-    {
-        this.div.style.contentEditable = 'true';
-        this.div.onclick = function() { console.log("here"); this.focus(); };
-    }
-
-    setBorderWidthAndColor( width, color ) { this.div.style.border = width + "px solid " + color; }
-
-    setWidth( W )
-    { 
-        this.width = W;
-        if ( this.div )
-            this.div.style.width = W  + 'px' 
-
-        if ( this.foreignObject )
-            this.foreignObject.setAttribute('width', W );
-    }
-
-    setHeight( H )
-    { 
-        this.height = H;
-        if ( this.div )
-            this.div.style.height = H  + 'px' 
-
-        if ( this.foreignObject )
-            this.foreignObject.setAttribute('height', H );
-    }
-}
-
-
-
-// ================ jsvgTextInput ================================= //
-
-export class jsvgTextInput extends jsvgTextBox
-{
-    constructor()
-    {
-        super();
-
-        this.callback = null;
-        
-        // remove the generic div before replacing it
-        this.foreignObject.removeChild( this.div );
-
-        this.div = document.createElement('input');
-        this.div.contentEditable = true;
-
-        this.div.onkeyup = this.handleInput.bind(this);
-        this.foreignObject.appendChild( this.div ); 
-
-        this.setWidthAndHeight( 200,30 );
-        this.setPlaceholderText("placeholder");
-    }
-
-    setStyle( S )   // for style setting with CSS
-    { 
-        this.div.className = S; 
-    }; 
-
-    setPlaceholderText( T ) { this.div.placeholder = T }
-
-    setText( T ) { this.div.value = T; }
-
-    getText() { return this.div.value; }
-
-    setInputCallback( callback ) { this.callback = callback; }   // the callback is a function which receives text
-
-    handleInput( event )
-    {
-        if ( event.key == 'Enter' || event.keyCode==13 )
-        {
-            if ( this.callback )
-                this.callback( this.div.value )
-        }
-    }
-}
-
-
-// ================ jsvgTextArea ================================= //
-
-export class jsvgTextArea extends jsvgTextBox
-{
-    constructor()
-    {
-        super();
-
-        this.callback = null;
-        
-        // remove the generic div before replacing it
-        this.foreignObject.removeChild( this.div );
-
-        this.div = document.createElement('textarea');
-
-        this.div.onkeyup = this.handleInput.bind(this);
-        this.foreignObject.appendChild( this.div ); 
-
-        this.setWidthAndHeight( 200,30 );
-        this.setPlaceholderText("placeholder");
-    }
-
-    setText( T ) { this.div.value = T; }
-    getText() { return this.div.value; }
-
-    setStyle( S )   // for style setting with CSS
-    { 
-        this.div.className = S; 
-    }; 
-
-    handleInput( event )
-    {
-        if ( this.callback )
-            this.callback( this );
-    }
-
-    setPlaceholderText( T ) { this.div.placeholder = T }
-
-    setInputCallback( callback ) { this.callback = callback; }   // the callback is a function which receives text
-
-}

package/jsvg/jsvgComponents.js

@@ -1,359 +0,0 @@
-
-
-
-// ================ jsvgButton ================================= //
-
-export class jsvgButton extends jsvgGroup
-{
-    constructor()
-    {
-        super();
-
-        this.callback = null;
-        this.fontSize = 12;
-        this.text = 'button';
-        
-        // add rect
-        this.backRect = new jsvgRect();
-        this.backRect.setWidthAndHeight( 100,30 );
-        this.backRect.setFillColor( "white" );
-        this.backRect.setStrokeWidth(0);
-        this.backRect.setCornerRadius( 15 );
-        this.backRect.svgObject.style.cursor = "pointer";
-        this.addChild( this.backRect );
-
-        // add text
-        this.buttonText = new jsvgTextLine();
-        this.buttonText.setPosition(50,20);
-        this.buttonText.setFontFamily( "Arial" );
-        this.buttonText.setFontSize( 12 );
-        this.buttonText.setText("button");
-        this.buttonText.setTextAnchor("middle");
-        this.buttonText.svgObject.style.cursor = "pointer";
-
-        this.addChild( this.buttonText );
-    }
-
-    setText( T ) { this.text = T; this.buttonText.setText(T) }
-    setFontFamily( F ) { this.buttonText.setFontFamily(F) }
-    setFontSize( S ) { this.fontSize=S; this.buttonText.setFontSize(S) }
-    setFontColor( C ) { this.buttonText.setFontColor(C) }
-    setFillColor( C ) { this.backRect.setFillColor( C ) };
-    setStrokeColor( C ) { this.backRect.setStrokeColor( C ) };
-    setStrokeWidth( C ) { this.backRect.setStrokeWidth( C ) };
-    setCornerRadius( R ) { this.backRect.setCornerRadius( R ) };
-
-    addImage( imageURL, imageWidth=30, imageHeight=30 )
-    {
-        this.image = new jsvgImage();
-        this.image.setImageURL( imageURL );
-        this.image.setWidthAndHeight( imageWidth, imageHeight );
-        this.image.setPosition( this.backRect.width/2-imageWidth/2, this.backRect.height/2-imageHeight/2 );
-        this.image.svgObject.style.cursor = "pointer";
-        this.addChild( this.image );
-    }
-
-    setWidthAndHeight( W, H )
-    {
-        this.width = W;
-        this.height = H;
-        this.backRect.setWidthAndHeight( W, H );
-        this.buttonText.setPosition( W/2, H*0.50+2 + this.fontSize*0.25 );
-        if ( this.image )
-        {
-            this.image.setPosition( this.backRect.width/2-this.image.width/2, 
-                                    this.backRect.height/2-this.image.height/2 );
-        }
-    }
-}
-
-
-// ================ jsvgLayoutGroup ================================= //
-
-export class jsvgLayoutGroup extends jsvgGroup
-{
-    constructor()
-    {
-        super();
-
-        this.spacer = 10;
-    }
-
-    setSpacer( S ) 
-    {
-        this.spacer = S;
-    }
-
-    updateLayout()
-    {
-    }
-
-    showAll()
-    {
-        var N = this.getNumberOfChildren();
-        for ( var i=0; i<N; i++)
-        {
-            var C = this.getChild(i);
-            C.show();
-        }
-    }
-
-    showOnly( indexToShow )
-    {
-        var N = this.getNumberOfChildren();
-        for ( var i=0; i<N; i++)
-        {
-            var C = this.getChild(i);
-            if ( i == indexToShow )
-                C.show();
-            else
-                C.hide();
-        }
-    }
-
-    doVerticalLayout()
-    {
-        var N = this.getNumberOfChildren();
-
-        // layout children from top to bottom
-        var pX = 0;
-        var pY = 0;
-        var minW = 0;
-        for ( var i=0; i<N; i++)
-        {
-            var C = this.getChild(i);
-            if ( ! C.visible )
-                continue;
-            C.setPosition( pX,pY );
-            pY += C.height;
-            pY += this.spacer;
-
-            if ( C.width > minW )
-                minW = C.width;
-        }
-
-        // set width and height
-        this.height = pY - this.spacer;
-        this.width = minW;
-
-        // horizontal center all items
-        for ( var i=0; i<N; i++)
-        {
-            var C = this.getChild(i);
-            var pX = this.width/2-C.width/2;
-            C.setPosition( pX, C.ypos );
-        }
-    }
-
-    doHorizontalLayout()
-    {
-        var N = this.getNumberOfChildren();
-
-        // layout children from left to right
-        var pX = 0;
-        var pY = 0;
-        var minH = 0;
-        for ( var i=0; i<N; i++)
-        {
-            var C = this.getChild(i);
-            if ( ! C.visible )
-                continue;
-            C.setPosition( pX,pY );
-            pX += C.width;
-            pX += this.spacer;
-
-            if ( C.height > minH )
-                minH = C.height;
-        }
-
-        // set width and height
-        this.width = pX - this.spacer;
-        this.height = minH;
-
-        // vertically center all items
-        for ( var i=0; i<N; i++)
-        {
-            var C = this.getChild(i);
-            var pY = this.height/2-C.height/2;
-            C.setPosition( C.xpos, pY  );
-        }
-    }
-} 
-
-
-// ================ jsvgScrollbox ================================= //
-
-export class jsvgScrollbox extends jsvgGroup
-{
-    constructor()
-    {
-        super();
-
-        this.scrollPercent = 0;
-        this.scrollOffset = 0;
-        this.contentHeight = 0;
-
-        this.oldMouseX = 0;
-        this.oldMouseY = 0;
-
-        // make clip mask
-        this.clipMask = new jsvgClipMask( 200,400, 10 );
-        super.addChild( this.clipMask );        // use super to avoid addChild recursion
-
-        // make background rect
-        this.backRect = new jsvgRect();
-        this.backRect.setFillColor("white");
-        this.clipMask.addChild( this.backRect );
-
-        // make scroll group
-        this.scrollGroup = new jsvgGroup();
-        this.clipMask.addChild( this.scrollGroup );
-
-        // make scroll bar
-        this.scrollBar = new jsvgRect();
-        this.scrollBar.setWidthAndHeight( 10,50 );
-        this.scrollBar.setCornerRadius( 5 );
-        this.scrollBar.setFillColor( "darkgray" );
-        this.scrollBar.setPosition( 180, 10 );
-        this.scrollBar.svgObject.onmousedown = this.handleMouseDown.bind(this);
-        this.scrollBar.svgObject.style.cursor = "pointer";
-        this.clipMask.addChild( this.scrollBar );
-
-        this.setWidthAndHeight( 200,500 );
-
-        this.updateLayout();
-    }
-
-    setWidth( W )
-    {
-        super.setWidth( W );
-        this.clipMask.setWidth( W );
-        this.backRect.setWidth( W );
-    }
-
-    setHeight( H )
-    {
-        super.setWidth( H );
-        this.clipMask.setHeight( H );
-        this.backRect.setHeight( H );
-    }
-
-    setCornerRadius( R )
-    {
-        this.clipMask.setCornerRadius( R );
-    }
-
-    addChild( C )
-    {
-        this.scrollGroup.addChild( C );
-    }
-
-    handleMouseDown( event )
-    {
-        if ( ! this.visible )
-            return;
-
-        // handle dragging
-        function handleMouseMove(event)
-        {
-            event.preventDefault();
-            // console.log("handleMouseMove");
-
-            // get mouseX and mouseY
-            var mouseX, mouseY;
-            if ( event.touches && event.touches.length >= 1 )
-            {
-                mouseX = event.touches[0].clientX;
-                mouseY = event.touches[0].clientY;
-            }
-            else
-            {
-                mouseX = event.clientX;
-                mouseY = event.clientY;
-            }
-
-            // calculate dX and dY
-            if ( this.oldMouseX && this.oldMouseY )
-            {
-                var dX = mouseX - this.oldMouseX;
-                var dY = mouseY - this.oldMouseY;
-
-                var pY = this.scrollBar.ypos + dY;
-
-                // enforce slider bounds
-                var minY = 10;
-                var maxY = this.backRect.height - this.scrollBar.height - 10;
-                if ( pY < minY )
-                    pY = minY;
-                if ( pY > maxY )
-                    pY = maxY;
-
-                // move the circle
-                this.scrollBar.setPosition( this.scrollBar.xpos, pY  );
-
-                this.scrollPercent = (pY-minY) / (maxY-minY);
-                // console.log( this.scrollPercent.toFixed(2) );
-
-                // update layout
-                this.updateLayout();
-            }
-
-            // set oldMouseX and oldMouseY
-            this.oldMouseX = mouseX;
-            this.oldMouseY = mouseY;
-        }
-
-        // on mouse up
-        function handleMouseUp(event)
-        {            
-            // console.log("handleMouseUp");
-            this.activeBubble = null;
-            window.onmousemove = null;
-            window.ontouchmove = null;
-            window.onmouseup = null;
-            window.ontouchend = null;
-            this.oldMouseX = 0;
-            this.oldMouseY = 0;
-            return;
-        }
-
-        // set up events
-        window.onmousemove = handleMouseMove.bind(this);
-        window.ontouchmove = handleMouseMove.bind(this);;
-        window.onmouseup = handleMouseUp.bind(this);
-        window.ontouchend = handleMouseUp.bind(this);;
-    }
-
-    computeContentBounds()
-    {
-        var maxY = 0;
-        var N = this.scrollGroup.getNumberOfChildren();
-
-        // find bottom most point of all child objects
-        for ( var i=0; i<N; i++ )
-        {
-            var C = this.scrollGroup.getChild(i);
-            var bottomY = C.ypos + C.height;
-            if ( bottomY > maxY )
-                maxY = bottomY;
-        }
-
-        this.contentHeight = maxY;
-    }
-
-    updateLayout()
-    {
-        var W = this.backRect.width;
-        var H = this.backRect.height;
-
-        this.computeContentBounds();
-
-        if ( this.contentHeight > this.backRect.height )
-        {
-            var maxShift = this.contentHeight - this.backRect.height;
-            var scrollOffset = -1.0 * this.scrollPercent * maxShift;
-            this.scrollGroup.setPosition( 0, scrollOffset );
-        }
-    }
-
-}