mascot-vis 2.0.0 → 3.0.0

package/src-old/interaction/brush.js

@@ -0,0 +1,362 @@
+export const Direction = {
+    North: 'N',
+    South: 'S',
+    East: 'E',
+    West: 'W',
+    NorthEast: 'NE',
+    NorthWest: 'NW',
+    SouthEast: 'SE',
+    SouthWest: 'SW',
+    Move: 'M'
+}
+
+export default class Brush {
+
+    // Resize Corners and handling Bounds
+
+    SVG = null;
+    drag = false;
+    selection = [];
+    mouseDown = false;
+    rectSvg = null;
+    bounds = null;
+    brushColor = '#9c3131';
+
+    dir = null;
+    bb = [];
+    mouseDownEvent = null;
+
+    constructor(id, brushColor, bounds = null) {
+        this.SVG = d3.select("#" + id).style('cursor', 'crosshair');
+        this.brushColor = brushColor;
+        if (bounds) {
+            this.bounds = bounds;
+        }
+    }
+
+    brush() {
+        document.addEventListener(
+            'mousedown', ($e) => {
+                this.mouseDownEvent = $e;
+                if (!this.rectSvg) {
+                    this.appendRectangles(this.brushColor);
+                }
+                if (this.bounds) {
+                    if (!($e.layerX >= this.bounds.left && $e.layerX <= this.bounds.left + this.bounds.width
+                        && $e.layerY >= this.bounds.top && $e.layerY <= this.bounds.top + this.bounds.height))
+                        return;
+                }
+                this.drag = false;
+                this.mouseDown = true;
+                this.selection = [$e.layerX, $e.layerY];
+
+                let x = this.bb[0];
+                let y = this.bb[1];
+                let height = this.bb[2];
+                let width = this.bb[3];
+                if (this.selection[0] > x + 3 && this.selection[0] < x + width - 3 && (this.selection[1] >= y + height - 3 && this.selection[1] <= y + height + 3)) {
+                    this.dir = Direction.South;
+                } else if (this.selection[0] > x + 3 && this.selection[0] < x + width - 3 && (this.selection[1] >= y - 3 && this.selection[1] <= y + 3)) {
+                    this.dir = Direction.North;
+                } else if (this.selection[1] > y + 3 && this.selection[1] < y + height - 3 && (this.selection[0] >= x + width - 3 && this.selection[0] <= x + width + 3)) {
+                    this.dir = Direction.East;
+                } else if (this.selection[1] > y + 3 && this.selection[1] < y + height - 3 && (this.selection[0] >= x - 3 && this.selection[0] <= x + 3)) {
+                    this.dir = Direction.West;
+                } else if (this.selection[0] >= x - 3 && this.selection[0] <= x + 3 && this.selection[1] >= y - 3 && this.selection[1] <= y + 3) {
+                    this.dir = Direction.NorthWest;
+                } else if (this.selection[0] >= x - 3 && this.selection[0] <= x + 3 && this.selection[1] >= y + height - 3 && this.selection[1] <= y + height + 3) {
+                    this.dir = Direction.SouthWest;
+                } else if (this.selection[0] >= x + width - 3 && this.selection[0] <= x + width + 3 && this.selection[1] >= y - 3 && this.selection[1] <= y + 3) {
+                    this.dir = Direction.NorthEast;
+                } else if (this.selection[0] >= x + width - 3 && this.selection[0] <= x + width + 3 && this.selection[1] >= y + height - 3 && this.selection[1] <= y + height + 3) {
+                    this.dir = Direction.SouthEast;
+                } else if (this.selection[0] > x + 3 && this.selection[0] < x + width - 3 && this.selection[1] > y + 3 && this.selection[1] < y + height - 3) {
+                    this.dir = Direction.Move;
+                } else {
+                    this.dir = null;
+                    this.updateRectangles(null, $e.layerX, $e.layerY, 0, 0);
+                }
+            });
+
+        document.addEventListener(
+            'mousemove', ($e) => {
+                if (this.mouseDown) {
+                    this.drag = true;
+                    if (this.dir == Direction.North) {
+                        if ($e.layerY > this.bb[1]) {
+                            //pull down
+                            if ($e.layerY <= this.bb[1] + this.bb[2])//When we are above bottom line of rect
+                                this.updateRectangles(null, this.bb[0], $e.layerY, this.bb[3], this.bb[2] + this.bb[1] - $e.layerY);
+                            else//When we go below bottom line of rect
+                                this.updateRectangles(null, this.bb[0], this.bb[1] + this.bb[2], this.bb[3], $e.layerY - this.bb[1] - this.bb[2]);
+                        } else {
+                            // pull up
+                            this.updateRectangles(null, this.bb[0], $e.layerY, this.bb[3], this.bb[2] + this.bb[1] - $e.layerY);
+                        }
+                    } else if (this.dir == Direction.South) {
+                        if ($e.layerY > this.bb[1]) {
+                            //pull down
+                            this.updateRectangles(null, this.bb[0], this.bb[1], this.bb[3], $e.layerY - this.bb[1]);
+                        } else {
+                            // pull up
+                            this.updateRectangles(null, this.bb[0], $e.layerY, this.bb[3], this.bb[1] - $e.layerY);
+                        }
+                        //x,y,height,width
+                    } else if (this.dir == Direction.West) {
+                        if ($e.layerX > this.bb[0]) {//Move Right
+                            if ($e.layerX <= this.bb[0] + this.bb[3])// When we are to the left of rightmost border
+                                this.updateRectangles(null, $e.layerX, this.bb[1], this.bb[3] - $e.layerX + this.bb[0], this.bb[2]);
+                            else
+                                this.updateRectangles(null, this.bb[0] + this.bb[3], this.bb[1], $e.layerX - this.bb[0] - this.bb[3], this.bb[2]);
+
+                        } else {// Move Left
+                            this.updateRectangles(null, $e.layerX, this.bb[1], this.bb[3] + this.bb[0] - $e.layerX, this.bb[2]);
+                        }
+                    } else if (this.dir == Direction.East) {
+                        if ($e.layerX > this.bb[0]) {//Move Left
+                            this.updateRectangles(null, this.bb[0], this.bb[1], $e.layerX - this.bb[0], this.bb[2]);
+                        } else {
+                            this.updateRectangles(null, $e.layerX, this.bb[1], this.bb[0] - $e.layerX, this.bb[2]);
+                        }
+                    }
+                    else if (this.dir == Direction.NorthEast) {
+                    }
+                    else if (this.dir == Direction.NorthWest) {
+                    }
+                    else if (this.dir == Direction.SouthEast) {
+                        //Done
+                        if ($e.layerX > this.bb[0] && $e.layerY > this.bb[1]) {
+                            //4
+                            this.updateRectangles(null, this.bb[0], this.bb[1], $e.layerX - this.bb[0], $e.layerY - this.bb[1]);
+                        } else if ($e.layerX > this.bb[0] && $e.layerY < this.bb[1]) {
+                            //1
+                            this.updateRectangles(null, this.bb[0], $e.layerY, $e.layerX - this.bb[0], this.bb[1] - $e.layerY);
+                        } else if ($e.layerX < this.bb[0] && $e.layerY < this.bb[1]) {
+                            //2
+                            this.updateRectangles(null, $e.layerX, $e.layerY, this.bb[0] - $e.layerX, this.bb[1] - $e.layerY);
+                        } else {
+                            //3
+                            this.updateRectangles(null, $e.layerX, this.bb[1], this.bb[0] - $e.layerX, $e.layerY - this.bb[1]);
+                        }
+                    }
+                    else if (this.dir == Direction.SouthWest) {
+                    }
+                    else if (this.dir == Direction.Move) {
+                        this.updateRectangles(null, this.bb[0] + $e.layerX - this.selection[0], this.bb[1] + $e.layerY - this.selection[1], this.bb[3], this.bb[2]);
+                        this.bb[0] = this.bb[0] + $e.layerX - this.selection[0];
+                        this.bb[1] = this.bb[1] + $e.layerY - this.selection[1];
+                        this.selection = [$e.layerX, $e.layerY];
+                    }
+                    else {
+                        let { __x, __y, __height, __width } = this.getRectCoordinates($e, this.selection);
+                        this.updateRectangles(null, __x, __y, __width, __height);
+                    }
+                }
+            });
+
+        document.addEventListener(
+            'mouseup', ($e) => {
+                if (this.mouseDown) {
+                    if (this.drag) {
+                        console.log('Brush');
+                        let bb = this.rectSvg._groups[0][0].getBoundingClientRect();
+                        this.bb = [bb.x - 183, bb.y, bb.height, bb.width];
+                        document.dispatchEvent(new CustomEvent('brush', {
+                            'detail': { selection: [[bb.x - 183, bb.y], [bb.x - 183 + bb.width, bb.y + bb.height]] },
+                        }));
+                        // Brush Update here
+                    } else {
+                        console.log('Click');
+                        this.updateRectangles('none');
+                        this.bb = [];
+                        this.removeRectangles();
+                        // Click Update here
+                        document.dispatchEvent(new CustomEvent('brush', {
+                            'detail': { e: this.mouseDownEvent },
+                        }));
+                    }
+                    this.selection = [];
+                    this.dir = null;
+                    this.mouseDown = false;
+                }
+            })
+        return 1;
+    }
+    removeRectangles() {
+        this.rectSvg = null;
+        d3.selectAll('.handle--selection').remove()
+        d3.selectAll('.handle--n').remove()
+        d3.selectAll('.handle--w').remove();
+        d3.selectAll('.handle--e').remove();
+        d3.selectAll('.handle--s').remove();
+        d3.selectAll('.handle--nw').remove();
+        d3.selectAll('.handle--ne').remove();
+        d3.selectAll('.handle--sw').remove();
+        d3.selectAll('.handle--se').remove();
+        d3.selectAll('.handle--overlay').remove();
+
+    }
+    appendRectangles(brushColor) {
+        this.SVG
+            .append('rect')
+            .attr("class", "handle--overlay")
+            .attr("x", "0")
+            .attr("x", "0")
+            .attr("height", this.SVG._groups[0][0].clientHeight)
+            .attr("width", this.SVG._groups[0][0].clientWidth)
+            .style('cursor', 'crosshair')
+            .style("opacity", '0')
+        this.rectSvg = this.SVG
+            .append('rect')
+            .attr("class", "handle--selection")
+            .style("fill", brushColor)
+            .style('cursor', 'move')
+            .style("opacity", '0.3')
+            .attr("display", "none");
+        this.SVG
+            .append('rect')
+            .attr("class", "handle--n")
+            .style('cursor', 'ns-resize')
+            .attr("display", "none")
+            .style("opacity", '0')
+        this.SVG
+            .append('rect')
+            .attr("class", "handle--w")
+            .style('cursor', 'ew-resize')
+            .attr("display", "none")
+            .style("opacity", '0')
+        this.SVG
+            .append('rect')
+            .attr("class", "handle--e")
+            .style('cursor', 'ew-resize')
+            .attr("display", "none")
+            .style("opacity", '0')
+        this.SVG
+            .append('rect')
+            .attr("class", "handle--s")
+            .style('cursor', 'ns-resize')
+            .attr("display", "none")
+            .style("opacity", '0')
+        this.SVG
+            .append('rect')
+            .attr("class", "handle--nw")
+            .style('cursor', 'nwse-resize')
+            .attr("display", "none")
+            .style("opacity", '0')
+        this.SVG
+            .append('rect')
+            .attr("class", "handle--ne")
+            .style('cursor', 'nesw-resize')
+            .attr("display", "none")
+            .style("opacity", '0')
+        this.SVG
+            .append('rect')
+            .attr("class", "handle--sw")
+            .style('cursor', 'nesw-resize')
+            .attr("display", "none")
+            .style("opacity", '0')
+        this.SVG
+            .append('rect')
+            .attr("class", "handle--se")
+            .style('cursor', 'nwse-resize')
+            .attr("display", "none")
+            .style("opacity", '0');
+    }
+    updateRectangles(display = null, __x = null, __y = null, __width = null, __height = null) {
+        d3.selectAll('.handle--selection').attr("display", display).attr("x", __x)
+            .attr("y", __y)
+            .attr("height", __height)
+            .attr("width", __width)
+        d3.selectAll('.handle--n').attr("display", display).attr("x", __x ? __x - 3 : __x)
+            .attr("y", __y ? __y - 3 : __y)
+            .attr("height", __height == 0 || __height ? 6 : __height)
+            .attr("width", __width == 0 || __width ? __width + 6 : __width)
+        d3.selectAll('.handle--w').attr("display", display).attr("x", __x ? __x - 3 : __x)
+            .attr("y", __y ? __y - 3 : __y)
+            .attr("height", __height == 0 || __height ? __height + 6 : __height)
+            .attr("width", __width == 0 || __width ? 6 : __width);
+        d3.selectAll('.handle--e').attr("display", display).attr("x", __x ? __x + __width - 3 : __x)
+            .attr("y", __y ? __y - 3 : __y)
+            .attr("height", __height == 0 || __height ? __height + 6 : __height)
+            .attr("width", __width == 0 || __width ? 6 : __width);
+        d3.selectAll('.handle--s').attr("display", display).attr("x", __x ? __x - 3 : __x)
+            .attr("y", __y ? __y + __height - 3 : __y)
+            .attr("height", __height == 0 || __height ? 6 : __height)
+            .attr("width", __width == 0 || __width ? __width + 6 : __width);
+        d3.selectAll('.handle--nw').attr("display", display).attr("x", __x ? __x - 3 : __x)
+            .attr("y", __y ? __y - 3 : __y)
+            .attr("height", __height == 0 || __height ? 6 : __height)
+            .attr("width", __width == 0 || __width ? 6 : __width);
+        d3.selectAll('.handle--ne').attr("display", display).attr("x", __x ? __x + __width - 3 : __x)
+            .attr("y", __y ? __y - 3 : __y)
+            .attr("height", __height == 0 || __height ? 6 : __height)
+            .attr("width", __width == 0 || __width ? 6 : __width);
+        d3.selectAll('.handle--sw').attr("display", display).attr("x", __x ? __x - 3 : __x)
+            .attr("y", __y ? __y + __height - 3 : __y)
+            .attr("height", __height == 0 || __height ? 6 : __height)
+            .attr("width", __width == 0 || __width ? 6 : __width);
+        d3.selectAll('.handle--se').attr("display", display).attr("x", __x ? __x + __width - 3 : __x)
+            .attr("y", __y ? __y + __height - 3 : __y)
+            .attr("height", __height == 0 || __height ? 6 : __height)
+            .attr("width", __width == 0 || __width ? 6 : __width);
+    }
+    getRectCoordinates($e, selection) {
+        let __x, __y, __width, __height = null;
+        if ($e.layerY - selection[1] < 0) {
+            if ($e.layerX - selection[0] > 0) {
+                // LB-RT x+y-
+                __x = selection[0];
+                __y = $e.layerY;
+                __height = selection[1] - $e.layerY;
+                __width = $e.layerX - selection[0];
+            } else {
+                // RB-LT x-y-
+                __x = $e.layerX;
+                __y = $e.layerY;
+                __height = selection[1] - $e.layerY;
+                __width = selection[0] - $e.layerX;
+
+            }
+        } else {
+            if ($e.layerX - selection[0] > 0) {
+                // LT-BR x+y+
+                __x = selection[0];
+                __y = selection[1];
+                __height = $e.layerY - selection[1];
+                __width = $e.layerX - selection[0];
+            } else {
+                // RT-LB x-y+
+                __x = $e.layerX;
+                __y = selection[1];
+                __height = $e.layerY - selection[1];
+                __width = selection[0] - $e.layerX;
+            }
+        }
+
+        if (this.bounds) {
+            // Bounded
+            if ($e.layerY - selection[1] > 0) {
+                if (__y + __height > this.bounds.top + this.bounds.height) {
+                    __height = this.bounds.top + this.bounds.height - selection[1];
+                }
+            } else {
+                if (this.bounds.top + __height > selection[1]) {
+                    __y = this.bounds.top;
+                    __height = selection[1] - $e.layerY - (this.bounds.top + __height - selection[1]);
+                }
+            }
+
+            if ($e.layerX - selection[0] > 0) {
+                if (__x + __width > this.bounds.left + this.bounds.width) {
+                    __width = this.bounds.left + this.bounds.width - selection[0];
+                }
+            } else {
+                if (this.bounds.left + __width > selection[0]) {
+                    __x = this.bounds.left;
+                    __width = selection[0] - $e.layerX - (this.bounds.left + __width - selection[0]);
+                }
+            }
+        }
+        return { __x, __y, __height, __width };
+    }
+}

