@realsee/dnalogel 2.0.0-alpha.33-beta → 2.0.0-alpha.33

package/libs/components/PaintBrush/Controller.js

@@ -1,575 +0,0 @@
-import { queue, execInterval, transformCoords, unTransformCoords, getQuadraticCurvePoint, noop, nextFrame, } from './utils';
-import tween from './tween';
-import { PaintBrushTypeEnum, } from './typings';
-import { Subscribe } from './Subscribe';
-import { uuid } from '../../shared-utils/uuid';
-import PaintBrushStyle from './style';
-export class Controller extends Subscribe {
-    constructor(configs) {
-        super();
-        Object.defineProperty(this, "configs", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "clientWidth", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "clientHeight", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "ready", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "uuid", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: uuid()
-        });
-        Object.defineProperty(this, "tween", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "tweening", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: false
-        });
-        Object.defineProperty(this, "container", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "canvas", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "data", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {}
-        });
-        Object.defineProperty(this, "tempLine", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: {}
-        });
-        this.configs = configs;
-        this.clientWidth = document.body.clientWidth;
-        this.clientHeight = document.body.clientHeight;
-        this.container = this.ifInsertToDOM();
-        this.canvas = {};
-        this.initCtrl();
-    }
-    get color() {
-        return this.configs.currentColor;
-    }
-    get state() {
-        return this.data;
-    }
-    get dpr() {
-        return this.configs.DPR || 1;
-    }
-    ifInsertToDOM() {
-        if (this.container) {
-            return this.container;
-        }
-        if (this.configs.container) {
-            this.configs.container.id = '_gl_paintBrush';
-            this.container = this.configs.container;
-        }
-        else if (!document.getElementById('_gl_paintBrush')) {
-            const container = document.createElement('div');
-            container.id = '_gl_paintBrush';
-            document.body.appendChild(container);
-            this.container = container;
-        }
-        else {
-            this.container = document.getElementById('_gl_paintBrush');
-        }
-        this.container.innerHTML = PaintBrushStyle;
-        return this.container;
-    }
-    /**
-     *
-     * @param className 初始化画板
-     * @returns
-     */
-    initCanvas(className) {
-        const canvas = document.createElement('canvas');
-        canvas.className = className;
-        canvas.width = this.clientWidth;
-        canvas.height = this.clientHeight;
-        const ctx = canvas.getContext('2d');
-        if (!ctx)
-            return;
-        ctx.lineWidth = 5 * this.dpr;
-        ctx.lineCap = 'round';
-        ctx.lineJoin = 'round';
-        this.container.appendChild(canvas);
-        return canvas;
-    }
-    /**
-     * 初始化操作面板
-     * @returns
-     */
-    initCtrl() {
-        const ctrl = document.createElement('div');
-        ctrl.className = '_paintBrush-ctrl';
-        const ctrl_inner = document.createElement('div');
-        ctrl_inner.className = '_paintBrush-ctrlinner';
-        const a_undo = document.createElement('a');
-        a_undo.className = '_paintBrush-ctrlitem _paintBrush-ctrlitem--undo';
-        a_undo.addEventListener('click', (e) => {
-            var _a;
-            e.stopPropagation();
-            // 点击撤回：供埋点使用
-            if (this.configs.onClickUndo) {
-                this.configs.onClickUndo();
-            }
-            if (!this.canvas[this.uuid] || !this.data[this.uuid] || this.data[this.uuid].length === 0) {
-                return;
-            }
-            const popState = this.data[this.uuid].pop();
-            if (popState) {
-                this.emitStateChange({
-                    type: PaintBrushTypeEnum.Undo,
-                    color: this.color,
-                    ready: this.ready,
-                    state: popState,
-                    uuid: this.uuid,
-                });
-            }
-            const $ctx = (_a = this.canvas[this.uuid]) === null || _a === void 0 ? void 0 : _a.getContext('2d');
-            if (!this.canvas[this.uuid]) {
-                return;
-            }
-            const { width, height } = this.canvas[this.uuid];
-            if ($ctx) {
-                $ctx.clearRect(0, 0, width, height);
-            }
-            this.data[this.uuid].forEach((ld) => this.handleDrawLine(this.uuid, ld, { withUndo: true }));
-        });
-        const a_close = document.createElement('a');
-        a_close.className = '_paintBrush-ctrlitem _paintBrush-ctrlitem--close';
-        a_close.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.closeBrush();
-            // 点击关闭：供埋点使用
-            if (this.configs.onClickClose) {
-                this.configs.onClickClose();
-            }
-        });
-        const $A = [a_undo, a_close];
-        $A.forEach(($a) => {
-            const $i = document.createElement('i');
-            $i.className = 'brush-icon';
-            const $span = document.createElement('span');
-            $span.className = 'brush-txt';
-            $span.innerText = $a.className.endsWith('undo') ? this.configs.onUndoText : this.configs.onExitText;
-            $a.appendChild($i);
-            $a.appendChild($span);
-        });
-        ctrl_inner.appendChild(a_undo);
-        ctrl_inner.appendChild(a_close);
-        ctrl.appendChild(ctrl_inner);
-        this.container.appendChild(ctrl);
-        return ctrl;
-    }
-    openBrush() {
-        if (this.ready)
-            return;
-        if (!this.canvas[this.uuid]) {
-            this.canvas[this.uuid] = this.initCanvas('_paintBrush-canvas');
-        }
-        this.container.className = 'brushing';
-        const $curCanvas = this.canvas[this.uuid];
-        const $ctx = $curCanvas.getContext('2d');
-        $ctx.clearRect(0, 0, $curCanvas.width, $curCanvas.height);
-        this.openBrushHandle();
-        this.ready = true;
-        this.emit('readyChange', true);
-    }
-    closeBrush() {
-        if (!this.ready)
-            return;
-        this.container.className = '';
-        this.data = {};
-        this.tempLine = {};
-        Object.keys(this.canvas).forEach((key) => {
-            this.canvas[key].ontouchstart = () => false;
-            this.canvas[key].ontouchmove = () => false;
-            this.canvas[key].ontouchend = () => false;
-            this.canvas[key].ontouchcancel = () => false;
-            const $ctx = this.canvas[key].getContext('2d');
-            if ($ctx) {
-                $ctx.clearRect(0, 0, this.canvas[key].width, this.canvas[key].height);
-            }
-        });
-        this.ready = false;
-        this.emit('readyChange', false);
-        this.emitStateChange({
-            type: PaintBrushTypeEnum.Exit,
-            color: this.color,
-            ready: false,
-            uuid: this.uuid,
-        });
-    }
-    updateCurrentColor(color) {
-        const currentCanvas = this.canvas[this.uuid];
-        if (!currentCanvas)
-            return;
-        const currentCtx = currentCanvas.getContext('2d');
-        if (!currentCtx)
-            return;
-        this.configs.currentColor = color;
-        currentCtx.strokeStyle = color;
-    }
-    openBrushHandle() {
-        const currentCanvas = this.canvas[this.uuid];
-        if (!currentCanvas)
-            return;
-        const currentCtx = currentCanvas.getContext('2d');
-        if (!currentCtx)
-            return;
-        const color = this.color || '#6D92FF';
-        currentCtx.strokeStyle = color;
-        let begin = null; // 开始点
-        let points = []; // 单次 touch 点位集合
-        let move;
-        let line = []; // 同步 touch 点位数据
-        let startTime = 0; // touch 开始时间
-        // 绘制
-        const draw = (beginPoint, controlPoint, endPoint) => {
-            const color = this.color || '#ff0000';
-            currentCtx.strokeStyle = color;
-            currentCtx.beginPath();
-            currentCtx.moveTo(beginPoint.x, beginPoint.y);
-            currentCtx.quadraticCurveTo(controlPoint.x, controlPoint.y, endPoint.x, endPoint.y);
-            currentCtx.stroke();
-        };
-        // 鼠标按下
-        currentCanvas.onmousedown = (e) => {
-            e.preventDefault();
-            startTime = Date.now();
-            const x = e.clientX;
-            const y = e.clientY;
-            points = [];
-            points.push({ x, y });
-            begin = { x, y };
-            move = transformCoords({ x, y }, this.clientWidth, this.clientHeight);
-            line = [];
-        };
-        // 鼠标移动
-        currentCanvas.onmousemove = (e) => {
-            e.preventDefault();
-            if (!begin)
-                return;
-            const x = Number(e.clientX);
-            const y = Number(e.clientY);
-            // 密集点位稀释
-            if (Math.abs(x - begin.x) < 5 && Math.abs(y - begin.y) < 5) {
-                return;
-            }
-            points.push({ x, y });
-            // 此处应记录折线拟合之前的点
-            line.push(transformCoords({ x, y }, this.clientWidth, this.clientHeight));
-            // 折线拟合二次贝塞尔曲线至少需要三个点
-            if (points.length < 3) {
-                return;
-            }
-            const { control, end } = getQuadraticCurvePoint(points);
-            if (!control || !end) {
-                return;
-            }
-            draw(begin, control, end);
-            begin = end;
-        };
-        // 鼠标松开
-        currentCanvas.onmouseup = (e) => {
-            e.preventDefault();
-            begin = null;
-            if (points.length < 3)
-                return;
-            if (!this.data[this.uuid]) {
-                this.data[this.uuid] = [];
-            }
-            const duration = Date.now() - startTime;
-            const state = {
-                move: Object.assign({}, move),
-                uuid: this.uuid,
-                line: [...line],
-                color: this.color,
-                duration: duration < 1280 ? duration : duration < 2000 ? 1280 : 0, // 单次笔迹时长超过2000ms不加动画
-            };
-            this.data[this.uuid].push(state);
-            // 广播数据
-            nextFrame(() => {
-                this.emitStateChange({
-                    type: PaintBrushTypeEnum.Drawline,
-                    color: this.color,
-                    ready: this.ready,
-                    state,
-                    uuid: this.uuid,
-                });
-            });
-        };
-        // 手势按压
-        currentCanvas.ontouchstart = (e) => {
-            e.preventDefault();
-            startTime = Date.now();
-            const x = e.touches[0].clientX;
-            const y = e.touches[0].clientY;
-            points = [];
-            points.push({ x, y });
-            begin = { x, y };
-            console.log('ontouchstart', x, y, begin);
-            move = transformCoords({ x, y }, this.clientWidth, this.clientHeight);
-            line = [];
-        };
-        // 手势移动
-        currentCanvas.ontouchmove = (e) => {
-            e.preventDefault();
-            if (!begin)
-                return;
-            const x = Number(e.touches[0].clientX);
-            const y = Number(e.touches[0].clientY);
-            if (Math.abs(x - begin.x) < 5 && Math.abs(y - begin.y) < 5)
-                return; // 密集点位稀释
-            points.push({ x, y });
-            line.push(transformCoords({ x, y }, this.clientWidth, this.clientHeight)); // 此处应记录折线拟合之前的点
-            if (points.length < 3)
-                return; // 折线拟合二次贝塞尔曲线至少需要三个点
-            const { control, end } = getQuadraticCurvePoint(points);
-            if (!control || !end)
-                return;
-            draw(begin, control, end);
-            begin = end;
-        };
-        // 手势按压离开
-        currentCanvas.ontouchend = currentCanvas.ontouchcancel = (e) => {
-            e.preventDefault();
-            begin = null;
-            if (points.length < 3)
-                return;
-            if (!this.data[this.uuid]) {
-                this.data[this.uuid] = [];
-            }
-            const duration = Date.now() - startTime;
-            const state = {
-                move: Object.assign({}, move),
-                line: [...line],
-                uuid: this.uuid,
-                color: this.color,
-                duration: duration < 1280 ? duration : duration < 2000 ? 1280 : 0, // 单次笔迹时长超过2000ms不加动画
-            };
-            this.data[this.uuid].push(state);
-            // 广播数据
-            nextFrame(() => {
-                this.emitStateChange({
-                    type: PaintBrushTypeEnum.Drawline,
-                    color: this.color,
-                    ready: this.ready,
-                    state,
-                    uuid: this.uuid,
-                });
-            });
-        };
-    }
-    emitStateChange(action, userAction = true) {
-        if (action.type !== PaintBrushTypeEnum.Drawline) {
-            this.emit('stateChange', action, userAction);
-            return;
-        }
-        const timestamp = Date.now();
-        const state = action.state;
-        if (!state)
-            return;
-        if (!state.line)
-            return;
-        const sliceCount = Math.ceil(state.line.length / 100);
-        for (let i = 0; i < sliceCount; i++) {
-            const localityAction = {
-                uuid: this.uuid,
-                color: this.color,
-                ready: this.ready,
-                type: action.type,
-                state: {
-                    uuid: this.uuid,
-                    move: state.move,
-                    duration: state.duration,
-                    color: this.color,
-                    line: state.line.slice(i * 100, (i + 1) * 100),
-                },
-                timestamp,
-                end: i === sliceCount - 1,
-            };
-            /** 由于单次 ws 传输数据量过大，会导致 ws 断掉，所以分批传数据 */
-            execInterval(i, 20, () => {
-                this.emit('stateChange', localityAction, userAction);
-            });
-        }
-    }
-    action(action) {
-        const { ready, type, uuid } = action;
-        if (!ready && this.ready) {
-            // 关闭面板
-            this.closeBrush();
-            return;
-        }
-        if (ready && !this.ready) {
-            // 开启面板：首次打开画笔不同步上一次的画线
-            this.openBrush();
-            return;
-        }
-        if (!this.ready) {
-            return;
-        }
-        switch (type) {
-            case PaintBrushTypeEnum.Drawline:
-                const { state, timestamp, end } = action;
-                if (!timestamp)
-                    return;
-                if (!state)
-                    return;
-                this.tempLine[timestamp] = [].concat(this.tempLine[timestamp] || [], state.line);
-                if (end) {
-                    Object.assign(state, { line: this.tempLine[timestamp] });
-                    this.handleDrawLine(uuid, state, {}, () => delete this.tempLine[timestamp]);
-                }
-                break;
-            case PaintBrushTypeEnum.Undo:
-                this.handleUndo(uuid);
-                break;
-            default:
-                break;
-        }
-    }
-    handleDrawLine(_uuid, data, { withUndo = false }, callback = noop) {
-        if (!data || Object.prototype.toString.call(data) != '[object Object]' || Object.keys(data).length === 0) {
-            return;
-        }
-        console.log('handleDrawLine', data, data.line);
-        queue(() => {
-            return new Promise((resolve) => {
-                if (!withUndo) {
-                    if (!this.canvas[_uuid]) {
-                        this.canvas[_uuid] = this.initCanvas('_paintBrush-canvas--sync');
-                    }
-                    if (!this.data[_uuid]) {
-                        this.data[_uuid] = [];
-                    }
-                    this.data[_uuid].push(data);
-                }
-                if (!this.canvas[_uuid]) {
-                    return;
-                }
-                const $ctx = this.canvas[_uuid].getContext('2d');
-                if (!$ctx)
-                    return;
-                const { line = [], color = 'black', duration = 0, uuid } = data;
-                const move = unTransformCoords(data.move || {}, this.clientWidth, this.clientHeight);
-                let points = [move];
-                $ctx.strokeStyle = color;
-                $ctx.beginPath();
-                $ctx.moveTo(move.x, move.y);
-                if (duration && !withUndo) {
-                    let drawCache = [];
-                    const self = this;
-                    self.tween = tween({ step: 0 }, { step: line.length - 1 }, duration)
-                        .onUpdate(({ step }) => {
-                        var _a;
-                        self.tweening = true;
-                        if (!self.ready) {
-                            $ctx.clearRect(0, 0, self.canvas[uuid].width, self.canvas[uuid].height);
-                            return (_a = self.tween) === null || _a === void 0 ? void 0 : _a.stop();
-                        }
-                        const i = Math.floor(step);
-                        if (!drawCache.find((dc) => dc === i)) {
-                            drawCache.push(i);
-                            console.log('__debug__', line, line[i], i);
-                            points.push(unTransformCoords(line[i], self.clientWidth, self.clientHeight));
-                            if (points.length < 3)
-                                return;
-                            const { control, end } = getQuadraticCurvePoint(points);
-                            if (!control || !end)
-                                return;
-                            $ctx.quadraticCurveTo(control.x, control.y, end.x, end.y);
-                            $ctx.stroke();
-                        }
-                    })
-                        .onComplete((e) => {
-                        self.tween = undefined;
-                        self.tweening = false;
-                        drawCache = [];
-                        points = [];
-                        if (callback)
-                            callback();
-                        resolve();
-                    });
-                }
-                else {
-                    for (let i = 0; i < line.length; i++) {
-                        points.push(unTransformCoords(line[i], this.clientWidth, this.clientHeight));
-                        if (points.length < 3)
-                            continue;
-                        const { control, end } = getQuadraticCurvePoint(points);
-                        if (!control || !end)
-                            continue;
-                        $ctx.quadraticCurveTo(control.x, control.y, end.x, end.y);
-                    }
-                    $ctx.stroke();
-                    points = [];
-                    if (callback)
-                        callback();
-                    resolve();
-                }
-            });
-        });
-    }
-    handleUndo(uuid) {
-        console.log('handleUndo', uuid, this.canvas[uuid]);
-        if (!this.canvas[uuid] || !this.data[uuid] || this.data[uuid].length === 0) {
-            return;
-        }
-        this.data[uuid].pop();
-        const handle = () => {
-            var _a;
-            const $ctx = (_a = this.canvas[uuid]) === null || _a === void 0 ? void 0 : _a.getContext('2d');
-            if ($ctx) {
-                $ctx.clearRect(0, 0, this.canvas[uuid].width, this.canvas[uuid].height);
-            }
-            this.data[uuid].forEach((ld) => this.handleDrawLine(uuid, ld, { withUndo: true }));
-        };
-        if (this.tween && this.tweening) {
-            this.tween.stop();
-            nextFrame(handle, 60);
-            return;
-        }
-        handle();
-    }
-    destroyBrush() {
-        this.closeBrush();
-        this.ready = false;
-        this.emit('readyChange', true);
-    }
-}

