Basic Structure Of Rendevoz

Before getting started, you should understand some basic concepts of Rendevoz's structure.

Meta-object vs Object

So, as you can see, meta-object and object are two fundamental things in Rendevoz, but what the difference between them?

What is Object?

Object carries your data, you can put anything on it. You only need to specify its ' specType ' to let the system know what type it is.

What is Meta-Object?

Meta-object is something beyond object, just like what 'meta' means, is an abstraction.

It doesn't really carry to much information, just something to tell you that there is a object right there, and this object maybe linked with some other objects.

It sounds like meta-object is a pointer to object, right? So normally meta-object's type is the same as the underlying object's type, and its name, description and tags can represents some info of the object.

How can an Object turn into a Meta-Object?

There are mainly two ways to turn an object into meta-object.

1. Drag and Drop

2. Programmatically

Drag & Drop

If you have used Rendevoz before, you will see Drag & Drop is a really important feature of Rendevoz.

Why Drag & Drop? Cuz I think it's the most simple and straightforward way to tell user:

"Oh, I'm dragging an object, and this object will have relation with another object!"

So it is pretty important to define your custom way of Drag & Drop, and it is also pretty simple to do!

...
plugin.register.registerObject('custom-type', {
    normalizeDraggingEleToMetaObject: async draggingDetails => {
        const metaStore = plugin.api.getMetaStore()
        const maybeExistedMetaObject = 
            await metaStore.getMetaObjectById(draggingDetails.id) ||
            await metaStore.addMetaObject({objectId: draggingDetails.id, type: 'custom-type'})
        return {
            normalizedMetaObject: maybeExistedMetaObject,
            shouldOpenEditMetaModal: false,
            alreadyHasMeta: true,
            preLinks: []
       }
    }
})

In above code, you registered an object with 'custom-type'.

And the method 'normalizeDraggingEleToMetaObject' is the core function to make your Drag & Drop works.

As you can see, I first check whether there is already a meta-object exists, if not, I add one.

And there is no preLinks to be added, but you can add preLinks as you want.

Programmatically

You can programmatically turn an object into meta-object.

const objectStore = plugin.api.getObjectStore('custom-ele')
const object = await objectStore.getOneById(123)
if(object){
    plugin.api.getMetaStore().addMetaObject({objectId: object.id, type: 'custom-ele'})
}

Use Store To Control You Data

Rendevoz has built-in support for state management. You can use two stores to control your data.

ObjectStore

You can use ObjectStore to control all objects and use their state in any React component.

After you update object's state, the change will auto commit to database and broadcast to all components which are using this object.

All changes committed in very short time are pushed in a queue and executed in batch.

// Example React Component
// custom-obj type is predefined
const ElementOne = ({plugin, objectId}: {plugin: PluginApi, objectId: number}) => {
    const objectStore = plugin.api.getObjectStore('custom-obj')
    const [objState, setObjectState] = [objectStore.useValue(objectId), objectStore.updateOne]
    
    return (
        <div>
            {objState.name}
            <button onClick={() => {
                setObjectState({id: objectId, name: 'Random name'})
            }}>Click me to change name</button>
        </div>
    )
}
const ElementTwo = ({plugin, objectId}: {plugin: PluginApi, objectId: number}) => {
    const objectStore = plugin.api.getObjectStore('custom-obj')
    const objState = objectStore.useValue(objectId)
    
    return (
        <div>
            Object's name will sync with global state: {objState.name}
        </div>
    )
}

MetaStore

MetaStore is similar with ObjectStore.You can use this store to control all meta-objects.

The updates of meta-objects' index and meta-links' index are debounced with 500ms after change.

const TestElement = ({plugin}: {plugin: PluginApi}) => {
    const metaStore = plugin.api.getMetaStore()
    const indexedMetaObjects = metaStore.useIndexedMetaObjects()
    useEffect(() => {
        if(indexedMetaObjects){
          const {
           typeToMetaObjectIdsMap,
           tagToMetaObjectIdsMap, 
           pinnedMetaObjectsSet, 
           metaAttachmentIdToMetaIdsMap, 
           objectIdToMetaObjectMap} = indexedMetaObjects
           console.log(indexedMetaObjects)
      }
      }, [indexedMetaObjects])
}