refactor: rename Sidebar to NodeLibrary

backend/src/grapycal/core/workspace.py

@@ -46,7 +46,7 @@
 from grapycal.sobjects.workspaceObject import WebcamStream, WorkspaceObject
 from grapycal.sobjects.edge import Edge
 from grapycal.sobjects.port import InputPort, OutputPort
-from grapycal.sobjects.sidebar import Sidebar
+from grapycal.sobjects.nodeLibrary import NodeLibrary
 from grapycal.sobjects.node import Node
 
 
@@ -150,7 +150,7 @@ def _setup_objectsync(self):
         # Register all the sobject types to the objectsync server so they can be created dynamically.
         self._objectsync.register(WorkspaceObject)
         self._objectsync.register(Editor)
-        self._objectsync.register(Sidebar)
+        self._objectsync.register(NodeLibrary)
         self._objectsync.register(Settings)
         self._objectsync.register(LocalFileView)
         self._objectsync.register(RemoteFileView)

backend/src/grapycal/extension/extensionManager.py

@@ -73,7 +73,7 @@ def update_extension(self, extension_name: str) -> None:
         added_node_types = new_node_types - old_node_types
         changed_node_types = old_node_types & new_node_types
 
-        existing_nodes = main_store.main_editor.get_children_of_type(Node) + main_store.sidebar.get_children_of_type(Node)
+        existing_nodes = main_store.main_editor.get_children_of_type(Node) + main_store.node_library.get_children_of_type(Node)
 
         # Ensure there are no nodes of removed types
         for node in existing_nodes:
@@ -302,11 +302,11 @@ def create_preview_nodes(self, name: str) -> None:
         node_types = self._extensions[name].node_types_d
         for node_type in node_types.values():
             if not node_type.category == 'hidden' and not node_type._is_singleton:
-                self._objectsync.create_object(node_type,parent_id=main_store.sidebar.get_id(),is_preview=True,is_new=True)
+                self._objectsync.create_object(node_type,parent_id=main_store.node_library.get_id(),is_preview=True,is_new=True)
 
     def _destroy_nodes(self, name: str) -> None:
         node_types = self._extensions[name].node_types_d
-        for obj in main_store.sidebar.get_children_of_type(Node)\
+        for obj in main_store.node_library.get_children_of_type(Node)\
         + main_store.main_editor.top_down_search(type=Node):
             if obj.get_type_name() in node_types:
                 self._objectsync.destroy_object(obj.get_id())

backend/src/grapycal/sobjects/nodeLibrary.py

@@ -0,0 +1,4 @@
+from objectsync import SObject
+
+class NodeLibrary(SObject):
+    frontend_type = 'NodeLibrary'

backend/src/grapycal/sobjects/workspaceObject.py

@@ -8,7 +8,7 @@
 from grapycal.sobjects.editor import Editor
 from grapycal.sobjects.fileView import FileView, LocalFileView, RemoteFileView
 from grapycal.sobjects.node import Node
