markmap-view
Advanced tools
Comparing version 0.17.3-alpha.3 to 0.17.3-alpha.4
@@ -106,14 +106,14 @@ (function(exports, d32) { | ||
/*! @gera2ld/jsx-dom v2.2.2 | ISC License */ | ||
const VTYPE_ELEMENT$1 = 1; | ||
const VTYPE_FUNCTION$1 = 2; | ||
const SVG_NS$1 = "http://www.w3.org/2000/svg"; | ||
const XLINK_NS$1 = "http://www.w3.org/1999/xlink"; | ||
const NS_ATTRS$1 = { | ||
show: XLINK_NS$1, | ||
actuate: XLINK_NS$1, | ||
href: XLINK_NS$1 | ||
const VTYPE_ELEMENT = 1; | ||
const VTYPE_FUNCTION = 2; | ||
const SVG_NS = "http://www.w3.org/2000/svg"; | ||
const XLINK_NS = "http://www.w3.org/1999/xlink"; | ||
const NS_ATTRS = { | ||
show: XLINK_NS, | ||
actuate: XLINK_NS, | ||
href: XLINK_NS | ||
}; | ||
const isLeaf$1 = (c) => typeof c === "string" || typeof c === "number"; | ||
const isElement$1 = (c) => (c == null ? void 0 : c.vtype) === VTYPE_ELEMENT$1; | ||
const isRenderFunction$1 = (c) => (c == null ? void 0 : c.vtype) === VTYPE_FUNCTION$1; | ||
const isLeaf = (c) => typeof c === "string" || typeof c === "number"; | ||
const isElement = (c) => (c == null ? void 0 : c.vtype) === VTYPE_ELEMENT; | ||
const isRenderFunction = (c) => (c == null ? void 0 : c.vtype) === VTYPE_FUNCTION; | ||
function h(type, props, ...children) { | ||
@@ -123,8 +123,8 @@ props = Object.assign({}, props, { | ||
}); | ||
return jsx$1(type, props); | ||
return jsx(type, props); | ||
} | ||
function jsx$1(type, props) { | ||
function jsx(type, props) { | ||
let vtype; | ||
if (typeof type === "string") vtype = VTYPE_ELEMENT$1; | ||
else if (typeof type === "function") vtype = VTYPE_FUNCTION$1; | ||
if (typeof type === "string") vtype = VTYPE_ELEMENT; | ||
else if (typeof type === "function") vtype = VTYPE_FUNCTION; | ||
else throw new Error("Invalid VNode type"); | ||
@@ -137,9 +137,9 @@ return { | ||
} | ||
function Fragment$1(props) { | ||
function Fragment(props) { | ||
return props.children; | ||
} | ||
const DEFAULT_ENV$1 = { | ||
const DEFAULT_ENV = { | ||
isSvg: false | ||
}; | ||
function insertDom$1(parent, nodes) { | ||
function insertDom(parent, nodes) { | ||
if (!Array.isArray(nodes)) nodes = [nodes]; | ||
@@ -149,3 +149,3 @@ nodes = nodes.filter(Boolean); | ||
} | ||
function mountAttributes$1(domElement, props, env) { | ||
function mountAttributes(domElement, props, env) { | ||
for (const key in props) { | ||
@@ -161,12 +161,12 @@ if (key === "key" || key === "children" || key === "ref") continue; | ||
} else { | ||
setDOMAttribute$1(domElement, key, props[key], env.isSvg); | ||
setDOMAttribute(domElement, key, props[key], env.isSvg); | ||
} | ||
} | ||
} | ||
const attrMap$1 = { | ||
const attrMap = { | ||
className: "class", | ||
labelFor: "for" | ||
}; | ||
function setDOMAttribute$1(el, attr, value, isSVG) { | ||
attr = attrMap$1[attr] || attr; | ||
function setDOMAttribute(el, attr, value, isSVG) { | ||
attr = attrMap[attr] || attr; | ||
if (value === true) { | ||
@@ -177,3 +177,3 @@ el.setAttribute(attr, ""); | ||
} else { | ||
const namespace = isSVG ? NS_ATTRS$1[attr] : void 0; | ||
const namespace = isSVG ? NS_ATTRS[attr] : void 0; | ||
if (namespace !== void 0) { | ||
@@ -186,9 +186,9 @@ el.setAttributeNS(namespace, attr, value); | ||
} | ||
function flatten$1(arr) { | ||
function flatten(arr) { | ||
return arr.reduce((prev, item) => prev.concat(item), []); | ||
} | ||
function mountChildren$1(children, env) { | ||
return Array.isArray(children) ? flatten$1(children.map((child) => mountChildren$1(child, env))) : mount$1(children, env); | ||
function mountChildren(children, env) { | ||
return Array.isArray(children) ? flatten(children.map((child) => mountChildren(child, env))) : mount(children, env); | ||
} | ||
function mount$1(vnode, env = DEFAULT_ENV$1) { | ||
function mount(vnode, env = DEFAULT_ENV) { | ||
if (vnode == null || typeof vnode === "boolean") { | ||
@@ -200,3 +200,3 @@ return null; | ||
} | ||
if (isRenderFunction$1(vnode)) { | ||
if (isRenderFunction(vnode)) { | ||
const { | ||
@@ -206,7 +206,7 @@ type, | ||
} = vnode; | ||
if (type === Fragment$1) { | ||
if (type === Fragment) { | ||
const node = document.createDocumentFragment(); | ||
if (props.children) { | ||
const children = mountChildren$1(props.children, env); | ||
insertDom$1(node, children); | ||
const children = mountChildren(props.children, env); | ||
insertDom(node, children); | ||
} | ||
@@ -216,8 +216,8 @@ return node; | ||
const childVNode = type(props); | ||
return mount$1(childVNode, env); | ||
return mount(childVNode, env); | ||
} | ||
if (isLeaf$1(vnode)) { | ||
if (isLeaf(vnode)) { | ||
return document.createTextNode(`${vnode}`); | ||
} | ||
if (isElement$1(vnode)) { | ||
if (isElement(vnode)) { | ||
let node; | ||
@@ -236,5 +236,5 @@ const { | ||
} else { | ||
node = document.createElementNS(SVG_NS$1, type); | ||
node = document.createElementNS(SVG_NS, type); | ||
} | ||
mountAttributes$1(node, props, env); | ||
mountAttributes(node, props, env); | ||
if (props.children) { | ||
@@ -247,4 +247,4 @@ let childEnv = env; | ||
} | ||
const children = mountChildren$1(props.children, childEnv); | ||
if (children != null) insertDom$1(node, children); | ||
const children = mountChildren(props.children, childEnv); | ||
if (children != null) insertDom(node, children); | ||
} | ||
@@ -259,7 +259,7 @@ const { | ||
} | ||
function mountDom$1(vnode) { | ||
return mount$1(vnode); | ||
function mountDom(vnode) { | ||
return mount(vnode); | ||
} | ||
function hm(...args) { | ||
return mountDom$1(h(...args)); | ||
return mountDom(h(...args)); | ||
} | ||
@@ -422,141 +422,9 @@ const memoizedPreloadJS = memoize((url) => { | ||
} | ||
/*! @gera2ld/jsx-dom v2.2.2 | ISC License */ | ||
const VTYPE_ELEMENT = 1; | ||
const VTYPE_FUNCTION = 2; | ||
const SVG_NS = "http://www.w3.org/2000/svg"; | ||
const XLINK_NS = "http://www.w3.org/1999/xlink"; | ||
const NS_ATTRS = { | ||
show: XLINK_NS, | ||
actuate: XLINK_NS, | ||
href: XLINK_NS | ||
}; | ||
const isLeaf = (c) => typeof c === "string" || typeof c === "number"; | ||
const isElement = (c) => (c == null ? void 0 : c.vtype) === VTYPE_ELEMENT; | ||
const isRenderFunction = (c) => (c == null ? void 0 : c.vtype) === VTYPE_FUNCTION; | ||
function jsx(type, props) { | ||
let vtype; | ||
if (typeof type === "string") vtype = VTYPE_ELEMENT; | ||
else if (typeof type === "function") vtype = VTYPE_FUNCTION; | ||
else throw new Error("Invalid VNode type"); | ||
return { | ||
vtype, | ||
type, | ||
props | ||
}; | ||
} | ||
function Fragment(props) { | ||
return props.children; | ||
} | ||
const DEFAULT_ENV = { | ||
isSvg: false | ||
}; | ||
function insertDom(parent, nodes) { | ||
if (!Array.isArray(nodes)) nodes = [nodes]; | ||
nodes = nodes.filter(Boolean); | ||
if (nodes.length) parent.append(...nodes); | ||
} | ||
function mountAttributes(domElement, props, env) { | ||
for (const key in props) { | ||
if (key === "key" || key === "children" || key === "ref") continue; | ||
if (key === "dangerouslySetInnerHTML") { | ||
domElement.innerHTML = props[key].__html; | ||
} else if (key === "innerHTML" || key === "textContent" || key === "innerText" || key === "value" && ["textarea", "select"].includes(domElement.tagName)) { | ||
const value = props[key]; | ||
if (value != null) domElement[key] = value; | ||
} else if (key.startsWith("on")) { | ||
domElement[key.toLowerCase()] = props[key]; | ||
} else { | ||
setDOMAttribute(domElement, key, props[key], env.isSvg); | ||
} | ||
function simpleHash(str) { | ||
let hash = 0; | ||
for (let i = 0; i < str.length; i++) { | ||
hash = (hash << 5) - hash + str.charCodeAt(i) | 0; | ||
} | ||
return (hash >>> 0).toString(36); | ||
} | ||
const attrMap = { | ||
className: "class", | ||
labelFor: "for" | ||
}; | ||
function setDOMAttribute(el, attr, value, isSVG) { | ||
attr = attrMap[attr] || attr; | ||
if (value === true) { | ||
el.setAttribute(attr, ""); | ||
} else if (value === false) { | ||
el.removeAttribute(attr); | ||
} else { | ||
const namespace = isSVG ? NS_ATTRS[attr] : void 0; | ||
if (namespace !== void 0) { | ||
el.setAttributeNS(namespace, attr, value); | ||
} else { | ||
el.setAttribute(attr, value); | ||
} | ||
} | ||
} | ||
function flatten(arr) { | ||
return arr.reduce((prev, item) => prev.concat(item), []); | ||
} | ||
function mountChildren(children, env) { | ||
return Array.isArray(children) ? flatten(children.map((child) => mountChildren(child, env))) : mount(children, env); | ||
} | ||
function mount(vnode, env = DEFAULT_ENV) { | ||
if (vnode == null || typeof vnode === "boolean") { | ||
return null; | ||
} | ||
if (vnode instanceof Node) { | ||
return vnode; | ||
} | ||
if (isRenderFunction(vnode)) { | ||
const { | ||
type, | ||
props | ||
} = vnode; | ||
if (type === Fragment) { | ||
const node = document.createDocumentFragment(); | ||
if (props.children) { | ||
const children = mountChildren(props.children, env); | ||
insertDom(node, children); | ||
} | ||
return node; | ||
} | ||
const childVNode = type(props); | ||
return mount(childVNode, env); | ||
} | ||
if (isLeaf(vnode)) { | ||
return document.createTextNode(`${vnode}`); | ||
} | ||
if (isElement(vnode)) { | ||
let node; | ||
const { | ||
type, | ||
props | ||
} = vnode; | ||
if (!env.isSvg && type === "svg") { | ||
env = Object.assign({}, env, { | ||
isSvg: true | ||
}); | ||
} | ||
if (!env.isSvg) { | ||
node = document.createElement(type); | ||
} else { | ||
node = document.createElementNS(SVG_NS, type); | ||
} | ||
mountAttributes(node, props, env); | ||
if (props.children) { | ||
let childEnv = env; | ||
if (env.isSvg && type === "foreignObject") { | ||
childEnv = Object.assign({}, childEnv, { | ||
isSvg: false | ||
}); | ||
} | ||
const children = mountChildren(props.children, childEnv); | ||
if (children != null) insertDom(node, children); | ||
} | ||
const { | ||
ref | ||
} = props; | ||
if (typeof ref === "function") ref(node); | ||
return node; | ||
} | ||
throw new Error("mount: Invalid Vnode!"); | ||
} | ||
function mountDom(vnode) { | ||
return mount(vnode); | ||
} | ||
function count(node) { | ||
@@ -733,59 +601,11 @@ var sum = 0, children = node.children, i = children && children.length; | ||
const module = "index"; | ||
const author = { | ||
name: "Chris Maloney", | ||
url: "http://chrismaloney.org" | ||
}; | ||
const author = { "name": "Chris Maloney", "url": "http://chrismaloney.org" }; | ||
const description = "Flexible tree layout algorithm that allows for variable node sizes."; | ||
const keywords = [ | ||
"d3", | ||
"d3-module", | ||
"layout", | ||
"tree", | ||
"hierarchy", | ||
"d3-hierarchy", | ||
"plugin", | ||
"d3-plugin", | ||
"infovis", | ||
"visualization", | ||
"2d" | ||
]; | ||
const keywords = ["d3", "d3-module", "layout", "tree", "hierarchy", "d3-hierarchy", "plugin", "d3-plugin", "infovis", "visualization", "2d"]; | ||
const homepage = "https://github.com/klortho/d3-flextree"; | ||
const license = "WTFPL"; | ||
const repository = { | ||
type: "git", | ||
url: "https://github.com/klortho/d3-flextree.git" | ||
}; | ||
const scripts = { | ||
clean: "rm -rf build demo test", | ||
"build:demo": "rollup -c --environment BUILD:demo", | ||
"build:dev": "rollup -c --environment BUILD:dev", | ||
"build:prod": "rollup -c --environment BUILD:prod", | ||
"build:test": "rollup -c --environment BUILD:test", | ||
build: "rollup -c", | ||
lint: "eslint index.js src", | ||
"test:main": "node test/bundle.js", | ||
"test:browser": "node test/browser-tests.js", | ||
test: "npm-run-all test:*", | ||
prepare: "npm-run-all clean build lint test" | ||
}; | ||
const dependencies = { | ||
"d3-hierarchy": "^1.1.5" | ||
}; | ||
const devDependencies = { | ||
"babel-plugin-external-helpers": "^6.22.0", | ||
"babel-preset-es2015-rollup": "^3.0.0", | ||
d3: "^4.13.0", | ||
"d3-selection-multi": "^1.0.1", | ||
eslint: "^4.19.1", | ||
jsdom: "^11.6.2", | ||
"npm-run-all": "^4.1.2", | ||
rollup: "^0.55.3", | ||
"rollup-plugin-babel": "^2.7.1", | ||
"rollup-plugin-commonjs": "^8.0.2", | ||
"rollup-plugin-copy": "^0.2.3", | ||
"rollup-plugin-json": "^2.3.0", | ||
"rollup-plugin-node-resolve": "^3.0.2", | ||
"rollup-plugin-uglify": "^3.0.0", | ||
"uglify-es": "^3.3.9" | ||
}; | ||
const repository = { "type": "git", "url": "https://github.com/klortho/d3-flextree.git" }; | ||
const scripts = { "clean": "rm -rf build demo test", "build:demo": "rollup -c --environment BUILD:demo", "build:dev": "rollup -c --environment BUILD:dev", "build:prod": "rollup -c --environment BUILD:prod", "build:test": "rollup -c --environment BUILD:test", "build": "rollup -c", "lint": "eslint index.js src", "test:main": "node test/bundle.js", "test:browser": "node test/browser-tests.js", "test": "npm-run-all test:*", "prepare": "npm-run-all clean build lint test" }; | ||
const dependencies = { "d3-hierarchy": "^1.1.5" }; | ||
const devDependencies = { "babel-plugin-external-helpers": "^6.22.0", "babel-preset-es2015-rollup": "^3.0.0", "d3": "^4.13.0", "d3-selection-multi": "^1.0.1", "eslint": "^4.19.1", "jsdom": "^11.6.2", "npm-run-all": "^4.1.2", "rollup": "^0.55.3", "rollup-plugin-babel": "^2.7.1", "rollup-plugin-commonjs": "^8.0.2", "rollup-plugin-copy": "^0.2.3", "rollup-plugin-json": "^2.3.0", "rollup-plugin-node-resolve": "^3.0.2", "rollup-plugin-uglify": "^3.0.0", "uglify-es": "^3.3.9" }; | ||
const packageInfo = { | ||
@@ -1140,7 +960,6 @@ name, | ||
}; | ||
const containerCSS = "/* used for pre-rendering to get the size of each node */\n.markmap-container {\n position: absolute;\n width: 0;\n height: 0;\n top: -100px;\n left: -100px;\n overflow: hidden;\n}\n.markmap-container > .markmap-foreign {\n display: inline-block;\n }\n/* first-child for line wrapping, last-child for max-width detection */\n.markmap-container > .markmap-foreign > div:last-child,\n \n .markmap-container > .markmap-foreign > div:last-child :not(pre) {\n white-space: nowrap;\n }\n.markmap-container > .markmap-foreign > div:last-child code {\n white-space: inherit;\n }\n"; | ||
const css = "/* Note: wrap with `& { ... }` to preserve the orders, otherwise ungrouped CSS will be put in the end */\n .markmap {\n --markmap-max-width: none;\n --markmap-a-color: #0097e6;\n --markmap-a-hover-color: #00a8ff;\n --markmap-code-bg: #f0f0f0;\n --markmap-code-color: #555;\n --markmap-highlight-bg: #ffeaa7;\n --markmap-table-border: 1px solid currentColor;\n --markmap-font: 300 16px/20px sans-serif;\n --markmap-circle-open-bg: #fff;\n --markmap-text-color: #333;\n\n font: var(--markmap-font);\n color: var(--markmap-text-color);\n }\n .markmap-link {\n fill: none;\n }\n .markmap-node > circle {\n cursor: pointer;\n }\n .markmap-foreign {\n display: inline-block;\n }\n .markmap-foreign p {\n margin: 0;\n }\n .markmap-foreign a {\n color: var(--markmap-a-color);\n }\n .markmap-foreign a:hover {\n color: var(--markmap-a-hover-color);\n }\n .markmap-foreign code {\n padding: 0.25em;\n font-size: calc(1em - 2px);\n color: var(--markmap-code-color);\n background-color: var(--markmap-code-bg);\n border-radius: 2px;\n }\n .markmap-foreign pre {\n margin: 0;\n }\n .markmap-foreign pre > code {\n display: block;\n }\n .markmap-foreign del {\n text-decoration: line-through;\n }\n .markmap-foreign em {\n font-style: italic;\n }\n .markmap-foreign strong {\n font-weight: bold;\n }\n .markmap-foreign mark {\n background: var(--markmap-highlight-bg);\n }\n .markmap-foreign table,\n .markmap-foreign th,\n .markmap-foreign td {\n border-collapse: collapse;\n border: var(--markmap-table-border);\n }\n .markmap-foreign img {\n display: inline-block;\n }\n .markmap-foreign svg {\n fill: currentColor;\n }\n .markmap-foreign-testing-max {\n max-width: var(--markmap-max-width);\n }\n .markmap-foreign-testing-max img {\n max-width: var(--markmap-max-width);\n max-height: none;\n }\n @media (prefers-color-scheme: dark) {\n .markmap {\n --markmap-code-bg: #1a1b26;\n --markmap-code-color: #ddd;\n --markmap-circle-open-bg: #444;\n --markmap-text-color: #eee;\n }\n }\n"; | ||
const css = ".markmap {\n --markmap-max-width: 9999px;\n --markmap-a-color: #0097e6;\n --markmap-a-hover-color: #00a8ff;\n --markmap-code-bg: #f0f0f0;\n --markmap-code-color: #555;\n --markmap-highlight-bg: #ffeaa7;\n --markmap-table-border: 1px solid currentColor;\n --markmap-font: 300 16px/20px sans-serif;\n --markmap-circle-open-bg: #fff;\n --markmap-text-color: #333;\n\n font: var(--markmap-font);\n color: var(--markmap-text-color);\n}\n\n .markmap-link {\n fill: none;\n }\n\n .markmap-node > circle {\n cursor: pointer;\n }\n\n .markmap-foreign {\n display: inline-block;\n }\n\n .markmap-foreign p {\n margin: 0;\n }\n\n .markmap-foreign a {\n color: var(--markmap-a-color);\n }\n\n .markmap-foreign a:hover {\n color: var(--markmap-a-hover-color);\n }\n\n .markmap-foreign code {\n padding: 0.25em;\n font-size: calc(1em - 2px);\n color: var(--markmap-code-color);\n background-color: var(--markmap-code-bg);\n border-radius: 2px;\n }\n\n .markmap-foreign pre {\n margin: 0;\n }\n\n .markmap-foreign pre > code {\n display: block;\n }\n\n .markmap-foreign del {\n text-decoration: line-through;\n }\n\n .markmap-foreign em {\n font-style: italic;\n }\n\n .markmap-foreign strong {\n font-weight: bold;\n }\n\n .markmap-foreign mark {\n background: var(--markmap-highlight-bg);\n }\n\n .markmap-foreign table,\n .markmap-foreign th,\n .markmap-foreign td {\n border-collapse: collapse;\n border: var(--markmap-table-border);\n }\n\n .markmap-foreign img {\n display: inline-block;\n }\n\n .markmap-foreign svg {\n fill: currentColor;\n }\n\n .markmap-foreign > div {\n width: var(--markmap-max-width);\n }\n\n .markmap-foreign > div > div {\n display: inline-block;\n }\n\n.markmap-dark .markmap {\n --markmap-code-bg: #1a1b26;\n --markmap-code-color: #ddd;\n --markmap-circle-open-bg: #444;\n --markmap-text-color: #eee;\n}\n"; | ||
const globalCSS = css; | ||
function linkWidth(nodeData) { | ||
const data = nodeData.data; | ||
const linkShape = d32.linkHorizontal(); | ||
function linkWidth(data) { | ||
return Math.max(4 - 2 * data.state.depth, 1.5); | ||
@@ -1160,3 +979,2 @@ } | ||
this.revokers = []; | ||
this.imgCache = {}; | ||
this.handleZoom = (e) => { | ||
@@ -1178,3 +996,3 @@ const { transform } = e; | ||
if (isMacintosh ? e.metaKey : e.ctrlKey) recursive = !recursive; | ||
this.toggleNode(d.data, recursive); | ||
this.toggleNode(d, recursive); | ||
}; | ||
@@ -1192,9 +1010,10 @@ this.svg = svg.datum ? svg : d32.select(svg); | ||
id: this.options.id || this.svg.attr("id") || getId(), | ||
minX: 0, | ||
maxX: 0, | ||
minY: 0, | ||
maxY: 0 | ||
rect: { x1: 0, y1: 0, x2: 0, y2: 0 } | ||
}; | ||
this.g = this.svg.append("g"); | ||
this.debouncedRefresh = debounce(() => this.setData(), 200); | ||
this.observer = new ResizeObserver( | ||
debounce(() => { | ||
this.renderData(); | ||
}, 100) | ||
); | ||
this.revokers.push( | ||
@@ -1220,3 +1039,3 @@ refreshHook.tap(() => { | ||
} | ||
toggleNode(data, recursive = false) { | ||
async toggleNode(data, recursive = false) { | ||
var _a, _b; | ||
@@ -1238,34 +1057,14 @@ const fold = ((_a = data.payload) == null ? void 0 : _a.fold) ? 0 : 1; | ||
} | ||
this.renderData(data); | ||
await this.renderData(data); | ||
} | ||
initializeData(node) { | ||
_initializeData(node) { | ||
let nodeId = 0; | ||
const { color, nodeMinHeight, maxWidth, initialExpandLevel } = this.options; | ||
const { id } = this.state; | ||
const container = mountDom( | ||
/* @__PURE__ */ jsx("div", { className: `markmap-container markmap ${id}-g` }) | ||
); | ||
const style = mountDom( | ||
/* @__PURE__ */ jsx("style", { children: [this.getStyleContent(), containerCSS].join("\n") }) | ||
); | ||
document.body.append(container, style); | ||
const groupStyle = maxWidth ? `--markmap-max-width: ${maxWidth}px` : ""; | ||
const { color, initialExpandLevel } = this.options; | ||
let foldRecursively = 0; | ||
let depth = 0; | ||
walkTree(node, (item, next, parent) => { | ||
var _a, _b, _c; | ||
var _a, _b, _c, _d; | ||
depth += 1; | ||
item.children = (_a = item.children) == null ? void 0 : _a.map((child) => ({ ...child })); | ||
nodeId += 1; | ||
const group = mountDom( | ||
/* @__PURE__ */ jsx( | ||
"div", | ||
{ | ||
className: "markmap-foreign markmap-foreign-testing-max", | ||
style: groupStyle, | ||
children: /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: item.content } }) | ||
} | ||
) | ||
); | ||
container.append(group); | ||
item.state = { | ||
@@ -1275,7 +1074,14 @@ ...item.state, | ||
id: nodeId, | ||
el: group.firstChild | ||
rect: { | ||
x: 0, | ||
y: 0, | ||
width: 0, | ||
height: 0 | ||
}, | ||
size: [0, 0] | ||
}; | ||
item.state.path = [(_b = parent == null ? void 0 : parent.state) == null ? void 0 : _b.path, item.state.id].filter(Boolean).join("."); | ||
item.state.key = [(_b = parent == null ? void 0 : parent.state) == null ? void 0 : _b.id, item.state.id].filter(Boolean).join(".") + simpleHash(item.content); | ||
item.state.path = [(_c = parent == null ? void 0 : parent.state) == null ? void 0 : _c.path, item.state.id].filter(Boolean).join("."); | ||
color(item); | ||
const isFoldRecursively = ((_c = item.payload) == null ? void 0 : _c.fold) === 2; | ||
const isFoldRecursively = ((_d = item.payload) == null ? void 0 : _d.fold) === 2; | ||
if (isFoldRecursively) { | ||
@@ -1290,44 +1096,46 @@ foldRecursively += 1; | ||
}); | ||
const nodes = Array.from(container.childNodes).map( | ||
(group) => group.firstChild | ||
); | ||
this._checkImages(container); | ||
nodes.forEach((node2) => { | ||
} | ||
_relayout() { | ||
if (!this.state.data) return; | ||
this.g.selectAll(childSelector("g")).selectAll( | ||
childSelector("foreignObject") | ||
).each(function(d) { | ||
var _a; | ||
(_a = node2.parentNode) == null ? void 0 : _a.append(node2.cloneNode(true)); | ||
const el = (_a = this.firstChild) == null ? void 0 : _a.firstChild; | ||
const newSize = [el.scrollWidth, el.scrollHeight]; | ||
d.state.size = newSize; | ||
}); | ||
walkTree(node, (item, next, parent) => { | ||
const { spacingHorizontal, paddingX, spacingVertical } = this.options; | ||
const layout = flextree({}).children((d) => { | ||
var _a; | ||
const state = item.state; | ||
const rect = state.el.getBoundingClientRect(); | ||
item.content = state.el.innerHTML; | ||
state.size = [ | ||
Math.ceil(rect.width) + 1, | ||
Math.max(Math.ceil(rect.height), nodeMinHeight) | ||
]; | ||
state.key = [(_a = parent == null ? void 0 : parent.state) == null ? void 0 : _a.id, state.id].filter(Boolean).join(".") + // FIXME: find a way to check content hash | ||
item.content; | ||
next(); | ||
if (!((_a = d.payload) == null ? void 0 : _a.fold)) return d.children; | ||
}).nodeSize((node) => { | ||
const [width, height] = node.data.state.size; | ||
return [height, width + (width ? paddingX * 2 : 0) + spacingHorizontal]; | ||
}).spacing((a, b) => { | ||
return a.parent === b.parent ? spacingVertical : spacingVertical * 2; | ||
}); | ||
container.remove(); | ||
style.remove(); | ||
} | ||
_checkImages(container) { | ||
container.querySelectorAll("img").forEach((img) => { | ||
if (img.width) return; | ||
const size = this.imgCache[img.src]; | ||
if (size == null ? void 0 : size[0]) { | ||
[img.width, img.height] = size; | ||
} else if (!size) { | ||
this._loadImage(img.src); | ||
} | ||
const tree = layout.hierarchy(this.state.data); | ||
layout(tree); | ||
const fnodes = tree.descendants(); | ||
fnodes.forEach((fnode) => { | ||
const node = fnode.data; | ||
node.state.rect = { | ||
x: fnode.y, | ||
y: fnode.x, | ||
width: fnode.ySize - spacingHorizontal, | ||
height: fnode.xSize | ||
}; | ||
}); | ||
} | ||
_loadImage(src) { | ||
this.imgCache[src] = [0, 0]; | ||
const img = new Image(); | ||
img.src = src; | ||
img.onload = () => { | ||
this.imgCache[src] = [img.naturalWidth, img.naturalHeight]; | ||
this.debouncedRefresh(); | ||
this.state.rect = { | ||
x1: d32.min(fnodes, (fnode) => fnode.data.state.rect.x) || 0, | ||
y1: d32.min(fnodes, (fnode) => fnode.data.state.rect.y) || 0, | ||
x2: d32.max( | ||
fnodes, | ||
(fnode) => fnode.data.state.rect.x + fnode.data.state.rect.width | ||
) || 0, | ||
y2: d32.max( | ||
fnodes, | ||
(fnode) => fnode.data.state.rect.y + fnode.data.state.rect.height | ||
) || 0 | ||
}; | ||
@@ -1351,78 +1159,41 @@ } | ||
} | ||
setData(data, opts) { | ||
async setData(data, opts) { | ||
if (opts) this.setOptions(opts); | ||
if (data) this.state.data = data; | ||
if (!this.state.data) return; | ||
this.initializeData(this.state.data); | ||
this._initializeData(this.state.data); | ||
this.updateStyle(); | ||
this.renderData(); | ||
await this.renderData(); | ||
} | ||
renderData(originData) { | ||
async renderData(originData) { | ||
const { paddingX, autoFit, color, maxWidth } = this.options; | ||
if (!this.state.data) return; | ||
const { spacingHorizontal, paddingX, spacingVertical, autoFit, color } = this.options; | ||
const layout = flextree({}).children((d) => { | ||
const nodes = []; | ||
walkTree(this.state.data, (item, next) => { | ||
var _a; | ||
if (!((_a = d.payload) == null ? void 0 : _a.fold)) return d.children; | ||
}).nodeSize((node2) => { | ||
const [width, height] = node2.data.state.size; | ||
return [height, width + (width ? paddingX * 2 : 0) + spacingHorizontal]; | ||
}).spacing((a, b) => { | ||
return a.parent === b.parent ? spacingVertical : spacingVertical * 2; | ||
if (!((_a = item.payload) == null ? void 0 : _a.fold)) next(); | ||
nodes.push(item); | ||
}); | ||
const tree = layout.hierarchy(this.state.data); | ||
layout(tree); | ||
const descendants = tree.descendants().reverse(); | ||
const links = tree.links(); | ||
const linkShape = d32.linkHorizontal(); | ||
const minX = d32.min(descendants, (d) => d.x - d.xSize / 2); | ||
const maxX = d32.max(descendants, (d) => d.x + d.xSize / 2); | ||
const minY = d32.min(descendants, (d) => d.y); | ||
const maxY = d32.max(descendants, (d) => d.y + d.ySize - spacingHorizontal); | ||
Object.assign(this.state, { | ||
minX, | ||
maxX, | ||
minY, | ||
maxY | ||
}); | ||
if (autoFit) this.fit(); | ||
const origin = originData && descendants.find((item) => item.data === originData) || tree; | ||
const x0 = origin.data.state.x0 ?? origin.x; | ||
const y0 = origin.data.state.y0 ?? origin.y; | ||
const node = this.g.selectAll(childSelector("g")).data(descendants, (d) => d.data.state.key); | ||
const nodeEnter = node.enter().append("g").attr("data-depth", (d) => d.data.state.depth).attr("data-path", (d) => d.data.state.path).attr( | ||
"transform", | ||
(d) => `translate(${y0 + origin.ySize - d.ySize},${x0 + origin.xSize / 2 - d.xSize})` | ||
); | ||
const nodeExit = this.transition(node.exit()); | ||
nodeExit.select("line").attr("x1", (d) => d.ySize - spacingHorizontal).attr("x2", (d) => d.ySize - spacingHorizontal); | ||
nodeExit.select("foreignObject").style("opacity", 0); | ||
nodeExit.attr( | ||
"transform", | ||
(d) => `translate(${origin.y + origin.ySize - d.ySize},${origin.x + origin.xSize / 2 - d.xSize})` | ||
).remove(); | ||
const nodeMerge = node.merge(nodeEnter).attr( | ||
const origin = originData || this.state.data; | ||
const originRect = origin.state.rect; | ||
const mmG = this.g.selectAll(childSelector("g")).data(nodes, (d) => d.state.key); | ||
const mmGEnter = mmG.enter().append("g").attr("data-depth", (d) => d.state.depth).attr("data-path", (d) => d.state.path); | ||
const mmGExit = mmG.exit(); | ||
const mmGMerge = mmG.merge(mmGEnter).attr( | ||
"class", | ||
(d) => { | ||
var _a; | ||
return ["markmap-node", ((_a = d.data.payload) == null ? void 0 : _a.fold) && "markmap-fold"].filter(Boolean).join(" "); | ||
return ["markmap-node", ((_a = d.payload) == null ? void 0 : _a.fold) && "markmap-fold"].filter(Boolean).join(" "); | ||
} | ||
); | ||
this.transition(nodeMerge).attr( | ||
"transform", | ||
(d) => `translate(${d.y},${d.x - d.xSize / 2})` | ||
const mmLine = mmGMerge.selectAll(childSelector("line")).data( | ||
(d) => [d], | ||
(d) => d.state.key | ||
); | ||
const line = nodeMerge.selectAll( | ||
const mmLineEnter = mmLine.enter().append("line"); | ||
const mmLineExit = mmGExit.selectAll( | ||
childSelector("line") | ||
).data( | ||
(d) => [d], | ||
(d) => d.data.state.key | ||
).join( | ||
(enter) => { | ||
return enter.append("line").attr("x1", (d) => d.ySize - spacingHorizontal).attr("x2", (d) => d.ySize - spacingHorizontal); | ||
}, | ||
(update) => update, | ||
(exit) => exit.remove() | ||
); | ||
this.transition(line).attr("x1", -1).attr("x2", (d) => d.ySize - spacingHorizontal + 2).attr("y1", (d) => d.xSize).attr("y2", (d) => d.xSize).attr("stroke", (d) => color(d.data)).attr("stroke-width", linkWidth); | ||
const circle = nodeMerge.selectAll( | ||
const mmLineMerge = mmLine.merge(mmLineEnter); | ||
const mmCircle = mmGMerge.selectAll( | ||
childSelector("circle") | ||
@@ -1432,8 +1203,8 @@ ).data( | ||
var _a; | ||
return ((_a = d.data.children) == null ? void 0 : _a.length) ? [d] : []; | ||
return ((_a = d.children) == null ? void 0 : _a.length) ? [d] : []; | ||
}, | ||
(d) => d.data.state.key | ||
(d) => d.state.key | ||
).join( | ||
(enter) => { | ||
return enter.append("circle").attr("stroke-width", "1.5").attr("cx", (d) => d.ySize - spacingHorizontal).attr("cy", (d) => d.xSize).attr("r", 0).on("click", (e, d) => this.handleClick(e, d)).on("mousedown", stopPropagation); | ||
return enter.append("circle").attr("stroke-width", "1.5").attr("r", 0).on("click", (e, d) => this.handleClick(e, d)).on("mousedown", stopPropagation); | ||
}, | ||
@@ -1443,67 +1214,90 @@ (update) => update, | ||
); | ||
this.transition(circle).attr("r", 6).attr("cx", (d) => d.ySize - spacingHorizontal).attr("cy", (d) => d.xSize).attr("stroke", (d) => color(d.data)).attr( | ||
const observer = this.observer; | ||
const mmFo = mmGMerge.selectAll(childSelector("foreignObject")).data( | ||
(d) => [d], | ||
(d) => d.state.key | ||
); | ||
const mmFoEnter = mmFo.enter().append("foreignObject").attr("class", "markmap-foreign").attr("x", paddingX).attr("y", 0).style("opacity", 0).on("mousedown", stopPropagation).on("dblclick", stopPropagation); | ||
mmFoEnter.append("xhtml:div").append("xhtml:div").html((d) => d.content).attr("xmlns", "http://www.w3.org/1999/xhtml"); | ||
mmFoEnter.each(function() { | ||
var _a; | ||
const el = (_a = this.firstChild) == null ? void 0 : _a.firstChild; | ||
observer.observe(el); | ||
}); | ||
const mmFoExit = mmGExit.selectAll( | ||
childSelector("foreignObject") | ||
); | ||
mmFoExit.each(function() { | ||
var _a; | ||
const el = (_a = this.firstChild) == null ? void 0 : _a.firstChild; | ||
observer.unobserve(el); | ||
}); | ||
const mmFoMerge = mmFoEnter.merge(mmFo); | ||
const links = nodes.flatMap( | ||
(node) => { | ||
var _a; | ||
return ((_a = node.payload) == null ? void 0 : _a.fold) ? [] : node.children.map((child) => ({ source: node, target: child })); | ||
} | ||
); | ||
const mmPath = this.g.selectAll(childSelector("path")).data(links, (d) => d.target.state.key); | ||
const mmPathExit = mmPath.exit(); | ||
const mmPathEnter = mmPath.enter().insert("path", "g").attr("class", "markmap-link").attr("data-depth", (d) => d.target.state.depth).attr("data-path", (d) => d.target.state.path); | ||
const mmPathMerge = mmPathEnter.merge(mmPath); | ||
this.svg.style( | ||
"--markmap-max-width", | ||
maxWidth ? `${maxWidth}px` : null | ||
); | ||
await new Promise(requestAnimationFrame); | ||
this._relayout(); | ||
this.transition(mmGExit).attr("transform", (d) => { | ||
const targetX = originRect.x + originRect.width - d.state.rect.width; | ||
const targetY = originRect.y + originRect.height / 2 - d.state.rect.height; | ||
return `translate(${targetX},${targetY})`; | ||
}).remove(); | ||
mmGEnter.attr( | ||
"transform", | ||
(d) => `translate(${originRect.x + originRect.width - d.state.rect.width},${originRect.y + originRect.height / 2 - d.state.rect.height})` | ||
); | ||
this.transition(mmGMerge).attr( | ||
"transform", | ||
(d) => `translate(${d.state.rect.x},${d.state.rect.y - d.state.rect.height / 2})` | ||
); | ||
this.transition(mmLineExit).attr("x1", (d) => d.state.rect.width).attr("x2", (d) => d.state.rect.width); | ||
mmLineEnter.attr("x1", (d) => d.state.rect.width).attr("x2", (d) => d.state.rect.width); | ||
mmLineMerge.attr("y1", (d) => d.state.rect.height).attr("y2", (d) => d.state.rect.height).attr("stroke", (d) => color(d)); | ||
this.transition(mmLineMerge).attr("x1", -1).attr("x2", (d) => d.state.rect.width + 2).attr("stroke-width", linkWidth); | ||
mmCircle.attr("cx", (d) => d.state.rect.width).attr("cy", (d) => d.state.rect.height).attr("stroke", (d) => color(d)).attr( | ||
"fill", | ||
(d) => { | ||
var _a; | ||
return ((_a = d.data.payload) == null ? void 0 : _a.fold) && d.data.children ? color(d.data) : "var(--markmap-circle-open-bg)"; | ||
return ((_a = d.payload) == null ? void 0 : _a.fold) && d.children ? color(d) : "var(--markmap-circle-open-bg)"; | ||
} | ||
); | ||
const foreignObject = nodeMerge.selectAll( | ||
childSelector("foreignObject") | ||
).data( | ||
(d) => [d], | ||
(d) => d.data.state.key | ||
).join( | ||
(enter) => { | ||
const fo = enter.append("foreignObject").attr("class", "markmap-foreign").attr("x", paddingX).attr("y", 0).style("opacity", 0).on("mousedown", stopPropagation).on("dblclick", stopPropagation); | ||
fo.append("xhtml:div").select(function select2(d) { | ||
const clone = d.data.state.el.cloneNode(true); | ||
this.replaceWith(clone); | ||
return clone; | ||
}).attr("xmlns", "http://www.w3.org/1999/xhtml"); | ||
return fo; | ||
}, | ||
(update) => update, | ||
(exit) => exit.remove() | ||
).attr( | ||
"width", | ||
(d) => Math.max(0, d.ySize - spacingHorizontal - paddingX * 2) | ||
).attr("height", (d) => d.xSize); | ||
this.transition(foreignObject).style("opacity", 1); | ||
const path = this.g.selectAll( | ||
childSelector("path") | ||
).data(links, (d) => d.target.data.state.key).join( | ||
(enter) => { | ||
const source = [ | ||
y0 + origin.ySize - spacingHorizontal, | ||
x0 + origin.xSize / 2 | ||
]; | ||
return enter.insert("path", "g").attr("class", "markmap-link").attr("data-depth", (d) => d.target.data.state.depth).attr("data-path", (d) => d.target.data.state.path).attr("d", linkShape({ source, target: source })); | ||
}, | ||
(update) => update, | ||
(exit) => { | ||
const source = [ | ||
origin.y + origin.ySize - spacingHorizontal, | ||
origin.x + origin.xSize / 2 | ||
]; | ||
return this.transition(exit).attr("d", linkShape({ source, target: source })).remove(); | ||
} | ||
this.transition(mmCircle).attr("r", 6); | ||
this.transition(mmFoExit).style("opacity", 0); | ||
mmFoMerge.attr("width", (d) => Math.max(0, d.state.rect.width - paddingX * 2)).attr("height", (d) => d.state.rect.height); | ||
this.transition(mmFoMerge).style("opacity", 1); | ||
const pathOrigin = [ | ||
originRect.x + originRect.width, | ||
originRect.y + originRect.height / 2 | ||
]; | ||
this.transition(mmPathExit).attr("d", linkShape({ source: pathOrigin, target: pathOrigin })).remove(); | ||
mmPathEnter.attr( | ||
"d", | ||
linkShape({ source: pathOrigin, target: pathOrigin }) | ||
); | ||
this.transition(path).attr("stroke", (d) => color(d.target.data)).attr("stroke-width", (d) => linkWidth(d.target)).attr("d", (d) => { | ||
this.transition(mmPathMerge).attr("stroke", (d) => color(d.target)).attr("stroke-width", (d) => linkWidth(d.target)).attr("d", (d) => { | ||
const origSource = d.source; | ||
const origTarget = d.target; | ||
const source = [ | ||
origSource.y + origSource.ySize - spacingHorizontal, | ||
origSource.x + origSource.xSize / 2 | ||
origSource.state.rect.x + origSource.state.rect.width, | ||
origSource.state.rect.y + origSource.state.rect.height / 2 | ||
]; | ||
const target = [ | ||
origTarget.y, | ||
origTarget.x + origTarget.xSize / 2 | ||
origTarget.state.rect.x, | ||
origTarget.state.rect.y + origTarget.state.rect.height / 2 | ||
]; | ||
return linkShape({ source, target }); | ||
}); | ||
descendants.forEach((d) => { | ||
d.data.state.x0 = d.x; | ||
d.data.state.y0 = d.y; | ||
}); | ||
if (autoFit) this.fit(); | ||
} | ||
@@ -1521,5 +1315,5 @@ transition(sel) { | ||
const { fitRatio } = this.options; | ||
const { minX, maxX, minY, maxY } = this.state; | ||
const naturalWidth = maxY - minY; | ||
const naturalHeight = maxX - minX; | ||
const { x1, y1, x2, y2 } = this.state.rect; | ||
const naturalWidth = x2 - x1; | ||
const naturalHeight = y2 - y1; | ||
const scale = Math.min( | ||
@@ -1531,4 +1325,4 @@ offsetWidth / naturalWidth * fitRatio, | ||
const initialZoom = d32.zoomIdentity.translate( | ||
(offsetWidth - naturalWidth * scale) / 2 - minY * scale, | ||
(offsetHeight - naturalHeight * scale) / 2 - minX * scale | ||
(offsetWidth - naturalWidth * scale) / 2 - x1 * scale, | ||
(offsetHeight - naturalHeight * scale) / 2 - y1 * scale | ||
).scale(scale); | ||
@@ -1540,3 +1334,3 @@ return this.transition(this.svg).call(this.zoom.transform, initialZoom).end().catch(noop); | ||
this.g.selectAll(childSelector("g")).each(function walk(d) { | ||
if (d.data === node) { | ||
if (d === node) { | ||
result = { | ||
@@ -1558,12 +1352,11 @@ data: d, | ||
const svgNode = this.svg.node(); | ||
const { spacingHorizontal } = this.options; | ||
const relRect = svgNode.getBoundingClientRect(); | ||
const transform = d32.zoomTransform(svgNode); | ||
const [left, right] = [ | ||
itemData.y, | ||
itemData.y + itemData.ySize - spacingHorizontal + 2 | ||
itemData.state.rect.x, | ||
itemData.state.rect.x + itemData.state.rect.width + 2 | ||
].map((x) => x * transform.k + transform.x); | ||
const [top, bottom] = [ | ||
itemData.x - itemData.xSize / 2, | ||
itemData.x + itemData.xSize / 2 | ||
itemData.state.rect.y - itemData.state.rect.height / 2, | ||
itemData.state.rect.y + itemData.state.rect.height / 2 | ||
].map((y) => y * transform.k + transform.y); | ||
@@ -1611,4 +1404,3 @@ const pd = { | ||
if (data) { | ||
mm.setData(data); | ||
requestAnimationFrame(() => { | ||
mm.setData(data).then(() => { | ||
mm.fit(); | ||
@@ -1629,3 +1421,4 @@ }); | ||
exports.refreshHook = refreshHook; | ||
exports.simpleHash = simpleHash; | ||
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" }); | ||
})(this.markmap = this.markmap || {}, d3); |
import { IMarkmapOptions } from 'markmap-common'; | ||
export declare const isMacintosh: boolean; | ||
export declare const defaultColorFn: import("d3-scale").ScaleOrdinal<string, string, never>; | ||
export declare const defaultColorFn: import("d3").ScaleOrdinal<string, string, never>; | ||
export declare const defaultOptions: IMarkmapOptions; |
1046
dist/index.js
@@ -1,9 +0,9 @@ | ||
import { Hook as st, getId as at, debounce as lt, addClass as ct, walkTree as M, childSelector as C, noop as T } from "markmap-common"; | ||
import { loadCSS as Ce, loadJS as we } from "markmap-common"; | ||
import { scaleOrdinal as Y, schemeCategory10 as ht, zoomTransform as A, select as dt, zoom as ut, linkHorizontal as pt, min as H, max as I, zoomIdentity as mt, minIndex as ft } from "d3"; | ||
const K = typeof navigator < "u" && navigator.userAgent.includes("Macintosh"), gt = Y(ht), P = { | ||
import { Hook as et, getId as nt, debounce as rt, addClass as it, walkTree as X, childSelector as b, noop as R } from "markmap-common"; | ||
import { loadCSS as ce, loadJS as he } from "markmap-common"; | ||
import { scaleOrdinal as N, schemeCategory10 as st, linkHorizontal as ot, zoomTransform as j, select as at, zoom as lt, min as T, max as _, zoomIdentity as ct, minIndex as ht } from "d3"; | ||
const P = typeof navigator < "u" && navigator.userAgent.includes("Macintosh"), dt = N(st), W = { | ||
autoFit: !1, | ||
color: (e) => { | ||
var t; | ||
return gt(`${((t = e.state) == null ? void 0 : t.path) || ""}`); | ||
return dt(`${((t = e.state) == null ? void 0 : t.path) || ""}`); | ||
}, | ||
@@ -17,3 +17,3 @@ duration: 500, | ||
paddingX: 8, | ||
scrollForPan: K, | ||
scrollForPan: P, | ||
spacingHorizontal: 80, | ||
@@ -26,20 +26,20 @@ spacingVertical: 5, | ||
}; | ||
function Se(e) { | ||
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 (i != null && i.length) { | ||
const s = Y(i); | ||
t.color = (l) => s(`${l.state.path}`); | ||
function se(e) { | ||
const t = {}, n = { ...e }, { color: r, colorFreezeLevel: s } = n; | ||
if ((r == null ? void 0 : r.length) === 1) { | ||
const i = r[0]; | ||
t.color = () => i; | ||
} else if (r != null && r.length) { | ||
const i = N(r); | ||
t.color = (a) => i(`${a.state.path}`); | ||
} | ||
if (o) { | ||
const s = t.color || P.color; | ||
t.color = (l) => (l = { | ||
...l, | ||
if (s) { | ||
const i = t.color || W.color; | ||
t.color = (a) => (a = { | ||
...a, | ||
state: { | ||
...l.state, | ||
path: l.state.path.split(".").slice(0, o).join(".") | ||
...a.state, | ||
path: a.state.path.split(".").slice(0, s).join(".") | ||
} | ||
}, s(l)); | ||
}, i(a)); | ||
} | ||
@@ -56,154 +56,55 @@ return [ | ||
"spacingVertical" | ||
].forEach((s) => { | ||
const l = n[s]; | ||
typeof l == "number" && (t[s] = l); | ||
}), ["zoom", "pan"].forEach((s) => { | ||
const l = n[s]; | ||
l != null && (t[s] = !!l); | ||
].forEach((i) => { | ||
const a = n[i]; | ||
typeof a == "number" && (t[i] = a); | ||
}), ["zoom", "pan"].forEach((i) => { | ||
const a = n[i]; | ||
a != null && (t[i] = !!a); | ||
}), t; | ||
} | ||
/*! @gera2ld/jsx-dom v2.2.2 | ISC License */ | ||
const U = 1, G = 2, xt = "http://www.w3.org/2000/svg", _ = "http://www.w3.org/1999/xlink", yt = { | ||
show: _, | ||
actuate: _, | ||
href: _ | ||
}, kt = (e) => typeof e == "string" || typeof e == "number", vt = (e) => (e == null ? void 0 : e.vtype) === U, St = (e) => (e == null ? void 0 : e.vtype) === G; | ||
function j(e, t) { | ||
let n; | ||
if (typeof e == "string") n = U; | ||
else if (typeof e == "function") n = G; | ||
else throw new Error("Invalid VNode type"); | ||
return { | ||
vtype: n, | ||
type: e, | ||
props: t | ||
}; | ||
function pt(e) { | ||
let t = 0; | ||
for (let n = 0; n < e.length; n++) | ||
t = (t << 5) - t + e.charCodeAt(n) | 0; | ||
return (t >>> 0).toString(36); | ||
} | ||
function bt(e) { | ||
return e.children; | ||
} | ||
const zt = { | ||
isSvg: !1 | ||
}; | ||
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 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 i.startsWith("on") ? e[i.toLowerCase()] = t[i] : wt(e, i, t[i], n.isSvg); | ||
} | ||
const Ct = { | ||
className: "class", | ||
labelFor: "for" | ||
}; | ||
function wt(e, t, n, i) { | ||
if (t = Ct[t] || t, n === !0) | ||
e.setAttribute(t, ""); | ||
else if (n === !1) | ||
e.removeAttribute(t); | ||
else { | ||
const o = i ? yt[t] : void 0; | ||
o !== void 0 ? e.setAttributeNS(o, t, n) : e.setAttribute(t, n); | ||
} | ||
} | ||
function Xt(e) { | ||
return e.reduce((t, n) => t.concat(n), []); | ||
} | ||
function $(e, t) { | ||
return Array.isArray(e) ? Xt(e.map((n) => $(n, t))) : B(e, t); | ||
} | ||
function B(e, t = zt) { | ||
if (e == null || typeof e == "boolean") | ||
return null; | ||
if (e instanceof Node) | ||
return e; | ||
if (St(e)) { | ||
const { | ||
type: n, | ||
props: i | ||
} = e; | ||
if (n === bt) { | ||
const a = document.createDocumentFragment(); | ||
if (i.children) { | ||
const c = $(i.children, t); | ||
L(a, c); | ||
} | ||
return a; | ||
} | ||
const o = n(i); | ||
return B(o, t); | ||
} | ||
if (kt(e)) | ||
return document.createTextNode(`${e}`); | ||
if (vt(e)) { | ||
let n; | ||
const { | ||
type: i, | ||
props: o | ||
} = e; | ||
if (!t.isSvg && i === "svg" && (t = Object.assign({}, t, { | ||
isSvg: !0 | ||
})), t.isSvg ? n = document.createElementNS(xt, i) : n = document.createElement(i), Et(n, o, t), o.children) { | ||
let c = t; | ||
t.isSvg && i === "foreignObject" && (c = Object.assign({}, c, { | ||
isSvg: !1 | ||
})); | ||
const s = $(o.children, c); | ||
s != null && L(n, s); | ||
} | ||
const { | ||
ref: a | ||
} = o; | ||
return typeof a == "function" && a(n), n; | ||
} | ||
throw new Error("mount: Invalid Vnode!"); | ||
} | ||
function O(e) { | ||
return B(e); | ||
} | ||
function jt(e) { | ||
var t = 0, n = e.children, i = n && n.length; | ||
if (!i) t = 1; | ||
else for (; --i >= 0; ) t += n[i].value; | ||
function ut(e) { | ||
var t = 0, n = e.children, r = n && n.length; | ||
if (!r) t = 1; | ||
else for (; --r >= 0; ) t += n[r].value; | ||
e.value = t; | ||
} | ||
function Nt() { | ||
return this.eachAfter(jt); | ||
function mt() { | ||
return this.eachAfter(ut); | ||
} | ||
function Rt(e) { | ||
var t = this, n, i = [t], o, a, c; | ||
function gt(e) { | ||
var t = this, n, r = [t], s, l, c; | ||
do | ||
for (n = i.reverse(), i = []; t = n.pop(); ) | ||
if (e(t), o = t.children, o) for (a = 0, c = o.length; a < c; ++a) | ||
i.push(o[a]); | ||
while (i.length); | ||
for (n = r.reverse(), r = []; t = n.pop(); ) | ||
if (e(t), s = t.children, s) for (l = 0, c = s.length; l < c; ++l) | ||
r.push(s[l]); | ||
while (r.length); | ||
return this; | ||
} | ||
function Mt(e) { | ||
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]); | ||
function ft(e) { | ||
for (var t = this, n = [t], r, s; t = n.pop(); ) | ||
if (e(t), r = t.children, r) for (s = r.length - 1; s >= 0; --s) | ||
n.push(r[s]); | ||
return this; | ||
} | ||
function Tt(e) { | ||
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 = i.pop(); ) | ||
function xt(e) { | ||
for (var t = this, n = [t], r = [], s, l, c; t = n.pop(); ) | ||
if (r.push(t), s = t.children, s) for (l = 0, c = s.length; l < c; ++l) | ||
n.push(s[l]); | ||
for (; t = r.pop(); ) | ||
e(t); | ||
return this; | ||
} | ||
function At(e) { | ||
function yt(e) { | ||
return this.eachAfter(function(t) { | ||
for (var n = +e(t.data) || 0, i = t.children, o = i && i.length; --o >= 0; ) n += i[o].value; | ||
for (var n = +e(t.data) || 0, r = t.children, s = r && r.length; --s >= 0; ) n += r[s].value; | ||
t.value = n; | ||
}); | ||
} | ||
function _t(e) { | ||
function kt(e) { | ||
return this.eachBefore(function(t) { | ||
@@ -213,17 +114,17 @@ t.children && t.children.sort(e); | ||
} | ||
function Ot(e) { | ||
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; | ||
function vt(e) { | ||
for (var t = this, n = bt(t, e), r = [t]; t !== n; ) | ||
t = t.parent, r.push(t); | ||
for (var s = r.length; e !== n; ) | ||
r.splice(s, 0, e), e = e.parent; | ||
return r; | ||
} | ||
function Dt(e, t) { | ||
function bt(e, t) { | ||
if (e === t) return e; | ||
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; | ||
var n = e.ancestors(), r = t.ancestors(), s = null; | ||
for (e = n.pop(), t = r.pop(); e === t; ) | ||
s = e, e = n.pop(), t = r.pop(); | ||
return s; | ||
} | ||
function $t() { | ||
function zt() { | ||
for (var e = this, t = [e]; e = e.parent; ) | ||
@@ -233,3 +134,3 @@ t.push(e); | ||
} | ||
function Bt() { | ||
function St() { | ||
var e = []; | ||
@@ -240,3 +141,3 @@ return this.each(function(t) { | ||
} | ||
function Ft() { | ||
function Et() { | ||
var e = []; | ||
@@ -247,3 +148,3 @@ return this.eachBefore(function(t) { | ||
} | ||
function Ht() { | ||
function Ct() { | ||
var e = this, t = []; | ||
@@ -254,20 +155,20 @@ return e.each(function(n) { | ||
} | ||
function F(e, t) { | ||
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) | ||
a.push(c = o.children[l] = new N(s[l])), c.parent = o, c.depth = o.depth + 1; | ||
return n.eachBefore(Vt); | ||
function O(e, t) { | ||
var n = new E(e), r = +e.value && (n.value = e.value), s, l = [n], c, i, a, d; | ||
for (t == null && (t = Xt); s = l.pop(); ) | ||
if (r && (s.value = +s.data.value), (i = t(s.data)) && (d = i.length)) | ||
for (s.children = new Array(d), a = d - 1; a >= 0; --a) | ||
l.push(c = s.children[a] = new E(i[a])), c.parent = s, c.depth = s.depth + 1; | ||
return n.eachBefore(jt); | ||
} | ||
function It() { | ||
return F(this).eachBefore(Wt); | ||
function wt() { | ||
return O(this).eachBefore(Rt); | ||
} | ||
function Lt(e) { | ||
function Xt(e) { | ||
return e.children; | ||
} | ||
function Wt(e) { | ||
function Rt(e) { | ||
e.data = e.data.data; | ||
} | ||
function Vt(e) { | ||
function jt(e) { | ||
var t = 0; | ||
@@ -278,84 +179,36 @@ do | ||
} | ||
function N(e) { | ||
function E(e) { | ||
this.data = e, this.depth = this.height = 0, this.parent = null; | ||
} | ||
N.prototype = F.prototype = { | ||
constructor: N, | ||
count: Nt, | ||
each: Rt, | ||
eachAfter: Tt, | ||
eachBefore: Mt, | ||
sum: At, | ||
sort: _t, | ||
path: Ot, | ||
ancestors: $t, | ||
descendants: Bt, | ||
leaves: Ft, | ||
links: Ht, | ||
copy: It | ||
E.prototype = O.prototype = { | ||
constructor: E, | ||
count: mt, | ||
each: gt, | ||
eachAfter: xt, | ||
eachBefore: ft, | ||
sum: yt, | ||
sort: kt, | ||
path: vt, | ||
ancestors: zt, | ||
descendants: St, | ||
leaves: Et, | ||
links: Ct, | ||
copy: wt | ||
}; | ||
const Yt = "d3-flextree", Kt = "2.1.2", Pt = "build/d3-flextree.js", Ut = "index", Gt = { | ||
name: "Chris Maloney", | ||
url: "http://chrismaloney.org" | ||
}, Zt = "Flexible tree layout algorithm that allows for variable node sizes.", qt = [ | ||
"d3", | ||
"d3-module", | ||
"layout", | ||
"tree", | ||
"hierarchy", | ||
"d3-hierarchy", | ||
"plugin", | ||
"d3-plugin", | ||
"infovis", | ||
"visualization", | ||
"2d" | ||
], Jt = "https://github.com/klortho/d3-flextree", Qt = "WTFPL", te = { | ||
type: "git", | ||
url: "https://github.com/klortho/d3-flextree.git" | ||
}, ee = { | ||
clean: "rm -rf build demo test", | ||
"build:demo": "rollup -c --environment BUILD:demo", | ||
"build:dev": "rollup -c --environment BUILD:dev", | ||
"build:prod": "rollup -c --environment BUILD:prod", | ||
"build:test": "rollup -c --environment BUILD:test", | ||
build: "rollup -c", | ||
lint: "eslint index.js src", | ||
"test:main": "node test/bundle.js", | ||
"test:browser": "node test/browser-tests.js", | ||
test: "npm-run-all test:*", | ||
prepare: "npm-run-all clean build lint test" | ||
}, ne = { | ||
"d3-hierarchy": "^1.1.5" | ||
}, ie = { | ||
"babel-plugin-external-helpers": "^6.22.0", | ||
"babel-preset-es2015-rollup": "^3.0.0", | ||
d3: "^4.13.0", | ||
"d3-selection-multi": "^1.0.1", | ||
eslint: "^4.19.1", | ||
jsdom: "^11.6.2", | ||
"npm-run-all": "^4.1.2", | ||
rollup: "^0.55.3", | ||
"rollup-plugin-babel": "^2.7.1", | ||
"rollup-plugin-commonjs": "^8.0.2", | ||
"rollup-plugin-copy": "^0.2.3", | ||
"rollup-plugin-json": "^2.3.0", | ||
"rollup-plugin-node-resolve": "^3.0.2", | ||
"rollup-plugin-uglify": "^3.0.0", | ||
"uglify-es": "^3.3.9" | ||
}, re = { | ||
name: Yt, | ||
version: Kt, | ||
main: Pt, | ||
module: Ut, | ||
const Mt = "d3-flextree", Bt = "2.1.2", Ot = "build/d3-flextree.js", $t = "index", At = { name: "Chris Maloney", url: "http://chrismaloney.org" }, Ft = "Flexible tree layout algorithm that allows for variable node sizes.", Dt = ["d3", "d3-module", "layout", "tree", "hierarchy", "d3-hierarchy", "plugin", "d3-plugin", "infovis", "visualization", "2d"], Tt = "https://github.com/klortho/d3-flextree", _t = "WTFPL", Ht = { type: "git", url: "https://github.com/klortho/d3-flextree.git" }, Lt = { clean: "rm -rf build demo test", "build:demo": "rollup -c --environment BUILD:demo", "build:dev": "rollup -c --environment BUILD:dev", "build:prod": "rollup -c --environment BUILD:prod", "build:test": "rollup -c --environment BUILD:test", build: "rollup -c", lint: "eslint index.js src", "test:main": "node test/bundle.js", "test:browser": "node test/browser-tests.js", test: "npm-run-all test:*", prepare: "npm-run-all clean build lint test" }, Nt = { "d3-hierarchy": "^1.1.5" }, Pt = { "babel-plugin-external-helpers": "^6.22.0", "babel-preset-es2015-rollup": "^3.0.0", d3: "^4.13.0", "d3-selection-multi": "^1.0.1", eslint: "^4.19.1", jsdom: "^11.6.2", "npm-run-all": "^4.1.2", rollup: "^0.55.3", "rollup-plugin-babel": "^2.7.1", "rollup-plugin-commonjs": "^8.0.2", "rollup-plugin-copy": "^0.2.3", "rollup-plugin-json": "^2.3.0", "rollup-plugin-node-resolve": "^3.0.2", "rollup-plugin-uglify": "^3.0.0", "uglify-es": "^3.3.9" }, Wt = { | ||
name: Mt, | ||
version: Bt, | ||
main: Ot, | ||
module: $t, | ||
"jsnext:main": "index", | ||
author: Gt, | ||
description: Zt, | ||
keywords: qt, | ||
homepage: Jt, | ||
license: Qt, | ||
repository: te, | ||
scripts: ee, | ||
dependencies: ne, | ||
devDependencies: ie | ||
}, { version: oe } = re, se = Object.freeze({ | ||
author: At, | ||
description: Ft, | ||
keywords: Dt, | ||
homepage: Tt, | ||
license: _t, | ||
repository: Ht, | ||
scripts: Lt, | ||
dependencies: Nt, | ||
devDependencies: Pt | ||
}, { version: It } = Wt, Kt = Object.freeze({ | ||
children: (e) => e.children, | ||
@@ -365,15 +218,15 @@ nodeSize: (e) => e.data.size, | ||
}); | ||
function q(e) { | ||
const t = Object.assign({}, se, e); | ||
function n(s) { | ||
const l = t[s]; | ||
return typeof l == "function" ? l : () => l; | ||
function K(e) { | ||
const t = Object.assign({}, Kt, e); | ||
function n(i) { | ||
const a = t[i]; | ||
return typeof a == "function" ? a : () => a; | ||
} | ||
function i(s) { | ||
const l = c(a(), s, (p) => p.children); | ||
return l.update(), l.data; | ||
function r(i) { | ||
const a = c(l(), i, (d) => d.children); | ||
return a.update(), a.data; | ||
} | ||
function o() { | ||
const s = n("nodeSize"), l = n("spacing"); | ||
return class Z extends F.prototype.constructor { | ||
function s() { | ||
const i = n("nodeSize"), a = n("spacing"); | ||
return class I extends O.prototype.constructor { | ||
constructor(h) { | ||
@@ -383,10 +236,10 @@ super(h); | ||
copy() { | ||
const h = c(this.constructor, this, (u) => u.children); | ||
return h.each((u) => u.data = u.data.data), h; | ||
const h = c(this.constructor, this, (p) => p.children); | ||
return h.each((p) => p.data = p.data.data), h; | ||
} | ||
get size() { | ||
return s(this); | ||
return i(this); | ||
} | ||
spacing(h) { | ||
return l(this, h); | ||
return a(this, h); | ||
} | ||
@@ -435,3 +288,3 @@ get nodes() { | ||
return (this.children || []).reduce( | ||
(h, u) => Z.maxExtents(h, u.extents), | ||
(h, p) => I.maxExtents(h, p.extents), | ||
this.nodeExtents | ||
@@ -448,8 +301,8 @@ ); | ||
} | ||
static maxExtents(h, u) { | ||
static maxExtents(h, p) { | ||
return { | ||
top: Math.min(h.top, u.top), | ||
bottom: Math.max(h.bottom, u.bottom), | ||
left: Math.min(h.left, u.left), | ||
right: Math.max(h.right, u.right) | ||
top: Math.min(h.top, p.top), | ||
bottom: Math.max(h.bottom, p.bottom), | ||
left: Math.min(h.left, p.left), | ||
right: Math.max(h.right, p.right) | ||
}; | ||
@@ -459,5 +312,5 @@ } | ||
} | ||
function a() { | ||
const s = o(), l = n("nodeSize"), p = n("spacing"); | ||
return class extends s { | ||
function l() { | ||
const i = s(), a = n("nodeSize"), d = n("spacing"); | ||
return class extends i { | ||
constructor(h) { | ||
@@ -480,6 +333,6 @@ super(h), Object.assign(this, { | ||
get size() { | ||
return l(this.data); | ||
return a(this.data); | ||
} | ||
spacing(h) { | ||
return p(this.data, h.data); | ||
return d(this.data, h.data); | ||
} | ||
@@ -499,101 +352,101 @@ get x() { | ||
update() { | ||
return J(this), Q(this), this; | ||
return G(this), U(this), this; | ||
} | ||
}; | ||
} | ||
function c(s, l, p) { | ||
const h = (u, g) => { | ||
const x = new s(u); | ||
Object.assign(x, { | ||
parent: g, | ||
depth: g === null ? 0 : g.depth + 1, | ||
function c(i, a, d) { | ||
const h = (p, u) => { | ||
const g = new i(p); | ||
Object.assign(g, { | ||
parent: u, | ||
depth: u === null ? 0 : u.depth + 1, | ||
height: 0, | ||
length: 1 | ||
}); | ||
const m = p(u) || []; | ||
return x.children = m.length === 0 ? null : m.map((y) => h(y, x)), x.children && Object.assign(x, x.children.reduce( | ||
(y, f) => ({ | ||
height: Math.max(y.height, f.height + 1), | ||
length: y.length + f.length | ||
const f = d(p) || []; | ||
return g.children = f.length === 0 ? null : f.map((x) => h(x, g)), g.children && Object.assign(g, g.children.reduce( | ||
(x, v) => ({ | ||
height: Math.max(x.height, v.height + 1), | ||
length: x.length + v.length | ||
}), | ||
x | ||
)), x; | ||
g | ||
)), g; | ||
}; | ||
return h(l, null); | ||
return h(a, null); | ||
} | ||
return Object.assign(i, { | ||
nodeSize(s) { | ||
return arguments.length ? (t.nodeSize = s, i) : t.nodeSize; | ||
return Object.assign(r, { | ||
nodeSize(i) { | ||
return arguments.length ? (t.nodeSize = i, r) : t.nodeSize; | ||
}, | ||
spacing(s) { | ||
return arguments.length ? (t.spacing = s, i) : t.spacing; | ||
spacing(i) { | ||
return arguments.length ? (t.spacing = i, r) : t.spacing; | ||
}, | ||
children(s) { | ||
return arguments.length ? (t.children = s, i) : t.children; | ||
children(i) { | ||
return arguments.length ? (t.children = i, r) : t.children; | ||
}, | ||
hierarchy(s, l) { | ||
const p = typeof l > "u" ? t.children : l; | ||
return c(o(), s, p); | ||
hierarchy(i, a) { | ||
const d = typeof a > "u" ? t.children : a; | ||
return c(s(), i, d); | ||
}, | ||
dump(s) { | ||
const l = n("nodeSize"), p = (h) => (u) => { | ||
const g = h + " ", x = h + " ", { x: m, y } = u, f = l(u), k = u.children || [], v = k.length === 0 ? " " : `,${g}children: [${x}${k.map(p(x)).join(x)}${g}],${h}`; | ||
return `{ size: [${f.join(", ")}],${g}x: ${m}, y: ${y}${v}},`; | ||
dump(i) { | ||
const a = n("nodeSize"), d = (h) => (p) => { | ||
const u = h + " ", g = h + " ", { x: f, y: x } = p, v = a(p), k = p.children || [], z = k.length === 0 ? " " : `,${u}children: [${g}${k.map(d(g)).join(g)}${u}],${h}`; | ||
return `{ size: [${v.join(", ")}],${u}x: ${f}, y: ${x}${z}},`; | ||
}; | ||
return p(` | ||
`)(s); | ||
return d(` | ||
`)(i); | ||
} | ||
}), i; | ||
}), r; | ||
} | ||
q.version = oe; | ||
const J = (e, t = 0) => (e.y = t, (e.children || []).reduce((n, i) => { | ||
const [o, a] = n; | ||
J(i, e.y + e.ySize); | ||
const c = (o === 0 ? i.lExt : i.rExt).bottom; | ||
o !== 0 && le(e, o, a); | ||
const s = ge(c, o, a); | ||
return [o + 1, s]; | ||
}, [0, null]), ae(e), fe(e), e), Q = (e, t, n) => { | ||
K.version = It; | ||
const G = (e, t = 0) => (e.y = t, (e.children || []).reduce((n, r) => { | ||
const [s, l] = n; | ||
G(r, e.y + e.ySize); | ||
const c = (s === 0 ? r.lExt : r.rExt).bottom; | ||
s !== 0 && Ut(e, s, l); | ||
const i = ee(c, s, l); | ||
return [s + 1, i]; | ||
}, [0, null]), Gt(e), te(e), e), U = (e, t, n) => { | ||
typeof t > "u" && (t = -e.relX - e.prelim, n = 0); | ||
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) => { | ||
const r = t + e.relX; | ||
return e.relX = r + e.prelim - n, e.prelim = 0, e.x = n + e.relX, (e.children || []).forEach((s) => U(s, r, e.x)), e; | ||
}, Gt = (e) => { | ||
(e.children || []).reduce((t, n) => { | ||
const [i, o] = t, a = i + n.shift, c = o + a + n.change; | ||
return n.relX += c, [a, c]; | ||
const [r, s] = t, l = r + n.shift, c = s + l + n.change; | ||
return n.relX += c, [l, c]; | ||
}, [0, 0]); | ||
}, le = (e, t, n) => { | ||
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; ) { | ||
a.bottom > n.lowY && (n = n.next); | ||
const h = c + a.prelim - (l + s.prelim) + a.xSize / 2 + s.xSize / 2 + a.spacing(s); | ||
(h > 0 || h < 0 && p) && (l += h, ce(o, h), he(e, t, n.index, h)), p = !1; | ||
const u = a.bottom, g = s.bottom; | ||
u <= g && (a = ue(a), a && (c += a.relX)), u >= g && (s = de(s), s && (l += s.relX)); | ||
}, Ut = (e, t, n) => { | ||
const r = e.children[t - 1], s = e.children[t]; | ||
let l = r, c = r.relX, i = s, a = s.relX, d = !0; | ||
for (; l && i; ) { | ||
l.bottom > n.lowY && (n = n.next); | ||
const h = c + l.prelim - (a + i.prelim) + l.xSize / 2 + i.xSize / 2 + l.spacing(i); | ||
(h > 0 || h < 0 && d) && (a += h, Vt(s, h), Yt(e, t, n.index, h)), d = !1; | ||
const p = l.bottom, u = i.bottom; | ||
p <= u && (l = qt(l), l && (c += l.relX)), p >= u && (i = Zt(i), i && (a += i.relX)); | ||
} | ||
!a && s ? pe(e, t, s, l) : a && !s && me(e, t, a, c); | ||
}, ce = (e, t) => { | ||
!l && i ? Jt(e, t, i, a) : l && !i && Qt(e, t, l, c); | ||
}, Vt = (e, t) => { | ||
e.relX += t, e.lExtRelX += t, e.rExtRelX += t; | ||
}, he = (e, t, n, i) => { | ||
const o = e.children[t], a = t - n; | ||
if (a > 1) { | ||
const c = i / a; | ||
e.children[n + 1].shift += c, o.shift -= c, o.change -= i - c; | ||
}, Yt = (e, t, n, r) => { | ||
const s = e.children[t], l = t - n; | ||
if (l > 1) { | ||
const c = r / l; | ||
e.children[n + 1].shift += c, s.shift -= c, s.change -= r - c; | ||
} | ||
}, 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 = i - n.relX - o.lExtRelX; | ||
a.relX += s, a.prelim -= s, o.lExt = c.lExt, o.lExtRelX = c.lExtRelX; | ||
}, me = (e, t, n, i) => { | ||
const o = e.children[t], a = o.rExt, c = e.children[t - 1]; | ||
a.rThr = n; | ||
const s = i - n.relX - o.rExtRelX; | ||
a.relX += s, a.prelim -= s, o.rExt = c.rExt, o.rExtRelX = c.rExtRelX; | ||
}, fe = (e) => { | ||
}, Zt = (e) => e.hasChildren ? e.firstChild : e.lThr, qt = (e) => e.hasChildren ? e.lastChild : e.rThr, Jt = (e, t, n, r) => { | ||
const s = e.firstChild, l = s.lExt, c = e.children[t]; | ||
l.lThr = n; | ||
const i = r - n.relX - s.lExtRelX; | ||
l.relX += i, l.prelim -= i, s.lExt = c.lExt, s.lExtRelX = c.lExtRelX; | ||
}, Qt = (e, t, n, r) => { | ||
const s = e.children[t], l = s.rExt, c = e.children[t - 1]; | ||
l.rThr = n; | ||
const i = r - n.relX - s.rExtRelX; | ||
l.relX += i, l.prelim -= i, s.rExt = c.rExt, s.rExtRelX = c.rExtRelX; | ||
}, te = (e) => { | ||
if (e.hasChildren) { | ||
const t = e.firstChild, n = e.lastChild, i = (t.prelim + t.relX - t.xSize / 2 + n.relX + n.prelim + n.xSize / 2) / 2; | ||
const t = e.firstChild, n = e.lastChild, r = (t.prelim + t.relX - t.xSize / 2 + n.relX + n.prelim + n.xSize / 2) / 2; | ||
Object.assign(e, { | ||
prelim: i, | ||
prelim: r, | ||
lExt: t.lExt, | ||
@@ -605,3 +458,3 @@ lExtRelX: t.lExtRelX, | ||
} | ||
}, ge = (e, t, n) => { | ||
}, ee = (e, t, n) => { | ||
for (; n !== null && e >= n.lowY; ) | ||
@@ -614,38 +467,38 @@ n = n.next; | ||
}; | ||
}, xe = ".markmap-container{position:absolute;width:0;height:0;top:-100px;left:-100px;overflow:hidden}.markmap-container>.markmap-foreign{display:inline-block}.markmap-container>.markmap-foreign>div:last-child,.markmap-container>.markmap-foreign>div:last-child :not(pre){white-space:nowrap}.markmap-container>.markmap-foreign>div:last-child code{white-space:inherit}", tt = ".markmap{--markmap-max-width: none;--markmap-a-color: #0097e6;--markmap-a-hover-color: #00a8ff;--markmap-code-bg: #f0f0f0;--markmap-code-color: #555;--markmap-highlight-bg: #ffeaa7;--markmap-table-border: 1px solid currentColor;--markmap-font: 300 16px/20px sans-serif;--markmap-circle-open-bg: #fff;--markmap-text-color: #333;font:var(--markmap-font);color:var(--markmap-text-color)}.markmap-link{fill:none}.markmap-node>circle{cursor:pointer}.markmap-foreign{display:inline-block}.markmap-foreign p{margin:0}.markmap-foreign a{color:var(--markmap-a-color)}.markmap-foreign a:hover{color:var(--markmap-a-hover-color)}.markmap-foreign code{padding:.25em;font-size:calc(1em - 2px);color:var(--markmap-code-color);background-color:var(--markmap-code-bg);border-radius:2px}.markmap-foreign pre{margin:0}.markmap-foreign pre>code{display:block}.markmap-foreign del{text-decoration:line-through}.markmap-foreign em{font-style:italic}.markmap-foreign strong{font-weight:700}.markmap-foreign mark{background:var(--markmap-highlight-bg)}.markmap-foreign table,.markmap-foreign th,.markmap-foreign td{border-collapse:collapse;border:var(--markmap-table-border)}.markmap-foreign img{display:inline-block}.markmap-foreign svg{fill:currentColor}.markmap-foreign-testing-max{max-width:var(--markmap-max-width)}.markmap-foreign-testing-max img{max-width:var(--markmap-max-width);max-height:none}@media (prefers-color-scheme: dark){.markmap{--markmap-code-bg: #1a1b26;--markmap-code-color: #ddd;--markmap-circle-open-bg: #444;--markmap-text-color: #eee}}", be = tt; | ||
function W(e) { | ||
const t = e.data; | ||
return Math.max(4 - 2 * t.state.depth, 1.5); | ||
}, V = ".markmap{--markmap-max-width: 9999px;--markmap-a-color: #0097e6;--markmap-a-hover-color: #00a8ff;--markmap-code-bg: #f0f0f0;--markmap-code-color: #555;--markmap-highlight-bg: #ffeaa7;--markmap-table-border: 1px solid currentColor;--markmap-font: 300 16px/20px sans-serif;--markmap-circle-open-bg: #fff;--markmap-text-color: #333;font:var(--markmap-font);color:var(--markmap-text-color)}.markmap-link{fill:none}.markmap-node>circle{cursor:pointer}.markmap-foreign{display:inline-block}.markmap-foreign p{margin:0}.markmap-foreign a{color:var(--markmap-a-color)}.markmap-foreign a:hover{color:var(--markmap-a-hover-color)}.markmap-foreign code{padding:.25em;font-size:calc(1em - 2px);color:var(--markmap-code-color);background-color:var(--markmap-code-bg);border-radius:2px}.markmap-foreign pre{margin:0}.markmap-foreign pre>code{display:block}.markmap-foreign del{text-decoration:line-through}.markmap-foreign em{font-style:italic}.markmap-foreign strong{font-weight:700}.markmap-foreign mark{background:var(--markmap-highlight-bg)}.markmap-foreign table,.markmap-foreign th,.markmap-foreign td{border-collapse:collapse;border:var(--markmap-table-border)}.markmap-foreign img{display:inline-block}.markmap-foreign svg{fill:currentColor}.markmap-foreign>div{width:var(--markmap-max-width)}.markmap-foreign>div>div{display:inline-block}.markmap-dark .markmap{--markmap-code-bg: #1a1b26;--markmap-code-color: #ddd;--markmap-circle-open-bg: #444;--markmap-text-color: #eee}", oe = V, M = ot(); | ||
function H(e) { | ||
return Math.max(4 - 2 * e.state.depth, 1.5); | ||
} | ||
function V(e, t) { | ||
const n = ft(e, t); | ||
function L(e, t) { | ||
const n = ht(e, t); | ||
return e[n]; | ||
} | ||
function D(e) { | ||
function B(e) { | ||
e.stopPropagation(); | ||
} | ||
const ye = new st(); | ||
class et { | ||
const ne = new et(); | ||
class Y { | ||
constructor(t, n) { | ||
this.options = P, this.revokers = [], this.imgCache = {}, this.handleZoom = (i) => { | ||
const { transform: o } = i; | ||
this.g.attr("transform", o); | ||
}, this.handlePan = (i) => { | ||
i.preventDefault(); | ||
const o = A(this.svg.node()), a = o.translate( | ||
-i.deltaX / o.k, | ||
-i.deltaY / o.k | ||
this.options = W, this.revokers = [], this.handleZoom = (r) => { | ||
const { transform: s } = r; | ||
this.g.attr("transform", s); | ||
}, this.handlePan = (r) => { | ||
r.preventDefault(); | ||
const s = j(this.svg.node()), l = s.translate( | ||
-r.deltaX / s.k, | ||
-r.deltaY / s.k | ||
); | ||
this.svg.call(this.zoom.transform, a); | ||
}, this.handleClick = (i, o) => { | ||
let a = this.options.toggleRecursively; | ||
(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(), | ||
minX: 0, | ||
maxX: 0, | ||
minY: 0, | ||
maxY: 0 | ||
}, this.g = this.svg.append("g"), this.debouncedRefresh = lt(() => this.setData(), 200), this.revokers.push( | ||
ye.tap(() => { | ||
this.svg.call(this.zoom.transform, l); | ||
}, this.handleClick = (r, s) => { | ||
let l = this.options.toggleRecursively; | ||
(P ? r.metaKey : r.ctrlKey) && (l = !l), this.toggleNode(s, l); | ||
}, this.svg = t.datum ? t : at(t), this.styleNode = this.svg.append("style"), this.zoom = lt().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 = { | ||
id: this.options.id || this.svg.attr("id") || nt(), | ||
rect: { x1: 0, y1: 0, x2: 0, y2: 0 } | ||
}, this.g = this.svg.append("g"), this.observer = new ResizeObserver( | ||
rt(() => { | ||
this.renderData(); | ||
}, 100) | ||
), this.revokers.push( | ||
ne.tap(() => { | ||
this.setData(); | ||
@@ -656,4 +509,4 @@ }) | ||
getStyleContent() { | ||
const { style: t } = this.options, { id: n } = this.state, i = typeof t == "function" ? t(n) : ""; | ||
return [this.options.embedGlobalCSS && tt, i].filter(Boolean).join(` | ||
const { style: t } = this.options, { id: n } = this.state, r = typeof t == "function" ? t(n) : ""; | ||
return [this.options.embedGlobalCSS && V, r].filter(Boolean).join(` | ||
`); | ||
@@ -664,3 +517,3 @@ } | ||
"class", | ||
ct(this.svg.attr("class"), "markmap", this.state.id) | ||
it(this.svg.attr("class"), "markmap", this.state.id) | ||
); | ||
@@ -670,76 +523,74 @@ const t = this.getStyleContent(); | ||
} | ||
toggleNode(t, n = !1) { | ||
var o, a; | ||
const i = (o = t.payload) != null && o.fold ? 0 : 1; | ||
n ? M(t, (c, s) => { | ||
async toggleNode(t, n = !1) { | ||
var s, l; | ||
const r = (s = t.payload) != null && s.fold ? 0 : 1; | ||
n ? X(t, (c, i) => { | ||
c.payload = { | ||
...c.payload, | ||
fold: i | ||
}, s(); | ||
fold: r | ||
}, i(); | ||
}) : t.payload = { | ||
...t.payload, | ||
fold: (a = t.payload) != null && a.fold ? 0 : 1 | ||
}, this.renderData(t); | ||
fold: (l = t.payload) != null && l.fold ? 0 : 1 | ||
}, await this.renderData(t); | ||
} | ||
initializeData(t) { | ||
_initializeData(t) { | ||
let n = 0; | ||
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` }) | ||
), p = O( | ||
/* @__PURE__ */ j("style", { children: [this.getStyleContent(), xe].join(` | ||
`) }) | ||
); | ||
document.body.append(l, p); | ||
const h = a ? `--markmap-max-width: ${a}px` : ""; | ||
let u = 0, g = 0; | ||
M(t, (m, y, f) => { | ||
var b, w, z; | ||
g += 1, m.children = (b = m.children) == null ? void 0 : b.map((E) => ({ ...E })), n += 1; | ||
const k = O( | ||
/* @__PURE__ */ j( | ||
"div", | ||
{ | ||
className: "markmap-foreign markmap-foreign-testing-max", | ||
style: h, | ||
children: /* @__PURE__ */ j("div", { dangerouslySetInnerHTML: { __html: m.content } }) | ||
} | ||
) | ||
); | ||
l.append(k), m.state = { | ||
...m.state, | ||
depth: g, | ||
const { color: r, initialExpandLevel: s } = this.options; | ||
let l = 0, c = 0; | ||
X(t, (i, a, d) => { | ||
var p, u, g, f; | ||
c += 1, i.children = (p = i.children) == null ? void 0 : p.map((x) => ({ ...x })), n += 1, i.state = { | ||
...i.state, | ||
depth: c, | ||
id: n, | ||
el: k.firstChild | ||
}, 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; | ||
v ? u += 1 : (u || c >= 0 && m.state.depth >= c) && (m.payload = { ...m.payload, fold: 1 }), y(), v && (u -= 1), g -= 1; | ||
rect: { | ||
x: 0, | ||
y: 0, | ||
width: 0, | ||
height: 0 | ||
}, | ||
size: [0, 0] | ||
}, i.state.key = [(u = d == null ? void 0 : d.state) == null ? void 0 : u.id, i.state.id].filter(Boolean).join(".") + pt(i.content), i.state.path = [(g = d == null ? void 0 : d.state) == null ? void 0 : g.path, i.state.id].filter(Boolean).join("."), r(i); | ||
const h = ((f = i.payload) == null ? void 0 : f.fold) === 2; | ||
h ? l += 1 : (l || s >= 0 && i.state.depth >= s) && (i.payload = { ...i.payload, fold: 1 }), a(), h && (l -= 1), c -= 1; | ||
}); | ||
const x = Array.from(l.childNodes).map( | ||
(m) => m.firstChild | ||
); | ||
this._checkImages(l), x.forEach((m) => { | ||
var y; | ||
(y = m.parentNode) == null || y.append(m.cloneNode(!0)); | ||
}), M(t, (m, y, f) => { | ||
var b; | ||
const k = m.state, v = k.el.getBoundingClientRect(); | ||
m.content = k.el.innerHTML, k.size = [ | ||
Math.ceil(v.width) + 1, | ||
Math.max(Math.ceil(v.height), o) | ||
], k.key = [(b = f == null ? void 0 : f.state) == null ? void 0 : b.id, k.id].filter(Boolean).join(".") + // FIXME: find a way to check content hash | ||
m.content, y(); | ||
}), l.remove(), p.remove(); | ||
} | ||
_checkImages(t) { | ||
t.querySelectorAll("img").forEach((n) => { | ||
if (n.width) return; | ||
const i = this.imgCache[n.src]; | ||
i != null && i[0] ? [n.width, n.height] = i : i || this._loadImage(n.src); | ||
_relayout() { | ||
if (!this.state.data) return; | ||
this.g.selectAll(b("g")).selectAll( | ||
b("foreignObject") | ||
).each(function(i) { | ||
var h; | ||
const a = (h = this.firstChild) == null ? void 0 : h.firstChild, d = [a.scrollWidth, a.scrollHeight]; | ||
i.state.size = d; | ||
}); | ||
} | ||
_loadImage(t) { | ||
this.imgCache[t] = [0, 0]; | ||
const n = new Image(); | ||
n.src = t, n.onload = () => { | ||
this.imgCache[t] = [n.naturalWidth, n.naturalHeight], this.debouncedRefresh(); | ||
const { spacingHorizontal: t, paddingX: n, spacingVertical: r } = this.options, s = K({}).children((i) => { | ||
var a; | ||
if (!((a = i.payload) != null && a.fold)) return i.children; | ||
}).nodeSize((i) => { | ||
const [a, d] = i.data.state.size; | ||
return [d, a + (a ? n * 2 : 0) + t]; | ||
}).spacing((i, a) => i.parent === a.parent ? r : r * 2), l = s.hierarchy(this.state.data); | ||
s(l); | ||
const c = l.descendants(); | ||
c.forEach((i) => { | ||
const a = i.data; | ||
a.state.rect = { | ||
x: i.y, | ||
y: i.x, | ||
width: i.ySize - t, | ||
height: i.xSize | ||
}; | ||
}), this.state.rect = { | ||
x1: T(c, (i) => i.data.state.rect.x) || 0, | ||
y1: T(c, (i) => i.data.state.rect.y) || 0, | ||
x2: _( | ||
c, | ||
(i) => i.data.state.rect.x + i.data.state.rect.width | ||
) || 0, | ||
y2: _( | ||
c, | ||
(i) => i.data.state.rect.y + i.data.state.rect.height | ||
) || 0 | ||
}; | ||
@@ -753,123 +604,95 @@ } | ||
} | ||
setData(t, n) { | ||
n && this.setOptions(n), t && (this.state.data = t), this.state.data && (this.initializeData(this.state.data), this.updateStyle(), this.renderData()); | ||
async setData(t, n) { | ||
n && this.setOptions(n), t && (this.state.data = t), this.state.data && (this._initializeData(this.state.data), this.updateStyle(), await this.renderData()); | ||
} | ||
renderData(t) { | ||
async renderData(t) { | ||
const { paddingX: n, autoFit: r, color: s, maxWidth: l } = this.options; | ||
if (!this.state.data) return; | ||
const { spacingHorizontal: n, paddingX: i, spacingVertical: o, autoFit: a, color: c } = this.options, s = q({}).children((r) => { | ||
var d; | ||
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, (r) => r.x - r.xSize / 2), x = I(p, (r) => r.x + r.xSize / 2), m = H(p, (r) => r.y), y = I(p, (r) => r.y + r.ySize - n); | ||
Object.assign(this.state, { | ||
minX: g, | ||
maxX: x, | ||
minY: m, | ||
maxY: y | ||
}), a && this.fit(); | ||
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, (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", | ||
(r) => `translate(${v + f.ySize - r.ySize},${k + f.xSize / 2 - r.xSize})` | ||
), z = this.transition(b.exit()); | ||
z.select("line").attr("x1", (r) => r.ySize - n).attr("x2", (r) => r.ySize - n), z.select("foreignObject").style("opacity", 0), z.attr( | ||
"transform", | ||
(r) => `translate(${f.y + f.ySize - r.ySize},${f.x + f.xSize / 2 - r.xSize})` | ||
).remove(); | ||
const E = b.merge(w).attr( | ||
const c = []; | ||
X(this.state.data, (o, m) => { | ||
var y; | ||
(y = o.payload) != null && y.fold || m(), c.push(o); | ||
}); | ||
const a = (t || this.state.data).state.rect, d = this.g.selectAll(b("g")).data(c, (o) => o.state.key), h = d.enter().append("g").attr("data-depth", (o) => o.state.depth).attr("data-path", (o) => o.state.path), p = d.exit(), u = d.merge(h).attr( | ||
"class", | ||
(r) => { | ||
var d; | ||
return ["markmap-node", ((d = r.data.payload) == null ? void 0 : d.fold) && "markmap-fold"].filter(Boolean).join(" "); | ||
(o) => { | ||
var m; | ||
return ["markmap-node", ((m = o.payload) == null ? void 0 : m.fold) && "markmap-fold"].filter(Boolean).join(" "); | ||
} | ||
); | ||
this.transition(E).attr( | ||
"transform", | ||
(r) => `translate(${r.y},${r.x - r.xSize / 2})` | ||
); | ||
const nt = E.selectAll( | ||
C("line") | ||
), g = u.selectAll(b("line")).data( | ||
(o) => [o], | ||
(o) => o.state.key | ||
), f = g.enter().append("line"), x = p.selectAll( | ||
b("line") | ||
), v = g.merge(f), k = u.selectAll( | ||
b("circle") | ||
).data( | ||
(r) => [r], | ||
(r) => r.data.state.key | ||
).join( | ||
(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", (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( | ||
(r) => { | ||
var d; | ||
return (d = r.data.children) != null && d.length ? [r] : []; | ||
(o) => { | ||
var m; | ||
return (m = o.children) != null && m.length ? [o] : []; | ||
}, | ||
(r) => r.data.state.key | ||
(o) => o.state.key | ||
).join( | ||
(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() | ||
(o) => o.append("circle").attr("stroke-width", "1.5").attr("r", 0).on("click", (m, y) => this.handleClick(m, y)).on("mousedown", B), | ||
(o) => o, | ||
(o) => o.remove() | ||
), z = this.observer, $ = u.selectAll(b("foreignObject")).data( | ||
(o) => [o], | ||
(o) => o.state.key | ||
), C = $.enter().append("foreignObject").attr("class", "markmap-foreign").attr("x", n).attr("y", 0).style("opacity", 0).on("mousedown", B).on("dblclick", B); | ||
C.append("xhtml:div").append("xhtml:div").html((o) => o.content).attr("xmlns", "http://www.w3.org/1999/xhtml"), C.each(function() { | ||
var m; | ||
const o = (m = this.firstChild) == null ? void 0 : m.firstChild; | ||
z.observe(o); | ||
}); | ||
const A = p.selectAll( | ||
b("foreignObject") | ||
); | ||
this.transition(it).attr("r", 6).attr("cx", (r) => r.ySize - n).attr("cy", (r) => r.xSize).attr("stroke", (r) => c(r.data)).attr( | ||
A.each(function() { | ||
var m; | ||
const o = (m = this.firstChild) == null ? void 0 : m.firstChild; | ||
z.unobserve(o); | ||
}); | ||
const F = C.merge($), Z = c.flatMap( | ||
(o) => { | ||
var m; | ||
return (m = o.payload) != null && m.fold ? [] : o.children.map((y) => ({ source: o, target: y })); | ||
} | ||
), w = this.g.selectAll(b("path")).data(Z, (o) => o.target.state.key), q = w.exit(), D = w.enter().insert("path", "g").attr("class", "markmap-link").attr("data-depth", (o) => o.target.state.depth).attr("data-path", (o) => o.target.state.path), J = D.merge(w); | ||
this.svg.style( | ||
"--markmap-max-width", | ||
l ? `${l}px` : null | ||
), await new Promise(requestAnimationFrame), this._relayout(), this.transition(p).attr("transform", (o) => { | ||
const m = a.x + a.width - o.state.rect.width, y = a.y + a.height / 2 - o.state.rect.height; | ||
return `translate(${m},${y})`; | ||
}).remove(), h.attr( | ||
"transform", | ||
(o) => `translate(${a.x + a.width - o.state.rect.width},${a.y + a.height / 2 - o.state.rect.height})` | ||
), this.transition(u).attr( | ||
"transform", | ||
(o) => `translate(${o.state.rect.x},${o.state.rect.y - o.state.rect.height / 2})` | ||
), this.transition(x).attr("x1", (o) => o.state.rect.width).attr("x2", (o) => o.state.rect.width), f.attr("x1", (o) => o.state.rect.width).attr("x2", (o) => o.state.rect.width), v.attr("y1", (o) => o.state.rect.height).attr("y2", (o) => o.state.rect.height).attr("stroke", (o) => s(o)), this.transition(v).attr("x1", -1).attr("x2", (o) => o.state.rect.width + 2).attr("stroke-width", H), k.attr("cx", (o) => o.state.rect.width).attr("cy", (o) => o.state.rect.height).attr("stroke", (o) => s(o)).attr( | ||
"fill", | ||
(r) => { | ||
var d; | ||
return (d = r.data.payload) != null && d.fold && r.data.children ? c(r.data) : "var(--markmap-circle-open-bg)"; | ||
(o) => { | ||
var m; | ||
return (m = o.payload) != null && m.fold && o.children ? s(o) : "var(--markmap-circle-open-bg)"; | ||
} | ||
); | ||
const rt = E.selectAll( | ||
C("foreignObject") | ||
).data( | ||
(r) => [r], | ||
(r) => r.data.state.key | ||
).join( | ||
(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) { | ||
const X = R.data.state.el.cloneNode(!0); | ||
return this.replaceWith(X), X; | ||
}).attr("xmlns", "http://www.w3.org/1999/xhtml"), d; | ||
}, | ||
(r) => r, | ||
(r) => r.remove() | ||
).attr( | ||
"width", | ||
(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, (r) => r.target.data.state.key).join( | ||
(r) => { | ||
const d = [ | ||
v + f.ySize - n, | ||
k + f.xSize / 2 | ||
]; | ||
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 })); | ||
}, | ||
(r) => r, | ||
(r) => { | ||
const d = [ | ||
f.y + f.ySize - n, | ||
f.x + f.xSize / 2 | ||
]; | ||
return this.transition(r).attr("d", u({ source: d, target: d })).remove(); | ||
} | ||
); | ||
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, | ||
d.x + d.xSize / 2 | ||
], X = [ | ||
S.y, | ||
S.x + S.xSize / 2 | ||
), this.transition(k).attr("r", 6), this.transition(A).style("opacity", 0), F.attr("width", (o) => Math.max(0, o.state.rect.width - n * 2)).attr("height", (o) => o.state.rect.height), this.transition(F).style("opacity", 1); | ||
const S = [ | ||
a.x + a.width, | ||
a.y + a.height / 2 | ||
]; | ||
this.transition(q).attr("d", M({ source: S, target: S })).remove(), D.attr( | ||
"d", | ||
M({ source: S, target: S }) | ||
), this.transition(J).attr("stroke", (o) => s(o.target)).attr("stroke-width", (o) => H(o.target)).attr("d", (o) => { | ||
const m = o.source, y = o.target, Q = [ | ||
m.state.rect.x + m.state.rect.width, | ||
m.state.rect.y + m.state.rect.height / 2 | ||
], tt = [ | ||
y.state.rect.x, | ||
y.state.rect.y + y.state.rect.height / 2 | ||
]; | ||
return u({ source: R, target: X }); | ||
}), p.forEach((r) => { | ||
r.data.state.x0 = r.x, r.data.state.y0 = r.y; | ||
}); | ||
return M({ source: Q, target: tt }); | ||
}), r && this.fit(); | ||
} | ||
@@ -884,17 +707,17 @@ transition(t) { | ||
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, | ||
const n = this.svg.node(), { width: r, height: s } = n.getBoundingClientRect(), { fitRatio: l } = this.options, { x1: c, y1: i, x2: a, y2: d } = this.state.rect, h = a - c, p = d - i, u = Math.min( | ||
r / h * l, | ||
s / p * l, | ||
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(T); | ||
), g = ct.translate( | ||
(r - h * u) / 2 - c * u, | ||
(s - p * u) / 2 - i * u | ||
).scale(u); | ||
return this.transition(this.svg).call(this.zoom.transform, g).end().catch(R); | ||
} | ||
findElement(t) { | ||
let n; | ||
return this.g.selectAll(C("g")).each(function(o) { | ||
o.data === t && (n = { | ||
data: o, | ||
return this.g.selectAll(b("g")).each(function(s) { | ||
s === t && (n = { | ||
data: s, | ||
g: this | ||
@@ -908,12 +731,12 @@ }); | ||
async ensureView(t, n) { | ||
var k; | ||
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] = [ | ||
i.y, | ||
i.y + i.ySize - a + 2 | ||
].map((v) => v * s.k + s.x), [h, u] = [ | ||
i.x - i.xSize / 2, | ||
i.x + i.xSize / 2 | ||
].map((v) => v * s.k + s.y), g = { | ||
var v; | ||
const r = (v = this.findElement(t)) == null ? void 0 : v.data; | ||
if (!r) return; | ||
const s = this.svg.node(), l = s.getBoundingClientRect(), c = j(s), [i, a] = [ | ||
r.state.rect.x, | ||
r.state.rect.x + r.state.rect.width + 2 | ||
].map((k) => k * c.k + c.x), [d, h] = [ | ||
r.state.rect.y - r.state.rect.height / 2, | ||
r.state.rect.y + r.state.rect.height / 2 | ||
].map((k) => k * c.k + c.y), p = { | ||
left: 0, | ||
@@ -924,6 +747,6 @@ right: 0, | ||
...n | ||
}, x = [g.left - l, c.width - g.right - p], m = [g.top - h, c.height - g.bottom - u], y = x[0] * x[1] > 0 ? V(x, Math.abs) / s.k : 0, f = m[0] * m[1] > 0 ? V(m, Math.abs) / s.k : 0; | ||
if (y || f) { | ||
const v = s.translate(y, f); | ||
return this.transition(this.svg).call(this.zoom.transform, v).end().catch(T); | ||
}, u = [p.left - i, l.width - p.right - a], g = [p.top - d, l.height - p.bottom - h], f = u[0] * u[1] > 0 ? L(u, Math.abs) / c.k : 0, x = g[0] * g[1] > 0 ? L(g, Math.abs) / c.k : 0; | ||
if (f || x) { | ||
const k = c.translate(f, x); | ||
return this.transition(this.svg).call(this.zoom.transform, k).end().catch(R); | ||
} | ||
@@ -935,7 +758,7 @@ } | ||
async rescale(t) { | ||
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, | ||
(c - s.y) * (1 - t) / s.k | ||
const n = this.svg.node(), { width: r, height: s } = n.getBoundingClientRect(), l = r / 2, c = s / 2, i = j(n), a = i.translate( | ||
(l - i.x) * (1 - t) / i.k, | ||
(c - i.y) * (1 - t) / i.k | ||
).scale(t); | ||
return this.transition(this.svg).call(this.zoom.transform, l).end().catch(T); | ||
return this.transition(this.svg).call(this.zoom.transform, a).end().catch(R); | ||
} | ||
@@ -947,19 +770,20 @@ destroy() { | ||
} | ||
static create(t, n, i = null) { | ||
const o = new et(t, n); | ||
return i && (o.setData(i), requestAnimationFrame(() => { | ||
o.fit(); | ||
})), o; | ||
static create(t, n, r = null) { | ||
const s = new Y(t, n); | ||
return r && s.setData(r).then(() => { | ||
s.fit(); | ||
}), s; | ||
} | ||
} | ||
export { | ||
et as Markmap, | ||
gt as defaultColorFn, | ||
P as defaultOptions, | ||
Se as deriveOptions, | ||
be as globalCSS, | ||
K as isMacintosh, | ||
Ce as loadCSS, | ||
we as loadJS, | ||
ye as refreshHook | ||
Y as Markmap, | ||
dt as defaultColorFn, | ||
W as defaultOptions, | ||
se as deriveOptions, | ||
oe as globalCSS, | ||
P as isMacintosh, | ||
ce as loadCSS, | ||
he as loadJS, | ||
ne as refreshHook, | ||
pt as simpleHash | ||
}; |
@@ -1,2 +0,1 @@ | ||
import { FlextreeNode } from 'd3-flextree'; | ||
import { INode } from 'markmap-common'; | ||
@@ -6,6 +5,8 @@ export interface IMarkmapState { | ||
data?: INode; | ||
minX: number; | ||
maxX: number; | ||
minY: number; | ||
maxY: number; | ||
rect: { | ||
x1: number; | ||
x2: number; | ||
y1: number; | ||
y2: number; | ||
}; | ||
} | ||
@@ -36,2 +37,2 @@ export type IMarkmapJSONOptions = Partial<{ | ||
} | ||
export type ID3SVGElement = d3.Selection<SVGElement, FlextreeNode<INode>, HTMLElement, FlextreeNode<INode>>; | ||
export type ID3SVGElement = d3.Selection<SVGElement, INode, HTMLElement, INode>; |
import { IMarkmapOptions } from 'markmap-common'; | ||
import { IMarkmapJSONOptions } from './types'; | ||
export declare function deriveOptions(jsonOptions?: IMarkmapJSONOptions): Partial<IMarkmapOptions>; | ||
/** | ||
* Credit: https://gist.github.com/jlevy/c246006675becc446360a798e2b2d781?permalink_comment_id=4738050#gistcomment-4738050 | ||
*/ | ||
export declare function simpleHash(str: string): string; |
import type * as d3 from 'd3'; | ||
import { FlextreeNode } from 'd3-flextree'; | ||
import { Hook, IMarkmapOptions, INode, IPureNode } from 'markmap-common'; | ||
@@ -14,8 +13,7 @@ import { ID3SVGElement, IMarkmapState, IPadding } from './types'; | ||
svg: ID3SVGElement; | ||
styleNode: d3.Selection<HTMLStyleElement, FlextreeNode<INode>, HTMLElement, FlextreeNode<INode>>; | ||
g: d3.Selection<SVGGElement, FlextreeNode<INode>, HTMLElement, FlextreeNode<INode>>; | ||
zoom: d3.ZoomBehavior<SVGElement, FlextreeNode<INode>>; | ||
styleNode: d3.Selection<HTMLStyleElement, INode, HTMLElement, INode>; | ||
g: d3.Selection<SVGGElement, INode, HTMLElement, INode>; | ||
observer: ResizeObserver; | ||
zoom: d3.ZoomBehavior<SVGElement, INode>; | ||
revokers: (() => void)[]; | ||
private imgCache; | ||
private debouncedRefresh; | ||
constructor(svg: string | SVGElement | ID3SVGElement, opts?: Partial<IMarkmapOptions>); | ||
@@ -26,10 +24,9 @@ getStyleContent(): string; | ||
handlePan: (e: WheelEvent) => void; | ||
toggleNode(data: INode, recursive?: boolean): void; | ||
handleClick: (e: MouseEvent, d: FlextreeNode<INode>) => void; | ||
initializeData(node: INode): void; | ||
private _checkImages; | ||
private _loadImage; | ||
toggleNode(data: INode, recursive?: boolean): Promise<void>; | ||
handleClick: (e: MouseEvent, d: INode) => void; | ||
private _initializeData; | ||
private _relayout; | ||
setOptions(opts?: Partial<IMarkmapOptions>): void; | ||
setData(data?: IPureNode | null, opts?: Partial<IMarkmapOptions>): void; | ||
renderData(originData?: INode): void; | ||
setData(data?: IPureNode | null, opts?: Partial<IMarkmapOptions>): Promise<void>; | ||
renderData(originData?: INode): Promise<void>; | ||
transition<T extends d3.BaseType, U, P extends d3.BaseType, Q>(sel: d3.Selection<T, U, P, Q>): d3.Transition<T, U, P, Q>; | ||
@@ -41,3 +38,3 @@ /** | ||
findElement(node: INode): { | ||
data: FlextreeNode<INode>; | ||
data: INode; | ||
g: SVGGElement; | ||
@@ -44,0 +41,0 @@ } | undefined; |
{ | ||
"name": "markmap-view", | ||
"version": "0.17.3-alpha.3+89ad076", | ||
"version": "0.17.3-alpha.4+be55d82", | ||
"description": "View markmaps in browser", | ||
@@ -25,4 +25,4 @@ "author": "Gerald <gera2ld@live.com>", | ||
"build:js": "vite build && TARGET=es vite build", | ||
"build": "run-s clean build:*", | ||
"prepublishOnly": "run-s build" | ||
"build": "pnpm clean && pnpm /^build:/", | ||
"prepublishOnly": "pnpm build" | ||
}, | ||
@@ -50,3 +50,3 @@ "bugs": { | ||
"@types/d3-flextree": "^2.1.1", | ||
"markmap-common": "0.17.3-alpha.3+89ad076" | ||
"markmap-common": "0.17.3-alpha.4+be55d82" | ||
}, | ||
@@ -56,3 +56,3 @@ "peerDependencies": { | ||
}, | ||
"gitHead": "89ad076e313dd4c126aeafc49f052315755e8c0d" | ||
"gitHead": "be55d825cb73aab3d315dc2f4034ebe06a54759b" | ||
} |
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
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
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
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
80354
2274