@milaboratories/graph-maker 1.1.194 → 1.1.196

package/dist/components/AesSettings/AesDataMappingDiscrete.vue2.js

@@ -1,20 +1,20 @@
-import { defineComponent as H, ref as r, computed as c, watch as L, createElementBlock as b, openBlock as f, createElementVNode as m, createCommentVNode as x, createBlock as K, toDisplayString as W, createVNode as p, unref as _, withCtx as P } from "vue";
-import { scaleLinear as j } from "d3-scale";
-import { isCategorical as q, PALETTE_MAP as h, UNKNOWN_COLOR as R } from "../../constantsAesthetic.js";
-import { createCategoricalMappingFromPalette as z } from "../../dataBindAes.js";
-import G from "./FormWrapper.vue.js";
-import J from "./PalettesForm.vue.js";
-import Q from "../MultiselectButton.vue.js";
-import X from "../PlColorSlider.vue.js";
-import Y from "./DiscreteRow.vue.js";
-import { PlElementList as Z } from "@platforma-sdk/ui-vue";
-const ee = { class: "aes-mapping-block" }, le = { style: { margin: "0 24px" } }, te = { class: "section-title" }, ae = { style: { margin: "24px 0" } }, oe = {
+import { defineComponent as j, ref as c, computed as p, watch as x, createElementBlock as _, openBlock as w, createElementVNode as v, createCommentVNode as k, createBlock as q, toDisplayString as z, createVNode as g, unref as I, withCtx as $ } from "vue";
+import { scaleLinear as G } from "d3-scale";
+import { isCategorical as J, PALETTE_MAP as y, UNKNOWN_COLOR as B } from "../../constantsAesthetic.js";
+import { createCategoricalMappingFromPalette as Q } from "../../dataBindAes.js";
+import X from "./FormWrapper.vue.js";
+import Y from "./PalettesForm.vue.js";
+import Z from "../MultiselectButton.vue.js";
+import ee from "../PlColorSlider.vue.js";
+import le from "./DiscreteRow.vue.js";
+import { PlElementList as ae } from "@platforma-sdk/ui-vue";
+const oe = { class: "aes-mapping-block" }, te = { style: { margin: "0 24px" } }, ne = { class: "section-title" }, ie = { style: { margin: "24px 0" } }, ue = {
   key: 0,
   style: { margin: "24px 0" }
-}, ne = {
+}, se = {
   key: 0,
   class: "aes-settings-hint"
-}, ie = { class: "column-values-list" }, fe = /* @__PURE__ */ H({
+}, re = { class: "column-values-list" }, ye = /* @__PURE__ */ j({
   __name: "AesDataMappingDiscrete",
   props: {
     dataColumnLabel: {},
@@ -26,183 +26,180 @@ const ee = { class: "aes-mapping-block" }, le = { style: { margin: "0 24px" } },
     allowNullOption: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(u, { emit: N }) {
-    const a = u, d = N, v = r(!1), i = r(a.modelValue.palette), k = c(() => q(i.value)), s = r(null), $ = c(() => s.value === null ? null : a.modelValue.order.indexOf(s.value)), g = r(null), I = c({
-      get: () => {
-        const e = a.modelValue.order.map((t) => {
-          var o;
-          const l = (o = a.modelValue.mapping[t]) == null ? void 0 : o.aes;
-          return {
-            text: a.columnValueLabels[t],
-            value: t,
-            dotShape: l == null ? void 0 : l.dotShape,
-            color: l == null ? void 0 : l.color,
-            lineType: l == null ? void 0 : l.lineShape
-          };
-        });
-        return a.allowNullOption ? e : e.filter((t) => t.value !== "null");
-      },
-      set: (e) => {
-        d("update:modelValue", {
-          ...a.modelValue,
-          order: e.map((t) => t.value)
-        });
-      }
-    });
-    function B(e) {
-      i.value = e, v.value = !1, d(
+  setup(s, { emit: D }) {
+    const l = s, m = D, f = c(!1), i = c(l.modelValue.palette), L = p(() => J(i.value)), r = c(null), E = p(() => r.value === null ? null : l.modelValue.order.indexOf(r.value)), V = c(null);
+    function M(e) {
+      i.value = e, f.value = !1, m(
         "update:modelValue",
-        z(e, a.modelValue.order)
+        Q(e, l.modelValue.order)
       );
     }
-    function D(e, t, l) {
-      d("update:modelValue", {
-        ...a.modelValue,
+    function T(e, a, o) {
+      m("update:modelValue", {
+        ...l.modelValue,
         mapping: {
-          ...a.modelValue.mapping,
+          ...l.modelValue.mapping,
           [e]: {
-            ...a.modelValue.mapping[e],
+            ...l.modelValue.mapping[e],
             aes: {
-              ...a.modelValue.mapping[e].aes,
-              [t]: l
+              ...l.modelValue.mapping[e].aes,
+              [a]: o
             }
           }
         }
       });
     }
-    function S() {
-      s.value = null, g.value = null;
+    function N() {
+      r.value = null, V.value = null;
     }
-    function E(e) {
-      var t;
-      d("update:modelValue", {
-        ...a.modelValue,
+    function F(e) {
+      var a;
+      m("update:modelValue", {
+        ...l.modelValue,
         hidden: {
-          ...a.modelValue.hidden,
-          [e.value]: !((t = a.modelValue.hidden) != null && t[e.value])
+          ...l.modelValue.hidden,
+          [e.value]: !((a = l.modelValue.hidden) != null && a[e.value])
         }
       });
     }
-    function A(e, t, l = 0, o = 1) {
-      const n = 1 / (e.length - 1), C = j().domain(e.map((V, U) => l + U * n * (o - l))).range(e);
-      return (V) => V > o || V < l ? t : C(V);
+    function O(e, a, o = 0, t = 1) {
+      const n = 1 / (e.length - 1), d = G().domain(e.map((u, h) => o + h * n * (t - o))).range(e);
+      return (u) => u > t || u < o ? a : d(u);
     }
-    const O = c(
-      () => A(h[i.value].colors, R)
-    ), M = c(
-      () => A(h[i.value].colors, R, 0, 100)
-    ), y = r(
-      a.modelValue.order.map(
-        (e) => a.modelValue.mapping[e].colorIdx * 100
+    const U = p(
+      () => O(y[i.value].colors, B)
+    ), H = p(
+      () => O(y[i.value].colors, B, 0, 100)
+    ), C = c(
+      l.modelValue.order.map(
+        (e) => l.modelValue.mapping[e].colorIdx * 100
       )
     );
-    L(
-      () => a.modelValue,
+    x(
+      () => l.modelValue,
       (e) => {
-        y.value = e.order.map(
-          (t) => e.mapping[t].colorIdx * 100
+        C.value = e.order.map(
+          (a) => e.mapping[a].colorIdx * 100
         );
       }
     );
-    function T(e) {
-      e.forEach((t, l) => {
-        const o = a.modelValue.order[l], n = t / 100;
-        a.modelValue.mapping[o].colorIdx !== n && d("update:modelValue", {
-          ...a.modelValue,
+    function K(e) {
+      e.forEach((a, o) => {
+        const t = l.modelValue.order[o], n = a / 100;
+        l.modelValue.mapping[t].colorIdx !== n && m("update:modelValue", {
+          ...l.modelValue,
           mapping: {
-            ...a.modelValue.mapping,
-            [o]: {
+            ...l.modelValue.mapping,
+            [t]: {
               colorIdx: n,
               aes: {
-                ...a.modelValue.mapping[o].aes,
-                color: O.value(n)
+                ...l.modelValue.mapping[t].aes,
+                color: U.value(n)
               }
             }
           }
         });
       });
     }
-    function F(e) {
-      g.value = "color", s.value = e.status ? a.modelValue.order[e.index] : null;
+    function W(e) {
+      V.value = "color", r.value = e.status ? l.modelValue.order[e.index] : null;
+    }
+    function S(e, a) {
+      const o = e.order.map((t) => {
+        var n, d, u, h, P, R;
+        return {
+          text: l.columnValueLabels[t],
+          value: t,
+          dotShape: (d = (n = e.mapping[t]) == null ? void 0 : n.aes) == null ? void 0 : d.dotShape,
+          color: (h = (u = e.mapping[t]) == null ? void 0 : u.aes) == null ? void 0 : h.color,
+          lineType: (R = (P = e.mapping[t]) == null ? void 0 : P.aes) == null ? void 0 : R.lineShape
+        };
+      });
+      return a ? o : o.filter((t) => t.value !== "null");
     }
-    const w = r(I.value);
-    return L(() => w.value, (e) => {
-      I.value = e;
-    }, { deep: !0 }), (e, t) => (f(), b("div", ee, [
-      m("div", le, [
-        m("div", te, [
-          m("span", null, W(u.dataColumnLabel), 1)
+    const A = c(S(l.modelValue, l.allowNullOption)), b = p(() => A.value);
+    return x([() => i.value, () => l.allowNullOption], () => {
+      A.value = S(l.modelValue, l.allowNullOption);
+    }, { deep: !0 }), x(() => b.value, (e) => {
+      m("update:modelValue", {
+        ...l.modelValue,
+        order: e.map((a) => a.value)
+      });
+    }, { deep: !0 }), (e, a) => (w(), _("div", oe, [
+      v("div", te, [
+        v("div", ne, [
+          v("span", null, z(s.dataColumnLabel), 1)
         ]),
-        m("div", ae, [
-          p(Q, {
+        v("div", ie, [
+          g(Z, {
             label: "Color Palette ",
             icon: "chevron-right",
-            title: _(h)[i.value].title,
+            title: I(y)[i.value].title,
             palette: i.value,
-            onButtonClick: t[0] || (t[0] = (l) => {
-              v.value = !0, S();
+            onButtonClick: a[0] || (a[0] = (o) => {
+              f.value = !0, N();
             })
           }, null, 8, ["title", "palette"])
         ]),
-        k.value ? x("", !0) : (f(), b("div", oe, [
-          p(X, {
-            modelValue: y.value,
+        L.value ? k("", !0) : (w(), _("div", ue, [
+          g(ee, {
+            modelValue: C.value,
             "onUpdate:modelValue": [
-              t[1] || (t[1] = (l) => y.value = l),
-              T
+              a[1] || (a[1] = (o) => C.value = o),
+              K
             ],
-            colors: _(h)[i.value].colors,
-            "get-color-for-percent": M.value,
-            active: $.value,
-            onActive: F
+            colors: I(y)[i.value].colors,
+            "get-color-for-percent": H.value,
+            active: E.value,
+            onActive: W
           }, null, 8, ["modelValue", "colors", "get-color-for-percent", "active"])
         ])),
-        v.value ? (f(), K(G, {
+        f.value ? (w(), q(X, {
           key: 1,
           title: "Color Palette",
           "back-title": "Color mapping",
-          "onForm:close": t[2] || (t[2] = (l) => v.value = !1)
+          "onForm:close": a[2] || (a[2] = (o) => f.value = !1)
         }, {
-          default: P(() => [
-            p(J, {
+          default: $(() => [
+            g(Y, {
               selected: i.value,
-              onSelect: B
+              onSelect: M
             }, null, 8, ["selected"])
           ]),
           _: 1
-        })) : x("", !0)
+        })) : k("", !0)
       ]),
-      u.allowReordering ? (f(), b("div", ne, " Drag the rows to reorder ")) : x("", !0),
-      m("div", ie, [
-        p(_(Z), {
-          items: w.value,
-          "onUpdate:items": t[3] || (t[3] = (l) => w.value = l),
-          "get-item-key": (l) => l.value,
+      s.allowReordering ? (w(), _("div", se, " Drag the rows to reorder ")) : k("", !0),
+      v("div", re, [
+        g(I(ae), {
+          items: b.value,
+          "onUpdate:items": a[3] || (a[3] = (o) => b.value = o),
+          "get-item-key": (o) => o.value,
           "item-class": e.$style.discreteRow,
           "item-class-title": e.$style.discreteRowTitle,
-          disableDragging: !u.allowReordering,
+          disableDragging: !s.allowReordering,
           disableRemoving: !0,
           disableToggling: !0,
           disablePinning: !0
         }, {
-          "item-title": P(({ item: l }) => {
-            var o;
+          "item-title": $(({ item: o }) => {
+            var t;
             return [
-              p(Y, {
-                item: l,
-                "active-value": s.value,
-                "active-aes-type": g.value,
-                "used-aes-in-mapping": a.usedAesInMapping,
-                "allow-hiding": u.allowHiding ?? !1,
-                "allow-reordering": u.allowReordering ?? !1,
-                hidden: ((o = a.modelValue.hidden) == null ? void 0 : o[l.value]) ?? !1,
+              g(le, {
+                item: o,
+                "active-value": r.value,
+                "active-aes-type": V.value,
+                "used-aes-in-mapping": l.usedAesInMapping,
+                "allow-hiding": s.allowHiding ?? !1,
+                "allow-reordering": s.allowReordering ?? !1,
+                hidden: ((t = l.modelValue.hidden) == null ? void 0 : t[o.value]) ?? !1,
                 palette: i.value,
-                "is-categorical": k.value,
-                "on-aes-value-update": (n, C) => D(l.value, n, C),
-                "on-switch-visibility": () => E(l),
-                "on-active-value-change": (n) => s.value = n,
-                "on-active-aes-type-change": (n) => g.value = n,
-                "on-close-form": S
+                "is-categorical": L.value,
+                "on-aes-value-update": (n, d) => T(o.value, n, d),
+                "on-switch-visibility": () => F(o),
+                "on-active-value-change": (n) => r.value = n,
+                "on-active-aes-type-change": (n) => V.value = n,
+                "on-close-form": N
               }, null, 8, ["item", "active-value", "active-aes-type", "used-aes-in-mapping", "allow-hiding", "allow-reordering", "hidden", "palette", "is-categorical", "on-aes-value-update", "on-switch-visibility", "on-active-value-change", "on-active-aes-type-change"])
             ];
           }),
@@ -213,6 +210,6 @@ const ee = { class: "aes-mapping-block" }, le = { style: { margin: "0 24px" } },
   }
 });
 export {
-  fe as default
+  ye as default
 };
 //# sourceMappingURL=AesDataMappingDiscrete.vue2.js.map

package/dist/components/AesSettings/AesDataMappingDiscrete.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"AesDataMappingDiscrete.vue2.js","sources":["../../../src/components/AesSettings/AesDataMappingDiscrete.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { scaleLinear } from 'd3-scale';\nimport { computed, ref, watch } from 'vue';\nimport type {\n  DotShape,\n  LineType,\n  Palette,\n} from './types';\nimport {\n  isCategorical,\n  PALETTE_MAP, UNKNOWN_COLOR,\n} from '../../constantsAesthetic';\nimport type { AesType } from '../../constantsCommon';\nimport type {\n  AestheticMappingCategorical,\n} from '../../dataBindAes';\nimport {\n  createCategoricalMappingFromPalette,\n} from '../../dataBindAes';\nimport FormWrapper from './FormWrapper.vue';\nimport PalettesForm from './PalettesForm.vue';\nimport MultiselectButton from '../MultiselectButton.vue';\nimport PlColorSlider from '../PlColorSlider.vue';\nimport DiscreteRow from './DiscreteRow.vue';\nimport { PlElementList } from '@platforma-sdk/ui-vue';\n\nconst props = defineProps<{\n  dataColumnLabel: string;\n  columnValueLabels: Record<string, string>;\n  usedAesInMapping: Record<AesType, boolean>;\n  modelValue: AestheticMappingCategorical;\n  allowReordering?: boolean;\n  allowHiding?: boolean;\n  allowNullOption?: boolean;\n}>();\n\nconst emit = defineEmits(['update:modelValue']);\n\nconst palettesOpen = ref(false);\nconst palette = ref<Palette>(props.modelValue.palette);\nconst categorical = computed(() => isCategorical(palette.value));\n\ntype EditableAesType = 'color' | 'dotShape' | 'lineType';\n\nconst activeValue = ref<string | null>(null);\nconst activeValueIndex = computed(() => {\n  if (activeValue.value === null) {\n    return null;\n  }\n  return props.modelValue.order.indexOf(activeValue.value);\n});\nconst activeAesType = ref<EditableAesType | null>(null);\n\nconst optionsList = computed({\n  get: () => {\n    const options = props.modelValue.order.map((value: string) => {\n      const aes = props.modelValue.mapping[value]?.aes;\n      return {\n        text: props.columnValueLabels[value],\n        value,\n        dotShape: aes?.dotShape,\n        color: aes?.color,\n        lineType: aes?.lineShape,\n      };\n    });\n\n    return props.allowNullOption ? options : options.filter((op) => op.value !== 'null');\n  },\n  set: (value) => {\n    emit('update:modelValue', {\n      ...props.modelValue,\n      order: value.map((item) => item.value),\n    });\n  },\n});\n\nfunction onPaletteSelect(value: Palette) {\n  palette.value = value;\n  palettesOpen.value = false;\n  emit(\n    'update:modelValue',\n    createCategoricalMappingFromPalette(value, props.modelValue.order),\n  );\n}\n\nfunction onAesValueUpdate(\n  value: string | number,\n  aesField: string,\n  aesValue: string | DotShape | LineType,\n) {\n  emit('update:modelValue', {\n    ...props.modelValue,\n    mapping: {\n      ...props.modelValue.mapping,\n      [value]: {\n        ...props.modelValue.mapping[value],\n        aes: {\n          ...props.modelValue.mapping[value].aes,\n          [aesField]: aesValue,\n        },\n      },\n    },\n  });\n}\n\nfunction closeForm() {\n  activeValue.value = null;\n  activeAesType.value = null;\n}\n\nfunction switchVisibility(option: { value: string }) {\n  emit('update:modelValue', {\n    ...props.modelValue,\n    hidden: {\n      ...props.modelValue.hidden,\n      [option.value]: props.modelValue.hidden?.[option.value] ? false : true,\n    },\n  });\n}\n\nfunction getColorScale(colors: string[], unknownColor: string, from = 0, to = 1) {\n  const colorStep = 1 / (colors.length - 1);\n  const scale = scaleLinear<string, string>()\n    .domain(colors.map((_c, idx) => from + idx * colorStep * (to - from)))\n    .range(colors);\n  return (v: number) => {\n    if (v > to || v < from) {\n      return unknownColor;\n    }\n    return scale(v);\n  };\n}\n\nconst continuousColorScale = computed(() =>\n  getColorScale(PALETTE_MAP[palette.value].colors, UNKNOWN_COLOR),\n);\n\nconst colorForPercent = computed(() =>\n  getColorScale(PALETTE_MAP[palette.value].colors, UNKNOWN_COLOR, 0, 100),\n);\nconst continuousMappingItems = ref(\n  props.modelValue.order.map(\n    (item) => props.modelValue.mapping[item].colorIdx * 100,\n  ),\n);\nwatch(\n  () => props.modelValue,\n  (v) => {\n    continuousMappingItems.value = v.order.map(\n      (item) => v.mapping[item].colorIdx * 100,\n    );\n  },\n);\nfunction updateContinuousColors(v: number[]) {\n  v.forEach((value, idx) => {\n    const item = props.modelValue.order[idx];\n    const newColorIdx = value / 100;\n    if (props.modelValue.mapping[item].colorIdx !== newColorIdx) {\n      emit('update:modelValue', {\n        ...props.modelValue,\n        mapping: {\n          ...props.modelValue.mapping,\n          [item]: {\n            colorIdx: newColorIdx,\n            aes: {\n              ...props.modelValue.mapping[item].aes,\n              color: continuousColorScale.value(newColorIdx),\n            },\n          },\n        },\n      });\n    }\n  });\n}\n\nfunction setActiveElementFromColorSlider(e: { index: number; status: boolean }) {\n  activeAesType.value = 'color';\n  activeValue.value = e.status ? props.modelValue.order[e.index] : null;\n}\n\nconst listItems = ref(optionsList.value);\nwatch(() => listItems.value, (v) => {\n  optionsList.value = v;\n}, { deep: true });\n</script>\n\n<template>\n  <div class=\"aes-mapping-block\">\n    <div style=\"margin: 0 24px\">\n      <div class=\"section-title\">\n        <span>{{ dataColumnLabel }}</span>\n      </div>\n      <div style=\"margin: 24px 0\">\n        <MultiselectButton\n          label=\"Color Palette \" icon=\"chevron-right\" :title=\"PALETTE_MAP[palette].title\"\n          :palette=\"palette\" @button-click=\"\n            palettesOpen = true;\n            closeForm();\n          \"\n        />\n      </div>\n      <div v-if=\"!categorical\" style=\"margin: 24px 0\">\n        <PlColorSlider\n          v-model=\"continuousMappingItems\" :colors=\"PALETTE_MAP[palette].colors\"\n          :get-color-for-percent=\"colorForPercent\" :active=\"activeValueIndex\" @active=\"setActiveElementFromColorSlider\"\n          @update:model-value=\"updateContinuousColors\"\n        />\n      </div>\n      <FormWrapper\n        v-if=\"palettesOpen\" title=\"Color Palette\" back-title=\"Color mapping\"\n        @form:close=\"palettesOpen = false\"\n      >\n        <PalettesForm :selected=\"palette\" @select=\"onPaletteSelect\" />\n      </FormWrapper>\n    </div>\n    <div v-if=\"allowReordering\" class=\"aes-settings-hint\">\n      Drag the rows to reorder\n    </div>\n    <div class=\"column-values-list\">\n      <PlElementList\n        v-model:items=\"listItems\"\n        :get-item-key=\"(item) => item.value\"\n        :item-class=\"$style.discreteRow\"\n        :item-class-title=\"$style.discreteRowTitle\"\n        :disableDragging=\"!allowReordering\"\n        :disableRemoving=\"true\"\n        :disableToggling=\"true\"\n        :disablePinning=\"true\"\n      >\n        <template #item-title=\"{ item }\">\n          <DiscreteRow\n            :item=\"item\" :active-value=\"activeValue\" :active-aes-type=\"activeAesType\"\n            :used-aes-in-mapping=\"props.usedAesInMapping\" :allow-hiding=\"allowHiding ?? false\"\n            :allow-reordering=\"allowReordering ?? false\" :hidden=\"props.modelValue.hidden?.[item.value] ?? false\"\n            :palette=\"palette\" :is-categorical=\"categorical\"\n            :on-aes-value-update=\"(field: string, value: string | DotShape | LineType) => onAesValueUpdate(item.value, field, value)\"\n            :on-switch-visibility=\"() => switchVisibility(item)\" :on-active-value-change=\"(v) => activeValue = v\"\n            :on-active-aes-type-change=\"(v) => activeAesType = v\" :on-close-form=\"closeForm\"\n          />\n        </template>\n      </PlElementList>\n    </div>\n  </div>\n</template>\n<style module>\n.discreteRow {\n  background-color: var(--color-ic-00);\n  border-color: var(--color-div-grey);\n}\n.discreteRow:hover {\n  --head-background: var(--color-ic-00);\n}\n.discreteRowTitle {\n  padding-top: 0;\n  padding-bottom: 0;\n  background-color: var(--color-ic-00);\n}\n.discreteRow:hover .discreteRowTitle {\n  background-color: var(--color-ic-00);\n}\n</style>\n"],"names":["props","__props","emit","__emit","palettesOpen","ref","palette","categorical","computed","isCategorical","activeValue","activeValueIndex","activeAesType","optionsList","options","value","aes","_a","op","item","onPaletteSelect","createCategoricalMappingFromPalette","onAesValueUpdate","aesField","aesValue","closeForm","switchVisibility","option","getColorScale","colors","unknownColor","from","to","colorStep","scale","scaleLinear","_c","idx","v","continuousColorScale","PALETTE_MAP","UNKNOWN_COLOR","colorForPercent","continuousMappingItems","watch","updateContinuousColors","newColorIdx","setActiveElementFromColorSlider","listItems","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_hoisted_4","_createVNode","MultiselectButton","_unref","_cache","$event","_hoisted_5","PlColorSlider","_createBlock","FormWrapper","PalettesForm","_hoisted_6","_hoisted_7","PlElementList","$style","_withCtx","DiscreteRow","field"],"mappings":"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"}
+{"version":3,"file":"AesDataMappingDiscrete.vue2.js","sources":["../../../src/components/AesSettings/AesDataMappingDiscrete.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { scaleLinear } from 'd3-scale';\nimport { computed, ref, watch } from 'vue';\nimport type {\n  DotShape,\n  LineType,\n  Palette,\n} from './types';\nimport {\n  isCategorical,\n  PALETTE_MAP, UNKNOWN_COLOR,\n} from '../../constantsAesthetic';\nimport type { AesType } from '../../constantsCommon';\nimport type {\n  AestheticMappingCategorical,\n} from '../../dataBindAes';\nimport {\n  createCategoricalMappingFromPalette,\n} from '../../dataBindAes';\nimport FormWrapper from './FormWrapper.vue';\nimport PalettesForm from './PalettesForm.vue';\nimport MultiselectButton from '../MultiselectButton.vue';\nimport PlColorSlider from '../PlColorSlider.vue';\nimport DiscreteRow from './DiscreteRow.vue';\nimport { PlElementList } from '@platforma-sdk/ui-vue';\n\nconst props = defineProps<{\n  dataColumnLabel: string;\n  columnValueLabels: Record<string, string>;\n  usedAesInMapping: Record<AesType, boolean>;\n  modelValue: AestheticMappingCategorical;\n  allowReordering?: boolean;\n  allowHiding?: boolean;\n  allowNullOption?: boolean;\n}>();\n\nconst emit = defineEmits(['update:modelValue']);\n\nconst palettesOpen = ref(false);\nconst palette = ref<Palette>(props.modelValue.palette);\nconst categorical = computed(() => isCategorical(palette.value));\n\ntype EditableAesType = 'color' | 'dotShape' | 'lineType';\n\nconst activeValue = ref<string | null>(null);\nconst activeValueIndex = computed(() => {\n  if (activeValue.value === null) {\n    return null;\n  }\n  return props.modelValue.order.indexOf(activeValue.value);\n});\nconst activeAesType = ref<EditableAesType | null>(null);\n\nfunction onPaletteSelect(value: Palette) {\n  palette.value = value;\n  palettesOpen.value = false;\n  emit(\n    'update:modelValue',\n    createCategoricalMappingFromPalette(value, props.modelValue.order),\n  );\n}\n\nfunction onAesValueUpdate(\n  value: string | number,\n  aesField: string,\n  aesValue: string | DotShape | LineType,\n) {\n  emit('update:modelValue', {\n    ...props.modelValue,\n    mapping: {\n      ...props.modelValue.mapping,\n      [value]: {\n        ...props.modelValue.mapping[value],\n        aes: {\n          ...props.modelValue.mapping[value].aes,\n          [aesField]: aesValue,\n        },\n      },\n    },\n  });\n}\n\nfunction closeForm() {\n  activeValue.value = null;\n  activeAesType.value = null;\n}\n\nfunction switchVisibility(option: { value: string }) {\n  emit('update:modelValue', {\n    ...props.modelValue,\n    hidden: {\n      ...props.modelValue.hidden,\n      [option.value]: props.modelValue.hidden?.[option.value] ? false : true,\n    },\n  });\n}\n\nfunction getColorScale(colors: string[], unknownColor: string, from = 0, to = 1) {\n  const colorStep = 1 / (colors.length - 1);\n  const scale = scaleLinear<string, string>()\n    .domain(colors.map((_c, idx) => from + idx * colorStep * (to - from)))\n    .range(colors);\n  return (v: number) => {\n    if (v > to || v < from) {\n      return unknownColor;\n    }\n    return scale(v);\n  };\n}\n\nconst continuousColorScale = computed(() =>\n  getColorScale(PALETTE_MAP[palette.value].colors, UNKNOWN_COLOR),\n);\n\nconst colorForPercent = computed(() =>\n  getColorScale(PALETTE_MAP[palette.value].colors, UNKNOWN_COLOR, 0, 100),\n);\nconst continuousMappingItems = ref(\n  props.modelValue.order.map(\n    (item) => props.modelValue.mapping[item].colorIdx * 100,\n  ),\n);\nwatch(\n  () => props.modelValue,\n  (v) => {\n    continuousMappingItems.value = v.order.map(\n      (item) => v.mapping[item].colorIdx * 100,\n    );\n  },\n);\nfunction updateContinuousColors(v: number[]) {\n  v.forEach((value, idx) => {\n    const item = props.modelValue.order[idx];\n    const newColorIdx = value / 100;\n    if (props.modelValue.mapping[item].colorIdx !== newColorIdx) {\n      emit('update:modelValue', {\n        ...props.modelValue,\n        mapping: {\n          ...props.modelValue.mapping,\n          [item]: {\n            colorIdx: newColorIdx,\n            aes: {\n              ...props.modelValue.mapping[item].aes,\n              color: continuousColorScale.value(newColorIdx),\n            },\n          },\n        },\n      });\n    }\n  });\n}\n\nfunction setActiveElementFromColorSlider(e: { index: number; status: boolean }) {\n  activeAesType.value = 'color';\n  activeValue.value = e.status ? props.modelValue.order[e.index] : null;\n}\n\nfunction getOptionsList(data: AestheticMappingCategorical, allowNullOption: boolean) {\n  const options = data.order.map((value: string) => {\n    return {\n      text: props.columnValueLabels[value],\n      value,\n      dotShape: data.mapping[value]?.aes?.dotShape,\n      color: data.mapping[value]?.aes?.color,\n      lineType: data.mapping[value]?.aes?.lineShape,\n    };\n  });\n  return allowNullOption ? options : options.filter((op) => op.value !== 'null');\n}\n\nconst optionsList = ref(getOptionsList(props.modelValue, props.allowNullOption));\nconst reordarableItems = computed(() => optionsList.value);\n\nwatch([() => palette.value, () => props.allowNullOption], () => {\n  optionsList.value = getOptionsList(props.modelValue, props.allowNullOption);\n}, { deep: true });\nwatch(() => reordarableItems.value, (v) => {\n  emit('update:modelValue', {\n    ...props.modelValue,\n    order: v.map((item) => item.value),\n  });\n}, { deep: true });\n</script>\n\n<template>\n  <div class=\"aes-mapping-block\">\n    <div style=\"margin: 0 24px\">\n      <div class=\"section-title\">\n        <span>{{ dataColumnLabel }}</span>\n      </div>\n      <div style=\"margin: 24px 0\">\n        <MultiselectButton\n          label=\"Color Palette \" icon=\"chevron-right\" :title=\"PALETTE_MAP[palette].title\"\n          :palette=\"palette\" @button-click=\"\n            palettesOpen = true;\n            closeForm();\n          \"\n        />\n      </div>\n      <div v-if=\"!categorical\" style=\"margin: 24px 0\">\n        <PlColorSlider\n          v-model=\"continuousMappingItems\" :colors=\"PALETTE_MAP[palette].colors\"\n          :get-color-for-percent=\"colorForPercent\" :active=\"activeValueIndex\" @active=\"setActiveElementFromColorSlider\"\n          @update:model-value=\"updateContinuousColors\"\n        />\n      </div>\n      <FormWrapper\n        v-if=\"palettesOpen\" title=\"Color Palette\" back-title=\"Color mapping\"\n        @form:close=\"palettesOpen = false\"\n      >\n        <PalettesForm :selected=\"palette\" @select=\"onPaletteSelect\" />\n      </FormWrapper>\n    </div>\n    <div v-if=\"allowReordering\" class=\"aes-settings-hint\">\n      Drag the rows to reorder\n    </div>\n    <div class=\"column-values-list\">\n      <PlElementList\n        v-model:items=\"reordarableItems\"\n        :get-item-key=\"(item) => item.value\"\n        :item-class=\"$style.discreteRow\"\n        :item-class-title=\"$style.discreteRowTitle\"\n        :disableDragging=\"!allowReordering\"\n        :disableRemoving=\"true\"\n        :disableToggling=\"true\"\n        :disablePinning=\"true\"\n      >\n        <template #item-title=\"{ item }\">\n          <DiscreteRow\n            :item=\"item\"\n            :active-value=\"activeValue\"\n            :active-aes-type=\"activeAesType\"\n            :used-aes-in-mapping=\"props.usedAesInMapping\"\n            :allow-hiding=\"allowHiding ?? false\"\n            :allow-reordering=\"allowReordering ?? false\"\n            :hidden=\"props.modelValue.hidden?.[item.value] ?? false\"\n            :palette=\"palette\"\n            :is-categorical=\"categorical\"\n            :on-aes-value-update=\"(field: string, value: string | DotShape | LineType) => onAesValueUpdate(item.value, field, value)\"\n            :on-switch-visibility=\"() => switchVisibility(item)\" :on-active-value-change=\"(v) => activeValue = v\"\n            :on-active-aes-type-change=\"(v) => activeAesType = v\" :on-close-form=\"closeForm\"\n          />\n        </template>\n      </PlElementList>\n    </div>\n  </div>\n</template>\n<style module>\n.discreteRow {\n  background-color: var(--color-ic-00);\n  border-color: var(--color-div-grey);\n}\n.discreteRow:hover {\n  --head-background: var(--color-ic-00);\n}\n.discreteRowTitle {\n  padding-top: 0;\n  padding-bottom: 0;\n  background-color: var(--color-ic-00);\n}\n.discreteRow:hover .discreteRowTitle {\n  background-color: var(--color-ic-00);\n}\n</style>\n"],"names":["props","__props","emit","__emit","palettesOpen","ref","palette","categorical","computed","isCategorical","activeValue","activeValueIndex","activeAesType","onPaletteSelect","value","createCategoricalMappingFromPalette","onAesValueUpdate","aesField","aesValue","closeForm","switchVisibility","option","_a","getColorScale","colors","unknownColor","from","to","colorStep","scale","scaleLinear","_c","idx","v","continuousColorScale","PALETTE_MAP","UNKNOWN_COLOR","colorForPercent","continuousMappingItems","item","watch","updateContinuousColors","newColorIdx","setActiveElementFromColorSlider","getOptionsList","data","allowNullOption","options","_b","_d","_f","_e","op","optionsList","reordarableItems","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_hoisted_4","_createVNode","MultiselectButton","_unref","_cache","$event","_hoisted_5","PlColorSlider","_createBlock","FormWrapper","PalettesForm","_hoisted_6","_hoisted_7","PlElementList","$style","_withCtx","DiscreteRow","field"],"mappings":"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"}

package/dist/components/AesSettings/DiscreteRow.vue2.js

@@ -1,11 +1,11 @@
-import { defineComponent as $, computed as T, reactive as S, createElementBlock as m, openBlock as o, normalizeClass as a, createElementVNode as s, toDisplayString as k, createBlock as d, createCommentVNode as u, unref as V, withCtx as r, withModifiers as y, createVNode as C, normalizeStyle as p } from "vue";
-import { PALETTE_MAP as h, FIXED_LINE_TYPES as w, FIXES_DOT_SHAPES as F } from "../../constantsAesthetic.js";
+import { defineComponent as $, computed as T, reactive as S, createElementBlock as m, openBlock as o, normalizeClass as a, createElementVNode as s, toDisplayString as k, createBlock as d, createCommentVNode as u, unref as g, withCtx as r, withModifiers as y, createVNode as C, normalizeStyle as h } from "vue";
+import { PALETTE_MAP as w, FIXED_LINE_TYPES as p, FIXES_DOT_SHAPES as F } from "../../constantsAesthetic.js";
 import { getPopupHeightForFixedAesList as E } from "../../utils/getPopupHeightForFixedAesList.js";
 import { PlTooltip as I, PlIcon24 as P } from "@platforma-sdk/ui-vue";
-import B from "../Popup.vue.js";
-import M from "./FixedLineTypeList.vue.js";
-import U from "./FixedDotShapeList.vue.js";
-import R from "./FixedColorsList.vue.js";
+import R from "../Popup.vue.js";
+import B from "./FixedLineTypeList.vue.js";
+import M from "./FixedDotShapeList.vue.js";
+import U from "./FixedColorsList.vue.js";
 const G = /* @__PURE__ */ $({
   __name: "DiscreteRow",
   props: {
@@ -31,9 +31,9 @@ const G = /* @__PURE__ */ $({
       n.onActiveValueChange(l ? null : i.value), n.onActiveAesTypeChange(l ? null : t);
     }
     const A = T(
-      () => h[n.palette].colors.map((i) => ({ color: i, name: i }))
-    ), g = T(() => n.activeAesType ? E(
-      n.activeAesType === "lineType" ? w.length : n.activeAesType === "dotShape" ? F.length : A.value.length,
+      () => w[n.palette].colors.map((i) => ({ color: i, name: i }))
+    ), V = T(() => n.activeAesType ? E(
+      n.activeAesType === "lineType" ? p.length : n.activeAesType === "dotShape" ? F.length : A.value.length,
       n.activeAesType
     ) : 0), f = S({
       color: {},
@@ -44,7 +44,7 @@ const G = /* @__PURE__ */ $({
       l && (f[i][t.value] = l);
     }
     return (i, t) => (o(), m("div", {
-      class: a(i.$style.columnValue)
+      class: a([i.$style.columnValue, { [i.$style.withReorering]: e.allowReordering }])
     }, [
       s("div", {
         class: a(i.$style.title)
@@ -52,7 +52,7 @@ const G = /* @__PURE__ */ $({
       s("div", {
         class: a(i.$style.aesGroup)
       }, [
-        e.allowHiding ? (o(), d(V(I), {
+        e.allowHiding ? (o(), d(g(I), {
           key: 0,
           "open-delay": 100,
           "close-delay": 100
@@ -66,7 +66,7 @@ const G = /* @__PURE__ */ $({
               class: a(i.$style.aes),
               onClick: t[0] || (t[0] = y((l) => e.onSwitchVisibility(), ["stop"]))
             }, [
-              C(V(P), {
+              C(g(P), {
                 name: e.hidden ? "view-hide" : "view-show"
               }, null, 8, ["name"])
             ], 2)
@@ -107,20 +107,20 @@ const G = /* @__PURE__ */ $({
         }, [
           s("div", {
             class: a(i.$style.color),
-            style: p({ background: e.item.color })
+            style: h({ background: e.item.color })
           }, null, 6)
         ], 2)) : u("", !0),
-        (e.activeAesType !== "color" || e.isCategorical) && e.activeAesType !== null && e.activeValue === e.item.value ? (o(), d(B, {
+        (e.activeAesType !== "color" || e.isCategorical) && e.activeAesType !== null && e.activeValue === e.item.value ? (o(), d(R, {
           key: `${e.activeAesType}_${e.activeValue}`,
           targetRef: f[e.activeAesType][e.activeValue],
-          height: g.value,
+          height: V.value,
           "onPopup:close": e.onCloseForm
         }, {
           default: r(() => [
             s("div", {
               class: a(["fixed-aes-list", { "fixed-aes-list__rows": !1 }])
             }, [
-              e.activeAesType === "lineType" ? (o(), d(M, {
+              e.activeAesType === "lineType" ? (o(), d(B, {
                 key: 0,
                 modelValue: e.item.lineType,
                 "onUpdate:modelValue": [
@@ -128,7 +128,7 @@ const G = /* @__PURE__ */ $({
                   t[5] || (t[5] = (l) => n.onAesValueUpdate("lineShape", l))
                 ]
               }, null, 8, ["modelValue"])) : u("", !0),
-              e.activeAesType === "dotShape" ? (o(), d(U, {
+              e.activeAesType === "dotShape" ? (o(), d(M, {
                 key: 1,
                 modelValue: e.item.dotShape,
                 "onUpdate:modelValue": [
@@ -136,7 +136,7 @@ const G = /* @__PURE__ */ $({
                   t[7] || (t[7] = (l) => n.onAesValueUpdate("dotShape", l))
                 ]
               }, null, 8, ["modelValue"])) : u("", !0),
-              e.activeAesType === "color" ? (o(), d(R, {
+              e.activeAesType === "color" ? (o(), d(U, {
                 key: 2,
                 modelValue: e.item.color,
                 "onUpdate:modelValue": [

package/dist/components/AesSettings/DiscreteRow.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"DiscreteRow.vue2.js","sources":["../../../src/components/AesSettings/DiscreteRow.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { type ComponentPublicInstance, computed, reactive } from 'vue';\nimport { FIXED_LINE_TYPES, FIXES_DOT_SHAPES, PALETTE_MAP } from '../../constantsAesthetic';\nimport { getPopupHeightForFixedAesList } from '../../utils/getPopupHeightForFixedAesList';\nimport type { Palette, DotShape, LineType } from './types';\nimport type { AesType } from '../../constantsCommon';\nimport { PlIcon24, PlTooltip } from '@platforma-sdk/ui-vue';\nimport Popup from '../Popup.vue';\nimport FixedLineTypeList from './FixedLineTypeList.vue';\nimport FixedDotShapeList from './FixedDotShapeList.vue';\nimport FixedColorsList from './FixedColorsList.vue';\n\ntype EditableAesType = 'color' | 'dotShape' | 'lineType';\n\nconst props = defineProps<{\n  item: {\n    text: string;\n    value: string;\n    dotShape?: DotShape;\n    color?: string;\n    lineType?: LineType;\n  };\n  activeValue: string | null;\n  activeAesType: EditableAesType | null;\n  usedAesInMapping: Record<AesType, boolean>;\n  palette: Palette;\n  allowReordering: boolean;\n  allowHiding: boolean;\n  hidden: boolean;\n  isCategorical: boolean;\n  onAesValueUpdate: (field: string, value: string | DotShape | LineType) => void;\n  onSwitchVisibility: () => void;\n  onActiveValueChange: (value: string | null) => void;\n  onActiveAesTypeChange: (value: EditableAesType | null) => void;\n  onCloseForm: () => void;\n}>();\n\nfunction toggleForm(\n  item: typeof props.item,\n  valueType: EditableAesType,\n) {\n  const isThisFormOpen = props.activeValue === item.value && props.activeAesType === valueType;\n  props.onActiveValueChange(isThisFormOpen ? null : item.value);\n  props.onActiveAesTypeChange(isThisFormOpen ? null : valueType);\n}\n\nconst selectedColorsList = computed(() =>\n  PALETTE_MAP[props.palette].colors.map((color: string) => ({ color, name: color })),\n);\nconst popupHeight = computed(() => {\n  if (!props.activeAesType) {\n    return 0;\n  }\n  return getPopupHeightForFixedAesList(\n    props.activeAesType === 'lineType' ? FIXED_LINE_TYPES.length : props.activeAesType === 'dotShape' ? FIXES_DOT_SHAPES.length : selectedColorsList.value.length,\n    props.activeAesType,\n  );\n});\n\nconst itemRefs = reactive<\n  Record<EditableAesType, Record<string, ComponentPublicInstance | Element>>\n>({\n  color: {},\n  dotShape: {},\n  lineType: {},\n});\nfunction setRef(\n  type: EditableAesType,\n  item: typeof props.item,\n  el: ComponentPublicInstance | null | Element,\n) {\n  if (el) {\n    itemRefs[type][item.value] = el;\n  }\n}\n</script>\n<template>\n  <div :class=\"$style.columnValue\">\n    <div :class=\"$style.title\">{{ item.text }}</div>\n    <div :class=\"$style.aesGroup\">\n      <PlTooltip v-if=\"allowHiding\" :open-delay=\"100\" :close-delay=\"100\">\n        <div :style=\"{ cursor: 'pointer' }\" :class=\"$style.aes\" @click.stop=\"onSwitchVisibility()\">\n          <PlIcon24 :name=\"hidden ? 'view-hide' : 'view-show'\" />\n        </div>\n        <template #tooltip>\n          <span> Show / hide </span>\n        </template>\n      </PlTooltip>\n      <div\n        v-if=\"usedAesInMapping.lineType\" :ref=\"(v) => setRef('lineType', item, v)\" :class=\"[$style.aes, {\n          [$style.selected]:\n            activeValue === item.value &&\n            activeAesType === 'lineType'\n        }]\" @click.stop=\"toggleForm(item, 'lineType')\"\n      >\n        <div class=\"icon__line line\" :class=\"{ [`line__${item.lineType}`]: true }\" />\n      </div>\n      <div\n        v-if=\"usedAesInMapping.dotShape\" :ref=\"(v) => setRef('dotShape', item, v)\" :class=\"[$style.aes, {\n          [$style.selected]: activeValue === item.value && activeAesType === 'dotShape'\n        }]\" @click.stop=\"toggleForm(item, 'dotShape')\"\n      >\n        <div class=\"dot\" :class=\"{ [`dot__${item.dotShape}`]: true }\" />\n      </div>\n      <div\n        v-if=\"usedAesInMapping.fill || usedAesInMapping.stroke\" :ref=\"(v) => setRef('color', item, v)\"\n        :class=\"[$style.aes, {\n          [$style.selected]: activeValue === item.value && activeAesType === 'color'\n        }]\" @click.stop=\"toggleForm(item, 'color')\"\n      >\n        <div :class=\"$style.color\" :style=\"{ background: item.color }\" />\n      </div>\n      <Popup\n        v-if=\"\n          (activeAesType !== 'color' || isCategorical) &&\n            activeAesType !== null &&\n            activeValue === item.value\n        \" :key=\"`${activeAesType}_${activeValue}`\" :targetRef=\"itemRefs[activeAesType][activeValue] as HTMLElement\"\n        :height=\"popupHeight\" @popup:close=\"onCloseForm\"\n      >\n        <div class=\"fixed-aes-list\" :class=\"{ 'fixed-aes-list__rows': false }\">\n          <FixedLineTypeList\n            v-if=\"activeAesType === 'lineType'\" v-model=\"item.lineType as LineType\" @update:modelValue=\"\n              (v: LineType) => props.onAesValueUpdate('lineShape', v)\n            \"\n          />\n          <FixedDotShapeList\n            v-if=\"activeAesType === 'dotShape'\" v-model=\"item.dotShape as DotShape\" @update:modelValue=\"\n              (v: DotShape) => props.onAesValueUpdate('dotShape', v)\n            \"\n          />\n          <FixedColorsList\n            v-if=\"activeAesType === 'color'\" v-model=\"item.color as string\"\n            :colors-list=\"selectedColorsList\" @update:modelValue=\"\n              (v: string) => props.onAesValueUpdate('color', v)\n            \"\n          />\n        </div>\n      </Popup>\n    </div>\n  </div>\n</template>\n\n<style module>\n.columnValue {\n  display: flex;\n  align-items: center;\n  padding-left: 12px;\n  padding-right: 2px;\n  margin-bottom: 6px;\n  background-color: var(--color-ic-00);\n  width: 100%;\n}\n\n.columnValue:last-child {\n  margin-bottom: 0;\n}\n\n.title {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-right: 8px;\n  line-height: 24px;\n}\n\n.color {\n  width: 18px;\n  height: 18px;\n  border-radius: 3px;\n}\n\n.aesGroup {\n  margin-left: auto;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n}\n\n.aes {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  background: var(--color-ic-00);\n  border-radius: var(--border-radius-control);\n}\n\n.aes.selected {\n  border: var(--contour-border-width) solid var(--contour-color);\n  box-shadow: var(--contour-box-shadow);\n  z-index: 1;\n}\n</style>\n"],"names":["props","__props","toggleForm","item","valueType","isThisFormOpen","selectedColorsList","computed","PALETTE_MAP","color","popupHeight","getPopupHeightForFixedAesList","FIXED_LINE_TYPES","FIXES_DOT_SHAPES","itemRefs","reactive","setRef","type","el","_createElementBlock","_normalizeClass","$style","_createElementVNode","_toDisplayString","_createBlock","_unref","PlTooltip","_cache","_createVNode","PlIcon24","v","_withModifiers","$event","_normalizeStyle","Popup","FixedLineTypeList","FixedDotShapeList","FixedColorsList"],"mappings":"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"}
+{"version":3,"file":"DiscreteRow.vue2.js","sources":["../../../src/components/AesSettings/DiscreteRow.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { type ComponentPublicInstance, computed, reactive } from 'vue';\nimport { FIXED_LINE_TYPES, FIXES_DOT_SHAPES, PALETTE_MAP } from '../../constantsAesthetic';\nimport { getPopupHeightForFixedAesList } from '../../utils/getPopupHeightForFixedAesList';\nimport type { Palette, DotShape, LineType } from './types';\nimport type { AesType } from '../../constantsCommon';\nimport { PlIcon24, PlTooltip } from '@platforma-sdk/ui-vue';\nimport Popup from '../Popup.vue';\nimport FixedLineTypeList from './FixedLineTypeList.vue';\nimport FixedDotShapeList from './FixedDotShapeList.vue';\nimport FixedColorsList from './FixedColorsList.vue';\n\ntype EditableAesType = 'color' | 'dotShape' | 'lineType';\n\nconst props = defineProps<{\n  item: {\n    text: string;\n    value: string;\n    dotShape?: DotShape;\n    color?: string;\n    lineType?: LineType;\n  };\n  activeValue: string | null;\n  activeAesType: EditableAesType | null;\n  usedAesInMapping: Record<AesType, boolean>;\n  palette: Palette;\n  allowReordering: boolean;\n  allowHiding: boolean;\n  hidden: boolean;\n  isCategorical: boolean;\n  onAesValueUpdate: (field: string, value: string | DotShape | LineType) => void;\n  onSwitchVisibility: () => void;\n  onActiveValueChange: (value: string | null) => void;\n  onActiveAesTypeChange: (value: EditableAesType | null) => void;\n  onCloseForm: () => void;\n}>();\n\nfunction toggleForm(\n  item: typeof props.item,\n  valueType: EditableAesType,\n) {\n  const isThisFormOpen = props.activeValue === item.value && props.activeAesType === valueType;\n  props.onActiveValueChange(isThisFormOpen ? null : item.value);\n  props.onActiveAesTypeChange(isThisFormOpen ? null : valueType);\n}\n\nconst selectedColorsList = computed(() =>\n  PALETTE_MAP[props.palette].colors.map((color: string) => ({ color, name: color })),\n);\nconst popupHeight = computed(() => {\n  if (!props.activeAesType) {\n    return 0;\n  }\n  return getPopupHeightForFixedAesList(\n    props.activeAesType === 'lineType' ? FIXED_LINE_TYPES.length : props.activeAesType === 'dotShape' ? FIXES_DOT_SHAPES.length : selectedColorsList.value.length,\n    props.activeAesType,\n  );\n});\n\nconst itemRefs = reactive<\n  Record<EditableAesType, Record<string, ComponentPublicInstance | Element>>\n>({\n  color: {},\n  dotShape: {},\n  lineType: {},\n});\nfunction setRef(\n  type: EditableAesType,\n  item: typeof props.item,\n  el: ComponentPublicInstance | null | Element,\n) {\n  if (el) {\n    itemRefs[type][item.value] = el;\n  }\n}\n</script>\n<template>\n  <div :class=\"[$style.columnValue, { [$style.withReorering]: allowReordering }]\">\n    <div :class=\"$style.title\">{{ item.text }}</div>\n    <div :class=\"$style.aesGroup\">\n      <PlTooltip v-if=\"allowHiding\" :open-delay=\"100\" :close-delay=\"100\">\n        <div :style=\"{ cursor: 'pointer' }\" :class=\"$style.aes\" @click.stop=\"onSwitchVisibility()\">\n          <PlIcon24 :name=\"hidden ? 'view-hide' : 'view-show'\" />\n        </div>\n        <template #tooltip>\n          <span> Show / hide </span>\n        </template>\n      </PlTooltip>\n      <div\n        v-if=\"usedAesInMapping.lineType\" :ref=\"(v) => setRef('lineType', item, v)\" :class=\"[$style.aes, {\n          [$style.selected]:\n            activeValue === item.value &&\n            activeAesType === 'lineType'\n        }]\" @click.stop=\"toggleForm(item, 'lineType')\"\n      >\n        <div class=\"icon__line line\" :class=\"{ [`line__${item.lineType}`]: true }\" />\n      </div>\n      <div\n        v-if=\"usedAesInMapping.dotShape\" :ref=\"(v) => setRef('dotShape', item, v)\" :class=\"[$style.aes, {\n          [$style.selected]: activeValue === item.value && activeAesType === 'dotShape'\n        }]\" @click.stop=\"toggleForm(item, 'dotShape')\"\n      >\n        <div class=\"dot\" :class=\"{ [`dot__${item.dotShape}`]: true }\" />\n      </div>\n      <div\n        v-if=\"usedAesInMapping.fill || usedAesInMapping.stroke\" :ref=\"(v) => setRef('color', item, v)\"\n        :class=\"[$style.aes, {\n          [$style.selected]: activeValue === item.value && activeAesType === 'color'\n        }]\" @click.stop=\"toggleForm(item, 'color')\"\n      >\n        <div :class=\"$style.color\" :style=\"{ background: item.color }\" />\n      </div>\n      <Popup\n        v-if=\"\n          (activeAesType !== 'color' || isCategorical) &&\n            activeAesType !== null &&\n            activeValue === item.value\n        \" :key=\"`${activeAesType}_${activeValue}`\" :targetRef=\"itemRefs[activeAesType][activeValue] as HTMLElement\"\n        :height=\"popupHeight\" @popup:close=\"onCloseForm\"\n      >\n        <div class=\"fixed-aes-list\" :class=\"{ 'fixed-aes-list__rows': false }\">\n          <FixedLineTypeList\n            v-if=\"activeAesType === 'lineType'\" v-model=\"item.lineType as LineType\" @update:modelValue=\"\n              (v: LineType) => props.onAesValueUpdate('lineShape', v)\n            \"\n          />\n          <FixedDotShapeList\n            v-if=\"activeAesType === 'dotShape'\" v-model=\"item.dotShape as DotShape\" @update:modelValue=\"\n              (v: DotShape) => props.onAesValueUpdate('dotShape', v)\n            \"\n          />\n          <FixedColorsList\n            v-if=\"activeAesType === 'color'\" v-model=\"item.color as string\"\n            :colors-list=\"selectedColorsList\" @update:modelValue=\"\n              (v: string) => props.onAesValueUpdate('color', v)\n            \"\n          />\n        </div>\n      </Popup>\n    </div>\n  </div>\n</template>\n\n<style module>\n.columnValue {\n  display: flex;\n  align-items: center;\n  padding-left: 12px;\n  padding-right: 2px;\n  margin-bottom: 6px;\n  background-color: var(--color-ic-00);\n  width: 100%;\n}\n\n.columnValue.withReorering {\n  padding-left: 4px;\n}\n\n.columnValue:last-child {\n  margin-bottom: 0;\n}\n\n.title {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-right: 8px;\n  line-height: 24px;\n}\n\n.color {\n  width: 18px;\n  height: 18px;\n  border-radius: 3px;\n}\n\n.aesGroup {\n  margin-left: auto;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n}\n\n.aes {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  background: var(--color-ic-00);\n  border-radius: var(--border-radius-control);\n}\n\n.aes.selected {\n  border: var(--contour-border-width) solid var(--contour-color);\n  box-shadow: var(--contour-box-shadow);\n  z-index: 1;\n}\n</style>\n"],"names":["props","__props","toggleForm","item","valueType","isThisFormOpen","selectedColorsList","computed","PALETTE_MAP","color","popupHeight","getPopupHeightForFixedAesList","FIXED_LINE_TYPES","FIXES_DOT_SHAPES","itemRefs","reactive","setRef","type","el","_createElementBlock","_normalizeClass","$style","_createElementVNode","_toDisplayString","_createBlock","_unref","PlTooltip","_cache","_createVNode","PlIcon24","v","_withModifiers","$event","_normalizeStyle","Popup","FixedLineTypeList","FixedDotShapeList","FixedColorsList"],"mappings":"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"}

package/dist/components/AesSettings/DiscreteRow.vue3.js

@@ -1,19 +1,21 @@
-(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._columnValue_7xzg0_2{display:flex;align-items:center;padding-left:12px;padding-right:2px;margin-bottom:6px;background-color:var(--color-ic-00);width:100%}._columnValue_7xzg0_2:last-child{margin-bottom:0}._title_7xzg0_16{overflow:hidden;text-overflow:ellipsis;margin-right:8px;line-height:24px}._color_7xzg0_23{width:18px;height:18px;border-radius:3px}._aesGroup_7xzg0_29{margin-left:auto;flex-shrink:0;display:flex;align-items:center}._aes_7xzg0_29{width:40px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:var(--color-ic-00);border-radius:var(--border-radius-control)}._aes_7xzg0_29._selected_7xzg0_47{border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:1}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
-const e = "_columnValue_7xzg0_2", o = "_title_7xzg0_16", t = "_color_7xzg0_23", s = "_aesGroup_7xzg0_29", _ = "_aes_7xzg0_29", l = "_selected_7xzg0_47", c = {
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode("._columnValue_1cp0f_2{display:flex;align-items:center;padding-left:12px;padding-right:2px;margin-bottom:6px;background-color:var(--color-ic-00);width:100%}._columnValue_1cp0f_2._withReorering_1cp0f_12{padding-left:4px}._columnValue_1cp0f_2:last-child{margin-bottom:0}._title_1cp0f_20{overflow:hidden;text-overflow:ellipsis;margin-right:8px;line-height:24px}._color_1cp0f_27{width:18px;height:18px;border-radius:3px}._aesGroup_1cp0f_33{margin-left:auto;flex-shrink:0;display:flex;align-items:center}._aes_1cp0f_33{width:40px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer;background:var(--color-ic-00);border-radius:var(--border-radius-control)}._aes_1cp0f_33._selected_1cp0f_51{border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:1}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
+const e = "_columnValue_1cp0f_2", c = "_withReorering_1cp0f_12", o = "_title_1cp0f_20", t = "_color_1cp0f_27", _ = "_aesGroup_1cp0f_33", s = "_aes_1cp0f_33", l = "_selected_1cp0f_51", n = {
   columnValue: e,
+  withReorering: c,
   title: o,
   color: t,
-  aesGroup: s,
-  aes: _,
+  aesGroup: _,
+  aes: s,
   selected: l
 };
 export {
-  _ as aes,
-  s as aesGroup,
+  s as aes,
+  _ as aesGroup,
   t as color,
   e as columnValue,
-  c as default,
+  n as default,
   l as selected,
-  o as title
+  o as title,
+  c as withReorering
 };
 //# sourceMappingURL=DiscreteRow.vue3.js.map

package/dist/components/AesSettings/DiscreteRow.vue3.js.map

@@ -1 +1 @@
-{"version":3,"file":"DiscreteRow.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"DiscreteRow.vue3.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}