Copy & Paste components

how to work with copy & paste

  1. A page editing references a base page as a master template, or a desing patterns for animations, buttons

    Copy a component such as animation(liner spin etc), button, sprite, audio, and action etc from a master or template page to another page.

    reuse a consistent set of layered components across different destinations.

  2. Copy one component or action from a reference page to a destination.

    For example, kwik-sample-books can be used as a reference library for all component types. Users can copy a specific component, paste it into another page, and then adjust its properties as needed.

  3. One to many

    a copied component will be applied to selected layers, for example physics body, infinity scroll of layer properties

  4. Many to many - classed in a layer

    You can select multiple components (classes) in a layer. For example, if a layer contains “linear”, “button”, and “sprite”, you can paste those components into the selected layers of the destination page.

  5. Select mutiple actions, audios, varibales, timers, groups, joints

    For groups and joints, the destination must contain the same layers as their member components.

  6. Copy a component from another book

  7. Copy a whole page

    this includes all the components and actions in the page

  8. Utility copy_layer_class.command/bat

    layer’s components are copied

    copy_layer_class.command srcbook:srcpage:srclayer dstbook:dstpage:dstlayer

Specs

  • If the destination already has the same component, it will be overwritten.

  • Copying multiple components from multiple layers works only for layers with matching names. Components that do not match any layer name are ignored. When pasting them, just select a page, don’t need to select a layer in layerTable

  • Layers themselves are not copied. Only the layer’s properties or classes (components) can be copied.

    For example, if one layer has linear, button, and sprite classes, those classes will be be copied and pasted to another layer.

  • Multiple-copy is supported for audio, variables, timers, and actions.

    If an audio or timer component has an onComplete action, don’t forget to copy the action for the onComplete or make sure to assing an exisitng action for onComplete.

  • Copying a page duplicates all of its components and creates a new page name with _copied. For example, page1 becomes page1_copied, and you can rename it afterward.

  • Copying an action, and all the action commands in the action will be copied

  • Copying an action command within an action is supported.

    Edit an action to show the action command table, and right-click an action command to show the button context menu of copy/paste

    Notes for implementation

    • Action-command context menu is shown only for selected rows (isSelected == true). A single-click on a command row must set selection state and UI.editor.selections before right-click.
    • The action-command paste branch must use class name actionCommand (not actoinCommand).
    • Context-menu dispatch should include the selected command index so copy/paste can target the expected insertion point.

An example

A simple demonstration, you will have three components on page1, and then copy each property of the three components to components in page2

if you want to reuse a layer on page1, Import component layer will work for you. This copy & paste is just to copy values of component properties to another layer

An action can be copied to another page, make sure each command in the action should be linked to a valid layer in the pasted page. For instance action with play animation can be copied to another page, so the pasted page should have an animation function with the same name for playing the anim. You may modify playAnimation() argument to assign a different layer animation in the pasted page.

page1

  • layer animation 1A
  • acion 1B
  • layer button 1C

  1. make an animaton for a layer – 1A

    1. select a layer

    2. click Animation icon > linear

    3. animation props

      • wait for an action

  2. make an action – 1B

    1. click Action icon
    2. selec Animation command
      • play animation 1A

  3. make a button – 1C

    1. select a layer
    2. click interaction > button
      • onTap to dispatch B

page2

  • layer 2A
  • (action 2B)
  • layer 2C

  1. copy the layer animation 1A on page1, and paste to layer 2A

  2. copy the action 1B on page1, and paste to page2

  3. copy the layer button 1C on page1, and paste it to layer 2C

graph TB

subgraph page1

animation ---|with wait|layer1A
subgraph action1B
  playAnimation
end

playAnimation -.-> animation

button --- layer1C

button -. dispatch tap .-> action1B

end
graph LR

subgraph page1
action1B
animation
button
end

subgraph page2
layer2A
action2B
layer2C
end

style action2B fill:#bbf,stroke:#fff,stroke-width:2px,color:#fff,stroke-dasharray: 5 5

animation -.copy & paste to layer2A .-> layer2A
button -. copy & paste to layer2C .-> layer2C
action1B -. copy & paste to page2, rename it to action2B .-> page2

Manually change the play aniamtion argument

  • action2B in page2
    • play Animation
      • layer1A-animation <=== should be changed to layer2A-animation

copy & paste a component allowed from page to page

  • audios

  • groups

  • timers

  • variables

  • actions

  • properties

    • layer

    • layer’ class

      • animations
      • interactions
      • replacements
      • physics

    • page

idea: storybook(UI catalogue)

Example:

  • A Storybook page acts as a component catalogue for a project.
  • Each page in the catalogue stores a design pattern, such as a button style, animation preset, audio setup, or action workflow.
  • When building a new page, the user copies a pattern from Storybook, pastes it into the destination page, and then adjusts the copied properties.
  • This makes Storybook useful as a reference library for consistent component reuse across the app.
For developers:

See advanced/import_component/