Vue verwendet GraphVis, um einen unendlich erweiterten Beziehungsgraphen zu entwickeln

importiere VisGraph von '@/assets/js/GraphVis/old/visgraph.min.js' // Ihr eigener entsprechender Speicherort für die JS-Dateiimportiere LayoutFactory von '@/assets/js/GraphVis/old/visgraph-layout.min.js' // Ihr eigener entsprechender Speicherort für die JS-Dateiexportiere standardmäßig { Komponenten: { VisGraph, LayoutFactory } }

Konfiguration: {
  // Knotenkonfiguration node: {
            label: { // Beschriftungskonfiguration show: true, // Ob Farbe angezeigt werden soll: ,250,250,250‘, // Schriftfarbe font: ,normal 14px Microsoft YaHei‘, // Schriftgröße und -art textPosition: ,Middle_Center‘, // Schriftposition wrapText: true // Knotentext umbrechen (diese Eigenschaft ist nur gültig, wenn die Schriftposition Middle_Center ist, wenn sie true ist)
            },
            Form: „Kreis“, // Knotenform Kreis, Rechteck, Quadrat, Ellipse, Dreieck, Stern, Polygon, Text
            // Breite: 60, // Knotenbreite (nur gültig, wenn die Form rechteckig ist)
            // Höhe: 60, // Knotenhöhe (nur gültig, wenn die Form rechteckig ist)
            color: '62,160,250', // KnotenfarbeborderColor: '62,160,250', // KnotenrahmenfarbeborderWidth: 0, // KnotenrahmenbreiteborderRadius: 0, // Knoten abgerundete EckenlineDash: [0], // Knotenrahmenlinientyp[0] zeigt eine durchgezogene Linie an[5,8] zeigt eine gepunktete Linie anborderWidth > 0Validalpha: 1, // Knotentransparenzsize: 60, // Knotengrößeselected: { // Knoten ausgewählt styleborderColor: '136,198,255', // Rahmenfarbe wenn ausgewähltborderAlpha: 1, // Rahmentransparenz wenn ausgewähltborderWidth: 3, // Rahmenbreite wenn ausgewähltshowShadow: true, // Ob Schatten angezeigt werden sollshadowColor: '136,198,255' // Schattenfarbe wenn ausgewählt}
          },
          // Zeilenkonfigurationslink: {
            label: { // Beschriftungskonfiguration anzeigen: true, // Ob Farbe angezeigt werden soll: „100,100,200“, // Beschriftungsfarbe Schriftart: „normal 10px Arial“ // Beschriftungstextgröße und -art},
            lineType: 'direct', // Linientyp direkt, Kurve, V-Link, H-Link, Bézier, V-Bézier, H-Bézier
            colorType: 'definiert', // Linienfarbtypsource: übernimmt Quellfarbe, target: übernimmt Zielfarbeboth: verwende bilaterale Farbe, definiert: benutzerdefinierte Farbe: '200,200,200', // Linienfarbealpha: 1, // LinientransparenzlineWidth: 1, // LinienbreitelineDash: [0], // Stil für gestrichelten Linienabstand wie: [5,8]
            showArrow: true, // Pfeil anzeigen selected: { // Stileinstellung bei Auswahl color: '20,250,50', // Farbe bei Auswahl alpha: 1, // Transparenz bei Auswahl lineWidth: 4, // Ausgewählte Linienbreite showShadow: true, // Schatten anzeigen shadowColor: '50,250,50' // Schattenfarbe }
          },
          highLightNeiber: true, // Markierung der Höhe des benachbarten Knotens wheelZoom: 0.8 // Radzoomschalter, bei Nichtgebrauch nicht auf [0,1] setzen  
}

this.visgraph = neuer VisGraph(
        document.getElementById(diese.canvasId),
        diese.canvasConfig
      )
dies.visgraph.clearAll()
dies.visgraph.drawData(diese.graphData)

this.visgraph.restoreHightLight() // Hervorhebung abbrechen const allNodes = this.visgraph.getVisibleData()
dies.currentNode.push(node.id)
alleNodes.nodes.fürJeden(item => {
    wenn (this.currentNode.indexOf(item.id) === (-1)) {
         dies.visgraph.deleteNode(Element)
    }
})
const findNodeNum = Math.round(Math.random() * 50)
const increamData = this.buildIncreamData(Knoten, findNodeNum)
this.visgraph.activeAddNodeLinks(increamData.nodes, increamData.links)
dies.visgraph.translateToCenter()

<!--
 * @Autor: CarlYang
 * @Datum: 2021-07-23 15:31:51
 * @LastEditTime: 2021-07-30 09:46:05
 * @LastEditors: Bitte LastEditors festlegen
 * @Description: Beziehungsdiagramm* @FilePath: \vue-g6\src\views\GraphVis\company.vue
