ol-wfst 4.3.0 → 5.0.0

package/lib/style/scss/ol-wfst.scss

@@ -2,6 +2,17 @@
 @import 'variables';
 @import '~bootstrap/scss/mixins';
 
+:root {
+    --ol-subtle-background-color: transparent;
+}
+
+.ol-zoom {
+    top: inherit;
+    left: inherit;
+    bottom: 5em;
+    right: 0.5em;
+}
+
 .ol-wfst--input-field-container {
     display: inline-block;
     width: 49%;
@@ -16,6 +27,22 @@
 .ol-wfst--input-field-input {
     width: 100%;
     padding: 5px;
+    border: 1px solid black;
+    border-radius: 3px;
+}
+.ol-wfst--input-field-input.ol-wfst--input-multiple::placeholder {
+    font-style: italic;
+    color: #888;
+}
+.ol-wfst--edit-modal-notice {
+    padding: 10px 12px;
+    margin-bottom: 12px;
+    border: 1px solid #ffc107;
+    border-radius: $borderRadius;
+    background: #fff8e1;
+    color: #6b5300;
+    font-size: 13px;
+    font-weight: 500;
 }
 .ol-wfst--edit-button-cnt {
     display: inline-block;
@@ -41,53 +68,219 @@
         transform: translateY(1px);
     }
 
-    img {
+    svg {
         fill: #333;
         width: 20px;
         height: 20px;
     }
 }
 
+.ol-wfst--extend-button-cnt {
+    display: inline-block;
+}
+
+.ol-wfst--extend-button {
+    outline: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    width: 24px;
+    height: 24px;
+    background: $btnBack;
+    border: 1px solid #b3b3b3;
+    border-radius: 50%;
+    box-shadow: 0 2px 8px rgb(0 0 0 / 42%);
+    cursor: pointer;
+
+    &:hover {
+        background: $btnHover;
+    }
+    &:active {
+        background: $btnBackActive;
+        transform: translateY(1px);
+    }
+
+    svg {
+        fill: #333;
+        width: 16px;
+        height: 16px;
+    }
+}
+
 .ol-wfst--changes-control {
     position: absolute;
     left: 50%;
     top: 0;
-    right: 0;
     transform: translateX(-50%);
-    max-width: 290px;
+    z-index: 10;
+    max-width: 320px;
     width: 90%;
     background: $changesBackground;
-    border: 1px solid #969696;
+    color: $changesText;
+    border: 1px solid rgb(0 0 0 / 18%);
     border-top: 0;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.529);
+    box-shadow:
+        0 2px 6px rgb(0 0 0 / 20%),
+        0 8px 24px rgb(0 0 0 / 35%);
     border-radius: 0 0 $borderRadius $borderRadius;
-    padding: 10px;
+    padding: 12px 14px 14px;
+    animation: ol-wfst--slide-down 0.28s ease-out;
+}
+
+@keyframes ol-wfst--slide-down {
+    from {
+        opacity: 0;
+        transform: translate(-50%, -10px);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, 0);
+    }
 }
 
 .ol-wfst--changes-control-el {
-    text-align: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+
     button {
-        margin: 0 5px;
+        margin: 0;
+        transition:
+            transform 0.12s ease,
+            box-shadow 0.12s ease,
+            filter 0.12s ease;
+
+        &:hover {
+            box-shadow: 0 3px 8px rgb(0 0 0 / 25%);
+            filter: brightness(1.05);
+        }
+        &:active {
+            transform: translateY(-1px);
+            box-shadow: none;
+            filter: brightness(0.97);
+        }
+    }
+
+    .btn-danger-outline {
+        color: rgb(255 255 255 / 90%);
+        border: 1px solid rgb(255 255 255 / 55%);
+        background: transparent;
+
+        &:hover {
+            background: rgb(255 255 255 / 15%);
+            box-shadow: none;
+        }
+        &:active {
+            background: rgb(255 255 255 / 25%);
+        }
     }
 }
 
 .ol-wfst--changes-control-id {
-    margin-bottom: 10px;
+    flex-basis: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    margin-bottom: 8px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgb(255 255 255 / 25%);
     font-size: 12px;
-    color: #fff;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+    color: $changesText;
+
+    b {
+        display: inline-flex;
+        align-items: center;
+        gap: 6px;
+
+        &::before {
+            content: '';
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: currentColor;
+            animation: ol-wfst--pulse 1.6s infinite;
+        }
+    }
+
+    i {
+        font-style: normal;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+        font-size: 11px;
+        font-weight: 500;
+        text-transform: none;
+        letter-spacing: 0;
+        background: rgb(255 255 255 / 22%);
+        border-radius: 999px;
+        padding: 2px 10px;
+        max-width: 180px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+@keyframes ol-wfst--pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgb(255 255 255 / 70%);
+    }
+    70% {
+        box-shadow: 0 0 0 6px rgb(255 255 255 / 0%);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgb(255 255 255 / 0%);
+    }
 }
 .ol-wfst--tools-control {
     position: absolute;
-    left: 10px;
-    bottom: 10px;
-    background-color: #fff;
-    box-shadow: 0 1px 4px rgb(0 0 0 / 42%);
-    border: 1px solid #a9a9a9bb;
-    border-radius: $borderRadius;
+    top: 0.5em;
+    left: 0.5em;
+}
+.ol-control button {
+    cursor: pointer;
+}
+
+.ol-wfst--fullscreen {
+    top: auto;
+    left: auto;
+    right: 0.5em;
+    bottom: 18px;
+
+    button {
+        background: #fff;
+        border-radius: $borderRadius;
+        outline: 0;
+        width: 32px;
+        height: 32px;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+
+        svg {
+            width: 20px;
+            height: 20px;
+            pointer-events: none;
+        }
+
+        &:hover,
+        &:active {
+            opacity: 0.95;
+        }
+        &:active {
+            transform: translateY(1px);
+        }
+    }
 }
 
 .btn.btn-third {
-    float: left;
+    margin-right: auto;
     color: $btnDelete;
 }
 
