场景编辑器

之

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('对齐组件');
    }
});