@teachinglab/omd 0.5.3 → 0.5.4

package/jsvg/jsvg.js

@@ -0,0 +1,898 @@
+
+
+// ================ 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

@@ -0,0 +1,359 @@
+
+
+
+// ================ 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 );
+        }
+    }
+
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teachinglab/omd",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "omd",
   "main": "./index.js",
   "module": "./index.js",
@@ -14,7 +14,8 @@
     "src/",
     "omd/",
     "docs/",
-    "canvas/"
+    "canvas/",
+    "jsvg/"
   ],
   "keywords": [
     "math",