doc-survival-kit 2.0.0 → 3.11.0

package/diagram/globals.js

@@ -0,0 +1,137 @@
+// ══════════════════════════════════════
+//  globals.js — État global, constantes et helpers de base
+// ══════════════════════════════════════
+
+// ── État global ──
+var currentTool = "select";
+var diagramsList = [];
+var currentDiagramId = null;
+var diagNavStack = [];
+var diagExpandedIds = {};
+var pendingParentId = null;
+var pendingNavDiagId = null;
+var viewTransform = { x: 60, y: 60, scale: 1 };
+var selectedId = null;
+var selectedType = null;   // "shape" | "arrow"
+var selectedIds = [];      // multi-sélection (ids de formes)
+var rubberBandState = null; // { sx, sy } pendant le lasso
+var clipboard = [];        // formes copiées (Ctrl+C / Ctrl+V)
+var pendingImageBlob = null;    // image en attente de sélection du dossier
+var pendingNewDiagram = false;  // true pendant la saisie du nom d'un nouveau diagramme
+var dragState = null;
+var panStart = null;
+var arrowSrcId = null;
+var editingShapeId = null;
+var editingTableCell = null;  // { row, col } | null
+var pickMode = null;          // "fontSize" | "fullStyle" | null
+var pickTargetIds = [];       // selectedIds sauvegardés pendant le pick
+var lastClickTime = 0;
+var lastClickShapeId = null;
+var lastClickArrowId = null;
+var editingArrowId = null;
+var boardLocked = false;
+var diagDragSrcId = null;
+var historyStack = [];
+var MAX_HISTORY = 50;
+
+// ── Palette ──
+var COLORS = {
+  "t-green":  { fill: "rgba(209,250,229,0.75)", stroke: "#059669", text: "#047857" },
+  "t-violet": { fill: "rgba(237,233,254,0.75)", stroke: "#7c3aed", text: "#6d28d9" },
+  "t-amber":  { fill: "rgba(254,243,199,0.75)", stroke: "#d97706", text: "#b45309" },
+  "t-sky":    { fill: "rgba(224,242,254,0.75)", stroke: "#0284c7", text: "#0369a1" },
+  "t-rose":   { fill: "rgba(255,228,230,0.75)", stroke: "#e11d48", text: "#be123c" },
+  "t-teal":   { fill: "rgba(204,251,241,0.75)", stroke: "#0d9488", text: "#0f766e" },
+  "t-white":  { fill: "rgba(255,255,255,0.95)", stroke: "#d4d4d4", text: "#404040" },
+};
+var DEFAULT_COLOR = "t-sky";
+
+var DEFAULT_SIZES = {
+  rect:    { w: 130, h: 50 },
+  rounded: { w: 130, h: 50 },
+  db:      { w: 100, h: 65 },
+  cloud:   { w: 110, h: 65 },
+  nuage:   { w: 121, h: 96 },
+  text:    { w: 110, h: 34 },
+  postit:  { w: 130, h: 110 },
+  actor:   { w: 60,  h: 90 },
+  table:   { w: 210, h: 120 },
+};
+
+// ── Helpers ──
+function escDiag(s) {
+  return String(s)
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function createSVGEl(tag) {
+  return document.createElementNS("http://www.w3.org/2000/svg", tag);
+}
+
+// Découpe le texte d'un post-it en lignes qui tiennent dans maxWidth px.
+// Respecte les \n explicites, puis fait du word-wrap sur les mots.
+var _measureCanvas = null;
+function measureText(str, fontSize, fontWeight) {
+  if (!_measureCanvas) _measureCanvas = document.createElement("canvas");
+  var ctx = _measureCanvas.getContext("2d");
+  ctx.font = (fontWeight || "600") + " " + (fontSize || 12) + "px \"Segoe UI\",system-ui,sans-serif";
+  return ctx.measureText(str).width;
+}
+
+function wrapPostitLines(text, maxWidth, fontSize) {
+  var fs = fontSize || 12;
+  var result = [];
+  (text || "").split("\n").forEach(function (line) {
+    if (line === "") { result.push(""); return; }
+    var words = line.split(" ");
+    var current = "";
+    words.forEach(function (word) {
+      // Si le mot seul dépasse maxWidth, le couper caractère par caractère
+      if (measureText(word, fs, "600") > maxWidth) {
+        if (current !== "") { result.push(current); current = ""; }
+        var chunk = "";
+        for (var ci = 0; ci < word.length; ci++) {
+          var chunkTest = chunk + word[ci];
+          if (measureText(chunkTest, fs, "600") > maxWidth) {
+            if (chunk !== "") result.push(chunk);
+            chunk = word[ci];
+          } else {
+            chunk = chunkTest;
+          }
+        }
+        current = chunk;
+        return;
+      }
+      var test = current ? current + " " + word : word;
+      if (current && measureText(test, fs, "600") > maxWidth) {
+        result.push(current);
+        current = word;
+      } else {
+        current = test;
+      }
+    });
+    if (current !== "") result.push(current);
+  });
+  return result;
+}
+
+// ── Helpers tableau ──
+function getColWidths(shape) {
+  var cols = shape.cols || 3;
+  if (shape.colWidths && shape.colWidths.length === cols) return shape.colWidths;
+  var w = shape.w / cols;
+  var result = [];
+  for (var i = 0; i < cols; i++) result.push(w);
+  return result;
+}
+
+// xOffsets[i] = x du début de la colonne i (relatif à shape.x)
+function getColOffsets(shape) {
+  var cw = getColWidths(shape);
+  var offsets = [0];
+  for (var i = 0; i < cw.length - 1; i++) offsets.push(offsets[i] + cw[i]);
+  return offsets;
+}

package/diagram/links.js

@@ -0,0 +1,141 @@
+// ══════════════════════════════════════
+//  links.js — Lien picker et URLs externes
+// ══════════════════════════════════════
+
+function syncColorPanel() {
+  var btn = document.getElementById("btnShapeLink");
+  if (!btn) return;
+  if (selectedIds.length === 1 && selectedType === "shape") {
+    var diag = getCurrentDiagram();
+    var shape = diag ? diag.shapes.find(function (s) { return s.id === selectedIds[0]; }) : null;
+    if (shape && shape.linkedDiagramId) {
+      btn.classList.add("active");
+      var linked = findDiagramById(shape.linkedDiagramId, diagramsList);
+      btn.title = linked ? "Lié à : " + linked.titre + " (cliquer pour délier)" : "Supprimer le lien";
+    } else if (shape && shape.externalUrl) {
+      btn.classList.add("active");
+      btn.title = "Lien externe : " + shape.externalUrl + " (cliquer pour délier)";
+    } else {
+      btn.classList.remove("active");
+      btn.title = "Lier à un diagramme enfant ou URL externe";
+    }
+    btn.style.display = "";
+  } else {
+    btn.classList.remove("active");
+    btn.style.display = "none";
+  }
+}
+
+function toggleShapeLink() {
+  if (selectedIds.length !== 1 || selectedType !== "shape") return;
+  var diag = getCurrentDiagram();
+  var shape = diag ? diag.shapes.find(function (s) { return s.id === selectedIds[0]; }) : null;
+  if (!shape) return;
+  if (shape.linkedDiagramId || shape.externalUrl) {
+    pushHistory();
+    delete shape.linkedDiagramId;
+    delete shape.externalUrl;
+    saveDiagrammes();
+    renderAll();
+    syncColorPanel();
+    hideLinkPicker();
+  } else {
+    showLinkPicker();
+  }
+}
+
+function showLinkPicker() {
+  var panel = document.getElementById("linkPickerPanel");
+  if (!panel) return;
+  var btn = document.getElementById("btnShapeLink");
+  var r = btn ? btn.getBoundingClientRect() : { bottom: 100, left: 200 };
+  panel.style.top = (r.bottom + 6) + "px";
+  panel.style.left = r.left + "px";
+  var all = flattenDiagrams(diagramsList);
+  var curId = String(currentDiagramId);
+  var items = all.filter(function (d) { return String(d.id) !== curId; });
+  var html = items.map(function (d) {
+    return '<div class="link-picker-item" onclick="lierForme(\'' + d.id + '\')">' + escDiag(d.titre) + '</div>';
+  }).join("");
+  html += '<div class="link-picker-new" onclick="creerEnfantEtLier()">+ Nouveau diagramme enfant</div>';
+  html += '<div class="link-picker-new link-picker-ext-toggle" onclick="showExternalLinkInput()" style="display:flex;align-items:center;gap:6px;">'
+        + '<svg width="14" height="14" viewBox="0 0 14 14"><circle cx="7" cy="7" r="6" fill="#0284c7" stroke="#fff" stroke-width="1.5"/><text x="7" y="10.5" text-anchor="middle" font-size="8" font-weight="bold" fill="#fff">\u2197</text></svg>'
+        + 'Lien externe (URL)</div>';
+  html += '<div id="linkPickerExtRow" style="display:none;padding:6px 8px;border-top:1px solid #e7e5e4;">'
+        + '<input id="linkPickerExtUrl" type="text" placeholder="https://..." '
+        + 'style="width:100%;box-sizing:border-box;padding:4px 6px;border:1px solid #d4d4d4;border-radius:4px;font-size:12px;" '
+        + 'onkeydown="if(event.key===\'Enter\')lierFormeExterne()">'
+        + '<div id="linkPickerExtErr" style="color:#e11d48;font-size:11px;margin-top:3px;display:none;">URL invalide (http://, https:// ou file://)</div>'
+        + '</div>';
+  document.getElementById("linkPickerList").innerHTML = html;
+  panel.style.display = "block";
+}
+
+function showExternalLinkInput() {
+  var row = document.getElementById("linkPickerExtRow");
+  if (!row) return;
+  row.style.display = "block";
+  var input = document.getElementById("linkPickerExtUrl");
+  if (input) setTimeout(function () { input.focus(); }, 10);
+}
+
+function lierFormeExterne() {
+  var input = document.getElementById("linkPickerExtUrl");
+  if (!input) return;
+  var url = input.value.trim();
+  var err = document.getElementById("linkPickerExtErr");
+  if (!/^(https?|file):\/\//i.test(url)) {
+    if (err) err.style.display = "block";
+    return;
+  }
+  if (err) err.style.display = "none";
+  if (selectedIds.length !== 1) return;
+  var diag = getCurrentDiagram();
+  var shape = diag ? diag.shapes.find(function (s) { return s.id === selectedIds[0]; }) : null;
+  if (!shape) return;
+  pushHistory();
+  shape.externalUrl = url;
+  delete shape.linkedDiagramId;
+  hideLinkPicker();
+  saveDiagrammes();
+  renderAll();
+  syncColorPanel();
+}
+
+function hideLinkPicker() {
+  var panel = document.getElementById("linkPickerPanel");
+  if (panel) panel.style.display = "none";
+}
+
+function lierForme(diagId) {
+  if (selectedIds.length !== 1) return;
+  var diag = getCurrentDiagram();
+  var shape = diag ? diag.shapes.find(function (s) { return s.id === selectedIds[0]; }) : null;
+  if (!shape) return;
+  pushHistory();
+  shape.linkedDiagramId = String(diagId);
+  delete shape.externalUrl;
+  hideLinkPicker();
+  saveDiagrammes();
+  renderAll();
+  syncColorPanel();
+}
+
+function creerEnfantEtLier() {
+  if (selectedIds.length !== 1) return;
+  var diag = getCurrentDiagram();
+  var shape = diag ? diag.shapes.find(function (s) { return s.id === selectedIds[0]; }) : null;
+  if (!shape) return;
+  hideLinkPicker();
+  var titre = shape.text || "Sous-diagramme";
+  var child = { id: Date.now(), titre: titre, shapes: [], arrows: [], children: [] };
+  if (!diag.children) diag.children = [];
+  diag.children.push(child);
+  diagExpandedIds[String(diag.id)] = true;
+  pushHistory();
+  shape.linkedDiagramId = String(child.id);
+  saveDiagrammes();
+  renderAll();
+  renderDiagramList();
+  syncColorPanel();
+}

package/diagram/persistence.js

@@ -0,0 +1,295 @@
+// ══════════════════════════════════════
+//  persistence.js — Chargement, sauvegarde, historique, verrou, zoom, File System API, images
+// ══════════════════════════════════════
+
+// ── Persistance localStorage ──
+function loadDiagrammes() {
+  try {
+    var stored = JSON.parse(localStorage.getItem("mes_diagrammes"));
+    if (stored && stored.length) {
+      var migrate = function (list) {
+        list.forEach(function (d) {
+          if (!d.children) d.children = [];
+          migrate(d.children);
+        });
+      };
+      migrate(stored);
+      return stored;
+    }
+  } catch (e) {}
+  var defaults = JSON.parse(JSON.stringify(diagrammesDefaut));
+  var migrate2 = function (list) {
+    list.forEach(function (d) {
+      if (!d.children) d.children = [];
+      migrate2(d.children);
+    });
+  };
+  migrate2(defaults);
+  return defaults;
+}
+
+function saveDiagrammes() {
+  localStorage.setItem("mes_diagrammes", JSON.stringify(diagramsList));
+  checkDiffDiagrammes();
+}
+
+function pushHistory() {
+  historyStack.push(JSON.stringify(diagramsList));
+  if (historyStack.length > MAX_HISTORY) historyStack.shift();
+}
+
+function undoAction() {
+  if (historyStack.length === 0) return;
+  diagramsList = JSON.parse(historyStack.pop());
+  if (!findDiagramById(currentDiagramId, diagramsList)) {
+    currentDiagramId = diagramsList[0] ? String(diagramsList[0].id) : null;
+  }
+  saveDiagrammes();
+  renderAll();
+  renderDiagramList();
+}
+
+function checkDiffDiagrammes() {
+  var stored = localStorage.getItem("mes_diagrammes");
+  var diff = stored !== JSON.stringify(diagrammesDefaut);
+  document.getElementById("btnSaveDiagram").style.display = diff ? "inline-flex" : "none";
+}
+
+// ── Verrouillage par diagramme ──
+var LOCK_OPEN_SVG   = '<svg width="14" height="16" viewBox="0 0 14 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="7" width="12" height="8" rx="2"/><path d="M4 7V4.5a3 3 0 0 1 6 0"/></svg>';
+var LOCK_CLOSED_SVG = '<svg width="14" height="16" viewBox="0 0 14 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="7" width="12" height="8" rx="2"/><path d="M4 7V5a3 3 0 0 1 6 0v2"/></svg>';
+
+function getLockMap() {
+  try { return JSON.parse(localStorage.getItem("diagrammes_lock") || "{}"); } catch(e) { return {}; }
+}
+function saveCurrentLock() {
+  var diag = getCurrentDiagram();
+  if (!diag) return;
+  var map = getLockMap();
+  map[diag.id] = boardLocked;
+  localStorage.setItem("diagrammes_lock", JSON.stringify(map));
+}
+function restoreLockForDiagram(diagId) {
+  var diag = findDiagramById(diagId, diagramsList);
+  if (!diag) return;
+  var map = getLockMap();
+  boardLocked = map[diag.id] === true;
+}
+function toggleBoardLock() {
+  boardLocked = !boardLocked;
+  saveCurrentLock();
+  if (boardLocked) {
+    selectedId = null; selectedType = null;
+    selectedIds = [];
+    document.getElementById("colorPanel").style.display = "none";
+    renderAll();
+  }
+  updateLockBtn();
+}
+function updateLockBtn() {
+  var btn = document.getElementById("btnLock");
+  if (!btn) return;
+  btn.innerHTML = boardLocked ? LOCK_CLOSED_SVG : LOCK_OPEN_SVG;
+  btn.title = boardLocked ? "Déverrouiller le diagramme" : "Verrouiller le diagramme";
+  btn.classList.toggle("active", boardLocked);
+}
+
+// ── Zoom par diagramme ──
+function getZoomMap() {
+  try { return JSON.parse(localStorage.getItem("diagrammes_zoom") || "{}"); } catch(e) { return {}; }
+}
+function saveCurrentZoom() {
+  var diag = getCurrentDiagram();
+  if (!diag) return;
+  var map = getZoomMap();
+  map[diag.id] = viewTransform.scale;
+  localStorage.setItem("diagrammes_zoom", JSON.stringify(map));
+}
+function restoreZoomForDiagram(diagId) {
+  var diag = findDiagramById(diagId, diagramsList);
+  if (!diag) return;
+  var map = getZoomMap();
+  viewTransform.scale = map[diag.id] !== undefined ? map[diag.id] : 1;
+}
+
+// ── File System Access API ──
+var IDB_KEY_DIAG = "diagrammes";
+var IDB_KEY_DIR  = "diagrammes_dir";
+
+function ouvrirDB_Diag() {
+  return new Promise(function (resolve, reject) {
+    var req = indexedDB.open("doc-survival-kit-db", 1);
+    req.onupgradeneeded = function (e) {
+      e.target.result.createObjectStore("fileHandles");
+    };
+    req.onsuccess = function (e) { resolve(e.target.result); };
+    req.onerror  = function (e) { reject(e.target.error); };
+  });
+}
+
+function sauvegarderHandle_Diag(handle) {
+  return ouvrirDB_Diag().then(function (db) {
+    return new Promise(function (resolve, reject) {
+      var tx = db.transaction("fileHandles", "readwrite");
+      tx.objectStore("fileHandles").put(handle, IDB_KEY_DIAG);
+      tx.oncomplete = resolve;
+      tx.onerror = function (e) { reject(e.target.error); };
+    });
+  });
+}
+
+function recupererHandle_Diag() {
+  return ouvrirDB_Diag().then(function (db) {
+    return new Promise(function (resolve, reject) {
+      var tx = db.transaction("fileHandles", "readonly");
+      var req = tx.objectStore("fileHandles").get(IDB_KEY_DIAG);
+      req.onsuccess = function (e) { resolve(e.target.result || null); };
+      req.onerror  = function (e) { reject(e.target.error); };
+    });
+  });
+}
+
+function sauvegarderDirHandle(handle) {
+  return ouvrirDB_Diag().then(function (db) {
+    return new Promise(function (resolve, reject) {
+      var tx = db.transaction("fileHandles", "readwrite");
+      tx.objectStore("fileHandles").put(handle, IDB_KEY_DIR);
+      tx.oncomplete = resolve;
+      tx.onerror = function (e) { reject(e.target.error); };
+    });
+  });
+}
+
+function recupererDirHandle() {
+  return ouvrirDB_Diag().then(function (db) {
+    return new Promise(function (resolve, reject) {
+      var tx = db.transaction("fileHandles", "readonly");
+      var req = tx.objectStore("fileHandles").get(IDB_KEY_DIR);
+      req.onsuccess = function (e) { resolve(e.target.result || null); };
+      req.onerror  = function (e) { reject(e.target.error); };
+    });
+  });
+}
+
+function enregistrerDiagrammes() {
+  if (!("showDirectoryPicker" in window)) return;
+  recupererHandle_Diag().then(function (handle) {
+    if (!handle) {
+      document.getElementById("erreurFichierDiag").style.display = "none";
+      document.getElementById("modalPremiereSauvegardeDiag").classList.add("open");
+    } else {
+      ecrireFichierDiag(handle);
+    }
+  });
+}
+
+function fermerModalSauvegardeDiag() {
+  document.getElementById("modalPremiereSauvegardeDiag").classList.remove("open");
+}
+
+function ouvrirSelecteurFichierDiag() {
+  fermerModalSauvegardeDiag();
+  var capturedDir = null;
+  window.showDirectoryPicker()
+    .then(function (dir) {
+      capturedDir = dir;
+      sauvegarderDirHandle(dir);
+      return dir.getFileHandle("diagrammes.js");
+    })
+    .then(function (handle) {
+      document.getElementById("erreurFichierDiag").style.display = "none";
+      return sauvegarderHandle_Diag(handle).then(function () {
+        return ecrireFichierDiag(handle);
+      }).then(function () {
+        if (pendingImageBlob && capturedDir) {
+          var blob = pendingImageBlob;
+          pendingImageBlob = null;
+          enregistrerImageDansBoard(blob, capturedDir);
+        }
+      });
+    })
+    .catch(function (err) {
+      if (err.name === "NotFoundError") {
+        document.getElementById("erreurFichierDiag").style.display = "block";
+        document.getElementById("modalPremiereSauvegardeDiag").classList.add("open");
+      } else if (err.name !== "AbortError") {
+        console.error(err);
+      }
+    });
+}
+
+function ecrireFichierDiag(handle) {
+  return handle.queryPermission({ mode: "readwrite" })
+    .then(function (p) {
+      if (p !== "granted") return handle.requestPermission({ mode: "readwrite" });
+      return p;
+    })
+    .then(function (p) {
+      if (p !== "granted") return;
+      var content = "var diagrammesDefaut = " + JSON.stringify(diagramsList, null, 2) + ";\n";
+      return handle.createWritable().then(function (w) {
+        return w.write(content).then(function () { return w.close(); });
+      }).then(function () {
+        diagrammesDefaut = JSON.parse(JSON.stringify(diagramsList));
+        checkDiffDiagrammes();
+      });
+    })
+    .catch(function (err) { console.error(err); });
+}
+
+// ── Image paste ──
+function handleImagePaste(blob) {
+  recupererDirHandle().then(function (dirHandle) {
+    if (!dirHandle) {
+      pendingImageBlob = blob;
+      document.getElementById("erreurFichierDiag").style.display = "none";
+      document.getElementById("modalPremiereSauvegardeDiag").classList.add("open");
+    } else {
+      dirHandle.queryPermission({ mode: "readwrite" }).then(function (p) {
+        if (p !== "granted") return dirHandle.requestPermission({ mode: "readwrite" }).then(function (p2) { return p2; });
+        return p;
+      }).then(function (p) {
+        if (p === "granted") enregistrerImageDansBoard(blob, dirHandle);
+      });
+    }
+  });
+}
+
+function enregistrerImageDansBoard(blob, dirHandle) {
+  var filename = "img_" + Date.now() + ".png";
+  var src = "images/" + filename;
+  dirHandle.getDirectoryHandle("images", { create: true })
+    .then(function (imagesDir) {
+      return imagesDir.getFileHandle(filename, { create: true });
+    })
+    .then(function (fileHandle) {
+      return fileHandle.createWritable().then(function (w) {
+        return w.write(blob).then(function () { return w.close(); });
+      });
+    })
+    .then(function () {
+      // Lire les dimensions réelles de l'image
+      var url = URL.createObjectURL(blob);
+      var img = new Image();
+      img.onload = function () {
+        URL.revokeObjectURL(url);
+        var maxW = 600;
+        var w = Math.min(img.naturalWidth, maxW);
+        var h = Math.round(img.naturalHeight * (w / img.naturalWidth));
+        // Centrer sur la vue courante
+        var svg = document.getElementById("canvas");
+        var r = svg.getBoundingClientRect();
+        var cx = Math.round((r.width  / 2 - viewTransform.x) / viewTransform.scale - w / 2);
+        var cy = Math.round((r.height / 2 - viewTransform.y) / viewTransform.scale - h / 2);
+        var diag = getCurrentDiagram();
+        var shape = { id: "s" + Date.now(), type: "image", x: cx, y: cy, w: w, h: h, text: "", color: "", src: src };
+        diag.shapes.push(shape);
+        selectedIds = [shape.id];  selectedId = shape.id;  selectedType = "shape";
+        saveDiagrammes();
+        renderAll();
+        document.getElementById("colorPanel").style.display = "none";
+      };
+      img.src = url;
+    })
+    .catch(function (err) { console.error("Image paste error:", err); });
+}