@alisaitteke/seatmap-canvas 2.0.0

package/src/lib/models/seat.model.ts

@@ -0,0 +1,182 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+
+import BlockModel from "./block.model";
+import ModelBase from "./model.base";
+import {SeatItem} from "../svg/stage/blocks/block-item/seat/seat-item.index";
+
+export default class SeatModel extends ModelBase {
+    private _id: any;
+    private _x: number;
+    private _y: number;
+    private _title?: string;
+    private _selected: boolean;
+
+    private _color: string;
+    private _block: BlockModel;
+    private _salable: boolean;
+    private _note: string;
+
+    private _tags: Array<string>;
+    private _tag_index: any = {};
+
+    private _custom_data: any;
+
+    private _svg: SeatItem;
+
+    // public item_type: string = "Seat";
+
+
+    constructor(item: any) {
+        super();
+        this.id = item.id;
+        this.x = item.x;
+        this.y = item.y;
+        this.title = item.title || null;
+        this.color = item.color || null;
+        this.block = item.block;
+        this.note = item.note || null;
+        this.salable = item.salable === false ? item.salable : true;
+        this.selected = item.selected || false;
+        this.tags = item.tags || [];
+        this.custom_data = item.custom_data || {};
+        this._tag_index = {};
+    }
+
+    public selectedToggle(): boolean {
+        this.selected = this.selected !== true;
+        return this.selected;
+    }
+
+    get x(): number {
+        return this._x;
+    }
+
+    set x(value: number) {
+        this._x = value;
+    }
+
+    get y(): number {
+        return this._y;
+    }
+
+    set y(value: number) {
+        this._y = value;
+    }
+
+    get title(): string {
+        return this._title;
+    }
+
+    set title(value: string) {
+        this._title = value;
+    }
+
+    get selected(): boolean {
+        return this._selected;
+    }
+
+    set selected(value: boolean) {
+        this._selected = value;
+    }
+
+    get color(): string {
+        return this._color;
+    }
+
+    set color(value: string) {
+        this._color = value;
+    }
+
+    get block(): BlockModel {
+        return this._block;
+    }
+
+    set block(value: BlockModel) {
+        this._block = value;
+    }
+
+    get salable(): boolean {
+        return this._salable;
+    }
+
+    set salable(value: boolean) {
+        this._salable = value;
+    }
+
+    get note(): string {
+        return this._note;
+    }
+
+    set note(value: string) {
+        this._note = value;
+    }
+
+    get id(): any {
+        return this._id;
+    }
+
+    set id(value: any) {
+        this._id = value;
+    }
+
+
+    get tags(): Array<string> {
+        return this._tags;
+    }
+
+    set tags(value: Array<string>) {
+        this._tags = value;
+    }
+
+    get svg(): SeatItem {
+        return this._svg;
+    }
+
+    set svg(value: SeatItem) {
+        this._svg = value;
+    }
+
+    public addTag(tag: string) {
+        if (!this._tag_index[tag]) {
+            this._tag_index[tag] = true;
+            this.tags.push(tag);
+        }
+    }
+
+    public removeTags(tag: string) {
+
+    }
+
+    get tag_index(): any {
+        return this._tag_index;
+    }
+
+    set tag_index(value: any) {
+        this._tag_index = value;
+    }
+
+
+    get custom_data(): any {
+        return this._custom_data;
+    }
+
+    set custom_data(value: any) {
+        this._custom_data = value;
+    }
+
+    public toJson() {
+        return {
+            id: this.id,
+            x: this.x,
+            y: this.y,
+            salable: this.salable,
+            note: this.note,
+            color: this.color,
+            block: this.block.toJson()
+        }
+    }
+}

package/src/lib/svg/event.manager.ts

@@ -0,0 +1,56 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+import {SeatMapCanvas} from "../canvas.index";
+import {isArray} from "rxjs/internal/util/isArray";
+
+
+export interface EventObject {
+    type: string,
+    fn: any
+}
+
+export default class EventManager {
+    private _events: Array<EventObject>;
+
+
+    constructor(private _self: SeatMapCanvas) {
+        this._events = [];
+    }
+
+    addEventListener(type: string | any, fn: any): this {
+        if (isArray(type)) {
+            for (let i = 0; i < type.length; i++) {
+                this._events.push({
+                    type: type[i],
+                    fn: fn
+                });
+            }
+        } else {
+            this._events.push({
+                type: type,
+                fn: fn
+            });
+        }
+
+        return this;
+    }
+
+    dispatch(type: string, data: any): this {
+        this._events
+            .filter((event: EventObject) => event.type === type)
+            .map((event: EventObject) => event.fn(data));
+        return this;
+    }
+
+
+    get events(): Array<EventObject> {
+        return this._events;
+    }
+
+    set events(value: Array<EventObject>) {
+        this._events = value;
+    }
+}

