ep-lib-ts 1.1.8 → 1.1.10

package/dist/components/interactions/EpAssociation.vue.js

@@ -2,7 +2,6 @@ import { defineComponent, computed, ref, createElementBlock, openBlock, Fragment
 import { useVueFlow, VueFlow } from "@vue-flow/core";
 import { useCreateUid } from "../../composables/useCreateUid.js";
 import _sfc_main$1 from "../tools/AssociationNode.vue2.js";
-/* empty css                            */
 const _hoisted_1 = {
   key: 0,
   class: "p-2 text-center text-sm text-neutral-300"
@@ -239,8 +238,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }),
             onConnect,
             id: unref(id),
-            "max-zoom": 1,
-            "min-zoom": 1,
             nodes: nodes.value,
             edges: _ctx.interactive ? edges.value : correctEdges.value,
             "nodes-draggable": false,

package/dist/components/interactions/EpAssociation.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"EpAssociation.vue.js","sources":["../../../src/components/interactions/EpAssociation.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed } from 'vue'\nimport type { Node, Edge, Connection, EdgeMouseEvent } from '@vue-flow/core'  \nimport { VueFlow, useVueFlow } from '@vue-flow/core'\nimport type { EpAssociationProps } from \"~/types/interactions/EpAssociation\";\nimport { useCreateUid } from '~/composables/useCreateUid';\n\nimport AssociationNode from '../tools/AssociationNode.vue';\nimport type { LeftOption, RightOption } from '~/types/Association';\n\nconst props = withDefaults(defineProps<EpAssociationProps>(), {\n    interactive: false,\n    mustTry: false,\n    random: false,\n});\n\nconst id = useCreateUid();\n\nconst { fitView, onEdgeDoubleClick } = useVueFlow({ id: id })\n\nconst shuffle = (tab: any) => {\n  for (let i = tab.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    [tab[i], tab[j]] = [tab[j], tab[i]];\n  }\n  return tab;\n}\n\n\nconst leftNodes = computed<LeftOption[]>(() => {\n    if(props.random) {\n        return shuffle([...props.leftOptions]);\n    }\n    return props.leftOptions;\n});\n\nconst rightNodes = computed<RightOption[]>(() => {\n    if(props.random) {\n        return shuffle([...props.rightOptions]);\n    }\n    return props.rightOptions;\n});\n\n// these are our nodes\nconst initialNodes = computed<Node[]>(() => {\n    let yLeft = 50;\n    let yRight = 50;\n    const GAP = 40;\n\n    let left: Node [] = leftNodes.value.map((option, idx) => {\n        const h = option.height ?? 100;\n        let result = {\n            id: option.uid,\n            type: 'association',\n            position: { x: 50, y: yLeft },\n            data: { \n                label: option.text,\n                index: idx,\n                left: true\n            }\n        } as Node\n\n        yLeft += h + GAP;\n        return result;\n\n    });\n\n    let right: Node [] = rightNodes.value.map((option, idx) => {\n        const h = option.height ?? 100;\n        const result = {\n            id: option.uid,\n            type: 'association',\n            position: { x: 550, y: yRight },\n            data: { \n                label: option.text,\n                index: idx,\n                left: false\n            }\n        } as Node\n\n        yRight += h + GAP;\n        return result;\n    });\n\n    return [...left, ...right];\n})\n\nconst nodes = ref<Node[]>(initialNodes.value)\n\n// The correct edges\nconst correctEdges = computed<Edge[]>(() => {\n    return leftNodes.value.flatMap((option) => {\n        return option.answers.map((answer) => {\n            return {\n                id: 'e' + option.uid + '->' + answer,\n                type: 'straight',\n                source: option.uid,\n                target: answer,\n                animated: false,\n                style: {\n                    strokeWidth: 3,\n                },\n                updatable: false\n            }\n        });\n    })\n});\n\nconst edges = ref<Edge[]>([]);\n\nconst trying = ref(true);\nconst solution = ref(false);\nconst validating = ref(false);\n\nconst validate = () => {\n    trying.value = false;\n    solution.value = false;\n    validating.value = true;\n\n    // Put the right colors for the validation\n    let incorrectNodes = new Set<string>();\n\n    // Check edges\n    edges.value = edges.value.map((edge: Edge) => {\n        let inside = false;\n        for(let correctEdge of correctEdges.value) {\n            if(edge.id == correctEdge.id)\n                inside = true;\n        }\n        if(!inside) {\n            incorrectNodes.add(edge.source);\n            incorrectNodes.add(edge.target);\n        }\n        return {\n            ...edge,\n            style: {\n                ...edge.style,\n                stroke: inside ? '#16a34a' : '#dc2626'\n            }\n        }\n    });\n\n    for(let correctEdge of correctEdges.value) {\n        let inside = false;\n        for(let edge of edges.value) {\n            if(edge.id == correctEdge.id)\n                inside = true;\n        }\n        if(!inside) {\n            incorrectNodes.add(correctEdge.source);\n            incorrectNodes.add(correctEdge.target);\n        }\n    }\n\n    // Check Nodes\n    nodes.value = nodes.value.map((node: Node) => {\n        console.log('here')\n        if(incorrectNodes.has(node.id)) \n            return {\n                ...node,\n                data: {\n                    ...node.data,\n                    mode: 'wrong'\n                }\n            }\n        else\n            return {\n                ...node,\n                data: {\n                    ...node.data,\n                    mode: 'correct'\n                }\n            }\n    })\n}\n\nconst retry = () => {\n    trying.value = true;\n    solution.value = false;\n    validating.value = false;\n\n    edges.value = [];\n    nodes.value = nodes.value.map((node: Node) => { \n        return {\n            ...node,\n            data: {\n                ...node.data,\n                mode: 'neutral'\n            }\n        }\n    });\n}\n\nconst showAnswer = () => {\n    fitView();\n\n    solution.value = true;\n    trying.value = false;\n    validating.value = false;\n\n    edges.value = correctEdges.value;\n    nodes.value = nodes.value.map((node: Node) => { \n        return {\n            ...node,\n            data: {\n                ...node.data,\n                mode: 'neutral'\n            }\n        }\n    });\n}\n\nconst onConnect = (connection: Connection) => {\n    let newEdge: Edge = {\n        id: 'e' + connection.source + '->' + connection.target,\n        type: 'straight',\n        source: connection.source,\n        target: connection.target,\n        animated: false,\n        updatable: false,\n        style: {\n            strokeWidth: 3,\n        },\n    }\n    edges.value = [...edges.value, newEdge]\n}\n\n\nonEdgeDoubleClick((event: EdgeMouseEvent) => {\n    if(trying.value) {\n        edges.value = edges.value.filter((edge: Edge) => {\n            return edge.id !== event.edge.id\n        })\n    }\n    console.log('edge double clicked', event)\n})\n\nconst computedHeight = computed(() => {\n    let GAP = 40;\n    let heightLeft = GAP;\n    let heightRight = GAP;\n\n    leftNodes.value.forEach((option) => {\n        heightLeft += (option.height ?? 100) + GAP;\n    });\n\n    rightNodes.value.forEach((option) => {\n        heightRight += (option.height ?? 100) + GAP;\n    });\n\n    return Math.max(heightLeft, heightRight);\n})\n\n</script>\n\n<template>\n    <div class=\"border-2 rounded\" :style=\"{ width: '90%', height: computedHeight + 'px', margin: 'auto' }\">\n        <VueFlow \n            @pane-ready=\"() => { fitView() }\"\n            @connect = \"onConnect\"\n\n            :id=\"id\"\n            :max-zoom=\"1\" \n            :min-zoom=\"1\"\n            :nodes=\"nodes\" \n            :edges=\"(interactive)? edges : correctEdges\"\n            :nodes-draggable=\"false\"\n            :pan-on-drag=\"false\"\n            :nodes-connectable=\"interactive && trying\"\n            :zoom-on-scroll=\"false\"\n            :zoom-on-pinch=\"false\"\n            :zoom-on-double-click=\"false\"\n        >\n            <!-- bind the custom node type to the component -->\n            <template #node-association=\"AssociationNodeProps\">\n                <AssociationNode v-bind=\"AssociationNodeProps\" />\n            </template>\n        </VueFlow>\n    </div>\n    <div class=\"p-2 text-center text-sm text-neutral-300\" v-if=\"interactive\">\n        <p v-if=\"trying\">Vous pouvez double-clicker sur une arête pour la supprimer.</p>\n        <p v-if=\"validating\">Les éléments en verts sont corrects et ceux en rouge sont incorrects.</p>\n    </div>\n    <div class=\"flex items-center justify-around\" v-if=\"interactive\">\n        <button\n            class=\"bg-blue-500 text-white px-3 py-2 m-2 rounded-md text-center\"\n            @click=\"(trying)? validate() : retry()\"\n        >\n            {{(trying)? 'Valider' : 'Réessayer'}}\n        </button>\n\n        <button\n            :class=\"`${(mustTry && trying)? 'bg-blue-300' : 'bg-blue-500'} text-white px-3 py-2 m-2 rounded-md text-center`\"\n            @click=\"showAnswer()\" \n            :disabled=\"(mustTry && trying)\"\n        >\n            Voir la réponse\n        </button>\n    </div>\n</template>\n\n"],"names":["_createElementVNode","_createVNode","_unref","interactive","_withCtx","AssociationNode","_openBlock","_createElementBlock","_normalizeClass","mustTry"],"mappings":"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"}
+{"version":3,"file":"EpAssociation.vue.js","sources":["../../../src/components/interactions/EpAssociation.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed } from 'vue'\nimport type { Node, Edge, Connection, EdgeMouseEvent } from '@vue-flow/core'  \nimport { VueFlow, useVueFlow } from '@vue-flow/core'\nimport type { EpAssociationProps } from \"~/types/interactions/EpAssociation\";\nimport { useCreateUid } from '~/composables/useCreateUid';\n\nimport AssociationNode from '../tools/AssociationNode.vue';\nimport type { LeftOption, RightOption } from '~/types/Association';\n\nconst props = withDefaults(defineProps<EpAssociationProps>(), {\n    interactive: false,\n    mustTry: false,\n    random: false,\n});\n\nconst id = useCreateUid();\n\nconst { fitView, onEdgeDoubleClick } = useVueFlow({ id: id })\n\nconst shuffle = (tab: any) => {\n  for (let i = tab.length - 1; i > 0; i--) {\n    const j = Math.floor(Math.random() * (i + 1));\n    [tab[i], tab[j]] = [tab[j], tab[i]];\n  }\n  return tab;\n}\n\n\nconst leftNodes = computed<LeftOption[]>(() => {\n    if(props.random) {\n        return shuffle([...props.leftOptions]);\n    }\n    return props.leftOptions;\n});\n\nconst rightNodes = computed<RightOption[]>(() => {\n    if(props.random) {\n        return shuffle([...props.rightOptions]);\n    }\n    return props.rightOptions;\n});\n\n// these are our nodes\nconst initialNodes = computed<Node[]>(() => {\n    let yLeft = 50;\n    let yRight = 50;\n    const GAP = 40;\n\n    let left: Node [] = leftNodes.value.map((option, idx) => {\n        const h = option.height ?? 100;\n        let result = {\n            id: option.uid,\n            type: 'association',\n            position: { x: 50, y: yLeft },\n            data: { \n                label: option.text,\n                index: idx,\n                left: true\n            }\n        } as Node\n\n        yLeft += h + GAP;\n        return result;\n\n    });\n\n    let right: Node [] = rightNodes.value.map((option, idx) => {\n        const h = option.height ?? 100;\n        const result = {\n            id: option.uid,\n            type: 'association',\n            position: { x: 550, y: yRight },\n            data: { \n                label: option.text,\n                index: idx,\n                left: false\n            }\n        } as Node\n\n        yRight += h + GAP;\n        return result;\n    });\n\n    return [...left, ...right];\n})\n\nconst nodes = ref<Node[]>(initialNodes.value)\n\n// The correct edges\nconst correctEdges = computed<Edge[]>(() => {\n    return leftNodes.value.flatMap((option) => {\n        return option.answers.map((answer) => {\n            return {\n                id: 'e' + option.uid + '->' + answer,\n                type: 'straight',\n                source: option.uid,\n                target: answer,\n                animated: false,\n                style: {\n                    strokeWidth: 3,\n                },\n                updatable: false\n            }\n        });\n    })\n});\n\nconst edges = ref<Edge[]>([]);\n\nconst trying = ref(true);\nconst solution = ref(false);\nconst validating = ref(false);\n\nconst validate = () => {\n    trying.value = false;\n    solution.value = false;\n    validating.value = true;\n\n    // Put the right colors for the validation\n    let incorrectNodes = new Set<string>();\n\n    // Check edges\n    edges.value = edges.value.map((edge: Edge) => {\n        let inside = false;\n        for(let correctEdge of correctEdges.value) {\n            if(edge.id == correctEdge.id)\n                inside = true;\n        }\n        if(!inside) {\n            incorrectNodes.add(edge.source);\n            incorrectNodes.add(edge.target);\n        }\n        return {\n            ...edge,\n            style: {\n                ...edge.style,\n                stroke: inside ? '#16a34a' : '#dc2626'\n            }\n        }\n    });\n\n    for(let correctEdge of correctEdges.value) {\n        let inside = false;\n        for(let edge of edges.value) {\n            if(edge.id == correctEdge.id)\n                inside = true;\n        }\n        if(!inside) {\n            incorrectNodes.add(correctEdge.source);\n            incorrectNodes.add(correctEdge.target);\n        }\n    }\n\n    // Check Nodes\n    nodes.value = nodes.value.map((node: Node) => {\n        console.log('here')\n        if(incorrectNodes.has(node.id)) \n            return {\n                ...node,\n                data: {\n                    ...node.data,\n                    mode: 'wrong'\n                }\n            }\n        else\n            return {\n                ...node,\n                data: {\n                    ...node.data,\n                    mode: 'correct'\n                }\n            }\n    })\n}\n\nconst retry = () => {\n    trying.value = true;\n    solution.value = false;\n    validating.value = false;\n\n    edges.value = [];\n    nodes.value = nodes.value.map((node: Node) => { \n        return {\n            ...node,\n            data: {\n                ...node.data,\n                mode: 'neutral'\n            }\n        }\n    });\n}\n\nconst showAnswer = () => {\n    fitView();\n\n    solution.value = true;\n    trying.value = false;\n    validating.value = false;\n\n    edges.value = correctEdges.value;\n    nodes.value = nodes.value.map((node: Node) => { \n        return {\n            ...node,\n            data: {\n                ...node.data,\n                mode: 'neutral'\n            }\n        }\n    });\n}\n\nconst onConnect = (connection: Connection) => {\n    let newEdge: Edge = {\n        id: 'e' + connection.source + '->' + connection.target,\n        type: 'straight',\n        source: connection.source,\n        target: connection.target,\n        animated: false,\n        updatable: false,\n        style: {\n            strokeWidth: 3,\n        },\n    }\n    edges.value = [...edges.value, newEdge]\n}\n\n\nonEdgeDoubleClick((event: EdgeMouseEvent) => {\n    if(trying.value) {\n        edges.value = edges.value.filter((edge: Edge) => {\n            return edge.id !== event.edge.id\n        })\n    }\n    console.log('edge double clicked', event)\n})\n\nconst computedHeight = computed(() => {\n    let GAP = 40;\n    let heightLeft = GAP;\n    let heightRight = GAP;\n\n    leftNodes.value.forEach((option) => {\n        heightLeft += (option.height ?? 100) + GAP;\n    });\n\n    rightNodes.value.forEach((option) => {\n        heightRight += (option.height ?? 100) + GAP;\n    });\n\n    return Math.max(heightLeft, heightRight);\n})\n\n</script>\n\n<template>\n    <div class=\"border-2 rounded\" :style=\"{ width: '90%', height: computedHeight + 'px', margin: 'auto' }\">\n        <VueFlow \n            @pane-ready=\"() => { fitView() }\"\n            @connect = \"onConnect\"\n\n            :id=\"id\"\n            :nodes=\"nodes\" \n            :edges=\"(interactive)? edges : correctEdges\"\n            :nodes-draggable=\"false\"\n            :pan-on-drag=\"false\"\n            :nodes-connectable=\"interactive && trying\"\n            :zoom-on-scroll=\"false\"\n            :zoom-on-pinch=\"false\"\n            :zoom-on-double-click=\"false\"\n        >\n            <!-- bind the custom node type to the component -->\n            <template #node-association=\"AssociationNodeProps\">\n                <AssociationNode v-bind=\"AssociationNodeProps\" />\n            </template>\n        </VueFlow>\n    </div>\n    <div class=\"p-2 text-center text-sm text-neutral-300\" v-if=\"interactive\">\n        <p v-if=\"trying\">Vous pouvez double-clicker sur une arête pour la supprimer.</p>\n        <p v-if=\"validating\">Les éléments en verts sont corrects et ceux en rouge sont incorrects.</p>\n    </div>\n    <div class=\"flex items-center justify-around\" v-if=\"interactive\">\n        <button\n            class=\"bg-blue-500 text-white px-3 py-2 m-2 rounded-md text-center\"\n            @click=\"(trying)? validate() : retry()\"\n        >\n            {{(trying)? 'Valider' : 'Réessayer'}}\n        </button>\n\n        <button\n            :class=\"`${(mustTry && trying)? 'bg-blue-300' : 'bg-blue-500'} text-white px-3 py-2 m-2 rounded-md text-center`\"\n            @click=\"showAnswer()\" \n            :disabled=\"(mustTry && trying)\"\n        >\n            Voir la réponse\n        </button>\n    </div>\n</template>\n\n"],"names":["_createElementVNode","_createVNode","_unref","interactive","_withCtx","AssociationNode","_openBlock","_createElementBlock","_normalizeClass","mustTry"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAUA,UAAM,QAAQ;AAMd,UAAM,KAAK,aAAA;AAEX,UAAM,EAAE,SAAS,kBAAA,IAAsB,WAAW,EAAE,IAAQ;AAE5D,UAAM,UAAU,CAAC,QAAa;AAC5B,eAAS,IAAI,IAAI,SAAS,GAAG,IAAI,GAAG,KAAK;AACvC,cAAM,IAAI,KAAK,MAAM,KAAK,YAAY,IAAI,EAAE;AAC5C,SAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;AAAA,MACpC;AACA,aAAO;AAAA,IACT;AAGA,UAAM,YAAY,SAAuB,MAAM;AAC3C,UAAG,MAAM,QAAQ;AACb,eAAO,QAAQ,CAAC,GAAG,MAAM,WAAW,CAAC;AAAA,MACzC;AACA,aAAO,MAAM;AAAA,IACjB,CAAC;AAED,UAAM,aAAa,SAAwB,MAAM;AAC7C,UAAG,MAAM,QAAQ;AACb,eAAO,QAAQ,CAAC,GAAG,MAAM,YAAY,CAAC;AAAA,MAC1C;AACA,aAAO,MAAM;AAAA,IACjB,CAAC;AAGD,UAAM,eAAe,SAAiB,MAAM;AACxC,UAAI,QAAQ;AACZ,UAAI,SAAS;AACb,YAAM,MAAM;AAEZ,UAAI,OAAgB,UAAU,MAAM,IAAI,CAAC,QAAQ,QAAQ;;AACrD,cAAM,KAAI,YAAO,WAAP,YAAiB;AAC3B,YAAI,SAAS;AAAA,UACT,IAAI,OAAO;AAAA,UACX,MAAM;AAAA,UACN,UAAU,EAAE,GAAG,IAAI,GAAG,MAAA;AAAA,UACtB,MAAM;AAAA,YACF,OAAO,OAAO;AAAA,YACd,OAAO;AAAA,YACP,MAAM;AAAA,UAAA;AAAA,QACV;AAGJ,iBAAS,IAAI;AACb,eAAO;AAAA,MAEX,CAAC;AAED,UAAI,QAAiB,WAAW,MAAM,IAAI,CAAC,QAAQ,QAAQ;;AACvD,cAAM,KAAI,YAAO,WAAP,YAAiB;AAC3B,cAAM,SAAS;AAAA,UACX,IAAI,OAAO;AAAA,UACX,MAAM;AAAA,UACN,UAAU,EAAE,GAAG,KAAK,GAAG,OAAA;AAAA,UACvB,MAAM;AAAA,YACF,OAAO,OAAO;AAAA,YACd,OAAO;AAAA,YACP,MAAM;AAAA,UAAA;AAAA,QACV;AAGJ,kBAAU,IAAI;AACd,eAAO;AAAA,MACX,CAAC;AAED,aAAO,CAAC,GAAG,MAAM,GAAG,KAAK;AAAA,IAC7B,CAAC;AAED,UAAM,QAAQ,IAAY,aAAa,KAAK;AAG5C,UAAM,eAAe,SAAiB,MAAM;AACxC,aAAO,UAAU,MAAM,QAAQ,CAAC,WAAW;AACvC,eAAO,OAAO,QAAQ,IAAI,CAAC,WAAW;AAClC,iBAAO;AAAA,YACH,IAAI,MAAM,OAAO,MAAM,OAAO;AAAA,YAC9B,MAAM;AAAA,YACN,QAAQ,OAAO;AAAA,YACf,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,OAAO;AAAA,cACH,aAAa;AAAA,YAAA;AAAA,YAEjB,WAAW;AAAA,UAAA;AAAA,QAEnB,CAAC;AAAA,MACL,CAAC;AAAA,IACL,CAAC;AAED,UAAM,QAAQ,IAAY,EAAE;AAE5B,UAAM,SAAS,IAAI,IAAI;AACvB,UAAM,WAAW,IAAI,KAAK;AAC1B,UAAM,aAAa,IAAI,KAAK;AAE5B,UAAM,WAAW,MAAM;AACnB,aAAO,QAAQ;AACf,eAAS,QAAQ;AACjB,iBAAW,QAAQ;AAGnB,UAAI,qCAAqB,IAAA;AAGzB,YAAM,QAAQ,MAAM,MAAM,IAAI,CAAC,SAAe;AAC1C,YAAI,SAAS;AACb,iBAAQ,eAAe,aAAa,OAAO;AACvC,cAAG,KAAK,MAAM,YAAY;AACtB,qBAAS;AAAA,QACjB;AACA,YAAG,CAAC,QAAQ;AACR,yBAAe,IAAI,KAAK,MAAM;AAC9B,yBAAe,IAAI,KAAK,MAAM;AAAA,QAClC;AACA,eAAO;AAAA,UACH,GAAG;AAAA,UACH,OAAO;AAAA,YACH,GAAG,KAAK;AAAA,YACR,QAAQ,SAAS,YAAY;AAAA,UAAA;AAAA,QACjC;AAAA,MAER,CAAC;AAED,eAAQ,eAAe,aAAa,OAAO;AACvC,YAAI,SAAS;AACb,iBAAQ,QAAQ,MAAM,OAAO;AACzB,cAAG,KAAK,MAAM,YAAY;AACtB,qBAAS;AAAA,QACjB;AACA,YAAG,CAAC,QAAQ;AACR,yBAAe,IAAI,YAAY,MAAM;AACrC,yBAAe,IAAI,YAAY,MAAM;AAAA,QACzC;AAAA,MACJ;AAGA,YAAM,QAAQ,MAAM,MAAM,IAAI,CAAC,SAAe;AAC1C,gBAAQ,IAAI,MAAM;AAClB,YAAG,eAAe,IAAI,KAAK,EAAE;AACzB,iBAAO;AAAA,YACH,GAAG;AAAA,YACH,MAAM;AAAA,cACF,GAAG,KAAK;AAAA,cACR,MAAM;AAAA,YAAA;AAAA,UACV;AAAA;AAGJ,iBAAO;AAAA,YACH,GAAG;AAAA,YACH,MAAM;AAAA,cACF,GAAG,KAAK;AAAA,cACR,MAAM;AAAA,YAAA;AAAA,UACV;AAAA,MAEZ,CAAC;AAAA,IACL;AAEA,UAAM,QAAQ,MAAM;AAChB,aAAO,QAAQ;AACf,eAAS,QAAQ;AACjB,iBAAW,QAAQ;AAEnB,YAAM,QAAQ,CAAA;AACd,YAAM,QAAQ,MAAM,MAAM,IAAI,CAAC,SAAe;AAC1C,eAAO;AAAA,UACH,GAAG;AAAA,UACH,MAAM;AAAA,YACF,GAAG,KAAK;AAAA,YACR,MAAM;AAAA,UAAA;AAAA,QACV;AAAA,MAER,CAAC;AAAA,IACL;AAEA,UAAM,aAAa,MAAM;AACrB,cAAA;AAEA,eAAS,QAAQ;AACjB,aAAO,QAAQ;AACf,iBAAW,QAAQ;AAEnB,YAAM,QAAQ,aAAa;AAC3B,YAAM,QAAQ,MAAM,MAAM,IAAI,CAAC,SAAe;AAC1C,eAAO;AAAA,UACH,GAAG;AAAA,UACH,MAAM;AAAA,YACF,GAAG,KAAK;AAAA,YACR,MAAM;AAAA,UAAA;AAAA,QACV;AAAA,MAER,CAAC;AAAA,IACL;AAEA,UAAM,YAAY,CAAC,eAA2B;AAC1C,UAAI,UAAgB;AAAA,QAChB,IAAI,MAAM,WAAW,SAAS,OAAO,WAAW;AAAA,QAChD,MAAM;AAAA,QACN,QAAQ,WAAW;AAAA,QACnB,QAAQ,WAAW;AAAA,QACnB,UAAU;AAAA,QACV,WAAW;AAAA,QACX,OAAO;AAAA,UACH,aAAa;AAAA,QAAA;AAAA,MACjB;AAEJ,YAAM,QAAQ,CAAC,GAAG,MAAM,OAAO,OAAO;AAAA,IAC1C;AAGA,sBAAkB,CAAC,UAA0B;AACzC,UAAG,OAAO,OAAO;AACb,cAAM,QAAQ,MAAM,MAAM,OAAO,CAAC,SAAe;AAC7C,iBAAO,KAAK,OAAO,MAAM,KAAK;AAAA,QAClC,CAAC;AAAA,MACL;AACA,cAAQ,IAAI,uBAAuB,KAAK;AAAA,IAC5C,CAAC;AAED,UAAM,iBAAiB,SAAS,MAAM;AAClC,UAAI,MAAM;AACV,UAAI,aAAa;AACjB,UAAI,cAAc;AAElB,gBAAU,MAAM,QAAQ,CAAC,WAAW;;AAChC,wBAAe,YAAO,WAAP,YAAiB,OAAO;AAAA,MAC3C,CAAC;AAED,iBAAW,MAAM,QAAQ,CAAC,WAAW;;AACjC,yBAAgB,YAAO,WAAP,YAAiB,OAAO;AAAA,MAC5C,CAAC;AAED,aAAO,KAAK,IAAI,YAAY,WAAW;AAAA,IAC3C,CAAC;;;QAKGA,mBAoBM,OAAA;AAAA,UApBD,OAAM;AAAA,UAAoB,8CAA+B,eAAA,QAAc,MAAA,QAAA,OAAA,CAAA;AAAA,QAAA;UACxEC,YAkBUC,MAAA,OAAA,GAAA;AAAA,YAjBL;AAAoBA,oBAAA,OAAA,EAAA;AAAA,YAAO;AAAA,YAC3B;AAAA,YAEA,IAAIA,MAAA,EAAA;AAAA,YACJ,OAAO,MAAA;AAAA,YACP,OAAQC,KAAAA,cAAc,MAAA,QAAQ,aAAA;AAAA,YAC9B,mBAAiB;AAAA,YACjB,eAAa;AAAA,YACb,qBAAmBA,KAAAA,eAAe,OAAA;AAAA,YAClC,kBAAgB;AAAA,YAChB,iBAAe;AAAA,YACf,wBAAsB;AAAA,UAAA;YAGZ,oBAAgBC,QACvB,CAAiD,yBADJ;AAAA,cAC7CH,YAAiDI,+CAAxB,oBAAoB,CAAA,GAAA,MAAA,EAAA;AAAA,YAAA;;;;QAIGF,KAAAA,eAA5DG,UAAA,GAAAC,mBAGM,OAHN,YAGM;AAAA,UAFO,OAAA,SAATD,UAAA,GAAAC,mBAAgF,iBAA/D,6DAA2D;UACnE,WAAA,SAATD,UAAA,GAAAC,mBAA8F,iBAAzE,uEAAqE;;QAE1CJ,KAAAA,eAApDG,UAAA,GAAAC,mBAeM,OAfN,YAeM;AAAA,UAdFP,mBAKS,UAAA;AAAA,YAJL,OAAM;AAAA,YACL,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAG,OAAA,QAAS,SAAA,IAAa,MAAA;AAAA,UAAK,mBAEjC,OAAA,QAAM,YAAA,WAAA,GAAA,CAAA;AAAA,UAGbA,mBAMS,UAAA;AAAA,YALJ,OAAKQ,eAAA,GAAMC,KAAAA,WAAW,OAAA,QAAM,gBAAA,aAAA,kDAAA;AAAA,YAC5B,+CAAO;YACP,UAAWA,KAAAA,WAAW,OAAA;AAAA,UAAA,GAC1B,qBAED,IAAA,UAAA;AAAA,QAAA;;;;;"}

package/dist/components/tools/AssociationNode.vue.js

@@ -1,5 +1,4 @@
 import _sfc_main from "./AssociationNode.vue2.js";
-/* empty css                     */
 export {
   _sfc_main as default
 };

package/dist/components/tools/AssociationNode.vue.js.map

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

package/dist/components/tools/AssociationNode.vue2.js

@@ -1,7 +1,8 @@
-import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, createElementVNode, createVNode, toDisplayString, unref, withCtx } from "vue";
+import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, createElementVNode, createVNode, unref, toDisplayString, normalizeStyle } from "vue";
 import { Handle, Position } from "@vue-flow/core";
 import _sfc_main$1 from "../basics/EpIcon.vue.js";
