Merge pull request #35 from alisaitteke/develop

Develop

examples/index.html

@@ -7,20 +7,21 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <script defer type="text/javascript" src="cjs/seatmap.canvas.js"></script>
     <link href="https://use.fontawesome.com/releases/v6.4.2/css/all.css" rel="stylesheet"/>
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
     <style>
 
 
         #seats_container {
             position: relative;
             border-radius: 0 !important;
-            background-color: #0f172a;
+            background-color: #ffffff;
             background-size: 0.5rem 0.5rem;
-            background-position:0.25rem 0.25rem;
-            background-image:
-                    linear-gradient(to right, rgba(50, 100, 150, 0.1) 1px, transparent 1px),
-                    linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 1px, transparent 1px);
+            background-position: 0.25rem 0.25rem;
+            background-image: linear-gradient(to right, rgba(50, 100, 150, 0.1) 1px, transparent 1px),
+            linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 1px, transparent 1px);
             margin: 0;
         }
+
         #seats_container::before, #seats_container::after {
             content: '';
             position: absolute;
@@ -29,17 +30,16 @@
             bottom: 0;
             right: 0;
             background-size: 2.5rem 2.5rem;
-            background-position:0.25rem 0.25rem;
-            background-image:
-                    linear-gradient(to right, rgba(50, 100, 150, 0.1) 2px, transparent 2px),
-                    linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 2px, transparent 2px);
+            background-position: 0.25rem 0.25rem;
+            background-image: linear-gradient(to right, rgba(50, 100, 150, 0.1) 2px, transparent 2px),
+            linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 2px, transparent 2px);
             z-index: -1;
         }
+
         #seats_container::after {
             background-size: 5rem 5rem;
-            background-image:
-                    linear-gradient(to right, rgba(50, 100, 150, 0.1) 3px, transparent 3px),
-                    linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 3px, transparent 3px);
+            background-image: linear-gradient(to right, rgba(50, 100, 150, 0.1) 3px, transparent 3px),
+            linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 3px, transparent 3px);
         }
     </style>
     <title>Seatmap Demo</title>
@@ -49,44 +49,56 @@
 <div class="absolute flex flex-col w-screen h-screen">
     <div class="bg-[#ab1f34] flex justify-center border-b border-[#d05063]">
         <img class="h-12" src="logo_small.jpg">
+        <div class="absolute h-12 right-3 flex flex-row gap-3 items-center content-center">
+            <a class="github-button" href="https://github.com/alisaitteke/seatmap-canvas/subscription"
+               data-icon="octicon-eye" aria-label="Watch alisaitteke/seatmap-canvas on GitHub">Watch</a>
+            <a class="github-button" href="https://github.com/alisaitteke" aria-label="Follow @alisaitteke on GitHub">Follow
+                @alisaitteke</a>
+            <a class="github-button" href="https://github.com/alisaitteke/seatmap-canvas/fork"
+               data-icon="octicon-repo-forked" aria-label="Fork alisaitteke/seatmap-canvas on GitHub">Fork</a></div>
     </div>
     <div class="flex flex-row h-full">
-        <div class="w-48 bg-slate-800 hidden md:block">
-            <div class="flex flex-col gap-3 p-1.5 text-sm">
-                <button class="border text-left border-slate-500 bg-slate-700 text-slate-300 py-1 px-3 rounded-md hover:bg-slate-900"
+        <div class="w-48 bg-gray-100 hidden md:block border-r border-r-gray-300 shadow-lg">
+            <div class="flex flex-col gap-3 p-1.5 text-xs">
+                <button class="border text-left border-slate-500 bg-slate-100 text-slate-800 py-1 px-3 rounded-md hover:bg-slate-200"
                         id="zoomout-button">
                     <i class="fa-solid fa-magnifying-glass-minus mr-2"></i>
                     All Blocks
                 </button>
-                <button class="border text-left border-slate-500 bg-slate-700 text-slate-300 py-1  px-3 rounded-md hover:bg-slate-900"
+                <button class="border text-left border-slate-500 bg-slate-100 text-slate-800 py-1 px-3 rounded-md hover:bg-slate-200"
                         id="get-selected-seats">
                     <i class="fa-solid fa-code mr-2"></i>
                     Get Json
                 </button>
