@alisaitteke/seatmap-canvas 2.0.0

package/src/lib/svg/stage/blocks/block-item/block-item.mask.ts

@@ -0,0 +1,67 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+import SvgBase from "../../../svg.base";
+import {dom} from "../../../../decorators/dom";
+import BlockModel from "../../../../models/block.model";
+import Block from "./block-item.index";
+import {BoundItem} from "./bound/bound-item.index";
+import {EventType} from "../../../../enums/global";
+
+@dom({
+    tag: "g",
+    class: "masks",
+    autoGenerate: false
+})
+export default class BlockMask extends SvgBase {
+
+    public blockLevelMask: BoundItem;
+    public seatLevelMask: BoundItem;
+
+    constructor(public parent: Block, public item: BlockModel) {
+        super(parent);
+
+        this.global.eventManager.addEventListener(EventType.BOUND_CLICK, (bound: BoundItem) => {
+            if(this.global.multi_select)return;
+            let _block = bound.parent.parent.item;
+            if (bound.hasTag("block-level")) {
+                parent.global.zoomManager.zoomToBlock(_block.id);
+            } else if (bound.hasTag("seat-level")) {
+                parent.global.zoomManager.zoomToSelection();
+            }
+        });
+
+
+        return this;
+    }
+
+    update(): this {
+
+        // add Border Bounds container
+        this.seatLevelMask = new BoundItem(this, this.item);
+        this.seatLevelMask.attr("fill", this.item.color);
+        this.seatLevelMask.attr("stroke-width", 59);
+        this.seatLevelMask.attr("stroke", this.item.color);
+        this.seatLevelMask.tags.push("seat-level");
+        this.seatLevelMask.classed("seat-level-mask");
+
+
+        // add Border Bounds container
+        this.blockLevelMask = new BoundItem(this, this.item);
+        this.blockLevelMask.attr("fill", this.item.color);
+        this.blockLevelMask.attr("stroke-width", 59);
+        this.blockLevelMask.attr("stroke", this.item.color);
+        this.blockLevelMask.tags.push("block-level");
+        this.blockLevelMask.classed("block-level-mask");
+
+        this.addChild(this.seatLevelMask);
+        this.addChild(this.blockLevelMask);
+
+
+        this.updateChilds();
+
+        return this;
+    }
+}

package/src/lib/svg/stage/blocks/block-item/block-item.seats.index.ts

@@ -0,0 +1,81 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+
+import SvgBase from "../../../svg.base";
+import {dom} from "../../../../decorators/dom";
+import Block from "./block-item.index";
+import SeatModel from "../../../../models/seat.model";
+import {SeatItem} from "./seat/seat-item.index";
+import BlockModel from "../../../../models/block.model";
+import {EventType, SeatAction} from "../../../../enums/global";
+
+
+@dom({
+    tag: "g",
+    class: "seats",
+    autoGenerate: false
+})
+export default class Seats extends SvgBase {
+
+    constructor(public parent: Block, public item: BlockModel) {
+        super(parent);
+
+        this.global.eventManager.addEventListener(EventType.MOUSEENTER_SEAT, (seat: SeatItem) => {
+            if (this.global.multi_select) return;
+            seat.setColor(seat.getColor(SeatAction.HOVER));
+            //this.global.zoomManager.zoomDisable();
+        });
+        this.global.eventManager.addEventListener(EventType.MOUSELEAVE_SEAT, (seat: SeatItem) => {
+            seat.setColor(seat.getColor());
+            //this.global.zoomManager.zoomEnable();
+        });
+
+        return this;
+    }
+
+    update(): this {
+        // add seat items in blockItem container
+        this.item.seats.forEach((seat: SeatModel) => {
+            this.addChild(new SeatItem(this, seat), {id: seat.id})
+        });
+        this.updateChilds();
+        return this;
+    }
+
+    // Getting seat method
+    // ex: seatmap.stage.blocks.getBlock(2).seats.getSeat("1-1")
+    public getSeat(id: any): SeatItem {
+        return this.child_items.find((seat: SeatItem) => seat.item.id == id);
+    }
+
+    // Getting seats method
+    // ex: seatmap.stage.blocks.getBlock(2).seats.getSeat("1-1")
+    public getSeats(): Array<SeatItem> {
+        return this.child_items;
+    }
+
+    public getSeatsCount(): number {
+        return this.child_items.length;
+    }
+
+    public getSeatByIndex(index: number): SeatItem {
+        return this.child_items[index];
+    }
+
+    public resetSeatsColors(animation: boolean = false) {
+        for (let i = 0; i < this.getSeatsCount(); i++) {
+            let _seat = this.getSeatByIndex(i);
+            let _item: SeatModel = _seat.item;
+
+            let color = _seat.getColor();
+
+            if (!_seat.isSelected() && _seat.isSalable()) {
+                color = _seat.getColor(SeatAction.LEAVE);
+                _seat.setColor(color, animation);
+            }
+        }
+    }
+}

