1. Táirgí
  2.   Léaráid
  3.   JavaScript
  4.   Flowy
 
  

Leabharlann JavaScript chun Sreabhchairteacha a Chruthú & a Chur in Eagar in Aipeanna Gréasáin

Open Source JavaScript API chun Aipeanna Gréasáin a Chruthú a cheadaíonn sreabhchairteacha uafásacha a ghiniúint agus a bhainistiú gan stró.

Is leabharlann an-úsáideach í Flowy a chuireann ar chumas forbróirí bogearraí aipeanna gréasáin JavaScript a chruthú chun sreabhchairteacha a chruthú agus a bhainistiú gan stró. Is tógálaí sreabhchairteacha deas agus éasca le húsáid é Flowy.js agus is féidir é a chomhtháthú go héasca le leabharlanna eile. Cuidíonn an leabharlann le forbróirí bogearraí uathoibrithe a chruthú, uirlisí mapála aigne, cairteacha eagraíochta, crainn ginealaigh, agus go leor eile. Tá an leabharlann Flowy seo foinse oscailte agus ar fáil faoin gceadúnas MIT a chiallaíonn gur féidir í a úsáid go héasca.

Ní hamháin go dtaispeánann leabharlann Flowy sreabhchairteacha go héasca ach tacaíonn sí freisin le heagarthóir tarraing & titim iomlán le comhéadan iontach, go leor roghanna saincheaptha, éisteoirí imeachtaí gothaí, agus gnéithe iontacha eile. I measc cuid de na gnéithe seo tá tacaíocht Uathoibríoch snapping, scrolláil uathoibríoch, athshocrú bloc, roghnaigh agus bain bloic, lárú bloc uathoibríoch, iompórtáil agus úsáid comhaid atá ann cheana féin, tacaíocht shoghluaiste, éasca le cruthú do bhloic, snapping coinníollach, agus mar sin de.

Previous Next

Ag Tosú le Flowy

Is é an bealach molta chun leabharlann Flowy a shuiteáil ná NPM a úsáid. Úsáid an t-ordú seo a leanas le haghaidh suiteáil mhín

Install Flowy via NPM

  npm install flowy

Clone Flowy trí Stór GIT

  git clone https://github.com/alyssaxuu/flowy.gitt

Cruthaigh Sreabhchairt le Drag and Drop le JavaScript

Tugann Leabharlann Flowy an cumas d’fhorbróirí bogearraí sreabhchairt nua a chruthú laistigh dá n-aipeanna JavaScript.Tá tacaíocht curtha san áireamh sa leabharlann chun sreabhchairt sofhreagrach, gairmiúil a chruthú ag baint úsáide as an áis tarraingthe anuas. Ar dtús, is féidir go mbeidh ort eilimint a chruthú chun an tsreabhchairt a shealbhú. Tar éis sin, ní mór duit bloc réamhshainithe a chruthú a fhéadfar a chur isteach sa tsreabhchairt trí é a tharraingt agus a scaoileadh.Is féidir leat athruithe a dhéanamh go héasca ar nós eilimintí spáis b/t a bhainistiú, bloc a dhíláithriú, bloc a chur in eagar, na bloic nach dteastaíonn a bhaint agus tuilleadh.

Cruthaigh Sreabhchairt trí Leabharlann JavaScript In Aisce


        // Initialize the flowchart on the canvas div
        const canvas = document.getElementById('canvas');
        flowy(canvas);

        // Create some nodes and connect them
        const node1 = flowy.add_node('Start', 'node-1');
        const node2 = flowy.add_node('Process', 'node-2');
        flowy.connect(node1, node2);

        // Add some properties to nodes
        flowy.set_property(node1, 'color', 'blue');
        flowy.set_property(node2, 'text', 'Hello World');

        // Serialize and log the flowchart
        document.getElementById('serialize').addEventListener('click', () => {
            console.log(flowy.serialize());
        });

        // Load the serialized flowchart
        document.getElementById('load').addEventListener('click', () => {
            const json = prompt('Enter JSON:');
            flowy.load(json);
        });

Ag cur & Nód a bhainistiú trí JavaScript

Chuir an Leabharlann foinse Oscailte Flowy san áireamh tacaíocht chun nóid nua a chur leis go ríomhchláraithe laistigh d’fheidhmchláir JavaScript. Ceadaíonn an leabharlann do ríomhchláraitheoirí bogearraí an bloc a dhearadh ar dtús agus ansin ina dhiaidh sin, is féidir leat an comhad deartha a onnmhairiú go héasca agus é a shábháil san fhormáid comhaid tacaithe. Tugann sé cumhacht freisin d’fhorbróirí bogearraí an bloc atá ann cheana féin a allmhairiú, athruithe a dhéanamh air agus é a shábháil ar ais go dtí an suíomh a roghnaíonn siad gan ach cúpla líne de chód. Tá an fhoireann shreabhadh ag obair freisin ar ghiniúint dhinimiciúil na léaráide agus go luath beidh sé mar chuid de.

Conas Nód Nua a Chur le Sreabhchairt ag úsáid Leabharlann JavaScript?

// create a new instance of the Flowy library
const canvas = document.getElementById("canvas");
const flowy = new Flowy(canvas);

// add a new node to the canvas

const node = flowy.addNode({
  text: "New Node",
  x: 100,
  y: 100,
  draggable: true,
  resizable: true,
  deletable: true,
});

Iompórtáil Sonraí Sreabhchairt trí JavaScript

Tugann Leabharlann Flowy Foinse Oscailte an cumas d’fhorbróirí bogearraí sonraí na sreabhchairt a iompórtáil laistigh dá bhfeidhmchláir féin.Tá tacaíocht san áireamh sa leabharlann chun sreabhchairteacha iomlána a allmhairiú gan stró. Agus an modh seo á úsáid agat, déan cinnte go bhfuil muinín iomlán as an ionchur, ní mar sin is féidir leis an modh seo so-ghabhálacht a thabhairt isteach i do chóras. Ligeann sé freisin sonraí an tsreabhchairt a fháil mar oibiacht chomh maith le teaghrán JSON.

Conas Sonraí Sreabhchairt a Iompórtáil le JavaScript API?

const canvas = document.getElementById('canvas');
const flowy = new Flowy(canvas);

const data = {
  nodes: [
    { id: "node1", content: "Start", x: 100, y: 100 },
    { id: "node2", content: "Step 1", x: 250, y: 100 },
    { id: "node3", content: "Step 2", x: 250, y: 200 },
    { id: "node4", content: "End", x: 400, y: 150 }
  ],
  edges: [
    { source: "node1", target: "node2" },
    { source: "node2", target: "node3" },
    { source: "node3", target: "node4" }
  ]
};

flowy.load(data);
 Gaeilge