场景编辑器

workspace设计讲解

小鱼二
2016年09月

设计理念

  • 依赖组件库
  • 全指令 --> 插件化
    • 方便生成多编辑器
  • 数据驱动
  • 代码可读 > 性能 (核心部分优化)
  • service
    • 简易统一的 API
    • 职责单一; 少依赖
    • 可复用
      • (resource, image, shape, music)
  • 辅助方法简化逻辑

功能边界

  • 页面渲染, 切页
  • 选择组件
  • 组件拖动
  • 组件缩放
  • 组件旋转
  • 单击选中
  • 双击编辑
  • 组件设置
    • 样式
    • 动画
    • 触发
  • 右击菜单
    • 组件层级 ....
    • 复制 粘贴组件动画
    • 复制 粘贴组件
  • 历史记录
  • 键盘事件
    • 全选 复制 粘贴
    • 回退 撤销 删除 ...
  • 参考线
    • 吸附 
    • 参考网格
  • 多组件设置
    • 组件对齐
    • 复制 粘贴
    • 层级 ...
  • 手机框
  • 边界检测
<eqx-loading></eqx-loading>
<div class="create-bg ng-scope"
     style="position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: #d0cfd8;"></div>
<eqx-notification></eqx-notification>
<eqx-head></eqx-head>
<div class="create_scene">
    <div class="main clearfix">
        <div class="content">
            <eqx-template-panel></eqx-template-panel>
            <eqx-workspace></eqx-workspace>
            <eqx-page-manager></eqx-page-manager>
        </div>
    </div>
    <eqx-scene-setting ng-if="showSceneSetting()"></eqx-scene-setting>
</div>
<eqx-feedback></eqx-feedback>
<div class="workspace"
     eqx-context-menu-trigger
     eqx-page-scroll
     eqx-select-box
     eqx-keymap>
    <div class="scaleTips">100%</div>
    <div class="container">
        <eqx-ws-phone eqx-page="vm.eqxPage" ng-if="vm.showPhone"></eqx-ws-phone>
        <div id="nr" class="nr sortable"></div>
        <eqx-ws-outbox eqx-page="vm.eqxPage"
                       ng-show="!vm.showPhone"></eqx-ws-outbox>
        <eqx-ws-tool></eqx-ws-tool>
    </div>
    <eqx-assist-lines></eqx-assist-lines>
    <eqx-context-menu></eqx-context-menu>
</div>
<eqx-comp-setting panel-draggable disable-context-menu></eqx-comp-setting>
<eqx-multi-select-panel panel-draggable disable-context-menu></eqx-multi-select-panel>

workspace.directive

  • 调度者, 不参与复杂逻辑
  • 负责切页逻辑
  • 负责历史记录增加
  • 负责 DOM 的 $compile
    • 给 DOM 增加逻辑
    • 延迟到最后
// 增加组件
$scope.$on('wsComp.add', (e, ...comps) => {

    selectService.removeAll();
    angularify(...comps);
    $timeout(() => selectService.add(...comps), 0);

    var len = comps.length;
    if (len) {
        addPageHistory(`增加${len}个组件`);
    }
});

// 全选
$scope.$on('keymap.selectAll', () => {
    selectService.add(..._eqxPage.eqxCompList);
});

// 对齐组件
$scope.$on('align', (e, ...comps) => {

    var len = comps.length;

    if (len) {
        comps.forEach((comp) => {
            var {$rect1, $rect2} = comp;
            var left = $rect2.p1.x - $rect1.p1.x;
            var top = $rect2.p1.y - $rect1.p1.y;
            comp.updatePos(left, top);
        });

        addPageHistory('对齐组件');
    }
});

workspace

By xy2

workspace

易企秀 H5编辑器 工作区设计

  • 1,825