@alisaitteke/seatmap-canvas 2.3.0 → 2.4.1

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

@@ -1,37 +0,0 @@
-/*
- * $project.fileName
- * https://github.com/alisaitteke/seatmap-canvas Copyright 2023 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

@@ -1,41 +0,0 @@
-/*
- * index.ts
- * https://github.com/alisaitteke/seatmap-canvas Copyright 2023 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

@@ -1,229 +0,0 @@
-/*
- * $project.fileName
- * https://github.com/alisaitteke/seatmap-canvas Copyright 2023 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 = 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_classes: Array<any>;
-
-    public child_index: number | null = null;
-
-    public domText: string | null = null;
-
-
-    public global: GlobalModel;
-
-    constructor(public parent: any) {
-        this.child_items = [];
-        this.dom_attrs = [];
-        this.dom_classes = [];
-        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.domText){
-            this.node.text(this.domText)
-        }
-
-        if (this.domClass) {
-            this.node.classed(this.domClass, true);
-        }
-
-
-        for (let ci = 0; ci < this.dom_classes.length; ci++) {
-            let _dom_class = this.dom_classes[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 text(value: string): this {
-        // this.text(value)
-        this.domText = 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_classes.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"];
-        if (this.eventCode) {
-            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 = 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

@@ -1,76 +0,0 @@
-/*
- * $project.fileName
- * https://github.com/alisaitteke/seatmap-canvas Copyright 2023 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

@@ -1,66 +0,0 @@
-/*
- * $project.fileName
- * https://github.com/alisaitteke/seatmap-canvas Copyright 2023 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");
-    }
-}

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

@@ -1,48 +0,0 @@
-/*
- * $project.fileName
- * https://github.com/alisaitteke/seatmap-canvas Copyright 2023 Ali Sait TEKE
- */
-
-
-import {dom} from "../../decorators";
-import SvgBase from "../svg.base";
-import Tooltip from "../tooltip";
-
-@dom({
-    tag: "text",
-    class: "tooltip-title",
-    autoGenerate: false
-})
-export default class TooltipTitle extends SvgBase {
-
-    title: Array<string>;
-
-    constructor(public parent: Tooltip) {
-        super(parent);
-        this.attr("x", 6);
-        this.attr("y", 21);
-        this.attr("fill", this.global.config.tooltip_style.color);
-        return this;
-    }
-
-    update(): this {
-        this.updateChilds();
-        return this;
-    }
-
-    afterGenerate() {
-
-        this.node.style("pointer-events", "none");
-        this.node.style("font-size", "12px");
-    }
-
-    generateTitle() {
-        this.node.selectAll("tspan").remove()
-            .data(this.title).enter()
-            .append("tspan")
-            .text((item: string) => item)
-            .attr("x", 6)
-            .attr("y", (line: any, index: number) => (index * 16) + 16);
-    }
-
-}

package/src/lib/svg/tooltip.ts

@@ -1,93 +0,0 @@
-/*
- * $project.fileName
- * https://github.com/alisaitteke/seatmap-canvas Copyright 2023 Ali Sait TEKE
- */
-
-
-import {dom} from "../decorators";
-import SvgBase from "./svg.base";
-
-import TooltipRect from "./tooltip/rect";
-import {EventType, ZoomLevel} from "../enums/global";
-
-
-import Svg from "./svg.index";
-import {SeatItem} from "./stage/blocks/block-item/seat/seat-item.index";
-
-import {mouse as d3Mouse} from 'd3-selection'
-import TooltipTitle from "./tooltip/title";
-
-@dom({
-    tag: "g",
-    class: "seatmap-tooltip",
-    autoGenerate: false
-})
-export default class Tooltip extends SvgBase {
-
-
-    public rect: TooltipRect;
-    public title: TooltipTitle;
-
-    public activeSeat: SeatItem | null;
-
-    constructor(public parent: Svg) {
-        super(parent);
-        this.attr("transform", "translate(0,0)");
-        this.attr("opacity", 0);
-
-        this.activeSeat = null;
-
-
-        this.global.eventManager.addEventListener([EventType.MOUSEMOVE_SEAT], (seat: SeatItem) => {
-            if (this.global.multi_select) return;
-            if (this.activeSeat !== seat && seat.item.title) {
-                this.activeSeat = seat;
-                this.setTitle(seat.item.title.split("\n"));
-                this.title.generateTitle();
-            }
-        });
-        this.global.eventManager.addEventListener([EventType.MOUSEOUT_SEAT], (seat: SeatItem) => {
-            this.node.attr("opacity", 0);
-            this.activeSeat = null;
-            this.title.title = [];
-            this.title.generateTitle();
-        });
-        this.global.eventManager.addEventListener([EventType.TOUCHSTART_BLOCK], (seat: SeatItem) => {
-            this.node.attr("opacity", 0);
-        });
-        return this;
-    }
-
-    public setTitle(title: Array<string>): this {
-        this.title.title = title;
-        return this;
-    }
-
-    update(): this {
-        this.rect = new TooltipRect(this).addTo(this);
-        this.title = new TooltipTitle(this).addTo(this);
-
-
-        this.updateChilds();
-        return this;
-    }
-
-    afterGenerate() {
-
-        let _self = this;
-
-        this.parent.node.on("mousemove.seat", function () {
-            if (_self.global.multi_select) return;
-            if (_self.global.zoomManager.zoomLevel === ZoomLevel.SEAT && _self.activeSeat !== null) {
-                // @ts-ignore
-                let cor = d3Mouse(this);
-
-                let x = cor[0] - (_self.global.config.tooltip_style.width / 2);
-                let y = cor[1] - (_self.global.config.tooltip_style.height + (_self.global.config.seat_style.radius) + 2);
-                _self.node.attr("transform", "translate(" + [x, y] + ")").attr("opacity", 1);
-            } else {
-                _self.node.attr("opacity", 0);
-            }
-        })
-    }
-}

package/src/lib/svg/zoom-out.bg.ts

@@ -1,35 +0,0 @@
-/*
- * $project.fileName
- * https://github.com/alisaitteke/seatmap-canvas Copyright 2023 Ali Sait TEKE
- */
-
-
-import {dom} from "../decorators";
-import SvgBase from "./svg.base";
-import Svg from "./svg.index";
-import {EventType} from "../enums/global";
-
-@dom({
-    tag: "rect",
-    class: "zoom-out-bg",
-    autoGenerate: false
-})
-export default class ZoomOutBg extends SvgBase {
-
-    constructor(public parent: Svg) {
-        super(parent);
-        this.global.eventManager.addEventListener(EventType.RESIZE_WINDOW, (win: any) => {
-
-            this.node
-                .attr("width", win.width)
-                .attr("height", win.height)
-                .on("click.zoomout", () => {
-                    this.global.eventManager.dispatch(EventType.CLICK_ZOOM_OUT, this);
-                });
-        })
-    }
-
-    update() {
-
-    }
-}