package/src-old/item/Segment.js

@@ -0,0 +1,29 @@
+export default class Segment {
+	
+	constructor(v1, v2, parentMark, id) {
+		this.type = "segment";
+		this._id = id;
+		this.vertex1 = v1;
+		this.vertex2 = v2;
+
+		this.dataScope = undefined;
+		this.parent = parentMark;
+	}
+
+	get id() {
+		return this.parent.id + "_s_" + this._id;
+	}
+
+	_doTranslate(dx, dy) {
+		this.vertex1._doTranslate(dx, dy);
+		this.vertex2._doTranslate(dx, dy);
+	}
+
+	get x() {
+		return (this.vertex1.x + this.vertex2.x)/2;
+	}
+
+	get y() {
+		return (this.vertex1.y + this.vertex2.y)/2;
+	}
+}

package/src-old/item/Vertex.js

@@ -0,0 +1,118 @@
+// Based on path.Segment.js, as part of Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
+// http://paperjs.org/
+// Copyright (c) 2011 - 2019, Juerg Lehni & Jonathan Puckey
+// http://scratchdisk.com/ & https://puckey.studio/
+//
+// Distributed under the MIT license. See LICENSE file for detail
+//
+// All rights reserved.
+
+import Point from "../basic/Point"
+import Rectangle from "../basic/Rectangle";
+
+export default class Vertex {
+
+	//handles are relative to the point
+	constructor(point, parentMark, id) {
+		this.type = "vertex";
+		this._id = id;
+		this.x = point.x;
+		this.y = point.y;
+		this.dataScope = undefined;
+		this.parent = parentMark; 
+
+		this.shape = undefined;
+		this.width = 0;
+		this.height = 0;
+		this.radius = 0;
+		this.fillColor = "#555";
+		this.opacity = 1;
+		this.strokeWidth = 0;
+		this.strokeColor = "#aaa";
+		this._polarAngle = undefined;
+	}
+
+	get bounds() {
+		switch(this.shape) {
+			case "rect":
+				return new Rectangle(this.x - this.width/2, this.y - this.height/2, this.width, this.height);
+			case "circle":
+				return new Rectangle(this.x - this.radius, this.y - this.radius, this.radius * 2, this.radius * 2);
+			default:
+				return new Rectangle(this.x - 0.5, this.y - 0.5, 1, 1);
+		}
+	}
+
+	get id() {
+		return this.parent.id + "_v_" + this._id;
+	}
+
+	toJSON() {
+		let json = {};
+		json.type = this.type;
+		json.id = this._id;
+		json.x = this.x;
+		json.y = this.y;
+		if (this.dataScope)
+			json.dataScope = this.dataScope.toJSON();
+		if (this._polarAngle !== undefined)
+			json.polarAngle = this._polarAngle;
+		json.shape = this.shape;
+		json.width = this.width;
+		json.height = this.height;
+		json.radius = this.radius;
+		json.fillColor = this.fillColor;
+		json.opacity = this.opacity;
+		json.strokeWidth = this.strokeWidth;
+		json.strokeColor = this.strokeColor;
+		return json;
+	}
+
+	static fromJSON(json, parent) {
+		let v = new Vertex(json, parent, json.id);
+		if (json.dataScope)
+			v.dataScope = json.dataScope;
+		if ("polarAngle" in json)
+			v.polarAngle = json.polarAngle;
+		v.shape = json.shape;
+		v.width = json.width;
+		v.height = json.height;
+		v.radius = json.radius;
+		v.fillColor = json.fillColor;
+		v.opacity = json.opacity;
+		v.strokeWidth = json.strokeWidth;
+		v.strokeColor = json.strokeColor;
+		return v;
+	}
+
+	_doTranslate(dx, dy) {
+		this.x += dx;
+		this.y += dy;
+	}
+
+	_clone(parent) {
+		let v = new Vertex(new Point(this.x, this.y), parent, this._id);
+		if (this.dataScope) {
+			v.dataScope = this.dataScope.clone();
+		}
+		v.shape = this.shape;
+		v.width = this.width;
+		v.height = this.height;
+		v.radius = this.radius;
+		v.fillColor = this.fillColor;
+		v.opacity = this.opacity;
+		v.strokeWidth = this.strokeWidth;
+		v.strokeColor = this.strokeColor;
+		return v;
+	}
+
+	set polarAngle(a) {
+		this._polarAngle = a;
+	}
+
+	get polarAngle() {
+		return this._polarAngle;
+	}
+}
+
+Vertex.styles = ["vxShape", "vxWidth", "vxHeight", "vxRadius", "vxFillColor", "vxStrokeColor", "vxStrokeWidth", "vxOpacity"];

