rob
/
dir-mapview
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
dir-mapview/index.html

63 lines
16 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-overview" data-has-hydrated="false">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Docusaurus v3.9.2">
<title data-rh="true">Directory MapView</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://pages.brrd.tech/rob/dir-mapview/"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="current"><meta data-rh="true" name="docusaurus_tag" content="docs-default-current"><meta data-rh="true" name="docsearch:version" content="current"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-current"><meta data-rh="true" property="og:title" content="Directory MapView"><meta data-rh="true" name="description" content="Map-style directory navigator with zoom and pan - a reimagined file picker dialog."><meta data-rh="true" property="og:description" content="Map-style directory navigator with zoom and pan - a reimagined file picker dialog."><link data-rh="true" rel="icon" href="/rob/dir-mapview/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://pages.brrd.tech/rob/dir-mapview/"><link data-rh="true" rel="alternate" href="https://pages.brrd.tech/rob/dir-mapview/" hreflang="en"><link data-rh="true" rel="alternate" href="https://pages.brrd.tech/rob/dir-mapview/" hreflang="x-default"><script data-rh="true">function insertBanner(){var n=document.createElement("div");n.id="__docusaurus-base-url-issue-banner-container";n.innerHTML='\n<div id="__docusaurus-base-url-issue-banner" style="border: thick solid red; background-color: rgb(255, 230, 179); margin: 20px; padding: 20px; font-size: 20px;">\n <p style="font-weight: bold; font-size: 30px;">Your Docusaurus site did not load properly.</p>\n <p>A very common reason is a wrong site <a href="https://docusaurus.io/docs/docusaurus.config.js/#baseUrl" style="font-weight: bold;">baseUrl configuration</a>.</p>\n <p>Current configured baseUrl = <span style="font-weight: bold; color: red;">/rob/dir-mapview/</span> </p>\n <p>We suggest trying baseUrl = <span id="__docusaurus-base-url-issue-banner-suggestion-container" style="font-weight: bold; color: green;"></span></p>\n</div>\n',document.body.prepend(n);var e=document.getElementById("__docusaurus-base-url-issue-banner-suggestion-container"),s=window.location.pathname,o="/"===s.substr(-1)?s:s+"/";e.innerHTML=o}document.addEventListener("DOMContentLoaded",function(){void 0===window.docusaurus&&insertBanner()})</script><script data-rh="true" type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Directory MapView","item":"https://pages.brrd.tech/rob/dir-mapview/"}]}</script><link rel="stylesheet" href="/rob/dir-mapview/assets/css/styles.6095798e.css">
<script src="/rob/dir-mapview/assets/js/runtime~main.da98d351.js" defer="defer"></script>
<script src="/rob/dir-mapview/assets/js/main.32415e30.js" defer="defer"></script>
</head>
<body class="navigation-with-keyboard">
<svg style="display: none;"><defs>
<symbol id="theme-svg-external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol>
</defs></svg>
<script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="theme-layout-navbar navbar navbar--fixed-top"><div class="navbar__inner"><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/rob/dir-mapview/"><b class="navbar__title text--truncate">Directory MapView</b></a></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><a href="https://gitea.brrd.tech/rob/dir-mapview" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Source Code<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" class="toggleIcon_g3eP systemToggleIcon_QzmC"><path fill="currentColor" d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><aside class="theme-doc-sidebar-container docSidebarContainer_YfHR"><div class="sidebarViewport_aRkj"><div class="sidebar_njMd"><nav aria-label="Docs sidebar" class="menu thin-scrollbar menu_SIkG"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" href="/rob/dir-mapview/"><span title="Directory MapView" class="linkLabel_WmDU">Directory MapView</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/rob/dir-mapview/goals/"><span title="Goals" class="linkLabel_WmDU">Goals</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/rob/dir-mapview/ideas-and-exploration/"><span title="Ideas &amp; Exploration" class="linkLabel_WmDU">Ideas &amp; Exploration</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/rob/dir-mapview/milestones/"><span title="Milestones" class="linkLabel_WmDU">Milestones</span></a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/rob/dir-mapview/todos/"><span title="Dir-MapView TODOs" class="linkLabel_WmDU">Dir-MapView TODOs</span></a></li></ul></nav></div></div></aside><main class="docMainContainer_TBSr"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_Z_bl" aria-label="Breadcrumbs"><ul class="breadcrumbs"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/rob/dir-mapview/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_YNFT"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link">Directory MapView</span></li></ul></nav><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Directory MapView</h1></header>
<p>Map-style directory navigator with zoom and pan - a reimagined file picker dialog.</p>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="vision">Vision<a href="#vision" class="hash-link" aria-label="Direct link to Vision" title="Direct link to Vision" translate="no">​</a></h2>
<p>Traditional file dialogs show directories as indented trees or hierarchical lists. You see your current location and maybe what&#x27;s above you, but you never really see:</p>
<ul>
<li class="">What&#x27;s beside you (sibling directories)</li>
<li class="">The broader context of where you are in the filesystem</li>
<li class="">How your current path relates to other areas</li>
</ul>
<p><strong>Directory MapView</strong> displays the entire filesystem like a road map:</p>
<ul>
<li class="">Directories appear as connected pathways/roads with labels</li>
<li class="">The current path is highlighted like a route</li>
<li class="">A prominent &quot;you are here&quot; marker shows your location</li>
<li class="">Zoom out to see the big picture, zoom in for details</li>
<li class="">Pan around to explore, just like a map application</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="interaction-model">Interaction Model<a href="#interaction-model" class="hash-link" aria-label="Direct link to Interaction Model" title="Direct link to Interaction Model" translate="no">​</a></h2>
<table><thead><tr><th>Action</th><th>Behavior</th></tr></thead><tbody><tr><td>Mouse wheel</td><td>Zoom in/out</td></tr><tr><td>Left-click + drag</td><td>Pan the view</td></tr><tr><td>Click on directory</td><td>Navigate there</td></tr><tr><td>Hover</td><td>Show directory info/preview</td></tr></tbody></table>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="use-cases">Use Cases<a href="#use-cases" class="hash-link" aria-label="Direct link to Use Cases" title="Direct link to Use Cases" translate="no">​</a></h2>
<ol>
<li class=""><strong>File picker dialog</strong> - Replace or augment standard open/save dialogs</li>
<li class=""><strong>Directory overview</strong> - Understand project structure at a glance</li>
<li class=""><strong>Navigation widget</strong> - Embed in file managers or IDEs</li>
<li class=""><strong>Disk usage visualization</strong> - Show directory sizes as road widths</li>
</ol>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="technical-approach">Technical Approach<a href="#technical-approach" class="hash-link" aria-label="Direct link to Technical Approach" title="Direct link to Technical Approach" translate="no">​</a></h2>
<p>Likely implementation:</p>
<ul>
<li class=""><strong>PyQt6/PySide6</strong> for the widget (integrates with existing tools)</li>
<li class=""><strong>QGraphicsScene</strong> for the zoomable/pannable canvas</li>
<li class=""><strong>Graph layout algorithm</strong> for positioning directories (tree layout or force-directed)</li>
<li class="">Lazy loading for large filesystems</li>
<li class="">Caching for performance</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="inspiration">Inspiration<a href="#inspiration" class="hash-link" aria-label="Direct link to Inspiration" title="Direct link to Inspiration" translate="no">​</a></h2>
<ul>
<li class="">Google Maps / OpenStreetMap navigation</li>
<li class="">Code visualization tools (CodeCity, Gource)</li>
<li class="">Treemap visualizations</li>
<li class="">Metro/subway maps</li>
</ul>
<h2 class="anchor anchorTargetStickyNavbar_Vzrq" id="related-projects">Related Projects<a href="#related-projects" class="hash-link" aria-label="Direct link to Related Projects" title="Direct link to Related Projects" translate="no">​</a></h2>
<p>This project is part of the development ecosystem:</p>
<ul>
<li class=""><a class="" href="/rob/artifact-editor/overview/">Artifact Editor</a> - Could embed MapView for navigating to save locations</li>
<li class=""><a class="" href="/rob/cmdforge/overview/">CmdForge</a> - Could use MapView for tool configuration paths</li>
</ul></div></article><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"><a class="pagination-nav__link pagination-nav__link--next" href="/rob/dir-mapview/goals/"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Goals</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#vision" class="table-of-contents__link toc-highlight">Vision</a></li><li><a href="#interaction-model" class="table-of-contents__link toc-highlight">Interaction Model</a></li><li><a href="#use-cases" class="table-of-contents__link toc-highlight">Use Cases</a></li><li><a href="#technical-approach" class="table-of-contents__link toc-highlight">Technical Approach</a></li><li><a href="#inspiration" class="table-of-contents__link toc-highlight">Inspiration</a></li><li><a href="#related-projects" class="table-of-contents__link toc-highlight">Related Projects</a></li></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="theme-layout-footer-column col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/rob/dir-mapview/">Overview</a></li></ul></div><div class="theme-layout-footer-column col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://gitea.brrd.tech/rob/dir-mapview" target="_blank" rel="noopener noreferrer" class="footer__link-item">Gitea<svg width="13.5" height="13.5" aria-label="(opens in new tab)" class="iconExternalLink_nPIU"><use href="#theme-svg-external-link"></use></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Directory MapView Documentation</div></div></div></footer></div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink