wok-ui-ext 0.1.0

package/dist/tree/index.js

@@ -0,0 +1,385 @@
+import { FullRenderingModule } from 'wok-ui';
+import { getWokUiExtI18n } from '../i18n';
+import { hideLoading, showLoading } from '../loading';
+import { showWarning } from '../toast';
+import { DraggingImg } from './dragging-img';
+import { Node } from './node';
+import './style.css';
+/**
+ * 树
+ */
+export class Tree extends FullRenderingModule {
+    constructor(opts) {
+        super(document.createElement('ul'));
+        this.opts = opts;
+        /**
+         * 已选id列表
+         */
+        this.selectedIds = [];
+        /**
+         * 事件处理器
+         */
+        this.eventHandler = {};
+        this.el.classList.add('wok-ui-ext-tree');
+        this.data = [...opts.data];
+        this.selectedIds = opts.selectedIds ? [...opts.selectedIds] : [];
+        this.render();
+    }
+    buildContent() {
+        // 创建根节点
+        this.data.forEach((item, idx) => this.addChild(new Node({
+            level: 1,
+            buildTitleModule: this.opts.buildTitleModule,
+            maxLevel: this.opts.maxLevel && this.opts.maxLevel > 0 ? this.opts.maxLevel : 10,
+            data: item,
+            hasNextSibling: idx < this.data.length - 1,
+            isLast: idx === this.data.length - 1,
+            enableMove: this.opts.enableMove,
+            selectedIds: this.selectedIds,
+            onDragStart: (node, coord) => this.handleDragStart(node, coord),
+            selectHook: id => this.handleSelect(id),
+            unSelectHook: id => {
+                const idx = this.selectedIds.indexOf(id);
+                if (idx !== -1) {
+                    this.selectedIds.splice(idx, 1);
+                    this.triggerSelectChange();
+                }
+                return true;
+            },
+            // 折叠与否也会触发数据变化，折叠标识是数据的一部分
+            onFold: () => this.triggerChange(),
+            onUnfold: () => this.triggerChange(),
+            buildActions: this.opts.buildActions
+        })));
+    }
+    triggerChange() {
+        if (this.opts.onChange) {
+            this.opts.onChange(this.data);
+        }
+    }
+    triggerSelectChange() {
+        if (this.opts.onSelectChange) {
+            const res = this.find(m => m instanceof Node)
+                .filter(n => this.selectedIds.includes(n.data.id))
+                .map(n => Object.assign({}, n.data, { level: n.level }));
+            this.opts.onSelectChange(res);
+        }
+    }
+    handleSelect(id) {
+        const maxSelected = typeof this.opts.maxSelected === 'number' && this.opts.maxSelected > 0
+            ? this.opts.maxSelected
+            : 1;
+        if (maxSelected === 1) {
+            this.find(m => m instanceof Node).forEach(node => {
+                if (node.data.id !== id) {
+                    node.unSelect();
+                }
+            });
+            // 不要改变 selectedIds 的引用，节点和这里共用一个对象
+            this.selectedIds.splice(0, this.selectedIds.length);
+            this.selectedIds.push(id);
+            this.triggerSelectChange();
+            return true;
+        }
+        if (this.selectedIds.length >= maxSelected) {
+            showWarning(getWokUiExtI18n().buildMsg('tree-max-selected', `${maxSelected}`));
+            return false;
+        }
+        if (!this.selectedIds.includes(id)) {
+            this.selectedIds.push(id);
+            this.triggerSelectChange();
+        }
+        return true;
+    }
+    /**
+     * 对节点取消选择
+     * @param id 节点数据的 id
+     * @returns
+     */
+    unselectNode(id) {
+        if (!this.selectedIds.length) {
+            return;
+        }
+        const idx = this.selectedIds.indexOf(id);
+        if (idx === -1) {
+            return;
+        }
+        this.selectedIds.splice(idx, 1);
+        this.find(m => m instanceof Node && m.data.id === id).forEach(node => node.unSelect());
+        this.triggerSelectChange();
+    }
+    /**
+     * 处理拖动开始事件，生成拖动图标
+     * @param sourceNode  被拖动的原始节点
+     * @param coord  事件坐标
+     */
+    handleDragStart(sourceNode, coord) {
+        // 更改状态，添加拖动图标
+        this.el.classList.add('wok-ui-ext-dragging');
+        if (!this.draggingImg) {
+            this.draggingImg = new DraggingImg(sourceNode.data.title);
+            this.draggingImg.updateCoord(coord.x, coord.y);
+            this.addChild(this.draggingImg);
+        }
+        // 构建事件处理
+        this.eventHandler.dragEnd = ev => {
+            ev.preventDefault();
+            if (ev.type === 'mouseout') {
+                if (ev.target !== document.body) {
+                    return;
+                }
+            }
+            this.el.classList.remove('wok-ui-ext-dragging');
+            if (this.draggingImg) {
+                this.draggingImg.destroy();
+                this.draggingImg = undefined;
+            }
+            Promise.resolve()
+                .then(async () => {
+                // 目标
+                if (!this.dragTarget) {
+                    return;
+                }
+                showLoading();
+                try {
+                    if (this.opts.moveHook) {
+                        await this.opts.moveHook(sourceNode.data, this.dragTarget.node.data, this.dragTarget.placement);
+                    }
+                }
+                finally {
+                    hideLoading();
+                }
+                // 调整成功，更改元素位置
+                this.moveNode(sourceNode.data.id, this.dragTarget.node.data.id, this.dragTarget.placement);
+            })
+                .catch(showWarning)
+                .finally(() => {
+                this.dragTarget = undefined;
+                this.unbindEvents();
+            });
+        };
+        document.body.addEventListener('mouseup', this.eventHandler.dragEnd);
+        document.body.addEventListener('mouseout', this.eventHandler.dragEnd);
+        document.body.addEventListener('touchend', this.eventHandler.dragEnd);
+        document.body.addEventListener('touchcancel', this.eventHandler.dragEnd);
+        // 获取当前可见的节点，在拖动过程中节点的可见性不会改变
+        // 只让可见的节点在拖动过程中发生变化，进行响应，节省开销
+        // 如果轮询所有节点，节点一多就会卡顿
+        const visiblesNodes = this.getVisibleNodes();
+        // 为了兼容，改由容器来处理悬浮的事件，判定指针或触控点是否被条目包含
+        // 移动端的 touchemove 无法通过 touch-action 来跳过层级在前的元素
+        // 总是被层级在前的元素触发，所以无法让 item 自己完成处理再反馈给上层
+        this.eventHandler.dragOver = ev => {
+            // 非拖动中，不处理
+            if (!this.el.classList.contains('wok-ui-ext-dragging')) {
+                return;
+            }
+            const clientX = ev instanceof TouchEvent ? ev.touches[0].clientX : ev.clientX;
+            const clientY = ev instanceof TouchEvent ? ev.touches[0].clientY : ev.clientY;
+            if (this.draggingImg) {
+                this.draggingImg.updateCoord(clientX, clientY);
+            }
+            this.dragTarget = undefined;
+            visiblesNodes.forEach(node => {
+                const res = node.handleDragOverAndReact(sourceNode.data, clientX, clientY);
+                if (res) {
+                    this.dragTarget = {
+                        node: node,
+                        placement: res
+                    };
+                }
+            });
+        };
+        document.body.addEventListener('mousemove', this.eventHandler.dragOver);
+        document.body.addEventListener('touchmove', this.eventHandler.dragOver);
+    }
+    /**
+     * 获取所有当前可见的节点
+     */
+    getVisibleNodes() {
+        const res = [];
+        const rootNodes = this.getChildren()
+            .filter(m => m instanceof Node)
+            .map(m => m);
+        function getDescendantVisibleNodes(node) {
+            const res = [];
+            if (node.data.unfolded) {
+                for (const subNode of node.getSubNodes()) {
+                    res.push(subNode);
+                    res.push(...getDescendantVisibleNodes(subNode));
+                }
+            }
+            return res;
+        }
+        for (const node of rootNodes) {
+            res.push(node);
+            res.push(...getDescendantVisibleNodes(node));
+        }
+        return res;
+    }
+    /**
+     * 移动节点
+     * @param sourceNodeId
+     * @param targetNodeId
+     * @param placement
+     */
+    moveNode(sourceNodeId, targetNodeId, placement) {
+        const sourceNode = this.getNodeModule(sourceNodeId);
+        const targetNode = this.getNodeModule(targetNodeId);
+        if (!sourceNode || !targetNode) {
+            return;
+        }
+        this.internalDeleteNode(sourceNodeId);
+        if (placement === 'in') {
+            targetNode.addSubNode(sourceNode.data);
+            this.triggerChange();
+            return;
+        }
+        const targetParent = targetNode.getParentNode();
+        if (targetParent) {
+            if (!targetParent.data.children) {
+                return;
+            }
+            const { children } = targetParent.data;
+            const idx = children.findIndex(c => c.id === targetNodeId);
+            switch (placement) {
+                case 'before':
+                    targetParent.insertSubNode(sourceNode.data, idx);
+                    break;
+                case 'after':
+                    targetParent.insertSubNode(sourceNode.data, idx + 1);
+                    break;
+            }
+        }
+        else {
+            const idx = this.data.findIndex(da => da.id === targetNodeId);
+            switch (placement) {
+                case 'before':
+                    this.data.splice(idx, 0, sourceNode.data);
+                    this.render();
+                    break;
+                case 'after':
+                    this.data.splice(idx + 1, 0, sourceNode.data);
+                    this.render();
+                    break;
+            }
+        }
+        this.triggerChange();
+    }
+    /**
+     * 删除一个节点
+     * @param id
+     */
+    deleteNode(id) {
+        const res = this.internalDeleteNode(id);
+        if (!res) {
+            return;
+        }
+        // 如果已选有包含，则触发回调
+        const sIdx = this.selectedIds.indexOf(id);
+        if (sIdx !== -1) {
+            this.selectedIds.splice(sIdx, 1);
+            this.triggerSelectChange();
+        }
+    }
+    /**
+     * 内部的删除方法，仅删除节点数据，不触发任何行为
+     */
+    internalDeleteNode(id) {
+        // 找到节点，然后销毁，同步树中的数据
+        const node = this.getNodeModule(id);
+        if (!node) {
+            return false;
+        }
+        const parent = node.getParentNode();
+        if (parent) {
+            parent.removeSubNode(node.data.id);
+            return true;
+        }
+        else {
+            const idx = this.data.findIndex(da => da.id === id);
+            if (idx !== -1) {
+                this.data.splice(idx, 1);
+                this.triggerChange();
+                this.render();
+                return true;
+            }
+            return false;
+        }
+    }
+    /**
+     * 更新节点
+     * @param data
+     */
+    updateNode(data) {
+        const nodeModule = this.getNodeModule(data.id);
+        if (nodeModule) {
+            nodeModule.updateTitle(data.title);
+            this.triggerChange();
+        }
+    }
+    /**
+     * 添加一个节点
+     */
+    addNode(data, parentId) {
+        if (!parentId) {
+            this.data.push(data);
+            this.render();
+            this.triggerChange();
+            return;
+        }
+        const parent = this.getNodeModule(parentId);
+        if (parent) {
+            parent.addSubNode(data);
+            this.triggerChange();
+        }
+    }
+    getNodeModule(id) {
+        return this.findFirst(m => m instanceof Node && m.data.id === id);
+    }
+    /**
+     * 获取节点信息
+     * @param id 节点id
+     */
+    getNode(id) {
+        const node = this.getNodeModule(id);
+        if (node) {
+            return { ...node.data };
+        }
+        return undefined;
+    }
+    /**
+     * 获取一个节点的父节点信息，如果找不到节点，或者节点是根节点不存在父节点，则返回 undefined
+     * @param id
+     */
+    getParentNode(id) {
+        const node = this.getNodeModule(id);
+        if (node) {
+            const p = node.getParentNode();
+            if (p) {
+                return { ...p.data };
+            }
+        }
+        return undefined;
+    }
+    /**
+     * 解绑事件
+     */
+    unbindEvents() {
+        if (this.eventHandler.dragEnd) {
+            document.body.removeEventListener('mouseup', this.eventHandler.dragEnd);
+            document.body.removeEventListener('mouseover', this.eventHandler.dragEnd);
+            document.body.removeEventListener('touchend', this.eventHandler.dragEnd);
+            document.body.removeEventListener('touchcancel', this.eventHandler.dragEnd);
+            this.eventHandler.dragEnd = undefined;
+        }
+        if (this.eventHandler.dragOver) {
+            this.el.removeEventListener('mousemove', this.eventHandler.dragOver);
+            this.el.removeEventListener('touchmove', this.eventHandler.dragOver);
+        }
+    }
+    destroy() {
+        this.unbindEvents();
+        super.destroy();
+    }
+}

