[inula-dev-tools]<feat> injector 逻辑合入
This commit is contained in:
13659257719
parent
8f33376722
commit
559a6fc3aa
|
|
@ -0,0 +1,485 @@
|
||||||
|
/*
|
||||||
|
* Copyright (c) 2023 Huawei Technologies Co.,Ltd.
|
||||||
|
*
|
||||||
|
* openInula is licensed under Mulan PSL v2.
|
||||||
|
* You can use this software according to the terms and conditions of the Mulan PSL v2.
|
||||||
|
* You may obtain a copy of Mulan PSL v2 at:
|
||||||
|
*
|
||||||
|
* http://license.coscl.org.cn/MulanPSL2
|
||||||
|
*
|
||||||
|
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
|
||||||
|
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
|
||||||
|
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
|
||||||
|
* See the Mulan PSL v2 for more details.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import parseTreeRoot, { clearVNode, queryVNode, VNodeToIdMap } from '../parser/parseVNode';
|
||||||
|
import { packagePayload, checkMessage } from '../utils/transferUtils';
|
||||||
|
import {
|
||||||
|
RequestAllVNodeTreeInfos,
|
||||||
|
AllVNodeTreeInfos,
|
||||||
|
RequestComponentAttrs,
|
||||||
|
ComponentAttrs,
|
||||||
|
DevToolHook,
|
||||||
|
DevToolContentScript,
|
||||||
|
ModifyAttrs,
|
||||||
|
ModifyHooks,
|
||||||
|
ModifyState,
|
||||||
|
ModifyProps,
|
||||||
|
InspectDom,
|
||||||
|
LogComponentData,
|
||||||
|
Highlight,
|
||||||
|
RemoveHighlight,
|
||||||
|
ViewSource,
|
||||||
|
PickElement,
|
||||||
|
StopPickElement,
|
||||||
|
CopyToConsole,
|
||||||
|
StorageValue,
|
||||||
|
} from '../utils/constants';
|
||||||
|
import { VNode } from '../../../inula/src/renderer/vnode/VNode';
|
||||||
|
import { parseVNodeAttrs } from '../parser/parseAttr';
|
||||||
|
import { showHighlight, hideHighlight } from '../highlight';
|
||||||
|
import {
|
||||||
|
FunctionComponent,
|
||||||
|
ClassComponent,
|
||||||
|
IncompleteClassComponent,
|
||||||
|
ForwardRef,
|
||||||
|
MemoComponent
|
||||||
|
} from '../../../inula/src/renderer/vnode/VNodeTags';
|
||||||
|
import { pickElement } from './pickElement';
|
||||||
|
|
||||||
|
const roots = [];
|
||||||
|
let storeDataCount = 0;
|
||||||
|
|
||||||
|
function addIfNotInclude(treeRoot: VNode) {
|
||||||
|
if (!roots.includes(treeRoot)) {
|
||||||
|
roots.push(treeRoot);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function send() {
|
||||||
|
const result = roots.reduce((pre, current) => {
|
||||||
|
const info = parseTreeRoot(helper.travelVNodeTree, current);
|
||||||
|
pre.push(info);
|
||||||
|
return pre;
|
||||||
|
}, []);
|
||||||
|
postMessage(AllVNodeTreeInfos, result);
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteVNode(vNode: VNode) {
|
||||||
|
// 开发工具中保存了 vNode 的引用，在清理 vNode 的时候需要一并删除
|
||||||
|
clearVNode(vNode);
|
||||||
|
const index = roots.indexOf(vNode);
|
||||||
|
if (index !== -1) {
|
||||||
|
roots.splice(index, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function postMessage(type: string, data) {
|
||||||
|
window.postMessage(
|
||||||
|
packagePayload(
|
||||||
|
{
|
||||||
|
type: type,
|
||||||
|
data: data,
|
||||||
|
},
|
||||||
|
DevToolHook
|
||||||
|
),
|
||||||
|
'*'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function parseCompAttrs(id: number) {
|
||||||
|
const vNode = queryVNode(id);
|
||||||
|
if (!vNode) {
|
||||||
|
console.error('Do not find match vNode, this is a bug, please report us.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const parsedAttrs = parseVNodeAttrs(vNode, helper.getHookInfo);
|
||||||
|
postMessage(ComponentAttrs, parsedAttrs);
|
||||||
|
}
|
||||||
|
|
||||||
|
function calculateNextValue(editValue, value, attrPath) {
|
||||||
|
let nextState;
|
||||||
|
const editValueType = typeof editValue;
|
||||||
|
if (
|
||||||
|
editValueType === 'string' ||
|
||||||
|
editValueType === 'undefined' ||
|
||||||
|
editValueType === 'boolean'
|
||||||
|
) {
|
||||||
|
nextState = value;
|
||||||
|
} else if (editValueType === 'number') {
|
||||||
|
const numValue = Number(value);
|
||||||
|
nextState = isNaN(numValue) ? value : numValue; // 如果能转为数字，转数字，不能转数字旧用原值
|
||||||
|
} else if (editValueType === 'object') {
|
||||||
|
if (editValue === null) {
|
||||||
|
nextState = value;
|
||||||
|
} else {
|
||||||
|
const newValue = Array.isArray(editValue) ? [...editValue] : { ...editValue };
|
||||||
|
// 遍历读取到直接指向需要修改值的对象
|
||||||
|
let attr = newValue;
|
||||||
|
for (let i = 0; i < attrPath.length - 1; i++) {
|
||||||
|
attr = attr[attrPath[i]];
|
||||||
|
}
|
||||||
|
// 修改对象上的值
|
||||||
|
attr[attrPath[attrPath.length - 1]] = value;
|
||||||
|
nextState = newValue;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.error(
|
||||||
|
'The dev tools tried to edit a non-editable value, this is a bug, please report.',
|
||||||
|
editValue
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return nextState;
|
||||||
|
}
|
||||||
|
|
||||||
|
function modifyVNodeAttrs(data) {
|
||||||
|
const { type, id, value, path } = data;
|
||||||
|
const vNode = queryVNode(id);
|
||||||
|
if (!vNode) {
|
||||||
|
console.error('Do not find match vNode, this is a bug, please report us.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (type === ModifyProps) {
|
||||||
|
const nextProps = calculateNextValue(vNode.props, value, path);
|
||||||
|
helper.updateProps(vNode, nextProps);
|
||||||
|
} else if (type === ModifyHooks) {
|
||||||
|
const hooks = vNode.hooks;
|
||||||
|
const editHook = hooks[path[0]];
|
||||||
|
const hookInfo = helper.getHookInfo(editHook);
|
||||||
|
if (hookInfo) {
|
||||||
|
const editValue = hookInfo.value;
|
||||||
|
// path 的第一个指向 hIndex，从第二个值才开始指向具体属性访问路径
|
||||||
|
const nextState = calculateNextValue(editValue, value, path.slice(1));
|
||||||
|
helper.updateHooks(vNode, path[0], nextState);
|
||||||
|
} else {
|
||||||
|
console.error(
|
||||||
|
'The dev tools tried to edit a non-editable hook, this is a bug, please report.',
|
||||||
|
hooks
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} else if (type === ModifyState) {
|
||||||
|
const oldState = vNode.state || {};
|
||||||
|
const nextState = { ...oldState };
|
||||||
|
let accessRef = nextState;
|
||||||
|
for (let i = 0; i < path.length - 1; i++) {
|
||||||
|
accessRef = accessRef[path[i]];
|
||||||
|
}
|
||||||
|
accessRef[path[path.length - 1]] = value;
|
||||||
|
helper.updateState(vNode, nextState);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function logComponentData(id: number) {
|
||||||
|
const vNode = queryVNode(id);
|
||||||
|
if (vNode == null) {
|
||||||
|
console.warn(`Could not find vNode with id "${id}"`);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (vNode) {
|
||||||
|
const info = helper.getComponentInfo(vNode);
|
||||||
|
console.log('vNode: ', vNode);
|
||||||
|
console.log('Component Info: ', info);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 通过 path 在 vNode 拿到对应的值
|
||||||
|
*
|
||||||
|
* @param {VNode} vNode dom 节点
|
||||||
|
* @param {Array<string | number>} path 路径
|
||||||
|
* @param {string} attrsName 值的类型（props 或者 hooks）
|
||||||
|
*/
|
||||||
|
const getValueByPath = (
|
||||||
|
vNode: VNode,
|
||||||
|
path: Array<string | number>,
|
||||||
|
attrsName: string
|
||||||
|
) => {
|
||||||
|
if (attrsName === 'Props') {
|
||||||
|
return path.reduce((previousValue, currentValue) => {
|
||||||
|
return previousValue[currentValue];
|
||||||
|
}, vNode.props);
|
||||||
|
} else {
|
||||||
|
// attrsName 为 Hooks
|
||||||
|
if (path.length > 1) {
|
||||||
|
return path.reduce((previousValue, currentValue) => {
|
||||||
|
return previousValue[currentValue];
|
||||||
|
}, vNode.hooks);
|
||||||
|
}
|
||||||
|
return vNode.hooks[path[0]];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 通过 path 在 vNode 拿到对应的值，并且在控制台打印出来
|
||||||
|
*
|
||||||
|
* @param {number} id idToVNodeMap 的 key 值，通过 id 拿到 VNode
|
||||||
|
* @param {string} itemName 打印出来值的名称
|
||||||
|
* @param {Array<string | number>} path 值的路径
|
||||||
|
* @param {string} attrsName 值的类型
|
||||||
|
*/
|
||||||
|
function logDataWithPath(
|
||||||
|
id: number,
|
||||||
|
itemName: string,
|
||||||
|
path: Array<string | number>,
|
||||||
|
attrsName: string
|
||||||
|
) {
|
||||||
|
const vNode = queryVNode(id);
|
||||||
|
if (vNode === null) {
|
||||||
|
console.warn(`Could not find vNode with id "${id}"`);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (vNode) {
|
||||||
|
const value = getValueByPath(vNode, path, attrsName);
|
||||||
|
if (attrsName === 'Hooks') {
|
||||||
|
console.log(itemName, value);
|
||||||
|
} else {
|
||||||
|
console.log(`${path[path.length - 1]}`, value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 通过 path 在 vNode 拿到对应的值，并且存为全局变量
|
||||||
|
*
|
||||||
|
* @param {number} id idToVNodeMap 的 key 值，通过 id 拿到 VNode
|
||||||
|
* @param {Array<string |number>} path 值的路径
|
||||||
|
* @param {string} attrsName 值的类型
|
||||||
|
*/
|
||||||
|
function storeDataWithPath(
|
||||||
|
id: number,
|
||||||
|
path: Array<string | number>,
|
||||||
|
attrsName: string
|
||||||
|
) {
|
||||||
|
const vNode = queryVNode(id);
|
||||||
|
if (vNode === null) {
|
||||||
|
console.warn(`Could not find vNode with id "${id}"`);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (vNode) {
|
||||||
|
const value = getValueByPath(vNode, path, attrsName);
|
||||||
|
const key = `$InulaTemp${storeDataCount++}`;
|
||||||
|
|
||||||
|
window[key] = value;
|
||||||
|
console.log(key);
|
||||||
|
console.log(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export let helper;
|
||||||
|
|
||||||
|
function init(inulaHelper) {
|
||||||
|
helper = inulaHelper;
|
||||||
|
(window as any).__INULA_DEV_HOOK__.isInit = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getElement(travelVNodeTree, treeRoot: VNode) {
|
||||||
|
const result: any[] = [];
|
||||||
|
travelVNodeTree(
|
||||||
|
treeRoot,
|
||||||
|
(node: VNode) => {
|
||||||
|
if (node.realNode) {
|
||||||
|
if (Object.keys(node.realNode).length > 0 || node.realNode.size > 0) {
|
||||||
|
result.push(node);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
(node: VNode) =>
|
||||||
|
node.realNode != null &&
|
||||||
|
(Object.keys(node.realNode).length > 0 || node.realNode.size > 0)
|
||||||
|
);
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
// dev tools 点击眼睛图标功能
|
||||||
|
const inspectDom = data => {
|
||||||
|
const { id } = data;
|
||||||
|
const vNode = queryVNode(id);
|
||||||
|
if (vNode == null) {
|
||||||
|
console.warn(`Could not find vNode with id "${id}"`);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
const info = getElement(helper.travelVNodeTree, vNode);
|
||||||
|
if (info) {
|
||||||
|
showHighlight(info);
|
||||||
|
(window as any).__INULA_DEV_HOOK__.$0 = info[0];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const picker = pickElement(window);
|
||||||
|
|
||||||
|
const actions = new Map([
|
||||||
|
// 请求左树所有数据
|
||||||
|
[
|
||||||
|
RequestAllVNodeTreeInfos,
|
||||||
|
() => {
|
||||||
|
send();
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 请求某个节点的 props，hooks
|
||||||
|
[
|
||||||
|
RequestComponentAttrs,
|
||||||
|
data => {
|
||||||
|
parseCompAttrs(data);
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 修改 props，hooks
|
||||||
|
[
|
||||||
|
ModifyAttrs,
|
||||||
|
data => {
|
||||||
|
modifyVNodeAttrs(data);
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 找到节点对应 element
|
||||||
|
[
|
||||||
|
InspectDom,
|
||||||
|
data => {
|
||||||
|
inspectDom(data);
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 打印节点数据
|
||||||
|
[
|
||||||
|
LogComponentData,
|
||||||
|
data => {
|
||||||
|
logComponentData(data);
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 高亮
|
||||||
|
[
|
||||||
|
Highlight,
|
||||||
|
data => {
|
||||||
|
const node = queryVNode(data.id);
|
||||||
|
if (node == null) {
|
||||||
|
console.warn(`Could not find vNode with id "${data.id}"`);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
const info = getElement(helper.travelVNodeTree, node);
|
||||||
|
showHighlight(info);
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 移出高亮
|
||||||
|
[
|
||||||
|
RemoveHighlight,
|
||||||
|
() => {
|
||||||
|
hideHighlight();
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 查看节点源代码位置
|
||||||
|
[
|
||||||
|
ViewSource,
|
||||||
|
data => {
|
||||||
|
const node = queryVNode(data.id);
|
||||||
|
if (node == null) {
|
||||||
|
console.warn(`Could not find vNode with id "${data.id}"`);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
showSource(node);
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 选中页面元素对应 dev tools 节点
|
||||||
|
[
|
||||||
|
PickElement,
|
||||||
|
() => {
|
||||||
|
picker.startPick();
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
StopPickElement,
|
||||||
|
() => {
|
||||||
|
picker.stopPick();
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 在控制台打印 Props Hooks State 值
|
||||||
|
[
|
||||||
|
CopyToConsole,
|
||||||
|
data => {
|
||||||
|
const node = queryVNode(data.id);
|
||||||
|
if (node == null) {
|
||||||
|
console.warn(`Could not find vNode with id "${data.id}"`);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
logDataWithPath(data.id, data.itemName, data.path, data.attrsName);
|
||||||
|
},
|
||||||
|
],
|
||||||
|
// 把 Props Hooks State 值存为全局变量
|
||||||
|
[
|
||||||
|
StorageValue,
|
||||||
|
data => {
|
||||||
|
const node = queryVNode(data.id);
|
||||||
|
if (node == null) {
|
||||||
|
console.warn(`Could not find vNode with id "${data.id}"`);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
storeDataWithPath(data.id, data.path, data.attrsName);
|
||||||
|
},
|
||||||
|
],
|
||||||
|
]);
|
||||||
|
|
||||||
|
const showSource = (node: VNode) => {
|
||||||
|
switch (node.tag) {
|
||||||
|
case ClassComponent:
|
||||||
|
case IncompleteClassComponent:
|
||||||
|
case FunctionComponent:
|
||||||
|
global.$type = node.type;
|
||||||
|
break;
|
||||||
|
case ForwardRef:
|
||||||
|
global.$type = node.type.render;
|
||||||
|
break;
|
||||||
|
case MemoComponent:
|
||||||
|
global.$type = node.type.type;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
global.$type = null;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRequest = (type: string, data) => {
|
||||||
|
const action = actions.get(type);
|
||||||
|
if (action) {
|
||||||
|
action.call(this, data);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
console.warn('unknown command', type);
|
||||||
|
};
|
||||||
|
|
||||||
|
function injectHook() {
|
||||||
|
if ((window as any).__INULA_DEV_HOOK__) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
Object.defineProperty(window, '__INULA_DEV_HOOK__', {
|
||||||
|
enumerable: false,
|
||||||
|
value: {
|
||||||
|
$0: null,
|
||||||
|
init,
|
||||||
|
isInit: false,
|
||||||
|
addIfNotInclude,
|
||||||
|
send,
|
||||||
|
deleteVNode,
|
||||||
|
// inulaX 使用
|
||||||
|
getVNodeId: vNode => {
|
||||||
|
return VNodeToIdMap.get(vNode);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener('message', function (event) {
|
||||||
|
// 只接收我们自己的消息
|
||||||
|
if (event.source !== window) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const request = event.data;
|
||||||
|
if (checkMessage(request, DevToolContentScript)) {
|
||||||
|
const { payload } = request;
|
||||||
|
const { type, data } = payload;
|
||||||
|
|
||||||
|
// 忽略 inulaX 的 actions
|
||||||
|
if (type.startsWith('inulax')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
handleRequest(type, data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
injectHook();
|
||||||
|
|
@ -0,0 +1,96 @@
|
||||||
|
/*
|
||||||
|
* Copyright (c) 2023 Huawei Technologies Co.,Ltd.
|
||||||
|
*
|
||||||
|
* openInula is licensed under Mulan PSL v2.
|
||||||
|
* You can use this software according to the terms and conditions of the Mulan PSL v2.
|
||||||
|
* You may obtain a copy of Mulan PSL v2 at:
|
||||||
|
*
|
||||||
|
* http://license.coscl.org.cn/MulanPSL2
|
||||||
|
*
|
||||||
|
* THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
|
||||||
|
* EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
|
||||||
|
* MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
|
||||||
|
* See the Mulan PSL v2 for more details.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { PickElement, StopPickElement } from '../utils/constants';
|
||||||
|
import { getElement, helper, postMessage } from './index';
|
||||||
|
import { queryVNode, VNodeToIdMap } from '../parser/parseVNode';
|
||||||
|
import { isUserComponent } from '../parser/parseVNode';
|
||||||
|
import { throttle } from 'lodash';
|
||||||
|
import { hideHighlight, showHighlight } from '../highlight';
|
||||||
|
|
||||||
|
// 判断鼠标移入节点是否为 dev tools 上的节点，如果不是则找父节点
|
||||||
|
function getUserComponent(target) {
|
||||||
|
if (target.tag && isUserComponent(target.tag)) {
|
||||||
|
return target;
|
||||||
|
}
|
||||||
|
while (target.tag && !isUserComponent(target.tag)) {
|
||||||
|
if (target.parent) {
|
||||||
|
target = target.parent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return target;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onMouseEvent(event: MouseEvent) {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
|
|
||||||
|
function onMouseMove(event: MouseEvent) {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
const target = (event.target as any)._inula_VNode;
|
||||||
|
if (target) {
|
||||||
|
const id = VNodeToIdMap.get(getUserComponent(target));
|
||||||
|
const vNode = queryVNode(id);
|
||||||
|
if (vNode == null) {
|
||||||
|
console.warn(`Could not find vNode with id "${id}"`);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
const info = getElement(helper.travelVNodeTree, vNode);
|
||||||
|
if (info) {
|
||||||
|
showHighlight(info);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 0.5 秒内在节流结束后只触发一次
|
||||||
|
throttle(
|
||||||
|
() => {
|
||||||
|
postMessage(PickElement, id);
|
||||||
|
},
|
||||||
|
500,
|
||||||
|
{ leading: false, trailing: true }
|
||||||
|
)();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function pickElement(window: Window) {
|
||||||
|
function onClick(event: MouseEvent) {
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
stopPick();
|
||||||
|
postMessage(StopPickElement, null);
|
||||||
|
}
|
||||||
|
|
||||||
|
const startPick = () => {
|
||||||
|
if (window && typeof window.addEventListener === 'function') {
|
||||||
|
window.addEventListener('click', onClick, true);
|
||||||
|
window.addEventListener('mousedown', onMouseEvent, true);
|
||||||
|
window.addEventListener('mousemove', onMouseMove, true);
|
||||||
|
window.addEventListener('mouseup', onMouseEvent, true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const stopPick = () => {
|
||||||
|
hideHighlight();
|
||||||
|
window.removeEventListener('click', onClick, true);
|
||||||
|
window.removeEventListener('mousedown', onMouseEvent, true);
|
||||||
|
window.removeEventListener('mousemove', onMouseMove, true);
|
||||||
|
window.removeEventListener('mouseup', onMouseEvent, true);
|
||||||
|
};
|
||||||
|
|
||||||
|
return { startPick, stopPick };
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue