Not sure how to run this locally

MSoup commented 2 years ago

Hi there, this is an embarrassing problem, but I'd like to know how to run this locally.

The readme says:

Download or clone repository and copy the dist folder, CDN option Or npm.

So I tried to follow that:

I made a new directory
I ran npm init
I cloned the repository as per the instructions
There was no dist folder, so I installed webpack: npm install webpack
I ran npm i drawflow
I copied the dist folder from the repo to my directory

My folder structure is

dist/drawflow.min.css (and the other 2 files I was supposed to copy)
Drawflow (cloned repo)
node_modules
src
package-lock.json
package.json

My dist/index.html looks like this

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting Started</title>
  </head>
  <body>
    <div id="drawflow"></div>

    <script src="main.js"></script>
  </body>
</html>

And this is src/index.js

import Drawflow from 'drawflow'
import styleDrawflow from 'drawflow/dist/drawflow.min.css'

var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.start();

I think this should be correct from the readme instructions, but when I try to run npm run build ( "scripts": { "build": "webpack", }} I get this:

$ npm run build

> flowresearch@1.0.0 build C:\projectdir\flowResearch
> webpack

assets by status 47.2 KiB [cached] 1 asset
runtime modules 663 bytes 3 modules
cacheable modules 46.8 KiB
  ./src/index.js 191 bytes [built] [code generated]
  ./node_modules/drawflow/dist/drawflow.min.js 44.8 KiB [built] [code generated]
  ./node_modules/drawflow/dist/drawflow.min.css 1.85 KiB [built] [code generated] [1 error]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in ./node_modules/drawflow/dist/drawflow.min.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .drawflow,.drawflow .parent-node{position:relative}.parent-drawflow{display:flex;overflow:hidden;touch-action:none;outline:0}.drawflow{width:100%;height:100%;user-select:none;perspective:0}.drawflow .drawflow-node{display:flex;align-items:center;position:absolute;background:#0ff;width:160px;min-height:40px;border-radius:4px;border:2px solid #000;color:#000;z-index:2;padding:15px}.drawflow .drawflow-node.selected{background:red}.drawflow .drawflow-node:hover{cursor:move}.drawflow .drawflow-node .inputs,.drawflow .drawflow-node 
.outputs{width:0}.drawflow .drawflow-node .drawflow_content_node{width:100%;display:block}.drawflow .drawflow-node .input,.drawflow .drawflow-node .output{position:relative;width:20px;height:20px;background:#fff;border-radius:50%;border:2px solid #000;cursor:crosshair;z-index:1;margin-bottom:5px}.drawflow .drawflow-node .input{left:-27px;top:2px;background:#ff0}.drawflow .drawflow-node .output{right:-3px;top:2px}.drawflow svg{z-index:0;position:absolute;overflow:visible!important}.drawflow .connection{position:absolute;pointer-events:none}.drawflow .connection .main-path{fill:none;stroke-width:5px;stroke:#4682b4;pointer-events:all}.drawflow .connection .main-path:hover{stroke:#1266ab;cursor:pointer}.drawflow .connection .main-path.selected{stroke:#43b993}.drawflow .connection .point{cursor:move;stroke:#000;stroke-width:2;fill:#fff;pointer-events:all}.drawflow .connection .point.selected,.drawflow .connection .point:hover{fill:#1266ab}.drawflow .main-path{fill:none;stroke-width:5px;stroke:#4682b4}.drawflow-delete{position:absolute;display:block;width:30px;height:30px;background:#000;color:#fff;z-index:4;border:2px solid #fff;line-height:30px;font-weight:700;text-align:center;border-radius:50%;font-family:monospace;cursor:pointer}.drawflow>.drawflow-delete{margin-left:-15px;margin-top:15px}.parent-node .drawflow-delete{right:-15px;top:-15px}
 @ ./src/index.js 2:0-58

webpack 5.64.4 compiled with 1 error and 1 warning in 1002 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! flowresearch@1.0.0 build: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the flowresearch@1.0.0 build script.

I'm sorry if the issue isn't related to Drawflow; but I was wondering if maybe I followed the instructions wrong. Any hints or tips?

Is there an easier way to get a "hello world" up and running?

jerosoler commented 2 years ago

Hii

View a CDN example:

<!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>

For donwload or clone, only change this lines to dist folder.

  <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>

For npm install your example is correct.

But it seems that webpack is not loading the css. Look at this or this other: https://webpack.js.org/loaders/css-loader/ or https://webpack.js.org/loaders/style-loader/

MSoup commented 2 years ago

Thank you so much for your help. This library is wonderful.

Is it supposed to look like this?

I installed css-loader but I'm not sure if webpack is loading the css

jerosoler commented 2 years ago

Yeah that's right! Be like this.

If you want you can design your theme in: https://jerosoler.github.io/drawflow-theme-generator/

Or for example take the css of the demo: https://github.com/jerosoler/Drawflow/blob/master/docs/beautiful.css

MSoup commented 2 years ago

Hi there.

Thank you so much for assisting me. I managed to get it to work using the CDN like above. Next, I want to try getting it to work by importing it (npm) and using vue2.

First, I used the vue cli: vue create drawflow-vue2

Then, I cd into the root folder and npm i drawflow

Next, I put this into my boilerplate App.vue:

<template>
  <div id="drawflow">
    <p>Hello</p>
  </div>
</template>

<script>
import Drawflow from 'drawflow'
import Vue from 'vue'

var id = document.getElementById("drawflow");
const editor = new Drawflow(id, Vue);

editor.addNode(1, 1, 100, 100, "class", "5", "node1");

editor.start();

export default {
  name: 'App',
}
</script>

My main.js entrypoint looks like this:

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

My question is, my cli tells me

Compiled successfully in 107ms                                                                                                                          2:52:23 p.m.

  App running at:
  - Local:   http://localhost:8081/

However, when I go to my localhost, the page HTML shows only

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">
    <title>drawflow-vue2</title>
  <link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but drawflow-vue2 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>

When I open my console I see the following error:

drawflow.min.js?52e1:1 Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
    at i.addNode (drawflow.min.js?52e1:1)
    at eval (App.vue?234e:14)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js& (app.js:938)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (App.vue?6796:1)
    at Module../src/App.vue?vue&type=script&lang=js& (app.js:1007)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (App.vue?315a:1)

Do you know where I made a mistake?

jerosoler commented 2 years ago

Change:

editor.addNode(1, 1, 100, 100, "class", "5", "node1");

editor.start();

For:

editor.start();
editor.addNode(1, 1, 100, 100, "class", "5", "node1");

Start before addNode.

MSoup commented 2 years ago

Thank you so much!

jerosoler / Drawflow

Not sure how to run this locally #316