package/dist/tree/node-info.d.ts

@@ -0,0 +1,63 @@
+import { ConvertibleModule, FullRenderingModule } from 'wok-ui';
+import { TreeNodeData } from '.';
+import { ShowContextMenuOpts } from '../context-menu';
+/**
+ * 节点信息模块
+ */
+export declare class NodeInfo<T extends TreeNodeData> extends FullRenderingModule {
+    private opts;
+    private mouseDownTimerId;
+    constructor(opts: {
+        /**
+         * 层级，从 1 开始
+         */
+        level: number;
+        /**
+         * 是否已经达到最大层级，如果是则不支持拖动放入，只能拖动到前面或后面
+         */
+        isMaxLevel: boolean;
+        /**
+         * 数据
+         */
+        data: T;
+        /**
+         * 启动拖动
+         */
+        enableDrag?: boolean;
+        /**
+         * 开始拖动的监听
+         * @param listener
+         */
+        onDragStart: (coord: {
+            x: number;
+            y: number;
+        }) => void;
+        /**
+         * 点击回调
+         * @returns
+         */
+        onClick: () => void;
+        /**
+         * 切换折叠状态回调
+         */
+        onToggleFold: () => void;
+        /**
+         * 构造节点的操作项，如果未定义，或返回的空数组，都不会显示出菜单项
+         */
+        buildActions?: () => ShowContextMenuOpts['menu'];
+        /**
+         * 构造节点的标题模块，默认显示 title 属性文本
+         * @returns
+         */
+        buildTitleModule?: (data: T) => ConvertibleModule;
+    });
+    protected buildContent(): void;
+    /**
+     * 判定是否包含一个指定的坐标，并做出反应
+     * @param pageX
+     * @param pageY
+     * @returns 不包含，或者包含的情况下，是在上部分还是下部分
+     */
+    handleDragOverAndReact(pageX: number, pageY: number): false | 'before' | 'after' | 'in';
+    removeMovingStyle(): void;
+}

