mascot-vis 2.0.0 → 3.0.0

package/src-old/item/refs/Axis.js

@@ -0,0 +1,362 @@
+import Group from "../composite/Group";
+import { ItemCounter } from "../../util/ItemUtil";
+import { ItemType } from "../../util/Constants";
+import PointText from "../mark/PointText";
+
+export default class Axis extends Group{
+
+    constructor(args){
+        super();
+        this.type = ItemType.Axis;
+        this.id = this.type + ItemCounter[this.type]++;
+
+        this._strokeColor = "strokeColor" in args ? args["strokeColor"] : "#555";
+        this._textColor = "textColor" in args ? args.textColor : "#555";
+        this._fontSize = "fontSize" in args? args.fontSize: "12px";
+
+        this._tickOffset = "tickOffset" in args ? args["tickOffset"] : 0;
+        this._tickSize = "tickSize" in args ? args["tickSize"] : 5;
+        this._tickAnchor = args.tickAnchor ? args.tickAnchor : "middle";
+
+        this._tickVisible = "tickVisible" in args ? args["tickVisible"] : true; // &&  !args["tickVisible"] ? "hidden" : "visible";
+        this._pathVisible = "pathVisible" in args ? args["pathVisible"] : true; // && !args["pathVisible"] ? "hidden" : "visible";
+
+        this._labelOffset = "labelOffset" in args ? args["labelOffset"] : 15;
+        this._labelFormat = "labelFormat" in args ? args["labelFormat"] : "";
+
+        this._titleOffset = "titleOffset" in args ? args["titleOffset"] : 40;
+        if ("titleAnchor" in args) {
+            this._titleAnchor = args.titleAnchor;
+        } else {
+            if (this.channel == "x" || this.channel == "width"){
+                this._titleAnchor = this._orientation == "top" ? ["center", "bottom"] : ["center", "top"];
+            } else {
+                this._titleAnchor = this._orientation == "left" ? ["right", "middle"] : ["left", "middle"];
+            }
+        }
+        this._rotateYTitle = "rotateTitle" in args && !args.rotateTitle ? false : true;
+        this._titlePosition = args.titlePosition;
+
+        if ("labelRotation" in args)
+            this._labelRotation = args.labelRotation;
+        else
+            this._labelRotation = 0;
+
+        //flip is useful when items are top aligned for example, and the axis needs to start from the top
+        //this is different from invert scale, and this is computed when positioning, not specified by users
+        //this._flip = "flip" in args ? args["flip"] : false;
+    }
+
+    toJSON() {
+        //let json = {args: {}};
+        let json = super.toJSON();
+		json.type = this.type;
+		json.id = this.id;
+        json.field = this._field;
+        json.channel = this._channel;
+        if (!("args" in json))
+            json.args = {};
+        json.args.orientation = this._orientation;
+        json.args.strokeColor = this._strokeColor;
+        json.args.textColor = this._textColor;
+        json.args.tickOffset = this._tickOffset;
+        json.args.tickSize = this._tickSize;
+        json.args.tickAnchor = this._tickAnchor;
+        json.args.tickVisible = this._tickVisible;
+        json.args.pathVisible = this._pathVisible;
+        json.args.labelOffset = this._labelOffset;
+        json.args.labelFormat = this._labelFormat;
+        if (this._labelRotation)
+            json.args.labelRotation = this._labelRotation;
+        json.args.showTitle = this._showTitle;
+        json.args.tickValues = this._tickValues;
+        json.args.titleAnchor = this._titleAnchor;
+        json.args.titleOffset = this._titleOffset;
+        json.args.titlePosition = this._titlePosition;
+        json.args.rotateTitle = this._rotateYTitle;
+        return json;
+    }
+
+    get field(){
+        return this._field;
+    }
+
+    get channel(){
+        return this._channel;
+    }
+
+    get orientation(){
+        return this._orientation;
+    }
+
+    set orientation(o){
+        this._orientation = o;
+        this.reposition();
+    }
+
+    get pathX(){
+        if (this.channel == "y" || this.channel == "height") {
+            if (this._position !== undefined)
+                return this._position;
+            if (this._path) { // encoding axis
+                return this._path.vertices[0].x;
+            } else if (this._rules && this._rules.firstChild) {
+                return this._rules.firstChild.vertices[0].x;
+            }
+        } 
+        return undefined;
+    }
+
+    set pathX(v){
+        if (this.channel == "y" || this.channel == "height")
+            this._posArg = v;
+        this.reposition();
+    }
+
+    get pathPosition() {
+        if (this.channel == "x" || this.channel == "width") {
+            return this.pathY;
+        } else
+            return this.pathX;
+    }
+
+    set pathPosition(v) {
+        if (this.channel == "x" || this.channel == "width") {
+            this.pathY = v;
+        } else if (this.channel == "y" || this.channel == "height") {
+            this.pathX = v;
+        }
+    }
+
+    get pathY(){
+        if (this.channel == "x" || this.channel == "width") {
+            if (this._position !== undefined)
+                return this._position;
+            if (this._path) {
+                return this._path.vertices[0].y;
+            } else if (this._rules && this._rules.firstChild) {
+                return this._rules.firstChild.vertices[0].y;
+            }
+        }
+        return undefined;
+    }
+
+    set pathY(v){
+        if (this.channel == "x" || this.channel == "width")
+            this._posArg = v;
+        this.reposition();
+    }
+
+    get tickOffset(){
+        return this._tickOffset;
+    }
+
+    set tickOffset(o){
+        this._tickOffset = o;
+        this._positionTicks();
+    }
+
+    get titleOffset(){
+        return this._titleOffset;
+    }
+
+    set titleOffset(o){
+        this._titleOffset = o;
+    }
+
+    get tickSize(){
+        return this._tickSize;
+    }
+
+    set tickSize(o){
+        this._tickSize = o;
+        this._positionTicks();
+    }
+
+    set tickValues(values){
+        this._tickValues = values;
+        this._generateTicks();
+        this._positionTicks();
+    }
+
+    get tickValues() {
+        return this._tickValues;
+    }
+
+    set labelValues(values){
+        this._labelValues = values;
+        this._generateLabels();
+        this._positionLabels();
+    }
+
+    get labelValues(){
+        return this._labelValues;
+    }
+
+    get tickAnchor(){
+        return this._tickAnchor;
+    }
+
+    set tickAnchor(o){
+        this._tickAnchor = o;
+    }
+
+    get tickVisible(){
+        return this._tickVisible;
+    }
+
+    set tickVisible(o){
+        this._tickVisible = o;
+        for (let l of this._ticks.children)
+            l.visibility = o ? "visible" : "hidden";
+    }
+
+    get pathVisible(){
+        return this._pathVisible;
+    }
+
+    set pathVisible(o){
+        this._pathVisible = o;
+        let p = [];
+        if (this._path)
+            p.push(this._path);
+        if (this._rules)
+            this._rules.children.forEach(c => p.push(c));
+        for (let l of p)
+            l.visibility = o ? "visible" : "hidden";
+    }
+
+    get labelOffset(){
+        return this._labelOffset;
+    }
+
+    set labelOffset(o){
+        this._labelOffset = o;
+        this._positionLabels();
+    }
+
+    get labelFormat(){
+        return this._labelFormat;
+    }
+
+    set labelFormat(o){
+        this._labelFormat = o;
+        this._generateLabels();
+        this._positionLabels();
+    }
+
+    get labelRotation(){
+        return this._labelRotation;
+    }
+
+    set labelRotation(o){
+        this._labelRotation = o;
+        if (this._labels && this._labels.children) {
+            let anchor = this._orientation == "bottom" ? ["center", "top"] : ["center", "bottom"];
+            if (o) {
+                for (let l of this._labels.children) {
+                    l._rotate = [this._labelRotation, l.x, l.y];
+                    l.anchor = ["right", anchor[1]];
+                }
+            } else {
+                for (let l of this._labels.children) {
+                    l._rotate = undefined;
+                }
+            }
+        }
+    }
+
+    get showTitle(){
+        return this._showTitle;
+    }
+
+    set showTitle(s){
+        this._showTitle = s;
+        if (!this._title) {
+            this._generateTitle();
+            this._positionTitle();
+        }
+        this._title.visibility = s ? "visible" : "hidden";
+    }
+
+    get titleAnchor(){
+        return this._titleAnchor;
+    }
+
+    set titleAnchor(a){
+        this._titleAnchor = a;
+    }
+
+    get titlePosition(){
+        return this._titlePosition;
+    }
+
+    set titlePosition(a){
+        this._titlePosition = a;
+    }
+
+    get rotateTitle(){
+        return this._rotateYTitle;
+    }
+
+    set rotateTitle(r){
+        this._rotateYTitle = r;
+    }
+
+    get title(){
+        return this._titleText;
+    }
+
+    set title(t){
+        this._titleText = t;
+    }
+
+    get includeZero() {
+        if (this.encoding)
+            return this.encoding.scale.includeZero;
+        else
+            return false;
+    }
+
+    set includeZero(b) {
+        if (this.encoding)
+            this.encoding.scale.includeZero = b;
+    }
+
+    _generatePath(){}
+
+    _generateTicks(){}
+
+    _generateLabels(){}
+
+    _generateTitle(){
+        this._title = new PointText({"text": this._titleText, fillColor: this._textColor, fontWeight: "bold"});
+        this._title.id = this.id + "-title";
+        this.addChild(this._title);
+    }
+
+    _positionPath(){}
+
+    _positionTicks(){}
+
+    _positionLabels(){}
+
+    _positionTitle(){}
+
+    // eslint-disable-next-line no-unused-vars
+    matches(item) {}
+
+    reposition() {
+        if (this.encoding)
+            this._determineAxisFlip();
+        this._positionPath();
+        this._positionTicks();
+        this._positionLabels();
+        if (this._showTitle)
+            this._positionTitle();
+        if (this._channel === "radialDistance" && this._rotate){
+            this._rotate = [this._rotate[0], this._item.parent.x, this._item.parent.y];
+        }
+        this._updateBounds();
+    }
+}