@alisaitteke/seatmap-canvas 2.0.0

package/src/lib/svg/stage/blocks.search-circle.ts

@@ -0,0 +1,86 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+
+import {dom} from "../../decorators";
+import SvgBase from "../svg.base";
+import Circle from "./search-circle/circle";
+import {EventType, ZoomLevel} from "../../enums/global";
+import Stage from "./stage.index";
+
+@dom({
+    tag: "g",
+    class: "search-circle",
+    autoGenerate: false
+})
+export default class BlocksSearchCircle extends SvgBase {
+
+
+    public circle: Circle;
+    public is_enable: boolean = true;
+
+    constructor(public parent: Stage) {
+        super(parent);
+        this.global.eventManager.addEventListener(EventType.MOUSE_MOVE, (mouse: any) => {
+            if (this.global.zoomManager.zoomLevel === ZoomLevel.BLOCK && this.is_enable) {
+                this.node.attr("transform", "translate(" + mouse + ")");
+            }
+        });
+
+        this.global.eventManager.addEventListener(EventType.ZOOM_LEVEL_CHANGE, (zoom_level: any) => {
+            if (zoom_level.level === ZoomLevel.VENUE || zoom_level.level === ZoomLevel.SEAT) {
+                this.node.classed("show", false);
+            }
+        });
+
+
+        this.global.eventManager.addEventListener(EventType.MULTI_SELECT_ENABLE, () => {
+            this.disable();
+        });
+        this.global.eventManager.addEventListener(EventType.MULTI_SELECT_DISABLE, () => {
+            this.enable();
+        });
+
+
+        return this;
+    }
+
+    update(): this {
+
+        this.clear();
+        this.circle = new Circle(this);
+        this.addChild(this.circle);
+        this.updateChilds();
+
+
+        this.parent.blocks.node.on("mouseleave.search", () => {
+            this.node.classed("show", false);
+        });
+
+        this.parent.blocks.node.on("mousemove.search", () => {
+            if (this.global.zoomManager.zoomLevel === ZoomLevel.VENUE) {
+                this.node.classed("show", false);
+            } else if (this.global.zoomManager.zoomLevel === ZoomLevel.BLOCK) {
+                this.node.classed("show", true);
+            } else if (this.global.zoomManager.zoomLevel === ZoomLevel.SEAT) {
+                this.node.classed("show", false);
+            }
+        });
+
+        return this;
+    }
+
+    public enable(): this {
+        this.is_enable = true;
+        this.node.style("display", "block");
+        return this;
+    }
+
+    public disable(): this {
+        this.is_enable = false;
+        this.node.style("display", "none");
+        return this;
+    }
+}

package/src/lib/svg/stage/multi-select/rect.ts

@@ -0,0 +1,36 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+
+import {dom} from "../../../decorators";
+import SvgBase from "./../../svg.base";
+import MultiSelect from "../multi-select";
+
+@dom({
+    tag: "rect",
+    class: "multi-select-rect",
+    autoGenerate: false
+})
+export default class MultiSelectRect extends SvgBase {
+
+
+    constructor(public parent: MultiSelect) {
+        super(parent);
+        this.attr("width", 250);
+        this.attr("height", 250);
+
+        this.attr("x", 250);
+        this.attr("y", 250);
+
+        this.attr("fill", "none");
+        this.attr("stroke", "rgba(0,0,0,0.5)");
+        this.attr("stroke-width", "3px");
+        this.attr("stroke-dasharray", "4");
+    }
+
+    update() {
+
+    }
+}

package/src/lib/svg/stage/multi-select.ts

