1. Produkti
  2.   Diagramma
  3.   JavaScript
  4.   Flowy
 
  

JavaScript bibliotēka, lai izveidotu un rediģētu blokshēmas tīmekļa lietotnēs

Atvērtā pirmkoda JavaScript API, lai izveidotu tīmekļa lietotnes, kas ļauj viegli ģenerēt un pārvaldīt lieliskas blokshēmas.

Flowy ir ļoti noderīga bibliotēka, kas programmatūras izstrādātājiem ļauj izveidot JavaScript tīmekļa lietotnes, lai viegli izveidotu un pārvaldītu blokshēmas. Flowy.js ir diezgan jauks un lietotājam draudzīgs blokshēmu veidotājs, un to var viegli integrēt ar citām bibliotēkām. Bibliotēka palīdz izstrādātājiem izveidot automatizācijas programmatūru, domu kartēšanas rīkus, organizācijas diagrammas, ciltskokus un daudz ko citu. Šī Flowy bibliotēka ir atvērtā pirmkoda un ir pieejama saskaņā ar MIT licenci, kas nozīmē, ka to var brīvi izmantot.

Flowy bibliotēka ne tikai viegli parāda blokshēmas, bet arī atbalsta pilnīgu vilkšanas un nomešanas redaktoru ar lielisku saskarni, daudzām pielāgošanas opcijām, žestu notikumu klausītājiem un citām pārsteidzošām funkcijām. Dažas no šīm funkcijām ietver automātiskās piesaistes atbalstu, automātisku ritināšanu, bloku pārkārtošanu, bloku atlasi un noņemšanu, automātisku bloku centrēšanu, esošo failu importēšanu un izmantošanu, mobilo atbalstu, vienkāršu bloku izveidošanu, nosacīto piesaisti un tā tālāk.

Previous Next

Darba sākšana ar Flowy

Ieteicamais veids, kā instalēt Flowy bibliotēku, ir izmantot NPM. Lūdzu, izmantojiet šo komandu vienmērīgai instalēšanai

Instalējiet Flowy, izmantojot NPM

  npm install flowy

Klonēt Flowy, izmantojot GIT krātuvi

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

Izveidojiet blokshēmu, izmantojot velciet un nometiet, izmantojot JavaScript

Flowy Library sniedz programmatūras izstrādātājiem iespēju izveidot jaunu blokshēmu savās JavaScript lietotnēs.Bibliotēkā ir iekļauts atbalsts atsaucīgas, profesionālas blokshēmas izveidei, izmantojot vilkšanas nomešanas iespēju. Pirmkārt, jums var būt nepieciešams izveidot elementu, kas satur blokshēmu. Pēc tam jums ir jāizveido iepriekš definēts bloks, kuru var ievietot blokshēmā, velkot un nometot to.Varat viegli veikt izmaiņas, piemēram, pārvaldīt atstarpes b/t elementus, pārvietot bloku, rediģēt bloku, noņemt nevēlamos blokus un veikt citas darbības.

Izveidojiet blokshēmu, izmantojot bezmaksas JavaScript bibliotēku


        // 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);
        });

Pievienošana & Mezgla pārvaldība, izmantojot JavaScript

Atvērtā pirmkoda Flowy bibliotēka ir iekļāvusi atbalstu jaunu mezglu programmatiskai pievienošanai JavaScript lietojumprogrammās. Bibliotēka ļauj programmatūras programmētājiem vispirms izveidot bloku, un pēc tam jūs varat viegli eksportēt dizaina failu un saglabāt to atbalstītajā faila formātā. Tas arī dod programmatūras izstrādātājiem tiesības importēt esošo bloku, veikt tajā izmaiņas un saglabāt to atpakaļ viņu izvēlētajā vietā, izmantojot tikai dažas koda rindiņas. Fluy komanda arī strādā pie diagrammas dinamiskas ģenerēšanas, un drīz tā būs daļa no tās.

Kā pievienot jaunu mezglu blokshēmai, izmantojot JavaScript bibliotēku?

// 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,
});

Importējiet blokshēmas datus, izmantojot JavaScript

Atvērtā pirmkoda Flowy Library programmatūras izstrādātājiem sniedz iespēju importēt blokshēmas datus savās lietojumprogrammās.Bibliotēkā ir iekļauts atbalsts visu blokshēmu vienkāršai importēšanai. Lietojot šo metodi, lūdzu, pārliecinieties, ka ievade ir absolūti uzticama, jo šī metode nevar izraisīt jūsu sistēmas jutīgumu. Tas arī ļauj iegūt blokshēmas datus kā objektu, kā arī JSON virkni.

Kā importēt blokshēmas datus, izmantojot 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);
 Latviski