620 lines
18 KiB
TypeScript
620 lines
18 KiB
TypeScript
import { renderMethods } from "./renderTreeNode";
|
||
export const useTreeNode = () => {
|
||
//定义树形节点的属性
|
||
const nodeType = {
|
||
point: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView']
|
||
// render: renderBaseMarker,
|
||
// render2d: renderBaseMarker2d,
|
||
// detailFun: get_detail_point,
|
||
// addToDatabase: addPoint,
|
||
// allowChildren: false,
|
||
},
|
||
line: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView']
|
||
// render: renderBaseMarker,
|
||
// render2d: renderBaseMarker2d,
|
||
// detailFun: get_detail_line,
|
||
// allowChildren: false,
|
||
},
|
||
curve: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView']
|
||
// render: renderCurve,
|
||
// render2d: renderBaseMarker2d,
|
||
// detailFun: get_detail_curve,
|
||
// allowChildren: false,
|
||
},
|
||
panel: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView']
|
||
// render: renderBaseMarker,
|
||
// render2d: renderBaseMarker2d,
|
||
// detailFun: get_detail_panel,
|
||
// allowChildren: false,
|
||
},
|
||
rectangle: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView']
|
||
// render: renderBaseMarker,
|
||
// render2d: renderBaseMarker2d,
|
||
// detailFun: get_detail_panel,
|
||
// allowChildren: false,
|
||
},
|
||
rendezvous: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView']
|
||
// render: renderBaseMarker,
|
||
// render2d: renderBaseMarker2d,
|
||
// detailFun: get_detail_rendezvous,
|
||
// allowChildren: false,
|
||
},
|
||
circle: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView']
|
||
// render: renderBaseMarker,
|
||
// render2d: renderBaseMarker2d,
|
||
// detailFun: get_detail_circle,
|
||
},
|
||
attackArrow: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView']
|
||
// render: renderBaseMarker,
|
||
// detailFun: get_detail_attackArrow,
|
||
// render2d: renderBaseMarker2d,
|
||
// allowChildren: false,
|
||
},
|
||
pincerArrow: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView']
|
||
// render: renderBaseMarker,
|
||
// detailFun: get_detail_pincerArrow,
|
||
// render2d: renderBaseMarker2d,
|
||
// allowChildren: false,
|
||
},
|
||
groundImage: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView']
|
||
// render: renderGroundImage,
|
||
// detailFun: get_detail_groundImage,
|
||
// allowChildren: false,
|
||
},
|
||
groundSvg: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView']
|
||
// render: renderGroundImage,
|
||
// detailFun: get_detail_groundImage,
|
||
// allowChildren: false,
|
||
},
|
||
waterl: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView']
|
||
// render: renderSpout,
|
||
// detailFun: get_detail_waterl,
|
||
// allowChildren: false,
|
||
},
|
||
|
||
directory: {
|
||
rightMenus: [
|
||
'addDirectory',
|
||
'addResource',
|
||
'pictureLocation',
|
||
'importPanorama',
|
||
'edit',
|
||
'del'
|
||
],
|
||
// detailFun: get_detail_null,
|
||
// render: () => {},
|
||
allowChildren: true,
|
||
},
|
||
tileset: {
|
||
rightMenus: [
|
||
'edit',
|
||
'del',
|
||
/*"pressModel",*/ 'setView',
|
||
'resetView'
|
||
// "tilesetClipping"
|
||
]
|
||
// render: renderBim,
|
||
// detailFun: get_detail_tileset,
|
||
// allowChildren: false,
|
||
},
|
||
bim: {
|
||
rightMenus: [
|
||
'edit',
|
||
'del',
|
||
/*"pressModel",*/ 'setView',
|
||
'resetView'
|
||
// "tilesetClipping"
|
||
]
|
||
// render: renderBim,
|
||
// detailFun: get_detail_tileset,
|
||
// allowChildren: false,
|
||
},
|
||
// // bim
|
||
node: {
|
||
rightMenus: [
|
||
/*"edit", "showAttr" "setView", "resetView"*/
|
||
]
|
||
// render: () => {},
|
||
// detailFun: get_detail_tileset,
|
||
// allowChildren: false,
|
||
},
|
||
//bim
|
||
element: {
|
||
rightMenus: [/*"edit", "showAttr""setView", "resetView"*/ 'resetPerspective']
|
||
// render: () => {},
|
||
// detailFun: get_detail_tileset,
|
||
// allowChildren: false,
|
||
},
|
||
layer: {
|
||
rightMenus: ['edit', 'del', 'layerRaise', 'layerLower', 'layerToTop', 'layerToBottom']
|
||
// render: renderLayer,
|
||
// render2d: renderLayer2d,
|
||
// detailFun: get_detail_layer,
|
||
// allowChildren: false,
|
||
},
|
||
picture: {
|
||
rightMenus: ['edit', 'del']
|
||
// render: renderPicture,
|
||
// detailFun: get_detail_picture,
|
||
// allowChildren: false,
|
||
},
|
||
model: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView']
|
||
// detailFun: get_detail_glb,
|
||
// render: renderGlb,
|
||
// allowChildren: false,
|
||
},
|
||
diffuseScan: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView']
|
||
// detailFun: get_detail_diffuseScan,
|
||
// render: renderDiffuseScan,
|
||
// allowChildren: false,
|
||
},
|
||
radarScan: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView']
|
||
// detailFun: get_detail_radarScan,
|
||
// render: renderRadarScan,
|
||
},
|
||
scanStereoscopic: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView']
|
||
// detailFun: get_detail_scanStereoscopic,
|
||
// render: renderScanStereoscopic,
|
||
},
|
||
wallStereoscopic: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView'],
|
||
// detailFun: get_detail_wallStereoscopic,
|
||
render: renderMethods.renderWallStereoscopic,
|
||
},
|
||
entityWall: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView']
|
||
// detailFun: get_detail_entityWall,
|
||
// render: renderWall,
|
||
},
|
||
road: {
|
||
rightMenus: [/*"edit",*/ 'del', 'setView', 'resetView']
|
||
// detailFun: get_detail_road,
|
||
// render: renderRoad,
|
||
},
|
||
PolyhedronObject: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView']
|
||
// detailFun: get_detail_PolyhedronObject,
|
||
// render: renderPolyhedronObject,
|
||
},
|
||
water: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView']
|
||
// detailFun: get_detail_water,
|
||
// render: renderWater,
|
||
},
|
||
explosion: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView']
|
||
// detailFun: get_detail_explosion,
|
||
// render: renderExplosion,
|
||
},
|
||
smoke: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView']
|
||
// detailFun: get_detail_smoke,
|
||
// render: renderSmoke,
|
||
},
|
||
fire: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView']
|
||
// render: renderFire,
|
||
// detailFun: get_detail_fire,
|
||
// allowChildren: false,
|
||
},
|
||
path: {
|
||
rightMenus: ['edit', 'del' /* "setView", "resetView"*/]
|
||
// detailFun: get_detail_path,
|
||
// render: renderPath,
|
||
},
|
||
trajectory: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView']
|
||
// detailFun: get_detail_trajectory,
|
||
// render: renderTrajectory,
|
||
},
|
||
|
||
geojson: {
|
||
rightMenus: ['del', 'setView', 'resetView']
|
||
// render: renderGeojson,
|
||
// detailFun: get_detail_geojson,
|
||
// allowChildren: true,
|
||
},
|
||
czml: {
|
||
rightMenus: ['del', 'setView', 'resetView']
|
||
// render: renderCzml,
|
||
// detailFun: get_detail_czml,
|
||
// allowChildren: true,
|
||
},
|
||
ArcgisWXImagery: {
|
||
// render: renderArcgisWXImagery,
|
||
rightMenus: ['edit', 'del', 'layerRaise', 'layerLower', 'layerToTop', 'layerToBottom']
|
||
// detailFun: get_detail_null,
|
||
},
|
||
ArcgisBLUEImagery: {
|
||
// render: renderArcgisBLUEImagery,
|
||
rightMenus: ['edit', 'del', 'layerRaise', 'layerLower', 'layerToTop', 'layerToBottom']
|
||
// detailFun: get_detail_null,
|
||
},
|
||
GDLWImagery: {
|
||
// render: renderGDLWImagery,
|
||
rightMenus: ['edit', 'del', 'layerRaise', 'layerLower', 'layerToTop', 'layerToBottom']
|
||
// detailFun: get_detail_null,
|
||
},
|
||
GDSLImagery: {
|
||
// render: renderGDSLImagery,
|
||
rightMenus: ['edit', 'del', 'layerRaise', 'layerLower', 'layerToTop', 'layerToBottom']
|
||
// detailFun: get_detail_null,
|
||
},
|
||
Terrain: {
|
||
// render: renderTileset,
|
||
rightMenus: ['edit', 'del']
|
||
// detailFun: get_detail_terrain,
|
||
},
|
||
terrain: {
|
||
// render: renderTerrain,
|
||
rightMenus: ['edit', 'del']
|
||
// detailFun: get_detail_null,
|
||
},
|
||
xlsx: {
|
||
// render: renderXLSX,
|
||
rightMenus: ['edit', 'del']
|
||
// detailFun: get_detail_null,
|
||
},
|
||
roam: {
|
||
// render: renderRoam,
|
||
rightMenus: ['edit', 'del']
|
||
// detailFun: get_detail_null,
|
||
},
|
||
pressModel: {
|
||
// render: renderPressModel,
|
||
rightMenus: ['edit', 'del'],
|
||
// detailFun: get_detail_pressModel,
|
||
allowChildren: false
|
||
},
|
||
terrainDig: {
|
||
// render: renderTerrainDig,
|
||
rightMenus: ['edit', 'del'],
|
||
// detailFun: get_detail_null,
|
||
allowChildren: false
|
||
},
|
||
vr: {
|
||
// render: renderPicture,
|
||
rightMenus: ['edit', 'del'],
|
||
// detailFun: get_detail_null,
|
||
allowChildren: false
|
||
},
|
||
fountain: {
|
||
// render: renderFountain,
|
||
rightMenus: ['edit', 'del'],
|
||
// detailFun: get_detail_fountain,
|
||
allowChildren: false
|
||
},
|
||
shp: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView', 'showAttr', 'importHeader']
|
||
// render: renderShp,
|
||
// detailFun: get_detail_shp,
|
||
// allowChildren: true,
|
||
},
|
||
gdb: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView', 'showAttr']
|
||
// render: renderShp,
|
||
// detailFun: get_detail_shp,
|
||
// allowChildren: true,
|
||
},
|
||
// gdbShp: {
|
||
// rightMenus: [/*"showAttr"*/],
|
||
// render: renderShp,
|
||
// detailFun: get_detail_shp,
|
||
// allowChildren: false
|
||
// },
|
||
// sonShp: {
|
||
// rightMenus: [/*"showAttr" "setView", "resetView"*/],
|
||
// render: renderShp,
|
||
// detailFun: get_detail_shp,
|
||
// allowChildren: false
|
||
// },
|
||
FeatureCollection: {
|
||
rightMenus: []
|
||
// render: renderShp,
|
||
// detailFun: get_detail_shp,
|
||
// allowChildren: false
|
||
},
|
||
Feature: {
|
||
rightMenus: ['setView', 'resetView', 'showAttr']
|
||
// render: renderShp,
|
||
// detailFun: get_detail_shp,
|
||
// allowChildren: false,
|
||
},
|
||
kml: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView', 'showAttr']
|
||
// render: renderShp,
|
||
// detailFun: get_detail_kml,
|
||
// allowChildren: true,
|
||
},
|
||
groundText: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView' /*"setView", "resetView"*/]
|
||
// render: renderGroundText,
|
||
// detailFun: get_detail_text,
|
||
// allowChildren: false,
|
||
},
|
||
standText: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView' /*"setView", "resetView"*/]
|
||
// render: renderStandText,
|
||
// detailFun: get_detail_text2,
|
||
// allowChildren: false,
|
||
},
|
||
ellipse: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView' /*"setView", "resetView"*/]
|
||
// render: renderEllipse,
|
||
// detailFun: get_detail_ellipse,
|
||
// allowChildren: false,
|
||
},
|
||
sector: {
|
||
rightMenus: ['edit', 'del', 'setView', 'resetView' /*"setView", "resetView"*/]
|
||
// render: renderSector,
|
||
// detailFun: get_detail_sector,
|
||
// allowChildren: false,
|
||
},
|
||
// 飞线
|
||
flyLine: {
|
||
rightMenus: [
|
||
'edit',
|
||
'del'
|
||
// "setView",
|
||
// "resetView" /*"setView", "resetView"*/,
|
||
]
|
||
// render: renderFlyLine,
|
||
// detailFun: get_detail_flyLine,
|
||
// allowChildren: false,
|
||
}
|
||
}
|
||
/**
|
||
* 获取选中节点(数组)
|
||
* @returns {*}
|
||
*/
|
||
const getSelectedNodes = (treeObj: any) => {
|
||
let nodes = treeObj.getSelectedNodes()
|
||
return nodes
|
||
}
|
||
/**
|
||
* 单独选中指定节点
|
||
* @param treeObj
|
||
* @param node
|
||
*/
|
||
let cusSelectNode = (treeObj: any, node: any) => {
|
||
if (node) treeObj.selectNode(node)
|
||
else treeObj.cancelSelectedNode()
|
||
}
|
||
/**
|
||
* 获取选中节点的某个属性
|
||
* @returns {*}
|
||
*/
|
||
const getKeyOfSelectedNode = (treeObj: any, key: any) => {
|
||
let node = treeObj.getSelectedNodes()[0]
|
||
let val: any
|
||
val = node ? node[key] : ''
|
||
|
||
return val
|
||
}
|
||
/**
|
||
* 获取选中节点
|
||
* @returns {*}
|
||
*/
|
||
const getSelectedNode = (treeObj: any) => {
|
||
// 防止treeObj为空
|
||
if (!treeObj) {
|
||
return null
|
||
}
|
||
|
||
try {
|
||
let node = treeObj.getSelectedNodes()[0]
|
||
return node
|
||
} catch (e) {
|
||
console.warn('获取选中节点失败:', e)
|
||
return null
|
||
}
|
||
}
|
||
/**
|
||
* 添加节点
|
||
* @param treeObj
|
||
* @param parentNode 指定的父节点，如果增加根节点，请设置 parentNode 为 null 即可。
|
||
* @param newNodes 需要增加的节点数据 JSON 对象集合，
|
||
* @param isSilent设定增加节点后是否自动展开父节点。 isSilent = true 时，不展开父节点
|
||
* @returns {*} 返回值是 zTree 最终添加的节点数据集合
|
||
*/
|
||
const cusAddNodes = (treeObj: any, parentNodeId: any, newNodes: any, isSilent?: any) => {
|
||
// newNodes.forEach((node: any) => {
|
||
// // if (node.sourceType != "directory") node.icon = cusNodeIcon(node);
|
||
// if (node.detail && typeof node.detail == 'string') node.detail = JSON.parse(node.detail)
|
||
// // if(node.parentId)
|
||
// YJ.Global.splitScreen.setActiveId([node.id])
|
||
// })
|
||
let parentNode = null
|
||
if (Object.prototype.toString.call(parentNodeId) === '[object Object]')
|
||
parentNode = parentNodeId
|
||
else {
|
||
parentNode = treeObj.getNodeByParam('id', parentNodeId, null)
|
||
}
|
||
let arr = treeObj.addNodes(parentNode, newNodes, isSilent)
|
||
treeObj.selectNode(arr[arr.length - 1])
|
||
// 确保window.AllNodes存在并为数组
|
||
window.AllNodes = (window.AllNodes || []).concat(arr)
|
||
return arr
|
||
}
|
||
/**
|
||
* 删除节点
|
||
* @param treeObj
|
||
* @param nodes
|
||
* @returns {*}
|
||
*/
|
||
const cusRemoveNode = (treeObj: any, nodes: any) => {
|
||
let allNodes = []
|
||
let _idSet = new Set()
|
||
nodes.forEach((node: any) => {
|
||
allNodes = allNodes.concat(treeObj.transformToArray(node))
|
||
})
|
||
allNodes.forEach((node: any) => {
|
||
_idSet.add(node.id)
|
||
treeObj.removeNode(node)
|
||
})
|
||
// treeObj.getNodes()
|
||
window.AllNodes = treeObj.getNodes()
|
||
return Array.from(_idSet)
|
||
}
|
||
/**
|
||
* 获取该节点下的所有同级节点
|
||
* @param treeObj
|
||
* @param node
|
||
* @returns {*}
|
||
*/
|
||
const getSameLevel = (treeObj: any, node: any) => {
|
||
let siblings = []
|
||
// 1. 获取新节点的父节点
|
||
const parentNode = node.getParentNode()
|
||
if (parentNode) {
|
||
// 2. 如果有父节点，则获取父节点的所有子节点（即同级节点）
|
||
siblings = parentNode.children
|
||
} else {
|
||
// 3. 如果没有父节点（说明是根节点），则获取所有根节点
|
||
siblings = treeObj.getNodes()
|
||
}
|
||
return siblings
|
||
}
|
||
|
||
function cusUpdateNode({ id, sourceName, params }) {
|
||
let node = window.treeObj.getNodeByParam(
|
||
"id",
|
||
id,
|
||
null
|
||
);
|
||
node.sourceName = sourceName;
|
||
node.oldname = sourceName;
|
||
node.params = params;
|
||
window.treeObj.updateNode(node);
|
||
}
|
||
|
||
/**
|
||
* 显示、定位右键菜单组件并返回菜单数组
|
||
*/
|
||
let showRightMenu = (event: any, treeObj: any) => {
|
||
// 获取选中的节点
|
||
let selectedNodes = getSelectedNodes(treeObj)
|
||
console.log('selectedNodes', selectedNodes)
|
||
let arr: any = []
|
||
let rightMenuHeight = window.getComputedStyle($('#rMenu')[0]).getPropertyValue('height')
|
||
let rightMenuWidth = window.getComputedStyle($('#rMenu')[0]).getPropertyValue('width')
|
||
let getNumber = (string: any) => {
|
||
return Number(string.replace('px', ''))
|
||
}
|
||
Number(rightMenuHeight.replace('px', ''))
|
||
let x = Math.abs(event.clientX - $('.TreeIndex .box1')[0].getBoundingClientRect().left)
|
||
let y = Math.abs(event.clientY - $('.TreeIndex .box1')[0].getBoundingClientRect().top)
|
||
/*console.log("document.body.scrollTop", document.body.scrollTop);
|
||
console.log("rightMenuHeight", rightMenuHeight);
|
||
console.log("event.clientY - getBoundingClientRect().top", y);*/
|
||
y += document.body.scrollTop + 20
|
||
x += document.body.scrollLeft + 40
|
||
|
||
const bodyWidth = $('body')?.width() || 0
|
||
const bodyHeight = $('body')?.height() || 0
|
||
|
||
if (event.screenX + getNumber(rightMenuWidth) + 40 > bodyWidth) {
|
||
x =
|
||
bodyWidth -
|
||
getNumber(rightMenuWidth) -
|
||
$('.TreeIndex .box1')[0].getBoundingClientRect().left
|
||
}
|
||
if (event.screenY + getNumber(rightMenuHeight) + 20 > bodyHeight) {
|
||
y = (bodyHeight - $('.TreeIndex .box1')[0].getBoundingClientRect().top) / 2
|
||
}
|
||
$('#rMenu').css({
|
||
top: y + 'px',
|
||
left: x + 'px',
|
||
visibility: 'visible'
|
||
})
|
||
if (
|
||
Object.prototype.toString.call(selectedNodes) === '[object Array]' &&
|
||
selectedNodes.length > 1
|
||
) {
|
||
arr = ['del']
|
||
} else {
|
||
if (selectedNodes.length == 0) arr = ['addDirectory']
|
||
else {
|
||
try {
|
||
arr = nodeType[selectedNodes[0].sourceType].rightMenus
|
||
} catch (e) {
|
||
arr = []
|
||
}
|
||
}
|
||
}
|
||
|
||
return arr
|
||
}
|
||
function findParentId(treeObj: any) {
|
||
if (!treeObj) {
|
||
return -1;
|
||
}
|
||
let selectedNode = getSelectedNode(treeObj);
|
||
|
||
if (!selectedNode) {
|
||
return -1;
|
||
}
|
||
while (!nodeType[selectedNode.sourceType].allowChildren) {
|
||
selectedNode = treeObj.getNodeByParam("id", selectedNode.parentId, null);
|
||
if (!selectedNode) {
|
||
return -1;
|
||
}
|
||
}
|
||
return selectedNode.id;
|
||
}
|
||
function findTreeIndex(treeObj: any) {
|
||
if (!treeObj) {
|
||
return 0;
|
||
}
|
||
let selectedNode = getSelectedNode(treeObj);
|
||
|
||
if (!selectedNode) {
|
||
return treeObj.getNodes().length;
|
||
} else {
|
||
// 有选中的节点后添加节点
|
||
// 选中的节点允许添加子节点，则返回该节点下children的长度
|
||
if (nodeType[selectedNode.sourceType].allowChildren) {
|
||
let nodes = treeObj.getNodesByParam("parentId", selectedNode.id, null)
|
||
return nodes.length
|
||
} else {
|
||
// 否则返回该节点父节点的children的长度
|
||
let parentNode = treeObj.getNodesByParam("id", selectedNode.parentId, null);
|
||
if (parentNode) {
|
||
return parentNode.children.length
|
||
} else
|
||
return treeObj.getNodes().length; // 如果没有父节点，则返回根节点的长度
|
||
}
|
||
}
|
||
}
|
||
|
||
return {
|
||
showRightMenu,
|
||
getSelectedNodes,
|
||
cusSelectNode,
|
||
getKeyOfSelectedNode,
|
||
getSelectedNode,
|
||
cusAddNodes,
|
||
getSameLevel,
|
||
cusRemoveNode,
|
||
cusUpdateNode,
|
||
findParentId,
|
||
findTreeIndex
|
||
}
|
||
}
|