-const _hoisted_1 = { class: "px-4 py-2" };
+import { useRenderText } from "../../composables/useRenderText.js";
+const _hoisted_1 = ["innerHTML"];
 const plug = "M17,16H21V14H17V10H21V8H17V8C17,7 16,6 15,6H9.5L6,9.5H3V14.5H6L9.5,18H15C16,18 17,17 17,16Z";
 const socket = "M7,16C7,17 8,18 9,18H14.5L18,14.5H21V9.5H18L14.5,6H9C8,6 7,7 7,8Z M7 19 L7 5";
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -43,22 +44,38 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(`shadow-lg rounded w-96 relative bg-surface-2 dark:bg-surface-2-dark ${colorStyle.value}`)
       }, [
-        createElementVNode("div", _hoisted_1, toDisplayString(_ctx.data.label), 1),
+        createElementVNode("div", {
+          class: "px-4 py-2 break-words",
+          innerHTML: unref(useRenderText)(_ctx.data.label)
+        }, null, 8, _hoisted_1),
         createElementVNode("span", {
           class: normalizeClass(`rounded-full w-6 h-6 flex justify-center bg-white dark:bg-neutral-800 items-center absolute bottom-1/3 ${_ctx.data.left ? "-left-3" : "-right-3"} ${colorStyle.value}`)
         }, toDisplayString(_ctx.data.left ? String.fromCharCode(65 + _ctx.data.index) : _ctx.data.index), 3),
         createVNode(unref(Handle), {
-          type: `${_ctx.data.left ? "source" : "target"}`,
+          type: _ctx.data.left ? "source" : "target",
           position: _ctx.data.left ? unref(Position).Right : unref(Position).Left,
-          class: "association-handle"
-        }, {
-          default: withCtx(() => [
-            createVNode(_sfc_main$1, {
-              "icon-path": _ctx.data.left ? plug : socket
-            }, null, 8, ["icon-path"])
-          ]),
-          _: 1
-        }, 8, ["type", "position"])
+          style: normalizeStyle({
+            width: "20px",
+            // handle invisible, pas d’espace
+            height: "20px",
+            top: "50%",
+            zIndex: "100",
+            transform: "translateY(-50%)",
+            left: _ctx.data.left ? "96%" : "-10px",
+            opacity: 0
+          })
+        }, null, 8, ["type", "position", "style"]),
+        createVNode(_sfc_main$1, {
+          "icon-path": _ctx.data.left ? plug : socket,
+          style: normalizeStyle({
+            position: "absolute",
+            width: "30px",
+            height: "30px",
+            top: "50%",
+            transform: "translateY(-50%)",
+            left: _ctx.data.left ? "97%" : "-20px"
+          })
+        }, null, 8, ["icon-path", "style"])
       ], 2);
     };
   }