@@ -98,11 +291,25 @@
 
 .wfst--layer-control {
     position: relative;
-    padding: 5px 10px;
+    min-width: 200px;
+    opacity: 0.7;
+    display: flex;
+
+    label {
+        width: 100%;
+        padding: 5px 10px;
+        display: flex;
+        gap: 6px;
+    }
+
+    &.ol-wfst--visible-on {
+        opacity: 1;
+    }
 
     &.ol-wfst--selected-on {
         background-color: $layerSelected !important;
     }
+
     &:hover,
     &:active {
         background-color: $layerHover;
@@ -114,18 +321,24 @@
 }
 
 .wfst--tools-control--select-layers {
+    .wfst--tools-control--select-layers-title {
+        padding: 5px 10px;
+        font-weight: bold;
+        border-bottom: 1px solid #a9a9a9bb;
+        background-color: #dddddd;
+    }
+
+    .wfst--tools-control--select-layers-list {
+        max-height: 150px;
+        overflow-y: auto;
+    }
+
     .wfst--layer-control:not(.ol-wfst--selected-on) label {
         cursor: pointer;
     }
-    label {
-        position: absolute;
-        left: 30px;
-        right: 0;
-    }
 }
 
 .ol-wfst--tools-control-btn {
-    background: #ffffff;
     border-radius: $borderRadius;
     outline: 0;
     width: 40px;
@@ -135,6 +348,7 @@
     vertical-align: middle;
     cursor: pointer;
     border: 1px solid #c0c0c0;
+    background-color: #fff;
 
     &.wfst--active {
         background-color: $btnActive !important;
@@ -149,25 +363,86 @@
         transform: translateY(1px);
     }
 
-    img {
+    svg {
         width: 20px;
         height: 20px;
     }
 }
 
 .wfst--tools-control--head {
+    position: absolute;
     background: #dddddd;
     padding: 10px;
-    border-bottom: 1px solid #a9a9a9bb;
-    border-radius: $borderRadius $borderRadius 0 0;
+    border: 1px solid #a9a9a9bb;
+    border-radius: $borderRadius;
+    box-shadow: 0 1px 4px rgb(0 0 0 / 42%);
+    display: flex;
+    pointer-events: auto;
+    gap: 6px;
+
+    label {
+        cursor: pointer;
+    }
 
     > * {
-        display: inline-block;
+        display: flex;
+    }
+}
+
+.ol-wfst--layers-control {
+    font-size: 13px;
+    position: absolute;
+    left: 10px;
+    bottom: 10px;
+    pointer-events: auto;
+
+    .wfst--tools-control--select-layers {
+        border-radius: $borderRadius;
+        border: 1px solid #a9a9a9bb;
+        box-shadow: 0 1px 4px rgb(0 0 0 / 42%);
+        background-color: #fff;
+        overflow: hidden;
+    }
+}
+
+.ol-wfst--tools-control-select-cnt {
+    font-size: 0;
+
+    &:not(:first-child) {
+        margin-left: 6px;
     }
 }
 
-.ol-wfst--tools-control-draw-cnt:not(:first-child) {
-    margin-left: 6px;
+.ol-wfst--tools-control-btn-select,
+.ol-wfst--tools-control-btn-select-box,
+.ol-wfst--tools-control-btn-select-freehand {
+    width: 34px;
+    padding: 0;
+    border-radius: 0;
+}
+
+.ol-wfst--tools-control-btn-select {
+    border-radius: $borderRadius 0 0 $borderRadius;
+
+    svg {
+        width: 11px;
+        height: auto;
+    }
+}
+
+.ol-wfst--tools-control-btn-select-box {
+    border-left: 0;
+}
+
+.ol-wfst--tools-control-btn-select-freehand {
+    border-left: 0;
+    border-radius: 0 $borderRadius $borderRadius 0;
+}
+
+.ol-box.ol-wfst--dragbox {
+    border: 2px dashed #ffc800;
+    background-color: rgba(255, 200, 0, 0.1);
+    border-radius: 0;
 }
 
 .ol-wfst--tools-control-btn-upload {
@@ -197,9 +472,6 @@
     opacity: 1;
     background: #fffab5;
 }
-.wfst--tools-control--head label {
-    cursor: pointer;
-}
 
 #ol-wfst--upload {
     display: none;
@@ -208,15 +480,42 @@
 .ol-wfst--tools-control--loading {
     display: none;
     position: absolute;
-    top: -25px;
+    top: -10px;
+    width: 100%;
+    height: 4px;
+    overflow: hidden;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 4px;
+    box-shadow: 0 0 4px rgb(0 0 0 / 15%);
+}
+.ol-wfst--tools-control--loading::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 35%;
+    height: 100%;
+    background: $primaryColor;
+    border-radius: inherit;
+    animation: ol-wfst-loading-sweep 1.1s ease-in-out infinite;
+}
+@keyframes ol-wfst-loading-sweep {
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(300%);
+    }
 }
 .ol-wfst--tools-control--loading.ol-wfst--tools-control--loading-show {
     display: block;
 }
 .ol-wfst--tools-control-visible {
     display: inline-block;
+    position: relative;
+    z-index: 999;
 }
-.ol-wfst--tools-control-visible img {
+.ol-wfst--tools-control-visible svg {
     width: 14px;
     height: 14px;
 }
@@ -227,13 +526,6 @@
 .ol-wfst--tools-control-visible-btn:hover {
     opacity: 0.9;
 }
-.wfst--layer-control {
-    opacity: 0.7;
-
-    &.ol-wfst--visible-on {
-        opacity: 1;
-    }
-}
 
 .ol-wfst--visible-btn-on {
     display: none;
@@ -251,3 +543,110 @@
 .ol-wfst--visible-btn-off {
     display: block;
 }
+
+.ol-wfst--tools-control-query-cnt {
+    .ol-wfst--tools-control-btn-query {
+        border-radius: $borderRadius;
+    }
+
+    svg {
+        width: 16px;
+        height: 16px;
+    }
+}
+
+.ol-wfst--query-popup {
+    position: relative;
+    width: 260px;
+    max-width: 280px;
+    background: $btnBack;
+    border: 1px solid #a9a9a9;
+    border-radius: $borderRadius;
+    box-shadow: 0 2px 8px rgb(0 0 0 / 42%);
+    font-size: 12px;
+    color: #333;
+    overflow: hidden;
+}
+
+.ol-wfst--query-popup-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 8px;
+    background: #f2f2f2;
+    border-bottom: 1px solid #d9d9d9;
+}
+
+.ol-wfst--query-popup-title {
+    font-weight: 600;
+    font-size: 12px;
+}
+
+.ol-wfst--query-popup-close {
+    outline: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    font-size: 18px;
+    line-height: 1;
+    color: #555;
+    padding: 0 2px;
+
+    &:hover {
+        color: #000;
+    }
+}
+
+.ol-wfst--query-popup-subtitle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 6px 10px;
+    border-bottom: 1px solid #efefef;
+
+    b {
+        font-weight: 600;
+    }
+
+    i {
+        font-style: normal;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+        font-size: 11px;
+        color: #777;
+        max-width: 150px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}
+
+.ol-wfst--query-popup-body {
+    max-height: 220px;
+    overflow-y: auto;
+    padding: 4px 0;
+}
+
+.ol-wfst--query-popup-row {
+    display: flex;
+    gap: 8px;
+    padding: 3px 10px;
+    word-break: break-word;
+
+    &:nth-child(odd) {
+        background: #fafafa;
+    }
+}
+
+.ol-wfst--query-popup-key {
+    flex: 0 0 35%;
+    font-weight: 600;
+    color: #555;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.ol-wfst--query-popup-value {
+    flex: 1;
+    color: #222;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol-wfst",
-  "version": "4.3.0",
+  "version": "5.0.0",
   "description": "Tiny WFS-T client to insert (drawing or uploading), modify and delete features on GeoServers using OpenLayers.",
   "main": "dist/ol-wfst.js",
   "module": "lib/ol-wfst.js",
@@ -42,7 +42,6 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.1",
-    "@rollup/plugin-image": "^3.0.2",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.4.0",
     "@rollup/plugin-typescript": "^11.1.4",
@@ -54,7 +53,7 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "modal-vanilla": "^0.12.0",
-    "ol": "^9.1.0",
+    "ol": "^10.10.0",
     "postcss-preset-env": "^9.1.4",
     "prettier": "^3.0.3",
     "rollup": "^3.20.2",
@@ -65,6 +64,7 @@
     "rollup-plugin-polyfill-node": "^0.12.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-serve": "^2.0.2",
+    "rollup-plugin-svg-import": "^3.0.0",
     "sass": "^1.49.7",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2"

package/dist/myPragma.d.ts

@@ -1,2 +0,0 @@
-export default function createElement(tagName: any, attrs?: {}, ...children: any[]): any;
-//# sourceMappingURL=myPragma.d.ts.map

package/dist/myPragma.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"myPragma.d.ts","sourceRoot":"","sources":["../src/myPragma.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,OAAO,KAAA,EAAE,KAAK,KAAK,EAAE,GAAG,QAAQ,OAAA,OAmCrE"}

package/lib/myPragma.d.ts

@@ -1,2 +0,0 @@
-export default function createElement(tagName: any, attrs?: {}, ...children: any[]): any;
-//# sourceMappingURL=myPragma.d.ts.map

package/lib/myPragma.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"myPragma.d.ts","sourceRoot":"","sources":["../src/myPragma.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,OAAO,KAAA,EAAE,KAAK,KAAK,EAAE,GAAG,QAAQ,OAAA,OAmCrE"}