v1.2.0

src/app/config/app/autoMove.ts

@@ -0,0 +1,11 @@
+import { App, Rect } from 'leafer-ui'
+import '@leafer-in/viewport' // 导入视口插件
+
+const app = new App({
+    view: window,
+    tree: {},
+    move: { dragOut: true } // [!code hl]
+})
+
+app.tree.add(Rect.one({ fill: '#32cd79', draggable: true }, 100, 100))
+app.tree.add(Rect.one({ fill: '#32cd79', draggable: true }, 300, 100))

src/app/config/app/drag.ts

@@ -0,0 +1,9 @@
+import { App, Rect } from 'leafer-ui'
+import '@leafer-in/viewport' // 导入视口插件
+
+const app = new App({ view: window, tree: { type: 'viewport' } })
+
+app.tree.add(Rect.one({ fill: '#32cd79', draggable: true }, 100, 100))
+app.tree.add(Rect.one({ fill: '#32cd79', draggable: true }, 300, 100))
+
+app.config.move.drag = true  // [!code hl] // 预览模式，可在应用运行中实时修改。

src/app/config/app/hitRadius.ts

@@ -0,0 +1,9 @@
+import { App, Rect } from 'leafer-ui'
+
+const app = new App({
+    view: window,
+    tree: {},
+    pointer: { hitRadius: 0 } // [!code hl]
+})
+
+app.tree.add(Rect.one({ fill: '#32cd79', draggable: true }, 100, 100))

src/app/config/app/hittable.ts

@@ -0,0 +1,9 @@
+import { App, Rect } from 'leafer-ui'
+
+const app = new App({
+    view: window,
+    tree: {},
+    hittable: false // [!code hl]
+})
+
+app.tree.add(Rect.one({ fill: '#32cd79', draggable: true }, 100, 100))

src/app/config/app/partRender.ts

@@ -0,0 +1,10 @@
+import { App, Rect, Debug } from 'leafer-ui'
+
+const app = new App({
+    view: window,
+    tree: { usePartRender: false }  // [!code hl]
+})
+
+Debug.showRepaint = true
+
+app.tree.add(Rect.one({ fill: '#32cd79', draggable: true }, 100, 100))

src/app/config/app/start.ts

@@ -0,0 +1,11 @@
+import { App } from 'leafer-ui'
+
+const app = new App({
+    view: window,
+    tree: {},
+    start: false // [!code hl]
+})
+
+// async create leafs ...
+
+app.start() 

src/app/config/app/throughPath.ts

@@ -0,0 +1,19 @@
+import { App, Rect, PointerEvent } from 'leafer-ui'
+
+const app = new App({
+    view: window,
+    tree: {},
+    pointer: { through: true }  // [!code hl]
+})
+
+const data = { x: 100, y: 100, fill: '#32cd00' }
+
+const bottomRect = new Rect(data)
+app.tree.add(bottomRect)
+
+const rect = new Rect(data)
+app.tree.add(rect)
+
+rect.on(PointerEvent.DOWN, (e: PointerEvent) => {
+    console.log(e.throughPath) // { list: [bottomRect, rect, leafer] }
+})

src/app/config/autoMove.ts

@@ -1,12 +1,11 @@
 import { Leafer, Rect } from 'leafer-ui'
+import '@leafer-in/viewport' // 导入视口插件
 
-const leafer = new Leafer({ // [!code hl:4]
+const leafer = new Leafer({
     view: window,
-    move: { dragOut: true }
+    type: 'viewport',
+    move: { dragOut: true } // [!code hl]
 })
 
-const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true, })
-const rect2 = new Rect({ x: 100, y: 300, fill: '#32cd79', draggable: true, })
-
-leafer.add(rect)
-leafer.add(rect2)
+leafer.add(Rect.one({ fill: '#32cd79', draggable: true }, 100, 100))
+leafer.add(Rect.one({ fill: '#32cd79', draggable: true }, 300, 100))

src/app/config/drag.ts

@@ -1,6 +1,7 @@
 import { Leafer, Rect } from 'leafer-ui'
+import '@leafer-in/viewport' // 导入视口插件
 
-const leafer = new Leafer({ view: window })
+const leafer = new Leafer({ view: window, type: 'viewport' })
 
 leafer.add(Rect.one({ fill: '#32cd79', draggable: true }, 100, 100))
 leafer.add(Rect.one({ fill: '#32cd79', draggable: true }, 300, 100))

src/app/config/hitRadius.ts

@@ -1,10 +1,8 @@
 import { Leafer, Rect } from 'leafer-ui'
 
