private hotbox(nodeId?) {
$.contextMenu({
selector: 'g[id^="minder_node"]',
// hideOnSecondTrigger: true,
autoHide: true,
build: ($trigger, e) => {
if (!this.power) {
return false;
}
const nodeCategory = this.selectData.category;
return {
items: this.buildItems(nodeCategory)
};
}
});
}
private buildItems(category: ETechCategory) {
let items;
const removeItem = {
name: 'Delete',
icon: (opt, $itemElement, itemKey, item) => {
$itemElement.html('<span class="mdi mdi-delete icon"></span> <span class="word">Delete Domain</span>');
return 'context-menu-icon-del';
},
callback: (itemKey, opt, rootMenu, originalEvent) => {
const no = this.selectNo;
this.removeNode(no);
}
};
const sep = '---------';
if (category === ETechCategory.FIELD || category === ETechCategory.GROUP) {
items = {
addGroup: {
name: 'Add Group',
icon: (opt, $itemElement, itemKey, item) => {
$itemElement.html('<span class="mdi mdi-plus-circle icon"></span> <span class="word">Add Group</span>');
return 'context-menu-icon-add1';
},
callback: (itemKey, opt, rootMenu, originalEvent) => {
this.onAddNode(ENodeType.GROUP);
}
},
sep1: sep,
addPoint: {
name: 'Add Technical',
icon: (opt, $itemElement, itemKey, item) => {
$itemElement.html('<span class="mdi mdi-plus-circle icon"></span> <span class="word">Add Technical</span>');
return 'context-menu-icon-add2';
},
callback: (itemKey, opt, rootMenu, originalEvent) => {
this.onAddNode(ENodeType.POINT);
}
},
sep2: sep,
remove: removeItem
};
}
if (category === ETechCategory.POINT) {
const data = this.selectData;
const frontSpaces = '\u00A0\u00A0\u00A0\u00A0\u00A0\u00A0';
const behindSpaces = '\u00A0\u00A0\u00A0\u00A0';
let generalSelected = frontSpaces;
let gMSelected = frontSpaces;
let keySelected = frontSpaces;
let coreSelected = frontSpaces;
switch (data.tech_type) {
case this.TECH_TYPE.GENERAL.value:
generalSelected = '√' + behindSpaces;
break;
case this.TECH_TYPE.UNIVERSAL.value:
gMSelected = '√' + behindSpaces;
break;
case this.TECH_TYPE.KEY.value:
keySelected = '√' + behindSpaces;
break;
case this.TECH_TYPE.CORE.value:
coreSelected = '√' + behindSpaces;
break;
}
let notPlanningSelected = frontSpaces;
let underDevelopmentSelected = frontSpaces;
let purchasedSelected = frontSpaces;
switch (data.tech_status) {
case this.TECH_STATUS.UNPLANNED.value:
notPlanningSelected = '√' + behindSpaces;
break;
case this.TECH_STATUS.BEING_DEVELOPED.value:
underDevelopmentSelected = '√' + behindSpaces;
break;
case this.TECH_STATUS.PURCHASED.value:
purchasedSelected = '√' + behindSpaces;
break;
}
let inlandSelected = frontSpaces;
let industrySelected = frontSpaces;
let internationalSelected = frontSpaces;
switch (data.industry_status) {
case this.TECH_SITUATION.DOMESTIC_ADVANCED.value:
inlandSelected = '√' + behindSpaces;
break;
case this.TECH_SITUATION.INDUSTRY_ADVANCED.value:
industrySelected = '√' + behindSpaces;
break;
case this.TECH_SITUATION.INTERNATIONAL_ADVANCED.value:
internationalSelected = '√' + behindSpaces;
break;
}
const updateData: INodeData = {};
items = {
setTechType: {
name: 'Technical Type',
// icon: 'fa-dot-circle-o',
icon: (opt, $itemElement, itemKey, item) => {
$itemElement.html('<span class="mdi mdi-plus-circle"></span>');
return 'context-menu-icon-add11';
},
callback: async (itemKey, opt, rootMenu, originalEvent) => {
},
items: {
general: {
name: generalSelected + this.TECH_TYPE.GENERAL.key,
callback: (itemKey, opt, rootMenu, originalEvent) => {
updateData.tech_type = this.TECH_TYPE.GENERAL.value;
this.updateNode(updateData, EUpdateType.SIMPLE);
}
},
gm: {
name: gMSelected + this.TECH_TYPE.UNIVERSAL.key,
callback: () => {
updateData.tech_type = this.TECH_TYPE.UNIVERSAL.value;
this.updateNode(updateData, EUpdateType.SIMPLE);
}
},
key: {
name: keySelected + this.TECH_TYPE.KEY.key,
callback: () => {
updateData.tech_type = this.TECH_TYPE.KEY.value;
this.updateNode(updateData, EUpdateType.SIMPLE);
}
},
core: {
name: coreSelected + this.TECH_TYPE.CORE.key,
callback: () => {
updateData.tech_type = this.TECH_TYPE.CORE.value;
this.updateNode(updateData, EUpdateType.SIMPLE);
}
}
}
},
sep1: sep,
techStatus: {
name: 'Technical Status',
icon: (opt, $itemElement, itemKey, item) => {
$itemElement.html('<span class="mdi mdi-plus-circle"></span>');
return 'context-menu-icon-add22';
},
// icon: 'fa-dot-circle-o',
callback: async (itemKey, opt, rootMenu, originalEvent) => {
},
items: {
notPlanning: {
name: notPlanningSelected + this.TECH_STATUS.UNPLANNED.key,
callback: (itemKey, opt, rootMenu, originalEvent) => {
updateData.tech_status = this.TECH_STATUS.UNPLANNED.value;
this.updateNode(updateData, EUpdateType.SIMPLE);
}
},
underDevelopment: {
name: underDevelopmentSelected + this.TECH_STATUS.BEING_DEVELOPED.key,
callback: () => {
updateData.tech_status = this.TECH_STATUS.BEING_DEVELOPED.value;
this.updateNode(updateData, EUpdateType.SIMPLE);
}
},
purchased: {
name: purchasedSelected + this.TECH_STATUS.PURCHASED.key,
callback: () => {
updateData.tech_status = this.TECH_STATUS.PURCHASED.value;
this.updateNode(updateData, EUpdateType.SIMPLE);
}
}
}
},
sep2: sep,
industryStatus: {
name: 'Technical Situation',
icon: (opt, $itemElement, itemKey, item) => {
$itemElement.html('<span class="mdi mdi-plus-circle"></span>');
return 'context-menu-icon-add33';
},
// icon: 'fa-dot-circle-o',
callback: async (itemKey, opt, rootMenu, originalEvent) => {
},
items: {
inland: {
name: inlandSelected + this.TECH_SITUATION.DOMESTIC_ADVANCED.key,
callback: (itemKey, opt, rootMenu, originalEvent) => {
updateData.industry_status = this.TECH_SITUATION.DOMESTIC_ADVANCED.value;
this.updateNode(updateData, EUpdateType.SIMPLE);
}
},
industry: {
name: industrySelected + this.TECH_SITUATION.INDUSTRY_ADVANCED.key,
callback: () => {
updateData.industry_status = this.TECH_SITUATION.INDUSTRY_ADVANCED.value;
this.updateNode(updateData, EUpdateType.SIMPLE);
}
},
international: {
name: internationalSelected + this.TECH_SITUATION.INTERNATIONAL_ADVANCED.key,
callback: () => {
updateData.industry_status = this.TECH_SITUATION.INTERNATIONAL_ADVANCED.value;
this.updateNode(updateData, EUpdateType.SIMPLE);
}
}
}
},
sep3: sep,
remove: removeItem
};
}
return items;
}
when i use Submenus and custom icons，it always occur the mistake