@teachinglab/omd 0.7.28 → 0.7.30

package/jsvg/jsvg.js

@@ -400,6 +400,25 @@ export class jsvgEllipse extends jsvgObject
         this.height = h;
         this.svgObject.setAttribute("ry", (this.height/2).toString() );
     }
+
+    setPosition( x, y )
+    {
+        this.xpos = x;
+        this.ypos = y;
+        this.svgObject.setAttribute("cx", x.toString() );
+        this.svgObject.setAttribute("cy", y.toString() );
+        this.svgObject.setAttribute("transform", "" );
+    }
+
+    updateTransform()
+    {
+        var transformParams = "";
+        if ( this.scale != 1.0 )
+            transformParams += " scale(" + this.scale.toString()  + ")";
+        if ( this.rotation != 0.0 )
+            transformParams += " rotate(" + this.rotation + ")";
+        this.svgObject.setAttribute("transform", transformParams.trim() );
+    }
 }
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teachinglab/omd",
-  "version": "0.7.28",
+  "version": "0.7.30",
   "description": "omd",
   "main": "./index.js",
   "module": "./index.js",

package/src/omdShapes.js

@@ -148,10 +148,15 @@ export class omdIsoscelesTriangle extends jsvgGroup
     {
         this.shapePath.clearPoints();
 
-        this.shapePath.addPoint( -0.5*this.unitScale*this.triangleBase, 0 );
-        this.shapePath.addPoint(  0.5*this.unitScale*this.triangleBase, 0 );
-        this.shapePath.addPoint( 0, -1.0*this.unitScale*this.triangleHeight );
-        this.shapePath.addPoint( -0.5*this.unitScale*this.triangleBase, 0 );
+        const baseWidth = this.unitScale * this.triangleBase;
+        const triangleHeight = this.unitScale * this.triangleHeight;
+        const offsetX = 10;
+        const offsetY = triangleHeight + 10;
+
+        this.shapePath.addPoint( offsetX, offsetY );
+        this.shapePath.addPoint( offsetX + baseWidth, offsetY );
+        this.shapePath.addPoint( offsetX + baseWidth * 0.5, offsetY - triangleHeight );
+        this.shapePath.addPoint( offsetX, offsetY );
 
         this.shapePath.updatePath();
 
@@ -259,6 +264,7 @@ export class omdEllipse extends jsvgGroup
         this.rectWidth = 10;
         this.rectHeight = 5;
         this.unitScale = 10;
+        this.showLabels = false;
 
         this.shapePath = new jsvgEllipse();
         this.shapePath.setWidthAndHeight( this.rectWidth*this.unitScale, this.rectHeight*this.unitScale );
@@ -267,6 +273,9 @@ export class omdEllipse extends jsvgGroup
         this.shapePath.setFillColor( omdColor.lightGray );
         this.addChild( this.shapePath );
 
+        this.labelsHolder = new jsvgGroup();
+        this.addChild( this.labelsHolder );
+
         this.updateLayout();
     }
 
@@ -281,12 +290,32 @@ export class omdEllipse extends jsvgGroup
         if ( typeof data.unitScale != "undefined" )
             this.unitScale = data.unitScale;
 
+        if ( typeof data.showLabels != "undefined" )
+            this.showLabels = data.showLabels;
+
         this.updateLayout();
     }
 
     updateLayout()
     {
-        this.shapePath.setWidthAndHeight( this.rectWidth*this.unitScale, this.rectHeight*this.unitScale );
+        const ellipseWidth = this.rectWidth * this.unitScale;
+        const ellipseHeight = this.rectHeight * this.unitScale;
+
+        this.shapePath.setWidthAndHeight( ellipseWidth, ellipseHeight );
+        this.shapePath.setPosition( ellipseWidth * 0.5 + 10, ellipseHeight * 0.5 + 10 );
+
+        this.labelsHolder.removeAllChildren();
+        if ( this.showLabels )
+        {
+            const label = new jsvgTextLine();
+            label.setAlignment("center");
+            label.setFontFamily( "Albert Sans" );
+            label.setFontColor( "black" );
+            label.setFontSize( 12 );
+            label.setPosition( ellipseWidth * 0.5 + 10, ellipseHeight * 0.5 + 14 );
+            label.setText( `${this.rectWidth} × ${this.rectHeight}` );
+            this.labelsHolder.addChild( label );
+        }
 
         // Set dimensions and viewBox for API compatibility
         this.width = this.rectWidth * this.unitScale + 20;
@@ -306,6 +335,7 @@ export class omdCircle extends jsvgGroup
 
         this.radius = 5;
         this.unitScale = 10;
+        this.showLabels = false;
 
         this.shapePath = new jsvgEllipse();
         this.shapePath.setWidthAndHeight( this.radius*this.unitScale, this.radius*this.unitScale );
@@ -314,6 +344,9 @@ export class omdCircle extends jsvgGroup
         this.shapePath.setFillColor( omdColor.lightGray );
         this.addChild( this.shapePath );
 
+        this.labelsHolder = new jsvgGroup();
+        this.addChild( this.labelsHolder );
+
         this.updateLayout();
     }
 
@@ -325,12 +358,31 @@ export class omdCircle extends jsvgGroup
         if ( typeof data.unitScale != "undefined" )
             this.unitScale = data.unitScale;
 
+        if ( typeof data.showLabels != "undefined" )
+            this.showLabels = data.showLabels;
+
         this.updateLayout();
     }
 
     updateLayout()
     {
-        this.shapePath.setWidthAndHeight( 2.0*this.radius*this.unitScale, 2.0*this.radius*this.unitScale );
+        const diameter = 2.0 * this.radius * this.unitScale;
+
+        this.shapePath.setWidthAndHeight( diameter, diameter );
+        this.shapePath.setPosition( this.radius * this.unitScale + 10, this.radius * this.unitScale + 10 );
+
+        this.labelsHolder.removeAllChildren();
+        if ( this.showLabels )
+        {
+            const label = new jsvgTextLine();
+            label.setAlignment("center");
+            label.setFontFamily( "Albert Sans" );
+            label.setFontColor( "black" );
+            label.setFontSize( 12 );
+            label.setPosition( this.radius * this.unitScale + 10, this.radius * this.unitScale + 14 );
+            label.setText( `r=${this.radius}` );
+            this.labelsHolder.addChild( label );
+        }
 
         // Set dimensions and viewBox for API compatibility
         this.width = 2.0 * this.radius * this.unitScale + 20;