package/dist/components/tools/AssociationNode.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssociationNode.vue2.js","sources":["../../../src/components/tools/AssociationNode.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Position, Handle } from '@vue-flow/core'\nimport type { NodeProps } from '@vue-flow/core'\nimport EpIcon from '../basics/EpIcon.vue'\n\n\nconst plug = 'M17,16H21V14H17V10H21V8H17V8C17,7 16,6 15,6H9.5L6,9.5H3V14.5H6L9.5,18H15C16,18 17,17 17,16Z';\nconst socket = 'M7,16C7,17 8,18 9,18H14.5L18,14.5H21V9.5H18L14.5,6H9C8,6 7,7 7,8Z M7 19 L7 5';\n\ninterface AssociationData {\n    mode?: 'neutral' | 'correct' | 'wrong';\n    left: boolean;\n    index: number;\n    label: string;\n}\n\nconst props = withDefaults(defineProps<NodeProps<AssociationData>>(), {});\n\nconst colorStyle = computed(() => {\n    if(!props.data.mode || props.data.mode == 'neutral') {\n        return 'border-2 border-black dark:border-white'\n    }\n    if(props.data.mode == 'correct') {\n        return 'border-2 border-green-600'\n    } else if(props.data.mode == 'wrong') {\n        return 'border-2 border-red-600'\n    }\n});\n\n</script>\n\n<template>\n    <div :class=\"`shadow-lg rounded w-96 relative bg-surface-2 dark:bg-surface-2-dark ${colorStyle}`\">\n        <div class=\"px-4 py-2\">{{ data.label }}</div>\n        <span :class=\"`rounded-full w-6 h-6 flex justify-center bg-white dark:bg-neutral-800 items-center absolute bottom-1/3 ${(data.left)? '-left-3' : '-right-3'} ${colorStyle}`\">{{ (data.left)? String.fromCharCode(65 + data.index) : data.index }}</span>\n\n        <Handle \n            :type=\"`${(data.left)? 'source' : 'target'}`\" \n            :position=\"(data.left)? Position.Right : Position.Left\"\n            class=\"association-handle\"\n        >\n            <EpIcon :icon-path=\"(data.left)? plug : socket\" />\n        </Handle>\n    </div>\n</template>\n\n<style>\n.association-handle {\n    width: 30px !important;\n    height: 30px !important;\n    background: transparent !important;\n    border: none !important;\n    border-radius: 0 !important;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.association-handle svg {\n    pointer-events: none;\n}\n\n\n.association-handle[data-handlepos=\"right\"] {\n  right: -6px !important;\n}\n\n.association-handle[data-handlepos=\"left\"] {\n  left: -6px !important;\n}\n</style>\n"],"names":["_createElementBlock","_createElementVNode","_toDisplayString","data","_normalizeClass","_createVNode","_unref","EpIcon"],"mappings":";;;;AAOA,MAAM,OAAO;AACb,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;AASf,UAAM,QAAQ;AAEd,UAAM,aAAa,SAAS,MAAM;AAC9B,UAAG,CAAC,MAAM,KAAK,QAAQ,MAAM,KAAK,QAAQ,WAAW;AACjD,eAAO;AAAA,MACX;AACA,UAAG,MAAM,KAAK,QAAQ,WAAW;AAC7B,eAAO;AAAA,MACX,WAAU,MAAM,KAAK,QAAQ,SAAS;AAClC,eAAO;AAAA,MACX;AAAA,IACJ,CAAC;;0BAKGA,mBAWM,OAAA;AAAA,QAXA,6FAA8E,WAAA,KAAU,EAAA;AAAA,MAAA;QAC1FC,mBAA6C,OAA7C,YAA6CC,gBAAnBC,KAAAA,KAAK,KAAK,GAAA,CAAA;AAAA,QACpCF,mBAAwP,QAAA;AAAA,UAAjP,OAAKG,eAAA,0GAA6GD,KAAAA,KAAK,iCAAiC,WAAA,KAAU,EAAA;AAAA,QAAA,GAAQA,gBAAAA,KAAAA,KAAK,OAAO,OAAO,aAAY,KAAMA,KAAAA,KAAK,KAAK,IAAIA,KAAAA,KAAK,KAAK,GAAA,CAAA;AAAA,QAE9OE,YAMSC,MAAA,MAAA,GAAA;AAAA,UALJ,MAAI,GAAMH,KAAAA,KAAK,OAAI,WAAA,QAAA;AAAA,UACnB,UAAWA,KAAAA,KAAK,OAAOG,MAAA,QAAA,EAAS,QAAQA,MAAA,QAAA,EAAS;AAAA,UAClD,OAAM;AAAA,QAAA;2BAEN,MAAkD;AAAA,YAAlDD,YAAkDE,aAAA;AAAA,cAAzC,aAAYJ,KAAAA,KAAK,OAAO,OAAO;AAAA,YAAA;;;;;;;;"}
+{"version":3,"file":"AssociationNode.vue2.js","sources":["../../../src/components/tools/AssociationNode.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Position, Handle } from '@vue-flow/core'\nimport type { NodeProps } from '@vue-flow/core'\nimport EpIcon from '../basics/EpIcon.vue'\nimport { useRenderText } from '~/composables/useRenderText';\n\n\nconst plug = 'M17,16H21V14H17V10H21V8H17V8C17,7 16,6 15,6H9.5L6,9.5H3V14.5H6L9.5,18H15C16,18 17,17 17,16Z';\nconst socket = 'M7,16C7,17 8,18 9,18H14.5L18,14.5H21V9.5H18L14.5,6H9C8,6 7,7 7,8Z M7 19 L7 5';\n\ninterface AssociationData {\n    mode?: 'neutral' | 'correct' | 'wrong';\n    left: boolean;\n    index: number;\n    label: string;\n}\n\nconst props = withDefaults(defineProps<NodeProps<AssociationData>>(), {});\n\nconst colorStyle = computed(() => {\n    if(!props.data.mode || props.data.mode == 'neutral') {\n        return 'border-2 border-black dark:border-white'\n    }\n    if(props.data.mode == 'correct') {\n        return 'border-2 border-green-600'\n    } else if(props.data.mode == 'wrong') {\n        return 'border-2 border-red-600'\n    }\n});\n\n</script>\n\n<template>\n    <div :class=\"`shadow-lg rounded w-96 relative bg-surface-2 dark:bg-surface-2-dark ${colorStyle}`\">\n        <div class=\"px-4 py-2 break-words\" v-html=\"useRenderText(data.label)\"></div>\n        <span :class=\"`rounded-full w-6 h-6 flex justify-center bg-white dark:bg-neutral-800 items-center absolute bottom-1/3 ${(data.left)? '-left-3' : '-right-3'} ${colorStyle}`\">{{ (data.left)? String.fromCharCode(65 + data.index) : data.index }}</span>\n\n        <Handle\n            :type=\"data.left ? 'source' : 'target'\"\n            :position=\"data.left ? Position.Right : Position.Left\"\n            :style=\"{\n                width: '20px',   // handle invisible, pas d’espace\n                height: '20px',\n                top: '50%',\n                zIndex: '100',\n                transform: 'translateY(-50%)',\n                left: data.left ? '96%' : '-10px',\n                opacity: 0\n            }\"\n        />\n        <EpIcon \n            :icon-path=\"data.left ? plug : socket\"\n            :style=\"{\n                position: 'absolute',\n                width: '30px',\n                height: '30px',\n                top: '50%',\n                transform: 'translateY(-50%)',\n                left: data.left ? '97%' : '-20px'\n            }\" \n        />\n    </div>\n</template>\n"],"names":["_createElementBlock","_createElementVNode","_unref","data","_normalizeClass","_createVNode","_normalizeStyle","EpIcon"],"mappings":";;;;;AAQA,MAAM,OAAO;AACb,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;AASf,UAAM,QAAQ;AAEd,UAAM,aAAa,SAAS,MAAM;AAC9B,UAAG,CAAC,MAAM,KAAK,QAAQ,MAAM,KAAK,QAAQ,WAAW;AACjD,eAAO;AAAA,MACX;AACA,UAAG,MAAM,KAAK,QAAQ,WAAW;AAC7B,eAAO;AAAA,MACX,WAAU,MAAM,KAAK,QAAQ,SAAS;AAClC,eAAO;AAAA,MACX;AAAA,IACJ,CAAC;;0BAKGA,mBA4BM,OAAA;AAAA,QA5BA,6FAA8E,WAAA,KAAU,EAAA;AAAA,MAAA;QAC1FC,mBAA4E,OAAA;AAAA,UAAvE,OAAM;AAAA,UAAwB,WAAQC,MAAA,aAAA,EAAcC,KAAAA,KAAK,KAAK;AAAA,QAAA;QACnEF,mBAAwP,QAAA;AAAA,UAAjP,OAAKG,eAAA,0GAA6GD,KAAAA,KAAK,iCAAiC,WAAA,KAAU,EAAA;AAAA,QAAA,GAAQA,gBAAAA,KAAAA,KAAK,OAAO,OAAO,aAAY,KAAMA,KAAAA,KAAK,KAAK,IAAIA,KAAAA,KAAK,KAAK,GAAA,CAAA;AAAA,QAE9OE,YAYEH,MAAA,MAAA,GAAA;AAAA,UAXG,MAAMC,KAAAA,KAAK,OAAI,WAAA;AAAA,UACf,UAAUA,KAAAA,KAAK,OAAOD,MAAA,QAAA,EAAS,QAAQA,MAAA,QAAA,EAAS;AAAA,UAChD,OAAKI,eAAA;AAAA;;;;;;YAAuOH,MAAAA,KAAAA,KAAK,OAAI,QAAA;AAAA;;;QAU1PE,YAUEE,aAAA;AAAA,UATG,aAAWJ,KAAAA,KAAK,OAAO,OAAO;AAAA,UAC9B,OAAKG,eAAA;AAAA;;;;;YAA0MH,MAAAA,KAAAA,KAAK,OAAI,QAAA;AAAA,UAAA;;;;;;"}

