Skip to content

Commit 7b995aa

Browse files
SnaveSutitSnaveSutit
committed
Update to new docs format
Fix cameras and locators not working when nested in bones
1 parent c84bd4c commit 7b995aa

File tree

9 files changed

+387
-2
lines changed

9 files changed

+387
-2
lines changed

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,8 @@
9696
},
9797
"dependencies": {
9898
"deepslate": "^0.17.2",
99+
"marked": "^4.3.0",
100+
"marked-gfm-heading-id": "^3.0.0",
99101
"svelte-ace": "^1.0.21"
100102
}
101103
}

‎src/global.d.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,17 @@ import type { ProgressBarController } from './util/progress'
88
import type { VariantsContainer } from './variants'
99

1010
declare global {
11+
interface IDocsManifest {
12+
structure: Record<string, any>
13+
pages: IDocsManifestPage[]
14+
}
15+
interface IDocsManifestPage {
16+
title: string
17+
url: string
18+
children?: string[]
19+
content: string
20+
}
21+
1122
const AnimatedJava: {
1223
loaded?: boolean
1324
docClick: (link: string) => void

‎src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ globalThis.AnimatedJava = {
5656
// settings: AJSettings.animatedJavaSettings,
5757
createChaos,
5858
docClick(link: string) {
59-
if (link.startsWith('page:')) {
59+
if (link.startsWith('/docs/')) {
6060
link = link.substring(5)
6161
let section: string | undefined
6262
if (link.includes('#')) [link, section] = link.split('#')

‎src/rendering/modelRenderer.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -313,6 +313,12 @@ function renderGroup(group: Group, rig: IRenderedRig) {
313313
if (node instanceof Group) {
314314
const bone = renderGroup(node, rig)
315315
if (bone) structure.children.push(bone)
316+
} else if (node instanceof Locator) {
317+
const locator = renderLocator(node, rig)
318+
if (locator) structure.children.push(locator)
319+
} else if (OutlinerElement.types.camera && node instanceof OutlinerElement.types.camera) {
320+
const camera = renderCamera(node as ICamera, rig)
321+
if (camera) structure.children.push(camera)
316322
} else if (node instanceof Cube) {
317323
const element = renderCube(node, rig, renderedBone.model)
318324
if (element) renderedBone.model.elements.push(element)

‎src/ui/ajDocs.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as events from '../events'
22
import { translate } from '../util/translation'
3-
import { default as DocsComponent } from './components/docs.svelte'
3+
import { default as DocsComponent } from './components/newDocs/docsDialog.svelte'
44
import { SvelteDialog } from './util/svelteDialog'
55

66
let docsDialog: SvelteDialog | undefined

‎src/ui/components/newDocs/docsDialog.svelte‎

Lines changed: 246 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,246 @@
1+
<script lang="ts" context="module">
2+
import { type Writable, writable } from 'svelte/store'
3+
import { openAJDocsDialog } from '../../ajDocs'
4+
import DocsIndexItem from './docsIndexItem.svelte'
5+
import DocsPage from './docsPage.svelte'
6+
import * as events from '../../../events'
7+
8+
const DEV_URL = 'http://localhost:5173'
9+
const DEV_API = 'http://localhost:5173/api/docs_manifest'
10+
const DEV_DOCS = 'http://localhost:5173/docs/'
11+
const PROD_URL = 'https://animated-java-dev-ianssenne.vercel.app'
12+
const PROD_API = 'https://animated-java-dev-ianssenne.vercel.app/api/docs_manifest'
13+
const PROD_DOCS = 'https://animated-java-dev-ianssenne.vercel.app/docs/'
14+
const API = process.env.NODE_ENV === 'development' ? DEV_API : PROD_API
15+
const DOCS = process.env.NODE_ENV === 'development' ? DEV_DOCS : PROD_DOCS
16+
const URL = process.env.NODE_ENV === 'development' ? DEV_URL : PROD_URL
17+
18+
let manifest: IDocsManifest
19+
let openPageUrl: Writable<string> = writable('/home')
20+
21+
async function load(attemptCount: number = 0) {
22+
manifest = await fetch(API)
23+
.then(res => {
24+
if (!res.ok)
25+
throw new Error(`Failed to fetch docs manifest. (Attempt ${attemptCount + 1})`)
26+
return res.json()
27+
})
28+
.catch(err => {
29+
console.error(
30+
`Failed to fetch docs manifest. (Attempt ${attemptCount + 1})\n` + err.stack
31+
)
32+
// retry
33+
void load(attemptCount + 1)
34+
})
35+
compilePages()
36+
openAJDocsDialog()
37+
}
38+
39+
function getPage(pageUrl: string) {
40+
const page = manifest.pages.find(page => page.url === pageUrl)
41+
console.log(manifest.pages)
42+
if (!page) throw new Error(`Failed to find page with URL ${pageUrl}`)
43+
return page
44+
}
45+
46+
function compilePages() {
47+
for (const page of manifest.pages) {
48+
page.content = page.content.replace(
49+
/<h([1-6])>(.+?)<\/h[1-6]>/gm,
50+
(match, p1, p2) =>
51+
`<h${p1} id="${escape(p2.toLowerCase().replace(' ', '_'))}">${p2}</h${p1}>`
52+
)
53+
page.content = page.content.replace(
54+
/<a href="(.+?)">(.+?)<\/a>/gm,
55+
`<a class="animated-java-anchor" onclick="AnimatedJava.docClick('$1')">$2</a>`
56+
)
57+
page.content = page.content.replace(
58+
/<img src="(.+?)" alt="(.+?)">/gm,
59+
(match, p1, p2) => `<img src="${URL + p1}" alt="${p2}">`
60+
)
61+
}
62+
}
63+
64+
events.DOCS_LINK_CLICKED.subscribe(event => {
65+
openPageUrl.set(event.link)
66+
})
67+
68+
void load()
69+
//
70+
</script>
71+
72+
<script lang="ts">
73+
//
74+
</script>
75+
76+
<div class="docs-container">
77+
{#if manifest}
78+
<div class="index-sidebar">
79+
<div class="index-sidebar-content">
80+
{#each Object.entries(manifest.structure) as [key, value]}
81+
<DocsIndexItem {manifest} {openPageUrl} myPageUrl={key} myStructure={value} />
82+
{/each}
83+
</div>
84+
<div />
85+
</div>
86+
<div class="animated-java-page-container">
87+
<DocsPage page={getPage($openPageUrl)} />
88+
</div>
89+
{:else}
90+
<div>Loading...</div>
91+
{/if}
92+
</div>
93+
94+
{@html `<style>
95+
.animated-java-page-container {
96+
display: flex;
97+
flex-direction: column;
98+
flex-grow: 1;
99+
}
100+
.animated-java-page-container img {
101+
border: 0.25em solid var(--color-dark);
102+
border-radius: 0.5em;
103+
image-rendering: auto;
104+
max-width: 660px;
105+
}
106+
.animated-java-page-container p {
107+
margin: 0.5em 1em;
108+
}
109+
.animated-java-page-container p.image-container {
110+
display: flex;
111+
flex-direction: column;
112+
align-items: center;
113+
}
114+
.animated-java-page-container a.animated-java-anchor {
115+
text-decoration: underline;
116+
cursor: pointer;
117+
}
118+
.animated-java-page-container a.animated-java-anchor:hover {
119+
color: var(--color-accent);
120+
}
121+
.animated-java-page-container ol,
122+
.animated-java-page-container ul {
123+
margin-left: 2em;
124+
}
125+
.animated-java-page-container li {
126+
list-style: unset;
127+
padding: 5px 0px;
128+
}
129+
.animated-java-page-container blockquote {
130+
border-left: 4px solid var(--color-accent);
131+
background-color: var(--color-button);
132+
padding-left: 1em;
133+
}
134+
.animated-java-page-container code {
135+
background-color: var(--color-back);
136+
border: unset;
137+
user-select: text;
138+
font-family: var(--font-code);
139+
font-size: 0.85em;
140+
display: inline-flex;
141+
padding: 0em 0.5em;
142+
border-radius: 0.2em;
143+
}
144+
.animated-java-page-container pre {
145+
background-color: var(--color-back);
146+
border: 2px solid var(--color-border);
147+
border-radius: 0.25em;
148+
margin: 0.5em 1em;
149+
padding: 0.25em 0.5em;
150+
overflow-x: auto;
151+
display: inline-table;
152+
white-space: pre-wrap;
153+
}
154+
.animated-java-page-container pre div div {
155+
all: unset;
156+
font-size: 0.8em;
157+
font-family: var(--font-code);
158+
cursor: text;
159+
user-select: text;
160+
}
161+
.animated-java-page-container pre code {
162+
all: unset;
163+
font-size: 0.8em;
164+
font-family: var(--font-code);
165+
cursor: text;
166+
user-select: text;
167+
}
168+
.animated-java-page-container h1 {
169+
display: flex;
170+
justify-content: center;
171+
align-items: center;
172+
text-align: center;
173+
font-size: 3em;
174+
flex-direction: column;
175+
background: var(--color-button);
176+
border-bottom: 2px solid var(--color-accent);
177+
}
178+
.animated-java-page-container h2 {
179+
display: flex;
180+
justify-content: center;
181+
flex-direction: column;
182+
font-weight: unset;
183+
margin: 20px 0px 10px;
184+
align-items: flex-start;
185+
padding: 10px 20px;
186+
background: var(--color-button);
187+
border-bottom: 2px solid var(--color-accent);
188+
}
189+
.animated-java-page-container h3 {
190+
display: flex;
191+
justify-content: center;
192+
font-weight: unset;
193+
align-items: flex-start;
194+
flex-direction: column;
195+
box-sizing: unset;
196+
font-size: 1.5em;
197+
background: var(--color-button);
198+
padding: 5px 10px 5px 10px;
199+
border-left: 2px solid var(--color-accent);
200+
}
201+
.animated-java-page-container h6 {
202+
font-style: italic;
203+
opacity: 0.76;
204+
font-size: 0.9em;
205+
}
206+
.animated-java-page-container h4 {
207+
display: flex;
208+
justify-content: center;
209+
font-weight: unset;
210+
margin: 10px 16px 0px;
211+
align-items: flex-start;
212+
flex-direction: column;
213+
box-sizing: unset;
214+
font-size: 20px;
215+
}
216+
</style>`}
217+
218+
<style>
219+
.docs-container {
220+
display: flex;
221+
flex-direction: row;
222+
}
223+
224+
.index-sidebar {
225+
width: fit-content;
226+
display: flex;
227+
flex-direction: column;
228+
}
229+
230+
.index-sidebar-content {
231+
/* padding: 2px 10px; */
232+
width: fit-content;
233+
background: var(--color-back);
234+
border: 2px solid var(--color-dark);
235+
white-space: nowrap;
236+
}
237+
238+
.animated-java-page-container {
239+
display: flex;
240+
flex-direction: column;
241+
flex-grow: 1;
242+
max-height: 800px;
243+
overflow-y: auto;
244+
margin: 0px 0px 0px 20px;
245+
}
246+
</style>

‎src/ui/components/newDocs/docsIndexItem.svelte‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<script lang="ts" context="module">
2+
import { type Writable } from 'svelte/store'
3+
4+
//
5+
</script>
6+
7+
<script lang="ts">
8+
export let manifest: IDocsManifest
9+
export let openPageUrl: Writable<string>
10+
export let myPageUrl: string
11+
export let myStructure: IDocsManifest['structure']
12+
let myPage = manifest.pages.find(page => page.url === myPageUrl)!
13+
if (!myPage) throw new Error(`Failed to find page with URL ${myPageUrl}`)
14+
let expanded = false
15+
16+
function toggleExpand() {
17+
expanded = !expanded
18+
}
19+
20+
function onTitleClick() {
21+
openPageUrl.set(myPageUrl)
22+
}
23+
24+
openPageUrl.subscribe(value => {
25+
if (value === myPageUrl) return (expanded = true)
26+
27+
function recurse(structure = myStructure): boolean {
28+
if (Object.keys(structure).includes(value)) return true
29+
for (const key in structure) {
30+
if (recurse(structure[key])) return true
31+
}
32+
return false
33+
}
34+
35+
expanded = recurse(myStructure)
36+
})
37+
38+
//
39+
</script>
40+
41+
<li class="index-item">
42+
<!-- svelte-ignore a11y-click-events-have-key-events -->
43+
<div
44+
class="title-container"
45+
style={$openPageUrl === myPageUrl ? 'background: var(--color-button);' : ''}
46+
on:click={onTitleClick}
47+
>
48+
{#if Object.entries(myStructure).length > 0}
49+
<span class="material-icons" on:click={toggleExpand}>
50+
{expanded ? 'expand_more' : 'chevron_right'}
51+
</span>
52+
{/if}
53+
<span class="title">{myPage.title}</span>
54+
</div>
55+
{#if expanded}
56+
<ol class="child-container">
57+
{#each Object.entries(myStructure) as [key, value]}
58+
<svelte:self {manifest} {openPageUrl} myPageUrl={key} myStructure={value} />
59+
{/each}
60+
</ol>
61+
{/if}
62+
</li>
63+
64+
<style>
65+
.index-item {
66+
display: flex;
67+
flex-direction: column;
68+
list-style-type: none;
69+
}
70+
71+
.title-container {
72+
display: flex;
73+
padding: 2px 10px 2px 5px;
74+
}
75+
76+
.title {
77+
text-decoration: underline;
78+
margin-left: 2px;
79+
}
80+
81+
.title-container:hover {
82+
color: var(--color-light);
83+
cursor: pointer;
84+
}
85+
86+
.child-container {
87+
display: flex;
88+
flex-direction: column;
89+
list-style-type: none;
90+
margin-left: 20px;
91+
}
92+
</style>

0 commit comments

Comments
 (0)