@steedos/steedos-plugin-schema-builder 2.3.0-beta.9 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steedos/steedos-plugin-schema-builder",
-    "version": "2.3.0-beta.9",
+    "version": "2.3.0",
     "description": "",
     "main": "index.js",
     "author": "",
@@ -10,5 +10,5 @@
         "access": "public"
     },
     "homepage": "https://www.steedos.com",
-    "gitHead": "4a38ff2adeb167f850b33633810bbcfe89383136"
+    "gitHead": "b00e79e6fb8549b2fabed7b6cd6d4847775ba5df"
 }

package/src/objects.action.js

@@ -0,0 +1,5 @@
+module.exports = {
+    schemaBuilder: function (object_name, record_id, fields) {
+        Steedos.openWindow(Steedos.absoluteUrl('/schema-builder'))
+    }
+}

package/src/objects.object.yml

@@ -0,0 +1,6 @@
+extend: objects
+actions:
+  schemaBuilder:
+    label: 对象关系图
+    visible: true
+    on: list

package/webapp/src/g6/behavior/activate-relations/index.tsx

@@ -0,0 +1,160 @@
+
+export default {
+  getDefaultCfg() {
+    return {
+      trigger: 'mouseenter',
+      // 可选 mouseenter || click
+      activeState: 'active',
+      inactiveState: 'inactive',
+
+      shouldUpdate() {
+        return true
+      },
+
+    }
+  },
+
+  getEvents() {
+    if (this.get('trigger') === 'mouseenter') {
+      return {
+        'node:mouseenter': 'setAllItemStates',
+        'node:mouseleave': 'clearAllItemStates',
+      }
+    }
+
+    return {
+      'node:click': 'setAllItemStates',
+      'canvas:click': 'clearAllItemStates',
+    }
+  },
+
+  setAllItemStates(e) {
+    // return
+    const graph = this.get('graph')
+    const item = e.item
+    this.item = item
+
+    if (!this.shouldUpdate(e.item, {
+      event: e,
+      action: 'activate',
+    })) {
+      return
+    }
+
+    const activeState = this.get('activeState')
+    const inactiveState = this.get('inactiveState')
+    const autoPaint = graph.get('autoPaint')
+    graph.setAutoPaint(false)
+    graph.getNodes().filter((a) => !a.isSys).forEach((node) => {
+      // graph.setItemState(node, activeState, false)
+      // inactiveState && graph.setItemState(node, inactiveState, true)
+      graph.updateItem(node, {
+        active: false,
+        inactive: true,
+      })
+    })
+    graph.getEdges().filter((a) => !a.isSys).forEach((edge) => {
+      graph.setItemState(edge, 'init', false)
+      // graph.updateItem(edge, { active: false, into : false })
+      graph.setItemState(edge, inactiveState, true)
+      graph.setItemState(edge, activeState, false) // inactiveState && graph.setItemState(edge, inactiveState, true)
+    }) // inactiveState && graph.setItemState(item, inactiveState, false)
+    // graph.setItemState(item, activeState, true)
+
+    graph.updateItem(item, {
+      active: true,
+    }) // const { target } = e
+    // // alert(target.attr('text'))
+    // if (target.attr('text')) {
+    //    target.attr('fill_old', target.attr('fill'))
+    //    target.attr('fill', 'red')
+    // }
+
+    graph.getEdges().forEach((edge) => {
+      if (edge.getSource() === item) {
+        // inactiveState && graph.setItemState(edge.getTarget(), inactiveState, false)
+        // graph.updateItem(edge.getTarget(), { active: true })
+        graph.setItemState(edge.getTarget(), activeState, true)
+        graph.setItemState(edge, activeState, true)
+        graph.setItemState(edge, inactiveState, false) // graph.updateItem(edge, { active: true, into : true })
+
+        graph.updateItem(edge.getTarget(), {
+          out: false,
+          into: true,
+        })
+        edge.toFront()
+      } else if (edge.getTarget() === item) {
+        graph.updateItem(edge.getSource(), {
+          into: false,
+          out: true,
+        })
+        // inactiveState && graph.setItemState(edge.getSource(), inactiveState, false)
+
+        graph.setItemState(edge.getSource(), activeState, true)
+        graph.setItemState(edge, activeState, true)
+        graph.setItemState(edge, inactiveState, true) // graph.updateItem(edge, { active: true, out : true })
+
+        edge.toFront()
+      }
+    })
+    graph.paint()
+    graph.setAutoPaint(autoPaint)
+    graph.emit('afteractivaterelations', {
+      item: e.item,
+      action: 'activate',
+    })
+  },
+
+  clearAllItemStates(e) {
+    // return
+    // const { target } = e
+    // // alert(target.attr('text'))
+    // if (target.attr('text')) {
+    //   //  target.attr('fill_old', target.attr('fill'))
+    //   if (target.attr('fill_old'))
+    //    target.attr('fill', target.attr('fill_old'))
+    // }
+    const graph = this.get('graph')
+
+    if (!this.shouldUpdate(e.item, {
+      event: e,
+      action: 'deactivate',
+    })) {
+      return
+    }
+
+    const autoPaint = graph.get('autoPaint')
+    graph.setAutoPaint(false)
+    const activeState = this.get('activeState')
+    const inactiveState = this.get('inactiveState')
+    graph.getNodes().filter((a) => !a.isSys).forEach((n) => {
+      // graph.clearItemStates(node, [activeState , inactiveState ])
+      // graph.setItemState(n, activeState, false)
+      // graph.setItemState(n, inactiveState, false)
+      graph.updateItem(n, {
+        active: false,
+        into: false,
+        out: false,
+        inactive: false,
+      })
+
+    })
+    // alert(graph.getEdges().length)
+    graph.getEdges().forEach((n) => {
+      // graph.updateItem(n, { active: false, into : false , out : false })
+      // graph.clearItemStates(edge, [activeState , inactiveState ])
+      graph.clearItemStates(n, [activeState, inactiveState])
+      graph.setItemState(n, 'init', true)
+      // graph.setItemState(n, activeState, false)
+      // graph.setItemState(n, inactiveState, false)
+    })
+    graph.paint()
+    graph.setAutoPaint(autoPaint) // alert(activeState)
+
+    graph.emit('afteractivaterelations', {
+      item: e.item || this.item,
+      action: 'deactivate',
+    })
+  },
+
+}

