@vcmap/ui 6.3.4 → 6.3.5

package/dist/assets/ui.js

@@ -1 +1 @@
-export * from "./ui-aafcea7d.js";
+export * from "./ui-d660ba07.js";

package/dist/assets/vue.js

@@ -1 +1 @@
-export * from "./vue-5cd50c79.js";
+export * from "./vue-d940072f.js";

package/dist/assets/{vuetify-a5225009.js → vuetify-bc604361.js}

@@ -10,7 +10,7 @@ function loadCss(href) {
     elem.onerror = reject;
     document.head.appendChild(elem);
   });
-} await loadCss('./assets/vuetify-a5225009.css');import { watch as Q, onScopeDispose as Ze, effectScope as Zl, shallowRef as K, reactive as it, computed as b, watchEffect as Fe, toRefs as Yt, capitalize as Nn, unref as ot, Fragment as ie, isVNode as Rc, Comment as Nc, warn as ja, getCurrentInstance as Hc, ref as j, provide as De, inject as ye, defineComponent as zc, h as Gt, camelize as Ir, toRaw as Be, createVNode as r, mergeProps as O, onBeforeUnmount as Qe, readonly as Ql, onMounted as Ye, onDeactivated as _r, onActivated as Wc, nextTick as we, TransitionGroup as Jl, Transition as jt, isRef as Tn, toRef as $, onBeforeMount as ra, withDirectives as $e, resolveDirective as gt, vShow as Ct, onUpdated as jc, Text as Uc, resolveDynamicComponent as Yc, markRaw as Gc, Teleport as Kc, cloneVNode as qc, createTextVNode as Tt, onUnmounted as Tr, onBeforeUpdate as Xc, withModifiers as Tl, toDisplayString as Zc, vModelText as Qc, resolveComponent as Jc, render as Ar } from "./vue-5cd50c79.js";
+} await loadCss('./assets/vuetify-bc604361.css');import { watch as Q, onScopeDispose as Ze, effectScope as Zl, shallowRef as K, reactive as it, computed as b, watchEffect as Fe, toRefs as Yt, capitalize as Nn, unref as ot, Fragment as ie, isVNode as Rc, Comment as Nc, warn as ja, getCurrentInstance as Hc, ref as j, provide as De, inject as ye, defineComponent as zc, h as Gt, camelize as Ir, toRaw as Be, createVNode as r, mergeProps as O, onBeforeUnmount as Qe, readonly as Ql, onMounted as Ye, onDeactivated as _r, onActivated as Wc, nextTick as we, TransitionGroup as Jl, Transition as jt, isRef as Tn, toRef as $, onBeforeMount as ra, withDirectives as $e, resolveDirective as gt, vShow as Ct, onUpdated as jc, Text as Uc, resolveDynamicComponent as Yc, markRaw as Gc, Teleport as Kc, cloneVNode as qc, createTextVNode as Tt, onUnmounted as Tr, onBeforeUpdate as Xc, withModifiers as Tl, toDisplayString as Zc, vModelText as Qc, resolveComponent as Jc, render as Ar } from "./vue-d940072f.js";
 function rt(e, n) {
   let t;
   function a() {

package/dist/assets/vuetify.js

@@ -1 +1 @@
-export * from "./vuetify-a5225009.js";
+export * from "./vuetify-bc604361.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vcmap/ui",
-  "version": "6.3.4",
+  "version": "6.3.5",
   "author": "Virtual City Systems",
   "license": "MIT",
   "scripts": {
@@ -20,10 +20,7 @@
     "format": "prettier --write --list-different . && npm run lint:js -- --fix",
     "prepack": "node build/build.js && node build/buildTypes.js",
     "postinstall": "node build/postInstall.js",
-    "install-plugins": "cd plugins && npm i --omit peer --no-package-lock --force",
-    "story:dev": "histoire dev",
-    "story:build": "histoire build",
-    "story:preview": "histoire preview"
+    "install-plugins": "cd plugins && npm i --omit peer --no-package-lock --force"
   },
   "repository": {
     "type": "git",
@@ -58,7 +55,7 @@
   },
   "peerDependencies": {
     "@vcmap-cesium/engine": "^11.0.5",
-    "@vcmap/core": "^6.3.3",
+    "@vcmap/core": "^6.3.4",
     "ol": "^10.4.0",
     "vue": "~3.4.38",
     "vuetify": "~3.7.14"
@@ -68,13 +65,11 @@
     "@zip.js/zip.js": "2.7.68"
   },
   "devDependencies": {
-    "@histoire/plugin-vue": "^0.17.17",
     "@vcmap/rollup-plugin-vcs-ol": "^1.0.5",
     "@vcsuite/eslint-config": "^4.0.0",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "@vitest/coverage-v8": "^2.1.3",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitest/coverage-v8": "^4.1.4",
     "@vue/test-utils": "^2.4.6",
-    "histoire": "^0.17.17",
     "jest-canvas-mock": "^2.5.2",
     "jsdoc": "^4.0.3",
     "jsdoc-plugin-intersection": "^1.0.4",
@@ -86,9 +81,9 @@
     "sass": "^1.80.2",
     "tar": "^7.4.3",
     "typescript": "^5.4.5",
-    "vite": "^5.4.9",
-    "vite-plugin-vuetify": "^2.0.4",
-    "vitest": "^2.1.3",
+    "vite": "^6.4.2",
+    "vite-plugin-vuetify": "~2.0.4",
+    "vitest": "^4.1.4",
     "vue-tsc": "^2.1.6"
   },
   "stylelint": {

package/plugins/package.json

@@ -36,7 +36,7 @@
     "@vcmap/layer-settings": "^1.0.1"
   },
   "optionalDependencies": {
-    "@vcmap/guided-tour": "^1.0.5",
+    "@vcmap/guided-tour": "^1.0.6",
     "@vcmap/planning": "^7.0.0"
   }
 }

package/src/legend/StyleLegendItem.vue

@@ -55,19 +55,51 @@
                 :stroke-miterlimit="row.stroke?.miterLimit"
                 :stroke-width="row.stroke?.width"
               />
-              <rect
-                v-else-if="row.type === StyleRowType.Fill"
-                width="32"
-                height="24"
-                :stroke="getColor(row.stroke?.color)"
-                :stroke-linecap="row.stroke?.lineCap"
-                :stroke-linejoin="row.stroke?.lineJoin"
-                :stroke-dasharray="row.stroke?.lineDash"
-                :stroke-dashoffset="row.stroke?.lineDashOffset"
-                :stroke-miterlimit="row.stroke?.miterLimit"
-                :stroke-width="row.stroke?.width"
-                :fill="getColor(row.fill?.color) || 'rgba(255,255,255,0)'"
-              />
+              <template v-else-if="row.type === StyleRowType.Fill">
+                <defs v-if="row.fill?.pattern">
+                  <pattern
+                    :id="`legend-fill-pattern-${idx}`"
+                    x="0"
+                    y="0"
+                    :width="patterns[idx].size"
+                    :height="patterns[idx].size"
+                    patternUnits="userSpaceOnUse"
+                  >
+                    <rect
+                      :width="patterns[idx].size"
+                      :height="patterns[idx].size"
+                      :fill="patterns[idx].bgColor"
+                    />
+                    <line
+                      v-for="(line, lineIdx) in patterns[idx].lines"
+                      :key="lineIdx"
+                      :x1="line.x1"
+                      :y1="line.y1"
+                      :x2="line.x2"
+                      :y2="line.y2"
+                      :stroke="patterns[idx].lineColor"
+                      :stroke-width="patterns[idx].lineWidth"
+                      stroke-linecap="square"
+                    />
+                  </pattern>
+                </defs>
+                <rect
+                  width="32"
+                  height="24"
+                  :stroke="getColor(row.stroke?.color)"
+                  :stroke-linecap="row.stroke?.lineCap"
+                  :stroke-linejoin="row.stroke?.lineJoin"
+                  :stroke-dasharray="row.stroke?.lineDash"
+                  :stroke-dashoffset="row.stroke?.lineDashOffset"
+                  :stroke-miterlimit="row.stroke?.miterLimit"
+                  :stroke-width="row.stroke?.width"
+                  :fill="
+                    row.fill?.pattern
+                      ? `url(#legend-fill-pattern-${idx})`
+                      : getColor(row.fill?.color) || 'rgba(255,255,255,0)'
+                  "
+                />
+              </template>
               <circle
                 v-else-if="row.type === StyleRowType.Circle"
                 cx="16"
@@ -110,7 +142,11 @@
     VListItemTitle,
   } from 'vuetify/components';
   import { computed } from 'vue';
