From 8f8b0c5f4cf97a0a6ca84f0592279f13058bd981 Mon Sep 17 00:00:00 2001 From: Jules Neny Date: Mon, 11 May 2026 20:00:30 +0200 Subject: [PATCH] feat(v13-d): Carte O Option B rectangle central + bandeau sommaire + legende + TMIP relie MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - YAML carte-o-source : label central -> 'Une medecine du corps social pour ecrire un nouveau contrat social' (phrase pleine 3 lignes) - YAML : projet TMIP gagne lien_central:true (edge explicite centre <-> projet) - build-carte-o.js : addEdge accepte opts.central=true pour tagger les edges rattachees au noeud central (permet tuning force-link cote Vue) - carte-o.json regenere : 17 nodes, 20 edges (vs 19 V1.2-O), tous les edges central->thematiques + central->tmip portent flag central:true - CarteO.vue : noeud central rendu en RECT 300x64 fill encre (vs cercle r30), label blanc multi-tspan 3 lignes 13px font-weight 500 line-height 1.35 - CarteO.vue : splitCentralLabel reecrit pour wrap intelligent (3 lignes ~30 chars), preserve compat ' + ' (V1.2) - CarteO.vue : force tuning V1.3 -> alphaDecay 0.025, velocityDecay 0.4, forceCollide +12 (CENTRAL_COLLIDE_RADIUS=160 pour le rect), forceX/Y strength 0.05 rappel cadre, link distance/strength differencies (central->projet = 90/0.6, central->essai = 200/0.3) - CarteO.vue : hover handler selector etendu rect|circle - CarteOWrapper.vue : CarteEdge gagne champ central?:boolean - ColCentre.astro : tabs Chatbot retires (ChatbotV2 import retire aussi), remplaces par header bandeau 'Sommaire editorial d'architecture d'ecologie politique' (gauche, monospace 12px) + legende 3 symboles (publie ● / a venir ○ / projet 🟠) en droite Build SSR : 5 pages prerender, 0 warning, 4.35s. --- public/data/carte-o-source.yaml | 4 +- public/data/carte-o.json | 54 ++++++++---- scripts/build-carte-o.js | 14 ++- src/components/astro/ColCentre.astro | 104 ++++++++-------------- src/components/vue/CarteO.vue | 125 +++++++++++++++++++++------ src/components/vue/CarteOWrapper.vue | 1 + 6 files changed, 186 insertions(+), 116 deletions(-) diff --git a/public/data/carte-o-source.yaml b/public/data/carte-o-source.yaml index 40ad47f..711cb7c 100644 --- a/public/data/carte-o-source.yaml +++ b/public/data/carte-o-source.yaml @@ -12,7 +12,7 @@ version: "1.1" centre: id: "contrat-social-medecine-corps-social" - label: "Contrat social + Medecine du corps social" + label: "Une medecine du corps social pour ecrire un nouveau contrat social" niveau: 0 nature: essai statut: gestation @@ -119,6 +119,8 @@ projets: nature: projet statut: gestation resume: "Transport, mobilite, industrie, politique - projet archi. Exemple de projet archi relie aux thematiques AEP." + # V1.3-D : lien explicite au noeud central (pont vision <-> pratique) + lien_central: true liens_thematiques: - "urbanisme" - "justice-securite" diff --git a/public/data/carte-o.json b/public/data/carte-o.json index 6c0f168..f188dfc 100644 --- a/public/data/carte-o.json +++ b/public/data/carte-o.json @@ -1,10 +1,10 @@ { "version": "1.1", - "generatedAt": "2026-05-11T16:47:45.459Z", + "generatedAt": "2026-05-11T17:59:41.381Z", "nodes": [ { "id": "contrat-social-medecine-corps-social", - "label": "Contrat social + Medecine du corps social", + "label": "Une medecine du corps social pour ecrire un nouveau contrat social", "niveau": 0, "nature": "essai", "statut": "gestation", @@ -191,63 +191,83 @@ "edges": [ { "source": "contrat-social-medecine-corps-social", - "target": "systemique" + "target": "systemique", + "central": true }, { "source": "contrat-social-medecine-corps-social", - "target": "pratiques-collectives" + "target": "pratiques-collectives", + "central": true }, { "source": "contrat-social-medecine-corps-social", - "target": "art-narration" + "target": "art-narration", + "central": true }, { "source": "contrat-social-medecine-corps-social", - "target": "pouvoir-domination" + "target": "pouvoir-domination", + "central": true }, { "source": "contrat-social-medecine-corps-social", - "target": "medias-critique" + "target": "medias-critique", + "central": true }, { "source": "contrat-social-medecine-corps-social", - "target": "justice-securite" + "target": "justice-securite", + "central": true }, { "source": "contrat-social-medecine-corps-social", - "target": "sante-globale" + "target": "sante-globale", + "central": true }, { "source": "contrat-social-medecine-corps-social", - "target": "agriculture" + "target": "agriculture", + "central": true }, { "source": "contrat-social-medecine-corps-social", - "target": "post-croissance" + "target": "post-croissance", + "central": true }, { "source": "contrat-social-medecine-corps-social", - "target": "anthropocene" + "target": "anthropocene", + "central": true }, { "source": "contrat-social-medecine-corps-social", - "target": "education" + "target": "education", + "central": true }, { "source": "contrat-social-medecine-corps-social", - "target": "urbanisme" + "target": "urbanisme", + "central": true }, { "source": "contrat-social-medecine-corps-social", - "target": "geopolitique" + "target": "geopolitique", + "central": true }, { "source": "contrat-social-medecine-corps-social", - "target": "ia-technologie" + "target": "ia-technologie", + "central": true }, { "source": "contrat-social-medecine-corps-social", - "target": "spiritualite" + "target": "spiritualite", + "central": true + }, + { + "source": "contrat-social-medecine-corps-social", + "target": "tmip", + "central": true }, { "source": "tmip", diff --git a/scripts/build-carte-o.js b/scripts/build-carte-o.js index ae6180f..b568aed 100644 --- a/scripts/build-carte-o.js +++ b/scripts/build-carte-o.js @@ -35,11 +35,15 @@ async function main() { const edges = [] const edgeSet = new Set() - function addEdge(source, target) { + function addEdge(source, target, opts = {}) { const key = source < target ? `${source}|${target}` : `${target}|${source}` if (edgeSet.has(key)) return edgeSet.add(key) - edges.push({ source, target }) + const edge = { source, target } + // V1.3-D : tag les edges au noeud central pour permettre tuning force-link + // (TMIP relie au centre = link court/fort, autres essais = link standard) + if (opts.central) edge.central = true + edges.push(edge) } function addNode(obj) { @@ -70,11 +74,15 @@ async function main() { // toutes les thematiques rattachees directement au noeud central for (const th of data.thematiques) { addNode(th) - addEdge(centreId, th.id) + addEdge(centreId, th.id, { central: true }) } for (const proj of data.projets) { addNode(proj) + // V1.3-D : edge explicite projet -> central (pont vision <-> pratique) + if (proj.lien_central) { + addEdge(centreId, proj.id, { central: true }) + } for (const thId of (proj.liens_thematiques || [])) { addEdge(proj.id, thId) } diff --git a/src/components/astro/ColCentre.astro b/src/components/astro/ColCentre.astro index 26ceb80..bc898cc 100644 --- a/src/components/astro/ColCentre.astro +++ b/src/components/astro/ColCentre.astro @@ -1,9 +1,9 @@ --- -// Centre - HAUT : tabs (Carte O mindmap | Chatbot RAG branche PC7). +// Centre - HAUT : Carte O mindmap (V1.3-D : onglet Chatbot retire, bandeau "Sommaire editorial" + legende). // MILIEU : preview article (V1.2-P) - inseree au clic journal-item-click. // BAS : iframe carte AEP (toujours visible). +// V1.3-D : ChatbotV2 retire du DOM (backlog V2). Pour reactivation -> reintroduire le tab + panel. import CarteOWrapper from '../vue/CarteOWrapper.vue'; -import ChatbotV2 from '../vue/ChatbotV2.vue'; import EmbedDynamique from '../vue/EmbedDynamique.vue'; import PreviewArticle from '../vue/PreviewArticle.vue'; --- @@ -19,56 +19,49 @@ import PreviewArticle from '../vue/PreviewArticle.vue'; data-preview-open="false" style="height: 100%; overflow-y: hidden;" > - +
- + +
+ + Sommaire éditorial d'architecture d'écologie politique + +
    +
  • + + publié +
    • +
  • + + à venir +
    • +
  • + + projet +
    • +