package/src/lib/svg/legend/legend.circle.ts

@@ -0,0 +1,28 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+
+import {dom} from "../../decorators";
+import SvgBase from "./../svg.base";
+import LegendItem from "./legend.item";
+
+@dom({
+    tag: "circle",
+    class: "legend-circle",
+    autoGenerate: false
+})
+export default class LegendCircle extends SvgBase {
+
+
+    constructor(public parent: LegendItem) {
+        super(parent);
+        this.attr("r", this.global.config.legend_style.radius);
+        this.attr("fill", this.parent.legend_data.color);
+    }
+
+    update() {
+
+    }
+}

package/src/lib/svg/legend/legend.item.ts

@@ -0,0 +1,50 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+
+import {dom} from "../../decorators";
+import SvgBase from "./../svg.base";
+import Legend from "../legend";
+import LegendCircle from "./legend.circle";
+import LegendTitle from "./legend.title";
+import LegendModel from "../../models/legend.model";
+
+@dom({
+    tag: "g",
+    class: "legend-item",
+    autoGenerate: false
+})
+export default class LegendItem extends SvgBase {
+
+    public circle: LegendCircle;
+    public title: LegendTitle;
+
+    constructor(public parent: Legend, public legend_data: LegendModel) {
+        super(parent);
+
+    }
+
+    update() {
+
+        this.circle = new LegendCircle(this);
+        this.addChild(this.circle);
+
+        this.title = new LegendTitle(this);
+        this.addChild(this.title);
+
+        this.updateChilds();
+
+        this.title.node.text(this.legend_data.title);
+
+        let x = 0;
+        let y = this.child_index * this.global.config.legend_style.padding;
+
+        this.node.attr("transform", "translate(" + [x, y] + ")")
+
+
+    }
+
+
+}

package/src/lib/svg/legend/legend.title.ts

@@ -0,0 +1,27 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+
+import {dom} from "../../decorators";
+import SvgBase from "./../svg.base";
+import LegendItem from "./legend.item";
+
+@dom({
+    tag: "text",
+    class: "legend-title",
+    autoGenerate: false
+})
+export default class LegendTitle extends SvgBase {
+
+
+    constructor(public parent: LegendItem) {
+        super(parent);
+        this.attr("x", this.global.config.legend_style.radius * 1.5);
+    }
+
+    update() {
+
+    }
+}

package/src/lib/svg/legend.ts

@@ -0,0 +1,55 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+
+import {dom} from "../decorators";
+import SvgBase from "./svg.base";
+import Svg from "./svg.index";
+import LegendItem from "./legend/legend.item";
+
+@dom({
+    tag: "g",
+    class: "legend",
+    autoGenerate: false
+})
+export default class Legend extends SvgBase {
+
+
+    constructor(public parent: Svg) {
+        super(parent);
+    }
+
+    update() {
+
+        let legend_data: Array<any> = [];
+
+        legend_data.push({
+            title: this.global.config.lang.non_selectable,
+            color: this.global.config.seat_style.not_salable
+        });
+        legend_data.push({
+            title: this.global.config.lang.selectable,
+            color: this.global.config.seat_style.color
+        });
+        legend_data.push({
+            title: this.global.config.lang.your_selection,
+            color: this.global.config.seat_style.selected
+        });
+
+        for (let i = 0; i < legend_data.length; i++) {
+            let legend: LegendItem = new LegendItem(this, legend_data[i]);
+            this.addChild(legend);
+        }
+
+        this.updateChilds()
+    }
+
+    afterGenerate() {
+
+        let x = this.global.config.legend_style.radius * 2;
+        let y = 150 - (this.global.config.legend_style.padding * this.getChildCount());
+        this.node.attr("transform", "translate(" + [x, y] + ")");
+    }
+}

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

