删除交互插件destroy接口
调整绘图应用example布局页面及resize处理
This commit is contained in:
parent
8d4d760fce
commit
8b86abf994
@ -17,7 +17,7 @@ viewport 使用的 github 开源的 pixi-viewport[pixi-viewport](https://github.
|
||||
- 菜单事件及处理，功能：菜单更新、菜单项显隐控制、菜单执行前后事件回调
|
||||
- 打包
|
||||
- 添加拖拽轨迹限制功能
|
||||
- 添加图形对象 可编辑属性 定义功能
|
||||
- 添加图形对象"可编辑属性"定义功能
|
||||
|
||||
# pixijs 一些概念
|
||||
|
||||
|
||||
@ -378,10 +378,10 @@ export class GraphicApp extends EventEmitter<GraphicAppEvents> {
|
||||
this.interactiveTypeOptions = { interactiveGraphicTypeIncludes: [] };
|
||||
// 创建pixi渲染app
|
||||
this.app = new Application({
|
||||
width: dom.clientWidth,
|
||||
height: dom.clientHeight,
|
||||
// width: dom.clientWidth,
|
||||
// height: dom.clientHeight,
|
||||
antialias: true,
|
||||
resizeTo: window,
|
||||
resizeTo: dom,
|
||||
});
|
||||
dom.appendChild(this.app.view as unknown as Node);
|
||||
|
||||
@ -443,7 +443,9 @@ export class GraphicApp extends EventEmitter<GraphicAppEvents> {
|
||||
// 图形变换插件
|
||||
GraphicTransformPlugin.new(this).resume();
|
||||
|
||||
// 动画控制
|
||||
this.app.ticker.add((dt: number) => {
|
||||
// 暂时遍历所有图形对象，TODO:后需改完只处理有动画的对象
|
||||
this.queryStore.getAllGraphics().forEach((g) => {
|
||||
g.animationMap.forEach((animation) => {
|
||||
if (animation.running) {
|
||||
@ -899,7 +901,7 @@ export class GraphicApp extends EventEmitter<GraphicAppEvents> {
|
||||
}
|
||||
}
|
||||
this.interactionPluginMap.forEach((plugin) => {
|
||||
plugin.destroy();
|
||||
plugin.pause();
|
||||
});
|
||||
this.canvas.destroy(true);
|
||||
this.viewport.destroy();
|
||||
|
||||
@ -33,10 +33,6 @@ export interface InteractionPlugin {
|
||||
* 是否生效
|
||||
*/
|
||||
isActive(): boolean;
|
||||
/**
|
||||
* 关闭绑定的交互事件，清理插件相关数据(如需要),从app中移除
|
||||
*/
|
||||
destroy(): void;
|
||||
}
|
||||
|
||||
export abstract class BaseInteractionPlugin implements InteractionPlugin {
|
||||
@ -76,13 +72,6 @@ export abstract class BaseInteractionPlugin implements InteractionPlugin {
|
||||
isActive(): boolean {
|
||||
return !this._pause;
|
||||
}
|
||||
/**
|
||||
* 关闭绑定的交互事件，清理插件相关数据(如需要),从app中移除
|
||||
*/
|
||||
destroy(): void {
|
||||
this.pause();
|
||||
this.app.removeInteractionPlugin(this);
|
||||
}
|
||||
}
|
||||
|
||||
export class AppDragEvent {
|
||||
@ -457,9 +446,4 @@ export abstract class GraphicInteractionPlugin<G extends JlGraphic>
|
||||
* @param g 图形对象
|
||||
*/
|
||||
abstract unbind(g: G): void;
|
||||
|
||||
destroy(): void {
|
||||
this.pause();
|
||||
this.app.removeInteractionPlugin(this);
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,14 +13,119 @@
|
||||
|
||||
<q-btn dense flat round icon="menu" @click="toggleRightDrawer" />
|
||||
</q-toolbar>
|
||||
<q-resize-observer @resize="onHeaderResize" />
|
||||
</q-header>
|
||||
|
||||
<q-drawer v-model="leftDrawerOpen" side="left" overlay>
|
||||
<q-drawer v-model="leftDrawerOpen" bordered side="left">
|
||||
<q-resize-observer @resize="onLeftResize" />
|
||||
<!-- drawer content -->
|
||||
<q-list bordered padding class="rounded-borders text-primary">
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="link === 'inbox'"
|
||||
@click="link = 'inbox'"
|
||||
active-class="my-menu-link"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="inbox" />
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>Inbox</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="link === 'outbox'"
|
||||
@click="link = 'outbox'"
|
||||
active-class="my-menu-link"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="send" />
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>Outbox</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="link === 'trash'"
|
||||
@click="link = 'trash'"
|
||||
active-class="my-menu-link"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="delete" />
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>Trash</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-separator spaced />
|
||||
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="link === 'settings'"
|
||||
@click="link = 'settings'"
|
||||
active-class="my-menu-link"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="settings" />
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>Settings</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="link === 'help'"
|
||||
@click="link = 'help'"
|
||||
active-class="my-menu-link"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="help" />
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>Help</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-drawer>
|
||||
|
||||
<q-drawer show-if-above v-model="rightDrawerOpen" side="right">
|
||||
<q-drawer show-if-above bordered v-model="rightDrawerOpen" side="right">
|
||||
<q-resize-observer @resize="onRightResize" />
|
||||
<!-- drawer content -->
|
||||
<q-list bordered padding class="rounded-borders text-primary">
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="link === 'inbox'"
|
||||
@click="link = 'inbox'"
|
||||
active-class="my-menu-link"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="inbox" />
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>Inbox</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:active="link === 'outbox'"
|
||||
@click="link = 'outbox'"
|
||||
active-class="my-menu-link"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="send" />
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>Outbox</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-drawer>
|
||||
|
||||
<q-page-container>
|
||||
@ -30,21 +135,23 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Point } from 'pixi.js';
|
||||
import { initDrawApp, loadDrawDatas } from 'src/examples/app';
|
||||
import { Link } from 'src/graphics/link/Link';
|
||||
import { GraphicIdGenerator, JlDrawApp } from 'src/jlgraphic';
|
||||
import { JlDrawApp } from 'src/jlgraphic';
|
||||
import { onMounted, onUnmounted, ref } from 'vue';
|
||||
|
||||
const leftDrawerOpen = ref(false);
|
||||
const rightDrawerOpen = ref(false);
|
||||
function toggleLeftDrawer() {
|
||||
leftDrawerOpen.value = !leftDrawerOpen.value;
|
||||
onResize();
|
||||
}
|
||||
function toggleRightDrawer() {
|
||||
rightDrawerOpen.value = !rightDrawerOpen.value;
|
||||
onResize();
|
||||
}
|
||||
|
||||
const link = ref('outbox');
|
||||
|
||||
let drawApp: JlDrawApp | null = null;
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('draw-app-container');
|
||||
@ -52,13 +159,43 @@ onMounted(() => {
|
||||
drawApp = new JlDrawApp(dom);
|
||||
initDrawApp(drawApp);
|
||||
loadDrawDatas(drawApp);
|
||||
window.addEventListener('resize', onResize);
|
||||
}
|
||||
});
|
||||
|
||||
const canvasWidth = ref(0);
|
||||
const canvasHeight = ref(0);
|
||||
const headerHeight = ref(0);
|
||||
const leftWidth = ref(0);
|
||||
const rightWidth = ref(0);
|
||||
|
||||
function onHeaderResize(size: { height: number; width: number }) {
|
||||
headerHeight.value = size.height;
|
||||
onResize();
|
||||
}
|
||||
function onLeftResize(size: { height: number; width: number }) {
|
||||
leftWidth.value = size.width;
|
||||
onResize();
|
||||
}
|
||||
function onRightResize(size: { height: number; width: number }) {
|
||||
rightWidth.value = size.width;
|
||||
onResize();
|
||||
}
|
||||
|
||||
function onResize() {
|
||||
const clientWidth = document.body.clientWidth;
|
||||
const clientHeight = document.body.clientHeight;
|
||||
canvasWidth.value =
|
||||
clientWidth -
|
||||
(leftDrawerOpen.value ? leftWidth.value : 0) -
|
||||
(rightDrawerOpen.value ? rightWidth.value : 0);
|
||||
canvasHeight.value = clientHeight - headerHeight.value;
|
||||
const dom = document.getElementById('draw-app-container');
|
||||
if (dom) {
|
||||
dom.style.width = canvasWidth.value + 'px';
|
||||
dom.style.height = canvasHeight.value + 'px';
|
||||
}
|
||||
if (drawApp) {
|
||||
drawApp.onDomResize(document.body.clientWidth, document.body.clientHeight);
|
||||
drawApp.onDomResize(canvasWidth.value, canvasHeight.value);
|
||||
}
|
||||
}
|
||||
|
||||
@ -66,6 +203,5 @@ onUnmounted(() => {
|
||||
if (drawApp) {
|
||||
drawApp.destroy();
|
||||
}
|
||||
window.removeEventListener('resize', onResize);
|
||||
});
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user