package/dist/tree/node-info.js

@@ -0,0 +1,128 @@
+import { FullRenderingModule } from 'wok-ui';
+import { IconFolderOpen, IconFolder, IconLock, IconEllipsisH } from '../icons';
+import { showContextMenu } from '../context-menu';
+/**
+ * 节点信息模块
+ */
+export class NodeInfo extends FullRenderingModule {
+    constructor(opts) {
+        super('wok-ui-ext-node-info');
+        this.opts = opts;
+        // 拖动事件处理
+        this.el.onmousedown = ev => {
+            if (ev.button !== 0)
+                return;
+            ev.preventDefault();
+            ev.stopPropagation();
+            // 为了避免冲突（与点击同时触发），在按下一定时间后才触发拖动
+            this.mouseDownTimerId = setTimeout(() => {
+                this.mouseDownTimerId = undefined;
+                if (opts.enableDrag) {
+                    opts.onDragStart({ x: ev.clientX, y: ev.clientY });
+                }
+            }, 300);
+            this.el.onmouseleave = ev => {
+                if (ev.button !== 0)
+                    return;
+                clearTimeout(this.mouseDownTimerId);
+            };
+            this.el.onmouseup = ev => {
+                if (ev.button !== 0)
+                    return;
+                if (this.mouseDownTimerId) {
+                    clearTimeout(this.mouseDownTimerId);
+                    this.mouseDownTimerId = undefined;
+                    opts.onClick();
+                }
+            };
+        };
+        this.render();
+    }
+    buildContent() {
+        // 折叠图标
+        if (this.opts.data.children && this.opts.data.children.length) {
+            // 折叠图标
+            this.addChild({
+                classNames: 'wok-ui-ext-icon-fold',
+                children: this.opts.data.unfolded ? new IconFolderOpen() : new IconFolder(),
+                events: {
+                    mousedown: e => e.stopPropagation(),
+                    mouseleave: e => e.stopPropagation(),
+                    mouseup: e => e.stopPropagation()
+                },
+                onClick: e => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    this.opts.onToggleFold();
+                }
+            });
+        }
+        // 节点名称
+        this.addChild({
+            classNames: 'wok-ui-ext-node-name',
+            children: this.opts.buildTitleModule?.(this.opts.data) || this.opts.data.title
+        });
+        // 如果全局开启了移动，但是又节点又锁住了，则显示一个锁的图标
+        if (this.opts.enableDrag && this.opts.data.unmoveable) {
+            this.addChild(new IconLock());
+        }
+        // 操作项
+        const menu = this.opts.buildActions?.();
+        if (menu && menu.length) {
+            this.addChild({
+                classNames: 'wok-ui-ext-icon-manage',
+                children: new IconEllipsisH(),
+                events: {
+                    mousedown: e => e.stopPropagation(),
+                    mouseleave: e => e.stopPropagation(),
+                    mouseup: e => e.stopPropagation()
+                },
+                onClick(e) {
+                    e.stopPropagation();
+                    // 弹出操作项
+                    showContextMenu({
+                        menu,
+                        evt: e
+                    });
+                }
+            });
+        }
+    }
+    /**
+     * 判定是否包含一个指定的坐标，并做出反应
+     * @param pageX
+     * @param pageY
+     * @returns 不包含，或者包含的情况下，是在上部分还是下部分
+     */
+    handleDragOverAndReact(pageX, pageY) {
+        this.removeMovingStyle();
+        const rect = this.el.getBoundingClientRect();
+        // 向右偏出 100px 也可以支持，这是为了移动端拖动时，手指拖动到旁边也可以成功
+        if (pageX < rect.x || pageX > rect.x + rect.width + 100) {
+            return false;
+        }
+        const offsetY = pageY - rect.y;
+        if (offsetY < 0 || offsetY > rect.height) {
+            return false;
+        }
+        // 上中下
+        if (offsetY < rect.height / 3) {
+            this.el.classList.add('wok-ui-ext-moving-before');
+            return 'before';
+        }
+        else if (offsetY < (rect.height / 3) * 2) {
+            if (this.opts.isMaxLevel) {
+                return false;
+            }
+            this.el.classList.add('wok-ui-ext-moving-in');
+            return 'in';
+        }
+        else {
+            this.el.classList.add('wok-ui-ext-moving-after');
+            return 'after';
+        }
+    }
+    removeMovingStyle() {
+        this.el.classList.remove('wok-ui-ext-moving-before', 'wok-ui-ext-moving-after', 'wok-ui-ext-moving-in');
+    }
+}

