\r\n \r\n \r\n {i18n.t(\"tooltipSeat.companion\")}\r\n
\r\n \r\n )}\r\n\r\n \r\n
\r\n \r\n {i18n.t(\"tooltipSeat.section\")}:{\" \"}\r\n {target.sectionLabel || \"?\"}{\" \"}\r\n \r\n \r\n
\r\n
\r\n \r\n {i18n.t(\"tooltipSeat.row\")}:{\" \"}\r\n {target.rowLabel || \"?\"}\r\n \r\n \r\n \r\n {i18n.t(\"tooltipSeat.seat\")}: {target.label || \"?\"}\r\n \r\n
\r\n
\r\n {info}\r\n
\r\n\r\n {getInfoSpan()}
\r\n \r\n );\r\n};\r\n\r\nexport const TooltipRowBlocker = (target: any, onSelect: any) => {\r\n const getInfoSpan = () => {\r\n if (target.status == \"Free\") {\r\n if (onSelect)\r\n return (\r\n \r\n );\r\n return {i18n.t(\"tooltipSeat.click-to-not-for-sale\")}
;\r\n } else if (target.status == \"NoForSale\") {\r\n if (onSelect)\r\n return (\r\n \r\n );\r\n return {i18n.t(\"tooltipSeat.click-to-for-sale\")}
;\r\n }\r\n return {i18n.t(\"tooltipSeat.not-available\")}
;\r\n };\r\n\r\n return (\r\n \r\n {target.status == \"Free\" && (\r\n \r\n Disponible para venta
\r\n \r\n )}\r\n {target.status == \"NoForSale\" && (\r\n \r\n {`Disponible > No disponible para venta`}
\r\n \r\n )}\r\n {target.status == \"Reserved\" && (\r\n \r\n {`No es posible cambiar el estatus del asiento`}
\r\n \r\n )}\r\n {target.status == \"Booked\" && (\r\n \r\n {`No es posible cambiar el estatus del asiento`}
\r\n \r\n )}\r\n {target.category && (\r\n \r\n {target.category.name}
\r\n \r\n )}\r\n {target.restrictedView && (\r\n \r\n \r\n \r\n {i18n.t(\"tooltipSeat.restrictedView\")}\r\n
\r\n \r\n )}\r\n {target.accesible && (\r\n \r\n \r\n \r\n {i18n.t(\"tooltipSeat.accessible\")}\r\n
\r\n \r\n )}\r\n {target.companion && (\r\n \r\n \r\n \r\n {i18n.t(\"tooltipSeat.companion\")}\r\n
\r\n \r\n )}\r\n\r\n \r\n
\r\n \r\n {i18n.t(\"tooltipSeat.section\")}:{\" \"}\r\n {target.section || \"?\"}{\" \"}\r\n \r\n \r\n
\r\n
\r\n \r\n {i18n.t(\"tooltipSeat.row\")}: {target.row || \"?\"}\r\n \r\n \r\n \r\n {i18n.t(\"tooltipSeat.seat\")}:{\" \"}\r\n {target.seatNumber || \"?\"}\r\n \r\n
\r\n
{getInfoSpan()}
\r\n \r\n );\r\n};\r\n\r\nexport const TooltipRowChannel = (target: any, onSelect: any) => {\r\n return (\r\n \r\n \r\n {target.channel?.name ?? \"Sin Canal\"}
\r\n \r\n\r\n {target.category && (\r\n \r\n {target.category.name}
\r\n \r\n )}\r\n\r\n \r\n\r\n \r\n
\r\n \r\n {i18n.t(\"tooltipSeat.section\")}:{\" \"}\r\n {target.section || \"?\"}{\" \"}\r\n \r\n \r\n
\r\n
\r\n \r\n {i18n.t(\"tooltipSeat.row\")}: {target.row || \"?\"}\r\n \r\n \r\n \r\n {i18n.t(\"tooltipSeat.seat\")}:{\" \"}\r\n {target.seatNumber || \"?\"}\r\n \r\n
\r\n
{target.category.name}
\r\n \r\n )}\r\n \r\n\r\n \r\n
\r\n \r\n {i18n.t(\"tooltipSeat.section\")}:{\" \"}\r\n {target.sectionLabel || \"?\"}{\" \"}\r\n \r\n \r\n
\r\n
\r\n \r\n {i18n.t(\"tooltipSeat.row\")}:{\" \"}\r\n {target.rowLabel || \"?\"}\r\n \r\n \r\n \r\n {i18n.t(\"tooltipSeat.seat\")}: {target.label || \"?\"}\r\n \r\n
\r\n
{info}
\r\n }\r\n \r\n );\r\n};\r\n","import Handler from \"./Handler\";\r\nimport { Row } from \"../objects/preview\";\r\nimport { IObjectPreview, FabricEvent } from \"../utils\";\r\n\r\nclass PreviewHandler {\r\n private objectTypes: any;\r\n private object: IObjectPreview;\r\n public selectedType: string;\r\n private callBack: any;\r\n\r\n constructor(handler: Handler) {\r\n this.objectTypes = {\r\n row: new Row(handler),\r\n };\r\n }\r\n\r\n public setType(type: string) {\r\n this.selectedType = type;\r\n this.object = this.objectTypes[type];\r\n }\r\n\r\n public onMousemove(event: FabricEvent) {\r\n if (event.target) {\r\n this.setType(event.target.superType);\r\n if (this.object) {\r\n this.callBack = this.object.onHover(event);\r\n } else this.onBlur();\r\n }\r\n }\r\n\r\n private onBlur() {\r\n if (this.callBack) {\r\n this.callBack();\r\n this.callBack = null;\r\n }\r\n }\r\n}\r\n\r\nexport default PreviewHandler;\r\n","export default class BaseService {\r\n constructor() {}\r\n\r\n _setInterceptors() {}\r\n\r\n async _handleResponse_(response) {\r\n if (response.ok) {\r\n return await response.text().then((text) => {\r\n let data;\r\n\r\n try {\r\n data = text && JSON.parse(text);\r\n } catch (e) {\r\n data = text;\r\n }\r\n return data;\r\n });\r\n }\r\n\r\n return {\r\n statusCode: response.status,\r\n errorMessage: `Status code ${response.status}`,\r\n };\r\n }\r\n\r\n _handleError_(error) {\r\n console.log(\"error\", error);\r\n return error;\r\n }\r\n\r\n /**\r\n * Communication with the API\r\n * @param {*} url\r\n * @param {*} method\r\n * @param {*} body\r\n * @param {*} contentType\r\n */\r\n async callApi(url, method, body, headers) {\r\n const options = {\r\n method: method,\r\n headers: {\r\n \"Content-Type\": \"application/json\",\r\n Authorization:\r\n \"Basic \" +\r\n btoa(\r\n `${window.redseats.publicKey}:${window.redseats?.privateKey ?? \"\"}`\r\n ),\r\n ...headers,\r\n },\r\n body: JSON.stringify(body),\r\n };\r\n return await fetch(`${process.env.REACT_APP_API_URL}${url}`, options)\r\n .then(this._handleResponse_)\r\n .catch(this._handleError_);\r\n }\r\n\r\n /**\r\n * Communication with the API\r\n * @param {*} url\r\n * @param {*} method\r\n * @param {*} body\r\n * @param {*} contentType\r\n */\r\n async callApiFile(url) {\r\n const options = {\r\n method: \"Get\",\r\n };\r\n return await fetch(`${url}`, options)\r\n .then(this._handleResponse_)\r\n .catch(this._handleError_);\r\n }\r\n\r\n htmlError(errorMessage) {\r\n let html = document.getElementById(\"root\");\r\n html.innerHTML = `${errorMessage || \"server error\"}
`;\r\n return false;\r\n }\r\n}\r\n","import BaseService from \"./base.service\";\r\nimport { mapStatus } from \"../constants/status\";\r\n\r\nexport default class MapService extends BaseService {\r\n constructor() {\r\n super();\r\n }\r\n\r\n async get() {\r\n if (window.redseats == undefined) {\r\n let html = document.getElementById(\"root\");\r\n html.innerHTML = `Not authorized
`;\r\n return;\r\n }\r\n\r\n if (window.redseats.mapKey) {\r\n const result = await super.callApi(\r\n `map/${window.redseats.mapKey}`,\r\n \"Get\"\r\n );\r\n if (result.statusCode == \"200\") {\r\n result.data.name = window.redseats.mapName ?? \"default\";\r\n result.data.categories = window.redseats.categories;\r\n return result.data;\r\n } else return super.htmlError(result.errorMessage);\r\n }\r\n\r\n return {\r\n name: window.redseats.mapName ?? \"default\",\r\n categories: window.redseats.categories,\r\n status: mapStatus.new,\r\n isPublished: false,\r\n };\r\n }\r\n\r\n async getById(mapId) {\r\n const result = await super.callApi(\r\n `map/${mapId}`,\r\n \"Get\"\r\n );\r\n if (result.statusCode == \"200\") {\r\n console.log('result', result)\r\n return result.data;\r\n } else return super.htmlError(result.errorMessage);\r\n }\r\n\r\n async create(data) {\r\n const result = await super.callApi(\"map\", \"Post\", data);\r\n return result;\r\n }\r\n\r\n async updateData(data) {\r\n const result = await super.callApi(\"map\", \"Put\", {\r\n key: data.key,\r\n name: data.name,\r\n categories: data.categories,\r\n });\r\n return result;\r\n }\r\n\r\n async updateLayout(data) {\r\n const result = await super.callApi(\"map/layout\", \"Put\", {\r\n key: data.key,\r\n layout: data.layout,\r\n });\r\n return result;\r\n }\r\n\r\n async publish({key, imageUrl}) {\r\n const result = await super.callApi(\"map/publish\", \"Put\", {\r\n key,\r\n imagebase64: imageUrl\r\n });\r\n return result;\r\n }\r\n\r\n async getPublishedMaps(){\r\n const result = await super.callApi(\"map/published\", \"Get\");\r\n if (result.statusCode == \"200\") {\r\n return result.data;\r\n } else return super.htmlError(result.errorMessage);\r\n }\r\n}\r\n","import BaseService from \"./base.service\";\r\n\r\nexport default class MapEventService extends BaseService {\r\n constructor() {\r\n super();\r\n }\r\n\r\n async buildSelector() {\r\n if (window.redseats.eventKey) {\r\n const selector = JSON.parse(sessionStorage.getItem(\"rs_selector\"));\r\n const body = {\r\n EventId: window.redseats.eventKey,\r\n AvailableCategories: window.redseats.availableCategories,\r\n SeatStatusColor: window.redseats.seatStatusColor,\r\n Channels: window.redseats.channels ?? []\r\n };\r\n const result = await super.callApi(\r\n \"mapevent/build/selector\",\r\n \"Post\",\r\n body,\r\n { selectorToken: selector?.token ?? \"\" }\r\n );\r\n if (result.statusCode == \"200\") {\r\n sessionStorage.setItem(\r\n \"rs_selector\",\r\n JSON.stringify({\r\n key: result.data.selectorKey,\r\n token: result.data.selectorToken,\r\n })\r\n );\r\n return result.data;\r\n } else return super.htmlError(result.errorMessage);\r\n }\r\n\r\n return super.htmlError(\"Event key does not exist\");\r\n }\r\n async buildNotForSale() {\r\n if (window.redseats.eventKey) {\r\n const body = {\r\n EventId: window.redseats.eventKey,\r\n };\r\n const result = await super.callApi(\r\n \"mapevent/build/notforsale\",\r\n \"Post\",\r\n body\r\n );\r\n if (result.statusCode == \"200\") return result.data;\r\n else return super.htmlError(result.errorMessage);\r\n }\r\n\r\n return super.htmlError(\"Event key does not exist\");\r\n }\r\n async buildChannel() {\r\n if (window.redseats.eventKey) {\r\n const body = {\r\n EventId: window.redseats.eventKey,\r\n };\r\n const result = await super.callApi(\r\n \"mapevent/build/channel\",\r\n \"Post\",\r\n body\r\n );\r\n if (result.statusCode == \"200\") return result.data;\r\n else return super.htmlError(result.errorMessage);\r\n }\r\n\r\n return super.htmlError(\"Event key does not exist\");\r\n }\r\n async buildDetail() {\r\n if (window.redseats.eventKey) {\r\n const body = {\r\n EventId: window.redseats.eventKey,\r\n SeatStatusColor: window.redseats.seatStatusColor\r\n };\r\n const result = await super.callApi(\r\n \"mapevent/build/detail\",\r\n \"Post\",\r\n body\r\n );\r\n if (result.statusCode == \"200\") return result.data;\r\n else return super.htmlError(result.errorMessage);\r\n }\r\n\r\n return super.htmlError(\"Event key does not exist\");\r\n }\r\n}\r\n","import BaseService from \"./base.service\";\r\n\r\nexport default class SeatService extends BaseService {\r\n constructor() {\r\n super();\r\n }\r\n\r\n async changeStatus(data, isAdmin = false) {\r\n data.EventId = window.redseats.eventKey;\r\n console.log(\"data.Status\", data.Status);\r\n let headers;\r\n if (!isAdmin) {\r\n const selector = JSON.parse(sessionStorage.getItem(\"rs_selector\"));\r\n headers = {\r\n selectorToken: selector.token,\r\n };\r\n }\r\n\r\n const result = await super.callApi(\r\n `seat/canvas/status`,\r\n \"Post\",\r\n data,\r\n headers\r\n );\r\n\r\n if (result.statusCode != \"200\") return false;\r\n\r\n return result.data[0].statusCode == \"200\";\r\n }\r\n}\r\n","import BaseService from \"./base.service\";\r\n\r\nexport default class ChannelService extends BaseService {\r\n constructor() {\r\n super();\r\n }\r\n\r\n async getChannels() {\r\n const result = await super.callApi(\r\n `MapEventChannel/${window.redseats.eventKey}`,\r\n \"Get\"\r\n );\r\n if (result.statusCode == \"201\") {\r\n return result.data;\r\n } else return super.htmlError(result.errorMessage);\r\n }\r\n\r\n async saveChannels(channels) {\r\n const body = {\r\n EventId: window.redseats.eventKey,\r\n Channels: channels\r\n };\r\n const result = await super.callApi(\r\n \"MapEventChannel\",\r\n \"Post\",\r\n body\r\n );\r\n if (result.statusCode == \"201\") {\r\n return result.data;\r\n } else return super.htmlError(result.errorMessage);\r\n}\r\n\r\nasync changeSeatChannels(channels) {\r\n const result = await super.callApi(\r\n `MapEventSeatChannel`,\r\n \"Post\",\r\n channels,\r\n );\r\n\r\n if (result.statusCode != \"200\") return false;\r\n\r\n return result.data[0].statusCode == \"200\";\r\n}\r\n}\r\n","import MapService from \"./map.service\";\r\nimport MapEventService from \"./mapEvent.service\";\r\nimport SeatService from \"./seat.service\";\r\nimport ChannelService from \"./channel.service\";\r\n\r\nconst services = {\r\n map: new MapService(),\r\n mapEvent: new MapEventService(),\r\n seat: new SeatService(),\r\n channel: new ChannelService(),\r\n};\r\n\r\nexport default services;\r\n","import _ from \"underscore\";\r\n\r\nimport { Handler } from \"../../handlers\";\r\nimport { FabricEvent, FabricObject, IObjectSelector } from \"../../utils\";\r\nimport service from \"../../../../service\";\r\nimport { TooltipRowSelector } from \"../tooltip/Row\";\r\nimport store from \"../../../../redux/store\";\r\nimport {\r\n setSpinning,\r\n addSeatToSelection,\r\n removeSeatToSelection,\r\n} from \"../../../../redux/designerPropertiesSlice\";\r\n\r\nclass Row implements IObjectSelector {\r\n private handler: Handler;\r\n private targetSeat: FabricObject;\r\n\r\n constructor(handler: Handler) {\r\n this.handler = handler;\r\n }\r\n\r\n public onMouseDblClick(event: FabricEvent) {\r\n\r\n }\r\n\r\n public onHover(event: any): any {\r\n if (event.target.superType === \"seat\") {\r\n if (event.e instanceof TouchEvent)\r\n this.handler.eventHandler.panning = false;\r\n\r\n const seat = event.target;\r\n if (this.targetSeat != seat) {\r\n this.onBlur();\r\n const seatCircle = seat.item(0);\r\n this.setTooltip(event, seat);\r\n if (seat.status == \"Free\" && seat.available) {\r\n seatCircle.set({\r\n fill: `${seatCircle.stroke}90`,\r\n radius: seatCircle.radius + 0.5,\r\n });\r\n }\r\n this.targetSeat = seat;\r\n this.handler.canvas.requestRenderAll();\r\n }\r\n return this.onBlur;\r\n } else this.onBlur();\r\n }\r\n\r\n public async onSelect(event: any) {\r\n store.dispatch(setSpinning(true));\r\n await this.changeStatus(event);\r\n store.dispatch(setSpinning(false));\r\n }\r\n\r\n public async onChangeHub(valueHub: any): Promise {\r\n const {\r\n properties: { channels },\r\n } = store.getState();\r\n valueHub.seats.forEach((item: any) => {\r\n const seat = this.getSeatById(item.rowKey, item.seatKey);\r\n if (seat) {\r\n if (item.status == \"Free\" && ((item.channel?.key?? null) == null || channels.includes(item.channel?.key?? null))) {\r\n this.releaseInCanvas(seat);\r\n } else {\r\n this.holdInCanvas(seat, (item.channel?.key?? null) == null ? item.status : \"NoForSale\", valueHub.selectorKey);\r\n }\r\n if(window.redseats.responseCallback)\r\n window.redseats.responseCallback();\r\n }\r\n });\r\n }\r\n\r\n private onBlur = () => {\r\n if (this.targetSeat) {\r\n this.handler.tooltipHandler.hide();\r\n if (this.targetSeat.status == \"Free\" && this.targetSeat.available) {\r\n const seatCircle = this.targetSeat.item(0);\r\n seatCircle.set({\r\n fill: `${seatCircle.stroke}40`,\r\n radius: seatCircle.radius - 0.5,\r\n });\r\n }\r\n this.handler.canvas.requestRenderAll();\r\n this.targetSeat = null;\r\n }\r\n };\r\n\r\n private async changeStatus(event: any): Promise {\r\n if (event.target.superType == \"seat\") {\r\n console.log('changeStatus')\r\n const {\r\n properties: { selection },\r\n } = store.getState();\r\n this.handler.eventHandler.panning = false;\r\n const seat = event.target;\r\n let seatsLength = 0;\r\n if(seat.available){\r\n let category = selection.find( (select) => {\r\n return seat.category.key === select.key\r\n } );\r\n seatsLength = category.seats.length;\r\n }\r\n if (\r\n (seat.available &&\r\n seatsLength < window.redseats.maximumsSeatsSelected) ||\r\n (seat.status == \"Reserved\" && seat.isHoldByMe)\r\n ) {\r\n let isSuccessful = false;\r\n let isSelection = false;\r\n const seatModel = this.createSeatModel(event.target.id, seat);\r\n if (seat.status == \"Free\") {\r\n isSelection = true;\r\n isSuccessful = await this.changeStatusInDb([seatModel], \"Reserved\");\r\n } else if (seat.status == \"Reserved\" && seat.isHoldByMe) {\r\n seat.set({\r\n status: \"Reserved\",\r\n isHoldByMe: true,\r\n });\r\n isSuccessful = await this.changeStatusInDb([seatModel], \"Free\");\r\n }\r\n\r\n const seatCallback = this.createSeatCallback(seat);\r\n\r\n if (isSuccessful) {\r\n if (isSelection) window.redseats.onSeatSelected(seatCallback);\r\n else window.redseats.onSeatDeselected(seatCallback);\r\n } else window.redseats.onFailedSeatSelection(seatCallback);\r\n }\r\n }\r\n }\r\n\r\n private async holdInCanvas(seat: any, status: string, selectorKey: string) {\r\n const selector = JSON.parse(sessionStorage.getItem(\"rs_selector\"));\r\n const isHoldByMe: boolean = selector.key == selectorKey;\r\n const {\r\n properties: { selection },\r\n } = store.getState();\r\n seat.set({\r\n status: status,\r\n isHoldByMe: isHoldByMe,\r\n });\r\n const seatCircle = seat.item(0);\r\n const seatText = seat.item(1);\r\n const seatIcon = seat.item(2);\r\n const seatIcon2 = seat.item(3);\r\n const colorFill = seat.statusColor[status];\r\n if (isHoldByMe) {\r\n let index = 0;\r\n selection.some((category, i) => {\r\n if(category.key === seat.category.key){\r\n index = i\r\n }\r\n });\r\n store.dispatch(addSeatToSelection({index, seat: seat.id}));\r\n seatCircle.set({\r\n fill: seatCircle.stroke,\r\n hoverCursor: \"pointer\",\r\n });\r\n seatText.set({\r\n hoverCursor: \"pointer\",\r\n visible: false,\r\n });\r\n seatIcon.set({\r\n visible: true,\r\n fill: \"red\",\r\n });\r\n if (seatIcon2)\r\n seatIcon2.set({\r\n visible: false,\r\n });\r\n } else {\r\n seatCircle.set({\r\n fill: colorFill,\r\n stroke: \"#FFFFFF\",\r\n hoverCursor: \"default\",\r\n });\r\n seatText.set({\r\n hoverCursor: \"default\",\r\n visible: true,\r\n });\r\n seatIcon.set({\r\n visible: false,\r\n });\r\n if (seatIcon2)\r\n seatIcon2.set({\r\n visible: false,\r\n });\r\n }\r\n\r\n this.handler.canvas.requestRenderAll();\r\n }\r\n\r\n private async releaseInCanvas(seat: any) {\r\n const {\r\n properties: { selection },\r\n } = store.getState();\r\n seat.set({\r\n status: \"Free\",\r\n isHoldByMe: false,\r\n });\r\n const seatCircle = seat.item(0);\r\n const seatText = seat.item(1);\r\n const seatIcon = seat.item(2);\r\n const seatIcon2 = seat.item(3);\r\n let index = 0;\r\n selection.some((category, i) => {\r\n if(category.key === seat.category.key){\r\n index = i\r\n }\r\n });\r\n store.dispatch(removeSeatToSelection({index, seat: seat.id}));\r\n seatCircle.set({\r\n fill: `${seat.statusColor.Free}40`,\r\n stroke: seat.statusColor.Free,\r\n hoverCursor: \"pointer\",\r\n });\r\n seatText.set({\r\n hoverCursor: \"pointer\",\r\n visible: !seatIcon2,\r\n });\r\n seatIcon.set({\r\n visible: false,\r\n });\r\n\r\n if (seatIcon2)\r\n seatIcon2.set({\r\n visible: true,\r\n });\r\n\r\n this.handler.canvas.requestRenderAll();\r\n }\r\n\r\n private async changeStatusInDb(seats: any, status: string) {\r\n const data = {\r\n Status: status,\r\n Seats: seats,\r\n };\r\n return await service.seat.changeStatus(data);\r\n }\r\n\r\n private createSeatModel(rowKey: string, seat: any) {\r\n const seatModel = {\r\n RowKey: rowKey,\r\n SeatKey: seat.id,\r\n SeatValue: seat.value,\r\n };\r\n return seatModel;\r\n }\r\n\r\n private getSeatById(rowKey: string, seatKey: string) {\r\n const objects = this.handler.canvas.getObjects();\r\n const seat = objects.find((s: any) => s.id == seatKey);\r\n return seat;\r\n }\r\n\r\n private setTooltip(event: any, seat: any) {\r\n const show = _.partial(this.handler.tooltipHandler.show, event.e);\r\n window.redseats.responseCallback = _.partial(\r\n this.showTooltip,\r\n show,\r\n seat,\r\n this,\r\n event\r\n );\r\n\r\n const seatCallback = this.createSeatCallback(seat);\r\n window.redseats.getTooltipInfo(seatCallback);\r\n }\r\n\r\n private showTooltip(\r\n show: any,\r\n seat: any,\r\n rowInstance: any,\r\n event: any,\r\n tooltipInfo: any\r\n ) {\r\n let onSelect;\r\n if (event.e instanceof TouchEvent)\r\n onSelect = () => rowInstance.onSelect(event);\r\n\r\n window.redseats.responseCallback = _.partial(\r\n window.redseats.responseCallback,\r\n tooltipInfo\r\n );\r\n\r\n const htmlElement = TooltipRowSelector(seat, tooltipInfo, onSelect);\r\n show(htmlElement);\r\n }\r\n\r\n private createSeatCallback(seat: any) {\r\n const selector = JSON.parse(sessionStorage.getItem(\"rs_selector\"));\r\n return {\r\n value: seat.value,\r\n status: seat.status,\r\n categoryKey: seat.category.key,\r\n category: seat.category.name,\r\n selectorKey: selector.key,\r\n row: seat.rowLabel,\r\n seat: seat.label,\r\n section: seat.sectionLabel,\r\n };\r\n }\r\n}\r\nexport default Row;\r\n","import _ from \"underscore\";\r\n\r\nimport { Handler } from \"../../handlers\";\r\nimport { FabricEvent, FabricObject, IObjectSelector } from \"../../utils\";\r\n\r\nclass PolygonZone implements IObjectSelector {\r\n private handler: Handler;\r\n private targetSeat: FabricObject;\r\n\r\n constructor(handler: Handler) {\r\n this.handler = handler;\r\n }\r\n\r\n public onMouseDblClick(event: FabricEvent) {\r\n\r\n }\r\n\r\n public onHover(event: any): any {\r\n }\r\n\r\n public async onSelect(event: any) {\r\n const {target} = event;\r\n const shape = target.item(0);\r\n const text = target.item(1);\r\n shape.set({visible: false});\r\n text.set({visible: false});\r\n this.handler.activeZoneSelector = target;\r\n this.handler.zoomHandler.zoomToCenterWithObject(target, null, false);\r\n }\r\n\r\n public async onChangeHub(valueHub: any): Promise {\r\n }\r\n}\r\n\r\nexport default PolygonZone;\r\n","import Handler from \"./Handler\";\r\nimport { Row } from \"../objects/selector\";\r\nimport { IObjectSelector, FabricEvent } from \"../utils\";\r\nimport { PolygonZone } from \"../objects/selector\";\r\n\r\nclass SelectorHandler {\r\n private handler: any;\r\n private objectTypes: any;\r\n private object: IObjectSelector;\r\n public selectedType: string;\r\n\r\n private callBack: any;\r\n\r\n constructor(handler: Handler) {\r\n this.handler = handler;\r\n this.objectTypes = {\r\n row: new Row(handler),\r\n polygonZone: new PolygonZone(handler)\r\n };\r\n }\r\n\r\n public setType(type: string) {\r\n this.selectedType = type;\r\n this.object = this.objectTypes[type];\r\n }\r\n\r\n public onMousemove(event: FabricEvent) {\r\n if (event.target) {\r\n switch (event.target.superType) {\r\n case \"seat\":\r\n this.setType(\"row\");\r\n if (this.object) {\r\n this.callBack = this.object.onHover(event);\r\n } else this.onBlur();\r\n break;\r\n default:\r\n break;\r\n }\r\n }else{\r\n this.handler.selectorHandler.onBlur();\r\n }\r\n }\r\n\r\n public onMousedown(event: FabricEvent) {\r\n console.log('onMOUSEDOWN', event.target)\r\n if (event.target) {\r\n const {target: {superType} } = event;\r\n switch (superType) {\r\n case \"seat\":\r\n this.setType(\"row\");\r\n console.log('ON MOUSE DOWN SEAT')\r\n if (this.object) {\r\n if (event.e instanceof TouchEvent)\r\n this.callBack = this.object.onHover(event);\r\n else return this.object.onSelect(event);\r\n }\r\n break;\r\n case \"polygonZone\":\r\n this.setType(superType)\r\n if (this.object) {\r\n this.object.onSelect(event);\r\n }\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n public onChangeHub(valueHub: any) {\r\n if (this.object) {\r\n this.object.onChangeHub(valueHub);\r\n }\r\n }\r\n\r\n public onBlur() {\r\n if (this.callBack) {\r\n this.callBack();\r\n this.callBack = null;\r\n }\r\n }\r\n\r\n public onMouseOut(){\r\n this.handler.selectorHandler.onBlur();\r\n }\r\n}\r\n\r\nexport default SelectorHandler;\r\n","import _ from \"underscore\";\r\n\r\nimport { Handler } from \"../../handlers\";\r\nimport { FabricObject, IObjectBlocker, getSvgObject } from \"../../utils\";\r\nimport service from \"../../../../service\";\r\nimport { TooltipRowBlocker } from \"../tooltip/Row\";\r\nimport store from \"../../../../redux/store\";\r\nimport {\r\n setSpinning,\r\n} from \"../../../../redux/designerPropertiesSlice\";\r\n\r\nclass Row implements IObjectBlocker {\r\n private handler: Handler;\r\n private targetSeat: FabricObject;\r\n private forSale: any[];\r\n private noForSale: any[];\r\n\r\n constructor(handler: Handler) {\r\n this.handler = handler;\r\n this.forSale = [];\r\n this.noForSale = [];\r\n }\r\n\r\n public onHover(event: any): any {\r\n if (event.target.superType == \"seat\" ) {\r\n if (event.e instanceof TouchEvent)\r\n this.handler.eventHandler.panning = false;\r\n\r\n const seat = event.target;\r\n let seatData = seat.value.split(\"-\");\r\n seat.section = seatData[0];\r\n seat.row = seatData[1];\r\n seat.seatNumber = seatData[2];\r\n const seatCircle = seat.item(0);\r\n const seatText = seat.item(1);\r\n const seatIcon = seat.item(2);\r\n if (this.targetSeat != seat) {\r\n this.onBlur();\r\n this.setTooltip(event, seat);\r\n if (seat.status == \"Free\" && !seat.onBlocker) {\r\n seatCircle.set({\r\n fill: `${seat.statusColor[\"Free\"]}90`,\r\n radius: seatCircle.radius + 0.5,\r\n hoverCursor: \"pointer\"\r\n });\r\n seatText.set({\r\n hoverCursor: \"pointer\",\r\n });\r\n }\r\n else if (seat.status == \"NoForSale\" && seat.onBlocker) {\r\n seatCircle.set({\r\n fill: seat.statusColor[\"Free\"],\r\n radius: seatCircle.radius + 0.5,\r\n hoverCursor: \"pointer\"\r\n });\r\n seatIcon.set({\r\n hoverCursor: \"pointer\",\r\n });\r\n }\r\n else if (seat.status == \"NoForSale\" && !seat.onBlocker) {\r\n seatCircle.set({\r\n fill: `${seat.statusColor[\"Free\"]}90`,\r\n radius: seatCircle.radius + 0.5,\r\n hoverCursor: \"pointer\"\r\n });\r\n seatIcon.set({\r\n hoverCursor: \"pointer\",\r\n });\r\n }\r\n else if (seat.status == \"Free\" && seat.onBlocker) {\r\n seatCircle.set({\r\n fill: seat.statusColor[\"Free\"],\r\n radius: seatCircle.radius + 0.5,\r\n hoverCursor: \"pointer\"\r\n });\r\n seatText.set({\r\n hoverCursor: \"pointer\",\r\n });\r\n }\r\n this.targetSeat = seat;\r\n this.handler.canvas.requestRenderAll();\r\n }\r\n return this.onBlur;\r\n } else this.onBlur();\r\n }\r\n\r\n private async changeMultipleStatus(event: any): Promise {\r\n console.log('event', event)\r\n this.handler.eventHandler.panning = false;\r\n const selected = event.selected || [];\r\n let seats;\r\n if(selected.length == 0) return;\r\n if(!selected.find((seat: any) => seat.status == \"Free\" || seat.status == \"NoForSale\")) return;\r\n if(event.e.altKey){\r\n seats = selected.filter((seat: any) => seat.status == \"NoForSale\");\r\n }\r\n else{\r\n seats = selected.filter((seat: any) => seat.status == \"Free\");\r\n }\r\n console.log('seats', seats)\r\n let isSelection = false;\r\n seats.forEach((seat: any) => {\r\n const seatModel = this.createSeatModel(seat);\r\n const seatCircle = seat.item(0);\r\n const seatText = seat.item(1);\r\n const seatIcon = seat.item(2);\r\n const seatIcon2 = seat.item(3);\r\n if (seat.status == \"Free\" && !seat.onBlocker) {\r\n this.noForSale.push(seatModel);\r\n isSelection = true;\r\n seat.set({\r\n status: \"NoForSale\",\r\n onBlocker: true\r\n });\r\n seat.insertAt(getSvgObject('block', (seat._objects[0].radius*2), '#ffffff'), 2, true);\r\n seatCircle.set({\r\n fill: seatCircle.stroke,\r\n hoverCursor: \"pointer\",\r\n });\r\n seatText.set({\r\n hoverCursor: \"pointer\",\r\n visible: false,\r\n });\r\n seatIcon.set({\r\n visible: true,\r\n fill: \"red\",\r\n });\r\n\r\n if (seatIcon2)\r\n seatIcon2.set({\r\n visible: false,\r\n });\r\n\r\n this.handler.canvas.requestRenderAll();\r\n } else if (seat.status == \"NoForSale\" && seat.onBlocker) {\r\n seat.set({\r\n status: \"Free\",\r\n onBlocker: false,\r\n });\r\n this.noForSale = this.noForSale.filter(obj => seatModel.SeatKey != obj.SeatKey);\r\n seatCircle.set({\r\n fill: `${seat.statusColor.Free}40`,\r\n stroke: seat.statusColor.Free,\r\n hoverCursor: \"pointer\",\r\n });\r\n seatText.set({\r\n hoverCursor: \"pointer\",\r\n visible: !seatIcon2,\r\n });\r\n seatIcon.set({\r\n visible: false,\r\n });\r\n\r\n if (seatIcon2)\r\n seatIcon2.set({\r\n visible: true,\r\n });\r\n\r\n this.handler.canvas.requestRenderAll();\r\n }\r\n else if (seat.status == \"NoForSale\" && !seat.onBlocker) {\r\n this.forSale.push(seatModel);\r\n isSelection = true;\r\n seat.set({\r\n status: \"Free\",\r\n onBlocker: true\r\n });\r\n seat.insertAt(getSvgObject('check', (seat._objects[0].radius*2), '#ffffff'), 2, true);\r\n seatCircle.set({\r\n fill: seat.statusColor[\"Free\"],\r\n hoverCursor: \"pointer\",\r\n });\r\n seatText.set({\r\n hoverCursor: \"pointer\",\r\n visible: false,\r\n });\r\n seatIcon.set({\r\n visible: true,\r\n fill: \"red\",\r\n });\r\n\r\n if (seatIcon2)\r\n seatIcon2.set({\r\n visible: false,\r\n });\r\n\r\n this.handler.canvas.requestRenderAll();\r\n }\r\n else if (seat.status == \"Free\" && seat.onBlocker) {\r\n this.forSale = this.forSale.filter(seat => seat.SeatKey != seatModel.SeatKey);\r\n isSelection = true;\r\n seat.set({\r\n status: \"NoForSale\",\r\n onBlocker: false\r\n });\r\n seat.insertAt(getSvgObject('block', (seat._objects[0].radius*2), seatCircle.stroke), 2, true);\r\n seatCircle.set({\r\n fill: `${seatCircle.stroke}20`,\r\n strokeWidth: 0,\r\n hoverCursor: \"pointer\",\r\n });\r\n seatText.set({\r\n hoverCursor: \"pointer\",\r\n visible: false,\r\n });\r\n seatIcon.set({\r\n visible: true,\r\n fill: \"red\",\r\n });\r\n\r\n if (seatIcon2)\r\n seatIcon2.set({\r\n visible: false,\r\n });\r\n\r\n this.handler.canvas.requestRenderAll();\r\n }\r\n });\r\n this.handler.canvas.discardActiveObject();\r\n }\r\n\r\n public async onSelection(event: any){\r\n store.dispatch(setSpinning(true));\r\n await this.changeMultipleStatus(event);\r\n store.dispatch(setSpinning(false));\r\n }\r\n\r\n public async onSelect(event: any) {\r\n store.dispatch(setSpinning(true));\r\n if (event.target.superType == \"seat\") {\r\n await this.changeStatus(event);\r\n }\r\n store.dispatch(setSpinning(false));\r\n }\r\n\r\n public async onChangeHub(valueHub: any): Promise {\r\n valueHub.seats.forEach((item: any) => {\r\n const seat = this.getSeatById(item.seatKey);\r\n if (seat) {\r\n if (item.status == \"Free\") {\r\n this.releaseInCanvas(seat);\r\n }\r\n else if(item.status == \"Reserved\" || item.status == \"Booked\"){\r\n this.reserveInCanvas(seat, item.status);\r\n }\r\n else {\r\n this.holdInCanvas(seat, item.status, item.selectorKey);\r\n }\r\n }\r\n });\r\n }\r\n\r\n private onBlur = () => {\r\n if (this.targetSeat) {\r\n this.handler.tooltipHandler.hide();\r\n const seatCircle = this.targetSeat.item(0);\r\n if (this.targetSeat.status == \"Free\" && !this.targetSeat.onBlocker) {\r\n seatCircle.set({\r\n fill: `${this.targetSeat.statusColor[\"Free\"]}40`,\r\n radius: seatCircle.radius - 0.5,\r\n });\r\n }\r\n else if (this.targetSeat.status == \"NoForSale\" && this.targetSeat.onBlocker) {\r\n seatCircle.set({\r\n fill: this.targetSeat.statusColor[\"Free\"],\r\n radius: seatCircle.radius - 0.5,\r\n });\r\n }\r\n else if (this.targetSeat.status == \"NoForSale\" && !this.targetSeat.onBlocker) {\r\n const seatCircle = this.targetSeat.item(0);\r\n seatCircle.set({\r\n fill: `${this.targetSeat.statusColor[\"Free\"]}20`,\r\n radius: seatCircle.radius - 0.5,\r\n });\r\n }\r\n else if (this.targetSeat.status == \"Free\" && this.targetSeat.onBlocker) {\r\n const seatCircle = this.targetSeat.item(0);\r\n seatCircle.set({\r\n fill: this.targetSeat.statusColor[\"Free\"],\r\n radius: seatCircle.radius - 0.5,\r\n });\r\n }\r\n this.handler.canvas.requestRenderAll();\r\n this.targetSeat = null;\r\n }\r\n };\r\n\r\n private async changeStatus(event: any): Promise {\r\n this.handler.eventHandler.panning = false;\r\n const seat = event.target;\r\n let isSelection = false;\r\n const seatModel = this.createSeatModel(seat);\r\n const seatCircle = seat.item(0);\r\n const seatText = seat.item(1);\r\n const seatIcon = seat.item(2);\r\n const seatIcon2 = seat.item(3);\r\n if (seat.status == \"Free\" && !seat.onBlocker) {\r\n this.noForSale.push(seatModel);\r\n isSelection = true;\r\n seat.set({\r\n status: \"NoForSale\",\r\n onBlocker: true\r\n });\r\n seat.insertAt(getSvgObject('block', (seat._objects[0].radius*2), '#ffffff'), 2, true);\r\n seatCircle.set({\r\n fill: seatCircle.stroke,\r\n hoverCursor: \"pointer\",\r\n });\r\n seatText.set({\r\n hoverCursor: \"pointer\",\r\n visible: false,\r\n });\r\n seatIcon.set({\r\n visible: true,\r\n fill: \"red\",\r\n });\r\n\r\n if (seatIcon2)\r\n seatIcon2.set({\r\n visible: false,\r\n });\r\n\r\n this.handler.canvas.requestRenderAll();\r\n } else if (seat.status == \"NoForSale\" && seat.onBlocker) {\r\n seat.set({\r\n status: \"Free\",\r\n onBlocker: false,\r\n });\r\n this.noForSale = this.noForSale.filter(obj => seatModel.SeatKey != obj.SeatKey);\r\n seatCircle.set({\r\n fill: `${seat.statusColor.Free}40`,\r\n stroke: seat.statusColor.Free,\r\n hoverCursor: \"pointer\",\r\n });\r\n seatText.set({\r\n hoverCursor: \"pointer\",\r\n visible: !seatIcon2,\r\n });\r\n seatIcon.set({\r\n visible: false,\r\n });\r\n\r\n if (seatIcon2)\r\n seatIcon2.set({\r\n visible: true,\r\n });\r\n\r\n this.handler.canvas.requestRenderAll();\r\n }\r\n else if (seat.status == \"NoForSale\" && !seat.onBlocker) {\r\n this.forSale.push(seatModel);\r\n isSelection = true;\r\n seat.set({\r\n status: \"Free\",\r\n onBlocker: true\r\n });\r\n seat.insertAt(getSvgObject('check', (seat._objects[0].radius*2), '#ffffff'), 2, true);\r\n seatCircle.set({\r\n fill: this.targetSeat.statusColor[\"Free\"],\r\n hoverCursor: \"pointer\",\r\n });\r\n seatText.set({\r\n hoverCursor: \"pointer\",\r\n visible: false,\r\n });\r\n seatIcon.set({\r\n visible: true,\r\n fill: \"red\",\r\n });\r\n\r\n if (seatIcon2)\r\n seatIcon2.set({\r\n visible: false,\r\n });\r\n\r\n this.handler.canvas.requestRenderAll();\r\n }\r\n else if (seat.status == \"Free\" && seat.onBlocker) {\r\n this.forSale = this.forSale.filter(seat => seat.SeatKey != seatModel.SeatKey);\r\n isSelection = true;\r\n seat.set({\r\n status: \"NoForSale\",\r\n onBlocker: false\r\n });\r\n seat.insertAt(getSvgObject('block', (seat._objects[0].radius*2), seatCircle.stroke), 2, true);\r\n seatCircle.set({\r\n fill: `${seatCircle.stroke}20`,\r\n strokeWidth: 0,\r\n hoverCursor: \"pointer\",\r\n });\r\n seatText.set({\r\n hoverCursor: \"pointer\",\r\n visible: false,\r\n });\r\n seatIcon.set({\r\n visible: true,\r\n fill: \"red\",\r\n });\r\n\r\n if (seatIcon2)\r\n seatIcon2.set({\r\n visible: false,\r\n });\r\n\r\n this.handler.canvas.requestRenderAll();\r\n }\r\n this.setTooltip(event, seat);\r\n }\r\n\r\n private async reserveInCanvas(seat: any, status: string) {\r\n const seatCircle = seat.item(0);\r\n const seatText = seat.item(1);\r\n const seatIcon = seat.item(2);\r\n const seatIcon2 = seat.item(3);\r\n seat.set({\r\n status: status,\r\n onBlocker: false\r\n });\r\n seatCircle.set({\r\n fill: seat.statusColor[status],\r\n strokeWidth: 0,\r\n hoverCursor: \"pointer\",\r\n });\r\n seatText.set({\r\n hoverCursor: \"pointer\",\r\n visible: true,\r\n });\r\n seatIcon.set({\r\n visible: false,\r\n fill: \"red\",\r\n });\r\n\r\n if (seatIcon2){\r\n seatIcon2.set({\r\n visible: false,\r\n });\r\n }\r\n this.noForSale = this.noForSale.filter(seatS => seatS.SeatKey != seat.id);\r\n this.handler.canvas.requestRenderAll();\r\n }\r\n\r\n private async holdInCanvas(seat: any, status: string, selectorKey: string) {\r\n // seat.insertAt(getSvgObject('block', (seat._objects[0].radius*2), '#ffffff'), 2, true);\r\n const seatCircle = seat.item(0);\r\n const seatText = seat.item(1);\r\n const seatIcon = seat.item(2);\r\n const seatIcon2 = seat.item(3);\r\n seat.set({\r\n status: \"NoForSale\",\r\n onBlocker: false\r\n });\r\n seat.insertAt(getSvgObject('block', (seat._objects[0].radius*2), seatCircle.stroke), 2, true);\r\n // store.dispatch(addSelectedSeat(seat.id));\r\n seatCircle.set({\r\n fill: `${seatCircle.stroke}20`,\r\n strokeWidth: 0,\r\n hoverCursor: \"pointer\",\r\n });\r\n seatText.set({\r\n hoverCursor: \"pointer\",\r\n visible: false,\r\n });\r\n seatIcon.set({\r\n visible: true,\r\n fill: \"red\",\r\n });\r\n\r\n if (seatIcon2)\r\n seatIcon2.set({\r\n visible: false,\r\n });\r\n\r\n this.handler.canvas.requestRenderAll();\r\n }\r\n\r\n private async releaseInCanvas(seat: any) {\r\n // store.dispatch(removeSelectSeat(seat.id));\r\n const seatCircle = seat.item(0);\r\n const seatText = seat.item(1);\r\n const seatIcon = seat.item(2);\r\n const seatIcon2 = seat.item(3);\r\n\r\n seat.set({\r\n status: \"Free\",\r\n onBlocker: false,\r\n });\r\n seatCircle.set({\r\n fill: `${seat.statusColor.Free}40`,\r\n stroke: seat.statusColor.Free,\r\n strokeWidth: 1,\r\n hoverCursor: \"pointer\",\r\n });\r\n seatText.set({\r\n hoverCursor: \"pointer\",\r\n visible: !seatIcon2,\r\n });\r\n seatIcon.set({\r\n visible: false,\r\n });\r\n\r\n if (seatIcon2)\r\n seatIcon2.set({\r\n visible: true,\r\n });\r\n\r\n this.handler.canvas.requestRenderAll();\r\n }\r\n\r\n private async changeStatusInDb(seats: any, status: string) {\r\n const data = {\r\n Status: status,\r\n Seats: seats,\r\n };\r\n return await service.seat.changeStatus(data, true);\r\n }\r\n\r\n private createSeatModel(seat: any) {\r\n const seatModel = {\r\n SeatKey: seat.id,\r\n SeatValue: seat.value,\r\n };\r\n return seatModel;\r\n }\r\n\r\n private getSeatById(seatKey: string) {\r\n const objects = this.handler.canvas.getObjects();\r\n const seat = objects.find((s: any) => s.id == seatKey);\r\n return seat;\r\n }\r\n\r\n private setTooltip(event: any, seat: any) {\r\n let onSelect;\r\n if (event.e instanceof TouchEvent){\r\n onSelect = () => this.onSelect(event);\r\n }\r\n const htmlElement = TooltipRowBlocker(seat, onSelect);\r\n this.handler.tooltipHandler.show(event.e, htmlElement)\r\n }\r\n\r\n public async onSaveChanges(){\r\n store.dispatch(setSpinning(true));\r\n if(this.forSale.length>0){\r\n await this.changeStatusInDb(this.forSale, \"Free\");\r\n }\r\n if(this.noForSale.length>0){\r\n await this.changeStatusInDb(this.noForSale, \"NoForSale\");\r\n }\r\n this.forSale = [];\r\n this.noForSale = [];\r\n store.dispatch(setSpinning(false));\r\n }\r\n}\r\nexport default Row;\r\n","import Handler from \"./Handler\";\r\nimport { Row } from \"../objects/blocker\";\r\nimport { IObjectBlocker, FabricEvent } from \"../utils\";\r\n\r\nclass BlockerHandler {\r\n private handler: any;\r\n private objectTypes: any;\r\n private object: IObjectBlocker;\r\n public selectedType: string;\r\n\r\n private callBack: any;\r\n\r\n constructor(handler: Handler) {\r\n this.handler = handler;\r\n this.objectTypes = {\r\n row: new Row(handler),\r\n };\r\n }\r\n\r\n public setType(type: string) {\r\n this.selectedType = type;\r\n this.object = this.objectTypes[type];\r\n }\r\n\r\n public onMousemove(event: FabricEvent) {\r\n if (event.target) {\r\n this.setType(\"row\");\r\n if (this.object) {\r\n this.callBack = this.object.onHover(event);\r\n } else this.onBlur();\r\n }else{\r\n this.handler.blockerHandler.onBlur();\r\n }\r\n }\r\n\r\n public onMousedown(event: FabricEvent) {\r\n console.log('event', event)\r\n this.setType(\"row\");\r\n if (this.object) {\r\n if (this.handler.canvasEnabled) {\r\n if (event.e instanceof TouchEvent)\r\n this.callBack = this.object.onHover(event);\r\n else return this.object.onSelect(event);\r\n } else this.handler.canvasEnabled = true;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n public onChangeHub(valueHub: any) {\r\n if (this.object) {\r\n this.object.onChangeHub(valueHub);\r\n }\r\n }\r\n\r\n public onSelection(event: FabricEvent) {\r\n this.setType(\"row\");\r\n if (this.object) {\r\n if (this.handler.canvasEnabled) {\r\n if (event.e instanceof TouchEvent)\r\n return;\r\n else return this.object.onSelection(event);\r\n } else this.handler.canvasEnabled = true;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n public onBlur() {\r\n if (this.callBack) {\r\n this.callBack();\r\n this.callBack = null;\r\n }\r\n }\r\n\r\n public onMouseOut(){\r\n this.handler.blockerHandler.onBlur();\r\n }\r\n\r\n public async onSaveChanges(){\r\n this.setType(\"row\");\r\n await this.object.onSaveChanges();\r\n }\r\n}\r\n\r\nexport default BlockerHandler;\r\n","import {fabric} from \"fabric\";\r\nimport { v4 } from 'uuid';\r\n\r\nimport Handler from \"./Handler\";\r\nimport Canvas from \"../Canvas\";\r\nimport { FabricObject } from \"../utils\";\r\nimport { Circle } from \"fabric/fabric-impl\";\r\n\r\nclass UpdateSeatQuantity {\r\n handler: Handler;\r\n constructor(handler: Handler) {\r\n this.handler = handler;\r\n }\r\n updateProperty = (propertyName: string,\r\n newValue: any,\r\n allValuesForm: any,\r\n selectedItem: any,\r\n canvasRef: Canvas) => {\r\n // aqui se modifica la propiedad\r\n if( newValue > selectedItem._objects.length){\r\n let remainItems = newValue - selectedItem._objects.length;\r\n for (let index = 0; index < remainItems; index++) {\r\n let circle = new fabric.Circle({\r\n name: 'New Linear Seat',\r\n left: (selectedItem.stepX*(selectedItem._objects.length))+selectedItem.left,\r\n top: (selectedItem.stepY*(selectedItem._objects.length))+selectedItem.top,\r\n originX: 'left',\r\n originY: 'top',\r\n radius: 7.5,\r\n angle: 0,\r\n fill: '#cccccc',\r\n strokeWidth: 1,\r\n stroke: '#727272',\r\n transparentCorners: false,\r\n hasControls: selectedItem._objects[0].hasControls,\r\n hasBorders: selectedItem._objects[0].hasBorders,\r\n selectable: selectedItem._objects[0].selectable,\r\n lockMovementX: !selectedItem._objects[0].lockMovementX,\r\n lockMovementY: !selectedItem._objects[0].lockMovementY,\r\n hoverCursor: !selectedItem._objects[0].hoverCursor ? 'pointer' : 'move',\r\n })as FabricObject;\r\n circle.set({\r\n id: v4(),\r\n label: 'Label',\r\n displayedLabel: '',\r\n container: selectedItem._objects[0].container,\r\n editable: false,\r\n objectOption: selectedItem._objects[0].objectOption\r\n });\r\n selectedItem.addWithUpdate(circle);\r\n }\r\n this.handler.seatQuantity = newValue;\r\n }\r\n else{\r\n let objectToRemove = selectedItem._objects.slice(-1);\r\n selectedItem.removeWithUpdate(objectToRemove[0]);\r\n }\r\n selectedItem.setCoords();\r\n selectedItem.set(propertyName, newValue);\r\n canvasRef.canvas.requestRenderAll();\r\n const { onModified } = this.handler;\r\n if (onModified) onModified(selectedItem);\r\n }\r\n}\r\n\r\nexport default UpdateSeatQuantity;\r\n","import _ from \"underscore\";\r\n\r\nimport { Handler } from \"../../handlers\";\r\nimport { FabricObject, IObjectChannel, getSvgObject } from \"../../utils\";\r\nimport service from \"../../../../service\";\r\nimport { TooltipRowChannel } from \"../tooltip/Row\";\r\nimport store from \"../../../../redux/store\";\r\nimport { setSpinning } from \"../../../../redux/designerPropertiesSlice\";\r\nimport { useSelector, useDispatch } from \"react-redux\";\r\n\r\ninterface SeatChannelPayload{\r\n eventId: string;\r\n seatChannels: SeatChannel[]\r\n \r\n}\r\n\r\ninterface SeatChannel{\r\n channel: Channel;\r\n seats: Seat[]\r\n}\r\n\r\ninterface Seat{\r\n seatValue: string;\r\n seatKey: string;\r\n}\r\n\r\ninterface Channel{\r\n name: string;\r\n color: string;\r\n key: string;\r\n}\r\n\r\nclass Row implements IObjectChannel {\r\n private handler: Handler;\r\n private targetSeat: FabricObject;\r\n private selectedChannels: SeatChannelPayload = { seatChannels: [], eventId: '' };\r\n\r\n constructor(handler: Handler) {\r\n this.handler = handler;\r\n }\r\n\r\n public onHover(event: any): any {\r\n if (event.target.superType == \"seat\") {\r\n if (event.e instanceof TouchEvent)\r\n this.handler.eventHandler.panning = false;\r\n\r\n const seat = event.target;\r\n let seatData = seat.value.split(\"-\");\r\n seat.section = seatData[0];\r\n seat.row = seatData[1];\r\n seat.seatNumber = seatData[2];\r\n const seatCircle = seat.item(0);\r\n const seatText = seat.item(1);\r\n if (this.targetSeat != seat) {\r\n this.onBlur();\r\n this.setTooltip(event, seat);\r\n seatCircle.set({\r\n radius: seatCircle.radius + 0.5,\r\n hoverCursor: \"pointer\",\r\n });\r\n seatText.set({\r\n hoverCursor: \"pointer\",\r\n });\r\n this.targetSeat = seat;\r\n this.handler.canvas.requestRenderAll();\r\n }\r\n return this.onBlur;\r\n } else this.onBlur();\r\n }\r\n\r\n private async changeMultipleStatus(event: any): Promise {\r\n this.handler.eventHandler.panning = false;\r\n const selected = event.selected || [];\r\n if (selected.length == 0) return;\r\n selected.forEach((seat: any) => {\r\n const {\r\n properties: { selectedChannel },\r\n } = store.getState();\r\n if(selectedChannel.key === ''){\r\n return;\r\n }\r\n this.setSeat( seat, selectedChannel )\r\n });\r\n this.handler.canvas.discardActiveObject();\r\n }\r\n\r\n public async onSelection(event: any) {\r\n store.dispatch(setSpinning(true));\r\n await this.changeMultipleStatus(event);\r\n store.dispatch(setSpinning(false));\r\n }\r\n\r\n public async onSelect(event: any) {\r\n store.dispatch(setSpinning(true));\r\n if (event.target.superType == \"seat\") {\r\n await this.changeStatus(event);\r\n }\r\n store.dispatch(setSpinning(false));\r\n }\r\n\r\n public async onChangeHub(valueHub: any): Promise {\r\n console.log(\"valueHub\", valueHub)\r\n valueHub.seats.forEach((item: any) => {\r\n const seat = this.getSeatById(item.seatKey);\r\n if (seat) {\r\n this.holdInCanvas(seat, item);\r\n if(window.redseats.responseCallback)\r\n window.redseats.responseCallback();\r\n }\r\n });\r\n }\r\n\r\n private onBlur = () => {\r\n if (this.targetSeat) {\r\n this.handler.tooltipHandler.hide();\r\n const seatCircle = this.targetSeat.item(0);\r\n seatCircle.set({\r\n radius: seatCircle.radius - 0.5,\r\n });\r\n\r\n this.handler.canvas.requestRenderAll();\r\n this.targetSeat = null;\r\n }\r\n };\r\n\r\n private async changeStatus(event: any): Promise {\r\n this.handler.eventHandler.panning = false;\r\n const seat = event.target;\r\n const {\r\n properties: { selectedChannel },\r\n } = store.getState();\r\n if(selectedChannel.key === ''){\r\n return;\r\n }\r\n this.setSeat(seat, selectedChannel);\r\n\r\n this.handler.canvas.requestRenderAll();\r\n\r\n this.setTooltip(event, seat);\r\n }\r\n\r\n private async holdInCanvas(seat: any, hub: any) {\r\n const seatCircle = seat.item(0);\r\n const seatText = seat.item(1);\r\n const seatIcon = seat.item(2);\r\n const seatIcon2 = seat.item(3);\r\n \r\n\r\n if(!hub.channel.key){\r\n seatCircle.set({\r\n fill: `${seat.statusColor[\"Free\"]}40`,\r\n stroke: seat.statusColor[\"Free\"],\r\n strokeWidth: 1,\r\n hoverCursor: \"pointer\",\r\n });\r\n seat.set({\r\n channel: {}\r\n });\r\n }\r\n else{\r\n seatCircle.set({\r\n fill: hub.channel.color,\r\n stroke: hub.channel.color,\r\n strokeWidth: 1,\r\n hoverCursor: \"pointer\",\r\n });\r\n seat.set({\r\n channel: hub.channel\r\n });\r\n }\r\n\r\n \r\n seatText.set({\r\n hoverCursor: \"pointer\",\r\n visible: true,\r\n });\r\n\r\n seatIcon.set({\r\n hoverCursor: \"pointer\",\r\n visible: false,\r\n });\r\n\r\n if (seatIcon2)\r\n seatIcon2.set({\r\n visible: false,\r\n });\r\n\r\n this.handler.canvas.requestRenderAll();\r\n }\r\n\r\n private async changeStatusInDb(channels: any) {\r\n channels.eventId = window.redseats.eventKey;\r\n await service.channel.changeSeatChannels(channels);\r\n }\r\n\r\n private getSeatById(seatKey: string) {\r\n const objects = this.handler.canvas.getObjects();\r\n const seat = objects.find((s: any) => s.id == seatKey);\r\n return seat;\r\n }\r\n\r\n private setTooltip(event: any, seat: any) {\r\n let onSelect;\r\n if (event.e instanceof TouchEvent) {\r\n onSelect = () => this.onSelect(event);\r\n }\r\n const htmlElement = TooltipRowChannel(seat, onSelect);\r\n this.handler.tooltipHandler.show(event.e, htmlElement);\r\n }\r\n\r\n public async onSaveChanges() {\r\n store.dispatch(setSpinning(true));\r\n if (this.selectedChannels.seatChannels.length > 0) {\r\n let channelIndex = this.selectedChannels.seatChannels.findIndex( channel => channel.channel.key === 'sn');\r\n if(channelIndex >= 0){\r\n this.selectedChannels.seatChannels[channelIndex].channel.key = null;\r\n }\r\n await this.changeStatusInDb(this.selectedChannels);\r\n }\r\n this.selectedChannels.seatChannels = [];\r\n store.dispatch(setSpinning(false));\r\n }\r\n\r\n private addSeatChannels( seat: any ){\r\n let channelIndex = this.selectedChannels.seatChannels.findIndex( channel => channel.channel.key === seat.channel.key);\r\n if(channelIndex >= 0){\r\n this.selectedChannels.seatChannels[channelIndex].seats.push({seatValue: seat.value,\r\n seatKey:seat.id});\r\n }\r\n else{\r\n this.selectedChannels.seatChannels.push({\r\n channel: {\r\n color:seat.channel.color,\r\n key: seat.channel.key,\r\n name: seat.channel.name\r\n },\r\n seats: [{seatValue: seat.value,\r\n seatKey:seat.id}]\r\n })\r\n }\r\n }\r\n\r\n private removeSeatChannels( seat: any ){\r\n if(seat.channel){\r\n let channelIndex = this.selectedChannels.seatChannels.findIndex( channel => channel.channel.key === seat.channel.key);\r\n if(channelIndex >= 0){\r\n let seatIndex = this.selectedChannels.seatChannels[channelIndex].seats.findIndex( seatC => seatC.seatKey === seat.id );\r\n if(seatIndex >= 0){\r\n this.selectedChannels.seatChannels[channelIndex].seats.splice(seatIndex, 1);\r\n }\r\n }\r\n }\r\n }\r\n\r\n private setSeat( seat: any, selectedChannel: Channel ){\r\n this.removeSeatChannels( seat );\r\n const seatCircle = seat.item(0);\r\n const seatText = seat.item(1);\r\n const seatIcon = seat.item(2);\r\n console.log(\"selectedChannel.color\", selectedChannel.color)\r\n seatCircle.set({\r\n fill: selectedChannel.key === 'sn' ? `${seat.statusColor[\"Free\"]}40` : selectedChannel.color,\r\n stroke: selectedChannel.key === 'sn' ? seat.statusColor[\"Free\"] : selectedChannel.color,\r\n hoverCursor: \"pointer\",\r\n });\r\n seat.set({\r\n channel: {\r\n color: selectedChannel.color,\r\n name: selectedChannel.name,\r\n key: selectedChannel.key\r\n }\r\n });\r\n if(selectedChannel.key === 'sn'){\r\n seatText.set({\r\n hoverCursor: \"pointer\",\r\n visible: true,\r\n });\r\n seatIcon.set({\r\n hoverCursor: \"pointer\",\r\n visible: false,\r\n fill: \"#FFFFFF\",\r\n });\r\n }\r\n else{\r\n seatText.set({\r\n hoverCursor: \"pointer\",\r\n visible: false,\r\n });\r\n seatIcon.set({\r\n hoverCursor: \"pointer\",\r\n visible: true,\r\n fill: \"#FFFFFF\",\r\n });\r\n }\r\n this.addSeatChannels( seat );\r\n }\r\n}\r\nexport default Row;\r\n","import Handler from \"./Handler\";\r\nimport { Row } from \"../objects/channels\";\r\nimport { IObjectChannel, FabricEvent } from \"../utils\";\r\n\r\nclass ChannelHandler {\r\n private handler: any;\r\n private objectTypes: any;\r\n private object: IObjectChannel;\r\n public selectedType: string;\r\n\r\n private callBack: any;\r\n\r\n constructor(handler: Handler) {\r\n this.handler = handler;\r\n this.objectTypes = {\r\n row: new Row(handler),\r\n };\r\n }\r\n\r\n public setType(type: string) {\r\n this.selectedType = type;\r\n this.object = this.objectTypes[type];\r\n }\r\n\r\n public onMousemove(event: FabricEvent) {\r\n if (event.target) {\r\n this.setType(\"row\");\r\n if (this.object) {\r\n this.callBack = this.object.onHover(event);\r\n } else this.onBlur();\r\n }else{\r\n this.handler.channelHandler.onBlur();\r\n }\r\n }\r\n\r\n public onMousedown(event: FabricEvent) {\r\n console.log('event', event)\r\n this.setType(\"row\");\r\n if (this.object) {\r\n if (this.handler.canvasEnabled) {\r\n if (event.e instanceof TouchEvent)\r\n this.callBack = this.object.onHover(event);\r\n else return this.object.onSelect(event);\r\n } else this.handler.canvasEnabled = true;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n public onChangeHub(valueHub: any) {\r\n if (this.object) {\r\n this.object.onChangeHub(valueHub);\r\n }\r\n }\r\n\r\n public onSelection(event: FabricEvent) {\r\n this.setType(\"row\");\r\n if (this.object) {\r\n if (this.handler.canvasEnabled) {\r\n if (event.e instanceof TouchEvent)\r\n return;\r\n else return this.object.onSelection(event);\r\n } else this.handler.canvasEnabled = true;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n public onBlur() {\r\n if (this.callBack) {\r\n this.callBack();\r\n this.callBack = null;\r\n }\r\n }\r\n\r\n public onMouseOut(){\r\n this.handler.channelHandler.onBlur();\r\n }\r\n\r\n public async onSaveChanges(){\r\n this.setType(\"row\");\r\n await this.object.onSaveChanges();\r\n }\r\n}\r\n\r\nexport default ChannelHandler;\r\n","import _ from \"underscore\";\r\n\r\nimport { Handler } from \"../../handlers\";\r\nimport { FabricObject, IObjectDetail } from \"../../utils\";\r\nimport { TooltipRowDetail } from \"../tooltip/Row\";\r\nimport store from \"../../../../redux/store\";\r\n\r\nclass Row implements IObjectDetail {\r\n private handler: Handler;\r\n private targetSeat: FabricObject;\r\n\r\n constructor(handler: Handler) {\r\n this.handler = handler;\r\n }\r\n\r\n public onHover(event: any): any {\r\n if (event.target.superType === \"seat\") {\r\n if (event.e instanceof TouchEvent)\r\n this.handler.eventHandler.panning = false;\r\n\r\n const seat = event.target;\r\n if (this.targetSeat != seat) {\r\n this.onBlur();\r\n const seatCircle = seat.item(0);\r\n this.setTooltip(event, seat);\r\n if (seat.status == \"Free\" && seat.available) {\r\n seatCircle.set({\r\n fill: `${seatCircle.stroke}90`,\r\n radius: seatCircle.radius + 0.5,\r\n });\r\n }\r\n this.targetSeat = seat;\r\n this.handler.canvas.requestRenderAll();\r\n }\r\n return this.onBlur;\r\n } else this.onBlur();\r\n }\r\n\r\n public async onChangeHub(valueHub: any): Promise {\r\n const {\r\n properties: { channels },\r\n } = store.getState();\r\n\r\n valueHub.seats.forEach((item: any) => {\r\n const seat = this.getSeatById(item.rowKey, item.seatKey);\r\n if (seat) {\r\n if (item.status == \"Free\" && (valueHub.channel.key == null || channels.includes(valueHub.channel.key))) {\r\n this.releaseInCanvas(seat);\r\n } else {\r\n this.holdInCanvas(seat, valueHub.channel.key == null ? item.status : \"NoForSale\", valueHub.selectorKey);\r\n }\r\n if (window.redseats.responseCallback)\r\n window.redseats.responseCallback();\r\n }\r\n });\r\n }\r\n\r\n private onBlur = () => {\r\n if (this.targetSeat) {\r\n this.handler.tooltipHandler.hide();\r\n if (this.targetSeat.status == \"Free\" && this.targetSeat.available) {\r\n const seatCircle = this.targetSeat.item(0);\r\n seatCircle.set({\r\n fill: `${seatCircle.stroke}40`,\r\n radius: seatCircle.radius - 0.5,\r\n });\r\n }\r\n this.handler.canvas.requestRenderAll();\r\n this.targetSeat = null;\r\n }\r\n };\r\n\r\n\r\n private async holdInCanvas(seat: any, status: string, selectorKey: string) {\r\n const selector = JSON.parse(sessionStorage.getItem(\"rs_selector\"));\r\n const isHoldByMe: boolean = selector.key == selectorKey;\r\n const {\r\n properties: { selection },\r\n } = store.getState();\r\n seat.set({\r\n status: status,\r\n isHoldByMe: isHoldByMe,\r\n });\r\n const seatCircle = seat.item(0);\r\n const seatText = seat.item(1);\r\n const seatIcon = seat.item(2);\r\n const seatIcon2 = seat.item(3);\r\n const colorFill = seat.statusColor[status];\r\n if (isHoldByMe) {\r\n let index = 0;\r\n selection.some((category, i) => {\r\n if (category.key === seat.category.key) {\r\n index = i\r\n }\r\n });\r\n seatCircle.set({\r\n fill: seatCircle.stroke,\r\n hoverCursor: \"pointer\",\r\n });\r\n seatText.set({\r\n hoverCursor: \"pointer\",\r\n visible: false,\r\n });\r\n seatIcon.set({\r\n visible: true,\r\n fill: \"red\",\r\n });\r\n if (seatIcon2)\r\n seatIcon2.set({\r\n visible: false,\r\n });\r\n } else {\r\n seatCircle.set({\r\n fill: colorFill,\r\n stroke: \"#FFFFFF\",\r\n hoverCursor: \"default\",\r\n });\r\n seatText.set({\r\n hoverCursor: \"default\",\r\n visible: true,\r\n });\r\n seatIcon.set({\r\n visible: false,\r\n });\r\n if (seatIcon2)\r\n seatIcon2.set({\r\n visible: false,\r\n });\r\n }\r\n\r\n this.handler.canvas.requestRenderAll();\r\n }\r\n\r\n private async releaseInCanvas(seat: any) {\r\n const {\r\n properties: { selection },\r\n } = store.getState();\r\n seat.set({\r\n status: \"Free\",\r\n isHoldByMe: false,\r\n });\r\n const seatCircle = seat.item(0);\r\n const seatText = seat.item(1);\r\n const seatIcon = seat.item(2);\r\n const seatIcon2 = seat.item(3);\r\n let index = 0;\r\n selection.some((category, i) => {\r\n if (category.key === seat.category.key) {\r\n index = i\r\n }\r\n });\r\n seatCircle.set({\r\n fill: `${seat.statusColor.Free}40`,\r\n stroke: seat.statusColor.Free,\r\n hoverCursor: \"pointer\",\r\n });\r\n seatText.set({\r\n hoverCursor: \"pointer\",\r\n visible: !seatIcon2,\r\n });\r\n seatIcon.set({\r\n visible: false,\r\n });\r\n\r\n if (seatIcon2)\r\n seatIcon2.set({\r\n visible: true,\r\n });\r\n\r\n this.handler.canvas.requestRenderAll();\r\n }\r\n\r\n\r\n private getSeatById(rowKey: string, seatKey: string) {\r\n const objects = this.handler.canvas.getObjects();\r\n const seat = objects.find((s: any) => s.id == seatKey);\r\n return seat;\r\n }\r\n\r\n private setTooltip(event: any, seat: any) {\r\n const show = _.partial(this.handler.tooltipHandler.show, event.e);\r\n window.redseats.responseCallback = _.partial(\r\n this.showTooltip,\r\n show,\r\n seat,\r\n this,\r\n event\r\n );\r\n\r\n const seatCallback = this.createSeatCallback(seat);\r\n window.redseats.getTooltipInfo(seatCallback);\r\n }\r\n\r\n private showTooltip(\r\n show: any,\r\n seat: any,\r\n rowInstance: any,\r\n event: any,\r\n tooltipInfo: any\r\n ) {\r\n let onSelect;\r\n if (event.e instanceof TouchEvent)\r\n onSelect = () => rowInstance.onSelect(event);\r\n\r\n window.redseats.responseCallback = _.partial(\r\n window.redseats.responseCallback,\r\n tooltipInfo\r\n );\r\n\r\n const htmlElement = TooltipRowDetail(seat, tooltipInfo, onSelect);\r\n show(htmlElement);\r\n }\r\n\r\n private createSeatCallback(seat: any) {\r\n return {\r\n value: seat.value,\r\n status: seat.status,\r\n categoryKey: seat.category.key,\r\n category: seat.category.name,\r\n row: seat.rowLabel,\r\n seat: seat.label,\r\n section: seat.sectionLabel,\r\n };\r\n }\r\n}\r\nexport default Row;\r\n","import _ from \"underscore\";\r\n\r\nimport { Handler } from \"../../handlers\";\r\nimport { FabricEvent, FabricObject, IObjectSelector } from \"../../utils\";\r\n\r\nclass PolygonZone implements IObjectSelector {\r\n private handler: Handler;\r\n private targetSeat: FabricObject;\r\n\r\n constructor(handler: Handler) {\r\n this.handler = handler;\r\n }\r\n\r\n public onMouseDblClick(event: FabricEvent) {\r\n\r\n }\r\n\r\n public onHover(event: any): any {\r\n }\r\n\r\n public async onSelect(event: any) {\r\n const {target} = event;\r\n const shape = target.item(0);\r\n const text = target.item(1);\r\n shape.set({visible: false});\r\n text.set({visible: false});\r\n this.handler.activeZoneSelector = target;\r\n this.handler.zoomHandler.zoomToCenterWithObject(target, null, false);\r\n }\r\n\r\n public async onChangeHub(valueHub: any): Promise {\r\n }\r\n}\r\n\r\nexport default PolygonZone;\r\n","import Handler from \"./Handler\";\r\nimport { Row } from \"../objects/detail\";\r\nimport { IObjectSelector, FabricEvent } from \"../utils\";\r\nimport { PolygonZone } from \"../objects/detail\";\r\n\r\nclass DetailHandler {\r\n private handler: any;\r\n private objectTypes: any;\r\n private object: IObjectSelector;\r\n public selectedType: string;\r\n\r\n private callBack: any;\r\n\r\n constructor(handler: Handler) {\r\n this.handler = handler;\r\n this.objectTypes = {\r\n row: new Row(handler),\r\n polygonZone: new PolygonZone(handler)\r\n };\r\n }\r\n\r\n public setType(type: string) {\r\n this.selectedType = type;\r\n this.object = this.objectTypes[type];\r\n }\r\n\r\n public onMousemove(event: FabricEvent) {\r\n if (event.target) {\r\n switch (event.target.superType) {\r\n case \"seat\":\r\n this.setType(\"row\");\r\n if (this.object) {\r\n this.callBack = this.object.onHover(event);\r\n } else this.onBlur();\r\n break;\r\n default:\r\n break;\r\n }\r\n }else{\r\n this.handler.detailHandler.onBlur();\r\n }\r\n }\r\n\r\n public onMousedown(event: FabricEvent) {\r\n console.log('onMOUSEDOWN', event.target)\r\n if (event.target) {\r\n const {target: {superType} } = event;\r\n switch (superType) {\r\n case \"seat\":\r\n this.setType(\"row\");\r\n console.log('ON MOUSE DOWN SEAT')\r\n if (this.object) {\r\n if (event.e instanceof TouchEvent)\r\n this.callBack = this.object.onHover(event);\r\n else return this.object.onSelect(event);\r\n }\r\n break;\r\n case \"polygonZone\":\r\n this.setType(superType)\r\n if (this.object) {\r\n this.object.onSelect(event);\r\n }\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n return false;\r\n }\r\n\r\n public onChangeHub(valueHub: any) {\r\n if (this.object) {\r\n this.object.onChangeHub(valueHub);\r\n }\r\n }\r\n\r\n public onBlur() {\r\n if (this.callBack) {\r\n this.callBack();\r\n this.callBack = null;\r\n }\r\n }\r\n\r\n public onMouseOut(){\r\n this.handler.detailHandler.onBlur();\r\n }\r\n}\r\n\r\nexport default DetailHandler;\r\n","import { fabric } from 'fabric';\r\n\r\nimport {\r\n\tArrow,\r\n\tGif,\r\n\tChart,\r\n\tElement,\r\n\tIframe,\r\n\tVideo,\r\n\tNode,\r\n\tLink,\r\n\tCurvedLink,\r\n\tOrthogonalLink,\r\n\tLine,\r\n\tCube,\r\n} from './objects/fabric';\r\nimport { FabricObject } from './utils';\r\nimport { Code } from './objects/fabric/Element';\r\nimport Svg, { SvgOption } from './objects/fabric/Svg';\r\n\r\nexport interface ObjectSchema {\r\n\tcreate: (...option: any) => fabric.Object;\r\n}\r\n\r\nexport interface CanvasObjectSchema {\r\n\t[key: string]: ObjectSchema;\r\n}\r\n\r\nexport const createCanvasObject = (objectSchema: CanvasObjectSchema) => objectSchema;\r\n\r\nconst CanvasObject: CanvasObjectSchema = {\r\n\tgroup: {\r\n\t\tcreate: ({ objects, ...option }: { objects: FabricObject[] }) => new fabric.Group(objects, option),\r\n\t},\r\n\t'i-text': {\r\n\t\tcreate: ({ text, ...option }: { text: string }) => new fabric.IText(text, option),\r\n\t},\r\n\ttext: {\r\n\t\tcreate: ({ text, ...option }: { text: string }) => new fabric.Text(text, option),\r\n\t},\r\n\ttextbox: {\r\n\t\tcreate: ({ text, ...option }: { text: string }) => new fabric.Textbox(text, option),\r\n\t},\r\n\ttriangle: {\r\n\t\tcreate: (option: any) => new fabric.Triangle(option),\r\n\t},\r\n\tellipse: {\r\n\t\tcreate: (option: any) => new fabric.Ellipse(option),\r\n\t},\r\n\tcircle: {\r\n\t\tcreate: (option: any) => new fabric.Circle(option),\r\n\t},\r\n\trect: {\r\n\t\tcreate: (option: any) => new fabric.Rect(option),\r\n\t},\r\n\tcube: {\r\n\t\tcreate: (option: any) => new Cube(option),\r\n\t},\r\n\timage: {\r\n\t\tcreate: ({ element = new Image(), ...option }) =>\r\n\t\t\tnew fabric.Image(element, {\r\n\t\t\t\t...option,\r\n\t\t\t\tcrossOrigin: 'anonymous',\r\n\t\t\t}),\r\n\t},\r\n\tpolygon: {\r\n\t\tcreate: ({ points, ...option }: { points: any }) =>\r\n\t\t\tnew fabric.Polygon(points, {\r\n\t\t\t\t...option,\r\n\t\t\t\tperPixelTargetFind: true,\r\n\t\t\t}),\r\n\t},\r\n\tline: {\r\n\t\tcreate: ({ points, ...option }: { points: any }) => new Line(points, option),\r\n\t},\r\n\tarrow: {\r\n\t\tcreate: ({ points, ...option }: { points: any }) => new Arrow(points, option),\r\n\t},\r\n\tchart: {\r\n\t\tcreate: (option: any) =>\r\n\t\t\tnew Chart(\r\n\t\t\t\toption.chartOption || {\r\n\t\t\t\t\txAxis: {},\r\n\t\t\t\t\tyAxis: {},\r\n\t\t\t\t\tseries: [\r\n\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\ttype: 'line',\r\n\t\t\t\t\t\t\tdata: [\r\n\t\t\t\t\t\t\t\t[0, 1],\r\n\t\t\t\t\t\t\t\t[1, 2],\r\n\t\t\t\t\t\t\t\t[2, 3],\r\n\t\t\t\t\t\t\t\t[3, 4],\r\n\t\t\t\t\t\t\t],\r\n\t\t\t\t\t\t},\r\n\t\t\t\t\t],\r\n\t\t\t\t},\r\n\t\t\t\toption,\r\n\t\t\t),\r\n\t},\r\n\telement: {\r\n\t\tcreate: ({ code, ...option }: { code: Code }) => new Element(code, option),\r\n\t},\r\n\tiframe: {\r\n\t\tcreate: ({ src, ...option }: { src: string }) => new Iframe(src, option),\r\n\t},\r\n\tvideo: {\r\n\t\tcreate: ({ src, file, ...option }: { src: string; file: File }) => new Video(src || file, option),\r\n\t},\r\n\tgif: {\r\n\t\tcreate: (option: any) => new Gif(option),\r\n\t},\r\n\tnode: {\r\n\t\tcreate: (option: any) => new Node(option),\r\n\t},\r\n\tlink: {\r\n\t\tcreate: (fromNode, fromPort, toNode, toPort, option) => new Link(fromNode, fromPort, toNode, toPort, option),\r\n\t},\r\n\tcurvedLink: {\r\n\t\tcreate: (fromNode, fromPort, toNode, toPort, option) =>\r\n\t\t\tnew CurvedLink(fromNode, fromPort, toNode, toPort, option),\r\n\t},\r\n\torthogonalLink: {\r\n\t\tcreate: (fromNode, fromPort, toNode, toPort, option) =>\r\n\t\t\tnew OrthogonalLink(fromNode, fromPort, toNode, toPort, option),\r\n\t},\r\n\tsvg: {\r\n\t\tcreate: (option: SvgOption) => new Svg(option),\r\n\t},\r\n};\r\n\r\nexport default CanvasObject;\r\n","import { fabric } from \"fabric\";\r\nimport warning from \"warning\";\r\nimport { v4 } from \"uuid\";\r\nimport { union } from \"lodash\";\r\n\r\nimport {\r\n ElementHandler,\r\n ImageHandler,\r\n ChartHandler,\r\n CropHandler,\r\n AnimationHandler,\r\n ContextmenuHandler,\r\n TooltipHandler,\r\n ZoomHandler,\r\n WorkareaHandler,\r\n TransactionHandler,\r\n LinkHandler,\r\n AlignmentHandler,\r\n GuidelineHandler,\r\n GridHandler,\r\n PortHandler,\r\n NodeHandler,\r\n EventHandler,\r\n DrawingHandler,\r\n PreviewHandler,\r\n InteractionHandler,\r\n ShortcutHandler,\r\n SelectorHandler,\r\n BlockerHandler,\r\n ChannelHandler,\r\n DetailHandler,\r\n UpdateSeatQuantity,\r\n} from \".\";\r\n\r\nimport {\r\n FabricObject,\r\n FabricImage,\r\n WorkareaObject,\r\n WorkareaOption,\r\n InteractionMode,\r\n CustomObjectType,\r\n CanvasOption,\r\n GridOption,\r\n GuidelineOption,\r\n KeyEvent,\r\n FabricObjectOption,\r\n FabricElement,\r\n FabricCanvas,\r\n FabricGroup,\r\n FabricObjects,\r\n} from \"../utils\";\r\nimport CanvasObject from \"../CanvasObject\";\r\nimport { NodeObject } from \"../objects/fabric/Node\";\r\nimport { TransactionEvent } from \"./TransactionHandler\";\r\nimport { LinkObject } from \"../objects/fabric/Link\";\r\nimport { PortObject } from \"../objects/fabric/Port\";\r\nimport { LinkOption } from \"./LinkHandler\";\r\nimport { defaults } from \"../constants\";\r\nimport { clone } from \"underscore\";\r\n\r\nexport interface HandlerCallback {\r\n /**\r\n * When has been added object in Canvas, Called function\r\n *\r\n */\r\n onAdd?: (object: FabricObject) => void;\r\n /**\r\n * Return contextmenu element\r\n *\r\n */\r\n onContext?: (\r\n el: HTMLDivElement,\r\n e: React.MouseEvent,\r\n target?: FabricObject\r\n ) => Promise | any;\r\n /**\r\n * Return tooltip element\r\n *\r\n */\r\n onTooltip?: (target?: FabricObject) => Promise | any;\r\n /**\r\n * When zoom, Called function\r\n */\r\n onZoom?: (zoomRatio: number) => void;\r\n /**\r\n * When clicked object, Called function\r\n *\r\n */\r\n onClick?: (canvas: FabricCanvas, target: FabricObject) => void;\r\n /**\r\n * When double clicked object, Called function\r\n *\r\n */\r\n onDblClick?: (canvas: FabricCanvas, target: FabricObject) => void;\r\n /**\r\n * When modified object, Called function\r\n */\r\n onModified?: (target: FabricObject) => void;\r\n /**\r\n * When select object, Called function\r\n *\r\n */\r\n onSelect?: (target: FabricObject) => void;\r\n /**\r\n * When has been removed object in Canvas, Called function\r\n *\r\n */\r\n onRemove?: (target: FabricObject) => void;\r\n /**\r\n * When has been undo or redo, Called function\r\n *\r\n */\r\n onTransaction?: (transaction: TransactionEvent) => void;\r\n /**\r\n * When has been changed interaction mode, Called function\r\n *\r\n */\r\n onInteraction?: (interactionMode: InteractionMode) => void;\r\n /**\r\n * When canvas has been loaded\r\n *\r\n */\r\n onLoad?: (handler: Handler, canvas?: fabric.Canvas) => void;\r\n\r\n onZone?: (exited: boolean) => void;\r\n}\r\n\r\nexport interface HandlerOption {\r\n /**\r\n * Canvas id\r\n * @type {string}\r\n */\r\n id?: string;\r\n /**\r\n * Canvas object\r\n * @type {FabricCanvas}\r\n */\r\n canvas?: FabricCanvas;\r\n /**\r\n * Canvas parent element\r\n * @type {HTMLDivElement}\r\n */\r\n container?: HTMLDivElement;\r\n /**\r\n * Canvas editable\r\n * @type {boolean}\r\n */\r\n editable?: boolean;\r\n /**\r\n * Canvas interaction mode\r\n * @type {InteractionMode}\r\n */\r\n interactionMode?: InteractionMode;\r\n /**\r\n * Persist properties for object\r\n * @type {string[]}\r\n */\r\n propertiesToInclude?: string[];\r\n /**\r\n * Minimum zoom ratio\r\n * @type {number}\r\n */\r\n minZoom?: number;\r\n /**\r\n * Maximum zoom ratio\r\n * @type {number}\r\n */\r\n maxZoom?: number;\r\n /**\r\n * Workarea option\r\n * @type {WorkareaOption}\r\n */\r\n workareaOption?: WorkareaOption;\r\n /**\r\n * Canvas option\r\n * @type {CanvasOption}\r\n */\r\n canvasOption?: CanvasOption;\r\n /**\r\n * Grid option\r\n * @type {GridOption}\r\n */\r\n gridOption?: GridOption;\r\n /**\r\n * Default option for Fabric Object\r\n * @type {FabricObjectOption}\r\n */\r\n objectOption?: FabricObjectOption;\r\n /**\r\n * Guideline option\r\n * @type {GuidelineOption}\r\n */\r\n guidelineOption?: GuidelineOption;\r\n /**\r\n * Whether to use zoom\r\n * @type {boolean}\r\n */\r\n zoomEnabled?: boolean;\r\n /**\r\n * ActiveSelection option\r\n * @type {Partial>}\r\n */\r\n activeSelectionOption?: Partial>;\r\n /**\r\n * Canvas width\r\n * @type {number}\r\n */\r\n width?: number;\r\n /**\r\n * Canvas height\r\n * @type {number}\r\n */\r\n height?: number;\r\n /**\r\n * Keyboard event in Canvas\r\n * @type {KeyEvent}\r\n */\r\n keyEvent?: KeyEvent;\r\n /**\r\n * Append custom objects\r\n * @type {{ [key: string]: any }}\r\n */\r\n fabricObjects?: FabricObjects;\r\n [key: string]: any;\r\n}\r\n\r\nexport type HandlerOptions = HandlerOption & HandlerCallback;\r\n\r\n/**\r\n * Main handler for Canvas\r\n * @class Handler\r\n * @implements {HandlerOptions}\r\n */\r\nclass Handler implements HandlerOptions {\r\n public id: string;\r\n public canvas: FabricCanvas;\r\n public workarea: WorkareaObject;\r\n public container: HTMLDivElement;\r\n public editable: boolean;\r\n public enablePanning: boolean;\r\n public interactionMode: InteractionMode;\r\n public selectedObject: CustomObjectType;\r\n public minZoom: number;\r\n public maxZoom: number;\r\n public propertiesToInclude?: string[] = defaults.propertiesToInclude;\r\n public workareaOption?: WorkareaOption = defaults.workareaOption;\r\n public canvasOption?: CanvasOption = defaults.canvasOption;\r\n public gridOption?: GridOption = defaults.gridOption;\r\n public objectOption?: FabricObjectOption = defaults.objectOption;\r\n public guidelineOption?: GuidelineOption = defaults.guidelineOption;\r\n public keyEvent?: KeyEvent = defaults.keyEvent;\r\n public activeSelectionOption?: Partial<\r\n FabricObjectOption\r\n > = defaults.activeSelectionOption;\r\n public fabricObjects?: FabricObjects = CanvasObject;\r\n public zoomEnabled?: boolean;\r\n public canvasEnabled?: boolean;\r\n public width?: number;\r\n public height?: number;\r\n\r\n public onAdd?: (object: FabricObject) => void;\r\n public onContext?: (\r\n el: HTMLDivElement,\r\n e: React.MouseEvent,\r\n target?: FabricObject\r\n ) => Promise;\r\n public onTooltip?: (target?: FabricObject) => Promise;\r\n public onZoom?: (zoomRatio: number) => void;\r\n public onClick?: (canvas: FabricCanvas, target: FabricObject) => void;\r\n public onDblClick?: (canvas: FabricCanvas, target: FabricObject) => void;\r\n public onModified?: (target: FabricObject) => void;\r\n public onSelect?: (target: FabricObject) => void;\r\n public onRemove?: (target: FabricObject) => void;\r\n public onTransaction?: (transaction: TransactionEvent) => void;\r\n public onInteraction?: (interactionMode: InteractionMode) => void;\r\n public onLoad?: (handler: Handler, canvas?: fabric.Canvas) => void;\r\n public onZone?: (exited: boolean) => void;\r\n\r\n public imageHandler: ImageHandler;\r\n public chartHandler: ChartHandler;\r\n public elementHandler: ElementHandler;\r\n public cropHandler: CropHandler;\r\n public animationHandler: AnimationHandler;\r\n public contextmenuHandler: ContextmenuHandler;\r\n public tooltipHandler: TooltipHandler;\r\n public zoomHandler: ZoomHandler;\r\n public workareaHandler: WorkareaHandler;\r\n public interactionHandler: InteractionHandler;\r\n public transactionHandler: TransactionHandler;\r\n public gridHandler: GridHandler;\r\n public portHandler: PortHandler;\r\n public linkHandler: LinkHandler;\r\n public nodeHandler: NodeHandler;\r\n public alignmentHandler: AlignmentHandler;\r\n public guidelineHandler: GuidelineHandler;\r\n public eventHandler: EventHandler;\r\n public drawingHandler: DrawingHandler;\r\n public previewHandler: PreviewHandler;\r\n public shortcutHandler: ShortcutHandler;\r\n public selectorHandler: SelectorHandler;\r\n public blockerHandler: BlockerHandler;\r\n public channelHandler: ChannelHandler;\r\n public detailHandler: DetailHandler;\r\n public updateSeatQuantity: UpdateSeatQuantity;\r\n\r\n public objectMap: Record = {};\r\n public objects: FabricObject[];\r\n public activeLine?: any;\r\n public activeShape?: any;\r\n public isZoneActive?: boolean = false;\r\n public activeShapePolygon?: any;\r\n public activeZone?: any;\r\n public activeZoneSelector?: any;\r\n public zoom = 1;\r\n public selectedTarget?: FabricObject;\r\n public pointArray: any[];\r\n public lineArray: any[];\r\n public isCut = false;\r\n public isDown = false; ///\r\n public objText?: any; ///\r\n public objIcon?: any; ///\r\n public originPointer?: any; ///\r\n public seatQuantity = 0;\r\n public group?: FabricGroup; ///\r\n public rowGroup?: FabricGroup; ///\r\n public seatGroup?: FabricGroup; ///\r\n public previewGroup?: FabricGroup; ///\r\n private isRequsetAnimFrame = false;\r\n private requestFrame: any;\r\n /**\r\n * Copied object\r\n *\r\n * @private\r\n * @type {*}\r\n */\r\n private clipboard: any;\r\n\r\n constructor(options: HandlerOptions) {\r\n this.initialize(options);\r\n }\r\n\r\n /**\r\n * Initialize handler\r\n *\r\n * @author salgum1114\r\n * @param {HandlerOptions} options\r\n */\r\n public initialize(options: HandlerOptions) {\r\n this.initOption(options);\r\n this.initCallback(options);\r\n this.initHandler();\r\n }\r\n\r\n /**\r\n * Init class fields\r\n * @param {HandlerOptions} options\r\n */\r\n public initOption = (options: HandlerOptions) => {\r\n this.id = options.id;\r\n this.canvas = options.canvas;\r\n this.container = options.container;\r\n this.editable = options.editable;\r\n this.interactionMode = options.interactionMode;\r\n this.minZoom = options.minZoom;\r\n this.maxZoom = options.maxZoom;\r\n this.zoomEnabled = options.zoomEnabled;\r\n this.width = options.width;\r\n this.height = options.height;\r\n this.enablePanning = options.enablePanning;\r\n this.objects = [];\r\n this.setPropertiesToInclude(options.propertiesToInclude);\r\n this.setWorkareaOption(options.workareaOption);\r\n this.setCanvasOption(options.canvasOption);\r\n this.setGridOption(options.gridOption);\r\n this.setObjectOption(options.objectOption);\r\n this.setFabricObjects(options.fabricObjects);\r\n this.setGuidelineOption(options.guidelineOption);\r\n this.setActiveSelectionOption(options.activeSelectionOption);\r\n this.setKeyEvent(options.keyEvent);\r\n };\r\n\r\n /**\r\n * Initialize callback\r\n * @param {HandlerOptions} options\r\n */\r\n public initCallback = (options: HandlerOptions) => {\r\n this.onAdd = options.onAdd;\r\n this.onTooltip = options.onTooltip;\r\n this.onZoom = options.onZoom;\r\n this.onContext = options.onContext;\r\n this.onClick = options.onClick;\r\n this.onModified = options.onModified;\r\n this.onDblClick = options.onDblClick;\r\n this.onSelect = options.onSelect;\r\n this.onRemove = options.onRemove;\r\n this.onTransaction = options.onTransaction;\r\n this.onInteraction = options.onInteraction;\r\n this.onLoad = options.onLoad;\r\n this.onZone = options.onZone;\r\n };\r\n\r\n /**\r\n * Initialize handlers\r\n *\r\n */\r\n public initHandler = () => {\r\n this.workareaHandler = new WorkareaHandler(this);\r\n this.imageHandler = new ImageHandler(this);\r\n this.chartHandler = new ChartHandler(this);\r\n this.elementHandler = new ElementHandler(this);\r\n this.cropHandler = new CropHandler(this);\r\n this.animationHandler = new AnimationHandler(this);\r\n this.contextmenuHandler = new ContextmenuHandler(this);\r\n this.tooltipHandler = new TooltipHandler(this);\r\n this.zoomHandler = new ZoomHandler(this);\r\n this.interactionHandler = new InteractionHandler(this);\r\n this.transactionHandler = new TransactionHandler(this);\r\n this.gridHandler = new GridHandler(this);\r\n this.portHandler = new PortHandler(this);\r\n this.linkHandler = new LinkHandler(this);\r\n this.nodeHandler = new NodeHandler(this);\r\n this.alignmentHandler = new AlignmentHandler(this);\r\n this.guidelineHandler = new GuidelineHandler(this);\r\n this.eventHandler = new EventHandler(this);\r\n this.drawingHandler = new DrawingHandler(this);\r\n this.previewHandler = new PreviewHandler(this);\r\n this.shortcutHandler = new ShortcutHandler(this);\r\n this.selectorHandler = new SelectorHandler(this);\r\n this.blockerHandler = new BlockerHandler(this);\r\n this.channelHandler = new ChannelHandler(this);\r\n this.detailHandler = new DetailHandler(this);\r\n this.updateSeatQuantity = new UpdateSeatQuantity(this); ///\r\n };\r\n\r\n /**\r\n * Get primary object\r\n * @returns {FabricObject[]}\r\n */\r\n public getObjects = (): FabricObject[] => {\r\n const objects = this.canvas.getObjects().filter((obj: FabricObject) => {\r\n if (obj.id === \"workarea\") {\r\n return false;\r\n } else if (obj.id === \"grid\") {\r\n return false;\r\n } else if (obj.superType === \"port\") {\r\n return false;\r\n } else if (!obj.id) {\r\n return false;\r\n }\r\n return true;\r\n }) as FabricObject[];\r\n if (objects.length) {\r\n objects.forEach((obj) => (this.objectMap[obj.id] = obj));\r\n } else {\r\n this.objectMap = {};\r\n }\r\n return objects;\r\n };\r\n\r\n /**\r\n * Set key pair\r\n * @param {keyof FabricObject} key\r\n * @param {*} value\r\n * @returns\r\n */\r\n public set = (key: keyof FabricObject, value: any) => {\r\n const activeObject = this.canvas.getActiveObject() as any;\r\n if (!activeObject) {\r\n return;\r\n }\r\n activeObject.set(key, value);\r\n activeObject.setCoords();\r\n this.canvas.requestRenderAll();\r\n const { id, superType, type, player, width, height } = activeObject as any;\r\n if (superType === \"element\") {\r\n if (key === \"visible\") {\r\n if (value) {\r\n activeObject.element.style.display = \"block\";\r\n } else {\r\n activeObject.element.style.display = \"none\";\r\n }\r\n }\r\n const el = this.elementHandler.findById(id);\r\n // update the element\r\n this.elementHandler.setScaleOrAngle(el, activeObject);\r\n this.elementHandler.setSize(el, activeObject);\r\n this.elementHandler.setPosition(el, activeObject);\r\n if (type === \"video\" && player) {\r\n player.setPlayerSize(width, height);\r\n }\r\n }\r\n const { onModified } = this;\r\n if (onModified) {\r\n onModified(activeObject);\r\n }\r\n };\r\n\r\n /**\r\n * Set option\r\n * @param {Partial} option\r\n * @returns\r\n */\r\n public setObject = (option: Partial) => {\r\n const activeObject = this.canvas.getActiveObject() as any;\r\n if (!activeObject) {\r\n return;\r\n }\r\n Object.keys(option).forEach((key) => {\r\n if (option[key] !== activeObject[key]) {\r\n activeObject.set(key, option[key]);\r\n activeObject.setCoords();\r\n }\r\n });\r\n this.canvas.requestRenderAll();\r\n const { id, superType, type, player, width, height } = activeObject;\r\n if (superType === \"element\") {\r\n if (\"visible\" in option) {\r\n if (option.visible) {\r\n activeObject.element.style.display = \"block\";\r\n } else {\r\n activeObject.element.style.display = \"none\";\r\n }\r\n }\r\n const el = this.elementHandler.findById(id);\r\n // update the element\r\n this.elementHandler.setScaleOrAngle(el, activeObject);\r\n this.elementHandler.setSize(el, activeObject);\r\n this.elementHandler.setPosition(el, activeObject);\r\n if (type === \"video\" && player) {\r\n player.setPlayerSize(width, height);\r\n }\r\n }\r\n const { onModified } = this;\r\n if (onModified) {\r\n onModified(activeObject);\r\n }\r\n };\r\n\r\n /**\r\n * Set key pair by object\r\n * @param {FabricObject} obj\r\n * @param {string} key\r\n * @param {*} value\r\n * @returns\r\n */\r\n public setByObject = (obj: any, key: string, value: any) => {\r\n if (!obj) {\r\n return;\r\n }\r\n obj.set(key, value);\r\n obj.setCoords();\r\n this.canvas.renderAll();\r\n const { id, superType, type, player, width, height } = obj as any;\r\n if (superType === \"element\") {\r\n if (key === \"visible\") {\r\n if (value) {\r\n obj.element.style.display = \"block\";\r\n } else {\r\n obj.element.style.display = \"none\";\r\n }\r\n }\r\n const el = this.elementHandler.findById(id);\r\n // update the element\r\n this.elementHandler.setScaleOrAngle(el, obj);\r\n this.elementHandler.setSize(el, obj);\r\n this.elementHandler.setPosition(el, obj);\r\n if (type === \"video\" && player) {\r\n player.setPlayerSize(width, height);\r\n }\r\n }\r\n const { onModified } = this;\r\n if (onModified) {\r\n onModified(obj);\r\n }\r\n };\r\n\r\n /**\r\n * Set key pair by id\r\n * @param {string} id\r\n * @param {string} key\r\n * @param {*} value\r\n */\r\n public setById = (id: string, key: string, value: any) => {\r\n const findObject = this.findById(id);\r\n this.setByObject(findObject, key, value);\r\n };\r\n\r\n /**\r\n * Set partial by object\r\n * @param {FabricObject} obj\r\n * @param {FabricObjectOption} option\r\n * @returns\r\n */\r\n public setByPartial = (obj: FabricObject, option: FabricObjectOption) => {\r\n if (!obj) {\r\n return;\r\n }\r\n obj.set(option);\r\n obj.setCoords();\r\n this.canvas.renderAll();\r\n const { id, superType, type, player, width, height } = obj as any;\r\n if (superType === \"element\") {\r\n if (\"visible\" in option) {\r\n if (option.visible) {\r\n obj.element.style.display = \"block\";\r\n } else {\r\n obj.element.style.display = \"none\";\r\n }\r\n }\r\n const el = this.elementHandler.findById(id);\r\n // update the element\r\n this.elementHandler.setScaleOrAngle(el, obj);\r\n this.elementHandler.setSize(el, obj);\r\n this.elementHandler.setPosition(el, obj);\r\n if (type === \"video\" && player) {\r\n player.setPlayerSize(width, height);\r\n }\r\n }\r\n };\r\n\r\n /**\r\n * Set shadow\r\n * @param {fabric.Shadow} option\r\n * @returns\r\n */\r\n public setShadow = (option: fabric.IShadowOptions) => {\r\n const activeObject = this.canvas.getActiveObject() as FabricObject;\r\n if (!activeObject) {\r\n return;\r\n }\r\n activeObject.setShadow(option as fabric.Shadow);\r\n this.canvas.requestRenderAll();\r\n const { onModified } = this;\r\n if (onModified) {\r\n onModified(activeObject);\r\n }\r\n };\r\n\r\n /**\r\n * Set the image\r\n * @param {FabricImage} obj\r\n * @param {(File | string)} [source]\r\n * @returns\r\n */\r\n public setImage = (obj: FabricImage, source?: File | string) => {\r\n if (!source) {\r\n this.loadImage(obj, null);\r\n obj.set(\"file\", null);\r\n obj.set(\"src\", null);\r\n return;\r\n }\r\n if (source instanceof File) {\r\n const reader = new FileReader();\r\n reader.onload = () => {\r\n this.loadImage(obj, reader.result as string);\r\n obj.set(\"file\", source);\r\n obj.set(\"src\", null);\r\n };\r\n reader.readAsDataURL(source);\r\n } else {\r\n this.loadImage(obj, source);\r\n obj.set(\"file\", null);\r\n obj.set(\"src\", source);\r\n }\r\n };\r\n\r\n /**\r\n * Set image by id\r\n * @param {string} id\r\n * @param {*} source\r\n */\r\n public setImageById = (id: string, source: any) => {\r\n const findObject = this.findById(id) as FabricImage;\r\n this.setImage(findObject, source);\r\n };\r\n\r\n /**\r\n * Set visible\r\n * @param {boolean} [visible]\r\n * @returns\r\n */\r\n public setVisible = (visible?: boolean) => {\r\n const activeObject = this.canvas.getActiveObject() as FabricElement;\r\n if (!activeObject) {\r\n return;\r\n }\r\n if (activeObject.superType === \"element\") {\r\n if (visible) {\r\n activeObject.element.style.display = \"block\";\r\n } else {\r\n activeObject.element.style.display = \"none\";\r\n }\r\n }\r\n activeObject.set({\r\n visible,\r\n });\r\n this.canvas.renderAll();\r\n };\r\n\r\n /**\r\n * Set the position on Object\r\n *\r\n * @param {FabricObject} obj\r\n * @param {boolean} [centered]\r\n */\r\n public centerObject = (obj: FabricObject, centered?: boolean) => {\r\n if (centered) {\r\n this.canvas.centerObject(obj);\r\n obj.setCoords();\r\n } else {\r\n this.setByPartial(obj, {\r\n left:\r\n obj.left / this.canvas.getZoom() -\r\n obj.width / 2 -\r\n this.canvas.viewportTransform[4] / this.canvas.getZoom(),\r\n top:\r\n obj.top / this.canvas.getZoom() -\r\n obj.height / 2 -\r\n this.canvas.viewportTransform[5] / this.canvas.getZoom(),\r\n });\r\n }\r\n };\r\n\r\n /**\r\n * Add object\r\n * @param {FabricObjectOption} obj\r\n * @param {boolean} [centered=true]\r\n * @param {boolean} [loaded=false]\r\n * @returns\r\n */\r\n public add = (\r\n obj: FabricObjectOption,\r\n centered = true,\r\n loaded = false,\r\n isSubtarget = false\r\n ) => {\r\n const { editable, onAdd, gridOption, objectOption } = this;\r\n const option: any = {\r\n hasControls: editable,\r\n hasBorders: editable,\r\n selectable: editable,\r\n lockMovementX: !editable,\r\n lockMovementY: !editable,\r\n hoverCursor: !editable ? obj.hoverCursor ?? \"default\" : \"move\",\r\n };\r\n\r\n if (obj.type === \"i-text\") {\r\n option.editable = false;\r\n } else {\r\n option.editable = editable;\r\n }\r\n if (editable && this.workarea.layout === \"fullscreen\") {\r\n option.scaleX = this.workarea.scaleX;\r\n option.scaleY = this.workarea.scaleY;\r\n }\r\n const newOption = Object.assign(\r\n {},\r\n objectOption,\r\n obj,\r\n {\r\n container: this.container.id,\r\n editable,\r\n },\r\n option\r\n );\r\n\r\n let createdObj: any;\r\n // Create canvas object\r\n if (obj.type === \"image\") {\r\n createdObj = this.addImage(newOption);\r\n } else if (obj.type === \"group\") {\r\n const objects = this.addGroup(newOption, centered, loaded);\r\n const groupOption = Object.assign({}, newOption, {\r\n objects,\r\n name: \"New Group\",\r\n });\r\n createdObj = this.fabricObjects[obj.type].create(groupOption);\r\n } else {\r\n createdObj = this.fabricObjects[obj.type].create(newOption);\r\n }\r\n\r\n if (!isSubtarget) {\r\n this.canvas.add(createdObj);\r\n if (!editable && !(obj.superType === \"element\")) {\r\n createdObj.on(\"mousedown\", this.eventHandler.object.mousedown);\r\n }\r\n if (createdObj.dblclick) {\r\n createdObj.on(\"mousedblclick\", this.eventHandler.object.mousedblclick);\r\n }\r\n }\r\n\r\n this.objects = this.getObjects();\r\n if (this.objects.some((object) => object.type === \"gif\")) {\r\n this.startRequestAnimFrame();\r\n } else {\r\n this.stopRequestAnimFrame();\r\n }\r\n if (createdObj.superType === \"node\") {\r\n this.portHandler.create(createdObj as NodeObject);\r\n if (createdObj.iconButton) {\r\n this.canvas.add(createdObj.iconButton);\r\n }\r\n }\r\n if (!editable && createdObj.animation && createdObj.animation.autoplay) {\r\n this.animationHandler.play(createdObj.id);\r\n }\r\n if (createdObj.superType === \"node\") {\r\n createdObj.setShadow({\r\n color: createdObj.stroke,\r\n } as fabric.Shadow);\r\n }\r\n\r\n if (createdObj.type === \"svg\" || createdObj.superType === \"svg\") {\r\n if (createdObj._objects.length) {\r\n createdObj._objects.forEach((object: any) => {\r\n object.set({ fill: createdObj.fill })\r\n });\r\n }\r\n }\r\n\r\n if (gridOption.enabled) {\r\n this.gridHandler.setCoords(createdObj);\r\n }\r\n if (!this.transactionHandler.active && !loaded) {\r\n this.transactionHandler.save(\"add\");\r\n }\r\n if (onAdd && editable && !loaded) {\r\n onAdd(createdObj);\r\n }\r\n\r\n return createdObj;\r\n };\r\n\r\n /**\r\n * Add group object\r\n *\r\n * @param {FabricGroup} obj\r\n * @param {boolean} [centered=true]\r\n * @param {boolean} [loaded=false]\r\n * @returns\r\n */\r\n public addGroup = (obj: FabricGroup, centered = true, loaded = false) => {\r\n return obj.objects.map((child) => {\r\n return this.add(child, centered, loaded, true);\r\n });\r\n };\r\n\r\n /**\r\n * Add iamge object\r\n * @param {FabricImage} obj\r\n * @returns\r\n */\r\n public addImage = (obj: FabricImage) => {\r\n const { objectOption } = this;\r\n const { filters = [], ...otherOption } = obj;\r\n const image = new Image();\r\n if (obj.src) {\r\n image.src = obj.src;\r\n }\r\n const createdObj = new fabric.Image(image, {\r\n ...objectOption,\r\n ...otherOption,\r\n }) as FabricImage;\r\n createdObj.set({\r\n filters: this.imageHandler.createFilters(filters),\r\n });\r\n this.setImage(createdObj, obj.src || obj.file);\r\n return createdObj;\r\n };\r\n\r\n /**\r\n * Remove object\r\n * @param {FabricObject} target\r\n * @returns {any}\r\n */\r\n public remove = (target?: FabricObject) => {\r\n const activeObject = target || (this.canvas.getActiveObject() as any);\r\n if (this.selectedTarget && this.selectedTarget.superType === \"link\") {\r\n this.linkHandler.remove(this.selectedTarget as LinkObject);\r\n if (!this.transactionHandler.active) {\r\n this.transactionHandler.save(\"remove\");\r\n }\r\n return;\r\n }\r\n if (!activeObject) {\r\n return;\r\n }\r\n if (\r\n typeof activeObject.deletable !== \"undefined\" &&\r\n !activeObject.deletable\r\n ) {\r\n return;\r\n }\r\n if (activeObject.type !== \"activeSelection\") {\r\n this.canvas.discardActiveObject();\r\n if (activeObject.superType === \"element\") {\r\n this.elementHandler.removeById(activeObject.id);\r\n }\r\n if (activeObject.superType === \"link\") {\r\n this.linkHandler.remove(activeObject);\r\n } else if (activeObject.superType === \"node\") {\r\n if (activeObject.toPort) {\r\n if (activeObject.toPort.links.length) {\r\n activeObject.toPort.links.forEach((link: any) => {\r\n this.linkHandler.remove(link, \"from\");\r\n });\r\n }\r\n this.canvas.remove(activeObject.toPort);\r\n }\r\n if (activeObject.fromPort && activeObject.fromPort.length) {\r\n activeObject.fromPort.forEach((port: any) => {\r\n if (port.links.length) {\r\n port.links.forEach((link: any) => {\r\n this.linkHandler.remove(link, \"to\");\r\n });\r\n }\r\n this.canvas.remove(port);\r\n });\r\n }\r\n }\r\n this.canvas.remove(activeObject);\r\n } else {\r\n const { _objects: activeObjects } = activeObject;\r\n const existDeleted = activeObjects.some(\r\n (obj: any) => typeof obj.deletable !== \"undefined\" && !obj.deletable\r\n );\r\n if (existDeleted) {\r\n return;\r\n }\r\n this.canvas.discardActiveObject();\r\n activeObjects.forEach((obj: any) => {\r\n if (obj.superType === \"element\") {\r\n this.elementHandler.removeById(obj.id);\r\n } else if (obj.superType === \"node\") {\r\n if (obj.toPort) {\r\n if (obj.toPort.links.length) {\r\n obj.toPort.links.forEach((link: any) => {\r\n this.linkHandler.remove(link, \"from\");\r\n });\r\n }\r\n this.canvas.remove(obj.toPort);\r\n }\r\n if (obj.fromPort && obj.fromPort.length) {\r\n obj.fromPort.forEach((port: any) => {\r\n if (port.links.length) {\r\n port.links.forEach((link: any) => {\r\n this.linkHandler.remove(link, \"to\");\r\n });\r\n }\r\n this.canvas.remove(port);\r\n });\r\n }\r\n }\r\n this.canvas.remove(obj);\r\n });\r\n }\r\n if (!this.transactionHandler.active) {\r\n this.transactionHandler.save(\"remove\");\r\n }\r\n this.objects = this.getObjects();\r\n const { onRemove } = this;\r\n if (onRemove) {\r\n onRemove(activeObject);\r\n }\r\n };\r\n\r\n /**\r\n * Remove object by id\r\n * @param {string} id\r\n */\r\n public removeById = (id: string) => {\r\n const findObject = this.findById(id);\r\n if (findObject) {\r\n this.remove(findObject);\r\n }\r\n };\r\n\r\n /**\r\n * Delete at origin object list\r\n * @param {string} id\r\n */\r\n public removeOriginById = (id: string) => {\r\n const object = this.findOriginByIdWithIndex(id);\r\n if (object.index > 0) {\r\n this.objects.splice(object.index, 1);\r\n }\r\n };\r\n\r\n /**\r\n * Duplicate object\r\n * @returns\r\n */\r\n public duplicate = () => {\r\n const {\r\n onAdd,\r\n propertiesToInclude,\r\n gridOption: { grid = 10 },\r\n } = this;\r\n const activeObject = this.canvas.getActiveObject() as FabricObject;\r\n if (!activeObject) {\r\n return;\r\n }\r\n if (\r\n typeof activeObject.cloneable !== \"undefined\" &&\r\n !activeObject.cloneable\r\n ) {\r\n return;\r\n }\r\n activeObject.clone((clonedObj: FabricObject) => {\r\n this.canvas.discardActiveObject();\r\n clonedObj.set({\r\n left: clonedObj.left + grid,\r\n top: clonedObj.top + grid,\r\n evented: true,\r\n });\r\n\r\n if (clonedObj.type === \"activeSelection\") {\r\n const activeSelection = clonedObj as fabric.ActiveSelection;\r\n activeSelection.canvas = this.canvas;\r\n activeSelection.forEachObject((obj: any) => {\r\n obj.set(\"id\", v4());\r\n if (obj.type == \"group\") {\r\n obj._objects.map((o: any) => {\r\n o.set(\"id\", v4());\r\n return o;\r\n });\r\n }\r\n this.canvas.add(obj);\r\n this.objects = this.getObjects();\r\n if (obj.dblclick) {\r\n obj.on(\"mousedblclick\", this.eventHandler.object.mousedblclick);\r\n }\r\n });\r\n if (onAdd) {\r\n onAdd(activeSelection);\r\n }\r\n activeSelection.setCoords();\r\n } else {\r\n if (activeObject.id === clonedObj.id) {\r\n clonedObj.set(\"id\", v4());\r\n\r\n if (clonedObj.type == \"group\") {\r\n clonedObj._objects.map((obj: any) => {\r\n obj.set(\"id\", v4());\r\n return obj;\r\n });\r\n }\r\n }\r\n\r\n this.canvas.add(clonedObj);\r\n this.objects = this.getObjects();\r\n if (clonedObj.dblclick) {\r\n clonedObj.on(\"mousedblclick\", this.eventHandler.object.mousedblclick);\r\n }\r\n if (onAdd) {\r\n onAdd(clonedObj);\r\n }\r\n }\r\n this.canvas.setActiveObject(clonedObj);\r\n this.portHandler.create(clonedObj as NodeObject);\r\n this.canvas.requestRenderAll();\r\n }, propertiesToInclude);\r\n };\r\n\r\n /**\r\n * Duplicate object by id\r\n * @param {string} id\r\n * @returns\r\n */\r\n public duplicateById = (id: string) => {\r\n const {\r\n onAdd,\r\n propertiesToInclude,\r\n gridOption: { grid = 10 },\r\n } = this;\r\n const findObject = this.findById(id);\r\n if (findObject) {\r\n if (\r\n typeof findObject.cloneable !== \"undefined\" &&\r\n !findObject.cloneable\r\n ) {\r\n return false;\r\n }\r\n findObject.clone((cloned: FabricObject) => {\r\n cloned.set({\r\n left: cloned.left + grid,\r\n top: cloned.top + grid,\r\n id: v4(),\r\n evented: true,\r\n });\r\n this.canvas.add(cloned);\r\n this.objects = this.getObjects();\r\n if (onAdd) {\r\n onAdd(cloned);\r\n }\r\n if (cloned.dblclick) {\r\n cloned.on(\"mousedblclick\", this.eventHandler.object.mousedblclick);\r\n }\r\n this.canvas.setActiveObject(cloned);\r\n this.portHandler.create(cloned as NodeObject);\r\n this.canvas.requestRenderAll();\r\n }, propertiesToInclude);\r\n }\r\n return true;\r\n };\r\n\r\n /**\r\n * Cut object\r\n *\r\n */\r\n public cut = () => {\r\n this.copy();\r\n this.remove();\r\n this.isCut = true;\r\n };\r\n\r\n /**\r\n * Copy to clipboard\r\n *\r\n * @param {*} value\r\n */\r\n public copyToClipboard = (value: any) => {\r\n const textarea = document.createElement(\"textarea\");\r\n document.body.appendChild(textarea);\r\n textarea.value = value;\r\n textarea.select();\r\n document.execCommand(\"copy\");\r\n document.body.removeChild(textarea);\r\n this.canvas.wrapperEl.focus();\r\n };\r\n\r\n /**\r\n * Copy object\r\n *\r\n * @returns\r\n */\r\n public copy = () => {\r\n const { propertiesToInclude } = this;\r\n const activeObject = this.canvas.getActiveObject() as FabricObject;\r\n if (activeObject && activeObject.superType === \"link\") {\r\n return false;\r\n }\r\n if (activeObject) {\r\n if (\r\n typeof activeObject.cloneable !== \"undefined\" &&\r\n !activeObject.cloneable\r\n ) {\r\n return false;\r\n }\r\n if (activeObject.type === \"activeSelection\") {\r\n const activeSelection = activeObject as fabric.ActiveSelection;\r\n if (\r\n activeSelection\r\n .getObjects()\r\n .some((obj: any) => obj.superType === \"node\")\r\n ) {\r\n if (this.keyEvent.clipboard) {\r\n const links = [] as any[];\r\n const objects = activeSelection\r\n .getObjects()\r\n .map((obj: any, index: number) => {\r\n if (typeof obj.cloneable !== \"undefined\" && !obj.cloneable) {\r\n return null;\r\n }\r\n if (obj.fromPort.length) {\r\n obj.fromPort.forEach((port: any) => {\r\n if (port.links.length) {\r\n port.links.forEach((link: any) => {\r\n const linkTarget = {\r\n fromNodeIndex: index,\r\n fromPortId: port.id,\r\n type: \"curvedLink\",\r\n superType: \"link\",\r\n } as any;\r\n const findIndex = activeSelection\r\n .getObjects()\r\n .findIndex(\r\n (compObj: any) => compObj.id === link.toNode.id\r\n );\r\n if (findIndex >= 0) {\r\n linkTarget.toNodeIndex = findIndex;\r\n links.push(linkTarget);\r\n }\r\n });\r\n }\r\n });\r\n }\r\n return {\r\n name: obj.name,\r\n description: obj.description,\r\n superType: obj.superType,\r\n type: obj.type,\r\n nodeClazz: obj.nodeClazz,\r\n configuration: obj.configuration,\r\n properties: {\r\n left:\r\n activeObject.left + activeObject.width / 2 + obj.left ||\r\n 0,\r\n top:\r\n activeObject.top + activeObject.height / 2 + obj.top || 0,\r\n iconName: obj.descriptor.icon,\r\n },\r\n };\r\n });\r\n this.copyToClipboard(\r\n JSON.stringify(objects.concat(links), null, \"\\t\")\r\n );\r\n return true;\r\n }\r\n this.clipboard = activeObject;\r\n return true;\r\n }\r\n }\r\n activeObject.clone((cloned: FabricObject) => {\r\n if (this.keyEvent.clipboard) {\r\n if (cloned.superType === \"node\") {\r\n const node = {\r\n name: cloned.name,\r\n description: cloned.description,\r\n superType: cloned.superType,\r\n type: cloned.type,\r\n nodeClazz: cloned.nodeClazz,\r\n configuration: cloned.configuration,\r\n properties: {\r\n left: cloned.left || 0,\r\n top: cloned.top || 0,\r\n iconName: cloned.descriptor.icon,\r\n },\r\n };\r\n const objects = [node];\r\n this.copyToClipboard(JSON.stringify(objects, null, \"\\t\"));\r\n } else {\r\n this.copyToClipboard(\r\n JSON.stringify(cloned.toObject(propertiesToInclude), null, \"\\t\")\r\n );\r\n }\r\n } else {\r\n this.clipboard = cloned;\r\n }\r\n }, propertiesToInclude);\r\n }\r\n return true;\r\n };\r\n\r\n /**\r\n * Paste object\r\n *\r\n * @returns\r\n */\r\n public paste = () => {\r\n const {\r\n onAdd,\r\n propertiesToInclude,\r\n gridOption: { grid = 10 },\r\n clipboard,\r\n isCut,\r\n } = this;\r\n const padding = isCut ? 0 : grid;\r\n if (!clipboard) {\r\n return false;\r\n }\r\n if (typeof clipboard.cloneable !== \"undefined\" && !clipboard.cloneable) {\r\n return false;\r\n }\r\n this.isCut = false;\r\n if (clipboard.type === \"activeSelection\") {\r\n if (clipboard.getObjects().some((obj: any) => obj.superType === \"node\")) {\r\n this.canvas.discardActiveObject();\r\n const objects = [] as any[];\r\n const linkObjects = [] as LinkOption[];\r\n clipboard.getObjects().forEach((obj: any) => {\r\n if (typeof obj.cloneable !== \"undefined\" && !obj.cloneable) {\r\n return;\r\n }\r\n const clonedObj = obj.duplicate();\r\n if (clonedObj.type === \"SwitchNode\") {\r\n clonedObj.set({\r\n left: obj.left + padding + padding,\r\n top: obj.top + padding,\r\n });\r\n } else {\r\n clonedObj.set({\r\n left: obj.left + padding,\r\n top: obj.top + padding,\r\n });\r\n }\r\n if (obj.fromPort.length) {\r\n obj.fromPort.forEach((port: PortObject) => {\r\n if (port.links.length) {\r\n port.links.forEach((link: LinkObject) => {\r\n const linkTarget = {\r\n fromNode: clonedObj.id,\r\n fromPort: port.id,\r\n } as any;\r\n const findIndex = clipboard\r\n .getObjects()\r\n .findIndex((compObj: any) => compObj.id === link.toNode.id);\r\n if (findIndex >= 0) {\r\n linkTarget.toNodeIndex = findIndex;\r\n linkObjects.push(linkTarget);\r\n }\r\n });\r\n }\r\n });\r\n }\r\n if (clonedObj.dblclick) {\r\n clonedObj.on(\r\n \"mousedblclick\",\r\n this.eventHandler.object.mousedblclick\r\n );\r\n }\r\n this.canvas.add(clonedObj);\r\n this.objects = this.getObjects();\r\n this.portHandler.create(clonedObj);\r\n objects.push(clonedObj);\r\n });\r\n if (linkObjects.length) {\r\n linkObjects.forEach((linkObject: any) => {\r\n const { fromNode, fromPort, toNodeIndex } = linkObject;\r\n const toNode = objects[toNodeIndex];\r\n const link = {\r\n type: \"curvedLink\",\r\n fromNodeId: fromNode,\r\n fromPortId: fromPort,\r\n toNodeId: toNode.id,\r\n toPortId: toNode.toPort.id,\r\n };\r\n this.linkHandler.create(link);\r\n });\r\n }\r\n const activeSelection = new fabric.ActiveSelection(objects, {\r\n canvas: this.canvas,\r\n ...this.activeSelectionOption,\r\n });\r\n if (isCut) {\r\n this.clipboard = null;\r\n } else {\r\n this.clipboard = activeSelection;\r\n }\r\n if (!this.transactionHandler.active) {\r\n this.transactionHandler.save(\"paste\");\r\n }\r\n this.canvas.setActiveObject(activeSelection);\r\n this.drawingHandler.setType(\"activeSelection\")\r\n this.canvas.renderAll();\r\n return true;\r\n }\r\n }\r\n clipboard.clone((clonedObj: any) => {\r\n this.canvas.discardActiveObject();\r\n clonedObj.set({\r\n left: clonedObj.left + padding,\r\n top: clonedObj.top + padding,\r\n id: isCut ? clipboard.id : v4(),\r\n evented: true,\r\n });\r\n if (clonedObj.type === \"activeSelection\") {\r\n clonedObj.canvas = this.canvas;\r\n clonedObj.forEachObject((obj: any) => {\r\n obj.set(\"id\", isCut ? obj.id : v4());\r\n if (!isCut && obj.type == \"group\") {\r\n obj._objects.map((o: any) => {\r\n o.set(\"id\", v4());\r\n return o;\r\n });\r\n }\r\n this.canvas.add(obj);\r\n if (obj.dblclick) {\r\n obj.on(\"mousedblclick\", this.eventHandler.object.mousedblclick);\r\n }\r\n });\r\n } else {\r\n if (clonedObj.superType === \"node\") {\r\n clonedObj = clonedObj.duplicate();\r\n }\r\n if (!isCut && clonedObj.type == \"group\") {\r\n clonedObj._objects.map((o: any) => {\r\n o.set(\"id\", v4());\r\n return o;\r\n });\r\n }\r\n this.canvas.add(clonedObj);\r\n if (clonedObj.dblclick) {\r\n clonedObj.on(\"mousedblclick\", this.eventHandler.object.mousedblclick);\r\n }\r\n }\r\n const newClipboard = clipboard.set({\r\n top: clonedObj.top,\r\n left: clonedObj.left,\r\n });\r\n if (isCut) {\r\n this.clipboard = null;\r\n } else {\r\n this.clipboard = newClipboard;\r\n }\r\n if (clonedObj.superType === \"node\") {\r\n this.portHandler.create(clonedObj);\r\n }\r\n if (!this.transactionHandler.active) {\r\n this.transactionHandler.save(\"paste\");\r\n }\r\n // TODO...\r\n // After toGroup svg elements not rendered.\r\n this.objects = this.getObjects();\r\n if (onAdd) {\r\n onAdd(clonedObj);\r\n }\r\n clonedObj.setCoords();\r\n this.canvas.setActiveObject(clonedObj);\r\n if (clonedObj.type === \"activeSelection\") {\r\n this.drawingHandler.setType(\"activeSelection\")\r\n }\r\n this.canvas.requestRenderAll();\r\n }, propertiesToInclude);\r\n return true;\r\n };\r\n\r\n /**\r\n * Load the image\r\n * @param {FabricImage} obj\r\n * @param {string} src\r\n */\r\n public loadImage = (obj: FabricImage, src: string) => {\r\n let url = src;\r\n if (!url) {\r\n url = \"./images/sample/transparentBg.png\";\r\n }\r\n fabric.util.loadImage(url, (source) => {\r\n if (obj.type !== \"image\") {\r\n obj.setPatternFill(\r\n {\r\n source,\r\n repeat: \"repeat\",\r\n },\r\n null\r\n );\r\n obj.setCoords();\r\n this.canvas.renderAll();\r\n return;\r\n }\r\n obj.setElement(source);\r\n obj.setCoords();\r\n this.canvas.renderAll();\r\n });\r\n };\r\n\r\n /**\r\n * Find object by object\r\n * @param {FabricObject} obj\r\n */\r\n public find = (obj: FabricObject) => this.findById(obj.id);\r\n\r\n /**\r\n * Find object by id\r\n * @param {string} id\r\n * @returns {(FabricObject | null)}\r\n */\r\n public findById = (id: string): FabricObject | null => {\r\n let findObject;\r\n const exist = this.objects.some((obj) => {\r\n if (obj.id === id) {\r\n findObject = obj;\r\n return true;\r\n }\r\n return false;\r\n });\r\n if (!exist) {\r\n warning(true, \"Not found object by id.\");\r\n return null;\r\n }\r\n return findObject;\r\n };\r\n\r\n /**\r\n * Find object in origin list\r\n * @param {string} id\r\n * @returns\r\n */\r\n public findOriginById = (id: string) => {\r\n let findObject: FabricObject;\r\n const exist = this.objects.some((obj) => {\r\n if (obj.id === id) {\r\n findObject = obj;\r\n return true;\r\n }\r\n return false;\r\n });\r\n if (!exist) {\r\n console.warn(\"Not found object by id.\");\r\n return null;\r\n }\r\n return findObject;\r\n };\r\n\r\n /**\r\n * Return origin object list\r\n * @param {string} id\r\n * @returns\r\n */\r\n public findOriginByIdWithIndex = (id: string) => {\r\n let findObject;\r\n let index = -1;\r\n const exist = this.objects.some((obj, i) => {\r\n if (obj.id === id) {\r\n findObject = obj;\r\n index = i;\r\n return true;\r\n }\r\n return false;\r\n });\r\n if (!exist) {\r\n console.warn(\"Not found object by id.\");\r\n return {};\r\n }\r\n return {\r\n object: findObject,\r\n index,\r\n };\r\n };\r\n\r\n /**\r\n * Select object\r\n * @param {FabricObject} obj\r\n * @param {boolean} [find]\r\n */\r\n public select = (obj: FabricObject, find?: boolean) => {\r\n let findObject = obj;\r\n if (find) {\r\n findObject = this.find(obj);\r\n }\r\n if (findObject) {\r\n this.canvas.discardActiveObject();\r\n this.canvas.setActiveObject(findObject);\r\n this.canvas.requestRenderAll();\r\n }\r\n };\r\n\r\n /**\r\n * Select by id\r\n * @param {string} id\r\n */\r\n public selectById = (id: string) => {\r\n const findObject = this.findById(id);\r\n if (findObject) {\r\n this.canvas.discardActiveObject();\r\n this.canvas.setActiveObject(findObject);\r\n this.canvas.requestRenderAll();\r\n }\r\n };\r\n\r\n /**\r\n * Select all\r\n * @returns\r\n */\r\n public selectAll = () => {\r\n this.canvas.discardActiveObject();\r\n const filteredObjects = this.canvas.getObjects().filter((obj: any) => {\r\n if (obj.id === \"workarea\") {\r\n return false;\r\n } else if (!obj.evented) {\r\n return false;\r\n } else if (obj.superType === \"link\") {\r\n return false;\r\n } else if (obj.superType === \"port\") {\r\n return false;\r\n } else if (obj.superType === \"element\") {\r\n return false;\r\n } else if (obj.locked) {\r\n return false;\r\n }\r\n return true;\r\n });\r\n if (!filteredObjects.length) {\r\n return;\r\n }\r\n if (filteredObjects.length === 1) {\r\n this.canvas.setActiveObject(filteredObjects[0]);\r\n this.canvas.renderAll();\r\n return;\r\n }\r\n const activeSelection = new fabric.ActiveSelection(filteredObjects, {\r\n canvas: this.canvas,\r\n ...this.activeSelectionOption,\r\n });\r\n this.canvas.setActiveObject(activeSelection);\r\n this.canvas.renderAll();\r\n };\r\n\r\n /**\r\n * Save origin width, height\r\n * @param {FabricObject} obj\r\n * @param {number} width\r\n * @param {number} height\r\n */\r\n public originScaleToResize = (\r\n obj: FabricObject,\r\n width: number,\r\n height: number\r\n ) => {\r\n if (obj.id === \"workarea\") {\r\n this.setByPartial(obj, {\r\n workareaWidth: obj.width,\r\n workareaHeight: obj.height,\r\n });\r\n }\r\n this.setByPartial(obj, {\r\n scaleX: width / obj.width,\r\n scaleY: height / obj.height,\r\n });\r\n };\r\n\r\n /**\r\n * When set the width, height, Adjust the size\r\n * @param {number} width\r\n * @param {number} height\r\n */\r\n public scaleToResize = (width: number, height: number) => {\r\n const activeObject = this.canvas.getActiveObject() as FabricObject;\r\n const { id } = activeObject;\r\n const obj = {\r\n id,\r\n scaleX: width / activeObject.width,\r\n scaleY: height / activeObject.height,\r\n };\r\n this.setObject(obj);\r\n activeObject.setCoords();\r\n this.canvas.requestRenderAll();\r\n };\r\n\r\n /**\r\n * Import json\r\n * @param {*} json\r\n * @param {(canvas: FabricCanvas) => void} [callback]\r\n */\r\n public importJSON = async (\r\n json: any,\r\n type: any,\r\n callback?: (canvas: FabricCanvas) => void\r\n ) => {\r\n // debugger\r\n if (typeof json === \"string\") {\r\n json = JSON.parse(json);\r\n }\r\n let prevLeft = 0;\r\n let prevTop = 0;\r\n this.canvas.setBackgroundColor(\r\n this.canvasOption.backgroundColor,\r\n this.canvas.renderAll.bind(this.canvas)\r\n );\r\n const workareaExist = json.filter(\r\n (obj: FabricObjectOption) => obj.id === \"workarea\"\r\n );\r\n if (!this.workarea) {\r\n this.workareaHandler.initialize();\r\n }\r\n if (!workareaExist.length) {\r\n this.canvas.centerObject(this.workarea);\r\n this.workarea.setCoords();\r\n prevLeft = this.workarea.left;\r\n prevTop = this.workarea.top;\r\n } else {\r\n const workarea = workareaExist[0];\r\n prevLeft = workarea.left;\r\n prevTop = workarea.top;\r\n this.workarea.set(workarea);\r\n await this.workareaHandler.setImage(workarea.src, true);\r\n this.workarea.setCoords();\r\n }\r\n json.forEach((obj: FabricObjectOption) => {\r\n if (obj.id === \"workarea\") {\r\n return;\r\n }\r\n const canvasWidth = this.canvas.getWidth();\r\n const canvasHeight = this.canvas.getHeight();\r\n const {\r\n width,\r\n height,\r\n scaleX,\r\n scaleY,\r\n layout,\r\n left,\r\n top,\r\n } = this.workarea;\r\n if (layout === \"fullscreen\") {\r\n const leftRatio = canvasWidth / (width * scaleX);\r\n const topRatio = canvasHeight / (height * scaleY);\r\n obj.left *= leftRatio;\r\n obj.top *= topRatio;\r\n obj.scaleX *= leftRatio;\r\n obj.scaleY *= topRatio;\r\n } else {\r\n const diffLeft = left - prevLeft;\r\n const diffTop = top - prevTop;\r\n obj.left += diffLeft;\r\n obj.top += diffTop;\r\n }\r\n if (obj.superType === \"element\") {\r\n obj.id = v4();\r\n }\r\n this.add(obj, false, true);\r\n this.canvas.renderAll();\r\n });\r\n this.objects = this.getObjects();\r\n if (type !== \"preview\") {\r\n this.transactionHandler.save(\"loaded\");\r\n }\r\n if (callback) {\r\n callback(this.canvas);\r\n }\r\n return Promise.resolve(this.canvas);\r\n };\r\n\r\n /**\r\n * Export json\r\n */\r\n public exportJSON = () =>\r\n this.canvas.toObject(this.propertiesToInclude).objects as FabricObject[];\r\n\r\n /**\r\n * Active selection to group\r\n * @returns\r\n */\r\n public toGroup = (target?: FabricObject) => {\r\n const activeObject =\r\n target || (this.canvas.getActiveObject() as fabric.ActiveSelection);\r\n if (!activeObject) {\r\n return null;\r\n }\r\n if (activeObject.type !== \"activeSelection\") {\r\n return null;\r\n }\r\n const group = activeObject.toGroup() as FabricObject;\r\n group.set({\r\n id: v4(),\r\n name: \"New group\",\r\n type: \"group\",\r\n ...this.objectOption,\r\n });\r\n this.objects = this.getObjects();\r\n if (!this.transactionHandler.active) {\r\n this.transactionHandler.save(\"group\");\r\n }\r\n if (this.onSelect) {\r\n this.onSelect(group);\r\n }\r\n this.canvas.renderAll();\r\n return group;\r\n };\r\n\r\n /**\r\n * Group to active selection\r\n * @returns\r\n */\r\n public toActiveSelection = (target?: FabricObject) => {\r\n const activeObject =\r\n target || (this.canvas.getActiveObject() as fabric.Group);\r\n if (!activeObject) {\r\n return;\r\n }\r\n if (activeObject.type !== \"group\") {\r\n return;\r\n }\r\n const activeSelection = activeObject.toActiveSelection();\r\n this.objects = this.getObjects();\r\n if (!this.transactionHandler.active) {\r\n this.transactionHandler.save(\"ungroup\");\r\n }\r\n if (this.onSelect) {\r\n this.onSelect(activeSelection);\r\n }\r\n this.canvas.renderAll();\r\n return activeSelection;\r\n };\r\n\r\n /**\r\n * Bring forward\r\n */\r\n public bringForward = () => {\r\n const activeObject = this.canvas.getActiveObject() as FabricObject;\r\n if (activeObject) {\r\n this.canvas.bringForward(activeObject);\r\n if (!this.transactionHandler.active) {\r\n this.transactionHandler.save(\"bringForward\");\r\n }\r\n const { onModified } = this;\r\n if (onModified) {\r\n onModified(activeObject);\r\n }\r\n }\r\n };\r\n\r\n /**\r\n * Bring to front\r\n */\r\n public bringToFront = () => {\r\n const activeObject = this.canvas.getActiveObject() as FabricObject;\r\n if (activeObject) {\r\n this.canvas.bringToFront(activeObject);\r\n if (!this.transactionHandler.active) {\r\n this.transactionHandler.save(\"bringToFront\");\r\n }\r\n const { onModified } = this;\r\n if (onModified) {\r\n onModified(activeObject);\r\n }\r\n }\r\n };\r\n\r\n /**\r\n * Send backwards\r\n * @returns\r\n */\r\n public sendBackwards = () => {\r\n const activeObject = this.canvas.getActiveObject() as FabricObject;\r\n if (activeObject) {\r\n const firstObject = this.canvas.getObjects()[1] as FabricObject;\r\n if (firstObject.id === activeObject.id) {\r\n return;\r\n }\r\n if (!this.transactionHandler.active) {\r\n this.transactionHandler.save(\"sendBackwards\");\r\n }\r\n this.canvas.sendBackwards(activeObject);\r\n const { onModified } = this;\r\n if (onModified) {\r\n onModified(activeObject);\r\n }\r\n }\r\n };\r\n\r\n /**\r\n * Send to back\r\n */\r\n public sendToBack = () => {\r\n const activeObject = this.canvas.getActiveObject() as FabricObject;\r\n if (activeObject) {\r\n this.canvas.sendToBack(activeObject);\r\n this.canvas.sendToBack(this.canvas.getObjects()[1]);\r\n if (!this.transactionHandler.active) {\r\n this.transactionHandler.save(\"sendToBack\");\r\n }\r\n const { onModified } = this;\r\n if (onModified) {\r\n onModified(activeObject);\r\n }\r\n }\r\n };\r\n\r\n /**\r\n * Clear canvas\r\n * @param {boolean} [includeWorkarea=false]\r\n */\r\n public clear = (includeWorkarea = false) => {\r\n const ids = this.canvas.getObjects().reduce((prev, curr: any) => {\r\n if (curr.superType === \"element\") {\r\n prev.push(curr.id);\r\n return prev;\r\n }\r\n return prev;\r\n }, []);\r\n this.elementHandler.removeByIds(ids);\r\n if (includeWorkarea) {\r\n this.canvas.clear();\r\n this.workarea = null;\r\n } else {\r\n this.canvas.discardActiveObject();\r\n this.canvas.getObjects().forEach((obj: any) => {\r\n if (obj.id === \"grid\" || obj.id === \"workarea\") {\r\n return;\r\n }\r\n this.canvas.remove(obj);\r\n });\r\n }\r\n this.objects = this.getObjects();\r\n this.canvas.renderAll();\r\n };\r\n\r\n /**\r\n * Start request animation frame\r\n */\r\n public startRequestAnimFrame = () => {\r\n if (!this.isRequsetAnimFrame) {\r\n this.isRequsetAnimFrame = true;\r\n const render = () => {\r\n this.canvas.renderAll();\r\n this.requestFrame = fabric.util.requestAnimFrame(render);\r\n };\r\n fabric.util.requestAnimFrame(render);\r\n }\r\n };\r\n\r\n /**\r\n * Stop request animation frame\r\n */\r\n public stopRequestAnimFrame = () => {\r\n this.isRequsetAnimFrame = false;\r\n const cancelRequestAnimFrame = (() =>\r\n window.cancelAnimationFrame ||\r\n // || window.webkitCancelRequestAnimationFrame\r\n // || window.mozCancelRequestAnimationFrame\r\n // || window.oCancelRequestAnimationFrame\r\n // || window.msCancelRequestAnimationFrame\r\n clearTimeout)();\r\n cancelRequestAnimFrame(this.requestFrame);\r\n };\r\n\r\n /**\r\n * Save target object as image\r\n * @param {FabricObject} targetObject\r\n * @param {string} [option={ name: 'New Image', format: 'png', quality: 1 }]\r\n */\r\n public saveImage = (\r\n targetObject: FabricObject,\r\n option = { name: \"New Image\", format: \"png\", quality: 1 }\r\n ) => {\r\n let dataUrl;\r\n let target = targetObject;\r\n if (target) {\r\n dataUrl = target.toDataURL(option);\r\n } else {\r\n target = this.canvas.getActiveObject() as FabricObject;\r\n if (target) {\r\n dataUrl = target.toDataURL(option);\r\n }\r\n }\r\n if (dataUrl) {\r\n const anchorEl = document.createElement(\"a\");\r\n anchorEl.href = dataUrl;\r\n anchorEl.download = `${option.name}.png`;\r\n document.body.appendChild(anchorEl); // required for firefox\r\n anchorEl.click();\r\n anchorEl.remove();\r\n }\r\n };\r\n\r\n /**\r\n * Save canvas as image\r\n * @param {string} [option={ name: 'New Image', format: 'png', quality: 1 }]\r\n */\r\n public saveCanvasImage = (\r\n option = { name: \"New Image\", format: \"jpeg\", quality: 1, multiplier: 3, enableRetinaScaling: true}\r\n ) => {\r\n const dataUrl = this.canvas.toDataURL(option);\r\n\r\n if (dataUrl) {\r\n const anchorEl = document.createElement(\"a\");\r\n anchorEl.href = dataUrl;\r\n anchorEl.download = `${option.name}.jpeg`;\r\n document.body.appendChild(anchorEl); // required for firefox\r\n anchorEl.click();\r\n anchorEl.remove();\r\n }\r\n };\r\n\r\n public getCanvasImage = (\r\n option = { name: \"New Image\", format: \"png\", quality: 1 }\r\n ) => {\r\n return this.canvas.toDataURL(option);\r\n };\r\n\r\n /**\r\n * Sets \"angle\" of an instance with centered rotation\r\n *\r\n * @param {number} angle\r\n */\r\n public rotate = (angle: number) => {\r\n const activeObject = this.canvas.getActiveObject();\r\n if (activeObject) {\r\n this.set(\"rotation\", angle);\r\n activeObject.rotate(angle);\r\n this.canvas.requestRenderAll();\r\n }\r\n };\r\n\r\n /**\r\n * Destroy canvas\r\n *\r\n */\r\n public destroy = () => {\r\n this.eventHandler.destroy();\r\n this.guidelineHandler.destroy();\r\n this.contextmenuHandler.destory();\r\n this.tooltipHandler.destroy();\r\n this.clear(true);\r\n };\r\n\r\n /**\r\n * Set canvas option\r\n *\r\n * @param {CanvasOption} canvasOption\r\n */\r\n public setCanvasOption = (canvasOption: CanvasOption) => {\r\n this.canvasOption = Object.assign({}, this.canvasOption, canvasOption);\r\n this.canvas.setBackgroundColor(\r\n canvasOption.backgroundColor,\r\n this.canvas.renderAll.bind(this.canvas)\r\n );\r\n if (\r\n typeof canvasOption.width !== \"undefined\" &&\r\n typeof canvasOption.height !== \"undefined\"\r\n ) {\r\n if (this.eventHandler) {\r\n this.eventHandler.resize(canvasOption.width, canvasOption.height);\r\n } else {\r\n this.canvas.setWidth(canvasOption.width).setHeight(canvasOption.height);\r\n }\r\n }\r\n if (typeof canvasOption.selection !== \"undefined\") {\r\n this.canvas.selection = canvasOption.selection;\r\n }\r\n if (typeof canvasOption.hoverCursor !== \"undefined\") {\r\n this.canvas.hoverCursor = canvasOption.hoverCursor;\r\n }\r\n if (typeof canvasOption.defaultCursor !== \"undefined\") {\r\n this.canvas.defaultCursor = canvasOption.defaultCursor;\r\n }\r\n if (typeof canvasOption.preserveObjectStacking !== \"undefined\") {\r\n this.canvas.preserveObjectStacking = canvasOption.preserveObjectStacking;\r\n }\r\n };\r\n\r\n /**\r\n * Set keyboard event\r\n *\r\n * @param {KeyEvent} keyEvent\r\n */\r\n public setKeyEvent = (keyEvent: KeyEvent) => {\r\n this.keyEvent = Object.assign({}, this.keyEvent, keyEvent);\r\n };\r\n\r\n /**\r\n * Set fabric objects\r\n *\r\n * @param {FabricObjects} fabricObjects\r\n */\r\n public setFabricObjects = (fabricObjects: FabricObjects) => {\r\n this.fabricObjects = Object.assign({}, this.fabricObjects, fabricObjects);\r\n };\r\n\r\n /**\r\n * Set workarea option\r\n *\r\n * @param {WorkareaOption} workareaOption\r\n */\r\n public setWorkareaOption = (workareaOption: WorkareaOption) => {\r\n this.workareaOption = Object.assign(\r\n {},\r\n this.workareaOption,\r\n workareaOption\r\n );\r\n if (this.workarea) {\r\n this.workarea.set({\r\n ...workareaOption,\r\n });\r\n }\r\n };\r\n\r\n /**\r\n * Set guideline option\r\n *\r\n * @param {GuidelineOption} guidelineOption\r\n */\r\n public setGuidelineOption = (guidelineOption: GuidelineOption) => {\r\n this.guidelineOption = Object.assign(\r\n {},\r\n this.guidelineOption,\r\n guidelineOption\r\n );\r\n if (this.guidelineHandler) {\r\n this.guidelineHandler.initialize();\r\n }\r\n };\r\n\r\n /**\r\n * Set grid option\r\n *\r\n * @param {GridOption} gridOption\r\n */\r\n public setGridOption = (gridOption: GridOption) => {\r\n this.gridOption = Object.assign({}, this.gridOption, gridOption);\r\n };\r\n\r\n /**\r\n * Set object option\r\n *\r\n * @param {FabricObjectOption} objectOption\r\n */\r\n public setObjectOption = (objectOption: FabricObjectOption) => {\r\n this.objectOption = Object.assign({}, this.objectOption, objectOption);\r\n };\r\n\r\n /**\r\n * Set activeSelection option\r\n *\r\n * @param {Partial>} activeSelectionOption\r\n */\r\n public setActiveSelectionOption = (\r\n activeSelectionOption: Partial>\r\n ) => {\r\n this.activeSelectionOption = Object.assign(\r\n {},\r\n this.activeSelectionOption,\r\n activeSelectionOption\r\n );\r\n };\r\n\r\n /**\r\n * Set propertiesToInclude\r\n *\r\n * @param {string[]} propertiesToInclude\r\n */\r\n public setPropertiesToInclude = (propertiesToInclude: string[]) => {\r\n this.propertiesToInclude = union(\r\n propertiesToInclude,\r\n this.propertiesToInclude\r\n );\r\n };\r\n\r\n public deleteIncompletePolygon() {\r\n if (this.activeShapePolygon) {\r\n this.canvas.remove(this.activeShapePolygon)\r\n }\r\n if (this.lineArray && this.lineArray.length > 0) {\r\n this.lineArray.forEach(element => {\r\n this.canvas.remove(element)\r\n });\r\n }\r\n if (this.pointArray && this.pointArray.length > 0) {\r\n this.pointArray.forEach(element => {\r\n this.canvas.remove(element)\r\n });\r\n }\r\n }\r\n}\r\n\r\nexport default Handler;\r\n","import React, { Component } from 'react';\r\nimport { fabric } from 'fabric';\r\nimport { v4 } from 'uuid';\r\nimport ResizeObserver from 'resize-observer-polyfill';\r\n\r\nimport Handler, { HandlerOptions } from './handlers/Handler';\r\nimport { FabricCanvas } from './utils';\r\nimport { defaults } from './constants';\r\nimport '../../assets/styles/core/_tooltip.scss';\r\n\r\nexport type CanvasProps = HandlerOptions & {\r\n\tresponsive?: boolean;\r\n\tstyle?: React.CSSProperties;\r\n\tref?: React.RefAttributes;\r\n};\r\n\r\ninterface IState {\r\n\tid: string;\r\n\tloaded: boolean;\r\n}\r\n\r\nclass Canvas extends Component