-const leafer = new Leafer({ // [!code hl:4]
+const leafer = new Leafer({
     view: window,
-    pointer: { hitRadius: 0 }
+    pointer: { hitRadius: 0 } // [!code hl]
 })
 
-const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })
-
-leafer.add(rect)
+leafer.add(Rect.one({ fill: '#32cd79', draggable: true }, 100, 100))

src/app/config/hittable.ts

@@ -1,10 +1,8 @@
 import { Leafer, Rect } from 'leafer-ui'
 
-const leafer = new Leafer({ // [!code hl:4]
+const leafer = new Leafer({
     view: window,
-    hittable: false
+    hittable: false // [!code hl]
 })
 
-const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })
-
-leafer.add(rect)
+leafer.add(Rect.one({ fill: '#32cd79', draggable: true }, 100, 100))

src/app/config/partRender.ts

@@ -1,12 +1,10 @@
 import { Leafer, Rect, Debug } from 'leafer-ui'
 
-const leafer = new Leafer({ // [!code hl:4]
+const leafer = new Leafer({
     view: window,
-    usePartRender: false
+    usePartRender: false // [!code hl]
 })
 
 Debug.showRepaint = true
 
-const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })
-
-leafer.add(rect)
+leafer.add(Rect.one({ fill: '#32cd79', draggable: true }, 100, 100))

src/app/config/start.ts

@@ -1,8 +1,8 @@
 import { Leafer } from 'leafer-ui'
 
-const leafer = new Leafer({ // [!code hl:4]
+const leafer = new Leafer({
     view: window,
-    start: false
+    start: false // [!code hl]
 })
 
 // async create leafs ...

src/app/config/throughPath.ts

@@ -1,8 +1,8 @@
 import { Leafer, Rect, PointerEvent } from 'leafer-ui'
 
-const leafer = new Leafer({ // [!code hl:4]
+const leafer = new Leafer({
     view: window,
-    pointer: { through: true }
+    pointer: { through: true }  // [!code hl]
 })
 
 const data = { x: 100, y: 100, fill: '#32cd00' }
@@ -14,5 +14,5 @@ const rect = new Rect(data)
 leafer.add(rect)
 
 rect.on(PointerEvent.DOWN, (e: PointerEvent) => {
-    console.log(e.throughPath) //{ list: [bottomRect, rect, leafer] }
+    console.log(e.throughPath) // { list: [bottomRect, rect, leafer] }
 })

src/app/config/type/app/custom.ts

@@ -0,0 +1,21 @@
+import { App, Rect, MoveEvent, ZoomEvent } from 'leafer-ui'
+import '@leafer-in/viewport' // 导入视口插件
+
+const app = new App({
+    view: window,
+    tree: { type: 'custom' } // 给 tree 层添加自定义视口  // [!code hl]
+})
+
+// 自定义平移视图    // [!code hl:11]
+app.tree.on(MoveEvent.BEFORE_MOVE, (e: MoveEvent) => {
+    const { x, y } = app.tree.getValidMove(e.moveX, e.moveY)
+    app.tree.zoomLayer.move(x, y)
+})
+
+// 自定义缩放视图
+app.tree.on(ZoomEvent.BEFORE_ZOOM, (e: ZoomEvent) => {
+    const center = { x: e.x, y: e.y }
+    app.tree.zoomLayer.scaleOfWorld(center, app.tree.getValidScale(e.scale))
+})
+
+app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 100, 200, 200))

src/app/config/type/app/design.ts

@@ -0,0 +1,9 @@
+import { App, Rect } from 'leafer-ui'
+import '@leafer-in/viewport' // 导入视口插件
+
+const app = new App({
+    view: window,
+    tree: { type: 'design' } // 给 tree 层添加视口  // [!code hl]
+})
+
+app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 100, 200, 200))

src/app/config/type/app/document.ts

@@ -0,0 +1,12 @@
+import { App, Rect } from 'leafer-ui'
+import '@leafer-in/viewport' // 导入视口插件
+
+const app = new App({
+    view: window,
+    tree: { type: 'document' } // 给 tree 层添加视口  // [!code hl]
+})
+
+app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 100, 200, 200))
+app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 600, 200, 200))
+app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 1200, 200, 200))
+app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 1800, 200, 200))

src/app/config/type/app/viewport.ts

@@ -0,0 +1,9 @@
+import { App, Rect } from 'leafer-ui'
+import '@leafer-in/viewport' // 导入视口插件
+
+const app = new App({
+    view: window,
+    tree: { type: 'viewport' } // 给 tree 层添加视口  // [!code hl]
+})
+
+app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 100, 200, 200))

src/app/config/type/block.ts

@@ -6,7 +6,7 @@ const canvas = document.body.appendChild(document.createElement('canvas'))
 div.style.height = '600px'
 div.innerText = '请往下滑，会出现一个矩形'
 