@@ -0,0 +1,107 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+import {mouse as d3Mouse} from 'd3-selection'
+
+import SvgBase from "../svg.base";
+import Svg from "../svg.index";
+import MultiSelectRect from "./multi-select/rect";
+import {EventType} from "../../enums/global";
+
+
+import {dom} from "../../decorators";
+
+@dom({
+    tag: "g",
+    class: "multi-select-tools",
+    autoGenerate: false
+})
+export default class MultiSelect extends SvgBase {
+
+
+    public rect: MultiSelectRect;
+    public enable: boolean;
+    public start: boolean;
+
+    public points: any = {
+        start: null,
+        end: null
+    };
+
+    constructor(public parent: Svg) {
+        super(parent);
+        this.enable = false;
+        this.start = false;
+
+
+        // this.global.eventManager.addEventListener(EventType.MOUSEDOWN_BLOCK, (e: any, node: any, mouse: any) => {
+        //
+        // });
+        this.global.eventManager.addEventListener(EventType.MOUSEUP_BLOCK, () => {
+            if (this.global.multi_select && this.start) {
+                //console.log("up");
+            }
+        });
+
+        return this;
+    }
+
+    update(): this {
+
+        this.rect = new MultiSelectRect(this).addTo(this);
+        this.updateChilds();
+
+        return this;
+    }
+
+    afterGenerate() {
+
+        this.parent.stage.node.on("mousedown", () => {
+            if (!this.global.multi_select) return;
+            // console.log("e", e);
+            // console.log("mouse", mouse);
+            // console.log("mouse", mouse);
+            let mouse = d3Mouse(this.parent.stage.node.node());
+            if (this.start) {
+                this.start = false;
+
+                this.points.end = mouse;
+                let width = this.points.end[0] - this.points.start[0];
+                let height = this.points.end[1] - this.points.start[1];
+
+
+                this.rect.node.attr("width", width);
+                this.rect.node.attr("height", height);
+                this.rect.node.attr("x", this.points.start[0]);
+                this.rect.node.attr("y", this.points.end[0]);
+
+                this.points.start = null;
+                this.points.end = null;
+            } else {
+                this.start = true;
+                this.points.start = mouse;
+
+            }
+
+        });
+        this.parent.stage.node.on("mousemove", () => {
+            if (this.global.multi_select) {
+                if (this.start) {
+                    let mouse = d3Mouse(this.parent.stage.node.node());
+                    let width = mouse[0] - this.points.start[0];
+                    let height = mouse[1] - this.points.start[1];
+
+                    this.points.end = mouse;
+
+                    this.rect.node.attr("width", width);
+                    this.rect.node.attr("height", height);
+                    this.rect.node.attr("x", this.points.start[0]);
+                    this.rect.node.attr("y", this.points.end[0]);
+                }
+            }
+
+        });
+    }
+}

package/src/lib/svg/stage/search-circle/circle.ts

@@ -0,0 +1,37 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+
+import {dom} from "../../../decorators";
+import SvgBase from "../../svg.base";
+import BlocksSearchCircle from "../blocks.search-circle";
+
+@dom({
+    tag: "circle",
+    class: "circle",
+    autoGenerate: false
+})
+export default class Circle extends SvgBase {
+
+
+    constructor(public parent: BlocksSearchCircle) {
+        super(parent);
+        // .attr("r", this.defaults.zoom_focus_circle_radius)
+        //         .style("display", "none")
+        //         .classed("zoom-circle", true);
+
+        this.attr("r", this.parent.global.config.zoom_focus_circle_radius);
+
+
+        return this;
+    }
+
+    update(): this {
+
+        this.updateChilds();
+
+        return this;
+    }
+}

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

