Port the remaining shapes in the system to use the new transforms and polygonization in the backend, and to be properly rendered with the new transforms and polygonization in the frontend.

• AnchorPoint
• Square
• Parallelogram
• Image
• Curve
• Arrow
• Text
• Ellipse
• Brace (not a priority)
• Arc (not a priority)

• Porting lines
• Porting curves

Let's say the shape name is called x (e.g. x = AnchorPoint). Here are the steps:

• add shape definition called xTransformType to the list of types and shapes
• looking at the existing shape called xType, copy any properties that don't change, and add any new transform properties needed for the shape
  • degrees of freedom for the default transform (e.g. dx, dy, scaleX, scaleY, rotation)
  • transform
  • transformation
  • polygon
• add it to list of shapes shapeDefList
• add new cases in findComputedProperty to compute the transformation and polygon properties
  • this may need a bit of thought, e.g. a Line is ported as a polygon, not a polyline, because a line can have a thickness. Or a shape may have a fill, and if it doesn't have a fill, it should be a polygon with a hole in it.
• recompile the system
• make a test Style program called sty/transform-x.sty (usually I test it with sub/twosets.sub), style the Substance objects with a new shape called xTransform, and test that the system can run with the new Style program. This is to catch any compiler runtime errors.

Now we want to draw the new shape in the frontend. The frontend is located in penrose-web/src. Note that if the frontend is running (via npm start), then every time you save a file, it will hot reload in the browser and print any errors in the terminal. This is a nice way to catch errors fast. Here are the steps:

• make a frontend file for it called xTransform.tsx
  • copy most of the contents from x.tsx (the rendering file for the original shape)
  • replace x with xTransform in the file (in the class and export lines)
  • port the file to use transforms: get rid of any calls to toScreen, remove excess imports from Util, import svgTransformString from Util, then add the transform as an SVG property:
    • transform={svgTransformString(shape.transformation.contents, canvasSize)}
    • you might need to remove any old code that makes assumptions about the screen space or default size of the shape in the frontend
• add the new file to the list of shapes in frontend: in componentMap.tsx, add a line to the imports and the componentMap
• stop the frontend, do npm run build-lib since a new file was added, then npm start again

• test that shape is drawn correctly in the frontend
  • with and without default transforms and custom transforms
• test that the polygon looks correct in the frontend
• test that the energies work on the transformed shapes (this is to catch any optimization runtime errors)