From 692e205915df069c1468eb1d40191f7a1745a385 Mon Sep 17 00:00:00 2001 From: leaferjs Date: Thu, 26 Dec 2024 11:42:25 +0800 Subject: [PATCH] v1.2.0 --- src/app/config/app/autoMove.ts | 11 +++++++++++ src/app/config/app/drag.ts | 9 +++++++++ src/app/config/app/hitRadius.ts | 9 +++++++++ src/app/config/app/hittable.ts | 9 +++++++++ src/app/config/app/partRender.ts | 10 ++++++++++ src/app/config/app/start.ts | 11 +++++++++++ src/app/config/app/throughPath.ts | 19 +++++++++++++++++++ src/app/config/autoMove.ts | 13 ++++++------- src/app/config/drag.ts | 3 ++- src/app/config/hitRadius.ts | 8 +++----- src/app/config/hittable.ts | 8 +++----- src/app/config/partRender.ts | 8 +++----- src/app/config/start.ts | 4 ++-- src/app/config/throughPath.ts | 6 +++--- src/app/config/type/app/custom.ts | 21 +++++++++++++++++++++ src/app/config/type/app/design.ts | 9 +++++++++ src/app/config/type/app/document.ts | 12 ++++++++++++ src/app/config/type/app/viewport.ts | 9 +++++++++ src/app/config/type/block.ts | 2 +- src/app/config/type/custom.ts | 21 ++++++++++++++++++--- src/app/config/type/design.ts | 9 ++++++--- src/app/config/type/document.ts | 12 +++++++++--- src/app/config/type/draw.ts | 6 ------ src/app/config/type/origin/custom.ts | 13 +++++++++++++ src/app/config/type/origin/design.ts | 18 ++++++++++++++++++ src/app/config/type/origin/document.ts | 15 +++++++++++++++ src/app/config/type/origin/viewport.ts | 23 +++++++++++++++++++++++ src/app/config/type/viewport.ts | 9 +++++++++ src/app/viewport/app/layer.ts | 15 +++++++++++++++ src/app/viewport/app/zoom-config.ts | 10 ++++++++++ src/app/viewport/app/zoom-mode.ts | 10 ++++++++++ src/app/{window => viewport}/layer.ts | 3 ++- src/app/viewport/zoom-config.ts | 10 ++++++++++ src/app/viewport/zoom-mode.ts | 11 +++++++++++ src/app/window/custom.ts | 23 ----------------------- src/app/window/user.ts | 10 ---------- src/app/window/zoom-config.ts | 10 ---------- src/app/window/zoom-mode.ts | 10 ---------- src/display/Line/line.ts | 3 ++- src/performance/million.html | 2 +- src/plugin/editor/buttons.ts | 3 ++- src/plugin/editor/config/around.ts | 3 ++- src/plugin/editor/config/lockRatio.ts | 3 ++- src/plugin/editor/config/middle.ts | 3 ++- src/plugin/editor/config/mobile.ts | 3 ++- src/plugin/editor/config/points.ts | 3 ++- src/plugin/editor/config/rect.ts | 3 ++- src/plugin/editor/config/resizeable.ts | 3 ++- src/plugin/editor/config/rotate-point.ts | 3 ++- src/plugin/editor/config/rotateable.ts | 3 ++- src/plugin/editor/config/scale.ts | 3 ++- src/plugin/editor/create-mode.js | 3 ++- src/plugin/editor/create-mode.ts | 3 ++- src/plugin/editor/editable.ts | 3 ++- src/plugin/editor/event/select.js | 1 + src/plugin/editor/event/select.ts | 1 + src/plugin/editor/frame/editor.ts | 16 ++++++++++++++++ src/plugin/editor/frame/index.ts | 19 +++++++++++++++++++ src/plugin/editor/frame/origin.ts | 17 +++++++++++++++++ src/plugin/editor/frame/simple.ts | 20 ++++++++++++++++++++ src/plugin/editor/full.ts | 12 ++++++------ src/plugin/editor/resize/scale.ts | 3 ++- src/plugin/editor/rotate.ts | 3 ++- src/plugin/editor/start.ts | 3 ++- src/plugin/flow/flow.ts | 16 +++++++++++++--- src/plugin/view/zoom/fit-center.ts | 14 ++++++++++++++ src/property/custom/addAttr-datatype.ts | 8 ++++---- src/start/create.html | 2 +- src/worker/worker.js | 2 +- 69 files changed, 471 insertions(+), 132 deletions(-) create mode 100644 src/app/config/app/autoMove.ts create mode 100644 src/app/config/app/drag.ts create mode 100644 src/app/config/app/hitRadius.ts create mode 100644 src/app/config/app/hittable.ts create mode 100644 src/app/config/app/partRender.ts create mode 100644 src/app/config/app/start.ts create mode 100644 src/app/config/app/throughPath.ts create mode 100644 src/app/config/type/app/custom.ts create mode 100644 src/app/config/type/app/design.ts create mode 100644 src/app/config/type/app/document.ts create mode 100644 src/app/config/type/app/viewport.ts delete mode 100644 src/app/config/type/draw.ts create mode 100644 src/app/config/type/origin/custom.ts create mode 100644 src/app/config/type/origin/design.ts create mode 100644 src/app/config/type/origin/document.ts create mode 100644 src/app/config/type/origin/viewport.ts create mode 100644 src/app/config/type/viewport.ts create mode 100644 src/app/viewport/app/layer.ts create mode 100644 src/app/viewport/app/zoom-config.ts create mode 100644 src/app/viewport/app/zoom-mode.ts rename src/app/{window => viewport}/layer.ts (73%) create mode 100644 src/app/viewport/zoom-config.ts create mode 100644 src/app/viewport/zoom-mode.ts delete mode 100644 src/app/window/custom.ts delete mode 100644 src/app/window/user.ts delete mode 100644 src/app/window/zoom-config.ts delete mode 100644 src/app/window/zoom-mode.ts create mode 100644 src/plugin/editor/frame/editor.ts create mode 100644 src/plugin/editor/frame/index.ts create mode 100644 src/plugin/editor/frame/origin.ts create mode 100644 src/plugin/editor/frame/simple.ts create mode 100644 src/plugin/view/zoom/fit-center.ts diff --git a/src/app/config/app/autoMove.ts b/src/app/config/app/autoMove.ts new file mode 100644 index 0000000..03c02cf --- /dev/null +++ b/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)) \ No newline at end of file diff --git a/src/app/config/app/drag.ts b/src/app/config/app/drag.ts new file mode 100644 index 0000000..9eddaa3 --- /dev/null +++ b/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] // 预览模式，可在应用运行中实时修改。 \ No newline at end of file diff --git a/src/app/config/app/hitRadius.ts b/src/app/config/app/hitRadius.ts new file mode 100644 index 0000000..604177f --- /dev/null +++ b/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)) \ No newline at end of file diff --git a/src/app/config/app/hittable.ts b/src/app/config/app/hittable.ts new file mode 100644 index 0000000..c2bff38 --- /dev/null +++ b/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)) \ No newline at end of file diff --git a/src/app/config/app/partRender.ts b/src/app/config/app/partRender.ts new file mode 100644 index 0000000..77459ab --- /dev/null +++ b/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)) \ No newline at end of file diff --git a/src/app/config/app/start.ts b/src/app/config/app/start.ts new file mode 100644 index 0000000..d7eb361 --- /dev/null +++ b/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() \ No newline at end of file diff --git a/src/app/config/app/throughPath.ts b/src/app/config/app/throughPath.ts new file mode 100644 index 0000000..d500d85 --- /dev/null +++ b/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] } +}) \ No newline at end of file diff --git a/src/app/config/autoMove.ts b/src/app/config/autoMove.ts index f2909b5..d7098fe 100644 --- a/src/app/config/autoMove.ts +++ b/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) \ No newline at end of file +leafer.add(Rect.one({ fill: '#32cd79', draggable: true }, 100, 100)) +leafer.add(Rect.one({ fill: '#32cd79', draggable: true }, 300, 100)) \ No newline at end of file diff --git a/src/app/config/drag.ts b/src/app/config/drag.ts index 0feab36..3a15030 100644 --- a/src/app/config/drag.ts +++ b/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)) diff --git a/src/app/config/hitRadius.ts b/src/app/config/hitRadius.ts index cc8eaa0..22c3d25 100644 --- a/src/app/config/hitRadius.ts +++ b/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) \ No newline at end of file +leafer.add(Rect.one({ fill: '#32cd79', draggable: true }, 100, 100)) \ No newline at end of file diff --git a/src/app/config/hittable.ts b/src/app/config/hittable.ts index 36cf4d6..ed99050 100644 --- a/src/app/config/hittable.ts +++ b/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) \ No newline at end of file +leafer.add(Rect.one({ fill: '#32cd79', draggable: true }, 100, 100)) \ No newline at end of file diff --git a/src/app/config/partRender.ts b/src/app/config/partRender.ts index 4f5c188..1672376 100644 --- a/src/app/config/partRender.ts +++ b/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) \ No newline at end of file +leafer.add(Rect.one({ fill: '#32cd79', draggable: true }, 100, 100)) \ No newline at end of file diff --git a/src/app/config/start.ts b/src/app/config/start.ts index 0db9007..86cacf2 100644 --- a/src/app/config/start.ts +++ b/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 ... diff --git a/src/app/config/throughPath.ts b/src/app/config/throughPath.ts index 3097451..7216d73 100644 --- a/src/app/config/throughPath.ts +++ b/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] } }) \ No newline at end of file diff --git a/src/app/config/type/app/custom.ts b/src/app/config/type/app/custom.ts new file mode 100644 index 0000000..f10432e --- /dev/null +++ b/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)) \ No newline at end of file diff --git a/src/app/config/type/app/design.ts b/src/app/config/type/app/design.ts new file mode 100644 index 0000000..fa77b36 --- /dev/null +++ b/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)) \ No newline at end of file diff --git a/src/app/config/type/app/document.ts b/src/app/config/type/app/document.ts new file mode 100644 index 0000000..aec62e4 --- /dev/null +++ b/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)) \ No newline at end of file diff --git a/src/app/config/type/app/viewport.ts b/src/app/config/type/app/viewport.ts new file mode 100644 index 0000000..334ed38 --- /dev/null +++ b/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)) \ No newline at end of file diff --git a/src/app/config/type/block.ts b/src/app/config/type/block.ts index b81c642..49c8745 100644 --- a/src/app/config/type/block.ts +++ b/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, diff --git a/src/app/config/type/custom.ts b/src/app/config/type/custom.ts index 6c0cccb..58c0140 100644 --- a/src/app/config/type/custom.ts +++ b/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)) \ No newline at end of file diff --git a/src/app/config/type/design.ts b/src/app/config/type/design.ts index 21bb40a..4bd5f3d 100644 --- a/src/app/config/type/design.ts +++ b/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)) \ No newline at end of file diff --git a/src/app/config/type/document.ts b/src/app/config/type/document.ts index 325359f..93fc6c4 100644 --- a/src/app/config/type/document.ts +++ b/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)) \ No newline at end of file diff --git a/src/app/config/type/draw.ts b/src/app/config/type/draw.ts deleted file mode 100644 index 0fd5741..0000000 --- a/src/app/config/type/draw.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { Leafer } from 'leafer-ui' - -new Leafer({ // [!code hl:4] - view: window, - type: 'draw' -}) diff --git a/src/app/config/type/origin/custom.ts b/src/app/config/type/origin/custom.ts new file mode 100644 index 0000000..8796ee7 --- /dev/null +++ b/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)) \ No newline at end of file diff --git a/src/app/config/type/origin/design.ts b/src/app/config/type/origin/design.ts new file mode 100644 index 0000000..d10344c --- /dev/null +++ b/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)) \ No newline at end of file diff --git a/src/app/config/type/origin/document.ts b/src/app/config/type/origin/document.ts new file mode 100644 index 0000000..bab1720 --- /dev/null +++ b/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)) \ No newline at end of file diff --git a/src/app/config/type/origin/viewport.ts b/src/app/config/type/origin/viewport.ts new file mode 100644 index 0000000..e64a6c1 --- /dev/null +++ b/src/app/config/type/origin/viewport.ts @@ -0,0 +1,23 @@ +import { App, Rect, MoveEvent, ZoomEvent } from 'leafer-ui' +import '@leafer-in/viewport' // 导入视口插件 + +const app = new App({ + view: window, + // 以下配置及事件监听 = tree: { type: 'viewport' } // [!code hl:5] + tree: {}, + wheel: { preventDefault: true }, // 阻止浏览器默认滚动页面事件 + touch: { preventDefault: true }, // 阻止移动端默认触摸屏滑动页面事件 + pointer: { preventDefaultMenu: true } // 阻止浏览器默认菜单事件 +}) + +app.tree.add(Rect.one({ fill: '#32cd79' }, 100, 100, 200, 200)) + +// 平移视图 // [!code hl:9] +app.tree.on(MoveEvent.BEFORE_MOVE, (e: MoveEvent) => { + app.tree.zoomLayer.move(app.tree.getValidMove(e.moveX, e.moveY)) +}) + +// 缩放视图 +app.tree.on(ZoomEvent.BEFORE_ZOOM, (e: ZoomEvent) => { + app.tree.zoomLayer.scaleOfWorld(e, app.tree.getValidScale(e.scale)) +}) \ No newline at end of file diff --git a/src/app/config/type/viewport.ts b/src/app/config/type/viewport.ts new file mode 100644 index 0000000..cf0683e --- /dev/null +++ b/src/app/config/type/viewport.ts @@ -0,0 +1,9 @@ +import { Leafer, Rect } from 'leafer-ui' +import '@leafer-in/viewport' // 导入视口插件 + +const leafer = new Leafer({ + view: window, + type: 'viewport' // 添加视口 // [!code hl] +}) + +leafer.add(Rect.one({ fill: '#32cd79' }, 100, 100, 200, 200)) \ No newline at end of file diff --git a/src/app/viewport/app/layer.ts b/src/app/viewport/app/layer.ts new file mode 100644 index 0000000..99e2d45 --- /dev/null +++ b/src/app/viewport/app/layer.ts @@ -0,0 +1,15 @@ +import { App, Group, Rect } from 'leafer-ui' +import '@leafer-in/viewport' // 导入视口插件 + +const app = new App({ view: window, tree: { type: 'viewport' } }) + +const group = new Group() // [!code hl:4] +app.tree.add(group) + +app.tree.zoomLayer = group + +// fixed layer +app.tree.add(new Rect({ fill: '#FF4B4B', draggable: true })) + +// zoom / move layer +group.add(new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })) \ No newline at end of file diff --git a/src/app/viewport/app/zoom-config.ts b/src/app/viewport/app/zoom-config.ts new file mode 100644 index 0000000..731dd24 --- /dev/null +++ b/src/app/viewport/app/zoom-config.ts @@ -0,0 +1,10 @@ +import { App, Rect } from 'leafer-ui' +import '@leafer-in/viewport' // 导入视口插件 + +const app = new App({ + view: window, + tree: { type: 'viewport' }, + zoom: { min: 0.02, max: 256 } // [!code hl] +}) + +app.tree.add(new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })) \ No newline at end of file diff --git a/src/app/viewport/app/zoom-mode.ts b/src/app/viewport/app/zoom-mode.ts new file mode 100644 index 0000000..3ae93b6 --- /dev/null +++ b/src/app/viewport/app/zoom-mode.ts @@ -0,0 +1,10 @@ +import { App, Rect } from 'leafer-ui' +import '@leafer-in/viewport' // 导入视口插件 + +const app = new App({ + view: window, + tree: { type: 'viewport' }, + wheel: { zoomMode: true } // [!code hl] +}) + +app.tree.add(new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })) \ No newline at end of file diff --git a/src/app/window/layer.ts b/src/app/viewport/layer.ts similarity index 73% rename from src/app/window/layer.ts rename to src/app/viewport/layer.ts index 0feb4b0..5608f82 100644 --- a/src/app/window/layer.ts +++ b/src/app/viewport/layer.ts @@ -1,6 +1,7 @@ import { Leafer, Group, Rect } from 'leafer-ui' +import '@leafer-in/viewport' // 导入视口插件 -const leafer = new Leafer({ view: window }) +const leafer = new Leafer({ view: window, type: 'viewport' }) const group = new Group() // [!code hl:4] leafer.add(group) diff --git a/src/app/viewport/zoom-config.ts b/src/app/viewport/zoom-config.ts new file mode 100644 index 0000000..558f22e --- /dev/null +++ b/src/app/viewport/zoom-config.ts @@ -0,0 +1,10 @@ +import { Leafer, Rect } from 'leafer-ui' +import '@leafer-in/viewport' // 导入视口插件 + +const leafer = new Leafer({ + view: window, + type: 'viewport', + zoom: { min: 0.02, max: 256 } // [!code hl] +}) + +leafer.add(new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })) \ No newline at end of file diff --git a/src/app/viewport/zoom-mode.ts b/src/app/viewport/zoom-mode.ts new file mode 100644 index 0000000..adc8b4f --- /dev/null +++ b/src/app/viewport/zoom-mode.ts @@ -0,0 +1,11 @@ +import { Leafer, Rect } from 'leafer-ui' +import '@leafer-in/viewport' // 导入视口插件 + + +const leafer = new Leafer({ + view: window, + type: 'viewport', + wheel: { zoomMode: true } // [!code hl] +}) + +leafer.add(new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true })) \ No newline at end of file diff --git a/src/app/window/custom.ts b/src/app/window/custom.ts deleted file mode 100644 index 92f446f..0000000 --- a/src/app/window/custom.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { Leafer, Group, Rect, MoveEvent, ZoomEvent } from 'leafer-ui' - -const leafer = new Leafer({ // [!code hl:4] - view: window, - type: 'custom' -}) - -const zoomLayer = new Group() -const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true }) - -leafer.add(zoomLayer) -zoomLayer.add(rect) - -leafer.on(MoveEvent.BEFORE_MOVE, function (e: MoveEvent) { // [!code hl:10] - // custom ... - zoomLayer.moveWorld(e.moveX, e.moveY) -}) - -leafer.on(ZoomEvent.BEFORE_ZOOM, function (e: ZoomEvent) { - // custom ... - const center = { x: e.x, y: e.y } - zoomLayer.scaleOfWorld(center, e.scale) -}) \ No newline at end of file diff --git a/src/app/window/user.ts b/src/app/window/user.ts deleted file mode 100644 index 06cbc62..0000000 --- a/src/app/window/user.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Leafer, Rect } from 'leafer-ui' - -const leafer = new Leafer({ // [!code hl:4] - view: window, - type: 'draw' -}) - -const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true }) - -leafer.add(rect) \ No newline at end of file diff --git a/src/app/window/zoom-config.ts b/src/app/window/zoom-config.ts deleted file mode 100644 index 1110bba..0000000 --- a/src/app/window/zoom-config.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Leafer, Rect } from 'leafer-ui' - -const leafer = new Leafer({ - view: window, - zoom: { min: 0.02, max: 256 } // [!code hl] -}) - -const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true }) - -leafer.add(rect) \ No newline at end of file diff --git a/src/app/window/zoom-mode.ts b/src/app/window/zoom-mode.ts deleted file mode 100644 index bf8b8a8..0000000 --- a/src/app/window/zoom-mode.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Leafer, Rect } from 'leafer-ui' - -const leafer = new Leafer({ - view: window, - wheel: { zoomMode: true } // [!code hl] -}) - -const rect = new Rect({ x: 100, y: 100, fill: '#32cd79', draggable: true }) - -leafer.add(rect) \ No newline at end of file diff --git a/src/display/Line/line.ts b/src/display/Line/line.ts index 6f98891..0497e6b 100644 --- a/src/display/Line/line.ts +++ b/src/display/Line/line.ts @@ -6,7 +6,8 @@ const line = new Line({ // [!code hl:5] width: 100, rotation: 45, strokeWidth: 5, - stroke: 'rgb(50,205,121)' + stroke: 'rgb(50,205,121)', + dashPattern: [10, 10] // 虚线描边属性 }) leafer.add(line) \ No newline at end of file diff --git a/src/performance/million.html b/src/performance/million.html index d146417..6e1aba6 100644 --- a/src/performance/million.html +++ b/src/performance/million.html @@ -4,7 +4,7 @@ Million Rects | Leafer UI - + diff --git a/src/plugin/editor/buttons.ts b/src/plugin/editor/buttons.ts index 1c664f2..76960d9 100644 --- a/src/plugin/editor/buttons.ts +++ b/src/plugin/editor/buttons.ts @@ -1,5 +1,6 @@ import { App, Rect, Box, PointerEvent } from 'leafer-ui' -import '@leafer-in/editor' +import '@leafer-in/editor' // 导入图形编辑器插件 +import '@leafer-in/viewport' // 导入视口插件(可选) const app = new App({ // [!code hl:4] view: window, diff --git a/src/plugin/editor/config/around.ts b/src/plugin/editor/config/around.ts index 834ab28..24bf853 100644 --- a/src/plugin/editor/config/around.ts +++ b/src/plugin/editor/config/around.ts @@ -1,5 +1,6 @@ import { App, Rect } from 'leafer-ui' -import '@leafer-in/editor' +import '@leafer-in/editor' // 导入图形编辑器插件 +import '@leafer-in/viewport' // 导入视口插件(可选) const app = new App({ // [!code hl:4] view: window, diff --git a/src/plugin/editor/config/lockRatio.ts b/src/plugin/editor/config/lockRatio.ts index df66127..560bca0 100644 --- a/src/plugin/editor/config/lockRatio.ts +++ b/src/plugin/editor/config/lockRatio.ts @@ -1,5 +1,6 @@ import { App, Rect } from 'leafer-ui' -import '@leafer-in/editor' +import '@leafer-in/editor' // 导入图形编辑器插件 +import '@leafer-in/viewport' // 导入视口插件(可选) const app = new App({ // [!code hl:4] view: window, diff --git a/src/plugin/editor/config/middle.ts b/src/plugin/editor/config/middle.ts index 509165e..6388602 100644 --- a/src/plugin/editor/config/middle.ts +++ b/src/plugin/editor/config/middle.ts @@ -1,5 +1,6 @@ import { App, Rect } from 'leafer-ui' -import '@leafer-in/editor' +import '@leafer-in/editor' // 导入图形编辑器插件 +import '@leafer-in/viewport' // 导入视口插件(可选) const app = new App({ // [!code hl:7] view: window, diff --git a/src/plugin/editor/config/mobile.ts b/src/plugin/editor/config/mobile.ts index f003e6a..7f6d1b6 100644 --- a/src/plugin/editor/config/mobile.ts +++ b/src/plugin/editor/config/mobile.ts @@ -1,5 +1,6 @@ import { App, Rect } from 'leafer-ui' -import '@leafer-in/editor' +import '@leafer-in/editor' // 导入图形编辑器插件 +import '@leafer-in/viewport' // 导入视口插件(可选) const app = new App({ // [!code hl:7] view: window, diff --git a/src/plugin/editor/config/points.ts b/src/plugin/editor/config/points.ts index 62e0e3e..6a4c715 100644 --- a/src/plugin/editor/config/points.ts +++ b/src/plugin/editor/config/points.ts @@ -1,5 +1,6 @@ import { App, Rect } from 'leafer-ui' -import '@leafer-in/editor' +import '@leafer-in/editor' // 导入图形编辑器插件 +import '@leafer-in/viewport' // 导入视口插件(可选) const app = new App({ // [!code hl:9] view: window, diff --git a/src/plugin/editor/config/rect.ts b/src/plugin/editor/config/rect.ts index 98b09f0..4afe3a1 100644 --- a/src/plugin/editor/config/rect.ts +++ b/src/plugin/editor/config/rect.ts @@ -1,5 +1,6 @@ import { App, Rect } from 'leafer-ui' -import '@leafer-in/editor' +import '@leafer-in/editor' // 导入图形编辑器插件 +import '@leafer-in/viewport' // 导入视口插件(可选) const app = new App({ // [!code hl:4] view: window, diff --git a/src/plugin/editor/config/resizeable.ts b/src/plugin/editor/config/resizeable.ts index b26d3c7..098de49 100644 --- a/src/plugin/editor/config/resizeable.ts +++ b/src/plugin/editor/config/resizeable.ts @@ -1,5 +1,6 @@ import { App, Rect } from 'leafer-ui' -import '@leafer-in/editor' +import '@leafer-in/editor' // 导入图形编辑器插件 +import '@leafer-in/viewport' // 导入视口插件(可选) const app = new App({ // [!code hl:4] view: window, diff --git a/src/plugin/editor/config/rotate-point.ts b/src/plugin/editor/config/rotate-point.ts index 3b6650f..c4c74dc 100644 --- a/src/plugin/editor/config/rotate-point.ts +++ b/src/plugin/editor/config/rotate-point.ts @@ -1,5 +1,6 @@ import { App, Rect } from 'leafer-ui' -import '@leafer-in/editor' +import '@leafer-in/editor' // 导入图形编辑器插件 +import '@leafer-in/viewport' // 导入视口插件(可选) const app = new App({ // [!code hl:4] view: window, diff --git a/src/plugin/editor/config/rotateable.ts b/src/plugin/editor/config/rotateable.ts index 01b1052..84e19f6 100644 --- a/src/plugin/editor/config/rotateable.ts +++ b/src/plugin/editor/config/rotateable.ts @@ -1,5 +1,6 @@ import { App, Rect } from 'leafer-ui' -import '@leafer-in/editor' +import '@leafer-in/editor' // 导入图形编辑器插件 +import '@leafer-in/viewport' // 导入视口插件(可选) const app = new App({ // [!code hl:4] view: window, diff --git a/src/plugin/editor/config/scale.ts b/src/plugin/editor/config/scale.ts index 3f1fa3b..3c88efc 100644 --- a/src/plugin/editor/config/scale.ts +++ b/src/plugin/editor/config/scale.ts @@ -1,5 +1,6 @@ import { App, Text } from 'leafer-ui' -import '@leafer-in/editor' +import '@leafer-in/editor' // 导入图形编辑器插件 +import '@leafer-in/viewport' // 导入视口插件(可选) const app = new App({ // [!code hl:4] view: window, diff --git a/src/plugin/editor/create-mode.js b/src/plugin/editor/create-mode.js index 8487dc8..597cc76 100644 --- a/src/plugin/editor/create-mode.js +++ b/src/plugin/editor/create-mode.js @@ -1,5 +1,6 @@ import { App, DragEvent, Rect } from 'leafer-ui' -import '@leafer-in/editor' +import '@leafer-in/editor' // 导入图形编辑器插件 +import '@leafer-in/viewport' // 导入视口插件(可选) const app = new App({ view: window, editor: {} }) diff --git a/src/plugin/editor/create-mode.ts b/src/plugin/editor/create-mode.ts index 2c4d282..6e3584e 100644 --- a/src/plugin/editor/create-mode.ts +++ b/src/plugin/editor/create-mode.ts @@ -1,5 +1,6 @@ import { App, DragEvent, Rect } from 'leafer-ui' -import '@leafer-in/editor' +import '@leafer-in/editor' // 导入图形编辑器插件 +import '@leafer-in/viewport' // 导入视口插件(可选) const app = new App({ view: window, editor: {} }) diff --git a/src/plugin/editor/editable.ts b/src/plugin/editor/editable.ts index 33c2a5d..186393f 100644 --- a/src/plugin/editor/editable.ts +++ b/src/plugin/editor/editable.ts @@ -1,5 +1,6 @@ import { App, Rect } from 'leafer-ui' -import '@leafer-in/editor' +import '@leafer-in/editor' // 导入图形编辑器插件 +import '@leafer-in/viewport' // 导入视口插件(可选) const app = new App({ view: window, editor: {} }) diff --git a/src/plugin/editor/event/select.js b/src/plugin/editor/event/select.js index 05477ce..f31f210 100644 --- a/src/plugin/editor/event/select.js +++ b/src/plugin/editor/event/select.js @@ -1,5 +1,6 @@ import { App, Rect } from 'leafer-ui' import { EditorEvent } from '@leafer-in/editor' +import '@leafer-in/viewport' // 导入视口插件(可选) const app = new App({ view: window, diff --git a/src/plugin/editor/event/select.ts b/src/plugin/editor/event/select.ts index 0d8aec0..e00e8fa 100644 --- a/src/plugin/editor/event/select.ts +++ b/src/plugin/editor/event/select.ts @@ -1,5 +1,6 @@ import { App, Rect } from 'leafer-ui' import { EditorEvent } from '@leafer-in/editor' +import '@leafer-in/viewport' // 导入视口插件(可选) const app = new App({ view: window, diff --git a/src/plugin/editor/frame/editor.ts b/src/plugin/editor/frame/editor.ts new file mode 100644 index 0000000..3be7d10 --- /dev/null +++ b/src/plugin/editor/frame/editor.ts @@ -0,0 +1,16 @@ +import { App, Frame, Rect } from 'leafer-ui' +import '@leafer-in/editor' // 导入图形编辑器插件 +import '@leafer-in/viewport' // 导入视口插件(可选) + +const app = new App({ // [!code hl:5] + view: window, + fill: '#F2F2F2', + editor: {}, // 配置 editor 会自动创建并添加 app.editor 实例、tree 层、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)) \ No newline at end of file diff --git a/src/plugin/editor/frame/index.ts b/src/plugin/editor/frame/index.ts new file mode 100644 index 0000000..eaeb4f6 --- /dev/null +++ b/src/plugin/editor/frame/index.ts @@ -0,0 +1,19 @@ +import { App, Frame, Rect } from 'leafer-ui' +import { Editor } from '@leafer-in/editor' // 导入图形编辑器插件 +import '@leafer-in/viewport' // 导入视口插件(可选) + +const app = new App({ // [!code hl:6] + 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()) // 添加图形编辑器，用于选中元素进行编辑操作 [!code hl] \ No newline at end of file diff --git a/src/plugin/editor/frame/origin.ts b/src/plugin/editor/frame/origin.ts new file mode 100644 index 0000000..3240f9c --- /dev/null +++ b/src/plugin/editor/frame/origin.ts @@ -0,0 +1,17 @@ +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' }) // [!code hl:4] + +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()) // 添加图形编辑器，用于选中元素进行编辑操作 [!code hl] \ No newline at end of file diff --git a/src/plugin/editor/frame/simple.ts b/src/plugin/editor/frame/simple.ts new file mode 100644 index 0000000..ea21cad --- /dev/null +++ b/src/plugin/editor/frame/simple.ts @@ -0,0 +1,20 @@ +import { App, Frame, Rect } from 'leafer-ui' +import '@leafer-in/editor' // 导入图形编辑器插件 +import '@leafer-in/viewport' // 导入视口插件(可选) + +const app = new App({ // [!code hl:7] + 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()) // 添加图形编辑器，用于选中元素进行编辑操作 [!code hl] diff --git a/src/plugin/editor/full.ts b/src/plugin/editor/full.ts index 0c3009d..f6ce19d 100644 --- a/src/plugin/editor/full.ts +++ b/src/plugin/editor/full.ts @@ -1,13 +1,13 @@ import { App, Rect } from 'leafer-ui' import { Editor } from '@leafer-in/editor' // 导入图形编辑器插件 +import '@leafer-in/viewport' // 导入视口插件(可选) const app = new App({ view: window }) // [!code hl:7] -app.tree = app.addLeafer() -app.sky = app.addLeafer({ type: 'draw', usePartRender: false }) - -app.editor = new Editor() -app.sky.add(app.editor) +app.tree = app.addLeafer({ type: 'design' }) // 添加 tree 层 +app.sky = app.addLeafer() // 添加 sky 层 app.tree.add(Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 100, 100)) -app.tree.add(Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 300, 100)) \ No newline at end of file +app.tree.add(Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 300, 100)) + +app.sky.add(app.editor = new Editor()) // 添加图形编辑器，用于选中元素进行编辑操作 [!code hl:7] \ No newline at end of file diff --git a/src/plugin/editor/resize/scale.ts b/src/plugin/editor/resize/scale.ts index 3e32350..0365a87 100644 --- a/src/plugin/editor/resize/scale.ts +++ b/src/plugin/editor/resize/scale.ts @@ -1,5 +1,6 @@ import { App, Rect } from 'leafer-ui' -import '@leafer-in/editor' +import '@leafer-in/editor' // 导入图形编辑器插件 +import '@leafer-in/viewport' // 导入视口插件(可选) const app = new App({ view: window, editor: {} }) diff --git a/src/plugin/editor/rotate.ts b/src/plugin/editor/rotate.ts index 9966da3..0bc721c 100644 --- a/src/plugin/editor/rotate.ts +++ b/src/plugin/editor/rotate.ts @@ -1,5 +1,6 @@ import { App, Rect } from 'leafer-ui' -import '@leafer-in/editor' +import '@leafer-in/editor' // 导入图形编辑器插件 +import '@leafer-in/viewport' // 导入视口插件(可选) const app = new App({ view: window, editor: {} }) diff --git a/src/plugin/editor/start.ts b/src/plugin/editor/start.ts index 5c98e08..dc13c05 100644 --- a/src/plugin/editor/start.ts +++ b/src/plugin/editor/start.ts @@ -1,9 +1,10 @@ import { App, Rect } from 'leafer-ui' import '@leafer-in/editor' // 导入图形编辑器插件 +import '@leafer-in/viewport' // 导入视口插件(可选) const app = new App({ // [!code hl:4] view: window, - editor: {} // 会自动创建 editor实例、tree层、sky层 + editor: {} // 配置 editor 会自动创建并添加 app.editor 实例、tree 层、sky 层 }) app.tree.add(Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 100, 100)) diff --git a/src/plugin/flow/flow.ts b/src/plugin/flow/flow.ts index 170bd5d..fb8e6f7 100644 --- a/src/plugin/flow/flow.ts +++ b/src/plugin/flow/flow.ts @@ -1,13 +1,23 @@ import { Leafer, Rect, Star, Ellipse } from 'leafer-ui' -import { Flow } from '@leafer-in/flow' +import { Flow } from '@leafer-in/flow' // [!code hl] const leafer = new Leafer({ view: window }) -const flow = new Flow({ flow: 'x', gap: { x: 'auto', y: 20 }, fill: 'gray', flowAlign: { content: 'top', x: 'from' }, flowWrap: true, x: 100, y: 100, width: 260, height: 260 }) +const flow = new Flow({ + flow: 'y', // [!code hl:4] + gap: { x: 'auto', y: 20 }, + flowAlign: { content: 'top', x: 'from' }, + flowWrap: true, + x: 100, + y: 100, + width: 260, + height: 260, + fill: 'gray' +}) const rect = new Rect({ fill: 'red' }) const star = new Star({ fill: 'green', x: 800, height: 100 }) const ellipse = new Ellipse({ fill: 'blue' }) -flow.addMany(rect, star, ellipse) +flow.add([rect, star, ellipse]) leafer.add(flow) \ No newline at end of file diff --git a/src/plugin/view/zoom/fit-center.ts b/src/plugin/view/zoom/fit-center.ts new file mode 100644 index 0000000..30d628d --- /dev/null +++ b/src/plugin/view/zoom/fit-center.ts @@ -0,0 +1,14 @@ +import { App, Rect } from 'leafer-ui' +import '@leafer-in/editor' +import '@leafer-in/view' + +const app = new App({ view: window, editor: {} }) + +app.tree.add(Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 500, 400)) +app.tree.add(Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 650, 400)) + +setTimeout(() => { + + app.tree.zoom('fit', 0, true) // [!code hl:1] + +}, 1000) diff --git a/src/property/custom/addAttr-datatype.ts b/src/property/custom/addAttr-datatype.ts index 81d1a0c..57b8215 100644 --- a/src/property/custom/addAttr-datatype.ts +++ b/src/property/custom/addAttr-datatype.ts @@ -2,7 +2,7 @@ import { Leafer, Text, dataType } from 'leafer-ui' const leafer = new Leafer({ view: window }) -Text.addAttr('version', '1.1.0', dataType) // [!code hl] +Text.addAttr('version', '1.2.0', dataType) // [!code hl] // default version @@ -10,10 +10,10 @@ const text = new Text({ text: 'Welcome to LeaferJS' }) leafer.add(text) -console.log((text as any).version) // 1.1.0 +console.log((text as any).version) // 1.2.0 // set version -const text2 = new Text({ version: '1.1.0' } as any) +const text2 = new Text({ version: '1.2.0' } as any) -console.log((text2 as any).version) // 1.1.0 \ No newline at end of file +console.log((text2 as any).version) // 1.2.0 \ No newline at end of file diff --git a/src/start/create.html b/src/start/create.html index b769f24..0da6225 100644 --- a/src/start/create.html +++ b/src/start/create.html @@ -4,7 +4,7 @@ Demo | Leafer UI - +