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