@alisaitteke/seatmap-canvas 2.3.0 → 2.4.2

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

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

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

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

@@ -1,52 +0,0 @@
-/*
- * $project.fileName
- * https://github.com/alisaitteke/seatmap-canvas Copyright 2023 Ali Sait TEKE
- */
-
-import SvgBase from "../../../../svg.base";
-import {dom} from "../../../../../decorators/dom";
-import {SeatItem} from "./seat-item.index";
-
-@dom({
-    tag: "text",
-    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.text('\uf005')
-        this.attr("class", 'fa');
-        // this.attr("fill", '#ff0000');
-
-        this.attr("fill", this.global.config.seat_style.check_icon_color);
-        this.attr("transform", "translate(-7,4) scale(0.8)");
-        this.attr("pointer-events", "none");
-        this.attr("display", "none");
-        this.attr("opacity", 0);
-
-        return this;
-    }
-
-    update(): this {
-        return this;
-    }
-
-    afterGenerate() {
-        this.node.style("pointer-events", "none");
-    }
-
-    show():this {
-        this.node.attr("display", "block");
-        this.node.attr("opacity", 1);
-        return this;
-    }
-
-    hide():this {
-        this.node.attr("display", "none");
-        this.node.attr("opacity", 0);
-        return this;
-    }
-}

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

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

@@ -1,159 +0,0 @@
-/*
- * $project.fileName
- * https://github.com/alisaitteke/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 = null): this {
-        this.setColor(this.getColor());
-        return this;
-    }
-
-    public select(color: string | null = 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 = 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

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

@@ -1,71 +0,0 @@
-/*
- * blocks.ts
- * https://github.com/alisaitteke/seatmap-canvas Copyright 2023 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]));
-            block_item.bounds = polygonHull(bound_items);
-
-            this.addChild(_blockItem);
-        });
-        this.updateChilds();
-        this.seats = this.node.selectAll(".seat");
-
-        return this;
-    }
-
-    public getBlock(id: any): Block | null {
-        const block = this.getBlocks().find((block: Block) => block.item.id == id)
-        if (block)
-            return block;
-        else
-            return null;
-    }
-
-    public getBlocks(): Array<Block> {
-        return this.getChilds(Block.name);
-    }
-
-    public center() {
-
-    }
-}

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

@@ -1,86 +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 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

@@ -1,36 +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 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

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