@determaer/cmkd
Version:
Cognitive Maps of Knowledge Diagnosis (CMKD) interactive builder
1,088 lines (1,087 loc) • 39.1 kB
JavaScript
import { ref as b, computed as O, resolveComponent as W, createElementBlock as E, openBlock as i, Fragment as D, createVNode as A, createBlock as p, createCommentVNode as x, unref as l, nextTick as fe, onMounted as he, renderList as $, defineComponent as me, watch as J, withCtx as ae } from "vue";
const ge = b(800), ke = b(0), ye = b(0), we = b(0), T = b(0), pe = 5, xe = O(() => T.value * pe), je = b({
outerRadius: 0,
//внешний радиус окружности диаграммы
innerRadius: 0,
//внутренний радиус окружности диаграммы
labelRadius: 0,
//радиус расположения элементов
additionalLabelRadius: 0,
//радиус расположения дополнительных элементов
linesBtwElementsRadius: 0,
//радиус конечных точек для линий-соединителей
mergingPortsRadius: 0,
//радиус на котором начинается слияние портов элемента
sectorNameRadius: 0,
angles: [],
dividerAngles: []
}), Me = b(1), Re = O(() => T.value <= 10 ? 1 : T.value > 10 && T.value < 20 ? 0.9 : T.value >= 20 && T.value < 30 ? 0.8 : T.value >= 30 && T.value < 40 ? 0.75 : T.value >= 40 && T.value < 50 ? 0.7 : T.value >= 50 ? 0.65 : 1), Ce = b(), Se = b(), Oe = b(!0), Ie = b(!0), Ae = b(!1), Ne = b(!1), We = b(!1), ze = b(), Ee = b(), De = b([]), Xe = b([]), Ye = b([]), Be = b([]), P = () => ({
width: ge,
x: ke,
y: ye,
circleDivider: pe,
circleNum: we,
discNum: T,
pointNum: xe,
params: je,
scaleMultiplier: Me,
sizeMultiplier: Re,
position: Ce,
showSupportRect: Se,
showAdditionalInCircle: Oe,
defaultRect: Ie,
showScore: Ae,
showLight: Ne,
showSectorName: We,
oneLevel: ze,
showImportant: Ee,
labels: De,
labelsZero: Xe,
sectors: Ye,
lines: Be
}), Te = b(-1e3), Pe = b(-1e3), re = b({
isClicked: !1,
objLabelIn: null,
objLabelOut: null
}), ce = b({
isClicked: !1,
objLabel: null,
//содержит внутри объекта id элементов далее
prevLabels: null,
//стрелка к ним
nextLabels: null
//стрелка от них
}), ve = b({
isClicked: !1,
sector: null
}), Ze = b({
type: "",
objLabel: null,
prevLabels: [],
nextLabels: []
}), _ = () => ({
clickLayerX: Te,
clickLayerY: Pe,
clickedLine: re,
clickedElement: ce,
clickedSector: ve,
clickedInfo: Ze,
resetClicked: () => {
re.value = {
isClicked: !1,
objLabelIn: null,
objLabelOut: null
}, ce.value = {
isClicked: !1,
objLabel: null,
prevLabels: null,
nextLabels: null
}, ve.value = {
isClicked: !1,
sector: null
};
}
}), C = (a, e, r, t) => {
var n = t / 180 * Math.PI, v = a + r * Math.cos(n), u = e - r * Math.sin(n);
return [v, u];
}, $e = {
__name: "DrawSupportLabel",
props: {
angles: Object,
objLabel: Object
},
setup(a) {
const e = P(), r = _(), t = a, [n, v] = C(e.x, e.y, e.params.labelRadius, t.angles.labelAngle), [u, d] = C(e.x, e.y, e.params.additionalLabelRadius, t.angles.labelAngle), [o, j] = C(e.x, e.y, e.params.additionalLabelRadius + 2.5, t.angles.labelAngle + 0.6), [w, L] = C(e.x, e.y, e.params.additionalLabelRadius + 5, t.angles.labelAngle + 1.2), c = b(1), M = () => {
c.value = 1, r.clickedInfo.value = {
type: "supportLabel",
object: t.objLabel
};
}, k = () => {
c.value = 1.5;
}, m = () => {
c.value = 1;
}, S = O(() => t.objLabel.num > 2 || t.objLabel.num > 1 && !t.objLabel.isBase && !e.showAdditionalInCircle), f = O(() => t.objLabel.num > 3 || t.objLabel.num > 2 && !t.objLabel.isBase && !e.showAdditionalInCircle), h = O(() => e.sizeMultiplier * c.value * e.scaleMultiplier);
return (s, N) => {
const Y = W("v-line"), R = W("v-rect"), X = W("v-text");
return i(), E(D, null, [
A(Y, {
points: [l(n), l(v), l(u), l(d)],
stroke: "black"
}, null, 8, ["points"]),
f.value ? (i(), p(R, {
key: 0,
x: l(w),
y: l(L),
width: 36 * h.value,
height: 36 * h.value,
fill: "white",
stroke: "black",
strokeWidth: 1 * l(e).scaleMultiplier,
offset: {
x: 18 * h.value,
y: 18 * h.value
},
rotation: -a.angles.labelAngle,
onClick: M,
onMouseOver: k,
onMouseOut: m
}, null, 8, ["x", "y", "width", "height", "strokeWidth", "offset", "rotation"])) : x("", !0),
S.value ? (i(), p(R, {
key: 1,
x: l(o),
y: l(j),
width: 36 * h.value,
height: 36 * h.value,
fill: "white",
stroke: "black",
strokeWidth: 1 * l(e).scaleMultiplier,
offset: {
x: 18 * h.value,
y: 18 * h.value
},
rotation: -a.angles.labelAngle,
onClick: M,
onMouseOver: k,
onMouseOut: m
}, null, 8, ["x", "y", "width", "height", "strokeWidth", "offset", "rotation"])) : x("", !0),
A(R, {
x: l(u),
y: l(d),
width: 36 * h.value,
height: 36 * h.value,
fill: "white",
stroke: "black",
strokeWidth: 1 * l(e).scaleMultiplier,
offset: {
x: 18 * h.value,
y: 18 * h.value
},
rotation: -a.angles.labelAngle,
onClick: M,
onMouseOver: k,
onMouseOut: m
}, null, 8, ["x", "y", "width", "height", "strokeWidth", "offset", "rotation"]),
A(X, {
x: l(u),
y: l(d),
text: a.objLabel.typeText,
offset: {
x: 13 * h.value,
y: 10 * h.value
},
fontFamily: "Times New Roman",
fontSize: 22 * h.value,
fontStyle: a.objLabel.fontStyle,
onClick: M,
onMouseOver: k,
onMouseOut: m
}, null, 8, ["x", "y", "text", "offset", "fontSize", "fontStyle"]),
A(X, {
x: l(u),
y: l(d),
text: a.objLabel.numText,
offset: {
x: 1 * h.value,
y: 2 * h.value
},
fontFamily: "'Times New Roman'",
fontSize: 16 * h.value,
fontStyle: a.objLabel.fontStyle,
onClick: M,
onMouseOver: k,
onMouseOut: m
}, null, 8, ["x", "y", "text", "offset", "fontSize", "fontStyle"])
], 64);
};
}
}, le = {
__name: "DrawLabels",
props: {
objLabel: Object,
shadowed: Boolean
},
setup(a) {
const e = P(), r = _(), t = a, n = e.params.value.angles.find(
(U) => U.labelId === t.objLabel.index
), v = b(1), [u, d] = C(e.x.value, e.y.value, e.params.value.labelRadius, n.labelAngle), [o, j] = C(e.x.value, e.y.value, e.params.value.innerRadius, n.inAngle), [w, L] = C(e.x.value, e.y.value, e.params.value.innerRadius, n.outAngle), [c, M] = C(e.x.value, e.y.value, e.params.value.mergingPortsRadius, n.outAngle), [k, m] = C(e.x.value, e.y.value, e.params.value.mergingPortsRadius, n.inAngle), [S, f] = C(e.x.value, e.y.value, e.params.value.innerRadius - 1, n.inAngle), [h, s] = C(e.x.value, e.y.value, e.params.value.labelRadius + 2.5, n.labelAngle + 0.6), [N, Y] = C(e.x.value, e.y.value, e.params.value.labelRadius + 5, n.labelAngle + 1.2), R = () => {
v.value = 1;
let U = [], Q = [];
e.labelsZero.value.map((F) => {
F.connections.length !== 0 && F.connections.map((V) => {
t.objLabel.id === V && U.push(F);
});
}), t.objLabel.connections.map((F) => {
let V = e.labelsZero.value.find((q) => q.id === F);
V && Q.push(V);
}), r.resetClicked(), fe(() => {
r.clickedElement.value = {
isClicked: !0,
objLabel: t.objLabel,
prevLabels: Q,
nextLabels: U
}, r.clickedInfo.value = {
type: "label",
object: t.objLabel,
prevLabels: Q,
nextLabels: U
}, console.log(r.clickedInfo.value);
});
}, X = () => {
v.value = 1.5;
}, B = () => {
v.value = 1;
}, Z = O(() => {
if (e.showScore.value) {
if (t.objLabel.index > e.position.value)
return "yellow";
if (t.objLabel.grey)
return "lightgrey";
if (t.objLabel.score > 0)
return "green";
if (t.objLabel.score < 0)
return "red";
}
return "white";
}), te = O(() => !!(e.showSupportRect.value && (t.objLabel.num > 1 || !t.objLabel.isBase && !e.showAdditionalInCircle.value))), K = O(() => {
if (t.objLabel.type === "roundrect" && !e.defaultRect.value)
return 7;
}), y = O(() => e.sizeMultiplier.value * v.value * e.scaleMultiplier.value), z = O(() => t.objLabel.learnt ? "white" : Z.value), G = O(() => !!((t.objLabel.type === "rect" || t.objLabel.type === "roundrect" || e.defaultRect.value) && (e.showAdditionalInCircle.value || t.objLabel.isBase))), H = O(() => !!(t.objLabel.type === "circle" && !e.defaultRect.value && (e.showAdditionalInCircle.value || t.objLabel.isBase))), ne = O(() => t.objLabel.num > 1 && !e.showSupportRect.value && !e.showScore.value), ue = O(() => t.objLabel.num > 2 && !e.showSupportRect.value && !e.showScore.value), se = O(() => !!(e.showAdditionalInCircle.value || t.objLabel.isBase));
return (U, Q) => {
const F = W("v-line"), V = W("v-arrow"), q = W("v-rect"), ee = W("v-circle"), ie = W("v-text");
return i(), E(D, null, [
A(F, {
points: [l(o), l(j), l(k), l(m), l(u), l(d), l(c), l(M), l(w), l(L)],
stroke: "black",
strokeWidth: 2 * l(e).scaleMultiplier.value,
lineJoin: "round"
}, null, 8, ["points", "strokeWidth"]),
A(V, {
points: [l(S), l(f), l(o), l(j)],
stroke: "black",
fill: "black",
pointerWidth: 10 * l(e).sizeMultiplier.value * l(e).scaleMultiplier.value,
pointerLength: 10 * l(e).scaleMultiplier.value
}, null, 8, ["points", "pointerWidth", "pointerLength"]),
te.value ? (i(), p($e, {
key: 0,
angles: l(n),
objLabel: a.objLabel
}, null, 8, ["angles", "objLabel"])) : x("", !0),
ue.value && G.value ? (i(), p(q, {
key: 1,
x: l(N),
y: l(Y),
width: 36 * y.value,
height: 36 * y.value,
fill: z.value,
stroke: "black",
strokeWidth: 1 * l(e).scaleMultiplier.value,
offset: {
x: 18 * y.value,
y: 18 * y.value
},
rotation: -l(n).labelAngle,
cornerRadius: K.value,
onClick: R,
onMouseOver: X,
onMouseOut: B
}, null, 8, ["x", "y", "width", "height", "fill", "strokeWidth", "offset", "rotation", "cornerRadius"])) : x("", !0),
ne.value && G.value ? (i(), p(q, {
key: 2,
x: l(h),
y: l(s),
width: 36 * y.value,
height: 36 * y.value,
fill: "white",
stroke: "black",
strokeWidth: 1 * l(e).scaleMultiplier.value,
offset: {
x: 18 * y.value,
y: 18 * y.value
},
rotation: -l(n).labelAngle,
cornerRadius: K.value,
onСlick: R,
onMouseOver: X,
onMouseOut: B
}, null, 8, ["x", "y", "width", "height", "strokeWidth", "offset", "rotation", "cornerRadius"])) : x("", !0),
G.value ? (i(), p(q, {
key: 3,
x: l(u),
y: l(d),
width: 36 * y.value,
height: 36 * y.value,
fill: z.value,
stroke: "black",
strokeWidth: 1 * l(e).scaleMultiplier.value,
offset: {
x: 18 * y.value,
y: 18 * y.value
},
rotation: -l(n).labelAngle,
cornerRadius: K.value,
onClick: R,
onMouseOver: X,
onMouseOut: B
}, null, 8, ["x", "y", "width", "height", "fill", "strokeWidth", "offset", "rotation", "cornerRadius"])) : x("", !0),
l(e).showScore.value && G.value ? (i(), p(q, {
key: 4,
x: l(u),
y: l(d),
width: 36 * y.value,
height: 36 * y.value,
opacity: Z.value === "lightgrey" || a.shadowed ? 1 : Math.abs(a.objLabel.score),
fill: a.shadowed ? "white" : Z.value,
stroke: a.shadowed ? Z.value : "black",
strokeWidth: 1 * l(e).scaleMultiplier.value,
offset: {
x: 18 * y.value,
y: 18 * y.value
},
rotation: -l(n).labelAngle,
cornerRadius: K.value,
onClick: R,
onMouseOver: X,
onMouseOut: B
}, null, 8, ["x", "y", "width", "height", "opacity", "fill", "stroke", "strokeWidth", "offset", "rotation", "cornerRadius"])) : x("", !0),
H.value && ue.value ? (i(), p(ee, {
key: 5,
x: l(N),
y: l(Y),
radius: 20 * y.value,
fill: z.value,
stroke: '"black"',
strokeWidth: 1 * l(e).scaleMultiplier.value,
onClick: R,
onMouseOver: X,
onMouseOut: B
}, null, 8, ["x", "y", "radius", "fill", "strokeWidth"])) : x("", !0),
H.value && ne.value ? (i(), p(ee, {
key: 6,
x: l(h),
y: l(s),
radius: 20 * y.value,
fill: z.value,
stroke: "black",
strokeWidth: 1 * l(e).scaleMultiplier.value,
onClick: R,
onMouseOver: X,
onMouseOut: B
}, null, 8, ["x", "y", "radius", "fill", "strokeWidth"])) : x("", !0),
H.value ? (i(), p(ee, {
key: 7,
x: l(u),
y: l(d),
radius: 20 * y.value,
fill: z.value,
stroke: "black",
strokeWidth: 1 * l(e).scaleMultiplier.value,
onClick: R,
onMouseOver: X,
onMouseOut: B
}, null, 8, ["x", "y", "radius", "fill", "strokeWidth"])) : x("", !0),
l(e).showScore.value && H.value ? (i(), p(ee, {
key: 8,
x: l(u),
y: l(d),
radius: 20 * y.value,
fill: a.shadowed ? "white" : Z.value,
stroke: a.shadowed ? Z.value : "black",
strokeWidth: 1 * l(e).scaleMultiplier.value,
opacity: Math.abs(a.objLabel.score),
onClick: R,
onMouseOver: X,
onMouseOut: B
}, null, 8, ["x", "y", "radius", "fill", "stroke", "strokeWidth", "opacity"])) : x("", !0),
se.value ? (i(), p(ie, {
key: 9,
x: l(u),
y: l(d),
text: a.objLabel.typeText,
offset: {
x: 14 * y.value,
y: 10 * y.value
},
fontFamily: "Times New Roman",
fontSize: a.objLabel.typeText.length === 1 ? 22 * y.value : 15 * y.value,
fontStyle: a.objLabel.fontStyle,
onClick: R,
onMouseOver: X,
onMouseOut: B
}, null, 8, ["x", "y", "text", "offset", "fontSize", "fontStyle"])) : x("", !0),
se.value ? (i(), p(ie, {
key: 10,
x: l(u),
y: l(d),
text: a.objLabel.numText,
offset: {
x: 3 * y.value,
y: 4 * y.value
},
fontFamily: "Times New Roman",
fontSize: 16 * y.value,
fontStyle: a.objLabel.fontStyle,
onClick: R,
onMouseOver: X,
onMouseOut: B
}, null, 8, ["x", "y", "text", "offset", "fontSize", "fontStyle"])) : x("", !0)
], 64);
};
}
}, oe = {
__name: "DrawLineBtwElements",
props: {
objLabelOut: Object,
objLabelIn: Object
},
setup(a) {
const e = P(), r = _(), t = a, n = b(1), v = b(), u = O(() => {
if ((t.objLabelIn.prop !== 0 || t.objLabelOut.prop !== 0) && !e.oneLevel.value) return [5, 2];
}), d = O(() => e.showImportant.value && (t.objLabelOut.score < 0 || t.objLabelIn.score < 0 && t.objLabelOut.isBase) ? "red" : "black"), o = O(() => !(e.position.value && t.objLabelIn.index > e.position.value));
he(() => {
let c = 0;
e.discNum.value >= 50 && (c = 1);
let M, k, m, S, f, h;
t.objLabelIn.prop !== 0 || t.objLabelOut.prop !== 0 ? (h = e.params.value.innerRadius, f = e.params.value.linesBtwElementsRadius, m = e.params.value.angles.find((z) => z.labelId === t.objLabelOut.index).inAngle, S = e.params.value.angles.find((z) => z.labelId === t.objLabelIn.index).outAngle) : (f = e.params.value.innerRadius, h = e.params.value.linesBtwElementsRadius, m = e.params.value.angles.find((z) => z.labelId === t.objLabelOut.index).outAngle, S = e.params.value.angles.find((z) => z.labelId === t.objLabelIn.index).inAngle);
let s = Math.abs(m - S);
m >= 300 && (m = m - 360), S >= 300 && (S = S - 360);
let N;
if (s < 180) {
let z = (180 - s) / 10;
s = s / 250, N = 10 * z * e.scaleMultiplier.value + 50 * c * e.scaleMultiplier.value, M = m + s, k = S - s;
}
if (s >= 180) {
let z = (180 - Math.abs(s - 360)) / 10;
s = s / 250, N = 10 * z * e.scaleMultiplier.value + 50 * c * e.scaleMultiplier.value, M = m - s, k = S + s;
}
const [Y, R] = C(e.x.value, e.y.value, N, M), [X, B] = C(e.x.value, e.y.value, N, k), [Z, te] = C(e.x.value, e.y.value, f, m), [K, y] = C(e.x.value, e.y.value, h, S);
v.value = [Z, te, Y, R, X, B, K, y];
});
const j = () => {
n.value = 1, r.resetClicked(), fe(() => {
r.clickedLine.value = {
isClicked: !0,
objLabelIn: t.objLabelIn,
objLabelOut: t.objLabelOut
}, r.clickedInfo.value = {
type: "line",
object: {
objLabelIn: t.objLabelIn,
objLabelOut: t.objLabelOut
}
};
});
}, w = () => {
n.value = 3;
}, L = () => {
n.value = 1;
};
return (c, M) => {
const k = W("v-line");
return o.value ? (i(), p(k, {
key: 0,
bezier: !0,
points: v.value,
stroke: d.value,
strokeWidth: 2.2 * n.value * l(e).scaleMultiplier.value,
dash: u.value,
onClick: j,
onMouseOver: w,
onMouseOut: L
}, null, 8, ["points", "stroke", "strokeWidth", "dash"])) : x("", !0);
};
}
}, Le = {
__name: "DrawSector",
props: {
sector: Object,
bgColor: String,
shadowed: Boolean,
opacity: Number
},
setup(a) {
const e = P(), r = _(), t = a, n = b(t.bgColor), v = b(1);
let u = t.sector.sEnd - t.sector.sStart, d = 0;
t.sector.sEnd - u / 2 > 90 && t.sector.sEnd - u / 2 < 270 && (d = 1);
const o = () => {
e.oneLevel.value && (r.clickedInfo.value = {
type: "sector",
object: t.sector
}, r.clickedSector.value = {
isClicked: !0,
sector: t.sector
});
};
let j = 0;
e.showSupportRect.value && (j = 50);
const [w, L] = C(e.x.value, e.y.value, e.params.value.labelRadius + 50 * t.sector.sLevel * e.scaleMultiplier, 90 + (t.sector.sEnd - u / 2)), [c, M] = C(e.x.value, e.y.value, e.params.value.sectorNameRadius + j, 90 + (t.sector.sEnd - u / 2));
let k = "white";
t.sector.objLabel && (t.sector.objLabel.score > 0 && (k = "green"), t.sector.objLabel.score < 0 && (k = "red"));
const m = O(() => !!(t.sector.objLabel && t.sector.objLabel.isLabel)), S = O(() => !!(t.sector.objLabel && !t.sector.objLabel.isLabel)), f = O(() => e.sizeMultiplier.value * v.value * e.scaleMultiplier.value);
return (h, s) => {
const N = W("v-arc"), Y = W("v-text"), R = W("v-rect");
return i(), E(D, null, [
A(N, {
x: l(e).x.value,
y: l(e).y.value,
angle: 360 - l(u),
rotation: -90 - a.sector.sStart,
outerRadius: l(e).params.value.outerRadius + 50 * a.sector.sLevel * l(e).scaleMultiplier.value,
innerRadius: l(e).params.value.innerRadius + 50 * a.sector.sLevel * l(e).scaleMultiplier.value,
fill: n.value,
stroke: "black",
opacity: a.opacity,
clockwise: !0,
strokeWidth: 2 * l(e).scaleMultiplier.value,
onClick: o,
onMouseOver: s[0] || (s[0] = () => {
n.value = "gray";
}),
onMouseOut: s[1] || (s[1] = () => {
n.value = a.bgColor;
})
}, null, 8, ["x", "y", "angle", "rotation", "outerRadius", "innerRadius", "fill", "opacity", "strokeWidth"]),
l(e).showSectorName.value ? (i(), p(Y, {
key: 0,
x: l(c),
y: l(M),
text: a.sector.shortname,
offset: {
x: 20 * f.value,
y: 10 * f.value
},
fontFamily: "Times New Roman",
fontSize: 22 * f.value,
rotation: -(a.sector.sEnd - l(u) / 2) - 180 * l(d),
onClick: o,
onMouseOver: s[2] || (s[2] = () => {
n.value = "gray";
}),
onMouseOut: s[3] || (s[3] = () => {
n.value = a.bgColor;
})
}, null, 8, ["x", "y", "text", "offset", "fontSize", "rotation"])) : x("", !0),
m.value ? (i(), p(R, {
key: 1,
x: l(w),
y: l(L),
width: 36 * f.value,
height: 36 * f.value,
fill: "white",
stroke: "black",
strokeWidth: 1 * l(e).scaleMultiplier.value,
offset: {
x: 18 * f.value,
y: 18 * f.value
},
rotation: -(a.sector.sEnd - l(u) / 2),
onClick: o,
onMouseOver: s[4] || (s[4] = () => {
v.value = 1.5;
}),
onMouseOut: s[5] || (s[5] = () => {
v.value = 1;
})
}, null, 8, ["x", "y", "width", "height", "strokeWidth", "offset", "rotation"])) : x("", !0),
m.value && l(e).showScore.value ? (i(), p(R, {
key: 2,
x: l(w),
y: l(L),
width: 36 * f.value,
height: 36 * f.value,
opacity: Math.abs(a.sector.objLabel.score),
fill: a.shadowed ? "white" : l(k),
stroke: a.shadowed ? l(k) : "black",
strokeWidth: 1 * l(e).scaleMultiplier.value,
offset: {
x: 18 * f.value,
y: 18 * f.value
},
rotation: -(a.sector.sEnd - l(u) / 2),
onClick: o,
onMouseOver: s[6] || (s[6] = () => {
v.value = 1.5;
}),
onMouseOut: s[7] || (s[7] = () => {
v.value = 1;
})
}, null, 8, ["x", "y", "width", "height", "opacity", "fill", "stroke", "strokeWidth", "offset", "rotation"])) : x("", !0),
m.value ? (i(), p(Y, {
key: 3,
x: l(w),
y: l(L),
text: a.sector.objLabel.typeText,
offset: {
x: 13 * f.value,
y: 10 * f.value
},
fontFamily: "Times New Roman",
fontSize: 22 * f.value,
fontStyle: a.sector.objLabel.fontStyle,
onClick: o,
onMouseOver: s[8] || (s[8] = () => {
v.value = 1.5;
}),
onMouseOut: s[9] || (s[9] = () => {
v.value = 1;
})
}, null, 8, ["x", "y", "text", "offset", "fontSize", "fontStyle"])) : x("", !0),
m.value ? (i(), p(Y, {
key: 4,
x: l(w),
y: l(L),
text: a.sector.objLabel.numText,
offset: {
x: 1 * f.value,
y: 2 * f.value
},
fontFamily: "Times New Roman",
fontSize: 16 * f.value,
fontStyle: a.sector.objLabel.fontStyle,
onClick: o,
onMouseOver: s[10] || (s[10] = () => {
v.value = 1.5;
}),
onMouseOut: s[11] || (s[11] = () => {
v.value = 1;
})
}, null, 8, ["x", "y", "text", "offset", "fontSize", "fontStyle"])) : x("", !0),
S.value ? (i(), p(Y, {
key: 5,
x: l(w),
y: l(L),
text: a.sector.objLabel.typeText + a.sector.objLabel.numText,
offset: {
x: 20 * f.value,
y: 10 * f.value
},
fontFamily: "Times New Roman",
fontSize: 22 * f.value,
rotation: -(a.sector.sEnd - l(u) / 2) - 180 * l(d),
fontStyle: a.sector.objLabel.fontStyle,
onClick: o,
onMouseOver: s[12] || (s[12] = () => {
n.value = "gray";
}),
onMouseOut: s[13] || (s[13] = () => {
n.value = a.bgColor;
})
}, null, 8, ["x", "y", "text", "offset", "fontSize", "rotation", "fontStyle"])) : x("", !0)
], 64);
};
}
}, de = {
__name: "DrawAngledLine",
props: {
startRadius: Number,
endRadius: Number,
angle: Number,
color: String,
width: Number
},
setup(a) {
const e = P(), r = a, [t, n] = C(e.x.value, e.y.value, r.startRadius, r.angle), [v, u] = C(e.x.value, e.y.value, r.endRadius, r.angle);
return (d, o) => {
const j = W("v-line");
return i(), p(j, {
points: [l(t), l(n), l(v), l(u)],
stroke: a.color,
strokeWidth: a.width
}, null, 8, ["points", "stroke", "strokeWidth"]);
};
}
}, _e = {
__name: "TypeDivider",
props: {
startRadius: Number,
endRadius: Number,
angle: Number
},
setup(a) {
const e = P();
return (r, t) => (i(), E(D, null, [
A(de, {
startRadius: a.startRadius,
endRadius: a.endRadius,
angle: a.angle,
color: "black",
width: 5 * l(e).scaleMultiplier.value
}, null, 8, ["startRadius", "endRadius", "angle", "width"]),
A(de, {
startRadius: a.startRadius - 2,
endRadius: a.endRadius + 2,
angle: a.angle,
color: "white",
width: 2 * l(e).scaleMultiplier.value
}, null, 8, ["startRadius", "endRadius", "angle", "width"])
], 64));
}
}, Fe = {
__name: "DrawBase",
props: {
bgColor: String,
bgColor2: String
},
setup(a) {
const e = P();
return (r, t) => (i(), E(D, null, [
(i(!0), E(D, null, $(l(e).sectors.value, (n) => (i(), p(Le, {
sector: n,
bgColor: n.sLevel % 2 === 0 ? a.bgColor : a.bgColor2
}, null, 8, ["sector", "bgColor"]))), 256)),
(i(!0), E(D, null, $(l(e).params.value.dividerAngles, (n) => (i(), p(_e, {
startRadius: l(e).params.value.innerRadius,
endRadius: l(e).params.value.outerRadius + 50 * l(e).circleNum.value * l(e).scaleMultiplier.value,
angle: n
}, null, 8, ["startRadius", "endRadius", "angle"]))), 256))
], 64));
}
}, Ke = {
__name: "DrawClickedElement",
setup(a) {
const e = _(), r = [], t = [];
return r.push({
label: e.clickedElement.value.objLabel,
shadowed: !0
}), e.clickedElement.value.nextLabels.map((n) => {
r.push({
label: n,
shadowed: !1
}), t.push({
objLabelIn: e.clickedElement.value.objLabel,
objLabelOut: n
});
}), e.clickedElement.value.prevLabels.map((n) => {
r.push({
label: n,
shadowed: !1
}), t.push({
objLabelIn: n,
objLabelOut: e.clickedElement.value.objLabel
});
}), (n, v) => (i(), E(D, null, [
(i(), E(D, null, $(t, (u) => A(oe, {
objLabelIn: u.objLabelIn,
objLabelOut: u.objLabelOut
}, null, 8, ["objLabelIn", "objLabelOut"])), 64)),
(i(), E(D, null, $(r, (u) => A(le, {
objLabel: u.label,
shadowed: u.shadowed
}, null, 8, ["objLabel", "shadowed"])), 64))
], 64));
}
}, Ue = {
__name: "DrawClickedLine",
setup(a) {
const e = _();
return (r, t) => (i(), E(D, null, [
A(le, {
objLabel: l(e).clickedLine.value.objLabelIn
}, null, 8, ["objLabel"]),
A(le, {
objLabel: l(e).clickedLine.value.objLabelOut
}, null, 8, ["objLabel"]),
A(oe, {
objLabelIn: l(e).clickedLine.value.objLabelIn,
objLabelOut: l(e).clickedLine.value.objLabelOut
}, null, 8, ["objLabelIn", "objLabelOut"])
], 64));
}
}, Ve = {
__name: "DrawClickedSector",
setup(a) {
const e = _();
return (r, t) => (i(), p(Le, {
sector: l(e).clickedSector.value.sector,
bgColor: "gray",
opacity: 0.5
}, null, 8, ["sector"]));
}
}, qe = {
__name: "DrawArrows",
setup(a) {
const e = P(), r = b([]), t = b([]);
return e.labelsZero.value.map((n, v) => {
if (n.arrowIn) {
let u = e.params.value.angles.find(
(M) => M.labelId === n.index
), d = u.arrowAngle - 1, o = u.arrowAngle, [j, w] = C(e.x.value, e.y.value, e.params.value.labelRadius, d), [L, c] = C(e.x.value, e.y.value, e.params.value.labelRadius, o);
(e.showAdditionalInCircle.value || n.isBase) && r.value.push({
startX: j,
startY: w,
endX: L,
endY: c
});
}
if (n.arrowOut) {
let u = e.params.value.angles.find(
(o) => o.labelId === n.index
).labelAngle, d = e.params.value.angles.find(
(o) => o.labelId === e.labelsZero.value[v + 1].index
).labelAngle;
t.value.push({
angle: u - d,
rotation: -u
});
}
}), (n, v) => {
const u = W("v-arrow"), d = W("v-arc");
return i(), E(D, null, [
t.value.length > 0 ? (i(!0), E(D, { key: 0 }, $(r.value, (o) => (i(), p(u, {
points: [o.startX, o.startY, o.endX, o.endY],
stroke: "black",
fill: "black",
pointerWidth: 7 * l(e).sizeMultiplier.value * l(e).scaleMultiplier.value,
pointerLength: 7 * l(e).scaleMultiplier.value
}, null, 8, ["points", "pointerWidth", "pointerLength"]))), 256)) : x("", !0),
t.value.length > 0 ? (i(!0), E(D, { key: 1 }, $(t.value, (o) => (i(), p(d, {
x: l(e).x.value,
y: l(e).y.value,
stroke: "black",
angle: o.angle,
innerRadius: l(e).params.value.labelRadius,
outerRadius: l(e).params.value.labelRadius,
clockwise: !0,
rotation: o.rotation,
strokeWidth: 2 * l(e).scaleMultiplier.value
}, null, 8, ["x", "y", "angle", "innerRadius", "outerRadius", "rotation", "strokeWidth"]))), 256)) : x("", !0)
], 64);
};
}
}, g = P(), be = () => {
var d;
const a = [], e = [], r = [], t = [], n = [], v = [];
for (let o = 1; o <= g.discNum.value * 2; o = o + 2)
a.push(o * (360 / (g.discNum.value * 2)) + 90);
for (let o = 1; o < g.pointNum.value; o = o + g.circleDivider) {
let j = (o + 1) * (360 / g.pointNum.value) + 90, w = (o + 2) * (360 / g.pointNum.value) + 90, L = j - 2 * g.sizeMultiplier.value;
t.push(L), e.push(w), r.push(j);
}
for (let o = 0; o < g.discNum.value; o = o + 1)
v.push({
labelId: g.labelsZero.value[o].index,
inAngle: e[o],
outAngle: r[o],
labelAngle: a[o],
arrowAngle: t[o]
});
n.push(90);
for (let o = 0; o < g.discNum.value - 1; o = o + 1)
g.labelsZero.value[o].prop !== g.labelsZero.value[o + 1].prop && n.push(
a[o] + (a[o + 1] - a[o]) / 2
);
const u = g.discNum.value < 50 ? 0 : 50;
g.params.value = {
outerRadius: (250 + u) * g.scaleMultiplier.value,
innerRadius: (200 + u) * g.scaleMultiplier.value,
labelRadius: (225 + u) * g.scaleMultiplier.value,
additionalLabelRadius: (285 + u) * g.scaleMultiplier.value,
linesBtwElementsRadius: (190 + u) * g.scaleMultiplier.value,
mergingPortsRadius: (212 + u) * g.scaleMultiplier.value,
sectorNameRadius: (265 + u) * g.scaleMultiplier.value,
dividerAngles: n,
angles: v
};
for (let o = g.circleNum.value; o >= 0; o = o - 1) {
const j = [], w = [];
let L = 0;
if (j.push(0), g.params.value.angles.length > 0)
if (o == 0) {
let c, M;
g.params.value.angles.length > 0 && g.labelsZero.value.map((k) => {
var m, S, f;
if (k.secStart && (c = k.index), k.secEnd) {
let h = k.index;
if (h != g.labels.value.length - 1) {
let s = (m = g.params.value.angles.find((R) => R.labelId === h + 1)) == null ? void 0 : m.labelAngle, N = (S = g.params.value.angles.find((R) => R.labelId === h)) == null ? void 0 : S.labelAngle, Y = N + (s - N) / 2;
j.push(Y - 90);
}
M = k.index, w.push({
sStartLID: c,
sEndLID: M,
upperID: (f = k.object) == null ? void 0 : f.parent_id,
sLevel: 0,
shortname: k.sectorName,
object: k
}), c = null;
}
}), j.push(360);
} else
g.labels.value.map((c) => {
if (c.level == o && c.secLength) {
const M = L + 360 * (c.secLength / g.discNum.value);
j.push(M), L = M, w.push({
sStartLID: c.index,
sEndLID: c.index,
sLevel: o,
object: c,
upperID: c.object.parent_id
});
}
});
if (w.length > 0)
for (let c = 0; c < j.length - 1; c = c + 1)
g.sectors.value.push({
sStart: j[c],
sEnd: j[c + 1],
sStartLID: w[c].sStartLID,
sEndLID: w[c].sEndLID,
sLevel: w[c].sLevel,
object: (d = w[c]) == null ? void 0 : d.objLabel,
shortname: w[c].shortname ? w[c].shortname : null
});
}
}, I = P(), Je = () => {
let a = 0, e = 0, r = [];
for (let t = 0; t < I.labels.value.length; t = t + 1)
I.labels.value[t].level > e && (e = I.labels.value[t].level), I.labels.value[t].level == 0 && (a = a + 1, r.push(I.labels.value[t]));
I.circleNum.value = e, I.oneLevel.value = I.circleNum.value == 0, I.oneLevel && (I.showSectorName.value = !0), I.discNum.value = a, I.labelsZero.value = r, I.labelsZero.value.map((t, n) => {
t.connections.length !== 0 && t.connections.map((v) => {
const u = I.labels.value.find((d) => d.id == v);
if (u && (I.showLight && u.score < 0 || t.score < 0 && t.isBase == !0 || !I.showLight || I.oneLevel && t.drawAnyCase)) {
const d = I.labelsZero.value.find((o) => o.id === v);
d && I.lines.value.push({
objLabelOut: I.labelsZero.value[n],
objLabelIn: d
});
}
});
});
}, He = /* @__PURE__ */ me({
__name: "CMKD",
props: {
width: {
type: Number,
default: 800
},
drawingMode: {
type: String,
default: "default"
},
labels: {
type: Array,
required: !0
},
position: {
type: Number,
default: 9999
},
showSupportRect: {
type: Boolean,
default: !1
},
showImportant: {
type: Boolean,
default: !1
}
},
emits: ["clicked"],
setup(a, { expose: e, emit: r }) {
const t = P(), { clickedElement: n, clickedInfo: v, clickedLine: u, clickedSector: d, clickLayerX: o, clickLayerY: j, resetClicked: w } = _(), L = a;
e({
downloadURI: k
});
const c = r, M = b();
J(
() => L.width,
() => {
t.width.value = L.width, t.scaleMultiplier.value = t.width.value / 800, t.x.value = L.width / 2, t.y.value = L.width / 2;
},
{ immediate: !0 }
), J(
() => L,
() => {
t.position.value = L.position, t.showImportant.value = L.showImportant, t.showSupportRect.value = L.showSupportRect, t.labels.value = L.labels;
},
{ immediate: !0, deep: !0 }
), J(
() => {
L.drawingMode;
},
() => {
L.drawingMode == "default" && (t.showAdditionalInCircle.value = !0, t.showScore.value = !1, t.defaultRect.value = !1, t.showLight.value = !1), L.drawingMode == "score" && (t.showAdditionalInCircle.value = !1, t.showScore.value = !0, t.defaultRect.value = !1, t.showLight.value = !1), L.drawingMode == "light" && (t.showAdditionalInCircle.value = !1, t.showScore.value = !0, t.defaultRect.value = !1, t.showLight.value = !0);
},
{ immediate: !0 }
), J(
() => {
t.scaleMultiplier, t.sizeMultiplier;
},
() => {
be();
},
{ immediate: !0 }
), J(
() => v.value,
() => {
c("clicked", v.value);
}
), he(() => {
Je(), be(), console.log(t);
});
function k() {
var m = document.createElement("a");
m.download = "stage.png", m.href = l(M).getStage().toDataURL({ pixelRatio: 10 }), document.body.appendChild(m), m.click(), document.body.removeChild(m);
}
return (m, S) => {
const f = W("v-rect"), h = W("v-layer"), s = W("v-stage");
return l(t).params.value.angles.length > 0 ? (i(), p(s, {
key: 0,
width: l(t).width.value,
height: l(t).width.value,
ref_key: "stageRef",
ref: M
}, {
default: ae(() => [
A(h, null, {
default: ae(() => [
A(f, {
fill: "white",
x: l(t).x.value - l(t).width.value,
y: l(t).y.value - l(t).width.value,
width: l(t).width.value * l(t).scaleMultiplier.value * 3,
height: l(t).width.value * l(t).scaleMultiplier.value * 3
}, null, 8, ["x", "y", "width", "height"]),
A(Fe, {
bgColor: "#dad0f1",
bgColor2: "#e8e8e8"
}),
(i(!0), E(D, null, $(l(t).lines.value, (N) => (i(), p(oe, {
objLabelOut: N.objLabelOut,
objLabelIn: N.objLabelIn
}, null, 8, ["objLabelOut", "objLabelIn"]))), 256)),
A(qe),
(i(!0), E(D, null, $(l(t).labelsZero.value, (N) => (i(), p(le, { objLabel: N }, null, 8, ["objLabel"]))), 256))
]),
_: 1
}),
l(n).isClicked || l(u).isClicked || l(d).isClicked ? (i(), p(h, { key: 0 }, {
default: ae(() => [
A(f, {
fill: "white",
x: l(o),
y: l(j),
width: l(t).width.value * l(t).scaleMultiplier.value * 3,
height: l(t).width.value * l(t).scaleMultiplier.value * 3,
onClick: S[0] || (S[0] = () => {
l(w)();
}),
opacity: 0.6
}, null, 8, ["x", "y", "width", "height"]),
l(n).isClicked ? (i(), p(Ke, { key: 0 })) : x("", !0),
l(u).isClicked ? (i(), p(Ue, { key: 1 })) : x("", !0),
l(d).isClicked ? (i(), p(Ve, {
key: 2,
bgColor: "gray"
})) : x("", !0)
]),
_: 1
})) : x("", !0)
]),
_: 1
}, 8, ["width", "height"])) : x("", !0);
};
}
});
export {
He as CMKD
};