-const leafer = new Leafer({ view: canvas, type: 'block', height: 800 })
+const leafer = new Leafer({ view: canvas, height: 800 })
 
 const rect = new Rect({
     x: 100,

src/app/config/type/custom.ts

@@ -1,6 +1,21 @@
-import { Leafer } from 'leafer-ui'
+import { Leafer, Rect, MoveEvent, ZoomEvent } from 'leafer-ui'
+import '@leafer-in/viewport' // 导入视口插件
 
-new Leafer({ // [!code hl:4]
+const leafer = new Leafer({
     view: window,
-    type: 'custom'
+    type: 'custom' // 添加自定义视口 // [!code hl]
 })
+
+// 自定义平移视图    // [!code hl:11]
+leafer.on(MoveEvent.BEFORE_MOVE, (e: MoveEvent) => {
+    const { x, y } = leafer.getValidMove(e.moveX, e.moveY)
+    leafer.zoomLayer.move(x, y)
+})
+
+// 自定义缩放视图
+leafer.on(ZoomEvent.BEFORE_ZOOM, (e: ZoomEvent) => {
+    const center = { x: e.x, y: e.y }
+    leafer.zoomLayer.scaleOfWorld(center, leafer.getValidScale(e.scale))
+})
+
+leafer.add(Rect.one({ fill: '#32cd79' }, 100, 100, 200, 200))

src/app/config/type/design.ts

@@ -1,6 +1,9 @@
-import { Leafer } from 'leafer-ui'
+import { Leafer, Rect } from 'leafer-ui'
+import '@leafer-in/viewport' // 导入视口插件
 
-new Leafer({ // [!code hl:4]
+const leafer = new Leafer({
     view: window,
-    type: 'design' // 默认为design, 可不设置
+    type: 'design' // 添加视口 // [!code hl]
 })
+
+leafer.add(Rect.one({ fill: '#32cd79' }, 100, 100, 200, 200))

src/app/config/type/document.ts

@@ -1,6 +1,12 @@
-import { Leafer } from 'leafer-ui'
+import { Leafer, Rect } from 'leafer-ui'
+import '@leafer-in/viewport' // 导入视口插件
 
-new Leafer({ // [!code hl:4]
+const leafer = new Leafer({
     view: window,
-    type: 'document'
+    type: 'document' // 添加视口 // [!code hl]
 })
+
+leafer.add(Rect.one({ fill: '#32cd79' }, 100, 100, 200, 200))
+leafer.add(Rect.one({ fill: '#32cd79' }, 100, 600, 200, 200))
+leafer.add(Rect.one({ fill: '#32cd79' }, 100, 1200, 200, 200))
+leafer.add(Rect.one({ fill: '#32cd79' }, 100, 1800, 200, 200))

src/app/config/type/origin/custom.ts

@@ -0,0 +1,13 @@
+import { App, Rect } from 'leafer-ui'
+import '@leafer-in/viewport' // 导入视口插件
+
+const app = new App({
+    view: window,
+    // 以下配置 = tree: { type: 'custom' }  // [!code hl:5]
+    tree: {},
+    wheel: { preventDefault: true }, // 阻止浏览器默认滚动页面事件
+    touch: { preventDefault: true }, // 阻止移动端默认触摸屏滑动页面事件
+    pointer: { preventDefaultMenu: true } // 阻止浏览器默认菜单事件
+})
+
+app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 100, 200, 200))

src/app/config/type/origin/design.ts

@@ -0,0 +1,18 @@
+import { App, Rect } from 'leafer-ui'
+import '@leafer-in/viewport' // 导入视口插件
+
+const app = new App({
+    view: window,
+    // 以下配置 = tree: { type: 'design' }, // [!code hl:10]
+    tree: { type: 'viewport' }, // 添加基础视口
+    zoom: {
+        min: 0.01, // 视图缩放范围
+        max: 256
+    },
+    move: {
+        holdSpaceKey: true,  // 按住空白键拖拽可平移视图
+        holdMiddleKey: true, // 按住滚轮中键拖拽可平移视图
+    }
+})
+
+app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 100, 200, 200))

src/app/config/type/origin/document.ts

@@ -0,0 +1,15 @@
+import { App, Rect } from 'leafer-ui'
+import '@leafer-in/viewport' // 导入视口插件
+
+const app = new App({
+    view: window,
+    // 以下配置 = tree: { type: 'document' } , // [!code hl:4]
+    tree: { type: 'viewport' }, // 添加基础视口
+    zoom: { min: 1 }, // 视图缩放范围
+    move: { scroll: 'limit' } // 限制在有内容的区域内滚动
+})
+
+app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 100, 200, 200))
+app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 600, 200, 200))
+app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 1200, 200, 200))
+app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 1800, 200, 200))