package/dist/style.css

@@ -1,13 +1,28 @@
 
+.shape[data-v-4a99873e] {
+  height: var(--e4ec2c0a);
+  width: var(--3f346a72);
+}
+
+
 .ep-info-box[data-v-cb6ebbdc] a {
   text-decoration: underline;
   font-weight: 500;
 }
+/*$vite$:1*/
 
+.katex[data-v-a9b6227c] {
+  font-size: 1.6em;
+}
+/*$vite$:1*/
 
-.shape[data-v-4a99873e] {
-  height: var(--e4ec2c0a);
-  width: var(--3f346a72);
+.ep-tree-wrapper[data-v-482cff9d] {
+  overflow: auto;
+  border: 1px solid #ddd;
+}
+.ep-tree-container[data-v-482cff9d] {
+  width: 100%;
+  overflow-x: auto;
 }
 /*$vite$:1*/
 
@@ -72,42 +87,11 @@
 }
 /*$vite$:1*/
 
-.eptimeline-list-enter-active[data-v-6ad2fc60],
-.eptimeline-list-leave-active[data-v-6ad2fc60] {
-  transition: all 0.5s ease;
-}
-.eptimeline-list-enter-from[data-v-6ad2fc60],
-.eptimeline-list-leave-to[data-v-6ad2fc60] {
-  opacity: 0;
-  transform: translateX(30px);
-}
-/*$vite$:1*/
-
 .ep-sensible-content[data-v-0098bf11] {
   position: relative;
 }
 /*$vite$:1*/
 