-  import { StyleRowType, getImageSrcFromShape } from './legendHelper.js';
+  import {
+    StyleRowType,
+    getImageSrcFromShape,
+    getPatternSvgData,
+  } from './legendHelper.js';
 
   /**
    * @description A component rendering vector styles as list using {@link https://vuetifyjs.com/en/api/v-list-row v-list-row}
@@ -150,6 +186,17 @@
         }
         return '';
       }
+
+      const patterns = computed(() => {
+        const cache = {};
+        props.item.rows.forEach((row, idx) => {
+          if (row.fill?.pattern) {
+            cache[idx] = getPatternSvgData(row.fill);
+          }
+        });
+        return cache;
+      });
+
       return {
         StyleRowType,
         getImageSrcFromShape,
@@ -160,6 +207,7 @@
           return null;
         },
         determineInnerPadding,
+        patterns,
         cols: computed(() => {
           return props.item.colNr === 1 ? 12 : 6;
         }),

package/src/legend/StyleLegendItem.vue.d.ts

@@ -15,6 +15,7 @@ declare const _default: import("vue").DefineComponent<{
     getImageSrcFromShape: typeof getImageSrcFromShape;
     getColor(color: any): string | null;
     determineInnerPadding: (index: number) => string;
+    patterns: import("vue").ComputedRef<{}>;
     cols: import("vue").ComputedRef<6 | 12>;
 }, any, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     item: {

package/src/legend/legendHelper.d.ts

@@ -29,7 +29,7 @@
  */
 /**
  * @typedef {StyleLegendRow & {
- *   fill: import("ol/style/Fill.js").Options,
+ *   fill: import("ol/style/Fill.js").Options | import("@vcmap/core").VectorStyleItemFill,
  *   stroke?: import("ol/style/Stroke.js").Options
  * }} FillLegendRow
  */