package/libs/components/PaintBrush/Subscribe.d.ts

@@ -1,76 +0,0 @@
-export declare type EventMap = {
-    [name: string]: (...args: any[]) => void | boolean;
-};
-/**
- * 监听者模式
- * @template T 预设的监听回调类型
- * @example
- * ```
- * new Subscribe<{
- * "foo": [arg1: number, arg2: string],
- * "bar": [arg: boolean],
- * }>()
- * ```
- */
-declare class Subscribe<T extends EventMap> {
-    /**
-     * 判断是否注册了事件
-     * @param name  事件类型
-     */
-    hasListener(name: keyof T): boolean;
-    /**
-     * 注册事件
-     * @param  name    事件类型
-     * @param  callback 事件回调函数
-     * @param  once     是否只执行一次
-     * @returns 解除事件
-     * @template K 预设的监听事件名称
-     * @template C 回调函数函数上下文
-     */
-    on<K extends keyof T>(name: K, callback: (...args: Parameters<T[K]>) => ReturnType<T[K]>, once?: boolean): () => void;
-    /**
-     * 注册事件(是否只执行一次)
-     * @param  name     事件类型
-     * @param  callback 事件回调函数
-     * @returns 解除事件
-     * @template K 预设的监听事件名称
-     * @template C 回调函数函数上下文
-     */
-    once<K extends keyof T>(name: K, callback: (...args: Parameters<T[K]>) => ReturnType<T[K]>): () => void;
-    /**
-     * 解除事件
-     *
-     * 如果 name 不传的话解除对应所有事件
-     * 如果 name, callback 不传的话解除所有name的所有事件
-     * @param  name     事件类型
-     * @param  callback 事件回调函数
-     * @template K 预设的监听事件名称
-     */
-    off<K extends keyof T>(name?: K, callback?: (...args: Parameters<T[K]>) => ReturnType<T[K]>): void;
-    /**
-     * 触发事件
-     * @param  name  事件类型
-     * @param  data  触发事件的数据
-     * @returns canceled 是否被触发取消
-     * @template K 预设的监听事件名称
-     */
-    emit<K extends keyof T>(name: K, ...data: Parameters<T[K]>): boolean;
-}
-export declare namespace SubscribeMixinType {
-    interface hasListener<T extends EventMap> {
-        (name: keyof T): boolean;
-    }
-    interface on<T extends EventMap> {
-        <K extends keyof T>(name: K, callback: (...args: Parameters<T[K]>) => ReturnType<T[K]>, once?: boolean): () => void;
-    }
-    interface once<T extends EventMap> {
-        <K extends keyof T>(name: K, callback: (...args: Parameters<T[K]>) => ReturnType<T[K]>): () => void;
-    }
-    interface off<T extends EventMap> {
-        <K extends keyof T>(names?: K | K[], callback?: (...args: any[]) => any): void;
-    }
-    interface emit<T extends EventMap> {
-        <K extends keyof T>(name: K, ...data: Parameters<T[K]>): boolean;
-    }
-}
-export { Subscribe };