+
-
+
-
@@ -260,28 +253,5 @@ import PreviewArticle from '../vue/PreviewArticle.vue'; }); } - // Tabs toggle. - const tabs = document.querySelectorAll('[data-tab]'); - const panels = document.querySelectorAll('[data-tab-panel]'); - - tabs.forEach((tab) => { - tab.addEventListener('click', () => { - const target = tab.dataset.tab; - if (!target) return; - - tabs.forEach((t) => { - const active = t.dataset.tab === target; - t.setAttribute('aria-selected', active ? 'true' : 'false'); - t.classList.toggle('border-neutral-900', active); - t.classList.toggle('border-transparent', !active); - t.classList.toggle('font-medium', active); - t.classList.toggle('text-neutral-900', active); - t.classList.toggle('text-neutral-500', !active); - }); - - panels.forEach((p) => { - p.classList.toggle('hidden', p.dataset.tabPanel !== target); - }); - }); - }); + // V1.3-D : tabs Chatbot retires, plus de toggle a gerer (un seul panel Carte O). diff --git a/src/components/vue/CarteO.vue b/src/components/vue/CarteO.vue index c15c457..794cd56 100644 --- a/src/components/vue/CarteO.vue +++ b/src/components/vue/CarteO.vue @@ -25,12 +25,18 @@ interface CarteNode { // V1.2-O : logos plateforme via Brandfetch CDN (visible zoom > 1.5x seulement) const BRANDFETCH_CLIENT_ID = '4ae58bd85c8140eab0cee72f40656120' const LOGO_ZOOM_THRESHOLD = 1.5 + +// V1.3-D : dimensions rectangle central (phrase manifeste 3 lignes) +const CENTRAL_W = 300 +const CENTRAL_H = 64 +const CENTRAL_COLLIDE_RADIUS = 160 // demi-largeur + marge const logoUrl = (domain: string) => `https://cdn.brandfetch.io/${domain}/w/64/h/64?c=${BRANDFETCH_CLIENT_ID}` interface CarteEdge { source: string | CarteNode target: string | CarteNode + central?: boolean // V1.3-D : link au noeud central (court/fort) } const props = withDefaults(defineProps<{ @@ -118,25 +124,38 @@ function truncate(str: string, max: number): string { return str.length > max ? str.slice(0, max - 1) + '…' : str } -// Split intelligent du label central sur 2-3 lignes (autour de "+") -function splitCentralLabel(label: string): string[] { +// V1.3-D : Wrap intelligent du label central sur 3 lignes (rectangle 300x64). +// Phrase cible : "Une medecine du corps social pour ecrire un nouveau contrat social" +// Heuristique : decoupe en mots, repartit sur ~3 lignes de longueur equilibree. +function splitCentralLabel(label: string, maxLines = 3, maxCharsPerLine = 30): string[] { if (!label) return [''] - // priorite : split sur " + " si present + // Fallback : pivot legacy " + " (V1.2 backward compat) if (label.includes(' + ')) { const parts = label.split(' + ') return [parts[0].trim(), '+', parts.slice(1).join(' + ').trim()] } - // fallback : split a peu pres au milieu sur un espace - if (label.length > 14) { - const mid = Math.floor(label.length / 2) - const left = label.lastIndexOf(' ', mid) - const right = label.indexOf(' ', mid) - const cut = (mid - left <= right - mid && left > 0) ? left : right - if (cut > 0) { - return [label.slice(0, cut).trim(), label.slice(cut).trim()] + const words = label.split(/\s+/).filter(Boolean) + if (words.length <= 1) return [label] + + // Repartit en lignes en respectant maxCharsPerLine, max maxLines lignes + const lines: string[] = [] + let current = '' + for (const w of words) { + const next = current ? `${current} ${w}` : w + if (next.length > maxCharsPerLine && current && lines.length < maxLines - 1) { + lines.push(current) + current = w + } else { + current = next } } - return [label] + if (current) lines.push(current) + // Si plus de lignes que prevu (mots tres longs), concatene les dernieres + while (lines.length > maxLines) { + const last = lines.pop()! + lines[lines.length - 1] = `${lines[lines.length - 1]} ${last}` + } + return lines } function buildSimNodes(): SimNode[] { @@ -232,18 +251,33 @@ function render() { .style('cursor', 'pointer') .on('click', (_event, d) => emit('node-click', { node: d as CarteNode, x: (d as SimNode).x || 0, y: (d as SimNode).y || 0 })) .on('mouseover', function (_event, d) { - d3.select(this).select('circle') + // V1.3-D : selecteur etendu rect|circle (rect pour central, circle pour autres) + d3.select(this).select('rect, circle') .transition().duration(120) .attr('stroke-width', strokeWidthFor(d) + 1.5) }) .on('mouseout', function (_event, d) { - d3.select(this).select('circle') + d3.select(this).select('rect, circle') .transition().duration(120) .attr('stroke-width', strokeWidthFor(d)) }) - // Cercle - nodeGroups.append('circle') + // V1.3-D : nœud central = rectangle 300x64 (phrase 3 lignes), autres = cercle + const isCentral = (d: SimNode) => d.niveau === 0 + + nodeGroups.filter(isCentral) + .append('rect') + .attr('x', -CENTRAL_W / 2) + .attr('y', -CENTRAL_H / 2) + .attr('width', CENTRAL_W) + .attr('height', CENTRAL_H) + .attr('rx', 6) + .attr('fill', d => colorFor(d)) + .attr('stroke', d => strokeFor(d)) + .attr('stroke-width', d => strokeWidthFor(d)) + + nodeGroups.filter(d => !isCentral(d)) + .append('circle') .attr('r', d => getRadius(d)) .attr('fill', d => colorFor(d)) .attr('stroke', d => strokeFor(d)) @@ -256,10 +290,10 @@ function render() { const inside = labelInsideFor(d) if (inside && d.niveau === 0) { - // Noeud central : label en 2 lignes inscrites au centre - const parts = splitCentralLabel(d.label) - const lineHeight = isMobile.value ? 10 : 12 - const fs = isMobile.value ? 9 : 11 + // V1.3-D : noeud central = rectangle, label 3 lignes 13px line-height 1.35 + const fs = isMobile.value ? 11 : 13 + const lineHeight = Math.round(fs * 1.35) + const parts = splitCentralLabel(d.label, 3, isMobile.value ? 22 : 30) const startY = -((parts.length - 1) * lineHeight) / 2 parts.forEach((line, i) => { g.append('text') @@ -269,7 +303,7 @@ function render() { .attr('y', startY + i * lineHeight) .attr('font-size', fs) .attr('font-family', 'system-ui, sans-serif') - .attr('font-weight', 'bold') + .attr('font-weight', '500') .attr('fill', '#FFFFFF') .attr('pointer-events', 'none') .text(line) @@ -332,21 +366,54 @@ function render() { nodeGroups.append('title') .text(d => `${d.label}\n[${d.family}]\n${truncate(d.resume || d.intention || '', 200)}`) - // Simulation force avec charges differenciees par niveau + // V1.3-D : Simulation force-directed fit-cadre + animation continue subtile + // - link distance/strength differencies : TMIP (central) court/fort, autres essais souples + // - collide +12 zero overlap labels + // - forceX/Y faibles rappel cadre + // - alphaDecay 0.025 (anime sans vertige) simulation = d3.forceSimulation(simNodes) .force('link', d3.forceLink(simLinks) .id(d => d.id) - .distance(80) - .strength(0.35)) + .distance(l => { + const link = l as SimLink & { central?: boolean } + // Lien central -> TMIP (projet) = court (90), autres centraux (essais) = standard (200) + if (link.central) { + const tgt = link.target as SimNode + const src = link.source as SimNode + const other = (tgt.niveau === 0 ? src : tgt) as SimNode + if (other.nature === 'projet') return 90 + return 200 + } + return 180 + }) + .strength(l => { + const link = l as SimLink & { central?: boolean } + if (link.central) { + const tgt = link.target as SimNode + const src = link.source as SimNode + const other = (tgt.niveau === 0 ? src : tgt) as SimNode + if (other.nature === 'projet') return 0.6 + return 0.3 + } + return 0.3 + })) .force('charge', d3.forceManyBody().strength(d => { - if (d.niveau === 0) return -800 + if (d.niveau === 0) return -1200 if (d.niveau === 1) return -400 - if (d.niveau === 2) return -150 + if (d.niveau === 2) return -180 return -220 })) .force('center', d3.forceCenter(width.value / 2, height.value / 2)) - .force('collide', d3.forceCollide().radius(d => getRadius(d) + 6)) - .alphaDecay(0.03) + .force('x', d3.forceX(width.value / 2).strength(0.05)) + .force('y', d3.forceY(height.value / 2).strength(0.05)) + .force('collide', d3.forceCollide().radius(d => { + // V1.3-D : central traite comme zone large (rect 300x64 -> rayon equivalent 160) + if (d.niveau === 0) return CENTRAL_COLLIDE_RADIUS + return getRadius(d) + 12 + })) + .alphaDecay(0.025) + .velocityDecay(0.4) + .alphaMin(0.001) .on('tick', tick) // Bind drag once simulation exists. @@ -409,6 +476,8 @@ onMounted(() => { } if (simulation) { simulation.force('center', d3.forceCenter(width.value / 2, height.value / 2)) + simulation.force('x', d3.forceX(width.value / 2).strength(0.05)) + simulation.force('y', d3.forceY(height.value / 2).strength(0.05)) simulation.alpha(0.3).restart() } }) diff --git a/src/components/vue/CarteOWrapper.vue b/src/components/vue/CarteOWrapper.vue index feecad9..af5a014 100644 --- a/src/components/vue/CarteOWrapper.vue +++ b/src/components/vue/CarteOWrapper.vue @@ -19,6 +19,7 @@ interface CarteNode { interface CarteEdge { source: string target: string + central?: boolean // V1.3-D : edges au noeud central (tuning force-link) } interface CarteData {