",
"
",
@@ -785,7 +805,8 @@ var DrawTool = {
$('#drawToolShapesCopyDropdown *').remove()
DrawTool.endDrawing()
DrawTool.populateShapes()
- $('#drawToolShapes').css('display', 'inherit')
+ $('#drawToolShapes').css('display', 'flex')
+ DrawTool.setSubmitButtonState(true)
break
case 'history':
$('.drawToolContextMenuHeaderClose').click()
@@ -1288,6 +1309,7 @@ var DrawTool = {
},
timeFilterDrawingLayer(fileId) {
if (L_.layers.layer[`DrawTool_${fileId}`]) {
+ DrawTool.setSubmitButtonState(true)
const file = DrawTool.getFileObjectWithId(fileId)
let startField
@@ -1312,10 +1334,13 @@ var DrawTool = {
startField,
endField
)
+
if (l2.savedOptions == null)
- l2.savedOptions = JSON.parse(
- JSON.stringify(l2.options)
- )
+ l2.savedOptions = {
+ opacity: l2.options.opacity,
+ fillOpacity: l2.options.fillOpacity,
+ }
+
l2.temporallyHidden = !isVisible
if (l2.temporallyHidden)
$(
@@ -1351,7 +1376,10 @@ var DrawTool = {
endField
)
if (l.savedOptions == null)
- l.savedOptions = JSON.parse(JSON.stringify(l.options))
+ l.savedOptions = {
+ opacity: l.options.opacity,
+ fillOpacity: l.options.fillOpacity,
+ }
l.temporallyHidden = !isVisible
if (l.temporallyHidden)
diff --git a/src/essence/Tools/Draw/DrawTool_Files.js b/src/essence/Tools/Draw/DrawTool_Files.js
index f697d3cf..5e468183 100644
--- a/src/essence/Tools/Draw/DrawTool_Files.js
+++ b/src/essence/Tools/Draw/DrawTool_Files.js
@@ -1705,7 +1705,9 @@ var Files = {
populateShapesAfter,
selectedFeatureIds,
asPublished,
- cb
+ cb,
+ forceGeoJSON,
+ dontUpdateSourceGeoJSON
) {
let parsedId =
typeof parseInt(id) === 'number' && !Array.isArray(id)
@@ -1724,210 +1726,214 @@ var Files = {
}
if (asPublished == true) body.published = true
- DrawTool.getFile(
- body,
- (function (index, selectedFeatureIds) {
- return function (data) {
- var layerId = 'DrawTool_' + index
- //Remove it first
- if (L_.layers.layer.hasOwnProperty(layerId)) {
- for (
- var i = 0;
- i < L_.layers.layer[layerId].length;
- i++
- ) {
- //Close any popups/labels
- var popupLayer = L_.layers.layer[layerId][i]
- DrawTool.removePopupsFromLayer(popupLayer)
-
- Map_.rmNotNull(L_.layers.layer[layerId][i])
- L_.layers.layer[layerId][i] = null
- }
- //And from the Globe
- Globe_.litho.removeLayer('camptool_' + layerId)
+ if (forceGeoJSON) {
+ keepGoing(
+ {
+ geojson: forceGeoJSON,
+ },
+ parsedId,
+ selectedFeatureIds,
+ dontUpdateSourceGeoJSON
+ )
+ } else {
+ DrawTool.getFile(
+ body,
+ (function (index, selectedFeatureIds) {
+ return function (data) {
+ keepGoing(data, index, selectedFeatureIds)
}
+ })(parsedId, selectedFeatureIds)
+ )
+ }
- let features = data.geojson.features
- DrawTool.fileGeoJSONFeatures[index] = features
+ function keepGoing(
+ data,
+ index,
+ selectedFeatureIds,
+ dontUpdateSourceGeoJSON
+ ) {
+ var layerId = 'DrawTool_' + index
+ //Remove it first
+ if (L_.layers.layer.hasOwnProperty(layerId)) {
+ for (var i = 0; i < L_.layers.layer[layerId].length; i++) {
+ //Close any popups/labels
+ var popupLayer = L_.layers.layer[layerId][i]
+ DrawTool.removePopupsFromLayer(popupLayer)
+ Map_.rmNotNull(L_.layers.layer[layerId][i])
+ L_.layers.layer[layerId][i] = null
+ }
+ //And from the Globe
+ Globe_.litho.removeLayer('camptool_' + layerId)
+ }
- let coreFeatures = JSON.parse(JSON.stringify(data.geojson))
- coreFeatures.features = []
+ let features = data.geojson.features
+ if (dontUpdateSourceGeoJSON != true)
+ DrawTool.fileGeoJSONFeatures[index] = features
- for (var i = 0; i < features.length; i++) {
- if (!features[i].properties.hasOwnProperty('style')) {
- features[i].properties.style = F_.clone(
- DrawTool.defaultStyle
- )
- if (
- features[i].geometry.type.toLowerCase() ==
- 'point'
- )
- features[i].properties.style.fillOpacity = 1
- }
- const style = features[i].properties.style
-
- if (features[i].properties.arrow === true) {
- const c = features[i].geometry.coordinates
- const start = new L.LatLng(c[0][1], c[0][0])
- const end = new L.LatLng(c[1][1], c[1][0])
-
- L_.addArrowToMap(
- layerId,
- start,
- end,
- features[i].properties.style,
- features[i]
- )
- } else if (features[i].properties.annotation === true) {
- L_.createAnnotation(
- features[i],
- 'DrawToolAnnotation',
- layerId,
- id,
- features[i].properties._.id,
- true
- )
+ let coreFeatures = JSON.parse(JSON.stringify(data.geojson))
+ coreFeatures.features = []
- DrawTool.refreshNoteEvents()
- } else if (features[i].geometry.type === 'Point') {
- L_.layers.layer[layerId].push(
- LayerGeologic.createSymbolMarker(
- features[i].geometry.coordinates[1],
- features[i].geometry.coordinates[0],
- features[i].properties.style
- ).addTo(Map_.map)
- )
- L_.layers.layer[layerId][
- L_.layers.layer[layerId].length - 1
- ].feature = features[i]
- } else if (features[i].geometry.type === 'LineString') {
- L_.layers.layer[layerId].push(
- LayerGeologic.createLinework(
- features[i],
- style
- ).addTo(Map_.map)
- )
- } else {
- L_.layers.layer[layerId].push(
- L.geoJson(
- {
- type: 'FeatureCollection',
- features: [features[i]],
- },
- {
- // eslint-disable-next-line
- style: function (feature) {
- if (
- feature.properties.style
- ?.geologic &&
- typeof LayerGeologic.getUrl ===
- 'function'
- ) {
- const style =
- feature.properties.style
- const g = style.geologic
-
- const fillImage =
- LayerGeologic.getFillPattern(
- LayerGeologic.getUrl(
- g.type,
- LayerGeologic.getTag(
- g.tag,
- g.color
- )
- ),
- g.size,
- g.fillColor
- ? g.fillColor[0] ===
- '#'
- ? F_.hexToRGBA(
- g.fillColor,
- g.fillOpacity ==
- null
- ? 1
- : g.fillOpacity
- )
- : g.fillColor ||
- 'none'
- : 'none',
- L_.Map_.map
+ for (var i = 0; i < features.length; i++) {
+ if (!features[i].properties.hasOwnProperty('style')) {
+ features[i].properties.style = F_.clone(
+ DrawTool.defaultStyle
+ )
+ if (features[i].geometry.type.toLowerCase() == 'point')
+ features[i].properties.style.fillOpacity = 1
+ }
+ const style = features[i].properties.style
+
+ if (features[i].properties.arrow === true) {
+ const c = features[i].geometry.coordinates
+ const start = new L.LatLng(c[0][1], c[0][0])
+ const end = new L.LatLng(c[1][1], c[1][0])
+
+ L_.addArrowToMap(
+ layerId,
+ start,
+ end,
+ features[i].properties.style,
+ features[i]
+ )
+ } else if (features[i].properties.annotation === true) {
+ L_.createAnnotation(
+ features[i],
+ 'DrawToolAnnotation',
+ layerId,
+ id,
+ features[i].properties._.id,
+ true
+ )
+
+ DrawTool.refreshNoteEvents()
+ } else if (features[i].geometry.type === 'Point') {
+ L_.layers.layer[layerId].push(
+ LayerGeologic.createSymbolMarker(
+ features[i].geometry.coordinates[1],
+ features[i].geometry.coordinates[0],
+ features[i].properties.style
+ ).addTo(Map_.map)
+ )
+ L_.layers.layer[layerId][
+ L_.layers.layer[layerId].length - 1
+ ].feature = features[i]
+ } else if (features[i].geometry.type === 'LineString') {
+ L_.layers.layer[layerId].push(
+ LayerGeologic.createLinework(features[i], style).addTo(
+ Map_.map
+ )
+ )
+ } else {
+ L_.layers.layer[layerId].push(
+ L.geoJson(
+ {
+ type: 'FeatureCollection',
+ features: [features[i]],
+ },
+ {
+ // eslint-disable-next-line
+ style: function (feature) {
+ if (
+ feature.properties.style?.geologic &&
+ typeof LayerGeologic.getUrl ===
+ 'function'
+ ) {
+ const style = feature.properties.style
+ const g = style.geologic
+
+ const fillImage =
+ LayerGeologic.getFillPattern(
+ LayerGeologic.getUrl(
+ g.type,
+ LayerGeologic.getTag(
+ g.tag,
+ g.color
)
+ ),
+ g.size,
+ g.fillColor
+ ? g.fillColor[0] === '#'
+ ? F_.hexToRGBA(
+ g.fillColor,
+ g.fillOpacity ==
+ null
+ ? 1
+ : g.fillOpacity
+ )
+ : g.fillColor || 'none'
+ : 'none',
+ L_.Map_.map
+ )
- return {
- ...feature.properties.style,
- fillPattern: fillImage,
- }
- }
- return feature.properties.style
- },
+ return {
+ ...feature.properties.style,
+ fillPattern: fillImage,
+ }
}
- ).addTo(Map_.map)
- )
- }
+ return feature.properties.style
+ },
+ }
+ ).addTo(Map_.map)
+ )
+ }
- if (features[i].properties.arrow !== true) {
- var last = L_.layers.layer[layerId].length - 1
- var llast = L_.layers.layer[layerId][last]
- var layer
+ if (features[i].properties.arrow !== true) {
+ var last = L_.layers.layer[layerId].length - 1
+ var llast = L_.layers.layer[layerId][last]
+ var layer
- if (llast.hasOwnProperty('_layers'))
- layer =
- llast._layers[Object.keys(llast._layers)[0]]
- else {
- layer = Object.assign({}, llast)
- }
- coreFeatures.features.push(layer.feature)
- }
+ if (llast.hasOwnProperty('_layers'))
+ layer = llast._layers[Object.keys(llast._layers)[0]]
+ else {
+ layer = Object.assign({}, llast)
}
+ coreFeatures.features.push(layer.feature)
+ }
+ }
- if (coreFeatures.features.length > 0) {
- // 3D doesn't support patterns yet so we'll reset their polygon fills to 0
- const coreFeaturesNormalized = []
- coreFeatures.features.forEach((f) => {
- const feat = JSON.parse(JSON.stringify(f))
- if (
- feat.properties?.style?.geologic?.type ===
- 'pattern'
- )
- feat.properties.style.fillOpacity = 0
- coreFeaturesNormalized.push(feat)
- })
- Globe_.litho.addLayer('clamped', {
- name: 'camptool_' + layerId,
- on: true,
- geojson: F_.getBaseGeoJSON(coreFeaturesNormalized),
- opacity: 1,
- minZoom: 0,
- maxZoom: 30,
- style: {
- // Prefer feature[f].properties.style values
- letPropertiesStyleOverride: true,
- },
- })
- }
+ if (coreFeatures.features.length > 0) {
+ // 3D doesn't support patterns yet so we'll reset their polygon fills to 0
+ const coreFeaturesNormalized = []
+ coreFeatures.features.forEach((f) => {
+ const feat = JSON.parse(JSON.stringify(f))
+ if (feat.properties?.style?.geologic?.type === 'pattern')
+ feat.properties.style.fillOpacity = 0
+ coreFeaturesNormalized.push(feat)
+ })
+ Globe_.litho.addLayer('clamped', {
+ name: 'camptool_' + layerId,
+ on: true,
+ geojson: F_.getBaseGeoJSON(coreFeaturesNormalized),
+ opacity: 1,
+ minZoom: 0,
+ maxZoom: 30,
+ style: {
+ // Prefer feature[f].properties.style values
+ letPropertiesStyleOverride: true,
+ },
+ })
+ }
- if (populateShapesAfter)
- DrawTool.populateShapes(id, selectedFeatureIds)
+ if (populateShapesAfter)
+ DrawTool.populateShapes(id, selectedFeatureIds)
- L_.enforceVisibilityCutoffs([layerId])
- DrawTool.maintainLayerOrder()
- DrawTool.timeFilterDrawingLayer(index)
+ L_.enforceVisibilityCutoffs([layerId])
+ DrawTool.maintainLayerOrder()
+ DrawTool.timeFilterDrawingLayer(index)
- DrawTool.refreshMasterCheckbox()
+ DrawTool.refreshMasterCheckbox()
- //Keep labels on if they were on before
- let indexOf = DrawTool.labelsOn.indexOf(index + '')
- if (indexOf != -1) {
- DrawTool.labelsOn.splice(indexOf, 1)
- DrawTool.toggleLabels(index + '')
- }
+ //Keep labels on if they were on before
+ let indexOf = DrawTool.labelsOn.indexOf(index + '')
+ if (indexOf != -1) {
+ DrawTool.labelsOn.splice(indexOf, 1)
+ DrawTool.toggleLabels(index + '')
+ }
- if (typeof cb === 'function') {
- cb()
- }
- }
- })(parsedId, selectedFeatureIds)
- )
+ if (typeof cb === 'function') {
+ cb()
+ }
+ }
},
/**
* Adds or removes a file
diff --git a/src/essence/Tools/Draw/DrawTool_Shapes.css b/src/essence/Tools/Draw/DrawTool_Shapes.css
new file mode 100644
index 00000000..7d08213c
--- /dev/null
+++ b/src/essence/Tools/Draw/DrawTool_Shapes.css
@@ -0,0 +1,448 @@
+#drawToolShapesCopyDiv {
+ background: var(--color-a);
+ display: flex;
+ width: 100%;
+ height: 34px;
+ border-top: 1px solid var(--color-d);
+ padding: 4px 4px 1px 4px;
+ justify-content: space-between;
+}
+#drawToolShapesCopyDiv > div:first-child {
+ line-height: 27px;
+ font-weight: bold;
+ width: 48px;
+ color: var(--color-f);
+ font-size: 13px;
+}
+#drawToolShapesCopyDiv > div:last-child {
+ width: 48px;
+ color: white;
+ background: var(--color-a2);
+ font-size: 13px;
+ padding: 7px;
+ position: relative;
+ height: 25px;
+ line-height: 11px;
+ text-align: center;
+ font-weight: bold;
+ cursor: pointer;
+ transition: background 0.2s cubic-bezier(0.445, 0.05, 0.55, 0.95);
+}
+#drawToolShapesCopyDiv > div:last-child:hover {
+ background: var(--color-c);
+}
+
+#drawToolShapesCopyDiv select {
+ height: 24px !important;
+ padding: unset !important;
+}
+
+#drawToolShapesCopyDropdown {
+ border: 1px solid var(--color-e);
+ flex: 1;
+ height: 25px;
+ margin: 0px 5px;
+ cursor: not-allowed;
+}
+#drawToolShapesCopyDropdown > .dropdown {
+ min-width: 144px !important;
+ max-width: 144px !important;
+ background: var(--color-a2);
+ color: var(--color-a6);
+ border: none;
+ height: 25px;
+}
+#drawToolShapesCopyMessageDiv {
+ position: absolute;
+ bottom: 43px;
+ background: linear-gradient(to right, #26ff67, rgba(127, 255, 0, 1));
+ width: 100%;
+ height: 31px;
+ padding: 6px 7px 7px 7px;
+ text-align: center;
+ color: black;
+ font-weight: bold;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
+}
+
+#drawToolShapesFilterDiv {
+ background: var(--color-a);
+ display: flex;
+ width: 100%;
+}
+#drawToolShapesFilter {
+ border: none;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+ flex: 1;
+ padding: 0px 8px;
+ height: 30px;
+ background: var(--color-a1);
+ color: var(--color-a7);
+}
+#drawToolShapesFilterAdvanced,
+#drawToolShapesFilterClear {
+ border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+ width: 30px;
+ line-height: 28px;
+ color: var(--color-a7);
+ text-align: center;
+ background: var(--color-a1);
+ height: 30px;
+ cursor: pointer;
+ transition: color 0.2s ease-in-out;
+}
+
+#drawToolShapesFilterAdvanced > i,
+#drawToolShapesFilterClear > i {
+ background: none !important;
+ color: var(--color-a5) !important;
+ border-bottom: none !important;
+ margin: 0 !important;
+}
+
+#drawToolShapesFilterAdvanced:hover > i,
+#drawToolShapesFilterClear:hover > i {
+ color: var(--color-a7) !important;
+}
+#drawToolShapesFilterAdvanced {
+ border-right: 1px solid var(--color-a-5);
+}
+#drawToolShapesFilterAdvanced.on {
+ background: var(--color-a2) !important;
+}
+#drawToolShapesFilterAdvanced.on > i {
+ color: var(--color-a7) !important;
+}
+
+#drawToolShapesFilterCount {
+ border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+ line-height: 30px;
+ color: var(--color-a5);
+ text-align: center;
+ background: var(--color-a1);
+ height: 30px;
+ font-size: 12px;
+}
+
+#drawToolShapesFilterAdvancedDiv {
+ overflow: hidden;
+ width: 100%;
+ max-height: 0px;
+ transition: height 0.2s ease-in-out;
+}
+#drawToolShapesFilterAdvancedDiv.on {
+ max-height: 50vh;
+}
+
+#drawToolShapes {
+ height: 100%;
+ display: flex;
+ flex-flow: column;
+}
+#drawToolDrawShapesList {
+ overflow-y: auto;
+ flex: 1;
+ transition: height 0.2s ease-in-out;
+}
+#drawToolShapesFeaturesList {
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+}
+.drawToolShapesFeaturesListFileHeader {
+ border-bottom: 1px solid var(--color-m3);
+ font-size: 13px;
+ width: max-content;
+ padding: 4px 8px;
+}
+.drawToolShapeLi {
+ border-bottom: 1px solid var(--color-a1-5);
+ color: var(--color-f);
+ background: rgba(255, 255, 255, 0);
+ transition: background 0.4s cubic-bezier(0.39, 0.575, 0.565, 1),
+ padding 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
+}
+.drawToolShapeLi:hover,
+.drawToolShapeLi.hovered {
+ background: var(--color-e);
+}
+.drawToolShapeLi.active {
+ background: var(--color-h);
+ color: black;
+ font-weight: bold;
+}
+.drawToolShapeLi.temporallyHidden {
+ display: none !important;
+}
+
+.drawToolShapeLiItem {
+ cursor: pointer;
+ display: flex;
+ height: 30px;
+ line-height: 30px;
+}
+.drawToolShapeLiItem > div:first-child {
+ width: calc(100% - 55px);
+ justify-content: start;
+}
+.drawToolShapeLiItem > div:first-child > div.flexbetween {
+ width: calc(100% - 7px);
+}
+.drawToolShapeLiItemContent {
+ width: 100%;
+ padding: 3px 0px;
+}
+
+.drawToolShapeLiItemCheck {
+ width: 16px;
+ height: 15px;
+ border-radius: 8px;
+ margin: 5px 5px 0px 5px;
+ border: 2px solid rgba(0, 0, 0, 0.2);
+ transition: border 0.2s ease-out;
+}
+.drawToolShapeLiItemCheck.checked {
+ border: 2px solid black;
+}
+
+.drawToolShapeLiItemA {
+ width: 4px;
+ height: 100%;
+}
+.drawToolShapeLiItemB {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+.drawToolShapeLiItemC {
+ color: white;
+ padding: 0px 4px;
+ margin-right: 3px;
+ width: 36px;
+ font-family: monospace;
+ text-align: center;
+}
+
+/*Filter*/
+#drawToolShapes_filtering {
+ background: var(--color-a2);
+ display: flex;
+ flex-flow: column;
+ height: 100%;
+}
+.gears_on #drawToolShapes_filtering {
+ display: block;
+}
+#drawToolShapes_filtering_header {
+ display: flex;
+ justify-content: space-between;
+ height: 30px;
+ line-height: 30px;
+}
+#drawToolShapes_filtering_title_left {
+ display: flex;
+}
+#drawToolShapes_filtering_title {
+ font-size: 14px;
+ padding-left: 8px;
+ line-height: 31px;
+ color: var(--color-a6);
+}
+#drawToolShapes_filtering_count {
+ font-size: 12px;
+ padding: 0px 4px;
+ color: #d6d6d6;
+}
+#drawToolShapes_filtering_add_value {
+ padding: 0px 6px;
+ color: var(--color-a6);
+}
+#drawToolShapes_filtering_add_value:hover {
+ background: var(--color-c);
+ color: var(--color-a7);
+}
+#drawToolShapes_filtering_add_value > div {
+ font-size: 11px;
+ margin-right: 2px;
+ line-height: 32px;
+ text-transform: uppercase;
+}
+
+#drawToolShapes_filtering_filters {
+ border-left: 1px solid var(--color-a2);
+ background: var(--color-a1-5);
+ overflow: auto;
+ flex: 1;
+}
+#drawToolShapes_filtering_filters_list {
+ border-right: 1px solid var(--color-a2);
+}
+.drawToolShapes_filtering_filters_clear {
+ width: 30px;
+ background: var(--color-a1-5);
+ padding: 0px 6px;
+ color: #888;
+}
+.drawToolShapes_filtering_filters_clear:hover {
+ background: var(--color-a1);
+ color: #fff;
+}
+
+#drawToolShapes_filtering_footer {
+ display: flex;
+ justify-content: space-between;
+ height: 30px;
+ line-height: 30px;
+}
+#drawToolShapes_filtering_adds {
+ display: flex;
+ justify-content: space-between;
+}
+#drawToolShapes_filtering_adds > div > div {
+ padding-left: 2px;
+}
+
+.drawToolShapes_filtering_value {
+ display: flex;
+ height: 33px;
+ border-bottom: 1px solid var(--color-a2);
+}
+.drawToolShapes_filtering_value .drawToolShapes_filtering_value_key {
+ flex: 1;
+}
+.drawToolShapes_filtering_value_operator {
+ box-sizing: border-box;
+ border-left: 1px solid var(--color-a2);
+ border-right: 1px solid var(--color-a2);
+}
+.drawToolShapes_filtering_value .drawToolShapes_filtering_value_value {
+ flex: 1;
+ position: relative;
+}
+
+.drawToolShapes_filtering_value_value_type {
+ position: absolute;
+ right: 0;
+ top: 0;
+ pointer-events: none;
+ height: 30px;
+ line-height: 30px;
+ width: 30px;
+ text-align: center;
+ color: #999;
+ opacity: 0;
+ transition: opacity 0.2s ease-out;
+}
+.drawToolShapes_filtering_value_value_type > i:first-child {
+ color: var(--color-yellow);
+}
+.drawToolShapes_filtering_value_value_type > i:last-child {
+ color: var(--color-green);
+}
+
+.drawToolShapes_filtering_value_value_input:hover
+ + .drawToolShapes_filtering_value_value_type {
+ opacity: 1;
+}
+
+#drawToolShapes_filtering input {
+ background: var(--color-a1-5);
+ color: #ccc;
+ width: 100%;
+ box-sizing: border-box;
+ border-left: 6px solid var(--color-a);
+ height: 30px;
+ padding-left: 8px;
+ border: none;
+ font-size: 14px;
+ transition: background 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
+}
+#drawToolShapes_filtering input:hover {
+ background: var(--color-a1);
+}
+.drawToolShapes_filtering_value_value_input {
+ border-right: 1px solid var(--color-a2) !important;
+}
+#drawToolShapes_filtering select {
+ background: #111;
+ color: #ccc;
+ height: 30px;
+}
+.drawToolShapes_filtering_value_operator_select {
+ background: var(--color-a1);
+ color: var(--color-f);
+ border: none;
+ cursor: pointer;
+ height: 30px;
+ transition: background 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
+}
+.drawToolShapes_filtering_value_operator_select:hover {
+ background: var(--color-a2);
+}
+
+.drawToolShapes_filtering_value_remove .mmgisButton5 {
+ width: 22px;
+}
+#drawToolShapes_filtering_clear {
+ padding: 0px 8px;
+ font-size: 13px;
+}
+#drawToolShapes_filtering_clear:hover {
+ background: var(--color-red2);
+}
+#drawToolShapes_filtering_submit {
+ padding: 0px 8px;
+ font-size: 13px;
+ transition: background 0.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
+}
+#drawToolShapes_filtering_submit.active {
+ background: var(--color-h);
+ color: black;
+}
+#drawToolShapes_filtering_submit.active:hover {
+ background: #fffb80;
+}
+
+#drawToolShapes_filtering .dropy,
+#drawToolShapes_filtering .dropy__title {
+ height: 30px;
+ border: none;
+}
+#drawToolShapes_filtering .dropy__title span {
+ padding: 6px;
+}
+#drawToolShapes_filtering .dropy .dropy__content li a {
+ padding: 6px;
+ border-top: 1px solid var(--color-m);
+ margin-bottom: 0px;
+ height: 30px;
+}
+#drawToolShapes_filtering .dropy__content .dropy__header {
+ display: none;
+}
+#drawToolShapes_filtering .dropy__content ul {
+ transition: none;
+}
+
+#drawToolShapes_filtering_submit_loading {
+ display: none;
+ padding: 6px 6px 6px 0px;
+}
+#drawToolShapes_filtering_submit_loading.active {
+ display: block;
+}
+#drawToolShapes_filtering_submit_loading.active > div {
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ border: 3px solid black;
+ border-top: 3px solid transparent;
+ animation: submitLoadingSpin 1s ease-in-out infinite;
+}
+@keyframes submitLoadingSpin {
+ to {
+ transform: rotate(360deg);
+ }
+}
diff --git a/src/essence/Tools/Draw/DrawTool_Shapes.js b/src/essence/Tools/Draw/DrawTool_Shapes.js
index 9bb8f27a..b213b33b 100644
--- a/src/essence/Tools/Draw/DrawTool_Shapes.js
+++ b/src/essence/Tools/Draw/DrawTool_Shapes.js
@@ -4,6 +4,10 @@ import F_ from '../../Basics/Formulae_/Formulae_'
import L_ from '../../Basics/Layers_/Layers_'
import Map_ from '../../Basics/Map_/Map_'
import CursorInfo from '../../Ancillary/CursorInfo'
+import LocalFilterer from '../../Ancillary/LocalFilterer'
+import Dropy from '../../../external/Dropy/dropy'
+
+import './DrawTool_Shapes.css'
var DrawTool = null
var Shapes = {
@@ -11,6 +15,7 @@ var Shapes = {
DrawTool = tool
DrawTool.populateShapes = Shapes.populateShapes
DrawTool.updateCopyTo = Shapes.updateCopyTo
+ DrawTool.setSubmitButtonState = Shapes.setSubmitButtonState
},
populateShapes: function (fileId, selectedFeatureIds) {
//If we get an array of fileIds, split them
@@ -20,7 +25,7 @@ var Shapes = {
DrawTool.populateShapes(fileId[i], selectedFeatureIds)
}
return
- */
+ */
fileId = 'master'
}
@@ -33,12 +38,14 @@ var Shapes = {
)
//Populate shapes
+ const fileIds = []
$('#drawToolShapesFeaturesList *').remove()
for (var l in L_.layers.layer) {
var s = l.split('_')
var onId = s[1] != 'master' ? parseInt(s[1]) : s[1]
if (s[0] == 'DrawTool' && DrawTool.filesOn.indexOf(onId) != -1) {
var file = DrawTool.getFileObjectWithId(s[1])
+ fileIds.push(onId)
if (L_.layers.layer[l].length > 0)
d3.select('#drawToolShapesFeaturesList')
.append('li')
@@ -62,7 +69,45 @@ var Shapes = {
}
}
}
+ Shapes.filters = Shapes.filters || {
+ values: [],
+ geojson: null,
+ }
+ try {
+ const mergedGeoJSON = F_.getBaseGeoJSON()
+ fileIds.forEach((fileId) => {
+ mergedGeoJSON.features = mergedGeoJSON.features.concat(
+ DrawTool.fileGeoJSONFeatures[fileId]
+ )
+ })
+ Shapes.filters.geojson = mergedGeoJSON
+ } catch (err) {
+ console.log(err)
+ console.warn(
+ `Shapes Filtering - Cannot find GeoJSON to filter on for file ids: ${fileIds}`
+ )
+ return
+ }
+ Shapes.filters.aggs = LocalFilterer.getAggregations(
+ Shapes.filters.geojson
+ )
+ Shapes.attachEvents(fileIds)
+ // Start with one empty row added
+ if (
+ $(
+ '#drawToolShapes_filtering_filters_list .drawToolShapes_filtering_value'
+ ).length === 0
+ )
+ Shapes.addValue()
+ $('#drawToolShapesFilterAdvanced').off('click')
+ $('#drawToolShapesFilterAdvanced').on('click', function () {
+ $('#drawToolShapesFilterAdvanced').toggleClass('on')
+ $('#drawToolShapesFilterAdvancedDiv').toggleClass('on')
+ if (!$('#drawToolShapesFilterAdvanced').hasClass('on')) {
+ $(`#drawToolShapes_filtering_clear`).click()
+ }
+ })
$('#drawToolShapesFilterClear').off('click')
$('#drawToolShapesFilterClear').on('click', function () {
$('#drawToolShapesFilter').val('')
@@ -747,6 +792,350 @@ var Shapes = {
}
}
},
+ //Shapes
+ addValue: function (value) {
+ let id, key, op, val
+ if (value) {
+ id = value.id
+ key = value.key != null ? ` value='${value.key}'` : ''
+ op = value.op
+ val = value.value != null ? ` value='${value.value}'` : ''
+ } else id = Shapes.filters.values.length
+
+ // prettier-ignore
+ const valueMarkup = [
+ `
",
+ ].join('\n')
+
+ $('#drawToolShapes_filtering_filters_list').append(valueMarkup)
+
+ if (value == null) {
+ Shapes.filters.values.push({
+ id: id,
+ type: null,
+ key: null,
+ op: '=',
+ value: null,
+ })
+ }
+
+ Shapes.attachValueEvents(id, { op: op })
+
+ // Show footer iff value rows exist
+ $('#drawToolShapes_filtering_footer').css(
+ 'display',
+ Shapes.filters.values.length === 0 ? 'none' : 'flex'
+ )
+ },
+ // To highlight the submit button to indicate a change's been made in the form
+ setSubmitButtonState: function (active) {
+ if (active) {
+ $('#drawToolShapes_filtering_submit_text').text('Submit')
+ $('#drawToolShapes_filtering_submit').addClass('active')
+ } else if ($('#drawToolShapes_filtering_submit').hasClass('active')) {
+ $('#drawToolShapes_filtering_submit_text').text('Submitted')
+ $('#drawToolShapes_filtering_submit').removeClass('active')
+ }
+ },
+ attachEvents: function (fileIds) {
+ // Add Value
+ $('#drawToolShapes_filtering_add_value').off('click')
+ $('#drawToolShapes_filtering_add_value').on('click', function () {
+ Shapes.addValue()
+ })
+
+ // Submit
+ $(`#drawToolShapes_filtering_submit`).off('click')
+ $(`#drawToolShapes_filtering_submit`).on('click', async () => {
+ Shapes.setSubmitButtonState(true)
+ $(`#drawToolShapes_filtering_submit_loading`).addClass('active')
+ $(`.drawToolContextMenuHeaderClose`).click()
+
+ fileIds.forEach((fileId) => {
+ // Refilter to show all
+ const filter = {
+ values: JSON.parse(JSON.stringify(Shapes.filters.values)),
+ geojson: {
+ type: 'FeatureCollection',
+ features: DrawTool.fileGeoJSONFeatures[fileId],
+ },
+ aggs: JSON.parse(JSON.stringify(Shapes.filters.aggs)),
+ }
+ LocalFilterer.filter(
+ `DrawTool_${fileId}`,
+ filter,
+ (filteredGeoJSON) => {
+ DrawTool.refreshFile(
+ fileId,
+ null,
+ true,
+ null,
+ null,
+ null,
+ filteredGeoJSON,
+ true
+ )
+ }
+ )
+ })
+ $(`#drawToolShapes_filtering_submit_loading`).removeClass('active')
+ Shapes.setSubmitButtonState(false)
+ })
+
+ // Clear
+ $(`#drawToolShapes_filtering_clear`).off('click')
+ $(`#drawToolShapes_filtering_clear`).on('click', async () => {
+ $(`#drawToolShapes_filtering_submit_loading`).addClass('active')
+ Shapes.setSubmitButtonState(true)
+
+ // Clear value filter elements
+ Shapes.filters.values = Shapes.filters.values.filter((v) => {
+ if (v) $(`#drawToolShapes_filtering_value_${v.id}`).remove()
+ return false
+ })
+
+ $(`.drawToolContextMenuHeaderClose`).click()
+ fileIds.forEach((fileId) => {
+ // Refilter to show all
+ const filter = {
+ values: JSON.parse(JSON.stringify(Shapes.filters.values)),
+ geojson: {
+ type: 'FeatureCollection',
+ features: DrawTool.fileGeoJSONFeatures[fileId],
+ },
+ aggs: JSON.parse(JSON.stringify(Shapes.filters.aggs)),
+ }
+ LocalFilterer.filter(
+ `DrawTool_${fileId}`,
+ filter,
+ (filteredGeoJSON) => {
+ DrawTool.refreshFile(
+ fileId,
+ null,
+ true,
+ null,
+ null,
+ null,
+ filteredGeoJSON,
+ true
+ )
+ }
+ )
+ })
+ // Reset count
+ $('#drawToolShapes_filtering_count').text('')
+
+ Shapes.setSubmitButtonState(false)
+
+ $(`#drawToolShapes_filtering_submit_loading`).removeClass('active')
+ })
+ },
+ attachValueEvents: function (id, options) {
+ options = options || {}
+
+ let elmId
+
+ // Expand input boxes on focus
+ // Contract input boxes on blur
+ elmId = `#drawToolShapes_filtering_value_key_input_${id}`
+ $(elmId).on('focus', function () {
+ $(this).parent().css('flex', '4 1')
+ })
+ $(elmId).on('blur', function () {
+ $(this).parent().css('flex', '1 1')
+ })
+ elmId = `#drawToolShapes_filtering_value_value_input_${id}`
+ $(elmId).on('focus', function () {
+ $(this).parent().css('flex', '4 1')
+ })
+ $(elmId).on('blur', function () {
+ $(this).parent().css('flex', '1 1')
+ })
+ // Clear
+ elmId = `#drawToolShapes_filtering_value_clear_${id}`
+
+ $(elmId).on('click', () => {
+ // Clear value filter element
+ for (let i = 0; i < Shapes.filters.values.length; i++) {
+ const vId = Shapes.filters.values[i]?.id
+ if (vId != null && vId === id) {
+ $(`#drawToolShapes_filtering_value_${vId}`).remove()
+ Shapes.filters.values[i] = null
+ }
+ }
+ Shapes.setSubmitButtonState(true)
+ })
+
+ // Property Autocomplete
+ elmId = `#drawToolShapes_filtering_value_key_input_${id}`
+
+ let arrayToSearch = Object.keys(Shapes.filters.aggs)
+ arrayToSearch = arrayToSearch.sort((a, b) => b.localeCompare(a))
+
+ $(elmId).autocomplete({
+ lookup: arrayToSearch,
+ lookupLimit: 100,
+ minChars: 0,
+ transformResult: function (response, originalQuery) {
+ let resultSuggestions = []
+ $.map(response, function (jsonItem) {
+ if (typeof jsonItem != 'string') {
+ $.map(jsonItem, function (suggestionItem) {
+ resultSuggestions.push(suggestionItem)
+ })
+ }
+ })
+ resultSuggestions.sort(function (a, b) {
+ const aStart = String(a.value).match(
+ new RegExp(originalQuery, 'i')
+ ) || { index: -1 },
+ bStart = String(b.value).match(
+ new RegExp(originalQuery, 'i')
+ ) || { index: -1 }
+ if (aStart.index != bStart.index)
+ return aStart.index - bStart.index
+ else return a > b ? 1 : -1
+ })
+ response.suggestions = resultSuggestions
+ return response
+ },
+ onSelect: function (event) {
+ const property = Shapes.filters.aggs[event.value]
+ Shapes.filters.values[id].type = property.type
+ Shapes.filters.values[id].key = event.value
+ Shapes.updateValuesAutoComplete(id)
+ Shapes.setSubmitButtonState(true)
+ $(this).css('border', 'none')
+ },
+ })
+
+ $(elmId).on('blur', function (event) {
+ const property = Shapes.filters.aggs[event.value || $(this).val()]
+ if (property) {
+ if (
+ Shapes.filters.values[id] &&
+ Shapes.filters.values[id].key !== event.value
+ ) {
+ Shapes.filters.values[id].key = event.value
+ Shapes.filters.values[id].type = property.type
+ Shapes.updateValuesAutoComplete(id)
+ Shapes.setSubmitButtonState(true)
+ }
+ $(this).css('border', 'none')
+ } else $(this).css('border', '1px solid red')
+ })
+
+ // Operator Dropdown
+ elmId = `#drawToolShapes_filtering_value_operator_${id}`
+
+ const ops = ['=', ',', '<', '>']
+ const opId = Math.max(ops.indexOf(options.op), 0)
+ $(elmId).html(
+ Dropy.construct(
+ [
+ `
`,
+ `
in
`,
+ `
`,
+ `
`,
+ ],
+ 'op',
+ opId,
+ { openHorizontal: true, fixedItemWidth: 30, hideChevron: true }
+ )
+ )
+ Dropy.init($(elmId), function (idx) {
+ Shapes.filters.values[id].op = ops[idx]
+ Shapes.setSubmitButtonState(true)
+ })
+
+ // Value AutoComplete
+ Shapes.updateValuesAutoComplete(id)
+ },
+ updateValuesAutoComplete: function (id) {
+ let elmId = `#drawToolShapes_filtering_value_value_input_${id}`
+ let arrayToSearch = []
+ if (
+ Shapes.filters.values[id].key &&
+ Shapes.filters.aggs[Shapes.filters.values[id].key]
+ )
+ arrayToSearch = Object.keys(
+ Shapes.filters.aggs[Shapes.filters.values[id].key].aggs || {}
+ )
+ $(elmId).autocomplete({
+ lookup: arrayToSearch,
+ lookupLimit: 150,
+ minChars: 0,
+ transformResult: function (response, originalQuery) {
+ let resultSuggestions = []
+ $.map(response, function (jsonItem) {
+ if (typeof jsonItem != 'string') {
+ $.map(jsonItem, function (suggestionItem) {
+ resultSuggestions.push(suggestionItem)
+ })
+ }
+ })
+ resultSuggestions.sort(function (a, b) {
+ const aStart = String(a.value).match(
+ new RegExp(originalQuery, 'i')
+ ) || { index: -1 },
+ bStart = String(b.value).match(
+ new RegExp(originalQuery, 'i')
+ ) || { index: -1 }
+ if (aStart.index != bStart.index)
+ return aStart.index - bStart.index
+ else return a > b ? 1 : -1
+ })
+ response.suggestions = resultSuggestions
+ return response
+ },
+ onSelect: function (event) {
+ Shapes.filters.values[id].value = event.value
+ Shapes.setSubmitButtonState(true)
+ },
+ })
+ $(elmId).on('keyup', function (e) {
+ Shapes.filters.values[id].value = $(this).val()
+ Shapes.setSubmitButtonState(true)
+ })
+
+ $('.autocomplete-suggestions').css({
+ 'max-height': '300px',
+ 'border-top': 'none',
+ })
+
+ // Change type indicator icons too
+ const numberElmId = `#drawToolShapes_filtering_value_value_type_number_${id}`
+ const stringElmId = `#drawToolShapes_filtering_value_value_type_string_${id}`
+ switch (Shapes.filters.values[id].type) {
+ case 'number':
+ $(numberElmId).css('display', 'inherit')
+ $(stringElmId).css('display', 'none')
+ break
+ case 'string':
+ $(stringElmId).css('display', 'inherit')
+ $(numberElmId).css('display', 'none')
+ break
+ default:
+ $(numberElmId).css('display', 'none')
+ $(stringElmId).css('display', 'none')
+ break
+ }
+ },
}
export default Shapes
diff --git a/src/essence/Tools/Layers/Filtering/Filtering.js b/src/essence/Tools/Layers/Filtering/Filtering.js
index d9e2b705..2d0867cb 100644
--- a/src/essence/Tools/Layers/Filtering/Filtering.js
+++ b/src/essence/Tools/Layers/Filtering/Filtering.js
@@ -5,7 +5,7 @@ import F_ from '../../../Basics/Formulae_/Formulae_'
import L_ from '../../../Basics/Layers_/Layers_'
import Map_ from '../../../Basics/Map_/Map_'
-import LocalFilterer from './LocalFilterer'
+import LocalFilterer from '../../../Ancillary/LocalFilterer'
import ESFilterer from './ESFilterer'
import Help from '../../../Ancillary/Help'
diff --git a/src/external/Dropy/dropy.css b/src/external/Dropy/dropy.css
index a7fb2435..1757ca93 100644
--- a/src/external/Dropy/dropy.css
+++ b/src/external/Dropy/dropy.css
@@ -171,3 +171,6 @@ dd {
.dropy.openUp .dropy__content > ul {
transform: translateY(-100%);
}
+.dropy.openHorizontal .dropy__content > ul {
+ display: flex;
+}
\ No newline at end of file
diff --git a/src/external/Dropy/dropy.js b/src/external/Dropy/dropy.js
index d6cc3b0c..36e9e1b7 100644
--- a/src/external/Dropy/dropy.js
+++ b/src/external/Dropy/dropy.js
@@ -16,15 +16,15 @@ export default {
options = options || {}
// prettier-ignore
return [
- `
`,
+ ``,
`- `,
`${options.forcePlaceholder ? placeholder : items[selectedIndex] != null ? items[selectedIndex] : placeholder}`,
`${options.hideChevron === true ? '' : ``}`,
`
`,
'- ',
- '
',
+ ``,
placeholder ? `` : '',
- items.map((item, i) => `- ${item}
`).join('\n'),
+ items.map((item, i) => `${item}`).join('\n'),
'
',
' ',
'',