App

创建 App（可选结构），了解初始化 应用配置、视口交互。

负责承载多个 Leafer 实例分层 协同工作，以提升性能，同时继承 Leafer 的部分功能和事件。

继承

App  >  Leafer  >  Group  >  UI

交互事件可以在多个子 Leafer 实例间按层级穿透，看上去就像是一个交互整体。

注意: App 不接收子元素的数据变化事件，请在对应的子 Leafer 实例上监听。

关键属性

isApp: boolean

是否为 App 实例， 默认为 true 。

children: Leafer[]

Leafer 实例的子对象。

统一结构

App 默认可以通过 add() 方法添加多个自定义层。为了方便大家记忆和沟通，我们以现实世界的方式为常用的 Leafer 层进行拟物化命名，并支持通过配置快速添加。

ground?: Leafer

地面层 (背景层)，位于最底部的 Leafer 实例，一般用于渲染背景、网格内容（可选）。

tree: Leafer

树结构 (主要内容层)，位于中间的 Leafer 实例，相当于 HTML 中的 body。

sky: Leafer

天空层 (变化层)，位于最顶部的 Leafer 实例，一般用来渲染 图形编辑器 实例。

预留属性

editor: IEditor

图形编辑器实例，需安装 图形编辑器 。

视口属性（viewport）

zoomLayer：Group

缩放平移视图层， 默认使用 app.tree.zoomLayer 作为缩放平移层。

可以手动修改它的 x、y、scale、scaleX、scaleY 属性进行缩放平移视图。

另通过 视图控制插件 / 滚动条插件 可以便捷控制视图，支持居中显示内容、聚集到指定元素。

关键方法

add ( leafer: Leafer)

添加一个 Leafer 实例。

addLeafer ( config?:ILeaferConfig)

快速创建并添加一个 Leafer 实例。

addAt ( child: Leafer, index: number)

添加一个 Leafer 实例到在指定位置。

addBefore ( child: Leafer, before: Leafer)

添加一个 Leafer 实例 在指定的 leafer 前面。

addAfter ( child: Leafer, after: Leafer)

添加一个 Leafer 实例 在指定的 leafer 后面。

配置

应用配置

视图

缩放平移视图

示例

我们以 图形编辑器 的例子来展示 App 的实际用法：

editor

import { App, Frame, Rect } from 'leafer-ui'
import { Editor } from '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件(可选)

const app = new App({
    view: window,
    fill: '#F2F2F2', // 背景色
    tree: { type: 'design' }, // 添加 tree 层
    sky: {}  // 添加 sky 层
})

app.tree.add(Frame.one({ // 页面内容
    children: [
        Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 100, 100),
        Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 300, 100)
    ]
}, 100, 100, 500, 600))

app.sky.add(app.editor = new Editor()) // 添加图形编辑器，用于选中元素进行编辑操作

简化

import { App, Frame, Rect } from 'leafer-ui'
import '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件(可选)

const app = new App({
    view: window,
    fill: '#F2F2F2',
    editor: {},  //  配置 editor 会自动创建并添加 app.editor 实例、tree 层、sky 层
    //  tree: { type: 'design' },
    //  sky: {}
})

app.tree.add(Frame.one({ // 页面内容
    children: [
        Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 100, 100),
        Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 300, 100)
    ]
}, 100, 100, 500, 600))

// app.sky.add(app.editor = new Editor()) // 添加图形编辑器，用于选中元素进行编辑操作

实现原理

import { App, Leafer, Frame, Rect } from 'leafer-ui'
import { Editor } from '@leafer-in/editor' // 导入图形编辑器插件
import '@leafer-in/viewport' // 导入视口插件(可选)

const app = new App({ view: window, fill: '#F2F2F2' }) 

app.add(app.tree = new Leafer({ type: 'design' })) // 添加 tree 层
app.add(app.sky = new Leafer())  // 添加 sky 层

app.tree.add(Frame.one({ // 页面内容
    children: [
        Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 100, 100),
        Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 300, 100)
    ]
}, 100, 100, 500, 600))

app.sky.add(app.editor = new Editor()) // 添加图形编辑器，用于选中元素进行编辑操作