-                <button class="border text-left border-slate-500 bg-slate-700 text-slate-300 py-1  px-3 rounded-md hover:bg-slate-900 zoom-to-block"
+                <button class="border text-left border-slate-500 bg-slate-100 text-slate-800 py-1 px-3 rounded-md hover:bg-slate-200 zoom-to-block"
                         data-block-id="block-0">
                     <i class="fa-solid fa-magnifying-glass-plus mr-2"></i>
                     Zoom Block 1
                 </button>
-                <button class="border text-left border-slate-500 bg-slate-700 text-slate-300 py-1  px-3 rounded-md hover:bg-slate-900 zoom-to-block"
+                <button class="border text-left border-slate-500 bg-slate-100 text-slate-800 py-1  px-3 rounded-md hover:bg-slate-200 zoom-to-block"
                         data-block-id="block-1">
                     <i class="fa-solid fa-magnifying-glass-plus mr-2"></i>
                     Zoom Block 2
                 </button>
-                <button class="border text-left border-slate-500 bg-slate-700 text-slate-300 py-1  px-3 rounded-md hover:bg-slate-900 zoom-to-block"
+                <button class="border text-left border-slate-500 bg-slate-100 text-slate-800 py-1  px-3 rounded-md hover:bg-slate-200 zoom-to-block"
                         data-block-id="block-2">
                     <i class="fa-solid fa-magnifying-glass-plus mr-2"></i>
                     Zoom Block 3
                 </button>
-                <button class="border text-left border-slate-500 bg-slate-700 text-slate-300 py-1  px-3 rounded-md hover:bg-slate-900"
+                <button class="border text-left border-slate-500 bg-slate-100 text-slate-800 py-1  px-3 rounded-md hover:bg-slate-200 zoom-to-block"
+                        data-block-id="block-3">
+                    <i class="fa-solid fa-magnifying-glass-plus mr-2"></i>
+                    Zoom Block 4
+                </button>
+                <button class="border text-left border-slate-500 bg-slate-100 text-slate-800 py-1  px-3 rounded-md hover:bg-slate-200"
                         id="randomize-btn"
                         data-block-id="block-2">
                     <i class="fa-solid fa-magnifying-glass-plus mr-2"></i>
                     Randomize
                 </button>
             </div>
         </div>
-        <div id="seats_container" class="w-full flex-1 h-full bg-gradient-to-r from-slate-900 to-slate-700"></div>
+        <div id="seats_container" class="w-full flex-1 h-full"></div>
     </div>
 </div>
 
