{"id":0,"registry":{"0":{"shape":{"__isSmartRef__":true,"id":1},"submorphs":[],"scripts":[],"_ClipMode":"visible","derivationIds":["3ABFAB66-3E1D-4B57-B4D3-DBF0D37DCE60","D3CB6A05-D42B-419A-992D-1DDF9DDED959","034779AD-D220-487C-A85D-C8C72ED576E0","A62D47E6-D416-4F59-9C68-57A81AD83D78","B05ECE32-16B0-45B6-B2C8-5DD30A6367DD"],"id":"151E29E6-76A1-40CB-9EF6-CBD018E34FB7","droppingEnabled":true,"halosEnabled":true,"_StyleClassNames":["Morph","HtmlWrapperMorph","selectable"],"eventHandler":{"__isSmartRef__":true,"id":2},"showsHalos":false,"partsBinMetaInfo":{"__isSmartRef__":true,"id":3},"name":"SVGPolygonMorph","prevScroll":[0,0],"htmlString":"Sorry, your browser does not support SVG","__serializedExpressions__":["polygonPoints.0","polygonPoints.1","polygonPoints.2","polygonPoints.3","polygonPoints.4","displayPoints.0","displayPoints.1","displayPoints.2","displayPoints.3","displayPoints.4","_Position","distanceToDragEvent","morphicBoundsOffset","scaleFactor"],"polygonPoints":["lively.pt(42.5,0.0)","lively.pt(83.0,29.4)","lively.pt(67.5,76.9)","lively.pt(17.5,76.9)","lively.pt(2.1,29.4)"],"isBeingDragged":false,"layout":{"__isSmartRef__":true,"id":12},"displayPoints":["lively.pt(43.6,0.0)","lively.pt(85.0,32.5)","lively.pt(69.2,85.0)","lively.pt(18.0,85.0)","lively.pt(2.1,32.5)"],"svgStyle":{"__isSmartRef__":true,"id":13},"_Rotation":0,"_Scale":1,"__serializedLivelyClosures__":{"__isSmartRef__":true,"id":14},"__LivelyClassName__":"lively.morphic.HtmlWrapperMorph","__SourceModuleName__":"Global.lively.morphic.AdditionalMorphs","_Position":"lively.pt(0.0,0.0)","distanceToDragEvent":"lively.pt(147.0,-9.0)","morphicBoundsOffset":"lively.pt(3.0,3.0)","scaleFactor":"lively.pt(1.0,1.1)"},"1":{"_BorderWidth":0,"stringifiedShapeNode":"
Sorry, your browser does not support SVG
","_AppearanceStylingMode":true,"__serializedExpressions__":["_Padding","_Position","_Extent","_Fill","extent"],"__LivelyClassName__":"lively.morphic.Shapes.External","__SourceModuleName__":"Global.lively.morphic.Shapes","_Padding":"lively.rect(0,0,0,0)","_Position":"lively.pt(0.0,0.0)","_Extent":"lively.pt(88.1,88.1)","_Fill":"Color.rgb(200,200,200)","extent":"lively.pt(88.0,88.0)"},"2":{"morph":{"__isSmartRef__":true,"id":0},"__LivelyClassName__":"lively.morphic.EventHandler","__SourceModuleName__":"Global.lively.morphic.Events"},"3":{"partName":"SVGPolygonMorph","requiredModules":[],"partsSpaceName":"PartsBin/HTML/","comment":"A morph that renders an SVG Polygon using the SVG HTML tag. Helper methods to make a regular block arrow, and a regular n-sided polygon.","changes":[{"__isSmartRef__":true,"id":4},{"__isSmartRef__":true,"id":5},{"__isSmartRef__":true,"id":6},{"__isSmartRef__":true,"id":7},{"__isSmartRef__":true,"id":8},{"__isSmartRef__":true,"id":9},{"__isSmartRef__":true,"id":10},{"__isSmartRef__":true,"id":11}],"migrationLevel":9,"__serializedExpressions__":["lastModifiedDate"],"__LivelyClassName__":"lively.PartsBin.PartsBinMetaInfo","__SourceModuleName__":"Global.lively.PartsBin","lastModifiedDate":"new Date(\"Sat Dec 13 2014 13:38:36 GMT-0800 (PST)\")"},"4":{"author":"rick","message":"no comment","id":"F10EE81E-AA10-4AA3-AED0-E39A28BD7816","__serializedExpressions__":["date"],"date":"new Date(\"Sat Dec 13 2014 13:38:34 GMT-0800 (PST)\")"},"5":{"author":"robertkrahn","message":"Fixed reset as suggested by Rick. Thanks Rick!","id":"C9389773-D839-4E3C-AF10-28F6282541BB","__serializedExpressions__":["date"],"date":"new Date(\"Thu Jul 17 2014 12:02:10 GMT-0700 (PDT)\")"},"6":{"author":"robertkrahn","message":"no comment","id":"4B305BE4-1B35-4BBB-ABCE-D255D563CBD9","__serializedExpressions__":["date"],"date":"new Date(\"Wed Feb 12 2014 15:34:42 GMT-0800 (PST)\")"},"7":{"author":"robertkrahn","message":"no comment","id":"FC45EDD5-3632-41E9-8CCF-1E7BF0F5B7FA","__serializedExpressions__":["date"],"date":"new Date(\"Wed Feb 12 2014 15:35:06 GMT-0800 (PST)\")"},"8":{"author":"robertkrahn","message":"clipped","id":"D4A9A56A-16E6-4D3D-9B42-425F9CE8E8B6","__serializedExpressions__":["date"],"date":"new Date(\"Wed Feb 12 2014 16:29:30 GMT-0800 (PST)\")"},"9":{"author":"robertkrahn","message":"clipped","id":"287FA9C0-4815-46CD-B588-28102199A3F0","__serializedExpressions__":["date"],"date":"new Date(\"Wed Feb 12 2014 16:29:38 GMT-0800 (PST)\")"},"10":{"author":"rick","message":"added a few helper scripts","id":"A9AF9642-F781-4A08-A0D1-9590A65517C0","__serializedExpressions__":["date"],"date":"new Date(\"Fri Sep 05 2014 08:25:26 GMT-0700 (PDT)\")"},"11":{"__serializedExpressions__":["date"],"author":"rick","message":"no comment","id":"216DB4A5-BD67-4090-88E3-7034F796FAE6","date":"new Date(\"Wed Dec 17 2014 07:53:29 GMT-0800 (PST)\")"},"12":{"layouter":{"__isSmartRef__":true,"id":0}},"13":{"__serializedExpressions__":["fill","stroke"],"opacity":0.5,"stroke-width":3,"fill":"Color.rgb(253,127,127)","stroke":"Color.rgb(0,0,204)"},"14":{"init":{"__isSmartRef__":true,"id":15},"setPoints":{"__isSmartRef__":true,"id":18},"display":{"__isSmartRef__":true,"id":21},"svgStyleString":{"__isSmartRef__":true,"id":24},"normalizePoints":{"__isSmartRef__":true,"id":27},"getDesiredExtent":{"__isSmartRef__":true,"id":30},"rescaleToNewExtent":{"__isSmartRef__":true,"id":33},"getMaxPoint":{"__isSmartRef__":true,"id":36},"applyLayout":{"__isSmartRef__":true,"id":39},"getMaxDisplayPoint":{"__isSmartRef__":true,"id":46},"setSVGStyleProperty":{"__isSmartRef__":true,"id":49},"setSVGStyle":{"__isSmartRef__":true,"id":52},"makePolygon":{"__isSmartRef__":true,"id":55},"makeArrow":{"__isSmartRef__":true,"id":58},"checkParameter":{"__isSmartRef__":true,"id":61},"getPoints":{"__isSmartRef__":true,"id":64}},"15":{"varMapping":{"__isSmartRef__":true,"id":16},"source":"function init() {\n this.polygonPoints = [pt(0,0), pt(40,0), pt(20,40)]\n this.svgStyle = {fill:\"lime\", stroke:\"purple\", \"stroke-width\":1}\n this.morphicBoundsOffset = pt(3,3)\n this.rescaleToNewExtent()\n this.display()\n this.setLayouter(this)\n}","funcProperties":{"__isSmartRef__":true,"id":17},"__LivelyClassName__":"lively.Closure"},"16":{"this":{"__isSmartRef__":true,"id":0}},"17":{"user":"rick","__serializedExpressions__":["timestamp"],"timestamp":"new Date(\"Sat Dec 13 2014 11:05:09 GMT-0800 (PST)\")"},"18":{"varMapping":{"__isSmartRef__":true,"id":19},"source":"function setPoints(anArrayOfPoints) {\n this.polygonPoints = anArrayOfPoints;\n \n}","funcProperties":{"__isSmartRef__":true,"id":20},"__LivelyClassName__":"lively.Closure"},"19":{"this":{"__isSmartRef__":true,"id":0}},"20":{"user":"rick","__serializedExpressions__":["timestamp"],"timestamp":"new Date(\"Sat Dec 13 2014 08:41:37 GMT-0800 (PST)\")"},"21":{"varMapping":{"__isSmartRef__":true,"id":22},"source":"function display() {\n // display the polygon. Just get the display points and turn them\n // into a string, set the clip mode to be visible (we've already adjusted\n // to our bounds) and grab the display string\n var polyPointString = \"\"\n this.displayPoints.forEach(function(aPoint) {\n polyPointString += aPoint.x + \",\" + aPoint.y + \" \"\n })\n \n this.setClipMode('visible')\n var html = \"\"\n html += ''\n html += 'Sorry, your browser does not support SVG'\n this.jQuery().html(html)\n}","funcProperties":{"__isSmartRef__":true,"id":23},"__LivelyClassName__":"lively.Closure"},"22":{"this":{"__isSmartRef__":true,"id":0}},"23":{"user":"rick","__serializedExpressions__":["timestamp"],"timestamp":"new Date(\"Sat Dec 13 2014 11:27:23 GMT-0800 (PST)\")"},"24":{"varMapping":{"__isSmartRef__":true,"id":25},"source":"function svgStyleString() {\n // turn the svg style structure into a string\n var result = \"style=\"\n Object.keys(this.svgStyle).forEach(function(aKey) {\n result += aKey+\":\" +this.svgStyle[aKey] + \";\"\n }.bind(this))\n return result;\n}","funcProperties":{"__isSmartRef__":true,"id":26},"__LivelyClassName__":"lively.Closure"},"25":{"this":{"__isSmartRef__":true,"id":0}},"26":{"user":"rick","__serializedExpressions__":["timestamp"],"timestamp":"new Date(\"Sat Dec 13 2014 11:59:07 GMT-0800 (PST)\")"},"27":{"varMapping":{"__isSmartRef__":true,"id":28},"source":"function normalizePoints() {\n // normalize so that the top left is at (0,0)\n // do we really want to do this?\n var minPoint = this.polygonPoints[0].copy()\n this.polygonPoints.forEach(function(aPoint) {\n minPoint.x = Math.min(minPoint.x, aPoint.x)\n minPoint.y = Math.min(minPoint.y, aPoint.y)\n })\n this.polygonPoints = this.polygonPoints.map(function(aPoint) {\n return aPoint.subPt(minPoint)\n })\n}","funcProperties":{"__isSmartRef__":true,"id":29},"__LivelyClassName__":"lively.Closure"},"28":{"this":{"__isSmartRef__":true,"id":0}},"29":{"user":"rick","__serializedExpressions__":["timestamp"],"timestamp":"new Date(\"Sat Dec 13 2014 10:10:51 GMT-0800 (PST)\")"},"30":{"varMapping":{"__isSmartRef__":true,"id":31},"source":"function getDesiredExtent() {\n // get how big this would like to be\n return this.getMaxPoint().addPt(this.morphicBoundsOffset)\n}","funcProperties":{"__isSmartRef__":true,"id":32},"__LivelyClassName__":"lively.Closure"},"31":{"this":{"__isSmartRef__":true,"id":0}},"32":{"user":"rick","__serializedExpressions__":["timestamp"],"timestamp":"new Date(\"Sat Dec 13 2014 11:27:45 GMT-0800 (PST)\")"},"33":{"varMapping":{"__isSmartRef__":true,"id":34},"source":"function rescaleToNewExtent() {\n // calculate the display points of the polygon. The big idea is that \n // the user-specified points are invariant, but the display points are \n // what are used to fit within whatever bounds we have. The reason we \n // don't just scale the polygonPoints and use those is that if we make\n // the polygon really small, the points go to (0,0) and then can't rescale\n var sizeToFit = this.getExtent().subPt(this.morphicBoundsOffset)\n var innerSize = this.getMaxPoint()\n // remember the scale factor for later use (e.g, addDisplayPoint()\n this.scaleFactor = pt(sizeToFit.x/innerSize.x, sizeToFit.y/innerSize.y)\n this.displayPoints = this.polygonPoints.map(function(aPoint) {\n return aPoint.scaleByPt(this.scaleFactor)\n }.bind(this))\n \n}","funcProperties":{"__isSmartRef__":true,"id":35},"__LivelyClassName__":"lively.Closure"},"34":{"this":{"__isSmartRef__":true,"id":0}},"35":{"user":"rick","__serializedExpressions__":["timestamp"],"timestamp":"new Date(\"Sat Dec 13 2014 11:40:46 GMT-0800 (PST)\")"},"36":{"varMapping":{"__isSmartRef__":true,"id":37},"source":"function getMaxPoint() {\n // get the maximum (x, y) of the user-set polygon points\n var maxPoint = this.polygonPoints[0].copy()\n this.polygonPoints.forEach(function(aPoint) {\n maxPoint.x = Math.max(maxPoint.x, aPoint.x)\n maxPoint.y = Math.max(maxPoint.y, aPoint.y)\n })\n return maxPoint\n}","funcProperties":{"__isSmartRef__":true,"id":38},"__LivelyClassName__":"lively.Closure"},"37":{"this":{"__isSmartRef__":true,"id":0}},"38":{"user":"rick","__serializedExpressions__":["timestamp"],"timestamp":"new Date(\"Sat Dec 13 2014 11:28:44 GMT-0800 (PST)\")"},"39":{"varMapping":{"__isSmartRef__":true,"id":40},"source":"function applyLayout() {\n // implement the layouter interface. This is how we reshape to new\n // extents automatically on a scale\n this.rescaleToNewExtent()\n this.display()\n}","funcProperties":{"__isSmartRef__":true,"id":45},"__LivelyClassName__":"lively.Closure"},"40":{"this":{"__isSmartRef__":true,"id":0},"__serializedLivelyClosures__":{"__isSmartRef__":true,"id":41}},"41":{"$super":{"__isSmartRef__":true,"id":42}},"42":{"varMapping":{"__isSmartRef__":true,"id":43},"source":"function () {\n try {\n // FIXME super is supposed to be static\n return Object.getPrototypeOf(obj)[name].apply(obj, arguments);\n } catch (e) {\n if (typeof $world !== undefined) $world.logError(e, 'Error in $super call')\n else alert('Error in $super call: ' + e + '\\n' + e.stack);\n return null;\n }\n }","funcProperties":{"__isSmartRef__":true,"id":44},"__LivelyClassName__":"lively.Closure"},"43":{"obj":{"__isSmartRef__":true,"id":0},"name":"applyLayout"},"44":{},"45":{"user":"rick","__serializedExpressions__":["timestamp"],"timestamp":"new Date(\"Sat Dec 13 2014 11:41:01 GMT-0800 (PST)\")"},"46":{"varMapping":{"__isSmartRef__":true,"id":47},"source":"function getMaxDisplayPoint() {\n // get the maximum extent for the display points. This\n // sets height and width in the html element\n var maxPoint = this.displayPoints[0].copy()\n this.displayPoints.forEach(function(aPoint) {\n maxPoint.x = Math.max(maxPoint.x, aPoint.x)\n maxPoint.y = Math.max(maxPoint.y, aPoint.y)\n })\n return maxPoint\n}","funcProperties":{"__isSmartRef__":true,"id":48},"__LivelyClassName__":"lively.Closure"},"47":{"this":{"__isSmartRef__":true,"id":0}},"48":{"user":"rick","__serializedExpressions__":["timestamp"],"timestamp":"new Date(\"Sat Dec 13 2014 11:28:25 GMT-0800 (PST)\")"},"49":{"varMapping":{"__isSmartRef__":true,"id":50},"source":"function setSVGStyleProperty(aProperty, aValue) {\n // e.g., setSVGStyleProperty('fill', 'red')\n // Common properties: fill, stroke, stroke-width, opacity\n // unless the property is a number, it should be a string\n this.svgStyle[aProperty] = aValue\n this.display()\n \n}","funcProperties":{"__isSmartRef__":true,"id":51},"__LivelyClassName__":"lively.Closure"},"50":{"this":{"__isSmartRef__":true,"id":0}},"51":{"user":"rick","__serializedExpressions__":["timestamp"],"timestamp":"new Date(\"Sat Dec 13 2014 11:58:43 GMT-0800 (PST)\")"},"52":{"varMapping":{"__isSmartRef__":true,"id":53},"source":"function setSVGStyle(aStyleStructure) {\n // e.g., this.setSVGStyle({fill:'rgb(253,127,127)', stroke:'blue', opacity:0.5, 'stroke-width':3})\n // Common properties: fill, stroke, stroke-width, opacity\n // unless the property is a number, it should be a string\n this.svgStyle = aStyleStructure\n this.display()\n \n}","funcProperties":{"__isSmartRef__":true,"id":54},"__LivelyClassName__":"lively.Closure"},"53":{"this":{"__isSmartRef__":true,"id":0}},"54":{"user":"rick","__serializedExpressions__":["timestamp"],"timestamp":"new Date(\"Sat Dec 13 2014 11:58:35 GMT-0800 (PST)\")"},"55":{"varMapping":{"__isSmartRef__":true,"id":56},"source":"function makePolygon(numSides, sideLength) {\n // this.makePolygon(5, 50)\n // no borders -- we will make sure that the left edge and top are both\n // zero\n if (!numSides || numSides < 3) {\n alert(\"Minimum number of sides is 3\")\n numSides = 3\n } \n if (!sideLength || sideLength < 5) {\n alert(\"Minimum side length is 5\")\n sideLength = 5\n } \n // radius of the polygon -- distance from each vertex to the center\n var radius = sideLength/(2*Math.sin(Math.PI/numSides))\n // center is at (radius, radius)\n var center = pt(radius, radius)\n // size is twice the radius + morphic offset\n this.setExtent(pt(2*radius, 2*radius).addPt(this.morphicBoundsOffset))\n // interior angle between two adjacent radii of the polygon\n var angleIncrement = 2 * Math.PI/numSides\n // angle for the first radius. This is vertical (3PI/2) for an odd-sided\n // polygon so that one vertex is at the top edge; for an even-sided polygon,\n // we want a flat edge across the top, so the angle is PI/2 + angleIncrement/2\n // This makes the first vertex on the top and just past the vertical \n var startAngle = (numSides % 2 == 1)?3*Math.PI/2:(3*Math.PI + angleIncrement)/2\n // compute the angles for each vertex, in the coordinates of the center\n var angles = Array.range(0, numSides - 1).map(function(aNumber) {return startAngle + aNumber * angleIncrement});\n\n // for angle a, the corresponding vertex is at radius * (cos a, sin a)\n // in the coordinates of the \n this.polygonPoints = angles.map(function(anAngle) {\n return center.addPt(pt(radius * Math.cos(anAngle), radius * Math.sin(anAngle)))\n })\n this.rescaleToNewExtent()\n this.display()\n \n}","funcProperties":{"__isSmartRef__":true,"id":57},"__LivelyClassName__":"lively.Closure"},"56":{"this":{"__isSmartRef__":true,"id":0}},"57":{"user":"rick","__serializedExpressions__":["timestamp"],"timestamp":"new Date(\"Sat Dec 13 2014 12:59:05 GMT-0800 (PST)\")"},"58":{"varMapping":{"__isSmartRef__":true,"id":59},"source":"function makeArrow(bodyWidth, bodyLength, headWidth, headLength, twoSided) {\n // this.makeArrow(30, 50, 40, 20, true)\n // draws a horizontal arrow, pointing right (or both ways if two-sided is true).\n // bodyWidth: width (top-bottom) of the arrow body\n // bodyLength: length (left-right) of the arrow body\n // headWidth: width (top-bottom) of the arrow heqd(s)\n // headLength: length (left-right) of the arrow head(s)\n // twoSided: true for a double arrow\n var arrowParams = {\n 'bodyWidth': 5,\n 'bodyLength': 10,\n 'headWidth': 5,\n 'headLength': 5\n }\n bodyWidth = this.checkParameter('bodyWidth', bodyWidth, arrowParams.bodyWidth)\n bodyLength = this.checkParameter('bodyLength', bodyLength, arrowParams.bodyLength)\n headLength = this.checkParameter('headLength', headLength, arrowParams.headLength)\n headWidth = this.checkParameter('headWidth', headWidth, bodyWidth)\n // set the top and bottom of the body. The top of the head is 0, the bottom of\n // the head will be this.getExtent().y. The horizontal axis of the \n // body is headWidth/2, so the top edge is that - bodyWidth/2, and the bottom \n // edge is that + bottom/2\n var bodyTopY = (headWidth - bodyWidth)/2\n var bodyBotY = (headWidth + bodyWidth)/2\n var horizontalCenter = headWidth/2\n if (twoSided) {\n this.setExtent(pt(2*headLength + bodyLength, headWidth))\n this.polygonPoints = [pt(0,horizontalCenter), pt(headLength, 0), pt(headLength, bodyTopY),\n pt(headLength + bodyLength, bodyTopY), pt(headLength + bodyLength, 0),\n pt (2* headLength + bodyLength, horizontalCenter), pt(headLength + bodyLength, headWidth),\n pt(headLength + bodyLength, bodyBotY), pt(headLength, bodyBotY), pt(headLength, headWidth)]\n } else {\n this.setExtent(pt(headLength + bodyLength, headWidth))\n this.polygonPoints = [ pt(0, bodyTopY), pt(bodyLength, bodyTopY), pt(bodyLength, 0),\n pt (headLength + bodyLength, horizontalCenter), pt(bodyLength, headWidth),\n pt(bodyLength, bodyBotY), pt(0, bodyBotY)]\n }\n this.rescaleToNewExtent()\n this.display()\n}","funcProperties":{"__isSmartRef__":true,"id":60},"__LivelyClassName__":"lively.Closure"},"59":{"this":{"__isSmartRef__":true,"id":0}},"60":{"user":"rick","__serializedExpressions__":["timestamp"],"timestamp":"new Date(\"Sat Dec 13 2014 13:36:11 GMT-0800 (PST)\")"},"61":{"varMapping":{"__isSmartRef__":true,"id":62},"source":"function checkParameter(name, value, minValue) {\n if(!value || isNaN(value)) {\n alert(name + ' must be specified, default used')\n return minValue\n }\n if (value < minValue) {\n alert(name + ' must be >= ' + minValue + '. ' + minValue + ' used instead')\n return minValue\n }\n return value\n}","funcProperties":{"__isSmartRef__":true,"id":63},"__LivelyClassName__":"lively.Closure"},"62":{"this":{"__isSmartRef__":true,"id":0}},"63":{"user":"rick","__serializedExpressions__":["timestamp"],"timestamp":"new Date(\"Sat Dec 13 2014 13:34:30 GMT-0800 (PST)\")"},"64":{"varMapping":{"__isSmartRef__":true,"id":65},"source":"function getPoints() {\n return this.polygonPoints.slice(0);\n \n}","funcProperties":{"__isSmartRef__":true,"id":66},"__LivelyClassName__":"lively.Closure"},"65":{"this":{"__isSmartRef__":true,"id":0}},"66":{"user":"rick","__serializedExpressions__":["timestamp"],"timestamp":"new Date(\"Tue Dec 16 2014 19:32:50 GMT-0800 (PST)\")"},"isSimplifiedRegistry":true}}