markmap-view
Advanced tools
Comparing version 0.17.0 to 0.17.1-alpha.4
@@ -366,2 +366,3 @@ (function(exports, d32) { | ||
fitRatio: 0.95, | ||
maxInitialScale: 2, | ||
maxWidth: 0, | ||
@@ -402,3 +403,9 @@ nodeMinHeight: 16, | ||
} | ||
const numberKeys = ["duration", "maxWidth", "initialExpandLevel"]; | ||
const numberKeys = [ | ||
"duration", | ||
"maxWidth", | ||
"initialExpandLevel", | ||
"fitRatio", | ||
"maxInitialScale" | ||
]; | ||
numberKeys.forEach((key) => { | ||
@@ -1536,3 +1543,3 @@ const value = options[key]; | ||
*/ | ||
async fit() { | ||
async fit(maxScale = this.options.maxInitialScale) { | ||
const svgNode = this.svg.node(); | ||
@@ -1547,3 +1554,3 @@ const { width: offsetWidth, height: offsetHeight } = svgNode.getBoundingClientRect(); | ||
offsetHeight / naturalHeight * fitRatio, | ||
2 | ||
maxScale | ||
); | ||
@@ -1632,3 +1639,5 @@ const initialZoom = d32.zoomIdentity.translate( | ||
mm.setData(data); | ||
mm.fit(); | ||
requestAnimationFrame(() => { | ||
mm.fit(); | ||
}); | ||
} | ||
@@ -1635,0 +1644,0 @@ return mm; |
import { Hook as st, getId as at, debounce as lt, addClass as ct, walkTree as T, childSelector as C, noop as M } from "markmap-common"; | ||
import { loadCSS as Ce, loadJS as we } from "markmap-common"; | ||
import { scaleOrdinal as V, schemeCategory10 as ht, zoomTransform as A, select as dt, zoom as ut, linkHorizontal as pt, min as H, max as L, zoomIdentity as mt, minIndex as ft } from "d3"; | ||
import { scaleOrdinal as V, schemeCategory10 as ht, zoomTransform as A, select as dt, zoom as ut, linkHorizontal as pt, min as I, max as H, zoomIdentity as mt, minIndex as ft } from "d3"; | ||
const K = typeof navigator < "u" && navigator.userAgent.includes("Macintosh"), gt = V(ht), P = { | ||
@@ -13,2 +13,3 @@ autoFit: !1, | ||
fitRatio: 0.95, | ||
maxInitialScale: 2, | ||
maxWidth: 0, | ||
@@ -26,8 +27,8 @@ nodeMinHeight: 16, | ||
function Se(e) { | ||
const t = {}, n = { ...e }, { color: r, colorFreezeLevel: o } = n; | ||
if ((r == null ? void 0 : r.length) === 1) { | ||
const s = r[0]; | ||
const t = {}, n = { ...e }, { color: i, colorFreezeLevel: o } = n; | ||
if ((i == null ? void 0 : i.length) === 1) { | ||
const s = i[0]; | ||
t.color = () => s; | ||
} else if (r != null && r.length) { | ||
const s = V(r); | ||
} else if (i != null && i.length) { | ||
const s = V(i); | ||
t.color = (l) => s(`${l.state.path}`); | ||
@@ -45,3 +46,9 @@ } | ||
} | ||
return ["duration", "maxWidth", "initialExpandLevel"].forEach((s) => { | ||
return [ | ||
"duration", | ||
"maxWidth", | ||
"initialExpandLevel", | ||
"fitRatio", | ||
"maxInitialScale" | ||
].forEach((s) => { | ||
const l = n[s]; | ||
@@ -80,15 +87,15 @@ typeof l == "number" && (t[s] = l); | ||
}; | ||
function I(e, t) { | ||
function L(e, t) { | ||
Array.isArray(t) || (t = [t]), t = t.filter(Boolean), t.length && e.append(...t); | ||
} | ||
function Et(e, t, n) { | ||
for (const r in t) | ||
if (!(r === "key" || r === "children" || r === "ref")) | ||
if (r === "dangerouslySetInnerHTML") | ||
e.innerHTML = t[r].__html; | ||
else if (r === "innerHTML" || r === "textContent" || r === "innerText" || r === "value" && ["textarea", "select"].includes(e.tagName)) { | ||
const o = t[r]; | ||
o != null && (e[r] = o); | ||
for (const i in t) | ||
if (!(i === "key" || i === "children" || i === "ref")) | ||
if (i === "dangerouslySetInnerHTML") | ||
e.innerHTML = t[i].__html; | ||
else if (i === "innerHTML" || i === "textContent" || i === "innerText" || i === "value" && ["textarea", "select"].includes(e.tagName)) { | ||
const o = t[i]; | ||
o != null && (e[i] = o); | ||
} else | ||
r.startsWith("on") ? e[r.toLowerCase()] = t[r] : wt(e, r, t[r], n.isSvg); | ||
i.startsWith("on") ? e[i.toLowerCase()] = t[i] : wt(e, i, t[i], n.isSvg); | ||
} | ||
@@ -99,3 +106,3 @@ const Ct = { | ||
}; | ||
function wt(e, t, n, r) { | ||
function wt(e, t, n, i) { | ||
if (t = Ct[t] || t, n === !0) | ||
@@ -106,3 +113,3 @@ e.setAttribute(t, ""); | ||
else { | ||
const o = r ? yt[t] : void 0; | ||
const o = i ? yt[t] : void 0; | ||
o !== void 0 ? e.setAttributeNS(o, t, n) : e.setAttribute(t, n); | ||
@@ -125,13 +132,13 @@ } | ||
type: n, | ||
props: r | ||
props: i | ||
} = e; | ||
if (n === bt) { | ||
const a = document.createDocumentFragment(); | ||
if (r.children) { | ||
const c = $(r.children, t); | ||
I(a, c); | ||
if (i.children) { | ||
const c = $(i.children, t); | ||
L(a, c); | ||
} | ||
return a; | ||
} | ||
const o = n(r); | ||
const o = n(i); | ||
return B(o, t); | ||
@@ -144,14 +151,14 @@ } | ||
const { | ||
type: r, | ||
type: i, | ||
props: o | ||
} = e; | ||
if (!t.isSvg && r === "svg" && (t = Object.assign({}, t, { | ||
if (!t.isSvg && i === "svg" && (t = Object.assign({}, t, { | ||
isSvg: !0 | ||
})), t.isSvg ? n = document.createElementNS(xt, r) : n = document.createElement(r), Et(n, o, t), o.children) { | ||
})), t.isSvg ? n = document.createElementNS(xt, i) : n = document.createElement(i), Et(n, o, t), o.children) { | ||
let c = t; | ||
t.isSvg && r === "foreignObject" && (c = Object.assign({}, c, { | ||
t.isSvg && i === "foreignObject" && (c = Object.assign({}, c, { | ||
isSvg: !1 | ||
})); | ||
const s = $(o.children, c); | ||
s != null && I(n, s); | ||
s != null && L(n, s); | ||
} | ||
@@ -169,8 +176,8 @@ const { | ||
function jt(e) { | ||
var t = 0, n = e.children, r = n && n.length; | ||
if (!r) | ||
var t = 0, n = e.children, i = n && n.length; | ||
if (!i) | ||
t = 1; | ||
else | ||
for (; --r >= 0; ) | ||
t += n[r].value; | ||
for (; --i >= 0; ) | ||
t += n[i].value; | ||
e.value = t; | ||
@@ -182,24 +189,24 @@ } | ||
function Rt(e) { | ||
var t = this, n, r = [t], o, a, c; | ||
var t = this, n, i = [t], o, a, c; | ||
do | ||
for (n = r.reverse(), r = []; t = n.pop(); ) | ||
for (n = i.reverse(), i = []; t = n.pop(); ) | ||
if (e(t), o = t.children, o) | ||
for (a = 0, c = o.length; a < c; ++a) | ||
r.push(o[a]); | ||
while (r.length); | ||
i.push(o[a]); | ||
while (i.length); | ||
return this; | ||
} | ||
function Tt(e) { | ||
for (var t = this, n = [t], r, o; t = n.pop(); ) | ||
if (e(t), r = t.children, r) | ||
for (o = r.length - 1; o >= 0; --o) | ||
n.push(r[o]); | ||
for (var t = this, n = [t], i, o; t = n.pop(); ) | ||
if (e(t), i = t.children, i) | ||
for (o = i.length - 1; o >= 0; --o) | ||
n.push(i[o]); | ||
return this; | ||
} | ||
function Mt(e) { | ||
for (var t = this, n = [t], r = [], o, a, c; t = n.pop(); ) | ||
if (r.push(t), o = t.children, o) | ||
for (var t = this, n = [t], i = [], o, a, c; t = n.pop(); ) | ||
if (i.push(t), o = t.children, o) | ||
for (a = 0, c = o.length; a < c; ++a) | ||
n.push(o[a]); | ||
for (; t = r.pop(); ) | ||
for (; t = i.pop(); ) | ||
e(t); | ||
@@ -210,4 +217,4 @@ return this; | ||
return this.eachAfter(function(t) { | ||
for (var n = +e(t.data) || 0, r = t.children, o = r && r.length; --o >= 0; ) | ||
n += r[o].value; | ||
for (var n = +e(t.data) || 0, i = t.children, o = i && i.length; --o >= 0; ) | ||
n += i[o].value; | ||
t.value = n; | ||
@@ -222,7 +229,7 @@ }); | ||
function Ot(e) { | ||
for (var t = this, n = Dt(t, e), r = [t]; t !== n; ) | ||
t = t.parent, r.push(t); | ||
for (var o = r.length; e !== n; ) | ||
r.splice(o, 0, e), e = e.parent; | ||
return r; | ||
for (var t = this, n = Dt(t, e), i = [t]; t !== n; ) | ||
t = t.parent, i.push(t); | ||
for (var o = i.length; e !== n; ) | ||
i.splice(o, 0, e), e = e.parent; | ||
return i; | ||
} | ||
@@ -232,5 +239,5 @@ function Dt(e, t) { | ||
return e; | ||
var n = e.ancestors(), r = t.ancestors(), o = null; | ||
for (e = n.pop(), t = r.pop(); e === t; ) | ||
o = e, e = n.pop(), t = r.pop(); | ||
var n = e.ancestors(), i = t.ancestors(), o = null; | ||
for (e = n.pop(), t = i.pop(); e === t; ) | ||
o = e, e = n.pop(), t = i.pop(); | ||
return o; | ||
@@ -255,3 +262,3 @@ } | ||
} | ||
function Ht() { | ||
function It() { | ||
var e = this, t = []; | ||
@@ -263,5 +270,5 @@ return e.each(function(n) { | ||
function F(e, t) { | ||
var n = new N(e), r = +e.value && (n.value = e.value), o, a = [n], c, s, l, p; | ||
for (t == null && (t = It); o = a.pop(); ) | ||
if (r && (o.value = +o.data.value), (s = t(o.data)) && (p = s.length)) | ||
var n = new N(e), i = +e.value && (n.value = e.value), o, a = [n], c, s, l, p; | ||
for (t == null && (t = Lt); o = a.pop(); ) | ||
if (i && (o.value = +o.data.value), (s = t(o.data)) && (p = s.length)) | ||
for (o.children = new Array(p), l = p - 1; l >= 0; --l) | ||
@@ -271,6 +278,6 @@ a.push(c = o.children[l] = new N(s[l])), c.parent = o, c.depth = o.depth + 1; | ||
} | ||
function Lt() { | ||
function Ht() { | ||
return F(this).eachBefore(Wt); | ||
} | ||
function It(e) { | ||
function Lt(e) { | ||
return e.children; | ||
@@ -302,4 +309,4 @@ } | ||
leaves: Ft, | ||
links: Ht, | ||
copy: Lt | ||
links: It, | ||
copy: Ht | ||
}; | ||
@@ -338,3 +345,3 @@ const Vt = "d3-flextree", Kt = "2.1.2", Pt = "build/d3-flextree.js", Ut = "index", Gt = { | ||
"d3-hierarchy": "^1.1.5" | ||
}, re = { | ||
}, ie = { | ||
"babel-plugin-external-helpers": "^6.22.0", | ||
@@ -355,3 +362,3 @@ "babel-preset-es2015-rollup": "^3.0.0", | ||
"uglify-es": "^3.3.9" | ||
}, ie = { | ||
}, re = { | ||
name: Vt, | ||
@@ -370,4 +377,4 @@ version: Kt, | ||
dependencies: ne, | ||
devDependencies: re | ||
}, { version: oe } = ie, se = Object.freeze({ | ||
devDependencies: ie | ||
}, { version: oe } = re, se = Object.freeze({ | ||
children: (e) => e.children, | ||
@@ -383,3 +390,3 @@ nodeSize: (e) => e.data.size, | ||
} | ||
function r(s) { | ||
function i(s) { | ||
const l = c(a(), s, (p) => p.children); | ||
@@ -530,11 +537,11 @@ return l.update(), l.data; | ||
} | ||
return Object.assign(r, { | ||
return Object.assign(i, { | ||
nodeSize(s) { | ||
return arguments.length ? (t.nodeSize = s, r) : t.nodeSize; | ||
return arguments.length ? (t.nodeSize = s, i) : t.nodeSize; | ||
}, | ||
spacing(s) { | ||
return arguments.length ? (t.spacing = s, r) : t.spacing; | ||
return arguments.length ? (t.spacing = s, i) : t.spacing; | ||
}, | ||
children(s) { | ||
return arguments.length ? (t.children = s, r) : t.children; | ||
return arguments.length ? (t.children = s, i) : t.children; | ||
}, | ||
@@ -553,9 +560,9 @@ hierarchy(s, l) { | ||
} | ||
}), r; | ||
}), i; | ||
} | ||
q.version = oe; | ||
const J = (e, t = 0) => (e.y = t, (e.children || []).reduce((n, r) => { | ||
const J = (e, t = 0) => (e.y = t, (e.children || []).reduce((n, i) => { | ||
const [o, a] = n; | ||
J(r, e.y + e.ySize); | ||
const c = (o === 0 ? r.lExt : r.rExt).bottom; | ||
J(i, e.y + e.ySize); | ||
const c = (o === 0 ? i.lExt : i.rExt).bottom; | ||
o !== 0 && le(e, o, a); | ||
@@ -566,12 +573,12 @@ const s = ge(c, o, a); | ||
typeof t > "u" && (t = -e.relX - e.prelim, n = 0); | ||
const r = t + e.relX; | ||
return e.relX = r + e.prelim - n, e.prelim = 0, e.x = n + e.relX, (e.children || []).forEach((o) => Q(o, r, e.x)), e; | ||
const i = t + e.relX; | ||
return e.relX = i + e.prelim - n, e.prelim = 0, e.x = n + e.relX, (e.children || []).forEach((o) => Q(o, i, e.x)), e; | ||
}, ae = (e) => { | ||
(e.children || []).reduce((t, n) => { | ||
const [r, o] = t, a = r + n.shift, c = o + a + n.change; | ||
const [i, o] = t, a = i + n.shift, c = o + a + n.change; | ||
return n.relX += c, [a, c]; | ||
}, [0, 0]); | ||
}, le = (e, t, n) => { | ||
const r = e.children[t - 1], o = e.children[t]; | ||
let a = r, c = r.relX, s = o, l = o.relX, p = !0; | ||
const i = e.children[t - 1], o = e.children[t]; | ||
let a = i, c = i.relX, s = o, l = o.relX, p = !0; | ||
for (; a && s; ) { | ||
@@ -587,23 +594,23 @@ a.bottom > n.lowY && (n = n.next); | ||
e.relX += t, e.lExtRelX += t, e.rExtRelX += t; | ||
}, he = (e, t, n, r) => { | ||
}, he = (e, t, n, i) => { | ||
const o = e.children[t], a = t - n; | ||
if (a > 1) { | ||
const c = r / a; | ||
e.children[n + 1].shift += c, o.shift -= c, o.change -= r - c; | ||
const c = i / a; | ||
e.children[n + 1].shift += c, o.shift -= c, o.change -= i - c; | ||
} | ||
}, de = (e) => e.hasChildren ? e.firstChild : e.lThr, ue = (e) => e.hasChildren ? e.lastChild : e.rThr, pe = (e, t, n, r) => { | ||
}, de = (e) => e.hasChildren ? e.firstChild : e.lThr, ue = (e) => e.hasChildren ? e.lastChild : e.rThr, pe = (e, t, n, i) => { | ||
const o = e.firstChild, a = o.lExt, c = e.children[t]; | ||
a.lThr = n; | ||
const s = r - n.relX - o.lExtRelX; | ||
const s = i - n.relX - o.lExtRelX; | ||
a.relX += s, a.prelim -= s, o.lExt = c.lExt, o.lExtRelX = c.lExtRelX; | ||
}, me = (e, t, n, r) => { | ||
}, me = (e, t, n, i) => { | ||
const o = e.children[t], a = o.rExt, c = e.children[t - 1]; | ||
a.rThr = n; | ||
const s = r - n.relX - o.rExtRelX; | ||
const s = i - n.relX - o.rExtRelX; | ||
a.relX += s, a.prelim -= s, o.rExt = c.rExt, o.rExtRelX = c.rExtRelX; | ||
}, fe = (e) => { | ||
if (e.hasChildren) { | ||
const t = e.firstChild, n = e.lastChild, r = (t.prelim + t.relX - t.xSize / 2 + n.relX + n.prelim + n.xSize / 2) / 2; | ||
const t = e.firstChild, n = e.lastChild, i = (t.prelim + t.relX - t.xSize / 2 + n.relX + n.prelim + n.xSize / 2) / 2; | ||
Object.assign(e, { | ||
prelim: r, | ||
prelim: i, | ||
lExt: t.lExt, | ||
@@ -638,16 +645,16 @@ lExtRelX: t.lExtRelX, | ||
constructor(t, n) { | ||
this.options = P, this.revokers = [], this.imgCache = {}, this.handleZoom = (r) => { | ||
const { transform: o } = r; | ||
this.options = P, this.revokers = [], this.imgCache = {}, this.handleZoom = (i) => { | ||
const { transform: o } = i; | ||
this.g.attr("transform", o); | ||
}, this.handlePan = (r) => { | ||
r.preventDefault(); | ||
}, this.handlePan = (i) => { | ||
i.preventDefault(); | ||
const o = A(this.svg.node()), a = o.translate( | ||
-r.deltaX / o.k, | ||
-r.deltaY / o.k | ||
-i.deltaX / o.k, | ||
-i.deltaY / o.k | ||
); | ||
this.svg.call(this.zoom.transform, a); | ||
}, this.handleClick = (r, o) => { | ||
}, this.handleClick = (i, o) => { | ||
let a = this.options.toggleRecursively; | ||
(K ? r.metaKey : r.ctrlKey) && (a = !a), this.toggleNode(o.data, a); | ||
}, this.svg = t.datum ? t : dt(t), this.styleNode = this.svg.append("style"), this.zoom = ut().filter((r) => this.options.scrollForPan && r.type === "wheel" ? r.ctrlKey && !r.button : (!r.ctrlKey || r.type === "wheel") && !r.button).on("zoom", this.handleZoom), this.setOptions(n), this.state = { | ||
(K ? i.metaKey : i.ctrlKey) && (a = !a), this.toggleNode(o.data, a); | ||
}, this.svg = t.datum ? t : dt(t), this.styleNode = this.svg.append("style"), this.zoom = ut().filter((i) => this.options.scrollForPan && i.type === "wheel" ? i.ctrlKey && !i.button : (!i.ctrlKey || i.type === "wheel") && !i.button).on("zoom", this.handleZoom), this.setOptions(n), this.state = { | ||
id: this.options.id || this.svg.attr("id") || at(), | ||
@@ -665,4 +672,4 @@ minX: 0, | ||
getStyleContent() { | ||
const { style: t } = this.options, { id: n } = this.state, r = typeof t == "function" ? t(n) : ""; | ||
return [this.options.embedGlobalCSS && tt, r].filter(Boolean).join(` | ||
const { style: t } = this.options, { id: n } = this.state, i = typeof t == "function" ? t(n) : ""; | ||
return [this.options.embedGlobalCSS && tt, i].filter(Boolean).join(` | ||
`); | ||
@@ -680,7 +687,7 @@ } | ||
var o, a; | ||
const r = (o = t.payload) != null && o.fold ? 0 : 1; | ||
const i = (o = t.payload) != null && o.fold ? 0 : 1; | ||
n ? T(t, (c, s) => { | ||
c.payload = { | ||
...c.payload, | ||
fold: r | ||
fold: i | ||
}, s(); | ||
@@ -694,3 +701,3 @@ }) : t.payload = { | ||
let n = 0; | ||
const { color: r, nodeMinHeight: o, maxWidth: a, initialExpandLevel: c } = this.options, { id: s } = this.state, l = O( | ||
const { color: i, nodeMinHeight: o, maxWidth: a, initialExpandLevel: c } = this.options, { id: s } = this.state, l = O( | ||
/* @__PURE__ */ j("div", { className: `markmap-container markmap ${s}-g` }) | ||
@@ -722,3 +729,3 @@ ), p = O( | ||
el: k.firstChild | ||
}, m.state.path = [(w = f == null ? void 0 : f.state) == null ? void 0 : w.path, m.state.id].filter(Boolean).join("."), r(m); | ||
}, m.state.path = [(w = f == null ? void 0 : f.state) == null ? void 0 : w.path, m.state.id].filter(Boolean).join("."), i(m); | ||
const v = ((z = m.payload) == null ? void 0 : z.fold) === 2; | ||
@@ -747,4 +754,4 @@ v ? u += 1 : (u || c >= 0 && m.state.depth >= c) && (m.payload = { ...m.payload, fold: 1 }), y(), v && (u -= 1), g -= 1; | ||
return; | ||
const r = this.imgCache[n.src]; | ||
r != null && r[0] ? [n.width, n.height] = r : r || this._loadImage(n.src); | ||
const i = this.imgCache[n.src]; | ||
i != null && i[0] ? [n.width, n.height] = i : i || this._loadImage(n.src); | ||
}); | ||
@@ -771,12 +778,12 @@ } | ||
return; | ||
const { spacingHorizontal: n, paddingX: r, spacingVertical: o, autoFit: a, color: c } = this.options, s = q({}).children((i) => { | ||
const { spacingHorizontal: n, paddingX: i, spacingVertical: o, autoFit: a, color: c } = this.options, s = q({}).children((r) => { | ||
var d; | ||
if (!((d = i.payload) != null && d.fold)) | ||
return i.children; | ||
}).nodeSize((i) => { | ||
const [d, S] = i.data.state.size; | ||
return [S, d + (d ? r * 2 : 0) + n]; | ||
}).spacing((i, d) => i.parent === d.parent ? o : o * 2), l = s.hierarchy(this.state.data); | ||
if (!((d = r.payload) != null && d.fold)) | ||
return r.children; | ||
}).nodeSize((r) => { | ||
const [d, S] = r.data.state.size; | ||
return [S, d + (d ? i * 2 : 0) + n]; | ||
}).spacing((r, d) => r.parent === d.parent ? o : o * 2), l = s.hierarchy(this.state.data); | ||
s(l); | ||
const p = l.descendants().reverse(), h = l.links(), u = pt(), g = H(p, (i) => i.x - i.xSize / 2), x = L(p, (i) => i.x + i.xSize / 2), m = H(p, (i) => i.y), y = L(p, (i) => i.y + i.ySize - n); | ||
const p = l.descendants().reverse(), h = l.links(), u = pt(), g = I(p, (r) => r.x - r.xSize / 2), x = H(p, (r) => r.x + r.xSize / 2), m = I(p, (r) => r.y), y = H(p, (r) => r.y + r.ySize - n); | ||
Object.assign(this.state, { | ||
@@ -788,17 +795,17 @@ minX: g, | ||
}), a && this.fit(); | ||
const f = t && p.find((i) => i.data === t) || l, k = f.data.state.x0 ?? f.x, v = f.data.state.y0 ?? f.y, b = this.g.selectAll( | ||
const f = t && p.find((r) => r.data === t) || l, k = f.data.state.x0 ?? f.x, v = f.data.state.y0 ?? f.y, b = this.g.selectAll( | ||
C("g") | ||
).data(p, (i) => i.data.state.key), w = b.enter().append("g").attr("data-depth", (i) => i.data.state.depth).attr("data-path", (i) => i.data.state.path).attr( | ||
).data(p, (r) => r.data.state.key), w = b.enter().append("g").attr("data-depth", (r) => r.data.state.depth).attr("data-path", (r) => r.data.state.path).attr( | ||
"transform", | ||
(i) => `translate(${v + f.ySize - i.ySize},${k + f.xSize / 2 - i.xSize})` | ||
(r) => `translate(${v + f.ySize - r.ySize},${k + f.xSize / 2 - r.xSize})` | ||
), z = this.transition(b.exit()); | ||
z.select("line").attr("x1", (i) => i.ySize - n).attr("x2", (i) => i.ySize - n), z.select("foreignObject").style("opacity", 0), z.attr( | ||
z.select("line").attr("x1", (r) => r.ySize - n).attr("x2", (r) => r.ySize - n), z.select("foreignObject").style("opacity", 0), z.attr( | ||
"transform", | ||
(i) => `translate(${f.y + f.ySize - i.ySize},${f.x + f.xSize / 2 - i.xSize})` | ||
(r) => `translate(${f.y + f.ySize - r.ySize},${f.x + f.xSize / 2 - r.xSize})` | ||
).remove(); | ||
const E = b.merge(w).attr( | ||
"class", | ||
(i) => { | ||
(r) => { | ||
var d; | ||
return ["markmap-node", ((d = i.data.payload) == null ? void 0 : d.fold) && "markmap-fold"].filter(Boolean).join(" "); | ||
return ["markmap-node", ((d = r.data.payload) == null ? void 0 : d.fold) && "markmap-fold"].filter(Boolean).join(" "); | ||
} | ||
@@ -808,3 +815,3 @@ ); | ||
"transform", | ||
(i) => `translate(${i.y},${i.x - i.xSize / 2})` | ||
(r) => `translate(${r.y},${r.x - r.xSize / 2})` | ||
); | ||
@@ -814,38 +821,38 @@ const nt = E.selectAll( | ||
).data( | ||
(i) => [i], | ||
(i) => i.data.state.key | ||
(r) => [r], | ||
(r) => r.data.state.key | ||
).join( | ||
(i) => i.append("line").attr("x1", (d) => d.ySize - n).attr("x2", (d) => d.ySize - n), | ||
(i) => i, | ||
(i) => i.remove() | ||
(r) => r.append("line").attr("x1", (d) => d.ySize - n).attr("x2", (d) => d.ySize - n), | ||
(r) => r, | ||
(r) => r.remove() | ||
); | ||
this.transition(nt).attr("x1", -1).attr("x2", (i) => i.ySize - n + 2).attr("y1", (i) => i.xSize).attr("y2", (i) => i.xSize).attr("stroke", (i) => c(i.data)).attr("stroke-width", W); | ||
const rt = E.selectAll( | ||
this.transition(nt).attr("x1", -1).attr("x2", (r) => r.ySize - n + 2).attr("y1", (r) => r.xSize).attr("y2", (r) => r.xSize).attr("stroke", (r) => c(r.data)).attr("stroke-width", W); | ||
const it = E.selectAll( | ||
C("circle") | ||
).data( | ||
(i) => { | ||
(r) => { | ||
var d; | ||
return (d = i.data.children) != null && d.length ? [i] : []; | ||
return (d = r.data.children) != null && d.length ? [r] : []; | ||
}, | ||
(i) => i.data.state.key | ||
(r) => r.data.state.key | ||
).join( | ||
(i) => i.append("circle").attr("stroke-width", "1.5").attr("cx", (d) => d.ySize - n).attr("cy", (d) => d.xSize).attr("r", 0).on("click", (d, S) => this.handleClick(d, S)).on("mousedown", D), | ||
(i) => i, | ||
(i) => i.remove() | ||
(r) => r.append("circle").attr("stroke-width", "1.5").attr("cx", (d) => d.ySize - n).attr("cy", (d) => d.xSize).attr("r", 0).on("click", (d, S) => this.handleClick(d, S)).on("mousedown", D), | ||
(r) => r, | ||
(r) => r.remove() | ||
); | ||
this.transition(rt).attr("r", 6).attr("cx", (i) => i.ySize - n).attr("cy", (i) => i.xSize).attr("stroke", (i) => c(i.data)).attr( | ||
this.transition(it).attr("r", 6).attr("cx", (r) => r.ySize - n).attr("cy", (r) => r.xSize).attr("stroke", (r) => c(r.data)).attr( | ||
"fill", | ||
(i) => { | ||
(r) => { | ||
var d; | ||
return (d = i.data.payload) != null && d.fold && i.data.children ? c(i.data) : "var(--markmap-circle-open-bg)"; | ||
return (d = r.data.payload) != null && d.fold && r.data.children ? c(r.data) : "var(--markmap-circle-open-bg)"; | ||
} | ||
); | ||
const it = E.selectAll( | ||
const rt = E.selectAll( | ||
C("foreignObject") | ||
).data( | ||
(i) => [i], | ||
(i) => i.data.state.key | ||
(r) => [r], | ||
(r) => r.data.state.key | ||
).join( | ||
(i) => { | ||
const d = i.append("foreignObject").attr("class", "markmap-foreign").attr("x", r).attr("y", 0).style("opacity", 0).on("mousedown", D).on("dblclick", D); | ||
(r) => { | ||
const d = r.append("foreignObject").attr("class", "markmap-foreign").attr("x", i).attr("y", 0).style("opacity", 0).on("mousedown", D).on("dblclick", D); | ||
return d.append("xhtml:div").select(function(R) { | ||
@@ -856,13 +863,13 @@ const X = R.data.state.el.cloneNode(!0); | ||
}, | ||
(i) => i, | ||
(i) => i.remove() | ||
(r) => r, | ||
(r) => r.remove() | ||
).attr( | ||
"width", | ||
(i) => Math.max(0, i.ySize - n - r * 2) | ||
).attr("height", (i) => i.xSize); | ||
this.transition(it).style("opacity", 1); | ||
(r) => Math.max(0, r.ySize - n - i * 2) | ||
).attr("height", (r) => r.xSize); | ||
this.transition(rt).style("opacity", 1); | ||
const ot = this.g.selectAll( | ||
C("path") | ||
).data(h, (i) => i.target.data.state.key).join( | ||
(i) => { | ||
).data(h, (r) => r.target.data.state.key).join( | ||
(r) => { | ||
const d = [ | ||
@@ -872,6 +879,6 @@ v + f.ySize - n, | ||
]; | ||
return i.insert("path", "g").attr("class", "markmap-link").attr("data-depth", (S) => S.target.data.state.depth).attr("data-path", (S) => S.target.data.state.path).attr("d", u({ source: d, target: d })); | ||
return r.insert("path", "g").attr("class", "markmap-link").attr("data-depth", (S) => S.target.data.state.depth).attr("data-path", (S) => S.target.data.state.path).attr("d", u({ source: d, target: d })); | ||
}, | ||
(i) => i, | ||
(i) => { | ||
(r) => r, | ||
(r) => { | ||
const d = [ | ||
@@ -881,7 +888,7 @@ f.y + f.ySize - n, | ||
]; | ||
return this.transition(i).attr("d", u({ source: d, target: d })).remove(); | ||
return this.transition(r).attr("d", u({ source: d, target: d })).remove(); | ||
} | ||
); | ||
this.transition(ot).attr("stroke", (i) => c(i.target.data)).attr("stroke-width", (i) => W(i.target)).attr("d", (i) => { | ||
const d = i.source, S = i.target, R = [ | ||
this.transition(ot).attr("stroke", (r) => c(r.target.data)).attr("stroke-width", (r) => W(r.target)).attr("d", (r) => { | ||
const d = r.source, S = r.target, R = [ | ||
d.y + d.ySize - n, | ||
@@ -894,4 +901,4 @@ d.x + d.xSize / 2 | ||
return u({ source: R, target: X }); | ||
}), p.forEach((i) => { | ||
i.data.state.x0 = i.x, i.data.state.y0 = i.y; | ||
}), p.forEach((r) => { | ||
r.data.state.x0 = r.x, r.data.state.y0 = r.y; | ||
}); | ||
@@ -906,12 +913,12 @@ } | ||
*/ | ||
async fit() { | ||
const t = this.svg.node(), { width: n, height: r } = t.getBoundingClientRect(), { fitRatio: o } = this.options, { minX: a, maxX: c, minY: s, maxY: l } = this.state, p = l - s, h = c - a, u = Math.min( | ||
n / p * o, | ||
r / h * o, | ||
2 | ||
), g = mt.translate( | ||
(n - p * u) / 2 - s * u, | ||
(r - h * u) / 2 - a * u | ||
).scale(u); | ||
return this.transition(this.svg).call(this.zoom.transform, g).end().catch(M); | ||
async fit(t = this.options.maxInitialScale) { | ||
const n = this.svg.node(), { width: i, height: o } = n.getBoundingClientRect(), { fitRatio: a } = this.options, { minX: c, maxX: s, minY: l, maxY: p } = this.state, h = p - l, u = s - c, g = Math.min( | ||
i / h * a, | ||
o / u * a, | ||
t | ||
), x = mt.translate( | ||
(i - h * g) / 2 - l * g, | ||
(o - u * g) / 2 - c * g | ||
).scale(g); | ||
return this.transition(this.svg).call(this.zoom.transform, x).end().catch(M); | ||
} | ||
@@ -934,11 +941,11 @@ findElement(t) { | ||
var k; | ||
const r = (k = this.findElement(t)) == null ? void 0 : k.data; | ||
if (!r) | ||
const i = (k = this.findElement(t)) == null ? void 0 : k.data; | ||
if (!i) | ||
return; | ||
const o = this.svg.node(), { spacingHorizontal: a } = this.options, c = o.getBoundingClientRect(), s = A(o), [l, p] = [ | ||
r.y, | ||
r.y + r.ySize - a + 2 | ||
i.y, | ||
i.y + i.ySize - a + 2 | ||
].map((v) => v * s.k + s.x), [h, u] = [ | ||
r.x - r.xSize / 2, | ||
r.x + r.xSize / 2 | ||
i.x - i.xSize / 2, | ||
i.x + i.xSize / 2 | ||
].map((v) => v * s.k + s.y), g = { | ||
@@ -960,3 +967,3 @@ left: 0, | ||
async rescale(t) { | ||
const n = this.svg.node(), { width: r, height: o } = n.getBoundingClientRect(), a = r / 2, c = o / 2, s = A(n), l = s.translate( | ||
const n = this.svg.node(), { width: i, height: o } = n.getBoundingClientRect(), a = i / 2, c = o / 2, s = A(n), l = s.translate( | ||
(a - s.x) * (1 - t) / s.k, | ||
@@ -972,5 +979,7 @@ (c - s.y) * (1 - t) / s.k | ||
} | ||
static create(t, n, r = null) { | ||
static create(t, n, i = null) { | ||
const o = new et(t, n); | ||
return r && (o.setData(r), o.fit()), o; | ||
return i && (o.setData(i), requestAnimationFrame(() => { | ||
o.fit(); | ||
})), o; | ||
} | ||
@@ -977,0 +986,0 @@ } |
@@ -37,3 +37,3 @@ import type * as d3 from 'd3'; | ||
*/ | ||
fit(): Promise<void>; | ||
fit(maxScale?: number): Promise<void>; | ||
findElement(node: INode): { | ||
@@ -40,0 +40,0 @@ data: FlextreeNode<INode>; |
{ | ||
"name": "markmap-view", | ||
"version": "0.17.0", | ||
"version": "0.17.1-alpha.4+12ca00a", | ||
"description": "View markmaps in browser", | ||
@@ -21,2 +21,9 @@ "author": "Gerald <gera2ld@live.com>", | ||
}, | ||
"scripts": { | ||
"clean": "del-cli dist", | ||
"build:types": "tsc", | ||
"build:js": "vite build && TARGET=es vite build", | ||
"build": "run-s clean build:*", | ||
"prepublishOnly": "run-s build" | ||
}, | ||
"bugs": { | ||
@@ -43,3 +50,3 @@ "url": "https://github.com/markmap/markmap/issues" | ||
"@types/d3-flextree": "^2.1.1", | ||
"markmap-common": "0.17.0" | ||
"markmap-common": "0.17.1-alpha.4+12ca00a" | ||
}, | ||
@@ -49,8 +56,3 @@ "peerDependencies": { | ||
}, | ||
"scripts": { | ||
"clean": "del-cli dist", | ||
"build:types": "tsc", | ||
"build:js": "vite build && TARGET=es vite build", | ||
"build": "run-s clean build:*" | ||
} | ||
} | ||
"gitHead": "12ca00a934bba8e5a6176539a54d389786e04730" | ||
} |
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
89765
2714
2