package/src-old/item/composite/Collection.js

@@ -0,0 +1,106 @@
+import Group from "./Group";
+import {atlas_rowId, DataType, ItemType} from "../../util/Constants";
+import {CanvasProvider, ItemCounter} from "../../util/ItemUtil";
+
+export default class Collection extends Group{
+
+	constructor() {
+		super();
+		this.type = ItemType.Collection;
+		this._id = this.type + ItemCounter[this.type]++;
+		this.classId = this.id;
+		this._childrenOrder = undefined;
+	}
+
+	get childrenOrder() {
+		if (!this._childrenOrder)
+			return {"field": "atlas_rowId", "direction": "asc"};
+		else
+			return this._childrenOrder;
+	}
+
+	set childrenOrder(o) {
+		if (!("field" in o) && !("direction" in o)) return;
+		let field = o.field;
+		if (!this.dataScope.dataTable.hasField(field)) {
+			console.warn("Cannot order collection children by an non-existent field", o.field);
+			return;
+		}
+		this._childrenOrder = o;
+		let f; 
+		if (field === atlas_rowId) {
+			f = (a, b) =>  parseInt(a.dataScope.getFieldValue(field).substring(1)) - parseInt(b.dataScope.getFieldValue(field).substring(1));
+		} else {
+			let type = this.children[0].dataScope.getFieldType(field);
+			switch (type) {
+				case DataType.Date:
+					break;
+				case DataType.Number:
+				case DataType.Integer:
+					f = (a, b) =>  a.dataScope.aggregateNumericalField(field) - b.dataScope.aggregateNumericalField(field);
+					break;
+				case DataType.String:
+					if (o.ranking)
+						f = (a, b) => o.ranking.indexOf(a.dataScope.getFieldValue(field)) - o.ranking.indexOf(b.dataScope.getFieldValue(field));
+					else
+						f = (a, b) =>  (a.dataScope.getFieldValue(field) < b.dataScope.getFieldValue(field) ? -1 : 1 );
+					break;
+			}
+		}
+		this.children.sort(f);
+		
+		if (o.direction == "desc")
+			this.children.reverse();
+		if (this.layout)
+			this.layout.run();
+	}
+
+	duplicate() {
+		let coll = this.getScene().collection();
+		for (let i = 0; i < this.children.length; i++) {
+			let c = this.children[i];
+			coll.addChild(c.duplicate());
+		}
+		coll.classId = this.classId;
+		this.parent.addChild(coll);
+		if (this._layout) {
+			let layout = this._layout.clone();
+			coll.layout = layout;
+		}
+		return coll;
+	}
+
+	contains(x, y) {
+		let irregular2Ds = [ItemType.Arc, ItemType.Pie, ItemType.Polygon, ItemType.Area];
+		if (irregular2Ds.indexOf(this.firstChild.type) >= 0) {
+			let svgData = this.getSVGPathData();
+			if (svgData !== "") {
+				let ctx = CanvasProvider.getContext(),
+						p = new Path2D(svgData);
+				ctx.lineWidth = Math.max(this.strokeWidth, 2.5);
+				ctx.stroke(p);
+				return ctx.isPointInPath(p, x, y);
+			} 
+		}
+		if (!this._bounds) {
+			this._updateBounds();
+		}
+		return this._bounds.contains(x, y);
+	}
+	
+	getSVGPathData() {
+		let d = "";
+		for (let i of this.children) {
+			if (i.getSVGPathData)
+				d += i.getSVGPathData();
+			else if (i.bounds) {
+				let b = i.bounds;
+				d += ["M", b.left, b.top].join(" ");
+				d += ["L", b.right, b.top].join(" ");
+				d += ["L", b.right, b.bottom].join(" ");
+				d += ["L", b.left, b.bottom, "Z"].join(" ");
+			}
+		}
+		return d;
+	}
+}

package/src-old/item/composite/Glyph.js

@@ -0,0 +1,19 @@
+import Group from "./Group";
+import {ItemType} from "../../util/Constants";
+import {ItemCounter} from "../../util/ItemUtil";
+
+export default class Glyph extends Group {
+	
+	constructor(args) {
+		super();
+		this.type = ItemType.Glyph;
+		this._id = this.type + ItemCounter[this.type]++;
+		if (args){
+			for (let a of args){
+				this.addChild(a);
+			}
+		}
+	}
+
+
+}