@milaboratories/graph-maker 1.2.5 → 1.2.7

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

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

package/dist/components/AesSettings/DiscreteRow.js

@@ -0,0 +1,7 @@
+import e from "../../_virtual/_plugin-vue_export-helper.js";
+import t from "./DiscreteRow.vue2.js";
+import n from "./DiscreteRow.style.js";
+var r = /* @__PURE__ */ e(t, [["__cssModules", { $style: n }]]);
+export { r as default };
+
+//# sourceMappingURL=DiscreteRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DiscreteRow.js","names":[],"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\" :title=\"item.text\">{{ 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"],"mappings":""}

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

@@ -0,0 +1,12 @@
+import './DiscreteRow.vue.css';var e = {
+	columnValue: "_columnValue_1cp0f_2",
+	withReorering: "_withReorering_1cp0f_12",
+	title: "_title_1cp0f_20",
+	color: "_color_1cp0f_27",
+	aesGroup: "_aesGroup_1cp0f_33",
+	aes: "_aes_1cp0f_33",
+	selected: "_selected_1cp0f_51"
+};
+export { e as default };
+
+//# sourceMappingURL=DiscreteRow.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DiscreteRow.vue_vue_type_style_index_0_lang.module.js","names":[],"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\" :title=\"item.text\">{{ 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"],"mappings":""}

package/dist/components/AesSettings/DiscreteRow.vue.css

@@ -0,0 +1 @@
+._columnValue_1cp0f_2{background-color:var(--color-ic-00);align-items:center;width:100%;margin-bottom:6px;padding-left:12px;padding-right:2px;display:flex}._columnValue_1cp0f_2._withReorering_1cp0f_12{padding-left:4px}._columnValue_1cp0f_2:last-child{margin-bottom:0}._title_1cp0f_20{text-overflow:ellipsis;margin-right:8px;line-height:24px;overflow:hidden}._color_1cp0f_27{border-radius:3px;width:18px;height:18px}._aesGroup_1cp0f_33{flex-shrink:0;align-items:center;margin-left:auto;display:flex}._aes_1cp0f_33{cursor:pointer;background:var(--color-ic-00);border-radius:var(--border-radius-control);justify-content:center;align-items:center;width:40px;height:40px;display:flex}._aes_1cp0f_33._selected_1cp0f_51{border:var(--contour-border-width) solid var(--contour-color);box-shadow:var(--contour-box-shadow);z-index:1}