WIP

histomicsui/web_client/panels/DrawWidget.js

@@ -110,6 +110,7 @@ var DrawWidget = Panel.extend({
                 delete this._skipRenderHTML;
             }
         } else {
+            this._sortElements();
             this.$el.html(drawWidget({
                 title: 'Draw',
                 elements: this.collection.models,
@@ -1089,6 +1090,30 @@ var DrawWidget = Panel.extend({
         this.parentView.trigger('h:highlightAnnotation');
     },
 
+    _elementSortKey(model) {
+        const element = model.attributes;
+        const userLabel = (element.label || {}).value;
+        if (userLabel) {
+            return ('' + userLabel).toLowerCase();
+        }
+        const type = element.type === 'polyline'
+            ? (element.closed ? 'polygon' : 'line')
+            : element.type;
+        if (['point', 'polyline', 'rectangle', 'ellipse', 'circle'].includes(element.type)) {
+            const groupName = element.group || this.parentView._defaultGroup;
+            return `${groupName} ${type}`.toLowerCase();
+        }
+        return ('' + type).toLowerCase();
+    },
+
+    _sortElements() {
+        this.collection.models.sort((elementA, elementB) => {
+            const keyA = this._elementSortKey(elementA);
+            const keyB = this._elementSortKey(elementB);
+            return keyA.localeCompare(keyB);
+        });
+    },
+
     _recalculateGroupAggregation() {
         const groups = [];
         const used = {};