@@ -50,6 +50,18 @@
  * @property {import("ol/style/Text.js").Options} text
  * @property {string} [label='Text']
  */
+/**
+ * @typedef {{ x1: number, y1: number, x2: number, y2: number }} PatternLine
+ */
+/**
+ * @typedef {{ size: number, bgColor: string, lineColor: string, lineWidth: number, lines: PatternLine[] }} PatternSvgData
+ */
+/**
+ * Computes the SVG data needed to render an inline pattern for a legend row.
+ * @param {import("@vcmap/core").VectorStyleItemFill} fill
+ * @returns {PatternSvgData}
+ */
+export function getPatternSvgData(fill: import("@vcmap/core").VectorStyleItemFill): PatternSvgData;
 /**
  * @param {import("ol/style/Image.js").Options} image
  * @returns {string}
@@ -141,7 +153,7 @@ export type StrokeLegendRow = StyleLegendRow & {
     stroke: import("ol/style/Stroke.js").Options;
 };
 export type FillLegendRow = StyleLegendRow & {
-    fill: import("ol/style/Fill.js").Options;
+    fill: import("ol/style/Fill.js").Options | import("@vcmap/core").VectorStyleItemFill;
     stroke?: import("ol/style/Stroke.js").Options;
 };
 export type CircleLegendRow = StyleLegendRow & {
@@ -157,6 +169,19 @@ export type TextLegendRow = StyleLegendRow & {
     text: import("ol/style/Text.js").Options;
     label?: string;
 };
+export type PatternLine = {
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+};
+export type PatternSvgData = {
+    size: number;
+    bgColor: string;
+    lineColor: string;
+    lineWidth: number;
+    lines: PatternLine[];
+};
 export type LegendEntry = {
     key: string;
     /**

package/src/legend/legendHelper.js

@@ -1,4 +1,9 @@
-import { getShapeFromOptions } from '@vcmap/core';
+import {
+  getShapeFromOptions,
+  PatternType,
+  parseColor,
+  getStringColor,
+} from '@vcmap/core';
 import { reactive } from 'vue';
 
 /**
@@ -68,7 +73,7 @@ export const StyleRowType = {
 
 /**
  * @typedef {StyleLegendRow & {
- *   fill: import("ol/style/Fill.js").Options,
+ *   fill: import("ol/style/Fill.js").Options | import("@vcmap/core").VectorStyleItemFill,
  *   stroke?: import("ol/style/Stroke.js").Options
  * }} FillLegendRow
  */
@@ -94,6 +99,64 @@ export const StyleRowType = {
  * @property {string} [label='Text']
  */
 
+/**
+ * @typedef {{ x1: number, y1: number, x2: number, y2: number }} PatternLine
+ */
+
+/**
+ * @typedef {{ size: number, bgColor: string, lineColor: string, lineWidth: number, lines: PatternLine[] }} PatternSvgData
+ */
+
+/**
+ * Computes the SVG data needed to render an inline pattern for a legend row.
+ * @param {import("@vcmap/core").VectorStyleItemFill} fill
+ * @returns {PatternSvgData}
+ */
+export function getPatternSvgData(fill) {
+  const size = fill.pattern.size || 10;
+  const bgColor = getStringColor(parseColor(fill.color));
+  const lineColor = getStringColor(fill.pattern.color);
+  const lineWidth = fill.pattern.width;
+
+  /** @type {PatternLine[]} */
+  const lines = [];
+
+  function addLine(x1, y1, x2, y2) {
+    lines.push({ x1, y1, x2, y2 });
+  }
+
+  switch (fill.pattern.type) {
+    case PatternType.NWSE:
+      addLine(size / 2, size, size, size / 2);
+      addLine(0, size / 2, size / 2, 0);
+      break;
+    case PatternType.SWNE:
+      addLine(size / 2, size, 0, size / 2);
+      addLine(size, size / 2, size / 2, 0);
+      break;
+    case PatternType.DIAGONALCROSS:
+      addLine(size / 2, size, size, size / 2);
+      addLine(0, size / 2, size / 2, 0);
+      addLine(size / 2, size, 0, size / 2);
+      addLine(size, size / 2, size / 2, 0);
+      break;
+    case PatternType.NS:
+      addLine(size / 2, 0, size / 2, size);
+      break;
+    case PatternType.WE:
+      addLine(0, size / 2, size, size / 2);
+      break;
+    case PatternType.CROSS:
+      addLine(size / 2, 0, size / 2, size);
+      addLine(0, size / 2, size, size / 2);
+      break;
+    default:
+      break;
+  }
+
+  return { size, bgColor, lineColor, lineWidth, lines };
+}
+
 /**
  * @param {import("ol/style/Image.js").Options} image
  * @returns {string}