-from grapycal.sobjects.sidebar import Sidebar
+from grapycal.sobjects.nodeLibrary import NodeLibrary
 from grapycal.sobjects.settings import Settings
 from objectsync import (
     SObject,
@@ -28,15 +28,22 @@ def build(self, old: SObjectSerialized | None = None):
         if old is None:
             self.settings = self.add_child(Settings)
             self.webcam = self.add_child(WebcamStream)
-            self.sidebar = self.add_child(Sidebar)
+            self.node_library = self.add_child(NodeLibrary)
         else:
             self.settings = self.add_child(Settings, old=old.get_child("settings"))
             self.webcam = self.add_child(WebcamStream, old=old.get_child("webcam"))
-            self.sidebar = self.add_child(Sidebar, old=old.get_child("sidebar"))
+
+            #BACKWARD COMPATIBILITY: v0.11.3 and below, node_library was called sidebar
+            if old.has_child("node_library"):
+                old_node_library = old.get_child("node_library")
+            else:
+                old_node_library = old.get_child("sidebar")
+
+            self.node_library = self.add_child(NodeLibrary, old=old_node_library)
 
         main_store.settings = self.settings
         main_store.webcam = self.webcam
-        main_store.sidebar = self.sidebar
+        main_store.node_library = self.node_library
 
         if old is None:
             self.main_editor = self.add_child(Editor)

backend/src/grapycal/stores/main_store.py

@@ -13,7 +13,7 @@
     from grapycal.sobjects.settings import Settings
     from grapycal.sobjects.workspaceObject import WebcamStream
     from grapycal.utils.httpResource import HttpResource
-    from grapycal.sobjects.sidebar import Sidebar
+    from grapycal.sobjects.nodeLibrary import NodeLibrary
     from grapycal.core.workspace import ClientMsgTypes
 
     class SendMessageProtocol(Protocol):
@@ -47,7 +47,7 @@ def __init__(self):
         self.main_editor: Editor
         self.settings: Settings
         self.webcam: WebcamStream
-        self.sidebar: Sidebar
+        self.node_library: NodeLibrary
 
     # set by Workspace
     def open_workspace(self, path, no_exist_ok=False):

frontend/src/app.ts

@@ -7,7 +7,7 @@ import { expose, print } from './devUtils'
 import { Port } from './sobjects/port'
 import { Edge } from './sobjects/edge'
 import { SoundManager } from './ui_utils/soundManager';
-import { Sidebar } from './sobjects/sidebar'
+import { NodeLibrary } from './sobjects/nodeLibrary'
 import { WebcamStream, Workspace } from './sobjects/workspace'
 import { ExtensionsSetting } from './ui_utils/extensionsSettings'
 import { TextControl } from './sobjects/controls/textControl'
@@ -68,7 +68,7 @@ function startObjectSync(wsUrl:string){
     objectsync.register(Node);
     objectsync.register(Port);
     objectsync.register(Edge);
-    objectsync.register(Sidebar);
+    objectsync.register(NodeLibrary);
 
     objectsync.register(TextControl)
     objectsync.register(ButtonControl)

frontend/src/sobjects/node.ts

@@ -9,7 +9,7 @@ import { bloomDiv as bloomDiv, glowText } from '../ui_utils/effects'
 import { Vector2, as } from '../utils'
 import { EventDispatcher, GlobalEventDispatcher } from '../component/eventDispatcher'
 import { MouseOverDetector } from '../component/mouseOverDetector'
-import { Sidebar } from './sidebar'
+import { NodeLibrary } from './nodeLibrary'
 import { Editor } from './editor'
 import { Selectable } from '../component/selectable'
 import { Workspace } from './workspace'
@@ -132,7 +132,7 @@ export class Node extends CompSObject implements IControlHost {
     protected onStart(): void {
         super.onStart()
 
-        this._isPreview = this.parent instanceof Sidebar
+        this._isPreview = this.parent instanceof NodeLibrary
         this.editor = this.isPreview? null : this.parent as Editor
         this.selectable.selectionManager = Workspace.instance.selection
         if (!this.isPreview)
@@ -160,7 +160,7 @@ export class Node extends CompSObject implements IControlHost {
         }
 
         this.link(this.category.onSet2, (oldCategory: string, newCategory: string) => {
-            if(this.parent instanceof Sidebar){
+            if(this.parent instanceof NodeLibrary){
                 if(this.parent.hasItem(this.htmlItem))
                     this.parent.removeItem(this.htmlItem, oldCategory)
                 this.parent.addItem(this.htmlItem, newCategory)
@@ -409,7 +409,7 @@ export class Node extends CompSObject implements IControlHost {
 
     onParentChangedTo(newParent: SObject): void {
         super.onParentChangedTo(newParent)
-        if(newParent instanceof Sidebar){
+        if(newParent instanceof NodeLibrary){
             newParent.addItem(this.htmlItem, this.category.getValue())
             if(!this.isPreview)
                 this.transform.enabled = false
@@ -465,7 +465,7 @@ export class Node extends CompSObject implements IControlHost {
 
     public onDestroy(): void {
         super.onDestroy()
-        if(this.parent instanceof Sidebar){
+        if(this.parent instanceof NodeLibrary){
             this.parent.removeItem(this.htmlItem, this.category.getValue())
         }
         this.errorPopup.destroy()

frontend/src/sobjects/sidebar.ts → frontend/src/sobjects/nodeLibrary.ts

@@ -6,7 +6,7 @@ import { print } from '../devUtils'
 import { ExtensionsSetting } from '../ui_utils/extensionsSettings'
 import { Workspace } from './workspace'
 
-export class Sidebar extends CompSObject {
+export class NodeLibrary extends CompSObject {
     /**
     * The left sidebar is a tabbed interface with the following tabs:
     * - File View

frontend/src/sobjects/settings.ts

@@ -10,7 +10,7 @@ export class Settings extends CompSObject{
     entries: DictTopic<string,any>
 
     protected onStart(): void {
-        this.inspector.htmlItem.setParentElement(document.getElementById('tab-settings'))
+        // this.inspector.mount(document.getElementById('tab-settings'))
         this.addFrontendSettings()
         this.entries = this.getAttribute('entries')
         this.link(this.entries.onSet,this.udpateEntries)

frontend/src/sobjects/workspace.ts

@@ -26,7 +26,7 @@ export class Workspace extends CompSObject{
         <div spellcheck="false" class="full-width full-height" style="display: flex; ">
           <!-- <header></header> -->
           <div class="main">
-            <div slot="Sidebar"></div>
+            <div slot="NodeLibrary"></div>
 
             <div slot="RightSideBar"></div>