documentation browser

.prettierignore

@@ -1 +1,2 @@
-package.json
+package.json
+docs/components/html/**

docs/components/html/en-US/Animate.html

@@ -106,4 +106,4 @@
 <p><img src="images/animation.png" alt="Alt text"></p></div></div></div><div class="EezStudio_Component_Documentation_BodySection"><h1>Properties</h1><div><div class="accordion" id="component-properties-"><div class="accordion-item"><h2 class="accordion-header" id="component-properties-_h_specific"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#component-properties-_c_specific" aria-expanded="true" aria-controls="component-properties-_c_specific">Specific</button></h2><div id="component-properties-_c_specific" class="accordion-collapse collapse show" aria-labelledby="component-properties-_h_specific" data-bs-parent="#component-properties-"><div class="accordion-body"><dl><dt><h3>From</h3><span style="font-weight: normal; font-style: italic;">EXPRESSSION(float)</span></dt><dd><div class="markdown"><p>Startna pozicija zadana u sekundama.</p></div></dd><dt><h3>To</h3><span style="font-weight: normal; font-style: italic;">EXPRESSSION(float)</span></dt><dd><div class="markdown"><p>Krajnja pozicija zadana u sekundama.</p></div></dd><dt><h3>Speed</h3><span style="font-weight: normal; font-style: italic;">EXPRESSSION(float)</span></dt><dd><div class="markdown"><p>Utječe na trajanje animacije. Ako se postavi na <code>1</code> onda će animacija trajati <code>From - To</code> sekundi. Ako se želi dvostruko brža animacija onda treba postaviti na <code>2</code>, a ako se želi dvostruko sporija animacija onda treba postaviti na <code>0.5</code>. Ako se želi da animacija traje točno određeno vrijeme <code>T</code> onda se može koristiti formula <code>T / (From - To)</code>, npr. ako je <code>T</code> jednako <code>0.5</code> sekundi, From <code>1</code> sekunda i To <code>3</code> sekunde onda treba za speed staviti <code>0.5 / (3 - 1)</code>, tj. <code>0.25</code>. Ako se postavi na 0 onda će se trenutno skočiti na To poziciju.</p></div></dd></dl></div></div></div></div></div></div><div class="EezStudio_Component_Documentation_BodySection"><h1>Inputs</h1><div><dl><dt><h2>seqin</h2><span style="font-weight: normal; font-style: italic;">SEQ | OPTIONAL</span></dt><dd><div class="markdown"><p>A standard sequence input.</p></div></dd></dl></div></div><div class="EezStudio_Component_Documentation_BodySection"><h1>Outputs</h1><div><dl><dt><h2>seqout</h2><span style="font-weight: normal; font-style: italic;">SEQ | OPTIONAL</span></dt><dd><div class="markdown"><p>A standard sequence output. Aktivira se kada je animacija gotovo, tj. stiglo se do To pozicije.</p></div></dd></dl></div></div><div class="EezStudio_Component_Documentation_BodySection"><h1>Examples</h1><div><div class="markdown"><ul>
 <li>Animation</li>
 <li>sld-eez-flow-demo</li>
-</ul></div></div></div></div></div></div>
+</ul></div></div></div></div></div></div>

help/en-US/components/Component.md

@@ -1,9 +1,5 @@
 # PROPERTIES
 
-## Type [DRAFT]
-
-Ovo je tip komponente.
-
 ## Align and distribute [DRAFT]
 
 Poravnavanje i distribucija komponenti.

help/en-US/components/LVGLWidget.md

@@ -1 +1,41 @@
 # PROPERTIES
+
+## Name
+
+## Left unit
+
+## Top unit
+
+## Width unit
+
+## Height unit
+
+## Children
+
+## Hidden
+
+## Hidden flag type
+
+## Clickable
+
+## Clickable flag type
+
+## Flags
+
+## Scrollbar mode
+
+## Scroll direction
+
+## Checked
+
+## Checked state type
+
+## Disabled
+
+## Disabled state type
+
+## States
+
+## Use style
+
+## Local styles

help/en-US/components/actions/Output.md

@@ -4,6 +4,8 @@
 
 ## Name
 
+## Type
+
 # INPUTS
 
 ## seqin

help/en-US/components/widgets/Input.md

@@ -16,6 +16,8 @@
 
 ## Name
 
+## Type
+
 # INPUTS
 
 # OUTPUTS

packages/home/documentation-browser/component-info.tsx

@@ -15,13 +15,16 @@ import {
     ComponentOutput
 } from "project-editor/flow/component";
 
-export interface IProjectTypeComponentInfoParent {
-    properties: {
-        name: string;
-        metaInfo: PropertyInfo;
-    }[];
+export interface IComponentInfoProperty {
+    name: string;
+    metaInfo: PropertyInfo;
+}
+
+export interface IParentComponentInfo {
+    properties: IComponentInfoProperty[];
+
     markdown?: MarkdownData;
-    parent: IProjectTypeComponentInfoParent | undefined;
+    parent: IParentComponentInfo | undefined;
 }
 
 export class ComponentInfo {
@@ -32,38 +35,44 @@ export class ComponentInfo {
     icon: any;
     titleStyle: React.CSSProperties | undefined;
 
-    componentObject: Component;
-
-    properties: {
-        name: string;
-        metaInfo: PropertyInfo;
-    }[];
+    isDashboardComponent: boolean;
+    isEezGuiComponent: boolean;
+    isLVGLComponent: boolean;
 
+    properties: IComponentInfoProperty[];
     inputs: {
         name: string;
         metaInfo: ComponentInput;
     }[];
-
     outputs: {
         name: string;
         metaInfo: ComponentOutput;
     }[];
 
-    common: {
-        markdown?: MarkdownData;
-        parent: IProjectTypeComponentInfoParent;
-    };
-
-    dashboard: boolean;
-    eezgui: boolean;
-    lvgl: boolean;
+    markdown?: MarkdownData;
+    parent: IParentComponentInfo;
 
     docCounters: {
         total: number;
         drafts: number;
         completed: number;
     };
 
+    get allProperties() {
+        const getParentProperties = (
+            parentComponentInfo: IParentComponentInfo
+        ): IComponentInfoProperty[] => {
+            return [
+                ...parentComponentInfo.properties,
+                ...(parentComponentInfo.parent
+                    ? getParentProperties(parentComponentInfo.parent)
+                    : [])
+            ];
+        };
+
+        return [...this.properties, ...getParentProperties(this.parent)];
+    }
+
     static createComponentObject = (
         projectStore: ProjectStore,
         componentClass: IObjectClassInfo
@@ -110,19 +119,15 @@ export class ComponentInfo {
         }
 
         inc(this.getDescriptionMarkdown());
-
-        for (const property of this.properties) {
+        for (const property of this.allProperties) {
             inc(this.getPropertyDescriptionMarkdown(property.name));
         }
-
         for (const input of this.inputs) {
             inc(this.getInputDescriptionMarkdown(input.name));
         }
-
         for (const output of this.outputs) {
             inc(this.getOutputDescriptionMarkdown(output.name));
         }
-
         inc(this.getExamplesMarkdown());
 
         this.docCounters = { total, drafts, completed };
@@ -156,28 +161,25 @@ export class ComponentInfo {
     }
 
     getDescriptionMarkdown() {
-        return this.common.markdown?.description;
+        return this.markdown?.description;
     }
 
     renderDescription(generateHTML: boolean) {
-        return this.renderMarkdown(
-            this.common.markdown?.description,
-            generateHTML
-        );
+        return this.renderMarkdown(this.markdown?.description, generateHTML);
     }
 
     getPropertyDescriptionMarkdown(propertyName: string) {
-        const markdown = this.common.markdown?.properties[propertyName];
+        const markdown = this.markdown?.properties[propertyName];
         if (markdown) {
             return markdown;
         }
         return this.getParentPropertyDescriptionMarkdown(propertyName);
     }
 
     getParentPropertyDescriptionMarkdown(propertyName: string) {
-        let parent: IProjectTypeComponentInfoParent | undefined;
+        let parent: IParentComponentInfo | undefined;
 
-        for (parent = this.common.parent; parent; parent = parent.parent) {
+        for (parent = this.parent; parent; parent = parent.parent) {
             const markdown = parent.markdown?.properties[propertyName];
             if (markdown) {
                 return markdown;
@@ -195,7 +197,7 @@ export class ComponentInfo {
     }
 
     getInputDescriptionMarkdown(inputName: string) {
-        return this.common.markdown?.inputs[inputName];
+        return this.markdown?.inputs[inputName];
     }
 
     renderInputDescription(inputName: string, generateHTML: boolean) {
@@ -206,7 +208,7 @@ export class ComponentInfo {
     }
 
     getOutputDescriptionMarkdown(outputName: string) {
-        return this.common.markdown?.outputs[outputName];
+        return this.markdown?.outputs[outputName];
     }
 
     renderOutputDescription(outputName: string, generateHTML: boolean) {
@@ -217,7 +219,7 @@ export class ComponentInfo {
     }
 
     getExamplesMarkdown() {
-        return this.common.markdown?.examples;
+        return this.markdown?.examples;
     }
 
     renderExamples(generateHTML: boolean) {

packages/home/documentation-browser/components/ComponentHelp.tsx

@@ -95,9 +95,11 @@ export const ComponentHelp = observer(
         render() {
             const { componentInfo } = this.props;
 
-            const isDashboardComponent = componentInfo.dashboard != undefined;
-            const isEezGuiComponent = componentInfo.eezgui != undefined;
-            const isLVGLComponent = componentInfo.lvgl != undefined;
+            const isDashboardComponent =
+                componentInfo.isDashboardComponent != undefined;
+            const isEezGuiComponent =
+                componentInfo.isEezGuiComponent != undefined;
+            const isLVGLComponent = componentInfo.isLVGLComponent != undefined;
 
             return (
                 <div