@@ -98,19 +110,23 @@
     $(document).ready(function () {
 
         let seatmap = new SeatMapCanvas("#seats_container", {
-            seat_style: {
-                hover: '#8fe100',
-                color: '#f0f7fa',
-                selected: '#8fe100',
-                check_icon_color: '#fff',
-                not_salable: '#10546b',
-                focus: '#8fe100',
-            },
-            legend_style: {
-                font_color: '#fff'
-            },
-            block_style: {
-                title_color: '#fff'
+            legend: true,
+            style: {
+                seat: {
+                    hover: '#8fe100',
+                    color: '#f0f7fa',
+                    selected: '#8fe100',
+                    check_icon_color: '#fff',
+                    not_salable: '#0088d3',
+                    focus: '#8fe100',
+                },
+                legend: {
+                    font_color: '#3b3b3b',
+                    show: false
+                },
+                block: {
+                    title_color: '#fff'
+                }
             }
         });
         seatmap.eventManager.addEventListener("SEAT.CLICK", (seat) => {
@@ -125,7 +141,7 @@
 
 
         const generateRandomBlocks = function () {
-            let block_colors = ["#005f73", "#e63946", "#10546b", "#10546b"];
+            let block_colors = ["#01a5ff", "#ab1f34", "#01a5ff", "#01a5ff"];
             let blocks = []
             let last_x = 0;
             for (let j = 0; j < 4; j++) { // blocks

src/lib/canvas.index.ts

@@ -32,7 +32,7 @@ export class SeatMapCanvas {
     public eventManager: EventManager;
     public addEventListener: any;
 
-    constructor(public container_selector: any, _config: any = {}) {
+    constructor(public container_selector: any, _config: DefaultsModel) {
         let _self = this;
         this.config = new DefaultsModel(_config);
         this.eventManager = new EventManager(this);

src/lib/models/defaults.model.ts

@@ -6,6 +6,21 @@
 
 // @todo legend show hide function
 
+import {SeatStyle} from "./styles/seat.style";
+import {BLockStyle} from "./styles/block.style";
+import {LegendStyle} from "./styles/legend.style";
+import {LabelStyle} from "./styles/label.style";
+import {TooltipStyle} from "./styles/tooltip.style";
+import Block from "../svg/stage/blocks/block-item/block-item.index";
+
+export class StyleConfig {
+    seat: SeatStyle
+    block: BLockStyle
+    legend: LegendStyle
+    label: LabelStyle
+    tooltip: TooltipStyle
+}
+
 export default class DefaultsModel {
     min_zoom: number = 0.1;
     max_zoom: number = 1.9;
@@ -15,49 +30,11 @@ export default class DefaultsModel {
     zoom_focus_circle_radius: number = 60;
     click_enable_sold_seats: boolean = false;
     zoom_out_button: string;
-    legend_show: boolean = false;
+    legend: boolean = false;
     canvas_stageout_control: boolean = true;
-    seat_style: {
-        radius: number,
-        color: string,
-        not_salable: string,
-        selected: string,
-        hover: string,
-        focus: string,
-        focus_out: string,
-        check_color: string,
-        check_icon: string | null,
-        check_icon_color: string,
-    };
-    block_style: {
-        fill: string
-        stroke: string,
-        border_width: number,
-        title_color: string,
-        title_font_size: string
-    };
-
-    legend_style: {
-        radius: number,
-        padding: number,
-        font_size: number,
-        font_color: string
-    };
 
-    label_style: {
-        color: string
-        bg: string
-        font_size: number
-        radius: number
-    };
+    style: StyleConfig
 
-    tooltip_style: {
-        border_width: string,
-        width: number,
-        height: number,
-        color: string,
-        bg: string
-    };
 
     lang: {
         selectable: string,
@@ -73,48 +50,22 @@ export default class DefaultsModel {
 
         this.resizable = config.resizable ? config.resizable : this.resizable;
         this.zoom_out_button = config.zoom_out_button ? config.zoom_out_button : ".zoom-out-button";
-        this.legend_show = config.legend_show == false ? config.legend_show : true;
+        this.legend = config.legend == false ? config.legend : true;
         this.canvas_stageout_control = config.canvas_stageout_control == false ? config.canvas_stageout_control : true;
 
 
-        this.seat_style = {
-            radius: config.seat_style && config.seat_style.radius || 12,
-            color: config.seat_style && config.seat_style.color || "#77b2ff",
-            not_salable: config.seat_style && config.seat_style.not_salable || "#ccc9c9",
-            selected: config.seat_style && config.seat_style.selected || "#51ff48",
-            hover: config.seat_style && config.seat_style.hover || "#4770ff",
-            focus: config.seat_style && config.seat_style.focus || "#6293d2",
-            focus_out: config.seat_style && config.seat_style.focus_out || "#ff001c",
-            check_color: config.seat_style && config.seat_style.check_color || "#ffffff",
-            check_icon: config.seat_style.check_icon || '\uf005',
-            check_icon_color: config.seat_style && config.seat_style.check_icon_color || "#ffffff",
-        };
-        this.block_style = {
-            fill: config.block_style && config.block_style.fill || "#ffffff",
-            stroke: config.block_style && config.block_style.stroke || "#ffffff",
-            border_width: config.block_style && config.block_style.border_width || 4,
-            title_color: config.block_style && config.block_style.title_color || "#000000",
-            title_font_size: config.block_style && config.block_style.title_font_size || 28,
-        };
-        this.label_style = {
-            color: config.label_style && config.label_style.color || "#000000",
-            bg: config.label_style && config.label_style.bg || "#ffffff",
-            font_size: config.label_style && config.label_style.font_size || 12,
-            radius: config.label_style && config.label_style.radius || 12,
-        };
-        this.legend_style = {
-            radius: config.legend_style && config.legend_style.radius || 12,
-            padding: config.legend_style && config.legend_style.padding || 36,
-            font_size: config.legend_style && config.legend_style.font_size || 12,
-            font_color: config.legend_style && config.legend_style.font_color || "#000000",
-        };
-        this.tooltip_style = {
-            border_width: config.tooltip_style && config.tooltip_style.border_width || 1,
-            width: config.tooltip_style && config.tooltip_style.width || 140,
-            height: config.tooltip_style && config.tooltip_style.height || 58,
-            color: config.tooltip_style && config.tooltip_style.color || "#000000",
-            bg: config.tooltip_style && config.tooltip_style.bg || "#ffffff"
-        };
+        this.style = new StyleConfig()
+
+        this.style.seat = Object.assign(new SeatStyle(), config.style.seat)
+        this.style.block = Object.assign(new BLockStyle(), config.style.block)
+        this.style.legend = Object.assign(new LegendStyle(), config.style.legend)
+        this.style.label = Object.assign(new LabelStyle(), config.style.label)
+        this.style.tooltip = Object.assign(new TooltipStyle(), config.style.tooltip)
+
+        if (config.style) {
+
+        }
+
 
         this.lang = {
             selectable: config.lang && config.lang.selectable || "Selectable",

src/lib/models/styles/block.style.ts

@@ -0,0 +1,7 @@
+export class BLockStyle {
+    fill: string = "#ffffff"
+    stroke: string = "#ffffff"
+    border_width: number = 4;
+    title_color: string = '#000000'
+    title_font_size: number = 28;
+}

src/lib/models/styles/label.style.ts

@@ -0,0 +1,6 @@
+export class LabelStyle {
+    color: string = "#000000"
+    bg: string = "#fff"
+    font_size: number = 12
+    radius: number = 12
+}

src/lib/models/styles/legend.style.ts

@@ -0,0 +1,6 @@
+export class LegendStyle {
+    radius: number = 12
+    padding: number = 36
+    font_size: number = 12
+    font_color: string = '#000'
+}

src/lib/models/styles/seat.style.ts

@@ -0,0 +1,12 @@
+export class SeatStyle {
+    radius: number = 12
+    color: string = '#77b2ff'
+    not_salable: string = "#6293d2";
+    selected: string = "#4770ff";
+    hover: string = "#4770ff"
+    focus: string = "#6293d2"
+    focus_out: string = "#ff001c"
+    check_color: string = '#ffffff'
+    check_icon: string = '\uf005'
+    check_icon_color: string = "#ffffff";
+}

src/lib/models/styles/tooltip.style.ts

@@ -0,0 +1,7 @@
+export class TooltipStyle {
+    border_width: number = 1
+    width: number = 140
+    height: number = 58
+    color: string = '#000000'
+    bg: string = '#ffffff'
+}

src/lib/svg/legend.ts

@@ -27,15 +27,15 @@ export default class Legend extends SvgBase {
 
         legend_data.push({
             title: this.global.config.lang.non_selectable,
-            color: this.global.config.seat_style.not_salable
+            color: this.global.config.style.seat.not_salable
         });
         legend_data.push({
             title: this.global.config.lang.selectable,
-            color: this.global.config.seat_style.color
+            color: this.global.config.style.seat.color
         });
         legend_data.push({
             title: this.global.config.lang.your_selection,
-            color: this.global.config.seat_style.selected
+            color: this.global.config.style.seat.selected
         });
 
         for (let i = 0; i < legend_data.length; i++) {
@@ -48,8 +48,8 @@ export default class Legend extends SvgBase {
 
     afterGenerate() {
 
-        let x = this.global.config.legend_style.radius * 2;
-        let y = 150 - (this.global.config.legend_style.padding * this.getChildCount());
+        let x = this.global.config.style.legend.radius * 2;
+        let y = 150 - (this.global.config.style.legend.padding * this.getChildCount());
         this.node.attr("transform", "translate(" + [x, y] + ")");
     }
 }

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

@@ -18,7 +18,7 @@ export default class LegendCircle extends SvgBase {
 
     constructor(public parent: LegendItem) {
         super(parent);
-        this.attr("r", this.global.config.legend_style.radius);
+        this.attr("r", this.global.config.style.legend.radius);
         this.attr("fill", this.parent.legend_data.color);
     }