package/dist/tree/node.d.ts

@@ -0,0 +1,132 @@
+import { ConvertibleModule, FullRenderingModule } from 'wok-ui';
+import { ShowContextMenuOpts } from '../context-menu';
+import { TreeNodeData } from '.';
+/**
+ * 节点，包含自身信息以及子节点列表
+ */
+export declare class Node<T extends TreeNodeData> extends FullRenderingModule {
+    private opts;
+    private subNodesEl?;
+    /**
+     * 节点数据，记录基本信息，以及状态信息，随着节点样式的变化一起更新
+     */
+    readonly data: T;
+    readonly level: number;
+    private subNodes;
+    private nodeInfo?;
+    constructor(opts: {
+        /**
+         * 父节点，记录父节点信息目的是为了能更快的查找
+         */
+        parent?: Node<T>;
+        /**
+         * 层级，从 1 开始
+         */
+        level: number;
+        /**
+         * 最大层级
+         */
+        maxLevel: number;
+        /**
+         * 是否有下一个兄弟元素
+         */
+        hasNextSibling: boolean;
+        /**
+         * 是否最后一个
+         */
+        isLast: boolean;
+        /**
+         * 已经 id 列表
+         */
+        selectedIds: string[];
+        /**
+         * 数据
+         */
+        data: T;
+        /**
+         * 启动移动功能，启动后支持拖动节点来改变节点的位置
+         */
+        enableMove?: boolean;
+        /**
+         * 开始拖动的监听
+         * @param listener
+         */
+        onDragStart: (node: Node<T>, coord: {
+            x: number;
+            y: number;
+        }) => void;
+        /**
+         * 选中钩子函数
+         * @returns
+         */
+        selectHook: (id: string) => boolean;
+        /**
+         * 取消选中钩子
+         * @returns
+         */
+        unSelectHook: (id: string) => boolean;
+        /**
+         * 折叠回调
+         * @returns
+         */
+        onFold: (node: Node<T>) => void;
+        /**
+         * 展开回调
+         * @returns
+         */
+        onUnfold: (node: Node<T>) => void;
+        /**
+         * 构造节点的操作项，如果未定义，或返回的空数组，都不会显示出菜单项
+         */
+        buildActions?: (data: T, level: number) => ShowContextMenuOpts['menu'];
+        buildTitleModule?: (data: T) => ConvertibleModule;
+    });
+    private buildInfo;
+    private updateInfo;
+    protected buildContent(): void;
+    /**
+     * 主动取消选中
+     */
+    unSelect(): void;
+    private fold;
+    /**
+     * 展开，为了让子节点元素有动画，必须得指定宽度（auto 高度不会产生动画），宽度需要根据子节点的情况进行计算
+     */
+    private unfold;
+    /**
+     * 更新标题
+     * @param title
+     */
+    updateTitle(title: TreeNodeData['title']): void;
+    /**
+     * 删除子节点
+     * @param subNodeId 子节点ID
+     */
+    removeSubNode(subNodeId: string): void;
+    /**
+     * 添加子节点
+     * @param subNodeData 子节点数据
+     */
+    addSubNode(subNodeData: T): void;
+    /**
+     * 插入子节点，到指定位置
+     * @param subNodeData 子节点数据
+     */
+    insertSubNode(subNodeData: T, targetIdx: number): void;
+    /**
+     * 获取子节点
+     */
+    getSubNodes(): Node<T>[];
+    /**
+     * 获取父节点模块
+     */
+    getParentNode(): Node<T> | undefined;
+    /**
+     * 处理拖动悬浮并反应调整样式
+     * @param sourceNode 源节点，即要移动的节点
+     * @param clientX 横坐标
+     * @param clientY 纵坐标
+     * @returns
+     */
+    handleDragOverAndReact(sourceNode: TreeNodeData, clientX: number, clientY: number): false | 'before' | 'after' | 'in';
+}