package/src/lib/svg/stage/blocks/block-item/bound/bound-item.index.ts

@@ -0,0 +1,43 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+
+import SvgBase from "../../../../svg.base";
+import {dom} from "../../../../../decorators/dom";
+import BlockBounds from "../block-item.bounds";
+import BlockModel from "../../../../../models/block.model";
+import BlockMask from "../block-item.mask";
+
+
+@dom({
+    tag: "path",
+    class: "bound",
+    autoGenerate: false
+})
+export class BoundItem extends SvgBase {
+
+
+    constructor(public parent: BlockBounds|BlockMask, public item: BlockModel) {
+        super(parent);
+    }
+
+    show(){
+        this.node.classed("bound-hide",false);
+    }
+
+    hide(){
+        this.node.classed("bound-hide",true);
+    }
+
+    update(): this {
+        this.updateChilds();
+        this.node
+            .datum(this.item.bounds)
+            .attr("d", function (d: any) {
+                return "M" + d.join("L") + "Z";
+            });
+        return this;
+    }
+}

package/src/lib/svg/stage/blocks/block-item/info/title.ts

@@ -0,0 +1,30 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+
+import SvgBase from "../../../../svg.base";
+import {dom} from "../../../../../decorators/dom";
+import BlockInfo from "../block-item.info.index";
+
+
+@dom({
+    tag: "text",
+    class: "title",
+    autoGenerate: false
+})
+export class BlockTitle extends SvgBase {
+
+
+    constructor(public parent: BlockInfo) {
+        super(parent);
+        this.attr("fill",this.global.config.block_style.title_color);
+
+    }
+
+
+    update(): this {
+        return this;
+    }
+}

package/src/lib/svg/stage/blocks/block-item/label/label-item.circle.ts

@@ -0,0 +1,27 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+import SvgBase from "../../../../svg.base";
+import {dom} from "../../../../../decorators/dom";
+import {LabelItem} from "./label-item.index";
+
+@dom({
+    tag: "circle",
+    class: "label-circle",
+    autoGenerate: false
+})
+export class LabelItemCircle extends SvgBase {
+
+    constructor(public parent: LabelItem) {
+        super(parent);
+        this.attr("r", this.global.config.label_style.radius);
+        this.attr("fill", this.global.config.label_style.bg);
+        return this;
+    }
+
+    update(): this {
+        return this;
+    }
+}

package/src/lib/svg/stage/blocks/block-item/label/label-item.index.ts

@@ -0,0 +1,46 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+
+import SvgBase from "../../../../svg.base";
+import {dom} from "../../../../../decorators/dom";
+import {LabelItemCircle} from "./label-item.circle";
+import {CoordinateModel} from "../../../../../models/coordinate.model";
+import Labels from "../block-item.labels.index";
+import LabelModel from "../../../../../models/label.model";
+import {LabelItemTitle} from "./label-item.title";
+
+
+@dom({
+    tag: "g",
+    class: "label",
+    autoGenerate: false
+})
+export class LabelItem extends SvgBase {
+
+    public circle: LabelItemCircle;
+    public coordinates: CoordinateModel;
+
+    constructor(public parent: Labels, public item: LabelModel) {
+        super(parent);
+        this.coordinates = new CoordinateModel(item);
+        this.attr("transform", "translate(" + this.coordinates.toArray() + ")");
+        return this;
+    }
+
+
+    update(): this {
+        this.circle = new LabelItemCircle(this);
+        this.addChild(this.circle);
+
+        this.circle = new LabelItemTitle(this);
+        this.addChild(this.circle);
+
+        this.updateChilds();
+
+        this.circle.node.text(this.item.title);
+        return this;
+    }
+}

package/src/lib/svg/stage/blocks/block-item/label/label-item.title.ts

@@ -0,0 +1,27 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+import SvgBase from "../../../../svg.base";
+import {dom} from "../../../../../decorators/dom";
+import {LabelItem} from "./label-item.index";
+
+@dom({
+    tag: "text",
+    class: "label-text",
+    autoGenerate: false
+})
+export class LabelItemTitle extends SvgBase {
+
+    constructor(public parent: LabelItem) {
+        super(parent);
+        this.attr("fill", this.global.config.label_style.color);
+        this.attr("font-size", this.global.config.label_style.font_size);
+        return this;
+    }
+
+    update(): this {
+        return this;
+    }
+}