-->
<Vorlage>
  <div id="Behälter">
    <!-- ==================================================== Canvas-Ansicht=============================================== -->
    <div
      id="Grafik-Panel"
      ref="Grafikpanel"
      @contextmenu="globalClickedDispatch"
    ></div>

    <!-- =================================================== Linke Symbolleiste================================================ -->
    <div Klasse="linke-Symbolleiste">
      <ul>
        <li @click="setZoomOut" title="Verkleinern">
          <i class="iconfont icon-zoomin"></i>
        </li>
        <li @click="setZoomIn" title="Verkleinern">
          <i class="iconfont icon-zoomout"></i>
        </li>
        <li @click="saveImage" title="Bild speichern">
          <i class="iconfont icon-baocun-"></i>
        </li>
        <li @click="exportJson" title="JSON exportieren">
          <i class="iconfont icon-json"></i>
        </li>
        <li @click="showOverView" title="Miniaturansicht">
          <i class="iconfont icon-suolvetu" style="font-size: 14px"></i>
        </li>
        <li @click="clockwiseRotate" title="Im Uhrzeigersinn drehen">
          <i class="iconfont icon-shunshizhenfangxiangclockwise4" style="font-size: 14px"></i>
        </li>
        <li @click="gegen den Uhrzeigersinn drehen" title="Gegen den Uhrzeigersinn drehen">
          <i class="iconfont icon-nishizhencounterclockwise3" style="font-size: 14px"></i>
        </li>
        <li @click="setMouseModel('normal')" title="Normalmodus">
          <i class="iconfont icon-pointer-up"></i>
        </li>
        <li @click="setMouseModel('drag')" title="Ziehmodus">
          <i class="iconfont icon-line-dragmovetuozhuai-01"></i>
        </li>
        <li @click="setMouseModel('select')" title="Auswahlmodus">
          <i class="iconfont icon-kuangxuan1"></i>
        </li>
        <li @click="fullScreen" title="Vollbildanzeige">
          <i class="iconfont icon-quanping" style="font-size: 20px"></i>
        </li>
      </ul>
    </div>

    <!-- ====================================================== Rechtsklick-Menü================================================ -->
    <div id="nodeMenuDialog" Klasse="nodeMenuDialog">
      <ul>
        <li @click="clickNodeInfo">Knoteninformationen</li>
        <li @click="settingNode">Knoten konfigurieren</li>
        <li @click="selectRelation">Wählen Sie die Beziehung aus</li>
        <li @click="deleteNode">Knoten löschen</li>
        <li @click="contractNode">Knoten ausblenden</li>
        <li @click="expandedNode">Erweiterter Knoten</li>
      </ul>
    </div>

    <!-- ================================================== Popup-Fenster mit Knoteninformationen=============================================== -->
    <el-Schublade
      Titel="Knoteninformationen"
      :sichtbar.sync="nodeInfoDrawer"
      Richtung="rtl"
      :modal="falsch"
      Größe="20%"
    >
      <div Klasse="nodeInfo">
        <el-form class="nodeInfoForm" ref="nodeInfoForm" :model="nodeInfoForm" label-width="80px">
          <el-form-item label="Knotenname">
            <el-input v-model="nodeInfoForm.label"></el-input>
          </el-form-item>
          <el-form-item label="Knoten-ID">
            <el-input v-model="nodeInfoForm.id"></el-input>
          </el-form-item>
        </el-form>
        <el-tabs v-model="nodeInfoActiveName" :stretch="true" class="nodeInfoTabs">
          <el-tab-pane label="Beziehung" name="Vorname">
            <div Klasse="nodeInfoRelation">
              <el-collapse v-model="nodeInfoRelationActive">
                <el-collapse-item title="Zielknoten" name="1">
                  <Vorlagenslot="Titel">
                    <el-badge :value="nodeInfoSourceList.length">Zielknoten</el-badge>
                  </Vorlage>
                  <Tabelle
                    Grenze="0"
                    Zellenabstand="0"
                    cellpadding="0"
                    Klasse = "nodeInfo-table"
                    v-if="nodeInfoSourceList.length > 0"
                  >
                    <Kopf>
                      <tr>
                        <th>Entitätsobjekt</th>
                        <th>Beziehungstyp</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(Element, Index) in nodeInfoSourceList" :key="index">
                        <td
                          :Stil="{ Farbe: Artikel.Farbe }"
                          Stil="Cursor: Zeiger;"
                          @click="VerschiebeCenterThisNode(item.id)"
                        >{{ Artikel.Bezeichnung }}</td>
                        <td>{{ item.relationType }}</td>
                      </tr>
                    </tbody>
                  </Tabelle>
                  <p v-else>Keine Daten</p>
                </el-collapse-item>
                <el-collapse-item title="Quellknoten" name="2">
                  <Vorlagenslot="Titel">
                    <el-badge :value="nodeInfoTargetList.length">Quellknoten</el-badge>
                  </Vorlage>
                  <Tabelle
                    Grenze="0"
                    Zellenabstand="0"
                    cellpadding="0"
                    Klasse = "nodeInfo-table"
                    v-if="nodeInfoTargetList.length > 0"
                  >
                    <Kopf>
                      <tr>
                        <th>Entitätsobjekt</th>
                        <th>Beziehungstyp</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(Element, Index) in nodeInfoTargetList" :key="index">
                        <td
                          :Stil="{ Farbe: Artikel.Farbe }"
                          Stil="Cursor: Zeiger;"
                          @click="VerschiebeCenterThisNode(item.id)"
                        >{{ Artikel.Bezeichnung }}</td>
                        <td>{{ item.relationType }}</td>
                      </tr>
                    </tbody>
                  </Tabelle>
                  <p v-else>Keine Daten</p>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-tab-pane>
          <el-tab-pane label="Attribute" name="zweite">
            <div Klasse="nodeInfoAttribute">
              <el-table :data="nodeInfoAttributeList" border style="width: 100%">
                <el-table-column prop="name" label="Eigenschaftsname"></el-table-column>
                <el-table-column prop="Wert" label="Eigenschaftswert"></el-table-column>
              </el-Tabelle>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-Schublade>

    <!-- ==================================================== Knotenkonfiguration============================================== -->
    <el-Schublade
      Titel="Knotenkonfiguration"
      :sichtbar.sync="nodeConfigDrawer"
      Richtung="rtl"
      :modal="falsch"
      Größe="20%"
    >
      <div Klasse="nodeConfig">
        <el-form ref="form" :model="nodeConfigForm" label-width="80px" label-position="left">
          <el-form-item label="Name">
            <el-input v-model="nodeConfigForm.label" placeholder="Bitte geben Sie den Knotennamen ein"></el-input>
          </el-form-item>
          <el-form-item label="Typ">
            <el-select v-model="nodeConfigForm.shape" placeholder="Bitte Knotentyp auswählen">
              <el-Option
                v-for="(Element, Index) in Knotentypliste"
                :Schlüssel="'Knoten' + Index"
                :label="Artikel.label"
                :Wert="Artikel.Wert"
              ></el-Option>
            </el-Auswahl>
          </el-form-item>
          <el-form-item label="Farbe">
            <div Klasse="Formularfarbe">
              <el-Eingabe
                v-Modell = "nodeConfigForm.fillColor"
                Klasse="Formular-Eingabe"
                Platzhalter="Bitte wählen Sie eine Farbe"
                schreibgeschützt
              ></el-Eingabe>
              <el-Farbwähler
                v-Modell="nodeConfigForm.hexColor"
                Klasse="Formular-Farbauswahl"
                @change="Farbänderung(nodeConfigForm.hexColor, 'Füllfarbe')"
              ></el-Farbauswahl>
            </div>
          </el-form-item>
          <el-form-item label="Größe">
            <el-input v-model="nodeConfigForm.size" placeholder="Bitte geben Sie die Knotengröße ein" type="number"></el-input>
          </el-form-item>
          <el-form-item label="Rahmenbreite">
            <el-input v-model="nodeConfigForm.borderWidth" placeholder="Bitte geben Sie die Rahmenbreite ein" type="number"></el-input>
          </el-form-item>
          <el-form-item label="gestrichelte Grenze">
            <el-select v-model="nodeConfigForm.borderDash" placeholder="Bitte gestrichelte Rahmenlinie auswählen">
              <el-option label="Nein" :value="false"></el-option>
              <el-option label="ja" :Wert="wahr"></el-option>
            </el-Auswahl>
          </el-form-item>
          <el-form-item label="Rahmenfarbe">
            <div Klasse="Formularfarbe">
              <el-Eingabe
                v-Modell = "nodeConfigForm.borderColor"
                Klasse="Formular-Eingabe"
                Platzhalter="Bitte wählen Sie eine Rahmenfarbe"
                schreibgeschützt
              ></el-Eingabe>
              <el-Farbwähler
                v-Modell = "nodeConfigForm.borderHexColor"
                Klasse="Formular-Farbauswahl"
                @change="Farbänderung(nodeConfigForm.borderHexColor, 'borderColor')"
              ></el-Farbauswahl>
            </div>
          </el-form-item>
          <el-form-item label="Schriftposition">
            <el-select v-model="nodeConfigForm.textPosition" placeholder="Bitte wählen Sie die Schriftposition">
              <el-Option
                v-for="(Element, Index) in TextPositionList"
                :Schlüssel="Index"
                :label="Artikel.label"
                :Wert="Artikel.Wert"
              ></el-Option>
            </el-Auswahl>
          </el-form-item>
          <el-form-item label="Schriftstil">
            <el-input v-model="nodeConfigForm.font" placeholder="Bitte geben Sie den Schriftstil ein"></el-input>
          </el-form-item>
          <el-form-item label="Schriftfarbe">
            <div Klasse="Formularfarbe">
              <el-Eingabe
                v-Modell = "nodeConfigForm.fontColor"
                Klasse="Formular-Eingabe"
                Platzhalter="Bitte Schriftfarbe auswählen"
                schreibgeschützt
              ></el-Eingabe>
              <el-Farbwähler
                v-Modell = "nodeConfigForm.fontHexColor"
                Klasse="Formular-Farbauswahl"
                @change="Farbänderung(nodeConfigForm.fontHexColor, 'Schriftfarbe')"
              ></el-Farbauswahl>
            </div>
          </el-form-item>
          <el-form-item label="Schrifthintergrund">
            <div Klasse="Formularfarbe">
              <el-Eingabe
                v-Modell = "nodeConfigForm.fontBgColor"
                Klasse="Formular-Eingabe"
                Platzhalter="Bitte wählen Sie den Schrifthintergrund"
                schreibgeschützt
              ></el-Eingabe>
              <el-Farbwähler
                v-Modell = "nodeConfigForm.fontBgHexColor"
                Klasse="Formular-Farbauswahl"
                @change="Farbänderung(nodeConfigForm.fontBgHexColor, 'fontBgColor')"
              ></el-Farbauswahl>
            </div>
          </el-form-item>
          <el-form-item label="Schriftartversatz">
            <el-Eingabe
              v-Modell = "nodeConfigForm.textOffset"
              Platzhalter="Bitte geben Sie den Schriftoffset ein"
              Typ="Nummer"
              max="100"
              min="-100"
            ></el-Eingabe>
          </el-form-item>
        </el-form>
        <div Klasse="Speichereinstellung">
          <el-button type="primary" @click="saveSetting">Konfiguration speichern</el-button>
        </div>
      </div>
    </el-Schublade>
  </div>
