Skip to content
This repository has been archived by the owner on Apr 2, 2024. It is now read-only.

Commit

Permalink
Sketching panel migrated
Browse files Browse the repository at this point in the history
  • Loading branch information
@AndresKasekamp
AndresKasekamp committed Dec 22, 2023
1 parent e023673 commit 86eeaa1
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 65 deletions.
102 changes: 53 additions & 49 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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">
Expand Down Expand Up @@ -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">
Expand All @@ -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>
Expand Down
11 changes: 0 additions & 11 deletions modules/sketch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
7 changes: 2 additions & 5 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
}

0 comments on commit 86eeaa1

Please sign in to comment.