feat: example for basic shapes

antvis · Mar 25, 2020 · 8d1cf6b · 8d1cf6b
1 parent 75d9d1b
commit 8d1cf6b
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 20,389 deletions.
diff --git a/examples/x6-example-features/src/pages/index.less b/examples/x6-example-features/src/pages/index.less
@@ -15,3 +15,7 @@
 .x6-page-background {
   box-shadow: 0 0 2px 1px #e9e9e9;
 }
+
+.scalable * {
+  vector-effect: non-scaling-stroke;
+}
diff --git a/examples/x6-example-features/src/pages/joint.tsx b/examples/x6-example-features/src/pages/joint.tsx
@@ -1,77 +1,89 @@
 import React from 'react'
 import { joint } from '@antv/x6'
-import {
-  Rect,
-  Rect1,
-  Circle,
-  Ellipse,
-  Rhombus,
-} from '@antv/x6/lib/research/shape/basic'
 import './index.less'
 
 export default class Example extends React.Component {
   private container: HTMLDivElement
 
   componentDidMount() {
     const graph = new joint.Graph({ container: this.container })
-    const rect = new Rect({
+    const rect = graph.addNode({
       size: { width: 100, height: 40 },
       position: { x: 32, y: 40 },
       attrs: {
         text: { text: 'rect' },
       },
     })
 
-    const circle = new Circle({
+    rect.setAttrByPath('rect/fill', 'red')
+
+    graph.addNode({
+      type: 'basic.circle',
       position: { x: 160, y: 40 },
       attrs: {
         text: { text: 'circle' },
       },
     })
 
-    const ellipse = new Ellipse({
+    graph.addNode({
+      type: 'basic.ellipse',
       position: { x: 240, y: 40 },
       attrs: {
         text: { text: 'ellipse' },
       },
     })
 
-    const rhombus = new Rhombus({
-      position: { x: 320, y: 40 },
+    graph.addNode({
+      type: 'basic.text',
+      position: { x: 170, y: 120 },
+      size: { width: 60, height: 30 },
       attrs: {
-        text: { text: 'rhombus' },
+        text: { text: 'text' },
       },
     })
 
-    graph.model.addCell(rect)
-    graph.model.addCell(circle)
-    graph.model.addCell(ellipse)
-    graph.model.addCell(rhombus)
-
-    const rect1 = new Rect1({
-      size: { width: 100, height: 40 },
-      position: { x: 32, y: 120 },
+    graph.addNode({
+      type: 'basic.rhombus',
+      position: { x: 320, y: 40 },
       attrs: {
-        text: { text: 'rect' },
+        text: { text: 'rhombus', fontSize: 10 },
       },
     })
 
-    graph.model.addCell(rect1)
-
-    rect.setAttrByPath('rect/fill', 'red')
-
-    console.log(rect1)
-
-    console.log(graph)
-
-    // class NodeView1 extends joint.CellView {}
-    // NodeView1.setDefaults({ tagName: 'ss' })
+    graph.addNode({
+      type: 'basic.image',
+      size: { width: 40, height: 40 },
+      position: { x: 450, y: 50 },
+      attrs: {
+        text: { text: 'image' },
+        image: {
+          'xlink:href': 'http://placehold.it/48x48',
+          width: 48,
+          height: 48,
+        },
+      },
+    })
 
-    // class NodeView2 extends joint.CellView {}
-    // NodeView2.setDefaults({ tagName: 'dd' })
+    graph.addNode({
+      type: 'basic.path',
+      position: { x: 50, y: 120 },
+      size: { width: 40, height: 40 },
+      attrs: {
+        path: {
+          d:
+            'M25.979,12.896 19.312,12.896 19.312,6.229 12.647,6.229 12.647,12.896 5.979,12.896 5.979,19.562 12.647,19.562 12.647,26.229 19.312,26.229 19.312,19.562 25.979,19.562z',
+        },
+        text: { text: 'path' },
+      },
+    })
 
-    // console.log(NodeView1.getDefaults())
-    // console.log(NodeView2.getDefaults())
+    graph.addNode({
+      type: 'basic.text-block',
+      position: { x: 400, y: 150 },
+      size: { width: 180, height: 100 },
+      content:
+        'Lorem ipsum dolor sit amet,\n consectetur adipiscing elit. Nulla vel porttitor est.',
+    })
   }
 
   refContainer = (container: HTMLDivElement) => {