Hi,
Angular Selectable fields is verified and applied in my codes. Thanks. And selection is able to retrieve the itemArray record while isSelectedField(), setSelectableFileds() and onFieldClick() methods are part of InitDiagram method.
From above class level - assigned property of selected Item Array (this.taskID, this.addUser of selected device and user) is not accessible at ngAfterViewInit() or at saveUsers() methods. which is undefined. Below is the part of initDiagram() is able to retrieve the selected item Array data.
const UnselectedBrush = "lightgray"; // item appearance, if not "selected"
// const SelectedBrush = "cyan"; // item appearance, if "selected"
// const isFieldSelected = (item) => { return item.background !== UnselectedBrush; };
// const setFieldSelected = (item, sel) => {
// if (sel) {
// item.background = SelectedBrush;
// console.log(item.data.name)
// if (!item.data.id) {
// this.addUser = item.data.name
// console.log(this.addUser)
// console.log("addUser = " + this.addUser)
// } else {
// this.taskID = item.data.id
// console.log("taskID == " + this.taskID)
// }
// } else {
// item.background = UnselectedBrush;
// }
// }
Next as per your update, added two way bindings and brought the isSelectedField(), setSelectableFileds() and onFieldClick() methods as instance methods of the diagram component.
Am getting TypeError C is not a function due to click event - this.onFieldClick().
Now, from Selectable Fields example trying to apply the findAllSelectedItems method in my Input Event (“ObjectSingleClicked”) approach as below
Kindly request your help to get and save the selected Item Array.
public state: AppState = {
// Diagram state props
fixedConfNodeData: [
{ key: "Devices List" },
{ key: "Users List" }
],
skipsDiagramUpdate: false,
};
public initDiagram(): go.Diagram {
const $ = go.GraphObject.make
console.log("Inside init CALL-DIAGRAM >>>")
const callDia = $(go.Diagram, {
"undoManager.isEnabled": true,
validCycle: go.Diagram.CycleNotDirected, // don't allow loops
layout:
$(go.GridLayout, { sorting: go.GridLayout.Forward }), // use a GridLayout
model: new go.GraphLinksModel(
{
copiesArrays: true,
copiesArrayObjects: true,
linkFromPortIdProperty: "fromPort",
linkToPortIdProperty: "toPort",
nodeKeyProperty: 'key',
linkKeyProperty: 'key', // IMPORTANT! must be defined for merges and data sync when using GraphLinksModel
// positive keys for nodes
makeUniqueKeyFunction: (m: go.Model, data: any) => {
let k = data.key || 1;
while (m.findNodeDataForKey(k)) k++;
data.key = k;
return k;
},
// negative keys for links
makeUniqueLinkKeyFunction: (m: go.GraphLinksModel, data: any) => {
let k = data.key || -1;
while (m.findLinkDataForKey(k)) k--;
data.key = k;
return k;
},
}
),
}
);
const onFieldClick = (e, item) => {
let oldskips = item.diagram.skipsUndoManager;
item.diagram.skipsUndoManager = true;
if (e.control || e.meta) {
this.setFieldSelected(item, !this.isFieldSelected(item));
item.part.isSelected = item.panel.elements.any(this.isFieldSelected);
} else if (e.shift) {
// alternative policy: select all fields between this item and some other one??
if (!this.isFieldSelected(item)) this.setFieldSelected(item, true);
item.part.isSelected = true;
} else {
if (!this.isFieldSelected(item)) {
// deselect all sibling items
item.panel.elements.each(it => {
if (it !== item) this.setFieldSelected(it, false);
});
this.setFieldSelected(item, true);
console.log(item.data.id)
}
item.part.isSelected = true;
}
item.diagram.skipsUndoManager = oldskips;
}
const fieldTemplate = $(go.Panel, "Auto", // this Panel is a row in the containing Table
new go.Binding("portId", "name").makeTwoWay(), // this Panel is a "port"
{
background: "lightgray",
alignment: go.Spot.Center,
},
{ click: onFieldClick }, // select items -- the background indicates "selected" when not UnselectedBrush
$(go.Shape, "RoundedRectangle", roundedRectangleParams,
{
name: "SHAPE",
fill: "transparent",
strokeWidth: 0,
width: 160,
height: 100,
margin: 45,
alignment: go.Spot.Center,
},
),
$(go.Panel, "Vertical",
$(go.Panel, "Table",
$(go.TextBlock,
{
row: 0, alignment: go.Spot.Center,
font: "16pt Sego UI,sans-serif",
stroke: "rgba(0, 0, 0, .87)",
maxSize: new go.Size(150, NaN),
},
new go.Binding("text", "name").makeTwoWay()
),
)
)
);
callDia.nodeTemplate = $(go.Node, "Auto",
{
alignment: go.Spot.Center,
isShadowed: true, shadowBlur: 5,
shadowOffset: new go.Point(1, 5),
shadowColor: "rgba(0, 0, 0, 1)",
},
$(go.Shape, "RoundedRectangle",
{
fill: "transparent",//this.UnselectedBrush,
stroke: "lightyellow",
strokeWidth: 0.25,
stretch: go.GraphObject.UniformToFill, // as wide as the whole node
},
new go.Binding("fill", "isSelected", b => b ? this.SelectedBrush : this.UnselectedBrush).ofObject().makeTwoWay(),
),
// the content consists of a header and a list of items
$(go.Panel, "Vertical",// "Horizontal",
// this is the header for the whole node
$(go.Panel, "Auto",
{
stretch: go.GraphObject.UniformToFill,
isPanelMain: true
}, // as wide as the whole node
$(go.Shape,
{ fill: "cyan", stroke: null, height: 60 }), //"#1570A6"
$(go.TextBlock,
{
alignment: go.Spot.Center,
margin: 3,
stroke: "black",
textAlign: "center",
font: "bold 16pt Sego UI,sans-serif",
maxSize: new go.Size(150, NaN),
},
new go.Binding("text", "key").makeTwoWay())),
// this Panel holds a Panel for each item object in the itemArray;
// each item Panel is defined by the itemTemplate to be a TableRow in this Table
$(go.Panel, "Horizontal", // "Table",
new go.Binding("itemArray", "fields"),
{
name: "TABLE",
padding: 2,
minSize: new go.Size(100, 15),
defaultStretch: go.GraphObject.Horizontal,
itemTemplate: fieldTemplate
},
) // end Table Panel of items
) // end Vertical Panel
);// END CallDia.NodeTemplate
return callDia;
};
public fixedConfDiagram = null;
public ngAfterViewInit() {
if (this.fixedConfDiagram) return;
this.fixedConfDiagram = this.fixedConfComponent.diagram;
let fixConfDeviceKey = this.state.fixedConfNodeData[0].key;
this.service.getRecords(this.fixedConference_url).subscribe((result) => {
this.confData = result;
this.updateFields(fixConfDeviceKey, result)
});
let usersKey = this.state.fixedConfNodeData[1].key
this.service.getRecords(this.profileUsers_url).subscribe((result) => {
this.userData = result
this.updateFields(usersKey, result)
});
this.fixedConfDiagram.addDiagramListener("ObjectSingleClicked", (e) => {
let part = e.subject.part.data.key
// let selecteditems = [];
if (part === "Devices List") {
let items = e.subject.part.data.fields
console.log(items)
}
else console.log("false.. IT is USERS LIST")
const items = [];
for (const nit = this.fixedConfDiagram.nodes; nit.next();) {
const node = nit.value;
console.log(node.data)
const table = node.findObject("TABLE");
if (table) {
for (const iit = table.elements; iit.next();) {
const itempanel = iit.value;
console.log(itempanel.data)
if (this.isFieldSelected(itempanel)) items.push(itempanel);
}
}
}
console.log(items)
console.log("LISTENER = addUser = " + this.addUser)
console.log("LISTENER = taskID = " + this.taskID)
});
};
saveMembers() {
console.log("saveMembers is called")
console.log(this.taskID)
console.log(this.addUser)
};
updateFields = (key, fieldsArray) => {
const data = this.fixedConfDiagram.model.findNodeDataForKey(key);
if (!data) return;
this.fixedConfDiagram.model.commit(m => m.set(data, "fields", fieldsArray));
};
UnselectedBrush = "lightgray"; // item appearance, if not "selected"
SelectedBrush = "cyan"; // item appearance, if "selected"
isFieldSelected = (item) => { return item.background !== this.UnselectedBrush; };
setFieldSelected = (item, sel) => {
if (sel) {
item.background = this.SelectedBrush;
console.log(item.panel.data.name)
} else {
item.background = this.UnselectedBrush;
}
};
}
