想做一个简单的页面编辑器结果全是BUG 🐛

预览地址 Vue Material Admin (vue-material-admin-alpha.vercel.app) 全部源码在文章最后

界面设计

打开墨刀、MasterGo开始抄

• 左边页面管理和图层管理
• 中间工作区
• 工作区左边这几个图标：可以点击拖拽对象到工作区
• 工作区下面这排：用来选择画矩形或者添加图标或者别的操作
• 右边样式设计

JSON模型设计

export interface VirtualDom {
    id: number;
    groupId: number; // 所属组合ID
    virtualGroup?: boolean; // 虚拟组 如果是虚拟组
    name: string;
    icon: string; // 统一用Vuetify mdi-xxxx这套
    label?: string; // 展示文本 或者title用
    type: 0 | 1 | 2 | 3 | 4 | 5 | 6; // 0组合，1矩形，2圆形，3文本，4图片，5视频
    url?: string; // 图片或者资源链接
    active: boolean; // 进行拖变大小状态
    selected: boolean; // 选中状态
    locked: boolean; // 锁定状态
    visible: boolean;
    input?: boolean; // 文本特有的编辑文本中状态
    styles: ElementStyles;
    fontStyle?: FontStyle;
    component?: DefineComponent; // 内组件
}

// 基础框框
export interface ElementStyles extends Shadow {
    width: number;
    height: number;
    left: number;
    top: number;
    opacity: number;
    rotate: number;
    radius: number;
    fill: boolean;
    imgFit?: 'fill' | 'none' | 'contain' | 'cover' | 'scale-down' | undefined;
    background: string;
    border: boolean;
    borderWidth: string;
    borderStyle: 'solid' | 'dashed' | 'dotted';
    borderColor: string;
}

// 文本
export interface FontStyle extends Shadow {
    color: string;
    fontSize: number;
    fontFamily: string;
    fontWeight: 'bold' | 'bolder' | 'normal' | 'lighter' | 'bolder';
    textAlign: 'center' | 'left' | 'right' | 'justify' | 'start' | 'end';
    decoration: 'none' | 'overline' | 'line-through' | 'underline';
    lineHeight: number;
}
interface Shadow {
    shadow: boolean;
    shadowX: number;
    shadowY: number;
    shadowBlur: number;
    shadowSpread: number; // 文本不可用
    shadowColor: string;
}

模块设计

oreo-editor
├─—— hooks
│   ├─ icon.ts 图标库所有类名
│   ├─ useAlign.ts 对象对齐模块
│   ├─ uselcon.ts 添加图标模块
│   ├─ useMouseMenu.ts 右键菜单模块
│   ├─ useOreoApp.ts 主应用于 所有模块都解构到这里
│   ├─ usePointer.ts 鼠标事件模块
│   ├─ useRuler.ts 画尺子用的
│   ├─ useSnapLine.ts 对齐线
│   ├─ useTextInput.ts 文字输入
│   └─ useUndoRedo.ts 撤销重做
├─—— styles 样式
└─—— widgets
│   ├─ charts 
│   ├─ BasicWidget.vue
│   ├─ ustomize.vue
│   ├─ LayerTree.vue
│   ├─ MouseMenu.vue
│   └─ Resizeble.vue 
└─——— index.vue 主应用入口

开始肝

开始肝。。。按上面的设计思路，我们应该还有很多模块的，比如添加矩形、圆形、添加图片、添加组合、添加文字等的，但是自己写着写着就没分了，要么都写在 useOreoApp 上 要么就写在 usePointer 上😓

很多天以后 继续肝。。。。

// oreo-editor/index.vue
<template>
    ....省略
    <Customize :data="oreoApp.curDom.value" :align="oreoApp.align" />
    ....省略
</template>
<script lang="ts" setup>
import './styles/index.scss';
import BasicWidget from './widgets/BasicWidget.vue';
import Customize from './widgets/Customize.vue';
import LayerTree from './widgets/LayerTree.vue';
import Resizeble from './widgets/Resizeble.vue';
import MouseMenu from './widgets/MouseMenu.vue';
import JsonViewer from 'vue-json-viewer';
import useOreoApp from './hooks/useOreoApp';

const oreoApp = useOreoApp();</script>


// oreo-editor/hook/useOreoApp.ts
import { ref, computed, type DefineComponent } from 'vue';

import { useRuler } from './useRuler';
import { useAlign } from './useAlign';
import { usePointer } from './usePointer';
import { useMouseMenu } from './useMouseMenu';
import { useIcon } from './useIcon';
import { useTextInput } from './useTextInput';
import { useSnapLine } from './useSnapLine';
const OreoApp = () => {    
const appDom = ref<VirtualDom[]>([]);
   // .....省略 
    // 把所有模块都解构到主程序供组件调用   
    return {        
        ...省略        
        ...snapLineEvent,        
        align,        
        ...pointerEvent,        
        ...rulerBar,        
        ...mouseMenu,        
        ...iconEvent,        
        ...inputEvent,    
    };
};
export default OreoApp;

看看效果

这个对齐怎么回事

这个添加图标又是怎么回事

怎么这么多BUG 😡😡😡

发现还有好多东西没弄好！又想用pixijs重写，好像这玩意儿又没啥用，感觉肝不下去了～～

源码地址

github.com/armomu/oreo…