diff --git a/README.md b/README.md index 53f41b4..3102303 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -### GraphXR Iframe example(V2.9.0 beta) +### GraphXR Iframe example(V2.10.0 beta) Your can try with at first @@ -32,8 +32,9 @@ You can change defaultEmbedGraphURL in index.html line 116 ``` http://localhost:3000?embedGraphURL=https://graphxrdev.kineviz.com/p/602d2b0787329b003351adee/blank/6033b824378ffc0034884a58/IP-TEST ``` - + ### 1. ApiCommand +> Please sure the graphXR iframe already load, please refer 3.1 #### 1.1 getGraph resData.content {nodes,edges} @@ -98,24 +99,10 @@ graphXR.injectionApiCommand('MATCH (n)-[r]-(m) RETURN * LIMIT 100', iframeElem,{ ``` -### 2. Injection codes +### 2. Injection Function (graphXR.injectionApiFunc) +> Please sure the graphXR iframe already load, please refer 3.1 -#### 2.1 select all (injectionCode is beta function, so do not recommand use it.) - -``` -graphXR.injectionApiCommand(':getGraph', iframeElem) -.then((resData) => { - console.warn("Receive all data:", resData.content) - const {nodes} = resData.content; - graphXR.injectionCode(` - _GXR.NodesSelectManager.selectWithNodeIds(${JSON.stringify(nodes.map(n => n._GXRID))},'new') - ` , iframeElem).then(resData => { - console.warn("Injection select all nodes success:", resData) - }) -}) -``` - -#### 2.2 update twinkled +#### 2.1 update twinkled ``` graphXR.injectionApiCommand(':getGraph', iframeElem) @@ -155,9 +142,44 @@ graphXR.injectionApiCommand(':getGraph', iframeElem) ); ``` + +#### 2.2 flyTo +``` +graphXR.injectionApiCommand(':getGraph', iframeElem) +.then((resData) => { + console.warn("Receive all data:", resData.content) + const {nodes, edges} = resData.content; + let flyToNode = nodes[0]; + if(!flyToNode){ + return + } + graphXR.injectionApiFunc( + "flyTo", + flyToNode._GXRID, + iframeElem + ); +}) -#### 2.3 highlightWithNodeIds +``` + +#### 2.3 Select nodes + +``` +graphXR.injectionApiCommand(':getGraph', iframeElem) +.then((resData) => { + console.warn("Receive all data:", resData.content) + const {nodes} = resData.content; + //Select all nodes + graphXR.injectionApiFunc( + "selectWithNodeIds", + { nodeIds: nodes.map(n => n._GXRID) }, + iframeElem + ); +}) +``` + +#### 2.4 highlightWithNodeIds ``` graphXR.injectionApiCommand(':getGraph', iframeElem) @@ -178,7 +200,7 @@ graphXR.injectionApiCommand(':getGraph', iframeElem) ``` -#### 2.4 highlightWithEdgeIds +#### 2.5 highlightWithEdgeIds ``` graphXR.injectionApiCommand(':getGraph', iframeElem) @@ -199,30 +221,50 @@ graphXR.injectionApiCommand(':getGraph', iframeElem) ``` -#### 2.5 flyTo +#### 2.6 getNodeWithId ``` -graphXR.injectionApiCommand(':getGraph', iframeElem) -.then((resData) => { - console.warn("Receive all data:", resData.content) - const {nodes, edges} = resData.content; - let flyToNode = nodes[0]; - if(!flyToNode){ - return - } - graphXR.injectionApiFunc( - "flyTo", - flyToNode._GXRID, +let _GXRID = 9999999999; + graphXR.injectionApiFunc( + "getNodeWithId", + _GXRID, iframeElem - ); + ).then( res =>{ + console.warn("Got Node:", res.content) +}) + +``` + +#### 2.7 getNodeWithProps + +``` +//find the node where name = 'Sean' +graphXR.injectionApiFunc( + "getNodeWithProps", + {name:"Sean"}, + iframeElem + ).then( res =>{ + console.warn("Got Node:", res.content) }) ``` ### 3. event, only support ['change','select'] +#### 3.1 graphxr load event +> You can use load event sure the GraphXR iframe already loaded +``` +graphXR.injectionOn("load", (eventName, res) => { + if(res === 'init'){ + console.warn("GraphXR iframe already load", res) + }else{ + console.warn("GraphXR Load the view ", res) + } +}, iframeElem, "iframe-unique-name") + +``` -#### 3.1 graphxr change event +#### 3.2 graphxr change event ``` graphXR.injectionOn("change", () => { @@ -235,7 +277,7 @@ graphXR.injectionOn("change", () => { }, iframeElem, "iframe-unique-name") ``` -#### 3.2 graphxr select event +#### 3.3 graphxr select event ``` graphXR.injectionOn("select", () => { @@ -249,8 +291,22 @@ graphXR.injectionOn("select", () => { ``` +#### 3.4 graphxr nearby event -#### 4. Layout +``` +graphXR.injectionOn("nearby", (eventName, res) => { + console.warn("receive nearby nodes", res) +}, iframeElem, "iframe-unique-name") + +``` + + +#### 4 Injection Code + +> InjectionCode is beta function, so do not recommand use it. +> Please sure the graphXR iframe already load, please refer 3.1 + +#### 4.1 Layout Support force, line, grid, circle, cube diff --git a/graphXR.injection.js b/graphXR.injection.js index a4aaf98..7f6ab71 100644 --- a/graphXR.injection.js +++ b/graphXR.injection.js @@ -1,7 +1,7 @@ ; (function ($) { 'use strict' - const version = '2.9.0'; + const version = '2.10.0'; const GIframeOnMessageHandlerMap = { //id: {id, iframeElement, messageHandler} @@ -10,7 +10,8 @@ const GEvents = { "change": {}, "select": {}, - "nearby":{} + "nearby":{}, + 'load':{} } let GTempResponse = { @@ -200,9 +201,8 @@ } function injectionOn(eventName = 'change', callback = () => { }, iframeElement = getIframeElem(), uniqueName = '') { - if (!['change', 'select','nearby'].includes(eventName) || !callback) { - let err = new Error(`Miss eventName['change','select','nearby'] ro callback function`); - return console.error(err.message); + if (!['change', 'select','nearby','load'].includes(eventName) || !callback) { + console.warn(`Miss eventName['change','select','nearby','load'] or callback function`); } //try remove at first, then add eventLister @@ -213,6 +213,9 @@ uniqueName = uniqueName || callback.name; GEvents[eventName][uniqueName] = callback; + if(eventName === 'load'){ + return "load do not need injection code"; + } let codeIndex = uniqueName; let code = ` //convert to global diff --git a/types.d.ts b/types.d.ts index 3264615..c6db32c 100644 --- a/types.d.ts +++ b/types.d.ts @@ -13,7 +13,7 @@ type callbackType = ( type graphXR = { version: string; injectionApiFunc: ( - funcName: "updateGraph" | "flyTo" | "updateTwinkled" | "highlightWithNodeIds" | "highlightWithEdgeIds", + funcName: "updateGraph" | "flyTo" | "updateTwinkled" | "highlightWithNodeIds" | "highlightWithEdgeIds" | 'selectWithNodeIds' | 'getNodeWithIds' | 'getNodeWithProps', params: any, iframeElement: HTMLElement ) => Promise; @@ -30,7 +30,7 @@ type graphXR = { params: any ) => Promise; injectionOn: ( - eventName: "change" | "select" | "nearby", + eventName: "change" | "select" | "nearby" | "load", callback: callbackType, iframeElement: HTMLElement, uniqueName: string