Composition API

usePtahInstance()

usePtahInstance is used to access the current ptah instance. Through this API, you can interact with the platform by accessing and manipulating the ptah instance inside components.

Parameters

• No parameters are required.

Example Usage

import { usePtahInstance } from '@ptahjs/creative-vue';

export default {
    name: 'Header',
    setup() {
        // Get the ptah instance
        const ptahInstance = usePtahInstance();

        // Log the ptah instance for debugging
        console.log(ptahInstance);

        return {};
    }
};

useUI()

useUI is used to initialize and use UI components in module components. This API is primarily used for interacting with ptah UI components, such as initializing UI modules and binding events.

Parameters

• id: The unique identifier of the component, used to associate and identify UI modules.

Example Usage

<template>
    <div :ref="id" class="ui-button">
        <button @click="onTestEventClick">Button</button>
    </div>
</template>

<script>
import { useUI } from '@ptahjs/creative-vue';

export default defineComponent({
    name: 'UiButton1',
    props: {
        id: {
            type: String,
            default: ''
        }
    },

    setup(props) {
        // Initialize the UI module
        const { module } = useUI(props.id);

        // Test click event
        const onTestEventClick = (e) => {
            // Execute actions related to the click event
        };

        return { onTestEventClick };
    }
});
</script>

useExecuteEvent()

useExecuteEvent is used to execute event flows. With this API, you can trigger specified events and provide a callback function to handle the logic after the event is completed. It allows you to process data or interaction logic according to the specified event flow.

Parameters

• No parameters are required.

Return Value

• run: Used to execute the specified event flow.

Example Usage

import { useExecuteEvent } from '@ptahjs/creative-vue';

// Get the run function to execute the event
const { run } = useExecuteEvent();

// Test click event
const onTestEventClick = (e) => {
    // Execute the click event flow
    run('click', props.item, () => {
        console.log('Execution completed');
    });
};

usePropsFormModel()

usePropsFormModel is used to handle extended property model data in configuration components, allowing you to bind form data bidirectionally within the component and dynamically update form values.

Parameters

• props: The properties passed to the component, including configuration options, default values, etc.

Return Value

• Returns a model array containing the current form values.

Example Usage

import { usePropsFormModel, configProps } from '@ptahjs/creative-vue';

export default {
    name: 'PropNumber',
    props: configProps, // Configuration properties
    setup(props) {
        // Get the form model
        const [model] = usePropsFormModel(props);

        // Render an input field with bidirectional binding
        return () => (
            <input type="number" vModel={model.value} placeholder={props.config.placeholder} />
        );
    }
};

useRenderListener()

useRenderListener is used to listen to the layer rendering state. During the rendering process, you can use this API to get the loading state, rendering completion state, and other statuses, making it easier to handle operations during the rendering flow.

Parameters

• items: The collection of rendered elements or objects.
• sceneId: The unique identifier of the current scene.
• loading: A callback function to handle the loading state during rendering.
• complete: A callback function to handle the state once rendering is complete.

Example Usage

import { useRenderListener } from '@ptahjs/creative-vue';

useRenderListener({
    items: items, // Collection of rendered objects
    sceneId: id, // Current scene ID
    loading: () => {
        console.log('Loading...');
    },
    complete: () => {
        console.log('Loading complete!');
    }
});

useSceneRendering()

useSceneRendering is used to listen to the state changes during the scene rendering process. With this API, you can get the rendering state of each UI module during the rendering process, which is useful for debugging and optimization.

Parameters

• callback: A callback function that receives the UI module ID of each rendering step.

Example Usage

import { useSceneRendering } from '@ptahjs/creative-vue';

useSceneRendering((uiId) => {
    console.log('Rendering', uiId); // Log the current UI module ID being rendered
});

useSceneRendered()

useSceneRendered is used to listen for the event when the current scene has finished rendering. Once the scene rendering is complete, you can execute subsequent operations, such as updating the UI or triggering interactions.

Parameters

• No parameters are required.

Example Usage

import { useSceneRendered } from '@ptahjs/creative-vue';

useSceneRendered(() => {
    console.log('Rendering complete - Current scene'); // Callback after scene rendering completes
});