Can this be implemented with Livewire #311
Assignees
Labels
question
Further information is requested
Comments
|
I don't know livewire. Your code, facebook??? var id = document.getElementById("drawflow");
const editor = new Drawflow(facebook);Change for: var id = document.getElementById("drawflow");
const editor = new Drawflow(id);Add to head or before your script. Add to style do drawflow div #drawflow {
position: relative;
text-align:initial;
width: 800px;
height:800px;
} |
|
Don't need the Facebook in particular I used that to for testing. I only require the 'Template' but in various styles. Will include your suggestions and post the results here. |
|
Included your suggestions however no luck; Here is the complete Drawflow CSS file: Included the Here is the revised Layout file Still getting this error on page load And, this error on drag Can I remove the huge chunk of code and start with the basics? what do I need to do? Just drag a div from the left-hand side to right-hand side. And, then build up further by dragging multiple divs and connecting the nodes to them. Probably will be able to rectify my error in that manner. |
|
This line: It tells you that you have an error in the code. I see this has not changed: var id = document.getElementById("drawflow");
const editor = new Drawflow(facebook);For: var id = document.getElementById("drawflow");
const editor = new Drawflow(id);View a simple example in html file: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
</head>
<body>
<div id="drawflow"></div>
<style>
#drawflow {
position: relative;
text-align:initial;
width: 100%;
height: 800px;
border: 1px solid red;
}
</style>
<script>
var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.start();
editor.addNode('aaa', 0, 1, 100, 300, 'aaa', {}, 'aaa' );
editor.addNode('bbb', 1, 0, 200, 400, 'bbb', {}, 'bbb' );
editor.addNode('ccc', 1, 0, 500, 500, 'ccc', {}, 'ccc' );
</script>
</body>
</html> |
|
Okay, the sample code works perfectly fine! Thanks. Will play around with creating my custom divs and post here if required. Thanks once again. |
|
Where do I customise these?
Also is there a right click functionality to add nodes? Instead of drag drop |
|
You can customise with class (6 parameter) editor.addNode(name, inputs, outputs, posx, posy, class, data, html);There is no context menu. But you can develop an example here with a node. #187 (comment) |
|
Hi, I created a test text node by using this code However, the text box overflows the node div. Also, I inserted What I am trying to achieve is something similar to the Template node with custom colors and layout. How do I achieve this? |
|
For the line connection try css: .drawflow .connection .main-path {
stroke-width: 1px;
}You just have to modify css to adapt the theme. |
|
I used the Theme Generator to create a custom style and added it to my app.css. However, the only thing that changed is the size of the node div and nothing else. So i did the following: and added the stylesheet for custom theme The theme and color scheme were updated however it messed up the layout completely. |
|
You don't have to remove the drawflow.min.css. |
|
Oops. So I just append the customised theme code to the default drawflow.min.css? |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css"/>
<link rel="stylesheet" href="YOUR CSS FILE"/>You will also need to add the drawflow css. #drawflow {
position: relative;
text-align:initial;
width: 100%;
height: 800px;
border: 1px solid red;
} |
|
Have done this. However no luck. The thing is that certain custom features are being shown but not all of them. Like in the current scenario the hover style is being displayed however unable to override the Selected style, the node styles among others. PS: Thank you for patiently replying to all my messages :-) Edit: Yes I am adding the #drawflow as well to the code. Actually appending it to my custom theme generated code so it looks like this now: |
|
In themas generator. |
|
Yes yes. I have customised the whole thing right to the delete button and copy pasted the generated code in my drawflow.css file. But only the hover commands are working. I have customised the Node Selected option but my custom theme doesn't show instead the default red color for selected node shows. I shall copy paste my entire generated theme code if required. |
|
Maybe the generator is some versions below. But I think you can see how the css is modified to customize it. |
|
Hi, I have tried the following things:
None of these options work. Here is my custom theme generated code from the Theme generator link my main app contains the information The hover style works but the node selected style reverts to your it being red color: This is my drawflow layout file: |
|
With you code:
Test in html <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
</head>
<body>
<div id="drawflow"></div>
<style>
#drawflow {
position: relative;
text-align:initial;
width: 100%;
height: 800px;
border: 1px solid red;
}
:root {
--dfBackgroundColor: rgba(250, 253, 251, 1);
--dfBackgroundSize: 0px;
--dfBackgroundImage: none;
--dfNodeType: flex;
--dfNodeTypeFloat: none;
--dfNodeBackgroundColor: rgba(255, 255, 255, 1);
--dfNodeTextColor: rgba(0, 0, 0, 1);
--dfNodeBorderSize: 1px;
--dfNodeBorderColor: rgba(0, 0, 0, 1);
--dfNodeBorderRadius: 4px;
--dfNodeMinHeight: 35px;
--dfNodeMinWidth: 210px;
--dfNodePaddingTop: 15px;
--dfNodePaddingBottom: 15px;
--dfNodeBoxShadowHL: 0px;
--dfNodeBoxShadowVL: 0px;
--dfNodeBoxShadowBR: 0px;
--dfNodeBoxShadowS: 0px;
--dfNodeBoxShadowColor: #000000;
--dfNodeHoverBackgroundColor: rgba(255, 255, 255, 1);
--dfNodeHoverTextColor: #000000;
--dfNodeHoverBorderSize: 2px;
--dfNodeHoverBorderColor: rgba(0, 65, 208, 1);
--dfNodeHoverBorderRadius: 4px;
--dfNodeHoverBoxShadowHL: 0px;
--dfNodeHoverBoxShadowVL: 0px;
--dfNodeHoverBoxShadowBR: 0px;
--dfNodeHoverBoxShadowS: 0px;
--dfNodeHoverBoxShadowColor: #4ea9ff;
--dfNodeSelectedBackgroundColor: rgba(207, 239, 250, 1);
--dfNodeSelectedTextColor: rgba(0, 65, 208, 1);
--dfNodeSelectedBorderSize: 1px;
--dfNodeSelectedBorderColor: rgba(0, 65, 208, 1);
--dfNodeSelectedBorderRadius: 4px;
--dfNodeSelectedBoxShadowHL: 0px;
--dfNodeSelectedBoxShadowVL: 2px;
--dfNodeSelectedBoxShadowBR: 15px;
--dfNodeSelectedBoxShadowS: 1px;
--dfNodeSelectedBoxShadowColor: rgba(78, 169, 255, 0.5);
--dfInputBackgroundColor: rgba(255, 255, 255, 1);
--dfInputBorderSize: 1px;
--dfInputBorderColor: #000000;
--dfInputBorderRadius: 50px;
--dfInputLeft: -24px;
--dfInputHeight: 14px;
--dfInputWidth: 14px;
--dfInputHoverBackgroundColor: #ffffff;
--dfInputHoverBorderSize: 2px;
--dfInputHoverBorderColor: #000000;
--dfInputHoverBorderRadius: 50px;
--dfOutputBackgroundColor: rgba(255, 193, 7, 1);
--dfOutputBorderSize: 1px;
--dfOutputBorderColor: #000000;
--dfOutputBorderRadius: 50px;
--dfOutputRight: -7px;
--dfOutputHeight: 14px;
--dfOutputWidth: 14px;
--dfOutputHoverBackgroundColor: rgba(255, 193, 7, 1);
--dfOutputHoverBorderSize: 2px;
--dfOutputHoverBorderColor: #000000;
--dfOutputHoverBorderRadius: 50px;
--dfLineWidth: 3px;
--dfLineColor: rgba(0, 65, 208, 1);
--dfLineHoverColor: rgba(0, 77, 247, 1);
--dfLineSelectedColor: rgba(71, 193, 25, 1);
--dfRerouteBorderWidth: 2px;
--dfRerouteBorderColor: #000000;
--dfRerouteBackgroundColor: #ffffff;
--dfRerouteHoverBorderWidth: 2px;
--dfRerouteHoverBorderColor: #000000;
--dfRerouteHoverBackgroundColor: #ffffff;
--dfDeleteDisplay: block;
--dfDeleteColor: rgba(0, 65, 208, 1);
--dfDeleteBackgroundColor: rgba(250, 253, 251, 1);
--dfDeleteBorderSize: 1px;
--dfDeleteBorderColor: rgba(0, 65, 208, 1);
--dfDeleteBorderRadius: 50px;
--dfDeleteTop: -15px;
--dfDeleteHoverColor: rgba(0, 65, 208, 1);
--dfDeleteHoverBackgroundColor: #ffffff;
--dfDeleteHoverBorderSize: 2px;
--dfDeleteHoverBorderColor: rgba(0, 65, 208, 1);
--dfDeleteHoverBorderRadius: 50px;
}
#drawflow {
background: var(--dfBackgroundColor);
background-size: var(--dfBackgroundSize) var(--dfBackgroundSize);
background-image: var(--dfBackgroundImage);
position: relative;
text-align: initial;
width: 100%;
height: 1000px;
border: 1px solid black;
}
.drawflow .drawflow-node {
display: var(--dfNodeType);
background: var(--dfNodeBackgroundColor);
color: var(--dfNodeTextColor);
border: var(--dfNodeBorderSize) solid var(--dfNodeBorderColor);
border-radius: var(--dfNodeBorderRadius);
min-height: var(--dfNodeMinHeight);
width: auto;
min-width: var(--dfNodeMinWidth);
padding-top: var(--dfNodePaddingTop);
padding-bottom: var(--dfNodePaddingBottom);
-webkit-box-shadow: var(--dfNodeBoxShadowHL) var(--dfNodeBoxShadowVL) var(--dfNodeBoxShadowBR) var(--dfNodeBoxShadowS) var(--dfNodeBoxShadowColor);
box-shadow: var(--dfNodeBoxShadowHL) var(--dfNodeBoxShadowVL) var(--dfNodeBoxShadowBR) var(--dfNodeBoxShadowS) var(--dfNodeBoxShadowColor);
}
.drawflow .drawflow-node:hover {
background: var(--dfNodeHoverBackgroundColor);
color: var(--dfNodeHoverTextColor);
border: var(--dfNodeHoverBorderSize) solid var(--dfNodeHoverBorderColor);
border-radius: var(--dfNodeHoverBorderRadius);
-webkit-box-shadow: var(--dfNodeHoverBoxShadowHL) var(--dfNodeHoverBoxShadowVL) var(--dfNodeHoverBoxShadowBR) var(--dfNodeHoverBoxShadowS) var(--dfNodeHoverBoxShadowColor);
box-shadow: var(--dfNodeHoverBoxShadowHL) var(--dfNodeHoverBoxShadowVL) var(--dfNodeHoverBoxShadowBR) var(--dfNodeHoverBoxShadowS) var(--dfNodeHoverBoxShadowColor);
}
.drawflow .drawflow-node.selected {
background: var(--dfNodeSelectedBackgroundColor);
color: var(--dfNodeSelectedTextColor);
border: var(--dfNodeSelectedBorderSize) solid var(--dfNodeSelectedBorderColor);
border-radius: var(--dfNodeSelectedBorderRadius);
-webkit-box-shadow: var(--dfNodeSelectedBoxShadowHL) var(--dfNodeSelectedBoxShadowVL) var(--dfNodeSelectedBoxShadowBR) var(--dfNodeSelectedBoxShadowS) var(--dfNodeSelectedBoxShadowColor);
box-shadow: var(--dfNodeSelectedBoxShadowHL) var(--dfNodeSelectedBoxShadowVL) var(--dfNodeSelectedBoxShadowBR) var(--dfNodeSelectedBoxShadowS) var(--dfNodeSelectedBoxShadowColor);
}
.drawflow .drawflow-node .input {
left: var(--dfInputLeft);
background: var(--dfInputBackgroundColor);
border: var(--dfInputBorderSize) solid var(--dfInputBorderColor);
border-radius: var(--dfInputBorderRadius);
height: var(--dfInputHeight);
width: var(--dfInputWidth);
}
.drawflow .drawflow-node .input:hover {
background: var(--dfInputHoverBackgroundColor);
border: var(--dfInputHoverBorderSize) solid var(--dfInputHoverBorderColor);
border-radius: var(--dfInputHoverBorderRadius);
}
.drawflow .drawflow-node .outputs {
float: var(--dfNodeTypeFloat);
}
.drawflow .drawflow-node .output {
right: var(--dfOutputRight);
background: var(--dfOutputBackgroundColor);
border: var(--dfOutputBorderSize) solid var(--dfOutputBorderColor);
border-radius: var(--dfOutputBorderRadius);
height: var(--dfOutputHeight);
width: var(--dfOutputWidth);
}
.drawflow .drawflow-node .output:hover {
background: var(--dfOutputHoverBackgroundColor);
border: var(--dfOutputHoverBorderSize) solid var(--dfOutputHoverBorderColor);
border-radius: var(--dfOutputHoverBorderRadius);
}
.drawflow .connection .main-path {
stroke-width: var(--dfLineWidth);
stroke: var(--dfLineColor);
}
.drawflow .connection .main-path:hover {
stroke: var(--dfLineHoverColor);
}
.drawflow .connection .main-path.selected {
stroke: var(--dfLineSelectedColor);
}
.drawflow .connection .point {
stroke: var(--dfRerouteBorderColor);
stroke-width: var(--dfRerouteBorderWidth);
fill: var(--dfRerouteBackgroundColor);
}
.drawflow .connection .point:hover {
stroke: var(--dfRerouteHoverBorderColor);
stroke-width: var(--dfRerouteHoverBorderWidth);
fill: var(--dfRerouteHoverBackgroundColor);
}
.drawflow-delete {
display: var(--dfDeleteDisplay);
color: var(--dfDeleteColor);
background: var(--dfDeleteBackgroundColor);
border: var(--dfDeleteBorderSize) solid var(--dfDeleteBorderColor);
border-radius: var(--dfDeleteBorderRadius);
}
.parent-node .drawflow-delete {
top: var(--dfDeleteTop);
}
.drawflow-delete:hover {
color: var(--dfDeleteHoverColor);
background: var(--dfDeleteHoverBackgroundColor);
border: var(--dfDeleteHoverBorderSize) solid var(--dfDeleteHoverBorderColor);
border-radius: var(--dfDeleteHoverBorderRadius);
}
</style>
<script>
var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.line_path = 1;
editor.start();
editor.addNode('aaa', 0, 1, 100, 300, 'aaa', {}, 'aaa' );
editor.addNode('bbb', 1, 0, 200, 400, 'bbb', {}, 'bbb' );
editor.addNode('ccc', 1, 0, 500, 500, 'ccc', {}, 'ccc' );
</script>
</body>
</html> |
|
Yes, this works perfectly fine. So why isn't it working by inserting the custom style in the drawflow.min.css stylesheet? Also, there are issues only for certain custom styling. Like I said the hover works perfectly fine. but the display and selected node don't work. Another question. How can I add more nodes? is it through the class method? and fix their positioning through their class method? |
|
I don't know how you will be adding in the css. But the min file should not be touched. Another question. How can I add more nodes? is it through the class method? and fix their positioning through their class method? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi,
Trying to implement Drawflow in my Laravel+Livewire project.
Unable to get the desired results. In fact failing at the first attempt. I am sure I have missed a step or not doing it right. Could you show how its done or can it actually be done in a Livewire project.
Was planning to integrate Alpine JS later on to replace the vue code. But that is at a later stage. Currently just trying to get a mindmap functionality with Drawflow.
I have included the
drawflow.min.cssin myapp.scssanddrawflow.min.jsin myapp.jsUsed the CDN links in my
layouts.appin the head
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css">in the body
<script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>Created the blade file as this:
This is the Console error that I get in Firefox
Uncaught ReferenceError: Drawflow is not defined <anonymous> http://127.0.0.1:8000/mindmap:112Get this error on launching the page
And, get this error on trying to drag
The text was updated successfully, but these errors were encountered: