@teachinglab/omd 0.5.3 → 0.5.5

package/canvas/ui/cursor.js

@@ -175,12 +175,12 @@ export class Cursor {
         const group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
         group.setAttribute('data-shape', 'select');
         
-        // Better arrow pointer - classic selection cursor
+        // Classic arrow cursor for selection tool
         const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        path.setAttribute('d', 'M 2,2 L 2,14 L 6,10 L 10,14 L 14,10 L 6,6 Z');
-        path.setAttribute('fill', '#333333');
-        path.setAttribute('stroke', 'white');
-        path.setAttribute('stroke-width', '1');
+        path.setAttribute('d', 'M 2,2 L 2,16 L 7,11 L 10,18 L 12,17 L 9,10 L 16,10 Z');
+        path.setAttribute('fill', 'white');
+        path.setAttribute('stroke', '#000000');
+        path.setAttribute('stroke-width', '1.2');
         path.setAttribute('stroke-linejoin', 'round');
         
         group.appendChild(path);
@@ -198,10 +198,10 @@ export class Cursor {
         
         // Standard arrow pointer cursor
         const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-        path.setAttribute('d', 'M 0,0 L 0,16 L 5,11 L 8,16 L 10,15 L 7,10 L 12,10 Z');
-        path.setAttribute('fill', '#000000');
-        path.setAttribute('stroke', 'white');
-        path.setAttribute('stroke-width', '1');
+        path.setAttribute('d', 'M 2,2 L 2,16 L 7,11 L 10,18 L 12,17 L 9,10 L 16,10 Z');
+        path.setAttribute('fill', 'white');
+        path.setAttribute('stroke', '#000000');
+        path.setAttribute('stroke-width', '1.2');
         path.setAttribute('stroke-linejoin', 'round');
         
         group.appendChild(path);

package/canvas/ui/toolbar.js

@@ -177,7 +177,7 @@ export class Toolbar {
     _getToolIconSvg(toolName) {
         const icons = {
             'pointer': `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M2 1L2 11L5 8L7 12L9 11L7 7L11 7L2 1Z" fill="black" stroke="black" stroke-width="0.8" stroke-linejoin="round"/>
+                <path d="M2 1L2 12L5.5 8.5L7.5 13L9 12.5L7 8L12 8L2 1Z" fill="white" stroke="black" stroke-width="1" stroke-linejoin="round"/>
             </svg>`,
             'pencil': `<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path d="M13.3658 4.68008C13.7041 4.34179 13.8943 3.88294 13.8943 3.40447C13.8944 2.926 13.7044 2.4671 13.3661 2.12872C13.0278 1.79035 12.5689 1.60022 12.0905 1.60016C11.612 1.6001 11.1531 1.79011 10.8147 2.1284L2.27329 10.6718C2.12469 10.8199 2.0148 11.0023 1.95329 11.203L1.10785 13.9882C1.09131 14.0436 1.09006 14.1024 1.10423 14.1584C1.11841 14.2144 1.14748 14.2655 1.18836 14.3063C1.22924 14.3471 1.28041 14.3761 1.33643 14.3902C1.39246 14.4043 1.45125 14.403 1.50657 14.3863L4.29249 13.5415C4.49292 13.4806 4.67532 13.3713 4.82369 13.2234L13.3658 4.68008Z" stroke="black" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/>
@@ -188,12 +188,12 @@ export class Toolbar {
                 <path d="M3.07159 6.41772L8.72151 12.0676" stroke="black" stroke-width="1.28" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>`,
             'select': `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <rect x="1.5" y="1.5" width="6" height="6" stroke="black" stroke-width="1.2" stroke-dasharray="2 2"/>
-                <path d="M9 8L12 11M12 11L12 9M12 11L10 11" stroke="black" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
-                <circle cx="2.5" cy="2.5" r="1" fill="black"/>
-                <circle cx="6.5" cy="2.5" r="1" fill="black"/>
-                <circle cx="2.5" cy="6.5" r="1" fill="black"/>
-                <circle cx="6.5" cy="6.5" r="1" fill="black"/>
+                <rect x="4" y="4" width="9" height="9" fill="rgba(0,123,255,0.15)" stroke="#007bff" stroke-width="1.2" stroke-dasharray="2,1"/>
+                <circle cx="4" cy="4" r="1.2" fill="white" stroke="#007bff" stroke-width="1"/>
+                <circle cx="13" cy="4" r="1.2" fill="white" stroke="#007bff" stroke-width="1"/>
+                <circle cx="4" cy="13" r="1.2" fill="white" stroke="#007bff" stroke-width="1"/>
+                <circle cx="13" cy="13" r="1.2" fill="white" stroke="#007bff" stroke-width="1"/>
+                <path d="M1 1L1 6.5L2.5 5L4 8.5L5 8L3.5 4.5L6 4.5L1 1Z" fill="black" stroke="white" stroke-width="0.5" stroke-linejoin="round"/>
             </svg>`
         };
         

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.5",
   "description": "omd",
   "main": "./index.js",
   "module": "./index.js",
@@ -14,7 +14,8 @@
     "src/",
     "omd/",
     "docs/",
-    "canvas/"
+    "canvas/",
+    "jsvg/"
   ],
   "keywords": [
     "math",
@@ -29,6 +30,7 @@
   "license": "MIT",
   "dependencies": {
     "@teachinglab/jsvg": "^0.1.1",
+    "@teachinglab/omd": "^0.5.4",
     "mathjs": "^14.5.2"
   },
   "scripts": {