@@ -0,0 +1,41 @@
+/*
+ * index.ts
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+import Blocks from "./blocks/blocks.index";
+import Svg from "../svg.index";
+import SvgBase from "../svg.base";
+import {dom} from "../../decorators/dom";
+import BlocksSearchCircle from "./blocks.search-circle";
+
+
+
+@dom({
+    tag: "g",
+    class: "stage",
+    autoGenerate: false
+})
+export default class Stage extends SvgBase {
+
+    public blocks: Blocks;
+    public searchCircle:BlocksSearchCircle;
+
+    constructor(public parent: Svg) {
+        super(parent);
+    }
+
+
+    update() {
+        this.blocks = new Blocks(this);
+        this.addChild(this.blocks);
+
+        this.searchCircle = new BlocksSearchCircle(this);
+        this.addChild(this.searchCircle);
+
+
+        this.updateChilds();
+    }
+
+
+}

package/src/lib/svg/svg.base.ts

@@ -0,0 +1,217 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+import Block from "./stage/blocks/block-item/block-item.index";
+import {GlobalModel} from "../models/global.model";
+import {EventObject} from "./event.manager";
+import {mouse as d3Mouse} from 'd3-selection'
+
+
+export default class SvgBase {
+
+    public node: any = null;
+    public domClass: string = null;
+    public domTag: string = null;
+    public eventCode: string = null;
+    public autoGenerate: boolean = false;
+    public tags: Array<string>;
+
+    public child_items: Array<any> | any;
+
+    public dom_attrs: Array<any>;
+    public dom_classeds: Array<any>;
+
+    public child_index: number = null;
+
+
+    public global: GlobalModel;
+
+    constructor(public parent: any) {
+        this.child_items = [];
+        this.dom_attrs = [];
+        this.dom_classeds = [];
+        this.tags = [];
+
+        this.eventCode = null;
+
+        if (typeof parent.global !== "undefined") {
+            this.global = parent.global;
+        }
+
+        if (Object(this).dom_params) {
+
+            if (Object(this).dom_params['tag']) {
+                this.domTag = Object(this).dom_params['tag'];
+            }
+            if (Object(this).dom_params['class']) {
+                this.domClass = Object(this).dom_params['class'];
+            }
+            if (Object(this).dom_params['event_code']) {
+                this.eventCode = Object(this).dom_params['event_code'];
+            }
+        }
+        if (typeof Object(this).dom_params['autoGenerate'] !== "undefined" && Object(this).dom_params['autoGenerate'] === true) {
+            this.autoGenerate = true;
+        }
+        this.generateThisDom();
+        return this;
+    }
+
+    public generateThisDom(): this {
+        if (this.autoGenerate) {
+            this.domGenerate(this.parent.node);
+            this.afterGenerate();
+        }
+
+        return this;
+
+    }
+
+    public domGenerate(to: any, index: number = 0): this {
+        let domTag = this.domTag ? this.domTag : "g";
+        this.child_index = index;
+
+        this.node = to.datum(this.parent).append(domTag);
+
+        for (let di = 0; di < this.dom_attrs.length; di++) {
+            let _dom_attr = this.dom_attrs[di];
+            this.node.attr(_dom_attr.name, _dom_attr.value)
+        }
+
+        if (this.domClass) {
+            this.node.classed(this.domClass, true);
+        }
+
+
+        for (let ci = 0; ci < this.dom_classeds.length; ci++) {
+            let _dom_class = this.dom_classeds[ci];
+            this.node.classed(_dom_class.name, _dom_class.value);
+        }
+
+        return this;
+    }
+
+    public attr(name: string, value: string | number): this {
+        this.dom_attrs.push({
+            name: name,
+            value: value
+        });
+        return this;
+    }
+
+    public addChild(item: any, attrs?: any, replace: boolean = true): this {
+        for (let key in attrs) {
+            let value = attrs[key];
+            item.dom_attrs.push({
+                name: key,
+                value: value
+            })
+        }
+
+        this.child_items.push(item);
+        return this;
+    }
+
+    public classed(className: string, value: boolean = true): this {
+        this.dom_classeds.push({
+            name: className,
+            value: value
+        });
+        return this;
+    }
+
+
+    public clear(): this {
+        this.child_items.map((item: Block) => {
+            item.node.remove()
+        });
+        this.child_items = [];
+        return this;
+    }
+
+    public updateChilds(): this {
+        this.child_items.map((item: Block, index: number) => {
+            item.domGenerate(this.node, index);
+            item.update();
+        });
+        this.afterGenerate();
+        this.updateEvents(false);
+        return this;
+    }
+
+    public updateEvents(recursive: boolean = false): this {
+        let _self = this;
+
+        let allowed_event_types: Array<string> = ["click", "mousever", "mouseleave", "mouseout", "mouseenter", "mousemove", "keydown", "keypress", "mousedown", "mouseup","touchstart"];
+
+        for (let i = 0; i < this.global.eventManager.events.length; i++) {
+            let _event = this.global.eventManager.events[i];
+            let _split = _event.type.toString().split(".");
+            if (_split[0].toLowerCase() === this.eventCode.toLowerCase() && allowed_event_types.indexOf(_split[1].toLowerCase()) !== -1 && typeof _split[1] !== "undefined") {
+                this.node.on(_split[1].toLowerCase() + ".globalevent", function (item: EventObject) {
+                    let _mouse = d3Mouse(_self.parent.node.node());
+                    _event.fn(_self, item, _mouse);
+                })
+            }
+        }
+
+        if (recursive && this.child_items.length > 0) {
+            this.child_items.map((child_item: any) => {
+                if (typeof child_item.updateEvents === "function") {
+                    child_item.updateEvents(true);
+                }
+            })
+        }
+
+        return this;
+    }
+
+    public addEventListener(eventType: string, cb: any): this {
+        this.global.eventManager.addEventListener(eventType, cb);
+        this.updateEvents(false);
+        return this;
+    }
+
+    public addTag(tag: string): this {
+        this.tags.push(tag);
+        return this;
+    }
+
+    public hasTag(tag: string): boolean {
+        return this.tags.indexOf(tag) !== -1
+    }
+
+    public getChilds(type: string = null): Array<any> {
+        if (type === null) {
+            return this.child_items.filter((item: any) => item.constructor.name === type);
+        } else {
+            return this.child_items;
+        }
+    }
+
+    public getChildCount(): number {
+        return this.child_items.length;
+    }
+
+    public beforeGenerate() {
+
+    }
+
+    public afterGenerate() {
+
+    }
+
+    public addToParent(): this {
+        this.parent.addChild(this);
+        return this;
+    }
+
+    public addTo(container: any): this {
+        container.addChild(this);
+        return this;
+    }
+
+
+}

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

@@ -0,0 +1,76 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+import Stage from "./stage/stage.index";
+import {mouse as d3Mouse} from 'd3-selection'
+import "reflect-metadata";
+
+import {SeatMapCanvas} from "../canvas.index";
+import SvgBase from "./svg.base";
+import {dom} from "../decorators/dom";
+import {EventType, ZoomLevel} from "../enums/global";
+import ZoomOutBg from "./zoom-out.bg";
+import Legend from "./legend";
+import Tooltip from "./tooltip";
+
+
+
+declare const window: any;
+
+@dom({
+    tag: "svg",
+    class: "seatmap-svg",
+    autoGenerate: false
+})
+export default class Svg extends SvgBase {
+    public stage: Stage;
+    public zoomOutBg: ZoomOutBg;
+    public legend: Legend;
+    public tooltip: Tooltip;
+
+
+    constructor(public parent: SeatMapCanvas) {
+        super(parent);
+        this.global.eventManager.addEventListener(EventType.ZOOM_LEVEL_CHANGE, (zoom_level: any) => {
+            this.node.classed("zoom-level-" + ZoomLevel.SEAT, false);
+            this.node.classed("zoom-level-" + ZoomLevel.BLOCK, false);
+            this.node.classed("zoom-level-" + ZoomLevel.VENUE, false);
+            this.node.classed("zoom-level-" + zoom_level.level, true);
+        });
+
+
+        //this.update();
+    }
+
+    update() {
+        this.stage = new Stage(this).addToParent();
+        this.zoomOutBg = new ZoomOutBg(this).addToParent();
+        if(this.global.config.legend_show){
+            this.legend = new Legend(this).addToParent();
+        }
+
+        this.tooltip = new Tooltip(this).addToParent();
+
+
+        this.updateChilds();
+
+        this.stage.node.raise();
+        if(this.global.config.legend_show){
+            this.legend.node.raise();
+        }
+
+        this.tooltip.node.raise();
+
+        this.node.on("mousemove", () => {
+            let cor = d3Mouse(this.stage.node.node());
+            this.parent.eventManager.dispatch(EventType.MOUSE_MOVE, cor);
+        })
+
+
+        //this.stage.updateEvents(true);
+    }
+
+
+}

package/src/lib/svg/tooltip/rect.ts

@@ -0,0 +1,66 @@
+/*
+ * $project.fileName
+ * https://github.com/seatmap/canvas Copyright 2018 Ali Sait TEKE
+ */
+
+
+import {dom} from "../../decorators";
+import SvgBase from "../svg.base";
+
+import {line as d3Line} from "d3-shape";
+import Tooltip from "../tooltip";
+
+@dom({
+    tag: "rect",
+    class: "tooltip-rect",
+    autoGenerate: false
+})
+export default class TooltipRect extends SvgBase {
+
+
+    constructor(public parent: Tooltip) {
+        super(parent);
+        this.attr("width", this.global.config.tooltip_style.width);
+        this.attr("height", this.global.config.tooltip_style.height);
+        this.attr("x", 0);
+        this.attr("y", 0);
+        this.attr("rx", 3);
+        this.attr("ry", 3);
+
+        const data:any = [
+            {'x': 0, 'y': 0},
+            {'x': 0, 'y': 30},
+            {'x': 30, 'y': 30},
+            {'x': 30, 'y': 0},
+            {'x': 0, 'y': 0},
+        ];
+
+        const line = d3Line()
+            .x((d: any) => {
+                return d['x'];
+            })
+            .y((d: any) => {
+                return d['y'];
+            });
+
+        this.attr("fill", this.global.config.tooltip_style.bg);
+        this.attr("stroke", "rgba(0,0,0,0.3)");
+        this.attr("stroke-width", "1px");
+        this.attr("opacity", 0.8);
+
+        //this.attr('d', line(data));
+
+
+        return this;
+    }
+
+    update(): this {
+        this.updateChilds();
+        return this;
+    }
+
+    afterGenerate() {
+
+        this.node.style("pointer-events", "none");
+    }
+}