package/src/lib/svg/stage/blocks/block-item/seat/seat-item.check.ts

@@ -0,0 +1,45 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+import SvgBase from "../../../../svg.base";
+import {dom} from "../../../../../decorators/dom";
+import {SeatItem} from "./seat-item.index";
+
+@dom({
+    tag: "path",
+    class: "seat-check",
+    autoGenerate: false
+})
+export class SeatItemCheck extends SvgBase {
+
+    constructor(public parent: SeatItem) {
+        super(parent);
+        this.attr("d", "M12.9,953.7l-6.3,6.5l-2.9-2.5l-2.1,2.4l4.1,3.5l1.1,1l1.1-1.1l7.3-7.6L12.9,953.7L12.9,953.7z");
+        this.attr("fill", this.global.config.seat_style.check_color);
+        this.attr("transform", "translate(-8,-959.36218)");
+        this.attr("pointer-events", "none");
+        this.attr("display", "none");
+
+        return this;
+    }
+
+    update(): this {
+        return this;
+    }
+
+    afterGenerate() {
+        this.node.style("pointer-events", "none");
+    }
+
+    show():this {
+        this.node.attr("display", "block");
+        return this;
+    }
+
+    hide():this {
+        this.node.attr("display", "none");
+        return this;
+    }
+}

package/src/lib/svg/stage/blocks/block-item/seat/seat-item.circle.ts

@@ -0,0 +1,30 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+import SvgBase from "../../../../svg.base";
+import {dom} from "../../../../../decorators/dom";
+import {SeatItem} from "./seat-item.index";
+
+@dom({
+    tag: "circle",
+    class: "seat-circle",
+    autoGenerate: false
+})
+export class SeatItemCircle extends SvgBase {
+
+    constructor(public parent: SeatItem) {
+        super(parent);
+        this.attr("block-id", parent.item.block.id);
+        this.attr("r", this.global.config.seat_style.radius);
+        this.attr("fill", this.global.config.seat_style.color);
+        this.attr("stroke", "rgba(0,0,0,0.3)");
+        this.attr("stroke-width", 1);
+        return this;
+    }
+
+    update(): this {
+        return this;
+    }
+}

package/src/lib/svg/stage/blocks/block-item/seat/seat-item.index.ts

@@ -0,0 +1,159 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+
+import SvgBase from "../../../../svg.base";
+import {dom} from "../../../../../decorators/dom";
+import SeatModel from "../../../../../models/seat.model";
+import Seats from "../block-item.seats.index";
+import {SeatItemCircle} from "./seat-item.circle";
+import {CoordinateModel} from "../../../../../models/coordinate.model";
+import {SeatItemTitle} from "./seat-item.title";
+import {SeatAction} from "../../../../../enums/global";
+import {SeatItemCheck} from "./seat-item.check";
+
+
+@dom({
+    tag: "g",
+    class: "seat",
+    autoGenerate: false
+})
+export class SeatItem extends SvgBase {
+
+    public circle: SeatItemCircle;
+    public title: SeatItemTitle;
+    public coordinates: CoordinateModel;
+    public check: SeatItemCheck;
+
+    constructor(public parent: Seats, public item: SeatModel) {
+        super(parent);
+        this.coordinates = new CoordinateModel(item);
+        this.attr("transform", "translate(" + this.coordinates.toArray() + ")");
+        this.item.svg = this;
+        return this;
+    }
+
+    public setColor(color: string, animation: boolean = false): this {
+        if (animation) {
+            this.circle.node.transition().duration(this.global.config.animation_speed).attr("fill", color);
+        } else {
+            this.circle.node.attr("fill", color);
+        }
+
+        return this;
+    }
+
+    public updateColor(color: string = null): this {
+        this.setColor(this.getColor());
+        return this;
+    }
+
+    public select(color: string = null): this {
+        this.item.selected = true;
+        this.node.classed("selected", true);
+        this.circle.node.attr("fill", this.global.config.seat_style.selected);
+        this.check.show();
+        return this;
+    }
+
+    public unSelect(): this {
+        this.item.selected = false;
+        this.node.classed("selected", false);
+        this.circle.node.attr("fill", this.global.config.seat_style.color);
+        this.check.hide();
+        return this;
+    }
+
+    public isSelected(): Boolean {
+        return this.item.selected;
+    }
+
+    public isSalable(): Boolean {
+        return this.item.salable;
+    }
+
+    public hover() {
+        this.setColor(this.global.config.seat_style.hover);
+    }
+
+    public blur() {
+        this.setColor(this.getColor());
+    }
+
+    public getColor(action: SeatAction = null): string {
+
+        if (this.isSalable()) {
+
+            if (action == SeatAction.FOCUS) {
+                if (this.isSelected()) {
+                    return this.global.config.seat_style.focus_out;
+                } else {
+                    return this.global.config.seat_style.focus;
+                }
+
+            } else if (action == SeatAction.HOVER) {
+                if (this.isSelected()) {
+                    return this.global.config.seat_style.selected;
+                } else {
+                    return this.global.config.seat_style.hover;
+                }
+            }
+            else if (action == SeatAction.LEAVE) {
+                if (this.isSelected()) {
+                    return this.global.config.seat_style.selected;
+                } else {
+                    return this.global.config.seat_style.color;
+                }
+            }
+            else if (action == SeatAction.SELECT) {
+                if (this.isSelected()) {
+                    return this.global.config.seat_style.selected;
+                } else {
+                    return this.global.config.seat_style.selected;
+                }
+            } else {
+                if (this.isSelected()) {
+                    return this.global.config.seat_style.selected;
+                } else {
+                    return this.global.config.seat_style.color;
+                }
+            }
+
+        } else {
+            return this.global.config.seat_style.not_salable;
+        }
+
+    }
+
+    update(): this {
+        this.circle = new SeatItemCircle(this);
+        this.addChild(this.circle);
+
+
+        this.check = new SeatItemCheck(this).addTo(this);
+
+
+
+        // this.title = new SeatItemTitle(this);
+        // this.addChild(this.title);
+
+
+        this.updateChilds();
+
+        //this.title.node.text(this.item.title);
+
+        return this;
+    }
+
+    afterGenerate(){
+        this.setColor(this.getColor());
+        if(this.item.selected){
+            this.check.show()
+        }else{
+            this.check.hide()
+        }
+
+    }
+}