-.katex[data-v-a9b6227c] {
-  font-size: 1.6em;
-}
-/*$vite$:1*/
-
-.ep-tree-wrapper[data-v-482cff9d] {
-  overflow: auto;
-  border: 1px solid #ddd;
-}
-.ep-tree-container[data-v-482cff9d] {
-  width: 100%;
-  overflow-x: auto;
-}
-/*$vite$:1*/
-
-pre {
-  white-space: break-spaces;
-}
-/*$vite$:1*/
-
 @keyframes fade-6f6eb558 {
 0% {
     opacity: 0;
@@ -149,35 +133,25 @@ pre {
 }
 /*$vite$:1*/
 
-/* Target the top-level KaTeX container and increase the font size */
-.katex-block[data-v-0d66d7fc] .katex {
-  /* Increase the overall size of the math relative to the parent font size */
-  font-size: 2em;
-}
-/* If you want inline math to be a specific size relative to surrounding text */
-.katex-render[data-v-0d66d7fc] .katex-display {
-   font-size: 1.5em;
+pre {
+  white-space: break-spaces;
 }
 /*$vite$:1*/
 
-.association-handle {
-    width: 30px !important;
-    height: 30px !important;
-    background: transparent !important;
-    border: none !important;
-    border-radius: 0 !important;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.association-handle svg {
-    pointer-events: none;
+.eptimeline-list-enter-active[data-v-6ad2fc60],
+.eptimeline-list-leave-active[data-v-6ad2fc60] {
+  transition: all 0.5s ease;
 }
-.association-handle[data-handlepos="right"] {
-  right: -6px !important;
+.eptimeline-list-enter-from[data-v-6ad2fc60],
+.eptimeline-list-leave-to[data-v-6ad2fc60] {
+  opacity: 0;
+  transform: translateX(30px);
 }
-.association-handle[data-handlepos="left"] {
-  left: -6px !important;
+/*$vite$:1*/
+
+.ep-content-timeline-item[data-v-6a472392] {
+  max-height: 0;
+  overflow: hidden;
 }
 /*$vite$:1*/
 
@@ -188,8 +162,13 @@ pre {
 }
 /*$vite$:1*/
 
-.ep-content-timeline-item[data-v-6a472392] {
-  max-height: 0;
-  overflow: hidden;
+/* Target the top-level KaTeX container and increase the font size */
+.katex-block[data-v-0d66d7fc] .katex {
+  /* Increase the overall size of the math relative to the parent font size */
+  font-size: 2em;
+}
+/* If you want inline math to be a specific size relative to surrounding text */
+.katex-render[data-v-0d66d7fc] .katex-display {
+   font-size: 1.5em;
 }
 /*$vite$:1*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ep-lib-ts",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "type": "module",
   "files": [
     "dist"