From 86eeaa1b9f2366947270f7f411251cd0165f5832 Mon Sep 17 00:00:00 2001
From: Andres Kasekamp <andreskasekamp@gmail.com>
Date: Fri, 22 Dec 2023 10:19:59 +0200
Subject: [PATCH] Sketching panel migrated

---
 index.html        | 102 ++++++++++++++++++++++++----------------------
 modules/sketch.js |  11 -----
 style.css         |   7 +---
 3 files changed, 55 insertions(+), 65 deletions(-)

diff --git a/index.html b/index.html
index f631f73..3e76ffa 100644
--- a/index.html
+++ b/index.html
@@ -49,6 +49,8 @@ <h2 id="header-title">
                     scale="l">
                 </calcite-action>
                 <calcite-action data-action-id="slicing" icon="slice" text="Slicing" scale="l"></calcite-action>
+                <calcite-action data-action-id="sketching" icon="freehand" text="Sketch" scale="l">
+                </calcite-action>
                 <calcite-action data-action-id="information" icon="information" text="Information" scale="l">
                 </calcite-action>
                 <calcite-action id="share-tooltip" data-action-id="share" icon="share" text="Share" scale="l">
@@ -57,6 +59,7 @@ <h2 id="header-title">
                     <span>Share a map</span>
                 </calcite-tooltip>
 
+
             </calcite-action-bar>
 
             <calcite-alert id="share-map-alert" auto-close auto-close-duration="fast" kind="success">
@@ -113,6 +116,56 @@ <h2 id="header-title">
                 <div id="slicing-container"></div>
             </calcite-panel>
 
+            <calcite-panel heading="Sketching" height-scale="l" data-panel-id="sketching" hidden>
+                <div id="sketchPanel" class="esri-widget">
+                    <div id="startbuttons">
+                        <button id="point" data-type="point" class="esri-button starttool">
+                            Draw a point of interest
+                        </button>
+                        <button id="line" data-type="polyline" class="esri-button starttool">
+                            Draw a route
+                        </button>
+                        <button id="extrudedPolygon" data-type="polygon" class="esri-button starttool">
+                            Draw a building
+                        </button>
+                    </div>
+                    <div id="actionbuttons">
+                        <button id="cancel" class="esri-button">Cancel</button>
+                        <button id="done" class="esri-button">Done</button>
+                    </div>
+
+                    <div id="edgeoperationbuttons">
+                        <div id="extrudeSliderContainer">
+                            <div>Extrude value: <span id="extrude">10</span></div>
+                            <div id="extrudeSlider"></div>
+                        </div>
+                        <br />Select the edge operation:
+                        <div class="update-options" id="edge">
+                            <button class="esri-widget--button edge-button" id="none-edge-button" value="none">
+                                None
+                            </button>
+                            <button class="esri-widget--button edge-button edge-button-selected" id="split-edge-button"
+                                value="split">
+                                Split
+                            </button>
+                            <button class="esri-widget--button edge-button" id="offset-edge-button" value="offset">
+                                Offset
+                            </button>
+                        </div>
+                        Select the move operation:
+                        <div class="update-options" id="shape">
+                            <button class="esri-widget--button shape-button" id="none-shape-button" value="none">
+                                None
+                            </button>
+                            <button class="esri-widget--button shape-button shape-button-selected"
+                                id="move-shape-button" value="move">
+                                Move
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </calcite-panel>
+
             <!-- Info panel (populates with info from the web map) -->
             <calcite-panel id="information-panel" heading="Details" data-panel-id="information" hidden>
                 <div id="info-content">
@@ -132,59 +185,10 @@ <h2 id="header-title">
             <calcite-panel height-scale="l" data-panel-id="share" hidden closed>
             </calcite-panel>
 
-
         </calcite-shell-panel>
         <div id="viewDiv" class="esri-widget">
         </div>
 
-        <div id="sketchPanel" class="esri-widget">
-            <div id="startbuttons">
-                <button id="point" data-type="point" class="esri-button starttool">
-                    Draw a point of interest
-                </button>
-                <button id="line" data-type="polyline" class="esri-button starttool">
-                    Draw a route
-                </button>
-                <button id="extrudedPolygon" data-type="polygon" class="esri-button starttool">
-                    Draw a building
-                </button>
-            </div>
-            <div id="actionbuttons">
-                <button id="cancel" class="esri-button">Cancel</button>
-                <button id="done" class="esri-button">Done</button>
-            </div>
-
-            <div id="edgeoperationbuttons">
-                <div id="extrudeSliderContainer">
-                    <div>Extrude value: <span id="extrude">10</span></div>
-                    <div id="extrudeSlider"></div>
-                </div>
-                <br />Select the edge operation:
-                <div class="update-options" id="edge">
-                    <button class="esri-widget--button edge-button" id="none-edge-button" value="none">
-                        None
-                    </button>
-                    <button class="esri-widget--button edge-button edge-button-selected" id="split-edge-button"
-                        value="split">
-                        Split
-                    </button>
-                    <button class="esri-widget--button edge-button" id="offset-edge-button" value="offset">
-                        Offset
-                    </button>
-                </div>
-                Select the move operation:
-                <div class="update-options" id="shape">
-                    <button class="esri-widget--button shape-button" id="none-shape-button" value="none">
-                        None
-                    </button>
-                    <button class="esri-widget--button shape-button shape-button-selected" id="move-shape-button"
-                        value="move">
-                        Move
-                    </button>
-                </div>
-            </div>
-        </div>
-
     </calcite-shell>
 
 </body>
diff --git a/modules/sketch.js b/modules/sketch.js
index dede332..8533218 100644
--- a/modules/sketch.js
+++ b/modules/sketch.js
@@ -197,17 +197,6 @@ define([
       extrudedPolygon.symbol = updatedSymbol;
     }
 
-    const expandSketch = new Expand({
-      expandTooltip: "Sketching",
-      view: view,
-      content: document.getElementById("sketchPanel"),
-      expanded: false,
-      group: "bottom-right",
-      expandIcon: "freehand",
-    });
-
-    view.ui.add(expandSketch, "bottom-right");
-
     // default values for edge/move operations
     let edgeType = "split";
     let shapeType = "move";
diff --git a/style.css b/style.css
index 95c52c3..5934482 100644
--- a/style.css
+++ b/style.css
@@ -208,12 +208,9 @@ img {
   padding: 0.25em;
 }
 
-/* #daylight-container {
-  width: 300px;
-} */
-
 #daylight-container,
-#shadowcast-container {
+#shadowcast-container,
+#sketchPanel {
   width: 100%; /* Ensure the widget container takes full width */
   height: 100%; /* Ensure the widget container takes full height */
 }