package/webapp/src/g6/behavior/darg/index.tsx

@@ -0,0 +1,146 @@
+
+import { Util } from '@antv/g6';
+import _ from 'lodash';
+const abs = Math.abs;
+const DRAG_OFFSET = 10;
+const body = document.body;
+export default {
+  getDefaultCfg() {
+    return {
+      direction: 'both'
+    };
+  },
+
+  getEvents() {
+    return {
+      'canvas:mousedown': 'onMouseDown',
+      'canvas:mousemove': 'onMouseMove',
+      'canvas:mouseup': 'onMouseUp',
+      'canvas:click': 'onMouseUp',
+      'canvas:mouseleave': 'onOutOfRange'
+    };
+  },
+
+  updateViewport(e) {
+    const origin = this.origin;
+    const clientX = +e.clientX;
+    const clientY = +e.clientY;
+
+    if (isNaN(clientX) || isNaN(clientY)) {
+      return;
+    }
+
+    let dx = clientX - origin.x;
+    let dy = clientY - origin.y;
+
+    if (this.get('direction') === 'x') {
+      dy = 0;
+    } else if (this.get('direction') === 'y') {
+      dx = 0;
+    }
+
+    this.origin = {
+      x: clientX,
+      y: clientY
+    };
+    this.graph.translate(dx, dy);
+    this.graph.paint();
+  },
+
+  onMouseDown(e) {
+    this.origin = {
+      x: e.clientX,
+      y: e.clientY
+    };
+    this.dragging = false;
+  },
+
+  onMouseMove(e) {
+    e = Util.cloneEvent(e);
+    const graph = this.graph;
+
+    if (!this.origin) {
+      return;
+    }
+
+    if (this.origin && !this.dragging) {
+      if (abs(this.origin.x - e.clientX) + abs(this.origin.y - e.clientY) < DRAG_OFFSET) {
+        return;
+      }
+
+      if (this.shouldBegin.call(this, e)) {
+        e.type = 'dragstart';
+        graph.emit('canvas:dragstart', e);
+        this.dragging = true;
+      }
+    }
+
+    if (this.dragging) {
+      e.type = 'drag';
+      const self = this;
+      const canvasElement = self.graph.get('canvas').get('el');
+      canvasElement.style.cursor = 'grabbing';
+      graph.emit('canvas:drag', e);
+    }
+
+    if (this.shouldUpdate.call(this, e)) {
+      this.updateViewport(e); // console.log(e)
+      // _.throttle(() => {
+      //   this.updateViewport(e)
+      // }, 0)
+    }
+  },
+
+  onMouseUp(e) {
+    if (!this.dragging) {
+      this.origin = null;
+      return;
+    }
+
+    e = Util.cloneEvent(e);
+    const graph = this.graph;
+
+    if (this.shouldEnd.call(this, e)) {
+      this.updateViewport(e);
+    }
+
+    e.type = 'dragend';
+    graph.emit('canvas:dragend', e);
+    this.endDrag();
+  },
+
+  endDrag() {
+    if (this.dragging) {
+      const self = this;
+      const canvasElement = self.graph.get('canvas').get('el');
+      canvasElement.style.cursor = 'grab';
+      this.origin = null;
+      this.dragging = false; // 终止时需要判断此时是否在监听画布外的 mouseup 事件，若有则解绑
+
+      const fn = this.fn;
+
+      if (fn) {
+        body.removeEventListener('mouseup', fn, false);
+        this.fn = null;
+      }
+    }
+  },
+
+  // 若在拖拽时，鼠标移出画布区域，此时放开鼠标无法终止 drag 行为。在画布外监听 mouseup 事件，放开则终止
+  onOutOfRange(e) {
+    if (this.dragging) {
+      const self = this;
+      const canvasElement = self.graph.get('canvas').get('el');
+
+      const fn = ev => {
+        if (ev.target !== canvasElement) {
+          self.onMouseUp(e);
+        }
+      };
+
+      this.fn = fn;
+      body.addEventListener('mouseup', fn, false);
+    }
+  }
+
+};

package/webapp/src/g6/behavior/index.tsx

@@ -0,0 +1,5 @@
+import G6 from '@antv/g6';
+import ActivateRelations from './activate-relations';
+import Darg from './darg';
+G6.registerBehavior('console-activate-relations', ActivateRelations);
+G6.registerBehavior('console-darg', Darg);