@@ -0,0 +1,51 @@
+/*
+ * $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";
+
+@dom({
+    tag: "g",
+    class: "bounds",
+    autoGenerate: false
+})
+export default class BlockBounds extends SvgBase {
+
+    public bound1: BoundItem;
+    public bound2: BoundItem;
+
+    constructor(public parent: Block, public item: BlockModel) {
+        super(parent);
+        return this;
+    }
+
+    update(): this {
+
+        // add Border Bounds container
+        this.bound1 = new BoundItem(this, this.item);
+        this.bound1.attr("fill", this.parent.item.border_color);
+        this.bound1.attr("stroke-width", 70);
+        this.bound1.attr("stroke", this.parent.item.border_color);
+        this.bound1.classed("block-hull-border");
+
+        // add Border Bounds container
+        this.bound2 = new BoundItem(this, this.item);
+        this.bound2.attr("fill", this.item.color);
+        this.bound2.attr("stroke-width", 60);
+        this.bound2.attr("stroke", this.item.color);
+        this.bound2.classed("block-hull");
+
+
+        this.addChild(this.bound1);
+        this.addChild(this.bound2);
+
+        this.updateChilds();
+
+        return this;
+    }
+}

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

@@ -0,0 +1,173 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+import {mouse as d3Mouse} from 'd3-selection'
+
+import BlocksManager from "../blocks.index";
+import SvgBase from "../../../svg.base";
+import {dom} from "../../../../decorators/dom";
+import BlockModel from "../../../../models/block.model";
+import Seats from "./block-item.seats.index";
+import BlockInfo from "./block-item.info.index";
+import BlockBounds from "./block-item.bounds";
+import {EventType, SeatAction, ZoomLevel} from "../../../../enums/global";
+import BlockMask from "./block-item.mask";
+import Labels from "./block-item.labels.index";
+import SeatModel from "../../../../models/seat.model";
+
+
+@dom({
+    tag: "g",
+    class: "block",
+    autoGenerate: false
+})
+export default class Block extends SvgBase {
+
+
+    public seats: Seats;
+    public labels: Labels;
+    public info: BlockInfo;
+    public mask: BlockMask;
+    public bounds: BlockBounds;
+
+    public center_position: any = {
+        x: null,
+        y: null
+    };
+    public top_position: any = {
+        x: null,
+        y: null
+    };
+
+    constructor(public parent: BlocksManager, public item: BlockModel) {
+        super(parent);
+        this.attr("id", item.id);
+        this.attr("opacity", 0);
+        this.global.eventManager.addEventListener(EventType.ZOOM_LEVEL_CHANGE, (levelObject: any) => {
+            if (levelObject.level === ZoomLevel.VENUE) {
+                this.mask.blockLevelMask.show();
+                this.mask.seatLevelMask.show();
+                this.seats.resetSeatsColors(false);
+                this.infosToCenter();
+            } else if (levelObject.level === ZoomLevel.BLOCK) {
+                this.mask.blockLevelMask.hide();
+                this.mask.seatLevelMask.show();
+                this.infosToTop();
+            } else if (levelObject.level === ZoomLevel.SEAT) {
+                this.mask.blockLevelMask.hide();
+                this.mask.seatLevelMask.hide();
+                this.seats.resetSeatsColors(false);
+                this.infosToTop();
+            }
+        });
+
+        this.global.eventManager.addEventListener(EventType.MULTI_SELECT_ENABLE,()=>{
+            this.seats.resetSeatsColors(false);
+        });
+        this.global.eventManager.addEventListener(EventType.MULTI_SELECT_DISABLE,()=>{
+            this.seats.resetSeatsColors(false);
+        });
+
+
+        // grid search
+        this.global.eventManager.addEventListener(EventType.MOUSEMOVE_BLOCK, (block_item: Block) => {
+
+            if (!this.parent.parent.searchCircle.is_enable) return;
+            if (this.global.multi_select) return;
+            let cor = d3Mouse(this.parent.parent.blocks.node.node());
+            let gap = this.global.config.zoom_focus_circle_radius;
+
+            if (this.global.zoomManager.zoomLevel === ZoomLevel.BLOCK) {
+                for (let i = 0; i < block_item.seats.getSeatsCount(); i++) {
+                    let _seat = block_item.seats.getSeatByIndex(i);
+                    let _item: SeatModel = _seat.item;
+
+
+                    let color = _seat.getColor();
+                    if (_seat.isSelected()) {
+                        color = _seat.getColor(SeatAction.SELECT);
+                    } else {
+                        if ((_item.x - gap < cor[0] && _item.x + gap > cor[0]) && (_item.y - gap < cor[1] && _item.y + gap > cor[1])) {
+                            color = _seat.getColor(SeatAction.FOCUS);
+                        }
+                        _seat.setColor(color);
+                    }
+
+
+                }
+            }
+        });
+
+        // grid search
+        // this.global.eventManager.addEventListener(EventType.TOUCHSTART_BLOCK, (block_item: Block) => {
+        //     console.log(block_item);
+        // });
+
+        this.parent.node.on("mouseleave.seats", () => {
+            this.seats.resetSeatsColors(false);
+        });
+
+        return this;
+    }
+
+
+    public update() {
+
+        // add Block Bounds container
+        this.bounds = new BlockBounds(this, this.item);
+        this.addChild(this.bounds);
+
+
+        // add Seat container
+        this.seats = new Seats(this, this.item);
+        this.addChild(this.seats);
+
+
+        // add Labels container
+        this.labels = new Labels(this, this.item);
+        this.addChild(this.labels);
+
+
+        // add Block Info container
+        this.mask = new BlockMask(this, this.item);
+        this.addChild(this.mask);
+
+
+        this.info = new BlockInfo(this, this.item);
+        this.addChild(this.info);
+
+
+        this.center_position.x = ((this.item.bounds[1][0] - this.item.bounds[2][0]) / 2) + this.item.bounds[2][0];
+        this.center_position.y = ((this.item.bounds[0][1] - this.item.bounds[1][1]) / 2) + this.item.bounds[1][1];
+
+        this.top_position.x = this.center_position.x;
+        this.top_position.y = (this.item.bounds[1][1] - 50);
+
+
+        // update childs
+        this.updateChilds();
+
+
+        this.infosToCenter();
+
+        this.node.interrupt().transition().duration(this.global.config.animation_speed).attr("opacity", 1);
+
+
+        return this;
+    }
+
+    public infosToTop() {
+        if (this.info.node && this.top_position.x)
+            this.info.node.interrupt().transition().duration(this.global.config.animation_speed).attr("transform", "translate(" + this.top_position.x + "," + this.top_position.y + ")").attr("opacity", 1).attr("font-size", 14).attr("fill", "#ffffff");
+    }
+
+    public infosToCenter() {
+        if (this.info.node && this.center_position.x)
+            this.info.node.interrupt().transition().duration(this.global.config.animation_speed).attr("transform", "translate(" + this.center_position.x + "," + this.center_position.y + ")").attr("opacity", 1).attr("font-size", 28).attr("fill", "#ffffff");
+
+    }
+
+
+}

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

@@ -0,0 +1,38 @@
+/*
+ * $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 {BlockTitle} from "./info/title";
+
+@dom({
+    tag: "g",
+    class: "info",
+    autoGenerate: false
+})
+export default class BlockInfo extends SvgBase {
+
+    public title: BlockTitle;
+
+
+    constructor(public parent: Block, public item: BlockModel) {
+        super(parent);
+        this.attr("opacity", 0);
+        let x = ((this.item.bounds[1][0] - this.item.bounds[2][0]) / 2) + this.item.bounds[2][0];
+        let y = ((this.item.bounds[0][1] - this.item.bounds[1][1]) / 2) + this.item.bounds[1][1];
+        this.attr("transform", "translate(" + [x, y] + ")");
+        return this;
+    }
+
+    update(): this {
+        this.title = new BlockTitle(this);
+        this.addChild(this.title);
+        this.updateChilds();
+        this.title.node.text(this.parent.item.title);
+        return this;
+    }
+}

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

@@ -0,0 +1,41 @@
+/*
+ * $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 BlockModel from "../../../../models/block.model";
+import {LabelItem} from "./label/label-item.index";
+import LabelModel from "../../../../models/label.model";
+
+
+@dom({
+    tag: "g",
+    class: "labels",
+    autoGenerate: false
+})
+export default class Labels extends SvgBase {
+
+    constructor(public parent: Block, public item: BlockModel) {
+        super(parent);
+        return this;
+    }
+
+    update(): this {
+        // add seat items in blockItem container
+        this.item.labels.map((label: LabelModel) => {
+            this.addChild(new LabelItem(this, label))
+        });
+        this.updateChilds();
+        return this;
+    }
+
+    // Getting labels method
+    // ex: seatmap.stage.blocks.getBlock(2).seats.getSeat("1-1")
+    public getLabels(): Array<LabelItem> {
+        return this.child_items;
+    }
+}