DM-11350 PointSelect Marker can not be added after the overlay layer is deleted

Author: Cindy Wang

src/firefly/js/drawingLayers/PointSelection.js

@@ -52,17 +52,17 @@ function creator(initPayload, presetDefaults) {
     drawingDef= Object.assign(drawingDef,presetDefaults);
     idCnt++;
 
-    var pairs= {
+    const pairs= {
         [MouseState.UP.key]: dispatchSelectPoint
     };
-
-    var actionTypes= [DrawLayerCntlr.SELECT_POINT];
-
-    var options= {
-        isPointData:true,
-        hasPerPlotData:true,
+    const actionTypes= [DrawLayerCntlr.SELECT_POINT];
+    const options = {
+        isPointData: true,
+        hasPerPlotData: true,
+        canUserDelete: false,
         canUserChangeColor: ColorChangeType.DYNAMIC
     };
+
     return DrawLayer.makeDrawLayer(`${ID}-${idCnt}`,TYPE_ID, 'Selected Point', options, drawingDef, actionTypes, pairs);
 }
 

src/firefly/js/visualize/draw/DrawLayer.js

@@ -112,8 +112,8 @@ export const ColorChangeType= {DISABLE,DYNAMIC,STATIC};
  * @param {object} drawingDef  the defaults that the drawer will use if not overridden by the object @see DrawingDef
  * @param {Array} actionTypeAry extra [actions] that are allow though to the drawing layer reducer
  * @param {object} mouseEventMap object literal with event to function mapping, see documentation below in object
- *
- *
+ * @param {object} exclusive
+ * @param {function} getCursor
  * @return {DrawLayer}
  */
 function makeDrawLayer(drawLayerId,

src/firefly/js/visualize/ui/DrawLayerItemView.jsx

@@ -13,7 +13,12 @@ const bSty= {
     display:'inline-block',
     whiteSpace: 'nowrap'
 };
+const bStyWid = {
+    ...bSty, width: 'calc(33%)'
+};
+
 const symbolSize= 10;
+const mLeft = 5;
 
 function DrawLayerItemView({maxTitleChars, lastItem, deleteLayer,
                             color, canUserChangeColor, canUserDelete, title, helpLine,
@@ -50,7 +55,7 @@ function DrawLayerItemView({maxTitleChars, lastItem, deleteLayer,
                     <input type='checkbox' checked={visible} onChange={() => changeVisible()} />
                     {getTitleTag(title,maxTitleChars)}
                 </div>
-                <div style={{padding:'0 4px 0 5px'}}>
+                <div style={{padding:'0 4px 0 5px', width: 180, display: 'flex', justifyContent: 'flex-end'}}>
                     {makeColorChange(color, canUserChangeColor,modifyColor)}
                     {makeShape(isPointData,drawingDef, modifyShape)}
                     {makeDelete(canUserDelete,deleteLayer)}
@@ -103,20 +108,20 @@ function makeColorChange(color, canUserChangeColor, modifyColor) {
         height:symbolSize,
         backgroundColor: color,
         display:'inline-block',
-        marginLeft:5
+        marginLeft: mLeft
     };
     if (canUserChangeColor) {
         return (
-            <div style={bSty}>
+            <div style={bStyWid}>
                 <div style={feedBackStyle} onClick={() => modifyColor()}  />
                 <a className='ff-href'
                    onClick={() => modifyColor()}
-                   style={Object.assign({},bSty,{marginLeft:5})}>Color</a>
+                   style={Object.assign({},bSty, {paddingLeft:5})}>Color</a>
             </div>
         );
     }
     else {
-        return (<div style={Object.assign({},bSty, {width:15})}></div>);
+        return false;
     }
 
 }
@@ -130,25 +135,25 @@ function makeShape(isPointData, drawingDef, modifyShape) {
         var {width, height} = DrawUtil.getDrawingSize(size, drawingDef.symbol);
 
         const feedBackStyle= {
-            width:width,
-            height:height,
+            width,
+            height,
             display:'inline-block',
-            marginLeft:5
+            marginLeft:mLeft
         };
 
         return (
-            <div style={bSty} >
+            <div style={bStyWid} >
                 <div style={feedBackStyle} onClick={() => modifyShape()}>
                     <SimpleCanvas width={width} height={height} drawIt={ (c) => drawOnCanvas(c, df, width, height)}/>
                 </div>
                 <a className='ff-href'
                    onClick={() => modifyShape()}
-                   style={Object.assign({}, bSty, {marginLeft:5})}>Symbol</a>
+                   style={Object.assign({}, bSty, {paddingLeft:5})}>Symbol</a>
            </div>
         );
     }
     else {
-        return (<div style={Object.assign({},bSty, {width:20})}></div>);
+        return false;
     }
 
 }
@@ -179,15 +184,18 @@ function makeDelete(canUserDelete,deleteLayer) {
     const deleteStyle= {
         display:'inline-block',
         whiteSpace: 'nowrap',
-        marginLeft: 5
+        marginLeft: mLeft*2+symbolSize
     };
     if (canUserDelete) {
         return (
-            <a className='ff-href' onClick={() => deleteLayer()} style={deleteStyle}>Delete</a>
+            <div style={bStyWid}>
+                <a className='ff-href'
+                   onClick={() => deleteLayer()} style={deleteStyle}>Delete</a>
+            </div>
         );
     }
     else {
-        return (<div style={Object.assign({},bSty, {width:15})}></div>);
+        return false;
     }
 
 }