In the example code from the repository (https://github.com/wix/react-native-calendars/blob/master/example/src/screens/agendaScreen.tsx) the code is a little complicated and in class rendering.
I just want to simply add an event to a day (doesn't matter what date) as an example to continue. :)
This is the code I have (it just makes the agenda without any events) :
export default function App() {
const [items,setItems] = useState([]);
const timeToString = (time) => {
const date = new Date(time);
return date.toISOString().split('T')[0];
}
const loadItems = (day) => {
const items = items || {};
setTimeout(() => {
for (let i = -15; i < 85; i++) {
const time = day.timestamp + i * 24 * 60 * 60 * 1000;
const strTime = timeToString(time);
if (!items[strTime]) {
items[strTime] = [];
const numItems = Math.floor(Math.random() * 3 + 1);
for (let j = 0; j < numItems; j++) {
items[strTime].push({
name: 'Item for ' + strTime + ' #' + j,
height: Math.max(50, Math.floor(Math.random() * 150)),
day: strTime
});
}
}
}
const newItems = {};
Object.keys(items).forEach(key => {
newItems[key] = items[key];
});
setItems(newItems)
}, 1000);
}
return (
<View style={styles.container}>
<Agenda
items={items}
loadItemsForMonth={loadItems}
selected={'2017-05-16'}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
Related
I am learning web worker and right now I am going through the problem of using await inside the onmessage. How can i do this?
import { Copc, Key } from "copc";
var nodePages, pages, receivedData;
async function load() {
let filename = "https://s3.amazonaws.com/data.entwine.io/millsite.copc.laz";
const copc = await Copc.create(filename);
let scale = copc.header.scale[0];
let [x_min, y_min, z_min, x_max, y_max, z_max] = copc.info.cube;
let width = Math.abs(x_max - x_min);
let center_x = (x_min + x_max) / 2;
let center_y = (y_min + y_max) / 2;
let center_z = (z_min + z_max) / 2;
receivedData = await Copc.loadHierarchyPage(
filename,
copc.info.rootHierarchyPage
);
nodePages = receivedData.nodes;
pages = receivedData.pages;
postMessage(200);
}
onmessage = function (message) {
let index = message.data;
let myRoot = nodePages[keyCountMap[m]];
const view = await Copc.loadPointDataView(filename, copc, myRoot);
};
and again there is another issue, the loadPointDataView function is asynchronous, how can i implement this in my webworker?
Any help please
This is my original code that i want to parallelize:
let filename = "https://s3.amazonaws.com/data.entwine.io/millsite.copc.laz";
const copc = await Copc.create(filename);
scale = copc.header.scale[0];
const { nodes: nodePages, pages: pages } = await Copc.loadHierarchyPage(
filename,
copc.info.rootHierarchyPage
);
for (let m = 0; m < keyCountMap.length; m += 2) {
let myRoot = nodePages[keyCountMap[m]];
const view = await Copc.loadPointDataView(filename, copc, myRoot);
let getters = ["X", "Y", "Z", "Intensity"].map(view.getter);
let chunkCount = 20;
let totalCalled = 0;
let innerPromises = [];
for (let j = 0; j < keyCountMap[m + 1]; j += chunkCount) {
readPoints(index + j, getters)
}
}
const readPoints = async (id, getters) => {
return new Promise((resolve, reject) => {
let returnPoint = getXyzi(id, getters);
positions.push(
returnPoint[0] - x_min - 0.5 * width,
returnPoint[1] - y_min - 0.5 * width,
returnPoint[2] - z_min - 0.5 * width
);
const vx = (returnPoint[3] / 65535) * 255;
color.setRGB(vx, vx, vx);
colors.push(color.r, color.g, color.b);
});
};
function getXyzi(index, getters) {
return getters.map((get) => get(index));
}
i have this function and can change the value between 1 and 2.
How to change this function to increment up to 120? (120 is limit)
const decrementAmount = () => {
let newAmount = Amount - 1;
if (newAmount < 1) {
newAmount = 1;
}
setAmount(newAmount);
};
const incrementAmount = () => {
let newAmount = Amount + 1;
if (newAmount > 2) {
newAmount = 2;
}
setAmount(newAmount);
};
I got it!
i changed my limit: "newAmount = 20;"
const decrementAmount = () => {
let newAmount = Amount - 1;
if (newAmount < 1) {
newAmount = 1;
}
setAmount(newAmount);
};
const incrementAmount = () => {
let newAmount = Amount + 1;
if (newAmount > 20) {
newAmount = 20;
}
setAmount(newAmount);
};
Im new to react native and Im working on a react native program, Im trying to run my code synchronously using useEffect, I tried to use await and promises but didn't work, this is how the code looks like
useEffect(() => {
dashBoard();
ret3();
}, []);
const [flag, setFlag] = useState(false);
const [within, setWitin] = useState(0);
const [above, setAbove] = useState(0);
const [under, setUnder] = useState(0);
const [bgArr, setBgArr] = useState([]);
const [lastBG, setLastBG] = useState(0);
const [lastBGtime, setLastBGtime] = useState('');
const [addBGlevel, setAddBGlevel] = useState(0);
const [startBG, setSBGP] = useState(0);
const [reason, setReason] = useState('');
//===========================Functions===============
const addBG = () => {
var time = new Date(); // Mon Jan 31 2022 23:07:59 GMT+0300 (+03)
var timeString = time.toString();
try {
db.transaction(tx => {
tx.executeSql(
'INSERT INTO BGLevel (UserID, BGlevel, DateTime) VALUES (?,?,?)',
[222, addBGlevel, timeString],
);
console.log('inserted!!');
});
} catch (error) {
console.log(error);
}
if (addBGlevel <= 70) {
navigation.navigate('hypo');
} else if (addBGlevel > startBG) {
//startbgcorr =150
navigation.navigate('Calc');
}else if (reason == '1'){
navigation.navigate('Calc');
}
};
const dashBoard = async () => {
await retrieveDash2();
var w = 0;
var a = 0;
var u = 0;
for (let i = 0; i < bgArr.length; i++) {
if (bgArr[i] >= fromBGHome && bgArr[i] <= toBGHome) {
w++;
} else if (bgArr[i] > toBGHome) {
a++;
} else if (bgArr[i] < fromBGHome) {
u++;
}
}
var total = w + a + u;
var m = (a / total) * 100;
if (m >= 50) {
setFlag(true);
} else {
setFlag(false);
}
setWitin(w);
setAbove(a);
setUnder(u);
};
//==================================================
//===========================RETRIVE================
const retrieveDash = () => {
// insulinPen table
try {
db.transaction(tx => {
tx.executeSql(
'SELECT UserID, fromBG, toBG FROM patientprofile',
[],
(tx, results) => {
var rows = results.rows;
for (let i = 0; i < rows.length; i++) {
var userid = rows.item(i).UserID;
if (userid == 222) {
fromBGHome = rows.item(i).fromBG;
toBGHome = rows.item(i).toBG;
return;
}
}
},
);
});
} catch (error) {
console.log(error);
}
};
//==================================================
const retrieveDash2 = async () => {
await retrieveDash();
var time = new Date(); // Mon Jan 31 2022 23:07:59 GMT+0300 (+03)
var bgArr1 = [];
// insulinPen table
try {
db.transaction(tx => {
tx.executeSql(
'SELECT UserID, BGlevel, DateTime FROM BGLevel',
[],
(tx, results) => {
var rows = results.rows;
var lastString = rows.item(rows.length - 1).DateTime;
var d = new Date(lastString);
var momFormat = moment(d).format('yyyy/MM/DD hh:mm a');
setLastBGtime(momFormat);
setLastBG(rows.item(rows.length - 1).BGlevel);
for (let i = 0; i < rows.length; i++) {
var timeString = rows.item(i).DateTime;
var toObj = new Date(timeString);
var bgHome = rows.item(i).BGlevel;
var userid = rows.item(i).UserID;
console.log((time - toObj) / (1000 * 60 * 60));
if ((time - toObj) / (1000 * 60 * 60) <= 168) {
//168 is the last 7 days in hours
bgArr1.push(bgHome);
}
}
setBgArr(bgArr1);
console.log(bgArr1 + ' This is bg array');
console.log(
fromBGHome + ' ' + toBGHome + ' This is from and to',
);
},
);
});
} catch (error) {
console.log(error);
}
};
//==================================================
const ret3 = () => {
try {
db.transaction(tx => {
tx.executeSql(
'SELECT UserID startBG_correct FROM patientprofile',
[],
(tx, results) => {
var rows = results.rows;
for (let i = 0; i < rows.length; i++) {
var UID = rows.item(i).UserID;
if (UID == 222) {
var start = rows.item(i).startBG_correct;
setSBGP(start);
}
}
},
);
});
} catch (error) {
console.log(error);
}
};
and I want the functions to run before the interface is completely loaded so I used the following way
{bgArr.length > 0 && (within > 0 || above > 0 || under > 0) ? (
<PieChart
data={data}
width={widthScreen}
height={150}
chartConfig={chartConfig}
accessor={'population'}
backgroundColor={'#ECECEC'}
//absolute
/>
) : (
<ActivityIndicator size="large" />
)}
but it keeps loading and never show the interface until I run the program again
I need the code to work directly when loading the page in the following order
1-retrieveDash
2-retrieveDash2
3-dashBoard
import React, {
useEffect,
useState
} from "react";
import "./sortingVisualiser.css";
const rnadomIntFromInterval = (min, max) => {
return Math.floor(Math.random() * (max - min + 1) + min);
};
function waitforme(milisec) {
return new Promise((resolve) => {
setTimeout(() => {
resolve("");
}, milisec);
});
}
const SortVisualiser = () => {
const [array, setArray] = useState([]);
const resetArray = () => {
const arr = [];
for (let i = 0; i < 10; i++) {
arr.push(rnadomIntFromInterval(5, 600));
}
setArray(arr);
};
useEffect(() => {
resetArray();
}, []);
const bubbleSort = async() => {
const a = document.getElementsByClassName("array-bar");
let i = 0;
for (i = 0; i < a.length; i++) {
for (let j = 0; j < a.length - i - 1; j++) {
a[j].style.background = "blue";
a[j + 1].style.background = "blue";
if (parseInt(a[j].style.height) >= parseInt(a[j + 1].style.height)) {
await waitforme(1000);
let temp1 = a[j].style.height;
let temp2 = a[j + 1].style.height;
temp1 = temp1.substring(0, temp1.length - 2);
temp2 = temp2.substring(0, temp2.length - 2);
a[j + 1].style.height = `${parseInt(temp1)}px`;
a[j].style.height = `${parseInt(temp2)}px`;
}
a[j].style.background = "Turquoise";
a[j + 1].style.background = "Turquoise";
}
a[a.length - 1 - i].style.background = "green";
}
a[0].style.background = "green";
};
return ( <
div className = "array-container" > {
array.map((value, idx) => {
return ( <
div className = "array-bar"
style = {
{
backgroundColor: "Turquoise",
height: `${value}px`
}
}
key = {
idx
} >
< /div>
);
})
} <
button onClick = {
resetArray
} > Generate New Array < /button> <
button onClick = {
() => bubbleSort()
} > Bubble Sort < /button> <
/div>
);
};
export default SortVisualiser;
**
const resetArray = () => {
const arr = [];
for (let i = 0; i < 10; i++) {
arr.push(rnadomIntFromInterval(5, 600));
}
setArray(arr);
When I am resetting the array I am getting the previous green color not the default color**
** useEffect(() => {
resetArray();
}, []);
Here I am initialising the array when the component mounts**
** a[j].style.background = "blue";
a[j + 1].style.background = "blue";
Here I am changing the currently comparing elements to blue**
** a[j + 1].style.height = `${parseInt(temp1)}px`;
a[j].style.height = `${parseInt(temp2)}px`;
Here I am updating the heights of current swapped bars**
** a[j].style.background = "Turquoise";
a[j + 1].style.background = "Turquoise";
Here I am changing back the colors of swapped bars to default color**
**a[a.length - 1 - i].style.background = "green";
Setting the color of sorted bar to green**
**button onClick = {
resetArray
} > Generate New Array < /button> <
button onClick = {
() => bubbleSort()
} > Bubble Sort < /button>
Now after sorting the array I need to reset the array but when I am resetting the array
I am getting the bars of green color which should not be because as I am resetting the array I am updating the state variable which in to re renders the component so I when I re iterate through the array I should get the bars of Turquoise color but instead I am getting bars of green color **
You are changing the inline styles already in your bubbleSort function. And again after rerender its taking its older value of inline styles. One solution could be to unmount the div and re-render. Or the workaround solution for now would be to change the styles again like below. And call this function in your resetArray() function
const resetColor = () => {
const a = document.getElementsByClassName("array-bar");
for (let i = 0; i < a.length; i++) {
for (let j = 0; j < a.length - i - 1; j++) {
a[j].style.background = "Turquoise";
a[j + 1].style.background = "Turquoise";
}
}
}
import { Component, OnInit, AfterViewInit, Input, Output, EventEmitter, OnChanges, SimpleChanges, OnDestroy } from '#angular/core';
import { interval } from 'rxjs/observable/interval';
import { IChartModel } from './model/flow-data';
import { HelperService } from '../../core/helper/helper.service';
import { NgFlowchartService } from './ng-flowchart.service';
declare let $;
#Component({
selector: 'app-ng-flowchart',
templateUrl: './ng-flowchart.component.html',
styleUrls: ['./ng-flowchart.component.css'],
})
export class NgFlowchartComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
#Input('data') flowchartData: IChartModel;
#Input() event: any;
currentElement = 'dp_flowchart';
// operatorId = 2;
operatorId: string;
// flowchartData;
possibleZooms = [0.5, 0.75, 1, 2, 3];
currentZoom = 2;
subscribeInterval: any;
constructor(
private helperService: HelperService,
private ngFlowchartService: NgFlowchartService
) { }
private autoSaveWorkflow() {
const $flowchart = $('#' + this.currentElement);
const source = interval(1000);
this.subscribeInterval = source.subscribe(val => {
const flowchartData = $flowchart.flowchart('getData');
const currentData = JSON.stringify(flowchartData);
const previousData = localStorage.getItem('ui.flowchart');
if (previousData !== currentData) {
localStorage.setItem('ui.flowchart', currentData);
}
});
}
ngOnInit() {
this.ngFlowchartService.currentMessage.subscribe(message => {
if (message.action && message.action === 'ng-clear-editor') {
setTimeout(() => {
this.clearEditor();
}, 100);
}
});
}
setFlowchartData(data) {
const $flowchart = $('#' + this.currentElement);
$flowchart.flowchart('setData', data);
}
ngOnChanges(changes: SimpleChanges) {
// console.log(changes);
this.dataChanges(changes);
}
private initFlowchartData() {
if (localStorage.getItem('ui.flowchart')) {
return JSON.parse(localStorage.getItem('ui.flowchart'));
} else {
return this.flowchartData;
}
}
ngAfterViewInit() {
setTimeout(() => {
this.advanceOption();
this.autoSaveWorkflow();
}, 100);
}
private dataChanges(changes) {
if (changes.hasOwnProperty('event')) {
if (changes.event.currentValue) {
if (changes.event.previousValue) {
/** Have current and previous state */
const data = {
curIn: +(changes.event.currentValue.inputCount),
preIn: +(changes.event.previousValue.inputCount),
curOut: +(changes.event.currentValue.outputCount),
preOut: +(changes.event.previousValue.outputCount)
};
if (data.curIn !== data.preIn || data.curOut !== data.preOut) {
this.addEndPoint(changes.event.currentValue);
}
} else {
/** Have only current state */
const data = {
curIn: +(changes.event.currentValue.inputCount),
curOut: +(changes.event.currentValue.outputCount)
};
if (data.curIn !== 1 || data.curOut !== 1) {
this.addEndPoint(changes.event.currentValue);
}
}
}
}
}
private addEndPoint(endpoint) {
// console.log(endpoint);
/**
* 1. Find the component in the chart data (using unique identifier - type as 'Event')
* 2. If already +++++input & output endpoints there then create remaining only
* 3. If input or output count less the previous one and have a connection (link)
* associated with the endpoint then popup comfirmation dialog for removing the
* desired in/out.
*/
const $flowchart = $('#' + this.currentElement);
const flowchartData = $flowchart.flowchart('getData');
Object.keys(flowchartData['operators']).forEach((key) => {
if (endpoint.eventName === flowchartData.operators[key].type.eventName) {
let inLen = Object.keys(flowchartData.operators[key].properties.inputs).length;
let outLen = Object.keys(flowchartData.operators[key].properties.outputs).length;
const _inLen = +endpoint.inputCount - inLen;
const _outLen = +endpoint.outputCount - outLen;
let loopFlag = false;
if (_inLen !== 0) {
loopFlag = true;
if (_inLen < 0) {
inLen = inLen + _inLen;
for (let i = inLen; i > Math.abs(inLen + _inLen); i--) {
const _key = Object.keys(flowchartData.operators[key].properties.inputs)[i];
delete flowchartData.operators[key].properties.inputs[_key];
}
} else {
for (let i = (inLen - 1); i < (inLen + _inLen); i++) {
flowchartData.operators[key].properties.inputs['input_' + i] = {
label: 'IN_' + (i + 1)
};
}
}
}
if (_outLen !== 0) {
loopFlag = true;
if (_outLen < 0) {
outLen = outLen + _outLen;
for (let i = outLen; i > Math.abs(outLen + _outLen); i--) {
const _key = Object.keys(flowchartData.operators[key].properties.outputs)[i];
delete flowchartData.operators[key].properties.outputs[_key];
}
} else {
for (let i = (outLen - 1); i < (outLen + _outLen); i++) {
flowchartData.operators[key].properties.outputs['output_' + i] = {
label: 'OUT_' + (i + 1)
};
}
}
}
if (loopFlag) {
$flowchart.flowchart('setData', flowchartData);
}
}
});
}
private advanceOption() {
const self = this;
const $flowchart = $('#' + this.currentElement);
const $container = $flowchart.parent();
const cx = $flowchart.width() / 2;
const cy = $flowchart.height() / 2;
// Panzoom initialization...
$flowchart.panzoom();
// Centering panzoom
$flowchart.panzoom('pan', -cx + $container.width() / 2, -cy + $container.height() / 2);
// Panzoom zoom handling...
const possibleZooms = [0.5, 0.75, 1, 2, 3];
let currentZoom = 2;
$container.on('mousewheel.focal', function (e) {
e.preventDefault();
const delta = (e.delta || e.originalEvent.wheelDelta) || e.originalEvent.detail;
const zoomOut: any = delta ? delta < 0 : e.originalEvent.deltaY > 0;
currentZoom = Math.max(0, Math.min(possibleZooms.length - 1, (currentZoom + (zoomOut * 2 - 1))));
$flowchart.flowchart('setPositionRatio', possibleZooms[currentZoom]);
$flowchart.panzoom('zoom', possibleZooms[currentZoom], {
animate: false,
focal: e
});
});
// Apply the plugin on a standard, empty div...
$flowchart.flowchart({
data: this.initFlowchartData(),
onOperatorCreate: function (operatorId, operatorData, fullElement) {
// console.log(fullElement);
// console.log('New operator created. Operator ID: "' + operatorId + '", operator title: "' + operatorData.properties.title + '".');
return true;
},
onOperatorSelect: function (operatorId, data) {
self.componentSelect.emit({
id: operatorId,
title: $flowchart.flowchart('getOperatorTitle', operatorId),
data: $flowchart.flowchart('getOperatorData', operatorId)
});
return true;
},
// Operators Unselected
onOperatorUnselect: function () {
self.componentDeSelected.emit({
action: 'operator-deselected'
});
return true;
},
onOperatorDelete: function (operatorId) {
const operatorType = $flowchart.flowchart('getOperatorData', operatorId).type;
if (operatorType.eventName) {
/** Once remove event from editor need to enable it again in event panel */
self.ngFlowchartService.send({
action: 'ng-event-deleted',
data: {
eventName: operatorType.eventName,
operatorId: operatorId
}
});
}
return true;
},
onLinkDelete: function (linkId, forced) {
// delete self.flowchartData['links'][linkId];
// console.log('Link deleted. Link ID: "' + linkId + '", link color: "' + $flowchart.flowchart('getLinkMainColor', linkId) + '".');
return true;
},
onLinkCreate: function (linkId, linkData) {
if (self.rule && self.rule.isEnabled) {
const fromoprtype = $flowchart.flowchart('getOperatorData', linkData.fromOperator).type;
const tooprtype = $flowchart.flowchart('getOperatorData', linkData.toOperator).type;
const rule = self.rule.rules['rule'];
const firstRule = fromoprtype['type'] || 'Component';
const secondRule = tooprtype['type'] || 'Component';
return rule[firstRule + ':' + secondRule];
}
self.flowchartData['links'][linkId] = linkData;
delete self.flowchartData['links'][linkId]['internal'];
// console.log('New link created. Link ID: "' + linkId + '", link color: "' + linkData.color + '".');
return true;
},
onLinkSelect: function (linkId) {
const flowchartObject = $flowchart.flowchart('getData');
const linkObject = flowchartObject.links[linkId];
const fromOperator = flowchartObject.operators[linkObject.fromOperator];
const toOperator = flowchartObject.operators[linkObject.toOperator];
const fromType = fromOperator.type.hasOwnProperty('eventName') ? 'Event' : 'Component';
const toType = toOperator.type.hasOwnProperty('eventName') ? 'Event' : 'Component';
const title = `Link: ${fromOperator.properties.title} - ${toOperator.properties.title}`;
self.componentSelect.emit({
id: linkId,
title: title,
data: {
type: {
isLink: true,
data: linkObject,
linkData: {
fromOperator: fromOperator.properties.title,
fromType: fromType,
toOperator: toOperator.properties.title,
toType: toType
}
}
}
});
return true;
}
});
const $draggableOperators = $('.draggable_operator');
$draggableOperators.draggable({
cursor: 'move',
opacity: 0.7,
// helper: 'clone',
appendTo: 'body',
zIndex: 1000,
});
}
private addNewComponent(event: any) {
// console.log(event);
const $flowchart = $('#' + this.currentElement);
let componentTitle;
componentTitle = (event.dragData.eventName) ? `${event.dragData.displayName}` : `${event.dragData.name}`;
this.operatorId = this.helperService.getUniqueId();
if (event.dragData.eventName) {
/** Component is an 'event' type */
const flowchartObject = $flowchart.flowchart('getData');
const operators = flowchartObject.operators;
for (let i = 0; i < Object.keys(operators).length; i++) {
const component = operators[Object.keys(operators)[i]];
if (event.dragData.eventName === component.type.eventName) {
return;
}
}
/** 1. Send operator details back to event panel for disabling the dropped event
* 2. Once remove event from editor need to enable it again in event panel
* 2. After rerender pipeline we need to set it again (pending)
*/
this.ngFlowchartService.send({
action: 'ng-event-added',
data: {
eventName: event.dragData.eventName,
operatorId: this.operatorId
}
});
}
const inputObject = {};
const outputObject = {};
if (event.dragData.hasOwnProperty('componentUIMetaData') && event.dragData.componentUIMetaData.hasOwnProperty('connector')) {
const iCount = event.dragData.componentUIMetaData.connector.endpoint.in || 0;
const oCount = event.dragData.componentUIMetaData.connector.endpoint.out || 0;
for (let i = 0; i < iCount; i++) {
inputObject['input_' + i] = {
label: 'IN_' + (i + 1)
};
}
for (let i = 0; i < oCount; i++) {
outputObject['output_' + i] = {
label: 'OUT_' + (i + 1)
};
}
}
const operatorData = {
top: event.nativeEvent.offsetY - 20,
left: event.nativeEvent.offsetX - 20,
type: event.dragData,
properties: {
title: componentTitle,
inputs: inputObject,
outputs: outputObject,
}
};
// this.operatorId++;
$flowchart.flowchart('createOperator', this.operatorId, operatorData);
if (event.dragData.hasOwnProperty('type') && (event.dragData.type === 'Event')) {
const cssClass = 'flowchart-operator-title ui-draggable-handle titleClass';
event.nativeEvent.currentTarget.childNodes[1].lastChild.children[0].classList.value = cssClass;
}
}
onComponentDrop(event: any) {
// console.log(event);
this.addNewComponent(event);
}
deleteSelected() {
const $flowchart = $('#' + this.currentElement);
$flowchart.flowchart('deleteSelected');
}
getFlowchartData() {
const $flowchart = $('#' + this.currentElement);
return $flowchart.flowchart('getData');
}
ngOnDestroy() {
if (this.subscribeInterval) {
this.subscribeInterval.unsubscribe();
}
}
}
<div class="flowchart-example">
<div id="chart_container">
<div class="zoom-panel-container">
</div>
<div class="flowchart-example-container" id="dp_flowchart" droppable [dropScope]="'component'" (onDrop)="onComponentDrop($event)"></div>
</div>
</div>
https://github.com/sdrdis/jquery.flowchart enter link description here
I am trying to add custom styles on operator header title to change the color it using jquery/JS but the issue is styles is coming to every operator while dragging.
I have to add custom styles on this class: "flowchart-operator-title ui-draggable-handle"
My requirement:
Add Custom styles if the JSON key matches only as well as add images only if condition matches. Can you please help?
Here inside code i am using function addNewComponent which i am used for drag and drop