refactor(core): split PlatformAdapter into FrameScheduler and CanvasFactory

Separate frame scheduling concerns from canvas creation for better architectural clarity and simpler custom integrations (e.g., WebXR).

Changes:

Split IPlatformAdapter into two focused interfaces:
- IFrameScheduler - Frame scheduling (scheduleFrame, onFrame)
- ICanvasFactory - Canvas creation and management
Update RenderCanvas to depend only on IFrameScheduler
- Rename parameter from platformAdapter to frameScheduler
- RenderCanvas no longer depends on canvas creation methods
Update createElement factory to accept IFrameScheduler
Keep IPlatformAdapter as union of both for backward compatibility

Benefits:

Single Responsibility Principle - each interface has one concern
RenderCanvas only depends on what it needs (frame scheduling)
WebXR/custom renderers can provide simple IFrameScheduler without implementing unused canvas creation methods
No breaking changes - IPlatformAdapter still works as before
Better foundation for testing and exotic platforms

Example WebXR usage: class XRFrameScheduler implements IFrameScheduler { scheduleFrame() { xrSession.requestAnimationFrame(…) } onFrame(cb) { … } } new RenderCanvas(new XRFrameScheduler(xrSession))

Canvas UI is a general UI renderer runs on HTML Canvas. https://alibaba.github.io/canvas-ui/

It provides a series of React components, allowing developers to quickly build Canvas-based applications using their existing knowledge.

It also features a DOM-like scene tree, enabling developers to manipulate elements drawn in Canvas just like they would manipulate DOM elements.

import React from 'react'
import { Canvas, Text, Flex } from '@canvas-ui/react'

export default () => {
  const containerStyle = {
    width: 250,
    flexDirection: 'column'
  }
  const textStyle = {
    maxWidth: containerStyle.width,
    maxLines: 1,
  }
  return (
    <div style={{ height: '100px' }}>
      <Canvas>
        <Flex style={ containerStyle }>
          <Text style={ textStyle }>私はガラスを食べられます。それは私を傷つけません。</Text>
          <Text style={ textStyle }>The quick brown fox jumps over the lazy dog.</Text>
        </Flex>
      </Canvas>
    </div>
  )
}

Demo

https://stackblitz.com/github/alibaba/canvas-ui/tree/main/examples/kanban

canvas-ui-kanban-demo

Features

Manipulate elements in Canvas just like DOM elements
Seamlessly integrating with React applications
Flex layout
Animation based on motion
Basic text typography capabilities: automatic word wrapping, alignment, text overflow
CSS styles through the style attribute
Interaction events: PointerEvents and WheelEvent
Convenient layering capabilities
Fully written in TypeScript with complete type definitions
Rendering in WebWorker (WIP)

Project Structure

packages/core The core of the renderer, providing capabilities such as createElement, events, rendering pipeline, etc.
packages/react Canvas UI’s official React binding, providing components like <View />, <Text />, etc.
packages/examples Component development and testing environment based on Storybook
tools/ scripts

Development

# Start development mode for core and react
$ pnpm dev

# Start Storybook
$ pnpm dev:storybook

# Run unit tests
$ pnpm test

# Build umd, esm versions
$ pnpm build