Vue-interactive-graphics NPM

vue-interactive-graphics (geometry?)

Vue-interactive-graphics component allows to manipulate easily geometric objects by drag and two way data-binding. Under the hood, it uses d3.js.

<InteractiveGraphics
  :width="800"
  :height="400"
  :dataString="dataText"
  @update="dataUpdate"
/>

width, height: (numbers), dimentions in pixels of the component
dataString: (string), JSON object as a string representing the data
dataUpdate ( fun: string -> void ) update function called when vue-interactive-graphics modifies some values in the data (when the user drags some element)

data passed is a JSON object given to vue-interactive-graphics as a string and is composed by the following elements:

instr: List of instructions (Line, Circle, etc.). All of them are listed below.
layerOrder: Indicates layers to display and in which order
drawSize: size of the drawing area (indicated by fields w and h).
background: (OPTIONAL) background color, by default white.

Line instructions have the following fields:

x1,y1,x2,y2: coordinates of the first point and second point as in the SVG spec.
stroke: (OPTIONAL) color of the line (by default: '#ccc')
stroke-width: (OPTIONAL) width of the line (by default 1)

Circle instruction have the following fields:

Rectangle instruction have the following fields:

x,y,width,height: coordinates and size of the rectangle
stroke: (OPTIONAL) color of the line (by default: '#ccc')
stroke-width: (OPTIONAL) width of the line (by default 1)
fill: (OPTIONAL) filling of the area (default: 'black')
text: (OPTIONAL) text at the center of the circle
textColor: (OPTIONAL) color of text
textStroke: (OPTIONAL) border color of the text
draggable: (OPTIONAL) allows user to drag the shape
resize: (OPTIONAL) allows user to resize rectangle. Possible values are:
- constantSurface: surface stay the same as user resizes the shape.

Grid instruction have the following fields:

update: emited when the user changes something in the drawing and returns new drawing instructions
change: emited when the user changes something in the drawing and returns a json object containing:
- id: id of the instruction (position in the instruction array)
- changes: dict with values (k,v) where k is the key and v the new value

layers : vue-interactive-graphics is given a list of layers. Each layer can be interpreted as a group element (g) in SVG. Each layer contains geometric elements like lines, rectangles, circles, text etc.
geometric element : Each geometric element is composed of display properties according to its type and coordinates.
scaling factor : According to component size and drawing size, dimentions are scaled.