package/src/lib/svg/stage/blocks/block-item/seat/seat-item.title.ts

@@ -0,0 +1,27 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+import SvgBase from "../../../../svg.base";
+import {dom} from "../../../../../decorators/dom";
+import {SeatItem} from "./seat-item.index";
+
+@dom({
+    tag: "text",
+    class: "label-text",
+    autoGenerate: false
+})
+export class SeatItemTitle extends SvgBase {
+
+    constructor(public parent: SeatItem) {
+        super(parent);
+        this.attr("fill", this.global.config.label_style.color);
+        this.attr("font-size", 10);
+        return this;
+    }
+
+    update(): this {
+        return this;
+    }
+}

package/src/lib/svg/stage/blocks/blocks.index.ts

@@ -0,0 +1,68 @@
+/*
+ * blocks.ts
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+import {polygonHull} from 'd3-polygon'
+
+import StageManager from "../stage.index";
+import Block from "./block-item/block-item.index";
+import SvgBase from "../../svg.base";
+import {dom} from "../../../decorators/dom";
+import SeatModel from "../../../models/seat.model";
+import {SeatItem} from "./block-item/seat/seat-item.index";
+import BlockModel from "../../../models/block.model";
+import LabelModel from "../../../models/label.model";
+
+@dom({
+    tag: "g",
+    class: "blocks",
+    autoGenerate: false
+})
+export default class Blocks extends SvgBase {
+
+    public seats: Array<SeatItem>;
+
+
+    constructor(public parent: StageManager) {
+        super(parent);
+        return this;
+    }
+
+    public update(): this {
+        this.clear();
+        this.global.data.getBlocks().map((block_item: BlockModel) => {
+            let _blockItem = new Block(this, block_item);
+            let _seats = block_item.seats;
+
+
+            // algorithm problem fixed
+            if (_seats && _seats.length) {
+                _seats[0].y += 0.0001;
+                _seats[0].x += 0.0001;
+            }
+
+            let bound_items: Array<any> = _seats.map((item: SeatModel) => [item.x, item.y]).concat(block_item.labels.map((item: LabelModel) => [item.x, item.y]));
+            let _bounds = polygonHull(bound_items);
+            block_item.bounds = _bounds;
+
+            this.addChild(_blockItem);
+        });
+        this.updateChilds();
+        this.seats = this.node.selectAll(".seat");
+
+        return this;
+    }
+
+    public getBlock(id: any): Block {
+        return this.getBlocks().find((block: Block) => block.item.id == id);
+    }
+
+    public getBlocks(): Array<Block> {
+        return this.getChilds(Block.name);
+    }
+
+    public center() {
+
+    }
+}