mirror of
https://github.com/cosmicoptima/loom.git
synced 2026-07-22 07:40:25 +00:00
The Rewrite
This commit is contained in:
celeste
parent
98e9b03c7a
commit
618b563949
7 changed files with 1241 additions and 1569 deletions
45
common.ts
Normal file
45
common.ts
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
export const PROVIDERS = ["cohere", "textsynth", "ocp", "openai", "openai-chat", "azure", "azure-chat"];
|
||||||
|
export type Provider = (typeof PROVIDERS)[number];
|
||||||
|
|
||||||
|
export interface LoomSettings {
|
||||||
|
openaiApiKey: string;
|
||||||
|
openaiOrganization: string;
|
||||||
|
|
||||||
|
cohereApiKey: string;
|
||||||
|
textsynthApiKey: string;
|
||||||
|
|
||||||
|
azureApiKey: string;
|
||||||
|
azureEndpoint: string;
|
||||||
|
|
||||||
|
ocpApiKey: string;
|
||||||
|
ocpUrl: string;
|
||||||
|
|
||||||
|
provider: Provider;
|
||||||
|
model: string;
|
||||||
|
maxTokens: number;
|
||||||
|
temperature: number;
|
||||||
|
topP: number;
|
||||||
|
frequencyPenalty: number;
|
||||||
|
presencePenalty: number;
|
||||||
|
n: number;
|
||||||
|
|
||||||
|
showSettings: boolean;
|
||||||
|
showNodeBorders: boolean;
|
||||||
|
showExport: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Node {
|
||||||
|
text: string;
|
||||||
|
parentId: string | null;
|
||||||
|
collapsed: boolean;
|
||||||
|
unread: boolean;
|
||||||
|
bookmarked: boolean;
|
||||||
|
lastVisited?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface NoteState {
|
||||||
|
current: string;
|
||||||
|
hoisted: string[];
|
||||||
|
nodes: Record<string, Node>;
|
||||||
|
generating: string | null;
|
||||||
|
}
|
||||||
29
package-lock.json
generated
29
package-lock.json
generated
|
|
@ -1,12 +1,12 @@
|
||||||
{
|
{
|
||||||
"name": "obsidian-loom",
|
"name": "obsidian-loom",
|
||||||
"version": "1.10.2",
|
"version": "1.12.2",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "obsidian-loom",
|
"name": "obsidian-loom",
|
||||||
"version": "1.10.2",
|
"version": "1.12.2",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@codemirror/state": "^6.2.0",
|
"@codemirror/state": "^6.2.0",
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
"@types/lodash": "^4.14.191",
|
"@types/lodash": "^4.14.191",
|
||||||
"azure-openai": "^0.9.4",
|
"azure-openai": "^0.9.4",
|
||||||
"cohere-ai": "^6.1.0",
|
"cohere-ai": "^6.1.0",
|
||||||
"gpt3-tokenizer": "^1.1.5",
|
"gpt-tokenizer": "^2.1.1",
|
||||||
"openai": "^3.2.0",
|
"openai": "^3.2.0",
|
||||||
"untildify": "^4.0.0",
|
"untildify": "^4.0.0",
|
||||||
"uuid": "^9.0.0"
|
"uuid": "^9.0.0"
|
||||||
|
|
@ -471,11 +471,6 @@
|
||||||
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
|
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/array-keyed-map": {
|
|
||||||
"version": "2.1.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/array-keyed-map/-/array-keyed-map-2.1.3.tgz",
|
|
||||||
"integrity": "sha512-JIUwuFakO+jHjxyp4YgSiKXSZeC0U+R1jR94bXWBcVlFRBycqXlb+kH9JHxBGcxnVuSqx5bnn0Qz9xtSeKOjiA=="
|
|
||||||
},
|
|
||||||
"node_modules/array-union": {
|
"node_modules/array-union": {
|
||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
|
||||||
|
|
@ -1154,15 +1149,12 @@
|
||||||
"url": "https://github.com/sponsors/sindresorhus"
|
"url": "https://github.com/sponsors/sindresorhus"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/gpt3-tokenizer": {
|
"node_modules/gpt-tokenizer": {
|
||||||
"version": "1.1.5",
|
"version": "2.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/gpt3-tokenizer/-/gpt3-tokenizer-1.1.5.tgz",
|
"resolved": "https://registry.npmjs.org/gpt-tokenizer/-/gpt-tokenizer-2.1.1.tgz",
|
||||||
"integrity": "sha512-O9iCL8MqGR0Oe9wTh0YftzIbysypNQmS5a5JG3cB3M4LMYjlAVvNnf8LUzVY9MrI7tj+YLY356uHtO2lLX2HpA==",
|
"integrity": "sha512-WlX+vj6aPaZ71U6Bf18fem+5k58zlgh2a4nbc7KHy6aGVIyq3nCh709b/8momu34sV/5t/SpzWi8LayWD9uyDw==",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"array-keyed-map": "^2.1.3"
|
"rfc4648": "^1.5.2"
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=12"
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/grapheme-splitter": {
|
"node_modules/grapheme-splitter": {
|
||||||
|
|
@ -1643,6 +1635,11 @@
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/rfc4648": {
|
||||||
|
"version": "1.5.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/rfc4648/-/rfc4648-1.5.2.tgz",
|
||||||
|
"integrity": "sha512-tLOizhR6YGovrEBLatX1sdcuhoSCXddw3mqNVAcKxGJ+J0hFeJ+SjeWCv5UPA/WU3YzWPPuCVYgXBKZUPGpKtg=="
|
||||||
|
},
|
||||||
"node_modules/rimraf": {
|
"node_modules/rimraf": {
|
||||||
"version": "3.0.2",
|
"version": "3.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
|
||||||
|
|
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
"@types/lodash": "^4.14.191",
|
"@types/lodash": "^4.14.191",
|
||||||
"azure-openai": "^0.9.4",
|
"azure-openai": "^0.9.4",
|
||||||
"cohere-ai": "^6.1.0",
|
"cohere-ai": "^6.1.0",
|
||||||
"gpt3-tokenizer": "^1.1.5",
|
"gpt-tokenizer": "^2.1.1",
|
||||||
"openai": "^3.2.0",
|
"openai": "^3.2.0",
|
||||||
"untildify": "^4.0.0",
|
"untildify": "^4.0.0",
|
||||||
"uuid": "^9.0.0"
|
"uuid": "^9.0.0"
|
||||||
|
|
|
||||||
340
styles.css
340
styles.css
|
|
@ -36,69 +36,137 @@ body {
|
||||||
--ancestor-editor-background: #111;
|
--ancestor-editor-background: #111;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loom {
|
/* all views */
|
||||||
|
|
||||||
|
.loom__view {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loom-buttons {
|
/* nav buttons */
|
||||||
|
|
||||||
|
.loom__nav-buttons {
|
||||||
margin-top: 0.5em;
|
margin-top: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loom-zport {
|
/* alt export field */
|
||||||
|
|
||||||
|
.loom__alt-export-field {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 0.5em;
|
margin-bottom: 0.8em;
|
||||||
}
|
}
|
||||||
|
.loom__alt-export-field input {
|
||||||
.loom-zport input {
|
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
.loom__alt-export-field button {
|
||||||
.loom-zport button {
|
|
||||||
margin-left: 0.5em;
|
margin-left: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loom-vspacer {
|
/* settings */
|
||||||
padding-top: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-settings {
|
.loom__settings {
|
||||||
margin-bottom: 0.3em;
|
margin-bottom: 0.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden {
|
.loom__setting {
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-setting {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
.loom__setting label {
|
||||||
.loom-setting label {
|
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
margin-bottom: 0.3em;
|
margin-bottom: 0.3em;
|
||||||
}
|
}
|
||||||
|
.loom__setting input {
|
||||||
.loom-setting input {
|
margin-bottom: 0.6em;
|
||||||
|
}
|
||||||
|
.loom__setting select {
|
||||||
margin-bottom: 0.6em;
|
margin-bottom: 0.6em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loom-setting select {
|
/* all tree headers */
|
||||||
margin-bottom: 0.6em;
|
|
||||||
|
.loom__tree-header {
|
||||||
|
padding: 0.35em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loom-collapse {
|
.loom__tree-header-text {
|
||||||
|
color: var(--text-normal);
|
||||||
|
font-weight: var(--font-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* bookmarks header */
|
||||||
|
|
||||||
|
.loom__bookmarks {
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loom__bookmarks-count {
|
||||||
|
color: var(--text-faint);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* nodes */
|
||||||
|
|
||||||
|
.loom__node {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.loom__node.is-active {
|
||||||
|
background-color: var(--nav-item-background-active);
|
||||||
|
}
|
||||||
|
|
||||||
|
.loom__collapse-button {
|
||||||
margin-left: 0.6em;
|
margin-left: 0.6em;
|
||||||
}
|
}
|
||||||
|
.loom__collapse-button.loom__is-collapsed {
|
||||||
.loom-collapse.is-collapsed {
|
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.loom-node-footer {
|
.loom__node-bookmark-icon {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 0.3em;
|
||||||
|
margin-right: -0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loom__node-unread {
|
||||||
|
font-weight: bold !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loom__node-unread-indicator {
|
||||||
|
width: 0.3em;
|
||||||
|
height: 0.3em;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--nav-item-color);
|
||||||
|
margin-left: 0.6em;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loom__node-text {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
padding: 0.35em 0 0.35em 0.6em;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loom__node-buttons {
|
||||||
|
display: none;
|
||||||
|
padding-right: 0.5em;
|
||||||
|
}
|
||||||
|
.loom__node:hover .loom__node-buttons {
|
||||||
|
display: inline-flex !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loom__node-button {
|
||||||
|
display: inline-flex !important;
|
||||||
|
margin-left: 0.1em;
|
||||||
|
--icon-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loom__node-footer {
|
||||||
color: var(--text-faint);
|
color: var(--text-faint);
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
margin-left: calc(0.85em + 1px);
|
margin-left: calc(0.85em + 1px);
|
||||||
|
|
@ -112,135 +180,10 @@ body {
|
||||||
border-left: 1px solid var(--color-base-35);
|
border-left: 1px solid var(--color-base-35);
|
||||||
}
|
}
|
||||||
|
|
||||||
.loom-hoist-button:hover {
|
.loom__node-footer-text {
|
||||||
color: var(--text-normal);
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-node-footer-text {
|
|
||||||
margin-left: 0.35em;
|
margin-left: 0.35em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.loom-children {
|
|
||||||
margin-left: 0.85em;
|
|
||||||
padding-left: 0.6em;
|
|
||||||
border-left: 1px solid var(--color-base-35);
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-node {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-node.is-active {
|
|
||||||
background-color: var(--nav-item-background-active);
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-node-red {
|
|
||||||
background-color: rgba(var(--color-red-rgb), 0.2) !important;
|
|
||||||
}
|
|
||||||
.loom-node-red.is-active {
|
|
||||||
background-color: rgba(var(--color-red-rgb), 0.3) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-node-orange {
|
|
||||||
background-color: rgba(var(--color-orange-rgb), 0.2) !important;
|
|
||||||
}
|
|
||||||
.loom-node-orange.is-active {
|
|
||||||
background-color: rgba(var(--color-orange-rgb), 0.3) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-node-yellow {
|
|
||||||
background-color: rgba(var(--color-yellow-rgb), 0.2) !important;
|
|
||||||
}
|
|
||||||
.loom-node-yellow.is-active {
|
|
||||||
background-color: rgba(var(--color-yellow-rgb), 0.3) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-node-green {
|
|
||||||
background-color: rgba(var(--color-green-rgb), 0.2) !important;
|
|
||||||
}
|
|
||||||
.loom-node-green.is-active {
|
|
||||||
background-color: rgba(var(--color-green-rgb), 0.3) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-node-blue {
|
|
||||||
background-color: rgba(var(--color-blue-rgb), 0.2) !important;
|
|
||||||
}
|
|
||||||
.loom-node-blue.is-active {
|
|
||||||
background-color: rgba(var(--color-blue-rgb), 0.3) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-node-purple {
|
|
||||||
background-color: rgba(var(--color-purple-rgb), 0.2) !important;
|
|
||||||
}
|
|
||||||
.loom-node-purple.is-active {
|
|
||||||
background-color: rgba(var(--color-purple-rgb), 0.3) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-node-inner {
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
padding: 0.35em 0 0.35em 0.6em;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-node-bookmark {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-left: 0.3em;
|
|
||||||
margin-right: -0.3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-node-unread {
|
|
||||||
font-weight: bold !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-node-unread-indicator {
|
|
||||||
width: 0.3em;
|
|
||||||
height: 0.3em;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: var(--nav-item-color);
|
|
||||||
margin-left: 0.6em;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-icon {
|
|
||||||
display: inline-flex !important;
|
|
||||||
margin-left: 0.1em;
|
|
||||||
--icon-size: 1.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-icons:not(.is-mobile) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-node:hover .loom-icons {
|
|
||||||
display: inline-flex !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-spacer {
|
|
||||||
padding-right: 0.6em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-section {
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-section-header {
|
|
||||||
padding: 0.35em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-section-header-inner {
|
|
||||||
color: var(--text-normal);
|
|
||||||
font-weight: var(--font-medium);
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-section-count {
|
|
||||||
color: var(--text-faint);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rotating {
|
@keyframes rotating {
|
||||||
from {
|
from {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
|
|
@ -249,58 +192,27 @@ body {
|
||||||
transform: rotate(360deg);
|
transform: rotate(360deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.loom__node-generating-icon {
|
||||||
.rotating svg {
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.loom__node-generating-icon svg {
|
||||||
animation: rotating 2s linear infinite;
|
animation: rotating 2s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.rotating {
|
.loom__node-show-more:hover {
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.obsidian-button {
|
|
||||||
-webkit-app-region: no-drag;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: var(--text-normal);
|
color: var(--text-normal);
|
||||||
font-size: var(--font-ui-small);
|
|
||||||
border-radius: var(--button-radius);
|
|
||||||
border: 0;
|
|
||||||
padding: var(--size-4-1) var(--size-4-3);
|
|
||||||
height: var(--input-height);
|
|
||||||
font-weight: var(--input-font-weight);
|
|
||||||
cursor: var(--cursor);
|
|
||||||
font-family: inherit;
|
|
||||||
outline: none;
|
|
||||||
user-select: none;
|
|
||||||
white-space: nowrap;
|
|
||||||
background-color: var(--interactive-normal);
|
|
||||||
box-shadow: var(--input-shadow);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.obsidian-button:hover {
|
.loom__node-children {
|
||||||
background-color: var(--interactive-hover);
|
margin-left: 0.85em;
|
||||||
|
padding-left: 0.6em;
|
||||||
|
border-left: 1px solid var(--color-base-35);
|
||||||
}
|
}
|
||||||
|
|
||||||
.loom-import-button {
|
/* nodes -- siblings view */
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-bct {
|
.loom__sibling {
|
||||||
color: var(--ancestor-editor-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.theme-dark .loom-bct-border {
|
|
||||||
border-right: 2px dashed #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-bct-hover {
|
|
||||||
background-color: var(--ancestor-editor-background);
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-sibling {
|
|
||||||
color: var(--nav-item-color);
|
color: var(--nav-item-color);
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
|
|
||||||
|
|
@ -309,21 +221,39 @@ body {
|
||||||
padding: 0.8em;
|
padding: 0.8em;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
}
|
}
|
||||||
|
.loom__sibling:hover {
|
||||||
.loom-sibling:hover {
|
|
||||||
color: var(--nav-item-color-active);
|
color: var(--nav-item-color-active);
|
||||||
}
|
}
|
||||||
|
.loom__sibling.is-active {
|
||||||
.loom-sibling.is-active {
|
|
||||||
background-color: var(--nav-item-background-active);
|
background-color: var(--nav-item-background-active);
|
||||||
color: var(--nav-item-color-active);
|
color: var(--nav-item-color-active);
|
||||||
}
|
}
|
||||||
|
|
||||||
.loom-sibling-divider {
|
.loom__sibling-ellipsis {
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loom-sibling-ellipsis {
|
|
||||||
color: var(--text-faint);
|
color: var(--text-faint);
|
||||||
margin-right: 0.3em;
|
margin-right: 0.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.loom__sibling-separator {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* nodes -- editor */
|
||||||
|
|
||||||
|
.loom__editor-node {
|
||||||
|
color: var(--ancestor-editor-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.loom__editor-node-hover {
|
||||||
|
background-color: var(--ancestor-editor-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-dark .loom__editor-node-border {
|
||||||
|
border-right: 2px dashed #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* hidden -- must be at end */
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,8 @@
|
||||||
"ES5",
|
"ES5",
|
||||||
"ES6",
|
"ES6",
|
||||||
"ES7"
|
"ES7"
|
||||||
]
|
],
|
||||||
|
"jsx": "react"
|
||||||
},
|
},
|
||||||
"include": [
|
"include": [
|
||||||
"**/*.ts"
|
"**/*.ts"
|
||||||
|
|
|
||||||
639
views.ts
Normal file
639
views.ts
Normal file
|
|
@ -0,0 +1,639 @@
|
||||||
|
import { LoomSettings, NoteState } from "./common";
|
||||||
|
import { ItemView, Menu, WorkspaceLeaf, setIcon } from "obsidian";
|
||||||
|
import { Range } from "@codemirror/state";
|
||||||
|
import {
|
||||||
|
Decoration,
|
||||||
|
DecorationSet,
|
||||||
|
EditorView,
|
||||||
|
PluginSpec,
|
||||||
|
PluginValue,
|
||||||
|
WidgetType,
|
||||||
|
} from "@codemirror/view";
|
||||||
|
const dialog = require("electron").remote.dialog;
|
||||||
|
|
||||||
|
export class LoomView extends ItemView {
|
||||||
|
getNoteState: () => NoteState | null;
|
||||||
|
getSettings: () => LoomSettings;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
leaf: WorkspaceLeaf,
|
||||||
|
getNoteState: () => NoteState | null,
|
||||||
|
getSettings: () => LoomSettings
|
||||||
|
) {
|
||||||
|
super(leaf);
|
||||||
|
|
||||||
|
this.getNoteState = getNoteState;
|
||||||
|
this.getSettings = getSettings;
|
||||||
|
}
|
||||||
|
|
||||||
|
async onOpen() {
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const state = this.getNoteState();
|
||||||
|
const settings = this.getSettings();
|
||||||
|
|
||||||
|
const scroll = this.containerEl.scrollTop;
|
||||||
|
|
||||||
|
this.containerEl.empty();
|
||||||
|
this.containerEl.addClass("loom__view");
|
||||||
|
|
||||||
|
this.renderNavButtons(settings);
|
||||||
|
const container = this.containerEl.createDiv({ cls: "outline" });
|
||||||
|
if (settings.showExport) this.renderAltExportInterface(container);
|
||||||
|
if (settings.showSettings) this.renderSettings(container, settings);
|
||||||
|
|
||||||
|
if (!state) {
|
||||||
|
container.createDiv({ cls: "pane-empty", text: "No note selected." });
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.renderBookmarks(container, state);
|
||||||
|
this.renderTree(container, state);
|
||||||
|
|
||||||
|
this.containerEl.scrollTop = scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderNavButtons(settings: LoomSettings) {
|
||||||
|
const navButtonsContainer = this.containerEl.createDiv({ cls: "nav-buttons-container loom__nav-buttons" });
|
||||||
|
|
||||||
|
// buttons to toggle 1) settings 2) node borders in the editor
|
||||||
|
|
||||||
|
const settingNavButton = (
|
||||||
|
setting: string,
|
||||||
|
value: boolean,
|
||||||
|
icon: string,
|
||||||
|
label: string
|
||||||
|
) => {
|
||||||
|
const button = navButtonsContainer.createDiv({
|
||||||
|
cls: `clickable-icon nav-action-button${value ? " is-active" : ""}`,
|
||||||
|
attr: { "aria-label": label },
|
||||||
|
});
|
||||||
|
setIcon(button, icon);
|
||||||
|
button.addEventListener("click", () =>
|
||||||
|
this.app.workspace.trigger("loom:set-setting", setting, !value)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
settingNavButton(
|
||||||
|
"showSettings",
|
||||||
|
settings.showSettings,
|
||||||
|
"settings",
|
||||||
|
"Show settings"
|
||||||
|
);
|
||||||
|
settingNavButton(
|
||||||
|
"showNodeBorders",
|
||||||
|
settings.showNodeBorders,
|
||||||
|
"separator-vertical",
|
||||||
|
"Show node borders in the editor"
|
||||||
|
);
|
||||||
|
|
||||||
|
// the import button
|
||||||
|
|
||||||
|
const importInput = navButtonsContainer.createEl("input", {
|
||||||
|
cls: "hidden",
|
||||||
|
attr: { type: "file", id: "loom__import-input" },
|
||||||
|
});
|
||||||
|
|
||||||
|
const importNavButton = navButtonsContainer.createEl("label", {
|
||||||
|
cls: "clickable-icon nav-action-button",
|
||||||
|
attr: { "aria-label": "Import JSON", for: "loom__import-input" },
|
||||||
|
});
|
||||||
|
setIcon(importNavButton, "import");
|
||||||
|
|
||||||
|
importInput.addEventListener("change", () => {
|
||||||
|
// @ts-expect-error
|
||||||
|
const path = importInput.files?.[0].path;
|
||||||
|
if (path) this.app.workspace.trigger("loom:import", path);
|
||||||
|
});
|
||||||
|
|
||||||
|
// the export button
|
||||||
|
|
||||||
|
const exportNavButton = navButtonsContainer.createDiv({
|
||||||
|
cls: `clickable-icon nav-action-button${settings.showExport ? " is-active" : ""}`,
|
||||||
|
attr: { "aria-label": "Export to JSON" },
|
||||||
|
});
|
||||||
|
setIcon(exportNavButton, "download");
|
||||||
|
|
||||||
|
exportNavButton.addEventListener("click", (event) => {
|
||||||
|
if (event.shiftKey) {
|
||||||
|
this.app.workspace.trigger("loom:set-setting", "showExport", !settings.showExport);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
dialog
|
||||||
|
.showSaveDialog({ title: "Export to JSON", filters: [{ extensions: ["json"] }] })
|
||||||
|
.then((result: any) => {
|
||||||
|
if (result && result.filePath)
|
||||||
|
this.app.workspace.trigger("loom:export", result.filePath);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
renderAltExportInterface(container: HTMLElement) {
|
||||||
|
const exportContainer = container.createDiv({ cls: "loom__alt-export-field" });
|
||||||
|
const exportInput = exportContainer.createEl("input", {
|
||||||
|
attr: { type: "text", placeholder: "Path to export to" },
|
||||||
|
});
|
||||||
|
const exportButton = exportContainer.createEl("button", {});
|
||||||
|
setIcon(exportButton, "download");
|
||||||
|
|
||||||
|
exportButton.addEventListener("click", () => {
|
||||||
|
if (exportInput.value) this.app.workspace.trigger("loom:export", exportInput.value);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
renderSettings(container: HTMLElement, settings: LoomSettings) {
|
||||||
|
const settingsContainer = container.createDiv({ cls: "loom__settings" });
|
||||||
|
|
||||||
|
// provider dropdown
|
||||||
|
|
||||||
|
const providerContainer = settingsContainer.createDiv({ cls: "loom__setting" });
|
||||||
|
providerContainer.createEl("label", { text: "Provider" });
|
||||||
|
const providerDropdown = providerContainer.createEl("select");
|
||||||
|
|
||||||
|
const providers = [
|
||||||
|
{ label: "OpenAI code-davinci-002 proxy", value: "ocp" },
|
||||||
|
{ label: "Cohere", value: "cohere" },
|
||||||
|
{ label: "TextSynth", value: "textsynth" },
|
||||||
|
{ label: "OpenAI", value: "openai" },
|
||||||
|
{ label: "OpenAI (Chat)", value: "openai-chat" },
|
||||||
|
{ label: "Azure", value: "azure" },
|
||||||
|
{ label: "Azure (Chat)", value: "azure-chat" },
|
||||||
|
];
|
||||||
|
providers.forEach((provider) =>
|
||||||
|
providerDropdown.createEl("option", {
|
||||||
|
text: provider.label,
|
||||||
|
attr: {
|
||||||
|
value: provider.value,
|
||||||
|
selected: provider.value === settings.provider ? "selected" : null,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
providerDropdown.addEventListener("change", () =>
|
||||||
|
this.app.workspace.trigger("loom:set-setting", "provider", providerDropdown.value)
|
||||||
|
);
|
||||||
|
|
||||||
|
// other settings
|
||||||
|
|
||||||
|
const setting = (
|
||||||
|
label: string,
|
||||||
|
setting: string,
|
||||||
|
value: string,
|
||||||
|
type: "string" | "int" | "float"
|
||||||
|
) => {
|
||||||
|
const parsers = {
|
||||||
|
"string": (value: string) => value,
|
||||||
|
"int": (value: string) => parseInt(value),
|
||||||
|
"float": (value: string) => parseFloat(value),
|
||||||
|
};
|
||||||
|
|
||||||
|
const settingContainer = settingsContainer.createDiv({ cls: "loom__setting" });
|
||||||
|
settingContainer.createEl("label", { text: label });
|
||||||
|
const settingInput = settingContainer.createEl("input", {
|
||||||
|
type: type === "string" ? "text" : "number", value
|
||||||
|
});
|
||||||
|
settingInput.addEventListener("blur", () =>
|
||||||
|
this.app.workspace.trigger(
|
||||||
|
"loom:set-setting", setting, parsers[type](settingInput.value)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
setting("Model", "model", settings.model, "string");
|
||||||
|
setting("Length (in tokens)", "maxTokens", String(settings.maxTokens), "int");
|
||||||
|
setting("Number of completions", "n", String(settings.n), "int");
|
||||||
|
setting("Temperature", "temperature", String(settings.temperature), "float");
|
||||||
|
setting("Top p", "topP", String(settings.topP), "float");
|
||||||
|
setting("Frequency penalty", "frequencyPenalty", String(settings.frequencyPenalty), "float");
|
||||||
|
setting("Presence penalty", "presencePenalty", String(settings.presencePenalty), "float");
|
||||||
|
}
|
||||||
|
|
||||||
|
renderBookmarks(container: HTMLElement, state: NoteState) {
|
||||||
|
const bookmarks = Object.entries(state.nodes).filter(([, node]) => node.bookmarked);
|
||||||
|
|
||||||
|
const bookmarksContainer = container.createDiv({ cls: "loom__bookmarks" });
|
||||||
|
|
||||||
|
const bookmarksHeader = bookmarksContainer.createDiv({
|
||||||
|
cls: "tree-item-self loom__tree-header"
|
||||||
|
});
|
||||||
|
bookmarksHeader.createSpan({
|
||||||
|
cls: "tree-item-inner loom__tree-header-text", text: "Bookmarks"
|
||||||
|
});
|
||||||
|
bookmarksHeader.createSpan({
|
||||||
|
cls: "tree-item-flair-outer loom__bookmarks-count",
|
||||||
|
text: String(bookmarks.length)
|
||||||
|
});
|
||||||
|
|
||||||
|
for (const [id,] of bookmarks)
|
||||||
|
this.renderNode(bookmarksContainer, state, id, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderTree(container: HTMLElement, state: NoteState) {
|
||||||
|
const treeHeader = container.createDiv({
|
||||||
|
cls: "tree-item-self loom__tree-header"
|
||||||
|
});
|
||||||
|
treeHeader.createSpan({
|
||||||
|
cls: "tree-item-inner loom__tree-header-text",
|
||||||
|
text: state.hoisted.length > 0 ? "Hoisted node" : "All nodes"
|
||||||
|
});
|
||||||
|
|
||||||
|
if (state.hoisted.length > 0)
|
||||||
|
this.renderNode(container, state, state.hoisted[state.hoisted.length - 1], true);
|
||||||
|
else {
|
||||||
|
const rootIds = Object.entries(state.nodes)
|
||||||
|
.filter(([, node]) => node.parentId === null)
|
||||||
|
.map(([id]) => id);
|
||||||
|
for (const rootId of rootIds)
|
||||||
|
this.renderNode(container, state, rootId, true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
renderNode(
|
||||||
|
container: HTMLElement,
|
||||||
|
state: NoteState,
|
||||||
|
id: string,
|
||||||
|
inTree: boolean
|
||||||
|
) {
|
||||||
|
const node = state.nodes[id];
|
||||||
|
|
||||||
|
const branchContainer = container.createDiv({});
|
||||||
|
|
||||||
|
const nodeContainer = branchContainer.createDiv({
|
||||||
|
cls: "is-clickable outgoing-link-item tree-item-self loom__node",
|
||||||
|
attr: { id: inTree ? `loom__node-${id}` : null },
|
||||||
|
});
|
||||||
|
if (id === state.current) nodeContainer.addClass("is-active");
|
||||||
|
if (node.unread) nodeContainer.addClass("loom__node-unread");
|
||||||
|
if (node.color) nodeContainer.addClass(`loom__node-${node.color}`);
|
||||||
|
|
||||||
|
const children = Object.entries(state.nodes)
|
||||||
|
.filter(([, node]) => node.parentId === id)
|
||||||
|
.map(([id]) => id);
|
||||||
|
|
||||||
|
// if the node has children, add an expand/collapse button
|
||||||
|
|
||||||
|
if (inTree && children.length > 0) {
|
||||||
|
const collapseButton = nodeContainer.createDiv({
|
||||||
|
cls: "collapse-icon loom__collapse-button"
|
||||||
|
});
|
||||||
|
if (node.collapsed) collapseButton.addClass("loom__is-collapsed");
|
||||||
|
setIcon(collapseButton, "right-triangle");
|
||||||
|
|
||||||
|
collapseButton.addEventListener("click", () =>
|
||||||
|
this.app.workspace.trigger("loom:toggle-collapse", id)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// if the node is bookmarked, add a bookmark icon
|
||||||
|
|
||||||
|
if (node.bookmarked) {
|
||||||
|
const bookmarkIcon = nodeContainer.createDiv({ cls: "loom__node-bookmark-icon" });
|
||||||
|
setIcon(bookmarkIcon, "bookmark");
|
||||||
|
}
|
||||||
|
|
||||||
|
// if the node is unread, add an unread indicator
|
||||||
|
|
||||||
|
if (node.unread) nodeContainer.createDiv({ cls: "loom__node-unread-indicator" });
|
||||||
|
|
||||||
|
// add the node's text
|
||||||
|
|
||||||
|
const nodeText = nodeContainer.createEl(node.text.trim() ? "span" : "em", {
|
||||||
|
cls: "tree-item-inner loom__node-text",
|
||||||
|
text: node.text.trim() || "No text",
|
||||||
|
});
|
||||||
|
nodeText.addEventListener("click", () =>
|
||||||
|
this.app.workspace.trigger("loom:switch-to", id)
|
||||||
|
);
|
||||||
|
|
||||||
|
// define `showMenu`,
|
||||||
|
// which is triggered by pressing the menu button or right-clicking the node
|
||||||
|
|
||||||
|
const rootNodes = Object.entries(state.nodes)
|
||||||
|
.filter(([, node]) => node.parentId === null)
|
||||||
|
const deletable = rootNodes.length !== 1 || rootNodes[0][0] !== id;
|
||||||
|
|
||||||
|
const showMenu = () => {
|
||||||
|
const menu = new Menu();
|
||||||
|
|
||||||
|
const menuItem = (name: string, icon: string, callback: () => void) =>
|
||||||
|
menu.addItem((item) => {
|
||||||
|
item.setTitle(name);
|
||||||
|
item.setIcon(icon);
|
||||||
|
item.onClick(callback);
|
||||||
|
});
|
||||||
|
|
||||||
|
const zeroArgMenuItem = (name: string, icon: string, event: string) =>
|
||||||
|
menuItem(name, icon, () => this.app.workspace.trigger(event));
|
||||||
|
const selfArgMenuItem = (name: string, icon: string, event: string) =>
|
||||||
|
menuItem(name, icon, () => this.app.workspace.trigger(event, id));
|
||||||
|
|
||||||
|
if (state.hoisted[state.hoisted.length - 1] === id)
|
||||||
|
zeroArgMenuItem("Unhoist", "arrow-down", "loom:unhoist");
|
||||||
|
else
|
||||||
|
selfArgMenuItem("Hoist", "arrow-up", "loom:hoist");
|
||||||
|
|
||||||
|
if (node.bookmarked)
|
||||||
|
selfArgMenuItem("Remove bookmark", "bookmark", "loom:toggle-bookmark");
|
||||||
|
else
|
||||||
|
selfArgMenuItem("Bookmark", "bookmark-minus", "loom:toggle-bookmark");
|
||||||
|
|
||||||
|
menu.addSeparator();
|
||||||
|
selfArgMenuItem("Create child", "plus", "loom:create-child");
|
||||||
|
selfArgMenuItem("Create sibling", "list-plus", "loom:create-sibling");
|
||||||
|
|
||||||
|
menu.addSeparator();
|
||||||
|
selfArgMenuItem("Delete all children", "x", "loom:clear-children");
|
||||||
|
selfArgMenuItem("Delete all siblings", "list-x", "loom:clear-siblings");
|
||||||
|
|
||||||
|
if (node.parentId !== null) {
|
||||||
|
menu.addSeparator();
|
||||||
|
selfArgMenuItem("Merge with parent", "arrow-up-left", "loom:merge-with-parent");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (deletable) {
|
||||||
|
menu.addSeparator();
|
||||||
|
selfArgMenuItem("Delete", "trash", "loom:delete");
|
||||||
|
}
|
||||||
|
|
||||||
|
const rect = nodeContainer.getBoundingClientRect();
|
||||||
|
menu.showAtPosition({ x: rect.right, y: rect.top });
|
||||||
|
}
|
||||||
|
|
||||||
|
nodeContainer.addEventListener("contextmenu", (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
showMenu();
|
||||||
|
});
|
||||||
|
|
||||||
|
// add buttons on hover
|
||||||
|
|
||||||
|
const nodeButtonsContainer = nodeContainer.createDiv({
|
||||||
|
cls: "loom__node-buttons"
|
||||||
|
});
|
||||||
|
|
||||||
|
const button = (label: string, icon: string, callback: () => void) => {
|
||||||
|
const button_ = nodeButtonsContainer.createDiv({
|
||||||
|
cls: "loom__node-button",
|
||||||
|
attr: { "aria-label": label },
|
||||||
|
});
|
||||||
|
setIcon(button_, icon);
|
||||||
|
button_.addEventListener("click", callback);
|
||||||
|
};
|
||||||
|
|
||||||
|
button("Show menu", "menu", showMenu);
|
||||||
|
|
||||||
|
if (state.hoisted[state.hoisted.length - 1] === id)
|
||||||
|
button("Unhoist", "arrow-down", () => this.app.workspace.trigger("loom:unhoist"));
|
||||||
|
else button("Hoist", "arrow-up", () => this.app.workspace.trigger("loom:hoist", id));
|
||||||
|
|
||||||
|
if (node.bookmarked)
|
||||||
|
button(
|
||||||
|
"Remove bookmark",
|
||||||
|
"bookmark-minus",
|
||||||
|
() => this.app.workspace.trigger("loom:toggle-bookmark", id)
|
||||||
|
);
|
||||||
|
else
|
||||||
|
button("Bookmark", "bookmark", () =>
|
||||||
|
this.app.workspace.trigger("loom:toggle-bookmark", id)
|
||||||
|
);
|
||||||
|
|
||||||
|
if (deletable)
|
||||||
|
button("Delete", "trash", () => this.app.workspace.trigger("loom:delete", id));
|
||||||
|
|
||||||
|
// indicate if loom is currently generating children for this node
|
||||||
|
|
||||||
|
if (inTree && state.generating === id) {
|
||||||
|
const generatingContainer = branchContainer.createDiv({
|
||||||
|
cls: "loom__node-footer"
|
||||||
|
});
|
||||||
|
const generatingIcon = generatingContainer.createDiv({
|
||||||
|
cls: "loom__node-generating-icon"
|
||||||
|
});
|
||||||
|
setIcon(generatingIcon, "loader-2");
|
||||||
|
generatingContainer.createSpan({
|
||||||
|
cls: "loom__node-footer-text",
|
||||||
|
text: "Generating..."
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// if in a tree, and if the node isn't collapsed, render its children
|
||||||
|
|
||||||
|
if (!inTree || node.collapsed) return;
|
||||||
|
|
||||||
|
if (branchContainer.offsetWidth < 150) {
|
||||||
|
if (children.length > 0) {
|
||||||
|
const showMore = branchContainer.createDiv({
|
||||||
|
cls: "loom__node-footer loom__node-show-more"
|
||||||
|
});
|
||||||
|
setIcon(showMore, "arrow-up");
|
||||||
|
showMore.createSpan({
|
||||||
|
cls: "loom__node-footer-text",
|
||||||
|
text: "Show more...",
|
||||||
|
});
|
||||||
|
|
||||||
|
showMore.addEventListener("click", () =>
|
||||||
|
this.app.workspace.trigger("loom:hoist", id)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const childrenContainer = branchContainer.createDiv({
|
||||||
|
cls: "loom__node-children"
|
||||||
|
});
|
||||||
|
for (const childId of children)
|
||||||
|
this.renderNode(childrenContainer, state, childId, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
getViewType(): string {
|
||||||
|
return "loom";
|
||||||
|
}
|
||||||
|
|
||||||
|
getDisplayText(): string {
|
||||||
|
return "Loom";
|
||||||
|
}
|
||||||
|
|
||||||
|
getIcon(): string {
|
||||||
|
return "network";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class LoomSiblingsView extends ItemView {
|
||||||
|
getNoteState: () => NoteState | null;
|
||||||
|
|
||||||
|
constructor(leaf: WorkspaceLeaf, getNoteState: () => NoteState | null) {
|
||||||
|
super(leaf);
|
||||||
|
this.getNoteState = getNoteState;
|
||||||
|
this.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const scroll = this.containerEl.scrollTop;
|
||||||
|
|
||||||
|
this.containerEl.empty();
|
||||||
|
this.containerEl.addClass("loom__view");
|
||||||
|
const container = this.containerEl.createDiv({ cls: "outline" });
|
||||||
|
|
||||||
|
const state = this.getNoteState();
|
||||||
|
|
||||||
|
if (state === null) {
|
||||||
|
container.createDiv({
|
||||||
|
cls: "pane-empty",
|
||||||
|
text: "No note selected.",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const parentId = state.nodes[state.current].parentId;
|
||||||
|
const siblings = Object.entries(state.nodes).filter(
|
||||||
|
([, node]) => node.parentId === parentId
|
||||||
|
);
|
||||||
|
|
||||||
|
let currentNodeContainer = null;
|
||||||
|
for (const i in siblings) {
|
||||||
|
const [id, node] = siblings[i];
|
||||||
|
|
||||||
|
const nodeContainer = container.createDiv({
|
||||||
|
cls: `loom__sibling${id === state.current ? " is-active" : ""}`,
|
||||||
|
});
|
||||||
|
if (parentId !== null)
|
||||||
|
nodeContainer.createSpan({
|
||||||
|
text: "…",
|
||||||
|
cls: "loom__sibling-ellipsis",
|
||||||
|
});
|
||||||
|
nodeContainer.createSpan({ text: node.text.trim() });
|
||||||
|
nodeContainer.addEventListener("click", () =>
|
||||||
|
this.app.workspace.trigger("loom:switch-to", id)
|
||||||
|
);
|
||||||
|
|
||||||
|
if (parseInt(i) !== siblings.length - 1)
|
||||||
|
container.createEl("hr", { cls: "loom__sibling-separator" });
|
||||||
|
|
||||||
|
if (id === state.current) currentNodeContainer = nodeContainer;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.containerEl.scrollTop = scroll;
|
||||||
|
|
||||||
|
if (currentNodeContainer !== null)
|
||||||
|
currentNodeContainer.scrollIntoView({ block: "nearest" });
|
||||||
|
}
|
||||||
|
|
||||||
|
getViewType(): string {
|
||||||
|
return "loom-siblings";
|
||||||
|
}
|
||||||
|
|
||||||
|
getDisplayText(): string {
|
||||||
|
return "Siblings";
|
||||||
|
}
|
||||||
|
|
||||||
|
getIcon(): string {
|
||||||
|
return "layout-list";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LoomEditorPluginState {
|
||||||
|
ancestorLengths: [string, number][];
|
||||||
|
showNodeBorders: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class LoomEditorPlugin implements PluginValue {
|
||||||
|
decorations: DecorationSet;
|
||||||
|
state: LoomEditorPluginState;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.decorations = Decoration.none;
|
||||||
|
this.state = { ancestorLengths: [], showNodeBorders: false };
|
||||||
|
}
|
||||||
|
|
||||||
|
update() {
|
||||||
|
let decorations: Range<Decoration>[] = [];
|
||||||
|
|
||||||
|
const addRange = (from: number, to: number, id: string) => {
|
||||||
|
try {
|
||||||
|
const range = Decoration.mark({
|
||||||
|
class: `loom__editor-node loom__editor-node-${id}`,
|
||||||
|
}).range(from, to);
|
||||||
|
decorations.push(range);
|
||||||
|
} catch (e) {
|
||||||
|
// this happens if the range is empty. it's ok. it's fine,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const addBorder = (at: number) => {
|
||||||
|
const range = Decoration.widget({
|
||||||
|
widget: new LoomNodeBorderWidget(),
|
||||||
|
side: -1,
|
||||||
|
}).range(at, at);
|
||||||
|
decorations.push(range);
|
||||||
|
};
|
||||||
|
|
||||||
|
let i = 0;
|
||||||
|
for (const [id, length] of this.state.ancestorLengths) {
|
||||||
|
addRange(i, i + length, id);
|
||||||
|
i += length;
|
||||||
|
if (this.state.showNodeBorders) addBorder(i);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.decorations = Decoration.set(decorations);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class LoomNodeBorderWidget extends WidgetType {
|
||||||
|
toDOM() {
|
||||||
|
const el = document.createElement("span");
|
||||||
|
el.classList.add("loom__editor-node-border");
|
||||||
|
return el;
|
||||||
|
}
|
||||||
|
|
||||||
|
eq() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const loomEditorPluginSpec: PluginSpec<LoomEditorPlugin> = {
|
||||||
|
decorations: (plugin: LoomEditorPlugin) => plugin.decorations,
|
||||||
|
eventHandlers: {
|
||||||
|
mouseover: (event: MouseEvent, _view: EditorView) => {
|
||||||
|
if (event.button !== 0) return false;
|
||||||
|
|
||||||
|
const target = event.target as HTMLElement;
|
||||||
|
if (!target.classList.contains("loom__editor-node")) return false;
|
||||||
|
|
||||||
|
const className = target.classList[target.classList.length - 1];
|
||||||
|
for (const el of [].slice.call(
|
||||||
|
document.getElementsByClassName(className)
|
||||||
|
))
|
||||||
|
el.classList.add("loom__editor-node-hover");
|
||||||
|
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
mouseout: (event: MouseEvent, _view: EditorView) => {
|
||||||
|
if (event.button !== 0) return false;
|
||||||
|
|
||||||
|
const target = event.target as HTMLElement;
|
||||||
|
if (!target.classList.contains("loom__editor-node")) return false;
|
||||||
|
|
||||||
|
const className = target.classList[target.classList.length - 1];
|
||||||
|
for (const el of [].slice.call(
|
||||||
|
document.getElementsByClassName(className)
|
||||||
|
))
|
||||||
|
el.classList.remove("loom__editor-node-hover");
|
||||||
|
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
mousedown: (event: MouseEvent, _view: EditorView) => {
|
||||||
|
if (event.button !== 0 || !event.shiftKey) return false;
|
||||||
|
|
||||||
|
const target = event.target as HTMLElement;
|
||||||
|
if (!target.classList.contains("loom__editor-node")) return false;
|
||||||
|
|
||||||
|
// the second last element, since the last is `loom__editor-node-hover`
|
||||||
|
const className = target.classList[target.classList.length - 2];
|
||||||
|
const id = className.split("-").slice(2).join("-");
|
||||||
|
app.workspace.trigger("loom:switch-to", id);
|
||||||
|
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
Loading…
Reference in a new issue