sanity-plugin-graph-view 1.0.3 → 3.0.0-studio-v3.0

package/lib/index.modern.js

@@ -0,0 +1,576 @@
+import {jsx as $9Ue0q$jsx, jsxs as $9Ue0q$jsxs} from "react/jsx-runtime";
+import {createPlugin as $9Ue0q$createPlugin, useClient as $9Ue0q$useClient} from "sanity";
+import {route as $9Ue0q$route, useUserColorManager as $9Ue0q$useUserColorManager, useRouter as $9Ue0q$useRouter} from "sanity/_unstable";
+import {useState as $9Ue0q$useState, useCallback as $9Ue0q$useCallback, useEffect as $9Ue0q$useEffect} from "react";
+import {rgba as $9Ue0q$rgba} from "polished";
+import $9Ue0q$deepequal from "deep-equal";
+import {ForceGraph2D as $9Ue0q$ForceGraph2D} from "react-force-graph";
+import {v4 as $9Ue0q$v4} from "uuid";
+import $9Ue0q$beziereasing from "bezier-easing";
+import {useTheme as $9Ue0q$useTheme} from "@sanity/ui";
+import {gray as $9Ue0q$gray, white as $9Ue0q$white, black as $9Ue0q$black, COLOR_HUES as $9Ue0q$COLOR_HUES, hues as $9Ue0q$hues} from "@sanity/color";
+import $9Ue0q$styledcomponents from "styled-components";
+
+
+
+
+
+
+
+
+
+
+
+
+function $a62f31ea2127949a$export$c006713bb64ff575(query, params, options, onUpdate, dependencies) {
+    const client = (0, $9Ue0q$useClient)();
+    (0, $9Ue0q$useEffect)(()=>{
+        const subscription = client.listen(query, params, options).subscribe((update)=>{
+            onUpdate(update);
+        });
+        return ()=>{
+            subscription.unsubscribe();
+        };
+    }, dependencies);
+}
+function $a62f31ea2127949a$export$7b4649445b8cee9f(query, onFetch, dependencies) {
+    const client = (0, $9Ue0q$useClient)();
+    (0, $9Ue0q$useEffect)(()=>{
+        client.fetch(query).then((result)=>{
+            onFetch(result);
+        });
+    }, dependencies);
+}
+
+
+function $4d8ab1e120d1bd2c$export$30043de3fae42dd1(value) {
+    if (value === null) return 0;
+    if (typeof value === "object") return Object.entries(value).reduce((total, [k, v])=>total + $4d8ab1e120d1bd2c$export$30043de3fae42dd1(k) + $4d8ab1e120d1bd2c$export$30043de3fae42dd1(v), 0);
+    if (Array.isArray(value)) return Object.entries(value).reduce((total, v)=>total + $4d8ab1e120d1bd2c$export$30043de3fae42dd1(v), 0);
+    if (typeof value === "string") return value.length;
+    return 1;
+}
+function $4d8ab1e120d1bd2c$export$fe58198efe02b173(url, w, h) {
+    return new Promise((resolve)=>{
+        const img = new Image(w, h);
+        img.onload = ()=>{
+            resolve(img);
+        };
+        img.onerror = (event)=>{
+            // eslint-disable-next-line no-console
+            console.log("Image error", event);
+            resolve(null);
+        };
+        img.src = url;
+    });
+}
+function $4d8ab1e120d1bd2c$export$b035e44d7bb4278f(array, f) {
+    return array.sort((a, b)=>{
+        const va = f(a);
+        const vb = f(b);
+        // eslint-disable-next-line no-nested-ternary
+        return va < vb ? -1 : va > vb ? 1 : 0;
+    });
+}
+function $4d8ab1e120d1bd2c$export$6a506b36fdea397d(s, limit) {
+    if (s.length > limit) return `${s.substring(0, limit)}…`;
+    return s;
+}
+
+
+
+
+
+
+
+const $7d4cc22b56987fa3$export$3865e82159b2890b = (0, $9Ue0q$styledcomponents).div`
+  font-family: ${({ theme: theme  })=>theme.fonts.text.family};
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: ${(0, $9Ue0q$black).hex};
+`;
+const $7d4cc22b56987fa3$export$c4a562231524e009 = (0, $9Ue0q$styledcomponents).div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+`;
+const $7d4cc22b56987fa3$export$c33c2949cc668daf = (0, $9Ue0q$styledcomponents).div`
+  font-family: ${({ theme: theme  })=>theme.fonts.text.family};
+  display: none;
+  position: absolute;
+  bottom: ${({ theme: theme  })=>theme.space[0]}px;
+  left: 50%;
+  transform: translate3d(-50%, 0, 0);
+  background: var(--component-bg);
+  border-radius: ${({ theme: theme  })=>theme.radius[2]}px;
+  padding: ${({ theme: theme  })=>theme.space[2]}px;
+  z-index: 1000;
+
+  &:empty {
+    display: none;
+  }
+`;
+const $7d4cc22b56987fa3$export$ed247974535929c7 = (0, $9Ue0q$styledcomponents).div`
+  color: #ccc;
+  position: absolute;
+  top: ${({ theme: theme  })=>theme.space[4]}px;
+  left: ${({ theme: theme  })=>theme.space[4]}px;
+
+  & > div {
+    margin: 5px 0;
+  }
+`;
+const $7d4cc22b56987fa3$export$3953a5b2d12dbab1 = (0, $9Ue0q$styledcomponents).div`
+  display: flex;
+`;
+const $7d4cc22b56987fa3$export$f6aea9731eb36ee8 = (0, $9Ue0q$styledcomponents).div`
+  width: 1.25em;
+  height: 1.25em;
+  background: currentColor;
+  border-radius: 50%;
+  margin-right: ${({ theme: theme  })=>theme.space[2]}px;
+`;
+
+
+
+
+const $40c15bf381c43ff0$var$DEFAULT_QUERY = `
+  *[
+    !(_id in path("_.*")) &&
+    !(_type match "system.*") &&
+    !(_type match "sanity.*")
+  ]
+`;
+const $40c15bf381c43ff0$var$fadeEasing = (0, $9Ue0q$beziereasing)(0, 0.9, 1, 1);
+const $40c15bf381c43ff0$var$softEasing = (0, $9Ue0q$beziereasing)(0.25, 0.1, 0.0, 1.0);
+const $40c15bf381c43ff0$var$idleTimeout = 10000;
+const $40c15bf381c43ff0$var$imageSize = 40;
+function $40c15bf381c43ff0$var$getTopDocTypes(counts) {
+    return (0, $4d8ab1e120d1bd2c$export$b035e44d7bb4278f)(Object.keys(counts), (docType)=>counts[docType] || 0).reverse().slice(0, 10);
+}
+function $40c15bf381c43ff0$var$formatDocType(docType) {
+    return (docType.substring(0, 1).toUpperCase() + docType.substring(1)).replace(/\./g, " ").replace(/[A-Z]/g, " $&").trim();
+}
+function $40c15bf381c43ff0$var$getDocTypeCounts(docs) {
+    const types = {};
+    for (const doc of docs)types[doc._type] = (types[doc._type] || 0) + 1;
+    return types;
+}
+function $40c15bf381c43ff0$var$labelFor(doc) {
+    return `${doc.title || doc.name || doc._id}`.trim();
+}
+function $40c15bf381c43ff0$var$valueFor(doc, maxSize) {
+    return 5 + 100 * ((0, $4d8ab1e120d1bd2c$export$30043de3fae42dd1)(doc) / maxSize);
+}
+function $40c15bf381c43ff0$var$findRefs(obj, dest = []) {
+    if (obj !== null) {
+        if (typeof obj === "object") for (const [k, v] of Object.entries(obj)){
+            if (k === "_ref" && typeof v === "string" && v.length > 0) dest.push($40c15bf381c43ff0$var$stripDraftId(v));
+            $40c15bf381c43ff0$var$findRefs(v, dest);
+        }
+        else if (Array.isArray(obj)) for (const v1 of obj)$40c15bf381c43ff0$var$findRefs(v1, dest);
+    }
+    return dest;
+}
+function $40c15bf381c43ff0$var$stripDraftId(id) {
+    return id.replace(/^drafts\./, "");
+}
+function $40c15bf381c43ff0$var$deduplicateDrafts(docs) {
+    const deduped = {};
+    for (const doc of docs)if (!/^drafts\./.test(doc._id)) deduped[doc._id] = doc;
+    for (const doc1 of docs)if (/^drafts\./.test(doc1._id)) {
+        const id = $40c15bf381c43ff0$var$stripDraftId(doc1._id);
+        deduped[id] = Object.assign(doc1, {
+            _id: id
+        });
+    }
+    return Object.values(deduped);
+}
+class $40c15bf381c43ff0$var$Users {
+    _users = [];
+    async getById(id, client) {
+        let user = this._users.find((u)=>u._id === id);
+        if (!user) {
+            user = await client.users.getById(id);
+            this._users.push(user);
+            user.image = await (0, $4d8ab1e120d1bd2c$export$fe58198efe02b173)(user.imageUrl || "https://raw.githubusercontent.com/sanity-io/sanity-plugin-graph-view/main/assets/head-silhouette.jpg", $40c15bf381c43ff0$var$imageSize, $40c15bf381c43ff0$var$imageSize);
+        }
+        return user;
+    }
+}
+class $40c15bf381c43ff0$var$Session {
+    id = null;
+    user = null;
+    doc = null;
+    lastActive = 0;
+    startTime = 0;
+    angle = 0;
+}
+class $40c15bf381c43ff0$var$GraphData {
+    sessions = [];
+    constructor(docs = []){
+        const docsById = {};
+        for (const doc2 of docs)docsById[doc2._id] = doc2;
+        this.data = {
+            nodes: docs.map((d)=>Object.assign({
+                    id: d._id,
+                    type: "document",
+                    doc: d
+                })),
+            links: docs.flatMap((doc)=>$40c15bf381c43ff0$var$findRefs(doc).map((ref)=>({
+                        source: doc._id,
+                        target: ref
+                    }))).filter((link)=>docsById[link.source] && docsById[link.target])
+        };
+    }
+    setSession(user, docNode) {
+        let session = this.sessions.find((s)=>s.user.id === user.id && s.doc?._id === docNode.doc._id);
+        if (!session) {
+            session = new $40c15bf381c43ff0$var$Session();
+            session.id = (0, $9Ue0q$v4)();
+            session.user = user;
+            session.startTime = Date.now();
+            session.doc = docNode.doc;
+            session.angle = Math.random() * 2 * Math.PI;
+            this.sessions.push(session);
+        }
+        session.lastActive = Date.now();
+    }
+    reapSessions() {
+        for(let i = 0; i < this.sessions.length; i++){
+            const session = this.sessions[i];
+            if (Date.now() - session.lastActive > $40c15bf381c43ff0$var$idleTimeout) {
+                this.sessions = [
+                    ...this.sessions.slice(0, i),
+                    ...this.sessions.slice(i + 1)
+                ];
+                i--;
+            }
+        }
+    }
+    clone() {
+        const copy = new $40c15bf381c43ff0$var$GraphData();
+        Object.assign(copy, this);
+        copy.data = {
+            nodes: [
+                ...this.data.nodes
+            ],
+            links: [
+                ...this.data.links
+            ]
+        };
+        return copy;
+    }
+}
+const $40c15bf381c43ff0$var$users = new $40c15bf381c43ff0$var$Users();
+function $40c15bf381c43ff0$export$6a7fe3ef90e8d566(props) {
+    const query = props.query || $40c15bf381c43ff0$var$DEFAULT_QUERY;
+    const userColorManager = (0, $9Ue0q$useUserColorManager)();
+    const [maxSize, setMaxSize] = (0, $9Ue0q$useState)(0);
+    const [hoverNode, setHoverNode] = (0, $9Ue0q$useState)(null);
+    const [documents, setDocuments] = (0, $9Ue0q$useState)([]);
+    const [docTypes, setDocTypes] = (0, $9Ue0q$useState)({});
+    const [graph, setGraph] = (0, $9Ue0q$useState)(()=>new $40c15bf381c43ff0$var$GraphData());
+    const router = (0, $9Ue0q$useRouter)();
+    const client = (0, $9Ue0q$useClient)();
+    const fetchCallback = (0, $9Ue0q$useCallback)((_docs)=>{
+        const docs = $40c15bf381c43ff0$var$deduplicateDrafts(_docs);
+        setMaxSize(Math.max(...docs.map((0, $4d8ab1e120d1bd2c$export$30043de3fae42dd1))));
+        setDocuments(docs);
+        setDocTypes($40c15bf381c43ff0$var$getDocTypeCounts(docs));
+        setGraph(new $40c15bf381c43ff0$var$GraphData(docs));
+    }, []);
+    const listenCallback = (0, $9Ue0q$useCallback)(async (update)=>{
+        const doc = update.result;
+        if (doc) {
+            doc._id = $40c15bf381c43ff0$var$stripDraftId(doc._id);
+            const docsById = {};
+            for (const d1 of documents)docsById[d1._id] = d1;
+            let oldDoc;
+            const docs = [
+                ...documents
+            ];
+            const idx = documents.findIndex((d)=>d._id === doc._id);
+            if (idx >= 0) {
+                oldDoc = docs[idx];
+                docs[idx] = doc;
+            } else docs.push(doc);
+            setDocuments(docs);
+            setDocTypes($40c15bf381c43ff0$var$getDocTypeCounts(docs));
+            setMaxSize(Math.max(...docs.map((0, $4d8ab1e120d1bd2c$export$30043de3fae42dd1))));
+            const newGraph = graph.clone();
+            const oldRefs = $40c15bf381c43ff0$var$findRefs(oldDoc || {}).filter((id)=>id === doc._id || docsById[id] !== null);
+            const newRefs = $40c15bf381c43ff0$var$findRefs(doc).filter((id)=>id === doc._id || docsById[id] !== null);
+            let graphChanged = !(0, $9Ue0q$deepequal)(oldRefs, newRefs);
+            if (graphChanged) newGraph.data.links = newGraph.data.links.filter((l)=>l.source.id !== doc._id).concat(newRefs.map((ref)=>({
+                    source: doc._id,
+                    target: ref
+                })));
+            let docNode;
+            const nodeIdx = graph.data.nodes.findIndex((n)=>n.doc && n.doc._id === doc._id);
+            if (nodeIdx >= 0) {
+                docNode = graph.data.nodes[nodeIdx];
+                docNode.doc = doc;
+            } else {
+                docNode = {
+                    id: doc._id,
+                    type: "document",
+                    doc: doc
+                };
+                newGraph.data.nodes.push(docNode);
+                graphChanged = true;
+            }
+            if (graphChanged) setGraph(newGraph);
+            const user = await $40c15bf381c43ff0$var$users.getById(update.identity, client);
+            graph.setSession(user, docNode);
+        } else if (update.transition === "disappear") {
+            const docId = $40c15bf381c43ff0$var$stripDraftId(update.documentId);
+            const docs = documents.filter((d)=>d._id !== docId);
+            setDocuments(docs);
+            setDocTypes($40c15bf381c43ff0$var$getDocTypeCounts(docs));
+            setMaxSize(Math.max(...docs.map((0, $4d8ab1e120d1bd2c$export$30043de3fae42dd1))));
+            const newGraph = graph.clone();
+            newGraph.data.links = newGraph.data.links.filter((l)=>l.source.id !== docId && l.target.id !== docId);
+            newGraph.data.nodes = newGraph.data.nodes.filter((n)=>n.id !== docId);
+            setGraph(newGraph);
+        }
+    }, [
+        documents,
+        graph,
+        client
+    ]);
+    (0, $a62f31ea2127949a$export$7b4649445b8cee9f)(query, fetchCallback, []);
+    (0, $a62f31ea2127949a$export$c006713bb64ff575)(query, {}, {}, listenCallback, [
+        documents,
+        graph
+    ]);
+    (0, $9Ue0q$useEffect)(()=>{
+        const interval = setInterval(()=>graph.reapSessions(), 1000);
+        return ()=>clearInterval(interval);
+    }, [
+        graph
+    ]);
+    const theme = (0, $9Ue0q$useTheme)().sanity;
+    return /*#__PURE__*/ (0, $9Ue0q$jsx)((0, $7d4cc22b56987fa3$export$c4a562231524e009), {
+        theme: theme,
+        children: /*#__PURE__*/ (0, $9Ue0q$jsxs)((0, $7d4cc22b56987fa3$export$3865e82159b2890b), {
+            theme: theme,
+            children: [
+                /*#__PURE__*/ (0, $9Ue0q$jsx)((0, $7d4cc22b56987fa3$export$ed247974535929c7), {
+                    theme: theme,
+                    children: $40c15bf381c43ff0$var$getTopDocTypes(docTypes).map((docType)=>/*#__PURE__*/ (0, $9Ue0q$jsxs)((0, $7d4cc22b56987fa3$export$3953a5b2d12dbab1), {
+                            className: "legend__row",
+                            style: {
+                                color: $40c15bf381c43ff0$var$getDocTypeColor(docType).fill
+                            },
+                            children: [
+                                /*#__PURE__*/ (0, $9Ue0q$jsx)((0, $7d4cc22b56987fa3$export$f6aea9731eb36ee8), {
+                                    theme: theme
+                                }),
+                                /*#__PURE__*/ (0, $9Ue0q$jsx)("div", {
+                                    children: $40c15bf381c43ff0$var$formatDocType(docType)
+                                })
+                            ]
+                        }, docType))
+                }),
+                hoverNode && /*#__PURE__*/ (0, $9Ue0q$jsx)((0, $7d4cc22b56987fa3$export$c33c2949cc668daf), {
+                    theme: theme,
+                    children: $40c15bf381c43ff0$var$labelFor(hoverNode.doc)
+                }),
+                /*#__PURE__*/ (0, $9Ue0q$jsx)((0, $9Ue0q$ForceGraph2D), {
+                    graphData: graph.data,
+                    nodeAutoColorBy: "group",
+                    enableNodeDrag: false,
+                    onNodeHover: (node)=>setHoverNode(node),
+                    onNodeClick: (node)=>{
+                        router.navigateIntent("edit", {
+                            id: node.doc._id,
+                            documentType: node.doc._type
+                        });
+                    },
+                    linkColor: ()=>(0, $9Ue0q$rgba)((0, $9Ue0q$gray)[500].hex, 0.25),
+                    nodeLabel: ()=>"",
+                    nodeRelSize: 1,
+                    nodeVal: (node)=>$40c15bf381c43ff0$var$valueFor(node.doc, maxSize),
+                    onRenderFramePost: (ctx, globalScale)=>{
+                        for (const session of graph.sessions){
+                            const node = graph.data.nodes.find((n)=>n.doc && n.doc._id === session?.doc?._id);
+                            if (node) {
+                                const idleFactorRange = $40c15bf381c43ff0$var$idleTimeout;
+                                const angle = session.angle;
+                                const radius = Math.sqrt($40c15bf381c43ff0$var$valueFor(node.doc, maxSize));
+                                const image = session.user.image;
+                                const userColor = userColorManager.get(session.user.displayName).tints[400].hex;
+                                const distance = radius * globalScale + 40;
+                                const imgW = image ? image.width : 0;
+                                const imgH = image ? image.height : 0;
+                                const x = node.x + Math.sin(angle) * distance / globalScale;
+                                const y = node.y + Math.cos(angle) * distance / globalScale;
+                                ctx.save();
+                                try {
+                                    ctx.globalAlpha = $40c15bf381c43ff0$var$fadeEasing(1 - Math.min(idleFactorRange, Date.now() - session.lastActive) / idleFactorRange);
+                                    ctx.font = `bold ${Math.round(12 / globalScale)}px sans-serif`;
+                                    ctx.beginPath();
+                                    ctx.strokeStyle = (0, $9Ue0q$rgba)((0, $9Ue0q$white).hex, 1.0);
+                                    ctx.lineWidth = 2 / globalScale;
+                                    ctx.moveTo(node.x + Math.sin(angle) * (distance - imgW / 2) / globalScale, node.y + Math.cos(angle) * (distance - imgH / 2) / globalScale);
+                                    ctx.lineTo(node.x + Math.sin(angle) * radius, node.y + Math.cos(angle) * radius);
+                                    ctx.stroke();
+                                    ctx.beginPath();
+                                    ctx.strokeStyle = (0, $9Ue0q$rgba)((0, $9Ue0q$white).hex, 1.0);
+                                    ctx.lineWidth = 2 / globalScale;
+                                    ctx.arc(node.x, node.y, radius, 0, 2 * Math.PI, false);
+                                    ctx.stroke();
+                                    if (image) {
+                                        ctx.save();
+                                        // eslint-disable-next-line max-depth
+                                        try {
+                                            const dur = 700;
+                                            const f = $40c15bf381c43ff0$var$softEasing(Math.max(0, (dur - (Date.now() - session.startTime)) / dur));
+                                            // eslint-disable-next-line max-depth
+                                            if (f > 0) {
+                                                ctx.beginPath();
+                                                ctx.fillStyle = (0, $9Ue0q$rgba)(userColor, f);
+                                                ctx.arc(x, y, (imgW / 2 + 10) / globalScale, 0, 2 * Math.PI, false);
+                                                ctx.fill();
+                                            }
+                                            ctx.beginPath();
+                                            ctx.fillStyle = (0, $9Ue0q$rgba)((0, $9Ue0q$white).hex, 1.0);
+                                            ctx.arc(x, y, imgW / globalScale / 2, 0, 2 * Math.PI, false);
+                                            ctx.clip();
+                                            ctx.drawImage(image, x - imgW / globalScale / 2, y - imgH / globalScale / 2, imgW / globalScale, imgH / globalScale);
+                                            ctx.strokeStyle = (0, $9Ue0q$black).hex;
+                                            ctx.lineWidth = 6 / globalScale;
+                                            ctx.stroke();
+                                            ctx.strokeStyle = userColor;
+                                            ctx.lineWidth = 4 / globalScale;
+                                            ctx.stroke();
+                                        } finally{
+                                            ctx.restore();
+                                        }
+                                    }
+                                    ctx.beginPath();
+                                    ctx.strokeStyle = (0, $9Ue0q$rgba)((0, $9Ue0q$black).hex, 1);
+                                    ctx.lineWidth = 0.5 / globalScale;
+                                    ctx.arc(x, y, imgW / globalScale / 2, 0, 2 * Math.PI, false);
+                                    ctx.stroke();
+                                    const above = angle >= Math.PI / 2 && angle < Math.PI * 1.5;
+                                    const textY = above ? y - (imgH / 2 + 5) / globalScale : y + (imgH / 2 + 5) / globalScale;
+                                    ctx.fillStyle = (0, $9Ue0q$rgba)((0, $9Ue0q$white).hex, 1.0);
+                                    ctx.textAlign = "center";
+                                    ctx.textBaseline = above ? "bottom" : "top";
+                                    ctx.fillText(session.user.displayName, x, textY);
+                                } finally{
+                                    ctx.restore();
+                                }
+                            }
+                        }
+                    },
+                    nodeCanvasObject: (node, ctx, globalScale)=>{
+                        // eslint-disable-next-line default-case
+                        switch(node.type){
+                            case "document":
+                                {
+                                    const nodeColor = $40c15bf381c43ff0$var$getDocTypeColor(node.doc._type);
+                                    const radius = Math.sqrt($40c15bf381c43ff0$var$valueFor(node.doc, maxSize));
+                                    const fontSize = Math.min(100, 10.0 / globalScale);
+                                    ctx.beginPath();
+                                    ctx.fillStyle = hoverNode !== null && node.doc._id === hoverNode.doc._id ? (0, $9Ue0q$rgba)((0, $9Ue0q$gray)[500].hex, 0.8) : nodeColor.fill;
+                                    ctx.strokeStyle = nodeColor.border;
+                                    ctx.lineWidth = 0.5;
+                                    ctx.arc(node.x, node.y, radius, 0, 2 * Math.PI, false);
+                                    ctx.stroke();
+                                    ctx.fill();
+                                    if (radius * globalScale > 10) {
+                                        ctx.font = `${fontSize}px sans-serif`;
+                                        const w = radius * 2 + 30 / globalScale;
+                                        for(let len = 50; len >= 5; len /= 1.2){
+                                            const label = (0, $4d8ab1e120d1bd2c$export$6a506b36fdea397d)($40c15bf381c43ff0$var$labelFor(node.doc), Math.round(len));
+                                            const textMetrics = ctx.measureText(label);
+                                            if (textMetrics.width < w) {
+                                                // ctx.fillStyle = rgba(color.white.hex, 1.0)
+                                                ctx.textAlign = "center";
+                                                ctx.textBaseline = "top";
+                                                ctx.strokeStyle = (0, $9Ue0q$rgba)((0, $9Ue0q$black).hex, 0.5);
+                                                ctx.lineWidth = 2 / globalScale;
+                                                ctx.strokeText(label, node.x, node.y + radius + 5 / globalScale);
+                                                ctx.fillText(label, node.x, node.y + radius + 5 / globalScale);
+                                                break;
+                                            }
+                                        }
+                                    }
+                                }
+                        }
+                    },
+                    linkCanvasObject: (link, ctx, globalScale)=>{
+                        ctx.beginPath();
+                        ctx.strokeStyle = (0, $9Ue0q$rgba)((0, $9Ue0q$gray)[500].hex, 0.125);
+                        ctx.lineWidth = 2 / globalScale;
+                        ctx.moveTo(link.source.x, link.source.y);
+                        ctx.lineTo(link.target.x, link.target.y);
+                        ctx.stroke();
+                    }
+                })
+            ]
+        })
+    });
+}
+const $40c15bf381c43ff0$var$colorCache = {};
+let $40c15bf381c43ff0$var$typeColorNum = 0;
+function $40c15bf381c43ff0$var$getDocTypeColor(docType) {
+    if ($40c15bf381c43ff0$var$colorCache[docType]) return $40c15bf381c43ff0$var$colorCache[docType];
+    const hue = (0, $9Ue0q$COLOR_HUES)[$40c15bf381c43ff0$var$typeColorNum % (0, $9Ue0q$COLOR_HUES).length];
+    $40c15bf381c43ff0$var$typeColorNum += 1;
+    $40c15bf381c43ff0$var$colorCache[docType] = {
+        fill: (0, $9Ue0q$hues)[hue][400].hex,
+        border: (0, $9Ue0q$rgba)((0, $9Ue0q$black).hex, 0.5)
+    };
+    return $40c15bf381c43ff0$var$colorCache[docType];
+}
+
+
+
+
+const $c82d90e983fc06b4$export$401cc1e36cc18bf0 = ()=>/*#__PURE__*/ (0, $9Ue0q$jsx)("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "1em",
+        height: "1em",
+        viewBox: "0 0 46.063 46.063",
+        children: /*#__PURE__*/ (0, $9Ue0q$jsx)("path", {
+            fill: "currentColor",
+            d: "M18.022 38.676v2.813h-1.21q-4.864 0-6.525-1.447-1.64-1.445-1.64-5.762v-4.666q0-2.95-1.055-4.083-1.055-1.13-3.828-1.13h-1.19v-2.794h1.19q2.793 0 3.828-1.114 1.055-1.132 1.055-4.043V11.76q0-4.316 1.64-5.742 1.66-1.446 6.524-1.446h1.212v2.793h-1.328q-2.754 0-3.594.86-.84.86-.84 3.613v4.844q0 3.066-.898 4.453-.88 1.387-3.028 1.875 2.168.527 3.047 1.914.88 1.387.88 4.434v4.843q0 2.754.84 3.614.84.86 3.594.86h1.328zM28.04 38.676h1.368q2.735 0 3.555-.84.84-.84.84-3.633V29.36q0-3.047.88-4.434.878-1.387 3.046-1.914-2.17-.488-3.048-1.875-.88-1.387-.88-4.453V11.84q0-2.773-.84-3.613-.82-.86-3.554-.86H28.04V4.574h1.232q4.863 0 6.484 1.446 1.64 1.426 1.64 5.742v4.687q0 2.91 1.055 4.042 1.056 1.114 3.83 1.114h1.21V24.4h-1.21q-2.774 0-3.83 1.13-1.053 1.134-1.053 4.084v4.667q0 4.318-1.64 5.763-1.622 1.446-6.485 1.446h-1.23v-2.814z"
+        })
+    });
+
+
+
+
+
+const $090815f5086f7f29$export$e3438defddc96622 = (0, $9Ue0q$createPlugin)((config = {})=>{
+    return {
+        name: "@sanity/content-graph-view",
+        tools: (prev)=>{
+            return [
+                ...prev,
+                {
+                    name: "graph-your-content",
+                    title: "Graph",
+                    icon: (0, $c82d90e983fc06b4$export$401cc1e36cc18bf0),
+                    component: function component() {
+                        return /*#__PURE__*/ (0, $9Ue0q$jsx)((0, $40c15bf381c43ff0$export$6a7fe3ef90e8d566), {
+                            ...config
+                        });
+                    },
+                    router: (0, $9Ue0q$route).create("/:selectedDocumentId")
+                }, 
+            ];
+        }
+    };
+});
+
+
+export {$090815f5086f7f29$export$e3438defddc96622 as contentGraphView};
+//# sourceMappingURL=index.modern.js.map