Add square, ellipse, and circle annotation classes.

Also, if shift is held down while drawing a selection rectangle, constrain it to a square.
OpenGeoscience · Mar 28, 2022 · 912e5b0 · 912e5b0
1 parent 112a58e
commit 912e5b0
Show file tree

Hide file tree

Showing 7 changed files with 647 additions and 335 deletions.
diff --git a/examples/annotations/index.pug b/examples/annotations/index.pug
@@ -4,7 +4,10 @@ block append mainContent
   #controls
     .form-group.annotationtype(title='Select the type of annotation to add.')
       .shortlabel Add
-      button#rectangle.lastused(next='polygon') Rectangle
+      button#rectangle.lastused(next='square') Rectangle
+      button#square.lastused(next='ellipse') Square
+      button#ellipse(next='circle') Ellipse
+      button#circle(next='polygon') Circle
       button#polygon(next='point') Polygon
       button#point(next='line') Point
       button#line(next='rectangle') Line
@@ -13,6 +16,9 @@ block append mainContent
         .annotation.none
         .annotation.polygon Left-click points in the polygon.  Double click, right click, or click the starting point to close the polygon.
         .annotation.rectangle Left click-and-drag or left click opposite corners to draw a rectangle.
+        .annotation.square Left click-and-drag or left click opposite corners to draw a square.
+        .annotation.ellipse Left click-and-drag or left click opposite corners to draw an ellipse.
+        .annotation.circle Left click-and-drag or left click opposite corners to draw a circle.
         .annotation.point Left click to create a point.
         .annotation.line Left-click points in the line.  Double click, right click, or click the starting point to end the line.
     .form-group(title='If enabled, left-click to add another annotation, and right-click to switch annotation type.  Otherwise, you must click a button above.')
@@ -62,29 +68,29 @@ block append mainContent
               .form-group(annotation-types='point', title='Set to "false" to disable, "true" to use the specified radius at the current zoom, or a zoom level to use the specified radius at that zoom level.')
                 label(for='edit-scaled') Scale with Zoom
                 input#edit-scaled(option='scaled', format='booleanOrNumber')
-              .form-group(annotation-types='point polygon rectangle')
+              .form-group(annotation-types='point polygon rectangle square ellipse circle')
                 label(for='edit-fill') Fill
                 select#edit-fill(option='fill', format='boolean')
                   option(value='true') Yes
                   option(value='false') No
-              .form-group(annotation-types='point polygon rectangle')
+              .form-group(annotation-types='point polygon rectangle square ellipse circle')
                 label(for='edit-fillColor') Fill Color
                 input#edit-fillColor(option='fillColor', format='color')
-              .form-group(annotation-types='point polygon rectangle')
+              .form-group(annotation-types='point polygon rectangle square ellipse circle')
                 label(for='edit-fillOpacity') Fill Opacity
                 input#edit-fillOpacity(option='fillOpacity', format='opacity')
-              .form-group(annotation-types='point polygon rectangle')
+              .form-group(annotation-types='point polygon rectangle square ellipse circle')
                 label(for='edit-stroke') Stroke
                 select#edit-stroke(option='stroke', format='boolean')
                   option(value='true') Yes
                   option(value='false') No
-              .form-group(annotation-types='point polygon rectangle line')
+              .form-group(annotation-types='point polygon rectangle square ellipse circle line')
                 label(for='edit-strokeWidth') Stroke Width
                 input#edit-strokeWidth(option='strokeWidth', format='positive')
-              .form-group(annotation-types='point polygon rectangle line')
+              .form-group(annotation-types='point polygon rectangle square ellipse circle line')
                 label(for='edit-strokeColor') Stroke Color
                 input#edit-strokeColor(option='strokeColor', format='color')
-              .form-group(annotation-types='point polygon rectangle line')
+              .form-group(annotation-types='point polygon rectangle square ellipse circle line')
                 label(for='edit-strokeOpacity') Stroke Opacity
                 input#edit-strokeOpacity(option='strokeOpacity', format='opacity')
               .form-group(annotation-types='line')

diff --git a/examples/annotations/main.css b/examples/annotations/main.css
@@ -53,6 +53,9 @@
 }
 #instructions[annotation="polygon"] .annotation.polygon,
 #instructions[annotation="rectangle"] .annotation.rectangle,
+#instructions[annotation="square"] .annotation.square,
+#instructions[annotation="ellipse"] .annotation.ellipse,
+#instructions[annotation="circle"] .annotation.circle,
 #instructions[annotation="point"] .annotation.point,
 #instructions[annotation="line"] .annotation.line,
 #instructions[annotation="none"] .annotation.none {