</Vorlage>
<Skript>
importiere VisGraph aus '@/assets/js/GraphVis/old/visgraph.min.js'
importiere LayoutFactory aus '@/assets/js/GraphVis/old/visgraph-layout.min.js'
importiere screenfull von 'screenfull'
importieren {
  Unternehmen
} von '@/assets/js/company.js'
Standard exportieren {
  Name: "DesignGraph",
  Komponenten:
    VisGraph,
    LayoutFactory
  },
  Daten() {
    zurückkehren {
      //Canvas-Instanz visgraph: null,
      // Mittlerer Knoten centerNode: null,
      //Ausgewählter Knoten currentNode: [],
      // Ausgewählte Knoteninformationen checkedNodeInfo: {},
      // Graphkonfiguration config: {
        Knoten: {
          Etikett: {
            zeigen: wahr,
            Farbe: '250,250,250',
            Schriftart: „normal 14px Microsoft YaHei“,
            Textposition: 'Mitte_Mitte',
            Rahmenbreite: 0,
            WrapText: wahr
          },
          Form: 'Kreis',
          Breite: 60,
          Höhe: 60,
          Farbe: '62,160,250',
          Rahmenfarbe: '62,160,250',
          Rahmenbreite: 0,
          Randradius: 0,
          Strichzeile: [0],
          Alpha: 1,
          ausgewählt: {
            Rahmenfarbe: '136,198,255',
            GrenzeAlpha: 1,
            Rahmenbreite: 3,
            showShadow: wahr,
            Schattenfarbe: '136,198,255'
          },
          beim Klicken: (Ereignis, Knoten) => {
            // this.visgraph.highLightNeiberNodes(node, 1) // Hervorheben},
          ondblClick: (Ereignis, Knoten) => {
            this.visgraph.restoreHightLight() // Hervorhebung abbrechen const allNodes = this.visgraph.getVisibleData()
            dies.currentNode.push(node.id)
            alleNodes.nodes.fürJeden(Element => {
              wenn (this.currentNode.indexOf(item.id) === (-1)) {
                dies.visgraph.deleteNode(Element)
              }
            })
            const findNodeNum = Math.round(Math.random() * 50)
            const increamData = this.buildIncreamData(Knoten, findNodeNum)
            this.visgraph.activeAddNodeLinks(increamData.nodes, increamData.links)
            dies.visgraph.translateToCenter()
          },
          onMouseOver: (Ereignis, Knoten) => { },
          onMouseOut: (Ereignis, Knoten) => { }
        },
        Link:
          Etikett: {
            zeigen: wahr,
            Farbe: '100,100,200',
            Schriftart: „normal 10px Arial“
          },
          Linientyp: „direkt“,
          Farbtyp: "definiert",
          Farbe: '200,200,200',
          Alpha: 1,
          Linienbreite: 1,
          Strichzeile: [0],
          Pfeil anzeigen: true,
          ausgewählt: {
            Farbe: '20,250,50',
            Alpha: 1,
            Zeilenbreite: 4,
            showShadow: wahr,
            Schattenfarbe: '50,250,50'
          }
        },
        highLightNeiber: wahr,
        RadZoom: 0,8,
        noElementClick: (Ereignis, _graphvis) => {
          // Klicken Sie irgendwo anders auf die Leinwand, um das Popup auszublenden this.nodeMenuDialogClose()
        }
      },
      // Popup-Fenster mit Knoteninformationen nodeInfoDrawer: false,
      // Knoteninformationsformular nodeInfoForm: {
        Etikett: '',
        Ausweis: ''
      },
      // Knoteninformationen Popup-Fenster Registerkarte Option Name nodeInfoActiveName: 'first',
      // Beziehung nodeInfoRelationActive: ['1', '2'],
      // Zielknotenliste nodeInfoTargetList: [],
      // Quellknotenliste nodeInfoSourceList: [],
      // Knotenattributliste nodeInfoAttributeList: [],
      // Popup-Fenster zur Knotenkonfiguration nodeConfigDrawer: false,
      // Knotenkonfigurationsformular nodeConfigForm: {
        Etikett: '',
        Form: '',
        Füllfarbe: '',
        Hexadezimalfarbe: '',
        Größe: '',
        Rahmenbreite: '',
        borderDash: '',
        Rahmenfarbe: '',
        RahmenHexFarbe: '',
        textPosition: '',
        Schriftart: '',
        Schriftfarbe: '',
        SchriftHexFarbe: '',
        Schrifthintergrundfarbe: '',
        fontBgHexColor: '',
        textOffset: ''
      },
      // Knotentypliste nodeTypeList: [
        { value: 'Kreis', label: 'Kreis' },
        { Wert: 'Rechteck', Bezeichnung: 'Rechteck' },
        { Wert: 'Ellipse', Bezeichnung: 'Ellipse' },
        { Wert: 'Stern', Bezeichnung: 'Fünfeck' },
        { Wert: 'Dreieck', Bezeichnung: 'Dreieck' },
        { Wert: 'Polygon', Bezeichnung: 'Sechseck' }
      ],
      // Schriftpositionsliste textPositionList: [
        { Wert: 'Mitte_Mitte', Bezeichnung: 'Mitte' },
        { Wert: 'Unten_Mitte', Bezeichnung: 'Unten' },
        { Wert: 'top_Center', Bezeichnung: 'Oben' },
        { Wert: 'Mitte_Links', Bezeichnung: 'Links' },
        { value: 'Mitte_rechts', label: 'Rechts' },
      ]
    }
  },
  montiert() {
    this.handleData(Unternehmen)
    fenster.onresize = () => {
      wenn (dieser.visgraph) {
        dies.visgraph.moveCenter()
      }
    }
  },
  Methoden: {
    /**
     * Daten werden verarbeitet * @date 2021-07-23
     * @param {Objekt} Daten
     */
    handleData(Daten) {
      const obj = {
        Knoten: [],
        Links: []
      }
      const Knoten = Daten.Knoten
      nodes.forEach(item => {
        wenn (item.label === 'Hauptsitz') {
          const nodeObj = {
            ID: Artikel-ID,
            Bezeichnung: Artikelbezeichnung,
            Eigenschaften: Artikel,
            Farbe: '38,186,191',
            ausgewählteRahmenfarbe: '131,218,228',
            Schattenfarbe: '131,218,228'
          }
          KnotenObj.Größe = 80
          KnotenObj.x = 250
          KnotenObj.y = 250
          dieser.centerNode = nodeObj
          dies.currentNode.push(item.id)
        } anders {
          const nodeObj = {
            ID: Artikel-ID,
            Bezeichnung: Artikelbezeichnung,
            Eigenschaften: Artikel,
            Größe: 60
          }
          Schalter (Artikeltyp) {
            Fall 1:
              KnotenObj.Farbe = "242,105,97"
              nodeObj.selectedBorderColor = '249,179,157'
              nodeObj.shadowColor = "249,179,157"
              brechen
          }
          obj.nodes.push(nodeObj)
        }
      })
      const links = data.edges
      links.fürJeden(item => {
        const linkObj = {
          ID: Artikel-ID,
          Ziel: item.to,
          Quelle: item.from,
          Bezeichnung: Artikelbezeichnung,
          Eigenschaften: Artikel
          // Strichfarbe: this.getRandomColor()
        }
        Schalter (Artikeltyp) {
          Fall 11:
            linkObj.Farbe = "40,194,199"
            linkObj.selectedColor = "40,194,199"
            linkObj.shadowColor = "40,194,199"
            brechen
          Fall 12:
            linkObj.Farbe = "250,108,100"
            linkObj.selectedColor = "250,108,100"
            linkObj.shadowColor = "250,108,100"
            brechen
          Fall 13:
            linkObj.Farbe = "0,132,255"
            linkObj.selectedColor = "0,132,255"
            linkObj.shadowColor = "0,132,255"
            brechen
          Fall 15:
            linkObj.Farbe = "250,108,100"
            linkObj.selectedColor = "250,108,100"
            linkObj.shadowColor = "250,108,100"
            brechen
        }
        obj.links.push(Link-Objekt)
      })
      this.buildData(Objekt)
    },
    /**
     * Erstellen Sie ein Beispiel * @date 2021-07-23
     * @param {Objekt} gxData
     */
    Erstellen Sie Daten (gxData). {
      this.visgraph = neuer VisGraph(document.getElementById('graph-panel'), this.config)
      const nodeCount = gxData.nodes.length
      const xyArr = this.getXY(this.centerNode, KnotenAnzahl, KnotenAnzahl * 20)
      gxData.nodes.forEach((n, i) => {
        nx = xyArr[i].x
        ny = xyArr[i].y
        n.Größe = 60
      })
      gxData.nodes.push(dieser.centerNode)
      dies.visgraph.drawData(gxData)
      dies.visgraph.setZoom()
    },
    /**
     * Punktkoordinaten um den ausgewählten Knoten * @date 2021-07-23
     * @param {Mittelknoten} Mittelknoten
     * @param {Anzahl der Knoten} nodeCount
     * @param {Abstand vom Mittelpunkt} Radius
     * @returns {Array}
     */
    getXY(centerNode, nodeCount, radius) {
      const aop = 360,0 / Knotenanzahl
      const arr = []
      für (lass i = 0; i < nodeCount; i++) {
        sei r1 = Radius
        wenn (Knotenanzahl > 10) {
          r1 = (i % 2 === 0 ? Radius + 35 : Radius - 35)
        }
        const ao = i * aop
        const o1 = {}
        o1.x = centerNode.x + r1 * Math.cos(ao * Math.PI / 180)
        o1.y = centerNode.y + r1 * Math.sin(ao * Math.PI / 180)
        arr[i] = o1
      }
      Rückflug an
    },
    /**
     * Knoten zufällig generieren * @date 2021-07-23
     * @param {aktuell ausgewählter Knoten} centerNode
     * @param {Anzahl der Knoten} nodeNum
     * @returns {Objekt}
     */
    buildIncreamData(centerNode, nodeNum) {
      const gxData = {
        Knoten: [],
        Links: []
      }
      Konstante Anzahl = Knotennummer
      const nodeIdPrefix = 'node_' + Math.round(Math.random() * 1000) + '_'
      für (sei i = 0; i < Anzahl; i++) {
        gxData.nodes.push({
          id: nodeIdPrefix + i,
          Bezeichnung: 'Kindknoten+' + i,
          Größe: 60
          // Farbe: this.getRandomColor()
        })
        gxData.links.push({
          Quelle: centerNode.id,
          Ziel: nodeIdPrefix + i,
          Bezeichnung: 'Beziehung' + i
        })
      }
      gxData zurückgeben
    },
    /**
     * Canvas-Rechtsklick-Ereignis * @date 2021-07-26
     * @param {Object} Ereignis
     */
    globalClickedDispatch(Ereignis) {
      wenn (Ereignis.Schaltfläche === 2) {
        wenn (dieser.visgraph.currentNode) {
          this.nodeMenuDialogOpen(Ereignis, this.visgraph.currentNode)
        }
      }
    },
    /**
     * Rechtsklick auf Knotenmenüanzeige * @date 2021-07-26
     * @param {Object} Ereignis
     * @param {Object} Knoten
     */
    nodeMenuDialogOpen(Ereignis, Knoten) {
      let nodeMenuDialog = document.getElementById("nodeMenuDialog");
      nodeMenuDialog.style.left = event.clientX + "px";
      nodeMenuDialog.style.top = (event.clientY - 76) + "px";
      nodeMenuDialog.style.display = "Block";
      this.checkedNodeInfo = Knoten;
      event.stopPropagation();
    },
    /**
     * Knotenmenü schließen * @date 2021-07-26
     */
    nodeMenuDialogClose() {
      let nodeMenuDialog = document.getElementById("nodeMenuDialog");
      nodeMenuDialog.style.display = "keine";
    },
    /**
     * Klicken Sie auf Knoteninformationen * @date 2021-07-26
     */
    clickNodeInfo() {
      this.nodeInfoDrawer = true
      // Zuweisungsformular this.nodeInfoForm = this.checkedNodeInfo
      // Zugehöriger Knoten // Ausgehender Knoten const k = this.checkedNodeInfo
      const g = (k.outLinks || []).map((link) => {
        zurückkehren {
          ID: link.ziel.id,
          Bezeichnung: Link.Ziel.Bezeichnung,
          Typ: Link.Ziel.Typ,
          Farbe: 'rgb(' + link.target.fillColor + ')',
          Beziehungstyp: Link.Typ || Link.Bezeichnung || '--'
        }
      })
      // Eingehender Knoten const h = (k.inLinks || []).map((link) => {
        zurückkehren {
          ID: link.source.id,
          Bezeichnung: Link.Quelle.Bezeichnung,
          Typ: Link.Quelle.Typ,
          Farbe: 'rgb(' + link.source.fillColor + ')',
          Beziehungstyp: Link.Typ || Link.Bezeichnung || '--'
        }
      })
      this.nodeInfoTargetList = h
      this.nodeInfoSourceList = g
      // Attributzuweisung const list = []
      const nameList = ['id', 'label', 'typ', 'cluster', 'füllfarbe', 'form', 'größe', 'schriftart', 'schriftfarbe', 'x', 'y']
      nameList.fürJeden(item => {
        const obj = {
          Name: Artikel,
          Wert: this.checkedNodeInfo[item]
        }
        list.push(Objekt)
      })
      this.nodeInfoAttributeList = Liste
      this.nodeMenuDialogClose()
    },
    /**
     * Wählen Sie die zugehörige Operation aus * @date 2021-07-26
     */
    wähleRelation() {
      dies.visgraph.rightMenuOprate('selRelate')
    },
    /**
     * Lösche den angegebenen Knoten* @date 2021-07-26
     * @returns {any}
     */
    Knoten löschen() {
      dieser.visgraph.deleteNode(dieser.visgraph.currentNode)
      this.nodeMenuDialogClose()
    },
    /**
     * Den angegebenen Knoten ausblenden * @date 2021-07-26
     * @returns {any}
     */
    Vertragsknoten() {
      wenn (this.visgraph.currentNode.outLinks.length > 0) {
        dieser.visgraph.Vertrag(dieser.visgraph.aktuellerNode)
        this.nodeMenuDialogClose()
      } anders {
        this.$message.warning('Der aktuelle Knoten hat keine untergeordneten Knoten und kann nicht reduziert werden.')
      }
    },
    /**
     * Erweitern Sie den angegebenen Knoten * @date 2021-07-26
     * @returns {any}
     */
    erweiterter Knoten() {
      wenn (this.visgraph.currentNode.outLinks.length > 0) {
        dieser.visgraph.erweitert(dieser.visgraph.currentNode)
        this.nodeMenuDialogClose()
      } anders {
        this.$message.warning('Der aktuelle Knoten hat keine untergeordneten Knoten und kann nicht erweitert werden.')
      }
    },
    /**
     * Bewegen Sie sich um den angegebenen Knoten * @date 2021-07-26
     * @param {String} ID
     */
    verschiebeCenterThisNode(id) {
      const node = this.visgraph.findNodeById(id)
      this.visgraph.moveNodeToCenter(Knoten)
    },
    /**
     * Knotenkonfiguration * @date 2021-07-30
     * @returns {any}
     */
    Einstellungsknoten () {
      this.nodeMenuDialogClose()
      Konstante {
        Ausweis,
        Etikett,
        Form,
        Füllfarbe,
        Größe,
        Rahmenbreite,
        Strichzeile,
        Rahmenfarbe,
        Textposition,
        Schriftart,
        Schriftfarbe,
        labelBackGround,
        textOffsetX
      } = dieser.visgraph.currentNode
      this.nodeConfigForm.id = ID
      this.nodeConfigForm.label = Bezeichnung
      this.nodeConfigForm.shape = Form
      this.nodeConfigForm.fillColor = "rgb(' + fillColor + ')"
      dies.nodeConfigForm.hexColor = dies.rgbToHex('rgb(' + fillColor + ')')
      this.nodeConfigForm.size = Größe
      this.nodeConfigForm.borderWidth = Rahmenbreite
      this.nodeConfigForm.borderDash = lineDash.length === 2
      this.nodeConfigForm.borderColor = "rgb(' + borderColor + ')"
      this.nodeConfigForm.borderHexColor = this.rgbToHex('rgb(' + borderColor + ')')
      this.nodeConfigForm.textPosition = Textposition
      this.nodeConfigForm.font = Schriftart
      this.nodeConfigForm.fontColor = "rgb(' + fontColor + ')"
      this.nodeConfigForm.fontHexColor = this.rgbToHex('rgb(' + fontColor + ')')
      this.nodeConfigForm.fontBgColor = labelBackGround ? 'rgb(' + labelBackGround + ')' : ''
      this.nodeConfigForm.fontBgHexColor = labelBackGround ? this.rgbToHex('rgb(' + labelBackGround + ')') : ''
      this.nodeConfigForm.textOffset = textOffsetX
      this.nodeConfigDrawer = true
    },
    /**
     * Knotenkonfiguration speichern * @date 2021-07-30
     * @returns {any}
     */
    Einstellung speichern () {
      Konstante {
        Ausweis,
        Etikett,
        Form,
        Füllfarbe,
        Hexadezimalfarbe,
        Größe,
        Rahmenbreite,
        Rahmenstrich,
        Rahmenfarbe,
        RahmenHexFarbe,
        Textposition,
        Schriftart,
        Schriftfarbe,
        SchriftHexFarbe,
        Schrifthintergrundfarbe,
        SchriftartBgHexColor,
        TextOffset
      } = dieses.nodeConfigForm
      const b = this.visgraph.findNodeByAttr('id', id)
      wenn (b) {
        b.label = Etikett
        b.size = Größe
        b.shape = Form
        b.fillColor = this.getColorRgb(fillColor)
        b.textPosition = Textposition
        b.Schriftfarbe = this.getColorRgb(Schriftfarbe)
        b.labelBackGround = this.getColorRgb(fontBgColor)
        b.font = Schriftart;
        b.textOffsetY = Zahl(textOffset) || 2
        b.Randbreite = Zahl(Randbreite) || 2
        b.borderColor = this.getColorRgb(borderColor)
        b.lineDash = (borderDash ? [8, 5] : [0])
        dies.visgraph.refresh()
        diese.$nachricht({
          Meldung: 'Konfiguration erfolgreich geändert!',
          Typ: "Erfolg",
          Dauer: 2000
        })
        this.nodeConfigDrawer = false
      } anders {
        diese.$nachricht({
          Meldung: 'Der ausgewählte Knoten kann nicht gefunden werden!',
          Typ: "Fehler",
          Dauer: 2000
        })
      }
    },
    /**
     * Zufällige Farbe erhalten * @date 2021-07-20
     * @returns {String}-Stil */
    getRandomColor() {
      const r = Math.floor(Math.random() * 256)
      const g = Math.floor(Math.random() * 256)
      const b = Math.floor(Math.random() * 256)
      gibt 'rgb(' + r + ',' + g + ',' + b + ')' zurück
    },
    /**
     * Zuordnung der Farbauswahlbox ändern * @date 2021-07-26
     * @param {String} Wert
     * @param {String} okay
     */
    Farbänderung(Wert, Schlüssel) {
      this.nodeConfigForm[Schlüssel] = this.hexToRgba(Wert)
    },
    /**
     * Hexadezimalen Farbwert in RGB umwandeln
     * @Datum 2021-07-26
     * @param {String} hex
     * @returns {String}
     */
    hexToRgba(hex) {
      return "rgb(" + parseInt("0x" + hex.slice(1, 3)) + "," + parseInt("0x" + hex.slice(3, 5)) + "," + parseInt("0x" + hex.slice(5, 7)) + ")"
    },
    /**
     * RGB-Farbwert in Hexadezimalwert umwandeln * @date 2021-07-26
     * @param {String} Farbe
     * @returns {String}
     */
    rgbToHex(Farbe) {
      const rgb = Farbe.split(',');
      const r = parseInt(rgb[0].split('(')[1]);
      const g = parseInt(rgb[1]);
      const b = parseInt(rgb[2].split(')')[0]);
      const hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
      Hex zurückgeben;
    },
    /**
     * RGB entfernen
     * @Datum 2021-07-30
     * @param {String} ein
     * @returns {String}
     */
    getColorRgb(a) {
      wenn (a && a.Länge > 0) {
        a = a.replace('rgb(', '').replace(')', '')
      } anders {
        a = null
      }
      zurückgeben
    },
    /**
     * Bild speichern * @date 2021-07-23
     */
    Bild speichern() {
      dies.visgraph.saveImage()
    },
    /**
     * JSON exportieren
     * @Datum 2021-07-30
     */
    exportJson() {
      dies.visgraph.exportJsonFile()
    },
    /**
     * Miniaturansicht öffnen * @date 2021-07-23
     */
    Übersichtsansicht anzeigen() {
      Konsole.log(diese.showOverViewFlag)
      this.showOverViewFlag = !this.showOverViewFlag
      dies.visgraph.showOverView(diese.showOverView)
    },
    /**
     * Verkleinern * @date 2021-07-23
     */
    setZoomIn() {
      this.visgraph.setZoom('zoomIn')
    },
    /**
     * Vergrößern * @date 2021-07-23
     */
    setZoomOut() {
      dies.visgraph.setZoom('zoomOut')
    },
    /**
     * Drehung im Uhrzeigersinn * @date 2021-07-23
     */
    im Uhrzeigersinn drehen() {
      dies.visgraph.rotateGraph(-10)
    },
    /**
     *Gegen den Uhrzeigersinn* @date 2021-07-23
     */
    gegen den Uhrzeigersinn drehen() {
      dies.visgraph.rotateGraph(10)
    },
    /**
     * Mausmodus einstellen * @date 2021-07-23
     * @param {String} Typ Drag: Drag-Modus Select: Box-Auswahlmodus Normal: Normalmodus */
    setzeMausmodell(Typ) {
      this.visgraph.setMouseModel(Typ)
    },
    /**
     * Vollbildanzeige * @date 2021-07-23
     */
    Vollbild() {
      Bildschirm voll.Anfrage(dies.$refs.graphpanel)
    }
  }
}
</Skript>

