feat(v13-d): Carte O Option B rectangle central + bandeau sommaire + legende + TMIP relie
- 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.
This commit is contained in:
@@ -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<SimNode, SimLink>(simNodes)
|
||||
.force('link', d3.forceLink<SimNode, SimLink>(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<SimNode>().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<SimNode>().radius(d => getRadius(d) + 6))
|
||||
.alphaDecay(0.03)
|
||||
.force('x', d3.forceX<SimNode>(width.value / 2).strength(0.05))
|
||||
.force('y', d3.forceY<SimNode>(height.value / 2).strength(0.05))
|
||||
.force('collide', d3.forceCollide<SimNode>().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<SimNode>(width.value / 2).strength(0.05))
|
||||
simulation.force('y', d3.forceY<SimNode>(height.value / 2).strength(0.05))
|
||||
simulation.alpha(0.3).restart()
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user