<style lang="scss" scoped>
#Behälter {
  Breite: 100 %;
  Position: relativ;
  #Grafik-Panel {
    Breite: 100 %;
    Höhe: 100 %;
    Hintergrund: #9dadc1;
    Position: absolut;
    Z-Index: 1;
  }
  /* Menüleiste testen */
  .linke-Symbolleiste {
    Position: absolut;
    oben: 0;
    links: 0;
    Z-Index: 1000;
    Breite: 45px;
    Höhe: 100%;
    Hintergrundfarbe: #fafafa;
    Rahmen rechts: 1px durchgezogen #e5e2e2;
    ul {
      li {
        Textausrichtung: zentriert;
        Höhe: 35px;
        Farbe: #066fba;
        Zeilenhöhe: 35px;
        Cursor: Zeiger;
        Polsterung: 0;
        ich {
          Schriftgröße: 18px;
        }
        &:schweben {
          Hintergrundfarbe: #6ea36d;
          Farbe: #fff;
        }
      }
    }
  }

  /* Rechtsklick-Popup-Stil*/
  .nodeMenuDialog {
    Anzeige: keine;
    Position: absolut;
    Mindestbreite: 100px;
    Polsterung: 2px 3px;
    Rand: 0;
    Rand: 1px durchgezogen #e3e6eb;
    Hintergrund: #f9f9f9;
    Farbe: #333;
    Z-Index: 100;
    Rahmenradius: 5px;
    Kastenschatten: 1px 1px 4px rgba (0, 0, 0, 0,2);
    transformieren: übersetzen(0, 15px) skalieren(0,95);
    Übergang: Transformation 0,1 s Auslaufzeit, Deckkraft 0,1 s Auslaufzeit;
    Überlauf: versteckt;
    Cursor: Zeiger;
    li {
      Anzeige: Block;
      Position: relativ;
      Rand: 0;
      Polsterung: 0 10px;
      Rahmenradius: 5px;
      Leerzeichen: Nowrap;
      Zeilenhöhe: 30px;
      Textausrichtung: zentriert;
      &:schweben {
        Hintergrundfarbe: #c3e5fd;
      }
    }
  }

  /* Popup-Fenster mit Knoteninformationen*/
  .nodeInfo {
    .nodeInfoForm {
      Polsterung: 20px 20px 0 20px;
      Rand: durchgezogen 1px #dcdfe6;
      Rand links: keiner;
      Rand rechts: keiner;
      Rand: 20px 0;
    }
    .nodeInfoRelation {
      Polsterung: 0 20px;
      .nodeInfo-Tabelle {
        Breite: 100 %;
        Überlauf-y: scrollen;
        das {
          Breite: 50%;
          Rand: 1px durchgezogen #ebeef5;
          Polsterung: 9px 0 9px 9px;
          Textausrichtung: links;
          &:erstes-Kind {
            Rand rechts: keiner;
          }
        }
        td {
          Breite: 50%;
          Rand: 1px durchgezogen #ebeef5;
          oberer Rand: keiner;
          Polsterung: 9px 0 9px 9px;
          &:erstes-Kind {
            Rand rechts: keiner;
          }
        }
      }
      /deep/ .el-badge__content.is-fixed {
        oben: 24px;
        rechts: -7px;
      }
      P {
        Textausrichtung: zentriert;
        Polsterung: 20px 0;
      }
    }

    .nodeInfoAttribute {
      Polsterung: 0 20px;
    }
  }

  /* Popup-Fenster zur Knotenkonfiguration*/
  .nodeConfig {
    Polsterung: 20px 20px 0 20px;
    Rand: durchgezogen 1px #dcdfe6;
    Rand links: keiner;
    Rand rechts: keiner;
    Rand: 20px 0;
    .Formfarbe {
      Anzeige: Flex;
      Inhalt ausrichten: Abstand dazwischen;
      .form-input {
        Breite: berechnet (100 % – 50 Pixel);
      }
    }
    .Einstellung speichern {
      Breite: 100 %;
      Rand unten: 20px;
      .el-Schaltfläche {
        Breite: 100 %;
      }
    }
  }
}
</Stil>