From b8b6e8d2295f24d30d6680574a02079fe2b37c0d Mon Sep 17 00:00:00 2001 From: lja1018 Date: Mon, 18 Oct 2021 05:24:14 +0000 Subject: [PATCH] chore: update version to v3.15.1 --- apps/image-editor/dist/tui-image-editor.css | 1244 +- .../dist/tui-image-editor.css.map | 1 - apps/image-editor/dist/tui-image-editor.js | 77569 +++++++++++----- .../image-editor/dist/tui-image-editor.js.map | 1 - .../dist/tui-image-editor.min.css | 9 +- .../dist/tui-image-editor.min.css.map | 1 - .../image-editor/dist/tui-image-editor.min.js | 19 +- .../dist/tui-image-editor.min.js.map | 1 - apps/image-editor/index.d.ts | 2 +- 9 files changed, 55522 insertions(+), 23325 deletions(-) delete mode 100644 apps/image-editor/dist/tui-image-editor.css.map delete mode 100644 apps/image-editor/dist/tui-image-editor.js.map delete mode 100644 apps/image-editor/dist/tui-image-editor.min.css.map delete mode 100644 apps/image-editor/dist/tui-image-editor.min.js.map diff --git a/apps/image-editor/dist/tui-image-editor.css b/apps/image-editor/dist/tui-image-editor.css index e85b63a14..1bdd00b21 100644 --- a/apps/image-editor/dist/tui-image-editor.css +++ b/apps/image-editor/dist/tui-image-editor.css @@ -1,1243 +1,7 @@ /*! - * tui-image-editor.js - * @version 3.15.0 - * @author NHN. FE Development Lab + * TOAST UI ImageEditor + * @version 3.15.1 + * @author NHN. FE Development Team * @license MIT */ -body > textarea { - position: fixed !important; -} -.tui-image-editor-container { - margin: 0; - padding: 0; - box-sizing: border-box; - min-height: 300px; - height: 100%; - position: relative; - background-color: #282828; - overflow: hidden; - letter-spacing: 0.3px; -} -.tui-image-editor-container div, -.tui-image-editor-container ul, -.tui-image-editor-container label, -.tui-image-editor-container input, -.tui-image-editor-container li { - box-sizing: border-box; - margin: 0; - padding: 0; - -ms-user-select: none; - -moz-user-select: -moz-none; - -khtml-user-select: none; - -webkit-user-select: none; - user-select: none; -} -.tui-image-editor-container .tui-image-editor-header { -/* BUTTON AND LOGO */ - min-width: 533px; - position: absolute; - background-color: #151515; - top: 0; - width: 100%; -} -.tui-image-editor-container .tui-image-editor-header-buttons, -.tui-image-editor-container .tui-image-editor-controls-buttons { - float: right; - margin: 8px; -} -.tui-image-editor-container .tui-image-editor-header-logo, -.tui-image-editor-container .tui-image-editor-controls-logo { - float: left; - width: 30%; - padding: 17px; -} -.tui-image-editor-container .tui-image-editor-controls-logo, -.tui-image-editor-container .tui-image-editor-controls-buttons { - width: 270px; - height: 100%; - display: none; -} -.tui-image-editor-container .tui-image-editor-header-buttons button, -.tui-image-editor-container .tui-image-editor-header-buttons div, -.tui-image-editor-container .tui-image-editor-controls-buttons button, -.tui-image-editor-container .tui-image-editor-controls-buttons div { - display: inline-block; - position: relative; - width: 120px; - height: 40px; - padding: 0; - line-height: 40px; - outline: none; - border-radius: 20px; - border: 1px solid #ddd; - font-family: 'Noto Sans', sans-serif; - font-size: 12px; - font-weight: bold; - cursor: pointer; - vertical-align: middle; - letter-spacing: 0.3px; - text-align: center; -} -.tui-image-editor-container .tui-image-editor-download-btn { - background-color: #fdba3b; - border-color: #fdba3b; - color: #fff; -} -.tui-image-editor-container .tui-image-editor-load-btn { - position: absolute; - left: 0; - right: 0; - display: inline-block; - top: 0; - bottom: 0; - width: 100%; - cursor: pointer; - opacity: 0; -} -.tui-image-editor-container .tui-image-editor-main-container { - position: absolute; - width: 100%; - top: 0; - bottom: 64px; -} -.tui-image-editor-container .tui-image-editor-main { - position: absolute; - text-align: center; - top: 64px; - bottom: 0; - right: 0; - left: 0; -} -.tui-image-editor-container .tui-image-editor-wrap { - position: absolute; - bottom: 0; - width: 100%; - overflow: auto; -} -.tui-image-editor-container .tui-image-editor-wrap .tui-image-editor-size-wrap { - display: table; - width: 100%; - height: 100%; -} -.tui-image-editor-container .tui-image-editor-wrap .tui-image-editor-size-wrap .tui-image-editor-align-wrap { - display: table-cell; - vertical-align: middle; -} -.tui-image-editor-container .tui-image-editor { - position: relative; - display: inline-block; -} -.tui-image-editor-container .tui-image-editor-menu, -.tui-image-editor-container .tui-image-editor-help-menu { - width: auto; - list-style: none; - padding: 0; - margin: 0 auto; - display: table-cell; - text-align: center; - vertical-align: middle; - white-space: nowrap; -} -.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item, -.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item { - position: relative; - display: inline-block; - border-radius: 2px; - padding: 7px 8px 3px 8px; - cursor: pointer; - margin: 0 4px; -} -.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:hover:before, -.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item[tooltip-content]:hover:before { - content: ''; - position: absolute; - display: inline-block; - margin: 0 auto 0; - width: 0; - height: 0; - border-right: 7px solid transparent; - border-top: 7px solid #2f2f2f; - border-left: 7px solid transparent; - left: 13px; - top: -2px; -} -.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:hover:after, -.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item[tooltip-content]:hover:after { - content: attr(tooltip-content); - position: absolute; - display: inline-block; - background-color: #2f2f2f; - color: #fff; - padding: 5px 8px; - font-size: 11px; - font-weight: lighter; - border-radius: 3px; - max-height: 23px; - top: -25px; - left: 0; - min-width: 24px; -} -.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item.active, -.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item.active { - background-color: #fff; - transition: all 0.3s ease; -} -.tui-image-editor-container .tui-image-editor-wrap { - position: absolute; -} -.tui-image-editor-container .tui-image-editor-grid-visual { - display: none; - position: absolute; - width: 100%; - height: 100%; - border: 1px solid rgba(255,255,255,0.7); -} -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor, -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor { - transition: none; -} -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-grid-visual, -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-grid-visual, -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-resize .tui-image-editor-grid-visual { - display: block; -} -.tui-image-editor-container .tui-image-editor-grid-visual table { - width: 100%; - height: 100%; - border-collapse: collapse; -} -.tui-image-editor-container .tui-image-editor-grid-visual table td { - border: 1px solid rgba(255,255,255,0.3); -} -.tui-image-editor-container .tui-image-editor-grid-visual table td.dot:before { - content: ''; - position: absolute; - box-sizing: border-box; - width: 10px; - height: 10px; - border: 0; - box-shadow: 0 0 1px 0 rgba(0,0,0,0.3); - border-radius: 100%; - background-color: #fff; -} -.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-top:before { - top: -5px; - left: -5px; -} -.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-top:before { - top: -5px; - right: -5px; -} -.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-bottom:before { - bottom: -5px; - left: -5px; -} -.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-bottom:before { - bottom: -5px; - right: -5px; -} -.tui-image-editor-container .tui-image-editor-submenu { - display: none; - position: absolute; - bottom: 0; - width: 100%; - height: 150px; - white-space: nowrap; - z-index: 2; -} -.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover svg > use.active { - display: block; -} -.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item li { - display: inline-block; - vertical-align: top; -} -.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-newline { - display: block; - margin-top: 0; -} -.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button { - position: relative; - cursor: pointer; - display: inline-block; - font-weight: normal; - font-size: 11px; - margin: 0 9px 0 9px; -} -.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.preset { - margin: 0 9px 20px 5px; -} -.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item label > span { - display: inline-block; - cursor: pointer; - padding-top: 5px; - font-family: "Noto Sans", sans-serif; - font-size: 11px; -} -.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.apply label, -.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.cancel label { - vertical-align: 7px; -} -.tui-image-editor-container .tui-image-editor-submenu > div { - display: none; - vertical-align: bottom; -} -.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-style { - opacity: 0.95; - z-index: -1; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - display: block; -} -.tui-image-editor-container .tui-image-editor-partition > div { - width: 1px; - height: 52px; - border-left: 1px solid #3c3c3c; - margin: 0 8px 0 8px; -} -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-partition > div { - height: 108px; - margin: 0 29px 0 0px; -} -.tui-image-editor-container .tui-image-editor-submenu-align { - text-align: left; - margin-right: 30px; -} -.tui-image-editor-container .tui-image-editor-submenu-align label > span { - width: 55px; - white-space: nowrap; -} -.tui-image-editor-container .tui-image-editor-submenu-align:first-child { - margin-right: 0; -} -.tui-image-editor-container .tui-image-editor-submenu-align:first-child label > span { - width: 70px; -} -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-crop .tui-image-editor-submenu > div.tui-image-editor-menu-crop, -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-resize .tui-image-editor-submenu > div.tui-image-editor-menu-resize, -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-submenu > div.tui-image-editor-menu-flip, -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-submenu > div.tui-image-editor-menu-rotate, -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-shape .tui-image-editor-submenu > div.tui-image-editor-menu-shape, -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-text .tui-image-editor-submenu > div.tui-image-editor-menu-text, -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-mask .tui-image-editor-submenu > div.tui-image-editor-menu-mask, -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-icon .tui-image-editor-submenu > div.tui-image-editor-menu-icon, -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-draw .tui-image-editor-submenu > div.tui-image-editor-menu-draw, -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-submenu > div.tui-image-editor-menu-filter, -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-zoom .tui-image-editor-submenu > div.tui-image-editor-menu-zoom { - display: table-cell; -} -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-crop .tui-image-editor-submenu, -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-resize .tui-image-editor-submenu, -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-submenu, -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-submenu, -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-shape .tui-image-editor-submenu, -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-text .tui-image-editor-submenu, -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-mask .tui-image-editor-submenu, -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-icon .tui-image-editor-submenu, -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-draw .tui-image-editor-submenu, -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-submenu, -.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-zoom .tui-image-editor-submenu { - display: table; -} -.tui-image-editor-container .tui-image-editor-help-menu { - list-style: none; - padding: 0; - margin: 0 auto; - text-align: center; - vertical-align: middle; - border-radius: 20px; - background-color: rgba(255,255,255,0.06); - z-index: 2; - position: absolute; -} -.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history { - display: none; - background-color: #fff; - color: #444; - position: absolute; - width: 196px; - height: 276px; - padding: 4px 2px; - box-shadow: 0 2px 6px 0 rgba(0,0,0,0.15); - cursor: auto; - transform: translateX(calc(-50% + 12px)); -} -.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list { - height: 268px; - padding: 0; - overflow: hidden scroll; - list-style: none; -} -.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item { - height: 24px; - font-size: 11px; - line-height: 24px; -} -.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item { - position: relative; - height: 24px; - cursor: pointer; -} -.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item svg { - width: 24px; - height: 24px; -} -.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item span { - display: inline-block; - width: 128px; - height: 24px; - text-align: left; -} -.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-icon { - display: inline-block; - width: 24px; - height: 24px; - position: absolute; - top: 6px; - left: 6px; -} -.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-checkbox { - display: none; - width: 24px; - height: 24px; - position: absolute; - top: 5px; - right: -6px; -} -.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.selected-item { - background-color: rgba(119,119,119,0.12); -} -.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.selected-item .history-item-checkbox { - display: inline-block; -} -.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.disabled-item { - color: #333; - opacity: 0.3; -} -.tui-image-editor-container .tui-image-editor-help-menu .opened .tie-panel-history { - display: block; -} -.tui-image-editor-container .tui-image-editor-help-menu .opened .tie-panel-history:before { - content: ''; - position: absolute; - display: inline-block; - margin: 0 auto; - width: 0; - height: 0; -} -.tui-image-editor-container .filter-color-item { - display: inline-block; -} -.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox { - display: block; -} -.tui-image-editor-container .tui-image-editor-checkbox-wrap { - display: inline-block !important; - text-align: left; -} -.tui-image-editor-container .tui-image-editor-checkbox-wrap.fixed-width { - width: 187px; - white-space: normal; -} -.tui-image-editor-container .tui-image-editor-checkbox { - display: inline-block; - margin: 1px 0 1px 0; -} -.tui-image-editor-container .tui-image-editor-checkbox input { - width: 14px; - height: 14px; - opacity: 0; -} -.tui-image-editor-container .tui-image-editor-checkbox > label > span { - color: #fff; - height: 14px; - position: relative; -} -.tui-image-editor-container .tui-image-editor-checkbox input + label:before, -.tui-image-editor-container .tui-image-editor-checkbox > label > span:before { - content: ''; - position: absolute; - width: 14px; - height: 14px; - background-color: #fff; - top: 6px; - left: -19px; - display: inline-block; - margin: 0; - text-align: center; - font-size: 11px; - border: 0; - border-radius: 2px; - padding-top: 1px; - box-sizing: border-box; -} -.tui-image-editor-container .tui-image-editor-checkbox input[type='checkbox']:checked + span:before { - background-size: cover; - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAMBJREFUKBWVkjEOwjAMRe2WgZW7IIHEDdhghhuwcQ42rlJugAQS54Cxa5cq1QM5TUpByZfS2j9+dlJVt/tX5ZxbS4ZU9VLkQvSHKTIGRaVJYFmKrBbTCJxE2UgCdDzMZDkHrOV6b95V0US6UmgKodujEZbJg0B0ZgEModO5lrY1TMQf1TpyJGBEjD+E2NPN7ukIUDiF/BfEXgRiGEw8NgkffYGYwCi808fpn/6OvfUfsDr/Vc1IfRf8sKnFVqeiVQfDu0tf/nWH9gAAAABJRU5ErkJggg=="); -} -.tui-image-editor-container .tui-image-editor-selectlist-wrap { - position: relative; -} -.tui-image-editor-container .tui-image-editor-selectlist-wrap select { - width: 100%; - height: 28px; - margin-top: 4px; - border: 0; - outline: 0; - border-radius: 0; - border: 1px solid #cbdbdb; - background-color: #fff; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - padding: 0 7px 0 10px; -} -.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist { - display: none; - position: relative; - top: -1px; - border: 1px solid #ccc; - background-color: #fff; - border-top: 0px; - padding: 4px 0; -} -.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist li { - display: block; - text-align: left; - padding: 7px 10px; - font-family: 'Noto Sans', sans-serif; -} -.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist li:hover { - background-color: rgba(81,92,230,0.05); -} -.tui-image-editor-container .tui-image-editor-selectlist-wrap:before { - content: ''; - position: absolute; - display: inline-block; - width: 14px; - height: 14px; - right: 5px; - top: 10px; - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYBgFOEOAEVkmPDxc89+/f6eAYjzI4kD2FyYmJrOVK1deh4kzwRggGiQBVJCELAZig8SQNYHEmEEEMrh69eo1HR0dfqCYJUickZGxf9WqVf3IakBsFBthklpaWmVA9mEQhrJhUoTp0NBQCRAmrHL4qgAAuu4cWZOZIGsAAAAASUVORK5CYII="); - background-size: cover; -} -.tui-image-editor-container .tui-image-editor-selectlist-wrap select::-ms-expand { - display: none; -} -.tui-image-editor-container .tui-image-editor-virtual-range-bar .tui-image-editor-disabled, -.tui-image-editor-container .tui-image-editor-virtual-range-subbar .tui-image-editor-disabled, -.tui-image-editor-container .tui-image-editor-virtual-range-pointer .tui-image-editor-disabled { - backbround-color: #f00; -} -.tui-image-editor-container .tui-image-editor-range { - position: relative; - top: 5px; - width: 166px; - height: 17px; - display: inline-block; -} -.tui-image-editor-container .tui-image-editor-virtual-range-bar { - top: 7px; - position: absolute; - width: 100%; - height: 2px; - background-color: #666; -} -.tui-image-editor-container .tui-image-editor-virtual-range-subbar { - position: absolute; - height: 100%; - left: 0; - right: 0; - background-color: #d1d1d1; -} -.tui-image-editor-container .tui-image-editor-virtual-range-pointer { - position: absolute; - cursor: pointer; - top: -5px; - left: 0; - width: 12px; - height: 12px; - background-color: #fff; - border-radius: 100%; -} -.tui-image-editor-container .tui-image-editor-range-wrap { - display: inline-block; - margin-left: 4px; -} -.tui-image-editor-container .tui-image-editor-range-wrap.short .tui-image-editor-range { - width: 100px; -} -.tui-image-editor-container .color-picker-control .tui-image-editor-range { - width: 108px; - margin-left: 10px; -} -.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-pointer { - background-color: #333; -} -.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-bar { - background-color: #ccc; -} -.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-subbar { - background-color: #606060; -} -.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short { - margin-top: -2px; - margin-left: 19px; -} -.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label { - color: #8e8e8e; - font-weight: normal; -} -.tui-image-editor-container .tui-image-editor-range-wrap label { - vertical-align: baseline; - font-size: 11px; - margin-right: 7px; - color: #fff; -} -.tui-image-editor-container .tui-image-editor-range-value { - cursor: default; - width: 40px; - height: 24px; - outline: none; - border-radius: 2px; - box-shadow: none; - border: 1px solid #d5d5d5; - text-align: center; - background-color: #1c1c1c; - color: #fff; - font-weight: lighter; - vertical-align: baseline; - font-family: 'Noto Sans', sans-serif; - margin-top: 15px; - margin-left: 4px; -} -.tui-image-editor-container .tui-image-editor-controls { - position: absolute; - background-color: #151515; - width: 100%; - height: 64px; - display: table; - bottom: 0; - z-index: 2; -} -.tui-image-editor-container .tui-image-editor-icpartition { - display: inline-block; - background-color: #444; - width: 1px; - height: 24px; -} -.tui-image-editor-container.left .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:before { - left: 28px; - top: 11px; - border-right: 7px solid #2f2f2f; - border-top: 7px solid transparent; - border-bottom: 7px solid transparent; -} -.tui-image-editor-container.left .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:after { - top: 7px; - left: 42px; - white-space: nowrap; -} -.tui-image-editor-container.left .tui-image-editor-submenu { - left: 0; - height: 100%; - width: 248px; -} -.tui-image-editor-container.left .tui-image-editor-main-container { - left: 64px; - width: calc(100% - 64px); - height: 100%; -} -.tui-image-editor-container.left .tui-image-editor-controls { - width: 64px; - height: 100%; - display: table; -} -.tui-image-editor-container.left .tui-image-editor-menu, -.tui-image-editor-container.right .tui-image-editor-menu { - white-space: inherit; -} -.tui-image-editor-container.left .tui-image-editor-submenu, -.tui-image-editor-container.right .tui-image-editor-submenu { - white-space: normal; -} -.tui-image-editor-container.left .tui-image-editor-submenu > div, -.tui-image-editor-container.right .tui-image-editor-submenu > div { - vertical-align: middle; -} -.tui-image-editor-container.left .tui-image-editor-controls li, -.tui-image-editor-container.right .tui-image-editor-controls li { - display: inline-block; - margin: 4px auto; -} -.tui-image-editor-container.left .tui-image-editor-icpartition, -.tui-image-editor-container.right .tui-image-editor-icpartition { - position: relative; - top: -7px; - width: 24px; - height: 1px; -} -.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition, -.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition { - display: block; - width: 75%; - margin: auto; -} -.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition > div, -.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition > div { - border-left: 0; - height: 10px; - border-bottom: 1px solid #3c3c3c; - width: 100%; - margin: 0; -} -.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-align, -.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-align { - margin-right: 0; -} -.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-item li, -.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-item li { - margin-top: 15px; -} -.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-colorpicker-clearfix li, -.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-colorpicker-clearfix li { - margin-top: 0; -} -.tui-image-editor-container.left .tui-image-editor-checkbox-wrap.fixed-width, -.tui-image-editor-container.right .tui-image-editor-checkbox-wrap.fixed-width { - width: 182px; - white-space: normal; -} -.tui-image-editor-container.left .tui-image-editor-range-wrap.tui-image-editor-newline label.range, -.tui-image-editor-container.right .tui-image-editor-range-wrap.tui-image-editor-newline label.range { - display: block; - text-align: left; - width: 75%; - margin: auto; -} -.tui-image-editor-container.left .tui-image-editor-range, -.tui-image-editor-container.right .tui-image-editor-range { - width: 136px; -} -.tui-image-editor-container.right .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:before { - left: -3px; - top: 11px; - border-left: 7px solid #2f2f2f; - border-top: 7px solid transparent; - border-bottom: 7px solid transparent; -} -.tui-image-editor-container.right .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:after { - top: 7px; - left: unset; - right: 43px; - white-space: nowrap; -} -.tui-image-editor-container.right .tui-image-editor-submenu { - right: 0; - height: 100%; - width: 248px; -} -.tui-image-editor-container.right .tui-image-editor-main-container { - right: 64px; - width: calc(100% - 64px); - height: 100%; -} -.tui-image-editor-container.right .tui-image-editor-controls { - right: 0; - width: 64px; - height: 100%; - display: table; -} -.tui-image-editor-container.top .tui-image-editor-submenu .tui-image-editor-partition.only-left-right, -.tui-image-editor-container.bottom .tui-image-editor-submenu .tui-image-editor-partition.only-left-right { - display: none; -} -.tui-image-editor-container.bottom .tui-image-editor-submenu > div { - padding-bottom: 24px; -} -.tui-image-editor-container.top .color-picker-control .triangle { - top: -8px; - border-right: 7px solid transparent; - border-top: 0px; - border-left: 7px solid transparent; - border-bottom: 8px solid #fff; -} -.tui-image-editor-container.top .tui-image-editor-size-wrap { - height: 100%; -} -.tui-image-editor-container.top .tui-image-editor-main-container { - bottom: 0; -} -.tui-image-editor-container.top .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:before { - left: 13px; - border-top: 0; - border-bottom: 7px solid #2f2f2f; - top: 33px; -} -.tui-image-editor-container.top .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:after { - top: 38px; -} -.tui-image-editor-container.top .tui-image-editor-submenu { - top: 0; - bottom: auto; -} -.tui-image-editor-container.top .tui-image-editor-submenu > div { - padding-top: 24px; - vertical-align: top; -} -.tui-image-editor-container.top .tui-image-editor-controls-logo { - display: table-cell; -} -.tui-image-editor-container.top .tui-image-editor-controls-buttons { - display: table-cell; -} -.tui-image-editor-container.top .tui-image-editor-main { - top: 64px; - height: calc(100% - 64px); -} -.tui-image-editor-container.top .tui-image-editor-controls { - top: 0; - bottom: inherit; -} -.tui-image-editor-container .tui-image-editor-help-menu.top { - white-space: nowrap; - width: 506px; - height: 40px; - top: 8px; - left: 50%; - transform: translateX(-50%); -} -.tui-image-editor-container .tui-image-editor-help-menu.top .tie-panel-history { - top: 45px; -} -.tui-image-editor-container .tui-image-editor-help-menu.top .opened .tie-panel-history:before { - border-right: 8px solid transparent; - border-left: 8px solid transparent; - border-bottom: 8px solid #fff; - left: 90px; - top: -8px; -} -.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content]:before { - left: 13px; - top: 35px; - border: none; - border-bottom: 7px solid #2f2f2f; - border-left: 7px solid transparent; - border-right: 7px solid transparent; -} -.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content]:after { - top: 41px; - left: -4px; - white-space: nowrap; -} -.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content].opened:before, -.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content].opened:after { - content: none; -} -.tui-image-editor-container .tui-image-editor-help-menu.bottom { - white-space: nowrap; - width: 506px; - height: 40px; - bottom: 8px; - left: 50%; - transform: translateX(-50%); -} -.tui-image-editor-container .tui-image-editor-help-menu.bottom .tie-panel-history { - bottom: 45px; -} -.tui-image-editor-container .tui-image-editor-help-menu.bottom .opened .tie-panel-history:before { - border-right: 8px solid transparent; - border-left: 8px solid transparent; - border-top: 8px solid #fff; - left: 90px; - bottom: -8px; -} -.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content]:before { - left: 13px; - top: auto; - bottom: 36px; - border: none; - border-top: 7px solid #2f2f2f; - border-left: 7px solid transparent; - border-right: 7px solid transparent; -} -.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content]:after { - top: auto; - left: -4px; - bottom: 41px; - white-space: nowrap; -} -.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content].opened:before, -.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content].opened:after { - content: none; -} -.tui-image-editor-container .tui-image-editor-help-menu.left { - white-space: inherit; - width: 40px; - height: 506px; - left: 8px; - top: 50%; - transform: translateY(-50%); -} -.tui-image-editor-container .tui-image-editor-help-menu.left .tie-panel-history { - left: 140px; - top: -4px; -} -.tui-image-editor-container .tui-image-editor-help-menu.left .opened .tie-panel-history:before { - border-top: 8px solid transparent; - border-bottom: 8px solid transparent; - border-right: 8px solid #fff; - left: -8px; - top: 14px; -} -.tui-image-editor-container .tui-image-editor-help-menu.left .tui-image-editor-item { - margin: 4px auto; - padding: 6px 8px; -} -.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content]:before { - left: 27px; - top: 11px; - border: none; - border-right: 7px solid #2f2f2f; - border-top: 7px solid transparent; - border-bottom: 7px solid transparent; -} -.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content]:after { - top: 7px; - left: 40px; - white-space: nowrap; -} -.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content].opened:before, -.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content].opened:after { - content: none; -} -.tui-image-editor-container .tui-image-editor-help-menu.right { - white-space: inherit; - width: 40px; - height: 506px; - right: 8px; - top: 50%; - transform: translateY(-50%); -} -.tui-image-editor-container .tui-image-editor-help-menu.right .tie-panel-history { - right: -30px; - top: -4px; -} -.tui-image-editor-container .tui-image-editor-help-menu.right .opened .tie-panel-history:before { - border-top: 8px solid transparent; - border-bottom: 8px solid transparent; - border-left: 8px solid #fff; - right: -8px; - top: 14px; -} -.tui-image-editor-container .tui-image-editor-help-menu.right .tui-image-editor-item { - margin: 4px auto; - padding: 6px 8px; -} -.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content]:before { - left: -6px; - top: 11px; - border: none; - border-left: 7px solid #2f2f2f; - border-top: 7px solid transparent; - border-bottom: 7px solid transparent; -} -.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content]:after { - top: 7px; - left: auto; - right: 39px; - white-space: nowrap; -} -.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content].opened:before, -.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content].opened:after { - content: none; -} -.tui-image-editor-container .tie-icon-add-button .tui-image-editor-button { - min-width: 42px; -} -.tui-image-editor-container .svg_ic-menu, -.tui-image-editor-container .svg_ic-helpmenu { - width: 24px; - height: 24px; -} -.tui-image-editor-container .svg_ic-submenu { - width: 32px; - height: 32px; -} -.tui-image-editor-container .svg_img-bi { - width: 257px; - height: 26px; -} -.tui-image-editor-container .tui-image-editor-help-menu svg > use, -.tui-image-editor-container .tui-image-editor-controls svg > use { - display: none; -} -.tui-image-editor-container .tui-image-editor-help-menu .enabled svg:hover > use.hover, -.tui-image-editor-container .tui-image-editor-controls .enabled svg:hover > use.hover, -.tui-image-editor-container .tui-image-editor-help-menu .normal svg:hover > use.hover, -.tui-image-editor-container .tui-image-editor-controls .normal svg:hover > use.hover { - display: block; -} -.tui-image-editor-container .tui-image-editor-help-menu .active svg:hover > use.hover, -.tui-image-editor-container .tui-image-editor-controls .active svg:hover > use.hover { - display: none; -} -.tui-image-editor-container .tui-image-editor-help-menu .on svg > use.hover, -.tui-image-editor-container .tui-image-editor-controls .on svg > use.hover, -.tui-image-editor-container .tui-image-editor-help-menu .opened svg > use.hover, -.tui-image-editor-container .tui-image-editor-controls .opened svg > use.hover { - display: block; -} -.tui-image-editor-container .tui-image-editor-help-menu svg > use.normal, -.tui-image-editor-container .tui-image-editor-controls svg > use.normal { - display: block; -} -.tui-image-editor-container .tui-image-editor-help-menu .active svg > use.active, -.tui-image-editor-container .tui-image-editor-controls .active svg > use.active { - display: block; -} -.tui-image-editor-container .tui-image-editor-help-menu .enabled svg > use.enabled, -.tui-image-editor-container .tui-image-editor-controls .enabled svg > use.enabled { - display: block; -} -.tui-image-editor-container .tui-image-editor-help-menu .active svg > use.normal, -.tui-image-editor-container .tui-image-editor-controls .active svg > use.normal, -.tui-image-editor-container .tui-image-editor-help-menu .enabled svg > use.normal, -.tui-image-editor-container .tui-image-editor-controls .enabled svg > use.normal { - display: none; -} -.tui-image-editor-container .tui-image-editor-help-menu .help svg > use.disabled, -.tui-image-editor-container .tui-image-editor-controls .help svg > use.disabled, -.tui-image-editor-container .tui-image-editor-help-menu .help.enabled svg > use.normal, -.tui-image-editor-container .tui-image-editor-controls .help.enabled svg > use.normal { - display: block; -} -.tui-image-editor-container .tui-image-editor-help-menu .help.enabled svg > use.disabled, -.tui-image-editor-container .tui-image-editor-controls .help.enabled svg > use.disabled { - display: none; -} -.tui-image-editor-container .tui-image-editor-controls:hover { - z-index: 3; -} -.tui-image-editor-container div.tui-colorpicker-clearfix { - width: 159px; - height: 28px; - border: 1px solid #d5d5d5; - border-radius: 2px; - background-color: #f5f5f5; - margin-top: 6px; - padding: 4px 7px 4px 7px; -} -.tui-image-editor-container .tui-colorpicker-palette-hex { - width: 114px; - background-color: #f5f5f5; - border: 0; - font-size: 11px; - margin-top: 2px; - font-family: 'Noto Sans', sans-serif; -} -.tui-image-editor-container .tui-colorpicker-palette-hex[value='#ffffff'] + .tui-colorpicker-palette-preview, -.tui-image-editor-container .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview { - border: 1px solid #ccc; -} -.tui-image-editor-container .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview { - background-size: cover; - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC"); -} -.tui-image-editor-container .tui-colorpicker-palette-preview { - border-radius: 100%; - float: left; - width: 17px; - height: 17px; - border: 0; -} -.tui-image-editor-container .color-picker-control { - position: absolute; - display: none; - z-index: 99; - width: 192px; - background-color: #fff; - box-shadow: 0 3px 22px 6px rgba(0,0,0,0.15); - padding: 16px; - border-radius: 2px; -} -.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-toggle-slider { - display: none; -} -.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button { - border: 0; - border-radius: 100%; - margin: 2px; - background-size: cover; - font-size: 1px; -} -.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button[title='#ffffff'] { - border: 1px solid #ccc; -} -.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button[title=''] { - border: 1px solid #ccc; -} -.tui-image-editor-container .color-picker-control .triangle { - width: 0; - height: 0; - border-right: 7px solid transparent; - border-top: 8px solid #fff; - border-left: 7px solid transparent; - position: absolute; - bottom: -8px; - left: 84px; -} -.tui-image-editor-container .color-picker-control .tui-colorpicker-container, -.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container ul, -.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container { - width: 100%; - height: auto; -} -.tui-image-editor-container .filter-color-item .color-picker-control label { - font-color: #333; - font-weight: normal; - margin-right: 7pxleft; -} -.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox { - margin-top: 0; -} -.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox input + label:before, -.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox > label:before { - left: -16px; -} -.tui-image-editor-container .color-picker { - width: 100%; - height: auto; -} -.tui-image-editor-container .color-picker-value { - width: 32px; - height: 32px; - border: 0px; - border-radius: 100%; - margin: auto; - margin-bottom: 1px; -} -.tui-image-editor-container .color-picker-value.transparent { - border: 1px solid #cbcbcb; - background-size: cover; - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC"); -} -.tui-image-editor-container .color-picker-value + label { - color: #fff; -} -.tui-image-editor-container .tui-image-editor-submenu svg > use { - display: none; -} -.tui-image-editor-container .tui-image-editor-submenu svg > use.normal { - display: block; -} -.tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype="icon-bubble"] svg > use.active, -.tie-icon-add-button.icon-heart .tui-image-editor-button[data-icontype="icon-heart"] svg > use.active, -.tie-icon-add-button.icon-location .tui-image-editor-button[data-icontype="icon-location"] svg > use.active, -.tie-icon-add-button.icon-polygon .tui-image-editor-button[data-icontype="icon-polygon"] svg > use.active, -.tie-icon-add-button.icon-star .tui-image-editor-button[data-icontype="icon-star"] svg > use.active, -.tie-icon-add-button.icon-star-2 .tui-image-editor-button[data-icontype="icon-star-2"] svg > use.active, -.tie-icon-add-button.icon-arrow-3 .tui-image-editor-button[data-icontype="icon-arrow-3"] svg > use.active, -.tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype="icon-arrow-2"] svg > use.active, -.tie-icon-add-button.icon-arrow .tui-image-editor-button[data-icontype="icon-arrow"] svg > use.active { - display: block; -} -.tie-draw-line-select-button.line .tui-image-editor-button.line svg > use.normal, -.tie-draw-line-select-button.free .tui-image-editor-button.free svg > use.normal { - display: none; -} -.tie-draw-line-select-button.line .tui-image-editor-button.line svg > use.active, -.tie-draw-line-select-button.free .tui-image-editor-button.free svg > use.active { - display: block; -} -.tie-flip-button.resetFlip .tui-image-editor-button.resetFlip svg > use.normal, -.tie-flip-button.flipX .tui-image-editor-button.flipX svg > use.normal, -.tie-flip-button.flipY .tui-image-editor-button.flipY svg > use.normal { - display: none; -} -.tie-flip-button.resetFlip .tui-image-editor-button.resetFlip svg > use.active, -.tie-flip-button.flipX .tui-image-editor-button.flipX svg > use.active, -.tie-flip-button.flipY .tui-image-editor-button.flipY svg > use.active { - display: block; -} -.tie-mask-apply.apply.active .tui-image-editor-button.apply label { - color: #fff; -} -.tie-mask-apply.apply.active .tui-image-editor-button.apply svg > use.active { - display: block; -} -.tie-crop-button .tui-image-editor-button.apply, -.tie-crop-preset-button .tui-image-editor-button.apply { - margin-right: 24px; -} -.tie-crop-button .tui-image-editor-button.preset.active svg > use.active, -.tie-crop-preset-button .tui-image-editor-button.preset.active svg > use.active { - display: block; -} -.tie-crop-button .tui-image-editor-button.apply.active svg > use.active, -.tie-crop-preset-button .tui-image-editor-button.apply.active svg > use.active { - display: block; -} -.tie-resize-button .tui-image-editor-button.apply, -.tie-resize-preset-button .tui-image-editor-button.apply { - margin-right: 24px; -} -.tie-resize-button .tui-image-editor-button.preset.active svg > use.active, -.tie-resize-preset-button .tui-image-editor-button.preset.active svg > use.active { - display: block; -} -.tie-resize-button .tui-image-editor-button.apply.active svg > use.active, -.tie-resize-preset-button .tui-image-editor-button.apply.active svg > use.active { - display: block; -} -.tie-shape-button.rect .tui-image-editor-button.rect svg > use.normal, -.tie-shape-button.circle .tui-image-editor-button.circle svg > use.normal, -.tie-shape-button.triangle .tui-image-editor-button.triangle svg > use.normal { - display: none; -} -.tie-shape-button.rect .tui-image-editor-button.rect svg > use.active, -.tie-shape-button.circle .tui-image-editor-button.circle svg > use.active, -.tie-shape-button.triangle .tui-image-editor-button.triangle svg > use.active { - display: block; -} -.tie-text-effect-button .tui-image-editor-button.active svg > use.active { - display: block; -} -.tie-text-align-button.tie-text-align-left .tui-image-editor-button.left svg > use.active, -.tie-text-align-button.tie-text-align-center .tui-image-editor-button.center svg > use.active, -.tie-text-align-button.tie-text-align-right .tui-image-editor-button.right svg > use.active { - display: block; -} -.tie-mask-image-file, -.tie-icon-image-file { - opacity: 0; - position: absolute; - width: 100%; - height: 100%; - border: 1px solid #008000; - cursor: inherit; - left: 0; - top: 0; -} -.tie-zoom-button.resetFlip .tui-image-editor-button.resetFlip svg > use.normal, -.tie-zoom-button.flipX .tui-image-editor-button.flipX svg > use.normal, -.tie-zoom-button.flipY .tui-image-editor-button.flipY svg > use.normal { - display: none; -} -.tie-zoom-button.resetFlip .tui-image-editor-button.resetFlip svg > use.active, -.tie-zoom-button.flipX .tui-image-editor-button.flipX svg > use.active, -.tie-zoom-button.flipY .tui-image-editor-button.flipY svg > use.active { - display: block; -} -.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls ul { - text-align: right; -} -.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls-logo { - display: none; -} -/*# sourceMappingURL=src/css/index.css.map */ - -/*# sourceMappingURL=tui-image-editor.css.map*/ \ No newline at end of file +body > textarea{position:fixed !important}.tui-image-editor-container{margin:0;padding:0;box-sizing:border-box;min-height:300px;height:100%;position:relative;background-color:#282828;overflow:hidden;letter-spacing:.3px}.tui-image-editor-container div,.tui-image-editor-container ul,.tui-image-editor-container label,.tui-image-editor-container input,.tui-image-editor-container li{box-sizing:border-box;margin:0;padding:0;-ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none}.tui-image-editor-container .tui-image-editor-header{min-width:533px;position:absolute;background-color:#151515;top:0;width:100%}.tui-image-editor-container .tui-image-editor-header-buttons,.tui-image-editor-container .tui-image-editor-controls-buttons{float:right;margin:8px}.tui-image-editor-container .tui-image-editor-header-logo,.tui-image-editor-container .tui-image-editor-controls-logo{float:left;width:30%;padding:17px}.tui-image-editor-container .tui-image-editor-controls-logo,.tui-image-editor-container .tui-image-editor-controls-buttons{width:270px;height:100%;display:none}.tui-image-editor-container .tui-image-editor-header-buttons button,.tui-image-editor-container .tui-image-editor-header-buttons div,.tui-image-editor-container .tui-image-editor-controls-buttons button,.tui-image-editor-container .tui-image-editor-controls-buttons div{display:inline-block;position:relative;width:120px;height:40px;padding:0;line-height:40px;outline:none;border-radius:20px;border:1px solid #ddd;font-family:'Noto Sans',sans-serif;font-size:12px;font-weight:bold;cursor:pointer;vertical-align:middle;letter-spacing:.3px;text-align:center}.tui-image-editor-container .tui-image-editor-download-btn{background-color:#fdba3b;border-color:#fdba3b;color:#fff}.tui-image-editor-container .tui-image-editor-load-btn{position:absolute;left:0;right:0;display:inline-block;top:0;bottom:0;width:100%;cursor:pointer;opacity:0}.tui-image-editor-container .tui-image-editor-main-container{position:absolute;width:100%;top:0;bottom:64px}.tui-image-editor-container .tui-image-editor-main{position:absolute;text-align:center;top:64px;bottom:0;right:0;left:0}.tui-image-editor-container .tui-image-editor-wrap{position:absolute;bottom:0;width:100%;overflow:auto}.tui-image-editor-container .tui-image-editor-wrap .tui-image-editor-size-wrap{display:table;width:100%;height:100%}.tui-image-editor-container .tui-image-editor-wrap .tui-image-editor-size-wrap .tui-image-editor-align-wrap{display:table-cell;vertical-align:middle}.tui-image-editor-container .tui-image-editor{position:relative;display:inline-block}.tui-image-editor-container .tui-image-editor-menu,.tui-image-editor-container .tui-image-editor-help-menu{width:auto;list-style:none;padding:0;margin:0 auto;display:table-cell;text-align:center;vertical-align:middle;white-space:nowrap}.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item,.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item{position:relative;display:inline-block;border-radius:2px;padding:7px 8px 3px 8px;cursor:pointer;margin:0 4px}.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:hover:before,.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item[tooltip-content]:hover:before{content:'';position:absolute;display:inline-block;margin:0 auto 0;width:0;height:0;border-right:7px solid transparent;border-top:7px solid #2f2f2f;border-left:7px solid transparent;left:13px;top:-2px}.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:hover:after,.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item[tooltip-content]:hover:after{content:attr(tooltip-content);position:absolute;display:inline-block;background-color:#2f2f2f;color:#fff;padding:5px 8px;font-size:11px;font-weight:lighter;border-radius:3px;max-height:23px;top:-25px;left:0;min-width:24px}.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item.active,.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item.active{background-color:#fff;transition:all .3s ease}.tui-image-editor-container .tui-image-editor-wrap{position:absolute}.tui-image-editor-container .tui-image-editor-grid-visual{display:none;position:absolute;width:100%;height:100%;border:1px solid rgba(255,255,255,0.7)}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor{transition:none}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-grid-visual,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-grid-visual,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-resize .tui-image-editor-grid-visual{display:block}.tui-image-editor-container .tui-image-editor-grid-visual table{width:100%;height:100%;border-collapse:collapse}.tui-image-editor-container .tui-image-editor-grid-visual table td{border:1px solid rgba(255,255,255,0.3)}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot:before{content:'';position:absolute;box-sizing:border-box;width:10px;height:10px;border:0;box-shadow:0 0 1px 0 rgba(0,0,0,0.3);border-radius:100%;background-color:#fff}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-top:before{top:-5px;left:-5px}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-top:before{top:-5px;right:-5px}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-bottom:before{bottom:-5px;left:-5px}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-bottom:before{bottom:-5px;right:-5px}.tui-image-editor-container .tui-image-editor-submenu{display:none;position:absolute;bottom:0;width:100%;height:150px;white-space:nowrap;z-index:2}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover svg > use.active{display:block}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item li{display:inline-block;vertical-align:top}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-newline{display:block;margin-top:0}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button{position:relative;cursor:pointer;display:inline-block;font-weight:normal;font-size:11px;margin:0 9px 0 9px}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.preset{margin:0 9px 20px 5px}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item label > span{display:inline-block;cursor:pointer;padding-top:5px;font-family:"Noto Sans",sans-serif;font-size:11px}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.apply label,.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.cancel label{vertical-align:7px}.tui-image-editor-container .tui-image-editor-submenu > div{display:none;vertical-align:bottom}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-style{opacity:.95;z-index:-1;position:absolute;top:0;bottom:0;left:0;right:0;display:block}.tui-image-editor-container .tui-image-editor-partition > div{width:1px;height:52px;border-left:1px solid #3c3c3c;margin:0 8px 0 8px}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-partition > div{height:108px;margin:0 29px 0 0}.tui-image-editor-container .tui-image-editor-submenu-align{text-align:left;margin-right:30px}.tui-image-editor-container .tui-image-editor-submenu-align label > span{width:55px;white-space:nowrap}.tui-image-editor-container .tui-image-editor-submenu-align:first-child{margin-right:0}.tui-image-editor-container .tui-image-editor-submenu-align:first-child label > span{width:70px}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-crop .tui-image-editor-submenu > div.tui-image-editor-menu-crop,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-resize .tui-image-editor-submenu > div.tui-image-editor-menu-resize,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-submenu > div.tui-image-editor-menu-flip,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-submenu > div.tui-image-editor-menu-rotate,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-shape .tui-image-editor-submenu > div.tui-image-editor-menu-shape,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-text .tui-image-editor-submenu > div.tui-image-editor-menu-text,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-mask .tui-image-editor-submenu > div.tui-image-editor-menu-mask,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-icon .tui-image-editor-submenu > div.tui-image-editor-menu-icon,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-draw .tui-image-editor-submenu > div.tui-image-editor-menu-draw,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-submenu > div.tui-image-editor-menu-filter,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-zoom .tui-image-editor-submenu > div.tui-image-editor-menu-zoom{display:table-cell}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-crop .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-resize .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-shape .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-text .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-mask .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-icon .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-draw .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-zoom .tui-image-editor-submenu{display:table}.tui-image-editor-container .tui-image-editor-help-menu{list-style:none;padding:0;margin:0 auto;text-align:center;vertical-align:middle;border-radius:20px;background-color:rgba(255,255,255,0.06);z-index:2;position:absolute}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history{display:none;background-color:#fff;color:#444;position:absolute;width:196px;height:276px;padding:4px 2px;box-shadow:0 2px 6px 0 rgba(0,0,0,0.15);cursor:auto;transform:translateX(calc(-50% + 12px))}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list{height:268px;padding:0;overflow:hidden scroll;list-style:none}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item{height:24px;font-size:11px;line-height:24px}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item{position:relative;height:24px;cursor:pointer}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item svg{width:24px;height:24px}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item span{display:inline-block;width:128px;height:24px;text-align:left}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-icon{display:inline-block;width:24px;height:24px;position:absolute;top:6px;left:6px}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-checkbox{display:none;width:24px;height:24px;position:absolute;top:5px;right:-6px}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.selected-item{background-color:rgba(119,119,119,0.12)}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.selected-item .history-item-checkbox{display:inline-block}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.disabled-item{color:#333;opacity:.3}.tui-image-editor-container .tui-image-editor-help-menu .opened .tie-panel-history{display:block}.tui-image-editor-container .tui-image-editor-help-menu .opened .tie-panel-history:before{content:'';position:absolute;display:inline-block;margin:0 auto;width:0;height:0}.tui-image-editor-container .filter-color-item{display:inline-block}.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox{display:block}.tui-image-editor-container .tui-image-editor-checkbox-wrap{display:inline-block !important;text-align:left}.tui-image-editor-container .tui-image-editor-checkbox-wrap.fixed-width{width:187px;white-space:normal}.tui-image-editor-container .tui-image-editor-checkbox{display:inline-block;margin:1px 0 1px 0}.tui-image-editor-container .tui-image-editor-checkbox input{width:14px;height:14px;opacity:0}.tui-image-editor-container .tui-image-editor-checkbox > label > span{color:#fff;height:14px;position:relative}.tui-image-editor-container .tui-image-editor-checkbox input + label:before,.tui-image-editor-container .tui-image-editor-checkbox > label > span:before{content:'';position:absolute;width:14px;height:14px;background-color:#fff;top:6px;left:-19px;display:inline-block;margin:0;text-align:center;font-size:11px;border:0;border-radius:2px;padding-top:1px;box-sizing:border-box}.tui-image-editor-container .tui-image-editor-checkbox input[type='checkbox']:checked + span:before{background-size:cover;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAMBJREFUKBWVkjEOwjAMRe2WgZW7IIHEDdhghhuwcQ42rlJugAQS54Cxa5cq1QM5TUpByZfS2j9+dlJVt/tX5ZxbS4ZU9VLkQvSHKTIGRaVJYFmKrBbTCJxE2UgCdDzMZDkHrOV6b95V0US6UmgKodujEZbJg0B0ZgEModO5lrY1TMQf1TpyJGBEjD+E2NPN7ukIUDiF/BfEXgRiGEw8NgkffYGYwCi808fpn/6OvfUfsDr/Vc1IfRf8sKnFVqeiVQfDu0tf/nWH9gAAAABJRU5ErkJggg==)}.tui-image-editor-container .tui-image-editor-selectlist-wrap{position:relative}.tui-image-editor-container .tui-image-editor-selectlist-wrap select{width:100%;height:28px;margin-top:4px;border:0;outline:0;border-radius:0;border:1px solid #cbdbdb;background-color:#fff;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0 7px 0 10px}.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist{display:none;position:relative;top:-1px;border:1px solid #ccc;background-color:#fff;border-top:0;padding:4px 0}.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist li{display:block;text-align:left;padding:7px 10px;font-family:'Noto Sans',sans-serif}.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist li:hover{background-color:rgba(81,92,230,0.05)}.tui-image-editor-container .tui-image-editor-selectlist-wrap:before{content:'';position:absolute;display:inline-block;width:14px;height:14px;right:5px;top:10px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYBgFOEOAEVkmPDxc89+/f6eAYjzI4kD2FyYmJrOVK1deh4kzwRggGiQBVJCELAZig8SQNYHEmEEEMrh69eo1HR0dfqCYJUickZGxf9WqVf3IakBsFBthklpaWmVA9mEQhrJhUoTp0NBQCRAmrHL4qgAAuu4cWZOZIGsAAAAASUVORK5CYII=);background-size:cover}.tui-image-editor-container .tui-image-editor-selectlist-wrap select::-ms-expand{display:none}.tui-image-editor-container .tui-image-editor-virtual-range-bar .tui-image-editor-disabled,.tui-image-editor-container .tui-image-editor-virtual-range-subbar .tui-image-editor-disabled,.tui-image-editor-container .tui-image-editor-virtual-range-pointer .tui-image-editor-disabled{backbround-color:#f00}.tui-image-editor-container .tui-image-editor-range{position:relative;top:5px;width:166px;height:17px;display:inline-block}.tui-image-editor-container .tui-image-editor-virtual-range-bar{top:7px;position:absolute;width:100%;height:2px;background-color:#666}.tui-image-editor-container .tui-image-editor-virtual-range-subbar{position:absolute;height:100%;left:0;right:0;background-color:#d1d1d1}.tui-image-editor-container .tui-image-editor-virtual-range-pointer{position:absolute;cursor:pointer;top:-5px;left:0;width:12px;height:12px;background-color:#fff;border-radius:100%}.tui-image-editor-container .tui-image-editor-range-wrap{display:inline-block;margin-left:4px}.tui-image-editor-container .tui-image-editor-range-wrap.short .tui-image-editor-range{width:100px}.tui-image-editor-container .color-picker-control .tui-image-editor-range{width:108px;margin-left:10px}.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-pointer{background-color:#333}.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-bar{background-color:#ccc}.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-subbar{background-color:#606060}.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short{margin-top:-2px;margin-left:19px}.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label{color:#8e8e8e;font-weight:normal}.tui-image-editor-container .tui-image-editor-range-wrap label{vertical-align:baseline;font-size:11px;margin-right:7px;color:#fff}.tui-image-editor-container .tui-image-editor-range-value{cursor:default;width:40px;height:24px;outline:none;border-radius:2px;box-shadow:none;border:1px solid #d5d5d5;text-align:center;background-color:#1c1c1c;color:#fff;font-weight:lighter;vertical-align:baseline;font-family:'Noto Sans',sans-serif;margin-top:15px;margin-left:4px}.tui-image-editor-container .tui-image-editor-controls{position:absolute;background-color:#151515;width:100%;height:64px;display:table;bottom:0;z-index:2}.tui-image-editor-container .tui-image-editor-icpartition{display:inline-block;background-color:#444;width:1px;height:24px}.tui-image-editor-container.left .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:before{left:28px;top:11px;border-right:7px solid #2f2f2f;border-top:7px solid transparent;border-bottom:7px solid transparent}.tui-image-editor-container.left .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:after{top:7px;left:42px;white-space:nowrap}.tui-image-editor-container.left .tui-image-editor-submenu{left:0;height:100%;width:248px}.tui-image-editor-container.left .tui-image-editor-main-container{left:64px;width:calc(100% - 64px);height:100%}.tui-image-editor-container.left .tui-image-editor-controls{width:64px;height:100%;display:table}.tui-image-editor-container.left .tui-image-editor-menu,.tui-image-editor-container.right .tui-image-editor-menu{white-space:inherit}.tui-image-editor-container.left .tui-image-editor-submenu,.tui-image-editor-container.right .tui-image-editor-submenu{white-space:normal}.tui-image-editor-container.left .tui-image-editor-submenu > div,.tui-image-editor-container.right .tui-image-editor-submenu > div{vertical-align:middle}.tui-image-editor-container.left .tui-image-editor-controls li,.tui-image-editor-container.right .tui-image-editor-controls li{display:inline-block;margin:4px auto}.tui-image-editor-container.left .tui-image-editor-icpartition,.tui-image-editor-container.right .tui-image-editor-icpartition{position:relative;top:-7px;width:24px;height:1px}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition{display:block;width:75%;margin:auto}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition > div,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition > div{border-left:0;height:10px;border-bottom:1px solid #3c3c3c;width:100%;margin:0}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-align,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-align{margin-right:0}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-item li,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-item li{margin-top:15px}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-colorpicker-clearfix li,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-colorpicker-clearfix li{margin-top:0}.tui-image-editor-container.left .tui-image-editor-checkbox-wrap.fixed-width,.tui-image-editor-container.right .tui-image-editor-checkbox-wrap.fixed-width{width:182px;white-space:normal}.tui-image-editor-container.left .tui-image-editor-range-wrap.tui-image-editor-newline label.range,.tui-image-editor-container.right .tui-image-editor-range-wrap.tui-image-editor-newline label.range{display:block;text-align:left;width:75%;margin:auto}.tui-image-editor-container.left .tui-image-editor-range,.tui-image-editor-container.right .tui-image-editor-range{width:136px}.tui-image-editor-container.right .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:before{left:-3px;top:11px;border-left:7px solid #2f2f2f;border-top:7px solid transparent;border-bottom:7px solid transparent}.tui-image-editor-container.right .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:after{top:7px;left:unset;right:43px;white-space:nowrap}.tui-image-editor-container.right .tui-image-editor-submenu{right:0;height:100%;width:248px}.tui-image-editor-container.right .tui-image-editor-main-container{right:64px;width:calc(100% - 64px);height:100%}.tui-image-editor-container.right .tui-image-editor-controls{right:0;width:64px;height:100%;display:table}.tui-image-editor-container.top .tui-image-editor-submenu .tui-image-editor-partition.only-left-right,.tui-image-editor-container.bottom .tui-image-editor-submenu .tui-image-editor-partition.only-left-right{display:none}.tui-image-editor-container.bottom .tui-image-editor-submenu > div{padding-bottom:24px}.tui-image-editor-container.top .color-picker-control .triangle{top:-8px;border-right:7px solid transparent;border-top:0;border-left:7px solid transparent;border-bottom:8px solid #fff}.tui-image-editor-container.top .tui-image-editor-size-wrap{height:100%}.tui-image-editor-container.top .tui-image-editor-main-container{bottom:0}.tui-image-editor-container.top .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:before{left:13px;border-top:0;border-bottom:7px solid #2f2f2f;top:33px}.tui-image-editor-container.top .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:after{top:38px}.tui-image-editor-container.top .tui-image-editor-submenu{top:0;bottom:auto}.tui-image-editor-container.top .tui-image-editor-submenu > div{padding-top:24px;vertical-align:top}.tui-image-editor-container.top .tui-image-editor-controls-logo{display:table-cell}.tui-image-editor-container.top .tui-image-editor-controls-buttons{display:table-cell}.tui-image-editor-container.top .tui-image-editor-main{top:64px;height:calc(100% - 64px)}.tui-image-editor-container.top .tui-image-editor-controls{top:0;bottom:inherit}.tui-image-editor-container .tui-image-editor-help-menu.top{white-space:nowrap;width:506px;height:40px;top:8px;left:50%;transform:translateX(-50%)}.tui-image-editor-container .tui-image-editor-help-menu.top .tie-panel-history{top:45px}.tui-image-editor-container .tui-image-editor-help-menu.top .opened .tie-panel-history:before{border-right:8px solid transparent;border-left:8px solid transparent;border-bottom:8px solid #fff;left:90px;top:-8px}.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content]:before{left:13px;top:35px;border:none;border-bottom:7px solid #2f2f2f;border-left:7px solid transparent;border-right:7px solid transparent}.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content]:after{top:41px;left:-4px;white-space:nowrap}.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content].opened:before,.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content].opened:after{content:none}.tui-image-editor-container .tui-image-editor-help-menu.bottom{white-space:nowrap;width:506px;height:40px;bottom:8px;left:50%;transform:translateX(-50%)}.tui-image-editor-container .tui-image-editor-help-menu.bottom .tie-panel-history{bottom:45px}.tui-image-editor-container .tui-image-editor-help-menu.bottom .opened .tie-panel-history:before{border-right:8px solid transparent;border-left:8px solid transparent;border-top:8px solid #fff;left:90px;bottom:-8px}.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content]:before{left:13px;top:auto;bottom:36px;border:none;border-top:7px solid #2f2f2f;border-left:7px solid transparent;border-right:7px solid transparent}.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content]:after{top:auto;left:-4px;bottom:41px;white-space:nowrap}.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content].opened:before,.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content].opened:after{content:none}.tui-image-editor-container .tui-image-editor-help-menu.left{white-space:inherit;width:40px;height:506px;left:8px;top:50%;transform:translateY(-50%)}.tui-image-editor-container .tui-image-editor-help-menu.left .tie-panel-history{left:140px;top:-4px}.tui-image-editor-container .tui-image-editor-help-menu.left .opened .tie-panel-history:before{border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid #fff;left:-8px;top:14px}.tui-image-editor-container .tui-image-editor-help-menu.left .tui-image-editor-item{margin:4px auto;padding:6px 8px}.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content]:before{left:27px;top:11px;border:none;border-right:7px solid #2f2f2f;border-top:7px solid transparent;border-bottom:7px solid transparent}.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content]:after{top:7px;left:40px;white-space:nowrap}.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content].opened:before,.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content].opened:after{content:none}.tui-image-editor-container .tui-image-editor-help-menu.right{white-space:inherit;width:40px;height:506px;right:8px;top:50%;transform:translateY(-50%)}.tui-image-editor-container .tui-image-editor-help-menu.right .tie-panel-history{right:-30px;top:-4px}.tui-image-editor-container .tui-image-editor-help-menu.right .opened .tie-panel-history:before{border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid #fff;right:-8px;top:14px}.tui-image-editor-container .tui-image-editor-help-menu.right .tui-image-editor-item{margin:4px auto;padding:6px 8px}.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content]:before{left:-6px;top:11px;border:none;border-left:7px solid #2f2f2f;border-top:7px solid transparent;border-bottom:7px solid transparent}.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content]:after{top:7px;left:auto;right:39px;white-space:nowrap}.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content].opened:before,.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content].opened:after{content:none}.tui-image-editor-container .tie-icon-add-button .tui-image-editor-button{min-width:42px}.tui-image-editor-container .svg_ic-menu,.tui-image-editor-container .svg_ic-helpmenu{width:24px;height:24px}.tui-image-editor-container .svg_ic-submenu{width:32px;height:32px}.tui-image-editor-container .svg_img-bi{width:257px;height:26px}.tui-image-editor-container .tui-image-editor-help-menu svg > use,.tui-image-editor-container .tui-image-editor-controls svg > use{display:none}.tui-image-editor-container .tui-image-editor-help-menu .enabled svg:hover > use.hover,.tui-image-editor-container .tui-image-editor-controls .enabled svg:hover > use.hover,.tui-image-editor-container .tui-image-editor-help-menu .normal svg:hover > use.hover,.tui-image-editor-container .tui-image-editor-controls .normal svg:hover > use.hover{display:block}.tui-image-editor-container .tui-image-editor-help-menu .active svg:hover > use.hover,.tui-image-editor-container .tui-image-editor-controls .active svg:hover > use.hover{display:none}.tui-image-editor-container .tui-image-editor-help-menu .on svg > use.hover,.tui-image-editor-container .tui-image-editor-controls .on svg > use.hover,.tui-image-editor-container .tui-image-editor-help-menu .opened svg > use.hover,.tui-image-editor-container .tui-image-editor-controls .opened svg > use.hover{display:block}.tui-image-editor-container .tui-image-editor-help-menu svg > use.normal,.tui-image-editor-container .tui-image-editor-controls svg > use.normal{display:block}.tui-image-editor-container .tui-image-editor-help-menu .active svg > use.active,.tui-image-editor-container .tui-image-editor-controls .active svg > use.active{display:block}.tui-image-editor-container .tui-image-editor-help-menu .enabled svg > use.enabled,.tui-image-editor-container .tui-image-editor-controls .enabled svg > use.enabled{display:block}.tui-image-editor-container .tui-image-editor-help-menu .active svg > use.normal,.tui-image-editor-container .tui-image-editor-controls .active svg > use.normal,.tui-image-editor-container .tui-image-editor-help-menu .enabled svg > use.normal,.tui-image-editor-container .tui-image-editor-controls .enabled svg > use.normal{display:none}.tui-image-editor-container .tui-image-editor-help-menu .help svg > use.disabled,.tui-image-editor-container .tui-image-editor-controls .help svg > use.disabled,.tui-image-editor-container .tui-image-editor-help-menu .help.enabled svg > use.normal,.tui-image-editor-container .tui-image-editor-controls .help.enabled svg > use.normal{display:block}.tui-image-editor-container .tui-image-editor-help-menu .help.enabled svg > use.disabled,.tui-image-editor-container .tui-image-editor-controls .help.enabled svg > use.disabled{display:none}.tui-image-editor-container .tui-image-editor-controls:hover{z-index:3}.tui-image-editor-container div.tui-colorpicker-clearfix{width:159px;height:28px;border:1px solid #d5d5d5;border-radius:2px;background-color:#f5f5f5;margin-top:6px;padding:4px 7px 4px 7px}.tui-image-editor-container .tui-colorpicker-palette-hex{width:114px;background-color:#f5f5f5;border:0;font-size:11px;margin-top:2px;font-family:'Noto Sans',sans-serif}.tui-image-editor-container .tui-colorpicker-palette-hex[value='#ffffff'] + .tui-colorpicker-palette-preview,.tui-image-editor-container .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview{border:1px solid #ccc}.tui-image-editor-container .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview{background-size:cover;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC)}.tui-image-editor-container .tui-colorpicker-palette-preview{border-radius:100%;float:left;width:17px;height:17px;border:0}.tui-image-editor-container .color-picker-control{position:absolute;display:none;z-index:99;width:192px;background-color:#fff;box-shadow:0 3px 22px 6px rgba(0,0,0,0.15);padding:16px;border-radius:2px}.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-toggle-slider{display:none}.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button{border:0;border-radius:100%;margin:2px;background-size:cover;font-size:1px}.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button[title='#ffffff']{border:1px solid #ccc}.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button[title='']{border:1px solid #ccc}.tui-image-editor-container .color-picker-control .triangle{width:0;height:0;border-right:7px solid transparent;border-top:8px solid #fff;border-left:7px solid transparent;position:absolute;bottom:-8px;left:84px}.tui-image-editor-container .color-picker-control .tui-colorpicker-container,.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container ul,.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container{width:100%;height:auto}.tui-image-editor-container .filter-color-item .color-picker-control label{font-color:#333;font-weight:normal;margin-right:7pxleft}.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox{margin-top:0}.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox input + label:before,.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox > label:before{left:-16px}.tui-image-editor-container .color-picker{width:100%;height:auto}.tui-image-editor-container .color-picker-value{width:32px;height:32px;border:0;border-radius:100%;margin:auto;margin-bottom:1px}.tui-image-editor-container .color-picker-value.transparent{border:1px solid #cbcbcb;background-size:cover;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC)}.tui-image-editor-container .color-picker-value + label{color:#fff}.tui-image-editor-container .tui-image-editor-submenu svg > use{display:none}.tui-image-editor-container .tui-image-editor-submenu svg > use.normal{display:block}.tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype="icon-bubble"] svg > use.active,.tie-icon-add-button.icon-heart .tui-image-editor-button[data-icontype="icon-heart"] svg > use.active,.tie-icon-add-button.icon-location .tui-image-editor-button[data-icontype="icon-location"] svg > use.active,.tie-icon-add-button.icon-polygon .tui-image-editor-button[data-icontype="icon-polygon"] svg > use.active,.tie-icon-add-button.icon-star .tui-image-editor-button[data-icontype="icon-star"] svg > use.active,.tie-icon-add-button.icon-star-2 .tui-image-editor-button[data-icontype="icon-star-2"] svg > use.active,.tie-icon-add-button.icon-arrow-3 .tui-image-editor-button[data-icontype="icon-arrow-3"] svg > use.active,.tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype="icon-arrow-2"] svg > use.active,.tie-icon-add-button.icon-arrow .tui-image-editor-button[data-icontype="icon-arrow"] svg > use.active{display:block}.tie-draw-line-select-button.line .tui-image-editor-button.line svg > use.normal,.tie-draw-line-select-button.free .tui-image-editor-button.free svg > use.normal{display:none}.tie-draw-line-select-button.line .tui-image-editor-button.line svg > use.active,.tie-draw-line-select-button.free .tui-image-editor-button.free svg > use.active{display:block}.tie-flip-button.resetFlip .tui-image-editor-button.resetFlip svg > use.normal,.tie-flip-button.flipX .tui-image-editor-button.flipX svg > use.normal,.tie-flip-button.flipY .tui-image-editor-button.flipY svg > use.normal{display:none}.tie-flip-button.resetFlip .tui-image-editor-button.resetFlip svg > use.active,.tie-flip-button.flipX .tui-image-editor-button.flipX svg > use.active,.tie-flip-button.flipY .tui-image-editor-button.flipY svg > use.active{display:block}.tie-mask-apply.apply.active .tui-image-editor-button.apply label{color:#fff}.tie-mask-apply.apply.active .tui-image-editor-button.apply svg > use.active{display:block}.tie-crop-button .tui-image-editor-button.apply,.tie-crop-preset-button .tui-image-editor-button.apply{margin-right:24px}.tie-crop-button .tui-image-editor-button.preset.active svg > use.active,.tie-crop-preset-button .tui-image-editor-button.preset.active svg > use.active{display:block}.tie-crop-button .tui-image-editor-button.apply.active svg > use.active,.tie-crop-preset-button .tui-image-editor-button.apply.active svg > use.active{display:block}.tie-resize-button .tui-image-editor-button.apply,.tie-resize-preset-button .tui-image-editor-button.apply{margin-right:24px}.tie-resize-button .tui-image-editor-button.preset.active svg > use.active,.tie-resize-preset-button .tui-image-editor-button.preset.active svg > use.active{display:block}.tie-resize-button .tui-image-editor-button.apply.active svg > use.active,.tie-resize-preset-button .tui-image-editor-button.apply.active svg > use.active{display:block}.tie-shape-button.rect .tui-image-editor-button.rect svg > use.normal,.tie-shape-button.circle .tui-image-editor-button.circle svg > use.normal,.tie-shape-button.triangle .tui-image-editor-button.triangle svg > use.normal{display:none}.tie-shape-button.rect .tui-image-editor-button.rect svg > use.active,.tie-shape-button.circle .tui-image-editor-button.circle svg > use.active,.tie-shape-button.triangle .tui-image-editor-button.triangle svg > use.active{display:block}.tie-text-effect-button .tui-image-editor-button.active svg > use.active{display:block}.tie-text-align-button.tie-text-align-left .tui-image-editor-button.left svg > use.active,.tie-text-align-button.tie-text-align-center .tui-image-editor-button.center svg > use.active,.tie-text-align-button.tie-text-align-right .tui-image-editor-button.right svg > use.active{display:block}.tie-mask-image-file,.tie-icon-image-file{opacity:0;position:absolute;width:100%;height:100%;border:1px solid #008000;cursor:inherit;left:0;top:0}.tie-zoom-button.resetFlip .tui-image-editor-button.resetFlip svg > use.normal,.tie-zoom-button.flipX .tui-image-editor-button.flipX svg > use.normal,.tie-zoom-button.flipY .tui-image-editor-button.flipY svg > use.normal{display:none}.tie-zoom-button.resetFlip .tui-image-editor-button.resetFlip svg > use.active,.tie-zoom-button.flipX .tui-image-editor-button.flipX svg > use.active,.tie-zoom-button.flipY .tui-image-editor-button.flipY svg > use.active{display:block}.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls ul{text-align:right}.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls-logo{display:none} diff --git a/apps/image-editor/dist/tui-image-editor.css.map b/apps/image-editor/dist/tui-image-editor.css.map deleted file mode 100644 index 22afd809a..000000000 --- a/apps/image-editor/dist/tui-image-editor.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["webpack://tui.ImageEditor/src/css/main.styl","webpack://tui.ImageEditor/index.styl","webpack://tui.ImageEditor/src/css/gridtable.styl","webpack://tui.ImageEditor/src/css/submenu.styl","webpack://tui.ImageEditor/src/css/checkbox.styl","webpack://tui.ImageEditor/src/css/range.styl","webpack://tui.ImageEditor/src/css/position.styl","webpack://tui.ImageEditor/src/css/icon.styl","webpack://tui.ImageEditor/src/css/colorpicker.styl","webpack://tui.ImageEditor/src/css/buttons.styl","webpack://tui.ImageEditor/src/css/index.styl"],"names":[],"mappings":"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","file":"tui-image-editor.css","sourcesContent":["body > textarea\n position: fixed !important;\n\n+prefix-classes(prefix)\n .-container\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n min-height: 300px;\n height: 100%;\n position: relative;\n background-color: #282828;\n overflow: hidden;\n letter-spacing: 0.3px;\n \n div, ul, label, input, li\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n -ms-user-select: none; \n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n \n .-header\n /* BUTTON AND LOGO */\n min-width: 533px;\n position: absolute;\n background-color: #151515;\n top: 0;\n width: 100%;\n .-header-buttons,\n .-controls-buttons\n float: right;\n margin: 8px;\n\n .-header-logo,\n .-controls-logo\n float: left;\n width: 30%;\n padding: 17px;\n\n .-controls-logo,\n .-controls-buttons\n width: 270px;\n height: 100%;\n display: none;\n\n .-header-buttons button,\n .-header-buttons div,\n .-controls-buttons button,\n .-controls-buttons div\n display: inline-block;\n position: relative;\n width: 120px;\n height: 40px;\n padding: 0;\n line-height: 40px;\n outline: none;\n border-radius: 20px;\n border: 1px solid #ddd;\n font-family: 'Noto Sans', sans-serif;\n font-size: 12px;\n font-weight: bold;\n cursor: pointer;\n vertical-align: middle;\n letter-spacing: 0.3px;\n text-align: center;\n\n .-download-btn\n background-color: #fdba3b;\n border-color: #fdba3b;\n color: #fff;\n .-load-btn\n position: absolute;\n left: 0;\n right: 0;\n display: inline-block;\n top: 0;\n bottom: 0;\n width: 100%;\n cursor: pointer;\n opacity: 0;\n .-main-container\n position: absolute;\n width: 100%;\n top: 0;\n bottom: 64px;\n .-main\n position: absolute;\n text-align: center;\n top: 64px;\n bottom: 0;\n right: 0;\n left: 0;\n .-wrap\n position: absolute;\n bottom: 0;\n width: 100%;\n overflow: auto;\n .-size-wrap\n display: table;\n width: 100%;\n height: 100%\n .-align-wrap\n display: table-cell;\n vertical-align: middle;\n .\n position: relative;\n display: inline-block;\n\n\n/* BIG MENU */\n.{prefix}-container\n .{prefix}-menu, .{prefix}-help-menu\n width: auto;\n list-style: none;\n padding: 0;\n margin: 0 auto;\n display: table-cell;\n text-align: center;\n vertical-align: middle;\n white-space: nowrap;\n > .{prefix}-item\n position: relative;\n display: inline-block;\n border-radius: 2px;\n padding: 7px 8px 3px 8px;\n cursor: pointer;\n margin: 0 4px;\n > .{prefix}-item[tooltip-content]:hover\n &:before\n content: '';\n position: absolute;\n display: inline-block;\n margin: 0 auto 0;\n width: 0;\n height: 0;\n border-right: 7px solid transparent;\n border-top: 7px solid #2f2f2f;\n border-left: 7px solid transparent;\n left: 13px;\n top: -2px;\n &:after\n content: attr(tooltip-content);\n position: absolute;\n display: inline-block;\n background-color: #2f2f2f;\n color: #fff;\n padding: 5px 8px;\n font-size: 11px;\n font-weight: lighter;\n border-radius: 3px;\n max-height: 23px;\n top: -25px;\n left: 0;\n min-width: 24px;\n > .{prefix}-item.active\n background-color: #fff;\n transition: all .3s ease;\n .{prefix}-wrap\n position: absolute;\n","body > textarea {\n position: fixed !important;\n}\n.tui-image-editor-container {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n min-height: 300px;\n height: 100%;\n position: relative;\n background-color: #282828;\n overflow: hidden;\n letter-spacing: 0.3px;\n}\n.tui-image-editor-container div,\n.tui-image-editor-container ul,\n.tui-image-editor-container label,\n.tui-image-editor-container input,\n.tui-image-editor-container li {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n -ms-user-select: none;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n}\n.tui-image-editor-container .tui-image-editor-header {\n/* BUTTON AND LOGO */\n min-width: 533px;\n position: absolute;\n background-color: #151515;\n top: 0;\n width: 100%;\n}\n.tui-image-editor-container .tui-image-editor-header-buttons,\n.tui-image-editor-container .tui-image-editor-controls-buttons {\n float: right;\n margin: 8px;\n}\n.tui-image-editor-container .tui-image-editor-header-logo,\n.tui-image-editor-container .tui-image-editor-controls-logo {\n float: left;\n width: 30%;\n padding: 17px;\n}\n.tui-image-editor-container .tui-image-editor-controls-logo,\n.tui-image-editor-container .tui-image-editor-controls-buttons {\n width: 270px;\n height: 100%;\n display: none;\n}\n.tui-image-editor-container .tui-image-editor-header-buttons button,\n.tui-image-editor-container .tui-image-editor-header-buttons div,\n.tui-image-editor-container .tui-image-editor-controls-buttons button,\n.tui-image-editor-container .tui-image-editor-controls-buttons div {\n display: inline-block;\n position: relative;\n width: 120px;\n height: 40px;\n padding: 0;\n line-height: 40px;\n outline: none;\n border-radius: 20px;\n border: 1px solid #ddd;\n font-family: 'Noto Sans', sans-serif;\n font-size: 12px;\n font-weight: bold;\n cursor: pointer;\n vertical-align: middle;\n letter-spacing: 0.3px;\n text-align: center;\n}\n.tui-image-editor-container .tui-image-editor-download-btn {\n background-color: #fdba3b;\n border-color: #fdba3b;\n color: #fff;\n}\n.tui-image-editor-container .tui-image-editor-load-btn {\n position: absolute;\n left: 0;\n right: 0;\n display: inline-block;\n top: 0;\n bottom: 0;\n width: 100%;\n cursor: pointer;\n opacity: 0;\n}\n.tui-image-editor-container .tui-image-editor-main-container {\n position: absolute;\n width: 100%;\n top: 0;\n bottom: 64px;\n}\n.tui-image-editor-container .tui-image-editor-main {\n position: absolute;\n text-align: center;\n top: 64px;\n bottom: 0;\n right: 0;\n left: 0;\n}\n.tui-image-editor-container .tui-image-editor-wrap {\n position: absolute;\n bottom: 0;\n width: 100%;\n overflow: auto;\n}\n.tui-image-editor-container .tui-image-editor-wrap .tui-image-editor-size-wrap {\n display: table;\n width: 100%;\n height: 100%;\n}\n.tui-image-editor-container .tui-image-editor-wrap .tui-image-editor-size-wrap .tui-image-editor-align-wrap {\n display: table-cell;\n vertical-align: middle;\n}\n.tui-image-editor-container .tui-image-editor {\n position: relative;\n display: inline-block;\n}\n.tui-image-editor-container .tui-image-editor-menu,\n.tui-image-editor-container .tui-image-editor-help-menu {\n width: auto;\n list-style: none;\n padding: 0;\n margin: 0 auto;\n display: table-cell;\n text-align: center;\n vertical-align: middle;\n white-space: nowrap;\n}\n.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item,\n.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item {\n position: relative;\n display: inline-block;\n border-radius: 2px;\n padding: 7px 8px 3px 8px;\n cursor: pointer;\n margin: 0 4px;\n}\n.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:hover:before,\n.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item[tooltip-content]:hover:before {\n content: '';\n position: absolute;\n display: inline-block;\n margin: 0 auto 0;\n width: 0;\n height: 0;\n border-right: 7px solid transparent;\n border-top: 7px solid #2f2f2f;\n border-left: 7px solid transparent;\n left: 13px;\n top: -2px;\n}\n.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:hover:after,\n.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item[tooltip-content]:hover:after {\n content: attr(tooltip-content);\n position: absolute;\n display: inline-block;\n background-color: #2f2f2f;\n color: #fff;\n padding: 5px 8px;\n font-size: 11px;\n font-weight: lighter;\n border-radius: 3px;\n max-height: 23px;\n top: -25px;\n left: 0;\n min-width: 24px;\n}\n.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item.active,\n.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item.active {\n background-color: #fff;\n transition: all 0.3s ease;\n}\n.tui-image-editor-container .tui-image-editor-wrap {\n position: absolute;\n}\n.tui-image-editor-container .tui-image-editor-grid-visual {\n display: none;\n position: absolute;\n width: 100%;\n height: 100%;\n border: 1px solid rgba(255,255,255,0.7);\n}\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor {\n transition: none;\n}\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-grid-visual,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-grid-visual,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-resize .tui-image-editor-grid-visual {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-grid-visual table {\n width: 100%;\n height: 100%;\n border-collapse: collapse;\n}\n.tui-image-editor-container .tui-image-editor-grid-visual table td {\n border: 1px solid rgba(255,255,255,0.3);\n}\n.tui-image-editor-container .tui-image-editor-grid-visual table td.dot:before {\n content: '';\n position: absolute;\n box-sizing: border-box;\n width: 10px;\n height: 10px;\n border: 0;\n box-shadow: 0 0 1px 0 rgba(0,0,0,0.3);\n border-radius: 100%;\n background-color: #fff;\n}\n.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-top:before {\n top: -5px;\n left: -5px;\n}\n.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-top:before {\n top: -5px;\n right: -5px;\n}\n.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-bottom:before {\n bottom: -5px;\n left: -5px;\n}\n.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-bottom:before {\n bottom: -5px;\n right: -5px;\n}\n.tui-image-editor-container .tui-image-editor-submenu {\n display: none;\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 150px;\n white-space: nowrap;\n z-index: 2;\n}\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover svg > use.active {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item li {\n display: inline-block;\n vertical-align: top;\n}\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-newline {\n display: block;\n margin-top: 0;\n}\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button {\n position: relative;\n cursor: pointer;\n display: inline-block;\n font-weight: normal;\n font-size: 11px;\n margin: 0 9px 0 9px;\n}\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.preset {\n margin: 0 9px 20px 5px;\n}\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item label > span {\n display: inline-block;\n cursor: pointer;\n padding-top: 5px;\n font-family: \"Noto Sans\", sans-serif;\n font-size: 11px;\n}\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.apply label,\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.cancel label {\n vertical-align: 7px;\n}\n.tui-image-editor-container .tui-image-editor-submenu > div {\n display: none;\n vertical-align: bottom;\n}\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-style {\n opacity: 0.95;\n z-index: -1;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-partition > div {\n width: 1px;\n height: 52px;\n border-left: 1px solid #3c3c3c;\n margin: 0 8px 0 8px;\n}\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-partition > div {\n height: 108px;\n margin: 0 29px 0 0px;\n}\n.tui-image-editor-container .tui-image-editor-submenu-align {\n text-align: left;\n margin-right: 30px;\n}\n.tui-image-editor-container .tui-image-editor-submenu-align label > span {\n width: 55px;\n white-space: nowrap;\n}\n.tui-image-editor-container .tui-image-editor-submenu-align:first-child {\n margin-right: 0;\n}\n.tui-image-editor-container .tui-image-editor-submenu-align:first-child label > span {\n width: 70px;\n}\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-crop .tui-image-editor-submenu > div.tui-image-editor-menu-crop,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-resize .tui-image-editor-submenu > div.tui-image-editor-menu-resize,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-submenu > div.tui-image-editor-menu-flip,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-submenu > div.tui-image-editor-menu-rotate,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-shape .tui-image-editor-submenu > div.tui-image-editor-menu-shape,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-text .tui-image-editor-submenu > div.tui-image-editor-menu-text,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-mask .tui-image-editor-submenu > div.tui-image-editor-menu-mask,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-icon .tui-image-editor-submenu > div.tui-image-editor-menu-icon,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-draw .tui-image-editor-submenu > div.tui-image-editor-menu-draw,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-submenu > div.tui-image-editor-menu-filter,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-zoom .tui-image-editor-submenu > div.tui-image-editor-menu-zoom {\n display: table-cell;\n}\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-crop .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-resize .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-shape .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-text .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-mask .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-icon .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-draw .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-zoom .tui-image-editor-submenu {\n display: table;\n}\n.tui-image-editor-container .tui-image-editor-help-menu {\n list-style: none;\n padding: 0;\n margin: 0 auto;\n text-align: center;\n vertical-align: middle;\n border-radius: 20px;\n background-color: rgba(255,255,255,0.06);\n z-index: 2;\n position: absolute;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history {\n display: none;\n background-color: #fff;\n color: #444;\n position: absolute;\n width: 196px;\n height: 276px;\n padding: 4px 2px;\n box-shadow: 0 2px 6px 0 rgba(0,0,0,0.15);\n cursor: auto;\n transform: translateX(calc(-50% + 12px));\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list {\n height: 268px;\n padding: 0;\n overflow: hidden scroll;\n list-style: none;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item {\n height: 24px;\n font-size: 11px;\n line-height: 24px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item {\n position: relative;\n height: 24px;\n cursor: pointer;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item svg {\n width: 24px;\n height: 24px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item span {\n display: inline-block;\n width: 128px;\n height: 24px;\n text-align: left;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-icon {\n display: inline-block;\n width: 24px;\n height: 24px;\n position: absolute;\n top: 6px;\n left: 6px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-checkbox {\n display: none;\n width: 24px;\n height: 24px;\n position: absolute;\n top: 5px;\n right: -6px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.selected-item {\n background-color: rgba(119,119,119,0.12);\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.selected-item .history-item-checkbox {\n display: inline-block;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.disabled-item {\n color: #333;\n opacity: 0.3;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .opened .tie-panel-history {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .opened .tie-panel-history:before {\n content: '';\n position: absolute;\n display: inline-block;\n margin: 0 auto;\n width: 0;\n height: 0;\n}\n.tui-image-editor-container .filter-color-item {\n display: inline-block;\n}\n.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-checkbox-wrap {\n display: inline-block !important;\n text-align: left;\n}\n.tui-image-editor-container .tui-image-editor-checkbox-wrap.fixed-width {\n width: 187px;\n white-space: normal;\n}\n.tui-image-editor-container .tui-image-editor-checkbox {\n display: inline-block;\n margin: 1px 0 1px 0;\n}\n.tui-image-editor-container .tui-image-editor-checkbox input {\n width: 14px;\n height: 14px;\n opacity: 0;\n}\n.tui-image-editor-container .tui-image-editor-checkbox > label > span {\n color: #fff;\n height: 14px;\n position: relative;\n}\n.tui-image-editor-container .tui-image-editor-checkbox input + label:before,\n.tui-image-editor-container .tui-image-editor-checkbox > label > span:before {\n content: '';\n position: absolute;\n width: 14px;\n height: 14px;\n background-color: #fff;\n top: 6px;\n left: -19px;\n display: inline-block;\n margin: 0;\n text-align: center;\n font-size: 11px;\n border: 0;\n border-radius: 2px;\n padding-top: 1px;\n box-sizing: border-box;\n}\n.tui-image-editor-container .tui-image-editor-checkbox input[type='checkbox']:checked + span:before {\n background-size: cover;\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAMBJREFUKBWVkjEOwjAMRe2WgZW7IIHEDdhghhuwcQ42rlJugAQS54Cxa5cq1QM5TUpByZfS2j9+dlJVt/tX5ZxbS4ZU9VLkQvSHKTIGRaVJYFmKrBbTCJxE2UgCdDzMZDkHrOV6b95V0US6UmgKodujEZbJg0B0ZgEModO5lrY1TMQf1TpyJGBEjD+E2NPN7ukIUDiF/BfEXgRiGEw8NgkffYGYwCi808fpn/6OvfUfsDr/Vc1IfRf8sKnFVqeiVQfDu0tf/nWH9gAAAABJRU5ErkJggg==\");\n}\n.tui-image-editor-container .tui-image-editor-selectlist-wrap {\n position: relative;\n}\n.tui-image-editor-container .tui-image-editor-selectlist-wrap select {\n width: 100%;\n height: 28px;\n margin-top: 4px;\n border: 0;\n outline: 0;\n border-radius: 0;\n border: 1px solid #cbdbdb;\n background-color: #fff;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0 7px 0 10px;\n}\n.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist {\n display: none;\n position: relative;\n top: -1px;\n border: 1px solid #ccc;\n background-color: #fff;\n border-top: 0px;\n padding: 4px 0;\n}\n.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist li {\n display: block;\n text-align: left;\n padding: 7px 10px;\n font-family: 'Noto Sans', sans-serif;\n}\n.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist li:hover {\n background-color: rgba(81,92,230,0.05);\n}\n.tui-image-editor-container .tui-image-editor-selectlist-wrap:before {\n content: '';\n position: absolute;\n display: inline-block;\n width: 14px;\n height: 14px;\n right: 5px;\n top: 10px;\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYBgFOEOAEVkmPDxc89+/f6eAYjzI4kD2FyYmJrOVK1deh4kzwRggGiQBVJCELAZig8SQNYHEmEEEMrh69eo1HR0dfqCYJUickZGxf9WqVf3IakBsFBthklpaWmVA9mEQhrJhUoTp0NBQCRAmrHL4qgAAuu4cWZOZIGsAAAAASUVORK5CYII=\");\n background-size: cover;\n}\n.tui-image-editor-container .tui-image-editor-selectlist-wrap select::-ms-expand {\n display: none;\n}\n.tui-image-editor-container .tui-image-editor-virtual-range-bar .tui-image-editor-disabled,\n.tui-image-editor-container .tui-image-editor-virtual-range-subbar .tui-image-editor-disabled,\n.tui-image-editor-container .tui-image-editor-virtual-range-pointer .tui-image-editor-disabled {\n backbround-color: #f00;\n}\n.tui-image-editor-container .tui-image-editor-range {\n position: relative;\n top: 5px;\n width: 166px;\n height: 17px;\n display: inline-block;\n}\n.tui-image-editor-container .tui-image-editor-virtual-range-bar {\n top: 7px;\n position: absolute;\n width: 100%;\n height: 2px;\n background-color: #666;\n}\n.tui-image-editor-container .tui-image-editor-virtual-range-subbar {\n position: absolute;\n height: 100%;\n left: 0;\n right: 0;\n background-color: #d1d1d1;\n}\n.tui-image-editor-container .tui-image-editor-virtual-range-pointer {\n position: absolute;\n cursor: pointer;\n top: -5px;\n left: 0;\n width: 12px;\n height: 12px;\n background-color: #fff;\n border-radius: 100%;\n}\n.tui-image-editor-container .tui-image-editor-range-wrap {\n display: inline-block;\n margin-left: 4px;\n}\n.tui-image-editor-container .tui-image-editor-range-wrap.short .tui-image-editor-range {\n width: 100px;\n}\n.tui-image-editor-container .color-picker-control .tui-image-editor-range {\n width: 108px;\n margin-left: 10px;\n}\n.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-pointer {\n background-color: #333;\n}\n.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-bar {\n background-color: #ccc;\n}\n.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-subbar {\n background-color: #606060;\n}\n.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short {\n margin-top: -2px;\n margin-left: 19px;\n}\n.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label {\n color: #8e8e8e;\n font-weight: normal;\n}\n.tui-image-editor-container .tui-image-editor-range-wrap label {\n vertical-align: baseline;\n font-size: 11px;\n margin-right: 7px;\n color: #fff;\n}\n.tui-image-editor-container .tui-image-editor-range-value {\n cursor: default;\n width: 40px;\n height: 24px;\n outline: none;\n border-radius: 2px;\n box-shadow: none;\n border: 1px solid #d5d5d5;\n text-align: center;\n background-color: #1c1c1c;\n color: #fff;\n font-weight: lighter;\n vertical-align: baseline;\n font-family: 'Noto Sans', sans-serif;\n margin-top: 15px;\n margin-left: 4px;\n}\n.tui-image-editor-container .tui-image-editor-controls {\n position: absolute;\n background-color: #151515;\n width: 100%;\n height: 64px;\n display: table;\n bottom: 0;\n z-index: 2;\n}\n.tui-image-editor-container .tui-image-editor-icpartition {\n display: inline-block;\n background-color: #444;\n width: 1px;\n height: 24px;\n}\n.tui-image-editor-container.left .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:before {\n left: 28px;\n top: 11px;\n border-right: 7px solid #2f2f2f;\n border-top: 7px solid transparent;\n border-bottom: 7px solid transparent;\n}\n.tui-image-editor-container.left .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:after {\n top: 7px;\n left: 42px;\n white-space: nowrap;\n}\n.tui-image-editor-container.left .tui-image-editor-submenu {\n left: 0;\n height: 100%;\n width: 248px;\n}\n.tui-image-editor-container.left .tui-image-editor-main-container {\n left: 64px;\n width: calc(100% - 64px);\n height: 100%;\n}\n.tui-image-editor-container.left .tui-image-editor-controls {\n width: 64px;\n height: 100%;\n display: table;\n}\n.tui-image-editor-container.left .tui-image-editor-menu,\n.tui-image-editor-container.right .tui-image-editor-menu {\n white-space: inherit;\n}\n.tui-image-editor-container.left .tui-image-editor-submenu,\n.tui-image-editor-container.right .tui-image-editor-submenu {\n white-space: normal;\n}\n.tui-image-editor-container.left .tui-image-editor-submenu > div,\n.tui-image-editor-container.right .tui-image-editor-submenu > div {\n vertical-align: middle;\n}\n.tui-image-editor-container.left .tui-image-editor-controls li,\n.tui-image-editor-container.right .tui-image-editor-controls li {\n display: inline-block;\n margin: 4px auto;\n}\n.tui-image-editor-container.left .tui-image-editor-icpartition,\n.tui-image-editor-container.right .tui-image-editor-icpartition {\n position: relative;\n top: -7px;\n width: 24px;\n height: 1px;\n}\n.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition,\n.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition {\n display: block;\n width: 75%;\n margin: auto;\n}\n.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition > div,\n.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition > div {\n border-left: 0;\n height: 10px;\n border-bottom: 1px solid #3c3c3c;\n width: 100%;\n margin: 0;\n}\n.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-align,\n.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-align {\n margin-right: 0;\n}\n.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-item li,\n.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-item li {\n margin-top: 15px;\n}\n.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-colorpicker-clearfix li,\n.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-colorpicker-clearfix li {\n margin-top: 0;\n}\n.tui-image-editor-container.left .tui-image-editor-checkbox-wrap.fixed-width,\n.tui-image-editor-container.right .tui-image-editor-checkbox-wrap.fixed-width {\n width: 182px;\n white-space: normal;\n}\n.tui-image-editor-container.left .tui-image-editor-range-wrap.tui-image-editor-newline label.range,\n.tui-image-editor-container.right .tui-image-editor-range-wrap.tui-image-editor-newline label.range {\n display: block;\n text-align: left;\n width: 75%;\n margin: auto;\n}\n.tui-image-editor-container.left .tui-image-editor-range,\n.tui-image-editor-container.right .tui-image-editor-range {\n width: 136px;\n}\n.tui-image-editor-container.right .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:before {\n left: -3px;\n top: 11px;\n border-left: 7px solid #2f2f2f;\n border-top: 7px solid transparent;\n border-bottom: 7px solid transparent;\n}\n.tui-image-editor-container.right .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:after {\n top: 7px;\n left: unset;\n right: 43px;\n white-space: nowrap;\n}\n.tui-image-editor-container.right .tui-image-editor-submenu {\n right: 0;\n height: 100%;\n width: 248px;\n}\n.tui-image-editor-container.right .tui-image-editor-main-container {\n right: 64px;\n width: calc(100% - 64px);\n height: 100%;\n}\n.tui-image-editor-container.right .tui-image-editor-controls {\n right: 0;\n width: 64px;\n height: 100%;\n display: table;\n}\n.tui-image-editor-container.top .tui-image-editor-submenu .tui-image-editor-partition.only-left-right,\n.tui-image-editor-container.bottom .tui-image-editor-submenu .tui-image-editor-partition.only-left-right {\n display: none;\n}\n.tui-image-editor-container.bottom .tui-image-editor-submenu > div {\n padding-bottom: 24px;\n}\n.tui-image-editor-container.top .color-picker-control .triangle {\n top: -8px;\n border-right: 7px solid transparent;\n border-top: 0px;\n border-left: 7px solid transparent;\n border-bottom: 8px solid #fff;\n}\n.tui-image-editor-container.top .tui-image-editor-size-wrap {\n height: 100%;\n}\n.tui-image-editor-container.top .tui-image-editor-main-container {\n bottom: 0;\n}\n.tui-image-editor-container.top .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:before {\n left: 13px;\n border-top: 0;\n border-bottom: 7px solid #2f2f2f;\n top: 33px;\n}\n.tui-image-editor-container.top .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:after {\n top: 38px;\n}\n.tui-image-editor-container.top .tui-image-editor-submenu {\n top: 0;\n bottom: auto;\n}\n.tui-image-editor-container.top .tui-image-editor-submenu > div {\n padding-top: 24px;\n vertical-align: top;\n}\n.tui-image-editor-container.top .tui-image-editor-controls-logo {\n display: table-cell;\n}\n.tui-image-editor-container.top .tui-image-editor-controls-buttons {\n display: table-cell;\n}\n.tui-image-editor-container.top .tui-image-editor-main {\n top: 64px;\n height: calc(100% - 64px);\n}\n.tui-image-editor-container.top .tui-image-editor-controls {\n top: 0;\n bottom: inherit;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.top {\n white-space: nowrap;\n width: 506px;\n height: 40px;\n top: 8px;\n left: 50%;\n transform: translateX(-50%);\n}\n.tui-image-editor-container .tui-image-editor-help-menu.top .tie-panel-history {\n top: 45px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.top .opened .tie-panel-history:before {\n border-right: 8px solid transparent;\n border-left: 8px solid transparent;\n border-bottom: 8px solid #fff;\n left: 90px;\n top: -8px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content]:before {\n left: 13px;\n top: 35px;\n border: none;\n border-bottom: 7px solid #2f2f2f;\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content]:after {\n top: 41px;\n left: -4px;\n white-space: nowrap;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content].opened:before,\n.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content].opened:after {\n content: none;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.bottom {\n white-space: nowrap;\n width: 506px;\n height: 40px;\n bottom: 8px;\n left: 50%;\n transform: translateX(-50%);\n}\n.tui-image-editor-container .tui-image-editor-help-menu.bottom .tie-panel-history {\n bottom: 45px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.bottom .opened .tie-panel-history:before {\n border-right: 8px solid transparent;\n border-left: 8px solid transparent;\n border-top: 8px solid #fff;\n left: 90px;\n bottom: -8px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content]:before {\n left: 13px;\n top: auto;\n bottom: 36px;\n border: none;\n border-top: 7px solid #2f2f2f;\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content]:after {\n top: auto;\n left: -4px;\n bottom: 41px;\n white-space: nowrap;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content].opened:before,\n.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content].opened:after {\n content: none;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.left {\n white-space: inherit;\n width: 40px;\n height: 506px;\n left: 8px;\n top: 50%;\n transform: translateY(-50%);\n}\n.tui-image-editor-container .tui-image-editor-help-menu.left .tie-panel-history {\n left: 140px;\n top: -4px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.left .opened .tie-panel-history:before {\n border-top: 8px solid transparent;\n border-bottom: 8px solid transparent;\n border-right: 8px solid #fff;\n left: -8px;\n top: 14px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.left .tui-image-editor-item {\n margin: 4px auto;\n padding: 6px 8px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content]:before {\n left: 27px;\n top: 11px;\n border: none;\n border-right: 7px solid #2f2f2f;\n border-top: 7px solid transparent;\n border-bottom: 7px solid transparent;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content]:after {\n top: 7px;\n left: 40px;\n white-space: nowrap;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content].opened:before,\n.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content].opened:after {\n content: none;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.right {\n white-space: inherit;\n width: 40px;\n height: 506px;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n}\n.tui-image-editor-container .tui-image-editor-help-menu.right .tie-panel-history {\n right: -30px;\n top: -4px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.right .opened .tie-panel-history:before {\n border-top: 8px solid transparent;\n border-bottom: 8px solid transparent;\n border-left: 8px solid #fff;\n right: -8px;\n top: 14px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.right .tui-image-editor-item {\n margin: 4px auto;\n padding: 6px 8px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content]:before {\n left: -6px;\n top: 11px;\n border: none;\n border-left: 7px solid #2f2f2f;\n border-top: 7px solid transparent;\n border-bottom: 7px solid transparent;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content]:after {\n top: 7px;\n left: auto;\n right: 39px;\n white-space: nowrap;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content].opened:before,\n.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content].opened:after {\n content: none;\n}\n.tui-image-editor-container .tie-icon-add-button .tui-image-editor-button {\n min-width: 42px;\n}\n.tui-image-editor-container .svg_ic-menu,\n.tui-image-editor-container .svg_ic-helpmenu {\n width: 24px;\n height: 24px;\n}\n.tui-image-editor-container .svg_ic-submenu {\n width: 32px;\n height: 32px;\n}\n.tui-image-editor-container .svg_img-bi {\n width: 257px;\n height: 26px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu svg > use,\n.tui-image-editor-container .tui-image-editor-controls svg > use {\n display: none;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .enabled svg:hover > use.hover,\n.tui-image-editor-container .tui-image-editor-controls .enabled svg:hover > use.hover,\n.tui-image-editor-container .tui-image-editor-help-menu .normal svg:hover > use.hover,\n.tui-image-editor-container .tui-image-editor-controls .normal svg:hover > use.hover {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .active svg:hover > use.hover,\n.tui-image-editor-container .tui-image-editor-controls .active svg:hover > use.hover {\n display: none;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .on svg > use.hover,\n.tui-image-editor-container .tui-image-editor-controls .on svg > use.hover,\n.tui-image-editor-container .tui-image-editor-help-menu .opened svg > use.hover,\n.tui-image-editor-container .tui-image-editor-controls .opened svg > use.hover {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-help-menu svg > use.normal,\n.tui-image-editor-container .tui-image-editor-controls svg > use.normal {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .active svg > use.active,\n.tui-image-editor-container .tui-image-editor-controls .active svg > use.active {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .enabled svg > use.enabled,\n.tui-image-editor-container .tui-image-editor-controls .enabled svg > use.enabled {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .active svg > use.normal,\n.tui-image-editor-container .tui-image-editor-controls .active svg > use.normal,\n.tui-image-editor-container .tui-image-editor-help-menu .enabled svg > use.normal,\n.tui-image-editor-container .tui-image-editor-controls .enabled svg > use.normal {\n display: none;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .help svg > use.disabled,\n.tui-image-editor-container .tui-image-editor-controls .help svg > use.disabled,\n.tui-image-editor-container .tui-image-editor-help-menu .help.enabled svg > use.normal,\n.tui-image-editor-container .tui-image-editor-controls .help.enabled svg > use.normal {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .help.enabled svg > use.disabled,\n.tui-image-editor-container .tui-image-editor-controls .help.enabled svg > use.disabled {\n display: none;\n}\n.tui-image-editor-container .tui-image-editor-controls:hover {\n z-index: 3;\n}\n.tui-image-editor-container div.tui-colorpicker-clearfix {\n width: 159px;\n height: 28px;\n border: 1px solid #d5d5d5;\n border-radius: 2px;\n background-color: #f5f5f5;\n margin-top: 6px;\n padding: 4px 7px 4px 7px;\n}\n.tui-image-editor-container .tui-colorpicker-palette-hex {\n width: 114px;\n background-color: #f5f5f5;\n border: 0;\n font-size: 11px;\n margin-top: 2px;\n font-family: 'Noto Sans', sans-serif;\n}\n.tui-image-editor-container .tui-colorpicker-palette-hex[value='#ffffff'] + .tui-colorpicker-palette-preview,\n.tui-image-editor-container .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview {\n border: 1px solid #ccc;\n}\n.tui-image-editor-container .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview {\n background-size: cover;\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC\");\n}\n.tui-image-editor-container .tui-colorpicker-palette-preview {\n border-radius: 100%;\n float: left;\n width: 17px;\n height: 17px;\n border: 0;\n}\n.tui-image-editor-container .color-picker-control {\n position: absolute;\n display: none;\n z-index: 99;\n width: 192px;\n background-color: #fff;\n box-shadow: 0 3px 22px 6px rgba(0,0,0,0.15);\n padding: 16px;\n border-radius: 2px;\n}\n.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-toggle-slider {\n display: none;\n}\n.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button {\n border: 0;\n border-radius: 100%;\n margin: 2px;\n background-size: cover;\n font-size: 1px;\n}\n.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button[title='#ffffff'] {\n border: 1px solid #ccc;\n}\n.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button[title=''] {\n border: 1px solid #ccc;\n}\n.tui-image-editor-container .color-picker-control .triangle {\n width: 0;\n height: 0;\n border-right: 7px solid transparent;\n border-top: 8px solid #fff;\n border-left: 7px solid transparent;\n position: absolute;\n bottom: -8px;\n left: 84px;\n}\n.tui-image-editor-container .color-picker-control .tui-colorpicker-container,\n.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container ul,\n.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container {\n width: 100%;\n height: auto;\n}\n.tui-image-editor-container .filter-color-item .color-picker-control label {\n font-color: #333;\n font-weight: normal;\n margin-right: 7pxleft;\n}\n.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox {\n margin-top: 0;\n}\n.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox input + label:before,\n.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox > label:before {\n left: -16px;\n}\n.tui-image-editor-container .color-picker {\n width: 100%;\n height: auto;\n}\n.tui-image-editor-container .color-picker-value {\n width: 32px;\n height: 32px;\n border: 0px;\n border-radius: 100%;\n margin: auto;\n margin-bottom: 1px;\n}\n.tui-image-editor-container .color-picker-value.transparent {\n border: 1px solid #cbcbcb;\n background-size: cover;\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC\");\n}\n.tui-image-editor-container .color-picker-value + label {\n color: #fff;\n}\n.tui-image-editor-container .tui-image-editor-submenu svg > use {\n display: none;\n}\n.tui-image-editor-container .tui-image-editor-submenu svg > use.normal {\n display: block;\n}\n.tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype=\"icon-bubble\"] svg > use.active,\n.tie-icon-add-button.icon-heart .tui-image-editor-button[data-icontype=\"icon-heart\"] svg > use.active,\n.tie-icon-add-button.icon-location .tui-image-editor-button[data-icontype=\"icon-location\"] svg > use.active,\n.tie-icon-add-button.icon-polygon .tui-image-editor-button[data-icontype=\"icon-polygon\"] svg > use.active,\n.tie-icon-add-button.icon-star .tui-image-editor-button[data-icontype=\"icon-star\"] svg > use.active,\n.tie-icon-add-button.icon-star-2 .tui-image-editor-button[data-icontype=\"icon-star-2\"] svg > use.active,\n.tie-icon-add-button.icon-arrow-3 .tui-image-editor-button[data-icontype=\"icon-arrow-3\"] svg > use.active,\n.tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype=\"icon-arrow-2\"] svg > use.active,\n.tie-icon-add-button.icon-arrow .tui-image-editor-button[data-icontype=\"icon-arrow\"] svg > use.active {\n display: block;\n}\n.tie-draw-line-select-button.line .tui-image-editor-button.line svg > use.normal,\n.tie-draw-line-select-button.free .tui-image-editor-button.free svg > use.normal {\n display: none;\n}\n.tie-draw-line-select-button.line .tui-image-editor-button.line svg > use.active,\n.tie-draw-line-select-button.free .tui-image-editor-button.free svg > use.active {\n display: block;\n}\n.tie-flip-button.resetFlip .tui-image-editor-button.resetFlip svg > use.normal,\n.tie-flip-button.flipX .tui-image-editor-button.flipX svg > use.normal,\n.tie-flip-button.flipY .tui-image-editor-button.flipY svg > use.normal {\n display: none;\n}\n.tie-flip-button.resetFlip .tui-image-editor-button.resetFlip svg > use.active,\n.tie-flip-button.flipX .tui-image-editor-button.flipX svg > use.active,\n.tie-flip-button.flipY .tui-image-editor-button.flipY svg > use.active {\n display: block;\n}\n.tie-mask-apply.apply.active .tui-image-editor-button.apply label {\n color: #fff;\n}\n.tie-mask-apply.apply.active .tui-image-editor-button.apply svg > use.active {\n display: block;\n}\n.tie-crop-button .tui-image-editor-button.apply,\n.tie-crop-preset-button .tui-image-editor-button.apply {\n margin-right: 24px;\n}\n.tie-crop-button .tui-image-editor-button.preset.active svg > use.active,\n.tie-crop-preset-button .tui-image-editor-button.preset.active svg > use.active {\n display: block;\n}\n.tie-crop-button .tui-image-editor-button.apply.active svg > use.active,\n.tie-crop-preset-button .tui-image-editor-button.apply.active svg > use.active {\n display: block;\n}\n.tie-resize-button .tui-image-editor-button.apply,\n.tie-resize-preset-button .tui-image-editor-button.apply {\n margin-right: 24px;\n}\n.tie-resize-button .tui-image-editor-button.preset.active svg > use.active,\n.tie-resize-preset-button .tui-image-editor-button.preset.active svg > use.active {\n display: block;\n}\n.tie-resize-button .tui-image-editor-button.apply.active svg > use.active,\n.tie-resize-preset-button .tui-image-editor-button.apply.active svg > use.active {\n display: block;\n}\n.tie-shape-button.rect .tui-image-editor-button.rect svg > use.normal,\n.tie-shape-button.circle .tui-image-editor-button.circle svg > use.normal,\n.tie-shape-button.triangle .tui-image-editor-button.triangle svg > use.normal {\n display: none;\n}\n.tie-shape-button.rect .tui-image-editor-button.rect svg > use.active,\n.tie-shape-button.circle .tui-image-editor-button.circle svg > use.active,\n.tie-shape-button.triangle .tui-image-editor-button.triangle svg > use.active {\n display: block;\n}\n.tie-text-effect-button .tui-image-editor-button.active svg > use.active {\n display: block;\n}\n.tie-text-align-button.tie-text-align-left .tui-image-editor-button.left svg > use.active,\n.tie-text-align-button.tie-text-align-center .tui-image-editor-button.center svg > use.active,\n.tie-text-align-button.tie-text-align-right .tui-image-editor-button.right svg > use.active {\n display: block;\n}\n.tie-mask-image-file,\n.tie-icon-image-file {\n opacity: 0;\n position: absolute;\n width: 100%;\n height: 100%;\n border: 1px solid #008000;\n cursor: inherit;\n left: 0;\n top: 0;\n}\n.tie-zoom-button.resetFlip .tui-image-editor-button.resetFlip svg > use.normal,\n.tie-zoom-button.flipX .tui-image-editor-button.flipX svg > use.normal,\n.tie-zoom-button.flipY .tui-image-editor-button.flipY svg > use.normal {\n display: none;\n}\n.tie-zoom-button.resetFlip .tui-image-editor-button.resetFlip svg > use.active,\n.tie-zoom-button.flipX .tui-image-editor-button.flipX svg > use.active,\n.tie-zoom-button.flipY .tui-image-editor-button.flipY svg > use.active {\n display: block;\n}\n.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls ul {\n text-align: right;\n}\n.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls-logo {\n display: none;\n}\n/*# sourceMappingURL=src/css/index.css.map */","/* GRID VISUAL OF FLIP AND ROTATE MENU */\n.{prefix}-container\n .{prefix}-grid-visual\n display: none;\n position: absolute;\n width: 100%;\n height: 100%;\n border: 1px solid rgba(255,255,255,0.7);\n .{prefix}-main.{prefix}-menu-flip,\n .{prefix}-main.{prefix}-menu-rotate\n .tui-image-editor\n transition: none;\n .{prefix}-main.{prefix}-menu-flip .{prefix}-grid-visual,\n .{prefix}-main.{prefix}-menu-rotate .{prefix}-grid-visual,\n .{prefix}-main.{prefix}-menu-resize .{prefix}-grid-visual\n display: block;\n .{prefix}-grid-visual \n table\n width: 100%;\n height: 100%;\n border-collapse: collapse;\n td\n border: 1px solid rgba(255,255,255,0.3);\n td.dot:before\n content: '';\n position: absolute;\n box-sizing: border-box;\n width: 10px;\n height: 10px;\n border: 0;\n box-shadow: 0 0 1px 0 rgba(0,0,0,0.3);\n border-radius: 100%;\n background-color: #fff;\n td.dot.left-top:before\n top: -5px;\n left: -5px;\n td.dot.right-top:before\n top: -5px;\n right: -5px;\n td.dot.left-bottom:before\n bottom: -5px;\n left: -5px;\n td.dot.right-bottom:before\n bottom: -5px;\n right: -5px;\n","/* SUBMENU */\n.{prefix}-container\n .{prefix}-submenu\n display: none;\n position: absolute;\n bottom: 0;\n width:100%;\n height: 150px;\n white-space: nowrap;\n z-index: 2;\n .{prefix}-button:hover svg > use.active\n display: block;\n .{prefix}-submenu-item\n li\n display: inline-block;\n vertical-align: top;\n .{prefix}-newline\n display: block;\n margin-top: 0;\n .{prefix}-button\n position: relative;\n cursor: pointer;\n display: inline-block;\n font-weight: normal;\n font-size: 11px;\n margin: 0 9px 0 9px;\n .{prefix}-button.preset\n margin: 0 9px 20px 5px;\n label > span\n display: inline-block;\n cursor: pointer;\n padding-top: 5px;\n font-family: \"Noto Sans\", sans-serif;\n font-size: 11px;\n .{prefix}-button.apply label,\n .{prefix}-button.cancel label\n vertical-align: 7px;\n > div\n display: none;\n vertical-align: bottom;\n .{prefix}-submenu-style\n opacity: 0.95;\n z-index: -1;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: block;\n\n .{prefix}-partition > div\n width: 1px;\n height: 52px;\n border-left: 1px solid #3c3c3c;\n margin: 0 8px 0 8px;\n .{prefix}-main.{prefix}-menu-filter .{prefix}-partition > div\n height: 108px;\n margin: 0 29px 0 0px;\n .{prefix}-submenu-align\n text-align: left;\n margin-right: 30px;\n label > span\n width: 55px;\n white-space: nowrap;\n .{prefix}-submenu-align:first-child\n margin-right: 0;\n label > span\n width: 70px;\n .{prefix}-main.{prefix}-menu-crop .{prefix}-submenu > div.{prefix}-menu-crop,\n .{prefix}-main.{prefix}-menu-resize .{prefix}-submenu > div.{prefix}-menu-resize,\n .{prefix}-main.{prefix}-menu-flip .{prefix}-submenu > div.{prefix}-menu-flip,\n .{prefix}-main.{prefix}-menu-rotate .{prefix}-submenu > div.{prefix}-menu-rotate,\n .{prefix}-main.{prefix}-menu-shape .{prefix}-submenu > div.{prefix}-menu-shape,\n .{prefix}-main.{prefix}-menu-text .{prefix}-submenu > div.{prefix}-menu-text,\n .{prefix}-main.{prefix}-menu-mask .{prefix}-submenu > div.{prefix}-menu-mask,\n .{prefix}-main.{prefix}-menu-icon .{prefix}-submenu > div.{prefix}-menu-icon,\n .{prefix}-main.{prefix}-menu-draw .{prefix}-submenu > div.{prefix}-menu-draw,\n .{prefix}-main.{prefix}-menu-filter .{prefix}-submenu > div.{prefix}-menu-filter,\n .{prefix}-main.{prefix}-menu-zoom .{prefix}-submenu > div.{prefix}-menu-zoom\n display: table-cell;\n .{prefix}-main.{prefix}-menu-crop,\n .{prefix}-main.{prefix}-menu-resize,\n .{prefix}-main.{prefix}-menu-flip,\n .{prefix}-main.{prefix}-menu-rotate,\n .{prefix}-main.{prefix}-menu-shape,\n .{prefix}-main.{prefix}-menu-text,\n .{prefix}-main.{prefix}-menu-mask,\n .{prefix}-main.{prefix}-menu-icon,\n .{prefix}-main.{prefix}-menu-draw,\n .{prefix}-main.{prefix}-menu-filter,\n .{prefix}-main.{prefix}-menu-zoom\n .{prefix}-submenu\n display: table;\n\n/* Help menu bar */\n.{prefix}-container\n .{prefix}-help-menu\n list-style: none;\n padding: 0;\n margin: 0 auto;\n text-align: center;\n vertical-align: middle;\n border-radius: 20px;\n background-color: rgba(255, 255, 255, 0.06);\n z-index: 2;\n position: absolute;\n .tie-panel-history\n display: none;\n background-color: #fff;\n color: #444;\n position: absolute;\n width: 196px;\n height: 276px;\n padding: 4px 2px;\n box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);\n cursor: auto;\n transform: translateX(calc(-50% + 12px));\n .history-list\n height: 268px;\n padding: 0;\n overflow: hidden scroll;\n list-style: none;\n .history-item\n height: 24px;\n font-size: 11px;\n line-height: 24px;\n .{prefix}-history-item\n position: relative;\n height: 24px;\n cursor: pointer;\n svg\n width: 24px;\n height: 24px;\n span\n display: inline-block;\n width: 128px;\n height: 24px;\n text-align: left;\n .history-item-icon\n display: inline-block;\n width: 24px;\n height: 24px;\n position: absolute;\n top: 6px;\n left: 6px;\n .history-item-checkbox\n display: none;\n width: 24px;\n height: 24px;\n position: absolute;\n top: 5px;\n right: -6px;\n &.selected-item\n background-color: rgba(119, 119, 119, 0.12);\n .history-item-checkbox\n display: inline-block;\n &.disabled-item\n color: #333;\n opacity: 0.3;\n .opened .tie-panel-history\n display: block;\n &:before\n content: '';\n position: absolute;\n display: inline-block;\n margin: 0 auto;\n width: 0;\n height: 0;\n","/* VIRTUAL CHECKBOX */\n.{prefix}-container\n .filter-color-item\n display: inline-block;\n .tui-image-editor-checkbox\n display: block;\n .{prefix}-checkbox-wrap\n display: inline-block !important;\n text-align: left;\n .{prefix}-checkbox-wrap.fixed-width\n width: 187px;\n white-space: normal;\n .{prefix}-checkbox\n display: inline-block;\n margin: 1px 0 1px 0;\n input\n width: 14px;\n height: 14px;\n opacity: 0;\n > label > span\n color: #fff;\n height: 14px;\n position: relative;\n input + label:before,\n > label > span:before\n content: '';\n position: absolute;\n width: 14px;\n height: 14px;\n background-color: #fff;\n top: 6px;\n left: -19px;\n display: inline-block;\n margin: 0;\n text-align: center;\n font-size: 11px;\n border: 0;\n border-radius: 2px;\n padding-top: 1px;\n box-sizing: border-box;\n input[type='checkbox']:checked + span:before\n background-size: cover;\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAMBJREFUKBWVkjEOwjAMRe2WgZW7IIHEDdhghhuwcQ42rlJugAQS54Cxa5cq1QM5TUpByZfS2j9+dlJVt/tX5ZxbS4ZU9VLkQvSHKTIGRaVJYFmKrBbTCJxE2UgCdDzMZDkHrOV6b95V0US6UmgKodujEZbJg0B0ZgEModO5lrY1TMQf1TpyJGBEjD+E2NPN7ukIUDiF/BfEXgRiGEw8NgkffYGYwCi808fpn/6OvfUfsDr/Vc1IfRf8sKnFVqeiVQfDu0tf/nWH9gAAAABJRU5ErkJggg==');\n\n .{prefix}-selectlist-wrap\n position: relative;\n select\n width: 100%;\n height: 28px;\n margin-top: 4px;\n border: 0;\n outline: 0;\n border-radius: 0;\n border: 1px solid #cbdbdb;\n background-color: #fff;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0 7px 0 10px;\n .{prefix}-selectlist\n display: none;\n position: relative;\n top: -1px;\n border: 1px solid #ccc;\n background-color: #fff;\n border-top: 0px;\n padding: 4px 0;\n li\n display: block;\n text-align: left;\n padding: 7px 10px;\n font-family: 'Noto Sans', sans-serif;\n li:hover\n background-color: rgba(81, 92, 230, 0.05);\n .{prefix}-selectlist-wrap:before\n content: '';\n position: absolute;\n display: inline-block;\n width: 14px;\n height: 14px;\n right: 5px;\n top: 10px;\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYBgFOEOAEVkmPDxc89+/f6eAYjzI4kD2FyYmJrOVK1deh4kzwRggGiQBVJCELAZig8SQNYHEmEEEMrh69eo1HR0dfqCYJUickZGxf9WqVf3IakBsFBthklpaWmVA9mEQhrJhUoTp0NBQCRAmrHL4qgAAuu4cWZOZIGsAAAAASUVORK5CYII=');\n background-size: cover;\n .{prefix}-selectlist-wrap select::-ms-expand\n display:none;\n","/* VIRTUAL RANGE */\n.{prefix}-container\n\n .{prefix}-virtual-range-bar\n .{prefix}-virtual-range-subbar\n .{prefix}-virtual-range-pointer\n .{prefix}-disabled\n backbround-color: red;\n\n .{prefix}-range\n position: relative;\n top: 5px;\n width: 166px;\n height: 17px;\n display: inline-block;\n .{prefix}-virtual-range-bar\n top: 7px;\n position: absolute;\n width: 100%;\n height: 2px;\n background-color: #666666;\n .{prefix}-virtual-range-subbar\n position: absolute;\n height: 100%;\n left: 0;\n right: 0;\n background-color: #d1d1d1;\n .{prefix}-virtual-range-pointer\n position: absolute;\n cursor: pointer;\n top: -5px;\n left: 0;\n width: 12px;\n height: 12px;\n background-color: #fff;\n border-radius: 100%;\n .{prefix}-range-wrap\n display: inline-block;\n margin-left: 4px;\n &.short .tui-image-editor-range\n width: 100px;\n .color-picker-control\n .{prefix}-range\n width: 108px;\n margin-left: 10px;\n .{prefix}-virtual-range-pointer\n background-color: #333;\n .{prefix}-virtual-range-bar\n background-color: #ccc;\n .{prefix}-virtual-range-subbar\n background-color: #606060;\n .{prefix}-range-wrap.{prefix}-newline.short\n margin-top: -2px;\n margin-left: 19px;\n label\n color: #8e8e8e;\n font-weight: normal;\n .{prefix}-range-wrap label\n vertical-align: baseline;\n font-size: 11px;\n margin-right: 7px;\n color: #fff;\n .{prefix}-range-value\n cursor: default;\n width: 40px;\n height: 24px;\n outline: none;\n border-radius: 2px;\n box-shadow: none;\n border: 1px solid #d5d5d5;\n text-align: center;\n background-color: #1c1c1c;\n color: #fff;\n font-weight: lighter;\n vertical-align: baseline;\n font-family: 'Noto Sans', sans-serif;\n margin-top: 15px;\n margin-left: 4px;\n .{prefix}-controls\n position: absolute;\n background-color: #151515;\n width: 100%;\n height: 64px;\n display: table;\n bottom: 0;\n z-index: 2;\n .{prefix}-icpartition\n display: inline-block;\n background-color: #444;\n width: 1px;\n height: 24px;\n","/* POSITION LEFT */\n.{prefix}-container\n &.left\n .{prefix}-menu\n > .{prefix}-item[tooltip-content]\n &:before\n left: 28px;\n top: 11px;\n border-right: 7px solid #2f2f2f;\n border-top: 7px solid transparent;\n border-bottom: 7px solid transparent;\n &:after\n top: 7px;\n left: 42px;\n white-space: nowrap;\n .{prefix}-submenu\n left: 0;\n height: 100%;\n width: 248px;\n .{prefix}-main-container\n left: 64px;\n width: calc(100% - 64px);\n height: 100%;\n .{prefix}-controls\n width: 64px;\n height: 100%;\n display: table;\n\n/* POSITION LEFT & RIGHT */\n.{prefix}-container\n &.left, &.right\n .{prefix}-menu\n white-space: inherit;\n .{prefix}-submenu\n white-space: normal;\n > div\n vertical-align: middle;\n .{prefix}-controls li\n display: inline-block;\n margin: 4px auto;\n .{prefix}-icpartition\n position: relative;\n top: -7px;\n width: 24px;\n height: 1px;\n .{prefix}-submenu\n .{prefix}-partition\n display: block;\n width: 75%;\n margin: auto;\n > div\n border-left: 0;\n height:10px;\n border-bottom: 1px solid #3c3c3c;\n width: 100%;\n margin: 0;\n .{prefix}-submenu-align\n margin-right: 0;\n .{prefix}-submenu-item\n li\n margin-top: 15px;\n .tui-colorpicker-clearfix li\n margin-top: 0;\n\n .{prefix}-checkbox-wrap.fixed-width\n width: 182px;\n white-space: normal;\n .{prefix}-range-wrap.{prefix}-newline label.range\n display: block;\n text-align: left;\n width: 75%;\n margin: auto;\n .{prefix}-range\n width: 136px;\n\n\n/* POSITION RIGHT */\n.{prefix}-container\n &.right\n .{prefix}-menu\n > .{prefix}-item[tooltip-content]\n &:before\n left: -3px;\n top: 11px;\n border-left: 7px solid #2f2f2f;\n border-top: 7px solid transparent;\n border-bottom: 7px solid transparent;\n &:after\n top: 7px;\n left: unset;\n right: 43px;\n white-space: nowrap;\n .{prefix}-submenu\n right: 0;\n height: 100%;\n width: 248px;\n .{prefix}-main-container \n right: 64px;\n width: calc(100% - 64px);\n height: 100%;\n .{prefix}-controls\n right: 0;\n width: 64px;\n height: 100%;\n display: table;\n\n\n/* POSITION TOP & BOTTOM */\n.{prefix}-container\n &.top, &.bottom\n .{prefix}-submenu\n .{prefix}-partition.only-left-right\n display: none;\n\n\n/* POSITION BOTTOM */\n.{prefix}-container\n &.bottom .tui-image-editor-submenu > div\n padding-bottom: 24px;\n\n/* POSITION TOP */\n.{prefix}-container\n &.top\n .color-picker-control .triangle\n top: -8px;\n border-right: 7px solid transparent;\n border-top: 0px;\n border-left: 7px solid transparent;\n border-bottom: 8px solid #fff;\n .{prefix}-size-wrap\n height: 100%;\n .{prefix}-main-container\n bottom: 0;\n .{prefix}-menu\n > .{prefix}-item[tooltip-content]\n &:before\n left: 13px;\n border-top: 0;\n border-bottom: 7px solid #2f2f2f;\n top: 33px;\n &:after\n top: 38px;\n .{prefix}-submenu\n top: 0;\n bottom: auto;\n > div\n padding-top: 24px;\n vertical-align: top;\n .{prefix}-controls-logo\n display: table-cell;\n .{prefix}-controls-buttons\n display: table-cell;\n .{prefix}-main\n top: 64px;\n height: calc(100% - 64px);\n .{prefix}-controls\n top: 0;\n bottom: inherit;\n\n/* HELP MENUBAR POSITION TOP */\n.{prefix}-container\n .{prefix}-help-menu\n &.top\n white-space: nowrap;\n width: 506px;\n height: 40px;\n top: 8px;\n left: 50%;\n transform: translateX(-50%);\n .tie-panel-history\n top: 45px;\n .opened .tie-panel-history:before\n border-right: 8px solid transparent;\n border-left: 8px solid transparent;\n border-bottom: 8px solid #fff;\n left: 90px;\n top: -8px;\n > .{prefix}-item[tooltip-content]\n &:before\n left: 13px;\n top: 35px;\n border: none;\n border-bottom: 7px solid #2f2f2f;\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n &:after\n top: 41px;\n left: -4px;\n white-space: nowrap;\n > .{prefix}-item[tooltip-content].opened\n &:before,\n &:after\n content: none;\n\n/* HELP MENUBAR POSITION BOTTOM */\n.{prefix}-container\n .{prefix}-help-menu\n &.bottom\n white-space: nowrap;\n width: 506px;\n height: 40px;\n bottom: 8px;\n left: 50%;\n transform: translateX(-50%);\n .tie-panel-history\n bottom: 45px;\n .opened .tie-panel-history:before\n border-right: 8px solid transparent;\n border-left: 8px solid transparent;\n border-top: 8px solid #fff;\n left: 90px;\n bottom: -8px;\n > .{prefix}-item[tooltip-content]\n &:before\n left: 13px;\n top: auto;\n bottom: 36px;\n border: none;\n border-top: 7px solid #2f2f2f;\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n &:after\n top: auto;\n left: -4px;\n bottom: 41px;\n white-space: nowrap;\n > .{prefix}-item[tooltip-content].opened\n &:before,\n &:after\n content: none;\n\n/* HELP MENUBAR POSITION LEFT */\n.{prefix}-container\n .{prefix}-help-menu\n &.left\n white-space: inherit;\n width: 40px;\n height: 506px;\n left: 8px;\n top: 50%;\n transform: translateY(-50%);\n .tie-panel-history\n left: 140px;\n top: -4px;\n .opened .tie-panel-history:before\n border-top: 8px solid transparent;\n border-bottom: 8px solid transparent;\n border-right: 8px solid #fff;\n left: -8px;\n top: 14px;\n .{prefix}-item\n margin: 4px auto;\n padding: 6px 8px;\n > .{prefix}-item[tooltip-content]\n &:before\n left: 27px;\n top: 11px;\n border: none;\n border-right: 7px solid #2f2f2f;\n border-top: 7px solid transparent;\n border-bottom: 7px solid transparent;\n &:after\n top: 7px;\n left: 40px;\n white-space: nowrap;\n > .{prefix}-item[tooltip-content].opened\n &:before,\n &:after\n content: none;\n\n/* HELP MENUBAR POSITION RIGHT */\n.{prefix}-container\n .{prefix}-help-menu\n &.right\n white-space: inherit;\n width: 40px;\n height: 506px;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n .tie-panel-history\n right: -30px;\n top: -4px;\n .opened .tie-panel-history:before\n border-top: 8px solid transparent;\n border-bottom: 8px solid transparent;\n border-left: 8px solid #fff;\n right: -8px;\n top: 14px;\n .{prefix}-item\n margin: 4px auto;\n padding: 6px 8px;\n > .{prefix}-item[tooltip-content]\n &:before\n left: -6px;\n top: 11px;\n border: none;\n border-left: 7px solid #2f2f2f;\n border-top: 7px solid transparent;\n border-bottom: 7px solid transparent;\n &:after\n top: 7px;\n left: auto;\n right: 39px;\n white-space: nowrap;\n > .{prefix}-item[tooltip-content].opened\n &:before,\n &:after\n content: none;\n","/* ICON */\n.{prefix}-container\n .tie-icon-add-button .{prefix}-button\n min-width: 42px;\n .svg_ic-menu\n .svg_ic-helpmenu\n width: 24px;\n height: 24px;\n .svg_ic-submenu\n width: 32px;\n height: 32px;\n .svg_img-bi\n width: 257px;\n height: 26px;\n\n .{prefix}-help-menu\n .{prefix}-controls\n svg > use\n display: none;\n .enabled svg:hover > use.hover\n .normal svg:hover > use.hover\n display: block;\n .active svg:hover > use.hover\n display: none;\n .on svg > use.hover,\n .opened svg > use.hover\n display: block;\n svg > use.normal\n display: block;\n .active svg > use.active\n display: block;\n .enabled svg > use.enabled\n display: block;\n .active svg > use.normal,\n .enabled svg > use.normal\n display: none;\n .help svg > use.disabled,\n .help.enabled svg > use.normal\n display: block;\n .help.enabled svg > use.disabled\n display: none;\n\n .{prefix}-controls:hover\n z-index: 3;\n","/* COLOR PICKER */\n.{prefix}-container\n div.tui-colorpicker-clearfix\n width: 159px;\n height: 28px;\n border: 1px solid #d5d5d5;\n border-radius: 2px;\n background-color: #f5f5f5;\n margin-top: 6px;\n padding: 4px 7px 4px 7px;\n .tui-colorpicker-palette-hex\n width: 114px;\n background-color: #f5f5f5;\n border: 0;\n font-size: 11px;\n margin-top: 2px;\n font-family: 'Noto Sans', sans-serif;\n .tui-colorpicker-palette-hex[value='#ffffff'] + .tui-colorpicker-palette-preview,\n .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview\n border: 1px solid #ccc;\n .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview\n background-size: cover;\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC');\n .tui-colorpicker-palette-preview\n border-radius: 100%;\n float: left;\n width: 17px;\n height: 17px;\n border: 0;\n .color-picker-control\n position: absolute;\n display: none;\n z-index: 99;\n width: 192px;\n background-color: #fff;\n box-shadow: 0 3px 22px 6px rgba(0, 0, 0, .15);\n padding: 16px;\n border-radius: 2px;\n .tui-colorpicker-palette-toggle-slider\n display: none;\n .tui-colorpicker-palette-button\n border: 0;\n border-radius: 100%;\n margin: 2px;\n background-size: cover;\n font-size: 1px;\n &[title='#ffffff']\n border: 1px solid #ccc;\n &[title='']\n border: 1px solid #ccc;\n .triangle\n width: 0;\n height: 0;\n border-right: 7px solid transparent;\n border-top: 8px solid #fff;\n border-left: 7px solid transparent;\n position: absolute;\n bottom: -8px;\n left: 84px;\n .tui-colorpicker-container,\n .tui-colorpicker-palette-container ul,\n .tui-colorpicker-palette-container\n width: 100%;\n height: auto;\n\n\n .filter-color-item\n .color-picker-control label\n font-color: #333;\n font-weight: normal;\n margin-right: 7pxleft\n .tui-image-editor-checkbox\n margin-top: 0;\n input + label:before,\n > label:before\n left: -16px;\n .color-picker\n width: 100%;\n height: auto;\n .color-picker-value \n width: 32px;\n height: 32px;\n border: 0px;\n border-radius: 100%;\n margin: auto;\n margin-bottom: 1px;\n &.transparent\n border: 1px solid #cbcbcb;\n background-size: cover;\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC');\n\n .color-picker-value + label\n color: #fff;\n\n .{prefix}-submenu svg > use\n display: none;\n .{prefix}-submenu svg > use.normal\n display: block;\n","/* ICON BUTTON */\n.tie-icon-add-button\n &.icon-bubble .{prefix}-button[data-icontype=\"icon-bubble\"] svg > use.active,\n &.icon-heart .{prefix}-button[data-icontype=\"icon-heart\"] svg > use.active,\n &.icon-location .{prefix}-button[data-icontype=\"icon-location\"] svg > use.active,\n &.icon-polygon .{prefix}-button[data-icontype=\"icon-polygon\"] svg > use.active,\n &.icon-star .{prefix}-button[data-icontype=\"icon-star\"] svg > use.active,\n &.icon-star-2 .{prefix}-button[data-icontype=\"icon-star-2\"] svg > use.active,\n &.icon-arrow-3 .{prefix}-button[data-icontype=\"icon-arrow-3\"] svg > use.active,\n &.icon-arrow-2 .{prefix}-button[data-icontype=\"icon-arrow-2\"] svg > use.active,\n &.icon-arrow .{prefix}-button[data-icontype=\"icon-arrow\"] svg > use.active,\n &.icon-bubble .{prefix}-button[data-icontype=\"icon-bubble\"] svg > use.active\n display: block;\n\n/* DRAW BUTTON */\n.tie-draw-line-select-button\n &.line .{prefix}-button.line svg > use.normal,\n &.free .{prefix}-button.free svg > use.normal\n display: none;\n\n &.line .{prefix}-button.line svg > use.active,\n &.free .{prefix}-button.free svg > use.active\n display: block;\n\n/* FLIP BUTTON */\n.tie-flip-button\n &.resetFlip .{prefix}-button.resetFlip,\n &.flipX .{prefix}-button.flipX,\n &.flipY .{prefix}-button.flipY\n svg > use.normal\n display: none;\n svg > use.active\n display: block;\n\n/* MASK BUTTON */\n.tie-mask-apply.apply.active .{prefix}-button.apply\n label\n color: #fff;\n svg > use.active\n display: block;\n\n/* CROP BUTTON */\n.tie-crop-button,\n.tie-crop-preset-button\n .{prefix}-button.apply\n margin-right: 24px;\n .{prefix}-button.preset.active svg > use.active\n display: block;\n .{prefix}-button.apply.active svg > use.active\n display: block;\n\n/* RESIZE BUTTON */\n.tie-resize-button,\n.tie-resize-preset-button\n .{prefix}-button.apply\n margin-right: 24px;\n .{prefix}-button.preset.active svg > use.active\n display: block;\n .{prefix}-button.apply.active svg > use.active\n display: block;\n\n\n/* SHAPE BUTTON */\n.tie-shape-button\n &.rect .{prefix}-button.rect,\n &.circle .{prefix}-button.circle,\n &.triangle .{prefix}-button.triangle\n svg > use.normal\n display: none;\n svg > use.active\n display: block;\n\n/* TEXT BUTTON */\n.tie-text-effect-button\n .{prefix}-button.active svg > use.active\n display: block;\n.tie-text-align-button\n &.tie-text-align-left .{prefix}-button.left svg > use.active,\n &.tie-text-align-center .{prefix}-button.center svg > use.active,\n &.tie-text-align-right .{prefix}-button.right svg > use.active\n display: block;\n.tie-mask-image-file,\n.tie-icon-image-file\n opacity: 0;\n position: absolute;\n width: 100%;\n height: 100%;\n border: 1px solid green;\n cursor: inherit;\n left: 0;\n top: 0;\n\n\n/* FLIP BUTTON */\n.tie-zoom-button\n &.resetFlip .{prefix}-button.resetFlip,\n &.flipX .{prefix}-button.flipX,\n &.flipY .{prefix}-button.flipY\n svg > use.normal\n display: none;\n svg > use.active\n display: block;\n","prefix = 'tui-image-editor'\n\n@import 'main.styl'\n@import 'gridtable.styl'\n@import 'submenu.styl'\n@import 'checkbox.styl'\n@import 'range.styl'\n@import 'position.styl'\n@import 'icon.styl'\n@import 'colorpicker.styl'\n@import 'buttons.styl'\n.{prefix}-container.top\n &.{prefix}-top-optimization\n .{prefix}-controls ul\n text-align: right;\n .{prefix}-controls-logo\n display: none;\n"],"sourceRoot":""} \ No newline at end of file diff --git a/apps/image-editor/dist/tui-image-editor.js b/apps/image-editor/dist/tui-image-editor.js index 01d7f9336..7f55484ef 100644 --- a/apps/image-editor/dist/tui-image-editor.js +++ b/apps/image-editor/dist/tui-image-editor.js @@ -1,27685 +1,61116 @@ /*! - * tui-image-editor.js - * @version 3.15.0 - * @author NHN. FE Development Lab + * TOAST UI ImageEditor + * @version 3.15.1 + * @author NHN. FE Development Team * @license MIT */ (function webpackUniversalModuleDefinition(root, factory) { if(typeof exports === 'object' && typeof module === 'object') - module.exports = factory(require("fabric")["fabric"], require("tui-code-snippet"), require("tui-color-picker")); + module.exports = factory(require("tui-code-snippet"), require("tui-color-picker")); else if(typeof define === 'function' && define.amd) - define(["fabric", "tui-code-snippet", "tui-color-picker"], factory); + define(["tui-code-snippet", "tui-color-picker"], factory); else if(typeof exports === 'object') - exports["ImageEditor"] = factory(require("fabric")["fabric"], require("tui-code-snippet"), require("tui-color-picker")); + exports["tui"] = factory(require("tui-code-snippet"), require("tui-color-picker")); else - root["tui"] = root["tui"] || {}, root["tui"]["ImageEditor"] = factory(root["fabric"], root["tui"]["util"], root["tui"]["colorPicker"]); -})(window, function(__WEBPACK_EXTERNAL_MODULE_fabric__, __WEBPACK_EXTERNAL_MODULE_tui_code_snippet__, __WEBPACK_EXTERNAL_MODULE_tui_color_picker__) { -return /******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); -/******/ } -/******/ }; -/******/ -/******/ // define __esModule on exports -/******/ __webpack_require__.r = function(exports) { -/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { -/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); -/******/ } -/******/ Object.defineProperty(exports, '__esModule', { value: true }); -/******/ }; -/******/ -/******/ // create a fake namespace object -/******/ // mode & 1: value is a module id, require it -/******/ // mode & 2: merge all properties of value into the ns -/******/ // mode & 4: return value when already ns object -/******/ // mode & 8|1: behave like require -/******/ __webpack_require__.t = function(value, mode) { -/******/ if(mode & 1) value = __webpack_require__(value); -/******/ if(mode & 8) return value; -/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; -/******/ var ns = Object.create(null); -/******/ __webpack_require__.r(ns); -/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); -/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); -/******/ return ns; -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = "/dist"; -/******/ -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = "./src/index.js"); -/******/ }) -/************************************************************************/ -/******/ ({ - -/***/ "./node_modules/core-js-pure/es/promise/index.js": -/*!*******************************************************!*\ - !*** ./node_modules/core-js-pure/es/promise/index.js ***! - \*******************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { - -__webpack_require__(/*! ../../modules/es.aggregate-error */ "./node_modules/core-js-pure/modules/es.aggregate-error.js"); -__webpack_require__(/*! ../../modules/es.object.to-string */ "./node_modules/core-js-pure/modules/es.object.to-string.js"); -__webpack_require__(/*! ../../modules/es.promise */ "./node_modules/core-js-pure/modules/es.promise.js"); -__webpack_require__(/*! ../../modules/es.promise.all-settled */ "./node_modules/core-js-pure/modules/es.promise.all-settled.js"); -__webpack_require__(/*! ../../modules/es.promise.any */ "./node_modules/core-js-pure/modules/es.promise.any.js"); -__webpack_require__(/*! ../../modules/es.promise.finally */ "./node_modules/core-js-pure/modules/es.promise.finally.js"); -__webpack_require__(/*! ../../modules/es.string.iterator */ "./node_modules/core-js-pure/modules/es.string.iterator.js"); -__webpack_require__(/*! ../../modules/web.dom-collections.iterator */ "./node_modules/core-js-pure/modules/web.dom-collections.iterator.js"); -var path = __webpack_require__(/*! ../../internals/path */ "./node_modules/core-js-pure/internals/path.js"); + root["tui"] = root["tui"] || {}, root["tui"]["ImageEditor"] = factory(root["tui"]["util"], root["tui"]["colorPicker"]); +})(self, function(__WEBPACK_EXTERNAL_MODULE__624__, __WEBPACK_EXTERNAL_MODULE__4858__) { +return /******/ (function() { // webpackBootstrap +/******/ var __webpack_modules__ = ({ -module.exports = path.Promise; - - -/***/ }), +/***/ 2777: +/***/ (function(__unused_webpack_module, exports, __webpack_require__) { -/***/ "./node_modules/core-js-pure/features/promise/index.js": -/*!*************************************************************!*\ - !*** ./node_modules/core-js-pure/features/promise/index.js ***! - \*************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +/* build: `node build.js modules=ALL exclude=gestures,accessors,erasing requirejs minifier=uglifyjs` */ +/*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */ -var parent = __webpack_require__(/*! ../../es/promise */ "./node_modules/core-js-pure/es/promise/index.js"); -__webpack_require__(/*! ../../modules/esnext.aggregate-error */ "./node_modules/core-js-pure/modules/esnext.aggregate-error.js"); -// TODO: Remove from `core-js@4` -__webpack_require__(/*! ../../modules/esnext.promise.all-settled */ "./node_modules/core-js-pure/modules/esnext.promise.all-settled.js"); -__webpack_require__(/*! ../../modules/esnext.promise.try */ "./node_modules/core-js-pure/modules/esnext.promise.try.js"); -__webpack_require__(/*! ../../modules/esnext.promise.any */ "./node_modules/core-js-pure/modules/esnext.promise.any.js"); - -module.exports = parent; +var fabric = fabric || { version: '4.6.0' }; +if (true) { + exports.fabric = fabric; +} +/* _AMD_START_ */ +else {} +/* _AMD_END_ */ +if (typeof document !== 'undefined' && typeof window !== 'undefined') { + if (document instanceof (typeof HTMLDocument !== 'undefined' ? HTMLDocument : Document)) { + fabric.document = document; + } + else { + fabric.document = document.implementation.createHTMLDocument(''); + } + fabric.window = window; +} +else { + // assume we're running under node.js when document/window are not present + var jsdom = __webpack_require__(4960); + var virtualWindow = new jsdom.JSDOM( + decodeURIComponent('%3C!DOCTYPE%20html%3E%3Chtml%3E%3Chead%3E%3C%2Fhead%3E%3Cbody%3E%3C%2Fbody%3E%3C%2Fhtml%3E'), + { + features: { + FetchExternalResources: ['img'] + }, + resources: 'usable' + }).window; + fabric.document = virtualWindow.document; + fabric.jsdomImplForWrapper = __webpack_require__(6759).implForWrapper; + fabric.nodeCanvas = __webpack_require__(6272).Canvas; + fabric.window = virtualWindow; + DOMParser = fabric.window.DOMParser; +} +/** + * True when in environment that supports touch events + * @type boolean + */ +fabric.isTouchSupported = 'ontouchstart' in fabric.window || 'ontouchstart' in fabric.document || + (fabric.window && fabric.window.navigator && fabric.window.navigator.maxTouchPoints > 0); -/***/ }), +/** + * True when in environment that's probably Node.js + * @type boolean + */ +fabric.isLikelyNode = typeof Buffer !== 'undefined' && + typeof window === 'undefined'; -/***/ "./node_modules/core-js-pure/internals/a-function.js": -/*!***********************************************************!*\ - !*** ./node_modules/core-js-pure/internals/a-function.js ***! - \***********************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { +/* _FROM_SVG_START_ */ +/** + * Attributes parsed from all SVG elements + * @type array + */ +fabric.SHARED_ATTRIBUTES = [ + 'display', + 'transform', + 'fill', 'fill-opacity', 'fill-rule', + 'opacity', + 'stroke', 'stroke-dasharray', 'stroke-linecap', 'stroke-dashoffset', + 'stroke-linejoin', 'stroke-miterlimit', + 'stroke-opacity', 'stroke-width', + 'id', 'paint-order', 'vector-effect', + 'instantiated_by_use', 'clip-path', +]; +/* _FROM_SVG_END_ */ -module.exports = function (it) { - if (typeof it != 'function') { - throw TypeError(String(it) + ' is not a function'); - } return it; -}; +/** + * Pixel per Inch as a default value set to 96. Can be changed for more realistic conversion. + */ +fabric.DPI = 96; +fabric.reNum = '(?:[-+]?(?:\\d+|\\d*\\.\\d+)(?:[eE][-+]?\\d+)?)'; +fabric.commaWsp = '(?:\\s+,?\\s*|,\\s*)'; +fabric.rePathCommand = /([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:[eE][-+]?\d+)?)/ig; +fabric.reNonWord = /[ \n\.,;!\?\-]/; +fabric.fontPaths = { }; +fabric.iMatrix = [1, 0, 0, 1, 0, 0]; +fabric.svgNS = 'http://www.w3.org/2000/svg'; +/** + * Pixel limit for cache canvases. 1Mpx , 4Mpx should be fine. + * @since 1.7.14 + * @type Number + * @default + */ +fabric.perfLimitSizeTotal = 2097152; -/***/ }), +/** + * Pixel limit for cache canvases width or height. IE fixes the maximum at 5000 + * @since 1.7.14 + * @type Number + * @default + */ +fabric.maxCacheSideLimit = 4096; -/***/ "./node_modules/core-js-pure/internals/a-possible-prototype.js": -/*!*********************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/a-possible-prototype.js ***! - \*********************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +/** + * Lowest pixel limit for cache canvases, set at 256PX + * @since 1.7.14 + * @type Number + * @default + */ +fabric.minCacheSideLimit = 256; -var isObject = __webpack_require__(/*! ../internals/is-object */ "./node_modules/core-js-pure/internals/is-object.js"); +/** + * Cache Object for widths of chars in text rendering. + */ +fabric.charWidthsCache = { }; -module.exports = function (it) { - if (!isObject(it) && it !== null) { - throw TypeError("Can't set " + String(it) + ' as a prototype'); - } return it; -}; +/** + * if webgl is enabled and available, textureSize will determine the size + * of the canvas backend + * @since 2.0.0 + * @type Number + * @default + */ +fabric.textureSize = 2048; +/** + * When 'true', style information is not retained when copy/pasting text, making + * pasted text use destination style. + * Defaults to 'false'. + * @type Boolean + * @default + */ +fabric.disableStyleCopyPaste = false; -/***/ }), +/** + * Enable webgl for filtering picture is available + * A filtering backend will be initialized, this will both take memory and + * time since a default 2048x2048 canvas will be created for the gl context + * @since 2.0.0 + * @type Boolean + * @default + */ +fabric.enableGLFiltering = true; -/***/ "./node_modules/core-js-pure/internals/add-to-unscopables.js": -/*!*******************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/add-to-unscopables.js ***! - \*******************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { +/** + * Device Pixel Ratio + * @see https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/HTML-canvas-guide/SettingUptheCanvas/SettingUptheCanvas.html + */ +fabric.devicePixelRatio = fabric.window.devicePixelRatio || + fabric.window.webkitDevicePixelRatio || + fabric.window.mozDevicePixelRatio || + 1; +/** + * Browser-specific constant to adjust CanvasRenderingContext2D.shadowBlur value, + * which is unitless and not rendered equally across browsers. + * + * Values that work quite well (as of October 2017) are: + * - Chrome: 1.5 + * - Edge: 1.75 + * - Firefox: 0.9 + * - Safari: 0.95 + * + * @since 2.0.0 + * @type Number + * @default 1 + */ +fabric.browserShadowBlurConstant = 1; -module.exports = function () { /* empty */ }; +/** + * This object contains the result of arc to bezier conversion for faster retrieving if the same arc needs to be converted again. + * It was an internal variable, is accessible since version 2.3.4 + */ +fabric.arcToSegmentsCache = { }; +/** + * This object keeps the results of the boundsOfCurve calculation mapped by the joined arguments necessary to calculate it. + * It does speed up calculation, if you parse and add always the same paths, but in case of heavy usage of freedrawing + * you do not get any speed benefit and you get a big object in memory. + * The object was a private variable before, while now is appended to the lib so that you have access to it and you + * can eventually clear it. + * It was an internal variable, is accessible since version 2.3.4 + */ +fabric.boundsOfCurveCache = { }; -/***/ }), +/** + * If disabled boundsOfCurveCache is not used. For apps that make heavy usage of pencil drawing probably disabling it is better + * @default true + */ +fabric.cachesBoundsOfCurve = true; -/***/ "./node_modules/core-js-pure/internals/an-instance.js": -/*!************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/an-instance.js ***! - \************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { +/** + * Skip performance testing of setupGLContext and force the use of putImageData that seems to be the one that works best on + * Chrome + old hardware. if your users are experiencing empty images after filtering you may try to force this to true + * this has to be set before instantiating the filtering backend ( before filtering the first image ) + * @type Boolean + * @default false + */ +fabric.forceGLPutImageData = false; -module.exports = function (it, Constructor, name) { - if (!(it instanceof Constructor)) { - throw TypeError('Incorrect ' + (name ? name + ' ' : '') + 'invocation'); - } return it; +fabric.initFilterBackend = function() { + if (fabric.enableGLFiltering && fabric.isWebglSupported && fabric.isWebglSupported(fabric.textureSize)) { + console.log('max texture size: ' + fabric.maxTextureSize); + return (new fabric.WebglFilterBackend({ tileSize: fabric.textureSize })); + } + else if (fabric.Canvas2dFilterBackend) { + return (new fabric.Canvas2dFilterBackend()); + } }; -/***/ }), +if (typeof document !== 'undefined' && typeof window !== 'undefined') { + // ensure globality even if entire library were function wrapped (as in Meteor.js packaging system) + window.fabric = fabric; +} -/***/ "./node_modules/core-js-pure/internals/an-object.js": -/*!**********************************************************!*\ - !*** ./node_modules/core-js-pure/internals/an-object.js ***! - \**********************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { -var isObject = __webpack_require__(/*! ../internals/is-object */ "./node_modules/core-js-pure/internals/is-object.js"); +(function() { -module.exports = function (it) { - if (!isObject(it)) { - throw TypeError(String(it) + ' is not an object'); - } return it; -}; + /** + * @private + * @param {String} eventName + * @param {Function} handler + */ + function _removeEventListener(eventName, handler) { + if (!this.__eventListeners[eventName]) { + return; + } + var eventListener = this.__eventListeners[eventName]; + if (handler) { + eventListener[eventListener.indexOf(handler)] = false; + } + else { + fabric.util.array.fill(eventListener, false); + } + } + /** + * Observes specified event + * @memberOf fabric.Observable + * @alias on + * @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler}) + * @param {Function} handler Function that receives a notification when an event of the specified type occurs + * @return {Self} thisArg + * @chainable + */ + function on(eventName, handler) { + if (!this.__eventListeners) { + this.__eventListeners = { }; + } + // one object with key/value pairs was passed + if (arguments.length === 1) { + for (var prop in eventName) { + this.on(prop, eventName[prop]); + } + } + else { + if (!this.__eventListeners[eventName]) { + this.__eventListeners[eventName] = []; + } + this.__eventListeners[eventName].push(handler); + } + return this; + } -/***/ }), + function _once(eventName, handler) { + var _handler = function () { + handler.apply(this, arguments); + this.off(eventName, _handler); + }.bind(this); + this.on(eventName, _handler); + } -/***/ "./node_modules/core-js-pure/internals/array-includes.js": -/*!***************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/array-includes.js ***! - \***************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + function once(eventName, handler) { + // one object with key/value pairs was passed + if (arguments.length === 1) { + for (var prop in eventName) { + _once.call(this, prop, eventName[prop]); + } + } + else { + _once.call(this, eventName, handler); + } + return this; + } -var toIndexedObject = __webpack_require__(/*! ../internals/to-indexed-object */ "./node_modules/core-js-pure/internals/to-indexed-object.js"); -var toLength = __webpack_require__(/*! ../internals/to-length */ "./node_modules/core-js-pure/internals/to-length.js"); -var toAbsoluteIndex = __webpack_require__(/*! ../internals/to-absolute-index */ "./node_modules/core-js-pure/internals/to-absolute-index.js"); + /** + * Stops event observing for a particular event handler. Calling this method + * without arguments removes all handlers for all events + * @memberOf fabric.Observable + * @alias off + * @param {String|Object} eventName Event name (eg. 'after:render') or object with key/value pairs (eg. {'after:render': handler, 'selection:cleared': handler}) + * @param {Function} handler Function to be deleted from EventListeners + * @return {Self} thisArg + * @chainable + */ + function off(eventName, handler) { + if (!this.__eventListeners) { + return this; + } -// `Array.prototype.{ indexOf, includes }` methods implementation -var createMethod = function (IS_INCLUDES) { - return function ($this, el, fromIndex) { - var O = toIndexedObject($this); - var length = toLength(O.length); - var index = toAbsoluteIndex(fromIndex, length); - var value; - // Array#includes uses SameValueZero equality algorithm - // eslint-disable-next-line no-self-compare -- NaN check - if (IS_INCLUDES && el != el) while (length > index) { - value = O[index++]; - // eslint-disable-next-line no-self-compare -- NaN check - if (value != value) return true; - // Array#indexOf ignores holes, Array#includes - not - } else for (;length > index; index++) { - if ((IS_INCLUDES || index in O) && O[index] === el) return IS_INCLUDES || index || 0; - } return !IS_INCLUDES && -1; - }; -}; + // remove all key/value pairs (event name -> event handler) + if (arguments.length === 0) { + for (eventName in this.__eventListeners) { + _removeEventListener.call(this, eventName); + } + } + // one object with key/value pairs was passed + else if (arguments.length === 1 && typeof arguments[0] === 'object') { + for (var prop in eventName) { + _removeEventListener.call(this, prop, eventName[prop]); + } + } + else { + _removeEventListener.call(this, eventName, handler); + } + return this; + } -module.exports = { - // `Array.prototype.includes` method - // https://tc39.es/ecma262/#sec-array.prototype.includes - includes: createMethod(true), - // `Array.prototype.indexOf` method - // https://tc39.es/ecma262/#sec-array.prototype.indexof - indexOf: createMethod(false) -}; + /** + * Fires event with an optional options object + * @memberOf fabric.Observable + * @param {String} eventName Event name to fire + * @param {Object} [options] Options object + * @return {Self} thisArg + * @chainable + */ + function fire(eventName, options) { + if (!this.__eventListeners) { + return this; + } + var listenersForEvent = this.__eventListeners[eventName]; + if (!listenersForEvent) { + return this; + } -/***/ }), + for (var i = 0, len = listenersForEvent.length; i < len; i++) { + listenersForEvent[i] && listenersForEvent[i].call(this, options || { }); + } + this.__eventListeners[eventName] = listenersForEvent.filter(function(value) { + return value !== false; + }); + return this; + } + + /** + * @namespace fabric.Observable + * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#events} + * @see {@link http://fabricjs.com/events|Events demo} + */ + fabric.Observable = { + fire: fire, + on: on, + once: once, + off: off, + }; +})(); -/***/ "./node_modules/core-js-pure/internals/check-correctness-of-iteration.js": -/*!*******************************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/check-correctness-of-iteration.js ***! - \*******************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { -var wellKnownSymbol = __webpack_require__(/*! ../internals/well-known-symbol */ "./node_modules/core-js-pure/internals/well-known-symbol.js"); +/** + * @namespace fabric.Collection + */ +fabric.Collection = { -var ITERATOR = wellKnownSymbol('iterator'); -var SAFE_CLOSING = false; + _objects: [], -try { - var called = 0; - var iteratorWithReturn = { - next: function () { - return { done: !!called++ }; - }, - 'return': function () { - SAFE_CLOSING = true; + /** + * Adds objects to collection, Canvas or Group, then renders canvas + * (if `renderOnAddRemove` is not `false`). + * in case of Group no changes to bounding box are made. + * Objects should be instances of (or inherit from) fabric.Object + * Use of this function is highly discouraged for groups. + * you can add a bunch of objects with the add method but then you NEED + * to run a addWithUpdate call for the Group class or position/bbox will be wrong. + * @param {...fabric.Object} object Zero or more fabric instances + * @return {Self} thisArg + * @chainable + */ + add: function () { + this._objects.push.apply(this._objects, arguments); + if (this._onObjectAdded) { + for (var i = 0, length = arguments.length; i < length; i++) { + this._onObjectAdded(arguments[i]); + } } - }; - iteratorWithReturn[ITERATOR] = function () { + this.renderOnAddRemove && this.requestRenderAll(); return this; - }; - // eslint-disable-next-line es/no-array-from, no-throw-literal -- required for testing - Array.from(iteratorWithReturn, function () { throw 2; }); -} catch (error) { /* empty */ } + }, -module.exports = function (exec, SKIP_CLOSING) { - if (!SKIP_CLOSING && !SAFE_CLOSING) return false; - var ITERATION_SUPPORT = false; - try { - var object = {}; - object[ITERATOR] = function () { - return { - next: function () { - return { done: ITERATION_SUPPORT = true }; - } - }; - }; - exec(object); - } catch (error) { /* empty */ } - return ITERATION_SUPPORT; -}; + /** + * Inserts an object into collection at specified index, then renders canvas (if `renderOnAddRemove` is not `false`) + * An object should be an instance of (or inherit from) fabric.Object + * Use of this function is highly discouraged for groups. + * you can add a bunch of objects with the insertAt method but then you NEED + * to run a addWithUpdate call for the Group class or position/bbox will be wrong. + * @param {Object} object Object to insert + * @param {Number} index Index to insert object at + * @param {Boolean} nonSplicing When `true`, no splicing (shifting) of objects occurs + * @return {Self} thisArg + * @chainable + */ + insertAt: function (object, index, nonSplicing) { + var objects = this._objects; + if (nonSplicing) { + objects[index] = object; + } + else { + objects.splice(index, 0, object); + } + this._onObjectAdded && this._onObjectAdded(object); + this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, + /** + * Removes objects from a collection, then renders canvas (if `renderOnAddRemove` is not `false`) + * @param {...fabric.Object} object Zero or more fabric instances + * @return {Self} thisArg + * @chainable + */ + remove: function() { + var objects = this._objects, + index, somethingRemoved = false; -/***/ }), + for (var i = 0, length = arguments.length; i < length; i++) { + index = objects.indexOf(arguments[i]); -/***/ "./node_modules/core-js-pure/internals/classof-raw.js": -/*!************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/classof-raw.js ***! - \************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { + // only call onObjectRemoved if an object was actually removed + if (index !== -1) { + somethingRemoved = true; + objects.splice(index, 1); + this._onObjectRemoved && this._onObjectRemoved(arguments[i]); + } + } -var toString = {}.toString; + this.renderOnAddRemove && somethingRemoved && this.requestRenderAll(); + return this; + }, -module.exports = function (it) { - return toString.call(it).slice(8, -1); -}; + /** + * Executes given function for each object in this group + * @param {Function} callback + * Callback invoked with current object as first argument, + * index - as second and an array of all objects - as third. + * Callback is invoked in a context of Global Object (e.g. `window`) + * when no `context` argument is given + * + * @param {Object} context Context (aka thisObject) + * @return {Self} thisArg + * @chainable + */ + forEachObject: function(callback, context) { + var objects = this.getObjects(); + for (var i = 0, len = objects.length; i < len; i++) { + callback.call(context, objects[i], i, objects); + } + return this; + }, + /** + * Returns an array of children objects of this instance + * Type parameter introduced in 1.3.10 + * since 2.3.5 this method return always a COPY of the array; + * @param {String} [type] When specified, only objects of this type are returned + * @return {Array} + */ + getObjects: function(type) { + if (typeof type === 'undefined') { + return this._objects.concat(); + } + return this._objects.filter(function(o) { + return o.type === type; + }); + }, -/***/ }), + /** + * Returns object at specified index + * @param {Number} index + * @return {Self} thisArg + */ + item: function (index) { + return this._objects[index]; + }, -/***/ "./node_modules/core-js-pure/internals/classof.js": -/*!********************************************************!*\ - !*** ./node_modules/core-js-pure/internals/classof.js ***! - \********************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Returns true if collection contains no objects + * @return {Boolean} true if collection is empty + */ + isEmpty: function () { + return this._objects.length === 0; + }, -var TO_STRING_TAG_SUPPORT = __webpack_require__(/*! ../internals/to-string-tag-support */ "./node_modules/core-js-pure/internals/to-string-tag-support.js"); -var classofRaw = __webpack_require__(/*! ../internals/classof-raw */ "./node_modules/core-js-pure/internals/classof-raw.js"); -var wellKnownSymbol = __webpack_require__(/*! ../internals/well-known-symbol */ "./node_modules/core-js-pure/internals/well-known-symbol.js"); + /** + * Returns a size of a collection (i.e: length of an array containing its objects) + * @return {Number} Collection size + */ + size: function() { + return this._objects.length; + }, -var TO_STRING_TAG = wellKnownSymbol('toStringTag'); -// ES3 wrong here -var CORRECT_ARGUMENTS = classofRaw(function () { return arguments; }()) == 'Arguments'; + /** + * Returns true if collection contains an object + * @param {Object} object Object to check against + * @param {Boolean} [deep=false] `true` to check all descendants, `false` to check only `_objects` + * @return {Boolean} `true` if collection contains an object + */ + contains: function (object, deep) { + if (this._objects.indexOf(object) > -1) { + return true; + } + else if (deep) { + return this._objects.some(function (obj) { + return typeof obj.contains === 'function' && obj.contains(object, true); + }); + } + return false; + }, -// fallback for IE11 Script Access Denied error -var tryGet = function (it, key) { - try { - return it[key]; - } catch (error) { /* empty */ } + /** + * Returns number representation of a collection complexity + * @return {Number} complexity + */ + complexity: function () { + return this._objects.reduce(function (memo, current) { + memo += current.complexity ? current.complexity() : 0; + return memo; + }, 0); + } }; -// getting tag from ES6+ `Object.prototype.toString` -module.exports = TO_STRING_TAG_SUPPORT ? classofRaw : function (it) { - var O, tag, result; - return it === undefined ? 'Undefined' : it === null ? 'Null' - // @@toStringTag case - : typeof (tag = tryGet(O = Object(it), TO_STRING_TAG)) == 'string' ? tag - // builtinTag case - : CORRECT_ARGUMENTS ? classofRaw(O) - // ES3 arguments fallback - : (result = classofRaw(O)) == 'Object' && typeof O.callee == 'function' ? 'Arguments' : result; -}; +/** + * @namespace fabric.CommonMethods + */ +fabric.CommonMethods = { -/***/ }), + /** + * Sets object's properties from options + * @param {Object} [options] Options object + */ + _setOptions: function(options) { + for (var prop in options) { + this.set(prop, options[prop]); + } + }, -/***/ "./node_modules/core-js-pure/internals/correct-prototype-getter.js": -/*!*************************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/correct-prototype-getter.js ***! - \*************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * @private + * @param {Object} [filler] Options object + * @param {String} [property] property to set the Gradient to + */ + _initGradient: function(filler, property) { + if (filler && filler.colorStops && !(filler instanceof fabric.Gradient)) { + this.set(property, new fabric.Gradient(filler)); + } + }, -var fails = __webpack_require__(/*! ../internals/fails */ "./node_modules/core-js-pure/internals/fails.js"); + /** + * @private + * @param {Object} [filler] Options object + * @param {String} [property] property to set the Pattern to + * @param {Function} [callback] callback to invoke after pattern load + */ + _initPattern: function(filler, property, callback) { + if (filler && filler.source && !(filler instanceof fabric.Pattern)) { + this.set(property, new fabric.Pattern(filler, callback)); + } + else { + callback && callback(); + } + }, -module.exports = !fails(function () { - function F() { /* empty */ } - F.prototype.constructor = null; - // eslint-disable-next-line es/no-object-getprototypeof -- required for testing - return Object.getPrototypeOf(new F()) !== F.prototype; -}); + /** + * @private + */ + _setObject: function(obj) { + for (var prop in obj) { + this._set(prop, obj[prop]); + } + }, + /** + * Sets property to a given value. When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. If you need to update those, call `setCoords()`. + * @param {String|Object} key Property name or object (if object, iterate over the object properties) + * @param {Object|Function} value Property value (if function, the value is passed into it and its return value is used as a new one) + * @return {fabric.Object} thisArg + * @chainable + */ + set: function(key, value) { + if (typeof key === 'object') { + this._setObject(key); + } + else { + this._set(key, value); + } + return this; + }, -/***/ }), + _set: function(key, value) { + this[key] = value; + }, -/***/ "./node_modules/core-js-pure/internals/create-iterator-constructor.js": -/*!****************************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/create-iterator-constructor.js ***! - \****************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Toggles specified property from `true` to `false` or from `false` to `true` + * @param {String} property Property to toggle + * @return {fabric.Object} thisArg + * @chainable + */ + toggle: function(property) { + var value = this.get(property); + if (typeof value === 'boolean') { + this.set(property, !value); + } + return this; + }, -"use strict"; + /** + * Basic getter + * @param {String} property Property name + * @return {*} value of a property + */ + get: function(property) { + return this[property]; + } +}; -var IteratorPrototype = __webpack_require__(/*! ../internals/iterators-core */ "./node_modules/core-js-pure/internals/iterators-core.js").IteratorPrototype; -var create = __webpack_require__(/*! ../internals/object-create */ "./node_modules/core-js-pure/internals/object-create.js"); -var createPropertyDescriptor = __webpack_require__(/*! ../internals/create-property-descriptor */ "./node_modules/core-js-pure/internals/create-property-descriptor.js"); -var setToStringTag = __webpack_require__(/*! ../internals/set-to-string-tag */ "./node_modules/core-js-pure/internals/set-to-string-tag.js"); -var Iterators = __webpack_require__(/*! ../internals/iterators */ "./node_modules/core-js-pure/internals/iterators.js"); -var returnThis = function () { return this; }; +(function(global) { -module.exports = function (IteratorConstructor, NAME, next) { - var TO_STRING_TAG = NAME + ' Iterator'; - IteratorConstructor.prototype = create(IteratorPrototype, { next: createPropertyDescriptor(1, next) }); - setToStringTag(IteratorConstructor, TO_STRING_TAG, false, true); - Iterators[TO_STRING_TAG] = returnThis; - return IteratorConstructor; -}; + var sqrt = Math.sqrt, + atan2 = Math.atan2, + pow = Math.pow, + PiBy180 = Math.PI / 180, + PiBy2 = Math.PI / 2; + /** + * @namespace fabric.util + */ + fabric.util = { -/***/ }), + /** + * Calculate the cos of an angle, avoiding returning floats for known results + * @static + * @memberOf fabric.util + * @param {Number} angle the angle in radians or in degree + * @return {Number} + */ + cos: function(angle) { + if (angle === 0) { return 1; } + if (angle < 0) { + // cos(a) = cos(-a) + angle = -angle; + } + var angleSlice = angle / PiBy2; + switch (angleSlice) { + case 1: case 3: return 0; + case 2: return -1; + } + return Math.cos(angle); + }, -/***/ "./node_modules/core-js-pure/internals/create-non-enumerable-property.js": -/*!*******************************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/create-non-enumerable-property.js ***! - \*******************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Calculate the sin of an angle, avoiding returning floats for known results + * @static + * @memberOf fabric.util + * @param {Number} angle the angle in radians or in degree + * @return {Number} + */ + sin: function(angle) { + if (angle === 0) { return 0; } + var angleSlice = angle / PiBy2, sign = 1; + if (angle < 0) { + // sin(-a) = -sin(a) + sign = -1; + } + switch (angleSlice) { + case 1: return sign; + case 2: return 0; + case 3: return -sign; + } + return Math.sin(angle); + }, -var DESCRIPTORS = __webpack_require__(/*! ../internals/descriptors */ "./node_modules/core-js-pure/internals/descriptors.js"); -var definePropertyModule = __webpack_require__(/*! ../internals/object-define-property */ "./node_modules/core-js-pure/internals/object-define-property.js"); -var createPropertyDescriptor = __webpack_require__(/*! ../internals/create-property-descriptor */ "./node_modules/core-js-pure/internals/create-property-descriptor.js"); + /** + * Removes value from an array. + * Presence of value (and its position in an array) is determined via `Array.prototype.indexOf` + * @static + * @memberOf fabric.util + * @param {Array} array + * @param {*} value + * @return {Array} original array + */ + removeFromArray: function(array, value) { + var idx = array.indexOf(value); + if (idx !== -1) { + array.splice(idx, 1); + } + return array; + }, -module.exports = DESCRIPTORS ? function (object, key, value) { - return definePropertyModule.f(object, key, createPropertyDescriptor(1, value)); -} : function (object, key, value) { - object[key] = value; - return object; -}; + /** + * Returns random number between 2 specified ones. + * @static + * @memberOf fabric.util + * @param {Number} min lower limit + * @param {Number} max upper limit + * @return {Number} random value (between min and max) + */ + getRandomInt: function(min, max) { + return Math.floor(Math.random() * (max - min + 1)) + min; + }, + /** + * Transforms degrees to radians. + * @static + * @memberOf fabric.util + * @param {Number} degrees value in degrees + * @return {Number} value in radians + */ + degreesToRadians: function(degrees) { + return degrees * PiBy180; + }, -/***/ }), + /** + * Transforms radians to degrees. + * @static + * @memberOf fabric.util + * @param {Number} radians value in radians + * @return {Number} value in degrees + */ + radiansToDegrees: function(radians) { + return radians / PiBy180; + }, -/***/ "./node_modules/core-js-pure/internals/create-property-descriptor.js": -/*!***************************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/create-property-descriptor.js ***! - \***************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { + /** + * Rotates `point` around `origin` with `radians` + * @static + * @memberOf fabric.util + * @param {fabric.Point} point The point to rotate + * @param {fabric.Point} origin The origin of the rotation + * @param {Number} radians The radians of the angle for the rotation + * @return {fabric.Point} The new rotated point + */ + rotatePoint: function(point, origin, radians) { + var newPoint = new fabric.Point(point.x - origin.x, point.y - origin.y), + v = fabric.util.rotateVector(newPoint, radians); + return new fabric.Point(v.x, v.y).addEquals(origin); + }, -module.exports = function (bitmap, value) { - return { - enumerable: !(bitmap & 1), - configurable: !(bitmap & 2), - writable: !(bitmap & 4), - value: value - }; -}; + /** + * Rotates `vector` with `radians` + * @static + * @memberOf fabric.util + * @param {Object} vector The vector to rotate (x and y) + * @param {Number} radians The radians of the angle for the rotation + * @return {Object} The new rotated point + */ + rotateVector: function(vector, radians) { + var sin = fabric.util.sin(radians), + cos = fabric.util.cos(radians), + rx = vector.x * cos - vector.y * sin, + ry = vector.x * sin + vector.y * cos; + return { + x: rx, + y: ry + }; + }, + /** + * Apply transform t to point p + * @static + * @memberOf fabric.util + * @param {fabric.Point} p The point to transform + * @param {Array} t The transform + * @param {Boolean} [ignoreOffset] Indicates that the offset should not be applied + * @return {fabric.Point} The transformed point + */ + transformPoint: function(p, t, ignoreOffset) { + if (ignoreOffset) { + return new fabric.Point( + t[0] * p.x + t[2] * p.y, + t[1] * p.x + t[3] * p.y + ); + } + return new fabric.Point( + t[0] * p.x + t[2] * p.y + t[4], + t[1] * p.x + t[3] * p.y + t[5] + ); + }, -/***/ }), + /** + * Returns coordinates of points's bounding rectangle (left, top, width, height) + * @param {Array} points 4 points array + * @param {Array} [transform] an array of 6 numbers representing a 2x3 transform matrix + * @return {Object} Object with left, top, width, height properties + */ + makeBoundingBoxFromPoints: function(points, transform) { + if (transform) { + for (var i = 0; i < points.length; i++) { + points[i] = fabric.util.transformPoint(points[i], transform); + } + } + var xPoints = [points[0].x, points[1].x, points[2].x, points[3].x], + minX = fabric.util.array.min(xPoints), + maxX = fabric.util.array.max(xPoints), + width = maxX - minX, + yPoints = [points[0].y, points[1].y, points[2].y, points[3].y], + minY = fabric.util.array.min(yPoints), + maxY = fabric.util.array.max(yPoints), + height = maxY - minY; -/***/ "./node_modules/core-js-pure/internals/define-iterator.js": -/*!****************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/define-iterator.js ***! - \****************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + return { + left: minX, + top: minY, + width: width, + height: height + }; + }, -"use strict"; + /** + * Invert transformation t + * @static + * @memberOf fabric.util + * @param {Array} t The transform + * @return {Array} The inverted transform + */ + invertTransform: function(t) { + var a = 1 / (t[0] * t[3] - t[1] * t[2]), + r = [a * t[3], -a * t[1], -a * t[2], a * t[0]], + o = fabric.util.transformPoint({ x: t[4], y: t[5] }, r, true); + r[4] = -o.x; + r[5] = -o.y; + return r; + }, -var $ = __webpack_require__(/*! ../internals/export */ "./node_modules/core-js-pure/internals/export.js"); -var createIteratorConstructor = __webpack_require__(/*! ../internals/create-iterator-constructor */ "./node_modules/core-js-pure/internals/create-iterator-constructor.js"); -var getPrototypeOf = __webpack_require__(/*! ../internals/object-get-prototype-of */ "./node_modules/core-js-pure/internals/object-get-prototype-of.js"); -var setPrototypeOf = __webpack_require__(/*! ../internals/object-set-prototype-of */ "./node_modules/core-js-pure/internals/object-set-prototype-of.js"); -var setToStringTag = __webpack_require__(/*! ../internals/set-to-string-tag */ "./node_modules/core-js-pure/internals/set-to-string-tag.js"); -var createNonEnumerableProperty = __webpack_require__(/*! ../internals/create-non-enumerable-property */ "./node_modules/core-js-pure/internals/create-non-enumerable-property.js"); -var redefine = __webpack_require__(/*! ../internals/redefine */ "./node_modules/core-js-pure/internals/redefine.js"); -var wellKnownSymbol = __webpack_require__(/*! ../internals/well-known-symbol */ "./node_modules/core-js-pure/internals/well-known-symbol.js"); -var IS_PURE = __webpack_require__(/*! ../internals/is-pure */ "./node_modules/core-js-pure/internals/is-pure.js"); -var Iterators = __webpack_require__(/*! ../internals/iterators */ "./node_modules/core-js-pure/internals/iterators.js"); -var IteratorsCore = __webpack_require__(/*! ../internals/iterators-core */ "./node_modules/core-js-pure/internals/iterators-core.js"); + /** + * A wrapper around Number#toFixed, which contrary to native method returns number, not string. + * @static + * @memberOf fabric.util + * @param {Number|String} number number to operate on + * @param {Number} fractionDigits number of fraction digits to "leave" + * @return {Number} + */ + toFixed: function(number, fractionDigits) { + return parseFloat(Number(number).toFixed(fractionDigits)); + }, -var IteratorPrototype = IteratorsCore.IteratorPrototype; -var BUGGY_SAFARI_ITERATORS = IteratorsCore.BUGGY_SAFARI_ITERATORS; -var ITERATOR = wellKnownSymbol('iterator'); -var KEYS = 'keys'; -var VALUES = 'values'; -var ENTRIES = 'entries'; + /** + * Converts from attribute value to pixel value if applicable. + * Returns converted pixels or original value not converted. + * @param {Number|String} value number to operate on + * @param {Number} fontSize + * @return {Number|String} + */ + parseUnit: function(value, fontSize) { + var unit = /\D{0,2}$/.exec(value), + number = parseFloat(value); + if (!fontSize) { + fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE; + } + switch (unit[0]) { + case 'mm': + return number * fabric.DPI / 25.4; -var returnThis = function () { return this; }; + case 'cm': + return number * fabric.DPI / 2.54; -module.exports = function (Iterable, NAME, IteratorConstructor, next, DEFAULT, IS_SET, FORCED) { - createIteratorConstructor(IteratorConstructor, NAME, next); + case 'in': + return number * fabric.DPI; - var getIterationMethod = function (KIND) { - if (KIND === DEFAULT && defaultIterator) return defaultIterator; - if (!BUGGY_SAFARI_ITERATORS && KIND in IterablePrototype) return IterablePrototype[KIND]; - switch (KIND) { - case KEYS: return function keys() { return new IteratorConstructor(this, KIND); }; - case VALUES: return function values() { return new IteratorConstructor(this, KIND); }; - case ENTRIES: return function entries() { return new IteratorConstructor(this, KIND); }; - } return function () { return new IteratorConstructor(this); }; - }; + case 'pt': + return number * fabric.DPI / 72; // or * 4 / 3 - var TO_STRING_TAG = NAME + ' Iterator'; - var INCORRECT_VALUES_NAME = false; - var IterablePrototype = Iterable.prototype; - var nativeIterator = IterablePrototype[ITERATOR] - || IterablePrototype['@@iterator'] - || DEFAULT && IterablePrototype[DEFAULT]; - var defaultIterator = !BUGGY_SAFARI_ITERATORS && nativeIterator || getIterationMethod(DEFAULT); - var anyNativeIterator = NAME == 'Array' ? IterablePrototype.entries || nativeIterator : nativeIterator; - var CurrentIteratorPrototype, methods, KEY; + case 'pc': + return number * fabric.DPI / 72 * 12; // or * 16 - // fix native - if (anyNativeIterator) { - CurrentIteratorPrototype = getPrototypeOf(anyNativeIterator.call(new Iterable())); - if (IteratorPrototype !== Object.prototype && CurrentIteratorPrototype.next) { - if (!IS_PURE && getPrototypeOf(CurrentIteratorPrototype) !== IteratorPrototype) { - if (setPrototypeOf) { - setPrototypeOf(CurrentIteratorPrototype, IteratorPrototype); - } else if (typeof CurrentIteratorPrototype[ITERATOR] != 'function') { - createNonEnumerableProperty(CurrentIteratorPrototype, ITERATOR, returnThis); - } + case 'em': + return number * fontSize; + + default: + return number; } - // Set @@toStringTag to native iterators - setToStringTag(CurrentIteratorPrototype, TO_STRING_TAG, true, true); - if (IS_PURE) Iterators[TO_STRING_TAG] = returnThis; - } - } + }, - // fix Array#{values, @@iterator}.name in V8 / FF - if (DEFAULT == VALUES && nativeIterator && nativeIterator.name !== VALUES) { - INCORRECT_VALUES_NAME = true; - defaultIterator = function values() { return nativeIterator.call(this); }; - } + /** + * Function which always returns `false`. + * @static + * @memberOf fabric.util + * @return {Boolean} + */ + falseFunction: function() { + return false; + }, - // define iterator - if ((!IS_PURE || FORCED) && IterablePrototype[ITERATOR] !== defaultIterator) { - createNonEnumerableProperty(IterablePrototype, ITERATOR, defaultIterator); - } - Iterators[NAME] = defaultIterator; + /** + * Returns klass "Class" object of given namespace + * @memberOf fabric.util + * @param {String} type Type of object (eg. 'circle') + * @param {String} namespace Namespace to get klass "Class" object from + * @return {Object} klass "Class" + */ + getKlass: function(type, namespace) { + // capitalize first letter only + type = fabric.util.string.camelize(type.charAt(0).toUpperCase() + type.slice(1)); + return fabric.util.resolveNamespace(namespace)[type]; + }, - // export additional methods - if (DEFAULT) { - methods = { - values: getIterationMethod(VALUES), - keys: IS_SET ? defaultIterator : getIterationMethod(KEYS), - entries: getIterationMethod(ENTRIES) - }; - if (FORCED) for (KEY in methods) { - if (BUGGY_SAFARI_ITERATORS || INCORRECT_VALUES_NAME || !(KEY in IterablePrototype)) { - redefine(IterablePrototype, KEY, methods[KEY]); + /** + * Returns array of attributes for given svg that fabric parses + * @memberOf fabric.util + * @param {String} type Type of svg element (eg. 'circle') + * @return {Array} string names of supported attributes + */ + getSvgAttributes: function(type) { + var attributes = [ + 'instantiated_by_use', + 'style', + 'id', + 'class' + ]; + switch (type) { + case 'linearGradient': + attributes = attributes.concat(['x1', 'y1', 'x2', 'y2', 'gradientUnits', 'gradientTransform']); + break; + case 'radialGradient': + attributes = attributes.concat(['gradientUnits', 'gradientTransform', 'cx', 'cy', 'r', 'fx', 'fy', 'fr']); + break; + case 'stop': + attributes = attributes.concat(['offset', 'stop-color', 'stop-opacity']); + break; } - } else $({ target: NAME, proto: true, forced: BUGGY_SAFARI_ITERATORS || INCORRECT_VALUES_NAME }, methods); - } - - return methods; -}; + return attributes; + }, + /** + * Returns object of given namespace + * @memberOf fabric.util + * @param {String} namespace Namespace string e.g. 'fabric.Image.filter' or 'fabric' + * @return {Object} Object for given namespace (default fabric) + */ + resolveNamespace: function(namespace) { + if (!namespace) { + return fabric; + } -/***/ }), + var parts = namespace.split('.'), + len = parts.length, i, + obj = global || fabric.window; -/***/ "./node_modules/core-js-pure/internals/descriptors.js": -/*!************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/descriptors.js ***! - \************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + for (i = 0; i < len; ++i) { + obj = obj[parts[i]]; + } -var fails = __webpack_require__(/*! ../internals/fails */ "./node_modules/core-js-pure/internals/fails.js"); + return obj; + }, -// Detect IE8's incomplete defineProperty implementation -module.exports = !fails(function () { - // eslint-disable-next-line es/no-object-defineproperty -- required for testing - return Object.defineProperty({}, 1, { get: function () { return 7; } })[1] != 7; -}); + /** + * Loads image element from given url and passes it to a callback + * @memberOf fabric.util + * @param {String} url URL representing an image + * @param {Function} callback Callback; invoked with loaded image + * @param {*} [context] Context to invoke callback in + * @param {Object} [crossOrigin] crossOrigin value to set image element to + */ + loadImage: function(url, callback, context, crossOrigin) { + if (!url) { + callback && callback.call(context, url); + return; + } + var img = fabric.util.createImage(); -/***/ }), + /** @ignore */ + var onLoadCallback = function () { + callback && callback.call(context, img, false); + img = img.onload = img.onerror = null; + }; -/***/ "./node_modules/core-js-pure/internals/document-create-element.js": -/*!************************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/document-create-element.js ***! - \************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + img.onload = onLoadCallback; + /** @ignore */ + img.onerror = function() { + fabric.log('Error loading ' + img.src); + callback && callback.call(context, null, true); + img = img.onload = img.onerror = null; + }; -var global = __webpack_require__(/*! ../internals/global */ "./node_modules/core-js-pure/internals/global.js"); -var isObject = __webpack_require__(/*! ../internals/is-object */ "./node_modules/core-js-pure/internals/is-object.js"); + // data-urls appear to be buggy with crossOrigin + // https://github.com/kangax/fabric.js/commit/d0abb90f1cd5c5ef9d2a94d3fb21a22330da3e0a#commitcomment-4513767 + // see https://code.google.com/p/chromium/issues/detail?id=315152 + // https://bugzilla.mozilla.org/show_bug.cgi?id=935069 + // crossOrigin null is the same as not set. + if (url.indexOf('data') !== 0 && + crossOrigin !== undefined && + crossOrigin !== null) { + img.crossOrigin = crossOrigin; + } -var document = global.document; -// typeof document.createElement is 'object' in old IE -var EXISTS = isObject(document) && isObject(document.createElement); + // IE10 / IE11-Fix: SVG contents from data: URI + // will only be available if the IMG is present + // in the DOM (and visible) + if (url.substring(0,14) === 'data:image/svg') { + img.onload = null; + fabric.util.loadImageInDom(img, onLoadCallback); + } -module.exports = function (it) { - return EXISTS ? document.createElement(it) : {}; -}; + img.src = url; + }, + /** + * Attaches SVG image with data: URL to the dom + * @memberOf fabric.util + * @param {Object} img Image object with data:image/svg src + * @param {Function} callback Callback; invoked with loaded image + * @return {Object} DOM element (div containing the SVG image) + */ + loadImageInDom: function(img, onLoadCallback) { + var div = fabric.document.createElement('div'); + div.style.width = div.style.height = '1px'; + div.style.left = div.style.top = '-100%'; + div.style.position = 'absolute'; + div.appendChild(img); + fabric.document.querySelector('body').appendChild(div); + /** + * Wrap in function to: + * 1. Call existing callback + * 2. Cleanup DOM + */ + img.onload = function () { + onLoadCallback(); + div.parentNode.removeChild(div); + div = null; + }; + }, -/***/ }), + /** + * Creates corresponding fabric instances from their object representations + * @static + * @memberOf fabric.util + * @param {Array} objects Objects to enliven + * @param {Function} callback Callback to invoke when all objects are created + * @param {String} namespace Namespace to get klass "Class" object from + * @param {Function} reviver Method for further parsing of object elements, + * called after each fabric object created. + */ + enlivenObjects: function(objects, callback, namespace, reviver) { + objects = objects || []; + + var enlivenedObjects = [], + numLoadedObjects = 0, + numTotalObjects = objects.length; + + function onLoaded() { + if (++numLoadedObjects === numTotalObjects) { + callback && callback(enlivenedObjects.filter(function(obj) { + // filter out undefined objects (objects that gave error) + return obj; + })); + } + } -/***/ "./node_modules/core-js-pure/internals/dom-iterables.js": -/*!**************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/dom-iterables.js ***! - \**************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { + if (!numTotalObjects) { + callback && callback(enlivenedObjects); + return; + } -// iterable DOM collections -// flag - `iterable` interface - 'entries', 'keys', 'values', 'forEach' methods -module.exports = { - CSSRuleList: 0, - CSSStyleDeclaration: 0, - CSSValueList: 0, - ClientRectList: 0, - DOMRectList: 0, - DOMStringList: 0, - DOMTokenList: 1, - DataTransferItemList: 0, - FileList: 0, - HTMLAllCollection: 0, - HTMLCollection: 0, - HTMLFormElement: 0, - HTMLSelectElement: 0, - MediaList: 0, - MimeTypeArray: 0, - NamedNodeMap: 0, - NodeList: 1, - PaintRequestList: 0, - Plugin: 0, - PluginArray: 0, - SVGLengthList: 0, - SVGNumberList: 0, - SVGPathSegList: 0, - SVGPointList: 0, - SVGStringList: 0, - SVGTransformList: 0, - SourceBufferList: 0, - StyleSheetList: 0, - TextTrackCueList: 0, - TextTrackList: 0, - TouchList: 0 -}; + objects.forEach(function (o, index) { + // if sparse array + if (!o || !o.type) { + onLoaded(); + return; + } + var klass = fabric.util.getKlass(o.type, namespace); + klass.fromObject(o, function (obj, error) { + error || (enlivenedObjects[index] = obj); + reviver && reviver(o, obj, error); + onLoaded(); + }); + }); + }, + /** + * Create and wait for loading of patterns + * @static + * @memberOf fabric.util + * @param {Array} patterns Objects to enliven + * @param {Function} callback Callback to invoke when all objects are created + * called after each fabric object created. + */ + enlivenPatterns: function(patterns, callback) { + patterns = patterns || []; -/***/ }), + function onLoaded() { + if (++numLoadedPatterns === numPatterns) { + callback && callback(enlivenedPatterns); + } + } -/***/ "./node_modules/core-js-pure/internals/engine-is-browser.js": -/*!******************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/engine-is-browser.js ***! - \******************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { + var enlivenedPatterns = [], + numLoadedPatterns = 0, + numPatterns = patterns.length; -module.exports = typeof window == 'object'; + if (!numPatterns) { + callback && callback(enlivenedPatterns); + return; + } + patterns.forEach(function (p, index) { + if (p && p.source) { + new fabric.Pattern(p, function(pattern) { + enlivenedPatterns[index] = pattern; + onLoaded(); + }); + } + else { + enlivenedPatterns[index] = p; + onLoaded(); + } + }); + }, -/***/ }), + /** + * Groups SVG elements (usually those retrieved from SVG document) + * @static + * @memberOf fabric.util + * @param {Array} elements SVG elements to group + * @param {Object} [options] Options object + * @param {String} path Value to set sourcePath to + * @return {fabric.Object|fabric.Group} + */ + groupSVGElements: function(elements, options, path) { + var object; + if (elements && elements.length === 1) { + return elements[0]; + } + if (options) { + if (options.width && options.height) { + options.centerPoint = { + x: options.width / 2, + y: options.height / 2 + }; + } + else { + delete options.width; + delete options.height; + } + } + object = new fabric.Group(elements, options); + if (typeof path !== 'undefined') { + object.sourcePath = path; + } + return object; + }, -/***/ "./node_modules/core-js-pure/internals/engine-is-ios.js": -/*!**************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/engine-is-ios.js ***! - \**************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Populates an object with properties of another object + * @static + * @memberOf fabric.util + * @param {Object} source Source object + * @param {Object} destination Destination object + * @return {Array} properties Properties names to include + */ + populateWithProperties: function(source, destination, properties) { + if (properties && Object.prototype.toString.call(properties) === '[object Array]') { + for (var i = 0, len = properties.length; i < len; i++) { + if (properties[i] in source) { + destination[properties[i]] = source[properties[i]]; + } + } + } + }, -var userAgent = __webpack_require__(/*! ../internals/engine-user-agent */ "./node_modules/core-js-pure/internals/engine-user-agent.js"); + /** + * WARNING: THIS WAS TO SUPPORT OLD BROWSERS. deprecated. + * WILL BE REMOVED IN FABRIC 5.0 + * Draws a dashed line between two points + * + * This method is used to draw dashed line around selection area. + * See dotted stroke in canvas + * + * @param {CanvasRenderingContext2D} ctx context + * @param {Number} x start x coordinate + * @param {Number} y start y coordinate + * @param {Number} x2 end x coordinate + * @param {Number} y2 end y coordinate + * @param {Array} da dash array pattern + * @deprecated + */ + drawDashedLine: function(ctx, x, y, x2, y2, da) { + var dx = x2 - x, + dy = y2 - y, + len = sqrt(dx * dx + dy * dy), + rot = atan2(dy, dx), + dc = da.length, + di = 0, + draw = true; + + ctx.save(); + ctx.translate(x, y); + ctx.moveTo(0, 0); + ctx.rotate(rot); + + x = 0; + while (len > x) { + x += da[di++ % dc]; + if (x > len) { + x = len; + } + ctx[draw ? 'lineTo' : 'moveTo'](x, 0); + draw = !draw; + } -module.exports = /(?:iphone|ipod|ipad).*applewebkit/i.test(userAgent); + ctx.restore(); + }, + /** + * Creates canvas element + * @static + * @memberOf fabric.util + * @return {CanvasElement} initialized canvas element + */ + createCanvasElement: function() { + return fabric.document.createElement('canvas'); + }, -/***/ }), + /** + * Creates a canvas element that is a copy of another and is also painted + * @param {CanvasElement} canvas to copy size and content of + * @static + * @memberOf fabric.util + * @return {CanvasElement} initialized canvas element + */ + copyCanvasElement: function(canvas) { + var newCanvas = fabric.util.createCanvasElement(); + newCanvas.width = canvas.width; + newCanvas.height = canvas.height; + newCanvas.getContext('2d').drawImage(canvas, 0, 0); + return newCanvas; + }, -/***/ "./node_modules/core-js-pure/internals/engine-is-node.js": -/*!***************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/engine-is-node.js ***! - \***************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * since 2.6.0 moved from canvas instance to utility. + * @param {CanvasElement} canvasEl to copy size and content of + * @param {String} format 'jpeg' or 'png', in some browsers 'webp' is ok too + * @param {Number} quality <= 1 and > 0 + * @static + * @memberOf fabric.util + * @return {String} data url + */ + toDataURL: function(canvasEl, format, quality) { + return canvasEl.toDataURL('image/' + format, quality); + }, -var classof = __webpack_require__(/*! ../internals/classof-raw */ "./node_modules/core-js-pure/internals/classof-raw.js"); -var global = __webpack_require__(/*! ../internals/global */ "./node_modules/core-js-pure/internals/global.js"); + /** + * Creates image element (works on client and node) + * @static + * @memberOf fabric.util + * @return {HTMLImageElement} HTML image element + */ + createImage: function() { + return fabric.document.createElement('img'); + }, -module.exports = classof(global.process) == 'process'; + /** + * Multiply matrix A by matrix B to nest transformations + * @static + * @memberOf fabric.util + * @param {Array} a First transformMatrix + * @param {Array} b Second transformMatrix + * @param {Boolean} is2x2 flag to multiply matrices as 2x2 matrices + * @return {Array} The product of the two transform matrices + */ + multiplyTransformMatrices: function(a, b, is2x2) { + // Matrix multiply a * b + return [ + a[0] * b[0] + a[2] * b[1], + a[1] * b[0] + a[3] * b[1], + a[0] * b[2] + a[2] * b[3], + a[1] * b[2] + a[3] * b[3], + is2x2 ? 0 : a[0] * b[4] + a[2] * b[5] + a[4], + is2x2 ? 0 : a[1] * b[4] + a[3] * b[5] + a[5] + ]; + }, + /** + * Decomposes standard 2x3 matrix into transform components + * @static + * @memberOf fabric.util + * @param {Array} a transformMatrix + * @return {Object} Components of transform + */ + qrDecompose: function(a) { + var angle = atan2(a[1], a[0]), + denom = pow(a[0], 2) + pow(a[1], 2), + scaleX = sqrt(denom), + scaleY = (a[0] * a[3] - a[2] * a[1]) / scaleX, + skewX = atan2(a[0] * a[2] + a[1] * a [3], denom); + return { + angle: angle / PiBy180, + scaleX: scaleX, + scaleY: scaleY, + skewX: skewX / PiBy180, + skewY: 0, + translateX: a[4], + translateY: a[5] + }; + }, -/***/ }), + /** + * Returns a transform matrix starting from an object of the same kind of + * the one returned from qrDecompose, useful also if you want to calculate some + * transformations from an object that is not enlived yet + * @static + * @memberOf fabric.util + * @param {Object} options + * @param {Number} [options.angle] angle in degrees + * @return {Number[]} transform matrix + */ + calcRotateMatrix: function(options) { + if (!options.angle) { + return fabric.iMatrix.concat(); + } + var theta = fabric.util.degreesToRadians(options.angle), + cos = fabric.util.cos(theta), + sin = fabric.util.sin(theta); + return [cos, sin, -sin, cos, 0, 0]; + }, -/***/ "./node_modules/core-js-pure/internals/engine-is-webos-webkit.js": -/*!***********************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/engine-is-webos-webkit.js ***! - \***********************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Returns a transform matrix starting from an object of the same kind of + * the one returned from qrDecompose, useful also if you want to calculate some + * transformations from an object that is not enlived yet. + * is called DimensionsTransformMatrix because those properties are the one that influence + * the size of the resulting box of the object. + * @static + * @memberOf fabric.util + * @param {Object} options + * @param {Number} [options.scaleX] + * @param {Number} [options.scaleY] + * @param {Boolean} [options.flipX] + * @param {Boolean} [options.flipY] + * @param {Number} [options.skewX] + * @param {Number} [options.skewX] + * @return {Number[]} transform matrix + */ + calcDimensionsMatrix: function(options) { + var scaleX = typeof options.scaleX === 'undefined' ? 1 : options.scaleX, + scaleY = typeof options.scaleY === 'undefined' ? 1 : options.scaleY, + scaleMatrix = [ + options.flipX ? -scaleX : scaleX, + 0, + 0, + options.flipY ? -scaleY : scaleY, + 0, + 0], + multiply = fabric.util.multiplyTransformMatrices, + degreesToRadians = fabric.util.degreesToRadians; + if (options.skewX) { + scaleMatrix = multiply( + scaleMatrix, + [1, 0, Math.tan(degreesToRadians(options.skewX)), 1], + true); + } + if (options.skewY) { + scaleMatrix = multiply( + scaleMatrix, + [1, Math.tan(degreesToRadians(options.skewY)), 0, 1], + true); + } + return scaleMatrix; + }, -var userAgent = __webpack_require__(/*! ../internals/engine-user-agent */ "./node_modules/core-js-pure/internals/engine-user-agent.js"); + /** + * Returns a transform matrix starting from an object of the same kind of + * the one returned from qrDecompose, useful also if you want to calculate some + * transformations from an object that is not enlived yet + * @static + * @memberOf fabric.util + * @param {Object} options + * @param {Number} [options.angle] + * @param {Number} [options.scaleX] + * @param {Number} [options.scaleY] + * @param {Boolean} [options.flipX] + * @param {Boolean} [options.flipY] + * @param {Number} [options.skewX] + * @param {Number} [options.skewX] + * @param {Number} [options.translateX] + * @param {Number} [options.translateY] + * @return {Number[]} transform matrix + */ + composeMatrix: function(options) { + var matrix = [1, 0, 0, 1, options.translateX || 0, options.translateY || 0], + multiply = fabric.util.multiplyTransformMatrices; + if (options.angle) { + matrix = multiply(matrix, fabric.util.calcRotateMatrix(options)); + } + if (options.scaleX !== 1 || options.scaleY !== 1 || + options.skewX || options.skewY || options.flipX || options.flipY) { + matrix = multiply(matrix, fabric.util.calcDimensionsMatrix(options)); + } + return matrix; + }, -module.exports = /web0s(?!.*chrome)/i.test(userAgent); + /** + * reset an object transform state to neutral. Top and left are not accounted for + * @static + * @memberOf fabric.util + * @param {fabric.Object} target object to transform + */ + resetObjectTransform: function (target) { + target.scaleX = 1; + target.scaleY = 1; + target.skewX = 0; + target.skewY = 0; + target.flipX = false; + target.flipY = false; + target.rotate(0); + }, + /** + * Extract Object transform values + * @static + * @memberOf fabric.util + * @param {fabric.Object} target object to read from + * @return {Object} Components of transform + */ + saveObjectTransform: function (target) { + return { + scaleX: target.scaleX, + scaleY: target.scaleY, + skewX: target.skewX, + skewY: target.skewY, + angle: target.angle, + left: target.left, + flipX: target.flipX, + flipY: target.flipY, + top: target.top + }; + }, -/***/ }), + /** + * Returns true if context has transparent pixel + * at specified location (taking tolerance into account) + * @param {CanvasRenderingContext2D} ctx context + * @param {Number} x x coordinate + * @param {Number} y y coordinate + * @param {Number} tolerance Tolerance + */ + isTransparent: function(ctx, x, y, tolerance) { -/***/ "./node_modules/core-js-pure/internals/engine-user-agent.js": -/*!******************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/engine-user-agent.js ***! - \******************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + // If tolerance is > 0 adjust start coords to take into account. + // If moves off Canvas fix to 0 + if (tolerance > 0) { + if (x > tolerance) { + x -= tolerance; + } + else { + x = 0; + } + if (y > tolerance) { + y -= tolerance; + } + else { + y = 0; + } + } -var getBuiltIn = __webpack_require__(/*! ../internals/get-built-in */ "./node_modules/core-js-pure/internals/get-built-in.js"); + var _isTransparent = true, i, temp, + imageData = ctx.getImageData(x, y, (tolerance * 2) || 1, (tolerance * 2) || 1), + l = imageData.data.length; -module.exports = getBuiltIn('navigator', 'userAgent') || ''; + // Split image data - for tolerance > 1, pixelDataSize = 4; + for (i = 3; i < l; i += 4) { + temp = imageData.data[i]; + _isTransparent = temp <= 0; + if (_isTransparent === false) { + break; // Stop if colour found + } + } + imageData = null; -/***/ }), + return _isTransparent; + }, -/***/ "./node_modules/core-js-pure/internals/engine-v8-version.js": -/*!******************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/engine-v8-version.js ***! - \******************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Parse preserveAspectRatio attribute from element + * @param {string} attribute to be parsed + * @return {Object} an object containing align and meetOrSlice attribute + */ + parsePreserveAspectRatioAttribute: function(attribute) { + var meetOrSlice = 'meet', alignX = 'Mid', alignY = 'Mid', + aspectRatioAttrs = attribute.split(' '), align; -var global = __webpack_require__(/*! ../internals/global */ "./node_modules/core-js-pure/internals/global.js"); -var userAgent = __webpack_require__(/*! ../internals/engine-user-agent */ "./node_modules/core-js-pure/internals/engine-user-agent.js"); + if (aspectRatioAttrs && aspectRatioAttrs.length) { + meetOrSlice = aspectRatioAttrs.pop(); + if (meetOrSlice !== 'meet' && meetOrSlice !== 'slice') { + align = meetOrSlice; + meetOrSlice = 'meet'; + } + else if (aspectRatioAttrs.length) { + align = aspectRatioAttrs.pop(); + } + } + //divide align in alignX and alignY + alignX = align !== 'none' ? align.slice(1, 4) : 'none'; + alignY = align !== 'none' ? align.slice(5, 8) : 'none'; + return { + meetOrSlice: meetOrSlice, + alignX: alignX, + alignY: alignY + }; + }, -var process = global.process; -var versions = process && process.versions; -var v8 = versions && versions.v8; -var match, version; + /** + * Clear char widths cache for the given font family or all the cache if no + * fontFamily is specified. + * Use it if you know you are loading fonts in a lazy way and you are not waiting + * for custom fonts to load properly when adding text objects to the canvas. + * If a text object is added when its own font is not loaded yet, you will get wrong + * measurement and so wrong bounding boxes. + * After the font cache is cleared, either change the textObject text content or call + * initDimensions() to trigger a recalculation + * @memberOf fabric.util + * @param {String} [fontFamily] font family to clear + */ + clearFabricFontCache: function(fontFamily) { + fontFamily = (fontFamily || '').toLowerCase(); + if (!fontFamily) { + fabric.charWidthsCache = { }; + } + else if (fabric.charWidthsCache[fontFamily]) { + delete fabric.charWidthsCache[fontFamily]; + } + }, -if (v8) { - match = v8.split('.'); - version = match[0] < 4 ? 1 : match[0] + match[1]; -} else if (userAgent) { - match = userAgent.match(/Edge\/(\d+)/); - if (!match || match[1] >= 74) { - match = userAgent.match(/Chrome\/(\d+)/); - if (match) version = match[1]; - } -} + /** + * Given current aspect ratio, determines the max width and height that can + * respect the total allowed area for the cache. + * @memberOf fabric.util + * @param {Number} ar aspect ratio + * @param {Number} maximumArea Maximum area you want to achieve + * @return {Object.x} Limited dimensions by X + * @return {Object.y} Limited dimensions by Y + */ + limitDimsByArea: function(ar, maximumArea) { + var roughWidth = Math.sqrt(maximumArea * ar), + perfLimitSizeY = Math.floor(maximumArea / roughWidth); + return { x: Math.floor(roughWidth), y: perfLimitSizeY }; + }, -module.exports = version && +version; + capValue: function(min, value, max) { + return Math.max(min, Math.min(value, max)); + }, + /** + * Finds the scale for the object source to fit inside the object destination, + * keeping aspect ratio intact. + * respect the total allowed area for the cache. + * @memberOf fabric.util + * @param {Object | fabric.Object} source + * @param {Number} source.height natural unscaled height of the object + * @param {Number} source.width natural unscaled width of the object + * @param {Object | fabric.Object} destination + * @param {Number} destination.height natural unscaled height of the object + * @param {Number} destination.width natural unscaled width of the object + * @return {Number} scale factor to apply to source to fit into destination + */ + findScaleToFit: function(source, destination) { + return Math.min(destination.width / source.width, destination.height / source.height); + }, -/***/ }), + /** + * Finds the scale for the object source to cover entirely the object destination, + * keeping aspect ratio intact. + * respect the total allowed area for the cache. + * @memberOf fabric.util + * @param {Object | fabric.Object} source + * @param {Number} source.height natural unscaled height of the object + * @param {Number} source.width natural unscaled width of the object + * @param {Object | fabric.Object} destination + * @param {Number} destination.height natural unscaled height of the object + * @param {Number} destination.width natural unscaled width of the object + * @return {Number} scale factor to apply to source to cover destination + */ + findScaleToCover: function(source, destination) { + return Math.max(destination.width / source.width, destination.height / source.height); + }, -/***/ "./node_modules/core-js-pure/internals/enum-bug-keys.js": -/*!**************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/enum-bug-keys.js ***! - \**************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { + /** + * given an array of 6 number returns something like `"matrix(...numbers)"` + * @memberOf fabric.util + * @param {Array} transform an array with 6 numbers + * @return {String} transform matrix for svg + * @return {Object.y} Limited dimensions by Y + */ + matrixToSVG: function(transform) { + return 'matrix(' + transform.map(function(value) { + return fabric.util.toFixed(value, fabric.Object.NUM_FRACTION_DIGITS); + }).join(' ') + ')'; + }, -// IE8- don't enum bug keys -module.exports = [ - 'constructor', - 'hasOwnProperty', - 'isPrototypeOf', - 'propertyIsEnumerable', - 'toLocaleString', - 'toString', - 'valueOf' -]; + /** + * given an object and a transform, apply the inverse transform to the object, + * this is equivalent to remove from that object that transformation, so that + * added in a space with the removed transform, the object will be the same as before. + * Removing from an object a transform that scale by 2 is like scaling it by 1/2. + * Removing from an object a transfrom that rotate by 30deg is like rotating by 30deg + * in the opposite direction. + * This util is used to add objects inside transformed groups or nested groups. + * @memberOf fabric.util + * @param {fabric.Object} object the object you want to transform + * @param {Array} transform the destination transform + */ + removeTransformFromObject: function(object, transform) { + var inverted = fabric.util.invertTransform(transform), + finalTransform = fabric.util.multiplyTransformMatrices(inverted, object.calcOwnMatrix()); + fabric.util.applyTransformToObject(object, finalTransform); + }, + /** + * given an object and a transform, apply the transform to the object. + * this is equivalent to change the space where the object is drawn. + * Adding to an object a transform that scale by 2 is like scaling it by 2. + * This is used when removing an object from an active selection for example. + * @memberOf fabric.util + * @param {fabric.Object} object the object you want to transform + * @param {Array} transform the destination transform + */ + addTransformToObject: function(object, transform) { + fabric.util.applyTransformToObject( + object, + fabric.util.multiplyTransformMatrices(transform, object.calcOwnMatrix()) + ); + }, -/***/ }), + /** + * discard an object transform state and apply the one from the matrix. + * @memberOf fabric.util + * @param {fabric.Object} object the object you want to transform + * @param {Array} transform the destination transform + */ + applyTransformToObject: function(object, transform) { + var options = fabric.util.qrDecompose(transform), + center = new fabric.Point(options.translateX, options.translateY); + object.flipX = false; + object.flipY = false; + object.set('scaleX', options.scaleX); + object.set('scaleY', options.scaleY); + object.skewX = options.skewX; + object.skewY = options.skewY; + object.angle = options.angle; + object.setPositionByOrigin(center, 'center', 'center'); + }, -/***/ "./node_modules/core-js-pure/internals/export.js": -/*!*******************************************************!*\ - !*** ./node_modules/core-js-pure/internals/export.js ***! - \*******************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * given a width and height, return the size of the bounding box + * that can contains the box with width/height with applied transform + * described in options. + * Use to calculate the boxes around objects for controls. + * @memberOf fabric.util + * @param {Number} width + * @param {Number} height + * @param {Object} options + * @param {Number} options.scaleX + * @param {Number} options.scaleY + * @param {Number} options.skewX + * @param {Number} options.skewY + * @return {Object.x} width of containing + * @return {Object.y} height of containing + */ + sizeAfterTransform: function(width, height, options) { + var dimX = width / 2, dimY = height / 2, + points = [ + { + x: -dimX, + y: -dimY + }, + { + x: dimX, + y: -dimY + }, + { + x: -dimX, + y: dimY + }, + { + x: dimX, + y: dimY + }], + transformMatrix = fabric.util.calcDimensionsMatrix(options), + bbox = fabric.util.makeBoundingBoxFromPoints(points, transformMatrix); + return { + x: bbox.width, + y: bbox.height, + }; + } + }; +})( true ? exports : 0); + + +(function() { + var _join = Array.prototype.join, + commandLengths = { + m: 2, + l: 2, + h: 1, + v: 1, + c: 6, + s: 4, + q: 4, + t: 2, + a: 7 + }, + repeatedCommands = { + m: 'l', + M: 'L' + }; + function segmentToBezier(th2, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY) { + var costh2 = fabric.util.cos(th2), + sinth2 = fabric.util.sin(th2), + costh3 = fabric.util.cos(th3), + sinth3 = fabric.util.sin(th3), + toX = cosTh * rx * costh3 - sinTh * ry * sinth3 + cx1, + toY = sinTh * rx * costh3 + cosTh * ry * sinth3 + cy1, + cp1X = fromX + mT * ( -cosTh * rx * sinth2 - sinTh * ry * costh2), + cp1Y = fromY + mT * ( -sinTh * rx * sinth2 + cosTh * ry * costh2), + cp2X = toX + mT * ( cosTh * rx * sinth3 + sinTh * ry * costh3), + cp2Y = toY + mT * ( sinTh * rx * sinth3 - cosTh * ry * costh3); + + return ['C', + cp1X, cp1Y, + cp2X, cp2Y, + toX, toY + ]; + } -"use strict"; + /* Adapted from http://dxr.mozilla.org/mozilla-central/source/content/svg/content/src/nsSVGPathDataParser.cpp + * by Andrea Bogazzi code is under MPL. if you don't have a copy of the license you can take it here + * http://mozilla.org/MPL/2.0/ + */ + function arcToSegments(toX, toY, rx, ry, large, sweep, rotateX) { + var PI = Math.PI, th = rotateX * PI / 180, + sinTh = fabric.util.sin(th), + cosTh = fabric.util.cos(th), + fromX = 0, fromY = 0; + + rx = Math.abs(rx); + ry = Math.abs(ry); + + var px = -cosTh * toX * 0.5 - sinTh * toY * 0.5, + py = -cosTh * toY * 0.5 + sinTh * toX * 0.5, + rx2 = rx * rx, ry2 = ry * ry, py2 = py * py, px2 = px * px, + pl = rx2 * ry2 - rx2 * py2 - ry2 * px2, + root = 0; + + if (pl < 0) { + var s = Math.sqrt(1 - pl / (rx2 * ry2)); + rx *= s; + ry *= s; + } + else { + root = (large === sweep ? -1.0 : 1.0) * + Math.sqrt( pl / (rx2 * py2 + ry2 * px2)); + } + + var cx = root * rx * py / ry, + cy = -root * ry * px / rx, + cx1 = cosTh * cx - sinTh * cy + toX * 0.5, + cy1 = sinTh * cx + cosTh * cy + toY * 0.5, + mTheta = calcVectorAngle(1, 0, (px - cx) / rx, (py - cy) / ry), + dtheta = calcVectorAngle((px - cx) / rx, (py - cy) / ry, (-px - cx) / rx, (-py - cy) / ry); + + if (sweep === 0 && dtheta > 0) { + dtheta -= 2 * PI; + } + else if (sweep === 1 && dtheta < 0) { + dtheta += 2 * PI; + } + + // Convert into cubic bezier segments <= 90deg + var segments = Math.ceil(Math.abs(dtheta / PI * 2)), + result = [], mDelta = dtheta / segments, + mT = 8 / 3 * Math.sin(mDelta / 4) * Math.sin(mDelta / 4) / Math.sin(mDelta / 2), + th3 = mTheta + mDelta; + + for (var i = 0; i < segments; i++) { + result[i] = segmentToBezier(mTheta, th3, cosTh, sinTh, rx, ry, cx1, cy1, mT, fromX, fromY); + fromX = result[i][5]; + fromY = result[i][6]; + mTheta = th3; + th3 += mDelta; + } + return result; + } -var global = __webpack_require__(/*! ../internals/global */ "./node_modules/core-js-pure/internals/global.js"); -var getOwnPropertyDescriptor = __webpack_require__(/*! ../internals/object-get-own-property-descriptor */ "./node_modules/core-js-pure/internals/object-get-own-property-descriptor.js").f; -var isForced = __webpack_require__(/*! ../internals/is-forced */ "./node_modules/core-js-pure/internals/is-forced.js"); -var path = __webpack_require__(/*! ../internals/path */ "./node_modules/core-js-pure/internals/path.js"); -var bind = __webpack_require__(/*! ../internals/function-bind-context */ "./node_modules/core-js-pure/internals/function-bind-context.js"); -var createNonEnumerableProperty = __webpack_require__(/*! ../internals/create-non-enumerable-property */ "./node_modules/core-js-pure/internals/create-non-enumerable-property.js"); -var has = __webpack_require__(/*! ../internals/has */ "./node_modules/core-js-pure/internals/has.js"); + /* + * Private + */ + function calcVectorAngle(ux, uy, vx, vy) { + var ta = Math.atan2(uy, ux), + tb = Math.atan2(vy, vx); + if (tb >= ta) { + return tb - ta; + } + else { + return 2 * Math.PI - (ta - tb); + } + } -var wrapConstructor = function (NativeConstructor) { - var Wrapper = function (a, b, c) { - if (this instanceof NativeConstructor) { - switch (arguments.length) { - case 0: return new NativeConstructor(); - case 1: return new NativeConstructor(a); - case 2: return new NativeConstructor(a, b); - } return new NativeConstructor(a, b, c); - } return NativeConstructor.apply(this, arguments); - }; - Wrapper.prototype = NativeConstructor.prototype; - return Wrapper; -}; + /** + * Calculate bounding box of a beziercurve + * @param {Number} x0 starting point + * @param {Number} y0 + * @param {Number} x1 first control point + * @param {Number} y1 + * @param {Number} x2 secondo control point + * @param {Number} y2 + * @param {Number} x3 end of bezier + * @param {Number} y3 + */ + // taken from http://jsbin.com/ivomiq/56/edit no credits available for that. + // TODO: can we normalize this with the starting points set at 0 and then translated the bbox? + function getBoundsOfCurve(x0, y0, x1, y1, x2, y2, x3, y3) { + var argsString; + if (fabric.cachesBoundsOfCurve) { + argsString = _join.call(arguments); + if (fabric.boundsOfCurveCache[argsString]) { + return fabric.boundsOfCurveCache[argsString]; + } + } -/* - options.target - name of the target object - options.global - target is the global object - options.stat - export as static methods of target - options.proto - export as prototype methods of target - options.real - real prototype method for the `pure` version - options.forced - export even if the native feature is available - options.bind - bind methods to the target, required for the `pure` version - options.wrap - wrap constructors to preventing global pollution, required for the `pure` version - options.unsafe - use the simple assignment of property instead of delete + defineProperty - options.sham - add a flag to not completely full polyfills - options.enumerable - export as enumerable property - options.noTargetGet - prevent calling a getter on target -*/ -module.exports = function (options, source) { - var TARGET = options.target; - var GLOBAL = options.global; - var STATIC = options.stat; - var PROTO = options.proto; + var sqrt = Math.sqrt, + min = Math.min, max = Math.max, + abs = Math.abs, tvalues = [], + bounds = [[], []], + a, b, c, t, t1, t2, b2ac, sqrtb2ac; - var nativeSource = GLOBAL ? global : STATIC ? global[TARGET] : (global[TARGET] || {}).prototype; + b = 6 * x0 - 12 * x1 + 6 * x2; + a = -3 * x0 + 9 * x1 - 9 * x2 + 3 * x3; + c = 3 * x1 - 3 * x0; - var target = GLOBAL ? path : path[TARGET] || (path[TARGET] = {}); - var targetPrototype = target.prototype; + for (var i = 0; i < 2; ++i) { + if (i > 0) { + b = 6 * y0 - 12 * y1 + 6 * y2; + a = -3 * y0 + 9 * y1 - 9 * y2 + 3 * y3; + c = 3 * y1 - 3 * y0; + } - var FORCED, USE_NATIVE, VIRTUAL_PROTOTYPE; - var key, sourceProperty, targetProperty, nativeProperty, resultProperty, descriptor; + if (abs(a) < 1e-12) { + if (abs(b) < 1e-12) { + continue; + } + t = -c / b; + if (0 < t && t < 1) { + tvalues.push(t); + } + continue; + } + b2ac = b * b - 4 * c * a; + if (b2ac < 0) { + continue; + } + sqrtb2ac = sqrt(b2ac); + t1 = (-b + sqrtb2ac) / (2 * a); + if (0 < t1 && t1 < 1) { + tvalues.push(t1); + } + t2 = (-b - sqrtb2ac) / (2 * a); + if (0 < t2 && t2 < 1) { + tvalues.push(t2); + } + } - for (key in source) { - FORCED = isForced(GLOBAL ? key : TARGET + (STATIC ? '.' : '#') + key, options.forced); - // contains in native - USE_NATIVE = !FORCED && nativeSource && has(nativeSource, key); + var x, y, j = tvalues.length, jlen = j, mt; + while (j--) { + t = tvalues[j]; + mt = 1 - t; + x = (mt * mt * mt * x0) + (3 * mt * mt * t * x1) + (3 * mt * t * t * x2) + (t * t * t * x3); + bounds[0][j] = x; - targetProperty = target[key]; + y = (mt * mt * mt * y0) + (3 * mt * mt * t * y1) + (3 * mt * t * t * y2) + (t * t * t * y3); + bounds[1][j] = y; + } - if (USE_NATIVE) if (options.noTargetGet) { - descriptor = getOwnPropertyDescriptor(nativeSource, key); - nativeProperty = descriptor && descriptor.value; - } else nativeProperty = nativeSource[key]; - - // export native or implementation - sourceProperty = (USE_NATIVE && nativeProperty) ? nativeProperty : source[key]; - - if (USE_NATIVE && typeof targetProperty === typeof sourceProperty) continue; - - // bind timers to global for call from export context - if (options.bind && USE_NATIVE) resultProperty = bind(sourceProperty, global); - // wrap global constructors for prevent changs in this version - else if (options.wrap && USE_NATIVE) resultProperty = wrapConstructor(sourceProperty); - // make static versions for prototype methods - else if (PROTO && typeof sourceProperty == 'function') resultProperty = bind(Function.call, sourceProperty); - // default case - else resultProperty = sourceProperty; - - // add a flag to not completely full polyfills - if (options.sham || (sourceProperty && sourceProperty.sham) || (targetProperty && targetProperty.sham)) { - createNonEnumerableProperty(resultProperty, 'sham', true); + bounds[0][jlen] = x0; + bounds[1][jlen] = y0; + bounds[0][jlen + 1] = x3; + bounds[1][jlen + 1] = y3; + var result = [ + { + x: min.apply(null, bounds[0]), + y: min.apply(null, bounds[1]) + }, + { + x: max.apply(null, bounds[0]), + y: max.apply(null, bounds[1]) + } + ]; + if (fabric.cachesBoundsOfCurve) { + fabric.boundsOfCurveCache[argsString] = result; } + return result; + } - target[key] = resultProperty; + /** + * Converts arc to a bunch of bezier curves + * @param {Number} fx starting point x + * @param {Number} fy starting point y + * @param {Array} coords Arc command + */ + function fromArcToBeziers(fx, fy, coords) { + var rx = coords[1], + ry = coords[2], + rot = coords[3], + large = coords[4], + sweep = coords[5], + tx = coords[6], + ty = coords[7], + segsNorm = arcToSegments(tx - fx, ty - fy, rx, ry, large, sweep, rot); + + for (var i = 0, len = segsNorm.length; i < len; i++) { + segsNorm[i][1] += fx; + segsNorm[i][2] += fy; + segsNorm[i][3] += fx; + segsNorm[i][4] += fy; + segsNorm[i][5] += fx; + segsNorm[i][6] += fy; + } + return segsNorm; + }; - if (PROTO) { - VIRTUAL_PROTOTYPE = TARGET + 'Prototype'; - if (!has(path, VIRTUAL_PROTOTYPE)) { - createNonEnumerableProperty(path, VIRTUAL_PROTOTYPE, {}); + /** + * This function take a parsed SVG path and make it simpler for fabricJS logic. + * simplification consist of: only UPPERCASE absolute commands ( relative converted to absolute ) + * S converted in C, T converted in Q, A converted in C. + * @param {Array} path the array of commands of a parsed svg path for fabric.Path + * @return {Array} the simplified array of commands of a parsed svg path for fabric.Path + */ + function makePathSimpler(path) { + // x and y represent the last point of the path. the previous command point. + // we add them to each relative command to make it an absolute comment. + // we also swap the v V h H with L, because are easier to transform. + var x = 0, y = 0, len = path.length, + // x1 and y1 represent the last point of the subpath. the subpath is started with + // m or M command. When a z or Z command is drawn, x and y need to be resetted to + // the last x1 and y1. + x1 = 0, y1 = 0, current, i, converted, + // previous will host the letter of the previous command, to handle S and T. + // controlX and controlY will host the previous reflected control point + destinationPath = [], previous, controlX, controlY; + for (i = 0; i < len; ++i) { + converted = false; + current = path[i].slice(0); + switch (current[0]) { // first letter + case 'l': // lineto, relative + current[0] = 'L'; + current[1] += x; + current[2] += y; + // falls through + case 'L': + x = current[1]; + y = current[2]; + break; + case 'h': // horizontal lineto, relative + current[1] += x; + // falls through + case 'H': + current[0] = 'L'; + current[2] = y; + x = current[1]; + break; + case 'v': // vertical lineto, relative + current[1] += y; + // falls through + case 'V': + current[0] = 'L'; + y = current[1]; + current[1] = x; + current[2] = y; + break; + case 'm': // moveTo, relative + current[0] = 'M'; + current[1] += x; + current[2] += y; + // falls through + case 'M': + x = current[1]; + y = current[2]; + x1 = current[1]; + y1 = current[2]; + break; + case 'c': // bezierCurveTo, relative + current[0] = 'C'; + current[1] += x; + current[2] += y; + current[3] += x; + current[4] += y; + current[5] += x; + current[6] += y; + // falls through + case 'C': + controlX = current[3]; + controlY = current[4]; + x = current[5]; + y = current[6]; + break; + case 's': // shorthand cubic bezierCurveTo, relative + current[0] = 'S'; + current[1] += x; + current[2] += y; + current[3] += x; + current[4] += y; + // falls through + case 'S': + // would be sScC but since we are swapping sSc for C, we check just that. + if (previous === 'C') { + // calculate reflection of previous control points + controlX = 2 * x - controlX; + controlY = 2 * y - controlY; + } + else { + // If there is no previous command or if the previous command was not a C, c, S, or s, + // the control point is coincident with the current point + controlX = x; + controlY = y; + } + x = current[3]; + y = current[4]; + current[0] = 'C'; + current[5] = current[3]; + current[6] = current[4]; + current[3] = current[1]; + current[4] = current[2]; + current[1] = controlX; + current[2] = controlY; + // current[3] and current[4] are NOW the second control point. + // we keep it for the next reflection. + controlX = current[3]; + controlY = current[4]; + break; + case 'q': // quadraticCurveTo, relative + current[0] = 'Q'; + current[1] += x; + current[2] += y; + current[3] += x; + current[4] += y; + // falls through + case 'Q': + controlX = current[1]; + controlY = current[2]; + x = current[3]; + y = current[4]; + break; + case 't': // shorthand quadraticCurveTo, relative + current[0] = 'T'; + current[1] += x; + current[2] += y; + // falls through + case 'T': + if (previous === 'Q') { + // calculate reflection of previous control point + controlX = 2 * x - controlX; + controlY = 2 * y - controlY; + } + else { + // If there is no previous command or if the previous command was not a Q, q, T or t, + // assume the control point is coincident with the current point + controlX = x; + controlY = y; + } + current[0] = 'Q'; + x = current[1]; + y = current[2]; + current[1] = controlX; + current[2] = controlY; + current[3] = x; + current[4] = y; + break; + case 'a': + current[0] = 'A'; + current[6] += x; + current[7] += y; + // falls through + case 'A': + converted = true; + destinationPath = destinationPath.concat(fromArcToBeziers(x, y, current)); + x = current[6]; + y = current[7]; + break; + case 'z': + case 'Z': + x = x1; + y = y1; + break; + default: } - // export virtual prototype methods - path[VIRTUAL_PROTOTYPE][key] = sourceProperty; - // export real prototype methods - if (options.real && targetPrototype && !targetPrototype[key]) { - createNonEnumerableProperty(targetPrototype, key, sourceProperty); + if (!converted) { + destinationPath.push(current); } + previous = current[0]; } - } -}; - + return destinationPath; + }; -/***/ }), + /** + * Calc length from point x1,y1 to x2,y2 + * @param {Number} x1 starting point x + * @param {Number} y1 starting point y + * @param {Number} x2 starting point x + * @param {Number} y2 starting point y + * @return {Number} length of segment + */ + function calcLineLength(x1, y1, x2, y2) { + return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); + } -/***/ "./node_modules/core-js-pure/internals/fails.js": -/*!******************************************************!*\ - !*** ./node_modules/core-js-pure/internals/fails.js ***! - \******************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { + // functions for the Cubic beizer + // taken from: https://github.com/konvajs/konva/blob/7.0.5/src/shapes/Path.ts#L350 + function CB1(t) { + return t * t * t; + } + function CB2(t) { + return 3 * t * t * (1 - t); + } + function CB3(t) { + return 3 * t * (1 - t) * (1 - t); + } + function CB4(t) { + return (1 - t) * (1 - t) * (1 - t); + } -module.exports = function (exec) { - try { - return !!exec(); - } catch (error) { - return true; + function getPointOnCubicBezierIterator(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y) { + return function(pct) { + var c1 = CB1(pct), c2 = CB2(pct), c3 = CB3(pct), c4 = CB4(pct); + return { + x: p4x * c1 + p3x * c2 + p2x * c3 + p1x * c4, + y: p4y * c1 + p3y * c2 + p2y * c3 + p1y * c4 + }; + }; } -}; + function getTangentCubicIterator(p1x, p1y, p2x, p2y, p3x, p3y, p4x, p4y) { + return function (pct) { + var invT = 1 - pct, + tangentX = (3 * invT * invT * (p2x - p1x)) + (6 * invT * pct * (p3x - p2x)) + + (3 * pct * pct * (p4x - p3x)), + tangentY = (3 * invT * invT * (p2y - p1y)) + (6 * invT * pct * (p3y - p2y)) + + (3 * pct * pct * (p4y - p3y)); + return Math.atan2(tangentY, tangentX); + }; + } -/***/ }), + function QB1(t) { + return t * t; + } -/***/ "./node_modules/core-js-pure/internals/function-bind-context.js": -/*!**********************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/function-bind-context.js ***! - \**********************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + function QB2(t) { + return 2 * t * (1 - t); + } -var aFunction = __webpack_require__(/*! ../internals/a-function */ "./node_modules/core-js-pure/internals/a-function.js"); + function QB3(t) { + return (1 - t) * (1 - t); + } -// optional / simple context binding -module.exports = function (fn, that, length) { - aFunction(fn); - if (that === undefined) return fn; - switch (length) { - case 0: return function () { - return fn.call(that); - }; - case 1: return function (a) { - return fn.call(that, a); - }; - case 2: return function (a, b) { - return fn.call(that, a, b); - }; - case 3: return function (a, b, c) { - return fn.call(that, a, b, c); + function getPointOnQuadraticBezierIterator(p1x, p1y, p2x, p2y, p3x, p3y) { + return function(pct) { + var c1 = QB1(pct), c2 = QB2(pct), c3 = QB3(pct); + return { + x: p3x * c1 + p2x * c2 + p1x * c3, + y: p3y * c1 + p2y * c2 + p1y * c3 + }; }; } - return function (/* ...args */) { - return fn.apply(that, arguments); - }; -}; - -/***/ }), - -/***/ "./node_modules/core-js-pure/internals/get-built-in.js": -/*!*************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/get-built-in.js ***! - \*************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + function getTangentQuadraticIterator(p1x, p1y, p2x, p2y, p3x, p3y) { + return function (pct) { + var invT = 1 - pct, + tangentX = (2 * invT * (p2x - p1x)) + (2 * pct * (p3x - p2x)), + tangentY = (2 * invT * (p2y - p1y)) + (2 * pct * (p3y - p2y)); + return Math.atan2(tangentY, tangentX); + }; + } -var path = __webpack_require__(/*! ../internals/path */ "./node_modules/core-js-pure/internals/path.js"); -var global = __webpack_require__(/*! ../internals/global */ "./node_modules/core-js-pure/internals/global.js"); -var aFunction = function (variable) { - return typeof variable == 'function' ? variable : undefined; -}; + // this will run over a path segment ( a cubic or quadratic segment) and approximate it + // with 100 segemnts. This will good enough to calculate the length of the curve + function pathIterator(iterator, x1, y1) { + var tempP = { x: x1, y: y1 }, p, tmpLen = 0, perc; + for (perc = 1; perc <= 100; perc += 1) { + p = iterator(perc / 100); + tmpLen += calcLineLength(tempP.x, tempP.y, p.x, p.y); + tempP = p; + } + return tmpLen; + } -module.exports = function (namespace, method) { - return arguments.length < 2 ? aFunction(path[namespace]) || aFunction(global[namespace]) - : path[namespace] && path[namespace][method] || global[namespace] && global[namespace][method]; -}; + /** + * Given a pathInfo, and a distance in pixels, find the percentage from 0 to 1 + * that correspond to that pixels run over the path. + * The percentage will be then used to find the correct point on the canvas for the path. + * @param {Array} segInfo fabricJS collection of information on a parsed path + * @param {Number} distance from starting point, in pixels. + * @return {Object} info object with x and y ( the point on canvas ) and angle, the tangent on that point; + */ + function findPercentageForDistance(segInfo, distance) { + var perc = 0, tmpLen = 0, iterator = segInfo.iterator, tempP = { x: segInfo.x, y: segInfo.y }, + p, nextLen, nextStep = 0.01, angleFinder = segInfo.angleFinder, lastPerc; + // nextStep > 0.0001 covers 0.00015625 that 1/64th of 1/100 + // the path + while (tmpLen < distance && perc <= 1 && nextStep > 0.0001) { + p = iterator(perc); + lastPerc = perc; + nextLen = calcLineLength(tempP.x, tempP.y, p.x, p.y); + // compare tmpLen each cycle with distance, decide next perc to test. + if ((nextLen + tmpLen) > distance) { + // we discard this step and we make smaller steps. + nextStep /= 2; + perc -= nextStep; + } + else { + tempP = p; + perc += nextStep; + tmpLen += nextLen; + } + } + p.angle = angleFinder(lastPerc); + return p; + } + /** + * Run over a parsed and simplifed path and extrac some informations. + * informations are length of each command and starting point + * @param {Array} path fabricJS parsed path commands + * @return {Array} path commands informations + */ + function getPathSegmentsInfo(path) { + var totalLength = 0, len = path.length, current, + //x2 and y2 are the coords of segment start + //x1 and y1 are the coords of the current point + x1 = 0, y1 = 0, x2 = 0, y2 = 0, info = [], iterator, tempInfo, angleFinder; + for (var i = 0; i < len; i++) { + current = path[i]; + tempInfo = { + x: x1, + y: y1, + command: current[0], + }; + switch (current[0]) { //first letter + case 'M': + tempInfo.length = 0; + x2 = x1 = current[1]; + y2 = y1 = current[2]; + break; + case 'L': + tempInfo.length = calcLineLength(x1, y1, current[1], current[2]); + x1 = current[1]; + y1 = current[2]; + break; + case 'C': + iterator = getPointOnCubicBezierIterator( + x1, + y1, + current[1], + current[2], + current[3], + current[4], + current[5], + current[6] + ); + angleFinder = getTangentCubicIterator( + x1, + y1, + current[1], + current[2], + current[3], + current[4], + current[5], + current[6] + ); + tempInfo.iterator = iterator; + tempInfo.angleFinder = angleFinder; + tempInfo.length = pathIterator(iterator, x1, y1); + x1 = current[5]; + y1 = current[6]; + break; + case 'Q': + iterator = getPointOnQuadraticBezierIterator( + x1, + y1, + current[1], + current[2], + current[3], + current[4] + ); + angleFinder = getTangentQuadraticIterator( + x1, + y1, + current[1], + current[2], + current[3], + current[4] + ); + tempInfo.iterator = iterator; + tempInfo.angleFinder = angleFinder; + tempInfo.length = pathIterator(iterator, x1, y1); + x1 = current[3]; + y1 = current[4]; + break; + case 'Z': + case 'z': + // we add those in order to ease calculations later + tempInfo.destX = x2; + tempInfo.destY = y2; + tempInfo.length = calcLineLength(x1, y1, x2, y2); + x1 = x2; + y1 = y2; + break; + } + totalLength += tempInfo.length; + info.push(tempInfo); + } + info.push({ length: totalLength, x: x1, y: y1 }); + return info; + } -/***/ }), + function getPointOnPath(path, distance, infos) { + if (!infos) { + infos = getPathSegmentsInfo(path); + } + var i = 0; + while ((distance - infos[i].length > 0) && i < (infos.length - 2)) { + distance -= infos[i].length; + i++; + } + // var distance = infos[infos.length - 1] * perc; + var segInfo = infos[i], segPercent = distance / segInfo.length, + command = segInfo.command, segment = path[i], info; + + switch (command) { + case 'M': + return { x: segInfo.x, y: segInfo.y, angle: 0 }; + case 'Z': + case 'z': + info = new fabric.Point(segInfo.x, segInfo.y).lerp( + new fabric.Point(segInfo.destX, segInfo.destY), + segPercent + ); + info.angle = Math.atan2(segInfo.destY - segInfo.y, segInfo.destX - segInfo.x); + return info; + case 'L': + info = new fabric.Point(segInfo.x, segInfo.y).lerp( + new fabric.Point(segment[1], segment[2]), + segPercent + ); + info.angle = Math.atan2(segment[2] - segInfo.y, segment[1] - segInfo.x); + return info; + case 'C': + return findPercentageForDistance(segInfo, distance); + case 'Q': + return findPercentageForDistance(segInfo, distance); + } + } -/***/ "./node_modules/core-js-pure/internals/get-iterator-method.js": -/*!********************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/get-iterator-method.js ***! - \********************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * + * @param {string} pathString + * @return {(string|number)[][]} An array of SVG path commands + * @example Usage + * parsePath('M 3 4 Q 3 5 2 1 4 0 Q 9 12 2 1 4 0') === [ + * ['M', 3, 4], + * ['Q', 3, 5, 2, 1, 4, 0], + * ['Q', 9, 12, 2, 1, 4, 0], + * ]; + * + */ + function parsePath(pathString) { + var result = [], + coords = [], + currentPath, + parsed, + re = fabric.rePathCommand, + rNumber = '[-+]?(?:\\d*\\.\\d+|\\d+\\.?)(?:[eE][-+]?\\d+)?\\s*', + rNumberCommaWsp = '(' + rNumber + ')' + fabric.commaWsp, + rFlagCommaWsp = '([01])' + fabric.commaWsp + '?', + rArcSeq = rNumberCommaWsp + '?' + rNumberCommaWsp + '?' + rNumberCommaWsp + rFlagCommaWsp + rFlagCommaWsp + + rNumberCommaWsp + '?(' + rNumber + ')', + regArcArgumentSequence = new RegExp(rArcSeq, 'g'), + match, + coordsStr, + // one of commands (m,M,l,L,q,Q,c,C,etc.) followed by non-command characters (i.e. command values) + path; + if (!pathString || !pathString.match) { + return result; + } + path = pathString.match(/[mzlhvcsqta][^mzlhvcsqta]*/gi); -var classof = __webpack_require__(/*! ../internals/classof */ "./node_modules/core-js-pure/internals/classof.js"); -var Iterators = __webpack_require__(/*! ../internals/iterators */ "./node_modules/core-js-pure/internals/iterators.js"); -var wellKnownSymbol = __webpack_require__(/*! ../internals/well-known-symbol */ "./node_modules/core-js-pure/internals/well-known-symbol.js"); + for (var i = 0, coordsParsed, len = path.length; i < len; i++) { + currentPath = path[i]; -var ITERATOR = wellKnownSymbol('iterator'); + coordsStr = currentPath.slice(1).trim(); + coords.length = 0; -module.exports = function (it) { - if (it != undefined) return it[ITERATOR] - || it['@@iterator'] - || Iterators[classof(it)]; -}; + var command = currentPath.charAt(0); + coordsParsed = [command]; + if (command.toLowerCase() === 'a') { + // arcs have special flags that apparently don't require spaces so handle special + for (var args; (args = regArcArgumentSequence.exec(coordsStr));) { + for (var j = 1; j < args.length; j++) { + coords.push(args[j]); + } + } + } + else { + while ((match = re.exec(coordsStr))) { + coords.push(match[0]); + } + } -/***/ }), + for (var j = 0, jlen = coords.length; j < jlen; j++) { + parsed = parseFloat(coords[j]); + if (!isNaN(parsed)) { + coordsParsed.push(parsed); + } + } -/***/ "./node_modules/core-js-pure/internals/global.js": -/*!*******************************************************!*\ - !*** ./node_modules/core-js-pure/internals/global.js ***! - \*******************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + var commandLength = commandLengths[command.toLowerCase()], + repeatedCommand = repeatedCommands[command] || command; -/* WEBPACK VAR INJECTION */(function(global) {var check = function (it) { - return it && it.Math == Math && it; -}; + if (coordsParsed.length - 1 > commandLength) { + for (var k = 1, klen = coordsParsed.length; k < klen; k += commandLength) { + result.push([command].concat(coordsParsed.slice(k, k + commandLength))); + command = repeatedCommand; + } + } + else { + result.push(coordsParsed); + } + } -// https://github.com/zloirock/core-js/issues/86#issuecomment-115759028 -module.exports = - // eslint-disable-next-line es/no-global-this -- safe - check(typeof globalThis == 'object' && globalThis) || - check(typeof window == 'object' && window) || - // eslint-disable-next-line no-restricted-globals -- safe - check(typeof self == 'object' && self) || - check(typeof global == 'object' && global) || - // eslint-disable-next-line no-new-func -- fallback - (function () { return this; })() || Function('return this')(); + return result; + }; -/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../webpack/buildin/global.js */ "./node_modules/webpack/buildin/global.js"))) + /** + * + * Converts points to a smooth SVG path + * @param {{ x: number,y: number }[]} points Array of points + * @param {number} [correction] Apply a correction to the path (usually we use `width / 1000`). If value is undefined 0 is used as the correction value. + * @return {(string|number)[][]} An array of SVG path commands + */ + function getSmoothPathFromPoints(points, correction) { + var path = [], i, + p1 = new fabric.Point(points[0].x, points[0].y), + p2 = new fabric.Point(points[1].x, points[1].y), + len = points.length, multSignX = 1, multSignY = 0, manyPoints = len > 2; + correction = correction || 0; + + if (manyPoints) { + multSignX = points[2].x < p2.x ? -1 : points[2].x === p2.x ? 0 : 1; + multSignY = points[2].y < p2.y ? -1 : points[2].y === p2.y ? 0 : 1; + } + path.push(['M', p1.x - multSignX * correction, p1.y - multSignY * correction]); + for (i = 1; i < len; i++) { + if (!p1.eq(p2)) { + var midPoint = p1.midPointFrom(p2); + // p1 is our bezier control point + // midpoint is our endpoint + // start point is p(i-1) value. + path.push(['Q', p1.x, p1.y, midPoint.x, midPoint.y]); + } + p1 = points[i]; + if ((i + 1) < points.length) { + p2 = points[i + 1]; + } + } + if (manyPoints) { + multSignX = p1.x > points[i - 2].x ? 1 : p1.x === points[i - 2].x ? 0 : -1; + multSignY = p1.y > points[i - 2].y ? 1 : p1.y === points[i - 2].y ? 0 : -1; + } + path.push(['L', p1.x + multSignX * correction, p1.y + multSignY * correction]); + return path; + } + /** + * Transform a path by transforming each segment. + * it has to be a simplified path or it won't work. + * WARNING: this depends from pathOffset for correct operation + * @param {Array} path fabricJS parsed and simplified path commands + * @param {Array} transform matrix that represent the transformation + * @param {Object} [pathOffset] the fabric.Path pathOffset + * @param {Number} pathOffset.x + * @param {Number} pathOffset.y + * @returns {Array} the transformed path + */ + function transformPath(path, transform, pathOffset) { + if (pathOffset) { + transform = fabric.util.multiplyTransformMatrices( + transform, + [1, 0, 0, 1, -pathOffset.x, -pathOffset.y] + ); + } + return path.map(function(pathSegment) { + var newSegment = pathSegment.slice(0), point = {}; + for (var i = 1; i < pathSegment.length - 1; i += 2) { + point.x = pathSegment[i]; + point.y = pathSegment[i + 1]; + point = fabric.util.transformPoint(point, transform); + newSegment[i] = point.x; + newSegment[i + 1] = point.y; + } + return newSegment; + }); + } -/***/ }), + /** + * Calculate bounding box of a elliptic-arc + * @deprecated + * @param {Number} fx start point of arc + * @param {Number} fy + * @param {Number} rx horizontal radius + * @param {Number} ry vertical radius + * @param {Number} rot angle of horizontal axis + * @param {Number} large 1 or 0, whatever the arc is the big or the small on the 2 points + * @param {Number} sweep 1 or 0, 1 clockwise or counterclockwise direction + * @param {Number} tx end point of arc + * @param {Number} ty + */ + function getBoundsOfArc(fx, fy, rx, ry, rot, large, sweep, tx, ty) { -/***/ "./node_modules/core-js-pure/internals/has.js": -/*!****************************************************!*\ - !*** ./node_modules/core-js-pure/internals/has.js ***! - \****************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + var fromX = 0, fromY = 0, bound, bounds = [], + segs = arcToSegments(tx - fx, ty - fy, rx, ry, large, sweep, rot); -var toObject = __webpack_require__(/*! ../internals/to-object */ "./node_modules/core-js-pure/internals/to-object.js"); + for (var i = 0, len = segs.length; i < len; i++) { + bound = getBoundsOfCurve(fromX, fromY, segs[i][1], segs[i][2], segs[i][3], segs[i][4], segs[i][5], segs[i][6]); + bounds.push({ x: bound[0].x + fx, y: bound[0].y + fy }); + bounds.push({ x: bound[1].x + fx, y: bound[1].y + fy }); + fromX = segs[i][5]; + fromY = segs[i][6]; + } + return bounds; + }; -var hasOwnProperty = {}.hasOwnProperty; + /** + * Draws arc + * @deprecated + * @param {CanvasRenderingContext2D} ctx + * @param {Number} fx + * @param {Number} fy + * @param {Array} coords coords of the arc, without the front 'A/a' + */ + function drawArc(ctx, fx, fy, coords) { + coords = coords.slice(0).unshift('X'); // command A or a does not matter + var beziers = fromArcToBeziers(fx, fy, coords); + beziers.forEach(function(bezier) { + ctx.bezierCurveTo.apply(ctx, bezier.slice(1)); + }); + }; -module.exports = function hasOwn(it, key) { - return hasOwnProperty.call(toObject(it), key); -}; + /** + * Join path commands to go back to svg format + * @param {Array} pathData fabricJS parsed path commands + * @return {String} joined path 'M 0 0 L 20 30' + */ + fabric.util.joinPath = function(pathData) { + return pathData.map(function (segment) { return segment.join(' '); }).join(' '); + }; + fabric.util.parsePath = parsePath; + fabric.util.makePathSimpler = makePathSimpler; + fabric.util.getSmoothPathFromPoints = getSmoothPathFromPoints; + fabric.util.getPathSegmentsInfo = getPathSegmentsInfo; + fabric.util.getBoundsOfCurve = getBoundsOfCurve; + fabric.util.getPointOnPath = getPointOnPath; + fabric.util.transformPath = transformPath; + /** + * Typo of `fromArcToBeziers` kept for not breaking the api once corrected. + * Will be removed in fabric 5.0 + * @deprecated + */ + fabric.util.fromArcToBeizers = fromArcToBeziers; + // kept because we do not want to make breaking changes. + // but useless and deprecated. + fabric.util.getBoundsOfArc = getBoundsOfArc; + fabric.util.drawArc = drawArc; +})(); -/***/ }), +(function() { -/***/ "./node_modules/core-js-pure/internals/hidden-keys.js": -/*!************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/hidden-keys.js ***! - \************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { + var slice = Array.prototype.slice; -module.exports = {}; + /** + * Invokes method on all items in a given array + * @memberOf fabric.util.array + * @param {Array} array Array to iterate over + * @param {String} method Name of a method to invoke + * @return {Array} + */ + function invoke(array, method) { + var args = slice.call(arguments, 2), result = []; + for (var i = 0, len = array.length; i < len; i++) { + result[i] = args.length ? array[i][method].apply(array[i], args) : array[i][method].call(array[i]); + } + return result; + } + /** + * Finds maximum value in array (not necessarily "first" one) + * @memberOf fabric.util.array + * @param {Array} array Array to iterate over + * @param {String} byProperty + * @return {*} + */ + function max(array, byProperty) { + return find(array, byProperty, function(value1, value2) { + return value1 >= value2; + }); + } -/***/ }), + /** + * Finds minimum value in array (not necessarily "first" one) + * @memberOf fabric.util.array + * @param {Array} array Array to iterate over + * @param {String} byProperty + * @return {*} + */ + function min(array, byProperty) { + return find(array, byProperty, function(value1, value2) { + return value1 < value2; + }); + } -/***/ "./node_modules/core-js-pure/internals/host-report-errors.js": -/*!*******************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/host-report-errors.js ***! - \*******************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * @private + */ + function fill(array, value) { + var k = array.length; + while (k--) { + array[k] = value; + } + return array; + } -var global = __webpack_require__(/*! ../internals/global */ "./node_modules/core-js-pure/internals/global.js"); + /** + * @private + */ + function find(array, byProperty, condition) { + if (!array || array.length === 0) { + return; + } -module.exports = function (a, b) { - var console = global.console; - if (console && console.error) { - arguments.length === 1 ? console.error(a) : console.error(a, b); + var i = array.length - 1, + result = byProperty ? array[i][byProperty] : array[i]; + if (byProperty) { + while (i--) { + if (condition(array[i][byProperty], result)) { + result = array[i][byProperty]; + } + } + } + else { + while (i--) { + if (condition(array[i], result)) { + result = array[i]; + } + } + } + return result; } -}; + /** + * @namespace fabric.util.array + */ + fabric.util.array = { + fill: fill, + invoke: invoke, + min: min, + max: max + }; -/***/ }), +})(); -/***/ "./node_modules/core-js-pure/internals/html.js": -/*!*****************************************************!*\ - !*** ./node_modules/core-js-pure/internals/html.js ***! - \*****************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { -var getBuiltIn = __webpack_require__(/*! ../internals/get-built-in */ "./node_modules/core-js-pure/internals/get-built-in.js"); +(function() { + /** + * Copies all enumerable properties of one js object to another + * this does not and cannot compete with generic utils. + * Does not clone or extend fabric.Object subclasses. + * This is mostly for internal use and has extra handling for fabricJS objects + * it skips the canvas and group properties in deep cloning. + * @memberOf fabric.util.object + * @param {Object} destination Where to copy to + * @param {Object} source Where to copy from + * @param {Boolean} [deep] Whether to extend nested objects + * @return {Object} + */ -module.exports = getBuiltIn('document', 'documentElement'); + function extend(destination, source, deep) { + // JScript DontEnum bug is not taken care of + // the deep clone is for internal use, is not meant to avoid + // javascript traps or cloning html element or self referenced objects. + if (deep) { + if (!fabric.isLikelyNode && source instanceof Element) { + // avoid cloning deep images, canvases, + destination = source; + } + else if (source instanceof Array) { + destination = []; + for (var i = 0, len = source.length; i < len; i++) { + destination[i] = extend({ }, source[i], deep); + } + } + else if (source && typeof source === 'object') { + for (var property in source) { + if (property === 'canvas' || property === 'group') { + // we do not want to clone this props at all. + // we want to keep the keys in the copy + destination[property] = null; + } + else if (source.hasOwnProperty(property)) { + destination[property] = extend({ }, source[property], deep); + } + } + } + else { + // this sounds odd for an extend but is ok for recursive use + destination = source; + } + } + else { + for (var property in source) { + destination[property] = source[property]; + } + } + return destination; + } + /** + * Creates an empty object and copies all enumerable properties of another object to it + * This method is mostly for internal use, and not intended for duplicating shapes in canvas. + * @memberOf fabric.util.object + * @param {Object} object Object to clone + * @param {Boolean} [deep] Whether to clone nested objects + * @return {Object} + */ -/***/ }), + //TODO: this function return an empty object if you try to clone null + function clone(object, deep) { + return extend({ }, object, deep); + } -/***/ "./node_modules/core-js-pure/internals/ie8-dom-define.js": -/*!***************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/ie8-dom-define.js ***! - \***************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** @namespace fabric.util.object */ + fabric.util.object = { + extend: extend, + clone: clone + }; + fabric.util.object.extend(fabric.util, fabric.Observable); +})(); -var DESCRIPTORS = __webpack_require__(/*! ../internals/descriptors */ "./node_modules/core-js-pure/internals/descriptors.js"); -var fails = __webpack_require__(/*! ../internals/fails */ "./node_modules/core-js-pure/internals/fails.js"); -var createElement = __webpack_require__(/*! ../internals/document-create-element */ "./node_modules/core-js-pure/internals/document-create-element.js"); -// Thank's IE8 for his funny defineProperty -module.exports = !DESCRIPTORS && !fails(function () { - // eslint-disable-next-line es/no-object-defineproperty -- requied for testing - return Object.defineProperty(createElement('div'), 'a', { - get: function () { return 7; } - }).a != 7; -}); - - -/***/ }), +(function() { -/***/ "./node_modules/core-js-pure/internals/indexed-object.js": -/*!***************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/indexed-object.js ***! - \***************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Camelizes a string + * @memberOf fabric.util.string + * @param {String} string String to camelize + * @return {String} Camelized version of a string + */ + function camelize(string) { + return string.replace(/-+(.)?/g, function(match, character) { + return character ? character.toUpperCase() : ''; + }); + } -var fails = __webpack_require__(/*! ../internals/fails */ "./node_modules/core-js-pure/internals/fails.js"); -var classof = __webpack_require__(/*! ../internals/classof-raw */ "./node_modules/core-js-pure/internals/classof-raw.js"); + /** + * Capitalizes a string + * @memberOf fabric.util.string + * @param {String} string String to capitalize + * @param {Boolean} [firstLetterOnly] If true only first letter is capitalized + * and other letters stay untouched, if false first letter is capitalized + * and other letters are converted to lowercase. + * @return {String} Capitalized version of a string + */ + function capitalize(string, firstLetterOnly) { + return string.charAt(0).toUpperCase() + + (firstLetterOnly ? string.slice(1) : string.slice(1).toLowerCase()); + } -var split = ''.split; + /** + * Escapes XML in a string + * @memberOf fabric.util.string + * @param {String} string String to escape + * @return {String} Escaped version of a string + */ + function escapeXml(string) { + return string.replace(/&/g, '&') + .replace(/"/g, '"') + .replace(/'/g, ''') + .replace(//g, '>'); + } -// fallback for non-array-like ES3 and non-enumerable old V8 strings -module.exports = fails(function () { - // throws an error in rhino, see https://github.com/mozilla/rhino/issues/346 - // eslint-disable-next-line no-prototype-builtins -- safe - return !Object('z').propertyIsEnumerable(0); -}) ? function (it) { - return classof(it) == 'String' ? split.call(it, '') : Object(it); -} : Object; + /** + * Divide a string in the user perceived single units + * @memberOf fabric.util.string + * @param {String} textstring String to escape + * @return {Array} array containing the graphemes + */ + function graphemeSplit(textstring) { + var i = 0, chr, graphemes = []; + for (i = 0, chr; i < textstring.length; i++) { + if ((chr = getWholeChar(textstring, i)) === false) { + continue; + } + graphemes.push(chr); + } + return graphemes; + } + // taken from mdn in the charAt doc page. + function getWholeChar(str, i) { + var code = str.charCodeAt(i); -/***/ }), + if (isNaN(code)) { + return ''; // Position not found + } + if (code < 0xD800 || code > 0xDFFF) { + return str.charAt(i); + } -/***/ "./node_modules/core-js-pure/internals/inspect-source.js": -/*!***************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/inspect-source.js ***! - \***************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + // High surrogate (could change last hex to 0xDB7F to treat high private + // surrogates as single characters) + if (0xD800 <= code && code <= 0xDBFF) { + if (str.length <= (i + 1)) { + throw 'High surrogate without following low surrogate'; + } + var next = str.charCodeAt(i + 1); + if (0xDC00 > next || next > 0xDFFF) { + throw 'High surrogate without following low surrogate'; + } + return str.charAt(i) + str.charAt(i + 1); + } + // Low surrogate (0xDC00 <= code && code <= 0xDFFF) + if (i === 0) { + throw 'Low surrogate without preceding high surrogate'; + } + var prev = str.charCodeAt(i - 1); -var store = __webpack_require__(/*! ../internals/shared-store */ "./node_modules/core-js-pure/internals/shared-store.js"); + // (could change last hex to 0xDB7F to treat high private + // surrogates as single characters) + if (0xD800 > prev || prev > 0xDBFF) { + throw 'Low surrogate without preceding high surrogate'; + } + // We can pass over low surrogates now as the second component + // in a pair which we have already processed + return false; + } -var functionToString = Function.toString; -// this helper broken in `3.4.1-3.4.4`, so we can't use `shared` helper -if (typeof store.inspectSource != 'function') { - store.inspectSource = function (it) { - return functionToString.call(it); + /** + * String utilities + * @namespace fabric.util.string + */ + fabric.util.string = { + camelize: camelize, + capitalize: capitalize, + escapeXml: escapeXml, + graphemeSplit: graphemeSplit }; -} +})(); -module.exports = store.inspectSource; +(function() { -/***/ }), + var slice = Array.prototype.slice, emptyFunction = function() { }, -/***/ "./node_modules/core-js-pure/internals/internal-state.js": -/*!***************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/internal-state.js ***! - \***************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + IS_DONTENUM_BUGGY = (function() { + for (var p in { toString: 1 }) { + if (p === 'toString') { + return false; + } + } + return true; + })(), -var NATIVE_WEAK_MAP = __webpack_require__(/*! ../internals/native-weak-map */ "./node_modules/core-js-pure/internals/native-weak-map.js"); -var global = __webpack_require__(/*! ../internals/global */ "./node_modules/core-js-pure/internals/global.js"); -var isObject = __webpack_require__(/*! ../internals/is-object */ "./node_modules/core-js-pure/internals/is-object.js"); -var createNonEnumerableProperty = __webpack_require__(/*! ../internals/create-non-enumerable-property */ "./node_modules/core-js-pure/internals/create-non-enumerable-property.js"); -var objectHas = __webpack_require__(/*! ../internals/has */ "./node_modules/core-js-pure/internals/has.js"); -var shared = __webpack_require__(/*! ../internals/shared-store */ "./node_modules/core-js-pure/internals/shared-store.js"); -var sharedKey = __webpack_require__(/*! ../internals/shared-key */ "./node_modules/core-js-pure/internals/shared-key.js"); -var hiddenKeys = __webpack_require__(/*! ../internals/hidden-keys */ "./node_modules/core-js-pure/internals/hidden-keys.js"); + /** @ignore */ + addMethods = function(klass, source, parent) { + for (var property in source) { -var OBJECT_ALREADY_INITIALIZED = 'Object already initialized'; -var WeakMap = global.WeakMap; -var set, get, has; + if (property in klass.prototype && + typeof klass.prototype[property] === 'function' && + (source[property] + '').indexOf('callSuper') > -1) { -var enforce = function (it) { - return has(it) ? get(it) : set(it, {}); -}; + klass.prototype[property] = (function(property) { + return function() { -var getterFor = function (TYPE) { - return function (it) { - var state; - if (!isObject(it) || (state = get(it)).type !== TYPE) { - throw TypeError('Incompatible receiver, ' + TYPE + ' required'); - } return state; - }; -}; + var superclass = this.constructor.superclass; + this.constructor.superclass = parent; + var returnValue = source[property].apply(this, arguments); + this.constructor.superclass = superclass; -if (NATIVE_WEAK_MAP || shared.state) { - var store = shared.state || (shared.state = new WeakMap()); - var wmget = store.get; - var wmhas = store.has; - var wmset = store.set; - set = function (it, metadata) { - if (wmhas.call(store, it)) throw new TypeError(OBJECT_ALREADY_INITIALIZED); - metadata.facade = it; - wmset.call(store, it, metadata); - return metadata; - }; - get = function (it) { - return wmget.call(store, it) || {}; - }; - has = function (it) { - return wmhas.call(store, it); - }; -} else { - var STATE = sharedKey('state'); - hiddenKeys[STATE] = true; - set = function (it, metadata) { - if (objectHas(it, STATE)) throw new TypeError(OBJECT_ALREADY_INITIALIZED); - metadata.facade = it; - createNonEnumerableProperty(it, STATE, metadata); - return metadata; - }; - get = function (it) { - return objectHas(it, STATE) ? it[STATE] : {}; - }; - has = function (it) { - return objectHas(it, STATE); - }; -} + if (property !== 'initialize') { + return returnValue; + } + }; + })(property); + } + else { + klass.prototype[property] = source[property]; + } -module.exports = { - set: set, - get: get, - has: has, - enforce: enforce, - getterFor: getterFor -}; + if (IS_DONTENUM_BUGGY) { + if (source.toString !== Object.prototype.toString) { + klass.prototype.toString = source.toString; + } + if (source.valueOf !== Object.prototype.valueOf) { + klass.prototype.valueOf = source.valueOf; + } + } + } + }; + function Subclass() { } -/***/ }), + function callSuper(methodName) { + var parentMethod = null, + _this = this; -/***/ "./node_modules/core-js-pure/internals/is-array-iterator-method.js": -/*!*************************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/is-array-iterator-method.js ***! - \*************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + // climb prototype chain to find method not equal to callee's method + while (_this.constructor.superclass) { + var superClassMethod = _this.constructor.superclass.prototype[methodName]; + if (_this[methodName] !== superClassMethod) { + parentMethod = superClassMethod; + break; + } + // eslint-disable-next-line + _this = _this.constructor.superclass.prototype; + } -var wellKnownSymbol = __webpack_require__(/*! ../internals/well-known-symbol */ "./node_modules/core-js-pure/internals/well-known-symbol.js"); -var Iterators = __webpack_require__(/*! ../internals/iterators */ "./node_modules/core-js-pure/internals/iterators.js"); + if (!parentMethod) { + return console.log('tried to callSuper ' + methodName + ', method not found in prototype chain', this); + } -var ITERATOR = wellKnownSymbol('iterator'); -var ArrayPrototype = Array.prototype; + return (arguments.length > 1) + ? parentMethod.apply(this, slice.call(arguments, 1)) + : parentMethod.call(this); + } -// check on default Array iterator -module.exports = function (it) { - return it !== undefined && (Iterators.Array === it || ArrayPrototype[ITERATOR] === it); -}; + /** + * Helper for creation of "classes". + * @memberOf fabric.util + * @param {Function} [parent] optional "Class" to inherit from + * @param {Object} [properties] Properties shared by all instances of this class + * (be careful modifying objects defined here as this would affect all instances) + */ + function createClass() { + var parent = null, + properties = slice.call(arguments, 0); + if (typeof properties[0] === 'function') { + parent = properties.shift(); + } + function klass() { + this.initialize.apply(this, arguments); + } -/***/ }), + klass.superclass = parent; + klass.subclasses = []; -/***/ "./node_modules/core-js-pure/internals/is-forced.js": -/*!**********************************************************!*\ - !*** ./node_modules/core-js-pure/internals/is-forced.js ***! - \**********************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + if (parent) { + Subclass.prototype = parent.prototype; + klass.prototype = new Subclass(); + parent.subclasses.push(klass); + } + for (var i = 0, length = properties.length; i < length; i++) { + addMethods(klass, properties[i], parent); + } + if (!klass.prototype.initialize) { + klass.prototype.initialize = emptyFunction; + } + klass.prototype.constructor = klass; + klass.prototype.callSuper = callSuper; + return klass; + } -var fails = __webpack_require__(/*! ../internals/fails */ "./node_modules/core-js-pure/internals/fails.js"); + fabric.util.createClass = createClass; +})(); -var replacement = /#|\.prototype\./; -var isForced = function (feature, detection) { - var value = data[normalize(feature)]; - return value == POLYFILL ? true - : value == NATIVE ? false - : typeof detection == 'function' ? fails(detection) - : !!detection; -}; +(function () { + // since ie11 can use addEventListener but they do not support options, i need to check + var couldUseAttachEvent = !!fabric.document.createElement('div').attachEvent, + touchEvents = ['touchstart', 'touchmove', 'touchend']; + /** + * Adds an event listener to an element + * @function + * @memberOf fabric.util + * @param {HTMLElement} element + * @param {String} eventName + * @param {Function} handler + */ + fabric.util.addListener = function(element, eventName, handler, options) { + element && element.addEventListener(eventName, handler, couldUseAttachEvent ? false : options); + }; -var normalize = isForced.normalize = function (string) { - return String(string).replace(replacement, '.').toLowerCase(); -}; + /** + * Removes an event listener from an element + * @function + * @memberOf fabric.util + * @param {HTMLElement} element + * @param {String} eventName + * @param {Function} handler + */ + fabric.util.removeListener = function(element, eventName, handler, options) { + element && element.removeEventListener(eventName, handler, couldUseAttachEvent ? false : options); + }; -var data = isForced.data = {}; -var NATIVE = isForced.NATIVE = 'N'; -var POLYFILL = isForced.POLYFILL = 'P'; + function getTouchInfo(event) { + var touchProp = event.changedTouches; + if (touchProp && touchProp[0]) { + return touchProp[0]; + } + return event; + } -module.exports = isForced; + fabric.util.getPointer = function(event) { + var element = event.target, + scroll = fabric.util.getScrollLeftTop(element), + _evt = getTouchInfo(event); + return { + x: _evt.clientX + scroll.left, + y: _evt.clientY + scroll.top + }; + }; + fabric.util.isTouchEvent = function(event) { + return touchEvents.indexOf(event.type) > -1 || event.pointerType === 'touch'; + }; +})(); -/***/ }), -/***/ "./node_modules/core-js-pure/internals/is-object.js": -/*!**********************************************************!*\ - !*** ./node_modules/core-js-pure/internals/is-object.js ***! - \**********************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { +(function () { -module.exports = function (it) { - return typeof it === 'object' ? it !== null : typeof it === 'function'; -}; + /** + * Cross-browser wrapper for setting element's style + * @memberOf fabric.util + * @param {HTMLElement} element + * @param {Object} styles + * @return {HTMLElement} Element that was passed as a first argument + */ + function setStyle(element, styles) { + var elementStyle = element.style; + if (!elementStyle) { + return element; + } + if (typeof styles === 'string') { + element.style.cssText += ';' + styles; + return styles.indexOf('opacity') > -1 + ? setOpacity(element, styles.match(/opacity:\s*(\d?\.?\d*)/)[1]) + : element; + } + for (var property in styles) { + if (property === 'opacity') { + setOpacity(element, styles[property]); + } + else { + var normalizedProperty = (property === 'float' || property === 'cssFloat') + ? (typeof elementStyle.styleFloat === 'undefined' ? 'cssFloat' : 'styleFloat') + : property; + elementStyle[normalizedProperty] = styles[property]; + } + } + return element; + } + var parseEl = fabric.document.createElement('div'), + supportsOpacity = typeof parseEl.style.opacity === 'string', + supportsFilters = typeof parseEl.style.filter === 'string', + reOpacity = /alpha\s*\(\s*opacity\s*=\s*([^\)]+)\)/, -/***/ }), + /** @ignore */ + setOpacity = function (element) { return element; }; -/***/ "./node_modules/core-js-pure/internals/is-pure.js": -/*!********************************************************!*\ - !*** ./node_modules/core-js-pure/internals/is-pure.js ***! - \********************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { + if (supportsOpacity) { + /** @ignore */ + setOpacity = function(element, value) { + element.style.opacity = value; + return element; + }; + } + else if (supportsFilters) { + /** @ignore */ + setOpacity = function(element, value) { + var es = element.style; + if (element.currentStyle && !element.currentStyle.hasLayout) { + es.zoom = 1; + } + if (reOpacity.test(es.filter)) { + value = value >= 0.9999 ? '' : ('alpha(opacity=' + (value * 100) + ')'); + es.filter = es.filter.replace(reOpacity, value); + } + else { + es.filter += ' alpha(opacity=' + (value * 100) + ')'; + } + return element; + }; + } -module.exports = true; + fabric.util.setStyle = setStyle; +})(); -/***/ }), -/***/ "./node_modules/core-js-pure/internals/iterate.js": -/*!********************************************************!*\ - !*** ./node_modules/core-js-pure/internals/iterate.js ***! - \********************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +(function() { -var anObject = __webpack_require__(/*! ../internals/an-object */ "./node_modules/core-js-pure/internals/an-object.js"); -var isArrayIteratorMethod = __webpack_require__(/*! ../internals/is-array-iterator-method */ "./node_modules/core-js-pure/internals/is-array-iterator-method.js"); -var toLength = __webpack_require__(/*! ../internals/to-length */ "./node_modules/core-js-pure/internals/to-length.js"); -var bind = __webpack_require__(/*! ../internals/function-bind-context */ "./node_modules/core-js-pure/internals/function-bind-context.js"); -var getIteratorMethod = __webpack_require__(/*! ../internals/get-iterator-method */ "./node_modules/core-js-pure/internals/get-iterator-method.js"); -var iteratorClose = __webpack_require__(/*! ../internals/iterator-close */ "./node_modules/core-js-pure/internals/iterator-close.js"); + var _slice = Array.prototype.slice; -var Result = function (stopped, result) { - this.stopped = stopped; - this.result = result; -}; + /** + * Takes id and returns an element with that id (if one exists in a document) + * @memberOf fabric.util + * @param {String|HTMLElement} id + * @return {HTMLElement|null} + */ + function getById(id) { + return typeof id === 'string' ? fabric.document.getElementById(id) : id; + } -module.exports = function (iterable, unboundFunction, options) { - var that = options && options.that; - var AS_ENTRIES = !!(options && options.AS_ENTRIES); - var IS_ITERATOR = !!(options && options.IS_ITERATOR); - var INTERRUPTED = !!(options && options.INTERRUPTED); - var fn = bind(unboundFunction, that, 1 + AS_ENTRIES + INTERRUPTED); - var iterator, iterFn, index, length, result, next, step; + var sliceCanConvertNodelists, + /** + * Converts an array-like object (e.g. arguments or NodeList) to an array + * @memberOf fabric.util + * @param {Object} arrayLike + * @return {Array} + */ + toArray = function(arrayLike) { + return _slice.call(arrayLike, 0); + }; - var stop = function (condition) { - if (iterator) iteratorClose(iterator); - return new Result(true, condition); - }; + try { + sliceCanConvertNodelists = toArray(fabric.document.childNodes) instanceof Array; + } + catch (err) { } - var callFn = function (value) { - if (AS_ENTRIES) { - anObject(value); - return INTERRUPTED ? fn(value[0], value[1], stop) : fn(value[0], value[1]); - } return INTERRUPTED ? fn(value, stop) : fn(value); - }; + if (!sliceCanConvertNodelists) { + toArray = function(arrayLike) { + var arr = new Array(arrayLike.length), i = arrayLike.length; + while (i--) { + arr[i] = arrayLike[i]; + } + return arr; + }; + } - if (IS_ITERATOR) { - iterator = iterable; - } else { - iterFn = getIteratorMethod(iterable); - if (typeof iterFn != 'function') throw TypeError('Target is not iterable'); - // optimisation for array iterators - if (isArrayIteratorMethod(iterFn)) { - for (index = 0, length = toLength(iterable.length); length > index; index++) { - result = callFn(iterable[index]); - if (result && result instanceof Result) return result; - } return new Result(false); + /** + * Creates specified element with specified attributes + * @memberOf fabric.util + * @param {String} tagName Type of an element to create + * @param {Object} [attributes] Attributes to set on an element + * @return {HTMLElement} Newly created element + */ + function makeElement(tagName, attributes) { + var el = fabric.document.createElement(tagName); + for (var prop in attributes) { + if (prop === 'class') { + el.className = attributes[prop]; + } + else if (prop === 'for') { + el.htmlFor = attributes[prop]; + } + else { + el.setAttribute(prop, attributes[prop]); + } } - iterator = iterFn.call(iterable); + return el; } - next = iterator.next; - while (!(step = next.call(iterator)).done) { - try { - result = callFn(step.value); - } catch (error) { - iteratorClose(iterator); - throw error; + /** + * Adds class to an element + * @memberOf fabric.util + * @param {HTMLElement} element Element to add class to + * @param {String} className Class to add to an element + */ + function addClass(element, className) { + if (element && (' ' + element.className + ' ').indexOf(' ' + className + ' ') === -1) { + element.className += (element.className ? ' ' : '') + className; } - if (typeof result == 'object' && result && result instanceof Result) return result; - } return new Result(false); -}; - + } -/***/ }), + /** + * Wraps element with another element + * @memberOf fabric.util + * @param {HTMLElement} element Element to wrap + * @param {HTMLElement|String} wrapper Element to wrap with + * @param {Object} [attributes] Attributes to set on a wrapper + * @return {HTMLElement} wrapper + */ + function wrapElement(element, wrapper, attributes) { + if (typeof wrapper === 'string') { + wrapper = makeElement(wrapper, attributes); + } + if (element.parentNode) { + element.parentNode.replaceChild(wrapper, element); + } + wrapper.appendChild(element); + return wrapper; + } -/***/ "./node_modules/core-js-pure/internals/iterator-close.js": -/*!***************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/iterator-close.js ***! - \***************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Returns element scroll offsets + * @memberOf fabric.util + * @param {HTMLElement} element Element to operate on + * @return {Object} Object with left/top values + */ + function getScrollLeftTop(element) { -var anObject = __webpack_require__(/*! ../internals/an-object */ "./node_modules/core-js-pure/internals/an-object.js"); + var left = 0, + top = 0, + docElement = fabric.document.documentElement, + body = fabric.document.body || { + scrollLeft: 0, scrollTop: 0 + }; -module.exports = function (iterator) { - var returnMethod = iterator['return']; - if (returnMethod !== undefined) { - return anObject(returnMethod.call(iterator)).value; - } -}; + // While loop checks (and then sets element to) .parentNode OR .host + // to account for ShadowDOM. We still want to traverse up out of ShadowDOM, + // but the .parentNode of a root ShadowDOM node will always be null, instead + // it should be accessed through .host. See http://stackoverflow.com/a/24765528/4383938 + while (element && (element.parentNode || element.host)) { + // Set element to element parent, or 'host' in case of ShadowDOM + element = element.parentNode || element.host; -/***/ }), + if (element === fabric.document) { + left = body.scrollLeft || docElement.scrollLeft || 0; + top = body.scrollTop || docElement.scrollTop || 0; + } + else { + left += element.scrollLeft || 0; + top += element.scrollTop || 0; + } -/***/ "./node_modules/core-js-pure/internals/iterators-core.js": -/*!***************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/iterators-core.js ***! - \***************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + if (element.nodeType === 1 && element.style.position === 'fixed') { + break; + } + } -"use strict"; + return { left: left, top: top }; + } -var fails = __webpack_require__(/*! ../internals/fails */ "./node_modules/core-js-pure/internals/fails.js"); -var getPrototypeOf = __webpack_require__(/*! ../internals/object-get-prototype-of */ "./node_modules/core-js-pure/internals/object-get-prototype-of.js"); -var createNonEnumerableProperty = __webpack_require__(/*! ../internals/create-non-enumerable-property */ "./node_modules/core-js-pure/internals/create-non-enumerable-property.js"); -var has = __webpack_require__(/*! ../internals/has */ "./node_modules/core-js-pure/internals/has.js"); -var wellKnownSymbol = __webpack_require__(/*! ../internals/well-known-symbol */ "./node_modules/core-js-pure/internals/well-known-symbol.js"); -var IS_PURE = __webpack_require__(/*! ../internals/is-pure */ "./node_modules/core-js-pure/internals/is-pure.js"); + /** + * Returns offset for a given element + * @function + * @memberOf fabric.util + * @param {HTMLElement} element Element to get offset for + * @return {Object} Object with "left" and "top" properties + */ + function getElementOffset(element) { + var docElem, + doc = element && element.ownerDocument, + box = { left: 0, top: 0 }, + offset = { left: 0, top: 0 }, + scrollLeftTop, + offsetAttributes = { + borderLeftWidth: 'left', + borderTopWidth: 'top', + paddingLeft: 'left', + paddingTop: 'top' + }; -var ITERATOR = wellKnownSymbol('iterator'); -var BUGGY_SAFARI_ITERATORS = false; + if (!doc) { + return offset; + } -var returnThis = function () { return this; }; + for (var attr in offsetAttributes) { + offset[offsetAttributes[attr]] += parseInt(getElementStyle(element, attr), 10) || 0; + } -// `%IteratorPrototype%` object -// https://tc39.es/ecma262/#sec-%iteratorprototype%-object -var IteratorPrototype, PrototypeOfArrayIteratorPrototype, arrayIterator; + docElem = doc.documentElement; + if ( typeof element.getBoundingClientRect !== 'undefined' ) { + box = element.getBoundingClientRect(); + } -/* eslint-disable es/no-array-prototype-keys -- safe */ -if ([].keys) { - arrayIterator = [].keys(); - // Safari 8 has buggy iterators w/o `next` - if (!('next' in arrayIterator)) BUGGY_SAFARI_ITERATORS = true; + scrollLeftTop = getScrollLeftTop(element); + + return { + left: box.left + scrollLeftTop.left - (docElem.clientLeft || 0) + offset.left, + top: box.top + scrollLeftTop.top - (docElem.clientTop || 0) + offset.top + }; + } + + /** + * Returns style attribute value of a given element + * @memberOf fabric.util + * @param {HTMLElement} element Element to get style attribute for + * @param {String} attr Style attribute to get for element + * @return {String} Style attribute value of the given element. + */ + var getElementStyle; + if (fabric.document.defaultView && fabric.document.defaultView.getComputedStyle) { + getElementStyle = function(element, attr) { + var style = fabric.document.defaultView.getComputedStyle(element, null); + return style ? style[attr] : undefined; + }; + } else { - PrototypeOfArrayIteratorPrototype = getPrototypeOf(getPrototypeOf(arrayIterator)); - if (PrototypeOfArrayIteratorPrototype !== Object.prototype) IteratorPrototype = PrototypeOfArrayIteratorPrototype; + getElementStyle = function(element, attr) { + var value = element.style[attr]; + if (!value && element.currentStyle) { + value = element.currentStyle[attr]; + } + return value; + }; } -} -var NEW_ITERATOR_PROTOTYPE = IteratorPrototype == undefined || fails(function () { - var test = {}; - // FF44- legacy iterators case - return IteratorPrototype[ITERATOR].call(test) !== test; -}); + (function () { + var style = fabric.document.documentElement.style, + selectProp = 'userSelect' in style + ? 'userSelect' + : 'MozUserSelect' in style + ? 'MozUserSelect' + : 'WebkitUserSelect' in style + ? 'WebkitUserSelect' + : 'KhtmlUserSelect' in style + ? 'KhtmlUserSelect' + : ''; -if (NEW_ITERATOR_PROTOTYPE) IteratorPrototype = {}; + /** + * Makes element unselectable + * @memberOf fabric.util + * @param {HTMLElement} element Element to make unselectable + * @return {HTMLElement} Element that was passed in + */ + function makeElementUnselectable(element) { + if (typeof element.onselectstart !== 'undefined') { + element.onselectstart = fabric.util.falseFunction; + } + if (selectProp) { + element.style[selectProp] = 'none'; + } + else if (typeof element.unselectable === 'string') { + element.unselectable = 'on'; + } + return element; + } -// 25.1.2.1.1 %IteratorPrototype%[@@iterator]() -if ((!IS_PURE || NEW_ITERATOR_PROTOTYPE) && !has(IteratorPrototype, ITERATOR)) { - createNonEnumerableProperty(IteratorPrototype, ITERATOR, returnThis); -} + /** + * Makes element selectable + * @memberOf fabric.util + * @param {HTMLElement} element Element to make selectable + * @return {HTMLElement} Element that was passed in + */ + function makeElementSelectable(element) { + if (typeof element.onselectstart !== 'undefined') { + element.onselectstart = null; + } + if (selectProp) { + element.style[selectProp] = ''; + } + else if (typeof element.unselectable === 'string') { + element.unselectable = ''; + } + return element; + } -module.exports = { - IteratorPrototype: IteratorPrototype, - BUGGY_SAFARI_ITERATORS: BUGGY_SAFARI_ITERATORS -}; + fabric.util.makeElementUnselectable = makeElementUnselectable; + fabric.util.makeElementSelectable = makeElementSelectable; + })(); + function getNodeCanvas(element) { + var impl = fabric.jsdomImplForWrapper(element); + return impl._canvas || impl._image; + }; -/***/ }), + function cleanUpJsdomNode(element) { + if (!fabric.isLikelyNode) { + return; + } + var impl = fabric.jsdomImplForWrapper(element); + if (impl) { + impl._image = null; + impl._canvas = null; + // unsure if necessary + impl._currentSrc = null; + impl._attributes = null; + impl._classList = null; + } + } -/***/ "./node_modules/core-js-pure/internals/iterators.js": -/*!**********************************************************!*\ - !*** ./node_modules/core-js-pure/internals/iterators.js ***! - \**********************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { + function setImageSmoothing(ctx, value) { + ctx.imageSmoothingEnabled = ctx.imageSmoothingEnabled || ctx.webkitImageSmoothingEnabled + || ctx.mozImageSmoothingEnabled || ctx.msImageSmoothingEnabled || ctx.oImageSmoothingEnabled; + ctx.imageSmoothingEnabled = value; + } -module.exports = {}; + /** + * setImageSmoothing sets the context imageSmoothingEnabled property. + * Used by canvas and by ImageObject. + * @memberOf fabric.util + * @since 4.0.0 + * @param {HTMLRenderingContext2D} ctx to set on + * @param {Boolean} value true or false + */ + fabric.util.setImageSmoothing = setImageSmoothing; + fabric.util.getById = getById; + fabric.util.toArray = toArray; + fabric.util.addClass = addClass; + fabric.util.makeElement = makeElement; + fabric.util.wrapElement = wrapElement; + fabric.util.getScrollLeftTop = getScrollLeftTop; + fabric.util.getElementOffset = getElementOffset; + fabric.util.getNodeCanvas = getNodeCanvas; + fabric.util.cleanUpJsdomNode = cleanUpJsdomNode; +})(); -/***/ }), -/***/ "./node_modules/core-js-pure/internals/microtask.js": -/*!**********************************************************!*\ - !*** ./node_modules/core-js-pure/internals/microtask.js ***! - \**********************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +(function() { -var global = __webpack_require__(/*! ../internals/global */ "./node_modules/core-js-pure/internals/global.js"); -var getOwnPropertyDescriptor = __webpack_require__(/*! ../internals/object-get-own-property-descriptor */ "./node_modules/core-js-pure/internals/object-get-own-property-descriptor.js").f; -var macrotask = __webpack_require__(/*! ../internals/task */ "./node_modules/core-js-pure/internals/task.js").set; -var IS_IOS = __webpack_require__(/*! ../internals/engine-is-ios */ "./node_modules/core-js-pure/internals/engine-is-ios.js"); -var IS_WEBOS_WEBKIT = __webpack_require__(/*! ../internals/engine-is-webos-webkit */ "./node_modules/core-js-pure/internals/engine-is-webos-webkit.js"); -var IS_NODE = __webpack_require__(/*! ../internals/engine-is-node */ "./node_modules/core-js-pure/internals/engine-is-node.js"); + function addParamToUrl(url, param) { + return url + (/\?/.test(url) ? '&' : '?') + param; + } -var MutationObserver = global.MutationObserver || global.WebKitMutationObserver; -var document = global.document; -var process = global.process; -var Promise = global.Promise; -// Node.js 11 shows ExperimentalWarning on getting `queueMicrotask` -var queueMicrotaskDescriptor = getOwnPropertyDescriptor(global, 'queueMicrotask'); -var queueMicrotask = queueMicrotaskDescriptor && queueMicrotaskDescriptor.value; + function emptyFn() { } -var flush, head, last, notify, toggle, node, promise, then; + /** + * Cross-browser abstraction for sending XMLHttpRequest + * @memberOf fabric.util + * @param {String} url URL to send XMLHttpRequest to + * @param {Object} [options] Options object + * @param {String} [options.method="GET"] + * @param {String} [options.parameters] parameters to append to url in GET or in body + * @param {String} [options.body] body to send with POST or PUT request + * @param {Function} options.onComplete Callback to invoke when request is completed + * @return {XMLHttpRequest} request + */ + function request(url, options) { + options || (options = { }); -// modern engines have queueMicrotask method -if (!queueMicrotask) { - flush = function () { - var parent, fn; - if (IS_NODE && (parent = process.domain)) parent.exit(); - while (head) { - fn = head.fn; - head = head.next; - try { - fn(); - } catch (error) { - if (head) notify(); - else last = undefined; - throw error; - } - } last = undefined; - if (parent) parent.enter(); - }; + var method = options.method ? options.method.toUpperCase() : 'GET', + onComplete = options.onComplete || function() { }, + xhr = new fabric.window.XMLHttpRequest(), + body = options.body || options.parameters; - // browsers with MutationObserver, except iOS - https://github.com/zloirock/core-js/issues/339 - // also except WebOS Webkit https://github.com/zloirock/core-js/issues/898 - if (!IS_IOS && !IS_NODE && !IS_WEBOS_WEBKIT && MutationObserver && document) { - toggle = true; - node = document.createTextNode(''); - new MutationObserver(flush).observe(node, { characterData: true }); - notify = function () { - node.data = toggle = !toggle; - }; - // environments with maybe non-completely correct, but existent Promise - } else if (Promise && Promise.resolve) { - // Promise.resolve without an argument throws an error in LG WebOS 2 - promise = Promise.resolve(undefined); - // workaround of WebKit ~ iOS Safari 10.1 bug - promise.constructor = Promise; - then = promise.then; - notify = function () { - then.call(promise, flush); - }; - // Node.js without promises - } else if (IS_NODE) { - notify = function () { - process.nextTick(flush); - }; - // for other environments - macrotask based on: - // - setImmediate - // - MessageChannel - // - window.postMessag - // - onreadystatechange - // - setTimeout - } else { - notify = function () { - // strange IE + webpack dev server bug - use .call(global) - macrotask.call(global, flush); + /** @ignore */ + xhr.onreadystatechange = function() { + if (xhr.readyState === 4) { + onComplete(xhr); + xhr.onreadystatechange = emptyFn; + } }; - } -} -module.exports = queueMicrotask || function (fn) { - var task = { fn: fn, next: undefined }; - if (last) last.next = task; - if (!head) { - head = task; - notify(); - } last = task; -}; + if (method === 'GET') { + body = null; + if (typeof options.parameters === 'string') { + url = addParamToUrl(url, options.parameters); + } + } + xhr.open(method, url, true); -/***/ }), + if (method === 'POST' || method === 'PUT') { + xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + } -/***/ "./node_modules/core-js-pure/internals/native-promise-constructor.js": -/*!***************************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/native-promise-constructor.js ***! - \***************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + xhr.send(body); + return xhr; + } -var global = __webpack_require__(/*! ../internals/global */ "./node_modules/core-js-pure/internals/global.js"); + fabric.util.request = request; +})(); -module.exports = global.Promise; +/** + * Wrapper around `console.log` (when available) + * @param {*} [values] Values to log + */ +fabric.log = console.log; -/***/ }), +/** + * Wrapper around `console.warn` (when available) + * @param {*} [values] Values to log as a warning + */ +fabric.warn = console.warn; -/***/ "./node_modules/core-js-pure/internals/native-symbol.js": -/*!**************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/native-symbol.js ***! - \**************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { -/* eslint-disable es/no-symbol -- required for testing */ -var V8_VERSION = __webpack_require__(/*! ../internals/engine-v8-version */ "./node_modules/core-js-pure/internals/engine-v8-version.js"); -var fails = __webpack_require__(/*! ../internals/fails */ "./node_modules/core-js-pure/internals/fails.js"); +(function() { -// eslint-disable-next-line es/no-object-getownpropertysymbols -- required for testing -module.exports = !!Object.getOwnPropertySymbols && !fails(function () { - return !String(Symbol()) || - // Chrome 38 Symbol has incorrect toString conversion - // Chrome 38-40 symbols are not inherited from DOM collections prototypes to instances - !Symbol.sham && V8_VERSION && V8_VERSION < 41; -}); + function noop() { + return false; + } + function defaultEasing(t, b, c, d) { + return -c * Math.cos(t / d * (Math.PI / 2)) + c + b; + } -/***/ }), + /** + * Changes value from one to another within certain period of time, invoking callbacks as value is being changed. + * @memberOf fabric.util + * @param {Object} [options] Animation options + * @param {Function} [options.onChange] Callback; invoked on every value change + * @param {Function} [options.onComplete] Callback; invoked when value change is completed + * @param {Number} [options.startValue=0] Starting value + * @param {Number} [options.endValue=100] Ending value + * @param {Number} [options.byValue=100] Value to modify the property by + * @param {Function} [options.easing] Easing function + * @param {Number} [options.duration=500] Duration of change (in ms) + * @param {Function} [options.abort] Additional function with logic. If returns true, onComplete is called. + * @returns {Function} abort function + */ + function animate(options) { + var cancel = false; + requestAnimFrame(function(timestamp) { + options || (options = { }); + + var start = timestamp || +new Date(), + duration = options.duration || 500, + finish = start + duration, time, + onChange = options.onChange || noop, + abort = options.abort || noop, + onComplete = options.onComplete || noop, + easing = options.easing || defaultEasing, + startValue = 'startValue' in options ? options.startValue : 0, + endValue = 'endValue' in options ? options.endValue : 100, + byValue = options.byValue || endValue - startValue; + + options.onStart && options.onStart(); + + (function tick(ticktime) { + // TODO: move abort call after calculation + // and pass (current,valuePerc, timePerc) as arguments + time = ticktime || +new Date(); + var currentTime = time > finish ? duration : (time - start), + timePerc = currentTime / duration, + current = easing(currentTime, startValue, byValue, duration), + valuePerc = Math.abs((current - startValue) / byValue); + if (cancel) { + return; + } + if (abort(current, valuePerc, timePerc)) { + // remove this in 4.0 + // does to even make sense to abort and run onComplete? + onComplete(endValue, 1, 1); + return; + } + if (time > finish) { + onChange(endValue, 1, 1); + onComplete(endValue, 1, 1); + return; + } + else { + onChange(current, valuePerc, timePerc); + requestAnimFrame(tick); + } + })(start); + }); + return function() { + cancel = true; + }; + } -/***/ "./node_modules/core-js-pure/internals/native-weak-map.js": -/*!****************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/native-weak-map.js ***! - \****************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + var _requestAnimFrame = fabric.window.requestAnimationFrame || + fabric.window.webkitRequestAnimationFrame || + fabric.window.mozRequestAnimationFrame || + fabric.window.oRequestAnimationFrame || + fabric.window.msRequestAnimationFrame || + function(callback) { + return fabric.window.setTimeout(callback, 1000 / 60); + }; -var global = __webpack_require__(/*! ../internals/global */ "./node_modules/core-js-pure/internals/global.js"); -var inspectSource = __webpack_require__(/*! ../internals/inspect-source */ "./node_modules/core-js-pure/internals/inspect-source.js"); + var _cancelAnimFrame = fabric.window.cancelAnimationFrame || fabric.window.clearTimeout; -var WeakMap = global.WeakMap; + /** + * requestAnimationFrame polyfill based on http://paulirish.com/2011/requestanimationframe-for-smart-animating/ + * In order to get a precise start time, `requestAnimFrame` should be called as an entry into the method + * @memberOf fabric.util + * @param {Function} callback Callback to invoke + * @param {DOMElement} element optional Element to associate with animation + */ + function requestAnimFrame() { + return _requestAnimFrame.apply(fabric.window, arguments); + } -module.exports = typeof WeakMap === 'function' && /native code/.test(inspectSource(WeakMap)); + function cancelAnimFrame() { + return _cancelAnimFrame.apply(fabric.window, arguments); + } + fabric.util.animate = animate; + fabric.util.requestAnimFrame = requestAnimFrame; + fabric.util.cancelAnimFrame = cancelAnimFrame; +})(); -/***/ }), -/***/ "./node_modules/core-js-pure/internals/new-promise-capability.js": -/*!***********************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/new-promise-capability.js ***! - \***********************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +(function() { + // Calculate an in-between color. Returns a "rgba()" string. + // Credit: Edwin Martin + // http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors.js + function calculateColor(begin, end, pos) { + var color = 'rgba(' + + parseInt((begin[0] + pos * (end[0] - begin[0])), 10) + ',' + + parseInt((begin[1] + pos * (end[1] - begin[1])), 10) + ',' + + parseInt((begin[2] + pos * (end[2] - begin[2])), 10); -"use strict"; + color += ',' + (begin && end ? parseFloat(begin[3] + pos * (end[3] - begin[3])) : 1); + color += ')'; + return color; + } -var aFunction = __webpack_require__(/*! ../internals/a-function */ "./node_modules/core-js-pure/internals/a-function.js"); + /** + * Changes the color from one to another within certain period of time, invoking callbacks as value is being changed. + * @memberOf fabric.util + * @param {String} fromColor The starting color in hex or rgb(a) format. + * @param {String} toColor The starting color in hex or rgb(a) format. + * @param {Number} [duration] Duration of change (in ms). + * @param {Object} [options] Animation options + * @param {Function} [options.onChange] Callback; invoked on every value change + * @param {Function} [options.onComplete] Callback; invoked when value change is completed + * @param {Function} [options.colorEasing] Easing function. Note that this function only take two arguments (currentTime, duration). Thus the regular animation easing functions cannot be used. + * @param {Function} [options.abort] Additional function with logic. If returns true, onComplete is called. + * @returns {Function} abort function + */ + function animateColor(fromColor, toColor, duration, options) { + var startColor = new fabric.Color(fromColor).getSource(), + endColor = new fabric.Color(toColor).getSource(), + originalOnComplete = options.onComplete, + originalOnChange = options.onChange; + options = options || {}; + + return fabric.util.animate(fabric.util.object.extend(options, { + duration: duration || 500, + startValue: startColor, + endValue: endColor, + byValue: endColor, + easing: function (currentTime, startValue, byValue, duration) { + var posValue = options.colorEasing + ? options.colorEasing(currentTime, duration) + : 1 - Math.cos(currentTime / duration * (Math.PI / 2)); + return calculateColor(startValue, byValue, posValue); + }, + // has to take in account for color restoring; + onComplete: function(current, valuePerc, timePerc) { + if (originalOnComplete) { + return originalOnComplete( + calculateColor(endColor, endColor, 0), + valuePerc, + timePerc + ); + } + }, + onChange: function(current, valuePerc, timePerc) { + if (originalOnChange) { + if (Array.isArray(current)) { + return originalOnChange( + calculateColor(current, current, 0), + valuePerc, + timePerc + ); + } + originalOnChange(current, valuePerc, timePerc); + } + } + })); + } -var PromiseCapability = function (C) { - var resolve, reject; - this.promise = new C(function ($$resolve, $$reject) { - if (resolve !== undefined || reject !== undefined) throw TypeError('Bad Promise constructor'); - resolve = $$resolve; - reject = $$reject; - }); - this.resolve = aFunction(resolve); - this.reject = aFunction(reject); -}; + fabric.util.animateColor = animateColor; -// 25.4.1.5 NewPromiseCapability(C) -module.exports.f = function (C) { - return new PromiseCapability(C); -}; +})(); -/***/ }), +(function() { -/***/ "./node_modules/core-js-pure/internals/object-create.js": -/*!**************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/object-create.js ***! - \**************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + function normalize(a, c, p, s) { + if (a < Math.abs(c)) { + a = c; + s = p / 4; + } + else { + //handle the 0/0 case: + if (c === 0 && a === 0) { + s = p / (2 * Math.PI) * Math.asin(1); + } + else { + s = p / (2 * Math.PI) * Math.asin(c / a); + } + } + return { a: a, c: c, p: p, s: s }; + } -var anObject = __webpack_require__(/*! ../internals/an-object */ "./node_modules/core-js-pure/internals/an-object.js"); -var defineProperties = __webpack_require__(/*! ../internals/object-define-properties */ "./node_modules/core-js-pure/internals/object-define-properties.js"); -var enumBugKeys = __webpack_require__(/*! ../internals/enum-bug-keys */ "./node_modules/core-js-pure/internals/enum-bug-keys.js"); -var hiddenKeys = __webpack_require__(/*! ../internals/hidden-keys */ "./node_modules/core-js-pure/internals/hidden-keys.js"); -var html = __webpack_require__(/*! ../internals/html */ "./node_modules/core-js-pure/internals/html.js"); -var documentCreateElement = __webpack_require__(/*! ../internals/document-create-element */ "./node_modules/core-js-pure/internals/document-create-element.js"); -var sharedKey = __webpack_require__(/*! ../internals/shared-key */ "./node_modules/core-js-pure/internals/shared-key.js"); + function elastic(opts, t, d) { + return opts.a * + Math.pow(2, 10 * (t -= 1)) * + Math.sin( (t * d - opts.s) * (2 * Math.PI) / opts.p ); + } -var GT = '>'; -var LT = '<'; -var PROTOTYPE = 'prototype'; -var SCRIPT = 'script'; -var IE_PROTO = sharedKey('IE_PROTO'); + /** + * Cubic easing out + * @memberOf fabric.util.ease + */ + function easeOutCubic(t, b, c, d) { + return c * ((t = t / d - 1) * t * t + 1) + b; + } -var EmptyConstructor = function () { /* empty */ }; + /** + * Cubic easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutCubic(t, b, c, d) { + t /= d / 2; + if (t < 1) { + return c / 2 * t * t * t + b; + } + return c / 2 * ((t -= 2) * t * t + 2) + b; + } -var scriptTag = function (content) { - return LT + SCRIPT + GT + content + LT + '/' + SCRIPT + GT; -}; + /** + * Quartic easing in + * @memberOf fabric.util.ease + */ + function easeInQuart(t, b, c, d) { + return c * (t /= d) * t * t * t + b; + } -// Create object with fake `null` prototype: use ActiveX Object with cleared prototype -var NullProtoObjectViaActiveX = function (activeXDocument) { - activeXDocument.write(scriptTag('')); - activeXDocument.close(); - var temp = activeXDocument.parentWindow.Object; - activeXDocument = null; // avoid memory leak - return temp; -}; + /** + * Quartic easing out + * @memberOf fabric.util.ease + */ + function easeOutQuart(t, b, c, d) { + return -c * ((t = t / d - 1) * t * t * t - 1) + b; + } -// Create object with fake `null` prototype: use iframe Object with cleared prototype -var NullProtoObjectViaIFrame = function () { - // Thrash, waste and sodomy: IE GC bug - var iframe = documentCreateElement('iframe'); - var JS = 'java' + SCRIPT + ':'; - var iframeDocument; - iframe.style.display = 'none'; - html.appendChild(iframe); - // https://github.com/zloirock/core-js/issues/475 - iframe.src = String(JS); - iframeDocument = iframe.contentWindow.document; - iframeDocument.open(); - iframeDocument.write(scriptTag('document.F=Object')); - iframeDocument.close(); - return iframeDocument.F; -}; + /** + * Quartic easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutQuart(t, b, c, d) { + t /= d / 2; + if (t < 1) { + return c / 2 * t * t * t * t + b; + } + return -c / 2 * ((t -= 2) * t * t * t - 2) + b; + } -// Check for document.domain and active x support -// No need to use active x approach when document.domain is not set -// see https://github.com/es-shims/es5-shim/issues/150 -// variation of https://github.com/kitcambridge/es5-shim/commit/4f738ac066346 -// avoid IE GC bug -var activeXDocument; -var NullProtoObject = function () { - try { - /* global ActiveXObject -- old IE */ - activeXDocument = document.domain && new ActiveXObject('htmlfile'); - } catch (error) { /* ignore */ } - NullProtoObject = activeXDocument ? NullProtoObjectViaActiveX(activeXDocument) : NullProtoObjectViaIFrame(); - var length = enumBugKeys.length; - while (length--) delete NullProtoObject[PROTOTYPE][enumBugKeys[length]]; - return NullProtoObject(); -}; + /** + * Quintic easing in + * @memberOf fabric.util.ease + */ + function easeInQuint(t, b, c, d) { + return c * (t /= d) * t * t * t * t + b; + } -hiddenKeys[IE_PROTO] = true; + /** + * Quintic easing out + * @memberOf fabric.util.ease + */ + function easeOutQuint(t, b, c, d) { + return c * ((t = t / d - 1) * t * t * t * t + 1) + b; + } -// `Object.create` method -// https://tc39.es/ecma262/#sec-object.create -module.exports = Object.create || function create(O, Properties) { - var result; - if (O !== null) { - EmptyConstructor[PROTOTYPE] = anObject(O); - result = new EmptyConstructor(); - EmptyConstructor[PROTOTYPE] = null; - // add "__proto__" for Object.getPrototypeOf polyfill - result[IE_PROTO] = O; - } else result = NullProtoObject(); - return Properties === undefined ? result : defineProperties(result, Properties); -}; + /** + * Quintic easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutQuint(t, b, c, d) { + t /= d / 2; + if (t < 1) { + return c / 2 * t * t * t * t * t + b; + } + return c / 2 * ((t -= 2) * t * t * t * t + 2) + b; + } + /** + * Sinusoidal easing in + * @memberOf fabric.util.ease + */ + function easeInSine(t, b, c, d) { + return -c * Math.cos(t / d * (Math.PI / 2)) + c + b; + } -/***/ }), + /** + * Sinusoidal easing out + * @memberOf fabric.util.ease + */ + function easeOutSine(t, b, c, d) { + return c * Math.sin(t / d * (Math.PI / 2)) + b; + } -/***/ "./node_modules/core-js-pure/internals/object-define-properties.js": -/*!*************************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/object-define-properties.js ***! - \*************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Sinusoidal easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutSine(t, b, c, d) { + return -c / 2 * (Math.cos(Math.PI * t / d) - 1) + b; + } -var DESCRIPTORS = __webpack_require__(/*! ../internals/descriptors */ "./node_modules/core-js-pure/internals/descriptors.js"); -var definePropertyModule = __webpack_require__(/*! ../internals/object-define-property */ "./node_modules/core-js-pure/internals/object-define-property.js"); -var anObject = __webpack_require__(/*! ../internals/an-object */ "./node_modules/core-js-pure/internals/an-object.js"); -var objectKeys = __webpack_require__(/*! ../internals/object-keys */ "./node_modules/core-js-pure/internals/object-keys.js"); + /** + * Exponential easing in + * @memberOf fabric.util.ease + */ + function easeInExpo(t, b, c, d) { + return (t === 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b; + } -// `Object.defineProperties` method -// https://tc39.es/ecma262/#sec-object.defineproperties -// eslint-disable-next-line es/no-object-defineproperties -- safe -module.exports = DESCRIPTORS ? Object.defineProperties : function defineProperties(O, Properties) { - anObject(O); - var keys = objectKeys(Properties); - var length = keys.length; - var index = 0; - var key; - while (length > index) definePropertyModule.f(O, key = keys[index++], Properties[key]); - return O; -}; + /** + * Exponential easing out + * @memberOf fabric.util.ease + */ + function easeOutExpo(t, b, c, d) { + return (t === d) ? b + c : c * (-Math.pow(2, -10 * t / d) + 1) + b; + } + /** + * Exponential easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutExpo(t, b, c, d) { + if (t === 0) { + return b; + } + if (t === d) { + return b + c; + } + t /= d / 2; + if (t < 1) { + return c / 2 * Math.pow(2, 10 * (t - 1)) + b; + } + return c / 2 * (-Math.pow(2, -10 * --t) + 2) + b; + } -/***/ }), + /** + * Circular easing in + * @memberOf fabric.util.ease + */ + function easeInCirc(t, b, c, d) { + return -c * (Math.sqrt(1 - (t /= d) * t) - 1) + b; + } -/***/ "./node_modules/core-js-pure/internals/object-define-property.js": -/*!***********************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/object-define-property.js ***! - \***********************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Circular easing out + * @memberOf fabric.util.ease + */ + function easeOutCirc(t, b, c, d) { + return c * Math.sqrt(1 - (t = t / d - 1) * t) + b; + } -var DESCRIPTORS = __webpack_require__(/*! ../internals/descriptors */ "./node_modules/core-js-pure/internals/descriptors.js"); -var IE8_DOM_DEFINE = __webpack_require__(/*! ../internals/ie8-dom-define */ "./node_modules/core-js-pure/internals/ie8-dom-define.js"); -var anObject = __webpack_require__(/*! ../internals/an-object */ "./node_modules/core-js-pure/internals/an-object.js"); -var toPrimitive = __webpack_require__(/*! ../internals/to-primitive */ "./node_modules/core-js-pure/internals/to-primitive.js"); + /** + * Circular easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutCirc(t, b, c, d) { + t /= d / 2; + if (t < 1) { + return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b; + } + return c / 2 * (Math.sqrt(1 - (t -= 2) * t) + 1) + b; + } -// eslint-disable-next-line es/no-object-defineproperty -- safe -var $defineProperty = Object.defineProperty; + /** + * Elastic easing in + * @memberOf fabric.util.ease + */ + function easeInElastic(t, b, c, d) { + var s = 1.70158, p = 0, a = c; + if (t === 0) { + return b; + } + t /= d; + if (t === 1) { + return b + c; + } + if (!p) { + p = d * 0.3; + } + var opts = normalize(a, c, p, s); + return -elastic(opts, t, d) + b; + } -// `Object.defineProperty` method -// https://tc39.es/ecma262/#sec-object.defineproperty -exports.f = DESCRIPTORS ? $defineProperty : function defineProperty(O, P, Attributes) { - anObject(O); - P = toPrimitive(P, true); - anObject(Attributes); - if (IE8_DOM_DEFINE) try { - return $defineProperty(O, P, Attributes); - } catch (error) { /* empty */ } - if ('get' in Attributes || 'set' in Attributes) throw TypeError('Accessors not supported'); - if ('value' in Attributes) O[P] = Attributes.value; - return O; -}; + /** + * Elastic easing out + * @memberOf fabric.util.ease + */ + function easeOutElastic(t, b, c, d) { + var s = 1.70158, p = 0, a = c; + if (t === 0) { + return b; + } + t /= d; + if (t === 1) { + return b + c; + } + if (!p) { + p = d * 0.3; + } + var opts = normalize(a, c, p, s); + return opts.a * Math.pow(2, -10 * t) * Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) + opts.c + b; + } + /** + * Elastic easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutElastic(t, b, c, d) { + var s = 1.70158, p = 0, a = c; + if (t === 0) { + return b; + } + t /= d / 2; + if (t === 2) { + return b + c; + } + if (!p) { + p = d * (0.3 * 1.5); + } + var opts = normalize(a, c, p, s); + if (t < 1) { + return -0.5 * elastic(opts, t, d) + b; + } + return opts.a * Math.pow(2, -10 * (t -= 1)) * + Math.sin((t * d - opts.s) * (2 * Math.PI) / opts.p ) * 0.5 + opts.c + b; + } -/***/ }), + /** + * Backwards easing in + * @memberOf fabric.util.ease + */ + function easeInBack(t, b, c, d, s) { + if (s === undefined) { + s = 1.70158; + } + return c * (t /= d) * t * ((s + 1) * t - s) + b; + } -/***/ "./node_modules/core-js-pure/internals/object-get-own-property-descriptor.js": -/*!***********************************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/object-get-own-property-descriptor.js ***! - \***********************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Backwards easing out + * @memberOf fabric.util.ease + */ + function easeOutBack(t, b, c, d, s) { + if (s === undefined) { + s = 1.70158; + } + return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; + } -var DESCRIPTORS = __webpack_require__(/*! ../internals/descriptors */ "./node_modules/core-js-pure/internals/descriptors.js"); -var propertyIsEnumerableModule = __webpack_require__(/*! ../internals/object-property-is-enumerable */ "./node_modules/core-js-pure/internals/object-property-is-enumerable.js"); -var createPropertyDescriptor = __webpack_require__(/*! ../internals/create-property-descriptor */ "./node_modules/core-js-pure/internals/create-property-descriptor.js"); -var toIndexedObject = __webpack_require__(/*! ../internals/to-indexed-object */ "./node_modules/core-js-pure/internals/to-indexed-object.js"); -var toPrimitive = __webpack_require__(/*! ../internals/to-primitive */ "./node_modules/core-js-pure/internals/to-primitive.js"); -var has = __webpack_require__(/*! ../internals/has */ "./node_modules/core-js-pure/internals/has.js"); -var IE8_DOM_DEFINE = __webpack_require__(/*! ../internals/ie8-dom-define */ "./node_modules/core-js-pure/internals/ie8-dom-define.js"); + /** + * Backwards easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutBack(t, b, c, d, s) { + if (s === undefined) { + s = 1.70158; + } + t /= d / 2; + if (t < 1) { + return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b; + } + return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b; + } -// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe -var $getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor; + /** + * Bouncing easing in + * @memberOf fabric.util.ease + */ + function easeInBounce(t, b, c, d) { + return c - easeOutBounce (d - t, 0, c, d) + b; + } -// `Object.getOwnPropertyDescriptor` method -// https://tc39.es/ecma262/#sec-object.getownpropertydescriptor -exports.f = DESCRIPTORS ? $getOwnPropertyDescriptor : function getOwnPropertyDescriptor(O, P) { - O = toIndexedObject(O); - P = toPrimitive(P, true); - if (IE8_DOM_DEFINE) try { - return $getOwnPropertyDescriptor(O, P); - } catch (error) { /* empty */ } - if (has(O, P)) return createPropertyDescriptor(!propertyIsEnumerableModule.f.call(O, P), O[P]); -}; + /** + * Bouncing easing out + * @memberOf fabric.util.ease + */ + function easeOutBounce(t, b, c, d) { + if ((t /= d) < (1 / 2.75)) { + return c * (7.5625 * t * t) + b; + } + else if (t < (2 / 2.75)) { + return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b; + } + else if (t < (2.5 / 2.75)) { + return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b; + } + else { + return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b; + } + } + /** + * Bouncing easing in and out + * @memberOf fabric.util.ease + */ + function easeInOutBounce(t, b, c, d) { + if (t < d / 2) { + return easeInBounce (t * 2, 0, c, d) * 0.5 + b; + } + return easeOutBounce(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b; + } -/***/ }), + /** + * Easing functions + * See Easing Equations by Robert Penner + * @namespace fabric.util.ease + */ + fabric.util.ease = { -/***/ "./node_modules/core-js-pure/internals/object-get-prototype-of.js": -/*!************************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/object-get-prototype-of.js ***! - \************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Quadratic easing in + * @memberOf fabric.util.ease + */ + easeInQuad: function(t, b, c, d) { + return c * (t /= d) * t + b; + }, -var has = __webpack_require__(/*! ../internals/has */ "./node_modules/core-js-pure/internals/has.js"); -var toObject = __webpack_require__(/*! ../internals/to-object */ "./node_modules/core-js-pure/internals/to-object.js"); -var sharedKey = __webpack_require__(/*! ../internals/shared-key */ "./node_modules/core-js-pure/internals/shared-key.js"); -var CORRECT_PROTOTYPE_GETTER = __webpack_require__(/*! ../internals/correct-prototype-getter */ "./node_modules/core-js-pure/internals/correct-prototype-getter.js"); + /** + * Quadratic easing out + * @memberOf fabric.util.ease + */ + easeOutQuad: function(t, b, c, d) { + return -c * (t /= d) * (t - 2) + b; + }, -var IE_PROTO = sharedKey('IE_PROTO'); -var ObjectPrototype = Object.prototype; + /** + * Quadratic easing in and out + * @memberOf fabric.util.ease + */ + easeInOutQuad: function(t, b, c, d) { + t /= (d / 2); + if (t < 1) { + return c / 2 * t * t + b; + } + return -c / 2 * ((--t) * (t - 2) - 1) + b; + }, -// `Object.getPrototypeOf` method -// https://tc39.es/ecma262/#sec-object.getprototypeof -// eslint-disable-next-line es/no-object-getprototypeof -- safe -module.exports = CORRECT_PROTOTYPE_GETTER ? Object.getPrototypeOf : function (O) { - O = toObject(O); - if (has(O, IE_PROTO)) return O[IE_PROTO]; - if (typeof O.constructor == 'function' && O instanceof O.constructor) { - return O.constructor.prototype; - } return O instanceof Object ? ObjectPrototype : null; -}; + /** + * Cubic easing in + * @memberOf fabric.util.ease + */ + easeInCubic: function(t, b, c, d) { + return c * (t /= d) * t * t + b; + }, + easeOutCubic: easeOutCubic, + easeInOutCubic: easeInOutCubic, + easeInQuart: easeInQuart, + easeOutQuart: easeOutQuart, + easeInOutQuart: easeInOutQuart, + easeInQuint: easeInQuint, + easeOutQuint: easeOutQuint, + easeInOutQuint: easeInOutQuint, + easeInSine: easeInSine, + easeOutSine: easeOutSine, + easeInOutSine: easeInOutSine, + easeInExpo: easeInExpo, + easeOutExpo: easeOutExpo, + easeInOutExpo: easeInOutExpo, + easeInCirc: easeInCirc, + easeOutCirc: easeOutCirc, + easeInOutCirc: easeInOutCirc, + easeInElastic: easeInElastic, + easeOutElastic: easeOutElastic, + easeInOutElastic: easeInOutElastic, + easeInBack: easeInBack, + easeOutBack: easeOutBack, + easeInOutBack: easeInOutBack, + easeInBounce: easeInBounce, + easeOutBounce: easeOutBounce, + easeInOutBounce: easeInOutBounce + }; -/***/ }), +})(); -/***/ "./node_modules/core-js-pure/internals/object-keys-internal.js": -/*!*********************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/object-keys-internal.js ***! - \*********************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { -var has = __webpack_require__(/*! ../internals/has */ "./node_modules/core-js-pure/internals/has.js"); -var toIndexedObject = __webpack_require__(/*! ../internals/to-indexed-object */ "./node_modules/core-js-pure/internals/to-indexed-object.js"); -var indexOf = __webpack_require__(/*! ../internals/array-includes */ "./node_modules/core-js-pure/internals/array-includes.js").indexOf; -var hiddenKeys = __webpack_require__(/*! ../internals/hidden-keys */ "./node_modules/core-js-pure/internals/hidden-keys.js"); +(function(global) { -module.exports = function (object, names) { - var O = toIndexedObject(object); - var i = 0; - var result = []; - var key; - for (key in O) !has(hiddenKeys, key) && has(O, key) && result.push(key); - // Don't enum bug & hidden keys - while (names.length > i) if (has(O, key = names[i++])) { - ~indexOf(result, key) || result.push(key); - } - return result; -}; + 'use strict'; + /** + * @name fabric + * @namespace + */ -/***/ }), + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + clone = fabric.util.object.clone, + toFixed = fabric.util.toFixed, + parseUnit = fabric.util.parseUnit, + multiplyTransformMatrices = fabric.util.multiplyTransformMatrices, + + svgValidTagNames = ['path', 'circle', 'polygon', 'polyline', 'ellipse', 'rect', 'line', + 'image', 'text'], + svgViewBoxElements = ['symbol', 'image', 'marker', 'pattern', 'view', 'svg'], + svgInvalidAncestors = ['pattern', 'defs', 'symbol', 'metadata', 'clipPath', 'mask', 'desc'], + svgValidParents = ['symbol', 'g', 'a', 'svg', 'clipPath', 'defs'], + + attributesMap = { + cx: 'left', + x: 'left', + r: 'radius', + cy: 'top', + y: 'top', + display: 'visible', + visibility: 'visible', + transform: 'transformMatrix', + 'fill-opacity': 'fillOpacity', + 'fill-rule': 'fillRule', + 'font-family': 'fontFamily', + 'font-size': 'fontSize', + 'font-style': 'fontStyle', + 'font-weight': 'fontWeight', + 'letter-spacing': 'charSpacing', + 'paint-order': 'paintFirst', + 'stroke-dasharray': 'strokeDashArray', + 'stroke-dashoffset': 'strokeDashOffset', + 'stroke-linecap': 'strokeLineCap', + 'stroke-linejoin': 'strokeLineJoin', + 'stroke-miterlimit': 'strokeMiterLimit', + 'stroke-opacity': 'strokeOpacity', + 'stroke-width': 'strokeWidth', + 'text-decoration': 'textDecoration', + 'text-anchor': 'textAnchor', + opacity: 'opacity', + 'clip-path': 'clipPath', + 'clip-rule': 'clipRule', + 'vector-effect': 'strokeUniform', + 'image-rendering': 'imageSmoothing', + }, -/***/ "./node_modules/core-js-pure/internals/object-keys.js": -/*!************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/object-keys.js ***! - \************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + colorAttributes = { + stroke: 'strokeOpacity', + fill: 'fillOpacity' + }, -var internalObjectKeys = __webpack_require__(/*! ../internals/object-keys-internal */ "./node_modules/core-js-pure/internals/object-keys-internal.js"); -var enumBugKeys = __webpack_require__(/*! ../internals/enum-bug-keys */ "./node_modules/core-js-pure/internals/enum-bug-keys.js"); + fSize = 'font-size', cPath = 'clip-path'; -// `Object.keys` method -// https://tc39.es/ecma262/#sec-object.keys -// eslint-disable-next-line es/no-object-keys -- safe -module.exports = Object.keys || function keys(O) { - return internalObjectKeys(O, enumBugKeys); -}; + fabric.svgValidTagNamesRegEx = getSvgRegex(svgValidTagNames); + fabric.svgViewBoxElementsRegEx = getSvgRegex(svgViewBoxElements); + fabric.svgInvalidAncestorsRegEx = getSvgRegex(svgInvalidAncestors); + fabric.svgValidParentsRegEx = getSvgRegex(svgValidParents); + fabric.cssRules = { }; + fabric.gradientDefs = { }; + fabric.clipPaths = { }; -/***/ }), + function normalizeAttr(attr) { + // transform attribute names + if (attr in attributesMap) { + return attributesMap[attr]; + } + return attr; + } -/***/ "./node_modules/core-js-pure/internals/object-property-is-enumerable.js": -/*!******************************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/object-property-is-enumerable.js ***! - \******************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + function normalizeValue(attr, value, parentAttributes, fontSize) { + var isArray = Object.prototype.toString.call(value) === '[object Array]', + parsed; -"use strict"; + if ((attr === 'fill' || attr === 'stroke') && value === 'none') { + value = ''; + } + else if (attr === 'strokeUniform') { + return (value === 'non-scaling-stroke'); + } + else if (attr === 'strokeDashArray') { + if (value === 'none') { + value = null; + } + else { + value = value.replace(/,/g, ' ').split(/\s+/).map(parseFloat); + } + } + else if (attr === 'transformMatrix') { + if (parentAttributes && parentAttributes.transformMatrix) { + value = multiplyTransformMatrices( + parentAttributes.transformMatrix, fabric.parseTransformAttribute(value)); + } + else { + value = fabric.parseTransformAttribute(value); + } + } + else if (attr === 'visible') { + value = value !== 'none' && value !== 'hidden'; + // display=none on parent element always takes precedence over child element + if (parentAttributes && parentAttributes.visible === false) { + value = false; + } + } + else if (attr === 'opacity') { + value = parseFloat(value); + if (parentAttributes && typeof parentAttributes.opacity !== 'undefined') { + value *= parentAttributes.opacity; + } + } + else if (attr === 'textAnchor' /* text-anchor */) { + value = value === 'start' ? 'left' : value === 'end' ? 'right' : 'center'; + } + else if (attr === 'charSpacing') { + // parseUnit returns px and we convert it to em + parsed = parseUnit(value, fontSize) / fontSize * 1000; + } + else if (attr === 'paintFirst') { + var fillIndex = value.indexOf('fill'); + var strokeIndex = value.indexOf('stroke'); + var value = 'fill'; + if (fillIndex > -1 && strokeIndex > -1 && strokeIndex < fillIndex) { + value = 'stroke'; + } + else if (fillIndex === -1 && strokeIndex > -1) { + value = 'stroke'; + } + } + else if (attr === 'href' || attr === 'xlink:href' || attr === 'font') { + return value; + } + else if (attr === 'imageSmoothing') { + return (value === 'optimizeQuality'); + } + else { + parsed = isArray ? value.map(parseUnit) : parseUnit(value, fontSize); + } -var $propertyIsEnumerable = {}.propertyIsEnumerable; -// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe -var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor; + return (!isArray && isNaN(parsed) ? value : parsed); + } -// Nashorn ~ JDK8 bug -var NASHORN_BUG = getOwnPropertyDescriptor && !$propertyIsEnumerable.call({ 1: 2 }, 1); + /** + * @private + */ + function getSvgRegex(arr) { + return new RegExp('^(' + arr.join('|') + ')\\b', 'i'); + } -// `Object.prototype.propertyIsEnumerable` method implementation -// https://tc39.es/ecma262/#sec-object.prototype.propertyisenumerable -exports.f = NASHORN_BUG ? function propertyIsEnumerable(V) { - var descriptor = getOwnPropertyDescriptor(this, V); - return !!descriptor && descriptor.enumerable; -} : $propertyIsEnumerable; + /** + * @private + * @param {Object} attributes Array of attributes to parse + */ + function _setStrokeFillOpacity(attributes) { + for (var attr in colorAttributes) { + if (typeof attributes[colorAttributes[attr]] === 'undefined' || attributes[attr] === '') { + continue; + } -/***/ }), + if (typeof attributes[attr] === 'undefined') { + if (!fabric.Object.prototype[attr]) { + continue; + } + attributes[attr] = fabric.Object.prototype[attr]; + } -/***/ "./node_modules/core-js-pure/internals/object-set-prototype-of.js": -/*!************************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/object-set-prototype-of.js ***! - \************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + if (attributes[attr].indexOf('url(') === 0) { + continue; + } -/* eslint-disable no-proto -- safe */ -var anObject = __webpack_require__(/*! ../internals/an-object */ "./node_modules/core-js-pure/internals/an-object.js"); -var aPossiblePrototype = __webpack_require__(/*! ../internals/a-possible-prototype */ "./node_modules/core-js-pure/internals/a-possible-prototype.js"); + var color = new fabric.Color(attributes[attr]); + attributes[attr] = color.setAlpha(toFixed(color.getAlpha() * attributes[colorAttributes[attr]], 2)).toRgba(); + } + return attributes; + } -// `Object.setPrototypeOf` method -// https://tc39.es/ecma262/#sec-object.setprototypeof -// Works with __proto__ only. Old v8 can't work with null proto objects. -// eslint-disable-next-line es/no-object-setprototypeof -- safe -module.exports = Object.setPrototypeOf || ('__proto__' in {} ? function () { - var CORRECT_SETTER = false; - var test = {}; - var setter; - try { - // eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe - setter = Object.getOwnPropertyDescriptor(Object.prototype, '__proto__').set; - setter.call(test, []); - CORRECT_SETTER = test instanceof Array; - } catch (error) { /* empty */ } - return function setPrototypeOf(O, proto) { - anObject(O); - aPossiblePrototype(proto); - if (CORRECT_SETTER) setter.call(O, proto); - else O.__proto__ = proto; - return O; - }; -}() : undefined); + /** + * @private + */ + function _getMultipleNodes(doc, nodeNames) { + var nodeName, nodeArray = [], nodeList, i, len; + for (i = 0, len = nodeNames.length; i < len; i++) { + nodeName = nodeNames[i]; + nodeList = doc.getElementsByTagName(nodeName); + nodeArray = nodeArray.concat(Array.prototype.slice.call(nodeList)); + } + return nodeArray; + } + /** + * Parses "transform" attribute, returning an array of values + * @static + * @function + * @memberOf fabric + * @param {String} attributeValue String containing attribute value + * @return {Array} Array of 6 elements representing transformation matrix + */ + fabric.parseTransformAttribute = (function() { + function rotateMatrix(matrix, args) { + var cos = fabric.util.cos(args[0]), sin = fabric.util.sin(args[0]), + x = 0, y = 0; + if (args.length === 3) { + x = args[1]; + y = args[2]; + } -/***/ }), + matrix[0] = cos; + matrix[1] = sin; + matrix[2] = -sin; + matrix[3] = cos; + matrix[4] = x - (cos * x - sin * y); + matrix[5] = y - (sin * x + cos * y); + } -/***/ "./node_modules/core-js-pure/internals/object-to-string.js": -/*!*****************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/object-to-string.js ***! - \*****************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + function scaleMatrix(matrix, args) { + var multiplierX = args[0], + multiplierY = (args.length === 2) ? args[1] : args[0]; -"use strict"; + matrix[0] = multiplierX; + matrix[3] = multiplierY; + } -var TO_STRING_TAG_SUPPORT = __webpack_require__(/*! ../internals/to-string-tag-support */ "./node_modules/core-js-pure/internals/to-string-tag-support.js"); -var classof = __webpack_require__(/*! ../internals/classof */ "./node_modules/core-js-pure/internals/classof.js"); + function skewMatrix(matrix, args, pos) { + matrix[pos] = Math.tan(fabric.util.degreesToRadians(args[0])); + } -// `Object.prototype.toString` method implementation -// https://tc39.es/ecma262/#sec-object.prototype.tostring -module.exports = TO_STRING_TAG_SUPPORT ? {}.toString : function toString() { - return '[object ' + classof(this) + ']'; -}; + function translateMatrix(matrix, args) { + matrix[4] = args[0]; + if (args.length === 2) { + matrix[5] = args[1]; + } + } + // identity matrix + var iMatrix = fabric.iMatrix, -/***/ }), + // == begin transform regexp + number = fabric.reNum, -/***/ "./node_modules/core-js-pure/internals/path.js": -/*!*****************************************************!*\ - !*** ./node_modules/core-js-pure/internals/path.js ***! - \*****************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { + commaWsp = fabric.commaWsp, -module.exports = {}; + skewX = '(?:(skewX)\\s*\\(\\s*(' + number + ')\\s*\\))', + skewY = '(?:(skewY)\\s*\\(\\s*(' + number + ')\\s*\\))', -/***/ }), + rotate = '(?:(rotate)\\s*\\(\\s*(' + number + ')(?:' + + commaWsp + '(' + number + ')' + + commaWsp + '(' + number + '))?\\s*\\))', -/***/ "./node_modules/core-js-pure/internals/perform.js": -/*!********************************************************!*\ - !*** ./node_modules/core-js-pure/internals/perform.js ***! - \********************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { + scale = '(?:(scale)\\s*\\(\\s*(' + number + ')(?:' + + commaWsp + '(' + number + '))?\\s*\\))', -module.exports = function (exec) { - try { - return { error: false, value: exec() }; - } catch (error) { - return { error: true, value: error }; - } -}; + translate = '(?:(translate)\\s*\\(\\s*(' + number + ')(?:' + + commaWsp + '(' + number + '))?\\s*\\))', + matrix = '(?:(matrix)\\s*\\(\\s*' + + '(' + number + ')' + commaWsp + + '(' + number + ')' + commaWsp + + '(' + number + ')' + commaWsp + + '(' + number + ')' + commaWsp + + '(' + number + ')' + commaWsp + + '(' + number + ')' + + '\\s*\\))', -/***/ }), + transform = '(?:' + + matrix + '|' + + translate + '|' + + scale + '|' + + rotate + '|' + + skewX + '|' + + skewY + + ')', -/***/ "./node_modules/core-js-pure/internals/promise-resolve.js": -/*!****************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/promise-resolve.js ***! - \****************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + transforms = '(?:' + transform + '(?:' + commaWsp + '*' + transform + ')*' + ')', -var anObject = __webpack_require__(/*! ../internals/an-object */ "./node_modules/core-js-pure/internals/an-object.js"); -var isObject = __webpack_require__(/*! ../internals/is-object */ "./node_modules/core-js-pure/internals/is-object.js"); -var newPromiseCapability = __webpack_require__(/*! ../internals/new-promise-capability */ "./node_modules/core-js-pure/internals/new-promise-capability.js"); + transformList = '^\\s*(?:' + transforms + '?)\\s*$', -module.exports = function (C, x) { - anObject(C); - if (isObject(x) && x.constructor === C) return x; - var promiseCapability = newPromiseCapability.f(C); - var resolve = promiseCapability.resolve; - resolve(x); - return promiseCapability.promise; -}; + // http://www.w3.org/TR/SVG/coords.html#TransformAttribute + reTransformList = new RegExp(transformList), + // == end transform regexp + reTransform = new RegExp(transform, 'g'); -/***/ }), + return function(attributeValue) { -/***/ "./node_modules/core-js-pure/internals/redefine-all.js": -/*!*************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/redefine-all.js ***! - \*************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + // start with identity matrix + var matrix = iMatrix.concat(), + matrices = []; -var redefine = __webpack_require__(/*! ../internals/redefine */ "./node_modules/core-js-pure/internals/redefine.js"); + // return if no argument was given or + // an argument does not match transform attribute regexp + if (!attributeValue || (attributeValue && !reTransformList.test(attributeValue))) { + return matrix; + } -module.exports = function (target, src, options) { - for (var key in src) { - if (options && options.unsafe && target[key]) target[key] = src[key]; - else redefine(target, key, src[key], options); - } return target; -}; + attributeValue.replace(reTransform, function(match) { + var m = new RegExp(transform).exec(match).filter(function (match) { + // match !== '' && match != null + return (!!match); + }), + operation = m[1], + args = m.slice(2).map(parseFloat); -/***/ }), + switch (operation) { + case 'translate': + translateMatrix(matrix, args); + break; + case 'rotate': + args[0] = fabric.util.degreesToRadians(args[0]); + rotateMatrix(matrix, args); + break; + case 'scale': + scaleMatrix(matrix, args); + break; + case 'skewX': + skewMatrix(matrix, args, 2); + break; + case 'skewY': + skewMatrix(matrix, args, 1); + break; + case 'matrix': + matrix = args; + break; + } -/***/ "./node_modules/core-js-pure/internals/redefine.js": -/*!*********************************************************!*\ - !*** ./node_modules/core-js-pure/internals/redefine.js ***! - \*********************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + // snapshot current matrix into matrices array + matrices.push(matrix.concat()); + // reset + matrix = iMatrix.concat(); + }); -var createNonEnumerableProperty = __webpack_require__(/*! ../internals/create-non-enumerable-property */ "./node_modules/core-js-pure/internals/create-non-enumerable-property.js"); + var combinedMatrix = matrices[0]; + while (matrices.length > 1) { + matrices.shift(); + combinedMatrix = fabric.util.multiplyTransformMatrices(combinedMatrix, matrices[0]); + } + return combinedMatrix; + }; + })(); -module.exports = function (target, key, value, options) { - if (options && options.enumerable) target[key] = value; - else createNonEnumerableProperty(target, key, value); -}; + /** + * @private + */ + function parseStyleString(style, oStyle) { + var attr, value; + style.replace(/;\s*$/, '').split(';').forEach(function (chunk) { + var pair = chunk.split(':'); + attr = pair[0].trim().toLowerCase(); + value = pair[1].trim(); -/***/ }), + oStyle[attr] = value; + }); + } -/***/ "./node_modules/core-js-pure/internals/require-object-coercible.js": -/*!*************************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/require-object-coercible.js ***! - \*************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { + /** + * @private + */ + function parseStyleObject(style, oStyle) { + var attr, value; + for (var prop in style) { + if (typeof style[prop] === 'undefined') { + continue; + } -// `RequireObjectCoercible` abstract operation -// https://tc39.es/ecma262/#sec-requireobjectcoercible -module.exports = function (it) { - if (it == undefined) throw TypeError("Can't call method on " + it); - return it; -}; + attr = prop.toLowerCase(); + value = style[prop]; + oStyle[attr] = value; + } + } -/***/ }), + /** + * @private + */ + function getGlobalStylesForElement(element, svgUid) { + var styles = { }; + for (var rule in fabric.cssRules[svgUid]) { + if (elementMatchesRule(element, rule.split(' '))) { + for (var property in fabric.cssRules[svgUid][rule]) { + styles[property] = fabric.cssRules[svgUid][rule][property]; + } + } + } + return styles; + } -/***/ "./node_modules/core-js-pure/internals/set-global.js": -/*!***********************************************************!*\ - !*** ./node_modules/core-js-pure/internals/set-global.js ***! - \***********************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * @private + */ + function elementMatchesRule(element, selectors) { + var firstMatching, parentMatching = true; + //start from rightmost selector. + firstMatching = selectorMatches(element, selectors.pop()); + if (firstMatching && selectors.length) { + parentMatching = doesSomeParentMatch(element, selectors); + } + return firstMatching && parentMatching && (selectors.length === 0); + } -var global = __webpack_require__(/*! ../internals/global */ "./node_modules/core-js-pure/internals/global.js"); -var createNonEnumerableProperty = __webpack_require__(/*! ../internals/create-non-enumerable-property */ "./node_modules/core-js-pure/internals/create-non-enumerable-property.js"); + function doesSomeParentMatch(element, selectors) { + var selector, parentMatching = true; + while (element.parentNode && element.parentNode.nodeType === 1 && selectors.length) { + if (parentMatching) { + selector = selectors.pop(); + } + element = element.parentNode; + parentMatching = selectorMatches(element, selector); + } + return selectors.length === 0; + } -module.exports = function (key, value) { - try { - createNonEnumerableProperty(global, key, value); - } catch (error) { - global[key] = value; - } return value; -}; + /** + * @private + */ + function selectorMatches(element, selector) { + var nodeName = element.nodeName, + classNames = element.getAttribute('class'), + id = element.getAttribute('id'), matcher, i; + // i check if a selector matches slicing away part from it. + // if i get empty string i should match + matcher = new RegExp('^' + nodeName, 'i'); + selector = selector.replace(matcher, ''); + if (id && selector.length) { + matcher = new RegExp('#' + id + '(?![a-zA-Z\\-]+)', 'i'); + selector = selector.replace(matcher, ''); + } + if (classNames && selector.length) { + classNames = classNames.split(' '); + for (i = classNames.length; i--;) { + matcher = new RegExp('\\.' + classNames[i] + '(?![a-zA-Z\\-]+)', 'i'); + selector = selector.replace(matcher, ''); + } + } + return selector.length === 0; + } + /** + * @private + * to support IE8 missing getElementById on SVGdocument and on node xmlDOM + */ + function elementById(doc, id) { + var el; + doc.getElementById && (el = doc.getElementById(id)); + if (el) { + return el; + } + var node, i, len, nodelist = doc.getElementsByTagName('*'); + for (i = 0, len = nodelist.length; i < len; i++) { + node = nodelist[i]; + if (id === node.getAttribute('id')) { + return node; + } + } + } -/***/ }), + /** + * @private + */ + function parseUseDirectives(doc) { + var nodelist = _getMultipleNodes(doc, ['use', 'svg:use']), i = 0; + while (nodelist.length && i < nodelist.length) { + var el = nodelist[i], + xlinkAttribute = el.getAttribute('xlink:href') || el.getAttribute('href'); -/***/ "./node_modules/core-js-pure/internals/set-species.js": -/*!************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/set-species.js ***! - \************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + if (xlinkAttribute === null) { + return; + } -"use strict"; + var xlink = xlinkAttribute.substr(1), + x = el.getAttribute('x') || 0, + y = el.getAttribute('y') || 0, + el2 = elementById(doc, xlink).cloneNode(true), + currentTrans = (el2.getAttribute('transform') || '') + ' translate(' + x + ', ' + y + ')', + parentNode, + oldLength = nodelist.length, attr, + j, + attrs, + len, + namespace = fabric.svgNS; + + applyViewboxTransform(el2); + if (/^svg$/i.test(el2.nodeName)) { + var el3 = el2.ownerDocument.createElementNS(namespace, 'g'); + for (j = 0, attrs = el2.attributes, len = attrs.length; j < len; j++) { + attr = attrs.item(j); + el3.setAttributeNS(namespace, attr.nodeName, attr.nodeValue); + } + // el2.firstChild != null + while (el2.firstChild) { + el3.appendChild(el2.firstChild); + } + el2 = el3; + } -var getBuiltIn = __webpack_require__(/*! ../internals/get-built-in */ "./node_modules/core-js-pure/internals/get-built-in.js"); -var definePropertyModule = __webpack_require__(/*! ../internals/object-define-property */ "./node_modules/core-js-pure/internals/object-define-property.js"); -var wellKnownSymbol = __webpack_require__(/*! ../internals/well-known-symbol */ "./node_modules/core-js-pure/internals/well-known-symbol.js"); -var DESCRIPTORS = __webpack_require__(/*! ../internals/descriptors */ "./node_modules/core-js-pure/internals/descriptors.js"); + for (j = 0, attrs = el.attributes, len = attrs.length; j < len; j++) { + attr = attrs.item(j); + if (attr.nodeName === 'x' || attr.nodeName === 'y' || + attr.nodeName === 'xlink:href' || attr.nodeName === 'href') { + continue; + } -var SPECIES = wellKnownSymbol('species'); + if (attr.nodeName === 'transform') { + currentTrans = attr.nodeValue + ' ' + currentTrans; + } + else { + el2.setAttribute(attr.nodeName, attr.nodeValue); + } + } -module.exports = function (CONSTRUCTOR_NAME) { - var Constructor = getBuiltIn(CONSTRUCTOR_NAME); - var defineProperty = definePropertyModule.f; + el2.setAttribute('transform', currentTrans); + el2.setAttribute('instantiated_by_use', '1'); + el2.removeAttribute('id'); + parentNode = el.parentNode; + parentNode.replaceChild(el2, el); + // some browsers do not shorten nodelist after replaceChild (IE8) + if (nodelist.length === oldLength) { + i++; + } + } + } - if (DESCRIPTORS && Constructor && !Constructor[SPECIES]) { - defineProperty(Constructor, SPECIES, { - configurable: true, - get: function () { return this; } - }); + // http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute + // matches, e.g.: +14.56e-12, etc. + var reViewBoxAttrValue = new RegExp( + '^' + + '\\s*(' + fabric.reNum + '+)\\s*,?' + + '\\s*(' + fabric.reNum + '+)\\s*,?' + + '\\s*(' + fabric.reNum + '+)\\s*,?' + + '\\s*(' + fabric.reNum + '+)\\s*' + + '$' + ); + + /** + * Add a element that envelop all child elements and makes the viewbox transformMatrix descend on all elements + */ + function applyViewboxTransform(element) { + if (!fabric.svgViewBoxElementsRegEx.test(element.nodeName)) { + return {}; + } + var viewBoxAttr = element.getAttribute('viewBox'), + scaleX = 1, + scaleY = 1, + minX = 0, + minY = 0, + viewBoxWidth, viewBoxHeight, matrix, el, + widthAttr = element.getAttribute('width'), + heightAttr = element.getAttribute('height'), + x = element.getAttribute('x') || 0, + y = element.getAttribute('y') || 0, + preserveAspectRatio = element.getAttribute('preserveAspectRatio') || '', + missingViewBox = (!viewBoxAttr || !(viewBoxAttr = viewBoxAttr.match(reViewBoxAttrValue))), + missingDimAttr = (!widthAttr || !heightAttr || widthAttr === '100%' || heightAttr === '100%'), + toBeParsed = missingViewBox && missingDimAttr, + parsedDim = { }, translateMatrix = '', widthDiff = 0, heightDiff = 0; + + parsedDim.width = 0; + parsedDim.height = 0; + parsedDim.toBeParsed = toBeParsed; + + if (missingViewBox) { + if (((x || y) && element.parentNode && element.parentNode.nodeName !== '#document')) { + translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') '; + matrix = (element.getAttribute('transform') || '') + translateMatrix; + element.setAttribute('transform', matrix); + element.removeAttribute('x'); + element.removeAttribute('y'); + } + } + + if (toBeParsed) { + return parsedDim; + } + + if (missingViewBox) { + parsedDim.width = parseUnit(widthAttr); + parsedDim.height = parseUnit(heightAttr); + // set a transform for elements that have x y and are inner(only) SVGs + return parsedDim; + } + minX = -parseFloat(viewBoxAttr[1]); + minY = -parseFloat(viewBoxAttr[2]); + viewBoxWidth = parseFloat(viewBoxAttr[3]); + viewBoxHeight = parseFloat(viewBoxAttr[4]); + parsedDim.minX = minX; + parsedDim.minY = minY; + parsedDim.viewBoxWidth = viewBoxWidth; + parsedDim.viewBoxHeight = viewBoxHeight; + if (!missingDimAttr) { + parsedDim.width = parseUnit(widthAttr); + parsedDim.height = parseUnit(heightAttr); + scaleX = parsedDim.width / viewBoxWidth; + scaleY = parsedDim.height / viewBoxHeight; + } + else { + parsedDim.width = viewBoxWidth; + parsedDim.height = viewBoxHeight; + } + + // default is to preserve aspect ratio + preserveAspectRatio = fabric.util.parsePreserveAspectRatioAttribute(preserveAspectRatio); + if (preserveAspectRatio.alignX !== 'none') { + //translate all container for the effect of Mid, Min, Max + if (preserveAspectRatio.meetOrSlice === 'meet') { + scaleY = scaleX = (scaleX > scaleY ? scaleY : scaleX); + // calculate additional translation to move the viewbox + } + if (preserveAspectRatio.meetOrSlice === 'slice') { + scaleY = scaleX = (scaleX > scaleY ? scaleX : scaleY); + // calculate additional translation to move the viewbox + } + widthDiff = parsedDim.width - viewBoxWidth * scaleX; + heightDiff = parsedDim.height - viewBoxHeight * scaleX; + if (preserveAspectRatio.alignX === 'Mid') { + widthDiff /= 2; + } + if (preserveAspectRatio.alignY === 'Mid') { + heightDiff /= 2; + } + if (preserveAspectRatio.alignX === 'Min') { + widthDiff = 0; + } + if (preserveAspectRatio.alignY === 'Min') { + heightDiff = 0; + } + } + + if (scaleX === 1 && scaleY === 1 && minX === 0 && minY === 0 && x === 0 && y === 0) { + return parsedDim; + } + if ((x || y) && element.parentNode.nodeName !== '#document') { + translateMatrix = ' translate(' + parseUnit(x) + ' ' + parseUnit(y) + ') '; + } + + matrix = translateMatrix + ' matrix(' + scaleX + + ' 0' + + ' 0 ' + + scaleY + ' ' + + (minX * scaleX + widthDiff) + ' ' + + (minY * scaleY + heightDiff) + ') '; + // seems unused. + // parsedDim.viewboxTransform = fabric.parseTransformAttribute(matrix); + if (element.nodeName === 'svg') { + el = element.ownerDocument.createElementNS(fabric.svgNS, 'g'); + // element.firstChild != null + while (element.firstChild) { + el.appendChild(element.firstChild); + } + element.appendChild(el); + } + else { + el = element; + el.removeAttribute('x'); + el.removeAttribute('y'); + matrix = el.getAttribute('transform') + matrix; + } + el.setAttribute('transform', matrix); + return parsedDim; } -}; + function hasAncestorWithNodeName(element, nodeName) { + while (element && (element = element.parentNode)) { + if (element.nodeName && nodeName.test(element.nodeName.replace('svg:', '')) + && !element.getAttribute('instantiated_by_use')) { + return true; + } + } + return false; + } -/***/ }), + /** + * Parses an SVG document, converts it to an array of corresponding fabric.* instances and passes them to a callback + * @static + * @function + * @memberOf fabric + * @param {SVGDocument} doc SVG document to parse + * @param {Function} callback Callback to call when parsing is finished; + * It's being passed an array of elements (parsed from a document). + * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created. + * @param {Object} [parsingOptions] options for parsing document + * @param {String} [parsingOptions.crossOrigin] crossOrigin settings + */ + fabric.parseSVGDocument = function(doc, callback, reviver, parsingOptions) { + if (!doc) { + return; + } -/***/ "./node_modules/core-js-pure/internals/set-to-string-tag.js": -/*!******************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/set-to-string-tag.js ***! - \******************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + parseUseDirectives(doc); -var TO_STRING_TAG_SUPPORT = __webpack_require__(/*! ../internals/to-string-tag-support */ "./node_modules/core-js-pure/internals/to-string-tag-support.js"); -var defineProperty = __webpack_require__(/*! ../internals/object-define-property */ "./node_modules/core-js-pure/internals/object-define-property.js").f; -var createNonEnumerableProperty = __webpack_require__(/*! ../internals/create-non-enumerable-property */ "./node_modules/core-js-pure/internals/create-non-enumerable-property.js"); -var has = __webpack_require__(/*! ../internals/has */ "./node_modules/core-js-pure/internals/has.js"); -var toString = __webpack_require__(/*! ../internals/object-to-string */ "./node_modules/core-js-pure/internals/object-to-string.js"); -var wellKnownSymbol = __webpack_require__(/*! ../internals/well-known-symbol */ "./node_modules/core-js-pure/internals/well-known-symbol.js"); + var svgUid = fabric.Object.__uid++, i, len, + options = applyViewboxTransform(doc), + descendants = fabric.util.toArray(doc.getElementsByTagName('*')); + options.crossOrigin = parsingOptions && parsingOptions.crossOrigin; + options.svgUid = svgUid; -var TO_STRING_TAG = wellKnownSymbol('toStringTag'); + if (descendants.length === 0 && fabric.isLikelyNode) { + // we're likely in node, where "o3-xml" library fails to gEBTN("*") + // https://github.com/ajaxorg/node-o3-xml/issues/21 + descendants = doc.selectNodes('//*[name(.)!="svg"]'); + var arr = []; + for (i = 0, len = descendants.length; i < len; i++) { + arr[i] = descendants[i]; + } + descendants = arr; + } -module.exports = function (it, TAG, STATIC, SET_METHOD) { - if (it) { - var target = STATIC ? it : it.prototype; - if (!has(target, TO_STRING_TAG)) { - defineProperty(target, TO_STRING_TAG, { configurable: true, value: TAG }); + var elements = descendants.filter(function(el) { + applyViewboxTransform(el); + return fabric.svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')) && + !hasAncestorWithNodeName(el, fabric.svgInvalidAncestorsRegEx); // http://www.w3.org/TR/SVG/struct.html#DefsElement + }); + if (!elements || (elements && !elements.length)) { + callback && callback([], {}); + return; } - if (SET_METHOD && !TO_STRING_TAG_SUPPORT) { - createNonEnumerableProperty(target, 'toString', toString); + var clipPaths = { }; + descendants.filter(function(el) { + return el.nodeName.replace('svg:', '') === 'clipPath'; + }).forEach(function(el) { + var id = el.getAttribute('id'); + clipPaths[id] = fabric.util.toArray(el.getElementsByTagName('*')).filter(function(el) { + return fabric.svgValidTagNamesRegEx.test(el.nodeName.replace('svg:', '')); + }); + }); + fabric.gradientDefs[svgUid] = fabric.getGradientDefs(doc); + fabric.cssRules[svgUid] = fabric.getCSSRules(doc); + fabric.clipPaths[svgUid] = clipPaths; + // Precedence of rules: style > class > attribute + fabric.parseElements(elements, function(instances, elements) { + if (callback) { + callback(instances, options, elements, descendants); + delete fabric.gradientDefs[svgUid]; + delete fabric.cssRules[svgUid]; + delete fabric.clipPaths[svgUid]; + } + }, clone(options), reviver, parsingOptions); + }; + + function recursivelyParseGradientsXlink(doc, gradient) { + var gradientsAttrs = ['gradientTransform', 'x1', 'x2', 'y1', 'y2', 'gradientUnits', 'cx', 'cy', 'r', 'fx', 'fy'], + xlinkAttr = 'xlink:href', + xLink = gradient.getAttribute(xlinkAttr).substr(1), + referencedGradient = elementById(doc, xLink); + if (referencedGradient && referencedGradient.getAttribute(xlinkAttr)) { + recursivelyParseGradientsXlink(doc, referencedGradient); + } + gradientsAttrs.forEach(function(attr) { + if (referencedGradient && !gradient.hasAttribute(attr) && referencedGradient.hasAttribute(attr)) { + gradient.setAttribute(attr, referencedGradient.getAttribute(attr)); + } + }); + if (!gradient.children.length) { + var referenceClone = referencedGradient.cloneNode(true); + while (referenceClone.firstChild) { + gradient.appendChild(referenceClone.firstChild); + } } + gradient.removeAttribute(xlinkAttr); } -}; + var reFontDeclaration = new RegExp( + '(normal|italic)?\\s*(normal|small-caps)?\\s*' + + '(normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900)?\\s*(' + + fabric.reNum + + '(?:px|cm|mm|em|pt|pc|in)*)(?:\\/(normal|' + fabric.reNum + '))?\\s+(.*)'); -/***/ }), - -/***/ "./node_modules/core-js-pure/internals/shared-key.js": -/*!***********************************************************!*\ - !*** ./node_modules/core-js-pure/internals/shared-key.js ***! - \***********************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + extend(fabric, { + /** + * Parses a short font declaration, building adding its properties to a style object + * @static + * @function + * @memberOf fabric + * @param {String} value font declaration + * @param {Object} oStyle definition + */ + parseFontDeclaration: function(value, oStyle) { + var match = value.match(reFontDeclaration); -var shared = __webpack_require__(/*! ../internals/shared */ "./node_modules/core-js-pure/internals/shared.js"); -var uid = __webpack_require__(/*! ../internals/uid */ "./node_modules/core-js-pure/internals/uid.js"); + if (!match) { + return; + } + var fontStyle = match[1], + // font variant is not used + // fontVariant = match[2], + fontWeight = match[3], + fontSize = match[4], + lineHeight = match[5], + fontFamily = match[6]; -var keys = shared('keys'); + if (fontStyle) { + oStyle.fontStyle = fontStyle; + } + if (fontWeight) { + oStyle.fontWeight = isNaN(parseFloat(fontWeight)) ? fontWeight : parseFloat(fontWeight); + } + if (fontSize) { + oStyle.fontSize = parseUnit(fontSize); + } + if (fontFamily) { + oStyle.fontFamily = fontFamily; + } + if (lineHeight) { + oStyle.lineHeight = lineHeight === 'normal' ? 1 : lineHeight; + } + }, -module.exports = function (key) { - return keys[key] || (keys[key] = uid(key)); -}; + /** + * Parses an SVG document, returning all of the gradient declarations found in it + * @static + * @function + * @memberOf fabric + * @param {SVGDocument} doc SVG document to parse + * @return {Object} Gradient definitions; key corresponds to element id, value -- to gradient definition element + */ + getGradientDefs: function(doc) { + var tagArray = [ + 'linearGradient', + 'radialGradient', + 'svg:linearGradient', + 'svg:radialGradient'], + elList = _getMultipleNodes(doc, tagArray), + el, j = 0, gradientDefs = { }; + j = elList.length; + while (j--) { + el = elList[j]; + if (el.getAttribute('xlink:href')) { + recursivelyParseGradientsXlink(doc, el); + } + gradientDefs[el.getAttribute('id')] = el; + } + return gradientDefs; + }, + /** + * Returns an object of attributes' name/value, given element and an array of attribute names; + * Parses parent "g" nodes recursively upwards. + * @static + * @memberOf fabric + * @param {DOMElement} element Element to parse + * @param {Array} attributes Array of attributes to parse + * @return {Object} object containing parsed attributes' names/values + */ + parseAttributes: function(element, attributes, svgUid) { -/***/ }), + if (!element) { + return; + } -/***/ "./node_modules/core-js-pure/internals/shared-store.js": -/*!*************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/shared-store.js ***! - \*************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + var value, + parentAttributes = { }, + fontSize, parentFontSize; -var global = __webpack_require__(/*! ../internals/global */ "./node_modules/core-js-pure/internals/global.js"); -var setGlobal = __webpack_require__(/*! ../internals/set-global */ "./node_modules/core-js-pure/internals/set-global.js"); + if (typeof svgUid === 'undefined') { + svgUid = element.getAttribute('svgUid'); + } + // if there's a parent container (`g` or `a` or `symbol` node), parse its attributes recursively upwards + if (element.parentNode && fabric.svgValidParentsRegEx.test(element.parentNode.nodeName)) { + parentAttributes = fabric.parseAttributes(element.parentNode, attributes, svgUid); + } -var SHARED = '__core-js_shared__'; -var store = global[SHARED] || setGlobal(SHARED, {}); + var ownAttributes = attributes.reduce(function(memo, attr) { + value = element.getAttribute(attr); + if (value) { // eslint-disable-line + memo[attr] = value; + } + return memo; + }, { }); + // add values parsed from style, which take precedence over attributes + // (see: http://www.w3.org/TR/SVG/styling.html#UsingPresentationAttributes) + var cssAttrs = extend( + getGlobalStylesForElement(element, svgUid), + fabric.parseStyleAttribute(element) + ); + ownAttributes = extend( + ownAttributes, + cssAttrs + ); + if (cssAttrs[cPath]) { + element.setAttribute(cPath, cssAttrs[cPath]); + } + fontSize = parentFontSize = parentAttributes.fontSize || fabric.Text.DEFAULT_SVG_FONT_SIZE; + if (ownAttributes[fSize]) { + // looks like the minimum should be 9px when dealing with ems. this is what looks like in browsers. + ownAttributes[fSize] = fontSize = parseUnit(ownAttributes[fSize], parentFontSize); + } + + var normalizedAttr, normalizedValue, normalizedStyle = {}; + for (var attr in ownAttributes) { + normalizedAttr = normalizeAttr(attr); + normalizedValue = normalizeValue(normalizedAttr, ownAttributes[attr], parentAttributes, fontSize); + normalizedStyle[normalizedAttr] = normalizedValue; + } + if (normalizedStyle && normalizedStyle.font) { + fabric.parseFontDeclaration(normalizedStyle.font, normalizedStyle); + } + var mergedAttrs = extend(parentAttributes, normalizedStyle); + return fabric.svgValidParentsRegEx.test(element.nodeName) ? mergedAttrs : _setStrokeFillOpacity(mergedAttrs); + }, -module.exports = store; + /** + * Transforms an array of svg elements to corresponding fabric.* instances + * @static + * @memberOf fabric + * @param {Array} elements Array of elements to parse + * @param {Function} callback Being passed an array of fabric instances (transformed from SVG elements) + * @param {Object} [options] Options object + * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created. + */ + parseElements: function(elements, callback, options, reviver, parsingOptions) { + new fabric.ElementsParser(elements, callback, options, reviver, parsingOptions).parse(); + }, + /** + * Parses "style" attribute, retuning an object with values + * @static + * @memberOf fabric + * @param {SVGElement} element Element to parse + * @return {Object} Objects with values parsed from style attribute of an element + */ + parseStyleAttribute: function(element) { + var oStyle = { }, + style = element.getAttribute('style'); -/***/ }), + if (!style) { + return oStyle; + } -/***/ "./node_modules/core-js-pure/internals/shared.js": -/*!*******************************************************!*\ - !*** ./node_modules/core-js-pure/internals/shared.js ***! - \*******************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + if (typeof style === 'string') { + parseStyleString(style, oStyle); + } + else { + parseStyleObject(style, oStyle); + } -var IS_PURE = __webpack_require__(/*! ../internals/is-pure */ "./node_modules/core-js-pure/internals/is-pure.js"); -var store = __webpack_require__(/*! ../internals/shared-store */ "./node_modules/core-js-pure/internals/shared-store.js"); + return oStyle; + }, -(module.exports = function (key, value) { - return store[key] || (store[key] = value !== undefined ? value : {}); -})('versions', []).push({ - version: '3.13.0', - mode: IS_PURE ? 'pure' : 'global', - copyright: '© 2021 Denis Pushkarev (zloirock.ru)' -}); + /** + * Parses "points" attribute, returning an array of values + * @static + * @memberOf fabric + * @param {String} points points attribute string + * @return {Array} array of points + */ + parsePointsAttribute: function(points) { + // points attribute is required and must not be empty + if (!points) { + return null; + } -/***/ }), + // replace commas with whitespace and remove bookending whitespace + points = points.replace(/,/g, ' ').trim(); -/***/ "./node_modules/core-js-pure/internals/species-constructor.js": -/*!********************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/species-constructor.js ***! - \********************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + points = points.split(/\s+/); + var parsedPoints = [], i, len; -var anObject = __webpack_require__(/*! ../internals/an-object */ "./node_modules/core-js-pure/internals/an-object.js"); -var aFunction = __webpack_require__(/*! ../internals/a-function */ "./node_modules/core-js-pure/internals/a-function.js"); -var wellKnownSymbol = __webpack_require__(/*! ../internals/well-known-symbol */ "./node_modules/core-js-pure/internals/well-known-symbol.js"); + for (i = 0, len = points.length; i < len; i += 2) { + parsedPoints.push({ + x: parseFloat(points[i]), + y: parseFloat(points[i + 1]) + }); + } -var SPECIES = wellKnownSymbol('species'); + // odd number of points is an error + // if (parsedPoints.length % 2 !== 0) { + // return null; + // } -// `SpeciesConstructor` abstract operation -// https://tc39.es/ecma262/#sec-speciesconstructor -module.exports = function (O, defaultConstructor) { - var C = anObject(O).constructor; - var S; - return C === undefined || (S = anObject(C)[SPECIES]) == undefined ? defaultConstructor : aFunction(S); -}; + return parsedPoints; + }, + /** + * Returns CSS rules for a given SVG document + * @static + * @function + * @memberOf fabric + * @param {SVGDocument} doc SVG document to parse + * @return {Object} CSS rules of this document + */ + getCSSRules: function(doc) { + var styles = doc.getElementsByTagName('style'), i, len, + allRules = { }, rules; -/***/ }), + // very crude parsing of style contents + for (i = 0, len = styles.length; i < len; i++) { + var styleContents = styles[i].textContent; -/***/ "./node_modules/core-js-pure/internals/string-multibyte.js": -/*!*****************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/string-multibyte.js ***! - \*****************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + // remove comments + styleContents = styleContents.replace(/\/\*[\s\S]*?\*\//g, ''); + if (styleContents.trim() === '') { + continue; + } + rules = styleContents.match(/[^{]*\{[\s\S]*?\}/g); + rules = rules.map(function(rule) { return rule.trim(); }); + // eslint-disable-next-line no-loop-func + rules.forEach(function(rule) { + + var match = rule.match(/([\s\S]*?)\s*\{([^}]*)\}/), + ruleObj = { }, declaration = match[2].trim(), + propertyValuePairs = declaration.replace(/;$/, '').split(/\s*;\s*/); + + for (i = 0, len = propertyValuePairs.length; i < len; i++) { + var pair = propertyValuePairs[i].split(/\s*:\s*/), + property = pair[0], + value = pair[1]; + ruleObj[property] = value; + } + rule = match[1]; + rule.split(',').forEach(function(_rule) { + _rule = _rule.replace(/^svg/i, '').trim(); + if (_rule === '') { + return; + } + if (allRules[_rule]) { + fabric.util.object.extend(allRules[_rule], ruleObj); + } + else { + allRules[_rule] = fabric.util.object.clone(ruleObj); + } + }); + }); + } + return allRules; + }, -var toInteger = __webpack_require__(/*! ../internals/to-integer */ "./node_modules/core-js-pure/internals/to-integer.js"); -var requireObjectCoercible = __webpack_require__(/*! ../internals/require-object-coercible */ "./node_modules/core-js-pure/internals/require-object-coercible.js"); + /** + * Takes url corresponding to an SVG document, and parses it into a set of fabric objects. + * Note that SVG is fetched via XMLHttpRequest, so it needs to conform to SOP (Same Origin Policy) + * @memberOf fabric + * @param {String} url + * @param {Function} callback + * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created. + * @param {Object} [options] Object containing options for parsing + * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources + */ + loadSVGFromURL: function(url, callback, reviver, options) { -// `String.prototype.{ codePointAt, at }` methods implementation -var createMethod = function (CONVERT_TO_STRING) { - return function ($this, pos) { - var S = String(requireObjectCoercible($this)); - var position = toInteger(pos); - var size = S.length; - var first, second; - if (position < 0 || position >= size) return CONVERT_TO_STRING ? '' : undefined; - first = S.charCodeAt(position); - return first < 0xD800 || first > 0xDBFF || position + 1 === size - || (second = S.charCodeAt(position + 1)) < 0xDC00 || second > 0xDFFF - ? CONVERT_TO_STRING ? S.charAt(position) : first - : CONVERT_TO_STRING ? S.slice(position, position + 2) : (first - 0xD800 << 10) + (second - 0xDC00) + 0x10000; - }; -}; + url = url.replace(/^\n\s*/, '').trim(); + new fabric.util.request(url, { + method: 'get', + onComplete: onComplete + }); -module.exports = { - // `String.prototype.codePointAt` method - // https://tc39.es/ecma262/#sec-string.prototype.codepointat - codeAt: createMethod(false), - // `String.prototype.at` method - // https://github.com/mathiasbynens/String.prototype.at - charAt: createMethod(true) -}; + function onComplete(r) { + var xml = r.responseXML; + if (!xml || !xml.documentElement) { + callback && callback(null); + return false; + } -/***/ }), + fabric.parseSVGDocument(xml.documentElement, function (results, _options, elements, allElements) { + callback && callback(results, _options, elements, allElements); + }, reviver, options); + } + }, -/***/ "./node_modules/core-js-pure/internals/task.js": -/*!*****************************************************!*\ - !*** ./node_modules/core-js-pure/internals/task.js ***! - \*****************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Takes string corresponding to an SVG document, and parses it into a set of fabric objects + * @memberOf fabric + * @param {String} string + * @param {Function} callback + * @param {Function} [reviver] Method for further parsing of SVG elements, called after each fabric object created. + * @param {Object} [options] Object containing options for parsing + * @param {String} [options.crossOrigin] crossOrigin crossOrigin setting to use for external resources + */ + loadSVGFromString: function(string, callback, reviver, options) { + var parser = new fabric.window.DOMParser(), + doc = parser.parseFromString(string.trim(), 'text/xml'); + fabric.parseSVGDocument(doc.documentElement, function (results, _options, elements, allElements) { + callback(results, _options, elements, allElements); + }, reviver, options); + } + }); -var global = __webpack_require__(/*! ../internals/global */ "./node_modules/core-js-pure/internals/global.js"); -var fails = __webpack_require__(/*! ../internals/fails */ "./node_modules/core-js-pure/internals/fails.js"); -var bind = __webpack_require__(/*! ../internals/function-bind-context */ "./node_modules/core-js-pure/internals/function-bind-context.js"); -var html = __webpack_require__(/*! ../internals/html */ "./node_modules/core-js-pure/internals/html.js"); -var createElement = __webpack_require__(/*! ../internals/document-create-element */ "./node_modules/core-js-pure/internals/document-create-element.js"); -var IS_IOS = __webpack_require__(/*! ../internals/engine-is-ios */ "./node_modules/core-js-pure/internals/engine-is-ios.js"); -var IS_NODE = __webpack_require__(/*! ../internals/engine-is-node */ "./node_modules/core-js-pure/internals/engine-is-node.js"); +})( true ? exports : 0); -var location = global.location; -var set = global.setImmediate; -var clear = global.clearImmediate; -var process = global.process; -var MessageChannel = global.MessageChannel; -var Dispatch = global.Dispatch; -var counter = 0; -var queue = {}; -var ONREADYSTATECHANGE = 'onreadystatechange'; -var defer, channel, port; -var run = function (id) { - // eslint-disable-next-line no-prototype-builtins -- safe - if (queue.hasOwnProperty(id)) { - var fn = queue[id]; - delete queue[id]; - fn(); - } +fabric.ElementsParser = function(elements, callback, options, reviver, parsingOptions, doc) { + this.elements = elements; + this.callback = callback; + this.options = options; + this.reviver = reviver; + this.svgUid = (options && options.svgUid) || 0; + this.parsingOptions = parsingOptions; + this.regexUrl = /^url\(['"]?#([^'"]+)['"]?\)/g; + this.doc = doc; }; -var runner = function (id) { - return function () { - run(id); +(function(proto) { + proto.parse = function() { + this.instances = new Array(this.elements.length); + this.numElements = this.elements.length; + this.createObjects(); }; -}; - -var listener = function (event) { - run(event.data); -}; -var post = function (id) { - // old engines have not location.origin - global.postMessage(id + '', location.protocol + '//' + location.host); -}; + proto.createObjects = function() { + var _this = this; + this.elements.forEach(function(element, i) { + element.setAttribute('svgUid', _this.svgUid); + _this.createObject(element, i); + }); + }; -// Node.js 0.9+ & IE10+ has setImmediate, otherwise: -if (!set || !clear) { - set = function setImmediate(fn) { - var args = []; - var i = 1; - while (arguments.length > i) args.push(arguments[i++]); - queue[++counter] = function () { - // eslint-disable-next-line no-new-func -- spec requirement - (typeof fn == 'function' ? fn : Function(fn)).apply(undefined, args); - }; - defer(counter); - return counter; + proto.findTag = function(el) { + return fabric[fabric.util.string.capitalize(el.tagName.replace('svg:', ''))]; }; - clear = function clearImmediate(id) { - delete queue[id]; + + proto.createObject = function(el, index) { + var klass = this.findTag(el); + if (klass && klass.fromElement) { + try { + klass.fromElement(el, this.createCallback(index, el), this.options); + } + catch (err) { + fabric.log(err); + } + } + else { + this.checkIfDone(); + } }; - // Node.js 0.8- - if (IS_NODE) { - defer = function (id) { - process.nextTick(runner(id)); - }; - // Sphere (JS game engine) Dispatch API - } else if (Dispatch && Dispatch.now) { - defer = function (id) { - Dispatch.now(runner(id)); - }; - // Browsers with MessageChannel, includes WebWorkers - // except iOS - https://github.com/zloirock/core-js/issues/624 - } else if (MessageChannel && !IS_IOS) { - channel = new MessageChannel(); - port = channel.port2; - channel.port1.onmessage = listener; - defer = bind(port.postMessage, port, 1); - // Browsers with postMessage, skip WebWorkers - // IE8 has postMessage, but it's sync & typeof its postMessage is 'object' - } else if ( - global.addEventListener && - typeof postMessage == 'function' && - !global.importScripts && - location && location.protocol !== 'file:' && - !fails(post) - ) { - defer = post; - global.addEventListener('message', listener, false); - // IE8- - } else if (ONREADYSTATECHANGE in createElement('script')) { - defer = function (id) { - html.appendChild(createElement('script'))[ONREADYSTATECHANGE] = function () { - html.removeChild(this); - run(id); - }; - }; - // Rest old browsers - } else { - defer = function (id) { - setTimeout(runner(id), 0); + + proto.createCallback = function(index, el) { + var _this = this; + return function(obj) { + var _options; + _this.resolveGradient(obj, el, 'fill'); + _this.resolveGradient(obj, el, 'stroke'); + if (obj instanceof fabric.Image && obj._originalElement) { + _options = obj.parsePreserveAspectRatioAttribute(el); + } + obj._removeTransformMatrix(_options); + _this.resolveClipPath(obj, el); + _this.reviver && _this.reviver(el, obj); + _this.instances[index] = obj; + _this.checkIfDone(); }; - } -} + }; -module.exports = { - set: set, - clear: clear -}; + proto.extractPropertyDefinition = function(obj, property, storage) { + var value = obj[property], regex = this.regexUrl; + if (!regex.test(value)) { + return; + } + regex.lastIndex = 0; + var id = regex.exec(value)[1]; + regex.lastIndex = 0; + return fabric[storage][this.svgUid][id]; + }; + proto.resolveGradient = function(obj, el, property) { + var gradientDef = this.extractPropertyDefinition(obj, property, 'gradientDefs'); + if (gradientDef) { + var opacityAttr = el.getAttribute(property + '-opacity'); + var gradient = fabric.Gradient.fromElement(gradientDef, obj, opacityAttr, this.options); + obj.set(property, gradient); + } + }; -/***/ }), + proto.createClipPathCallback = function(obj, container) { + return function(_newObj) { + _newObj._removeTransformMatrix(); + _newObj.fillRule = _newObj.clipRule; + container.push(_newObj); + }; + }; -/***/ "./node_modules/core-js-pure/internals/to-absolute-index.js": -/*!******************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/to-absolute-index.js ***! - \******************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + proto.resolveClipPath = function(obj, usingElement) { + var clipPath = this.extractPropertyDefinition(obj, 'clipPath', 'clipPaths'), + element, klass, objTransformInv, container, gTransform, options; + if (clipPath) { + container = []; + objTransformInv = fabric.util.invertTransform(obj.calcTransformMatrix()); + // move the clipPath tag as sibling to the real element that is using it + var clipPathTag = clipPath[0].parentNode; + var clipPathOwner = usingElement; + while (clipPathOwner.parentNode && clipPathOwner.getAttribute('clip-path') !== obj.clipPath) { + clipPathOwner = clipPathOwner.parentNode; + } + clipPathOwner.parentNode.appendChild(clipPathTag); + for (var i = 0; i < clipPath.length; i++) { + element = clipPath[i]; + klass = this.findTag(element); + klass.fromElement( + element, + this.createClipPathCallback(obj, container), + this.options + ); + } + if (container.length === 1) { + clipPath = container[0]; + } + else { + clipPath = new fabric.Group(container); + } + gTransform = fabric.util.multiplyTransformMatrices( + objTransformInv, + clipPath.calcTransformMatrix() + ); + if (clipPath.clipPath) { + this.resolveClipPath(clipPath, clipPathOwner); + } + var options = fabric.util.qrDecompose(gTransform); + clipPath.flipX = false; + clipPath.flipY = false; + clipPath.set('scaleX', options.scaleX); + clipPath.set('scaleY', options.scaleY); + clipPath.angle = options.angle; + clipPath.skewX = options.skewX; + clipPath.skewY = 0; + clipPath.setPositionByOrigin({ x: options.translateX, y: options.translateY }, 'center', 'center'); + obj.clipPath = clipPath; + } + else { + // if clip-path does not resolve to any element, delete the property. + delete obj.clipPath; + } + }; -var toInteger = __webpack_require__(/*! ../internals/to-integer */ "./node_modules/core-js-pure/internals/to-integer.js"); + proto.checkIfDone = function() { + if (--this.numElements === 0) { + this.instances = this.instances.filter(function(el) { + // eslint-disable-next-line no-eq-null, eqeqeq + return el != null; + }); + this.callback(this.instances, this.elements); + } + }; +})(fabric.ElementsParser.prototype); -var max = Math.max; -var min = Math.min; -// Helper for a popular repeating case of the spec: -// Let integer be ? ToInteger(index). -// If integer < 0, let result be max((length + integer), 0); else let result be min(integer, length). -module.exports = function (index, length) { - var integer = toInteger(index); - return integer < 0 ? max(integer + length, 0) : min(integer, length); -}; +(function(global) { + 'use strict'; -/***/ }), + /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */ -/***/ "./node_modules/core-js-pure/internals/to-indexed-object.js": -/*!******************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/to-indexed-object.js ***! - \******************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + var fabric = global.fabric || (global.fabric = { }); -// toObject with fallback for non-array-like ES3 strings -var IndexedObject = __webpack_require__(/*! ../internals/indexed-object */ "./node_modules/core-js-pure/internals/indexed-object.js"); -var requireObjectCoercible = __webpack_require__(/*! ../internals/require-object-coercible */ "./node_modules/core-js-pure/internals/require-object-coercible.js"); + if (fabric.Point) { + fabric.warn('fabric.Point is already defined'); + return; + } -module.exports = function (it) { - return IndexedObject(requireObjectCoercible(it)); -}; + fabric.Point = Point; + /** + * Point class + * @class fabric.Point + * @memberOf fabric + * @constructor + * @param {Number} x + * @param {Number} y + * @return {fabric.Point} thisArg + */ + function Point(x, y) { + this.x = x; + this.y = y; + } -/***/ }), + Point.prototype = /** @lends fabric.Point.prototype */ { -/***/ "./node_modules/core-js-pure/internals/to-integer.js": -/*!***********************************************************!*\ - !*** ./node_modules/core-js-pure/internals/to-integer.js ***! - \***********************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { + type: 'point', -var ceil = Math.ceil; -var floor = Math.floor; + constructor: Point, -// `ToInteger` abstract operation -// https://tc39.es/ecma262/#sec-tointeger -module.exports = function (argument) { - return isNaN(argument = +argument) ? 0 : (argument > 0 ? floor : ceil)(argument); -}; + /** + * Adds another point to this one and returns another one + * @param {fabric.Point} that + * @return {fabric.Point} new Point instance with added values + */ + add: function (that) { + return new Point(this.x + that.x, this.y + that.y); + }, + /** + * Adds another point to this one + * @param {fabric.Point} that + * @return {fabric.Point} thisArg + * @chainable + */ + addEquals: function (that) { + this.x += that.x; + this.y += that.y; + return this; + }, -/***/ }), + /** + * Adds value to this point and returns a new one + * @param {Number} scalar + * @return {fabric.Point} new Point with added value + */ + scalarAdd: function (scalar) { + return new Point(this.x + scalar, this.y + scalar); + }, -/***/ "./node_modules/core-js-pure/internals/to-length.js": -/*!**********************************************************!*\ - !*** ./node_modules/core-js-pure/internals/to-length.js ***! - \**********************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Adds value to this point + * @param {Number} scalar + * @return {fabric.Point} thisArg + * @chainable + */ + scalarAddEquals: function (scalar) { + this.x += scalar; + this.y += scalar; + return this; + }, -var toInteger = __webpack_require__(/*! ../internals/to-integer */ "./node_modules/core-js-pure/internals/to-integer.js"); + /** + * Subtracts another point from this point and returns a new one + * @param {fabric.Point} that + * @return {fabric.Point} new Point object with subtracted values + */ + subtract: function (that) { + return new Point(this.x - that.x, this.y - that.y); + }, -var min = Math.min; + /** + * Subtracts another point from this point + * @param {fabric.Point} that + * @return {fabric.Point} thisArg + * @chainable + */ + subtractEquals: function (that) { + this.x -= that.x; + this.y -= that.y; + return this; + }, -// `ToLength` abstract operation -// https://tc39.es/ecma262/#sec-tolength -module.exports = function (argument) { - return argument > 0 ? min(toInteger(argument), 0x1FFFFFFFFFFFFF) : 0; // 2 ** 53 - 1 == 9007199254740991 -}; + /** + * Subtracts value from this point and returns a new one + * @param {Number} scalar + * @return {fabric.Point} + */ + scalarSubtract: function (scalar) { + return new Point(this.x - scalar, this.y - scalar); + }, + /** + * Subtracts value from this point + * @param {Number} scalar + * @return {fabric.Point} thisArg + * @chainable + */ + scalarSubtractEquals: function (scalar) { + this.x -= scalar; + this.y -= scalar; + return this; + }, -/***/ }), + /** + * Multiplies this point by a value and returns a new one + * TODO: rename in scalarMultiply in 2.0 + * @param {Number} scalar + * @return {fabric.Point} + */ + multiply: function (scalar) { + return new Point(this.x * scalar, this.y * scalar); + }, -/***/ "./node_modules/core-js-pure/internals/to-object.js": -/*!**********************************************************!*\ - !*** ./node_modules/core-js-pure/internals/to-object.js ***! - \**********************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Multiplies this point by a value + * TODO: rename in scalarMultiplyEquals in 2.0 + * @param {Number} scalar + * @return {fabric.Point} thisArg + * @chainable + */ + multiplyEquals: function (scalar) { + this.x *= scalar; + this.y *= scalar; + return this; + }, -var requireObjectCoercible = __webpack_require__(/*! ../internals/require-object-coercible */ "./node_modules/core-js-pure/internals/require-object-coercible.js"); + /** + * Divides this point by a value and returns a new one + * TODO: rename in scalarDivide in 2.0 + * @param {Number} scalar + * @return {fabric.Point} + */ + divide: function (scalar) { + return new Point(this.x / scalar, this.y / scalar); + }, -// `ToObject` abstract operation -// https://tc39.es/ecma262/#sec-toobject -module.exports = function (argument) { - return Object(requireObjectCoercible(argument)); -}; + /** + * Divides this point by a value + * TODO: rename in scalarDivideEquals in 2.0 + * @param {Number} scalar + * @return {fabric.Point} thisArg + * @chainable + */ + divideEquals: function (scalar) { + this.x /= scalar; + this.y /= scalar; + return this; + }, + /** + * Returns true if this point is equal to another one + * @param {fabric.Point} that + * @return {Boolean} + */ + eq: function (that) { + return (this.x === that.x && this.y === that.y); + }, -/***/ }), + /** + * Returns true if this point is less than another one + * @param {fabric.Point} that + * @return {Boolean} + */ + lt: function (that) { + return (this.x < that.x && this.y < that.y); + }, -/***/ "./node_modules/core-js-pure/internals/to-primitive.js": -/*!*************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/to-primitive.js ***! - \*************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Returns true if this point is less than or equal to another one + * @param {fabric.Point} that + * @return {Boolean} + */ + lte: function (that) { + return (this.x <= that.x && this.y <= that.y); + }, -var isObject = __webpack_require__(/*! ../internals/is-object */ "./node_modules/core-js-pure/internals/is-object.js"); + /** -// `ToPrimitive` abstract operation -// https://tc39.es/ecma262/#sec-toprimitive -// instead of the ES6 spec version, we didn't implement @@toPrimitive case -// and the second argument - flag - preferred type is a string -module.exports = function (input, PREFERRED_STRING) { - if (!isObject(input)) return input; - var fn, val; - if (PREFERRED_STRING && typeof (fn = input.toString) == 'function' && !isObject(val = fn.call(input))) return val; - if (typeof (fn = input.valueOf) == 'function' && !isObject(val = fn.call(input))) return val; - if (!PREFERRED_STRING && typeof (fn = input.toString) == 'function' && !isObject(val = fn.call(input))) return val; - throw TypeError("Can't convert object to primitive value"); -}; + * Returns true if this point is greater another one + * @param {fabric.Point} that + * @return {Boolean} + */ + gt: function (that) { + return (this.x > that.x && this.y > that.y); + }, + /** + * Returns true if this point is greater than or equal to another one + * @param {fabric.Point} that + * @return {Boolean} + */ + gte: function (that) { + return (this.x >= that.x && this.y >= that.y); + }, -/***/ }), + /** + * Returns new point which is the result of linear interpolation with this one and another one + * @param {fabric.Point} that + * @param {Number} t , position of interpolation, between 0 and 1 default 0.5 + * @return {fabric.Point} + */ + lerp: function (that, t) { + if (typeof t === 'undefined') { + t = 0.5; + } + t = Math.max(Math.min(1, t), 0); + return new Point(this.x + (that.x - this.x) * t, this.y + (that.y - this.y) * t); + }, -/***/ "./node_modules/core-js-pure/internals/to-string-tag-support.js": -/*!**********************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/to-string-tag-support.js ***! - \**********************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Returns distance from this point and another one + * @param {fabric.Point} that + * @return {Number} + */ + distanceFrom: function (that) { + var dx = this.x - that.x, + dy = this.y - that.y; + return Math.sqrt(dx * dx + dy * dy); + }, -var wellKnownSymbol = __webpack_require__(/*! ../internals/well-known-symbol */ "./node_modules/core-js-pure/internals/well-known-symbol.js"); + /** + * Returns the point between this point and another one + * @param {fabric.Point} that + * @return {fabric.Point} + */ + midPointFrom: function (that) { + return this.lerp(that); + }, -var TO_STRING_TAG = wellKnownSymbol('toStringTag'); -var test = {}; + /** + * Returns a new point which is the min of this and another one + * @param {fabric.Point} that + * @return {fabric.Point} + */ + min: function (that) { + return new Point(Math.min(this.x, that.x), Math.min(this.y, that.y)); + }, -test[TO_STRING_TAG] = 'z'; + /** + * Returns a new point which is the max of this and another one + * @param {fabric.Point} that + * @return {fabric.Point} + */ + max: function (that) { + return new Point(Math.max(this.x, that.x), Math.max(this.y, that.y)); + }, -module.exports = String(test) === '[object z]'; + /** + * Returns string representation of this point + * @return {String} + */ + toString: function () { + return this.x + ',' + this.y; + }, + /** + * Sets x/y of this point + * @param {Number} x + * @param {Number} y + * @chainable + */ + setXY: function (x, y) { + this.x = x; + this.y = y; + return this; + }, -/***/ }), + /** + * Sets x of this point + * @param {Number} x + * @chainable + */ + setX: function (x) { + this.x = x; + return this; + }, -/***/ "./node_modules/core-js-pure/internals/uid.js": -/*!****************************************************!*\ - !*** ./node_modules/core-js-pure/internals/uid.js ***! - \****************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { + /** + * Sets y of this point + * @param {Number} y + * @chainable + */ + setY: function (y) { + this.y = y; + return this; + }, -var id = 0; -var postfix = Math.random(); + /** + * Sets x/y of this point from another point + * @param {fabric.Point} that + * @chainable + */ + setFromPoint: function (that) { + this.x = that.x; + this.y = that.y; + return this; + }, -module.exports = function (key) { - return 'Symbol(' + String(key === undefined ? '' : key) + ')_' + (++id + postfix).toString(36); -}; + /** + * Swaps x/y of this point and another point + * @param {fabric.Point} that + */ + swap: function (that) { + var x = this.x, + y = this.y; + this.x = that.x; + this.y = that.y; + that.x = x; + that.y = y; + }, + /** + * return a cloned instance of the point + * @return {fabric.Point} + */ + clone: function () { + return new Point(this.x, this.y); + } + }; -/***/ }), +})( true ? exports : 0); -/***/ "./node_modules/core-js-pure/internals/use-symbol-as-uid.js": -/*!******************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/use-symbol-as-uid.js ***! - \******************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { -/* eslint-disable es/no-symbol -- required for testing */ -var NATIVE_SYMBOL = __webpack_require__(/*! ../internals/native-symbol */ "./node_modules/core-js-pure/internals/native-symbol.js"); +(function(global) { -module.exports = NATIVE_SYMBOL - && !Symbol.sham - && typeof Symbol.iterator == 'symbol'; + 'use strict'; + /* Adaptation of work of Kevin Lindsey (kevin@kevlindev.com) */ + var fabric = global.fabric || (global.fabric = { }); -/***/ }), + if (fabric.Intersection) { + fabric.warn('fabric.Intersection is already defined'); + return; + } + + /** + * Intersection class + * @class fabric.Intersection + * @memberOf fabric + * @constructor + */ + function Intersection(status) { + this.status = status; + this.points = []; + } -/***/ "./node_modules/core-js-pure/internals/well-known-symbol.js": -/*!******************************************************************!*\ - !*** ./node_modules/core-js-pure/internals/well-known-symbol.js ***! - \******************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + fabric.Intersection = Intersection; -var global = __webpack_require__(/*! ../internals/global */ "./node_modules/core-js-pure/internals/global.js"); -var shared = __webpack_require__(/*! ../internals/shared */ "./node_modules/core-js-pure/internals/shared.js"); -var has = __webpack_require__(/*! ../internals/has */ "./node_modules/core-js-pure/internals/has.js"); -var uid = __webpack_require__(/*! ../internals/uid */ "./node_modules/core-js-pure/internals/uid.js"); -var NATIVE_SYMBOL = __webpack_require__(/*! ../internals/native-symbol */ "./node_modules/core-js-pure/internals/native-symbol.js"); -var USE_SYMBOL_AS_UID = __webpack_require__(/*! ../internals/use-symbol-as-uid */ "./node_modules/core-js-pure/internals/use-symbol-as-uid.js"); + fabric.Intersection.prototype = /** @lends fabric.Intersection.prototype */ { -var WellKnownSymbolsStore = shared('wks'); -var Symbol = global.Symbol; -var createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol : Symbol && Symbol.withoutSetter || uid; + constructor: Intersection, -module.exports = function (name) { - if (!has(WellKnownSymbolsStore, name) || !(NATIVE_SYMBOL || typeof WellKnownSymbolsStore[name] == 'string')) { - if (NATIVE_SYMBOL && has(Symbol, name)) { - WellKnownSymbolsStore[name] = Symbol[name]; - } else { - WellKnownSymbolsStore[name] = createWellKnownSymbol('Symbol.' + name); + /** + * Appends a point to intersection + * @param {fabric.Point} point + * @return {fabric.Intersection} thisArg + * @chainable + */ + appendPoint: function (point) { + this.points.push(point); + return this; + }, + + /** + * Appends points to intersection + * @param {Array} points + * @return {fabric.Intersection} thisArg + * @chainable + */ + appendPoints: function (points) { + this.points = this.points.concat(points); + return this; } - } return WellKnownSymbolsStore[name]; -}; + }; + /** + * Checks if one line intersects another + * TODO: rename in intersectSegmentSegment + * @static + * @param {fabric.Point} a1 + * @param {fabric.Point} a2 + * @param {fabric.Point} b1 + * @param {fabric.Point} b2 + * @return {fabric.Intersection} + */ + fabric.Intersection.intersectLineLine = function (a1, a2, b1, b2) { + var result, + uaT = (b2.x - b1.x) * (a1.y - b1.y) - (b2.y - b1.y) * (a1.x - b1.x), + ubT = (a2.x - a1.x) * (a1.y - b1.y) - (a2.y - a1.y) * (a1.x - b1.x), + uB = (b2.y - b1.y) * (a2.x - a1.x) - (b2.x - b1.x) * (a2.y - a1.y); + if (uB !== 0) { + var ua = uaT / uB, + ub = ubT / uB; + if (0 <= ua && ua <= 1 && 0 <= ub && ub <= 1) { + result = new Intersection('Intersection'); + result.appendPoint(new fabric.Point(a1.x + ua * (a2.x - a1.x), a1.y + ua * (a2.y - a1.y))); + } + else { + result = new Intersection(); + } + } + else { + if (uaT === 0 || ubT === 0) { + result = new Intersection('Coincident'); + } + else { + result = new Intersection('Parallel'); + } + } + return result; + }; -/***/ }), + /** + * Checks if line intersects polygon + * TODO: rename in intersectSegmentPolygon + * fix detection of coincident + * @static + * @param {fabric.Point} a1 + * @param {fabric.Point} a2 + * @param {Array} points + * @return {fabric.Intersection} + */ + fabric.Intersection.intersectLinePolygon = function(a1, a2, points) { + var result = new Intersection(), + length = points.length, + b1, b2, inter, i; -/***/ "./node_modules/core-js-pure/modules/es.aggregate-error.js": -/*!*****************************************************************!*\ - !*** ./node_modules/core-js-pure/modules/es.aggregate-error.js ***! - \*****************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + for (i = 0; i < length; i++) { + b1 = points[i]; + b2 = points[(i + 1) % length]; + inter = Intersection.intersectLineLine(a1, a2, b1, b2); -"use strict"; + result.appendPoints(inter.points); + } + if (result.points.length > 0) { + result.status = 'Intersection'; + } + return result; + }; -var $ = __webpack_require__(/*! ../internals/export */ "./node_modules/core-js-pure/internals/export.js"); -var getPrototypeOf = __webpack_require__(/*! ../internals/object-get-prototype-of */ "./node_modules/core-js-pure/internals/object-get-prototype-of.js"); -var setPrototypeOf = __webpack_require__(/*! ../internals/object-set-prototype-of */ "./node_modules/core-js-pure/internals/object-set-prototype-of.js"); -var create = __webpack_require__(/*! ../internals/object-create */ "./node_modules/core-js-pure/internals/object-create.js"); -var createNonEnumerableProperty = __webpack_require__(/*! ../internals/create-non-enumerable-property */ "./node_modules/core-js-pure/internals/create-non-enumerable-property.js"); -var createPropertyDescriptor = __webpack_require__(/*! ../internals/create-property-descriptor */ "./node_modules/core-js-pure/internals/create-property-descriptor.js"); -var iterate = __webpack_require__(/*! ../internals/iterate */ "./node_modules/core-js-pure/internals/iterate.js"); + /** + * Checks if polygon intersects another polygon + * @static + * @param {Array} points1 + * @param {Array} points2 + * @return {fabric.Intersection} + */ + fabric.Intersection.intersectPolygonPolygon = function (points1, points2) { + var result = new Intersection(), + length = points1.length, i; -var $AggregateError = function AggregateError(errors, message) { - var that = this; - if (!(that instanceof $AggregateError)) return new $AggregateError(errors, message); - if (setPrototypeOf) { - // eslint-disable-next-line unicorn/error-message -- expected - that = setPrototypeOf(new Error(undefined), getPrototypeOf(that)); - } - if (message !== undefined) createNonEnumerableProperty(that, 'message', String(message)); - var errorsArray = []; - iterate(errors, errorsArray.push, { that: errorsArray }); - createNonEnumerableProperty(that, 'errors', errorsArray); - return that; -}; + for (i = 0; i < length; i++) { + var a1 = points1[i], + a2 = points1[(i + 1) % length], + inter = Intersection.intersectLinePolygon(a1, a2, points2); -$AggregateError.prototype = create(Error.prototype, { - constructor: createPropertyDescriptor(5, $AggregateError), - message: createPropertyDescriptor(5, ''), - name: createPropertyDescriptor(5, 'AggregateError') -}); + result.appendPoints(inter.points); + } + if (result.points.length > 0) { + result.status = 'Intersection'; + } + return result; + }; -// `AggregateError` constructor -// https://tc39.es/ecma262/#sec-aggregate-error-constructor -$({ global: true }, { - AggregateError: $AggregateError -}); + /** + * Checks if polygon intersects rectangle + * @static + * @param {Array} points + * @param {fabric.Point} r1 + * @param {fabric.Point} r2 + * @return {fabric.Intersection} + */ + fabric.Intersection.intersectPolygonRectangle = function (points, r1, r2) { + var min = r1.min(r2), + max = r1.max(r2), + topRight = new fabric.Point(max.x, min.y), + bottomLeft = new fabric.Point(min.x, max.y), + inter1 = Intersection.intersectLinePolygon(min, topRight, points), + inter2 = Intersection.intersectLinePolygon(topRight, max, points), + inter3 = Intersection.intersectLinePolygon(max, bottomLeft, points), + inter4 = Intersection.intersectLinePolygon(bottomLeft, min, points), + result = new Intersection(); + + result.appendPoints(inter1.points); + result.appendPoints(inter2.points); + result.appendPoints(inter3.points); + result.appendPoints(inter4.points); + + if (result.points.length > 0) { + result.status = 'Intersection'; + } + return result; + }; +})( true ? exports : 0); -/***/ }), -/***/ "./node_modules/core-js-pure/modules/es.array.iterator.js": -/*!****************************************************************!*\ - !*** ./node_modules/core-js-pure/modules/es.array.iterator.js ***! - \****************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +(function(global) { -"use strict"; + 'use strict'; -var toIndexedObject = __webpack_require__(/*! ../internals/to-indexed-object */ "./node_modules/core-js-pure/internals/to-indexed-object.js"); -var addToUnscopables = __webpack_require__(/*! ../internals/add-to-unscopables */ "./node_modules/core-js-pure/internals/add-to-unscopables.js"); -var Iterators = __webpack_require__(/*! ../internals/iterators */ "./node_modules/core-js-pure/internals/iterators.js"); -var InternalStateModule = __webpack_require__(/*! ../internals/internal-state */ "./node_modules/core-js-pure/internals/internal-state.js"); -var defineIterator = __webpack_require__(/*! ../internals/define-iterator */ "./node_modules/core-js-pure/internals/define-iterator.js"); + var fabric = global.fabric || (global.fabric = { }); -var ARRAY_ITERATOR = 'Array Iterator'; -var setInternalState = InternalStateModule.set; -var getInternalState = InternalStateModule.getterFor(ARRAY_ITERATOR); + if (fabric.Color) { + fabric.warn('fabric.Color is already defined.'); + return; + } -// `Array.prototype.entries` method -// https://tc39.es/ecma262/#sec-array.prototype.entries -// `Array.prototype.keys` method -// https://tc39.es/ecma262/#sec-array.prototype.keys -// `Array.prototype.values` method -// https://tc39.es/ecma262/#sec-array.prototype.values -// `Array.prototype[@@iterator]` method -// https://tc39.es/ecma262/#sec-array.prototype-@@iterator -// `CreateArrayIterator` internal method -// https://tc39.es/ecma262/#sec-createarrayiterator -module.exports = defineIterator(Array, 'Array', function (iterated, kind) { - setInternalState(this, { - type: ARRAY_ITERATOR, - target: toIndexedObject(iterated), // target - index: 0, // next index - kind: kind // kind - }); -// `%ArrayIteratorPrototype%.next` method -// https://tc39.es/ecma262/#sec-%arrayiteratorprototype%.next -}, function () { - var state = getInternalState(this); - var target = state.target; - var kind = state.kind; - var index = state.index++; - if (!target || index >= target.length) { - state.target = undefined; - return { value: undefined, done: true }; + /** + * Color class + * The purpose of {@link fabric.Color} is to abstract and encapsulate common color operations; + * {@link fabric.Color} is a constructor and creates instances of {@link fabric.Color} objects. + * + * @class fabric.Color + * @param {String} color optional in hex or rgb(a) or hsl format or from known color list + * @return {fabric.Color} thisArg + * @tutorial {@link http://fabricjs.com/fabric-intro-part-2/#colors} + */ + function Color(color) { + if (!color) { + this.setSource([0, 0, 0, 1]); + } + else { + this._tryParsingColor(color); + } } - if (kind == 'keys') return { value: index, done: false }; - if (kind == 'values') return { value: target[index], done: false }; - return { value: [index, target[index]], done: false }; -}, 'values'); -// argumentsList[@@iterator] is %ArrayProto_values% -// https://tc39.es/ecma262/#sec-createunmappedargumentsobject -// https://tc39.es/ecma262/#sec-createmappedargumentsobject -Iterators.Arguments = Iterators.Array; + fabric.Color = Color; -// https://tc39.es/ecma262/#sec-array.prototype-@@unscopables -addToUnscopables('keys'); -addToUnscopables('values'); -addToUnscopables('entries'); + fabric.Color.prototype = /** @lends fabric.Color.prototype */ { + /** + * @private + * @param {String|Array} color Color value to parse + */ + _tryParsingColor: function(color) { + var source; -/***/ }), + if (color in Color.colorNameMap) { + color = Color.colorNameMap[color]; + } -/***/ "./node_modules/core-js-pure/modules/es.object.to-string.js": -/*!******************************************************************!*\ - !*** ./node_modules/core-js-pure/modules/es.object.to-string.js ***! - \******************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { + if (color === 'transparent') { + source = [255, 255, 255, 0]; + } -// empty + if (!source) { + source = Color.sourceFromHex(color); + } + if (!source) { + source = Color.sourceFromRgb(color); + } + if (!source) { + source = Color.sourceFromHsl(color); + } + if (!source) { + //if color is not recognize let's make black as canvas does + source = [0, 0, 0, 1]; + } + if (source) { + this.setSource(source); + } + }, + /** + * Adapted from https://github.com/mjijackson + * @private + * @param {Number} r Red color value + * @param {Number} g Green color value + * @param {Number} b Blue color value + * @return {Array} Hsl color + */ + _rgbToHsl: function(r, g, b) { + r /= 255; g /= 255; b /= 255; -/***/ }), + var h, s, l, + max = fabric.util.array.max([r, g, b]), + min = fabric.util.array.min([r, g, b]); -/***/ "./node_modules/core-js-pure/modules/es.promise.all-settled.js": -/*!*********************************************************************!*\ - !*** ./node_modules/core-js-pure/modules/es.promise.all-settled.js ***! - \*********************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + l = (max + min) / 2; -"use strict"; + if (max === min) { + h = s = 0; // achromatic + } + else { + var d = max - min; + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); + switch (max) { + case r: + h = (g - b) / d + (g < b ? 6 : 0); + break; + case g: + h = (b - r) / d + 2; + break; + case b: + h = (r - g) / d + 4; + break; + } + h /= 6; + } -var $ = __webpack_require__(/*! ../internals/export */ "./node_modules/core-js-pure/internals/export.js"); -var aFunction = __webpack_require__(/*! ../internals/a-function */ "./node_modules/core-js-pure/internals/a-function.js"); -var newPromiseCapabilityModule = __webpack_require__(/*! ../internals/new-promise-capability */ "./node_modules/core-js-pure/internals/new-promise-capability.js"); -var perform = __webpack_require__(/*! ../internals/perform */ "./node_modules/core-js-pure/internals/perform.js"); -var iterate = __webpack_require__(/*! ../internals/iterate */ "./node_modules/core-js-pure/internals/iterate.js"); - -// `Promise.allSettled` method -// https://tc39.es/ecma262/#sec-promise.allsettled -$({ target: 'Promise', stat: true }, { - allSettled: function allSettled(iterable) { - var C = this; - var capability = newPromiseCapabilityModule.f(C); - var resolve = capability.resolve; - var reject = capability.reject; - var result = perform(function () { - var promiseResolve = aFunction(C.resolve); - var values = []; - var counter = 0; - var remaining = 1; - iterate(iterable, function (promise) { - var index = counter++; - var alreadyCalled = false; - values.push(undefined); - remaining++; - promiseResolve.call(C, promise).then(function (value) { - if (alreadyCalled) return; - alreadyCalled = true; - values[index] = { status: 'fulfilled', value: value }; - --remaining || resolve(values); - }, function (error) { - if (alreadyCalled) return; - alreadyCalled = true; - values[index] = { status: 'rejected', reason: error }; - --remaining || resolve(values); - }); - }); - --remaining || resolve(values); - }); - if (result.error) reject(result.value); - return capability.promise; - } -}); + return [ + Math.round(h * 360), + Math.round(s * 100), + Math.round(l * 100) + ]; + }, + /** + * Returns source of this color (where source is an array representation; ex: [200, 200, 100, 1]) + * @return {Array} + */ + getSource: function() { + return this._source; + }, -/***/ }), + /** + * Sets source of this color (where source is an array representation; ex: [200, 200, 100, 1]) + * @param {Array} source + */ + setSource: function(source) { + this._source = source; + }, -/***/ "./node_modules/core-js-pure/modules/es.promise.any.js": -/*!*************************************************************!*\ - !*** ./node_modules/core-js-pure/modules/es.promise.any.js ***! - \*************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Returns color representation in RGB format + * @return {String} ex: rgb(0-255,0-255,0-255) + */ + toRgb: function() { + var source = this.getSource(); + return 'rgb(' + source[0] + ',' + source[1] + ',' + source[2] + ')'; + }, -"use strict"; + /** + * Returns color representation in RGBA format + * @return {String} ex: rgba(0-255,0-255,0-255,0-1) + */ + toRgba: function() { + var source = this.getSource(); + return 'rgba(' + source[0] + ',' + source[1] + ',' + source[2] + ',' + source[3] + ')'; + }, -var $ = __webpack_require__(/*! ../internals/export */ "./node_modules/core-js-pure/internals/export.js"); -var aFunction = __webpack_require__(/*! ../internals/a-function */ "./node_modules/core-js-pure/internals/a-function.js"); -var getBuiltIn = __webpack_require__(/*! ../internals/get-built-in */ "./node_modules/core-js-pure/internals/get-built-in.js"); -var newPromiseCapabilityModule = __webpack_require__(/*! ../internals/new-promise-capability */ "./node_modules/core-js-pure/internals/new-promise-capability.js"); -var perform = __webpack_require__(/*! ../internals/perform */ "./node_modules/core-js-pure/internals/perform.js"); -var iterate = __webpack_require__(/*! ../internals/iterate */ "./node_modules/core-js-pure/internals/iterate.js"); + /** + * Returns color representation in HSL format + * @return {String} ex: hsl(0-360,0%-100%,0%-100%) + */ + toHsl: function() { + var source = this.getSource(), + hsl = this._rgbToHsl(source[0], source[1], source[2]); -var PROMISE_ANY_ERROR = 'No one promise resolved'; + return 'hsl(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%)'; + }, -// `Promise.any` method -// https://tc39.es/ecma262/#sec-promise.any -$({ target: 'Promise', stat: true }, { - any: function any(iterable) { - var C = this; - var capability = newPromiseCapabilityModule.f(C); - var resolve = capability.resolve; - var reject = capability.reject; - var result = perform(function () { - var promiseResolve = aFunction(C.resolve); - var errors = []; - var counter = 0; - var remaining = 1; - var alreadyResolved = false; - iterate(iterable, function (promise) { - var index = counter++; - var alreadyRejected = false; - errors.push(undefined); - remaining++; - promiseResolve.call(C, promise).then(function (value) { - if (alreadyRejected || alreadyResolved) return; - alreadyResolved = true; - resolve(value); - }, function (error) { - if (alreadyRejected || alreadyResolved) return; - alreadyRejected = true; - errors[index] = error; - --remaining || reject(new (getBuiltIn('AggregateError'))(errors, PROMISE_ANY_ERROR)); - }); - }); - --remaining || reject(new (getBuiltIn('AggregateError'))(errors, PROMISE_ANY_ERROR)); - }); - if (result.error) reject(result.value); - return capability.promise; - } -}); + /** + * Returns color representation in HSLA format + * @return {String} ex: hsla(0-360,0%-100%,0%-100%,0-1) + */ + toHsla: function() { + var source = this.getSource(), + hsl = this._rgbToHsl(source[0], source[1], source[2]); + return 'hsla(' + hsl[0] + ',' + hsl[1] + '%,' + hsl[2] + '%,' + source[3] + ')'; + }, -/***/ }), + /** + * Returns color representation in HEX format + * @return {String} ex: FF5555 + */ + toHex: function() { + var source = this.getSource(), r, g, b; -/***/ "./node_modules/core-js-pure/modules/es.promise.finally.js": -/*!*****************************************************************!*\ - !*** ./node_modules/core-js-pure/modules/es.promise.finally.js ***! - \*****************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + r = source[0].toString(16); + r = (r.length === 1) ? ('0' + r) : r; -"use strict"; + g = source[1].toString(16); + g = (g.length === 1) ? ('0' + g) : g; -var $ = __webpack_require__(/*! ../internals/export */ "./node_modules/core-js-pure/internals/export.js"); -var IS_PURE = __webpack_require__(/*! ../internals/is-pure */ "./node_modules/core-js-pure/internals/is-pure.js"); -var NativePromise = __webpack_require__(/*! ../internals/native-promise-constructor */ "./node_modules/core-js-pure/internals/native-promise-constructor.js"); -var fails = __webpack_require__(/*! ../internals/fails */ "./node_modules/core-js-pure/internals/fails.js"); -var getBuiltIn = __webpack_require__(/*! ../internals/get-built-in */ "./node_modules/core-js-pure/internals/get-built-in.js"); -var speciesConstructor = __webpack_require__(/*! ../internals/species-constructor */ "./node_modules/core-js-pure/internals/species-constructor.js"); -var promiseResolve = __webpack_require__(/*! ../internals/promise-resolve */ "./node_modules/core-js-pure/internals/promise-resolve.js"); -var redefine = __webpack_require__(/*! ../internals/redefine */ "./node_modules/core-js-pure/internals/redefine.js"); + b = source[2].toString(16); + b = (b.length === 1) ? ('0' + b) : b; -// Safari bug https://bugs.webkit.org/show_bug.cgi?id=200829 -var NON_GENERIC = !!NativePromise && fails(function () { - NativePromise.prototype['finally'].call({ then: function () { /* empty */ } }, function () { /* empty */ }); -}); + return r.toUpperCase() + g.toUpperCase() + b.toUpperCase(); + }, -// `Promise.prototype.finally` method -// https://tc39.es/ecma262/#sec-promise.prototype.finally -$({ target: 'Promise', proto: true, real: true, forced: NON_GENERIC }, { - 'finally': function (onFinally) { - var C = speciesConstructor(this, getBuiltIn('Promise')); - var isFunction = typeof onFinally == 'function'; - return this.then( - isFunction ? function (x) { - return promiseResolve(C, onFinally()).then(function () { return x; }); - } : onFinally, - isFunction ? function (e) { - return promiseResolve(C, onFinally()).then(function () { throw e; }); - } : onFinally - ); - } -}); + /** + * Returns color representation in HEXA format + * @return {String} ex: FF5555CC + */ + toHexa: function() { + var source = this.getSource(), a; -// makes sure that native promise-based APIs `Promise#finally` properly works with patched `Promise#then` -if (!IS_PURE && typeof NativePromise == 'function') { - var method = getBuiltIn('Promise').prototype['finally']; - if (NativePromise.prototype['finally'] !== method) { - redefine(NativePromise.prototype, 'finally', method, { unsafe: true }); - } -} + a = Math.round(source[3] * 255); + a = a.toString(16); + a = (a.length === 1) ? ('0' + a) : a; + return this.toHex() + a.toUpperCase(); + }, -/***/ }), + /** + * Gets value of alpha channel for this color + * @return {Number} 0-1 + */ + getAlpha: function() { + return this.getSource()[3]; + }, -/***/ "./node_modules/core-js-pure/modules/es.promise.js": -/*!*********************************************************!*\ - !*** ./node_modules/core-js-pure/modules/es.promise.js ***! - \*********************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Sets value of alpha channel for this color + * @param {Number} alpha Alpha value 0-1 + * @return {fabric.Color} thisArg + */ + setAlpha: function(alpha) { + var source = this.getSource(); + source[3] = alpha; + this.setSource(source); + return this; + }, -"use strict"; + /** + * Transforms color to its grayscale representation + * @return {fabric.Color} thisArg + */ + toGrayscale: function() { + var source = this.getSource(), + average = parseInt((source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0), 10), + currentAlpha = source[3]; + this.setSource([average, average, average, currentAlpha]); + return this; + }, -var $ = __webpack_require__(/*! ../internals/export */ "./node_modules/core-js-pure/internals/export.js"); -var IS_PURE = __webpack_require__(/*! ../internals/is-pure */ "./node_modules/core-js-pure/internals/is-pure.js"); -var global = __webpack_require__(/*! ../internals/global */ "./node_modules/core-js-pure/internals/global.js"); -var getBuiltIn = __webpack_require__(/*! ../internals/get-built-in */ "./node_modules/core-js-pure/internals/get-built-in.js"); -var NativePromise = __webpack_require__(/*! ../internals/native-promise-constructor */ "./node_modules/core-js-pure/internals/native-promise-constructor.js"); -var redefine = __webpack_require__(/*! ../internals/redefine */ "./node_modules/core-js-pure/internals/redefine.js"); -var redefineAll = __webpack_require__(/*! ../internals/redefine-all */ "./node_modules/core-js-pure/internals/redefine-all.js"); -var setPrototypeOf = __webpack_require__(/*! ../internals/object-set-prototype-of */ "./node_modules/core-js-pure/internals/object-set-prototype-of.js"); -var setToStringTag = __webpack_require__(/*! ../internals/set-to-string-tag */ "./node_modules/core-js-pure/internals/set-to-string-tag.js"); -var setSpecies = __webpack_require__(/*! ../internals/set-species */ "./node_modules/core-js-pure/internals/set-species.js"); -var isObject = __webpack_require__(/*! ../internals/is-object */ "./node_modules/core-js-pure/internals/is-object.js"); -var aFunction = __webpack_require__(/*! ../internals/a-function */ "./node_modules/core-js-pure/internals/a-function.js"); -var anInstance = __webpack_require__(/*! ../internals/an-instance */ "./node_modules/core-js-pure/internals/an-instance.js"); -var inspectSource = __webpack_require__(/*! ../internals/inspect-source */ "./node_modules/core-js-pure/internals/inspect-source.js"); -var iterate = __webpack_require__(/*! ../internals/iterate */ "./node_modules/core-js-pure/internals/iterate.js"); -var checkCorrectnessOfIteration = __webpack_require__(/*! ../internals/check-correctness-of-iteration */ "./node_modules/core-js-pure/internals/check-correctness-of-iteration.js"); -var speciesConstructor = __webpack_require__(/*! ../internals/species-constructor */ "./node_modules/core-js-pure/internals/species-constructor.js"); -var task = __webpack_require__(/*! ../internals/task */ "./node_modules/core-js-pure/internals/task.js").set; -var microtask = __webpack_require__(/*! ../internals/microtask */ "./node_modules/core-js-pure/internals/microtask.js"); -var promiseResolve = __webpack_require__(/*! ../internals/promise-resolve */ "./node_modules/core-js-pure/internals/promise-resolve.js"); -var hostReportErrors = __webpack_require__(/*! ../internals/host-report-errors */ "./node_modules/core-js-pure/internals/host-report-errors.js"); -var newPromiseCapabilityModule = __webpack_require__(/*! ../internals/new-promise-capability */ "./node_modules/core-js-pure/internals/new-promise-capability.js"); -var perform = __webpack_require__(/*! ../internals/perform */ "./node_modules/core-js-pure/internals/perform.js"); -var InternalStateModule = __webpack_require__(/*! ../internals/internal-state */ "./node_modules/core-js-pure/internals/internal-state.js"); -var isForced = __webpack_require__(/*! ../internals/is-forced */ "./node_modules/core-js-pure/internals/is-forced.js"); -var wellKnownSymbol = __webpack_require__(/*! ../internals/well-known-symbol */ "./node_modules/core-js-pure/internals/well-known-symbol.js"); -var IS_BROWSER = __webpack_require__(/*! ../internals/engine-is-browser */ "./node_modules/core-js-pure/internals/engine-is-browser.js"); -var IS_NODE = __webpack_require__(/*! ../internals/engine-is-node */ "./node_modules/core-js-pure/internals/engine-is-node.js"); -var V8_VERSION = __webpack_require__(/*! ../internals/engine-v8-version */ "./node_modules/core-js-pure/internals/engine-v8-version.js"); + /** + * Transforms color to its black and white representation + * @param {Number} threshold + * @return {fabric.Color} thisArg + */ + toBlackWhite: function(threshold) { + var source = this.getSource(), + average = (source[0] * 0.3 + source[1] * 0.59 + source[2] * 0.11).toFixed(0), + currentAlpha = source[3]; -var SPECIES = wellKnownSymbol('species'); -var PROMISE = 'Promise'; -var getInternalState = InternalStateModule.get; -var setInternalState = InternalStateModule.set; -var getInternalPromiseState = InternalStateModule.getterFor(PROMISE); -var NativePromisePrototype = NativePromise && NativePromise.prototype; -var PromiseConstructor = NativePromise; -var PromiseConstructorPrototype = NativePromisePrototype; -var TypeError = global.TypeError; -var document = global.document; -var process = global.process; -var newPromiseCapability = newPromiseCapabilityModule.f; -var newGenericPromiseCapability = newPromiseCapability; -var DISPATCH_EVENT = !!(document && document.createEvent && global.dispatchEvent); -var NATIVE_REJECTION_EVENT = typeof PromiseRejectionEvent == 'function'; -var UNHANDLED_REJECTION = 'unhandledrejection'; -var REJECTION_HANDLED = 'rejectionhandled'; -var PENDING = 0; -var FULFILLED = 1; -var REJECTED = 2; -var HANDLED = 1; -var UNHANDLED = 2; -var SUBCLASSING = false; -var Internal, OwnPromiseCapability, PromiseWrapper, nativeThen; + threshold = threshold || 127; -var FORCED = isForced(PROMISE, function () { - var GLOBAL_CORE_JS_PROMISE = inspectSource(PromiseConstructor) !== String(PromiseConstructor); - // V8 6.6 (Node 10 and Chrome 66) have a bug with resolving custom thenables - // https://bugs.chromium.org/p/chromium/issues/detail?id=830565 - // We can't detect it synchronously, so just check versions - if (!GLOBAL_CORE_JS_PROMISE && V8_VERSION === 66) return true; - // We need Promise#finally in the pure version for preventing prototype pollution - if (IS_PURE && !PromiseConstructorPrototype['finally']) return true; - // We can't use @@species feature detection in V8 since it causes - // deoptimization and performance degradation - // https://github.com/zloirock/core-js/issues/679 - if (V8_VERSION >= 51 && /native code/.test(PromiseConstructor)) return false; - // Detect correctness of subclassing with @@species support - var promise = new PromiseConstructor(function (resolve) { resolve(1); }); - var FakePromise = function (exec) { - exec(function () { /* empty */ }, function () { /* empty */ }); - }; - var constructor = promise.constructor = {}; - constructor[SPECIES] = FakePromise; - SUBCLASSING = promise.then(function () { /* empty */ }) instanceof FakePromise; - if (!SUBCLASSING) return true; - // Unhandled rejections tracking support, NodeJS Promise without it fails @@species test - return !GLOBAL_CORE_JS_PROMISE && IS_BROWSER && !NATIVE_REJECTION_EVENT; -}); + average = (Number(average) < Number(threshold)) ? 0 : 255; + this.setSource([average, average, average, currentAlpha]); + return this; + }, -var INCORRECT_ITERATION = FORCED || !checkCorrectnessOfIteration(function (iterable) { - PromiseConstructor.all(iterable)['catch'](function () { /* empty */ }); -}); + /** + * Overlays color with another color + * @param {String|fabric.Color} otherColor + * @return {fabric.Color} thisArg + */ + overlayWith: function(otherColor) { + if (!(otherColor instanceof Color)) { + otherColor = new Color(otherColor); + } -// helpers -var isThenable = function (it) { - var then; - return isObject(it) && typeof (then = it.then) == 'function' ? then : false; -}; + var result = [], + alpha = this.getAlpha(), + otherAlpha = 0.5, + source = this.getSource(), + otherSource = otherColor.getSource(), i; -var notify = function (state, isReject) { - if (state.notified) return; - state.notified = true; - var chain = state.reactions; - microtask(function () { - var value = state.value; - var ok = state.state == FULFILLED; - var index = 0; - // variable length - can't use forEach - while (chain.length > index) { - var reaction = chain[index++]; - var handler = ok ? reaction.ok : reaction.fail; - var resolve = reaction.resolve; - var reject = reaction.reject; - var domain = reaction.domain; - var result, then, exited; - try { - if (handler) { - if (!ok) { - if (state.rejection === UNHANDLED) onHandleUnhandled(state); - state.rejection = HANDLED; - } - if (handler === true) result = value; - else { - if (domain) domain.enter(); - result = handler(value); // can throw - if (domain) { - domain.exit(); - exited = true; - } - } - if (result === reaction.promise) { - reject(TypeError('Promise-chain cycle')); - } else if (then = isThenable(result)) { - then.call(result, resolve, reject); - } else resolve(result); - } else reject(value); - } catch (error) { - if (domain && !exited) domain.exit(); - reject(error); + for (i = 0; i < 3; i++) { + result.push(Math.round((source[i] * (1 - otherAlpha)) + (otherSource[i] * otherAlpha))); } + + result[3] = alpha; + this.setSource(result); + return this; } - state.reactions = []; - state.notified = false; - if (isReject && !state.rejection) onUnhandled(state); - }); -}; + }; -var dispatchEvent = function (name, promise, reason) { - var event, handler; - if (DISPATCH_EVENT) { - event = document.createEvent('Event'); - event.promise = promise; - event.reason = reason; - event.initEvent(name, false, true); - global.dispatchEvent(event); - } else event = { promise: promise, reason: reason }; - if (!NATIVE_REJECTION_EVENT && (handler = global['on' + name])) handler(event); - else if (name === UNHANDLED_REJECTION) hostReportErrors('Unhandled promise rejection', reason); -}; + /** + * Regex matching color in RGB or RGBA formats (ex: rgb(0, 0, 0), rgba(255, 100, 10, 0.5), rgba( 255 , 100 , 10 , 0.5 ), rgb(1,1,1), rgba(100%, 60%, 10%, 0.5)) + * @static + * @field + * @memberOf fabric.Color + */ + // eslint-disable-next-line max-len + fabric.Color.reRGBa = /^rgba?\(\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*,\s*(\d{1,3}(?:\.\d+)?\%?)\s*(?:\s*,\s*((?:\d*\.?\d+)?)\s*)?\)$/i; -var onUnhandled = function (state) { - task.call(global, function () { - var promise = state.facade; - var value = state.value; - var IS_UNHANDLED = isUnhandled(state); - var result; - if (IS_UNHANDLED) { - result = perform(function () { - if (IS_NODE) { - process.emit('unhandledRejection', value, promise); - } else dispatchEvent(UNHANDLED_REJECTION, promise, value); - }); - // Browsers should not trigger `rejectionHandled` event if it was handled here, NodeJS - should - state.rejection = IS_NODE || isUnhandled(state) ? UNHANDLED : HANDLED; - if (result.error) throw result.value; - } - }); -}; + /** + * Regex matching color in HSL or HSLA formats (ex: hsl(200, 80%, 10%), hsla(300, 50%, 80%, 0.5), hsla( 300 , 50% , 80% , 0.5 )) + * @static + * @field + * @memberOf fabric.Color + */ + fabric.Color.reHSLa = /^hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\)$/i; -var isUnhandled = function (state) { - return state.rejection !== HANDLED && !state.parent; -}; + /** + * Regex matching color in HEX format (ex: #FF5544CC, #FF5555, 010155, aff) + * @static + * @field + * @memberOf fabric.Color + */ + fabric.Color.reHex = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i; -var onHandleUnhandled = function (state) { - task.call(global, function () { - var promise = state.facade; - if (IS_NODE) { - process.emit('rejectionHandled', promise); - } else dispatchEvent(REJECTION_HANDLED, promise, state.value); - }); -}; - -var bind = function (fn, state, unwrap) { - return function (value) { - fn(state, value, unwrap); + /** + * Map of the 148 color names with HEX code + * @static + * @field + * @memberOf fabric.Color + * @see: https://www.w3.org/TR/css3-color/#svg-color + */ + fabric.Color.colorNameMap = { + aliceblue: '#F0F8FF', + antiquewhite: '#FAEBD7', + aqua: '#00FFFF', + aquamarine: '#7FFFD4', + azure: '#F0FFFF', + beige: '#F5F5DC', + bisque: '#FFE4C4', + black: '#000000', + blanchedalmond: '#FFEBCD', + blue: '#0000FF', + blueviolet: '#8A2BE2', + brown: '#A52A2A', + burlywood: '#DEB887', + cadetblue: '#5F9EA0', + chartreuse: '#7FFF00', + chocolate: '#D2691E', + coral: '#FF7F50', + cornflowerblue: '#6495ED', + cornsilk: '#FFF8DC', + crimson: '#DC143C', + cyan: '#00FFFF', + darkblue: '#00008B', + darkcyan: '#008B8B', + darkgoldenrod: '#B8860B', + darkgray: '#A9A9A9', + darkgrey: '#A9A9A9', + darkgreen: '#006400', + darkkhaki: '#BDB76B', + darkmagenta: '#8B008B', + darkolivegreen: '#556B2F', + darkorange: '#FF8C00', + darkorchid: '#9932CC', + darkred: '#8B0000', + darksalmon: '#E9967A', + darkseagreen: '#8FBC8F', + darkslateblue: '#483D8B', + darkslategray: '#2F4F4F', + darkslategrey: '#2F4F4F', + darkturquoise: '#00CED1', + darkviolet: '#9400D3', + deeppink: '#FF1493', + deepskyblue: '#00BFFF', + dimgray: '#696969', + dimgrey: '#696969', + dodgerblue: '#1E90FF', + firebrick: '#B22222', + floralwhite: '#FFFAF0', + forestgreen: '#228B22', + fuchsia: '#FF00FF', + gainsboro: '#DCDCDC', + ghostwhite: '#F8F8FF', + gold: '#FFD700', + goldenrod: '#DAA520', + gray: '#808080', + grey: '#808080', + green: '#008000', + greenyellow: '#ADFF2F', + honeydew: '#F0FFF0', + hotpink: '#FF69B4', + indianred: '#CD5C5C', + indigo: '#4B0082', + ivory: '#FFFFF0', + khaki: '#F0E68C', + lavender: '#E6E6FA', + lavenderblush: '#FFF0F5', + lawngreen: '#7CFC00', + lemonchiffon: '#FFFACD', + lightblue: '#ADD8E6', + lightcoral: '#F08080', + lightcyan: '#E0FFFF', + lightgoldenrodyellow: '#FAFAD2', + lightgray: '#D3D3D3', + lightgrey: '#D3D3D3', + lightgreen: '#90EE90', + lightpink: '#FFB6C1', + lightsalmon: '#FFA07A', + lightseagreen: '#20B2AA', + lightskyblue: '#87CEFA', + lightslategray: '#778899', + lightslategrey: '#778899', + lightsteelblue: '#B0C4DE', + lightyellow: '#FFFFE0', + lime: '#00FF00', + limegreen: '#32CD32', + linen: '#FAF0E6', + magenta: '#FF00FF', + maroon: '#800000', + mediumaquamarine: '#66CDAA', + mediumblue: '#0000CD', + mediumorchid: '#BA55D3', + mediumpurple: '#9370DB', + mediumseagreen: '#3CB371', + mediumslateblue: '#7B68EE', + mediumspringgreen: '#00FA9A', + mediumturquoise: '#48D1CC', + mediumvioletred: '#C71585', + midnightblue: '#191970', + mintcream: '#F5FFFA', + mistyrose: '#FFE4E1', + moccasin: '#FFE4B5', + navajowhite: '#FFDEAD', + navy: '#000080', + oldlace: '#FDF5E6', + olive: '#808000', + olivedrab: '#6B8E23', + orange: '#FFA500', + orangered: '#FF4500', + orchid: '#DA70D6', + palegoldenrod: '#EEE8AA', + palegreen: '#98FB98', + paleturquoise: '#AFEEEE', + palevioletred: '#DB7093', + papayawhip: '#FFEFD5', + peachpuff: '#FFDAB9', + peru: '#CD853F', + pink: '#FFC0CB', + plum: '#DDA0DD', + powderblue: '#B0E0E6', + purple: '#800080', + rebeccapurple: '#663399', + red: '#FF0000', + rosybrown: '#BC8F8F', + royalblue: '#4169E1', + saddlebrown: '#8B4513', + salmon: '#FA8072', + sandybrown: '#F4A460', + seagreen: '#2E8B57', + seashell: '#FFF5EE', + sienna: '#A0522D', + silver: '#C0C0C0', + skyblue: '#87CEEB', + slateblue: '#6A5ACD', + slategray: '#708090', + slategrey: '#708090', + snow: '#FFFAFA', + springgreen: '#00FF7F', + steelblue: '#4682B4', + tan: '#D2B48C', + teal: '#008080', + thistle: '#D8BFD8', + tomato: '#FF6347', + turquoise: '#40E0D0', + violet: '#EE82EE', + wheat: '#F5DEB3', + white: '#FFFFFF', + whitesmoke: '#F5F5F5', + yellow: '#FFFF00', + yellowgreen: '#9ACD32' }; -}; - -var internalReject = function (state, value, unwrap) { - if (state.done) return; - state.done = true; - if (unwrap) state = unwrap; - state.value = value; - state.state = REJECTED; - notify(state, true); -}; -var internalResolve = function (state, value, unwrap) { - if (state.done) return; - state.done = true; - if (unwrap) state = unwrap; - try { - if (state.facade === value) throw TypeError("Promise can't be resolved itself"); - var then = isThenable(value); - if (then) { - microtask(function () { - var wrapper = { done: false }; - try { - then.call(value, - bind(internalResolve, wrapper, state), - bind(internalReject, wrapper, state) - ); - } catch (error) { - internalReject(wrapper, error, state); - } - }); - } else { - state.value = value; - state.state = FULFILLED; - notify(state, false); + /** + * @private + * @param {Number} p + * @param {Number} q + * @param {Number} t + * @return {Number} + */ + function hue2rgb(p, q, t) { + if (t < 0) { + t += 1; } - } catch (error) { - internalReject({ done: false }, error, state); + if (t > 1) { + t -= 1; + } + if (t < 1 / 6) { + return p + (q - p) * 6 * t; + } + if (t < 1 / 2) { + return q; + } + if (t < 2 / 3) { + return p + (q - p) * (2 / 3 - t) * 6; + } + return p; } -}; -// constructor polyfill -if (FORCED) { - // 25.4.3.1 Promise(executor) - PromiseConstructor = function Promise(executor) { - anInstance(this, PromiseConstructor, PROMISE); - aFunction(executor); - Internal.call(this); - var state = getInternalState(this); - try { - executor(bind(internalResolve, state), bind(internalReject, state)); - } catch (error) { - internalReject(state, error); - } - }; - PromiseConstructorPrototype = PromiseConstructor.prototype; - // eslint-disable-next-line no-unused-vars -- required for `.length` - Internal = function Promise(executor) { - setInternalState(this, { - type: PROMISE, - done: false, - notified: false, - parent: false, - reactions: [], - rejection: false, - state: PENDING, - value: undefined - }); + /** + * Returns new color object, when given a color in RGB format + * @memberOf fabric.Color + * @param {String} color Color value ex: rgb(0-255,0-255,0-255) + * @return {fabric.Color} + */ + fabric.Color.fromRgb = function(color) { + return Color.fromSource(Color.sourceFromRgb(color)); }; - Internal.prototype = redefineAll(PromiseConstructorPrototype, { - // `Promise.prototype.then` method - // https://tc39.es/ecma262/#sec-promise.prototype.then - then: function then(onFulfilled, onRejected) { - var state = getInternalPromiseState(this); - var reaction = newPromiseCapability(speciesConstructor(this, PromiseConstructor)); - reaction.ok = typeof onFulfilled == 'function' ? onFulfilled : true; - reaction.fail = typeof onRejected == 'function' && onRejected; - reaction.domain = IS_NODE ? process.domain : undefined; - state.parent = true; - state.reactions.push(reaction); - if (state.state != PENDING) notify(state, false); - return reaction.promise; - }, - // `Promise.prototype.catch` method - // https://tc39.es/ecma262/#sec-promise.prototype.catch - 'catch': function (onRejected) { - return this.then(undefined, onRejected); + + /** + * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in RGB or RGBA format + * @memberOf fabric.Color + * @param {String} color Color value ex: rgb(0-255,0-255,0-255), rgb(0%-100%,0%-100%,0%-100%) + * @return {Array} source + */ + fabric.Color.sourceFromRgb = function(color) { + var match = color.match(Color.reRGBa); + if (match) { + var r = parseInt(match[1], 10) / (/%$/.test(match[1]) ? 100 : 1) * (/%$/.test(match[1]) ? 255 : 1), + g = parseInt(match[2], 10) / (/%$/.test(match[2]) ? 100 : 1) * (/%$/.test(match[2]) ? 255 : 1), + b = parseInt(match[3], 10) / (/%$/.test(match[3]) ? 100 : 1) * (/%$/.test(match[3]) ? 255 : 1); + + return [ + parseInt(r, 10), + parseInt(g, 10), + parseInt(b, 10), + match[4] ? parseFloat(match[4]) : 1 + ]; } - }); - OwnPromiseCapability = function () { - var promise = new Internal(); - var state = getInternalState(promise); - this.promise = promise; - this.resolve = bind(internalResolve, state); - this.reject = bind(internalReject, state); - }; - newPromiseCapabilityModule.f = newPromiseCapability = function (C) { - return C === PromiseConstructor || C === PromiseWrapper - ? new OwnPromiseCapability(C) - : newGenericPromiseCapability(C); }; - if (!IS_PURE && typeof NativePromise == 'function' && NativePromisePrototype !== Object.prototype) { - nativeThen = NativePromisePrototype.then; + /** + * Returns new color object, when given a color in RGBA format + * @static + * @function + * @memberOf fabric.Color + * @param {String} color + * @return {fabric.Color} + */ + fabric.Color.fromRgba = Color.fromRgb; - if (!SUBCLASSING) { - // make `Promise#then` return a polyfilled `Promise` for native promise-based APIs - redefine(NativePromisePrototype, 'then', function then(onFulfilled, onRejected) { - var that = this; - return new PromiseConstructor(function (resolve, reject) { - nativeThen.call(that, resolve, reject); - }).then(onFulfilled, onRejected); - // https://github.com/zloirock/core-js/issues/640 - }, { unsafe: true }); + /** + * Returns new color object, when given a color in HSL format + * @param {String} color Color value ex: hsl(0-260,0%-100%,0%-100%) + * @memberOf fabric.Color + * @return {fabric.Color} + */ + fabric.Color.fromHsl = function(color) { + return Color.fromSource(Color.sourceFromHsl(color)); + }; - // makes sure that native promise-based APIs `Promise#catch` properly works with patched `Promise#then` - redefine(NativePromisePrototype, 'catch', PromiseConstructorPrototype['catch'], { unsafe: true }); + /** + * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HSL or HSLA format. + * Adapted from https://github.com/mjijackson + * @memberOf fabric.Color + * @param {String} color Color value ex: hsl(0-360,0%-100%,0%-100%) or hsla(0-360,0%-100%,0%-100%, 0-1) + * @return {Array} source + * @see http://http://www.w3.org/TR/css3-color/#hsl-color + */ + fabric.Color.sourceFromHsl = function(color) { + var match = color.match(Color.reHSLa); + if (!match) { + return; } - // make `.constructor === Promise` work for native promise-based APIs - try { - delete NativePromisePrototype.constructor; - } catch (error) { /* empty */ } + var h = (((parseFloat(match[1]) % 360) + 360) % 360) / 360, + s = parseFloat(match[2]) / (/%$/.test(match[2]) ? 100 : 1), + l = parseFloat(match[3]) / (/%$/.test(match[3]) ? 100 : 1), + r, g, b; - // make `instanceof Promise` work for native promise-based APIs - if (setPrototypeOf) { - setPrototypeOf(NativePromisePrototype, PromiseConstructorPrototype); + if (s === 0) { + r = g = b = l; } - } -} - -$({ global: true, wrap: true, forced: FORCED }, { - Promise: PromiseConstructor -}); + else { + var q = l <= 0.5 ? l * (s + 1) : l + s - l * s, + p = l * 2 - q; -setToStringTag(PromiseConstructor, PROMISE, false, true); -setSpecies(PROMISE); - -PromiseWrapper = getBuiltIn(PROMISE); + r = hue2rgb(p, q, h + 1 / 3); + g = hue2rgb(p, q, h); + b = hue2rgb(p, q, h - 1 / 3); + } -// statics -$({ target: PROMISE, stat: true, forced: FORCED }, { - // `Promise.reject` method - // https://tc39.es/ecma262/#sec-promise.reject - reject: function reject(r) { - var capability = newPromiseCapability(this); - capability.reject.call(undefined, r); - return capability.promise; - } -}); + return [ + Math.round(r * 255), + Math.round(g * 255), + Math.round(b * 255), + match[4] ? parseFloat(match[4]) : 1 + ]; + }; -$({ target: PROMISE, stat: true, forced: IS_PURE || FORCED }, { - // `Promise.resolve` method - // https://tc39.es/ecma262/#sec-promise.resolve - resolve: function resolve(x) { - return promiseResolve(IS_PURE && this === PromiseWrapper ? PromiseConstructor : this, x); - } -}); + /** + * Returns new color object, when given a color in HSLA format + * @static + * @function + * @memberOf fabric.Color + * @param {String} color + * @return {fabric.Color} + */ + fabric.Color.fromHsla = Color.fromHsl; -$({ target: PROMISE, stat: true, forced: INCORRECT_ITERATION }, { - // `Promise.all` method - // https://tc39.es/ecma262/#sec-promise.all - all: function all(iterable) { - var C = this; - var capability = newPromiseCapability(C); - var resolve = capability.resolve; - var reject = capability.reject; - var result = perform(function () { - var $promiseResolve = aFunction(C.resolve); - var values = []; - var counter = 0; - var remaining = 1; - iterate(iterable, function (promise) { - var index = counter++; - var alreadyCalled = false; - values.push(undefined); - remaining++; - $promiseResolve.call(C, promise).then(function (value) { - if (alreadyCalled) return; - alreadyCalled = true; - values[index] = value; - --remaining || resolve(values); - }, reject); - }); - --remaining || resolve(values); - }); - if (result.error) reject(result.value); - return capability.promise; - }, - // `Promise.race` method - // https://tc39.es/ecma262/#sec-promise.race - race: function race(iterable) { - var C = this; - var capability = newPromiseCapability(C); - var reject = capability.reject; - var result = perform(function () { - var $promiseResolve = aFunction(C.resolve); - iterate(iterable, function (promise) { - $promiseResolve.call(C, promise).then(capability.resolve, reject); - }); - }); - if (result.error) reject(result.value); - return capability.promise; - } -}); + /** + * Returns new color object, when given a color in HEX format + * @static + * @memberOf fabric.Color + * @param {String} color Color value ex: FF5555 + * @return {fabric.Color} + */ + fabric.Color.fromHex = function(color) { + return Color.fromSource(Color.sourceFromHex(color)); + }; + /** + * Returns array representation (ex: [100, 100, 200, 1]) of a color that's in HEX format + * @static + * @memberOf fabric.Color + * @param {String} color ex: FF5555 or FF5544CC (RGBa) + * @return {Array} source + */ + fabric.Color.sourceFromHex = function(color) { + if (color.match(Color.reHex)) { + var value = color.slice(color.indexOf('#') + 1), + isShortNotation = (value.length === 3 || value.length === 4), + isRGBa = (value.length === 8 || value.length === 4), + r = isShortNotation ? (value.charAt(0) + value.charAt(0)) : value.substring(0, 2), + g = isShortNotation ? (value.charAt(1) + value.charAt(1)) : value.substring(2, 4), + b = isShortNotation ? (value.charAt(2) + value.charAt(2)) : value.substring(4, 6), + a = isRGBa ? (isShortNotation ? (value.charAt(3) + value.charAt(3)) : value.substring(6, 8)) : 'FF'; + + return [ + parseInt(r, 16), + parseInt(g, 16), + parseInt(b, 16), + parseFloat((parseInt(a, 16) / 255).toFixed(2)) + ]; + } + }; -/***/ }), + /** + * Returns new color object, when given color in array representation (ex: [200, 100, 100, 0.5]) + * @static + * @memberOf fabric.Color + * @param {Array} source + * @return {fabric.Color} + */ + fabric.Color.fromSource = function(source) { + var oColor = new Color(); + oColor.setSource(source); + return oColor; + }; -/***/ "./node_modules/core-js-pure/modules/es.string.iterator.js": -/*!*****************************************************************!*\ - !*** ./node_modules/core-js-pure/modules/es.string.iterator.js ***! - \*****************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +})( true ? exports : 0); -"use strict"; -var charAt = __webpack_require__(/*! ../internals/string-multibyte */ "./node_modules/core-js-pure/internals/string-multibyte.js").charAt; -var InternalStateModule = __webpack_require__(/*! ../internals/internal-state */ "./node_modules/core-js-pure/internals/internal-state.js"); -var defineIterator = __webpack_require__(/*! ../internals/define-iterator */ "./node_modules/core-js-pure/internals/define-iterator.js"); +(function(global) { -var STRING_ITERATOR = 'String Iterator'; -var setInternalState = InternalStateModule.set; -var getInternalState = InternalStateModule.getterFor(STRING_ITERATOR); + 'use strict'; -// `String.prototype[@@iterator]` method -// https://tc39.es/ecma262/#sec-string.prototype-@@iterator -defineIterator(String, 'String', function (iterated) { - setInternalState(this, { - type: STRING_ITERATOR, - string: String(iterated), - index: 0 - }); -// `%StringIteratorPrototype%.next` method -// https://tc39.es/ecma262/#sec-%stringiteratorprototype%.next -}, function next() { - var state = getInternalState(this); - var string = state.string; - var index = state.index; - var point; - if (index >= string.length) return { value: undefined, done: true }; - point = charAt(string, index); - state.index += point.length; - return { value: point, done: false }; -}); + var fabric = global.fabric || (global.fabric = { }), + scaleMap = ['e', 'se', 's', 'sw', 'w', 'nw', 'n', 'ne', 'e'], + skewMap = ['ns', 'nesw', 'ew', 'nwse'], + controls = {}, + LEFT = 'left', TOP = 'top', RIGHT = 'right', BOTTOM = 'bottom', CENTER = 'center', + opposite = { + top: BOTTOM, + bottom: TOP, + left: RIGHT, + right: LEFT, + center: CENTER, + }, radiansToDegrees = fabric.util.radiansToDegrees, + sign = (Math.sign || function(x) { return ((x > 0) - (x < 0)) || +x; }); + /** + * Combine control position and object angle to find the control direction compared + * to the object center. + * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls + * @param {fabric.Control} control the control class + * @return {Number} 0 - 7 a quadrant number + */ + function findCornerQuadrant(fabricObject, control) { + var cornerAngle = fabricObject.angle + radiansToDegrees(Math.atan2(control.y, control.x)) + 360; + return Math.round((cornerAngle % 360) / 45); + } -/***/ }), + function fireEvent(eventName, options) { + var target = options.transform.target, + canvas = target.canvas, + canvasOptions = fabric.util.object.clone(options); + canvasOptions.target = target; + canvas && canvas.fire('object:' + eventName, canvasOptions); + target.fire(eventName, options); + } -/***/ "./node_modules/core-js-pure/modules/esnext.aggregate-error.js": -/*!*********************************************************************!*\ - !*** ./node_modules/core-js-pure/modules/esnext.aggregate-error.js ***! - \*********************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Inspect event and fabricObject properties to understand if the scaling action + * @param {Event} eventData from the user action + * @param {fabric.Object} fabricObject the fabric object about to scale + * @return {Boolean} true if scale is proportional + */ + function scaleIsProportional(eventData, fabricObject) { + var canvas = fabricObject.canvas, uniScaleKey = canvas.uniScaleKey, + uniformIsToggled = eventData[uniScaleKey]; + return (canvas.uniformScaling && !uniformIsToggled) || + (!canvas.uniformScaling && uniformIsToggled); + } -// TODO: Remove from `core-js@4` -__webpack_require__(/*! ./es.aggregate-error */ "./node_modules/core-js-pure/modules/es.aggregate-error.js"); + /** + * Checks if transform is centered + * @param {Object} transform transform data + * @return {Boolean} true if transform is centered + */ + function isTransformCentered(transform) { + return transform.originX === CENTER && transform.originY === CENTER; + } + /** + * Inspect fabricObject to understand if the current scaling action is allowed + * @param {fabric.Object} fabricObject the fabric object about to scale + * @param {String} by 'x' or 'y' or '' + * @param {Boolean} scaleProportionally true if we are trying to scale proportionally + * @return {Boolean} true if scaling is not allowed at current conditions + */ + function scalingIsForbidden(fabricObject, by, scaleProportionally) { + var lockX = fabricObject.lockScalingX, lockY = fabricObject.lockScalingY; + if (lockX && lockY) { + return true; + } + if (!by && (lockX || lockY) && scaleProportionally) { + return true; + } + if (lockX && by === 'x') { + return true; + } + if (lockY && by === 'y') { + return true; + } + return false; + } -/***/ }), + /** + * return the correct cursor style for the scale action + * @param {Event} eventData the javascript event that is causing the scale + * @param {fabric.Control} control the control that is interested in the action + * @param {fabric.Object} fabricObject the fabric object that is interested in the action + * @return {String} a valid css string for the cursor + */ + function scaleCursorStyleHandler(eventData, control, fabricObject) { + var notAllowed = 'not-allowed', + scaleProportionally = scaleIsProportional(eventData, fabricObject), + by = ''; + if (control.x !== 0 && control.y === 0) { + by = 'x'; + } + else if (control.x === 0 && control.y !== 0) { + by = 'y'; + } + if (scalingIsForbidden(fabricObject, by, scaleProportionally)) { + return notAllowed; + } + var n = findCornerQuadrant(fabricObject, control); + return scaleMap[n] + '-resize'; + } -/***/ "./node_modules/core-js-pure/modules/esnext.promise.all-settled.js": -/*!*************************************************************************!*\ - !*** ./node_modules/core-js-pure/modules/esnext.promise.all-settled.js ***! - \*************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * return the correct cursor style for the skew action + * @param {Event} eventData the javascript event that is causing the scale + * @param {fabric.Control} control the control that is interested in the action + * @param {fabric.Object} fabricObject the fabric object that is interested in the action + * @return {String} a valid css string for the cursor + */ + function skewCursorStyleHandler(eventData, control, fabricObject) { + var notAllowed = 'not-allowed'; + if (control.x !== 0 && fabricObject.lockSkewingY) { + return notAllowed; + } + if (control.y !== 0 && fabricObject.lockSkewingX) { + return notAllowed; + } + var n = findCornerQuadrant(fabricObject, control) % 4; + return skewMap[n] + '-resize'; + } -// TODO: Remove from `core-js@4` -__webpack_require__(/*! ./es.promise.all-settled.js */ "./node_modules/core-js-pure/modules/es.promise.all-settled.js"); + /** + * Combine skew and scale style handlers to cover fabric standard use case + * @param {Event} eventData the javascript event that is causing the scale + * @param {fabric.Control} control the control that is interested in the action + * @param {fabric.Object} fabricObject the fabric object that is interested in the action + * @return {String} a valid css string for the cursor + */ + function scaleSkewCursorStyleHandler(eventData, control, fabricObject) { + if (eventData[fabricObject.canvas.altActionKey]) { + return controls.skewCursorStyleHandler(eventData, control, fabricObject); + } + return controls.scaleCursorStyleHandler(eventData, control, fabricObject); + } + /** + * Inspect event, control and fabricObject to return the correct action name + * @param {Event} eventData the javascript event that is causing the scale + * @param {fabric.Control} control the control that is interested in the action + * @param {fabric.Object} fabricObject the fabric object that is interested in the action + * @return {String} an action name + */ + function scaleOrSkewActionName(eventData, control, fabricObject) { + var isAlternative = eventData[fabricObject.canvas.altActionKey]; + if (control.x === 0) { + // then is scaleY or skewX + return isAlternative ? 'skewX' : 'scaleY'; + } + if (control.y === 0) { + // then is scaleY or skewX + return isAlternative ? 'skewY' : 'scaleX'; + } + } -/***/ }), + /** + * Find the correct style for the control that is used for rotation. + * this function is very simple and it just take care of not-allowed or standard cursor + * @param {Event} eventData the javascript event that is causing the scale + * @param {fabric.Control} control the control that is interested in the action + * @param {fabric.Object} fabricObject the fabric object that is interested in the action + * @return {String} a valid css string for the cursor + */ + function rotationStyleHandler(eventData, control, fabricObject) { + if (fabricObject.lockRotation) { + return 'not-allowed'; + } + return control.cursorStyle; + } -/***/ "./node_modules/core-js-pure/modules/esnext.promise.any.js": -/*!*****************************************************************!*\ - !*** ./node_modules/core-js-pure/modules/esnext.promise.any.js ***! - \*****************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + function commonEventInfo(eventData, transform, x, y) { + return { + e: eventData, + transform: transform, + pointer: { + x: x, + y: y, + } + }; + } -// TODO: Remove from `core-js@4` -__webpack_require__(/*! ./es.promise.any */ "./node_modules/core-js-pure/modules/es.promise.any.js"); + /** + * Wrap an action handler with saving/restoring object position on the transform. + * this is the code that permits to objects to keep their position while transforming. + * @param {Function} actionHandler the function to wrap + * @return {Function} a function with an action handler signature + */ + function wrapWithFixedAnchor(actionHandler) { + return function(eventData, transform, x, y) { + var target = transform.target, centerPoint = target.getCenterPoint(), + constraint = target.translateToOriginPoint(centerPoint, transform.originX, transform.originY), + actionPerformed = actionHandler(eventData, transform, x, y); + target.setPositionByOrigin(constraint, transform.originX, transform.originY); + return actionPerformed; + }; + } + /** + * Wrap an action handler with firing an event if the action is performed + * @param {Function} actionHandler the function to wrap + * @return {Function} a function with an action handler signature + */ + function wrapWithFireEvent(eventName, actionHandler) { + return function(eventData, transform, x, y) { + var actionPerformed = actionHandler(eventData, transform, x, y); + if (actionPerformed) { + fireEvent(eventName, commonEventInfo(eventData, transform, x, y)); + } + return actionPerformed; + }; + } -/***/ }), + /** + * Transforms a point described by x and y in a distance from the top left corner of the object + * bounding box. + * @param {Object} transform + * @param {String} originX + * @param {String} originY + * @param {number} x + * @param {number} y + * @return {Fabric.Point} the normalized point + */ + function getLocalPoint(transform, originX, originY, x, y) { + var target = transform.target, + control = target.controls[transform.corner], + zoom = target.canvas.getZoom(), + padding = target.padding / zoom, + localPoint = target.toLocalPoint(new fabric.Point(x, y), originX, originY); + if (localPoint.x >= padding) { + localPoint.x -= padding; + } + if (localPoint.x <= -padding) { + localPoint.x += padding; + } + if (localPoint.y >= padding) { + localPoint.y -= padding; + } + if (localPoint.y <= padding) { + localPoint.y += padding; + } + localPoint.x -= control.offsetX; + localPoint.y -= control.offsetY; + return localPoint; + } -/***/ "./node_modules/core-js-pure/modules/esnext.promise.try.js": -/*!*****************************************************************!*\ - !*** ./node_modules/core-js-pure/modules/esnext.promise.try.js ***! - \*****************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Detect if the fabric object is flipped on one side. + * @param {fabric.Object} target + * @return {Boolean} true if one flip, but not two. + */ + function targetHasOneFlip(target) { + return target.flipX !== target.flipY; + } -"use strict"; + /** + * Utility function to compensate the scale factor when skew is applied on both axes + * @private + */ + function compensateScaleForSkew(target, oppositeSkew, scaleToCompensate, axis, reference) { + if (target[oppositeSkew] !== 0) { + var newDim = target._getTransformedDimensions()[axis]; + var newValue = reference / newDim * target[scaleToCompensate]; + target.set(scaleToCompensate, newValue); + } + } -var $ = __webpack_require__(/*! ../internals/export */ "./node_modules/core-js-pure/internals/export.js"); -var newPromiseCapabilityModule = __webpack_require__(/*! ../internals/new-promise-capability */ "./node_modules/core-js-pure/internals/new-promise-capability.js"); -var perform = __webpack_require__(/*! ../internals/perform */ "./node_modules/core-js-pure/internals/perform.js"); + /** + * Action handler for skewing on the X axis + * @private + */ + function skewObjectX(eventData, transform, x, y) { + var target = transform.target, + // find how big the object would be, if there was no skewX. takes in account scaling + dimNoSkew = target._getTransformedDimensions(0, target.skewY), + localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y), + // the mouse is in the center of the object, and we want it to stay there. + // so the object will grow twice as much as the mouse. + // this makes the skew growth to localPoint * 2 - dimNoSkew. + totalSkewSize = Math.abs(localPoint.x * 2) - dimNoSkew.x, + currentSkew = target.skewX, newSkew; + if (totalSkewSize < 2) { + // let's make it easy to go back to position 0. + newSkew = 0; + } + else { + newSkew = radiansToDegrees( + Math.atan2((totalSkewSize / target.scaleX), (dimNoSkew.y / target.scaleY)) + ); + // now we have to find the sign of the skew. + // it mostly depend on the origin of transformation. + if (transform.originX === LEFT && transform.originY === BOTTOM) { + newSkew = -newSkew; + } + if (transform.originX === RIGHT && transform.originY === TOP) { + newSkew = -newSkew; + } + if (targetHasOneFlip(target)) { + newSkew = -newSkew; + } + } + var hasSkewed = currentSkew !== newSkew; + if (hasSkewed) { + var dimBeforeSkewing = target._getTransformedDimensions().y; + target.set('skewX', newSkew); + compensateScaleForSkew(target, 'skewY', 'scaleY', 'y', dimBeforeSkewing); + } + return hasSkewed; + } -// `Promise.try` method -// https://github.com/tc39/proposal-promise-try -$({ target: 'Promise', stat: true }, { - 'try': function (callbackfn) { - var promiseCapability = newPromiseCapabilityModule.f(this); - var result = perform(callbackfn); - (result.error ? promiseCapability.reject : promiseCapability.resolve)(result.value); - return promiseCapability.promise; + /** + * Action handler for skewing on the Y axis + * @private + */ + function skewObjectY(eventData, transform, x, y) { + var target = transform.target, + // find how big the object would be, if there was no skewX. takes in account scaling + dimNoSkew = target._getTransformedDimensions(target.skewX, 0), + localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y), + // the mouse is in the center of the object, and we want it to stay there. + // so the object will grow twice as much as the mouse. + // this makes the skew growth to localPoint * 2 - dimNoSkew. + totalSkewSize = Math.abs(localPoint.y * 2) - dimNoSkew.y, + currentSkew = target.skewY, newSkew; + if (totalSkewSize < 2) { + // let's make it easy to go back to position 0. + newSkew = 0; + } + else { + newSkew = radiansToDegrees( + Math.atan2((totalSkewSize / target.scaleY), (dimNoSkew.x / target.scaleX)) + ); + // now we have to find the sign of the skew. + // it mostly depend on the origin of transformation. + if (transform.originX === LEFT && transform.originY === BOTTOM) { + newSkew = -newSkew; + } + if (transform.originX === RIGHT && transform.originY === TOP) { + newSkew = -newSkew; + } + if (targetHasOneFlip(target)) { + newSkew = -newSkew; + } + } + var hasSkewed = currentSkew !== newSkew; + if (hasSkewed) { + var dimBeforeSkewing = target._getTransformedDimensions().x; + target.set('skewY', newSkew); + compensateScaleForSkew(target, 'skewX', 'scaleX', 'x', dimBeforeSkewing); + } + return hasSkewed; } -}); + /** + * Wrapped Action handler for skewing on the Y axis, takes care of the + * skew direction and determine the correct transform origin for the anchor point + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened + */ + function skewHandlerX(eventData, transform, x, y) { + // step1 figure out and change transform origin. + // if skewX > 0 and originY bottom we anchor on right + // if skewX > 0 and originY top we anchor on left + // if skewX < 0 and originY bottom we anchor on left + // if skewX < 0 and originY top we anchor on right + // if skewX is 0, we look for mouse position to understand where are we going. + var target = transform.target, currentSkew = target.skewX, originX, originY = transform.originY; + if (target.lockSkewingX) { + return false; + } + if (currentSkew === 0) { + var localPointFromCenter = getLocalPoint(transform, CENTER, CENTER, x, y); + if (localPointFromCenter.x > 0) { + // we are pulling right, anchor left; + originX = LEFT; + } + else { + // we are pulling right, anchor right + originX = RIGHT; + } + } + else { + if (currentSkew > 0) { + originX = originY === TOP ? LEFT : RIGHT; + } + if (currentSkew < 0) { + originX = originY === TOP ? RIGHT : LEFT; + } + // is the object flipped on one side only? swap the origin. + if (targetHasOneFlip(target)) { + originX = originX === LEFT ? RIGHT : LEFT; + } + } + + // once we have the origin, we find the anchor point + transform.originX = originX; + var finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor(skewObjectX)); + return finalHandler(eventData, transform, x, y); + } -/***/ }), + /** + * Wrapped Action handler for skewing on the Y axis, takes care of the + * skew direction and determine the correct transform origin for the anchor point + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened + */ + function skewHandlerY(eventData, transform, x, y) { + // step1 figure out and change transform origin. + // if skewY > 0 and originX left we anchor on top + // if skewY > 0 and originX right we anchor on bottom + // if skewY < 0 and originX left we anchor on bottom + // if skewY < 0 and originX right we anchor on top + // if skewY is 0, we look for mouse position to understand where are we going. + var target = transform.target, currentSkew = target.skewY, originY, originX = transform.originX; + if (target.lockSkewingY) { + return false; + } + if (currentSkew === 0) { + var localPointFromCenter = getLocalPoint(transform, CENTER, CENTER, x, y); + if (localPointFromCenter.y > 0) { + // we are pulling down, anchor up; + originY = TOP; + } + else { + // we are pulling up, anchor down + originY = BOTTOM; + } + } + else { + if (currentSkew > 0) { + originY = originX === LEFT ? TOP : BOTTOM; + } + if (currentSkew < 0) { + originY = originX === LEFT ? BOTTOM : TOP; + } + // is the object flipped on one side only? swap the origin. + if (targetHasOneFlip(target)) { + originY = originY === TOP ? BOTTOM : TOP; + } + } -/***/ "./node_modules/core-js-pure/modules/web.dom-collections.iterator.js": -/*!***************************************************************************!*\ - !*** ./node_modules/core-js-pure/modules/web.dom-collections.iterator.js ***! - \***************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + // once we have the origin, we find the anchor point + transform.originY = originY; + var finalHandler = wrapWithFireEvent('skewing', wrapWithFixedAnchor(skewObjectY)); + return finalHandler(eventData, transform, x, y); + } -__webpack_require__(/*! ./es.array.iterator */ "./node_modules/core-js-pure/modules/es.array.iterator.js"); -var DOMIterables = __webpack_require__(/*! ../internals/dom-iterables */ "./node_modules/core-js-pure/internals/dom-iterables.js"); -var global = __webpack_require__(/*! ../internals/global */ "./node_modules/core-js-pure/internals/global.js"); -var classof = __webpack_require__(/*! ../internals/classof */ "./node_modules/core-js-pure/internals/classof.js"); -var createNonEnumerableProperty = __webpack_require__(/*! ../internals/create-non-enumerable-property */ "./node_modules/core-js-pure/internals/create-non-enumerable-property.js"); -var Iterators = __webpack_require__(/*! ../internals/iterators */ "./node_modules/core-js-pure/internals/iterators.js"); -var wellKnownSymbol = __webpack_require__(/*! ../internals/well-known-symbol */ "./node_modules/core-js-pure/internals/well-known-symbol.js"); + /** + * Action handler for rotation and snapping, without anchor point. + * Needs to be wrapped with `wrapWithFixedAnchor` to be effective + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened + * @private + */ + function rotationWithSnapping(eventData, transform, x, y) { + var t = transform, + target = t.target, + pivotPoint = target.translateToOriginPoint(target.getCenterPoint(), t.originX, t.originY); -var TO_STRING_TAG = wellKnownSymbol('toStringTag'); + if (target.lockRotation) { + return false; + } -for (var COLLECTION_NAME in DOMIterables) { - var Collection = global[COLLECTION_NAME]; - var CollectionPrototype = Collection && Collection.prototype; - if (CollectionPrototype && classof(CollectionPrototype) !== TO_STRING_TAG) { - createNonEnumerableProperty(CollectionPrototype, TO_STRING_TAG, COLLECTION_NAME); + var lastAngle = Math.atan2(t.ey - pivotPoint.y, t.ex - pivotPoint.x), + curAngle = Math.atan2(y - pivotPoint.y, x - pivotPoint.x), + angle = radiansToDegrees(curAngle - lastAngle + t.theta), + hasRotated = true; + + if (target.snapAngle > 0) { + var snapAngle = target.snapAngle, + snapThreshold = target.snapThreshold || snapAngle, + rightAngleLocked = Math.ceil(angle / snapAngle) * snapAngle, + leftAngleLocked = Math.floor(angle / snapAngle) * snapAngle; + + if (Math.abs(angle - leftAngleLocked) < snapThreshold) { + angle = leftAngleLocked; + } + else if (Math.abs(angle - rightAngleLocked) < snapThreshold) { + angle = rightAngleLocked; + } + } + + // normalize angle to positive value + if (angle < 0) { + angle = 360 + angle; + } + angle %= 360; + + hasRotated = target.angle !== angle; + target.angle = angle; + return hasRotated; } - Iterators[COLLECTION_NAME] = Iterators.Array; -} + /** + * Basic scaling logic, reused with different constrain for scaling X,Y, freely or equally. + * Needs to be wrapped with `wrapWithFixedAnchor` to be effective + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @param {Object} options additional information for scaling + * @param {String} options.by 'x', 'y', 'equally' or '' to indicate type of scaling + * @return {Boolean} true if some change happened + * @private + */ + function scaleObject(eventData, transform, x, y, options) { + options = options || {}; + var target = transform.target, + lockScalingX = target.lockScalingX, lockScalingY = target.lockScalingY, + by = options.by, newPoint, scaleX, scaleY, dim, + scaleProportionally = scaleIsProportional(eventData, target), + forbidScaling = scalingIsForbidden(target, by, scaleProportionally), + signX, signY, gestureScale = transform.gestureScale; + + if (forbidScaling) { + return false; + } + if (gestureScale) { + scaleX = transform.scaleX * gestureScale; + scaleY = transform.scaleY * gestureScale; + } + else { + newPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y); + // use of sign: We use sign to detect change of direction of an action. sign usually change when + // we cross the origin point with the mouse. So a scale flip for example. There is an issue when scaling + // by center and scaling using one middle control ( default: mr, mt, ml, mb), the mouse movement can easily + // cross many time the origin point and flip the object. so we need a way to filter out the noise. + // This ternary here should be ok to filter out X scaling when we want Y only and vice versa. + signX = by !== 'y' ? sign(newPoint.x) : 1; + signY = by !== 'x' ? sign(newPoint.y) : 1; + if (!transform.signX) { + transform.signX = signX; + } + if (!transform.signY) { + transform.signY = signY; + } + + if (target.lockScalingFlip && + (transform.signX !== signX || transform.signY !== signY) + ) { + return false; + } -/***/ }), + dim = target._getTransformedDimensions(); + // missing detection of flip and logic to switch the origin + if (scaleProportionally && !by) { + // uniform scaling + var distance = Math.abs(newPoint.x) + Math.abs(newPoint.y), + original = transform.original, + originalDistance = Math.abs(dim.x * original.scaleX / target.scaleX) + + Math.abs(dim.y * original.scaleY / target.scaleY), + scale = distance / originalDistance; + scaleX = original.scaleX * scale; + scaleY = original.scaleY * scale; + } + else { + scaleX = Math.abs(newPoint.x * target.scaleX / dim.x); + scaleY = Math.abs(newPoint.y * target.scaleY / dim.y); + } + // if we are scaling by center, we need to double the scale + if (isTransformCentered(transform)) { + scaleX *= 2; + scaleY *= 2; + } + if (transform.signX !== signX && by !== 'y') { + transform.originX = opposite[transform.originX]; + scaleX *= -1; + transform.signX = signX; + } + if (transform.signY !== signY && by !== 'x') { + transform.originY = opposite[transform.originY]; + scaleY *= -1; + transform.signY = signY; + } + } + // minScale is taken are in the setter. + var oldScaleX = target.scaleX, oldScaleY = target.scaleY; + if (!by) { + !lockScalingX && target.set('scaleX', scaleX); + !lockScalingY && target.set('scaleY', scaleY); + } + else { + // forbidden cases already handled on top here. + by === 'x' && target.set('scaleX', scaleX); + by === 'y' && target.set('scaleY', scaleY); + } + return oldScaleX !== target.scaleX || oldScaleY !== target.scaleY; + } -/***/ "./node_modules/webpack/buildin/global.js": -/*!***********************************!*\ - !*** (webpack)/buildin/global.js ***! - \***********************************/ -/*! no static exports found */ -/***/ (function(module, exports) { + /** + * Generic scaling logic, to scale from corners either equally or freely. + * Needs to be wrapped with `wrapWithFixedAnchor` to be effective + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened + */ + function scaleObjectFromCorner(eventData, transform, x, y) { + return scaleObject(eventData, transform, x, y); + } -var g; + /** + * Scaling logic for the X axis. + * Needs to be wrapped with `wrapWithFixedAnchor` to be effective + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened + */ + function scaleObjectX(eventData, transform, x, y) { + return scaleObject(eventData, transform, x, y , { by: 'x' }); + } -// This works in non-strict mode -g = (function() { - return this; -})(); + /** + * Scaling logic for the Y axis. + * Needs to be wrapped with `wrapWithFixedAnchor` to be effective + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened + */ + function scaleObjectY(eventData, transform, x, y) { + return scaleObject(eventData, transform, x, y , { by: 'y' }); + } -try { - // This works if eval is allowed (see CSP) - g = g || new Function("return this")(); -} catch (e) { - // This works if the window reference is available - if (typeof window === "object") g = window; -} + /** + * Composed action handler to either scale Y or skew X + * Needs to be wrapped with `wrapWithFixedAnchor` to be effective + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened + */ + function scalingYOrSkewingX(eventData, transform, x, y) { + // ok some safety needed here. + if (eventData[transform.target.canvas.altActionKey]) { + return controls.skewHandlerX(eventData, transform, x, y); + } + return controls.scalingY(eventData, transform, x, y); + } -// g can still be undefined, but nothing to do about it... -// We return undefined, instead of nothing here, so it's -// easier to handle this case. if(!global) { ...} + /** + * Composed action handler to either scale X or skew Y + * Needs to be wrapped with `wrapWithFixedAnchor` to be effective + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened + */ + function scalingXOrSkewingY(eventData, transform, x, y) { + // ok some safety needed here. + if (eventData[transform.target.canvas.altActionKey]) { + return controls.skewHandlerY(eventData, transform, x, y); + } + return controls.scalingX(eventData, transform, x, y); + } -module.exports = g; + /** + * Action handler to change textbox width + * Needs to be wrapped with `wrapWithFixedAnchor` to be effective + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if some change happened + */ + function changeWidth(eventData, transform, x, y) { + var target = transform.target, localPoint = getLocalPoint(transform, transform.originX, transform.originY, x, y), + strokePadding = target.strokeWidth / (target.strokeUniform ? target.scaleX : 1), + multiplier = isTransformCentered(transform) ? 2 : 1, + oldWidth = target.width, + newWidth = Math.abs(localPoint.x * multiplier / target.scaleX) - strokePadding; + target.set('width', Math.max(newWidth, 0)); + return oldWidth !== newWidth; + } + /** + * Action handler + * @private + * @param {Event} eventData javascript event that is doing the transform + * @param {Object} transform javascript object containing a series of information around the current transform + * @param {number} x current mouse x position, canvas normalized + * @param {number} y current mouse y position, canvas normalized + * @return {Boolean} true if the translation occurred + */ + function dragHandler(eventData, transform, x, y) { + var target = transform.target, + newLeft = x - transform.offsetX, + newTop = y - transform.offsetY, + moveX = !target.get('lockMovementX') && target.left !== newLeft, + moveY = !target.get('lockMovementY') && target.top !== newTop; + moveX && target.set('left', newLeft); + moveY && target.set('top', newTop); + if (moveX || moveY) { + fireEvent('moving', commonEventInfo(eventData, transform, x, y)); + } + return moveX || moveY; + } -/***/ }), + controls.scaleCursorStyleHandler = scaleCursorStyleHandler; + controls.skewCursorStyleHandler = skewCursorStyleHandler; + controls.scaleSkewCursorStyleHandler = scaleSkewCursorStyleHandler; + controls.rotationWithSnapping = wrapWithFireEvent('rotating', wrapWithFixedAnchor(rotationWithSnapping)); + controls.scalingEqually = wrapWithFireEvent('scaling', wrapWithFixedAnchor( scaleObjectFromCorner)); + controls.scalingX = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectX)); + controls.scalingY = wrapWithFireEvent('scaling', wrapWithFixedAnchor(scaleObjectY)); + controls.scalingYOrSkewingX = scalingYOrSkewingX; + controls.scalingXOrSkewingY = scalingXOrSkewingY; + controls.changeWidth = wrapWithFireEvent('resizing', wrapWithFixedAnchor(changeWidth)); + controls.skewHandlerX = skewHandlerX; + controls.skewHandlerY = skewHandlerY; + controls.dragHandler = dragHandler; + controls.scaleOrSkewActionName = scaleOrSkewActionName; + controls.rotationStyleHandler = rotationStyleHandler; + controls.fireEvent = fireEvent; + controls.wrapWithFixedAnchor = wrapWithFixedAnchor; + controls.wrapWithFireEvent = wrapWithFireEvent; + controls.getLocalPoint = getLocalPoint; + fabric.controlsUtils = controls; + +})( true ? exports : 0); + + +(function(global) { -/***/ "./src/css/index.styl": -/*!****************************!*\ - !*** ./src/css/index.styl ***! - \****************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + 'use strict'; -// extracted by mini-css-extract-plugin + var fabric = global.fabric || (global.fabric = { }), + degreesToRadians = fabric.util.degreesToRadians, + controls = fabric.controlsUtils; -/***/ }), + /** + * Render a round control, as per fabric features. + * This function is written to respect object properties like transparentCorners, cornerSize + * cornerColor, cornerStrokeColor + * plus the addition of offsetY and offsetX. + * @param {CanvasRenderingContext2D} ctx context to render on + * @param {Number} left x coordinate where the control center should be + * @param {Number} top y coordinate where the control center should be + * @param {Object} styleOverride override for fabric.Object controls style + * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls + */ + function renderCircleControl (ctx, left, top, styleOverride, fabricObject) { + styleOverride = styleOverride || {}; + var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize, + ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize, + transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ? + styleOverride.transparentCorners : fabricObject.transparentCorners, + methodName = transparentCorners ? 'stroke' : 'fill', + stroke = !transparentCorners && (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor), + myLeft = left, + myTop = top, size; + ctx.save(); + ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor; + ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor; + // as soon as fabric react v5, remove ie11, use proper ellipse code. + if (xSize > ySize) { + size = xSize; + ctx.scale(1.0, ySize / xSize); + myTop = top * xSize / ySize; + } + else if (ySize > xSize) { + size = ySize; + ctx.scale(xSize / ySize, 1.0); + myLeft = left * ySize / xSize; + } + else { + size = xSize; + } + // this is still wrong + ctx.lineWidth = 1; + ctx.beginPath(); + ctx.arc(myLeft, myTop, size / 2, 0, 2 * Math.PI, false); + ctx[methodName](); + if (stroke) { + ctx.stroke(); + } + ctx.restore(); + } -/***/ "./src/index.js": -/*!**********************!*\ - !*** ./src/index.js ***! - \**********************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Render a square control, as per fabric features. + * This function is written to respect object properties like transparentCorners, cornerSize + * cornerColor, cornerStrokeColor + * plus the addition of offsetY and offsetX. + * @param {CanvasRenderingContext2D} ctx context to render on + * @param {Number} left x coordinate where the control center should be + * @param {Number} top y coordinate where the control center should be + * @param {Object} styleOverride override for fabric.Object controls style + * @param {fabric.Object} fabricObject the fabric object for which we are rendering controls + */ + function renderSquareControl(ctx, left, top, styleOverride, fabricObject) { + styleOverride = styleOverride || {}; + var xSize = this.sizeX || styleOverride.cornerSize || fabricObject.cornerSize, + ySize = this.sizeY || styleOverride.cornerSize || fabricObject.cornerSize, + transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ? + styleOverride.transparentCorners : fabricObject.transparentCorners, + methodName = transparentCorners ? 'stroke' : 'fill', + stroke = !transparentCorners && ( + styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor + ), xSizeBy2 = xSize / 2, ySizeBy2 = ySize / 2; + ctx.save(); + ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor; + ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor; + // this is still wrong + ctx.lineWidth = 1; + ctx.translate(left, top); + ctx.rotate(degreesToRadians(fabricObject.angle)); + // this does not work, and fixed with ( && ) does not make sense. + // to have real transparent corners we need the controls on upperCanvas + // transparentCorners || ctx.clearRect(-xSizeBy2, -ySizeBy2, xSize, ySize); + ctx[methodName + 'Rect'](-xSizeBy2, -ySizeBy2, xSize, ySize); + if (stroke) { + ctx.strokeRect(-xSizeBy2, -ySizeBy2, xSize, ySize); + } + ctx.restore(); + } -"use strict"; + controls.renderCircleControl = renderCircleControl; + controls.renderSquareControl = renderSquareControl; +})( true ? exports : 0); -__webpack_require__(/*! @/polyfill */ "./src/js/polyfill.js"); -var _imageEditor = __webpack_require__(/*! @/imageEditor */ "./src/js/imageEditor.js"); +(function(global) { -var _imageEditor2 = _interopRequireDefault(_imageEditor); + 'use strict'; -__webpack_require__(/*! @css/index.styl */ "./src/css/index.styl"); + var fabric = global.fabric || (global.fabric = { }); -__webpack_require__(/*! @/command/addIcon */ "./src/js/command/addIcon.js"); + function Control(options) { + for (var i in options) { + this[i] = options[i]; + } + } -__webpack_require__(/*! @/command/addImageObject */ "./src/js/command/addImageObject.js"); + fabric.Control = Control; -__webpack_require__(/*! @/command/addObject */ "./src/js/command/addObject.js"); + fabric.Control.prototype = /** @lends fabric.Control.prototype */ { -__webpack_require__(/*! @/command/addShape */ "./src/js/command/addShape.js"); + /** + * keep track of control visibility. + * mainly for backward compatibility. + * if you do not want to see a control, you can remove it + * from the controlset. + * @type {Boolean} + * @default true + */ + visible: true, -__webpack_require__(/*! @/command/addText */ "./src/js/command/addText.js"); + /** + * Name of the action that the control will likely execute. + * This is optional. FabricJS uses to identify what the user is doing for some + * extra optimizations. If you are writing a custom control and you want to know + * somewhere else in the code what is going on, you can use this string here. + * you can also provide a custom getActionName if your control run multiple actions + * depending on some external state. + * default to scale since is the most common, used on 4 corners by default + * @type {String} + * @default 'scale' + */ + actionName: 'scale', -__webpack_require__(/*! @/command/applyFilter */ "./src/js/command/applyFilter.js"); + /** + * Drawing angle of the control. + * NOT used for now, but name marked as needed for internal logic + * example: to reuse the same drawing function for different rotated controls + * @type {Number} + * @default 0 + */ + angle: 0, -__webpack_require__(/*! @/command/changeIconColor */ "./src/js/command/changeIconColor.js"); + /** + * Relative position of the control. X + * 0,0 is the center of the Object, while -0.5 (left) or 0.5 (right) are the extremities + * of the bounding box. + * @type {Number} + * @default 0 + */ + x: 0, -__webpack_require__(/*! @/command/changeShape */ "./src/js/command/changeShape.js"); + /** + * Relative position of the control. Y + * 0,0 is the center of the Object, while -0.5 (top) or 0.5 (bottom) are the extremities + * of the bounding box. + * @type {Number} + * @default 0 + */ + y: 0, -__webpack_require__(/*! @/command/changeText */ "./src/js/command/changeText.js"); + /** + * Horizontal offset of the control from the defined position. In pixels + * Positive offset moves the control to the right, negative to the left. + * It used when you want to have position of control that does not scale with + * the bounding box. Example: rotation control is placed at x:0, y: 0.5 on + * the boundindbox, with an offset of 30 pixels vertically. Those 30 pixels will + * stay 30 pixels no matter how the object is big. Another example is having 2 + * controls in the corner, that stay in the same position when the object scale. + * of the bounding box. + * @type {Number} + * @default 0 + */ + offsetX: 0, -__webpack_require__(/*! @/command/changeTextStyle */ "./src/js/command/changeTextStyle.js"); + /** + * Vertical offset of the control from the defined position. In pixels + * Positive offset moves the control to the bottom, negative to the top. + * @type {Number} + * @default 0 + */ + offsetY: 0, -__webpack_require__(/*! @/command/clearObjects */ "./src/js/command/clearObjects.js"); + /** + * Sets the length of the control. If null, defaults to object's cornerSize. + * Expects both sizeX and sizeY to be set when set. + * @type {?Number} + * @default null + */ + sizeX: null, -__webpack_require__(/*! @/command/flip */ "./src/js/command/flip.js"); + /** + * Sets the height of the control. If null, defaults to object's cornerSize. + * Expects both sizeX and sizeY to be set when set. + * @type {?Number} + * @default null + */ + sizeY: null, -__webpack_require__(/*! @/command/loadImage */ "./src/js/command/loadImage.js"); + /** + * Sets the length of the touch area of the control. If null, defaults to object's touchCornerSize. + * Expects both touchSizeX and touchSizeY to be set when set. + * @type {?Number} + * @default null + */ + touchSizeX: null, -__webpack_require__(/*! @/command/removeFilter */ "./src/js/command/removeFilter.js"); + /** + * Sets the height of the touch area of the control. If null, defaults to object's touchCornerSize. + * Expects both touchSizeX and touchSizeY to be set when set. + * @type {?Number} + * @default null + */ + touchSizeY: null, -__webpack_require__(/*! @/command/removeObject */ "./src/js/command/removeObject.js"); + /** + * Css cursor style to display when the control is hovered. + * if the method `cursorStyleHandler` is provided, this property is ignored. + * @type {String} + * @default 'crosshair' + */ + cursorStyle: 'crosshair', -__webpack_require__(/*! @/command/resizeCanvasDimension */ "./src/js/command/resizeCanvasDimension.js"); + /** + * If controls has an offsetY or offsetX, draw a line that connects + * the control to the bounding box + * @type {Boolean} + * @default false + */ + withConnection: false, -__webpack_require__(/*! @/command/rotate */ "./src/js/command/rotate.js"); + /** + * The control actionHandler, provide one to handle action ( control being moved ) + * @param {Event} eventData the native mouse event + * @param {Object} transformData properties of the current transform + * @param {Number} x x position of the cursor + * @param {Number} y y position of the cursor + * @return {Boolean} true if the action/event modified the object + */ + actionHandler: function(/* eventData, transformData, x, y */) { }, -__webpack_require__(/*! @/command/setObjectProperties */ "./src/js/command/setObjectProperties.js"); + /** + * The control handler for mouse down, provide one to handle mouse down on control + * @param {Event} eventData the native mouse event + * @param {Object} transformData properties of the current transform + * @param {Number} x x position of the cursor + * @param {Number} y y position of the cursor + * @return {Boolean} true if the action/event modified the object + */ + mouseDownHandler: function(/* eventData, transformData, x, y */) { }, -__webpack_require__(/*! @/command/setObjectPosition */ "./src/js/command/setObjectPosition.js"); + /** + * The control mouseUpHandler, provide one to handle an effect on mouse up. + * @param {Event} eventData the native mouse event + * @param {Object} transformData properties of the current transform + * @param {Number} x x position of the cursor + * @param {Number} y y position of the cursor + * @return {Boolean} true if the action/event modified the object + */ + mouseUpHandler: function(/* eventData, transformData, x, y */) { }, -__webpack_require__(/*! @/command/changeSelection */ "./src/js/command/changeSelection.js"); + /** + * Returns control actionHandler + * @param {Event} eventData the native mouse event + * @param {fabric.Object} fabricObject on which the control is displayed + * @param {fabric.Control} control control for which the action handler is being asked + * @return {Function} the action handler + */ + getActionHandler: function(/* eventData, fabricObject, control */) { + return this.actionHandler; + }, -__webpack_require__(/*! @/command/resize */ "./src/js/command/resize.js"); + /** + * Returns control mouseDown handler + * @param {Event} eventData the native mouse event + * @param {fabric.Object} fabricObject on which the control is displayed + * @param {fabric.Control} control control for which the action handler is being asked + * @return {Function} the action handler + */ + getMouseDownHandler: function(/* eventData, fabricObject, control */) { + return this.mouseDownHandler; + }, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Returns control mouseUp handler + * @param {Event} eventData the native mouse event + * @param {fabric.Object} fabricObject on which the control is displayed + * @param {fabric.Control} control control for which the action handler is being asked + * @return {Function} the action handler + */ + getMouseUpHandler: function(/* eventData, fabricObject, control */) { + return this.mouseUpHandler; + }, -module.exports = _imageEditor2.default; + /** + * Returns control cursorStyle for css using cursorStyle. If you need a more elaborate + * function you can pass one in the constructor + * the cursorStyle property + * @param {Event} eventData the native mouse event + * @param {fabric.Control} control the current control ( likely this) + * @param {fabric.Object} object on which the control is displayed + * @return {String} + */ + cursorStyleHandler: function(eventData, control /* fabricObject */) { + return control.cursorStyle; + }, -// commands + /** + * Returns the action name. The basic implementation just return the actionName property. + * @param {Event} eventData the native mouse event + * @param {fabric.Control} control the current control ( likely this) + * @param {fabric.Object} object on which the control is displayed + * @return {String} + */ + getActionName: function(eventData, control /* fabricObject */) { + return control.actionName; + }, -/***/ }), + /** + * Returns controls visibility + * @param {fabric.Object} object on which the control is displayed + * @param {String} controlKey key where the control is memorized on the + * @return {Boolean} + */ + getVisibility: function(fabricObject, controlKey) { + var objectVisibility = fabricObject._controlsVisibility; + if (objectVisibility && typeof objectVisibility[controlKey] !== 'undefined') { + return objectVisibility[controlKey]; + } + return this.visible; + }, -/***/ "./src/js/action.js": -/*!**************************!*\ - !*** ./src/js/action.js ***! - \**************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Sets controls visibility + * @param {Boolean} visibility for the object + * @return {Void} + */ + setVisibility: function(visibility /* name, fabricObject */) { + this.visible = visibility; + }, -"use strict"; + positionHandler: function(dim, finalMatrix /*, fabricObject, currentControl */) { + var point = fabric.util.transformPoint({ + x: this.x * dim.x + this.offsetX, + y: this.y * dim.y + this.offsetY }, finalMatrix); + return point; + }, -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * Returns the coords for this control based on object values. + * @param {Number} objectAngle angle from the fabric object holding the control + * @param {Number} objectCornerSize cornerSize from the fabric object holding the control (or touchCornerSize if + * isTouch is true) + * @param {Number} centerX x coordinate where the control center should be + * @param {Number} centerY y coordinate where the control center should be + * @param {boolean} isTouch true if touch corner, false if normal corner + */ + calcCornerCoords: function(objectAngle, objectCornerSize, centerX, centerY, isTouch) { + var cosHalfOffset, + sinHalfOffset, + cosHalfOffsetComp, + sinHalfOffsetComp, + xSize = (isTouch) ? this.touchSizeX : this.sizeX, + ySize = (isTouch) ? this.touchSizeY : this.sizeY; + if (xSize && ySize && xSize !== ySize) { + // handle rectangular corners + var controlTriangleAngle = Math.atan2(ySize, xSize); + var cornerHypotenuse = Math.sqrt(xSize * xSize + ySize * ySize) / 2; + var newTheta = controlTriangleAngle - fabric.util.degreesToRadians(objectAngle); + var newThetaComp = Math.PI / 2 - controlTriangleAngle - fabric.util.degreesToRadians(objectAngle); + cosHalfOffset = cornerHypotenuse * fabric.util.cos(newTheta); + sinHalfOffset = cornerHypotenuse * fabric.util.sin(newTheta); + // use complementary angle for two corners + cosHalfOffsetComp = cornerHypotenuse * fabric.util.cos(newThetaComp); + sinHalfOffsetComp = cornerHypotenuse * fabric.util.sin(newThetaComp); + } + else { + // handle square corners + // use default object corner size unless size is defined + var cornerSize = (xSize && ySize) ? xSize : objectCornerSize; + /* 0.7071067812 stands for sqrt(2)/2 */ + cornerHypotenuse = cornerSize * 0.7071067812; + // complementary angles are equal since they're both 45 degrees + var newTheta = fabric.util.degreesToRadians(45 - objectAngle); + cosHalfOffset = cosHalfOffsetComp = cornerHypotenuse * fabric.util.cos(newTheta); + sinHalfOffset = sinHalfOffsetComp = cornerHypotenuse * fabric.util.sin(newTheta); + } -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); + return { + tl: { + x: centerX - sinHalfOffsetComp, + y: centerY - cosHalfOffsetComp, + }, + tr: { + x: centerX + cosHalfOffset, + y: centerY - sinHalfOffset, + }, + bl: { + x: centerX - cosHalfOffset, + y: centerY + sinHalfOffset, + }, + br: { + x: centerX + sinHalfOffsetComp, + y: centerY + cosHalfOffsetComp, + }, + }; + }, -var _imagetracer = __webpack_require__(/*! @/helper/imagetracer */ "./src/js/helper/imagetracer.js"); + /** + * Render function for the control. + * When this function runs the context is unscaled. unrotate. Just retina scaled. + * all the functions will have to translate to the point left,top before starting Drawing + * if they want to draw a control where the position is detected. + * left and top are the result of the positionHandler function + * @param {RenderingContext2D} ctx the context where the control will be drawn + * @param {Number} left position of the canvas where we are about to render the control. + * @param {Number} top position of the canvas where we are about to render the control. + * @param {Object} styleOverride + * @param {fabric.Object} fabricObject the object where the control is about to be rendered + */ + render: function(ctx, left, top, styleOverride, fabricObject) { + styleOverride = styleOverride || {}; + switch (styleOverride.cornerStyle || fabricObject.cornerStyle) { + case 'circle': + fabric.controlsUtils.renderCircleControl.call(this, ctx, left, top, styleOverride, fabricObject); + break; + default: + fabric.controlsUtils.renderSquareControl.call(this, ctx, left, top, styleOverride, fabricObject); + } + }, + }; -var _imagetracer2 = _interopRequireDefault(_imagetracer); +})( true ? exports : 0); -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); +(function() { -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /* _FROM_SVG_START_ */ + function getColorStop(el, multiplier) { + var style = el.getAttribute('style'), + offset = el.getAttribute('offset') || 0, + color, colorAlpha, opacity, i; + + // convert percents to absolute values + offset = parseFloat(offset) / (/%$/.test(offset) ? 100 : 1); + offset = offset < 0 ? 0 : offset > 1 ? 1 : offset; + if (style) { + var keyValuePairs = style.split(/\s*;\s*/); + + if (keyValuePairs[keyValuePairs.length - 1] === '') { + keyValuePairs.pop(); + } + + for (i = keyValuePairs.length; i--; ) { + + var split = keyValuePairs[i].split(/\s*:\s*/), + key = split[0].trim(), + value = split[1].trim(); + + if (key === 'stop-color') { + color = value; + } + else if (key === 'stop-opacity') { + opacity = value; + } + } + } + + if (!color) { + color = el.getAttribute('stop-color') || 'rgb(0,0,0)'; + } + if (!opacity) { + opacity = el.getAttribute('stop-opacity'); + } + + color = new fabric.Color(color); + colorAlpha = color.getAlpha(); + opacity = isNaN(parseFloat(opacity)) ? 1 : parseFloat(opacity); + opacity *= colorAlpha * multiplier; -exports.default = { - /** - * Get ui actions - * @returns {Object} actions for ui - * @private - */ - getActions: function getActions() { return { - main: this._mainAction(), - shape: this._shapeAction(), - crop: this._cropAction(), - resize: this._resizeAction(), - flip: this._flipAction(), - rotate: this._rotateAction(), - text: this._textAction(), - mask: this._maskAction(), - draw: this._drawAction(), - icon: this._iconAction(), - filter: this._filterAction(), - history: this._historyAction() + offset: offset, + color: color.toRgb(), + opacity: opacity }; - }, + } + + function getLinearCoords(el) { + return { + x1: el.getAttribute('x1') || 0, + y1: el.getAttribute('y1') || 0, + x2: el.getAttribute('x2') || '100%', + y2: el.getAttribute('y2') || 0 + }; + } + + function getRadialCoords(el) { + return { + x1: el.getAttribute('fx') || el.getAttribute('cx') || '50%', + y1: el.getAttribute('fy') || el.getAttribute('cy') || '50%', + r1: 0, + x2: el.getAttribute('cx') || '50%', + y2: el.getAttribute('cy') || '50%', + r2: el.getAttribute('r') || '50%' + }; + } + /* _FROM_SVG_END_ */ + var clone = fabric.util.object.clone; /** - * Main Action - * @returns {Object} actions for ui main - * @private + * Gradient class + * @class fabric.Gradient + * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#gradients} + * @see {@link fabric.Gradient#initialize} for constructor definition */ - _mainAction: function _mainAction() { - var _this = this; + fabric.Gradient = fabric.util.createClass(/** @lends fabric.Gradient.prototype */ { - var exitCropOnAction = function exitCropOnAction() { - if (_this.ui.submenu === 'crop') { - _this.stopDrawingMode(); - _this.ui.changeMenu('crop'); - } - }; - var setAngleRangeBarOnAction = function setAngleRangeBarOnAction(angle) { - if (_this.ui.submenu === 'rotate') { - _this.ui.rotate.setRangeBarAngle('setAngle', angle); + /** + * Horizontal offset for aligning gradients coming from SVG when outside pathgroups + * @type Number + * @default 0 + */ + offsetX: 0, + + /** + * Vertical offset for aligning gradients coming from SVG when outside pathgroups + * @type Number + * @default 0 + */ + offsetY: 0, + + /** + * A transform matrix to apply to the gradient before painting. + * Imported from svg gradients, is not applied with the current transform in the center. + * Before this transform is applied, the origin point is at the top left corner of the object + * plus the addition of offsetY and offsetX. + * @type Number[] + * @default null + */ + gradientTransform: null, + + /** + * coordinates units for coords. + * If `pixels`, the number of coords are in the same unit of width / height. + * If set as `percentage` the coords are still a number, but 1 means 100% of width + * for the X and 100% of the height for the y. It can be bigger than 1 and negative. + * allowed values pixels or percentage. + * @type String + * @default 'pixels' + */ + gradientUnits: 'pixels', + + /** + * Gradient type linear or radial + * @type String + * @default 'pixels' + */ + type: 'linear', + + /** + * Constructor + * @param {Object} options Options object with type, coords, gradientUnits and colorStops + * @param {Object} [options.type] gradient type linear or radial + * @param {Object} [options.gradientUnits] gradient units + * @param {Object} [options.offsetX] SVG import compatibility + * @param {Object} [options.offsetY] SVG import compatibility + * @param {Object[]} options.colorStops contains the colorstops. + * @param {Object} options.coords contains the coords of the gradient + * @param {Number} [options.coords.x1] X coordiante of the first point for linear or of the focal point for radial + * @param {Number} [options.coords.y1] Y coordiante of the first point for linear or of the focal point for radial + * @param {Number} [options.coords.x2] X coordiante of the second point for linear or of the center point for radial + * @param {Number} [options.coords.y2] Y coordiante of the second point for linear or of the center point for radial + * @param {Number} [options.coords.r1] only for radial gradient, radius of the inner circle + * @param {Number} [options.coords.r2] only for radial gradient, radius of the external circle + * @return {fabric.Gradient} thisArg + */ + initialize: function(options) { + options || (options = { }); + options.coords || (options.coords = { }); + + var coords, _this = this; + + // sets everything, then coords and colorstops get sets again + Object.keys(options).forEach(function(option) { + _this[option] = options[option]; + }); + + if (this.id) { + this.id += '_' + fabric.Object.__uid++; } - }; - var setFilterStateRangeBarOnAction = function setFilterStateRangeBarOnAction(filterOptions) { - if (_this.ui.submenu === 'filter') { - _this.ui.filter.setFilterState(filterOptions); + else { + this.id = fabric.Object.__uid++; } - }; - var onEndUndoRedo = function onEndUndoRedo(result) { - setAngleRangeBarOnAction(result); - setFilterStateRangeBarOnAction(result); - return result; - }; - var toggleZoomMode = function toggleZoomMode() { - var zoomMode = _this._graphics.getZoomMode(); + coords = { + x1: options.coords.x1 || 0, + y1: options.coords.y1 || 0, + x2: options.coords.x2 || 0, + y2: options.coords.y2 || 0 + }; - _this.stopDrawingMode(); - if (zoomMode !== _consts.zoomModes.ZOOM) { - _this.startDrawingMode(_consts.drawingModes.ZOOM); - _this._graphics.startZoomInMode(); - } else { - _this._graphics.endZoomInMode(); + if (this.type === 'radial') { + coords.r1 = options.coords.r1 || 0; + coords.r2 = options.coords.r2 || 0; } - }; - var toggleHandMode = function toggleHandMode() { - var zoomMode = _this._graphics.getZoomMode(); - _this.stopDrawingMode(); - if (zoomMode !== _consts.zoomModes.HAND) { - _this.startDrawingMode(_consts.drawingModes.ZOOM); - _this._graphics.startHandMode(); - } else { - _this._graphics.endHandMode(); - } - }; - var initFilterState = function initFilterState() { - if (_this.ui.filter) { - _this.ui.filter.initFilterCheckBoxState(); - } - }; + this.coords = coords; + this.colorStops = options.colorStops.slice(); + }, - return (0, _tuiCodeSnippet.extend)({ - initLoadImage: function initLoadImage(imagePath, imageName) { - return _this.loadImageFromURL(imagePath, imageName).then(function (sizeValue) { - exitCropOnAction(); - _this.ui.initializeImgUrl = imagePath; - _this.ui.resizeEditor({ imageSize: sizeValue }); - _this.clearUndoStack(); - _this._invoker.fire(_consts.eventNames.EXECUTE_COMMAND, _consts.historyNames.LOAD_IMAGE); - }); - }, - undo: function undo() { - if (!_this.isEmptyUndoStack()) { - exitCropOnAction(); - _this.deactivateAll(); - _this.undo().then(onEndUndoRedo); - } - }, - redo: function redo() { - if (!_this.isEmptyRedoStack()) { - exitCropOnAction(); - _this.deactivateAll(); - _this.redo().then(onEndUndoRedo); - } - }, - reset: function reset() { - exitCropOnAction(); - _this.loadImageFromURL(_this.ui.initializeImgUrl, 'resetImage').then(function (sizeValue) { - exitCropOnAction(); - initFilterState(); - _this.ui.resizeEditor({ imageSize: sizeValue }); - _this.clearUndoStack(); - _this._initHistory(); + /** + * Adds another colorStop + * @param {Object} colorStop Object with offset and color + * @return {fabric.Gradient} thisArg + */ + addColorStop: function(colorStops) { + for (var position in colorStops) { + var color = new fabric.Color(colorStops[position]); + this.colorStops.push({ + offset: parseFloat(position), + color: color.toRgb(), + opacity: color.getAlpha() }); - }, - delete: function _delete() { - _this.ui.changeHelpButtonEnabled('delete', false); - exitCropOnAction(); - _this.removeActiveObject(); - _this.activeObjectId = null; - }, - deleteAll: function deleteAll() { - exitCropOnAction(); - _this.clearObjects(); - _this.ui.changeHelpButtonEnabled('delete', false); - _this.ui.changeHelpButtonEnabled('deleteAll', false); - }, - load: function load(file) { - if (!(0, _util.isSupportFileApi)()) { - alert('This browser does not support file-api'); - } + } + return this; + }, - _this.ui.initializeImgUrl = URL.createObjectURL(file); - _this.loadImageFromFile(file).then(function (sizeValue) { - exitCropOnAction(); - initFilterState(); - _this.clearUndoStack(); - _this.ui.activeMenuEvent(); - _this.ui.resizeEditor({ imageSize: sizeValue }); - _this._clearHistory(); - _this._invoker.fire(_consts.eventNames.EXECUTE_COMMAND, _consts.historyNames.LOAD_IMAGE); - })['catch'](function (message) { - return Promise.reject(message); - }); - }, - download: function download() { - var dataURL = _this.toDataURL(); - var imageName = _this.getImageName(); - var blob = void 0, - type = void 0, - w = void 0; + /** + * Returns object representation of a gradient + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} + */ + toObject: function(propertiesToInclude) { + var object = { + type: this.type, + coords: this.coords, + colorStops: this.colorStops, + offsetX: this.offsetX, + offsetY: this.offsetY, + gradientUnits: this.gradientUnits, + gradientTransform: this.gradientTransform ? this.gradientTransform.concat() : this.gradientTransform + }; + fabric.util.populateWithProperties(this, object, propertiesToInclude); - if ((0, _util.isSupportFileApi)() && window.saveAs) { - blob = (0, _util.base64ToBlob)(dataURL); - type = blob.type.split('/')[1]; - if (imageName.split('.').pop() !== type) { - imageName += '.' + type; + return object; + }, + + /* _TO_SVG_START_ */ + /** + * Returns SVG representation of an gradient + * @param {Object} object Object to create a gradient for + * @return {String} SVG representation of an gradient (linear/radial) + */ + toSVG: function(object, options) { + var coords = clone(this.coords, true), i, len, options = options || {}, + markup, commonAttributes, colorStops = clone(this.colorStops, true), + needsSwap = coords.r1 > coords.r2, + transform = this.gradientTransform ? this.gradientTransform.concat() : fabric.iMatrix.concat(), + offsetX = -this.offsetX, offsetY = -this.offsetY, + withViewport = !!options.additionalTransform, + gradientUnits = this.gradientUnits === 'pixels' ? 'userSpaceOnUse' : 'objectBoundingBox'; + // colorStops must be sorted ascending + colorStops.sort(function(a, b) { + return a.offset - b.offset; + }); + + if (gradientUnits === 'objectBoundingBox') { + offsetX /= object.width; + offsetY /= object.height; + } + else { + offsetX += object.width / 2; + offsetY += object.height / 2; + } + if (object.type === 'path' && this.gradientUnits !== 'percentage') { + offsetX -= object.pathOffset.x; + offsetY -= object.pathOffset.y; + } + + + transform[4] -= offsetX; + transform[5] -= offsetY; + + commonAttributes = 'id="SVGID_' + this.id + + '" gradientUnits="' + gradientUnits + '"'; + commonAttributes += ' gradientTransform="' + (withViewport ? + options.additionalTransform + ' ' : '') + fabric.util.matrixToSVG(transform) + '" '; + + if (this.type === 'linear') { + markup = [ + '\n' + ]; + } + else if (this.type === 'radial') { + // svg radial gradient has just 1 radius. the biggest. + markup = [ + '\n' + ]; + } + + if (this.type === 'radial') { + if (needsSwap) { + // svg goes from internal to external radius. if radius are inverted, swap color stops. + colorStops = colorStops.concat(); + colorStops.reverse(); + for (i = 0, len = colorStops.length; i < len; i++) { + colorStops[i].offset = 1 - colorStops[i].offset; + } + } + var minRadius = Math.min(coords.r1, coords.r2); + if (minRadius > 0) { + // i have to shift all colorStops and add new one in 0. + var maxRadius = Math.max(coords.r1, coords.r2), + percentageShift = minRadius / maxRadius; + for (i = 0, len = colorStops.length; i < len; i++) { + colorStops[i].offset += percentageShift * (1 - colorStops[i].offset); } - saveAs(blob, imageName); // eslint-disable-line - } else { - w = window.open(); - w.document.body.innerHTML = ''; } - }, - history: function history(event) { - _this.ui.toggleHistoryMenu(event); - }, - zoomIn: function zoomIn() { - _this.ui.toggleZoomButtonStatus('zoomIn'); - _this.deactivateAll(); - toggleZoomMode(); - }, - zoomOut: function zoomOut() { - _this._graphics.zoomOut(); - }, - hand: function hand() { - _this.ui.offZoomInButtonStatus(); - _this.ui.toggleZoomButtonStatus('hand'); - _this.deactivateAll(); - toggleHandMode(); } - }, this._commonAction()); - }, + for (i = 0, len = colorStops.length; i < len; i++) { + var colorStop = colorStops[i]; + markup.push( + '\n' + ); + } - /** - * Icon Action - * @returns {Object} actions for ui icon - * @private - */ - _iconAction: function _iconAction() { - var _this2 = this; + markup.push((this.type === 'linear' ? '\n' : '\n')); - return (0, _tuiCodeSnippet.extend)({ - changeColor: function changeColor(color) { - if (_this2.activeObjectId) { - _this2.changeIconColor(_this2.activeObjectId, color); - } - }, - addIcon: function addIcon(iconType, iconColor) { - _this2.startDrawingMode('ICON'); - _this2.setDrawingIcon(iconType, iconColor); - }, - cancelAddIcon: function cancelAddIcon() { - _this2.ui.icon.clearIconType(); - _this2.changeSelectableAll(true); - _this2.changeCursor('default'); - _this2.stopDrawingMode(); - }, - registerDefaultIcons: function registerDefaultIcons(type, path) { - var iconObj = {}; - iconObj[type] = path; - _this2.registerIcons(iconObj); - }, - registerCustomIcon: function registerCustomIcon(imgUrl, file) { - var imagetracer = new _imagetracer2.default(); - imagetracer.imageToSVG(imgUrl, function (svgstr) { - var _svgstr$match = svgstr.match(/path[^>]*d="([^"]*)"/), - svgPath = _svgstr$match[1]; + return markup.join(''); + }, + /* _TO_SVG_END_ */ - var iconObj = {}; - iconObj[file.name] = svgPath; - _this2.registerIcons(iconObj); - _this2.addIcon(file.name, { - left: 100, - top: 100 - }); - }, _imagetracer2.default.tracerDefaultOption()); + /** + * Returns an instance of CanvasGradient + * @param {CanvasRenderingContext2D} ctx Context to render on + * @return {CanvasGradient} + */ + toLive: function(ctx) { + var gradient, coords = fabric.util.object.clone(this.coords), i, len; + + if (!this.type) { + return; } - }, this._commonAction()); - }, + if (this.type === 'linear') { + gradient = ctx.createLinearGradient( + coords.x1, coords.y1, coords.x2, coords.y2); + } + else if (this.type === 'radial') { + gradient = ctx.createRadialGradient( + coords.x1, coords.y1, coords.r1, coords.x2, coords.y2, coords.r2); + } - /** - * Draw Action - * @returns {Object} actions for ui draw - * @private - */ - _drawAction: function _drawAction() { - var _this3 = this; + for (i = 0, len = this.colorStops.length; i < len; i++) { + var color = this.colorStops[i].color, + opacity = this.colorStops[i].opacity, + offset = this.colorStops[i].offset; - return (0, _tuiCodeSnippet.extend)({ - setDrawMode: function setDrawMode(type, settings) { - _this3.stopDrawingMode(); - if (type === 'free') { - _this3.startDrawingMode('FREE_DRAWING', settings); - } else { - _this3.startDrawingMode('LINE_DRAWING', settings); + if (typeof opacity !== 'undefined') { + color = new fabric.Color(color).setAlpha(opacity).toRgba(); } - }, - setColor: function setColor(color) { - _this3.setBrush({ - color: color - }); + gradient.addColorStop(offset, color); } - }, this._commonAction()); - }, + return gradient; + } + }); - /** - * Mask Action - * @returns {Object} actions for ui mask - * @private - */ - _maskAction: function _maskAction() { - var _this4 = this; + fabric.util.object.extend(fabric.Gradient, { + + /* _FROM_SVG_START_ */ + /** + * Returns {@link fabric.Gradient} instance from an SVG element + * @static + * @memberOf fabric.Gradient + * @param {SVGGradientElement} el SVG gradient element + * @param {fabric.Object} instance + * @param {String} opacityAttr A fill-opacity or stroke-opacity attribute to multiply to each stop's opacity. + * @param {Object} svgOptions an object containing the size of the SVG in order to parse correctly gradients + * that uses gradientUnits as 'userSpaceOnUse' and percentages. + * @param {Object.number} viewBoxWidth width part of the viewBox attribute on svg + * @param {Object.number} viewBoxHeight height part of the viewBox attribute on svg + * @param {Object.number} width width part of the svg tag if viewBox is not specified + * @param {Object.number} height height part of the svg tag if viewBox is not specified + * @return {fabric.Gradient} Gradient instance + * @see http://www.w3.org/TR/SVG/pservers.html#LinearGradientElement + * @see http://www.w3.org/TR/SVG/pservers.html#RadialGradientElement + */ + fromElement: function(el, instance, opacityAttr, svgOptions) { + /** + * @example: + * + * + * + * + * + * + * OR + * + * + * + * + * + * + * OR + * + * + * + * + * + * + * + * OR + * + * + * + * + * + * + * + */ - return (0, _tuiCodeSnippet.extend)({ - loadImageFromURL: function loadImageFromURL(imgUrl, file) { - return _this4.loadImageFromURL(_this4.toDataURL(), 'FilterImage').then(function () { - _this4.addImageObject(imgUrl).then(function () { - URL.revokeObjectURL(file); - }); - _this4._invoker.fire(_consts.eventNames.EXECUTE_COMMAND, _consts.historyNames.LOAD_MASK_IMAGE); - }); - }, - applyFilter: function applyFilter() { - _this4.applyFilter('mask', { - maskObjId: _this4.activeObjectId - }); + var multiplier = parseFloat(opacityAttr) / (/%$/.test(opacityAttr) ? 100 : 1); + multiplier = multiplier < 0 ? 0 : multiplier > 1 ? 1 : multiplier; + if (isNaN(multiplier)) { + multiplier = 1; + } + + var colorStopEls = el.getElementsByTagName('stop'), + type, + gradientUnits = el.getAttribute('gradientUnits') === 'userSpaceOnUse' ? + 'pixels' : 'percentage', + gradientTransform = el.getAttribute('gradientTransform') || '', + colorStops = [], + coords, i, offsetX = 0, offsetY = 0, + transformMatrix; + if (el.nodeName === 'linearGradient' || el.nodeName === 'LINEARGRADIENT') { + type = 'linear'; + coords = getLinearCoords(el); + } + else { + type = 'radial'; + coords = getRadialCoords(el); + } + + for (i = colorStopEls.length; i--; ) { + colorStops.push(getColorStop(colorStopEls[i], multiplier)); } - }, this._commonAction()); - }, + transformMatrix = fabric.parseTransformAttribute(gradientTransform); + + __convertPercentUnitsToValues(instance, coords, svgOptions, gradientUnits); + + if (gradientUnits === 'pixels') { + offsetX = -instance.left; + offsetY = -instance.top; + } + + var gradient = new fabric.Gradient({ + id: el.getAttribute('id'), + type: type, + coords: coords, + colorStops: colorStops, + gradientUnits: gradientUnits, + gradientTransform: transformMatrix, + offsetX: offsetX, + offsetY: offsetY, + }); + + return gradient; + } + /* _FROM_SVG_END_ */ + }); /** - * Text Action - * @returns {Object} actions for ui text * @private */ - _textAction: function _textAction() { - var _this5 = this; - - return (0, _tuiCodeSnippet.extend)({ - changeTextStyle: function changeTextStyle(styleObj, isSilent) { - if (_this5.activeObjectId) { - _this5.changeTextStyle(_this5.activeObjectId, styleObj, isSilent); + function __convertPercentUnitsToValues(instance, options, svgOptions, gradientUnits) { + var propValue, finalValue; + Object.keys(options).forEach(function(prop) { + propValue = options[prop]; + if (propValue === 'Infinity') { + finalValue = 1; + } + else if (propValue === '-Infinity') { + finalValue = 0; + } + else { + finalValue = parseFloat(options[prop], 10); + if (typeof propValue === 'string' && /^(\d+\.\d+)%|(\d+)%$/.test(propValue)) { + finalValue *= 0.01; + if (gradientUnits === 'pixels') { + // then we need to fix those percentages here in svg parsing + if (prop === 'x1' || prop === 'x2' || prop === 'r2') { + finalValue *= svgOptions.viewBoxWidth || svgOptions.width; + } + if (prop === 'y1' || prop === 'y2') { + finalValue *= svgOptions.viewBoxHeight || svgOptions.height; + } + } } } - }, this._commonAction()); - }, + options[prop] = finalValue; + }); + } +})(); +(function() { + + 'use strict'; + + var toFixed = fabric.util.toFixed; + /** - * Rotate Action - * @returns {Object} actions for ui rotate - * @private + * Pattern class + * @class fabric.Pattern + * @see {@link http://fabricjs.com/patterns|Pattern demo} + * @see {@link http://fabricjs.com/dynamic-patterns|DynamicPattern demo} + * @see {@link fabric.Pattern#initialize} for constructor definition */ - _rotateAction: function _rotateAction() { - var _this6 = this; - return (0, _tuiCodeSnippet.extend)({ - rotate: function rotate(angle, isSilent) { - _this6.rotate(angle, isSilent); - _this6.ui.resizeEditor(); - _this6.ui.rotate.setRangeBarAngle('rotate', angle); - }, - setAngle: function setAngle(angle, isSilent) { - _this6.setAngle(angle, isSilent); - _this6.ui.resizeEditor(); - _this6.ui.rotate.setRangeBarAngle('setAngle', angle); + + fabric.Pattern = fabric.util.createClass(/** @lends fabric.Pattern.prototype */ { + + /** + * Repeat property of a pattern (one of repeat, repeat-x, repeat-y or no-repeat) + * @type String + * @default + */ + repeat: 'repeat', + + /** + * Pattern horizontal offset from object's left/top corner + * @type Number + * @default + */ + offsetX: 0, + + /** + * Pattern vertical offset from object's left/top corner + * @type Number + * @default + */ + offsetY: 0, + + /** + * crossOrigin value (one of "", "anonymous", "use-credentials") + * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes + * @type String + * @default + */ + crossOrigin: '', + + /** + * transform matrix to change the pattern, imported from svgs. + * @type Array + * @default + */ + patternTransform: null, + + /** + * Constructor + * @param {Object} [options] Options object + * @param {Function} [callback] function to invoke after callback init. + * @return {fabric.Pattern} thisArg + */ + initialize: function(options, callback) { + options || (options = { }); + + this.id = fabric.Object.__uid++; + this.setOptions(options); + if (!options.source || (options.source && typeof options.source !== 'string')) { + callback && callback(this); + return; } - }, this._commonAction()); - }, + else { + // img src string + var _this = this; + this.source = fabric.util.createImage(); + fabric.util.loadImage(options.source, function(img, isError) { + _this.source = img; + callback && callback(_this, isError); + }, null, this.crossOrigin); + } + }, + /** + * Returns object representation of a pattern + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} Object representation of a pattern instance + */ + toObject: function(propertiesToInclude) { + var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, + source, object; - /** - * Shape Action - * @returns {Object} actions for ui shape - * @private - */ - _shapeAction: function _shapeAction() { - var _this7 = this; + // element + if (typeof this.source.src === 'string') { + source = this.source.src; + } + // element + else if (typeof this.source === 'object' && this.source.toDataURL) { + source = this.source.toDataURL(); + } - return (0, _tuiCodeSnippet.extend)({ - changeShape: function changeShape(changeShapeObject, isSilent) { - if (_this7.activeObjectId) { - _this7.changeShape(_this7.activeObjectId, changeShapeObject, isSilent); + object = { + type: 'pattern', + source: source, + repeat: this.repeat, + crossOrigin: this.crossOrigin, + offsetX: toFixed(this.offsetX, NUM_FRACTION_DIGITS), + offsetY: toFixed(this.offsetY, NUM_FRACTION_DIGITS), + patternTransform: this.patternTransform ? this.patternTransform.concat() : null + }; + fabric.util.populateWithProperties(this, object, propertiesToInclude); + + return object; + }, + + /* _TO_SVG_START_ */ + /** + * Returns SVG representation of a pattern + * @param {fabric.Object} object + * @return {String} SVG representation of a pattern + */ + toSVG: function(object) { + var patternSource = typeof this.source === 'function' ? this.source() : this.source, + patternWidth = patternSource.width / object.width, + patternHeight = patternSource.height / object.height, + patternOffsetX = this.offsetX / object.width, + patternOffsetY = this.offsetY / object.height, + patternImgSrc = ''; + if (this.repeat === 'repeat-x' || this.repeat === 'no-repeat') { + patternHeight = 1; + if (patternOffsetY) { + patternHeight += Math.abs(patternOffsetY); } - }, - setDrawingShape: function setDrawingShape(shapeType) { - _this7.setDrawingShape(shapeType); } - }, this._commonAction()); - }, + if (this.repeat === 'repeat-y' || this.repeat === 'no-repeat') { + patternWidth = 1; + if (patternOffsetX) { + patternWidth += Math.abs(patternOffsetX); + } + } + if (patternSource.src) { + patternImgSrc = patternSource.src; + } + else if (patternSource.toDataURL) { + patternImgSrc = patternSource.toDataURL(); + } - /** - * Crop Action - * @returns {Object} actions for ui crop - * @private - */ - _cropAction: function _cropAction() { - var _this8 = this; + return '\n' + + '\n' + + '\n'; + }, + /* _TO_SVG_END_ */ - return (0, _tuiCodeSnippet.extend)({ - crop: function crop() { - var cropRect = _this8.getCropzoneRect(); - if (cropRect && !(0, _util.isEmptyCropzone)(cropRect)) { - _this8.crop(cropRect).then(function () { - _this8.stopDrawingMode(); - _this8.ui.resizeEditor(); - _this8.ui.changeMenu('crop'); - _this8._invoker.fire(_consts.eventNames.EXECUTE_COMMAND, _consts.historyNames.CROP); - })['catch'](function (message) { - return Promise.reject(message); - }); + setOptions: function(options) { + for (var prop in options) { + this[prop] = options[prop]; + } + }, + + /** + * Returns an instance of CanvasPattern + * @param {CanvasRenderingContext2D} ctx Context to create pattern + * @return {CanvasPattern} + */ + toLive: function(ctx) { + var source = this.source; + // if the image failed to load, return, and allow rest to continue loading + if (!source) { + return ''; + } + + // if an image + if (typeof source.src !== 'undefined') { + if (!source.complete) { + return ''; } - }, - cancel: function cancel() { - _this8.stopDrawingMode(); - _this8.ui.changeMenu('crop'); - }, - /* eslint-disable */ - preset: function preset(presetType) { - switch (presetType) { - case 'preset-square': - _this8.setCropzoneRect(1 / 1); - break; - case 'preset-3-2': - _this8.setCropzoneRect(3 / 2); - break; - case 'preset-4-3': - _this8.setCropzoneRect(4 / 3); - break; - case 'preset-5-4': - _this8.setCropzoneRect(5 / 4); - break; - case 'preset-7-5': - _this8.setCropzoneRect(7 / 5); - break; - case 'preset-16-9': - _this8.setCropzoneRect(16 / 9); - break; - default: - _this8.setCropzoneRect(); - _this8.ui.crop.changeApplyButtonStatus(false); - break; + if (source.naturalWidth === 0 || source.naturalHeight === 0) { + return ''; } } - }, this._commonAction()); - }, + return ctx.createPattern(source, this.repeat); + } + }); +})(); +(function(global) { + + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + toFixed = fabric.util.toFixed; + + if (fabric.Shadow) { + fabric.warn('fabric.Shadow is already defined.'); + return; + } + /** - * Resize Action - * @returns {Object} actions for ui resize - * @private + * Shadow class + * @class fabric.Shadow + * @see {@link http://fabricjs.com/shadows|Shadow demo} + * @see {@link fabric.Shadow#initialize} for constructor definition */ - _resizeAction: function _resizeAction() { - var _this9 = this; + fabric.Shadow = fabric.util.createClass(/** @lends fabric.Shadow.prototype */ { - return (0, _tuiCodeSnippet.extend)({ - getCurrentDimensions: function getCurrentDimensions() { - return _this9._graphics.getCurrentDimensions(); - }, - preview: function preview(actor, value, lockState) { - var currentDimensions = _this9._graphics.getCurrentDimensions(); - var calcAspectRatio = function calcAspectRatio() { - return currentDimensions.width / currentDimensions.height; - }; + /** + * Shadow color + * @type String + * @default + */ + color: 'rgb(0,0,0)', - var dimensions = {}; - switch (actor) { - case 'width': - dimensions.width = value; - if (lockState) { - dimensions.height = value / calcAspectRatio(); - } else { - dimensions.height = currentDimensions.height; - } - break; - case 'height': - dimensions.height = value; - if (lockState) { - dimensions.width = value * calcAspectRatio(); - } else { - dimensions.width = currentDimensions.width; - } - break; - default: - dimensions = currentDimensions; - } + /** + * Shadow blur + * @type Number + */ + blur: 0, - _this9._graphics.resize(dimensions).then(function () { - _this9.ui.resizeEditor(); - }); + /** + * Shadow horizontal offset + * @type Number + * @default + */ + offsetX: 0, - if (lockState) { - _this9.ui.resize.setWidthValue(dimensions.width); - _this9.ui.resize.setHeightValue(dimensions.height); - } - }, - lockAspectRatio: function lockAspectRatio(lockState, min, max) { - var _graphics$getCurrentD = _this9._graphics.getCurrentDimensions(), - width = _graphics$getCurrentD.width, - height = _graphics$getCurrentD.height; + /** + * Shadow vertical offset + * @type Number + * @default + */ + offsetY: 0, - var aspectRatio = width / height; - if (lockState) { - if (width > height) { - var pMax = max / aspectRatio; - var pMin = min * aspectRatio; - _this9.ui.resize.setLimit({ - minWidth: pMin > min ? pMin : min, - minHeight: min, - maxWidth: max, - maxHeight: pMax < max ? pMax : max - }); - } else { - var _pMax = max * aspectRatio; - var _pMin = min / aspectRatio; - _this9.ui.resize.setLimit({ - minWidth: min, - minHeight: _pMin > min ? _pMin : min, - maxWidth: _pMax < max ? _pMax : max, - maxHeight: max - }); - } - } else { - _this9.ui.resize.setLimit({ - minWidth: min, - minHeight: min, - maxWidth: max, - maxHeight: max - }); - } - }, - resize: function resize() { - var dimensions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; + /** + * Whether the shadow should affect stroke operations + * @type Boolean + * @default + */ + affectStroke: false, - if (!dimensions) { - dimensions = _this9._graphics.getCurrentDimensions(); - } + /** + * Indicates whether toObject should include default values + * @type Boolean + * @default + */ + includeDefaultValues: true, - _this9.resize(dimensions).then(function () { - _this9._graphics.setOriginalDimensions(dimensions); - _this9.stopDrawingMode(); - _this9.ui.resizeEditor(); - _this9.ui.changeMenu('resize'); - })['catch'](function (message) { - return Promise.reject(message); - }); - }, - reset: function reset() { - var standByMode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; + /** + * When `false`, the shadow will scale with the object. + * When `true`, the shadow's offsetX, offsetY, and blur will not be affected by the object's scale. + * default to false + * @type Boolean + * @default + */ + nonScaling: false, - var dimensions = _this9._graphics.getOriginalDimensions(); + /** + * Constructor + * @param {Object|String} [options] Options object with any of color, blur, offsetX, offsetY properties or string (e.g. "rgba(0,0,0,0.2) 2px 2px 10px") + * @return {fabric.Shadow} thisArg + */ + initialize: function(options) { - _this9.ui.resize.setWidthValue(dimensions.width, true); - _this9.ui.resize.setHeightValue(dimensions.height, true); + if (typeof options === 'string') { + options = this._parseShadow(options); + } - _this9._graphics.resize(dimensions).then(function () { - if (!standByMode) { - _this9.stopDrawingMode(); - _this9.ui.resizeEditor(); - _this9.ui.changeMenu('resize'); - } - }); + for (var prop in options) { + this[prop] = options[prop]; } - }, this._commonAction()); - }, + this.id = fabric.Object.__uid++; + }, - /** - * Flip Action - * @returns {Object} actions for ui flip - * @private - */ - _flipAction: function _flipAction() { - var _this10 = this; + /** + * @private + * @param {String} shadow Shadow value to parse + * @return {Object} Shadow object with color, offsetX, offsetY and blur + */ + _parseShadow: function(shadow) { + var shadowStr = shadow.trim(), + offsetsAndBlur = fabric.Shadow.reOffsetsAndBlur.exec(shadowStr) || [], + color = shadowStr.replace(fabric.Shadow.reOffsetsAndBlur, '') || 'rgb(0,0,0)'; - return (0, _tuiCodeSnippet.extend)({ - flip: function flip(flipType) { - return _this10[flipType](); - } - }, this._commonAction()); - }, + return { + color: color.trim(), + offsetX: parseFloat(offsetsAndBlur[1], 10) || 0, + offsetY: parseFloat(offsetsAndBlur[2], 10) || 0, + blur: parseFloat(offsetsAndBlur[3], 10) || 0 + }; + }, + /** + * Returns a string representation of an instance + * @see http://www.w3.org/TR/css-text-decor-3/#text-shadow + * @return {String} Returns CSS3 text-shadow declaration + */ + toString: function() { + return [this.offsetX, this.offsetY, this.blur, this.color].join('px '); + }, - /** - * Filter Action - * @returns {Object} actions for ui filter - * @private - */ - _filterAction: function _filterAction() { - var _this11 = this; + /* _TO_SVG_START_ */ + /** + * Returns SVG representation of a shadow + * @param {fabric.Object} object + * @return {String} SVG representation of a shadow + */ + toSVG: function(object) { + var fBoxX = 40, fBoxY = 40, NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, + offset = fabric.util.rotateVector( + { x: this.offsetX, y: this.offsetY }, + fabric.util.degreesToRadians(-object.angle)), + BLUR_BOX = 20, color = new fabric.Color(this.color); + + if (object.width && object.height) { + //http://www.w3.org/TR/SVG/filters.html#FilterEffectsRegion + // we add some extra space to filter box to contain the blur ( 20 ) + fBoxX = toFixed((Math.abs(offset.x) + this.blur) / object.width, NUM_FRACTION_DIGITS) * 100 + BLUR_BOX; + fBoxY = toFixed((Math.abs(offset.y) + this.blur) / object.height, NUM_FRACTION_DIGITS) * 100 + BLUR_BOX; + } + if (object.flipX) { + offset.x *= -1; + } + if (object.flipY) { + offset.y *= -1; + } + + return ( + '\n' + + '\t\n' + + '\t\n' + + '\t\n' + + '\t\n' + + '\t\n' + + '\t\t\n' + + '\t\t\n' + + '\t\n' + + '\n'); + }, + /* _TO_SVG_END_ */ - return (0, _tuiCodeSnippet.extend)({ - applyFilter: function applyFilter(applying, type, options, isSilent) { - if (applying) { - _this11.applyFilter(type, options, isSilent); - } else if (_this11.hasFilter(type)) { - _this11.removeFilter(type); - } + /** + * Returns object representation of a shadow + * @return {Object} Object representation of a shadow instance + */ + toObject: function() { + if (this.includeDefaultValues) { + return { + color: this.color, + blur: this.blur, + offsetX: this.offsetX, + offsetY: this.offsetY, + affectStroke: this.affectStroke, + nonScaling: this.nonScaling + }; } - }, this._commonAction()); - }, + var obj = { }, proto = fabric.Shadow.prototype; + + ['color', 'blur', 'offsetX', 'offsetY', 'affectStroke', 'nonScaling'].forEach(function(prop) { + if (this[prop] !== proto[prop]) { + obj[prop] = this[prop]; + } + }, this); + return obj; + } + }); /** - * Image Editor Event Observer + * Regex matching shadow offsetX, offsetY and blur (ex: "2px 2px 10px rgba(0,0,0,0.2)", "rgb(0,255,0) 2px 2px") + * @static + * @field + * @memberOf fabric.Shadow */ - setReAction: function setReAction() { - var _this12 = this; + // eslint-disable-next-line max-len + fabric.Shadow.reOffsetsAndBlur = /(?:\s|^)(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(\d+(?:\.\d*)?(?:px)?)?(?:\s?|$)(?:$|\s)/; - this.on({ - undoStackChanged: function undoStackChanged(length) { - if (length) { - _this12.ui.changeHelpButtonEnabled('undo', true); - _this12.ui.changeHelpButtonEnabled('reset', true); - } else { - _this12.ui.changeHelpButtonEnabled('undo', false); - _this12.ui.changeHelpButtonEnabled('reset', false); - } - _this12.ui.resizeEditor(); - }, - redoStackChanged: function redoStackChanged(length) { - if (length) { - _this12.ui.changeHelpButtonEnabled('redo', true); - } else { - _this12.ui.changeHelpButtonEnabled('redo', false); - } - _this12.ui.resizeEditor(); - }, - /* eslint-disable complexity */ - objectActivated: function objectActivated(obj) { - _this12.activeObjectId = obj.id; +})( true ? exports : 0); - _this12.ui.changeHelpButtonEnabled('delete', true); - _this12.ui.changeHelpButtonEnabled('deleteAll', true); - if (obj.type === 'cropzone') { - _this12.ui.crop.changeApplyButtonStatus(true); - } else if (['rect', 'circle', 'triangle'].indexOf(obj.type) > -1) { - _this12.stopDrawingMode(); - if (_this12.ui.submenu !== 'shape') { - _this12.ui.changeMenu('shape', false, false); - } - _this12.ui.shape.setShapeStatus({ - strokeColor: obj.stroke, - strokeWidth: obj.strokeWidth, - fillColor: obj.fill - }); +(function () { - _this12.ui.shape.setMaxStrokeValue(Math.min(obj.width, obj.height)); - } else if (obj.type === 'path' || obj.type === 'line') { - if (_this12.ui.submenu !== 'draw') { - _this12.ui.changeMenu('draw', false, false); - _this12.ui.draw.changeStandbyMode(); - } - } else if (['i-text', 'text'].indexOf(obj.type) > -1) { - if (_this12.ui.submenu !== 'text') { - _this12.ui.changeMenu('text', false, false); - } + 'use strict'; - _this12.ui.text.setTextStyleStateOnAction(obj); - } else if (obj.type === 'icon') { - _this12.stopDrawingMode(); - if (_this12.ui.submenu !== 'icon') { - _this12.ui.changeMenu('icon', false, false); - } - _this12.ui.icon.setIconPickerColor(obj.fill); - } - }, - /* eslint-enable complexity */ - addText: function addText(pos) { - var _ui$text = _this12.ui.text, - fill = _ui$text.textColor, - fontSize = _ui$text.fontSize, - fontStyle = _ui$text.fontStyle, - fontWeight = _ui$text.fontWeight, - underline = _ui$text.underline; + if (fabric.StaticCanvas) { + fabric.warn('fabric.StaticCanvas is already defined.'); + return; + } - var fontFamily = 'Noto Sans'; + // aliases for faster resolution + var extend = fabric.util.object.extend, + getElementOffset = fabric.util.getElementOffset, + removeFromArray = fabric.util.removeFromArray, + toFixed = fabric.util.toFixed, + transformPoint = fabric.util.transformPoint, + invertTransform = fabric.util.invertTransform, + getNodeCanvas = fabric.util.getNodeCanvas, + createCanvasElement = fabric.util.createCanvasElement, - _this12.addText('Double Click', { - position: pos.originPosition, - styles: { fill: fill, fontSize: fontSize, fontFamily: fontFamily, fontStyle: fontStyle, fontWeight: fontWeight, underline: underline } - }).then(function () { - _this12.changeCursor('default'); - }); - }, - addObjectAfter: function addObjectAfter(obj) { - if (obj.type === 'icon') { - _this12.ui.icon.changeStandbyMode(); - } else if (['rect', 'circle', 'triangle'].indexOf(obj.type) > -1) { - _this12.ui.shape.setMaxStrokeValue(Math.min(obj.width, obj.height)); - _this12.ui.shape.changeStandbyMode(); - } - }, - objectScaled: function objectScaled(obj) { - if (['i-text', 'text'].indexOf(obj.type) > -1) { - _this12.ui.text.fontSize = (0, _util.toInteger)(obj.fontSize); - } else if (['rect', 'circle', 'triangle'].indexOf(obj.type) >= 0) { - var width = obj.width, - height = obj.height; + CANVAS_INIT_ERROR = new Error('Could not initialize `canvas` element'); - var strokeValue = _this12.ui.shape.getStrokeValue(); + /** + * Static canvas class + * @class fabric.StaticCanvas + * @mixes fabric.Collection + * @mixes fabric.Observable + * @see {@link http://fabricjs.com/static_canvas|StaticCanvas demo} + * @see {@link fabric.StaticCanvas#initialize} for constructor definition + * @fires before:render + * @fires after:render + * @fires canvas:cleared + * @fires object:added + * @fires object:removed + */ + fabric.StaticCanvas = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric.StaticCanvas.prototype */ { - if (width < strokeValue) { - _this12.ui.shape.setStrokeValue(width); - } - if (height < strokeValue) { - _this12.ui.shape.setStrokeValue(height); - } - } - }, - selectionCleared: function selectionCleared() { - _this12.activeObjectId = null; - if (_this12.ui.submenu === 'text') { - _this12.changeCursor('text'); - } else if (!(0, _util.includes)(['draw', 'crop', 'resize'], _this12.ui.submenu)) { - _this12.stopDrawingMode(); - } - } - }); - }, + /** + * Constructor + * @param {HTMLElement | String} el <canvas> element to initialize instance on + * @param {Object} [options] Options object + * @return {Object} thisArg + */ + initialize: function(el, options) { + options || (options = { }); + this.renderAndResetBound = this.renderAndReset.bind(this); + this.requestRenderAllBound = this.requestRenderAll.bind(this); + this._initStatic(el, options); + }, + /** + * Background color of canvas instance. + * Should be set via {@link fabric.StaticCanvas#setBackgroundColor}. + * @type {(String|fabric.Pattern)} + * @default + */ + backgroundColor: '', - /** - * History Action - * @returns {Object} history actions for ui - * @private - */ - _historyAction: function _historyAction() { - var _this13 = this; + /** + * Background image of canvas instance. + * since 2.4.0 image caching is active, please when putting an image as background, add to the + * canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom + * vale. As an alternative you can disable image objectCaching + * @type fabric.Image + * @default + */ + backgroundImage: null, - return { - undo: function undo(count) { - return _this13.undo(count); - }, - redo: function redo(count) { - return _this13.redo(count); - } - }; - }, + /** + * Overlay color of canvas instance. + * Should be set via {@link fabric.StaticCanvas#setOverlayColor} + * @since 1.3.9 + * @type {(String|fabric.Pattern)} + * @default + */ + overlayColor: '', + /** + * Overlay image of canvas instance. + * since 2.4.0 image caching is active, please when putting an image as overlay, add to the + * canvas property a reference to the canvas it is on. Otherwise the image cannot detect the zoom + * vale. As an alternative you can disable image objectCaching + * @type fabric.Image + * @default + */ + overlayImage: null, - /** - * Common Action - * @returns {Object} common actions for ui - * @private - */ - _commonAction: function _commonAction() { - var _this14 = this; + /** + * Indicates whether toObject/toDatalessObject should include default values + * if set to false, takes precedence over the object value. + * @type Boolean + * @default + */ + includeDefaultValues: true, - var TEXT = _consts.drawingModes.TEXT, - CROPPER = _consts.drawingModes.CROPPER, - SHAPE = _consts.drawingModes.SHAPE, - ZOOM = _consts.drawingModes.ZOOM, - RESIZE = _consts.drawingModes.RESIZE; + /** + * Indicates whether objects' state should be saved + * @type Boolean + * @default + */ + stateful: false, + /** + * Indicates whether {@link fabric.Collection.add}, {@link fabric.Collection.insertAt} and {@link fabric.Collection.remove}, + * {@link fabric.StaticCanvas.moveTo}, {@link fabric.StaticCanvas.clear} and many more, should also re-render canvas. + * Disabling this option will not give a performance boost when adding/removing a lot of objects to/from canvas at once + * since the renders are quequed and executed one per frame. + * Disabling is suggested anyway and managing the renders of the app manually is not a big effort ( canvas.requestRenderAll() ) + * Left default to true to do not break documentation and old app, fiddles. + * @type Boolean + * @default + */ + renderOnAddRemove: true, - return { - modeChange: function modeChange(menu) { - switch (menu) { - case _consts.drawingMenuNames.TEXT: - _this14._changeActivateMode(TEXT); - break; - case _consts.drawingMenuNames.CROP: - _this14.startDrawingMode(CROPPER); - break; - case _consts.drawingMenuNames.SHAPE: - _this14._changeActivateMode(SHAPE); - _this14.setDrawingShape(_this14.ui.shape.type, _this14.ui.shape.options); - break; - case _consts.drawingMenuNames.ZOOM: - _this14.startDrawingMode(ZOOM); - break; - case _consts.drawingMenuNames.RESIZE: - _this14.startDrawingMode(RESIZE); - break; - default: - break; - } - }, - deactivateAll: this.deactivateAll.bind(this), - changeSelectableAll: this.changeSelectableAll.bind(this), - discardSelection: this.discardSelection.bind(this), - stopDrawingMode: this.stopDrawingMode.bind(this) - }; - }, - - - /** - * Mixin - * @param {ImageEditor} ImageEditor instance - */ - mixin: function mixin(ImageEditor) { - (0, _tuiCodeSnippet.extend)(ImageEditor.prototype, this); - } -}; - -/***/ }), + /** + * Indicates whether object controls (borders/controls) are rendered above overlay image + * @type Boolean + * @default + */ + controlsAboveOverlay: false, -/***/ "./src/js/command/addIcon.js": -/*!***********************************!*\ - !*** ./src/js/command/addIcon.js ***! - \***********************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Indicates whether the browser can be scrolled when using a touchscreen and dragging on the canvas + * @type Boolean + * @default + */ + allowTouchScrolling: false, -"use strict"; + /** + * Indicates whether this canvas will use image smoothing, this is on by default in browsers + * @type Boolean + * @default + */ + imageSmoothingEnabled: true, + /** + * The transformation (in the format of Canvas transform) which focuses the viewport + * @type Array + * @default + */ + viewportTransform: fabric.iMatrix.concat(), -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * if set to false background image is not affected by viewport transform + * @since 1.6.3 + * @type Boolean + * @default + */ + backgroundVpt: true, -var _command = __webpack_require__(/*! @/factory/command */ "./src/js/factory/command.js"); + /** + * if set to false overlya image is not affected by viewport transform + * @since 1.6.3 + * @type Boolean + * @default + */ + overlayVpt: true, -var _command2 = _interopRequireDefault(_command); + /** + * When true, canvas is scaled by devicePixelRatio for better rendering on retina screens + * @type Boolean + * @default + */ + enableRetinaScaling: true, -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + /** + * Describe canvas element extension over design + * properties are tl,tr,bl,br. + * if canvas is not zoomed/panned those points are the four corner of canvas + * if canvas is viewportTransformed you those points indicate the extension + * of canvas element in plain untrasformed coordinates + * The coordinates get updated with @method calcViewportBoundaries. + * @memberOf fabric.StaticCanvas.prototype + */ + vptCoords: { }, -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + /** + * Based on vptCoords and object.aCoords, skip rendering of objects that + * are not included in current viewport. + * May greatly help in applications with crowded canvas and use of zoom/pan + * If One of the corner of the bounding box of the object is on the canvas + * the objects get rendered. + * @memberOf fabric.StaticCanvas.prototype + * @type Boolean + * @default + */ + skipOffscreen: true, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * a fabricObject that, without stroke define a clipping area with their shape. filled in black + * the clipPath object gets used when the canvas has rendered, and the context is placed in the + * top left corner of the canvas. + * clipPath will clip away controls, if you do not want this to happen use controlsAboveOverlay = true + * @type fabric.Object + */ + clipPath: undefined, -var ICON = _consts.componentNames.ICON; /** - * @author NHN. FE Development Team - * @fileoverview Add an icon - */ + /** + * @private + * @param {HTMLElement | String} el <canvas> element to initialize instance on + * @param {Object} [options] Options object + */ + _initStatic: function(el, options) { + var cb = this.requestRenderAllBound; + this._objects = []; + this._createLowerCanvas(el); + this._initOptions(options); + // only initialize retina scaling once + if (!this.interactive) { + this._initRetinaScaling(); + } -var command = { - name: _consts.commandNames.ADD_ICON, + if (options.overlayImage) { + this.setOverlayImage(options.overlayImage, cb); + } + if (options.backgroundImage) { + this.setBackgroundImage(options.backgroundImage, cb); + } + if (options.backgroundColor) { + this.setBackgroundColor(options.backgroundColor, cb); + } + if (options.overlayColor) { + this.setOverlayColor(options.overlayColor, cb); + } + this.calcOffset(); + }, - /** - * Add an icon - * @param {Graphics} graphics - Graphics instance - * @param {string} type - Icon type ('arrow', 'cancel', custom icon name) - * @param {Object} options - Icon options - * @param {string} [options.fill] - Icon foreground color - * @param {string} [options.left] - Icon x position - * @param {string} [options.top] - Icon y position - * @returns {Promise} - */ - execute: function execute(graphics, type, options) { - var _this = this; + /** + * @private + */ + _isRetinaScaling: function() { + return (fabric.devicePixelRatio !== 1 && this.enableRetinaScaling); + }, - var iconComp = graphics.getComponent(ICON); + /** + * @private + * @return {Number} retinaScaling if applied, otherwise 1; + */ + getRetinaScaling: function() { + return this._isRetinaScaling() ? fabric.devicePixelRatio : 1; + }, - return iconComp.add(type, options).then(function (objectProps) { - _this.undoData.object = graphics.getObject(objectProps.id); + /** + * @private + */ + _initRetinaScaling: function() { + if (!this._isRetinaScaling()) { + return; + } + var scaleRatio = fabric.devicePixelRatio; + this.__initRetinaScaling(scaleRatio, this.lowerCanvasEl, this.contextContainer); + if (this.upperCanvasEl) { + this.__initRetinaScaling(scaleRatio, this.upperCanvasEl, this.contextTop); + } + }, - return objectProps; - }); - }, + __initRetinaScaling: function(scaleRatio, canvas, context) { + canvas.setAttribute('width', this.width * scaleRatio); + canvas.setAttribute('height', this.height * scaleRatio); + context.scale(scaleRatio, scaleRatio); + }, - /** - * @param {Graphics} graphics - Graphics instance - * @returns {Promise} - */ - undo: function undo(graphics) { - graphics.remove(this.undoData.object); + /** + * Calculates canvas element offset relative to the document + * This method is also attached as "resize" event handler of window + * @return {fabric.Canvas} instance + * @chainable + */ + calcOffset: function () { + this._offset = getElementOffset(this.lowerCanvasEl); + return this; + }, - return _util.Promise.resolve(); - } -}; + /** + * Sets {@link fabric.StaticCanvas#overlayImage|overlay image} for this canvas + * @param {(fabric.Image|String)} image fabric.Image instance or URL of an image to set overlay to + * @param {Function} callback callback to invoke when image is loaded and set as an overlay + * @param {Object} [options] Optional options to set for the {@link fabric.Image|overlay image}. + * @return {fabric.Canvas} thisArg + * @chainable + * @see {@link http://jsfiddle.net/fabricjs/MnzHT/|jsFiddle demo} + * @example Normal overlayImage with left/top = 0 + * canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), { + * // Needed to position overlayImage at 0/0 + * originX: 'left', + * originY: 'top' + * }); + * @example overlayImage with different properties + * canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), { + * opacity: 0.5, + * angle: 45, + * left: 400, + * top: 400, + * originX: 'left', + * originY: 'top' + * }); + * @example Stretched overlayImage #1 - width/height correspond to canvas width/height + * fabric.Image.fromURL('http://fabricjs.com/assets/jail_cell_bars.png', function(img, isError) { + * img.set({width: canvas.width, height: canvas.height, originX: 'left', originY: 'top'}); + * canvas.setOverlayImage(img, canvas.renderAll.bind(canvas)); + * }); + * @example Stretched overlayImage #2 - width/height correspond to canvas width/height + * canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), { + * width: canvas.width, + * height: canvas.height, + * // Needed to position overlayImage at 0/0 + * originX: 'left', + * originY: 'top' + * }); + * @example overlayImage loaded from cross-origin + * canvas.setOverlayImage('http://fabricjs.com/assets/jail_cell_bars.png', canvas.renderAll.bind(canvas), { + * opacity: 0.5, + * angle: 45, + * left: 400, + * top: 400, + * originX: 'left', + * originY: 'top', + * crossOrigin: 'anonymous' + * }); + */ + setOverlayImage: function (image, callback, options) { + return this.__setBgOverlayImage('overlayImage', image, callback, options); + }, -_command2.default.register(command); + /** + * Sets {@link fabric.StaticCanvas#backgroundImage|background image} for this canvas + * @param {(fabric.Image|String)} image fabric.Image instance or URL of an image to set background to + * @param {Function} callback Callback to invoke when image is loaded and set as background + * @param {Object} [options] Optional options to set for the {@link fabric.Image|background image}. + * @return {fabric.Canvas} thisArg + * @chainable + * @see {@link http://jsfiddle.net/djnr8o7a/28/|jsFiddle demo} + * @example Normal backgroundImage with left/top = 0 + * canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), { + * // Needed to position backgroundImage at 0/0 + * originX: 'left', + * originY: 'top' + * }); + * @example backgroundImage with different properties + * canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), { + * opacity: 0.5, + * angle: 45, + * left: 400, + * top: 400, + * originX: 'left', + * originY: 'top' + * }); + * @example Stretched backgroundImage #1 - width/height correspond to canvas width/height + * fabric.Image.fromURL('http://fabricjs.com/assets/honey_im_subtle.png', function(img, isError) { + * img.set({width: canvas.width, height: canvas.height, originX: 'left', originY: 'top'}); + * canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas)); + * }); + * @example Stretched backgroundImage #2 - width/height correspond to canvas width/height + * canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), { + * width: canvas.width, + * height: canvas.height, + * // Needed to position backgroundImage at 0/0 + * originX: 'left', + * originY: 'top' + * }); + * @example backgroundImage loaded from cross-origin + * canvas.setBackgroundImage('http://fabricjs.com/assets/honey_im_subtle.png', canvas.renderAll.bind(canvas), { + * opacity: 0.5, + * angle: 45, + * left: 400, + * top: 400, + * originX: 'left', + * originY: 'top', + * crossOrigin: 'anonymous' + * }); + */ + // TODO: fix stretched examples + setBackgroundImage: function (image, callback, options) { + return this.__setBgOverlayImage('backgroundImage', image, callback, options); + }, -exports.default = command; + /** + * Sets {@link fabric.StaticCanvas#overlayColor|foreground color} for this canvas + * @param {(String|fabric.Pattern)} overlayColor Color or pattern to set foreground color to + * @param {Function} callback Callback to invoke when foreground color is set + * @return {fabric.Canvas} thisArg + * @chainable + * @see {@link http://jsfiddle.net/fabricjs/pB55h/|jsFiddle demo} + * @example Normal overlayColor - color value + * canvas.setOverlayColor('rgba(255, 73, 64, 0.6)', canvas.renderAll.bind(canvas)); + * @example fabric.Pattern used as overlayColor + * canvas.setOverlayColor({ + * source: 'http://fabricjs.com/assets/escheresque_ste.png' + * }, canvas.renderAll.bind(canvas)); + * @example fabric.Pattern used as overlayColor with repeat and offset + * canvas.setOverlayColor({ + * source: 'http://fabricjs.com/assets/escheresque_ste.png', + * repeat: 'repeat', + * offsetX: 200, + * offsetY: 100 + * }, canvas.renderAll.bind(canvas)); + */ + setOverlayColor: function(overlayColor, callback) { + return this.__setBgOverlayColor('overlayColor', overlayColor, callback); + }, -/***/ }), + /** + * Sets {@link fabric.StaticCanvas#backgroundColor|background color} for this canvas + * @param {(String|fabric.Pattern)} backgroundColor Color or pattern to set background color to + * @param {Function} callback Callback to invoke when background color is set + * @return {fabric.Canvas} thisArg + * @chainable + * @see {@link http://jsfiddle.net/fabricjs/hXzvk/|jsFiddle demo} + * @example Normal backgroundColor - color value + * canvas.setBackgroundColor('rgba(255, 73, 64, 0.6)', canvas.renderAll.bind(canvas)); + * @example fabric.Pattern used as backgroundColor + * canvas.setBackgroundColor({ + * source: 'http://fabricjs.com/assets/escheresque_ste.png' + * }, canvas.renderAll.bind(canvas)); + * @example fabric.Pattern used as backgroundColor with repeat and offset + * canvas.setBackgroundColor({ + * source: 'http://fabricjs.com/assets/escheresque_ste.png', + * repeat: 'repeat', + * offsetX: 200, + * offsetY: 100 + * }, canvas.renderAll.bind(canvas)); + */ + setBackgroundColor: function(backgroundColor, callback) { + return this.__setBgOverlayColor('backgroundColor', backgroundColor, callback); + }, -/***/ "./src/js/command/addImageObject.js": -/*!******************************************!*\ - !*** ./src/js/command/addImageObject.js ***! - \******************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * @private + * @param {String} property Property to set ({@link fabric.StaticCanvas#backgroundImage|backgroundImage} + * or {@link fabric.StaticCanvas#overlayImage|overlayImage}) + * @param {(fabric.Image|String|null)} image fabric.Image instance, URL of an image or null to set background or overlay to + * @param {Function} callback Callback to invoke when image is loaded and set as background or overlay. The first argument is the created image, the second argument is a flag indicating whether an error occurred or not. + * @param {Object} [options] Optional options to set for the {@link fabric.Image|image}. + */ + __setBgOverlayImage: function(property, image, callback, options) { + if (typeof image === 'string') { + fabric.util.loadImage(image, function(img, isError) { + if (img) { + var instance = new fabric.Image(img, options); + this[property] = instance; + instance.canvas = this; + } + callback && callback(img, isError); + }, this, options && options.crossOrigin); + } + else { + options && image.setOptions(options); + this[property] = image; + image && (image.canvas = this); + callback && callback(image, false); + } -"use strict"; + return this; + }, + /** + * @private + * @param {String} property Property to set ({@link fabric.StaticCanvas#backgroundColor|backgroundColor} + * or {@link fabric.StaticCanvas#overlayColor|overlayColor}) + * @param {(Object|String|null)} color Object with pattern information, color value or null + * @param {Function} [callback] Callback is invoked when color is set + */ + __setBgOverlayColor: function(property, color, callback) { + this[property] = color; + this._initGradient(color, property); + this._initPattern(color, property, callback); + return this; + }, -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * @private + */ + _createCanvasElement: function() { + var element = createCanvasElement(); + if (!element) { + throw CANVAS_INIT_ERROR; + } + if (!element.style) { + element.style = { }; + } + if (typeof element.getContext === 'undefined') { + throw CANVAS_INIT_ERROR; + } + return element; + }, -var _command = __webpack_require__(/*! @/factory/command */ "./src/js/factory/command.js"); + /** + * @private + * @param {Object} [options] Options object + */ + _initOptions: function (options) { + var lowerCanvasEl = this.lowerCanvasEl; + this._setOptions(options); -var _command2 = _interopRequireDefault(_command); + this.width = this.width || parseInt(lowerCanvasEl.width, 10) || 0; + this.height = this.height || parseInt(lowerCanvasEl.height, 10) || 0; -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + if (!this.lowerCanvasEl.style) { + return; + } -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + lowerCanvasEl.width = this.width; + lowerCanvasEl.height = this.height; -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + lowerCanvasEl.style.width = this.width + 'px'; + lowerCanvasEl.style.height = this.height + 'px'; -var command = { - name: _consts.commandNames.ADD_IMAGE_OBJECT, + this.viewportTransform = this.viewportTransform.slice(); + }, - /** - * Add an image object - * @param {Graphics} graphics - Graphics instance - * @param {string} imgUrl - Image url to make object - * @returns {Promise} - */ - execute: function execute(graphics, imgUrl) { - var _this = this; + /** + * Creates a bottom canvas + * @private + * @param {HTMLElement} [canvasEl] + */ + _createLowerCanvas: function (canvasEl) { + // canvasEl === 'HTMLCanvasElement' does not work on jsdom/node + if (canvasEl && canvasEl.getContext) { + this.lowerCanvasEl = canvasEl; + } + else { + this.lowerCanvasEl = fabric.util.getById(canvasEl) || this._createCanvasElement(); + } - return graphics.addImageObject(imgUrl).then(function (objectProps) { - _this.undoData.object = graphics.getObject(objectProps.id); + fabric.util.addClass(this.lowerCanvasEl, 'lower-canvas'); + this._originalCanvasStyle = this.lowerCanvasEl.style; + if (this.interactive) { + this._applyCanvasStyle(this.lowerCanvasEl); + } - return objectProps; - }); - }, + this.contextContainer = this.lowerCanvasEl.getContext('2d'); + }, + /** + * Returns canvas width (in px) + * @return {Number} + */ + getWidth: function () { + return this.width; + }, - /** - * @param {Graphics} graphics - Graphics instance - * @returns {Promise} - */ - undo: function undo(graphics) { - graphics.remove(this.undoData.object); + /** + * Returns canvas height (in px) + * @return {Number} + */ + getHeight: function () { + return this.height; + }, - return _util.Promise.resolve(); - } -}; /** - * @author NHN. FE Development Team - * @fileoverview Add an image object - */ + /** + * Sets width of this canvas instance + * @param {Number|String} value Value to set width to + * @param {Object} [options] Options object + * @param {Boolean} [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions + * @param {Boolean} [options.cssOnly=false] Set the given dimensions only as css dimensions + * @return {fabric.Canvas} instance + * @chainable true + */ + setWidth: function (value, options) { + return this.setDimensions({ width: value }, options); + }, + /** + * Sets height of this canvas instance + * @param {Number|String} value Value to set height to + * @param {Object} [options] Options object + * @param {Boolean} [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions + * @param {Boolean} [options.cssOnly=false] Set the given dimensions only as css dimensions + * @return {fabric.Canvas} instance + * @chainable true + */ + setHeight: function (value, options) { + return this.setDimensions({ height: value }, options); + }, -_command2.default.register(command); + /** + * Sets dimensions (width, height) of this canvas instance. when options.cssOnly flag active you should also supply the unit of measure (px/%/em) + * @param {Object} dimensions Object with width/height properties + * @param {Number|String} [dimensions.width] Width of canvas element + * @param {Number|String} [dimensions.height] Height of canvas element + * @param {Object} [options] Options object + * @param {Boolean} [options.backstoreOnly=false] Set the given dimensions only as canvas backstore dimensions + * @param {Boolean} [options.cssOnly=false] Set the given dimensions only as css dimensions + * @return {fabric.Canvas} thisArg + * @chainable + */ + setDimensions: function (dimensions, options) { + var cssValue; -exports.default = command; + options = options || {}; -/***/ }), + for (var prop in dimensions) { + cssValue = dimensions[prop]; -/***/ "./src/js/command/addObject.js": -/*!*************************************!*\ - !*** ./src/js/command/addObject.js ***! - \*************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + if (!options.cssOnly) { + this._setBackstoreDimension(prop, dimensions[prop]); + cssValue += 'px'; + this.hasLostContext = true; + } -"use strict"; + if (!options.backstoreOnly) { + this._setCssDimension(prop, cssValue); + } + } + if (this._isCurrentlyDrawing) { + this.freeDrawingBrush && this.freeDrawingBrush._setBrushStyles(); + } + this._initRetinaScaling(); + this.calcOffset(); + if (!options.cssOnly) { + this.requestRenderAll(); + } -Object.defineProperty(exports, "__esModule", { - value: true -}); + return this; + }, -var _command = __webpack_require__(/*! @/factory/command */ "./src/js/factory/command.js"); + /** + * Helper for setting width/height + * @private + * @param {String} prop property (width|height) + * @param {Number} value value to set property to + * @return {fabric.Canvas} instance + * @chainable true + */ + _setBackstoreDimension: function (prop, value) { + this.lowerCanvasEl[prop] = value; -var _command2 = _interopRequireDefault(_command); + if (this.upperCanvasEl) { + this.upperCanvasEl[prop] = value; + } -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + if (this.cacheCanvasEl) { + this.cacheCanvasEl[prop] = value; + } -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + this[prop] = value; -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + return this; + }, -var command = { - name: _consts.commandNames.ADD_OBJECT, + /** + * Helper for setting css width/height + * @private + * @param {String} prop property (width|height) + * @param {String} value value to set property to + * @return {fabric.Canvas} instance + * @chainable true + */ + _setCssDimension: function (prop, value) { + this.lowerCanvasEl.style[prop] = value; - /** - * Add an object - * @param {Graphics} graphics - Graphics instance - * @param {Object} object - Fabric object - * @returns {Promise} - */ - execute: function execute(graphics, object) { - return new _util.Promise(function (resolve, reject) { - if (!graphics.contains(object)) { - graphics.add(object); - resolve(object); - } else { - reject(_consts.rejectMessages.addedObject); + if (this.upperCanvasEl) { + this.upperCanvasEl.style[prop] = value; } - }); - }, - - /** - * @param {Graphics} graphics - Graphics instance - * @param {Object} object - Fabric object - * @returns {Promise} - */ - undo: function undo(graphics, object) { - return new _util.Promise(function (resolve, reject) { - if (graphics.contains(object)) { - graphics.remove(object); - resolve(object); - } else { - reject(_consts.rejectMessages.noObject); + if (this.wrapperEl) { + this.wrapperEl.style[prop] = value; } - }); - } -}; /** - * @author NHN. FE Development Team - * @fileoverview Add an object - */ + return this; + }, -_command2.default.register(command); + /** + * Returns canvas zoom level + * @return {Number} + */ + getZoom: function () { + return this.viewportTransform[0]; + }, -exports.default = command; + /** + * Sets viewport transform of this canvas instance + * @param {Array} vpt the transform in the form of context.transform + * @return {fabric.Canvas} instance + * @chainable true + */ + setViewportTransform: function (vpt) { + var activeObject = this._activeObject, + backgroundObject = this.backgroundImage, + overlayObject = this.overlayImage, + object, i, len; + this.viewportTransform = vpt; + for (i = 0, len = this._objects.length; i < len; i++) { + object = this._objects[i]; + object.group || object.setCoords(true); + } + if (activeObject) { + activeObject.setCoords(); + } + if (backgroundObject) { + backgroundObject.setCoords(true); + } + if (overlayObject) { + overlayObject.setCoords(true); + } + this.calcViewportBoundaries(); + this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, -/***/ }), + /** + * Sets zoom level of this canvas instance, the zoom centered around point + * meaning that following zoom to point with the same point will have the visual + * effect of the zoom originating from that point. The point won't move. + * It has nothing to do with canvas center or visual center of the viewport. + * @param {fabric.Point} point to zoom with respect to + * @param {Number} value to set zoom to, less than 1 zooms out + * @return {fabric.Canvas} instance + * @chainable true + */ + zoomToPoint: function (point, value) { + // TODO: just change the scale, preserve other transformations + var before = point, vpt = this.viewportTransform.slice(0); + point = transformPoint(point, invertTransform(this.viewportTransform)); + vpt[0] = value; + vpt[3] = value; + var after = transformPoint(point, vpt); + vpt[4] += before.x - after.x; + vpt[5] += before.y - after.y; + return this.setViewportTransform(vpt); + }, -/***/ "./src/js/command/addShape.js": -/*!************************************!*\ - !*** ./src/js/command/addShape.js ***! - \************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Sets zoom level of this canvas instance + * @param {Number} value to set zoom to, less than 1 zooms out + * @return {fabric.Canvas} instance + * @chainable true + */ + setZoom: function (value) { + this.zoomToPoint(new fabric.Point(0, 0), value); + return this; + }, -"use strict"; + /** + * Pan viewport so as to place point at top left corner of canvas + * @param {fabric.Point} point to move to + * @return {fabric.Canvas} instance + * @chainable true + */ + absolutePan: function (point) { + var vpt = this.viewportTransform.slice(0); + vpt[4] = -point.x; + vpt[5] = -point.y; + return this.setViewportTransform(vpt); + }, + /** + * Pans viewpoint relatively + * @param {fabric.Point} point (position vector) to move by + * @return {fabric.Canvas} instance + * @chainable true + */ + relativePan: function (point) { + return this.absolutePan(new fabric.Point( + -point.x - this.viewportTransform[4], + -point.y - this.viewportTransform[5] + )); + }, -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * Returns <canvas> element corresponding to this instance + * @return {HTMLCanvasElement} + */ + getElement: function () { + return this.lowerCanvasEl; + }, -var _command = __webpack_require__(/*! @/factory/command */ "./src/js/factory/command.js"); + /** + * @private + * @param {fabric.Object} obj Object that was added + */ + _onObjectAdded: function(obj) { + this.stateful && obj.setupState(); + obj._set('canvas', this); + obj.setCoords(); + this.fire('object:added', { target: obj }); + obj.fire('added'); + }, -var _command2 = _interopRequireDefault(_command); + /** + * @private + * @param {fabric.Object} obj Object that was removed + */ + _onObjectRemoved: function(obj) { + this.fire('object:removed', { target: obj }); + obj.fire('removed'); + delete obj.canvas; + }, -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + /** + * Clears specified context of canvas element + * @param {CanvasRenderingContext2D} ctx Context to clear + * @return {fabric.Canvas} thisArg + * @chainable + */ + clearContext: function(ctx) { + ctx.clearRect(0, 0, this.width, this.height); + return this; + }, -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + /** + * Returns context of canvas where objects are drawn + * @return {CanvasRenderingContext2D} + */ + getContext: function () { + return this.contextContainer; + }, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Clears all contexts (background, main, top) of an instance + * @return {fabric.Canvas} thisArg + * @chainable + */ + clear: function () { + this.remove.apply(this, this.getObjects()); + this.backgroundImage = null; + this.overlayImage = null; + this.backgroundColor = ''; + this.overlayColor = ''; + if (this._hasITextHandlers) { + this.off('mouse:up', this._mouseUpITextHandler); + this._iTextInstances = null; + this._hasITextHandlers = false; + } + this.clearContext(this.contextContainer); + this.fire('canvas:cleared'); + this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, -var SHAPE = _consts.componentNames.SHAPE; /** - * @author NHN. FE Development Team - * @fileoverview Add a shape - */ + /** + * Renders the canvas + * @return {fabric.Canvas} instance + * @chainable + */ + renderAll: function () { + var canvasToDrawOn = this.contextContainer; + this.renderCanvas(canvasToDrawOn, this._objects); + return this; + }, -var command = { - name: _consts.commandNames.ADD_SHAPE, + /** + * Function created to be instance bound at initialization + * used in requestAnimationFrame rendering + * Let the fabricJS call it. If you call it manually you could have more + * animationFrame stacking on to of each other + * for an imperative rendering, use canvas.renderAll + * @private + * @return {fabric.Canvas} instance + * @chainable + */ + renderAndReset: function() { + this.isRendering = 0; + this.renderAll(); + }, - /** - * Add a shape - * @param {Graphics} graphics - Graphics instance - * @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle') - * @param {Object} options - Shape options - * @param {string} [options.fill] - Shape foreground color (ex: '#fff', 'transparent') - * @param {string} [options.stroke] - Shape outline color - * @param {number} [options.strokeWidth] - Shape outline width - * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) - * @param {number} [options.height] - Height value (When type option is 'rect', this options can use) - * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) - * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) - * @param {number} [options.left] - Shape x position - * @param {number} [options.top] - Shape y position - * @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not - * @returns {Promise} - */ - execute: function execute(graphics, type, options) { - var _this = this; + /** + * Append a renderAll request to next animation frame. + * unless one is already in progress, in that case nothing is done + * a boolean flag will avoid appending more. + * @return {fabric.Canvas} instance + * @chainable + */ + requestRenderAll: function () { + if (!this.isRendering) { + this.isRendering = fabric.util.requestAnimFrame(this.renderAndResetBound); + } + return this; + }, - var shapeComp = graphics.getComponent(SHAPE); + /** + * Calculate the position of the 4 corner of canvas with current viewportTransform. + * helps to determinate when an object is in the current rendering viewport using + * object absolute coordinates ( aCoords ) + * @return {Object} points.tl + * @chainable + */ + calcViewportBoundaries: function() { + var points = { }, width = this.width, height = this.height, + iVpt = invertTransform(this.viewportTransform); + points.tl = transformPoint({ x: 0, y: 0 }, iVpt); + points.br = transformPoint({ x: width, y: height }, iVpt); + points.tr = new fabric.Point(points.br.x, points.tl.y); + points.bl = new fabric.Point(points.tl.x, points.br.y); + this.vptCoords = points; + return points; + }, - return shapeComp.add(type, options).then(function (objectProps) { - var id = objectProps.id; + cancelRequestedRender: function() { + if (this.isRendering) { + fabric.util.cancelAnimFrame(this.isRendering); + this.isRendering = 0; + } + }, + /** + * Renders background, objects, overlay and controls. + * @param {CanvasRenderingContext2D} ctx + * @param {Array} objects to render + * @return {fabric.Canvas} instance + * @chainable + */ + renderCanvas: function(ctx, objects) { + var v = this.viewportTransform, path = this.clipPath; + this.cancelRequestedRender(); + this.calcViewportBoundaries(); + this.clearContext(ctx); + fabric.util.setImageSmoothing(ctx, this.imageSmoothingEnabled); + this.fire('before:render', { ctx: ctx, }); + this._renderBackground(ctx); + + ctx.save(); + //apply viewport transform once for all rendering process + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + this._renderObjects(ctx, objects); + ctx.restore(); + if (!this.controlsAboveOverlay && this.interactive) { + this.drawControls(ctx); + } + if (path) { + path.canvas = this; + // needed to setup a couple of variables + path.shouldCache(); + path._transformDone = true; + path.renderCache({ forClipping: true }); + this.drawClipPathOnCanvas(ctx); + } + this._renderOverlay(ctx); + if (this.controlsAboveOverlay && this.interactive) { + this.drawControls(ctx); + } + this.fire('after:render', { ctx: ctx, }); + }, - _this.undoData.object = graphics.getObject(id); + /** + * Paint the cached clipPath on the lowerCanvasEl + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + drawClipPathOnCanvas: function(ctx) { + var v = this.viewportTransform, path = this.clipPath; + ctx.save(); + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + // DEBUG: uncomment this line, comment the following + // ctx.globalAlpha = 0.4; + ctx.globalCompositeOperation = 'destination-in'; + path.transform(ctx); + ctx.scale(1 / path.zoomX, 1 / path.zoomY); + ctx.drawImage(path._cacheCanvas, -path.cacheTranslationX, -path.cacheTranslationY); + ctx.restore(); + }, - return objectProps; - }); - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {Array} objects to render + */ + _renderObjects: function(ctx, objects) { + var i, len; + for (i = 0, len = objects.length; i < len; ++i) { + objects[i] && objects[i].render(ctx); + } + }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {string} property 'background' or 'overlay' + */ + _renderBackgroundOrOverlay: function(ctx, property) { + var fill = this[property + 'Color'], object = this[property + 'Image'], + v = this.viewportTransform, needsVpt = this[property + 'Vpt']; + if (!fill && !object) { + return; + } + if (fill) { + ctx.save(); + ctx.beginPath(); + ctx.moveTo(0, 0); + ctx.lineTo(this.width, 0); + ctx.lineTo(this.width, this.height); + ctx.lineTo(0, this.height); + ctx.closePath(); + ctx.fillStyle = fill.toLive + ? fill.toLive(ctx, this) + : fill; + if (needsVpt) { + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + } + ctx.transform(1, 0, 0, 1, fill.offsetX || 0, fill.offsetY || 0); + var m = fill.gradientTransform || fill.patternTransform; + m && ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); + ctx.fill(); + ctx.restore(); + } + if (object) { + ctx.save(); + if (needsVpt) { + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + } + object.render(ctx); + ctx.restore(); + } + }, - /** - * @param {Graphics} graphics - Graphics instance - * @returns {Promise} - */ - undo: function undo(graphics) { - graphics.remove(this.undoData.object); + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderBackground: function(ctx) { + this._renderBackgroundOrOverlay(ctx, 'background'); + }, - return _util.Promise.resolve(); - } -}; + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderOverlay: function(ctx) { + this._renderBackgroundOrOverlay(ctx, 'overlay'); + }, -_command2.default.register(command); + /** + * Returns coordinates of a center of canvas. + * Returned value is an object with top and left properties + * @return {Object} object with "top" and "left" number values + */ + getCenter: function () { + return { + top: this.height / 2, + left: this.width / 2 + }; + }, -exports.default = command; + /** + * Centers object horizontally in the canvas + * @param {fabric.Object} object Object to center horizontally + * @return {fabric.Canvas} thisArg + */ + centerObjectH: function (object) { + return this._centerObject(object, new fabric.Point(this.getCenter().left, object.getCenterPoint().y)); + }, -/***/ }), + /** + * Centers object vertically in the canvas + * @param {fabric.Object} object Object to center vertically + * @return {fabric.Canvas} thisArg + * @chainable + */ + centerObjectV: function (object) { + return this._centerObject(object, new fabric.Point(object.getCenterPoint().x, this.getCenter().top)); + }, -/***/ "./src/js/command/addText.js": -/*!***********************************!*\ - !*** ./src/js/command/addText.js ***! - \***********************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Centers object vertically and horizontally in the canvas + * @param {fabric.Object} object Object to center vertically and horizontally + * @return {fabric.Canvas} thisArg + * @chainable + */ + centerObject: function(object) { + var center = this.getCenter(); -"use strict"; + return this._centerObject(object, new fabric.Point(center.left, center.top)); + }, + /** + * Centers object vertically and horizontally in the viewport + * @param {fabric.Object} object Object to center vertically and horizontally + * @return {fabric.Canvas} thisArg + * @chainable + */ + viewportCenterObject: function(object) { + var vpCenter = this.getVpCenter(); -Object.defineProperty(exports, "__esModule", { - value: true -}); + return this._centerObject(object, vpCenter); + }, -var _command = __webpack_require__(/*! @/factory/command */ "./src/js/factory/command.js"); + /** + * Centers object horizontally in the viewport, object.top is unchanged + * @param {fabric.Object} object Object to center vertically and horizontally + * @return {fabric.Canvas} thisArg + * @chainable + */ + viewportCenterObjectH: function(object) { + var vpCenter = this.getVpCenter(); + this._centerObject(object, new fabric.Point(vpCenter.x, object.getCenterPoint().y)); + return this; + }, -var _command2 = _interopRequireDefault(_command); + /** + * Centers object Vertically in the viewport, object.top is unchanged + * @param {fabric.Object} object Object to center vertically and horizontally + * @return {fabric.Canvas} thisArg + * @chainable + */ + viewportCenterObjectV: function(object) { + var vpCenter = this.getVpCenter(); -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + return this._centerObject(object, new fabric.Point(object.getCenterPoint().x, vpCenter.y)); + }, -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + /** + * Calculate the point in canvas that correspond to the center of actual viewport. + * @return {fabric.Point} vpCenter, viewport center + * @chainable + */ + getVpCenter: function() { + var center = this.getCenter(), + iVpt = invertTransform(this.viewportTransform); + return transformPoint({ x: center.left, y: center.top }, iVpt); + }, -var _selectionModifyHelper = __webpack_require__(/*! @/helper/selectionModifyHelper */ "./src/js/helper/selectionModifyHelper.js"); + /** + * @private + * @param {fabric.Object} object Object to center + * @param {fabric.Point} center Center point + * @return {fabric.Canvas} thisArg + * @chainable + */ + _centerObject: function(object, center) { + object.setPositionByOrigin(center, 'center', 'center'); + object.setCoords(); + this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Returns dataless JSON representation of canvas + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {String} json string + */ + toDatalessJSON: function (propertiesToInclude) { + return this.toDatalessObject(propertiesToInclude); + }, -/** - * @author NHN. FE Development Team - * @fileoverview Add a text object - */ -var TEXT = _consts.componentNames.TEXT; + /** + * Returns object representation of canvas + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toObject: function (propertiesToInclude) { + return this._toObjectMethod('toObject', propertiesToInclude); + }, + /** + * Returns dataless object representation of canvas + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toDatalessObject: function (propertiesToInclude) { + return this._toObjectMethod('toDatalessObject', propertiesToInclude); + }, -var command = { - name: _consts.commandNames.ADD_TEXT, + /** + * @private + */ + _toObjectMethod: function (methodName, propertiesToInclude) { - /** - * Add a text object - * @param {Graphics} graphics - Graphics instance - * @param {string} text - Initial input text - * @param {Object} [options] Options for text styles - * @param {Object} [options.styles] Initial styles - * @param {string} [options.styles.fill] Color - * @param {string} [options.styles.fontFamily] Font type for text - * @param {number} [options.styles.fontSize] Size - * @param {string} [options.styles.fontStyle] Type of inclination (normal / italic) - * @param {string} [options.styles.fontWeight] Type of thicker or thinner looking (normal / bold) - * @param {string} [options.styles.textAlign] Type of text align (left / center / right) - * @param {string} [options.styles.textDecoration] Type of line (underline / line-through / overline) - * @param {{x: number, y: number}} [options.position] - Initial position - * @returns {Promise} - */ - execute: function execute(graphics, text, options) { - var _this = this; + var clipPath = this.clipPath, data = { + version: fabric.version, + objects: this._toObjects(methodName, propertiesToInclude), + }; + if (clipPath && !clipPath.excludeFromExport) { + data.clipPath = this._toObject(this.clipPath, methodName, propertiesToInclude); + } + extend(data, this.__serializeBgOverlay(methodName, propertiesToInclude)); - var textComp = graphics.getComponent(TEXT); + fabric.util.populateWithProperties(this, data, propertiesToInclude); - if (this.undoData.object) { - var undoObject = this.undoData.object; + return data; + }, - return new _util.Promise(function (resolve, reject) { - if (!graphics.contains(undoObject)) { - graphics.add(undoObject); - resolve(undoObject); - } else { - reject(_consts.rejectMessages.redo); - } - }); - } + /** + * @private + */ + _toObjects: function(methodName, propertiesToInclude) { + return this._objects.filter(function(object) { + return !object.excludeFromExport; + }).map(function(instance) { + return this._toObject(instance, methodName, propertiesToInclude); + }, this); + }, - return textComp.add(text, options).then(function (objectProps) { - var id = objectProps.id; + /** + * @private + */ + _toObject: function(instance, methodName, propertiesToInclude) { + var originalValue; - var textObject = graphics.getObject(id); + if (!this.includeDefaultValues) { + originalValue = instance.includeDefaultValues; + instance.includeDefaultValues = false; + } - _this.undoData.object = textObject; + var object = instance[methodName](propertiesToInclude); + if (!this.includeDefaultValues) { + instance.includeDefaultValues = originalValue; + } + return object; + }, - (0, _selectionModifyHelper.setCachedUndoDataForDimension)((0, _selectionModifyHelper.makeSelectionUndoData)(textObject, function () { - return (0, _selectionModifyHelper.makeSelectionUndoDatum)(id, textObject, false); - })); + /** + * @private + */ + __serializeBgOverlay: function(methodName, propertiesToInclude) { + var data = {}, bgImage = this.backgroundImage, overlayImage = this.overlayImage, + bgColor = this.backgroundColor, overlayColor = this.overlayColor; - return objectProps; - }); - }, + if (bgColor && bgColor.toObject) { + if (!bgColor.excludeFromExport) { + data.background = bgColor.toObject(propertiesToInclude); + } + } + else if (bgColor) { + data.background = bgColor; + } + if (overlayColor && overlayColor.toObject) { + if (!overlayColor.excludeFromExport) { + data.overlay = overlayColor.toObject(propertiesToInclude); + } + } + else if (overlayColor) { + data.overlay = overlayColor; + } - /** - * @param {Graphics} graphics - Graphics instance - * @returns {Promise} - */ - undo: function undo(graphics) { - graphics.remove(this.undoData.object); + if (bgImage && !bgImage.excludeFromExport) { + data.backgroundImage = this._toObject(bgImage, methodName, propertiesToInclude); + } + if (overlayImage && !overlayImage.excludeFromExport) { + data.overlayImage = this._toObject(overlayImage, methodName, propertiesToInclude); + } - return _util.Promise.resolve(); - } -}; + return data; + }, -_command2.default.register(command); + /* _TO_SVG_START_ */ + /** + * When true, getSvgTransform() will apply the StaticCanvas.viewportTransform to the SVG transformation. When true, + * a zoomed canvas will then produce zoomed SVG output. + * @type Boolean + * @default + */ + svgViewportTransformation: true, + + /** + * Returns SVG representation of canvas + * @function + * @param {Object} [options] Options object for SVG output + * @param {Boolean} [options.suppressPreamble=false] If true xml tag is not included + * @param {Object} [options.viewBox] SVG viewbox object + * @param {Number} [options.viewBox.x] x-coordinate of viewbox + * @param {Number} [options.viewBox.y] y-coordinate of viewbox + * @param {Number} [options.viewBox.width] Width of viewbox + * @param {Number} [options.viewBox.height] Height of viewbox + * @param {String} [options.encoding=UTF-8] Encoding of SVG output + * @param {String} [options.width] desired width of svg with or without units + * @param {String} [options.height] desired height of svg with or without units + * @param {Function} [reviver] Method for further parsing of svg elements, called after each fabric object converted into svg representation. + * @return {String} SVG string + * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#serialization} + * @see {@link http://jsfiddle.net/fabricjs/jQ3ZZ/|jsFiddle demo} + * @example Normal SVG output + * var svg = canvas.toSVG(); + * @example SVG output without preamble (without <?xml ../>) + * var svg = canvas.toSVG({suppressPreamble: true}); + * @example SVG output with viewBox attribute + * var svg = canvas.toSVG({ + * viewBox: { + * x: 100, + * y: 100, + * width: 200, + * height: 300 + * } + * }); + * @example SVG output with different encoding (default: UTF-8) + * var svg = canvas.toSVG({encoding: 'ISO-8859-1'}); + * @example Modify SVG output with reviver function + * var svg = canvas.toSVG(null, function(svg) { + * return svg.replace('stroke-dasharray: ; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; ', ''); + * }); + */ + toSVG: function(options, reviver) { + options || (options = { }); + options.reviver = reviver; + var markup = []; -exports.default = command; + this._setSVGPreamble(markup, options); + this._setSVGHeader(markup, options); + if (this.clipPath) { + markup.push('\n'); + } + this._setSVGBgOverlayColor(markup, 'background'); + this._setSVGBgOverlayImage(markup, 'backgroundImage', reviver); + this._setSVGObjects(markup, reviver); + if (this.clipPath) { + markup.push('\n'); + } + this._setSVGBgOverlayColor(markup, 'overlay'); + this._setSVGBgOverlayImage(markup, 'overlayImage', reviver); -/***/ }), + markup.push(''); -/***/ "./src/js/command/applyFilter.js": -/*!***************************************!*\ - !*** ./src/js/command/applyFilter.js ***! - \***************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + return markup.join(''); + }, -"use strict"; + /** + * @private + */ + _setSVGPreamble: function(markup, options) { + if (options.suppressPreamble) { + return; + } + markup.push( + '\n', + '\n' + ); + }, + /** + * @private + */ + _setSVGHeader: function(markup, options) { + var width = options.width || this.width, + height = options.height || this.height, + vpt, viewBox = 'viewBox="0 0 ' + this.width + ' ' + this.height + '" ', + NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; -Object.defineProperty(exports, "__esModule", { - value: true -}); + if (options.viewBox) { + viewBox = 'viewBox="' + + options.viewBox.x + ' ' + + options.viewBox.y + ' ' + + options.viewBox.width + ' ' + + options.viewBox.height + '" '; + } + else { + if (this.svgViewportTransformation) { + vpt = this.viewportTransform; + viewBox = 'viewBox="' + + toFixed(-vpt[4] / vpt[0], NUM_FRACTION_DIGITS) + ' ' + + toFixed(-vpt[5] / vpt[3], NUM_FRACTION_DIGITS) + ' ' + + toFixed(this.width / vpt[0], NUM_FRACTION_DIGITS) + ' ' + + toFixed(this.height / vpt[3], NUM_FRACTION_DIGITS) + '" '; + } + } -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); + markup.push( + '\n', + 'Created with Fabric.js ', fabric.version, '\n', + '\n', + this.createSVGFontFacesMarkup(), + this.createSVGRefElementsMarkup(), + this.createSVGClipPathMarkup(options), + '\n' + ); + }, -var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); + createSVGClipPathMarkup: function(options) { + var clipPath = this.clipPath; + if (clipPath) { + clipPath.clipPathId = 'CLIPPATH_' + fabric.Object.__uid++; + return '\n' + + this.clipPath.toClipPathSVG(options.reviver) + + '\n'; + } + return ''; + }, -var _command = __webpack_require__(/*! @/factory/command */ "./src/js/factory/command.js"); + /** + * Creates markup containing SVG referenced elements like patterns, gradients etc. + * @return {String} + */ + createSVGRefElementsMarkup: function() { + var _this = this, + markup = ['background', 'overlay'].map(function(prop) { + var fill = _this[prop + 'Color']; + if (fill && fill.toLive) { + var shouldTransform = _this[prop + 'Vpt'], vpt = _this.viewportTransform, + object = { + width: _this.width / (shouldTransform ? vpt[0] : 1), + height: _this.height / (shouldTransform ? vpt[3] : 1) + }; + return fill.toSVG( + object, + { additionalTransform: shouldTransform ? fabric.util.matrixToSVG(vpt) : '' } + ); + } + }); + return markup.join(''); + }, -var _command2 = _interopRequireDefault(_command); - -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Creates markup containing SVG font faces, + * font URLs for font faces must be collected by developers + * and are not extracted from the DOM by fabricjs + * @param {Array} objects Array of fabric objects + * @return {String} + */ + createSVGFontFacesMarkup: function() { + var markup = '', fontList = { }, obj, fontFamily, + style, row, rowIndex, _char, charIndex, i, len, + fontPaths = fabric.fontPaths, objects = []; -var FILTER = _consts.componentNames.FILTER; + this._objects.forEach(function add(object) { + objects.push(object); + if (object._objects) { + object._objects.forEach(add); + } + }); -/** - * Cached data for undo - * @type {Object} - */ -/** - * @author NHN. FE Development Team - * @fileoverview Apply a filter into an image - */ + for (i = 0, len = objects.length; i < len; i++) { + obj = objects[i]; + fontFamily = obj.fontFamily; + if (obj.type.indexOf('text') === -1 || fontList[fontFamily] || !fontPaths[fontFamily]) { + continue; + } + fontList[fontFamily] = true; + if (!obj.styles) { + continue; + } + style = obj.styles; + for (rowIndex in style) { + row = style[rowIndex]; + for (charIndex in row) { + _char = row[charIndex]; + fontFamily = _char.fontFamily; + if (!fontList[fontFamily] && fontPaths[fontFamily]) { + fontList[fontFamily] = true; + } + } + } + } -var cachedUndoDataForSilent = null; + for (var j in fontList) { + markup += [ + '\t\t@font-face {\n', + '\t\t\tfont-family: \'', j, '\';\n', + '\t\t\tsrc: url(\'', fontPaths[j], '\');\n', + '\t\t}\n' + ].join(''); + } -/** - * Make undoData - * @param {string} type - Filter type - * @param {Object} prevfilterOption - prev Filter options - * @param {Object} options - Filter options - * @returns {object} - undo data - */ -function makeUndoData(type, prevfilterOption, options) { - var undoData = {}; + if (markup) { + markup = [ + '\t\n' + ].join(''); + } - if (type === 'mask') { - undoData.object = options.mask; - } + return markup; + }, - undoData.options = prevfilterOption; + /** + * @private + */ + _setSVGObjects: function(markup, reviver) { + var instance, i, len, objects = this._objects; + for (i = 0, len = objects.length; i < len; i++) { + instance = objects[i]; + if (instance.excludeFromExport) { + continue; + } + this._setSVGObject(markup, instance, reviver); + } + }, - return undoData; -} + /** + * @private + */ + _setSVGObject: function(markup, instance, reviver) { + markup.push(instance.toSVG(reviver)); + }, -var command = { - name: _consts.commandNames.APPLY_FILTER, + /** + * @private + */ + _setSVGBgOverlayImage: function(markup, property, reviver) { + if (this[property] && !this[property].excludeFromExport && this[property].toSVG) { + markup.push(this[property].toSVG(reviver)); + } + }, - /** - * Apply a filter into an image - * @param {Graphics} graphics - Graphics instance - * @param {string} type - Filter type - * @param {Object} options - Filter options - * @param {number} options.maskObjId - masking image object id - * @param {boolean} isSilent - is silent execution or not - * @returns {Promise} - */ - execute: function execute(graphics, type, options, isSilent) { - var filterComp = graphics.getComponent(FILTER); + /** + * @private + */ + _setSVGBgOverlayColor: function(markup, property) { + var filler = this[property + 'Color'], vpt = this.viewportTransform, finalWidth = this.width, + finalHeight = this.height; + if (!filler) { + return; + } + if (filler.toLive) { + var repeat = filler.repeat, iVpt = fabric.util.invertTransform(vpt), shouldInvert = this[property + 'Vpt'], + additionalTransform = shouldInvert ? fabric.util.matrixToSVG(iVpt) : ''; + markup.push( + '\n' + ); + } + else { + markup.push( + '\n' + ); + } + }, + /* _TO_SVG_END_ */ - if (type === 'mask') { - var maskObj = graphics.getObject(options.maskObjId); + /** + * Moves an object or the objects of a multiple selection + * to the bottom of the stack of drawn objects + * @param {fabric.Object} object Object to send to back + * @return {fabric.Canvas} thisArg + * @chainable + */ + sendToBack: function (object) { + if (!object) { + return this; + } + var activeSelection = this._activeObject, + i, obj, objs; + if (object === activeSelection && object.type === 'activeSelection') { + objs = activeSelection._objects; + for (i = objs.length; i--;) { + obj = objs[i]; + removeFromArray(this._objects, obj); + this._objects.unshift(obj); + } + } + else { + removeFromArray(this._objects, object); + this._objects.unshift(object); + } + this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, - if (!(maskObj && maskObj.isType('image'))) { - return Promise.reject(_consts.rejectMessages.invalidParameters); + /** + * Moves an object or the objects of a multiple selection + * to the top of the stack of drawn objects + * @param {fabric.Object} object Object to send + * @return {fabric.Canvas} thisArg + * @chainable + */ + bringToFront: function (object) { + if (!object) { + return this; + } + var activeSelection = this._activeObject, + i, obj, objs; + if (object === activeSelection && object.type === 'activeSelection') { + objs = activeSelection._objects; + for (i = 0; i < objs.length; i++) { + obj = objs[i]; + removeFromArray(this._objects, obj); + this._objects.push(obj); + } } + else { + removeFromArray(this._objects, object); + this._objects.push(object); + } + this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, - _tuiCodeSnippet2.default.extend(options, { mask: maskObj }); - graphics.remove(options.mask); - } - if (!this.isRedo) { - var prevfilterOption = filterComp.getOptions(type); - var undoData = makeUndoData(type, prevfilterOption, options); + /** + * Moves an object or a selection down in stack of drawn objects + * An optional parameter, intersecting allows to move the object in behind + * the first intersecting object. Where intersection is calculated with + * bounding box. If no intersection is found, there will not be change in the + * stack. + * @param {fabric.Object} object Object to send + * @param {Boolean} [intersecting] If `true`, send object behind next lower intersecting object + * @return {fabric.Canvas} thisArg + * @chainable + */ + sendBackwards: function (object, intersecting) { + if (!object) { + return this; + } + var activeSelection = this._activeObject, + i, obj, idx, newIdx, objs, objsMoved = 0; + + if (object === activeSelection && object.type === 'activeSelection') { + objs = activeSelection._objects; + for (i = 0; i < objs.length; i++) { + obj = objs[i]; + idx = this._objects.indexOf(obj); + if (idx > 0 + objsMoved) { + newIdx = idx - 1; + removeFromArray(this._objects, obj); + this._objects.splice(newIdx, 0, obj); + } + objsMoved++; + } + } + else { + idx = this._objects.indexOf(object); + if (idx !== 0) { + // if object is not on the bottom of stack + newIdx = this._findNewLowerIndex(object, idx, intersecting); + removeFromArray(this._objects, object); + this._objects.splice(newIdx, 0, object); + } + } + this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, - cachedUndoDataForSilent = this.setUndoData(undoData, cachedUndoDataForSilent, isSilent); - } + /** + * @private + */ + _findNewLowerIndex: function(object, idx, intersecting) { + var newIdx, i; - return filterComp.add(type, options); - }, + if (intersecting) { + newIdx = idx; + // traverse down the stack looking for the nearest intersecting object + for (i = idx - 1; i >= 0; --i) { - /** - * @param {Graphics} graphics - Graphics instance - * @param {string} type - Filter type - * @returns {Promise} - */ - undo: function undo(graphics, type) { - var filterComp = graphics.getComponent(FILTER); + var isIntersecting = object.intersectsWithObject(this._objects[i]) || + object.isContainedWithinObject(this._objects[i]) || + this._objects[i].isContainedWithinObject(object); - if (type === 'mask') { - var mask = this.undoData.object; - graphics.add(mask); - graphics.setActiveObject(mask); + if (isIntersecting) { + newIdx = i; + break; + } + } + } + else { + newIdx = idx - 1; + } - return filterComp.remove(type); - } + return newIdx; + }, - // options changed case - if (this.undoData.options) { - return filterComp.add(type, this.undoData.options); - } + /** + * Moves an object or a selection up in stack of drawn objects + * An optional parameter, intersecting allows to move the object in front + * of the first intersecting object. Where intersection is calculated with + * bounding box. If no intersection is found, there will not be change in the + * stack. + * @param {fabric.Object} object Object to send + * @param {Boolean} [intersecting] If `true`, send object in front of next upper intersecting object + * @return {fabric.Canvas} thisArg + * @chainable + */ + bringForward: function (object, intersecting) { + if (!object) { + return this; + } + var activeSelection = this._activeObject, + i, obj, idx, newIdx, objs, objsMoved = 0; + + if (object === activeSelection && object.type === 'activeSelection') { + objs = activeSelection._objects; + for (i = objs.length; i--;) { + obj = objs[i]; + idx = this._objects.indexOf(obj); + if (idx < this._objects.length - 1 - objsMoved) { + newIdx = idx + 1; + removeFromArray(this._objects, obj); + this._objects.splice(newIdx, 0, obj); + } + objsMoved++; + } + } + else { + idx = this._objects.indexOf(object); + if (idx !== this._objects.length - 1) { + // if object is not on top of stack (last item in an array) + newIdx = this._findNewUpperIndex(object, idx, intersecting); + removeFromArray(this._objects, object); + this._objects.splice(newIdx, 0, object); + } + } + this.renderOnAddRemove && this.requestRenderAll(); + return this; + }, - // filter added case - return filterComp.remove(type); - } -}; + /** + * @private + */ + _findNewUpperIndex: function(object, idx, intersecting) { + var newIdx, i, len; -_command2.default.register(command); + if (intersecting) { + newIdx = idx; -exports.default = command; + // traverse up the stack looking for the nearest intersecting object + for (i = idx + 1, len = this._objects.length; i < len; ++i) { -/***/ }), + var isIntersecting = object.intersectsWithObject(this._objects[i]) || + object.isContainedWithinObject(this._objects[i]) || + this._objects[i].isContainedWithinObject(object); -/***/ "./src/js/command/changeIconColor.js": -/*!*******************************************!*\ - !*** ./src/js/command/changeIconColor.js ***! - \*******************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + if (isIntersecting) { + newIdx = i; + break; + } + } + } + else { + newIdx = idx + 1; + } -"use strict"; + return newIdx; + }, + /** + * Moves an object to specified level in stack of drawn objects + * @param {fabric.Object} object Object to send + * @param {Number} index Position to move to + * @return {fabric.Canvas} thisArg + * @chainable + */ + moveTo: function (object, index) { + removeFromArray(this._objects, object); + this._objects.splice(index, 0, object); + return this.renderOnAddRemove && this.requestRenderAll(); + }, -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * Clears a canvas element and dispose objects + * @return {fabric.Canvas} thisArg + * @chainable + */ + dispose: function () { + // cancel eventually ongoing renders + if (this.isRendering) { + fabric.util.cancelAnimFrame(this.isRendering); + this.isRendering = 0; + } + this.forEachObject(function(object) { + object.dispose && object.dispose(); + }); + this._objects = []; + if (this.backgroundImage && this.backgroundImage.dispose) { + this.backgroundImage.dispose(); + } + this.backgroundImage = null; + if (this.overlayImage && this.overlayImage.dispose) { + this.overlayImage.dispose(); + } + this.overlayImage = null; + this._iTextInstances = null; + this.contextContainer = null; + // restore canvas style + this.lowerCanvasEl.classList.remove('lower-canvas'); + this.lowerCanvasEl.style = this._originalCanvasStyle; + delete this._originalCanvasStyle; + // restore canvas size to original size in case retina scaling was applied + this.lowerCanvasEl.setAttribute('width', this.width); + this.lowerCanvasEl.setAttribute('height', this.height); + fabric.util.cleanUpJsdomNode(this.lowerCanvasEl); + this.lowerCanvasEl = undefined; + return this; + }, -var _command = __webpack_require__(/*! @/factory/command */ "./src/js/factory/command.js"); + /** + * Returns a string representation of an instance + * @return {String} string representation of an instance + */ + toString: function () { + return '#'; + } + }); -var _command2 = _interopRequireDefault(_command); + extend(fabric.StaticCanvas.prototype, fabric.Observable); + extend(fabric.StaticCanvas.prototype, fabric.Collection); + extend(fabric.StaticCanvas.prototype, fabric.DataURLExporter); -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + extend(fabric.StaticCanvas, /** @lends fabric.StaticCanvas */ { -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + /** + * @static + * @type String + * @default + */ + EMPTY_JSON: '{"objects": [], "background": "white"}', -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Provides a way to check support of some of the canvas methods + * (either those of HTMLCanvasElement itself, or rendering context) + * + * @param {String} methodName Method to check support for; + * Could be one of "setLineDash" + * @return {Boolean | null} `true` if method is supported (or at least exists), + * `null` if canvas element or context can not be initialized + */ + supports: function (methodName) { + var el = createCanvasElement(); -var ICON = _consts.componentNames.ICON; /** - * @author NHN. FE Development Team - * @fileoverview Change icon color - */ + if (!el || !el.getContext) { + return null; + } -var command = { - name: _consts.commandNames.CHANGE_ICON_COLOR, + var ctx = el.getContext('2d'); + if (!ctx) { + return null; + } - /** - * Change icon color - * @param {Graphics} graphics - Graphics instance - * @param {number} id - object id - * @param {string} color - Color for icon - * @returns {Promise} - */ - execute: function execute(graphics, id, color) { - var _this = this; + switch (methodName) { - return new _util.Promise(function (resolve, reject) { - var iconComp = graphics.getComponent(ICON); - var targetObj = graphics.getObject(id); + case 'setLineDash': + return typeof ctx.setLineDash !== 'undefined'; - if (!targetObj) { - reject(_consts.rejectMessages.noObject); + default: + return null; } - - _this.undoData.object = targetObj; - _this.undoData.color = iconComp.getColor(targetObj); - iconComp.setColor(color, targetObj); - resolve(); - }); - }, - + } + }); /** - * @param {Graphics} graphics - Graphics instance - * @returns {Promise} + * Returns Object representation of canvas + * this alias is provided because if you call JSON.stringify on an instance, + * the toJSON object will be invoked if it exists. + * Having a toJSON method means you can do JSON.stringify(myCanvas) + * @function + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} JSON compatible object + * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#serialization} + * @see {@link http://jsfiddle.net/fabricjs/pec86/|jsFiddle demo} + * @example JSON without additional properties + * var json = canvas.toJSON(); + * @example JSON with additional properties included + * var json = canvas.toJSON(['lockMovementX', 'lockMovementY', 'lockRotation', 'lockScalingX', 'lockScalingY']); + * @example JSON without default values + * canvas.includeDefaultValues = false; + * var json = canvas.toJSON(); */ - undo: function undo(graphics) { - var iconComp = graphics.getComponent(ICON); - var _undoData = this.undoData, - icon = _undoData.object, - color = _undoData.color; - - - iconComp.setColor(color, icon); + fabric.StaticCanvas.prototype.toJSON = fabric.StaticCanvas.prototype.toObject; - return _util.Promise.resolve(); + if (fabric.isLikelyNode) { + fabric.StaticCanvas.prototype.createPNGStream = function() { + var impl = getNodeCanvas(this.lowerCanvasEl); + return impl && impl.createPNGStream(); + }; + fabric.StaticCanvas.prototype.createJPEGStream = function(opts) { + var impl = getNodeCanvas(this.lowerCanvasEl); + return impl && impl.createJPEGStream(opts); + }; } -}; - -_command2.default.register(command); +})(); -exports.default = command; -/***/ }), +/** + * BaseBrush class + * @class fabric.BaseBrush + * @see {@link http://fabricjs.com/freedrawing|Freedrawing demo} + */ +fabric.BaseBrush = fabric.util.createClass(/** @lends fabric.BaseBrush.prototype */ { -/***/ "./src/js/command/changeSelection.js": -/*!*******************************************!*\ - !*** ./src/js/command/changeSelection.js ***! - \*******************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Color of a brush + * @type String + * @default + */ + color: 'rgb(0, 0, 0)', -"use strict"; + /** + * Width of a brush, has to be a Number, no string literals + * @type Number + * @default + */ + width: 1, + /** + * Shadow object representing shadow of this shape. + * Backwards incompatibility note: This property replaces "shadowColor" (String), "shadowOffsetX" (Number), + * "shadowOffsetY" (Number) and "shadowBlur" (Number) since v1.2.12 + * @type fabric.Shadow + * @default + */ + shadow: null, -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * Line endings style of a brush (one of "butt", "round", "square") + * @type String + * @default + */ + strokeLineCap: 'round', -var _command = __webpack_require__(/*! @/factory/command */ "./src/js/factory/command.js"); + /** + * Corner style of a brush (one of "bevel", "round", "miter") + * @type String + * @default + */ + strokeLineJoin: 'round', -var _command2 = _interopRequireDefault(_command); + /** + * Maximum miter length (used for strokeLineJoin = "miter") of a brush's + * @type Number + * @default + */ + strokeMiterLimit: 10, -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + /** + * Stroke Dash Array. + * @type Array + * @default + */ + strokeDashArray: null, -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + /** + * When `true`, the free drawing is limited to the whiteboard size. Default to false. + * @type Boolean + * @default false + */ -var _selectionModifyHelper = __webpack_require__(/*! @/helper/selectionModifyHelper */ "./src/js/helper/selectionModifyHelper.js"); + limitedToCanvasSize: false, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } -/** - * @author NHN. FE Development Team - * @fileoverview change selection - */ -var command = { - name: _consts.commandNames.CHANGE_SELECTION, + /** + * Sets brush styles + * @private + */ + _setBrushStyles: function() { + var ctx = this.canvas.contextTop; + ctx.strokeStyle = this.color; + ctx.lineWidth = this.width; + ctx.lineCap = this.strokeLineCap; + ctx.miterLimit = this.strokeMiterLimit; + ctx.lineJoin = this.strokeLineJoin; + ctx.setLineDash(this.strokeDashArray || []); + }, - execute: function execute(graphics, props) { - if (this.isRedo) { - props.forEach(function (prop) { - graphics.setObjectProperties(prop.id, prop); - }); - } else { - this.undoData = (0, _selectionModifyHelper.getCachedUndoDataForDimension)(); + /** + * Sets the transformation on given context + * @param {RenderingContext2d} ctx context to render on + * @private + */ + _saveAndTransform: function(ctx) { + var v = this.canvas.viewportTransform; + ctx.save(); + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + }, + + /** + * Sets brush shadow styles + * @private + */ + _setShadow: function() { + if (!this.shadow) { + return; + } + + var canvas = this.canvas, + shadow = this.shadow, + ctx = canvas.contextTop, + zoom = canvas.getZoom(); + if (canvas && canvas._isRetinaScaling()) { + zoom *= fabric.devicePixelRatio; } - return _util.Promise.resolve(); + ctx.shadowColor = shadow.color; + ctx.shadowBlur = shadow.blur * zoom; + ctx.shadowOffsetX = shadow.offsetX * zoom; + ctx.shadowOffsetY = shadow.offsetY * zoom; + }, + + needsFullRender: function() { + var color = new fabric.Color(this.color); + return color.getAlpha() < 1 || !!this.shadow; + }, + + /** + * Removes brush shadow styles + * @private + */ + _resetShadow: function() { + var ctx = this.canvas.contextTop; + + ctx.shadowColor = ''; + ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0; }, - undo: function undo(graphics) { - this.undoData.forEach(function (datum) { - graphics.setObjectProperties(datum.id, datum); - }); - return _util.Promise.resolve(); + /** + * Check is pointer is outside canvas boundaries + * @param {Object} pointer + * @private + */ + _isOutSideCanvas: function(pointer) { + return pointer.x < 0 || pointer.x > this.canvas.getWidth() || pointer.y < 0 || pointer.y > this.canvas.getHeight(); } -}; +}); + -_command2.default.register(command); +(function() { + /** + * PencilBrush class + * @class fabric.PencilBrush + * @extends fabric.BaseBrush + */ + fabric.PencilBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric.PencilBrush.prototype */ { -exports.default = command; + /** + * Discard points that are less than `decimate` pixel distant from each other + * @type Number + * @default 0.4 + */ + decimate: 0.4, -/***/ }), + /** + * Constructor + * @param {fabric.Canvas} canvas + * @return {fabric.PencilBrush} Instance of a pencil brush + */ + initialize: function(canvas) { + this.canvas = canvas; + this._points = []; + }, -/***/ "./src/js/command/changeShape.js": -/*!***************************************!*\ - !*** ./src/js/command/changeShape.js ***! - \***************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Invoked inside on mouse down and mouse move + * @param {Object} pointer + */ + _drawSegment: function (ctx, p1, p2) { + var midPoint = p1.midPointFrom(p2); + ctx.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y); + return midPoint; + }, -"use strict"; + /** + * Invoked on mouse down + * @param {Object} pointer + */ + onMouseDown: function(pointer, options) { + if (!this.canvas._isMainEvent(options.e)) { + return; + } + this._prepareForDrawing(pointer); + // capture coordinates immediately + // this allows to draw dots (when movement never occurs) + this._captureDrawingPath(pointer); + this._render(); + }, + /** + * Invoked on mouse move + * @param {Object} pointer + */ + onMouseMove: function(pointer, options) { + if (!this.canvas._isMainEvent(options.e)) { + return; + } + if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) { + return; + } + if (this._captureDrawingPath(pointer) && this._points.length > 1) { + if (this.needsFullRender()) { + // redraw curve + // clear top canvas + this.canvas.clearContext(this.canvas.contextTop); + this._render(); + } + else { + var points = this._points, length = points.length, ctx = this.canvas.contextTop; + // draw the curve update + this._saveAndTransform(ctx); + if (this.oldEnd) { + ctx.beginPath(); + ctx.moveTo(this.oldEnd.x, this.oldEnd.y); + } + this.oldEnd = this._drawSegment(ctx, points[length - 2], points[length - 1], true); + ctx.stroke(); + ctx.restore(); + } + } + }, -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * Invoked on mouse up + */ + onMouseUp: function(options) { + if (!this.canvas._isMainEvent(options.e)) { + return true; + } + this.oldEnd = undefined; + this._finalizeAndAddPath(); + return false; + }, -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); + /** + * @private + * @param {Object} pointer Actual mouse position related to the canvas. + */ + _prepareForDrawing: function(pointer) { -var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); + var p = new fabric.Point(pointer.x, pointer.y); -var _command = __webpack_require__(/*! @/factory/command */ "./src/js/factory/command.js"); + this._reset(); + this._addPoint(p); + this.canvas.contextTop.moveTo(p.x, p.y); + }, -var _command2 = _interopRequireDefault(_command); + /** + * @private + * @param {fabric.Point} point Point to be added to points array + */ + _addPoint: function(point) { + if (this._points.length > 1 && point.eq(this._points[this._points.length - 1])) { + return false; + } + this._points.push(point); + return true; + }, -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + /** + * Clear points array and set contextTop canvas style. + * @private + */ + _reset: function() { + this._points = []; + this._setBrushStyles(); + this._setShadow(); + }, -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + /** + * @private + * @param {Object} pointer Actual mouse position related to the canvas. + */ + _captureDrawingPath: function(pointer) { + var pointerPoint = new fabric.Point(pointer.x, pointer.y); + return this._addPoint(pointerPoint); + }, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Draw a smooth path on the topCanvas using quadraticCurveTo + * @private + */ + _render: function() { + var ctx = this.canvas.contextTop, i, len, + p1 = this._points[0], + p2 = this._points[1]; + + this._saveAndTransform(ctx); + ctx.beginPath(); + //if we only have 2 points in the path and they are the same + //it means that the user only clicked the canvas without moving the mouse + //then we should be drawing a dot. A path isn't drawn between two identical dots + //that's why we set them apart a bit + if (this._points.length === 2 && p1.x === p2.x && p1.y === p2.y) { + var width = this.width / 1000; + p1 = new fabric.Point(p1.x, p1.y); + p2 = new fabric.Point(p2.x, p2.y); + p1.x -= width; + p2.x += width; + } + ctx.moveTo(p1.x, p1.y); + + for (i = 1, len = this._points.length; i < len; i++) { + // we pick the point between pi + 1 & pi + 2 as the + // end point and p1 as our control point. + this._drawSegment(ctx, p1, p2); + p1 = this._points[i]; + p2 = this._points[i + 1]; + } + // Draw last line as a straight line while + // we wait for the next point to be able to calculate + // the bezier control point + ctx.lineTo(p1.x, p1.y); + ctx.stroke(); + ctx.restore(); + }, -/** - * @author NHN. FE Development Team - * @fileoverview change a shape - */ -var SHAPE = _consts.componentNames.SHAPE; + /** + * Converts points to SVG path + * @param {Array} points Array of points + * @return {(string|number)[][]} SVG path commands + */ + convertPointsToSVGPath: function (points) { + var correction = this.width / 1000; + return fabric.util.getSmoothPathFromPoints(points, correction); + }, -/** - * Cached data for undo - * @type {Object} - */ + /** + * @private + * @param {(string|number)[][]} pathData SVG path commands + * @returns {boolean} + */ + _isEmptySVGPath: function (pathData) { + var pathString = fabric.util.joinPath(pathData); + return pathString === 'M 0 0 Q 0 0 0 0 L 0 0'; + }, -var cachedUndoDataForSilent = null; + /** + * Creates fabric.Path object to add on canvas + * @param {(string|number)[][]} pathData Path data + * @return {fabric.Path} Path to add on canvas + */ + createPath: function(pathData) { + var path = new fabric.Path(pathData, { + fill: null, + stroke: this.color, + strokeWidth: this.width, + strokeLineCap: this.strokeLineCap, + strokeMiterLimit: this.strokeMiterLimit, + strokeLineJoin: this.strokeLineJoin, + strokeDashArray: this.strokeDashArray, + }); + if (this.shadow) { + this.shadow.affectStroke = true; + path.shadow = new fabric.Shadow(this.shadow); + } -/** - * Make undoData - * @param {object} options - shape options - * @param {Component} targetObj - shape component - * @returns {object} - undo data - */ -function makeUndoData(options, targetObj) { - var undoData = { - object: targetObj, - options: {} - }; + return path; + }, - _tuiCodeSnippet2.default.forEachOwnProperties(options, function (value, key) { - undoData.options[key] = targetObj[key]; + /** + * Decimate points array with the decimate value + */ + decimatePoints: function(points, distance) { + if (points.length <= 2) { + return points; + } + var zoom = this.canvas.getZoom(), adjustedDistance = Math.pow(distance / zoom, 2), + i, l = points.length - 1, lastPoint = points[0], newPoints = [lastPoint], + cDistance; + for (i = 1; i < l - 1; i++) { + cDistance = Math.pow(lastPoint.x - points[i].x, 2) + Math.pow(lastPoint.y - points[i].y, 2); + if (cDistance >= adjustedDistance) { + lastPoint = points[i]; + newPoints.push(lastPoint); + } + } + /** + * Add the last point from the original line to the end of the array. + * This ensures decimate doesn't delete the last point on the line, and ensures the line is > 1 point. + */ + newPoints.push(points[l]); + return newPoints; + }, + + /** + * On mouseup after drawing the path on contextTop canvas + * we use the points captured to create an new fabric path object + * and add it to the fabric canvas. + */ + _finalizeAndAddPath: function() { + var ctx = this.canvas.contextTop; + ctx.closePath(); + if (this.decimate) { + this._points = this.decimatePoints(this._points, this.decimate); + } + var pathData = this.convertPointsToSVGPath(this._points); + if (this._isEmptySVGPath(pathData)) { + // do not create 0 width/height paths, as they are + // rendered inconsistently across browsers + // Firefox 4, for example, renders a dot, + // whereas Chrome 10 renders nothing + this.canvas.requestRenderAll(); + return; + } + + var path = this.createPath(pathData); + this.canvas.clearContext(this.canvas.contextTop); + this.canvas.fire('before:path:created', { path: path }); + this.canvas.add(path); + this.canvas.requestRenderAll(); + path.setCoords(); + this._resetShadow(); + + + // fire event 'path' created + this.canvas.fire('path:created', { path: path }); + } }); +})(); - return undoData; -} -var command = { - name: _consts.commandNames.CHANGE_SHAPE, +/** + * CircleBrush class + * @class fabric.CircleBrush + */ +fabric.CircleBrush = fabric.util.createClass(fabric.BaseBrush, /** @lends fabric.CircleBrush.prototype */ { /** - * Change a shape - * @param {Graphics} graphics - Graphics instance - * @param {number} id - object id - * @param {Object} options - Shape options - * @param {string} [options.fill] - Shape foreground color (ex: '#fff', 'transparent') - * @param {string} [options.stroke] - Shape outline color - * @param {number} [options.strokeWidth] - Shape outline width - * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) - * @param {number} [options.height] - Height value (When type option is 'rect', this options can use) - * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) - * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) - * @param {number} [options.left] - Shape x position - * @param {number} [options.top] - Shape y position - * @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not - * @param {boolean} isSilent - is silent execution or not - * @returns {Promise} + * Width of a brush + * @type Number + * @default */ - execute: function execute(graphics, id, options, isSilent) { - var shapeComp = graphics.getComponent(SHAPE); - var targetObj = graphics.getObject(id); + width: 10, - if (!targetObj) { - return _util.Promise.reject(_consts.rejectMessages.noObject); - } + /** + * Constructor + * @param {fabric.Canvas} canvas + * @return {fabric.CircleBrush} Instance of a circle brush + */ + initialize: function(canvas) { + this.canvas = canvas; + this.points = []; + }, - if (!this.isRedo) { - var undoData = makeUndoData(options, targetObj); + /** + * Invoked inside on mouse down and mouse move + * @param {Object} pointer + */ + drawDot: function(pointer) { + var point = this.addPoint(pointer), + ctx = this.canvas.contextTop; + this._saveAndTransform(ctx); + this.dot(ctx, point); + ctx.restore(); + }, - cachedUndoDataForSilent = this.setUndoData(undoData, cachedUndoDataForSilent, isSilent); - } + dot: function(ctx, point) { + ctx.fillStyle = point.fill; + ctx.beginPath(); + ctx.arc(point.x, point.y, point.radius, 0, Math.PI * 2, false); + ctx.closePath(); + ctx.fill(); + }, - return shapeComp.change(targetObj, options); + /** + * Invoked on mouse down + */ + onMouseDown: function(pointer) { + this.points.length = 0; + this.canvas.clearContext(this.canvas.contextTop); + this._setShadow(); + this.drawDot(pointer); }, + /** + * Render the full state of the brush + * @private + */ + _render: function() { + var ctx = this.canvas.contextTop, i, len, + points = this.points; + this._saveAndTransform(ctx); + for (i = 0, len = points.length; i < len; i++) { + this.dot(ctx, points[i]); + } + ctx.restore(); + }, /** - * @param {Graphics} graphics - Graphics instance - * @returns {Promise} + * Invoked on mouse move + * @param {Object} pointer */ - undo: function undo(graphics) { - var shapeComp = graphics.getComponent(SHAPE); - var _undoData = this.undoData, - shape = _undoData.object, - options = _undoData.options; + onMouseMove: function(pointer) { + if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) { + return; + } + if (this.needsFullRender()) { + this.canvas.clearContext(this.canvas.contextTop); + this.addPoint(pointer); + this._render(); + } + else { + this.drawDot(pointer); + } + }, + /** + * Invoked on mouse up + */ + onMouseUp: function() { + var originalRenderOnAddRemove = this.canvas.renderOnAddRemove, i, len; + this.canvas.renderOnAddRemove = false; + + var circles = []; + + for (i = 0, len = this.points.length; i < len; i++) { + var point = this.points[i], + circle = new fabric.Circle({ + radius: point.radius, + left: point.x, + top: point.y, + originX: 'center', + originY: 'center', + fill: point.fill + }); - return shapeComp.change(shape, options); - } -}; + this.shadow && (circle.shadow = new fabric.Shadow(this.shadow)); -_command2.default.register(command); + circles.push(circle); + } + var group = new fabric.Group(circles); + group.canvas = this.canvas; -exports.default = command; + this.canvas.fire('before:path:created', { path: group }); + this.canvas.add(group); + this.canvas.fire('path:created', { path: group }); -/***/ }), + this.canvas.clearContext(this.canvas.contextTop); + this._resetShadow(); + this.canvas.renderOnAddRemove = originalRenderOnAddRemove; + this.canvas.requestRenderAll(); + }, -/***/ "./src/js/command/changeText.js": -/*!**************************************!*\ - !*** ./src/js/command/changeText.js ***! - \**************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * @param {Object} pointer + * @return {fabric.Point} Just added pointer point + */ + addPoint: function(pointer) { + var pointerPoint = new fabric.Point(pointer.x, pointer.y), -"use strict"; + circleRadius = fabric.util.getRandomInt( + Math.max(0, this.width - 20), this.width + 20) / 2, + circleColor = new fabric.Color(this.color) + .setAlpha(fabric.util.getRandomInt(0, 100) / 100) + .toRgba(); -Object.defineProperty(exports, "__esModule", { - value: true -}); + pointerPoint.radius = circleRadius; + pointerPoint.fill = circleColor; -var _command = __webpack_require__(/*! @/factory/command */ "./src/js/factory/command.js"); + this.points.push(pointerPoint); -var _command2 = _interopRequireDefault(_command); + return pointerPoint; + } +}); -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); +/** + * SprayBrush class + * @class fabric.SprayBrush + */ +fabric.SprayBrush = fabric.util.createClass( fabric.BaseBrush, /** @lends fabric.SprayBrush.prototype */ { -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Width of a spray + * @type Number + * @default + */ + width: 10, -var TEXT = _consts.componentNames.TEXT; /** - * @author NHN. FE Development Team - * @fileoverview Change a text - */ + /** + * Density of a spray (number of dots per chunk) + * @type Number + * @default + */ + density: 20, -var command = { - name: _consts.commandNames.CHANGE_TEXT, + /** + * Width of spray dots + * @type Number + * @default + */ + dotWidth: 1, /** - * Change a text - * @param {Graphics} graphics - Graphics instance - * @param {number} id - object id - * @param {string} text - Changing text - * @returns {Promise} + * Width variance of spray dots + * @type Number + * @default */ - execute: function execute(graphics, id, text) { - var textComp = graphics.getComponent(TEXT); - var targetObj = graphics.getObject(id); + dotWidthVariance: 1, - if (!targetObj) { - return _util.Promise.reject(_consts.rejectMessages.noObject); - } + /** + * Whether opacity of a dot should be random + * @type Boolean + * @default + */ + randomOpacity: false, - this.undoData.object = targetObj; - this.undoData.text = textComp.getText(targetObj); + /** + * Whether overlapping dots (rectangles) should be removed (for performance reasons) + * @type Boolean + * @default + */ + optimizeOverlapping: true, - return textComp.change(targetObj, text); + /** + * Constructor + * @param {fabric.Canvas} canvas + * @return {fabric.SprayBrush} Instance of a spray brush + */ + initialize: function(canvas) { + this.canvas = canvas; + this.sprayChunks = []; }, - /** - * @param {Graphics} graphics - Graphics instance - * @returns {Promise} + * Invoked on mouse down + * @param {Object} pointer */ - undo: function undo(graphics) { - var textComp = graphics.getComponent(TEXT); - var _undoData = this.undoData, - textObj = _undoData.object, - text = _undoData.text; + onMouseDown: function(pointer) { + this.sprayChunks.length = 0; + this.canvas.clearContext(this.canvas.contextTop); + this._setShadow(); + this.addSprayChunk(pointer); + this.render(this.sprayChunkPoints); + }, - return textComp.change(textObj, text); - } -}; - -_command2.default.register(command); - -exports.default = command; - -/***/ }), - -/***/ "./src/js/command/changeTextStyle.js": -/*!*******************************************!*\ - !*** ./src/js/command/changeTextStyle.js ***! - \*******************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; + /** + * Invoked on mouse move + * @param {Object} pointer + */ + onMouseMove: function(pointer) { + if (this.limitedToCanvasSize === true && this._isOutSideCanvas(pointer)) { + return; + } + this.addSprayChunk(pointer); + this.render(this.sprayChunkPoints); + }, + /** + * Invoked on mouse up + */ + onMouseUp: function() { + var originalRenderOnAddRemove = this.canvas.renderOnAddRemove; + this.canvas.renderOnAddRemove = false; -Object.defineProperty(exports, "__esModule", { - value: true -}); + var rects = []; -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); + for (var i = 0, ilen = this.sprayChunks.length; i < ilen; i++) { + var sprayChunk = this.sprayChunks[i]; -var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); + for (var j = 0, jlen = sprayChunk.length; j < jlen; j++) { -var _command = __webpack_require__(/*! @/factory/command */ "./src/js/factory/command.js"); + var rect = new fabric.Rect({ + width: sprayChunk[j].width, + height: sprayChunk[j].width, + left: sprayChunk[j].x + 1, + top: sprayChunk[j].y + 1, + originX: 'center', + originY: 'center', + fill: this.color + }); + rects.push(rect); + } + } -var _command2 = _interopRequireDefault(_command); + if (this.optimizeOverlapping) { + rects = this._getOptimizedRects(rects); + } -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + var group = new fabric.Group(rects); + this.shadow && group.set('shadow', new fabric.Shadow(this.shadow)); + this.canvas.fire('before:path:created', { path: group }); + this.canvas.add(group); + this.canvas.fire('path:created', { path: group }); -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + this.canvas.clearContext(this.canvas.contextTop); + this._resetShadow(); + this.canvas.renderOnAddRemove = originalRenderOnAddRemove; + this.canvas.requestRenderAll(); + }, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * @private + * @param {Array} rects + */ + _getOptimizedRects: function(rects) { -/** - * @author NHN. FE Development Team - * @fileoverview Change text styles - */ -var TEXT = _consts.componentNames.TEXT; + // avoid creating duplicate rects at the same coordinates + var uniqueRects = { }, key, i, len; -/** - * Cached data for undo - * @type {Object} - */ + for (i = 0, len = rects.length; i < len; i++) { + key = rects[i].left + '' + rects[i].top; + if (!uniqueRects[key]) { + uniqueRects[key] = rects[i]; + } + } + var uniqueRectsArray = []; + for (key in uniqueRects) { + uniqueRectsArray.push(uniqueRects[key]); + } -var cachedUndoDataForSilent = null; + return uniqueRectsArray; + }, -/** - * Make undoData - * @param {object} styles - text styles - * @param {Component} targetObj - text component - * @returns {object} - undo data - */ -function makeUndoData(styles, targetObj) { - var undoData = { - object: targetObj, - styles: {} - }; - _tuiCodeSnippet2.default.forEachOwnProperties(styles, function (value, key) { - var undoValue = targetObj[key]; - undoData.styles[key] = undoValue; - }); + /** + * Render new chunk of spray brush + */ + render: function(sprayChunk) { + var ctx = this.canvas.contextTop, i, len; + ctx.fillStyle = this.color; - return undoData; -} + this._saveAndTransform(ctx); -var command = { - name: _consts.commandNames.CHANGE_TEXT_STYLE, + for (i = 0, len = sprayChunk.length; i < len; i++) { + var point = sprayChunk[i]; + if (typeof point.opacity !== 'undefined') { + ctx.globalAlpha = point.opacity; + } + ctx.fillRect(point.x, point.y, point.width, point.width); + } + ctx.restore(); + }, /** - * Change text styles - * @param {Graphics} graphics - Graphics instance - * @param {number} id - object id - * @param {Object} styles - text styles - * @param {string} [styles.fill] Color - * @param {string} [styles.fontFamily] Font type for text - * @param {number} [styles.fontSize] Size - * @param {string} [styles.fontStyle] Type of inclination (normal / italic) - * @param {string} [styles.fontWeight] Type of thicker or thinner looking (normal / bold) - * @param {string} [styles.textAlign] Type of text align (left / center / right) - * @param {string} [styles.textDecoration] Type of line (underline / line-through / overline) - * @param {boolean} isSilent - is silent execution or not - * @returns {Promise} + * Render all spray chunks */ - execute: function execute(graphics, id, styles, isSilent) { - var textComp = graphics.getComponent(TEXT); - var targetObj = graphics.getObject(id); + _render: function() { + var ctx = this.canvas.contextTop, i, ilen; + ctx.fillStyle = this.color; - if (!targetObj) { - return _util.Promise.reject(_consts.rejectMessages.noObject); - } - if (!this.isRedo) { - var undoData = makeUndoData(styles, targetObj); + this._saveAndTransform(ctx); - cachedUndoDataForSilent = this.setUndoData(undoData, cachedUndoDataForSilent, isSilent); + for (i = 0, ilen = this.sprayChunks.length; i < ilen; i++) { + this.render(this.sprayChunks[i]); } - - return textComp.setStyle(targetObj, styles); + ctx.restore(); }, - /** - * @param {Graphics} graphics - Graphics instance - * @returns {Promise} + * @param {Object} pointer */ - undo: function undo(graphics) { - var textComp = graphics.getComponent(TEXT); - var _undoData = this.undoData, - textObj = _undoData.object, - styles = _undoData.styles; + addSprayChunk: function(pointer) { + this.sprayChunkPoints = []; + var x, y, width, radius = this.width / 2, i; - return textComp.setStyle(textObj, styles); - } -}; - -_command2.default.register(command); + for (i = 0; i < this.density; i++) { -exports.default = command; + x = fabric.util.getRandomInt(pointer.x - radius, pointer.x + radius); + y = fabric.util.getRandomInt(pointer.y - radius, pointer.y + radius); -/***/ }), + if (this.dotWidthVariance) { + width = fabric.util.getRandomInt( + // bottom clamp width to 1 + Math.max(1, this.dotWidth - this.dotWidthVariance), + this.dotWidth + this.dotWidthVariance); + } + else { + width = this.dotWidth; + } -/***/ "./src/js/command/clearObjects.js": -/*!****************************************!*\ - !*** ./src/js/command/clearObjects.js ***! - \****************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + var point = new fabric.Point(x, y); + point.width = width; -"use strict"; + if (this.randomOpacity) { + point.opacity = fabric.util.getRandomInt(0, 100) / 100; + } + this.sprayChunkPoints.push(point); + } -Object.defineProperty(exports, "__esModule", { - value: true + this.sprayChunks.push(this.sprayChunkPoints); + } }); -var _command = __webpack_require__(/*! @/factory/command */ "./src/js/factory/command.js"); -var _command2 = _interopRequireDefault(_command); +/** + * PatternBrush class + * @class fabric.PatternBrush + * @extends fabric.BaseBrush + */ +fabric.PatternBrush = fabric.util.createClass(fabric.PencilBrush, /** @lends fabric.PatternBrush.prototype */ { -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + getPatternSrc: function() { -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + var dotWidth = 20, + dotDistance = 5, + patternCanvas = fabric.util.createCanvasElement(), + patternCtx = patternCanvas.getContext('2d'); -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + patternCanvas.width = patternCanvas.height = dotWidth + dotDistance; -var command = { - name: _consts.commandNames.CLEAR_OBJECTS, + patternCtx.fillStyle = this.color; + patternCtx.beginPath(); + patternCtx.arc(dotWidth / 2, dotWidth / 2, dotWidth / 2, 0, Math.PI * 2, false); + patternCtx.closePath(); + patternCtx.fill(); - /** - * Clear all objects without background (main) image - * @param {Graphics} graphics - Graphics instance - * @returns {Promise} - */ - execute: function execute(graphics) { - var _this = this; + return patternCanvas; + }, - return new _util.Promise(function (resolve) { - _this.undoData.objects = graphics.removeAll(); - resolve(); - }); + getPatternSrcFunction: function() { + return String(this.getPatternSrc).replace('this.color', '"' + this.color + '"'); }, + /** + * Creates "pattern" instance property + */ + getPattern: function() { + return this.canvas.contextTop.createPattern(this.source || this.getPatternSrc(), 'repeat'); + }, /** - * @param {Graphics} graphics - Graphics instance - * @returns {Promise} - * @ignore + * Sets brush styles */ - undo: function undo(graphics) { - graphics.add(this.undoData.objects); + _setBrushStyles: function() { + this.callSuper('_setBrushStyles'); + this.canvas.contextTop.strokeStyle = this.getPattern(); + }, - return _util.Promise.resolve(); + /** + * Creates path + */ + createPath: function(pathData) { + var path = this.callSuper('createPath', pathData), + topLeft = path._getLeftTopCoords().scalarAdd(path.strokeWidth / 2); + + path.stroke = new fabric.Pattern({ + source: this.source || this.getPatternSrcFunction(), + offsetX: -topLeft.x, + offsetY: -topLeft.y + }); + return path; } -}; /** - * @author NHN. FE Development Team - * @fileoverview Clear all objects - */ - +}); -_command2.default.register(command); -exports.default = command; +(function() { -/***/ }), + var getPointer = fabric.util.getPointer, + degreesToRadians = fabric.util.degreesToRadians, + isTouchEvent = fabric.util.isTouchEvent; -/***/ "./src/js/command/flip.js": -/*!********************************!*\ - !*** ./src/js/command/flip.js ***! - \********************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Canvas class + * @class fabric.Canvas + * @extends fabric.StaticCanvas + * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#canvas} + * @see {@link fabric.Canvas#initialize} for constructor definition + * + * @fires object:modified at the end of a transform or any change when statefull is true + * @fires object:rotating while an object is being rotated from the control + * @fires object:scaling while an object is being scaled by controls + * @fires object:moving while an object is being dragged + * @fires object:skewing while an object is being skewed from the controls + * + * @fires before:transform before a transform is is started + * @fires before:selection:cleared + * @fires selection:cleared + * @fires selection:updated + * @fires selection:created + * + * @fires path:created after a drawing operation ends and the path is added + * @fires mouse:down + * @fires mouse:move + * @fires mouse:up + * @fires mouse:down:before on mouse down, before the inner fabric logic runs + * @fires mouse:move:before on mouse move, before the inner fabric logic runs + * @fires mouse:up:before on mouse up, before the inner fabric logic runs + * @fires mouse:over + * @fires mouse:out + * @fires mouse:dblclick whenever a native dbl click event fires on the canvas. + * + * @fires dragover + * @fires dragenter + * @fires dragleave + * @fires drop + * @fires after:render at the end of the render process, receives the context in the callback + * @fires before:render at start the render process, receives the context in the callback + * + * the following events are deprecated: + * @fires object:rotated at the end of a rotation transform + * @fires object:scaled at the end of a scale transform + * @fires object:moved at the end of translation transform + * @fires object:skewed at the end of a skew transform + */ + fabric.Canvas = fabric.util.createClass(fabric.StaticCanvas, /** @lends fabric.Canvas.prototype */ { -"use strict"; + /** + * Constructor + * @param {HTMLElement | String} el <canvas> element to initialize instance on + * @param {Object} [options] Options object + * @return {Object} thisArg + */ + initialize: function(el, options) { + options || (options = { }); + this.renderAndResetBound = this.renderAndReset.bind(this); + this.requestRenderAllBound = this.requestRenderAll.bind(this); + this._initStatic(el, options); + this._initInteractive(); + this._createCacheCanvas(); + }, + /** + * When true, objects can be transformed by one side (unproportionally) + * when dragged on the corners that normally would not do that. + * @type Boolean + * @default + * @since fabric 4.0 // changed name and default value + */ + uniformScaling: true, -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * Indicates which key switches uniform scaling. + * values: 'altKey', 'shiftKey', 'ctrlKey'. + * If `null` or 'none' or any other string that is not a modifier key + * feature is disabled. + * totally wrong named. this sounds like `uniform scaling` + * if Canvas.uniformScaling is true, pressing this will set it to false + * and viceversa. + * @since 1.6.2 + * @type String + * @default + */ + uniScaleKey: 'shiftKey', -var _command = __webpack_require__(/*! @/factory/command */ "./src/js/factory/command.js"); + /** + * When true, objects use center point as the origin of scale transformation. + * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). + * @since 1.3.4 + * @type Boolean + * @default + */ + centeredScaling: false, -var _command2 = _interopRequireDefault(_command); + /** + * When true, objects use center point as the origin of rotate transformation. + * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). + * @since 1.3.4 + * @type Boolean + * @default + */ + centeredRotation: false, -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + /** + * Indicates which key enable centered Transform + * values: 'altKey', 'shiftKey', 'ctrlKey'. + * If `null` or 'none' or any other string that is not a modifier key + * feature is disabled feature disabled. + * @since 1.6.2 + * @type String + * @default + */ + centeredKey: 'altKey', -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Indicates which key enable alternate action on corner + * values: 'altKey', 'shiftKey', 'ctrlKey'. + * If `null` or 'none' or any other string that is not a modifier key + * feature is disabled feature disabled. + * @since 1.6.2 + * @type String + * @default + */ + altActionKey: 'shiftKey', -/** - * @author NHN. FE Development Team - * @fileoverview Flip an image - */ -var FLIP = _consts.componentNames.FLIP; + /** + * Indicates that canvas is interactive. This property should not be changed. + * @type Boolean + * @default + */ + interactive: true, + /** + * Indicates whether group selection should be enabled + * @type Boolean + * @default + */ + selection: true, -var command = { - name: _consts.commandNames.FLIP_IMAGE, + /** + * Indicates which key or keys enable multiple click selection + * Pass value as a string or array of strings + * values: 'altKey', 'shiftKey', 'ctrlKey'. + * If `null` or empty or containing any other string that is not a modifier key + * feature is disabled. + * @since 1.6.2 + * @type String|Array + * @default + */ + selectionKey: 'shiftKey', - /** - * flip an image - * @param {Graphics} graphics - Graphics instance - * @param {string} type - 'flipX' or 'flipY' or 'reset' - * @returns {Promise} - */ - execute: function execute(graphics, type) { - var flipComp = graphics.getComponent(FLIP); + /** + * Indicates which key enable alternative selection + * in case of target overlapping with active object + * values: 'altKey', 'shiftKey', 'ctrlKey'. + * For a series of reason that come from the general expectations on how + * things should work, this feature works only for preserveObjectStacking true. + * If `null` or 'none' or any other string that is not a modifier key + * feature is disabled. + * @since 1.6.5 + * @type null|String + * @default + */ + altSelectionKey: null, - this.undoData.setting = flipComp.getCurrentSetting(); + /** + * Color of selection + * @type String + * @default + */ + selectionColor: 'rgba(100, 100, 255, 0.3)', // blue - return flipComp[type](); - }, + /** + * Default dash array pattern + * If not empty the selection border is dashed + * @type Array + */ + selectionDashArray: [], + /** + * Color of the border of selection (usually slightly darker than color of selection itself) + * @type String + * @default + */ + selectionBorderColor: 'rgba(255, 255, 255, 0.3)', - /** - * @param {Graphics} graphics - Graphics instance - * @returns {Promise} - */ - undo: function undo(graphics) { - var flipComp = graphics.getComponent(FLIP); + /** + * Width of a line used in object/group selection + * @type Number + * @default + */ + selectionLineWidth: 1, - return flipComp.set(this.undoData.setting); - } -}; + /** + * Select only shapes that are fully contained in the dragged selection rectangle. + * @type Boolean + * @default + */ + selectionFullyContained: false, -_command2.default.register(command); + /** + * Default cursor value used when hovering over an object on canvas + * @type String + * @default + */ + hoverCursor: 'move', -exports.default = command; + /** + * Default cursor value used when moving an object on canvas + * @type String + * @default + */ + moveCursor: 'move', -/***/ }), + /** + * Default cursor value used for the entire canvas + * @type String + * @default + */ + defaultCursor: 'default', -/***/ "./src/js/command/loadImage.js": -/*!*************************************!*\ - !*** ./src/js/command/loadImage.js ***! - \*************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Cursor value used during free drawing + * @type String + * @default + */ + freeDrawingCursor: 'crosshair', -"use strict"; + /** + * Cursor value used for rotation point + * @type String + * @default + */ + rotationCursor: 'crosshair', + /** + * Cursor value used for disabled elements ( corners with disabled action ) + * @type String + * @since 2.0.0 + * @default + */ + notAllowedCursor: 'not-allowed', -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * Default element class that's given to wrapper (div) element of canvas + * @type String + * @default + */ + containerClass: 'canvas-container', -var _command = __webpack_require__(/*! @/factory/command */ "./src/js/factory/command.js"); + /** + * When true, object detection happens on per-pixel basis rather than on per-bounding-box + * @type Boolean + * @default + */ + perPixelTargetFind: false, -var _command2 = _interopRequireDefault(_command); + /** + * Number of pixels around target pixel to tolerate (consider active) during object detection + * @type Number + * @default + */ + targetFindTolerance: 0, -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + /** + * When true, target detection is skipped. Target detection will return always undefined. + * click selection won't work anymore, events will fire with no targets. + * if something is selected before setting it to true, it will be deselected at the first click. + * area selection will still work. check the `selection` property too. + * if you deactivate both, you should look into staticCanvas. + * @type Boolean + * @default + */ + skipTargetFind: false, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * When true, mouse events on canvas (mousedown/mousemove/mouseup) result in free drawing. + * After mousedown, mousemove creates a shape, + * and then mouseup finalizes it and adds an instance of `fabric.Path` onto canvas. + * @tutorial {@link http://fabricjs.com/fabric-intro-part-4#free_drawing} + * @type Boolean + * @default + */ + isDrawingMode: false, -/** - * @author NHN. FE Development Team - * @fileoverview Load a background (main) image - */ -var IMAGE_LOADER = _consts.componentNames.IMAGE_LOADER; + /** + * Indicates whether objects should remain in current stack position when selected. + * When false objects are brought to top and rendered as part of the selection group + * @type Boolean + * @default + */ + preserveObjectStacking: false, + /** + * Indicates the angle that an object will lock to while rotating. + * @type Number + * @since 1.6.7 + * @default + */ + snapAngle: 0, -var command = { - name: _consts.commandNames.LOAD_IMAGE, + /** + * Indicates the distance from the snapAngle the rotation will lock to the snapAngle. + * When `null`, the snapThreshold will default to the snapAngle. + * @type null|Number + * @since 1.6.7 + * @default + */ + snapThreshold: null, - /** - * Load a background (main) image - * @param {Graphics} graphics - Graphics instance - * @param {string} imageName - Image name - * @param {string} imgUrl - Image Url - * @returns {Promise} - */ - execute: function execute(graphics, imageName, imgUrl) { - var loader = graphics.getComponent(IMAGE_LOADER); - var prevImage = loader.getCanvasImage(); - var prevImageWidth = prevImage ? prevImage.width : 0; - var prevImageHeight = prevImage ? prevImage.height : 0; - var objects = graphics.removeAll(true).filter(function (objectItem) { - return objectItem.type !== 'cropzone'; - }); + /** + * Indicates if the right click on canvas can output the context menu or not + * @type Boolean + * @since 1.6.5 + * @default + */ + stopContextMenu: false, - objects.forEach(function (objectItem) { - objectItem.evented = true; - }); + /** + * Indicates if the canvas can fire right click events + * @type Boolean + * @since 1.6.5 + * @default + */ + fireRightClick: false, - this.undoData = { - name: loader.getImageName(), - image: prevImage, - objects: objects - }; + /** + * Indicates if the canvas can fire middle click events + * @type Boolean + * @since 1.7.8 + * @default + */ + fireMiddleClick: false, - return loader.load(imageName, imgUrl).then(function (newImage) { - return { - oldWidth: prevImageWidth, - oldHeight: prevImageHeight, - newWidth: newImage.width, - newHeight: newImage.height - }; - }); - }, + /** + * Keep track of the subTargets for Mouse Events + * @type fabric.Object[] + */ + targets: [], + /** + * Keep track of the hovered target + * @type fabric.Object + * @private + */ + _hoveredTarget: null, - /** - * @param {Graphics} graphics - Graphics instance - * @returns {Promise} - */ - undo: function undo(graphics) { - var loader = graphics.getComponent(IMAGE_LOADER); - var _undoData = this.undoData, - objects = _undoData.objects, - name = _undoData.name, - image = _undoData.image; + /** + * hold the list of nested targets hovered + * @type fabric.Object[] + * @private + */ + _hoveredTargets: [], + /** + * @private + */ + _initInteractive: function() { + this._currentTransform = null; + this._groupSelector = null; + this._initWrapperElement(); + this._createUpperCanvas(); + this._initEventListeners(); - graphics.removeAll(true); - graphics.add(objects); + this._initRetinaScaling(); - return loader.load(name, image); - } -}; + this.freeDrawingBrush = fabric.PencilBrush && new fabric.PencilBrush(this); -_command2.default.register(command); + this.calcOffset(); + }, -exports.default = command; + /** + * Divides objects in two groups, one to render immediately + * and one to render as activeGroup. + * @return {Array} objects to render immediately and pushes the other in the activeGroup. + */ + _chooseObjectsToRender: function() { + var activeObjects = this.getActiveObjects(), + object, objsToRender, activeGroupObjects; -/***/ }), + if (activeObjects.length > 0 && !this.preserveObjectStacking) { + objsToRender = []; + activeGroupObjects = []; + for (var i = 0, length = this._objects.length; i < length; i++) { + object = this._objects[i]; + if (activeObjects.indexOf(object) === -1 ) { + objsToRender.push(object); + } + else { + activeGroupObjects.push(object); + } + } + if (activeObjects.length > 1) { + this._activeObject._objects = activeGroupObjects; + } + objsToRender.push.apply(objsToRender, activeGroupObjects); + } + else { + objsToRender = this._objects; + } + return objsToRender; + }, -/***/ "./src/js/command/removeFilter.js": -/*!****************************************!*\ - !*** ./src/js/command/removeFilter.js ***! - \****************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Renders both the top canvas and the secondary container canvas. + * @return {fabric.Canvas} instance + * @chainable + */ + renderAll: function () { + if (this.contextTopDirty && !this._groupSelector && !this.isDrawingMode) { + this.clearContext(this.contextTop); + this.contextTopDirty = false; + } + if (this.hasLostContext) { + this.renderTopLayer(this.contextTop); + } + var canvasToDrawOn = this.contextContainer; + this.renderCanvas(canvasToDrawOn, this._chooseObjectsToRender()); + return this; + }, -"use strict"; + renderTopLayer: function(ctx) { + ctx.save(); + if (this.isDrawingMode && this._isCurrentlyDrawing) { + this.freeDrawingBrush && this.freeDrawingBrush._render(); + this.contextTopDirty = true; + } + // we render the top context - last object + if (this.selection && this._groupSelector) { + this._drawSelection(ctx); + this.contextTopDirty = true; + } + ctx.restore(); + }, + /** + * Method to render only the top canvas. + * Also used to render the group selection box. + * @return {fabric.Canvas} thisArg + * @chainable + */ + renderTop: function () { + var ctx = this.contextTop; + this.clearContext(ctx); + this.renderTopLayer(ctx); + this.fire('after:render'); + return this; + }, -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * @private + */ + _normalizePointer: function (object, pointer) { + var m = object.calcTransformMatrix(), + invertedM = fabric.util.invertTransform(m), + vptPointer = this.restorePointerVpt(pointer); + return fabric.util.transformPoint(vptPointer, invertedM); + }, -var _command = __webpack_require__(/*! @/factory/command */ "./src/js/factory/command.js"); + /** + * Returns true if object is transparent at a certain location + * @param {fabric.Object} target Object to check + * @param {Number} x Left coordinate + * @param {Number} y Top coordinate + * @return {Boolean} + */ + isTargetTransparent: function (target, x, y) { + // in case the target is the activeObject, we cannot execute this optimization + // because we need to draw controls too. + if (target.shouldCache() && target._cacheCanvas && target !== this._activeObject) { + var normalizedPointer = this._normalizePointer(target, {x: x, y: y}), + targetRelativeX = Math.max(target.cacheTranslationX + (normalizedPointer.x * target.zoomX), 0), + targetRelativeY = Math.max(target.cacheTranslationY + (normalizedPointer.y * target.zoomY), 0); -var _command2 = _interopRequireDefault(_command); + var isTransparent = fabric.util.isTransparent( + target._cacheContext, Math.round(targetRelativeX), Math.round(targetRelativeY), this.targetFindTolerance); -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + return isTransparent; + } -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + var ctx = this.contextCache, + originalColor = target.selectionBackgroundColor, v = this.viewportTransform; -/** - * @author NHN. FE Development Team - * @fileoverview Remove a filter from an image - */ -var FILTER = _consts.componentNames.FILTER; + target.selectionBackgroundColor = ''; + this.clearContext(ctx); -var command = { - name: _consts.commandNames.REMOVE_FILTER, + ctx.save(); + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + target.render(ctx); + ctx.restore(); - /** - * Remove a filter from an image - * @param {Graphics} graphics - Graphics instance - * @param {string} type - Filter type - * @returns {Promise} - */ - execute: function execute(graphics, type) { - var filterComp = graphics.getComponent(FILTER); + target.selectionBackgroundColor = originalColor; - this.undoData.options = filterComp.getOptions(type); + var isTransparent = fabric.util.isTransparent( + ctx, x, y, this.targetFindTolerance); - return filterComp.remove(type); - }, + return isTransparent; + }, + /** + * takes an event and determines if selection key has been pressed + * @private + * @param {Event} e Event object + */ + _isSelectionKeyPressed: function(e) { + var selectionKeyPressed = false; - /** - * @param {Graphics} graphics - Graphics instance - * @param {string} type - Filter type - * @returns {Promise} - */ - undo: function undo(graphics, type) { - var filterComp = graphics.getComponent(FILTER); - var options = this.undoData.options; + if (Object.prototype.toString.call(this.selectionKey) === '[object Array]') { + selectionKeyPressed = !!this.selectionKey.find(function(key) { return e[key] === true; }); + } + else { + selectionKeyPressed = e[this.selectionKey]; + } + return selectionKeyPressed; + }, - return filterComp.add(type, options); - } -}; + /** + * @private + * @param {Event} e Event object + * @param {fabric.Object} target + */ + _shouldClearSelection: function (e, target) { + var activeObjects = this.getActiveObjects(), + activeObject = this._activeObject; + + return ( + !target + || + (target && + activeObject && + activeObjects.length > 1 && + activeObjects.indexOf(target) === -1 && + activeObject !== target && + !this._isSelectionKeyPressed(e)) + || + (target && !target.evented) + || + (target && + !target.selectable && + activeObject && + activeObject !== target) + ); + }, -_command2.default.register(command); + /** + * centeredScaling from object can't override centeredScaling from canvas. + * this should be fixed, since object setting should take precedence over canvas. + * also this should be something that will be migrated in the control properties. + * as ability to define the origin of the transformation that the control provide. + * @private + * @param {fabric.Object} target + * @param {String} action + * @param {Boolean} altKey + */ + _shouldCenterTransform: function (target, action, altKey) { + if (!target) { + return; + } -exports.default = command; + var centerTransform; -/***/ }), + if (action === 'scale' || action === 'scaleX' || action === 'scaleY' || action === 'resizing') { + centerTransform = this.centeredScaling || target.centeredScaling; + } + else if (action === 'rotate') { + centerTransform = this.centeredRotation || target.centeredRotation; + } -/***/ "./src/js/command/removeObject.js": -/*!****************************************!*\ - !*** ./src/js/command/removeObject.js ***! - \****************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + return centerTransform ? !altKey : altKey; + }, -"use strict"; + /** + * should disappear before release 4.0 + * @private + */ + _getOriginFromCorner: function(target, corner) { + var origin = { + x: target.originX, + y: target.originY + }; + if (corner === 'ml' || corner === 'tl' || corner === 'bl') { + origin.x = 'right'; + } + else if (corner === 'mr' || corner === 'tr' || corner === 'br') { + origin.x = 'left'; + } -Object.defineProperty(exports, "__esModule", { - value: true -}); + if (corner === 'tl' || corner === 'mt' || corner === 'tr') { + origin.y = 'bottom'; + } + else if (corner === 'bl' || corner === 'mb' || corner === 'br') { + origin.y = 'top'; + } + return origin; + }, -var _command = __webpack_require__(/*! @/factory/command */ "./src/js/factory/command.js"); + /** + * @private + * @param {Boolean} alreadySelected true if target is already selected + * @param {String} corner a string representing the corner ml, mr, tl ... + * @param {Event} e Event object + * @param {fabric.Object} [target] inserted back to help overriding. Unused + */ + _getActionFromCorner: function(alreadySelected, corner, e, target) { + if (!corner || !alreadySelected) { + return 'drag'; + } + var control = target.controls[corner]; + return control.getActionName(e, control, target); + }, -var _command2 = _interopRequireDefault(_command); + /** + * @private + * @param {Event} e Event object + * @param {fabric.Object} target + */ + _setupCurrentTransform: function (e, target, alreadySelected) { + if (!target) { + return; + } -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + var pointer = this.getPointer(e), corner = target.__corner, + control = target.controls[corner], + actionHandler = (alreadySelected && corner) ? + control.getActionHandler(e, target, control) : fabric.controlsUtils.dragHandler, + action = this._getActionFromCorner(alreadySelected, corner, e, target), + origin = this._getOriginFromCorner(target, corner), + altKey = e[this.centeredKey], + transform = { + target: target, + action: action, + actionHandler: actionHandler, + corner: corner, + scaleX: target.scaleX, + scaleY: target.scaleY, + skewX: target.skewX, + skewY: target.skewY, + // used by transation + offsetX: pointer.x - target.left, + offsetY: pointer.y - target.top, + originX: origin.x, + originY: origin.y, + ex: pointer.x, + ey: pointer.y, + lastX: pointer.x, + lastY: pointer.y, + // unsure they are useful anymore. + // left: target.left, + // top: target.top, + theta: degreesToRadians(target.angle), + // end of unsure + width: target.width * target.scaleX, + shiftKey: e.shiftKey, + altKey: altKey, + original: fabric.util.saveObjectTransform(target), + }; -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + if (this._shouldCenterTransform(target, action, altKey)) { + transform.originX = 'center'; + transform.originY = 'center'; + } + transform.original.originX = origin.x; + transform.original.originY = origin.y; + this._currentTransform = transform; + this._beforeTransform(e); + }, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Set the cursor type of the canvas element + * @param {String} value Cursor type of the canvas element. + * @see http://www.w3.org/TR/css3-ui/#cursor + */ + setCursor: function (value) { + this.upperCanvasEl.style.cursor = value; + }, -var command = { - name: _consts.commandNames.REMOVE_OBJECT, + /** + * @private + * @param {CanvasRenderingContext2D} ctx to draw the selection on + */ + _drawSelection: function (ctx) { + var selector = this._groupSelector, + viewportStart = new fabric.Point(selector.ex, selector.ey), + start = fabric.util.transformPoint(viewportStart, this.viewportTransform), + viewportExtent = new fabric.Point(selector.ex + selector.left, selector.ey + selector.top), + extent = fabric.util.transformPoint(viewportExtent, this.viewportTransform), + minX = Math.min(start.x, extent.x), + minY = Math.min(start.y, extent.y), + maxX = Math.max(start.x, extent.x), + maxY = Math.max(start.y, extent.y), + strokeOffset = this.selectionLineWidth / 2; - /** - * Remove an object - * @param {Graphics} graphics - Graphics instance - * @param {number} id - object id - * @returns {Promise} - */ - execute: function execute(graphics, id) { - var _this = this; + if (this.selectionColor) { + ctx.fillStyle = this.selectionColor; + ctx.fillRect(minX, minY, maxX - minX, maxY - minY); + } - return new _util.Promise(function (resolve, reject) { - _this.undoData.objects = graphics.removeObjectById(id); - if (_this.undoData.objects.length) { - resolve(); - } else { - reject(_consts.rejectMessages.noObject); + if (!this.selectionLineWidth || !this.selectionBorderColor) { + return; } - }); - }, + ctx.lineWidth = this.selectionLineWidth; + ctx.strokeStyle = this.selectionBorderColor; + minX += strokeOffset; + minY += strokeOffset; + maxX -= strokeOffset; + maxY -= strokeOffset; + // selection border + fabric.Object.prototype._setLineDash.call(this, ctx, this.selectionDashArray); + ctx.strokeRect(minX, minY, maxX - minX, maxY - minY); + }, - /** - * @param {Graphics} graphics - Graphics instance - * @returns {Promise} - */ - undo: function undo(graphics) { - graphics.add(this.undoData.objects); + /** + * Method that determines what object we are clicking on + * the skipGroup parameter is for internal use, is needed for shift+click action + * 11/09/2018 TODO: would be cool if findTarget could discern between being a full target + * or the outside part of the corner. + * @param {Event} e mouse event + * @param {Boolean} skipGroup when true, activeGroup is skipped and only objects are traversed through + * @return {fabric.Object} the target found + */ + findTarget: function (e, skipGroup) { + if (this.skipTargetFind) { + return; + } - return _util.Promise.resolve(); - } -}; /** - * @author NHN. FE Development Team - * @fileoverview Remove an object - */ + var ignoreZoom = true, + pointer = this.getPointer(e, ignoreZoom), + activeObject = this._activeObject, + aObjects = this.getActiveObjects(), + activeTarget, activeTargetSubs, + isTouch = isTouchEvent(e), + shouldLookForActive = (aObjects.length > 1 && !skipGroup) || aObjects.length === 1; + // first check current group (if one exists) + // active group does not check sub targets like normal groups. + // if active group just exits. + this.targets = []; -_command2.default.register(command); + // if we hit the corner of an activeObject, let's return that. + if (shouldLookForActive && activeObject._findTargetCorner(pointer, isTouch)) { + return activeObject; + } + if (aObjects.length > 1 && !skipGroup && activeObject === this._searchPossibleTargets([activeObject], pointer)) { + return activeObject; + } + if (aObjects.length === 1 && + activeObject === this._searchPossibleTargets([activeObject], pointer)) { + if (!this.preserveObjectStacking) { + return activeObject; + } + else { + activeTarget = activeObject; + activeTargetSubs = this.targets; + this.targets = []; + } + } + var target = this._searchPossibleTargets(this._objects, pointer); + if (e[this.altSelectionKey] && target && activeTarget && target !== activeTarget) { + target = activeTarget; + this.targets = activeTargetSubs; + } + return target; + }, -exports.default = command; + /** + * Checks point is inside the object. + * @param {Object} [pointer] x,y object of point coordinates we want to check. + * @param {fabric.Object} obj Object to test against + * @param {Object} [globalPointer] x,y object of point coordinates relative to canvas used to search per pixel target. + * @return {Boolean} true if point is contained within an area of given object + * @private + */ + _checkTarget: function(pointer, obj, globalPointer) { + if (obj && + obj.visible && + obj.evented && + // http://www.geog.ubc.ca/courses/klink/gis.notes/ncgia/u32.html + // http://idav.ucdavis.edu/~okreylos/TAship/Spring2000/PointInPolygon.html + obj.containsPoint(pointer) + ) { + if ((this.perPixelTargetFind || obj.perPixelTargetFind) && !obj.isEditing) { + var isTransparent = this.isTargetTransparent(obj, globalPointer.x, globalPointer.y); + if (!isTransparent) { + return true; + } + } + else { + return true; + } + } + }, -/***/ }), + /** + * Function used to search inside objects an object that contains pointer in bounding box or that contains pointerOnCanvas when painted + * @param {Array} [objects] objects array to look into + * @param {Object} [pointer] x,y object of point coordinates we want to check. + * @return {fabric.Object} object that contains pointer + * @private + */ + _searchPossibleTargets: function(objects, pointer) { + // Cache all targets where their bounding box contains point. + var target, i = objects.length, subTarget; + // Do not check for currently grouped objects, since we check the parent group itself. + // until we call this function specifically to search inside the activeGroup + while (i--) { + var objToCheck = objects[i]; + var pointerToUse = objToCheck.group ? + this._normalizePointer(objToCheck.group, pointer) : pointer; + if (this._checkTarget(pointerToUse, objToCheck, pointer)) { + target = objects[i]; + if (target.subTargetCheck && target instanceof fabric.Group) { + subTarget = this._searchPossibleTargets(target._objects, pointer); + subTarget && this.targets.push(subTarget); + } + break; + } + } + return target; + }, -/***/ "./src/js/command/resize.js": -/*!**********************************!*\ - !*** ./src/js/command/resize.js ***! - \**********************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Returns pointer coordinates without the effect of the viewport + * @param {Object} pointer with "x" and "y" number values + * @return {Object} object with "x" and "y" number values + */ + restorePointerVpt: function(pointer) { + return fabric.util.transformPoint( + pointer, + fabric.util.invertTransform(this.viewportTransform) + ); + }, -"use strict"; + /** + * Returns pointer coordinates relative to canvas. + * Can return coordinates with or without viewportTransform. + * ignoreZoom false gives back coordinates that represent + * the point clicked on canvas element. + * ignoreZoom true gives back coordinates after being processed + * by the viewportTransform ( sort of coordinates of what is displayed + * on the canvas where you are clicking. + * ignoreZoom true = HTMLElement coordinates relative to top,left + * ignoreZoom false, default = fabric space coordinates, the same used for shape position + * To interact with your shapes top and left you want to use ignoreZoom true + * most of the time, while ignoreZoom false will give you coordinates + * compatible with the object.oCoords system. + * of the time. + * @param {Event} e + * @param {Boolean} ignoreZoom + * @return {Object} object with "x" and "y" number values + */ + getPointer: function (e, ignoreZoom) { + // return cached values if we are in the event processing chain + if (this._absolutePointer && !ignoreZoom) { + return this._absolutePointer; + } + if (this._pointer && ignoreZoom) { + return this._pointer; + } + + var pointer = getPointer(e), + upperCanvasEl = this.upperCanvasEl, + bounds = upperCanvasEl.getBoundingClientRect(), + boundsWidth = bounds.width || 0, + boundsHeight = bounds.height || 0, + cssScale; + + if (!boundsWidth || !boundsHeight ) { + if ('top' in bounds && 'bottom' in bounds) { + boundsHeight = Math.abs( bounds.top - bounds.bottom ); + } + if ('right' in bounds && 'left' in bounds) { + boundsWidth = Math.abs( bounds.right - bounds.left ); + } + } + this.calcOffset(); + pointer.x = pointer.x - this._offset.left; + pointer.y = pointer.y - this._offset.top; + if (!ignoreZoom) { + pointer = this.restorePointerVpt(pointer); + } -Object.defineProperty(exports, "__esModule", { - value: true -}); + var retinaScaling = this.getRetinaScaling(); + if (retinaScaling !== 1) { + pointer.x /= retinaScaling; + pointer.y /= retinaScaling; + } -var _command = __webpack_require__(/*! @/factory/command */ "./src/js/factory/command.js"); + if (boundsWidth === 0 || boundsHeight === 0) { + // If bounds are not available (i.e. not visible), do not apply scale. + cssScale = { width: 1, height: 1 }; + } + else { + cssScale = { + width: upperCanvasEl.width / boundsWidth, + height: upperCanvasEl.height / boundsHeight + }; + } -var _command2 = _interopRequireDefault(_command); + return { + x: pointer.x * cssScale.width, + y: pointer.y * cssScale.height + }; + }, -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + /** + * @private + * @throws {CANVAS_INIT_ERROR} If canvas can not be initialized + */ + _createUpperCanvas: function () { + var lowerCanvasClass = this.lowerCanvasEl.className.replace(/\s*lower-canvas\s*/, ''), + lowerCanvasEl = this.lowerCanvasEl, upperCanvasEl = this.upperCanvasEl; -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + // there is no need to create a new upperCanvas element if we have already one. + if (upperCanvasEl) { + upperCanvasEl.className = ''; + } + else { + upperCanvasEl = this._createCanvasElement(); + this.upperCanvasEl = upperCanvasEl; + } + fabric.util.addClass(upperCanvasEl, 'upper-canvas ' + lowerCanvasClass); -/** - * @author NHN. FE Development Team - * @fileoverview Resize an image - */ -var RESIZE = _consts.componentNames.RESIZE; + this.wrapperEl.appendChild(upperCanvasEl); + this._copyCanvasStyle(lowerCanvasEl, upperCanvasEl); + this._applyCanvasStyle(upperCanvasEl); + this.contextTop = upperCanvasEl.getContext('2d'); + }, -var command = { - name: _consts.commandNames.RESIZE_IMAGE, + /** + * @private + */ + _createCacheCanvas: function () { + this.cacheCanvasEl = this._createCanvasElement(); + this.cacheCanvasEl.setAttribute('width', this.width); + this.cacheCanvasEl.setAttribute('height', this.height); + this.contextCache = this.cacheCanvasEl.getContext('2d'); + }, - /** - * Resize an image - * @param {Graphics} graphics - Graphics instance - * @param {object} dimensions - Image Dimensions - * @returns {Promise} - */ - execute: function execute(graphics, dimensions) { - var resizeComp = graphics.getComponent(RESIZE); + /** + * @private + */ + _initWrapperElement: function () { + this.wrapperEl = fabric.util.wrapElement(this.lowerCanvasEl, 'div', { + 'class': this.containerClass + }); + fabric.util.setStyle(this.wrapperEl, { + width: this.width + 'px', + height: this.height + 'px', + position: 'relative' + }); + fabric.util.makeElementUnselectable(this.wrapperEl); + }, - var originalDimensions = resizeComp.getOriginalDimensions(); - if (!originalDimensions) { - originalDimensions = resizeComp.getCurrentDimensions(); - } + /** + * @private + * @param {HTMLElement} element canvas element to apply styles on + */ + _applyCanvasStyle: function (element) { + var width = this.width || element.width, + height = this.height || element.height; - this.undoData.dimensions = originalDimensions; + fabric.util.setStyle(element, { + position: 'absolute', + width: width + 'px', + height: height + 'px', + left: 0, + top: 0, + 'touch-action': this.allowTouchScrolling ? 'manipulation' : 'none', + '-ms-touch-action': this.allowTouchScrolling ? 'manipulation' : 'none' + }); + element.width = width; + element.height = height; + fabric.util.makeElementUnselectable(element); + }, - return resizeComp.resize(dimensions); - }, + /** + * Copy the entire inline style from one element (fromEl) to another (toEl) + * @private + * @param {Element} fromEl Element style is copied from + * @param {Element} toEl Element copied style is applied to + */ + _copyCanvasStyle: function (fromEl, toEl) { + toEl.style.cssText = fromEl.style.cssText; + }, + /** + * Returns context of canvas where object selection is drawn + * @return {CanvasRenderingContext2D} + */ + getSelectionContext: function() { + return this.contextTop; + }, - /** - * @param {Graphics} graphics - Graphics instance - * @returns {Promise} - */ - undo: function undo(graphics) { - var resizeComp = graphics.getComponent(RESIZE); - - return resizeComp.resize(this.undoData.dimensions); - } -}; - -_command2.default.register(command); + /** + * Returns <canvas> element on which object selection is drawn + * @return {HTMLCanvasElement} + */ + getSelectionElement: function () { + return this.upperCanvasEl; + }, -exports.default = command; + /** + * Returns currently active object + * @return {fabric.Object} active object + */ + getActiveObject: function () { + return this._activeObject; + }, -/***/ }), + /** + * Returns an array with the current selected objects + * @return {fabric.Object} active object + */ + getActiveObjects: function () { + var active = this._activeObject; + if (active) { + if (active.type === 'activeSelection' && active._objects) { + return active._objects.slice(0); + } + else { + return [active]; + } + } + return []; + }, -/***/ "./src/js/command/resizeCanvasDimension.js": -/*!*************************************************!*\ - !*** ./src/js/command/resizeCanvasDimension.js ***! - \*************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * @private + * @param {fabric.Object} obj Object that was removed + */ + _onObjectRemoved: function(obj) { + // removing active object should fire "selection:cleared" events + if (obj === this._activeObject) { + this.fire('before:selection:cleared', { target: obj }); + this._discardActiveObject(); + this.fire('selection:cleared', { target: obj }); + obj.fire('deselected'); + } + if (obj === this._hoveredTarget){ + this._hoveredTarget = null; + this._hoveredTargets = []; + } + this.callSuper('_onObjectRemoved', obj); + }, -"use strict"; + /** + * @private + * Compares the old activeObject with the current one and fires correct events + * @param {fabric.Object} obj old activeObject + */ + _fireSelectionEvents: function(oldObjects, e) { + var somethingChanged = false, objects = this.getActiveObjects(), + added = [], removed = []; + oldObjects.forEach(function(oldObject) { + if (objects.indexOf(oldObject) === -1) { + somethingChanged = true; + oldObject.fire('deselected', { + e: e, + target: oldObject + }); + removed.push(oldObject); + } + }); + objects.forEach(function(object) { + if (oldObjects.indexOf(object) === -1) { + somethingChanged = true; + object.fire('selected', { + e: e, + target: object + }); + added.push(object); + } + }); + if (oldObjects.length > 0 && objects.length > 0) { + somethingChanged && this.fire('selection:updated', { + e: e, + selected: added, + deselected: removed, + // added for backward compatibility + // deprecated + updated: added[0] || removed[0], + target: this._activeObject, + }); + } + else if (objects.length > 0) { + this.fire('selection:created', { + e: e, + selected: added, + target: this._activeObject, + }); + } + else if (oldObjects.length > 0) { + this.fire('selection:cleared', { + e: e, + deselected: removed, + }); + } + }, + /** + * Sets given object as the only active object on canvas + * @param {fabric.Object} object Object to set as an active one + * @param {Event} [e] Event (passed along when firing "object:selected") + * @return {fabric.Canvas} thisArg + * @chainable + */ + setActiveObject: function (object, e) { + var currentActives = this.getActiveObjects(); + this._setActiveObject(object, e); + this._fireSelectionEvents(currentActives, e); + return this; + }, -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * This is a private method for now. + * This is supposed to be equivalent to setActiveObject but without firing + * any event. There is commitment to have this stay this way. + * This is the functional part of setActiveObject. + * @private + * @param {Object} object to set as active + * @param {Event} [e] Event (passed along when firing "object:selected") + * @return {Boolean} true if the selection happened + */ + _setActiveObject: function(object, e) { + if (this._activeObject === object) { + return false; + } + if (!this._discardActiveObject(e, object)) { + return false; + } + if (object.onSelect({ e: e })) { + return false; + } + this._activeObject = object; + return true; + }, -var _command = __webpack_require__(/*! @/factory/command */ "./src/js/factory/command.js"); + /** + * This is a private method for now. + * This is supposed to be equivalent to discardActiveObject but without firing + * any events. There is commitment to have this stay this way. + * This is the functional part of discardActiveObject. + * @param {Event} [e] Event (passed along when firing "object:deselected") + * @param {Object} object to set as active + * @return {Boolean} true if the selection happened + * @private + */ + _discardActiveObject: function(e, object) { + var obj = this._activeObject; + if (obj) { + // onDeselect return TRUE to cancel selection; + if (obj.onDeselect({ e: e, object: object })) { + return false; + } + this._activeObject = null; + } + return true; + }, -var _command2 = _interopRequireDefault(_command); + /** + * Discards currently active object and fire events. If the function is called by fabric + * as a consequence of a mouse event, the event is passed as a parameter and + * sent to the fire function for the custom events. When used as a method the + * e param does not have any application. + * @param {event} e + * @return {fabric.Canvas} thisArg + * @chainable + */ + discardActiveObject: function (e) { + var currentActives = this.getActiveObjects(), activeObject = this.getActiveObject(); + if (currentActives.length) { + this.fire('before:selection:cleared', { target: activeObject, e: e }); + } + this._discardActiveObject(e); + this._fireSelectionEvents(currentActives, e); + return this; + }, -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + /** + * Clears a canvas element and removes all event listeners + * @return {fabric.Canvas} thisArg + * @chainable + */ + dispose: function () { + var wrapper = this.wrapperEl; + this.removeListeners(); + wrapper.removeChild(this.upperCanvasEl); + wrapper.removeChild(this.lowerCanvasEl); + this.contextCache = null; + this.contextTop = null; + ['upperCanvasEl', 'cacheCanvasEl'].forEach((function(element) { + fabric.util.cleanUpJsdomNode(this[element]); + this[element] = undefined; + }).bind(this)); + if (wrapper.parentNode) { + wrapper.parentNode.replaceChild(this.lowerCanvasEl, this.wrapperEl); + } + delete this.wrapperEl; + fabric.StaticCanvas.prototype.dispose.call(this); + return this; + }, -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + /** + * Clears all contexts (background, main, top) of an instance + * @return {fabric.Canvas} thisArg + * @chainable + */ + clear: function () { + // this.discardActiveGroup(); + this.discardActiveObject(); + this.clearContext(this.contextTop); + return this.callSuper('clear'); + }, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Draws objects' controls (borders/controls) + * @param {CanvasRenderingContext2D} ctx Context to render controls on + */ + drawControls: function(ctx) { + var activeObject = this._activeObject; -var command = { - name: _consts.commandNames.RESIZE_CANVAS_DIMENSION, + if (activeObject) { + activeObject._renderControls(ctx); + } + }, - /** - * resize the canvas with given dimension - * @param {Graphics} graphics - Graphics instance - * @param {{width: number, height: number}} dimension - Max width & height - * @returns {Promise} - */ - execute: function execute(graphics, dimension) { - var _this = this; + /** + * @private + */ + _toObject: function(instance, methodName, propertiesToInclude) { + //If the object is part of the current selection group, it should + //be transformed appropriately + //i.e. it should be serialised as it would appear if the selection group + //were to be destroyed. + var originalProperties = this._realizeGroupTransformOnObject(instance), + object = this.callSuper('_toObject', instance, methodName, propertiesToInclude); + //Undo the damage we did by changing all of its properties + this._unwindGroupTransformOnObject(instance, originalProperties); + return object; + }, - return new _util.Promise(function (resolve) { - _this.undoData.size = { - width: graphics.cssMaxWidth, - height: graphics.cssMaxHeight - }; + /** + * Realises an object's group transformation on it + * @private + * @param {fabric.Object} [instance] the object to transform (gets mutated) + * @returns the original values of instance which were changed + */ + _realizeGroupTransformOnObject: function(instance) { + if (instance.group && instance.group.type === 'activeSelection' && this._activeObject === instance.group) { + var layoutProps = ['angle', 'flipX', 'flipY', 'left', 'scaleX', 'scaleY', 'skewX', 'skewY', 'top']; + //Copy all the positionally relevant properties across now + var originalValues = {}; + layoutProps.forEach(function(prop) { + originalValues[prop] = instance[prop]; + }); + fabric.util.addTransformToObject(instance, this._activeObject.calcOwnMatrix()); + return originalValues; + } + else { + return null; + } + }, - graphics.setCssMaxDimension(dimension); - graphics.adjustCanvasDimension(); - resolve(); - }); - }, + /** + * Restores the changed properties of instance + * @private + * @param {fabric.Object} [instance] the object to un-transform (gets mutated) + * @param {Object} [originalValues] the original values of instance, as returned by _realizeGroupTransformOnObject + */ + _unwindGroupTransformOnObject: function(instance, originalValues) { + if (originalValues) { + instance.set(originalValues); + } + }, + /** + * @private + */ + _setSVGObject: function(markup, instance, reviver) { + //If the object is in a selection group, simulate what would happen to that + //object when the group is deselected + var originalProperties = this._realizeGroupTransformOnObject(instance); + this.callSuper('_setSVGObject', markup, instance, reviver); + this._unwindGroupTransformOnObject(instance, originalProperties); + }, - /** - * @param {Graphics} graphics - Graphics instance - * @returns {Promise} - */ - undo: function undo(graphics) { - graphics.setCssMaxDimension(this.undoData.size); - graphics.adjustCanvasDimension(); + setViewportTransform: function (vpt) { + if (this.renderOnAddRemove && this._activeObject && this._activeObject.isEditing) { + this._activeObject.clearContextTop(); + } + fabric.StaticCanvas.prototype.setViewportTransform.call(this, vpt); + } + }); - return _util.Promise.resolve(); + // copying static properties manually to work around Opera's bug, + // where "prototype" property is enumerable and overrides existing prototype + for (var prop in fabric.StaticCanvas) { + if (prop !== 'prototype') { + fabric.Canvas[prop] = fabric.StaticCanvas[prop]; + } } -}; /** - * @author NHN. FE Development Team - * @fileoverview Resize a canvas - */ +})(); -_command2.default.register(command); +(function() { -exports.default = command; + var addListener = fabric.util.addListener, + removeListener = fabric.util.removeListener, + RIGHT_CLICK = 3, MIDDLE_CLICK = 2, LEFT_CLICK = 1, + addEventOptions = { passive: false }; -/***/ }), + function checkClick(e, value) { + return e.button && (e.button === value - 1); + } -/***/ "./src/js/command/rotate.js": -/*!**********************************!*\ - !*** ./src/js/command/rotate.js ***! - \**********************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ { -"use strict"; + /** + * Contains the id of the touch event that owns the fabric transform + * @type Number + * @private + */ + mainTouchId: null, + /** + * Adds mouse listeners to canvas + * @private + */ + _initEventListeners: function () { + // in case we initialized the class twice. This should not happen normally + // but in some kind of applications where the canvas element may be changed + // this is a workaround to having double listeners. + this.removeListeners(); + this._bindEvents(); + this.addOrRemove(addListener, 'add'); + }, -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * return an event prefix pointer or mouse. + * @private + */ + _getEventPrefix: function () { + return this.enablePointerEvents ? 'pointer' : 'mouse'; + }, -var _command = __webpack_require__(/*! @/factory/command */ "./src/js/factory/command.js"); + addOrRemove: function(functor, eventjsFunctor) { + var canvasElement = this.upperCanvasEl, + eventTypePrefix = this._getEventPrefix(); + functor(fabric.window, 'resize', this._onResize); + functor(canvasElement, eventTypePrefix + 'down', this._onMouseDown); + functor(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + functor(canvasElement, eventTypePrefix + 'out', this._onMouseOut); + functor(canvasElement, eventTypePrefix + 'enter', this._onMouseEnter); + functor(canvasElement, 'wheel', this._onMouseWheel); + functor(canvasElement, 'contextmenu', this._onContextMenu); + functor(canvasElement, 'dblclick', this._onDoubleClick); + functor(canvasElement, 'dragover', this._onDragOver); + functor(canvasElement, 'dragenter', this._onDragEnter); + functor(canvasElement, 'dragleave', this._onDragLeave); + functor(canvasElement, 'drop', this._onDrop); + if (!this.enablePointerEvents) { + functor(canvasElement, 'touchstart', this._onTouchStart, addEventOptions); + } + if (typeof eventjs !== 'undefined' && eventjsFunctor in eventjs) { + eventjs[eventjsFunctor](canvasElement, 'gesture', this._onGesture); + eventjs[eventjsFunctor](canvasElement, 'drag', this._onDrag); + eventjs[eventjsFunctor](canvasElement, 'orientation', this._onOrientationChange); + eventjs[eventjsFunctor](canvasElement, 'shake', this._onShake); + eventjs[eventjsFunctor](canvasElement, 'longpress', this._onLongPress); + } + }, -var _command2 = _interopRequireDefault(_command); + /** + * Removes all event listeners + */ + removeListeners: function() { + this.addOrRemove(removeListener, 'remove'); + // if you dispose on a mouseDown, before mouse up, you need to clean document to... + var eventTypePrefix = this._getEventPrefix(); + removeListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); + removeListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); + removeListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + removeListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); + }, -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + /** + * @private + */ + _bindEvents: function() { + if (this.eventsBound) { + // for any reason we pass here twice we do not want to bind events twice. + return; + } + this._onMouseDown = this._onMouseDown.bind(this); + this._onTouchStart = this._onTouchStart.bind(this); + this._onMouseMove = this._onMouseMove.bind(this); + this._onMouseUp = this._onMouseUp.bind(this); + this._onTouchEnd = this._onTouchEnd.bind(this); + this._onResize = this._onResize.bind(this); + this._onGesture = this._onGesture.bind(this); + this._onDrag = this._onDrag.bind(this); + this._onShake = this._onShake.bind(this); + this._onLongPress = this._onLongPress.bind(this); + this._onOrientationChange = this._onOrientationChange.bind(this); + this._onMouseWheel = this._onMouseWheel.bind(this); + this._onMouseOut = this._onMouseOut.bind(this); + this._onMouseEnter = this._onMouseEnter.bind(this); + this._onContextMenu = this._onContextMenu.bind(this); + this._onDoubleClick = this._onDoubleClick.bind(this); + this._onDragOver = this._onDragOver.bind(this); + this._onDragEnter = this._simpleEventHandler.bind(this, 'dragenter'); + this._onDragLeave = this._simpleEventHandler.bind(this, 'dragleave'); + this._onDrop = this._simpleEventHandler.bind(this, 'drop'); + this.eventsBound = true; + }, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * @private + * @param {Event} [e] Event object fired on Event.js gesture + * @param {Event} [self] Inner Event object + */ + _onGesture: function(e, self) { + this.__onTransformGesture && this.__onTransformGesture(e, self); + }, -/** - * @author NHN. FE Development Team - * @fileoverview Rotate an image - */ -var ROTATION = _consts.componentNames.ROTATION; + /** + * @private + * @param {Event} [e] Event object fired on Event.js drag + * @param {Event} [self] Inner Event object + */ + _onDrag: function(e, self) { + this.__onDrag && this.__onDrag(e, self); + }, -/** - * Cached data for undo - * @type {Object} - */ + /** + * @private + * @param {Event} [e] Event object fired on wheel event + */ + _onMouseWheel: function(e) { + this.__onMouseWheel(e); + }, -var cachedUndoDataForSilent = null; + /** + * @private + * @param {Event} e Event object fired on mousedown + */ + _onMouseOut: function(e) { + var target = this._hoveredTarget; + this.fire('mouse:out', { target: target, e: e }); + this._hoveredTarget = null; + target && target.fire('mouseout', { e: e }); -/** - * Make undo data - * @param {Component} rotationComp - rotation component - * @returns {object} - undodata - */ -function makeUndoData(rotationComp) { - return { - angle: rotationComp.getCurrentAngle() - }; -} + var _this = this; + this._hoveredTargets.forEach(function(_target){ + _this.fire('mouse:out', { target: target, e: e }); + _target && target.fire('mouseout', { e: e }); + }); + this._hoveredTargets = []; -var command = { - name: _consts.commandNames.ROTATE_IMAGE, + if (this._iTextInstances) { + this._iTextInstances.forEach(function(obj) { + if (obj.isEditing) { + obj.hiddenTextarea.focus(); + } + }); + } + }, - /** - * Rotate an image - * @param {Graphics} graphics - Graphics instance - * @param {string} type - 'rotate' or 'setAngle' - * @param {number} angle - angle value (degree) - * @param {boolean} isSilent - is silent execution or not - * @returns {Promise} - */ - execute: function execute(graphics, type, angle, isSilent) { - var rotationComp = graphics.getComponent(ROTATION); + /** + * @private + * @param {Event} e Event object fired on mouseenter + */ + _onMouseEnter: function(e) { + // This find target and consequent 'mouse:over' is used to + // clear old instances on hovered target. + // calling findTarget has the side effect of killing target.__corner. + // as a short term fix we are not firing this if we are currently transforming. + // as a long term fix we need to separate the action of finding a target with the + // side effects we added to it. + if (!this._currentTransform && !this.findTarget(e)) { + this.fire('mouse:over', { target: null, e: e }); + this._hoveredTarget = null; + this._hoveredTargets = []; + } + }, - if (!this.isRedo) { - var undoData = makeUndoData(rotationComp); + /** + * @private + * @param {Event} [e] Event object fired on Event.js orientation change + * @param {Event} [self] Inner Event object + */ + _onOrientationChange: function(e, self) { + this.__onOrientationChange && this.__onOrientationChange(e, self); + }, - cachedUndoDataForSilent = this.setUndoData(undoData, cachedUndoDataForSilent, isSilent); - } + /** + * @private + * @param {Event} [e] Event object fired on Event.js shake + * @param {Event} [self] Inner Event object + */ + _onShake: function(e, self) { + this.__onShake && this.__onShake(e, self); + }, - return rotationComp[type](angle); - }, + /** + * @private + * @param {Event} [e] Event object fired on Event.js shake + * @param {Event} [self] Inner Event object + */ + _onLongPress: function(e, self) { + this.__onLongPress && this.__onLongPress(e, self); + }, + /** + * prevent default to allow drop event to be fired + * @private + * @param {Event} [e] Event object fired on Event.js shake + */ + _onDragOver: function(e) { + e.preventDefault(); + var target = this._simpleEventHandler('dragover', e); + this._fireEnterLeaveEvents(target, e); + }, - /** - * @param {Graphics} graphics - Graphics instance - * @returns {Promise} - */ - undo: function undo(graphics) { - var rotationComp = graphics.getComponent(ROTATION); - var _args = this.args, - type = _args[1], - angle = _args[2]; + /** + * @private + * @param {Event} e Event object fired on mousedown + */ + _onContextMenu: function (e) { + if (this.stopContextMenu) { + e.stopPropagation(); + e.preventDefault(); + } + return false; + }, + /** + * @private + * @param {Event} e Event object fired on mousedown + */ + _onDoubleClick: function (e) { + this._cacheTransformEventData(e); + this._handleEvent(e, 'dblclick'); + this._resetTransformEventData(e); + }, - if (type === 'setAngle') { - return rotationComp[type](this.undoData.angle); - } + /** + * Return a the id of an event. + * returns either the pointerId or the identifier or 0 for the mouse event + * @private + * @param {Event} evt Event object + */ + getPointerId: function(evt) { + var changedTouches = evt.changedTouches; - return rotationComp.rotate(-angle); - } -}; + if (changedTouches) { + return changedTouches[0] && changedTouches[0].identifier; + } -_command2.default.register(command); + if (this.enablePointerEvents) { + return evt.pointerId; + } -exports.default = command; + return -1; + }, -/***/ }), + /** + * Determines if an event has the id of the event that is considered main + * @private + * @param {evt} event Event object + */ + _isMainEvent: function(evt) { + if (evt.isPrimary === true) { + return true; + } + if (evt.isPrimary === false) { + return false; + } + if (evt.type === 'touchend' && evt.touches.length === 0) { + return true; + } + if (evt.changedTouches) { + return evt.changedTouches[0].identifier === this.mainTouchId; + } + return true; + }, -/***/ "./src/js/command/setObjectPosition.js": -/*!*********************************************!*\ - !*** ./src/js/command/setObjectPosition.js ***! - \*********************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * @private + * @param {Event} e Event object fired on mousedown + */ + _onTouchStart: function(e) { + e.preventDefault(); + if (this.mainTouchId === null) { + this.mainTouchId = this.getPointerId(e); + } + this.__onMouseDown(e); + this._resetTransformEventData(); + var canvasElement = this.upperCanvasEl, + eventTypePrefix = this._getEventPrefix(); + addListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); + addListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); + // Unbind mousedown to prevent double triggers from touch devices + removeListener(canvasElement, eventTypePrefix + 'down', this._onMouseDown); + }, -"use strict"; + /** + * @private + * @param {Event} e Event object fired on mousedown + */ + _onMouseDown: function (e) { + this.__onMouseDown(e); + this._resetTransformEventData(); + var canvasElement = this.upperCanvasEl, + eventTypePrefix = this._getEventPrefix(); + removeListener(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + addListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); + addListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + }, + /** + * @private + * @param {Event} e Event object fired on mousedown + */ + _onTouchEnd: function(e) { + if (e.touches.length > 0) { + // if there are still touches stop here + return; + } + this.__onMouseUp(e); + this._resetTransformEventData(); + this.mainTouchId = null; + var eventTypePrefix = this._getEventPrefix(); + removeListener(fabric.document, 'touchend', this._onTouchEnd, addEventOptions); + removeListener(fabric.document, 'touchmove', this._onMouseMove, addEventOptions); + var _this = this; + if (this._willAddMouseDown) { + clearTimeout(this._willAddMouseDown); + } + this._willAddMouseDown = setTimeout(function() { + // Wait 400ms before rebinding mousedown to prevent double triggers + // from touch devices + addListener(_this.upperCanvasEl, eventTypePrefix + 'down', _this._onMouseDown); + _this._willAddMouseDown = 0; + }, 400); + }, -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * @private + * @param {Event} e Event object fired on mouseup + */ + _onMouseUp: function (e) { + this.__onMouseUp(e); + this._resetTransformEventData(); + var canvasElement = this.upperCanvasEl, + eventTypePrefix = this._getEventPrefix(); + if (this._isMainEvent(e)) { + removeListener(fabric.document, eventTypePrefix + 'up', this._onMouseUp); + removeListener(fabric.document, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + addListener(canvasElement, eventTypePrefix + 'move', this._onMouseMove, addEventOptions); + } + }, -var _command = __webpack_require__(/*! @/factory/command */ "./src/js/factory/command.js"); + /** + * @private + * @param {Event} e Event object fired on mousemove + */ + _onMouseMove: function (e) { + !this.allowTouchScrolling && e.preventDefault && e.preventDefault(); + this.__onMouseMove(e); + }, -var _command2 = _interopRequireDefault(_command); + /** + * @private + */ + _onResize: function () { + this.calcOffset(); + }, -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + /** + * Decides whether the canvas should be redrawn in mouseup and mousedown events. + * @private + * @param {Object} target + */ + _shouldRender: function(target) { + var activeObject = this._activeObject; -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + if ( + !!activeObject !== !!target || + (activeObject && target && (activeObject !== target)) + ) { + // this covers: switch of target, from target to no target, selection of target + // multiSelection with key and mouse + return true; + } + else if (activeObject && activeObject.isEditing) { + // if we mouse up/down over a editing textbox a cursor change, + // there is no need to re render + return false; + } + return false; + }, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Method that defines the actions when mouse is released on canvas. + * The method resets the currentTransform parameters, store the image corner + * position in the image object and render the canvas on top. + * @private + * @param {Event} e Event object fired on mouseup + */ + __onMouseUp: function (e) { + var target, transform = this._currentTransform, + groupSelector = this._groupSelector, shouldRender = false, + isClick = (!groupSelector || (groupSelector.left === 0 && groupSelector.top === 0)); + this._cacheTransformEventData(e); + target = this._target; + this._handleEvent(e, 'up:before'); + // if right/middle click just fire events and return + // target undefined will make the _handleEvent search the target + if (checkClick(e, RIGHT_CLICK)) { + if (this.fireRightClick) { + this._handleEvent(e, 'up', RIGHT_CLICK, isClick); + } + return; + } -var command = { - name: _consts.commandNames.SET_OBJECT_POSITION, + if (checkClick(e, MIDDLE_CLICK)) { + if (this.fireMiddleClick) { + this._handleEvent(e, 'up', MIDDLE_CLICK, isClick); + } + this._resetTransformEventData(); + return; + } - /** - * Set object properties - * @param {Graphics} graphics - Graphics instance - * @param {number} id - object id - * @param {Object} posInfo - position object - * @param {number} posInfo.x - x position - * @param {number} posInfo.y - y position - * @param {string} posInfo.originX - can be 'left', 'center', 'right' - * @param {string} posInfo.originY - can be 'top', 'center', 'bottom' - * @returns {Promise} - */ - execute: function execute(graphics, id, posInfo) { - var targetObj = graphics.getObject(id); + if (this.isDrawingMode && this._isCurrentlyDrawing) { + this._onMouseUpInDrawingMode(e); + return; + } - if (!targetObj) { - return _util.Promise.reject(_consts.rejectMessages.noObject); - } + if (!this._isMainEvent(e)) { + return; + } + if (transform) { + this._finalizeCurrentTransform(e); + shouldRender = transform.actionPerformed; + } + if (!isClick) { + var targetWasActive = target === this._activeObject; + this._maybeGroupObjects(e); + if (!shouldRender) { + shouldRender = ( + this._shouldRender(target) || + (!targetWasActive && target === this._activeObject) + ); + } + } + if (target) { + if (target.selectable && target !== this._activeObject && target.activeOn === 'up') { + this.setActiveObject(target, e); + shouldRender = true; + } + else { + var corner = target._findTargetCorner( + this.getPointer(e, true), + fabric.util.isTouchEvent(e) + ); + var control = target.controls[corner], + mouseUpHandler = control && control.getMouseUpHandler(e, target, control); + if (mouseUpHandler) { + var pointer = this.getPointer(e); + mouseUpHandler(e, transform, pointer.x, pointer.y); + } + } + target.isMoving = false; + } + this._setCursorFromEvent(e, target); + this._handleEvent(e, 'up', LEFT_CLICK, isClick); + this._groupSelector = null; + this._currentTransform = null; + // reset the target information about which corner is selected + target && (target.__corner = 0); + if (shouldRender) { + this.requestRenderAll(); + } + else if (!isClick) { + this.renderTop(); + } + }, - this.undoData.objectId = id; - this.undoData.props = graphics.getObjectProperties(id, ['left', 'top']); + /** + * @private + * Handle event firing for target and subtargets + * @param {Event} e event from mouse + * @param {String} eventType event to fire (up, down or move) + * @return {Fabric.Object} target return the the target found, for internal reasons. + */ + _simpleEventHandler: function(eventType, e) { + var target = this.findTarget(e), + targets = this.targets, + options = { + e: e, + target: target, + subTargets: targets, + }; + this.fire(eventType, options); + target && target.fire(eventType, options); + if (!targets) { + return target; + } + for (var i = 0; i < targets.length; i++) { + targets[i].fire(eventType, options); + } + return target; + }, - graphics.setObjectPosition(id, posInfo); - graphics.renderAll(); + /** + * @private + * Handle event firing for target and subtargets + * @param {Event} e event from mouse + * @param {String} eventType event to fire (up, down or move) + * @param {fabric.Object} targetObj receiving event + * @param {Number} [button] button used in the event 1 = left, 2 = middle, 3 = right + * @param {Boolean} isClick for left button only, indicates that the mouse up happened without move. + */ + _handleEvent: function(e, eventType, button, isClick) { + var target = this._target, + targets = this.targets || [], + options = { + e: e, + target: target, + subTargets: targets, + button: button || LEFT_CLICK, + isClick: isClick || false, + pointer: this._pointer, + absolutePointer: this._absolutePointer, + transform: this._currentTransform + }; + if (eventType === 'up') { + options.currentTarget = this.findTarget(e); + options.currentSubTargets = this.targets; + } + this.fire('mouse:' + eventType, options); + target && target.fire('mouse' + eventType, options); + for (var i = 0; i < targets.length; i++) { + targets[i].fire('mouse' + eventType, options); + } + }, - return _util.Promise.resolve(); - }, + /** + * @private + * @param {Event} e send the mouse event that generate the finalize down, so it can be used in the event + */ + _finalizeCurrentTransform: function(e) { + var transform = this._currentTransform, + target = transform.target, + eventName, + options = { + e: e, + target: target, + transform: transform, + action: transform.action, + }; - /** - * @param {Graphics} graphics - Graphics instance - * @returns {Promise} - */ - undo: function undo(graphics) { - var _undoData = this.undoData, - objectId = _undoData.objectId, - props = _undoData.props; + if (target._scaling) { + target._scaling = false; + } + target.setCoords(); - graphics.setObjectProperties(objectId, props); - graphics.renderAll(); + if (transform.actionPerformed || (this.stateful && target.hasStateChanged())) { + if (transform.actionPerformed) { + // this is not friendly to the new control api. + // is deprecated. + eventName = this._addEventOptions(options, transform); + this._fire(eventName, options); + } + this._fire('modified', options); + } + }, - return _util.Promise.resolve(); - } -}; /** - * @author NHN. FE Development Team - * @fileoverview Set object properties - */ + /** + * Mutate option object in order to add by property and give back the event name. + * @private + * @deprecated since 4.2.0 + * @param {Object} options to mutate + * @param {Object} transform to inspect action from + */ + _addEventOptions: function(options, transform) { + // we can probably add more details at low cost + // scale change, rotation changes, translation changes + var eventName, by; + switch (transform.action) { + case 'scaleX': + eventName = 'scaled'; + by = 'x'; + break; + case 'scaleY': + eventName = 'scaled'; + by = 'y'; + break; + case 'skewX': + eventName = 'skewed'; + by = 'x'; + break; + case 'skewY': + eventName = 'skewed'; + by = 'y'; + break; + case 'scale': + eventName = 'scaled'; + by = 'equally'; + break; + case 'rotate': + eventName = 'rotated'; + break; + case 'drag': + eventName = 'moved'; + break; + } + options.by = by; + return eventName; + }, + /** + * @private + * @param {Event} e Event object fired on mousedown + */ + _onMouseDownInDrawingMode: function(e) { + this._isCurrentlyDrawing = true; + if (this.getActiveObject()) { + this.discardActiveObject(e).requestRenderAll(); + } + var pointer = this.getPointer(e); + this.freeDrawingBrush.onMouseDown(pointer, { e: e, pointer: pointer }); + this._handleEvent(e, 'down'); + }, -_command2.default.register(command); + /** + * @private + * @param {Event} e Event object fired on mousemove + */ + _onMouseMoveInDrawingMode: function(e) { + if (this._isCurrentlyDrawing) { + var pointer = this.getPointer(e); + this.freeDrawingBrush.onMouseMove(pointer, { e: e, pointer: pointer }); + } + this.setCursor(this.freeDrawingCursor); + this._handleEvent(e, 'move'); + }, -exports.default = command; + /** + * @private + * @param {Event} e Event object fired on mouseup + */ + _onMouseUpInDrawingMode: function(e) { + var pointer = this.getPointer(e); + this._isCurrentlyDrawing = this.freeDrawingBrush.onMouseUp({ e: e, pointer: pointer }); + this._handleEvent(e, 'up'); + }, -/***/ }), + /** + * Method that defines the actions when mouse is clicked on canvas. + * The method inits the currentTransform parameters and renders all the + * canvas so the current image can be placed on the top canvas and the rest + * in on the container one. + * @private + * @param {Event} e Event object fired on mousedown + */ + __onMouseDown: function (e) { + this._cacheTransformEventData(e); + this._handleEvent(e, 'down:before'); + var target = this._target; + // if right click just fire events + if (checkClick(e, RIGHT_CLICK)) { + if (this.fireRightClick) { + this._handleEvent(e, 'down', RIGHT_CLICK); + } + return; + } -/***/ "./src/js/command/setObjectProperties.js": -/*!***********************************************!*\ - !*** ./src/js/command/setObjectProperties.js ***! - \***********************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + if (checkClick(e, MIDDLE_CLICK)) { + if (this.fireMiddleClick) { + this._handleEvent(e, 'down', MIDDLE_CLICK); + } + return; + } -"use strict"; + if (this.isDrawingMode) { + this._onMouseDownInDrawingMode(e); + return; + } + if (!this._isMainEvent(e)) { + return; + } -Object.defineProperty(exports, "__esModule", { - value: true -}); + // ignore if some object is being transformed at this moment + if (this._currentTransform) { + return; + } -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); + var pointer = this._pointer; + // save pointer for check in __onMouseUp event + this._previousPointer = pointer; + var shouldRender = this._shouldRender(target), + shouldGroup = this._shouldGroup(e, target); + if (this._shouldClearSelection(e, target)) { + this.discardActiveObject(e); + } + else if (shouldGroup) { + this._handleGrouping(e, target); + target = this._activeObject; + } -var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); + if (this.selection && (!target || + (!target.selectable && !target.isEditing && target !== this._activeObject))) { + this._groupSelector = { + ex: this._absolutePointer.x, + ey: this._absolutePointer.y, + top: 0, + left: 0 + }; + } -var _command = __webpack_require__(/*! @/factory/command */ "./src/js/factory/command.js"); + if (target) { + var alreadySelected = target === this._activeObject; + if (target.selectable && target.activeOn === 'down') { + this.setActiveObject(target, e); + } + var corner = target._findTargetCorner( + this.getPointer(e, true), + fabric.util.isTouchEvent(e) + ); + target.__corner = corner; + if (target === this._activeObject && (corner || !shouldGroup)) { + this._setupCurrentTransform(e, target, alreadySelected); + var control = target.controls[corner], + pointer = this.getPointer(e), + mouseDownHandler = control && control.getMouseDownHandler(e, target, control); + if (mouseDownHandler) { + mouseDownHandler(e, this._currentTransform, pointer.x, pointer.y); + } + } + } + this._handleEvent(e, 'down'); + // we must renderAll so that we update the visuals + (shouldRender || shouldGroup) && this.requestRenderAll(); + }, -var _command2 = _interopRequireDefault(_command); + /** + * reset cache form common information needed during event processing + * @private + */ + _resetTransformEventData: function() { + this._target = null; + this._pointer = null; + this._absolutePointer = null; + }, -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + /** + * Cache common information needed during event processing + * @private + * @param {Event} e Event object fired on event + */ + _cacheTransformEventData: function(e) { + // reset in order to avoid stale caching + this._resetTransformEventData(); + this._pointer = this.getPointer(e, true); + this._absolutePointer = this.restorePointerVpt(this._pointer); + this._target = this._currentTransform ? this._currentTransform.target : this.findTarget(e) || null; + }, -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + /** + * @private + */ + _beforeTransform: function(e) { + var t = this._currentTransform; + this.stateful && t.target.saveState(); + this.fire('before:transform', { + e: e, + transform: t, + }); + }, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Method that defines the actions when mouse is hovering the canvas. + * The currentTransform parameter will define whether the user is rotating/scaling/translating + * an image or neither of them (only hovering). A group selection is also possible and would cancel + * all any other type of action. + * In case of an image transformation only the top canvas will be rendered. + * @private + * @param {Event} e Event object fired on mousemove + */ + __onMouseMove: function (e) { + this._handleEvent(e, 'move:before'); + this._cacheTransformEventData(e); + var target, pointer; -/** - * @author NHN. FE Development Team - * @fileoverview Set object properties - */ -var command = { - name: _consts.commandNames.SET_OBJECT_PROPERTIES, + if (this.isDrawingMode) { + this._onMouseMoveInDrawingMode(e); + return; + } - /** - * Set object properties - * @param {Graphics} graphics - Graphics instance - * @param {number} id - object id - * @param {Object} props - properties - * @param {string} [props.fill] Color - * @param {string} [props.fontFamily] Font type for text - * @param {number} [props.fontSize] Size - * @param {string} [props.fontStyle] Type of inclination (normal / italic) - * @param {string} [props.fontWeight] Type of thicker or thinner looking (normal / bold) - * @param {string} [props.textAlign] Type of text align (left / center / right) - * @param {string} [props.textDecoration] Type of line (underline / line-through / overline) - * @returns {Promise} - */ - execute: function execute(graphics, id, props) { - var _this = this; + if (!this._isMainEvent(e)) { + return; + } - var targetObj = graphics.getObject(id); + var groupSelector = this._groupSelector; - if (!targetObj) { - return _util.Promise.reject(_consts.rejectMessages.noObject); - } + // We initially clicked in an empty area, so we draw a box for multiple selection + if (groupSelector) { + pointer = this._absolutePointer; - this.undoData.props = {}; - _tuiCodeSnippet2.default.forEachOwnProperties(props, function (value, key) { - _this.undoData.props[key] = targetObj[key]; - }); + groupSelector.left = pointer.x - groupSelector.ex; + groupSelector.top = pointer.y - groupSelector.ey; - graphics.setObjectProperties(id, props); + this.renderTop(); + } + else if (!this._currentTransform) { + target = this.findTarget(e) || null; + this._setCursorFromEvent(e, target); + this._fireOverOutEvents(target, e); + } + else { + this._transformObject(e); + } + this._handleEvent(e, 'move'); + this._resetTransformEventData(); + }, - return _util.Promise.resolve(); - }, + /** + * Manage the mouseout, mouseover events for the fabric object on the canvas + * @param {Fabric.Object} target the target where the target from the mousemove event + * @param {Event} e Event object fired on mousemove + * @private + */ + _fireOverOutEvents: function(target, e) { + var _hoveredTarget = this._hoveredTarget, + _hoveredTargets = this._hoveredTargets, targets = this.targets, + length = Math.max(_hoveredTargets.length, targets.length); + this.fireSyntheticInOutEvents(target, e, { + oldTarget: _hoveredTarget, + evtOut: 'mouseout', + canvasEvtOut: 'mouse:out', + evtIn: 'mouseover', + canvasEvtIn: 'mouse:over', + }); + for (var i = 0; i < length; i++){ + this.fireSyntheticInOutEvents(targets[i], e, { + oldTarget: _hoveredTargets[i], + evtOut: 'mouseout', + evtIn: 'mouseover', + }); + } + this._hoveredTarget = target; + this._hoveredTargets = this.targets.concat(); + }, - /** - * @param {Graphics} graphics - Graphics instance - * @param {number} id - object id - * @returns {Promise} - */ - undo: function undo(graphics, id) { - var props = this.undoData.props; - - - graphics.setObjectProperties(id, props); - - return _util.Promise.resolve(); - } -}; - -_command2.default.register(command); - -exports.default = command; - -/***/ }), - -/***/ "./src/js/component/cropper.js": -/*!*************************************!*\ - !*** ./src/js/component/cropper.js ***! - \*************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - - -Object.defineProperty(exports, "__esModule", { - value: true -}); - -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); - -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); - -var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); - -var _fabric = __webpack_require__(/*! fabric */ "fabric"); + /** + * Manage the dragEnter, dragLeave events for the fabric objects on the canvas + * @param {Fabric.Object} target the target where the target from the onDrag event + * @param {Event} e Event object fired on ondrag + * @private + */ + _fireEnterLeaveEvents: function(target, e) { + var _draggedoverTarget = this._draggedoverTarget, + _hoveredTargets = this._hoveredTargets, targets = this.targets, + length = Math.max(_hoveredTargets.length, targets.length); -var _fabric2 = _interopRequireDefault(_fabric); + this.fireSyntheticInOutEvents(target, e, { + oldTarget: _draggedoverTarget, + evtOut: 'dragleave', + evtIn: 'dragenter', + }); + for (var i = 0; i < length; i++) { + this.fireSyntheticInOutEvents(targets[i], e, { + oldTarget: _hoveredTargets[i], + evtOut: 'dragleave', + evtIn: 'dragenter', + }); + } + this._draggedoverTarget = target; + }, -var _component = __webpack_require__(/*! @/interface/component */ "./src/js/interface/component.js"); + /** + * Manage the synthetic in/out events for the fabric objects on the canvas + * @param {Fabric.Object} target the target where the target from the supported events + * @param {Event} e Event object fired + * @param {Object} config configuration for the function to work + * @param {String} config.targetName property on the canvas where the old target is stored + * @param {String} [config.canvasEvtOut] name of the event to fire at canvas level for out + * @param {String} config.evtOut name of the event to fire for out + * @param {String} [config.canvasEvtIn] name of the event to fire at canvas level for in + * @param {String} config.evtIn name of the event to fire for in + * @private + */ + fireSyntheticInOutEvents: function(target, e, config) { + var inOpt, outOpt, oldTarget = config.oldTarget, outFires, inFires, + targetChanged = oldTarget !== target, canvasEvtIn = config.canvasEvtIn, canvasEvtOut = config.canvasEvtOut; + if (targetChanged) { + inOpt = { e: e, target: target, previousTarget: oldTarget }; + outOpt = { e: e, target: oldTarget, nextTarget: target }; + } + inFires = target && targetChanged; + outFires = oldTarget && targetChanged; + if (outFires) { + canvasEvtOut && this.fire(canvasEvtOut, outOpt); + oldTarget.fire(config.evtOut, outOpt); + } + if (inFires) { + canvasEvtIn && this.fire(canvasEvtIn, inOpt); + target.fire(config.evtIn, inOpt); + } + }, -var _component2 = _interopRequireDefault(_component); + /** + * Method that defines actions when an Event Mouse Wheel + * @param {Event} e Event object fired on mouseup + */ + __onMouseWheel: function(e) { + this._cacheTransformEventData(e); + this._handleEvent(e, 'wheel'); + this._resetTransformEventData(); + }, -var _cropzone = __webpack_require__(/*! @/extension/cropzone */ "./src/js/extension/cropzone.js"); + /** + * @private + * @param {Event} e Event fired on mousemove + */ + _transformObject: function(e) { + var pointer = this.getPointer(e), + transform = this._currentTransform; -var _cropzone2 = _interopRequireDefault(_cropzone); + transform.reset = false; + transform.shiftKey = e.shiftKey; + transform.altKey = e[this.centeredKey]; -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + this._performTransformAction(e, transform, pointer); + transform.actionPerformed && this.requestRenderAll(); + }, -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + /** + * @private + */ + _performTransformAction: function(e, transform, pointer) { + var x = pointer.x, + y = pointer.y, + action = transform.action, + actionPerformed = false, + actionHandler = transform.actionHandler; + // this object could be created from the function in the control handlers -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + if (actionHandler) { + actionPerformed = actionHandler(e, transform, x, y); + } + if (action === 'drag' && actionPerformed) { + transform.target.isMoving = true; + this.setCursor(transform.target.moveCursor || this.moveCursor); + } + transform.actionPerformed = transform.actionPerformed || actionPerformed; + }, -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + /** + * @private + */ + _fire: fabric.controlsUtils.fireEvent, -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** - * @author NHN. FE Development Team - * @fileoverview Image crop module (start cropping, end cropping) - */ + /** + * Sets the cursor depending on where the canvas is being hovered. + * Note: very buggy in Opera + * @param {Event} e Event object + * @param {Object} target Object that the mouse is hovering, if so. + */ + _setCursorFromEvent: function (e, target) { + if (!target) { + this.setCursor(this.defaultCursor); + return false; + } + var hoverCursor = target.hoverCursor || this.hoverCursor, + activeSelection = this._activeObject && this._activeObject.type === 'activeSelection' ? + this._activeObject : null, + // only show proper corner when group selection is not active + corner = (!activeSelection || !activeSelection.contains(target)) + // here we call findTargetCorner always with undefined for the touch parameter. + // we assume that if you are using a cursor you do not need to interact with + // the bigger touch area. + && target._findTargetCorner(this.getPointer(e, true)); + + if (!corner) { + if (target.subTargetCheck){ + // hoverCursor should come from top-most subTarget, + // so we walk the array backwards + this.targets.concat().reverse().map(function(_target){ + hoverCursor = _target.hoverCursor || hoverCursor; + }); + } + this.setCursor(hoverCursor); + } + else { + this.setCursor(this.getCornerCursor(corner, target, e)); + } + }, + /** + * @private + */ + getCornerCursor: function(corner, target, e) { + var control = target.controls[corner]; + return control.cursorStyleHandler(e, control, target); + } + }); +})(); -var MOUSE_MOVE_THRESHOLD = 10; -var DEFAULT_OPTION = { - presetRatio: null, - top: -10, - left: -10, - height: 1, - width: 1 -}; -/** - * Cropper components - * @param {Graphics} graphics - Graphics instance - * @extends {Component} - * @class Cropper - * @ignore - */ +(function() { -var Cropper = function (_Component) { - _inherits(Cropper, _Component); + var min = Math.min, + max = Math.max; - function Cropper(graphics) { - _classCallCheck(this, Cropper); + fabric.util.object.extend(fabric.Canvas.prototype, /** @lends fabric.Canvas.prototype */ { /** - * Cropzone - * @type {Cropzone} * @private + * @param {Event} e Event object + * @param {fabric.Object} target + * @return {Boolean} */ - var _this = _possibleConstructorReturn(this, (Cropper.__proto__ || Object.getPrototypeOf(Cropper)).call(this, _consts.componentNames.CROPPER, graphics)); - - _this._cropzone = null; + _shouldGroup: function(e, target) { + var activeObject = this._activeObject; + return activeObject && this._isSelectionKeyPressed(e) && target && target.selectable && this.selection && + (activeObject !== target || activeObject.type === 'activeSelection') && !target.onSelect({ e: e }); + }, /** - * StartX of Cropzone - * @type {number} * @private + * @param {Event} e Event object + * @param {fabric.Object} target */ - _this._startX = null; + _handleGrouping: function (e, target) { + var activeObject = this._activeObject; + // avoid multi select when shift click on a corner + if (activeObject.__corner) { + return; + } + if (target === activeObject) { + // if it's a group, find target again, using activeGroup objects + target = this.findTarget(e, true); + // if even object is not found or we are on activeObjectCorner, bail out + if (!target || !target.selectable) { + return; + } + } + if (activeObject && activeObject.type === 'activeSelection') { + this._updateActiveSelection(target, e); + } + else { + this._createActiveSelection(target, e); + } + }, /** - * StartY of Cropzone - * @type {number} * @private */ - _this._startY = null; + _updateActiveSelection: function(target, e) { + var activeSelection = this._activeObject, + currentActiveObjects = activeSelection._objects.slice(0); + if (activeSelection.contains(target)) { + activeSelection.removeWithUpdate(target); + this._hoveredTarget = target; + this._hoveredTargets = this.targets.concat(); + if (activeSelection.size() === 1) { + // activate last remaining object + this._setActiveObject(activeSelection.item(0), e); + } + } + else { + activeSelection.addWithUpdate(target); + this._hoveredTarget = activeSelection; + this._hoveredTargets = this.targets.concat(); + } + this._fireSelectionEvents(currentActiveObjects, e); + }, /** - * State whether shortcut key is pressed or not - * @type {boolean} * @private */ - _this._withShiftKey = false; + _createActiveSelection: function(target, e) { + var currentActives = this.getActiveObjects(), group = this._createGroup(target); + this._hoveredTarget = group; + // ISSUE 4115: should we consider subTargets here? + // this._hoveredTargets = []; + // this._hoveredTargets = this.targets.concat(); + this._setActiveObject(group, e); + this._fireSelectionEvents(currentActives, e); + }, /** - * Listeners - * @type {object.} * @private + * @param {Object} target */ - _this._listeners = { - keydown: _this._onKeyDown.bind(_this), - keyup: _this._onKeyUp.bind(_this), - mousedown: _this._onFabricMouseDown.bind(_this), - mousemove: _this._onFabricMouseMove.bind(_this), - mouseup: _this._onFabricMouseUp.bind(_this) - }; - return _this; - } - - /** - * Start cropping - */ - - - _createClass(Cropper, [{ - key: 'start', - value: function start() { - if (this._cropzone) { - return; - } - var canvas = this.getCanvas(); - - canvas.forEachObject(function (obj) { - // {@link http://fabricjs.com/docs/fabric.Object.html#evented} - obj.evented = false; + _createGroup: function(target) { + var objects = this._objects, + isActiveLower = objects.indexOf(this._activeObject) < objects.indexOf(target), + groupObjects = isActiveLower + ? [this._activeObject, target] + : [target, this._activeObject]; + this._activeObject.isEditing && this._activeObject.exitEditing(); + return new fabric.ActiveSelection(groupObjects, { + canvas: this }); + }, - this._cropzone = new _cropzone2.default(canvas, _tuiCodeSnippet2.default.extend({ - left: 0, - top: 0, - width: 0.5, - height: 0.5, - strokeWidth: 0, // {@link https://github.com/kangax/fabric.js/issues/2860} - cornerSize: 10, - cornerColor: 'black', - fill: 'transparent' - }, _consts.CROPZONE_DEFAULT_OPTIONS, this.graphics.cropSelectionStyle)); + /** + * @private + * @param {Event} e mouse event + */ + _groupSelectedObjects: function (e) { - canvas.discardActiveObject(); - canvas.add(this._cropzone); - canvas.on('mouse:down', this._listeners.mousedown); - canvas.selection = false; - canvas.defaultCursor = 'crosshair'; + var group = this._collectObjects(e), + aGroup; - _fabric2.default.util.addListener(document, 'keydown', this._listeners.keydown); - _fabric2.default.util.addListener(document, 'keyup', this._listeners.keyup); - } + // do not create group for 1 element only + if (group.length === 1) { + this.setActiveObject(group[0], e); + } + else if (group.length > 1) { + aGroup = new fabric.ActiveSelection(group.reverse(), { + canvas: this + }); + this.setActiveObject(aGroup, e); + } + }, /** - * End cropping + * @private */ + _collectObjects: function(e) { + var group = [], + currentObject, + x1 = this._groupSelector.ex, + y1 = this._groupSelector.ey, + x2 = x1 + this._groupSelector.left, + y2 = y1 + this._groupSelector.top, + selectionX1Y1 = new fabric.Point(min(x1, x2), min(y1, y2)), + selectionX2Y2 = new fabric.Point(max(x1, x2), max(y1, y2)), + allowIntersect = !this.selectionFullyContained, + isClick = x1 === x2 && y1 === y2; + // we iterate reverse order to collect top first in case of click. + for (var i = this._objects.length; i--; ) { + currentObject = this._objects[i]; - }, { - key: 'end', - value: function end() { - var canvas = this.getCanvas(); - var cropzone = this._cropzone; + if (!currentObject || !currentObject.selectable || !currentObject.visible) { + continue; + } - if (!cropzone) { - return; + if ((allowIntersect && currentObject.intersectsWithRect(selectionX1Y1, selectionX2Y2, true)) || + currentObject.isContainedWithinRect(selectionX1Y1, selectionX2Y2, true) || + (allowIntersect && currentObject.containsPoint(selectionX1Y1, null, true)) || + (allowIntersect && currentObject.containsPoint(selectionX2Y2, null, true)) + ) { + group.push(currentObject); + // only add one object if it's a click + if (isClick) { + break; + } + } } - canvas.remove(cropzone); - canvas.selection = true; - canvas.defaultCursor = 'default'; - canvas.off('mouse:down', this._listeners.mousedown); - canvas.forEachObject(function (obj) { - obj.evented = true; - }); - this._cropzone = null; + if (group.length > 1) { + group = group.filter(function(object) { + return !object.onSelect({ e: e }); + }); + } - _fabric2.default.util.removeListener(document, 'keydown', this._listeners.keydown); - _fabric2.default.util.removeListener(document, 'keyup', this._listeners.keyup); - } + return group; + }, /** - * Change cropzone visible - * @param {boolean} visible - cropzone visible state + * @private */ - - }, { - key: 'changeVisibility', - value: function changeVisibility(visible) { - if (this._cropzone) { - this._cropzone.set({ visible: visible }); + _maybeGroupObjects: function(e) { + if (this.selection && this._groupSelector) { + this._groupSelectedObjects(e); } + this.setCursor(this.defaultCursor); + // clear selection and current transformation + this._groupSelector = null; } + }); - /** - * onMousedown handler in fabric canvas - * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event - * @private +})(); + + +(function () { + fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { + + /** + * Exports canvas element to a dataurl image. Note that when multiplier is used, cropping is scaled appropriately + * @param {Object} [options] Options object + * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png" + * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg. + * @param {Number} [options.multiplier=1] Multiplier to scale by, to have consistent + * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 + * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 + * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 + * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 + * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 2.0.0 + * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format + * @see {@link http://jsfiddle.net/fabricjs/NfZVb/|jsFiddle demo} + * @example Generate jpeg dataURL with lower quality + * var dataURL = canvas.toDataURL({ + * format: 'jpeg', + * quality: 0.8 + * }); + * @example Generate cropped png dataURL (clipping of canvas) + * var dataURL = canvas.toDataURL({ + * format: 'png', + * left: 100, + * top: 100, + * width: 200, + * height: 200 + * }); + * @example Generate double scaled png dataURL + * var dataURL = canvas.toDataURL({ + * format: 'png', + * multiplier: 2 + * }); */ + toDataURL: function (options) { + options || (options = { }); - }, { - key: '_onFabricMouseDown', - value: function _onFabricMouseDown(fEvent) { - var canvas = this.getCanvas(); + var format = options.format || 'png', + quality = options.quality || 1, + multiplier = (options.multiplier || 1) * (options.enableRetinaScaling ? this.getRetinaScaling() : 1), + canvasEl = this.toCanvasElement(multiplier, options); + return fabric.util.toDataURL(canvasEl, format, quality); + }, - if (fEvent.target) { - return; - } + /** + * Create a new HTMLCanvas element painted with the current canvas content. + * No need to resize the actual one or repaint it. + * Will transfer object ownership to a new canvas, paint it, and set everything back. + * This is an intermediary step used to get to a dataUrl but also it is useful to + * create quick image copies of a canvas without passing for the dataUrl string + * @param {Number} [multiplier] a zoom factor. + * @param {Object} [cropping] Cropping informations + * @param {Number} [cropping.left] Cropping left offset. + * @param {Number} [cropping.top] Cropping top offset. + * @param {Number} [cropping.width] Cropping width. + * @param {Number} [cropping.height] Cropping height. + */ + toCanvasElement: function(multiplier, cropping) { + multiplier = multiplier || 1; + cropping = cropping || { }; + var scaledWidth = (cropping.width || this.width) * multiplier, + scaledHeight = (cropping.height || this.height) * multiplier, + zoom = this.getZoom(), + originalWidth = this.width, + originalHeight = this.height, + newZoom = zoom * multiplier, + vp = this.viewportTransform, + translateX = (vp[4] - (cropping.left || 0)) * multiplier, + translateY = (vp[5] - (cropping.top || 0)) * multiplier, + originalInteractive = this.interactive, + newVp = [newZoom, 0, 0, newZoom, translateX, translateY], + originalRetina = this.enableRetinaScaling, + canvasEl = fabric.util.createCanvasElement(), + originalContextTop = this.contextTop; + canvasEl.width = scaledWidth; + canvasEl.height = scaledHeight; + this.contextTop = null; + this.enableRetinaScaling = false; + this.interactive = false; + this.viewportTransform = newVp; + this.width = scaledWidth; + this.height = scaledHeight; + this.calcViewportBoundaries(); + this.renderCanvas(canvasEl.getContext('2d'), this._objects); + this.viewportTransform = vp; + this.width = originalWidth; + this.height = originalHeight; + this.calcViewportBoundaries(); + this.interactive = originalInteractive; + this.enableRetinaScaling = originalRetina; + this.contextTop = originalContextTop; + return canvasEl; + }, + }); - canvas.selection = false; - var coord = canvas.getPointer(fEvent.e); +})(); - this._startX = coord.x; - this._startY = coord.y; - canvas.on({ - 'mouse:move': this._listeners.mousemove, - 'mouse:up': this._listeners.mouseup - }); +fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { + /** + * Populates canvas with data from the specified JSON. + * JSON format must conform to the one of {@link fabric.Canvas#toJSON} + * @param {String|Object} json JSON string or object + * @param {Function} callback Callback, invoked when json is parsed + * and corresponding objects (e.g: {@link fabric.Image}) + * are initialized + * @param {Function} [reviver] Method for further parsing of JSON elements, called after each fabric object created. + * @return {fabric.Canvas} instance + * @chainable + * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#deserialization} + * @see {@link http://jsfiddle.net/fabricjs/fmgXt/|jsFiddle demo} + * @example loadFromJSON + * canvas.loadFromJSON(json, canvas.renderAll.bind(canvas)); + * @example loadFromJSON with reviver + * canvas.loadFromJSON(json, canvas.renderAll.bind(canvas), function(o, object) { + * // `o` = json object + * // `object` = fabric.Object instance + * // ... do some stuff ... + * }); + */ + loadFromJSON: function (json, callback, reviver) { + if (!json) { + return; } - /** - * onMousemove handler in fabric canvas - * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event - * @private - */ - - }, { - key: '_onFabricMouseMove', - value: function _onFabricMouseMove(fEvent) { - var canvas = this.getCanvas(); - var pointer = canvas.getPointer(fEvent.e); - var x = pointer.x, - y = pointer.y; + // serialize if it wasn't already + var serialized = (typeof json === 'string') + ? JSON.parse(json) + : fabric.util.object.clone(json); - var cropzone = this._cropzone; + var _this = this, + clipPath = serialized.clipPath, + renderOnAddRemove = this.renderOnAddRemove; - if (Math.abs(x - this._startX) + Math.abs(y - this._startY) > MOUSE_MOVE_THRESHOLD) { - canvas.remove(cropzone); - cropzone.set(this._calcRectDimensionFromPoint(x, y)); + this.renderOnAddRemove = false; - canvas.add(cropzone); - canvas.setActiveObject(cropzone); - } - } + delete serialized.clipPath; - /** - * Get rect dimension setting from Canvas-Mouse-Position(x, y) - * @param {number} x - Canvas-Mouse-Position x - * @param {number} y - Canvas-Mouse-Position Y - * @returns {{left: number, top: number, width: number, height: number}} - * @private - */ + this._enlivenObjects(serialized.objects, function (enlivenedObjects) { + _this.clear(); + _this._setBgOverlay(serialized, function () { + if (clipPath) { + _this._enlivenObjects([clipPath], function (enlivenedCanvasClip) { + _this.clipPath = enlivenedCanvasClip[0]; + _this.__setupCanvas.call(_this, serialized, enlivenedObjects, renderOnAddRemove, callback); + }); + } + else { + _this.__setupCanvas.call(_this, serialized, enlivenedObjects, renderOnAddRemove, callback); + } + }); + }, reviver); + return this; + }, - }, { - key: '_calcRectDimensionFromPoint', - value: function _calcRectDimensionFromPoint(x, y) { - var canvas = this.getCanvas(); - var canvasWidth = canvas.getWidth(); - var canvasHeight = canvas.getHeight(); - var startX = this._startX; - var startY = this._startY; - var left = (0, _util.clamp)(x, 0, startX); - var top = (0, _util.clamp)(y, 0, startY); - var width = (0, _util.clamp)(x, startX, canvasWidth) - left; // (startX <= x(mouse) <= canvasWidth) - left - var height = (0, _util.clamp)(y, startY, canvasHeight) - top; // (startY <= y(mouse) <= canvasHeight) - top + /** + * @private + * @param {Object} serialized Object with background and overlay information + * @param {Array} restored canvas objects + * @param {Function} cached renderOnAddRemove callback + * @param {Function} callback Invoked after all background and overlay images/patterns loaded + */ + __setupCanvas: function(serialized, enlivenedObjects, renderOnAddRemove, callback) { + var _this = this; + enlivenedObjects.forEach(function(obj, index) { + // we splice the array just in case some custom classes restored from JSON + // will add more object to canvas at canvas init. + _this.insertAt(obj, index); + }); + this.renderOnAddRemove = renderOnAddRemove; + // remove parts i cannot set as options + delete serialized.objects; + delete serialized.backgroundImage; + delete serialized.overlayImage; + delete serialized.background; + delete serialized.overlay; + // this._initOptions does too many things to just + // call it. Normally loading an Object from JSON + // create the Object instance. Here the Canvas is + // already an instance and we are just loading things over it + this._setOptions(serialized); + this.renderAll(); + callback && callback(); + }, - if (this._withShiftKey) { - // make fixed ratio cropzone - if (width > height) { - height = width; - } else if (height > width) { - width = height; - } + /** + * @private + * @param {Object} serialized Object with background and overlay information + * @param {Function} callback Invoked after all background and overlay images/patterns loaded + */ + _setBgOverlay: function(serialized, callback) { + var loaded = { + backgroundColor: false, + overlayColor: false, + backgroundImage: false, + overlayImage: false + }; - if (startX >= x) { - left = startX - width; - } + if (!serialized.backgroundImage && !serialized.overlayImage && !serialized.background && !serialized.overlay) { + callback && callback(); + return; + } - if (startY >= y) { - top = startY - height; - } + var cbIfLoaded = function () { + if (loaded.backgroundImage && loaded.overlayImage && loaded.backgroundColor && loaded.overlayColor) { + callback && callback(); } + }; - return { - left: left, - top: top, - width: width, - height: height - }; - } + this.__setBgOverlay('backgroundImage', serialized.backgroundImage, loaded, cbIfLoaded); + this.__setBgOverlay('overlayImage', serialized.overlayImage, loaded, cbIfLoaded); + this.__setBgOverlay('backgroundColor', serialized.background, loaded, cbIfLoaded); + this.__setBgOverlay('overlayColor', serialized.overlay, loaded, cbIfLoaded); + }, - /** - * onMouseup handler in fabric canvas - * @private - */ + /** + * @private + * @param {String} property Property to set (backgroundImage, overlayImage, backgroundColor, overlayColor) + * @param {(Object|String)} value Value to set + * @param {Object} loaded Set loaded property to true if property is set + * @param {Object} callback Callback function to invoke after property is set + */ + __setBgOverlay: function(property, value, loaded, callback) { + var _this = this; - }, { - key: '_onFabricMouseUp', - value: function _onFabricMouseUp() { - var cropzone = this._cropzone; - var listeners = this._listeners; - var canvas = this.getCanvas(); + if (!value) { + loaded[property] = true; + callback && callback(); + return; + } - canvas.setActiveObject(cropzone); - canvas.off({ - 'mouse:move': listeners.mousemove, - 'mouse:up': listeners.mouseup + if (property === 'backgroundImage' || property === 'overlayImage') { + fabric.util.enlivenObjects([value], function(enlivedObject){ + _this[property] = enlivedObject[0]; + loaded[property] = true; + callback && callback(); }); } + else { + this['set' + fabric.util.string.capitalize(property, true)](value, function() { + loaded[property] = true; + callback && callback(); + }); + } + }, - /** - * Get cropped image data - * @param {Object} cropRect cropzone rect - * @param {Number} cropRect.left left position - * @param {Number} cropRect.top top position - * @param {Number} cropRect.width width - * @param {Number} cropRect.height height - * @returns {?{imageName: string, url: string}} cropped Image data - */ - - }, { - key: 'getCroppedImageData', - value: function getCroppedImageData(cropRect) { - var canvas = this.getCanvas(); - var containsCropzone = canvas.contains(this._cropzone); - if (!cropRect) { - return null; - } - - if (containsCropzone) { - canvas.remove(this._cropzone); - } + /** + * @private + * @param {Array} objects + * @param {Function} callback + * @param {Function} [reviver] + */ + _enlivenObjects: function (objects, callback, reviver) { + if (!objects || objects.length === 0) { + callback && callback([]); + return; + } - var imageData = { - imageName: this.getImageName(), - url: canvas.toDataURL(cropRect) - }; + fabric.util.enlivenObjects(objects, function(enlivenedObjects) { + callback && callback(enlivenedObjects); + }, null, reviver); + }, - if (containsCropzone) { - canvas.add(this._cropzone); - } + /** + * @private + * @param {String} format + * @param {Function} callback + */ + _toDataURL: function (format, callback) { + this.clone(function (clone) { + callback(clone.toDataURL(format)); + }); + }, - return imageData; - } + /** + * @private + * @param {String} format + * @param {Number} multiplier + * @param {Function} callback + */ + _toDataURLWithMultiplier: function (format, multiplier, callback) { + this.clone(function (clone) { + callback(clone.toDataURLWithMultiplier(format, multiplier)); + }); + }, - /** - * Get cropped rect - * @returns {Object} rect - */ + /** + * Clones canvas instance + * @param {Object} [callback] Receives cloned instance as a first argument + * @param {Array} [properties] Array of properties to include in the cloned canvas and children + */ + clone: function (callback, properties) { + var data = JSON.stringify(this.toJSON(properties)); + this.cloneWithoutData(function(clone) { + clone.loadFromJSON(data, function() { + callback && callback(clone); + }); + }); + }, - }, { - key: 'getCropzoneRect', - value: function getCropzoneRect() { - var cropzone = this._cropzone; + /** + * Clones canvas instance without cloning existing data. + * This essentially copies canvas dimensions, clipping properties, etc. + * but leaves data empty (so that you can populate it with your own) + * @param {Object} [callback] Receives cloned instance as a first argument + */ + cloneWithoutData: function(callback) { + var el = fabric.util.createCanvasElement(); - if (!cropzone.isValid()) { - return null; - } + el.width = this.width; + el.height = this.height; - return { - left: cropzone.left, - top: cropzone.top, - width: cropzone.width, - height: cropzone.height - }; + var clone = new fabric.Canvas(el); + if (this.backgroundImage) { + clone.setBackgroundImage(this.backgroundImage.src, function() { + clone.renderAll(); + callback && callback(clone); + }); + clone.backgroundImageOpacity = this.backgroundImageOpacity; + clone.backgroundImageStretch = this.backgroundImageStretch; } + else { + callback && callback(clone); + } + } +}); - /** - * Set a cropzone square - * @param {number} [presetRatio] - preset ratio - */ - }, { - key: 'setCropzoneRect', - value: function setCropzoneRect(presetRatio) { - var canvas = this.getCanvas(); - var cropzone = this._cropzone; +(function(global) { - canvas.discardActiveObject(); - canvas.selection = false; - canvas.remove(cropzone); + 'use strict'; - cropzone.set(presetRatio ? this._getPresetPropertiesForCropSize(presetRatio) : DEFAULT_OPTION); + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + clone = fabric.util.object.clone, + toFixed = fabric.util.toFixed, + capitalize = fabric.util.string.capitalize, + degreesToRadians = fabric.util.degreesToRadians, + objectCaching = !fabric.isLikelyNode, + ALIASING_LIMIT = 2; - canvas.add(cropzone); - canvas.selection = true; + if (fabric.Object) { + return; + } - if (presetRatio) { - canvas.setActiveObject(cropzone); - } - } + /** + * Root object class from which all 2d shape classes inherit from + * @class fabric.Object + * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#objects} + * @see {@link fabric.Object#initialize} for constructor definition + * + * @fires added + * @fires removed + * + * @fires selected + * @fires deselected + * @fires modified + * @fires modified + * @fires moved + * @fires scaled + * @fires rotated + * @fires skewed + * + * @fires rotating + * @fires scaling + * @fires moving + * @fires skewing + * + * @fires mousedown + * @fires mouseup + * @fires mouseover + * @fires mouseout + * @fires mousewheel + * @fires mousedblclick + * + * @fires dragover + * @fires dragenter + * @fires dragleave + * @fires drop + */ + fabric.Object = fabric.util.createClass(fabric.CommonMethods, /** @lends fabric.Object.prototype */ { /** - * get a cropzone square info - * @param {number} presetRatio - preset ratio - * @returns {{presetRatio: number, left: number, top: number, width: number, height: number}} - * @private + * Type of an object (rect, circle, path, etc.). + * Note that this property is meant to be read-only and not meant to be modified. + * If you modify, certain parts of Fabric (such as JSON loading) won't work correctly. + * @type String + * @default */ + type: 'object', - }, { - key: '_getPresetPropertiesForCropSize', - value: function _getPresetPropertiesForCropSize(presetRatio) { - var canvas = this.getCanvas(); - var originalWidth = canvas.getWidth(); - var originalHeight = canvas.getHeight(); + /** + * Horizontal origin of transformation of an object (one of "left", "right", "center") + * See http://jsfiddle.net/1ow02gea/244/ on how originX/originY affect objects in groups + * @type String + * @default + */ + originX: 'left', - var standardSize = originalWidth >= originalHeight ? originalWidth : originalHeight; - var getScale = function getScale(value, orignalValue) { - return value > orignalValue ? orignalValue / value : 1; - }; + /** + * Vertical origin of transformation of an object (one of "top", "bottom", "center") + * See http://jsfiddle.net/1ow02gea/244/ on how originX/originY affect objects in groups + * @type String + * @default + */ + originY: 'top', - var width = standardSize * presetRatio; - var height = standardSize; + /** + * Top position of an object. Note that by default it's relative to object top. You can change this by setting originY={top/center/bottom} + * @type Number + * @default + */ + top: 0, - var scaleWidth = getScale(width, originalWidth); + /** + * Left position of an object. Note that by default it's relative to object left. You can change this by setting originX={left/center/right} + * @type Number + * @default + */ + left: 0, - var _snippet$map = _tuiCodeSnippet2.default.map([width, height], function (sizeValue) { - return sizeValue * scaleWidth; - }); + /** + * Object width + * @type Number + * @default + */ + width: 0, - width = _snippet$map[0]; - height = _snippet$map[1]; + /** + * Object height + * @type Number + * @default + */ + height: 0, + /** + * Object scale factor (horizontal) + * @type Number + * @default + */ + scaleX: 1, - var scaleHeight = getScale(height, originalHeight); + /** + * Object scale factor (vertical) + * @type Number + * @default + */ + scaleY: 1, - var _snippet$map2 = _tuiCodeSnippet2.default.map([width, height], function (sizeValue) { - return (0, _util.fixFloatingPoint)(sizeValue * scaleHeight); - }); + /** + * When true, an object is rendered as flipped horizontally + * @type Boolean + * @default + */ + flipX: false, - width = _snippet$map2[0]; - height = _snippet$map2[1]; + /** + * When true, an object is rendered as flipped vertically + * @type Boolean + * @default + */ + flipY: false, + /** + * Opacity of an object + * @type Number + * @default + */ + opacity: 1, - return { - presetRatio: presetRatio, - top: (originalHeight - height) / 2, - left: (originalWidth - width) / 2, - width: width, - height: height - }; - } + /** + * Angle of rotation of an object (in degrees) + * @type Number + * @default + */ + angle: 0, /** - * Keydown event handler - * @param {KeyboardEvent} e - Event object - * @private + * Angle of skew on x axes of an object (in degrees) + * @type Number + * @default */ + skewX: 0, - }, { - key: '_onKeyDown', - value: function _onKeyDown(e) { - if (e.keyCode === _consts.keyCodes.SHIFT) { - this._withShiftKey = true; - } - } + /** + * Angle of skew on y axes of an object (in degrees) + * @type Number + * @default + */ + skewY: 0, /** - * Keyup event handler - * @param {KeyboardEvent} e - Event object - * @private + * Size of object's controlling corners (in pixels) + * @type Number + * @default */ + cornerSize: 13, - }, { - key: '_onKeyUp', - value: function _onKeyUp(e) { - if (e.keyCode === _consts.keyCodes.SHIFT) { - this._withShiftKey = false; - } - } - }]); + /** + * Size of object's controlling corners when touch interaction is detected + * @type Number + * @default + */ + touchCornerSize: 24, - return Cropper; -}(_component2.default); + /** + * When true, object's controlling corners are rendered as transparent inside (i.e. stroke instead of fill) + * @type Boolean + * @default + */ + transparentCorners: true, -exports.default = Cropper; + /** + * Default cursor value used when hovering over this object on canvas + * @type String + * @default + */ + hoverCursor: null, -/***/ }), + /** + * Default cursor value used when moving this object on canvas + * @type String + * @default + */ + moveCursor: null, -/***/ "./src/js/component/filter.js": -/*!************************************!*\ - !*** ./src/js/component/filter.js ***! - \************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Padding between object and its controlling borders (in pixels) + * @type Number + * @default + */ + padding: 0, -"use strict"; + /** + * Color of controlling borders of an object (when it's active) + * @type String + * @default + */ + borderColor: 'rgb(178,204,255)', + /** + * Array specifying dash pattern of an object's borders (hasBorder must be true) + * @since 1.6.2 + * @type Array + */ + borderDashArray: null, -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * Color of controlling corners of an object (when it's active) + * @type String + * @default + */ + cornerColor: 'rgb(178,204,255)', -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); - -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); - -var _fabric = __webpack_require__(/*! fabric */ "fabric"); + /** + * Color of controlling corners of an object (when it's active and transparentCorners false) + * @since 1.6.2 + * @type String + * @default + */ + cornerStrokeColor: null, -var _fabric2 = _interopRequireDefault(_fabric); + /** + * Specify style of control, 'rect' or 'circle' + * @since 1.6.2 + * @type String + */ + cornerStyle: 'rect', -var _component = __webpack_require__(/*! @/interface/component */ "./src/js/interface/component.js"); + /** + * Array specifying dash pattern of an object's control (hasBorder must be true) + * @since 1.6.2 + * @type Array + */ + cornerDashArray: null, -var _component2 = _interopRequireDefault(_component); + /** + * When true, this object will use center point as the origin of transformation + * when being scaled via the controls. + * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). + * @since 1.3.4 + * @type Boolean + * @default + */ + centeredScaling: false, -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + /** + * When true, this object will use center point as the origin of transformation + * when being rotated via the controls. + * Backwards incompatibility note: This property replaces "centerTransform" (Boolean). + * @since 1.3.4 + * @type Boolean + * @default + */ + centeredRotation: true, -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + /** + * Color of object's fill + * takes css colors https://www.w3.org/TR/css-color-3/ + * @type String + * @default + */ + fill: 'rgb(0,0,0)', -var _mask = __webpack_require__(/*! @/extension/mask */ "./src/js/extension/mask.js"); + /** + * Fill rule used to fill an object + * accepted values are nonzero, evenodd + * Backwards incompatibility note: This property was used for setting globalCompositeOperation until v1.4.12 (use `fabric.Object#globalCompositeOperation` instead) + * @type String + * @default + */ + fillRule: 'nonzero', -var _mask2 = _interopRequireDefault(_mask); + /** + * Composite rule used for canvas globalCompositeOperation + * @type String + * @default + */ + globalCompositeOperation: 'source-over', -var _sharpen = __webpack_require__(/*! @/extension/sharpen */ "./src/js/extension/sharpen.js"); + /** + * Background color of an object. + * takes css colors https://www.w3.org/TR/css-color-3/ + * @type String + * @default + */ + backgroundColor: '', -var _sharpen2 = _interopRequireDefault(_sharpen); + /** + * Selection Background color of an object. colored layer behind the object when it is active. + * does not mix good with globalCompositeOperation methods. + * @type String + * @default + */ + selectionBackgroundColor: '', -var _emboss = __webpack_require__(/*! @/extension/emboss */ "./src/js/extension/emboss.js"); + /** + * When defined, an object is rendered via stroke and this property specifies its color + * takes css colors https://www.w3.org/TR/css-color-3/ + * @type String + * @default + */ + stroke: null, -var _emboss2 = _interopRequireDefault(_emboss); + /** + * Width of a stroke used to render this object + * @type Number + * @default + */ + strokeWidth: 1, -var _colorFilter = __webpack_require__(/*! @/extension/colorFilter */ "./src/js/extension/colorFilter.js"); + /** + * Array specifying dash pattern of an object's stroke (stroke must be defined) + * @type Array + */ + strokeDashArray: null, -var _colorFilter2 = _interopRequireDefault(_colorFilter); + /** + * Line offset of an object's stroke + * @type Number + * @default + */ + strokeDashOffset: 0, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Line endings style of an object's stroke (one of "butt", "round", "square") + * @type String + * @default + */ + strokeLineCap: 'butt', -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + /** + * Corner style of an object's stroke (one of "bevel", "round", "miter") + * @type String + * @default + */ + strokeLineJoin: 'miter', -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + /** + * Maximum miter length (used for strokeLineJoin = "miter") of an object's stroke + * @type Number + * @default + */ + strokeMiterLimit: 4, -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** - * @author NHN. FE Development Team - * @fileoverview Add filter module - */ + /** + * Shadow object representing shadow of this shape + * @type fabric.Shadow + * @default + */ + shadow: null, + /** + * Opacity of object's controlling borders when object is active and moving + * @type Number + * @default + */ + borderOpacityWhenMoving: 0.4, -var filters = _fabric2.default.Image.filters; + /** + * Scale factor of object's controlling borders + * bigger number will make a thicker border + * border is 1, so this is basically a border thickness + * since there is no way to change the border itself. + * @type Number + * @default + */ + borderScaleFactor: 1, + /** + * Minimum allowed scale value of an object + * @type Number + * @default + */ + minScaleLimit: 0, -filters.Mask = _mask2.default; -filters.Sharpen = _sharpen2.default; -filters.Emboss = _emboss2.default; -filters.ColorFilter = _colorFilter2.default; + /** + * When set to `false`, an object can not be selected for modification (using either point-click-based or group-based selection). + * But events still fire on it. + * @type Boolean + * @default + */ + selectable: true, -/** - * Filter - * @class Filter - * @param {Graphics} graphics - Graphics instance - * @extends {Component} - * @ignore - */ + /** + * When set to `false`, an object can not be a target of events. All events propagate through it. Introduced in v1.3.4 + * @type Boolean + * @default + */ + evented: true, -var Filter = function (_Component) { - _inherits(Filter, _Component); + /** + * When set to `false`, an object is not rendered on canvas + * @type Boolean + * @default + */ + visible: true, - function Filter(graphics) { - _classCallCheck(this, Filter); + /** + * When set to `false`, object's controls are not displayed and can not be used to manipulate object + * @type Boolean + * @default + */ + hasControls: true, - return _possibleConstructorReturn(this, (Filter.__proto__ || Object.getPrototypeOf(Filter)).call(this, _consts.componentNames.FILTER, graphics)); - } + /** + * When set to `false`, object's controlling borders are not rendered + * @type Boolean + * @default + */ + hasBorders: true, - /** - * Add filter to source image (a specific filter is added on fabric.js) - * @param {string} type - Filter type - * @param {Object} [options] - Options of filter - * @returns {Promise} - */ + /** + * When set to `true`, objects are "found" on canvas on per-pixel basis rather than according to bounding box + * @type Boolean + * @default + */ + perPixelTargetFind: false, + /** + * When `false`, default object's values are not included in its serialization + * @type Boolean + * @default + */ + includeDefaultValues: true, - _createClass(Filter, [{ - key: 'add', - value: function add(type, options) { - var _this2 = this; + /** + * When `true`, object horizontal movement is locked + * @type Boolean + * @default + */ + lockMovementX: false, - return new _util.Promise(function (resolve, reject) { - var sourceImg = _this2._getSourceImage(); - var canvas = _this2.getCanvas(); - var imgFilter = _this2._getFilter(sourceImg, type); - if (!imgFilter) { - imgFilter = _this2._createFilter(sourceImg, type, options); - } + /** + * When `true`, object vertical movement is locked + * @type Boolean + * @default + */ + lockMovementY: false, - if (!imgFilter) { - reject(_consts.rejectMessages.invalidParameters); - } + /** + * When `true`, object rotation is locked + * @type Boolean + * @default + */ + lockRotation: false, - _this2._changeFilterValues(imgFilter, options); + /** + * When `true`, object horizontal scaling is locked + * @type Boolean + * @default + */ + lockScalingX: false, - _this2._apply(sourceImg, function () { - canvas.renderAll(); - resolve({ - type: type, - action: 'add', - options: options - }); - }); - }); - } + /** + * When `true`, object vertical scaling is locked + * @type Boolean + * @default + */ + lockScalingY: false, /** - * Remove filter to source image - * @param {string} type - Filter type - * @returns {Promise} + * When `true`, object horizontal skewing is locked + * @type Boolean + * @default */ + lockSkewingX: false, - }, { - key: 'remove', - value: function remove(type) { - var _this3 = this; + /** + * When `true`, object vertical skewing is locked + * @type Boolean + * @default + */ + lockSkewingY: false, - return new _util.Promise(function (resolve, reject) { - var sourceImg = _this3._getSourceImage(); - var canvas = _this3.getCanvas(); - var options = _this3.getOptions(type); + /** + * When `true`, object cannot be flipped by scaling into negative values + * @type Boolean + * @default + */ + lockScalingFlip: false, - if (!sourceImg.filters.length) { - reject(_consts.rejectMessages.unsupportedOperation); - } + /** + * When `true`, object is not exported in OBJECT/JSON + * @since 1.6.3 + * @type Boolean + * @default + */ + excludeFromExport: false, - _this3._removeFilter(sourceImg, type); + /** + * When `true`, object is cached on an additional canvas. + * When `false`, object is not cached unless necessary ( clipPath ) + * default to true + * @since 1.7.0 + * @type Boolean + * @default true + */ + objectCaching: objectCaching, - _this3._apply(sourceImg, function () { - canvas.renderAll(); - resolve({ - type: type, - action: 'remove', - options: options - }); - }); - }); - } + /** + * When `true`, object properties are checked for cache invalidation. In some particular + * situation you may want this to be disabled ( spray brush, very big, groups) + * or if your application does not allow you to modify properties for groups child you want + * to disable it for groups. + * default to false + * since 1.7.0 + * @type Boolean + * @default false + */ + statefullCache: false, /** - * Whether this has the filter or not - * @param {string} type - Filter type - * @returns {boolean} true if it has the filter + * When `true`, cache does not get updated during scaling. The picture will get blocky if scaled + * too much and will be redrawn with correct details at the end of scaling. + * this setting is performance and application dependant. + * default to true + * since 1.7.0 + * @type Boolean + * @default true */ + noScaleCache: true, - }, { - key: 'hasFilter', - value: function hasFilter(type) { - return !!this._getFilter(this._getSourceImage(), type); - } + /** + * When `false`, the stoke width will scale with the object. + * When `true`, the stroke will always match the exact pixel size entered for stroke width. + * default to false + * @since 2.6.0 + * @type Boolean + * @default false + * @type Boolean + * @default false + */ + strokeUniform: false, /** - * Get a filter options - * @param {string} type - Filter type - * @returns {Object} filter options or null if there is no that filter + * When set to `true`, object's cache will be rerendered next render call. + * since 1.7.0 + * @type Boolean + * @default true */ + dirty: true, - }, { - key: 'getOptions', - value: function getOptions(type) { - var sourceImg = this._getSourceImage(); - var imgFilter = this._getFilter(sourceImg, type); - if (!imgFilter) { - return null; - } + /** + * keeps the value of the last hovered corner during mouse move. + * 0 is no corner, or 'mt', 'ml', 'mtr' etc.. + * It should be private, but there is no harm in using it as + * a read-only property. + * @type number|string|any + * @default 0 + */ + __corner: 0, - return (0, _tuiCodeSnippet.extend)({}, imgFilter.options); - } + /** + * Determines if the fill or the stroke is drawn first (one of "fill" or "stroke") + * @type String + * @default + */ + paintFirst: 'fill', /** - * Change filter values - * @param {Object} imgFilter object of filter - * @param {Object} options object + * When 'down', object is set to active on mousedown/touchstart + * When 'up', object is set to active on mouseup/touchend + * Experimental. Let's see if this breaks anything before supporting officially * @private + * since 4.4.0 + * @type String + * @default 'down' */ + activeOn: 'down', - }, { - key: '_changeFilterValues', - value: function _changeFilterValues(imgFilter, options) { - (0, _tuiCodeSnippet.forEach)(options, function (value, key) { - if (!(0, _tuiCodeSnippet.isUndefined)(imgFilter[key])) { - imgFilter[key] = value; - } - }); - (0, _tuiCodeSnippet.forEach)(imgFilter.options, function (value, key) { - if (!(0, _tuiCodeSnippet.isUndefined)(options[key])) { - imgFilter.options[key] = options[key]; - } - }); - } + /** + * List of properties to consider when checking if state + * of an object is changed (fabric.Object#hasStateChanged) + * as well as for history (undo/redo) purposes + * @type Array + */ + stateProperties: ( + 'top left width height scaleX scaleY flipX flipY originX originY transformMatrix ' + + 'stroke strokeWidth strokeDashArray strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit ' + + 'angle opacity fill globalCompositeOperation shadow visible backgroundColor ' + + 'skewX skewY fillRule paintFirst clipPath strokeUniform' + ).split(' '), /** - * Apply filter - * @param {fabric.Image} sourceImg - Source image to apply filter - * @param {function} callback - Executed function after applying filter - * @private + * List of properties to consider when checking if cache needs refresh + * Those properties are checked by statefullCache ON ( or lazy mode if we want ) or from single + * calls to Object.set(key, value). If the key is in this list, the object is marked as dirty + * and refreshed at the next render + * @type Array */ + cacheProperties: ( + 'fill stroke strokeWidth strokeDashArray width height paintFirst strokeUniform' + + ' strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit backgroundColor clipPath' + ).split(' '), - }, { - key: '_apply', - value: function _apply(sourceImg, callback) { - sourceImg.filters.push(); - var result = sourceImg.applyFilters(); - if (result) { - callback(); - } - } + /** + * List of properties to consider for animating colors. + * @type Array + */ + colorProperties: ( + 'fill stroke backgroundColor' + ).split(' '), /** - * Get source image on canvas - * @returns {fabric.Image} Current source image on canvas - * @private + * a fabricObject that, without stroke define a clipping area with their shape. filled in black + * the clipPath object gets used when the object has rendered, and the context is placed in the center + * of the object cacheCanvas. + * If you want 0,0 of a clipPath to align with an object center, use clipPath.originX/Y to 'center' + * @type fabric.Object */ + clipPath: undefined, - }, { - key: '_getSourceImage', - value: function _getSourceImage() { - return this.getCanvasImage(); - } + /** + * Meaningful ONLY when the object is used as clipPath. + * if true, the clipPath will make the object clip to the outside of the clipPath + * since 2.4.0 + * @type boolean + * @default false + */ + inverted: false, /** - * Create filter instance - * @param {fabric.Image} sourceImg - Source image to apply filter - * @param {string} type - Filter type - * @param {Object} [options] - Options of filter - * @returns {Object} Fabric object of filter - * @private + * Meaningful ONLY when the object is used as clipPath. + * if true, the clipPath will have its top and left relative to canvas, and will + * not be influenced by the object transform. This will make the clipPath relative + * to the canvas, but clipping just a particular object. + * WARNING this is beta, this feature may change or be renamed. + * since 2.4.0 + * @type boolean + * @default false */ + absolutePositioned: false, - }, { - key: '_createFilter', - value: function _createFilter(sourceImg, type, options) { - var filterObj = void 0; - // capitalize first letter for matching with fabric image filter name - var fabricType = this._getFabricFilterType(type); - var ImageFilter = _fabric2.default.Image.filters[fabricType]; - if (ImageFilter) { - filterObj = new ImageFilter(options); - filterObj.options = options; - sourceImg.filters.push(filterObj); + /** + * Constructor + * @param {Object} [options] Options object + */ + initialize: function(options) { + if (options) { + this.setOptions(options); } - - return filterObj; - } + }, /** - * Get applied filter instance - * @param {fabric.Image} sourceImg - Source image to apply filter - * @param {string} type - Filter type - * @returns {Object} Fabric object of filter + * Create a the canvas used to keep the cached copy of the object * @private */ + _createCacheCanvas: function() { + this._cacheProperties = {}; + this._cacheCanvas = fabric.util.createCanvasElement(); + this._cacheContext = this._cacheCanvas.getContext('2d'); + this._updateCacheCanvas(); + // if canvas gets created, is empty, so dirty. + this.dirty = true; + }, - }, { - key: '_getFilter', - value: function _getFilter(sourceImg, type) { - var imgFilter = null; - - if (sourceImg) { - var fabricType = this._getFabricFilterType(type); - var length = sourceImg.filters.length; - - var item = void 0, - i = void 0; - - for (i = 0; i < length; i += 1) { - item = sourceImg.filters[i]; - if (item.type === fabricType) { - imgFilter = item; - break; - } + /** + * Limit the cache dimensions so that X * Y do not cross fabric.perfLimitSizeTotal + * and each side do not cross fabric.cacheSideLimit + * those numbers are configurable so that you can get as much detail as you want + * making bargain with performances. + * @param {Object} dims + * @param {Object} dims.width width of canvas + * @param {Object} dims.height height of canvas + * @param {Object} dims.zoomX zoomX zoom value to unscale the canvas before drawing cache + * @param {Object} dims.zoomY zoomY zoom value to unscale the canvas before drawing cache + * @return {Object}.width width of canvas + * @return {Object}.height height of canvas + * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache + * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache + */ + _limitCacheSize: function(dims) { + var perfLimitSizeTotal = fabric.perfLimitSizeTotal, + width = dims.width, height = dims.height, + max = fabric.maxCacheSideLimit, min = fabric.minCacheSideLimit; + if (width <= max && height <= max && width * height <= perfLimitSizeTotal) { + if (width < min) { + dims.width = min; } - } - - return imgFilter; - } + if (height < min) { + dims.height = min; + } + return dims; + } + var ar = width / height, limitedDims = fabric.util.limitDimsByArea(ar, perfLimitSizeTotal), + capValue = fabric.util.capValue, + x = capValue(min, limitedDims.x, max), + y = capValue(min, limitedDims.y, max); + if (width > x) { + dims.zoomX /= width / x; + dims.width = x; + dims.capped = true; + } + if (height > y) { + dims.zoomY /= height / y; + dims.height = y; + dims.capped = true; + } + return dims; + }, /** - * Remove applied filter instance - * @param {fabric.Image} sourceImg - Source image to apply filter - * @param {string} type - Filter type + * Return the dimension and the zoom level needed to create a cache canvas + * big enough to host the object to be cached. * @private + * @return {Object}.x width of object to be cached + * @return {Object}.y height of object to be cached + * @return {Object}.width width of canvas + * @return {Object}.height height of canvas + * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache + * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache */ - - }, { - key: '_removeFilter', - value: function _removeFilter(sourceImg, type) { - var fabricType = this._getFabricFilterType(type); - sourceImg.filters = (0, _tuiCodeSnippet.filter)(sourceImg.filters, function (value) { - return value.type !== fabricType; - }); - } + _getCacheCanvasDimensions: function() { + var objectScale = this.getTotalObjectScaling(), + // caculate dimensions without skewing + dim = this._getTransformedDimensions(0, 0), + neededX = dim.x * objectScale.scaleX / this.scaleX, + neededY = dim.y * objectScale.scaleY / this.scaleY; + return { + // for sure this ALIASING_LIMIT is slightly creating problem + // in situation in which the cache canvas gets an upper limit + // also objectScale contains already scaleX and scaleY + width: neededX + ALIASING_LIMIT, + height: neededY + ALIASING_LIMIT, + zoomX: objectScale.scaleX, + zoomY: objectScale.scaleY, + x: neededX, + y: neededY + }; + }, /** - * Change filter class name to fabric's, especially capitalizing first letter - * @param {string} type - Filter type - * @example - * 'grayscale' -> 'Grayscale' - * @returns {string} Fabric filter class name + * Update width and height of the canvas for cache + * returns true or false if canvas needed resize. + * @private + * @return {Boolean} true if the canvas has been resized */ + _updateCacheCanvas: function() { + var targetCanvas = this.canvas; + if (this.noScaleCache && targetCanvas && targetCanvas._currentTransform) { + var target = targetCanvas._currentTransform.target, + action = targetCanvas._currentTransform.action; + if (this === target && action.slice && action.slice(0, 5) === 'scale') { + return false; + } + } + var canvas = this._cacheCanvas, + dims = this._limitCacheSize(this._getCacheCanvasDimensions()), + minCacheSize = fabric.minCacheSideLimit, + width = dims.width, height = dims.height, drawingWidth, drawingHeight, + zoomX = dims.zoomX, zoomY = dims.zoomY, + dimensionsChanged = width !== this.cacheWidth || height !== this.cacheHeight, + zoomChanged = this.zoomX !== zoomX || this.zoomY !== zoomY, + shouldRedraw = dimensionsChanged || zoomChanged, + additionalWidth = 0, additionalHeight = 0, shouldResizeCanvas = false; + if (dimensionsChanged) { + var canvasWidth = this._cacheCanvas.width, + canvasHeight = this._cacheCanvas.height, + sizeGrowing = width > canvasWidth || height > canvasHeight, + sizeShrinking = (width < canvasWidth * 0.9 || height < canvasHeight * 0.9) && + canvasWidth > minCacheSize && canvasHeight > minCacheSize; + shouldResizeCanvas = sizeGrowing || sizeShrinking; + if (sizeGrowing && !dims.capped && (width > minCacheSize || height > minCacheSize)) { + additionalWidth = width * 0.1; + additionalHeight = height * 0.1; + } + } + if (this instanceof fabric.Text && this.path) { + shouldRedraw = true; + shouldResizeCanvas = true; + additionalWidth += this.getHeightOfLine(0) * this.zoomX; + additionalHeight += this.getHeightOfLine(0) * this.zoomY; + } + if (shouldRedraw) { + if (shouldResizeCanvas) { + canvas.width = Math.ceil(width + additionalWidth); + canvas.height = Math.ceil(height + additionalHeight); + } + else { + this._cacheContext.setTransform(1, 0, 0, 1, 0, 0); + this._cacheContext.clearRect(0, 0, canvas.width, canvas.height); + } + drawingWidth = dims.x / 2; + drawingHeight = dims.y / 2; + this.cacheTranslationX = Math.round(canvas.width / 2 - drawingWidth) + drawingWidth; + this.cacheTranslationY = Math.round(canvas.height / 2 - drawingHeight) + drawingHeight; + this.cacheWidth = width; + this.cacheHeight = height; + this._cacheContext.translate(this.cacheTranslationX, this.cacheTranslationY); + this._cacheContext.scale(zoomX, zoomY); + this.zoomX = zoomX; + this.zoomY = zoomY; + return true; + } + return false; + }, - }, { - key: '_getFabricFilterType', - value: function _getFabricFilterType(type) { - return type.charAt(0).toUpperCase() + type.slice(1); - } - }]); - - return Filter; -}(_component2.default); - -exports.default = Filter; - -/***/ }), + /** + * Sets object's properties from options + * @param {Object} [options] Options object + */ + setOptions: function(options) { + this._setOptions(options); + this._initGradient(options.fill, 'fill'); + this._initGradient(options.stroke, 'stroke'); + this._initPattern(options.fill, 'fill'); + this._initPattern(options.stroke, 'stroke'); + }, -/***/ "./src/js/component/flip.js": -/*!**********************************!*\ - !*** ./src/js/component/flip.js ***! - \**********************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Transforms context when rendering an object + * @param {CanvasRenderingContext2D} ctx Context + */ + transform: function(ctx) { + var needFullTransform = (this.group && !this.group._transformDone) || + (this.group && this.canvas && ctx === this.canvas.contextTop); + var m = this.calcTransformMatrix(!needFullTransform); + ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); + }, -"use strict"; + /** + * Returns an object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} Object representation of an instance + */ + toObject: function(propertiesToInclude) { + var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS, + + object = { + type: this.type, + version: fabric.version, + originX: this.originX, + originY: this.originY, + left: toFixed(this.left, NUM_FRACTION_DIGITS), + top: toFixed(this.top, NUM_FRACTION_DIGITS), + width: toFixed(this.width, NUM_FRACTION_DIGITS), + height: toFixed(this.height, NUM_FRACTION_DIGITS), + fill: (this.fill && this.fill.toObject) ? this.fill.toObject() : this.fill, + stroke: (this.stroke && this.stroke.toObject) ? this.stroke.toObject() : this.stroke, + strokeWidth: toFixed(this.strokeWidth, NUM_FRACTION_DIGITS), + strokeDashArray: this.strokeDashArray ? this.strokeDashArray.concat() : this.strokeDashArray, + strokeLineCap: this.strokeLineCap, + strokeDashOffset: this.strokeDashOffset, + strokeLineJoin: this.strokeLineJoin, + strokeUniform: this.strokeUniform, + strokeMiterLimit: toFixed(this.strokeMiterLimit, NUM_FRACTION_DIGITS), + scaleX: toFixed(this.scaleX, NUM_FRACTION_DIGITS), + scaleY: toFixed(this.scaleY, NUM_FRACTION_DIGITS), + angle: toFixed(this.angle, NUM_FRACTION_DIGITS), + flipX: this.flipX, + flipY: this.flipY, + opacity: toFixed(this.opacity, NUM_FRACTION_DIGITS), + shadow: (this.shadow && this.shadow.toObject) ? this.shadow.toObject() : this.shadow, + visible: this.visible, + backgroundColor: this.backgroundColor, + fillRule: this.fillRule, + paintFirst: this.paintFirst, + globalCompositeOperation: this.globalCompositeOperation, + skewX: toFixed(this.skewX, NUM_FRACTION_DIGITS), + skewY: toFixed(this.skewY, NUM_FRACTION_DIGITS), + }; + if (this.clipPath && !this.clipPath.excludeFromExport) { + object.clipPath = this.clipPath.toObject(propertiesToInclude); + object.clipPath.inverted = this.clipPath.inverted; + object.clipPath.absolutePositioned = this.clipPath.absolutePositioned; + } -Object.defineProperty(exports, "__esModule", { - value: true -}); + fabric.util.populateWithProperties(this, object, propertiesToInclude); + if (!this.includeDefaultValues) { + object = this._removeDefaultValues(object); + } -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + return object; + }, -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); + /** + * Returns (dataless) object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} Object representation of an instance + */ + toDatalessObject: function(propertiesToInclude) { + // will be overwritten by subclasses + return this.toObject(propertiesToInclude); + }, -var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); + /** + * @private + * @param {Object} object + */ + _removeDefaultValues: function(object) { + var prototype = fabric.util.getKlass(object.type).prototype, + stateProperties = prototype.stateProperties; + stateProperties.forEach(function(prop) { + if (prop === 'left' || prop === 'top') { + return; + } + if (object[prop] === prototype[prop]) { + delete object[prop]; + } + var isArray = Object.prototype.toString.call(object[prop]) === '[object Array]' && + Object.prototype.toString.call(prototype[prop]) === '[object Array]'; -var _component = __webpack_require__(/*! @/interface/component */ "./src/js/interface/component.js"); + // basically a check for [] === [] + if (isArray && object[prop].length === 0 && prototype[prop].length === 0) { + delete object[prop]; + } + }); -var _component2 = _interopRequireDefault(_component); + return object; + }, -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + /** + * Returns a string representation of an instance + * @return {String} + */ + toString: function() { + return '#'; + }, -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + /** + * Return the object scale factor counting also the group scaling + * @return {Object} object with scaleX and scaleY properties + */ + getObjectScaling: function() { + // if the object is a top level one, on the canvas, we go for simple aritmetic + // otherwise the complex method with angles will return approximations and decimals + // and will likely kill the cache when not needed + // https://github.com/fabricjs/fabric.js/issues/7157 + if (!this.group) { + return { + scaleX: this.scaleX, + scaleY: this.scaleY, + }; + } + // if we are inside a group total zoom calculation is complex, we defer to generic matrices + var options = fabric.util.qrDecompose(this.calcTransformMatrix()); + return { scaleX: Math.abs(options.scaleX), scaleY: Math.abs(options.scaleY) }; + }, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Return the object scale factor counting also the group scaling, zoom and retina + * @return {Object} object with scaleX and scaleY properties + */ + getTotalObjectScaling: function() { + var scale = this.getObjectScaling(), scaleX = scale.scaleX, scaleY = scale.scaleY; + if (this.canvas) { + var zoom = this.canvas.getZoom(); + var retina = this.canvas.getRetinaScaling(); + scaleX *= zoom * retina; + scaleY *= zoom * retina; + } + return { scaleX: scaleX, scaleY: scaleY }; + }, -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + /** + * Return the object opacity counting also the group property + * @return {Number} + */ + getObjectOpacity: function() { + var opacity = this.opacity; + if (this.group) { + opacity *= this.group.getObjectOpacity(); + } + return opacity; + }, -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + /** + * @private + * @param {String} key + * @param {*} value + * @return {fabric.Object} thisArg + */ + _set: function(key, value) { + var shouldConstrainValue = (key === 'scaleX' || key === 'scaleY'), + isChanged = this[key] !== value, groupNeedsUpdate = false; -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** - * @author NHN. FE Development Team - * @fileoverview Image flip module - */ + if (shouldConstrainValue) { + value = this._constrainScale(value); + } + if (key === 'scaleX' && value < 0) { + this.flipX = !this.flipX; + value *= -1; + } + else if (key === 'scaleY' && value < 0) { + this.flipY = !this.flipY; + value *= -1; + } + else if (key === 'shadow' && value && !(value instanceof fabric.Shadow)) { + value = new fabric.Shadow(value); + } + else if (key === 'dirty' && this.group) { + this.group.set('dirty', value); + } + this[key] = value; -/** - * Flip - * @class Flip - * @param {Graphics} graphics - Graphics instance - * @extends {Component} - * @ignore - */ -var Flip = function (_Component) { - _inherits(Flip, _Component); + if (isChanged) { + groupNeedsUpdate = this.group && this.group.isOnACache(); + if (this.cacheProperties.indexOf(key) > -1) { + this.dirty = true; + groupNeedsUpdate && this.group.set('dirty', true); + } + else if (groupNeedsUpdate && this.stateProperties.indexOf(key) > -1) { + this.group.set('dirty', true); + } + } + return this; + }, - function Flip(graphics) { - _classCallCheck(this, Flip); + /** + * This callback function is called by the parent group of an object every + * time a non-delegated property changes on the group. It is passed the key + * and value as parameters. Not adding in this function's signature to avoid + * Travis build error about unused variables. + */ + setOnGroup: function() { + // implemented by sub-classes, as needed. + }, - return _possibleConstructorReturn(this, (Flip.__proto__ || Object.getPrototypeOf(Flip)).call(this, _consts.componentNames.FLIP, graphics)); - } + /** + * Retrieves viewportTransform from Object's canvas if possible + * @method getViewportTransform + * @memberOf fabric.Object.prototype + * @return {Array} + */ + getViewportTransform: function() { + if (this.canvas && this.canvas.viewportTransform) { + return this.canvas.viewportTransform; + } + return fabric.iMatrix.concat(); + }, - /** - * Get current flip settings - * @returns {{flipX: Boolean, flipY: Boolean}} - */ + /* + * @private + * return if the object would be visible in rendering + * @memberOf fabric.Object.prototype + * @return {Boolean} + */ + isNotVisible: function() { + return this.opacity === 0 || + (!this.width && !this.height && this.strokeWidth === 0) || + !this.visible; + }, + /** + * Renders an object on a specified context + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + render: function(ctx) { + // do not render if width/height are zeros or object is not visible + if (this.isNotVisible()) { + return; + } + if (this.canvas && this.canvas.skipOffscreen && !this.group && !this.isOnScreen()) { + return; + } + ctx.save(); + this._setupCompositeOperation(ctx); + this.drawSelectionBackground(ctx); + this.transform(ctx); + this._setOpacity(ctx); + this._setShadow(ctx, this); + if (this.shouldCache()) { + this.renderCache(); + this.drawCacheOnCanvas(ctx); + } + else { + this._removeCacheCanvas(); + this.dirty = false; + this.drawObject(ctx); + if (this.objectCaching && this.statefullCache) { + this.saveState({ propertySet: 'cacheProperties' }); + } + } + ctx.restore(); + }, - _createClass(Flip, [{ - key: 'getCurrentSetting', - value: function getCurrentSetting() { - var canvasImage = this.getCanvasImage(); + renderCache: function(options) { + options = options || {}; + if (!this._cacheCanvas) { + this._createCacheCanvas(); + } + if (this.isCacheDirty()) { + this.statefullCache && this.saveState({ propertySet: 'cacheProperties' }); + this.drawObject(this._cacheContext, options.forClipping); + this.dirty = false; + } + }, - return { - flipX: canvasImage.flipX, - flipY: canvasImage.flipY - }; - } + /** + * Remove cacheCanvas and its dimensions from the objects + */ + _removeCacheCanvas: function() { + this._cacheCanvas = null; + this.cacheWidth = 0; + this.cacheHeight = 0; + }, /** - * Set flipX, flipY - * @param {{flipX: Boolean, flipY: Boolean}} newSetting - Flip setting - * @returns {Promise} + * return true if the object will draw a stroke + * Does not consider text styles. This is just a shortcut used at rendering time + * We want it to be an approximation and be fast. + * wrote to avoid extra caching, it has to return true when stroke happens, + * can guess when it will not happen at 100% chance, does not matter if it misses + * some use case where the stroke is invisible. + * @since 3.0.0 + * @returns Boolean */ + hasStroke: function() { + return this.stroke && this.stroke !== 'transparent' && this.strokeWidth !== 0; + }, - }, { - key: 'set', - value: function set(newSetting) { - var setting = this.getCurrentSetting(); - var isChangingFlipX = setting.flipX !== newSetting.flipX; - var isChangingFlipY = setting.flipY !== newSetting.flipY; + /** + * return true if the object will draw a fill + * Does not consider text styles. This is just a shortcut used at rendering time + * We want it to be an approximation and be fast. + * wrote to avoid extra caching, it has to return true when fill happens, + * can guess when it will not happen at 100% chance, does not matter if it misses + * some use case where the fill is invisible. + * @since 3.0.0 + * @returns Boolean + */ + hasFill: function() { + return this.fill && this.fill !== 'transparent'; + }, - if (!isChangingFlipX && !isChangingFlipY) { - return _util.Promise.reject(_consts.rejectMessages.flip); + /** + * When set to `true`, force the object to have its own cache, even if it is inside a group + * it may be needed when your object behave in a particular way on the cache and always needs + * its own isolated canvas to render correctly. + * Created to be overridden + * since 1.7.12 + * @returns Boolean + */ + needsItsOwnCache: function() { + if (this.paintFirst === 'stroke' && + this.hasFill() && this.hasStroke() && typeof this.shadow === 'object') { + return true; + } + if (this.clipPath) { + return true; } + return false; + }, - _tuiCodeSnippet2.default.extend(setting, newSetting); - this.setImageProperties(setting, true); - this._invertAngle(isChangingFlipX, isChangingFlipY); - this._flipObjects(isChangingFlipX, isChangingFlipY); + /** + * Decide if the object should cache or not. Create its own cache level + * objectCaching is a global flag, wins over everything + * needsItsOwnCache should be used when the object drawing method requires + * a cache step. None of the fabric classes requires it. + * Generally you do not cache objects in groups because the group outside is cached. + * Read as: cache if is needed, or if the feature is enabled but we are not already caching. + * @return {Boolean} + */ + shouldCache: function() { + this.ownCaching = this.needsItsOwnCache() || ( + this.objectCaching && + (!this.group || !this.group.isOnACache()) + ); + return this.ownCaching; + }, - return _util.Promise.resolve({ - flipX: setting.flipX, - flipY: setting.flipY, - angle: this.getCanvasImage().angle - }); - } + /** + * Check if this object or a child object will cast a shadow + * used by Group.shouldCache to know if child has a shadow recursively + * @return {Boolean} + */ + willDrawShadow: function() { + return !!this.shadow && (this.shadow.offsetX !== 0 || this.shadow.offsetY !== 0); + }, /** - * Invert image angle for flip - * @param {boolean} isChangingFlipX - Change flipX - * @param {boolean} isChangingFlipY - Change flipY + * Execute the drawing operation for an object clipPath + * @param {CanvasRenderingContext2D} ctx Context to render on */ + drawClipPathOnCache: function(ctx) { + var path = this.clipPath; + ctx.save(); + // DEBUG: uncomment this line, comment the following + // ctx.globalAlpha = 0.4 + if (path.inverted) { + ctx.globalCompositeOperation = 'destination-out'; + } + else { + ctx.globalCompositeOperation = 'destination-in'; + } + //ctx.scale(1 / 2, 1 / 2); + if (path.absolutePositioned) { + var m = fabric.util.invertTransform(this.calcTransformMatrix()); + ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]); + } + path.transform(ctx); + ctx.scale(1 / path.zoomX, 1 / path.zoomY); + ctx.drawImage(path._cacheCanvas, -path.cacheTranslationX, -path.cacheTranslationY); + ctx.restore(); + }, - }, { - key: '_invertAngle', - value: function _invertAngle(isChangingFlipX, isChangingFlipY) { - var canvasImage = this.getCanvasImage(); - var angle = canvasImage.angle; + /** + * Execute the drawing operation for an object on a specified context + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + drawObject: function(ctx, forClipping) { + var originalFill = this.fill, originalStroke = this.stroke; + if (forClipping) { + this.fill = 'black'; + this.stroke = ''; + this._setClippingProperties(ctx); + } + else { + this._renderBackground(ctx); + } + this._render(ctx); + this._drawClipPath(ctx); + this.fill = originalFill; + this.stroke = originalStroke; + }, + _drawClipPath: function(ctx) { + var path = this.clipPath; + if (!path) { return; } + // needed to setup a couple of variables + // path canvas gets overridden with this one. + // TODO find a better solution? + path.canvas = this.canvas; + path.shouldCache(); + path._transformDone = true; + path.renderCache({ forClipping: true }); + this.drawClipPathOnCache(ctx); + }, - if (isChangingFlipX) { - angle *= -1; + /** + * Paint the cached copy of the object on the target context. + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + drawCacheOnCanvas: function(ctx) { + ctx.scale(1 / this.zoomX, 1 / this.zoomY); + ctx.drawImage(this._cacheCanvas, -this.cacheTranslationX, -this.cacheTranslationY); + }, + + /** + * Check if cache is dirty + * @param {Boolean} skipCanvas skip canvas checks because this object is painted + * on parent canvas. + */ + isCacheDirty: function(skipCanvas) { + if (this.isNotVisible()) { + return false; } - if (isChangingFlipY) { - angle *= -1; + if (this._cacheCanvas && !skipCanvas && this._updateCacheCanvas()) { + // in this case the context is already cleared. + return true; } - canvasImage.rotate(parseFloat(angle)).setCoords(); // parseFloat for -0 to 0 - } + else { + if (this.dirty || + (this.clipPath && this.clipPath.absolutePositioned) || + (this.statefullCache && this.hasStateChanged('cacheProperties')) + ) { + if (this._cacheCanvas && !skipCanvas) { + var width = this.cacheWidth / this.zoomX; + var height = this.cacheHeight / this.zoomY; + this._cacheContext.clearRect(-width / 2, -height / 2, width, height); + } + return true; + } + } + return false; + }, /** - * Flip objects - * @param {boolean} isChangingFlipX - Change flipX - * @param {boolean} isChangingFlipY - Change flipY + * Draws a background for the object big as its untransformed dimensions * @private + * @param {CanvasRenderingContext2D} ctx Context to render on */ + _renderBackground: function(ctx) { + if (!this.backgroundColor) { + return; + } + var dim = this._getNonTransformedDimensions(); + ctx.fillStyle = this.backgroundColor; + + ctx.fillRect( + -dim.x / 2, + -dim.y / 2, + dim.x, + dim.y + ); + // if there is background color no other shadows + // should be casted + this._removeShadow(ctx); + }, - }, { - key: '_flipObjects', - value: function _flipObjects(isChangingFlipX, isChangingFlipY) { - var canvas = this.getCanvas(); + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _setOpacity: function(ctx) { + if (this.group && !this.group._transformDone) { + ctx.globalAlpha = this.getObjectOpacity(); + } + else { + ctx.globalAlpha *= this.opacity; + } + }, - if (isChangingFlipX) { - canvas.forEachObject(function (obj) { - obj.set({ - angle: parseFloat(obj.angle * -1), // parseFloat for -0 to 0 - flipX: !obj.flipX, - left: canvas.width - obj.left - }).setCoords(); - }); + _setStrokeStyles: function(ctx, decl) { + var stroke = decl.stroke; + if (stroke) { + ctx.lineWidth = decl.strokeWidth; + ctx.lineCap = decl.strokeLineCap; + ctx.lineDashOffset = decl.strokeDashOffset; + ctx.lineJoin = decl.strokeLineJoin; + ctx.miterLimit = decl.strokeMiterLimit; + if (stroke.toLive) { + if (stroke.gradientUnits === 'percentage' || stroke.gradientTransform || stroke.patternTransform) { + // need to transform gradient in a pattern. + // this is a slow process. If you are hitting this codepath, and the object + // is not using caching, you should consider switching it on. + // we need a canvas as big as the current object caching canvas. + this._applyPatternForTransformedGradient(ctx, stroke); + } + else { + // is a simple gradient or pattern + ctx.strokeStyle = stroke.toLive(ctx, this); + this._applyPatternGradientTransform(ctx, stroke); + } + } + else { + // is a color + ctx.strokeStyle = decl.stroke; + } } - if (isChangingFlipY) { - canvas.forEachObject(function (obj) { - obj.set({ - angle: parseFloat(obj.angle * -1), // parseFloat for -0 to 0 - flipY: !obj.flipY, - top: canvas.height - obj.top - }).setCoords(); - }); + }, + + _setFillStyles: function(ctx, decl) { + var fill = decl.fill; + if (fill) { + if (fill.toLive) { + ctx.fillStyle = fill.toLive(ctx, this); + this._applyPatternGradientTransform(ctx, decl.fill); + } + else { + ctx.fillStyle = fill; + } } - canvas.renderAll(); - } + }, + + _setClippingProperties: function(ctx) { + ctx.globalAlpha = 1; + ctx.strokeStyle = 'transparent'; + ctx.fillStyle = '#000000'; + }, /** - * Reset flip settings - * @returns {Promise} + * @private + * Sets line dash + * @param {CanvasRenderingContext2D} ctx Context to set the dash line on + * @param {Array} dashArray array representing dashes */ + _setLineDash: function(ctx, dashArray) { + if (!dashArray || dashArray.length === 0) { + return; + } + // Spec requires the concatenation of two copies the dash list when the number of elements is odd + if (1 & dashArray.length) { + dashArray.push.apply(dashArray, dashArray); + } + ctx.setLineDash(dashArray); + }, - }, { - key: 'reset', - value: function reset() { - return this.set({ - flipX: false, - flipY: false - }); - } + /** + * Renders controls and borders for the object + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {Object} [styleOverride] properties to override the object style + */ + _renderControls: function(ctx, styleOverride) { + var vpt = this.getViewportTransform(), + matrix = this.calcTransformMatrix(), + options, drawBorders, drawControls; + styleOverride = styleOverride || { }; + drawBorders = typeof styleOverride.hasBorders !== 'undefined' ? styleOverride.hasBorders : this.hasBorders; + drawControls = typeof styleOverride.hasControls !== 'undefined' ? styleOverride.hasControls : this.hasControls; + matrix = fabric.util.multiplyTransformMatrices(vpt, matrix); + options = fabric.util.qrDecompose(matrix); + ctx.save(); + ctx.translate(options.translateX, options.translateY); + ctx.lineWidth = 1 * this.borderScaleFactor; + if (!this.group) { + ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; + } + ctx.rotate(degreesToRadians(options.angle)); + if (styleOverride.forActiveSelection || this.group) { + drawBorders && this.drawBordersInGroup(ctx, options, styleOverride); + } + else { + drawBorders && this.drawBorders(ctx, styleOverride); + } + drawControls && this.drawControls(ctx, styleOverride); + ctx.restore(); + }, /** - * Flip x - * @returns {Promise} + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on */ + _setShadow: function(ctx) { + if (!this.shadow) { + return; + } - }, { - key: 'flipX', - value: function flipX() { - var current = this.getCurrentSetting(); - - return this.set({ - flipX: !current.flipX, - flipY: current.flipY - }); - } + var shadow = this.shadow, canvas = this.canvas, scaling, + multX = (canvas && canvas.viewportTransform[0]) || 1, + multY = (canvas && canvas.viewportTransform[3]) || 1; + if (shadow.nonScaling) { + scaling = { scaleX: 1, scaleY: 1 }; + } + else { + scaling = this.getObjectScaling(); + } + if (canvas && canvas._isRetinaScaling()) { + multX *= fabric.devicePixelRatio; + multY *= fabric.devicePixelRatio; + } + ctx.shadowColor = shadow.color; + ctx.shadowBlur = shadow.blur * fabric.browserShadowBlurConstant * + (multX + multY) * (scaling.scaleX + scaling.scaleY) / 4; + ctx.shadowOffsetX = shadow.offsetX * multX * scaling.scaleX; + ctx.shadowOffsetY = shadow.offsetY * multY * scaling.scaleY; + }, /** - * Flip y - * @returns {Promise} + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on */ + _removeShadow: function(ctx) { + if (!this.shadow) { + return; + } - }, { - key: 'flipY', - value: function flipY() { - var current = this.getCurrentSetting(); - - return this.set({ - flipX: current.flipX, - flipY: !current.flipY - }); - } - }]); - - return Flip; -}(_component2.default); + ctx.shadowColor = ''; + ctx.shadowBlur = ctx.shadowOffsetX = ctx.shadowOffsetY = 0; + }, -exports.default = Flip; + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {Object} filler fabric.Pattern or fabric.Gradient + * @return {Object} offset.offsetX offset for text rendering + * @return {Object} offset.offsetY offset for text rendering + */ + _applyPatternGradientTransform: function(ctx, filler) { + if (!filler || !filler.toLive) { + return { offsetX: 0, offsetY: 0 }; + } + var t = filler.gradientTransform || filler.patternTransform; + var offsetX = -this.width / 2 + filler.offsetX || 0, + offsetY = -this.height / 2 + filler.offsetY || 0; -/***/ }), + if (filler.gradientUnits === 'percentage') { + ctx.transform(this.width, 0, 0, this.height, offsetX, offsetY); + } + else { + ctx.transform(1, 0, 0, 1, offsetX, offsetY); + } + if (t) { + ctx.transform(t[0], t[1], t[2], t[3], t[4], t[5]); + } + return { offsetX: offsetX, offsetY: offsetY }; + }, -/***/ "./src/js/component/freeDrawing.js": -/*!*****************************************!*\ - !*** ./src/js/component/freeDrawing.js ***! - \*****************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderPaintInOrder: function(ctx) { + if (this.paintFirst === 'stroke') { + this._renderStroke(ctx); + this._renderFill(ctx); + } + else { + this._renderFill(ctx); + this._renderStroke(ctx); + } + }, -"use strict"; + /** + * @private + * function that actually render something on the context. + * empty here to allow Obects to work on tests to benchmark fabric functionalites + * not related to rendering + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _render: function(/* ctx */) { + }, -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderFill: function(ctx) { + if (!this.fill) { + return; + } -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + ctx.save(); + this._setFillStyles(ctx, this); + if (this.fillRule === 'evenodd') { + ctx.fill('evenodd'); + } + else { + ctx.fill(); + } + ctx.restore(); + }, -var _fabric = __webpack_require__(/*! fabric */ "fabric"); + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderStroke: function(ctx) { + if (!this.stroke || this.strokeWidth === 0) { + return; + } -var _fabric2 = _interopRequireDefault(_fabric); + if (this.shadow && !this.shadow.affectStroke) { + this._removeShadow(ctx); + } -var _component = __webpack_require__(/*! @/interface/component */ "./src/js/interface/component.js"); + ctx.save(); + if (this.strokeUniform && this.group) { + var scaling = this.getObjectScaling(); + ctx.scale(1 / scaling.scaleX, 1 / scaling.scaleY); + } + else if (this.strokeUniform) { + ctx.scale(1 / this.scaleX, 1 / this.scaleY); + } + this._setLineDash(ctx, this.strokeDashArray); + this._setStrokeStyles(ctx, this); + ctx.stroke(); + ctx.restore(); + }, -var _component2 = _interopRequireDefault(_component); + /** + * This function try to patch the missing gradientTransform on canvas gradients. + * transforming a context to transform the gradient, is going to transform the stroke too. + * we want to transform the gradient but not the stroke operation, so we create + * a transformed gradient on a pattern and then we use the pattern instead of the gradient. + * this method has drwabacks: is slow, is in low resolution, needs a patch for when the size + * is limited. + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {fabric.Gradient} filler a fabric gradient instance + */ + _applyPatternForTransformedGradient: function(ctx, filler) { + var dims = this._limitCacheSize(this._getCacheCanvasDimensions()), + pCanvas = fabric.util.createCanvasElement(), pCtx, retinaScaling = this.canvas.getRetinaScaling(), + width = dims.x / this.scaleX / retinaScaling, height = dims.y / this.scaleY / retinaScaling; + pCanvas.width = width; + pCanvas.height = height; + pCtx = pCanvas.getContext('2d'); + pCtx.beginPath(); pCtx.moveTo(0, 0); pCtx.lineTo(width, 0); pCtx.lineTo(width, height); + pCtx.lineTo(0, height); pCtx.closePath(); + pCtx.translate(width / 2, height / 2); + pCtx.scale( + dims.zoomX / this.scaleX / retinaScaling, + dims.zoomY / this.scaleY / retinaScaling + ); + this._applyPatternGradientTransform(pCtx, filler); + pCtx.fillStyle = filler.toLive(ctx); + pCtx.fill(); + ctx.translate(-this.width / 2 - this.strokeWidth / 2, -this.height / 2 - this.strokeWidth / 2); + ctx.scale( + retinaScaling * this.scaleX / dims.zoomX, + retinaScaling * this.scaleY / dims.zoomY + ); + ctx.strokeStyle = pCtx.createPattern(pCanvas, 'no-repeat'); + }, -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + /** + * This function is an helper for svg import. it returns the center of the object in the svg + * untransformed coordinates + * @private + * @return {Object} center point from element coordinates + */ + _findCenterFromElement: function() { + return { x: this.left + this.width / 2, y: this.top + this.height / 2 }; + }, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * This function is an helper for svg import. it decompose the transformMatrix + * and assign properties to object. + * untransformed coordinates + * @private + * @chainable + */ + _assignTransformMatrixProps: function() { + if (this.transformMatrix) { + var options = fabric.util.qrDecompose(this.transformMatrix); + this.flipX = false; + this.flipY = false; + this.set('scaleX', options.scaleX); + this.set('scaleY', options.scaleY); + this.angle = options.angle; + this.skewX = options.skewX; + this.skewY = 0; + } + }, -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + /** + * This function is an helper for svg import. it removes the transform matrix + * and set to object properties that fabricjs can handle + * @private + * @param {Object} preserveAspectRatioOptions + * @return {thisArg} + */ + _removeTransformMatrix: function(preserveAspectRatioOptions) { + var center = this._findCenterFromElement(); + if (this.transformMatrix) { + this._assignTransformMatrixProps(); + center = fabric.util.transformPoint(center, this.transformMatrix); + } + this.transformMatrix = null; + if (preserveAspectRatioOptions) { + this.scaleX *= preserveAspectRatioOptions.scaleX; + this.scaleY *= preserveAspectRatioOptions.scaleY; + this.cropX = preserveAspectRatioOptions.cropX; + this.cropY = preserveAspectRatioOptions.cropY; + center.x += preserveAspectRatioOptions.offsetLeft; + center.y += preserveAspectRatioOptions.offsetTop; + this.width = preserveAspectRatioOptions.width; + this.height = preserveAspectRatioOptions.height; + } + this.setPositionByOrigin(center, 'center', 'center'); + }, -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + /** + * Clones an instance, using a callback method will work for every object. + * @param {Function} callback Callback is invoked with a clone as a first argument + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + */ + clone: function(callback, propertiesToInclude) { + var objectForm = this.toObject(propertiesToInclude); + if (this.constructor.fromObject) { + this.constructor.fromObject(objectForm, callback); + } + else { + fabric.Object._fromObject('Object', objectForm, callback); + } + }, -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** - * @author NHN. FE Development Team - * @fileoverview Free drawing module, Set brush - */ + /** + * Creates an instance of fabric.Image out of an object + * makes use of toCanvasElement. + * Once this method was based on toDataUrl and loadImage, so it also had a quality + * and format option. toCanvasElement is faster and produce no loss of quality. + * If you need to get a real Jpeg or Png from an object, using toDataURL is the right way to do it. + * toCanvasElement and then toBlob from the obtained canvas is also a good option. + * This method is sync now, but still support the callback because we did not want to break. + * When fabricJS 5.0 will be planned, this will probably be changed to not have a callback. + * @param {Function} callback callback, invoked with an instance as a first argument + * @param {Object} [options] for clone as image, passed to toDataURL + * @param {Number} [options.multiplier=1] Multiplier to scale by + * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 + * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 + * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 + * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 + * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 1.6.4 + * @param {Boolean} [options.withoutTransform] Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4 + * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2 + * @return {fabric.Object} thisArg + */ + cloneAsImage: function(callback, options) { + var canvasEl = this.toCanvasElement(options); + if (callback) { + callback(new fabric.Image(canvasEl)); + } + return this; + }, + /** + * Converts an object into a HTMLCanvas element + * @param {Object} options Options object + * @param {Number} [options.multiplier=1] Multiplier to scale by + * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 + * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 + * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 + * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 + * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 1.6.4 + * @param {Boolean} [options.withoutTransform] Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4 + * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2 + * @return {HTMLCanvasElement} Returns DOM element with the fabric.Object + */ + toCanvasElement: function(options) { + options || (options = { }); + + var utils = fabric.util, origParams = utils.saveObjectTransform(this), + originalGroup = this.group, + originalShadow = this.shadow, abs = Math.abs, + multiplier = (options.multiplier || 1) * (options.enableRetinaScaling ? fabric.devicePixelRatio : 1); + delete this.group; + if (options.withoutTransform) { + utils.resetObjectTransform(this); + } + if (options.withoutShadow) { + this.shadow = null; + } + + var el = fabric.util.createCanvasElement(), + // skip canvas zoom and calculate with setCoords now. + boundingRect = this.getBoundingRect(true, true), + shadow = this.shadow, scaling, + shadowOffset = { x: 0, y: 0 }, shadowBlur, + width, height; + + if (shadow) { + shadowBlur = shadow.blur; + if (shadow.nonScaling) { + scaling = { scaleX: 1, scaleY: 1 }; + } + else { + scaling = this.getObjectScaling(); + } + // consider non scaling shadow. + shadowOffset.x = 2 * Math.round(abs(shadow.offsetX) + shadowBlur) * (abs(scaling.scaleX)); + shadowOffset.y = 2 * Math.round(abs(shadow.offsetY) + shadowBlur) * (abs(scaling.scaleY)); + } + width = boundingRect.width + shadowOffset.x; + height = boundingRect.height + shadowOffset.y; + // if the current width/height is not an integer + // we need to make it so. + el.width = Math.ceil(width); + el.height = Math.ceil(height); + var canvas = new fabric.StaticCanvas(el, { + enableRetinaScaling: false, + renderOnAddRemove: false, + skipOffscreen: false, + }); + if (options.format === 'jpeg') { + canvas.backgroundColor = '#fff'; + } + this.setPositionByOrigin(new fabric.Point(canvas.width / 2, canvas.height / 2), 'center', 'center'); + + var originalCanvas = this.canvas; + canvas.add(this); + var canvasEl = canvas.toCanvasElement(multiplier || 1, options); + this.shadow = originalShadow; + this.set('canvas', originalCanvas); + if (originalGroup) { + this.group = originalGroup; + } + this.set(origParams).setCoords(); + // canvas.dispose will call image.dispose that will nullify the elements + // since this canvas is a simple element for the process, we remove references + // to objects in this way in order to avoid object trashing. + canvas._objects = []; + canvas.dispose(); + canvas = null; + + return canvasEl; + }, -/** - * FreeDrawing - * @class FreeDrawing - * @param {Graphics} graphics - Graphics instance - * @extends {Component} - * @ignore - */ -var FreeDrawing = function (_Component) { - _inherits(FreeDrawing, _Component); + /** + * Converts an object into a data-url-like string + * @param {Object} options Options object + * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png" + * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg. + * @param {Number} [options.multiplier=1] Multiplier to scale by + * @param {Number} [options.left] Cropping left offset. Introduced in v1.2.14 + * @param {Number} [options.top] Cropping top offset. Introduced in v1.2.14 + * @param {Number} [options.width] Cropping width. Introduced in v1.2.14 + * @param {Number} [options.height] Cropping height. Introduced in v1.2.14 + * @param {Boolean} [options.enableRetinaScaling] Enable retina scaling for clone image. Introduce in 1.6.4 + * @param {Boolean} [options.withoutTransform] Remove current object transform ( no scale , no angle, no flip, no skew ). Introduced in 2.3.4 + * @param {Boolean} [options.withoutShadow] Remove current object shadow. Introduced in 2.4.2 + * @return {String} Returns a data: URL containing a representation of the object in the format specified by options.format + */ + toDataURL: function(options) { + options || (options = { }); + return fabric.util.toDataURL(this.toCanvasElement(options), options.format || 'png', options.quality || 1); + }, - function FreeDrawing(graphics) { - _classCallCheck(this, FreeDrawing); + /** + * Returns true if specified type is identical to the type of an instance + * @param {String} type Type to check against + * @return {Boolean} + */ + isType: function(type) { + return this.type === type; + }, /** - * Brush width - * @type {number} + * Returns complexity of an instance + * @return {Number} complexity of this instance (is 1 unless subclassed) */ - var _this = _possibleConstructorReturn(this, (FreeDrawing.__proto__ || Object.getPrototypeOf(FreeDrawing)).call(this, _consts.componentNames.FREE_DRAWING, graphics)); + complexity: function() { + return 1; + }, - _this.width = 12; + /** + * Returns a JSON representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} JSON + */ + toJSON: function(propertiesToInclude) { + // delegate, not alias + return this.toObject(propertiesToInclude); + }, /** - * fabric.Color instance for brush color - * @type {fabric.Color} + * Sets "angle" of an instance with centered rotation + * @param {Number} angle Angle value (in degrees) + * @return {fabric.Object} thisArg + * @chainable */ - _this.oColor = new _fabric2.default.Color('rgba(0, 0, 0, 0.5)'); - return _this; - } + rotate: function(angle) { + var shouldCenterOrigin = (this.originX !== 'center' || this.originY !== 'center') && this.centeredRotation; - /** - * Start free drawing mode - * @param {{width: ?number, color: ?string}} [setting] - Brush width & color - */ + if (shouldCenterOrigin) { + this._setOriginToCenter(); + } + this.set('angle', angle); - _createClass(FreeDrawing, [{ - key: 'start', - value: function start(setting) { - var canvas = this.getCanvas(); + if (shouldCenterOrigin) { + this._resetOrigin(); + } - canvas.isDrawingMode = true; - this.setBrush(setting); - } + return this; + }, /** - * Set brush - * @param {{width: ?number, color: ?string}} [setting] - Brush width & color + * Centers object horizontally on canvas to which it was added last. + * You might need to call `setCoords` on an object after centering, to update controls area. + * @return {fabric.Object} thisArg + * @chainable */ - - }, { - key: 'setBrush', - value: function setBrush(setting) { - var brush = this.getCanvas().freeDrawingBrush; - - setting = setting || {}; - this.width = setting.width || this.width; - if (setting.color) { - this.oColor = new _fabric2.default.Color(setting.color); - } - brush.width = this.width; - brush.color = this.oColor.toRgba(); - } + centerH: function () { + this.canvas && this.canvas.centerObjectH(this); + return this; + }, /** - * End free drawing mode + * Centers object horizontally on current viewport of canvas to which it was added last. + * You might need to call `setCoords` on an object after centering, to update controls area. + * @return {fabric.Object} thisArg + * @chainable */ + viewportCenterH: function () { + this.canvas && this.canvas.viewportCenterObjectH(this); + return this; + }, - }, { - key: 'end', - value: function end() { - var canvas = this.getCanvas(); - - canvas.isDrawingMode = false; - } - }]); - - return FreeDrawing; -}(_component2.default); - -exports.default = FreeDrawing; - -/***/ }), + /** + * Centers object vertically on canvas to which it was added last. + * You might need to call `setCoords` on an object after centering, to update controls area. + * @return {fabric.Object} thisArg + * @chainable + */ + centerV: function () { + this.canvas && this.canvas.centerObjectV(this); + return this; + }, -/***/ "./src/js/component/icon.js": -/*!**********************************!*\ - !*** ./src/js/component/icon.js ***! - \**********************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Centers object vertically on current viewport of canvas to which it was added last. + * You might need to call `setCoords` on an object after centering, to update controls area. + * @return {fabric.Object} thisArg + * @chainable + */ + viewportCenterV: function () { + this.canvas && this.canvas.viewportCenterObjectV(this); + return this; + }, -"use strict"; + /** + * Centers object vertically and horizontally on canvas to which is was added last + * You might need to call `setCoords` on an object after centering, to update controls area. + * @return {fabric.Object} thisArg + * @chainable + */ + center: function () { + this.canvas && this.canvas.centerObject(this); + return this; + }, + /** + * Centers object on current viewport of canvas to which it was added last. + * You might need to call `setCoords` on an object after centering, to update controls area. + * @return {fabric.Object} thisArg + * @chainable + */ + viewportCenter: function () { + this.canvas && this.canvas.viewportCenterObject(this); + return this; + }, -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * Returns coordinates of a pointer relative to an object + * @param {Event} e Event to operate upon + * @param {Object} [pointer] Pointer to operate upon (instead of event) + * @return {Object} Coordinates of a pointer (x, y) + */ + getLocalPointer: function(e, pointer) { + pointer = pointer || this.canvas.getPointer(e); + var pClicked = new fabric.Point(pointer.x, pointer.y), + objectLeftTop = this._getLeftTopCoords(); + if (this.angle) { + pClicked = fabric.util.rotatePoint( + pClicked, objectLeftTop, degreesToRadians(-this.angle)); + } + return { + x: pClicked.x - objectLeftTop.x, + y: pClicked.y - objectLeftTop.y + }; + }, -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + /** + * Sets canvas globalCompositeOperation for specific object + * custom composition operation for the particular object can be specified using globalCompositeOperation property + * @param {CanvasRenderingContext2D} ctx Rendering canvas context + */ + _setupCompositeOperation: function (ctx) { + if (this.globalCompositeOperation) { + ctx.globalCompositeOperation = this.globalCompositeOperation; + } + } + }); -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); + fabric.util.createAccessors && fabric.util.createAccessors(fabric.Object); -var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); + extend(fabric.Object.prototype, fabric.Observable); -var _fabric = __webpack_require__(/*! fabric */ "fabric"); + /** + * Defines the number of fraction digits to use when serializing object values. + * You can use it to increase/decrease precision of such values like left, top, scaleX, scaleY, etc. + * @static + * @memberOf fabric.Object + * @constant + * @type Number + */ + fabric.Object.NUM_FRACTION_DIGITS = 2; + + fabric.Object._fromObject = function(className, object, callback, extraParam) { + var klass = fabric[className]; + object = clone(object, true); + fabric.util.enlivenPatterns([object.fill, object.stroke], function(patterns) { + if (typeof patterns[0] !== 'undefined') { + object.fill = patterns[0]; + } + if (typeof patterns[1] !== 'undefined') { + object.stroke = patterns[1]; + } + fabric.util.enlivenObjects([object.clipPath], function(enlivedProps) { + object.clipPath = enlivedProps[0]; + var instance = extraParam ? new klass(object[extraParam], object) : new klass(object); + callback && callback(instance); + }); + }); + }; -var _fabric2 = _interopRequireDefault(_fabric); + /** + * Unique id used internally when creating SVG elements + * @static + * @memberOf fabric.Object + * @type Number + */ + fabric.Object.__uid = 0; +})( true ? exports : 0); -var _component = __webpack_require__(/*! @/interface/component */ "./src/js/interface/component.js"); -var _component2 = _interopRequireDefault(_component); +(function() { -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + var degreesToRadians = fabric.util.degreesToRadians, + originXOffset = { + left: -0.5, + center: 0, + right: 0.5 + }, + originYOffset = { + top: -0.5, + center: 0, + bottom: 0.5 + }; -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Translates the coordinates from a set of origin to another (based on the object's dimensions) + * @param {fabric.Point} point The point which corresponds to the originX and originY params + * @param {String} fromOriginX Horizontal origin: 'left', 'center' or 'right' + * @param {String} fromOriginY Vertical origin: 'top', 'center' or 'bottom' + * @param {String} toOriginX Horizontal origin: 'left', 'center' or 'right' + * @param {String} toOriginY Vertical origin: 'top', 'center' or 'bottom' + * @return {fabric.Point} + */ + translateToGivenOrigin: function(point, fromOriginX, fromOriginY, toOriginX, toOriginY) { + var x = point.x, + y = point.y, + offsetX, offsetY, dim; -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + if (typeof fromOriginX === 'string') { + fromOriginX = originXOffset[fromOriginX]; + } + else { + fromOriginX -= 0.5; + } -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + if (typeof toOriginX === 'string') { + toOriginX = originXOffset[toOriginX]; + } + else { + toOriginX -= 0.5; + } -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** - * @author NHN. FE Development Team - * @fileoverview Add icon module - */ + offsetX = toOriginX - fromOriginX; + if (typeof fromOriginY === 'string') { + fromOriginY = originYOffset[fromOriginY]; + } + else { + fromOriginY -= 0.5; + } -var pathMap = { - arrow: 'M 0 90 H 105 V 120 L 160 60 L 105 0 V 30 H 0 Z', - cancel: 'M 0 30 L 30 60 L 0 90 L 30 120 L 60 90 L 90 120 L 120 90 ' + 'L 90 60 L 120 30 L 90 0 L 60 30 L 30 0 Z' -}; + if (typeof toOriginY === 'string') { + toOriginY = originYOffset[toOriginY]; + } + else { + toOriginY -= 0.5; + } -/** - * Icon - * @class Icon - * @param {Graphics} graphics - Graphics instance - * @extends {Component} - * @ignore - */ + offsetY = toOriginY - fromOriginY; -var Icon = function (_Component) { - _inherits(Icon, _Component); + if (offsetX || offsetY) { + dim = this._getTransformedDimensions(); + x = point.x + offsetX * dim.x; + y = point.y + offsetY * dim.y; + } - function Icon(graphics) { - _classCallCheck(this, Icon); + return new fabric.Point(x, y); + }, /** - * Default icon color - * @type {string} + * Translates the coordinates from origin to center coordinates (based on the object's dimensions) + * @param {fabric.Point} point The point which corresponds to the originX and originY params + * @param {String} originX Horizontal origin: 'left', 'center' or 'right' + * @param {String} originY Vertical origin: 'top', 'center' or 'bottom' + * @return {fabric.Point} */ - var _this = _possibleConstructorReturn(this, (Icon.__proto__ || Object.getPrototypeOf(Icon)).call(this, _consts.componentNames.ICON, graphics)); + translateToCenterPoint: function(point, originX, originY) { + var p = this.translateToGivenOrigin(point, originX, originY, 'center', 'center'); + if (this.angle) { + return fabric.util.rotatePoint(p, point, degreesToRadians(this.angle)); + } + return p; + }, - _this._oColor = '#000000'; + /** + * Translates the coordinates from center to origin coordinates (based on the object's dimensions) + * @param {fabric.Point} center The point which corresponds to center of the object + * @param {String} originX Horizontal origin: 'left', 'center' or 'right' + * @param {String} originY Vertical origin: 'top', 'center' or 'bottom' + * @return {fabric.Point} + */ + translateToOriginPoint: function(center, originX, originY) { + var p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY); + if (this.angle) { + return fabric.util.rotatePoint(p, center, degreesToRadians(this.angle)); + } + return p; + }, /** - * Path value of each icon type - * @type {Object} + * Returns the real center coordinates of the object + * @return {fabric.Point} */ - _this._pathMap = pathMap; + getCenterPoint: function() { + var leftTop = new fabric.Point(this.left, this.top); + return this.translateToCenterPoint(leftTop, this.originX, this.originY); + }, /** - * Type of the drawing icon - * @type {string} - * @private + * Returns the coordinates of the object based on center coordinates + * @param {fabric.Point} point The point which corresponds to the originX and originY params + * @return {fabric.Point} */ - _this._type = null; + // getOriginPoint: function(center) { + // return this.translateToOriginPoint(center, this.originX, this.originY); + // }, /** - * Color of the drawing icon - * @type {string} - * @private + * Returns the coordinates of the object as if it has a different origin + * @param {String} originX Horizontal origin: 'left', 'center' or 'right' + * @param {String} originY Vertical origin: 'top', 'center' or 'bottom' + * @return {fabric.Point} */ - _this._iconColor = null; + getPointByOrigin: function(originX, originY) { + var center = this.getCenterPoint(); + return this.translateToOriginPoint(center, originX, originY); + }, /** - * Event handler list - * @type {Object} - * @private + * Returns the point in local coordinates + * @param {fabric.Point} point The point relative to the global coordinate system + * @param {String} originX Horizontal origin: 'left', 'center' or 'right' + * @param {String} originY Vertical origin: 'top', 'center' or 'bottom' + * @return {fabric.Point} */ - _this._handlers = { - mousedown: _this._onFabricMouseDown.bind(_this), - mousemove: _this._onFabricMouseMove.bind(_this), - mouseup: _this._onFabricMouseUp.bind(_this) - }; - return _this; - } + toLocalPoint: function(point, originX, originY) { + var center = this.getCenterPoint(), + p, p2; - /** - * Set states of the current drawing shape - * @ignore - * @param {string} type - Icon type ('arrow', 'cancel', custom icon name) - * @param {string} iconColor - Icon foreground color - */ + if (typeof originX !== 'undefined' && typeof originY !== 'undefined' ) { + p = this.translateToGivenOrigin(center, 'center', 'center', originX, originY); + } + else { + p = new fabric.Point(this.left, this.top); + } + p2 = new fabric.Point(point.x, point.y); + if (this.angle) { + p2 = fabric.util.rotatePoint(p2, center, -degreesToRadians(this.angle)); + } + return p2.subtractEquals(p); + }, - _createClass(Icon, [{ - key: 'setStates', - value: function setStates(type, iconColor) { - this._type = type; - this._iconColor = iconColor; - } + /** + * Returns the point in global coordinates + * @param {fabric.Point} The point relative to the local coordinate system + * @return {fabric.Point} + */ + // toGlobalPoint: function(point) { + // return fabric.util.rotatePoint(point, this.getCenterPoint(), degreesToRadians(this.angle)).addEquals(new fabric.Point(this.left, this.top)); + // }, /** - * Start to draw the icon on canvas - * @ignore + * Sets the position of the object taking into consideration the object's origin + * @param {fabric.Point} pos The new position of the object + * @param {String} originX Horizontal origin: 'left', 'center' or 'right' + * @param {String} originY Vertical origin: 'top', 'center' or 'bottom' + * @return {void} + */ + setPositionByOrigin: function(pos, originX, originY) { + var center = this.translateToCenterPoint(pos, originX, originY), + position = this.translateToOriginPoint(center, this.originX, this.originY); + this.set('left', position.x); + this.set('top', position.y); + }, + + /** + * @param {String} to One of 'left', 'center', 'right' */ + adjustPosition: function(to) { + var angle = degreesToRadians(this.angle), + hypotFull = this.getScaledWidth(), + xFull = fabric.util.cos(angle) * hypotFull, + yFull = fabric.util.sin(angle) * hypotFull, + offsetFrom, offsetTo; - }, { - key: 'start', - value: function start() { - var canvas = this.getCanvas(); - canvas.selection = false; - canvas.on('mouse:down', this._handlers.mousedown); - } + //TODO: this function does not consider mixed situation like top, center. + if (typeof this.originX === 'string') { + offsetFrom = originXOffset[this.originX]; + } + else { + offsetFrom = this.originX - 0.5; + } + if (typeof to === 'string') { + offsetTo = originXOffset[to]; + } + else { + offsetTo = to - 0.5; + } + this.left += xFull * (offsetTo - offsetFrom); + this.top += yFull * (offsetTo - offsetFrom); + this.setCoords(); + this.originX = to; + }, /** - * End to draw the icon on canvas - * @ignore + * Sets the origin/position of the object to it's center point + * @private + * @return {void} */ + _setOriginToCenter: function() { + this._originalOriginX = this.originX; + this._originalOriginY = this.originY; - }, { - key: 'end', - value: function end() { - var canvas = this.getCanvas(); + var center = this.getCenterPoint(); - canvas.selection = true; - canvas.off({ - 'mouse:down': this._handlers.mousedown - }); - } + this.originX = 'center'; + this.originY = 'center'; + + this.left = center.x; + this.top = center.y; + }, /** - * Add icon - * @param {string} type - Icon type - * @param {Object} options - Icon options - * @param {string} [options.fill] - Icon foreground color - * @param {string} [options.left] - Icon x position - * @param {string} [options.top] - Icon y position - * @returns {Promise} + * Resets the origin/position of the object to it's original origin + * @private + * @return {void} */ + _resetOrigin: function() { + var originPoint = this.translateToOriginPoint( + this.getCenterPoint(), + this._originalOriginX, + this._originalOriginY); - }, { - key: 'add', - value: function add(type, options) { - var _this2 = this; + this.originX = this._originalOriginX; + this.originY = this._originalOriginY; - return new _util.Promise(function (resolve, reject) { - var canvas = _this2.getCanvas(); - var path = _this2._pathMap[type]; - var selectionStyle = _consts.fObjectOptions.SELECTION_STYLE; - var icon = path ? _this2._createIcon(path) : null; - _this2._icon = icon; + this.left = originPoint.x; + this.top = originPoint.y; - if (!icon) { - reject(_consts.rejectMessages.invalidParameters); - } + this._originalOriginX = null; + this._originalOriginY = null; + }, - icon.set(_tuiCodeSnippet2.default.extend({ - type: 'icon', - fill: _this2._oColor - }, selectionStyle, options, _this2.graphics.controlStyle)); + /** + * @private + */ + _getLeftTopCoords: function() { + return this.translateToOriginPoint(this.getCenterPoint(), 'left', 'top'); + }, + }); - canvas.add(icon).setActiveObject(icon); +})(); - resolve(_this2.graphics.createObjectProperties(icon)); - }); - } + +(function() { + + function arrayFromCoords(coords) { + return [ + new fabric.Point(coords.tl.x, coords.tl.y), + new fabric.Point(coords.tr.x, coords.tr.y), + new fabric.Point(coords.br.x, coords.br.y), + new fabric.Point(coords.bl.x, coords.bl.y) + ]; + } + + var util = fabric.util, + degreesToRadians = util.degreesToRadians, + multiplyMatrices = util.multiplyTransformMatrices, + transformPoint = util.transformPoint; + + util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { /** - * Register icon paths - * @param {{key: string, value: string}} pathInfos - Path infos + * Describe object's corner position in canvas element coordinates. + * properties are depending on control keys and padding the main controls. + * each property is an object with x, y and corner. + * The `corner` property contains in a similar manner the 4 points of the + * interactive area of the corner. + * The coordinates depends from the controls positionHandler and are used + * to draw and locate controls + * @memberOf fabric.Object.prototype */ + oCoords: null, - }, { - key: 'registerPaths', - value: function registerPaths(pathInfos) { - var _this3 = this; + /** + * Describe object's corner position in canvas object absolute coordinates + * properties are tl,tr,bl,br and describe the four main corner. + * each property is an object with x, y, instance of Fabric.Point. + * The coordinates depends from this properties: width, height, scaleX, scaleY + * skewX, skewY, angle, strokeWidth, top, left. + * Those coordinates are useful to understand where an object is. They get updated + * with oCoords but they do not need to be updated when zoom or panning change. + * The coordinates get updated with @method setCoords. + * You can calculate them without updating with @method calcACoords(); + * @memberOf fabric.Object.prototype + */ + aCoords: null, - _tuiCodeSnippet2.default.forEach(pathInfos, function (path, type) { - _this3._pathMap[type] = path; - }, this); - } + /** + * Describe object's corner position in canvas element coordinates. + * includes padding. Used of object detection. + * set and refreshed with setCoords and calcCoords. + * @memberOf fabric.Object.prototype + */ + lineCoords: null, /** - * Set icon object color - * @param {string} color - Color to set - * @param {fabric.Path}[obj] - Current activated path object + * storage for object transform matrix */ + ownMatrixCache: null, - }, { - key: 'setColor', - value: function setColor(color, obj) { - this._oColor = color; + /** + * storage for object full transform matrix + */ + matrixCache: null, - if (obj && obj.get('type') === 'icon') { - obj.set({ fill: this._oColor }); - this.getCanvas().renderAll(); + /** + * custom controls interface + * controls are added by default_controls.js + */ + controls: { }, + + /** + * return correct set of coordinates for intersection + * this will return either aCoords or lineCoords. + * @param {Boolean} absolute will return aCoords if true or lineCoords + * @return {Object} {tl, tr, br, bl} points + */ + _getCoords: function(absolute, calculate) { + if (calculate) { + return (absolute ? this.calcACoords() : this.calcLineCoords()); } - } + if (!this.aCoords || !this.lineCoords) { + this.setCoords(true); + } + return (absolute ? this.aCoords : this.lineCoords); + }, /** - * Get icon color - * @param {fabric.Path}[obj] - Current activated path object - * @returns {string} color + * return correct set of coordinates for intersection + * this will return either aCoords or lineCoords. + * The coords are returned in an array. + * @return {Array} [tl, tr, br, bl] of points */ + getCoords: function(absolute, calculate) { + return arrayFromCoords(this._getCoords(absolute, calculate)); + }, - }, { - key: 'getColor', - value: function getColor(obj) { - return obj.fill; - } + /** + * Checks if object intersects with an area formed by 2 points + * @param {Object} pointTL top-left point of area + * @param {Object} pointBR bottom-right point of area + * @param {Boolean} [absolute] use coordinates without viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords + * @return {Boolean} true if object intersects with an area formed by 2 points + */ + intersectsWithRect: function(pointTL, pointBR, absolute, calculate) { + var coords = this.getCoords(absolute, calculate), + intersection = fabric.Intersection.intersectPolygonRectangle( + coords, + pointTL, + pointBR + ); + return intersection.status === 'Intersection'; + }, /** - * Create icon object - * @param {string} path - Path value to create icon - * @returns {fabric.Path} Path object + * Checks if object intersects with another object + * @param {Object} other Object to test + * @param {Boolean} [absolute] use coordinates without viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords + * @return {Boolean} true if object intersects with another object */ + intersectsWithObject: function(other, absolute, calculate) { + var intersection = fabric.Intersection.intersectPolygonPolygon( + this.getCoords(absolute, calculate), + other.getCoords(absolute, calculate) + ); - }, { - key: '_createIcon', - value: function _createIcon(path) { - return new _fabric2.default.Path(path); - } + return intersection.status === 'Intersection' + || other.isContainedWithinObject(this, absolute, calculate) + || this.isContainedWithinObject(other, absolute, calculate); + }, /** - * MouseDown event handler on canvas - * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object - * @private + * Checks if object is fully contained within area of another object + * @param {Object} other Object to test + * @param {Boolean} [absolute] use coordinates without viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords + * @return {Boolean} true if object is fully contained within area of another object */ + isContainedWithinObject: function(other, absolute, calculate) { + var points = this.getCoords(absolute, calculate), + otherCoords = absolute ? other.aCoords : other.lineCoords, + i = 0, lines = other._getImageLines(otherCoords); + for (; i < 4; i++) { + if (!other.containsPoint(points[i], lines)) { + return false; + } + } + return true; + }, - }, { - key: '_onFabricMouseDown', - value: function _onFabricMouseDown(fEvent) { - var _this4 = this; - - var canvas = this.getCanvas(); + /** + * Checks if object is fully contained within area formed by 2 points + * @param {Object} pointTL top-left point of area + * @param {Object} pointBR bottom-right point of area + * @param {Boolean} [absolute] use coordinates without viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords + * @return {Boolean} true if object is fully contained within area formed by 2 points + */ + isContainedWithinRect: function(pointTL, pointBR, absolute, calculate) { + var boundingRect = this.getBoundingRect(absolute, calculate); - this._startPoint = canvas.getPointer(fEvent.e); - var _startPoint = this._startPoint, - left = _startPoint.x, - top = _startPoint.y; + return ( + boundingRect.left >= pointTL.x && + boundingRect.left + boundingRect.width <= pointBR.x && + boundingRect.top >= pointTL.y && + boundingRect.top + boundingRect.height <= pointBR.y + ); + }, + /** + * Checks if point is inside the object + * @param {fabric.Point} point Point to check against + * @param {Object} [lines] object returned from @method _getImageLines + * @param {Boolean} [absolute] use coordinates without viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords + * @return {Boolean} true if point is inside the object + */ + containsPoint: function(point, lines, absolute, calculate) { + var coords = this._getCoords(absolute, calculate), + lines = lines || this._getImageLines(coords), + xPoints = this._findCrossPoints(point, lines); + // if xPoints is odd then point is inside the object + return (xPoints !== 0 && xPoints % 2 === 1); + }, - this.add(this._type, { - left: left, - top: top, - fill: this._iconColor - }).then(function () { - _this4.fire(_consts.eventNames.ADD_OBJECT, _this4.graphics.createObjectProperties(_this4._icon)); - canvas.on('mouse:move', _this4._handlers.mousemove); - canvas.on('mouse:up', _this4._handlers.mouseup); - }); - } + /** + * Checks if object is contained within the canvas with current viewportTransform + * the check is done stopping at first point that appears on screen + * @param {Boolean} [calculate] use coordinates of current position instead of .aCoords + * @return {Boolean} true if object is fully or partially contained within canvas + */ + isOnScreen: function(calculate) { + if (!this.canvas) { + return false; + } + var pointTL = this.canvas.vptCoords.tl, pointBR = this.canvas.vptCoords.br; + var points = this.getCoords(true, calculate); + // if some point is on screen, the object is on screen. + if (points.some(function(point) { + return point.x <= pointBR.x && point.x >= pointTL.x && + point.y <= pointBR.y && point.y >= pointTL.y; + })) { + return true; + } + // no points on screen, check intersection with absolute coordinates + if (this.intersectsWithRect(pointTL, pointBR, true, calculate)) { + return true; + } + return this._containsCenterOfCanvas(pointTL, pointBR, calculate); + }, /** - * MouseMove event handler on canvas - * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object + * Checks if the object contains the midpoint between canvas extremities + * Does not make sense outside the context of isOnScreen and isPartiallyOnScreen * @private + * @param {Fabric.Point} pointTL Top Left point + * @param {Fabric.Point} pointBR Top Right point + * @param {Boolean} calculate use coordinates of current position instead of .oCoords + * @return {Boolean} true if the object contains the point */ - - }, { - key: '_onFabricMouseMove', - value: function _onFabricMouseMove(fEvent) { - var canvas = this.getCanvas(); - - if (!this._icon) { - return; + _containsCenterOfCanvas: function(pointTL, pointBR, calculate) { + // worst case scenario the object is so big that contains the screen + var centerPoint = { x: (pointTL.x + pointBR.x) / 2, y: (pointTL.y + pointBR.y) / 2 }; + if (this.containsPoint(centerPoint, null, true, calculate)) { + return true; } - var moveOriginPointer = canvas.getPointer(fEvent.e); - - var scaleX = (moveOriginPointer.x - this._startPoint.x) / this._icon.width; - var scaleY = (moveOriginPointer.y - this._startPoint.y) / this._icon.height; + return false; + }, - this._icon.set({ - scaleX: Math.abs(scaleX * 2), - scaleY: Math.abs(scaleY * 2) + /** + * Checks if object is partially contained within the canvas with current viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords + * @return {Boolean} true if object is partially contained within canvas + */ + isPartiallyOnScreen: function(calculate) { + if (!this.canvas) { + return false; + } + var pointTL = this.canvas.vptCoords.tl, pointBR = this.canvas.vptCoords.br; + if (this.intersectsWithRect(pointTL, pointBR, true, calculate)) { + return true; + } + var allPointsAreOutside = this.getCoords(true, calculate).every(function(point) { + return (point.x >= pointBR.x || point.x <= pointTL.x) && + (point.y >= pointBR.y || point.y <= pointTL.y); }); - - this._icon.setCoords(); - canvas.renderAll(); - } + return allPointsAreOutside && this._containsCenterOfCanvas(pointTL, pointBR, calculate); + }, /** - * MouseUp event handler on canvas + * Method that returns an object with the object edges in it, given the coordinates of the corners * @private + * @param {Object} oCoords Coordinates of the object corners */ + _getImageLines: function(oCoords) { - }, { - key: '_onFabricMouseUp', - value: function _onFabricMouseUp() { - var canvas = this.getCanvas(); - - this.fire(_consts.eventNames.OBJECT_ADDED, this.graphics.createObjectProperties(this._icon)); - - this._icon = null; - - canvas.off('mouse:down', this._handlers.mousedown); - canvas.off('mouse:move', this._handlers.mousemove); - canvas.off('mouse:up', this._handlers.mouseup); - } - }]); + var lines = { + topline: { + o: oCoords.tl, + d: oCoords.tr + }, + rightline: { + o: oCoords.tr, + d: oCoords.br + }, + bottomline: { + o: oCoords.br, + d: oCoords.bl + }, + leftline: { + o: oCoords.bl, + d: oCoords.tl + } + }; - return Icon; -}(_component2.default); + // // debugging + // if (this.canvas.contextTop) { + // this.canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2); + // } + + return lines; + }, -exports.default = Icon; + /** + * Helper method to determine how many cross points are between the 4 object edges + * and the horizontal line determined by a point on canvas + * @private + * @param {fabric.Point} point Point to check + * @param {Object} lines Coordinates of the object being evaluated + */ + // remove yi, not used but left code here just in case. + _findCrossPoints: function(point, lines) { + var b1, b2, a1, a2, xi, // yi, + xcount = 0, + iLine; -/***/ }), + for (var lineKey in lines) { + iLine = lines[lineKey]; + // optimisation 1: line below point. no cross + if ((iLine.o.y < point.y) && (iLine.d.y < point.y)) { + continue; + } + // optimisation 2: line above point. no cross + if ((iLine.o.y >= point.y) && (iLine.d.y >= point.y)) { + continue; + } + // optimisation 3: vertical line case + if ((iLine.o.x === iLine.d.x) && (iLine.o.x >= point.x)) { + xi = iLine.o.x; + // yi = point.y; + } + // calculate the intersection point + else { + b1 = 0; + b2 = (iLine.d.y - iLine.o.y) / (iLine.d.x - iLine.o.x); + a1 = point.y - b1 * point.x; + a2 = iLine.o.y - b2 * iLine.o.x; + + xi = -(a1 - a2) / (b1 - b2); + // yi = a1 + b1 * xi; + } + // dont count xi < point.x cases + if (xi >= point.x) { + xcount += 1; + } + // optimisation 4: specific for square images + if (xcount === 2) { + break; + } + } + return xcount; + }, -/***/ "./src/js/component/imageLoader.js": -/*!*****************************************!*\ - !*** ./src/js/component/imageLoader.js ***! - \*****************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Returns coordinates of object's bounding rectangle (left, top, width, height) + * the box is intended as aligned to axis of canvas. + * @param {Boolean} [absolute] use coordinates without viewportTransform + * @param {Boolean} [calculate] use coordinates of current position instead of .oCoords / .aCoords + * @return {Object} Object with left, top, width, height properties + */ + getBoundingRect: function(absolute, calculate) { + var coords = this.getCoords(absolute, calculate); + return util.makeBoundingBoxFromPoints(coords); + }, -"use strict"; + /** + * Returns width of an object's bounding box counting transformations + * before 2.0 it was named getWidth(); + * @return {Number} width value + */ + getScaledWidth: function() { + return this._getTransformedDimensions().x; + }, + /** + * Returns height of an object bounding box counting transformations + * before 2.0 it was named getHeight(); + * @return {Number} height value + */ + getScaledHeight: function() { + return this._getTransformedDimensions().y; + }, -Object.defineProperty(exports, "__esModule", { - value: true -}); - -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); - -var _component = __webpack_require__(/*! @/interface/component */ "./src/js/interface/component.js"); - -var _component2 = _interopRequireDefault(_component); - -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + /** + * Makes sure the scale is valid and modifies it if necessary + * @private + * @param {Number} value + * @return {Number} + */ + _constrainScale: function(value) { + if (Math.abs(value) < this.minScaleLimit) { + if (value < 0) { + return -this.minScaleLimit; + } + else { + return this.minScaleLimit; + } + } + else if (value === 0) { + return 0.0001; + } + return value; + }, -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + /** + * Scales an object (equally by x and y) + * @param {Number} value Scale factor + * @return {fabric.Object} thisArg + * @chainable + */ + scale: function(value) { + this._set('scaleX', value); + this._set('scaleY', value); + return this.setCoords(); + }, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Scales an object to a given width, with respect to bounding box (scaling by x/y equally) + * @param {Number} value New width value + * @param {Boolean} absolute ignore viewport + * @return {fabric.Object} thisArg + * @chainable + */ + scaleToWidth: function(value, absolute) { + // adjust to bounding rect factor so that rotated shapes would fit as well + var boundingRectFactor = this.getBoundingRect(absolute).width / this.getScaledWidth(); + return this.scale(value / this.width / boundingRectFactor); + }, -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + /** + * Scales an object to a given height, with respect to bounding box (scaling by x/y equally) + * @param {Number} value New height value + * @param {Boolean} absolute ignore viewport + * @return {fabric.Object} thisArg + * @chainable + */ + scaleToHeight: function(value, absolute) { + // adjust to bounding rect factor so that rotated shapes would fit as well + var boundingRectFactor = this.getBoundingRect(absolute).height / this.getScaledHeight(); + return this.scale(value / this.height / boundingRectFactor); + }, -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + /** + * Calculates and returns the .coords of an object. + * unused by the library, only for the end dev. + * @return {Object} Object with tl, tr, br, bl .... + * @chainable + * @deprecated + */ + calcCoords: function(absolute) { + // this is a compatibility function to avoid removing calcCoords now. + if (absolute) { + return this.calcACoords(); + } + return this.calcOCoords(); + }, -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** - * @author NHN. FE Development Team - * @fileoverview Image loader - */ + calcLineCoords: function() { + var vpt = this.getViewportTransform(), + padding = this.padding, angle = degreesToRadians(this.angle), + cos = util.cos(angle), sin = util.sin(angle), + cosP = cos * padding, sinP = sin * padding, cosPSinP = cosP + sinP, + cosPMinusSinP = cosP - sinP, aCoords = this.calcACoords(); + + var lineCoords = { + tl: transformPoint(aCoords.tl, vpt), + tr: transformPoint(aCoords.tr, vpt), + bl: transformPoint(aCoords.bl, vpt), + br: transformPoint(aCoords.br, vpt), + }; + if (padding) { + lineCoords.tl.x -= cosPMinusSinP; + lineCoords.tl.y -= cosPSinP; + lineCoords.tr.x += cosPSinP; + lineCoords.tr.y -= cosPMinusSinP; + lineCoords.bl.x -= cosPSinP; + lineCoords.bl.y += cosPMinusSinP; + lineCoords.br.x += cosPMinusSinP; + lineCoords.br.y += cosPSinP; + } -var imageOption = { - padding: 0, - crossOrigin: 'Anonymous' -}; + return lineCoords; + }, -/** - * ImageLoader components - * @extends {Component} - * @class ImageLoader - * @param {Graphics} graphics - Graphics instance - * @ignore - */ + calcOCoords: function() { + var rotateMatrix = this._calcRotateMatrix(), + translateMatrix = this._calcTranslateMatrix(), + vpt = this.getViewportTransform(), + startMatrix = multiplyMatrices(vpt, translateMatrix), + finalMatrix = multiplyMatrices(startMatrix, rotateMatrix), + finalMatrix = multiplyMatrices(finalMatrix, [1 / vpt[0], 0, 0, 1 / vpt[3], 0, 0]), + dim = this._calculateCurrentDimensions(), + coords = {}; + this.forEachControl(function(control, key, fabricObject) { + coords[key] = control.positionHandler(dim, finalMatrix, fabricObject); + }); -var ImageLoader = function (_Component) { - _inherits(ImageLoader, _Component); + // debug code + // var canvas = this.canvas; + // setTimeout(function() { + // canvas.contextTop.clearRect(0, 0, 700, 700); + // canvas.contextTop.fillStyle = 'green'; + // Object.keys(coords).forEach(function(key) { + // var control = coords[key]; + // canvas.contextTop.fillRect(control.x, control.y, 3, 3); + // }); + // }, 50); + return coords; + }, - function ImageLoader(graphics) { - _classCallCheck(this, ImageLoader); + calcACoords: function() { + var rotateMatrix = this._calcRotateMatrix(), + translateMatrix = this._calcTranslateMatrix(), + finalMatrix = multiplyMatrices(translateMatrix, rotateMatrix), + dim = this._getTransformedDimensions(), + w = dim.x / 2, h = dim.y / 2; + return { + // corners + tl: transformPoint({ x: -w, y: -h }, finalMatrix), + tr: transformPoint({ x: w, y: -h }, finalMatrix), + bl: transformPoint({ x: -w, y: h }, finalMatrix), + br: transformPoint({ x: w, y: h }, finalMatrix) + }; + }, - return _possibleConstructorReturn(this, (ImageLoader.__proto__ || Object.getPrototypeOf(ImageLoader)).call(this, _consts.componentNames.IMAGE_LOADER, graphics)); - } + /** + * Sets corner and controls position coordinates based on current angle, width and height, left and top. + * oCoords are used to find the corners + * aCoords are used to quickly find an object on the canvas + * lineCoords are used to quickly find object during pointer events. + * See {@link https://github.com/kangax/fabric.js/wiki/When-to-call-setCoords|When-to-call-setCoords} + * @param {Boolean} [skipCorners] skip calculation of oCoords. + * @return {fabric.Object} thisArg + * @chainable + */ + setCoords: function(skipCorners) { + this.aCoords = this.calcACoords(); + // in case we are in a group, for how the inner group target check works, + // lineCoords are exactly aCoords. Since the vpt gets absorbed by the normalized pointer. + this.lineCoords = this.group ? this.aCoords : this.calcLineCoords(); + if (skipCorners) { + return this; + } + // set coordinates of the draggable boxes in the corners used to scale/rotate the image + this.oCoords = this.calcOCoords(); + this._setCornerCoords && this._setCornerCoords(); + return this; + }, - /** - * Load image from url - * @param {?string} imageName - File name - * @param {?(fabric.Image|string)} img - fabric.Image instance or URL of an image - * @returns {Promise} - */ + /** + * calculate rotation matrix of an object + * @return {Array} rotation matrix for the object + */ + _calcRotateMatrix: function() { + return util.calcRotateMatrix(this); + }, + /** + * calculate the translation matrix for an object transform + * @return {Array} rotation matrix for the object + */ + _calcTranslateMatrix: function() { + var center = this.getCenterPoint(); + return [1, 0, 0, 1, center.x, center.y]; + }, - _createClass(ImageLoader, [{ - key: 'load', - value: function load(imageName, img) { - var _this2 = this; + transformMatrixKey: function(skipGroup) { + var sep = '_', prefix = ''; + if (!skipGroup && this.group) { + prefix = this.group.transformMatrixKey(skipGroup) + sep; + }; + return prefix + this.top + sep + this.left + sep + this.scaleX + sep + this.scaleY + + sep + this.skewX + sep + this.skewY + sep + this.angle + sep + this.originX + sep + this.originY + + sep + this.width + sep + this.height + sep + this.strokeWidth + this.flipX + this.flipY; + }, - var promise = void 0; + /** + * calculate transform matrix that represents the current transformations from the + * object's properties. + * @param {Boolean} [skipGroup] return transform matrix for object not counting parent transformations + * There are some situation in which this is useful to avoid the fake rotation. + * @return {Array} transform matrix for the object + */ + calcTransformMatrix: function(skipGroup) { + var matrix = this.calcOwnMatrix(); + if (skipGroup || !this.group) { + return matrix; + } + var key = this.transformMatrixKey(skipGroup), cache = this.matrixCache || (this.matrixCache = {}); + if (cache.key === key) { + return cache.value; + } + if (this.group) { + matrix = multiplyMatrices(this.group.calcTransformMatrix(false), matrix); + } + cache.key = key; + cache.value = matrix; + return matrix; + }, - if (!imageName && !img) { - // Back to the initial state, not error. - var canvas = this.getCanvas(); + /** + * calculate transform matrix that represents the current transformations from the + * object's properties, this matrix does not include the group transformation + * @return {Array} transform matrix for the object + */ + calcOwnMatrix: function() { + var key = this.transformMatrixKey(true), cache = this.ownMatrixCache || (this.ownMatrixCache = {}); + if (cache.key === key) { + return cache.value; + } + var tMatrix = this._calcTranslateMatrix(), + options = { + angle: this.angle, + translateX: tMatrix[4], + translateY: tMatrix[5], + scaleX: this.scaleX, + scaleY: this.scaleY, + skewX: this.skewX, + skewY: this.skewY, + flipX: this.flipX, + flipY: this.flipY, + }; + cache.key = key; + cache.value = util.composeMatrix(options); + return cache.value; + }, - canvas.backgroundImage = null; - canvas.renderAll(); + /* + * Calculate object dimensions from its properties + * @private + * @deprecated since 3.4.0, please use fabric.util._calcDimensionsTransformMatrix + * not including or including flipX, flipY to emulate the flipping boolean + * @return {Object} .x width dimension + * @return {Object} .y height dimension + */ + _calcDimensionsTransformMatrix: function(skewX, skewY, flipping) { + return util.calcDimensionsMatrix({ + skewX: skewX, + skewY: skewY, + scaleX: this.scaleX * (flipping && this.flipX ? -1 : 1), + scaleY: this.scaleY * (flipping && this.flipY ? -1 : 1) + }); + }, - promise = new _util.Promise(function (resolve) { - _this2.setCanvasImage('', null); - resolve(); - }); - } else { - promise = this._setBackgroundImage(img).then(function (oImage) { - _this2.setCanvasImage(imageName, oImage); - _this2.adjustCanvasDimension(); + /* + * Calculate object dimensions from its properties + * @private + * @return {Object} .x width dimension + * @return {Object} .y height dimension + */ + _getNonTransformedDimensions: function() { + var strokeWidth = this.strokeWidth, + w = this.width + strokeWidth, + h = this.height + strokeWidth; + return { x: w, y: h }; + }, - return oImage; - }); + /* + * Calculate object bounding box dimensions from its properties scale, skew. + * @param {Number} skewX, a value to override current skewX + * @param {Number} skewY, a value to override current skewY + * @private + * @return {Object} .x width dimension + * @return {Object} .y height dimension + */ + _getTransformedDimensions: function(skewX, skewY) { + if (typeof skewX === 'undefined') { + skewX = this.skewX; } + if (typeof skewY === 'undefined') { + skewY = this.skewY; + } + var dimensions, dimX, dimY, + noSkew = skewX === 0 && skewY === 0; - return promise; - } + if (this.strokeUniform) { + dimX = this.width; + dimY = this.height; + } + else { + dimensions = this._getNonTransformedDimensions(); + dimX = dimensions.x; + dimY = dimensions.y; + } + if (noSkew) { + return this._finalizeDimensions(dimX * this.scaleX, dimY * this.scaleY); + } + var bbox = util.sizeAfterTransform(dimX, dimY, { + scaleX: this.scaleX, + scaleY: this.scaleY, + skewX: skewX, + skewY: skewY, + }); + return this._finalizeDimensions(bbox.x, bbox.y); + }, - /** - * Set background image - * @param {?(fabric.Image|String)} img fabric.Image instance or URL of an image to set background to - * @returns {Promise} + /* + * Calculate object bounding box dimensions from its properties scale, skew. + * @param Number width width of the bbox + * @param Number height height of the bbox * @private + * @return {Object} .x finalized width dimension + * @return {Object} .y finalized height dimension */ + _finalizeDimensions: function(width, height) { + return this.strokeUniform ? + { x: width + this.strokeWidth, y: height + this.strokeWidth } + : + { x: width, y: height }; + }, - }, { - key: '_setBackgroundImage', - value: function _setBackgroundImage(img) { - var _this3 = this; + /* + * Calculate object dimensions for controls box, including padding and canvas zoom. + * and active selection + * private + */ + _calculateCurrentDimensions: function() { + var vpt = this.getViewportTransform(), + dim = this._getTransformedDimensions(), + p = transformPoint(dim, vpt, true); + return p.scalarAdd(2 * this.padding); + }, + }); +})(); - if (!img) { - return _util.Promise.reject(_consts.rejectMessages.loadImage); - } - return new _util.Promise(function (resolve, reject) { - var canvas = _this3.getCanvas(); +fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - canvas.setBackgroundImage(img, function () { - var oImage = canvas.backgroundImage; + /** + * Moves an object to the bottom of the stack of drawn objects + * @return {fabric.Object} thisArg + * @chainable + */ + sendToBack: function() { + if (this.group) { + fabric.StaticCanvas.prototype.sendToBack.call(this.group, this); + } + else if (this.canvas) { + this.canvas.sendToBack(this); + } + return this; + }, - if (oImage && oImage.getElement()) { - resolve(oImage); - } else { - reject(_consts.rejectMessages.loadingImageFailed); - } - }, imageOption); - }); + /** + * Moves an object to the top of the stack of drawn objects + * @return {fabric.Object} thisArg + * @chainable + */ + bringToFront: function() { + if (this.group) { + fabric.StaticCanvas.prototype.bringToFront.call(this.group, this); } - }]); + else if (this.canvas) { + this.canvas.bringToFront(this); + } + return this; + }, - return ImageLoader; -}(_component2.default); + /** + * Moves an object down in stack of drawn objects + * @param {Boolean} [intersecting] If `true`, send object behind next lower intersecting object + * @return {fabric.Object} thisArg + * @chainable + */ + sendBackwards: function(intersecting) { + if (this.group) { + fabric.StaticCanvas.prototype.sendBackwards.call(this.group, this, intersecting); + } + else if (this.canvas) { + this.canvas.sendBackwards(this, intersecting); + } + return this; + }, -exports.default = ImageLoader; + /** + * Moves an object up in stack of drawn objects + * @param {Boolean} [intersecting] If `true`, send object in front of next upper intersecting object + * @return {fabric.Object} thisArg + * @chainable + */ + bringForward: function(intersecting) { + if (this.group) { + fabric.StaticCanvas.prototype.bringForward.call(this.group, this, intersecting); + } + else if (this.canvas) { + this.canvas.bringForward(this, intersecting); + } + return this; + }, -/***/ }), + /** + * Moves an object to specified level in stack of drawn objects + * @param {Number} index New position of object + * @return {fabric.Object} thisArg + * @chainable + */ + moveTo: function(index) { + if (this.group && this.group.type !== 'activeSelection') { + fabric.StaticCanvas.prototype.moveTo.call(this.group, this, index); + } + else if (this.canvas) { + this.canvas.moveTo(this, index); + } + return this; + } +}); -/***/ "./src/js/component/line.js": -/*!**********************************!*\ - !*** ./src/js/component/line.js ***! - \**********************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { -"use strict"; +/* _TO_SVG_START_ */ +(function() { + function getSvgColorString(prop, value) { + if (!value) { + return prop + ': none; '; + } + else if (value.toLive) { + return prop + ': url(#SVGID_' + value.id + '); '; + } + else { + var color = new fabric.Color(value), + str = prop + ': ' + color.toRgb() + '; ', + opacity = color.getAlpha(); + if (opacity !== 1) { + //change the color in rgb + opacity + str += prop + '-opacity: ' + opacity.toString() + '; '; + } + return str; + } + } + var toFixed = fabric.util.toFixed; + + fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + /** + * Returns styles-string for svg-export + * @param {Boolean} skipShadow a boolean to skip shadow filter output + * @return {String} + */ + getSvgStyles: function(skipShadow) { + + var fillRule = this.fillRule ? this.fillRule : 'nonzero', + strokeWidth = this.strokeWidth ? this.strokeWidth : '0', + strokeDashArray = this.strokeDashArray ? this.strokeDashArray.join(' ') : 'none', + strokeDashOffset = this.strokeDashOffset ? this.strokeDashOffset : '0', + strokeLineCap = this.strokeLineCap ? this.strokeLineCap : 'butt', + strokeLineJoin = this.strokeLineJoin ? this.strokeLineJoin : 'miter', + strokeMiterLimit = this.strokeMiterLimit ? this.strokeMiterLimit : '4', + opacity = typeof this.opacity !== 'undefined' ? this.opacity : '1', + visibility = this.visible ? '' : ' visibility: hidden;', + filter = skipShadow ? '' : this.getSvgFilter(), + fill = getSvgColorString('fill', this.fill), + stroke = getSvgColorString('stroke', this.stroke); + + return [ + stroke, + 'stroke-width: ', strokeWidth, '; ', + 'stroke-dasharray: ', strokeDashArray, '; ', + 'stroke-linecap: ', strokeLineCap, '; ', + 'stroke-dashoffset: ', strokeDashOffset, '; ', + 'stroke-linejoin: ', strokeLineJoin, '; ', + 'stroke-miterlimit: ', strokeMiterLimit, '; ', + fill, + 'fill-rule: ', fillRule, '; ', + 'opacity: ', opacity, ';', + filter, + visibility + ].join(''); + }, -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * Returns styles-string for svg-export + * @param {Object} style the object from which to retrieve style properties + * @param {Boolean} useWhiteSpace a boolean to include an additional attribute in the style. + * @return {String} + */ + getSvgSpanStyles: function(style, useWhiteSpace) { + var term = '; '; + var fontFamily = style.fontFamily ? + 'font-family: ' + (((style.fontFamily.indexOf('\'') === -1 && style.fontFamily.indexOf('"') === -1) ? + '\'' + style.fontFamily + '\'' : style.fontFamily)) + term : ''; + var strokeWidth = style.strokeWidth ? 'stroke-width: ' + style.strokeWidth + term : '', + fontFamily = fontFamily, + fontSize = style.fontSize ? 'font-size: ' + style.fontSize + 'px' + term : '', + fontStyle = style.fontStyle ? 'font-style: ' + style.fontStyle + term : '', + fontWeight = style.fontWeight ? 'font-weight: ' + style.fontWeight + term : '', + fill = style.fill ? getSvgColorString('fill', style.fill) : '', + stroke = style.stroke ? getSvgColorString('stroke', style.stroke) : '', + textDecoration = this.getSvgTextDecoration(style), + deltaY = style.deltaY ? 'baseline-shift: ' + (-style.deltaY) + '; ' : ''; + if (textDecoration) { + textDecoration = 'text-decoration: ' + textDecoration + term; + } + + return [ + stroke, + strokeWidth, + fontFamily, + fontSize, + fontStyle, + fontWeight, + textDecoration, + fill, + deltaY, + useWhiteSpace ? 'white-space: pre; ' : '' + ].join(''); + }, + + /** + * Returns text-decoration property for svg-export + * @param {Object} style the object from which to retrieve style properties + * @return {String} + */ + getSvgTextDecoration: function(style) { + return ['overline', 'underline', 'line-through'].filter(function(decoration) { + return style[decoration.replace('-', '')]; + }).join(' '); + }, -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + /** + * Returns filter for svg shadow + * @return {String} + */ + getSvgFilter: function() { + return this.shadow ? 'filter: url(#SVGID_' + this.shadow.id + ');' : ''; + }, -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); + /** + * Returns id attribute for svg output + * @return {String} + */ + getSvgCommons: function() { + return [ + this.id ? 'id="' + this.id + '" ' : '', + this.clipPath ? 'clip-path="url(#' + this.clipPath.clipPathId + ')" ' : '', + ].join(''); + }, -var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); + /** + * Returns transform-string for svg-export + * @param {Boolean} use the full transform or the single object one. + * @return {String} + */ + getSvgTransform: function(full, additionalTransform) { + var transform = full ? this.calcTransformMatrix() : this.calcOwnMatrix(), + svgTransform = 'transform="' + fabric.util.matrixToSVG(transform); + return svgTransform + + (additionalTransform || '') + '" '; + }, -var _fabric = __webpack_require__(/*! fabric */ "fabric"); + _setSVGBg: function(textBgRects) { + if (this.backgroundColor) { + var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; + textBgRects.push( + '\t\t\n'); + } + }, -var _fabric2 = _interopRequireDefault(_fabric); + /** + * Returns svg representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + toSVG: function(reviver) { + return this._createBaseSVGMarkup(this._toSVG(reviver), { reviver: reviver }); + }, -var _component = __webpack_require__(/*! @/interface/component */ "./src/js/interface/component.js"); + /** + * Returns svg clipPath representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + toClipPathSVG: function(reviver) { + return '\t' + this._createBaseClipPathSVGMarkup(this._toSVG(reviver), { reviver: reviver }); + }, -var _component2 = _interopRequireDefault(_component); + /** + * @private + */ + _createBaseClipPathSVGMarkup: function(objectMarkup, options) { + options = options || {}; + var reviver = options.reviver, + additionalTransform = options.additionalTransform || '', + commonPieces = [ + this.getSvgTransform(true, additionalTransform), + this.getSvgCommons(), + ].join(''), + // insert commons in the markup, style and svgCommons + index = objectMarkup.indexOf('COMMON_PARTS'); + objectMarkup[index] = commonPieces; + return reviver ? reviver(objectMarkup.join('')) : objectMarkup.join(''); + }, -var _arrowLine = __webpack_require__(/*! @/extension/arrowLine */ "./src/js/extension/arrowLine.js"); + /** + * @private + */ + _createBaseSVGMarkup: function(objectMarkup, options) { + options = options || {}; + var noStyle = options.noStyle, + reviver = options.reviver, + styleInfo = noStyle ? '' : 'style="' + this.getSvgStyles() + '" ', + shadowInfo = options.withShadow ? 'style="' + this.getSvgFilter() + '" ' : '', + clipPath = this.clipPath, + vectorEffect = this.strokeUniform ? 'vector-effect="non-scaling-stroke" ' : '', + absoluteClipPath = clipPath && clipPath.absolutePositioned, + stroke = this.stroke, fill = this.fill, shadow = this.shadow, + commonPieces, markup = [], clipPathMarkup, + // insert commons in the markup, style and svgCommons + index = objectMarkup.indexOf('COMMON_PARTS'), + additionalTransform = options.additionalTransform; + if (clipPath) { + clipPath.clipPathId = 'CLIPPATH_' + fabric.Object.__uid++; + clipPathMarkup = '\n' + + clipPath.toClipPathSVG(reviver) + + '\n'; + } + if (absoluteClipPath) { + markup.push( + '\n' + ); + } + markup.push( + '\n' + ); + commonPieces = [ + styleInfo, + vectorEffect, + noStyle ? '' : this.addPaintOrder(), ' ', + additionalTransform ? 'transform="' + additionalTransform + '" ' : '', + ].join(''); + objectMarkup[index] = commonPieces; + if (fill && fill.toLive) { + markup.push(fill.toSVG(this)); + } + if (stroke && stroke.toLive) { + markup.push(stroke.toSVG(this)); + } + if (shadow) { + markup.push(shadow.toSVG(this)); + } + if (clipPath) { + markup.push(clipPathMarkup); + } + markup.push(objectMarkup.join('')); + markup.push('\n'); + absoluteClipPath && markup.push('\n'); + return reviver ? reviver(markup.join('')) : markup.join(''); + }, -var _arrowLine2 = _interopRequireDefault(_arrowLine); + addPaintOrder: function() { + return this.paintFirst !== 'fill' ? ' paint-order="' + this.paintFirst + '" ' : ''; + } + }); +})(); +/* _TO_SVG_END_ */ -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +(function() { -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + var extend = fabric.util.object.extend, + originalSet = 'stateProperties'; -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + /* + Depends on `stateProperties` + */ + function saveProps(origin, destination, props) { + var tmpObj = { }, deep = true; + props.forEach(function(prop) { + tmpObj[prop] = origin[prop]; + }); -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** - * @author NHN. FE Development Team - * @fileoverview Free drawing module, Set brush - */ + extend(origin[destination], tmpObj, deep); + } + function _isEqual(origValue, currentValue, firstPass) { + if (origValue === currentValue) { + // if the objects are identical, return + return true; + } + else if (Array.isArray(origValue)) { + if (!Array.isArray(currentValue) || origValue.length !== currentValue.length) { + return false; + } + for (var i = 0, len = origValue.length; i < len; i++) { + if (!_isEqual(origValue[i], currentValue[i])) { + return false; + } + } + return true; + } + else if (origValue && typeof origValue === 'object') { + var keys = Object.keys(origValue), key; + if (!currentValue || + typeof currentValue !== 'object' || + (!firstPass && keys.length !== Object.keys(currentValue).length) + ) { + return false; + } + for (var i = 0, len = keys.length; i < len; i++) { + key = keys[i]; + // since clipPath is in the statefull cache list and the clipPath objects + // would be iterated as an object, this would lead to possible infinite recursion + // we do not want to compare those. + if (key === 'canvas' || key === 'group') { + continue; + } + if (!_isEqual(origValue[key], currentValue[key])) { + return false; + } + } + return true; + } + } -/** - * Line - * @class Line - * @param {Graphics} graphics - Graphics instance - * @extends {Component} - * @ignore - */ -var Line = function (_Component) { - _inherits(Line, _Component); - function Line(graphics) { - _classCallCheck(this, Line); + fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { /** - * Brush width - * @type {number} - * @private + * Returns true if object state (one of its state properties) was changed + * @param {String} [propertySet] optional name for the set of property we want to save + * @return {Boolean} true if instance' state has changed since `{@link fabric.Object#saveState}` was called */ - var _this = _possibleConstructorReturn(this, (Line.__proto__ || Object.getPrototypeOf(Line)).call(this, _consts.componentNames.LINE, graphics)); - - _this._width = 12; + hasStateChanged: function(propertySet) { + propertySet = propertySet || originalSet; + var dashedPropertySet = '_' + propertySet; + if (Object.keys(this[dashedPropertySet]).length < this[propertySet].length) { + return true; + } + return !_isEqual(this[dashedPropertySet], this, true); + }, /** - * fabric.Color instance for brush color - * @type {fabric.Color} - * @private + * Saves state of an object + * @param {Object} [options] Object with additional `stateProperties` array to include when saving state + * @return {fabric.Object} thisArg */ - _this._oColor = new _fabric2.default.Color('rgba(0, 0, 0, 0.5)'); + saveState: function(options) { + var propertySet = options && options.propertySet || originalSet, + destination = '_' + propertySet; + if (!this[destination]) { + return this.setupState(options); + } + saveProps(this, destination, this[propertySet]); + if (options && options.stateProperties) { + saveProps(this, destination, options.stateProperties); + } + return this; + }, /** - * Listeners - * @type {object.} - * @private + * Setups state of an object + * @param {Object} [options] Object with additional `stateProperties` array to include when saving state + * @return {fabric.Object} thisArg */ - _this._listeners = { - mousedown: _this._onFabricMouseDown.bind(_this), - mousemove: _this._onFabricMouseMove.bind(_this), - mouseup: _this._onFabricMouseUp.bind(_this) - }; - return _this; - } - - /** - * Start drawing line mode - * @param {{width: ?number, color: ?string}} [setting] - Brush width & color - */ - + setupState: function(options) { + options = options || { }; + var propertySet = options.propertySet || originalSet; + options.propertySet = propertySet; + this['_' + propertySet] = { }; + this.saveState(options); + return this; + } + }); +})(); - _createClass(Line, [{ - key: 'setHeadOption', - value: function setHeadOption(setting) { - var _setting$arrowType = setting.arrowType, - arrowType = _setting$arrowType === undefined ? { - head: null, - tail: null - } : _setting$arrowType; +(function() { - this._arrowType = arrowType; - } + var degreesToRadians = fabric.util.degreesToRadians; + fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { /** - * Start drawing line mode - * @param {{width: ?number, color: ?string}} [setting] - Brush width & color + * Determines which corner has been clicked + * @private + * @param {Object} pointer The pointer indicating the mouse position + * @return {String|Boolean} corner code (tl, tr, bl, br, etc.), or false if nothing is found */ + _findTargetCorner: function(pointer, forTouch) { + // objects in group, anykind, are not self modificable, + // must not return an hovered corner. + if (!this.hasControls || this.group || (!this.canvas || this.canvas._activeObject !== this)) { + return false; + } - }, { - key: 'start', - value: function start() { - var setting = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; - - var canvas = this.getCanvas(); - - canvas.defaultCursor = 'crosshair'; - canvas.selection = false; - - this.setHeadOption(setting); - this.setBrush(setting); + var ex = pointer.x, + ey = pointer.y, + xPoints, + lines, keys = Object.keys(this.oCoords), + j = keys.length - 1, i; + this.__corner = 0; - canvas.forEachObject(function (obj) { - obj.set({ - evented: false - }); - }); + // cycle in reverse order so we pick first the one on top + for (; j >= 0; j--) { + i = keys[j]; + if (!this.isControlVisible(i)) { + continue; + } - canvas.on({ - 'mouse:down': this._listeners.mousedown - }); - } + lines = this._getImageLines(forTouch ? this.oCoords[i].touchCorner : this.oCoords[i].corner); + // // debugging + // + // this.canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2); + // + // this.canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2); + // this.canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2); + + xPoints = this._findCrossPoints({ x: ex, y: ey }, lines); + if (xPoints !== 0 && xPoints % 2 === 1) { + this.__corner = i; + return i; + } + } + return false; + }, /** - * Set brush - * @param {{width: ?number, color: ?string}} [setting] - Brush width & color + * Calls a function for each control. The function gets called, + * with the control, the object that is calling the iterator and the control's key + * @param {Function} fn function to iterate over the controls over */ + forEachControl: function(fn) { + for (var i in this.controls) { + fn(this.controls[i], i, this); + }; + }, - }, { - key: 'setBrush', - value: function setBrush(setting) { - var brush = this.getCanvas().freeDrawingBrush; - - setting = setting || {}; - this._width = setting.width || this._width; + /** + * Sets the coordinates of the draggable boxes in the corners of + * the image used to scale/rotate it. + * note: if we would switch to ROUND corner area, all of this would disappear. + * everything would resolve to a single point and a pythagorean theorem for the distance + * @private + */ + _setCornerCoords: function() { + var coords = this.oCoords; - if (setting.color) { - this._oColor = new _fabric2.default.Color(setting.color); + for (var control in coords) { + var controlObject = this.controls[control]; + coords[control].corner = controlObject.calcCornerCoords( + this.angle, this.cornerSize, coords[control].x, coords[control].y, false); + coords[control].touchCorner = controlObject.calcCornerCoords( + this.angle, this.touchCornerSize, coords[control].x, coords[control].y, true); } - brush.width = this._width; - brush.color = this._oColor.toRgba(); - } + }, /** - * End drawing line mode - */ + * Draws a colored layer behind the object, inside its selection borders. + * Requires public options: padding, selectionBackgroundColor + * this function is called when the context is transformed + * has checks to be skipped when the object is on a staticCanvas + * @param {CanvasRenderingContext2D} ctx Context to draw on + * @return {fabric.Object} thisArg + * @chainable + */ + drawSelectionBackground: function(ctx) { + if (!this.selectionBackgroundColor || + (this.canvas && !this.canvas.interactive) || + (this.canvas && this.canvas._activeObject !== this) + ) { + return this; + } + ctx.save(); + var center = this.getCenterPoint(), wh = this._calculateCurrentDimensions(), + vpt = this.canvas.viewportTransform; + ctx.translate(center.x, center.y); + ctx.scale(1 / vpt[0], 1 / vpt[3]); + ctx.rotate(degreesToRadians(this.angle)); + ctx.fillStyle = this.selectionBackgroundColor; + ctx.fillRect(-wh.x / 2, -wh.y / 2, wh.x, wh.y); + ctx.restore(); + return this; + }, - }, { - key: 'end', - value: function end() { - var canvas = this.getCanvas(); + /** + * Draws borders of an object's bounding box. + * Requires public properties: width, height + * Requires public options: padding, borderColor + * @param {CanvasRenderingContext2D} ctx Context to draw on + * @param {Object} styleOverride object to override the object style + * @return {fabric.Object} thisArg + * @chainable + */ + drawBorders: function(ctx, styleOverride) { + styleOverride = styleOverride || {}; + var wh = this._calculateCurrentDimensions(), + strokeWidth = this.borderScaleFactor, + width = wh.x + strokeWidth, + height = wh.y + strokeWidth, + hasControls = typeof styleOverride.hasControls !== 'undefined' ? + styleOverride.hasControls : this.hasControls, + shouldStroke = false; + + ctx.save(); + ctx.strokeStyle = styleOverride.borderColor || this.borderColor; + this._setLineDash(ctx, styleOverride.borderDashArray || this.borderDashArray); + + ctx.strokeRect( + -width / 2, + -height / 2, + width, + height + ); + + if (hasControls) { + ctx.beginPath(); + this.forEachControl(function(control, key, fabricObject) { + // in this moment, the ctx is centered on the object. + // width and height of the above function are the size of the bbox. + if (control.withConnection && control.getVisibility(fabricObject, key)) { + // reset movement for each control + shouldStroke = true; + ctx.moveTo(control.x * width, control.y * height); + ctx.lineTo( + control.x * width + control.offsetX, + control.y * height + control.offsetY + ); + } + }); + if (shouldStroke) { + ctx.stroke(); + } + } + ctx.restore(); + return this; + }, - canvas.defaultCursor = 'default'; - canvas.selection = true; + /** + * Draws borders of an object's bounding box when it is inside a group. + * Requires public properties: width, height + * Requires public options: padding, borderColor + * @param {CanvasRenderingContext2D} ctx Context to draw on + * @param {object} options object representing current object parameters + * @param {Object} styleOverride object to override the object style + * @return {fabric.Object} thisArg + * @chainable + */ + drawBordersInGroup: function(ctx, options, styleOverride) { + styleOverride = styleOverride || {}; + var bbox = fabric.util.sizeAfterTransform(this.width, this.height, options), + strokeWidth = this.strokeWidth, + strokeUniform = this.strokeUniform, + borderScaleFactor = this.borderScaleFactor, + width = + bbox.x + strokeWidth * (strokeUniform ? this.canvas.getZoom() : options.scaleX) + borderScaleFactor, + height = + bbox.y + strokeWidth * (strokeUniform ? this.canvas.getZoom() : options.scaleY) + borderScaleFactor; + ctx.save(); + this._setLineDash(ctx, styleOverride.borderDashArray || this.borderDashArray); + ctx.strokeStyle = styleOverride.borderColor || this.borderColor; + ctx.strokeRect( + -width / 2, + -height / 2, + width, + height + ); + + ctx.restore(); + return this; + }, - canvas.forEachObject(function (obj) { - obj.set({ - evented: true - }); + /** + * Draws corners of an object's bounding box. + * Requires public properties: width, height + * Requires public options: cornerSize, padding + * @param {CanvasRenderingContext2D} ctx Context to draw on + * @param {Object} styleOverride object to override the object style + * @return {fabric.Object} thisArg + * @chainable + */ + drawControls: function(ctx, styleOverride) { + styleOverride = styleOverride || {}; + ctx.save(); + var retinaScaling = this.canvas.getRetinaScaling(), matrix, p; + ctx.setTransform(retinaScaling, 0, 0, retinaScaling, 0, 0); + ctx.strokeStyle = ctx.fillStyle = styleOverride.cornerColor || this.cornerColor; + if (!this.transparentCorners) { + ctx.strokeStyle = styleOverride.cornerStrokeColor || this.cornerStrokeColor; + } + this._setLineDash(ctx, styleOverride.cornerDashArray || this.cornerDashArray); + this.setCoords(); + if (this.group) { + // fabricJS does not really support drawing controls inside groups, + // this piece of code here helps having at least the control in places. + // If an application needs to show some objects as selected because of some UI state + // can still call Object._renderControls() on any object they desire, independently of groups. + // using no padding, circular controls and hiding the rotating cursor is higly suggested, + matrix = this.group.calcTransformMatrix(); + } + this.forEachControl(function(control, key, fabricObject) { + p = fabricObject.oCoords[key]; + if (control.getVisibility(fabricObject, key)) { + if (matrix) { + p = fabric.util.transformPoint(p, matrix); + } + control.render(ctx, p.x, p.y, styleOverride, fabricObject); + } }); + ctx.restore(); - canvas.off('mouse:down', this._listeners.mousedown); - } + return this; + }, /** - * Mousedown event handler in fabric canvas - * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object - * @private + * Returns true if the specified control is visible, false otherwise. + * @param {String} controlKey The key of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'. + * @returns {Boolean} true if the specified control is visible, false otherwise */ + isControlVisible: function(controlKey) { + return this.controls[controlKey] && this.controls[controlKey].getVisibility(this, controlKey); + }, - }, { - key: '_onFabricMouseDown', - value: function _onFabricMouseDown(fEvent) { - var canvas = this.getCanvas(); - - var _canvas$getPointer = canvas.getPointer(fEvent.e), - x = _canvas$getPointer.x, - y = _canvas$getPointer.y; - - var points = [x, y, x, y]; + /** + * Sets the visibility of the specified control. + * @param {String} controlKey The key of the control. Possible values are 'tl', 'tr', 'br', 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'. + * @param {Boolean} visible true to set the specified control visible, false otherwise + * @return {fabric.Object} thisArg + * @chainable + */ + setControlVisible: function(controlKey, visible) { + if (!this._controlsVisibility) { + this._controlsVisibility = {}; + } + this._controlsVisibility[controlKey] = visible; + return this; + }, - this._line = new _arrowLine2.default(points, { - stroke: this._oColor.toRgba(), - strokeWidth: this._width, - arrowType: this._arrowType, - evented: false - }); + /** + * Sets the visibility state of object controls. + * @param {Object} [options] Options object + * @param {Boolean} [options.bl] true to enable the bottom-left control, false to disable it + * @param {Boolean} [options.br] true to enable the bottom-right control, false to disable it + * @param {Boolean} [options.mb] true to enable the middle-bottom control, false to disable it + * @param {Boolean} [options.ml] true to enable the middle-left control, false to disable it + * @param {Boolean} [options.mr] true to enable the middle-right control, false to disable it + * @param {Boolean} [options.mt] true to enable the middle-top control, false to disable it + * @param {Boolean} [options.tl] true to enable the top-left control, false to disable it + * @param {Boolean} [options.tr] true to enable the top-right control, false to disable it + * @param {Boolean} [options.mtr] true to enable the middle-top-rotate control, false to disable it + * @return {fabric.Object} thisArg + * @chainable + */ + setControlsVisibility: function(options) { + options || (options = { }); - this._line.set(_consts.fObjectOptions.SELECTION_STYLE); + for (var p in options) { + this.setControlVisible(p, options[p]); + } + return this; + }, - canvas.add(this._line); - canvas.on({ - 'mouse:move': this._listeners.mousemove, - 'mouse:up': this._listeners.mouseup - }); + /** + * This callback function is called every time _discardActiveObject or _setActiveObject + * try to to deselect this object. If the function returns true, the process is cancelled + * @param {Object} [options] options sent from the upper functions + * @param {Event} [options.e] event if the process is generated by an event + */ + onDeselect: function() { + // implemented by sub-classes, as needed. + }, - this.fire(_consts.eventNames.ADD_OBJECT, this._createLineEventObjectProperties()); - } /** - * Mousemove event handler in fabric canvas - * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object - * @private + * This callback function is called every time _discardActiveObject or _setActiveObject + * try to to select this object. If the function returns true, the process is cancelled + * @param {Object} [options] options sent from the upper functions + * @param {Event} [options.e] event if the process is generated by an event */ + onSelect: function() { + // implemented by sub-classes, as needed. + } + }); +})(); - }, { - key: '_onFabricMouseMove', - value: function _onFabricMouseMove(fEvent) { - var canvas = this.getCanvas(); - var pointer = canvas.getPointer(fEvent.e); - this._line.set({ - x2: pointer.x, - y2: pointer.y - }); +fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { - this._line.setCoords(); + /** + * Animation duration (in ms) for fx* methods + * @type Number + * @default + */ + FX_DURATION: 500, - canvas.renderAll(); - } + /** + * Centers object horizontally with animation. + * @param {fabric.Object} object Object to center + * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties + * @param {Function} [callbacks.onComplete] Invoked on completion + * @param {Function} [callbacks.onChange] Invoked on every step of animation + * @return {fabric.Canvas} thisArg + * @chainable + */ + fxCenterObjectH: function (object, callbacks) { + callbacks = callbacks || { }; + + var empty = function() { }, + onComplete = callbacks.onComplete || empty, + onChange = callbacks.onChange || empty, + _this = this; + + fabric.util.animate({ + startValue: object.left, + endValue: this.getCenter().left, + duration: this.FX_DURATION, + onChange: function(value) { + object.set('left', value); + _this.requestRenderAll(); + onChange(); + }, + onComplete: function() { + object.setCoords(); + onComplete(); + } + }); - /** - * Mouseup event handler in fabric canvas - * @private - */ + return this; + }, - }, { - key: '_onFabricMouseUp', - value: function _onFabricMouseUp() { - var canvas = this.getCanvas(); + /** + * Centers object vertically with animation. + * @param {fabric.Object} object Object to center + * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties + * @param {Function} [callbacks.onComplete] Invoked on completion + * @param {Function} [callbacks.onChange] Invoked on every step of animation + * @return {fabric.Canvas} thisArg + * @chainable + */ + fxCenterObjectV: function (object, callbacks) { + callbacks = callbacks || { }; + + var empty = function() { }, + onComplete = callbacks.onComplete || empty, + onChange = callbacks.onChange || empty, + _this = this; + + fabric.util.animate({ + startValue: object.top, + endValue: this.getCenter().top, + duration: this.FX_DURATION, + onChange: function(value) { + object.set('top', value); + _this.requestRenderAll(); + onChange(); + }, + onComplete: function() { + object.setCoords(); + onComplete(); + } + }); + + return this; + }, - this.fire(_consts.eventNames.OBJECT_ADDED, this._createLineEventObjectProperties()); + /** + * Same as `fabric.Canvas#remove` but animated + * @param {fabric.Object} object Object to remove + * @param {Object} [callbacks] Callbacks object with optional "onComplete" and/or "onChange" properties + * @param {Function} [callbacks.onComplete] Invoked on completion + * @param {Function} [callbacks.onChange] Invoked on every step of animation + * @return {fabric.Canvas} thisArg + * @chainable + */ + fxRemove: function (object, callbacks) { + callbacks = callbacks || { }; + + var empty = function() { }, + onComplete = callbacks.onComplete || empty, + onChange = callbacks.onChange || empty, + _this = this; + + fabric.util.animate({ + startValue: object.opacity, + endValue: 0, + duration: this.FX_DURATION, + onChange: function(value) { + object.set('opacity', value); + _this.requestRenderAll(); + onChange(); + }, + onComplete: function () { + _this.remove(object); + onComplete(); + } + }); - this._line = null; + return this; + } +}); - canvas.off({ - 'mouse:move': this._listeners.mousemove, - 'mouse:up': this._listeners.mouseup - }); +fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { + /** + * Animates object's properties + * @param {String|Object} property Property to animate (if string) or properties to animate (if object) + * @param {Number|Object} value Value to animate property to (if string was given first) or options object + * @return {fabric.Object} thisArg + * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#animation} + * @chainable + * + * As object — multiple properties + * + * object.animate({ left: ..., top: ... }); + * object.animate({ left: ..., top: ... }, { duration: ... }); + * + * As string — one property + * + * object.animate('left', ...); + * object.animate('left', { duration: ... }); + * + */ + animate: function() { + if (arguments[0] && typeof arguments[0] === 'object') { + var propsToAnimate = [], prop, skipCallbacks; + for (prop in arguments[0]) { + propsToAnimate.push(prop); + } + for (var i = 0, len = propsToAnimate.length; i < len; i++) { + prop = propsToAnimate[i]; + skipCallbacks = i !== len - 1; + this._animate(prop, arguments[0][prop], arguments[1], skipCallbacks); + } + } + else { + this._animate.apply(this, arguments); } + return this; + }, - /** - * create line event object properties - * @returns {Object} properties line object - * @private - */ + /** + * @private + * @param {String} property Property to animate + * @param {String} to Value to animate to + * @param {Object} [options] Options object + * @param {Boolean} [skipCallbacks] When true, callbacks like onchange and oncomplete are not invoked + */ + _animate: function(property, to, options, skipCallbacks) { + var _this = this, propPair; - }, { - key: '_createLineEventObjectProperties', - value: function _createLineEventObjectProperties() { - var params = this.graphics.createObjectProperties(this._line); - var _line = this._line, - x1 = _line.x1, - x2 = _line.x2, - y1 = _line.y1, - y2 = _line.y2; + to = to.toString(); + if (!options) { + options = { }; + } + else { + options = fabric.util.object.clone(options); + } - return _tuiCodeSnippet2.default.extend({}, params, { - startPosition: { - x: x1, - y: y1 - }, - endPosition: { - x: x2, - y: y2 - } - }); + if (~property.indexOf('.')) { + propPair = property.split('.'); } - }]); - return Line; -}(_component2.default); + var propIsColor = + _this.colorProperties.indexOf(property) > -1 || + (propPair && _this.colorProperties.indexOf(propPair[1]) > -1); -exports.default = Line; + var currentValue = propPair + ? this.get(propPair[0])[propPair[1]] + : this.get(property); -/***/ }), + if (!('from' in options)) { + options.from = currentValue; + } -/***/ "./src/js/component/resize.js": -/*!************************************!*\ - !*** ./src/js/component/resize.js ***! - \************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + if (!propIsColor) { + if (~to.indexOf('=')) { + to = currentValue + parseFloat(to.replace('=', '')); + } + else { + to = parseFloat(to); + } + } -"use strict"; + var _options = { + startValue: options.from, + endValue: to, + byValue: options.by, + easing: options.easing, + duration: options.duration, + abort: options.abort && function(value, valueProgress, timeProgress) { + return options.abort.call(_this, value, valueProgress, timeProgress); + }, + onChange: function (value, valueProgress, timeProgress) { + if (propPair) { + _this[propPair[0]][propPair[1]] = value; + } + else { + _this.set(property, value); + } + if (skipCallbacks) { + return; + } + options.onChange && options.onChange(value, valueProgress, timeProgress); + }, + onComplete: function (value, valueProgress, timeProgress) { + if (skipCallbacks) { + return; + } + _this.setCoords(); + options.onComplete && options.onComplete(value, valueProgress, timeProgress); + } + }; -Object.defineProperty(exports, "__esModule", { - value: true + if (propIsColor) { + return fabric.util.animateColor(_options.startValue, _options.endValue, _options.duration, _options); + } + else { + return fabric.util.animate(_options); + } + } }); -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); +(function(global) { -var _component = __webpack_require__(/*! @/interface/component */ "./src/js/interface/component.js"); + 'use strict'; -var _component2 = _interopRequireDefault(_component); + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + clone = fabric.util.object.clone, + coordProps = { x1: 1, x2: 1, y1: 1, y2: 1 }; -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + if (fabric.Line) { + fabric.warn('fabric.Line is already defined'); + return; + } -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Line class + * @class fabric.Line + * @extends fabric.Object + * @see {@link fabric.Line#initialize} for constructor definition + */ + fabric.Line = fabric.util.createClass(fabric.Object, /** @lends fabric.Line.prototype */ { -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + /** + * Type of an object + * @type String + * @default + */ + type: 'line', -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + /** + * x value or first line edge + * @type Number + * @default + */ + x1: 0, -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + /** + * y value or first line edge + * @type Number + * @default + */ + y1: 0, -/** - * Resize components - * @param {Graphics} graphics - Graphics instance - * @extends {Component} - * @class Resize - * @ignore - */ -var Resize = function (_Component) { - _inherits(Resize, _Component); + /** + * x value or second line edge + * @type Number + * @default + */ + x2: 0, - function Resize(graphics) { - _classCallCheck(this, Resize); + /** + * y value or second line edge + * @type Number + * @default + */ + y2: 0, + + cacheProperties: fabric.Object.prototype.cacheProperties.concat('x1', 'x2', 'y1', 'y2'), /** - * Current dimensions - * @type {Object} - * @private + * Constructor + * @param {Array} [points] Array of points + * @param {Object} [options] Options object + * @return {fabric.Line} thisArg */ - var _this = _possibleConstructorReturn(this, (Resize.__proto__ || Object.getPrototypeOf(Resize)).call(this, _consts.componentNames.RESIZE, graphics)); + initialize: function(points, options) { + if (!points) { + points = [0, 0, 0, 0]; + } - _this._dimensions = null; + this.callSuper('initialize', options); + + this.set('x1', points[0]); + this.set('y1', points[1]); + this.set('x2', points[2]); + this.set('y2', points[3]); + + this._setWidthHeight(options); + }, /** - * Original dimensions - * @type {Object} * @private + * @param {Object} [options] Options */ - _this._originalDimensions = null; - return _this; - } + _setWidthHeight: function(options) { + options || (options = { }); - /** - * Get current dimensions - * @returns {object} - */ + this.width = Math.abs(this.x2 - this.x1); + this.height = Math.abs(this.y2 - this.y1); + this.left = 'left' in options + ? options.left + : this._getLeftToOriginX(); - _createClass(Resize, [{ - key: 'getCurrentDimensions', - value: function getCurrentDimensions() { - var canvasImage = this.getCanvasImage(); - if (!this._dimensions && canvasImage) { - var width = canvasImage.width, - height = canvasImage.height; + this.top = 'top' in options + ? options.top + : this._getTopToOriginY(); + }, - this._dimensions = { width: width, height: height }; + /** + * @private + * @param {String} key + * @param {*} value + */ + _set: function(key, value) { + this.callSuper('_set', key, value); + if (typeof coordProps[key] !== 'undefined') { + this._setWidthHeight(); } - - return this._dimensions; - } + return this; + }, /** - * Get original dimensions - * @returns {object} + * @private + * @return {Number} leftToOriginX Distance from left edge of canvas to originX of Line. */ + _getLeftToOriginX: makeEdgeToOriginGetter( + { // property names + origin: 'originX', + axis1: 'x1', + axis2: 'x2', + dimension: 'width' + }, + { // possible values of origin + nearest: 'left', + center: 'center', + farthest: 'right' + } + ), - }, { - key: 'getOriginalDimensions', - value: function getOriginalDimensions() { - return this._originalDimensions; - } + /** + * @private + * @return {Number} topToOriginY Distance from top edge of canvas to originY of Line. + */ + _getTopToOriginY: makeEdgeToOriginGetter( + { // property names + origin: 'originY', + axis1: 'y1', + axis2: 'y2', + dimension: 'height' + }, + { // possible values of origin + nearest: 'top', + center: 'center', + farthest: 'bottom' + } + ), /** - * Set original dimensions - * @param {object} dimensions - Dimensions + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on */ + _render: function(ctx) { + ctx.beginPath(); - }, { - key: 'setOriginalDimensions', - value: function setOriginalDimensions(dimensions) { - this._originalDimensions = dimensions; - } + + var p = this.calcLinePoints(); + ctx.moveTo(p.x1, p.y1); + ctx.lineTo(p.x2, p.y2); + + ctx.lineWidth = this.strokeWidth; + + // TODO: test this + // make sure setting "fill" changes color of a line + // (by copying fillStyle to strokeStyle, since line is stroked, not filled) + var origStrokeStyle = ctx.strokeStyle; + ctx.strokeStyle = this.stroke || ctx.fillStyle; + this.stroke && this._renderStroke(ctx); + ctx.strokeStyle = origStrokeStyle; + }, /** - * Resize Image - * @param {Object} dimensions - Resize dimensions - * @returns {Promise} + * This function is an helper for svg import. it returns the center of the object in the svg + * untransformed coordinates + * @private + * @return {Object} center point from element coordinates + */ + _findCenterFromElement: function() { + return { + x: (this.x1 + this.x2) / 2, + y: (this.y1 + this.y2) / 2, + }; + }, + + /** + * Returns object representation of an instance + * @method toObject + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance */ + toObject: function(propertiesToInclude) { + return extend(this.callSuper('toObject', propertiesToInclude), this.calcLinePoints()); + }, - }, { - key: 'resize', - value: function resize(dimensions) { - var canvasImage = this.getCanvasImage(); - var width = canvasImage.width, - height = canvasImage.height, - scaleX = canvasImage.scaleX, - scaleY = canvasImage.scaleY; - var dimensionsWidth = dimensions.width, - dimensionsHeight = dimensions.height; + /* + * Calculate object dimensions from its properties + * @private + */ + _getNonTransformedDimensions: function() { + var dim = this.callSuper('_getNonTransformedDimensions'); + if (this.strokeLineCap === 'butt') { + if (this.width === 0) { + dim.y -= this.strokeWidth; + } + if (this.height === 0) { + dim.x -= this.strokeWidth; + } + } + return dim; + }, + /** + * Recalculates line points given width and height + * @private + */ + calcLinePoints: function() { + var xMult = this.x1 <= this.x2 ? -1 : 1, + yMult = this.y1 <= this.y2 ? -1 : 1, + x1 = (xMult * this.width * 0.5), + y1 = (yMult * this.height * 0.5), + x2 = (xMult * this.width * -0.5), + y2 = (yMult * this.height * -0.5); - var scaleValues = { - scaleX: dimensionsWidth ? dimensionsWidth / width : scaleX, - scaleY: dimensionsHeight ? dimensionsHeight / height : scaleY + return { + x1: x1, + x2: x2, + y1: y1, + y2: y2 }; + }, - if (scaleX !== scaleValues.scaleX || scaleY !== scaleValues.scaleY) { - canvasImage.set(scaleValues).setCoords(); + /* _TO_SVG_START_ */ + /** + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance + */ + _toSVG: function() { + var p = this.calcLinePoints(); + return [ + '\n' + ]; + }, + /* _TO_SVG_END_ */ + }); - this._dimensions = { - width: canvasImage.width * canvasImage.scaleX, - height: canvasImage.height * canvasImage.scaleY - }; + /* _FROM_SVG_START_ */ + /** + * List of attribute names to account for when parsing SVG element (used by {@link fabric.Line.fromElement}) + * @static + * @memberOf fabric.Line + * @see http://www.w3.org/TR/SVG/shapes.html#LineElement + */ + fabric.Line.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x1 y1 x2 y2'.split(' ')); + + /** + * Returns fabric.Line instance from an SVG element + * @static + * @memberOf fabric.Line + * @param {SVGElement} element Element to parse + * @param {Object} [options] Options object + * @param {Function} [callback] callback function invoked after parsing + */ + fabric.Line.fromElement = function(element, callback, options) { + options = options || { }; + var parsedAttributes = fabric.parseAttributes(element, fabric.Line.ATTRIBUTE_NAMES), + points = [ + parsedAttributes.x1 || 0, + parsedAttributes.y1 || 0, + parsedAttributes.x2 || 0, + parsedAttributes.y2 || 0 + ]; + callback(new fabric.Line(points, extend(parsedAttributes, options))); + }; + /* _FROM_SVG_END_ */ + + /** + * Returns fabric.Line instance from an object representation + * @static + * @memberOf fabric.Line + * @param {Object} object Object to create an instance from + * @param {function} [callback] invoked with new instance as first argument + */ + fabric.Line.fromObject = function(object, callback) { + function _callback(instance) { + delete instance.points; + callback && callback(instance); + }; + var options = clone(object, true); + options.points = [object.x1, object.y1, object.x2, object.y2]; + fabric.Object._fromObject('Line', options, _callback, 'points'); + }; + + /** + * Produces a function that calculates distance from canvas edge to Line origin. + */ + function makeEdgeToOriginGetter(propertyNames, originValues) { + var origin = propertyNames.origin, + axis1 = propertyNames.axis1, + axis2 = propertyNames.axis2, + dimension = propertyNames.dimension, + nearest = originValues.nearest, + center = originValues.center, + farthest = originValues.farthest; + + return function() { + switch (this.get(origin)) { + case nearest: + return Math.min(this.get(axis1), this.get(axis2)); + case center: + return Math.min(this.get(axis1), this.get(axis2)) + (0.5 * this.get(dimension)); + case farthest: + return Math.max(this.get(axis1), this.get(axis2)); } + }; - this.adjustCanvasDimensionBase(); + } - return _util.Promise.resolve(); - } +})( true ? exports : 0); + + +(function(global) { + + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + pi = Math.PI; + + if (fabric.Circle) { + fabric.warn('fabric.Circle is already defined.'); + return; + } + + /** + * Circle class + * @class fabric.Circle + * @extends fabric.Object + * @see {@link fabric.Circle#initialize} for constructor definition + */ + fabric.Circle = fabric.util.createClass(fabric.Object, /** @lends fabric.Circle.prototype */ { /** - * Start resizing + * Type of an object + * @type String + * @default */ + type: 'circle', - }, { - key: 'start', - value: function start() { - var dimensions = this.getCurrentDimensions(); - this.setOriginalDimensions(dimensions); - } + /** + * Radius of this circle + * @type Number + * @default + */ + radius: 0, /** - * End resizing + * Start angle of the circle, moving clockwise + * deprecated type, this should be in degree, this was an oversight. + * probably will change to degrees in next major version + * @type Number + * @default 0 */ + startAngle: 0, - }, { - key: 'end', - value: function end() {} - }]); + /** + * End angle of the circle + * deprecated type, this should be in degree, this was an oversight. + * probably will change to degrees in next major version + * @type Number + * @default 2Pi + */ + endAngle: pi * 2, - return Resize; -}(_component2.default); + cacheProperties: fabric.Object.prototype.cacheProperties.concat('radius', 'startAngle', 'endAngle'), -exports.default = Resize; + /** + * @private + * @param {String} key + * @param {*} value + * @return {fabric.Circle} thisArg + */ + _set: function(key, value) { + this.callSuper('_set', key, value); -/***/ }), + if (key === 'radius') { + this.setRadius(value); + } -/***/ "./src/js/component/rotation.js": -/*!**************************************!*\ - !*** ./src/js/component/rotation.js ***! - \**************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + return this; + }, -"use strict"; + /** + * Returns object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toObject: function(propertiesToInclude) { + return this.callSuper('toObject', ['radius', 'startAngle', 'endAngle'].concat(propertiesToInclude)); + }, + /* _TO_SVG_START_ */ + + /** + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance + */ + _toSVG: function() { + var svgString, x = 0, y = 0, + angle = (this.endAngle - this.startAngle) % ( 2 * pi); + + if (angle === 0) { + svgString = [ + '\n' + ]; + } + else { + var startX = fabric.util.cos(this.startAngle) * this.radius, + startY = fabric.util.sin(this.startAngle) * this.radius, + endX = fabric.util.cos(this.endAngle) * this.radius, + endY = fabric.util.sin(this.endAngle) * this.radius, + largeFlag = angle > pi ? '1' : '0'; + svgString = [ + '\n' + ]; + } + return svgString; + }, + /* _TO_SVG_END_ */ -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * @private + * @param {CanvasRenderingContext2D} ctx context to render on + */ + _render: function(ctx) { + ctx.beginPath(); + ctx.arc( + 0, + 0, + this.radius, + this.startAngle, + this.endAngle, false); + this._renderPaintInOrder(ctx); + }, -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + /** + * Returns horizontal radius of an object (according to how an object is scaled) + * @return {Number} + */ + getRadiusX: function() { + return this.get('radius') * this.get('scaleX'); + }, -var _fabric = __webpack_require__(/*! fabric */ "fabric"); + /** + * Returns vertical radius of an object (according to how an object is scaled) + * @return {Number} + */ + getRadiusY: function() { + return this.get('radius') * this.get('scaleY'); + }, -var _fabric2 = _interopRequireDefault(_fabric); + /** + * Sets radius of an object (and updates width accordingly) + * @return {fabric.Circle} thisArg + */ + setRadius: function(value) { + this.radius = value; + return this.set('width', value * 2).set('height', value * 2); + }, + }); -var _component = __webpack_require__(/*! @/interface/component */ "./src/js/interface/component.js"); + /* _FROM_SVG_START_ */ + /** + * List of attribute names to account for when parsing SVG element (used by {@link fabric.Circle.fromElement}) + * @static + * @memberOf fabric.Circle + * @see: http://www.w3.org/TR/SVG/shapes.html#CircleElement + */ + fabric.Circle.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy r'.split(' ')); -var _component2 = _interopRequireDefault(_component); + /** + * Returns {@link fabric.Circle} instance from an SVG element + * @static + * @memberOf fabric.Circle + * @param {SVGElement} element Element to parse + * @param {Function} [callback] Options callback invoked after parsing is finished + * @param {Object} [options] Options object + * @throws {Error} If value of `r` attribute is missing or invalid + */ + fabric.Circle.fromElement = function(element, callback) { + var parsedAttributes = fabric.parseAttributes(element, fabric.Circle.ATTRIBUTE_NAMES); -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + if (!isValidRadius(parsedAttributes)) { + throw new Error('value of `r` attribute is required and can not be negative'); + } -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + parsedAttributes.left = (parsedAttributes.left || 0) - parsedAttributes.radius; + parsedAttributes.top = (parsedAttributes.top || 0) - parsedAttributes.radius; + callback(new fabric.Circle(parsedAttributes)); + }; -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * @private + */ + function isValidRadius(attributes) { + return (('radius' in attributes) && (attributes.radius >= 0)); + } + /* _FROM_SVG_END_ */ -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + /** + * Returns {@link fabric.Circle} instance from an object representation + * @static + * @memberOf fabric.Circle + * @param {Object} object Object to create an instance from + * @param {function} [callback] invoked with new instance as first argument + * @return {void} + */ + fabric.Circle.fromObject = function(object, callback) { + fabric.Object._fromObject('Circle', object, callback); + }; -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } +})( true ? exports : 0); -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** - * @author NHN. FE Development Team - * @fileoverview Image rotation module - */ +(function(global) { -/** - * Image Rotation component - * @class Rotation - * @extends {Component} - * @param {Graphics} graphics - Graphics instance - * @ignore - */ -var Rotation = function (_Component) { - _inherits(Rotation, _Component); + 'use strict'; - function Rotation(graphics) { - _classCallCheck(this, Rotation); + var fabric = global.fabric || (global.fabric = { }); - return _possibleConstructorReturn(this, (Rotation.__proto__ || Object.getPrototypeOf(Rotation)).call(this, _consts.componentNames.ROTATION, graphics)); + if (fabric.Triangle) { + fabric.warn('fabric.Triangle is already defined'); + return; } /** - * Get current angle - * @returns {Number} + * Triangle class + * @class fabric.Triangle + * @extends fabric.Object + * @return {fabric.Triangle} thisArg + * @see {@link fabric.Triangle#initialize} for constructor definition */ - - - _createClass(Rotation, [{ - key: 'getCurrentAngle', - value: function getCurrentAngle() { - return this.getCanvasImage().angle; - } + fabric.Triangle = fabric.util.createClass(fabric.Object, /** @lends fabric.Triangle.prototype */ { /** - * Set angle of the image - * - * Do not call "this.setImageProperties" for setting angle directly. - * Before setting angle, The originX,Y of image should be set to center. - * See "http://fabricjs.com/docs/fabric.Object.html#setAngle" - * - * @param {number} angle - Angle value - * @returns {Promise} + * Type of an object + * @type String + * @default */ + type: 'triangle', - }, { - key: 'setAngle', - value: function setAngle(angle) { - var oldAngle = this.getCurrentAngle() % 360; // The angle is lower than 2*PI(===360 degrees) - - angle %= 360; - - var canvasImage = this.getCanvasImage(); - var oldImageCenter = canvasImage.getCenterPoint(); - canvasImage.set({ angle: angle }).setCoords(); - this.adjustCanvasDimension(); - var newImageCenter = canvasImage.getCenterPoint(); - this._rotateForEachObject(oldImageCenter, newImageCenter, angle - oldAngle); + /** + * Width is set to 100 to compensate the old initialize code that was setting it to 100 + * @type Number + * @default + */ + width: 100, - return _util.Promise.resolve(angle); - } + /** + * Height is set to 100 to compensate the old initialize code that was setting it to 100 + * @type Number + * @default + */ + height: 100, /** - * Rotate for each object - * @param {fabric.Point} oldImageCenter - Image center point before rotation - * @param {fabric.Point} newImageCenter - Image center point after rotation - * @param {number} angleDiff - Image angle difference after rotation * @private + * @param {CanvasRenderingContext2D} ctx Context to render on */ + _render: function(ctx) { + var widthBy2 = this.width / 2, + heightBy2 = this.height / 2; - }, { - key: '_rotateForEachObject', - value: function _rotateForEachObject(oldImageCenter, newImageCenter, angleDiff) { - var canvas = this.getCanvas(); - var centerDiff = { - x: oldImageCenter.x - newImageCenter.x, - y: oldImageCenter.y - newImageCenter.y - }; + ctx.beginPath(); + ctx.moveTo(-widthBy2, heightBy2); + ctx.lineTo(0, -heightBy2); + ctx.lineTo(widthBy2, heightBy2); + ctx.closePath(); - canvas.forEachObject(function (obj) { - var objCenter = obj.getCenterPoint(); - var radian = _fabric2.default.util.degreesToRadians(angleDiff); - var newObjCenter = _fabric2.default.util.rotatePoint(objCenter, oldImageCenter, radian); + this._renderPaintInOrder(ctx); + }, - obj.set({ - left: newObjCenter.x - centerDiff.x, - top: newObjCenter.y - centerDiff.y, - angle: (obj.angle + angleDiff) % 360 - }); - obj.setCoords(); - }); - canvas.renderAll(); - } + /* _TO_SVG_START_ */ + /** + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance + */ + _toSVG: function() { + var widthBy2 = this.width / 2, + heightBy2 = this.height / 2, + points = [ + -widthBy2 + ' ' + heightBy2, + '0 ' + -heightBy2, + widthBy2 + ' ' + heightBy2 + ].join(','); + return [ + '' + ]; + }, + /* _TO_SVG_END_ */ + }); - /** - * Rotate the image - * @param {number} additionalAngle - Additional angle - * @returns {Promise} - */ + /** + * Returns {@link fabric.Triangle} instance from an object representation + * @static + * @memberOf fabric.Triangle + * @param {Object} object Object to create an instance from + * @param {function} [callback] invoked with new instance as first argument + */ + fabric.Triangle.fromObject = function(object, callback) { + return fabric.Object._fromObject('Triangle', object, callback); + }; - }, { - key: 'rotate', - value: function rotate(additionalAngle) { - var current = this.getCurrentAngle(); +})( true ? exports : 0); - return this.setAngle(current + additionalAngle); - } - }]); - return Rotation; -}(_component2.default); +(function(global) { -exports.default = Rotation; + 'use strict'; -/***/ }), + var fabric = global.fabric || (global.fabric = { }), + piBy2 = Math.PI * 2; -/***/ "./src/js/component/shape.js": -/*!***********************************!*\ - !*** ./src/js/component/shape.js ***! - \***********************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + if (fabric.Ellipse) { + fabric.warn('fabric.Ellipse is already defined.'); + return; + } -"use strict"; + /** + * Ellipse class + * @class fabric.Ellipse + * @extends fabric.Object + * @return {fabric.Ellipse} thisArg + * @see {@link fabric.Ellipse#initialize} for constructor definition + */ + fabric.Ellipse = fabric.util.createClass(fabric.Object, /** @lends fabric.Ellipse.prototype */ { + /** + * Type of an object + * @type String + * @default + */ + type: 'ellipse', -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * Horizontal radius + * @type Number + * @default + */ + rx: 0, -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + /** + * Vertical radius + * @type Number + * @default + */ + ry: 0, -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); + cacheProperties: fabric.Object.prototype.cacheProperties.concat('rx', 'ry'), -var _fabric = __webpack_require__(/*! fabric */ "fabric"); + /** + * Constructor + * @param {Object} [options] Options object + * @return {fabric.Ellipse} thisArg + */ + initialize: function(options) { + this.callSuper('initialize', options); + this.set('rx', options && options.rx || 0); + this.set('ry', options && options.ry || 0); + }, -var _fabric2 = _interopRequireDefault(_fabric); + /** + * @private + * @param {String} key + * @param {*} value + * @return {fabric.Ellipse} thisArg + */ + _set: function(key, value) { + this.callSuper('_set', key, value); + switch (key) { -var _component = __webpack_require__(/*! @/interface/component */ "./src/js/interface/component.js"); + case 'rx': + this.rx = value; + this.set('width', value * 2); + break; -var _component2 = _interopRequireDefault(_component); + case 'ry': + this.ry = value; + this.set('height', value * 2); + break; -var _shapeResizeHelper = __webpack_require__(/*! @/helper/shapeResizeHelper */ "./src/js/helper/shapeResizeHelper.js"); + } + return this; + }, -var _shapeResizeHelper2 = _interopRequireDefault(_shapeResizeHelper); + /** + * Returns horizontal radius of an object (according to how an object is scaled) + * @return {Number} + */ + getRx: function() { + return this.get('rx') * this.get('scaleX'); + }, -var _shapeFilterFillHelper = __webpack_require__(/*! @/helper/shapeFilterFillHelper */ "./src/js/helper/shapeFilterFillHelper.js"); + /** + * Returns Vertical radius of an object (according to how an object is scaled) + * @return {Number} + */ + getRy: function() { + return this.get('ry') * this.get('scaleY'); + }, -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + /** + * Returns object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toObject: function(propertiesToInclude) { + return this.callSuper('toObject', ['rx', 'ry'].concat(propertiesToInclude)); + }, -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + /* _TO_SVG_START_ */ + /** + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance + */ + _toSVG: function() { + return [ + '\n' + ]; + }, + /* _TO_SVG_END_ */ -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * @private + * @param {CanvasRenderingContext2D} ctx context to render on + */ + _render: function(ctx) { + ctx.beginPath(); + ctx.save(); + ctx.transform(1, 0, 0, this.ry / this.rx, 0, 0); + ctx.arc( + 0, + 0, + this.rx, + 0, + piBy2, + false); + ctx.restore(); + this._renderPaintInOrder(ctx); + }, + }); -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + /* _FROM_SVG_START_ */ + /** + * List of attribute names to account for when parsing SVG element (used by {@link fabric.Ellipse.fromElement}) + * @static + * @memberOf fabric.Ellipse + * @see http://www.w3.org/TR/SVG/shapes.html#EllipseElement + */ + fabric.Ellipse.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('cx cy rx ry'.split(' ')); -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + /** + * Returns {@link fabric.Ellipse} instance from an SVG element + * @static + * @memberOf fabric.Ellipse + * @param {SVGElement} element Element to parse + * @param {Function} [callback] Options callback invoked after parsing is finished + * @return {fabric.Ellipse} + */ + fabric.Ellipse.fromElement = function(element, callback) { -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** - * @author NHN. FE Development Team - * @fileoverview Shape component - */ + var parsedAttributes = fabric.parseAttributes(element, fabric.Ellipse.ATTRIBUTE_NAMES); + parsedAttributes.left = (parsedAttributes.left || 0) - parsedAttributes.rx; + parsedAttributes.top = (parsedAttributes.top || 0) - parsedAttributes.ry; + callback(new fabric.Ellipse(parsedAttributes)); + }; + /* _FROM_SVG_END_ */ -var SHAPE_INIT_OPTIONS = (0, _tuiCodeSnippet.extend)({ - strokeWidth: 1, - stroke: '#000000', - fill: '#ffffff', - width: 1, - height: 1, - rx: 0, - ry: 0 -}, _consts.SHAPE_DEFAULT_OPTIONS); -var DEFAULT_TYPE = 'rect'; -var DEFAULT_WIDTH = 20; -var DEFAULT_HEIGHT = 20; + /** + * Returns {@link fabric.Ellipse} instance from an object representation + * @static + * @memberOf fabric.Ellipse + * @param {Object} object Object to create an instance from + * @param {function} [callback] invoked with new instance as first argument + * @return {void} + */ + fabric.Ellipse.fromObject = function(object, callback) { + fabric.Object._fromObject('Ellipse', object, callback); + }; -/** - * Make fill option - * @param {Object} options - Options to create the shape - * @param {Object.Image} canvasImage - canvas background image - * @param {Function} createStaticCanvas - static canvas creater - * @returns {Object} - shape option - * @private - */ -function makeFabricFillOption(options, canvasImage, createStaticCanvas) { - var fillOption = options.fill; - var fillType = (0, _util.getFillTypeFromOption)(options.fill); - var fill = fillOption; +})( true ? exports : 0); - if (fillOption.color) { - fill = fillOption.color; - } - var extOption = null; - if (fillType === 'filter') { - var newStaticCanvas = createStaticCanvas(); - extOption = (0, _shapeFilterFillHelper.makeFillPatternForFilter)(canvasImage, fillOption.filter, newStaticCanvas); - } else { - extOption = { fill: fill }; - } +(function(global) { - return (0, _tuiCodeSnippet.extend)({}, options, extOption); -} + 'use strict'; -/** - * Shape - * @class Shape - * @param {Graphics} graphics - Graphics instance - * @extends {Component} - * @ignore - */ + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend; -var Shape = function (_Component) { - _inherits(Shape, _Component); + if (fabric.Rect) { + fabric.warn('fabric.Rect is already defined'); + return; + } - function Shape(graphics) { - _classCallCheck(this, Shape); + /** + * Rectangle class + * @class fabric.Rect + * @extends fabric.Object + * @return {fabric.Rect} thisArg + * @see {@link fabric.Rect#initialize} for constructor definition + */ + fabric.Rect = fabric.util.createClass(fabric.Object, /** @lends fabric.Rect.prototype */ { /** - * Object of The drawing shape - * @type {fabric.Object} - * @private + * List of properties to consider when checking if state of an object is changed ({@link fabric.Object#hasStateChanged}) + * as well as for history (undo/redo) purposes + * @type Array */ - var _this = _possibleConstructorReturn(this, (Shape.__proto__ || Object.getPrototypeOf(Shape)).call(this, _consts.componentNames.SHAPE, graphics)); - - _this._shapeObj = null; + stateProperties: fabric.Object.prototype.stateProperties.concat('rx', 'ry'), /** - * Type of the drawing shape - * @type {string} - * @private + * Type of an object + * @type String + * @default */ - _this._type = DEFAULT_TYPE; + type: 'rect', /** - * Options to draw the shape - * @type {Object} - * @private + * Horizontal border radius + * @type Number + * @default */ - _this._options = (0, _tuiCodeSnippet.extend)({}, SHAPE_INIT_OPTIONS); + rx: 0, /** - * Whether the shape object is selected or not - * @type {boolean} - * @private + * Vertical border radius + * @type Number + * @default */ - _this._isSelected = false; + ry: 0, + + cacheProperties: fabric.Object.prototype.cacheProperties.concat('rx', 'ry'), /** - * Pointer for drawing shape (x, y) - * @type {Object} - * @private + * Constructor + * @param {Object} [options] Options object + * @return {Object} thisArg */ - _this._startPoint = {}; + initialize: function(options) { + this.callSuper('initialize', options); + this._initRxRy(); + }, /** - * Using shortcut on drawing shape - * @type {boolean} + * Initializes rx/ry attributes * @private */ - _this._withShiftKey = false; + _initRxRy: function() { + if (this.rx && !this.ry) { + this.ry = this.rx; + } + else if (this.ry && !this.rx) { + this.rx = this.ry; + } + }, /** - * Event handler list - * @type {Object} * @private + * @param {CanvasRenderingContext2D} ctx Context to render on */ - _this._handlers = { - mousedown: _this._onFabricMouseDown.bind(_this), - mousemove: _this._onFabricMouseMove.bind(_this), - mouseup: _this._onFabricMouseUp.bind(_this), - keydown: _this._onKeyDown.bind(_this), - keyup: _this._onKeyUp.bind(_this) - }; - return _this; - } - - /** - * Start to draw the shape on canvas - * @ignore - */ - - - _createClass(Shape, [{ - key: 'start', - value: function start() { - var canvas = this.getCanvas(); + _render: function(ctx) { - this._isSelected = false; + // 1x1 case (used in spray brush) optimization was removed because + // with caching and higher zoom level this makes more damage than help - canvas.defaultCursor = 'crosshair'; - canvas.selection = false; - canvas.uniformScaling = true; - canvas.on({ - 'mouse:down': this._handlers.mousedown - }); + var rx = this.rx ? Math.min(this.rx, this.width / 2) : 0, + ry = this.ry ? Math.min(this.ry, this.height / 2) : 0, + w = this.width, + h = this.height, + x = -this.width / 2, + y = -this.height / 2, + isRounded = rx !== 0 || ry !== 0, + /* "magic number" for bezier approximations of arcs (http://itc.ktu.lt/itc354/Riskus354.pdf) */ + k = 1 - 0.5522847498; + ctx.beginPath(); - _fabric2.default.util.addListener(document, 'keydown', this._handlers.keydown); - _fabric2.default.util.addListener(document, 'keyup', this._handlers.keyup); - } + ctx.moveTo(x + rx, y); - /** - * End to draw the shape on canvas - * @ignore - */ + ctx.lineTo(x + w - rx, y); + isRounded && ctx.bezierCurveTo(x + w - k * rx, y, x + w, y + k * ry, x + w, y + ry); - }, { - key: 'end', - value: function end() { - var canvas = this.getCanvas(); + ctx.lineTo(x + w, y + h - ry); + isRounded && ctx.bezierCurveTo(x + w, y + h - k * ry, x + w - k * rx, y + h, x + w - rx, y + h); - this._isSelected = false; + ctx.lineTo(x + rx, y + h); + isRounded && ctx.bezierCurveTo(x + k * rx, y + h, x, y + h - k * ry, x, y + h - ry); - canvas.defaultCursor = 'default'; + ctx.lineTo(x, y + ry); + isRounded && ctx.bezierCurveTo(x, y + k * ry, x + k * rx, y, x + rx, y); - canvas.selection = true; - canvas.uniformScaling = false; - canvas.off({ - 'mouse:down': this._handlers.mousedown - }); + ctx.closePath(); - _fabric2.default.util.removeListener(document, 'keydown', this._handlers.keydown); - _fabric2.default.util.removeListener(document, 'keyup', this._handlers.keyup); - } + this._renderPaintInOrder(ctx); + }, /** - * Set states of the current drawing shape - * @ignore - * @param {string} type - Shape type (ex: 'rect', 'circle') - * @param {Object} [options] - Shape options - * @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or - * Shape foreground color (ex: '#fff', 'transparent') - * @param {string} [options.stoke] - Shape outline color - * @param {number} [options.strokeWidth] - Shape outline width - * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) - * @param {number} [options.height] - Height value (When type option is 'rect', this options can use) - * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) - * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) + * Returns object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance */ + toObject: function(propertiesToInclude) { + return this.callSuper('toObject', ['rx', 'ry'].concat(propertiesToInclude)); + }, - }, { - key: 'setStates', - value: function setStates(type, options) { - this._type = type; + /* _TO_SVG_START_ */ + /** + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance + */ + _toSVG: function() { + var x = -this.width / 2, y = -this.height / 2; + return [ + '\n' + ]; + }, + /* _TO_SVG_END_ */ + }); - if (options) { - this._options = (0, _tuiCodeSnippet.extend)(this._options, options); - } - } + /* _FROM_SVG_START_ */ + /** + * List of attribute names to account for when parsing SVG element (used by `fabric.Rect.fromElement`) + * @static + * @memberOf fabric.Rect + * @see: http://www.w3.org/TR/SVG/shapes.html#RectElement + */ + fabric.Rect.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x y rx ry width height'.split(' ')); - /** - * Add the shape - * @ignore - * @param {string} type - Shape type (ex: 'rect', 'circle') - * @param {Object} options - Shape options - * @param {(ShapeFillOption | string)} [options.fill] - ShapeFillOption or Shape foreground color (ex: '#fff', 'transparent') or ShapeFillOption object - * @param {string} [options.stroke] - Shape outline color - * @param {number} [options.strokeWidth] - Shape outline width - * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) - * @param {number} [options.height] - Height value (When type option is 'rect', this options can use) - * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) - * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) - * @param {number} [options.isRegular] - Whether scaling shape has 1:1 ratio or not - * @returns {Promise} - */ + /** + * Returns {@link fabric.Rect} instance from an SVG element + * @static + * @memberOf fabric.Rect + * @param {SVGElement} element Element to parse + * @param {Function} callback callback function invoked after parsing + * @param {Object} [options] Options object + */ + fabric.Rect.fromElement = function(element, callback, options) { + if (!element) { + return callback(null); + } + options = options || { }; + + var parsedAttributes = fabric.parseAttributes(element, fabric.Rect.ATTRIBUTE_NAMES); + parsedAttributes.left = parsedAttributes.left || 0; + parsedAttributes.top = parsedAttributes.top || 0; + parsedAttributes.height = parsedAttributes.height || 0; + parsedAttributes.width = parsedAttributes.width || 0; + var rect = new fabric.Rect(extend((options ? fabric.util.object.clone(options) : { }), parsedAttributes)); + rect.visible = rect.visible && rect.width > 0 && rect.height > 0; + callback(rect); + }; + /* _FROM_SVG_END_ */ - }, { - key: 'add', - value: function add(type, options) { - var _this2 = this; + /** + * Returns {@link fabric.Rect} instance from an object representation + * @static + * @memberOf fabric.Rect + * @param {Object} object Object to create an instance from + * @param {Function} [callback] Callback to invoke when an fabric.Rect instance is created + */ + fabric.Rect.fromObject = function(object, callback) { + return fabric.Object._fromObject('Rect', object, callback); + }; - return new _util.Promise(function (resolve) { - var canvas = _this2.getCanvas(); - var extendOption = _this2._extendOptions(options); +})( true ? exports : 0); - var shapeObj = _this2._createInstance(type, extendOption); - var objectProperties = _this2.graphics.createObjectProperties(shapeObj); - _this2._bindEventOnShape(shapeObj); +(function(global) { - canvas.add(shapeObj).setActiveObject(shapeObj); + 'use strict'; - _this2._resetPositionFillFilter(shapeObj); + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + min = fabric.util.array.min, + max = fabric.util.array.max, + toFixed = fabric.util.toFixed; - resolve(objectProperties); - }); - } + if (fabric.Polyline) { + fabric.warn('fabric.Polyline is already defined'); + return; + } + + /** + * Polyline class + * @class fabric.Polyline + * @extends fabric.Object + * @see {@link fabric.Polyline#initialize} for constructor definition + */ + fabric.Polyline = fabric.util.createClass(fabric.Object, /** @lends fabric.Polyline.prototype */ { /** - * Change the shape - * @ignore - * @param {fabric.Object} shapeObj - Selected shape object on canvas - * @param {Object} options - Shape options - * @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or - * Shape foreground color (ex: '#fff', 'transparent') - * @param {string} [options.stroke] - Shape outline color - * @param {number} [options.strokeWidth] - Shape outline width - * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) - * @param {number} [options.height] - Height value (When type option is 'rect', this options can use) - * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) - * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) - * @param {number} [options.isRegular] - Whether scaling shape has 1:1 ratio or not - * @returns {Promise} + * Type of an object + * @type String + * @default */ + type: 'polyline', - }, { - key: 'change', - value: function change(shapeObj, options) { - var _this3 = this; + /** + * Points array + * @type Array + * @default + */ + points: null, - return new _util.Promise(function (resolve, reject) { - if (!(0, _util.isShape)(shapeObj)) { - reject(_consts.rejectMessages.unsupportedType); - } - var hasFillOption = (0, _util.getFillTypeFromOption)(options.fill) === 'filter'; - var _graphics = _this3.graphics, - canvasImage = _graphics.canvasImage, - createStaticCanvas = _graphics.createStaticCanvas; + cacheProperties: fabric.Object.prototype.cacheProperties.concat('points'), + /** + * Constructor + * @param {Array} points Array of points (where each point is an object with x and y) + * @param {Object} [options] Options object + * @return {fabric.Polyline} thisArg + * @example + * var poly = new fabric.Polyline([ + * { x: 10, y: 10 }, + * { x: 50, y: 30 }, + * { x: 40, y: 70 }, + * { x: 60, y: 50 }, + * { x: 100, y: 150 }, + * { x: 40, y: 100 } + * ], { + * stroke: 'red', + * left: 100, + * top: 100 + * }); + */ + initialize: function(points, options) { + options = options || {}; + this.points = points || []; + this.callSuper('initialize', options); + this._setPositionDimensions(options); + }, - shapeObj.set(hasFillOption ? makeFabricFillOption(options, canvasImage, createStaticCanvas) : options); + _setPositionDimensions: function(options) { + var calcDim = this._calcDimensions(options), correctLeftTop; + this.width = calcDim.width; + this.height = calcDim.height; + if (!options.fromSVG) { + correctLeftTop = this.translateToGivenOrigin( + { x: calcDim.left - this.strokeWidth / 2, y: calcDim.top - this.strokeWidth / 2 }, + 'left', + 'top', + this.originX, + this.originY + ); + } + if (typeof options.left === 'undefined') { + this.left = options.fromSVG ? calcDim.left : correctLeftTop.x; + } + if (typeof options.top === 'undefined') { + this.top = options.fromSVG ? calcDim.top : correctLeftTop.y; + } + this.pathOffset = { + x: calcDim.left + this.width / 2, + y: calcDim.top + this.height / 2 + }; + }, - if (hasFillOption) { - _this3._resetPositionFillFilter(shapeObj); - } + /** + * Calculate the polygon min and max point from points array, + * returning an object with left, top, width, height to measure the + * polygon size + * @return {Object} object.left X coordinate of the polygon leftmost point + * @return {Object} object.top Y coordinate of the polygon topmost point + * @return {Object} object.width distance between X coordinates of the polygon leftmost and rightmost point + * @return {Object} object.height distance between Y coordinates of the polygon topmost and bottommost point + * @private + */ + _calcDimensions: function() { - _this3.getCanvas().renderAll(); - resolve(); - }); - } + var points = this.points, + minX = min(points, 'x') || 0, + minY = min(points, 'y') || 0, + maxX = max(points, 'x') || 0, + maxY = max(points, 'y') || 0, + width = (maxX - minX), + height = (maxY - minY); + + return { + left: minX, + top: minY, + width: width, + height: height + }; + }, /** - * make fill property for user event - * @param {fabric.Object} shapeObj - fabric object - * @returns {Object} + * Returns object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} Object representation of an instance */ + toObject: function(propertiesToInclude) { + return extend(this.callSuper('toObject', propertiesToInclude), { + points: this.points.concat() + }); + }, - }, { - key: 'makeFillPropertyForUserEvent', - value: function makeFillPropertyForUserEvent(shapeObj) { - var fillType = (0, _util.getFillTypeFromObject)(shapeObj); - var fillProp = {}; - - if (fillType === _consts.SHAPE_FILL_TYPE.FILTER) { - var fillImage = (0, _shapeFilterFillHelper.getFillImageFromShape)(shapeObj); - var filterOption = (0, _shapeFilterFillHelper.makeFilterOptionFromFabricImage)(fillImage); + /* _TO_SVG_START_ */ + /** + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance + */ + _toSVG: function() { + var points = [], diffX = this.pathOffset.x, diffY = this.pathOffset.y, + NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; - fillProp.type = fillType; - fillProp.filter = filterOption; - } else { - fillProp.type = _consts.SHAPE_FILL_TYPE.COLOR; - fillProp.color = shapeObj.fill || 'transparent'; + for (var i = 0, len = this.points.length; i < len; i++) { + points.push( + toFixed(this.points[i].x - diffX, NUM_FRACTION_DIGITS), ',', + toFixed(this.points[i].y - diffY, NUM_FRACTION_DIGITS), ' ' + ); } + return [ + '<' + this.type + ' ', 'COMMON_PARTS', + 'points="', points.join(''), + '" />\n' + ]; + }, + /* _TO_SVG_END_ */ - return fillProp; - } /** - * Copy object handling. - * @param {fabric.Object} shapeObj - Shape object - * @param {fabric.Object} originalShapeObj - Shape object + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on */ + commonRender: function(ctx) { + var point, len = this.points.length, + x = this.pathOffset.x, + y = this.pathOffset.y; - }, { - key: 'processForCopiedObject', - value: function processForCopiedObject(shapeObj, originalShapeObj) { - this._bindEventOnShape(shapeObj); - - if ((0, _util.getFillTypeFromObject)(shapeObj) === 'filter') { - var fillImage = (0, _shapeFilterFillHelper.getFillImageFromShape)(originalShapeObj); - var filterOption = (0, _shapeFilterFillHelper.makeFilterOptionFromFabricImage)(fillImage); - var newStaticCanvas = this.graphics.createStaticCanvas(); - - shapeObj.set((0, _shapeFilterFillHelper.makeFillPatternForFilter)(this.graphics.canvasImage, filterOption, newStaticCanvas)); - this._resetPositionFillFilter(shapeObj); + if (!len || isNaN(this.points[len - 1].y)) { + // do not draw if no points or odd points + // NaN comes from parseFloat of a empty string in parser + return false; } - } + ctx.beginPath(); + ctx.moveTo(this.points[0].x - x, this.points[0].y - y); + for (var i = 0; i < len; i++) { + point = this.points[i]; + ctx.lineTo(point.x - x, point.y - y); + } + return true; + }, /** - * Create the instance of shape - * @param {string} type - Shape type - * @param {Object} options - Options to creat the shape - * @returns {fabric.Object} Shape instance * @private + * @param {CanvasRenderingContext2D} ctx Context to render on */ + _render: function(ctx) { + if (!this.commonRender(ctx)) { + return; + } + this._renderPaintInOrder(ctx); + }, - }, { - key: '_createInstance', - value: function _createInstance(type, options) { - var instance = void 0; + /** + * Returns complexity of an instance + * @return {Number} complexity of this instance + */ + complexity: function() { + return this.get('points').length; + } + }); - switch (type) { - case 'rect': - instance = new _fabric2.default.Rect(options); - break; - case 'circle': - instance = new _fabric2.default.Ellipse((0, _tuiCodeSnippet.extend)({ - type: 'circle' - }, options)); - break; - case 'triangle': - instance = new _fabric2.default.Triangle(options); - break; - default: - instance = {}; + /* _FROM_SVG_START_ */ + /** + * List of attribute names to account for when parsing SVG element (used by {@link fabric.Polyline.fromElement}) + * @static + * @memberOf fabric.Polyline + * @see: http://www.w3.org/TR/SVG/shapes.html#PolylineElement + */ + fabric.Polyline.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(); + + /** + * Returns fabric.Polyline instance from an SVG element + * @static + * @memberOf fabric.Polyline + * @param {SVGElement} element Element to parser + * @param {Function} callback callback function invoked after parsing + * @param {Object} [options] Options object + */ + fabric.Polyline.fromElementGenerator = function(_class) { + return function(element, callback, options) { + if (!element) { + return callback(null); } + options || (options = { }); - return instance; - } + var points = fabric.parsePointsAttribute(element.getAttribute('points')), + parsedAttributes = fabric.parseAttributes(element, fabric[_class].ATTRIBUTE_NAMES); + parsedAttributes.fromSVG = true; + callback(new fabric[_class](points, extend(parsedAttributes, options))); + }; + }; - /** - * Get the options to create the shape - * @param {Object} options - Options to creat the shape - * @returns {Object} Shape options - * @private - */ + fabric.Polyline.fromElement = fabric.Polyline.fromElementGenerator('Polyline'); - }, { - key: '_extendOptions', - value: function _extendOptions(options) { - var selectionStyles = _consts.fObjectOptions.SELECTION_STYLE; - var _graphics2 = this.graphics, - canvasImage = _graphics2.canvasImage, - createStaticCanvas = _graphics2.createStaticCanvas; + /* _FROM_SVG_END_ */ + /** + * Returns fabric.Polyline instance from an object representation + * @static + * @memberOf fabric.Polyline + * @param {Object} object Object to create an instance from + * @param {Function} [callback] Callback to invoke when an fabric.Path instance is created + */ + fabric.Polyline.fromObject = function(object, callback) { + return fabric.Object._fromObject('Polyline', object, callback, 'points'); + }; - options = (0, _tuiCodeSnippet.extend)({}, SHAPE_INIT_OPTIONS, this._options, selectionStyles, options); +})( true ? exports : 0); - return makeFabricFillOption(options, canvasImage, createStaticCanvas); - } + +(function(global) { + + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }); + + if (fabric.Polygon) { + fabric.warn('fabric.Polygon is already defined'); + return; + } + + /** + * Polygon class + * @class fabric.Polygon + * @extends fabric.Polyline + * @see {@link fabric.Polygon#initialize} for constructor definition + */ + fabric.Polygon = fabric.util.createClass(fabric.Polyline, /** @lends fabric.Polygon.prototype */ { + + /** + * Type of an object + * @type String + * @default + */ + type: 'polygon', /** - * Bind fabric events on the creating shape object - * @param {fabric.Object} shapeObj - Shape object * @private + * @param {CanvasRenderingContext2D} ctx Context to render on */ + _render: function(ctx) { + if (!this.commonRender(ctx)) { + return; + } + ctx.closePath(); + this._renderPaintInOrder(ctx); + }, - }, { - key: '_bindEventOnShape', - value: function _bindEventOnShape(shapeObj) { - var self = this; - var canvas = this.getCanvas(); + }); - shapeObj.on({ - added: function added() { - self._shapeObj = this; - _shapeResizeHelper2.default.setOrigins(self._shapeObj); - }, - selected: function selected() { - self._isSelected = true; - self._shapeObj = this; - canvas.uniformScaling = true; - canvas.defaultCursor = 'default'; - _shapeResizeHelper2.default.setOrigins(self._shapeObj); - }, - deselected: function deselected() { - self._isSelected = false; - self._shapeObj = null; - canvas.defaultCursor = 'crosshair'; - canvas.uniformScaling = false; - }, - modified: function modified() { - var currentObj = self._shapeObj; + /* _FROM_SVG_START_ */ + /** + * List of attribute names to account for when parsing SVG element (used by `fabric.Polygon.fromElement`) + * @static + * @memberOf fabric.Polygon + * @see: http://www.w3.org/TR/SVG/shapes.html#PolygonElement + */ + fabric.Polygon.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(); - _shapeResizeHelper2.default.adjustOriginToCenter(currentObj); - _shapeResizeHelper2.default.setOrigins(currentObj); - }, - modifiedInGroup: function modifiedInGroup(activeSelection) { - self._fillFilterRePositionInGroupSelection(shapeObj, activeSelection); - }, - moving: function moving() { - self._resetPositionFillFilter(this); - }, - rotating: function rotating() { - self._resetPositionFillFilter(this); - }, - scaling: function scaling(fEvent) { - var pointer = canvas.getPointer(fEvent.e); - var currentObj = self._shapeObj; + /** + * Returns {@link fabric.Polygon} instance from an SVG element + * @static + * @memberOf fabric.Polygon + * @param {SVGElement} element Element to parse + * @param {Function} callback callback function invoked after parsing + * @param {Object} [options] Options object + */ + fabric.Polygon.fromElement = fabric.Polyline.fromElementGenerator('Polygon'); + /* _FROM_SVG_END_ */ - canvas.setCursor('crosshair'); - _shapeResizeHelper2.default.resize(currentObj, pointer, true); + /** + * Returns fabric.Polygon instance from an object representation + * @static + * @memberOf fabric.Polygon + * @param {Object} object Object to create an instance from + * @param {Function} [callback] Callback to invoke when an fabric.Path instance is created + * @return {void} + */ + fabric.Polygon.fromObject = function(object, callback) { + fabric.Object._fromObject('Polygon', object, callback, 'points'); + }; - self._resetPositionFillFilter(this); - } - }); - } +})( true ? exports : 0); + + +(function(global) { + + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + min = fabric.util.array.min, + max = fabric.util.array.max, + extend = fabric.util.object.extend, + _toString = Object.prototype.toString, + toFixed = fabric.util.toFixed; + + if (fabric.Path) { + fabric.warn('fabric.Path is already defined'); + return; + } + + /** + * Path class + * @class fabric.Path + * @extends fabric.Object + * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#path_and_pathgroup} + * @see {@link fabric.Path#initialize} for constructor definition + */ + fabric.Path = fabric.util.createClass(fabric.Object, /** @lends fabric.Path.prototype */ { /** - * MouseDown event handler on canvas - * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object - * @private + * Type of an object + * @type String + * @default */ + type: 'path', - }, { - key: '_onFabricMouseDown', - value: function _onFabricMouseDown(fEvent) { - if (!fEvent.target) { - this._isSelected = false; - this._shapeObj = false; + /** + * Array of path points + * @type Array + * @default + */ + path: null, + + cacheProperties: fabric.Object.prototype.cacheProperties.concat('path', 'fillRule'), + + stateProperties: fabric.Object.prototype.stateProperties.concat('path'), + + /** + * Constructor + * @param {Array|String} path Path data (sequence of coordinates and corresponding "command" tokens) + * @param {Object} [options] Options object + * @return {fabric.Path} thisArg + */ + initialize: function(path, options) { + options = options || { }; + this.callSuper('initialize', options); + if (!path) { + path = []; } - if (!this._isSelected && !this._shapeObj) { - var canvas = this.getCanvas(); - this._startPoint = canvas.getPointer(fEvent.e); + var fromArray = _toString.call(path) === '[object Array]'; - canvas.on({ - 'mouse:move': this._handlers.mousemove, - 'mouse:up': this._handlers.mouseup - }); + this.path = fabric.util.makePathSimpler( + fromArray ? path : fabric.util.parsePath(path) + ); + + if (!this.path) { + return; } - } + fabric.Polyline.prototype._setPositionDimensions.call(this, options); + }, /** - * MouseDown event handler on canvas - * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object * @private + * @param {CanvasRenderingContext2D} ctx context to render path on */ + _renderPathCommands: function(ctx) { + var current, // current instruction + subpathStartX = 0, + subpathStartY = 0, + x = 0, // current x + y = 0, // current y + controlX = 0, // current control point x + controlY = 0, // current control point y + l = -this.pathOffset.x, + t = -this.pathOffset.y; - }, { - key: '_onFabricMouseMove', - value: function _onFabricMouseMove(fEvent) { - var _this4 = this; + ctx.beginPath(); - var canvas = this.getCanvas(); - var pointer = canvas.getPointer(fEvent.e); - var startPointX = this._startPoint.x; - var startPointY = this._startPoint.y; - var width = startPointX - pointer.x; - var height = startPointY - pointer.y; - var shape = this._shapeObj; + for (var i = 0, len = this.path.length; i < len; ++i) { - if (!shape) { - this.add(this._type, { - left: startPointX, - top: startPointY, - width: width, - height: height - }).then(function (objectProps) { - _this4.fire(_consts.eventNames.ADD_OBJECT, objectProps); - }); - } else { - this._shapeObj.set({ - isRegular: this._withShiftKey - }); + current = this.path[i]; - _shapeResizeHelper2.default.resize(shape, pointer); - canvas.renderAll(); + switch (current[0]) { // first letter - this._resetPositionFillFilter(shape); - } - } + case 'L': // lineto, absolute + x = current[1]; + y = current[2]; + ctx.lineTo(x + l, y + t); + break; - /** - * MouseUp event handler on canvas - * @private - */ + case 'M': // moveTo, absolute + x = current[1]; + y = current[2]; + subpathStartX = x; + subpathStartY = y; + ctx.moveTo(x + l, y + t); + break; - }, { - key: '_onFabricMouseUp', - value: function _onFabricMouseUp() { - var _this5 = this; + case 'C': // bezierCurveTo, absolute + x = current[5]; + y = current[6]; + controlX = current[3]; + controlY = current[4]; + ctx.bezierCurveTo( + current[1] + l, + current[2] + t, + controlX + l, + controlY + t, + x + l, + y + t + ); + break; - var canvas = this.getCanvas(); - var startPointX = this._startPoint.x; - var startPointY = this._startPoint.y; - var shape = this._shapeObj; + case 'Q': // quadraticCurveTo, absolute + ctx.quadraticCurveTo( + current[1] + l, + current[2] + t, + current[3] + l, + current[4] + t + ); + x = current[3]; + y = current[4]; + controlX = current[1]; + controlY = current[2]; + break; - if (!shape) { - this.add(this._type, { - left: startPointX, - top: startPointY, - width: DEFAULT_WIDTH, - height: DEFAULT_HEIGHT - }).then(function (objectProps) { - _this5.fire(_consts.eventNames.ADD_OBJECT, objectProps); - }); - } else if (shape) { - _shapeResizeHelper2.default.adjustOriginToCenter(shape); - this.fire(_consts.eventNames.OBJECT_ADDED, this.graphics.createObjectProperties(shape)); + case 'z': + case 'Z': + x = subpathStartX; + y = subpathStartY; + ctx.closePath(); + break; + } } - - canvas.off({ - 'mouse:move': this._handlers.mousemove, - 'mouse:up': this._handlers.mouseup - }); - } + }, /** - * Keydown event handler on document - * @param {KeyboardEvent} e - Event object * @private + * @param {CanvasRenderingContext2D} ctx context to render path on */ - - }, { - key: '_onKeyDown', - value: function _onKeyDown(e) { - if (e.keyCode === _consts.keyCodes.SHIFT) { - this._withShiftKey = true; - - if (this._shapeObj) { - this._shapeObj.isRegular = true; - } - } - } + _render: function(ctx) { + this._renderPathCommands(ctx); + this._renderPaintInOrder(ctx); + }, /** - * Keyup event handler on document - * @param {KeyboardEvent} e - Event object - * @private + * Returns string representation of an instance + * @return {String} string representation of an instance */ - - }, { - key: '_onKeyUp', - value: function _onKeyUp(e) { - if (e.keyCode === _consts.keyCodes.SHIFT) { - this._withShiftKey = false; - - if (this._shapeObj) { - this._shapeObj.isRegular = false; - } - } - } + toString: function() { + return '#'; + }, /** - * Reset shape position and internal proportions in the filter type fill area. - * @param {fabric.Object} shapeObj - Shape object - * @private + * Returns object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance */ + toObject: function(propertiesToInclude) { + return extend(this.callSuper('toObject', propertiesToInclude), { + path: this.path.map(function(item) { return item.slice(); }), + }); + }, - }, { - key: '_resetPositionFillFilter', - value: function _resetPositionFillFilter(shapeObj) { - if ((0, _util.getFillTypeFromObject)(shapeObj) !== 'filter') { - return; - } - - var _getCustomProperty = (0, _util.getCustomProperty)(shapeObj, 'patternSourceCanvas'), - patternSourceCanvas = _getCustomProperty.patternSourceCanvas; - - var fillImage = (0, _shapeFilterFillHelper.getFillImageFromShape)(shapeObj); - - var _getCustomProperty2 = (0, _util.getCustomProperty)(fillImage, 'originalAngle'), - originalAngle = _getCustomProperty2.originalAngle; - - if (this.graphics.canvasImage.angle !== originalAngle) { - (0, _shapeFilterFillHelper.reMakePatternImageSource)(shapeObj, this.graphics.canvasImage); + /** + * Returns dataless object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toDatalessObject: function(propertiesToInclude) { + var o = this.toObject(['sourcePath'].concat(propertiesToInclude)); + if (o.sourcePath) { + delete o.path; } - var originX = shapeObj.originX, - originY = shapeObj.originY; - + return o; + }, - _shapeResizeHelper2.default.adjustOriginToCenter(shapeObj); + /* _TO_SVG_START_ */ + /** + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance + */ + _toSVG: function() { + var path = fabric.util.joinPath(this.path); + return [ + '\n' + ]; + }, - shapeObj.width *= shapeObj.scaleX; - shapeObj.height *= shapeObj.scaleY; - shapeObj.rx *= shapeObj.scaleX; - shapeObj.ry *= shapeObj.scaleY; - shapeObj.scaleX = 1; - shapeObj.scaleY = 1; + _getOffsetTransform: function() { + var digits = fabric.Object.NUM_FRACTION_DIGITS; + return ' translate(' + toFixed(-this.pathOffset.x, digits) + ', ' + + toFixed(-this.pathOffset.y, digits) + ')'; + }, - (0, _shapeFilterFillHelper.rePositionFilterTypeFillImage)(shapeObj); + /** + * Returns svg clipPath representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + toClipPathSVG: function(reviver) { + var additionalTransform = this._getOffsetTransform(); + return '\t' + this._createBaseClipPathSVGMarkup( + this._toSVG(), { reviver: reviver, additionalTransform: additionalTransform } + ); + }, - (0, _util.changeOrigin)(shapeObj, { - originX: originX, - originY: originY - }); + /** + * Returns svg representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + toSVG: function(reviver) { + var additionalTransform = this._getOffsetTransform(); + return this._createBaseSVGMarkup(this._toSVG(), { reviver: reviver, additionalTransform: additionalTransform }); + }, + /* _TO_SVG_END_ */ - (0, _shapeFilterFillHelper.resetFillPatternCanvas)(patternSourceCanvas); - } + /** + * Returns number representation of an instance complexity + * @return {Number} complexity of this instance + */ + complexity: function() { + return this.path.length; + }, /** - * Reset filter area position within group selection. - * @param {fabric.Object} shapeObj - Shape object - * @param {fabric.ActiveSelection} activeSelection - Shape object * @private */ + _calcDimensions: function() { - }, { - key: '_fillFilterRePositionInGroupSelection', - value: function _fillFilterRePositionInGroupSelection(shapeObj, activeSelection) { - if (activeSelection.scaleX !== 1 || activeSelection.scaleY !== 1) { - // This is necessary because the group's scale transition state affects the relative size of the fill area. - // The only way to reset the object transformation scale state to neutral. - // {@link https://github.com/fabricjs/fabric.js/issues/5372} - activeSelection.addWithUpdate(); - } - - var angle = shapeObj.angle, - left = shapeObj.left, - top = shapeObj.top; - - - _fabric2.default.util.addTransformToObject(shapeObj, activeSelection.calcTransformMatrix()); - this._resetPositionFillFilter(shapeObj); - - shapeObj.set({ - angle: angle, - left: left, - top: top - }); - } - }]); + var aX = [], + aY = [], + current, // current instruction + subpathStartX = 0, + subpathStartY = 0, + x = 0, // current x + y = 0, // current y + bounds; - return Shape; -}(_component2.default); + for (var i = 0, len = this.path.length; i < len; ++i) { -exports.default = Shape; + current = this.path[i]; -/***/ }), + switch (current[0]) { // first letter -/***/ "./src/js/component/text.js": -/*!**********************************!*\ - !*** ./src/js/component/text.js ***! - \**********************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + case 'L': // lineto, absolute + x = current[1]; + y = current[2]; + bounds = []; + break; -"use strict"; + case 'M': // moveTo, absolute + x = current[1]; + y = current[2]; + subpathStartX = x; + subpathStartY = y; + bounds = []; + break; + case 'C': // bezierCurveTo, absolute + bounds = fabric.util.getBoundsOfCurve(x, y, + current[1], + current[2], + current[3], + current[4], + current[5], + current[6] + ); + x = current[5]; + y = current[6]; + break; -Object.defineProperty(exports, "__esModule", { - value: true -}); + case 'Q': // quadraticCurveTo, absolute + bounds = fabric.util.getBoundsOfCurve(x, y, + current[1], + current[2], + current[1], + current[2], + current[3], + current[4] + ); + x = current[3]; + y = current[4]; + break; -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + case 'z': + case 'Z': + x = subpathStartX; + y = subpathStartY; + break; + } + bounds.forEach(function (point) { + aX.push(point.x); + aY.push(point.y); + }); + aX.push(x); + aY.push(y); + } -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); + var minX = min(aX) || 0, + minY = min(aY) || 0, + maxX = max(aX) || 0, + maxY = max(aY) || 0, + deltaX = maxX - minX, + deltaY = maxY - minY; -var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); + return { + left: minX, + top: minY, + width: deltaX, + height: deltaY + }; + } + }); -var _fabric = __webpack_require__(/*! fabric */ "fabric"); + /** + * Creates an instance of fabric.Path from an object + * @static + * @memberOf fabric.Path + * @param {Object} object + * @param {Function} [callback] Callback to invoke when an fabric.Path instance is created + */ + fabric.Path.fromObject = function(object, callback) { + if (typeof object.sourcePath === 'string') { + var pathUrl = object.sourcePath; + fabric.loadSVGFromURL(pathUrl, function (elements) { + var path = elements[0]; + path.setOptions(object); + callback && callback(path); + }); + } + else { + fabric.Object._fromObject('Path', object, callback, 'path'); + } + }; -var _fabric2 = _interopRequireDefault(_fabric); + /* _FROM_SVG_START_ */ + /** + * List of attribute names to account for when parsing SVG element (used by `fabric.Path.fromElement`) + * @static + * @memberOf fabric.Path + * @see http://www.w3.org/TR/SVG/paths.html#PathElement + */ + fabric.Path.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(['d']); -var _component = __webpack_require__(/*! @/interface/component */ "./src/js/interface/component.js"); + /** + * Creates an instance of fabric.Path from an SVG element + * @static + * @memberOf fabric.Path + * @param {SVGElement} element to parse + * @param {Function} callback Callback to invoke when an fabric.Path instance is created + * @param {Object} [options] Options object + * @param {Function} [callback] Options callback invoked after parsing is finished + */ + fabric.Path.fromElement = function(element, callback, options) { + var parsedAttributes = fabric.parseAttributes(element, fabric.Path.ATTRIBUTE_NAMES); + parsedAttributes.fromSVG = true; + callback(new fabric.Path(parsedAttributes.d, extend(parsedAttributes, options))); + }; + /* _FROM_SVG_END_ */ -var _component2 = _interopRequireDefault(_component); +})( true ? exports : 0); -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); +(function(global) { -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + 'use strict'; -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + var fabric = global.fabric || (global.fabric = { }), + min = fabric.util.array.min, + max = fabric.util.array.max; -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + if (fabric.Group) { + return; + } -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** - * @author NHN. FE Development Team - * @fileoverview Text module - */ + /** + * Group class + * @class fabric.Group + * @extends fabric.Object + * @mixes fabric.Collection + * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#groups} + * @see {@link fabric.Group#initialize} for constructor definition + */ + fabric.Group = fabric.util.createClass(fabric.Object, fabric.Collection, /** @lends fabric.Group.prototype */ { + /** + * Type of an object + * @type String + * @default + */ + type: 'group', -var defaultStyles = { - fill: '#000000', - left: 0, - top: 0 -}; -var resetStyles = { - fill: '#000000', - fontStyle: 'normal', - fontWeight: 'normal', - textAlign: 'tie-text-align-left', - underline: false -}; -var DBCLICK_TIME = 500; + /** + * Width of stroke + * @type Number + * @default + */ + strokeWidth: 0, -/** - * Text - * @class Text - * @param {Graphics} graphics - Graphics instance - * @extends {Component} - * @ignore - */ + /** + * Indicates if click, mouseover, mouseout events & hoverCursor should also check for subtargets + * @type Boolean + * @default + */ + subTargetCheck: false, -var Text = function (_Component) { - _inherits(Text, _Component); + /** + * Groups are container, do not render anything on theyr own, ence no cache properties + * @type Array + * @default + */ + cacheProperties: [], - function Text(graphics) { - _classCallCheck(this, Text); + /** + * setOnGroup is a method used for TextBox that is no more used since 2.0.0 The behavior is still + * available setting this boolean to true. + * @type Boolean + * @since 2.0.0 + * @default + */ + useSetOnGroup: false, /** - * Default text style - * @type {Object} + * Constructor + * @param {Object} objects Group objects + * @param {Object} [options] Options object + * @param {Boolean} [isAlreadyGrouped] if true, objects have been grouped already. + * @return {Object} thisArg */ - var _this = _possibleConstructorReturn(this, (Text.__proto__ || Object.getPrototypeOf(Text)).call(this, _consts.componentNames.TEXT, graphics)); + initialize: function(objects, options, isAlreadyGrouped) { + options = options || {}; + this._objects = []; + // if objects enclosed in a group have been grouped already, + // we cannot change properties of objects. + // Thus we need to set options to group without objects, + isAlreadyGrouped && this.callSuper('initialize', options); + this._objects = objects || []; + for (var i = this._objects.length; i--; ) { + this._objects[i].group = this; + } + + if (!isAlreadyGrouped) { + var center = options && options.centerPoint; + // we want to set origins before calculating the bounding box. + // so that the topleft can be set with that in mind. + // if specific top and left are passed, are overwritten later + // with the callSuper('initialize', options) + if (options.originX !== undefined) { + this.originX = options.originX; + } + if (options.originY !== undefined) { + this.originY = options.originY; + } + // if coming from svg i do not want to calc bounds. + // i assume width and height are passed along options + center || this._calcBounds(); + this._updateObjectsCoords(center); + delete options.centerPoint; + this.callSuper('initialize', options); + } + else { + this._updateObjectsACoords(); + } - _this._defaultStyles = defaultStyles; + this.setCoords(); + }, /** - * Selected state - * @type {boolean} + * @private */ - _this._isSelected = false; + _updateObjectsACoords: function() { + var skipControls = true; + for (var i = this._objects.length; i--; ){ + this._objects[i].setCoords(skipControls); + } + }, /** - * Selected text object - * @type {Object} + * @private + * @param {Boolean} [skipCoordsChange] if true, coordinates of objects enclosed in a group do not change */ - _this._selectedObj = {}; + _updateObjectsCoords: function(center) { + var center = center || this.getCenterPoint(); + for (var i = this._objects.length; i--; ){ + this._updateObjectCoords(this._objects[i], center); + } + }, /** - * Editing text object - * @type {Object} + * @private + * @param {Object} object + * @param {fabric.Point} center, current center of group. */ - _this._editingObj = {}; + _updateObjectCoords: function(object, center) { + var objectLeft = object.left, + objectTop = object.top, + skipControls = true; + + object.set({ + left: objectLeft - center.x, + top: objectTop - center.y + }); + object.group = this; + object.setCoords(skipControls); + }, /** - * Listeners for fabric event - * @type {Object} + * Returns string represenation of a group + * @return {String} */ - _this._listeners = { - mousedown: _this._onFabricMouseDown.bind(_this), - select: _this._onFabricSelect.bind(_this), - selectClear: _this._onFabricSelectClear.bind(_this), - scaling: _this._onFabricScaling.bind(_this), - textChanged: _this._onFabricTextChanged.bind(_this) - }; + toString: function() { + return '#'; + }, /** - * Textarea element for editing - * @type {HTMLElement} + * Adds an object to a group; Then recalculates group's dimension, position. + * @param {Object} object + * @return {fabric.Group} thisArg + * @chainable */ - _this._textarea = null; + addWithUpdate: function(object) { + var nested = !!this.group; + this._restoreObjectsState(); + fabric.util.resetObjectTransform(this); + if (object) { + if (nested) { + // if this group is inside another group, we need to pre transform the object + fabric.util.removeTransformFromObject(object, this.group.calcTransformMatrix()); + } + this._objects.push(object); + object.group = this; + object._set('canvas', this.canvas); + } + this._calcBounds(); + this._updateObjectsCoords(); + this.dirty = true; + if (nested) { + this.group.addWithUpdate(); + } + else { + this.setCoords(); + } + return this; + }, /** - * Ratio of current canvas - * @type {number} + * Removes an object from a group; Then recalculates group's dimension, position. + * @param {Object} object + * @return {fabric.Group} thisArg + * @chainable */ - _this._ratio = 1; + removeWithUpdate: function(object) { + this._restoreObjectsState(); + fabric.util.resetObjectTransform(this); + + this.remove(object); + this._calcBounds(); + this._updateObjectsCoords(); + this.setCoords(); + this.dirty = true; + return this; + }, /** - * Last click time - * @type {Date} + * @private */ - _this._lastClickTime = new Date().getTime(); + _onObjectAdded: function(object) { + this.dirty = true; + object.group = this; + object._set('canvas', this.canvas); + }, /** - * Text object infos before editing - * @type {Object} + * @private */ - _this._editingObjInfos = {}; + _onObjectRemoved: function(object) { + this.dirty = true; + delete object.group; + }, /** - * Previous state of editing - * @type {boolean} + * @private */ - _this.isPrevEditing = false; - return _this; - } - - /** - * Start input text mode - */ - + _set: function(key, value) { + var i = this._objects.length; + if (this.useSetOnGroup) { + while (i--) { + this._objects[i].setOnGroup(key, value); + } + } + if (key === 'canvas') { + while (i--) { + this._objects[i]._set(key, value); + } + } + fabric.Object.prototype._set.call(this, key, value); + }, - _createClass(Text, [{ - key: 'start', - value: function start() { - var _this2 = this; + /** + * Returns object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toObject: function(propertiesToInclude) { + var _includeDefaultValues = this.includeDefaultValues; + var objsToObject = this._objects + .filter(function (obj) { + return !obj.excludeFromExport; + }) + .map(function (obj) { + var originalDefaults = obj.includeDefaultValues; + obj.includeDefaultValues = _includeDefaultValues; + var _obj = obj.toObject(propertiesToInclude); + obj.includeDefaultValues = originalDefaults; + return _obj; + }); + var obj = fabric.Object.prototype.toObject.call(this, propertiesToInclude); + obj.objects = objsToObject; + return obj; + }, - var canvas = this.getCanvas(); + /** + * Returns object representation of an instance, in dataless mode. + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance + */ + toDatalessObject: function(propertiesToInclude) { + var objsToObject, sourcePath = this.sourcePath; + if (sourcePath) { + objsToObject = sourcePath; + } + else { + var _includeDefaultValues = this.includeDefaultValues; + objsToObject = this._objects.map(function(obj) { + var originalDefaults = obj.includeDefaultValues; + obj.includeDefaultValues = _includeDefaultValues; + var _obj = obj.toDatalessObject(propertiesToInclude); + obj.includeDefaultValues = originalDefaults; + return _obj; + }); + } + var obj = fabric.Object.prototype.toDatalessObject.call(this, propertiesToInclude); + obj.objects = objsToObject; + return obj; + }, - canvas.selection = false; - canvas.defaultCursor = 'text'; - canvas.on({ - 'mouse:down': this._listeners.mousedown, - 'selection:created': this._listeners.select, - 'selection:updated': this._listeners.select, - 'before:selection:cleared': this._listeners.selectClear, - 'object:scaling': this._listeners.scaling, - 'text:changed': this._listeners.textChanged - }); + /** + * Renders instance on a given context + * @param {CanvasRenderingContext2D} ctx context to render instance on + */ + render: function(ctx) { + this._transformDone = true; + this.callSuper('render', ctx); + this._transformDone = false; + }, - canvas.forEachObject(function (obj) { - if (obj.type === 'i-text') { - _this2.adjustOriginPosition(obj, 'start'); + /** + * Decide if the object should cache or not. Create its own cache level + * needsItsOwnCache should be used when the object drawing method requires + * a cache step. None of the fabric classes requires it. + * Generally you do not cache objects in groups because the group is already cached. + * @return {Boolean} + */ + shouldCache: function() { + var ownCache = fabric.Object.prototype.shouldCache.call(this); + if (ownCache) { + for (var i = 0, len = this._objects.length; i < len; i++) { + if (this._objects[i].willDrawShadow()) { + this.ownCaching = false; + return false; + } } - }); - - this.setCanvasRatio(); - } + } + return ownCache; + }, /** - * End input text mode + * Check if this object or a child object will cast a shadow + * @return {Boolean} */ + willDrawShadow: function() { + if (fabric.Object.prototype.willDrawShadow.call(this)) { + return true; + } + for (var i = 0, len = this._objects.length; i < len; i++) { + if (this._objects[i].willDrawShadow()) { + return true; + } + } + return false; + }, - }, { - key: 'end', - value: function end() { - var _this3 = this; - - var canvas = this.getCanvas(); + /** + * Check if this group or its parent group are caching, recursively up + * @return {Boolean} + */ + isOnACache: function() { + return this.ownCaching || (this.group && this.group.isOnACache()); + }, - canvas.selection = true; - canvas.defaultCursor = 'default'; + /** + * Execute the drawing operation for an object on a specified context + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + drawObject: function(ctx) { + for (var i = 0, len = this._objects.length; i < len; i++) { + this._objects[i].render(ctx); + } + this._drawClipPath(ctx); + }, - canvas.forEachObject(function (obj) { - if (obj.type === 'i-text') { - if (obj.text === '') { - canvas.remove(obj); - } else { - _this3.adjustOriginPosition(obj, 'end'); + /** + * Check if cache is dirty + */ + isCacheDirty: function(skipCanvas) { + if (this.callSuper('isCacheDirty', skipCanvas)) { + return true; + } + if (!this.statefullCache) { + return false; + } + for (var i = 0, len = this._objects.length; i < len; i++) { + if (this._objects[i].isCacheDirty(true)) { + if (this._cacheCanvas) { + // if this group has not a cache canvas there is nothing to clean + var x = this.cacheWidth / this.zoomX, y = this.cacheHeight / this.zoomY; + this._cacheContext.clearRect(-x / 2, -y / 2, x, y); } + return true; } - }); + } + return false; + }, - canvas.off({ - 'mouse:down': this._listeners.mousedown, - 'selection:created': this._listeners.select, - 'selection:updated': this._listeners.select, - 'before:selection:cleared': this._listeners.selectClear, - 'object:selected': this._listeners.select, - 'object:scaling': this._listeners.scaling, - 'text:changed': this._listeners.textChanged + /** + * Restores original state of each of group objects (original state is that which was before group was created). + * if the nested boolean is true, the original state will be restored just for the + * first group and not for all the group chain + * @private + * @param {Boolean} nested tell the function to restore object state up to the parent group and not more + * @return {fabric.Group} thisArg + * @chainable + */ + _restoreObjectsState: function() { + var groupMatrix = this.calcOwnMatrix(); + this._objects.forEach(function(object) { + // instead of using _this = this; + fabric.util.addTransformToObject(object, groupMatrix); + delete object.group; + object.setCoords(); }); - } + return this; + }, /** - * Adjust the origin position - * @param {fabric.Object} text - text object - * @param {string} editStatus - 'start' or 'end' + * Realises the transform from this group onto the supplied object + * i.e. it tells you what would happen if the supplied object was in + * the group, and then the group was destroyed. It mutates the supplied + * object. + * Warning: this method is not useful anymore, it has been kept to no break the api. + * is not used in the fabricJS codebase + * this method will be reduced to using the utility. + * @private + * @deprecated + * @param {fabric.Object} object + * @param {Array} parentMatrix parent transformation + * @return {fabric.Object} transformedObject */ + realizeTransform: function(object, parentMatrix) { + fabric.util.addTransformToObject(object, parentMatrix); + return object; + }, - }, { - key: 'adjustOriginPosition', - value: function adjustOriginPosition(text, editStatus) { - var originX = 'center', - originY = 'center'; + /** + * Destroys a group (restoring state of its objects) + * @return {fabric.Group} thisArg + * @chainable + */ + destroy: function() { + // when group is destroyed objects needs to get a repaint to be eventually + // displayed on canvas. + this._objects.forEach(function(object) { + object.set('dirty', true); + }); + return this._restoreObjectsState(); + }, - if (editStatus === 'start') { - originX = 'left'; - originY = 'top'; + /** + * make a group an active selection, remove the group from canvas + * the group has to be on canvas for this to work. + * @return {fabric.ActiveSelection} thisArg + * @chainable + */ + toActiveSelection: function() { + if (!this.canvas) { + return; } - - var _text$getPointByOrigi = text.getPointByOrigin(originX, originY), - left = _text$getPointByOrigi.x, - top = _text$getPointByOrigi.y; - - text.set({ - left: left, - top: top, - originX: originX, - originY: originY + var objects = this._objects, canvas = this.canvas; + this._objects = []; + var options = this.toObject(); + delete options.objects; + var activeSelection = new fabric.ActiveSelection([]); + activeSelection.set(options); + activeSelection.type = 'activeSelection'; + canvas.remove(this); + objects.forEach(function(object) { + object.group = activeSelection; + object.dirty = true; + canvas.add(object); }); - text.setCoords(); - } + activeSelection.canvas = canvas; + activeSelection._objects = objects; + canvas._activeObject = activeSelection; + activeSelection.setCoords(); + return activeSelection; + }, /** - * Add new text on canvas image - * @param {string} text - Initial input text - * @param {Object} options - Options for generating text - * @param {Object} [options.styles] Initial styles - * @param {string} [options.styles.fill] Color - * @param {string} [options.styles.fontFamily] Font type for text - * @param {number} [options.styles.fontSize] Size - * @param {string} [options.styles.fontStyle] Type of inclination (normal / italic) - * @param {string} [options.styles.fontWeight] Type of thicker or thinner looking (normal / bold) - * @param {string} [options.styles.textAlign] Type of text align (left / center / right) - * @param {string} [options.styles.textDecoration] Type of line (underline / line-through / overline) - * @param {{x: number, y: number}} [options.position] - Initial position - * @returns {Promise} + * Destroys a group (restoring state of its objects) + * @return {fabric.Group} thisArg + * @chainable */ + ungroupOnCanvas: function() { + return this._restoreObjectsState(); + }, - }, { - key: 'add', - value: function add(text, options) { - var _this4 = this; - - return new _util.Promise(function (resolve) { - var canvas = _this4.getCanvas(); - var newText = null; - var selectionStyle = _consts.fObjectOptions.SELECTION_STYLE; - var styles = _this4._defaultStyles; - - _this4._setInitPos(options.position); + /** + * Sets coordinates of all objects inside group + * @return {fabric.Group} thisArg + * @chainable + */ + setObjectsCoords: function() { + var skipControls = true; + this.forEachObject(function(object) { + object.setCoords(skipControls); + }); + return this; + }, - if (options.styles) { - styles = _tuiCodeSnippet2.default.extend(styles, options.styles); - } + /** + * @private + */ + _calcBounds: function(onlyWidthHeight) { + var aX = [], + aY = [], + o, prop, coords, + props = ['tr', 'br', 'bl', 'tl'], + i = 0, iLen = this._objects.length, + j, jLen = props.length; - if (!_tuiCodeSnippet2.default.isExisty(options.autofocus)) { - options.autofocus = true; + for ( ; i < iLen; ++i) { + o = this._objects[i]; + coords = o.calcACoords(); + for (j = 0; j < jLen; j++) { + prop = props[j]; + aX.push(coords[prop].x); + aY.push(coords[prop].y); } + o.aCoords = coords; + } - newText = new _fabric2.default.IText(text, styles); - selectionStyle = _tuiCodeSnippet2.default.extend({}, selectionStyle, { - originX: 'left', - originY: 'top' - }); - - newText.set(selectionStyle); - newText.on({ - mouseup: _this4._onFabricMouseUp.bind(_this4) - }); + this._getBounds(aX, aY, onlyWidthHeight); + }, - canvas.add(newText); + /** + * @private + */ + _getBounds: function(aX, aY, onlyWidthHeight) { + var minXY = new fabric.Point(min(aX), min(aY)), + maxXY = new fabric.Point(max(aX), max(aY)), + top = minXY.y || 0, left = minXY.x || 0, + width = (maxXY.x - minXY.x) || 0, + height = (maxXY.y - minXY.y) || 0; + this.width = width; + this.height = height; + if (!onlyWidthHeight) { + // the bounding box always finds the topleft most corner. + // whatever is the group origin, we set up here the left/top position. + this.setPositionByOrigin({ x: left, y: top }, 'left', 'top'); + } + }, - if (options.autofocus) { - newText.enterEditing(); - newText.selectAll(); - } + /* _TO_SVG_START_ */ + /** + * Returns svg representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + _toSVG: function(reviver) { + var svgString = ['\n']; - if (!canvas.getActiveObject()) { - canvas.setActiveObject(newText); - } + for (var i = 0, len = this._objects.length; i < len; i++) { + svgString.push('\t\t', this._objects[i].toSVG(reviver)); + } + svgString.push('\n'); + return svgString; + }, - _this4.isPrevEditing = true; - resolve(_this4.graphics.createObjectProperties(newText)); - }); - } + /** + * Returns styles-string for svg-export, specific version for group + * @return {String} + */ + getSvgStyles: function() { + var opacity = typeof this.opacity !== 'undefined' && this.opacity !== 1 ? + 'opacity: ' + this.opacity + ';' : '', + visibility = this.visible ? '' : ' visibility: hidden;'; + return [ + opacity, + this.getSvgFilter(), + visibility + ].join(''); + }, /** - * Change text of activate object on canvas image - * @param {Object} activeObj - Current selected text object - * @param {string} text - Changed text - * @returns {Promise} + * Returns svg clipPath representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance */ + toClipPathSVG: function(reviver) { + var svgString = []; - }, { - key: 'change', - value: function change(activeObj, text) { - var _this5 = this; + for (var i = 0, len = this._objects.length; i < len; i++) { + svgString.push('\t', this._objects[i].toClipPathSVG(reviver)); + } - return new _util.Promise(function (resolve) { - activeObj.set('text', text); + return this._createBaseClipPathSVGMarkup(svgString, { reviver: reviver }); + }, + /* _TO_SVG_END_ */ + }); - _this5.getCanvas().renderAll(); - resolve(); + /** + * Returns {@link fabric.Group} instance from an object representation + * @static + * @memberOf fabric.Group + * @param {Object} object Object to create a group from + * @param {Function} [callback] Callback to invoke when an group instance is created + */ + fabric.Group.fromObject = function(object, callback) { + var objects = object.objects, + options = fabric.util.object.clone(object, true); + delete options.objects; + if (typeof objects === 'string') { + // it has to be an url or something went wrong. + fabric.loadSVGFromURL(objects, function (elements) { + var group = fabric.util.groupSVGElements(elements, object, objects); + group.set(options); + callback && callback(group); }); + return; } + fabric.util.enlivenObjects(objects, function(enlivenedObjects) { + fabric.util.enlivenObjects([object.clipPath], function(enlivedClipPath) { + var options = fabric.util.object.clone(object, true); + options.clipPath = enlivedClipPath[0]; + delete options.objects; + callback && callback(new fabric.Group(enlivenedObjects, options, true)); + }); + }); + }; - /** - * Set style - * @param {Object} activeObj - Current selected text object - * @param {Object} styleObj - Initial styles - * @param {string} [styleObj.fill] Color - * @param {string} [styleObj.fontFamily] Font type for text - * @param {number} [styleObj.fontSize] Size - * @param {string} [styleObj.fontStyle] Type of inclination (normal / italic) - * @param {string} [styleObj.fontWeight] Type of thicker or thinner looking (normal / bold) - * @param {string} [styleObj.textAlign] Type of text align (left / center / right) - * @param {string} [styleObj.textDecoration] Type of line (underline / line-through / overline) - * @returns {Promise} - */ +})( true ? exports : 0); - }, { - key: 'setStyle', - value: function setStyle(activeObj, styleObj) { - var _this6 = this; - return new _util.Promise(function (resolve) { - _tuiCodeSnippet2.default.forEach(styleObj, function (val, key) { - if (activeObj[key] === val && key !== 'fontSize') { - styleObj[key] = resetStyles[key] || ''; - } - }, _this6); +(function(global) { - if ('textDecoration' in styleObj) { - _tuiCodeSnippet2.default.extend(styleObj, _this6._getTextDecorationAdaptObject(styleObj.textDecoration)); - } + 'use strict'; - activeObj.set(styleObj); + var fabric = global.fabric || (global.fabric = { }); - _this6.getCanvas().renderAll(); - resolve(); - }); - } + if (fabric.ActiveSelection) { + return; + } - /** - * Get the text - * @param {Object} activeObj - Current selected text object - * @returns {String} text - */ - - }, { - key: 'getText', - value: function getText(activeObj) { - return activeObj.text; - } + /** + * Group class + * @class fabric.ActiveSelection + * @extends fabric.Group + * @tutorial {@link http://fabricjs.com/fabric-intro-part-3#groups} + * @see {@link fabric.ActiveSelection#initialize} for constructor definition + */ + fabric.ActiveSelection = fabric.util.createClass(fabric.Group, /** @lends fabric.ActiveSelection.prototype */ { /** - * Set infos of the current selected object - * @param {fabric.Text} obj - Current selected text object - * @param {boolean} state - State of selecting + * Type of an object + * @type String + * @default */ - - }, { - key: 'setSelectedInfo', - value: function setSelectedInfo(obj, state) { - this._selectedObj = obj; - this._isSelected = state; - } + type: 'activeSelection', /** - * Whether object is selected or not - * @returns {boolean} State of selecting + * Constructor + * @param {Object} objects ActiveSelection objects + * @param {Object} [options] Options object + * @return {Object} thisArg */ + initialize: function(objects, options) { + options = options || {}; + this._objects = objects || []; + for (var i = this._objects.length; i--; ) { + this._objects[i].group = this; + } - }, { - key: 'isSelected', - value: function isSelected() { - return this._isSelected; - } + if (options.originX) { + this.originX = options.originX; + } + if (options.originY) { + this.originY = options.originY; + } + this._calcBounds(); + this._updateObjectsCoords(); + fabric.Object.prototype.initialize.call(this, options); + this.setCoords(); + }, /** - * Get current selected text object - * @returns {fabric.Text} Current selected text object - */ - - }, { - key: 'getSelectedObj', - value: function getSelectedObj() { - return this._selectedObj; - } + * Change te activeSelection to a normal group, + * High level function that automatically adds it to canvas as + * active object. no events fired. + * @since 2.0.0 + * @return {fabric.Group} + */ + toGroup: function() { + var objects = this._objects.concat(); + this._objects = []; + var options = fabric.Object.prototype.toObject.call(this); + var newGroup = new fabric.Group([]); + delete options.type; + newGroup.set(options); + objects.forEach(function(object) { + object.canvas.remove(object); + object.group = newGroup; + }); + newGroup._objects = objects; + if (!this.canvas) { + return newGroup; + } + var canvas = this.canvas; + canvas.add(newGroup); + canvas._activeObject = newGroup; + newGroup.setCoords(); + return newGroup; + }, /** - * Set ratio value of canvas + * If returns true, deselection is cancelled. + * @since 2.0.0 + * @return {Boolean} [cancel] */ - - }, { - key: 'setCanvasRatio', - value: function setCanvasRatio() { - var canvasElement = this.getCanvasElement(); - var cssWidth = parseInt(canvasElement.style.maxWidth, 10); - var originWidth = canvasElement.width; - - this._ratio = originWidth / cssWidth; - } + onDeselect: function() { + this.destroy(); + return false; + }, /** - * Get ratio value of canvas - * @returns {number} Ratio value + * Returns string representation of a group + * @return {String} */ - - }, { - key: 'getCanvasRatio', - value: function getCanvasRatio() { - return this._ratio; - } + toString: function() { + return '#'; + }, /** - * Get text decoration adapt object - * @param {string} textDecoration - text decoration option string - * @returns {object} adapt object for override + * Decide if the object should cache or not. Create its own cache level + * objectCaching is a global flag, wins over everything + * needsItsOwnCache should be used when the object drawing method requires + * a cache step. None of the fabric classes requires it. + * Generally you do not cache objects in groups because the group outside is cached. + * @return {Boolean} */ - - }, { - key: '_getTextDecorationAdaptObject', - value: function _getTextDecorationAdaptObject(textDecoration) { - return { - underline: textDecoration === 'underline', - linethrough: textDecoration === 'line-through', - overline: textDecoration === 'overline' - }; - } + shouldCache: function() { + return false; + }, /** - * Set initial position on canvas image - * @param {{x: number, y: number}} [position] - Selected position - * @private + * Check if this group or its parent group are caching, recursively up + * @return {Boolean} */ - - }, { - key: '_setInitPos', - value: function _setInitPos(position) { - position = position || this.getCanvasImage().getCenterPoint(); - - this._defaultStyles.left = position.x; - this._defaultStyles.top = position.y; - } + isOnACache: function() { + return false; + }, /** - * Input event handler - * @private + * Renders controls and borders for the object + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {Object} [styleOverride] properties to override the object style + * @param {Object} [childrenOverride] properties to override the children overrides */ + _renderControls: function(ctx, styleOverride, childrenOverride) { + ctx.save(); + ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1; + this.callSuper('_renderControls', ctx, styleOverride); + childrenOverride = childrenOverride || { }; + if (typeof childrenOverride.hasControls === 'undefined') { + childrenOverride.hasControls = false; + } + childrenOverride.forActiveSelection = true; + for (var i = 0, len = this._objects.length; i < len; i++) { + this._objects[i]._renderControls(ctx, childrenOverride); + } + ctx.restore(); + }, + }); - }, { - key: '_onInput', - value: function _onInput() { - var ratio = this.getCanvasRatio(); - var obj = this._editingObj; - var textareaStyle = this._textarea.style; + /** + * Returns {@link fabric.ActiveSelection} instance from an object representation + * @static + * @memberOf fabric.ActiveSelection + * @param {Object} object Object to create a group from + * @param {Function} [callback] Callback to invoke when an ActiveSelection instance is created + */ + fabric.ActiveSelection.fromObject = function(object, callback) { + fabric.util.enlivenObjects(object.objects, function(enlivenedObjects) { + delete object.objects; + callback && callback(new fabric.ActiveSelection(enlivenedObjects, object, true)); + }); + }; - textareaStyle.width = Math.ceil(obj.width / ratio) + 'px'; - textareaStyle.height = Math.ceil(obj.height / ratio) + 'px'; - } +})( true ? exports : 0); - /** - * Keydown event handler - * @private - */ - }, { - key: '_onKeyDown', - value: function _onKeyDown() { - var _this7 = this; +(function(global) { - var ratio = this.getCanvasRatio(); - var obj = this._editingObj; - var textareaStyle = this._textarea.style; + 'use strict'; - setTimeout(function () { - obj.text(_this7._textarea.value); + var extend = fabric.util.object.extend; - textareaStyle.width = Math.ceil(obj.width / ratio) + 'px'; - textareaStyle.height = Math.ceil(obj.height / ratio) + 'px'; - }, 0); - } + if (!global.fabric) { + global.fabric = { }; + } - /** - * Blur event handler - * @private - */ + if (global.fabric.Image) { + fabric.warn('fabric.Image is already defined.'); + return; + } - }, { - key: '_onBlur', - value: function _onBlur() { - var ratio = this.getCanvasRatio(); - var editingObj = this._editingObj; - var editingObjInfos = this._editingObjInfos; - var textContent = this._textarea.value; - var transWidth = editingObj.width / ratio - editingObjInfos.width / ratio; - var transHeight = editingObj.height / ratio - editingObjInfos.height / ratio; + /** + * Image class + * @class fabric.Image + * @extends fabric.Object + * @tutorial {@link http://fabricjs.com/fabric-intro-part-1#images} + * @see {@link fabric.Image#initialize} for constructor definition + */ + fabric.Image = fabric.util.createClass(fabric.Object, /** @lends fabric.Image.prototype */ { - if (ratio === 1) { - transWidth /= 2; - transHeight /= 2; - } + /** + * Type of an object + * @type String + * @default + */ + type: 'image', - this._textarea.style.display = 'none'; + /** + * Width of a stroke. + * For image quality a stroke multiple of 2 gives better results. + * @type Number + * @default + */ + strokeWidth: 0, - editingObj.set({ - left: editingObjInfos.left + transWidth, - top: editingObjInfos.top + transHeight - }); + /** + * When calling {@link fabric.Image.getSrc}, return value from element src with `element.getAttribute('src')`. + * This allows for relative urls as image src. + * @since 2.7.0 + * @type Boolean + * @default + */ + srcFromAttribute: false, - if (textContent.length) { - this.getCanvas().add(editingObj); + /** + * private + * contains last value of scaleX to detect + * if the Image got resized after the last Render + * @type Number + */ + _lastScaleX: 1, - var params = { - id: _tuiCodeSnippet2.default.stamp(editingObj), - type: editingObj.type, - text: textContent - }; + /** + * private + * contains last value of scaleY to detect + * if the Image got resized after the last Render + * @type Number + */ + _lastScaleY: 1, - this.fire(_consts.eventNames.TEXT_CHANGED, params); - } - } + /** + * private + * contains last value of scaling applied by the apply filter chain + * @type Number + */ + _filterScalingX: 1, /** - * Scroll event handler - * @private + * private + * contains last value of scaling applied by the apply filter chain + * @type Number */ + _filterScalingY: 1, - }, { - key: '_onScroll', - value: function _onScroll() { - this._textarea.scrollLeft = 0; - this._textarea.scrollTop = 0; - } + /** + * minimum scale factor under which any resizeFilter is triggered to resize the image + * 0 will disable the automatic resize. 1 will trigger automatically always. + * number bigger than 1 are not implemented yet. + * @type Number + */ + minimumScaleTrigger: 0.5, /** - * Fabric scaling event handler - * @param {fabric.Event} fEvent - Current scaling event on selected object - * @private + * List of properties to consider when checking if + * state of an object is changed ({@link fabric.Object#hasStateChanged}) + * as well as for history (undo/redo) purposes + * @type Array */ + stateProperties: fabric.Object.prototype.stateProperties.concat('cropX', 'cropY'), - }, { - key: '_onFabricScaling', - value: function _onFabricScaling(fEvent) { - var obj = fEvent.target; + /** + * List of properties to consider when checking if cache needs refresh + * Those properties are checked by statefullCache ON ( or lazy mode if we want ) or from single + * calls to Object.set(key, value). If the key is in this list, the object is marked as dirty + * and refreshed at the next render + * @type Array + */ + cacheProperties: fabric.Object.prototype.cacheProperties.concat('cropX', 'cropY'), - obj.fontSize = obj.fontSize * obj.scaleY; - obj.scaleX = 1; - obj.scaleY = 1; - } + /** + * key used to retrieve the texture representing this image + * @since 2.0.0 + * @type String + * @default + */ + cacheKey: '', /** - * textChanged event handler - * @param {{target: fabric.Object}} props - changed text object - * @private + * Image crop in pixels from original image size. + * @since 2.0.0 + * @type Number + * @default */ + cropX: 0, - }, { - key: '_onFabricTextChanged', - value: function _onFabricTextChanged(props) { - this.fire(_consts.eventNames.TEXT_CHANGED, props.target); - } + /** + * Image crop in pixels from original image size. + * @since 2.0.0 + * @type Number + * @default + */ + cropY: 0, /** - * onSelectClear handler in fabric canvas - * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event - * @private + * Indicates whether this canvas will use image smoothing when painting this image. + * Also influence if the cacheCanvas for this image uses imageSmoothing + * @since 4.0.0-beta.11 + * @type Boolean + * @default */ + imageSmoothing: true, - }, { - key: '_onFabricSelectClear', - value: function _onFabricSelectClear(fEvent) { - var obj = this.getSelectedObj(); + /** + * Constructor + * Image can be initialized with any canvas drawable or a string. + * The string should be a url and will be loaded as an image. + * Canvas and Image element work out of the box, while videos require extra code to work. + * Please check video element events for seeking. + * @param {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String} element Image element + * @param {Object} [options] Options object + * @param {function} [callback] callback function to call after eventual filters applied. + * @return {fabric.Image} thisArg + */ + initialize: function(element, options) { + options || (options = { }); + this.filters = []; + this.cacheKey = 'texture' + fabric.Object.__uid++; + this.callSuper('initialize', options); + this._initElement(element, options); + }, - this.isPrevEditing = true; + /** + * Returns image element which this instance if based on + * @return {HTMLImageElement} Image element + */ + getElement: function() { + return this._element || {}; + }, - this.setSelectedInfo(fEvent.target, false); + /** + * Sets image element for this instance to a specified one. + * If filters defined they are applied to new image. + * You might need to call `canvas.renderAll` and `object.setCoords` after replacing, to render new image and update controls area. + * @param {HTMLImageElement} element + * @param {Object} [options] Options object + * @return {fabric.Image} thisArg + * @chainable + */ + setElement: function(element, options) { + this.removeTexture(this.cacheKey); + this.removeTexture(this.cacheKey + '_filtered'); + this._element = element; + this._originalElement = element; + this._initConfig(options); + if (this.filters.length !== 0) { + this.applyFilters(); + } + // resizeFilters work on the already filtered copy. + // we need to apply resizeFilters AFTER normal filters. + // applyResizeFilters is run more often than normal filters + // and is triggered by user interactions rather than dev code + if (this.resizeFilter) { + this.applyResizeFilters(); + } + return this; + }, - if (obj) { - // obj is empty object at initial time, will be set fabric object - if (obj.text === '') { - this.getCanvas().remove(obj); - } + /** + * Delete a single texture if in webgl mode + */ + removeTexture: function(key) { + var backend = fabric.filterBackend; + if (backend && backend.evictCachesForKey) { + backend.evictCachesForKey(key); } - } + }, /** - * onSelect handler in fabric canvas - * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event - * @private + * Delete textures, reference to elements and eventually JSDOM cleanup */ + dispose: function() { + this.removeTexture(this.cacheKey); + this.removeTexture(this.cacheKey + '_filtered'); + this._cacheContext = undefined; + ['_originalElement', '_element', '_filteredEl', '_cacheCanvas'].forEach((function(element) { + fabric.util.cleanUpJsdomNode(this[element]); + this[element] = undefined; + }).bind(this)); + }, - }, { - key: '_onFabricSelect', - value: function _onFabricSelect(fEvent) { - this.isPrevEditing = true; + /** + * Get the crossOrigin value (of the corresponding image element) + */ + getCrossOrigin: function() { + return this._originalElement && (this._originalElement.crossOrigin || null); + }, - this.setSelectedInfo(fEvent.target, true); - } + /** + * Returns original size of an image + * @return {Object} Object with "width" and "height" properties + */ + getOriginalSize: function() { + var element = this.getElement(); + return { + width: element.naturalWidth || element.width, + height: element.naturalHeight || element.height + }; + }, /** - * Fabric 'mousedown' event handler - * @param {fabric.Event} fEvent - Current mousedown event on selected object * @private + * @param {CanvasRenderingContext2D} ctx Context to render on */ - - }, { - key: '_onFabricMouseDown', - value: function _onFabricMouseDown(fEvent) { - var obj = fEvent.target; - - if (obj && !obj.isType('text')) { + _stroke: function(ctx) { + if (!this.stroke || this.strokeWidth === 0) { return; } + var w = this.width / 2, h = this.height / 2; + ctx.beginPath(); + ctx.moveTo(-w, -h); + ctx.lineTo(w, -h); + ctx.lineTo(w, h); + ctx.lineTo(-w, h); + ctx.lineTo(-w, -h); + ctx.closePath(); + }, - if (this.isPrevEditing) { - this.isPrevEditing = false; + /** + * Returns object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} Object representation of an instance + */ + toObject: function(propertiesToInclude) { + var filters = []; - return; + this.filters.forEach(function(filterObj) { + if (filterObj) { + filters.push(filterObj.toObject()); + } + }); + var object = extend( + this.callSuper( + 'toObject', + ['cropX', 'cropY'].concat(propertiesToInclude) + ), { + src: this.getSrc(), + crossOrigin: this.getCrossOrigin(), + filters: filters, + }); + if (this.resizeFilter) { + object.resizeFilter = this.resizeFilter.toObject(); } - - this._fireAddText(fEvent); - } + return object; + }, /** - * Fire 'addText' event if object is not selected. - * @param {fabric.Event} fEvent - Current mousedown event on selected object - * @private + * Returns true if an image has crop applied, inspecting values of cropX,cropY,width,height. + * @return {Boolean} */ + hasCrop: function() { + return this.cropX || this.cropY || this.width < this._element.width || this.height < this._element.height; + }, - }, { - key: '_fireAddText', - value: function _fireAddText(fEvent) { - var obj = fEvent.target; - var e = fEvent.e || {}; - var originPointer = this.getCanvas().getPointer(e); - - if (!obj) { - this.fire(_consts.eventNames.ADD_TEXT, { - originPosition: { - x: originPointer.x, - y: originPointer.y - }, - clientPosition: { - x: e.clientX || 0, - y: e.clientY || 0 - } - }); + /* _TO_SVG_START_ */ + /** + * Returns svg representation of an instance + * @return {Array} an array of strings with the specific svg representation + * of the instance + */ + _toSVG: function() { + var svgString = [], imageMarkup = [], strokeSvg, element = this._element, + x = -this.width / 2, y = -this.height / 2, clipPath = '', imageRendering = ''; + if (!element) { + return []; } - } + if (this.hasCrop()) { + var clipPathId = fabric.Object.__uid++; + svgString.push( + '\n', + '\t\n', + '\n' + ); + clipPath = ' clip-path="url(#imageCrop_' + clipPathId + ')" '; + } + if (!this.imageSmoothing) { + imageRendering = '" image-rendering="optimizeSpeed'; + } + imageMarkup.push('\t\n'); + + if (this.stroke || this.strokeDashArray) { + var origFill = this.fill; + this.fill = null; + strokeSvg = [ + '\t\n' + ]; + this.fill = origFill; + } + if (this.paintFirst !== 'fill') { + svgString = svgString.concat(strokeSvg, imageMarkup); + } + else { + svgString = svgString.concat(imageMarkup, strokeSvg); + } + return svgString; + }, + /* _TO_SVG_END_ */ /** - * Fabric mouseup event handler - * @param {fabric.Event} fEvent - Current mousedown event on selected object - * @private + * Returns source of an image + * @param {Boolean} filtered indicates if the src is needed for svg + * @return {String} Source of an image */ + getSrc: function(filtered) { + var element = filtered ? this._element : this._originalElement; + if (element) { + if (element.toDataURL) { + return element.toDataURL(); + } - }, { - key: '_onFabricMouseUp', - value: function _onFabricMouseUp(fEvent) { - var target = fEvent.target; - - var newClickTime = new Date().getTime(); - - if (this._isDoubleClick(newClickTime) && !target.isEditing) { - target.enterEditing(); + if (this.srcFromAttribute) { + return element.getAttribute('src'); + } + else { + return element.src; + } } - - if (target.isEditing) { - this.fire(_consts.eventNames.TEXT_EDITING); // fire editing text event + else { + return this.src || ''; } + }, - this._lastClickTime = newClickTime; - } + /** + * Sets source of an image + * @param {String} src Source string (URL) + * @param {Function} [callback] Callback is invoked when image has been loaded (and all filters have been applied) + * @param {Object} [options] Options object + * @param {String} [options.crossOrigin] crossOrigin value (one of "", "anonymous", "use-credentials") + * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes + * @return {fabric.Image} thisArg + * @chainable + */ + setSrc: function(src, callback, options) { + fabric.util.loadImage(src, function(img, isError) { + this.setElement(img, options); + this._setWidthHeight(); + callback && callback(this, isError); + }, this, options && options.crossOrigin); + return this; + }, /** - * Get state of firing double click event - * @param {Date} newClickTime - Current clicked time - * @returns {boolean} Whether double clicked or not - * @private + * Returns string representation of an instance + * @return {String} String representation of an instance */ + toString: function() { + return '#'; + }, - }, { - key: '_isDoubleClick', - value: function _isDoubleClick(newClickTime) { - return newClickTime - this._lastClickTime < DBCLICK_TIME; - } - }]); - - return Text; -}(_component2.default); - -exports.default = Text; - -/***/ }), - -/***/ "./src/js/component/zoom.js": -/*!**********************************!*\ - !*** ./src/js/component/zoom.js ***! - \**********************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - - -Object.defineProperty(exports, "__esModule", { - value: true -}); - -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); - -var _fabric = __webpack_require__(/*! fabric */ "fabric"); - -var _fabric2 = _interopRequireDefault(_fabric); - -var _component = __webpack_require__(/*! @/interface/component */ "./src/js/interface/component.js"); - -var _component2 = _interopRequireDefault(_component); - -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); - -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } - -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** - * @author NHN. FE Development Team - * @fileoverview Image zoom module (start zoom, end zoom) - */ - - -var MOUSE_MOVE_THRESHOLD = 10; -var DEFAULT_SCROLL_OPTION = { - left: 0, - top: 0, - width: 0, - height: 0, - stroke: '#000000', - strokeWidth: 0, - fill: '#000000', - opacity: 0.4, - evented: false, - selectable: false, - hoverCursor: 'auto' -}; -var DEFAULT_VERTICAL_SCROLL_RATIO = { - SIZE: 0.0045, - MARGIN: 0.003, - BORDER_RADIUS: 0.003 -}; -var DEFAULT_HORIZONTAL_SCROLL_RATIO = { - SIZE: 0.0066, - MARGIN: 0.0044, - BORDER_RADIUS: 0.003 -}; -var DEFAULT_ZOOM_LEVEL = 1.0; -var ZOOM_CHANGED = _consts.eventNames.ZOOM_CHANGED, - ADD_TEXT = _consts.eventNames.ADD_TEXT, - TEXT_EDITING = _consts.eventNames.TEXT_EDITING, - OBJECT_MODIFIED = _consts.eventNames.OBJECT_MODIFIED, - KEY_DOWN = _consts.eventNames.KEY_DOWN, - KEY_UP = _consts.eventNames.KEY_UP, - HAND_STARTED = _consts.eventNames.HAND_STARTED, - HAND_STOPPED = _consts.eventNames.HAND_STOPPED; - -/** - * Zoom components - * @param {Graphics} graphics - Graphics instance - * @extends {Component} - * @class Zoom - * @ignore - */ - -var Zoom = function (_Component) { - _inherits(Zoom, _Component); + applyResizeFilters: function() { + var filter = this.resizeFilter, + minimumScale = this.minimumScaleTrigger, + objectScale = this.getTotalObjectScaling(), + scaleX = objectScale.scaleX, + scaleY = objectScale.scaleY, + elementToFilter = this._filteredEl || this._originalElement; + if (this.group) { + this.set('dirty', true); + } + if (!filter || (scaleX > minimumScale && scaleY > minimumScale)) { + this._element = elementToFilter; + this._filterScalingX = 1; + this._filterScalingY = 1; + this._lastScaleX = scaleX; + this._lastScaleY = scaleY; + return; + } + if (!fabric.filterBackend) { + fabric.filterBackend = fabric.initFilterBackend(); + } + var canvasEl = fabric.util.createCanvasElement(), + cacheKey = this._filteredEl ? (this.cacheKey + '_filtered') : this.cacheKey, + sourceWidth = elementToFilter.width, sourceHeight = elementToFilter.height; + canvasEl.width = sourceWidth; + canvasEl.height = sourceHeight; + this._element = canvasEl; + this._lastScaleX = filter.scaleX = scaleX; + this._lastScaleY = filter.scaleY = scaleY; + fabric.filterBackend.applyFilters( + [filter], elementToFilter, sourceWidth, sourceHeight, this._element, cacheKey); + this._filterScalingX = canvasEl.width / this._originalElement.width; + this._filterScalingY = canvasEl.height / this._originalElement.height; + }, - function Zoom(graphics) { - _classCallCheck(this, Zoom); + /** + * Applies filters assigned to this image (from "filters" array) or from filter param + * @method applyFilters + * @param {Array} filters to be applied + * @param {Boolean} forResizing specify if the filter operation is a resize operation + * @return {thisArg} return the fabric.Image object + * @chainable + */ + applyFilters: function(filters) { + + filters = filters || this.filters || []; + filters = filters.filter(function(filter) { return filter && !filter.isNeutralState(); }); + this.set('dirty', true); + + // needs to clear out or WEBGL will not resize correctly + this.removeTexture(this.cacheKey + '_filtered'); + + if (filters.length === 0) { + this._element = this._originalElement; + this._filteredEl = null; + this._filterScalingX = 1; + this._filterScalingY = 1; + return this; + } + + var imgElement = this._originalElement, + sourceWidth = imgElement.naturalWidth || imgElement.width, + sourceHeight = imgElement.naturalHeight || imgElement.height; + + if (this._element === this._originalElement) { + // if the element is the same we need to create a new element + var canvasEl = fabric.util.createCanvasElement(); + canvasEl.width = sourceWidth; + canvasEl.height = sourceHeight; + this._element = canvasEl; + this._filteredEl = canvasEl; + } + else { + // clear the existing element to get new filter data + // also dereference the eventual resized _element + this._element = this._filteredEl; + this._filteredEl.getContext('2d').clearRect(0, 0, sourceWidth, sourceHeight); + // we also need to resize again at next renderAll, so remove saved _lastScaleX/Y + this._lastScaleX = 1; + this._lastScaleY = 1; + } + if (!fabric.filterBackend) { + fabric.filterBackend = fabric.initFilterBackend(); + } + fabric.filterBackend.applyFilters( + filters, this._originalElement, sourceWidth, sourceHeight, this._element, this.cacheKey); + if (this._originalElement.width !== this._element.width || + this._originalElement.height !== this._element.height) { + this._filterScalingX = this._element.width / this._originalElement.width; + this._filterScalingY = this._element.height / this._originalElement.height; + } + return this; + }, /** - * zoomArea - * @type {?fabric.Rect} * @private + * @param {CanvasRenderingContext2D} ctx Context to render on */ - var _this = _possibleConstructorReturn(this, (Zoom.__proto__ || Object.getPrototypeOf(Zoom)).call(this, _consts.componentNames.ZOOM, graphics)); - - _this.zoomArea = null; + _render: function(ctx) { + fabric.util.setImageSmoothing(ctx, this.imageSmoothing); + if (this.isMoving !== true && this.resizeFilter && this._needsResize()) { + this.applyResizeFilters(); + } + this._stroke(ctx); + this._renderPaintInOrder(ctx); + }, /** - * Start point of zoom area - * @type {?{x: number, y: number}} + * Paint the cached copy of the object on the target context. + * it will set the imageSmoothing for the draw operation + * @param {CanvasRenderingContext2D} ctx Context to render on */ - _this._startPoint = null; + drawCacheOnCanvas: function(ctx) { + fabric.util.setImageSmoothing(ctx, this.imageSmoothing); + fabric.Object.prototype.drawCacheOnCanvas.call(this, ctx); + }, /** - * Center point of every zoom - * @type {Array.<{prevZoomLevel: number, zoomLevel: number, x: number, y: number}>} + * Decide if the object should cache or not. Create its own cache level + * needsItsOwnCache should be used when the object drawing method requires + * a cache step. None of the fabric classes requires it. + * Generally you do not cache objects in groups because the group outside is cached. + * This is the special image version where we would like to avoid caching where possible. + * Essentially images do not benefit from caching. They may require caching, and in that + * case we do it. Also caching an image usually ends in a loss of details. + * A full performance audit should be done. + * @return {Boolean} */ - _this._centerPoints = []; + shouldCache: function() { + return this.needsItsOwnCache(); + }, + + _renderFill: function(ctx) { + var elementToDraw = this._element; + if (!elementToDraw) { + return; + } + var scaleX = this._filterScalingX, scaleY = this._filterScalingY, + w = this.width, h = this.height, min = Math.min, max = Math.max, + // crop values cannot be lesser than 0. + cropX = max(this.cropX, 0), cropY = max(this.cropY, 0), + elWidth = elementToDraw.naturalWidth || elementToDraw.width, + elHeight = elementToDraw.naturalHeight || elementToDraw.height, + sX = cropX * scaleX, + sY = cropY * scaleY, + // the width height cannot exceed element width/height, starting from the crop offset. + sW = min(w * scaleX, elWidth - sX), + sH = min(h * scaleY, elHeight - sY), + x = -w / 2, y = -h / 2, + maxDestW = min(w, elWidth / scaleX - cropX), + maxDestH = min(h, elHeight / scaleY - cropY); + + elementToDraw && ctx.drawImage(elementToDraw, sX, sY, sW, sH, x, y, maxDestW, maxDestH); + }, /** - * Zoom level (default: 100%(1.0), max: 400%(4.0)) - * @type {number} + * needed to check if image needs resize + * @private */ - _this.zoomLevel = DEFAULT_ZOOM_LEVEL; + _needsResize: function() { + var scale = this.getTotalObjectScaling(); + return (scale.scaleX !== this._lastScaleX || scale.scaleY !== this._lastScaleY); + }, /** - * Zoom mode ('normal', 'zoom', 'hand') - * @type {string} + * @private */ - _this.zoomMode = _consts.zoomModes.DEFAULT; + _resetWidthHeight: function() { + this.set(this.getOriginalSize()); + }, /** - * Listeners - * @type {Object.} + * The Image class's initialization method. This method is automatically + * called by the constructor. * @private + * @param {HTMLImageElement|String} element The element representing the image + * @param {Object} [options] Options object */ - _this._listeners = { - startZoom: _this._onMouseDownWithZoomMode.bind(_this), - moveZoom: _this._onMouseMoveWithZoomMode.bind(_this), - stopZoom: _this._onMouseUpWithZoomMode.bind(_this), - startHand: _this._onMouseDownWithHandMode.bind(_this), - moveHand: _this._onMouseMoveWithHandMode.bind(_this), - stopHand: _this._onMouseUpWithHandMode.bind(_this), - zoomChanged: _this._changeScrollState.bind(_this), - keydown: _this._startHandModeWithSpaceBar.bind(_this), - keyup: _this._endHandModeWithSpaceBar.bind(_this) - }; - - var canvas = _this.getCanvas(); + _initElement: function(element, options) { + this.setElement(fabric.util.getById(element), options); + fabric.util.addClass(this.getElement(), fabric.Image.CSS_CANVAS); + }, /** - * Width:Height ratio (ex. width=1.5, height=1 -> aspectRatio=1.5) * @private + * @param {Object} [options] Options object */ - _this.aspectRatio = canvas.width / canvas.height; + _initConfig: function(options) { + options || (options = { }); + this.setOptions(options); + this._setWidthHeight(options); + }, /** - * vertical scroll bar - * @type {fabric.Rect} * @private + * @param {Array} filters to be initialized + * @param {Function} callback Callback to invoke when all fabric.Image.filters instances are created */ - _this._verticalScroll = new _fabric2.default.Rect(DEFAULT_SCROLL_OPTION); + _initFilters: function(filters, callback) { + if (filters && filters.length) { + fabric.util.enlivenObjects(filters, function(enlivenedObjects) { + callback && callback(enlivenedObjects); + }, 'fabric.Image.filters'); + } + else { + callback && callback(); + } + }, /** - * horizontal scroll bar - * @type {fabric.Rect} * @private + * Set the width and the height of the image object, using the element or the + * options. + * @param {Object} [options] Object with width/height properties */ - _this._horizontalScroll = new _fabric2.default.Rect(DEFAULT_SCROLL_OPTION); + _setWidthHeight: function(options) { + options || (options = { }); + var el = this.getElement(); + this.width = options.width || el.naturalWidth || el.width || 0; + this.height = options.height || el.naturalHeight || el.height || 0; + }, - canvas.on(ZOOM_CHANGED, _this._listeners.zoomChanged); + /** + * Calculate offset for center and scale factor for the image in order to respect + * the preserveAspectRatio attribute + * @private + * @return {Object} + */ + parsePreserveAspectRatioAttribute: function() { + var pAR = fabric.util.parsePreserveAspectRatioAttribute(this.preserveAspectRatio || ''), + rWidth = this._element.width, rHeight = this._element.height, + scaleX = 1, scaleY = 1, offsetLeft = 0, offsetTop = 0, cropX = 0, cropY = 0, + offset, pWidth = this.width, pHeight = this.height, parsedAttributes = { width: pWidth, height: pHeight }; + if (pAR && (pAR.alignX !== 'none' || pAR.alignY !== 'none')) { + if (pAR.meetOrSlice === 'meet') { + scaleX = scaleY = fabric.util.findScaleToFit(this._element, parsedAttributes); + offset = (pWidth - rWidth * scaleX) / 2; + if (pAR.alignX === 'Min') { + offsetLeft = -offset; + } + if (pAR.alignX === 'Max') { + offsetLeft = offset; + } + offset = (pHeight - rHeight * scaleY) / 2; + if (pAR.alignY === 'Min') { + offsetTop = -offset; + } + if (pAR.alignY === 'Max') { + offsetTop = offset; + } + } + if (pAR.meetOrSlice === 'slice') { + scaleX = scaleY = fabric.util.findScaleToCover(this._element, parsedAttributes); + offset = rWidth - pWidth / scaleX; + if (pAR.alignX === 'Mid') { + cropX = offset / 2; + } + if (pAR.alignX === 'Max') { + cropX = offset; + } + offset = rHeight - pHeight / scaleY; + if (pAR.alignY === 'Mid') { + cropY = offset / 2; + } + if (pAR.alignY === 'Max') { + cropY = offset; + } + rWidth = pWidth / scaleX; + rHeight = pHeight / scaleY; + } + } + else { + scaleX = pWidth / rWidth; + scaleY = pHeight / rHeight; + } + return { + width: rWidth, + height: rHeight, + scaleX: scaleX, + scaleY: scaleY, + offsetLeft: offsetLeft, + offsetTop: offsetTop, + cropX: cropX, + cropY: cropY + }; + } + }); - _this.graphics.on(ADD_TEXT, _this._startTextEditingHandler.bind(_this)); - _this.graphics.on(TEXT_EDITING, _this._startTextEditingHandler.bind(_this)); - _this.graphics.on(OBJECT_MODIFIED, _this._stopTextEditingHandler.bind(_this)); - return _this; - } + /** + * Default CSS class name for canvas + * @static + * @type String + * @default + */ + fabric.Image.CSS_CANVAS = 'canvas-img'; /** - * Attach zoom keyboard events + * Alias for getSrc + * @static */ + fabric.Image.prototype.getSvgSrc = fabric.Image.prototype.getSrc; + /** + * Creates an instance of fabric.Image from its object representation + * @static + * @param {Object} object Object to create an instance from + * @param {Function} callback Callback to invoke when an image instance is created + */ + fabric.Image.fromObject = function(_object, callback) { + var object = fabric.util.object.clone(_object); + fabric.util.loadImage(object.src, function(img, isError) { + if (isError) { + callback && callback(null, true); + return; + } + fabric.Image.prototype._initFilters.call(object, object.filters, function(filters) { + object.filters = filters || []; + fabric.Image.prototype._initFilters.call(object, [object.resizeFilter], function(resizeFilters) { + object.resizeFilter = resizeFilters[0]; + fabric.util.enlivenObjects([object.clipPath], function(enlivedProps) { + object.clipPath = enlivedProps[0]; + var image = new fabric.Image(img, object); + callback(image, false); + }); + }); + }); + }, null, object.crossOrigin); + }; - _createClass(Zoom, [{ - key: 'attachKeyboardZoomEvents', - value: function attachKeyboardZoomEvents() { - _fabric2.default.util.addListener(document, KEY_DOWN, this._listeners.keydown); - _fabric2.default.util.addListener(document, KEY_UP, this._listeners.keyup); - } + /** + * Creates an instance of fabric.Image from an URL string + * @static + * @param {String} url URL to create an image from + * @param {Function} [callback] Callback to invoke when image is created (newly created image is passed as a first argument). Second argument is a boolean indicating if an error occurred or not. + * @param {Object} [imgOptions] Options object + */ + fabric.Image.fromURL = function(url, callback, imgOptions) { + fabric.util.loadImage(url, function(img, isError) { + callback && callback(new fabric.Image(img, imgOptions), isError); + }, null, imgOptions && imgOptions.crossOrigin); + }; - /** - * Detach zoom keyboard events - */ + /* _FROM_SVG_START_ */ + /** + * List of attribute names to account for when parsing SVG element (used by {@link fabric.Image.fromElement}) + * @static + * @see {@link http://www.w3.org/TR/SVG/struct.html#ImageElement} + */ + fabric.Image.ATTRIBUTE_NAMES = + fabric.SHARED_ATTRIBUTES.concat( + 'x y width height preserveAspectRatio xlink:href crossOrigin image-rendering'.split(' ') + ); - }, { - key: 'detachKeyboardZoomEvents', - value: function detachKeyboardZoomEvents() { - _fabric2.default.util.removeListener(document, KEY_DOWN, this._listeners.keydown); - _fabric2.default.util.removeListener(document, KEY_UP, this._listeners.keyup); - } + /** + * Returns {@link fabric.Image} instance from an SVG element + * @static + * @param {SVGElement} element Element to parse + * @param {Object} [options] Options object + * @param {Function} callback Callback to execute when fabric.Image object is created + * @return {fabric.Image} Instance of fabric.Image + */ + fabric.Image.fromElement = function(element, callback, options) { + var parsedAttributes = fabric.parseAttributes(element, fabric.Image.ATTRIBUTE_NAMES); + fabric.Image.fromURL(parsedAttributes['xlink:href'], callback, + extend((options ? fabric.util.object.clone(options) : { }), parsedAttributes)); + }; + /* _FROM_SVG_END_ */ - /** - * Handler when you started editing text - * @private - */ +})( true ? exports : 0); - }, { - key: '_startTextEditingHandler', - value: function _startTextEditingHandler() { - this.isTextEditing = true; - } - /** - * Handler when you stopped editing text - * @private - */ +fabric.util.object.extend(fabric.Object.prototype, /** @lends fabric.Object.prototype */ { - }, { - key: '_stopTextEditingHandler', - value: function _stopTextEditingHandler() { - this.isTextEditing = false; + /** + * @private + * @return {Number} angle value + */ + _getAngleValueForStraighten: function() { + var angle = this.angle % 360; + if (angle > 0) { + return Math.round((angle - 1) / 90) * 90; } + return Math.round(angle / 90) * 90; + }, - /** - * Handler who turns on hand mode when the space bar is down - * @param {KeyboardEvent} e - Event object - * @private - */ + /** + * Straightens an object (rotating it from current angle to one of 0, 90, 180, 270, etc. depending on which is closer) + * @return {fabric.Object} thisArg + * @chainable + */ + straighten: function() { + this.rotate(this._getAngleValueForStraighten()); + return this; + }, - }, { - key: '_startHandModeWithSpaceBar', - value: function _startHandModeWithSpaceBar(e) { - if (this.withSpace || this.isTextEditing) { - return; - } + /** + * Same as {@link fabric.Object.prototype.straighten} but with animation + * @param {Object} callbacks Object with callback functions + * @param {Function} [callbacks.onComplete] Invoked on completion + * @param {Function} [callbacks.onChange] Invoked on every step of animation + * @return {fabric.Object} thisArg + * @chainable + */ + fxStraighten: function(callbacks) { + callbacks = callbacks || { }; + + var empty = function() { }, + onComplete = callbacks.onComplete || empty, + onChange = callbacks.onChange || empty, + _this = this; + + fabric.util.animate({ + startValue: this.get('angle'), + endValue: this._getAngleValueForStraighten(), + duration: this.FX_DURATION, + onChange: function(value) { + _this.rotate(value); + onChange(); + }, + onComplete: function() { + _this.setCoords(); + onComplete(); + }, + }); - if (e.keyCode === _consts.keyCodes.SPACE) { - this.withSpace = true; - this.startHandMode(); + return this; + } +}); + +fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.StaticCanvas.prototype */ { + + /** + * Straightens object, then rerenders canvas + * @param {fabric.Object} object Object to straighten + * @return {fabric.Canvas} thisArg + * @chainable + */ + straightenObject: function (object) { + object.straighten(); + this.requestRenderAll(); + return this; + }, + + /** + * Same as {@link fabric.Canvas.prototype.straightenObject}, but animated + * @param {fabric.Object} object Object to straighten + * @return {fabric.Canvas} thisArg + * @chainable + */ + fxStraightenObject: function (object) { + object.fxStraighten({ + onChange: this.requestRenderAllBound + }); + return this; + } +}); + + +(function() { + + 'use strict'; + + /** + * Tests if webgl supports certain precision + * @param {WebGL} Canvas WebGL context to test on + * @param {String} Precision to test can be any of following: 'lowp', 'mediump', 'highp' + * @returns {Boolean} Whether the user's browser WebGL supports given precision. + */ + function testPrecision(gl, precision){ + var fragmentSource = 'precision ' + precision + ' float;\nvoid main(){}'; + var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); + gl.shaderSource(fragmentShader, fragmentSource); + gl.compileShader(fragmentShader); + if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { + return false; + } + return true; + } + + /** + * Indicate whether this filtering backend is supported by the user's browser. + * @param {Number} tileSize check if the tileSize is supported + * @returns {Boolean} Whether the user's browser supports WebGL. + */ + fabric.isWebglSupported = function(tileSize) { + if (fabric.isLikelyNode) { + return false; + } + tileSize = tileSize || fabric.WebglFilterBackend.prototype.tileSize; + var canvas = document.createElement('canvas'); + var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); + var isSupported = false; + // eslint-disable-next-line + if (gl) { + fabric.maxTextureSize = gl.getParameter(gl.MAX_TEXTURE_SIZE); + isSupported = fabric.maxTextureSize >= tileSize; + var precisions = ['highp', 'mediump', 'lowp']; + for (var i = 0; i < 3; i++){ + if (testPrecision(gl, precisions[i])){ + fabric.webGlPrecision = precisions[i]; + break; + }; } } + this.isSupported = isSupported; + return isSupported; + }; - /** - * Handler who turns off hand mode when space bar is up - * @param {KeyboardEvent} e - Event object - * @private - */ + fabric.WebglFilterBackend = WebglFilterBackend; - }, { - key: '_endHandModeWithSpaceBar', - value: function _endHandModeWithSpaceBar(e) { - if (e.keyCode === _consts.keyCodes.SPACE) { - this.withSpace = false; - this.endHandMode(); - } + /** + * WebGL filter backend. + */ + function WebglFilterBackend(options) { + if (options && options.tileSize) { + this.tileSize = options.tileSize; } + this.setupGLContext(this.tileSize, this.tileSize); + this.captureGPUInfo(); + }; + + WebglFilterBackend.prototype = /** @lends fabric.WebglFilterBackend.prototype */ { + + tileSize: 2048, /** - * Start zoom-in mode + * Experimental. This object is a sort of repository of help layers used to avoid + * of recreating them during frequent filtering. If you are previewing a filter with + * a slider you probably do not want to create help layers every filter step. + * in this object there will be appended some canvases, created once, resized sometimes + * cleared never. Clearing is left to the developer. + **/ + resources: { + + }, + + /** + * Setup a WebGL context suitable for filtering, and bind any needed event handlers. */ + setupGLContext: function(width, height) { + this.dispose(); + this.createWebGLCanvas(width, height); + // eslint-disable-next-line + this.aPosition = new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]); + this.chooseFastestCopyGLTo2DMethod(width, height); + }, - }, { - key: 'startZoomInMode', - value: function startZoomInMode() { - if (this.zoomArea) { + /** + * Pick a method to copy data from GL context to 2d canvas. In some browsers using + * putImageData is faster than drawImage for that specific operation. + */ + chooseFastestCopyGLTo2DMethod: function(width, height) { + var canMeasurePerf = typeof window.performance !== 'undefined', canUseImageData; + try { + new ImageData(1, 1); + canUseImageData = true; + } + catch (e) { + canUseImageData = false; + } + // eslint-disable-next-line no-undef + var canUseArrayBuffer = typeof ArrayBuffer !== 'undefined'; + // eslint-disable-next-line no-undef + var canUseUint8Clamped = typeof Uint8ClampedArray !== 'undefined'; + + if (!(canMeasurePerf && canUseImageData && canUseArrayBuffer && canUseUint8Clamped)) { return; } - this.endHandMode(); - this.zoomMode = _consts.zoomModes.ZOOM; - var canvas = this.getCanvas(); + var targetCanvas = fabric.util.createCanvasElement(); + // eslint-disable-next-line no-undef + var imageBuffer = new ArrayBuffer(width * height * 4); + if (fabric.forceGLPutImageData) { + this.imageBuffer = imageBuffer; + this.copyGLTo2D = copyGLTo2DPutImageData; + return; + } + var testContext = { + imageBuffer: imageBuffer, + destinationWidth: width, + destinationHeight: height, + targetCanvas: targetCanvas + }; + var startTime, drawImageTime, putImageDataTime; + targetCanvas.width = width; + targetCanvas.height = height; - this._changeObjectsEventedState(false); + startTime = window.performance.now(); + copyGLTo2DDrawImage.call(testContext, this.gl, testContext); + drawImageTime = window.performance.now() - startTime; - this.zoomArea = new _fabric2.default.Rect({ - left: 0, - top: 0, - width: 0.5, - height: 0.5, - stroke: 'black', - strokeWidth: 1, - fill: 'transparent', - hoverCursor: 'zoom-in' - }); + startTime = window.performance.now(); + copyGLTo2DPutImageData.call(testContext, this.gl, testContext); + putImageDataTime = window.performance.now() - startTime; - canvas.discardActiveObject(); - canvas.add(this.zoomArea); - canvas.on('mouse:down', this._listeners.startZoom); - canvas.selection = false; - canvas.defaultCursor = 'zoom-in'; - } + if (drawImageTime > putImageDataTime) { + this.imageBuffer = imageBuffer; + this.copyGLTo2D = copyGLTo2DPutImageData; + } + else { + this.copyGLTo2D = copyGLTo2DDrawImage; + } + }, /** - * End zoom-in mode + * Create a canvas element and associated WebGL context and attaches them as + * class properties to the GLFilterBackend class. */ + createWebGLCanvas: function(width, height) { + var canvas = fabric.util.createCanvasElement(); + canvas.width = width; + canvas.height = height; + var glOptions = { + alpha: true, + premultipliedAlpha: false, + depth: false, + stencil: false, + antialias: false + }, + gl = canvas.getContext('webgl', glOptions); + if (!gl) { + gl = canvas.getContext('experimental-webgl', glOptions); + } + if (!gl) { + return; + } + gl.clearColor(0, 0, 0, 0); + // this canvas can fire webglcontextlost and webglcontextrestored + this.canvas = canvas; + this.gl = gl; + }, - }, { - key: 'endZoomInMode', - value: function endZoomInMode() { - this.zoomMode = _consts.zoomModes.DEFAULT; - - var canvas = this.getCanvas(); - var _listeners = this._listeners, - startZoom = _listeners.startZoom, - moveZoom = _listeners.moveZoom, - stopZoom = _listeners.stopZoom; - + /** + * Attempts to apply the requested filters to the source provided, drawing the filtered output + * to the provided target canvas. + * + * @param {Array} filters The filters to apply. + * @param {HTMLImageElement|HTMLCanvasElement} source The source to be filtered. + * @param {Number} width The width of the source input. + * @param {Number} height The height of the source input. + * @param {HTMLCanvasElement} targetCanvas The destination for filtered output to be drawn. + * @param {String|undefined} cacheKey A key used to cache resources related to the source. If + * omitted, caching will be skipped. + */ + applyFilters: function(filters, source, width, height, targetCanvas, cacheKey) { + var gl = this.gl; + var cachedTexture; + if (cacheKey) { + cachedTexture = this.getCachedTexture(cacheKey, source); + } + var pipelineState = { + originalWidth: source.width || source.originalWidth, + originalHeight: source.height || source.originalHeight, + sourceWidth: width, + sourceHeight: height, + destinationWidth: width, + destinationHeight: height, + context: gl, + sourceTexture: this.createTexture(gl, width, height, !cachedTexture && source), + targetTexture: this.createTexture(gl, width, height), + originalTexture: cachedTexture || + this.createTexture(gl, width, height, !cachedTexture && source), + passes: filters.length, + webgl: true, + aPosition: this.aPosition, + programCache: this.programCache, + pass: 0, + filterBackend: this, + targetCanvas: targetCanvas + }; + var tempFbo = gl.createFramebuffer(); + gl.bindFramebuffer(gl.FRAMEBUFFER, tempFbo); + filters.forEach(function(filter) { filter && filter.applyTo(pipelineState); }); + resizeCanvasIfNeeded(pipelineState); + this.copyGLTo2D(gl, pipelineState); + gl.bindTexture(gl.TEXTURE_2D, null); + gl.deleteTexture(pipelineState.sourceTexture); + gl.deleteTexture(pipelineState.targetTexture); + gl.deleteFramebuffer(tempFbo); + targetCanvas.getContext('2d').setTransform(1, 0, 0, 1, 0, 0); + return pipelineState; + }, - canvas.selection = true; - canvas.defaultCursor = 'auto'; - canvas.off({ - 'mouse:down': startZoom, - 'mouse:move': moveZoom, - 'mouse:up': stopZoom - }); + /** + * Detach event listeners, remove references, and clean up caches. + */ + dispose: function() { + if (this.canvas) { + this.canvas = null; + this.gl = null; + } + this.clearWebGLCaches(); + }, - this._changeObjectsEventedState(true); + /** + * Wipe out WebGL-related caches. + */ + clearWebGLCaches: function() { + this.programCache = {}; + this.textureCache = {}; + }, - canvas.remove(this.zoomArea); - this.zoomArea = null; - } + /** + * Create a WebGL texture object. + * + * Accepts specific dimensions to initialize the texture to or a source image. + * + * @param {WebGLRenderingContext} gl The GL context to use for creating the texture. + * @param {Number} width The width to initialize the texture at. + * @param {Number} height The height to initialize the texture. + * @param {HTMLImageElement|HTMLCanvasElement} textureImageSource A source for the texture data. + * @returns {WebGLTexture} + */ + createTexture: function(gl, width, height, textureImageSource) { + var texture = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, texture); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + if (textureImageSource) { + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureImageSource); + } + else { + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); + } + return texture; + }, /** - * Start zoom drawing mode + * Can be optionally used to get a texture from the cache array + * + * If an existing texture is not found, a new texture is created and cached. + * + * @param {String} uniqueId A cache key to use to find an existing texture. + * @param {HTMLImageElement|HTMLCanvasElement} textureImageSource A source to use to create the + * texture cache entry if one does not already exist. */ - - }, { - key: 'start', - value: function start() { - this.zoomArea = null; - this._startPoint = null; - this._startHandPoint = null; - } + getCachedTexture: function(uniqueId, textureImageSource) { + if (this.textureCache[uniqueId]) { + return this.textureCache[uniqueId]; + } + else { + var texture = this.createTexture( + this.gl, textureImageSource.width, textureImageSource.height, textureImageSource); + this.textureCache[uniqueId] = texture; + return texture; + } + }, /** - * Stop zoom drawing mode + * Clear out cached resources related to a source image that has been + * filtered previously. + * + * @param {String} cacheKey The cache key provided when the source image was filtered. */ + evictCachesForKey: function(cacheKey) { + if (this.textureCache[cacheKey]) { + this.gl.deleteTexture(this.textureCache[cacheKey]); + delete this.textureCache[cacheKey]; + } + }, - }, { - key: 'end', - value: function end() { - this.endZoomInMode(); - this.endHandMode(); - } + copyGLTo2D: copyGLTo2DDrawImage, /** - * Start hand mode - */ + * Attempt to extract GPU information strings from a WebGL context. + * + * Useful information when debugging or blacklisting specific GPUs. + * + * @returns {Object} A GPU info object with renderer and vendor strings. + */ + captureGPUInfo: function() { + if (this.gpuInfo) { + return this.gpuInfo; + } + var gl = this.gl, gpuInfo = { renderer: '', vendor: '' }; + if (!gl) { + return gpuInfo; + } + var ext = gl.getExtension('WEBGL_debug_renderer_info'); + if (ext) { + var renderer = gl.getParameter(ext.UNMASKED_RENDERER_WEBGL); + var vendor = gl.getParameter(ext.UNMASKED_VENDOR_WEBGL); + if (renderer) { + gpuInfo.renderer = renderer.toLowerCase(); + } + if (vendor) { + gpuInfo.vendor = vendor.toLowerCase(); + } + } + this.gpuInfo = gpuInfo; + return gpuInfo; + }, + }; +})(); - }, { - key: 'startHandMode', - value: function startHandMode() { - this.endZoomInMode(); - this.zoomMode = _consts.zoomModes.HAND; +function resizeCanvasIfNeeded(pipelineState) { + var targetCanvas = pipelineState.targetCanvas, + width = targetCanvas.width, height = targetCanvas.height, + dWidth = pipelineState.destinationWidth, + dHeight = pipelineState.destinationHeight; - var canvas = this.getCanvas(); + if (width !== dWidth || height !== dHeight) { + targetCanvas.width = dWidth; + targetCanvas.height = dHeight; + } +} - this._changeObjectsEventedState(false); +/** + * Copy an input WebGL canvas on to an output 2D canvas. + * + * The WebGL canvas is assumed to be upside down, with the top-left pixel of the + * desired output image appearing in the bottom-left corner of the WebGL canvas. + * + * @param {WebGLRenderingContext} sourceContext The WebGL context to copy from. + * @param {HTMLCanvasElement} targetCanvas The 2D target canvas to copy on to. + * @param {Object} pipelineState The 2D target canvas to copy on to. + */ +function copyGLTo2DDrawImage(gl, pipelineState) { + var glCanvas = gl.canvas, targetCanvas = pipelineState.targetCanvas, + ctx = targetCanvas.getContext('2d'); + ctx.translate(0, targetCanvas.height); // move it down again + ctx.scale(1, -1); // vertical flip + // where is my image on the big glcanvas? + var sourceY = glCanvas.height - targetCanvas.height; + ctx.drawImage(glCanvas, 0, sourceY, targetCanvas.width, targetCanvas.height, 0, 0, + targetCanvas.width, targetCanvas.height); +} - canvas.discardActiveObject(); - canvas.off('mouse:down', this._listeners.startHand); - canvas.on('mouse:down', this._listeners.startHand); - canvas.selection = false; - canvas.defaultCursor = 'grab'; +/** + * Copy an input WebGL canvas on to an output 2D canvas using 2d canvas' putImageData + * API. Measurably faster than using ctx.drawImage in Firefox (version 54 on OSX Sierra). + * + * @param {WebGLRenderingContext} sourceContext The WebGL context to copy from. + * @param {HTMLCanvasElement} targetCanvas The 2D target canvas to copy on to. + * @param {Object} pipelineState The 2D target canvas to copy on to. + */ +function copyGLTo2DPutImageData(gl, pipelineState) { + var targetCanvas = pipelineState.targetCanvas, ctx = targetCanvas.getContext('2d'), + dWidth = pipelineState.destinationWidth, + dHeight = pipelineState.destinationHeight, + numBytes = dWidth * dHeight * 4; + + // eslint-disable-next-line no-undef + var u8 = new Uint8Array(this.imageBuffer, 0, numBytes); + // eslint-disable-next-line no-undef + var u8Clamped = new Uint8ClampedArray(this.imageBuffer, 0, numBytes); + + gl.readPixels(0, 0, dWidth, dHeight, gl.RGBA, gl.UNSIGNED_BYTE, u8); + var imgData = new ImageData(u8Clamped, dWidth, dHeight); + ctx.putImageData(imgData, 0, 0); +} - canvas.fire(HAND_STARTED); - } - /** - * Stop hand mode - */ +(function() { - }, { - key: 'endHandMode', - value: function endHandMode() { - this.zoomMode = _consts.zoomModes.DEFAULT; - var canvas = this.getCanvas(); + 'use strict'; - this._changeObjectsEventedState(true); + var noop = function() {}; - canvas.off('mouse:down', this._listeners.startHand); - canvas.selection = true; - canvas.defaultCursor = 'auto'; + fabric.Canvas2dFilterBackend = Canvas2dFilterBackend; - this._startHandPoint = null; + /** + * Canvas 2D filter backend. + */ + function Canvas2dFilterBackend() {}; - canvas.fire(HAND_STOPPED); - } + Canvas2dFilterBackend.prototype = /** @lends fabric.Canvas2dFilterBackend.prototype */ { + evictCachesForKey: noop, + dispose: noop, + clearWebGLCaches: noop, /** - * onMousedown handler in fabric canvas - * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event - * @private - */ + * Experimental. This object is a sort of repository of help layers used to avoid + * of recreating them during frequent filtering. If you are previewing a filter with + * a slider you probably do not want to create help layers every filter step. + * in this object there will be appended some canvases, created once, resized sometimes + * cleared never. Clearing is left to the developer. + **/ + resources: { - }, { - key: '_onMouseDownWithZoomMode', - value: function _onMouseDownWithZoomMode(_ref) { - var target = _ref.target, - e = _ref.e; + }, - if (target) { - return; + /** + * Apply a set of filters against a source image and draw the filtered output + * to the provided destination canvas. + * + * @param {EnhancedFilter} filters The filter to apply. + * @param {HTMLImageElement|HTMLCanvasElement} sourceElement The source to be filtered. + * @param {Number} sourceWidth The width of the source input. + * @param {Number} sourceHeight The height of the source input. + * @param {HTMLCanvasElement} targetCanvas The destination for filtered output to be drawn. + */ + applyFilters: function(filters, sourceElement, sourceWidth, sourceHeight, targetCanvas) { + var ctx = targetCanvas.getContext('2d'); + ctx.drawImage(sourceElement, 0, 0, sourceWidth, sourceHeight); + var imageData = ctx.getImageData(0, 0, sourceWidth, sourceHeight); + var originalImageData = ctx.getImageData(0, 0, sourceWidth, sourceHeight); + var pipelineState = { + sourceWidth: sourceWidth, + sourceHeight: sourceHeight, + imageData: imageData, + originalEl: sourceElement, + originalImageData: originalImageData, + canvasEl: targetCanvas, + ctx: ctx, + filterBackend: this, + }; + filters.forEach(function(filter) { filter.applyTo(pipelineState); }); + if (pipelineState.imageData.width !== sourceWidth || pipelineState.imageData.height !== sourceHeight) { + targetCanvas.width = pipelineState.imageData.width; + targetCanvas.height = pipelineState.imageData.height; } + ctx.putImageData(pipelineState.imageData, 0, 0); + return pipelineState; + }, - var canvas = this.getCanvas(); + }; +})(); - canvas.selection = false; - this._startPoint = canvas.getPointer(e); - this.zoomArea.set({ width: 0, height: 0 }); +/** + * @namespace fabric.Image.filters + * @memberOf fabric.Image + * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#image_filters} + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + */ +fabric.Image = fabric.Image || { }; +fabric.Image.filters = fabric.Image.filters || { }; - var _listeners2 = this._listeners, - moveZoom = _listeners2.moveZoom, - stopZoom = _listeners2.stopZoom; +/** + * Root filter class from which all filter classes inherit from + * @class fabric.Image.filters.BaseFilter + * @memberOf fabric.Image.filters + */ +fabric.Image.filters.BaseFilter = fabric.util.createClass(/** @lends fabric.Image.filters.BaseFilter.prototype */ { - canvas.on({ - 'mouse:move': moveZoom, - 'mouse:up': stopZoom - }); - } + /** + * Filter type + * @param {String} type + * @default + */ + type: 'BaseFilter', - /** - * onMousemove handler in fabric canvas - * @param {{e: MouseEvent}} fEvent - Fabric event - * @private - */ + /** + * Array of attributes to send with buffers. do not modify + * @private + */ - }, { - key: '_onMouseMoveWithZoomMode', - value: function _onMouseMoveWithZoomMode(_ref2) { - var e = _ref2.e; + vertexSource: 'attribute vec2 aPosition;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vTexCoord = aPosition;\n' + + 'gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n' + + '}', - var canvas = this.getCanvas(); - var pointer = canvas.getPointer(e); - var x = pointer.x, - y = pointer.y; - var zoomArea = this.zoomArea, - _startPoint = this._startPoint; + fragmentSource: 'precision highp float;\n' + + 'varying vec2 vTexCoord;\n' + + 'uniform sampler2D uTexture;\n' + + 'void main() {\n' + + 'gl_FragColor = texture2D(uTexture, vTexCoord);\n' + + '}', - var deltaX = Math.abs(x - _startPoint.x); - var deltaY = Math.abs(y - _startPoint.y); + /** + * Constructor + * @param {Object} [options] Options object + */ + initialize: function(options) { + if (options) { + this.setOptions(options); + } + }, - if (deltaX + deltaY > MOUSE_MOVE_THRESHOLD) { - canvas.remove(zoomArea); - zoomArea.set(this._calcRectDimensionFromPoint(x, y)); - canvas.add(zoomArea); + /** + * Sets filter's properties from options + * @param {Object} [options] Options object + */ + setOptions: function(options) { + for (var prop in options) { + this[prop] = options[prop]; + } + }, + + /** + * Compile this filter's shader program. + * + * @param {WebGLRenderingContext} gl The GL canvas context to use for shader compilation. + * @param {String} fragmentSource fragmentShader source for compilation + * @param {String} vertexSource vertexShader source for compilation + */ + createProgram: function(gl, fragmentSource, vertexSource) { + fragmentSource = fragmentSource || this.fragmentSource; + vertexSource = vertexSource || this.vertexSource; + if (fabric.webGlPrecision !== 'highp'){ + fragmentSource = fragmentSource.replace( + /precision highp float/g, + 'precision ' + fabric.webGlPrecision + ' float' + ); + } + var vertexShader = gl.createShader(gl.VERTEX_SHADER); + gl.shaderSource(vertexShader, vertexSource); + gl.compileShader(vertexShader); + if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) { + throw new Error( + // eslint-disable-next-line prefer-template + 'Vertex shader compile error for ' + this.type + ': ' + + gl.getShaderInfoLog(vertexShader) + ); + } + + var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); + gl.shaderSource(fragmentShader, fragmentSource); + gl.compileShader(fragmentShader); + if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) { + throw new Error( + // eslint-disable-next-line prefer-template + 'Fragment shader compile error for ' + this.type + ': ' + + gl.getShaderInfoLog(fragmentShader) + ); + } + + var program = gl.createProgram(); + gl.attachShader(program, vertexShader); + gl.attachShader(program, fragmentShader); + gl.linkProgram(program); + if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { + throw new Error( + // eslint-disable-next-line prefer-template + 'Shader link error for "${this.type}" ' + + gl.getProgramInfoLog(program) + ); + } + + var attributeLocations = this.getAttributeLocations(gl, program); + var uniformLocations = this.getUniformLocations(gl, program) || { }; + uniformLocations.uStepW = gl.getUniformLocation(program, 'uStepW'); + uniformLocations.uStepH = gl.getUniformLocation(program, 'uStepH'); + return { + program: program, + attributeLocations: attributeLocations, + uniformLocations: uniformLocations + }; + }, + + /** + * Return a map of attribute names to WebGLAttributeLocation objects. + * + * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. + * @param {WebGLShaderProgram} program The shader program from which to take attribute locations. + * @returns {Object} A map of attribute names to attribute locations. + */ + getAttributeLocations: function(gl, program) { + return { + aPosition: gl.getAttribLocation(program, 'aPosition'), + }; + }, + + /** + * Return a map of uniform names to WebGLUniformLocation objects. + * + * Intended to be overridden by subclasses. + * + * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. + * @param {WebGLShaderProgram} program The shader program from which to take uniform locations. + * @returns {Object} A map of uniform names to uniform locations. + */ + getUniformLocations: function (/* gl, program */) { + // in case i do not need any special uniform i need to return an empty object + return { }; + }, + + /** + * Send attribute data from this filter to its shader program on the GPU. + * + * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. + * @param {Object} attributeLocations A map of shader attribute names to their locations. + */ + sendAttributeData: function(gl, attributeLocations, aPositionData) { + var attributeLocation = attributeLocations.aPosition; + var buffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, buffer); + gl.enableVertexAttribArray(attributeLocation); + gl.vertexAttribPointer(attributeLocation, 2, gl.FLOAT, false, 0, 0); + gl.bufferData(gl.ARRAY_BUFFER, aPositionData, gl.STATIC_DRAW); + }, + + _setupFrameBuffer: function(options) { + var gl = options.context, width, height; + if (options.passes > 1) { + width = options.destinationWidth; + height = options.destinationHeight; + if (options.sourceWidth !== width || options.sourceHeight !== height) { + gl.deleteTexture(options.targetTexture); + options.targetTexture = options.filterBackend.createTexture(gl, width, height); } + gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, + options.targetTexture, 0); + } + else { + // draw last filter on canvas and not to framebuffer. + gl.bindFramebuffer(gl.FRAMEBUFFER, null); + gl.finish(); } + }, - /** - * Get rect dimension setting from Canvas-Mouse-Position(x, y) - * @param {number} x - Canvas-Mouse-Position x - * @param {number} y - Canvas-Mouse-Position Y - * @returns {{left: number, top: number, width: number, height: number}} - * @private - */ + _swapTextures: function(options) { + options.passes--; + options.pass++; + var temp = options.targetTexture; + options.targetTexture = options.sourceTexture; + options.sourceTexture = temp; + }, - }, { - key: '_calcRectDimensionFromPoint', - value: function _calcRectDimensionFromPoint(x, y) { - var canvas = this.getCanvas(); - var canvasWidth = canvas.getWidth(); - var canvasHeight = canvas.getHeight(); - var _startPoint2 = this._startPoint, - startX = _startPoint2.x, - startY = _startPoint2.y; - var min = Math.min; + /** + * Generic isNeutral implementation for one parameter based filters. + * Used only in image applyFilters to discard filters that will not have an effect + * on the image + * Other filters may need their own version ( ColorMatrix, HueRotation, gamma, ComposedFilter ) + * @param {Object} options + **/ + isNeutralState: function(/* options */) { + var main = this.mainParameter, + _class = fabric.Image.filters[this.type].prototype; + if (main) { + if (Array.isArray(_class[main])) { + for (var i = _class[main].length; i--;) { + if (this[main][i] !== _class[main][i]) { + return false; + } + } + return true; + } + else { + return _class[main] === this[main]; + } + } + else { + return false; + } + }, + /** + * Apply this filter to the input image data provided. + * + * Determines whether to use WebGL or Canvas2D based on the options.webgl flag. + * + * @param {Object} options + * @param {Number} options.passes The number of filters remaining to be executed + * @param {Boolean} options.webgl Whether to use webgl to render the filter. + * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered. + * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn. + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + applyTo: function(options) { + if (options.webgl) { + this._setupFrameBuffer(options); + this.applyToWebGL(options); + this._swapTextures(options); + } + else { + this.applyTo2d(options); + } + }, - var left = min(startX, x); - var top = min(startY, y); - var width = (0, _util.clamp)(x, startX, canvasWidth) - left; // (startX <= x(mouse) <= canvasWidth) - left - var height = (0, _util.clamp)(y, startY, canvasHeight) - top; // (startY <= y(mouse) <= canvasHeight) - top + /** + * Retrieves the cached shader. + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + retrieveShader: function(options) { + if (!options.programCache.hasOwnProperty(this.type)) { + options.programCache[this.type] = this.createProgram(options.context); + } + return options.programCache[this.type]; + }, - return { left: left, top: top, width: width, height: height }; + /** + * Apply this filter using webgl. + * + * @param {Object} options + * @param {Number} options.passes The number of filters remaining to be executed + * @param {Boolean} options.webgl Whether to use webgl to render the filter. + * @param {WebGLTexture} options.originalTexture The texture of the original input image. + * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered. + * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn. + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + applyToWebGL: function(options) { + var gl = options.context; + var shader = this.retrieveShader(options); + if (options.pass === 0 && options.originalTexture) { + gl.bindTexture(gl.TEXTURE_2D, options.originalTexture); + } + else { + gl.bindTexture(gl.TEXTURE_2D, options.sourceTexture); } + gl.useProgram(shader.program); + this.sendAttributeData(gl, shader.attributeLocations, options.aPosition); - /** - * onMouseup handler in fabric canvas - * @private - */ + gl.uniform1f(shader.uniformLocations.uStepW, 1 / options.sourceWidth); + gl.uniform1f(shader.uniformLocations.uStepH, 1 / options.sourceHeight); - }, { - key: '_onMouseUpWithZoomMode', - value: function _onMouseUpWithZoomMode() { - var zoomLevel = this.zoomLevel; - var zoomArea = this.zoomArea; - var _listeners3 = this._listeners, - moveZoom = _listeners3.moveZoom, - stopZoom = _listeners3.stopZoom; + this.sendUniformData(gl, shader.uniformLocations); + gl.viewport(0, 0, options.destinationWidth, options.destinationHeight); + gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); + }, - var canvas = this.getCanvas(); - var center = this._getCenterPoint(); - var x = center.x, - y = center.y; + bindAdditionalTexture: function(gl, texture, textureUnit) { + gl.activeTexture(textureUnit); + gl.bindTexture(gl.TEXTURE_2D, texture); + // reset active texture to 0 as usual + gl.activeTexture(gl.TEXTURE0); + }, + unbindAdditionalTexture: function(gl, textureUnit) { + gl.activeTexture(textureUnit); + gl.bindTexture(gl.TEXTURE_2D, null); + gl.activeTexture(gl.TEXTURE0); + }, - if (!this._isMaxZoomLevel()) { - this._centerPoints.push({ - x: x, - y: y, - prevZoomLevel: zoomLevel, - zoomLevel: zoomLevel + 1 - }); - zoomLevel += 1; - canvas.zoomToPoint({ x: x, y: y }, zoomLevel); + getMainParameter: function() { + return this[this.mainParameter]; + }, - this._fireZoomChanged(canvas, zoomLevel); + setMainParameter: function(value) { + this[this.mainParameter] = value; + }, - this.zoomLevel = zoomLevel; - } + /** + * Send uniform data from this filter to its shader program on the GPU. + * + * Intended to be overridden by subclasses. + * + * @param {WebGLRenderingContext} gl The canvas context used to compile the shader program. + * @param {Object} uniformLocations A map of shader uniform names to their locations. + */ + sendUniformData: function(/* gl, uniformLocations */) { + // Intentionally left blank. Override me in subclasses. + }, - canvas.off({ - 'mouse:move': moveZoom, - 'mouse:up': stopZoom - }); + /** + * If needed by a 2d filter, this functions can create an helper canvas to be used + * remember that options.targetCanvas is available for use till end of chain. + */ + createHelpLayer: function(options) { + if (!options.helpLayer) { + var helpLayer = document.createElement('canvas'); + helpLayer.width = options.sourceWidth; + helpLayer.height = options.sourceHeight; + options.helpLayer = helpLayer; + } + }, - canvas.remove(zoomArea); - this._startPoint = null; + /** + * Returns object representation of an instance + * @return {Object} Object representation of an instance + */ + toObject: function() { + var object = { type: this.type }, mainP = this.mainParameter; + if (mainP) { + object[mainP] = this[mainP]; } + return object; + }, - /** - * Get center point - * @returns {{x: number, y: number}} - * @private - */ + /** + * Returns a JSON representation of an instance + * @return {Object} JSON + */ + toJSON: function() { + // delegate, not alias + return this.toObject(); + } +}); - }, { - key: '_getCenterPoint', - value: function _getCenterPoint() { - var _zoomArea = this.zoomArea, - left = _zoomArea.left, - top = _zoomArea.top, - width = _zoomArea.width, - height = _zoomArea.height; - var _startPoint3 = this._startPoint, - x = _startPoint3.x, - y = _startPoint3.y; - var aspectRatio = this.aspectRatio; +fabric.Image.filters.BaseFilter.fromObject = function(object, callback) { + var filter = new fabric.Image.filters[object.type](object); + callback && callback(filter); + return filter; +}; - if (width < MOUSE_MOVE_THRESHOLD && height < MOUSE_MOVE_THRESHOLD) { - return { x: x, y: y }; - } +(function(global) { - return width > height ? { x: left + aspectRatio * height / 2, y: top + height / 2 } : { x: left + width / 2, y: top + width / aspectRatio / 2 }; - } + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + + /** + * Color Matrix filter class + * @class fabric.Image.filters.ColorMatrix + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.ColorMatrix#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @see {@Link http://www.webwasp.co.uk/tutorials/219/Color_Matrix_Filter.php} + * @see {@Link http://phoboslab.org/log/2013/11/fast-image-filters-with-webgl} + * @example Kodachrome filter + * var filter = new fabric.Image.filters.ColorMatrix({ + * matrix: [ + 1.1285582396593525, -0.3967382283601348, -0.03992559172921793, 0, 63.72958762196502, + -0.16404339962244616, 1.0835251566291304, -0.05498805115633132, 0, 24.732407896706203, + -0.16786010706155763, -0.5603416277695248, 1.6014850761964943, 0, 35.62982807460946, + 0, 0, 0, 1, 0 + ] + * }); + * object.filters.push(filter); + * object.applyFilters(); + */ + filters.ColorMatrix = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.ColorMatrix.prototype */ { /** - * Zoom the canvas - * @param {{x: number, y: number}} center - center of zoom - * @param {?number} zoomLevel - zoom level + * Filter type + * @param {String} type + * @default */ + type: 'ColorMatrix', - }, { - key: 'zoom', - value: function zoom(_ref3) { - var x = _ref3.x, - y = _ref3.y; - var zoomLevel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.zoomLevel; + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'varying vec2 vTexCoord;\n' + + 'uniform mat4 uColorMatrix;\n' + + 'uniform vec4 uConstants;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'color *= uColorMatrix;\n' + + 'color += uConstants;\n' + + 'gl_FragColor = color;\n' + + '}', - var canvas = this.getCanvas(); - var centerPoints = this._centerPoints; + /** + * Colormatrix for pixels. + * array of 20 floats. Numbers in positions 4, 9, 14, 19 loose meaning + * outside the -1, 1 range. + * 0.0039215686 is the part of 1 that get translated to 1 in 2d + * @param {Array} matrix array of 20 numbers. + * @default + */ + matrix: [ + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0 + ], - for (var i = centerPoints.length - 1; i >= 0; i -= 1) { - if (centerPoints[i].zoomLevel < zoomLevel) { - break; - } + mainParameter: 'matrix', - var _centerPoints$pop = centerPoints.pop(), - prevX = _centerPoints$pop.x, - prevY = _centerPoints$pop.y, - prevZoomLevel = _centerPoints$pop.prevZoomLevel; + /** + * Lock the colormatrix on the color part, skipping alpha, manly for non webgl scenario + * to save some calculation + */ + colorsOnly: true, - canvas.zoomToPoint({ x: prevX, y: prevY }, prevZoomLevel); - this.zoomLevel = prevZoomLevel; - } + /** + * Constructor + * @param {Object} [options] Options object + */ + initialize: function(options) { + this.callSuper('initialize', options); + // create a new array instead mutating the prototype with push + this.matrix = this.matrix.slice(0); + }, - canvas.zoomToPoint({ x: x, y: y }, zoomLevel); - if (!this._isDefaultZoomLevel(zoomLevel)) { - this._centerPoints.push({ - x: x, - y: y, - zoomLevel: zoomLevel, - prevZoomLevel: this.zoomLevel - }); + /** + * Apply the ColorMatrix operation to a Uint8Array representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8Array to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, + iLen = data.length, + m = this.matrix, + r, g, b, a, i, colorsOnly = this.colorsOnly; + + for (i = 0; i < iLen; i += 4) { + r = data[i]; + g = data[i + 1]; + b = data[i + 2]; + if (colorsOnly) { + data[i] = r * m[0] + g * m[1] + b * m[2] + m[4] * 255; + data[i + 1] = r * m[5] + g * m[6] + b * m[7] + m[9] * 255; + data[i + 2] = r * m[10] + g * m[11] + b * m[12] + m[14] * 255; + } + else { + a = data[i + 3]; + data[i] = r * m[0] + g * m[1] + b * m[2] + a * m[3] + m[4] * 255; + data[i + 1] = r * m[5] + g * m[6] + b * m[7] + a * m[8] + m[9] * 255; + data[i + 2] = r * m[10] + g * m[11] + b * m[12] + a * m[13] + m[14] * 255; + data[i + 3] = r * m[15] + g * m[16] + b * m[17] + a * m[18] + m[19] * 255; + } } - this.zoomLevel = zoomLevel; - - this._fireZoomChanged(canvas, zoomLevel); - } + }, /** - * Zoom out one step + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. */ + getUniformLocations: function(gl, program) { + return { + uColorMatrix: gl.getUniformLocation(program, 'uColorMatrix'), + uConstants: gl.getUniformLocation(program, 'uConstants'), + }; + }, - }, { - key: 'zoomOut', - value: function zoomOut() { - var centerPoints = this._centerPoints; + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + var m = this.matrix, + matrix = [ + m[0], m[1], m[2], m[3], + m[5], m[6], m[7], m[8], + m[10], m[11], m[12], m[13], + m[15], m[16], m[17], m[18] + ], + constants = [m[4], m[9], m[14], m[19]]; + gl.uniformMatrix4fv(uniformLocations.uColorMatrix, false, matrix); + gl.uniform4fv(uniformLocations.uConstants, constants); + }, + }); - if (!centerPoints.length) { - return; - } + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {function} [callback] function to invoke after filter creation + * @return {fabric.Image.filters.ColorMatrix} Instance of fabric.Image.filters.ColorMatrix + */ + fabric.Image.filters.ColorMatrix.fromObject = fabric.Image.filters.BaseFilter.fromObject; +})( true ? exports : 0); - var canvas = this.getCanvas(); - var point = centerPoints.pop(); - var x = point.x, - y = point.y, - prevZoomLevel = point.prevZoomLevel; +(function(global) { - if (this._isDefaultZoomLevel(prevZoomLevel)) { - canvas.setViewportTransform([1, 0, 0, 1, 0, 0]); - } else { - canvas.zoomToPoint({ x: x, y: y }, prevZoomLevel); - } + 'use strict'; - this.zoomLevel = prevZoomLevel; + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - this._fireZoomChanged(canvas, this.zoomLevel); - } + /** + * Brightness filter class + * @class fabric.Image.filters.Brightness + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Brightness#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Brightness({ + * brightness: 0.05 + * }); + * object.filters.push(filter); + * object.applyFilters(); + */ + filters.Brightness = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Brightness.prototype */ { /** - * Zoom reset + * Filter type + * @param {String} type + * @default */ - - }, { - key: 'resetZoom', - value: function resetZoom() { - var canvas = this.getCanvas(); - - canvas.setViewportTransform([1, 0, 0, 1, 0, 0]); - - this.zoomLevel = DEFAULT_ZOOM_LEVEL; - this._centerPoints = []; - - this._fireZoomChanged(canvas, this.zoomLevel); - } + type: 'Brightness', /** - * Whether zoom level is max (5.0) - * @returns {boolean} - * @private + * Fragment source for the brightness program */ + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uBrightness;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'color.rgb += uBrightness;\n' + + 'gl_FragColor = color;\n' + + '}', - }, { - key: '_isMaxZoomLevel', - value: function _isMaxZoomLevel() { - return this.zoomLevel >= 5.0; - } + /** + * Brightness value, from -1 to 1. + * translated to -255 to 255 for 2d + * 0.0039215686 is the part of 1 that get translated to 1 in 2d + * @param {Number} brightness + * @default + */ + brightness: 0, /** - * Move point of zoom - * @param {{x: number, y: number}} delta - move amount - * @private + * Describe the property that is the filter parameter + * @param {String} m + * @default */ + mainParameter: 'brightness', - }, { - key: '_movePointOfZoom', - value: function _movePointOfZoom(_ref4) { - var deltaX = _ref4.x, - deltaY = _ref4.y; - - var centerPoints = this._centerPoints; - - if (!centerPoints.length) { + /** + * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + if (this.brightness === 0) { return; } + var imageData = options.imageData, + data = imageData.data, i, len = data.length, + brightness = Math.round(this.brightness * 255); + for (i = 0; i < len; i += 4) { + data[i] = data[i] + brightness; + data[i + 1] = data[i + 1] + brightness; + data[i + 2] = data[i + 2] + brightness; + } + }, - var canvas = this.getCanvas(); - var zoomLevel = this.zoomLevel; + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uBrightness: gl.getUniformLocation(program, 'uBrightness'), + }; + }, + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uBrightness, this.brightness); + }, + }); - var point = centerPoints.pop(); - var originX = point.x, - originY = point.y, - prevZoomLevel = point.prevZoomLevel; + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.Brightness} Instance of fabric.Image.filters.Brightness + */ + fabric.Image.filters.Brightness.fromObject = fabric.Image.filters.BaseFilter.fromObject; - var x = originX - deltaX; - var y = originY - deltaY; +})( true ? exports : 0); - canvas.zoomToPoint({ x: originX, y: originY }, prevZoomLevel); - canvas.zoomToPoint({ x: x, y: y }, zoomLevel); - centerPoints.push({ x: x, y: y, prevZoomLevel: prevZoomLevel, zoomLevel: zoomLevel }); - this._fireZoomChanged(canvas, zoomLevel); - } +(function(global) { + + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + + /** + * Adapted from html5rocks article + * @class fabric.Image.filters.Convolute + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Convolute#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example Sharpen filter + * var filter = new fabric.Image.filters.Convolute({ + * matrix: [ 0, -1, 0, + * -1, 5, -1, + * 0, -1, 0 ] + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + * @example Blur filter + * var filter = new fabric.Image.filters.Convolute({ + * matrix: [ 1/9, 1/9, 1/9, + * 1/9, 1/9, 1/9, + * 1/9, 1/9, 1/9 ] + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + * @example Emboss filter + * var filter = new fabric.Image.filters.Convolute({ + * matrix: [ 1, 1, 1, + * 1, 0.7, -1, + * -1, -1, -1 ] + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + * @example Emboss filter with opaqueness + * var filter = new fabric.Image.filters.Convolute({ + * opaque: true, + * matrix: [ 1, 1, 1, + * 1, 0.7, -1, + * -1, -1, -1 ] + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + */ + filters.Convolute = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Convolute.prototype */ { + + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Convolute', + + /* + * Opaque value (true/false) + */ + opaque: false, + + /* + * matrix for the filter, max 9x9 + */ + matrix: [0, 0, 0, 0, 1, 0, 0, 0, 0], + + /** + * Fragment source for the brightness program + */ + fragmentSource: { + Convolute_3_1: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMatrix[9];\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = vec4(0, 0, 0, 0);\n' + + 'for (float h = 0.0; h < 3.0; h+=1.0) {\n' + + 'for (float w = 0.0; w < 3.0; w+=1.0) {\n' + + 'vec2 matrixPos = vec2(uStepW * (w - 1), uStepH * (h - 1));\n' + + 'color += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 3.0 + w)];\n' + + '}\n' + + '}\n' + + 'gl_FragColor = color;\n' + + '}', + Convolute_3_0: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMatrix[9];\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = vec4(0, 0, 0, 1);\n' + + 'for (float h = 0.0; h < 3.0; h+=1.0) {\n' + + 'for (float w = 0.0; w < 3.0; w+=1.0) {\n' + + 'vec2 matrixPos = vec2(uStepW * (w - 1.0), uStepH * (h - 1.0));\n' + + 'color.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 3.0 + w)];\n' + + '}\n' + + '}\n' + + 'float alpha = texture2D(uTexture, vTexCoord).a;\n' + + 'gl_FragColor = color;\n' + + 'gl_FragColor.a = alpha;\n' + + '}', + Convolute_5_1: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMatrix[25];\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = vec4(0, 0, 0, 0);\n' + + 'for (float h = 0.0; h < 5.0; h+=1.0) {\n' + + 'for (float w = 0.0; w < 5.0; w+=1.0) {\n' + + 'vec2 matrixPos = vec2(uStepW * (w - 2.0), uStepH * (h - 2.0));\n' + + 'color += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 5.0 + w)];\n' + + '}\n' + + '}\n' + + 'gl_FragColor = color;\n' + + '}', + Convolute_5_0: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMatrix[25];\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = vec4(0, 0, 0, 1);\n' + + 'for (float h = 0.0; h < 5.0; h+=1.0) {\n' + + 'for (float w = 0.0; w < 5.0; w+=1.0) {\n' + + 'vec2 matrixPos = vec2(uStepW * (w - 2.0), uStepH * (h - 2.0));\n' + + 'color.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 5.0 + w)];\n' + + '}\n' + + '}\n' + + 'float alpha = texture2D(uTexture, vTexCoord).a;\n' + + 'gl_FragColor = color;\n' + + 'gl_FragColor.a = alpha;\n' + + '}', + Convolute_7_1: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMatrix[49];\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = vec4(0, 0, 0, 0);\n' + + 'for (float h = 0.0; h < 7.0; h+=1.0) {\n' + + 'for (float w = 0.0; w < 7.0; w+=1.0) {\n' + + 'vec2 matrixPos = vec2(uStepW * (w - 3.0), uStepH * (h - 3.0));\n' + + 'color += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 7.0 + w)];\n' + + '}\n' + + '}\n' + + 'gl_FragColor = color;\n' + + '}', + Convolute_7_0: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMatrix[49];\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = vec4(0, 0, 0, 1);\n' + + 'for (float h = 0.0; h < 7.0; h+=1.0) {\n' + + 'for (float w = 0.0; w < 7.0; w+=1.0) {\n' + + 'vec2 matrixPos = vec2(uStepW * (w - 3.0), uStepH * (h - 3.0));\n' + + 'color.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 7.0 + w)];\n' + + '}\n' + + '}\n' + + 'float alpha = texture2D(uTexture, vTexCoord).a;\n' + + 'gl_FragColor = color;\n' + + 'gl_FragColor.a = alpha;\n' + + '}', + Convolute_9_1: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMatrix[81];\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = vec4(0, 0, 0, 0);\n' + + 'for (float h = 0.0; h < 9.0; h+=1.0) {\n' + + 'for (float w = 0.0; w < 9.0; w+=1.0) {\n' + + 'vec2 matrixPos = vec2(uStepW * (w - 4.0), uStepH * (h - 4.0));\n' + + 'color += texture2D(uTexture, vTexCoord + matrixPos) * uMatrix[int(h * 9.0 + w)];\n' + + '}\n' + + '}\n' + + 'gl_FragColor = color;\n' + + '}', + Convolute_9_0: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uMatrix[81];\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = vec4(0, 0, 0, 1);\n' + + 'for (float h = 0.0; h < 9.0; h+=1.0) {\n' + + 'for (float w = 0.0; w < 9.0; w+=1.0) {\n' + + 'vec2 matrixPos = vec2(uStepW * (w - 4.0), uStepH * (h - 4.0));\n' + + 'color.rgb += texture2D(uTexture, vTexCoord + matrixPos).rgb * uMatrix[int(h * 9.0 + w)];\n' + + '}\n' + + '}\n' + + 'float alpha = texture2D(uTexture, vTexCoord).a;\n' + + 'gl_FragColor = color;\n' + + 'gl_FragColor.a = alpha;\n' + + '}', + }, /** - * onMouseDown handler in fabric canvas - * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event - * @private + * Constructor + * @memberOf fabric.Image.filters.Convolute.prototype + * @param {Object} [options] Options object + * @param {Boolean} [options.opaque=false] Opaque value (true/false) + * @param {Array} [options.matrix] Filter matrix */ - }, { - key: '_onMouseDownWithHandMode', - value: function _onMouseDownWithHandMode(_ref5) { - var target = _ref5.target, - e = _ref5.e; - if (target) { - return; - } + /** + * Retrieves the cached shader. + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + retrieveShader: function(options) { + var size = Math.sqrt(this.matrix.length); + var cacheKey = this.type + '_' + size + '_' + (this.opaque ? 1 : 0); + var shaderSource = this.fragmentSource[cacheKey]; + if (!options.programCache.hasOwnProperty(cacheKey)) { + options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); + } + return options.programCache[cacheKey]; + }, - var canvas = this.getCanvas(); + /** + * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, + weights = this.matrix, + side = Math.round(Math.sqrt(weights.length)), + halfSide = Math.floor(side / 2), + sw = imageData.width, + sh = imageData.height, + output = options.ctx.createImageData(sw, sh), + dst = output.data, + // go through the destination image pixels + alphaFac = this.opaque ? 1 : 0, + r, g, b, a, dstOff, + scx, scy, srcOff, wt, + x, y, cx, cy; + + for (y = 0; y < sh; y++) { + for (x = 0; x < sw; x++) { + dstOff = (y * sw + x) * 4; + // calculate the weighed sum of the source image pixels that + // fall under the convolution matrix + r = 0; g = 0; b = 0; a = 0; + + for (cy = 0; cy < side; cy++) { + for (cx = 0; cx < side; cx++) { + scy = y + cy - halfSide; + scx = x + cx - halfSide; + + // eslint-disable-next-line max-depth + if (scy < 0 || scy >= sh || scx < 0 || scx >= sw) { + continue; + } - if (this.zoomLevel <= DEFAULT_ZOOM_LEVEL) { - return; - } + srcOff = (scy * sw + scx) * 4; + wt = weights[cy * side + cx]; - canvas.selection = false; + r += data[srcOff] * wt; + g += data[srcOff + 1] * wt; + b += data[srcOff + 2] * wt; + // eslint-disable-next-line max-depth + if (!alphaFac) { + a += data[srcOff + 3] * wt; + } + } + } + dst[dstOff] = r; + dst[dstOff + 1] = g; + dst[dstOff + 2] = b; + if (!alphaFac) { + dst[dstOff + 3] = a; + } + else { + dst[dstOff + 3] = data[dstOff + 3]; + } + } + } + options.imageData = output; + }, - this._startHandPoint = canvas.getPointer(e); + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uMatrix: gl.getUniformLocation(program, 'uMatrix'), + uOpaque: gl.getUniformLocation(program, 'uOpaque'), + uHalfSize: gl.getUniformLocation(program, 'uHalfSize'), + uSize: gl.getUniformLocation(program, 'uSize'), + }; + }, - var _listeners4 = this._listeners, - moveHand = _listeners4.moveHand, - stopHand = _listeners4.stopHand; + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1fv(uniformLocations.uMatrix, this.matrix); + }, - canvas.on({ - 'mouse:move': moveHand, - 'mouse:up': stopHand + /** + * Returns object representation of an instance + * @return {Object} Object representation of an instance + */ + toObject: function() { + return extend(this.callSuper('toObject'), { + opaque: this.opaque, + matrix: this.matrix }); } + }); - /** - * onMouseMove handler in fabric canvas - * @param {{e: MouseEvent}} fEvent - Fabric event - * @private - */ + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.Convolute} Instance of fabric.Image.filters.Convolute + */ + fabric.Image.filters.Convolute.fromObject = fabric.Image.filters.BaseFilter.fromObject; - }, { - key: '_onMouseMoveWithHandMode', - value: function _onMouseMoveWithHandMode(_ref6) { - var e = _ref6.e; +})( true ? exports : 0); - var canvas = this.getCanvas(); - var _canvas$getPointer = canvas.getPointer(e), - x = _canvas$getPointer.x, - y = _canvas$getPointer.y; +(function(global) { - var deltaX = x - this._startHandPoint.x; - var deltaY = y - this._startHandPoint.y; + 'use strict'; - this._movePointOfZoom({ x: deltaX, y: deltaY }); - } + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - /** - * onMouseUp handler in fabric canvas - * @private - */ + /** + * Grayscale image filter class + * @class fabric.Image.filters.Grayscale + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Grayscale(); + * object.filters.push(filter); + * object.applyFilters(); + */ + filters.Grayscale = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Grayscale.prototype */ { + + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Grayscale', + + fragmentSource: { + average: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'float average = (color.r + color.b + color.g) / 3.0;\n' + + 'gl_FragColor = vec4(average, average, average, color.a);\n' + + '}', + lightness: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform int uMode;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 col = texture2D(uTexture, vTexCoord);\n' + + 'float average = (max(max(col.r, col.g),col.b) + min(min(col.r, col.g),col.b)) / 2.0;\n' + + 'gl_FragColor = vec4(average, average, average, col.a);\n' + + '}', + luminosity: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform int uMode;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 col = texture2D(uTexture, vTexCoord);\n' + + 'float average = 0.21 * col.r + 0.72 * col.g + 0.07 * col.b;\n' + + 'gl_FragColor = vec4(average, average, average, col.a);\n' + + '}', + }, - }, { - key: '_onMouseUpWithHandMode', - value: function _onMouseUpWithHandMode() { - var canvas = this.getCanvas(); - var _listeners5 = this._listeners, - moveHand = _listeners5.moveHand, - stopHand = _listeners5.stopHand; + /** + * Grayscale mode, between 'average', 'lightness', 'luminosity' + * @param {String} type + * @default + */ + mode: 'average', - canvas.off({ - 'mouse:move': moveHand, - 'mouse:up': stopHand - }); + mainParameter: 'mode', - this._startHandPoint = null; - } + /** + * Apply the Grayscale operation to a Uint8Array representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8Array to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, i, + len = data.length, value, + mode = this.mode; + for (i = 0; i < len; i += 4) { + if (mode === 'average') { + value = (data[i] + data[i + 1] + data[i + 2]) / 3; + } + else if (mode === 'lightness') { + value = (Math.min(data[i], data[i + 1], data[i + 2]) + + Math.max(data[i], data[i + 1], data[i + 2])) / 2; + } + else if (mode === 'luminosity') { + value = 0.21 * data[i] + 0.72 * data[i + 1] + 0.07 * data[i + 2]; + } + data[i] = value; + data[i + 1] = value; + data[i + 2] = value; + } + }, /** - * onChangeZoom handler in fabric canvas - * @private + * Retrieves the cached shader. + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. */ + retrieveShader: function(options) { + var cacheKey = this.type + '_' + this.mode; + if (!options.programCache.hasOwnProperty(cacheKey)) { + var shaderSource = this.fragmentSource[this.mode]; + options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); + } + return options.programCache[cacheKey]; + }, - }, { - key: '_changeScrollState', - value: function _changeScrollState(_ref7) { - var viewport = _ref7.viewport, - zoomLevel = _ref7.zoomLevel; + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uMode: gl.getUniformLocation(program, 'uMode'), + }; + }, - var canvas = this.getCanvas(); + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + // default average mode. + var mode = 1; + gl.uniform1i(uniformLocations.uMode, mode); + }, - canvas.remove(this._verticalScroll); - canvas.remove(this._horizontalScroll); + /** + * Grayscale filter isNeutralState implementation + * The filter is never neutral + * on the image + **/ + isNeutralState: function() { + return false; + }, + }); - if (this._isDefaultZoomLevel(zoomLevel)) { - return; - } + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.Grayscale} Instance of fabric.Image.filters.Grayscale + */ + fabric.Image.filters.Grayscale.fromObject = fabric.Image.filters.BaseFilter.fromObject; - var canvasWidth = canvas.width; - var canvasHeight = canvas.height; +})( true ? exports : 0); - var tl = viewport.tl, - tr = viewport.tr, - bl = viewport.bl; - var viewportWidth = tr.x - tl.x; - var viewportHeight = bl.y - tl.y; +(function(global) { - var horizontalScrollWidth = viewportWidth * viewportWidth / canvasWidth; - var horizontalScrollHeight = viewportHeight * DEFAULT_HORIZONTAL_SCROLL_RATIO.SIZE; - var horizontalScrollLeft = (0, _util.clamp)(tl.x + tl.x / canvasWidth * viewportWidth, tl.x, tr.x - horizontalScrollWidth); - var horizontalScrollMargin = viewportHeight * DEFAULT_HORIZONTAL_SCROLL_RATIO.MARGIN; - var horizontalScrollBorderRadius = viewportHeight * DEFAULT_HORIZONTAL_SCROLL_RATIO.BORDER_RADIUS; + 'use strict'; - this._horizontalScroll.set({ - left: horizontalScrollLeft, - top: bl.y - horizontalScrollHeight - horizontalScrollMargin, - width: horizontalScrollWidth, - height: horizontalScrollHeight, - rx: horizontalScrollBorderRadius, - ry: horizontalScrollBorderRadius - }); + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; - var verticalScrollWidth = viewportWidth * DEFAULT_VERTICAL_SCROLL_RATIO.SIZE; - var verticalScrollHeight = viewportHeight * viewportHeight / canvasHeight; - var verticalScrollTop = (0, _util.clamp)(tl.y + tl.y / canvasHeight * viewportHeight, tr.y, bl.y - verticalScrollHeight); - var verticalScrollMargin = viewportWidth * DEFAULT_VERTICAL_SCROLL_RATIO.MARGIN; - var verticalScrollBorderRadius = viewportWidth * DEFAULT_VERTICAL_SCROLL_RATIO.BORDER_RADIUS; + /** + * Invert filter class + * @class fabric.Image.filters.Invert + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Invert(); + * object.filters.push(filter); + * object.applyFilters(canvas.renderAll.bind(canvas)); + */ + filters.Invert = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Invert.prototype */ { - this._verticalScroll.set({ - left: tr.x - verticalScrollWidth - verticalScrollMargin, - top: verticalScrollTop, - width: verticalScrollWidth, - height: verticalScrollHeight, - rx: verticalScrollBorderRadius, - ry: verticalScrollBorderRadius - }); + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Invert', - this._addScrollBar(); - } + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform int uInvert;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'if (uInvert == 1) {\n' + + 'gl_FragColor = vec4(1.0 - color.r,1.0 -color.g,1.0 -color.b,color.a);\n' + + '} else {\n' + + 'gl_FragColor = color;\n' + + '}\n' + + '}', /** - * Change objects 'evented' state - * @param {boolean} [evented=true] - objects 'evented' state + * Filter invert. if false, does nothing + * @param {Boolean} invert + * @default */ + invert: true, - }, { - key: '_changeObjectsEventedState', - value: function _changeObjectsEventedState() { - var evented = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true; + mainParameter: 'invert', - var canvas = this.getCanvas(); + /** + * Apply the Invert operation to a Uint8Array representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8Array to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, i, + len = data.length; + for (i = 0; i < len; i += 4) { + data[i] = 255 - data[i]; + data[i + 1] = 255 - data[i + 1]; + data[i + 2] = 255 - data[i + 2]; + } + }, - canvas.forEachObject(function (obj) { - // {@link http://fabricjs.com/docs/fabric.Object.html#evented} - obj.evented = evented; - }); - } + /** + * Invert filter isNeutralState implementation + * Used only in image applyFilters to discard filters that will not have an effect + * on the image + * @param {Object} options + **/ + isNeutralState: function() { + return !this.invert; + }, /** - * Add scroll bar and set remove timer + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. */ + getUniformLocations: function(gl, program) { + return { + uInvert: gl.getUniformLocation(program, 'uInvert'), + }; + }, - }, { - key: '_addScrollBar', - value: function _addScrollBar() { - var _this2 = this; + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1i(uniformLocations.uInvert, this.invert); + }, + }); - var canvas = this.getCanvas(); + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.Invert} Instance of fabric.Image.filters.Invert + */ + fabric.Image.filters.Invert.fromObject = fabric.Image.filters.BaseFilter.fromObject; - canvas.add(this._horizontalScroll); - canvas.add(this._verticalScroll); - if (this.scrollBarTid) { - clearTimeout(this.scrollBarTid); - } +})( true ? exports : 0); - this.scrollBarTid = setTimeout(function () { - canvas.remove(_this2._horizontalScroll); - canvas.remove(_this2._verticalScroll); - }, 3000); - } + +(function(global) { + + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + + /** + * Noise filter class + * @class fabric.Image.filters.Noise + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Noise#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Noise({ + * noise: 700 + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + */ + filters.Noise = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Noise.prototype */ { /** - * Check zoom level is default zoom level (1.0) - * @param {number} zoomLevel - zoom level - * @returns {boolean} - whether zoom level is 1.0 + * Filter type + * @param {String} type + * @default */ + type: 'Noise', - }, { - key: '_isDefaultZoomLevel', - value: function _isDefaultZoomLevel(zoomLevel) { - return zoomLevel === DEFAULT_ZOOM_LEVEL; - } + /** + * Fragment source for the noise program + */ + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uStepH;\n' + + 'uniform float uNoise;\n' + + 'uniform float uSeed;\n' + + 'varying vec2 vTexCoord;\n' + + 'float rand(vec2 co, float seed, float vScale) {\n' + + 'return fract(sin(dot(co.xy * vScale ,vec2(12.9898 , 78.233))) * 43758.5453 * (seed + 0.01) / 2.0);\n' + + '}\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'color.rgb += (0.5 - rand(vTexCoord, uSeed, 0.1 / uStepH)) * uNoise;\n' + + 'gl_FragColor = color;\n' + + '}', /** - * Fire 'zoomChanged' event - * @param {fabric.Canvas} canvas - fabric canvas - * @param {number} zoomLevel - 'zoomChanged' event params + * Describe the property that is the filter parameter + * @param {String} m + * @default */ + mainParameter: 'noise', - }, { - key: '_fireZoomChanged', - value: function _fireZoomChanged(canvas, zoomLevel) { - canvas.fire(ZOOM_CHANGED, { viewport: canvas.calcViewportBoundaries(), zoomLevel: zoomLevel }); - } + /** + * Noise value, from + * @param {Number} noise + * @default + */ + noise: 0, /** - * Get zoom mode + * Apply the Brightness operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. */ + applyTo2d: function(options) { + if (this.noise === 0) { + return; + } + var imageData = options.imageData, + data = imageData.data, i, len = data.length, + noise = this.noise, rand; - }, { - key: 'mode', - get: function get() { - return this.zoomMode; - } - }]); + for (i = 0, len = data.length; i < len; i += 4) { - return Zoom; -}(_component2.default); + rand = (0.5 - Math.random()) * noise; -exports.default = Zoom; + data[i] += rand; + data[i + 1] += rand; + data[i + 2] += rand; + } + }, -/***/ }), + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uNoise: gl.getUniformLocation(program, 'uNoise'), + uSeed: gl.getUniformLocation(program, 'uSeed'), + }; + }, -/***/ "./src/js/consts.js": -/*!**************************!*\ - !*** ./src/js/consts.js ***! - \**************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uNoise, this.noise / 255); + gl.uniform1f(uniformLocations.uSeed, Math.random()); + }, -"use strict"; + /** + * Returns object representation of an instance + * @return {Object} Object representation of an instance + */ + toObject: function() { + return extend(this.callSuper('toObject'), { + noise: this.noise + }); + } + }); + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {Function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.Noise} Instance of fabric.Image.filters.Noise + */ + fabric.Image.filters.Noise.fromObject = fabric.Image.filters.BaseFilter.fromObject; -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.defaultResizePixelValues = exports.emptyCropRectValues = exports.defaultFilterRangeValues = exports.defaultTextRangeValues = exports.defaultShapeStrokeValues = exports.defaultDrawRangeValues = exports.defaultRotateRangeValues = exports.defaultIconPath = exports.rejectMessages = exports.fObjectOptions = exports.keyCodes = exports.zoomModes = exports.drawingMenuNames = exports.drawingModes = exports.historyNames = exports.selectorNames = exports.eventNames = exports.commandNames = exports.CROPZONE_DEFAULT_OPTIONS = exports.SHAPE_DEFAULT_OPTIONS = exports.componentNames = exports.filterType = exports.OBJ_TYPE = exports.SHAPE_TYPE = exports.SHAPE_FILL_TYPE = exports.HELP_MENUS = exports.DELETE_HELP_MENUS = exports.COMMAND_HELP_MENUS = exports.ZOOM_HELP_MENUS = undefined; +})( true ? exports : 0); -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); -/** - * Help features for zoom - * @type {Array.} - */ -var ZOOM_HELP_MENUS = exports.ZOOM_HELP_MENUS = ['zoomIn', 'zoomOut', 'hand']; +(function(global) { -/** - * Help features for command - * @type {Array.} - */ -/** - * @author NHN. FE Development Team - * @fileoverview Constants - */ -var COMMAND_HELP_MENUS = exports.COMMAND_HELP_MENUS = ['history', 'undo', 'redo', 'reset']; + 'use strict'; -/** - * Help features for delete - * @type {Array.} - */ -var DELETE_HELP_MENUS = exports.DELETE_HELP_MENUS = ['delete', 'deleteAll']; + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; -/** - * Editor help features - * @type {Array.} - */ -var HELP_MENUS = exports.HELP_MENUS = [].concat(ZOOM_HELP_MENUS, COMMAND_HELP_MENUS, DELETE_HELP_MENUS); + /** + * Pixelate filter class + * @class fabric.Image.filters.Pixelate + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Pixelate#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Pixelate({ + * blocksize: 8 + * }); + * object.filters.push(filter); + * object.applyFilters(); + */ + filters.Pixelate = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Pixelate.prototype */ { -/** - * Fill type for shape - * @type {Object.} - */ -var SHAPE_FILL_TYPE = exports.SHAPE_FILL_TYPE = { - FILTER: 'filter', - COLOR: 'color' -}; + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Pixelate', -/** - * Shape type list - * @type {Array.} - */ -var SHAPE_TYPE = exports.SHAPE_TYPE = ['rect', 'circle', 'triangle']; + blocksize: 4, -/** - * Object type - * @type {Object.} - */ -var OBJ_TYPE = exports.OBJ_TYPE = { - CROPZONE: 'cropzone' -}; + mainParameter: 'blocksize', -/** - * Filter type map - * @type {Object.} - */ -var filterType = exports.filterType = { - VINTAGE: 'vintage', - SEPIA2: 'sepia2', - REMOVE_COLOR: 'removeColor', - COLOR_FILTER: 'colorFilter', - REMOVE_WHITE: 'removeWhite', - BLEND_COLOR: 'blendColor', - BLEND: 'blend' -}; + /** + * Fragment source for the Pixelate program + */ + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uBlocksize;\n' + + 'uniform float uStepW;\n' + + 'uniform float uStepH;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'float blockW = uBlocksize * uStepW;\n' + + 'float blockH = uBlocksize * uStepW;\n' + + 'int posX = int(vTexCoord.x / blockW);\n' + + 'int posY = int(vTexCoord.y / blockH);\n' + + 'float fposX = float(posX);\n' + + 'float fposY = float(posY);\n' + + 'vec2 squareCoords = vec2(fposX * blockW, fposY * blockH);\n' + + 'vec4 color = texture2D(uTexture, squareCoords);\n' + + 'gl_FragColor = color;\n' + + '}', -/** - * Component names - * @type {Object.} - */ -var componentNames = exports.componentNames = (0, _util.keyMirror)('IMAGE_LOADER', 'CROPPER', 'FLIP', 'ROTATION', 'FREE_DRAWING', 'LINE', 'TEXT', 'ICON', 'FILTER', 'SHAPE', 'ZOOM', 'RESIZE'); + /** + * Apply the Pixelate operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, + iLen = imageData.height, + jLen = imageData.width, + index, i, j, r, g, b, a, + _i, _j, _iLen, _jLen; + + for (i = 0; i < iLen; i += this.blocksize) { + for (j = 0; j < jLen; j += this.blocksize) { + + index = (i * 4) * jLen + (j * 4); + + r = data[index]; + g = data[index + 1]; + b = data[index + 2]; + a = data[index + 3]; + + _iLen = Math.min(i + this.blocksize, iLen); + _jLen = Math.min(j + this.blocksize, jLen); + for (_i = i; _i < _iLen; _i++) { + for (_j = j; _j < _jLen; _j++) { + index = (_i * 4) * jLen + (_j * 4); + data[index] = r; + data[index + 1] = g; + data[index + 2] = b; + data[index + 3] = a; + } + } + } + } + }, -/** - * Shape default option - * @type {Object} - */ -var SHAPE_DEFAULT_OPTIONS = exports.SHAPE_DEFAULT_OPTIONS = { - lockSkewingX: true, - lockSkewingY: true, - bringForward: true, - isRegular: false -}; + /** + * Indicate when the filter is not gonna apply changes to the image + **/ + isNeutralState: function() { + return this.blocksize === 1; + }, -/** - * Cropzone default option - * @type {Object} - */ -var CROPZONE_DEFAULT_OPTIONS = exports.CROPZONE_DEFAULT_OPTIONS = { - hasRotatingPoint: false, - hasBorders: false, - lockScalingFlip: true, - lockRotation: true, - lockSkewingX: true, - lockSkewingY: true -}; + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uBlocksize: gl.getUniformLocation(program, 'uBlocksize'), + uStepW: gl.getUniformLocation(program, 'uStepW'), + uStepH: gl.getUniformLocation(program, 'uStepH'), + }; + }, -/** - * Command names - * @type {Object.} - */ -var commandNames = exports.commandNames = { - CLEAR_OBJECTS: 'clearObjects', - LOAD_IMAGE: 'loadImage', - FLIP_IMAGE: 'flip', - ROTATE_IMAGE: 'rotate', - ADD_OBJECT: 'addObject', - REMOVE_OBJECT: 'removeObject', - APPLY_FILTER: 'applyFilter', - REMOVE_FILTER: 'removeFilter', - ADD_ICON: 'addIcon', - CHANGE_ICON_COLOR: 'changeIconColor', - ADD_SHAPE: 'addShape', - CHANGE_SHAPE: 'changeShape', - ADD_TEXT: 'addText', - CHANGE_TEXT: 'changeText', - CHANGE_TEXT_STYLE: 'changeTextStyle', - ADD_IMAGE_OBJECT: 'addImageObject', - RESIZE_CANVAS_DIMENSION: 'resizeCanvasDimension', - SET_OBJECT_PROPERTIES: 'setObjectProperties', - SET_OBJECT_POSITION: 'setObjectPosition', - CHANGE_SELECTION: 'changeSelection', - RESIZE_IMAGE: 'resize' -}; + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uBlocksize, this.blocksize); + }, + }); -/** - * Event names - * @type {Object.} - */ -var eventNames = exports.eventNames = { - OBJECT_ACTIVATED: 'objectActivated', - OBJECT_MOVED: 'objectMoved', - OBJECT_SCALED: 'objectScaled', - OBJECT_CREATED: 'objectCreated', - OBJECT_ROTATED: 'objectRotated', - OBJECT_ADDED: 'objectAdded', - OBJECT_MODIFIED: 'objectModified', - TEXT_EDITING: 'textEditing', - TEXT_CHANGED: 'textChanged', - ICON_CREATE_RESIZE: 'iconCreateResize', - ICON_CREATE_END: 'iconCreateEnd', - ADD_TEXT: 'addText', - ADD_OBJECT: 'addObject', - ADD_OBJECT_AFTER: 'addObjectAfter', - MOUSE_DOWN: 'mousedown', - MOUSE_UP: 'mouseup', - MOUSE_MOVE: 'mousemove', - // UNDO/REDO Events - REDO_STACK_CHANGED: 'redoStackChanged', - UNDO_STACK_CHANGED: 'undoStackChanged', - SELECTION_CLEARED: 'selectionCleared', - SELECTION_CREATED: 'selectionCreated', - EXECUTE_COMMAND: 'executeCommand', - AFTER_UNDO: 'afterUndo', - AFTER_REDO: 'afterRedo', - ZOOM_CHANGED: 'zoomChanged', - HAND_STARTED: 'handStarted', - HAND_STOPPED: 'handStopped', - KEY_DOWN: 'keydown', - KEY_UP: 'keyup', - INPUT_BOX_EDITING_STARTED: 'inputBoxEditingStarted', - INPUT_BOX_EDITING_STOPPED: 'inputBoxEditingStopped', - FOCUS: 'focus', - BLUR: 'blur', - IMAGE_RESIZED: 'imageResized' -}; + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {Function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.Pixelate} Instance of fabric.Image.filters.Pixelate + */ + fabric.Image.filters.Pixelate.fromObject = fabric.Image.filters.BaseFilter.fromObject; -/** - * Selector names - * @type {Object.} - */ -var selectorNames = exports.selectorNames = { - COLOR_PICKER_INPUT_BOX: '.tui-colorpicker-palette-hex' -}; +})( true ? exports : 0); -/** - * History names - * @type {Object.} - */ -var historyNames = exports.historyNames = { - LOAD_IMAGE: 'Load', - LOAD_MASK_IMAGE: 'Mask', - ADD_MASK_IMAGE: 'Mask', - ADD_IMAGE_OBJECT: 'Mask', - CROP: 'Crop', - RESIZE: 'Resize', - APPLY_FILTER: 'Filter', - REMOVE_FILTER: 'Filter', - CHANGE_SHAPE: 'Shape', - CHANGE_ICON_COLOR: 'Icon', - ADD_TEXT: 'Text', - CHANGE_TEXT_STYLE: 'Text', - REMOVE_OBJECT: 'Delete', - CLEAR_OBJECTS: 'Delete' -}; -/** - * Editor states - * @type {Object.} - */ -var drawingModes = exports.drawingModes = (0, _util.keyMirror)('NORMAL', 'CROPPER', 'FREE_DRAWING', 'LINE_DRAWING', 'TEXT', 'SHAPE', 'ICON', 'ZOOM', 'RESIZE'); +(function(global) { -/** - * Menu names with drawing mode - * @type {Object.} - */ -var drawingMenuNames = exports.drawingMenuNames = { - TEXT: 'text', - CROP: 'crop', - RESIZE: 'resize', - SHAPE: 'shape', - ZOOM: 'zoom' -}; + 'use strict'; -/** - * Zoom modes - * @type {Object.} - */ -var zoomModes = exports.zoomModes = { - DEFAULT: 'normal', - ZOOM: 'zoom', - HAND: 'hand' -}; + var fabric = global.fabric || (global.fabric = { }), + extend = fabric.util.object.extend, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; -/** - * Shortcut key values - * @type {Object.} - */ -var keyCodes = exports.keyCodes = { - Z: 90, - Y: 89, - C: 67, - V: 86, - SHIFT: 16, - BACKSPACE: 8, - DEL: 46, - ARROW_DOWN: 40, - ARROW_UP: 38, - SPACE: 32 -}; + /** + * Remove white filter class + * @class fabric.Image.filters.RemoveColor + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.RemoveColor#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.RemoveColor({ + * threshold: 0.2, + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + */ + filters.RemoveColor = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.RemoveColor.prototype */ { -/** - * Fabric object options - * @type {Object.} - */ -var fObjectOptions = exports.fObjectOptions = { - SELECTION_STYLE: { - borderColor: 'red', - cornerColor: 'green', - cornerSize: 10, - originX: 'center', - originY: 'center', - transparentCorners: false - } -}; + /** + * Filter type + * @param {String} type + * @default + */ + type: 'RemoveColor', -/** - * Promise reject messages - * @type {Object.} - */ -var rejectMessages = exports.rejectMessages = { - addedObject: 'The object is already added.', - flip: 'The flipX and flipY setting values are not changed.', - invalidDrawingMode: 'This operation is not supported in the drawing mode.', - invalidParameters: 'Invalid parameters.', - isLock: 'The executing command state is locked.', - loadImage: 'The background image is empty.', - loadingImageFailed: 'Invalid image loaded.', - noActiveObject: 'There is no active object.', - noObject: 'The object is not in canvas.', - redo: 'The promise of redo command is reject.', - rotation: 'The current angle is same the old angle.', - undo: 'The promise of undo command is reject.', - unsupportedOperation: 'Unsupported operation.', - unsupportedType: 'Unsupported object type.' -}; + /** + * Color to remove, in any format understood by fabric.Color. + * @param {String} type + * @default + */ + color: '#FFFFFF', -/** - * Default icon menu svg path - * @type {Object.} - */ -var defaultIconPath = exports.defaultIconPath = { - 'icon-arrow': 'M40 12V0l24 24-24 24V36H0V12h40z', - 'icon-arrow-2': 'M49,32 H3 V22 h46 l-18,-18 h12 l23,23 L43,50 h-12 l18,-18 z ', - 'icon-arrow-3': 'M43.349998,27 L17.354,53 H1.949999 l25.996,-26 L1.949999,1 h15.404 L43.349998,27 z ', - 'icon-star': 'M35,54.557999 l-19.912001,10.468 l3.804,-22.172001 l-16.108,-15.7 l22.26,-3.236 L35,3.746 l9.956,20.172001 l22.26,3.236 l-16.108,15.7 l3.804,22.172001 z ', - 'icon-star-2': 'M17,31.212 l-7.194,4.08 l-4.728,-6.83 l-8.234,0.524 l-1.328,-8.226 l-7.644,-3.14 l2.338,-7.992 l-5.54,-6.18 l5.54,-6.176 l-2.338,-7.994 l7.644,-3.138 l1.328,-8.226 l8.234,0.522 l4.728,-6.83 L17,-24.312 l7.194,-4.08 l4.728,6.83 l8.234,-0.522 l1.328,8.226 l7.644,3.14 l-2.338,7.992 l5.54,6.178 l-5.54,6.178 l2.338,7.992 l-7.644,3.14 l-1.328,8.226 l-8.234,-0.524 l-4.728,6.83 z ', - 'icon-polygon': 'M3,31 L19,3 h32 l16,28 l-16,28 H19 z ', - 'icon-location': 'M24 62C8 45.503 0 32.837 0 24 0 10.745 10.745 0 24 0s24 10.745 24 24c0 8.837-8 21.503-24 38zm0-28c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10z', - 'icon-heart': 'M49.994999,91.349998 l-6.96,-6.333 C18.324001,62.606995 2.01,47.829002 2.01,29.690998 C2.01,14.912998 13.619999,3.299999 28.401001,3.299999 c8.349,0 16.362,5.859 21.594,12 c5.229,-6.141 13.242001,-12 21.591,-12 c14.778,0 26.390999,11.61 26.390999,26.390999 c0,18.138 -16.314001,32.916 -41.025002,55.374001 l-6.96,6.285 z ', - 'icon-bubble': 'M44 48L34 58V48H12C5.373 48 0 42.627 0 36V12C0 5.373 5.373 0 12 0h40c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12h-8z' -}; + /** + * Fragment source for the brightness program + */ + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform vec4 uLow;\n' + + 'uniform vec4 uHigh;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'gl_FragColor = texture2D(uTexture, vTexCoord);\n' + + 'if(all(greaterThan(gl_FragColor.rgb,uLow.rgb)) && all(greaterThan(uHigh.rgb,gl_FragColor.rgb))) {\n' + + 'gl_FragColor.a = 0.0;\n' + + '}\n' + + '}', -var defaultRotateRangeValues = exports.defaultRotateRangeValues = { - realTimeEvent: true, - min: -360, - max: 360, - value: 0 -}; + /** + * distance to actual color, as value up or down from each r,g,b + * between 0 and 1 + **/ + distance: 0.02, -var defaultDrawRangeValues = exports.defaultDrawRangeValues = { - min: 5, - max: 30, - value: 12 -}; + /** + * For color to remove inside distance, use alpha channel for a smoother deletion + * NOT IMPLEMENTED YET + **/ + useAlpha: false, -var defaultShapeStrokeValues = exports.defaultShapeStrokeValues = { - realTimeEvent: true, - min: 2, - max: 300, - value: 3 -}; + /** + * Constructor + * @memberOf fabric.Image.filters.RemoveWhite.prototype + * @param {Object} [options] Options object + * @param {Number} [options.color=#RRGGBB] Threshold value + * @param {Number} [options.distance=10] Distance value + */ -var defaultTextRangeValues = exports.defaultTextRangeValues = { - realTimeEvent: true, - min: 10, - max: 100, - value: 50 -}; + /** + * Applies filter to canvas element + * @param {Object} canvasEl Canvas element to apply filter to + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, i, + distance = this.distance * 255, + r, g, b, + source = new fabric.Color(this.color).getSource(), + lowC = [ + source[0] - distance, + source[1] - distance, + source[2] - distance, + ], + highC = [ + source[0] + distance, + source[1] + distance, + source[2] + distance, + ]; -var defaultFilterRangeValues = exports.defaultFilterRangeValues = { - tintOpacityRange: { - realTimeEvent: true, - min: 0, - max: 1, - value: 0.7, - useDecimal: true - }, - removewhiteDistanceRange: { - realTimeEvent: true, - min: 0, - max: 1, - value: 0.2, - useDecimal: true - }, - brightnessRange: { - realTimeEvent: true, - min: -1, - max: 1, - value: 0, - useDecimal: true - }, - noiseRange: { - realTimeEvent: true, - min: 0, - max: 1000, - value: 100 - }, - pixelateRange: { - realTimeEvent: true, - min: 2, - max: 20, - value: 4 - }, - colorfilterThresholdRange: { - realTimeEvent: true, - min: 0, - max: 1, - value: 0.2, - useDecimal: true - }, - blurFilterRange: { - value: 0.1 - } -}; -var emptyCropRectValues = exports.emptyCropRectValues = { - LEFT: 0, - TOP: 0, - WIDTH: 0.5, - HEIGHT: 0.5 -}; + for (i = 0; i < data.length; i += 4) { + r = data[i]; + g = data[i + 1]; + b = data[i + 2]; -var defaultResizePixelValues = exports.defaultResizePixelValues = { - realTimeEvent: true, - min: 32, - max: 4088, - value: 800 -}; + if (r > lowC[0] && + g > lowC[1] && + b > lowC[2] && + r < highC[0] && + g < highC[1] && + b < highC[2]) { + data[i + 3] = 0; + } + } + }, -/***/ }), + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uLow: gl.getUniformLocation(program, 'uLow'), + uHigh: gl.getUniformLocation(program, 'uHigh'), + }; + }, -/***/ "./src/js/drawingMode/cropper.js": -/*!***************************************!*\ - !*** ./src/js/drawingMode/cropper.js ***! - \***************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + var source = new fabric.Color(this.color).getSource(), + distance = parseFloat(this.distance), + lowC = [ + 0 + source[0] / 255 - distance, + 0 + source[1] / 255 - distance, + 0 + source[2] / 255 - distance, + 1 + ], + highC = [ + source[0] / 255 + distance, + source[1] / 255 + distance, + source[2] / 255 + distance, + 1 + ]; + gl.uniform4fv(uniformLocations.uLow, lowC); + gl.uniform4fv(uniformLocations.uHigh, highC); + }, -"use strict"; + /** + * Returns object representation of an instance + * @return {Object} Object representation of an instance + */ + toObject: function() { + return extend(this.callSuper('toObject'), { + color: this.color, + distance: this.distance + }); + } + }); + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {Function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.RemoveColor} Instance of fabric.Image.filters.RemoveWhite + */ + fabric.Image.filters.RemoveColor.fromObject = fabric.Image.filters.BaseFilter.fromObject; -Object.defineProperty(exports, "__esModule", { - value: true -}); +})( true ? exports : 0); -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); -var _drawingMode = __webpack_require__(/*! @/interface/drawingMode */ "./src/js/interface/drawingMode.js"); +(function(global) { -var _drawingMode2 = _interopRequireDefault(_drawingMode); + 'use strict'; -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + + var matrices = { + Brownie: [ + 0.59970,0.34553,-0.27082,0,0.186, + -0.03770,0.86095,0.15059,0,-0.1449, + 0.24113,-0.07441,0.44972,0,-0.02965, + 0,0,0,1,0 + ], + Vintage: [ + 0.62793,0.32021,-0.03965,0,0.03784, + 0.02578,0.64411,0.03259,0,0.02926, + 0.04660,-0.08512,0.52416,0,0.02023, + 0,0,0,1,0 + ], + Kodachrome: [ + 1.12855,-0.39673,-0.03992,0,0.24991, + -0.16404,1.08352,-0.05498,0,0.09698, + -0.16786,-0.56034,1.60148,0,0.13972, + 0,0,0,1,0 + ], + Technicolor: [ + 1.91252,-0.85453,-0.09155,0,0.04624, + -0.30878,1.76589,-0.10601,0,-0.27589, + -0.23110,-0.75018,1.84759,0,0.12137, + 0,0,0,1,0 + ], + Polaroid: [ + 1.438,-0.062,-0.062,0,0, + -0.122,1.378,-0.122,0,0, + -0.016,-0.016,1.483,0,0, + 0,0,0,1,0 + ], + Sepia: [ + 0.393, 0.769, 0.189, 0, 0, + 0.349, 0.686, 0.168, 0, 0, + 0.272, 0.534, 0.131, 0, 0, + 0, 0, 0, 1, 0 + ], + BlackWhite: [ + 1.5, 1.5, 1.5, 0, -1, + 1.5, 1.5, 1.5, 0, -1, + 1.5, 1.5, 1.5, 0, -1, + 0, 0, 0, 1, 0, + ] + }; -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + for (var key in matrices) { + filters[key] = createClass(filters.ColorMatrix, /** @lends fabric.Image.filters.Sepia.prototype */ { -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + /** + * Filter type + * @param {String} type + * @default + */ + type: key, -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + /** + * Colormatrix for the effect + * array of 20 floats. Numbers in positions 4, 9, 14, 19 loose meaning + * outside the -1, 1 range. + * @param {Array} matrix array of 20 numbers. + * @default + */ + matrix: matrices[key], -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** - * @author NHN. FE Development Team - * @fileoverview CropperDrawingMode class - */ + /** + * Lock the matrix export for this kind of static, parameter less filters. + */ + mainParameter: false, + /** + * Lock the colormatrix on the color part, skipping alpha + */ + colorsOnly: true, + }); + fabric.Image.filters[key].fromObject = fabric.Image.filters.BaseFilter.fromObject; + } +})( true ? exports : 0); -/** - * CropperDrawingMode class - * @class - * @ignore - */ -var CropperDrawingMode = function (_DrawingMode) { - _inherits(CropperDrawingMode, _DrawingMode); - function CropperDrawingMode() { - _classCallCheck(this, CropperDrawingMode); +(function(global) { + 'use strict'; - return _possibleConstructorReturn(this, (CropperDrawingMode.__proto__ || Object.getPrototypeOf(CropperDrawingMode)).call(this, _consts.drawingModes.CROPPER)); - } + var fabric = global.fabric, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * start this drawing mode - * @param {Graphics} graphics - Graphics instance - * @override + * Color Blend filter class + * @class fabric.Image.filter.BlendColor + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @example + * var filter = new fabric.Image.filters.BlendColor({ + * color: '#000', + * mode: 'multiply' + * }); + * + * var filter = new fabric.Image.filters.BlendImage({ + * image: fabricImageObject, + * mode: 'multiply', + * alpha: 0.5 + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); */ + filters.BlendColor = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Blend.prototype */ { + type: 'BlendColor', + + /** + * Color to make the blend operation with. default to a reddish color since black or white + * gives always strong result. + **/ + color: '#F95C63', + + /** + * Blend mode for the filter: one of multiply, add, diff, screen, subtract, + * darken, lighten, overlay, exclusion, tint. + **/ + mode: 'multiply', + + /** + * alpha value. represent the strength of the blend color operation. + **/ + alpha: 1, + + /** + * Fragment source for the Multiply program + */ + fragmentSource: { + multiply: 'gl_FragColor.rgb *= uColor.rgb;\n', + screen: 'gl_FragColor.rgb = 1.0 - (1.0 - gl_FragColor.rgb) * (1.0 - uColor.rgb);\n', + add: 'gl_FragColor.rgb += uColor.rgb;\n', + diff: 'gl_FragColor.rgb = abs(gl_FragColor.rgb - uColor.rgb);\n', + subtract: 'gl_FragColor.rgb -= uColor.rgb;\n', + lighten: 'gl_FragColor.rgb = max(gl_FragColor.rgb, uColor.rgb);\n', + darken: 'gl_FragColor.rgb = min(gl_FragColor.rgb, uColor.rgb);\n', + exclusion: 'gl_FragColor.rgb += uColor.rgb - 2.0 * (uColor.rgb * gl_FragColor.rgb);\n', + overlay: 'if (uColor.r < 0.5) {\n' + + 'gl_FragColor.r *= 2.0 * uColor.r;\n' + + '} else {\n' + + 'gl_FragColor.r = 1.0 - 2.0 * (1.0 - gl_FragColor.r) * (1.0 - uColor.r);\n' + + '}\n' + + 'if (uColor.g < 0.5) {\n' + + 'gl_FragColor.g *= 2.0 * uColor.g;\n' + + '} else {\n' + + 'gl_FragColor.g = 1.0 - 2.0 * (1.0 - gl_FragColor.g) * (1.0 - uColor.g);\n' + + '}\n' + + 'if (uColor.b < 0.5) {\n' + + 'gl_FragColor.b *= 2.0 * uColor.b;\n' + + '} else {\n' + + 'gl_FragColor.b = 1.0 - 2.0 * (1.0 - gl_FragColor.b) * (1.0 - uColor.b);\n' + + '}\n', + tint: 'gl_FragColor.rgb *= (1.0 - uColor.a);\n' + + 'gl_FragColor.rgb += uColor.rgb;\n', + }, - _createClass(CropperDrawingMode, [{ - key: 'start', - value: function start(graphics) { - var cropper = graphics.getComponent(_consts.componentNames.CROPPER); - cropper.start(); - } + /** + * build the fragment source for the filters, joining the common part with + * the specific one. + * @param {String} mode the mode of the filter, a key of this.fragmentSource + * @return {String} the source to be compiled + * @private + */ + buildSource: function(mode) { + return 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform vec4 uColor;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'gl_FragColor = color;\n' + + 'if (color.a > 0.0) {\n' + + this.fragmentSource[mode] + + '}\n' + + '}'; + }, /** - * stop this drawing mode - * @param {Graphics} graphics - Graphics instance - * @override + * Retrieves the cached shader. + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. */ + retrieveShader: function(options) { + var cacheKey = this.type + '_' + this.mode, shaderSource; + if (!options.programCache.hasOwnProperty(cacheKey)) { + shaderSource = this.buildSource(this.mode); + options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); + } + return options.programCache[cacheKey]; + }, - }, { - key: 'end', - value: function end(graphics) { - var cropper = graphics.getComponent(_consts.componentNames.CROPPER); - cropper.end(); - } - }]); - - return CropperDrawingMode; -}(_drawingMode2.default); - -exports.default = CropperDrawingMode; - -/***/ }), + /** + * Apply the Blend operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + data = imageData.data, iLen = data.length, + tr, tg, tb, + r, g, b, + source, alpha1 = 1 - this.alpha; + + source = new fabric.Color(this.color).getSource(); + tr = source[0] * this.alpha; + tg = source[1] * this.alpha; + tb = source[2] * this.alpha; + + for (var i = 0; i < iLen; i += 4) { + + r = data[i]; + g = data[i + 1]; + b = data[i + 2]; + + switch (this.mode) { + case 'multiply': + data[i] = r * tr / 255; + data[i + 1] = g * tg / 255; + data[i + 2] = b * tb / 255; + break; + case 'screen': + data[i] = 255 - (255 - r) * (255 - tr) / 255; + data[i + 1] = 255 - (255 - g) * (255 - tg) / 255; + data[i + 2] = 255 - (255 - b) * (255 - tb) / 255; + break; + case 'add': + data[i] = r + tr; + data[i + 1] = g + tg; + data[i + 2] = b + tb; + break; + case 'diff': + case 'difference': + data[i] = Math.abs(r - tr); + data[i + 1] = Math.abs(g - tg); + data[i + 2] = Math.abs(b - tb); + break; + case 'subtract': + data[i] = r - tr; + data[i + 1] = g - tg; + data[i + 2] = b - tb; + break; + case 'darken': + data[i] = Math.min(r, tr); + data[i + 1] = Math.min(g, tg); + data[i + 2] = Math.min(b, tb); + break; + case 'lighten': + data[i] = Math.max(r, tr); + data[i + 1] = Math.max(g, tg); + data[i + 2] = Math.max(b, tb); + break; + case 'overlay': + data[i] = tr < 128 ? (2 * r * tr / 255) : (255 - 2 * (255 - r) * (255 - tr) / 255); + data[i + 1] = tg < 128 ? (2 * g * tg / 255) : (255 - 2 * (255 - g) * (255 - tg) / 255); + data[i + 2] = tb < 128 ? (2 * b * tb / 255) : (255 - 2 * (255 - b) * (255 - tb) / 255); + break; + case 'exclusion': + data[i] = tr + r - ((2 * tr * r) / 255); + data[i + 1] = tg + g - ((2 * tg * g) / 255); + data[i + 2] = tb + b - ((2 * tb * b) / 255); + break; + case 'tint': + data[i] = tr + r * alpha1; + data[i + 1] = tg + g * alpha1; + data[i + 2] = tb + b * alpha1; + } + } + }, -/***/ "./src/js/drawingMode/freeDrawing.js": -/*!*******************************************!*\ - !*** ./src/js/drawingMode/freeDrawing.js ***! - \*******************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uColor: gl.getUniformLocation(program, 'uColor'), + }; + }, -"use strict"; + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + var source = new fabric.Color(this.color).getSource(); + source[0] = this.alpha * source[0] / 255; + source[1] = this.alpha * source[1] / 255; + source[2] = this.alpha * source[2] / 255; + source[3] = this.alpha; + gl.uniform4fv(uniformLocations.uColor, source); + }, + /** + * Returns object representation of an instance + * @return {Object} Object representation of an instance + */ + toObject: function() { + return { + type: this.type, + color: this.color, + mode: this.mode, + alpha: this.alpha + }; + } + }); -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.BlendColor} Instance of fabric.Image.filters.BlendColor + */ + fabric.Image.filters.BlendColor.fromObject = fabric.Image.filters.BaseFilter.fromObject; -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); +})( true ? exports : 0); -var _drawingMode = __webpack_require__(/*! @/interface/drawingMode */ "./src/js/interface/drawingMode.js"); -var _drawingMode2 = _interopRequireDefault(_drawingMode); +(function(global) { + 'use strict'; -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + var fabric = global.fabric, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Image Blend filter class + * @class fabric.Image.filter.BlendImage + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @example + * var filter = new fabric.Image.filters.BlendColor({ + * color: '#000', + * mode: 'multiply' + * }); + * + * var filter = new fabric.Image.filters.BlendImage({ + * image: fabricImageObject, + * mode: 'multiply', + * alpha: 0.5 + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); + */ -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + filters.BlendImage = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.BlendImage.prototype */ { + type: 'BlendImage', + + /** + * Color to make the blend operation with. default to a reddish color since black or white + * gives always strong result. + **/ + image: null, + + /** + * Blend mode for the filter: one of multiply, add, diff, screen, subtract, + * darken, lighten, overlay, exclusion, tint. + **/ + mode: 'multiply', + + /** + * alpha value. represent the strength of the blend image operation. + * not implemented. + **/ + alpha: 1, + + vertexSource: 'attribute vec2 aPosition;\n' + + 'varying vec2 vTexCoord;\n' + + 'varying vec2 vTexCoord2;\n' + + 'uniform mat3 uTransformMatrix;\n' + + 'void main() {\n' + + 'vTexCoord = aPosition;\n' + + 'vTexCoord2 = (uTransformMatrix * vec3(aPosition, 1.0)).xy;\n' + + 'gl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n' + + '}', + + /** + * Fragment source for the Multiply program + */ + fragmentSource: { + multiply: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform sampler2D uImage;\n' + + 'uniform vec4 uColor;\n' + + 'varying vec2 vTexCoord;\n' + + 'varying vec2 vTexCoord2;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'vec4 color2 = texture2D(uImage, vTexCoord2);\n' + + 'color.rgba *= color2.rgba;\n' + + 'gl_FragColor = color;\n' + + '}', + mask: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform sampler2D uImage;\n' + + 'uniform vec4 uColor;\n' + + 'varying vec2 vTexCoord;\n' + + 'varying vec2 vTexCoord2;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'vec4 color2 = texture2D(uImage, vTexCoord2);\n' + + 'color.a = color2.a;\n' + + 'gl_FragColor = color;\n' + + '}', + }, -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } - -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** - * @author NHN. FE Development Team - * @fileoverview FreeDrawingMode class - */ - - -/** - * FreeDrawingMode class - * @class - * @ignore - */ -var FreeDrawingMode = function (_DrawingMode) { - _inherits(FreeDrawingMode, _DrawingMode); + /** + * Retrieves the cached shader. + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + retrieveShader: function(options) { + var cacheKey = this.type + '_' + this.mode; + var shaderSource = this.fragmentSource[this.mode]; + if (!options.programCache.hasOwnProperty(cacheKey)) { + options.programCache[cacheKey] = this.createProgram(options.context, shaderSource); + } + return options.programCache[cacheKey]; + }, - function FreeDrawingMode() { - _classCallCheck(this, FreeDrawingMode); + applyToWebGL: function(options) { + // load texture to blend. + var gl = options.context, + texture = this.createTexture(options.filterBackend, this.image); + this.bindAdditionalTexture(gl, texture, gl.TEXTURE1); + this.callSuper('applyToWebGL', options); + this.unbindAdditionalTexture(gl, gl.TEXTURE1); + }, - return _possibleConstructorReturn(this, (FreeDrawingMode.__proto__ || Object.getPrototypeOf(FreeDrawingMode)).call(this, _consts.drawingModes.FREE_DRAWING)); - } + createTexture: function(backend, image) { + return backend.getCachedTexture(image.cacheKey, image._element); + }, - /** - * start this drawing mode - * @param {Graphics} graphics - Graphics instance - * @param {{width: ?number, color: ?string}} [options] - Brush width & color - * @override - */ + /** + * Calculate a transformMatrix to adapt the image to blend over + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + calculateMatrix: function() { + var image = this.image, + width = image._element.width, + height = image._element.height; + return [ + 1 / image.scaleX, 0, 0, + 0, 1 / image.scaleY, 0, + -image.left / width, -image.top / height, 1 + ]; + }, + /** + * Apply the Blend operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, + resources = options.filterBackend.resources, + data = imageData.data, iLen = data.length, + width = imageData.width, + height = imageData.height, + tr, tg, tb, ta, + r, g, b, a, + canvas1, context, image = this.image, blendData; + + if (!resources.blendImage) { + resources.blendImage = fabric.util.createCanvasElement(); + } + canvas1 = resources.blendImage; + context = canvas1.getContext('2d'); + if (canvas1.width !== width || canvas1.height !== height) { + canvas1.width = width; + canvas1.height = height; + } + else { + context.clearRect(0, 0, width, height); + } + context.setTransform(image.scaleX, 0, 0, image.scaleY, image.left, image.top); + context.drawImage(image._element, 0, 0, width, height); + blendData = context.getImageData(0, 0, width, height).data; + for (var i = 0; i < iLen; i += 4) { + + r = data[i]; + g = data[i + 1]; + b = data[i + 2]; + a = data[i + 3]; + + tr = blendData[i]; + tg = blendData[i + 1]; + tb = blendData[i + 2]; + ta = blendData[i + 3]; + + switch (this.mode) { + case 'multiply': + data[i] = r * tr / 255; + data[i + 1] = g * tg / 255; + data[i + 2] = b * tb / 255; + data[i + 3] = a * ta / 255; + break; + case 'mask': + data[i + 3] = ta; + break; + } + } + }, - _createClass(FreeDrawingMode, [{ - key: 'start', - value: function start(graphics, options) { - var freeDrawing = graphics.getComponent(_consts.componentNames.FREE_DRAWING); - freeDrawing.start(options); - } + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uTransformMatrix: gl.getUniformLocation(program, 'uTransformMatrix'), + uImage: gl.getUniformLocation(program, 'uImage'), + }; + }, /** - * stop this drawing mode - * @param {Graphics} graphics - Graphics instance - * @override + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ + sendUniformData: function(gl, uniformLocations) { + var matrix = this.calculateMatrix(); + gl.uniform1i(uniformLocations.uImage, 1); // texture unit 1. + gl.uniformMatrix3fv(uniformLocations.uTransformMatrix, false, matrix); + }, - }, { - key: 'end', - value: function end(graphics) { - var freeDrawing = graphics.getComponent(_consts.componentNames.FREE_DRAWING); - freeDrawing.end(); + /** + * Returns object representation of an instance + * @return {Object} Object representation of an instance + */ + toObject: function() { + return { + type: this.type, + image: this.image && this.image.toObject(), + mode: this.mode, + alpha: this.alpha + }; } - }]); + }); - return FreeDrawingMode; -}(_drawingMode2.default); + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {function} callback to be invoked after filter creation + * @return {fabric.Image.filters.BlendImage} Instance of fabric.Image.filters.BlendImage + */ + fabric.Image.filters.BlendImage.fromObject = function(object, callback) { + fabric.Image.fromObject(object.image, function(image) { + var options = fabric.util.object.clone(object); + options.image = image; + callback(new fabric.Image.filters.BlendImage(options)); + }); + }; -exports.default = FreeDrawingMode; +})( true ? exports : 0); -/***/ }), -/***/ "./src/js/drawingMode/icon.js": -/*!************************************!*\ - !*** ./src/js/drawingMode/icon.js ***! - \************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +(function(global) { -"use strict"; + 'use strict'; + var fabric = global.fabric || (global.fabric = { }), pow = Math.pow, floor = Math.floor, + sqrt = Math.sqrt, abs = Math.abs, round = Math.round, sin = Math.sin, + ceil = Math.ceil, + filters = fabric.Image.filters, + createClass = fabric.util.createClass; -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * Resize image filter class + * @class fabric.Image.filters.Resize + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Resize(); + * object.filters.push(filter); + * object.applyFilters(canvas.renderAll.bind(canvas)); + */ + filters.Resize = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Resize.prototype */ { -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Resize', -var _drawingMode = __webpack_require__(/*! @/interface/drawingMode */ "./src/js/interface/drawingMode.js"); + /** + * Resize type + * for webgl resizeType is just lanczos, for canvas2d can be: + * bilinear, hermite, sliceHack, lanczos. + * @param {String} resizeType + * @default + */ + resizeType: 'hermite', -var _drawingMode2 = _interopRequireDefault(_drawingMode); + /** + * Scale factor for resizing, x axis + * @param {Number} scaleX + * @default + */ + scaleX: 1, -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + /** + * Scale factor for resizing, y axis + * @param {Number} scaleY + * @default + */ + scaleY: 1, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * LanczosLobes parameter for lanczos filter, valid for resizeType lanczos + * @param {Number} lanczosLobes + * @default + */ + lanczosLobes: 3, -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uDelta: gl.getUniformLocation(program, 'uDelta'), + uTaps: gl.getUniformLocation(program, 'uTaps'), + }; + }, -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** - * @author NHN. FE Development Team - * @fileoverview IconDrawingMode class - */ + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform2fv(uniformLocations.uDelta, this.horizontal ? [1 / this.width, 0] : [0, 1 / this.height]); + gl.uniform1fv(uniformLocations.uTaps, this.taps); + }, + /** + * Retrieves the cached shader. + * @param {Object} options + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + retrieveShader: function(options) { + var filterWindow = this.getFilterWindow(), cacheKey = this.type + '_' + filterWindow; + if (!options.programCache.hasOwnProperty(cacheKey)) { + var fragmentShader = this.generateShader(filterWindow); + options.programCache[cacheKey] = this.createProgram(options.context, fragmentShader); + } + return options.programCache[cacheKey]; + }, -/** - * IconDrawingMode class - * @class - * @ignore - */ -var IconDrawingMode = function (_DrawingMode) { - _inherits(IconDrawingMode, _DrawingMode); + getFilterWindow: function() { + var scale = this.tempScale; + return Math.ceil(this.lanczosLobes / scale); + }, - function IconDrawingMode() { - _classCallCheck(this, IconDrawingMode); + getTaps: function() { + var lobeFunction = this.lanczosCreate(this.lanczosLobes), scale = this.tempScale, + filterWindow = this.getFilterWindow(), taps = new Array(filterWindow); + for (var i = 1; i <= filterWindow; i++) { + taps[i - 1] = lobeFunction(i * scale); + } + return taps; + }, - return _possibleConstructorReturn(this, (IconDrawingMode.__proto__ || Object.getPrototypeOf(IconDrawingMode)).call(this, _consts.drawingModes.ICON)); - } + /** + * Generate vertex and shader sources from the necessary steps numbers + * @param {Number} filterWindow + */ + generateShader: function(filterWindow) { + var offsets = new Array(filterWindow), + fragmentShader = this.fragmentSourceTOP, filterWindow; - /** - * start this drawing mode - * @param {Graphics} graphics - Graphics instance - * @override - */ + for (var i = 1; i <= filterWindow; i++) { + offsets[i - 1] = i + '.0 * uDelta'; + } + fragmentShader += 'uniform float uTaps[' + filterWindow + '];\n'; + fragmentShader += 'void main() {\n'; + fragmentShader += ' vec4 color = texture2D(uTexture, vTexCoord);\n'; + fragmentShader += ' float sum = 1.0;\n'; - _createClass(IconDrawingMode, [{ - key: 'start', - value: function start(graphics) { - var icon = graphics.getComponent(_consts.componentNames.ICON); - icon.start(); - } + offsets.forEach(function(offset, i) { + fragmentShader += ' color += texture2D(uTexture, vTexCoord + ' + offset + ') * uTaps[' + i + '];\n'; + fragmentShader += ' color += texture2D(uTexture, vTexCoord - ' + offset + ') * uTaps[' + i + '];\n'; + fragmentShader += ' sum += 2.0 * uTaps[' + i + '];\n'; + }); + fragmentShader += ' gl_FragColor = color / sum;\n'; + fragmentShader += '}'; + return fragmentShader; + }, + + fragmentSourceTOP: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform vec2 uDelta;\n' + + 'varying vec2 vTexCoord;\n', /** - * stop this drawing mode - * @param {Graphics} graphics - Graphics instance - * @override - */ + * Apply the resize filter to the image + * Determines whether to use WebGL or Canvas2D based on the options.webgl flag. + * + * @param {Object} options + * @param {Number} options.passes The number of filters remaining to be executed + * @param {Boolean} options.webgl Whether to use webgl to render the filter. + * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered. + * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn. + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + applyTo: function(options) { + if (options.webgl) { + options.passes++; + this.width = options.sourceWidth; + this.horizontal = true; + this.dW = Math.round(this.width * this.scaleX); + this.dH = options.sourceHeight; + this.tempScale = this.dW / this.width; + this.taps = this.getTaps(); + options.destinationWidth = this.dW; + this._setupFrameBuffer(options); + this.applyToWebGL(options); + this._swapTextures(options); + options.sourceWidth = options.destinationWidth; + + this.height = options.sourceHeight; + this.horizontal = false; + this.dH = Math.round(this.height * this.scaleY); + this.tempScale = this.dH / this.height; + this.taps = this.getTaps(); + options.destinationHeight = this.dH; + this._setupFrameBuffer(options); + this.applyToWebGL(options); + this._swapTextures(options); + options.sourceHeight = options.destinationHeight; + } + else { + this.applyTo2d(options); + } + }, - }, { - key: 'end', - value: function end(graphics) { - var icon = graphics.getComponent(_consts.componentNames.ICON); - icon.end(); - } - }]); + isNeutralState: function() { + return this.scaleX === 1 && this.scaleY === 1; + }, - return IconDrawingMode; -}(_drawingMode2.default); + lanczosCreate: function(lobes) { + return function(x) { + if (x >= lobes || x <= -lobes) { + return 0.0; + } + if (x < 1.19209290E-07 && x > -1.19209290E-07) { + return 1.0; + } + x *= Math.PI; + var xx = x / lobes; + return (sin(x) / x) * sin(xx) / xx; + }; + }, -exports.default = IconDrawingMode; + /** + * Applies filter to canvas element + * @memberOf fabric.Image.filters.Resize.prototype + * @param {Object} canvasEl Canvas element to apply filter to + * @param {Number} scaleX + * @param {Number} scaleY + */ + applyTo2d: function(options) { + var imageData = options.imageData, + scaleX = this.scaleX, + scaleY = this.scaleY; -/***/ }), + this.rcpScaleX = 1 / scaleX; + this.rcpScaleY = 1 / scaleY; -/***/ "./src/js/drawingMode/lineDrawing.js": -/*!*******************************************!*\ - !*** ./src/js/drawingMode/lineDrawing.js ***! - \*******************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + var oW = imageData.width, oH = imageData.height, + dW = round(oW * scaleX), dH = round(oH * scaleY), + newData; -"use strict"; + if (this.resizeType === 'sliceHack') { + newData = this.sliceByTwo(options, oW, oH, dW, dH); + } + else if (this.resizeType === 'hermite') { + newData = this.hermiteFastResize(options, oW, oH, dW, dH); + } + else if (this.resizeType === 'bilinear') { + newData = this.bilinearFiltering(options, oW, oH, dW, dH); + } + else if (this.resizeType === 'lanczos') { + newData = this.lanczosResize(options, oW, oH, dW, dH); + } + options.imageData = newData; + }, + /** + * Filter sliceByTwo + * @param {Object} canvasEl Canvas element to apply filter to + * @param {Number} oW Original Width + * @param {Number} oH Original Height + * @param {Number} dW Destination Width + * @param {Number} dH Destination Height + * @returns {ImageData} + */ + sliceByTwo: function(options, oW, oH, dW, dH) { + var imageData = options.imageData, + mult = 0.5, doneW = false, doneH = false, stepW = oW * mult, + stepH = oH * mult, resources = fabric.filterBackend.resources, + tmpCanvas, ctx, sX = 0, sY = 0, dX = oW, dY = 0; + if (!resources.sliceByTwo) { + resources.sliceByTwo = document.createElement('canvas'); + } + tmpCanvas = resources.sliceByTwo; + if (tmpCanvas.width < oW * 1.5 || tmpCanvas.height < oH) { + tmpCanvas.width = oW * 1.5; + tmpCanvas.height = oH; + } + ctx = tmpCanvas.getContext('2d'); + ctx.clearRect(0, 0, oW * 1.5, oH); + ctx.putImageData(imageData, 0, 0); + + dW = floor(dW); + dH = floor(dH); + + while (!doneW || !doneH) { + oW = stepW; + oH = stepH; + if (dW < floor(stepW * mult)) { + stepW = floor(stepW * mult); + } + else { + stepW = dW; + doneW = true; + } + if (dH < floor(stepH * mult)) { + stepH = floor(stepH * mult); + } + else { + stepH = dH; + doneH = true; + } + ctx.drawImage(tmpCanvas, sX, sY, oW, oH, dX, dY, stepW, stepH); + sX = dX; + sY = dY; + dY += stepH; + } + return ctx.getImageData(sX, sY, dW, dH); + }, -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * Filter lanczosResize + * @param {Object} canvasEl Canvas element to apply filter to + * @param {Number} oW Original Width + * @param {Number} oH Original Height + * @param {Number} dW Destination Width + * @param {Number} dH Destination Height + * @returns {ImageData} + */ + lanczosResize: function(options, oW, oH, dW, dH) { + + function process(u) { + var v, i, weight, idx, a, red, green, + blue, alpha, fX, fY; + center.x = (u + 0.5) * ratioX; + icenter.x = floor(center.x); + for (v = 0; v < dH; v++) { + center.y = (v + 0.5) * ratioY; + icenter.y = floor(center.y); + a = 0; red = 0; green = 0; blue = 0; alpha = 0; + for (i = icenter.x - range2X; i <= icenter.x + range2X; i++) { + if (i < 0 || i >= oW) { + continue; + } + fX = floor(1000 * abs(i - center.x)); + if (!cacheLanc[fX]) { + cacheLanc[fX] = { }; + } + for (var j = icenter.y - range2Y; j <= icenter.y + range2Y; j++) { + if (j < 0 || j >= oH) { + continue; + } + fY = floor(1000 * abs(j - center.y)); + if (!cacheLanc[fX][fY]) { + cacheLanc[fX][fY] = lanczos(sqrt(pow(fX * rcpRatioX, 2) + pow(fY * rcpRatioY, 2)) / 1000); + } + weight = cacheLanc[fX][fY]; + if (weight > 0) { + idx = (j * oW + i) * 4; + a += weight; + red += weight * srcData[idx]; + green += weight * srcData[idx + 1]; + blue += weight * srcData[idx + 2]; + alpha += weight * srcData[idx + 3]; + } + } + } + idx = (v * dW + u) * 4; + destData[idx] = red / a; + destData[idx + 1] = green / a; + destData[idx + 2] = blue / a; + destData[idx + 3] = alpha / a; + } -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + if (++u < dW) { + return process(u); + } + else { + return destImg; + } + } -var _drawingMode = __webpack_require__(/*! @/interface/drawingMode */ "./src/js/interface/drawingMode.js"); + var srcData = options.imageData.data, + destImg = options.ctx.createImageData(dW, dH), + destData = destImg.data, + lanczos = this.lanczosCreate(this.lanczosLobes), + ratioX = this.rcpScaleX, ratioY = this.rcpScaleY, + rcpRatioX = 2 / this.rcpScaleX, rcpRatioY = 2 / this.rcpScaleY, + range2X = ceil(ratioX * this.lanczosLobes / 2), + range2Y = ceil(ratioY * this.lanczosLobes / 2), + cacheLanc = { }, center = { }, icenter = { }; -var _drawingMode2 = _interopRequireDefault(_drawingMode); + return process(0); + }, -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + /** + * bilinearFiltering + * @param {Object} canvasEl Canvas element to apply filter to + * @param {Number} oW Original Width + * @param {Number} oH Original Height + * @param {Number} dW Destination Width + * @param {Number} dH Destination Height + * @returns {ImageData} + */ + bilinearFiltering: function(options, oW, oH, dW, dH) { + var a, b, c, d, x, y, i, j, xDiff, yDiff, chnl, + color, offset = 0, origPix, ratioX = this.rcpScaleX, + ratioY = this.rcpScaleY, + w4 = 4 * (oW - 1), img = options.imageData, + pixels = img.data, destImage = options.ctx.createImageData(dW, dH), + destPixels = destImage.data; + for (i = 0; i < dH; i++) { + for (j = 0; j < dW; j++) { + x = floor(ratioX * j); + y = floor(ratioY * i); + xDiff = ratioX * j - x; + yDiff = ratioY * i - y; + origPix = 4 * (y * oW + x); + + for (chnl = 0; chnl < 4; chnl++) { + a = pixels[origPix + chnl]; + b = pixels[origPix + 4 + chnl]; + c = pixels[origPix + w4 + chnl]; + d = pixels[origPix + w4 + 4 + chnl]; + color = a * (1 - xDiff) * (1 - yDiff) + b * xDiff * (1 - yDiff) + + c * yDiff * (1 - xDiff) + d * xDiff * yDiff; + destPixels[offset++] = color; + } + } + } + return destImage; + }, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * hermiteFastResize + * @param {Object} canvasEl Canvas element to apply filter to + * @param {Number} oW Original Width + * @param {Number} oH Original Height + * @param {Number} dW Destination Width + * @param {Number} dH Destination Height + * @returns {ImageData} + */ + hermiteFastResize: function(options, oW, oH, dW, dH) { + var ratioW = this.rcpScaleX, ratioH = this.rcpScaleY, + ratioWHalf = ceil(ratioW / 2), + ratioHHalf = ceil(ratioH / 2), + img = options.imageData, data = img.data, + img2 = options.ctx.createImageData(dW, dH), data2 = img2.data; + for (var j = 0; j < dH; j++) { + for (var i = 0; i < dW; i++) { + var x2 = (i + j * dW) * 4, weight = 0, weights = 0, weightsAlpha = 0, + gxR = 0, gxG = 0, gxB = 0, gxA = 0, centerY = (j + 0.5) * ratioH; + for (var yy = floor(j * ratioH); yy < (j + 1) * ratioH; yy++) { + var dy = abs(centerY - (yy + 0.5)) / ratioHHalf, + centerX = (i + 0.5) * ratioW, w0 = dy * dy; + for (var xx = floor(i * ratioW); xx < (i + 1) * ratioW; xx++) { + var dx = abs(centerX - (xx + 0.5)) / ratioWHalf, + w = sqrt(w0 + dx * dx); + /* eslint-disable max-depth */ + if (w > 1 && w < -1) { + continue; + } + //hermite filter + weight = 2 * w * w * w - 3 * w * w + 1; + if (weight > 0) { + dx = 4 * (xx + yy * oW); + //alpha + gxA += weight * data[dx + 3]; + weightsAlpha += weight; + //colors + if (data[dx + 3] < 255) { + weight = weight * data[dx + 3] / 250; + } + gxR += weight * data[dx]; + gxG += weight * data[dx + 1]; + gxB += weight * data[dx + 2]; + weights += weight; + } + /* eslint-enable max-depth */ + } + } + data2[x2] = gxR / weights; + data2[x2 + 1] = gxG / weights; + data2[x2 + 2] = gxB / weights; + data2[x2 + 3] = gxA / weightsAlpha; + } + } + return img2; + }, -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + /** + * Returns object representation of an instance + * @return {Object} Object representation of an instance + */ + toObject: function() { + return { + type: this.type, + scaleX: this.scaleX, + scaleY: this.scaleY, + resizeType: this.resizeType, + lanczosLobes: this.lanczosLobes + }; + } + }); -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {Function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.Resize} Instance of fabric.Image.filters.Resize + */ + fabric.Image.filters.Resize.fromObject = fabric.Image.filters.BaseFilter.fromObject; -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** - * @author NHN. FE Development Team - * @fileoverview LineDrawingMode class - */ +})( true ? exports : 0); -/** - * LineDrawingMode class - * @class - * @ignore - */ -var LineDrawingMode = function (_DrawingMode) { - _inherits(LineDrawingMode, _DrawingMode); +(function(global) { - function LineDrawingMode() { - _classCallCheck(this, LineDrawingMode); + 'use strict'; - return _possibleConstructorReturn(this, (LineDrawingMode.__proto__ || Object.getPrototypeOf(LineDrawingMode)).call(this, _consts.drawingModes.LINE_DRAWING)); - } + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * start this drawing mode - * @param {Graphics} graphics - Graphics instance - * @param {{width: ?number, color: ?string}} [options] - Brush width & color - * @override + * Contrast filter class + * @class fabric.Image.filters.Contrast + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Contrast#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Contrast({ + * contrast: 0.25 + * }); + * object.filters.push(filter); + * object.applyFilters(); */ + filters.Contrast = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Contrast.prototype */ { + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Contrast', - _createClass(LineDrawingMode, [{ - key: 'start', - value: function start(graphics, options) { - var lineDrawing = graphics.getComponent(_consts.componentNames.LINE); - lineDrawing.start(options); - } + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uContrast;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'float contrastF = 1.015 * (uContrast + 1.0) / (1.0 * (1.015 - uContrast));\n' + + 'color.rgb = contrastF * (color.rgb - 0.5) + 0.5;\n' + + 'gl_FragColor = color;\n' + + '}', /** - * stop this drawing mode - * @param {Graphics} graphics - Graphics instance - * @override + * contrast value, range from -1 to 1. + * @param {Number} contrast + * @default 0 */ + contrast: 0, - }, { - key: 'end', - value: function end(graphics) { - var lineDrawing = graphics.getComponent(_consts.componentNames.LINE); - lineDrawing.end(); - } - }]); + mainParameter: 'contrast', - return LineDrawingMode; -}(_drawingMode2.default); + /** + * Constructor + * @memberOf fabric.Image.filters.Contrast.prototype + * @param {Object} [options] Options object + * @param {Number} [options.contrast=0] Value to contrast the image up (-1...1) + */ -exports.default = LineDrawingMode; + /** + * Apply the Contrast operation to a Uint8Array representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8Array to be filtered. + */ + applyTo2d: function(options) { + if (this.contrast === 0) { + return; + } + var imageData = options.imageData, i, len, + data = imageData.data, len = data.length, + contrast = Math.floor(this.contrast * 255), + contrastF = 259 * (contrast + 255) / (255 * (259 - contrast)); -/***/ }), + for (i = 0; i < len; i += 4) { + data[i] = contrastF * (data[i] - 128) + 128; + data[i + 1] = contrastF * (data[i + 1] - 128) + 128; + data[i + 2] = contrastF * (data[i + 2] - 128) + 128; + } + }, -/***/ "./src/js/drawingMode/resize.js": -/*!**************************************!*\ - !*** ./src/js/drawingMode/resize.js ***! - \**************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uContrast: gl.getUniformLocation(program, 'uContrast'), + }; + }, -"use strict"; + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uContrast, this.contrast); + }, + }); + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.Contrast} Instance of fabric.Image.filters.Contrast + */ + fabric.Image.filters.Contrast.fromObject = fabric.Image.filters.BaseFilter.fromObject; -Object.defineProperty(exports, "__esModule", { - value: true -}); +})( true ? exports : 0); -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); -var _drawingMode = __webpack_require__(/*! @/interface/drawingMode */ "./src/js/interface/drawingMode.js"); +(function(global) { -var _drawingMode2 = _interopRequireDefault(_drawingMode); + 'use strict'; -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Saturate filter class + * @class fabric.Image.filters.Saturation + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Saturation#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Saturation({ + * saturation: 1 + * }); + * object.filters.push(filter); + * object.applyFilters(); + */ + filters.Saturation = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Saturation.prototype */ { -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Saturation', -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uSaturation;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'float rgMax = max(color.r, color.g);\n' + + 'float rgbMax = max(rgMax, color.b);\n' + + 'color.r += rgbMax != color.r ? (rgbMax - color.r) * uSaturation : 0.00;\n' + + 'color.g += rgbMax != color.g ? (rgbMax - color.g) * uSaturation : 0.00;\n' + + 'color.b += rgbMax != color.b ? (rgbMax - color.b) * uSaturation : 0.00;\n' + + 'gl_FragColor = color;\n' + + '}', -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + /** + * Saturation value, from -1 to 1. + * Increases/decreases the color saturation. + * A value of 0 has no effect. + * + * @param {Number} saturation + * @default + */ + saturation: 0, -/** - * ResizeDrawingMode class - * @class - * @ignore - */ -var ResizeDrawingMode = function (_DrawingMode) { - _inherits(ResizeDrawingMode, _DrawingMode); + mainParameter: 'saturation', - function ResizeDrawingMode() { - _classCallCheck(this, ResizeDrawingMode); - - return _possibleConstructorReturn(this, (ResizeDrawingMode.__proto__ || Object.getPrototypeOf(ResizeDrawingMode)).call(this, _consts.drawingModes.RESIZE)); - } + /** + * Constructor + * @memberOf fabric.Image.filters.Saturate.prototype + * @param {Object} [options] Options object + * @param {Number} [options.saturate=0] Value to saturate the image (-1...1) + */ - /** - * start this drawing mode - * @param {Graphics} graphics - Graphics instance - * @override - */ + /** + * Apply the Saturation operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + if (this.saturation === 0) { + return; + } + var imageData = options.imageData, + data = imageData.data, len = data.length, + adjust = -this.saturation, i, max; + for (i = 0; i < len; i += 4) { + max = Math.max(data[i], data[i + 1], data[i + 2]); + data[i] += max !== data[i] ? (max - data[i]) * adjust : 0; + data[i + 1] += max !== data[i + 1] ? (max - data[i + 1]) * adjust : 0; + data[i + 2] += max !== data[i + 2] ? (max - data[i + 2]) * adjust : 0; + } + }, - _createClass(ResizeDrawingMode, [{ - key: 'start', - value: function start(graphics) { - var resize = graphics.getComponent(_consts.componentNames.RESIZE); - resize.start(); - } + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uSaturation: gl.getUniformLocation(program, 'uSaturation'), + }; + }, /** - * stop this drawing mode - * @param {Graphics} graphics - Graphics instance - * @override + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uSaturation, -this.saturation); + }, + }); - }, { - key: 'end', - value: function end(graphics) { - var resize = graphics.getComponent(_consts.componentNames.RESIZE); - resize.end(); - } - }]); + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {Function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.Saturation} Instance of fabric.Image.filters.Saturate + */ + fabric.Image.filters.Saturation.fromObject = fabric.Image.filters.BaseFilter.fromObject; - return ResizeDrawingMode; -}(_drawingMode2.default); +})( true ? exports : 0); -exports.default = ResizeDrawingMode; -/***/ }), +(function(global) { -/***/ "./src/js/drawingMode/shape.js": -/*!*************************************!*\ - !*** ./src/js/drawingMode/shape.js ***! - \*************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + 'use strict'; -"use strict"; + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; + /** + * Vibrance filter class + * @class fabric.Image.filters.Vibrance + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Vibrance#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Vibrance({ + * vibrance: 1 + * }); + * object.filters.push(filter); + * object.applyFilters(); + */ + filters.Vibrance = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Vibrance.prototype */ { -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Vibrance', + + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform float uVibrance;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'float max = max(color.r, max(color.g, color.b));\n' + + 'float avg = (color.r + color.g + color.b) / 3.0;\n' + + 'float amt = (abs(max - avg) * 2.0) * uVibrance;\n' + + 'color.r += max != color.r ? (max - color.r) * amt : 0.00;\n' + + 'color.g += max != color.g ? (max - color.g) * amt : 0.00;\n' + + 'color.b += max != color.b ? (max - color.b) * amt : 0.00;\n' + + 'gl_FragColor = color;\n' + + '}', + + /** + * Vibrance value, from -1 to 1. + * Increases/decreases the saturation of more muted colors with less effect on saturated colors. + * A value of 0 has no effect. + * + * @param {Number} vibrance + * @default + */ + vibrance: 0, -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + mainParameter: 'vibrance', -var _drawingMode = __webpack_require__(/*! @/interface/drawingMode */ "./src/js/interface/drawingMode.js"); + /** + * Constructor + * @memberOf fabric.Image.filters.Vibrance.prototype + * @param {Object} [options] Options object + * @param {Number} [options.vibrance=0] Vibrance value for the image (between -1 and 1) + */ -var _drawingMode2 = _interopRequireDefault(_drawingMode); + /** + * Apply the Vibrance operation to a Uint8ClampedArray representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8ClampedArray to be filtered. + */ + applyTo2d: function(options) { + if (this.vibrance === 0) { + return; + } + var imageData = options.imageData, + data = imageData.data, len = data.length, + adjust = -this.vibrance, i, max, avg, amt; -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + for (i = 0; i < len; i += 4) { + max = Math.max(data[i], data[i + 1], data[i + 2]); + avg = (data[i] + data[i + 1] + data[i + 2]) / 3; + amt = ((Math.abs(max - avg) * 2 / 255) * adjust); + data[i] += max !== data[i] ? (max - data[i]) * amt : 0; + data[i + 1] += max !== data[i + 1] ? (max - data[i + 1]) * amt : 0; + data[i + 2] += max !== data[i + 2] ? (max - data[i + 2]) * amt : 0; + } + }, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uVibrance: gl.getUniformLocation(program, 'uVibrance'), + }; + }, -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform1f(uniformLocations.uVibrance, -this.vibrance); + }, + }); -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {Function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.Vibrance} Instance of fabric.Image.filters.Vibrance + */ + fabric.Image.filters.Vibrance.fromObject = fabric.Image.filters.BaseFilter.fromObject; -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** - * @author NHN. FE Development Team - * @fileoverview ShapeDrawingMode class - */ +})( true ? exports : 0); -/** - * ShapeDrawingMode class - * @class - * @ignore - */ -var ShapeDrawingMode = function (_DrawingMode) { - _inherits(ShapeDrawingMode, _DrawingMode); +(function(global) { - function ShapeDrawingMode() { - _classCallCheck(this, ShapeDrawingMode); + 'use strict'; - return _possibleConstructorReturn(this, (ShapeDrawingMode.__proto__ || Object.getPrototypeOf(ShapeDrawingMode)).call(this, _consts.drawingModes.SHAPE)); - } + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * start this drawing mode - * @param {Graphics} graphics - Graphics instance - * @override + * Blur filter class + * @class fabric.Image.filters.Blur + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Blur#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Blur({ + * blur: 0.5 + * }); + * object.filters.push(filter); + * object.applyFilters(); + * canvas.renderAll(); */ + filters.Blur = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Blur.prototype */ { + + type: 'Blur', + + /* +'gl_FragColor = vec4(0.0);', +'gl_FragColor += texture2D(texture, vTexCoord + -7 * uDelta)*0.0044299121055113265;', +'gl_FragColor += texture2D(texture, vTexCoord + -6 * uDelta)*0.00895781211794;', +'gl_FragColor += texture2D(texture, vTexCoord + -5 * uDelta)*0.0215963866053;', +'gl_FragColor += texture2D(texture, vTexCoord + -4 * uDelta)*0.0443683338718;', +'gl_FragColor += texture2D(texture, vTexCoord + -3 * uDelta)*0.0776744219933;', +'gl_FragColor += texture2D(texture, vTexCoord + -2 * uDelta)*0.115876621105;', +'gl_FragColor += texture2D(texture, vTexCoord + -1 * uDelta)*0.147308056121;', +'gl_FragColor += texture2D(texture, vTexCoord )*0.159576912161;', +'gl_FragColor += texture2D(texture, vTexCoord + 1 * uDelta)*0.147308056121;', +'gl_FragColor += texture2D(texture, vTexCoord + 2 * uDelta)*0.115876621105;', +'gl_FragColor += texture2D(texture, vTexCoord + 3 * uDelta)*0.0776744219933;', +'gl_FragColor += texture2D(texture, vTexCoord + 4 * uDelta)*0.0443683338718;', +'gl_FragColor += texture2D(texture, vTexCoord + 5 * uDelta)*0.0215963866053;', +'gl_FragColor += texture2D(texture, vTexCoord + 6 * uDelta)*0.00895781211794;', +'gl_FragColor += texture2D(texture, vTexCoord + 7 * uDelta)*0.0044299121055113265;', +*/ + /* eslint-disable max-len */ + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform vec2 uDelta;\n' + + 'varying vec2 vTexCoord;\n' + + 'const float nSamples = 15.0;\n' + + 'vec3 v3offset = vec3(12.9898, 78.233, 151.7182);\n' + + 'float random(vec3 scale) {\n' + + /* use the fragment position for a different seed per-pixel */ + 'return fract(sin(dot(gl_FragCoord.xyz, scale)) * 43758.5453);\n' + + '}\n' + + 'void main() {\n' + + 'vec4 color = vec4(0.0);\n' + + 'float total = 0.0;\n' + + 'float offset = random(v3offset);\n' + + 'for (float t = -nSamples; t <= nSamples; t++) {\n' + + 'float percent = (t + offset - 0.5) / nSamples;\n' + + 'float weight = 1.0 - abs(percent);\n' + + 'color += texture2D(uTexture, vTexCoord + uDelta * percent) * weight;\n' + + 'total += weight;\n' + + '}\n' + + 'gl_FragColor = color / total;\n' + + '}', + /* eslint-enable max-len */ + + /** + * blur value, in percentage of image dimensions. + * specific to keep the image blur constant at different resolutions + * range between 0 and 1. + */ + blur: 0, + + mainParameter: 'blur', + + applyTo: function(options) { + if (options.webgl) { + // this aspectRatio is used to give the same blur to vertical and horizontal + this.aspectRatio = options.sourceWidth / options.sourceHeight; + options.passes++; + this._setupFrameBuffer(options); + this.horizontal = true; + this.applyToWebGL(options); + this._swapTextures(options); + this._setupFrameBuffer(options); + this.horizontal = false; + this.applyToWebGL(options); + this._swapTextures(options); + } + else { + this.applyTo2d(options); + } + }, - _createClass(ShapeDrawingMode, [{ - key: 'start', - value: function start(graphics) { - var shape = graphics.getComponent(_consts.componentNames.SHAPE); - shape.start(); - } + applyTo2d: function(options) { + // paint canvasEl with current image data. + //options.ctx.putImageData(options.imageData, 0, 0); + options.imageData = this.simpleBlur(options); + }, + + simpleBlur: function(options) { + var resources = options.filterBackend.resources, canvas1, canvas2, + width = options.imageData.width, + height = options.imageData.height; + + if (!resources.blurLayer1) { + resources.blurLayer1 = fabric.util.createCanvasElement(); + resources.blurLayer2 = fabric.util.createCanvasElement(); + } + canvas1 = resources.blurLayer1; + canvas2 = resources.blurLayer2; + if (canvas1.width !== width || canvas1.height !== height) { + canvas2.width = canvas1.width = width; + canvas2.height = canvas1.height = height; + } + var ctx1 = canvas1.getContext('2d'), + ctx2 = canvas2.getContext('2d'), + nSamples = 15, + random, percent, j, i, + blur = this.blur * 0.06 * 0.5; + + // load first canvas + ctx1.putImageData(options.imageData, 0, 0); + ctx2.clearRect(0, 0, width, height); + + for (i = -nSamples; i <= nSamples; i++) { + random = (Math.random() - 0.5) / 4; + percent = i / nSamples; + j = blur * percent * width + random; + ctx2.globalAlpha = 1 - Math.abs(percent); + ctx2.drawImage(canvas1, j, random); + ctx1.drawImage(canvas2, 0, 0); + ctx2.globalAlpha = 1; + ctx2.clearRect(0, 0, canvas2.width, canvas2.height); + } + for (i = -nSamples; i <= nSamples; i++) { + random = (Math.random() - 0.5) / 4; + percent = i / nSamples; + j = blur * percent * height + random; + ctx2.globalAlpha = 1 - Math.abs(percent); + ctx2.drawImage(canvas1, random, j); + ctx1.drawImage(canvas2, 0, 0); + ctx2.globalAlpha = 1; + ctx2.clearRect(0, 0, canvas2.width, canvas2.height); + } + options.ctx.drawImage(canvas1, 0, 0); + var newImageData = options.ctx.getImageData(0, 0, canvas1.width, canvas1.height); + ctx1.globalAlpha = 1; + ctx1.clearRect(0, 0, canvas1.width, canvas1.height); + return newImageData; + }, /** - * stop this drawing mode - * @param {Graphics} graphics - Graphics instance - * @override + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. */ + getUniformLocations: function(gl, program) { + return { + delta: gl.getUniformLocation(program, 'uDelta'), + }; + }, - }, { - key: 'end', - value: function end(graphics) { - var shape = graphics.getComponent(_consts.componentNames.SHAPE); - shape.end(); - } - }]); + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + var delta = this.chooseRightDelta(); + gl.uniform2fv(uniformLocations.delta, delta); + }, - return ShapeDrawingMode; -}(_drawingMode2.default); + /** + * choose right value of image percentage to blur with + * @returns {Array} a numeric array with delta values + */ + chooseRightDelta: function() { + var blurScale = 1, delta = [0, 0], blur; + if (this.horizontal) { + if (this.aspectRatio > 1) { + // image is wide, i want to shrink radius horizontal + blurScale = 1 / this.aspectRatio; + } + } + else { + if (this.aspectRatio < 1) { + // image is tall, i want to shrink radius vertical + blurScale = this.aspectRatio; + } + } + blur = blurScale * this.blur * 0.12; + if (this.horizontal) { + delta[0] = blur; + } + else { + delta[1] = blur; + } + return delta; + }, + }); -exports.default = ShapeDrawingMode; + /** + * Deserialize a JSON definition of a BlurFilter into a concrete instance. + */ + filters.Blur.fromObject = fabric.Image.filters.BaseFilter.fromObject; -/***/ }), +})( true ? exports : 0); -/***/ "./src/js/drawingMode/text.js": -/*!************************************!*\ - !*** ./src/js/drawingMode/text.js ***! - \************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { -"use strict"; +(function(global) { + 'use strict'; -Object.defineProperty(exports, "__esModule", { - value: true -}); + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + /** + * Gamma filter class + * @class fabric.Image.filters.Gamma + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.Gamma#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.Gamma({ + * gamma: [1, 0.5, 2.1] + * }); + * object.filters.push(filter); + * object.applyFilters(); + */ + filters.Gamma = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Gamma.prototype */ { -var _drawingMode = __webpack_require__(/*! @/interface/drawingMode */ "./src/js/interface/drawingMode.js"); + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Gamma', -var _drawingMode2 = _interopRequireDefault(_drawingMode); + fragmentSource: 'precision highp float;\n' + + 'uniform sampler2D uTexture;\n' + + 'uniform vec3 uGamma;\n' + + 'varying vec2 vTexCoord;\n' + + 'void main() {\n' + + 'vec4 color = texture2D(uTexture, vTexCoord);\n' + + 'vec3 correction = (1.0 / uGamma);\n' + + 'color.r = pow(color.r, correction.r);\n' + + 'color.g = pow(color.g, correction.g);\n' + + 'color.b = pow(color.b, correction.b);\n' + + 'gl_FragColor = color;\n' + + 'gl_FragColor.rgb *= color.a;\n' + + '}', -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + /** + * Gamma array value, from 0.01 to 2.2. + * @param {Array} gamma + * @default + */ + gamma: [1, 1, 1], -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Describe the property that is the filter parameter + * @param {String} m + * @default + */ + mainParameter: 'gamma', -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + /** + * Constructor + * @param {Object} [options] Options object + */ + initialize: function(options) { + this.gamma = [1, 1, 1]; + filters.BaseFilter.prototype.initialize.call(this, options); + }, -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + /** + * Apply the Gamma operation to a Uint8Array representing the pixels of an image. + * + * @param {Object} options + * @param {ImageData} options.imageData The Uint8Array to be filtered. + */ + applyTo2d: function(options) { + var imageData = options.imageData, data = imageData.data, + gamma = this.gamma, len = data.length, + rInv = 1 / gamma[0], gInv = 1 / gamma[1], + bInv = 1 / gamma[2], i; + + if (!this.rVals) { + // eslint-disable-next-line + this.rVals = new Uint8Array(256); + // eslint-disable-next-line + this.gVals = new Uint8Array(256); + // eslint-disable-next-line + this.bVals = new Uint8Array(256); + } + + // This is an optimization - pre-compute a look-up table for each color channel + // instead of performing these pow calls for each pixel in the image. + for (i = 0, len = 256; i < len; i++) { + this.rVals[i] = Math.pow(i / 255, rInv) * 255; + this.gVals[i] = Math.pow(i / 255, gInv) * 255; + this.bVals[i] = Math.pow(i / 255, bInv) * 255; + } + for (i = 0, len = data.length; i < len; i += 4) { + data[i] = this.rVals[data[i]]; + data[i + 1] = this.gVals[data[i + 1]]; + data[i + 2] = this.bVals[data[i + 2]]; + } + }, -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** - * @author NHN. FE Development Team - * @fileoverview TextDrawingMode class - */ + /** + * Return WebGL uniform locations for this filter's shader. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {WebGLShaderProgram} program This filter's compiled shader program. + */ + getUniformLocations: function(gl, program) { + return { + uGamma: gl.getUniformLocation(program, 'uGamma'), + }; + }, + /** + * Send data from this filter to its shader program's uniforms. + * + * @param {WebGLRenderingContext} gl The GL canvas context used to compile this filter's shader. + * @param {Object} uniformLocations A map of string uniform names to WebGLUniformLocation objects + */ + sendUniformData: function(gl, uniformLocations) { + gl.uniform3fv(uniformLocations.uGamma, this.gamma); + }, + }); -/** - * TextDrawingMode class - * @class - * @ignore - */ -var TextDrawingMode = function (_DrawingMode) { - _inherits(TextDrawingMode, _DrawingMode); + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.Gamma} Instance of fabric.Image.filters.Gamma + */ + fabric.Image.filters.Gamma.fromObject = fabric.Image.filters.BaseFilter.fromObject; - function TextDrawingMode() { - _classCallCheck(this, TextDrawingMode); +})( true ? exports : 0); - return _possibleConstructorReturn(this, (TextDrawingMode.__proto__ || Object.getPrototypeOf(TextDrawingMode)).call(this, _consts.drawingModes.TEXT)); - } + +(function(global) { + + 'use strict'; + + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; /** - * start this drawing mode - * @param {Graphics} graphics - Graphics instance - * @override + * A container class that knows how to apply a sequence of filters to an input image. */ + filters.Composed = createClass(filters.BaseFilter, /** @lends fabric.Image.filters.Composed.prototype */ { + type: 'Composed', - _createClass(TextDrawingMode, [{ - key: 'start', - value: function start(graphics) { - var text = graphics.getComponent(_consts.componentNames.TEXT); - text.start(); - } + /** + * A non sparse array of filters to apply + */ + subFilters: [], /** - * stop this drawing mode - * @param {Graphics} graphics - Graphics instance - * @override + * Constructor + * @param {Object} [options] Options object */ + initialize: function(options) { + this.callSuper('initialize', options); + // create a new array instead mutating the prototype with push + this.subFilters = this.subFilters.slice(0); + }, - }, { - key: 'end', - value: function end(graphics) { - var text = graphics.getComponent(_consts.componentNames.TEXT); - text.end(); + /** + * Apply this container's filters to the input image provided. + * + * @param {Object} options + * @param {Number} options.passes The number of filters remaining to be applied. + */ + applyTo: function(options) { + options.passes += this.subFilters.length - 1; + this.subFilters.forEach(function(filter) { + filter.applyTo(options); + }); + }, + + /** + * Serialize this filter into JSON. + * + * @returns {Object} A JSON representation of this filter. + */ + toObject: function() { + return fabric.util.object.extend(this.callSuper('toObject'), { + subFilters: this.subFilters.map(function(filter) { return filter.toObject(); }), + }); + }, + + isNeutralState: function() { + return !this.subFilters.some(function(filter) { return !filter.isNeutralState(); }); } - }]); + }); - return TextDrawingMode; -}(_drawingMode2.default); + /** + * Deserialize a JSON definition of a ComposedFilter into a concrete instance. + */ + fabric.Image.filters.Composed.fromObject = function(object, callback) { + var filters = object.subFilters || [], + subFilters = filters.map(function(filter) { + return new fabric.Image.filters[filter.type](filter); + }), + instance = new fabric.Image.filters.Composed({ subFilters: subFilters }); + callback && callback(instance); + return instance; + }; +})( true ? exports : 0); -exports.default = TextDrawingMode; -/***/ }), +(function(global) { + + 'use strict'; -/***/ "./src/js/drawingMode/zoom.js": -/*!************************************!*\ - !*** ./src/js/drawingMode/zoom.js ***! - \************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + var fabric = global.fabric || (global.fabric = { }), + filters = fabric.Image.filters, + createClass = fabric.util.createClass; -"use strict"; + /** + * HueRotation filter class + * @class fabric.Image.filters.HueRotation + * @memberOf fabric.Image.filters + * @extends fabric.Image.filters.BaseFilter + * @see {@link fabric.Image.filters.HueRotation#initialize} for constructor definition + * @see {@link http://fabricjs.com/image-filters|ImageFilters demo} + * @example + * var filter = new fabric.Image.filters.HueRotation({ + * rotation: -0.5 + * }); + * object.filters.push(filter); + * object.applyFilters(); + */ + filters.HueRotation = createClass(filters.ColorMatrix, /** @lends fabric.Image.filters.HueRotation.prototype */ { + /** + * Filter type + * @param {String} type + * @default + */ + type: 'HueRotation', -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * HueRotation value, from -1 to 1. + * the unit is radians + * @param {Number} myParameter + * @default + */ + rotation: 0, -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + /** + * Describe the property that is the filter parameter + * @param {String} m + * @default + */ + mainParameter: 'rotation', -var _drawingMode = __webpack_require__(/*! @/interface/drawingMode */ "./src/js/interface/drawingMode.js"); + calculateMatrix: function() { + var rad = this.rotation * Math.PI, cos = fabric.util.cos(rad), sin = fabric.util.sin(rad), + aThird = 1 / 3, aThirdSqtSin = Math.sqrt(aThird) * sin, OneMinusCos = 1 - cos; + this.matrix = [ + 1, 0, 0, 0, 0, + 0, 1, 0, 0, 0, + 0, 0, 1, 0, 0, + 0, 0, 0, 1, 0 + ]; + this.matrix[0] = cos + OneMinusCos / 3; + this.matrix[1] = aThird * OneMinusCos - aThirdSqtSin; + this.matrix[2] = aThird * OneMinusCos + aThirdSqtSin; + this.matrix[5] = aThird * OneMinusCos + aThirdSqtSin; + this.matrix[6] = cos + aThird * OneMinusCos; + this.matrix[7] = aThird * OneMinusCos - aThirdSqtSin; + this.matrix[10] = aThird * OneMinusCos - aThirdSqtSin; + this.matrix[11] = aThird * OneMinusCos + aThirdSqtSin; + this.matrix[12] = cos + aThird * OneMinusCos; + }, -var _drawingMode2 = _interopRequireDefault(_drawingMode); + /** + * HueRotation isNeutralState implementation + * Used only in image applyFilters to discard filters that will not have an effect + * on the image + * @param {Object} options + **/ + isNeutralState: function(options) { + this.calculateMatrix(); + return filters.BaseFilter.prototype.isNeutralState.call(this, options); + }, -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + /** + * Apply this filter to the input image data provided. + * + * Determines whether to use WebGL or Canvas2D based on the options.webgl flag. + * + * @param {Object} options + * @param {Number} options.passes The number of filters remaining to be executed + * @param {Boolean} options.webgl Whether to use webgl to render the filter. + * @param {WebGLTexture} options.sourceTexture The texture setup as the source to be filtered. + * @param {WebGLTexture} options.targetTexture The texture where filtered output should be drawn. + * @param {WebGLRenderingContext} options.context The GL context used for rendering. + * @param {Object} options.programCache A map of compiled shader programs, keyed by filter type. + */ + applyTo: function(options) { + this.calculateMatrix(); + filters.BaseFilter.prototype.applyTo.call(this, options); + }, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + }); -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + /** + * Returns filter instance from an object representation + * @static + * @param {Object} object Object to create an instance from + * @param {function} [callback] to be invoked after filter creation + * @return {fabric.Image.filters.HueRotation} Instance of fabric.Image.filters.HueRotation + */ + fabric.Image.filters.HueRotation.fromObject = fabric.Image.filters.BaseFilter.fromObject; -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } +})( true ? exports : 0); -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /** - * @author NHN. FE Development Team - * @fileoverview ZoomDrawingMode class - */ +(function(global) { -/** - * ZoomDrawingMode class - * @class - * @ignore - */ -var ZoomDrawingMode = function (_DrawingMode) { - _inherits(ZoomDrawingMode, _DrawingMode); + 'use strict'; - function ZoomDrawingMode() { - _classCallCheck(this, ZoomDrawingMode); + var fabric = global.fabric || (global.fabric = { }), + clone = fabric.util.object.clone; - return _possibleConstructorReturn(this, (ZoomDrawingMode.__proto__ || Object.getPrototypeOf(ZoomDrawingMode)).call(this, _consts.drawingModes.ZOOM)); + if (fabric.Text) { + fabric.warn('fabric.Text is already defined'); + return; } + var additionalProps = + ('fontFamily fontWeight fontSize text underline overline linethrough' + + ' textAlign fontStyle lineHeight textBackgroundColor charSpacing styles' + + ' direction path pathStartOffset pathSide').split(' '); + /** - * start this drawing mode - * @param {Graphics} graphics - Graphics instance - * @override + * Text class + * @class fabric.Text + * @extends fabric.Object + * @return {fabric.Text} thisArg + * @tutorial {@link http://fabricjs.com/fabric-intro-part-2#text} + * @see {@link fabric.Text#initialize} for constructor definition */ + fabric.Text = fabric.util.createClass(fabric.Object, /** @lends fabric.Text.prototype */ { - - _createClass(ZoomDrawingMode, [{ - key: 'start', - value: function start(graphics) { - var zoom = graphics.getComponent(_consts.componentNames.ZOOM); - - zoom.start(); - } + /** + * Properties which when set cause object to change dimensions + * @type Array + * @private + */ + _dimensionAffectingProps: [ + 'fontSize', + 'fontWeight', + 'fontFamily', + 'fontStyle', + 'lineHeight', + 'text', + 'charSpacing', + 'textAlign', + 'styles', + 'path', + 'pathStartOffset', + 'pathSide' + ], /** - * stop this drawing mode - * @param {Graphics} graphics - Graphics instance - * @override + * @private */ + _reNewline: /\r?\n/, - }, { - key: 'end', - value: function end(graphics) { - var zoom = graphics.getComponent(_consts.componentNames.ZOOM); - - zoom.end(); - } - }]); - - return ZoomDrawingMode; -}(_drawingMode2.default); + /** + * Use this regular expression to filter for whitespaces that is not a new line. + * Mostly used when text is 'justify' aligned. + * @private + */ + _reSpacesAndTabs: /[ \t\r]/g, -exports.default = ZoomDrawingMode; + /** + * Use this regular expression to filter for whitespace that is not a new line. + * Mostly used when text is 'justify' aligned. + * @private + */ + _reSpaceAndTab: /[ \t\r]/, -/***/ }), + /** + * Use this regular expression to filter consecutive groups of non spaces. + * Mostly used when text is 'justify' aligned. + * @private + */ + _reWords: /\S+/g, -/***/ "./src/js/extension/arrowLine.js": -/*!***************************************!*\ - !*** ./src/js/extension/arrowLine.js ***! - \***************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Type of an object + * @type String + * @default + */ + type: 'text', -"use strict"; + /** + * Font size (in pixels) + * @type Number + * @default + */ + fontSize: 40, + /** + * Font weight (e.g. bold, normal, 400, 600, 800) + * @type {(Number|String)} + * @default + */ + fontWeight: 'normal', -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * Font family + * @type String + * @default + */ + fontFamily: 'Times New Roman', -var _fabric = __webpack_require__(/*! fabric */ "fabric"); + /** + * Text decoration underline. + * @type Boolean + * @default + */ + underline: false, -var _fabric2 = _interopRequireDefault(_fabric); + /** + * Text decoration overline. + * @type Boolean + * @default + */ + overline: false, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Text decoration linethrough. + * @type Boolean + * @default + */ + linethrough: false, -var ARROW_ANGLE = 30; /** - * @author NHN. FE Development Team - * @fileoverview Blur extending fabric.Image.filters.Convolute - */ + /** + * Text alignment. Possible values: "left", "center", "right", "justify", + * "justify-left", "justify-center" or "justify-right". + * @type String + * @default + */ + textAlign: 'left', -var CHEVRON_SIZE_RATIO = 2.7; -var TRIANGLE_SIZE_RATIO = 1.7; -var RADIAN_CONVERSION_VALUE = 180; + /** + * Font style . Possible values: "", "normal", "italic" or "oblique". + * @type String + * @default + */ + fontStyle: 'normal', -var ArrowLine = _fabric2.default.util.createClass(_fabric2.default.Line, -/** @lends Convolute.prototype */{ - /** - * Line type - * @param {String} type - * @default - */ - type: 'line', + /** + * Line height + * @type Number + * @default + */ + lineHeight: 1.16, - /** - * Constructor - * @param {Array} [points] Array of points - * @param {Object} [options] Options object - * @override - */ - initialize: function initialize(points) { - var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + /** + * Superscript schema object (minimum overlap) + * @type {Object} + * @default + */ + superscript: { + size: 0.60, // fontSize factor + baseline: -0.35 // baseline-shift factor (upwards) + }, - this.callSuper('initialize', points, options); + /** + * Subscript schema object (minimum overlap) + * @type {Object} + * @default + */ + subscript: { + size: 0.60, // fontSize factor + baseline: 0.11 // baseline-shift factor (downwards) + }, - this.arrowType = options.arrowType; - }, + /** + * Background color of text lines + * @type String + * @default + */ + textBackgroundColor: '', + /** + * List of properties to consider when checking if + * state of an object is changed ({@link fabric.Object#hasStateChanged}) + * as well as for history (undo/redo) purposes + * @type Array + */ + stateProperties: fabric.Object.prototype.stateProperties.concat(additionalProps), - /** - * Render ArrowLine - * @private - * @override - */ - _render: function _render(ctx) { - var _calcLinePoints = this.calcLinePoints(), - fromX = _calcLinePoints.x1, - fromY = _calcLinePoints.y1, - toX = _calcLinePoints.x2, - toY = _calcLinePoints.y2; + /** + * List of properties to consider when checking if cache needs refresh + * @type Array + */ + cacheProperties: fabric.Object.prototype.cacheProperties.concat(additionalProps), - var linePosition = { - fromX: fromX, - fromY: fromY, - toX: toX, - toY: toY - }; - this.ctx = ctx; - ctx.lineWidth = this.strokeWidth; + /** + * When defined, an object is rendered via stroke and this property specifies its color. + * Backwards incompatibility note: This property was named "strokeStyle" until v1.1.6 + * @type String + * @default + */ + stroke: null, - this._renderBasicLinePath(linePosition); - this._drawDecoratorPath(linePosition); + /** + * Shadow object representing shadow of this shape. + * Backwards incompatibility note: This property was named "textShadow" (String) until v1.2.11 + * @type fabric.Shadow + * @default + */ + shadow: null, - this._renderStroke(ctx); - }, + /** + * fabric.Path that the text should follow. + * since 4.6.0 the path will be drawn automatically. + * if you want to make the path visible, give it a stroke and strokeWidth or fill value + * if you want it to be hidden, assign visible = false to the path. + * This feature is in BETA, and SVG import/export is not yet supported. + * @type fabric.Path + * @example + * var textPath = new fabric.Text('Text on a path', { + * top: 150, + * left: 150, + * textAlign: 'center', + * charSpacing: -50, + * path: new fabric.Path('M 0 0 C 50 -100 150 -100 200 0', { + * strokeWidth: 1, + * visible: false + * }), + * pathSide: 'left', + * pathStartOffset: 0 + * }); + * @default + */ + path: null, + /** + * Offset amount for text path starting position + * Only used when text has a path + * @type Number + * @default + */ + pathStartOffset: 0, - /** - * Render Basic line path - * @param {Object} linePosition - line position - * @param {number} option.fromX - line start position x - * @param {number} option.fromY - line start position y - * @param {number} option.toX - line end position x - * @param {number} option.toY - line end position y - * @private - */ - _renderBasicLinePath: function _renderBasicLinePath(_ref) { - var fromX = _ref.fromX, - fromY = _ref.fromY, - toX = _ref.toX, - toY = _ref.toY; + /** + * Which side of the path the text should be drawn on. + * Only used when text has a path + * @type {String} 'left|right' + * @default + */ + pathSide: 'left', - this.ctx.beginPath(); - this.ctx.moveTo(fromX, fromY); - this.ctx.lineTo(toX, toY); - }, + /** + * @private + */ + _fontSizeFraction: 0.222, + /** + * @private + */ + offsets: { + underline: 0.10, + linethrough: -0.315, + overline: -0.88 + }, - /** - * Render Arrow Head - * @param {Object} linePosition - line position - * @param {number} option.fromX - line start position x - * @param {number} option.fromY - line start position y - * @param {number} option.toX - line end position x - * @param {number} option.toY - line end position y - * @private - */ - _drawDecoratorPath: function _drawDecoratorPath(linePosition) { - this._drawDecoratorPathType('head', linePosition); - this._drawDecoratorPathType('tail', linePosition); - }, + /** + * Text Line proportion to font Size (in pixels) + * @type Number + * @default + */ + _fontSizeMult: 1.13, + /** + * additional space between characters + * expressed in thousands of em unit + * @type Number + * @default + */ + charSpacing: 0, - /** - * Render Arrow Head - * @param {string} type - 'head' or 'tail' - * @param {Object} linePosition - line position - * @param {number} option.fromX - line start position x - * @param {number} option.fromY - line start position y - * @param {number} option.toX - line end position x - * @param {number} option.toY - line end position y - * @private - */ - _drawDecoratorPathType: function _drawDecoratorPathType(type, linePosition) { - switch (this.arrowType[type]) { - case 'triangle': - this._drawTrianglePath(type, linePosition); - break; - case 'chevron': - this._drawChevronPath(type, linePosition); - break; - default: - break; - } - }, + /** + * Object containing character styles - top-level properties -> line numbers, + * 2nd-level properties - character numbers + * @type Object + * @default + */ + styles: null, + /** + * Reference to a context to measure text char or couple of chars + * the cacheContext of the canvas will be used or a freshly created one if the object is not on canvas + * once created it will be referenced on fabric._measuringContext to avoid creating a canvas for every + * text object created. + * @type {CanvasRenderingContext2D} + * @default + */ + _measuringContext: null, - /** - * Render Triangle Head - * @param {string} type - 'head' or 'tail' - * @param {Object} linePosition - line position - * @param {number} option.fromX - line start position x - * @param {number} option.fromY - line start position y - * @param {number} option.toX - line end position x - * @param {number} option.toY - line end position y - * @private - */ - _drawTrianglePath: function _drawTrianglePath(type, linePosition) { - var decorateSize = this.ctx.lineWidth * TRIANGLE_SIZE_RATIO; + /** + * Baseline shift, styles only, keep at 0 for the main text object + * @type {Number} + * @default + */ + deltaY: 0, - this._drawChevronPath(type, linePosition, decorateSize); - this.ctx.closePath(); - }, + /** + * WARNING: EXPERIMENTAL. NOT SUPPORTED YET + * determine the direction of the text. + * This has to be set manually together with textAlign and originX for proper + * experience. + * some interesting link for the future + * https://www.w3.org/International/questions/qa-bidi-unicode-controls + * @since 4.5.0 + * @type {String} 'ltr|rtl' + * @default + */ + direction: 'ltr', + /** + * Array of properties that define a style unit (of 'styles'). + * @type {Array} + * @default + */ + _styleProperties: [ + 'stroke', + 'strokeWidth', + 'fill', + 'fontFamily', + 'fontSize', + 'fontWeight', + 'fontStyle', + 'underline', + 'overline', + 'linethrough', + 'deltaY', + 'textBackgroundColor', + ], - /** - * Render Chevron Head - * @param {string} type - 'head' or 'tail' - * @param {Object} linePosition - line position - * @param {number} option.fromX - line start position x - * @param {number} option.fromY - line start position y - * @param {number} option.toX - line end position x - * @param {number} option.toY - line end position y - * @param {number} decorateSize - decorate size - * @private - */ - _drawChevronPath: function _drawChevronPath(type, _ref2, decorateSize) { - var _this = this; + /** + * contains characters bounding boxes + */ + __charBounds: [], - var fromX = _ref2.fromX, - fromY = _ref2.fromY, - toX = _ref2.toX, - toY = _ref2.toY; - var ctx = this.ctx; + /** + * use this size when measuring text. To avoid IE11 rounding errors + * @type {Number} + * @default + * @readonly + * @private + */ + CACHE_FONT_SIZE: 400, - if (!decorateSize) { - decorateSize = this.ctx.lineWidth * CHEVRON_SIZE_RATIO; - } + /** + * contains the min text width to avoid getting 0 + * @type {Number} + * @default + */ + MIN_TEXT_WIDTH: 2, - var _ref3 = type === 'head' ? [fromX, fromY] : [toX, toY], - standardX = _ref3[0], - standardY = _ref3[1]; + /** + * Constructor + * @param {String} text Text string + * @param {Object} [options] Options object + * @return {fabric.Text} thisArg + */ + initialize: function(text, options) { + this.styles = options ? (options.styles || { }) : { }; + this.text = text; + this.__skipDimension = true; + this.callSuper('initialize', options); + if (this.path) { + this.setPathInfo(); + } + this.__skipDimension = false; + this.initDimensions(); + this.setCoords(); + this.setupState({ propertySet: '_dimensionAffectingProps' }); + }, - var _ref4 = type === 'head' ? [toX, toY] : [fromX, fromY], - compareX = _ref4[0], - compareY = _ref4[1]; + /** + * If text has a path, it will add the extra information needed + * for path and text calculations + * @return {fabric.Text} thisArg + */ + setPathInfo: function() { + var path = this.path; + if (path) { + path.segmentsInfo = fabric.util.getPathSegmentsInfo(path.path); + } + }, - var angle = Math.atan2(compareY - standardY, compareX - standardX) * RADIAN_CONVERSION_VALUE / Math.PI; - var rotatedPosition = function rotatedPosition(changeAngle) { - return _this.getRotatePosition(decorateSize, changeAngle, { - x: standardX, - y: standardY - }); - }; + /** + * Return a context for measurement of text string. + * if created it gets stored for reuse + * @param {String} text Text string + * @param {Object} [options] Options object + * @return {fabric.Text} thisArg + */ + getMeasuringContext: function() { + // if we did not return we have to measure something. + if (!fabric._measuringContext) { + fabric._measuringContext = this.canvas && this.canvas.contextCache || + fabric.util.createCanvasElement().getContext('2d'); + } + return fabric._measuringContext; + }, - ctx.moveTo.apply(ctx, rotatedPosition(angle + ARROW_ANGLE)); - ctx.lineTo(standardX, standardY); - ctx.lineTo.apply(ctx, rotatedPosition(angle - ARROW_ANGLE)); - }, + /** + * @private + * Divides text into lines of text and lines of graphemes. + */ + _splitText: function() { + var newLines = this._splitTextIntoLines(this.text); + this.textLines = newLines.lines; + this._textLines = newLines.graphemeLines; + this._unwrappedTextLines = newLines._unwrappedLines; + this._text = newLines.graphemeText; + return newLines; + }, + /** + * Initialize or update text dimensions. + * Updates this.width and this.height with the proper values. + * Does not return dimensions. + */ + initDimensions: function() { + if (this.__skipDimension) { + return; + } + this._splitText(); + this._clearCache(); + if (this.path) { + this.width = this.path.width; + this.height = this.path.height; + } + else { + this.width = this.calcTextWidth() || this.cursorWidth || this.MIN_TEXT_WIDTH; + this.height = this.calcTextHeight(); + } + if (this.textAlign.indexOf('justify') !== -1) { + // once text is measured we need to make space fatter to make justified text. + this.enlargeSpaces(); + } + this.saveState({ propertySet: '_dimensionAffectingProps' }); + }, - /** - * return position from change angle. - * @param {number} distance - change distance - * @param {number} angle - change angle - * @param {Object} referencePosition - reference position - * @returns {Array} - * @private - */ - getRotatePosition: function getRotatePosition(distance, angle, referencePosition) { - var radian = angle * Math.PI / RADIAN_CONVERSION_VALUE; - var x = referencePosition.x, - y = referencePosition.y; - - - return [distance * Math.cos(radian) + x, distance * Math.sin(radian) + y]; - } -}); - -exports.default = ArrowLine; - -/***/ }), - -/***/ "./src/js/extension/colorFilter.js": -/*!*****************************************!*\ - !*** ./src/js/extension/colorFilter.js ***! - \*****************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - + /** + * Enlarge space boxes and shift the others + */ + enlargeSpaces: function() { + var diffSpace, currentLineWidth, numberOfSpaces, accumulatedSpace, line, charBound, spaces; + for (var i = 0, len = this._textLines.length; i < len; i++) { + if (this.textAlign !== 'justify' && (i === len - 1 || this.isEndOfWrapping(i))) { + continue; + } + accumulatedSpace = 0; + line = this._textLines[i]; + currentLineWidth = this.getLineWidth(i); + if (currentLineWidth < this.width && (spaces = this.textLines[i].match(this._reSpacesAndTabs))) { + numberOfSpaces = spaces.length; + diffSpace = (this.width - currentLineWidth) / numberOfSpaces; + for (var j = 0, jlen = line.length; j <= jlen; j++) { + charBound = this.__charBounds[i][j]; + if (this._reSpaceAndTab.test(line[j])) { + charBound.width += diffSpace; + charBound.kernedWidth += diffSpace; + charBound.left += accumulatedSpace; + accumulatedSpace += diffSpace; + } + else { + charBound.left += accumulatedSpace; + } + } + } + } + }, -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * Detect if the text line is ended with an hard break + * text and itext do not have wrapping, return false + * @return {Boolean} + */ + isEndOfWrapping: function(lineIndex) { + return lineIndex === this._textLines.length - 1; + }, -var _fabric = __webpack_require__(/*! fabric */ "fabric"); + /** + * Detect if a line has a linebreak and so we need to account for it when moving + * and counting style. + * It return always for text and Itext. + * @return Number + */ + missingNewlineOffset: function() { + return 1; + }, -var _fabric2 = _interopRequireDefault(_fabric); + /** + * Returns string representation of an instance + * @return {String} String representation of text object + */ + toString: function() { + return '#'; + }, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Return the dimension and the zoom level needed to create a cache canvas + * big enough to host the object to be cached. + * @private + * @param {Object} dim.x width of object to be cached + * @param {Object} dim.y height of object to be cached + * @return {Object}.width width of canvas + * @return {Object}.height height of canvas + * @return {Object}.zoomX zoomX zoom value to unscale the canvas before drawing cache + * @return {Object}.zoomY zoomY zoom value to unscale the canvas before drawing cache + */ + _getCacheCanvasDimensions: function() { + var dims = this.callSuper('_getCacheCanvasDimensions'); + var fontSize = this.fontSize; + dims.width += fontSize * dims.zoomX; + dims.height += fontSize * dims.zoomY; + return dims; + }, -/** - * ColorFilter object - * @class ColorFilter - * @extends {fabric.Image.filters.BaseFilter} - * @ignore - */ -var ColorFilter = _fabric2.default.util.createClass(_fabric2.default.Image.filters.BaseFilter, -/** @lends BaseFilter.prototype */{ - /** - * Filter type - * @param {String} type - * @default - */ - type: 'ColorFilter', + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _render: function(ctx) { + var path = this.path; + path && !path.isNotVisible() && path._render(ctx); + this._setTextStyles(ctx); + this._renderTextLinesBackground(ctx); + this._renderTextDecoration(ctx, 'underline'); + this._renderText(ctx); + this._renderTextDecoration(ctx, 'overline'); + this._renderTextDecoration(ctx, 'linethrough'); + }, - /** - * Constructor - * @member fabric.Image.filters.ColorFilter.prototype - * @param {Object} [options] Options object - * @param {Number} [options.color='#FFFFFF'] Value of color (0...255) - * @param {Number} [options.threshold=45] Value of threshold (0...255) - * @override - */ - initialize: function initialize(options) { - if (!options) { - options = {}; - } - this.color = options.color || '#FFFFFF'; - this.threshold = options.threshold || 45; - this.x = options.x || null; - this.y = options.y || null; - }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderText: function(ctx) { + if (this.paintFirst === 'stroke') { + this._renderTextStroke(ctx); + this._renderTextFill(ctx); + } + else { + this._renderTextFill(ctx); + this._renderTextStroke(ctx); + } + }, + /** + * Set the font parameter of the context with the object properties or with charStyle + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {Object} [charStyle] object with font style properties + * @param {String} [charStyle.fontFamily] Font Family + * @param {Number} [charStyle.fontSize] Font size in pixels. ( without px suffix ) + * @param {String} [charStyle.fontWeight] Font weight + * @param {String} [charStyle.fontStyle] Font style (italic|normal) + */ + _setTextStyles: function(ctx, charStyle, forMeasuring) { + ctx.textBaseline = 'alphabetic'; + ctx.font = this._getFontDeclaration(charStyle, forMeasuring); + }, - /** - * Applies filter to canvas element - * @param {Object} canvas Canvas object passed by fabric - */ - // eslint-disable-next-line complexity - applyTo: function applyTo(canvas) { - var canvasEl = canvas.canvasEl; + /** + * calculate and return the text Width measuring each line. + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + * @return {Number} Maximum width of fabric.Text object + */ + calcTextWidth: function() { + var maxWidth = this.getLineWidth(0); - var context = canvasEl.getContext('2d'); - var imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height); - var data = imageData.data; - var threshold = this.threshold; + for (var i = 1, len = this._textLines.length; i < len; i++) { + var currentLineWidth = this.getLineWidth(i); + if (currentLineWidth > maxWidth) { + maxWidth = currentLineWidth; + } + } + return maxWidth; + }, - var filterColor = _fabric2.default.Color.sourceFromHex(this.color); - var i = void 0, - len = void 0; + /** + * @private + * @param {String} method Method name ("fillText" or "strokeText") + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {String} line Text to render + * @param {Number} left Left position of text + * @param {Number} top Top position of text + * @param {Number} lineIndex Index of a line in a text + */ + _renderTextLine: function(method, ctx, line, left, top, lineIndex) { + this._renderChars(method, ctx, line, left, top, lineIndex); + }, - if (this.x && this.y) { - filterColor = this._getColor(imageData, this.x, this.y); - } + /** + * Renders the text background for lines, taking care of style + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderTextLinesBackground: function(ctx) { + if (!this.textBackgroundColor && !this.styleHas('textBackgroundColor')) { + return; + } + var heightOfLine, + lineLeftOffset, originalFill = ctx.fillStyle, + line, lastColor, + leftOffset = this._getLeftOffset(), + lineTopOffset = this._getTopOffset(), + boxStart = 0, boxWidth = 0, charBox, currentColor, path = this.path, + drawStart; + + for (var i = 0, len = this._textLines.length; i < len; i++) { + heightOfLine = this.getHeightOfLine(i); + if (!this.textBackgroundColor && !this.styleHas('textBackgroundColor', i)) { + lineTopOffset += heightOfLine; + continue; + } + line = this._textLines[i]; + lineLeftOffset = this._getLineLeftOffset(i); + boxWidth = 0; + boxStart = 0; + lastColor = this.getValueOfPropertyAt(i, 0, 'textBackgroundColor'); + for (var j = 0, jlen = line.length; j < jlen; j++) { + charBox = this.__charBounds[i][j]; + currentColor = this.getValueOfPropertyAt(i, j, 'textBackgroundColor'); + if (path) { + ctx.save(); + ctx.translate(charBox.renderLeft, charBox.renderTop); + ctx.rotate(charBox.angle); + ctx.fillStyle = currentColor; + currentColor && ctx.fillRect( + -charBox.width / 2, + -heightOfLine / this.lineHeight * (1 - this._fontSizeFraction), + charBox.width, + heightOfLine / this.lineHeight + ); + ctx.restore(); + } + else if (currentColor !== lastColor) { + drawStart = leftOffset + lineLeftOffset + boxStart; + if (this.direction === 'rtl') { + drawStart = this.width - drawStart - boxWidth; + } + ctx.fillStyle = lastColor; + lastColor && ctx.fillRect( + drawStart, + lineTopOffset, + boxWidth, + heightOfLine / this.lineHeight + ); + boxStart = charBox.left; + boxWidth = charBox.width; + lastColor = currentColor; + } + else { + boxWidth += charBox.kernedWidth; + } + } + if (currentColor && !path) { + drawStart = leftOffset + lineLeftOffset + boxStart; + if (this.direction === 'rtl') { + drawStart = this.width - drawStart - boxWidth; + } + ctx.fillStyle = currentColor; + ctx.fillRect( + drawStart, + lineTopOffset, + boxWidth, + heightOfLine / this.lineHeight + ); + } + lineTopOffset += heightOfLine; + } + ctx.fillStyle = originalFill; + // if there is text background color no + // other shadows should be casted + this._removeShadow(ctx); + }, - for (i = 0, len = data.length; i < len; i += 4) { - if (this._isOutsideThreshold(data[i], filterColor[0], threshold) || this._isOutsideThreshold(data[i + 1], filterColor[1], threshold) || this._isOutsideThreshold(data[i + 2], filterColor[2], threshold)) { - continue; + /** + * @private + * @param {Object} decl style declaration for cache + * @param {String} decl.fontFamily fontFamily + * @param {String} decl.fontStyle fontStyle + * @param {String} decl.fontWeight fontWeight + * @return {Object} reference to cache + */ + getFontCache: function(decl) { + var fontFamily = decl.fontFamily.toLowerCase(); + if (!fabric.charWidthsCache[fontFamily]) { + fabric.charWidthsCache[fontFamily] = { }; } - data[i] = data[i + 1] = data[i + 2] = data[i + 3] = 0; - } - context.putImageData(imageData, 0, 0); - }, + var cache = fabric.charWidthsCache[fontFamily], + cacheProp = decl.fontStyle.toLowerCase() + '_' + (decl.fontWeight + '').toLowerCase(); + if (!cache[cacheProp]) { + cache[cacheProp] = { }; + } + return cache[cacheProp]; + }, + /** + * measure and return the width of a single character. + * possibly overridden to accommodate different measure logic or + * to hook some external lib for character measurement + * @private + * @param {String} _char, char to be measured + * @param {Object} charStyle style of char to be measured + * @param {String} [previousChar] previous char + * @param {Object} [prevCharStyle] style of previous char + */ + _measureChar: function(_char, charStyle, previousChar, prevCharStyle) { + // first i try to return from cache + var fontCache = this.getFontCache(charStyle), fontDeclaration = this._getFontDeclaration(charStyle), + previousFontDeclaration = this._getFontDeclaration(prevCharStyle), couple = previousChar + _char, + stylesAreEqual = fontDeclaration === previousFontDeclaration, width, coupleWidth, previousWidth, + fontMultiplier = charStyle.fontSize / this.CACHE_FONT_SIZE, kernedWidth; - /** - * Check color if it is within threshold - * @param {Number} color1 source color - * @param {Number} color2 filtering color - * @param {Number} threshold threshold - * @returns {boolean} true if within threshold or false - */ - _isOutsideThreshold: function _isOutsideThreshold(color1, color2, threshold) { - var diff = color1 - color2; + if (previousChar && fontCache[previousChar] !== undefined) { + previousWidth = fontCache[previousChar]; + } + if (fontCache[_char] !== undefined) { + kernedWidth = width = fontCache[_char]; + } + if (stylesAreEqual && fontCache[couple] !== undefined) { + coupleWidth = fontCache[couple]; + kernedWidth = coupleWidth - previousWidth; + } + if (width === undefined || previousWidth === undefined || coupleWidth === undefined) { + var ctx = this.getMeasuringContext(); + // send a TRUE to specify measuring font size CACHE_FONT_SIZE + this._setTextStyles(ctx, charStyle, true); + } + if (width === undefined) { + kernedWidth = width = ctx.measureText(_char).width; + fontCache[_char] = width; + } + if (previousWidth === undefined && stylesAreEqual && previousChar) { + previousWidth = ctx.measureText(previousChar).width; + fontCache[previousChar] = previousWidth; + } + if (stylesAreEqual && coupleWidth === undefined) { + // we can measure the kerning couple and subtract the width of the previous character + coupleWidth = ctx.measureText(couple).width; + fontCache[couple] = coupleWidth; + kernedWidth = coupleWidth - previousWidth; + } + return { width: width * fontMultiplier, kernedWidth: kernedWidth * fontMultiplier }; + }, - return Math.abs(diff) > threshold; - }, + /** + * Computes height of character at given position + * @param {Number} line the line index number + * @param {Number} _char the character index number + * @return {Number} fontSize of the character + */ + getHeightOfChar: function(line, _char) { + return this.getValueOfPropertyAt(line, _char, 'fontSize'); + }, + /** + * measure a text line measuring all characters. + * @param {Number} lineIndex line number + * @return {Number} Line width + */ + measureLine: function(lineIndex) { + var lineInfo = this._measureLine(lineIndex); + if (this.charSpacing !== 0) { + lineInfo.width -= this._getWidthOfCharSpacing(); + } + if (lineInfo.width < 0) { + lineInfo.width = 0; + } + return lineInfo; + }, - /** - * Get color at (x, y) - * @param {Object} imageData of canvas - * @param {Number} x left position - * @param {Number} y top position - * @returns {Array} color array - */ - _getColor: function _getColor(imageData, x, y) { - var color = [0, 0, 0, 0]; - var data = imageData.data, - width = imageData.width; + /** + * measure every grapheme of a line, populating __charBounds + * @param {Number} lineIndex + * @return {Object} object.width total width of characters + * @return {Object} object.widthOfSpaces length of chars that match this._reSpacesAndTabs + */ + _measureLine: function(lineIndex) { + var width = 0, i, grapheme, line = this._textLines[lineIndex], prevGrapheme, + graphemeInfo, numOfSpaces = 0, lineBounds = new Array(line.length), + positionInPath = 0, startingPoint, totalPathLength, path = this.path, + reverse = this.pathSide === 'right'; + + this.__charBounds[lineIndex] = lineBounds; + for (i = 0; i < line.length; i++) { + grapheme = line[i]; + graphemeInfo = this._getGraphemeBox(grapheme, lineIndex, i, prevGrapheme); + lineBounds[i] = graphemeInfo; + width += graphemeInfo.kernedWidth; + prevGrapheme = grapheme; + } + // this latest bound box represent the last character of the line + // to simplify cursor handling in interactive mode. + lineBounds[i] = { + left: graphemeInfo ? graphemeInfo.left + graphemeInfo.width : 0, + width: 0, + kernedWidth: 0, + height: this.fontSize + }; + if (path) { + totalPathLength = path.segmentsInfo[path.segmentsInfo.length - 1].length; + startingPoint = fabric.util.getPointOnPath(path.path, 0, path.segmentsInfo); + startingPoint.x += path.pathOffset.x; + startingPoint.y += path.pathOffset.y; + switch (this.textAlign) { + case 'left': + positionInPath = reverse ? (totalPathLength - width) : 0; + break; + case 'center': + positionInPath = (totalPathLength - width) / 2; + break; + case 'right': + positionInPath = reverse ? 0 : (totalPathLength - width); + break; + //todo - add support for justify + } + positionInPath += this.pathStartOffset * (reverse ? -1 : 1); + for (i = reverse ? line.length - 1 : 0; + reverse ? i >= 0 : i < line.length; + reverse ? i-- : i++) { + graphemeInfo = lineBounds[i]; + if (positionInPath > totalPathLength) { + positionInPath %= totalPathLength; + } + else if (positionInPath < 0) { + positionInPath += totalPathLength; + } + // it would probably much faster to send all the grapheme position for a line + // and calculate path position/angle at once. + this._setGraphemeOnPath(positionInPath, graphemeInfo, startingPoint); + positionInPath += graphemeInfo.kernedWidth; + } + } + return { width: width, numOfSpaces: numOfSpaces }; + }, - var bytes = 4; - var position = (width * y + x) * bytes; + /** + * Calculate the angle and the left,top position of the char that follow a path. + * It appends it to graphemeInfo to be reused later at rendering + * @private + * @param {Number} positionInPath to be measured + * @param {Object} graphemeInfo current grapheme box information + * @param {Object} startingPoint position of the point + */ + _setGraphemeOnPath: function(positionInPath, graphemeInfo, startingPoint) { + var centerPosition = positionInPath + graphemeInfo.kernedWidth / 2, + path = this.path; - color[0] = data[position]; - color[1] = data[position + 1]; - color[2] = data[position + 2]; - color[3] = data[position + 3]; + // we are at currentPositionOnPath. we want to know what point on the path is. + var info = fabric.util.getPointOnPath(path.path, centerPosition, path.segmentsInfo); + graphemeInfo.renderLeft = info.x - startingPoint.x; + graphemeInfo.renderTop = info.y - startingPoint.y; + graphemeInfo.angle = info.angle + (this.pathSide === 'right' ? Math.PI : 0); + }, - return color; - } -}); /** - * @author NHN. FE Development Team - * @fileoverview ColorFilter extending fabric.Image.filters.BaseFilter + /** + * Measure and return the info of a single grapheme. + * needs the the info of previous graphemes already filled + * @private + * @param {String} grapheme to be measured + * @param {Number} lineIndex index of the line where the char is + * @param {Number} charIndex position in the line + * @param {String} [prevGrapheme] character preceding the one to be measured */ -exports.default = ColorFilter; + _getGraphemeBox: function(grapheme, lineIndex, charIndex, prevGrapheme, skipLeft) { + var style = this.getCompleteStyleDeclaration(lineIndex, charIndex), + prevStyle = prevGrapheme ? this.getCompleteStyleDeclaration(lineIndex, charIndex - 1) : { }, + info = this._measureChar(grapheme, style, prevGrapheme, prevStyle), + kernedWidth = info.kernedWidth, + width = info.width, charSpacing; -/***/ }), + if (this.charSpacing !== 0) { + charSpacing = this._getWidthOfCharSpacing(); + width += charSpacing; + kernedWidth += charSpacing; + } -/***/ "./src/js/extension/cropzone.js": -/*!**************************************!*\ - !*** ./src/js/extension/cropzone.js ***! - \**************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + var box = { + width: width, + left: 0, + height: style.fontSize, + kernedWidth: kernedWidth, + deltaY: style.deltaY, + }; + if (charIndex > 0 && !skipLeft) { + var previousBox = this.__charBounds[lineIndex][charIndex - 1]; + box.left = previousBox.left + previousBox.width + info.kernedWidth - info.width; + } + return box; + }, -"use strict"; + /** + * Calculate height of line at 'lineIndex' + * @param {Number} lineIndex index of line to calculate + * @return {Number} + */ + getHeightOfLine: function(lineIndex) { + if (this.__lineHeights[lineIndex]) { + return this.__lineHeights[lineIndex]; + } + var line = this._textLines[lineIndex], + // char 0 is measured before the line cycle because it nneds to char + // emptylines + maxHeight = this.getHeightOfChar(lineIndex, 0); + for (var i = 1, len = line.length; i < len; i++) { + maxHeight = Math.max(this.getHeightOfChar(lineIndex, i), maxHeight); + } -Object.defineProperty(exports, "__esModule", { - value: true -}); + return this.__lineHeights[lineIndex] = maxHeight * this.lineHeight * this._fontSizeMult; + }, -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); + /** + * Calculate text box height + */ + calcTextHeight: function() { + var lineHeight, height = 0; + for (var i = 0, len = this._textLines.length; i < len; i++) { + lineHeight = this.getHeightOfLine(i); + height += (i === len - 1 ? lineHeight / this.lineHeight : lineHeight); + } + return height; + }, -var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); + /** + * @private + * @return {Number} Left offset + */ + _getLeftOffset: function() { + return this.direction === 'ltr' ? -this.width / 2 : this.width / 2; + }, -var _fabric = __webpack_require__(/*! fabric */ "fabric"); + /** + * @private + * @return {Number} Top offset + */ + _getTopOffset: function() { + return -this.height / 2; + }, -var _fabric2 = _interopRequireDefault(_fabric); + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {String} method Method name ("fillText" or "strokeText") + */ + _renderTextCommon: function(ctx, method) { + ctx.save(); + var lineHeights = 0, left = this._getLeftOffset(), top = this._getTopOffset(); + for (var i = 0, len = this._textLines.length; i < len; i++) { + var heightOfLine = this.getHeightOfLine(i), + maxHeight = heightOfLine / this.lineHeight, + leftOffset = this._getLineLeftOffset(i); + this._renderTextLine( + method, + ctx, + this._textLines[i], + left + leftOffset, + top + lineHeights + maxHeight, + i + ); + lineHeights += heightOfLine; + } + ctx.restore(); + }, -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderTextFill: function(ctx) { + if (!this.fill && !this.styleHas('fill')) { + return; + } -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + this._renderTextCommon(ctx, 'fillText'); + }, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderTextStroke: function(ctx) { + if ((!this.stroke || this.strokeWidth === 0) && this.isEmptyStyles()) { + return; + } -function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } /** - * @author NHN. FE Development Team - * @fileoverview Cropzone extending fabric.Rect - */ + if (this.shadow && !this.shadow.affectStroke) { + this._removeShadow(ctx); + } + ctx.save(); + this._setLineDash(ctx, this.strokeDashArray); + ctx.beginPath(); + this._renderTextCommon(ctx, 'strokeText'); + ctx.closePath(); + ctx.restore(); + }, -var CORNER_TYPE_TOP_LEFT = 'tl'; -var CORNER_TYPE_TOP_RIGHT = 'tr'; -var CORNER_TYPE_MIDDLE_TOP = 'mt'; -var CORNER_TYPE_MIDDLE_LEFT = 'ml'; -var CORNER_TYPE_MIDDLE_RIGHT = 'mr'; -var CORNER_TYPE_MIDDLE_BOTTOM = 'mb'; -var CORNER_TYPE_BOTTOM_LEFT = 'bl'; -var CORNER_TYPE_BOTTOM_RIGHT = 'br'; -var CORNER_TYPE_LIST = [CORNER_TYPE_TOP_LEFT, CORNER_TYPE_TOP_RIGHT, CORNER_TYPE_MIDDLE_TOP, CORNER_TYPE_MIDDLE_LEFT, CORNER_TYPE_MIDDLE_RIGHT, CORNER_TYPE_MIDDLE_BOTTOM, CORNER_TYPE_BOTTOM_LEFT, CORNER_TYPE_BOTTOM_RIGHT]; -var NOOP_FUNCTION = function NOOP_FUNCTION() {}; + /** + * @private + * @param {String} method fillText or strokeText. + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {Array} line Content of the line, splitted in an array by grapheme + * @param {Number} left + * @param {Number} top + * @param {Number} lineIndex + */ + _renderChars: function(method, ctx, line, left, top, lineIndex) { + // set proper line offset + var lineHeight = this.getHeightOfLine(lineIndex), + isJustify = this.textAlign.indexOf('justify') !== -1, + actualStyle, + nextStyle, + charsToRender = '', + charBox, + boxWidth = 0, + timeToRender, + path = this.path, + shortCut = !isJustify && this.charSpacing === 0 && this.isEmptyStyles(lineIndex) && !path, + isLtr = this.direction === 'ltr', sign = this.direction === 'ltr' ? 1 : -1, + drawingLeft; + + ctx.save(); + top -= lineHeight * this._fontSizeFraction / this.lineHeight; + if (shortCut) { + // render all the line in one pass without checking + // drawingLeft = isLtr ? left : left - this.getLineWidth(lineIndex); + ctx.canvas.setAttribute('dir', isLtr ? 'ltr' : 'rtl'); + ctx.direction = isLtr ? 'ltr' : 'rtl'; + ctx.textAlign = isLtr ? 'left' : 'right'; + this._renderChar(method, ctx, lineIndex, 0, line.join(''), left, top, lineHeight); + ctx.restore(); + return; + } + for (var i = 0, len = line.length - 1; i <= len; i++) { + timeToRender = i === len || this.charSpacing || path; + charsToRender += line[i]; + charBox = this.__charBounds[lineIndex][i]; + if (boxWidth === 0) { + left += sign * (charBox.kernedWidth - charBox.width); + boxWidth += charBox.width; + } + else { + boxWidth += charBox.kernedWidth; + } + if (isJustify && !timeToRender) { + if (this._reSpaceAndTab.test(line[i])) { + timeToRender = true; + } + } + if (!timeToRender) { + // if we have charSpacing, we render char by char + actualStyle = actualStyle || this.getCompleteStyleDeclaration(lineIndex, i); + nextStyle = this.getCompleteStyleDeclaration(lineIndex, i + 1); + timeToRender = this._hasStyleChanged(actualStyle, nextStyle); + } + if (timeToRender) { + if (path) { + ctx.save(); + ctx.translate(charBox.renderLeft, charBox.renderTop); + ctx.rotate(charBox.angle); + this._renderChar(method, ctx, lineIndex, i, charsToRender, -boxWidth / 2, 0, lineHeight); + ctx.restore(); + } + else { + drawingLeft = left; + ctx.canvas.setAttribute('dir', isLtr ? 'ltr' : 'rtl'); + ctx.direction = isLtr ? 'ltr' : 'rtl'; + ctx.textAlign = isLtr ? 'left' : 'right'; + this._renderChar(method, ctx, lineIndex, i, charsToRender, drawingLeft, top, lineHeight); + } + charsToRender = ''; + actualStyle = nextStyle; + left += sign * boxWidth; + boxWidth = 0; + } + } + ctx.restore(); + }, -/** - * Align with cropzone ratio - * @param {string} selectedCorner - selected corner type - * @returns {{width: number, height: number}} - * @private - */ -function cornerTypeValid(selectedCorner) { - return CORNER_TYPE_LIST.indexOf(selectedCorner) >= 0; -} + /** + * This function try to patch the missing gradientTransform on canvas gradients. + * transforming a context to transform the gradient, is going to transform the stroke too. + * we want to transform the gradient but not the stroke operation, so we create + * a transformed gradient on a pattern and then we use the pattern instead of the gradient. + * this method has drawbacks: is slow, is in low resolution, needs a patch for when the size + * is limited. + * @private + * @param {fabric.Gradient} filler a fabric gradient instance + * @return {CanvasPattern} a pattern to use as fill/stroke style + */ + _applyPatternGradientTransformText: function(filler) { + var pCanvas = fabric.util.createCanvasElement(), pCtx, + // TODO: verify compatibility with strokeUniform + width = this.width + this.strokeWidth, height = this.height + this.strokeWidth; + pCanvas.width = width; + pCanvas.height = height; + pCtx = pCanvas.getContext('2d'); + pCtx.beginPath(); pCtx.moveTo(0, 0); pCtx.lineTo(width, 0); pCtx.lineTo(width, height); + pCtx.lineTo(0, height); pCtx.closePath(); + pCtx.translate(width / 2, height / 2); + pCtx.fillStyle = filler.toLive(pCtx); + this._applyPatternGradientTransform(pCtx, filler); + pCtx.fill(); + return pCtx.createPattern(pCanvas, 'no-repeat'); + }, -/** - * return scale basis type - * @param {number} diffX - X distance of the cursor and corner. - * @param {number} diffY - Y distance of the cursor and corner. - * @returns {string} - * @private - */ -function getScaleBasis(diffX, diffY) { - return diffX > diffY ? 'width' : 'height'; -} + handleFiller: function(ctx, property, filler) { + var offsetX, offsetY; + if (filler.toLive) { + if (filler.gradientUnits === 'percentage' || filler.gradientTransform || filler.patternTransform) { + // need to transform gradient in a pattern. + // this is a slow process. If you are hitting this codepath, and the object + // is not using caching, you should consider switching it on. + // we need a canvas as big as the current object caching canvas. + offsetX = -this.width / 2; + offsetY = -this.height / 2; + ctx.translate(offsetX, offsetY); + ctx[property] = this._applyPatternGradientTransformText(filler); + return { offsetX: offsetX, offsetY: offsetY }; + } + else { + // is a simple gradient or pattern + ctx[property] = filler.toLive(ctx, this); + return this._applyPatternGradientTransform(ctx, filler); + } + } + else { + // is a color + ctx[property] = filler; + } + return { offsetX: 0, offsetY: 0 }; + }, -/** - * Cropzone object - * Issue: IE7, 8(with excanvas) - * - Cropzone is a black zone without transparency. - * @class Cropzone - * @extends {fabric.Rect} - * @ignore - */ -var Cropzone = _fabric2.default.util.createClass(_fabric2.default.Rect, -/** @lends Cropzone.prototype */{ - /** - * Constructor - * @param {Object} canvas canvas - * @param {Object} options Options object - * @param {Object} extendsOptions object for extends "options" - * @override - */ - initialize: function initialize(canvas, options, extendsOptions) { - options = _tuiCodeSnippet2.default.extend(options, extendsOptions); - options.type = 'cropzone'; + _setStrokeStyles: function(ctx, decl) { + ctx.lineWidth = decl.strokeWidth; + ctx.lineCap = this.strokeLineCap; + ctx.lineDashOffset = this.strokeDashOffset; + ctx.lineJoin = this.strokeLineJoin; + ctx.miterLimit = this.strokeMiterLimit; + return this.handleFiller(ctx, 'strokeStyle', decl.stroke); + }, - this.callSuper('initialize', options); - this._addEventHandler(); + _setFillStyles: function(ctx, decl) { + return this.handleFiller(ctx, 'fillStyle', decl.fill); + }, - this.canvas = canvas; - this.options = options; - }, - canvasEventDelegation: function canvasEventDelegation(eventName) { - var delegationState = 'unregistered'; - var isRegistered = this.canvasEventTrigger[eventName] !== NOOP_FUNCTION; - if (isRegistered) { - delegationState = 'registered'; - } else if ([_consts.eventNames.OBJECT_MOVED, _consts.eventNames.OBJECT_SCALED].indexOf(eventName) < 0) { - delegationState = 'none'; - } + /** + * @private + * @param {String} method + * @param {CanvasRenderingContext2D} ctx Context to render on + * @param {Number} lineIndex + * @param {Number} charIndex + * @param {String} _char + * @param {Number} left Left coordinate + * @param {Number} top Top coordinate + * @param {Number} lineHeight Height of the line + */ + _renderChar: function(method, ctx, lineIndex, charIndex, _char, left, top) { + var decl = this._getStyleDeclaration(lineIndex, charIndex), + fullDecl = this.getCompleteStyleDeclaration(lineIndex, charIndex), + shouldFill = method === 'fillText' && fullDecl.fill, + shouldStroke = method === 'strokeText' && fullDecl.stroke && fullDecl.strokeWidth, + fillOffsets, strokeOffsets; - return delegationState; - }, - canvasEventRegister: function canvasEventRegister(eventName, eventTrigger) { - this.canvasEventTrigger[eventName] = eventTrigger; - }, - _addEventHandler: function _addEventHandler() { - var _canvasEventTrigger; + if (!shouldStroke && !shouldFill) { + return; + } + ctx.save(); - this.canvasEventTrigger = (_canvasEventTrigger = {}, _defineProperty(_canvasEventTrigger, _consts.eventNames.OBJECT_MOVED, NOOP_FUNCTION), _defineProperty(_canvasEventTrigger, _consts.eventNames.OBJECT_SCALED, NOOP_FUNCTION), _canvasEventTrigger); - this.on({ - moving: this._onMoving.bind(this), - scaling: this._onScaling.bind(this) - }); - _fabric2.default.util.addListener(document, 'keydown', this._onKeyDown.bind(this)); - _fabric2.default.util.addListener(document, 'keyup', this._onKeyUp.bind(this)); - }, - _renderCropzone: function _renderCropzone(ctx) { - var cropzoneDashLineWidth = 7; - var cropzoneDashLineOffset = 7; + shouldFill && (fillOffsets = this._setFillStyles(ctx, fullDecl)); + shouldStroke && (strokeOffsets = this._setStrokeStyles(ctx, fullDecl)); - // Calc original scale - var originalFlipX = this.flipX ? -1 : 1; - var originalFlipY = this.flipY ? -1 : 1; - var originalScaleX = originalFlipX / this.scaleX; - var originalScaleY = originalFlipY / this.scaleY; + ctx.font = this._getFontDeclaration(fullDecl); - // Set original scale - ctx.scale(originalScaleX, originalScaleY); - // Render outer rect - this._fillOuterRect(ctx, 'rgba(0, 0, 0, 0.5)'); + if (decl && decl.textBackgroundColor) { + this._removeShadow(ctx); + } + if (decl && decl.deltaY) { + top += decl.deltaY; + } + shouldFill && ctx.fillText(_char, left - fillOffsets.offsetX, top - fillOffsets.offsetY); + shouldStroke && ctx.strokeText(_char, left - strokeOffsets.offsetX, top - strokeOffsets.offsetY); + ctx.restore(); + }, - if (this.options.lineWidth) { - this._fillInnerRect(ctx); - this._strokeBorder(ctx, 'rgb(255, 255, 255)', { - lineWidth: this.options.lineWidth - }); - } else { - // Black dash line - this._strokeBorder(ctx, 'rgb(0, 0, 0)', { - lineDashWidth: cropzoneDashLineWidth - }); + /** + * Turns the character into a 'superior figure' (i.e. 'superscript') + * @param {Number} start selection start + * @param {Number} end selection end + * @returns {fabric.Text} thisArg + * @chainable + */ + setSuperscript: function(start, end) { + return this._setScript(start, end, this.superscript); + }, - // White dash line - this._strokeBorder(ctx, 'rgb(255, 255, 255)', { - lineDashWidth: cropzoneDashLineWidth, - lineDashOffset: cropzoneDashLineOffset - }); - } + /** + * Turns the character into an 'inferior figure' (i.e. 'subscript') + * @param {Number} start selection start + * @param {Number} end selection end + * @returns {fabric.Text} thisArg + * @chainable + */ + setSubscript: function(start, end) { + return this._setScript(start, end, this.subscript); + }, - // Reset scale - ctx.scale(1 / originalScaleX, 1 / originalScaleY); - }, + /** + * Applies 'schema' at given position + * @private + * @param {Number} start selection start + * @param {Number} end selection end + * @param {Number} schema + * @returns {fabric.Text} thisArg + * @chainable + */ + _setScript: function(start, end, schema) { + var loc = this.get2DCursorLocation(start, true), + fontSize = this.getValueOfPropertyAt(loc.lineIndex, loc.charIndex, 'fontSize'), + dy = this.getValueOfPropertyAt(loc.lineIndex, loc.charIndex, 'deltaY'), + style = { fontSize: fontSize * schema.size, deltaY: dy + fontSize * schema.baseline }; + this.setSelectionStyles(style, start, end); + return this; + }, + /** + * @private + * @param {Object} prevStyle + * @param {Object} thisStyle + */ + _hasStyleChanged: function(prevStyle, thisStyle) { + return prevStyle.fill !== thisStyle.fill || + prevStyle.stroke !== thisStyle.stroke || + prevStyle.strokeWidth !== thisStyle.strokeWidth || + prevStyle.fontSize !== thisStyle.fontSize || + prevStyle.fontFamily !== thisStyle.fontFamily || + prevStyle.fontWeight !== thisStyle.fontWeight || + prevStyle.fontStyle !== thisStyle.fontStyle || + prevStyle.deltaY !== thisStyle.deltaY; + }, - /** - * Render Crop-zone - * @private - * @override - */ - _render: function _render(ctx) { - this.callSuper('_render', ctx); + /** + * @private + * @param {Object} prevStyle + * @param {Object} thisStyle + */ + _hasStyleChangedForSvg: function(prevStyle, thisStyle) { + return this._hasStyleChanged(prevStyle, thisStyle) || + prevStyle.overline !== thisStyle.overline || + prevStyle.underline !== thisStyle.underline || + prevStyle.linethrough !== thisStyle.linethrough; + }, - this._renderCropzone(ctx); - }, + /** + * @private + * @param {Number} lineIndex index text line + * @return {Number} Line left offset + */ + _getLineLeftOffset: function(lineIndex) { + var lineWidth = this.getLineWidth(lineIndex), + lineDiff = this.width - lineWidth, textAlign = this.textAlign, direction = this.direction, + isEndOfWrapping, leftOffset = 0, isEndOfWrapping = this.isEndOfWrapping(lineIndex); + if (textAlign === 'justify' + || (textAlign === 'justify-center' && !isEndOfWrapping) + || (textAlign === 'justify-right' && !isEndOfWrapping) + || (textAlign === 'justify-left' && !isEndOfWrapping) + ) { + return 0; + } + if (textAlign === 'center') { + leftOffset = lineDiff / 2; + } + if (textAlign === 'right') { + leftOffset = lineDiff; + } + if (textAlign === 'justify-center') { + leftOffset = lineDiff / 2; + } + if (textAlign === 'justify-right') { + leftOffset = lineDiff; + } + if (direction === 'rtl') { + leftOffset -= lineDiff; + } + return leftOffset; + }, + /** + * @private + */ + _clearCache: function() { + this.__lineWidths = []; + this.__lineHeights = []; + this.__charBounds = []; + }, - /** - * Cropzone-coordinates with outer rectangle - * - * x0 x1 x2 x3 - * y0 +--------------------------+ - * |///////|//////////|///////| // <--- "Outer-rectangle" - * |///////|//////////|///////| - * y1 +-------+----------+-------+ - * |///////| Cropzone |///////| Cropzone is the "Inner-rectangle" - * |///////| (0, 0) |///////| Center point (0, 0) - * y2 +-------+----------+-------+ - * |///////|//////////|///////| - * |///////|//////////|///////| - * y3 +--------------------------+ - * - * @typedef {{x: Array, y: Array}} cropzoneCoordinates - * @ignore - */ + /** + * @private + */ + _shouldClearDimensionCache: function() { + var shouldClear = this._forceClearCache; + shouldClear || (shouldClear = this.hasStateChanged('_dimensionAffectingProps')); + if (shouldClear) { + this.dirty = true; + this._forceClearCache = false; + } + return shouldClear; + }, - /** - * Fill outer rectangle - * @param {CanvasRenderingContext2D} ctx - Context - * @param {string|CanvasGradient|CanvasPattern} fillStyle - Fill-style - * @private - */ - _fillOuterRect: function _fillOuterRect(ctx, fillStyle) { - var _getCoordinates = this._getCoordinates(), - x = _getCoordinates.x, - y = _getCoordinates.y; + /** + * Measure a single line given its index. Used to calculate the initial + * text bounding box. The values are calculated and stored in __lineWidths cache. + * @private + * @param {Number} lineIndex line number + * @return {Number} Line width + */ + getLineWidth: function(lineIndex) { + if (this.__lineWidths[lineIndex]) { + return this.__lineWidths[lineIndex]; + } - ctx.save(); - ctx.fillStyle = fillStyle; - ctx.beginPath(); + var width, line = this._textLines[lineIndex], lineInfo; - // Outer rectangle - // Numbers are +/-1 so that overlay edges don't get blurry. - ctx.moveTo(x[0] - 1, y[0] - 1); - ctx.lineTo(x[3] + 1, y[0] - 1); - ctx.lineTo(x[3] + 1, y[3] + 1); - ctx.lineTo(x[0] - 1, y[3] + 1); - ctx.lineTo(x[0] - 1, y[0] - 1); - ctx.closePath(); + if (line === '') { + width = 0; + } + else { + lineInfo = this.measureLine(lineIndex); + width = lineInfo.width; + } + this.__lineWidths[lineIndex] = width; + return width; + }, - // Inner rectangle - ctx.moveTo(x[1], y[1]); - ctx.lineTo(x[1], y[2]); - ctx.lineTo(x[2], y[2]); - ctx.lineTo(x[2], y[1]); - ctx.lineTo(x[1], y[1]); - ctx.closePath(); + _getWidthOfCharSpacing: function() { + if (this.charSpacing !== 0) { + return this.fontSize * this.charSpacing / 1000; + } + return 0; + }, - ctx.fill(); - ctx.restore(); - }, + /** + * Retrieves the value of property at given character position + * @param {Number} lineIndex the line number + * @param {Number} charIndex the character number + * @param {String} property the property name + * @returns the value of 'property' + */ + getValueOfPropertyAt: function(lineIndex, charIndex, property) { + var charStyle = this._getStyleDeclaration(lineIndex, charIndex); + if (charStyle && typeof charStyle[property] !== 'undefined') { + return charStyle[property]; + } + return this[property]; + }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _renderTextDecoration: function(ctx, type) { + if (!this[type] && !this.styleHas(type)) { + return; + } + var heightOfLine, size, _size, + lineLeftOffset, dy, _dy, + line, lastDecoration, + leftOffset = this._getLeftOffset(), + topOffset = this._getTopOffset(), top, + boxStart, boxWidth, charBox, currentDecoration, + maxHeight, currentFill, lastFill, path = this.path, + charSpacing = this._getWidthOfCharSpacing(), + offsetY = this.offsets[type]; + + for (var i = 0, len = this._textLines.length; i < len; i++) { + heightOfLine = this.getHeightOfLine(i); + if (!this[type] && !this.styleHas(type, i)) { + topOffset += heightOfLine; + continue; + } + line = this._textLines[i]; + maxHeight = heightOfLine / this.lineHeight; + lineLeftOffset = this._getLineLeftOffset(i); + boxStart = 0; + boxWidth = 0; + lastDecoration = this.getValueOfPropertyAt(i, 0, type); + lastFill = this.getValueOfPropertyAt(i, 0, 'fill'); + top = topOffset + maxHeight * (1 - this._fontSizeFraction); + size = this.getHeightOfChar(i, 0); + dy = this.getValueOfPropertyAt(i, 0, 'deltaY'); + for (var j = 0, jlen = line.length; j < jlen; j++) { + charBox = this.__charBounds[i][j]; + currentDecoration = this.getValueOfPropertyAt(i, j, type); + currentFill = this.getValueOfPropertyAt(i, j, 'fill'); + _size = this.getHeightOfChar(i, j); + _dy = this.getValueOfPropertyAt(i, j, 'deltaY'); + if (path && currentDecoration && currentFill) { + ctx.save(); + ctx.fillStyle = lastFill; + ctx.translate(charBox.renderLeft, charBox.renderTop); + ctx.rotate(charBox.angle); + ctx.fillRect( + -charBox.kernedWidth / 2, + offsetY * _size + _dy, + charBox.kernedWidth, + this.fontSize / 15 + ); + ctx.restore(); + } + else if ( + (currentDecoration !== lastDecoration || currentFill !== lastFill || _size !== size || _dy !== dy) + && boxWidth > 0 + ) { + var drawStart = leftOffset + lineLeftOffset + boxStart; + if (this.direction === 'rtl') { + drawStart = this.width - drawStart - boxWidth; + } + if (lastDecoration && lastFill) { + ctx.fillStyle = lastFill; + ctx.fillRect( + drawStart, + top + offsetY * size + dy, + boxWidth, + this.fontSize / 15 + ); + } + boxStart = charBox.left; + boxWidth = charBox.width; + lastDecoration = currentDecoration; + lastFill = currentFill; + size = _size; + dy = _dy; + } + else { + boxWidth += charBox.kernedWidth; + } + } + var drawStart = leftOffset + lineLeftOffset + boxStart; + if (this.direction === 'rtl') { + drawStart = this.width - drawStart - boxWidth; + } + ctx.fillStyle = currentFill; + currentDecoration && currentFill && ctx.fillRect( + drawStart, + top + offsetY * size + dy, + boxWidth - charSpacing, + this.fontSize / 15 + ); + topOffset += heightOfLine; + } + // if there is text background color no + // other shadows should be casted + this._removeShadow(ctx); + }, - /** - * Draw Inner grid line - * @param {CanvasRenderingContext2D} ctx - Context - * @private - */ - _fillInnerRect: function _fillInnerRect(ctx) { - var _getCoordinates2 = this._getCoordinates(), - outerX = _getCoordinates2.x, - outerY = _getCoordinates2.y; + /** + * return font declaration string for canvas context + * @param {Object} [styleObject] object + * @returns {String} font declaration formatted for canvas context. + */ + _getFontDeclaration: function(styleObject, forMeasuring) { + var style = styleObject || this, family = this.fontFamily, + fontIsGeneric = fabric.Text.genericFonts.indexOf(family.toLowerCase()) > -1; + var fontFamily = family === undefined || + family.indexOf('\'') > -1 || family.indexOf(',') > -1 || + family.indexOf('"') > -1 || fontIsGeneric + ? style.fontFamily : '"' + style.fontFamily + '"'; + return [ + // node-canvas needs "weight style", while browsers need "style weight" + // verify if this can be fixed in JSDOM + (fabric.isLikelyNode ? style.fontWeight : style.fontStyle), + (fabric.isLikelyNode ? style.fontStyle : style.fontWeight), + forMeasuring ? this.CACHE_FONT_SIZE + 'px' : style.fontSize + 'px', + fontFamily + ].join(' '); + }, - var x = this._caculateInnerPosition(outerX, (outerX[2] - outerX[1]) / 3); - var y = this._caculateInnerPosition(outerY, (outerY[2] - outerY[1]) / 3); + /** + * Renders text instance on a specified context + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + render: function(ctx) { + // do not render if object is not visible + if (!this.visible) { + return; + } + if (this.canvas && this.canvas.skipOffscreen && !this.group && !this.isOnScreen()) { + return; + } + if (this._shouldClearDimensionCache()) { + this.initDimensions(); + } + this.callSuper('render', ctx); + }, - ctx.save(); - ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'; - ctx.lineWidth = this.options.lineWidth; - ctx.beginPath(); - - ctx.moveTo(x[0], y[1]); - ctx.lineTo(x[3], y[1]); - - ctx.moveTo(x[0], y[2]); - ctx.lineTo(x[3], y[2]); - - ctx.moveTo(x[1], y[0]); - ctx.lineTo(x[1], y[3]); + /** + * Returns the text as an array of lines. + * @param {String} text text to split + * @returns {Array} Lines in the text + */ + _splitTextIntoLines: function(text) { + var lines = text.split(this._reNewline), + newLines = new Array(lines.length), + newLine = ['\n'], + newText = []; + for (var i = 0; i < lines.length; i++) { + newLines[i] = fabric.util.string.graphemeSplit(lines[i]); + newText = newText.concat(newLines[i], newLine); + } + newText.pop(); + return { _unwrappedLines: newLines, lines: lines, graphemeText: newText, graphemeLines: newLines }; + }, - ctx.moveTo(x[2], y[0]); - ctx.lineTo(x[2], y[3]); - ctx.stroke(); - ctx.closePath(); + /** + * Returns object representation of an instance + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} Object representation of an instance + */ + toObject: function(propertiesToInclude) { + var allProperties = additionalProps.concat(propertiesToInclude); + var obj = this.callSuper('toObject', allProperties); + // styles will be overridden with a properly cloned structure + obj.styles = clone(this.styles, true); + if (obj.path) { + obj.path = this.path.toObject(); + } + return obj; + }, - ctx.restore(); - }, + /** + * Sets property to a given value. When changing position/dimension -related properties (left, top, scale, angle, etc.) `set` does not update position of object's borders/controls. If you need to update those, call `setCoords()`. + * @param {String|Object} key Property name or object (if object, iterate over the object properties) + * @param {Object|Function} value Property value (if function, the value is passed into it and its return value is used as a new one) + * @return {fabric.Object} thisArg + * @chainable + */ + set: function(key, value) { + this.callSuper('set', key, value); + var needsDims = false; + var isAddingPath = false; + if (typeof key === 'object') { + for (var _key in key) { + if (_key === 'path') { + this.setPathInfo(); + } + needsDims = needsDims || this._dimensionAffectingProps.indexOf(_key) !== -1; + isAddingPath = isAddingPath || _key === 'path'; + } + } + else { + needsDims = this._dimensionAffectingProps.indexOf(key) !== -1; + isAddingPath = key === 'path'; + } + if (isAddingPath) { + this.setPathInfo(); + } + if (needsDims) { + this.initDimensions(); + this.setCoords(); + } + return this; + }, + /** + * Returns complexity of an instance + * @return {Number} complexity + */ + complexity: function() { + return 1; + } + }); + /* _FROM_SVG_START_ */ /** - * Calculate Inner Position - * @param {Array} outer - outer position - * @param {number} size - interval for calculate - * @returns {Array} - inner position - * @private + * List of attribute names to account for when parsing SVG element (used by {@link fabric.Text.fromElement}) + * @static + * @memberOf fabric.Text + * @see: http://www.w3.org/TR/SVG/text.html#TextElement */ - _caculateInnerPosition: function _caculateInnerPosition(outer, size) { - var position = []; - position[0] = outer[1]; - position[1] = outer[1] + size; - position[2] = outer[1] + size * 2; - position[3] = outer[2]; - - return position; - }, - + fabric.Text.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat( + 'x y dx dy font-family font-style font-weight font-size letter-spacing text-decoration text-anchor'.split(' ')); /** - * Get coordinates - * @returns {cropzoneCoordinates} - {@link cropzoneCoordinates} - * @private + * Default SVG font size + * @static + * @memberOf fabric.Text */ - _getCoordinates: function _getCoordinates() { - var canvas = this.canvas, - width = this.width, - height = this.height, - left = this.left, - top = this.top; - - var halfWidth = width / 2; - var halfHeight = height / 2; - var canvasHeight = canvas.getHeight(); // fabric object - var canvasWidth = canvas.getWidth(); // fabric object - - return { - x: _tuiCodeSnippet2.default.map([-(halfWidth + left), // x0 - -halfWidth, // x1 - halfWidth, // x2 - halfWidth + (canvasWidth - left - width)], Math.ceil), - y: _tuiCodeSnippet2.default.map([-(halfHeight + top), // y0 - -halfHeight, // y1 - halfHeight, // y2 - halfHeight + (canvasHeight - top - height)], Math.ceil) - }; - }, - + fabric.Text.DEFAULT_SVG_FONT_SIZE = 16; /** - * Stroke border - * @param {CanvasRenderingContext2D} ctx - Context - * @param {string|CanvasGradient|CanvasPattern} strokeStyle - Stroke-style - * @param {number} lineDashWidth - Dash width - * @param {number} [lineDashOffset] - Dash offset - * @param {number} [lineWidth] - line width - * @private + * Returns fabric.Text instance from an SVG element (not yet implemented) + * @static + * @memberOf fabric.Text + * @param {SVGElement} element Element to parse + * @param {Function} callback callback function invoked after parsing + * @param {Object} [options] Options object */ - _strokeBorder: function _strokeBorder(ctx, strokeStyle, _ref) { - var lineDashWidth = _ref.lineDashWidth, - lineDashOffset = _ref.lineDashOffset, - lineWidth = _ref.lineWidth; - - var halfWidth = this.width / 2; - var halfHeight = this.height / 2; + fabric.Text.fromElement = function(element, callback, options) { + if (!element) { + return callback(null); + } - ctx.save(); - ctx.strokeStyle = strokeStyle; + var parsedAttributes = fabric.parseAttributes(element, fabric.Text.ATTRIBUTE_NAMES), + parsedAnchor = parsedAttributes.textAnchor || 'left'; + options = fabric.util.object.extend((options ? clone(options) : { }), parsedAttributes); - if (ctx.setLineDash) { - ctx.setLineDash([lineDashWidth, lineDashWidth]); + options.top = options.top || 0; + options.left = options.left || 0; + if (parsedAttributes.textDecoration) { + var textDecoration = parsedAttributes.textDecoration; + if (textDecoration.indexOf('underline') !== -1) { + options.underline = true; + } + if (textDecoration.indexOf('overline') !== -1) { + options.overline = true; + } + if (textDecoration.indexOf('line-through') !== -1) { + options.linethrough = true; + } + delete options.textDecoration; } - if (lineDashOffset) { - ctx.lineDashOffset = lineDashOffset; + if ('dx' in parsedAttributes) { + options.left += parsedAttributes.dx; } - if (lineWidth) { - ctx.lineWidth = lineWidth; + if ('dy' in parsedAttributes) { + options.top += parsedAttributes.dy; + } + if (!('fontSize' in options)) { + options.fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE; } - ctx.beginPath(); - ctx.moveTo(-halfWidth, -halfHeight); - ctx.lineTo(halfWidth, -halfHeight); - ctx.lineTo(halfWidth, halfHeight); - ctx.lineTo(-halfWidth, halfHeight); - ctx.lineTo(-halfWidth, -halfHeight); - ctx.stroke(); + var textContent = ''; - ctx.restore(); - }, + // The XML is not properly parsed in IE9 so a workaround to get + // textContent is through firstChild.data. Another workaround would be + // to convert XML loaded from a file to be converted using DOMParser (same way loadSVGFromString() does) + if (!('textContent' in element)) { + if ('firstChild' in element && element.firstChild !== null) { + if ('data' in element.firstChild && element.firstChild.data !== null) { + textContent = element.firstChild.data; + } + } + } + else { + textContent = element.textContent; + } + + textContent = textContent.replace(/^\s+|\s+$|\n+/g, '').replace(/\s+/g, ' '); + var originalStrokeWidth = options.strokeWidth; + options.strokeWidth = 0; + var text = new fabric.Text(textContent, options), + textHeightScaleFactor = text.getScaledHeight() / text.height, + lineHeightDiff = (text.height + text.strokeWidth) * text.lineHeight - text.height, + scaledDiff = lineHeightDiff * textHeightScaleFactor, + textHeight = text.getScaledHeight() + scaledDiff, + offX = 0; + /* + Adjust positioning: + x/y attributes in SVG correspond to the bottom-left corner of text bounding box + fabric output by default at top, left. + */ + if (parsedAnchor === 'center') { + offX = text.getScaledWidth() / 2; + } + if (parsedAnchor === 'right') { + offX = text.getScaledWidth(); + } + text.set({ + left: text.left - offX, + top: text.top - (textHeight - text.fontSize * (0.07 + text._fontSizeFraction)) / text.lineHeight, + strokeWidth: typeof originalStrokeWidth !== 'undefined' ? originalStrokeWidth : 1, + }); + callback(text); + }; + /* _FROM_SVG_END_ */ /** - * onMoving event listener - * @private + * Returns fabric.Text instance from an object representation + * @static + * @memberOf fabric.Text + * @param {Object} object plain js Object to create an instance from + * @param {Function} [callback] Callback to invoke when an fabric.Text instance is created */ - _onMoving: function _onMoving() { - var height = this.height, - width = this.width, - left = this.left, - top = this.top; + fabric.Text.fromObject = function(object, callback) { + var objectCopy = clone(object), path = object.path; + delete objectCopy.path; + return fabric.Object._fromObject('Text', objectCopy, function(textInstance) { + if (path) { + fabric.Object._fromObject('Path', path, function(pathInstance) { + textInstance.set('path', pathInstance); + callback(textInstance); + }, 'path'); + } + else { + callback(textInstance); + } + }, 'text'); + }; - var maxLeft = this.canvas.getWidth() - width; - var maxTop = this.canvas.getHeight() - height; + fabric.Text.genericFonts = ['sans-serif', 'serif', 'cursive', 'fantasy', 'monospace']; - this.left = (0, _util.clamp)(left, 0, maxLeft); - this.top = (0, _util.clamp)(top, 0, maxTop); + fabric.util.createAccessors && fabric.util.createAccessors(fabric.Text); - this.canvasEventTrigger[_consts.eventNames.OBJECT_MOVED](this); - }, +})( true ? exports : 0); - /** - * onScaling event listener - * @param {{e: MouseEvent}} fEvent - Fabric event - * @private - */ - _onScaling: function _onScaling(fEvent) { - var selectedCorner = fEvent.transform.corner; - var pointer = this.canvas.getPointer(fEvent.e); - var settings = this._calcScalingSizeFromPointer(pointer, selectedCorner); +(function() { + fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototype */ { + /** + * Returns true if object has no styling or no styling in a line + * @param {Number} lineIndex , lineIndex is on wrapped lines. + * @return {Boolean} + */ + isEmptyStyles: function(lineIndex) { + if (!this.styles) { + return true; + } + if (typeof lineIndex !== 'undefined' && !this.styles[lineIndex]) { + return true; + } + var obj = typeof lineIndex === 'undefined' ? this.styles : { line: this.styles[lineIndex] }; + for (var p1 in obj) { + for (var p2 in obj[p1]) { + // eslint-disable-next-line no-unused-vars + for (var p3 in obj[p1][p2]) { + return false; + } + } + } + return true; + }, - // On scaling cropzone, - // change real width and height and fix scaleFactor to 1 - this.scale(1).set(settings); + /** + * Returns true if object has a style property or has it ina specified line + * This function is used to detect if a text will use a particular property or not. + * @param {String} property to check for + * @param {Number} lineIndex to check the style on + * @return {Boolean} + */ + styleHas: function(property, lineIndex) { + if (!this.styles || !property || property === '') { + return false; + } + if (typeof lineIndex !== 'undefined' && !this.styles[lineIndex]) { + return false; + } + var obj = typeof lineIndex === 'undefined' ? this.styles : { 0: this.styles[lineIndex] }; + // eslint-disable-next-line + for (var p1 in obj) { + // eslint-disable-next-line + for (var p2 in obj[p1]) { + if (typeof obj[p1][p2][property] !== 'undefined') { + return true; + } + } + } + return false; + }, - this.canvasEventTrigger[_consts.eventNames.OBJECT_SCALED](this); - }, + /** + * Check if characters in a text have a value for a property + * whose value matches the textbox's value for that property. If so, + * the character-level property is deleted. If the character + * has no other properties, then it is also deleted. Finally, + * if the line containing that character has no other characters + * then it also is deleted. + * + * @param {string} property The property to compare between characters and text. + */ + cleanStyle: function(property) { + if (!this.styles || !property || property === '') { + return false; + } + var obj = this.styles, stylesCount = 0, letterCount, stylePropertyValue, + allStyleObjectPropertiesMatch = true, graphemeCount = 0, styleObject; + // eslint-disable-next-line + for (var p1 in obj) { + letterCount = 0; + // eslint-disable-next-line + for (var p2 in obj[p1]) { + var styleObject = obj[p1][p2], + stylePropertyHasBeenSet = styleObject.hasOwnProperty(property); + + stylesCount++; + + if (stylePropertyHasBeenSet) { + if (!stylePropertyValue) { + stylePropertyValue = styleObject[property]; + } + else if (styleObject[property] !== stylePropertyValue) { + allStyleObjectPropertiesMatch = false; + } + if (styleObject[property] === this[property]) { + delete styleObject[property]; + } + } + else { + allStyleObjectPropertiesMatch = false; + } - /** - * Calc scaled size from mouse pointer with selected corner - * @param {{x: number, y: number}} pointer - Mouse position - * @param {string} selectedCorner - selected corner type - * @returns {Object} Having left or(and) top or(and) width or(and) height. - * @private - */ - _calcScalingSizeFromPointer: function _calcScalingSizeFromPointer(pointer, selectedCorner) { - var isCornerTypeValid = cornerTypeValid(selectedCorner); + if (Object.keys(styleObject).length !== 0) { + letterCount++; + } + else { + delete obj[p1][p2]; + } + } - return isCornerTypeValid && this._resizeCropZone(pointer, selectedCorner); - }, + if (letterCount === 0) { + delete obj[p1]; + } + } + // if every grapheme has the same style set then + // delete those styles and set it on the parent + for (var i = 0; i < this._textLines.length; i++) { + graphemeCount += this._textLines[i].length; + } + if (allStyleObjectPropertiesMatch && stylesCount === graphemeCount) { + this[property] = stylePropertyValue; + this.removeStyle(property); + } + }, + /** + * Remove a style property or properties from all individual character styles + * in a text object. Deletes the character style object if it contains no other style + * props. Deletes a line style object if it contains no other character styles. + * + * @param {String} props The property to remove from character styles. + */ + removeStyle: function(property) { + if (!this.styles || !property || property === '') { + return; + } + var obj = this.styles, line, lineNum, charNum; + for (lineNum in obj) { + line = obj[lineNum]; + for (charNum in line) { + delete line[charNum][property]; + if (Object.keys(line[charNum]).length === 0) { + delete line[charNum]; + } + } + if (Object.keys(line).length === 0) { + delete obj[lineNum]; + } + } + }, - /** - * Align with cropzone ratio - * @param {number} width - cropzone width - * @param {number} height - cropzone height - * @param {number} maxWidth - limit max width - * @param {number} maxHeight - limit max height - * @param {number} scaleTo - cropzone ratio - * @returns {{width: number, height: number}} - * @private - */ - adjustRatioCropzoneSize: function adjustRatioCropzoneSize(_ref2) { - var width = _ref2.width, - height = _ref2.height, - leftMaker = _ref2.leftMaker, - topMaker = _ref2.topMaker, - maxWidth = _ref2.maxWidth, - maxHeight = _ref2.maxHeight, - scaleTo = _ref2.scaleTo; + /** + * @private + */ + _extendStyles: function(index, styles) { + var loc = this.get2DCursorLocation(index); - width = maxWidth ? (0, _util.clamp)(width, 1, maxWidth) : width; - height = maxHeight ? (0, _util.clamp)(height, 1, maxHeight) : height; + if (!this._getLineStyle(loc.lineIndex)) { + this._setLineStyle(loc.lineIndex); + } - if (!this.presetRatio) { - if (this._withShiftKey) { - // make fixed ratio cropzone - if (width > height) { - height = width; - } else if (height > width) { - width = height; - } + if (!this._getStyleDeclaration(loc.lineIndex, loc.charIndex)) { + this._setStyleDeclaration(loc.lineIndex, loc.charIndex, {}); } + fabric.util.object.extend(this._getStyleDeclaration(loc.lineIndex, loc.charIndex), styles); + }, + + /** + * Returns 2d representation (lineIndex and charIndex) of cursor (or selection start) + * @param {Number} [selectionStart] Optional index. When not given, current selectionStart is used. + * @param {Boolean} [skipWrapping] consider the location for unwrapped lines. useful to manage styles. + */ + get2DCursorLocation: function(selectionStart, skipWrapping) { + if (typeof selectionStart === 'undefined') { + selectionStart = this.selectionStart; + } + var lines = skipWrapping ? this._unwrappedTextLines : this._textLines, + len = lines.length; + for (var i = 0; i < len; i++) { + if (selectionStart <= lines[i].length) { + return { + lineIndex: i, + charIndex: selectionStart + }; + } + selectionStart -= lines[i].length + this.missingNewlineOffset(i); + } return { - width: width, - height: height, - left: leftMaker(width), - top: topMaker(height) + lineIndex: i - 1, + charIndex: lines[i - 1].length < selectionStart ? lines[i - 1].length : selectionStart }; - } - - if (scaleTo === 'width') { - height = width / this.presetRatio; - } else { - width = height * this.presetRatio; - } - - var maxScaleFactor = Math.min(maxWidth / width, maxHeight / height); - if (maxScaleFactor <= 1) { - var _map = [width, height].map(function (v) { - return v * maxScaleFactor; - }); - - width = _map[0]; - height = _map[1]; - } - - return { - width: width, - height: height, - left: leftMaker(width), - top: topMaker(height) - }; - }, - - - /** - * Get dimension last state cropzone - * @returns {{rectTop: number, rectLeft: number, rectWidth: number, rectHeight: number}} - * @private - */ - _getCropzoneRectInfo: function _getCropzoneRectInfo() { - var _canvas = this.canvas, - canvasWidth = _canvas.width, - canvasHeight = _canvas.height; - - var _getBoundingRect = this.getBoundingRect(false, true), - rectTop = _getBoundingRect.top, - rectLeft = _getBoundingRect.left, - rectWidth = _getBoundingRect.width, - rectHeight = _getBoundingRect.height; - - return { - rectTop: rectTop, - rectLeft: rectLeft, - rectWidth: rectWidth, - rectHeight: rectHeight, - rectRight: rectLeft + rectWidth, - rectBottom: rectTop + rectHeight, - canvasWidth: canvasWidth, - canvasHeight: canvasHeight - }; - }, + }, + /** + * Gets style of a current selection/cursor (at the start position) + * if startIndex or endIndex are not provided, selectionStart or selectionEnd will be used. + * @param {Number} [startIndex] Start index to get styles at + * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1 + * @param {Boolean} [complete] get full style or not + * @return {Array} styles an array with one, zero or more Style objects + */ + getSelectionStyles: function(startIndex, endIndex, complete) { + if (typeof startIndex === 'undefined') { + startIndex = this.selectionStart || 0; + } + if (typeof endIndex === 'undefined') { + endIndex = this.selectionEnd || startIndex; + } + var styles = []; + for (var i = startIndex; i < endIndex; i++) { + styles.push(this.getStyleAtPosition(i, complete)); + } + return styles; + }, - /** - * Calc scaling dimension - * @param {Object} position - Mouse position - * @param {string} corner - corner type - * @returns {{left: number, top: number, width: number, height: number}} - * @private - */ - _resizeCropZone: function _resizeCropZone(_ref3, corner) { - var x = _ref3.x, - y = _ref3.y; + /** + * Gets style of a current selection/cursor position + * @param {Number} position to get styles at + * @param {Boolean} [complete] full style if true + * @return {Object} style Style object at a specified index + * @private + */ + getStyleAtPosition: function(position, complete) { + var loc = this.get2DCursorLocation(position), + style = complete ? this.getCompleteStyleDeclaration(loc.lineIndex, loc.charIndex) : + this._getStyleDeclaration(loc.lineIndex, loc.charIndex); + return style || {}; + }, - var _getCropzoneRectInfo2 = this._getCropzoneRectInfo(), - rectWidth = _getCropzoneRectInfo2.rectWidth, - rectHeight = _getCropzoneRectInfo2.rectHeight, - rectTop = _getCropzoneRectInfo2.rectTop, - rectLeft = _getCropzoneRectInfo2.rectLeft, - rectBottom = _getCropzoneRectInfo2.rectBottom, - rectRight = _getCropzoneRectInfo2.rectRight, - canvasWidth = _getCropzoneRectInfo2.canvasWidth, - canvasHeight = _getCropzoneRectInfo2.canvasHeight; + /** + * Sets style of a current selection, if no selection exist, do not set anything. + * @param {Object} [styles] Styles object + * @param {Number} [startIndex] Start index to get styles at + * @param {Number} [endIndex] End index to get styles at, if not specified selectionEnd or startIndex + 1 + * @return {fabric.IText} thisArg + * @chainable + */ + setSelectionStyles: function(styles, startIndex, endIndex) { + if (typeof startIndex === 'undefined') { + startIndex = this.selectionStart || 0; + } + if (typeof endIndex === 'undefined') { + endIndex = this.selectionEnd || startIndex; + } + for (var i = startIndex; i < endIndex; i++) { + this._extendStyles(i, styles); + } + /* not included in _extendStyles to avoid clearing cache more than once */ + this._forceClearCache = true; + return this; + }, - var resizeInfoMap = { - tl: { - width: rectRight - x, - height: rectBottom - y, - leftMaker: function leftMaker(newWidth) { - return rectRight - newWidth; - }, - topMaker: function topMaker(newHeight) { - return rectBottom - newHeight; - }, - maxWidth: rectRight, - maxHeight: rectBottom, - scaleTo: getScaleBasis(rectLeft - x, rectTop - y) - }, - tr: { - width: x - rectLeft, - height: rectBottom - y, - leftMaker: function leftMaker() { - return rectLeft; - }, - topMaker: function topMaker(newHeight) { - return rectBottom - newHeight; - }, - maxWidth: canvasWidth - rectLeft, - maxHeight: rectBottom, - scaleTo: getScaleBasis(x - rectRight, rectTop - y) - }, - mt: { - width: rectWidth, - height: rectBottom - y, - leftMaker: function leftMaker() { - return rectLeft; - }, - topMaker: function topMaker(newHeight) { - return rectBottom - newHeight; - }, - maxWidth: canvasWidth - rectLeft, - maxHeight: rectBottom, - scaleTo: 'height' - }, - ml: { - width: rectRight - x, - height: rectHeight, - leftMaker: function leftMaker(newWidth) { - return rectRight - newWidth; - }, - topMaker: function topMaker() { - return rectTop; - }, - maxWidth: rectRight, - maxHeight: canvasHeight - rectTop, - scaleTo: 'width' - }, - mr: { - width: x - rectLeft, - height: rectHeight, - leftMaker: function leftMaker() { - return rectLeft; - }, - topMaker: function topMaker() { - return rectTop; - }, - maxWidth: canvasWidth - rectLeft, - maxHeight: canvasHeight - rectTop, - scaleTo: 'width' - }, - mb: { - width: rectWidth, - height: y - rectTop, - leftMaker: function leftMaker() { - return rectLeft; - }, - topMaker: function topMaker() { - return rectTop; - }, - maxWidth: canvasWidth - rectLeft, - maxHeight: canvasHeight - rectTop, - scaleTo: 'height' - }, - bl: { - width: rectRight - x, - height: y - rectTop, - leftMaker: function leftMaker(newWidth) { - return rectRight - newWidth; - }, - topMaker: function topMaker() { - return rectTop; - }, - maxWidth: rectRight, - maxHeight: canvasHeight - rectTop, - scaleTo: getScaleBasis(rectLeft - x, y - rectBottom) - }, - br: { - width: x - rectLeft, - height: y - rectTop, - leftMaker: function leftMaker() { - return rectLeft; - }, - topMaker: function topMaker() { - return rectTop; - }, - maxWidth: canvasWidth - rectLeft, - maxHeight: canvasHeight - rectTop, - scaleTo: getScaleBasis(x - rectRight, y - rectBottom) + /** + * get the reference, not a clone, of the style object for a given character + * @param {Number} lineIndex + * @param {Number} charIndex + * @return {Object} style object + */ + _getStyleDeclaration: function(lineIndex, charIndex) { + var lineStyle = this.styles && this.styles[lineIndex]; + if (!lineStyle) { + return null; } - }; + return lineStyle[charIndex]; + }, - return this.adjustRatioCropzoneSize(resizeInfoMap[corner]); - }, + /** + * return a new object that contains all the style property for a character + * the object returned is newly created + * @param {Number} lineIndex of the line where the character is + * @param {Number} charIndex position of the character on the line + * @return {Object} style object + */ + getCompleteStyleDeclaration: function(lineIndex, charIndex) { + var style = this._getStyleDeclaration(lineIndex, charIndex) || { }, + styleObject = { }, prop; + for (var i = 0; i < this._styleProperties.length; i++) { + prop = this._styleProperties[i]; + styleObject[prop] = typeof style[prop] === 'undefined' ? this[prop] : style[prop]; + } + return styleObject; + }, + /** + * @param {Number} lineIndex + * @param {Number} charIndex + * @param {Object} style + * @private + */ + _setStyleDeclaration: function(lineIndex, charIndex, style) { + this.styles[lineIndex][charIndex] = style; + }, - /** - * Return the whether this cropzone is valid - * @returns {boolean} - */ - isValid: function isValid() { - return this.left >= 0 && this.top >= 0 && this.width > 0 && this.height > 0; - }, + /** + * + * @param {Number} lineIndex + * @param {Number} charIndex + * @private + */ + _deleteStyleDeclaration: function(lineIndex, charIndex) { + delete this.styles[lineIndex][charIndex]; + }, + /** + * @param {Number} lineIndex + * @return {Boolean} if the line exists or not + * @private + */ + _getLineStyle: function(lineIndex) { + return !!this.styles[lineIndex]; + }, - /** - * Keydown event handler - * @param {{number}} keyCode - Event keyCode - * @private - */ - _onKeyDown: function _onKeyDown(_ref4) { - var keyCode = _ref4.keyCode; + /** + * Set the line style to an empty object so that is initialized + * @param {Number} lineIndex + * @private + */ + _setLineStyle: function(lineIndex) { + this.styles[lineIndex] = {}; + }, - if (keyCode === _consts.keyCodes.SHIFT) { - this._withShiftKey = true; + /** + * @param {Number} lineIndex + * @private + */ + _deleteLineStyle: function(lineIndex) { + delete this.styles[lineIndex]; } - }, + }); +})(); - /** - * Keyup event handler - * @param {{number}} keyCode - Event keyCode - * @private - */ - _onKeyUp: function _onKeyUp(_ref5) { - var keyCode = _ref5.keyCode; +(function() { - if (keyCode === _consts.keyCodes.SHIFT) { - this._withShiftKey = false; + function parseDecoration(object) { + if (object.textDecoration) { + object.textDecoration.indexOf('underline') > -1 && (object.underline = true); + object.textDecoration.indexOf('line-through') > -1 && (object.linethrough = true); + object.textDecoration.indexOf('overline') > -1 && (object.overline = true); + delete object.textDecoration; } } -}); -exports.default = Cropzone; + /** + * IText class (introduced in v1.4) Events are also fired with "text:" + * prefix when observing canvas. + * @class fabric.IText + * @extends fabric.Text + * @mixes fabric.Observable + * + * @fires changed + * @fires selection:changed + * @fires editing:entered + * @fires editing:exited + * + * @return {fabric.IText} thisArg + * @see {@link fabric.IText#initialize} for constructor definition + * + *

Supported key combinations:

+ * 
+   *   Move cursor:                    left, right, up, down
+   *   Select character:               shift + left, shift + right
+   *   Select text vertically:         shift + up, shift + down
+   *   Move cursor by word:            alt + left, alt + right
+   *   Select words:                   shift + alt + left, shift + alt + right
+   *   Move cursor to line start/end:  cmd + left, cmd + right or home, end
+   *   Select till start/end of line:  cmd + shift + left, cmd + shift + right or shift + home, shift + end
+   *   Jump to start/end of text:      cmd + up, cmd + down
+   *   Select till start/end of text:  cmd + shift + up, cmd + shift + down or shift + pgUp, shift + pgDown
+   *   Delete character:               backspace
+   *   Delete word:                    alt + backspace
+   *   Delete line:                    cmd + backspace
+   *   Forward delete:                 delete
+   *   Copy text:                      ctrl/cmd + c
+   *   Paste text:                     ctrl/cmd + v
+   *   Cut text:                       ctrl/cmd + x
+   *   Select entire text:             ctrl/cmd + a
+   *   Quit editing                    tab or esc
+   *
+ * + *

Supported mouse/touch combination

+ * 
+   *   Position cursor:                click/touch
+   *   Create selection:               click/touch & drag
+   *   Create selection:               click & shift + click
+   *   Select word:                    double click
+   *   Select line:                    triple click
+   *
+ */ + fabric.IText = fabric.util.createClass(fabric.Text, fabric.Observable, /** @lends fabric.IText.prototype */ { -/***/ }), + /** + * Type of an object + * @type String + * @default + */ + type: 'i-text', -/***/ "./src/js/extension/emboss.js": -/*!************************************!*\ - !*** ./src/js/extension/emboss.js ***! - \************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Index where text selection starts (or where cursor is when there is no selection) + * @type Number + * @default + */ + selectionStart: 0, -"use strict"; + /** + * Index where text selection ends + * @type Number + * @default + */ + selectionEnd: 0, + /** + * Color of text selection + * @type String + * @default + */ + selectionColor: 'rgba(17,119,255,0.3)', -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * Indicates whether text is in editing mode + * @type Boolean + * @default + */ + isEditing: false, -var _fabric = __webpack_require__(/*! fabric */ "fabric"); + /** + * Indicates whether a text can be edited + * @type Boolean + * @default + */ + editable: true, -var _fabric2 = _interopRequireDefault(_fabric); + /** + * Border color of text object while it's in editing mode + * @type String + * @default + */ + editingBorderColor: 'rgba(102,153,255,0.25)', -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Width of cursor (in px) + * @type Number + * @default + */ + cursorWidth: 2, -/** - * Emboss object - * @class Emboss - * @extends {fabric.Image.filters.Convolute} - * @ignore - */ -var Emboss = _fabric2.default.util.createClass(_fabric2.default.Image.filters.Convolute, -/** @lends Convolute.prototype */{ - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Emboss', - - /** - * constructor - * @override - */ - initialize: function initialize() { - this.matrix = [1, 1, 1, 1, 0.7, -1, -1, -1, -1]; - } -}); /** - * @author NHN. FE Development Team - * @fileoverview Emboss extending fabric.Image.filters.Convolute + /** + * Color of text cursor color in editing mode. + * if not set (default) will take color from the text. + * if set to a color value that fabric can understand, it will + * be used instead of the color of the text at the current position. + * @type String + * @default */ -exports.default = Emboss; + cursorColor: '', -/***/ }), - -/***/ "./src/js/extension/mask.js": -/*!**********************************!*\ - !*** ./src/js/extension/mask.js ***! - \**********************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Delay between cursor blink (in ms) + * @type Number + * @default + */ + cursorDelay: 1000, -"use strict"; + /** + * Duration of cursor fadein (in ms) + * @type Number + * @default + */ + cursorDuration: 600, + /** + * Indicates whether internal text char widths can be cached + * @type Boolean + * @default + */ + caching: true, -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * DOM container to append the hiddenTextarea. + * An alternative to attaching to the document.body. + * Useful to reduce laggish redraw of the full document.body tree and + * also with modals event capturing that won't let the textarea take focus. + * @type HTMLElement + * @default + */ + hiddenTextareaContainer: null, -var _fabric = __webpack_require__(/*! fabric */ "fabric"); + /** + * @private + */ + _reSpace: /\s|\n/, -var _fabric2 = _interopRequireDefault(_fabric); + /** + * @private + */ + _currentCursorOpacity: 0, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * @private + */ + _selectionDirection: null, -/** - * Mask object - * @class Mask - * @extends {fabric.Image.filters.BlendImage} - * @ignore - */ -var Mask = _fabric2.default.util.createClass(_fabric2.default.Image.filters.BlendImage, -/** @lends Mask.prototype */{ - /** - * Apply filter to canvas element - * @param {Object} pipelineState - Canvas element to apply filter - * @override - */ - applyTo: function applyTo(pipelineState) { - if (!this.mask) { - return; - } + /** + * @private + */ + _abortCursorAnimation: false, - var canvas = pipelineState.canvasEl; - var width = canvas.width, - height = canvas.height; + /** + * @private + */ + __widthOfSpace: [], - var maskCanvasEl = this._createCanvasOfMask(width, height); - var ctx = canvas.getContext('2d'); - var maskCtx = maskCanvasEl.getContext('2d'); - var imageData = ctx.getImageData(0, 0, width, height); + /** + * Helps determining when the text is in composition, so that the cursor + * rendering is altered. + */ + inCompositionMode: false, - this._drawMask(maskCtx, canvas, ctx); - this._mapData(maskCtx, imageData, width, height); + /** + * Constructor + * @param {String} text Text string + * @param {Object} [options] Options object + * @return {fabric.IText} thisArg + */ + initialize: function(text, options) { + this.callSuper('initialize', text, options); + this.initBehavior(); + }, - pipelineState.imageData = imageData; - }, + /** + * Sets selection start (left boundary of a selection) + * @param {Number} index Index to set selection start to + */ + setSelectionStart: function(index) { + index = Math.max(index, 0); + this._updateAndFire('selectionStart', index); + }, + /** + * Sets selection end (right boundary of a selection) + * @param {Number} index Index to set selection end to + */ + setSelectionEnd: function(index) { + index = Math.min(index, this.text.length); + this._updateAndFire('selectionEnd', index); + }, - /** - * Create canvas of mask image - * @param {number} width - Width of main canvas - * @param {number} height - Height of main canvas - * @returns {HTMLElement} Canvas element - * @private - */ - _createCanvasOfMask: function _createCanvasOfMask(width, height) { - var maskCanvasEl = _fabric2.default.util.createCanvasElement(); + /** + * @private + * @param {String} property 'selectionStart' or 'selectionEnd' + * @param {Number} index new position of property + */ + _updateAndFire: function(property, index) { + if (this[property] !== index) { + this._fireSelectionChanged(); + this[property] = index; + } + this._updateTextarea(); + }, - maskCanvasEl.width = width; - maskCanvasEl.height = height; + /** + * Fires the even of selection changed + * @private + */ + _fireSelectionChanged: function() { + this.fire('selection:changed'); + this.canvas && this.canvas.fire('text:selection:changed', { target: this }); + }, - return maskCanvasEl; - }, + /** + * Initialize text dimensions. Render all text on given context + * or on a offscreen canvas to get the text width with measureText. + * Updates this.width and this.height with the proper values. + * Does not return dimensions. + * @private + */ + initDimensions: function() { + this.isEditing && this.initDelayedCursor(); + this.clearContextTop(); + this.callSuper('initDimensions'); + }, + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + render: function(ctx) { + this.clearContextTop(); + this.callSuper('render', ctx); + // clear the cursorOffsetCache, so we ensure to calculate once per renderCursor + // the correct position but not at every cursor animation. + this.cursorOffsetCache = { }; + this.renderCursorOrSelection(); + }, - /** - * Draw mask image on canvas element - * @param {Object} maskCtx - Context of mask canvas - * @private - */ - _drawMask: function _drawMask(maskCtx) { - var mask = this.mask; + /** + * @private + * @param {CanvasRenderingContext2D} ctx Context to render on + */ + _render: function(ctx) { + this.callSuper('_render', ctx); + }, - var maskImg = mask.getElement(); - var angle = mask.angle, - left = mask.left, - scaleX = mask.scaleX, - scaleY = mask.scaleY, - top = mask.top; + /** + * Prepare and clean the contextTop + */ + clearContextTop: function(skipRestore) { + if (!this.isEditing || !this.canvas || !this.canvas.contextTop) { + return; + } + var ctx = this.canvas.contextTop, v = this.canvas.viewportTransform; + ctx.save(); + ctx.transform(v[0], v[1], v[2], v[3], v[4], v[5]); + this.transform(ctx); + this._clearTextArea(ctx); + skipRestore || ctx.restore(); + }, + /** + * Renders cursor or selection (depending on what exists) + * it does on the contextTop. If contextTop is not available, do nothing. + */ + renderCursorOrSelection: function() { + if (!this.isEditing || !this.canvas || !this.canvas.contextTop) { + return; + } + var boundaries = this._getCursorBoundaries(), + ctx = this.canvas.contextTop; + this.clearContextTop(true); + if (this.selectionStart === this.selectionEnd) { + this.renderCursor(boundaries, ctx); + } + else { + this.renderSelection(boundaries, ctx); + } + ctx.restore(); + }, + _clearTextArea: function(ctx) { + // we add 4 pixel, to be sure to do not leave any pixel out + var width = this.width + 4, height = this.height + 4; + ctx.clearRect(-width / 2, -height / 2, width, height); + }, - maskCtx.save(); - maskCtx.translate(left, top); - maskCtx.rotate(angle * Math.PI / 180); - maskCtx.scale(scaleX, scaleY); - maskCtx.drawImage(maskImg, -maskImg.width / 2, -maskImg.height / 2); - maskCtx.restore(); - }, + /** + * Returns cursor boundaries (left, top, leftOffset, topOffset) + * @private + * @param {Array} chars Array of characters + * @param {String} typeOfBoundaries + */ + _getCursorBoundaries: function(position) { + // left/top are left/top of entire text box + // leftOffset/topOffset are offset from that left/top point of a text box - /** - * Map mask image data to source image data - * @param {Object} maskCtx - Context of mask canvas - * @param {Object} imageData - Data of source image - * @param {number} width - Width of main canvas - * @param {number} height - Height of main canvas - * @private - */ - _mapData: function _mapData(maskCtx, imageData, width, height) { - var data = imageData.data, - imgHeight = imageData.height, - imgWidth = imageData.width; + if (typeof position === 'undefined') { + position = this.selectionStart; + } - var sourceData = data; - var len = imgWidth * imgHeight * 4; - var maskData = maskCtx.getImageData(0, 0, width, height).data; + var left = this._getLeftOffset(), + top = this._getTopOffset(), + offsets = this._getCursorBoundariesOffsets(position); + return { + left: left, + top: top, + leftOffset: offsets.left, + topOffset: offsets.top + }; + }, - for (var i = 0; i < len; i += 4) { - sourceData[i + 3] = maskData[i]; // adjust value of alpha data - } - } -}); /** - * @author NHN. FE Development Team - * @fileoverview Mask extending fabric.Image.filters.Mask + /** + * @private */ -exports.default = Mask; - -/***/ }), + _getCursorBoundariesOffsets: function(position) { + if (this.cursorOffsetCache && 'top' in this.cursorOffsetCache) { + return this.cursorOffsetCache; + } + var lineLeftOffset, + lineIndex, + charIndex, + topOffset = 0, + leftOffset = 0, + boundaries, + cursorPosition = this.get2DCursorLocation(position); + charIndex = cursorPosition.charIndex; + lineIndex = cursorPosition.lineIndex; + for (var i = 0; i < lineIndex; i++) { + topOffset += this.getHeightOfLine(i); + } + lineLeftOffset = this._getLineLeftOffset(lineIndex); + var bound = this.__charBounds[lineIndex][charIndex]; + bound && (leftOffset = bound.left); + if (this.charSpacing !== 0 && charIndex === this._textLines[lineIndex].length) { + leftOffset -= this._getWidthOfCharSpacing(); + } + boundaries = { + top: topOffset, + left: lineLeftOffset + (leftOffset > 0 ? leftOffset : 0), + }; + if (this.direction === 'rtl') { + boundaries.left *= -1; + } + this.cursorOffsetCache = boundaries; + return this.cursorOffsetCache; + }, -/***/ "./src/js/extension/sharpen.js": -/*!*************************************!*\ - !*** ./src/js/extension/sharpen.js ***! - \*************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * Renders cursor + * @param {Object} boundaries + * @param {CanvasRenderingContext2D} ctx transformed context to draw on + */ + renderCursor: function(boundaries, ctx) { + var cursorLocation = this.get2DCursorLocation(), + lineIndex = cursorLocation.lineIndex, + charIndex = cursorLocation.charIndex > 0 ? cursorLocation.charIndex - 1 : 0, + charHeight = this.getValueOfPropertyAt(lineIndex, charIndex, 'fontSize'), + multiplier = this.scaleX * this.canvas.getZoom(), + cursorWidth = this.cursorWidth / multiplier, + topOffset = boundaries.topOffset, + dy = this.getValueOfPropertyAt(lineIndex, charIndex, 'deltaY'); + topOffset += (1 - this._fontSizeFraction) * this.getHeightOfLine(lineIndex) / this.lineHeight + - charHeight * (1 - this._fontSizeFraction); + + if (this.inCompositionMode) { + this.renderSelection(boundaries, ctx); + } + ctx.fillStyle = this.cursorColor || this.getValueOfPropertyAt(lineIndex, charIndex, 'fill'); + ctx.globalAlpha = this.__isMousedown ? 1 : this._currentCursorOpacity; + ctx.fillRect( + boundaries.left + boundaries.leftOffset - cursorWidth / 2, + topOffset + boundaries.top + dy, + cursorWidth, + charHeight); + }, -"use strict"; + /** + * Renders text selection + * @param {Object} boundaries Object with left/top/leftOffset/topOffset + * @param {CanvasRenderingContext2D} ctx transformed context to draw on + */ + renderSelection: function(boundaries, ctx) { + var selectionStart = this.inCompositionMode ? this.hiddenTextarea.selectionStart : this.selectionStart, + selectionEnd = this.inCompositionMode ? this.hiddenTextarea.selectionEnd : this.selectionEnd, + isJustify = this.textAlign.indexOf('justify') !== -1, + start = this.get2DCursorLocation(selectionStart), + end = this.get2DCursorLocation(selectionEnd), + startLine = start.lineIndex, + endLine = end.lineIndex, + startChar = start.charIndex < 0 ? 0 : start.charIndex, + endChar = end.charIndex < 0 ? 0 : end.charIndex; -Object.defineProperty(exports, "__esModule", { - value: true -}); + for (var i = startLine; i <= endLine; i++) { + var lineOffset = this._getLineLeftOffset(i) || 0, + lineHeight = this.getHeightOfLine(i), + realLineHeight = 0, boxStart = 0, boxEnd = 0; -var _fabric = __webpack_require__(/*! fabric */ "fabric"); + if (i === startLine) { + boxStart = this.__charBounds[startLine][startChar].left; + } + if (i >= startLine && i < endLine) { + boxEnd = isJustify && !this.isEndOfWrapping(i) ? this.width : this.getLineWidth(i) || 5; // WTF is this 5? + } + else if (i === endLine) { + if (endChar === 0) { + boxEnd = this.__charBounds[endLine][endChar].left; + } + else { + var charSpacing = this._getWidthOfCharSpacing(); + boxEnd = this.__charBounds[endLine][endChar - 1].left + + this.__charBounds[endLine][endChar - 1].width - charSpacing; + } + } + realLineHeight = lineHeight; + if (this.lineHeight < 1 || (i === endLine && this.lineHeight > 1)) { + lineHeight /= this.lineHeight; + } + var drawStart = boundaries.left + lineOffset + boxStart, + drawWidth = boxEnd - boxStart, + drawHeight = lineHeight, extraTop = 0; + if (this.inCompositionMode) { + ctx.fillStyle = this.compositionColor || 'black'; + drawHeight = 1; + extraTop = lineHeight; + } + else { + ctx.fillStyle = this.selectionColor; + } + if (this.direction === 'rtl') { + drawStart = this.width - drawStart - drawWidth; + } + ctx.fillRect( + drawStart, + boundaries.top + boundaries.topOffset + extraTop, + drawWidth, + drawHeight); + boundaries.topOffset += realLineHeight; + } + }, -var _fabric2 = _interopRequireDefault(_fabric); + /** + * High level function to know the height of the cursor. + * the currentChar is the one that precedes the cursor + * Returns fontSize of char at the current cursor + * Unused from the library, is for the end user + * @return {Number} Character font size + */ + getCurrentCharFontSize: function() { + var cp = this._getCurrentCharIndex(); + return this.getValueOfPropertyAt(cp.l, cp.c, 'fontSize'); + }, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * High level function to know the color of the cursor. + * the currentChar is the one that precedes the cursor + * Returns color (fill) of char at the current cursor + * if the text object has a pattern or gradient for filler, it will return that. + * Unused by the library, is for the end user + * @return {String | fabric.Gradient | fabric.Pattern} Character color (fill) + */ + getCurrentCharColor: function() { + var cp = this._getCurrentCharIndex(); + return this.getValueOfPropertyAt(cp.l, cp.c, 'fill'); + }, -/** - * Sharpen object - * @class Sharpen - * @extends {fabric.Image.filters.Convolute} - * @ignore - */ -var Sharpen = _fabric2.default.util.createClass(_fabric2.default.Image.filters.Convolute, -/** @lends Convolute.prototype */{ - /** - * Filter type - * @param {String} type - * @default - */ - type: 'Sharpen', + /** + * Returns the cursor position for the getCurrent.. functions + * @private + */ + _getCurrentCharIndex: function() { + var cursorPosition = this.get2DCursorLocation(this.selectionStart, true), + charIndex = cursorPosition.charIndex > 0 ? cursorPosition.charIndex - 1 : 0; + return { l: cursorPosition.lineIndex, c: charIndex }; + } + }); /** - * constructor - * @override + * Returns fabric.IText instance from an object representation + * @static + * @memberOf fabric.IText + * @param {Object} object Object to create an instance from + * @param {function} [callback] invoked with new instance as argument */ - initialize: function initialize() { - this.matrix = [0, -1, 0, -1, 5, -1, 0, -1, 0]; - } -}); /** - * @author NHN. FE Development Team - * @fileoverview Sharpen extending fabric.Image.filters.Convolute - */ -exports.default = Sharpen; - -/***/ }), + fabric.IText.fromObject = function(object, callback) { + parseDecoration(object); + if (object.styles) { + for (var i in object.styles) { + for (var j in object.styles[i]) { + parseDecoration(object.styles[i][j]); + } + } + } + fabric.Object._fromObject('IText', object, callback, 'text'); + }; +})(); -/***/ "./src/js/factory/command.js": -/*!***********************************!*\ - !*** ./src/js/factory/command.js ***! - \***********************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { -"use strict"; +(function() { + var clone = fabric.util.object.clone; -Object.defineProperty(exports, "__esModule", { - value: true -}); + fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ { -var _command = __webpack_require__(/*! @/interface/command */ "./src/js/interface/command.js"); + /** + * Initializes all the interactive behavior of IText + */ + initBehavior: function() { + this.initAddedHandler(); + this.initRemovedHandler(); + this.initCursorSelectionHandlers(); + this.initDoubleClickSimulation(); + this.mouseMoveHandler = this.mouseMoveHandler.bind(this); + }, -var _command2 = _interopRequireDefault(_command); + onDeselect: function() { + this.isEditing && this.exitEditing(); + this.selected = false; + }, -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + /** + * Initializes "added" event handler + */ + initAddedHandler: function() { + var _this = this; + this.on('added', function() { + var canvas = _this.canvas; + if (canvas) { + if (!canvas._hasITextHandlers) { + canvas._hasITextHandlers = true; + _this._initCanvasHandlers(canvas); + } + canvas._iTextInstances = canvas._iTextInstances || []; + canvas._iTextInstances.push(_this); + } + }); + }, -var commands = {}; + initRemovedHandler: function() { + var _this = this; + this.on('removed', function() { + var canvas = _this.canvas; + if (canvas) { + canvas._iTextInstances = canvas._iTextInstances || []; + fabric.util.removeFromArray(canvas._iTextInstances, _this); + if (canvas._iTextInstances.length === 0) { + canvas._hasITextHandlers = false; + _this._removeCanvasHandlers(canvas); + } + } + }); + }, -/** - * Create a command - * @param {string} name - Command name - * @param {...*} args - Arguments for creating command - * @returns {Command} - * @ignore - */ -/** - * @author NHN. FE Development Team - * @fileoverview Command factory - */ -function create(name) { - var actions = commands[name]; - if (actions) { - for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { - args[_key - 1] = arguments[_key]; - } + /** + * register canvas event to manage exiting on other instances + * @private + */ + _initCanvasHandlers: function(canvas) { + canvas._mouseUpITextHandler = function() { + if (canvas._iTextInstances) { + canvas._iTextInstances.forEach(function(obj) { + obj.__isMousedown = false; + }); + } + }; + canvas.on('mouse:up', canvas._mouseUpITextHandler); + }, - return new _command2.default(actions, args); - } + /** + * remove canvas event to manage exiting on other instances + * @private + */ + _removeCanvasHandlers: function(canvas) { + canvas.off('mouse:up', canvas._mouseUpITextHandler); + }, - return null; -} + /** + * @private + */ + _tick: function() { + this._currentTickState = this._animateCursor(this, 1, this.cursorDuration, '_onTickComplete'); + }, -/** - * Register a command with name as a key - * @param {Object} command - {name:{string}, execute: {function}, undo: {function}} - * @param {string} command.name - command name - * @param {function} command.execute - executable function - * @param {function} command.undo - undo function - * @ignore - */ -function register(command) { - commands[command.name] = command; -} + /** + * @private + */ + _animateCursor: function(obj, targetOpacity, duration, completeMethod) { -exports.default = { - create: create, - register: register -}; + var tickState; -/***/ }), + tickState = { + isAborted: false, + abort: function() { + this.isAborted = true; + }, + }; -/***/ "./src/js/factory/errorMessage.js": -/*!****************************************!*\ - !*** ./src/js/factory/errorMessage.js ***! - \****************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + obj.animate('_currentCursorOpacity', targetOpacity, { + duration: duration, + onComplete: function() { + if (!tickState.isAborted) { + obj[completeMethod](); + } + }, + onChange: function() { + // we do not want to animate a selection, only cursor + if (obj.canvas && obj.selectionStart === obj.selectionEnd) { + obj.renderCursorOrSelection(); + } + }, + abort: function() { + return tickState.isAborted; + } + }); + return tickState; + }, -"use strict"; + /** + * @private + */ + _onTickComplete: function() { + var _this = this; -Object.defineProperty(exports, "__esModule", { - value: true -}); + if (this._cursorTimeout1) { + clearTimeout(this._cursorTimeout1); + } + this._cursorTimeout1 = setTimeout(function() { + _this._currentTickCompleteState = _this._animateCursor(_this, 0, this.cursorDuration / 2, '_tick'); + }, 100); + }, -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); + /** + * Initializes delayed cursor + */ + initDelayedCursor: function(restart) { + var _this = this, + delay = restart ? 0 : this.cursorDelay; -var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); + this.abortCursorAnimation(); + this._currentCursorOpacity = 1; + this._cursorTimeout2 = setTimeout(function() { + _this._tick(); + }, delay); + }, -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + /** + * Aborts cursor animation and clears all timeouts + */ + abortCursorAnimation: function() { + var shouldClear = this._currentTickState || this._currentTickCompleteState, + canvas = this.canvas; + this._currentTickState && this._currentTickState.abort(); + this._currentTickCompleteState && this._currentTickCompleteState.abort(); -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + clearTimeout(this._cursorTimeout1); + clearTimeout(this._cursorTimeout2); -/** - * @author NHN. FE Development Team - * @fileoverview Error-message factory - */ -var types = (0, _util.keyMirror)('UN_IMPLEMENTATION', 'NO_COMPONENT_NAME'); -var messages = { - UN_IMPLEMENTATION: 'Should implement a method: ', - NO_COMPONENT_NAME: 'Should set a component name' -}; -var map = { - UN_IMPLEMENTATION: function UN_IMPLEMENTATION(methodName) { - return messages.UN_IMPLEMENTATION + methodName; - }, - NO_COMPONENT_NAME: function NO_COMPONENT_NAME() { - return messages.NO_COMPONENT_NAME; - } -}; + this._currentCursorOpacity = 0; + // to clear just itext area we need to transform the context + // it may not be worth it + if (shouldClear && canvas) { + canvas.clearContext(canvas.contextTop || canvas.contextContainer); + } -exports.default = { - types: _tuiCodeSnippet2.default.extend({}, types), + }, - create: function create(type) { - type = type.toLowerCase(); - var func = map[type]; + /** + * Selects entire text + * @return {fabric.IText} thisArg + * @chainable + */ + selectAll: function() { + this.selectionStart = 0; + this.selectionEnd = this._text.length; + this._fireSelectionChanged(); + this._updateTextarea(); + return this; + }, - for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { - args[_key - 1] = arguments[_key]; - } + /** + * Returns selected text + * @return {String} + */ + getSelectedText: function() { + return this._text.slice(this.selectionStart, this.selectionEnd).join(''); + }, - return func.apply(undefined, args); - } -}; + /** + * Find new selection index representing start of current word according to current selection index + * @param {Number} startFrom Current selection index + * @return {Number} New selection index + */ + findWordBoundaryLeft: function(startFrom) { + var offset = 0, index = startFrom - 1; -/***/ }), + // remove space before cursor first + if (this._reSpace.test(this._text[index])) { + while (this._reSpace.test(this._text[index])) { + offset++; + index--; + } + } + while (/\S/.test(this._text[index]) && index > -1) { + offset++; + index--; + } -/***/ "./src/js/graphics.js": -/*!****************************!*\ - !*** ./src/js/graphics.js ***! - \****************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + return startFrom - offset; + }, -"use strict"; + /** + * Find new selection index representing end of current word according to current selection index + * @param {Number} startFrom Current selection index + * @return {Number} New selection index + */ + findWordBoundaryRight: function(startFrom) { + var offset = 0, index = startFrom; + // remove space after cursor first + if (this._reSpace.test(this._text[index])) { + while (this._reSpace.test(this._text[index])) { + offset++; + index++; + } + } + while (/\S/.test(this._text[index]) && index < this._text.length) { + offset++; + index++; + } -Object.defineProperty(exports, "__esModule", { - value: true -}); + return startFrom + offset; + }, -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); /** - * @author NHN. FE Development Team - * @fileoverview Graphics module - */ + /** + * Find new selection index representing start of current line according to current selection index + * @param {Number} startFrom Current selection index + * @return {Number} New selection index + */ + findLineBoundaryLeft: function(startFrom) { + var offset = 0, index = startFrom - 1; + while (!/\n/.test(this._text[index]) && index > -1) { + offset++; + index--; + } -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); + return startFrom - offset; + }, -var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); + /** + * Find new selection index representing end of current line according to current selection index + * @param {Number} startFrom Current selection index + * @return {Number} New selection index + */ + findLineBoundaryRight: function(startFrom) { + var offset = 0, index = startFrom; -var _fabric = __webpack_require__(/*! fabric */ "fabric"); + while (!/\n/.test(this._text[index]) && index < this._text.length) { + offset++; + index++; + } -var _fabric2 = _interopRequireDefault(_fabric); + return startFrom + offset; + }, -var _imageLoader = __webpack_require__(/*! @/component/imageLoader */ "./src/js/component/imageLoader.js"); + /** + * Finds index corresponding to beginning or end of a word + * @param {Number} selectionStart Index of a character + * @param {Number} direction 1 or -1 + * @return {Number} Index of the beginning or end of a word + */ + searchWordBoundary: function(selectionStart, direction) { + var text = this._text, + index = this._reSpace.test(text[selectionStart]) ? selectionStart - 1 : selectionStart, + _char = text[index], + // wrong + reNonWord = fabric.reNonWord; -var _imageLoader2 = _interopRequireDefault(_imageLoader); + while (!reNonWord.test(_char) && index > 0 && index < text.length) { + index += direction; + _char = text[index]; + } + if (reNonWord.test(_char)) { + index += direction === 1 ? 0 : 1; + } + return index; + }, -var _cropper = __webpack_require__(/*! @/component/cropper */ "./src/js/component/cropper.js"); + /** + * Selects a word based on the index + * @param {Number} selectionStart Index of a character + */ + selectWord: function(selectionStart) { + selectionStart = selectionStart || this.selectionStart; + var newSelectionStart = this.searchWordBoundary(selectionStart, -1), /* search backwards */ + newSelectionEnd = this.searchWordBoundary(selectionStart, 1); /* search forward */ -var _cropper2 = _interopRequireDefault(_cropper); + this.selectionStart = newSelectionStart; + this.selectionEnd = newSelectionEnd; + this._fireSelectionChanged(); + this._updateTextarea(); + this.renderCursorOrSelection(); + }, -var _flip = __webpack_require__(/*! @/component/flip */ "./src/js/component/flip.js"); + /** + * Selects a line based on the index + * @param {Number} selectionStart Index of a character + * @return {fabric.IText} thisArg + * @chainable + */ + selectLine: function(selectionStart) { + selectionStart = selectionStart || this.selectionStart; + var newSelectionStart = this.findLineBoundaryLeft(selectionStart), + newSelectionEnd = this.findLineBoundaryRight(selectionStart); -var _flip2 = _interopRequireDefault(_flip); + this.selectionStart = newSelectionStart; + this.selectionEnd = newSelectionEnd; + this._fireSelectionChanged(); + this._updateTextarea(); + return this; + }, -var _rotation = __webpack_require__(/*! @/component/rotation */ "./src/js/component/rotation.js"); + /** + * Enters editing state + * @return {fabric.IText} thisArg + * @chainable + */ + enterEditing: function(e) { + if (this.isEditing || !this.editable) { + return; + } -var _rotation2 = _interopRequireDefault(_rotation); + if (this.canvas) { + this.canvas.calcOffset(); + this.exitEditingOnOthers(this.canvas); + } -var _freeDrawing = __webpack_require__(/*! @/component/freeDrawing */ "./src/js/component/freeDrawing.js"); + this.isEditing = true; -var _freeDrawing2 = _interopRequireDefault(_freeDrawing); + this.initHiddenTextarea(e); + this.hiddenTextarea.focus(); + this.hiddenTextarea.value = this.text; + this._updateTextarea(); + this._saveEditingProps(); + this._setEditingProps(); + this._textBeforeEdit = this.text; -var _line = __webpack_require__(/*! @/component/line */ "./src/js/component/line.js"); + this._tick(); + this.fire('editing:entered'); + this._fireSelectionChanged(); + if (!this.canvas) { + return this; + } + this.canvas.fire('text:editing:entered', { target: this }); + this.initMouseMoveHandler(); + this.canvas.requestRenderAll(); + return this; + }, -var _line2 = _interopRequireDefault(_line); + exitEditingOnOthers: function(canvas) { + if (canvas._iTextInstances) { + canvas._iTextInstances.forEach(function(obj) { + obj.selected = false; + if (obj.isEditing) { + obj.exitEditing(); + } + }); + } + }, -var _text = __webpack_require__(/*! @/component/text */ "./src/js/component/text.js"); + /** + * Initializes "mousemove" event handler + */ + initMouseMoveHandler: function() { + this.canvas.on('mouse:move', this.mouseMoveHandler); + }, -var _text2 = _interopRequireDefault(_text); + /** + * @private + */ + mouseMoveHandler: function(options) { + if (!this.__isMousedown || !this.isEditing) { + return; + } -var _icon = __webpack_require__(/*! @/component/icon */ "./src/js/component/icon.js"); + var newSelectionStart = this.getSelectionStartFromPointer(options.e), + currentStart = this.selectionStart, + currentEnd = this.selectionEnd; + if ( + (newSelectionStart !== this.__selectionStartOnMouseDown || currentStart === currentEnd) + && + (currentStart === newSelectionStart || currentEnd === newSelectionStart) + ) { + return; + } + if (newSelectionStart > this.__selectionStartOnMouseDown) { + this.selectionStart = this.__selectionStartOnMouseDown; + this.selectionEnd = newSelectionStart; + } + else { + this.selectionStart = newSelectionStart; + this.selectionEnd = this.__selectionStartOnMouseDown; + } + if (this.selectionStart !== currentStart || this.selectionEnd !== currentEnd) { + this.restartCursorIfNeeded(); + this._fireSelectionChanged(); + this._updateTextarea(); + this.renderCursorOrSelection(); + } + }, -var _icon2 = _interopRequireDefault(_icon); + /** + * @private + */ + _setEditingProps: function() { + this.hoverCursor = 'text'; -var _filter = __webpack_require__(/*! @/component/filter */ "./src/js/component/filter.js"); + if (this.canvas) { + this.canvas.defaultCursor = this.canvas.moveCursor = 'text'; + } -var _filter2 = _interopRequireDefault(_filter); + this.borderColor = this.editingBorderColor; + this.hasControls = this.selectable = false; + this.lockMovementX = this.lockMovementY = true; + }, -var _shape = __webpack_require__(/*! @/component/shape */ "./src/js/component/shape.js"); + /** + * convert from textarea to grapheme indexes + */ + fromStringToGraphemeSelection: function(start, end, text) { + var smallerTextStart = text.slice(0, start), + graphemeStart = fabric.util.string.graphemeSplit(smallerTextStart).length; + if (start === end) { + return { selectionStart: graphemeStart, selectionEnd: graphemeStart }; + } + var smallerTextEnd = text.slice(start, end), + graphemeEnd = fabric.util.string.graphemeSplit(smallerTextEnd).length; + return { selectionStart: graphemeStart, selectionEnd: graphemeStart + graphemeEnd }; + }, -var _shape2 = _interopRequireDefault(_shape); + /** + * convert from fabric to textarea values + */ + fromGraphemeToStringSelection: function(start, end, _text) { + var smallerTextStart = _text.slice(0, start), + graphemeStart = smallerTextStart.join('').length; + if (start === end) { + return { selectionStart: graphemeStart, selectionEnd: graphemeStart }; + } + var smallerTextEnd = _text.slice(start, end), + graphemeEnd = smallerTextEnd.join('').length; + return { selectionStart: graphemeStart, selectionEnd: graphemeStart + graphemeEnd }; + }, -var _zoom = __webpack_require__(/*! @/component/zoom */ "./src/js/component/zoom.js"); + /** + * @private + */ + _updateTextarea: function() { + this.cursorOffsetCache = { }; + if (!this.hiddenTextarea) { + return; + } + if (!this.inCompositionMode) { + var newSelection = this.fromGraphemeToStringSelection(this.selectionStart, this.selectionEnd, this._text); + this.hiddenTextarea.selectionStart = newSelection.selectionStart; + this.hiddenTextarea.selectionEnd = newSelection.selectionEnd; + } + this.updateTextareaPosition(); + }, -var _zoom2 = _interopRequireDefault(_zoom); + /** + * @private + */ + updateFromTextArea: function() { + if (!this.hiddenTextarea) { + return; + } + this.cursorOffsetCache = { }; + this.text = this.hiddenTextarea.value; + if (this._shouldClearDimensionCache()) { + this.initDimensions(); + this.setCoords(); + } + var newSelection = this.fromStringToGraphemeSelection( + this.hiddenTextarea.selectionStart, this.hiddenTextarea.selectionEnd, this.hiddenTextarea.value); + this.selectionEnd = this.selectionStart = newSelection.selectionEnd; + if (!this.inCompositionMode) { + this.selectionStart = newSelection.selectionStart; + } + this.updateTextareaPosition(); + }, -var _cropper3 = __webpack_require__(/*! @/drawingMode/cropper */ "./src/js/drawingMode/cropper.js"); + /** + * @private + */ + updateTextareaPosition: function() { + if (this.selectionStart === this.selectionEnd) { + var style = this._calcTextareaPosition(); + this.hiddenTextarea.style.left = style.left; + this.hiddenTextarea.style.top = style.top; + } + }, -var _cropper4 = _interopRequireDefault(_cropper3); + /** + * @private + * @return {Object} style contains style for hiddenTextarea + */ + _calcTextareaPosition: function() { + if (!this.canvas) { + return { x: 1, y: 1 }; + } + var desiredPosition = this.inCompositionMode ? this.compositionStart : this.selectionStart, + boundaries = this._getCursorBoundaries(desiredPosition), + cursorLocation = this.get2DCursorLocation(desiredPosition), + lineIndex = cursorLocation.lineIndex, + charIndex = cursorLocation.charIndex, + charHeight = this.getValueOfPropertyAt(lineIndex, charIndex, 'fontSize') * this.lineHeight, + leftOffset = boundaries.leftOffset, + m = this.calcTransformMatrix(), + p = { + x: boundaries.left + leftOffset, + y: boundaries.top + boundaries.topOffset + charHeight + }, + retinaScaling = this.canvas.getRetinaScaling(), + upperCanvas = this.canvas.upperCanvasEl, + upperCanvasWidth = upperCanvas.width / retinaScaling, + upperCanvasHeight = upperCanvas.height / retinaScaling, + maxWidth = upperCanvasWidth - charHeight, + maxHeight = upperCanvasHeight - charHeight, + scaleX = upperCanvas.clientWidth / upperCanvasWidth, + scaleY = upperCanvas.clientHeight / upperCanvasHeight; -var _freeDrawing3 = __webpack_require__(/*! @/drawingMode/freeDrawing */ "./src/js/drawingMode/freeDrawing.js"); + p = fabric.util.transformPoint(p, m); + p = fabric.util.transformPoint(p, this.canvas.viewportTransform); + p.x *= scaleX; + p.y *= scaleY; + if (p.x < 0) { + p.x = 0; + } + if (p.x > maxWidth) { + p.x = maxWidth; + } + if (p.y < 0) { + p.y = 0; + } + if (p.y > maxHeight) { + p.y = maxHeight; + } -var _freeDrawing4 = _interopRequireDefault(_freeDrawing3); + // add canvas offset on document + p.x += this.canvas._offset.left; + p.y += this.canvas._offset.top; -var _lineDrawing = __webpack_require__(/*! @/drawingMode/lineDrawing */ "./src/js/drawingMode/lineDrawing.js"); + return { left: p.x + 'px', top: p.y + 'px', fontSize: charHeight + 'px', charHeight: charHeight }; + }, -var _lineDrawing2 = _interopRequireDefault(_lineDrawing); + /** + * @private + */ + _saveEditingProps: function() { + this._savedProps = { + hasControls: this.hasControls, + borderColor: this.borderColor, + lockMovementX: this.lockMovementX, + lockMovementY: this.lockMovementY, + hoverCursor: this.hoverCursor, + selectable: this.selectable, + defaultCursor: this.canvas && this.canvas.defaultCursor, + moveCursor: this.canvas && this.canvas.moveCursor + }; + }, -var _shape3 = __webpack_require__(/*! @/drawingMode/shape */ "./src/js/drawingMode/shape.js"); + /** + * @private + */ + _restoreEditingProps: function() { + if (!this._savedProps) { + return; + } -var _shape4 = _interopRequireDefault(_shape3); + this.hoverCursor = this._savedProps.hoverCursor; + this.hasControls = this._savedProps.hasControls; + this.borderColor = this._savedProps.borderColor; + this.selectable = this._savedProps.selectable; + this.lockMovementX = this._savedProps.lockMovementX; + this.lockMovementY = this._savedProps.lockMovementY; -var _text3 = __webpack_require__(/*! @/drawingMode/text */ "./src/js/drawingMode/text.js"); + if (this.canvas) { + this.canvas.defaultCursor = this._savedProps.defaultCursor; + this.canvas.moveCursor = this._savedProps.moveCursor; + } + }, -var _text4 = _interopRequireDefault(_text3); + /** + * Exits from editing state + * @return {fabric.IText} thisArg + * @chainable + */ + exitEditing: function() { + var isTextChanged = (this._textBeforeEdit !== this.text); + var hiddenTextarea = this.hiddenTextarea; + this.selected = false; + this.isEditing = false; -var _icon3 = __webpack_require__(/*! @/drawingMode/icon */ "./src/js/drawingMode/icon.js"); + this.selectionEnd = this.selectionStart; -var _icon4 = _interopRequireDefault(_icon3); + if (hiddenTextarea) { + hiddenTextarea.blur && hiddenTextarea.blur(); + hiddenTextarea.parentNode && hiddenTextarea.parentNode.removeChild(hiddenTextarea); + } + this.hiddenTextarea = null; + this.abortCursorAnimation(); + this._restoreEditingProps(); + this._currentCursorOpacity = 0; + if (this._shouldClearDimensionCache()) { + this.initDimensions(); + this.setCoords(); + } + this.fire('editing:exited'); + isTextChanged && this.fire('modified'); + if (this.canvas) { + this.canvas.off('mouse:move', this.mouseMoveHandler); + this.canvas.fire('text:editing:exited', { target: this }); + isTextChanged && this.canvas.fire('object:modified', { target: this }); + } + return this; + }, -var _zoom3 = __webpack_require__(/*! @/drawingMode/zoom */ "./src/js/drawingMode/zoom.js"); + /** + * @private + */ + _removeExtraneousStyles: function() { + for (var prop in this.styles) { + if (!this._textLines[prop]) { + delete this.styles[prop]; + } + } + }, -var _zoom4 = _interopRequireDefault(_zoom3); + /** + * remove and reflow a style block from start to end. + * @param {Number} start linear start position for removal (included in removal) + * @param {Number} end linear end position for removal ( excluded from removal ) + */ + removeStyleFromTo: function(start, end) { + var cursorStart = this.get2DCursorLocation(start, true), + cursorEnd = this.get2DCursorLocation(end, true), + lineStart = cursorStart.lineIndex, + charStart = cursorStart.charIndex, + lineEnd = cursorEnd.lineIndex, + charEnd = cursorEnd.charIndex, + i, styleObj; + if (lineStart !== lineEnd) { + // step1 remove the trailing of lineStart + if (this.styles[lineStart]) { + for (i = charStart; i < this._unwrappedTextLines[lineStart].length; i++) { + delete this.styles[lineStart][i]; + } + } + // step2 move the trailing of lineEnd to lineStart if needed + if (this.styles[lineEnd]) { + for (i = charEnd; i < this._unwrappedTextLines[lineEnd].length; i++) { + styleObj = this.styles[lineEnd][i]; + if (styleObj) { + this.styles[lineStart] || (this.styles[lineStart] = { }); + this.styles[lineStart][charStart + i - charEnd] = styleObj; + } + } + } + // step3 detects lines will be completely removed. + for (i = lineStart + 1; i <= lineEnd; i++) { + delete this.styles[i]; + } + // step4 shift remaining lines. + this.shiftLineStyles(lineEnd, lineStart - lineEnd); + } + else { + // remove and shift left on the same line + if (this.styles[lineStart]) { + styleObj = this.styles[lineStart]; + var diff = charEnd - charStart, numericChar, _char; + for (i = charStart; i < charEnd; i++) { + delete styleObj[i]; + } + for (_char in this.styles[lineStart]) { + numericChar = parseInt(_char, 10); + if (numericChar >= charEnd) { + styleObj[numericChar - diff] = styleObj[_char]; + delete styleObj[_char]; + } + } + } + } + }, -var _selectionModifyHelper = __webpack_require__(/*! @/helper/selectionModifyHelper */ "./src/js/helper/selectionModifyHelper.js"); + /** + * Shifts line styles up or down + * @param {Number} lineIndex Index of a line + * @param {Number} offset Can any number? + */ + shiftLineStyles: function(lineIndex, offset) { + // shift all line styles by offset upward or downward + // do not clone deep. we need new array, not new style objects + var clonedStyles = clone(this.styles); + for (var line in this.styles) { + var numericLine = parseInt(line, 10); + if (numericLine > lineIndex) { + this.styles[numericLine + offset] = clonedStyles[numericLine]; + if (!clonedStyles[numericLine - offset]) { + delete this.styles[numericLine]; + } + } + } + }, -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); - -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); - -var _resize = __webpack_require__(/*! @/component/resize */ "./src/js/component/resize.js"); - -var _resize2 = _interopRequireDefault(_resize); - -var _resize3 = __webpack_require__(/*! @/drawingMode/resize */ "./src/js/drawingMode/resize.js"); - -var _resize4 = _interopRequireDefault(_resize3); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -var extend = _tuiCodeSnippet2.default.extend, - stamp = _tuiCodeSnippet2.default.stamp, - isArray = _tuiCodeSnippet2.default.isArray, - isString = _tuiCodeSnippet2.default.isString, - forEachArray = _tuiCodeSnippet2.default.forEachArray, - forEachOwnProperties = _tuiCodeSnippet2.default.forEachOwnProperties, - CustomEvents = _tuiCodeSnippet2.default.CustomEvents; - -var DEFAULT_CSS_MAX_WIDTH = 1000; -var DEFAULT_CSS_MAX_HEIGHT = 800; -var EXTRA_PX_FOR_PASTE = 10; - -var cssOnly = { - cssOnly: true -}; -var backstoreOnly = { - backstoreOnly: true -}; - -/** - * Graphics class - * @class - * @param {string|HTMLElement} wrapper - Wrapper's element or selector - * @param {Object} [option] - Canvas max width & height of css - * @param {number} option.cssMaxWidth - Canvas css-max-width - * @param {number} option.cssMaxHeight - Canvas css-max-height - * @ignore - */ - -var Graphics = function () { - function Graphics(element) { - var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}, - cssMaxWidth = _ref.cssMaxWidth, - cssMaxHeight = _ref.cssMaxHeight; - - _classCallCheck(this, Graphics); - - /** - * Fabric image instance - * @type {fabric.Image} - */ - this.canvasImage = null; - - /** - * Max width of canvas elements - * @type {number} - */ - this.cssMaxWidth = cssMaxWidth || DEFAULT_CSS_MAX_WIDTH; + restartCursorIfNeeded: function() { + if (!this._currentTickState || this._currentTickState.isAborted + || !this._currentTickCompleteState || this._currentTickCompleteState.isAborted + ) { + this.initDelayedCursor(); + } + }, /** - * Max height of canvas elements - * @type {number} - */ - this.cssMaxHeight = cssMaxHeight || DEFAULT_CSS_MAX_HEIGHT; + * Handle insertion of more consecutive style lines for when one or more + * newlines gets added to the text. Since current style needs to be shifted + * first we shift the current style of the number lines needed, then we add + * new lines from the last to the first. + * @param {Number} lineIndex Index of a line + * @param {Number} charIndex Index of a char + * @param {Number} qty number of lines to add + * @param {Array} copiedStyle Array of objects styles + */ + insertNewlineStyleObject: function(lineIndex, charIndex, qty, copiedStyle) { + var currentCharStyle, + newLineStyles = {}, + somethingAdded = false, + isEndOfLine = this._unwrappedTextLines[lineIndex].length === charIndex; + + qty || (qty = 1); + this.shiftLineStyles(lineIndex, qty); + if (this.styles[lineIndex]) { + currentCharStyle = this.styles[lineIndex][charIndex === 0 ? charIndex : charIndex - 1]; + } + // we clone styles of all chars + // after cursor onto the current line + for (var index in this.styles[lineIndex]) { + var numIndex = parseInt(index, 10); + if (numIndex >= charIndex) { + somethingAdded = true; + newLineStyles[numIndex - charIndex] = this.styles[lineIndex][index]; + // remove lines from the previous line since they're on a new line now + if (!(isEndOfLine && charIndex === 0)) { + delete this.styles[lineIndex][index]; + } + } + } + var styleCarriedOver = false; + if (somethingAdded && !isEndOfLine) { + // if is end of line, the extra style we copied + // is probably not something we want + this.styles[lineIndex + qty] = newLineStyles; + styleCarriedOver = true; + } + if (styleCarriedOver) { + // skip the last line of since we already prepared it. + qty--; + } + // for the all the lines or all the other lines + // we clone current char style onto the next (otherwise empty) line + while (qty > 0) { + if (copiedStyle && copiedStyle[qty - 1]) { + this.styles[lineIndex + qty] = { 0: clone(copiedStyle[qty - 1]) }; + } + else if (currentCharStyle) { + this.styles[lineIndex + qty] = { 0: clone(currentCharStyle) }; + } + else { + delete this.styles[lineIndex + qty]; + } + qty--; + } + this._forceClearCache = true; + }, /** - * cropper Selection Style - * @type {Object} - */ - this.cropSelectionStyle = {}; + * Inserts style object for a given line/char index + * @param {Number} lineIndex Index of a line + * @param {Number} charIndex Index of a char + * @param {Number} quantity number Style object to insert, if given + * @param {Array} copiedStyle array of style objects + */ + insertCharStyleObject: function(lineIndex, charIndex, quantity, copiedStyle) { + if (!this.styles) { + this.styles = {}; + } + var currentLineStyles = this.styles[lineIndex], + currentLineStylesCloned = currentLineStyles ? clone(currentLineStyles) : {}; + + quantity || (quantity = 1); + // shift all char styles by quantity forward + // 0,1,2,3 -> (charIndex=2) -> 0,1,3,4 -> (insert 2) -> 0,1,2,3,4 + for (var index in currentLineStylesCloned) { + var numericIndex = parseInt(index, 10); + if (numericIndex >= charIndex) { + currentLineStyles[numericIndex + quantity] = currentLineStylesCloned[numericIndex]; + // only delete the style if there was nothing moved there + if (!currentLineStylesCloned[numericIndex - quantity]) { + delete currentLineStyles[numericIndex]; + } + } + } + this._forceClearCache = true; + if (copiedStyle) { + while (quantity--) { + if (!Object.keys(copiedStyle[quantity]).length) { + continue; + } + if (!this.styles[lineIndex]) { + this.styles[lineIndex] = {}; + } + this.styles[lineIndex][charIndex + quantity] = clone(copiedStyle[quantity]); + } + return; + } + if (!currentLineStyles) { + return; + } + var newStyle = currentLineStyles[charIndex ? charIndex - 1 : 1]; + while (newStyle && quantity--) { + this.styles[lineIndex][charIndex + quantity] = clone(newStyle); + } + }, /** - * target fabric object for copy paste feature - * @type {fabric.Object} - * @private + * Inserts style object(s) + * @param {Array} insertedText Characters at the location where style is inserted + * @param {Number} start cursor index for inserting style + * @param {Array} [copiedStyle] array of style objects to insert. */ - this.targetObjectForCopyPaste = null; + insertNewStyleBlock: function(insertedText, start, copiedStyle) { + var cursorLoc = this.get2DCursorLocation(start, true), + addedLines = [0], linesLength = 0; + // get an array of how many char per lines are being added. + for (var i = 0; i < insertedText.length; i++) { + if (insertedText[i] === '\n') { + linesLength++; + addedLines[linesLength] = 0; + } + else { + addedLines[linesLength]++; + } + } + // for the first line copy the style from the current char position. + if (addedLines[0] > 0) { + this.insertCharStyleObject(cursorLoc.lineIndex, cursorLoc.charIndex, addedLines[0], copiedStyle); + copiedStyle = copiedStyle && copiedStyle.slice(addedLines[0] + 1); + } + linesLength && this.insertNewlineStyleObject( + cursorLoc.lineIndex, cursorLoc.charIndex + addedLines[0], linesLength); + for (var i = 1; i < linesLength; i++) { + if (addedLines[i] > 0) { + this.insertCharStyleObject(cursorLoc.lineIndex + i, 0, addedLines[i], copiedStyle); + } + else if (copiedStyle) { + this.styles[cursorLoc.lineIndex + i][0] = copiedStyle[0]; + } + copiedStyle = copiedStyle && copiedStyle.slice(addedLines[i] + 1); + } + // we use i outside the loop to get it like linesLength + if (addedLines[i] > 0) { + this.insertCharStyleObject(cursorLoc.lineIndex + i, 0, addedLines[i], copiedStyle); + } + }, /** - * Image name - * @type {string} + * Set the selectionStart and selectionEnd according to the new position of cursor + * mimic the key - mouse navigation when shift is pressed. */ - this.imageName = ''; + setSelectionStartEndWithShift: function(start, end, newSelection) { + if (newSelection <= start) { + if (end === start) { + this._selectionDirection = 'left'; + } + else if (this._selectionDirection === 'right') { + this._selectionDirection = 'left'; + this.selectionEnd = start; + } + this.selectionStart = newSelection; + } + else if (newSelection > start && newSelection < end) { + if (this._selectionDirection === 'right') { + this.selectionEnd = newSelection; + } + else { + this.selectionStart = newSelection; + } + } + else { + // newSelection is > selection start and end + if (end === start) { + this._selectionDirection = 'right'; + } + else if (this._selectionDirection === 'left') { + this._selectionDirection = 'right'; + this.selectionStart = end; + } + this.selectionEnd = newSelection; + } + }, - /** - * Object Map - * @type {Object} - * @private - */ - this._objects = {}; + setSelectionInBoundaries: function() { + var length = this.text.length; + if (this.selectionStart > length) { + this.selectionStart = length; + } + else if (this.selectionStart < 0) { + this.selectionStart = 0; + } + if (this.selectionEnd > length) { + this.selectionEnd = length; + } + else if (this.selectionEnd < 0) { + this.selectionEnd = 0; + } + } + }); +})(); - /** - * Fabric-Canvas instance - * @type {fabric.Canvas} - * @private - */ - this._canvas = null; - /** - * Drawing mode - * @type {string} - * @private - */ - this._drawingMode = _consts.drawingModes.NORMAL; +fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ { + /** + * Initializes "dbclick" event handler + */ + initDoubleClickSimulation: function() { - /** - * DrawingMode map - * @type {Object.} - * @private - */ - this._drawingModeMap = {}; + // for double click + this.__lastClickTime = +new Date(); - /** - * Component map - * @type {Object.} - * @private - */ - this._componentMap = {}; + // for triple click + this.__lastLastClickTime = +new Date(); - /** - * fabric event handlers - * @type {Object.} - * @private - */ - this._handler = { - onMouseDown: this._onMouseDown.bind(this), - onObjectAdded: this._onObjectAdded.bind(this), - onObjectRemoved: this._onObjectRemoved.bind(this), - onObjectMoved: this._onObjectMoved.bind(this), - onObjectScaled: this._onObjectScaled.bind(this), - onObjectModified: this._onObjectModified.bind(this), - onObjectRotated: this._onObjectRotated.bind(this), - onObjectSelected: this._onObjectSelected.bind(this), - onPathCreated: this._onPathCreated.bind(this), - onSelectionCleared: this._onSelectionCleared.bind(this), - onSelectionCreated: this._onSelectionCreated.bind(this) - }; + this.__lastPointer = { }; - this._setObjectCachingToFalse(); - this._setCanvasElement(element); - this._createDrawingModeInstances(); - this._createComponents(); - this._attachCanvasEvents(); - this._attachZoomEvents(); - } + this.on('mousedown', this.onMouseDown); + }, /** - * Destroy canvas element + * Default event handler to simulate triple click + * @private */ + onMouseDown: function(options) { + if (!this.canvas) { + return; + } + this.__newClickTime = +new Date(); + var newPointer = options.pointer; + if (this.isTripleClick(newPointer)) { + this.fire('tripleclick', options); + this._stopEvent(options.e); + } + this.__lastLastClickTime = this.__lastClickTime; + this.__lastClickTime = this.__newClickTime; + this.__lastPointer = newPointer; + this.__lastIsEditing = this.isEditing; + this.__lastSelected = this.selected; + }, + isTripleClick: function(newPointer) { + return this.__newClickTime - this.__lastClickTime < 500 && + this.__lastClickTime - this.__lastLastClickTime < 500 && + this.__lastPointer.x === newPointer.x && + this.__lastPointer.y === newPointer.y; + }, - _createClass(Graphics, [{ - key: 'destroy', - value: function destroy() { - var wrapperEl = this._canvas.wrapperEl; - - - this._canvas.clear(); + /** + * @private + */ + _stopEvent: function(e) { + e.preventDefault && e.preventDefault(); + e.stopPropagation && e.stopPropagation(); + }, - wrapperEl.parentNode.removeChild(wrapperEl); + /** + * Initializes event handlers related to cursor or selection + */ + initCursorSelectionHandlers: function() { + this.initMousedownHandler(); + this.initMouseupHandler(); + this.initClicks(); + }, - this._detachZoomEvents(); + /** + * Default handler for double click, select a word + */ + doubleClickHandler: function(options) { + if (!this.isEditing) { + return; } + this.selectWord(this.getSelectionStartFromPointer(options.e)); + }, - /** - * Attach zoom events - */ + /** + * Default handler for triple click, select a line + */ + tripleClickHandler: function(options) { + if (!this.isEditing) { + return; + } + this.selectLine(this.getSelectionStartFromPointer(options.e)); + }, - }, { - key: '_attachZoomEvents', - value: function _attachZoomEvents() { - var zoom = this.getComponent(_consts.componentNames.ZOOM); + /** + * Initializes double and triple click event handlers + */ + initClicks: function() { + this.on('mousedblclick', this.doubleClickHandler); + this.on('tripleclick', this.tripleClickHandler); + }, - zoom.attachKeyboardZoomEvents(); + /** + * Default event handler for the basic functionalities needed on _mouseDown + * can be overridden to do something different. + * Scope of this implementation is: find the click position, set selectionStart + * find selectionEnd, initialize the drawing of either cursor or selection area + * initializing a mousedDown on a text area will cancel fabricjs knowledge of + * current compositionMode. It will be set to false. + */ + _mouseDownHandler: function(options) { + if (!this.canvas || !this.editable || (options.e.button && options.e.button !== 1)) { + return; } - /** - * Detach zoom events - */ - - }, { - key: '_detachZoomEvents', - value: function _detachZoomEvents() { - var zoom = this.getComponent(_consts.componentNames.ZOOM); + this.__isMousedown = true; - zoom.detachKeyboardZoomEvents(); + if (this.selected) { + this.inCompositionMode = false; + this.setCursorByClick(options.e); } - /** - * Deactivates all objects on canvas - * @returns {Graphics} this - */ - - }, { - key: 'deactivateAll', - value: function deactivateAll() { - this._canvas.discardActiveObject(); + if (this.isEditing) { + this.__selectionStartOnMouseDown = this.selectionStart; + if (this.selectionStart === this.selectionEnd) { + this.abortCursorAnimation(); + } + this.renderCursorOrSelection(); + } + }, - return this; + /** + * Default event handler for the basic functionalities needed on mousedown:before + * can be overridden to do something different. + * Scope of this implementation is: verify the object is already selected when mousing down + */ + _mouseDownHandlerBefore: function(options) { + if (!this.canvas || !this.editable || (options.e.button && options.e.button !== 1)) { + return; } + // we want to avoid that an object that was selected and then becomes unselectable, + // may trigger editing mode in some way. + this.selected = this === this.canvas._activeObject; + }, - /** - * Renders all objects on canvas - * @returns {Graphics} this - */ + /** + * Initializes "mousedown" event handler + */ + initMousedownHandler: function() { + this.on('mousedown', this._mouseDownHandler); + this.on('mousedown:before', this._mouseDownHandlerBefore); + }, - }, { - key: 'renderAll', - value: function renderAll() { - this._canvas.renderAll(); + /** + * Initializes "mouseup" event handler + */ + initMouseupHandler: function() { + this.on('mouseup', this.mouseUpHandler); + }, - return this; + /** + * standard handler for mouse up, overridable + * @private + */ + mouseUpHandler: function(options) { + this.__isMousedown = false; + if (!this.editable || this.group || + (options.transform && options.transform.actionPerformed) || + (options.e.button && options.e.button !== 1)) { + return; } - /** - * Adds objects on canvas - * @param {Object|Array} objects - objects - */ - - }, { - key: 'add', - value: function add(objects) { - var _canvas; - - var theArgs = []; - if (isArray(objects)) { - theArgs = objects; - } else { - theArgs.push(objects); + if (this.canvas) { + var currentActive = this.canvas._activeObject; + if (currentActive && currentActive !== this) { + // avoid running this logic when there is an active object + // this because is possible with shift click and fast clicks, + // to rapidly deselect and reselect this object and trigger an enterEdit + return; } - - (_canvas = this._canvas).add.apply(_canvas, theArgs); } - /** - * Removes the object or group - * @param {Object} target - graphics object or group - * @returns {boolean} true if contains or false - */ - - }, { - key: 'contains', - value: function contains(target) { - return this._canvas.contains(target); + if (this.__lastSelected && !this.__corner) { + this.selected = false; + this.__lastSelected = false; + this.enterEditing(options.e); + if (this.selectionStart === this.selectionEnd) { + this.initDelayedCursor(true); + } + else { + this.renderCursorOrSelection(); + } } + else { + this.selected = true; + } + }, - /** - * Gets all objects or group - * @returns {Array} all objects, shallow copy - */ + /** + * Changes cursor location in a text depending on passed pointer (x/y) object + * @param {Event} e Event object + */ + setCursorByClick: function(e) { + var newSelection = this.getSelectionStartFromPointer(e), + start = this.selectionStart, end = this.selectionEnd; + if (e.shiftKey) { + this.setSelectionStartEndWithShift(start, end, newSelection); + } + else { + this.selectionStart = newSelection; + this.selectionEnd = newSelection; + } + if (this.isEditing) { + this._fireSelectionChanged(); + this._updateTextarea(); + } + }, - }, { - key: 'getObjects', - value: function getObjects() { - return this._canvas.getObjects().slice(); + /** + * Returns index of a character corresponding to where an object was clicked + * @param {Event} e Event object + * @return {Number} Index of a character + */ + getSelectionStartFromPointer: function(e) { + var mouseOffset = this.getLocalPointer(e), + prevWidth = 0, + width = 0, + height = 0, + charIndex = 0, + lineIndex = 0, + lineLeftOffset, + line; + for (var i = 0, len = this._textLines.length; i < len; i++) { + if (height <= mouseOffset.y) { + height += this.getHeightOfLine(i) * this.scaleY; + lineIndex = i; + if (i > 0) { + charIndex += this._textLines[i - 1].length + this.missingNewlineOffset(i - 1); + } + } + else { + break; + } + } + lineLeftOffset = this._getLineLeftOffset(lineIndex); + width = lineLeftOffset * this.scaleX; + line = this._textLines[lineIndex]; + // handling of RTL: in order to get things work correctly, + // we assume RTL writing is mirrored compared to LTR writing. + // so in position detection we mirror the X offset, and when is time + // of rendering it, we mirror it again. + if (this.direction === 'rtl') { + mouseOffset.x = this.width * this.scaleX - mouseOffset.x + width; + } + for (var j = 0, jlen = line.length; j < jlen; j++) { + prevWidth = width; + // i removed something about flipX here, check. + width += this.__charBounds[lineIndex][j].kernedWidth * this.scaleX; + if (width <= mouseOffset.x) { + charIndex++; + } + else { + break; + } } + return this._getNewSelectionStartFromOffset(mouseOffset, prevWidth, width, charIndex, jlen); + }, - /** - * Get an object by id - * @param {number} id - object id - * @returns {fabric.Object} object corresponding id - */ + /** + * @private + */ + _getNewSelectionStartFromOffset: function(mouseOffset, prevWidth, width, index, jlen) { + // we need Math.abs because when width is after the last char, the offset is given as 1, while is 0 + var distanceBtwLastCharAndCursor = mouseOffset.x - prevWidth, + distanceBtwNextCharAndCursor = width - mouseOffset.x, + offset = distanceBtwNextCharAndCursor > distanceBtwLastCharAndCursor || + distanceBtwNextCharAndCursor < 0 ? 0 : 1, + newSelectionStart = index + offset; + // if object is horizontally flipped, mirror cursor location from the end + if (this.flipX) { + newSelectionStart = jlen - newSelectionStart; + } - }, { - key: 'getObject', - value: function getObject(id) { - return this._objects[id]; + if (newSelectionStart > this._text.length) { + newSelectionStart = this._text.length; } - /** - * Removes the object or group - * @param {Object} target - graphics object or group - */ + return newSelectionStart; + } +}); - }, { - key: 'remove', - value: function remove(target) { - this._canvas.remove(target); + +fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ { + + /** + * Initializes hidden textarea (needed to bring up keyboard in iOS) + */ + initHiddenTextarea: function() { + this.hiddenTextarea = fabric.document.createElement('textarea'); + this.hiddenTextarea.setAttribute('autocapitalize', 'off'); + this.hiddenTextarea.setAttribute('autocorrect', 'off'); + this.hiddenTextarea.setAttribute('autocomplete', 'off'); + this.hiddenTextarea.setAttribute('spellcheck', 'false'); + this.hiddenTextarea.setAttribute('data-fabric-hiddentextarea', ''); + this.hiddenTextarea.setAttribute('wrap', 'off'); + var style = this._calcTextareaPosition(); + // line-height: 1px; was removed from the style to fix this: + // https://bugs.chromium.org/p/chromium/issues/detail?id=870966 + this.hiddenTextarea.style.cssText = 'position: absolute; top: ' + style.top + + '; left: ' + style.left + '; z-index: -999; opacity: 0; width: 1px; height: 1px; font-size: 1px;' + + ' paddingｰtop: ' + style.fontSize + ';'; + + if (this.hiddenTextareaContainer) { + this.hiddenTextareaContainer.appendChild(this.hiddenTextarea); + } + else { + fabric.document.body.appendChild(this.hiddenTextarea); + } + + fabric.util.addListener(this.hiddenTextarea, 'keydown', this.onKeyDown.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'keyup', this.onKeyUp.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'input', this.onInput.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'copy', this.copy.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'cut', this.copy.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'paste', this.paste.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'compositionstart', this.onCompositionStart.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'compositionupdate', this.onCompositionUpdate.bind(this)); + fabric.util.addListener(this.hiddenTextarea, 'compositionend', this.onCompositionEnd.bind(this)); + + if (!this._clickHandlerInitialized && this.canvas) { + fabric.util.addListener(this.canvas.upperCanvasEl, 'click', this.onClick.bind(this)); + this._clickHandlerInitialized = true; } + }, - /** - * Removes all object or group - * @param {boolean} includesBackground - remove the background image or not - * @returns {Array} all objects array which is removed - */ + /** + * For functionalities on keyDown + * Map a special key to a function of the instance/prototype + * If you need different behaviour for ESC or TAB or arrows, you have to change + * this map setting the name of a function that you build on the fabric.Itext or + * your prototype. + * the map change will affect all Instances unless you need for only some text Instances + * in that case you have to clone this object and assign your Instance. + * this.keysMap = fabric.util.object.clone(this.keysMap); + * The function must be in fabric.Itext.prototype.myFunction And will receive event as args[0] + */ + keysMap: { + 9: 'exitEditing', + 27: 'exitEditing', + 33: 'moveCursorUp', + 34: 'moveCursorDown', + 35: 'moveCursorRight', + 36: 'moveCursorLeft', + 37: 'moveCursorLeft', + 38: 'moveCursorUp', + 39: 'moveCursorRight', + 40: 'moveCursorDown', + }, - }, { - key: 'removeAll', - value: function removeAll(includesBackground) { - var canvas = this._canvas; - var objects = canvas.getObjects().slice(); - canvas.remove.apply(canvas, this._canvas.getObjects()); + keysMapRtl: { + 9: 'exitEditing', + 27: 'exitEditing', + 33: 'moveCursorUp', + 34: 'moveCursorDown', + 35: 'moveCursorLeft', + 36: 'moveCursorRight', + 37: 'moveCursorRight', + 38: 'moveCursorUp', + 39: 'moveCursorLeft', + 40: 'moveCursorDown', + }, - if (includesBackground) { - canvas.clear(); - } + /** + * For functionalities on keyUp + ctrl || cmd + */ + ctrlKeysMapUp: { + 67: 'copy', + 88: 'cut' + }, - return objects; + /** + * For functionalities on keyDown + ctrl || cmd + */ + ctrlKeysMapDown: { + 65: 'selectAll' + }, + + onClick: function() { + // No need to trigger click event here, focus is enough to have the keyboard appear on Android + this.hiddenTextarea && this.hiddenTextarea.focus(); + }, + + /** + * Handles keydown event + * only used for arrows and combination of modifier keys. + * @param {Event} e Event object + */ + onKeyDown: function(e) { + if (!this.isEditing) { + return; } + var keyMap = this.direction === 'rtl' ? this.keysMapRtl : this.keysMap; + if (e.keyCode in keyMap) { + this[keyMap[e.keyCode]](e); + } + else if ((e.keyCode in this.ctrlKeysMapDown) && (e.ctrlKey || e.metaKey)) { + this[this.ctrlKeysMapDown[e.keyCode]](e); + } + else { + return; + } + e.stopImmediatePropagation(); + e.preventDefault(); + if (e.keyCode >= 33 && e.keyCode <= 40) { + // if i press an arrow key just update selection + this.inCompositionMode = false; + this.clearContextTop(); + this.renderCursorOrSelection(); + } + else { + this.canvas && this.canvas.requestRenderAll(); + } + }, - /** - * Removes an object or group by id - * @param {number} id - object id - * @returns {Array} removed objects - */ + /** + * Handles keyup event + * We handle KeyUp because ie11 and edge have difficulties copy/pasting + * if a copy/cut event fired, keyup is dismissed + * @param {Event} e Event object + */ + onKeyUp: function(e) { + if (!this.isEditing || this._copyDone || this.inCompositionMode) { + this._copyDone = false; + return; + } + if ((e.keyCode in this.ctrlKeysMapUp) && (e.ctrlKey || e.metaKey)) { + this[this.ctrlKeysMapUp[e.keyCode]](e); + } + else { + return; + } + e.stopImmediatePropagation(); + e.preventDefault(); + this.canvas && this.canvas.requestRenderAll(); + }, - }, { - key: 'removeObjectById', - value: function removeObjectById(id) { - var objects = []; - var canvas = this._canvas; - var target = this.getObject(id); - var isValidGroup = target && target.isType('group') && !target.isEmpty(); + /** + * Handles onInput event + * @param {Event} e Event object + */ + onInput: function(e) { + var fromPaste = this.fromPaste; + this.fromPaste = false; + e && e.stopPropagation(); + if (!this.isEditing) { + return; + } + // decisions about style changes. + var nextText = this._splitTextIntoLines(this.hiddenTextarea.value).graphemeText, + charCount = this._text.length, + nextCharCount = nextText.length, + removedText, insertedText, + charDiff = nextCharCount - charCount, + selectionStart = this.selectionStart, selectionEnd = this.selectionEnd, + selection = selectionStart !== selectionEnd, + copiedStyle, removeFrom, removeTo; + if (this.hiddenTextarea.value === '') { + this.styles = { }; + this.updateFromTextArea(); + this.fire('changed'); + if (this.canvas) { + this.canvas.fire('text:changed', { target: this }); + this.canvas.requestRenderAll(); + } + return; + } - if (isValidGroup) { - canvas.discardActiveObject(); // restore states for each objects - target.forEachObject(function (obj) { - objects.push(obj); - canvas.remove(obj); + var textareaSelection = this.fromStringToGraphemeSelection( + this.hiddenTextarea.selectionStart, + this.hiddenTextarea.selectionEnd, + this.hiddenTextarea.value + ); + var backDelete = selectionStart > textareaSelection.selectionStart; + + if (selection) { + removedText = this._text.slice(selectionStart, selectionEnd); + charDiff += selectionEnd - selectionStart; + } + else if (nextCharCount < charCount) { + if (backDelete) { + removedText = this._text.slice(selectionEnd + charDiff, selectionEnd); + } + else { + removedText = this._text.slice(selectionStart, selectionStart - charDiff); + } + } + insertedText = nextText.slice(textareaSelection.selectionEnd - charDiff, textareaSelection.selectionEnd); + if (removedText && removedText.length) { + if (insertedText.length) { + // let's copy some style before deleting. + // we want to copy the style before the cursor OR the style at the cursor if selection + // is bigger than 0. + copiedStyle = this.getSelectionStyles(selectionStart, selectionStart + 1, false); + // now duplicate the style one for each inserted text. + copiedStyle = insertedText.map(function() { + // this return an array of references, but that is fine since we are + // copying the style later. + return copiedStyle[0]; }); - } else if (canvas.contains(target)) { - objects.push(target); - canvas.remove(target); } - - return objects; + if (selection) { + removeFrom = selectionStart; + removeTo = selectionEnd; + } + else if (backDelete) { + // detect differences between forwardDelete and backDelete + removeFrom = selectionEnd - removedText.length; + removeTo = selectionEnd; + } + else { + removeFrom = selectionEnd; + removeTo = selectionEnd + removedText.length; + } + this.removeStyleFromTo(removeFrom, removeTo); + } + if (insertedText.length) { + if (fromPaste && insertedText.join('') === fabric.copiedText && !fabric.disableStyleCopyPaste) { + copiedStyle = fabric.copiedTextStyle; + } + this.insertNewStyleBlock(insertedText, selectionStart, copiedStyle); + } + this.updateFromTextArea(); + this.fire('changed'); + if (this.canvas) { + this.canvas.fire('text:changed', { target: this }); + this.canvas.requestRenderAll(); } + }, + /** + * Composition start + */ + onCompositionStart: function() { + this.inCompositionMode = true; + }, - /** - * Get an id by object instance - * @param {fabric.Object} object object - * @returns {number} object id if it exists or null - */ + /** + * Composition end + */ + onCompositionEnd: function() { + this.inCompositionMode = false; + }, - }, { - key: 'getObjectId', - value: function getObjectId(object) { - var key = null; - for (key in this._objects) { - if (this._objects.hasOwnProperty(key)) { - if (object === this._objects[key]) { - return key; - } - } - } + // /** + // * Composition update + // */ + onCompositionUpdate: function(e) { + this.compositionStart = e.target.selectionStart; + this.compositionEnd = e.target.selectionEnd; + this.updateTextareaPosition(); + }, - return null; + /** + * Copies selected text + * @param {Event} e Event object + */ + copy: function() { + if (this.selectionStart === this.selectionEnd) { + //do not cut-copy if no selection + return; } - /** - * Gets an active object or group - * @returns {Object} active object or group instance - */ - - }, { - key: 'getActiveObject', - value: function getActiveObject() { - return this._canvas._activeObject; + fabric.copiedText = this.getSelectedText(); + if (!fabric.disableStyleCopyPaste) { + fabric.copiedTextStyle = this.getSelectionStyles(this.selectionStart, this.selectionEnd, true); + } + else { + fabric.copiedTextStyle = null; } + this._copyDone = true; + }, - /** - * Returns the object ID to delete the object. - * @returns {number} object id for remove - */ + /** + * Pastes text + * @param {Event} e Event object + */ + paste: function() { + this.fromPaste = true; + }, - }, { - key: 'getActiveObjectIdForRemove', - value: function getActiveObjectIdForRemove() { - var activeObject = this.getActiveObject(); - var type = activeObject.type, - left = activeObject.left, - top = activeObject.top; + /** + * @private + * @param {Event} e Event object + * @return {Object} Clipboard data object + */ + _getClipboardData: function(e) { + return (e && e.clipboardData) || fabric.window.clipboardData; + }, - var isSelection = type === 'activeSelection'; + /** + * Finds the width in pixels before the cursor on the same line + * @private + * @param {Number} lineIndex + * @param {Number} charIndex + * @return {Number} widthBeforeCursor width before cursor + */ + _getWidthBeforeCursor: function(lineIndex, charIndex) { + var widthBeforeCursor = this._getLineLeftOffset(lineIndex), bound; - if (isSelection) { - var group = new _fabric2.default.Group([].concat(activeObject.getObjects()), { - left: left, - top: top - }); + if (charIndex > 0) { + bound = this.__charBounds[lineIndex][charIndex - 1]; + widthBeforeCursor += bound.left + bound.width; + } + return widthBeforeCursor; + }, - return this._addFabricObject(group); - } + /** + * Gets start offset of a selection + * @param {Event} e Event object + * @param {Boolean} isRight + * @return {Number} + */ + getDownCursorOffset: function(e, isRight) { + var selectionProp = this._getSelectionForOffset(e, isRight), + cursorLocation = this.get2DCursorLocation(selectionProp), + lineIndex = cursorLocation.lineIndex; + // if on last line, down cursor goes to end of line + if (lineIndex === this._textLines.length - 1 || e.metaKey || e.keyCode === 34) { + // move to the end of a text + return this._text.length - selectionProp; + } + var charIndex = cursorLocation.charIndex, + widthBeforeCursor = this._getWidthBeforeCursor(lineIndex, charIndex), + indexOnOtherLine = this._getIndexOnLine(lineIndex + 1, widthBeforeCursor), + textAfterCursor = this._textLines[lineIndex].slice(charIndex); + return textAfterCursor.length + indexOnOtherLine + 1 + this.missingNewlineOffset(lineIndex); + }, - return this.getObjectId(activeObject); + /** + * private + * Helps finding if the offset should be counted from Start or End + * @param {Event} e Event object + * @param {Boolean} isRight + * @return {Number} + */ + _getSelectionForOffset: function(e, isRight) { + if (e.shiftKey && this.selectionStart !== this.selectionEnd && isRight) { + return this.selectionEnd; } + else { + return this.selectionStart; + } + }, - /** - * Verify that you are ready to erase the object. - * @returns {boolean} ready for object remove - */ + /** + * @param {Event} e Event object + * @param {Boolean} isRight + * @return {Number} + */ + getUpCursorOffset: function(e, isRight) { + var selectionProp = this._getSelectionForOffset(e, isRight), + cursorLocation = this.get2DCursorLocation(selectionProp), + lineIndex = cursorLocation.lineIndex; + if (lineIndex === 0 || e.metaKey || e.keyCode === 33) { + // if on first line, up cursor goes to start of line + return -selectionProp; + } + var charIndex = cursorLocation.charIndex, + widthBeforeCursor = this._getWidthBeforeCursor(lineIndex, charIndex), + indexOnOtherLine = this._getIndexOnLine(lineIndex - 1, widthBeforeCursor), + textBeforeCursor = this._textLines[lineIndex].slice(0, charIndex), + missingNewlineOffset = this.missingNewlineOffset(lineIndex - 1); + // return a negative offset + return -this._textLines[lineIndex - 1].length + + indexOnOtherLine - textBeforeCursor.length + (1 - missingNewlineOffset); + }, - }, { - key: 'isReadyRemoveObject', - value: function isReadyRemoveObject() { - var activeObject = this.getActiveObject(); + /** + * for a given width it founds the matching character. + * @private + */ + _getIndexOnLine: function(lineIndex, width) { + + var line = this._textLines[lineIndex], + lineLeftOffset = this._getLineLeftOffset(lineIndex), + widthOfCharsOnLine = lineLeftOffset, + indexOnLine = 0, charWidth, foundMatch; + + for (var j = 0, jlen = line.length; j < jlen; j++) { + charWidth = this.__charBounds[lineIndex][j].width; + widthOfCharsOnLine += charWidth; + if (widthOfCharsOnLine > width) { + foundMatch = true; + var leftEdge = widthOfCharsOnLine - charWidth, + rightEdge = widthOfCharsOnLine, + offsetFromLeftEdge = Math.abs(leftEdge - width), + offsetFromRightEdge = Math.abs(rightEdge - width); + + indexOnLine = offsetFromRightEdge < offsetFromLeftEdge ? j : (j - 1); + break; + } + } - return activeObject && !activeObject.isEditing; + // reached end + if (!foundMatch) { + indexOnLine = line.length - 1; } - /** - * Gets an active group object - * @returns {Object} active group object instance - */ + return indexOnLine; + }, - }, { - key: 'getActiveObjects', - value: function getActiveObjects() { - var activeObject = this._canvas._activeObject; - return activeObject && activeObject.type === 'activeSelection' ? activeObject : null; + /** + * Moves cursor down + * @param {Event} e Event object + */ + moveCursorDown: function(e) { + if (this.selectionStart >= this._text.length && this.selectionEnd >= this._text.length) { + return; } + this._moveCursorUpOrDown('Down', e); + }, - /** - * Get Active object Selection from object ids - * @param {Array.} objects - fabric objects - * @returns {Object} target - target object group - */ - - }, { - key: 'getActiveSelectionFromObjects', - value: function getActiveSelectionFromObjects(objects) { - var canvas = this.getCanvas(); - - return new _fabric2.default.ActiveSelection(objects, { canvas: canvas }); + /** + * Moves cursor up + * @param {Event} e Event object + */ + moveCursorUp: function(e) { + if (this.selectionStart === 0 && this.selectionEnd === 0) { + return; } + this._moveCursorUpOrDown('Up', e); + }, - /** - * Activates an object or group - * @param {Object} target - target object or group - */ - - }, { - key: 'setActiveObject', - value: function setActiveObject(target) { - this._canvas.setActiveObject(target); + /** + * Moves cursor up or down, fires the events + * @param {String} direction 'Up' or 'Down' + * @param {Event} e Event object + */ + _moveCursorUpOrDown: function(direction, e) { + // getUpCursorOffset + // getDownCursorOffset + var action = 'get' + direction + 'CursorOffset', + offset = this[action](e, this._selectionDirection === 'right'); + if (e.shiftKey) { + this.moveCursorWithShift(offset); + } + else { + this.moveCursorWithoutShift(offset); + } + if (offset !== 0) { + this.setSelectionInBoundaries(); + this.abortCursorAnimation(); + this._currentCursorOpacity = 1; + this.initDelayedCursor(); + this._fireSelectionChanged(); + this._updateTextarea(); } + }, - /** - * Set Crop selection style - * @param {Object} style - Selection styles - */ + /** + * Moves cursor with shift + * @param {Number} offset + */ + moveCursorWithShift: function(offset) { + var newSelection = this._selectionDirection === 'left' + ? this.selectionStart + offset + : this.selectionEnd + offset; + this.setSelectionStartEndWithShift(this.selectionStart, this.selectionEnd, newSelection); + return offset !== 0; + }, - }, { - key: 'setCropSelectionStyle', - value: function setCropSelectionStyle(style) { - this.cropSelectionStyle = style; + /** + * Moves cursor up without shift + * @param {Number} offset + */ + moveCursorWithoutShift: function(offset) { + if (offset < 0) { + this.selectionStart += offset; + this.selectionEnd = this.selectionStart; + } + else { + this.selectionEnd += offset; + this.selectionStart = this.selectionEnd; } + return offset !== 0; + }, - /** - * Get component - * @param {string} name - Component name - * @returns {Component} - */ + /** + * Moves cursor left + * @param {Event} e Event object + */ + moveCursorLeft: function(e) { + if (this.selectionStart === 0 && this.selectionEnd === 0) { + return; + } + this._moveCursorLeftOrRight('Left', e); + }, - }, { - key: 'getComponent', - value: function getComponent(name) { - return this._componentMap[name]; + /** + * @private + * @return {Boolean} true if a change happened + */ + _move: function(e, prop, direction) { + var newValue; + if (e.altKey) { + newValue = this['findWordBoundary' + direction](this[prop]); + } + else if (e.metaKey || e.keyCode === 35 || e.keyCode === 36 ) { + newValue = this['findLineBoundary' + direction](this[prop]); + } + else { + this[prop] += direction === 'Left' ? -1 : 1; + return true; } + if (typeof newValue !== undefined && this[prop] !== newValue) { + this[prop] = newValue; + return true; + } + }, - /** - * Get current drawing mode - * @returns {string} - */ + /** + * @private + */ + _moveLeft: function(e, prop) { + return this._move(e, prop, 'Left'); + }, - }, { - key: 'getDrawingMode', - value: function getDrawingMode() { - return this._drawingMode; - } + /** + * @private + */ + _moveRight: function(e, prop) { + return this._move(e, prop, 'Right'); + }, - /** - * Start a drawing mode. If the current mode is not 'NORMAL', 'stopDrawingMode()' will be called first. - * @param {String} mode Can be one of 'CROPPER', 'FREE_DRAWING', 'LINE', 'TEXT', 'SHAPE' - * @param {Object} [option] parameters of drawing mode, it's available with 'FREE_DRAWING', 'LINE_DRAWING' - * @param {Number} [option.width] brush width - * @param {String} [option.color] brush color - * @returns {boolean} true if success or false - */ + /** + * Moves cursor left without keeping selection + * @param {Event} e + */ + moveCursorLeftWithoutShift: function(e) { + var change = true; + this._selectionDirection = 'left'; - }, { - key: 'startDrawingMode', - value: function startDrawingMode(mode, option) { - if (this._isSameDrawingMode(mode)) { - return true; - } + // only move cursor when there is no selection, + // otherwise we discard it, and leave cursor on same place + if (this.selectionEnd === this.selectionStart && this.selectionStart !== 0) { + change = this._moveLeft(e, 'selectionStart'); - // If the current mode is not 'NORMAL', 'stopDrawingMode()' will be called first. - this.stopDrawingMode(); + } + this.selectionEnd = this.selectionStart; + return change; + }, - var drawingModeInstance = this._getDrawingModeInstance(mode); - if (drawingModeInstance && drawingModeInstance.start) { - drawingModeInstance.start(this, option); + /** + * Moves cursor left while keeping selection + * @param {Event} e + */ + moveCursorLeftWithShift: function(e) { + if (this._selectionDirection === 'right' && this.selectionStart !== this.selectionEnd) { + return this._moveLeft(e, 'selectionEnd'); + } + else if (this.selectionStart !== 0){ + this._selectionDirection = 'left'; + return this._moveLeft(e, 'selectionStart'); + } + }, - this._drawingMode = mode; - } + /** + * Moves cursor right + * @param {Event} e Event object + */ + moveCursorRight: function(e) { + if (this.selectionStart >= this._text.length && this.selectionEnd >= this._text.length) { + return; + } + this._moveCursorLeftOrRight('Right', e); + }, - return !!drawingModeInstance; + /** + * Moves cursor right or Left, fires event + * @param {String} direction 'Left', 'Right' + * @param {Event} e Event object + */ + _moveCursorLeftOrRight: function(direction, e) { + var actionName = 'moveCursor' + direction + 'With'; + this._currentCursorOpacity = 1; + + if (e.shiftKey) { + actionName += 'Shift'; } + else { + actionName += 'outShift'; + } + if (this[actionName](e)) { + this.abortCursorAnimation(); + this.initDelayedCursor(); + this._fireSelectionChanged(); + this._updateTextarea(); + } + }, - /** - * Stop the current drawing mode and back to the 'NORMAL' mode - */ + /** + * Moves cursor right while keeping selection + * @param {Event} e + */ + moveCursorRightWithShift: function(e) { + if (this._selectionDirection === 'left' && this.selectionStart !== this.selectionEnd) { + return this._moveRight(e, 'selectionStart'); + } + else if (this.selectionEnd !== this._text.length) { + this._selectionDirection = 'right'; + return this._moveRight(e, 'selectionEnd'); + } + }, - }, { - key: 'stopDrawingMode', - value: function stopDrawingMode() { - if (this._isSameDrawingMode(_consts.drawingModes.NORMAL)) { - return; - } + /** + * Moves cursor right without keeping selection + * @param {Event} e Event object + */ + moveCursorRightWithoutShift: function(e) { + var changed = true; + this._selectionDirection = 'right'; - var drawingModeInstance = this._getDrawingModeInstance(this.getDrawingMode()); - if (drawingModeInstance && drawingModeInstance.end) { - drawingModeInstance.end(this); - } - this._drawingMode = _consts.drawingModes.NORMAL; + if (this.selectionStart === this.selectionEnd) { + changed = this._moveRight(e, 'selectionStart'); + this.selectionEnd = this.selectionStart; + } + else { + this.selectionStart = this.selectionEnd; } + return changed; + }, + + /** + * Removes characters from start/end + * start/end ar per grapheme position in _text array. + * + * @param {Number} start + * @param {Number} end default to start + 1 + */ + removeChars: function(start, end) { + if (typeof end === 'undefined') { + end = start + 1; + } + this.removeStyleFromTo(start, end); + this._text.splice(start, end - start); + this.text = this._text.join(''); + this.set('dirty', true); + if (this._shouldClearDimensionCache()) { + this.initDimensions(); + this.setCoords(); + } + this._removeExtraneousStyles(); + }, + + /** + * insert characters at start position, before start position. + * start equal 1 it means the text get inserted between actual grapheme 0 and 1 + * if style array is provided, it must be as the same length of text in graphemes + * if end is provided and is bigger than start, old text is replaced. + * start/end ar per grapheme position in _text array. + * + * @param {String} text text to insert + * @param {Array} style array of style objects + * @param {Number} start + * @param {Number} end default to start + 1 + */ + insertChars: function(text, style, start, end) { + if (typeof end === 'undefined') { + end = start; + } + if (end > start) { + this.removeStyleFromTo(start, end); + } + var graphemes = fabric.util.string.graphemeSplit(text); + this.insertNewStyleBlock(graphemes, start, style); + this._text = [].concat(this._text.slice(0, start), graphemes, this._text.slice(end)); + this.text = this._text.join(''); + this.set('dirty', true); + if (this._shouldClearDimensionCache()) { + this.initDimensions(); + this.setCoords(); + } + this._removeExtraneousStyles(); + }, + +}); + + +/* _TO_SVG_START_ */ +(function() { + var toFixed = fabric.util.toFixed, + multipleSpacesRegex = / +/g; + + fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototype */ { /** - * Change zoom of canvas - * @param {{x: number, y: number}} center - center of zoom - * @param {number} zoomLevel - zoom level + * Returns SVG representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance */ + _toSVG: function() { + var offsets = this._getSVGLeftTopOffsets(), + textAndBg = this._getSVGTextAndBg(offsets.textTop, offsets.textLeft); + return this._wrapSVGTextAndBg(textAndBg); + }, - }, { - key: 'zoom', - value: function zoom(_ref2, zoomLevel) { - var x = _ref2.x, - y = _ref2.y; + /** + * Returns svg representation of an instance + * @param {Function} [reviver] Method for further parsing of svg representation. + * @return {String} svg representation of an instance + */ + toSVG: function(reviver) { + return this._createBaseSVGMarkup( + this._toSVG(), + { reviver: reviver, noStyle: true, withShadow: true } + ); + }, - var zoom = this.getComponent(_consts.componentNames.ZOOM); + /** + * @private + */ + _getSVGLeftTopOffsets: function() { + return { + textLeft: -this.width / 2, + textTop: -this.height / 2, + lineTop: this.getHeightOfLine(0) + }; + }, - zoom.zoom({ x: x, y: y }, zoomLevel); - } + /** + * @private + */ + _wrapSVGTextAndBg: function(textAndBg) { + var noShadow = true, + textDecoration = this.getSvgTextDecoration(this); + return [ + textAndBg.textBgRects.join(''), + '\t\t', + textAndBg.textSpans.join(''), + '\n' + ]; + }, /** - * Get zoom mode - * @returns {string} + * @private + * @param {Number} textTopOffset Text top offset + * @param {Number} textLeftOffset Text left offset + * @return {Object} */ + _getSVGTextAndBg: function(textTopOffset, textLeftOffset) { + var textSpans = [], + textBgRects = [], + height = textTopOffset, lineOffset; + // bounding-box background + this._setSVGBg(textBgRects); - }, { - key: 'getZoomMode', - value: function getZoomMode() { - var zoom = this.getComponent(_consts.componentNames.ZOOM); + // text and text-background + for (var i = 0, len = this._textLines.length; i < len; i++) { + lineOffset = this._getLineLeftOffset(i); + if (this.textBackgroundColor || this.styleHas('textBackgroundColor', i)) { + this._setSVGTextLineBg(textBgRects, i, textLeftOffset + lineOffset, height); + } + this._setSVGTextLineText(textSpans, i, textLeftOffset + lineOffset, height); + height += this.getHeightOfLine(i); + } - return zoom.mode; - } + return { + textSpans: textSpans, + textBgRects: textBgRects + }; + }, /** - * Start zoom-in mode + * @private */ + _createTextCharSpan: function(_char, styleDecl, left, top) { + var shouldUseWhitespace = _char !== _char.trim() || _char.match(multipleSpacesRegex), + styleProps = this.getSvgSpanStyles(styleDecl, shouldUseWhitespace), + fillStyles = styleProps ? 'style="' + styleProps + '"' : '', + dy = styleDecl.deltaY, dySpan = '', + NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; + if (dy) { + dySpan = ' dy="' + toFixed(dy, NUM_FRACTION_DIGITS) + '" '; + } + return [ + '', + fabric.util.string.escapeXml(_char), + '' + ].join(''); + }, - }, { - key: 'startZoomInMode', - value: function startZoomInMode() { - var zoom = this.getComponent(_consts.componentNames.ZOOM); + _setSVGTextLineText: function(textSpans, lineIndex, textLeftOffset, textTopOffset) { + // set proper line offset + var lineHeight = this.getHeightOfLine(lineIndex), + isJustify = this.textAlign.indexOf('justify') !== -1, + actualStyle, + nextStyle, + charsToRender = '', + charBox, style, + boxWidth = 0, + line = this._textLines[lineIndex], + timeToRender; + + textTopOffset += lineHeight * (1 - this._fontSizeFraction) / this.lineHeight; + for (var i = 0, len = line.length - 1; i <= len; i++) { + timeToRender = i === len || this.charSpacing; + charsToRender += line[i]; + charBox = this.__charBounds[lineIndex][i]; + if (boxWidth === 0) { + textLeftOffset += charBox.kernedWidth - charBox.width; + boxWidth += charBox.width; + } + else { + boxWidth += charBox.kernedWidth; + } + if (isJustify && !timeToRender) { + if (this._reSpaceAndTab.test(line[i])) { + timeToRender = true; + } + } + if (!timeToRender) { + // if we have charSpacing, we render char by char + actualStyle = actualStyle || this.getCompleteStyleDeclaration(lineIndex, i); + nextStyle = this.getCompleteStyleDeclaration(lineIndex, i + 1); + timeToRender = this._hasStyleChangedForSvg(actualStyle, nextStyle); + } + if (timeToRender) { + style = this._getStyleDeclaration(lineIndex, i) || { }; + textSpans.push(this._createTextCharSpan(charsToRender, style, textLeftOffset, textTopOffset)); + charsToRender = ''; + actualStyle = nextStyle; + textLeftOffset += boxWidth; + boxWidth = 0; + } + } + }, - zoom.startZoomInMode(); - } + _pushTextBgRect: function(textBgRects, color, left, top, width, height) { + var NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS; + textBgRects.push( + '\t\t\n'); + }, + + _setSVGTextLineBg: function(textBgRects, i, leftOffset, textTopOffset) { + var line = this._textLines[i], + heightOfLine = this.getHeightOfLine(i) / this.lineHeight, + boxWidth = 0, + boxStart = 0, + charBox, currentColor, + lastColor = this.getValueOfPropertyAt(i, 0, 'textBackgroundColor'); + for (var j = 0, jlen = line.length; j < jlen; j++) { + charBox = this.__charBounds[i][j]; + currentColor = this.getValueOfPropertyAt(i, j, 'textBackgroundColor'); + if (currentColor !== lastColor) { + lastColor && this._pushTextBgRect(textBgRects, lastColor, leftOffset + boxStart, + textTopOffset, boxWidth, heightOfLine); + boxStart = charBox.left; + boxWidth = charBox.width; + lastColor = currentColor; + } + else { + boxWidth += charBox.kernedWidth; + } + } + currentColor && this._pushTextBgRect(textBgRects, currentColor, leftOffset + boxStart, + textTopOffset, boxWidth, heightOfLine); + }, /** - * Stop zoom-in mode + * Adobe Illustrator (at least CS5) is unable to render rgba()-based fill values + * we work around it by "moving" alpha channel into opacity attribute and setting fill's alpha to 1 + * + * @private + * @param {*} value + * @return {String} */ + _getFillAttributes: function(value) { + var fillColor = (value && typeof value === 'string') ? new fabric.Color(value) : ''; + if (!fillColor || !fillColor.getSource() || fillColor.getAlpha() === 1) { + return 'fill="' + value + '"'; + } + return 'opacity="' + fillColor.getAlpha() + '" fill="' + fillColor.setAlpha(1).toRgb() + '"'; + }, - }, { - key: 'endZoomInMode', - value: function endZoomInMode() { - var zoom = this.getComponent(_consts.componentNames.ZOOM); - - zoom.endZoomInMode(); - } + /** + * @private + */ + _getSVGLineTopOffset: function(lineIndex) { + var lineTopOffset = 0, lastHeight = 0; + for (var j = 0; j < lineIndex; j++) { + lineTopOffset += this.getHeightOfLine(j); + } + lastHeight = this.getHeightOfLine(j); + return { + lineTop: lineTopOffset, + offset: (this._fontSizeMult - this._fontSizeFraction) * lastHeight / (this.lineHeight * this._fontSizeMult) + }; + }, /** - * Zoom out one step + * Returns styles-string for svg-export + * @param {Boolean} skipShadow a boolean to skip shadow filter output + * @return {String} */ + getSvgStyles: function(skipShadow) { + var svgStyle = fabric.Object.prototype.getSvgStyles.call(this, skipShadow); + return svgStyle + ' white-space: pre;'; + }, + }); +})(); +/* _TO_SVG_END_ */ - }, { - key: 'zoomOut', - value: function zoomOut() { - var zoom = this.getComponent(_consts.componentNames.ZOOM); - zoom.zoomOut(); - } +(function(global) { + + 'use strict'; + + var fabric = global.fabric || (global.fabric = {}); + + /** + * Textbox class, based on IText, allows the user to resize the text rectangle + * and wraps lines automatically. Textboxes have their Y scaling locked, the + * user can only change width. Height is adjusted automatically based on the + * wrapping of lines. + * @class fabric.Textbox + * @extends fabric.IText + * @mixes fabric.Observable + * @return {fabric.Textbox} thisArg + * @see {@link fabric.Textbox#initialize} for constructor definition + */ + fabric.Textbox = fabric.util.createClass(fabric.IText, fabric.Observable, { /** - * Start hand mode + * Type of an object + * @type String + * @default */ + type: 'textbox', - }, { - key: 'startHandMode', - value: function startHandMode() { - var zoom = this.getComponent(_consts.componentNames.ZOOM); + /** + * Minimum width of textbox, in pixels. + * @type Number + * @default + */ + minWidth: 20, - zoom.startHandMode(); - } + /** + * Minimum calculated width of a textbox, in pixels. + * fixed to 2 so that an empty textbox cannot go to 0 + * and is still selectable without text. + * @type Number + * @default + */ + dynamicMinWidth: 2, /** - * Stop hand mode + * Cached array of text wrapping. + * @type Array */ + __cachedLines: null, - }, { - key: 'endHandMode', - value: function endHandMode() { - var zoom = this.getComponent(_consts.componentNames.ZOOM); + /** + * Override standard Object class values + */ + lockScalingFlip: true, - zoom.endHandMode(); - } + /** + * Override standard Object class values + * Textbox needs this on false + */ + noScaleCache: false, /** - * Zoom reset + * Properties which when set cause object to change dimensions + * @type Object + * @private */ + _dimensionAffectingProps: fabric.Text.prototype._dimensionAffectingProps.concat('width'), - }, { - key: 'resetZoom', - value: function resetZoom() { - var zoom = this.getComponent(_consts.componentNames.ZOOM); + /** + * Use this regular expression to split strings in breakable lines + * @private + */ + _wordJoiners: /[ \t\r]/, - zoom.resetZoom(); - } + /** + * Use this boolean property in order to split strings that have no white space concept. + * this is a cheap way to help with chinese/japanese + * @type Boolean + * @since 2.6.0 + */ + splitByGrapheme: false, /** - * To data url from canvas - * @param {Object} options - options for toDataURL - * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png" - * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg. - * @param {Number} [options.multiplier=1] Multiplier to scale by - * @param {Number} [options.left] Cropping left offset. Introduced in fabric v1.2.14 - * @param {Number} [options.top] Cropping top offset. Introduced in fabric v1.2.14 - * @param {Number} [options.width] Cropping width. Introduced in fabric v1.2.14 - * @param {Number} [options.height] Cropping height. Introduced in fabric v1.2.14 - * @returns {string} A DOMString containing the requested data URI. + * Unlike superclass's version of this function, Textbox does not update + * its width. + * @private + * @override */ + initDimensions: function() { + if (this.__skipDimension) { + return; + } + this.isEditing && this.initDelayedCursor(); + this.clearContextTop(); + this._clearCache(); + // clear dynamicMinWidth as it will be different after we re-wrap line + this.dynamicMinWidth = 0; + // wrap lines + this._styleMap = this._generateStyleMap(this._splitText()); + // if after wrapping, the width is smaller than dynamicMinWidth, change the width and re-wrap + if (this.dynamicMinWidth > this.width) { + this._set('width', this.dynamicMinWidth); + } + if (this.textAlign.indexOf('justify') !== -1) { + // once text is measured we need to make space fatter to make justified text. + this.enlargeSpaces(); + } + // clear cache and re-calculate height + this.height = this.calcTextHeight(); + this.saveState({ propertySet: '_dimensionAffectingProps' }); + }, - }, { - key: 'toDataURL', - value: function toDataURL(options) { - var cropper = this.getComponent(_consts.componentNames.CROPPER); - cropper.changeVisibility(false); + /** + * Generate an object that translates the style object so that it is + * broken up by visual lines (new lines and automatic wrapping). + * The original text styles object is broken up by actual lines (new lines only), + * which is only sufficient for Text / IText + * @private + */ + _generateStyleMap: function(textInfo) { + var realLineCount = 0, + realLineCharCount = 0, + charCount = 0, + map = {}; - var dataUrl = this._canvas && this._canvas.toDataURL(options); - cropper.changeVisibility(true); + for (var i = 0; i < textInfo.graphemeLines.length; i++) { + if (textInfo.graphemeText[charCount] === '\n' && i > 0) { + realLineCharCount = 0; + charCount++; + realLineCount++; + } + else if (!this.splitByGrapheme && this._reSpaceAndTab.test(textInfo.graphemeText[charCount]) && i > 0) { + // this case deals with space's that are removed from end of lines when wrapping + realLineCharCount++; + charCount++; + } - return dataUrl; - } + map[i] = { line: realLineCount, offset: realLineCharCount }; + + charCount += textInfo.graphemeLines[i].length; + realLineCharCount += textInfo.graphemeLines[i].length; + } + + return map; + }, /** - * Save image(background) of canvas - * @param {string} name - Name of image - * @param {?fabric.Image} canvasImage - Fabric image instance + * Returns true if object has a style property or has it on a specified line + * @param {Number} lineIndex + * @return {Boolean} */ - - }, { - key: 'setCanvasImage', - value: function setCanvasImage(name, canvasImage) { - if (canvasImage) { - stamp(canvasImage); + styleHas: function(property, lineIndex) { + if (this._styleMap && !this.isWrapping) { + var map = this._styleMap[lineIndex]; + if (map) { + lineIndex = map.line; + } } - this.imageName = name; - this.canvasImage = canvasImage; - } + return fabric.Text.prototype.styleHas.call(this, property, lineIndex); + }, /** - * Set css max dimension - * @param {{width: number, height: number}} maxDimension - Max width & Max height + * Returns true if object has no styling or no styling in a line + * @param {Number} lineIndex , lineIndex is on wrapped lines. + * @return {Boolean} */ - - }, { - key: 'setCssMaxDimension', - value: function setCssMaxDimension(maxDimension) { - this.cssMaxWidth = maxDimension.width || this.cssMaxWidth; - this.cssMaxHeight = maxDimension.height || this.cssMaxHeight; - } + isEmptyStyles: function(lineIndex) { + if (!this.styles) { + return true; + } + var offset = 0, nextLineIndex = lineIndex + 1, nextOffset, obj, shouldLimit = false, + map = this._styleMap[lineIndex], mapNextLine = this._styleMap[lineIndex + 1]; + if (map) { + lineIndex = map.line; + offset = map.offset; + } + if (mapNextLine) { + nextLineIndex = mapNextLine.line; + shouldLimit = nextLineIndex === lineIndex; + nextOffset = mapNextLine.offset; + } + obj = typeof lineIndex === 'undefined' ? this.styles : { line: this.styles[lineIndex] }; + for (var p1 in obj) { + for (var p2 in obj[p1]) { + if (p2 >= offset && (!shouldLimit || p2 < nextOffset)) { + // eslint-disable-next-line no-unused-vars + for (var p3 in obj[p1][p2]) { + return false; + } + } + } + } + return true; + }, /** - * Adjust canvas dimension with scaling image + * @param {Number} lineIndex + * @param {Number} charIndex + * @private */ - - }, { - key: 'adjustCanvasDimension', - value: function adjustCanvasDimension() { - this.adjustCanvasDimensionBase(this.canvasImage.scale(1)); - } - }, { - key: 'adjustCanvasDimensionBase', - value: function adjustCanvasDimensionBase() { - var canvasImage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; - - if (!canvasImage) { - canvasImage = this.canvasImage; + _getStyleDeclaration: function(lineIndex, charIndex) { + if (this._styleMap && !this.isWrapping) { + var map = this._styleMap[lineIndex]; + if (!map) { + return null; + } + lineIndex = map.line; + charIndex = map.offset + charIndex; } + return this.callSuper('_getStyleDeclaration', lineIndex, charIndex); + }, - var _canvasImage$getBound = canvasImage.getBoundingRect(), - width = _canvasImage$getBound.width, - height = _canvasImage$getBound.height; - - var maxDimension = this._calcMaxDimension(width, height); - - this.setCanvasCssDimension({ - width: '100%', - height: '100%', // Set height '' for IE9 - 'max-width': maxDimension.width + 'px', - 'max-height': maxDimension.height + 'px' - }); + /** + * @param {Number} lineIndex + * @param {Number} charIndex + * @param {Object} style + * @private + */ + _setStyleDeclaration: function(lineIndex, charIndex, style) { + var map = this._styleMap[lineIndex]; + lineIndex = map.line; + charIndex = map.offset + charIndex; - this.setCanvasBackstoreDimension({ - width: width, - height: height - }); - this._canvas.centerObject(canvasImage); - } + this.styles[lineIndex][charIndex] = style; + }, /** - * Set canvas dimension - css only - * {@link http://fabricjs.com/docs/fabric.Canvas.html#setDimensions} - * @param {Object} dimension - Canvas css dimension + * @param {Number} lineIndex + * @param {Number} charIndex + * @private */ - - }, { - key: 'setCanvasCssDimension', - value: function setCanvasCssDimension(dimension) { - this._canvas.setDimensions(dimension, cssOnly); - } + _deleteStyleDeclaration: function(lineIndex, charIndex) { + var map = this._styleMap[lineIndex]; + lineIndex = map.line; + charIndex = map.offset + charIndex; + delete this.styles[lineIndex][charIndex]; + }, /** - * Set canvas dimension - backstore only - * {@link http://fabricjs.com/docs/fabric.Canvas.html#setDimensions} - * @param {Object} dimension - Canvas backstore dimension + * probably broken need a fix + * Returns the real style line that correspond to the wrapped lineIndex line + * Used just to verify if the line does exist or not. + * @param {Number} lineIndex + * @returns {Boolean} if the line exists or not + * @private */ + _getLineStyle: function(lineIndex) { + var map = this._styleMap[lineIndex]; + return !!this.styles[map.line]; + }, - }, { - key: 'setCanvasBackstoreDimension', - value: function setCanvasBackstoreDimension(dimension) { - this._canvas.setDimensions(dimension, backstoreOnly); - } + /** + * Set the line style to an empty object so that is initialized + * @param {Number} lineIndex + * @param {Object} style + * @private + */ + _setLineStyle: function(lineIndex) { + var map = this._styleMap[lineIndex]; + this.styles[map.line] = {}; + }, /** - * Set image properties - * {@link http://fabricjs.com/docs/fabric.Image.html#set} - * @param {Object} setting - Image properties - * @param {boolean} [withRendering] - If true, The changed image will be reflected in the canvas + * Wraps text using the 'width' property of Textbox. First this function + * splits text on newlines, so we preserve newlines entered by the user. + * Then it wraps each line using the width of the Textbox by calling + * _wrapLine(). + * @param {Array} lines The string array of text that is split into lines + * @param {Number} desiredWidth width you want to wrap to + * @returns {Array} Array of lines */ + _wrapText: function(lines, desiredWidth) { + var wrapped = [], i; + this.isWrapping = true; + for (i = 0; i < lines.length; i++) { + wrapped = wrapped.concat(this._wrapLine(lines[i], i, desiredWidth)); + } + this.isWrapping = false; + return wrapped; + }, - }, { - key: 'setImageProperties', - value: function setImageProperties(setting, withRendering) { - var canvasImage = this.canvasImage; + /** + * Helper function to measure a string of text, given its lineIndex and charIndex offset + * it gets called when charBounds are not available yet. + * @param {CanvasRenderingContext2D} ctx + * @param {String} text + * @param {number} lineIndex + * @param {number} charOffset + * @returns {number} + * @private + */ + _measureWord: function(word, lineIndex, charOffset) { + var width = 0, prevGrapheme, skipLeft = true; + charOffset = charOffset || 0; + for (var i = 0, len = word.length; i < len; i++) { + var box = this._getGraphemeBox(word[i], lineIndex, i + charOffset, prevGrapheme, skipLeft); + width += box.kernedWidth; + prevGrapheme = word[i]; + } + return width; + }, + /** + * Wraps a line of text using the width of the Textbox and a context. + * @param {Array} line The grapheme array that represent the line + * @param {Number} lineIndex + * @param {Number} desiredWidth width you want to wrap the line to + * @param {Number} reservedSpace space to remove from wrapping for custom functionalities + * @returns {Array} Array of line(s) into which the given text is wrapped + * to. + */ + _wrapLine: function(_line, lineIndex, desiredWidth, reservedSpace) { + var lineWidth = 0, + splitByGrapheme = this.splitByGrapheme, + graphemeLines = [], + line = [], + // spaces in different languages? + words = splitByGrapheme ? fabric.util.string.graphemeSplit(_line) : _line.split(this._wordJoiners), + word = '', + offset = 0, + infix = splitByGrapheme ? '' : ' ', + wordWidth = 0, + infixWidth = 0, + largestWordWidth = 0, + lineJustStarted = true, + additionalSpace = this._getWidthOfCharSpacing(), + reservedSpace = reservedSpace || 0; + // fix a difference between split and graphemeSplit + if (words.length === 0) { + words.push([]); + } + desiredWidth -= reservedSpace; + for (var i = 0; i < words.length; i++) { + // if using splitByGrapheme words are already in graphemes. + word = splitByGrapheme ? words[i] : fabric.util.string.graphemeSplit(words[i]); + wordWidth = this._measureWord(word, lineIndex, offset); + offset += word.length; + + lineWidth += infixWidth + wordWidth - additionalSpace; + if (lineWidth > desiredWidth && !lineJustStarted) { + graphemeLines.push(line); + line = []; + lineWidth = wordWidth; + lineJustStarted = true; + } + else { + lineWidth += additionalSpace; + } - if (!canvasImage) { - return; + if (!lineJustStarted && !splitByGrapheme) { + line.push(infix); + } + line = line.concat(word); + + infixWidth = splitByGrapheme ? 0 : this._measureWord([infix], lineIndex, offset); + offset++; + lineJustStarted = false; + // keep track of largest word + if (wordWidth > largestWordWidth) { + largestWordWidth = wordWidth; + } } - canvasImage.set(setting).setCoords(); - if (withRendering) { - this._canvas.renderAll(); + i && graphemeLines.push(line); + + if (largestWordWidth + reservedSpace > this.dynamicMinWidth) { + this.dynamicMinWidth = largestWordWidth - additionalSpace + reservedSpace; } - } + return graphemeLines; + }, /** - * Returns canvas element of fabric.Canvas[[lower-canvas]] - * @returns {HTMLCanvasElement} + * Detect if the text line is ended with an hard break + * text and itext do not have wrapping, return false + * @param {Number} lineIndex text to split + * @return {Boolean} */ - - }, { - key: 'getCanvasElement', - value: function getCanvasElement() { - return this._canvas.getElement(); - } + isEndOfWrapping: function(lineIndex) { + if (!this._styleMap[lineIndex + 1]) { + // is last line, return true; + return true; + } + if (this._styleMap[lineIndex + 1].line !== this._styleMap[lineIndex].line) { + // this is last line before a line break, return true; + return true; + } + return false; + }, /** - * Get fabric.Canvas instance - * @returns {fabric.Canvas} + * Detect if a line has a linebreak and so we need to account for it when moving + * and counting style. + * @return Number */ - - }, { - key: 'getCanvas', - value: function getCanvas() { - return this._canvas; - } + missingNewlineOffset: function(lineIndex) { + if (this.splitByGrapheme) { + return this.isEndOfWrapping(lineIndex) ? 1 : 0; + } + return 1; + }, /** - * Get canvasImage (fabric.Image instance) - * @returns {fabric.Image} - */ + * Gets lines of text to render in the Textbox. This function calculates + * text wrapping on the fly every time it is called. + * @param {String} text text to split + * @returns {Array} Array of lines in the Textbox. + * @override + */ + _splitTextIntoLines: function(text) { + var newText = fabric.Text.prototype._splitTextIntoLines.call(this, text), + graphemeLines = this._wrapText(newText.lines, this.width), + lines = new Array(graphemeLines.length); + for (var i = 0; i < graphemeLines.length; i++) { + lines[i] = graphemeLines[i].join(''); + } + newText.lines = lines; + newText.graphemeLines = graphemeLines; + return newText; + }, - }, { - key: 'getCanvasImage', - value: function getCanvasImage() { - return this.canvasImage; - } + getMinWidth: function() { + return Math.max(this.minWidth, this.dynamicMinWidth); + }, + + _removeExtraneousStyles: function() { + var linesToKeep = {}; + for (var prop in this._styleMap) { + if (this._textLines[prop]) { + linesToKeep[this._styleMap[prop].line] = 1; + } + } + for (var prop in this.styles) { + if (!linesToKeep[prop]) { + delete this.styles[prop]; + } + } + }, /** - * Get image name - * @returns {string} + * Returns object representation of an instance + * @method toObject + * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output + * @return {Object} object representation of an instance */ - - }, { - key: 'getImageName', - value: function getImageName() { - return this.imageName; + toObject: function(propertiesToInclude) { + return this.callSuper('toObject', ['minWidth', 'splitByGrapheme'].concat(propertiesToInclude)); } + }); - /** - * Add image object on canvas - * @param {string} imgUrl - Image url to make object - * @returns {Promise} - */ + /** + * Returns fabric.Textbox instance from an object representation + * @static + * @memberOf fabric.Textbox + * @param {Object} object Object to create an instance from + * @param {Function} [callback] Callback to invoke when an fabric.Textbox instance is created + */ + fabric.Textbox.fromObject = function(object, callback) { + return fabric.Object._fromObject('Textbox', object, callback, 'text'); + }; +})( true ? exports : 0); + + +(function() { + + var controlsUtils = fabric.controlsUtils, + scaleSkewStyleHandler = controlsUtils.scaleSkewCursorStyleHandler, + scaleStyleHandler = controlsUtils.scaleCursorStyleHandler, + scalingEqually = controlsUtils.scalingEqually, + scalingYOrSkewingX = controlsUtils.scalingYOrSkewingX, + scalingXOrSkewingY = controlsUtils.scalingXOrSkewingY, + scaleOrSkewActionName = controlsUtils.scaleOrSkewActionName, + objectControls = fabric.Object.prototype.controls; + + objectControls.ml = new fabric.Control({ + x: -0.5, + y: 0, + cursorStyleHandler: scaleSkewStyleHandler, + actionHandler: scalingXOrSkewingY, + getActionName: scaleOrSkewActionName, + }); - }, { - key: 'addImageObject', - value: function addImageObject(imgUrl) { - var _this = this; + objectControls.mr = new fabric.Control({ + x: 0.5, + y: 0, + cursorStyleHandler: scaleSkewStyleHandler, + actionHandler: scalingXOrSkewingY, + getActionName: scaleOrSkewActionName, + }); - var callback = this._callbackAfterLoadingImageObject.bind(this); + objectControls.mb = new fabric.Control({ + x: 0, + y: 0.5, + cursorStyleHandler: scaleSkewStyleHandler, + actionHandler: scalingYOrSkewingX, + getActionName: scaleOrSkewActionName, + }); - return new _util.Promise(function (resolve) { - _fabric2.default.Image.fromURL(imgUrl, function (image) { - callback(image); - resolve(_this.createObjectProperties(image)); - }, { - crossOrigin: 'Anonymous' - }); - }); - } + objectControls.mt = new fabric.Control({ + x: 0, + y: -0.5, + cursorStyleHandler: scaleSkewStyleHandler, + actionHandler: scalingYOrSkewingX, + getActionName: scaleOrSkewActionName, + }); - /** - * Get center position of canvas - * @returns {Object} {left, top} - */ + objectControls.tl = new fabric.Control({ + x: -0.5, + y: -0.5, + cursorStyleHandler: scaleStyleHandler, + actionHandler: scalingEqually + }); - }, { - key: 'getCenter', - value: function getCenter() { - return this._canvas.getCenter(); - } + objectControls.tr = new fabric.Control({ + x: 0.5, + y: -0.5, + cursorStyleHandler: scaleStyleHandler, + actionHandler: scalingEqually + }); - /** - * Get cropped rect - * @returns {Object} rect - */ + objectControls.bl = new fabric.Control({ + x: -0.5, + y: 0.5, + cursorStyleHandler: scaleStyleHandler, + actionHandler: scalingEqually + }); - }, { - key: 'getCropzoneRect', - value: function getCropzoneRect() { - return this.getComponent(_consts.componentNames.CROPPER).getCropzoneRect(); - } + objectControls.br = new fabric.Control({ + x: 0.5, + y: 0.5, + cursorStyleHandler: scaleStyleHandler, + actionHandler: scalingEqually + }); - /** - * Get cropped rect - * @param {number} [mode] cropzone rect mode - */ + objectControls.mtr = new fabric.Control({ + x: 0, + y: -0.5, + actionHandler: controlsUtils.rotationWithSnapping, + cursorStyleHandler: controlsUtils.rotationStyleHandler, + offsetY: -40, + withConnection: true, + actionName: 'rotate', + }); - }, { - key: 'setCropzoneRect', - value: function setCropzoneRect(mode) { - this.getComponent(_consts.componentNames.CROPPER).setCropzoneRect(mode); - } + if (fabric.Textbox) { + // this is breaking the prototype inheritance, no time / ideas to fix it. + // is important to document that if you want to have all objects to have a + // specific custom control, you have to add it to Object prototype and to Textbox + // prototype. The controls are shared as references. So changes to control `tr` + // can still apply to all objects if needed. + var textBoxControls = fabric.Textbox.prototype.controls = { }; + + textBoxControls.mtr = objectControls.mtr; + textBoxControls.tr = objectControls.tr; + textBoxControls.br = objectControls.br; + textBoxControls.tl = objectControls.tl; + textBoxControls.bl = objectControls.bl; + textBoxControls.mt = objectControls.mt; + textBoxControls.mb = objectControls.mb; + + textBoxControls.mr = new fabric.Control({ + x: 0.5, + y: 0, + actionHandler: controlsUtils.changeWidth, + cursorStyleHandler: scaleSkewStyleHandler, + actionName: 'resizing', + }); - /** - * Get cropped image data - * @param {Object} cropRect cropzone rect - * @param {Number} cropRect.left left position - * @param {Number} cropRect.top top position - * @param {Number} cropRect.width width - * @param {Number} cropRect.height height - * @returns {?{imageName: string, url: string}} cropped Image data - */ + textBoxControls.ml = new fabric.Control({ + x: -0.5, + y: 0, + actionHandler: controlsUtils.changeWidth, + cursorStyleHandler: scaleSkewStyleHandler, + actionName: 'resizing', + }); + } +})(); - }, { - key: 'getCroppedImageData', - value: function getCroppedImageData(cropRect) { - return this.getComponent(_consts.componentNames.CROPPER).getCroppedImageData(cropRect); - } - /** - * Set brush option - * @param {Object} option brush option - * @param {Number} option.width width - * @param {String} option.color color like 'FFFFFF', 'rgba(0, 0, 0, 0.5)' - */ - }, { - key: 'setBrush', - value: function setBrush(option) { - var drawingMode = this._drawingMode; - var compName = _consts.componentNames.FREE_DRAWING; +/***/ }), - if (drawingMode === _consts.drawingModes.LINE_DRAWING) { - compName = _consts.componentNames.LINE; - } +/***/ 4426: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - this.getComponent(compName).setBrush(option); - } +module.exports = __webpack_require__(4486); - /** - * Set states of current drawing shape - * @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle') - * @param {Object} [options] - Shape options - * @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or - * Shape foreground color (ex: '#fff', 'transparent') - * @param {string} [options.stoke] - Shape outline color - * @param {number} [options.strokeWidth] - Shape outline width - * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) - * @param {number} [options.height] - Height value (When type option is 'rect', this options can use) - * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) - * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) - * @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not - */ +/***/ }), - }, { - key: 'setDrawingShape', - value: function setDrawingShape(type, options) { - this.getComponent(_consts.componentNames.SHAPE).setStates(type, options); - } +/***/ 9406: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Set style of current drawing icon - * @param {string} type - icon type (ex: 'icon-arrow', 'icon-star') - * @param {Object} [iconColor] - Icon color - */ +module.exports = __webpack_require__(4877); - }, { - key: 'setIconStyle', - value: function setIconStyle(type, iconColor) { - this.getComponent(_consts.componentNames.ICON).setStates(type, iconColor); - } +/***/ }), - /** - * Register icon paths - * @param {Object} pathInfos - Path infos - * @param {string} pathInfos.key - key - * @param {string} pathInfos.value - value - */ +/***/ 789: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'registerPaths', - value: function registerPaths(pathInfos) { - this.getComponent(_consts.componentNames.ICON).registerPaths(pathInfos); - } +module.exports = __webpack_require__(7178); - /** - * Change cursor style - * @param {string} cursorType - cursor type - */ +/***/ }), - }, { - key: 'changeCursor', - value: function changeCursor(cursorType) { - var canvas = this.getCanvas(); - canvas.defaultCursor = cursorType; - canvas.renderAll(); - } +/***/ 381: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Whether it has the filter or not - * @param {string} type - Filter type - * @returns {boolean} true if it has the filter - */ +module.exports = __webpack_require__(5603); - }, { - key: 'hasFilter', - value: function hasFilter(type) { - return this.getComponent(_consts.componentNames.FILTER).hasFilter(type); - } +/***/ }), - /** - * Set selection style of fabric object by init option - * @param {Object} styles - Selection styles - */ +/***/ 7636: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'setSelectionStyle', - value: function setSelectionStyle(styles) { - extend(_consts.fObjectOptions.SELECTION_STYLE, styles); - } +module.exports = __webpack_require__(1206); - /** - * Set object properties - * @param {number} id - object id - * @param {Object} props - props - * @param {string} [props.fill] Color - * @param {string} [props.fontFamily] Font type for text - * @param {number} [props.fontSize] Size - * @param {string} [props.fontStyle] Type of inclination (normal / italic) - * @param {string} [props.fontWeight] Type of thicker or thinner looking (normal / bold) - * @param {string} [props.textAlign] Type of text align (left / center / right) - * @param {string} [props.textDecoration] Type of line (underline / line-through / overline) - * @returns {Object} applied properties - */ +/***/ }), - }, { - key: 'setObjectProperties', - value: function setObjectProperties(id, props) { - var object = this.getObject(id); - var clone = extend({}, props); +/***/ 1899: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - object.set(clone); +module.exports = __webpack_require__(6174); - object.setCoords(); +/***/ }), - this.getCanvas().renderAll(); +/***/ 899: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - return clone; - } +module.exports = __webpack_require__(57); - /** - * Get object properties corresponding key - * @param {number} id - object id - * @param {Array|ObjectProps|string} keys - property's key - * @returns {Object} properties - */ +/***/ }), - }, { - key: 'getObjectProperties', - value: function getObjectProperties(id, keys) { - var object = this.getObject(id); - var props = {}; +/***/ 8005: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - if (isString(keys)) { - props[keys] = object[keys]; - } else if (isArray(keys)) { - forEachArray(keys, function (value) { - props[value] = object[value]; - }); - } else { - forEachOwnProperties(keys, function (value, key) { - props[key] = object[key]; - }); - } +module.exports = __webpack_require__(4741); - return props; - } +/***/ }), - /** - * Get object position by originX, originY - * @param {number} id - object id - * @param {string} originX - can be 'left', 'center', 'right' - * @param {string} originY - can be 'top', 'center', 'bottom' - * @returns {Object} {{x:number, y: number}} position by origin if id is valid, or null - */ +/***/ 6562: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'getObjectPosition', - value: function getObjectPosition(id, originX, originY) { - var targetObj = this.getObject(id); - if (!targetObj) { - return null; - } +module.exports = __webpack_require__(8368); - return targetObj.getPointByOrigin(originX, originY); - } +/***/ }), - /** - * Set object position by originX, originY - * @param {number} id - object id - * @param {Object} posInfo - position object - * @param {number} posInfo.x - x position - * @param {number} posInfo.y - y position - * @param {string} posInfo.originX - can be 'left', 'center', 'right' - * @param {string} posInfo.originY - can be 'top', 'center', 'bottom' - * @returns {boolean} true if target id is valid or false - */ +/***/ 9131: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'setObjectPosition', - value: function setObjectPosition(id, posInfo) { - var targetObj = this.getObject(id); - var x = posInfo.x, - y = posInfo.y, - originX = posInfo.originX, - originY = posInfo.originY; +module.exports = __webpack_require__(3739); - if (!targetObj) { - return false; - } +/***/ }), - var targetOrigin = targetObj.getPointByOrigin(originX, originY); - var centerOrigin = targetObj.getPointByOrigin('center', 'center'); - var diffX = centerOrigin.x - targetOrigin.x; - var diffY = centerOrigin.y - targetOrigin.y; +/***/ 4383: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - targetObj.set({ - left: x + diffX, - top: y + diffY - }); +module.exports = __webpack_require__(172); - targetObj.setCoords(); +/***/ }), - return true; - } +/***/ 6065: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Get the canvas size - * @returns {Object} {{width: number, height: number}} image size - */ +module.exports = __webpack_require__(4963); - }, { - key: 'getCanvasSize', - value: function getCanvasSize() { - var image = this.getCanvasImage(); +/***/ }), - return { - width: image ? image.width : 0, - height: image ? image.height : 0 - }; - } +/***/ 1734: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Create fabric static canvas - * @returns {Object} {{width: number, height: number}} image size - */ +module.exports = __webpack_require__(7820); - }, { - key: 'createStaticCanvas', - value: function createStaticCanvas() { - var staticCanvas = new _fabric2.default.StaticCanvas(); +/***/ }), - staticCanvas.set({ - enableRetinaScaling: false - }); +/***/ 2461: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - return staticCanvas; - } +module.exports = __webpack_require__(5636); - /** - * Get a DrawingMode instance - * @param {string} modeName - DrawingMode Class Name - * @returns {DrawingMode} DrawingMode instance - * @private - */ +/***/ }), - }, { - key: '_getDrawingModeInstance', - value: function _getDrawingModeInstance(modeName) { - return this._drawingModeMap[modeName]; - } +/***/ 5214: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Set object caching to false. This brought many bugs when draw Shape & cropzone - * @see http://fabricjs.com/fabric-object-caching - * @private - */ +module.exports = __webpack_require__(5059); - }, { - key: '_setObjectCachingToFalse', - value: function _setObjectCachingToFalse() { - _fabric2.default.Object.prototype.objectCaching = false; - } +/***/ }), - /** - * Set canvas element to fabric.Canvas - * @param {Element|string} element - Wrapper or canvas element or selector - * @private - */ +/***/ 6397: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: '_setCanvasElement', - value: function _setCanvasElement(element) { - var selectedElement = void 0; - var canvasElement = void 0; +module.exports = __webpack_require__(3969); - if (element.nodeType) { - selectedElement = element; - } else { - selectedElement = document.querySelector(element); - } +/***/ }), - if (selectedElement.nodeName.toUpperCase() !== 'CANVAS') { - canvasElement = document.createElement('canvas'); - selectedElement.appendChild(canvasElement); - } +/***/ 8189: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - this._canvas = new _fabric2.default.Canvas(canvasElement, { - containerClass: 'tui-image-editor-canvas-container', - enableRetinaScaling: false - }); - } +module.exports = __webpack_require__(6618); - /** - * Creates DrawingMode instances - * @private - */ +/***/ }), - }, { - key: '_createDrawingModeInstances', - value: function _createDrawingModeInstances() { - this._register(this._drawingModeMap, new _cropper4.default()); - this._register(this._drawingModeMap, new _freeDrawing4.default()); - this._register(this._drawingModeMap, new _lineDrawing2.default()); - this._register(this._drawingModeMap, new _shape4.default()); - this._register(this._drawingModeMap, new _text4.default()); - this._register(this._drawingModeMap, new _icon4.default()); - this._register(this._drawingModeMap, new _zoom4.default()); - this._register(this._drawingModeMap, new _resize4.default()); - } +/***/ 9146: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Create components - * @private - */ +module.exports = __webpack_require__(5279); - }, { - key: '_createComponents', - value: function _createComponents() { - this._register(this._componentMap, new _imageLoader2.default(this)); - this._register(this._componentMap, new _cropper2.default(this)); - this._register(this._componentMap, new _flip2.default(this)); - this._register(this._componentMap, new _rotation2.default(this)); - this._register(this._componentMap, new _freeDrawing2.default(this)); - this._register(this._componentMap, new _line2.default(this)); - this._register(this._componentMap, new _text2.default(this)); - this._register(this._componentMap, new _icon2.default(this)); - this._register(this._componentMap, new _filter2.default(this)); - this._register(this._componentMap, new _shape2.default(this)); - this._register(this._componentMap, new _zoom2.default(this)); - this._register(this._componentMap, new _resize2.default(this)); - } +/***/ }), - /** - * Register component - * @param {Object} map - map object - * @param {Object} module - module which has getName method - * @private - */ +/***/ 4496: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: '_register', - value: function _register(map, module) { - map[module.getName()] = module; - } +module.exports = __webpack_require__(9562); - /** - * Get the current drawing mode is same with given mode - * @param {string} mode drawing mode - * @returns {boolean} true if same or false - */ +/***/ }), - }, { - key: '_isSameDrawingMode', - value: function _isSameDrawingMode(mode) { - return this.getDrawingMode() === mode; - } +/***/ 3972: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Calculate max dimension of canvas - * The css-max dimension is dynamically decided with maintaining image ratio - * The css-max dimension is lower than canvas dimension (attribute of canvas, not css) - * @param {number} width - Canvas width - * @param {number} height - Canvas height - * @returns {{width: number, height: number}} - Max width & Max height - * @private - */ +module.exports = __webpack_require__(652); - }, { - key: '_calcMaxDimension', - value: function _calcMaxDimension(width, height) { - var wScaleFactor = this.cssMaxWidth / width; - var hScaleFactor = this.cssMaxHeight / height; - var cssMaxWidth = Math.min(width, this.cssMaxWidth); - var cssMaxHeight = Math.min(height, this.cssMaxHeight); +/***/ }), - if (wScaleFactor < 1 && wScaleFactor < hScaleFactor) { - cssMaxWidth = width * wScaleFactor; - cssMaxHeight = height * wScaleFactor; - } else if (hScaleFactor < 1 && hScaleFactor < wScaleFactor) { - cssMaxWidth = width * hScaleFactor; - cssMaxHeight = height * hScaleFactor; - } +/***/ 7172: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - return { - width: Math.floor(cssMaxWidth), - height: Math.floor(cssMaxHeight) - }; - } +module.exports = __webpack_require__(2813); - /** - * Callback function after loading image - * @param {fabric.Image} obj - Fabric image object - * @private - */ +/***/ }), - }, { - key: '_callbackAfterLoadingImageObject', - value: function _callbackAfterLoadingImageObject(obj) { - var centerPos = this.getCanvasImage().getCenterPoint(); +/***/ 1845: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - obj.set(_consts.fObjectOptions.SELECTION_STYLE); - obj.set({ - left: centerPos.x, - top: centerPos.y, - crossOrigin: 'Anonymous' - }); +module.exports = __webpack_require__(8664); - this.getCanvas().add(obj).setActiveObject(obj); - } +/***/ }), - /** - * Attach canvas's events - */ +/***/ 662: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: '_attachCanvasEvents', - value: function _attachCanvasEvents() { - var canvas = this._canvas; - var handler = this._handler; - canvas.on({ - 'mouse:down': handler.onMouseDown, - 'object:added': handler.onObjectAdded, - 'object:removed': handler.onObjectRemoved, - 'object:moving': handler.onObjectMoved, - 'object:scaling': handler.onObjectScaled, - 'object:modified': handler.onObjectModified, - 'object:rotating': handler.onObjectRotated, - 'path:created': handler.onPathCreated, - 'selection:cleared': handler.onSelectionCleared, - 'selection:created': handler.onSelectionCreated, - 'selection:updated': handler.onObjectSelected - }); - } +module.exports = __webpack_require__(1457); - /** - * "mouse:down" canvas event handler - * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event - * @private - */ +/***/ }), - }, { - key: '_onMouseDown', - value: function _onMouseDown(fEvent) { - var _this2 = this; +/***/ 711: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - var event = fEvent.e, - target = fEvent.target; +module.exports = __webpack_require__(2937); - var originPointer = this._canvas.getPointer(event); +/***/ }), - if (target) { - var type = target.type; +/***/ 6623: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - var undoData = (0, _selectionModifyHelper.makeSelectionUndoData)(target, function (item) { - return (0, _selectionModifyHelper.makeSelectionUndoDatum)(_this2.getObjectId(item), item, type === 'activeSelection'); - }); +module.exports = __webpack_require__(9297); - (0, _selectionModifyHelper.setCachedUndoDataForDimension)(undoData); - } +/***/ }), - this.fire(_consts.eventNames.MOUSE_DOWN, event, originPointer); - } +/***/ 7077: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * "object:added" canvas event handler - * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event - * @private - */ +module.exports = __webpack_require__(8026); - }, { - key: '_onObjectAdded', - value: function _onObjectAdded(fEvent) { - var obj = fEvent.target; - if (obj.isType('cropzone')) { - return; - } +/***/ }), - this._addFabricObject(obj); - } +/***/ 9856: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * "object:removed" canvas event handler - * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event - * @private - */ +module.exports = __webpack_require__(2044); - }, { - key: '_onObjectRemoved', - value: function _onObjectRemoved(fEvent) { - var obj = fEvent.target; +/***/ }), - this._removeFabricObject(stamp(obj)); - } +/***/ 4230: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * "object:moving" canvas event handler - * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event - * @private - */ +module.exports = __webpack_require__(2214); - }, { - key: '_onObjectMoved', - value: function _onObjectMoved(fEvent) { - var _this3 = this; +/***/ }), - this._lazyFire(_consts.eventNames.OBJECT_MOVED, function (object) { - return _this3.createObjectProperties(object); - }, fEvent.target); - } +/***/ 184: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * "object:scaling" canvas event handler - * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event - * @private - */ +module.exports = __webpack_require__(9256); - }, { - key: '_onObjectScaled', - value: function _onObjectScaled(fEvent) { - var _this4 = this; +/***/ }), - this._lazyFire(_consts.eventNames.OBJECT_SCALED, function (object) { - return _this4.createObjectProperties(object); - }, fEvent.target); - } +/***/ 3742: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * "object:modified" canvas event handler - * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event - * @private - */ +module.exports = __webpack_require__(5659); - }, { - key: '_onObjectModified', - value: function _onObjectModified(fEvent) { - var target = fEvent.target; +/***/ }), - if (target.type === 'activeSelection') { - var items = target.getObjects(); +/***/ 1801: +/***/ (function(module) { - items.forEach(function (item) { - return item.fire('modifiedInGroup', target); - }); - } +/** + * @author NHN. FE Development Team + * @fileoverview Shape resize helper + */ +var DIVISOR = { + rect: 1, + circle: 2, + triangle: 1 +}; +var DIMENSION_KEYS = { + rect: { + w: 'width', + h: 'height' + }, + circle: { + w: 'rx', + h: 'ry' + }, + triangle: { + w: 'width', + h: 'height' + } +}; +/** + * Set the start point value to the shape object + * @param {fabric.Object} shape - Shape object + * @ignore + */ - this.fire(_consts.eventNames.OBJECT_MODIFIED, target, this.getObjectId(target)); - } +function setStartPoint(shape) { + var originX = shape.originX, + originY = shape.originY; + var originKey = originX.substring(0, 1) + originY.substring(0, 1); + shape.startPoint = shape.origins[originKey]; +} +/** + * Get the positions of ratated origin by the pointer value + * @param {{x: number, y: number}} origin - Origin value + * @param {{x: number, y: number}} pointer - Pointer value + * @param {number} angle - Rotating angle + * @returns {Object} Postions of origin + * @ignore + */ - /** - * "object:rotating" canvas event handler - * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event - * @private - */ - }, { - key: '_onObjectRotated', - value: function _onObjectRotated(fEvent) { - var _this5 = this; +function getPositionsOfRotatedOrigin(origin, pointer, angle) { + var sx = origin.x; + var sy = origin.y; + var px = pointer.x; + var py = pointer.y; + var r = angle * Math.PI / 180; + var rx = (px - sx) * Math.cos(r) - (py - sy) * Math.sin(r) + sx; + var ry = (px - sx) * Math.sin(r) + (py - sy) * Math.cos(r) + sy; + return { + originX: sx > rx ? 'right' : 'left', + originY: sy > ry ? 'bottom' : 'top' + }; +} +/** + * Whether the shape has the center origin or not + * @param {fabric.Object} shape - Shape object + * @returns {boolean} State + * @ignore + */ - this._lazyFire(_consts.eventNames.OBJECT_ROTATED, function (object) { - return _this5.createObjectProperties(object); - }, fEvent.target); - } - /** - * Lazy event emitter - * @param {string} eventName - event name - * @param {Function} paramsMaker - make param function - * @param {Object} [target] - Object of the event owner. - * @private - */ +function hasCenterOrigin(shape) { + return shape.originX === 'center' && shape.originY === 'center'; +} +/** + * Adjust the origin of shape by the start point + * @param {{x: number, y: number}} pointer - Pointer value + * @param {fabric.Object} shape - Shape object + * @ignore + */ - }, { - key: '_lazyFire', - value: function _lazyFire(eventName, paramsMaker, target) { - var _this6 = this; - var existEventDelegation = target && target.canvasEventDelegation; - var delegationState = existEventDelegation ? target.canvasEventDelegation(eventName) : 'none'; +function adjustOriginByStartPoint(pointer, shape) { + var centerPoint = shape.getPointByOrigin('center', 'center'); + var angle = -shape.angle; + var originPositions = getPositionsOfRotatedOrigin(centerPoint, pointer, angle); + var originX = originPositions.originX, + originY = originPositions.originY; + var origin = shape.getPointByOrigin(originX, originY); + var left = shape.left - (centerPoint.x - origin.x); + var top = shape.top - (centerPoint.y - origin.y); + shape.set({ + originX: originX, + originY: originY, + left: left, + top: top + }); + shape.setCoords(); +} +/** + * Adjust the origin of shape by the moving pointer value + * @param {{x: number, y: number}} pointer - Pointer value + * @param {fabric.Object} shape - Shape object + * @ignore + */ - if (delegationState === 'unregistered') { - target.canvasEventRegister(eventName, function (object) { - _this6.fire(eventName, paramsMaker(object)); - }); - } - if (delegationState === 'none') { - this.fire(eventName, paramsMaker(target)); - } - } +function adjustOriginByMovingPointer(pointer, shape) { + var origin = shape.startPoint; + var angle = -shape.angle; + var originPositions = getPositionsOfRotatedOrigin(origin, pointer, angle); + var originX = originPositions.originX, + originY = originPositions.originY; + shape.setPositionByOrigin(origin, originX, originY); + shape.setCoords(); +} +/** + * Adjust the dimension of shape on firing scaling event + * @param {fabric.Object} shape - Shape object + * @ignore + */ - /** - * "object:selected" canvas event handler - * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event - * @private - */ - }, { - key: '_onObjectSelected', - value: function _onObjectSelected(fEvent) { - var target = fEvent.target; +function adjustDimensionOnScaling(shape) { + var type = shape.type, + scaleX = shape.scaleX, + scaleY = shape.scaleY; + var dimensionKeys = DIMENSION_KEYS[type]; + var width = shape[dimensionKeys.w] * scaleX; + var height = shape[dimensionKeys.h] * scaleY; - var params = this.createObjectProperties(target); + if (shape.isRegular) { + var maxScale = Math.max(scaleX, scaleY); + width = shape[dimensionKeys.w] * maxScale; + height = shape[dimensionKeys.h] * maxScale; + } - this.fire(_consts.eventNames.OBJECT_ACTIVATED, params); - } + var options = { + hasControls: false, + hasBorders: false, + scaleX: 1, + scaleY: 1 + }; + options[dimensionKeys.w] = width; + options[dimensionKeys.h] = height; + shape.set(options); +} +/** + * Adjust the dimension of shape on firing mouse move event + * @param {{x: number, y: number}} pointer - Pointer value + * @param {fabric.Object} shape - Shape object + * @ignore + */ - /** - * "path:created" canvas event handler - * @param {{path: fabric.Path}} obj - Path object - * @private - */ - }, { - key: '_onPathCreated', - value: function _onPathCreated(obj) { - var _obj$path$getCenterPo = obj.path.getCenterPoint(), - left = _obj$path$getCenterPo.x, - top = _obj$path$getCenterPo.y; +function adjustDimensionOnMouseMove(pointer, shape) { + var type = shape.type, + strokeWidth = shape.strokeWidth, + origin = shape.startPoint; + var divisor = DIVISOR[type]; + var dimensionKeys = DIMENSION_KEYS[type]; + var isTriangle = !!(shape.type === 'triangle'); + var options = {}; + var width = Math.abs(origin.x - pointer.x) / divisor; + var height = Math.abs(origin.y - pointer.y) / divisor; - obj.path.set(extend({ - left: left, - top: top - }, _consts.fObjectOptions.SELECTION_STYLE)); + if (width > strokeWidth) { + width -= strokeWidth / divisor; + } - var params = this.createObjectProperties(obj.path); + if (height > strokeWidth) { + height -= strokeWidth / divisor; + } + + if (shape.isRegular) { + width = height = Math.max(width, height); - this.fire(_consts.eventNames.ADD_OBJECT, params); + if (isTriangle) { + height = Math.sqrt(3) / 2 * width; } + } - /** - * "selction:cleared" canvas event handler - * @private - */ + options[dimensionKeys.w] = width; + options[dimensionKeys.h] = height; + shape.set(options); +} - }, { - key: '_onSelectionCleared', - value: function _onSelectionCleared() { - this.fire(_consts.eventNames.SELECTION_CLEARED); +module.exports = { + /** + * Set each origin value to shape + * @param {fabric.Object} shape - Shape object + */ + setOrigins: function setOrigins(shape) { + var leftTopPoint = shape.getPointByOrigin('left', 'top'); + var rightTopPoint = shape.getPointByOrigin('right', 'top'); + var rightBottomPoint = shape.getPointByOrigin('right', 'bottom'); + var leftBottomPoint = shape.getPointByOrigin('left', 'bottom'); + shape.origins = { + lt: leftTopPoint, + rt: rightTopPoint, + rb: rightBottomPoint, + lb: leftBottomPoint + }; + }, + + /** + * Resize the shape + * @param {fabric.Object} shape - Shape object + * @param {{x: number, y: number}} pointer - Mouse pointer values on canvas + * @param {boolean} isScaling - Whether the resizing action is scaling or not + */ + resize: function resize(shape, pointer, isScaling) { + if (hasCenterOrigin(shape)) { + adjustOriginByStartPoint(pointer, shape); + setStartPoint(shape); } - /** - * "selction:created" canvas event handler - * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event - * @private - */ + if (isScaling) { + adjustDimensionOnScaling(shape, pointer); + } else { + adjustDimensionOnMouseMove(pointer, shape); + } - }, { - key: '_onSelectionCreated', - value: function _onSelectionCreated(fEvent) { - var target = fEvent.target; + adjustOriginByMovingPointer(pointer, shape); + }, - var params = this.createObjectProperties(target); + /** + * Adjust the origin position of shape to center + * @param {fabric.Object} shape - Shape object + */ + adjustOriginToCenter: function adjustOriginToCenter(shape) { + var centerPoint = shape.getPointByOrigin('center', 'center'); + var originX = shape.originX, + originY = shape.originY; + var origin = shape.getPointByOrigin(originX, originY); + var left = shape.left + (centerPoint.x - origin.x); + var top = shape.top + (centerPoint.y - origin.y); + shape.set({ + hasControls: true, + hasBorders: true, + originX: 'center', + originY: 'center', + left: left, + top: top + }); + shape.setCoords(); // For left, top properties + } +}; - this.fire(_consts.eventNames.OBJECT_ACTIVATED, params); - this.fire(_consts.eventNames.SELECTION_CREATED, fEvent.target); - } +/***/ }), - /** - * Canvas discard selection all - */ +/***/ 2221: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'discardSelection', - value: function discardSelection() { - this._canvas.discardActiveObject(); - this._canvas.renderAll(); - } +__webpack_require__(5454); +__webpack_require__(9173); +var path = __webpack_require__(7545); - /** - * Canvas Selectable status change - * @param {boolean} selectable - expect status - */ +module.exports = path.Array.from; - }, { - key: 'changeSelectableAll', - value: function changeSelectableAll(selectable) { - this._canvas.forEachObject(function (obj) { - obj.selectable = selectable; - obj.hoverCursor = selectable ? 'move' : 'crosshair'; - }); - } - /** - * Return object's properties - * @param {fabric.Object} obj - fabric object - * @returns {Object} properties object - */ +/***/ }), - }, { - key: 'createObjectProperties', - value: function createObjectProperties(obj) { - var predefinedKeys = ['left', 'top', 'width', 'height', 'fill', 'stroke', 'strokeWidth', 'opacity', 'angle']; - var props = { - id: stamp(obj), - type: obj.type - }; +/***/ 5078: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - extend(props, (0, _util.getProperties)(obj, predefinedKeys)); +__webpack_require__(8118); +var path = __webpack_require__(7545); - if ((0, _util.includes)(['i-text', 'text'], obj.type)) { - extend(props, this._createTextProperties(obj, props)); - } else if ((0, _util.includes)(['rect', 'triangle', 'circle'], obj.type)) { - var shapeComp = this.getComponent(_consts.componentNames.SHAPE); - extend(props, { - fill: shapeComp.makeFillPropertyForUserEvent(obj) - }); - } +module.exports = path.Array.isArray; - return props; - } - /** - * Get text object's properties - * @param {fabric.Object} obj - fabric text object - * @param {Object} props - properties - * @returns {Object} properties object - */ +/***/ }), - }, { - key: '_createTextProperties', - value: function _createTextProperties(obj) { - var predefinedKeys = ['text', 'fontFamily', 'fontSize', 'fontStyle', 'textAlign', 'textDecoration', 'fontWeight']; - var props = {}; - extend(props, (0, _util.getProperties)(obj, predefinedKeys)); +/***/ 6135: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - return props; - } +__webpack_require__(9106); +var entryVirtual = __webpack_require__(5607); - /** - * Add object array by id - * @param {fabric.Object} obj - fabric object - * @returns {number} object id - */ +module.exports = entryVirtual('Array').concat; - }, { - key: '_addFabricObject', - value: function _addFabricObject(obj) { - var id = stamp(obj); - this._objects[id] = obj; - return id; - } +/***/ }), - /** - * Remove an object in array yb id - * @param {number} id - object id - */ +/***/ 9510: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: '_removeFabricObject', - value: function _removeFabricObject(id) { - delete this._objects[id]; - } +__webpack_require__(1710); +var entryVirtual = __webpack_require__(5607); - /** - * Reset targetObjectForCopyPaste value from activeObject - */ +module.exports = entryVirtual('Array').fill; - }, { - key: 'resetTargetObjectForCopyPaste', - value: function resetTargetObjectForCopyPaste() { - var activeObject = this.getActiveObject(); - if (activeObject) { - this.targetObjectForCopyPaste = activeObject; - } - } +/***/ }), - /** - * Paste fabric object - * @returns {Promise} - */ +/***/ 3971: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'pasteObject', - value: function pasteObject() { - var _this7 = this; +__webpack_require__(3436); +var entryVirtual = __webpack_require__(5607); - if (!this.targetObjectForCopyPaste) { - return _util.Promise.resolve([]); - } +module.exports = entryVirtual('Array').filter; - var targetObject = this.targetObjectForCopyPaste; - var isGroupSelect = targetObject.type === 'activeSelection'; - var targetObjects = isGroupSelect ? targetObject.getObjects() : [targetObject]; - var newTargetObject = null; - this.discardSelection(); +/***/ }), - return this._cloneObject(targetObjects).then(function (addedObjects) { - if (addedObjects.length > 1) { - newTargetObject = _this7.getActiveSelectionFromObjects(addedObjects); - } else { - newTargetObject = addedObjects[0]; - } - _this7.targetObjectForCopyPaste = newTargetObject; - _this7.setActiveObject(newTargetObject); - }); - } +/***/ 98: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Clone object - * @param {fabric.Object} targetObjects - fabric object - * @returns {Promise} - * @private - */ +__webpack_require__(9823); +var entryVirtual = __webpack_require__(5607); - }, { - key: '_cloneObject', - value: function _cloneObject(targetObjects) { - var _this8 = this; +module.exports = entryVirtual('Array').forEach; - var addedObjects = _tuiCodeSnippet2.default.map(targetObjects, function (targetObject) { - return _this8._cloneObjectItem(targetObject); - }); - return _util.Promise.all(addedObjects); - } +/***/ }), - /** - * Clone object one item - * @param {fabric.Object} targetObject - fabric object - * @returns {Promise} - * @private - */ +/***/ 2089: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: '_cloneObjectItem', - value: function _cloneObjectItem(targetObject) { - var _this9 = this; +__webpack_require__(2276); +var entryVirtual = __webpack_require__(5607); - return this._copyFabricObjectForPaste(targetObject).then(function (clonedObject) { - var objectProperties = _this9.createObjectProperties(clonedObject); - _this9.add(clonedObject); +module.exports = entryVirtual('Array').indexOf; - _this9.fire(_consts.eventNames.ADD_OBJECT, objectProperties); - return clonedObject; - }); - } +/***/ }), - /** - * Copy fabric object with Changed position for copy and paste - * @param {fabric.Object} targetObject - fabric object - * @returns {Promise} - * @private - */ +/***/ 6209: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: '_copyFabricObjectForPaste', - value: function _copyFabricObjectForPaste(targetObject) { - var _this10 = this; +__webpack_require__(3838); +var entryVirtual = __webpack_require__(5607); - var addExtraPx = function addExtraPx(value, isReverse) { - return isReverse ? value - EXTRA_PX_FOR_PASTE : value + EXTRA_PX_FOR_PASTE; - }; +module.exports = entryVirtual('Array').map; - return this._copyFabricObject(targetObject).then(function (clonedObject) { - var left = clonedObject.left, - top = clonedObject.top, - width = clonedObject.width, - height = clonedObject.height; - var _getCanvasSize = _this10.getCanvasSize(), - canvasWidth = _getCanvasSize.width, - canvasHeight = _getCanvasSize.height; +/***/ }), - var rightEdge = left + width / 2; - var bottomEdge = top + height / 2; +/***/ 2671: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - clonedObject.set(_tuiCodeSnippet2.default.extend({ - left: addExtraPx(left, rightEdge + EXTRA_PX_FOR_PASTE > canvasWidth), - top: addExtraPx(top, bottomEdge + EXTRA_PX_FOR_PASTE > canvasHeight) - }, _consts.fObjectOptions.SELECTION_STYLE)); +__webpack_require__(5818); +var entryVirtual = __webpack_require__(5607); - return clonedObject; - }); - } +module.exports = entryVirtual('Array').slice; - /** - * Copy fabric object - * @param {fabric.Object} targetObject - fabric object - * @returns {Promise} - * @private - */ - }, { - key: '_copyFabricObject', - value: function _copyFabricObject(targetObject) { - var _this11 = this; +/***/ }), - return new _util.Promise(function (resolve) { - targetObject.clone(function (cloned) { - var shapeComp = _this11.getComponent(_consts.componentNames.SHAPE); - if ((0, _util.isShape)(cloned)) { - shapeComp.processForCopiedObject(cloned, targetObject); - } +/***/ 1375: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - resolve(cloned); - }); - }); - } +__webpack_require__(2178); +var entryVirtual = __webpack_require__(5607); - /** - * Get current dimensions - * @returns {object} - */ +module.exports = entryVirtual('Array').splice; - }, { - key: 'getCurrentDimensions', - value: function getCurrentDimensions() { - var resize = this.getComponent(_consts.componentNames.RESIZE); - return resize.getCurrentDimensions(); - } +/***/ }), - /** - * Get original dimensions - * @returns {object} - */ +/***/ 3528: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'getOriginalDimensions', - value: function getOriginalDimensions() { - var resize = this.getComponent(_consts.componentNames.RESIZE); +__webpack_require__(665); +var entryVirtual = __webpack_require__(5607); - return resize.getOriginalDimensions(); - } +module.exports = entryVirtual('Function').bind; - /** - * Set original dimensions - * @param {object} dimensions - Dimensions - */ - }, { - key: 'setOriginalDimensions', - value: function setOriginalDimensions(dimensions) { - var resize = this.getComponent(_consts.componentNames.RESIZE); - resize.setOriginalDimensions(dimensions); - } +/***/ }), - /** - * Resize Image - * @param {Object} dimensions - Resize dimensions - * @returns {Promise} - */ +/***/ 5739: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'resize', - value: function resize(dimensions) { - var resize = this.getComponent(_consts.componentNames.RESIZE); +__webpack_require__(8939); +__webpack_require__(5454); +var getIteratorMethod = __webpack_require__(8703); - return resize.resize(dimensions); - } - }]); +module.exports = getIteratorMethod; - return Graphics; -}(); -CustomEvents.mixin(Graphics); +/***/ }), + +/***/ 278: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { + +var bind = __webpack_require__(3528); + +var FunctionPrototype = Function.prototype; + +module.exports = function (it) { + var own = it.bind; + return it === FunctionPrototype || (it instanceof Function && own === FunctionPrototype.bind) ? bind : own; +}; -exports.default = Graphics; /***/ }), -/***/ "./src/js/helper/imagetracer.js": -/*!**************************************!*\ - !*** ./src/js/helper/imagetracer.js ***! - \**************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +/***/ 1484: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -"use strict"; +var concat = __webpack_require__(6135); +var ArrayPrototype = Array.prototype; -Object.defineProperty(exports, "__esModule", { - value: true -}); +module.exports = function (it) { + var own = it.concat; + return it === ArrayPrototype || (it instanceof Array && own === ArrayPrototype.concat) ? concat : own; +}; -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } +/***/ }), -/* - imagetracer.js version 1.2.4 - Simple raster image tracer and vectorizer written in JavaScript. - andras@jankovics.net -*/ +/***/ 7731: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -/* - The Unlicense / PUBLIC DOMAIN - This is free and unencumbered software released into the public domain. - Anyone is free to copy, modify, publish, use, compile, sell, or - distribute this software, either in source code form or as a compiled - binary, for any purpose, commercial or non-commercial, and by any - means. - In jurisdictions that recognize copyright laws, the author or authors - of this software dedicate any and all copyright interest in the - software to the public domain. We make this dedication for the benefit - of the public at large and to the detriment of our heirs and - successors. We intend this dedication to be an overt act of - relinquishment in perpetuity of all present and future rights to this - software under copyright law. - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, - EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF - MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. - IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR - OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, - ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR - OTHER DEALINGS IN THE SOFTWARE. - For more information, please refer to http://unlicense.org/ -*/ -var ImageTracer = function () { - _createClass(ImageTracer, null, [{ - key: 'tracerDefaultOption', - value: function tracerDefaultOption() { - return { - pathomit: 100, - ltres: 0.1, - qtres: 1, +var fill = __webpack_require__(9510); - scale: 1, - strokewidth: 5, - viewbox: false, - linefilter: true, - desc: false, - rightangleenhance: false, - pal: [{ - r: 0, - g: 0, - b: 0, - a: 255 - }, { - r: 255, - g: 255, - b: 255, - a: 255 - }] - }; - } - /* eslint-disable */ +var ArrayPrototype = Array.prototype; - }]); +module.exports = function (it) { + var own = it.fill; + return it === ArrayPrototype || (it instanceof Array && own === ArrayPrototype.fill) ? fill : own; +}; - function ImageTracer() { - _classCallCheck(this, ImageTracer); - this.versionnumber = '1.2.4'; - this.optionpresets = { - default: { - corsenabled: false, - ltres: 1, - qtres: 1, - pathomit: 8, - rightangleenhance: true, - colorsampling: 2, - numberofcolors: 16, - mincolorratio: 0, - colorquantcycles: 3, - layering: 0, - strokewidth: 1, - linefilter: false, - scale: 1, - roundcoords: 1, - viewbox: false, - desc: false, - lcpr: 0, - qcpr: 0, - blurradius: 0, - blurdelta: 20 - }, - posterized1: { - colorsampling: 0, - numberofcolors: 2 - }, - posterized2: { - numberofcolors: 4, - blurradius: 5 - }, - curvy: { - ltres: 0.01, - linefilter: true, - rightangleenhance: false - }, - sharp: { qtres: 0.01, linefilter: false }, - detailed: { pathomit: 0, roundcoords: 2, ltres: 0.5, qtres: 0.5, numberofcolors: 64 }, - smoothed: { blurradius: 5, blurdelta: 64 }, - grayscale: { colorsampling: 0, colorquantcycles: 1, numberofcolors: 7 }, - fixedpalette: { colorsampling: 0, colorquantcycles: 1, numberofcolors: 27 }, - randomsampling1: { colorsampling: 1, numberofcolors: 8 }, - randomsampling2: { colorsampling: 1, numberofcolors: 64 }, - artistic1: { - colorsampling: 0, - colorquantcycles: 1, - pathomit: 0, - blurradius: 5, - blurdelta: 64, - ltres: 0.01, - linefilter: true, - numberofcolors: 16, - strokewidth: 2 - }, - artistic2: { - qtres: 0.01, - colorsampling: 0, - colorquantcycles: 1, - numberofcolors: 4, - strokewidth: 0 - }, - artistic3: { qtres: 10, ltres: 10, numberofcolors: 8 }, - artistic4: { - qtres: 10, - ltres: 10, - numberofcolors: 64, - blurradius: 5, - blurdelta: 256, - strokewidth: 2 - }, - posterized3: { - ltres: 1, - qtres: 1, - pathomit: 20, - rightangleenhance: true, - colorsampling: 0, - numberofcolors: 3, - mincolorratio: 0, - colorquantcycles: 3, - blurradius: 3, - blurdelta: 20, - strokewidth: 0, - linefilter: false, - roundcoords: 1, - pal: [{ r: 0, g: 0, b: 100, a: 255 }, { r: 255, g: 255, b: 255, a: 255 }] - } - }; +/***/ }), - this.pathscan_combined_lookup = [[[-1, -1, -1, -1], [-1, -1, -1, -1], [-1, -1, -1, -1], [-1, -1, -1, -1]], [[0, 1, 0, -1], [-1, -1, -1, -1], [-1, -1, -1, -1], [0, 2, -1, 0]], [[-1, -1, -1, -1], [-1, -1, -1, -1], [0, 1, 0, -1], [0, 0, 1, 0]], [[0, 0, 1, 0], [-1, -1, -1, -1], [0, 2, -1, 0], [-1, -1, -1, -1]], [[-1, -1, -1, -1], [0, 0, 1, 0], [0, 3, 0, 1], [-1, -1, -1, -1]], [[13, 3, 0, 1], [13, 2, -1, 0], [7, 1, 0, -1], [7, 0, 1, 0]], [[-1, -1, -1, -1], [0, 1, 0, -1], [-1, -1, -1, -1], [0, 3, 0, 1]], [[0, 3, 0, 1], [0, 2, -1, 0], [-1, -1, -1, -1], [-1, -1, -1, -1]], [[0, 3, 0, 1], [0, 2, -1, 0], [-1, -1, -1, -1], [-1, -1, -1, -1]], [[-1, -1, -1, -1], [0, 1, 0, -1], [-1, -1, -1, -1], [0, 3, 0, 1]], [[11, 1, 0, -1], [14, 0, 1, 0], [14, 3, 0, 1], [11, 2, -1, 0]], [[-1, -1, -1, -1], [0, 0, 1, 0], [0, 3, 0, 1], [-1, -1, -1, -1]], [[0, 0, 1, 0], [-1, -1, -1, -1], [0, 2, -1, 0], [-1, -1, -1, -1]], [[-1, -1, -1, -1], [-1, -1, -1, -1], [0, 1, 0, -1], [0, 0, 1, 0]], [[0, 1, 0, -1], [-1, -1, -1, -1], [-1, -1, -1, -1], [0, 2, -1, 0]], [[-1, -1, -1, -1], [-1, -1, -1, -1], [-1, -1, -1, -1], [-1, -1, -1, -1]]]; +/***/ 3669: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - this.gks = [[0.27901, 0.44198, 0.27901], [0.135336, 0.228569, 0.272192, 0.228569, 0.135336], [0.086776, 0.136394, 0.178908, 0.195843, 0.178908, 0.136394, 0.086776], [0.063327, 0.093095, 0.122589, 0.144599, 0.152781, 0.144599, 0.122589, 0.093095, 0.063327], [0.049692, 0.069304, 0.089767, 0.107988, 0.120651, 0.125194, 0.120651, 0.107988, 0.089767, 0.069304, 0.049692]]; +var filter = __webpack_require__(3971); - this.specpalette = [{ r: 0, g: 0, b: 0, a: 255 }, { r: 128, g: 128, b: 128, a: 255 }, { r: 0, g: 0, b: 128, a: 255 }, { r: 64, g: 64, b: 128, a: 255 }, { r: 192, g: 192, b: 192, a: 255 }, { r: 255, g: 255, b: 255, a: 255 }, { r: 128, g: 128, b: 192, a: 255 }, { r: 0, g: 0, b: 192, a: 255 }, { r: 128, g: 0, b: 0, a: 255 }, { r: 128, g: 64, b: 64, a: 255 }, { r: 128, g: 0, b: 128, a: 255 }, { r: 168, g: 168, b: 168, a: 255 }, { r: 192, g: 128, b: 128, a: 255 }, { r: 192, g: 0, b: 0, a: 255 }, { r: 255, g: 255, b: 255, a: 255 }, { r: 0, g: 128, b: 0, a: 255 }]; - } +var ArrayPrototype = Array.prototype; - _createClass(ImageTracer, [{ - key: 'imageToSVG', - value: function imageToSVG(url, callback, options) { - var _this = this; +module.exports = function (it) { + var own = it.filter; + return it === ArrayPrototype || (it instanceof Array && own === ArrayPrototype.filter) ? filter : own; +}; - options = this.checkoptions(options); - this.loadImage(url, function (canvas) { - callback(_this.imagedataToSVG(_this.getImgdata(canvas), options)); - }, options); - } - }, { - key: 'imagedataToSVG', - value: function imagedataToSVG(imgd, options) { - options = this.checkoptions(options); - var td = this.imagedataToTracedata(imgd, options); - return this.getsvgstring(td, options); - } - }, { - key: 'imageToTracedata', - value: function imageToTracedata(url, callback, options) { - var _this2 = this; +/***/ }), - options = this.checkoptions(options); - this.loadImage(url, function (canvas) { - callback(_this2.imagedataToTracedata(_this2.getImgdata(canvas), options)); - }, options); - } - }, { - key: 'imagedataToTracedata', - value: function imagedataToTracedata(imgd, options) { - options = this.checkoptions(options); - var ii = this.colorquantization(imgd, options); - var tracedata = void 0; - if (options.layering === 0) { - tracedata = { - layers: [], - palette: ii.palette, - width: ii.array[0].length - 2, - height: ii.array.length - 2 - }; +/***/ 2604: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - for (var colornum = 0; colornum < ii.palette.length; colornum += 1) { - var tracedlayer = this.batchtracepaths(this.internodes(this.pathscan(this.layeringstep(ii, colornum), options.pathomit), options), options.ltres, options.qtres); - tracedata.layers.push(tracedlayer); - } - } else { - var ls = this.layering(ii); - if (options.layercontainerid) { - this.drawLayers(ls, this.specpalette, options.scale, options.layercontainerid); - } - var bps = this.batchpathscan(ls, options.pathomit); - var bis = this.batchinternodes(bps, options); - tracedata = { - layers: this.batchtracelayers(bis, options.ltres, options.qtres), - palette: ii.palette, - width: imgd.width, - height: imgd.height - }; - } +var indexOf = __webpack_require__(2089); - return tracedata; - } - }, { - key: 'checkoptions', - value: function checkoptions(options) { - options = options || {}; - if (typeof options === 'string') { - options = options.toLowerCase(); - if (this.optionpresets[options]) { - options = this.optionpresets[options]; - } else { - options = {}; - } - } - var ok = Object.keys(this.optionpresets['default']); - for (var k = 0; k < ok.length; k += 1) { - if (!options.hasOwnProperty(ok[k])) { - options[ok[k]] = this.optionpresets['default'][ok[k]]; - } - } +var ArrayPrototype = Array.prototype; - return options; - } - }, { - key: 'colorquantization', - value: function colorquantization(imgd, options) { - var arr = []; - var idx = 0; - var cd = void 0; - var cdl = void 0; - var ci = void 0; - var paletteacc = []; - var pixelnum = imgd.width * imgd.height; - var i = void 0; - var j = void 0; - var k = void 0; - var cnt = void 0; - var palette = void 0; +module.exports = function (it) { + var own = it.indexOf; + return it === ArrayPrototype || (it instanceof Array && own === ArrayPrototype.indexOf) ? indexOf : own; +}; - for (j = 0; j < imgd.height + 2; j += 1) { - arr[j] = []; - for (i = 0; i < imgd.width + 2; i += 1) { - arr[j][i] = -1; - } - } - if (options.pal) { - palette = options.pal; - } else if (options.colorsampling === 0) { - palette = this.generatepalette(options.numberofcolors); - } else if (options.colorsampling === 1) { - palette = this.samplepalette(options.numberofcolors, imgd); - } else { - palette = this.samplepalette2(options.numberofcolors, imgd); - } - if (options.blurradius > 0) { - imgd = this.blur(imgd, options.blurradius, options.blurdelta); - } - for (cnt = 0; cnt < options.colorquantcycles; cnt += 1) { - if (cnt > 0) { - for (k = 0; k < palette.length; k += 1) { - if (paletteacc[k].n > 0) { - palette[k] = { - r: Math.floor(paletteacc[k].r / paletteacc[k].n), - g: Math.floor(paletteacc[k].g / paletteacc[k].n), - b: Math.floor(paletteacc[k].b / paletteacc[k].n), - a: Math.floor(paletteacc[k].a / paletteacc[k].n) - }; - } - if (paletteacc[k].n / pixelnum < options.mincolorratio && cnt < options.colorquantcycles - 1) { - palette[k] = { - r: Math.floor(Math.random() * 255), - g: Math.floor(Math.random() * 255), - b: Math.floor(Math.random() * 255), - a: Math.floor(Math.random() * 255) - }; - } - } - } +/***/ }), - for (i = 0; i < palette.length; i += 1) { - paletteacc[i] = { r: 0, g: 0, b: 0, a: 0, n: 0 }; - } +/***/ 263: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - for (j = 0; j < imgd.height; j += 1) { - for (i = 0; i < imgd.width; i += 1) { - idx = (j * imgd.width + i) * 4; +var map = __webpack_require__(6209); - ci = 0; - cdl = 1024; - for (k = 0; k < palette.length; k += 1) { - cd = Math.abs(palette[k].r - imgd.data[idx]) + Math.abs(palette[k].g - imgd.data[idx + 1]) + Math.abs(palette[k].b - imgd.data[idx + 2]) + Math.abs(palette[k].a - imgd.data[idx + 3]); +var ArrayPrototype = Array.prototype; - if (cd < cdl) { - cdl = cd; - ci = k; - } - } +module.exports = function (it) { + var own = it.map; + return it === ArrayPrototype || (it instanceof Array && own === ArrayPrototype.map) ? map : own; +}; - paletteacc[ci].r += imgd.data[idx]; - paletteacc[ci].g += imgd.data[idx + 1]; - paletteacc[ci].b += imgd.data[idx + 2]; - paletteacc[ci].a += imgd.data[idx + 3]; - paletteacc[ci].n += 1; - arr[j + 1][i + 1] = ci; - } - } - } +/***/ }), - return { array: arr, palette: palette }; - } - }, { - key: 'samplepalette', - value: function samplepalette(numberofcolors, imgd) { - var idx = void 0; - var palette = []; - for (var i = 0; i < numberofcolors; i += 1) { - idx = Math.floor(Math.random() * imgd.data.length / 4) * 4; - palette.push({ - r: imgd.data[idx], - g: imgd.data[idx + 1], - b: imgd.data[idx + 2], - a: imgd.data[idx + 3] - }); - } +/***/ 7663: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - return palette; - } - }, { - key: 'samplepalette2', - value: function samplepalette2(numberofcolors, imgd) { - var idx = void 0; - var palette = []; - var ni = Math.ceil(Math.sqrt(numberofcolors)); - var nj = Math.ceil(numberofcolors / ni); - var vx = imgd.width / (ni + 1); - var vy = imgd.height / (nj + 1); - for (var j = 0; j < nj; j += 1) { - for (var i = 0; i < ni; i += 1) { - if (palette.length === numberofcolors) { - break; - } else { - idx = Math.floor((j + 1) * vy * imgd.width + (i + 1) * vx) * 4; - palette.push({ - r: imgd.data[idx], - g: imgd.data[idx + 1], - b: imgd.data[idx + 2], - a: imgd.data[idx + 3] - }); - } - } - } +var slice = __webpack_require__(2671); - return palette; - } - }, { - key: 'generatepalette', - value: function generatepalette(numberofcolors) { - var palette = []; - var rcnt = void 0; - var gcnt = void 0; - var bcnt = void 0; - if (numberofcolors < 8) { - var graystep = Math.floor(255 / (numberofcolors - 1)); - for (var i = 0; i < numberofcolors; i += 1) { - palette.push({ r: i * graystep, g: i * graystep, b: i * graystep, a: 255 }); - } - } else { - var colorqnum = Math.floor(Math.pow(numberofcolors, 1 / 3)); - var colorstep = Math.floor(255 / (colorqnum - 1)); - var rndnum = numberofcolors - colorqnum * colorqnum * colorqnum; - for (rcnt = 0; rcnt < colorqnum; rcnt += 1) { - for (gcnt = 0; gcnt < colorqnum; gcnt += 1) { - for (bcnt = 0; bcnt < colorqnum; bcnt += 1) { - palette.push({ r: rcnt * colorstep, g: gcnt * colorstep, b: bcnt * colorstep, a: 255 }); - } - } - } - for (rcnt = 0; rcnt < rndnum; rcnt += 1) { - palette.push({ - r: Math.floor(Math.random() * 255), - g: Math.floor(Math.random() * 255), - b: Math.floor(Math.random() * 255), - a: Math.floor(Math.random() * 255) - }); - } - } +var ArrayPrototype = Array.prototype; - return palette; - } - }, { - key: 'layering', - value: function layering(ii) { - var layers = []; - var val = 0; - var ah = ii.array.length; - var aw = ii.array[0].length; - var n1 = void 0; - var n2 = void 0; - var n3 = void 0; - var n4 = void 0; - var n5 = void 0; - var n6 = void 0; - var n7 = void 0; - var n8 = void 0; - var i = void 0; - var j = void 0; - var k = void 0; - for (k = 0; k < ii.palette.length; k += 1) { - layers[k] = []; - for (j = 0; j < ah; j += 1) { - layers[k][j] = []; - for (i = 0; i < aw; i += 1) { - layers[k][j][i] = 0; - } - } - } - for (j = 1; j < ah - 1; j += 1) { - for (i = 1; i < aw - 1; i += 1) { - val = ii.array[j][i]; +module.exports = function (it) { + var own = it.slice; + return it === ArrayPrototype || (it instanceof Array && own === ArrayPrototype.slice) ? slice : own; +}; - n1 = ii.array[j - 1][i - 1] === val ? 1 : 0; - n2 = ii.array[j - 1][i] === val ? 1 : 0; - n3 = ii.array[j - 1][i + 1] === val ? 1 : 0; - n4 = ii.array[j][i - 1] === val ? 1 : 0; - n5 = ii.array[j][i + 1] === val ? 1 : 0; - n6 = ii.array[j + 1][i - 1] === val ? 1 : 0; - n7 = ii.array[j + 1][i] === val ? 1 : 0; - n8 = ii.array[j + 1][i + 1] === val ? 1 : 0; - layers[val][j + 1][i + 1] = 1 + n5 * 2 + n8 * 4 + n7 * 8; - if (!n4) { - layers[val][j + 1][i] = 0 + 2 + n7 * 4 + n6 * 8; - } - if (!n2) { - layers[val][j][i + 1] = 0 + n3 * 2 + n5 * 4 + 8; - } - if (!n1) { - layers[val][j][i] = 0 + n2 * 2 + 4 + n4 * 8; - } - } - } +/***/ }), - return layers; - } - }, { - key: 'layeringstep', - value: function layeringstep(ii, cnum) { - var layer = []; - var ah = ii.array.length; - var aw = ii.array[0].length; - var i = void 0; - var j = void 0; - for (j = 0; j < ah; j += 1) { - layer[j] = []; - for (i = 0; i < aw; i += 1) { - layer[j][i] = 0; - } - } - for (j = 1; j < ah; j += 1) { - for (i = 1; i < aw; i += 1) { - layer[j][i] = (ii.array[j - 1][i - 1] === cnum ? 1 : 0) + (ii.array[j - 1][i] === cnum ? 2 : 0) + (ii.array[j][i - 1] === cnum ? 8 : 0) + (ii.array[j][i] === cnum ? 4 : 0); - } - } +/***/ 5063: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - return layer; - } - }, { - key: 'pathscan', - value: function pathscan(arr, pathomit) { - var paths = []; - var pacnt = 0; - var pcnt = 0; - var px = 0; - var py = 0; - var w = arr[0].length; - var h = arr.length; - var dir = 0; - var pathfinished = true; - var holepath = false; - var lookuprow = void 0; - for (var j = 0; j < h; j += 1) { - for (var i = 0; i < w; i += 1) { - if (arr[j][i] === 4 || arr[j][i] === 11) { - px = i; - py = j; - paths[pacnt] = {}; - paths[pacnt].points = []; - paths[pacnt].boundingbox = [px, py, px, py]; - paths[pacnt].holechildren = []; - pathfinished = false; - pcnt = 0; - holepath = arr[j][i] === 11; - dir = 1; +var splice = __webpack_require__(1375); - while (!pathfinished) { - paths[pacnt].points[pcnt] = {}; - paths[pacnt].points[pcnt].x = px - 1; - paths[pacnt].points[pcnt].y = py - 1; - paths[pacnt].points[pcnt].t = arr[py][px]; +var ArrayPrototype = Array.prototype; - if (px - 1 < paths[pacnt].boundingbox[0]) { - paths[pacnt].boundingbox[0] = px - 1; - } - if (px - 1 > paths[pacnt].boundingbox[2]) { - paths[pacnt].boundingbox[2] = px - 1; - } - if (py - 1 < paths[pacnt].boundingbox[1]) { - paths[pacnt].boundingbox[1] = py - 1; - } - if (py - 1 > paths[pacnt].boundingbox[3]) { - paths[pacnt].boundingbox[3] = py - 1; - } +module.exports = function (it) { + var own = it.splice; + return it === ArrayPrototype || (it instanceof Array && own === ArrayPrototype.splice) ? splice : own; +}; - lookuprow = this.pathscan_combined_lookup[arr[py][px]][dir]; - arr[py][px] = lookuprow[0]; - dir = lookuprow[1]; - px += lookuprow[2]; - py += lookuprow[3]; - if (px - 1 === paths[pacnt].points[0].x && py - 1 === paths[pacnt].points[0].y) { - pathfinished = true; +/***/ }), - if (paths[pacnt].points.length < pathomit) { - paths.pop(); - } else { - paths[pacnt].isholepath = !!holepath; +/***/ 6813: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - if (holepath) { - var parentidx = 0, - parentbbox = [-1, -1, w + 1, h + 1]; - for (var parentcnt = 0; parentcnt < pacnt; parentcnt++) { - if (!paths[parentcnt].isholepath && this.boundingboxincludes(paths[parentcnt].boundingbox, paths[pacnt].boundingbox) && this.boundingboxincludes(parentbbox, paths[parentcnt].boundingbox)) { - parentidx = parentcnt; - parentbbox = paths[parentcnt].boundingbox; - } - } - paths[parentidx].holechildren.push(pacnt); - } - pacnt += 1; - } - } - pcnt += 1; - } - } - } - } +var trim = __webpack_require__(3842); - return paths; - } - }, { - key: 'boundingboxincludes', - value: function boundingboxincludes(parentbbox, childbbox) { - return parentbbox[0] < childbbox[0] && parentbbox[1] < childbbox[1] && parentbbox[2] > childbbox[2] && parentbbox[3] > childbbox[3]; - } - }, { - key: 'batchpathscan', - value: function batchpathscan(layers, pathomit) { - var bpaths = []; - for (var k in layers) { - if (!layers.hasOwnProperty(k)) { - continue; - } - bpaths[k] = this.pathscan(layers[k], pathomit); - } +var StringPrototype = String.prototype; - return bpaths; - } - }, { - key: 'internodes', - value: function internodes(paths, options) { - var ins = []; - var palen = 0; - var nextidx = 0; - var nextidx2 = 0; - var previdx = 0; - var previdx2 = 0; - var pacnt = void 0; - var pcnt = void 0; - for (pacnt = 0; pacnt < paths.length; pacnt += 1) { - ins[pacnt] = {}; - ins[pacnt].points = []; - ins[pacnt].boundingbox = paths[pacnt].boundingbox; - ins[pacnt].holechildren = paths[pacnt].holechildren; - ins[pacnt].isholepath = paths[pacnt].isholepath; - palen = paths[pacnt].points.length; +module.exports = function (it) { + var own = it.trim; + return typeof it === 'string' || it === StringPrototype + || (it instanceof String && own === StringPrototype.trim) ? trim : own; +}; - for (pcnt = 0; pcnt < palen; pcnt += 1) { - nextidx = (pcnt + 1) % palen; - nextidx2 = (pcnt + 2) % palen; - previdx = (pcnt - 1 + palen) % palen; - previdx2 = (pcnt - 2 + palen) % palen; - if (options.rightangleenhance && this.testrightangle(paths[pacnt], previdx2, previdx, pcnt, nextidx, nextidx2)) { - if (ins[pacnt].points.length > 0) { - ins[pacnt].points[ins[pacnt].points.length - 1].linesegment = this.getdirection(ins[pacnt].points[ins[pacnt].points.length - 1].x, ins[pacnt].points[ins[pacnt].points.length - 1].y, paths[pacnt].points[pcnt].x, paths[pacnt].points[pcnt].y); - } +/***/ }), - ins[pacnt].points.push({ - x: paths[pacnt].points[pcnt].x, - y: paths[pacnt].points[pcnt].y, - linesegment: this.getdirection(paths[pacnt].points[pcnt].x, paths[pacnt].points[pcnt].y, (paths[pacnt].points[pcnt].x + paths[pacnt].points[nextidx].x) / 2, (paths[pacnt].points[pcnt].y + paths[pacnt].points[nextidx].y) / 2) - }); - } +/***/ 6285: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - ins[pacnt].points.push({ - x: (paths[pacnt].points[pcnt].x + paths[pacnt].points[nextidx].x) / 2, - y: (paths[pacnt].points[pcnt].y + paths[pacnt].points[nextidx].y) / 2, - linesegment: this.getdirection((paths[pacnt].points[pcnt].x + paths[pacnt].points[nextidx].x) / 2, (paths[pacnt].points[pcnt].y + paths[pacnt].points[nextidx].y) / 2, (paths[pacnt].points[nextidx].x + paths[pacnt].points[nextidx2].x) / 2, (paths[pacnt].points[nextidx].y + paths[pacnt].points[nextidx2].y) / 2) - }); - } - } +__webpack_require__(2666); +var path = __webpack_require__(7545); - return ins; - } - }, { - key: 'testrightangle', - value: function testrightangle(path, idx1, idx2, idx3, idx4, idx5) { - return path.points[idx3].x === path.points[idx1].x && path.points[idx3].x === path.points[idx2].x && path.points[idx3].y === path.points[idx4].y && path.points[idx3].y === path.points[idx5].y || path.points[idx3].y === path.points[idx1].y && path.points[idx3].y === path.points[idx2].y && path.points[idx3].x === path.points[idx4].x && path.points[idx3].x === path.points[idx5].x; - } - }, { - key: 'getdirection', - value: function getdirection(x1, y1, x2, y2) { - var val = 8; - if (x1 < x2) { - if (y1 < y2) { - val = 1; - } else if (y1 > y2) { - val = 7; - } else { - val = 0; - } - } else if (x1 > x2) { - if (y1 < y2) { - val = 3; - } else if (y1 > y2) { - val = 5; - } else { - val = 4; - } - } else if (y1 < y2) { - val = 2; - } else if (y1 > y2) { - val = 6; - } else { - val = 8; - } +module.exports = path.Number.parseInt; - return val; - } - }, { - key: 'batchinternodes', - value: function batchinternodes(bpaths, options) { - var binternodes = []; - for (var k in bpaths) { - if (!bpaths.hasOwnProperty(k)) { - continue; - } - binternodes[k] = this.internodes(bpaths[k], options); - } - return binternodes; - } - }, { - key: 'tracepath', - value: function tracepath(path, ltres, qtres) { - var pcnt = 0; - var segtype1 = void 0; - var segtype2 = void 0; - var seqend = void 0; - var smp = {}; - smp.segments = []; - smp.boundingbox = path.boundingbox; - smp.holechildren = path.holechildren; - smp.isholepath = path.isholepath; +/***/ }), - while (pcnt < path.points.length) { - segtype1 = path.points[pcnt].linesegment; - segtype2 = -1; - seqend = pcnt + 1; - while ((path.points[seqend].linesegment === segtype1 || path.points[seqend].linesegment === segtype2 || segtype2 === -1) && seqend < path.points.length - 1) { - if (path.points[seqend].linesegment !== segtype1 && segtype2 === -1) { - segtype2 = path.points[seqend].linesegment; - } - seqend += 1; - } - if (seqend === path.points.length - 1) { - seqend = 0; - } +/***/ 3213: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - smp.segments = smp.segments.concat(this.fitseq(path, ltres, qtres, pcnt, seqend)); +__webpack_require__(3113); +var path = __webpack_require__(7545); - if (seqend > 0) { - pcnt = seqend; - } else { - pcnt = path.points.length; - } - } +var Object = path.Object; - return smp; - } - }, { - key: 'fitseq', - value: function fitseq(path, ltres, qtres, seqstart, seqend) { - if (seqend > path.points.length || seqend < 0) { - return []; - } - var errorpoint = seqstart, - errorval = 0, - curvepass = true, - px = void 0, - py = void 0, - dist2 = void 0; - var tl = seqend - seqstart; - if (tl < 0) { - tl += path.points.length; - } - var vx = (path.points[seqend].x - path.points[seqstart].x) / tl, - vy = (path.points[seqend].y - path.points[seqstart].y) / tl; - var pcnt = (seqstart + 1) % path.points.length, - pl = void 0; - while (pcnt != seqend) { - pl = pcnt - seqstart; - if (pl < 0) { - pl += path.points.length; - } - px = path.points[seqstart].x + vx * pl; - py = path.points[seqstart].y + vy * pl; - dist2 = (path.points[pcnt].x - px) * (path.points[pcnt].x - px) + (path.points[pcnt].y - py) * (path.points[pcnt].y - py); - if (dist2 > ltres) { - curvepass = false; - } - if (dist2 > errorval) { - errorpoint = pcnt; - errorval = dist2; - } - pcnt = (pcnt + 1) % path.points.length; - } - if (curvepass) { - return [{ - type: 'L', - x1: path.points[seqstart].x, - y1: path.points[seqstart].y, - x2: path.points[seqend].x, - y2: path.points[seqend].y - }]; - } - var fitpoint = errorpoint; - curvepass = true; - errorval = 0; - var t = (fitpoint - seqstart) / tl, - t1 = (1 - t) * (1 - t), - t2 = 2 * (1 - t) * t, - t3 = t * t; - var cpx = (t1 * path.points[seqstart].x + t3 * path.points[seqend].x - path.points[fitpoint].x) / -t2, - cpy = (t1 * path.points[seqstart].y + t3 * path.points[seqend].y - path.points[fitpoint].y) / -t2; - pcnt = seqstart + 1; - while (pcnt != seqend) { - t = (pcnt - seqstart) / tl; - t1 = (1 - t) * (1 - t); - t2 = 2 * (1 - t) * t; - t3 = t * t; - px = t1 * path.points[seqstart].x + t2 * cpx + t3 * path.points[seqend].x; - py = t1 * path.points[seqstart].y + t2 * cpy + t3 * path.points[seqend].y; - dist2 = (path.points[pcnt].x - px) * (path.points[pcnt].x - px) + (path.points[pcnt].y - py) * (path.points[pcnt].y - py); - if (dist2 > qtres) { - curvepass = false; - } - if (dist2 > errorval) { - errorpoint = pcnt; - errorval = dist2; - } - pcnt = (pcnt + 1) % path.points.length; - } - if (curvepass) { - return [{ - type: 'Q', - x1: path.points[seqstart].x, - y1: path.points[seqstart].y, - x2: cpx, - y2: cpy, - x3: path.points[seqend].x, - y3: path.points[seqend].y - }]; - } - var splitpoint = fitpoint; +module.exports = function create(P, D) { + return Object.create(P, D); +}; - return this.fitseq(path, ltres, qtres, seqstart, splitpoint).concat(this.fitseq(path, ltres, qtres, splitpoint, seqend)); - } - }, { - key: 'batchtracepaths', - value: function batchtracepaths(internodepaths, ltres, qtres) { - var btracedpaths = []; - for (var k in internodepaths) { - if (!internodepaths.hasOwnProperty(k)) { - continue; - } - btracedpaths.push(this.tracepath(internodepaths[k], ltres, qtres)); - } - return btracedpaths; - } - }, { - key: 'batchtracelayers', - value: function batchtracelayers(binternodes, ltres, qtres) { - var btbis = []; - for (var k in binternodes) { - if (!binternodes.hasOwnProperty(k)) { - continue; - } - btbis[k] = this.batchtracepaths(binternodes[k], ltres, qtres); - } +/***/ }), - return btbis; - } - }, { - key: 'roundtodec', - value: function roundtodec(val, places) { - return Number(val.toFixed(places)); - } - }, { - key: 'svgpathstring', - value: function svgpathstring(tracedata, lnum, pathnum, options) { - var layer = tracedata.layers[lnum], - smp = layer[pathnum], - str = '', - pcnt = void 0; - if (options.linefilter && smp.segments.length < 3) { - return str; - } - str = ''; - if (options.lcpr || options.qcpr) { - for (pcnt = 0; pcnt < smp.segments.length; pcnt++) { - if (smp.segments[pcnt].hasOwnProperty('x3') && options.qcpr) { - str += ''; - str += ''; - str += ''; - str += ''; - } - if (!smp.segments[pcnt].hasOwnProperty('x3') && options.lcpr) { - str += ''; - } - } +__webpack_require__(297); +var path = __webpack_require__(7545); - for (var hcnt = 0; hcnt < smp.holechildren.length; hcnt++) { - var hsmp = layer[smp.holechildren[hcnt]]; - for (pcnt = 0; pcnt < hsmp.segments.length; pcnt++) { - if (hsmp.segments[pcnt].hasOwnProperty('x3') && options.qcpr) { - str += ''; - str += ''; - str += ''; - str += ''; - } - if (!hsmp.segments[pcnt].hasOwnProperty('x3') && options.lcpr) { - str += ''; - } - } - } - } +var Object = path.Object; - return str; - } - }, { - key: 'getsvgstring', - value: function getsvgstring(tracedata, options) { - options = this.checkoptions(options); - var w = tracedata.width * options.scale; - var h = tracedata.height * options.scale; +var defineProperty = module.exports = function defineProperty(it, key, desc) { + return Object.defineProperty(it, key, desc); +}; - var svgstr = ''; - for (var lcnt = 0; lcnt < tracedata.layers.length; lcnt += 1) { - for (var pcnt = 0; pcnt < tracedata.layers[lcnt].length; pcnt += 1) { - if (!tracedata.layers[lcnt][pcnt].isholepath) { - svgstr += this.svgpathstring(tracedata, lcnt, pcnt, options); - } - } - } - svgstr += ''; +if (Object.defineProperty.sham) defineProperty.sham = true; - return svgstr; - } - }, { - key: 'compareNumbers', - value: function compareNumbers(a, b) { - return a - b; - } - }, { - key: 'torgbastr', - value: function torgbastr(c) { - return 'rgba(' + c.r + ',' + c.g + ',' + c.b + ',' + c.a + ')'; - } - }, { - key: 'tosvgcolorstr', - value: function tosvgcolorstr(c, options) { - return 'fill="rgb(' + c.r + ',' + c.g + ',' + c.b + ')" stroke="rgb(' + c.r + ',' + c.g + ',' + c.b + ')" stroke-width="' + options.strokewidth + '" opacity="' + c.a / 255.0 + '" '; - } - }, { - key: 'appendSVGString', - value: function appendSVGString(svgstr, parentid) { - var div = void 0; - if (parentid) { - div = document.getElementById(parentid); - if (!div) { - div = document.createElement('div'); - div.id = parentid; - document.body.appendChild(div); - } - } else { - div = document.createElement('div'); - document.body.appendChild(div); - } - div.innerHTML += svgstr; - } - }, { - key: 'blur', - value: function blur(imgd, radius, delta) { - var i = void 0, - j = void 0, - k = void 0, - d = void 0, - idx = void 0, - racc = void 0, - gacc = void 0, - bacc = void 0, - aacc = void 0, - wacc = void 0; - var imgd2 = { width: imgd.width, height: imgd.height, data: [] }; - radius = Math.floor(radius); - if (radius < 1) { - return imgd; - } - if (radius > 5) { - radius = 5; - } - delta = Math.abs(delta); - if (delta > 1024) { - delta = 1024; - } - var thisgk = this.gks[radius - 1]; - for (j = 0; j < imgd.height; j++) { - for (i = 0; i < imgd.width; i++) { - racc = 0; - gacc = 0; - bacc = 0; - aacc = 0; - wacc = 0; - for (k = -radius; k < radius + 1; k++) { - if (i + k > 0 && i + k < imgd.width) { - idx = (j * imgd.width + i + k) * 4; - racc += imgd.data[idx] * thisgk[k + radius]; - gacc += imgd.data[idx + 1] * thisgk[k + radius]; - bacc += imgd.data[idx + 2] * thisgk[k + radius]; - aacc += imgd.data[idx + 3] * thisgk[k + radius]; - wacc += thisgk[k + radius]; - } - } +/***/ }), - idx = (j * imgd.width + i) * 4; - imgd2.data[idx] = Math.floor(racc / wacc); - imgd2.data[idx + 1] = Math.floor(gacc / wacc); - imgd2.data[idx + 2] = Math.floor(bacc / wacc); - imgd2.data[idx + 3] = Math.floor(aacc / wacc); - } - } - var himgd = new Uint8ClampedArray(imgd2.data); - for (j = 0; j < imgd.height; j++) { - for (i = 0; i < imgd.width; i++) { - racc = 0; - gacc = 0; - bacc = 0; - aacc = 0; - wacc = 0; +/***/ 8168: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - for (k = -radius; k < radius + 1; k++) { - if (j + k > 0 && j + k < imgd.height) { - idx = ((j + k) * imgd.width + i) * 4; - racc += himgd[idx] * thisgk[k + radius]; - gacc += himgd[idx + 1] * thisgk[k + radius]; - bacc += himgd[idx + 2] * thisgk[k + radius]; - aacc += himgd[idx + 3] * thisgk[k + radius]; - wacc += thisgk[k + radius]; - } - } +__webpack_require__(9234); +var path = __webpack_require__(7545); - idx = (j * imgd.width + i) * 4; - imgd2.data[idx] = Math.floor(racc / wacc); - imgd2.data[idx + 1] = Math.floor(gacc / wacc); - imgd2.data[idx + 2] = Math.floor(bacc / wacc); - imgd2.data[idx + 3] = Math.floor(aacc / wacc); - } - } - for (j = 0; j < imgd.height; j++) { - for (i = 0; i < imgd.width; i++) { - idx = (j * imgd.width + i) * 4; +module.exports = path.Object.getPrototypeOf; - d = Math.abs(imgd2.data[idx] - imgd.data[idx]) + Math.abs(imgd2.data[idx + 1] - imgd.data[idx + 1]) + Math.abs(imgd2.data[idx + 2] - imgd.data[idx + 2]) + Math.abs(imgd2.data[idx + 3] - imgd.data[idx + 3]); - if (d > delta) { - imgd2.data[idx] = imgd.data[idx]; - imgd2.data[idx + 1] = imgd.data[idx + 1]; - imgd2.data[idx + 2] = imgd.data[idx + 2]; - imgd2.data[idx + 3] = imgd.data[idx + 3]; - } - } - } +/***/ }), - return imgd2; - } - }, { - key: 'loadImage', - value: function loadImage(url, callback, options) { - var img = new Image(); - if (options && options.corsenabled) { - img.crossOrigin = 'Anonymous'; - } - img.src = url; - img.onload = function () { - var canvas = document.createElement('canvas'); - canvas.width = img.width; - canvas.height = img.height; - var context = canvas.getContext('2d'); - context.drawImage(img, 0, 0); - callback(canvas); - }; - } - }, { - key: 'getImgdata', - value: function getImgdata(canvas) { - var context = canvas.getContext('2d'); +/***/ 8651: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - return context.getImageData(0, 0, canvas.width, canvas.height); - } - }, { - key: 'drawLayers', - value: function drawLayers(layers, palette, scale, parentid) { - scale = scale || 1; - var w = void 0, - h = void 0, - i = void 0, - j = void 0, - k = void 0; - var div = void 0; - if (parentid) { - div = document.getElementById(parentid); - if (!div) { - div = document.createElement('div'); - div.id = parentid; - document.body.appendChild(div); - } - } else { - div = document.createElement('div'); - document.body.appendChild(div); - } - for (k in layers) { - if (!layers.hasOwnProperty(k)) { - continue; - } +__webpack_require__(2647); +var path = __webpack_require__(7545); - w = layers[k][0].length; - h = layers[k].length; +module.exports = path.Object.keys; - var canvas = document.createElement('canvas'); - canvas.width = w * scale; - canvas.height = h * scale; - var context = canvas.getContext('2d'); - for (j = 0; j < h; j += 1) { - for (i = 0; i < w; i += 1) { - context.fillStyle = this.torgbastr(palette[layers[k][j][i] % palette.length]); - context.fillRect(i * scale, j * scale, scale, scale); - } - } +/***/ }), - div.appendChild(canvas); - } - } - }]); +/***/ 3083: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - return ImageTracer; -}(); +__webpack_require__(3222); +var path = __webpack_require__(7545); -exports.default = ImageTracer; +module.exports = path.Object.setPrototypeOf; -/***/ }), -/***/ "./src/js/helper/selectionModifyHelper.js": -/*!************************************************!*\ - !*** ./src/js/helper/selectionModifyHelper.js ***! - \************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +/***/ }), -"use strict"; +/***/ 2987: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { +__webpack_require__(4859); +var path = __webpack_require__(7545); -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.setCachedUndoDataForDimension = setCachedUndoDataForDimension; -exports.getCachedUndoDataForDimension = getCachedUndoDataForDimension; -exports.makeSelectionUndoData = makeSelectionUndoData; -exports.makeSelectionUndoDatum = makeSelectionUndoDatum; +module.exports = path.parseFloat; -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); -var _fabric = __webpack_require__(/*! fabric */ "fabric"); +/***/ }), -var _fabric2 = _interopRequireDefault(_fabric); +/***/ 2239: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +__webpack_require__(5706); +var path = __webpack_require__(7545); -/** - * Cached selection's info - * @type {Array} - * @private - */ -/** - * @author NHN. FE Development Team - * @fileoverview Selection modification helper - */ +module.exports = path.parseInt; -var cachedUndoDataForChangeDimension = null; -/** - * Set cached undo data - * @param {Array} undoData - selection object - * @private - */ -function setCachedUndoDataForDimension(undoData) { - cachedUndoDataForChangeDimension = undoData; -} +/***/ }), -/** - * Get cached undo data - * @returns {Object} cached undo data - * @private - */ -function getCachedUndoDataForDimension() { - return cachedUndoDataForChangeDimension; -} +/***/ 3154: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -/** - * Make undo data - * @param {fabric.Object} obj - selection object - * @param {Function} undoDatumMaker - make undo datum - * @returns {Array} undoData - * @private - */ -function makeSelectionUndoData(obj, undoDatumMaker) { - var undoData = void 0; +__webpack_require__(4242); +__webpack_require__(8939); +__webpack_require__(6663); +__webpack_require__(9021); +__webpack_require__(7884); +__webpack_require__(8885); +__webpack_require__(1868); +__webpack_require__(5454); +var path = __webpack_require__(7545); - if (obj.type === 'activeSelection') { - undoData = obj.getObjects().map(function (item) { - var angle = item.angle, - left = item.left, - top = item.top, - scaleX = item.scaleX, - scaleY = item.scaleY, - width = item.width, - height = item.height; +module.exports = path.Promise; - _fabric2.default.util.addTransformToObject(item, obj.calcTransformMatrix()); - var result = undoDatumMaker(item); +/***/ }), - item.set({ - angle: angle, - left: left, - top: top, - width: width, - height: height, - scaleX: scaleX, - scaleY: scaleY - }); +/***/ 6577: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - return result; - }); - } else { - undoData = [undoDatumMaker(obj)]; - } +__webpack_require__(5397); +var path = __webpack_require__(7545); - return undoData; -} +module.exports = path.Reflect.construct; -/** - * Make undo datum - * @param {number} id - object id - * @param {fabric.Object} obj - selection object - * @param {boolean} isSelection - whether or not object is selection - * @returns {Object} undo datum - * @private - */ -function makeSelectionUndoDatum(id, obj, isSelection) { - return isSelection ? { - id: id, - width: obj.width, - height: obj.height, - top: obj.top, - left: obj.left, - angle: obj.angle, - scaleX: obj.scaleX, - scaleY: obj.scaleY - } : (0, _tuiCodeSnippet.extend)({ id: id }, obj); -} /***/ }), -/***/ "./src/js/helper/shapeFilterFillHelper.js": -/*!************************************************!*\ - !*** ./src/js/helper/shapeFilterFillHelper.js ***! - \************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +/***/ 3842: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -"use strict"; +__webpack_require__(957); +var entryVirtual = __webpack_require__(5607); +module.exports = entryVirtual('String').trim; -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.getFillImageFromShape = getFillImageFromShape; -exports.rePositionFilterTypeFillImage = rePositionFilterTypeFillImage; -exports.makeFilterOptionFromFabricImage = makeFilterOptionFromFabricImage; -exports.makeFillPatternForFilter = makeFillPatternForFilter; -exports.resetFillPatternCanvas = resetFillPatternCanvas; -exports.reMakePatternImageSource = reMakePatternImageSource; -exports.getCachedCanvasImageElement = getCachedCanvasImageElement; -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); +/***/ }), -var _shapeResizeHelper = __webpack_require__(/*! @/helper/shapeResizeHelper */ "./src/js/helper/shapeResizeHelper.js"); +/***/ 5008: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { + +__webpack_require__(9106); +__webpack_require__(6663); +__webpack_require__(6187); +__webpack_require__(9781); +__webpack_require__(492); +__webpack_require__(6681); +__webpack_require__(9594); +__webpack_require__(3665); +__webpack_require__(9017); +__webpack_require__(1250); +__webpack_require__(9786); +__webpack_require__(503); +__webpack_require__(6565); +__webpack_require__(9322); +__webpack_require__(3610); +__webpack_require__(6886); +__webpack_require__(3514); +__webpack_require__(8671); +__webpack_require__(8556); +__webpack_require__(1367); +var path = __webpack_require__(7545); + +module.exports = path.Symbol; -var _shapeResizeHelper2 = _interopRequireDefault(_shapeResizeHelper); -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); +/***/ }), -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +/***/ 994: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } /** - * @author NHN. FE Development Team - * @fileoverview Shape resize helper - */ +__webpack_require__(8939); +__webpack_require__(6663); +__webpack_require__(5454); +__webpack_require__(3665); +var WrappedWellKnownSymbolModule = __webpack_require__(9207); +module.exports = WrappedWellKnownSymbolModule.f('iterator'); -var FILTER_OPTION_MAP = { - pixelate: 'blocksize', - blur: 'blur' -}; -var POSITION_DIMENSION_MAP = { - x: 'width', - y: 'height' -}; -var FILTER_NAME_VALUE_MAP = (0, _util.flipObject)(FILTER_OPTION_MAP); +/***/ }), -/** - * Cached canvas image element for fill image - * @type {boolean} - * @private - */ -var cachedCanvasImageElement = null; +/***/ 2813: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -/** - * Get background image of fill - * @param {fabric.Object} shapeObj - Shape object - * @returns {fabric.Image} - * @private - */ -function getFillImageFromShape(shapeObj) { - var _getCustomProperty = (0, _util.getCustomProperty)(shapeObj, 'patternSourceCanvas'), - patternSourceCanvas = _getCustomProperty.patternSourceCanvas; +var parent = __webpack_require__(3822); - var _patternSourceCanvas$ = patternSourceCanvas.getObjects(), - fillImage = _patternSourceCanvas$[0]; +module.exports = parent; - return fillImage; -} -/** - * Reset the image position in the filter type fill area. - * @param {fabric.Object} shapeObj - Shape object - * @private - */ -function rePositionFilterTypeFillImage(shapeObj) { - var angle = shapeObj.angle, - flipX = shapeObj.flipX, - flipY = shapeObj.flipY; +/***/ }), - var fillImage = getFillImageFromShape(shapeObj); - var rotatedShapeCornerDimension = getRotatedDimension(shapeObj); - var right = rotatedShapeCornerDimension.right, - bottom = rotatedShapeCornerDimension.bottom; - var width = rotatedShapeCornerDimension.width, - height = rotatedShapeCornerDimension.height; +/***/ 8664: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - var diffLeft = (width - shapeObj.width) / 2; - var diffTop = (height - shapeObj.height) / 2; - var cropX = shapeObj.left - shapeObj.width / 2 - diffLeft; - var cropY = shapeObj.top - shapeObj.height / 2 - diffTop; - var left = width / 2 - diffLeft; - var top = height / 2 - diffTop; - var fillImageMaxSize = Math.max(width, height) + Math.max(diffLeft, diffTop); +var parent = __webpack_require__(1434); - var _calculateFillImageDi = calculateFillImageDimensionOutsideCanvas({ - shapeObj: shapeObj, - left: left, - top: top, - width: width, - height: height, - cropX: cropX, - cropY: cropY, - flipX: flipX, - flipY: flipY, - right: right, - bottom: bottom - }); +module.exports = parent; - left = _calculateFillImageDi[0]; - top = _calculateFillImageDi[1]; - width = _calculateFillImageDi[2]; - height = _calculateFillImageDi[3]; +/***/ }), - fillImage.set({ - angle: flipX === flipY ? -angle : angle, - left: left, - top: top, - width: width, - height: height, - cropX: cropX, - cropY: cropY, - flipX: flipX, - flipY: flipY - }); +/***/ 1457: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - (0, _util.setCustomProperty)(fillImage, { fillImageMaxSize: fillImageMaxSize }); -} +var parent = __webpack_require__(7710); -/** - * Make filter option from fabric image - * @param {fabric.Image} imageObject - fabric image object - * @returns {object} - */ -function makeFilterOptionFromFabricImage(imageObject) { - return (0, _tuiCodeSnippet.map)(imageObject.filters, function (filter) { - var _Object$keys = Object.keys(filter), - key = _Object$keys[0]; +module.exports = parent; - return _defineProperty({}, FILTER_NAME_VALUE_MAP[key], filter[key]); - }); -} -/** - * Calculate fill image position and size for out of Canvas - * @param {Object} options - options for position dimension calculate - * @param {fabric.Object} shapeObj - shape object - * @param {number} left - original left position - * @param {number} top - original top position - * @param {number} width - image width - * @param {number} height - image height - * @param {number} cropX - image cropX - * @param {number} cropY - image cropY - * @param {boolean} flipX - shape flipX - * @param {boolean} flipY - shape flipY - * @returns {Object} - */ -function calculateFillImageDimensionOutsideCanvas(_ref2) { - var shapeObj = _ref2.shapeObj, - left = _ref2.left, - top = _ref2.top, - width = _ref2.width, - height = _ref2.height, - cropX = _ref2.cropX, - cropY = _ref2.cropY, - flipX = _ref2.flipX, - flipY = _ref2.flipY, - right = _ref2.right, - bottom = _ref2.bottom; +/***/ }), - var overflowAreaPositionFixer = function overflowAreaPositionFixer(type, outDistance, imageLeft, imageTop) { - return calculateDistanceOverflowPart({ - type: type, - outDistance: outDistance, - shapeObj: shapeObj, - flipX: flipX, - flipY: flipY, - left: imageLeft, - top: imageTop - }); - }; - var originalWidth = width, - originalHeight = height; +/***/ 2937: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - var _calculateDimensionLe = calculateDimensionLeftTopEdge(overflowAreaPositionFixer, { - left: left, - top: top, - width: width, - height: height, - cropX: cropX, - cropY: cropY - }); +var parent = __webpack_require__(4741); - left = _calculateDimensionLe[0]; - top = _calculateDimensionLe[1]; - width = _calculateDimensionLe[2]; - height = _calculateDimensionLe[3]; +module.exports = parent; - var _calculateDimensionRi = calculateDimensionRightBottomEdge(overflowAreaPositionFixer, { - left: left, - top: top, - insideCanvasRealImageWidth: width, - insideCanvasRealImageHeight: height, - right: right, - bottom: bottom, - cropX: cropX, - cropY: cropY, - originalWidth: originalWidth, - originalHeight: originalHeight - }); - left = _calculateDimensionRi[0]; - top = _calculateDimensionRi[1]; - width = _calculateDimensionRi[2]; - height = _calculateDimensionRi[3]; +/***/ }), +/***/ 9297: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - return [left, top, width, height]; -} +var parent = __webpack_require__(4963); -/** - * Calculate fill image position and size for for right bottom edge - * @param {Function} overflowAreaPositionFixer - position fixer - * @param {Object} options - options for position dimension calculate - * @param {fabric.Object} shapeObj - shape object - * @param {number} left - original left position - * @param {number} top - original top position - * @param {number} width - image width - * @param {number} height - image height - * @param {number} right - image right - * @param {number} bottom - image bottom - * @param {number} cropX - image cropX - * @param {number} cropY - image cropY - * @param {boolean} originalWidth - image original width - * @param {boolean} originalHeight - image original height - * @returns {Object} - */ -function calculateDimensionRightBottomEdge(overflowAreaPositionFixer, _ref3) { - var left = _ref3.left, - top = _ref3.top, - insideCanvasRealImageWidth = _ref3.insideCanvasRealImageWidth, - insideCanvasRealImageHeight = _ref3.insideCanvasRealImageHeight, - right = _ref3.right, - bottom = _ref3.bottom, - cropX = _ref3.cropX, - cropY = _ref3.cropY, - originalWidth = _ref3.originalWidth, - originalHeight = _ref3.originalHeight; - var width = insideCanvasRealImageWidth, - height = insideCanvasRealImageHeight; - var _cachedCanvasImageEle = cachedCanvasImageElement, - canvasWidth = _cachedCanvasImageEle.width, - canvasHeight = _cachedCanvasImageEle.height; +module.exports = parent; - if (right > canvasWidth && cropX > 0) { - width = originalWidth - Math.abs(right - canvasWidth); - } - if (bottom > canvasHeight && cropY > 0) { - height = originalHeight - Math.abs(bottom - canvasHeight); - } +/***/ }), - var diff = { - x: (insideCanvasRealImageWidth - width) / 2, - y: (insideCanvasRealImageHeight - height) / 2 - }; +/***/ 8026: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - (0, _tuiCodeSnippet.forEach)(['x', 'y'], function (type) { - var cropDistance2 = diff[type]; - if (cropDistance2 > 0) { - var _overflowAreaPosition = overflowAreaPositionFixer(type, cropDistance2, left, top); +var parent = __webpack_require__(7820); - left = _overflowAreaPosition[0]; - top = _overflowAreaPosition[1]; - } - }); +module.exports = parent; - return [left, top, width, height]; -} -/** - * Calculate fill image position and size for for left top - * @param {Function} overflowAreaPositionFixer - position fixer - * @param {Object} options - options for position dimension calculate - * @param {fabric.Object} shapeObj - shape object - * @param {number} left - original left position - * @param {number} top - original top position - * @param {number} width - image width - * @param {number} height - image height - * @param {number} cropX - image cropX - * @param {number} cropY - image cropY - * @returns {Object} - */ -function calculateDimensionLeftTopEdge(overflowAreaPositionFixer, _ref4) { - var left = _ref4.left, - top = _ref4.top, - width = _ref4.width, - height = _ref4.height, - cropX = _ref4.cropX, - cropY = _ref4.cropY; +/***/ }), - var dimension = { - width: width, - height: height - }; +/***/ 2044: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - (0, _tuiCodeSnippet.forEach)(['x', 'y'], function (type) { - var cropDistance = type === 'x' ? cropX : cropY; - var compareSize = dimension[POSITION_DIMENSION_MAP[type]]; - var standardSize = cachedCanvasImageElement[POSITION_DIMENSION_MAP[type]]; +var parent = __webpack_require__(8980); - if (compareSize > standardSize) { - var outDistance = (compareSize - standardSize) / 2; +module.exports = parent; - dimension[POSITION_DIMENSION_MAP[type]] = standardSize; - var _overflowAreaPosition2 = overflowAreaPositionFixer(type, outDistance, left, top); +/***/ }), - left = _overflowAreaPosition2[0]; - top = _overflowAreaPosition2[1]; - } - if (cropDistance < 0) { - var _overflowAreaPosition3 = overflowAreaPositionFixer(type, cropDistance, left, top); +/***/ 2214: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - left = _overflowAreaPosition3[0]; - top = _overflowAreaPosition3[1]; - } - }); +var parent = __webpack_require__(6672); - return [left, top, dimension.width, dimension.height]; -} +module.exports = parent; -/** - * Make fill property of dynamic pattern type - * @param {fabric.Image} canvasImage - canvas background image - * @param {Array} filterOption - filter option - * @param {fabric.StaticCanvas} patternSourceCanvas - fabric static canvas - * @returns {Object} - */ -function makeFillPatternForFilter(canvasImage, filterOption, patternSourceCanvas) { - var copiedCanvasElement = getCachedCanvasImageElement(canvasImage); - var fillImage = makeFillImage(copiedCanvasElement, canvasImage.angle, filterOption); - patternSourceCanvas.add(fillImage); - var fabricProperty = { - fill: new fabric.Pattern({ - source: patternSourceCanvas.getElement(), - repeat: 'no-repeat' - }) - }; +/***/ }), - (0, _util.setCustomProperty)(fabricProperty, { patternSourceCanvas: patternSourceCanvas }); +/***/ 9256: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - return fabricProperty; -} +var parent = __webpack_require__(2285); +__webpack_require__(177); +__webpack_require__(9031); +__webpack_require__(6658); +__webpack_require__(1875); +__webpack_require__(8658); +// TODO: Remove from `core-js@4` +__webpack_require__(4592); +// TODO: Remove from `core-js@4` +__webpack_require__(6680); -/** - * Reset fill pattern canvas - * @param {fabric.StaticCanvas} patternSourceCanvas - fabric static canvas - */ -function resetFillPatternCanvas(patternSourceCanvas) { - var _patternSourceCanvas$2 = patternSourceCanvas.getObjects(), - innerImage = _patternSourceCanvas$2[0]; +module.exports = parent; - var _getCustomProperty2 = (0, _util.getCustomProperty)(innerImage, 'fillImageMaxSize'), - fillImageMaxSize = _getCustomProperty2.fillImageMaxSize; - fillImageMaxSize = Math.max(1, fillImageMaxSize); +/***/ }), - patternSourceCanvas.setDimensions({ - width: fillImageMaxSize, - height: fillImageMaxSize - }); - patternSourceCanvas.renderAll(); -} +/***/ 5659: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -/** - * Remake filter pattern image source - * @param {fabric.Object} shapeObj - Shape object - * @param {fabric.Image} canvasImage - canvas background image - */ -function reMakePatternImageSource(shapeObj, canvasImage) { - var _getCustomProperty3 = (0, _util.getCustomProperty)(shapeObj, 'patternSourceCanvas'), - patternSourceCanvas = _getCustomProperty3.patternSourceCanvas; +var parent = __webpack_require__(8535); - var _patternSourceCanvas$3 = patternSourceCanvas.getObjects(), - fillImage = _patternSourceCanvas$3[0]; +module.exports = parent; - var filterOption = makeFilterOptionFromFabricImage(fillImage); - patternSourceCanvas.remove(fillImage); +/***/ }), - var copiedCanvasElement = getCachedCanvasImageElement(canvasImage, true); - var newFillImage = makeFillImage(copiedCanvasElement, canvasImage.angle, filterOption); +/***/ 6235: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - patternSourceCanvas.add(newFillImage); -} +var isCallable = __webpack_require__(6447); +var tryToString = __webpack_require__(9288); -/** - * Calculate a point line outside the canvas. - * @param {fabric.Image} canvasImage - canvas background image - * @param {boolean} reset - default is false - * @returns {HTMLImageElement} - */ -function getCachedCanvasImageElement(canvasImage) { - var reset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; +// `Assert: IsCallable(argument) is true` +module.exports = function (argument) { + if (isCallable(argument)) return argument; + throw TypeError(tryToString(argument) + ' is not a function'); +}; - if (!cachedCanvasImageElement || reset) { - cachedCanvasImageElement = canvasImage.toCanvasElement(); - } - return cachedCanvasImageElement; -} +/***/ }), -/** - * Calculate fill image position for out of Canvas - * @param {string} type - 'x' or 'y' - * @param {fabric.Object} shapeObj - shape object - * @param {number} outDistance - distance away - * @param {number} left - original left position - * @param {number} top - original top position - * @returns {Array} - */ -function calculateDistanceOverflowPart(_ref5) { - var type = _ref5.type, - shapeObj = _ref5.shapeObj, - outDistance = _ref5.outDistance, - left = _ref5.left, - top = _ref5.top, - flipX = _ref5.flipX, - flipY = _ref5.flipY; +/***/ 1404: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - var shapePointNavigation = getShapeEdgePoint(shapeObj); - var shapeNeighborPointNavigation = [[1, 2], [0, 3], [0, 3], [1, 2]]; - var linePointsOutsideCanvas = calculateLinePointsOutsideCanvas(type, shapePointNavigation, shapeNeighborPointNavigation); - var reatAngles = calculateLineAngleOfOutsideCanvas(type, shapePointNavigation, linePointsOutsideCanvas); - var startPointIndex = linePointsOutsideCanvas.startPointIndex; +var isConstructor = __webpack_require__(2091); +var tryToString = __webpack_require__(9288); - var diffPosition = getReversePositionForFlip({ - outDistance: outDistance, - startPointIndex: startPointIndex, - flipX: flipX, - flipY: flipY, - reatAngles: reatAngles - }); +// `Assert: IsConstructor(argument) is true` +module.exports = function (argument) { + if (isConstructor(argument)) return argument; + throw TypeError(tryToString(argument) + ' is not a constructor'); +}; - return [left + diffPosition.left, top + diffPosition.top]; -} -/** - * Calculate fill image position for out of Canvas - * @param {number} outDistance - distance away - * @param {boolean} flipX - flip x statux - * @param {boolean} flipY - flip y statux - * @param {Array} reatAngles - Line angle of the rectangle vertex. - * @returns {Object} diffPosition - */ -function getReversePositionForFlip(_ref6) { - var outDistance = _ref6.outDistance, - startPointIndex = _ref6.startPointIndex, - flipX = _ref6.flipX, - flipY = _ref6.flipY, - reatAngles = _ref6.reatAngles; +/***/ }), - var rotationChangePoint1 = outDistance * Math.cos(reatAngles[0] * Math.PI / 180); - var rotationChangePoint2 = outDistance * Math.cos(reatAngles[1] * Math.PI / 180); - var isForward = startPointIndex === 2 || startPointIndex === 3; - var diffPosition = { - top: isForward ? rotationChangePoint1 : rotationChangePoint2, - left: isForward ? rotationChangePoint2 : rotationChangePoint1 - }; +/***/ 7757: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - if (isReverseLeftPositionForFlip(startPointIndex, flipX, flipY)) { - diffPosition.left = diffPosition.left * -1; - } - if (isReverseTopPositionForFlip(startPointIndex, flipX, flipY)) { - diffPosition.top = diffPosition.top * -1; - } +var isCallable = __webpack_require__(6447); - return diffPosition; -} +module.exports = function (argument) { + if (typeof argument === 'object' || isCallable(argument)) return argument; + throw TypeError("Can't set " + String(argument) + ' as a prototype'); +}; -/** - * Calculate a point line outside the canvas. - * @param {string} type - 'x' or 'y' - * @param {Array} shapePointNavigation - shape edge positions - * @param {Object} shapePointNavigation.lefttop - left top position - * @param {Object} shapePointNavigation.righttop - right top position - * @param {Object} shapePointNavigation.leftbottom - lefttop position - * @param {Object} shapePointNavigation.rightbottom - rightbottom position - * @param {Array} shapeNeighborPointNavigation - Array to find adjacent edges. - * @returns {Object} - */ -function calculateLinePointsOutsideCanvas(type, shapePointNavigation, shapeNeighborPointNavigation) { - var minimumPoint = 0; - var minimumPointIndex = 0; - (0, _tuiCodeSnippet.forEach)(shapePointNavigation, function (point, index) { - if (point[type] < minimumPoint) { - minimumPoint = point[type]; - minimumPointIndex = index; - } - }); - var _shapeNeighborPointNa = shapeNeighborPointNavigation[minimumPointIndex], - endPointIndex1 = _shapeNeighborPointNa[0], - endPointIndex2 = _shapeNeighborPointNa[1]; +/***/ }), +/***/ 7423: +/***/ (function(module) { - return { - startPointIndex: minimumPointIndex, - endPointIndex1: endPointIndex1, - endPointIndex2: endPointIndex2 - }; -} +module.exports = function () { /* empty */ }; -/** - * Calculate a point line outside the canvas. - * @param {string} type - 'x' or 'y' - * @param {Array} shapePointNavigation - shape edge positions - * @param {object} shapePointNavigation.lefttop - left top position - * @param {object} shapePointNavigation.righttop - right top position - * @param {object} shapePointNavigation.leftbottom - lefttop position - * @param {object} shapePointNavigation.rightbottom - rightbottom position - * @param {Object} linePointsOfOneVertexIndex - Line point of one vertex - * @param {Object} linePointsOfOneVertexIndex.startPoint - start point index - * @param {Object} linePointsOfOneVertexIndex.endPointIndex1 - end point index - * @param {Object} linePointsOfOneVertexIndex.endPointIndex2 - end point index - * @returns {Object} - */ -function calculateLineAngleOfOutsideCanvas(type, shapePointNavigation, linePointsOfOneVertexIndex) { - var startPointIndex = linePointsOfOneVertexIndex.startPointIndex, - endPointIndex1 = linePointsOfOneVertexIndex.endPointIndex1, - endPointIndex2 = linePointsOfOneVertexIndex.endPointIndex2; - var horizontalVerticalAngle = type === 'x' ? 180 : 270; +/***/ }), - return (0, _tuiCodeSnippet.map)([endPointIndex1, endPointIndex2], function (pointIndex) { - var startPoint = shapePointNavigation[startPointIndex]; - var endPoint = shapePointNavigation[pointIndex]; - var diffY = startPoint.y - endPoint.y; - var diffX = startPoint.x - endPoint.x; +/***/ 6961: +/***/ (function(module) { - return Math.atan2(diffY, diffX) * 180 / Math.PI - horizontalVerticalAngle; - }); -} +module.exports = function (it, Constructor, name) { + if (it instanceof Constructor) return it; + throw TypeError('Incorrect ' + (name ? name + ' ' : '') + 'invocation'); +}; -/* eslint-disable complexity */ -/** - * Calculate a point line outside the canvas for horizontal. - * @param {number} startPointIndex - start point index - * @param {boolean} flipX - flip x statux - * @param {boolean} flipY - flip y statux - * @returns {boolean} flipY - flip y statux - */ -function isReverseLeftPositionForFlip(startPointIndex, flipX, flipY) { - return (!flipX && flipY || !flipX && !flipY) && startPointIndex === 0 || (flipX && flipY || flipX && !flipY) && startPointIndex === 1 || (!flipX && !flipY || !flipX && flipY) && startPointIndex === 2 || (flipX && !flipY || flipX && flipY) && startPointIndex === 3; -} -/* eslint-enable complexity */ -/* eslint-disable complexity */ -/** - * Calculate a point line outside the canvas for vertical. - * @param {number} startPointIndex - start point index - * @param {boolean} flipX - flip x statux - * @param {boolean} flipY - flip y statux - * @returns {boolean} flipY - flip y statux - */ -function isReverseTopPositionForFlip(startPointIndex, flipX, flipY) { - return (flipX && !flipY || !flipX && !flipY) && startPointIndex === 0 || (!flipX && !flipY || flipX && !flipY) && startPointIndex === 1 || (flipX && flipY || !flipX && flipY) && startPointIndex === 2 || (!flipX && flipY || flipX && flipY) && startPointIndex === 3; -} -/* eslint-enable complexity */ +/***/ }), -/** - * Shape edge points - * @param {fabric.Object} shapeObj - Selected shape object on canvas - * @returns {Array} shapeEdgePoint - shape edge positions - */ -function getShapeEdgePoint(shapeObj) { - return [shapeObj.getPointByOrigin('left', 'top'), shapeObj.getPointByOrigin('right', 'top'), shapeObj.getPointByOrigin('left', 'bottom'), shapeObj.getPointByOrigin('right', 'bottom')]; -} +/***/ 1138: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -/** - * Rotated shape dimension - * @param {fabric.Object} shapeObj - Shape object - * @returns {Object} Rotated shape dimension - */ -function getRotatedDimension(shapeObj) { - var _getShapeEdgePoint = getShapeEdgePoint(shapeObj), - _getShapeEdgePoint$ = _getShapeEdgePoint[0], - ax = _getShapeEdgePoint$.x, - ay = _getShapeEdgePoint$.y, - _getShapeEdgePoint$2 = _getShapeEdgePoint[1], - bx = _getShapeEdgePoint$2.x, - by = _getShapeEdgePoint$2.y, - _getShapeEdgePoint$3 = _getShapeEdgePoint[2], - cx = _getShapeEdgePoint$3.x, - cy = _getShapeEdgePoint$3.y, - _getShapeEdgePoint$4 = _getShapeEdgePoint[3], - dx = _getShapeEdgePoint$4.x, - dy = _getShapeEdgePoint$4.y; +var isObject = __webpack_require__(5744); - var left = Math.min(ax, bx, cx, dx); - var top = Math.min(ay, by, cy, dy); - var right = Math.max(ax, bx, cx, dx); - var bottom = Math.max(ay, by, cy, dy); +// `Assert: Type(argument) is Object` +module.exports = function (argument) { + if (isObject(argument)) return argument; + throw TypeError(String(argument) + ' is not an object'); +}; - return { - left: left, - top: top, - right: right, - bottom: bottom, - width: right - left, - height: bottom - top - }; -} -/** - * Make fill image - * @param {HTMLImageElement} copiedCanvasElement - html image element - * @param {number} currentCanvasImageAngle - current canvas angle - * @param {Array} filterOption - filter option - * @returns {fabric.Image} - * @private - */ -function makeFillImage(copiedCanvasElement, currentCanvasImageAngle, filterOption) { - var fillImage = new fabric.Image(copiedCanvasElement); +/***/ }), - (0, _tuiCodeSnippet.forEach)(_tuiCodeSnippet.extend.apply(undefined, [{}].concat(filterOption)), function (value, key) { - var fabricFilterClassName = (0, _util.capitalizeString)(key); - var filter = new fabric.Image.filters[fabricFilterClassName](_defineProperty({}, FILTER_OPTION_MAP[key], value)); - fillImage.filters.push(filter); - }); - fillImage.applyFilters(); +/***/ 2724: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - (0, _util.setCustomProperty)(fillImage, { - originalAngle: currentCanvasImageAngle, - fillImageMaxSize: Math.max(fillImage.width, fillImage.height) - }); - _shapeResizeHelper2.default.adjustOriginToCenter(fillImage); +"use strict"; + +var toObject = __webpack_require__(1795); +var toAbsoluteIndex = __webpack_require__(7739); +var lengthOfArrayLike = __webpack_require__(4104); + +// `Array.prototype.fill` method implementation +// https://tc39.es/ecma262/#sec-array.prototype.fill +module.exports = function fill(value /* , start = 0, end = @length */) { + var O = toObject(this); + var length = lengthOfArrayLike(O); + var argumentsLength = arguments.length; + var index = toAbsoluteIndex(argumentsLength > 1 ? arguments[1] : undefined, length); + var end = argumentsLength > 2 ? arguments[2] : undefined; + var endPos = end === undefined ? length : toAbsoluteIndex(end, length); + while (endPos > index) O[index++] = value; + return O; +}; - return fillImage; -} /***/ }), -/***/ "./src/js/helper/shapeResizeHelper.js": -/*!********************************************!*\ - !*** ./src/js/helper/shapeResizeHelper.js ***! - \********************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +/***/ 7397: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { "use strict"; +var $forEach = __webpack_require__(454).forEach; +var arrayMethodIsStrict = __webpack_require__(424); -/** - * @author NHN. FE Development Team - * @fileoverview Shape resize helper - */ -var DIVISOR = { - rect: 1, - circle: 2, - triangle: 1 -}; -var DIMENSION_KEYS = { - rect: { - w: 'width', - h: 'height' - }, - circle: { - w: 'rx', - h: 'ry' - }, - triangle: { - w: 'width', - h: 'height' - } -}; +var STRICT_METHOD = arrayMethodIsStrict('forEach'); -/** - * Set the start point value to the shape object - * @param {fabric.Object} shape - Shape object - * @ignore - */ -function setStartPoint(shape) { - var originX = shape.originX, - originY = shape.originY; +// `Array.prototype.forEach` method implementation +// https://tc39.es/ecma262/#sec-array.prototype.foreach +module.exports = !STRICT_METHOD ? function forEach(callbackfn /* , thisArg */) { + return $forEach(this, callbackfn, arguments.length > 1 ? arguments[1] : undefined); +// eslint-disable-next-line es/no-array-prototype-foreach -- safe +} : [].forEach; - var originKey = originX.substring(0, 1) + originY.substring(0, 1); - shape.startPoint = shape.origins[originKey]; -} +/***/ }), -/** - * Get the positions of ratated origin by the pointer value - * @param {{x: number, y: number}} origin - Origin value - * @param {{x: number, y: number}} pointer - Pointer value - * @param {number} angle - Rotating angle - * @returns {Object} Postions of origin - * @ignore - */ -function getPositionsOfRotatedOrigin(origin, pointer, angle) { - var sx = origin.x; - var sy = origin.y; - var px = pointer.x; - var py = pointer.y; - var r = angle * Math.PI / 180; - var rx = (px - sx) * Math.cos(r) - (py - sy) * Math.sin(r) + sx; - var ry = (px - sx) * Math.sin(r) + (py - sy) * Math.cos(r) + sy; - - return { - originX: sx > rx ? 'right' : 'left', - originY: sy > ry ? 'bottom' : 'top' - }; -} - -/** - * Whether the shape has the center origin or not - * @param {fabric.Object} shape - Shape object - * @returns {boolean} State - * @ignore - */ -function hasCenterOrigin(shape) { - return shape.originX === 'center' && shape.originY === 'center'; -} - -/** - * Adjust the origin of shape by the start point - * @param {{x: number, y: number}} pointer - Pointer value - * @param {fabric.Object} shape - Shape object - * @ignore - */ -function adjustOriginByStartPoint(pointer, shape) { - var centerPoint = shape.getPointByOrigin('center', 'center'); - var angle = -shape.angle; - var originPositions = getPositionsOfRotatedOrigin(centerPoint, pointer, angle); - var originX = originPositions.originX, - originY = originPositions.originY; - - var origin = shape.getPointByOrigin(originX, originY); - var left = shape.left - (centerPoint.x - origin.x); - var top = shape.top - (centerPoint.y - origin.y); - - shape.set({ - originX: originX, - originY: originY, - left: left, - top: top - }); - - shape.setCoords(); -} - -/** - * Adjust the origin of shape by the moving pointer value - * @param {{x: number, y: number}} pointer - Pointer value - * @param {fabric.Object} shape - Shape object - * @ignore - */ -function adjustOriginByMovingPointer(pointer, shape) { - var origin = shape.startPoint; - var angle = -shape.angle; - var originPositions = getPositionsOfRotatedOrigin(origin, pointer, angle); - var originX = originPositions.originX, - originY = originPositions.originY; - - - shape.setPositionByOrigin(origin, originX, originY); - shape.setCoords(); -} - -/** - * Adjust the dimension of shape on firing scaling event - * @param {fabric.Object} shape - Shape object - * @ignore - */ -function adjustDimensionOnScaling(shape) { - var type = shape.type, - scaleX = shape.scaleX, - scaleY = shape.scaleY; - - var dimensionKeys = DIMENSION_KEYS[type]; - var width = shape[dimensionKeys.w] * scaleX; - var height = shape[dimensionKeys.h] * scaleY; - - if (shape.isRegular) { - var maxScale = Math.max(scaleX, scaleY); - - width = shape[dimensionKeys.w] * maxScale; - height = shape[dimensionKeys.h] * maxScale; - } - - var options = { - hasControls: false, - hasBorders: false, - scaleX: 1, - scaleY: 1 - }; - - options[dimensionKeys.w] = width; - options[dimensionKeys.h] = height; - - shape.set(options); -} - -/** - * Adjust the dimension of shape on firing mouse move event - * @param {{x: number, y: number}} pointer - Pointer value - * @param {fabric.Object} shape - Shape object - * @ignore - */ -function adjustDimensionOnMouseMove(pointer, shape) { - var type = shape.type, - strokeWidth = shape.strokeWidth, - origin = shape.startPoint; +/***/ 841: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - var divisor = DIVISOR[type]; - var dimensionKeys = DIMENSION_KEYS[type]; - var isTriangle = !!(shape.type === 'triangle'); - var options = {}; - var width = Math.abs(origin.x - pointer.x) / divisor; - var height = Math.abs(origin.y - pointer.y) / divisor; +"use strict"; - if (width > strokeWidth) { - width -= strokeWidth / divisor; +var bind = __webpack_require__(8043); +var toObject = __webpack_require__(1795); +var callWithSafeIterationClosing = __webpack_require__(1635); +var isArrayIteratorMethod = __webpack_require__(6109); +var isConstructor = __webpack_require__(2091); +var lengthOfArrayLike = __webpack_require__(4104); +var createProperty = __webpack_require__(9361); +var getIterator = __webpack_require__(1669); +var getIteratorMethod = __webpack_require__(8703); + +// `Array.from` method implementation +// https://tc39.es/ecma262/#sec-array.from +module.exports = function from(arrayLike /* , mapfn = undefined, thisArg = undefined */) { + var O = toObject(arrayLike); + var IS_CONSTRUCTOR = isConstructor(this); + var argumentsLength = arguments.length; + var mapfn = argumentsLength > 1 ? arguments[1] : undefined; + var mapping = mapfn !== undefined; + if (mapping) mapfn = bind(mapfn, argumentsLength > 2 ? arguments[2] : undefined, 2); + var iteratorMethod = getIteratorMethod(O); + var index = 0; + var length, result, step, iterator, next, value; + // if the target is not iterable or it's an array with the default iterator - use a simple case + if (iteratorMethod && !(this == Array && isArrayIteratorMethod(iteratorMethod))) { + iterator = getIterator(O, iteratorMethod); + next = iterator.next; + result = IS_CONSTRUCTOR ? new this() : []; + for (;!(step = next.call(iterator)).done; index++) { + value = mapping ? callWithSafeIterationClosing(iterator, mapfn, [step.value, index], true) : step.value; + createProperty(result, index, value); + } + } else { + length = lengthOfArrayLike(O); + result = IS_CONSTRUCTOR ? new this(length) : Array(length); + for (;length > index; index++) { + value = mapping ? mapfn(O[index], index) : O[index]; + createProperty(result, index, value); + } } + result.length = index; + return result; +}; - if (height > strokeWidth) { - height -= strokeWidth / divisor; - } - if (shape.isRegular) { - width = height = Math.max(width, height); +/***/ }), - if (isTriangle) { - height = Math.sqrt(3) / 2 * width; - } - } +/***/ 8180: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - options[dimensionKeys.w] = width; - options[dimensionKeys.h] = height; +var toIndexedObject = __webpack_require__(101); +var toAbsoluteIndex = __webpack_require__(7739); +var lengthOfArrayLike = __webpack_require__(4104); - shape.set(options); -} +// `Array.prototype.{ indexOf, includes }` methods implementation +var createMethod = function (IS_INCLUDES) { + return function ($this, el, fromIndex) { + var O = toIndexedObject($this); + var length = lengthOfArrayLike(O); + var index = toAbsoluteIndex(fromIndex, length); + var value; + // Array#includes uses SameValueZero equality algorithm + // eslint-disable-next-line no-self-compare -- NaN check + if (IS_INCLUDES && el != el) while (length > index) { + value = O[index++]; + // eslint-disable-next-line no-self-compare -- NaN check + if (value != value) return true; + // Array#indexOf ignores holes, Array#includes - not + } else for (;length > index; index++) { + if ((IS_INCLUDES || index in O) && O[index] === el) return IS_INCLUDES || index || 0; + } return !IS_INCLUDES && -1; + }; +}; module.exports = { - /** - * Set each origin value to shape - * @param {fabric.Object} shape - Shape object - */ - setOrigins: function setOrigins(shape) { - var leftTopPoint = shape.getPointByOrigin('left', 'top'); - var rightTopPoint = shape.getPointByOrigin('right', 'top'); - var rightBottomPoint = shape.getPointByOrigin('right', 'bottom'); - var leftBottomPoint = shape.getPointByOrigin('left', 'bottom'); + // `Array.prototype.includes` method + // https://tc39.es/ecma262/#sec-array.prototype.includes + includes: createMethod(true), + // `Array.prototype.indexOf` method + // https://tc39.es/ecma262/#sec-array.prototype.indexof + indexOf: createMethod(false) +}; - shape.origins = { - lt: leftTopPoint, - rt: rightTopPoint, - rb: rightBottomPoint, - lb: leftBottomPoint - }; - }, +/***/ }), - /** - * Resize the shape - * @param {fabric.Object} shape - Shape object - * @param {{x: number, y: number}} pointer - Mouse pointer values on canvas - * @param {boolean} isScaling - Whether the resizing action is scaling or not - */ - resize: function resize(shape, pointer, isScaling) { - if (hasCenterOrigin(shape)) { - adjustOriginByStartPoint(pointer, shape); - setStartPoint(shape); +/***/ 454: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { + +var bind = __webpack_require__(8043); +var IndexedObject = __webpack_require__(2202); +var toObject = __webpack_require__(1795); +var lengthOfArrayLike = __webpack_require__(4104); +var arraySpeciesCreate = __webpack_require__(1321); + +var push = [].push; + +// `Array.prototype.{ forEach, map, filter, some, every, find, findIndex, filterReject }` methods implementation +var createMethod = function (TYPE) { + var IS_MAP = TYPE == 1; + var IS_FILTER = TYPE == 2; + var IS_SOME = TYPE == 3; + var IS_EVERY = TYPE == 4; + var IS_FIND_INDEX = TYPE == 6; + var IS_FILTER_REJECT = TYPE == 7; + var NO_HOLES = TYPE == 5 || IS_FIND_INDEX; + return function ($this, callbackfn, that, specificCreate) { + var O = toObject($this); + var self = IndexedObject(O); + var boundFunction = bind(callbackfn, that, 3); + var length = lengthOfArrayLike(self); + var index = 0; + var create = specificCreate || arraySpeciesCreate; + var target = IS_MAP ? create($this, length) : IS_FILTER || IS_FILTER_REJECT ? create($this, 0) : undefined; + var value, result; + for (;length > index; index++) if (NO_HOLES || index in self) { + value = self[index]; + result = boundFunction(value, index, O); + if (TYPE) { + if (IS_MAP) target[index] = result; // map + else if (result) switch (TYPE) { + case 3: return true; // some + case 5: return value; // find + case 6: return index; // findIndex + case 2: push.call(target, value); // filter + } else switch (TYPE) { + case 4: return false; // every + case 7: push.call(target, value); // filterReject + } + } } + return IS_FIND_INDEX ? -1 : IS_SOME || IS_EVERY ? IS_EVERY : target; + }; +}; - if (isScaling) { - adjustDimensionOnScaling(shape, pointer); - } else { - adjustDimensionOnMouseMove(pointer, shape); - } +module.exports = { + // `Array.prototype.forEach` method + // https://tc39.es/ecma262/#sec-array.prototype.foreach + forEach: createMethod(0), + // `Array.prototype.map` method + // https://tc39.es/ecma262/#sec-array.prototype.map + map: createMethod(1), + // `Array.prototype.filter` method + // https://tc39.es/ecma262/#sec-array.prototype.filter + filter: createMethod(2), + // `Array.prototype.some` method + // https://tc39.es/ecma262/#sec-array.prototype.some + some: createMethod(3), + // `Array.prototype.every` method + // https://tc39.es/ecma262/#sec-array.prototype.every + every: createMethod(4), + // `Array.prototype.find` method + // https://tc39.es/ecma262/#sec-array.prototype.find + find: createMethod(5), + // `Array.prototype.findIndex` method + // https://tc39.es/ecma262/#sec-array.prototype.findIndex + findIndex: createMethod(6), + // `Array.prototype.filterReject` method + // https://github.com/tc39/proposal-array-filtering + filterReject: createMethod(7) +}; - adjustOriginByMovingPointer(pointer, shape); - }, +/***/ }), - /** - * Adjust the origin position of shape to center - * @param {fabric.Object} shape - Shape object - */ - adjustOriginToCenter: function adjustOriginToCenter(shape) { - var centerPoint = shape.getPointByOrigin('center', 'center'); - var originX = shape.originX, - originY = shape.originY; +/***/ 242: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - var origin = shape.getPointByOrigin(originX, originY); - var left = shape.left + (centerPoint.x - origin.x); - var top = shape.top + (centerPoint.y - origin.y); +var fails = __webpack_require__(6192); +var wellKnownSymbol = __webpack_require__(8182); +var V8_VERSION = __webpack_require__(4218); - shape.set({ - hasControls: true, - hasBorders: true, - originX: 'center', - originY: 'center', - left: left, - top: top - }); +var SPECIES = wellKnownSymbol('species'); - shape.setCoords(); // For left, top properties - } +module.exports = function (METHOD_NAME) { + // We can't use this feature detection in V8 since it causes + // deoptimization and serious performance degradation + // https://github.com/zloirock/core-js/issues/677 + return V8_VERSION >= 51 || !fails(function () { + var array = []; + var constructor = array.constructor = {}; + constructor[SPECIES] = function () { + return { foo: 1 }; + }; + return array[METHOD_NAME](Boolean).foo !== 1; + }); }; + /***/ }), -/***/ "./src/js/imageEditor.js": -/*!*******************************!*\ - !*** ./src/js/imageEditor.js ***! - \*******************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +/***/ 424: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { "use strict"; +var fails = __webpack_require__(6192); -Object.defineProperty(exports, "__esModule", { - value: true -}); +module.exports = function (METHOD_NAME, argument) { + var method = [][METHOD_NAME]; + return !!method && fails(function () { + // eslint-disable-next-line no-useless-call,no-throw-literal -- required for testing + method.call(null, argument || function () { throw 1; }, 1); + }); +}; -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); /** - * @author NHN. FE Development Team - * @fileoverview Image-editor application class - */ +/***/ }), -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); +/***/ 3712: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); +var isArray = __webpack_require__(4770); +var isConstructor = __webpack_require__(2091); +var isObject = __webpack_require__(5744); +var wellKnownSymbol = __webpack_require__(8182); -var _invoker3 = __webpack_require__(/*! @/invoker */ "./src/js/invoker.js"); +var SPECIES = wellKnownSymbol('species'); -var _invoker4 = _interopRequireDefault(_invoker3); +// a part of `ArraySpeciesCreate` abstract operation +// https://tc39.es/ecma262/#sec-arrayspeciescreate +module.exports = function (originalArray) { + var C; + if (isArray(originalArray)) { + C = originalArray.constructor; + // cross-realm fallback + if (isConstructor(C) && (C === Array || isArray(C.prototype))) C = undefined; + else if (isObject(C)) { + C = C[SPECIES]; + if (C === null) C = undefined; + } + } return C === undefined ? Array : C; +}; -var _ui = __webpack_require__(/*! @/ui */ "./src/js/ui.js"); -var _ui2 = _interopRequireDefault(_ui); +/***/ }), -var _action = __webpack_require__(/*! @/action */ "./src/js/action.js"); +/***/ 1321: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -var _action2 = _interopRequireDefault(_action); +var arraySpeciesConstructor = __webpack_require__(3712); -var _command = __webpack_require__(/*! @/factory/command */ "./src/js/factory/command.js"); +// `ArraySpeciesCreate` abstract operation +// https://tc39.es/ecma262/#sec-arrayspeciescreate +module.exports = function (originalArray, length) { + return new (arraySpeciesConstructor(originalArray))(length === 0 ? 0 : length); +}; -var _command2 = _interopRequireDefault(_command); -var _graphics = __webpack_require__(/*! @/graphics */ "./src/js/graphics.js"); +/***/ }), -var _graphics2 = _interopRequireDefault(_graphics); +/***/ 1635: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -var _selectionModifyHelper = __webpack_require__(/*! @/helper/selectionModifyHelper */ "./src/js/helper/selectionModifyHelper.js"); +var anObject = __webpack_require__(1138); +var iteratorClose = __webpack_require__(6639); -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); +// call something on iterator step with safe closing on error +module.exports = function (iterator, fn, value, ENTRIES) { + try { + return ENTRIES ? fn(anObject(value)[0], value[1]) : fn(value); + } catch (error) { + iteratorClose(iterator, 'throw', error); + } +}; -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +/***/ }), -function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } +/***/ 9770: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } +var wellKnownSymbol = __webpack_require__(8182); -var isUndefined = _tuiCodeSnippet2.default.isUndefined, - forEach = _tuiCodeSnippet2.default.forEach, - CustomEvents = _tuiCodeSnippet2.default.CustomEvents; -var MOUSE_DOWN = _consts.eventNames.MOUSE_DOWN, - OBJECT_MOVED = _consts.eventNames.OBJECT_MOVED, - OBJECT_SCALED = _consts.eventNames.OBJECT_SCALED, - OBJECT_ACTIVATED = _consts.eventNames.OBJECT_ACTIVATED, - OBJECT_ROTATED = _consts.eventNames.OBJECT_ROTATED, - OBJECT_ADDED = _consts.eventNames.OBJECT_ADDED, - OBJECT_MODIFIED = _consts.eventNames.OBJECT_MODIFIED, - ADD_TEXT = _consts.eventNames.ADD_TEXT, - ADD_OBJECT = _consts.eventNames.ADD_OBJECT, - TEXT_EDITING = _consts.eventNames.TEXT_EDITING, - TEXT_CHANGED = _consts.eventNames.TEXT_CHANGED, - ICON_CREATE_RESIZE = _consts.eventNames.ICON_CREATE_RESIZE, - ICON_CREATE_END = _consts.eventNames.ICON_CREATE_END, - SELECTION_CLEARED = _consts.eventNames.SELECTION_CLEARED, - SELECTION_CREATED = _consts.eventNames.SELECTION_CREATED, - ADD_OBJECT_AFTER = _consts.eventNames.ADD_OBJECT_AFTER; +var ITERATOR = wellKnownSymbol('iterator'); +var SAFE_CLOSING = false; -/** - * Image filter result - * @typedef {object} FilterResult - * @property {string} type - filter type like 'mask', 'Grayscale' and so on - * @property {string} action - action type like 'add', 'remove' - */ +try { + var called = 0; + var iteratorWithReturn = { + next: function () { + return { done: !!called++ }; + }, + 'return': function () { + SAFE_CLOSING = true; + } + }; + iteratorWithReturn[ITERATOR] = function () { + return this; + }; + // eslint-disable-next-line es/no-array-from, no-throw-literal -- required for testing + Array.from(iteratorWithReturn, function () { throw 2; }); +} catch (error) { /* empty */ } -/** - * Flip status - * @typedef {object} FlipStatus - * @property {boolean} flipX - x axis - * @property {boolean} flipY - y axis - * @property {Number} angle - angle - */ -/** - * Rotation status - * @typedef {Number} RotateStatus - * @property {Number} angle - angle - */ +module.exports = function (exec, SKIP_CLOSING) { + if (!SKIP_CLOSING && !SAFE_CLOSING) return false; + var ITERATION_SUPPORT = false; + try { + var object = {}; + object[ITERATOR] = function () { + return { + next: function () { + return { done: ITERATION_SUPPORT = true }; + } + }; + }; + exec(object); + } catch (error) { /* empty */ } + return ITERATION_SUPPORT; +}; -/** - * Old and new Size - * @typedef {object} SizeChange - * @property {Number} oldWidth - old width - * @property {Number} oldHeight - old height - * @property {Number} newWidth - new width - * @property {Number} newHeight - new height - */ -/** - * @typedef {string} ErrorMsg - {string} error message - */ +/***/ }), -/** - * @typedef {object} ObjectProps - graphics object properties - * @property {number} id - object id - * @property {string} type - object type - * @property {string} text - text content - * @property {(string | number)} left - Left - * @property {(string | number)} top - Top - * @property {(string | number)} width - Width - * @property {(string | number)} height - Height - * @property {string} fill - Color - * @property {string} stroke - Stroke - * @property {(string | number)} strokeWidth - StrokeWidth - * @property {string} fontFamily - Font type for text - * @property {number} fontSize - Font Size - * @property {string} fontStyle - Type of inclination (normal / italic) - * @property {string} fontWeight - Type of thicker or thinner looking (normal / bold) - * @property {string} textAlign - Type of text align (left / center / right) - * @property {string} textDecoration - Type of line (underline / line-through / overline) - */ +/***/ 9272: +/***/ (function(module) { -/** - * Shape filter option - * @typedef {object.} ShapeFilterOption - */ +var toString = {}.toString; -/** - * Shape filter option - * @typedef {object} ShapeFillOption - fill option of shape - * @property {string} type - fill type ('color' or 'filter') - * @property {Array.} [filter] - {@link ShapeFilterOption} List. - * only applies to filter types - * (ex: \[\{pixelate: 20\}, \{blur: 0.3\}\]) - * @property {string} [color] - Shape foreground color (ex: '#fff', 'transparent') - */ +module.exports = function (it) { + return toString.call(it).slice(8, -1); +}; -/** - * Image editor - * @class - * @param {string|HTMLElement} wrapper - Wrapper's element or selector - * @param {Object} [options] - Canvas max width & height of css - * @param {number} [options.includeUI] - Use the provided UI - * @param {Object} [options.includeUI.loadImage] - Basic editing image - * @param {string} options.includeUI.loadImage.path - image path - * @param {string} options.includeUI.loadImage.name - image name - * @param {Object} [options.includeUI.theme] - Theme object - * @param {Array} [options.includeUI.menu] - It can be selected when only specific menu is used, Default values are \['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'\]. - * @param {string} [options.includeUI.initMenu] - The first menu to be selected and started. - * @param {Object} [options.includeUI.uiSize] - ui size of editor - * @param {string} options.includeUI.uiSize.width - width of ui - * @param {string} options.includeUI.uiSize.height - height of ui - * @param {string} [options.includeUI.menuBarPosition=bottom] - Menu bar position('top', 'bottom', 'left', 'right') - * @param {number} options.cssMaxWidth - Canvas css-max-width - * @param {number} options.cssMaxHeight - Canvas css-max-height - * @param {Object} [options.selectionStyle] - selection style - * @param {string} [options.selectionStyle.cornerStyle] - selection corner style - * @param {number} [options.selectionStyle.cornerSize] - selection corner size - * @param {string} [options.selectionStyle.cornerColor] - selection corner color - * @param {string} [options.selectionStyle.cornerStrokeColor] = selection corner stroke color - * @param {boolean} [options.selectionStyle.transparentCorners] - selection corner transparent - * @param {number} [options.selectionStyle.lineWidth] - selection line width - * @param {string} [options.selectionStyle.borderColor] - selection border color - * @param {number} [options.selectionStyle.rotatingPointOffset] - selection rotating point length - * @param {Boolean} [options.usageStatistics=true] - Let us know the hostname. If you don't want to send the hostname, please set to false. - * @example - * var ImageEditor = require('tui-image-editor'); - * var blackTheme = require('./js/theme/black-theme.js'); - * var instance = new ImageEditor(document.querySelector('#tui-image-editor'), { - * includeUI: { - * loadImage: { - * path: 'img/sampleImage.jpg', - * name: 'SampleImage' - * }, - * theme: blackTheme, // or whiteTheme - * menu: ['shape', 'filter'], - * initMenu: 'filter', - * uiSize: { - * width: '1000px', - * height: '700px' - * }, - * menuBarPosition: 'bottom' - * }, - * cssMaxWidth: 700, - * cssMaxHeight: 500, - * selectionStyle: { - * cornerSize: 20, - * rotatingPointOffset: 70 - * } - * }); - */ -var ImageEditor = function () { - function ImageEditor(wrapper, options) { - _classCallCheck(this, ImageEditor); +/***/ }), - options = _tuiCodeSnippet2.default.extend({ - includeUI: false, - usageStatistics: true - }, options); +/***/ 4696: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - this.mode = null; +var TO_STRING_TAG_SUPPORT = __webpack_require__(3471); +var isCallable = __webpack_require__(6447); +var classofRaw = __webpack_require__(9272); +var wellKnownSymbol = __webpack_require__(8182); - this.activeObjectId = null; +var TO_STRING_TAG = wellKnownSymbol('toStringTag'); +// ES3 wrong here +var CORRECT_ARGUMENTS = classofRaw(function () { return arguments; }()) == 'Arguments'; - /** - * UI instance - * @type {Ui} - */ - if (options.includeUI) { - var UIOption = options.includeUI; - UIOption.usageStatistics = options.usageStatistics; +// fallback for IE11 Script Access Denied error +var tryGet = function (it, key) { + try { + return it[key]; + } catch (error) { /* empty */ } +}; - this.ui = new _ui2.default(wrapper, UIOption, this.getActions()); - options = this.ui.setUiDefaultSelectionStyle(options); - } +// getting tag from ES6+ `Object.prototype.toString` +module.exports = TO_STRING_TAG_SUPPORT ? classofRaw : function (it) { + var O, tag, result; + return it === undefined ? 'Undefined' : it === null ? 'Null' + // @@toStringTag case + : typeof (tag = tryGet(O = Object(it), TO_STRING_TAG)) == 'string' ? tag + // builtinTag case + : CORRECT_ARGUMENTS ? classofRaw(O) + // ES3 arguments fallback + : (result = classofRaw(O)) == 'Object' && isCallable(O.callee) ? 'Arguments' : result; +}; - /** - * Invoker - * @type {Invoker} - * @private - */ - this._invoker = new _invoker4.default(); - /** - * Graphics instance - * @type {Graphics} - * @private - */ - this._graphics = new _graphics2.default(this.ui ? this.ui.getEditorArea() : wrapper, { - cssMaxWidth: options.cssMaxWidth, - cssMaxHeight: options.cssMaxHeight - }); +/***/ }), - /** - * Event handler list - * @type {Object} - * @private - */ - this._handlers = { - keydown: this._onKeyDown.bind(this), - mousedown: this._onMouseDown.bind(this), - objectActivated: this._onObjectActivated.bind(this), - objectMoved: this._onObjectMoved.bind(this), - objectScaled: this._onObjectScaled.bind(this), - objectRotated: this._onObjectRotated.bind(this), - objectAdded: this._onObjectAdded.bind(this), - objectModified: this._onObjectModified.bind(this), - createdPath: this._onCreatedPath, - addText: this._onAddText.bind(this), - addObject: this._onAddObject.bind(this), - textEditing: this._onTextEditing.bind(this), - textChanged: this._onTextChanged.bind(this), - iconCreateResize: this._onIconCreateResize.bind(this), - iconCreateEnd: this._onIconCreateEnd.bind(this), - selectionCleared: this._selectionCleared.bind(this), - selectionCreated: this._selectionCreated.bind(this) - }; +/***/ 4635: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - this._attachInvokerEvents(); - this._attachGraphicsEvents(); - this._attachDomEvents(); - this._setSelectionStyle(options.selectionStyle, { - applyCropSelectionStyle: options.applyCropSelectionStyle, - applyGroupSelectionStyle: options.applyGroupSelectionStyle - }); +var fails = __webpack_require__(6192); - if (options.usageStatistics) { - (0, _util.sendHostName)(); - } +module.exports = !fails(function () { + function F() { /* empty */ } + F.prototype.constructor = null; + // eslint-disable-next-line es/no-object-getprototypeof -- required for testing + return Object.getPrototypeOf(new F()) !== F.prototype; +}); - if (this.ui) { - this.ui.initCanvas(); - this.setReAction(); - this._attachColorPickerInputBoxEvents(); - } - fabric.enableGLFiltering = false; - } - _createClass(ImageEditor, [{ - key: '_attachColorPickerInputBoxEvents', - value: function _attachColorPickerInputBoxEvents() { - var _this = this; +/***/ }), - this.ui.on(_consts.eventNames.INPUT_BOX_EDITING_STARTED, function () { - _this.isColorPickerInputBoxEditing = true; - }); - this.ui.on(_consts.eventNames.INPUT_BOX_EDITING_STOPPED, function () { - _this.isColorPickerInputBoxEditing = false; - }); - } - }, { - key: '_detachColorPickerInputBoxEvents', - value: function _detachColorPickerInputBoxEvents() { - this.ui.off(_consts.eventNames.INPUT_BOX_EDITING_STARTED); - this.ui.off(_consts.eventNames.INPUT_BOX_EDITING_STOPPED); - } +/***/ 5148: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Set selection style by init option - * @param {Object} selectionStyle - Selection styles - * @param {Object} applyTargets - Selection apply targets - * @param {boolean} applyCropSelectionStyle - whether apply with crop selection style or not - * @param {boolean} applyGroupSelectionStyle - whether apply with group selection style or not - * @private - */ +"use strict"; - }, { - key: '_setSelectionStyle', - value: function _setSelectionStyle(selectionStyle, _ref) { - var applyCropSelectionStyle = _ref.applyCropSelectionStyle, - applyGroupSelectionStyle = _ref.applyGroupSelectionStyle; +var IteratorPrototype = __webpack_require__(4413).IteratorPrototype; +var create = __webpack_require__(2853); +var createPropertyDescriptor = __webpack_require__(774); +var setToStringTag = __webpack_require__(1284); +var Iterators = __webpack_require__(7771); - if (selectionStyle) { - this._graphics.setSelectionStyle(selectionStyle); - } +var returnThis = function () { return this; }; - if (applyCropSelectionStyle) { - this._graphics.setCropSelectionStyle(selectionStyle); - } +module.exports = function (IteratorConstructor, NAME, next) { + var TO_STRING_TAG = NAME + ' Iterator'; + IteratorConstructor.prototype = create(IteratorPrototype, { next: createPropertyDescriptor(1, next) }); + setToStringTag(IteratorConstructor, TO_STRING_TAG, false, true); + Iterators[TO_STRING_TAG] = returnThis; + return IteratorConstructor; +}; - if (applyGroupSelectionStyle) { - this.on('selectionCreated', function (eventTarget) { - if (eventTarget.type === 'activeSelection') { - eventTarget.set(selectionStyle); - } - }); - } - } - /** - * Attach invoker events - * @private - */ +/***/ }), - }, { - key: '_attachInvokerEvents', - value: function _attachInvokerEvents() { - var _this2 = this; +/***/ 8711: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - var UNDO_STACK_CHANGED = _consts.eventNames.UNDO_STACK_CHANGED, - REDO_STACK_CHANGED = _consts.eventNames.REDO_STACK_CHANGED, - EXECUTE_COMMAND = _consts.eventNames.EXECUTE_COMMAND, - AFTER_UNDO = _consts.eventNames.AFTER_UNDO, - AFTER_REDO = _consts.eventNames.AFTER_REDO, - HAND_STARTED = _consts.eventNames.HAND_STARTED, - HAND_STOPPED = _consts.eventNames.HAND_STOPPED; +var DESCRIPTORS = __webpack_require__(69); +var definePropertyModule = __webpack_require__(2760); +var createPropertyDescriptor = __webpack_require__(774); - /** - * Undo stack changed event - * @event ImageEditor#undoStackChanged - * @param {Number} length - undo stack length - * @example - * imageEditor.on('undoStackChanged', function(length) { - * console.log(length); - * }); - */ +module.exports = DESCRIPTORS ? function (object, key, value) { + return definePropertyModule.f(object, key, createPropertyDescriptor(1, value)); +} : function (object, key, value) { + object[key] = value; + return object; +}; - this._invoker.on(UNDO_STACK_CHANGED, this.fire.bind(this, UNDO_STACK_CHANGED)); - /** - * Redo stack changed event - * @event ImageEditor#redoStackChanged - * @param {Number} length - redo stack length - * @example - * imageEditor.on('redoStackChanged', function(length) { - * console.log(length); - * }); - */ - this._invoker.on(REDO_STACK_CHANGED, this.fire.bind(this, REDO_STACK_CHANGED)); - if (this.ui) { - var canvas = this._graphics.getCanvas(); +/***/ }), - this._invoker.on(EXECUTE_COMMAND, function (command) { - return _this2.ui.fire(EXECUTE_COMMAND, command); - }); - this._invoker.on(AFTER_UNDO, function (command) { - return _this2.ui.fire(AFTER_UNDO, command); - }); - this._invoker.on(AFTER_REDO, function (command) { - return _this2.ui.fire(AFTER_REDO, command); - }); +/***/ 774: +/***/ (function(module) { - canvas.on(HAND_STARTED, function () { - return _this2.ui.fire(HAND_STARTED); - }); - canvas.on(HAND_STOPPED, function () { - return _this2.ui.fire(HAND_STOPPED); - }); - } - } +module.exports = function (bitmap, value) { + return { + enumerable: !(bitmap & 1), + configurable: !(bitmap & 2), + writable: !(bitmap & 4), + value: value + }; +}; - /** - * Attach canvas events - * @private - */ - }, { - key: '_attachGraphicsEvents', - value: function _attachGraphicsEvents() { - var _graphics$on; +/***/ }), - this._graphics.on((_graphics$on = {}, _defineProperty(_graphics$on, MOUSE_DOWN, this._handlers.mousedown), _defineProperty(_graphics$on, OBJECT_MOVED, this._handlers.objectMoved), _defineProperty(_graphics$on, OBJECT_SCALED, this._handlers.objectScaled), _defineProperty(_graphics$on, OBJECT_ROTATED, this._handlers.objectRotated), _defineProperty(_graphics$on, OBJECT_ACTIVATED, this._handlers.objectActivated), _defineProperty(_graphics$on, OBJECT_ADDED, this._handlers.objectAdded), _defineProperty(_graphics$on, OBJECT_MODIFIED, this._handlers.objectModified), _defineProperty(_graphics$on, ADD_TEXT, this._handlers.addText), _defineProperty(_graphics$on, ADD_OBJECT, this._handlers.addObject), _defineProperty(_graphics$on, TEXT_EDITING, this._handlers.textEditing), _defineProperty(_graphics$on, TEXT_CHANGED, this._handlers.textChanged), _defineProperty(_graphics$on, ICON_CREATE_RESIZE, this._handlers.iconCreateResize), _defineProperty(_graphics$on, ICON_CREATE_END, this._handlers.iconCreateEnd), _defineProperty(_graphics$on, SELECTION_CLEARED, this._handlers.selectionCleared), _defineProperty(_graphics$on, SELECTION_CREATED, this._handlers.selectionCreated), _graphics$on)); - } +/***/ 9361: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Attach dom events - * @private - */ +"use strict"; - }, { - key: '_attachDomEvents', - value: function _attachDomEvents() { - // ImageEditor supports IE 9 higher - document.addEventListener('keydown', this._handlers.keydown); - } +var toPropertyKey = __webpack_require__(77); +var definePropertyModule = __webpack_require__(2760); +var createPropertyDescriptor = __webpack_require__(774); - /** - * Detach dom events - * @private - */ +module.exports = function (object, key, value) { + var propertyKey = toPropertyKey(key); + if (propertyKey in object) definePropertyModule.f(object, propertyKey, createPropertyDescriptor(0, value)); + else object[propertyKey] = value; +}; - }, { - key: '_detachDomEvents', - value: function _detachDomEvents() { - // ImageEditor supports IE 9 higher - document.removeEventListener('keydown', this._handlers.keydown); - } - /** - * Keydown event handler - * @param {KeyboardEvent} e - Event object - * @private - */ - /* eslint-disable complexity */ +/***/ }), - }, { - key: '_onKeyDown', - value: function _onKeyDown(e) { - var ctrlKey = e.ctrlKey, - keyCode = e.keyCode, - metaKey = e.metaKey; +/***/ 7218: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - var isModifierKey = ctrlKey || metaKey; +"use strict"; - if (isModifierKey) { - if (keyCode === _consts.keyCodes.C) { - this._graphics.resetTargetObjectForCopyPaste(); - } else if (keyCode === _consts.keyCodes.V) { - this._graphics.pasteObject(); - this.clearRedoStack(); - } else if (keyCode === _consts.keyCodes.Z) { - // There is no error message on shortcut when it's empty - this.undo()['catch'](function () {}); - } else if (keyCode === _consts.keyCodes.Y) { - // There is no error message on shortcut when it's empty - this.redo()['catch'](function () {}); +var $ = __webpack_require__(3085); +var IS_PURE = __webpack_require__(5546); +var FunctionName = __webpack_require__(2282); +var isCallable = __webpack_require__(6447); +var createIteratorConstructor = __webpack_require__(5148); +var getPrototypeOf = __webpack_require__(9341); +var setPrototypeOf = __webpack_require__(4469); +var setToStringTag = __webpack_require__(1284); +var createNonEnumerableProperty = __webpack_require__(8711); +var redefine = __webpack_require__(9482); +var wellKnownSymbol = __webpack_require__(8182); +var Iterators = __webpack_require__(7771); +var IteratorsCore = __webpack_require__(4413); + +var PROPER_FUNCTION_NAME = FunctionName.PROPER; +var CONFIGURABLE_FUNCTION_NAME = FunctionName.CONFIGURABLE; +var IteratorPrototype = IteratorsCore.IteratorPrototype; +var BUGGY_SAFARI_ITERATORS = IteratorsCore.BUGGY_SAFARI_ITERATORS; +var ITERATOR = wellKnownSymbol('iterator'); +var KEYS = 'keys'; +var VALUES = 'values'; +var ENTRIES = 'entries'; + +var returnThis = function () { return this; }; + +module.exports = function (Iterable, NAME, IteratorConstructor, next, DEFAULT, IS_SET, FORCED) { + createIteratorConstructor(IteratorConstructor, NAME, next); + + var getIterationMethod = function (KIND) { + if (KIND === DEFAULT && defaultIterator) return defaultIterator; + if (!BUGGY_SAFARI_ITERATORS && KIND in IterablePrototype) return IterablePrototype[KIND]; + switch (KIND) { + case KEYS: return function keys() { return new IteratorConstructor(this, KIND); }; + case VALUES: return function values() { return new IteratorConstructor(this, KIND); }; + case ENTRIES: return function entries() { return new IteratorConstructor(this, KIND); }; + } return function () { return new IteratorConstructor(this); }; + }; + + var TO_STRING_TAG = NAME + ' Iterator'; + var INCORRECT_VALUES_NAME = false; + var IterablePrototype = Iterable.prototype; + var nativeIterator = IterablePrototype[ITERATOR] + || IterablePrototype['@@iterator'] + || DEFAULT && IterablePrototype[DEFAULT]; + var defaultIterator = !BUGGY_SAFARI_ITERATORS && nativeIterator || getIterationMethod(DEFAULT); + var anyNativeIterator = NAME == 'Array' ? IterablePrototype.entries || nativeIterator : nativeIterator; + var CurrentIteratorPrototype, methods, KEY; + + // fix native + if (anyNativeIterator) { + CurrentIteratorPrototype = getPrototypeOf(anyNativeIterator.call(new Iterable())); + if (CurrentIteratorPrototype !== Object.prototype && CurrentIteratorPrototype.next) { + if (!IS_PURE && getPrototypeOf(CurrentIteratorPrototype) !== IteratorPrototype) { + if (setPrototypeOf) { + setPrototypeOf(CurrentIteratorPrototype, IteratorPrototype); + } else if (!isCallable(CurrentIteratorPrototype[ITERATOR])) { + redefine(CurrentIteratorPrototype, ITERATOR, returnThis); } } + // Set @@toStringTag to native iterators + setToStringTag(CurrentIteratorPrototype, TO_STRING_TAG, true, true); + if (IS_PURE) Iterators[TO_STRING_TAG] = returnThis; + } + } - var isDeleteKey = keyCode === _consts.keyCodes.BACKSPACE || keyCode === _consts.keyCodes.DEL; - var isRemoveReady = this._graphics.isReadyRemoveObject(); + // fix Array.prototype.{ values, @@iterator }.name in V8 / FF + if (PROPER_FUNCTION_NAME && DEFAULT == VALUES && nativeIterator && nativeIterator.name !== VALUES) { + if (!IS_PURE && CONFIGURABLE_FUNCTION_NAME) { + createNonEnumerableProperty(IterablePrototype, 'name', VALUES); + } else { + INCORRECT_VALUES_NAME = true; + defaultIterator = function values() { return nativeIterator.call(this); }; + } + } - if (!this.isColorPickerInputBoxEditing && isRemoveReady && isDeleteKey) { - e.preventDefault(); - this.removeActiveObject(); + // export additional methods + if (DEFAULT) { + methods = { + values: getIterationMethod(VALUES), + keys: IS_SET ? defaultIterator : getIterationMethod(KEYS), + entries: getIterationMethod(ENTRIES) + }; + if (FORCED) for (KEY in methods) { + if (BUGGY_SAFARI_ITERATORS || INCORRECT_VALUES_NAME || !(KEY in IterablePrototype)) { + redefine(IterablePrototype, KEY, methods[KEY]); } - } + } else $({ target: NAME, proto: true, forced: BUGGY_SAFARI_ITERATORS || INCORRECT_VALUES_NAME }, methods); + } - /** - * Remove Active Object - */ + // define iterator + if ((!IS_PURE || FORCED) && IterablePrototype[ITERATOR] !== defaultIterator) { + redefine(IterablePrototype, ITERATOR, defaultIterator, { name: DEFAULT }); + } + Iterators[NAME] = defaultIterator; - }, { - key: 'removeActiveObject', - value: function removeActiveObject() { - var activeObjectId = this._graphics.getActiveObjectIdForRemove(); + return methods; +}; - this.removeObject(activeObjectId); - } - /** - * mouse down event handler - * @param {Event} event - mouse down event - * @param {Object} originPointer - origin pointer - * @param {Number} originPointer.x x position - * @param {Number} originPointer.y y position - * @private - */ +/***/ }), - }, { - key: '_onMouseDown', - value: function _onMouseDown(event, originPointer) { - /** - * The mouse down event with position x, y on canvas - * @event ImageEditor#mousedown - * @param {Object} event - browser mouse event object - * @param {Object} originPointer origin pointer - * @param {Number} originPointer.x x position - * @param {Number} originPointer.y y position - * @example - * imageEditor.on('mousedown', function(event, originPointer) { - * console.log(event); - * console.log(originPointer); - * if (imageEditor.hasFilter('colorFilter')) { - * imageEditor.applyFilter('colorFilter', { - * x: parseInt(originPointer.x, 10), - * y: parseInt(originPointer.y, 10) - * }); - * } - * }); - */ +/***/ 1488: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - this.fire(_consts.eventNames.MOUSE_DOWN, event, originPointer); - } +var path = __webpack_require__(7545); +var hasOwn = __webpack_require__(4500); +var wrappedWellKnownSymbolModule = __webpack_require__(9207); +var defineProperty = __webpack_require__(2760).f; - /** - * Add a 'addObject' command - * @param {Object} obj - Fabric object - * @private - */ +module.exports = function (NAME) { + var Symbol = path.Symbol || (path.Symbol = {}); + if (!hasOwn(Symbol, NAME)) defineProperty(Symbol, NAME, { + value: wrappedWellKnownSymbolModule.f(NAME) + }); +}; - }, { - key: '_pushAddObjectCommand', - value: function _pushAddObjectCommand(obj) { - var command = _command2.default.create(_consts.commandNames.ADD_OBJECT, this._graphics, obj); - this._invoker.pushUndoStack(command); - } - /** - * Add a 'changeSelection' command - * @param {fabric.Object} obj - selection object - * @private - */ +/***/ }), - }, { - key: '_pushModifyObjectCommand', - value: function _pushModifyObjectCommand(obj) { - var _this3 = this; +/***/ 69: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - var type = obj.type; +var fails = __webpack_require__(6192); - var props = (0, _selectionModifyHelper.makeSelectionUndoData)(obj, function (item) { - return (0, _selectionModifyHelper.makeSelectionUndoDatum)(_this3._graphics.getObjectId(item), item, type === 'activeSelection'); - }); - var command = _command2.default.create(_consts.commandNames.CHANGE_SELECTION, this._graphics, props); - command.execute(this._graphics, props); +// Detect IE8's incomplete defineProperty implementation +module.exports = !fails(function () { + // eslint-disable-next-line es/no-object-defineproperty -- required for testing + return Object.defineProperty({}, 1, { get: function () { return 7; } })[1] != 7; +}); - this._invoker.pushUndoStack(command); - } - /** - * 'objectActivated' event handler - * @param {ObjectProps} props - object properties - * @private - */ +/***/ }), - }, { - key: '_onObjectActivated', - value: function _onObjectActivated(props) { - /** - * The event when object is selected(aka activated). - * @event ImageEditor#objectActivated - * @param {ObjectProps} objectProps - object properties - * @example - * imageEditor.on('objectActivated', function(props) { - * console.log(props); - * console.log(props.type); - * console.log(props.id); - * }); - */ - this.fire(_consts.eventNames.OBJECT_ACTIVATED, props); - } +/***/ 7449: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * 'objectMoved' event handler - * @param {ObjectProps} props - object properties - * @private - */ +var global = __webpack_require__(8576); +var isObject = __webpack_require__(5744); - }, { - key: '_onObjectMoved', - value: function _onObjectMoved(props) { - /** - * The event when object is moved - * @event ImageEditor#objectMoved - * @param {ObjectProps} props - object properties - * @example - * imageEditor.on('objectMoved', function(props) { - * console.log(props); - * console.log(props.type); - * }); - */ - this.fire(_consts.eventNames.OBJECT_MOVED, props); - } +var document = global.document; +// typeof document.createElement is 'object' in old IE +var EXISTS = isObject(document) && isObject(document.createElement); - /** - * 'objectScaled' event handler - * @param {ObjectProps} props - object properties - * @private - */ +module.exports = function (it) { + return EXISTS ? document.createElement(it) : {}; +}; - }, { - key: '_onObjectScaled', - value: function _onObjectScaled(props) { - /** - * The event when scale factor is changed - * @event ImageEditor#objectScaled - * @param {ObjectProps} props - object properties - * @example - * imageEditor.on('objectScaled', function(props) { - * console.log(props); - * console.log(props.type); - * }); - */ - this.fire(_consts.eventNames.OBJECT_SCALED, props); - } - /** - * 'objectRotated' event handler - * @param {ObjectProps} props - object properties - * @private - */ +/***/ }), - }, { - key: '_onObjectRotated', - value: function _onObjectRotated(props) { - /** - * The event when object angle is changed - * @event ImageEditor#objectRotated - * @param {ObjectProps} props - object properties - * @example - * imageEditor.on('objectRotated', function(props) { - * console.log(props); - * console.log(props.type); - * }); - */ - this.fire(_consts.eventNames.OBJECT_ROTATED, props); - } +/***/ 7365: +/***/ (function(module) { - /** - * Get current drawing mode - * @returns {string} - * @example - * // Image editor drawing mode - * // - * // NORMAL: 'NORMAL' - * // CROPPER: 'CROPPER' - * // FREE_DRAWING: 'FREE_DRAWING' - * // LINE_DRAWING: 'LINE_DRAWING' - * // TEXT: 'TEXT' - * // - * if (imageEditor.getDrawingMode() === 'FREE_DRAWING') { - * imageEditor.stopDrawingMode(); - * } - */ +// iterable DOM collections +// flag - `iterable` interface - 'entries', 'keys', 'values', 'forEach' methods +module.exports = { + CSSRuleList: 0, + CSSStyleDeclaration: 0, + CSSValueList: 0, + ClientRectList: 0, + DOMRectList: 0, + DOMStringList: 0, + DOMTokenList: 1, + DataTransferItemList: 0, + FileList: 0, + HTMLAllCollection: 0, + HTMLCollection: 0, + HTMLFormElement: 0, + HTMLSelectElement: 0, + MediaList: 0, + MimeTypeArray: 0, + NamedNodeMap: 0, + NodeList: 1, + PaintRequestList: 0, + Plugin: 0, + PluginArray: 0, + SVGLengthList: 0, + SVGNumberList: 0, + SVGPathSegList: 0, + SVGPointList: 0, + SVGStringList: 0, + SVGTransformList: 0, + SourceBufferList: 0, + StyleSheetList: 0, + TextTrackCueList: 0, + TextTrackList: 0, + TouchList: 0 +}; - }, { - key: 'getDrawingMode', - value: function getDrawingMode() { - return this._graphics.getDrawingMode(); - } - /** - * Clear all objects - * @returns {Promise} - * @example - * imageEditor.clearObjects(); - */ +/***/ }), - }, { - key: 'clearObjects', - value: function clearObjects() { - return this.execute(_consts.commandNames.CLEAR_OBJECTS); - } +/***/ 2957: +/***/ (function(module) { - /** - * Deactivate all objects - * @example - * imageEditor.deactivateAll(); - */ +module.exports = typeof window == 'object'; - }, { - key: 'deactivateAll', - value: function deactivateAll() { - this._graphics.deactivateAll(); - this._graphics.renderAll(); - } - /** - * discard selction - * @example - * imageEditor.discardSelection(); - */ +/***/ }), - }, { - key: 'discardSelection', - value: function discardSelection() { - this._graphics.discardSelection(); - } +/***/ 9347: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * selectable status change - * @param {boolean} selectable - selectable status - * @example - * imageEditor.changeSelectableAll(false); // or true - */ +var userAgent = __webpack_require__(8989); +var global = __webpack_require__(8576); - }, { - key: 'changeSelectableAll', - value: function changeSelectableAll(selectable) { - this._graphics.changeSelectableAll(selectable); - } +module.exports = /ipad|iphone|ipod/i.test(userAgent) && global.Pebble !== undefined; - /** - * Init history - */ - }, { - key: '_initHistory', - value: function _initHistory() { - if (this.ui) { - this.ui.initHistory(); - } - } +/***/ }), - /** - * Clear history - */ +/***/ 9536: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: '_clearHistory', - value: function _clearHistory() { - if (this.ui) { - this.ui.clearHistory(); - } - } +var userAgent = __webpack_require__(8989); - /** - * Invoke command - * @param {String} commandName - Command name - * @param {...*} args - Arguments for creating command - * @returns {Promise} - * @private - */ +module.exports = /(?:ipad|iphone|ipod).*applewebkit/i.test(userAgent); - }, { - key: 'execute', - value: function execute(commandName) { - var _invoker; - for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { - args[_key - 1] = arguments[_key]; - } +/***/ }), - // Inject an Graphics instance as first parameter - var theArgs = [this._graphics].concat(args); +/***/ 224: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - return (_invoker = this._invoker).execute.apply(_invoker, [commandName].concat(theArgs)); - } +var classof = __webpack_require__(9272); +var global = __webpack_require__(8576); - /** - * Invoke command - * @param {String} commandName - Command name - * @param {...*} args - Arguments for creating command - * @returns {Promise} - * @private - */ +module.exports = classof(global.process) == 'process'; - }, { - key: 'executeSilent', - value: function executeSilent(commandName) { - var _invoker2; - for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { - args[_key2 - 1] = arguments[_key2]; - } +/***/ }), - // Inject an Graphics instance as first parameter - var theArgs = [this._graphics].concat(args); +/***/ 5914: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - return (_invoker2 = this._invoker).executeSilent.apply(_invoker2, [commandName].concat(theArgs)); - } +var userAgent = __webpack_require__(8989); - /** - * Undo - * @param {number} [iterationCount=1] - Iteration count of undo - * @returns {Promise} - * @example - * imageEditor.undo(); - */ +module.exports = /web0s(?!.*chrome)/i.test(userAgent); - }, { - key: 'undo', - value: function undo() { - var _this4 = this; - var iterationCount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1; +/***/ }), - var promise = _util.Promise.resolve(); +/***/ 8989: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - for (var i = 0; i < iterationCount; i += 1) { - promise = promise.then(function () { - return _this4._invoker.undo(); - }); - } +var getBuiltIn = __webpack_require__(150); - return promise; - } +module.exports = getBuiltIn('navigator', 'userAgent') || ''; - /** - * Redo - * @param {number} [iterationCount=1] - Iteration count of redo - * @returns {Promise} - * @example - * imageEditor.redo(); - */ - }, { - key: 'redo', - value: function redo() { - var _this5 = this; +/***/ }), - var iterationCount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1; +/***/ 4218: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - var promise = _util.Promise.resolve(); +var global = __webpack_require__(8576); +var userAgent = __webpack_require__(8989); - for (var i = 0; i < iterationCount; i += 1) { - promise = promise.then(function () { - return _this5._invoker.redo(); - }); - } +var process = global.process; +var Deno = global.Deno; +var versions = process && process.versions || Deno && Deno.version; +var v8 = versions && versions.v8; +var match, version; - return promise; - } +if (v8) { + match = v8.split('.'); + version = match[0] < 4 ? 1 : match[0] + match[1]; +} else if (userAgent) { + match = userAgent.match(/Edge\/(\d+)/); + if (!match || match[1] >= 74) { + match = userAgent.match(/Chrome\/(\d+)/); + if (match) version = match[1]; + } +} - /** - * Zoom - * @param {number} x - x axis of center point for zoom - * @param {number} y - y axis of center point for zoom - * @param {number} zoomLevel - level of zoom(1.0 ~ 5.0) - */ +module.exports = version && +version; - }, { - key: 'zoom', - value: function zoom(_ref2) { - var x = _ref2.x, - y = _ref2.y, - zoomLevel = _ref2.zoomLevel; - this._graphics.zoom({ x: x, y: y }, zoomLevel); - } +/***/ }), - /** - * Reset zoom. Change zoom level to 1.0 - */ +/***/ 5607: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'resetZoom', - value: function resetZoom() { - this._graphics.resetZoom(); - } +var path = __webpack_require__(7545); - /** - * Load image from file - * @param {File} imgFile - Image file - * @param {string} [imageName] - imageName - * @returns {Promise} - * @example - * imageEditor.loadImageFromFile(file).then(result => { - * console.log('old : ' + result.oldWidth + ', ' + result.oldHeight); - * console.log('new : ' + result.newWidth + ', ' + result.newHeight); - * }); - */ +module.exports = function (CONSTRUCTOR) { + return path[CONSTRUCTOR + 'Prototype']; +}; - }, { - key: 'loadImageFromFile', - value: function loadImageFromFile(imgFile, imageName) { - if (!imgFile) { - return _util.Promise.reject(_consts.rejectMessages.invalidParameters); - } - var imgUrl = URL.createObjectURL(imgFile); - imageName = imageName || imgFile.name; +/***/ }), - return this.loadImageFromURL(imgUrl, imageName).then(function (value) { - URL.revokeObjectURL(imgFile); +/***/ 2952: +/***/ (function(module) { - return value; - }); - } +// IE8- don't enum bug keys +module.exports = [ + 'constructor', + 'hasOwnProperty', + 'isPrototypeOf', + 'propertyIsEnumerable', + 'toLocaleString', + 'toString', + 'valueOf' +]; - /** - * Load image from url - * @param {string} url - File url - * @param {string} imageName - imageName - * @returns {Promise} - * @example - * imageEditor.loadImageFromURL('http://url/testImage.png', 'lena').then(result => { - * console.log('old : ' + result.oldWidth + ', ' + result.oldHeight); - * console.log('new : ' + result.newWidth + ', ' + result.newHeight); - * }); - */ - }, { - key: 'loadImageFromURL', - value: function loadImageFromURL(url, imageName) { - if (!imageName || !url) { - return _util.Promise.reject(_consts.rejectMessages.invalidParameters); - } +/***/ }), - return this.execute(_consts.commandNames.LOAD_IMAGE, imageName, url); - } +/***/ 3085: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Add image object on canvas - * @param {string} imgUrl - Image url to make object - * @returns {Promise} - * @example - * imageEditor.addImageObject('path/fileName.jpg').then(objectProps => { - * console.log(ojectProps.id); - * }); - */ +"use strict"; - }, { - key: 'addImageObject', - value: function addImageObject(imgUrl) { - if (!imgUrl) { - return _util.Promise.reject(_consts.rejectMessages.invalidParameters); - } +var global = __webpack_require__(8576); +var isCallable = __webpack_require__(6447); +var getOwnPropertyDescriptor = __webpack_require__(5141).f; +var isForced = __webpack_require__(9245); +var path = __webpack_require__(7545); +var bind = __webpack_require__(8043); +var createNonEnumerableProperty = __webpack_require__(8711); +var hasOwn = __webpack_require__(4500); - return this.execute(_consts.commandNames.ADD_IMAGE_OBJECT, imgUrl); - } +var wrapConstructor = function (NativeConstructor) { + var Wrapper = function (a, b, c) { + if (this instanceof NativeConstructor) { + switch (arguments.length) { + case 0: return new NativeConstructor(); + case 1: return new NativeConstructor(a); + case 2: return new NativeConstructor(a, b); + } return new NativeConstructor(a, b, c); + } return NativeConstructor.apply(this, arguments); + }; + Wrapper.prototype = NativeConstructor.prototype; + return Wrapper; +}; - /** - * Start a drawing mode. If the current mode is not 'NORMAL', 'stopDrawingMode()' will be called first. - * @param {String} mode Can be one of 'CROPPER', 'FREE_DRAWING', 'LINE_DRAWING', 'TEXT', 'SHAPE' - * @param {Object} [option] parameters of drawing mode, it's available with 'FREE_DRAWING', 'LINE_DRAWING' - * @param {Number} [option.width] brush width - * @param {String} [option.color] brush color - * @param {Object} [option.arrowType] arrow decorate - * @param {string} [option.arrowType.tail] arrow decorate for tail. 'chevron' or 'triangle' - * @param {string} [option.arrowType.head] arrow decorate for head. 'chevron' or 'triangle' - * @returns {boolean} true if success or false - * @example - * imageEditor.startDrawingMode('FREE_DRAWING', { - * width: 10, - * color: 'rgba(255,0,0,0.5)' - * }); - * imageEditor.startDrawingMode('LINE_DRAWING', { - * width: 10, - * color: 'rgba(255,0,0,0.5)', - * arrowType: { - * tail: 'chevron' // triangle - * } - * }); - * - */ +/* + options.target - name of the target object + options.global - target is the global object + options.stat - export as static methods of target + options.proto - export as prototype methods of target + options.real - real prototype method for the `pure` version + options.forced - export even if the native feature is available + options.bind - bind methods to the target, required for the `pure` version + options.wrap - wrap constructors to preventing global pollution, required for the `pure` version + options.unsafe - use the simple assignment of property instead of delete + defineProperty + options.sham - add a flag to not completely full polyfills + options.enumerable - export as enumerable property + options.noTargetGet - prevent calling a getter on target + options.name - the .name of the function if it does not match the key +*/ +module.exports = function (options, source) { + var TARGET = options.target; + var GLOBAL = options.global; + var STATIC = options.stat; + var PROTO = options.proto; - }, { - key: 'startDrawingMode', - value: function startDrawingMode(mode, option) { - return this._graphics.startDrawingMode(mode, option); - } + var nativeSource = GLOBAL ? global : STATIC ? global[TARGET] : (global[TARGET] || {}).prototype; - /** - * Stop the current drawing mode and back to the 'NORMAL' mode - * @example - * imageEditor.stopDrawingMode(); - */ + var target = GLOBAL ? path : path[TARGET] || createNonEnumerableProperty(path, TARGET, {})[TARGET]; + var targetPrototype = target.prototype; - }, { - key: 'stopDrawingMode', - value: function stopDrawingMode() { - this._graphics.stopDrawingMode(); - } + var FORCED, USE_NATIVE, VIRTUAL_PROTOTYPE; + var key, sourceProperty, targetProperty, nativeProperty, resultProperty, descriptor; - /** - * Crop this image with rect - * @param {Object} rect crop rect - * @param {Number} rect.left left position - * @param {Number} rect.top top position - * @param {Number} rect.width width - * @param {Number} rect.height height - * @returns {Promise} - * @example - * imageEditor.crop(imageEditor.getCropzoneRect()); - */ + for (key in source) { + FORCED = isForced(GLOBAL ? key : TARGET + (STATIC ? '.' : '#') + key, options.forced); + // contains in native + USE_NATIVE = !FORCED && nativeSource && hasOwn(nativeSource, key); - }, { - key: 'crop', - value: function crop(rect) { - var data = this._graphics.getCroppedImageData(rect); - if (!data) { - return _util.Promise.reject(_consts.rejectMessages.invalidParameters); - } + targetProperty = target[key]; - return this.loadImageFromURL(data.url, data.imageName); - } + if (USE_NATIVE) if (options.noTargetGet) { + descriptor = getOwnPropertyDescriptor(nativeSource, key); + nativeProperty = descriptor && descriptor.value; + } else nativeProperty = nativeSource[key]; - /** - * Get the cropping rect - * @returns {Object} {{left: number, top: number, width: number, height: number}} rect - */ + // export native or implementation + sourceProperty = (USE_NATIVE && nativeProperty) ? nativeProperty : source[key]; - }, { - key: 'getCropzoneRect', - value: function getCropzoneRect() { - return this._graphics.getCropzoneRect(); - } + if (USE_NATIVE && typeof targetProperty === typeof sourceProperty) continue; - /** - * Set the cropping rect - * @param {number} [mode] crop rect mode [1, 1.5, 1.3333333333333333, 1.25, 1.7777777777777777] - */ + // bind timers to global for call from export context + if (options.bind && USE_NATIVE) resultProperty = bind(sourceProperty, global); + // wrap global constructors for prevent changs in this version + else if (options.wrap && USE_NATIVE) resultProperty = wrapConstructor(sourceProperty); + // make static versions for prototype methods + else if (PROTO && isCallable(sourceProperty)) resultProperty = bind(Function.call, sourceProperty); + // default case + else resultProperty = sourceProperty; - }, { - key: 'setCropzoneRect', - value: function setCropzoneRect(mode) { - this._graphics.setCropzoneRect(mode); + // add a flag to not completely full polyfills + if (options.sham || (sourceProperty && sourceProperty.sham) || (targetProperty && targetProperty.sham)) { + createNonEnumerableProperty(resultProperty, 'sham', true); } - /** - * Flip - * @returns {Promise} - * @param {string} type - 'flipX' or 'flipY' or 'reset' - * @returns {Promise} - * @private - */ + createNonEnumerableProperty(target, key, resultProperty); - }, { - key: '_flip', - value: function _flip(type) { - return this.execute(_consts.commandNames.FLIP_IMAGE, type); + if (PROTO) { + VIRTUAL_PROTOTYPE = TARGET + 'Prototype'; + if (!hasOwn(path, VIRTUAL_PROTOTYPE)) { + createNonEnumerableProperty(path, VIRTUAL_PROTOTYPE, {}); + } + // export virtual prototype methods + createNonEnumerableProperty(path[VIRTUAL_PROTOTYPE], key, sourceProperty); + // export real prototype methods + if (options.real && targetPrototype && !targetPrototype[key]) { + createNonEnumerableProperty(targetPrototype, key, sourceProperty); + } } + } +}; - /** - * Flip x - * @returns {Promise} - * @example - * imageEditor.flipX().then((status => { - * console.log('flipX: ', status.flipX); - * console.log('flipY: ', status.flipY); - * console.log('angle: ', status.angle); - * }).catch(message => { - * console.log('error: ', message); - * }); - */ - }, { - key: 'flipX', - value: function flipX() { - return this._flip('flipX'); - } +/***/ }), - /** - * Flip y - * @returns {Promise} - * @example - * imageEditor.flipY().then(status => { - * console.log('flipX: ', status.flipX); - * console.log('flipY: ', status.flipY); - * console.log('angle: ', status.angle); - * }).catch(message => { - * console.log('error: ', message); - * }); - */ +/***/ 6192: +/***/ (function(module) { - }, { - key: 'flipY', - value: function flipY() { - return this._flip('flipY'); - } +module.exports = function (exec) { + try { + return !!exec(); + } catch (error) { + return true; + } +}; - /** - * Reset flip - * @returns {Promise} - * @example - * imageEditor.resetFlip().then(status => { - * console.log('flipX: ', status.flipX); - * console.log('flipY: ', status.flipY); - * console.log('angle: ', status.angle); - * }).catch(message => { - * console.log('error: ', message); - * });; - */ - }, { - key: 'resetFlip', - value: function resetFlip() { - return this._flip('reset'); - } +/***/ }), - /** - * @param {string} type - 'rotate' or 'setAngle' - * @param {number} angle - angle value (degree) - * @param {boolean} isSilent - is silent execution or not - * @returns {Promise} - * @private - */ +/***/ 8043: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: '_rotate', - value: function _rotate(type, angle, isSilent) { - var result = null; +var aCallable = __webpack_require__(6235); - if (isSilent) { - result = this.executeSilent(_consts.commandNames.ROTATE_IMAGE, type, angle); - } else { - result = this.execute(_consts.commandNames.ROTATE_IMAGE, type, angle); - } +// optional / simple context binding +module.exports = function (fn, that, length) { + aCallable(fn); + if (that === undefined) return fn; + switch (length) { + case 0: return function () { + return fn.call(that); + }; + case 1: return function (a) { + return fn.call(that, a); + }; + case 2: return function (a, b) { + return fn.call(that, a, b); + }; + case 3: return function (a, b, c) { + return fn.call(that, a, b, c); + }; + } + return function (/* ...args */) { + return fn.apply(that, arguments); + }; +}; - return result; - } - /** - * Rotate image - * @returns {Promise} - * @param {number} angle - Additional angle to rotate image - * @param {boolean} isSilent - is silent execution or not - * @returns {Promise} - * @example - * imageEditor.rotate(10); // angle = 10 - * imageEditor.rotate(10); // angle = 20 - * imageEditor.rotate(5); // angle = 5 - * imageEditor.rotate(-95); // angle = -90 - * imageEditor.rotate(10).then(status => { - * console.log('angle: ', status.angle); - * })).catch(message => { - * console.log('error: ', message); - * }); - */ +/***/ }), - }, { - key: 'rotate', - value: function rotate(angle, isSilent) { - return this._rotate('rotate', angle, isSilent); - } +/***/ 6782: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Set angle - * @param {number} angle - Angle of image - * @param {boolean} isSilent - is silent execution or not - * @returns {Promise} - * @example - * imageEditor.setAngle(10); // angle = 10 - * imageEditor.rotate(10); // angle = 20 - * imageEditor.setAngle(5); // angle = 5 - * imageEditor.rotate(50); // angle = 55 - * imageEditor.setAngle(-40); // angle = -40 - * imageEditor.setAngle(10).then(status => { - * console.log('angle: ', status.angle); - * })).catch(message => { - * console.log('error: ', message); - * }); - */ +"use strict"; - }, { - key: 'setAngle', - value: function setAngle(angle, isSilent) { - return this._rotate('setAngle', angle, isSilent); - } +var aCallable = __webpack_require__(6235); +var isObject = __webpack_require__(5744); - /** - * Set drawing brush - * @param {Object} option brush option - * @param {Number} option.width width - * @param {String} option.color color like 'FFFFFF', 'rgba(0, 0, 0, 0.5)' - * @example - * imageEditor.startDrawingMode('FREE_DRAWING'); - * imageEditor.setBrush({ - * width: 12, - * color: 'rgba(0, 0, 0, 0.5)' - * }); - * imageEditor.setBrush({ - * width: 8, - * color: 'FFFFFF' - * }); - */ +var slice = [].slice; +var factories = {}; - }, { - key: 'setBrush', - value: function setBrush(option) { - this._graphics.setBrush(option); - } +var construct = function (C, argsLength, args) { + if (!(argsLength in factories)) { + for (var list = [], i = 0; i < argsLength; i++) list[i] = 'a[' + i + ']'; + // eslint-disable-next-line no-new-func -- we have no proper alternatives, IE8- only + factories[argsLength] = Function('C,a', 'return new C(' + list.join(',') + ')'); + } return factories[argsLength](C, args); +}; - /** - * Set states of current drawing shape - * @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle') - * @param {Object} [options] - Shape options - * @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or - * Shape foreground color (ex: '#fff', 'transparent') - * @param {string} [options.stoke] - Shape outline color - * @param {number} [options.strokeWidth] - Shape outline width - * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) - * @param {number} [options.height] - Height value (When type option is 'rect', this options can use) - * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) - * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) - * @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not - * @example - * imageEditor.setDrawingShape('rect', { - * fill: 'red', - * width: 100, - * height: 200 - * }); - * @example - * imageEditor.setDrawingShape('rect', { - * fill: { - * type: 'filter', - * filter: [{blur: 0.3}, {pixelate: 20}] - * }, - * width: 100, - * height: 200 - * }); - * @example - * imageEditor.setDrawingShape('circle', { - * fill: 'transparent', - * stroke: 'blue', - * strokeWidth: 3, - * rx: 10, - * ry: 100 - * }); - * @example - * imageEditor.setDrawingShape('triangle', { // When resizing, the shape keep the 1:1 ratio - * width: 1, - * height: 1, - * isRegular: true - * }); - * @example - * imageEditor.setDrawingShape('circle', { // When resizing, the shape keep the 1:1 ratio - * rx: 10, - * ry: 10, - * isRegular: true - * }); - */ +// `Function.prototype.bind` method implementation +// https://tc39.es/ecma262/#sec-function.prototype.bind +module.exports = Function.bind || function bind(that /* , ...args */) { + var fn = aCallable(this); + var partArgs = slice.call(arguments, 1); + var boundFunction = function bound(/* args... */) { + var args = partArgs.concat(slice.call(arguments)); + return this instanceof boundFunction ? construct(fn, args.length, args) : fn.apply(that, args); + }; + if (isObject(fn.prototype)) boundFunction.prototype = fn.prototype; + return boundFunction; +}; - }, { - key: 'setDrawingShape', - value: function setDrawingShape(type, options) { - this._graphics.setDrawingShape(type, options); - } - }, { - key: 'setDrawingIcon', - value: function setDrawingIcon(type, iconColor) { - this._graphics.setIconStyle(type, iconColor); - } - /** - * Add shape - * @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle') - * @param {Object} options - Shape options - * @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or - * Shape foreground color (ex: '#fff', 'transparent') - * @param {string} [options.stroke] - Shape outline color - * @param {number} [options.strokeWidth] - Shape outline width - * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) - * @param {number} [options.height] - Height value (When type option is 'rect', this options can use) - * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) - * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) - * @param {number} [options.left] - Shape x position - * @param {number} [options.top] - Shape y position - * @param {boolean} [options.isRegular] - Whether resizing shape has 1:1 ratio or not - * @returns {Promise} - * @example - * imageEditor.addShape('rect', { - * fill: 'red', - * stroke: 'blue', - * strokeWidth: 3, - * width: 100, - * height: 200, - * left: 10, - * top: 10, - * isRegular: true - * }); - * @example - * imageEditor.addShape('circle', { - * fill: 'red', - * stroke: 'blue', - * strokeWidth: 3, - * rx: 10, - * ry: 100, - * isRegular: false - * }).then(objectProps => { - * console.log(objectProps.id); - * }); - * @example - * imageEditor.addShape('rect', { - * fill: { - * type: 'filter', - * filter: [{blur: 0.3}, {pixelate: 20}] - * }, - * stroke: 'blue', - * strokeWidth: 3, - * rx: 10, - * ry: 100, - * isRegular: false - * }).then(objectProps => { - * console.log(objectProps.id); - * }); - */ +/***/ }), - }, { - key: 'addShape', - value: function addShape(type, options) { - options = options || {}; +/***/ 2282: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - this._setPositions(options); +var DESCRIPTORS = __webpack_require__(69); +var hasOwn = __webpack_require__(4500); - return this.execute(_consts.commandNames.ADD_SHAPE, type, options); - } +var FunctionPrototype = Function.prototype; +// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe +var getDescriptor = DESCRIPTORS && Object.getOwnPropertyDescriptor; - /** - * Change shape - * @param {number} id - object id - * @param {Object} options - Shape options - * @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or - * Shape foreground color (ex: '#fff', 'transparent') - * @param {string} [options.stroke] - Shape outline color - * @param {number} [options.strokeWidth] - Shape outline width - * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) - * @param {number} [options.height] - Height value (When type option is 'rect', this options can use) - * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) - * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) - * @param {boolean} [options.isRegular] - Whether resizing shape has 1:1 ratio or not - * @param {boolean} isSilent - is silent execution or not - * @returns {Promise} - * @example - * // call after selecting shape object on canvas - * imageEditor.changeShape(id, { // change rectagle or triangle - * fill: 'red', - * stroke: 'blue', - * strokeWidth: 3, - * width: 100, - * height: 200 - * }); - * @example - * // call after selecting shape object on canvas - * imageEditor.changeShape(id, { // change circle - * fill: 'red', - * stroke: 'blue', - * strokeWidth: 3, - * rx: 10, - * ry: 100 - * }); - */ +var EXISTS = hasOwn(FunctionPrototype, 'name'); +// additional protection from minified / mangled / dropped function names +var PROPER = EXISTS && (function something() { /* empty */ }).name === 'something'; +var CONFIGURABLE = EXISTS && (!DESCRIPTORS || (DESCRIPTORS && getDescriptor(FunctionPrototype, 'name').configurable)); - }, { - key: 'changeShape', - value: function changeShape(id, options, isSilent) { - var executeMethodName = isSilent ? 'executeSilent' : 'execute'; +module.exports = { + EXISTS: EXISTS, + PROPER: PROPER, + CONFIGURABLE: CONFIGURABLE +}; - return this[executeMethodName](_consts.commandNames.CHANGE_SHAPE, id, options); - } - /** - * Add text on image - * @param {string} text - Initial input text - * @param {Object} [options] Options for generating text - * @param {Object} [options.styles] Initial styles - * @param {string} [options.styles.fill] Color - * @param {string} [options.styles.fontFamily] Font type for text - * @param {number} [options.styles.fontSize] Size - * @param {string} [options.styles.fontStyle] Type of inclination (normal / italic) - * @param {string} [options.styles.fontWeight] Type of thicker or thinner looking (normal / bold) - * @param {string} [options.styles.textAlign] Type of text align (left / center / right) - * @param {string} [options.styles.textDecoration] Type of line (underline / line-through / overline) - * @param {{x: number, y: number}} [options.position] - Initial position - * @param {boolean} [options.autofocus] - text autofocus, default is true - * @returns {Promise} - * @example - * imageEditor.addText('init text'); - * @example - * imageEditor.addText('init text', { - * styles: { - * fill: '#000', - * fontSize: 20, - * fontWeight: 'bold' - * }, - * position: { - * x: 10, - * y: 10 - * } - * }).then(objectProps => { - * console.log(objectProps.id); - * }); - */ +/***/ }), - }, { - key: 'addText', - value: function addText(text, options) { - text = text || ''; - options = options || {}; +/***/ 150: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - return this.execute(_consts.commandNames.ADD_TEXT, text, options); - } +var path = __webpack_require__(7545); +var global = __webpack_require__(8576); +var isCallable = __webpack_require__(6447); - /** - * Change contents of selected text object on image - * @param {number} id - object id - * @param {string} text - Changing text - * @returns {Promise} - * @example - * imageEditor.changeText(id, 'change text'); - */ +var aFunction = function (variable) { + return isCallable(variable) ? variable : undefined; +}; - }, { - key: 'changeText', - value: function changeText(id, text) { - text = text || ''; +module.exports = function (namespace, method) { + return arguments.length < 2 ? aFunction(path[namespace]) || aFunction(global[namespace]) + : path[namespace] && path[namespace][method] || global[namespace] && global[namespace][method]; +}; - return this.execute(_consts.commandNames.CHANGE_TEXT, id, text); - } - /** - * Set style - * @param {number} id - object id - * @param {Object} styleObj - text styles - * @param {string} [styleObj.fill] Color - * @param {string} [styleObj.fontFamily] Font type for text - * @param {number} [styleObj.fontSize] Size - * @param {string} [styleObj.fontStyle] Type of inclination (normal / italic) - * @param {string} [styleObj.fontWeight] Type of thicker or thinner looking (normal / bold) - * @param {string} [styleObj.textAlign] Type of text align (left / center / right) - * @param {string} [styleObj.textDecoration] Type of line (underline / line-through / overline) - * @param {boolean} isSilent - is silent execution or not - * @returns {Promise} - * @example - * imageEditor.changeTextStyle(id, { - * fontStyle: 'italic' - * }); - */ +/***/ }), - }, { - key: 'changeTextStyle', - value: function changeTextStyle(id, styleObj, isSilent) { - var executeMethodName = isSilent ? 'executeSilent' : 'execute'; +/***/ 8703: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - return this[executeMethodName](_consts.commandNames.CHANGE_TEXT_STYLE, id, styleObj); - } +var classof = __webpack_require__(4696); +var getMethod = __webpack_require__(5037); +var Iterators = __webpack_require__(7771); +var wellKnownSymbol = __webpack_require__(8182); - /** - * change text mode - * @param {string} type - change type - * @private - */ +var ITERATOR = wellKnownSymbol('iterator'); - }, { - key: '_changeActivateMode', - value: function _changeActivateMode(type) { - if (type !== 'ICON' && this.getDrawingMode() !== type) { - this.startDrawingMode(type); - } - } +module.exports = function (it) { + if (it != undefined) return getMethod(it, ITERATOR) + || getMethod(it, '@@iterator') + || Iterators[classof(it)]; +}; - /** - * 'textChanged' event handler - * @param {Object} target - changed text object - * @private - */ - }, { - key: '_onTextChanged', - value: function _onTextChanged(target) { - this.fire(_consts.eventNames.TEXT_CHANGED, target); - } +/***/ }), - /** - * 'iconCreateResize' event handler - * @param {Object} originPointer origin pointer - * @param {Number} originPointer.x x position - * @param {Number} originPointer.y y position - * @private - */ +/***/ 1669: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: '_onIconCreateResize', - value: function _onIconCreateResize(originPointer) { - this.fire(_consts.eventNames.ICON_CREATE_RESIZE, originPointer); - } +var aCallable = __webpack_require__(6235); +var anObject = __webpack_require__(1138); +var getIteratorMethod = __webpack_require__(8703); - /** - * 'iconCreateEnd' event handler - * @param {Object} originPointer origin pointer - * @param {Number} originPointer.x x position - * @param {Number} originPointer.y y position - * @private - */ +module.exports = function (argument, usingIterator) { + var iteratorMethod = arguments.length < 2 ? getIteratorMethod(argument) : usingIterator; + if (aCallable(iteratorMethod)) return anObject(iteratorMethod.call(argument)); + throw TypeError(String(argument) + ' is not iterable'); +}; - }, { - key: '_onIconCreateEnd', - value: function _onIconCreateEnd(originPointer) { - this.fire(_consts.eventNames.ICON_CREATE_END, originPointer); - } - /** - * 'textEditing' event handler - * @private - */ +/***/ }), - }, { - key: '_onTextEditing', - value: function _onTextEditing() { - /** - * The event which starts to edit text object - * @event ImageEditor#textEditing - * @example - * imageEditor.on('textEditing', function() { - * console.log('text editing'); - * }); - */ +/***/ 5037: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - this.fire(_consts.eventNames.TEXT_EDITING); - } +var aCallable = __webpack_require__(6235); - /** - * Mousedown event handler in case of 'TEXT' drawing mode - * @param {fabric.Event} event - Current mousedown event object - * @private - */ +// `GetMethod` abstract operation +// https://tc39.es/ecma262/#sec-getmethod +module.exports = function (V, P) { + var func = V[P]; + return func == null ? undefined : aCallable(func); +}; - }, { - key: '_onAddText', - value: function _onAddText(event) { - /** - * The event when 'TEXT' drawing mode is enabled and click non-object area. - * @event ImageEditor#addText - * @param {Object} pos - * @param {Object} pos.originPosition - Current position on origin canvas - * @param {Number} pos.originPosition.x - x - * @param {Number} pos.originPosition.y - y - * @param {Object} pos.clientPosition - Current position on client area - * @param {Number} pos.clientPosition.x - x - * @param {Number} pos.clientPosition.y - y - * @example - * imageEditor.on('addText', function(pos) { - * console.log('text position on canvas: ' + pos.originPosition); - * console.log('text position on brwoser: ' + pos.clientPosition); - * }); - */ - this.fire(_consts.eventNames.ADD_TEXT, { - originPosition: event.originPosition, - clientPosition: event.clientPosition - }); - } +/***/ }), - /** - * 'addObject' event handler - * @param {Object} objectProps added object properties - * @private - */ +/***/ 8576: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: '_onAddObject', - value: function _onAddObject(objectProps) { - var obj = this._graphics.getObject(objectProps.id); - this._invoker.fire(_consts.eventNames.EXECUTE_COMMAND, (0, _util.getObjectType)(obj.type)); - this._pushAddObjectCommand(obj); - } +var check = function (it) { + return it && it.Math == Math && it; +}; - /** - * 'objectAdded' event handler - * @param {Object} objectProps added object properties - * @private - */ +// https://github.com/zloirock/core-js/issues/86#issuecomment-115759028 +module.exports = + // eslint-disable-next-line es/no-global-this -- safe + check(typeof globalThis == 'object' && globalThis) || + check(typeof window == 'object' && window) || + // eslint-disable-next-line no-restricted-globals -- safe + check(typeof self == 'object' && self) || + check(typeof __webpack_require__.g == 'object' && __webpack_require__.g) || + // eslint-disable-next-line no-new-func -- fallback + (function () { return this; })() || Function('return this')(); - }, { - key: '_onObjectAdded', - value: function _onObjectAdded(objectProps) { - /** - * The event when object added - * @event ImageEditor#objectAdded - * @param {ObjectProps} props - object properties - * @example - * imageEditor.on('objectAdded', function(props) { - * console.log(props); - * }); - */ - this.fire(OBJECT_ADDED, objectProps); - /** - * The event when object added (deprecated) - * @event ImageEditor#addObjectAfter - * @param {ObjectProps} props - object properties - * @deprecated - */ - this.fire(ADD_OBJECT_AFTER, objectProps); - } +/***/ }), - /** - * 'objectModified' event handler - * @param {fabric.Object} obj - selection object - * @private - */ +/***/ 4500: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: '_onObjectModified', - value: function _onObjectModified(obj) { - if (obj.type !== _consts.OBJ_TYPE.CROPZONE) { - this._invoker.fire(_consts.eventNames.EXECUTE_COMMAND, (0, _util.getObjectType)(obj.type)); - this._pushModifyObjectCommand(obj); - } - } +var toObject = __webpack_require__(1795); - /** - * 'selectionCleared' event handler - * @private - */ +var hasOwnProperty = {}.hasOwnProperty; - }, { - key: '_selectionCleared', - value: function _selectionCleared() { - this.fire(SELECTION_CLEARED); - } +// `HasOwnProperty` abstract operation +// https://tc39.es/ecma262/#sec-hasownproperty +module.exports = Object.hasOwn || function hasOwn(it, key) { + return hasOwnProperty.call(toObject(it), key); +}; - /** - * 'selectionCreated' event handler - * @param {Object} eventTarget - Fabric object - * @private - */ - }, { - key: '_selectionCreated', - value: function _selectionCreated(eventTarget) { - this.fire(SELECTION_CREATED, eventTarget); - } +/***/ }), - /** - * Register custom icons - * @param {{iconType: string, pathValue: string}} infos - Infos to register icons - * @example - * imageEditor.registerIcons({ - * customIcon: 'M 0 0 L 20 20 L 10 10 Z', - * customArrow: 'M 60 0 L 120 60 H 90 L 75 45 V 180 H 45 V 45 L 30 60 H 0 Z' - * }); - */ +/***/ 4535: +/***/ (function(module) { - }, { - key: 'registerIcons', - value: function registerIcons(infos) { - this._graphics.registerPaths(infos); - } +module.exports = {}; - /** - * Change canvas cursor type - * @param {string} cursorType - cursor type - * @example - * imageEditor.changeCursor('crosshair'); - */ - }, { - key: 'changeCursor', - value: function changeCursor(cursorType) { - this._graphics.changeCursor(cursorType); - } +/***/ }), - /** - * Add icon on canvas - * @param {string} type - Icon type ('arrow', 'cancel', custom icon name) - * @param {Object} options - Icon options - * @param {string} [options.fill] - Icon foreground color - * @param {number} [options.left] - Icon x position - * @param {number} [options.top] - Icon y position - * @returns {Promise} - * @example - * imageEditor.addIcon('arrow'); // The position is center on canvas - * @example - * imageEditor.addIcon('arrow', { - * left: 100, - * top: 100 - * }).then(objectProps => { - * console.log(objectProps.id); - * }); - */ +/***/ 3681: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'addIcon', - value: function addIcon(type, options) { - options = options || {}; +var global = __webpack_require__(8576); - this._setPositions(options); +module.exports = function (a, b) { + var console = global.console; + if (console && console.error) { + arguments.length === 1 ? console.error(a) : console.error(a, b); + } +}; - return this.execute(_consts.commandNames.ADD_ICON, type, options); - } - /** - * Change icon color - * @param {number} id - object id - * @param {string} color - Color for icon - * @returns {Promise} - * @example - * imageEditor.changeIconColor(id, '#000000'); - */ +/***/ }), - }, { - key: 'changeIconColor', - value: function changeIconColor(id, color) { - return this.execute(_consts.commandNames.CHANGE_ICON_COLOR, id, color); - } +/***/ 7403: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Remove an object or group by id - * @param {number} id - object id - * @returns {Promise} - * @example - * imageEditor.removeObject(id); - */ +var getBuiltIn = __webpack_require__(150); - }, { - key: 'removeObject', - value: function removeObject(id) { - var _graphics$getObject = this._graphics.getObject(id), - type = _graphics$getObject.type; +module.exports = getBuiltIn('document', 'documentElement'); - return this.execute(_consts.commandNames.REMOVE_OBJECT, id, (0, _util.getObjectType)(type)); - } - /** - * Whether it has the filter or not - * @param {string} type - Filter type - * @returns {boolean} true if it has the filter - */ +/***/ }), - }, { - key: 'hasFilter', - value: function hasFilter(type) { - return this._graphics.hasFilter(type); - } +/***/ 188: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Remove filter on canvas image - * @param {string} type - Filter type - * @returns {Promise} - * @example - * imageEditor.removeFilter('Grayscale').then(obj => { - * console.log('filterType: ', obj.type); - * console.log('actType: ', obj.action); - * }).catch(message => { - * console.log('error: ', message); - * }); - */ +var DESCRIPTORS = __webpack_require__(69); +var fails = __webpack_require__(6192); +var createElement = __webpack_require__(7449); - }, { - key: 'removeFilter', - value: function removeFilter(type) { - return this.execute(_consts.commandNames.REMOVE_FILTER, type); - } +// Thank's IE8 for his funny defineProperty +module.exports = !DESCRIPTORS && !fails(function () { + // eslint-disable-next-line es/no-object-defineproperty -- requied for testing + return Object.defineProperty(createElement('div'), 'a', { + get: function () { return 7; } + }).a != 7; +}); - /** - * Apply filter on canvas image - * @param {string} type - Filter type - * @param {object} options - Options to apply filter - * @param {boolean} isSilent - is silent execution or not - * @returns {Promise} - * @example - * imageEditor.applyFilter('Grayscale'); - * @example - * imageEditor.applyFilter('mask', {maskObjId: id}).then(obj => { - * console.log('filterType: ', obj.type); - * console.log('actType: ', obj.action); - * }).catch(message => { - * console.log('error: ', message); - * });; - */ - }, { - key: 'applyFilter', - value: function applyFilter(type, options, isSilent) { - var executeMethodName = isSilent ? 'executeSilent' : 'execute'; +/***/ }), - return this[executeMethodName](_consts.commandNames.APPLY_FILTER, type, options); - } +/***/ 2202: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Get data url - * @param {Object} options - options for toDataURL - * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png" - * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg. - * @param {Number} [options.multiplier=1] Multiplier to scale by - * @param {Number} [options.left] Cropping left offset. Introduced in fabric v1.2.14 - * @param {Number} [options.top] Cropping top offset. Introduced in fabric v1.2.14 - * @param {Number} [options.width] Cropping width. Introduced in fabric v1.2.14 - * @param {Number} [options.height] Cropping height. Introduced in fabric v1.2.14 - * @returns {string} A DOMString containing the requested data URI - * @example - * imgEl.src = imageEditor.toDataURL(); - * - * imageEditor.loadImageFromURL(imageEditor.toDataURL(), 'FilterImage').then(() => { - * imageEditor.addImageObject(imgUrl); - * }); - */ +var fails = __webpack_require__(6192); +var classof = __webpack_require__(9272); - }, { - key: 'toDataURL', - value: function toDataURL(options) { - return this._graphics.toDataURL(options); - } +var split = ''.split; - /** - * Get image name - * @returns {string} image name - * @example - * console.log(imageEditor.getImageName()); - */ +// fallback for non-array-like ES3 and non-enumerable old V8 strings +module.exports = fails(function () { + // throws an error in rhino, see https://github.com/mozilla/rhino/issues/346 + // eslint-disable-next-line no-prototype-builtins -- safe + return !Object('z').propertyIsEnumerable(0); +}) ? function (it) { + return classof(it) == 'String' ? split.call(it, '') : Object(it); +} : Object; - }, { - key: 'getImageName', - value: function getImageName() { - return this._graphics.getImageName(); - } - /** - * Clear undoStack - * @example - * imageEditor.clearUndoStack(); - */ +/***/ }), - }, { - key: 'clearUndoStack', - value: function clearUndoStack() { - this._invoker.clearUndoStack(); - } +/***/ 9516: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Clear redoStack - * @example - * imageEditor.clearRedoStack(); - */ +var isCallable = __webpack_require__(6447); +var store = __webpack_require__(6434); - }, { - key: 'clearRedoStack', - value: function clearRedoStack() { - this._invoker.clearRedoStack(); - } +var functionToString = Function.toString; - /** - * Whehter the undo stack is empty or not - * @returns {boolean} - * imageEditor.isEmptyUndoStack(); - */ +// this helper broken in `core-js@3.4.1-3.4.4`, so we can't use `shared` helper +if (!isCallable(store.inspectSource)) { + store.inspectSource = function (it) { + return functionToString.call(it); + }; +} - }, { - key: 'isEmptyUndoStack', - value: function isEmptyUndoStack() { - return this._invoker.isEmptyUndoStack(); - } +module.exports = store.inspectSource; - /** - * Whehter the redo stack is empty or not - * @returns {boolean} - * imageEditor.isEmptyRedoStack(); - */ - }, { - key: 'isEmptyRedoStack', - value: function isEmptyRedoStack() { - return this._invoker.isEmptyRedoStack(); - } +/***/ }), - /** - * Resize canvas dimension - * @param {{width: number, height: number}} dimension - Max width & height - * @returns {Promise} - */ +/***/ 273: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'resizeCanvasDimension', - value: function resizeCanvasDimension(dimension) { - if (!dimension) { - return _util.Promise.reject(_consts.rejectMessages.invalidParameters); - } +var isObject = __webpack_require__(5744); +var createNonEnumerableProperty = __webpack_require__(8711); - return this.execute(_consts.commandNames.RESIZE_CANVAS_DIMENSION, dimension); - } +// `InstallErrorCause` abstract operation +// https://tc39.es/proposal-error-cause/#sec-errorobjects-install-error-cause +module.exports = function (O, options) { + if (isObject(options) && 'cause' in options) { + createNonEnumerableProperty(O, 'cause', O.cause); + } +}; - /** - * Destroy - */ - }, { - key: 'destroy', - value: function destroy() { - var _this6 = this; +/***/ }), - this.stopDrawingMode(); - this._detachDomEvents(); - this._graphics.destroy(); - this._graphics = null; +/***/ 3326: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - if (this.ui) { - this._detachColorPickerInputBoxEvents(); - this.ui.destroy(); - } +var NATIVE_WEAK_MAP = __webpack_require__(8921); +var global = __webpack_require__(8576); +var isObject = __webpack_require__(5744); +var createNonEnumerableProperty = __webpack_require__(8711); +var hasOwn = __webpack_require__(4500); +var shared = __webpack_require__(6434); +var sharedKey = __webpack_require__(9766); +var hiddenKeys = __webpack_require__(4535); - forEach(this, function (value, key) { - _this6[key] = null; - }, this); - } +var OBJECT_ALREADY_INITIALIZED = 'Object already initialized'; +var WeakMap = global.WeakMap; +var set, get, has; - /** - * Set position - * @param {Object} options - Position options (left or top) - * @private - */ +var enforce = function (it) { + return has(it) ? get(it) : set(it, {}); +}; - }, { - key: '_setPositions', - value: function _setPositions(options) { - var centerPosition = this._graphics.getCenter(); +var getterFor = function (TYPE) { + return function (it) { + var state; + if (!isObject(it) || (state = get(it)).type !== TYPE) { + throw TypeError('Incompatible receiver, ' + TYPE + ' required'); + } return state; + }; +}; - if (isUndefined(options.left)) { - options.left = centerPosition.left; - } +if (NATIVE_WEAK_MAP || shared.state) { + var store = shared.state || (shared.state = new WeakMap()); + var wmget = store.get; + var wmhas = store.has; + var wmset = store.set; + set = function (it, metadata) { + if (wmhas.call(store, it)) throw new TypeError(OBJECT_ALREADY_INITIALIZED); + metadata.facade = it; + wmset.call(store, it, metadata); + return metadata; + }; + get = function (it) { + return wmget.call(store, it) || {}; + }; + has = function (it) { + return wmhas.call(store, it); + }; +} else { + var STATE = sharedKey('state'); + hiddenKeys[STATE] = true; + set = function (it, metadata) { + if (hasOwn(it, STATE)) throw new TypeError(OBJECT_ALREADY_INITIALIZED); + metadata.facade = it; + createNonEnumerableProperty(it, STATE, metadata); + return metadata; + }; + get = function (it) { + return hasOwn(it, STATE) ? it[STATE] : {}; + }; + has = function (it) { + return hasOwn(it, STATE); + }; +} - if (isUndefined(options.top)) { - options.top = centerPosition.top; - } - } +module.exports = { + set: set, + get: get, + has: has, + enforce: enforce, + getterFor: getterFor +}; - /** - * Set properties of active object - * @param {number} id - object id - * @param {Object} keyValue - key & value - * @returns {Promise} - * @example - * imageEditor.setObjectProperties(id, { - * left:100, - * top:100, - * width: 200, - * height: 200, - * opacity: 0.5 - * }); - */ - }, { - key: 'setObjectProperties', - value: function setObjectProperties(id, keyValue) { - return this.execute(_consts.commandNames.SET_OBJECT_PROPERTIES, id, keyValue); - } +/***/ }), - /** - * Set properties of active object, Do not leave an invoke history. - * @param {number} id - object id - * @param {Object} keyValue - key & value - * @example - * imageEditor.setObjectPropertiesQuietly(id, { - * left:100, - * top:100, - * width: 200, - * height: 200, - * opacity: 0.5 - * }); - */ +/***/ 6109: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'setObjectPropertiesQuietly', - value: function setObjectPropertiesQuietly(id, keyValue) { - this._graphics.setObjectProperties(id, keyValue); - } +var wellKnownSymbol = __webpack_require__(8182); +var Iterators = __webpack_require__(7771); - /** - * Get properties of active object corresponding key - * @param {number} id - object id - * @param {Array|ObjectProps|string} keys - property's key - * @returns {ObjectProps} properties if id is valid or null - * @example - * var props = imageEditor.getObjectProperties(id, 'left'); - * console.log(props); - * @example - * var props = imageEditor.getObjectProperties(id, ['left', 'top', 'width', 'height']); - * console.log(props); - * @example - * var props = imageEditor.getObjectProperties(id, { - * left: null, - * top: null, - * width: null, - * height: null, - * opacity: null - * }); - * console.log(props); - */ +var ITERATOR = wellKnownSymbol('iterator'); +var ArrayPrototype = Array.prototype; - }, { - key: 'getObjectProperties', - value: function getObjectProperties(id, keys) { - var object = this._graphics.getObject(id); - if (!object) { - return null; - } +// check on default Array iterator +module.exports = function (it) { + return it !== undefined && (Iterators.Array === it || ArrayPrototype[ITERATOR] === it); +}; - return this._graphics.getObjectProperties(id, keys); - } - /** - * Get the canvas size - * @returns {Object} {{width: number, height: number}} canvas size - * @example - * var canvasSize = imageEditor.getCanvasSize(); - * console.log(canvasSize.width); - * console.height(canvasSize.height); - */ +/***/ }), - }, { - key: 'getCanvasSize', - value: function getCanvasSize() { - return this._graphics.getCanvasSize(); - } +/***/ 4770: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Get object position by originX, originY - * @param {number} id - object id - * @param {string} originX - can be 'left', 'center', 'right' - * @param {string} originY - can be 'top', 'center', 'bottom' - * @returns {Object} {{x:number, y: number}} position by origin if id is valid, or null - * @example - * var position = imageEditor.getObjectPosition(id, 'left', 'top'); - * console.log(position); - */ +var classof = __webpack_require__(9272); - }, { - key: 'getObjectPosition', - value: function getObjectPosition(id, originX, originY) { - return this._graphics.getObjectPosition(id, originX, originY); - } +// `IsArray` abstract operation +// https://tc39.es/ecma262/#sec-isarray +// eslint-disable-next-line es/no-array-isarray -- safe +module.exports = Array.isArray || function isArray(argument) { + return classof(argument) == 'Array'; +}; - /** - * Set object position by originX, originY - * @param {number} id - object id - * @param {Object} posInfo - position object - * @param {number} posInfo.x - x position - * @param {number} posInfo.y - y position - * @param {string} posInfo.originX - can be 'left', 'center', 'right' - * @param {string} posInfo.originY - can be 'top', 'center', 'bottom' - * @returns {Promise} - * @example - * // align the object to 'left', 'top' - * imageEditor.setObjectPosition(id, { - * x: 0, - * y: 0, - * originX: 'left', - * originY: 'top' - * }); - * @example - * // align the object to 'right', 'top' - * var canvasSize = imageEditor.getCanvasSize(); - * imageEditor.setObjectPosition(id, { - * x: canvasSize.width, - * y: 0, - * originX: 'right', - * originY: 'top' - * }); - * @example - * // align the object to 'left', 'bottom' - * var canvasSize = imageEditor.getCanvasSize(); - * imageEditor.setObjectPosition(id, { - * x: 0, - * y: canvasSize.height, - * originX: 'left', - * originY: 'bottom' - * }); - * @example - * // align the object to 'right', 'bottom' - * var canvasSize = imageEditor.getCanvasSize(); - * imageEditor.setObjectPosition(id, { - * x: canvasSize.width, - * y: canvasSize.height, - * originX: 'right', - * originY: 'bottom' - * }); - */ - }, { - key: 'setObjectPosition', - value: function setObjectPosition(id, posInfo) { - return this.execute(_consts.commandNames.SET_OBJECT_POSITION, id, posInfo); - } +/***/ }), - /** - * @param {object} dimensions - Image Dimensions - * @returns {Promise} - */ +/***/ 6447: +/***/ (function(module) { - }, { - key: 'resize', - value: function resize(dimensions) { - return this.execute(_consts.commandNames.RESIZE_IMAGE, dimensions); - } - }]); +// `IsCallable` abstract operation +// https://tc39.es/ecma262/#sec-iscallable +module.exports = function (argument) { + return typeof argument === 'function'; +}; - return ImageEditor; -}(); -_action2.default.mixin(ImageEditor); -CustomEvents.mixin(ImageEditor); +/***/ }), -exports.default = ImageEditor; +/***/ 2091: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -/***/ }), +var fails = __webpack_require__(6192); +var isCallable = __webpack_require__(6447); +var classof = __webpack_require__(4696); +var getBuiltIn = __webpack_require__(150); +var inspectSource = __webpack_require__(9516); -/***/ "./src/js/interface/command.js": -/*!*************************************!*\ - !*** ./src/js/interface/command.js ***! - \*************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +var empty = []; +var construct = getBuiltIn('Reflect', 'construct'); +var constructorRegExp = /^\s*(?:class|function)\b/; +var exec = constructorRegExp.exec; +var INCORRECT_TO_STRING = !constructorRegExp.exec(function () { /* empty */ }); -"use strict"; +var isConstructorModern = function (argument) { + if (!isCallable(argument)) return false; + try { + construct(Object, empty, argument); + return true; + } catch (error) { + return false; + } +}; +var isConstructorLegacy = function (argument) { + if (!isCallable(argument)) return false; + switch (classof(argument)) { + case 'AsyncFunction': + case 'GeneratorFunction': + case 'AsyncGeneratorFunction': return false; + // we can't check .prototype since constructors produced by .bind haven't it + } return INCORRECT_TO_STRING || !!exec.call(constructorRegExp, inspectSource(argument)); +}; -Object.defineProperty(exports, "__esModule", { - value: true -}); +// `IsConstructor` abstract operation +// https://tc39.es/ecma262/#sec-isconstructor +module.exports = !construct || fails(function () { + var called; + return isConstructorModern(isConstructorModern.call) + || !isConstructorModern(Object) + || !isConstructorModern(function () { called = true; }) + || called; +}) ? isConstructorLegacy : isConstructorModern; -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); /** - * @author NHN. FE Development Team - * @fileoverview Command interface - */ +/***/ }), -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); +/***/ 9245: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); +var fails = __webpack_require__(6192); +var isCallable = __webpack_require__(6447); -var _errorMessage = __webpack_require__(/*! @/factory/errorMessage */ "./src/js/factory/errorMessage.js"); +var replacement = /#|\.prototype\./; -var _errorMessage2 = _interopRequireDefault(_errorMessage); +var isForced = function (feature, detection) { + var value = data[normalize(feature)]; + return value == POLYFILL ? true + : value == NATIVE ? false + : isCallable(detection) ? fails(detection) + : !!detection; +}; -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +var normalize = isForced.normalize = function (string) { + return String(string).replace(replacement, '.').toLowerCase(); +}; -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } +var data = isForced.data = {}; +var NATIVE = isForced.NATIVE = 'N'; +var POLYFILL = isForced.POLYFILL = 'P'; -var createMessage = _errorMessage2.default.create; -var errorTypes = _errorMessage2.default.types; +module.exports = isForced; -/** - * Command class - * @class - * @param {{name:function, execute: function, undo: function, - * executeCallback: function, undoCallback: function}} actions - Command actions - * @param {Array} args - passing arguments on execute, undo - * @ignore - */ -var Command = function () { - function Command(actions, args) { - _classCallCheck(this, Command); +/***/ }), - /** - * command name - * @type {string} - */ - this.name = actions.name; +/***/ 5744: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * arguments - * @type {Array} - */ - this.args = args; +var isCallable = __webpack_require__(6447); - /** - * Execute function - * @type {function} - */ - this.execute = actions.execute; +module.exports = function (it) { + return typeof it === 'object' ? it !== null : isCallable(it); +}; - /** - * Undo function - * @type {function} - */ - this.undo = actions.undo; - /** - * executeCallback - * @type {function} - */ - this.executeCallback = actions.executeCallback || null; +/***/ }), - /** - * undoCallback - * @type {function} - */ - this.undoCallback = actions.undoCallback || null; +/***/ 5546: +/***/ (function(module) { - /** - * data for undo - * @type {Object} - */ - this.undoData = {}; - } +module.exports = true; - /** - * Execute action - * @param {Object.} compMap - Components injection - * @abstract - */ +/***/ }), - _createClass(Command, [{ - key: 'execute', - value: function execute() { - throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'execute')); - } +/***/ 3236: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Undo action - * @param {Object.} compMap - Components injection - * @abstract - */ +var isCallable = __webpack_require__(6447); +var getBuiltIn = __webpack_require__(150); +var USE_SYMBOL_AS_UID = __webpack_require__(615); - }, { - key: 'undo', - value: function undo() { - throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'undo')); - } +module.exports = USE_SYMBOL_AS_UID ? function (it) { + return typeof it == 'symbol'; +} : function (it) { + var $Symbol = getBuiltIn('Symbol'); + return isCallable($Symbol) && Object(it) instanceof $Symbol; +}; - /** - * command for redo if undoData exists - * @returns {boolean} isRedo - */ - }, { - key: 'setUndoData', +/***/ }), +/***/ 3442: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Set undoData action - * @param {Object} undoData - maked undo data - * @param {Object} cachedUndoDataForSilent - cached undo data - * @param {boolean} isSilent - is silent execution or not - * @returns {Object} cachedUndoDataForSilent - */ - value: function setUndoData(undoData, cachedUndoDataForSilent, isSilent) { - if (cachedUndoDataForSilent) { - undoData = cachedUndoDataForSilent; - } +var anObject = __webpack_require__(1138); +var isArrayIteratorMethod = __webpack_require__(6109); +var lengthOfArrayLike = __webpack_require__(4104); +var bind = __webpack_require__(8043); +var getIterator = __webpack_require__(1669); +var getIteratorMethod = __webpack_require__(8703); +var iteratorClose = __webpack_require__(6639); - if (!isSilent) { - _tuiCodeSnippet2.default.extend(this.undoData, undoData); - cachedUndoDataForSilent = null; - } else if (!cachedUndoDataForSilent) { - cachedUndoDataForSilent = undoData; - } +var Result = function (stopped, result) { + this.stopped = stopped; + this.result = result; +}; - return cachedUndoDataForSilent; - } +module.exports = function (iterable, unboundFunction, options) { + var that = options && options.that; + var AS_ENTRIES = !!(options && options.AS_ENTRIES); + var IS_ITERATOR = !!(options && options.IS_ITERATOR); + var INTERRUPTED = !!(options && options.INTERRUPTED); + var fn = bind(unboundFunction, that, 1 + AS_ENTRIES + INTERRUPTED); + var iterator, iterFn, index, length, result, next, step; - /** - * Attach execute callabck - * @param {function} callback - Callback after execution - * @returns {Command} this - */ + var stop = function (condition) { + if (iterator) iteratorClose(iterator, 'normal', condition); + return new Result(true, condition); + }; - }, { - key: 'setExecuteCallback', - value: function setExecuteCallback(callback) { - this.executeCallback = callback; + var callFn = function (value) { + if (AS_ENTRIES) { + anObject(value); + return INTERRUPTED ? fn(value[0], value[1], stop) : fn(value[0], value[1]); + } return INTERRUPTED ? fn(value, stop) : fn(value); + }; - return this; + if (IS_ITERATOR) { + iterator = iterable; + } else { + iterFn = getIteratorMethod(iterable); + if (!iterFn) throw TypeError(String(iterable) + ' is not iterable'); + // optimisation for array iterators + if (isArrayIteratorMethod(iterFn)) { + for (index = 0, length = lengthOfArrayLike(iterable); length > index; index++) { + result = callFn(iterable[index]); + if (result && result instanceof Result) return result; + } return new Result(false); } + iterator = getIterator(iterable, iterFn); + } - /** - * Attach undo callback - * @param {function} callback - Callback after undo - * @returns {Command} this - */ + next = iterator.next; + while (!(step = next.call(iterator)).done) { + try { + result = callFn(step.value); + } catch (error) { + iteratorClose(iterator, 'throw', error); + } + if (typeof result == 'object' && result && result instanceof Result) return result; + } return new Result(false); +}; - }, { - key: 'setUndoCallback', - value: function setUndoCallback(callback) { - this.undoCallback = callback; - return this; - } - }, { - key: 'isRedo', - get: function get() { - return Object.keys(this.undoData).length > 0; - } - }]); +/***/ }), - return Command; -}(); +/***/ 6639: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { + +var anObject = __webpack_require__(1138); +var getMethod = __webpack_require__(5037); + +module.exports = function (iterator, kind, value) { + var innerResult, innerError; + anObject(iterator); + try { + innerResult = getMethod(iterator, 'return'); + if (!innerResult) { + if (kind === 'throw') throw value; + return value; + } + innerResult = innerResult.call(iterator); + } catch (error) { + innerError = true; + innerResult = error; + } + if (kind === 'throw') throw value; + if (innerError) throw innerResult; + anObject(innerResult); + return value; +}; -exports.default = Command; /***/ }), -/***/ "./src/js/interface/component.js": -/*!***************************************!*\ - !*** ./src/js/interface/component.js ***! - \***************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +/***/ 4413: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { "use strict"; +var fails = __webpack_require__(6192); +var isCallable = __webpack_require__(6447); +var create = __webpack_require__(2853); +var getPrototypeOf = __webpack_require__(9341); +var redefine = __webpack_require__(9482); +var wellKnownSymbol = __webpack_require__(8182); +var IS_PURE = __webpack_require__(5546); -Object.defineProperty(exports, "__esModule", { - value: true -}); +var ITERATOR = wellKnownSymbol('iterator'); +var BUGGY_SAFARI_ITERATORS = false; -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); +// `%IteratorPrototype%` object +// https://tc39.es/ecma262/#sec-%iteratorprototype%-object +var IteratorPrototype, PrototypeOfArrayIteratorPrototype, arrayIterator; -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } +/* eslint-disable es/no-array-prototype-keys -- safe */ +if ([].keys) { + arrayIterator = [].keys(); + // Safari 8 has buggy iterators w/o `next` + if (!('next' in arrayIterator)) BUGGY_SAFARI_ITERATORS = true; + else { + PrototypeOfArrayIteratorPrototype = getPrototypeOf(getPrototypeOf(arrayIterator)); + if (PrototypeOfArrayIteratorPrototype !== Object.prototype) IteratorPrototype = PrototypeOfArrayIteratorPrototype; + } +} -/** - * @author NHN. FE Development Team - * @fileoverview Component interface - */ +var NEW_ITERATOR_PROTOTYPE = IteratorPrototype == undefined || fails(function () { + var test = {}; + // FF44- legacy iterators case + return IteratorPrototype[ITERATOR].call(test) !== test; +}); -/** - * Component interface - * @class - * @param {string} name - component name - * @param {Graphics} graphics - Graphics instance - * @ignore - */ -var Component = function () { - function Component(name, graphics) { - _classCallCheck(this, Component); +if (NEW_ITERATOR_PROTOTYPE) IteratorPrototype = {}; +else if (IS_PURE) IteratorPrototype = create(IteratorPrototype); - /** - * Component name - * @type {string} - */ - this.name = name; +// `%IteratorPrototype%[@@iterator]()` method +// https://tc39.es/ecma262/#sec-%iteratorprototype%-@@iterator +if (!isCallable(IteratorPrototype[ITERATOR])) { + redefine(IteratorPrototype, ITERATOR, function () { + return this; + }); +} - /** - * Graphics instance - * @type {Graphics} - */ - this.graphics = graphics; - } +module.exports = { + IteratorPrototype: IteratorPrototype, + BUGGY_SAFARI_ITERATORS: BUGGY_SAFARI_ITERATORS +}; - /** - * Fire Graphics event - * @returns {Object} return value - */ +/***/ }), - _createClass(Component, [{ - key: "fire", - value: function fire() { - var context = this.graphics; +/***/ 7771: +/***/ (function(module) { - for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } +module.exports = {}; - return this.graphics.fire.apply(context, args); - } - /** - * Save image(background) of canvas - * @param {string} name - Name of image - * @param {fabric.Image} oImage - Fabric image instance - */ +/***/ }), - }, { - key: "setCanvasImage", - value: function setCanvasImage(name, oImage) { - this.graphics.setCanvasImage(name, oImage); - } +/***/ 4104: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Returns canvas element of fabric.Canvas[[lower-canvas]] - * @returns {HTMLCanvasElement} - */ +var toLength = __webpack_require__(8445); - }, { - key: "getCanvasElement", - value: function getCanvasElement() { - return this.graphics.getCanvasElement(); - } +// `LengthOfArrayLike` abstract operation +// https://tc39.es/ecma262/#sec-lengthofarraylike +module.exports = function (obj) { + return toLength(obj.length); +}; - /** - * Get fabric.Canvas instance - * @returns {fabric.Canvas} - */ - }, { - key: "getCanvas", - value: function getCanvas() { - return this.graphics.getCanvas(); - } +/***/ }), - /** - * Get canvasImage (fabric.Image instance) - * @returns {fabric.Image} - */ +/***/ 2950: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: "getCanvasImage", - value: function getCanvasImage() { - return this.graphics.getCanvasImage(); - } +var global = __webpack_require__(8576); +var getOwnPropertyDescriptor = __webpack_require__(5141).f; +var macrotask = __webpack_require__(7160).set; +var IS_IOS = __webpack_require__(9536); +var IS_IOS_PEBBLE = __webpack_require__(9347); +var IS_WEBOS_WEBKIT = __webpack_require__(5914); +var IS_NODE = __webpack_require__(224); - /** - * Get image name - * @returns {string} - */ +var MutationObserver = global.MutationObserver || global.WebKitMutationObserver; +var document = global.document; +var process = global.process; +var Promise = global.Promise; +// Node.js 11 shows ExperimentalWarning on getting `queueMicrotask` +var queueMicrotaskDescriptor = getOwnPropertyDescriptor(global, 'queueMicrotask'); +var queueMicrotask = queueMicrotaskDescriptor && queueMicrotaskDescriptor.value; - }, { - key: "getImageName", - value: function getImageName() { - return this.graphics.getImageName(); - } +var flush, head, last, notify, toggle, node, promise, then; - /** - * Get image editor - * @returns {ImageEditor} - */ +// modern engines have queueMicrotask method +if (!queueMicrotask) { + flush = function () { + var parent, fn; + if (IS_NODE && (parent = process.domain)) parent.exit(); + while (head) { + fn = head.fn; + head = head.next; + try { + fn(); + } catch (error) { + if (head) notify(); + else last = undefined; + throw error; + } + } last = undefined; + if (parent) parent.enter(); + }; - }, { - key: "getEditor", - value: function getEditor() { - return this.graphics.getEditor(); - } + // browsers with MutationObserver, except iOS - https://github.com/zloirock/core-js/issues/339 + // also except WebOS Webkit https://github.com/zloirock/core-js/issues/898 + if (!IS_IOS && !IS_NODE && !IS_WEBOS_WEBKIT && MutationObserver && document) { + toggle = true; + node = document.createTextNode(''); + new MutationObserver(flush).observe(node, { characterData: true }); + notify = function () { + node.data = toggle = !toggle; + }; + // environments with maybe non-completely correct, but existent Promise + } else if (!IS_IOS_PEBBLE && Promise && Promise.resolve) { + // Promise.resolve without an argument throws an error in LG WebOS 2 + promise = Promise.resolve(undefined); + // workaround of WebKit ~ iOS Safari 10.1 bug + promise.constructor = Promise; + then = promise.then; + notify = function () { + then.call(promise, flush); + }; + // Node.js without promises + } else if (IS_NODE) { + notify = function () { + process.nextTick(flush); + }; + // for other environments - macrotask based on: + // - setImmediate + // - MessageChannel + // - window.postMessag + // - onreadystatechange + // - setTimeout + } else { + notify = function () { + // strange IE + webpack dev server bug - use .call(global) + macrotask.call(global, flush); + }; + } +} - /** - * Return component name - * @returns {string} - */ +module.exports = queueMicrotask || function (fn) { + var task = { fn: fn, next: undefined }; + if (last) last.next = task; + if (!head) { + head = task; + notify(); + } last = task; +}; - }, { - key: "getName", - value: function getName() { - return this.name; - } - /** - * Set image properties - * @param {Object} setting - Image properties - * @param {boolean} [withRendering] - If true, The changed image will be reflected in the canvas - */ +/***/ }), - }, { - key: "setImageProperties", - value: function setImageProperties(setting, withRendering) { - this.graphics.setImageProperties(setting, withRendering); - } +/***/ 4471: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Set canvas dimension - css only - * @param {Object} dimension - Canvas css dimension - */ +var global = __webpack_require__(8576); - }, { - key: "setCanvasCssDimension", - value: function setCanvasCssDimension(dimension) { - this.graphics.setCanvasCssDimension(dimension); - } +module.exports = global.Promise; - /** - * Set canvas dimension - css only - * @param {Object} dimension - Canvas backstore dimension - */ - }, { - key: "setCanvasBackstoreDimension", - value: function setCanvasBackstoreDimension(dimension) { - this.graphics.setCanvasBackstoreDimension(dimension); - } +/***/ }), - /** - * Adjust canvas dimension with scaling image - */ +/***/ 3045: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: "adjustCanvasDimension", - value: function adjustCanvasDimension() { - this.graphics.adjustCanvasDimension(); - } - }, { - key: "adjustCanvasDimensionBase", - value: function adjustCanvasDimensionBase() { - this.graphics.adjustCanvasDimensionBase(); - } - }]); +/* eslint-disable es/no-symbol -- required for testing */ +var V8_VERSION = __webpack_require__(4218); +var fails = __webpack_require__(6192); - return Component; -}(); +// eslint-disable-next-line es/no-object-getownpropertysymbols -- required for testing +module.exports = !!Object.getOwnPropertySymbols && !fails(function () { + var symbol = Symbol(); + // Chrome 38 Symbol has incorrect toString conversion + // `get-own-property-symbols` polyfill symbols converted to object are not Symbol instances + return !String(symbol) || !(Object(symbol) instanceof Symbol) || + // Chrome 38-40 symbols are not inherited from DOM collections prototypes to instances + !Symbol.sham && V8_VERSION && V8_VERSION < 41; +}); -exports.default = Component; /***/ }), -/***/ "./src/js/interface/drawingMode.js": -/*!*****************************************!*\ - !*** ./src/js/interface/drawingMode.js ***! - \*****************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +/***/ 4551: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -"use strict"; +var fails = __webpack_require__(6192); +var wellKnownSymbol = __webpack_require__(8182); +var IS_PURE = __webpack_require__(5546); +var ITERATOR = wellKnownSymbol('iterator'); -Object.defineProperty(exports, "__esModule", { - value: true +module.exports = !fails(function () { + var url = new URL('b?a=1&b=2&c=3', 'http://a'); + var searchParams = url.searchParams; + var result = ''; + url.pathname = 'c%20d'; + searchParams.forEach(function (value, key) { + searchParams['delete']('b'); + result += key + value; + }); + return (IS_PURE && !url.toJSON) + || !searchParams.sort + || url.href !== 'http://a/c%20d?a=1&c=3' + || searchParams.get('c') !== '3' + || String(new URLSearchParams('?a=1')) !== 'a=1' + || !searchParams[ITERATOR] + // throws in Edge + || new URL('https://a@b').username !== 'a' + || new URLSearchParams(new URLSearchParams('a=b')).get('a') !== 'b' + // not punycoded in Edge + || new URL('http://тест').host !== 'xn--e1aybc' + // not escaped in Chrome 62- + || new URL('http://a#б').hash !== '#%D0%B1' + // fails in Chrome 66- + || result !== 'a1c3' + // throws in Safari + || new URL('http://x', undefined).host !== 'x'; }); -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); /** - * @author NHN. FE Development Team - * @fileoverview DrawingMode interface - */ +/***/ }), -var _errorMessage = __webpack_require__(/*! @/factory/errorMessage */ "./src/js/factory/errorMessage.js"); +/***/ 8921: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -var _errorMessage2 = _interopRequireDefault(_errorMessage); +var global = __webpack_require__(8576); +var isCallable = __webpack_require__(6447); +var inspectSource = __webpack_require__(9516); -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +var WeakMap = global.WeakMap; -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } +module.exports = isCallable(WeakMap) && /native code/.test(inspectSource(WeakMap)); -var createMessage = _errorMessage2.default.create; -var errorTypes = _errorMessage2.default.types; -/** - * DrawingMode interface - * @class - * @param {string} name - drawing mode name - * @ignore - */ +/***/ }), -var DrawingMode = function () { - function DrawingMode(name) { - _classCallCheck(this, DrawingMode); +/***/ 9438: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * the name of drawing mode - * @type {string} - */ - this.name = name; - } +"use strict"; - /** - * Get this drawing mode name; - * @returns {string} drawing mode name - */ +var aCallable = __webpack_require__(6235); +var PromiseCapability = function (C) { + var resolve, reject; + this.promise = new C(function ($$resolve, $$reject) { + if (resolve !== undefined || reject !== undefined) throw TypeError('Bad Promise constructor'); + resolve = $$resolve; + reject = $$reject; + }); + this.resolve = aCallable(resolve); + this.reject = aCallable(reject); +}; - _createClass(DrawingMode, [{ - key: 'getName', - value: function getName() { - return this.name; - } +// `NewPromiseCapability` abstract operation +// https://tc39.es/ecma262/#sec-newpromisecapability +module.exports.f = function (C) { + return new PromiseCapability(C); +}; - /** - * start this drawing mode - * @param {Object} options - drawing mode options - * @abstract - */ - }, { - key: 'start', - value: function start() { - throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'start')); - } +/***/ }), - /** - * stop this drawing mode - * @abstract - */ +/***/ 15: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'end', - value: function end() { - throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'stop')); - } - }]); +var global = __webpack_require__(8576); +var fails = __webpack_require__(6192); +var toString = __webpack_require__(4845); +var trim = __webpack_require__(4277).trim; +var whitespaces = __webpack_require__(1450); - return DrawingMode; -}(); +var $parseFloat = global.parseFloat; +var Symbol = global.Symbol; +var ITERATOR = Symbol && Symbol.iterator; +var FORCED = 1 / $parseFloat(whitespaces + '-0') !== -Infinity + // MS Edge 18- broken with boxed symbols + || (ITERATOR && !fails(function () { $parseFloat(Object(ITERATOR)); })); + +// `parseFloat` method +// https://tc39.es/ecma262/#sec-parsefloat-string +module.exports = FORCED ? function parseFloat(string) { + var trimmedString = trim(toString(string)); + var result = $parseFloat(trimmedString); + return result === 0 && trimmedString.charAt(0) == '-' ? -0 : result; +} : $parseFloat; -exports.default = DrawingMode; /***/ }), -/***/ "./src/js/invoker.js": -/*!***************************!*\ - !*** ./src/js/invoker.js ***! - \***************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +/***/ 2558: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -"use strict"; +var global = __webpack_require__(8576); +var fails = __webpack_require__(6192); +var toString = __webpack_require__(4845); +var trim = __webpack_require__(4277).trim; +var whitespaces = __webpack_require__(1450); +var $parseInt = global.parseInt; +var Symbol = global.Symbol; +var ITERATOR = Symbol && Symbol.iterator; +var hex = /^[+-]?0[Xx]/; +var FORCED = $parseInt(whitespaces + '08') !== 8 || $parseInt(whitespaces + '0x16') !== 22 + // MS Edge 18- broken with boxed symbols + || (ITERATOR && !fails(function () { $parseInt(Object(ITERATOR)); })); -Object.defineProperty(exports, "__esModule", { - value: true -}); +// `parseInt` method +// https://tc39.es/ecma262/#sec-parseint-string-radix +module.exports = FORCED ? function parseInt(string, radix) { + var S = trim(toString(string)); + return $parseInt(S, (radix >>> 0) || (hex.test(S) ? 16 : 10)); +} : $parseInt; -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); /** - * @author NHN. FE Development Team - * @fileoverview Invoker - invoke commands - */ +/***/ }), -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); +/***/ 2503: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); +"use strict"; -var _command = __webpack_require__(/*! @/factory/command */ "./src/js/factory/command.js"); +var DESCRIPTORS = __webpack_require__(69); +var fails = __webpack_require__(6192); +var objectKeys = __webpack_require__(7653); +var getOwnPropertySymbolsModule = __webpack_require__(4750); +var propertyIsEnumerableModule = __webpack_require__(6007); +var toObject = __webpack_require__(1795); +var IndexedObject = __webpack_require__(2202); + +// eslint-disable-next-line es/no-object-assign -- safe +var $assign = Object.assign; +// eslint-disable-next-line es/no-object-defineproperty -- required for testing +var defineProperty = Object.defineProperty; + +// `Object.assign` method +// https://tc39.es/ecma262/#sec-object.assign +module.exports = !$assign || fails(function () { + // should have correct order of operations (Edge bug) + if (DESCRIPTORS && $assign({ b: 1 }, $assign(defineProperty({}, 'a', { + enumerable: true, + get: function () { + defineProperty(this, 'b', { + value: 3, + enumerable: false + }); + } + }), { b: 2 })).b !== 1) return true; + // should work with symbols and should have deterministic property order (V8 bug) + var A = {}; + var B = {}; + // eslint-disable-next-line es/no-symbol -- safe + var symbol = Symbol(); + var alphabet = 'abcdefghijklmnopqrst'; + A[symbol] = 7; + alphabet.split('').forEach(function (chr) { B[chr] = chr; }); + return $assign({}, A)[symbol] != 7 || objectKeys($assign({}, B)).join('') != alphabet; +}) ? function assign(target, source) { // eslint-disable-line no-unused-vars -- required for `.length` + var T = toObject(target); + var argumentsLength = arguments.length; + var index = 1; + var getOwnPropertySymbols = getOwnPropertySymbolsModule.f; + var propertyIsEnumerable = propertyIsEnumerableModule.f; + while (argumentsLength > index) { + var S = IndexedObject(arguments[index++]); + var keys = getOwnPropertySymbols ? objectKeys(S).concat(getOwnPropertySymbols(S)) : objectKeys(S); + var length = keys.length; + var j = 0; + var key; + while (length > j) { + key = keys[j++]; + if (!DESCRIPTORS || propertyIsEnumerable.call(S, key)) T[key] = S[key]; + } + } return T; +} : $assign; -var _command2 = _interopRequireDefault(_command); -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); +/***/ }), -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); +/***/ 2853: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +/* global ActiveXObject -- old IE, WSH */ +var anObject = __webpack_require__(1138); +var defineProperties = __webpack_require__(1187); +var enumBugKeys = __webpack_require__(2952); +var hiddenKeys = __webpack_require__(4535); +var html = __webpack_require__(7403); +var documentCreateElement = __webpack_require__(7449); +var sharedKey = __webpack_require__(9766); -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } +var GT = '>'; +var LT = '<'; +var PROTOTYPE = 'prototype'; +var SCRIPT = 'script'; +var IE_PROTO = sharedKey('IE_PROTO'); -var isFunction = _tuiCodeSnippet2.default.isFunction, - isString = _tuiCodeSnippet2.default.isString, - CustomEvents = _tuiCodeSnippet2.default.CustomEvents; +var EmptyConstructor = function () { /* empty */ }; -/** - * Invoker - * @class - * @ignore - */ +var scriptTag = function (content) { + return LT + SCRIPT + GT + content + LT + '/' + SCRIPT + GT; +}; -var Invoker = function () { - function Invoker() { - _classCallCheck(this, Invoker); +// Create object with fake `null` prototype: use ActiveX Object with cleared prototype +var NullProtoObjectViaActiveX = function (activeXDocument) { + activeXDocument.write(scriptTag('')); + activeXDocument.close(); + var temp = activeXDocument.parentWindow.Object; + activeXDocument = null; // avoid memory leak + return temp; +}; - /** - * Undo stack - * @type {Array.} - * @private - */ - this._undoStack = []; +// Create object with fake `null` prototype: use iframe Object with cleared prototype +var NullProtoObjectViaIFrame = function () { + // Thrash, waste and sodomy: IE GC bug + var iframe = documentCreateElement('iframe'); + var JS = 'java' + SCRIPT + ':'; + var iframeDocument; + iframe.style.display = 'none'; + html.appendChild(iframe); + // https://github.com/zloirock/core-js/issues/475 + iframe.src = String(JS); + iframeDocument = iframe.contentWindow.document; + iframeDocument.open(); + iframeDocument.write(scriptTag('document.F=Object')); + iframeDocument.close(); + return iframeDocument.F; +}; - /** - * Redo stack - * @type {Array.} - * @private - */ - this._redoStack = []; +// Check for document.domain and active x support +// No need to use active x approach when document.domain is not set +// see https://github.com/es-shims/es5-shim/issues/150 +// variation of https://github.com/kitcambridge/es5-shim/commit/4f738ac066346 +// avoid IE GC bug +var activeXDocument; +var NullProtoObject = function () { + try { + activeXDocument = new ActiveXObject('htmlfile'); + } catch (error) { /* ignore */ } + NullProtoObject = typeof document != 'undefined' + ? document.domain && activeXDocument + ? NullProtoObjectViaActiveX(activeXDocument) // old IE + : NullProtoObjectViaIFrame() + : NullProtoObjectViaActiveX(activeXDocument); // WSH + var length = enumBugKeys.length; + while (length--) delete NullProtoObject[PROTOTYPE][enumBugKeys[length]]; + return NullProtoObject(); +}; - /** - * Lock-flag for executing command - * @type {boolean} - * @private - */ - this._isLocked = false; +hiddenKeys[IE_PROTO] = true; - this._isSilent = false; - } +// `Object.create` method +// https://tc39.es/ecma262/#sec-object.create +module.exports = Object.create || function create(O, Properties) { + var result; + if (O !== null) { + EmptyConstructor[PROTOTYPE] = anObject(O); + result = new EmptyConstructor(); + EmptyConstructor[PROTOTYPE] = null; + // add "__proto__" for Object.getPrototypeOf polyfill + result[IE_PROTO] = O; + } else result = NullProtoObject(); + return Properties === undefined ? result : defineProperties(result, Properties); +}; - /** - * Invoke command execution - * @param {Command} command - Command - * @param {boolean} [isRedo=false] - check if command is redo - * @returns {Promise} - * @private - */ +/***/ }), - _createClass(Invoker, [{ - key: '_invokeExecution', - value: function _invokeExecution(command) { - var _this = this; +/***/ 1187: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - var isRedo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; +var DESCRIPTORS = __webpack_require__(69); +var definePropertyModule = __webpack_require__(2760); +var anObject = __webpack_require__(1138); +var objectKeys = __webpack_require__(7653); - this.lock(); +// `Object.defineProperties` method +// https://tc39.es/ecma262/#sec-object.defineproperties +// eslint-disable-next-line es/no-object-defineproperties -- safe +module.exports = DESCRIPTORS ? Object.defineProperties : function defineProperties(O, Properties) { + anObject(O); + var keys = objectKeys(Properties); + var length = keys.length; + var index = 0; + var key; + while (length > index) definePropertyModule.f(O, key = keys[index++], Properties[key]); + return O; +}; - var args = command.args; - if (!args) { - args = []; - } +/***/ }), - return command.execute.apply(command, args).then(function (value) { - if (!_this._isSilent) { - _this.pushUndoStack(command); +/***/ 2760: +/***/ (function(__unused_webpack_module, exports, __webpack_require__) { - _this.fire(isRedo ? _consts.eventNames.AFTER_REDO : _consts.eventNames.EXECUTE_COMMAND, command); - } - _this.unlock(); - if (isFunction(command.executeCallback)) { - command.executeCallback(value); - } +var DESCRIPTORS = __webpack_require__(69); +var IE8_DOM_DEFINE = __webpack_require__(188); +var anObject = __webpack_require__(1138); +var toPropertyKey = __webpack_require__(77); - return value; - })['catch'](function (message) { - _this.unlock(); +// eslint-disable-next-line es/no-object-defineproperty -- safe +var $defineProperty = Object.defineProperty; - return _util.Promise.reject(message); - }); - } +// `Object.defineProperty` method +// https://tc39.es/ecma262/#sec-object.defineproperty +exports.f = DESCRIPTORS ? $defineProperty : function defineProperty(O, P, Attributes) { + anObject(O); + P = toPropertyKey(P); + anObject(Attributes); + if (IE8_DOM_DEFINE) try { + return $defineProperty(O, P, Attributes); + } catch (error) { /* empty */ } + if ('get' in Attributes || 'set' in Attributes) throw TypeError('Accessors not supported'); + if ('value' in Attributes) O[P] = Attributes.value; + return O; +}; - /** - * Invoke command undo - * @param {Command} command - Command - * @returns {Promise} - * @private - */ - }, { - key: '_invokeUndo', - value: function _invokeUndo(command) { - var _this2 = this; +/***/ }), - this.lock(); +/***/ 5141: +/***/ (function(__unused_webpack_module, exports, __webpack_require__) { - var args = command.args; +var DESCRIPTORS = __webpack_require__(69); +var propertyIsEnumerableModule = __webpack_require__(6007); +var createPropertyDescriptor = __webpack_require__(774); +var toIndexedObject = __webpack_require__(101); +var toPropertyKey = __webpack_require__(77); +var hasOwn = __webpack_require__(4500); +var IE8_DOM_DEFINE = __webpack_require__(188); - if (!args) { - args = []; - } +// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe +var $getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor; - return command.undo.apply(command, args).then(function (value) { - _this2.pushRedoStack(command); - _this2.fire(_consts.eventNames.AFTER_UNDO, command); - _this2.unlock(); - if (isFunction(command.undoCallback)) { - command.undoCallback(value); - } +// `Object.getOwnPropertyDescriptor` method +// https://tc39.es/ecma262/#sec-object.getownpropertydescriptor +exports.f = DESCRIPTORS ? $getOwnPropertyDescriptor : function getOwnPropertyDescriptor(O, P) { + O = toIndexedObject(O); + P = toPropertyKey(P); + if (IE8_DOM_DEFINE) try { + return $getOwnPropertyDescriptor(O, P); + } catch (error) { /* empty */ } + if (hasOwn(O, P)) return createPropertyDescriptor(!propertyIsEnumerableModule.f.call(O, P), O[P]); +}; - return value; - })['catch'](function (message) { - _this2.unlock(); - return _util.Promise.reject(message); - }); - } +/***/ }), - /** - * fire REDO_STACK_CHANGED event - * @private - */ +/***/ 4052: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: '_fireRedoStackChanged', - value: function _fireRedoStackChanged() { - this.fire(_consts.eventNames.REDO_STACK_CHANGED, this._redoStack.length); - } +/* eslint-disable es/no-object-getownpropertynames -- safe */ +var toIndexedObject = __webpack_require__(101); +var $getOwnPropertyNames = __webpack_require__(2092).f; - /** - * fire UNDO_STACK_CHANGED event - * @private - */ +var toString = {}.toString; - }, { - key: '_fireUndoStackChanged', - value: function _fireUndoStackChanged() { - this.fire(_consts.eventNames.UNDO_STACK_CHANGED, this._undoStack.length); - } +var windowNames = typeof window == 'object' && window && Object.getOwnPropertyNames + ? Object.getOwnPropertyNames(window) : []; - /** - * Lock this invoker - */ +var getWindowNames = function (it) { + try { + return $getOwnPropertyNames(it); + } catch (error) { + return windowNames.slice(); + } +}; - }, { - key: 'lock', - value: function lock() { - this._isLocked = true; - } +// fallback for IE11 buggy Object.getOwnPropertyNames with iframe and window +module.exports.f = function getOwnPropertyNames(it) { + return windowNames && toString.call(it) == '[object Window]' + ? getWindowNames(it) + : $getOwnPropertyNames(toIndexedObject(it)); +}; - /** - * Unlock this invoker - */ - }, { - key: 'unlock', - value: function unlock() { - this._isLocked = false; - } - }, { - key: 'executeSilent', - value: function executeSilent() { - var _this3 = this; +/***/ }), - this._isSilent = true; +/***/ 2092: +/***/ (function(__unused_webpack_module, exports, __webpack_require__) { - for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } +var internalObjectKeys = __webpack_require__(7934); +var enumBugKeys = __webpack_require__(2952); - return this.execute.apply(this, args.concat([this._isSilent])).then(function () { - _this3._isSilent = false; - }); - } +var hiddenKeys = enumBugKeys.concat('length', 'prototype'); - /** - * Invoke command - * Store the command to the undoStack - * Clear the redoStack - * @param {String} commandName - Command name - * @param {...*} args - Arguments for creating command - * @returns {Promise} - */ +// `Object.getOwnPropertyNames` method +// https://tc39.es/ecma262/#sec-object.getownpropertynames +// eslint-disable-next-line es/no-object-getownpropertynames -- safe +exports.f = Object.getOwnPropertyNames || function getOwnPropertyNames(O) { + return internalObjectKeys(O, hiddenKeys); +}; - }, { - key: 'execute', - value: function execute() { - var _this4 = this; - if (this._isLocked) { - return _util.Promise.reject(_consts.rejectMessages.isLock); - } +/***/ }), - for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { - args[_key2] = arguments[_key2]; - } +/***/ 4750: +/***/ (function(__unused_webpack_module, exports) { - var command = args[0]; +// eslint-disable-next-line es/no-object-getownpropertysymbols -- safe +exports.f = Object.getOwnPropertySymbols; - if (isString(command)) { - command = _command2.default.create.apply(_command2.default, args); - } - return this._invokeExecution(command).then(function (value) { - _this4.clearRedoStack(); +/***/ }), - return value; - }); - } +/***/ 9341: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Undo command - * @returns {Promise} - */ +var hasOwn = __webpack_require__(4500); +var isCallable = __webpack_require__(6447); +var toObject = __webpack_require__(1795); +var sharedKey = __webpack_require__(9766); +var CORRECT_PROTOTYPE_GETTER = __webpack_require__(4635); - }, { - key: 'undo', - value: function undo() { - var command = this._undoStack.pop(); - var promise = void 0; - var message = ''; +var IE_PROTO = sharedKey('IE_PROTO'); +var ObjectPrototype = Object.prototype; - if (command && this._isLocked) { - this.pushUndoStack(command, true); - command = null; - } - if (command) { - if (this.isEmptyUndoStack()) { - this._fireUndoStackChanged(); - } - promise = this._invokeUndo(command); - } else { - message = _consts.rejectMessages.undo; - if (this._isLocked) { - message = message + ' Because ' + _consts.rejectMessages.isLock; - } - promise = _util.Promise.reject(message); - } +// `Object.getPrototypeOf` method +// https://tc39.es/ecma262/#sec-object.getprototypeof +// eslint-disable-next-line es/no-object-getprototypeof -- safe +module.exports = CORRECT_PROTOTYPE_GETTER ? Object.getPrototypeOf : function (O) { + var object = toObject(O); + if (hasOwn(object, IE_PROTO)) return object[IE_PROTO]; + var constructor = object.constructor; + if (isCallable(constructor) && object instanceof constructor) { + return constructor.prototype; + } return object instanceof Object ? ObjectPrototype : null; +}; - return promise; - } - /** - * Redo command - * @returns {Promise} - */ +/***/ }), - }, { - key: 'redo', - value: function redo() { - var command = this._redoStack.pop(); - var promise = void 0; - var message = ''; +/***/ 7934: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - if (command && this._isLocked) { - this.pushRedoStack(command, true); - command = null; - } - if (command) { - if (this.isEmptyRedoStack()) { - this._fireRedoStackChanged(); - } - promise = this._invokeExecution(command, true); - } else { - message = _consts.rejectMessages.redo; - if (this._isLocked) { - message = message + ' Because ' + _consts.rejectMessages.isLock; - } - promise = _util.Promise.reject(message); - } +var hasOwn = __webpack_require__(4500); +var toIndexedObject = __webpack_require__(101); +var indexOf = __webpack_require__(8180).indexOf; +var hiddenKeys = __webpack_require__(4535); - return promise; - } +module.exports = function (object, names) { + var O = toIndexedObject(object); + var i = 0; + var result = []; + var key; + for (key in O) !hasOwn(hiddenKeys, key) && hasOwn(O, key) && result.push(key); + // Don't enum bug & hidden keys + while (names.length > i) if (hasOwn(O, key = names[i++])) { + ~indexOf(result, key) || result.push(key); + } + return result; +}; - /** - * Push undo stack - * @param {Command} command - command - * @param {boolean} [isSilent] - Fire event or not - */ - }, { - key: 'pushUndoStack', - value: function pushUndoStack(command, isSilent) { - this._undoStack.push(command); - if (!isSilent) { - this._fireUndoStackChanged(); - } - } +/***/ }), - /** - * Push redo stack - * @param {Command} command - command - * @param {boolean} [isSilent] - Fire event or not - */ +/***/ 7653: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'pushRedoStack', - value: function pushRedoStack(command, isSilent) { - this._redoStack.push(command); - if (!isSilent) { - this._fireRedoStackChanged(); - } - } +var internalObjectKeys = __webpack_require__(7934); +var enumBugKeys = __webpack_require__(2952); - /** - * Return whether the redoStack is empty - * @returns {boolean} - */ +// `Object.keys` method +// https://tc39.es/ecma262/#sec-object.keys +// eslint-disable-next-line es/no-object-keys -- safe +module.exports = Object.keys || function keys(O) { + return internalObjectKeys(O, enumBugKeys); +}; - }, { - key: 'isEmptyRedoStack', - value: function isEmptyRedoStack() { - return this._redoStack.length === 0; - } - /** - * Return whether the undoStack is empty - * @returns {boolean} - */ +/***/ }), - }, { - key: 'isEmptyUndoStack', - value: function isEmptyUndoStack() { - return this._undoStack.length === 0; - } +/***/ 6007: +/***/ (function(__unused_webpack_module, exports) { - /** - * Clear undoStack - */ +"use strict"; - }, { - key: 'clearUndoStack', - value: function clearUndoStack() { - if (!this.isEmptyUndoStack()) { - this._undoStack = []; - this._fireUndoStackChanged(); - } - } +var $propertyIsEnumerable = {}.propertyIsEnumerable; +// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe +var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor; - /** - * Clear redoStack - */ +// Nashorn ~ JDK8 bug +var NASHORN_BUG = getOwnPropertyDescriptor && !$propertyIsEnumerable.call({ 1: 2 }, 1); - }, { - key: 'clearRedoStack', - value: function clearRedoStack() { - if (!this.isEmptyRedoStack()) { - this._redoStack = []; - this._fireRedoStackChanged(); - } - } - }]); +// `Object.prototype.propertyIsEnumerable` method implementation +// https://tc39.es/ecma262/#sec-object.prototype.propertyisenumerable +exports.f = NASHORN_BUG ? function propertyIsEnumerable(V) { + var descriptor = getOwnPropertyDescriptor(this, V); + return !!descriptor && descriptor.enumerable; +} : $propertyIsEnumerable; - return Invoker; -}(); -CustomEvents.mixin(Invoker); +/***/ }), + +/***/ 4469: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { + +/* eslint-disable no-proto -- safe */ +var anObject = __webpack_require__(1138); +var aPossiblePrototype = __webpack_require__(7757); + +// `Object.setPrototypeOf` method +// https://tc39.es/ecma262/#sec-object.setprototypeof +// Works with __proto__ only. Old v8 can't work with null proto objects. +// eslint-disable-next-line es/no-object-setprototypeof -- safe +module.exports = Object.setPrototypeOf || ('__proto__' in {} ? function () { + var CORRECT_SETTER = false; + var test = {}; + var setter; + try { + // eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe + setter = Object.getOwnPropertyDescriptor(Object.prototype, '__proto__').set; + setter.call(test, []); + CORRECT_SETTER = test instanceof Array; + } catch (error) { /* empty */ } + return function setPrototypeOf(O, proto) { + anObject(O); + aPossiblePrototype(proto); + if (CORRECT_SETTER) setter.call(O, proto); + else O.__proto__ = proto; + return O; + }; +}() : undefined); -exports.default = Invoker; /***/ }), -/***/ "./src/js/polyfill.js": -/*!****************************!*\ - !*** ./src/js/polyfill.js ***! - \****************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +/***/ 158: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { "use strict"; +var TO_STRING_TAG_SUPPORT = __webpack_require__(3471); +var classof = __webpack_require__(4696); -// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest -// Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/if (!Element.prototype.matches) -Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; - -if (!Element.prototype.closest) Element.prototype.closest = function (s) { - var el = this; - if (!document.documentElement.contains(el)) return null; - do { - if (el.matches(s)) return el; - el = el.parentElement || el.parentNode; - } while (el !== null && el.nodeType === 1); - return null; +// `Object.prototype.toString` method implementation +// https://tc39.es/ecma262/#sec-object.prototype.tostring +module.exports = TO_STRING_TAG_SUPPORT ? {}.toString : function toString() { + return '[object ' + classof(this) + ']'; }; -/* - * classList.js: Cross-browser full element.classList implementation. - * 1.1.20170427 - * - * By Eli Grey, http://eligrey.com - * License: Dedicated to the public domain. - * See https://github.com/eligrey/classList.js/blob/master/LICENSE.md - */ -/*global self, document, DOMException */ +/***/ }), -/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */ +/***/ 380: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -if ('document' in window.self) { - // Full polyfill for browsers with no classList support - // Including IE < Edge missing SVGElement.classList - if (!('classList' in document.createElement('_')) || document.createElementNS && !('classList' in document.createElementNS('http://www.w3.org/2000/svg', 'g'))) { - (function (view) { - 'use strict'; +var isCallable = __webpack_require__(6447); +var isObject = __webpack_require__(5744); - if (!('Element' in view)) return; +// `OrdinaryToPrimitive` abstract operation +// https://tc39.es/ecma262/#sec-ordinarytoprimitive +module.exports = function (input, pref) { + var fn, val; + if (pref === 'string' && isCallable(fn = input.toString) && !isObject(val = fn.call(input))) return val; + if (isCallable(fn = input.valueOf) && !isObject(val = fn.call(input))) return val; + if (pref !== 'string' && isCallable(fn = input.toString) && !isObject(val = fn.call(input))) return val; + throw TypeError("Can't convert object to primitive value"); +}; - var classListProp = 'classList', - protoProp = 'prototype', - elemCtrProto = view.Element[protoProp], - objCtr = Object, - strTrim = String[protoProp].trim || function () { - return this.replace(/^\s+|\s+$/g, ''); - }, - arrIndexOf = Array[protoProp].indexOf || function (item) { - var i = 0, - len = this.length; - for (; i < len; i++) { - if (i in this && this[i] === item) { - return i; - } - } - return -1; - }, - // Vendors: please allow content code to instantiate DOMExceptions - DOMEx = function DOMEx(type, message) { - this.name = type; - this.code = DOMException[type]; - this.message = message; - }, - checkTokenAndGetIndex = function checkTokenAndGetIndex(classList, token) { - if (token === '') { - throw new DOMEx('SYNTAX_ERR', 'An invalid or illegal string was specified'); - } - if (/\s/.test(token)) { - throw new DOMEx('INVALID_CHARACTER_ERR', 'String contains an invalid character'); - } - return arrIndexOf.call(classList, token); - }, - ClassList = function ClassList(elem) { - var trimmedClasses = strTrim.call(elem.getAttribute('class') || ''), - classes = trimmedClasses ? trimmedClasses.split(/\s+/) : [], - i = 0, - len = classes.length; - for (; i < len; i++) { - this.push(classes[i]); - } - this._updateClassName = function () { - elem.setAttribute('class', this.toString()); - }; - }, - classListProto = ClassList[protoProp] = [], - classListGetter = function classListGetter() { - return new ClassList(this); - }; - // Most DOMException implementations don't allow calling DOMException's toString() - // on non-DOMExceptions. Error's toString() is sufficient here. - DOMEx[protoProp] = Error[protoProp]; - classListProto.item = function (i) { - return this[i] || null; - }; - classListProto.contains = function (token) { - token += ''; - return checkTokenAndGetIndex(this, token) !== -1; - }; - classListProto.add = function () { - var tokens = arguments, - i = 0, - l = tokens.length, - token, - updated = false; - do { - token = tokens[i] + ''; - if (checkTokenAndGetIndex(this, token) === -1) { - this.push(token); - updated = true; - } - } while (++i < l); +/***/ }), - if (updated) { - this._updateClassName(); - } - }; - classListProto.remove = function () { - var tokens = arguments, - i = 0, - l = tokens.length, - token, - updated = false, - index; - do { - token = tokens[i] + ''; - index = checkTokenAndGetIndex(this, token); - while (index !== -1) { - this.splice(index, 1); - updated = true; - index = checkTokenAndGetIndex(this, token); - } - } while (++i < l); +/***/ 7545: +/***/ (function(module) { - if (updated) { - this._updateClassName(); - } - }; - classListProto.toggle = function (token, force) { - token += ''; +module.exports = {}; - var result = this.contains(token), - method = result ? force !== true && 'remove' : force !== false && 'add'; - if (method) { - this[method](token); - } - if (force === true || force === false) { - return force; - } else { - return !result; - } - }; - classListProto.toString = function () { - return this.join(' '); - }; +/***/ }), - if (objCtr.defineProperty) { - var classListPropDesc = { - get: classListGetter, - enumerable: true, - configurable: true - }; - try { - objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); - } catch (ex) { - // IE 8 doesn't support enumerable:true - // adding undefined to fight this issue https://github.com/eligrey/classList.js/issues/36 - // modernie IE8-MSW7 machine has IE8 8.0.6001.18702 and is affected - if (ex.number === undefined || ex.number === -0x7ff5ec54) { - classListPropDesc.enumerable = false; - objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc); - } - } - } else if (objCtr[protoProp].__defineGetter__) { - elemCtrProto.__defineGetter__(classListProp, classListGetter); - } - })(window.self); +/***/ 892: +/***/ (function(module) { + +module.exports = function (exec) { + try { + return { error: false, value: exec() }; + } catch (error) { + return { error: true, value: error }; } +}; - // There is full or partial native classList support, so just check if we need - // to normalize the add/remove and toggle APIs. - (function () { - 'use strict'; +/***/ }), - var testElement = document.createElement('_'); +/***/ 9126: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - testElement.classList.add('c1', 'c2'); +var anObject = __webpack_require__(1138); +var isObject = __webpack_require__(5744); +var newPromiseCapability = __webpack_require__(9438); - // Polyfill for IE 10/11 and Firefox <26, where classList.add and - // classList.remove exist but support only one argument at a time. - if (!testElement.classList.contains('c2')) { - var createMethod = function createMethod(method) { - var original = DOMTokenList.prototype[method]; +module.exports = function (C, x) { + anObject(C); + if (isObject(x) && x.constructor === C) return x; + var promiseCapability = newPromiseCapability.f(C); + var resolve = promiseCapability.resolve; + resolve(x); + return promiseCapability.promise; +}; - DOMTokenList.prototype[method] = function (token) { - var i, - len = arguments.length; - for (i = 0; i < len; i++) { - token = arguments[i]; - original.call(this, token); - } - }; - }; - createMethod('add'); - createMethod('remove'); - } +/***/ }), - testElement.classList.toggle('c3', false); +/***/ 533: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - // Polyfill for IE 10 and Firefox <24, where classList.toggle does not - // support the second argument. - if (testElement.classList.contains('c3')) { - var _toggle = DOMTokenList.prototype.toggle; +var redefine = __webpack_require__(9482); - DOMTokenList.prototype.toggle = function (token, force) { - if (1 in arguments && !this.contains(token) === !force) { - return force; - } else { - return _toggle.call(this, token); - } - }; +module.exports = function (target, src, options) { + for (var key in src) { + if (options && options.unsafe && target[key]) target[key] = src[key]; + else redefine(target, key, src[key], options); + } return target; +}; + + +/***/ }), + +/***/ 9482: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { + +var createNonEnumerableProperty = __webpack_require__(8711); + +module.exports = function (target, key, value, options) { + if (options && options.enumerable) target[key] = value; + else createNonEnumerableProperty(target, key, value); +}; + + +/***/ }), + +/***/ 3209: +/***/ (function(module) { + +// `RequireObjectCoercible` abstract operation +// https://tc39.es/ecma262/#sec-requireobjectcoercible +module.exports = function (it) { + if (it == undefined) throw TypeError("Can't call method on " + it); + return it; +}; + + +/***/ }), + +/***/ 7613: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { + +var global = __webpack_require__(8576); + +module.exports = function (key, value) { + try { + // eslint-disable-next-line es/no-object-defineproperty -- safe + Object.defineProperty(global, key, { value: value, configurable: true, writable: true }); + } catch (error) { + global[key] = value; + } return value; +}; + + +/***/ }), + +/***/ 3656: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { + +"use strict"; + +var getBuiltIn = __webpack_require__(150); +var definePropertyModule = __webpack_require__(2760); +var wellKnownSymbol = __webpack_require__(8182); +var DESCRIPTORS = __webpack_require__(69); + +var SPECIES = wellKnownSymbol('species'); + +module.exports = function (CONSTRUCTOR_NAME) { + var Constructor = getBuiltIn(CONSTRUCTOR_NAME); + var defineProperty = definePropertyModule.f; + + if (DESCRIPTORS && Constructor && !Constructor[SPECIES]) { + defineProperty(Constructor, SPECIES, { + configurable: true, + get: function () { return this; } + }); + } +}; + + +/***/ }), + +/***/ 1284: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { + +var TO_STRING_TAG_SUPPORT = __webpack_require__(3471); +var defineProperty = __webpack_require__(2760).f; +var createNonEnumerableProperty = __webpack_require__(8711); +var hasOwn = __webpack_require__(4500); +var toString = __webpack_require__(158); +var wellKnownSymbol = __webpack_require__(8182); + +var TO_STRING_TAG = wellKnownSymbol('toStringTag'); + +module.exports = function (it, TAG, STATIC, SET_METHOD) { + if (it) { + var target = STATIC ? it : it.prototype; + if (!hasOwn(target, TO_STRING_TAG)) { + defineProperty(target, TO_STRING_TAG, { configurable: true, value: TAG }); + } + if (SET_METHOD && !TO_STRING_TAG_SUPPORT) { + createNonEnumerableProperty(target, 'toString', toString); } + } +}; - testElement = null; - })(); -} -/*! - * @copyright Copyright (c) 2017 IcoMoon.io - * @license Licensed under MIT license - * See https://github.com/Keyamoon/svgxuse - * @version 1.2.6 - */ -/*jslint browser: true */ -/*global XDomainRequest, MutationObserver, window */ -(function () { - 'use strict'; +/***/ }), - if (typeof window !== 'undefined' && window.addEventListener) { - var cache = Object.create(null); // holds xhr objects to prevent multiple requests - var checkUseElems; - var tid; // timeout id - var debouncedCheck = function debouncedCheck() { - clearTimeout(tid); - tid = setTimeout(checkUseElems, 100); - }; - var unobserveChanges = function unobserveChanges() { - return; - }; - var observeChanges = function observeChanges() { - var observer; - window.addEventListener('resize', debouncedCheck, false); - window.addEventListener('orientationchange', debouncedCheck, false); - if (window.MutationObserver) { - observer = new MutationObserver(debouncedCheck); - observer.observe(document.documentElement, { - childList: true, - subtree: true, - attributes: true - }); - unobserveChanges = function unobserveChanges() { - try { - observer.disconnect(); - window.removeEventListener('resize', debouncedCheck, false); - window.removeEventListener('orientationchange', debouncedCheck, false); - } catch (ignore) {} - }; - } else { - document.documentElement.addEventListener('DOMSubtreeModified', debouncedCheck, false); - unobserveChanges = function unobserveChanges() { - document.documentElement.removeEventListener('DOMSubtreeModified', debouncedCheck, false); - window.removeEventListener('resize', debouncedCheck, false); - window.removeEventListener('orientationchange', debouncedCheck, false); - }; - } - }; - var createRequest = function createRequest(url) { - // In IE 9, cross origin requests can only be sent using XDomainRequest. - // XDomainRequest would fail if CORS headers are not set. - // Therefore, XDomainRequest should only be used with cross origin requests. - function getOrigin(loc) { - var a; - if (loc.protocol !== undefined) { - a = loc; - } else { - a = document.createElement('a'); - a.href = loc; - } - return a.protocol.replace(/:/g, '') + a.host; - } - var Request; - var origin; - var origin2; - if (window.XMLHttpRequest) { - Request = new XMLHttpRequest(); - origin = getOrigin(location); - origin2 = getOrigin(url); - if (Request.withCredentials === undefined && origin2 !== '' && origin2 !== origin) { - Request = XDomainRequest || undefined; - } else { - Request = XMLHttpRequest; - } - } - return Request; - }; - var xlinkNS = 'http://www.w3.org/1999/xlink'; - checkUseElems = function checkUseElems() { - var base; - var bcr; - var fallback = ''; // optional fallback URL in case no base path to SVG file was given and no symbol definition was found. - var hash; - var href; - var i; - var inProgressCount = 0; - var isHidden; - var Request; - var url; - var uses; - var xhr; - function observeIfDone() { - // If done with making changes, start watching for chagnes in DOM again - inProgressCount -= 1; - if (inProgressCount === 0) { - // if all xhrs were resolved - unobserveChanges(); // make sure to remove old handlers - observeChanges(); // watch for changes to DOM - } - } - function attrUpdateFunc(spec) { - return function () { - if (cache[spec.base] !== true) { - spec.useEl.setAttributeNS(xlinkNS, 'xlink:href', '#' + spec.hash); - if (spec.useEl.hasAttribute('href')) { - spec.useEl.setAttribute('href', '#' + spec.hash); - } - } - }; - } - function onloadFunc(xhr) { - return function () { - var body = document.body; - var x = document.createElement('x'); - var svg; - xhr.onload = null; - x.innerHTML = xhr.responseText; - svg = x.getElementsByTagName('svg')[0]; - if (svg) { - svg.setAttribute('aria-hidden', 'true'); - svg.style.position = 'absolute'; - svg.style.width = 0; - svg.style.height = 0; - svg.style.overflow = 'hidden'; - body.insertBefore(svg, body.firstChild); - } - observeIfDone(); - }; - } - function onErrorTimeout(xhr) { - return function () { - xhr.onerror = null; - xhr.ontimeout = null; - observeIfDone(); - }; - } - unobserveChanges(); // stop watching for changes to DOM - // find all use elements - uses = document.getElementsByTagName('use'); - for (i = 0; i < uses.length; i += 1) { - try { - bcr = uses[i].getBoundingClientRect(); - } catch (ignore) { - // failed to get bounding rectangle of the use element - bcr = false; - } - href = uses[i].getAttribute('href') || uses[i].getAttributeNS(xlinkNS, 'href') || uses[i].getAttribute('xlink:href'); - if (href && href.split) { - url = href.split('#'); - } else { - url = ['', '']; - } - base = url[0]; - hash = url[1]; - isHidden = bcr && bcr.left === 0 && bcr.right === 0 && bcr.top === 0 && bcr.bottom === 0; - if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) { - // the use element is empty - // if there is a reference to an external SVG, try to fetch it - // use the optional fallback URL if there is no reference to an external SVG - if (fallback && !base.length && hash && !document.getElementById(hash)) { - base = fallback; - } - if (uses[i].hasAttribute('href')) { - uses[i].setAttributeNS(xlinkNS, 'xlink:href', href); - } - if (base.length) { - // schedule updating xlink:href - xhr = cache[base]; - if (xhr !== true) { - // true signifies that prepending the SVG was not required - setTimeout(attrUpdateFunc({ - useEl: uses[i], - base: base, - hash: hash - }), 0); - } - if (xhr === undefined) { - Request = createRequest(base); - if (Request !== undefined) { - xhr = new Request(); - cache[base] = xhr; - xhr.onload = onloadFunc(xhr); - xhr.onerror = onErrorTimeout(xhr); - xhr.ontimeout = onErrorTimeout(xhr); - xhr.open('GET', base); - xhr.send(); - inProgressCount += 1; - } - } - } - } else { - if (!isHidden) { - if (cache[base] === undefined) { - // remember this URL if the use element was not empty and no request was sent - cache[base] = true; - } else if (cache[base].onload) { - // if it turns out that prepending the SVG is not necessary, - // abort the in-progress xhr. - cache[base].abort(); - delete cache[base].onload; - cache[base] = true; - } - } else if (base.length && cache[base]) { - setTimeout(attrUpdateFunc({ - useEl: uses[i], - base: base, - hash: hash - }), 0); - } - } - } - uses = ''; - inProgressCount += 1; - observeIfDone(); - }; - var _winLoad; - _winLoad = function winLoad() { - window.removeEventListener('load', _winLoad, false); // to prevent memory leaks - tid = setTimeout(checkUseElems, 0); - }; - if (document.readyState !== 'complete') { - // The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty. - window.addEventListener('load', _winLoad, false); - } else { - // No need to add a listener if the document is already loaded, initialize immediately. - _winLoad(); - } - } -})(); - -/***/ }), +/***/ 9766: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -/***/ "./src/js/ui.js": -/*!**********************!*\ - !*** ./src/js/ui.js ***! - \**********************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +var shared = __webpack_require__(8717); +var uid = __webpack_require__(2759); -"use strict"; +var keys = shared('keys'); +module.exports = function (key) { + return keys[key] || (keys[key] = uid(key)); +}; -Object.defineProperty(exports, "__esModule", { - value: true -}); -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); +/***/ }), -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); +/***/ 6434: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); +var global = __webpack_require__(8576); +var setGlobal = __webpack_require__(7613); -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); +var SHARED = '__core-js_shared__'; +var store = global[SHARED] || setGlobal(SHARED, {}); -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); +module.exports = store; -var _mainContainer = __webpack_require__(/*! @/ui/template/mainContainer */ "./src/js/ui/template/mainContainer.js"); -var _mainContainer2 = _interopRequireDefault(_mainContainer); +/***/ }), -var _controls = __webpack_require__(/*! @/ui/template/controls */ "./src/js/ui/template/controls.js"); +/***/ 8717: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -var _controls2 = _interopRequireDefault(_controls); +var IS_PURE = __webpack_require__(5546); +var store = __webpack_require__(6434); -var _theme = __webpack_require__(/*! @/ui/theme/theme */ "./src/js/ui/theme/theme.js"); +(module.exports = function (key, value) { + return store[key] || (store[key] = value !== undefined ? value : {}); +})('versions', []).push({ + version: '3.18.2', + mode: IS_PURE ? 'pure' : 'global', + copyright: '© 2021 Denis Pushkarev (zloirock.ru)' +}); -var _theme2 = _interopRequireDefault(_theme); -var _shape = __webpack_require__(/*! @/ui/shape */ "./src/js/ui/shape.js"); +/***/ }), -var _shape2 = _interopRequireDefault(_shape); +/***/ 4743: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -var _crop = __webpack_require__(/*! @/ui/crop */ "./src/js/ui/crop.js"); +var anObject = __webpack_require__(1138); +var aConstructor = __webpack_require__(1404); +var wellKnownSymbol = __webpack_require__(8182); -var _crop2 = _interopRequireDefault(_crop); +var SPECIES = wellKnownSymbol('species'); -var _resize = __webpack_require__(/*! @/ui/resize */ "./src/js/ui/resize.js"); +// `SpeciesConstructor` abstract operation +// https://tc39.es/ecma262/#sec-speciesconstructor +module.exports = function (O, defaultConstructor) { + var C = anObject(O).constructor; + var S; + return C === undefined || (S = anObject(C)[SPECIES]) == undefined ? defaultConstructor : aConstructor(S); +}; -var _resize2 = _interopRequireDefault(_resize); -var _flip = __webpack_require__(/*! @/ui/flip */ "./src/js/ui/flip.js"); +/***/ }), -var _flip2 = _interopRequireDefault(_flip); +/***/ 863: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -var _rotate = __webpack_require__(/*! @/ui/rotate */ "./src/js/ui/rotate.js"); +var toIntegerOrInfinity = __webpack_require__(1941); +var toString = __webpack_require__(4845); +var requireObjectCoercible = __webpack_require__(3209); -var _rotate2 = _interopRequireDefault(_rotate); +var createMethod = function (CONVERT_TO_STRING) { + return function ($this, pos) { + var S = toString(requireObjectCoercible($this)); + var position = toIntegerOrInfinity(pos); + var size = S.length; + var first, second; + if (position < 0 || position >= size) return CONVERT_TO_STRING ? '' : undefined; + first = S.charCodeAt(position); + return first < 0xD800 || first > 0xDBFF || position + 1 === size + || (second = S.charCodeAt(position + 1)) < 0xDC00 || second > 0xDFFF + ? CONVERT_TO_STRING ? S.charAt(position) : first + : CONVERT_TO_STRING ? S.slice(position, position + 2) : (first - 0xD800 << 10) + (second - 0xDC00) + 0x10000; + }; +}; -var _text = __webpack_require__(/*! @/ui/text */ "./src/js/ui/text.js"); +module.exports = { + // `String.prototype.codePointAt` method + // https://tc39.es/ecma262/#sec-string.prototype.codepointat + codeAt: createMethod(false), + // `String.prototype.at` method + // https://github.com/mathiasbynens/String.prototype.at + charAt: createMethod(true) +}; -var _text2 = _interopRequireDefault(_text); -var _mask = __webpack_require__(/*! @/ui/mask */ "./src/js/ui/mask.js"); +/***/ }), -var _mask2 = _interopRequireDefault(_mask); +/***/ 7977: +/***/ (function(module) { -var _icon = __webpack_require__(/*! @/ui/icon */ "./src/js/ui/icon.js"); +"use strict"; -var _icon2 = _interopRequireDefault(_icon); +// based on https://github.com/bestiejs/punycode.js/blob/master/punycode.js +var maxInt = 2147483647; // aka. 0x7FFFFFFF or 2^31-1 +var base = 36; +var tMin = 1; +var tMax = 26; +var skew = 38; +var damp = 700; +var initialBias = 72; +var initialN = 128; // 0x80 +var delimiter = '-'; // '\x2D' +var regexNonASCII = /[^\0-\u007E]/; // non-ASCII chars +var regexSeparators = /[.\u3002\uFF0E\uFF61]/g; // RFC 3490 separators +var OVERFLOW_ERROR = 'Overflow: input needs wider integers to process'; +var baseMinusTMin = base - tMin; +var floor = Math.floor; +var stringFromCharCode = String.fromCharCode; -var _draw = __webpack_require__(/*! @/ui/draw */ "./src/js/ui/draw.js"); +/** + * Creates an array containing the numeric code points of each Unicode + * character in the string. While JavaScript uses UCS-2 internally, + * this function will convert a pair of surrogate halves (each of which + * UCS-2 exposes as separate characters) into a single code point, + * matching UTF-16. + */ +var ucs2decode = function (string) { + var output = []; + var counter = 0; + var length = string.length; + while (counter < length) { + var value = string.charCodeAt(counter++); + if (value >= 0xD800 && value <= 0xDBFF && counter < length) { + // It's a high surrogate, and there is a next character. + var extra = string.charCodeAt(counter++); + if ((extra & 0xFC00) == 0xDC00) { // Low surrogate. + output.push(((value & 0x3FF) << 10) + (extra & 0x3FF) + 0x10000); + } else { + // It's an unmatched surrogate; only append this code unit, in case the + // next code unit is the high surrogate of a surrogate pair. + output.push(value); + counter--; + } + } else { + output.push(value); + } + } + return output; +}; -var _draw2 = _interopRequireDefault(_draw); +/** + * Converts a digit/integer into a basic code point. + */ +var digitToBasic = function (digit) { + // 0..25 map to ASCII a..z or A..Z + // 26..35 map to ASCII 0..9 + return digit + 22 + 75 * (digit < 26); +}; -var _filter = __webpack_require__(/*! @/ui/filter */ "./src/js/ui/filter.js"); +/** + * Bias adaptation function as per section 3.4 of RFC 3492. + * https://tools.ietf.org/html/rfc3492#section-3.4 + */ +var adapt = function (delta, numPoints, firstTime) { + var k = 0; + delta = firstTime ? floor(delta / damp) : delta >> 1; + delta += floor(delta / numPoints); + for (; delta > baseMinusTMin * tMax >> 1; k += base) { + delta = floor(delta / baseMinusTMin); + } + return floor(k + (baseMinusTMin + 1) * delta / (delta + skew)); +}; -var _filter2 = _interopRequireDefault(_filter); +/** + * Converts a string of Unicode symbols (e.g. a domain name label) to a + * Punycode string of ASCII-only symbols. + */ +// eslint-disable-next-line max-statements -- TODO +var encode = function (input) { + var output = []; -var _history = __webpack_require__(/*! @/ui/history */ "./src/js/ui/history.js"); + // Convert the input in UCS-2 to an array of Unicode code points. + input = ucs2decode(input); -var _history2 = _interopRequireDefault(_history); + // Cache the length. + var inputLength = input.length; -var _locale = __webpack_require__(/*! @/ui/locale/locale */ "./src/js/ui/locale/locale.js"); + // Initialize the state. + var n = initialN; + var delta = 0; + var bias = initialBias; + var i, currentValue; -var _locale2 = _interopRequireDefault(_locale); + // Handle the basic code points. + for (i = 0; i < input.length; i++) { + currentValue = input[i]; + if (currentValue < 0x80) { + output.push(stringFromCharCode(currentValue)); + } + } -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + var basicLength = output.length; // number of basic code points. + var handledCPCount = basicLength; // number of code points that have been handled; -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + // Finish the basic string with a delimiter unless it's empty. + if (basicLength) { + output.push(delimiter); + } -var SUB_UI_COMPONENT = { - Shape: _shape2.default, - Crop: _crop2.default, - Resize: _resize2.default, - Flip: _flip2.default, - Rotate: _rotate2.default, - Text: _text2.default, - Mask: _mask2.default, - Icon: _icon2.default, - Draw: _draw2.default, - Filter: _filter2.default -}; + // Main encoding loop: + while (handledCPCount < inputLength) { + // All non-basic code points < n have been handled already. Find the next larger one: + var m = maxInt; + for (i = 0; i < input.length; i++) { + currentValue = input[i]; + if (currentValue >= n && currentValue < m) { + m = currentValue; + } + } + + // Increase `delta` enough to advance the decoder's state to , but guard against overflow. + var handledCPCountPlusOne = handledCPCount + 1; + if (m - n > floor((maxInt - delta) / handledCPCountPlusOne)) { + throw RangeError(OVERFLOW_ERROR); + } + + delta += (m - n) * handledCPCountPlusOne; + n = m; + + for (i = 0; i < input.length; i++) { + currentValue = input[i]; + if (currentValue < n && ++delta > maxInt) { + throw RangeError(OVERFLOW_ERROR); + } + if (currentValue == n) { + // Represent delta as a generalized variable-length integer. + var q = delta; + for (var k = base; /* no condition */; k += base) { + var t = k <= bias ? tMin : (k >= bias + tMax ? tMax : k - bias); + if (q < t) break; + var qMinusT = q - t; + var baseMinusT = base - t; + output.push(stringFromCharCode(digitToBasic(t + qMinusT % baseMinusT))); + q = floor(qMinusT / baseMinusT); + } -var CustomEvents = _tuiCodeSnippet2.default.CustomEvents; - - -var BI_EXPRESSION_MINSIZE_WHEN_TOP_POSITION = '1300'; -var HISTORY_MENU = 'history'; -var HISTORY_PANEL_CLASS_NAME = 'tie-panel-history'; + output.push(stringFromCharCode(digitToBasic(q))); + bias = adapt(delta, handledCPCountPlusOne, handledCPCount == basicLength); + delta = 0; + ++handledCPCount; + } + } -var CLASS_NAME_ON = 'on'; -var ZOOM_BUTTON_TYPE = { - ZOOM_IN: 'zoomIn', - HAND: 'hand' + ++delta; + ++n; + } + return output.join(''); }; -/** - * Default UI Class - * @class - * @param {string|HTMLElement} element - Wrapper's element or selector - * @param {Object} [options] - Ui setting options - * @param {number} options.loadImage - Init default load image - * @param {number} options.initMenu - Init start menu - * @param {Boolean} [options.menuBarPosition=bottom] - Let - * @param {Boolean} [options.applyCropSelectionStyle=false] - Let - * @param {Boolean} [options.usageStatistics=false] - Use statistics or not - * @param {Object} [options.uiSize] - ui size of editor - * @param {string} options.uiSize.width - width of ui - * @param {string} options.uiSize.height - height of ui - * @param {Object} actions - ui action instance - */ - -var Ui = function () { - function Ui(element, options, actions) { - _classCallCheck(this, Ui); +module.exports = function (input) { + var encoded = []; + var labels = input.toLowerCase().replace(regexSeparators, '\u002E').split('.'); + var i, label; + for (i = 0; i < labels.length; i++) { + label = labels[i]; + encoded.push(regexNonASCII.test(label) ? 'xn--' + encode(label) : label); + } + return encoded.join('.'); +}; - this.options = this._initializeOption(options); - this._actions = actions; - this.submenu = false; - this.imageSize = {}; - this.uiSize = {}; - this._locale = new _locale2.default(this.options.locale); - this.theme = new _theme2.default(this.options.theme); - this.eventHandler = {}; - this._submenuChangeTransection = false; - this._selectedElement = null; - this._mainElement = null; - this._editorElementWrap = null; - this._editorElement = null; - this._menuBarElement = null; - this._subMenuElement = null; - this._makeUiElement(element); - this._setUiSize(); - this._initMenuEvent = false; - this._makeSubMenu(); +/***/ }), - this._attachHistoryEvent(); - this._attachZoomEvent(); - } +/***/ 6815: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Destroys the instance. - */ +var PROPER_FUNCTION_NAME = __webpack_require__(2282).PROPER; +var fails = __webpack_require__(6192); +var whitespaces = __webpack_require__(1450); +var non = '\u200B\u0085\u180E'; - _createClass(Ui, [{ - key: 'destroy', - value: function destroy() { - this._removeUiEvent(); - this._destroyAllMenu(); - this._selectedElement.innerHTML = ''; +// check that a method works with the correct list +// of whitespaces and has a correct name +module.exports = function (METHOD_NAME) { + return fails(function () { + return !!whitespaces[METHOD_NAME]() + || non[METHOD_NAME]() !== non + || (PROPER_FUNCTION_NAME && whitespaces[METHOD_NAME].name !== METHOD_NAME); + }); +}; - (0, _util.assignmentForDestroy)(this); - } - /** - * Set Default Selection for includeUI - * @param {Object} option - imageEditor options - * @returns {Object} - extends selectionStyle option - * @ignore - */ +/***/ }), - }, { - key: 'setUiDefaultSelectionStyle', - value: function setUiDefaultSelectionStyle(option) { - return _tuiCodeSnippet2.default.extend({ - applyCropSelectionStyle: true, - applyGroupSelectionStyle: true, - selectionStyle: { - cornerStyle: 'circle', - cornerSize: 16, - cornerColor: '#fff', - cornerStrokeColor: '#fff', - transparentCorners: false, - lineWidth: 2, - borderColor: '#fff' - } - }, option); - } +/***/ 4277: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Change editor size - * @param {Object} resizeInfo - ui & image size info - * @param {Object} [resizeInfo.uiSize] - image size dimension - * @param {string} resizeInfo.uiSize.width - ui width - * @param {string} resizeInfo.uiSize.height - ui height - * @param {Object} [resizeInfo.imageSize] - image size dimension - * @param {Number} resizeInfo.imageSize.oldWidth - old width - * @param {Number} resizeInfo.imageSize.oldHeight - old height - * @param {Number} resizeInfo.imageSize.newWidth - new width - * @param {Number} resizeInfo.imageSize.newHeight - new height - * @example - * // Change the image size and ui size, and change the affected ui state together. - * imageEditor.ui.resizeEditor({ - * imageSize: {oldWidth: 100, oldHeight: 100, newWidth: 700, newHeight: 700}, - * uiSize: {width: 1000, height: 1000} - * }); - * @example - * // Apply the ui state while preserving the previous attribute (for example, if responsive Ui) - * imageEditor.ui.resizeEditor(); - */ +var requireObjectCoercible = __webpack_require__(3209); +var toString = __webpack_require__(4845); +var whitespaces = __webpack_require__(1450); - }, { - key: 'resizeEditor', - value: function resizeEditor() { - var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, - uiSize = _ref.uiSize, - _ref$imageSize = _ref.imageSize, - imageSize = _ref$imageSize === undefined ? this.imageSize : _ref$imageSize; +var whitespace = '[' + whitespaces + ']'; +var ltrim = RegExp('^' + whitespace + whitespace + '*'); +var rtrim = RegExp(whitespace + whitespace + '*$'); - if (imageSize !== this.imageSize) { - this.imageSize = imageSize; - } - if (uiSize) { - this._setUiSize(uiSize); - } +// `String.prototype.{ trim, trimStart, trimEnd, trimLeft, trimRight }` methods implementation +var createMethod = function (TYPE) { + return function ($this) { + var string = toString(requireObjectCoercible($this)); + if (TYPE & 1) string = string.replace(ltrim, ''); + if (TYPE & 2) string = string.replace(rtrim, ''); + return string; + }; +}; - var _getCanvasMaxDimensio = this._getCanvasMaxDimension(), - width = _getCanvasMaxDimensio.width, - height = _getCanvasMaxDimensio.height; +module.exports = { + // `String.prototype.{ trimLeft, trimStart }` methods + // https://tc39.es/ecma262/#sec-string.prototype.trimstart + start: createMethod(1), + // `String.prototype.{ trimRight, trimEnd }` methods + // https://tc39.es/ecma262/#sec-string.prototype.trimend + end: createMethod(2), + // `String.prototype.trim` method + // https://tc39.es/ecma262/#sec-string.prototype.trim + trim: createMethod(3) +}; - var editorElementStyle = this._editorElement.style; - var menuBarPosition = this.options.menuBarPosition; +/***/ }), - editorElementStyle.height = height + 'px'; - editorElementStyle.width = width + 'px'; +/***/ 7160: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - this._setEditorPosition(menuBarPosition); +var global = __webpack_require__(8576); +var isCallable = __webpack_require__(6447); +var fails = __webpack_require__(6192); +var bind = __webpack_require__(8043); +var html = __webpack_require__(7403); +var createElement = __webpack_require__(7449); +var IS_IOS = __webpack_require__(9536); +var IS_NODE = __webpack_require__(224); - this._editorElementWrap.style.bottom = '0px'; - this._editorElementWrap.style.top = '0px'; - this._editorElementWrap.style.left = '0px'; - this._editorElementWrap.style.width = '100%'; +var set = global.setImmediate; +var clear = global.clearImmediate; +var process = global.process; +var MessageChannel = global.MessageChannel; +var Dispatch = global.Dispatch; +var counter = 0; +var queue = {}; +var ONREADYSTATECHANGE = 'onreadystatechange'; +var location, defer, channel, port; - var selectElementClassList = this._selectedElement.classList; +try { + // Deno throws a ReferenceError on `location` access without `--location` flag + location = global.location; +} catch (error) { /* empty */ } - if (menuBarPosition === 'top' && this._selectedElement.offsetWidth < BI_EXPRESSION_MINSIZE_WHEN_TOP_POSITION) { - selectElementClassList.add('tui-image-editor-top-optimization'); - } else { - selectElementClassList.remove('tui-image-editor-top-optimization'); - } - } +var run = function (id) { + // eslint-disable-next-line no-prototype-builtins -- safe + if (queue.hasOwnProperty(id)) { + var fn = queue[id]; + delete queue[id]; + fn(); + } +}; - /** - * Toggle zoom button status - * @param {string} type - type of zoom button - */ +var runner = function (id) { + return function () { + run(id); + }; +}; - }, { - key: 'toggleZoomButtonStatus', - value: function toggleZoomButtonStatus(type) { - var targetClassList = this._buttonElements[type].classList; +var listener = function (event) { + run(event.data); +}; - targetClassList.toggle(CLASS_NAME_ON); +var post = function (id) { + // old engines have not location.origin + global.postMessage(String(id), location.protocol + '//' + location.host); +}; - if (type === ZOOM_BUTTON_TYPE.ZOOM_IN) { - this._buttonElements[ZOOM_BUTTON_TYPE.HAND].classList.remove(CLASS_NAME_ON); - } else { - this._buttonElements[ZOOM_BUTTON_TYPE.ZOOM_IN].classList.remove(CLASS_NAME_ON); - } - } +// Node.js 0.9+ & IE10+ has setImmediate, otherwise: +if (!set || !clear) { + set = function setImmediate(fn) { + var args = []; + var argumentsLength = arguments.length; + var i = 1; + while (argumentsLength > i) args.push(arguments[i++]); + queue[++counter] = function () { + // eslint-disable-next-line no-new-func -- spec requirement + (isCallable(fn) ? fn : Function(fn)).apply(undefined, args); + }; + defer(counter); + return counter; + }; + clear = function clearImmediate(id) { + delete queue[id]; + }; + // Node.js 0.8- + if (IS_NODE) { + defer = function (id) { + process.nextTick(runner(id)); + }; + // Sphere (JS game engine) Dispatch API + } else if (Dispatch && Dispatch.now) { + defer = function (id) { + Dispatch.now(runner(id)); + }; + // Browsers with MessageChannel, includes WebWorkers + // except iOS - https://github.com/zloirock/core-js/issues/624 + } else if (MessageChannel && !IS_IOS) { + channel = new MessageChannel(); + port = channel.port2; + channel.port1.onmessage = listener; + defer = bind(port.postMessage, port, 1); + // Browsers with postMessage, skip WebWorkers + // IE8 has postMessage, but it's sync & typeof its postMessage is 'object' + } else if ( + global.addEventListener && + isCallable(global.postMessage) && + !global.importScripts && + location && location.protocol !== 'file:' && + !fails(post) + ) { + defer = post; + global.addEventListener('message', listener, false); + // IE8- + } else if (ONREADYSTATECHANGE in createElement('script')) { + defer = function (id) { + html.appendChild(createElement('script'))[ONREADYSTATECHANGE] = function () { + html.removeChild(this); + run(id); + }; + }; + // Rest old browsers + } else { + defer = function (id) { + setTimeout(runner(id), 0); + }; + } +} - /** - * Turn off zoom-in button status - */ +module.exports = { + set: set, + clear: clear +}; - }, { - key: 'offZoomInButtonStatus', - value: function offZoomInButtonStatus() { - var zoomInClassList = this._buttonElements[ZOOM_BUTTON_TYPE.ZOOM_IN].classList; - zoomInClassList.remove(CLASS_NAME_ON); - } +/***/ }), - /** - * Change hand button status - * @param {boolean} enabled - status to change - */ +/***/ 7739: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'changeHandButtonStatus', - value: function changeHandButtonStatus(enabled) { - var handClassList = this._buttonElements[ZOOM_BUTTON_TYPE.HAND].classList; +var toIntegerOrInfinity = __webpack_require__(1941); - handClassList[enabled ? 'add' : 'remove'](CLASS_NAME_ON); - } +var max = Math.max; +var min = Math.min; - /** - * Change help button status - * @param {string} buttonType - target button type - * @param {Boolean} enableStatus - enabled status - * @ignore - */ +// Helper for a popular repeating case of the spec: +// Let integer be ? ToInteger(index). +// If integer < 0, let result be max((length + integer), 0); else let result be min(integer, length). +module.exports = function (index, length) { + var integer = toIntegerOrInfinity(index); + return integer < 0 ? max(integer + length, 0) : min(integer, length); +}; - }, { - key: 'changeHelpButtonEnabled', - value: function changeHelpButtonEnabled(buttonType, enableStatus) { - var buttonClassList = this._buttonElements[buttonType].classList; - buttonClassList[enableStatus ? 'add' : 'remove']('enabled'); - } +/***/ }), - /** - * Change delete button status - * @param {Object} [options] - Ui setting options - * @param {object} [options.loadImage] - Init default load image - * @param {string} [options.initMenu] - Init start menu - * @param {string} [options.menuBarPosition=bottom] - Let - * @param {boolean} [options.applyCropSelectionStyle=false] - Let - * @param {boolean} [options.usageStatistics=false] - Send statistics ping or not - * @returns {Object} initialize option - * @private - */ +/***/ 101: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: '_initializeOption', - value: function _initializeOption(options) { - return _tuiCodeSnippet2.default.extend({ - loadImage: { - path: '', - name: '' - }, - locale: {}, - menuIconPath: '', - menu: ['resize', 'crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'], - initMenu: '', - uiSize: { - width: '100%', - height: '100%' - }, - menuBarPosition: 'bottom' - }, options); - } +// toObject with fallback for non-array-like ES3 strings +var IndexedObject = __webpack_require__(2202); +var requireObjectCoercible = __webpack_require__(3209); - /** - * Set ui container size - * @param {Object} uiSize - ui dimension - * @param {string} uiSize.width - css width property - * @param {string} uiSize.height - css height property - * @private - */ +module.exports = function (it) { + return IndexedObject(requireObjectCoercible(it)); +}; - }, { - key: '_setUiSize', - value: function _setUiSize() { - var uiSize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.options.uiSize; - var elementDimension = this._selectedElement.style; - elementDimension.width = uiSize.width; - elementDimension.height = uiSize.height; - } +/***/ }), - /** - * Make submenu dom element - * @private - */ +/***/ 1941: +/***/ (function(module) { - }, { - key: '_makeSubMenu', - value: function _makeSubMenu() { - var _this = this; +var ceil = Math.ceil; +var floor = Math.floor; - _tuiCodeSnippet2.default.forEach(this.options.menu, function (menuName) { - var SubComponentClass = SUB_UI_COMPONENT[menuName.replace(/^[a-z]/, function ($0) { - return $0.toUpperCase(); - })]; +// `ToIntegerOrInfinity` abstract operation +// https://tc39.es/ecma262/#sec-tointegerorinfinity +module.exports = function (argument) { + var number = +argument; + // eslint-disable-next-line no-self-compare -- safe + return number !== number || number === 0 ? 0 : (number > 0 ? floor : ceil)(number); +}; - // make menu element - _this._makeMenuElement(menuName); - // menu btn element - _this._buttonElements[menuName] = _this._menuBarElement.querySelector('.tie-btn-' + menuName); +/***/ }), - // submenu ui instance - _this[menuName] = new SubComponentClass(_this._subMenuElement, { - locale: _this._locale, - makeSvgIcon: _this.theme.makeMenSvgIconSet.bind(_this.theme), - menuBarPosition: _this.options.menuBarPosition, - usageStatistics: _this.options.usageStatistics - }); - }); - } +/***/ 8445: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Attach history event - * @private - */ +var toIntegerOrInfinity = __webpack_require__(1941); - }, { - key: '_attachHistoryEvent', - value: function _attachHistoryEvent() { - this.on(_consts.eventNames.EXECUTE_COMMAND, this._addHistory.bind(this)); - this.on(_consts.eventNames.AFTER_UNDO, this._selectPrevHistory.bind(this)); - this.on(_consts.eventNames.AFTER_REDO, this._selectNextHistory.bind(this)); - } +var min = Math.min; - /** - * Attach zoom event - * @private - */ +// `ToLength` abstract operation +// https://tc39.es/ecma262/#sec-tolength +module.exports = function (argument) { + return argument > 0 ? min(toIntegerOrInfinity(argument), 0x1FFFFFFFFFFFFF) : 0; // 2 ** 53 - 1 == 9007199254740991 +}; - }, { - key: '_attachZoomEvent', - value: function _attachZoomEvent() { - var _this2 = this; - this.on(_consts.eventNames.HAND_STARTED, function () { - _this2.offZoomInButtonStatus(); - _this2.changeHandButtonStatus(true); - }); - this.on(_consts.eventNames.HAND_STOPPED, function () { - return _this2.changeHandButtonStatus(false); - }); - } +/***/ }), - /** - * Make primary ui dom element - * @param {string|HTMLElement} element - Wrapper's element or selector - * @private - */ +/***/ 1795: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: '_makeUiElement', - value: function _makeUiElement(element) { - var selectedElement = void 0; +var requireObjectCoercible = __webpack_require__(3209); - window.snippet = _tuiCodeSnippet2.default; +// `ToObject` abstract operation +// https://tc39.es/ecma262/#sec-toobject +module.exports = function (argument) { + return Object(requireObjectCoercible(argument)); +}; - if (element.nodeType) { - selectedElement = element; - } else { - selectedElement = document.querySelector(element); - } - var selector = (0, _util.getSelector)(selectedElement); - selectedElement.classList.add('tui-image-editor-container'); - selectedElement.innerHTML = (0, _controls2.default)({ - locale: this._locale, - biImage: this.theme.getStyle('common.bi'), - loadButtonStyle: this.theme.getStyle('loadButton'), - downloadButtonStyle: this.theme.getStyle('downloadButton'), - menuBarPosition: this.options.menuBarPosition - }) + (0, _mainContainer2.default)({ - locale: this._locale, - biImage: this.theme.getStyle('common.bi'), - commonStyle: this.theme.getStyle('common'), - headerStyle: this.theme.getStyle('header'), - loadButtonStyle: this.theme.getStyle('loadButton'), - downloadButtonStyle: this.theme.getStyle('downloadButton'), - submenuStyle: this.theme.getStyle('submenu') - }); +/***/ }), - this._selectedElement = selectedElement; - this._selectedElement.classList.add(this.options.menuBarPosition); +/***/ 7888: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - this._mainElement = selector('.tui-image-editor-main'); - this._editorElementWrap = selector('.tui-image-editor-wrap'); - this._editorElement = selector('.tui-image-editor'); - this._helpMenuBarElement = selector('.tui-image-editor-help-menu'); - this._menuBarElement = selector('.tui-image-editor-menu'); - this._subMenuElement = selector('.tui-image-editor-submenu'); - this._buttonElements = { - download: this._selectedElement.querySelectorAll('.tui-image-editor-download-btn'), - load: this._selectedElement.querySelectorAll('.tui-image-editor-load-btn') - }; +var isObject = __webpack_require__(5744); +var isSymbol = __webpack_require__(3236); +var getMethod = __webpack_require__(5037); +var ordinaryToPrimitive = __webpack_require__(380); +var wellKnownSymbol = __webpack_require__(8182); - this._addHelpMenus(); +var TO_PRIMITIVE = wellKnownSymbol('toPrimitive'); - this._historyMenu = new _history2.default(this._buttonElements[HISTORY_MENU], { - locale: this._locale, - makeSvgIcon: this.theme.makeMenSvgIconSet.bind(this.theme) - }); +// `ToPrimitive` abstract operation +// https://tc39.es/ecma262/#sec-toprimitive +module.exports = function (input, pref) { + if (!isObject(input) || isSymbol(input)) return input; + var exoticToPrim = getMethod(input, TO_PRIMITIVE); + var result; + if (exoticToPrim) { + if (pref === undefined) pref = 'default'; + result = exoticToPrim.call(input, pref); + if (!isObject(result) || isSymbol(result)) return result; + throw TypeError("Can't convert object to primitive value"); + } + if (pref === undefined) pref = 'number'; + return ordinaryToPrimitive(input, pref); +}; - this._activateZoomMenus(); - } - /** - * Activate help menus for zoom. - * @private - */ +/***/ }), - }, { - key: '_activateZoomMenus', - value: function _activateZoomMenus() { - var _this3 = this; +/***/ 77: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - _tuiCodeSnippet2.default.forEach(_consts.ZOOM_HELP_MENUS, function (menu) { - _this3.changeHelpButtonEnabled(menu, true); - }); - } +var toPrimitive = __webpack_require__(7888); +var isSymbol = __webpack_require__(3236); - /** - * make array for help menu output, including partitions. - * @returns {Array} - * @private - */ +// `ToPropertyKey` abstract operation +// https://tc39.es/ecma262/#sec-topropertykey +module.exports = function (argument) { + var key = toPrimitive(argument, 'string'); + return isSymbol(key) ? key : String(key); +}; - }, { - key: '_makeHelpMenuWithPartition', - value: function _makeHelpMenuWithPartition() { - return [].concat(_consts.ZOOM_HELP_MENUS, [''], _consts.COMMAND_HELP_MENUS, [''], _consts.DELETE_HELP_MENUS); - } - /** - * Add help menu - * @private - */ +/***/ }), - }, { - key: '_addHelpMenus', - value: function _addHelpMenus() { - var _this4 = this; +/***/ 3471: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - var helpMenuWithPartition = this._makeHelpMenuWithPartition(); +var wellKnownSymbol = __webpack_require__(8182); - _tuiCodeSnippet2.default.forEach(helpMenuWithPartition, function (menuName) { - if (!menuName) { - _this4._makeMenuPartitionElement(); - } else { - _this4._makeMenuElement(menuName, ['normal', 'disabled', 'hover'], 'help'); +var TO_STRING_TAG = wellKnownSymbol('toStringTag'); +var test = {}; - _this4._buttonElements[menuName] = _this4._helpMenuBarElement.querySelector('.tie-btn-' + menuName); - } - }); - } +test[TO_STRING_TAG] = 'z'; - /** - * Make menu partition element - * @private - */ +module.exports = String(test) === '[object z]'; - }, { - key: '_makeMenuPartitionElement', - value: function _makeMenuPartitionElement() { - var partitionElement = document.createElement('li'); - var partitionInnerElement = document.createElement('div'); - partitionElement.className = (0, _util.cls)('item'); - partitionInnerElement.className = (0, _util.cls)('icpartition'); - partitionElement.appendChild(partitionInnerElement); - this._helpMenuBarElement.appendChild(partitionElement); - } +/***/ }), - /** - * Make menu button element - * @param {string} menuName - menu name - * @param {Array} useIconTypes - Possible values are \['normal', 'active', 'hover', 'disabled'\] - * @param {string} menuType - 'normal' or 'help' - * @private - */ +/***/ 4845: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: '_makeMenuElement', - value: function _makeMenuElement(menuName) { - var useIconTypes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ['normal', 'active', 'hover']; - var menuType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'normal'; +var classof = __webpack_require__(4696); - var btnElement = document.createElement('li'); - var menuItemHtml = this.theme.makeMenSvgIconSet(useIconTypes, menuName); +module.exports = function (argument) { + if (classof(argument) === 'Symbol') throw TypeError('Cannot convert a Symbol value to a string'); + return String(argument); +}; - this._addTooltipAttribute(btnElement, menuName); - btnElement.className = 'tie-btn-' + menuName + ' ' + (0, _util.cls)('item') + ' ' + menuType; - btnElement.innerHTML = menuItemHtml; - if (menuType === 'normal') { - this._menuBarElement.appendChild(btnElement); - } else { - this._helpMenuBarElement.appendChild(btnElement); - } - } +/***/ }), - /** - * Add help action event - * @private - */ +/***/ 9288: +/***/ (function(module) { - }, { - key: '_addHelpActionEvent', - value: function _addHelpActionEvent() { - var _this5 = this; +module.exports = function (argument) { + try { + return String(argument); + } catch (error) { + return 'Object'; + } +}; - _tuiCodeSnippet2.default.forEach(_consts.HELP_MENUS, function (helpName) { - _this5.eventHandler[helpName] = function (event) { - return _this5._actions.main[helpName](event); - }; - _this5._buttonElements[helpName].addEventListener('click', _this5.eventHandler[helpName]); - }); - } - /** - * Remove help action event - * @private - */ +/***/ }), - }, { - key: '_removeHelpActionEvent', - value: function _removeHelpActionEvent() { - var _this6 = this; +/***/ 2759: +/***/ (function(module) { - _tuiCodeSnippet2.default.forEach(_consts.HELP_MENUS, function (helpName) { - _this6._buttonElements[helpName].removeEventListener('click', _this6.eventHandler[helpName]); - }); - } +var id = 0; +var postfix = Math.random(); - /** - * Add history - * @param {Command|string} command - command or command name - */ +module.exports = function (key) { + return 'Symbol(' + String(key === undefined ? '' : key) + ')_' + (++id + postfix).toString(36); +}; - }, { - key: '_addHistory', - value: function _addHistory(command) { - if (!(0, _util.isSilentCommand)(command)) { - var historyTitle = typeof command === 'string' ? { name: command } : (0, _util.getHistoryTitle)(command); - this._historyMenu.add(historyTitle); - } - } +/***/ }), - /** - * Init history - */ +/***/ 615: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'initHistory', - value: function initHistory() { - this._historyMenu.init(); - } +/* eslint-disable es/no-symbol -- required for testing */ +var NATIVE_SYMBOL = __webpack_require__(3045); - /** - * Clear history - */ +module.exports = NATIVE_SYMBOL + && !Symbol.sham + && typeof Symbol.iterator == 'symbol'; - }, { - key: 'clearHistory', - value: function clearHistory() { - this._historyMenu.clear(); - } - /** - * Select prev history - */ +/***/ }), - }, { - key: '_selectPrevHistory', - value: function _selectPrevHistory() { - this._historyMenu.prev(); - } +/***/ 9207: +/***/ (function(__unused_webpack_module, exports, __webpack_require__) { - /** - * Select next history - */ +var wellKnownSymbol = __webpack_require__(8182); - }, { - key: '_selectNextHistory', - value: function _selectNextHistory() { - this._historyMenu.next(); - } +exports.f = wellKnownSymbol; - /** - * Toggle history menu - * @param {object} event - event object - */ - }, { - key: 'toggleHistoryMenu', - value: function toggleHistoryMenu(event) { - var target = event.target; +/***/ }), - var item = target.closest('.' + HISTORY_PANEL_CLASS_NAME); +/***/ 8182: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - if (item) { - return; - } +var global = __webpack_require__(8576); +var shared = __webpack_require__(8717); +var hasOwn = __webpack_require__(4500); +var uid = __webpack_require__(2759); +var NATIVE_SYMBOL = __webpack_require__(3045); +var USE_SYMBOL_AS_UID = __webpack_require__(615); - var historyButtonClassList = this._buttonElements[HISTORY_MENU].classList; +var WellKnownSymbolsStore = shared('wks'); +var Symbol = global.Symbol; +var createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol : Symbol && Symbol.withoutSetter || uid; - historyButtonClassList.toggle('opened'); +module.exports = function (name) { + if (!hasOwn(WellKnownSymbolsStore, name) || !(NATIVE_SYMBOL || typeof WellKnownSymbolsStore[name] == 'string')) { + if (NATIVE_SYMBOL && hasOwn(Symbol, name)) { + WellKnownSymbolsStore[name] = Symbol[name]; + } else { + WellKnownSymbolsStore[name] = createWellKnownSymbol('Symbol.' + name); } + } return WellKnownSymbolsStore[name]; +}; - /** - * Add attribute for menu tooltip - * @param {HTMLElement} element - menu element - * @param {string} tooltipName - tooltipName - * @private - */ - }, { - key: '_addTooltipAttribute', - value: function _addTooltipAttribute(element, tooltipName) { - element.setAttribute('tooltip-content', this._locale.localize(tooltipName.replace(/^[a-z]/g, function ($0) { - return $0.toUpperCase(); - }))); - } +/***/ }), - /** - * Add download event - * @private - */ +/***/ 1450: +/***/ (function(module) { - }, { - key: '_addDownloadEvent', - value: function _addDownloadEvent() { - var _this7 = this; +// a string of all valid unicode whitespaces +module.exports = '\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u2000\u2001\u2002' + + '\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF'; - this.eventHandler.download = function () { - return _this7._actions.main.download(); - }; - _tuiCodeSnippet2.default.forEach(this._buttonElements.download, function (element) { - element.addEventListener('click', _this7.eventHandler.download); - }); - } - }, { - key: '_removeDownloadEvent', - value: function _removeDownloadEvent() { - var _this8 = this; - _tuiCodeSnippet2.default.forEach(this._buttonElements.download, function (element) { - element.removeEventListener('click', _this8.eventHandler.download); - }); - } +/***/ }), - /** - * Add load event - * @private - */ +/***/ 4242: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - }, { - key: '_addLoadEvent', - value: function _addLoadEvent() { - var _this9 = this; +"use strict"; - this.eventHandler.loadImage = function (event) { - return _this9._actions.main.load(event.target.files[0]); - }; +var $ = __webpack_require__(3085); +var getPrototypeOf = __webpack_require__(9341); +var setPrototypeOf = __webpack_require__(4469); +var create = __webpack_require__(2853); +var createNonEnumerableProperty = __webpack_require__(8711); +var createPropertyDescriptor = __webpack_require__(774); +var installErrorCause = __webpack_require__(273); +var iterate = __webpack_require__(3442); +var toString = __webpack_require__(4845); + +var $AggregateError = function AggregateError(errors, message /* , options */) { + var that = this; + var options = arguments.length > 2 ? arguments[2] : undefined; + if (!(that instanceof $AggregateError)) return new $AggregateError(errors, message, options); + if (setPrototypeOf) { + // eslint-disable-next-line unicorn/error-message -- expected + that = setPrototypeOf(new Error(undefined), getPrototypeOf(that)); + } + if (message !== undefined) createNonEnumerableProperty(that, 'message', toString(message)); + installErrorCause(that, options); + var errorsArray = []; + iterate(errors, errorsArray.push, { that: errorsArray }); + createNonEnumerableProperty(that, 'errors', errorsArray); + return that; +}; - _tuiCodeSnippet2.default.forEach(this._buttonElements.load, function (element) { - element.addEventListener('change', _this9.eventHandler.loadImage); - }); - } +$AggregateError.prototype = create(Error.prototype, { + constructor: createPropertyDescriptor(5, $AggregateError), + message: createPropertyDescriptor(5, ''), + name: createPropertyDescriptor(5, 'AggregateError') +}); - /** - * Remove load event - * @private - */ +// `AggregateError` constructor +// https://tc39.es/ecma262/#sec-aggregate-error-constructor +$({ global: true }, { + AggregateError: $AggregateError +}); - }, { - key: '_removeLoadEvent', - value: function _removeLoadEvent() { - var _this10 = this; - _tuiCodeSnippet2.default.forEach(this._buttonElements.load, function (element) { - element.removeEventListener('change', _this10.eventHandler.loadImage); - }); - } +/***/ }), - /** - * Add menu event - * @param {string} menuName - menu name - * @private - */ +/***/ 9106: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - }, { - key: '_addMainMenuEvent', - value: function _addMainMenuEvent(menuName) { - var _this11 = this; +"use strict"; - this.eventHandler[menuName] = function () { - return _this11.changeMenu(menuName); - }; - this._buttonElements[menuName].addEventListener('click', this.eventHandler[menuName]); - } +var $ = __webpack_require__(3085); +var fails = __webpack_require__(6192); +var isArray = __webpack_require__(4770); +var isObject = __webpack_require__(5744); +var toObject = __webpack_require__(1795); +var lengthOfArrayLike = __webpack_require__(4104); +var createProperty = __webpack_require__(9361); +var arraySpeciesCreate = __webpack_require__(1321); +var arrayMethodHasSpeciesSupport = __webpack_require__(242); +var wellKnownSymbol = __webpack_require__(8182); +var V8_VERSION = __webpack_require__(4218); + +var IS_CONCAT_SPREADABLE = wellKnownSymbol('isConcatSpreadable'); +var MAX_SAFE_INTEGER = 0x1FFFFFFFFFFFFF; +var MAXIMUM_ALLOWED_INDEX_EXCEEDED = 'Maximum allowed index exceeded'; + +// We can't use this feature detection in V8 since it causes +// deoptimization and serious performance degradation +// https://github.com/zloirock/core-js/issues/679 +var IS_CONCAT_SPREADABLE_SUPPORT = V8_VERSION >= 51 || !fails(function () { + var array = []; + array[IS_CONCAT_SPREADABLE] = false; + return array.concat()[0] !== array; +}); - /** - * Add menu event - * @param {string} menuName - menu name - * @private - */ +var SPECIES_SUPPORT = arrayMethodHasSpeciesSupport('concat'); - }, { - key: '_addSubMenuEvent', - value: function _addSubMenuEvent(menuName) { - var _this12 = this; +var isConcatSpreadable = function (O) { + if (!isObject(O)) return false; + var spreadable = O[IS_CONCAT_SPREADABLE]; + return spreadable !== undefined ? !!spreadable : isArray(O); +}; - this[menuName].addEvent(this._actions[menuName]); - this[menuName].on(_consts.eventNames.INPUT_BOX_EDITING_STARTED, function () { - return _this12.fire(_consts.eventNames.INPUT_BOX_EDITING_STARTED); - }); - this[menuName].on(_consts.eventNames.INPUT_BOX_EDITING_STOPPED, function () { - return _this12.fire(_consts.eventNames.INPUT_BOX_EDITING_STOPPED); - }); +var FORCED = !IS_CONCAT_SPREADABLE_SUPPORT || !SPECIES_SUPPORT; + +// `Array.prototype.concat` method +// https://tc39.es/ecma262/#sec-array.prototype.concat +// with adding support of @@isConcatSpreadable and @@species +$({ target: 'Array', proto: true, forced: FORCED }, { + // eslint-disable-next-line no-unused-vars -- required for `.length` + concat: function concat(arg) { + var O = toObject(this); + var A = arraySpeciesCreate(O, 0); + var n = 0; + var i, k, length, len, E; + for (i = -1, length = arguments.length; i < length; i++) { + E = i === -1 ? O : arguments[i]; + if (isConcatSpreadable(E)) { + len = lengthOfArrayLike(E); + if (n + len > MAX_SAFE_INTEGER) throw TypeError(MAXIMUM_ALLOWED_INDEX_EXCEEDED); + for (k = 0; k < len; k++, n++) if (k in E) createProperty(A, n, E[k]); + } else { + if (n >= MAX_SAFE_INTEGER) throw TypeError(MAXIMUM_ALLOWED_INDEX_EXCEEDED); + createProperty(A, n++, E); + } } + A.length = n; + return A; + } +}); - /** - * Add menu event - * @private - */ - }, { - key: '_addMenuEvent', - value: function _addMenuEvent() { - var _this13 = this; +/***/ }), - _tuiCodeSnippet2.default.forEach(this.options.menu, function (menuName) { - _this13._addMainMenuEvent(menuName); - _this13._addSubMenuEvent(menuName); - }); - } +/***/ 1710: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - /** - * Remove menu event - * @private - */ +var $ = __webpack_require__(3085); +var fill = __webpack_require__(2724); +var addToUnscopables = __webpack_require__(7423); - }, { - key: '_removeMainMenuEvent', - value: function _removeMainMenuEvent() { - var _this14 = this; +// `Array.prototype.fill` method +// https://tc39.es/ecma262/#sec-array.prototype.fill +$({ target: 'Array', proto: true }, { + fill: fill +}); - _tuiCodeSnippet2.default.forEach(this.options.menu, function (menuName) { - _this14._buttonElements[menuName].removeEventListener('click', _this14.eventHandler[menuName]); - _this14[menuName].off(_consts.eventNames.INPUT_BOX_EDITING_STARTED); - _this14[menuName].off(_consts.eventNames.INPUT_BOX_EDITING_STOPPED); - }); - } +// https://tc39.es/ecma262/#sec-array.prototype-@@unscopables +addToUnscopables('fill'); - /** - * Get editor area element - * @returns {HTMLElement} editor area html element - * @ignore - */ - }, { - key: 'getEditorArea', - value: function getEditorArea() { - return this._editorElement; - } +/***/ }), - /** - * Add event for menu items - * @ignore - */ +/***/ 3436: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'activeMenuEvent', - value: function activeMenuEvent() { - if (this._initMenuEvent) { - return; - } +"use strict"; - this._addHelpActionEvent(); - this._addDownloadEvent(); - this._addMenuEvent(); - this._initMenu(); - this._historyMenu.addEvent(this._actions.history); - this._initMenuEvent = true; - } +var $ = __webpack_require__(3085); +var $filter = __webpack_require__(454).filter; +var arrayMethodHasSpeciesSupport = __webpack_require__(242); - /** - * Remove ui event - * @private - */ +var HAS_SPECIES_SUPPORT = arrayMethodHasSpeciesSupport('filter'); - }, { - key: '_removeUiEvent', - value: function _removeUiEvent() { - this._removeHelpActionEvent(); - this._removeDownloadEvent(); - this._removeLoadEvent(); - this._removeMainMenuEvent(); - this._historyMenu.removeEvent(); - } +// `Array.prototype.filter` method +// https://tc39.es/ecma262/#sec-array.prototype.filter +// with adding support of @@species +$({ target: 'Array', proto: true, forced: !HAS_SPECIES_SUPPORT }, { + filter: function filter(callbackfn /* , thisArg */) { + return $filter(this, callbackfn, arguments.length > 1 ? arguments[1] : undefined); + } +}); - /** - * Destroy all menu instance - * @private - */ - }, { - key: '_destroyAllMenu', - value: function _destroyAllMenu() { - var _this15 = this; +/***/ }), - _tuiCodeSnippet2.default.forEach(this.options.menu, function (menuName) { - _this15[menuName].destroy(); - }); +/***/ 9823: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - this._historyMenu.destroy(); - } +"use strict"; - /** - * Init canvas - * @ignore - */ +var $ = __webpack_require__(3085); +var forEach = __webpack_require__(7397); - }, { - key: 'initCanvas', - value: function initCanvas() { - var _this16 = this; +// `Array.prototype.forEach` method +// https://tc39.es/ecma262/#sec-array.prototype.foreach +// eslint-disable-next-line es/no-array-prototype-foreach -- safe +$({ target: 'Array', proto: true, forced: [].forEach != forEach }, { + forEach: forEach +}); - var loadImageInfo = this._getLoadImage(); - if (loadImageInfo.path) { - this._actions.main.initLoadImage(loadImageInfo.path, loadImageInfo.name).then(function () { - _this16.activeMenuEvent(); - }); - } - this._addLoadEvent(); +/***/ }), - var gridVisual = document.createElement('div'); +/***/ 9173: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - gridVisual.className = (0, _util.cls)('grid-visual'); - var grid = '\n \n \n \n
'; - gridVisual.innerHTML = grid; - this._editorContainerElement = this._editorElement.querySelector('.tui-image-editor-canvas-container'); - this._editorContainerElement.appendChild(gridVisual); - } +var $ = __webpack_require__(3085); +var from = __webpack_require__(841); +var checkCorrectnessOfIteration = __webpack_require__(9770); - /** - * get editor area element - * @returns {Object} load image option - * @private - */ +var INCORRECT_ITERATION = !checkCorrectnessOfIteration(function (iterable) { + // eslint-disable-next-line es/no-array-from -- required for testing + Array.from(iterable); +}); - }, { - key: '_getLoadImage', - value: function _getLoadImage() { - return this.options.loadImage; - } +// `Array.from` method +// https://tc39.es/ecma262/#sec-array.from +$({ target: 'Array', stat: true, forced: INCORRECT_ITERATION }, { + from: from +}); - /** - * change menu - * @param {string} menuName - menu name - * @param {boolean} toggle - whether toogle or not - * @param {boolean} discardSelection - discard selection - * @ignore - */ - }, { - key: 'changeMenu', - value: function changeMenu(menuName) { - var toggle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; - var discardSelection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true; +/***/ }), - if (!this._submenuChangeTransection) { - this._submenuChangeTransection = true; - this._changeMenu(menuName, toggle, discardSelection); - this._submenuChangeTransection = false; - } - } +/***/ 2276: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - /** - * change menu - * @param {string} menuName - menu name - * @param {boolean} toggle - whether toggle or not - * @param {boolean} discardSelection - discard selection - * @private - */ +"use strict"; - }, { - key: '_changeMenu', - value: function _changeMenu(menuName, toggle, discardSelection) { - if (this.submenu) { - this._buttonElements[this.submenu].classList.remove('active'); - this._mainElement.classList.remove('tui-image-editor-menu-' + this.submenu); - if (discardSelection) { - this._actions.main.discardSelection(); - } - this._actions.main.changeSelectableAll(true); - this[this.submenu].changeStandbyMode(); - } +/* eslint-disable es/no-array-prototype-indexof -- required for testing */ +var $ = __webpack_require__(3085); +var $indexOf = __webpack_require__(8180).indexOf; +var arrayMethodIsStrict = __webpack_require__(424); - if (this.submenu === menuName && toggle) { - this.submenu = null; - } else { - this._buttonElements[menuName].classList.add('active'); - this._mainElement.classList.add('tui-image-editor-menu-' + menuName); - this.submenu = menuName; - this[this.submenu].changeStartMode(); - } +var nativeIndexOf = [].indexOf; - this.resizeEditor(); - } +var NEGATIVE_ZERO = !!nativeIndexOf && 1 / [1].indexOf(1, -0) < 0; +var STRICT_METHOD = arrayMethodIsStrict('indexOf'); - /** - * Init menu - * @private - */ +// `Array.prototype.indexOf` method +// https://tc39.es/ecma262/#sec-array.prototype.indexof +$({ target: 'Array', proto: true, forced: NEGATIVE_ZERO || !STRICT_METHOD }, { + indexOf: function indexOf(searchElement /* , fromIndex = 0 */) { + return NEGATIVE_ZERO + // convert -0 to +0 + ? nativeIndexOf.apply(this, arguments) || 0 + : $indexOf(this, searchElement, arguments.length > 1 ? arguments[1] : undefined); + } +}); - }, { - key: '_initMenu', - value: function _initMenu() { - if (this.options.initMenu) { - var evt = document.createEvent('MouseEvents'); - evt.initEvent('click', true, false); - this._buttonElements[this.options.initMenu].dispatchEvent(evt); - } - if (this.icon) { - this.icon.registerDefaultIcon(); - } - } +/***/ }), - /** - * Get canvas max Dimension - * @returns {Object} - width & height of editor - * @private - */ +/***/ 8118: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - }, { - key: '_getCanvasMaxDimension', - value: function _getCanvasMaxDimension() { - var _editorContainerEleme = this._editorContainerElement.style, - maxWidth = _editorContainerEleme.maxWidth, - maxHeight = _editorContainerEleme.maxHeight; +var $ = __webpack_require__(3085); +var isArray = __webpack_require__(4770); - var width = parseFloat(maxWidth); - var height = parseFloat(maxHeight); +// `Array.isArray` method +// https://tc39.es/ecma262/#sec-array.isarray +$({ target: 'Array', stat: true }, { + isArray: isArray +}); - return { - width: width, - height: height - }; - } - /** - * Set editor position - * @param {string} menuBarPosition - top or right or bottom or left - * @private - */ - // eslint-disable-next-line complexity +/***/ }), - }, { - key: '_setEditorPosition', - value: function _setEditorPosition(menuBarPosition) { - var _getCanvasMaxDimensio2 = this._getCanvasMaxDimension(), - width = _getCanvasMaxDimensio2.width, - height = _getCanvasMaxDimensio2.height; +/***/ 8939: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - var editorElementStyle = this._editorElement.style; - var top = 0; - var left = 0; +"use strict"; - if (this.submenu) { - if (menuBarPosition === 'bottom') { - if (height > this._editorElementWrap.scrollHeight - 150) { - top = (height - this._editorElementWrap.scrollHeight) / 2; - } else { - top = 150 / 2 * -1; - } - } else if (menuBarPosition === 'top') { - if (height > this._editorElementWrap.offsetHeight - 150) { - top = 150 / 2 - (height - (this._editorElementWrap.offsetHeight - 150)) / 2; - } else { - top = 150 / 2; - } - } else if (menuBarPosition === 'left') { - if (width > this._editorElementWrap.offsetWidth - 248) { - left = 248 / 2 - (width - (this._editorElementWrap.offsetWidth - 248)) / 2; - } else { - left = 248 / 2; - } - } else if (menuBarPosition === 'right') { - if (width > this._editorElementWrap.scrollWidth - 248) { - left = (width - this._editorElementWrap.scrollWidth) / 2; - } else { - left = 248 / 2 * -1; - } - } - } - editorElementStyle.top = top + 'px'; - editorElementStyle.left = left + 'px'; - } - }]); +var toIndexedObject = __webpack_require__(101); +var addToUnscopables = __webpack_require__(7423); +var Iterators = __webpack_require__(7771); +var InternalStateModule = __webpack_require__(3326); +var defineIterator = __webpack_require__(7218); - return Ui; -}(); +var ARRAY_ITERATOR = 'Array Iterator'; +var setInternalState = InternalStateModule.set; +var getInternalState = InternalStateModule.getterFor(ARRAY_ITERATOR); -CustomEvents.mixin(Ui); +// `Array.prototype.entries` method +// https://tc39.es/ecma262/#sec-array.prototype.entries +// `Array.prototype.keys` method +// https://tc39.es/ecma262/#sec-array.prototype.keys +// `Array.prototype.values` method +// https://tc39.es/ecma262/#sec-array.prototype.values +// `Array.prototype[@@iterator]` method +// https://tc39.es/ecma262/#sec-array.prototype-@@iterator +// `CreateArrayIterator` internal method +// https://tc39.es/ecma262/#sec-createarrayiterator +module.exports = defineIterator(Array, 'Array', function (iterated, kind) { + setInternalState(this, { + type: ARRAY_ITERATOR, + target: toIndexedObject(iterated), // target + index: 0, // next index + kind: kind // kind + }); +// `%ArrayIteratorPrototype%.next` method +// https://tc39.es/ecma262/#sec-%arrayiteratorprototype%.next +}, function () { + var state = getInternalState(this); + var target = state.target; + var kind = state.kind; + var index = state.index++; + if (!target || index >= target.length) { + state.target = undefined; + return { value: undefined, done: true }; + } + if (kind == 'keys') return { value: index, done: false }; + if (kind == 'values') return { value: target[index], done: false }; + return { value: [index, target[index]], done: false }; +}, 'values'); + +// argumentsList[@@iterator] is %ArrayProto_values% +// https://tc39.es/ecma262/#sec-createunmappedargumentsobject +// https://tc39.es/ecma262/#sec-createmappedargumentsobject +Iterators.Arguments = Iterators.Array; + +// https://tc39.es/ecma262/#sec-array.prototype-@@unscopables +addToUnscopables('keys'); +addToUnscopables('values'); +addToUnscopables('entries'); -exports.default = Ui; /***/ }), -/***/ "./src/js/ui/crop.js": -/*!***************************!*\ - !*** ./src/js/ui/crop.js ***! - \***************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +/***/ 3838: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { "use strict"; +var $ = __webpack_require__(3085); +var $map = __webpack_require__(454).map; +var arrayMethodHasSpeciesSupport = __webpack_require__(242); -Object.defineProperty(exports, "__esModule", { - value: true +var HAS_SPECIES_SUPPORT = arrayMethodHasSpeciesSupport('map'); + +// `Array.prototype.map` method +// https://tc39.es/ecma262/#sec-array.prototype.map +// with adding support of @@species +$({ target: 'Array', proto: true, forced: !HAS_SPECIES_SUPPORT }, { + map: function map(callbackfn /* , thisArg */) { + return $map(this, callbackfn, arguments.length > 1 ? arguments[1] : undefined); + } }); -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); +/***/ }), -var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); +/***/ 5818: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { -var _submenuBase = __webpack_require__(/*! @/ui/submenuBase */ "./src/js/ui/submenuBase.js"); +"use strict"; -var _submenuBase2 = _interopRequireDefault(_submenuBase); +var $ = __webpack_require__(3085); +var isArray = __webpack_require__(4770); +var isConstructor = __webpack_require__(2091); +var isObject = __webpack_require__(5744); +var toAbsoluteIndex = __webpack_require__(7739); +var lengthOfArrayLike = __webpack_require__(4104); +var toIndexedObject = __webpack_require__(101); +var createProperty = __webpack_require__(9361); +var wellKnownSymbol = __webpack_require__(8182); +var arrayMethodHasSpeciesSupport = __webpack_require__(242); -var _crop = __webpack_require__(/*! @/ui/template/submenu/crop */ "./src/js/ui/template/submenu/crop.js"); +var HAS_SPECIES_SUPPORT = arrayMethodHasSpeciesSupport('slice'); -var _crop2 = _interopRequireDefault(_crop); +var SPECIES = wellKnownSymbol('species'); +var nativeSlice = [].slice; +var max = Math.max; -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); +// `Array.prototype.slice` method +// https://tc39.es/ecma262/#sec-array.prototype.slice +// fallback for not array-like ES3 strings and DOM objects +$({ target: 'Array', proto: true, forced: !HAS_SPECIES_SUPPORT }, { + slice: function slice(start, end) { + var O = toIndexedObject(this); + var length = lengthOfArrayLike(O); + var k = toAbsoluteIndex(start, length); + var fin = toAbsoluteIndex(end === undefined ? length : end, length); + // inline `ArraySpeciesCreate` for usage native `Array#slice` where it's possible + var Constructor, result, n; + if (isArray(O)) { + Constructor = O.constructor; + // cross-realm fallback + if (isConstructor(Constructor) && (Constructor === Array || isArray(Constructor.prototype))) { + Constructor = undefined; + } else if (isObject(Constructor)) { + Constructor = Constructor[SPECIES]; + if (Constructor === null) Constructor = undefined; + } + if (Constructor === Array || Constructor === undefined) { + return nativeSlice.call(O, k, fin); + } + } + result = new (Constructor === undefined ? Array : Constructor)(max(fin - k, 0)); + for (n = 0; k < fin; k++, n++) if (k in O) createProperty(result, n, O[k]); + result.length = n; + return result; + } +}); -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } +/***/ }), -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } +/***/ 2178: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } +"use strict"; -/** - * Crop ui class - * @class - * @ignore - */ -var Crop = function (_Submenu) { - _inherits(Crop, _Submenu); +var $ = __webpack_require__(3085); +var toAbsoluteIndex = __webpack_require__(7739); +var toIntegerOrInfinity = __webpack_require__(1941); +var lengthOfArrayLike = __webpack_require__(4104); +var toObject = __webpack_require__(1795); +var arraySpeciesCreate = __webpack_require__(1321); +var createProperty = __webpack_require__(9361); +var arrayMethodHasSpeciesSupport = __webpack_require__(242); - function Crop(subMenuElement, _ref) { - var locale = _ref.locale, - makeSvgIcon = _ref.makeSvgIcon, - menuBarPosition = _ref.menuBarPosition, - usageStatistics = _ref.usageStatistics; +var HAS_SPECIES_SUPPORT = arrayMethodHasSpeciesSupport('splice'); - _classCallCheck(this, Crop); +var max = Math.max; +var min = Math.min; +var MAX_SAFE_INTEGER = 0x1FFFFFFFFFFFFF; +var MAXIMUM_ALLOWED_LENGTH_EXCEEDED = 'Maximum allowed length exceeded'; + +// `Array.prototype.splice` method +// https://tc39.es/ecma262/#sec-array.prototype.splice +// with adding support of @@species +$({ target: 'Array', proto: true, forced: !HAS_SPECIES_SUPPORT }, { + splice: function splice(start, deleteCount /* , ...items */) { + var O = toObject(this); + var len = lengthOfArrayLike(O); + var actualStart = toAbsoluteIndex(start, len); + var argumentsLength = arguments.length; + var insertCount, actualDeleteCount, A, k, from, to; + if (argumentsLength === 0) { + insertCount = actualDeleteCount = 0; + } else if (argumentsLength === 1) { + insertCount = 0; + actualDeleteCount = len - actualStart; + } else { + insertCount = argumentsLength - 2; + actualDeleteCount = min(max(toIntegerOrInfinity(deleteCount), 0), len - actualStart); + } + if (len + insertCount - actualDeleteCount > MAX_SAFE_INTEGER) { + throw TypeError(MAXIMUM_ALLOWED_LENGTH_EXCEEDED); + } + A = arraySpeciesCreate(O, actualDeleteCount); + for (k = 0; k < actualDeleteCount; k++) { + from = actualStart + k; + if (from in O) createProperty(A, k, O[from]); + } + A.length = actualDeleteCount; + if (insertCount < actualDeleteCount) { + for (k = actualStart; k < len - actualDeleteCount; k++) { + from = k + actualDeleteCount; + to = k + insertCount; + if (from in O) O[to] = O[from]; + else delete O[to]; + } + for (k = len; k > len - actualDeleteCount + insertCount; k--) delete O[k - 1]; + } else if (insertCount > actualDeleteCount) { + for (k = len - actualDeleteCount; k > actualStart; k--) { + from = k + actualDeleteCount - 1; + to = k + insertCount - 1; + if (from in O) O[to] = O[from]; + else delete O[to]; + } + } + for (k = 0; k < insertCount; k++) { + O[k + actualStart] = arguments[k + 2]; + } + O.length = len - actualDeleteCount + insertCount; + return A; + } +}); - var _this = _possibleConstructorReturn(this, (Crop.__proto__ || Object.getPrototypeOf(Crop)).call(this, subMenuElement, { - locale: locale, - name: 'crop', - makeSvgIcon: makeSvgIcon, - menuBarPosition: menuBarPosition, - templateHtml: _crop2.default, - usageStatistics: usageStatistics - })); - _this.status = 'active'; +/***/ }), - _this._els = { - apply: _this.selector('.tie-crop-button .apply'), - cancel: _this.selector('.tie-crop-button .cancel'), - preset: _this.selector('.tie-crop-preset-button') - }; - - _this.defaultPresetButton = _this._els.preset.querySelector('.preset-none'); - return _this; - } - - /** - * Destroys the instance. - */ +/***/ 665: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { +var $ = __webpack_require__(3085); +var bind = __webpack_require__(6782); - _createClass(Crop, [{ - key: 'destroy', - value: function destroy() { - this._removeEvent(); +// `Function.prototype.bind` method +// https://tc39.es/ecma262/#sec-function.prototype.bind +$({ target: 'Function', proto: true }, { + bind: bind +}); - (0, _util.assignmentForDestroy)(this); - } - /** - * Add event for crop - * @param {Object} actions - actions for crop - * @param {Function} actions.crop - crop action - * @param {Function} actions.cancel - cancel action - * @param {Function} actions.preset - draw rectzone at a predefined ratio - */ +/***/ }), - }, { - key: 'addEvent', - value: function addEvent(actions) { - var apply = this._applyEventHandler.bind(this); - var cancel = this._cancelEventHandler.bind(this); - var cropzonePreset = this._cropzonePresetEventHandler.bind(this); +/***/ 8671: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - this.eventHandler = { - apply: apply, - cancel: cancel, - cropzonePreset: cropzonePreset - }; +var global = __webpack_require__(8576); +var setToStringTag = __webpack_require__(1284); - this.actions = actions; - this._els.apply.addEventListener('click', apply); - this._els.cancel.addEventListener('click', cancel); - this._els.preset.addEventListener('click', cropzonePreset); - } +// JSON[@@toStringTag] property +// https://tc39.es/ecma262/#sec-json-@@tostringtag +setToStringTag(global.JSON, 'JSON', true); - /** - * Remove event - * @private - */ - }, { - key: '_removeEvent', - value: function _removeEvent() { - this._els.apply.removeEventListener('click', this.eventHandler.apply); - this._els.cancel.removeEventListener('click', this.eventHandler.cancel); - this._els.preset.removeEventListener('click', this.eventHandler.cropzonePreset); - } - }, { - key: '_applyEventHandler', - value: function _applyEventHandler() { - this.actions.crop(); - this._els.apply.classList.remove('active'); - } - }, { - key: '_cancelEventHandler', - value: function _cancelEventHandler() { - this.actions.cancel(); - this._els.apply.classList.remove('active'); - } - }, { - key: '_cropzonePresetEventHandler', - value: function _cropzonePresetEventHandler(event) { - var button = event.target.closest('.tui-image-editor-button.preset'); - if (button) { - var _button$className$mat = button.className.match(/preset-[^\s]+/), - presetType = _button$className$mat[0]; +/***/ }), - this._setPresetButtonActive(button); - this.actions.preset(presetType); - } - } +/***/ 8556: +/***/ (function() { - /** - * Executed when the menu starts. - */ +// empty - }, { - key: 'changeStartMode', - value: function changeStartMode() { - this.actions.modeChange('crop'); - } - /** - * Returns the menu to its default state. - */ +/***/ }), - }, { - key: 'changeStandbyMode', - value: function changeStandbyMode() { - this.actions.stopDrawingMode(); - this._setPresetButtonActive(); - } +/***/ 2666: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - /** - * Change apply button status - * @param {Boolean} enableStatus - apply button status - */ +var $ = __webpack_require__(3085); +var parseInt = __webpack_require__(2558); - }, { - key: 'changeApplyButtonStatus', - value: function changeApplyButtonStatus(enableStatus) { - if (enableStatus) { - this._els.apply.classList.add('active'); - } else { - this._els.apply.classList.remove('active'); - } - } +// `Number.parseInt` method +// https://tc39.es/ecma262/#sec-number.parseint +// eslint-disable-next-line es/no-number-parseint -- required for testing +$({ target: 'Number', stat: true, forced: Number.parseInt != parseInt }, { + parseInt: parseInt +}); - /** - * Set preset button to active status - * @param {HTMLElement} button - event target element - * @private - */ - }, { - key: '_setPresetButtonActive', - value: function _setPresetButtonActive() { - var button = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.defaultPresetButton; +/***/ }), - _tuiCodeSnippet2.default.forEach([].slice.call(this._els.preset.querySelectorAll('.preset')), function (presetButton) { - presetButton.classList.remove('active'); - }); +/***/ 3113: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - if (button) { - button.classList.add('active'); - } - } - }]); +var $ = __webpack_require__(3085); +var DESCRIPTORS = __webpack_require__(69); +var create = __webpack_require__(2853); - return Crop; -}(_submenuBase2.default); +// `Object.create` method +// https://tc39.es/ecma262/#sec-object.create +$({ target: 'Object', stat: true, sham: !DESCRIPTORS }, { + create: create +}); -exports.default = Crop; /***/ }), -/***/ "./src/js/ui/draw.js": -/*!***************************!*\ - !*** ./src/js/ui/draw.js ***! - \***************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; +/***/ 297: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { +var $ = __webpack_require__(3085); +var DESCRIPTORS = __webpack_require__(69); +var objectDefinePropertyModile = __webpack_require__(2760); -Object.defineProperty(exports, "__esModule", { - value: true +// `Object.defineProperty` method +// https://tc39.es/ecma262/#sec-object.defineproperty +$({ target: 'Object', stat: true, forced: !DESCRIPTORS, sham: !DESCRIPTORS }, { + defineProperty: objectDefinePropertyModile.f }); -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); -var _colorpicker = __webpack_require__(/*! @/ui/tools/colorpicker */ "./src/js/ui/tools/colorpicker.js"); +/***/ }), + +/***/ 9234: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { -var _colorpicker2 = _interopRequireDefault(_colorpicker); +var $ = __webpack_require__(3085); +var fails = __webpack_require__(6192); +var toObject = __webpack_require__(1795); +var nativeGetPrototypeOf = __webpack_require__(9341); +var CORRECT_PROTOTYPE_GETTER = __webpack_require__(4635); -var _range = __webpack_require__(/*! @/ui/tools/range */ "./src/js/ui/tools/range.js"); +var FAILS_ON_PRIMITIVES = fails(function () { nativeGetPrototypeOf(1); }); -var _range2 = _interopRequireDefault(_range); +// `Object.getPrototypeOf` method +// https://tc39.es/ecma262/#sec-object.getprototypeof +$({ target: 'Object', stat: true, forced: FAILS_ON_PRIMITIVES, sham: !CORRECT_PROTOTYPE_GETTER }, { + getPrototypeOf: function getPrototypeOf(it) { + return nativeGetPrototypeOf(toObject(it)); + } +}); -var _submenuBase = __webpack_require__(/*! @/ui/submenuBase */ "./src/js/ui/submenuBase.js"); -var _submenuBase2 = _interopRequireDefault(_submenuBase); -var _draw = __webpack_require__(/*! @/ui/template/submenu/draw */ "./src/js/ui/template/submenu/draw.js"); +/***/ }), -var _draw2 = _interopRequireDefault(_draw); +/***/ 2647: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); +var $ = __webpack_require__(3085); +var toObject = __webpack_require__(1795); +var nativeKeys = __webpack_require__(7653); +var fails = __webpack_require__(6192); -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); +var FAILS_ON_PRIMITIVES = fails(function () { nativeKeys(1); }); -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +// `Object.keys` method +// https://tc39.es/ecma262/#sec-object.keys +$({ target: 'Object', stat: true, forced: FAILS_ON_PRIMITIVES }, { + keys: function keys(it) { + return nativeKeys(toObject(it)); + } +}); -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } +/***/ }), -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } +/***/ 3222: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { -var DRAW_OPACITY = 0.7; +var $ = __webpack_require__(3085); +var setPrototypeOf = __webpack_require__(4469); -/** - * Draw ui class - * @class - * @ignore - */ +// `Object.setPrototypeOf` method +// https://tc39.es/ecma262/#sec-object.setprototypeof +$({ target: 'Object', stat: true }, { + setPrototypeOf: setPrototypeOf +}); -var Draw = function (_Submenu) { - _inherits(Draw, _Submenu); - function Draw(subMenuElement, _ref) { - var locale = _ref.locale, - makeSvgIcon = _ref.makeSvgIcon, - menuBarPosition = _ref.menuBarPosition, - usageStatistics = _ref.usageStatistics; +/***/ }), - _classCallCheck(this, Draw); +/***/ 6663: +/***/ (function() { - var _this = _possibleConstructorReturn(this, (Draw.__proto__ || Object.getPrototypeOf(Draw)).call(this, subMenuElement, { - locale: locale, - name: 'draw', - makeSvgIcon: makeSvgIcon, - menuBarPosition: menuBarPosition, - templateHtml: _draw2.default, - usageStatistics: usageStatistics - })); +// empty - _this._els = { - lineSelectButton: _this.selector('.tie-draw-line-select-button'), - drawColorPicker: new _colorpicker2.default(_this.selector('.tie-draw-color'), '#00a9ff', _this.toggleDirection, _this.usageStatistics), - drawRange: new _range2.default({ - slider: _this.selector('.tie-draw-range'), - input: _this.selector('.tie-draw-range-value') - }, _consts.defaultDrawRangeValues) - }; - _this.type = null; - _this.color = _this._els.drawColorPicker.color; - _this.width = _this._els.drawRange.value; +/***/ }), - _this.colorPickerInputBox = _this._els.drawColorPicker.colorpickerElement.querySelector(_consts.selectorNames.COLOR_PICKER_INPUT_BOX); - return _this; - } +/***/ 4859: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - /** - * Destroys the instance. - */ +var $ = __webpack_require__(3085); +var $parseFloat = __webpack_require__(15); +// `parseFloat` method +// https://tc39.es/ecma262/#sec-parsefloat-string +$({ global: true, forced: parseFloat != $parseFloat }, { + parseFloat: $parseFloat +}); - _createClass(Draw, [{ - key: 'destroy', - value: function destroy() { - this._removeEvent(); - this._els.drawColorPicker.destroy(); - this._els.drawRange.destroy(); - (0, _util.assignmentForDestroy)(this); - } +/***/ }), - /** - * Add event for draw - * @param {Object} actions - actions for crop - * @param {Function} actions.setDrawMode - set draw mode - */ +/***/ 5706: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'addEvent', - value: function addEvent(actions) { - this.eventHandler.changeDrawType = this._changeDrawType.bind(this); +var $ = __webpack_require__(3085); +var $parseInt = __webpack_require__(2558); - this.actions = actions; - this._els.lineSelectButton.addEventListener('click', this.eventHandler.changeDrawType); - this._els.drawColorPicker.on('change', this._changeDrawColor.bind(this)); - this._els.drawRange.on('change', this._changeDrawRange.bind(this)); +// `parseInt` method +// https://tc39.es/ecma262/#sec-parseint-string-radix +$({ global: true, forced: parseInt != $parseInt }, { + parseInt: $parseInt +}); - this.colorPickerInputBox.addEventListener(_consts.eventNames.FOCUS, this._onStartEditingInputBox.bind(this)); - this.colorPickerInputBox.addEventListener(_consts.eventNames.BLUR, this._onStopEditingInputBox.bind(this)); - } - /** - * Remove event - * @private - */ +/***/ }), - }, { - key: '_removeEvent', - value: function _removeEvent() { - this._els.lineSelectButton.removeEventListener('click', this.eventHandler.changeDrawType); - this._els.drawColorPicker.off(); - this._els.drawRange.off(); +/***/ 7884: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - this.colorPickerInputBox.removeEventListener(_consts.eventNames.FOCUS, this._onStartEditingInputBox.bind(this)); - this.colorPickerInputBox.removeEventListener(_consts.eventNames.BLUR, this._onStopEditingInputBox.bind(this)); - } +"use strict"; - /** - * set draw mode - action runner - */ +var $ = __webpack_require__(3085); +var aCallable = __webpack_require__(6235); +var newPromiseCapabilityModule = __webpack_require__(9438); +var perform = __webpack_require__(892); +var iterate = __webpack_require__(3442); - }, { - key: 'setDrawMode', - value: function setDrawMode() { - this.actions.setDrawMode(this.type, { - width: this.width, - color: (0, _util.getRgb)(this.color, DRAW_OPACITY) +// `Promise.allSettled` method +// https://tc39.es/ecma262/#sec-promise.allsettled +$({ target: 'Promise', stat: true }, { + allSettled: function allSettled(iterable) { + var C = this; + var capability = newPromiseCapabilityModule.f(C); + var resolve = capability.resolve; + var reject = capability.reject; + var result = perform(function () { + var promiseResolve = aCallable(C.resolve); + var values = []; + var counter = 0; + var remaining = 1; + iterate(iterable, function (promise) { + var index = counter++; + var alreadyCalled = false; + values.push(undefined); + remaining++; + promiseResolve.call(C, promise).then(function (value) { + if (alreadyCalled) return; + alreadyCalled = true; + values[index] = { status: 'fulfilled', value: value }; + --remaining || resolve(values); + }, function (error) { + if (alreadyCalled) return; + alreadyCalled = true; + values[index] = { status: 'rejected', reason: error }; + --remaining || resolve(values); + }); }); - } + --remaining || resolve(values); + }); + if (result.error) reject(result.value); + return capability.promise; + } +}); - /** - * Returns the menu to its default state. - */ - }, { - key: 'changeStandbyMode', - value: function changeStandbyMode() { - this.type = null; - this.actions.stopDrawingMode(); - this.actions.changeSelectableAll(true); - this._els.lineSelectButton.classList.remove('free'); - this._els.lineSelectButton.classList.remove('line'); - } +/***/ }), - /** - * Executed when the menu starts. - */ +/***/ 8885: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'changeStartMode', - value: function changeStartMode() { - this.type = 'free'; - this._els.lineSelectButton.classList.add('free'); - this.setDrawMode(); - } - - /** - * Change draw type event - * @param {object} event - line select event - * @private - */ - - }, { - key: '_changeDrawType', - value: function _changeDrawType(event) { - var button = event.target.closest('.tui-image-editor-button'); - if (button) { - var lineType = this.getButtonType(button, ['free', 'line']); - this.actions.discardSelection(); - - if (this.type === lineType) { - this.changeStandbyMode(); - - return; - } - - this.changeStandbyMode(); - this.type = lineType; - this._els.lineSelectButton.classList.add(lineType); - this.setDrawMode(); - } - } - - /** - * Change drawing color - * @param {string} color - select drawing color - * @private - */ - - }, { - key: '_changeDrawColor', - value: function _changeDrawColor(color) { - this.color = color || 'transparent'; - if (!this.type) { - this.changeStartMode(); - } else { - this.setDrawMode(); - } - } +"use strict"; - /** - * Change drawing Range - * @param {number} value - select drawing range - * @private - */ +var $ = __webpack_require__(3085); +var aCallable = __webpack_require__(6235); +var getBuiltIn = __webpack_require__(150); +var newPromiseCapabilityModule = __webpack_require__(9438); +var perform = __webpack_require__(892); +var iterate = __webpack_require__(3442); - }, { - key: '_changeDrawRange', - value: function _changeDrawRange(value) { - this.width = value; - if (!this.type) { - this.changeStartMode(); - } else { - this.setDrawMode(); - } - } - }]); +var PROMISE_ANY_ERROR = 'No one promise resolved'; - return Draw; -}(_submenuBase2.default); +// `Promise.any` method +// https://tc39.es/ecma262/#sec-promise.any +$({ target: 'Promise', stat: true }, { + any: function any(iterable) { + var C = this; + var capability = newPromiseCapabilityModule.f(C); + var resolve = capability.resolve; + var reject = capability.reject; + var result = perform(function () { + var promiseResolve = aCallable(C.resolve); + var errors = []; + var counter = 0; + var remaining = 1; + var alreadyResolved = false; + iterate(iterable, function (promise) { + var index = counter++; + var alreadyRejected = false; + errors.push(undefined); + remaining++; + promiseResolve.call(C, promise).then(function (value) { + if (alreadyRejected || alreadyResolved) return; + alreadyResolved = true; + resolve(value); + }, function (error) { + if (alreadyRejected || alreadyResolved) return; + alreadyRejected = true; + errors[index] = error; + --remaining || reject(new (getBuiltIn('AggregateError'))(errors, PROMISE_ANY_ERROR)); + }); + }); + --remaining || reject(new (getBuiltIn('AggregateError'))(errors, PROMISE_ANY_ERROR)); + }); + if (result.error) reject(result.value); + return capability.promise; + } +}); -exports.default = Draw; /***/ }), -/***/ "./src/js/ui/filter.js": -/*!*****************************!*\ - !*** ./src/js/ui/filter.js ***! - \*****************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +/***/ 1868: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { "use strict"; +var $ = __webpack_require__(3085); +var IS_PURE = __webpack_require__(5546); +var NativePromise = __webpack_require__(4471); +var fails = __webpack_require__(6192); +var getBuiltIn = __webpack_require__(150); +var isCallable = __webpack_require__(6447); +var speciesConstructor = __webpack_require__(4743); +var promiseResolve = __webpack_require__(9126); +var redefine = __webpack_require__(9482); -Object.defineProperty(exports, "__esModule", { - value: true +// Safari bug https://bugs.webkit.org/show_bug.cgi?id=200829 +var NON_GENERIC = !!NativePromise && fails(function () { + NativePromise.prototype['finally'].call({ then: function () { /* empty */ } }, function () { /* empty */ }); }); -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); - -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); +// `Promise.prototype.finally` method +// https://tc39.es/ecma262/#sec-promise.prototype.finally +$({ target: 'Promise', proto: true, real: true, forced: NON_GENERIC }, { + 'finally': function (onFinally) { + var C = speciesConstructor(this, getBuiltIn('Promise')); + var isFunction = isCallable(onFinally); + return this.then( + isFunction ? function (x) { + return promiseResolve(C, onFinally()).then(function () { return x; }); + } : onFinally, + isFunction ? function (e) { + return promiseResolve(C, onFinally()).then(function () { throw e; }); + } : onFinally + ); + } +}); -var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); +// makes sure that native promise-based APIs `Promise#finally` properly works with patched `Promise#then` +if (!IS_PURE && isCallable(NativePromise)) { + var method = getBuiltIn('Promise').prototype['finally']; + if (NativePromise.prototype['finally'] !== method) { + redefine(NativePromise.prototype, 'finally', method, { unsafe: true }); + } +} -var _colorpicker = __webpack_require__(/*! @/ui/tools/colorpicker */ "./src/js/ui/tools/colorpicker.js"); -var _colorpicker2 = _interopRequireDefault(_colorpicker); +/***/ }), -var _range = __webpack_require__(/*! @/ui/tools/range */ "./src/js/ui/tools/range.js"); +/***/ 9021: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { -var _range2 = _interopRequireDefault(_range); +"use strict"; -var _submenuBase = __webpack_require__(/*! @/ui/submenuBase */ "./src/js/ui/submenuBase.js"); +var $ = __webpack_require__(3085); +var IS_PURE = __webpack_require__(5546); +var global = __webpack_require__(8576); +var getBuiltIn = __webpack_require__(150); +var NativePromise = __webpack_require__(4471); +var redefine = __webpack_require__(9482); +var redefineAll = __webpack_require__(533); +var setPrototypeOf = __webpack_require__(4469); +var setToStringTag = __webpack_require__(1284); +var setSpecies = __webpack_require__(3656); +var aCallable = __webpack_require__(6235); +var isCallable = __webpack_require__(6447); +var isObject = __webpack_require__(5744); +var anInstance = __webpack_require__(6961); +var inspectSource = __webpack_require__(9516); +var iterate = __webpack_require__(3442); +var checkCorrectnessOfIteration = __webpack_require__(9770); +var speciesConstructor = __webpack_require__(4743); +var task = __webpack_require__(7160).set; +var microtask = __webpack_require__(2950); +var promiseResolve = __webpack_require__(9126); +var hostReportErrors = __webpack_require__(3681); +var newPromiseCapabilityModule = __webpack_require__(9438); +var perform = __webpack_require__(892); +var InternalStateModule = __webpack_require__(3326); +var isForced = __webpack_require__(9245); +var wellKnownSymbol = __webpack_require__(8182); +var IS_BROWSER = __webpack_require__(2957); +var IS_NODE = __webpack_require__(224); +var V8_VERSION = __webpack_require__(4218); -var _submenuBase2 = _interopRequireDefault(_submenuBase); +var SPECIES = wellKnownSymbol('species'); +var PROMISE = 'Promise'; +var getInternalState = InternalStateModule.get; +var setInternalState = InternalStateModule.set; +var getInternalPromiseState = InternalStateModule.getterFor(PROMISE); +var NativePromisePrototype = NativePromise && NativePromise.prototype; +var PromiseConstructor = NativePromise; +var PromiseConstructorPrototype = NativePromisePrototype; +var TypeError = global.TypeError; +var document = global.document; +var process = global.process; +var newPromiseCapability = newPromiseCapabilityModule.f; +var newGenericPromiseCapability = newPromiseCapability; +var DISPATCH_EVENT = !!(document && document.createEvent && global.dispatchEvent); +var NATIVE_REJECTION_EVENT = isCallable(global.PromiseRejectionEvent); +var UNHANDLED_REJECTION = 'unhandledrejection'; +var REJECTION_HANDLED = 'rejectionhandled'; +var PENDING = 0; +var FULFILLED = 1; +var REJECTED = 2; +var HANDLED = 1; +var UNHANDLED = 2; +var SUBCLASSING = false; +var Internal, OwnPromiseCapability, PromiseWrapper, nativeThen; -var _filter = __webpack_require__(/*! @/ui/template/submenu/filter */ "./src/js/ui/template/submenu/filter.js"); +var FORCED = isForced(PROMISE, function () { + var PROMISE_CONSTRUCTOR_SOURCE = inspectSource(PromiseConstructor); + var GLOBAL_CORE_JS_PROMISE = PROMISE_CONSTRUCTOR_SOURCE !== String(PromiseConstructor); + // V8 6.6 (Node 10 and Chrome 66) have a bug with resolving custom thenables + // https://bugs.chromium.org/p/chromium/issues/detail?id=830565 + // We can't detect it synchronously, so just check versions + if (!GLOBAL_CORE_JS_PROMISE && V8_VERSION === 66) return true; + // We need Promise#finally in the pure version for preventing prototype pollution + if (IS_PURE && !PromiseConstructorPrototype['finally']) return true; + // We can't use @@species feature detection in V8 since it causes + // deoptimization and performance degradation + // https://github.com/zloirock/core-js/issues/679 + if (V8_VERSION >= 51 && /native code/.test(PROMISE_CONSTRUCTOR_SOURCE)) return false; + // Detect correctness of subclassing with @@species support + var promise = new PromiseConstructor(function (resolve) { resolve(1); }); + var FakePromise = function (exec) { + exec(function () { /* empty */ }, function () { /* empty */ }); + }; + var constructor = promise.constructor = {}; + constructor[SPECIES] = FakePromise; + SUBCLASSING = promise.then(function () { /* empty */ }) instanceof FakePromise; + if (!SUBCLASSING) return true; + // Unhandled rejections tracking support, NodeJS Promise without it fails @@species test + return !GLOBAL_CORE_JS_PROMISE && IS_BROWSER && !NATIVE_REJECTION_EVENT; +}); -var _filter2 = _interopRequireDefault(_filter); +var INCORRECT_ITERATION = FORCED || !checkCorrectnessOfIteration(function (iterable) { + PromiseConstructor.all(iterable)['catch'](function () { /* empty */ }); +}); -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); +// helpers +var isThenable = function (it) { + var then; + return isObject(it) && isCallable(then = it.then) ? then : false; +}; -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); +var notify = function (state, isReject) { + if (state.notified) return; + state.notified = true; + var chain = state.reactions; + microtask(function () { + var value = state.value; + var ok = state.state == FULFILLED; + var index = 0; + // variable length - can't use forEach + while (chain.length > index) { + var reaction = chain[index++]; + var handler = ok ? reaction.ok : reaction.fail; + var resolve = reaction.resolve; + var reject = reaction.reject; + var domain = reaction.domain; + var result, then, exited; + try { + if (handler) { + if (!ok) { + if (state.rejection === UNHANDLED) onHandleUnhandled(state); + state.rejection = HANDLED; + } + if (handler === true) result = value; + else { + if (domain) domain.enter(); + result = handler(value); // can throw + if (domain) { + domain.exit(); + exited = true; + } + } + if (result === reaction.promise) { + reject(TypeError('Promise-chain cycle')); + } else if (then = isThenable(result)) { + then.call(result, resolve, reject); + } else resolve(result); + } else reject(value); + } catch (error) { + if (domain && !exited) domain.exit(); + reject(error); + } + } + state.reactions = []; + state.notified = false; + if (isReject && !state.rejection) onUnhandled(state); + }); +}; -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +var dispatchEvent = function (name, promise, reason) { + var event, handler; + if (DISPATCH_EVENT) { + event = document.createEvent('Event'); + event.promise = promise; + event.reason = reason; + event.initEvent(name, false, true); + global.dispatchEvent(event); + } else event = { promise: promise, reason: reason }; + if (!NATIVE_REJECTION_EVENT && (handler = global['on' + name])) handler(event); + else if (name === UNHANDLED_REJECTION) hostReportErrors('Unhandled promise rejection', reason); +}; -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } +var onUnhandled = function (state) { + task.call(global, function () { + var promise = state.facade; + var value = state.value; + var IS_UNHANDLED = isUnhandled(state); + var result; + if (IS_UNHANDLED) { + result = perform(function () { + if (IS_NODE) { + process.emit('unhandledRejection', value, promise); + } else dispatchEvent(UNHANDLED_REJECTION, promise, value); + }); + // Browsers should not trigger `rejectionHandled` event if it was handled here, NodeJS - should + state.rejection = IS_NODE || isUnhandled(state) ? UNHANDLED : HANDLED; + if (result.error) throw result.value; + } + }); +}; -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } - -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } - -var PICKER_CONTROL_HEIGHT = '130px'; -var BLEND_OPTIONS = ['add', 'diff', 'subtract', 'multiply', 'screen', 'lighten', 'darken']; -var FILTER_OPTIONS = ['grayscale', 'invert', 'sepia', 'vintage', 'blur', 'sharpen', 'emboss', 'remove-white', 'brightness', 'noise', 'pixelate', 'color-filter', 'tint', 'multiply', 'blend']; -var filterNameMap = { - grayscale: 'grayscale', - invert: 'invert', - sepia: 'sepia', - blur: 'blur', - sharpen: 'sharpen', - emboss: 'emboss', - removeWhite: 'removeColor', - brightness: 'brightness', - contrast: 'contrast', - saturation: 'saturation', - vintage: 'vintage', - polaroid: 'polaroid', - noise: 'noise', - pixelate: 'pixelate', - colorFilter: 'removeColor', - tint: 'blendColor', - multiply: 'blendColor', - blend: 'blendColor', - hue: 'hue', - gamma: 'gamma' +var isUnhandled = function (state) { + return state.rejection !== HANDLED && !state.parent; }; -var RANGE_INSTANCE_NAMES = ['removewhiteDistanceRange', 'colorfilterThresholdRange', 'pixelateRange', 'noiseRange', 'brightnessRange', 'tintOpacity']; -var COLORPICKER_INSTANCE_NAMES = ['filterBlendColor', 'filterMultiplyColor', 'filterTintColor']; - -/** - * Filter ui class - * @class - * @ignore - */ - -var Filter = function (_Submenu) { - _inherits(Filter, _Submenu); - - function Filter(subMenuElement, _ref) { - var locale = _ref.locale, - menuBarPosition = _ref.menuBarPosition, - usageStatistics = _ref.usageStatistics; - _classCallCheck(this, Filter); +var onHandleUnhandled = function (state) { + task.call(global, function () { + var promise = state.facade; + if (IS_NODE) { + process.emit('rejectionHandled', promise); + } else dispatchEvent(REJECTION_HANDLED, promise, state.value); + }); +}; - var _this = _possibleConstructorReturn(this, (Filter.__proto__ || Object.getPrototypeOf(Filter)).call(this, subMenuElement, { - locale: locale, - name: 'filter', - menuBarPosition: menuBarPosition, - templateHtml: _filter2.default, - usageStatistics: usageStatistics - })); +var bind = function (fn, state, unwrap) { + return function (value) { + fn(state, value, unwrap); + }; +}; - _this.selectBoxShow = false; +var internalReject = function (state, value, unwrap) { + if (state.done) return; + state.done = true; + if (unwrap) state = unwrap; + state.value = value; + state.state = REJECTED; + notify(state, true); +}; - _this.checkedMap = {}; - _this._makeControlElement(); - return _this; +var internalResolve = function (state, value, unwrap) { + if (state.done) return; + state.done = true; + if (unwrap) state = unwrap; + try { + if (state.facade === value) throw TypeError("Promise can't be resolved itself"); + var then = isThenable(value); + if (then) { + microtask(function () { + var wrapper = { done: false }; + try { + then.call(value, + bind(internalResolve, wrapper, state), + bind(internalReject, wrapper, state) + ); + } catch (error) { + internalReject(wrapper, error, state); + } + }); + } else { + state.value = value; + state.state = FULFILLED; + notify(state, false); + } + } catch (error) { + internalReject({ done: false }, error, state); } +}; - /** - * Destroys the instance. - */ - - - _createClass(Filter, [{ - key: 'destroy', - value: function destroy() { - this._removeEvent(); - this._destroyToolInstance(); - - (0, _util.assignmentForDestroy)(this); +// constructor polyfill +if (FORCED) { + // 25.4.3.1 Promise(executor) + PromiseConstructor = function Promise(executor) { + anInstance(this, PromiseConstructor, PROMISE); + aCallable(executor); + Internal.call(this); + var state = getInternalState(this); + try { + executor(bind(internalResolve, state), bind(internalReject, state)); + } catch (error) { + internalReject(state, error); } + }; + PromiseConstructorPrototype = PromiseConstructor.prototype; + // eslint-disable-next-line no-unused-vars -- required for `.length` + Internal = function Promise(executor) { + setInternalState(this, { + type: PROMISE, + done: false, + notified: false, + parent: false, + reactions: [], + rejection: false, + state: PENDING, + value: undefined + }); + }; + Internal.prototype = redefineAll(PromiseConstructorPrototype, { + // `Promise.prototype.then` method + // https://tc39.es/ecma262/#sec-promise.prototype.then + then: function then(onFulfilled, onRejected) { + var state = getInternalPromiseState(this); + var reaction = newPromiseCapability(speciesConstructor(this, PromiseConstructor)); + reaction.ok = isCallable(onFulfilled) ? onFulfilled : true; + reaction.fail = isCallable(onRejected) && onRejected; + reaction.domain = IS_NODE ? process.domain : undefined; + state.parent = true; + state.reactions.push(reaction); + if (state.state != PENDING) notify(state, false); + return reaction.promise; + }, + // `Promise.prototype.catch` method + // https://tc39.es/ecma262/#sec-promise.prototype.catch + 'catch': function (onRejected) { + return this.then(undefined, onRejected); + } + }); + OwnPromiseCapability = function () { + var promise = new Internal(); + var state = getInternalState(promise); + this.promise = promise; + this.resolve = bind(internalResolve, state); + this.reject = bind(internalReject, state); + }; + newPromiseCapabilityModule.f = newPromiseCapability = function (C) { + return C === PromiseConstructor || C === PromiseWrapper + ? new OwnPromiseCapability(C) + : newGenericPromiseCapability(C); + }; - /** - * Remove event for filter - */ - - }, { - key: '_removeEvent', - value: function _removeEvent() { - var _this2 = this; - - _tuiCodeSnippet2.default.forEach(FILTER_OPTIONS, function (filter) { - var filterCheckElement = _this2.selector('.tie-' + filter); - var filterNameCamelCase = (0, _util.toCamelCase)(filter); - - filterCheckElement.removeEventListener('change', _this2.eventHandler[filterNameCamelCase]); - }); - - _tuiCodeSnippet2.default.forEach([].concat(RANGE_INSTANCE_NAMES, COLORPICKER_INSTANCE_NAMES), function (instanceName) { - _this2._els[instanceName].off(); - }); + if (!IS_PURE && isCallable(NativePromise) && NativePromisePrototype !== Object.prototype) { + nativeThen = NativePromisePrototype.then; - this._els.blendType.removeEventListener('change', this.eventHandler.changeBlendFilter); - this._els.blendType.removeEventListener('click', this.eventHandler.changeBlendFilter); + if (!SUBCLASSING) { + // make `Promise#then` return a polyfilled `Promise` for native promise-based APIs + redefine(NativePromisePrototype, 'then', function then(onFulfilled, onRejected) { + var that = this; + return new PromiseConstructor(function (resolve, reject) { + nativeThen.call(that, resolve, reject); + }).then(onFulfilled, onRejected); + // https://github.com/zloirock/core-js/issues/640 + }, { unsafe: true }); - _tuiCodeSnippet2.default.forEachArray(this.colorPickerInputBoxes, function (inputBox) { - inputBox.removeEventListener(_consts.eventNames.FOCUS, _this2._onStartEditingInputBox.bind(_this2)); - inputBox.removeEventListener(_consts.eventNames.BLUR, _this2._onStopEditingInputBox.bind(_this2)); - }, this); + // makes sure that native promise-based APIs `Promise#catch` properly works with patched `Promise#then` + redefine(NativePromisePrototype, 'catch', PromiseConstructorPrototype['catch'], { unsafe: true }); } - }, { - key: '_destroyToolInstance', - value: function _destroyToolInstance() { - var _this3 = this; - _tuiCodeSnippet2.default.forEach([].concat(RANGE_INSTANCE_NAMES, COLORPICKER_INSTANCE_NAMES), function (instanceName) { - _this3._els[instanceName].destroy(); - }); + // make `.constructor === Promise` work for native promise-based APIs + try { + delete NativePromisePrototype.constructor; + } catch (error) { /* empty */ } + + // make `instanceof Promise` work for native promise-based APIs + if (setPrototypeOf) { + setPrototypeOf(NativePromisePrototype, PromiseConstructorPrototype); } + } +} - /** - * Add event for filter - * @param {Object} actions - actions for crop - * @param {Function} actions.applyFilter - apply filter option - */ +$({ global: true, wrap: true, forced: FORCED }, { + Promise: PromiseConstructor +}); - }, { - key: 'addEvent', - value: function addEvent(_ref2) { - var _this4 = this; +setToStringTag(PromiseConstructor, PROMISE, false, true); +setSpecies(PROMISE); - var applyFilter = _ref2.applyFilter; +PromiseWrapper = getBuiltIn(PROMISE); - var changeFilterState = function changeFilterState(filterName) { - return _this4._changeFilterState.bind(_this4, applyFilter, filterName); - }; - var changeFilterStateForRange = function changeFilterStateForRange(filterName) { - return function (value, isLast) { - return _this4._changeFilterState(applyFilter, filterName, isLast); - }; - }; +// statics +$({ target: PROMISE, stat: true, forced: FORCED }, { + // `Promise.reject` method + // https://tc39.es/ecma262/#sec-promise.reject + reject: function reject(r) { + var capability = newPromiseCapability(this); + capability.reject.call(undefined, r); + return capability.promise; + } +}); - this.eventHandler = { - changeBlendFilter: changeFilterState('blend'), - blandTypeClick: function blandTypeClick(event) { - return event.stopPropagation(); - } - }; +$({ target: PROMISE, stat: true, forced: IS_PURE || FORCED }, { + // `Promise.resolve` method + // https://tc39.es/ecma262/#sec-promise.resolve + resolve: function resolve(x) { + return promiseResolve(IS_PURE && this === PromiseWrapper ? PromiseConstructor : this, x); + } +}); - _tuiCodeSnippet2.default.forEach(FILTER_OPTIONS, function (filter) { - var filterCheckElement = _this4.selector('.tie-' + filter); - var filterNameCamelCase = (0, _util.toCamelCase)(filter); - _this4.checkedMap[filterNameCamelCase] = filterCheckElement; - _this4.eventHandler[filterNameCamelCase] = changeFilterState(filterNameCamelCase); - - filterCheckElement.addEventListener('change', _this4.eventHandler[filterNameCamelCase]); +$({ target: PROMISE, stat: true, forced: INCORRECT_ITERATION }, { + // `Promise.all` method + // https://tc39.es/ecma262/#sec-promise.all + all: function all(iterable) { + var C = this; + var capability = newPromiseCapability(C); + var resolve = capability.resolve; + var reject = capability.reject; + var result = perform(function () { + var $promiseResolve = aCallable(C.resolve); + var values = []; + var counter = 0; + var remaining = 1; + iterate(iterable, function (promise) { + var index = counter++; + var alreadyCalled = false; + values.push(undefined); + remaining++; + $promiseResolve.call(C, promise).then(function (value) { + if (alreadyCalled) return; + alreadyCalled = true; + values[index] = value; + --remaining || resolve(values); + }, reject); + }); + --remaining || resolve(values); + }); + if (result.error) reject(result.value); + return capability.promise; + }, + // `Promise.race` method + // https://tc39.es/ecma262/#sec-promise.race + race: function race(iterable) { + var C = this; + var capability = newPromiseCapability(C); + var reject = capability.reject; + var result = perform(function () { + var $promiseResolve = aCallable(C.resolve); + iterate(iterable, function (promise) { + $promiseResolve.call(C, promise).then(capability.resolve, reject); }); + }); + if (result.error) reject(result.value); + return capability.promise; + } +}); - this._els.removewhiteDistanceRange.on('change', changeFilterStateForRange('removeWhite')); - this._els.colorfilterThresholdRange.on('change', changeFilterStateForRange('colorFilter')); - this._els.pixelateRange.on('change', changeFilterStateForRange('pixelate')); - this._els.noiseRange.on('change', changeFilterStateForRange('noise')); - this._els.brightnessRange.on('change', changeFilterStateForRange('brightness')); - this._els.filterBlendColor.on('change', this.eventHandler.changeBlendFilter); - this._els.filterMultiplyColor.on('change', changeFilterState('multiply')); - this._els.filterTintColor.on('change', changeFilterState('tint')); - this._els.tintOpacity.on('change', changeFilterStateForRange('tint')); - this._els.filterMultiplyColor.on('changeShow', this.colorPickerChangeShow.bind(this)); - this._els.filterTintColor.on('changeShow', this.colorPickerChangeShow.bind(this)); - this._els.filterBlendColor.on('changeShow', this.colorPickerChangeShow.bind(this)); +/***/ }), - this._els.blendType.addEventListener('change', this.eventHandler.changeBlendFilter); - this._els.blendType.addEventListener('click', this.eventHandler.blandTypeClick); +/***/ 5397: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { + +var $ = __webpack_require__(3085); +var getBuiltIn = __webpack_require__(150); +var aConstructor = __webpack_require__(1404); +var anObject = __webpack_require__(1138); +var isObject = __webpack_require__(5744); +var create = __webpack_require__(2853); +var bind = __webpack_require__(6782); +var fails = __webpack_require__(6192); + +var nativeConstruct = getBuiltIn('Reflect', 'construct'); + +// `Reflect.construct` method +// https://tc39.es/ecma262/#sec-reflect.construct +// MS Edge supports only 2 arguments and argumentsList argument is optional +// FF Nightly sets third argument as `new.target`, but does not create `this` from it +var NEW_TARGET_BUG = fails(function () { + function F() { /* empty */ } + return !(nativeConstruct(function () { /* empty */ }, [], F) instanceof F); +}); +var ARGS_BUG = !fails(function () { + nativeConstruct(function () { /* empty */ }); +}); +var FORCED = NEW_TARGET_BUG || ARGS_BUG; + +$({ target: 'Reflect', stat: true, forced: FORCED, sham: FORCED }, { + construct: function construct(Target, args /* , newTarget */) { + aConstructor(Target); + anObject(args); + var newTarget = arguments.length < 3 ? Target : aConstructor(arguments[2]); + if (ARGS_BUG && !NEW_TARGET_BUG) return nativeConstruct(Target, args, newTarget); + if (Target == newTarget) { + // w/o altered newTarget, optimization for 0-4 arguments + switch (args.length) { + case 0: return new Target(); + case 1: return new Target(args[0]); + case 2: return new Target(args[0], args[1]); + case 3: return new Target(args[0], args[1], args[2]); + case 4: return new Target(args[0], args[1], args[2], args[3]); + } + // w/o altered newTarget, lot of arguments case + var $args = [null]; + $args.push.apply($args, args); + return new (bind.apply(Target, $args))(); + } + // with altered newTarget, not support built-in constructors + var proto = newTarget.prototype; + var instance = create(isObject(proto) ? proto : Object.prototype); + var result = Function.apply.call(Target, instance, args); + return isObject(result) ? result : instance; + } +}); - _tuiCodeSnippet2.default.forEachArray(this.colorPickerInputBoxes, function (inputBox) { - inputBox.addEventListener(_consts.eventNames.FOCUS, _this4._onStartEditingInputBox.bind(_this4)); - inputBox.addEventListener(_consts.eventNames.BLUR, _this4._onStopEditingInputBox.bind(_this4)); - }, this); - } - /** - * Set filter for undo changed - * @param {Object} changedFilterInfos - changed command infos - * @param {string} type - filter type - * @param {string} action - add or remove - * @param {Object} options - filter options - */ +/***/ }), - }, { - key: 'setFilterState', - value: function setFilterState(changedFilterInfos) { - var type = changedFilterInfos.type, - options = changedFilterInfos.options, - action = changedFilterInfos.action; +/***/ 1367: +/***/ (function() { - var filterName = this._getFilterNameFromOptions(type, options); - var isRemove = action === 'remove'; +// empty - if (!isRemove) { - this._setFilterState(filterName, options); - } - this.checkedMap[filterName].checked = !isRemove; - } +/***/ }), - /** - * Init all filter's checkbox to unchecked state - */ +/***/ 5454: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'initFilterCheckBoxState', - value: function initFilterCheckBoxState() { - _tuiCodeSnippet2.default.forEach(this.checkedMap, function (filter) { - filter.checked = false; - }, this); - } +"use strict"; - /** - * Set filter for undo changed - * @param {string} filterName - filter name - * @param {Object} options - filter options - * @private - */ - // eslint-disable-next-line complexity +var charAt = __webpack_require__(863).charAt; +var toString = __webpack_require__(4845); +var InternalStateModule = __webpack_require__(3326); +var defineIterator = __webpack_require__(7218); - }, { - key: '_setFilterState', - value: function _setFilterState(filterName, options) { - if (filterName === 'colorFilter') { - this._els.colorfilterThresholdRange.value = options.distance; - } else if (filterName === 'removeWhite') { - this._els.removewhiteDistanceRange.value = options.distance; - } else if (filterName === 'pixelate') { - this._els.pixelateRange.value = options.blocksize; - } else if (filterName === 'brightness') { - this._els.brightnessRange.value = options.brightness; - } else if (filterName === 'noise') { - this._els.noiseRange.value = options.noise; - } else if (filterName === 'tint') { - this._els.tintOpacity.value = options.alpha; - this._els.filterTintColor.color = options.color; - } else if (filterName === 'blend') { - this._els.filterBlendColor.color = options.color; - } else if (filterName === 'multiply') { - this._els.filterMultiplyColor.color = options.color; - } - } +var STRING_ITERATOR = 'String Iterator'; +var setInternalState = InternalStateModule.set; +var getInternalState = InternalStateModule.getterFor(STRING_ITERATOR); - /** - * Get filter name - * @param {string} type - filter type - * @param {Object} options - filter options - * @returns {string} filter name - * @private - */ +// `String.prototype[@@iterator]` method +// https://tc39.es/ecma262/#sec-string.prototype-@@iterator +defineIterator(String, 'String', function (iterated) { + setInternalState(this, { + type: STRING_ITERATOR, + string: toString(iterated), + index: 0 + }); +// `%StringIteratorPrototype%.next` method +// https://tc39.es/ecma262/#sec-%stringiteratorprototype%.next +}, function next() { + var state = getInternalState(this); + var string = state.string; + var index = state.index; + var point; + if (index >= string.length) return { value: undefined, done: true }; + point = charAt(string, index); + state.index += point.length; + return { value: point, done: false }; +}); - }, { - key: '_getFilterNameFromOptions', - value: function _getFilterNameFromOptions(type, options) { - var filterName = type; - if (type === 'removeColor') { - filterName = _tuiCodeSnippet2.default.isExisty(options.useAlpha) ? 'removeWhite' : 'colorFilter'; - } else if (type === 'blendColor') { - filterName = { - add: 'blend', - multiply: 'multiply', - tint: 'tint' - }[options.mode]; - } +/***/ }), - return filterName; - } +/***/ 957: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - /** - * Add event for filter - * @param {Function} applyFilter - actions for firter - * @param {string} filterName - filter name - * @param {boolean} [isLast] - Is last change - */ +"use strict"; - }, { - key: '_changeFilterState', - value: function _changeFilterState(applyFilter, filterName) { - var isLast = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true; +var $ = __webpack_require__(3085); +var $trim = __webpack_require__(4277).trim; +var forcedStringTrimMethod = __webpack_require__(6815); - var apply = this.checkedMap[filterName].checked; - var type = filterNameMap[filterName]; +// `String.prototype.trim` method +// https://tc39.es/ecma262/#sec-string.prototype.trim +$({ target: 'String', proto: true, forced: forcedStringTrimMethod('trim') }, { + trim: function trim() { + return $trim(this); + } +}); - var checkboxGroup = this.checkedMap[filterName].closest('.tui-image-editor-checkbox-group'); - if (checkboxGroup) { - if (apply) { - checkboxGroup.classList.remove('tui-image-editor-disabled'); - } else { - checkboxGroup.classList.add('tui-image-editor-disabled'); - } - } - applyFilter(apply, type, this._getFilterOption(filterName), !isLast); - } - /** - * Get filter option - * @param {String} type - filter type - * @returns {Object} filter option object - * @private - */ - // eslint-disable-next-line complexity +/***/ }), - }, { - key: '_getFilterOption', - value: function _getFilterOption(type) { - var option = {}; - switch (type) { - case 'removeWhite': - option.color = '#FFFFFF'; - option.useAlpha = false; - option.distance = parseFloat(this._els.removewhiteDistanceRange.value); - break; - case 'colorFilter': - option.color = '#FFFFFF'; - option.distance = parseFloat(this._els.colorfilterThresholdRange.value); - break; - case 'pixelate': - option.blocksize = (0, _util.toInteger)(this._els.pixelateRange.value); - break; - case 'noise': - option.noise = (0, _util.toInteger)(this._els.noiseRange.value); - break; - case 'brightness': - option.brightness = parseFloat(this._els.brightnessRange.value); - break; - case 'blend': - option.mode = 'add'; - option.color = this._els.filterBlendColor.color; - option.mode = this._els.blendType.value; - break; - case 'multiply': - option.mode = 'multiply'; - option.color = this._els.filterMultiplyColor.color; - break; - case 'tint': - option.mode = 'tint'; - option.color = this._els.filterTintColor.color; - option.alpha = this._els.tintOpacity.value; - break; - case 'blur': - option.blur = this._els.blurRange.value; - break; - default: - break; - } +/***/ 9781: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - return option; - } +var defineWellKnownSymbol = __webpack_require__(1488); - /** - * Make submenu range and colorpicker control - * @private - */ +// `Symbol.asyncIterator` well-known symbol +// https://tc39.es/ecma262/#sec-symbol.asynciterator +defineWellKnownSymbol('asyncIterator'); - }, { - key: '_makeControlElement', - value: function _makeControlElement() { - this._els = { - removewhiteDistanceRange: new _range2.default({ slider: this.selector('.tie-removewhite-distance-range') }, _consts.defaultFilterRangeValues.removewhiteDistanceRange), - brightnessRange: new _range2.default({ slider: this.selector('.tie-brightness-range') }, _consts.defaultFilterRangeValues.brightnessRange), - noiseRange: new _range2.default({ slider: this.selector('.tie-noise-range') }, _consts.defaultFilterRangeValues.noiseRange), - pixelateRange: new _range2.default({ slider: this.selector('.tie-pixelate-range') }, _consts.defaultFilterRangeValues.pixelateRange), - colorfilterThresholdRange: new _range2.default({ slider: this.selector('.tie-colorfilter-threshold-range') }, _consts.defaultFilterRangeValues.colorfilterThresholdRange), - filterTintColor: new _colorpicker2.default(this.selector('.tie-filter-tint-color'), '#03bd9e', this.toggleDirection, this.usageStatistics), - filterMultiplyColor: new _colorpicker2.default(this.selector('.tie-filter-multiply-color'), '#515ce6', this.toggleDirection, this.usageStatistics), - filterBlendColor: new _colorpicker2.default(this.selector('.tie-filter-blend-color'), '#ffbb3b', this.toggleDirection, this.usageStatistics), - blurRange: _consts.defaultFilterRangeValues.blurFilterRange - }; - this._els.tintOpacity = this._pickerWithRange(this._els.filterTintColor.pickerControl); - this._els.blendType = this._pickerWithSelectbox(this._els.filterBlendColor.pickerControl); +/***/ }), - this.colorPickerControls.push(this._els.filterTintColor); - this.colorPickerControls.push(this._els.filterMultiplyColor); - this.colorPickerControls.push(this._els.filterBlendColor); +/***/ 492: +/***/ (function() { - this.colorPickerInputBoxes = []; - this.colorPickerInputBoxes.push(this._els.filterTintColor.colorpickerElement.querySelector(_consts.selectorNames.COLOR_PICKER_INPUT_BOX)); - this.colorPickerInputBoxes.push(this._els.filterMultiplyColor.colorpickerElement.querySelector(_consts.selectorNames.COLOR_PICKER_INPUT_BOX)); - this.colorPickerInputBoxes.push(this._els.filterBlendColor.colorpickerElement.querySelector(_consts.selectorNames.COLOR_PICKER_INPUT_BOX)); - } +// empty - /** - * Make submenu control for picker & range mixin - * @param {HTMLElement} pickerControl - pickerControl dom element - * @returns {Range} - * @private - */ - }, { - key: '_pickerWithRange', - value: function _pickerWithRange(pickerControl) { - var rangeWrap = document.createElement('div'); - var rangeLabel = document.createElement('label'); - var slider = document.createElement('div'); +/***/ }), - slider.id = 'tie-filter-tint-opacity'; - rangeLabel.innerHTML = 'Opacity'; - rangeWrap.appendChild(rangeLabel); - rangeWrap.appendChild(slider); - pickerControl.appendChild(rangeWrap); - pickerControl.style.height = PICKER_CONTROL_HEIGHT; +/***/ 6681: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - return new _range2.default({ slider: slider }, _consts.defaultFilterRangeValues.tintOpacityRange); - } +var defineWellKnownSymbol = __webpack_require__(1488); - /** - * Make submenu control for picker & selectbox - * @param {HTMLElement} pickerControl - pickerControl dom element - * @returns {HTMLElement} - * @private - */ +// `Symbol.hasInstance` well-known symbol +// https://tc39.es/ecma262/#sec-symbol.hasinstance +defineWellKnownSymbol('hasInstance'); - }, { - key: '_pickerWithSelectbox', - value: function _pickerWithSelectbox(pickerControl) { - var selectlistWrap = document.createElement('div'); - var selectlist = document.createElement('select'); - var optionlist = document.createElement('ul'); - selectlistWrap.className = 'tui-image-editor-selectlist-wrap'; - optionlist.className = 'tui-image-editor-selectlist'; +/***/ }), - selectlistWrap.appendChild(selectlist); - selectlistWrap.appendChild(optionlist); +/***/ 9594: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - this._makeSelectOptionList(selectlist); +var defineWellKnownSymbol = __webpack_require__(1488); - pickerControl.appendChild(selectlistWrap); - pickerControl.style.height = PICKER_CONTROL_HEIGHT; +// `Symbol.isConcatSpreadable` well-known symbol +// https://tc39.es/ecma262/#sec-symbol.isconcatspreadable +defineWellKnownSymbol('isConcatSpreadable'); - this._drawSelectOptionList(selectlist, optionlist); - this._pickerWithSelectboxForAddEvent(selectlist, optionlist); - return selectlist; - } +/***/ }), - /** - * Make selectbox option list custom style - * @param {HTMLElement} selectlist - selectbox element - * @param {HTMLElement} optionlist - custom option list item element - * @private - */ +/***/ 3665: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - }, { - key: '_drawSelectOptionList', - value: function _drawSelectOptionList(selectlist, optionlist) { - var options = selectlist.querySelectorAll('option'); - _tuiCodeSnippet2.default.forEach(options, function (option) { - var optionElement = document.createElement('li'); - optionElement.innerHTML = option.innerHTML; - optionElement.setAttribute('data-item', option.value); - optionlist.appendChild(optionElement); - }); - } +var defineWellKnownSymbol = __webpack_require__(1488); - /** - * custom selectbox custom event - * @param {HTMLElement} selectlist - selectbox element - * @param {HTMLElement} optionlist - custom option list item element - * @private - */ +// `Symbol.iterator` well-known symbol +// https://tc39.es/ecma262/#sec-symbol.iterator +defineWellKnownSymbol('iterator'); - }, { - key: '_pickerWithSelectboxForAddEvent', - value: function _pickerWithSelectboxForAddEvent(selectlist, optionlist) { - var _this5 = this; - optionlist.addEventListener('click', function (event) { - var optionValue = event.target.getAttribute('data-item'); - var fireEvent = document.createEvent('HTMLEvents'); +/***/ }), - selectlist.querySelector('[value="' + optionValue + '"]').selected = true; - fireEvent.initEvent('change', true, true); +/***/ 6187: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - selectlist.dispatchEvent(fireEvent); +"use strict"; - _this5.selectBoxShow = false; - optionlist.style.display = 'none'; - }); +var $ = __webpack_require__(3085); +var global = __webpack_require__(8576); +var getBuiltIn = __webpack_require__(150); +var IS_PURE = __webpack_require__(5546); +var DESCRIPTORS = __webpack_require__(69); +var NATIVE_SYMBOL = __webpack_require__(3045); +var fails = __webpack_require__(6192); +var hasOwn = __webpack_require__(4500); +var isArray = __webpack_require__(4770); +var isCallable = __webpack_require__(6447); +var isObject = __webpack_require__(5744); +var isSymbol = __webpack_require__(3236); +var anObject = __webpack_require__(1138); +var toObject = __webpack_require__(1795); +var toIndexedObject = __webpack_require__(101); +var toPropertyKey = __webpack_require__(77); +var $toString = __webpack_require__(4845); +var createPropertyDescriptor = __webpack_require__(774); +var nativeObjectCreate = __webpack_require__(2853); +var objectKeys = __webpack_require__(7653); +var getOwnPropertyNamesModule = __webpack_require__(2092); +var getOwnPropertyNamesExternal = __webpack_require__(4052); +var getOwnPropertySymbolsModule = __webpack_require__(4750); +var getOwnPropertyDescriptorModule = __webpack_require__(5141); +var definePropertyModule = __webpack_require__(2760); +var propertyIsEnumerableModule = __webpack_require__(6007); +var redefine = __webpack_require__(9482); +var shared = __webpack_require__(8717); +var sharedKey = __webpack_require__(9766); +var hiddenKeys = __webpack_require__(4535); +var uid = __webpack_require__(2759); +var wellKnownSymbol = __webpack_require__(8182); +var wrappedWellKnownSymbolModule = __webpack_require__(9207); +var defineWellKnownSymbol = __webpack_require__(1488); +var setToStringTag = __webpack_require__(1284); +var InternalStateModule = __webpack_require__(3326); +var $forEach = __webpack_require__(454).forEach; + +var HIDDEN = sharedKey('hidden'); +var SYMBOL = 'Symbol'; +var PROTOTYPE = 'prototype'; +var TO_PRIMITIVE = wellKnownSymbol('toPrimitive'); +var setInternalState = InternalStateModule.set; +var getInternalState = InternalStateModule.getterFor(SYMBOL); +var ObjectPrototype = Object[PROTOTYPE]; +var $Symbol = global.Symbol; +var $stringify = getBuiltIn('JSON', 'stringify'); +var nativeGetOwnPropertyDescriptor = getOwnPropertyDescriptorModule.f; +var nativeDefineProperty = definePropertyModule.f; +var nativeGetOwnPropertyNames = getOwnPropertyNamesExternal.f; +var nativePropertyIsEnumerable = propertyIsEnumerableModule.f; +var AllSymbols = shared('symbols'); +var ObjectPrototypeSymbols = shared('op-symbols'); +var StringToSymbolRegistry = shared('string-to-symbol-registry'); +var SymbolToStringRegistry = shared('symbol-to-string-registry'); +var WellKnownSymbolsStore = shared('wks'); +var QObject = global.QObject; +// Don't use setters in Qt Script, https://github.com/zloirock/core-js/issues/173 +var USE_SETTER = !QObject || !QObject[PROTOTYPE] || !QObject[PROTOTYPE].findChild; + +// fallback for old Android, https://code.google.com/p/v8/issues/detail?id=687 +var setSymbolDescriptor = DESCRIPTORS && fails(function () { + return nativeObjectCreate(nativeDefineProperty({}, 'a', { + get: function () { return nativeDefineProperty(this, 'a', { value: 7 }).a; } + })).a != 7; +}) ? function (O, P, Attributes) { + var ObjectPrototypeDescriptor = nativeGetOwnPropertyDescriptor(ObjectPrototype, P); + if (ObjectPrototypeDescriptor) delete ObjectPrototype[P]; + nativeDefineProperty(O, P, Attributes); + if (ObjectPrototypeDescriptor && O !== ObjectPrototype) { + nativeDefineProperty(ObjectPrototype, P, ObjectPrototypeDescriptor); + } +} : nativeDefineProperty; + +var wrap = function (tag, description) { + var symbol = AllSymbols[tag] = nativeObjectCreate($Symbol[PROTOTYPE]); + setInternalState(symbol, { + type: SYMBOL, + tag: tag, + description: description + }); + if (!DESCRIPTORS) symbol.description = description; + return symbol; +}; - selectlist.addEventListener('mousedown', function (event) { - event.preventDefault(); - _this5.selectBoxShow = !_this5.selectBoxShow; - optionlist.style.display = _this5.selectBoxShow ? 'block' : 'none'; - optionlist.setAttribute('data-selectitem', selectlist.value); - optionlist.querySelector('[data-item=\'' + selectlist.value + '\']').classList.add('active'); - }); - } +var $defineProperty = function defineProperty(O, P, Attributes) { + if (O === ObjectPrototype) $defineProperty(ObjectPrototypeSymbols, P, Attributes); + anObject(O); + var key = toPropertyKey(P); + anObject(Attributes); + if (hasOwn(AllSymbols, key)) { + if (!Attributes.enumerable) { + if (!hasOwn(O, HIDDEN)) nativeDefineProperty(O, HIDDEN, createPropertyDescriptor(1, {})); + O[HIDDEN][key] = true; + } else { + if (hasOwn(O, HIDDEN) && O[HIDDEN][key]) O[HIDDEN][key] = false; + Attributes = nativeObjectCreate(Attributes, { enumerable: createPropertyDescriptor(0, false) }); + } return setSymbolDescriptor(O, key, Attributes); + } return nativeDefineProperty(O, key, Attributes); +}; - /** - * Make option list for select control - * @param {HTMLElement} selectlist - blend option select list element - * @private - */ +var $defineProperties = function defineProperties(O, Properties) { + anObject(O); + var properties = toIndexedObject(Properties); + var keys = objectKeys(properties).concat($getOwnPropertySymbols(properties)); + $forEach(keys, function (key) { + if (!DESCRIPTORS || $propertyIsEnumerable.call(properties, key)) $defineProperty(O, key, properties[key]); + }); + return O; +}; - }, { - key: '_makeSelectOptionList', - value: function _makeSelectOptionList(selectlist) { - _tuiCodeSnippet2.default.forEach(BLEND_OPTIONS, function (option) { - var selectOption = document.createElement('option'); - selectOption.setAttribute('value', option); - selectOption.innerHTML = option.replace(/^[a-z]/, function ($0) { - return $0.toUpperCase(); - }); - selectlist.appendChild(selectOption); - }); - } - }]); +var $create = function create(O, Properties) { + return Properties === undefined ? nativeObjectCreate(O) : $defineProperties(nativeObjectCreate(O), Properties); +}; - return Filter; -}(_submenuBase2.default); +var $propertyIsEnumerable = function propertyIsEnumerable(V) { + var P = toPropertyKey(V); + var enumerable = nativePropertyIsEnumerable.call(this, P); + if (this === ObjectPrototype && hasOwn(AllSymbols, P) && !hasOwn(ObjectPrototypeSymbols, P)) return false; + return enumerable || !hasOwn(this, P) || !hasOwn(AllSymbols, P) || hasOwn(this, HIDDEN) && this[HIDDEN][P] + ? enumerable : true; +}; -exports.default = Filter; +var $getOwnPropertyDescriptor = function getOwnPropertyDescriptor(O, P) { + var it = toIndexedObject(O); + var key = toPropertyKey(P); + if (it === ObjectPrototype && hasOwn(AllSymbols, key) && !hasOwn(ObjectPrototypeSymbols, key)) return; + var descriptor = nativeGetOwnPropertyDescriptor(it, key); + if (descriptor && hasOwn(AllSymbols, key) && !(hasOwn(it, HIDDEN) && it[HIDDEN][key])) { + descriptor.enumerable = true; + } + return descriptor; +}; -/***/ }), +var $getOwnPropertyNames = function getOwnPropertyNames(O) { + var names = nativeGetOwnPropertyNames(toIndexedObject(O)); + var result = []; + $forEach(names, function (key) { + if (!hasOwn(AllSymbols, key) && !hasOwn(hiddenKeys, key)) result.push(key); + }); + return result; +}; + +var $getOwnPropertySymbols = function getOwnPropertySymbols(O) { + var IS_OBJECT_PROTOTYPE = O === ObjectPrototype; + var names = nativeGetOwnPropertyNames(IS_OBJECT_PROTOTYPE ? ObjectPrototypeSymbols : toIndexedObject(O)); + var result = []; + $forEach(names, function (key) { + if (hasOwn(AllSymbols, key) && (!IS_OBJECT_PROTOTYPE || hasOwn(ObjectPrototype, key))) { + result.push(AllSymbols[key]); + } + }); + return result; +}; -/***/ "./src/js/ui/flip.js": -/*!***************************!*\ - !*** ./src/js/ui/flip.js ***! - \***************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +// `Symbol` constructor +// https://tc39.es/ecma262/#sec-symbol-constructor +if (!NATIVE_SYMBOL) { + $Symbol = function Symbol() { + if (this instanceof $Symbol) throw TypeError('Symbol is not a constructor'); + var description = !arguments.length || arguments[0] === undefined ? undefined : $toString(arguments[0]); + var tag = uid(description); + var setter = function (value) { + if (this === ObjectPrototype) setter.call(ObjectPrototypeSymbols, value); + if (hasOwn(this, HIDDEN) && hasOwn(this[HIDDEN], tag)) this[HIDDEN][tag] = false; + setSymbolDescriptor(this, tag, createPropertyDescriptor(1, value)); + }; + if (DESCRIPTORS && USE_SETTER) setSymbolDescriptor(ObjectPrototype, tag, { configurable: true, set: setter }); + return wrap(tag, description); + }; -"use strict"; + redefine($Symbol[PROTOTYPE], 'toString', function toString() { + return getInternalState(this).tag; + }); + redefine($Symbol, 'withoutSetter', function (description) { + return wrap(uid(description), description); + }); -Object.defineProperty(exports, "__esModule", { - value: true -}); + propertyIsEnumerableModule.f = $propertyIsEnumerable; + definePropertyModule.f = $defineProperty; + getOwnPropertyDescriptorModule.f = $getOwnPropertyDescriptor; + getOwnPropertyNamesModule.f = getOwnPropertyNamesExternal.f = $getOwnPropertyNames; + getOwnPropertySymbolsModule.f = $getOwnPropertySymbols; -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + wrappedWellKnownSymbolModule.f = function (name) { + return wrap(wellKnownSymbol(name), name); + }; -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); + if (DESCRIPTORS) { + // https://github.com/tc39/proposal-Symbol-description + nativeDefineProperty($Symbol[PROTOTYPE], 'description', { + configurable: true, + get: function description() { + return getInternalState(this).description; + } + }); + if (!IS_PURE) { + redefine(ObjectPrototype, 'propertyIsEnumerable', $propertyIsEnumerable, { unsafe: true }); + } + } +} -var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); +$({ global: true, wrap: true, forced: !NATIVE_SYMBOL, sham: !NATIVE_SYMBOL }, { + Symbol: $Symbol +}); -var _submenuBase = __webpack_require__(/*! @/ui/submenuBase */ "./src/js/ui/submenuBase.js"); +$forEach(objectKeys(WellKnownSymbolsStore), function (name) { + defineWellKnownSymbol(name); +}); -var _submenuBase2 = _interopRequireDefault(_submenuBase); +$({ target: SYMBOL, stat: true, forced: !NATIVE_SYMBOL }, { + // `Symbol.for` method + // https://tc39.es/ecma262/#sec-symbol.for + 'for': function (key) { + var string = $toString(key); + if (hasOwn(StringToSymbolRegistry, string)) return StringToSymbolRegistry[string]; + var symbol = $Symbol(string); + StringToSymbolRegistry[string] = symbol; + SymbolToStringRegistry[symbol] = string; + return symbol; + }, + // `Symbol.keyFor` method + // https://tc39.es/ecma262/#sec-symbol.keyfor + keyFor: function keyFor(sym) { + if (!isSymbol(sym)) throw TypeError(sym + ' is not a symbol'); + if (hasOwn(SymbolToStringRegistry, sym)) return SymbolToStringRegistry[sym]; + }, + useSetter: function () { USE_SETTER = true; }, + useSimple: function () { USE_SETTER = false; } +}); -var _flip = __webpack_require__(/*! @/ui/template/submenu/flip */ "./src/js/ui/template/submenu/flip.js"); +$({ target: 'Object', stat: true, forced: !NATIVE_SYMBOL, sham: !DESCRIPTORS }, { + // `Object.create` method + // https://tc39.es/ecma262/#sec-object.create + create: $create, + // `Object.defineProperty` method + // https://tc39.es/ecma262/#sec-object.defineproperty + defineProperty: $defineProperty, + // `Object.defineProperties` method + // https://tc39.es/ecma262/#sec-object.defineproperties + defineProperties: $defineProperties, + // `Object.getOwnPropertyDescriptor` method + // https://tc39.es/ecma262/#sec-object.getownpropertydescriptors + getOwnPropertyDescriptor: $getOwnPropertyDescriptor +}); -var _flip2 = _interopRequireDefault(_flip); +$({ target: 'Object', stat: true, forced: !NATIVE_SYMBOL }, { + // `Object.getOwnPropertyNames` method + // https://tc39.es/ecma262/#sec-object.getownpropertynames + getOwnPropertyNames: $getOwnPropertyNames, + // `Object.getOwnPropertySymbols` method + // https://tc39.es/ecma262/#sec-object.getownpropertysymbols + getOwnPropertySymbols: $getOwnPropertySymbols +}); -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); +// Chrome 38 and 39 `Object.getOwnPropertySymbols` fails on primitives +// https://bugs.chromium.org/p/v8/issues/detail?id=3443 +$({ target: 'Object', stat: true, forced: fails(function () { getOwnPropertySymbolsModule.f(1); }) }, { + getOwnPropertySymbols: function getOwnPropertySymbols(it) { + return getOwnPropertySymbolsModule.f(toObject(it)); + } +}); -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +// `JSON.stringify` method behavior with symbols +// https://tc39.es/ecma262/#sec-json.stringify +if ($stringify) { + var FORCED_JSON_STRINGIFY = !NATIVE_SYMBOL || fails(function () { + var symbol = $Symbol(); + // MS Edge converts symbol values to JSON as {} + return $stringify([symbol]) != '[null]' + // WebKit converts symbol values to JSON as null + || $stringify({ a: symbol }) != '{}' + // V8 throws on boxed symbols + || $stringify(Object(symbol)) != '{}'; + }); -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + $({ target: 'JSON', stat: true, forced: FORCED_JSON_STRINGIFY }, { + // eslint-disable-next-line no-unused-vars -- required for `.length` + stringify: function stringify(it, replacer, space) { + var args = [it]; + var index = 1; + var $replacer; + while (arguments.length > index) args.push(arguments[index++]); + $replacer = replacer; + if (!isObject(replacer) && it === undefined || isSymbol(it)) return; // IE8 returns string on undefined + if (!isArray(replacer)) replacer = function (key, value) { + if (isCallable($replacer)) value = $replacer.call(this, key, value); + if (!isSymbol(value)) return value; + }; + args[1] = replacer; + return $stringify.apply(null, args); + } + }); +} -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } +// `Symbol.prototype[@@toPrimitive]` method +// https://tc39.es/ecma262/#sec-symbol.prototype-@@toprimitive +if (!$Symbol[PROTOTYPE][TO_PRIMITIVE]) { + var valueOf = $Symbol[PROTOTYPE].valueOf; + redefine($Symbol[PROTOTYPE], TO_PRIMITIVE, function () { + return valueOf.apply(this, arguments); + }); +} +// `Symbol.prototype[@@toStringTag]` property +// https://tc39.es/ecma262/#sec-symbol.prototype-@@tostringtag +setToStringTag($Symbol, SYMBOL); -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } +hiddenKeys[HIDDEN] = true; -/** - * Flip ui class - * @class - * @ignore - */ -var Flip = function (_Submenu) { - _inherits(Flip, _Submenu); - function Flip(subMenuElement, _ref) { - var locale = _ref.locale, - makeSvgIcon = _ref.makeSvgIcon, - menuBarPosition = _ref.menuBarPosition, - usageStatistics = _ref.usageStatistics; +/***/ }), - _classCallCheck(this, Flip); +/***/ 1250: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - var _this = _possibleConstructorReturn(this, (Flip.__proto__ || Object.getPrototypeOf(Flip)).call(this, subMenuElement, { - locale: locale, - name: 'flip', - makeSvgIcon: makeSvgIcon, - menuBarPosition: menuBarPosition, - templateHtml: _flip2.default, - usageStatistics: usageStatistics - })); +var defineWellKnownSymbol = __webpack_require__(1488); - _this.flipStatus = false; +// `Symbol.matchAll` well-known symbol +// https://tc39.es/ecma262/#sec-symbol.matchall +defineWellKnownSymbol('matchAll'); - _this._els = { - flipButton: _this.selector('.tie-flip-button') - }; - return _this; - } - /** - * Destroys the instance. - */ +/***/ }), +/***/ 9017: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - _createClass(Flip, [{ - key: 'destroy', - value: function destroy() { - this._removeEvent(); +var defineWellKnownSymbol = __webpack_require__(1488); - (0, _util.assignmentForDestroy)(this); - } +// `Symbol.match` well-known symbol +// https://tc39.es/ecma262/#sec-symbol.match +defineWellKnownSymbol('match'); - /** - * Add event for flip - * @param {Object} actions - actions for flip - * @param {Function} actions.flip - flip action - */ - }, { - key: 'addEvent', - value: function addEvent(actions) { - this.eventHandler.changeFlip = this._changeFlip.bind(this); - this._actions = actions; - this._els.flipButton.addEventListener('click', this.eventHandler.changeFlip); - } +/***/ }), - /** - * Remove event - * @private - */ +/***/ 9786: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - }, { - key: '_removeEvent', - value: function _removeEvent() { - this._els.flipButton.removeEventListener('click', this.eventHandler.changeFlip); - } +var defineWellKnownSymbol = __webpack_require__(1488); - /** - * change Flip status - * @param {object} event - change event - * @private - */ +// `Symbol.replace` well-known symbol +// https://tc39.es/ecma262/#sec-symbol.replace +defineWellKnownSymbol('replace'); - }, { - key: '_changeFlip', - value: function _changeFlip(event) { - var _this2 = this; - var button = event.target.closest('.tui-image-editor-button'); - if (button) { - var flipType = this.getButtonType(button, ['flipX', 'flipY', 'resetFlip']); - if (!this.flipStatus && flipType === 'resetFlip') { - return; - } +/***/ }), - this._actions.flip(flipType).then(function (flipStatus) { - var flipClassList = _this2._els.flipButton.classList; - _this2.flipStatus = false; +/***/ 503: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - flipClassList.remove('resetFlip'); - _tuiCodeSnippet2.default.forEach(['flipX', 'flipY'], function (type) { - flipClassList.remove(type); - if (flipStatus[type]) { - flipClassList.add(type); - flipClassList.add('resetFlip'); - _this2.flipStatus = true; - } - }); - }); - } - } - }]); +var defineWellKnownSymbol = __webpack_require__(1488); - return Flip; -}(_submenuBase2.default); +// `Symbol.search` well-known symbol +// https://tc39.es/ecma262/#sec-symbol.search +defineWellKnownSymbol('search'); -exports.default = Flip; /***/ }), -/***/ "./src/js/ui/history.js": -/*!******************************!*\ - !*** ./src/js/ui/history.js ***! - \******************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +/***/ 6565: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { -"use strict"; +var defineWellKnownSymbol = __webpack_require__(1488); +// `Symbol.species` well-known symbol +// https://tc39.es/ecma262/#sec-symbol.species +defineWellKnownSymbol('species'); -Object.defineProperty(exports, "__esModule", { - value: true -}); -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); +/***/ }), -var _panelMenu = __webpack_require__(/*! @/ui/panelMenu */ "./src/js/ui/panelMenu.js"); +/***/ 9322: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { -var _panelMenu2 = _interopRequireDefault(_panelMenu); +var defineWellKnownSymbol = __webpack_require__(1488); -var _history = __webpack_require__(/*! @/ui/template/submenu/history */ "./src/js/ui/template/submenu/history.js"); +// `Symbol.split` well-known symbol +// https://tc39.es/ecma262/#sec-symbol.split +defineWellKnownSymbol('split'); -var _history2 = _interopRequireDefault(_history); -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); +/***/ }), -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +/***/ 3610: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } +var defineWellKnownSymbol = __webpack_require__(1488); -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } +// `Symbol.toPrimitive` well-known symbol +// https://tc39.es/ecma262/#sec-symbol.toprimitive +defineWellKnownSymbol('toPrimitive'); -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } -var historyClassName = 'history-item'; -var selectedClassName = 'selected-item'; -var disabledClassName = 'disabled-item'; +/***/ }), -/** - * History ui class - * @class - * @ignore - */ +/***/ 6886: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { -var History = function (_Panel) { - _inherits(History, _Panel); +var defineWellKnownSymbol = __webpack_require__(1488); - function History(menuElement, _ref) { - var locale = _ref.locale, - makeSvgIcon = _ref.makeSvgIcon; - - _classCallCheck(this, History); - - var _this = _possibleConstructorReturn(this, (History.__proto__ || Object.getPrototypeOf(History)).call(this, menuElement, { name: 'history' })); +// `Symbol.toStringTag` well-known symbol +// https://tc39.es/ecma262/#sec-symbol.tostringtag +defineWellKnownSymbol('toStringTag'); - menuElement.classList.add('enabled'); - _this.locale = locale; - _this.makeSvgIcon = makeSvgIcon; - _this._eventHandler = {}; - _this._historyIndex = _this.getListLength(); - return _this; - } +/***/ }), - /** - * Add history - * @param {string} name - name of history - * @param {?string} detail - detail information of history - */ +/***/ 3514: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { +var defineWellKnownSymbol = __webpack_require__(1488); - _createClass(History, [{ - key: 'add', - value: function add(_ref2) { - var name = _ref2.name, - detail = _ref2.detail; +// `Symbol.unscopables` well-known symbol +// https://tc39.es/ecma262/#sec-symbol.unscopables +defineWellKnownSymbol('unscopables'); - if (this._hasDisabledItem()) { - this.deleteListItemElement(this._historyIndex + 1, this.getListLength()); - } - var html = (0, _history2.default)({ locale: this.locale, makeSvgIcon: this.makeSvgIcon, name: name, detail: detail }); - var item = this.makeListItemElement(html); +/***/ }), - this.pushListItemElement(item); - this._historyIndex = this.getListLength() - 1; - this._selectItem(this._historyIndex); - } +/***/ 177: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - /** - * Init history - */ +var defineWellKnownSymbol = __webpack_require__(1488); - }, { - key: 'init', - value: function init() { - this.deleteListItemElement(1, this.getListLength()); - this._historyIndex = 0; - this._selectItem(this._historyIndex); - } +// `Symbol.asyncDispose` well-known symbol +// https://github.com/tc39/proposal-using-statement +defineWellKnownSymbol('asyncDispose'); - /** - * Clear history - */ - }, { - key: 'clear', - value: function clear() { - this.deleteListItemElement(0, this.getListLength()); - this._historyIndex = -1; - } +/***/ }), - /** - * Select previous history of current selected history - */ +/***/ 9031: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'prev', - value: function prev() { - this._historyIndex -= 1; - this._selectItem(this._historyIndex); - } +var defineWellKnownSymbol = __webpack_require__(1488); - /** - * Select next history of current selected history - */ +// `Symbol.dispose` well-known symbol +// https://github.com/tc39/proposal-using-statement +defineWellKnownSymbol('dispose'); - }, { - key: 'next', - value: function next() { - this._historyIndex += 1; - this._selectItem(this._historyIndex); - } - /** - * Whether history menu has disabled item - * @returns {boolean} - */ +/***/ }), - }, { - key: '_hasDisabledItem', - value: function _hasDisabledItem() { - return this.getListLength() - 1 > this._historyIndex; - } +/***/ 6658: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - /** - * Add history menu event - * @private - */ +var defineWellKnownSymbol = __webpack_require__(1488); - }, { - key: '_addHistoryEventListener', - value: function _addHistoryEventListener() { - var _this2 = this; +// `Symbol.matcher` well-known symbol +// https://github.com/tc39/proposal-pattern-matching +defineWellKnownSymbol('matcher'); - this._eventHandler.history = function (event) { - return _this2._clickHistoryItem(event); - }; - this.listElement.addEventListener('click', this._eventHandler.history); - } - /** - * Remove history menu event - * @private - */ +/***/ }), - }, { - key: '_removeHistoryEventListener', - value: function _removeHistoryEventListener() { - this.listElement.removeEventListener('click', this._eventHandler.history); - } +/***/ 1875: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - /** - * onClick history menu event listener - * @param {object} event - event object - * @private - */ +var defineWellKnownSymbol = __webpack_require__(1488); - }, { - key: '_clickHistoryItem', - value: function _clickHistoryItem(event) { - var target = event.target; +// `Symbol.metadata` well-known symbol +// https://github.com/tc39/proposal-decorators +defineWellKnownSymbol('metadata'); - var item = target.closest('.' + historyClassName); - if (!item) { - return; - } +/***/ }), - var index = Number.parseInt(item.getAttribute('data-index'), 10); +/***/ 8658: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - if (index !== this._historyIndex) { - var count = Math.abs(index - this._historyIndex); +var defineWellKnownSymbol = __webpack_require__(1488); - if (index < this._historyIndex) { - this._actions.undo(count); - } else { - this._actions.redo(count); - } - } - } +// `Symbol.observable` well-known symbol +// https://github.com/tc39/proposal-observable +defineWellKnownSymbol('observable'); - /** - * Change item's state to selected state - * @param {number} index - index of selected item - */ - }, { - key: '_selectItem', - value: function _selectItem(index) { - for (var i = 0; i < this.getListLength(); i += 1) { - this.removeClass(i, selectedClassName); - this.removeClass(i, disabledClassName); - if (i > index) { - this.addClass(i, disabledClassName); - } - } - this.addClass(index, selectedClassName); - } +/***/ }), - /** - * Destroys the instance. - */ +/***/ 4592: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'destroy', - value: function destroy() { - this.removeEvent(); +// TODO: remove from `core-js@4` +var defineWellKnownSymbol = __webpack_require__(1488); - (0, _util.assignmentForDestroy)(this); - } +// `Symbol.patternMatch` well-known symbol +// https://github.com/tc39/proposal-pattern-matching +defineWellKnownSymbol('patternMatch'); - /** - * Add event for history - * @param {Object} actions - actions for crop - * @param {Function} actions.undo - undo action - * @param {Function} actions.redo - redo action - */ - }, { - key: 'addEvent', - value: function addEvent(actions) { - this._actions = actions; - this._addHistoryEventListener(); - } +/***/ }), - /** - * Remove event - * @private - */ +/***/ 6680: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'removeEvent', - value: function removeEvent() { - this._removeHistoryEventListener(); - } - }]); +// TODO: remove from `core-js@4` +var defineWellKnownSymbol = __webpack_require__(1488); - return History; -}(_panelMenu2.default); +defineWellKnownSymbol('replaceAll'); -exports.default = History; /***/ }), -/***/ "./src/js/ui/icon.js": -/*!***************************!*\ - !*** ./src/js/ui/icon.js ***! - \***************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; +/***/ 162: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { +__webpack_require__(8939); +var DOMIterables = __webpack_require__(7365); +var global = __webpack_require__(8576); +var classof = __webpack_require__(4696); +var createNonEnumerableProperty = __webpack_require__(8711); +var Iterators = __webpack_require__(7771); +var wellKnownSymbol = __webpack_require__(8182); -Object.defineProperty(exports, "__esModule", { - value: true -}); +var TO_STRING_TAG = wellKnownSymbol('toStringTag'); -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); +for (var COLLECTION_NAME in DOMIterables) { + var Collection = global[COLLECTION_NAME]; + var CollectionPrototype = Collection && Collection.prototype; + if (CollectionPrototype && classof(CollectionPrototype) !== TO_STRING_TAG) { + createNonEnumerableProperty(CollectionPrototype, TO_STRING_TAG, COLLECTION_NAME); + } + Iterators[COLLECTION_NAME] = Iterators.Array; +} -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); -var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); +/***/ }), -var _colorpicker = __webpack_require__(/*! @/ui/tools/colorpicker */ "./src/js/ui/tools/colorpicker.js"); +/***/ 2906: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { -var _colorpicker2 = _interopRequireDefault(_colorpicker); +var $ = __webpack_require__(3085); +var global = __webpack_require__(8576); +var isCallable = __webpack_require__(6447); +var userAgent = __webpack_require__(8989); -var _submenuBase = __webpack_require__(/*! @/ui/submenuBase */ "./src/js/ui/submenuBase.js"); +var slice = [].slice; +var MSIE = /MSIE .\./.test(userAgent); // <- dirty ie9- check -var _submenuBase2 = _interopRequireDefault(_submenuBase); +var wrap = function (scheduler) { + return function (handler, timeout /* , ...arguments */) { + var boundArgs = arguments.length > 2; + var args = boundArgs ? slice.call(arguments, 2) : undefined; + return scheduler(boundArgs ? function () { + // eslint-disable-next-line no-new-func -- spec requirement + (isCallable(handler) ? handler : Function(handler)).apply(this, args); + } : handler, timeout); + }; +}; -var _icon = __webpack_require__(/*! @/ui/template/submenu/icon */ "./src/js/ui/template/submenu/icon.js"); +// ie9- setTimeout & setInterval additional parameters fix +// https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#timers +$({ global: true, bind: true, forced: MSIE }, { + // `setTimeout` method + // https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#dom-settimeout + setTimeout: wrap(global.setTimeout), + // `setInterval` method + // https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#dom-setinterval + setInterval: wrap(global.setInterval) +}); -var _icon2 = _interopRequireDefault(_icon); -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); +/***/ }), -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); +/***/ 9336: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +"use strict"; -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } +// TODO: in core-js@4, move /modules/ dependencies to public entries for better optimization by tools like `preset-env` +__webpack_require__(8939); +var $ = __webpack_require__(3085); +var getBuiltIn = __webpack_require__(150); +var USE_NATIVE_URL = __webpack_require__(4551); +var redefine = __webpack_require__(9482); +var redefineAll = __webpack_require__(533); +var setToStringTag = __webpack_require__(1284); +var createIteratorConstructor = __webpack_require__(5148); +var InternalStateModule = __webpack_require__(3326); +var anInstance = __webpack_require__(6961); +var isCallable = __webpack_require__(6447); +var hasOwn = __webpack_require__(4500); +var bind = __webpack_require__(8043); +var classof = __webpack_require__(4696); +var anObject = __webpack_require__(1138); +var isObject = __webpack_require__(5744); +var $toString = __webpack_require__(4845); +var create = __webpack_require__(2853); +var createPropertyDescriptor = __webpack_require__(774); +var getIterator = __webpack_require__(1669); +var getIteratorMethod = __webpack_require__(8703); +var wellKnownSymbol = __webpack_require__(8182); + +var nativeFetch = getBuiltIn('fetch'); +var NativeRequest = getBuiltIn('Request'); +var RequestPrototype = NativeRequest && NativeRequest.prototype; +var Headers = getBuiltIn('Headers'); +var ITERATOR = wellKnownSymbol('iterator'); +var URL_SEARCH_PARAMS = 'URLSearchParams'; +var URL_SEARCH_PARAMS_ITERATOR = URL_SEARCH_PARAMS + 'Iterator'; +var setInternalState = InternalStateModule.set; +var getInternalParamsState = InternalStateModule.getterFor(URL_SEARCH_PARAMS); +var getInternalIteratorState = InternalStateModule.getterFor(URL_SEARCH_PARAMS_ITERATOR); -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } +var plus = /\+/g; +var sequences = Array(4); -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } +var percentSequence = function (bytes) { + return sequences[bytes - 1] || (sequences[bytes - 1] = RegExp('((?:%[\\da-f]{2}){' + bytes + '})', 'gi')); +}; -/** - * Icon ui class - * @class - * @ignore - */ -var Icon = function (_Submenu) { - _inherits(Icon, _Submenu); +var percentDecode = function (sequence) { + try { + return decodeURIComponent(sequence); + } catch (error) { + return sequence; + } +}; - function Icon(subMenuElement, _ref) { - var locale = _ref.locale, - makeSvgIcon = _ref.makeSvgIcon, - menuBarPosition = _ref.menuBarPosition, - usageStatistics = _ref.usageStatistics; +var deserialize = function (it) { + var result = it.replace(plus, ' '); + var bytes = 4; + try { + return decodeURIComponent(result); + } catch (error) { + while (bytes) { + result = result.replace(percentSequence(bytes--), percentDecode); + } + return result; + } +}; - _classCallCheck(this, Icon); +var find = /[!'()~]|%20/g; - var _this = _possibleConstructorReturn(this, (Icon.__proto__ || Object.getPrototypeOf(Icon)).call(this, subMenuElement, { - locale: locale, - name: 'icon', - makeSvgIcon: makeSvgIcon, - menuBarPosition: menuBarPosition, - templateHtml: _icon2.default, - usageStatistics: usageStatistics - })); +var replace = { + '!': '%21', + "'": '%27', + '(': '%28', + ')': '%29', + '~': '%7E', + '%20': '+' +}; - _this.iconType = null; - _this._iconMap = {}; +var replacer = function (match) { + return replace[match]; +}; - _this._els = { - registerIconButton: _this.selector('.tie-icon-image-file'), - addIconButton: _this.selector('.tie-icon-add-button'), - iconColorpicker: new _colorpicker2.default(_this.selector('.tie-icon-color'), '#ffbb3b', _this.toggleDirection, _this.usageStatistics) - }; +var serialize = function (it) { + return encodeURIComponent(it).replace(find, replacer); +}; - _this.colorPickerInputBox = _this._els.iconColorpicker.colorpickerElement.querySelector(_consts.selectorNames.COLOR_PICKER_INPUT_BOX); - return _this; +var parseSearchParams = function (result, query) { + if (query) { + var attributes = query.split('&'); + var index = 0; + var attribute, entry; + while (index < attributes.length) { + attribute = attributes[index++]; + if (attribute.length) { + entry = attribute.split('='); + result.push({ + key: deserialize(entry.shift()), + value: deserialize(entry.join('=')) + }); + } + } } +}; - /** - * Destroys the instance. - */ +var updateSearchParams = function (query) { + this.entries.length = 0; + parseSearchParams(this.entries, query); +}; +var validateArgumentsLength = function (passed, required) { + if (passed < required) throw TypeError('Not enough arguments'); +}; - _createClass(Icon, [{ - key: 'destroy', - value: function destroy() { - this._removeEvent(); - this._els.iconColorpicker.destroy(); +var URLSearchParamsIterator = createIteratorConstructor(function Iterator(params, kind) { + setInternalState(this, { + type: URL_SEARCH_PARAMS_ITERATOR, + iterator: getIterator(getInternalParamsState(params).entries), + kind: kind + }); +}, 'Iterator', function next() { + var state = getInternalIteratorState(this); + var kind = state.kind; + var step = state.iterator.next(); + var entry = step.value; + if (!step.done) { + step.value = kind === 'keys' ? entry.key : kind === 'values' ? entry.value : [entry.key, entry.value]; + } return step; +}); - (0, _util.assignmentForDestroy)(this); - } +// `URLSearchParams` constructor +// https://url.spec.whatwg.org/#interface-urlsearchparams +var URLSearchParamsConstructor = function URLSearchParams(/* init */) { + anInstance(this, URLSearchParamsConstructor, URL_SEARCH_PARAMS); + var init = arguments.length > 0 ? arguments[0] : undefined; + var that = this; + var entries = []; + var iteratorMethod, iterator, next, step, entryIterator, entryNext, first, second, key; + + setInternalState(that, { + type: URL_SEARCH_PARAMS, + entries: entries, + updateURL: function () { /* empty */ }, + updateSearchParams: updateSearchParams + }); - /** - * Add event for icon - * @param {Object} actions - actions for icon - * @param {Function} actions.registerCustomIcon - register icon - * @param {Function} actions.addIcon - add icon - * @param {Function} actions.changeColor - change icon color - */ + if (init !== undefined) { + if (isObject(init)) { + iteratorMethod = getIteratorMethod(init); + if (iteratorMethod) { + iterator = getIterator(init, iteratorMethod); + next = iterator.next; + while (!(step = next.call(iterator)).done) { + entryIterator = getIterator(anObject(step.value)); + entryNext = entryIterator.next; + if ( + (first = entryNext.call(entryIterator)).done || + (second = entryNext.call(entryIterator)).done || + !entryNext.call(entryIterator).done + ) throw TypeError('Expected sequence with length 2'); + entries.push({ key: $toString(first.value), value: $toString(second.value) }); + } + } else for (key in init) if (hasOwn(init, key)) entries.push({ key: key, value: $toString(init[key]) }); + } else { + parseSearchParams( + entries, + typeof init === 'string' ? init.charAt(0) === '?' ? init.slice(1) : init : $toString(init) + ); + } + } +}; - }, { - key: 'addEvent', - value: function addEvent(actions) { - var registerIcon = this._registerIconHandler.bind(this); - var addIcon = this._addIconHandler.bind(this); +var URLSearchParamsPrototype = URLSearchParamsConstructor.prototype; - this.eventHandler = { - registerIcon: registerIcon, - addIcon: addIcon - }; - - this.actions = actions; - this._els.iconColorpicker.on('change', this._changeColorHandler.bind(this)); - this._els.registerIconButton.addEventListener('change', registerIcon); - this._els.addIconButton.addEventListener('click', addIcon); - - this.colorPickerInputBox.addEventListener(_consts.eventNames.FOCUS, this._onStartEditingInputBox.bind(this)); - this.colorPickerInputBox.addEventListener(_consts.eventNames.BLUR, this._onStopEditingInputBox.bind(this)); +redefineAll(URLSearchParamsPrototype, { + // `URLSearchParams.prototype.append` method + // https://url.spec.whatwg.org/#dom-urlsearchparams-append + append: function append(name, value) { + validateArgumentsLength(arguments.length, 2); + var state = getInternalParamsState(this); + state.entries.push({ key: $toString(name), value: $toString(value) }); + state.updateURL(); + }, + // `URLSearchParams.prototype.delete` method + // https://url.spec.whatwg.org/#dom-urlsearchparams-delete + 'delete': function (name) { + validateArgumentsLength(arguments.length, 1); + var state = getInternalParamsState(this); + var entries = state.entries; + var key = $toString(name); + var index = 0; + while (index < entries.length) { + if (entries[index].key === key) entries.splice(index, 1); + else index++; } - - /** - * Remove event - * @private - */ - - }, { - key: '_removeEvent', - value: function _removeEvent() { - this._els.iconColorpicker.off(); - this._els.registerIconButton.removeEventListener('change', this.eventHandler.registerIcon); - this._els.addIconButton.removeEventListener('click', this.eventHandler.addIcon); - - this.colorPickerInputBox.removeEventListener(_consts.eventNames.FOCUS, this._onStartEditingInputBox.bind(this)); - this.colorPickerInputBox.removeEventListener(_consts.eventNames.BLUR, this._onStopEditingInputBox.bind(this)); + state.updateURL(); + }, + // `URLSearchParams.prototype.get` method + // https://url.spec.whatwg.org/#dom-urlsearchparams-get + get: function get(name) { + validateArgumentsLength(arguments.length, 1); + var entries = getInternalParamsState(this).entries; + var key = $toString(name); + var index = 0; + for (; index < entries.length; index++) { + if (entries[index].key === key) return entries[index].value; } - - /** - * Clear icon type - */ - - }, { - key: 'clearIconType', - value: function clearIconType() { - this._els.addIconButton.classList.remove(this.iconType); - this.iconType = null; + return null; + }, + // `URLSearchParams.prototype.getAll` method + // https://url.spec.whatwg.org/#dom-urlsearchparams-getall + getAll: function getAll(name) { + validateArgumentsLength(arguments.length, 1); + var entries = getInternalParamsState(this).entries; + var key = $toString(name); + var result = []; + var index = 0; + for (; index < entries.length; index++) { + if (entries[index].key === key) result.push(entries[index].value); } - - /** - * Register default icon - */ - - }, { - key: 'registerDefaultIcon', - value: function registerDefaultIcon() { - var _this2 = this; - - _tuiCodeSnippet2.default.forEach(_consts.defaultIconPath, function (path, type) { - _this2.actions.registerDefaultIcons(type, path); - }); + return result; + }, + // `URLSearchParams.prototype.has` method + // https://url.spec.whatwg.org/#dom-urlsearchparams-has + has: function has(name) { + validateArgumentsLength(arguments.length, 1); + var entries = getInternalParamsState(this).entries; + var key = $toString(name); + var index = 0; + while (index < entries.length) { + if (entries[index++].key === key) return true; } - - /** - * Set icon picker color - * @param {string} iconColor - rgb color string - */ - - }, { - key: 'setIconPickerColor', - value: function setIconPickerColor(iconColor) { - this._els.iconColorpicker.color = iconColor; + return false; + }, + // `URLSearchParams.prototype.set` method + // https://url.spec.whatwg.org/#dom-urlsearchparams-set + set: function set(name, value) { + validateArgumentsLength(arguments.length, 1); + var state = getInternalParamsState(this); + var entries = state.entries; + var found = false; + var key = $toString(name); + var val = $toString(value); + var index = 0; + var entry; + for (; index < entries.length; index++) { + entry = entries[index]; + if (entry.key === key) { + if (found) entries.splice(index--, 1); + else { + found = true; + entry.value = val; + } + } } - - /** - * Returns the menu to its default state. - */ - - }, { - key: 'changeStandbyMode', - value: function changeStandbyMode() { - this.clearIconType(); - this.actions.cancelAddIcon(); + if (!found) entries.push({ key: key, value: val }); + state.updateURL(); + }, + // `URLSearchParams.prototype.sort` method + // https://url.spec.whatwg.org/#dom-urlsearchparams-sort + sort: function sort() { + var state = getInternalParamsState(this); + var entries = state.entries; + // Array#sort is not stable in some engines + var slice = entries.slice(); + var entry, entriesIndex, sliceIndex; + entries.length = 0; + for (sliceIndex = 0; sliceIndex < slice.length; sliceIndex++) { + entry = slice[sliceIndex]; + for (entriesIndex = 0; entriesIndex < sliceIndex; entriesIndex++) { + if (entries[entriesIndex].key > entry.key) { + entries.splice(entriesIndex, 0, entry); + break; + } + } + if (entriesIndex === sliceIndex) entries.push(entry); } - - /** - * Change icon color - * @param {string} color - color for change - * @private - */ - - }, { - key: '_changeColorHandler', - value: function _changeColorHandler(color) { - color = color || 'transparent'; - this.actions.changeColor(color); + state.updateURL(); + }, + // `URLSearchParams.prototype.forEach` method + forEach: function forEach(callback /* , thisArg */) { + var entries = getInternalParamsState(this).entries; + var boundFunction = bind(callback, arguments.length > 1 ? arguments[1] : undefined, 3); + var index = 0; + var entry; + while (index < entries.length) { + entry = entries[index++]; + boundFunction(entry.value, entry.key, this); } + }, + // `URLSearchParams.prototype.keys` method + keys: function keys() { + return new URLSearchParamsIterator(this, 'keys'); + }, + // `URLSearchParams.prototype.values` method + values: function values() { + return new URLSearchParamsIterator(this, 'values'); + }, + // `URLSearchParams.prototype.entries` method + entries: function entries() { + return new URLSearchParamsIterator(this, 'entries'); + } +}, { enumerable: true }); - /** - * Change icon color - * @param {object} event - add button event object - * @private - */ +// `URLSearchParams.prototype[@@iterator]` method +redefine(URLSearchParamsPrototype, ITERATOR, URLSearchParamsPrototype.entries, { name: 'entries' }); - }, { - key: '_addIconHandler', - value: function _addIconHandler(event) { - var button = event.target.closest('.tui-image-editor-button'); +// `URLSearchParams.prototype.toString` method +// https://url.spec.whatwg.org/#urlsearchparams-stringification-behavior +redefine(URLSearchParamsPrototype, 'toString', function toString() { + var entries = getInternalParamsState(this).entries; + var result = []; + var index = 0; + var entry; + while (index < entries.length) { + entry = entries[index++]; + result.push(serialize(entry.key) + '=' + serialize(entry.value)); + } return result.join('&'); +}, { enumerable: true }); - if (button) { - var iconType = button.getAttribute('data-icontype'); - var iconColor = this._els.iconColorpicker.color; - this.actions.discardSelection(); - this.actions.changeSelectableAll(false); - this._els.addIconButton.classList.remove(this.iconType); - this._els.addIconButton.classList.add(iconType); +setToStringTag(URLSearchParamsConstructor, URL_SEARCH_PARAMS); - if (this.iconType === iconType) { - this.changeStandbyMode(); - } else { - this.actions.addIcon(iconType, iconColor); - this.iconType = iconType; +$({ global: true, forced: !USE_NATIVE_URL }, { + URLSearchParams: URLSearchParamsConstructor +}); + +// Wrap `fetch` and `Request` for correct work with polyfilled `URLSearchParams` +if (!USE_NATIVE_URL && isCallable(Headers)) { + var wrapRequestOptions = function (init) { + if (isObject(init)) { + var body = init.body; + var headers; + if (classof(body) === URL_SEARCH_PARAMS) { + headers = init.headers ? new Headers(init.headers) : new Headers(); + if (!headers.has('content-type')) { + headers.set('content-type', 'application/x-www-form-urlencoded;charset=UTF-8'); } + return create(init, { + body: createPropertyDescriptor(0, String(body)), + headers: createPropertyDescriptor(0, headers) + }); } - } - - /** - * register icon - * @param {object} event - file change event object - * @private - */ - - }, { - key: '_registerIconHandler', - value: function _registerIconHandler(event) { - var imgUrl = void 0; + } return init; + }; - if (!_util.isSupportFileApi) { - alert('This browser does not support file-api'); + if (isCallable(nativeFetch)) { + $({ global: true, enumerable: true, forced: true }, { + fetch: function fetch(input /* , init */) { + return nativeFetch(input, arguments.length > 1 ? wrapRequestOptions(arguments[1]) : {}); } + }); + } - var _event$target$files = event.target.files, - file = _event$target$files[0]; + if (isCallable(NativeRequest)) { + var RequestConstructor = function Request(input /* , init */) { + anInstance(this, RequestConstructor, 'Request'); + return new NativeRequest(input, arguments.length > 1 ? wrapRequestOptions(arguments[1]) : {}); + }; + RequestPrototype.constructor = RequestConstructor; + RequestConstructor.prototype = RequestPrototype; - if (file) { - imgUrl = URL.createObjectURL(file); - this.actions.registerCustomIcon(imgUrl, file); - } - } - }]); + $({ global: true, forced: true }, { + Request: RequestConstructor + }); + } +} - return Icon; -}(_submenuBase2.default); +module.exports = { + URLSearchParams: URLSearchParamsConstructor, + getState: getInternalParamsState +}; -exports.default = Icon; /***/ }), -/***/ "./src/js/ui/locale/locale.js": -/*!************************************!*\ - !*** ./src/js/ui/locale/locale.js ***! - \************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +/***/ 4948: +/***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { "use strict"; +// TODO: in core-js@4, move /modules/ dependencies to public entries for better optimization by tools like `preset-env` +__webpack_require__(5454); +var $ = __webpack_require__(3085); +var DESCRIPTORS = __webpack_require__(69); +var USE_NATIVE_URL = __webpack_require__(4551); +var global = __webpack_require__(8576); +var defineProperties = __webpack_require__(1187); +var redefine = __webpack_require__(9482); +var anInstance = __webpack_require__(6961); +var hasOwn = __webpack_require__(4500); +var assign = __webpack_require__(2503); +var arrayFrom = __webpack_require__(841); +var codeAt = __webpack_require__(863).codeAt; +var toASCII = __webpack_require__(7977); +var $toString = __webpack_require__(4845); +var setToStringTag = __webpack_require__(1284); +var URLSearchParamsModule = __webpack_require__(9336); +var InternalStateModule = __webpack_require__(3326); + +var NativeURL = global.URL; +var URLSearchParams = URLSearchParamsModule.URLSearchParams; +var getInternalSearchParamsState = URLSearchParamsModule.getState; +var setInternalState = InternalStateModule.set; +var getInternalURLState = InternalStateModule.getterFor('URL'); +var floor = Math.floor; +var pow = Math.pow; + +var INVALID_AUTHORITY = 'Invalid authority'; +var INVALID_SCHEME = 'Invalid scheme'; +var INVALID_HOST = 'Invalid host'; +var INVALID_PORT = 'Invalid port'; + +var ALPHA = /[A-Za-z]/; +// eslint-disable-next-line regexp/no-obscure-range -- safe +var ALPHANUMERIC = /[\d+-.A-Za-z]/; +var DIGIT = /\d/; +var HEX_START = /^0x/i; +var OCT = /^[0-7]+$/; +var DEC = /^\d+$/; +var HEX = /^[\dA-Fa-f]+$/; +/* eslint-disable regexp/no-control-character -- safe */ +var FORBIDDEN_HOST_CODE_POINT = /[\0\t\n\r #%/:<>?@[\\\]^|]/; +var FORBIDDEN_HOST_CODE_POINT_EXCLUDING_PERCENT = /[\0\t\n\r #/:<>?@[\\\]^|]/; +var LEADING_AND_TRAILING_C0_CONTROL_OR_SPACE = /^[\u0000-\u0020]+|[\u0000-\u0020]+$/g; +var TAB_AND_NEW_LINE = /[\t\n\r]/g; +/* eslint-enable regexp/no-control-character -- safe */ +var EOF; + +var parseHost = function (url, input) { + var result, codePoints, index; + if (input.charAt(0) == '[') { + if (input.charAt(input.length - 1) != ']') return INVALID_HOST; + result = parseIPv6(input.slice(1, -1)); + if (!result) return INVALID_HOST; + url.host = result; + // opaque host + } else if (!isSpecial(url)) { + if (FORBIDDEN_HOST_CODE_POINT_EXCLUDING_PERCENT.test(input)) return INVALID_HOST; + result = ''; + codePoints = arrayFrom(input); + for (index = 0; index < codePoints.length; index++) { + result += percentEncode(codePoints[index], C0ControlPercentEncodeSet); + } + url.host = result; + } else { + input = toASCII(input); + if (FORBIDDEN_HOST_CODE_POINT.test(input)) return INVALID_HOST; + result = parseIPv4(input); + if (result === null) return INVALID_HOST; + url.host = result; + } +}; -Object.defineProperty(exports, "__esModule", { - value: true -}); - -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); +var parseIPv4 = function (input) { + var parts = input.split('.'); + var partsLength, numbers, index, part, radix, number, ipv4; + if (parts.length && parts[parts.length - 1] == '') { + parts.pop(); + } + partsLength = parts.length; + if (partsLength > 4) return input; + numbers = []; + for (index = 0; index < partsLength; index++) { + part = parts[index]; + if (part == '') return input; + radix = 10; + if (part.length > 1 && part.charAt(0) == '0') { + radix = HEX_START.test(part) ? 16 : 8; + part = part.slice(radix == 8 ? 1 : 2); + } + if (part === '') { + number = 0; + } else { + if (!(radix == 10 ? DEC : radix == 8 ? OCT : HEX).test(part)) return input; + number = parseInt(part, radix); + } + numbers.push(number); + } + for (index = 0; index < partsLength; index++) { + number = numbers[index]; + if (index == partsLength - 1) { + if (number >= pow(256, 5 - partsLength)) return null; + } else if (number > 255) return null; + } + ipv4 = numbers.pop(); + for (index = 0; index < numbers.length; index++) { + ipv4 += numbers[index] * pow(256, 3 - index); + } + return ipv4; +}; -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } +// eslint-disable-next-line max-statements -- TODO +var parseIPv6 = function (input) { + var address = [0, 0, 0, 0, 0, 0, 0, 0]; + var pieceIndex = 0; + var compress = null; + var pointer = 0; + var value, length, numbersSeen, ipv4Piece, number, swaps, swap; -/** - * Translate messages - */ -var Locale = function () { - /** - * @constructor - * @param {Object} locale - Locale object for initialise - */ - function Locale(locale) { - _classCallCheck(this, Locale); + var chr = function () { + return input.charAt(pointer); + }; - this._locale = locale; + if (chr() == ':') { + if (input.charAt(1) != ':') return; + pointer += 2; + pieceIndex++; + compress = pieceIndex; } + while (chr()) { + if (pieceIndex == 8) return; + if (chr() == ':') { + if (compress !== null) return; + pointer++; + pieceIndex++; + compress = pieceIndex; + continue; + } + value = length = 0; + while (length < 4 && HEX.test(chr())) { + value = value * 16 + parseInt(chr(), 16); + pointer++; + length++; + } + if (chr() == '.') { + if (length == 0) return; + pointer -= length; + if (pieceIndex > 6) return; + numbersSeen = 0; + while (chr()) { + ipv4Piece = null; + if (numbersSeen > 0) { + if (chr() == '.' && numbersSeen < 4) pointer++; + else return; + } + if (!DIGIT.test(chr())) return; + while (DIGIT.test(chr())) { + number = parseInt(chr(), 10); + if (ipv4Piece === null) ipv4Piece = number; + else if (ipv4Piece == 0) return; + else ipv4Piece = ipv4Piece * 10 + number; + if (ipv4Piece > 255) return; + pointer++; + } + address[pieceIndex] = address[pieceIndex] * 256 + ipv4Piece; + numbersSeen++; + if (numbersSeen == 2 || numbersSeen == 4) pieceIndex++; + } + if (numbersSeen != 4) return; + break; + } else if (chr() == ':') { + pointer++; + if (!chr()) return; + } else if (chr()) return; + address[pieceIndex++] = value; + } + if (compress !== null) { + swaps = pieceIndex - compress; + pieceIndex = 7; + while (pieceIndex != 0 && swaps > 0) { + swap = address[pieceIndex]; + address[pieceIndex--] = address[compress + swaps - 1]; + address[compress + --swaps] = swap; + } + } else if (pieceIndex != 8) return; + return address; +}; - /** - * localize message - * @param {string} message - message who will be localized - * @returns {string} - */ - +var findLongestZeroSequence = function (ipv6) { + var maxIndex = null; + var maxLength = 1; + var currStart = null; + var currLength = 0; + var index = 0; + for (; index < 8; index++) { + if (ipv6[index] !== 0) { + if (currLength > maxLength) { + maxIndex = currStart; + maxLength = currLength; + } + currStart = null; + currLength = 0; + } else { + if (currStart === null) currStart = index; + ++currLength; + } + } + if (currLength > maxLength) { + maxIndex = currStart; + maxLength = currLength; + } + return maxIndex; +}; - _createClass(Locale, [{ - key: "localize", - value: function localize(message) { - return this._locale[message] || message; +var serializeHost = function (host) { + var result, index, compress, ignore0; + // ipv4 + if (typeof host == 'number') { + result = []; + for (index = 0; index < 4; index++) { + result.unshift(host % 256); + host = floor(host / 256); + } return result.join('.'); + // ipv6 + } else if (typeof host == 'object') { + result = ''; + compress = findLongestZeroSequence(host); + for (index = 0; index < 8; index++) { + if (ignore0 && host[index] === 0) continue; + if (ignore0) ignore0 = false; + if (compress === index) { + result += index ? ':' : '::'; + ignore0 = true; + } else { + result += host[index].toString(16); + if (index < 7) result += ':'; + } } - }]); + return '[' + result + ']'; + } return host; +}; - return Locale; -}(); +var C0ControlPercentEncodeSet = {}; +var fragmentPercentEncodeSet = assign({}, C0ControlPercentEncodeSet, { + ' ': 1, '"': 1, '<': 1, '>': 1, '`': 1 +}); +var pathPercentEncodeSet = assign({}, fragmentPercentEncodeSet, { + '#': 1, '?': 1, '{': 1, '}': 1 +}); +var userinfoPercentEncodeSet = assign({}, pathPercentEncodeSet, { + '/': 1, ':': 1, ';': 1, '=': 1, '@': 1, '[': 1, '\\': 1, ']': 1, '^': 1, '|': 1 +}); -exports.default = Locale; +var percentEncode = function (chr, set) { + var code = codeAt(chr, 0); + return code > 0x20 && code < 0x7F && !hasOwn(set, chr) ? chr : encodeURIComponent(chr); +}; -/***/ }), +var specialSchemes = { + ftp: 21, + file: null, + http: 80, + https: 443, + ws: 80, + wss: 443 +}; -/***/ "./src/js/ui/mask.js": -/*!***************************!*\ - !*** ./src/js/ui/mask.js ***! - \***************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +var isSpecial = function (url) { + return hasOwn(specialSchemes, url.scheme); +}; -"use strict"; +var includesCredentials = function (url) { + return url.username != '' || url.password != ''; +}; +var cannotHaveUsernamePasswordPort = function (url) { + return !url.host || url.cannotBeABaseURL || url.scheme == 'file'; +}; -Object.defineProperty(exports, "__esModule", { - value: true -}); +var isWindowsDriveLetter = function (string, normalized) { + var second; + return string.length == 2 && ALPHA.test(string.charAt(0)) + && ((second = string.charAt(1)) == ':' || (!normalized && second == '|')); +}; -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); +var startsWithWindowsDriveLetter = function (string) { + var third; + return string.length > 1 && isWindowsDriveLetter(string.slice(0, 2)) && ( + string.length == 2 || + ((third = string.charAt(2)) === '/' || third === '\\' || third === '?' || third === '#') + ); +}; -var _submenuBase = __webpack_require__(/*! @/ui/submenuBase */ "./src/js/ui/submenuBase.js"); +var shortenURLsPath = function (url) { + var path = url.path; + var pathSize = path.length; + if (pathSize && (url.scheme != 'file' || pathSize != 1 || !isWindowsDriveLetter(path[0], true))) { + path.pop(); + } +}; -var _submenuBase2 = _interopRequireDefault(_submenuBase); +var isSingleDot = function (segment) { + return segment === '.' || segment.toLowerCase() === '%2e'; +}; -var _mask = __webpack_require__(/*! @/ui/template/submenu/mask */ "./src/js/ui/template/submenu/mask.js"); +var isDoubleDot = function (segment) { + segment = segment.toLowerCase(); + return segment === '..' || segment === '%2e.' || segment === '.%2e' || segment === '%2e%2e'; +}; -var _mask2 = _interopRequireDefault(_mask); +// States: +var SCHEME_START = {}; +var SCHEME = {}; +var NO_SCHEME = {}; +var SPECIAL_RELATIVE_OR_AUTHORITY = {}; +var PATH_OR_AUTHORITY = {}; +var RELATIVE = {}; +var RELATIVE_SLASH = {}; +var SPECIAL_AUTHORITY_SLASHES = {}; +var SPECIAL_AUTHORITY_IGNORE_SLASHES = {}; +var AUTHORITY = {}; +var HOST = {}; +var HOSTNAME = {}; +var PORT = {}; +var FILE = {}; +var FILE_SLASH = {}; +var FILE_HOST = {}; +var PATH_START = {}; +var PATH = {}; +var CANNOT_BE_A_BASE_URL_PATH = {}; +var QUERY = {}; +var FRAGMENT = {}; + +// eslint-disable-next-line max-statements -- TODO +var parseURL = function (url, input, stateOverride, base) { + var state = stateOverride || SCHEME_START; + var pointer = 0; + var buffer = ''; + var seenAt = false; + var seenBracket = false; + var seenPasswordToken = false; + var codePoints, chr, bufferCodePoints, failure; + + if (!stateOverride) { + url.scheme = ''; + url.username = ''; + url.password = ''; + url.host = null; + url.port = null; + url.path = []; + url.query = null; + url.fragment = null; + url.cannotBeABaseURL = false; + input = input.replace(LEADING_AND_TRAILING_C0_CONTROL_OR_SPACE, ''); + } -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + input = input.replace(TAB_AND_NEW_LINE, ''); -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + codePoints = arrayFrom(input); -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + while (pointer <= codePoints.length) { + chr = codePoints[pointer]; + switch (state) { + case SCHEME_START: + if (chr && ALPHA.test(chr)) { + buffer += chr.toLowerCase(); + state = SCHEME; + } else if (!stateOverride) { + state = NO_SCHEME; + continue; + } else return INVALID_SCHEME; + break; -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + case SCHEME: + if (chr && (ALPHANUMERIC.test(chr) || chr == '+' || chr == '-' || chr == '.')) { + buffer += chr.toLowerCase(); + } else if (chr == ':') { + if (stateOverride && ( + (isSpecial(url) != hasOwn(specialSchemes, buffer)) || + (buffer == 'file' && (includesCredentials(url) || url.port !== null)) || + (url.scheme == 'file' && !url.host) + )) return; + url.scheme = buffer; + if (stateOverride) { + if (isSpecial(url) && specialSchemes[url.scheme] == url.port) url.port = null; + return; + } + buffer = ''; + if (url.scheme == 'file') { + state = FILE; + } else if (isSpecial(url) && base && base.scheme == url.scheme) { + state = SPECIAL_RELATIVE_OR_AUTHORITY; + } else if (isSpecial(url)) { + state = SPECIAL_AUTHORITY_SLASHES; + } else if (codePoints[pointer + 1] == '/') { + state = PATH_OR_AUTHORITY; + pointer++; + } else { + url.cannotBeABaseURL = true; + url.path.push(''); + state = CANNOT_BE_A_BASE_URL_PATH; + } + } else if (!stateOverride) { + buffer = ''; + state = NO_SCHEME; + pointer = 0; + continue; + } else return INVALID_SCHEME; + break; -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + case NO_SCHEME: + if (!base || (base.cannotBeABaseURL && chr != '#')) return INVALID_SCHEME; + if (base.cannotBeABaseURL && chr == '#') { + url.scheme = base.scheme; + url.path = base.path.slice(); + url.query = base.query; + url.fragment = ''; + url.cannotBeABaseURL = true; + state = FRAGMENT; + break; + } + state = base.scheme == 'file' ? FILE : RELATIVE; + continue; -/** - * Mask ui class - * @class - * @ignore - */ -var Mask = function (_Submenu) { - _inherits(Mask, _Submenu); + case SPECIAL_RELATIVE_OR_AUTHORITY: + if (chr == '/' && codePoints[pointer + 1] == '/') { + state = SPECIAL_AUTHORITY_IGNORE_SLASHES; + pointer++; + } else { + state = RELATIVE; + continue; + } break; - function Mask(subMenuElement, _ref) { - var locale = _ref.locale, - makeSvgIcon = _ref.makeSvgIcon, - menuBarPosition = _ref.menuBarPosition, - usageStatistics = _ref.usageStatistics; + case PATH_OR_AUTHORITY: + if (chr == '/') { + state = AUTHORITY; + break; + } else { + state = PATH; + continue; + } - _classCallCheck(this, Mask); + case RELATIVE: + url.scheme = base.scheme; + if (chr == EOF) { + url.username = base.username; + url.password = base.password; + url.host = base.host; + url.port = base.port; + url.path = base.path.slice(); + url.query = base.query; + } else if (chr == '/' || (chr == '\\' && isSpecial(url))) { + state = RELATIVE_SLASH; + } else if (chr == '?') { + url.username = base.username; + url.password = base.password; + url.host = base.host; + url.port = base.port; + url.path = base.path.slice(); + url.query = ''; + state = QUERY; + } else if (chr == '#') { + url.username = base.username; + url.password = base.password; + url.host = base.host; + url.port = base.port; + url.path = base.path.slice(); + url.query = base.query; + url.fragment = ''; + state = FRAGMENT; + } else { + url.username = base.username; + url.password = base.password; + url.host = base.host; + url.port = base.port; + url.path = base.path.slice(); + url.path.pop(); + state = PATH; + continue; + } break; - var _this = _possibleConstructorReturn(this, (Mask.__proto__ || Object.getPrototypeOf(Mask)).call(this, subMenuElement, { - locale: locale, - name: 'mask', - makeSvgIcon: makeSvgIcon, - menuBarPosition: menuBarPosition, - templateHtml: _mask2.default, - usageStatistics: usageStatistics - })); + case RELATIVE_SLASH: + if (isSpecial(url) && (chr == '/' || chr == '\\')) { + state = SPECIAL_AUTHORITY_IGNORE_SLASHES; + } else if (chr == '/') { + state = AUTHORITY; + } else { + url.username = base.username; + url.password = base.password; + url.host = base.host; + url.port = base.port; + state = PATH; + continue; + } break; - _this._els = { - applyButton: _this.selector('.tie-mask-apply'), - maskImageButton: _this.selector('.tie-mask-image-file') - }; - return _this; - } + case SPECIAL_AUTHORITY_SLASHES: + state = SPECIAL_AUTHORITY_IGNORE_SLASHES; + if (chr != '/' || buffer.charAt(pointer + 1) != '/') continue; + pointer++; + break; - /** - * Destroys the instance. - */ + case SPECIAL_AUTHORITY_IGNORE_SLASHES: + if (chr != '/' && chr != '\\') { + state = AUTHORITY; + continue; + } break; + + case AUTHORITY: + if (chr == '@') { + if (seenAt) buffer = '%40' + buffer; + seenAt = true; + bufferCodePoints = arrayFrom(buffer); + for (var i = 0; i < bufferCodePoints.length; i++) { + var codePoint = bufferCodePoints[i]; + if (codePoint == ':' && !seenPasswordToken) { + seenPasswordToken = true; + continue; + } + var encodedCodePoints = percentEncode(codePoint, userinfoPercentEncodeSet); + if (seenPasswordToken) url.password += encodedCodePoints; + else url.username += encodedCodePoints; + } + buffer = ''; + } else if ( + chr == EOF || chr == '/' || chr == '?' || chr == '#' || + (chr == '\\' && isSpecial(url)) + ) { + if (seenAt && buffer == '') return INVALID_AUTHORITY; + pointer -= arrayFrom(buffer).length + 1; + buffer = ''; + state = HOST; + } else buffer += chr; + break; + case HOST: + case HOSTNAME: + if (stateOverride && url.scheme == 'file') { + state = FILE_HOST; + continue; + } else if (chr == ':' && !seenBracket) { + if (buffer == '') return INVALID_HOST; + failure = parseHost(url, buffer); + if (failure) return failure; + buffer = ''; + state = PORT; + if (stateOverride == HOSTNAME) return; + } else if ( + chr == EOF || chr == '/' || chr == '?' || chr == '#' || + (chr == '\\' && isSpecial(url)) + ) { + if (isSpecial(url) && buffer == '') return INVALID_HOST; + if (stateOverride && buffer == '' && (includesCredentials(url) || url.port !== null)) return; + failure = parseHost(url, buffer); + if (failure) return failure; + buffer = ''; + state = PATH_START; + if (stateOverride) return; + continue; + } else { + if (chr == '[') seenBracket = true; + else if (chr == ']') seenBracket = false; + buffer += chr; + } break; + + case PORT: + if (DIGIT.test(chr)) { + buffer += chr; + } else if ( + chr == EOF || chr == '/' || chr == '?' || chr == '#' || + (chr == '\\' && isSpecial(url)) || + stateOverride + ) { + if (buffer != '') { + var port = parseInt(buffer, 10); + if (port > 0xFFFF) return INVALID_PORT; + url.port = (isSpecial(url) && port === specialSchemes[url.scheme]) ? null : port; + buffer = ''; + } + if (stateOverride) return; + state = PATH_START; + continue; + } else return INVALID_PORT; + break; - _createClass(Mask, [{ - key: 'destroy', - value: function destroy() { - this._removeEvent(); + case FILE: + url.scheme = 'file'; + if (chr == '/' || chr == '\\') state = FILE_SLASH; + else if (base && base.scheme == 'file') { + if (chr == EOF) { + url.host = base.host; + url.path = base.path.slice(); + url.query = base.query; + } else if (chr == '?') { + url.host = base.host; + url.path = base.path.slice(); + url.query = ''; + state = QUERY; + } else if (chr == '#') { + url.host = base.host; + url.path = base.path.slice(); + url.query = base.query; + url.fragment = ''; + state = FRAGMENT; + } else { + if (!startsWithWindowsDriveLetter(codePoints.slice(pointer).join(''))) { + url.host = base.host; + url.path = base.path.slice(); + shortenURLsPath(url); + } + state = PATH; + continue; + } + } else { + state = PATH; + continue; + } break; - (0, _util.assignmentForDestroy)(this); - } + case FILE_SLASH: + if (chr == '/' || chr == '\\') { + state = FILE_HOST; + break; + } + if (base && base.scheme == 'file' && !startsWithWindowsDriveLetter(codePoints.slice(pointer).join(''))) { + if (isWindowsDriveLetter(base.path[0], true)) url.path.push(base.path[0]); + else url.host = base.host; + } + state = PATH; + continue; - /** - * Add event for mask - * @param {Object} actions - actions for crop - * @param {Function} actions.loadImageFromURL - load image action - * @param {Function} actions.applyFilter - apply filter action - */ + case FILE_HOST: + if (chr == EOF || chr == '/' || chr == '\\' || chr == '?' || chr == '#') { + if (!stateOverride && isWindowsDriveLetter(buffer)) { + state = PATH; + } else if (buffer == '') { + url.host = ''; + if (stateOverride) return; + state = PATH_START; + } else { + failure = parseHost(url, buffer); + if (failure) return failure; + if (url.host == 'localhost') url.host = ''; + if (stateOverride) return; + buffer = ''; + state = PATH_START; + } continue; + } else buffer += chr; + break; - }, { - key: 'addEvent', - value: function addEvent(actions) { - var loadMaskFile = this._loadMaskFile.bind(this); - var applyMask = this._applyMask.bind(this); + case PATH_START: + if (isSpecial(url)) { + state = PATH; + if (chr != '/' && chr != '\\') continue; + } else if (!stateOverride && chr == '?') { + url.query = ''; + state = QUERY; + } else if (!stateOverride && chr == '#') { + url.fragment = ''; + state = FRAGMENT; + } else if (chr != EOF) { + state = PATH; + if (chr != '/') continue; + } break; + + case PATH: + if ( + chr == EOF || chr == '/' || + (chr == '\\' && isSpecial(url)) || + (!stateOverride && (chr == '?' || chr == '#')) + ) { + if (isDoubleDot(buffer)) { + shortenURLsPath(url); + if (chr != '/' && !(chr == '\\' && isSpecial(url))) { + url.path.push(''); + } + } else if (isSingleDot(buffer)) { + if (chr != '/' && !(chr == '\\' && isSpecial(url))) { + url.path.push(''); + } + } else { + if (url.scheme == 'file' && !url.path.length && isWindowsDriveLetter(buffer)) { + if (url.host) url.host = ''; + buffer = buffer.charAt(0) + ':'; // normalize windows drive letter + } + url.path.push(buffer); + } + buffer = ''; + if (url.scheme == 'file' && (chr == EOF || chr == '?' || chr == '#')) { + while (url.path.length > 1 && url.path[0] === '') { + url.path.shift(); + } + } + if (chr == '?') { + url.query = ''; + state = QUERY; + } else if (chr == '#') { + url.fragment = ''; + state = FRAGMENT; + } + } else { + buffer += percentEncode(chr, pathPercentEncodeSet); + } break; + + case CANNOT_BE_A_BASE_URL_PATH: + if (chr == '?') { + url.query = ''; + state = QUERY; + } else if (chr == '#') { + url.fragment = ''; + state = FRAGMENT; + } else if (chr != EOF) { + url.path[0] += percentEncode(chr, C0ControlPercentEncodeSet); + } break; + + case QUERY: + if (!stateOverride && chr == '#') { + url.fragment = ''; + state = FRAGMENT; + } else if (chr != EOF) { + if (chr == "'" && isSpecial(url)) url.query += '%27'; + else if (chr == '#') url.query += '%23'; + else url.query += percentEncode(chr, C0ControlPercentEncodeSet); + } break; + + case FRAGMENT: + if (chr != EOF) url.fragment += percentEncode(chr, fragmentPercentEncodeSet); + break; + } - this.eventHandler = { - loadMaskFile: loadMaskFile, - applyMask: applyMask - }; + pointer++; + } +}; - this.actions = actions; - this._els.maskImageButton.addEventListener('change', loadMaskFile); - this._els.applyButton.addEventListener('click', applyMask); +// `URL` constructor +// https://url.spec.whatwg.org/#url-class +var URLConstructor = function URL(url /* , base */) { + var that = anInstance(this, URLConstructor, 'URL'); + var base = arguments.length > 1 ? arguments[1] : undefined; + var urlString = $toString(url); + var state = setInternalState(that, { type: 'URL' }); + var baseState, failure; + if (base !== undefined) { + if (base instanceof URLConstructor) baseState = getInternalURLState(base); + else { + failure = parseURL(baseState = {}, $toString(base)); + if (failure) throw TypeError(failure); } + } + failure = parseURL(state, urlString, null, baseState); + if (failure) throw TypeError(failure); + var searchParams = state.searchParams = new URLSearchParams(); + var searchParamsState = getInternalSearchParamsState(searchParams); + searchParamsState.updateSearchParams(state.query); + searchParamsState.updateURL = function () { + state.query = String(searchParams) || null; + }; + if (!DESCRIPTORS) { + that.href = serializeURL.call(that); + that.origin = getOrigin.call(that); + that.protocol = getProtocol.call(that); + that.username = getUsername.call(that); + that.password = getPassword.call(that); + that.host = getHost.call(that); + that.hostname = getHostname.call(that); + that.port = getPort.call(that); + that.pathname = getPathname.call(that); + that.search = getSearch.call(that); + that.searchParams = getSearchParams.call(that); + that.hash = getHash.call(that); + } +}; - /** - * Remove event - * @private - */ +var URLPrototype = URLConstructor.prototype; + +var serializeURL = function () { + var url = getInternalURLState(this); + var scheme = url.scheme; + var username = url.username; + var password = url.password; + var host = url.host; + var port = url.port; + var path = url.path; + var query = url.query; + var fragment = url.fragment; + var output = scheme + ':'; + if (host !== null) { + output += '//'; + if (includesCredentials(url)) { + output += username + (password ? ':' + password : '') + '@'; + } + output += serializeHost(host); + if (port !== null) output += ':' + port; + } else if (scheme == 'file') output += '//'; + output += url.cannotBeABaseURL ? path[0] : path.length ? '/' + path.join('/') : ''; + if (query !== null) output += '?' + query; + if (fragment !== null) output += '#' + fragment; + return output; +}; - }, { - key: '_removeEvent', - value: function _removeEvent() { - this._els.maskImageButton.removeEventListener('change', this.eventHandler.loadMaskFile); - this._els.applyButton.removeEventListener('click', this.eventHandler.applyMask); - } +var getOrigin = function () { + var url = getInternalURLState(this); + var scheme = url.scheme; + var port = url.port; + if (scheme == 'blob') try { + return new URLConstructor(scheme.path[0]).origin; + } catch (error) { + return 'null'; + } + if (scheme == 'file' || !isSpecial(url)) return 'null'; + return scheme + '://' + serializeHost(url.host) + (port !== null ? ':' + port : ''); +}; - /** - * Apply mask - * @private - */ +var getProtocol = function () { + return getInternalURLState(this).scheme + ':'; +}; - }, { - key: '_applyMask', - value: function _applyMask() { - this.actions.applyFilter(); - this._els.applyButton.classList.remove('active'); - } +var getUsername = function () { + return getInternalURLState(this).username; +}; - /** - * Load mask file - * @param {object} event - File change event object - * @private - */ +var getPassword = function () { + return getInternalURLState(this).password; +}; - }, { - key: '_loadMaskFile', - value: function _loadMaskFile(event) { - var imgUrl = void 0; +var getHost = function () { + var url = getInternalURLState(this); + var host = url.host; + var port = url.port; + return host === null ? '' + : port === null ? serializeHost(host) + : serializeHost(host) + ':' + port; +}; - if (!(0, _util.isSupportFileApi)()) { - alert('This browser does not support file-api'); - } +var getHostname = function () { + var host = getInternalURLState(this).host; + return host === null ? '' : serializeHost(host); +}; - var _event$target$files = event.target.files, - file = _event$target$files[0]; +var getPort = function () { + var port = getInternalURLState(this).port; + return port === null ? '' : String(port); +}; +var getPathname = function () { + var url = getInternalURLState(this); + var path = url.path; + return url.cannotBeABaseURL ? path[0] : path.length ? '/' + path.join('/') : ''; +}; - if (file) { - imgUrl = URL.createObjectURL(file); - this.actions.loadImageFromURL(imgUrl, file); - this._els.applyButton.classList.add('active'); - } - } - }]); +var getSearch = function () { + var query = getInternalURLState(this).query; + return query ? '?' + query : ''; +}; - return Mask; -}(_submenuBase2.default); +var getSearchParams = function () { + return getInternalURLState(this).searchParams; +}; -exports.default = Mask; +var getHash = function () { + var fragment = getInternalURLState(this).fragment; + return fragment ? '#' + fragment : ''; +}; -/***/ }), +var accessorDescriptor = function (getter, setter) { + return { get: getter, set: setter, configurable: true, enumerable: true }; +}; -/***/ "./src/js/ui/panelMenu.js": -/*!********************************!*\ - !*** ./src/js/ui/panelMenu.js ***! - \********************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +if (DESCRIPTORS) { + defineProperties(URLPrototype, { + // `URL.prototype.href` accessors pair + // https://url.spec.whatwg.org/#dom-url-href + href: accessorDescriptor(serializeURL, function (href) { + var url = getInternalURLState(this); + var urlString = $toString(href); + var failure = parseURL(url, urlString); + if (failure) throw TypeError(failure); + getInternalSearchParamsState(url.searchParams).updateSearchParams(url.query); + }), + // `URL.prototype.origin` getter + // https://url.spec.whatwg.org/#dom-url-origin + origin: accessorDescriptor(getOrigin), + // `URL.prototype.protocol` accessors pair + // https://url.spec.whatwg.org/#dom-url-protocol + protocol: accessorDescriptor(getProtocol, function (protocol) { + var url = getInternalURLState(this); + parseURL(url, $toString(protocol) + ':', SCHEME_START); + }), + // `URL.prototype.username` accessors pair + // https://url.spec.whatwg.org/#dom-url-username + username: accessorDescriptor(getUsername, function (username) { + var url = getInternalURLState(this); + var codePoints = arrayFrom($toString(username)); + if (cannotHaveUsernamePasswordPort(url)) return; + url.username = ''; + for (var i = 0; i < codePoints.length; i++) { + url.username += percentEncode(codePoints[i], userinfoPercentEncodeSet); + } + }), + // `URL.prototype.password` accessors pair + // https://url.spec.whatwg.org/#dom-url-password + password: accessorDescriptor(getPassword, function (password) { + var url = getInternalURLState(this); + var codePoints = arrayFrom($toString(password)); + if (cannotHaveUsernamePasswordPort(url)) return; + url.password = ''; + for (var i = 0; i < codePoints.length; i++) { + url.password += percentEncode(codePoints[i], userinfoPercentEncodeSet); + } + }), + // `URL.prototype.host` accessors pair + // https://url.spec.whatwg.org/#dom-url-host + host: accessorDescriptor(getHost, function (host) { + var url = getInternalURLState(this); + if (url.cannotBeABaseURL) return; + parseURL(url, $toString(host), HOST); + }), + // `URL.prototype.hostname` accessors pair + // https://url.spec.whatwg.org/#dom-url-hostname + hostname: accessorDescriptor(getHostname, function (hostname) { + var url = getInternalURLState(this); + if (url.cannotBeABaseURL) return; + parseURL(url, $toString(hostname), HOSTNAME); + }), + // `URL.prototype.port` accessors pair + // https://url.spec.whatwg.org/#dom-url-port + port: accessorDescriptor(getPort, function (port) { + var url = getInternalURLState(this); + if (cannotHaveUsernamePasswordPort(url)) return; + port = $toString(port); + if (port == '') url.port = null; + else parseURL(url, port, PORT); + }), + // `URL.prototype.pathname` accessors pair + // https://url.spec.whatwg.org/#dom-url-pathname + pathname: accessorDescriptor(getPathname, function (pathname) { + var url = getInternalURLState(this); + if (url.cannotBeABaseURL) return; + url.path = []; + parseURL(url, $toString(pathname), PATH_START); + }), + // `URL.prototype.search` accessors pair + // https://url.spec.whatwg.org/#dom-url-search + search: accessorDescriptor(getSearch, function (search) { + var url = getInternalURLState(this); + search = $toString(search); + if (search == '') { + url.query = null; + } else { + if ('?' == search.charAt(0)) search = search.slice(1); + url.query = ''; + parseURL(url, search, QUERY); + } + getInternalSearchParamsState(url.searchParams).updateSearchParams(url.query); + }), + // `URL.prototype.searchParams` getter + // https://url.spec.whatwg.org/#dom-url-searchparams + searchParams: accessorDescriptor(getSearchParams), + // `URL.prototype.hash` accessors pair + // https://url.spec.whatwg.org/#dom-url-hash + hash: accessorDescriptor(getHash, function (hash) { + var url = getInternalURLState(this); + hash = $toString(hash); + if (hash == '') { + url.fragment = null; + return; + } + if ('#' == hash.charAt(0)) hash = hash.slice(1); + url.fragment = ''; + parseURL(url, hash, FRAGMENT); + }) + }); +} -"use strict"; +// `URL.prototype.toJSON` method +// https://url.spec.whatwg.org/#dom-url-tojson +redefine(URLPrototype, 'toJSON', function toJSON() { + return serializeURL.call(this); +}, { enumerable: true }); + +// `URL.prototype.toString` method +// https://url.spec.whatwg.org/#URL-stringification-behavior +redefine(URLPrototype, 'toString', function toString() { + return serializeURL.call(this); +}, { enumerable: true }); + +if (NativeURL) { + var nativeCreateObjectURL = NativeURL.createObjectURL; + var nativeRevokeObjectURL = NativeURL.revokeObjectURL; + // `URL.createObjectURL` method + // https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL + // eslint-disable-next-line no-unused-vars -- required for `.length` + if (nativeCreateObjectURL) redefine(URLConstructor, 'createObjectURL', function createObjectURL(blob) { + return nativeCreateObjectURL.apply(NativeURL, arguments); + }); + // `URL.revokeObjectURL` method + // https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL + // eslint-disable-next-line no-unused-vars -- required for `.length` + if (nativeRevokeObjectURL) redefine(URLConstructor, 'revokeObjectURL', function revokeObjectURL(url) { + return nativeRevokeObjectURL.apply(NativeURL, arguments); + }); +} +setToStringTag(URLConstructor, 'URL'); -Object.defineProperty(exports, "__esModule", { - value: true +$({ global: true, forced: !USE_NATIVE_URL, sham: !DESCRIPTORS }, { + URL: URLConstructor }); -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } +/***/ }), -/** - * Menu Panel Class - * @class - * @ignore - */ +/***/ 9801: +/***/ (function() { -var Panel = function () { - /** - * @param {HTMLElement} menuElement - menu dom element - * @param {Object} options - menu options - * @param {string} options.name - name of panel menu - */ - function Panel(menuElement, _ref) { - var name = _ref.name; +// empty - _classCallCheck(this, Panel); - this.name = name; - this.items = []; +/***/ }), - this.panelElement = this._makePanelElement(); - this.listElement = this._makeListElement(); +/***/ 3822: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - this.panelElement.appendChild(this.listElement); - menuElement.appendChild(this.panelElement); - } +var parent = __webpack_require__(2221); - /** - * Make Panel element - * @returns {HTMLElement} - */ +module.exports = parent; - _createClass(Panel, [{ - key: '_makePanelElement', - value: function _makePanelElement() { - var panel = document.createElement('div'); +/***/ }), - panel.className = 'tie-panel-' + this.name; +/***/ 1434: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - return panel; - } +var parent = __webpack_require__(5078); - /** - * Make list element - * @returns {HTMLElement} list element - * @private - */ +module.exports = parent; - }, { - key: '_makeListElement', - value: function _makeListElement() { - var list = document.createElement('ol'); - list.className = this.name + '-list'; +/***/ }), - return list; - } +/***/ 6899: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Make list item element - * @param {string} html - history list item html - * @returns {HTMLElement} list item element - */ +var parent = __webpack_require__(98); - }, { - key: 'makeListItemElement', - value: function makeListItemElement(html) { - var listItem = document.createElement('li'); +module.exports = parent; - listItem.innerHTML = html; - listItem.className = this.name + '-item'; - listItem.setAttribute('data-index', this.items.length); - return listItem; - } +/***/ }), - /** - * Push list item element - * @param {HTMLElement} item - list item element to add to the list - */ +/***/ 7710: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'pushListItemElement', - value: function pushListItemElement(item) { - this.listElement.appendChild(item); - this.listElement.scrollTop += item.offsetHeight; - this.items.push(item); - } +var parent = __webpack_require__(5739); +__webpack_require__(162); - /** - * Delete list item element - * @param {number} start - start index to delete - * @param {number} end - end index to delete - */ +module.exports = parent; - }, { - key: 'deleteListItemElement', - value: function deleteListItemElement(start, end) { - var items = this.items; +/***/ }), - for (var i = start; i < end; i += 1) { - this.listElement.removeChild(items[i]); - } - items.splice(start, end - start + 1); - } +/***/ 4486: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Get list's length - * @returns {number} - */ +var parent = __webpack_require__(278); - }, { - key: 'getListLength', - value: function getListLength() { - return this.items.length; - } +module.exports = parent; - /** - * Add class name of item - * @param {number} index - index of item - * @param {string} className - class name to add - */ - }, { - key: 'addClass', - value: function addClass(index, className) { - if (this.items[index]) { - this.items[index].classList.add(className); - } - } +/***/ }), - /** - * Remove class name of item - * @param {number} index - index of item - * @param {string} className - class name to remove - */ +/***/ 4877: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'removeClass', - value: function removeClass(index, className) { - if (this.items[index]) { - this.items[index].classList.remove(className); - } - } +var parent = __webpack_require__(1484); - /** - * Toggle class name of item - * @param {number} index - index of item - * @param {string} className - class name to remove - */ +module.exports = parent; - }, { - key: 'toggleClass', - value: function toggleClass(index, className) { - if (this.items[index]) { - this.items[index].classList.toggle(className); - } - } - }]); - return Panel; -}(); +/***/ }), -exports.default = Panel; +/***/ 7178: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -/***/ }), +var parent = __webpack_require__(7731); -/***/ "./src/js/ui/resize.js": -/*!*****************************!*\ - !*** ./src/js/ui/resize.js ***! - \*****************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +module.exports = parent; -"use strict"; +/***/ }), -Object.defineProperty(exports, "__esModule", { - value: true -}); +/***/ 5603: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); +var parent = __webpack_require__(3669); -var _submenuBase = __webpack_require__(/*! @/ui/submenuBase */ "./src/js/ui/submenuBase.js"); +module.exports = parent; -var _submenuBase2 = _interopRequireDefault(_submenuBase); -var _resize = __webpack_require__(/*! @/ui/template/submenu/resize */ "./src/js/ui/template/submenu/resize.js"); +/***/ }), -var _resize2 = _interopRequireDefault(_resize); +/***/ 1206: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); +__webpack_require__(162); +var forEach = __webpack_require__(6899); +var classof = __webpack_require__(4696); +var ArrayPrototype = Array.prototype; -var _range = __webpack_require__(/*! @/ui/tools/range */ "./src/js/ui/tools/range.js"); +var DOMIterables = { + DOMTokenList: true, + NodeList: true +}; -var _range2 = _interopRequireDefault(_range); +module.exports = function (it) { + var own = it.forEach; + return it === ArrayPrototype || (it instanceof Array && own === ArrayPrototype.forEach) + // eslint-disable-next-line no-prototype-builtins -- safe + || DOMIterables.hasOwnProperty(classof(it)) ? forEach : own; +}; -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +/***/ }), -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } +/***/ 6174: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } +var parent = __webpack_require__(2604); -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } +module.exports = parent; -/** - * Resize ui class - * @class - * @ignore - */ -var Resize = function (_Submenu) { - _inherits(Resize, _Submenu); - function Resize(subMenuElement, _ref) { - var locale = _ref.locale, - makeSvgIcon = _ref.makeSvgIcon, - menuBarPosition = _ref.menuBarPosition, - usageStatistics = _ref.usageStatistics; +/***/ }), - _classCallCheck(this, Resize); +/***/ 57: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - var _this = _possibleConstructorReturn(this, (Resize.__proto__ || Object.getPrototypeOf(Resize)).call(this, subMenuElement, { - locale: locale, - name: 'resize', - makeSvgIcon: makeSvgIcon, - menuBarPosition: menuBarPosition, - templateHtml: _resize2.default, - usageStatistics: usageStatistics - })); +var parent = __webpack_require__(263); - _this.status = 'active'; +module.exports = parent; - _this._lockState = false; - /** - * Original dimensions - * @type {Object} - * @private - */ - _this._originalDimensions = null; +/***/ }), - _this._els = { - widthRange: new _range2.default({ - slider: _this.selector('.tie-width-range'), - input: _this.selector('.tie-width-range-value') - }, _consts.defaultResizePixelValues), - heightRange: new _range2.default({ - slider: _this.selector('.tie-height-range'), - input: _this.selector('.tie-height-range-value') - }, _consts.defaultResizePixelValues), - lockAspectRatio: _this.selector('.tie-lock-aspect-ratio'), - apply: _this.selector('.tie-resize-button .apply'), - cancel: _this.selector('.tie-resize-button .cancel') - }; - return _this; - } +/***/ 4741: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Executed when the menu starts. - */ +var parent = __webpack_require__(7663); +module.exports = parent; - _createClass(Resize, [{ - key: 'changeStartMode', - value: function changeStartMode() { - this.actions.modeChange('resize'); - var dimensions = this.actions.getCurrentDimensions(); - this._originalDimensions = dimensions; +/***/ }), - this.setWidthValue(dimensions.width); - this.setHeightValue(dimensions.height); - } +/***/ 8368: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Returns the menu to its default state. - */ +var parent = __webpack_require__(5063); - }, { - key: 'changeStandbyMode', - value: function changeStandbyMode() { - this.actions.stopDrawingMode(); - this.actions.reset(true); - } +module.exports = parent; - /** - * Set dimension limits - * @param {object} limits - expect dimension limits for change - */ - }, { - key: 'setLimit', - value: function setLimit(limits) { - this._els.widthRange.min = this.calcMinValue(limits.minWidth); - this._els.heightRange.min = this.calcMinValue(limits.minHeight); - this._els.widthRange.max = this.calcMaxValue(limits.maxWidth); - this._els.heightRange.max = this.calcMaxValue(limits.maxHeight); - } +/***/ }), - /** - * Calculate max value - * @param {number} maxValue - max value - * @returns {number} - */ +/***/ 3739: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'calcMaxValue', - value: function calcMaxValue(maxValue) { - if (maxValue <= 0) { - maxValue = _consts.defaultResizePixelValues.max; - } +var parent = __webpack_require__(6813); - return maxValue; - } +module.exports = parent; - /** - * Calculate min value - * @param {number} minValue - min value - * @returns {number} - */ - }, { - key: 'calcMinValue', - value: function calcMinValue(minValue) { - if (minValue <= 0) { - minValue = _consts.defaultResizePixelValues.min; - } +/***/ }), - return minValue; - } +/***/ 172: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Set width value - * @param {number} value - expect value for widthRange change - * @param {boolean} trigger - fire change event control - */ +var parent = __webpack_require__(6285); - }, { - key: 'setWidthValue', - value: function setWidthValue(value) { - var trigger = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; +module.exports = parent; - this._els.widthRange.value = value; - if (trigger) { - this._els.widthRange.trigger('change'); - } - } - /** - * Set height value - * @param {number} value - expect value for heightRange change - * @param {boolean} trigger - fire change event control - */ +/***/ }), - }, { - key: 'setHeightValue', - value: function setHeightValue(value) { - var trigger = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; +/***/ 4963: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - this._els.heightRange.value = value; - if (trigger) { - this._els.heightRange.trigger('change'); - } - } +var parent = __webpack_require__(3213); - /** - * Destroys the instance. - */ +module.exports = parent; - }, { - key: 'destroy', - value: function destroy() { - this._removeEvent(); - (0, _util.assignmentForDestroy)(this); - } +/***/ }), - /** - * Add event for resize - * @param {Object} actions - actions for resize - * @param {Function} actions.resize - resize action - * @param {Function} actions.preview - preview action - * @param {Function} actions.getCurrentDimensions - Get current dimensions action - * @param {Function} actions.modeChange - change mode - * @param {Function} actions.stopDrawingMode - stop drawing mode - * @param {Function} actions.lockAspectRatio - lock aspect ratio - * @param {Function} actions.reset - reset action - */ +/***/ 7820: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: 'addEvent', - value: function addEvent(actions) { - this._els.widthRange.on('change', this._changeWidthRangeHandler.bind(this)); - this._els.heightRange.on('change', this._changeHeightRangeHandler.bind(this)); - this._els.lockAspectRatio.addEventListener('change', this._changeLockAspectRatio.bind(this)); +var parent = __webpack_require__(3512); - var apply = this._applyEventHandler.bind(this); - var cancel = this._cancelEventHandler.bind(this); +module.exports = parent; - this.eventHandler = { - apply: apply, - cancel: cancel - }; - this.actions = actions; - this._els.apply.addEventListener('click', apply); - this._els.cancel.addEventListener('click', cancel); - } +/***/ }), - /** - * Change width - * @param {number} value - width range value - * @private - */ +/***/ 8980: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - }, { - key: '_changeWidthRangeHandler', - value: function _changeWidthRangeHandler(value) { - this.actions.preview('width', (0, _util.toInteger)(value), this._lockState); - } +var parent = __webpack_require__(8168); - /** - * Change height - * @param {number} value - height range value - * @private - */ +module.exports = parent; - }, { - key: '_changeHeightRangeHandler', - value: function _changeHeightRangeHandler(value) { - this.actions.preview('height', (0, _util.toInteger)(value), this._lockState); - } - /** - * Change lock aspect ratio state - * @param {Event} event - aspect ratio check event - * @private - */ +/***/ }), - }, { - key: '_changeLockAspectRatio', - value: function _changeLockAspectRatio(event) { - this._lockState = event.target.checked; - this.actions.lockAspectRatio(this._lockState, _consts.defaultResizePixelValues.min, _consts.defaultResizePixelValues.max); - } +/***/ 5636: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Remove event - * @private - */ +var parent = __webpack_require__(8651); - }, { - key: '_removeEvent', - value: function _removeEvent() { - this._els.apply.removeEventListener('click', this.eventHandler.apply); - this._els.cancel.removeEventListener('click', this.eventHandler.cancel); - } - }, { - key: '_applyEventHandler', - value: function _applyEventHandler() { - this.actions.resize(); - this._els.apply.classList.remove('active'); - } - }, { - key: '_cancelEventHandler', - value: function _cancelEventHandler() { - this.actions.reset(); - this._els.cancel.classList.remove('active'); - } +module.exports = parent; - /** - * Change apply button status - * @param {Boolean} enableStatus - apply button status - */ - }, { - key: 'changeApplyButtonStatus', - value: function changeApplyButtonStatus(enableStatus) { - if (enableStatus) { - this._els.apply.classList.add('active'); - } else { - this._els.apply.classList.remove('active'); - } - } - }]); +/***/ }), - return Resize; -}(_submenuBase2.default); +/***/ 6672: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { + +var parent = __webpack_require__(3083); + +module.exports = parent; -exports.default = Resize; /***/ }), -/***/ "./src/js/ui/rotate.js": -/*!*****************************!*\ - !*** ./src/js/ui/rotate.js ***! - \*****************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +/***/ 5059: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -"use strict"; +var parent = __webpack_require__(2987); +module.exports = parent; -Object.defineProperty(exports, "__esModule", { - value: true -}); -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); +/***/ }), -var _range = __webpack_require__(/*! @/ui/tools/range */ "./src/js/ui/tools/range.js"); +/***/ 3969: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -var _range2 = _interopRequireDefault(_range); +var parent = __webpack_require__(2239); -var _submenuBase = __webpack_require__(/*! @/ui/submenuBase */ "./src/js/ui/submenuBase.js"); +module.exports = parent; -var _submenuBase2 = _interopRequireDefault(_submenuBase); -var _rotate = __webpack_require__(/*! @/ui/template/submenu/rotate */ "./src/js/ui/template/submenu/rotate.js"); +/***/ }), -var _rotate2 = _interopRequireDefault(_rotate); +/***/ 6618: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); +var parent = __webpack_require__(3154); +__webpack_require__(162); -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); +module.exports = parent; -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } +/***/ }), -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } +/***/ 5279: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } +var parent = __webpack_require__(6577); -var CLOCKWISE = 30; -var COUNTERCLOCKWISE = -30; +module.exports = parent; -/** - * Rotate ui class - * @class - * @ignore - */ -var Rotate = function (_Submenu) { - _inherits(Rotate, _Submenu); +/***/ }), - function Rotate(subMenuElement, _ref) { - var locale = _ref.locale, - makeSvgIcon = _ref.makeSvgIcon, - menuBarPosition = _ref.menuBarPosition, - usageStatistics = _ref.usageStatistics; +/***/ 9562: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - _classCallCheck(this, Rotate); +__webpack_require__(2906); +var path = __webpack_require__(7545); - var _this = _possibleConstructorReturn(this, (Rotate.__proto__ || Object.getPrototypeOf(Rotate)).call(this, subMenuElement, { - locale: locale, - name: 'rotate', - makeSvgIcon: makeSvgIcon, - menuBarPosition: menuBarPosition, - templateHtml: _rotate2.default, - usageStatistics: usageStatistics - })); +module.exports = path.setTimeout; - _this._value = 0; - _this._els = { - rotateButton: _this.selector('.tie-rotate-button'), - rotateRange: new _range2.default({ - slider: _this.selector('.tie-rotate-range'), - input: _this.selector('.tie-rotate-range-value') - }, _consts.defaultRotateRangeValues) - }; - return _this; - } +/***/ }), - /** - * Destroys the instance. - */ +/***/ 2285: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { +var parent = __webpack_require__(5008); +__webpack_require__(162); - _createClass(Rotate, [{ - key: 'destroy', - value: function destroy() { - this._removeEvent(); - this._els.rotateRange.destroy(); +module.exports = parent; - (0, _util.assignmentForDestroy)(this); - } - }, { - key: 'setRangeBarAngle', - value: function setRangeBarAngle(type, angle) { - var resultAngle = angle; - if (type === 'rotate') { - resultAngle = parseInt(this._els.rotateRange.value, 10) + angle; - } +/***/ }), - this._setRangeBarRatio(resultAngle); - } - }, { - key: '_setRangeBarRatio', - value: function _setRangeBarRatio(angle) { - this._els.rotateRange.value = angle; - } +/***/ 8535: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Add event for rotate - * @param {Object} actions - actions for crop - * @param {Function} actions.rotate - rotate action - * @param {Function} actions.setAngle - set angle action - */ +var parent = __webpack_require__(994); +__webpack_require__(162); - }, { - key: 'addEvent', - value: function addEvent(actions) { - this.eventHandler.rotationAngleChanged = this._changeRotateForButton.bind(this); +module.exports = parent; - // {rotate, setAngle} - this.actions = actions; - this._els.rotateButton.addEventListener('click', this.eventHandler.rotationAngleChanged); - this._els.rotateRange.on('change', this._changeRotateForRange.bind(this)); - } - /** - * Remove event - * @private - */ +/***/ }), - }, { - key: '_removeEvent', - value: function _removeEvent() { - this._els.rotateButton.removeEventListener('click', this.eventHandler.rotationAngleChanged); - this._els.rotateRange.off(); - } +/***/ 652: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - /** - * Change rotate for range - * @param {number} value - angle value - * @param {boolean} isLast - Is last change - * @private - */ +var parent = __webpack_require__(5668); - }, { - key: '_changeRotateForRange', - value: function _changeRotateForRange(value, isLast) { - var angle = (0, _util.toInteger)(value); - this.actions.setAngle(angle, !isLast); - this._value = angle; - } +module.exports = parent; - /** - * Change rotate for button - * @param {object} event - add button event object - * @private - */ - }, { - key: '_changeRotateForButton', - value: function _changeRotateForButton(event) { - var button = event.target.closest('.tui-image-editor-button'); - var angle = this._els.rotateRange.value; +/***/ }), - if (button) { - var rotateType = this.getButtonType(button, ['counterclockwise', 'clockwise']); - var rotateAngle = { - clockwise: CLOCKWISE, - counterclockwise: COUNTERCLOCKWISE - }[rotateType]; - var newAngle = parseInt(angle, 10) + rotateAngle; - var isRotatable = newAngle >= -360 && newAngle <= 360; - if (isRotatable) { - this.actions.rotate(rotateAngle); - } - } - } - }]); +/***/ 5668: +/***/ (function(module, __unused_webpack_exports, __webpack_require__) { - return Rotate; -}(_submenuBase2.default); +__webpack_require__(4948); +__webpack_require__(9801); +__webpack_require__(9336); +var path = __webpack_require__(7545); + +module.exports = path.URL; -exports.default = Rotate; /***/ }), -/***/ "./src/js/ui/shape.js": -/*!****************************!*\ - !*** ./src/js/ui/shape.js ***! - \****************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +/***/ 2534: +/***/ (function(module) { "use strict"; +module.exports = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyBkaXNwbGF5PSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KPGRlZnMgaWQ9InR1aS1pbWFnZS1lZGl0b3Itc3ZnLWRlZmF1bHQtaWNvbnMiPgo8c3ltYm9sIGlkPSJpYy1hcHBseSIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIHN0cm9rZT0ibm9uZSIgZmlsbD0ibm9uZSIvPgogICAgPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJpbmhlcml0IiBkPSJNNCAxMi4wMTFsNSA1TDIwLjAxMSA2Ii8+Cjwvc3ltYm9sPgo8c3ltYm9sIGlkPSJpYy1jYW5jZWwiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiLz4KICAgIDxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iaW5oZXJpdCIgZD0iTTYgNmwxMiAxMk0xOCA2TDYgMTgiLz4KPC9zeW1ib2w+CjxzeW1ib2wgaWQ9ImljLWNyb3AiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBzdHJva2U9Im5vbmUiIGZpbGw9Im5vbmUiIC8+CiAgICA8cGF0aCBzdHJva2U9Im5vbmUiIGZpbGw9ImluaGVyaXQiIGQ9Ik00IDBoMXYyMGExIDEgMCAwIDEtMS0xVjB6TTIwIDE3aC0xVjVoMXYxMnptMCAydjVoLTF2LTVoMXoiLz4KICAgIDxwYXRoIHN0cm9rZT0ibm9uZSIgZmlsbD0iaW5oZXJpdCIgZD0iTTUgMTloMTl2MUg1ek00Ljc2MiA0djFIMFY0aDQuNzYyek03IDRoMTJhMSAxIDAgMCAxIDEgMUg3VjR6Ii8+Cjwvc3ltYm9sPgo8IS0tIFRoaXMgaWNvbiBtYWRlIGJ5IFBpeGVsIHBlcmZlY3QgZnJvbSB3d3cuZmxhdGljb24uY29tIC0tPgo8c3ltYm9sIGlkPSJpYy1yZXNpemUiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgc3Ryb2tlPSJub25lIiBmaWxsPSJub25lIi8+CiAgPHBhdGggc3Ryb2tlPSJub25lIiBmaWxsPSJpbmhlcml0IiBkPSJNIDE4Ljk4ODI4MSAzLjAxMTcxOSBDIDE4LjgwMDc4MSAyLjgyNDIxOSAxOC41IDIuODI0MjE5IDE4LjMxMjUgMy4wMTE3MTkgTCAxMS42MjEwOTQgOS43MDcwMzEgQyAxMS40Mjk2ODggOS44OTQ1MzEgMTEuNDI5Njg4IDEwLjE5NTMxMiAxMS42MjEwOTQgMTAuMzc4OTA2IEMgMTEuNzEwOTM4IDEwLjQ3MjY1NiAxMS44MzU5MzggMTAuNTE5NTMxIDExLjk1NzAzMSAxMC41MTk1MzEgQyAxMi4wNzgxMjUgMTAuNTE5NTMxIDEyLjIwMzEyNSAxMC40NzI2NTYgMTIuMjkyOTY5IDEwLjM3ODkwNiBMIDE4Ljk4ODI4MSAzLjY4NzUgQyAxOS4xNzU3ODEgMy41IDE5LjE3NTc4MSAzLjE5OTIxOSAxOC45ODgyODEgMy4wMTE3MTkgWiBNIDE4Ljk4ODI4MSAzLjAxMTcxOSAiLz4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGZpbGw9ImluaGVyaXQiIGQ9Ik0gMTguNjUyMzQ0IDIuODY3MTg4IEMgMTguMzg2NzE5IDIuODY3MTg4IDE4LjE3MTg3NSAzLjA4MjAzMSAxOC4xNzE4NzUgMy4zNDc2NTYgTCAxOC4xNzE4NzUgOS4wODU5MzggQyAxOC4xNzE4NzUgOS4zNDc2NTYgMTguMzg2NzE5IDkuNTYyNSAxOC42NTIzNDQgOS41NjI1IEMgMTguOTE3OTY5IDkuNTYyNSAxOS4xMzI4MTIgOS4zNDc2NTYgMTkuMTMyODEyIDkuMDg1OTM4IEwgMTkuMTMyODEyIDMuMzQ3NjU2IEMgMTkuMTMyODEyIDMuMDgyMDMxIDE4LjkxNzk2OSAyLjg2NzE4OCAxOC42NTIzNDQgMi44NjcxODggWiBNIDE4LjY1MjM0NCAyLjg2NzE4OCAiLz4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGZpbGw9ImluaGVyaXQiIGQ9Ik0gMTguNjUyMzQ0IDIuODY3MTg4IEwgMTIuOTE0MDYyIDIuODY3MTg4IEMgMTIuNjUyMzQ0IDIuODY3MTg4IDEyLjQzNzUgMy4wODIwMzEgMTIuNDM3NSAzLjM0NzY1NiBDIDEyLjQzNzUgMy42MTMyODEgMTIuNjUyMzQ0IDMuODI4MTI1IDEyLjkxNDA2MiAzLjgyODEyNSBMIDE4LjY1MjM0NCAzLjgyODEyNSBDIDE4LjkxNzk2OSAzLjgyODEyNSAxOS4xMzI4MTIgMy42MTMyODEgMTkuMTMyODEyIDMuMzQ3NjU2IEMgMTkuMTMyODEyIDMuMDgyMDMxIDE4LjkxNzk2OSAyLjg2NzE4OCAxOC42NTIzNDQgMi44NjcxODggWiBNIDE4LjY1MjM0NCAyLjg2NzE4OCAiLz4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGZpbGw9ImluaGVyaXQiIGQ9Ik0gMTAuMzc4OTA2IDExLjYyMTA5NCBDIDEwLjE5NTMxMiAxMS40MzM1OTQgOS44OTA2MjUgMTEuNDMzNTk0IDkuNzAzMTI1IDExLjYyMTA5NCBMIDMuMDA3ODEyIDE4LjMxNjQwNiBDIDIuODIwMzEyIDE4LjUgMi44MjAzMTIgMTguODA0Njg4IDMuMDA3ODEyIDE4Ljk5MjE4OCBDIDMuMTA1NDY5IDE5LjA4NTkzOCAzLjIyNjU2MiAxOS4xMzI4MTIgMy4zNDc2NTYgMTkuMTMyODEyIEMgMy40Njg3NSAxOS4xMzI4MTIgMy41ODk4NDQgMTkuMDg1OTM4IDMuNjgzNTk0IDE4Ljk5MjE4OCBMIDEwLjM3ODkwNiAxMi4yOTY4NzUgQyAxMC41NjY0MDYgMTIuMTA5Mzc1IDEwLjU2NjQwNiAxMS44MDQ2ODggMTAuMzc4OTA2IDExLjYyMTA5NCBaIE0gMTAuMzc4OTA2IDExLjYyMTA5NCAiLz4KICA8cGF0aCBzdHJva2U9Im5vbmUiIGZpbGw9ImluaGVyaXQiIGQ9Ik0gMy4zNDc2NTYgMTIuNDM3NSBDIDMuMDgyMDMxIDEyLjQzNzUgMi44NjcxODggMTIuNjUyMzQ0IDIuODY3MTg4IDEyLjkxNDA2MiBMIDIuODY3MTg4IDE4LjY1MjM0NCBDIDIuODY3MTg4IDE4LjkxNzk2OSAzLjA4MjAzMSAxOS4xMzI4MTIgMy4zNDc2NTYgMTkuMTMyODEyIEMgMy42MTMyODEgMTkuMTMyODEyIDMuODI4MTI1IDE4LjkxNzk2OSAzLjgyODEyNSAxOC42NTIzNDQgTCAzLjgyODEyNSAxMi45MTQwNjIgQyAzLjgyODEyNSAxMi42NTIzNDQgMy42MTMyODEgMTIuNDM3NSAzLjM0NzY1NiAxMi40Mzc1IFogTSAzLjM0NzY1NiAxMi40Mzc1ICIvPgogIDxwYXRoIHN0cm9rZT0ibm9uZSIgZmlsbD0iaW5oZXJpdCIgZD0iTSA5LjA4NTkzOCAxOC4xNzE4NzUgTCAzLjM0NzY1NiAxOC4xNzE4NzUgQyAzLjA4MjAzMSAxOC4xNzE4NzUgMi44NjcxODggMTguMzg2NzE5IDIuODY3MTg4IDE4LjY1MjM0NCBDIDIuODY3MTg4IDE4LjkxNzk2OSAzLjA4MjAzMSAxOS4xMzI4MTIgMy4zNDc2NTYgMTkuMTMyODEyIEwgOS4wODU5MzggMTkuMTMyODEyIEMgOS4zNDc2NTYgMTkuMTMyODEyIDkuNTYyNSAxOC45MTc5NjkgOS41NjI1IDE4LjY1MjM0NCBDIDkuNTYyNSAxOC4zODY3MTkgOS4zNDc2NTYgMTguMTcxODc1IDkuMDg1OTM4IDE4LjE3MTg3NSBaIE0gOS4wODU5MzggMTguMTcxODc1ICIvPgogIDxwYXRoIHN0cm9rZT0ibm9uZSIgZmlsbD0iaW5oZXJpdCIgZD0iTSAyMC41NjI1IDAgTCAxLjQzNzUgMCBDIDAuNjQ0NTMxIDAgMCAwLjY0NDUzMSAwIDEuNDM3NSBMIDAgMjAuNTYyNSBDIDAgMjEuMzU1NDY5IDAuNjQ0NTMxIDIyIDEuNDM3NSAyMiBMIDIwLjU2MjUgMjIgQyAyMS4zNTU0NjkgMjIgMjIgMjEuMzU1NDY5IDIyIDIwLjU2MjUgTCAyMiAxLjQzNzUgQyAyMiAwLjY0NDUzMSAyMS4zNTU0NjkgMCAyMC41NjI1IDAgWiBNIDIxLjA0Mjk2OSAyMC41NjI1IEMgMjEuMDQyOTY5IDIwLjgyODEyNSAyMC44MjgxMjUgMjEuMDQyOTY5IDIwLjU2MjUgMjEuMDQyOTY5IEwgMS40Mzc1IDIxLjA0Mjk2OSBDIDEuMTcxODc1IDIxLjA0Mjk2OSAwLjk1NzAzMSAyMC44MjgxMjUgMC45NTcwMzEgMjAuNTYyNSBMIDAuOTU3MDMxIDEuNDM3NSBDIDAuOTU3MDMxIDEuMTcxODc1IDEuMTcxODc1IDAuOTU3MDMxIDEuNDM3NSAwLjk1NzAzMSBMIDIwLjU2MjUgMC45NTcwMzEgQyAyMC44MjgxMjUgMC45NTcwMzEgMjEuMDQyOTY5IDEuMTcxODc1IDIxLjA0Mjk2OSAxLjQzNzUgWiBNIDIxLjA0Mjk2OSAyMC41NjI1ICIvPgo8L3N5bWJvbD4KPCEtLSAgLS0+CjxzeW1ib2wgaWQ9ImljLWRlbGV0ZS1hbGwiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8cGF0aCBzdHJva2U9Im5vbmUiIGZpbGw9ImluaGVyaXQiIGQ9Ik01IDIzSDNhMSAxIDAgMCAxLTEtMVY2aDF2MTZoMnYxem0xNi0xMGgtMVY2aDF2N3pNOSAxM0g4di0zaDF2M3ptMyAwaC0xdi0zaDF2M3ptMyAwaC0xdi0zaDF2M3pNMTQuNzk0IDMuNzk0TDEzIDJoLTNMOC4yMDYgMy43OTRBLjk2My45NjMgMCAwIDEgOCAyLjVsLjcwMy0xLjA1NUExIDEgMCAwIDEgOS41MzUgMWgzLjkzYTEgMSAwIDAgMSAuODMyLjQ0NUwxNSAyLjVhLjk2NS45NjUgMCAwIDEtLjIwNiAxLjI5NHpNMTQuMTk3IDRIOC44MDNoNS4zOTR6Ii8+CiAgICA8cGF0aCBzdHJva2U9Im5vbmUiIGZpbGw9ImluaGVyaXQiIGQ9Ik0wIDNoMjN2MUgwek0xMS4yODYgMjFIOC43MTRMOCAyM0g3bDEtMi44VjIwaC4wNzFMOS41IDE2aDFsMS40MjkgNEgxMnYuMmwxIDIuOGgtMWwtLjcxNC0yem0tLjM1Ny0xTDEwIDE3LjQgOS4wNzEgMjBoMS44NTh6TTIwIDIyaDN2MWgtNHYtN2gxdjZ6bS01IDBoM3YxaC00di03aDF2NnoiLz4KPC9zeW1ib2w+CjxzeW1ib2wgaWQ9ImljLWRlbGV0ZSIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIHN0cm9rZT0ibm9uZSIgZmlsbD0iaW5oZXJpdCIgZD0iTTMgNnYxNmgxN1Y2aDF2MTZhMSAxIDAgMCAxLTEgMUgzYTEgMSAwIDAgMS0xLTFWNmgxek0xNC43OTQgMy43OTRMMTMgMmgtM0w4LjIwNiAzLjc5NEEuOTYzLjk2MyAwIDAgMSA4IDIuNWwuNzAzLTEuMDU1QTEgMSAwIDAgMSA5LjUzNSAxaDMuOTNhMSAxIDAgMCAxIC44MzIuNDQ1TDE1IDIuNWEuOTY1Ljk2NSAwIDAgMS0uMjA2IDEuMjk0ek0xNC4xOTcgNEg4LjgwM2g1LjM5NHoiLz4KICAgIDxwYXRoIHN0cm9rZT0ibm9uZSIgZmlsbD0iaW5oZXJpdCIgZD0iTTAgM2gyM3YxSDB6TTggMTBoMXY2SDh2LTZ6bTMgMGgxdjZoLTF2LTZ6bTMgMGgxdjZoLTF2LTZ6Ii8+Cjwvc3ltYm9sPgo8c3ltYm9sIGlkPSJpYy1kcmF3LWZyZWUiIHZpZXdCb3g9IjAgMCAzMiAzMiI+CiAgICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9ImluaGVyaXQiIGQ9Ik0yLjUgMjAuOTI5QzIuNTk0IDEwLjk3NiA0LjMyMyA2IDcuNjg2IDZjNS44NzIgMCAyLjUyNCAxOSA3LjY5NyAxOXMxLjg5LTE0LjkyOSA2LjQxNC0xNC45MjkgMS4zNTcgMTAuODU4IDUuMTMgMTAuODU4YzEuODAyIDAgMi42NTctMi4yNjIgMi41NjYtNi43ODYiLz4KPC9zeW1ib2w+CjxzeW1ib2wgaWQ9ImljLWRyYXctbGluZSIgdmlld0JveD0iMCAwIDMyIDMyIj4KICAgIDxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iaW5oZXJpdCIgZD0iTTIgMTUuNWgyOCIvPgo8L3N5bWJvbD4KPHN5bWJvbCBpZD0iaWMtZHJhdyIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iaW5oZXJpdCIgZD0iTTIuNSAyMS41SDVjLjI0NSAwIC40OC0uMDU4LjY5MS0uMTY4bC4xMjQtLjA2NS4xNC4wMWMuNDI5LjAyOC44NS0uMTI3IDEuMTYtLjQzN0wyMi41NSA1LjQwNWEuNS41IDAgMCAwIDAtLjcwN2wtMy4yNDYtMy4yNDVhLjUuNSAwIDAgMC0uNzA3IDBMMy4xNjIgMTYuODg4YTEuNDk1IDEuNDk1IDAgMCAwLS40MzcgMS4xNTVsLjAxLjE0LS4wNjUuMTIzYy0uMTExLjIxMi0uMTcuNDQ4LS4xNy42OTR2Mi41eiIvPgogICAgPHBhdGggc3Ryb2tlPSJub25lIiBmaWxsPSJpbmhlcml0IiBkPSJNMTYuNDE0IDMuNzA3bDMuODkgMy44OS0uNzA4LjcwNi0zLjg4OS0zLjg4OXoiLz4KPC9zeW1ib2w+CjxzeW1ib2wgaWQ9ImljLWZpbHRlciIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIHN0cm9rZT0ibm9uZSIgLz4KICAgIDxwYXRoIHN0cm9rZT0ibm9uZSIgZmlsbD0iaW5oZXJpdCIgZD0iTTEyIDd2MUgyVjdoMTB6bTYgMGg0djFoLTRWN3pNMTIgMTZ2MWgxMHYtMUgxMnptLTYgMEgydjFoNHYtMXoiLz4KICAgIDxwYXRoIHN0cm9rZT0ibm9uZSIgZmlsbD0iaW5oZXJpdCIgZD0iTTguNSAyMGEzLjUgMy41IDAgMSAxIDAtNyAzLjUgMy41IDAgMCAxIDAgN3ptMC0xYTIuNSAyLjUgMCAxIDAgMC01IDIuNSAyLjUgMCAwIDAgMCA1ek0xNS41IDExYTMuNSAzLjUgMCAxIDEgMC03IDMuNSAzLjUgMCAwIDEgMCA3em0wLTFhMi41IDIuNSAwIDEgMCAwLTUgMi41IDIuNSAwIDAgMCAwIDV6Ii8+Cjwvc3ltYm9sPgo8c3ltYm9sIGlkPSJpYy1mbGlwLXJlc2V0IiB2aWV3Qm94PSIwIDAgMzEgMzIiPgogICAgPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJub25lIiBkPSJNMzEgMEgwdjMyaDMxeiIvPgogICAgPHBhdGggc3Ryb2tlPSJub25lIiBmaWxsPSJpbmhlcml0IiBkPSJNMjggMTZhOCA4IDAgMCAxLTggOEgzdi0xaDF2LTdIM2E4IDggMCAwIDEgOC04aDE3djFoLTF2N2gxek0xMSA5YTcgNyAwIDAgMC03IDd2N2gxNmE3IDcgMCAwIDAgNy03VjlIMTF6Ii8+CiAgICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9ImluaGVyaXQiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIGQ9Ik0yNCA1bDMuNSAzLjVMMjQgMTJNNyAyMGwtMy41IDMuNUw3IDI3Ii8+Cjwvc3ltYm9sPgo8c3ltYm9sIGlkPSJpYy1mbGlwLXgiIHZpZXdCb3g9IjAgMCAzMiAzMiI+CiAgICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiIGQ9Ik0zMiAzMkgwVjBoMzJ6Ii8+CiAgICA8cGF0aCBzdHJva2U9Im5vbmUiIGZpbGw9ImluaGVyaXQiIGQ9Ik0xNyAzMmgtMVYwaDF6TTI3LjE2NyAxMWwuNSAzaC0xLjAzbC0uNTQ2LTNoMS4wNzZ6bS0uNS0zaC0xLjEyMkwyNSA1aC01VjRoNS4xNTNhMSAxIDAgMCAxIC45ODYuODM2TDI2LjY2NyA4em0xLjUgOWwuNSAzaC0uOTRsLS41NDUtM2guOTg1em0xIDZsLjYzOSAzLjgzNkExIDEgMCAwIDEgMjguODE5IDI4SDI2di0xaDNsLS43MjYtNGguODk0ek0yMyAyOGgtM3YtMWgzdjF6TTEzIDR2MUg3TDMgMjdoMTB2MUgzLjE4YTEgMSAwIDAgMS0uOTg2LTEuMTY0bDMuNjY2LTIyQTEgMSAwIDAgMSA2Ljg0NyA0SDEzeiIvPgo8L3N5bWJvbD4KPHN5bWJvbCBpZD0iaWMtZmxpcC15IiB2aWV3Qm94PSIwIDAgMzIgMzIiPgogICAgPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJub25lIiBkPSJNMCAwdjMyaDMyVjB6Ii8+CiAgICA8cGF0aCBzdHJva2U9Im5vbmUiIGZpbGw9ImluaGVyaXQiIGQ9Ik0wIDE2djFoMzJ2LTF6TTExIDI3LjE2N2wzIC41di0xLjAzbC0zLS41NDZ2MS4wNzZ6bS0zLS41di0xLjEyMkw1IDI1di01SDR2NS4xNTNhMSAxIDAgMCAwIC44MzYuOTg2TDggMjYuNjY3em05IDEuNWwzIC41di0uOTRsLTMtLjU0NXYuOTg1em02IDFsMy44MzYuNjM5QTEgMSAwIDAgMCAyOCAyOC44MlYyNmgtMXYzbC00LS43Mjd2Ljg5NHpNMjggMjN2LTNoLTF2M2gxek00IDEzaDFWN2wyMi00djEwaDFWMy4xOGExIDEgMCAwIDAtMS4xNjQtLjk4NmwtMjIgMy42NjdBMSAxIDAgMCAwIDQgNi44NDdWMTN6Ii8+Cjwvc3ltYm9sPgo8c3ltYm9sIGlkPSJpYy1mbGlwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJub25lIiAvPgogICAgPHBhdGggZmlsbD0iaW5oZXJpdCIgc3Ryb2tlPSJub25lIiBkPSJNMTEgMGgxdjI0aC0xek0xOSAyMXYtMWgydi0yaDF2MmExIDEgMCAwIDEtMSAxaC0yem0tMiAwaC0zdi0xaDN2MXptNS01aC0xdi0zaDF2M3ptMC01aC0xVjhoMXYzem0wLTVoLTFWNGgtMlYzaDJhMSAxIDAgMCAxIDEgMXYyem0tNS0zdjFoLTNWM2gzek05IDN2MUgydjE2aDd2MUgyYTEgMSAwIDAgMS0xLTFWNGExIDEgMCAwIDEgMS0xaDd6Ii8+Cjwvc3ltYm9sPgo8c3ltYm9sIGlkPSJpYy1oaXN0b3J5IiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJub25lIiBkPSJNMCAwSDI0VjI0SDB6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNzQwIC0xNikgdHJhbnNsYXRlKDU0NyA4KSB0cmFuc2xhdGUoMTkzIDgpIi8+CiAgICA8cGF0aCBmaWxsPSJpbmhlcml0IiBzdHJva2U9Im5vbmUiIGQ9Ik0xMi41IDFDMTguMjk5IDEgMjMgNS43MDEgMjMgMTEuNVMxOC4yOTkgMjIgMTIuNSAyMmMtNS4yOSAwLTkuNjY1LTMuOTExLTEwLjM5NC04Ljk5OWgxLjAxMkMzLjgzOCAxNy41MzQgNy43NjQgMjEgMTIuNSAyMWM1LjI0NyAwIDkuNS00LjI1MyA5LjUtOS41UzE3Ljc0NyAyIDEyLjUgMkM4LjQ5IDIgNS4wNiA0LjQ4NSAzLjY2NiA4SDNoNHYxSDJWNGgxdjMuMDIyQzQuNjggMy40NjIgOC4zMDMgMSAxMi41IDF6bS41IDVsLS4wMDEgNS4yOTEgMi41MzcgMi41MzctLjcwOC43MDhMMTIuMjkyIDEySDEyVjZoMXoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03NDAgLTE2KSB0cmFuc2xhdGUoNTQ3IDgpIHRyYW5zbGF0ZSgxOTMgOCkiLz4KPC9zeW1ib2w+CjxzeW1ib2wgaWQ9ImljLWhpc3RvcnktY2hlY2siIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiID4KICAgICAgICA8cGF0aCBzdHJva2U9IiM1NTU1NTUiIGQ9Ik00LjUgLTFMMS41IDIgNi41IDciIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MCAtODA0KSB0cmFuc2xhdGUoNjAgODA0KSB0cmFuc2xhdGUoMiAzKSByb3RhdGUoLTkwIDQgMykiIC8+CiAgICA8L2c+Cjwvc3ltYm9sPgo8c3ltYm9sIGlkPSJpYy1oaXN0b3J5LWNyb3AiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZyBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgPgogICAgICAgIDxwYXRoIGQ9Ik0wIDBIMTJWMTJIMHoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04NCAtODA0KSB0cmFuc2xhdGUoODQgODA0KSIvPgogICAgICAgIDxwYXRoIGZpbGw9IiM0MzQzNDMiIGQ9Ik0yIDBoMXYxMGMtLjU1MiAwLTEtLjQ0OC0xLTFWMHpNMTAgOXYzSDlWOWgxek05IDJoMXY2SDlWMnoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04NCAtODA0KSB0cmFuc2xhdGUoODQgODA0KSIvPgogICAgICAgIDxwYXRoIGZpbGw9IiM0MzQzNDMiIGQ9Ik0yIDlIMTJWMTBIMnpNOSAyYy41MTMgMCAuOTM2LjM4Ni45OTMuODgzTDEwIDNIM1YyaDZ6TTIgM0gwVjJoMnYxeiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTg0IC04MDQpIHRyYW5zbGF0ZSg4NCA4MDQpIi8+CiAgICA8L2c+Cjwvc3ltYm9sPgo8IS0tIFRoaXMgaWNvbiBtYWRlIGJ5IFBpeGVsIHBlcmZlY3QgZnJvbSB3d3cuZmxhdGljb24uY29tIC0tPgo8c3ltYm9sIGlkPSJpYy1oaXN0b3J5LXJlc2l6ZSIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICA8ZyBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgPgogICAgPHBhdGggZmlsbD0iIzQzNDM0MyIgZD0iTSA5LjQ5MjE4OCAxLjUwNzgxMiBDIDkuMzk4NDM4IDEuNDE0MDYyIDkuMjUgMS40MTQwNjIgOS4xNTYyNSAxLjUwNzgxMiBMIDUuODEyNSA0Ljg1MTU2MiBDIDUuNzE0ODQ0IDQuOTQ1MzEyIDUuNzE0ODQ0IDUuMDk3NjU2IDUuODEyNSA1LjE4NzUgQyA1Ljg1NTQ2OSA1LjIzNDM3NSA1LjkxNzk2OSA1LjI1NzgxMiA1Ljk3NjU2MiA1LjI1NzgxMiBDIDYuMDM5MDYyIDUuMjU3ODEyIDYuMTAxNTYyIDUuMjM0Mzc1IDYuMTQ4NDM4IDUuMTg3NSBMIDkuNDkyMTg4IDEuODQzNzUgQyA5LjU4NTkzOCAxLjc1IDkuNTg1OTM4IDEuNjAxNTYyIDkuNDkyMTg4IDEuNTA3ODEyIFogTSA5LjQ5MjE4OCAxLjUwNzgxMiAiLz4KICAgIDxwYXRoIGZpbGw9IiM0MzQzNDMiIGQ9Ik0gOS4zMjgxMjUgMS40MzM1OTQgQyA5LjE5NTMxMiAxLjQzMzU5NCA5LjA4NTkzOCAxLjUzOTA2MiA5LjA4NTkzOCAxLjY3MTg3NSBMIDkuMDg1OTM4IDQuNTQyOTY5IEMgOS4wODU5MzggNC42NzE4NzUgOS4xOTUzMTIgNC43ODEyNSA5LjMyODEyNSA0Ljc4MTI1IEMgOS40NjA5MzggNC43ODEyNSA5LjU2NjQwNiA0LjY3MTg3NSA5LjU2NjQwNiA0LjU0Mjk2OSBMIDkuNTY2NDA2IDEuNjcxODc1IEMgOS41NjY0MDYgMS41MzkwNjIgOS40NjA5MzggMS40MzM1OTQgOS4zMjgxMjUgMS40MzM1OTQgWiBNIDkuMzI4MTI1IDEuNDMzNTk0ICIvPgogICAgPHBhdGggZmlsbD0iIzQzNDM0MyIgZD0iTSA5LjMyODEyNSAxLjQzMzU5NCBMIDYuNDU3MDMxIDEuNDMzNTk0IEMgNi4zMjgxMjUgMS40MzM1OTQgNi4yMTg3NSAxLjUzOTA2MiA2LjIxODc1IDEuNjcxODc1IEMgNi4yMTg3NSAxLjgwNDY4OCA2LjMyODEyNSAxLjkxNDA2MiA2LjQ1NzAzMSAxLjkxNDA2MiBMIDkuMzI4MTI1IDEuOTE0MDYyIEMgOS40NjA5MzggMS45MTQwNjIgOS41NjY0MDYgMS44MDQ2ODggOS41NjY0MDYgMS42NzE4NzUgQyA5LjU2NjQwNiAxLjUzOTA2MiA5LjQ2MDkzOCAxLjQzMzU5NCA5LjMyODEyNSAxLjQzMzU5NCBaIE0gOS4zMjgxMjUgMS40MzM1OTQgIi8+CiAgICA8cGF0aCBmaWxsPSIjNDM0MzQzIiBkPSJNIDUuMTg3NSA1LjgxMjUgQyA1LjA5NzY1NiA1LjcxODc1IDQuOTQ1MzEyIDUuNzE4NzUgNC44NTE1NjIgNS44MTI1IEwgMS41MDM5MDYgOS4xNTYyNSBDIDEuNDEwMTU2IDkuMjUgMS40MTAxNTYgOS40MDIzNDQgMS41MDM5MDYgOS40OTYwOTQgQyAxLjU1NDY4OCA5LjU0Mjk2OSAxLjYxMzI4MSA5LjU2NjQwNiAxLjY3MTg3NSA5LjU2NjQwNiBDIDEuNzM0Mzc1IDkuNTY2NDA2IDEuNzk2ODc1IDkuNTQyOTY5IDEuODQzNzUgOS40OTYwOTQgTCA1LjE4NzUgNi4xNDg0MzggQyA1LjI4MTI1IDYuMDU0Njg4IDUuMjgxMjUgNS45MDIzNDQgNS4xODc1IDUuODEyNSBaIE0gNS4xODc1IDUuODEyNSAiLz4KICAgIDxwYXRoIGZpbGw9IiM0MzQzNDMiIGQ9Ik0gMS42NzE4NzUgNi4yMTg3NSBDIDEuNTM5MDYyIDYuMjE4NzUgMS40MzM1OTQgNi4zMjgxMjUgMS40MzM1OTQgNi40NTcwMzEgTCAxLjQzMzU5NCA5LjMyODEyNSBDIDEuNDMzNTk0IDkuNDYwOTM4IDEuNTM5MDYyIDkuNTY2NDA2IDEuNjcxODc1IDkuNTY2NDA2IEMgMS44MDQ2ODggOS41NjY0MDYgMS45MTQwNjIgOS40NjA5MzggMS45MTQwNjIgOS4zMjgxMjUgTCAxLjkxNDA2MiA2LjQ1NzAzMSBDIDEuOTE0MDYyIDYuMzI4MTI1IDEuODA0Njg4IDYuMjE4NzUgMS42NzE4NzUgNi4yMTg3NSBaIE0gMS42NzE4NzUgNi4yMTg3NSAiLz4KICAgIDxwYXRoIGZpbGw9IiM0MzQzNDMiIGQ9Ik0gNC41NDI5NjkgOS4wODU5MzggTCAxLjY3MTg3NSA5LjA4NTkzOCBDIDEuNTM5MDYyIDkuMDg1OTM4IDEuNDMzNTk0IDkuMTk1MzEyIDEuNDMzNTk0IDkuMzI4MTI1IEMgMS40MzM1OTQgOS40NjA5MzggMS41MzkwNjIgOS41NjY0MDYgMS42NzE4NzUgOS41NjY0MDYgTCA0LjU0Mjk2OSA5LjU2NjQwNiBDIDQuNjcxODc1IDkuNTY2NDA2IDQuNzgxMjUgOS40NjA5MzggNC43ODEyNSA5LjMyODEyNSBDIDQuNzgxMjUgOS4xOTUzMTIgNC42NzE4NzUgOS4wODU5MzggNC41NDI5NjkgOS4wODU5MzggWiBNIDQuNTQyOTY5IDkuMDg1OTM4ICIvPgogICAgPHBhdGggZmlsbD0iIzQzNDM0MyIgZD0iTSAxMC4yODEyNSAwIEwgMC43MTg3NSAwIEMgMC4zMjAzMTIgMCAwIDAuMzIwMzEyIDAgMC43MTg3NSBMIDAgMTAuMjgxMjUgQyAwIDEwLjY3OTY4OCAwLjMyMDMxMiAxMSAwLjcxODc1IDExIEwgMTAuMjgxMjUgMTEgQyAxMC42Nzk2ODggMTEgMTEgMTAuNjc5Njg4IDExIDEwLjI4MTI1IEwgMTEgMC43MTg3NSBDIDExIDAuMzIwMzEyIDEwLjY3OTY4OCAwIDEwLjI4MTI1IDAgWiBNIDEwLjUyMzQzOCAxMC4yODEyNSBDIDEwLjUyMzQzOCAxMC40MTQwNjIgMTAuNDE0MDYyIDEwLjUyMzQzOCAxMC4yODEyNSAxMC41MjM0MzggTCAwLjcxODc1IDEwLjUyMzQzOCBDIDAuNTg1OTM4IDEwLjUyMzQzOCAwLjQ3NjU2MiAxMC40MTQwNjIgMC40NzY1NjIgMTAuMjgxMjUgTCAwLjQ3NjU2MiAwLjcxODc1IEMgMC40NzY1NjIgMC41ODU5MzggMC41ODU5MzggMC40NzY1NjIgMC43MTg3NSAwLjQ3NjU2MiBMIDEwLjI4MTI1IDAuNDc2NTYyIEMgMTAuNDE0MDYyIDAuNDc2NTYyIDEwLjUyMzQzOCAwLjU4NTkzOCAxMC41MjM0MzggMC43MTg3NSBaIE0gMTAuNTIzNDM4IDEwLjI4MTI1ICIvPgogIDwvZz4KPC9zeW1ib2w+CjwhLS0gIC0tPgo8c3ltYm9sIGlkPSJpYy1oaXN0b3J5LWRyYXciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZyBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgPgogICAgICAgIDxwYXRoIGQ9Ik0wIDFIMTJWMTNIMHoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNTYgLTgwNCkgdHJhbnNsYXRlKDE1NiA4MDMpIi8+CiAgICAgICAgPHBhdGggc3Ryb2tlPSIjNDM0MzQzIiBkPSJNOS42MjIgMS41ODRsMS44MzUgMS42NTgtOC4zMSA4LjQwN0wuNSAxMi41VjExbDkuMTIyLTkuNDE2eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE1NiAtODA0KSB0cmFuc2xhdGUoMTU2IDgwMykiLz4KICAgICAgICA8cGF0aCBmaWxsPSIjNDM0MzQzIiBkPSJNNy42MjggMy43NTNMMTAuMzc4IDMuNzUzIDEwLjM3OCA0LjI1MyA3LjYyOCA0LjI1M3oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNTYgLTgwNCkgdHJhbnNsYXRlKDE1NiA4MDMpIHJvdGF0ZSg0NSA5LjAwMyA0LjAwMykiLz4KICAgIDwvZz4KPC9zeW1ib2w+CjxzeW1ib2wgaWQ9ImljLWhpc3RvcnktZmlsdGVyIiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgPGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiID4KICAgICAgICA8cGF0aCBkPSJNMCAwSDEyVjEySDB6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjc2IC04MDQpIHRyYW5zbGF0ZSgyNzYgODA0KSIvPgogICAgICAgIDxwYXRoIGZpbGw9IiM0MzQzNDMiIGQ9Ik0xMiAzdjFIOVYzaDN6TTcgNEgwVjNoN3YxeiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3NiAtODA0KSB0cmFuc2xhdGUoMjc2IDgwNCkiLz4KICAgICAgICA8cGF0aCBmaWxsPSIjNDM0MzQzIiBkPSJNMTIgOHYxSDlWOGgzek03IDlIMFY4aDd2MXoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNzYgLTgwNCkgdHJhbnNsYXRlKDI3NiA4MDQpIG1hdHJpeCgtMSAwIDAgMSAxMiAwKSIvPgogICAgICAgIDxwYXRoIGZpbGw9IiM0MzQzNDMiIGQ9Ik04IDFjMS4xMDUgMCAyIC44OTUgMiAycy0uODk1IDItMiAyLTItLjg5NS0yLTIgLjg5NS0yIDItMnptMCAxYy0uNTUyIDAtMSAuNDQ4LTEgMXMuNDQ4IDEgMSAxIDEtLjQ0OCAxLTEtLjQ0OC0xLTEtMXpNNCA3YzEuMTA1IDAgMiAuODk1IDIgMnMtLjg5NSAyLTIgMi0yLS44OTUtMi0yIC44OTUtMiAyLTJ6bTAgMWMtLjU1MiAwLTEgLjQ0OC0xIDFzLjQ0OCAxIDEgMSAxLS40NDggMS0xLS40NDgtMS0xLTF6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjc2IC04MDQpIHRyYW5zbGF0ZSgyNzYgODA0KSIvPgogICAgPC9nPgo8L3N5bWJvbD4KPHN5bWJvbCBpZD0iaWMtaGlzdG9yeS1mbGlwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgPGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiID4KICAgICAgICA8cGF0aCBkPSJNMCAwSDEyVjEySDB6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTA4IC04MDQpIHRyYW5zbGF0ZSgxMDggODA0KSIvPgogICAgICAgIDxwYXRoIGZpbGw9IiM0MzQzNDMiIGQ9Ik02IDBMNyAwIDcgMTIgNiAxMnpNMTEgMTBWOWgxdjEuNWMwIC4yNzYtLjIyNC41LS41LjVIMTB2LTFoMXpNNSAxdjFIMXY4aDR2MUguNWMtLjI3NiAwLS41LS4yMjQtLjUtLjV2LTljMC0uMjc2LjIyNC0uNS41LS41SDV6bTcgNXYyaC0xVjZoMXptMC0zdjJoLTFWM2gxek05IDF2MUg3VjFoMnptMi41IDBjLjI3NiAwIC41LjIyNC41LjVWMmgtMlYxaDEuNXpNOSAxMUg3di0xaDJ2MXoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDggLTgwNCkgdHJhbnNsYXRlKDEwOCA4MDQpIi8+CiAgICA8L2c+Cjwvc3ltYm9sPgo8c3ltYm9sIGlkPSJpYy1oaXN0b3J5LWljb24iIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZyBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgPgogICAgICAgIDxwYXRoIGQ9Ik0wIDBIMTJWMTJIMHoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMDQgLTgwNCkgdHJhbnNsYXRlKDIwNCA4MDQpIi8+CiAgICAgICAgPHBhdGggc3Ryb2tlPSIjNDM0MzQzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS4xIiBkPSJNNiA5LjU2OEwyLjYwMSAxMSAyLjk3NSA3LjQ2NyAwLjUgNC44MiA0LjEzIDQuMDY4IDYgMSA3Ljg3IDQuMDY4IDExLjUgNC44MiA5LjAyNSA3LjQ2NyA5LjM5OSAxMXoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMDQgLTgwNCkgdHJhbnNsYXRlKDIwNCA4MDQpIi8+CiAgICA8L2c+Cjwvc3ltYm9sPgo8c3ltYm9sIGlkPSJpYy1oaXN0b3J5LW1hc2siIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZyBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yNTIgLTgwNCkgdHJhbnNsYXRlKDI1MiA4MDQpIj4KICAgICAgICAgICAgPHBhdGggZD0iTTAgMEgxMlYxMkgweiIvPgogICAgICAgICAgICA8Y2lyY2xlIGN4PSI2IiBjeT0iNiIgcj0iMi41IiBzdHJva2U9IiM0NDQiLz4KICAgICAgICAgICAgPHBhdGggZmlsbD0iIzQzNDM0MyIgZD0iTTExLjUgMGMuMjc2IDAgLjUuMjI0LjUuNXYxMWMwIC4yNzYtLjIyNC41LS41LjVILjVjLS4yNzYgMC0uNS0uMjI0LS41LS41Vi41QzAgLjIyNC4yMjQgMCAuNSAwaDExek0xMSAxSDF2MTBoMTBWMXoiLz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ltYm9sPgo8c3ltYm9sIGlkPSJpYy1oaXN0b3J5LXJvdGF0ZSIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxkZWZzPgogICAgICAgIDxwYXRoIGlkPSJyZm40cnlsZmZhIiBkPSJNNyAxMmMtLjMzNSAwLS42NjMtLjAyNS0uOTgzLS4wNzRDMy4xNzEgMTEuNDkyIDEgOS4yMDUgMSA2LjQ0NGMwLTEuMzYzLjUzNC0yLjYxMyAxLjQxNS0zLjU4Ii8+CiAgICAgICAgPG1hc2sgaWQ9IjZmOWduMmR5c2IiIHdpZHRoPSI2IiBoZWlnaHQ9IjkuMTM2IiB4PSIwIiB5PSIwIiBtYXNrVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjcmZuNHJ5bGZmYSIgc3Ryb2tlPSI0MzQzNDMiLz4KICAgICAgICA8L21hc2s+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMzIgLTgwNCkgdHJhbnNsYXRlKDEzMiA4MDQpIj4KICAgICAgICAgICAgPHBhdGggZD0iTTAgMC41SDEyVjEyLjVIMHoiLz4KICAgICAgICAgICAgPHBhdGggZmlsbD0iIzQzNDM0MyIgZD0iTTYuNSAxQzkuNTM4IDEgMTIgMy40NjIgMTIgNi41YzAgMi4zNy0xLjUgNC4zOS0zLjYgNS4xNjNsLS40MDctLjkxNkM5Ljc0NCAxMC4xMyAxMSA4LjQ2MiAxMSA2LjUgMTEgNC4wMTUgOC45ODUgMiA2LjUgMmMtLjc3NyAwLTEuNTA5LjE5Ny0yLjE0Ny41NDRMNCAxLjc1bC0uMjA1LS4wNEM0LjU5NCAxLjI1OCA1LjUxNyAxIDYuNSAxeiIvPgogICAgICAgICAgICA8dXNlIHN0cm9rZT0iIzQzNDM0MyIgc3Ryb2tlLWRhc2hhcnJheT0iMiAxLjI1IiBzdHJva2Utd2lkdGg9IjEiIG1hc2s9InVybCgjNmY5Z24yZHlzYikiIHhsaW5rOmhyZWY9IiNyZm40cnlsZmZhIi8+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9IiM0MzQzNDMiIGQ9Ik00LjI3OSAwTDYgMS43NSA0LjI1IDMuNTcxIDMuNTQzIDIuODY0IDQuNTg2IDEuNzUgMy41NzIgMC43MDd6IiB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSA5LjU0MyAwKSIvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zeW1ib2w+CjxzeW1ib2wgaWQ9ImljLWhpc3Rvcnktc2hhcGUiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZyBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgPgogICAgICAgIDxwYXRoIGQ9Ik0wIDBIMTJWMTJIMHoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xODAgLTgwNCkgdHJhbnNsYXRlKDE4MCA4MDQpIi8+CiAgICAgICAgPHBhdGggZmlsbD0iIzQzNDM0MyIgZD0iTTExLjUgNGMuMjc2IDAgLjUuMjI0LjUuNXY3YzAgLjI3Ni0uMjI0LjUtLjUuNWgtN2MtLjI3NiAwLS41LS4yMjQtLjUtLjVWOC44aDFWMTFoNlY1SDguMzQxbC0uNTY4LTFIMTEuNXoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xODAgLTgwNCkgdHJhbnNsYXRlKDE4MCA4MDQpIi8+CiAgICAgICAgPHBhdGggc3Ryb2tlPSIjNDM0MzQzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik00LjUgMC41TDguNSA3LjYxMSAwLjUgNy42MTF6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTgwIC04MDQpIHRyYW5zbGF0ZSgxODAgODA0KSIvPgogICAgPC9nPgo8L3N5bWJvbD4KPHN5bWJvbCBpZD0iaWMtaGlzdG9yeS10ZXh0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgPGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiID4KICAgICAgICA8cGF0aCBkPSJNMCAwSDEyVjEySDB6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjI4IC04MDQpIHRyYW5zbGF0ZSgyMjggODA0KSIvPgogICAgICAgIDxwYXRoIGZpbGw9IiM0MzQzNDMiIGQ9Ik0yIDFoOGMuNTUyIDAgMSAuNDQ4IDEgMUgxYzAtLjU1Mi40NDgtMSAxLTF6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjI4IC04MDQpIHRyYW5zbGF0ZSgyMjggODA0KSIvPgogICAgICAgIDxwYXRoIGZpbGw9IiM0MzQzNDMiIGQ9Ik0xIDFIMlYzSDF6TTEwIDFIMTFWM0gxMHpNNS41IDFMNi41IDEgNi41IDExIDUuNSAxMXoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMjggLTgwNCkgdHJhbnNsYXRlKDIyOCA4MDQpIi8+CiAgICAgICAgPHBhdGggZmlsbD0iIzQzNDM0MyIgZD0iTTQgMTBIOFYxMUg0eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIyOCAtODA0KSB0cmFuc2xhdGUoMjI4IDgwNCkiLz4KICAgIDwvZz4KPC9zeW1ib2w+CjxzeW1ib2wgaWQ9ImljLWhpc3RvcnktbG9hZCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxnIGZpbGw9Im5vbmUiIHN0cm9rZT0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8cGF0aCBkPSJNMCAwSDEyVjEySDB6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzI0IC04MDUpIHRyYW5zbGF0ZSgzMjQgODA1KSIvPgogICAgICAgIDxwYXRoIGZpbGw9IiM0MzQzNDMiIGQ9Ik01IDBjLjU1MiAwIDEgLjQ0OCAxIDF2MWg1LjVjLjI3NiAwIC41LjIyNC41LjV2OGMwIC4yNzYtLjIyNC41LS41LjVILjVjLS4yNzYgMC0uNS0uMjI0LS41LS41VjFjMC0uNTUyLjQ0OC0xIDEtMWg0em0wIDFIMXY5aDEwVjNINVYxeiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMyNCAtODA1KSB0cmFuc2xhdGUoMzI0IDgwNSkiLz4KICAgICAgICA8cGF0aCBmaWxsPSIjNDM0MzQzIiBkPSJNMSAyTDUgMiA1IDMgMSAzeiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMyNCAtODA1KSB0cmFuc2xhdGUoMzI0IDgwNSkiLz4KICAgIDwvZz4KPC9zeW1ib2w+CjxzeW1ib2wgaWQ9ImljLWhpc3RvcnktZGVsZXRlIiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgPGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGZpbGw9IiM0MzQzNDMiPgogICAgICAgICAgICA8cGF0aCBkPSJNMiA5aDhWMWgxdjguNWMwIC4yNzYtLjIyNC41LS41LjVoLTljLS4yNzYgMC0uNS0uMjI0LS41LS41VjFoMXY4ek0wIDBIMTJWMUgweiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMwMCAtODA0KSB0cmFuc2xhdGUoMzAwIDgwNCkgdHJhbnNsYXRlKDAgMikiLz4KICAgICAgICAgICAgPHBhdGggZD0iTTQgM0g1VjdINHpNNyAzSDhWN0g3eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMwMCAtODA0KSB0cmFuc2xhdGUoMzAwIDgwNCkgdHJhbnNsYXRlKDAgMikiLz4KICAgICAgICAgICAgPHBhdGggZD0iTTQgMWg0VjBoMXYxLjVjMCAuMjc2LS4yMjQuNS0uNS41aC01Yy0uMjc2IDAtLjUtLjIyNC0uNS0uNVYwaDF2MXoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMDAgLTgwNCkgdHJhbnNsYXRlKDMwMCA4MDQpIG1hdHJpeCgxIDAgMCAtMSAwIDIpIi8+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N5bWJvbD4KPHN5bWJvbCBpZD0iaWMtaGlzdG9yeS1ncm91cCIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxnIGZpbGw9Im5vbmUiIHN0cm9rZT0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzQ4IC04MDQpIHRyYW5zbGF0ZSgzNDggODA0KSI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMTJWMTJIMHoiLz4KICAgICAgICAgICAgPHBhdGggZmlsbD0iIzQzNDM0MyIgZD0iTTEgOXYyaDF2MUguNWMtLjI3NiAwLS41LS4yMjQtLjUtLjVWOWgxem0xMSAxdjEuNWMwIC4yNzYtLjIyNC41LS41LjVIOXYtMWgydi0xaDF6bS00IDF2MUg2di0xaDJ6bS0zIDB2MUgzdi0xaDJ6bTctNHYyaC0xVjdoMXpNMSA2djJIMFY2aDF6bTExLTJ2MmgtMVY0aDF6TTEgM3YySDBWM2gxem0xMC41LTNjLjI3NiAwIC41LjIyNC41LjVWM2gtMVYxaC0xVjBoMS41ek02IDB2MUg0VjBoMnptMyAwdjFIN1YwaDJ6TTAgLjVDMCAuMjI0LjIyNCAwIC41IDBIM3YxSDF2MUgwVi41ek05LjUgNGMuMjc2IDAgLjUuMjI0LjUuNXY1YzAgLjI3Ni0uMjI0LjUtLjUuNWgtNWMtLjI3NiAwLS41LS4yMjQtLjUtLjVWOC4zNTVjLjMxNy4wOTQuNjUyLjE0NSAxIC4xNDVWOWg0VjVoLS41YzAtLjM0OC0uMDUtLjY4My0uMTQ1LTFIOS41eiIvPgogICAgICAgICAgICA8Y2lyY2xlIGN4PSI1IiBjeT0iNSIgcj0iMi41IiBzdHJva2U9IiM0MzQzNDMiLz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ltYm9sPgo8c3ltYm9sIGlkPSJpYy1pY29uLWFycm93LTIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+CiAgICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9ImluaGVyaXQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTIxLjc5MyAxOC41SDIuNXYtNWgxOC45MzVsLTcuNi04aDUuODcybDEwLjUgMTAuNS0xMC41IDEwLjVoLTUuOTE0bDgtOHoiLz4KPC9zeW1ib2w+CjxzeW1ib2wgaWQ9ImljLWljb24tYXJyb3ctMyIgdmlld0JveD0iMCAwIDMyIDMyIj4KICAgIDxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iaW5oZXJpdCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNMjUuMjg4IDE2LjQyTDE0LjIwOCAyNy41SDYuNzkybDExLjI5MS0xMS4yOTFMNi44MjYgNC41aDcuMzgxbDExLjY2MSAxMS42NjEtLjU4LjI1OHoiLz4KPC9zeW1ib2w+CjxzeW1ib2wgaWQ9ImljLWljb24tYXJyb3ciIHZpZXdCb3g9IjAgMCAzMiAzMiI+CiAgICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9ImluaGVyaXQiIGQ9Ik0yLjUgMTEuNXY5aDE4djUuMjkzTDMwLjI5MyAxNiAyMC41IDYuMjA3VjExLjVoLTE4eiIvPgo8L3N5bWJvbD4KPHN5bWJvbCBpZD0iaWMtaWNvbi1idWJibGUiIHZpZXdCb3g9IjAgMCAzMiAzMiI+CiAgICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9ImluaGVyaXQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTIyLjIwNyAyNC41TDE2LjUgMzAuMjA3VjI0LjVIOEE2LjUgNi41IDAgMCAxIDEuNSAxOFY5QTYuNSA2LjUgMCAwIDEgOCAyLjVoMTZBNi41IDYuNSAwIDAgMSAzMC41IDl2OWE2LjUgNi41IDAgMCAxLTYuNSA2LjVoLTEuNzkzeiIvPgo8L3N5bWJvbD4KPHN5bWJvbCBpZD0iaWMtaWNvbi1oZWFydCIgdmlld0JveD0iMCAwIDMyIDMyIj4KICAgIDxwYXRoIGZpbGwtcnVsZT0ibm9uemVybyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJpbmhlcml0IiBkPSJNMTUuOTk2IDMwLjY3NWwxLjk4MS0xLjc5YzcuODk4LTcuMTc3IDEwLjM2NS05LjcxOCAxMi4xMzUtMTMuMDEyLjkyMi0xLjcxNiAxLjM3Ny0zLjM3IDEuMzc3LTUuMDc2IDAtNC42NS0zLjY0Ny04LjI5Ny04LjI5Ny04LjI5Ny0yLjMzIDAtNC44NiAxLjUyNy02LjgxNyAzLjgyNGwtLjM4LjQ0Ny0uMzgxLS40NDdDMTMuNjU4IDQuMDI3IDExLjEyNiAyLjUgOC43OTcgMi41IDQuMTQ3IDIuNS41IDYuMTQ3LjUgMTAuNzk3YzAgMS43MTQuNDYgMy4zNzUgMS4zODkgNS4wOTggMS43NzUgMy4yODggNC4yNiA1Ljg0MyAxMi4xMjMgMTIuOTc0bDEuOTg0IDEuODA2eiIvPgo8L3N5bWJvbD4KPHN5bWJvbCBpZD0iaWMtaWNvbi1sb2FkIiB2aWV3Qm94PSIwIDAgMzIgMzIiPgogICAgPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJpbmhlcml0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik0xNy4zMTQgMTguODY3bDEuOTUxLTIuNTMgNCA1LjE4NGgtMTdsNi41LTguODQgNC41NDkgNi4xODZ6Ii8+CiAgICA8cGF0aCBzdHJva2U9Im5vbmUiIGZpbGw9ImluaGVyaXQiIGQ9Ik0xOC4wMSA0YTExLjc5OCAxMS43OTggMCAwIDAgMCAxSDN2MjRoMjRWMTQuOTg2YTguNzM4IDguNzM4IDAgMCAwIDEgMFYyOWExIDEgMCAwIDEtMSAxSDNhMSAxIDAgMCAxLTEtMVY1YTEgMSAwIDAgMSAxLTFoMTUuMDF6Ii8+CiAgICA8cGF0aCBzdHJva2U9Im5vbmUiIGZpbGw9ImluaGVyaXQiIGQ9Ik0yNSAzaDF2OWgtMXoiLz4KICAgIDxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iaW5oZXJpdCIgZD0iTTIyIDZsMy41LTMuNUwyOSA2Ii8+Cjwvc3ltYm9sPgo8c3ltYm9sIGlkPSJpYy1pY29uLWxvY2F0aW9uIiB2aWV3Qm94PSIwIDAgMzIgMzIiPgogICAgPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJpbmhlcml0IiBkPSJNMTYgMzEuMjhDMjMuNjc1IDIzLjMwMiAyNy41IDE3LjE4MSAyNy41IDEzYzAtNi4zNTEtNS4xNDktMTEuNS0xMS41LTExLjVTNC41IDYuNjQ5IDQuNSAxM2MwIDQuMTgxIDMuODI1IDEwLjMwMiAxMS41IDE4LjI4eiIvPgogICAgPGNpcmNsZSBmaWxsPSJub25lIiBzdHJva2U9ImluaGVyaXQiIGN4PSIxNiIgY3k9IjEzIiByPSI0LjUiLz4KPC9zeW1ib2w+CjxzeW1ib2wgaWQ9ImljLWljb24tcG9seWdvbiIgdmlld0JveD0iMCAwIDMyIDMyIj4KICAgIDxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iaW5oZXJpdCIgZD0iTS41NzYgMTZMOC4yOSAyOS41aDE1LjQyTDMxLjQyNCAxNiAyMy43MSAyLjVIOC4yOUwuNTc2IDE2eiIvPgo8L3N5bWJvbD4KPHN5bWJvbCBpZD0iaWMtaWNvbi1zdGFyLTIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+CiAgICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9ImluaGVyaXQiIGQ9Ik0xOS40NDYgMzEuNTkybDIuMjY1LTMuMjcyIDMuOTQ2LjI1LjYzNi0zLjk0IDMuNjY1LTEuNTA1LTEuMTItMy44MzIgMi42NTUtMi45NjItMi42NTYtMi45NjIgMS4xMi0zLjgzMi0zLjY2NC0xLjUwNS0uNjM2LTMuOTQxLTMuOTQ2LjI1LTIuMjY1LTMuMjcxTDE2IDMuMDI0IDEyLjU1NCAxLjA3IDEwLjI4OSA0LjM0bC0zLjk0Ni0uMjUtLjYzNiAzLjk0MS0zLjY2NSAxLjUwNSAxLjEyIDMuODMyTC41MDggMTYuMzNsMi42NTYgMi45NjItMS4xMiAzLjgzMiAzLjY2NCAxLjUwNC42MzYgMy45NDIgMy45NDYtLjI1IDIuMjY1IDMuMjdMMTYgMjkuNjM4bDMuNDQ2IDEuOTU1eiIvPgo8L3N5bWJvbD4KPHN5bWJvbCBpZD0iaWMtaWNvbi1zdGFyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPgogICAgPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJpbmhlcml0IiBkPSJNMjUuMjkyIDI5Ljg3OGwtMS43NzUtMTAuMzQ2IDcuNTE3LTcuMzI3LTEwLjM4OC0xLjUxTDE2IDEuMjgybC00LjY0NiA5LjQxMy0xMC4zODggMS41MSA3LjUxNyA3LjMyNy0xLjc3NSAxMC4zNDZMMTYgMjQuOTkzbDkuMjkyIDQuODg1eiIvPgo8L3N5bWJvbD4KPHN5bWJvbCBpZD0iaWMtaWNvbiIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iaW5oZXJpdCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNMTEuOTIzIDE5LjEzNkw1LjQyNCAyMmwuNzE1LTcuMDY1LTQuNzMxLTUuMjk2IDYuOTQtMS41MDNMMTEuOTIzIDJsMy41NzQgNi4xMzYgNi45NCAxLjUwMy00LjczMSA1LjI5NkwxOC40MiAyMnoiLz4KPC9zeW1ib2w+CjxzeW1ib2wgaWQ9ImljLW1hc2stbG9hZCIgdmlld0JveD0iMCAwIDMyIDMyIj4KICAgIDxwYXRoIHN0cm9rZT0ibm9uZSIgZmlsbD0ibm9uZSIgZD0iTTAgMGgzMnYzMkgweiIvPgogICAgPHBhdGggc3Ryb2tlPSJub25lIiBmaWxsPSJpbmhlcml0IiBkPSJNMTguMDEgNGExMS43OTggMTEuNzk4IDAgMCAwIDAgMUgzdjI0aDI0VjE0Ljk4NmE4LjczOCA4LjczOCAwIDAgMCAxIDBWMjlhMSAxIDAgMCAxLTEgMUgzYTEgMSAwIDAgMS0xLTFWNWExIDEgMCAwIDEgMS0xaDE1LjAxek0xNSAyM2E2IDYgMCAxIDEgMC0xMiA2IDYgMCAwIDEgMCAxMnptMC0xYTUgNSAwIDEgMCAwLTEwIDUgNSAwIDAgMCAwIDEweiIvPgogICAgPHBhdGggc3Ryb2tlPSJub25lIiBmaWxsPSJpbmhlcml0IiBkPSJNMjUgM2gxdjloLTF6Ii8+CiAgICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9ImluaGVyaXQiIGQ9Ik0yMiA2bDMuNS0zLjVMMjkgNiIvPgo8L3N5bWJvbD4KPHN5bWJvbCBpZD0iaWMtbWFzayIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjQuNSIgc3Ryb2tlPSJpbmhlcml0IiBmaWxsPSJub25lIi8+CiAgICA8cGF0aCBzdHJva2U9Im5vbmUiIGZpbGw9ImluaGVyaXQiIGQ9Ik0yIDFoMjBhMSAxIDAgMCAxIDEgMXYyMGExIDEgMCAwIDEtMSAxSDJhMSAxIDAgMCAxLTEtMVYyYTEgMSAwIDAgMSAxLTF6bTAgMXYyMGgyMFYySDJ6Ii8+Cjwvc3ltYm9sPgo8c3ltYm9sIGlkPSJpYy1yZWRvIiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgb3BhY2l0eT0iLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0ibm9uZSIgLz4KICAgIDxwYXRoIHN0cm9rZT0ibm9uZSIgZmlsbD0iaW5oZXJpdCIgZD0iTTIxIDZIOWE2IDYgMCAxIDAgMCAxMmgxMnYxSDlBNyA3IDAgMCAxIDkgNWgxMnYxeiIvPgogICAgPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJpbmhlcml0IiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBkPSJNMTkgM2wyLjUgMi41TDE5IDgiLz4KPC9zeW1ib2w+CjxzeW1ib2wgaWQ9ImljLXJlc2V0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgb3BhY2l0eT0iLjUiIHN0cm9rZT0ibm9uZSIgZmlsbD0ibm9uZSIvPgogICAgPHBhdGggc3Ryb2tlPSJub25lIiBmaWxsPSJpbmhlcml0IiBkPSJNMiAxM3YtMWE3IDcgMCAwIDEgNy03aDEzdjFoLTF2NWgxdjFhNyA3IDAgMCAxLTcgN0gydi0xaDF2LTVIMnptNy03YTYgNiAwIDAgMC02IDZ2NmgxMmE2IDYgMCAwIDAgNi02VjZIOXoiLz4KICAgIDxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iaW5oZXJpdCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgZD0iTTE5IDNsMi41IDIuNUwxOSA4TTUgMTZsLTIuNSAyLjVMNSAyMSIvPgo8L3N5bWJvbD4KPHN5bWJvbCBpZD0iaWMtcm90YXRlLWNsb2Nrd2lzZSIgdmlld0JveD0iMCAwIDMyIDMyIj4KICAgIDxwYXRoIHN0cm9rZT0ibm9uZSIgZmlsbD0iaW5oZXJpdCIgZD0iTTI5IDE3aC0uOTI0YzAgNi42MjctNS4zNzMgMTItMTIgMTItNi42MjggMC0xMi01LjM3My0xMi0xMkM0LjA3NiAxMC4zOTggOS40MDcgNS4wNDEgMTYgNVY0QzguODIgNCAzIDkuODIgMyAxN3M1LjgyIDEzIDEzIDEzIDEzLTUuODIgMTMtMTN6Ii8+CiAgICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9ImluaGVyaXQiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIGQ9Ik0xNiAxLjVsNCAzLTQgMyIvPgogICAgPHBhdGggc3Ryb2tlPSJub25lIiBmaWxsPSJpbmhlcml0IiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xNiA0aDR2MWgtNHoiLz4KPC9zeW1ib2w+CjxzeW1ib2wgaWQ9ImljLXJvdGF0ZS1jb3VudGVyY2xvY2t3aXNlIiB2aWV3Qm94PSIwIDAgMzIgMzIiPgogICAgPHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMyAxN2guOTI0YzAgNi42MjcgNS4zNzMgMTIgMTIgMTIgNi42MjggMCAxMi01LjM3MyAxMi0xMiAwLTYuNjAyLTUuMzMxLTExLjk2LTExLjkyNC0xMlY0YzcuMTggMCAxMyA1LjgyIDEzIDEzcy01LjgyIDEzLTEzIDEzUzMgMjQuMTggMyAxN3oiLz4KICAgIDxwYXRoIHN0cm9rZT0ibm9uZSIgZmlsbD0iaW5oZXJpdCIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNMTIgNGg0djFoLTR6Ii8+CiAgICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9ImluaGVyaXQiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIGQ9Ik0xNiAxLjVsLTQgMyA0IDMiLz4KPC9zeW1ib2w+CjxzeW1ib2wgaWQ9ImljLXJvdGF0ZSIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIHN0cm9rZT0ibm9uZSIgLz4KICAgIDxwYXRoIGZpbGw9ImluaGVyaXQiIHN0cm9rZT0ibm9uZSIgZD0iTTguMzQ5IDIyLjI1NGExMC4wMDIgMTAuMDAyIDAgMCAxLTIuNzc4LTEuNzE5bC42NS0uNzZhOS4wMDIgOS4wMDIgMCAwIDAgMi40OTUgMS41NDhsLS4zNjcuOTMxem0yLjg3My43MDRsLjA3OC0uOTk3YTkgOSAwIDEgMC0uNTU3LTE3Ljg1MmwtLjE0LS45OUExMC4wNzYgMTAuMDc2IDAgMCAxIDEyLjE0NSAzYzUuNTIzIDAgMTAgNC40NzcgMTAgMTBzLTQuNDc3IDEwLTEwIDEwYy0uMzEyIDAtLjYyLS4wMTQtLjkyNC0uMDQyem0tNy41NTYtNC42NTVhOS45NDIgOS45NDIgMCAwIDEtMS4yNTMtMi45OTZsLjk3My0uMjM0YTguOTQ4IDguOTQ4IDAgMCAwIDEuMTI0IDIuNjkzbC0uODQ0LjUzN3ptLTEuNTAyLTUuOTFBOS45NDkgOS45NDkgMCAwIDEgMi44OCA5LjIzbC45MjUuMzgyYTguOTU0IDguOTU0IDAgMCAwLS42NDQgMi44NDRsLS45OTgtLjA2MnptMi4yMS01LjY4NmMuNjg3LS44NDggMS41MS0xLjU4IDIuNDM2LTIuMTY2bC41MjMuODUyYTkuMDQ4IDkuMDQ4IDAgMCAwLTIuMTg4IDEuOTVsLS43NzEtLjYzNnoiLz4KICAgIDxwYXRoIHN0cm9rZT0iaW5oZXJpdCIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgZD0iTTEzIDFsLTIuNSAyLjVMMTMgNiIvPgo8L3N5bWJvbD4KPHN5bWJvbCBpZD0iaWMtc2hhcGUtY2lyY2xlIiB2aWV3Qm94PSIwIDAgMzIgMzIiPgogICAgPGNpcmNsZSBjeD0iMTYiIGN5PSIxNiIgcj0iMTQuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJpbmhlcml0Ii8+Cjwvc3ltYm9sPgo8c3ltYm9sIGlkPSJpYy1zaGFwZS1yZWN0YW5nbGUiIHZpZXdCb3g9IjAgMCAzMiAzMiI+CiAgICA8cmVjdCB3aWR0aD0iMjciIGhlaWdodD0iMjciIHg9IjIuNSIgeT0iMi41IiBmaWxsPSJub25lIiBzdHJva2U9ImluaGVyaXQiIHJ4PSIxIi8+Cjwvc3ltYm9sPgo8c3ltYm9sIGlkPSJpYy1zaGFwZS10cmlhbmdsZSIgdmlld0JveD0iMCAwIDMyIDMyIj4KICAgIDxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTE2IDIuNWwxNS41IDI3SC41eiIvPgo8L3N5bWJvbD4KPHN5bWJvbCBpZD0iaWMtc2hhcGUiIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8cGF0aCBzdHJva2U9Im5vbmUiIGZpbGw9ImluaGVyaXQiIGQ9Ik0xNC43MDYgOEgyMWExIDEgMCAwIDEgMSAxdjEyYTEgMSAwIDAgMS0xIDFIOWExIDEgMCAwIDEtMS0xdi00aDF2NGgxMlY5aC01LjcwNmwtLjU4OC0xeiIvPgogICAgPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJpbmhlcml0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGQ9Ik04LjUgMS41bDcuNSAxM0gxeiIvPgo8L3N5bWJvbD4KPHN5bWJvbCBpZD0iaWMtdGV4dC1hbGlnbi1jZW50ZXIiIHZpZXdCb3g9IjAgMCAzMiAzMiI+CiAgICA8cGF0aCBzdHJva2U9Im5vbmUiIGZpbGw9Im5vbmUiIGQ9Ik0wIDBoMzJ2MzJIMHoiLz4KICAgIDxwYXRoIHN0cm9rZT0ibm9uZSIgZmlsbD0iaW5oZXJpdCIgZD0iTTIgNWgyOHYxSDJ6TTggMTJoMTZ2MUg4ek0yIDE5aDI4djFIMnpNOCAyNmgxNnYxSDh6Ii8+Cjwvc3ltYm9sPgo8c3ltYm9sIGlkPSJpYy10ZXh0LWFsaWduLWxlZnQiIHZpZXdCb3g9IjAgMCAzMiAzMiI+CiAgICA8cGF0aCBzdHJva2U9Im5vbmUiIGZpbGw9Im5vbmUiIGQ9Ik0wIDBoMzJ2MzJIMHoiLz4KICAgIDxwYXRoIHN0cm9rZT0ibm9uZSIgZmlsbD0iaW5oZXJpdCIgZD0iTTIgNWgyOHYxSDJ6TTIgMTJoMTZ2MUgyek0yIDE5aDI4djFIMnpNMiAyNmgxNnYxSDJ6Ii8+Cjwvc3ltYm9sPgo8c3ltYm9sIGlkPSJpYy10ZXh0LWFsaWduLXJpZ2h0IiB2aWV3Qm94PSIwIDAgMzIgMzIiPgogICAgPHBhdGggc3Ryb2tlPSJub25lIiBmaWxsPSJub25lIiBkPSJNMCAwaDMydjMySDB6Ii8+CiAgICA8cGF0aCBzdHJva2U9Im5vbmUiIGZpbGw9ImluaGVyaXQiIGQ9Ik0yIDVoMjh2MUgyek0xNCAxMmgxNnYxSDE0ek0yIDE5aDI4djFIMnpNMTQgMjZoMTZ2MUgxNHoiLz4KPC9zeW1ib2w+CjxzeW1ib2wgaWQ9ImljLXRleHQtYm9sZCIgdmlld0JveD0iMCAwIDMyIDMyIj4KICAgIDxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgzMnYzMkgweiIvPgogICAgPHBhdGggc3Ryb2tlPSJub25lIiBmaWxsPSJpbmhlcml0IiBkPSJNNyAyaDJ2Mkg3ek03IDI4aDJ2Mkg3eiIvPgogICAgPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSJpbmhlcml0IiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik05IDN2MTJoOWE2IDYgMCAxIDAgMC0xMkg5ek05IDE1djE0aDEwYTcgNyAwIDAgMCAwLTE0SDl6Ii8+Cjwvc3ltYm9sPgo8c3ltYm9sIGlkPSJpYy10ZXh0LWl0YWxpYyIgdmlld0JveD0iMCAwIDMyIDMyIj4KICAgIDxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgzMnYzMkgweiIvPgogICAgPHBhdGggc3Ryb2tlPSJub25lIiBmaWxsPSJpbmhlcml0IiBkPSJNMTUgMmg1djFoLTV6TTExIDI5aDV2MWgtNXpNMTcgM2gxbC00IDI2aC0xeiIvPgo8L3N5bWJvbD4KPHN5bWJvbCBpZD0iaWMtdGV4dC11bmRlcmxpbmUiIHZpZXdCb3g9IjAgMCAzMiAzMiI+CiAgICA8cGF0aCBzdHJva2U9Im5vbmUiIGZpbGw9Im5vbmUiIGQ9Ik0wIDBoMzJ2MzJIMHoiLz4KICAgIDxwYXRoIHN0cm9rZT0ibm9uZSIgZmlsbD0iaW5oZXJpdCIgZD0iTTggMnYxNGE4IDggMCAxIDAgMTYgMFYyaDF2MTRhOSA5IDAgMCAxLTE4IDBWMmgxek0zIDI5aDI2djFIM3oiLz4KICAgIDxwYXRoIHN0cm9rZT0ibm9uZSIgZmlsbD0iaW5oZXJpdCIgZD0iTTUgMmg1djFINXpNMjIgMmg1djFoLTV6Ii8+Cjwvc3ltYm9sPgo8c3ltYm9sIGlkPSJpYy10ZXh0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgPHBhdGggc3Ryb2tlPSJub25lIiBmaWxsPSJpbmhlcml0IiBkPSJNNCAzaDE1YTEgMSAwIDAgMSAxIDFIM2ExIDEgMCAwIDEgMS0xek0zIDRoMXYxSDN6TTE5IDRoMXYxaC0xeiIvPgogICAgPHBhdGggc3Ryb2tlPSJub25lIiBmaWxsPSJpbmhlcml0IiBkPSJNMTEgM2gxdjE4aC0xeiIvPgogICAgPHBhdGggc3Ryb2tlPSJub25lIiBmaWxsPSJpbmhlcml0IiBkPSJNMTAgMjBoM3YxaC0zeiIvPgo8L3N5bWJvbD4KPHN5bWJvbCBpZD0iaWMtdW5kbyIgdmlld0JveD0iMCAwIDI0IDI0Ij4KICAgIDxwYXRoIGQ9Ik0yNCAwSDB2MjRoMjR6IiBvcGFjaXR5PSIuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJub25lIiAvPgogICAgPHBhdGggc3Ryb2tlPSJub25lIiBmaWxsPSJpbmhlcml0IiBkPSJNMyA2aDEyYTYgNiAwIDEgMSAwIDEySDN2MWgxMmE3IDcgMCAwIDAgMC0xNEgzdjF6Ii8+CiAgICA8cGF0aCBmaWxsPSJub25lIiBzdHJva2U9ImluaGVyaXQiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiIGQ9Ik01IDNMMi41IDUuNSA1IDgiLz4KPC9zeW1ib2w+CjxzeW1ib2wgaWQ9ImljLXpvb20taW4iIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjI5IC0yOTApIHRyYW5zbGF0ZSgyMjkgMjkwKSI+CiAgICAgICAgPGNpcmNsZSBjeD0iMTAuNSIgY3k9IjEwLjUiIHI9IjkiIHN0cm9rZT0iaW5oZXJpdCIgZmlsbD0ibm9uZSIvPgogICAgICAgIDxwYXRoIGZpbGw9ImluaGVyaXQiIGQ9Ik0xOC44MjggMTUuODI4SDE5LjgyOFYyMi44MjhIMTguODI4eiIgdHJhbnNmb3JtPSJyb3RhdGUoLTQ1IDE5LjMyOCAxOS4zMjgpIi8+CiAgICAgICAgPHBhdGggZmlsbD0iaW5oZXJpdCIgZD0iTTcgMTBIMTRWMTFIN3oiLz4KICAgICAgICA8cGF0aCBmaWxsPSJpbmhlcml0IiBkPSJNMTAgN0gxMVYxNEgxMHoiLz4KICAgIDwvZz4KPC9zeW1ib2w+CjxzeW1ib2wgaWQ9ImljLXpvb20tb3V0IiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI2MyAtMjkwKSB0cmFuc2xhdGUoMjYzIDI5MCkiPgogICAgICAgIDxjaXJjbGUgY3g9IjEwLjUiIGN5PSIxMC41IiByPSI5IiBzdHJva2U9ImluaGVyaXQiIGZpbGw9Im5vbmUiLz4KICAgICAgICA8cGF0aCBmaWxsPSJpbmhlcml0IiBkPSJNMTguODI4IDE1LjgyOEgxOS44MjhWMjIuODI4SDE4LjgyOHoiIHRyYW5zZm9ybT0icm90YXRlKC00NSAxOS4zMjggMTkuMzI4KSIvPgogICAgICAgIDxwYXRoIGZpbGw9ImluaGVyaXQiIGQ9Ik03IDEwSDE0VjExSDd6Ii8+CiAgICA8L2c+Cjwvc3ltYm9sPgo8c3ltYm9sIGlkPSJpYy1oYW5kIiB2aWV3Qm94PSIwIDAgMjQgMjQiPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgICAgICA8cGF0aCBmaWxsPSJpbmhlcml0IiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik04LjY3MiAzLjM2YzEuMzI4IDAgMi4xMTQuNzggMi4yOSAxLjg2OWwuMDE0LjEwMS4wMjMuMDA2djEuMDQybC0uNjM4LS4xODVjLS4xODctLjA1NS0uMzIzLS4yMTEtLjM1NC0uMzk5TDEwIDUuNzEzYzAtLjgyNS0uNDItMS4zNTMtMS4zMjgtMS4zNTNDNy42OTUgNC4zNiA3IDUuMDQxIDcgNS43MTN2Ny45NDFjMCAuNDM5LS41MjQuNjY1LS44NDMuMzY0bC0xLjg2OC0xLjc2MWMtLjU5NS0uNTI4LTEuMzE2LS42MTctMS45MTgtLjIxNi0uNTIyLjM0OC0uNTYyIDEuMjAzLS4xOCAxLjhMNy43MzggMjJoMTEuMDEzbC4yODUtLjUxOGMxLjI0Ny0yLjMyNiAxLjg5Ny00LjI1OSAxLjk2LTUuNzg1bC4wMDQtLjIzOVY4LjAzNWMwLS42NTYtLjUtMS4xNy0xLTEuMTctLjUwMyAwLTEgLjQ1Ni0xIDEuMTcgMCAuMzMzLS4zMi41NzMtLjY0LjQ4TDE4IDguNDFWNy4zNjhsLjA4Ni4wMjYuMDQyLS4xMzZjLjI3OS0uODA1Ljk3OC0xLjMzMiAxLjczOC0xLjM4OEwyMCA1Ljg2NWMxLjA1NyAwIDIgLjk2NyAyIDIuMTd2Ny40MjNjMCAxLjkyOS0uODQ1IDQuMzUyLTIuNTIxIDcuMjktLjA5LjE1Ni0uMjU1LjI1Mi0uNDM1LjI1Mkg3LjQ3NGMtLjE2NiAwLS4zMjEtLjA4Mi0uNDE0LS4yMTlsLTUuNzA0LTguMzljLS42NTMtMS4wMTktLjU4NC0yLjQ4Ni40Ni0zLjE4MiAxLS42NjYgMi4yMTYtLjUxNiAzLjE0OC4zMUw2IDEyLjQ5NVY1LjcxM2MwLTEuMTggMS4wNTgtMi4yNjMgMi40OS0yLjM0OHoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yOTcgLTI5MCkgdHJhbnNsYXRlKDI5NyAyOTApIi8+CiAgICAgICAgPHBhdGggZmlsbD0iaW5oZXJpdCIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNMTIuNSAxLjVjMS4zMjUgMCAyLjQxIDEuMDMyIDIuNDk1IDIuMzM2TDE1IDR2Ny4yMmgtMVY0YzAtLjgyOC0uNjcyLTEuNS0xLjUtMS41LS43OCAwLTEuNDIuNTk1LTEuNDkzIDEuMzU2TDExIDR2Ny4yMmgtMVY0YzAtMS4zOCAxLjEyLTIuNSAyLjUtMi41eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI5NyAtMjkwKSB0cmFuc2xhdGUoMjk3IDI5MCkiLz4KICAgICAgICA8cGF0aCBmaWxsPSJpbmhlcml0IiBmaWxsLXJ1bGU9Im5vbnplcm8iIGQ9Ik0xNi41IDMuNWMxLjMyNSAwIDIuNDEgMS4wMzIgMi40OTUgMi4zMzZMMTkgNnY2LjNoLTFWNmMwLS44MjgtLjY3Mi0xLjUtMS41LTEuNS0uNzggMC0xLjQyLjU5NS0xLjQ5MyAxLjM1NkwxNSA2djIuNDRoLTFWNmMwLTEuMzggMS4xMi0yLjUgMi41LTIuNXoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yOTcgLTI5MCkgdHJhbnNsYXRlKDI5NyAyOTApIi8+CiAgICA8L2c+Cjwvc3ltYm9sPgo8L2RlZnM+Cjwvc3ZnPgo="; +/***/ }), -Object.defineProperty(exports, "__esModule", { - value: true -}); +/***/ 624: +/***/ (function(module) { -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); +"use strict"; +module.exports = __WEBPACK_EXTERNAL_MODULE__624__; -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); +/***/ }), -var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); +/***/ 4858: +/***/ (function(module) { -var _colorpicker = __webpack_require__(/*! @/ui/tools/colorpicker */ "./src/js/ui/tools/colorpicker.js"); +"use strict"; +module.exports = __WEBPACK_EXTERNAL_MODULE__4858__; -var _colorpicker2 = _interopRequireDefault(_colorpicker); +/***/ }), -var _range = __webpack_require__(/*! @/ui/tools/range */ "./src/js/ui/tools/range.js"); +/***/ 4960: +/***/ (function() { -var _range2 = _interopRequireDefault(_range); +/* (ignored) */ -var _submenuBase = __webpack_require__(/*! @/ui/submenuBase */ "./src/js/ui/submenuBase.js"); +/***/ }), -var _submenuBase2 = _interopRequireDefault(_submenuBase); +/***/ 6759: +/***/ (function() { -var _shape = __webpack_require__(/*! @/ui/template/submenu/shape */ "./src/js/ui/template/submenu/shape.js"); +/* (ignored) */ -var _shape2 = _interopRequireDefault(_shape); +/***/ }), -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); +/***/ 6272: +/***/ (function() { -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); +/* (ignored) */ -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +/***/ }) -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } +/******/ }); +/************************************************************************/ +/******/ // The module cache +/******/ var __webpack_module_cache__ = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ // Check if module is in cache +/******/ var cachedModule = __webpack_module_cache__[moduleId]; +/******/ if (cachedModule !== undefined) { +/******/ return cachedModule.exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = __webpack_module_cache__[moduleId] = { +/******/ // no module.id needed +/******/ // no module.loaded needed +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/************************************************************************/ +/******/ /* webpack/runtime/compat get default export */ +/******/ !function() { +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function() { return module['default']; } : +/******/ function() { return module; }; +/******/ __webpack_require__.d(getter, { a: getter }); +/******/ return getter; +/******/ }; +/******/ }(); +/******/ +/******/ /* webpack/runtime/define property getters */ +/******/ !function() { +/******/ // define getter functions for harmony exports +/******/ __webpack_require__.d = function(exports, definition) { +/******/ for(var key in definition) { +/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { +/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); +/******/ } +/******/ } +/******/ }; +/******/ }(); +/******/ +/******/ /* webpack/runtime/global */ +/******/ !function() { +/******/ __webpack_require__.g = (function() { +/******/ if (typeof globalThis === 'object') return globalThis; +/******/ try { +/******/ return this || new Function('return this')(); +/******/ } catch (e) { +/******/ if (typeof window === 'object') return window; +/******/ } +/******/ })(); +/******/ }(); +/******/ +/******/ /* webpack/runtime/hasOwnProperty shorthand */ +/******/ !function() { +/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); } +/******/ }(); +/******/ +/************************************************************************/ +var __webpack_exports__ = {}; +// This entry need to be wrapped in an IIFE because it need to be in strict mode. +!function() { +"use strict"; -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } +// EXPORTS +__webpack_require__.d(__webpack_exports__, { + "default": function() { return /* binding */ src; } +}); -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } +// UNUSED EXPORTS: ImageEditor -var SHAPE_DEFAULT_OPTION = { - stroke: '#ffbb3b', - fill: '', - strokeWidth: 3 -}; +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js-stable/instance/trim.js +var trim = __webpack_require__(9131); +var trim_default = /*#__PURE__*/__webpack_require__.n(trim); +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js-stable/instance/index-of.js +var index_of = __webpack_require__(1899); +var index_of_default = /*#__PURE__*/__webpack_require__.n(index_of); +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js-stable/instance/splice.js +var splice = __webpack_require__(6562); +var splice_default = /*#__PURE__*/__webpack_require__.n(splice); +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js-stable/object/define-property.js +var define_property = __webpack_require__(1734); +var define_property_default = /*#__PURE__*/__webpack_require__.n(define_property); +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js-stable/instance/slice.js +var slice = __webpack_require__(8005); +var slice_default = /*#__PURE__*/__webpack_require__.n(slice); +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js-stable/object/create.js +var create = __webpack_require__(6065); +var create_default = /*#__PURE__*/__webpack_require__.n(create); +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js-stable/set-timeout.js +var set_timeout = __webpack_require__(4496); +var set_timeout_default = /*#__PURE__*/__webpack_require__.n(set_timeout); +;// CONCATENATED MODULE: ./src/js/polyfill.js -/** - * Shape ui class - * @class - * @ignore - */ -var Shape = function (_Submenu) { - _inherits(Shape, _Submenu); - function Shape(subMenuElement, _ref) { - var locale = _ref.locale, - makeSvgIcon = _ref.makeSvgIcon, - menuBarPosition = _ref.menuBarPosition, - usageStatistics = _ref.usageStatistics; - _classCallCheck(this, Shape); - var _this = _possibleConstructorReturn(this, (Shape.__proto__ || Object.getPrototypeOf(Shape)).call(this, subMenuElement, { - locale: locale, - name: 'shape', - makeSvgIcon: makeSvgIcon, - menuBarPosition: menuBarPosition, - templateHtml: _shape2.default, - usageStatistics: usageStatistics - })); - _this.type = null; - _this.options = SHAPE_DEFAULT_OPTION; - _this._els = { - shapeSelectButton: _this.selector('.tie-shape-button'), - shapeColorButton: _this.selector('.tie-shape-color-button'), - strokeRange: new _range2.default({ - slider: _this.selector('.tie-stroke-range'), - input: _this.selector('.tie-stroke-range-value') - }, _consts.defaultShapeStrokeValues), - fillColorpicker: new _colorpicker2.default(_this.selector('.tie-color-fill'), '', _this.toggleDirection, _this.usageStatistics), - strokeColorpicker: new _colorpicker2.default(_this.selector('.tie-color-stroke'), '#ffbb3b', _this.toggleDirection, _this.usageStatistics) - }; - _this.colorPickerControls.push(_this._els.fillColorpicker); - _this.colorPickerControls.push(_this._els.strokeColorpicker); +/* eslint-disable */ +// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest +if (!Element.prototype.matches) { + Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; +} - _this.colorPickerInputBoxes = []; - _this.colorPickerInputBoxes.push(_this._els.fillColorpicker.colorpickerElement.querySelector(_consts.selectorNames.COLOR_PICKER_INPUT_BOX)); - _this.colorPickerInputBoxes.push(_this._els.strokeColorpicker.colorpickerElement.querySelector(_consts.selectorNames.COLOR_PICKER_INPUT_BOX)); - return _this; - } +if (!Element.prototype.closest) { + Element.prototype.closest = function (s) { + var el = this; - /** - * Destroys the instance. - */ + do { + if (Element.prototype.matches.call(el, s)) return el; + el = el.parentElement || el.parentNode; + } while (el !== null && el.nodeType === 1); + return null; + }; +} +/* + * classList.js: Cross-browser full element.classList implementation. + * 1.2.20171210 + * + * By Eli Grey, http://eligrey.com + * License: Dedicated to the public domain. + * See https://github.com/eligrey/classList.js/blob/master/LICENSE.md + */ - _createClass(Shape, [{ - key: 'destroy', - value: function destroy() { - this._removeEvent(); - this._els.strokeRange.destroy(); - this._els.fillColorpicker.destroy(); - this._els.strokeColorpicker.destroy(); +/*global self, document, DOMException */ - (0, _util.assignmentForDestroy)(this); - } +/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */ - /** - * Add event for shape - * @param {Object} actions - actions for shape - * @param {Function} actions.changeShape - change shape mode - * @param {Function} actions.setDrawingShape - set drawing shape - */ - }, { - key: 'addEvent', - value: function addEvent(actions) { - var _this2 = this; +if ('document' in self) { + // Full polyfill for browsers with no classList support + // Including IE < Edge missing SVGElement.classList + if (!('classList' in document.createElement('_')) || document.createElementNS && !('classList' in document.createElementNS('http://www.w3.org/2000/svg', 'g'))) { + (function (view) { + 'use strict'; - this.eventHandler.shapeTypeSelected = this._changeShapeHandler.bind(this); - this.actions = actions; + if (!('Element' in view)) return; - this._els.shapeSelectButton.addEventListener('click', this.eventHandler.shapeTypeSelected); - this._els.strokeRange.on('change', this._changeStrokeRangeHandler.bind(this)); - this._els.fillColorpicker.on('change', this._changeFillColorHandler.bind(this)); - this._els.strokeColorpicker.on('change', this._changeStrokeColorHandler.bind(this)); - this._els.fillColorpicker.on('changeShow', this.colorPickerChangeShow.bind(this)); - this._els.strokeColorpicker.on('changeShow', this.colorPickerChangeShow.bind(this)); - - _tuiCodeSnippet2.default.forEachArray(this.colorPickerInputBoxes, function (inputBox) { - inputBox.addEventListener(_consts.eventNames.FOCUS, _this2._onStartEditingInputBox.bind(_this2)); - inputBox.addEventListener(_consts.eventNames.BLUR, _this2._onStopEditingInputBox.bind(_this2)); - }, this); - } + var classListProp = 'classList', + protoProp = 'prototype', + elemCtrProto = view.Element[protoProp], + objCtr = Object, + strTrim = trim_default()(String[protoProp]) || function () { + return this.replace(/^\s+|\s+$/g, ''); + }, + arrIndexOf = index_of_default()(Array[protoProp]) || function (item) { + var i = 0, + len = this.length; - /** - * Remove event - * @private - */ + for (; i < len; i++) { + if (i in this && this[i] === item) { + return i; + } + } - }, { - key: '_removeEvent', - value: function _removeEvent() { - var _this3 = this; + return -1; + }, + // Vendors: please allow content code to instantiate DOMExceptions + DOMEx = function DOMEx(type, message) { + this.name = type; + this.code = DOMException[type]; + this.message = message; + }, + checkTokenAndGetIndex = function checkTokenAndGetIndex(classList, token) { + if (token === '') { + throw new DOMEx('SYNTAX_ERR', 'The token must not be empty.'); + } - this._els.shapeSelectButton.removeEventListener('click', this.eventHandler.shapeTypeSelected); - this._els.strokeRange.off(); - this._els.fillColorpicker.off(); - this._els.strokeColorpicker.off(); + if (/\s/.test(token)) { + throw new DOMEx('INVALID_CHARACTER_ERR', 'The token must not contain space characters.'); + } - _tuiCodeSnippet2.default.forEachArray(this.colorPickerInputBoxes, function (inputBox) { - inputBox.removeEventListener(_consts.eventNames.FOCUS, _this3._onStartEditingInputBox.bind(_this3)); - inputBox.removeEventListener(_consts.eventNames.BLUR, _this3._onStopEditingInputBox.bind(_this3)); - }, this); - } + return arrIndexOf.call(classList, token); + }, + ClassList = function ClassList(elem) { + var trimmedClasses = strTrim.call(elem.getAttribute('class') || ''), + classes = trimmedClasses ? trimmedClasses.split(/\s+/) : [], + i = 0, + len = classes.length; - /** - * Set Shape status - * @param {Object} options - options of shape status - * @param {string} strokeWidth - stroke width - * @param {string} strokeColor - stroke color - * @param {string} fillColor - fill color - */ + for (; i < len; i++) { + this.push(classes[i]); + } - }, { - key: 'setShapeStatus', - value: function setShapeStatus(_ref2) { - var strokeWidth = _ref2.strokeWidth, - strokeColor = _ref2.strokeColor, - fillColor = _ref2.fillColor; + this._updateClassName = function () { + elem.setAttribute('class', this.toString()); + }; + }, + classListProto = ClassList[protoProp] = [], + classListGetter = function classListGetter() { + return new ClassList(this); + }; // Most DOMException implementations don't allow calling DOMException's toString() + // on non-DOMExceptions. Error's toString() is sufficient here. - this._els.strokeRange.value = strokeWidth; - this._els.strokeColorpicker.color = strokeColor; - this._els.fillColorpicker.color = fillColor; - this.options.stroke = strokeColor; - this.options.fill = fillColor; - this.options.strokeWidth = strokeWidth; - this.actions.setDrawingShape(this.type, { strokeWidth: strokeWidth }); - } + DOMEx[protoProp] = Error[protoProp]; - /** - * Executed when the menu starts. - */ + classListProto.item = function (i) { + return this[i] || null; + }; - }, { - key: 'changeStartMode', - value: function changeStartMode() { - this.actions.stopDrawingMode(); - } + classListProto.contains = function (token) { + return ~checkTokenAndGetIndex(this, token + ''); + }; - /** - * Returns the menu to its default state. - */ + classListProto.add = function () { + var tokens = arguments, + i = 0, + l = tokens.length, + token, + updated = false; - }, { - key: 'changeStandbyMode', - value: function changeStandbyMode() { - this.type = null; - this.actions.changeSelectableAll(true); - this._els.shapeSelectButton.classList.remove('circle'); - this._els.shapeSelectButton.classList.remove('triangle'); - this._els.shapeSelectButton.classList.remove('rect'); - } + do { + token = tokens[i] + ''; - /** - * set range stroke max value - * @param {number} maxValue - expect max value for change - */ + if (!~checkTokenAndGetIndex(this, token)) { + this.push(token); + updated = true; + } + } while (++i < l); - }, { - key: 'setMaxStrokeValue', - value: function setMaxStrokeValue(maxValue) { - var strokeMaxValue = maxValue; - if (strokeMaxValue <= 0) { - strokeMaxValue = _consts.defaultShapeStrokeValues.max; - } - this._els.strokeRange.max = strokeMaxValue; - } + if (updated) { + this._updateClassName(); + } + }; - /** - * Set stroke value - * @param {number} value - expect value for strokeRange change - */ + classListProto.remove = function () { + var tokens = arguments, + i = 0, + l = tokens.length, + token, + updated = false, + index; - }, { - key: 'setStrokeValue', - value: function setStrokeValue(value) { - this._els.strokeRange.value = value; - this._els.strokeRange.trigger('change'); - } + do { + token = tokens[i] + ''; + index = checkTokenAndGetIndex(this, token); - /** - * Get stroke value - * @returns {number} - stroke range value - */ + while (~index) { + var _context; - }, { - key: 'getStrokeValue', - value: function getStrokeValue() { - return this._els.strokeRange.value; - } + splice_default()(_context = this).call(_context, index, 1); - /** - * Change icon color - * @param {object} event - add button event object - * @private - */ + updated = true; + index = checkTokenAndGetIndex(this, token); + } + } while (++i < l); - }, { - key: '_changeShapeHandler', - value: function _changeShapeHandler(event) { - var button = event.target.closest('.tui-image-editor-button'); - if (button) { - this.actions.stopDrawingMode(); - this.actions.discardSelection(); - var shapeType = this.getButtonType(button, ['circle', 'triangle', 'rect']); + if (updated) { + this._updateClassName(); + } + }; - if (this.type === shapeType) { - this.changeStandbyMode(); + classListProto.toggle = function (token, force) { + var result = this.contains(token), + method = result ? force !== true && 'remove' : force !== false && 'add'; - return; + if (method) { + this[method](token); } - this.changeStandbyMode(); - this.type = shapeType; - event.currentTarget.classList.add(shapeType); - this.actions.changeSelectableAll(false); - this.actions.modeChange('shape'); - } - } - /** - * Change stroke range - * @param {number} value - stroke range value - * @param {boolean} isLast - Is last change - * @private - */ + if (force === true || force === false) { + return force; + } else { + return !result; + } + }; - }, { - key: '_changeStrokeRangeHandler', - value: function _changeStrokeRangeHandler(value, isLast) { - this.options.strokeWidth = (0, _util.toInteger)(value); - this.actions.changeShape({ - strokeWidth: value - }, !isLast); + classListProto.replace = function (token, replacement_token) { + var index = checkTokenAndGetIndex(token + ''); - this.actions.setDrawingShape(this.type, this.options); - } + if (~index) { + var _context2; - /** - * Change shape color - * @param {string} color - fill color - * @private - */ + splice_default()(_context2 = this).call(_context2, index, 1, replacement_token); - }, { - key: '_changeFillColorHandler', - value: function _changeFillColorHandler(color) { - color = color || 'transparent'; - this.options.fill = color; - this.actions.changeShape({ - fill: color - }); - } + this._updateClassName(); + } + }; - /** - * Change shape stroke color - * @param {string} color - fill color - * @private - */ + classListProto.toString = function () { + return this.join(' '); + }; - }, { - key: '_changeStrokeColorHandler', - value: function _changeStrokeColorHandler(color) { - color = color || 'transparent'; - this.options.stroke = color; - this.actions.changeShape({ - stroke: color - }); - } - }]); + if ((define_property_default())) { + var classListPropDesc = { + get: classListGetter, + enumerable: true, + configurable: true + }; - return Shape; -}(_submenuBase2.default); + try { + define_property_default()(elemCtrProto, classListProp, classListPropDesc); + } catch (ex) { + // IE 8 doesn't support enumerable:true + // adding undefined to fight this issue https://github.com/eligrey/classList.js/issues/36 + // modernie IE8-MSW7 machine has IE8 8.0.6001.18702 and is affected + if (ex.number === undefined || ex.number === -0x7ff5ec54) { + classListPropDesc.enumerable = false; -exports.default = Shape; + define_property_default()(elemCtrProto, classListProp, classListPropDesc); + } + } + } else if (objCtr[protoProp].__defineGetter__) { + elemCtrProto.__defineGetter__(classListProp, classListGetter); + } + })(self); + } // There is full or partial native classList support, so just check if we need + // to normalize the add/remove and toggle APIs. -/***/ }), -/***/ "./src/js/ui/submenuBase.js": -/*!**********************************!*\ - !*** ./src/js/ui/submenuBase.js ***! - \**********************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + (function () { + 'use strict'; -"use strict"; + var testElement = document.createElement('_'); + testElement.classList.add('c1', 'c2'); // Polyfill for IE 10/11 and Firefox <26, where classList.add and + // classList.remove exist but support only one argument at a time. + if (!testElement.classList.contains('c2')) { + var createMethod = function createMethod(method) { + var original = DOMTokenList.prototype[method]; -Object.defineProperty(exports, "__esModule", { - value: true -}); + DOMTokenList.prototype[method] = function (token) { + var i, + len = arguments.length; -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + for (i = 0; i < len; i++) { + token = arguments[i]; + original.call(this, token); + } + }; + }; -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); + createMethod('add'); + createMethod('remove'); + } -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + testElement.classList.toggle('c3', false); // Polyfill for IE 10 and Firefox <24, where classList.toggle does not + // support the second argument. -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + if (testElement.classList.contains('c3')) { + var _toggle = DOMTokenList.prototype.toggle; -/** - * Submenu Base Class - * @class - * @ignore - */ -var Submenu = function () { - /** - * @param {HTMLElement} subMenuElement - submenu dom element - * @param {Locale} locale - translate text - * @param {string} name - name of sub menu - * @param {Object} iconStyle - style of icon - * @param {string} menuBarPosition - position of menu - * @param {*} templateHtml - template for SubMenuElement - * @param {boolean} [usageStatistics=false] - template for SubMenuElement - */ - function Submenu(subMenuElement, _ref) { - var locale = _ref.locale, - name = _ref.name, - makeSvgIcon = _ref.makeSvgIcon, - menuBarPosition = _ref.menuBarPosition, - templateHtml = _ref.templateHtml, - usageStatistics = _ref.usageStatistics; - - _classCallCheck(this, Submenu); - - this.subMenuElement = subMenuElement; - this.menuBarPosition = menuBarPosition; - this.toggleDirection = menuBarPosition === 'top' ? 'down' : 'up'; - this.colorPickerControls = []; - this.usageStatistics = usageStatistics; - this.eventHandler = {}; - this._makeSubMenuElement({ - locale: locale, - name: name, - makeSvgIcon: makeSvgIcon, - templateHtml: templateHtml - }); - } - - /** - * editor dom ui query selector - * @param {string} selectName - query selector string name - * @returns {HTMLElement} - */ - - - _createClass(Submenu, [{ - key: 'selector', - value: function selector(selectName) { - return this.subMenuElement.querySelector(selectName); - } - - /** - * change show state change for colorpicker instance - * @param {Colorpicker} occurredControl - target Colorpicker Instance - */ - - }, { - key: 'colorPickerChangeShow', - value: function colorPickerChangeShow(occurredControl) { - this.colorPickerControls.forEach(function (pickerControl) { - if (occurredControl !== pickerControl) { - pickerControl.hide(); + DOMTokenList.prototype.toggle = function (token, force) { + if (1 in arguments && !this.contains(token) === !force) { + return force; + } else { + return _toggle.call(this, token); } - }); - } - - /** - * Get button type - * @param {HTMLElement} button - event target element - * @param {array} buttonNames - Array of button names - * @returns {string} - button type - */ + }; + } // replace() polyfill - }, { - key: 'getButtonType', - value: function getButtonType(button, buttonNames) { - return button.className.match(RegExp('(' + buttonNames.join('|') + ')'))[0]; - } - /** - * Get button type - * @param {HTMLElement} target - event target element - * @param {string} removeClass - remove class name - * @param {string} addClass - add class name - */ + if (!('replace' in document.createElement('_').classList)) { + DOMTokenList.prototype.replace = function (token, replacement_token) { + var tokens = this.toString().split(' '), + index = index_of_default()(tokens).call(tokens, token + ''); - }, { - key: 'changeClass', - value: function changeClass(target, removeClass, addClass) { - target.classList.remove(removeClass); - target.classList.add(addClass); + if (~index) { + tokens = slice_default()(tokens).call(tokens, index); + this.remove.apply(this, tokens); + this.add(replacement_token); + this.add.apply(this, slice_default()(tokens).call(tokens, 1)); + } + }; } - /** - * Interface method whose implementation is optional. - * Returns the menu to its default state. - */ + testElement = null; + })(); +} +/*! + * @copyright Copyright (c) 2017 IcoMoon.io + * @license Licensed under MIT license + * See https://github.com/Keyamoon/svgxuse + * @version 1.2.6 + */ - }, { - key: 'changeStandbyMode', - value: function changeStandbyMode() {} +/*jslint browser: true */ - /** - * Interface method whose implementation is optional. - * Executed when the menu starts. - */ +/*global XDomainRequest, MutationObserver, window */ - }, { - key: 'changeStartMode', - value: function changeStartMode() {} - /** - * Make submenu dom element - * @param {Locale} locale - translate text - * @param {string} name - submenu name - * @param {Object} iconStyle - icon style - * @param {*} templateHtml - template for SubMenuElement - * @private - */ +(function () { + 'use strict'; - }, { - key: '_makeSubMenuElement', - value: function _makeSubMenuElement(_ref2) { - var locale = _ref2.locale, - name = _ref2.name, - iconStyle = _ref2.iconStyle, - makeSvgIcon = _ref2.makeSvgIcon, - templateHtml = _ref2.templateHtml; + if (typeof window !== 'undefined' && window.addEventListener) { + var cache = create_default()(null); // holds xhr objects to prevent multiple requests - var iconSubMenu = document.createElement('div'); - iconSubMenu.className = 'tui-image-editor-menu-' + name; - iconSubMenu.innerHTML = templateHtml({ - locale: locale, - iconStyle: iconStyle, - makeSvgIcon: makeSvgIcon - }); - this.subMenuElement.appendChild(iconSubMenu); - } - }, { - key: '_onStartEditingInputBox', - value: function _onStartEditingInputBox() { - this.fire(_consts.eventNames.INPUT_BOX_EDITING_STARTED); - } - }, { - key: '_onStopEditingInputBox', - value: function _onStopEditingInputBox() { - this.fire(_consts.eventNames.INPUT_BOX_EDITING_STOPPED); - } - }]); + var checkUseElems; + var tid; // timeout id - return Submenu; -}(); + var debouncedCheck = function debouncedCheck() { + clearTimeout(tid); + tid = set_timeout_default()(checkUseElems, 100); + }; -_tuiCodeSnippet.CustomEvents.mixin(Submenu); + var unobserveChanges = function unobserveChanges() { + return; + }; -exports.default = Submenu; + var observeChanges = function observeChanges() { + var observer; + window.addEventListener('resize', debouncedCheck, false); + window.addEventListener('orientationchange', debouncedCheck, false); -/***/ }), + if (window.MutationObserver) { + observer = new MutationObserver(debouncedCheck); + observer.observe(document.documentElement, { + childList: true, + subtree: true, + attributes: true + }); -/***/ "./src/js/ui/template/controls.js": -/*!****************************************!*\ - !*** ./src/js/ui/template/controls.js ***! - \****************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + unobserveChanges = function unobserveChanges() { + try { + observer.disconnect(); + window.removeEventListener('resize', debouncedCheck, false); + window.removeEventListener('orientationchange', debouncedCheck, false); + } catch (ignore) {} + }; + } else { + document.documentElement.addEventListener('DOMSubtreeModified', debouncedCheck, false); -"use strict"; + unobserveChanges = function unobserveChanges() { + document.documentElement.removeEventListener('DOMSubtreeModified', debouncedCheck, false); + window.removeEventListener('resize', debouncedCheck, false); + window.removeEventListener('orientationchange', debouncedCheck, false); + }; + } + }; + var createRequest = function createRequest(url) { + // In IE 9, cross origin requests can only be sent using XDomainRequest. + // XDomainRequest would fail if CORS headers are not set. + // Therefore, XDomainRequest should only be used with cross origin requests. + function getOrigin(loc) { + var a; -Object.defineProperty(exports, "__esModule", { - value: true -}); + if (loc.protocol !== undefined) { + a = loc; + } else { + a = document.createElement('a'); + a.href = loc; + } -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + return a.protocol.replace(/:/g, '') + a.host; + } -exports.default = function (_ref) { - var locale = _ref.locale, - biImage = _ref.biImage, - loadButtonStyle = _ref.loadButtonStyle, - downloadButtonStyle = _ref.downloadButtonStyle, - menuBarPosition = _ref.menuBarPosition; - return '\n
    \n
    \n \n
      \n\n
      \n
      \n ' + locale.localize('Load') + '\n \n
      \n \n
      \n
      \n'; -}; + var Request; + var origin; + var origin2; -/***/ }), + if (window.XMLHttpRequest) { + Request = new XMLHttpRequest(); + origin = getOrigin(location); + origin2 = getOrigin(url); -/***/ "./src/js/ui/template/mainContainer.js": -/*!*********************************************!*\ - !*** ./src/js/ui/template/mainContainer.js ***! - \*********************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + if (Request.withCredentials === undefined && origin2 !== '' && origin2 !== origin) { + Request = XDomainRequest || undefined; + } else { + Request = XMLHttpRequest; + } + } -"use strict"; + return Request; + }; + var xlinkNS = 'http://www.w3.org/1999/xlink'; -Object.defineProperty(exports, "__esModule", { - value: true -}); + checkUseElems = function checkUseElems() { + var base; + var bcr; + var fallback = ''; // optional fallback URL in case no base path to SVG file was given and no symbol definition was found. -exports.default = function (_ref) { - var locale = _ref.locale, - biImage = _ref.biImage, - commonStyle = _ref.commonStyle, - headerStyle = _ref.headerStyle, - loadButtonStyle = _ref.loadButtonStyle, - downloadButtonStyle = _ref.downloadButtonStyle, - submenuStyle = _ref.submenuStyle; - return '\n
      \n
      \n \n
      \n
      \n ' + locale.localize('Load') + '\n \n
      \n \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n'; -}; + var hash; + var href; + var i; + var inProgressCount = 0; + var isHidden; + var Request; + var url; + var uses; + var xhr; -/***/ }), + function observeIfDone() { + // If done with making changes, start watching for chagnes in DOM again + inProgressCount -= 1; -/***/ "./src/js/ui/template/style.js": -/*!*************************************!*\ - !*** ./src/js/ui/template/style.js ***! - \*************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + if (inProgressCount === 0) { + // if all xhrs were resolved + unobserveChanges(); // make sure to remove old handlers -"use strict"; + observeChanges(); // watch for changes to DOM + } + } + function attrUpdateFunc(spec) { + return function () { + if (cache[spec.base] !== true) { + spec.useEl.setAttributeNS(xlinkNS, 'xlink:href', '#' + spec.hash); -Object.defineProperty(exports, "__esModule", { - value: true -}); + if (spec.useEl.hasAttribute('href')) { + spec.useEl.setAttribute('href', '#' + spec.hash); + } + } + }; + } -exports.default = function (_ref) { - var subMenuLabelActive = _ref.subMenuLabelActive, - subMenuLabelNormal = _ref.subMenuLabelNormal, - subMenuRangeTitle = _ref.subMenuRangeTitle, - submenuPartitionVertical = _ref.submenuPartitionVertical, - submenuPartitionHorizontal = _ref.submenuPartitionHorizontal, - submenuCheckbox = _ref.submenuCheckbox, - submenuRangePointer = _ref.submenuRangePointer, - submenuRangeValue = _ref.submenuRangeValue, - submenuColorpickerTitle = _ref.submenuColorpickerTitle, - submenuColorpickerButton = _ref.submenuColorpickerButton, - submenuRangeBar = _ref.submenuRangeBar, - submenuRangeSubbar = _ref.submenuRangeSubbar, - submenuDisabledRangePointer = _ref.submenuDisabledRangePointer, - submenuDisabledRangeBar = _ref.submenuDisabledRangeBar, - submenuDisabledRangeSubbar = _ref.submenuDisabledRangeSubbar, - submenuIconSize = _ref.submenuIconSize, - menuIconSize = _ref.menuIconSize, - biSize = _ref.biSize, - menuIconStyle = _ref.menuIconStyle, - submenuIconStyle = _ref.submenuIconStyle; - return "\n .tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype=\"icon-bubble\"] label,\n .tie-icon-add-button.icon-heart .tui-image-editor-button[data-icontype=\"icon-heart\"] label,\n .tie-icon-add-button.icon-location .tui-image-editor-button[data-icontype=\"icon-location\"] label,\n .tie-icon-add-button.icon-polygon .tui-image-editor-button[data-icontype=\"icon-polygon\"] label,\n .tie-icon-add-button.icon-star .tui-image-editor-button[data-icontype=\"icon-star\"] label,\n .tie-icon-add-button.icon-star-2 .tui-image-editor-button[data-icontype=\"icon-star-2\"] label,\n .tie-icon-add-button.icon-arrow-3 .tui-image-editor-button[data-icontype=\"icon-arrow-3\"] label,\n .tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype=\"icon-arrow-2\"] label,\n .tie-icon-add-button.icon-arrow .tui-image-editor-button[data-icontype=\"icon-arrow\"] label,\n .tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype=\"icon-bubble\"] label,\n .tie-draw-line-select-button.line .tui-image-editor-button.line label,\n .tie-draw-line-select-button.free .tui-image-editor-button.free label,\n .tie-flip-button.flipX .tui-image-editor-button.flipX label,\n .tie-flip-button.flipY .tui-image-editor-button.flipY label,\n .tie-flip-button.resetFlip .tui-image-editor-button.resetFlip label,\n .tie-crop-button .tui-image-editor-button.apply.active label,\n .tie-crop-preset-button .tui-image-editor-button.preset.active label,\n .tie-resize-button .tui-image-editor-button.apply.active label,\n .tie-resize-preset-button .tui-image-editor-button.preset.active label,\n .tie-shape-button.rect .tui-image-editor-button.rect label,\n .tie-shape-button.circle .tui-image-editor-button.circle label,\n .tie-shape-button.triangle .tui-image-editor-button.triangle label,\n .tie-text-effect-button .tui-image-editor-button.active label,\n .tie-text-align-button.tie-text-align-left .tui-image-editor-button.left label,\n .tie-text-align-button.tie-text-align-center .tui-image-editor-button.center label,\n .tie-text-align-button.tie-text-align-right .tui-image-editor-button.right label,\n .tie-mask-apply.apply.active .tui-image-editor-button.apply label,\n .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover > label,\n .tui-image-editor-container .tui-image-editor-checkbox label > span {\n " + subMenuLabelActive + "\n }\n .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button > label,\n .tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label,\n .tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label > span {\n " + subMenuLabelNormal + "\n }\n .tui-image-editor-container .tui-image-editor-range-wrap label > span {\n " + subMenuRangeTitle + "\n }\n .tui-image-editor-container .tui-image-editor-partition > div {\n " + submenuPartitionVertical + "\n }\n .tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition > div,\n .tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition > div {\n " + submenuPartitionHorizontal + "\n }\n .tui-image-editor-container .tui-image-editor-checkbox label > span:before {\n " + submenuCheckbox + "\n }\n .tui-image-editor-container .tui-image-editor-checkbox label > input:checked + span:before {\n border: 0;\n }\n .tui-image-editor-container .tui-image-editor-virtual-range-pointer {\n " + submenuRangePointer + "\n }\n .tui-image-editor-container .tui-image-editor-virtual-range-bar {\n " + submenuRangeBar + "\n }\n .tui-image-editor-container .tui-image-editor-virtual-range-subbar {\n " + submenuRangeSubbar + "\n }\n .tui-image-editor-container .tui-image-editor-disabled .tui-image-editor-virtual-range-pointer {\n " + submenuDisabledRangePointer + "\n }\n .tui-image-editor-container .tui-image-editor-disabled .tui-image-editor-virtual-range-subbar {\n " + submenuDisabledRangeSubbar + "\n }\n .tui-image-editor-container .tui-image-editor-disabled .tui-image-editor-virtual-range-bar {\n " + submenuDisabledRangeBar + "\n }\n .tui-image-editor-container .tui-image-editor-range-value {\n " + submenuRangeValue + "\n }\n .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button .color-picker-value + label {\n " + submenuColorpickerTitle + "\n }\n .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button .color-picker-value {\n " + submenuColorpickerButton + "\n }\n .tui-image-editor-container .svg_ic-menu {\n " + menuIconSize + "\n }\n .tui-image-editor-container .svg_ic-submenu {\n " + submenuIconSize + "\n }\n .tui-image-editor-container .tui-image-editor-controls-logo > img,\n .tui-image-editor-container .tui-image-editor-header-logo > img {\n " + biSize + "\n }\n .tui-image-editor-menu use.normal.use-default,\n .tui-image-editor-help-menu use.normal.use-default {\n fill-rule: evenodd;\n fill: " + menuIconStyle.normal.color + ";\n stroke: " + menuIconStyle.normal.color + ";\n }\n .tui-image-editor-menu use.active.use-default,\n .tui-image-editor-help-menu use.active.use-default {\n fill-rule: evenodd;\n fill: " + menuIconStyle.active.color + ";\n stroke: " + menuIconStyle.active.color + ";\n }\n .tui-image-editor-menu use.hover.use-default,\n .tui-image-editor-help-menu use.hover.use-default {\n fill-rule: evenodd;\n fill: " + menuIconStyle.hover.color + ";\n stroke: " + menuIconStyle.hover.color + ";\n }\n .tui-image-editor-menu use.disabled.use-default,\n .tui-image-editor-help-menu use.disabled.use-default {\n fill-rule: evenodd;\n fill: " + menuIconStyle.disabled.color + ";\n stroke: " + menuIconStyle.disabled.color + ";\n }\n .tui-image-editor-submenu use.normal.use-default {\n fill-rule: evenodd;\n fill: " + submenuIconStyle.normal.color + ";\n stroke: " + submenuIconStyle.normal.color + ";\n }\n .tui-image-editor-submenu use.active.use-default {\n fill-rule: evenodd;\n fill: " + submenuIconStyle.active.color + ";\n stroke: " + submenuIconStyle.active.color + ";\n }\n"; -}; - -/***/ }), - -/***/ "./src/js/ui/template/submenu/crop.js": -/*!********************************************!*\ - !*** ./src/js/ui/template/submenu/crop.js ***! - \********************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + function onloadFunc(xhr) { + return function () { + var body = document.body; + var x = document.createElement('x'); + var svg; + xhr.onload = null; + x.innerHTML = xhr.responseText; + svg = x.getElementsByTagName('svg')[0]; -"use strict"; + if (svg) { + svg.setAttribute('aria-hidden', 'true'); + svg.style.position = 'absolute'; + svg.style.width = 0; + svg.style.height = 0; + svg.style.overflow = 'hidden'; + body.insertBefore(svg, body.firstChild); + } + observeIfDone(); + }; + } -Object.defineProperty(exports, "__esModule", { - value: true -}); - -/** - * @param {Object} submenuInfo - submenu info for make template - * @param {Locale} locale - Translate text - * @param {Function} makeSvgIcon - svg icon generator - * @returns {string} - */ -exports.default = function (_ref) { - var locale = _ref.locale, - makeSvgIcon = _ref.makeSvgIcon; - return '\n
        \n
      • \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'shape-rectangle', true) + '\n
        \n \n
        \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'crop', true) + '\n
        \n \n
        \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'crop', true) + '\n
        \n \n
        \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'crop', true) + '\n
        \n \n
        \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'crop', true) + '\n
        \n \n
        \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'crop', true) + '\n
        \n \n
        \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'crop', true) + '\n
        \n \n
        \n
        • \n
      • \n
        • \n
      • \n
        \n
        • \n
      • \n
        \n ' + makeSvgIcon(['normal', 'active'], 'apply') + '\n \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'cancel') + '\n \n
        \n
        • \n
      \n'; -}; - -/***/ }), + function onErrorTimeout(xhr) { + return function () { + xhr.onerror = null; + xhr.ontimeout = null; + observeIfDone(); + }; + } -/***/ "./src/js/ui/template/submenu/draw.js": -/*!********************************************!*\ - !*** ./src/js/ui/template/submenu/draw.js ***! - \********************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + unobserveChanges(); // stop watching for changes to DOM + // find all use elements -"use strict"; + uses = document.getElementsByTagName('use'); + for (i = 0; i < uses.length; i += 1) { + try { + bcr = uses[i].getBoundingClientRect(); + } catch (ignore) { + // failed to get bounding rectangle of the use element + bcr = false; + } -Object.defineProperty(exports, "__esModule", { - value: true -}); + href = uses[i].getAttribute('href') || uses[i].getAttributeNS(xlinkNS, 'href') || uses[i].getAttribute('xlink:href'); -/** - * @param {Object} submenuInfo - submenu info for make template - * @param {Locale} locale - Translate text - * @param {Function} makeSvgIcon - svg icon generator - * @returns {string} - */ -exports.default = function (_ref) { - var locale = _ref.locale, - makeSvgIcon = _ref.makeSvgIcon; - return '\n
        \n
      • \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'draw-free', true) + '\n
        \n \n
        \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'draw-line', true) + '\n
        \n \n
        \n
        • \n
      • \n
        \n
        • \n
      • \n
        \n
        • \n
      • \n
        \n
        • \n
      • \n \n
        \n \n
        • \n
      \n'; -}; + if (href && href.split) { + url = href.split('#'); + } else { + url = ['', '']; + } -/***/ }), + base = url[0]; + hash = url[1]; + isHidden = bcr && bcr.left === 0 && bcr.right === 0 && bcr.top === 0 && bcr.bottom === 0; -/***/ "./src/js/ui/template/submenu/filter.js": -/*!**********************************************!*\ - !*** ./src/js/ui/template/submenu/filter.js ***! - \**********************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) { + // the use element is empty + // if there is a reference to an external SVG, try to fetch it + // use the optional fallback URL if there is no reference to an external SVG + if (fallback && !base.length && hash && !document.getElementById(hash)) { + base = fallback; + } -"use strict"; + if (uses[i].hasAttribute('href')) { + uses[i].setAttributeNS(xlinkNS, 'xlink:href', href); + } + if (base.length) { + // schedule updating xlink:href + xhr = cache[base]; -Object.defineProperty(exports, "__esModule", { - value: true -}); + if (xhr !== true) { + // true signifies that prepending the SVG was not required + set_timeout_default()(attrUpdateFunc({ + useEl: uses[i], + base: base, + hash: hash + }), 0); + } -/** - * @param {Locale} locale - Translate text - * @returns {string} - */ -exports.default = function (_ref) { - var locale = _ref.locale; - return '\n
        \n
      • \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n \n
        \n
        \n
        • \n
      • \n
        \n
        • \n
      • \n
        \n
        \n
        \n \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        • \n
      • \n
        \n
        • \n
      • \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        • \n
      • \n
        \n
        • \n
      • \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n
        \n
        \n
        \n \n
        \n
        \n
        • \n
      \n'; -}; + if (xhr === undefined) { + Request = createRequest(base); -/***/ }), + if (Request !== undefined) { + xhr = new Request(); + cache[base] = xhr; + xhr.onload = onloadFunc(xhr); + xhr.onerror = onErrorTimeout(xhr); + xhr.ontimeout = onErrorTimeout(xhr); + xhr.open('GET', base); + xhr.send(); + inProgressCount += 1; + } + } + } + } else { + if (!isHidden) { + if (cache[base] === undefined) { + // remember this URL if the use element was not empty and no request was sent + cache[base] = true; + } else if (cache[base].onload) { + // if it turns out that prepending the SVG is not necessary, + // abort the in-progress xhr. + cache[base].abort(); + delete cache[base].onload; + cache[base] = true; + } + } else if (base.length && cache[base]) { + set_timeout_default()(attrUpdateFunc({ + useEl: uses[i], + base: base, + hash: hash + }), 0); + } + } + } -/***/ "./src/js/ui/template/submenu/flip.js": -/*!********************************************!*\ - !*** ./src/js/ui/template/submenu/flip.js ***! - \********************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + uses = ''; + inProgressCount += 1; + observeIfDone(); + }; -"use strict"; + var _winLoad; + _winLoad = function winLoad() { + window.removeEventListener('load', _winLoad, false); // to prevent memory leaks -Object.defineProperty(exports, "__esModule", { - value: true -}); + tid = set_timeout_default()(checkUseElems, 0); + }; -/** - * @param {Object} submenuInfo - submenu info for make template - * @param {Locale} locale - Translate text - * @param {Function} makeSvgIcon - svg icon generator - * @returns {string} - */ -exports.default = function (_ref) { - var locale = _ref.locale, - makeSvgIcon = _ref.makeSvgIcon; - return '\n
        \n
      • \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'flip-x', true) + '\n
        \n \n
        \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'flip-y', true) + '\n
        \n \n
        \n
        • \n
      • \n
        \n
        • \n
      • \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'flip-reset', true) + '\n
        \n \n
        \n
        • \n
      \n'; -}; + if (document.readyState !== 'complete') { + // The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty. + window.addEventListener('load', _winLoad, false); + } else { + // No need to add a listener if the document is already loaded, initialize immediately. + _winLoad(); + } + } +})(); +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js/array/is-array.js +var is_array = __webpack_require__(1845); +;// CONCATENATED MODULE: ../../node_modules/@babel/runtime-corejs3/helpers/esm/arrayLikeToArray.js +function _arrayLikeToArray(arr, len) { + if (len == null || len > arr.length) len = arr.length; + + for (var i = 0, arr2 = new Array(len); i < len; i++) { + arr2[i] = arr[i]; + } -/***/ }), + return arr2; +} +;// CONCATENATED MODULE: ../../node_modules/@babel/runtime-corejs3/helpers/esm/arrayWithoutHoles.js -/***/ "./src/js/ui/template/submenu/history.js": -/*!***********************************************!*\ - !*** ./src/js/ui/template/submenu/history.js ***! - \***********************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { -"use strict"; +function _arrayWithoutHoles(arr) { + if (is_array(arr)) return _arrayLikeToArray(arr); +} +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js/symbol.js +var symbol = __webpack_require__(184); +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js/get-iterator-method.js +var get_iterator_method = __webpack_require__(662); +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js/array/from.js +var from = __webpack_require__(7172); +;// CONCATENATED MODULE: ../../node_modules/@babel/runtime-corejs3/helpers/esm/iterableToArray.js -Object.defineProperty(exports, "__esModule", { - value: true -}); -/** - * @param {Object} submenuInfo - submenu info for make template - * @param {Locale} locale - Translate text - * @param {Function} makeSvgIcon - svg icon generator - * @param {string} name - history name - * @param {string} detail - history detail information - * @returns {string} - */ -exports.default = function (_ref) { - var locale = _ref.locale, - makeSvgIcon = _ref.makeSvgIcon, - name = _ref.name, - detail = _ref.detail; - return '\n
      \n
      \n ' + makeSvgIcon(['normal', 'active'], 'history-' + name.toLowerCase(), true) + '\n
      \n \n ' + locale.localize(name) + '\n ' + (detail ? '(' + locale.localize(detail) + ')' : '') + '\n \n
      \n ' + makeSvgIcon(['normal'], 'history-check', true) + '\n
      \n
      \n'; -}; +function _iterableToArray(iter) { + if (typeof symbol !== "undefined" && get_iterator_method(iter) != null || iter["@@iterator"] != null) return from(iter); +} +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js/instance/slice.js +var instance_slice = __webpack_require__(711); +;// CONCATENATED MODULE: ../../node_modules/@babel/runtime-corejs3/helpers/esm/unsupportedIterableToArray.js -/***/ }), -/***/ "./src/js/ui/template/submenu/icon.js": -/*!********************************************!*\ - !*** ./src/js/ui/template/submenu/icon.js ***! - \********************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { -"use strict"; +function _unsupportedIterableToArray(o, minLen) { + var _context; + if (!o) return; + if (typeof o === "string") return _arrayLikeToArray(o, minLen); -Object.defineProperty(exports, "__esModule", { - value: true -}); + var n = instance_slice(_context = Object.prototype.toString.call(o)).call(_context, 8, -1); -/** - * @param {Object} submenuInfo - submenu info for make template - * @param {Locale} locale - Translate text - * @param {Function} makeSvgIcon - svg icon generator - * @returns {string} - */ -exports.default = function (_ref) { - var locale = _ref.locale, - makeSvgIcon = _ref.makeSvgIcon; - return '\n
        \n
      • \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'icon-arrow', true) + '\n
        \n \n
        \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'icon-arrow-2', true) + '\n
        \n \n
        \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'icon-arrow-3', true) + '\n
        \n \n
        \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'icon-star', true) + '\n
        \n \n
        \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'icon-star-2', true) + '\n
        \n \n
        \n\n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'icon-polygon', true) + '\n
        \n \n
        \n\n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'icon-location', true) + '\n
        \n \n
        \n\n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'icon-heart', true) + '\n
        \n \n
        \n\n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'icon-bubble', true) + '\n
        \n \n
        \n
        • \n
      • \n
        \n
        • \n
      • \n
        \n
        \n \n ' + makeSvgIcon(['normal', 'active'], 'icon-load', true) + '\n
        \n \n
        \n
        • \n
      • \n
        \n
        • \n
      • \n
        \n
        • \n
      \n'; -}; + if (n === "Object" && o.constructor) n = o.constructor.name; + if (n === "Map" || n === "Set") return from(o); + if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); +} +;// CONCATENATED MODULE: ../../node_modules/@babel/runtime-corejs3/helpers/esm/nonIterableSpread.js +function _nonIterableSpread() { + throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); +} +;// CONCATENATED MODULE: ../../node_modules/@babel/runtime-corejs3/helpers/esm/toConsumableArray.js -/***/ }), -/***/ "./src/js/ui/template/submenu/mask.js": -/*!********************************************!*\ - !*** ./src/js/ui/template/submenu/mask.js ***! - \********************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { -"use strict"; +function _toConsumableArray(arr) { + return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); +} +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js/object/define-property.js +var object_define_property = __webpack_require__(7077); +;// CONCATENATED MODULE: ../../node_modules/@babel/runtime-corejs3/helpers/esm/defineProperty.js + +function _defineProperty(obj, key, value) { + if (key in obj) { + object_define_property(obj, key, { + value: value, + enumerable: true, + configurable: true, + writable: true + }); + } else { + obj[key] = value; + } -Object.defineProperty(exports, "__esModule", { - value: true -}); + return obj; +} +;// CONCATENATED MODULE: ../../node_modules/@babel/runtime-corejs3/helpers/esm/classCallCheck.js +function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +} +;// CONCATENATED MODULE: ../../node_modules/@babel/runtime-corejs3/helpers/esm/createClass.js -/** - * @param {Object} submenuInfo - submenu info for make template - * @param {Locale} locale - Translate text - * @param {Function} makeSvgIcon - svg icon generator - * @returns {string} - */ -exports.default = function (_ref) { - var locale = _ref.locale, - makeSvgIcon = _ref.makeSvgIcon; - return '\n
        \n
      • \n
        \n
        \n \n ' + makeSvgIcon(['normal', 'active'], 'mask-load', true) + '\n
        \n \n
        \n
        • \n
      • \n
        \n
        • \n
      • \n
        \n ' + makeSvgIcon(['normal', 'active'], 'apply') + '\n \n
        \n
        • \n
      \n'; -}; -/***/ }), +function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; -/***/ "./src/js/ui/template/submenu/resize.js": -/*!**********************************************!*\ - !*** ./src/js/ui/template/submenu/resize.js ***! - \**********************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + object_define_property(target, descriptor.key, descriptor); + } +} -"use strict"; +function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; +} +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js-stable/instance/for-each.js +var for_each = __webpack_require__(7636); +var for_each_default = /*#__PURE__*/__webpack_require__.n(for_each); +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js-stable/instance/bind.js +var bind = __webpack_require__(4426); +var bind_default = /*#__PURE__*/__webpack_require__.n(bind); +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js-stable/instance/concat.js +var concat = __webpack_require__(9406); +var concat_default = /*#__PURE__*/__webpack_require__.n(concat); +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js-stable/promise.js +var core_js_stable_promise = __webpack_require__(8189); +var promise_default = /*#__PURE__*/__webpack_require__.n(core_js_stable_promise); +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js-stable/url.js +var url = __webpack_require__(3972); +var url_default = /*#__PURE__*/__webpack_require__.n(url); +// EXTERNAL MODULE: external {"commonjs":"tui-code-snippet","commonjs2":"tui-code-snippet","amd":"tui-code-snippet","root":["tui","util"]} +var external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_ = __webpack_require__(624); +var external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_); +// EXTERNAL MODULE: ./node_modules/fabric/dist/fabric.js +var fabric = __webpack_require__(2777); +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js-stable/object/keys.js +var keys = __webpack_require__(2461); +var keys_default = /*#__PURE__*/__webpack_require__.n(keys); +;// CONCATENATED MODULE: ../../node_modules/@babel/runtime-corejs3/helpers/esm/arrayWithHoles.js + +function _arrayWithHoles(arr) { + if (is_array(arr)) return arr; +} +;// CONCATENATED MODULE: ../../node_modules/@babel/runtime-corejs3/helpers/esm/iterableToArrayLimit.js -Object.defineProperty(exports, "__esModule", { - value: true -}); +function _iterableToArrayLimit(arr, i) { + var _i = arr == null ? null : typeof symbol !== "undefined" && get_iterator_method(arr) || arr["@@iterator"]; -/** - * @param {Object} submenuInfo - submenu info for make template - * @param {Locale} locale - Translate text - * @param {Function} makeSvgIcon - svg icon generator - * @returns {string} - */ -exports.default = function (_ref) { - var locale = _ref.locale, - makeSvgIcon = _ref.makeSvgIcon; - return '\n
        \n
      • \n
        \n \n
        \n \n
        \n \n
        \n \n
        \n
        • \n
      • \n
      • \n
        \n
        • \n
      • \n
        \n
        \n \n
        \n
        \n
        • \n
      • \n
      • \n
        \n
        • \n
      • \n
      • \n
        \n ' + makeSvgIcon(['normal', 'active'], 'apply') + '\n \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'cancel') + '\n \n
        \n
        • \n
      \n'; -}; + if (_i == null) return; + var _arr = []; + var _n = true; + var _d = false; -/***/ }), + var _s, _e; -/***/ "./src/js/ui/template/submenu/rotate.js": -/*!**********************************************!*\ - !*** ./src/js/ui/template/submenu/rotate.js ***! - \**********************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + try { + for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { + _arr.push(_s.value); -"use strict"; + if (i && _arr.length === i) break; + } + } catch (err) { + _d = true; + _e = err; + } finally { + try { + if (!_n && _i["return"] != null) _i["return"](); + } finally { + if (_d) throw _e; + } + } + return _arr; +} +;// CONCATENATED MODULE: ../../node_modules/@babel/runtime-corejs3/helpers/esm/nonIterableRest.js +function _nonIterableRest() { + throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); +} +;// CONCATENATED MODULE: ../../node_modules/@babel/runtime-corejs3/helpers/esm/slicedToArray.js -Object.defineProperty(exports, "__esModule", { - value: true -}); -/** - * @param {Object} submenuInfo - submenu info for make template - * @param {Locale} locale - Translate text - * @param {Function} makeSvgIcon - svg icon generator - * @returns {string} - */ -exports.default = function (_ref) { - var locale = _ref.locale, - makeSvgIcon = _ref.makeSvgIcon; - return '\n
        \n
      • \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'rotate-clockwise', true) + '\n
        \n \n
        \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'rotate-counterclockwise', true) + '\n
        \n \n
        \n
        • \n
      • \n
        \n
        • \n
      • \n \n
        \n \n
        • \n
      \n'; -}; -/***/ }), -/***/ "./src/js/ui/template/submenu/shape.js": -/*!*********************************************!*\ - !*** ./src/js/ui/template/submenu/shape.js ***! - \*********************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { +function _slicedToArray(arr, i) { + return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); +} +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js-stable/parse-int.js +var parse_int = __webpack_require__(6397); +var parse_int_default = /*#__PURE__*/__webpack_require__.n(parse_int); +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js-stable/instance/fill.js +var instance_fill = __webpack_require__(789); +var fill_default = /*#__PURE__*/__webpack_require__.n(instance_fill); +;// CONCATENATED MODULE: ./src/js/consts.js +var _context; -"use strict"; -Object.defineProperty(exports, "__esModule", { - value: true -}); +/** + * @author NHN. FE Development Team + * @fileoverview Constants + */ /** - * @param {Object} submenuInfo - submenu info for make template - * @param {Locale} locale - Translate text - * @param {Function} makeSvgIcon - svg icon generator - * @returns {string} + * Help features for zoom + * @type {Array.} */ -exports.default = function (_ref) { - var locale = _ref.locale, - makeSvgIcon = _ref.makeSvgIcon; - return '\n
        \n
      • \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'shape-rectangle', true) + '\n
        \n \n
        \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'shape-circle', true) + '\n
        \n \n
        \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'shape-triangle', true) + '\n
        \n \n
        \n
        • \n
      • \n
        \n
        • \n
      • \n
        \n
        \n
        • \n
      • \n
        \n
        • \n
      • \n \n
        \n \n
        • \n
      \n'; -}; -/***/ }), +var ZOOM_HELP_MENUS = ['zoomIn', 'zoomOut', 'hand']; +/** + * Help features for command + * @type {Array.} + */ -/***/ "./src/js/ui/template/submenu/text.js": -/*!********************************************!*\ - !*** ./src/js/ui/template/submenu/text.js ***! - \********************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - - -Object.defineProperty(exports, "__esModule", { - value: true -}); +var COMMAND_HELP_MENUS = ['history', 'undo', 'redo', 'reset']; +/** + * Help features for delete + * @type {Array.} + */ +var DELETE_HELP_MENUS = ['delete', 'deleteAll']; /** - * @param {Object} submenuInfo - submenu info for make template - * @param {Locale} locale - Translate text - * @param {Function} makeSvgIcon - svg icon generator - * @returns {string} + * Editor help features + * @type {Array.} */ -exports.default = function (_ref) { - var locale = _ref.locale, - makeSvgIcon = _ref.makeSvgIcon; - return '\n
        \n
      • \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'text-bold', true) + '\n
        \n \n
        \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'text-italic', true) + '\n
        \n \n
        \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'text-underline', true) + '\n
        \n \n
        \n
        • \n
      • \n
        \n
        • \n
      • \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'text-align-left', true) + '\n
        \n \n
        \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'text-align-center', true) + '\n
        \n \n
        \n
        \n
        \n ' + makeSvgIcon(['normal', 'active'], 'text-align-right', true) + '\n
        \n \n
        \n
        • \n
      • \n
        \n
        • \n
      • \n
        \n
        • \n
      • \n
        \n
        • \n
      • \n \n
        \n \n
        • \n
      \n'; -}; - -/***/ }), -/***/ "./src/js/ui/text.js": -/*!***************************!*\ - !*** ./src/js/ui/text.js ***! - \***************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - - -Object.defineProperty(exports, "__esModule", { - value: true -}); - -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); - -var _range = __webpack_require__(/*! @/ui/tools/range */ "./src/js/ui/tools/range.js"); - -var _range2 = _interopRequireDefault(_range); - -var _colorpicker = __webpack_require__(/*! @/ui/tools/colorpicker */ "./src/js/ui/tools/colorpicker.js"); - -var _colorpicker2 = _interopRequireDefault(_colorpicker); +var HELP_MENUS = concat_default()(_context = []).call(_context, ZOOM_HELP_MENUS, COMMAND_HELP_MENUS, DELETE_HELP_MENUS); +/** + * Fill type for shape + * @type {Object.} + */ -var _submenuBase = __webpack_require__(/*! @/ui/submenuBase */ "./src/js/ui/submenuBase.js"); +var SHAPE_FILL_TYPE = { + FILTER: 'filter', + COLOR: 'color' +}; +/** + * Shape type list + * @type {Array.} + */ -var _submenuBase2 = _interopRequireDefault(_submenuBase); +var SHAPE_TYPE = ['rect', 'circle', 'triangle']; +/** + * Object type + * @type {Object.} + */ -var _text = __webpack_require__(/*! @/ui/template/submenu/text */ "./src/js/ui/template/submenu/text.js"); +var OBJ_TYPE = { + CROPZONE: 'cropzone' +}; +/** + * Filter type map + * @type {Object.} + */ -var _text2 = _interopRequireDefault(_text); +var filterType = { + VINTAGE: 'vintage', + SEPIA2: 'sepia2', + REMOVE_COLOR: 'removeColor', + COLOR_FILTER: 'colorFilter', + REMOVE_WHITE: 'removeWhite', + BLEND_COLOR: 'blendColor', + BLEND: 'blend' +}; +/** + * Component names + * @type {Object.} + */ -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); +var componentNames = keyMirror('IMAGE_LOADER', 'CROPPER', 'FLIP', 'ROTATION', 'FREE_DRAWING', 'LINE', 'TEXT', 'ICON', 'FILTER', 'SHAPE', 'ZOOM', 'RESIZE'); +/** + * Shape default option + * @type {Object} + */ -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); +var SHAPE_DEFAULT_OPTIONS = { + lockSkewingX: true, + lockSkewingY: true, + bringForward: true, + isRegular: false +}; +/** + * Cropzone default option + * @type {Object} + */ -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } +var CROPZONE_DEFAULT_OPTIONS = { + hasRotatingPoint: false, + hasBorders: false, + lockScalingFlip: true, + lockRotation: true, + lockSkewingX: true, + lockSkewingY: true +}; +/** + * Command names + * @type {Object.} + */ -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } +var commandNames = { + CLEAR_OBJECTS: 'clearObjects', + LOAD_IMAGE: 'loadImage', + FLIP_IMAGE: 'flip', + ROTATE_IMAGE: 'rotate', + ADD_OBJECT: 'addObject', + REMOVE_OBJECT: 'removeObject', + APPLY_FILTER: 'applyFilter', + REMOVE_FILTER: 'removeFilter', + ADD_ICON: 'addIcon', + CHANGE_ICON_COLOR: 'changeIconColor', + ADD_SHAPE: 'addShape', + CHANGE_SHAPE: 'changeShape', + ADD_TEXT: 'addText', + CHANGE_TEXT: 'changeText', + CHANGE_TEXT_STYLE: 'changeTextStyle', + ADD_IMAGE_OBJECT: 'addImageObject', + RESIZE_CANVAS_DIMENSION: 'resizeCanvasDimension', + SET_OBJECT_PROPERTIES: 'setObjectProperties', + SET_OBJECT_POSITION: 'setObjectPosition', + CHANGE_SELECTION: 'changeSelection', + RESIZE_IMAGE: 'resize' +}; +/** + * Event names + * @type {Object.} + */ -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } +var eventNames = { + OBJECT_ACTIVATED: 'objectActivated', + OBJECT_MOVED: 'objectMoved', + OBJECT_SCALED: 'objectScaled', + OBJECT_CREATED: 'objectCreated', + OBJECT_ROTATED: 'objectRotated', + OBJECT_ADDED: 'objectAdded', + OBJECT_MODIFIED: 'objectModified', + TEXT_EDITING: 'textEditing', + TEXT_CHANGED: 'textChanged', + ICON_CREATE_RESIZE: 'iconCreateResize', + ICON_CREATE_END: 'iconCreateEnd', + ADD_TEXT: 'addText', + ADD_OBJECT: 'addObject', + ADD_OBJECT_AFTER: 'addObjectAfter', + MOUSE_DOWN: 'mousedown', + MOUSE_UP: 'mouseup', + MOUSE_MOVE: 'mousemove', + // UNDO/REDO Events + REDO_STACK_CHANGED: 'redoStackChanged', + UNDO_STACK_CHANGED: 'undoStackChanged', + SELECTION_CLEARED: 'selectionCleared', + SELECTION_CREATED: 'selectionCreated', + EXECUTE_COMMAND: 'executeCommand', + AFTER_UNDO: 'afterUndo', + AFTER_REDO: 'afterRedo', + ZOOM_CHANGED: 'zoomChanged', + HAND_STARTED: 'handStarted', + HAND_STOPPED: 'handStopped', + KEY_DOWN: 'keydown', + KEY_UP: 'keyup', + INPUT_BOX_EDITING_STARTED: 'inputBoxEditingStarted', + INPUT_BOX_EDITING_STOPPED: 'inputBoxEditingStopped', + FOCUS: 'focus', + BLUR: 'blur', + IMAGE_RESIZED: 'imageResized' +}; +/** + * Selector names + * @type {Object.} + */ -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } +var selectorNames = { + COLOR_PICKER_INPUT_BOX: '.tui-colorpicker-palette-hex' +}; +/** + * History names + * @type {Object.} + */ +var historyNames = { + LOAD_IMAGE: 'Load', + LOAD_MASK_IMAGE: 'Mask', + ADD_MASK_IMAGE: 'Mask', + ADD_IMAGE_OBJECT: 'Mask', + CROP: 'Crop', + RESIZE: 'Resize', + APPLY_FILTER: 'Filter', + REMOVE_FILTER: 'Filter', + CHANGE_SHAPE: 'Shape', + CHANGE_ICON_COLOR: 'Icon', + ADD_TEXT: 'Text', + CHANGE_TEXT_STYLE: 'Text', + REMOVE_OBJECT: 'Delete', + CLEAR_OBJECTS: 'Delete' +}; /** - * Crop ui class - * @class - * @ignore + * Editor states + * @type {Object.} */ -var Text = function (_Submenu) { - _inherits(Text, _Submenu); - function Text(subMenuElement, _ref) { - var locale = _ref.locale, - makeSvgIcon = _ref.makeSvgIcon, - menuBarPosition = _ref.menuBarPosition, - usageStatistics = _ref.usageStatistics; +var drawingModes = keyMirror('NORMAL', 'CROPPER', 'FREE_DRAWING', 'LINE_DRAWING', 'TEXT', 'SHAPE', 'ICON', 'ZOOM', 'RESIZE'); +/** + * Menu names with drawing mode + * @type {Object.} + */ - _classCallCheck(this, Text); +var drawingMenuNames = { + TEXT: 'text', + CROP: 'crop', + RESIZE: 'resize', + SHAPE: 'shape', + ZOOM: 'zoom' +}; +/** + * Zoom modes + * @type {Object.} + */ - var _this = _possibleConstructorReturn(this, (Text.__proto__ || Object.getPrototypeOf(Text)).call(this, subMenuElement, { - locale: locale, - name: 'text', - makeSvgIcon: makeSvgIcon, - menuBarPosition: menuBarPosition, - templateHtml: _text2.default, - usageStatistics: usageStatistics - })); +var zoomModes = { + DEFAULT: 'normal', + ZOOM: 'zoom', + HAND: 'hand' +}; +/** + * Shortcut key values + * @type {Object.} + */ - _this.effect = { - bold: false, - italic: false, - underline: false - }; - _this.align = 'tie-text-align-left'; - _this._els = { - textEffectButton: _this.selector('.tie-text-effect-button'), - textAlignButton: _this.selector('.tie-text-align-button'), - textColorpicker: new _colorpicker2.default(_this.selector('.tie-text-color'), '#ffbb3b', _this.toggleDirection, _this.usageStatistics), - textRange: new _range2.default({ - slider: _this.selector('.tie-text-range'), - input: _this.selector('.tie-text-range-value') - }, _consts.defaultTextRangeValues) - }; +var keyCodes = { + Z: 90, + Y: 89, + C: 67, + V: 86, + SHIFT: 16, + BACKSPACE: 8, + DEL: 46, + ARROW_DOWN: 40, + ARROW_UP: 38, + SPACE: 32 +}; +/** + * Fabric object options + * @type {Object.} + */ - _this.colorPickerInputBox = _this._els.textColorpicker.colorpickerElement.querySelector(_consts.selectorNames.COLOR_PICKER_INPUT_BOX); - return _this; +var fObjectOptions = { + SELECTION_STYLE: { + borderColor: 'red', + cornerColor: 'green', + cornerSize: 10, + originX: 'center', + originY: 'center', + transparentCorners: false } +}; +/** + * Promise reject messages + * @type {Object.} + */ - /** - * Destroys the instance. - */ - - - _createClass(Text, [{ - key: 'destroy', - value: function destroy() { - this._removeEvent(); - this._els.textColorpicker.destroy(); - this._els.textRange.destroy(); +var rejectMessages = { + addedObject: 'The object is already added.', + flip: 'The flipX and flipY setting values are not changed.', + invalidDrawingMode: 'This operation is not supported in the drawing mode.', + invalidParameters: 'Invalid parameters.', + isLock: 'The executing command state is locked.', + loadImage: 'The background image is empty.', + loadingImageFailed: 'Invalid image loaded.', + noActiveObject: 'There is no active object.', + noObject: 'The object is not in canvas.', + redo: 'The promise of redo command is reject.', + rotation: 'The current angle is same the old angle.', + undo: 'The promise of undo command is reject.', + unsupportedOperation: 'Unsupported operation.', + unsupportedType: 'Unsupported object type.' +}; +/** + * Default icon menu svg path + * @type {Object.} + */ - (0, _util.assignmentForDestroy)(this); - } +var defaultIconPath = { + 'icon-arrow': 'M40 12V0l24 24-24 24V36H0V12h40z', + 'icon-arrow-2': 'M49,32 H3 V22 h46 l-18,-18 h12 l23,23 L43,50 h-12 l18,-18 z ', + 'icon-arrow-3': 'M43.349998,27 L17.354,53 H1.949999 l25.996,-26 L1.949999,1 h15.404 L43.349998,27 z ', + 'icon-star': 'M35,54.557999 l-19.912001,10.468 l3.804,-22.172001 l-16.108,-15.7 l22.26,-3.236 L35,3.746 l9.956,20.172001 l22.26,3.236 l-16.108,15.7 l3.804,22.172001 z ', + 'icon-star-2': 'M17,31.212 l-7.194,4.08 l-4.728,-6.83 l-8.234,0.524 l-1.328,-8.226 l-7.644,-3.14 l2.338,-7.992 l-5.54,-6.18 l5.54,-6.176 l-2.338,-7.994 l7.644,-3.138 l1.328,-8.226 l8.234,0.522 l4.728,-6.83 L17,-24.312 l7.194,-4.08 l4.728,6.83 l8.234,-0.522 l1.328,8.226 l7.644,3.14 l-2.338,7.992 l5.54,6.178 l-5.54,6.178 l2.338,7.992 l-7.644,3.14 l-1.328,8.226 l-8.234,-0.524 l-4.728,6.83 z ', + 'icon-polygon': 'M3,31 L19,3 h32 l16,28 l-16,28 H19 z ', + 'icon-location': 'M24 62C8 45.503 0 32.837 0 24 0 10.745 10.745 0 24 0s24 10.745 24 24c0 8.837-8 21.503-24 38zm0-28c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10z', + 'icon-heart': 'M49.994999,91.349998 l-6.96,-6.333 C18.324001,62.606995 2.01,47.829002 2.01,29.690998 C2.01,14.912998 13.619999,3.299999 28.401001,3.299999 c8.349,0 16.362,5.859 21.594,12 c5.229,-6.141 13.242001,-12 21.591,-12 c14.778,0 26.390999,11.61 26.390999,26.390999 c0,18.138 -16.314001,32.916 -41.025002,55.374001 l-6.96,6.285 z ', + 'icon-bubble': 'M44 48L34 58V48H12C5.373 48 0 42.627 0 36V12C0 5.373 5.373 0 12 0h40c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12h-8z' +}; +var defaultRotateRangeValues = { + realTimeEvent: true, + min: -360, + max: 360, + value: 0 +}; +var defaultDrawRangeValues = { + min: 5, + max: 30, + value: 12 +}; +var defaultShapeStrokeValues = { + realTimeEvent: true, + min: 2, + max: 300, + value: 3 +}; +var defaultTextRangeValues = { + realTimeEvent: true, + min: 10, + max: 100, + value: 50 +}; +var defaultFilterRangeValues = { + tintOpacityRange: { + realTimeEvent: true, + min: 0, + max: 1, + value: 0.7, + useDecimal: true + }, + removewhiteDistanceRange: { + realTimeEvent: true, + min: 0, + max: 1, + value: 0.2, + useDecimal: true + }, + brightnessRange: { + realTimeEvent: true, + min: -1, + max: 1, + value: 0, + useDecimal: true + }, + noiseRange: { + realTimeEvent: true, + min: 0, + max: 1000, + value: 100 + }, + pixelateRange: { + realTimeEvent: true, + min: 2, + max: 20, + value: 4 + }, + colorfilterThresholdRange: { + realTimeEvent: true, + min: 0, + max: 1, + value: 0.2, + useDecimal: true + }, + blurFilterRange: { + value: 0.1 + } +}; +var emptyCropRectValues = { + LEFT: 0, + TOP: 0, + WIDTH: 0.5, + HEIGHT: 0.5 +}; +var defaultResizePixelValues = { + realTimeEvent: true, + min: 32, + max: 4088, + value: 800 +}; +;// CONCATENATED MODULE: ./src/js/util.js - /** - * Add event for text - * @param {Object} actions - actions for text - * @param {Function} actions.changeTextStyle - change text style - */ - }, { - key: 'addEvent', - value: function addEvent(actions) { - var setTextEffect = this._setTextEffectHandler.bind(this); - var setTextAlign = this._setTextAlignHandler.bind(this); - this.eventHandler = { - setTextEffect: setTextEffect, - setTextAlign: setTextAlign - }; - this.actions = actions; - this._els.textEffectButton.addEventListener('click', setTextEffect); - this._els.textAlignButton.addEventListener('click', setTextAlign); - this._els.textRange.on('change', this._changeTextRnageHandler.bind(this)); - this._els.textColorpicker.on('change', this._changeColorHandler.bind(this)); - this.colorPickerInputBox.addEventListener(_consts.eventNames.FOCUS, this._onStartEditingInputBox.bind(this)); - this.colorPickerInputBox.addEventListener(_consts.eventNames.BLUR, this._onStopEditingInputBox.bind(this)); - } - /** - * Remove event - * @private - */ - }, { - key: '_removeEvent', - value: function _removeEvent() { - var _eventHandler = this.eventHandler, - setTextEffect = _eventHandler.setTextEffect, - setTextAlign = _eventHandler.setTextAlign; - this._els.textEffectButton.removeEventListener('click', setTextEffect); - this._els.textAlignButton.removeEventListener('click', setTextAlign); - this._els.textRange.off(); - this._els.textColorpicker.off(); +/** + * @author NHN. FE Development Team + * @fileoverview Util + */ - this.colorPickerInputBox.removeEventListener(_consts.eventNames.FOCUS, this._onStartEditingInputBox.bind(this)); - this.colorPickerInputBox.removeEventListener(_consts.eventNames.BLUR, this._onStopEditingInputBox.bind(this)); - } - /** - * Returns the menu to its default state. - */ +var FLOATING_POINT_DIGIT = 2; +var CSS_PREFIX = 'tui-image-editor-'; +var min = Math.min, + max = Math.max; +var hostnameSent = false; +function isFunction(value) { + return typeof value === 'function'; +} +/** + * Clamp value + * @param {number} value - Value + * @param {number} minValue - Minimum value + * @param {number} maxValue - Maximum value + * @returns {number} clamped value + */ - }, { - key: 'changeStandbyMode', - value: function changeStandbyMode() { - this.actions.stopDrawingMode(); - } +function clamp(value, minValue, maxValue) { + if (minValue > maxValue) { + var _ref = [maxValue, minValue]; + minValue = _ref[0]; + maxValue = _ref[1]; + } - /** - * Executed when the menu starts. - */ + return max(minValue, min(value, maxValue)); +} +/** + * Make key-value object from arguments + * @returns {object.} + */ - }, { - key: 'changeStartMode', - value: function changeStartMode() { - this.actions.modeChange('text'); - } - }, { - key: 'setTextStyleStateOnAction', - value: function setTextStyleStateOnAction() { - var textStyle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; - var fill = textStyle.fill, - fontSize = textStyle.fontSize, - fontStyle = textStyle.fontStyle, - fontWeight = textStyle.fontWeight, - textDecoration = textStyle.textDecoration, - textAlign = textStyle.textAlign; +function keyMirror() { + var obj = {}; + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } - this.textColor = fill; - this.fontSize = fontSize; - this.setEffectState('italic', fontStyle); - this.setEffectState('bold', fontWeight); - this.setEffectState('underline', textDecoration); - this.setAlignState('tie-text-align-' + textAlign); - } - }, { - key: 'setEffectState', - value: function setEffectState(effectName, value) { - var effectValue = value === 'italic' || value === 'bold' || value === 'underline'; - var button = this._els.textEffectButton.querySelector('.tui-image-editor-button.' + effectName); + (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.forEach)(args, function (key) { + obj[key] = key; + }); + return obj; +} +/** + * Make CSSText + * @param {Object} styleObj - Style info object + * @returns {string} Connected string of style + */ - this.effect[effectName] = effectValue; +function makeStyleText(styleObj) { + var styleStr = ''; + forEach(styleObj, function (value, prop) { + var _context; - button.classList[effectValue ? 'add' : 'remove']('active'); - } - }, { - key: 'setAlignState', - value: function setAlignState(value) { - var button = this._els.textAlignButton; - button.classList.remove(this.align); - button.classList.add(value); - this.align = value; - } + styleStr += _concatInstanceProperty(_context = "".concat(prop, ": ")).call(_context, value, ";"); + }); + return styleStr; +} +/** + * Get object's properties + * @param {Object} obj - object + * @param {Array} keys - keys + * @returns {Object} properties object + */ - /** - * text effect set handler - * @param {object} event - add button event object - * @private - */ +function getProperties(obj, keys) { + var props = {}; + var length = keys.length; + var i = 0; + var key; - }, { - key: '_setTextEffectHandler', - value: function _setTextEffectHandler(event) { - var button = event.target.closest('.tui-image-editor-button'); - if (button) { - var _button$className$mat = button.className.match(/(bold|italic|underline)/), - styleType = _button$className$mat[0]; + for (i = 0; i < length; i += 1) { + key = keys[i]; + props[key] = obj[key]; + } - var styleObj = { - bold: { fontWeight: 'bold' }, - italic: { fontStyle: 'italic' }, - underline: { textDecoration: 'underline' } - }[styleType]; + return props; +} +/** + * ParseInt simpliment + * @param {number} value - Value + * @returns {number} + */ - this.effect[styleType] = !this.effect[styleType]; - button.classList.toggle('active'); - this.actions.changeTextStyle(styleObj); - } - } +function toInteger(value) { + return parse_int_default()(value, 10); +} +/** + * String to camelcase string + * @param {string} targetString - change target + * @returns {string} + * @private + */ - /** - * text effect set handler - * @param {object} event - add button event object - * @private - */ +function toCamelCase(targetString) { + return targetString.replace(/-([a-z])/g, function ($0, $1) { + return $1.toUpperCase(); + }); +} +/** + * Check browser file api support + * @returns {boolean} + * @private + */ - }, { - key: '_setTextAlignHandler', - value: function _setTextAlignHandler(event) { - var button = event.target.closest('.tui-image-editor-button'); - if (button) { - var styleType = this.getButtonType(button, ['left', 'center', 'right']); - var styleTypeAlias = 'tie-text-align-' + styleType; +function isSupportFileApi() { + return !!(window.File && window.FileList && window.FileReader); +} +/** + * hex to rgb + * @param {string} color - hex color + * @param {string} alpha - color alpha value + * @returns {string} rgb expression + */ - event.currentTarget.classList.remove(this.align); - if (this.align !== styleTypeAlias) { - event.currentTarget.classList.add(styleTypeAlias); - } - this.actions.changeTextStyle({ textAlign: styleType }); +function getRgb(color, alpha) { + var _context3, _context4, _context5; - this.align = styleTypeAlias; - } - } + if (color.length === 4) { + var _context2; - /** - * text align set handler - * @param {number} value - range value - * @param {boolean} isLast - Is last change - * @private - */ + color = concat_default()(_context2 = "".concat(color)).call(_context2, slice_default()(color).call(color, 1, 4)); + } - }, { - key: '_changeTextRnageHandler', - value: function _changeTextRnageHandler(value, isLast) { - this.actions.changeTextStyle({ - fontSize: value - }, !isLast); - } + var r = parse_int_default()(slice_default()(color).call(color, 1, 3), 16); - /** - * change color handler - * @param {string} color - change color string - * @private - */ + var g = parse_int_default()(slice_default()(color).call(color, 3, 5), 16); - }, { - key: '_changeColorHandler', - value: function _changeColorHandler(color) { - color = color || 'transparent'; - this.actions.changeTextStyle({ - fill: color - }); - } - }, { - key: 'textColor', - set: function set(color) { - this._els.textColorpicker.color = color; - } + var b = parse_int_default()(slice_default()(color).call(color, 5, 7), 16); - /** - * Get text color - * @returns {string} - text color - */ - , - get: function get() { - return this._els.textColorpicker.color; - } + var a = alpha || 1; + return concat_default()(_context3 = concat_default()(_context4 = concat_default()(_context5 = "rgba(".concat(r, ", ")).call(_context5, g, ", ")).call(_context4, b, ", ")).call(_context3, a, ")"); +} +/** + * send hostname + */ - /** - * Get text size - * @returns {string} - text size - */ +function sendHostName() { + if (hostnameSent) { + return; + } - }, { - key: 'fontSize', - get: function get() { - return this._els.textRange.value; - } + hostnameSent = true; + (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.sendHostname)('image-editor', 'UA-129999381-1'); +} +/** + * Apply css resource + * @param {string} styleBuffer - serialized css text + * @param {string} tagId - style tag id + */ - /** - * Set text size - * @param {Number} value - text size - */ - , - set: function set(value) { - this._els.textRange.value = value; - } +function styleLoad(styleBuffer, tagId) { + var _document$getElements = document.getElementsByTagName('head'), + _document$getElements2 = _slicedToArray(_document$getElements, 1), + head = _document$getElements2[0]; - /** - * get font style - * @returns {string} - font style - */ + var linkElement = document.createElement('link'); + var styleData = encodeURIComponent(styleBuffer); - }, { - key: 'fontStyle', - get: function get() { - return this.effect.italic ? 'italic' : 'normal'; - } + if (tagId) { + linkElement.id = tagId; // linkElement.id = 'tui-image-editor-theme-style'; + } - /** - * get font weight - * @returns {string} - font weight - */ + linkElement.setAttribute('rel', 'stylesheet'); + linkElement.setAttribute('type', 'text/css'); + linkElement.setAttribute('href', "data:text/css;charset=UTF-8,".concat(styleData)); + head.appendChild(linkElement); +} +/** + * Get selector + * @param {HTMLElement} targetElement - target element + * @returns {Function} selector + */ - }, { - key: 'fontWeight', - get: function get() { - return this.effect.bold ? 'bold' : 'normal'; - } +function getSelector(targetElement) { + return function (str) { + return targetElement.querySelector(str); + }; +} +/** + * Change base64 to blob + * @param {String} data - base64 string data + * @returns {Blob} Blob Data + */ - /** - * get text underline text underline - * @returns {boolean} - true or false - */ +function base64ToBlob(data) { + var rImageType = /data:(image\/.+);base64,/; + var mimeString = ''; + var raw, uInt8Array, i; + raw = data.replace(rImageType, function (header, imageType) { + mimeString = imageType; + return ''; + }); + raw = atob(raw); + var rawLength = raw.length; + uInt8Array = new Uint8Array(rawLength); // eslint-disable-line - }, { - key: 'underline', - get: function get() { - return this.effect.underline; - } - }]); + for (i = 0; i < rawLength; i += 1) { + uInt8Array[i] = raw.charCodeAt(i); + } - return Text; -}(_submenuBase2.default); + return new Blob([uInt8Array], { + type: mimeString + }); +} +/** + * Fix floating point diff. + * @param {number} value - original value + * @returns {number} fixed value + */ + +function fixFloatingPoint(value) { + return Number(value.toFixed(FLOATING_POINT_DIGIT)); +} +/** + * Assignment for destroying objects. + * @param {Object} targetObject - object to be removed. + */ -exports.default = Text; +function assignmentForDestroy(targetObject) { + (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.forEach)(targetObject, function (value, key) { + targetObject[key] = null; + }); +} +/** + * Make class name for ui + * @param {String} str - main string of className + * @param {String} prefix - prefix string of className + * @returns {String} class name + */ -/***/ }), +function cls() { + var _context7; -/***/ "./src/js/ui/theme/standard.js": -/*!*************************************!*\ - !*** ./src/js/ui/theme/standard.js ***! - \*************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ''; + var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ''; -"use strict"; + if (str.charAt(0) === '.') { + var _context6; + return concat_default()(_context6 = ".".concat(CSS_PREFIX).concat(prefix)).call(_context6, slice_default()(str).call(str, 1)); + } -Object.defineProperty(exports, "__esModule", { - value: true -}); + return concat_default()(_context7 = "".concat(CSS_PREFIX).concat(prefix)).call(_context7, str); +} /** - * @author NHN. FE Development Team - * @fileoverview The standard theme + * Change object origin + * @param {fabric.Object} fObject - fabric object + * @param {Object} origin - origin of fabric object + * @param {string} originX - horizontal basis. + * @param {string} originY - vertical basis. */ +function changeOrigin(fObject, origin) { + var originX = origin.originX, + originY = origin.originY; + + var _fObject$getPointByOr = fObject.getPointByOrigin(originX, originY), + left = _fObject$getPointByOr.x, + top = _fObject$getPointByOr.y; + + fObject.set({ + left: left, + top: top, + originX: originX, + originY: originY + }); + fObject.setCoords(); +} /** - * Full configuration for theme.
      - * @typedef {object} themeConfig - * @property {string} common.bi.image - Brand icon image - * @property {string} common.bisize.width - Icon image width - * @property {string} common.bisize.height - Icon Image Height - * @property {string} common.backgroundImage - Background image - * @property {string} common.backgroundColor - Background color - * @property {string} common.border - Full area border style - * @property {string} header.backgroundImage - header area background - * @property {string} header.backgroundColor - header area background color - * @property {string} header.border - header area border style - * @property {string} loadButton.backgroundColor - load button background color - * @property {string} loadButton.border - load button border style - * @property {string} loadButton.color - load button foreground color - * @property {string} loadButton.fontFamily - load button font type - * @property {string} loadButton.fontSize - load button font size - * @property {string} downloadButton.backgroundColor - download button background color - * @property {string} downloadButton.border - download button border style - * @property {string} downloadButton.color - download button foreground color - * @property {string} downloadButton.fontFamily - download button font type - * @property {string} downloadButton.fontSize - download button font size - * @property {string} menu.normalIcon.color - Menu normal color for default icon - * @property {string} menu.normalIcon.path - Menu normal icon svg bundle file path - * @property {string} menu.normalIcon.name - Menu normal icon svg bundle name - * @property {string} menu.activeIcon.color - Menu active color for default icon - * @property {string} menu.activeIcon.path - Menu active icon svg bundle file path - * @property {string} menu.activeIcon.name - Menu active icon svg bundle name - * @property {string} menu.disabled.color - Menu disabled color for default icon - * @property {string} menu.disabled.path - Menu disabled icon svg bundle file path - * @property {string} menu.disabled.name - Menu disabled icon svg bundle name - * @property {string} menu.hover.color - Menu default icon hover color - * @property {string} menu.hover.path - Menu hover icon svg bundle file path - * @property {string} menu.hover.name - Menu hover icon svg bundle name - * @property {string} menu.iconSize.width - Menu icon Size Width - * @property {string} menu.iconSize.height - Menu Icon Size Height - * @property {string} submenu.backgroundColor - Sub-menu area background color - * @property {string} submenu.partition.color - Submenu partition line color - * @property {string} submenu.normalIcon.color - Submenu normal color for default icon - * @property {string} submenu.normalIcon.path - Submenu default icon svg bundle file path - * @property {string} submenu.normalIcon.name - Submenu default icon svg bundle name - * @property {string} submenu.activeIcon.color - Submenu active color for default icon - * @property {string} submenu.activeIcon.path - Submenu active icon svg bundle file path - * @property {string} submenu.activeIcon.name - Submenu active icon svg bundle name - * @property {string} submenu.iconSize.width - Submenu icon Size Width - * @property {string} submenu.iconSize.height - Submenu Icon Size Height - * @property {string} submenu.normalLabel.color - Submenu default label color - * @property {string} submenu.normalLabel.fontWeight - Sub Menu Default Label Font Thickness - * @property {string} submenu.activeLabel.color - Submenu active label color - * @property {string} submenu.activeLabel.fontWeight - Submenu active label Font thickness - * @property {string} checkbox.border - Checkbox border style - * @property {string} checkbox.backgroundColor - Checkbox background color - * @property {string} range.pointer.color - range control pointer color - * @property {string} range.bar.color - range control bar color - * @property {string} range.subbar.color - range control subbar color - * @property {string} range.value.color - range number box font color - * @property {string} range.value.fontWeight - range number box font thickness - * @property {string} range.value.fontSize - range number box font size - * @property {string} range.value.border - range number box border style - * @property {string} range.value.backgroundColor - range number box background color - * @property {string} range.title.color - range title font color - * @property {string} range.title.fontWeight - range title font weight - * @property {string} colorpicker.button.border - colorpicker button border style - * @property {string} colorpicker.title.color - colorpicker button title font color - * @example - // default keys and styles - var customTheme = { - 'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png', - 'common.bisize.width': '251px', - 'common.bisize.height': '21px', - 'common.backgroundImage': 'none', - 'common.backgroundColor': '#1e1e1e', - 'common.border': '0px', - - // header - 'header.backgroundImage': 'none', - 'header.backgroundColor': 'transparent', - 'header.border': '0px', - - // load button - 'loadButton.backgroundColor': '#fff', - 'loadButton.border': '1px solid #ddd', - 'loadButton.color': '#222', - 'loadButton.fontFamily': 'NotoSans, sans-serif', - 'loadButton.fontSize': '12px', + * Object key value flip + * @param {Object} targetObject - The data object of the key value. + * @returns {Object} + */ - // download button - 'downloadButton.backgroundColor': '#fdba3b', - 'downloadButton.border': '1px solid #fdba3b', - 'downloadButton.color': '#fff', - 'downloadButton.fontFamily': 'NotoSans, sans-serif', - 'downloadButton.fontSize': '12px', +function flipObject(targetObject) { + var _context8; - // icons default - 'menu.normalIcon.color': '#8a8a8a', - 'menu.activeIcon.color': '#555555', - 'menu.disabledIcon.color': '#434343', - 'menu.hoverIcon.color': '#e9e9e9', - 'submenu.normalIcon.color': '#8a8a8a', - 'submenu.activeIcon.color': '#e9e9e9', + var result = {}; - 'menu.iconSize.width': '24px', - 'menu.iconSize.height': '24px', - 'submenu.iconSize.width': '32px', - 'submenu.iconSize.height': '32px', + for_each_default()(_context8 = keys_default()(targetObject)).call(_context8, function (key) { + result[targetObject[key]] = key; + }); - // submenu primary color - 'submenu.backgroundColor': '#1e1e1e', - 'submenu.partition.color': '#858585', + return result; +} +/** + * Set custom properties + * @param {Object} targetObject - target object + * @param {Object} props - custom props object + */ - // submenu labels - 'submenu.normalLabel.color': '#858585', - 'submenu.normalLabel.fontWeight': 'lighter', - 'submenu.activeLabel.color': '#fff', - 'submenu.activeLabel.fontWeight': 'lighter', +function setCustomProperty(targetObject, props) { + targetObject.customProps = targetObject.customProps || {}; + (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend)(targetObject.customProps, props); +} +/** + * Get custom property + * @param {fabric.Object} fObject - fabric object + * @param {Array|string} propNames - prop name array + * @returns {object | number | string} + */ - // checkbox style - 'checkbox.border': '1px solid #ccc', - 'checkbox.backgroundColor': '#fff', +function getCustomProperty(fObject, propNames) { + var resultObject = {}; - // rango style - 'range.pointer.color': '#fff', - 'range.bar.color': '#666', - 'range.subbar.color': '#d1d1d1', + if ((0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.isString)(propNames)) { + propNames = [propNames]; + } - 'range.disabledPointer.color': '#414141', - 'range.disabledBar.color': '#282828', - 'range.disabledSubbar.color': '#414141', + (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.forEach)(propNames, function (propName) { + resultObject[propName] = fObject.customProps[propName]; + }); + return resultObject; +} +/** + * Capitalize string + * @param {string} targetString - target string + * @returns {string} + */ - 'range.value.color': '#fff', - 'range.value.fontWeight': 'lighter', - 'range.value.fontSize': '11px', - 'range.value.border': '1px solid #353535', - 'range.value.backgroundColor': '#151515', - 'range.title.color': '#fff', - 'range.title.fontWeight': 'lighter', +function capitalizeString(targetString) { + return targetString.charAt(0).toUpperCase() + slice_default()(targetString).call(targetString, 1); +} +/** + * Array includes check + * @param {Array} targetArray - target array + * @param {string|number} compareValue - compare value + * @returns {boolean} + */ - // colorpicker style - 'colorpicker.button.border': '1px solid #1e1e1e', - 'colorpicker.title.color': '#fff' -}; +function includes(targetArray, compareValue) { + return index_of_default()(targetArray).call(targetArray, compareValue) >= 0; +} +/** + * Get fill type + * @param {Object | string} fillOption - shape fill option + * @returns {string} 'color' or 'filter' */ -exports.default = { - 'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png', - 'common.bisize.width': '251px', - 'common.bisize.height': '21px', - 'common.backgroundImage': 'none', - 'common.backgroundColor': '#1e1e1e', - 'common.border': '0px', - // header - 'header.backgroundImage': 'none', - 'header.backgroundColor': 'transparent', - 'header.border': '0px', +function getFillTypeFromOption() { + var fillOption = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; + return (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.pick)(fillOption, 'type') || SHAPE_FILL_TYPE.COLOR; +} +/** + * Get fill type of shape type object + * @param {fabric.Object} shapeObj - fabric object + * @returns {string} 'transparent' or 'color' or 'filter' + */ - // load button - 'loadButton.backgroundColor': '#fff', - 'loadButton.border': '1px solid #ddd', - 'loadButton.color': '#222', - 'loadButton.fontFamily': "'Noto Sans', sans-serif", - 'loadButton.fontSize': '12px', +function getFillTypeFromObject(shapeObj) { + var _shapeObj$fill = fill_default()(shapeObj), + fill = _shapeObj$fill === void 0 ? {} : _shapeObj$fill; - // download button - 'downloadButton.backgroundColor': '#fdba3b', - 'downloadButton.border': '1px solid #fdba3b', - 'downloadButton.color': '#fff', - 'downloadButton.fontFamily': "'Noto Sans', sans-serif", - 'downloadButton.fontSize': '12px', + if (fill.source) { + return SHAPE_FILL_TYPE.FILTER; + } - // main icons - 'menu.normalIcon.color': '#8a8a8a', - 'menu.activeIcon.color': '#555555', - 'menu.disabledIcon.color': '#434343', - 'menu.hoverIcon.color': '#e9e9e9', + return SHAPE_FILL_TYPE.COLOR; +} +/** + * Check if the object is a shape object. + * @param {fabric.Object} obj - fabric object + * @returns {boolean} + */ - // submenu icons - 'submenu.normalIcon.color': '#8a8a8a', - 'submenu.activeIcon.color': '#e9e9e9', +function isShape(obj) { + return (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.inArray)(obj.get('type'), SHAPE_TYPE) >= 0; +} +/** + * Get object type + * @param {string} type - fabric object type + * @returns {string} type of object (ex: shape, icon, ...) + */ - 'menu.iconSize.width': '24px', - 'menu.iconSize.height': '24px', +function getObjectType(type) { + if (includes(SHAPE_TYPE, type)) { + return 'Shape'; + } - 'submenu.iconSize.width': '32px', - 'submenu.iconSize.height': '32px', + switch (type) { + case 'i-text': + return 'Text'; - // submenu primary color - 'submenu.backgroundColor': '#1e1e1e', - 'submenu.partition.color': '#3c3c3c', + case 'path': + case 'line': + return 'Draw'; - // submenu labels - 'submenu.normalLabel.color': '#8a8a8a', - 'submenu.normalLabel.fontWeight': 'lighter', - 'submenu.activeLabel.color': '#fff', - 'submenu.activeLabel.fontWeight': 'lighter', + case 'activeSelection': + return 'Group'; - // checkbox style - 'checkbox.border': '0px', - 'checkbox.backgroundColor': '#fff', + default: + return toStartOfCapital(type); + } +} +/** + * Get filter type + * @param {string} type - fabric filter type + * @param {object} [options] - filter type options + * @param {boolean} [options.useAlpha=true] - usage of alpha(true is 'color filter', false is 'remove white') + * @param {string} [options.mode] - mode of blendColor + * @returns {string} type of filter (ex: sepia, blur, ...) + */ - // range style - 'range.pointer.color': '#fff', - 'range.bar.color': '#666', - 'range.subbar.color': '#d1d1d1', +function getFilterType(type) { + var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}, + _ref2$useAlpha = _ref2.useAlpha, + useAlpha = _ref2$useAlpha === void 0 ? true : _ref2$useAlpha, + mode = _ref2.mode; - 'range.disabledPointer.color': '#414141', - 'range.disabledBar.color': '#282828', - 'range.disabledSubbar.color': '#414141', + var VINTAGE = filterType.VINTAGE, + REMOVE_COLOR = filterType.REMOVE_COLOR, + BLEND_COLOR = filterType.BLEND_COLOR, + SEPIA2 = filterType.SEPIA2, + COLOR_FILTER = filterType.COLOR_FILTER, + REMOVE_WHITE = filterType.REMOVE_WHITE, + BLEND = filterType.BLEND; + var filterName; - 'range.value.color': '#fff', - 'range.value.fontWeight': 'lighter', - 'range.value.fontSize': '11px', - 'range.value.border': '1px solid #353535', - 'range.value.backgroundColor': '#151515', - 'range.title.color': '#fff', - 'range.title.fontWeight': 'lighter', + switch (type) { + case VINTAGE: + filterName = SEPIA2; + break; - // colorpicker style - 'colorpicker.button.border': '1px solid #1e1e1e', - 'colorpicker.title.color': '#fff' -}; + case REMOVE_COLOR: + filterName = useAlpha ? COLOR_FILTER : REMOVE_WHITE; + break; -/***/ }), + case BLEND_COLOR: + filterName = mode === 'add' ? BLEND : mode; + break; -/***/ "./src/js/ui/theme/theme.js": -/*!**********************************!*\ - !*** ./src/js/ui/theme/theme.js ***! - \**********************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + default: + filterName = type; + } -"use strict"; + return toStartOfCapital(filterName); +} +/** + * Check if command is silent command + * @param {Command|string} command - command or command name + * @returns {boolean} + */ -Object.defineProperty(exports, "__esModule", { - value: true -}); +function isSilentCommand(command) { + var LOAD_IMAGE = commandNames.LOAD_IMAGE; + return typeof command === 'string' ? LOAD_IMAGE === command : LOAD_IMAGE === command.name; +} +/** + * Get command name + * @param {Command|string} command - command or command name + * @returns {{name: string, ?detail: string}} + */ +// eslint-disable-next-line complexity, require-jsdoc + +function getHistoryTitle(command) { + var _context9, _context10; + + var FLIP_IMAGE = commandNames.FLIP_IMAGE, + ROTATE_IMAGE = commandNames.ROTATE_IMAGE, + ADD_TEXT = commandNames.ADD_TEXT, + APPLY_FILTER = commandNames.APPLY_FILTER, + REMOVE_FILTER = commandNames.REMOVE_FILTER, + CHANGE_SHAPE = commandNames.CHANGE_SHAPE, + CHANGE_ICON_COLOR = commandNames.CHANGE_ICON_COLOR, + CHANGE_TEXT_STYLE = commandNames.CHANGE_TEXT_STYLE, + CLEAR_OBJECTS = commandNames.CLEAR_OBJECTS, + ADD_IMAGE_OBJECT = commandNames.ADD_IMAGE_OBJECT, + REMOVE_OBJECT = commandNames.REMOVE_OBJECT, + RESIZE_IMAGE = commandNames.RESIZE_IMAGE; + var name = command.name, + args = command.args; + var historyInfo; + + switch (name) { + case FLIP_IMAGE: + historyInfo = { + name: name, + detail: args[1] === 'reset' ? args[1] : slice_default()(_context9 = args[1]).call(_context9, 4) + }; + break; + + case ROTATE_IMAGE: + historyInfo = { + name: name, + detail: args[2] + }; + break; + + case APPLY_FILTER: + historyInfo = { + name: historyNames.APPLY_FILTER, + detail: getFilterType(args[1], args[2]) + }; + break; + + case REMOVE_FILTER: + historyInfo = { + name: historyNames.REMOVE_FILTER, + detail: 'Remove' + }; + break; + + case CHANGE_SHAPE: + historyInfo = { + name: historyNames.CHANGE_SHAPE, + detail: 'Change' + }; + break; + + case CHANGE_ICON_COLOR: + historyInfo = { + name: historyNames.CHANGE_ICON_COLOR, + detail: 'Change' + }; + break; + + case CHANGE_TEXT_STYLE: + historyInfo = { + name: historyNames.CHANGE_TEXT_STYLE, + detail: 'Change' + }; + break; -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + case REMOVE_OBJECT: + historyInfo = { + name: historyNames.REMOVE_OBJECT, + detail: args[2] + }; + break; -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); + case CLEAR_OBJECTS: + historyInfo = { + name: historyNames.CLEAR_OBJECTS, + detail: 'All' + }; + break; -var _style = __webpack_require__(/*! @/ui/template/style */ "./src/js/ui/template/style.js"); + case ADD_IMAGE_OBJECT: + historyInfo = { + name: historyNames.ADD_IMAGE_OBJECT, + detail: 'Add' + }; + break; -var _style2 = _interopRequireDefault(_style); + case ADD_TEXT: + historyInfo = { + name: historyNames.ADD_TEXT + }; + break; -var _standard = __webpack_require__(/*! @/ui/theme/standard */ "./src/js/ui/theme/standard.js"); + case RESIZE_IMAGE: + historyInfo = { + name: historyNames.RESIZE, + detail: concat_default()(_context10 = "".concat(~~args[1].width, "x")).call(_context10, ~~args[1].height) + }; + break; -var _standard2 = _interopRequireDefault(_standard); + default: + historyInfo = { + name: name + }; + break; + } -var _default = __webpack_require__(/*! @svg/default.svg */ "./src/svg/default.svg"); + if (args[1] === 'mask') { + historyInfo = { + name: historyNames.LOAD_MASK_IMAGE, + detail: 'Apply' + }; + } -var _default2 = _interopRequireDefault(_default); + return historyInfo; +} +/** + * Get help menubar position(opposite of menubar) + * @param {string} position - position of menubar + * @returns {string} position of help menubar + */ -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); +function getHelpMenuBarPosition(position) { + if (position === 'top') { + return 'bottom'; + } -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + if (position === 'left') { + return 'right'; + } -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + if (position === 'right') { + return 'left'; + } + return 'top'; +} /** - * Theme manager + * Change to capital start letter + * @param {string} str - string to change + * @returns {string} + */ + +function toStartOfCapital(str) { + return str.replace(/[a-z]/, function (first) { + return first.toUpperCase(); + }); +} +/** + * Check if cropRect is Empty. + * @param {Object} cropRect - cropRect object + * @param {Number} cropRect.left - cropRect left position value + * @param {Number} cropRect.top - cropRect top position value + * @param {Number} cropRect.width - cropRect width value + * @param {Number} cropRect.height - cropRect height value + * @returns {boolean} + */ + + +function isEmptyCropzone(cropRect) { + var left = cropRect.left, + top = cropRect.top, + width = cropRect.width, + height = cropRect.height; + var LEFT = emptyCropRectValues.LEFT, + TOP = emptyCropRectValues.TOP, + WIDTH = emptyCropRectValues.WIDTH, + HEIGHT = emptyCropRectValues.HEIGHT; + return left === LEFT && top === TOP && width === WIDTH && height === HEIGHT; +} +;// CONCATENATED MODULE: ./src/js/factory/errorMessage.js +/** + * @author NHN. FE Development Team + * @fileoverview Error-message factory + */ + + +var types = keyMirror('UN_IMPLEMENTATION', 'NO_COMPONENT_NAME'); +var messages = { + UN_IMPLEMENTATION: 'Should implement a method: ', + NO_COMPONENT_NAME: 'Should set a component name' +}; +var map = { + UN_IMPLEMENTATION: function UN_IMPLEMENTATION(methodName) { + return messages.UN_IMPLEMENTATION + methodName; + }, + NO_COMPONENT_NAME: function NO_COMPONENT_NAME() { + return messages.NO_COMPONENT_NAME; + } +}; +/* harmony default export */ var errorMessage = ({ + types: external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().extend({}, types), + create: function create(type) { + type = type.toLowerCase(); + var func = map[type]; + + for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; + } + + return func.apply(void 0, args); + } +}); +;// CONCATENATED MODULE: ./src/js/interface/command.js + + + + +/** + * @author NHN. FE Development Team + * @fileoverview Command interface + */ + + +var createMessage = errorMessage.create; +var errorTypes = errorMessage.types; +/** + * Command class * @class - * @param {Object} customTheme - custom theme + * @param {{name:function, execute: function, undo: function, + * executeCallback: function, undoCallback: function}} actions - Command actions + * @param {Array} args - passing arguments on execute, undo * @ignore */ -var Theme = function () { - function Theme(customTheme) { - _classCallCheck(this, Theme); - this.styles = this._changeToObject((0, _tuiCodeSnippet.extend)({}, _standard2.default, customTheme)); - (0, _util.styleLoad)(this._styleMaker()); +var Command = /*#__PURE__*/function () { + function Command(actions, args) { + _classCallCheck(this, Command); + + /** + * command name + * @type {string} + */ + this.name = actions.name; + /** + * arguments + * @type {Array} + */ + + this.args = args; + /** + * Execute function + * @type {function} + */ + + this.execute = actions.execute; + /** + * Undo function + * @type {function} + */ + + this.undo = actions.undo; + /** + * executeCallback + * @type {function} + */ + + this.executeCallback = actions.executeCallback || null; + /** + * undoCallback + * @type {function} + */ + + this.undoCallback = actions.undoCallback || null; + /** + * data for undo + * @type {Object} + */ + + this.undoData = {}; + } + /** + * Execute action + * @param {Object.} compMap - Components injection + * @abstract + */ + + + _createClass(Command, [{ + key: "execute", + value: function execute() { + throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'execute')); + } + /** + * Undo action + * @param {Object.} compMap - Components injection + * @abstract + */ + + }, { + key: "undo", + value: function undo() { + throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'undo')); + } + /** + * command for redo if undoData exists + * @returns {boolean} isRedo + */ + + }, { + key: "isRedo", + get: function get() { + return keys_default()(this.undoData).length > 0; + } + /** + * Set undoData action + * @param {Object} undoData - maked undo data + * @param {Object} cachedUndoDataForSilent - cached undo data + * @param {boolean} isSilent - is silent execution or not + * @returns {Object} cachedUndoDataForSilent + */ + + }, { + key: "setUndoData", + value: function setUndoData(undoData, cachedUndoDataForSilent, isSilent) { + if (cachedUndoDataForSilent) { + undoData = cachedUndoDataForSilent; + } + + if (!isSilent) { + external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().extend(this.undoData, undoData); + cachedUndoDataForSilent = null; + } else if (!cachedUndoDataForSilent) { + cachedUndoDataForSilent = undoData; + } + + return cachedUndoDataForSilent; + } + /** + * Attach execute callabck + * @param {function} callback - Callback after execution + * @returns {Command} this + */ + + }, { + key: "setExecuteCallback", + value: function setExecuteCallback(callback) { + this.executeCallback = callback; + return this; + } + /** + * Attach undo callback + * @param {function} callback - Callback after undo + * @returns {Command} this + */ + + }, { + key: "setUndoCallback", + value: function setUndoCallback(callback) { + this.undoCallback = callback; + return this; + } + }]); + + return Command; +}(); + +/* harmony default export */ var command = (Command); +;// CONCATENATED MODULE: ./src/js/factory/command.js +/** + * @author NHN. FE Development Team + * @fileoverview Command factory + */ + +var commands = {}; +/** + * Create a command + * @param {string} name - Command name + * @param {...*} args - Arguments for creating command + * @returns {Command} + * @ignore + */ + +function command_create(name) { + var actions = commands[name]; + + if (actions) { + for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; + } + + return new command(actions, args); + } + + return null; +} +/** + * Register a command with name as a key + * @param {Object} command - {name:{string}, execute: {function}, undo: {function}} + * @param {string} command.name - command name + * @param {function} command.execute - executable function + * @param {function} command.undo - undo function + * @ignore + */ + + +function register(command) { + commands[command.name] = command; +} + +/* harmony default export */ var factory_command = ({ + create: command_create, + register: register +}); +;// CONCATENATED MODULE: ./src/js/invoker.js + + + + + + +/** + * @author NHN. FE Development Team + * @fileoverview Invoker - invoke commands + */ + + + + +/** + * Invoker + * @class + * @ignore + */ + +var Invoker = /*#__PURE__*/function () { + function Invoker() { + _classCallCheck(this, Invoker); + + /** + * Undo stack + * @type {Array.} + * @private + */ + this._undoStack = []; + /** + * Redo stack + * @type {Array.} + * @private + */ + + this._redoStack = []; + /** + * Lock-flag for executing command + * @type {boolean} + * @private + */ + + this._isLocked = false; + this._isSilent = false; + } + /** + * Invoke command execution + * @param {Command} command - Command + * @param {boolean} [isRedo=false] - check if command is redo + * @returns {Promise} + * @private + */ + + + _createClass(Invoker, [{ + key: "_invokeExecution", + value: function _invokeExecution(command) { + var _this = this; + + var isRedo = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + this.lock(); + var args = command.args; + + if (!args) { + args = []; + } + + return command.execute.apply(command, _toConsumableArray(args)).then(function (value) { + if (!_this._isSilent) { + _this.pushUndoStack(command); + + _this.fire(isRedo ? eventNames.AFTER_REDO : eventNames.EXECUTE_COMMAND, command); + } + + _this.unlock(); + + if (isFunction(command.executeCallback)) { + command.executeCallback(value); + } + + return value; + })['catch'](function (message) { + _this.unlock(); + + return promise_default().reject(message); + }); + } + /** + * Invoke command undo + * @param {Command} command - Command + * @returns {Promise} + * @private + */ + + }, { + key: "_invokeUndo", + value: function _invokeUndo(command) { + var _this2 = this; + + this.lock(); + var args = command.args; + + if (!args) { + args = []; + } + + return command.undo.apply(command, _toConsumableArray(args)).then(function (value) { + _this2.pushRedoStack(command); + + _this2.fire(eventNames.AFTER_UNDO, command); + + _this2.unlock(); + + if (isFunction(command.undoCallback)) { + command.undoCallback(value); + } + + return value; + })['catch'](function (message) { + _this2.unlock(); + + return promise_default().reject(message); + }); + } + /** + * fire REDO_STACK_CHANGED event + * @private + */ + + }, { + key: "_fireRedoStackChanged", + value: function _fireRedoStackChanged() { + this.fire(eventNames.REDO_STACK_CHANGED, this._redoStack.length); + } + /** + * fire UNDO_STACK_CHANGED event + * @private + */ + + }, { + key: "_fireUndoStackChanged", + value: function _fireUndoStackChanged() { + this.fire(eventNames.UNDO_STACK_CHANGED, this._undoStack.length); + } + /** + * Lock this invoker + */ + + }, { + key: "lock", + value: function lock() { + this._isLocked = true; + } + /** + * Unlock this invoker + */ + + }, { + key: "unlock", + value: function unlock() { + this._isLocked = false; + } + }, { + key: "executeSilent", + value: function executeSilent() { + var _this3 = this; + + this._isSilent = true; + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return this.execute.apply(this, concat_default()(args).call(args, [this._isSilent])).then(function () { + _this3._isSilent = false; + }); + } + /** + * Invoke command + * Store the command to the undoStack + * Clear the redoStack + * @param {String} commandName - Command name + * @param {...*} args - Arguments for creating command + * @returns {Promise} + */ + + }, { + key: "execute", + value: function execute() { + var _this4 = this; + + if (this._isLocked) { + return promise_default().reject(rejectMessages.isLock); + } + + for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { + args[_key2] = arguments[_key2]; + } + + var command = args[0]; + + if ((0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.isString)(command)) { + command = factory_command.create.apply(factory_command, args); + } + + return this._invokeExecution(command).then(function (value) { + _this4.clearRedoStack(); + + return value; + }); + } + /** + * Undo command + * @returns {Promise} + */ + + }, { + key: "undo", + value: function undo() { + var command = this._undoStack.pop(); + + var promise; + var message = ''; + + if (command && this._isLocked) { + this.pushUndoStack(command, true); + command = null; + } + + if (command) { + if (this.isEmptyUndoStack()) { + this._fireUndoStackChanged(); + } + + promise = this._invokeUndo(command); + } else { + message = rejectMessages.undo; + + if (this._isLocked) { + var _context; + + message = concat_default()(_context = "".concat(message, " Because ")).call(_context, rejectMessages.isLock); + } + + promise = promise_default().reject(message); + } + + return promise; + } + /** + * Redo command + * @returns {Promise} + */ + + }, { + key: "redo", + value: function redo() { + var command = this._redoStack.pop(); + + var promise; + var message = ''; + + if (command && this._isLocked) { + this.pushRedoStack(command, true); + command = null; + } + + if (command) { + if (this.isEmptyRedoStack()) { + this._fireRedoStackChanged(); + } + + promise = this._invokeExecution(command, true); + } else { + message = rejectMessages.redo; + + if (this._isLocked) { + var _context2; + + message = concat_default()(_context2 = "".concat(message, " Because ")).call(_context2, rejectMessages.isLock); + } + + promise = promise_default().reject(message); + } + + return promise; + } + /** + * Push undo stack + * @param {Command} command - command + * @param {boolean} [isSilent] - Fire event or not + */ + + }, { + key: "pushUndoStack", + value: function pushUndoStack(command, isSilent) { + this._undoStack.push(command); + + if (!isSilent) { + this._fireUndoStackChanged(); + } + } + /** + * Push redo stack + * @param {Command} command - command + * @param {boolean} [isSilent] - Fire event or not + */ + + }, { + key: "pushRedoStack", + value: function pushRedoStack(command, isSilent) { + this._redoStack.push(command); + + if (!isSilent) { + this._fireRedoStackChanged(); + } + } + /** + * Return whether the redoStack is empty + * @returns {boolean} + */ + + }, { + key: "isEmptyRedoStack", + value: function isEmptyRedoStack() { + return this._redoStack.length === 0; + } + /** + * Return whether the undoStack is empty + * @returns {boolean} + */ + + }, { + key: "isEmptyUndoStack", + value: function isEmptyUndoStack() { + return this._undoStack.length === 0; + } + /** + * Clear undoStack + */ + + }, { + key: "clearUndoStack", + value: function clearUndoStack() { + if (!this.isEmptyUndoStack()) { + this._undoStack = []; + + this._fireUndoStackChanged(); + } + } + /** + * Clear redoStack + */ + + }, { + key: "clearRedoStack", + value: function clearRedoStack() { + if (!this.isEmptyRedoStack()) { + this._redoStack = []; + + this._fireRedoStackChanged(); + } + } + }]); + + return Invoker; +}(); + +external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.CustomEvents.mixin(Invoker); +/* harmony default export */ var invoker = (Invoker); +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js-stable/parse-float.js +var parse_float = __webpack_require__(5214); +var parse_float_default = /*#__PURE__*/__webpack_require__.n(parse_float); +;// CONCATENATED MODULE: ./src/js/ui/template/mainContainer.js + +/* harmony default export */ var mainContainer = (function (_ref) { + var _context, _context2, _context3, _context4, _context5, _context6, _context7; + + var locale = _ref.locale, + biImage = _ref.biImage, + commonStyle = _ref.commonStyle, + headerStyle = _ref.headerStyle, + loadButtonStyle = _ref.loadButtonStyle, + downloadButtonStyle = _ref.downloadButtonStyle, + submenuStyle = _ref.submenuStyle; + return concat_default()(_context = concat_default()(_context2 = concat_default()(_context3 = concat_default()(_context4 = concat_default()(_context5 = concat_default()(_context6 = concat_default()(_context7 = "\n
      \n
      \n
      \n \n
      \n
      \n
      \n ")).call(_context4, locale.localize('Load'), "\n \n
      \n \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n
      \n"); +}); +;// CONCATENATED MODULE: ./src/js/ui/template/controls.js + + +/* harmony default export */ var controls = (function (_ref) { + var _context, _context2, _context3, _context4, _context5; + + var locale = _ref.locale, + biImage = _ref.biImage, + loadButtonStyle = _ref.loadButtonStyle, + downloadButtonStyle = _ref.downloadButtonStyle, + menuBarPosition = _ref.menuBarPosition; + return concat_default()(_context = concat_default()(_context2 = concat_default()(_context3 = concat_default()(_context4 = concat_default()(_context5 = "\n
        \n
        \n
        \n \n
        \n
          \n\n
          \n
          \n ")).call(_context3, locale.localize('Load'), "\n \n
          \n \n
          \n
          \n"); +}); +;// CONCATENATED MODULE: ./src/js/ui/template/style.js + +/* harmony default export */ var style = (function (_ref) { + var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29; + + var subMenuLabelActive = _ref.subMenuLabelActive, + subMenuLabelNormal = _ref.subMenuLabelNormal, + subMenuRangeTitle = _ref.subMenuRangeTitle, + submenuPartitionVertical = _ref.submenuPartitionVertical, + submenuPartitionHorizontal = _ref.submenuPartitionHorizontal, + submenuCheckbox = _ref.submenuCheckbox, + submenuRangePointer = _ref.submenuRangePointer, + submenuRangeValue = _ref.submenuRangeValue, + submenuColorpickerTitle = _ref.submenuColorpickerTitle, + submenuColorpickerButton = _ref.submenuColorpickerButton, + submenuRangeBar = _ref.submenuRangeBar, + submenuRangeSubbar = _ref.submenuRangeSubbar, + submenuDisabledRangePointer = _ref.submenuDisabledRangePointer, + submenuDisabledRangeBar = _ref.submenuDisabledRangeBar, + submenuDisabledRangeSubbar = _ref.submenuDisabledRangeSubbar, + submenuIconSize = _ref.submenuIconSize, + menuIconSize = _ref.menuIconSize, + biSize = _ref.biSize, + menuIconStyle = _ref.menuIconStyle, + submenuIconStyle = _ref.submenuIconStyle; + return concat_default()(_context = concat_default()(_context2 = concat_default()(_context3 = concat_default()(_context4 = concat_default()(_context5 = concat_default()(_context6 = concat_default()(_context7 = concat_default()(_context8 = concat_default()(_context9 = concat_default()(_context10 = concat_default()(_context11 = concat_default()(_context12 = concat_default()(_context13 = concat_default()(_context14 = concat_default()(_context15 = concat_default()(_context16 = concat_default()(_context17 = concat_default()(_context18 = concat_default()(_context19 = concat_default()(_context20 = concat_default()(_context21 = concat_default()(_context22 = concat_default()(_context23 = concat_default()(_context24 = concat_default()(_context25 = concat_default()(_context26 = concat_default()(_context27 = concat_default()(_context28 = concat_default()(_context29 = "\n .tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype=\"icon-bubble\"] label,\n .tie-icon-add-button.icon-heart .tui-image-editor-button[data-icontype=\"icon-heart\"] label,\n .tie-icon-add-button.icon-location .tui-image-editor-button[data-icontype=\"icon-location\"] label,\n .tie-icon-add-button.icon-polygon .tui-image-editor-button[data-icontype=\"icon-polygon\"] label,\n .tie-icon-add-button.icon-star .tui-image-editor-button[data-icontype=\"icon-star\"] label,\n .tie-icon-add-button.icon-star-2 .tui-image-editor-button[data-icontype=\"icon-star-2\"] label,\n .tie-icon-add-button.icon-arrow-3 .tui-image-editor-button[data-icontype=\"icon-arrow-3\"] label,\n .tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype=\"icon-arrow-2\"] label,\n .tie-icon-add-button.icon-arrow .tui-image-editor-button[data-icontype=\"icon-arrow\"] label,\n .tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype=\"icon-bubble\"] label,\n .tie-draw-line-select-button.line .tui-image-editor-button.line label,\n .tie-draw-line-select-button.free .tui-image-editor-button.free label,\n .tie-flip-button.flipX .tui-image-editor-button.flipX label,\n .tie-flip-button.flipY .tui-image-editor-button.flipY label,\n .tie-flip-button.resetFlip .tui-image-editor-button.resetFlip label,\n .tie-crop-button .tui-image-editor-button.apply.active label,\n .tie-crop-preset-button .tui-image-editor-button.preset.active label,\n .tie-resize-button .tui-image-editor-button.apply.active label,\n .tie-resize-preset-button .tui-image-editor-button.preset.active label,\n .tie-shape-button.rect .tui-image-editor-button.rect label,\n .tie-shape-button.circle .tui-image-editor-button.circle label,\n .tie-shape-button.triangle .tui-image-editor-button.triangle label,\n .tie-text-effect-button .tui-image-editor-button.active label,\n .tie-text-align-button.tie-text-align-left .tui-image-editor-button.left label,\n .tie-text-align-button.tie-text-align-center .tui-image-editor-button.center label,\n .tie-text-align-button.tie-text-align-right .tui-image-editor-button.right label,\n .tie-mask-apply.apply.active .tui-image-editor-button.apply label,\n .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover > label,\n .tui-image-editor-container .tui-image-editor-checkbox label > span {\n ".concat(subMenuLabelActive, "\n }\n .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button > label,\n .tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label,\n .tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label > span {\n ")).call(_context29, subMenuLabelNormal, "\n }\n .tui-image-editor-container .tui-image-editor-range-wrap label > span {\n ")).call(_context28, subMenuRangeTitle, "\n }\n .tui-image-editor-container .tui-image-editor-partition > div {\n ")).call(_context27, submenuPartitionVertical, "\n }\n .tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition > div,\n .tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition > div {\n ")).call(_context26, submenuPartitionHorizontal, "\n }\n .tui-image-editor-container .tui-image-editor-checkbox label > span:before {\n ")).call(_context25, submenuCheckbox, "\n }\n .tui-image-editor-container .tui-image-editor-checkbox label > input:checked + span:before {\n border: 0;\n }\n .tui-image-editor-container .tui-image-editor-virtual-range-pointer {\n ")).call(_context24, submenuRangePointer, "\n }\n .tui-image-editor-container .tui-image-editor-virtual-range-bar {\n ")).call(_context23, submenuRangeBar, "\n }\n .tui-image-editor-container .tui-image-editor-virtual-range-subbar {\n ")).call(_context22, submenuRangeSubbar, "\n }\n .tui-image-editor-container .tui-image-editor-disabled .tui-image-editor-virtual-range-pointer {\n ")).call(_context21, submenuDisabledRangePointer, "\n }\n .tui-image-editor-container .tui-image-editor-disabled .tui-image-editor-virtual-range-subbar {\n ")).call(_context20, submenuDisabledRangeSubbar, "\n }\n .tui-image-editor-container .tui-image-editor-disabled .tui-image-editor-virtual-range-bar {\n ")).call(_context19, submenuDisabledRangeBar, "\n }\n .tui-image-editor-container .tui-image-editor-range-value {\n ")).call(_context18, submenuRangeValue, "\n }\n .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button .color-picker-value + label {\n ")).call(_context17, submenuColorpickerTitle, "\n }\n .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button .color-picker-value {\n ")).call(_context16, submenuColorpickerButton, "\n }\n .tui-image-editor-container .svg_ic-menu {\n ")).call(_context15, menuIconSize, "\n }\n .tui-image-editor-container .svg_ic-submenu {\n ")).call(_context14, submenuIconSize, "\n }\n .tui-image-editor-container .tui-image-editor-controls-logo > img,\n .tui-image-editor-container .tui-image-editor-header-logo > img {\n ")).call(_context13, biSize, "\n }\n .tui-image-editor-menu use.normal.use-default,\n .tui-image-editor-help-menu use.normal.use-default {\n fill-rule: evenodd;\n fill: ")).call(_context12, menuIconStyle.normal.color, ";\n stroke: ")).call(_context11, menuIconStyle.normal.color, ";\n }\n .tui-image-editor-menu use.active.use-default,\n .tui-image-editor-help-menu use.active.use-default {\n fill-rule: evenodd;\n fill: ")).call(_context10, menuIconStyle.active.color, ";\n stroke: ")).call(_context9, menuIconStyle.active.color, ";\n }\n .tui-image-editor-menu use.hover.use-default,\n .tui-image-editor-help-menu use.hover.use-default {\n fill-rule: evenodd;\n fill: ")).call(_context8, menuIconStyle.hover.color, ";\n stroke: ")).call(_context7, menuIconStyle.hover.color, ";\n }\n .tui-image-editor-menu use.disabled.use-default,\n .tui-image-editor-help-menu use.disabled.use-default {\n fill-rule: evenodd;\n fill: ")).call(_context6, menuIconStyle.disabled.color, ";\n stroke: ")).call(_context5, menuIconStyle.disabled.color, ";\n }\n .tui-image-editor-submenu use.normal.use-default {\n fill-rule: evenodd;\n fill: ")).call(_context4, submenuIconStyle.normal.color, ";\n stroke: ")).call(_context3, submenuIconStyle.normal.color, ";\n }\n .tui-image-editor-submenu use.active.use-default {\n fill-rule: evenodd;\n fill: ")).call(_context2, submenuIconStyle.active.color, ";\n stroke: ")).call(_context, submenuIconStyle.active.color, ";\n }\n"); +}); +;// CONCATENATED MODULE: ./src/js/ui/theme/standard.js +/** + * @author NHN. FE Development Team + * @fileoverview The standard theme + */ + +/** + * Full configuration for theme.
          + * @typedef {object} themeConfig + * @property {string} common.bi.image - Brand icon image + * @property {string} common.bisize.width - Icon image width + * @property {string} common.bisize.height - Icon Image Height + * @property {string} common.backgroundImage - Background image + * @property {string} common.backgroundColor - Background color + * @property {string} common.border - Full area border style + * @property {string} header.backgroundImage - header area background + * @property {string} header.backgroundColor - header area background color + * @property {string} header.border - header area border style + * @property {string} loadButton.backgroundColor - load button background color + * @property {string} loadButton.border - load button border style + * @property {string} loadButton.color - load button foreground color + * @property {string} loadButton.fontFamily - load button font type + * @property {string} loadButton.fontSize - load button font size + * @property {string} downloadButton.backgroundColor - download button background color + * @property {string} downloadButton.border - download button border style + * @property {string} downloadButton.color - download button foreground color + * @property {string} downloadButton.fontFamily - download button font type + * @property {string} downloadButton.fontSize - download button font size + * @property {string} menu.normalIcon.color - Menu normal color for default icon + * @property {string} menu.normalIcon.path - Menu normal icon svg bundle file path + * @property {string} menu.normalIcon.name - Menu normal icon svg bundle name + * @property {string} menu.activeIcon.color - Menu active color for default icon + * @property {string} menu.activeIcon.path - Menu active icon svg bundle file path + * @property {string} menu.activeIcon.name - Menu active icon svg bundle name + * @property {string} menu.disabled.color - Menu disabled color for default icon + * @property {string} menu.disabled.path - Menu disabled icon svg bundle file path + * @property {string} menu.disabled.name - Menu disabled icon svg bundle name + * @property {string} menu.hover.color - Menu default icon hover color + * @property {string} menu.hover.path - Menu hover icon svg bundle file path + * @property {string} menu.hover.name - Menu hover icon svg bundle name + * @property {string} menu.iconSize.width - Menu icon Size Width + * @property {string} menu.iconSize.height - Menu Icon Size Height + * @property {string} submenu.backgroundColor - Sub-menu area background color + * @property {string} submenu.partition.color - Submenu partition line color + * @property {string} submenu.normalIcon.color - Submenu normal color for default icon + * @property {string} submenu.normalIcon.path - Submenu default icon svg bundle file path + * @property {string} submenu.normalIcon.name - Submenu default icon svg bundle name + * @property {string} submenu.activeIcon.color - Submenu active color for default icon + * @property {string} submenu.activeIcon.path - Submenu active icon svg bundle file path + * @property {string} submenu.activeIcon.name - Submenu active icon svg bundle name + * @property {string} submenu.iconSize.width - Submenu icon Size Width + * @property {string} submenu.iconSize.height - Submenu Icon Size Height + * @property {string} submenu.normalLabel.color - Submenu default label color + * @property {string} submenu.normalLabel.fontWeight - Sub Menu Default Label Font Thickness + * @property {string} submenu.activeLabel.color - Submenu active label color + * @property {string} submenu.activeLabel.fontWeight - Submenu active label Font thickness + * @property {string} checkbox.border - Checkbox border style + * @property {string} checkbox.backgroundColor - Checkbox background color + * @property {string} range.pointer.color - range control pointer color + * @property {string} range.bar.color - range control bar color + * @property {string} range.subbar.color - range control subbar color + * @property {string} range.value.color - range number box font color + * @property {string} range.value.fontWeight - range number box font thickness + * @property {string} range.value.fontSize - range number box font size + * @property {string} range.value.border - range number box border style + * @property {string} range.value.backgroundColor - range number box background color + * @property {string} range.title.color - range title font color + * @property {string} range.title.fontWeight - range title font weight + * @property {string} colorpicker.button.border - colorpicker button border style + * @property {string} colorpicker.title.color - colorpicker button title font color + * @example + // default keys and styles + var customTheme = { + 'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png', + 'common.bisize.width': '251px', + 'common.bisize.height': '21px', + 'common.backgroundImage': 'none', + 'common.backgroundColor': '#1e1e1e', + 'common.border': '0px', + + // header + 'header.backgroundImage': 'none', + 'header.backgroundColor': 'transparent', + 'header.border': '0px', + + // load button + 'loadButton.backgroundColor': '#fff', + 'loadButton.border': '1px solid #ddd', + 'loadButton.color': '#222', + 'loadButton.fontFamily': 'NotoSans, sans-serif', + 'loadButton.fontSize': '12px', + + // download button + 'downloadButton.backgroundColor': '#fdba3b', + 'downloadButton.border': '1px solid #fdba3b', + 'downloadButton.color': '#fff', + 'downloadButton.fontFamily': 'NotoSans, sans-serif', + 'downloadButton.fontSize': '12px', + + // icons default + 'menu.normalIcon.color': '#8a8a8a', + 'menu.activeIcon.color': '#555555', + 'menu.disabledIcon.color': '#434343', + 'menu.hoverIcon.color': '#e9e9e9', + 'submenu.normalIcon.color': '#8a8a8a', + 'submenu.activeIcon.color': '#e9e9e9', + + 'menu.iconSize.width': '24px', + 'menu.iconSize.height': '24px', + 'submenu.iconSize.width': '32px', + 'submenu.iconSize.height': '32px', + + // submenu primary color + 'submenu.backgroundColor': '#1e1e1e', + 'submenu.partition.color': '#858585', + + // submenu labels + 'submenu.normalLabel.color': '#858585', + 'submenu.normalLabel.fontWeight': 'lighter', + 'submenu.activeLabel.color': '#fff', + 'submenu.activeLabel.fontWeight': 'lighter', + + // checkbox style + 'checkbox.border': '1px solid #ccc', + 'checkbox.backgroundColor': '#fff', + + // rango style + 'range.pointer.color': '#fff', + 'range.bar.color': '#666', + 'range.subbar.color': '#d1d1d1', + + 'range.disabledPointer.color': '#414141', + 'range.disabledBar.color': '#282828', + 'range.disabledSubbar.color': '#414141', + + 'range.value.color': '#fff', + 'range.value.fontWeight': 'lighter', + 'range.value.fontSize': '11px', + 'range.value.border': '1px solid #353535', + 'range.value.backgroundColor': '#151515', + 'range.title.color': '#fff', + 'range.title.fontWeight': 'lighter', + + // colorpicker style + 'colorpicker.button.border': '1px solid #1e1e1e', + 'colorpicker.title.color': '#fff' +}; + */ +/* harmony default export */ var standard = ({ + 'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png', + 'common.bisize.width': '251px', + 'common.bisize.height': '21px', + 'common.backgroundImage': 'none', + 'common.backgroundColor': '#1e1e1e', + 'common.border': '0px', + // header + 'header.backgroundImage': 'none', + 'header.backgroundColor': 'transparent', + 'header.border': '0px', + // load button + 'loadButton.backgroundColor': '#fff', + 'loadButton.border': '1px solid #ddd', + 'loadButton.color': '#222', + 'loadButton.fontFamily': "'Noto Sans', sans-serif", + 'loadButton.fontSize': '12px', + // download button + 'downloadButton.backgroundColor': '#fdba3b', + 'downloadButton.border': '1px solid #fdba3b', + 'downloadButton.color': '#fff', + 'downloadButton.fontFamily': "'Noto Sans', sans-serif", + 'downloadButton.fontSize': '12px', + // main icons + 'menu.normalIcon.color': '#8a8a8a', + 'menu.activeIcon.color': '#555555', + 'menu.disabledIcon.color': '#434343', + 'menu.hoverIcon.color': '#e9e9e9', + // submenu icons + 'submenu.normalIcon.color': '#8a8a8a', + 'submenu.activeIcon.color': '#e9e9e9', + 'menu.iconSize.width': '24px', + 'menu.iconSize.height': '24px', + 'submenu.iconSize.width': '32px', + 'submenu.iconSize.height': '32px', + // submenu primary color + 'submenu.backgroundColor': '#1e1e1e', + 'submenu.partition.color': '#3c3c3c', + // submenu labels + 'submenu.normalLabel.color': '#8a8a8a', + 'submenu.normalLabel.fontWeight': 'lighter', + 'submenu.activeLabel.color': '#fff', + 'submenu.activeLabel.fontWeight': 'lighter', + // checkbox style + 'checkbox.border': '0px', + 'checkbox.backgroundColor': '#fff', + // range style + 'range.pointer.color': '#fff', + 'range.bar.color': '#666', + 'range.subbar.color': '#d1d1d1', + 'range.disabledPointer.color': '#414141', + 'range.disabledBar.color': '#282828', + 'range.disabledSubbar.color': '#414141', + 'range.value.color': '#fff', + 'range.value.fontWeight': 'lighter', + 'range.value.fontSize': '11px', + 'range.value.border': '1px solid #353535', + 'range.value.backgroundColor': '#151515', + 'range.title.color': '#fff', + 'range.title.fontWeight': 'lighter', + // colorpicker style + 'colorpicker.button.border': '1px solid #1e1e1e', + 'colorpicker.title.color': '#fff' +}); +// EXTERNAL MODULE: ./src/svg/default.svg +var svg_default = __webpack_require__(2534); +;// CONCATENATED MODULE: ./src/js/ui/theme/theme.js + + + + + + + + + + +/** + * Theme manager + * @class + * @param {Object} customTheme - custom theme + * @ignore + */ + +var Theme = /*#__PURE__*/function () { + function Theme(customTheme) { + _classCallCheck(this, Theme); + + this.styles = this._changeToObject((0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend)({}, standard, customTheme)); + styleLoad(this._styleMaker()); + + this._loadDefaultSvgIcon(); + } + /** + * Get a Style cssText or StyleObject + * @param {string} type - style type + * @returns {string|object} - cssText or StyleObject + */ + // eslint-disable-next-line complexity + + + _createClass(Theme, [{ + key: "getStyle", + value: function getStyle(type) { + var result = null; + var firstProperty = type.replace(/\..+$/, ''); + var option = this.styles[type]; + + switch (type) { + case 'common.bi': + result = this.styles[type].image; + break; + + case 'menu.icon': + result = { + active: this.styles["".concat(firstProperty, ".activeIcon")], + normal: this.styles["".concat(firstProperty, ".normalIcon")], + hover: this.styles["".concat(firstProperty, ".hoverIcon")], + disabled: this.styles["".concat(firstProperty, ".disabledIcon")] + }; + break; + + case 'submenu.icon': + result = { + active: this.styles["".concat(firstProperty, ".activeIcon")], + normal: this.styles["".concat(firstProperty, ".normalIcon")] + }; + break; + + case 'submenu.label': + result = { + active: this._makeCssText(this.styles["".concat(firstProperty, ".activeLabel")]), + normal: this._makeCssText(this.styles["".concat(firstProperty, ".normalLabel")]) + }; + break; + + case 'submenu.partition': + result = { + vertical: this._makeCssText((0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend)({}, option, { + borderLeft: "1px solid ".concat(option.color) + })), + horizontal: this._makeCssText((0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend)({}, option, { + borderBottom: "1px solid ".concat(option.color) + })) + }; + break; + + case 'range.disabledPointer': + case 'range.disabledBar': + case 'range.disabledSubbar': + case 'range.pointer': + case 'range.bar': + case 'range.subbar': + option.backgroundColor = option.color; + result = this._makeCssText(option); + break; + + default: + result = this._makeCssText(option); + break; + } + + return result; + } + /** + * Make css resource + * @returns {string} - serialized css text + * @private + */ + + }, { + key: "_styleMaker", + value: function _styleMaker() { + var submenuLabelStyle = this.getStyle('submenu.label'); + var submenuPartitionStyle = this.getStyle('submenu.partition'); + return style({ + subMenuLabelActive: submenuLabelStyle.active, + subMenuLabelNormal: submenuLabelStyle.normal, + submenuPartitionVertical: submenuPartitionStyle.vertical, + submenuPartitionHorizontal: submenuPartitionStyle.horizontal, + biSize: this.getStyle('common.bisize'), + subMenuRangeTitle: this.getStyle('range.title'), + submenuRangePointer: this.getStyle('range.pointer'), + submenuRangeBar: this.getStyle('range.bar'), + submenuRangeSubbar: this.getStyle('range.subbar'), + submenuDisabledRangePointer: this.getStyle('range.disabledPointer'), + submenuDisabledRangeBar: this.getStyle('range.disabledBar'), + submenuDisabledRangeSubbar: this.getStyle('range.disabledSubbar'), + submenuRangeValue: this.getStyle('range.value'), + submenuColorpickerTitle: this.getStyle('colorpicker.title'), + submenuColorpickerButton: this.getStyle('colorpicker.button'), + submenuCheckbox: this.getStyle('checkbox'), + menuIconSize: this.getStyle('menu.iconSize'), + submenuIconSize: this.getStyle('submenu.iconSize'), + menuIconStyle: this.getStyle('menu.icon'), + submenuIconStyle: this.getStyle('submenu.icon') + }); + } + /** + * Change to low dimensional object. + * @param {object} styleOptions - style object of user interface + * @returns {object} low level object for style apply + * @private + */ + + }, { + key: "_changeToObject", + value: function _changeToObject(styleOptions) { + var styleObject = {}; + (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.forEach)(styleOptions, function (value, key) { + var keyExplode = key.match(/^(.+)\.([a-z]+)$/i); + + var _keyExplode = _slicedToArray(keyExplode, 3), + property = _keyExplode[1], + subProperty = _keyExplode[2]; + + if (!styleObject[property]) { + styleObject[property] = {}; + } + + styleObject[property][subProperty] = value; + }); + return styleObject; + } + /** + * Style object to Csstext serialize + * @param {object} styleObject - style object + * @returns {string} - css text string + * @private + */ + + }, { + key: "_makeCssText", + value: function _makeCssText(styleObject) { + var _this = this; + + var converterStack = []; + (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.forEach)(styleObject, function (value, key) { + var _context, _context2; + + if (index_of_default()(_context = ['backgroundImage']).call(_context, key) > -1 && value !== 'none') { + value = "url(".concat(value, ")"); + } + + converterStack.push(concat_default()(_context2 = "".concat(_this._toUnderScore(key), ": ")).call(_context2, value)); + }); + return converterStack.join(';'); + } + /** + * Camel key string to Underscore string + * @param {string} targetString - change target + * @returns {string} + * @private + */ + + }, { + key: "_toUnderScore", + value: function _toUnderScore(targetString) { + return targetString.replace(/([A-Z])/g, function ($0, $1) { + return "-".concat($1.toLowerCase()); + }); + } + /** + * Load default svg icon + * @private + */ + + }, { + key: "_loadDefaultSvgIcon", + value: function _loadDefaultSvgIcon() { + if (!document.getElementById('tui-image-editor-svg-default-icons')) { + var parser = new DOMParser(); + var encodedURI = svg_default.replace(/data:image\/svg\+xml;base64,/, ''); + var dom = parser.parseFromString(atob(encodedURI), 'text/xml'); + document.body.appendChild(dom.documentElement); + } + } + /** + * Make className for svg icon + * @param {string} iconType - normal' or 'active' or 'hover' or 'disabled + * @param {boolean} isSubmenu - submenu icon or not. + * @returns {string} + * @private + */ + + }, { + key: "_makeIconClassName", + value: function _makeIconClassName(iconType, isSubmenu) { + var iconStyleInfo = isSubmenu ? this.getStyle('submenu.icon') : this.getStyle('menu.icon'); + var _iconStyleInfo$iconTy = iconStyleInfo[iconType], + path = _iconStyleInfo$iconTy.path, + name = _iconStyleInfo$iconTy.name; + return path && name ? iconType : "".concat(iconType, " use-default"); + } + /** + * Make svg use link path name + * @param {string} iconType - normal' or 'active' or 'hover' or 'disabled + * @param {boolean} isSubmenu - submenu icon or not. + * @returns {string} + * @private + */ + + }, { + key: "_makeSvgIconPrefix", + value: function _makeSvgIconPrefix(iconType, isSubmenu) { + var _context3; + + var iconStyleInfo = isSubmenu ? this.getStyle('submenu.icon') : this.getStyle('menu.icon'); + var _iconStyleInfo$iconTy2 = iconStyleInfo[iconType], + path = _iconStyleInfo$iconTy2.path, + name = _iconStyleInfo$iconTy2.name; + return path && name ? concat_default()(_context3 = "".concat(path, "#")).call(_context3, name, "-") : '#'; + } + /** + * Make svg use link path name + * @param {Array.} useIconTypes - normal' or 'active' or 'hover' or 'disabled + * @param {string} menuName - menu name + * @param {boolean} isSubmenu - submenu icon or not. + * @returns {string} + * @private + */ + + }, { + key: "_makeSvgItem", + value: function _makeSvgItem(useIconTypes, menuName, isSubmenu) { + var _this2 = this; + + return (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.map)(useIconTypes, function (iconType) { + var _context4, _context5; + + var svgIconPrefix = _this2._makeSvgIconPrefix(iconType, isSubmenu); + + var iconName = _this2._toUnderScore(menuName); + + var svgIconClassName = _this2._makeIconClassName(iconType, isSubmenu); + + return concat_default()(_context4 = concat_default()(_context5 = ""); + }).join(''); + } + /** + * Make svg icon set + * @param {Array.} useIconTypes - normal' or 'active' or 'hover' or 'disabled + * @param {string} menuName - menu name + * @param {boolean} isSubmenu - submenu icon or not. + * @returns {string} + */ + + }, { + key: "makeMenSvgIconSet", + value: function makeMenSvgIconSet(useIconTypes, menuName) { + var _context6; + + var isSubmenu = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; + return concat_default()(_context6 = "")).call(_context6, this._makeSvgItem(useIconTypes, menuName, isSubmenu), ""); + } + }]); + + return Theme; +}(); + +/* harmony default export */ var theme = (Theme); +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js-stable/reflect/construct.js +var construct = __webpack_require__(9146); +var construct_default = /*#__PURE__*/__webpack_require__.n(construct); +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js/object/create.js +var object_create = __webpack_require__(6623); +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js/object/set-prototype-of.js +var set_prototype_of = __webpack_require__(4230); +;// CONCATENATED MODULE: ../../node_modules/@babel/runtime-corejs3/helpers/esm/setPrototypeOf.js + +function _setPrototypeOf(o, p) { + _setPrototypeOf = set_prototype_of || function _setPrototypeOf(o, p) { + o.__proto__ = p; + return o; + }; + + return _setPrototypeOf(o, p); +} +;// CONCATENATED MODULE: ../../node_modules/@babel/runtime-corejs3/helpers/esm/inherits.js + + +function _inherits(subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function"); + } + + subClass.prototype = object_create(superClass && superClass.prototype, { + constructor: { + value: subClass, + writable: true, + configurable: true + } + }); + if (superClass) _setPrototypeOf(subClass, superClass); +} +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js/symbol/iterator.js +var iterator = __webpack_require__(3742); +;// CONCATENATED MODULE: ../../node_modules/@babel/runtime-corejs3/helpers/esm/typeof.js + + +function _typeof(obj) { + "@babel/helpers - typeof"; + + if (typeof symbol === "function" && typeof iterator === "symbol") { + _typeof = function _typeof(obj) { + return typeof obj; + }; + } else { + _typeof = function _typeof(obj) { + return obj && typeof symbol === "function" && obj.constructor === symbol && obj !== symbol.prototype ? "symbol" : typeof obj; + }; + } + + return _typeof(obj); +} +;// CONCATENATED MODULE: ../../node_modules/@babel/runtime-corejs3/helpers/esm/assertThisInitialized.js +function _assertThisInitialized(self) { + if (self === void 0) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return self; +} +;// CONCATENATED MODULE: ../../node_modules/@babel/runtime-corejs3/helpers/esm/possibleConstructorReturn.js + + +function _possibleConstructorReturn(self, call) { + if (call && (_typeof(call) === "object" || typeof call === "function")) { + return call; + } else if (call !== void 0) { + throw new TypeError("Derived constructors may only return object or undefined"); + } + + return _assertThisInitialized(self); +} +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js/object/get-prototype-of.js +var get_prototype_of = __webpack_require__(9856); +;// CONCATENATED MODULE: ../../node_modules/@babel/runtime-corejs3/helpers/esm/getPrototypeOf.js + + +function _getPrototypeOf(o) { + _getPrototypeOf = set_prototype_of ? get_prototype_of : function _getPrototypeOf(o) { + return o.__proto__ || get_prototype_of(o); + }; + return _getPrototypeOf(o); +} +// EXTERNAL MODULE: external {"commonjs":"tui-color-picker","commonjs2":"tui-color-picker","amd":"tui-color-picker","root":["tui","colorPicker"]} +var external_commonjs_tui_color_picker_commonjs2_tui_color_picker_amd_tui_color_picker_root_tui_colorPicker_ = __webpack_require__(4858); +var external_commonjs_tui_color_picker_commonjs2_tui_color_picker_amd_tui_color_picker_root_tui_colorPicker_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_tui_color_picker_commonjs2_tui_color_picker_amd_tui_color_picker_root_tui_colorPicker_); +;// CONCATENATED MODULE: ./src/js/ui/tools/colorpicker.js + + + + + + +var PICKER_COLOR = ['#000000', '#2a2a2a', '#545454', '#7e7e7e', '#a8a8a8', '#d2d2d2', '#ffffff', '', '#ff4040', '#ff6518', '#ffbb3b', '#03bd9e', '#00a9ff', '#515ce6', '#9e5fff', '#ff5583']; +/** + * Colorpicker control class + * @class + * @ignore + */ + +var Colorpicker = /*#__PURE__*/function () { + function Colorpicker(colorpickerElement, _ref) { + var _ref$defaultColor = _ref.defaultColor, + defaultColor = _ref$defaultColor === void 0 ? '#7e7e7e' : _ref$defaultColor, + _ref$toggleDirection = _ref.toggleDirection, + toggleDirection = _ref$toggleDirection === void 0 ? 'up' : _ref$toggleDirection, + usageStatistics = _ref.usageStatistics; + + _classCallCheck(this, Colorpicker); + + this.colorpickerElement = colorpickerElement; + this.usageStatistics = usageStatistics; + this._show = false; + this._colorpickerElement = colorpickerElement; + this._toggleDirection = toggleDirection; + + this._makePickerButtonElement(defaultColor); + + this._makePickerLayerElement(colorpickerElement, colorpickerElement.getAttribute('title')); + + this._color = defaultColor; + this.picker = external_commonjs_tui_color_picker_commonjs2_tui_color_picker_amd_tui_color_picker_root_tui_colorPicker_default().create({ + container: this.pickerElement, + preset: PICKER_COLOR, + color: defaultColor, + usageStatistics: this.usageStatistics + }); + + this._addEvent(); + } + /** + * Destroys the instance. + */ + + + _createClass(Colorpicker, [{ + key: "destroy", + value: function destroy() { + var _this = this; + + this._removeEvent(); + + this.picker.destroy(); + this.colorpickerElement.innerHTML = ''; + + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), this, function (value, key) { + _this[key] = null; + }); + } + /** + * Get color + * @returns {Number} color value + */ + + }, { + key: "color", + get: function get() { + return this._color; + } + /** + * Set color + * @param {string} color color value + */ + , + set: function set(color) { + this._color = color; + + this._changeColorElement(color); + } + /** + * Change color element + * @param {string} color color value + * #private + */ + + }, { + key: "_changeColorElement", + value: function _changeColorElement(color) { + if (color) { + this.colorElement.classList.remove('transparent'); + this.colorElement.style.backgroundColor = color; + } else { + this.colorElement.style.backgroundColor = '#fff'; + this.colorElement.classList.add('transparent'); + } + } + /** + * Make picker button element + * @param {string} defaultColor color value + * @private + */ + + }, { + key: "_makePickerButtonElement", + value: function _makePickerButtonElement(defaultColor) { + this.colorpickerElement.classList.add('tui-image-editor-button'); + this.colorElement = document.createElement('div'); + this.colorElement.className = 'color-picker-value'; + + if (defaultColor) { + this.colorElement.style.backgroundColor = defaultColor; + } else { + this.colorElement.classList.add('transparent'); + } + } + /** + * Make picker layer element + * @param {HTMLElement} colorpickerElement color picker element + * @param {string} title picker title + * @private + */ + + }, { + key: "_makePickerLayerElement", + value: function _makePickerLayerElement(colorpickerElement, title) { + var label = document.createElement('label'); + var triangle = document.createElement('div'); + this.pickerControl = document.createElement('div'); + this.pickerControl.className = 'color-picker-control'; + this.pickerElement = document.createElement('div'); + this.pickerElement.className = 'color-picker'; + label.innerHTML = title; + triangle.className = 'triangle'; + this.pickerControl.appendChild(this.pickerElement); + this.pickerControl.appendChild(triangle); + colorpickerElement.appendChild(this.pickerControl); + colorpickerElement.appendChild(this.colorElement); + colorpickerElement.appendChild(label); + } + /** + * Add event + * @private + */ + + }, { + key: "_addEvent", + value: function _addEvent() { + var _this2 = this, + _context; + + this.picker.on('selectColor', function (value) { + _this2._changeColorElement(value.color); + + _this2._color = value.color; + + _this2.fire('change', value.color); + }); + this.eventHandler = { + pickerToggle: bind_default()(_context = this._pickerToggleEventHandler).call(_context, this), + pickerHide: function pickerHide() { + return _this2.hide(); + } + }; + this.colorpickerElement.addEventListener('click', this.eventHandler.pickerToggle); + document.body.addEventListener('click', this.eventHandler.pickerHide); + } + /** + * Remove event + * @private + */ + + }, { + key: "_removeEvent", + value: function _removeEvent() { + this.colorpickerElement.removeEventListener('click', this.eventHandler.pickerToggle); + document.body.removeEventListener('click', this.eventHandler.pickerHide); + this.picker.off(); + } + /** + * Picker toggle event handler + * @param {object} event - change event + * @private + */ + + }, { + key: "_pickerToggleEventHandler", + value: function _pickerToggleEventHandler(event) { + var target = event.target; + + var isInPickerControl = target && this._isElementInColorPickerControl(target); + + if (!isInPickerControl || isInPickerControl && this._isPaletteButton(target)) { + this._show = !this._show; + this.pickerControl.style.display = this._show ? 'block' : 'none'; + + this._setPickerControlPosition(); + + this.fire('changeShow', this); + } + + event.stopPropagation(); + } + /** + * Check hex input or not + * @param {Element} target - Event target element + * @returns {boolean} + * @private + */ + + }, { + key: "_isPaletteButton", + value: function _isPaletteButton(target) { + return target.className === 'tui-colorpicker-palette-button'; + } + /** + * Check given element is in pickerControl element + * @param {Element} element - element to check + * @returns {boolean} + * @private + */ + + }, { + key: "_isElementInColorPickerControl", + value: function _isElementInColorPickerControl(element) { + var parentNode = element; + + while (parentNode !== document.body) { + if (!parentNode) { + break; + } + + if (parentNode === this.pickerControl) { + return true; + } + + parentNode = parentNode.parentNode; + } + + return false; + } + }, { + key: "hide", + value: function hide() { + this._show = false; + this.pickerControl.style.display = 'none'; + } + /** + * Set picker control position + * @private + */ + + }, { + key: "_setPickerControlPosition", + value: function _setPickerControlPosition() { + var controlStyle = this.pickerControl.style; + var halfPickerWidth = this._colorpickerElement.clientWidth / 2 + 2; + var left = this.pickerControl.offsetWidth / 2 - halfPickerWidth; + var top = (this.pickerControl.offsetHeight + 10) * -1; + + if (this._toggleDirection === 'down') { + top = 30; + } + + controlStyle.top = "".concat(top, "px"); + controlStyle.left = "-".concat(left, "px"); + } + }]); + + return Colorpicker; +}(); + +external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().CustomEvents.mixin(Colorpicker); +/* harmony default export */ var colorpicker = (Colorpicker); +;// CONCATENATED MODULE: ./src/js/ui/tools/range.js + + + + + + + + +var INPUT_FILTER_REGEXP = /(-?)([0-9]*)[^0-9]*([0-9]*)/g; +/** + * Range control class + * @class + * @ignore + */ + +var Range = /*#__PURE__*/function () { + /** + * @constructor + * @extends {View} + * @param {Object} rangeElements - Html resources for creating sliders + * @param {HTMLElement} rangeElements.slider - b + * @param {HTMLElement} [rangeElements.input] - c + * @param {Object} options - Slider make options + * @param {number} options.min - min value + * @param {number} options.max - max value + * @param {number} options.value - default value + * @param {number} [options.useDecimal] - Decimal point processing. + * @param {boolean} [options.realTimeEvent] - Reflect live events. + */ + function Range(rangeElements) { + var _context, _context2, _context3, _context4, _context5, _context6, _context7; + + var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + + _classCallCheck(this, Range); + + this._value = options.value || 0; + this.rangeElement = rangeElements.slider; + this.rangeInputElement = rangeElements.input; + + this._drawRangeElement(); + + this.rangeWidth = this._getRangeWidth(); + this._min = options.min || 0; + this._max = options.max || 100; + this._useDecimal = options.useDecimal; + this._absMax = this._min * -1 + this._max; + this.realTimeEvent = options.realTimeEvent || false; + this.eventHandler = { + startChangingSlide: bind_default()(_context = this._startChangingSlide).call(_context, this), + stopChangingSlide: bind_default()(_context2 = this._stopChangingSlide).call(_context2, this), + changeSlide: bind_default()(_context3 = this._changeSlide).call(_context3, this), + changeSlideFinally: bind_default()(_context4 = this._changeSlideFinally).call(_context4, this), + changeInput: bind_default()(_context5 = this._changeValueWithInput).call(_context5, this, false), + changeInputFinally: bind_default()(_context6 = this._changeValueWithInput).call(_context6, this, true), + changeInputWithArrow: bind_default()(_context7 = this._changeValueWithInputKeyEvent).call(_context7, this) + }; + + this._addClickEvent(); + + this._addDragEvent(); + + this._addInputEvent(); + + this.value = options.value; + this.trigger('change'); + } + /** + * Destroys the instance. + */ + + + _createClass(Range, [{ + key: "destroy", + value: function destroy() { + var _this = this; + + this._removeClickEvent(); + + this._removeDragEvent(); + + this._removeInputEvent(); + + this.rangeElement.innerHTML = ''; + + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), this, function (value, key) { + _this[key] = null; + }); + } + }, { + key: "max", + get: function get() { + return this._max; + } + /** + * Set range max value and re position cursor + * @param {number} maxValue - max value + */ + , + set: function set(maxValue) { + this._max = maxValue; + this._absMax = this._min * -1 + this._max; + this.value = this._value; + } + }, { + key: "min", + get: function get() { + return this._min; + } + /** + * Set range min value and re position cursor + * @param {number} minValue - min value + */ + , + set: function set(minValue) { + this._min = minValue; + this.max = this._max; + } + /** + * Get range value + * @returns {Number} range value + */ + + }, { + key: "value", + get: function get() { + return this._value; + } + /** + * Set range value + * @param {Number} value range value + */ + , + set: function set(value) { + value = this._useDecimal ? value : toInteger(value); + var absValue = value - this._min; + var leftPosition = absValue * this.rangeWidth / this._absMax; + + if (this.rangeWidth < leftPosition) { + leftPosition = this.rangeWidth; + } + + this.pointer.style.left = "".concat(leftPosition, "px"); + this.subbar.style.right = "".concat(this.rangeWidth - leftPosition, "px"); + this._value = value; + + if (this.rangeInputElement) { + this.rangeInputElement.value = value; + } + } + /** + * event trigger + * @param {string} type - type + */ + + }, { + key: "trigger", + value: function trigger(type) { + this.fire(type, this._value); + } + /** + * Calculate slider width + * @returns {number} - slider width + */ + + }, { + key: "_getRangeWidth", + value: function _getRangeWidth() { + var getElementWidth = function getElementWidth(element) { + return toInteger(window.getComputedStyle(element, null).width); + }; + + return getElementWidth(this.rangeElement) - getElementWidth(this.pointer); + } + /** + * Make range element + * @private + */ + + }, { + key: "_drawRangeElement", + value: function _drawRangeElement() { + this.rangeElement.classList.add('tui-image-editor-range'); + this.bar = document.createElement('div'); + this.bar.className = 'tui-image-editor-virtual-range-bar'; + this.subbar = document.createElement('div'); + this.subbar.className = 'tui-image-editor-virtual-range-subbar'; + this.pointer = document.createElement('div'); + this.pointer.className = 'tui-image-editor-virtual-range-pointer'; + this.bar.appendChild(this.subbar); + this.bar.appendChild(this.pointer); + this.rangeElement.appendChild(this.bar); + } + /** + * Add range input editing event + * @private + */ + + }, { + key: "_addInputEvent", + value: function _addInputEvent() { + if (this.rangeInputElement) { + this.rangeInputElement.addEventListener('keydown', this.eventHandler.changeInputWithArrow); + this.rangeInputElement.addEventListener('keyup', this.eventHandler.changeInput); + this.rangeInputElement.addEventListener('blur', this.eventHandler.changeInputFinally); + } + } + /** + * Remove range input editing event + * @private + */ + + }, { + key: "_removeInputEvent", + value: function _removeInputEvent() { + if (this.rangeInputElement) { + this.rangeInputElement.removeEventListener('keydown', this.eventHandler.changeInputWithArrow); + this.rangeInputElement.removeEventListener('keyup', this.eventHandler.changeInput); + this.rangeInputElement.removeEventListener('blur', this.eventHandler.changeInputFinally); + } + } + /** + * change angle event + * @param {object} event - key event + * @private + */ + + }, { + key: "_changeValueWithInputKeyEvent", + value: function _changeValueWithInputKeyEvent(event) { + var _context8; + + var keyCode = event.keyCode, + target = event.target; + + if (index_of_default()(_context8 = [keyCodes.ARROW_UP, keyCodes.ARROW_DOWN]).call(_context8, keyCode) < 0) { + return; + } + + var value = Number(target.value); + value = this._valueUpDownForKeyEvent(value, keyCode); + var unChanged = value < this._min || value > this._max; + + if (!unChanged) { + var clampValue = clamp(value, this._min, this.max); + this.value = clampValue; + this.fire('change', clampValue, false); + } + } + /** + * value up down for input + * @param {number} value - original value number + * @param {number} keyCode - input event key code + * @returns {number} value - changed value + * @private + */ + + }, { + key: "_valueUpDownForKeyEvent", + value: function _valueUpDownForKeyEvent(value, keyCode) { + var step = this._useDecimal ? 0.1 : 1; + + if (keyCode === keyCodes.ARROW_UP) { + value += step; + } else if (keyCode === keyCodes.ARROW_DOWN) { + value -= step; + } + + return value; + } + /** + * change angle event + * @param {boolean} isLast - Is last change + * @param {object} event - key event + * @private + */ + + }, { + key: "_changeValueWithInput", + value: function _changeValueWithInput(isLast, event) { + var _context9; + + var keyCode = event.keyCode, + target = event.target; + + if (index_of_default()(_context9 = [keyCodes.ARROW_UP, keyCodes.ARROW_DOWN]).call(_context9, keyCode) >= 0) { + return; + } + + var stringValue = this._filterForInputText(target.value); + + var waitForChange = !stringValue || isNaN(stringValue); + target.value = stringValue; + + if (!waitForChange) { + var value = this._useDecimal ? Number(stringValue) : toInteger(stringValue); + value = clamp(value, this._min, this.max); + this.value = value; + this.fire('change', value, isLast); + } + } + /** + * Add Range click event + * @private + */ + + }, { + key: "_addClickEvent", + value: function _addClickEvent() { + this.rangeElement.addEventListener('click', this.eventHandler.changeSlideFinally); + } + /** + * Remove Range click event + * @private + */ + + }, { + key: "_removeClickEvent", + value: function _removeClickEvent() { + this.rangeElement.removeEventListener('click', this.eventHandler.changeSlideFinally); + } + /** + * Add Range drag event + * @private + */ + + }, { + key: "_addDragEvent", + value: function _addDragEvent() { + this.pointer.addEventListener('mousedown', this.eventHandler.startChangingSlide); + } + /** + * Remove Range drag event + * @private + */ + + }, { + key: "_removeDragEvent", + value: function _removeDragEvent() { + this.pointer.removeEventListener('mousedown', this.eventHandler.startChangingSlide); + } + /** + * change angle event + * @param {object} event - change event + * @private + */ + + }, { + key: "_changeSlide", + value: function _changeSlide(event) { + var changePosition = event.screenX; + var diffPosition = changePosition - this.firstPosition; + var touchPx = this.firstLeft + diffPosition; + touchPx = touchPx > this.rangeWidth ? this.rangeWidth : touchPx; + touchPx = touchPx < 0 ? 0 : touchPx; + this.pointer.style.left = "".concat(touchPx, "px"); + this.subbar.style.right = "".concat(this.rangeWidth - touchPx, "px"); + var ratio = touchPx / this.rangeWidth; + var resultValue = this._absMax * ratio + this._min; + var value = this._useDecimal ? resultValue : toInteger(resultValue); + var isValueChanged = this.value !== value; + + if (isValueChanged) { + this.value = value; + + if (this.realTimeEvent) { + this.fire('change', this._value, false); + } + } + } + }, { + key: "_changeSlideFinally", + value: function _changeSlideFinally(event) { + event.stopPropagation(); + + if (event.target.className !== 'tui-image-editor-range') { + return; + } + + var touchPx = event.offsetX; + var ratio = touchPx / this.rangeWidth; + var value = this._absMax * ratio + this._min; + this.pointer.style.left = "".concat(ratio * this.rangeWidth, "px"); + this.subbar.style.right = "".concat((1 - ratio) * this.rangeWidth, "px"); + this.value = value; + this.fire('change', value, true); + } + }, { + key: "_startChangingSlide", + value: function _startChangingSlide(event) { + this.firstPosition = event.screenX; + this.firstLeft = toInteger(this.pointer.style.left) || 0; + document.addEventListener('mousemove', this.eventHandler.changeSlide); + document.addEventListener('mouseup', this.eventHandler.stopChangingSlide); + } + /** + * stop change angle event + * @private + */ + + }, { + key: "_stopChangingSlide", + value: function _stopChangingSlide() { + this.fire('change', this._value, true); + document.removeEventListener('mousemove', this.eventHandler.changeSlide); + document.removeEventListener('mouseup', this.eventHandler.stopChangingSlide); + } + /** + * Unnecessary string filtering. + * @param {string} inputValue - origin string of input + * @returns {string} filtered string + * @private + */ + + }, { + key: "_filterForInputText", + value: function _filterForInputText(inputValue) { + return inputValue.replace(INPUT_FILTER_REGEXP, '$1$2$3'); + } + }]); + + return Range; +}(); + +external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().CustomEvents.mixin(Range); +/* harmony default export */ var range = (Range); +;// CONCATENATED MODULE: ./src/js/ui/submenuBase.js + + + + + +/** + * Submenu Base Class + * @class + * @ignore + */ + +var Submenu = /*#__PURE__*/function () { + /** + * @param {HTMLElement} subMenuElement - submenu dom element + * @param {Locale} locale - translate text + * @param {string} name - name of sub menu + * @param {Object} iconStyle - style of icon + * @param {string} menuBarPosition - position of menu + * @param {*} templateHtml - template for SubMenuElement + * @param {boolean} [usageStatistics=false] - template for SubMenuElement + */ + function Submenu(subMenuElement, _ref) { + var locale = _ref.locale, + name = _ref.name, + makeSvgIcon = _ref.makeSvgIcon, + menuBarPosition = _ref.menuBarPosition, + templateHtml = _ref.templateHtml, + usageStatistics = _ref.usageStatistics; + + _classCallCheck(this, Submenu); + + this.subMenuElement = subMenuElement; + this.menuBarPosition = menuBarPosition; + this.toggleDirection = menuBarPosition === 'top' ? 'down' : 'up'; + this.colorPickerControls = []; + this.usageStatistics = usageStatistics; + this.eventHandler = {}; + + this._makeSubMenuElement({ + locale: locale, + name: name, + makeSvgIcon: makeSvgIcon, + templateHtml: templateHtml + }); + } + /** + * editor dom ui query selector + * @param {string} selectName - query selector string name + * @returns {HTMLElement} + */ + + + _createClass(Submenu, [{ + key: "selector", + value: function selector(selectName) { + return this.subMenuElement.querySelector(selectName); + } + /** + * change show state change for colorpicker instance + * @param {Colorpicker} occurredControl - target Colorpicker Instance + */ + + }, { + key: "colorPickerChangeShow", + value: function colorPickerChangeShow(occurredControl) { + var _context; + + for_each_default()(_context = this.colorPickerControls).call(_context, function (pickerControl) { + if (occurredControl !== pickerControl) { + pickerControl.hide(); + } + }); + } + /** + * Get button type + * @param {HTMLElement} button - event target element + * @param {array} buttonNames - Array of button names + * @returns {string} - button type + */ + + }, { + key: "getButtonType", + value: function getButtonType(button, buttonNames) { + return button.className.match(RegExp("(".concat(buttonNames.join('|'), ")")))[0]; + } + /** + * Get button type + * @param {HTMLElement} target - event target element + * @param {string} removeClass - remove class name + * @param {string} addClass - add class name + */ + + }, { + key: "changeClass", + value: function changeClass(target, removeClass, addClass) { + target.classList.remove(removeClass); + target.classList.add(addClass); + } + /** + * Interface method whose implementation is optional. + * Returns the menu to its default state. + */ + + }, { + key: "changeStandbyMode", + value: function changeStandbyMode() {} + /** + * Interface method whose implementation is optional. + * Executed when the menu starts. + */ + + }, { + key: "changeStartMode", + value: function changeStartMode() {} + /** + * Make submenu dom element + * @param {Locale} locale - translate text + * @param {string} name - submenu name + * @param {Object} iconStyle - icon style + * @param {*} templateHtml - template for SubMenuElement + * @private + */ + + }, { + key: "_makeSubMenuElement", + value: function _makeSubMenuElement(_ref2) { + var locale = _ref2.locale, + name = _ref2.name, + iconStyle = _ref2.iconStyle, + makeSvgIcon = _ref2.makeSvgIcon, + templateHtml = _ref2.templateHtml; + var iconSubMenu = document.createElement('div'); + iconSubMenu.className = "tui-image-editor-menu-".concat(name); + iconSubMenu.innerHTML = templateHtml({ + locale: locale, + iconStyle: iconStyle, + makeSvgIcon: makeSvgIcon + }); + this.subMenuElement.appendChild(iconSubMenu); + } + }, { + key: "_onStartEditingInputBox", + value: function _onStartEditingInputBox() { + this.fire(eventNames.INPUT_BOX_EDITING_STARTED); + } + }, { + key: "_onStopEditingInputBox", + value: function _onStopEditingInputBox() { + this.fire(eventNames.INPUT_BOX_EDITING_STOPPED); + } + }]); + + return Submenu; +}(); + +external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.CustomEvents.mixin(Submenu); +/* harmony default export */ var submenuBase = (Submenu); +;// CONCATENATED MODULE: ./src/js/ui/template/submenu/shape.js + + +/** + * @param {Object} submenuInfo - submenu info for make template + * @param {Locale} locale - Translate text + * @param {Function} makeSvgIcon - svg icon generator + * @returns {string} + */ +/* harmony default export */ var shape = (function (_ref) { + var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8; + + var locale = _ref.locale, + makeSvgIcon = _ref.makeSvgIcon; + return concat_default()(_context = concat_default()(_context2 = concat_default()(_context3 = concat_default()(_context4 = concat_default()(_context5 = concat_default()(_context6 = concat_default()(_context7 = concat_default()(_context8 = "\n
            \n
          • \n
            \n
            \n ".concat(makeSvgIcon(['normal', 'active'], 'shape-rectangle', true), "\n
            \n \n
            \n
            \n
            \n ")).call(_context7, makeSvgIcon(['normal', 'active'], 'shape-circle', true), "\n
            \n \n
            \n
            \n
            \n ")).call(_context5, makeSvgIcon(['normal', 'active'], 'shape-triangle', true), "\n
            \n \n
            \n
            • \n
          • \n
            \n
            • \n
          • \n
            \n
            \n
            • \n
          • \n
            \n
            • \n
          • \n \n
            \n \n
            • \n
          \n"); +}); +;// CONCATENATED MODULE: ./src/js/ui/shape.js + + + + + + + + +function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + + + + + + + + +var SHAPE_DEFAULT_OPTION = { + stroke: '#ffbb3b', + fill: '', + strokeWidth: 3 +}; +/** + * Shape ui class + * @class + * @ignore + */ + +var Shape = /*#__PURE__*/function (_Submenu) { + _inherits(Shape, _Submenu); + + var _super = _createSuper(Shape); + + function Shape(subMenuElement, _ref) { + var _this; + + var locale = _ref.locale, + makeSvgIcon = _ref.makeSvgIcon, + menuBarPosition = _ref.menuBarPosition, + usageStatistics = _ref.usageStatistics; + + _classCallCheck(this, Shape); + + _this = _super.call(this, subMenuElement, { + locale: locale, + name: 'shape', + makeSvgIcon: makeSvgIcon, + menuBarPosition: menuBarPosition, + templateHtml: shape, + usageStatistics: usageStatistics + }); + _this.type = null; + _this.options = SHAPE_DEFAULT_OPTION; + _this._els = { + shapeSelectButton: _this.selector('.tie-shape-button'), + shapeColorButton: _this.selector('.tie-shape-color-button'), + strokeRange: new range({ + slider: _this.selector('.tie-stroke-range'), + input: _this.selector('.tie-stroke-range-value') + }, defaultShapeStrokeValues), + fillColorpicker: new colorpicker(_this.selector('.tie-color-fill'), { + defaultColor: '', + toggleDirection: _this.toggleDirection, + usageStatistics: _this.usageStatistics + }), + strokeColorpicker: new colorpicker(_this.selector('.tie-color-stroke'), { + defaultColor: '#ffbb3b', + toggleDirection: _this.toggleDirection, + usageStatistics: _this.usageStatistics + }) + }; + + _this.colorPickerControls.push(_this._els.fillColorpicker); + + _this.colorPickerControls.push(_this._els.strokeColorpicker); + + _this.colorPickerInputBoxes = []; + + _this.colorPickerInputBoxes.push(_this._els.fillColorpicker.colorpickerElement.querySelector(selectorNames.COLOR_PICKER_INPUT_BOX)); + + _this.colorPickerInputBoxes.push(_this._els.strokeColorpicker.colorpickerElement.querySelector(selectorNames.COLOR_PICKER_INPUT_BOX)); + + return _this; + } + /** + * Destroys the instance. + */ + + + _createClass(Shape, [{ + key: "destroy", + value: function destroy() { + this._removeEvent(); + + this._els.strokeRange.destroy(); + + this._els.fillColorpicker.destroy(); + + this._els.strokeColorpicker.destroy(); + + assignmentForDestroy(this); + } + /** + * Add event for shape + * @param {Object} actions - actions for shape + * @param {Function} actions.changeShape - change shape mode + * @param {Function} actions.setDrawingShape - set drawing shape + */ + + }, { + key: "addEvent", + value: function addEvent(actions) { + var _context, + _context2, + _context3, + _context4, + _context5, + _context6, + _this2 = this; + + this.eventHandler.shapeTypeSelected = bind_default()(_context = this._changeShapeHandler).call(_context, this); + this.actions = actions; + + this._els.shapeSelectButton.addEventListener('click', this.eventHandler.shapeTypeSelected); + + this._els.strokeRange.on('change', bind_default()(_context2 = this._changeStrokeRangeHandler).call(_context2, this)); + + this._els.fillColorpicker.on('change', bind_default()(_context3 = this._changeFillColorHandler).call(_context3, this)); + + this._els.strokeColorpicker.on('change', bind_default()(_context4 = this._changeStrokeColorHandler).call(_context4, this)); + + this._els.fillColorpicker.on('changeShow', bind_default()(_context5 = this.colorPickerChangeShow).call(_context5, this)); + + this._els.strokeColorpicker.on('changeShow', bind_default()(_context6 = this.colorPickerChangeShow).call(_context6, this)); + + external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().forEachArray(this.colorPickerInputBoxes, function (inputBox) { + var _context7, _context8; + + inputBox.addEventListener(eventNames.FOCUS, bind_default()(_context7 = _this2._onStartEditingInputBox).call(_context7, _this2)); + inputBox.addEventListener(eventNames.BLUR, bind_default()(_context8 = _this2._onStopEditingInputBox).call(_context8, _this2)); + }, this); + } + /** + * Remove event + * @private + */ + + }, { + key: "_removeEvent", + value: function _removeEvent() { + var _this3 = this; + + this._els.shapeSelectButton.removeEventListener('click', this.eventHandler.shapeTypeSelected); + + this._els.strokeRange.off(); + + this._els.fillColorpicker.off(); + + this._els.strokeColorpicker.off(); + + external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().forEachArray(this.colorPickerInputBoxes, function (inputBox) { + var _context9, _context10; + + inputBox.removeEventListener(eventNames.FOCUS, bind_default()(_context9 = _this3._onStartEditingInputBox).call(_context9, _this3)); + inputBox.removeEventListener(eventNames.BLUR, bind_default()(_context10 = _this3._onStopEditingInputBox).call(_context10, _this3)); + }, this); + } + /** + * Set Shape status + * @param {Object} options - options of shape status + * @param {string} strokeWidth - stroke width + * @param {string} strokeColor - stroke color + * @param {string} fillColor - fill color + */ + + }, { + key: "setShapeStatus", + value: function setShapeStatus(_ref2) { + var strokeWidth = _ref2.strokeWidth, + strokeColor = _ref2.strokeColor, + fillColor = _ref2.fillColor; + this._els.strokeRange.value = strokeWidth; + this._els.strokeColorpicker.color = strokeColor; + this._els.fillColorpicker.color = fillColor; + this.options.stroke = strokeColor; + this.options.fill = fillColor; + this.options.strokeWidth = strokeWidth; + this.actions.setDrawingShape(this.type, { + strokeWidth: strokeWidth + }); + } + /** + * Executed when the menu starts. + */ + + }, { + key: "changeStartMode", + value: function changeStartMode() { + this.actions.stopDrawingMode(); + } + /** + * Returns the menu to its default state. + */ + + }, { + key: "changeStandbyMode", + value: function changeStandbyMode() { + this.type = null; + this.actions.changeSelectableAll(true); + + this._els.shapeSelectButton.classList.remove('circle'); + + this._els.shapeSelectButton.classList.remove('triangle'); + + this._els.shapeSelectButton.classList.remove('rect'); + } + /** + * set range stroke max value + * @param {number} maxValue - expect max value for change + */ + + }, { + key: "setMaxStrokeValue", + value: function setMaxStrokeValue(maxValue) { + var strokeMaxValue = maxValue; + + if (strokeMaxValue <= 0) { + strokeMaxValue = defaultShapeStrokeValues.max; + } + + this._els.strokeRange.max = strokeMaxValue; + } + /** + * Set stroke value + * @param {number} value - expect value for strokeRange change + */ + + }, { + key: "setStrokeValue", + value: function setStrokeValue(value) { + this._els.strokeRange.value = value; + + this._els.strokeRange.trigger('change'); + } + /** + * Get stroke value + * @returns {number} - stroke range value + */ + + }, { + key: "getStrokeValue", + value: function getStrokeValue() { + return this._els.strokeRange.value; + } + /** + * Change icon color + * @param {object} event - add button event object + * @private + */ + + }, { + key: "_changeShapeHandler", + value: function _changeShapeHandler(event) { + var button = event.target.closest('.tui-image-editor-button'); + + if (button) { + this.actions.stopDrawingMode(); + this.actions.discardSelection(); + var shapeType = this.getButtonType(button, ['circle', 'triangle', 'rect']); + + if (this.type === shapeType) { + this.changeStandbyMode(); + return; + } + + this.changeStandbyMode(); + this.type = shapeType; + event.currentTarget.classList.add(shapeType); + this.actions.changeSelectableAll(false); + this.actions.modeChange('shape'); + } + } + /** + * Change stroke range + * @param {number} value - stroke range value + * @param {boolean} isLast - Is last change + * @private + */ + + }, { + key: "_changeStrokeRangeHandler", + value: function _changeStrokeRangeHandler(value, isLast) { + this.options.strokeWidth = toInteger(value); + this.actions.changeShape({ + strokeWidth: value + }, !isLast); + this.actions.setDrawingShape(this.type, this.options); + } + /** + * Change shape color + * @param {string} color - fill color + * @private + */ + + }, { + key: "_changeFillColorHandler", + value: function _changeFillColorHandler(color) { + color = color || 'transparent'; + this.options.fill = color; + this.actions.changeShape({ + fill: color + }); + } + /** + * Change shape stroke color + * @param {string} color - fill color + * @private + */ + + }, { + key: "_changeStrokeColorHandler", + value: function _changeStrokeColorHandler(color) { + color = color || 'transparent'; + this.options.stroke = color; + this.actions.changeShape({ + stroke: color + }); + } + }]); + + return Shape; +}(submenuBase); + +/* harmony default export */ var ui_shape = (Shape); +;// CONCATENATED MODULE: ./src/js/ui/template/submenu/crop.js + + +/** + * @param {Object} submenuInfo - submenu info for make template + * @param {Locale} locale - Translate text + * @param {Function} makeSvgIcon - svg icon generator + * @returns {string} + */ +/* harmony default export */ var crop = (function (_ref) { + var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17; + + var locale = _ref.locale, + makeSvgIcon = _ref.makeSvgIcon; + return concat_default()(_context = concat_default()(_context2 = concat_default()(_context3 = concat_default()(_context4 = concat_default()(_context5 = concat_default()(_context6 = concat_default()(_context7 = concat_default()(_context8 = concat_default()(_context9 = concat_default()(_context10 = concat_default()(_context11 = concat_default()(_context12 = concat_default()(_context13 = concat_default()(_context14 = concat_default()(_context15 = concat_default()(_context16 = concat_default()(_context17 = "\n
            \n
          • \n
            \n
            \n ".concat(makeSvgIcon(['normal', 'active'], 'shape-rectangle', true), "\n
            \n \n
            \n
            \n
            \n ")).call(_context16, makeSvgIcon(['normal', 'active'], 'crop', true), "\n
            \n \n
            \n
            \n
            \n ")).call(_context14, makeSvgIcon(['normal', 'active'], 'crop', true), "\n
            \n \n
            \n
            \n
            \n ")).call(_context12, makeSvgIcon(['normal', 'active'], 'crop', true), "\n
            \n \n
            \n
            \n
            \n ")).call(_context10, makeSvgIcon(['normal', 'active'], 'crop', true), "\n
            \n \n
            \n
            \n
            \n ")).call(_context8, makeSvgIcon(['normal', 'active'], 'crop', true), "\n
            \n \n
            \n
            \n
            \n ")).call(_context6, makeSvgIcon(['normal', 'active'], 'crop', true), "\n
            \n \n
            \n
            • \n
          • \n
            • \n
          • \n
            \n
            • \n
          • \n
            \n ")).call(_context4, makeSvgIcon(['normal', 'active'], 'apply'), "\n \n
            \n
            \n ")).call(_context2, makeSvgIcon(['normal', 'active'], 'cancel'), "\n \n
            \n
            • \n
          \n"); +}); +;// CONCATENATED MODULE: ./src/js/ui/crop.js + + + + + + + + + + + +function crop_createSuper(Derived) { var hasNativeReflectConstruct = crop_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function crop_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + + + + + +/** + * Crop ui class + * @class + * @ignore + */ + +var Crop = /*#__PURE__*/function (_Submenu) { + _inherits(Crop, _Submenu); + + var _super = crop_createSuper(Crop); + + function Crop(subMenuElement, _ref) { + var _this; + + var locale = _ref.locale, + makeSvgIcon = _ref.makeSvgIcon, + menuBarPosition = _ref.menuBarPosition, + usageStatistics = _ref.usageStatistics; + + _classCallCheck(this, Crop); + + _this = _super.call(this, subMenuElement, { + locale: locale, + name: 'crop', + makeSvgIcon: makeSvgIcon, + menuBarPosition: menuBarPosition, + templateHtml: crop, + usageStatistics: usageStatistics + }); + _this.status = 'active'; + _this._els = { + apply: _this.selector('.tie-crop-button .apply'), + cancel: _this.selector('.tie-crop-button .cancel'), + preset: _this.selector('.tie-crop-preset-button') + }; + _this.defaultPresetButton = _this._els.preset.querySelector('.preset-none'); + return _this; + } + /** + * Destroys the instance. + */ + + + _createClass(Crop, [{ + key: "destroy", + value: function destroy() { + this._removeEvent(); + + assignmentForDestroy(this); + } + /** + * Add event for crop + * @param {Object} actions - actions for crop + * @param {Function} actions.crop - crop action + * @param {Function} actions.cancel - cancel action + * @param {Function} actions.preset - draw rectzone at a predefined ratio + */ + + }, { + key: "addEvent", + value: function addEvent(actions) { + var _context, _context2, _context3; + + var apply = bind_default()(_context = this._applyEventHandler).call(_context, this); + + var cancel = bind_default()(_context2 = this._cancelEventHandler).call(_context2, this); + + var cropzonePreset = bind_default()(_context3 = this._cropzonePresetEventHandler).call(_context3, this); + + this.eventHandler = { + apply: apply, + cancel: cancel, + cropzonePreset: cropzonePreset + }; + this.actions = actions; + + this._els.apply.addEventListener('click', apply); + + this._els.cancel.addEventListener('click', cancel); + + this._els.preset.addEventListener('click', cropzonePreset); + } + /** + * Remove event + * @private + */ + + }, { + key: "_removeEvent", + value: function _removeEvent() { + this._els.apply.removeEventListener('click', this.eventHandler.apply); + + this._els.cancel.removeEventListener('click', this.eventHandler.cancel); + + this._els.preset.removeEventListener('click', this.eventHandler.cropzonePreset); + } + }, { + key: "_applyEventHandler", + value: function _applyEventHandler() { + this.actions.crop(); + + this._els.apply.classList.remove('active'); + } + }, { + key: "_cancelEventHandler", + value: function _cancelEventHandler() { + this.actions.cancel(); + + this._els.apply.classList.remove('active'); + } + }, { + key: "_cropzonePresetEventHandler", + value: function _cropzonePresetEventHandler(event) { + var button = event.target.closest('.tui-image-editor-button.preset'); + + if (button) { + var _button$className$mat = button.className.match(/preset-[^\s]+/), + _button$className$mat2 = _slicedToArray(_button$className$mat, 1), + presetType = _button$className$mat2[0]; + + this._setPresetButtonActive(button); + + this.actions.preset(presetType); + } + } + /** + * Executed when the menu starts. + */ + + }, { + key: "changeStartMode", + value: function changeStartMode() { + this.actions.modeChange('crop'); + } + /** + * Returns the menu to its default state. + */ + + }, { + key: "changeStandbyMode", + value: function changeStandbyMode() { + this.actions.stopDrawingMode(); + + this._setPresetButtonActive(); + } + /** + * Change apply button status + * @param {Boolean} enableStatus - apply button status + */ + + }, { + key: "changeApplyButtonStatus", + value: function changeApplyButtonStatus(enableStatus) { + if (enableStatus) { + this._els.apply.classList.add('active'); + } else { + this._els.apply.classList.remove('active'); + } + } + /** + * Set preset button to active status + * @param {HTMLElement} button - event target element + * @private + */ + + }, { + key: "_setPresetButtonActive", + value: function _setPresetButtonActive() { + var button = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.defaultPresetButton; + + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), slice_default()([]).call(this._els.preset.querySelectorAll('.preset')), function (presetButton) { + presetButton.classList.remove('active'); + }); + + if (button) { + button.classList.add('active'); + } + } + }]); + + return Crop; +}(submenuBase); + +/* harmony default export */ var ui_crop = (Crop); +;// CONCATENATED MODULE: ./src/js/ui/template/submenu/resize.js + + +/** + * @param {Object} submenuInfo - submenu info for make template + * @param {Locale} locale - Translate text + * @param {Function} makeSvgIcon - svg icon generator + * @returns {string} + */ +/* harmony default export */ var resize = (function (_ref) { + var _context, _context2, _context3, _context4, _context5, _context6; + + var locale = _ref.locale, + makeSvgIcon = _ref.makeSvgIcon; + return concat_default()(_context = concat_default()(_context2 = concat_default()(_context3 = concat_default()(_context4 = concat_default()(_context5 = concat_default()(_context6 = "\n
            \n
          • \n
            \n \n
            \n \n
            \n \n
            \n \n
            \n
            • \n
          • \n
          • \n
            \n
            • \n
          • \n
            \n
            \n \n
            \n
            \n
            • \n
          • \n
          • \n
            \n
            • \n
          • \n
          • \n
            \n ")).call(_context4, makeSvgIcon(['normal', 'active'], 'apply'), "\n \n
            \n
            \n ")).call(_context2, makeSvgIcon(['normal', 'active'], 'cancel'), "\n \n
            \n
            • \n
          \n"); +}); +;// CONCATENATED MODULE: ./src/js/ui/resize.js + + + + + + + + +function resize_createSuper(Derived) { var hasNativeReflectConstruct = resize_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function resize_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + + + + + + +/** + * Resize ui class + * @class + * @ignore + */ + +var Resize = /*#__PURE__*/function (_Submenu) { + _inherits(Resize, _Submenu); + + var _super = resize_createSuper(Resize); + + function Resize(subMenuElement, _ref) { + var _this; + + var locale = _ref.locale, + makeSvgIcon = _ref.makeSvgIcon, + menuBarPosition = _ref.menuBarPosition, + usageStatistics = _ref.usageStatistics; + + _classCallCheck(this, Resize); + + _this = _super.call(this, subMenuElement, { + locale: locale, + name: 'resize', + makeSvgIcon: makeSvgIcon, + menuBarPosition: menuBarPosition, + templateHtml: resize, + usageStatistics: usageStatistics + }); + _this.status = 'active'; + _this._lockState = false; + /** + * Original dimensions + * @type {Object} + * @private + */ + + _this._originalDimensions = null; + _this._els = { + widthRange: new range({ + slider: _this.selector('.tie-width-range'), + input: _this.selector('.tie-width-range-value') + }, defaultResizePixelValues), + heightRange: new range({ + slider: _this.selector('.tie-height-range'), + input: _this.selector('.tie-height-range-value') + }, defaultResizePixelValues), + lockAspectRatio: _this.selector('.tie-lock-aspect-ratio'), + apply: _this.selector('.tie-resize-button .apply'), + cancel: _this.selector('.tie-resize-button .cancel') + }; + return _this; + } + /** + * Executed when the menu starts. + */ + + + _createClass(Resize, [{ + key: "changeStartMode", + value: function changeStartMode() { + this.actions.modeChange('resize'); + var dimensions = this.actions.getCurrentDimensions(); + this._originalDimensions = dimensions; + this.setWidthValue(dimensions.width); + this.setHeightValue(dimensions.height); + } + /** + * Returns the menu to its default state. + */ + + }, { + key: "changeStandbyMode", + value: function changeStandbyMode() { + this.actions.stopDrawingMode(); + this.actions.reset(true); + } + /** + * Set dimension limits + * @param {object} limits - expect dimension limits for change + */ + + }, { + key: "setLimit", + value: function setLimit(limits) { + this._els.widthRange.min = this.calcMinValue(limits.minWidth); + this._els.heightRange.min = this.calcMinValue(limits.minHeight); + this._els.widthRange.max = this.calcMaxValue(limits.maxWidth); + this._els.heightRange.max = this.calcMaxValue(limits.maxHeight); + } + /** + * Calculate max value + * @param {number} maxValue - max value + * @returns {number} + */ + + }, { + key: "calcMaxValue", + value: function calcMaxValue(maxValue) { + if (maxValue <= 0) { + maxValue = defaultResizePixelValues.max; + } + + return maxValue; + } + /** + * Calculate min value + * @param {number} minValue - min value + * @returns {number} + */ + + }, { + key: "calcMinValue", + value: function calcMinValue(minValue) { + if (minValue <= 0) { + minValue = defaultResizePixelValues.min; + } + + return minValue; + } + /** + * Set width value + * @param {number} value - expect value for widthRange change + * @param {boolean} trigger - fire change event control + */ + + }, { + key: "setWidthValue", + value: function setWidthValue(value) { + var trigger = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + this._els.widthRange.value = value; + + if (trigger) { + this._els.widthRange.trigger('change'); + } + } + /** + * Set height value + * @param {number} value - expect value for heightRange change + * @param {boolean} trigger - fire change event control + */ + + }, { + key: "setHeightValue", + value: function setHeightValue(value) { + var trigger = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + this._els.heightRange.value = value; + + if (trigger) { + this._els.heightRange.trigger('change'); + } + } + /** + * Destroys the instance. + */ + + }, { + key: "destroy", + value: function destroy() { + this._removeEvent(); + + assignmentForDestroy(this); + } + /** + * Add event for resize + * @param {Object} actions - actions for resize + * @param {Function} actions.resize - resize action + * @param {Function} actions.preview - preview action + * @param {Function} actions.getCurrentDimensions - Get current dimensions action + * @param {Function} actions.modeChange - change mode + * @param {Function} actions.stopDrawingMode - stop drawing mode + * @param {Function} actions.lockAspectRatio - lock aspect ratio + * @param {Function} actions.reset - reset action + */ + + }, { + key: "addEvent", + value: function addEvent(actions) { + var _context, _context2, _context3, _context4, _context5; + + this._els.widthRange.on('change', bind_default()(_context = this._changeWidthRangeHandler).call(_context, this)); + + this._els.heightRange.on('change', bind_default()(_context2 = this._changeHeightRangeHandler).call(_context2, this)); + + this._els.lockAspectRatio.addEventListener('change', bind_default()(_context3 = this._changeLockAspectRatio).call(_context3, this)); + + var apply = bind_default()(_context4 = this._applyEventHandler).call(_context4, this); + + var cancel = bind_default()(_context5 = this._cancelEventHandler).call(_context5, this); + + this.eventHandler = { + apply: apply, + cancel: cancel + }; + this.actions = actions; + + this._els.apply.addEventListener('click', apply); + + this._els.cancel.addEventListener('click', cancel); + } + /** + * Change width + * @param {number} value - width range value + * @private + */ + + }, { + key: "_changeWidthRangeHandler", + value: function _changeWidthRangeHandler(value) { + this.actions.preview('width', toInteger(value), this._lockState); + } + /** + * Change height + * @param {number} value - height range value + * @private + */ + + }, { + key: "_changeHeightRangeHandler", + value: function _changeHeightRangeHandler(value) { + this.actions.preview('height', toInteger(value), this._lockState); + } + /** + * Change lock aspect ratio state + * @param {Event} event - aspect ratio check event + * @private + */ + + }, { + key: "_changeLockAspectRatio", + value: function _changeLockAspectRatio(event) { + this._lockState = event.target.checked; + this.actions.lockAspectRatio(this._lockState, defaultResizePixelValues.min, defaultResizePixelValues.max); + } + /** + * Remove event + * @private + */ + + }, { + key: "_removeEvent", + value: function _removeEvent() { + this._els.apply.removeEventListener('click', this.eventHandler.apply); + + this._els.cancel.removeEventListener('click', this.eventHandler.cancel); + } + }, { + key: "_applyEventHandler", + value: function _applyEventHandler() { + this.actions.resize(); + + this._els.apply.classList.remove('active'); + } + }, { + key: "_cancelEventHandler", + value: function _cancelEventHandler() { + this.actions.reset(); + + this._els.cancel.classList.remove('active'); + } + /** + * Change apply button status + * @param {Boolean} enableStatus - apply button status + */ + + }, { + key: "changeApplyButtonStatus", + value: function changeApplyButtonStatus(enableStatus) { + if (enableStatus) { + this._els.apply.classList.add('active'); + } else { + this._els.apply.classList.remove('active'); + } + } + }]); + + return Resize; +}(submenuBase); + +/* harmony default export */ var ui_resize = (Resize); +;// CONCATENATED MODULE: ./src/js/ui/template/submenu/flip.js + + +/** + * @param {Object} submenuInfo - submenu info for make template + * @param {Locale} locale - Translate text + * @param {Function} makeSvgIcon - svg icon generator + * @returns {string} + */ +/* harmony default export */ var flip = (function (_ref) { + var _context, _context2, _context3, _context4, _context5; + + var locale = _ref.locale, + makeSvgIcon = _ref.makeSvgIcon; + return concat_default()(_context = concat_default()(_context2 = concat_default()(_context3 = concat_default()(_context4 = concat_default()(_context5 = "\n
            \n
          • \n
            \n
            \n ".concat(makeSvgIcon(['normal', 'active'], 'flip-x', true), "\n
            \n \n
            \n
            \n
            \n ")).call(_context4, makeSvgIcon(['normal', 'active'], 'flip-y', true), "\n
            \n \n
            \n
            • \n
          • \n
            \n
            • \n
          • \n
            \n
            \n ")).call(_context2, makeSvgIcon(['normal', 'active'], 'flip-reset', true), "\n
            \n \n
            \n
            • \n
          \n"); +}); +;// CONCATENATED MODULE: ./src/js/ui/flip.js + + + + + + + + + +function flip_createSuper(Derived) { var hasNativeReflectConstruct = flip_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function flip_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + + + + + +/** + * Flip ui class + * @class + * @ignore + */ + +var Flip = /*#__PURE__*/function (_Submenu) { + _inherits(Flip, _Submenu); + + var _super = flip_createSuper(Flip); + + function Flip(subMenuElement, _ref) { + var _this; + + var locale = _ref.locale, + makeSvgIcon = _ref.makeSvgIcon, + menuBarPosition = _ref.menuBarPosition, + usageStatistics = _ref.usageStatistics; + + _classCallCheck(this, Flip); + + _this = _super.call(this, subMenuElement, { + locale: locale, + name: 'flip', + makeSvgIcon: makeSvgIcon, + menuBarPosition: menuBarPosition, + templateHtml: flip, + usageStatistics: usageStatistics + }); + _this.flipStatus = false; + _this._els = { + flipButton: _this.selector('.tie-flip-button') + }; + return _this; + } + /** + * Destroys the instance. + */ + + + _createClass(Flip, [{ + key: "destroy", + value: function destroy() { + this._removeEvent(); + + assignmentForDestroy(this); + } + /** + * Add event for flip + * @param {Object} actions - actions for flip + * @param {Function} actions.flip - flip action + */ + + }, { + key: "addEvent", + value: function addEvent(actions) { + var _context; + + this.eventHandler.changeFlip = bind_default()(_context = this._changeFlip).call(_context, this); + this._actions = actions; + + this._els.flipButton.addEventListener('click', this.eventHandler.changeFlip); + } + /** + * Remove event + * @private + */ + + }, { + key: "_removeEvent", + value: function _removeEvent() { + this._els.flipButton.removeEventListener('click', this.eventHandler.changeFlip); + } + /** + * change Flip status + * @param {object} event - change event + * @private + */ + + }, { + key: "_changeFlip", + value: function _changeFlip(event) { + var _this2 = this; + + var button = event.target.closest('.tui-image-editor-button'); + + if (button) { + var flipType = this.getButtonType(button, ['flipX', 'flipY', 'resetFlip']); + + if (!this.flipStatus && flipType === 'resetFlip') { + return; + } + + this._actions.flip(flipType).then(function (flipStatus) { + var flipClassList = _this2._els.flipButton.classList; + _this2.flipStatus = false; + flipClassList.remove('resetFlip'); + + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), ['flipX', 'flipY'], function (type) { + flipClassList.remove(type); + + if (flipStatus[type]) { + flipClassList.add(type); + flipClassList.add('resetFlip'); + _this2.flipStatus = true; + } + }); + }); + } + } + }]); + + return Flip; +}(submenuBase); + +/* harmony default export */ var ui_flip = (Flip); +;// CONCATENATED MODULE: ./src/js/ui/template/submenu/rotate.js + + +/** + * @param {Object} submenuInfo - submenu info for make template + * @param {Locale} locale - Translate text + * @param {Function} makeSvgIcon - svg icon generator + * @returns {string} + */ +/* harmony default export */ var rotate = (function (_ref) { + var _context, _context2; + + var locale = _ref.locale, + makeSvgIcon = _ref.makeSvgIcon; + return concat_default()(_context = concat_default()(_context2 = "\n
            \n
          • \n
            \n
            \n ".concat(makeSvgIcon(['normal', 'active'], 'rotate-clockwise', true), "\n
            \n \n
            \n
            \n
            \n ")).call(_context2, makeSvgIcon(['normal', 'active'], 'rotate-counterclockwise', true), "\n
            \n \n
            \n
            • \n
          • \n
            \n
            • \n
          • \n \n
            \n \n
            • \n
          \n"); +}); +;// CONCATENATED MODULE: ./src/js/ui/rotate.js + + + + + + + + + +function rotate_createSuper(Derived) { var hasNativeReflectConstruct = rotate_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function rotate_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + + + + + + +var CLOCKWISE = 30; +var COUNTERCLOCKWISE = -30; +/** + * Rotate ui class + * @class + * @ignore + */ + +var Rotate = /*#__PURE__*/function (_Submenu) { + _inherits(Rotate, _Submenu); + + var _super = rotate_createSuper(Rotate); + + function Rotate(subMenuElement, _ref) { + var _this; + + var locale = _ref.locale, + makeSvgIcon = _ref.makeSvgIcon, + menuBarPosition = _ref.menuBarPosition, + usageStatistics = _ref.usageStatistics; + + _classCallCheck(this, Rotate); + + _this = _super.call(this, subMenuElement, { + locale: locale, + name: 'rotate', + makeSvgIcon: makeSvgIcon, + menuBarPosition: menuBarPosition, + templateHtml: rotate, + usageStatistics: usageStatistics + }); + _this._value = 0; + _this._els = { + rotateButton: _this.selector('.tie-rotate-button'), + rotateRange: new range({ + slider: _this.selector('.tie-rotate-range'), + input: _this.selector('.tie-rotate-range-value') + }, defaultRotateRangeValues) + }; + return _this; + } + /** + * Destroys the instance. + */ + + + _createClass(Rotate, [{ + key: "destroy", + value: function destroy() { + this._removeEvent(); + + this._els.rotateRange.destroy(); + + assignmentForDestroy(this); + } + }, { + key: "setRangeBarAngle", + value: function setRangeBarAngle(type, angle) { + var resultAngle = angle; + + if (type === 'rotate') { + resultAngle = parse_int_default()(this._els.rotateRange.value, 10) + angle; + } + + this._setRangeBarRatio(resultAngle); + } + }, { + key: "_setRangeBarRatio", + value: function _setRangeBarRatio(angle) { + this._els.rotateRange.value = angle; + } + /** + * Add event for rotate + * @param {Object} actions - actions for crop + * @param {Function} actions.rotate - rotate action + * @param {Function} actions.setAngle - set angle action + */ + + }, { + key: "addEvent", + value: function addEvent(actions) { + var _context, _context2; + + this.eventHandler.rotationAngleChanged = bind_default()(_context = this._changeRotateForButton).call(_context, this); // {rotate, setAngle} + + this.actions = actions; + + this._els.rotateButton.addEventListener('click', this.eventHandler.rotationAngleChanged); + + this._els.rotateRange.on('change', bind_default()(_context2 = this._changeRotateForRange).call(_context2, this)); + } + /** + * Remove event + * @private + */ + + }, { + key: "_removeEvent", + value: function _removeEvent() { + this._els.rotateButton.removeEventListener('click', this.eventHandler.rotationAngleChanged); + + this._els.rotateRange.off(); + } + /** + * Change rotate for range + * @param {number} value - angle value + * @param {boolean} isLast - Is last change + * @private + */ + + }, { + key: "_changeRotateForRange", + value: function _changeRotateForRange(value, isLast) { + var angle = toInteger(value); + this.actions.setAngle(angle, !isLast); + this._value = angle; + } + /** + * Change rotate for button + * @param {object} event - add button event object + * @private + */ + + }, { + key: "_changeRotateForButton", + value: function _changeRotateForButton(event) { + var button = event.target.closest('.tui-image-editor-button'); + var angle = this._els.rotateRange.value; + + if (button) { + var rotateType = this.getButtonType(button, ['counterclockwise', 'clockwise']); + var rotateAngle = { + clockwise: CLOCKWISE, + counterclockwise: COUNTERCLOCKWISE + }[rotateType]; + var newAngle = parse_int_default()(angle, 10) + rotateAngle; + var isRotatable = newAngle >= -360 && newAngle <= 360; + + if (isRotatable) { + this.actions.rotate(rotateAngle); + } + } + } + }]); + + return Rotate; +}(submenuBase); + +/* harmony default export */ var ui_rotate = (Rotate); +;// CONCATENATED MODULE: ./src/js/ui/template/submenu/text.js + + +/** + * @param {Object} submenuInfo - submenu info for make template + * @param {Locale} locale - Translate text + * @param {Function} makeSvgIcon - svg icon generator + * @returns {string} + */ +/* harmony default export */ var submenu_text = (function (_ref) { + var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13; + + var locale = _ref.locale, + makeSvgIcon = _ref.makeSvgIcon; + return concat_default()(_context = concat_default()(_context2 = concat_default()(_context3 = concat_default()(_context4 = concat_default()(_context5 = concat_default()(_context6 = concat_default()(_context7 = concat_default()(_context8 = concat_default()(_context9 = concat_default()(_context10 = concat_default()(_context11 = concat_default()(_context12 = concat_default()(_context13 = "\n
            \n
          • \n
            \n
            \n ".concat(makeSvgIcon(['normal', 'active'], 'text-bold', true), "\n
            \n \n
            \n
            \n
            \n ")).call(_context12, makeSvgIcon(['normal', 'active'], 'text-italic', true), "\n
            \n \n
            \n
            \n
            \n ")).call(_context10, makeSvgIcon(['normal', 'active'], 'text-underline', true), "\n
            \n \n
            \n
            • \n
          • \n
            \n
            • \n
          • \n
            \n
            \n ")).call(_context8, makeSvgIcon(['normal', 'active'], 'text-align-left', true), "\n
            \n \n
            \n
            \n
            \n ")).call(_context6, makeSvgIcon(['normal', 'active'], 'text-align-center', true), "\n
            \n \n
            \n
            \n
            \n ")).call(_context4, makeSvgIcon(['normal', 'active'], 'text-align-right', true), "\n
            \n \n
            \n
            • \n
          • \n
            \n
            • \n
          • \n
            \n
            • \n
          • \n
            \n
            • \n
          • \n \n
            \n \n
            • \n
          \n"); +}); +;// CONCATENATED MODULE: ./src/js/ui/text.js + + + + + + + + + + +function text_createSuper(Derived) { var hasNativeReflectConstruct = text_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function text_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + + + + + + + +/** + * Crop ui class + * @class + * @ignore + */ + +var Text = /*#__PURE__*/function (_Submenu) { + _inherits(Text, _Submenu); + + var _super = text_createSuper(Text); + + function Text(subMenuElement, _ref) { + var _this; + + var locale = _ref.locale, + makeSvgIcon = _ref.makeSvgIcon, + menuBarPosition = _ref.menuBarPosition, + usageStatistics = _ref.usageStatistics; + + _classCallCheck(this, Text); + + _this = _super.call(this, subMenuElement, { + locale: locale, + name: 'text', + makeSvgIcon: makeSvgIcon, + menuBarPosition: menuBarPosition, + templateHtml: submenu_text, + usageStatistics: usageStatistics + }); + _this.effect = { + bold: false, + italic: false, + underline: false + }; + _this.align = 'tie-text-align-left'; + _this._els = { + textEffectButton: _this.selector('.tie-text-effect-button'), + textAlignButton: _this.selector('.tie-text-align-button'), + textColorpicker: new colorpicker(_this.selector('.tie-text-color'), { + defaultColor: '#ffbb3b', + toggleDirection: _this.toggleDirection, + usageStatistics: _this.usageStatistics + }), + textRange: new range({ + slider: _this.selector('.tie-text-range'), + input: _this.selector('.tie-text-range-value') + }, defaultTextRangeValues) + }; + _this.colorPickerInputBox = _this._els.textColorpicker.colorpickerElement.querySelector(selectorNames.COLOR_PICKER_INPUT_BOX); + return _this; + } + /** + * Destroys the instance. + */ + + + _createClass(Text, [{ + key: "destroy", + value: function destroy() { + this._removeEvent(); + + this._els.textColorpicker.destroy(); + + this._els.textRange.destroy(); + + assignmentForDestroy(this); + } + /** + * Add event for text + * @param {Object} actions - actions for text + * @param {Function} actions.changeTextStyle - change text style + */ + + }, { + key: "addEvent", + value: function addEvent(actions) { + var _context, _context2, _context3, _context4, _context5, _context6; + + var setTextEffect = bind_default()(_context = this._setTextEffectHandler).call(_context, this); + + var setTextAlign = bind_default()(_context2 = this._setTextAlignHandler).call(_context2, this); + + this.eventHandler = { + setTextEffect: setTextEffect, + setTextAlign: setTextAlign + }; + this.actions = actions; + + this._els.textEffectButton.addEventListener('click', setTextEffect); + + this._els.textAlignButton.addEventListener('click', setTextAlign); + + this._els.textRange.on('change', bind_default()(_context3 = this._changeTextRnageHandler).call(_context3, this)); + + this._els.textColorpicker.on('change', bind_default()(_context4 = this._changeColorHandler).call(_context4, this)); + + this.colorPickerInputBox.addEventListener(eventNames.FOCUS, bind_default()(_context5 = this._onStartEditingInputBox).call(_context5, this)); + this.colorPickerInputBox.addEventListener(eventNames.BLUR, bind_default()(_context6 = this._onStopEditingInputBox).call(_context6, this)); + } + /** + * Remove event + * @private + */ + + }, { + key: "_removeEvent", + value: function _removeEvent() { + var _context7, _context8; + + var _this$eventHandler = this.eventHandler, + setTextEffect = _this$eventHandler.setTextEffect, + setTextAlign = _this$eventHandler.setTextAlign; + + this._els.textEffectButton.removeEventListener('click', setTextEffect); + + this._els.textAlignButton.removeEventListener('click', setTextAlign); + + this._els.textRange.off(); + + this._els.textColorpicker.off(); + + this.colorPickerInputBox.removeEventListener(eventNames.FOCUS, bind_default()(_context7 = this._onStartEditingInputBox).call(_context7, this)); + this.colorPickerInputBox.removeEventListener(eventNames.BLUR, bind_default()(_context8 = this._onStopEditingInputBox).call(_context8, this)); + } + /** + * Returns the menu to its default state. + */ + + }, { + key: "changeStandbyMode", + value: function changeStandbyMode() { + this.actions.stopDrawingMode(); + } + /** + * Executed when the menu starts. + */ + + }, { + key: "changeStartMode", + value: function changeStartMode() { + this.actions.modeChange('text'); + } + /** + * Get text color + * @returns {string} - text color + */ + + }, { + key: "textColor", + get: function get() { + return this._els.textColorpicker.color; + }, + set: function set(color) { + this._els.textColorpicker.color = color; + } + /** + * Get text size + * @returns {string} - text size + */ + + }, { + key: "fontSize", + get: function get() { + return this._els.textRange.value; + } + /** + * Set text size + * @param {Number} value - text size + */ + , + set: function set(value) { + this._els.textRange.value = value; + } + /** + * get font style + * @returns {string} - font style + */ + + }, { + key: "fontStyle", + get: function get() { + return this.effect.italic ? 'italic' : 'normal'; + } + /** + * get font weight + * @returns {string} - font weight + */ + + }, { + key: "fontWeight", + get: function get() { + return this.effect.bold ? 'bold' : 'normal'; + } + /** + * get text underline text underline + * @returns {boolean} - true or false + */ + + }, { + key: "underline", + get: function get() { + return this.effect.underline; + } + }, { + key: "setTextStyleStateOnAction", + value: function setTextStyleStateOnAction() { + var textStyle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; + + var fill = fill_default()(textStyle), + fontSize = textStyle.fontSize, + fontStyle = textStyle.fontStyle, + fontWeight = textStyle.fontWeight, + textDecoration = textStyle.textDecoration, + textAlign = textStyle.textAlign; + + this.textColor = fill; + this.fontSize = fontSize; + this.setEffectState('italic', fontStyle); + this.setEffectState('bold', fontWeight); + this.setEffectState('underline', textDecoration); + this.setAlignState("tie-text-align-".concat(textAlign)); + } + }, { + key: "setEffectState", + value: function setEffectState(effectName, value) { + var effectValue = value === 'italic' || value === 'bold' || value === 'underline'; + + var button = this._els.textEffectButton.querySelector(".tui-image-editor-button.".concat(effectName)); + + this.effect[effectName] = effectValue; + button.classList[effectValue ? 'add' : 'remove']('active'); + } + }, { + key: "setAlignState", + value: function setAlignState(value) { + var button = this._els.textAlignButton; + button.classList.remove(this.align); + button.classList.add(value); + this.align = value; + } + /** + * text effect set handler + * @param {object} event - add button event object + * @private + */ + + }, { + key: "_setTextEffectHandler", + value: function _setTextEffectHandler(event) { + var button = event.target.closest('.tui-image-editor-button'); + + if (button) { + var _button$className$mat = button.className.match(/(bold|italic|underline)/), + _button$className$mat2 = _slicedToArray(_button$className$mat, 1), + styleType = _button$className$mat2[0]; + + var styleObj = { + bold: { + fontWeight: 'bold' + }, + italic: { + fontStyle: 'italic' + }, + underline: { + textDecoration: 'underline' + } + }[styleType]; + this.effect[styleType] = !this.effect[styleType]; + button.classList.toggle('active'); + this.actions.changeTextStyle(styleObj); + } + } + /** + * text effect set handler + * @param {object} event - add button event object + * @private + */ + + }, { + key: "_setTextAlignHandler", + value: function _setTextAlignHandler(event) { + var button = event.target.closest('.tui-image-editor-button'); + + if (button) { + var styleType = this.getButtonType(button, ['left', 'center', 'right']); + var styleTypeAlias = "tie-text-align-".concat(styleType); + event.currentTarget.classList.remove(this.align); + + if (this.align !== styleTypeAlias) { + event.currentTarget.classList.add(styleTypeAlias); + } + + this.actions.changeTextStyle({ + textAlign: styleType + }); + this.align = styleTypeAlias; + } + } + /** + * text align set handler + * @param {number} value - range value + * @param {boolean} isLast - Is last change + * @private + */ + + }, { + key: "_changeTextRnageHandler", + value: function _changeTextRnageHandler(value, isLast) { + this.actions.changeTextStyle({ + fontSize: value + }, !isLast); + } + /** + * change color handler + * @param {string} color - change color string + * @private + */ + + }, { + key: "_changeColorHandler", + value: function _changeColorHandler(color) { + color = color || 'transparent'; + this.actions.changeTextStyle({ + fill: color + }); + } + }]); + + return Text; +}(submenuBase); + +/* harmony default export */ var ui_text = (Text); +;// CONCATENATED MODULE: ./src/js/ui/template/submenu/mask.js + + +/** + * @param {Object} submenuInfo - submenu info for make template + * @param {Locale} locale - Translate text + * @param {Function} makeSvgIcon - svg icon generator + * @returns {string} + */ +/* harmony default export */ var mask = (function (_ref) { + var _context, _context2, _context3; + + var locale = _ref.locale, + makeSvgIcon = _ref.makeSvgIcon; + return concat_default()(_context = concat_default()(_context2 = concat_default()(_context3 = "\n
            \n
          • \n
            \n
            \n \n ".concat(makeSvgIcon(['normal', 'active'], 'mask-load', true), "\n
            \n \n
            \n
            • \n
          • \n
            \n
            • \n
          • \n
            \n ")).call(_context2, makeSvgIcon(['normal', 'active'], 'apply'), "\n \n
            \n
            • \n
          \n"); +}); +;// CONCATENATED MODULE: ./src/js/ui/mask.js + + + + + + + + + + +function mask_createSuper(Derived) { var hasNativeReflectConstruct = mask_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function mask_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + + + + +/** + * Mask ui class + * @class + * @ignore + */ + +var Mask = /*#__PURE__*/function (_Submenu) { + _inherits(Mask, _Submenu); + + var _super = mask_createSuper(Mask); + + function Mask(subMenuElement, _ref) { + var _this; + + var locale = _ref.locale, + makeSvgIcon = _ref.makeSvgIcon, + menuBarPosition = _ref.menuBarPosition, + usageStatistics = _ref.usageStatistics; + + _classCallCheck(this, Mask); + + _this = _super.call(this, subMenuElement, { + locale: locale, + name: 'mask', + makeSvgIcon: makeSvgIcon, + menuBarPosition: menuBarPosition, + templateHtml: mask, + usageStatistics: usageStatistics + }); + _this._els = { + applyButton: _this.selector('.tie-mask-apply'), + maskImageButton: _this.selector('.tie-mask-image-file') + }; + return _this; + } + /** + * Destroys the instance. + */ + + + _createClass(Mask, [{ + key: "destroy", + value: function destroy() { + this._removeEvent(); + + assignmentForDestroy(this); + } + /** + * Add event for mask + * @param {Object} actions - actions for crop + * @param {Function} actions.loadImageFromURL - load image action + * @param {Function} actions.applyFilter - apply filter action + */ + + }, { + key: "addEvent", + value: function addEvent(actions) { + var _context, _context2; + + var loadMaskFile = bind_default()(_context = this._loadMaskFile).call(_context, this); + + var applyMask = bind_default()(_context2 = this._applyMask).call(_context2, this); + + this.eventHandler = { + loadMaskFile: loadMaskFile, + applyMask: applyMask + }; + this.actions = actions; + + this._els.maskImageButton.addEventListener('change', loadMaskFile); + + this._els.applyButton.addEventListener('click', applyMask); + } + /** + * Remove event + * @private + */ + + }, { + key: "_removeEvent", + value: function _removeEvent() { + this._els.maskImageButton.removeEventListener('change', this.eventHandler.loadMaskFile); + + this._els.applyButton.removeEventListener('click', this.eventHandler.applyMask); + } + /** + * Apply mask + * @private + */ + + }, { + key: "_applyMask", + value: function _applyMask() { + this.actions.applyFilter(); + + this._els.applyButton.classList.remove('active'); + } + /** + * Load mask file + * @param {object} event - File change event object + * @private + */ + + }, { + key: "_loadMaskFile", + value: function _loadMaskFile(event) { + var imgUrl; + + if (!isSupportFileApi()) { + alert('This browser does not support file-api'); + } + + var _event$target$files = _slicedToArray(event.target.files, 1), + file = _event$target$files[0]; + + if (file) { + imgUrl = url_default().createObjectURL(file); + this.actions.loadImageFromURL(imgUrl, file); + + this._els.applyButton.classList.add('active'); + } + } + }]); + + return Mask; +}(submenuBase); + +/* harmony default export */ var ui_mask = (Mask); +;// CONCATENATED MODULE: ./src/js/ui/template/submenu/icon.js + + +/** + * @param {Object} submenuInfo - submenu info for make template + * @param {Locale} locale - Translate text + * @param {Function} makeSvgIcon - svg icon generator + * @returns {string} + */ +/* harmony default export */ var icon = (function (_ref) { + var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20; + + var locale = _ref.locale, + makeSvgIcon = _ref.makeSvgIcon; + return concat_default()(_context = concat_default()(_context2 = concat_default()(_context3 = concat_default()(_context4 = concat_default()(_context5 = concat_default()(_context6 = concat_default()(_context7 = concat_default()(_context8 = concat_default()(_context9 = concat_default()(_context10 = concat_default()(_context11 = concat_default()(_context12 = concat_default()(_context13 = concat_default()(_context14 = concat_default()(_context15 = concat_default()(_context16 = concat_default()(_context17 = concat_default()(_context18 = concat_default()(_context19 = concat_default()(_context20 = "\n
            \n
          • \n
            \n
            \n ".concat(makeSvgIcon(['normal', 'active'], 'icon-arrow', true), "\n
            \n \n
            \n
            \n
            \n ")).call(_context19, makeSvgIcon(['normal', 'active'], 'icon-arrow-2', true), "\n
            \n \n
            \n
            \n
            \n ")).call(_context17, makeSvgIcon(['normal', 'active'], 'icon-arrow-3', true), "\n
            \n \n
            \n
            \n
            \n ")).call(_context15, makeSvgIcon(['normal', 'active'], 'icon-star', true), "\n
            \n \n
            \n
            \n
            \n ")).call(_context13, makeSvgIcon(['normal', 'active'], 'icon-star-2', true), "\n
            \n \n
            \n\n
            \n
            \n ")).call(_context11, makeSvgIcon(['normal', 'active'], 'icon-polygon', true), "\n
            \n \n
            \n\n
            \n
            \n ")).call(_context9, makeSvgIcon(['normal', 'active'], 'icon-location', true), "\n
            \n \n
            \n\n
            \n
            \n ")).call(_context7, makeSvgIcon(['normal', 'active'], 'icon-heart', true), "\n
            \n \n
            \n\n
            \n
            \n ")).call(_context5, makeSvgIcon(['normal', 'active'], 'icon-bubble', true), "\n
            \n \n
            \n
            • \n
          • \n
            \n
            • \n
          • \n
            \n
            \n \n ")).call(_context3, makeSvgIcon(['normal', 'active'], 'icon-load', true), "\n
            \n \n
            \n
            • \n
          • \n
            \n
            • \n
          • \n
            \n
            • \n
          \n"); +}); +;// CONCATENATED MODULE: ./src/js/ui/icon.js + + + + + + + + + + + +function icon_createSuper(Derived) { var hasNativeReflectConstruct = icon_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function icon_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + + + + + + + +/** + * Icon ui class + * @class + * @ignore + */ + +var Icon = /*#__PURE__*/function (_Submenu) { + _inherits(Icon, _Submenu); + + var _super = icon_createSuper(Icon); + + function Icon(subMenuElement, _ref) { + var _this; + + var locale = _ref.locale, + makeSvgIcon = _ref.makeSvgIcon, + menuBarPosition = _ref.menuBarPosition, + usageStatistics = _ref.usageStatistics; + + _classCallCheck(this, Icon); + + _this = _super.call(this, subMenuElement, { + locale: locale, + name: 'icon', + makeSvgIcon: makeSvgIcon, + menuBarPosition: menuBarPosition, + templateHtml: icon, + usageStatistics: usageStatistics + }); + _this.iconType = null; + _this._iconMap = {}; + _this._els = { + registerIconButton: _this.selector('.tie-icon-image-file'), + addIconButton: _this.selector('.tie-icon-add-button'), + iconColorpicker: new colorpicker(_this.selector('.tie-icon-color'), { + defaultColor: '#ffbb3b', + toggleDirection: _this.toggleDirection, + usageStatistics: _this.usageStatistics + }) + }; + _this.colorPickerInputBox = _this._els.iconColorpicker.colorpickerElement.querySelector(selectorNames.COLOR_PICKER_INPUT_BOX); + return _this; + } + /** + * Destroys the instance. + */ + + + _createClass(Icon, [{ + key: "destroy", + value: function destroy() { + this._removeEvent(); + + this._els.iconColorpicker.destroy(); + + assignmentForDestroy(this); + } + /** + * Add event for icon + * @param {Object} actions - actions for icon + * @param {Function} actions.registerCustomIcon - register icon + * @param {Function} actions.addIcon - add icon + * @param {Function} actions.changeColor - change icon color + */ + + }, { + key: "addEvent", + value: function addEvent(actions) { + var _context, _context2, _context3, _context4, _context5; + + var registerIcon = bind_default()(_context = this._registerIconHandler).call(_context, this); + + var addIcon = bind_default()(_context2 = this._addIconHandler).call(_context2, this); + + this.eventHandler = { + registerIcon: registerIcon, + addIcon: addIcon + }; + this.actions = actions; + + this._els.iconColorpicker.on('change', bind_default()(_context3 = this._changeColorHandler).call(_context3, this)); + + this._els.registerIconButton.addEventListener('change', registerIcon); + + this._els.addIconButton.addEventListener('click', addIcon); + + this.colorPickerInputBox.addEventListener(eventNames.FOCUS, bind_default()(_context4 = this._onStartEditingInputBox).call(_context4, this)); + this.colorPickerInputBox.addEventListener(eventNames.BLUR, bind_default()(_context5 = this._onStopEditingInputBox).call(_context5, this)); + } + /** + * Remove event + * @private + */ + + }, { + key: "_removeEvent", + value: function _removeEvent() { + var _context6, _context7; + + this._els.iconColorpicker.off(); + + this._els.registerIconButton.removeEventListener('change', this.eventHandler.registerIcon); + + this._els.addIconButton.removeEventListener('click', this.eventHandler.addIcon); + + this.colorPickerInputBox.removeEventListener(eventNames.FOCUS, bind_default()(_context6 = this._onStartEditingInputBox).call(_context6, this)); + this.colorPickerInputBox.removeEventListener(eventNames.BLUR, bind_default()(_context7 = this._onStopEditingInputBox).call(_context7, this)); + } + /** + * Clear icon type + */ + + }, { + key: "clearIconType", + value: function clearIconType() { + this._els.addIconButton.classList.remove(this.iconType); + + this.iconType = null; + } + /** + * Register default icon + */ + + }, { + key: "registerDefaultIcon", + value: function registerDefaultIcon() { + var _this2 = this; + + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), defaultIconPath, function (path, type) { + _this2.actions.registerDefaultIcons(type, path); + }); + } + /** + * Set icon picker color + * @param {string} iconColor - rgb color string + */ + + }, { + key: "setIconPickerColor", + value: function setIconPickerColor(iconColor) { + this._els.iconColorpicker.color = iconColor; + } + /** + * Returns the menu to its default state. + */ + + }, { + key: "changeStandbyMode", + value: function changeStandbyMode() { + this.clearIconType(); + this.actions.cancelAddIcon(); + } + /** + * Change icon color + * @param {string} color - color for change + * @private + */ + + }, { + key: "_changeColorHandler", + value: function _changeColorHandler(color) { + color = color || 'transparent'; + this.actions.changeColor(color); + } + /** + * Change icon color + * @param {object} event - add button event object + * @private + */ + + }, { + key: "_addIconHandler", + value: function _addIconHandler(event) { + var button = event.target.closest('.tui-image-editor-button'); + + if (button) { + var iconType = button.getAttribute('data-icontype'); + var iconColor = this._els.iconColorpicker.color; + this.actions.discardSelection(); + this.actions.changeSelectableAll(false); + + this._els.addIconButton.classList.remove(this.iconType); + + this._els.addIconButton.classList.add(iconType); + + if (this.iconType === iconType) { + this.changeStandbyMode(); + } else { + this.actions.addIcon(iconType, iconColor); + this.iconType = iconType; + } + } + } + /** + * register icon + * @param {object} event - file change event object + * @private + */ + + }, { + key: "_registerIconHandler", + value: function _registerIconHandler(event) { + var imgUrl; + + if (!isSupportFileApi) { + alert('This browser does not support file-api'); + } + + var _event$target$files = _slicedToArray(event.target.files, 1), + file = _event$target$files[0]; + + if (file) { + imgUrl = url_default().createObjectURL(file); + this.actions.registerCustomIcon(imgUrl, file); + } + } + }]); + + return Icon; +}(submenuBase); + +/* harmony default export */ var ui_icon = (Icon); +;// CONCATENATED MODULE: ./src/js/ui/template/submenu/draw.js + + +/** + * @param {Object} submenuInfo - submenu info for make template + * @param {Locale} locale - Translate text + * @param {Function} makeSvgIcon - svg icon generator + * @returns {string} + */ +/* harmony default export */ var draw = (function (_ref) { + var _context, _context2, _context3, _context4, _context5; + + var locale = _ref.locale, + makeSvgIcon = _ref.makeSvgIcon; + return concat_default()(_context = concat_default()(_context2 = concat_default()(_context3 = concat_default()(_context4 = concat_default()(_context5 = "\n
            \n
          • \n
            \n
            \n ".concat(makeSvgIcon(['normal', 'active'], 'draw-free', true), "\n
            \n \n
            \n
            \n
            \n ")).call(_context4, makeSvgIcon(['normal', 'active'], 'draw-line', true), "\n
            \n \n
            \n
            • \n
          • \n
            \n
            • \n
          • \n
            \n
            • \n
          • \n
            \n
            • \n
          • \n \n
            \n \n
            • \n
          \n"); +}); +;// CONCATENATED MODULE: ./src/js/ui/draw.js + + + + + + + + +function draw_createSuper(Derived) { var hasNativeReflectConstruct = draw_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function draw_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + + + + + + + +var DRAW_OPACITY = 0.7; +/** + * Draw ui class + * @class + * @ignore + */ + +var Draw = /*#__PURE__*/function (_Submenu) { + _inherits(Draw, _Submenu); + + var _super = draw_createSuper(Draw); + + function Draw(subMenuElement, _ref) { + var _this; + + var locale = _ref.locale, + makeSvgIcon = _ref.makeSvgIcon, + menuBarPosition = _ref.menuBarPosition, + usageStatistics = _ref.usageStatistics; + + _classCallCheck(this, Draw); + + _this = _super.call(this, subMenuElement, { + locale: locale, + name: 'draw', + makeSvgIcon: makeSvgIcon, + menuBarPosition: menuBarPosition, + templateHtml: draw, + usageStatistics: usageStatistics + }); + _this._els = { + lineSelectButton: _this.selector('.tie-draw-line-select-button'), + drawColorPicker: new colorpicker(_this.selector('.tie-draw-color'), { + defaultColor: '#00a9ff', + toggleDirection: _this.toggleDirection, + usageStatistics: _this.usageStatistics + }), + drawRange: new range({ + slider: _this.selector('.tie-draw-range'), + input: _this.selector('.tie-draw-range-value') + }, defaultDrawRangeValues) + }; + _this.type = null; + _this.color = _this._els.drawColorPicker.color; + _this.width = _this._els.drawRange.value; + _this.colorPickerInputBox = _this._els.drawColorPicker.colorpickerElement.querySelector(selectorNames.COLOR_PICKER_INPUT_BOX); + return _this; + } + /** + * Destroys the instance. + */ + + + _createClass(Draw, [{ + key: "destroy", + value: function destroy() { + this._removeEvent(); + + this._els.drawColorPicker.destroy(); + + this._els.drawRange.destroy(); + + assignmentForDestroy(this); + } + /** + * Add event for draw + * @param {Object} actions - actions for crop + * @param {Function} actions.setDrawMode - set draw mode + */ + + }, { + key: "addEvent", + value: function addEvent(actions) { + var _context, _context2, _context3, _context4, _context5; + + this.eventHandler.changeDrawType = bind_default()(_context = this._changeDrawType).call(_context, this); + this.actions = actions; + + this._els.lineSelectButton.addEventListener('click', this.eventHandler.changeDrawType); + + this._els.drawColorPicker.on('change', bind_default()(_context2 = this._changeDrawColor).call(_context2, this)); + + this._els.drawRange.on('change', bind_default()(_context3 = this._changeDrawRange).call(_context3, this)); + + this.colorPickerInputBox.addEventListener(eventNames.FOCUS, bind_default()(_context4 = this._onStartEditingInputBox).call(_context4, this)); + this.colorPickerInputBox.addEventListener(eventNames.BLUR, bind_default()(_context5 = this._onStopEditingInputBox).call(_context5, this)); + } + /** + * Remove event + * @private + */ + + }, { + key: "_removeEvent", + value: function _removeEvent() { + var _context6, _context7; + + this._els.lineSelectButton.removeEventListener('click', this.eventHandler.changeDrawType); + + this._els.drawColorPicker.off(); + + this._els.drawRange.off(); + + this.colorPickerInputBox.removeEventListener(eventNames.FOCUS, bind_default()(_context6 = this._onStartEditingInputBox).call(_context6, this)); + this.colorPickerInputBox.removeEventListener(eventNames.BLUR, bind_default()(_context7 = this._onStopEditingInputBox).call(_context7, this)); + } + /** + * set draw mode - action runner + */ + + }, { + key: "setDrawMode", + value: function setDrawMode() { + this.actions.setDrawMode(this.type, { + width: this.width, + color: getRgb(this.color, DRAW_OPACITY) + }); + } + /** + * Returns the menu to its default state. + */ + + }, { + key: "changeStandbyMode", + value: function changeStandbyMode() { + this.type = null; + this.actions.stopDrawingMode(); + this.actions.changeSelectableAll(true); + + this._els.lineSelectButton.classList.remove('free'); + + this._els.lineSelectButton.classList.remove('line'); + } + /** + * Executed when the menu starts. + */ + + }, { + key: "changeStartMode", + value: function changeStartMode() { + this.type = 'free'; + + this._els.lineSelectButton.classList.add('free'); + + this.setDrawMode(); + } + /** + * Change draw type event + * @param {object} event - line select event + * @private + */ + + }, { + key: "_changeDrawType", + value: function _changeDrawType(event) { + var button = event.target.closest('.tui-image-editor-button'); + + if (button) { + var lineType = this.getButtonType(button, ['free', 'line']); + this.actions.discardSelection(); + + if (this.type === lineType) { + this.changeStandbyMode(); + return; + } + + this.changeStandbyMode(); + this.type = lineType; + + this._els.lineSelectButton.classList.add(lineType); + + this.setDrawMode(); + } + } + /** + * Change drawing color + * @param {string} color - select drawing color + * @private + */ + + }, { + key: "_changeDrawColor", + value: function _changeDrawColor(color) { + this.color = color || 'transparent'; + + if (!this.type) { + this.changeStartMode(); + } else { + this.setDrawMode(); + } + } + /** + * Change drawing Range + * @param {number} value - select drawing range + * @private + */ + + }, { + key: "_changeDrawRange", + value: function _changeDrawRange(value) { + this.width = value; + + if (!this.type) { + this.changeStartMode(); + } else { + this.setDrawMode(); + } + } + }]); + + return Draw; +}(submenuBase); + +/* harmony default export */ var ui_draw = (Draw); +;// CONCATENATED MODULE: ./src/js/ui/template/submenu/filter.js + + +/** + * @param {Locale} locale - Translate text + * @returns {string} + */ +/* harmony default export */ var filter = (function (_ref) { + var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16; + + var locale = _ref.locale; + return concat_default()(_context = concat_default()(_context2 = concat_default()(_context3 = concat_default()(_context4 = concat_default()(_context5 = concat_default()(_context6 = concat_default()(_context7 = concat_default()(_context8 = concat_default()(_context9 = concat_default()(_context10 = concat_default()(_context11 = concat_default()(_context12 = concat_default()(_context13 = concat_default()(_context14 = concat_default()(_context15 = concat_default()(_context16 = "\n
            \n
          • \n
            \n
            \n \n
            \n
            \n \n
            \n
            \n \n
            \n
            \n \n
            \n
            \n \n
            \n
            \n \n
            \n
            \n \n
            \n
            \n
            • \n
          • \n
            \n
            • \n
          • \n
            \n
            \n
            \n \n
            \n
            \n
            \n \n
            \n
            \n
            \n
            \n
            \n \n
            \n
            \n
            \n
            \n
            \n
            \n
            \n \n
            \n
            \n
            \n
            \n
            \n
            • \n
          • \n
            \n
            • \n
          • \n
            \n
            \n \n
            \n
            \n
            \n
            \n
            \n
            \n
            \n
            \n \n
            \n
            \n
            \n \n
            \n
            \n
            \n
            • \n
          • \n
            \n
            • \n
          • \n
            \n
            \n
            \n \n
            \n
            \n
            \n
            \n
            \n \n
            \n
            \n
            \n
            \n
            \n \n
            \n
            \n
            • \n
          \n"); +}); +;// CONCATENATED MODULE: ./src/js/ui/filter.js + + + + + + + + + + + +function filter_createSuper(Derived) { var hasNativeReflectConstruct = filter_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function filter_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + + + + + + + + +var PICKER_CONTROL_HEIGHT = '130px'; +var BLEND_OPTIONS = ['add', 'diff', 'subtract', 'multiply', 'screen', 'lighten', 'darken']; +var FILTER_OPTIONS = ['grayscale', 'invert', 'sepia', 'vintage', 'blur', 'sharpen', 'emboss', 'remove-white', 'brightness', 'noise', 'pixelate', 'color-filter', 'tint', 'multiply', 'blend']; +var filterNameMap = { + grayscale: 'grayscale', + invert: 'invert', + sepia: 'sepia', + blur: 'blur', + sharpen: 'sharpen', + emboss: 'emboss', + removeWhite: 'removeColor', + brightness: 'brightness', + contrast: 'contrast', + saturation: 'saturation', + vintage: 'vintage', + polaroid: 'polaroid', + noise: 'noise', + pixelate: 'pixelate', + colorFilter: 'removeColor', + tint: 'blendColor', + multiply: 'blendColor', + blend: 'blendColor', + hue: 'hue', + gamma: 'gamma' +}; +var RANGE_INSTANCE_NAMES = ['removewhiteDistanceRange', 'colorfilterThresholdRange', 'pixelateRange', 'noiseRange', 'brightnessRange', 'tintOpacity']; +var COLORPICKER_INSTANCE_NAMES = ['filterBlendColor', 'filterMultiplyColor', 'filterTintColor']; +/** + * Filter ui class + * @class + * @ignore + */ + +var Filter = /*#__PURE__*/function (_Submenu) { + _inherits(Filter, _Submenu); + + var _super = filter_createSuper(Filter); + + function Filter(subMenuElement, _ref) { + var _this; + + var locale = _ref.locale, + menuBarPosition = _ref.menuBarPosition, + usageStatistics = _ref.usageStatistics; + + _classCallCheck(this, Filter); + + _this = _super.call(this, subMenuElement, { + locale: locale, + name: 'filter', + menuBarPosition: menuBarPosition, + templateHtml: filter, + usageStatistics: usageStatistics + }); + _this.selectBoxShow = false; + _this.checkedMap = {}; + + _this._makeControlElement(); + + return _this; + } + /** + * Destroys the instance. + */ + + + _createClass(Filter, [{ + key: "destroy", + value: function destroy() { + this._removeEvent(); + + this._destroyToolInstance(); + + assignmentForDestroy(this); + } + /** + * Remove event for filter + */ + + }, { + key: "_removeEvent", + value: function _removeEvent() { + var _this2 = this, + _context; + + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), FILTER_OPTIONS, function (filter) { + var filterCheckElement = _this2.selector(".tie-".concat(filter)); + + var filterNameCamelCase = toCamelCase(filter); + filterCheckElement.removeEventListener('change', _this2.eventHandler[filterNameCamelCase]); + }); + + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), concat_default()(_context = []).call(_context, RANGE_INSTANCE_NAMES, COLORPICKER_INSTANCE_NAMES), function (instanceName) { + _this2._els[instanceName].off(); + }); + + this._els.blendType.removeEventListener('change', this.eventHandler.changeBlendFilter); + + this._els.blendType.removeEventListener('click', this.eventHandler.changeBlendFilter); + + external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().forEachArray(this.colorPickerInputBoxes, function (inputBox) { + var _context2, _context3; + + inputBox.removeEventListener(eventNames.FOCUS, bind_default()(_context2 = _this2._onStartEditingInputBox).call(_context2, _this2)); + inputBox.removeEventListener(eventNames.BLUR, bind_default()(_context3 = _this2._onStopEditingInputBox).call(_context3, _this2)); + }, this); + } + }, { + key: "_destroyToolInstance", + value: function _destroyToolInstance() { + var _context4, + _this3 = this; + + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), concat_default()(_context4 = []).call(_context4, RANGE_INSTANCE_NAMES, COLORPICKER_INSTANCE_NAMES), function (instanceName) { + _this3._els[instanceName].destroy(); + }); + } + /** + * Add event for filter + * @param {Object} actions - actions for crop + * @param {Function} actions.applyFilter - apply filter option + */ + + }, { + key: "addEvent", + value: function addEvent(_ref2) { + var _this4 = this, + _context6, + _context7, + _context8; + + var applyFilter = _ref2.applyFilter; + + var changeFilterState = function changeFilterState(filterName) { + var _context5; + + return bind_default()(_context5 = _this4._changeFilterState).call(_context5, _this4, applyFilter, filterName); + }; + + var changeFilterStateForRange = function changeFilterStateForRange(filterName) { + return function (value, isLast) { + return _this4._changeFilterState(applyFilter, filterName, isLast); + }; + }; + + this.eventHandler = { + changeBlendFilter: changeFilterState('blend'), + blandTypeClick: function blandTypeClick(event) { + return event.stopPropagation(); + } + }; + + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), FILTER_OPTIONS, function (filter) { + var filterCheckElement = _this4.selector(".tie-".concat(filter)); + + var filterNameCamelCase = toCamelCase(filter); + _this4.checkedMap[filterNameCamelCase] = filterCheckElement; + _this4.eventHandler[filterNameCamelCase] = changeFilterState(filterNameCamelCase); + filterCheckElement.addEventListener('change', _this4.eventHandler[filterNameCamelCase]); + }); + + this._els.removewhiteDistanceRange.on('change', changeFilterStateForRange('removeWhite')); + + this._els.colorfilterThresholdRange.on('change', changeFilterStateForRange('colorFilter')); + + this._els.pixelateRange.on('change', changeFilterStateForRange('pixelate')); + + this._els.noiseRange.on('change', changeFilterStateForRange('noise')); + + this._els.brightnessRange.on('change', changeFilterStateForRange('brightness')); + + this._els.filterBlendColor.on('change', this.eventHandler.changeBlendFilter); + + this._els.filterMultiplyColor.on('change', changeFilterState('multiply')); + + this._els.filterTintColor.on('change', changeFilterState('tint')); + + this._els.tintOpacity.on('change', changeFilterStateForRange('tint')); + + this._els.filterMultiplyColor.on('changeShow', bind_default()(_context6 = this.colorPickerChangeShow).call(_context6, this)); + + this._els.filterTintColor.on('changeShow', bind_default()(_context7 = this.colorPickerChangeShow).call(_context7, this)); + + this._els.filterBlendColor.on('changeShow', bind_default()(_context8 = this.colorPickerChangeShow).call(_context8, this)); + + this._els.blendType.addEventListener('change', this.eventHandler.changeBlendFilter); + + this._els.blendType.addEventListener('click', this.eventHandler.blandTypeClick); + + external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().forEachArray(this.colorPickerInputBoxes, function (inputBox) { + var _context9, _context10; + + inputBox.addEventListener(eventNames.FOCUS, bind_default()(_context9 = _this4._onStartEditingInputBox).call(_context9, _this4)); + inputBox.addEventListener(eventNames.BLUR, bind_default()(_context10 = _this4._onStopEditingInputBox).call(_context10, _this4)); + }, this); + } + /** + * Set filter for undo changed + * @param {Object} changedFilterInfos - changed command infos + * @param {string} type - filter type + * @param {string} action - add or remove + * @param {Object} options - filter options + */ + + }, { + key: "setFilterState", + value: function setFilterState(changedFilterInfos) { + var type = changedFilterInfos.type, + options = changedFilterInfos.options, + action = changedFilterInfos.action; + + var filterName = this._getFilterNameFromOptions(type, options); + + var isRemove = action === 'remove'; + + if (!isRemove) { + this._setFilterState(filterName, options); + } + + this.checkedMap[filterName].checked = !isRemove; + } + /** + * Init all filter's checkbox to unchecked state + */ + + }, { + key: "initFilterCheckBoxState", + value: function initFilterCheckBoxState() { + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), this.checkedMap, function (filter) { + filter.checked = false; + }, this); + } + /** + * Set filter for undo changed + * @param {string} filterName - filter name + * @param {Object} options - filter options + * @private + */ + // eslint-disable-next-line complexity + + }, { + key: "_setFilterState", + value: function _setFilterState(filterName, options) { + if (filterName === 'colorFilter') { + this._els.colorfilterThresholdRange.value = options.distance; + } else if (filterName === 'removeWhite') { + this._els.removewhiteDistanceRange.value = options.distance; + } else if (filterName === 'pixelate') { + this._els.pixelateRange.value = options.blocksize; + } else if (filterName === 'brightness') { + this._els.brightnessRange.value = options.brightness; + } else if (filterName === 'noise') { + this._els.noiseRange.value = options.noise; + } else if (filterName === 'tint') { + this._els.tintOpacity.value = options.alpha; + this._els.filterTintColor.color = options.color; + } else if (filterName === 'blend') { + this._els.filterBlendColor.color = options.color; + } else if (filterName === 'multiply') { + this._els.filterMultiplyColor.color = options.color; + } + } + /** + * Get filter name + * @param {string} type - filter type + * @param {Object} options - filter options + * @returns {string} filter name + * @private + */ + + }, { + key: "_getFilterNameFromOptions", + value: function _getFilterNameFromOptions(type, options) { + var filterName = type; + + if (type === 'removeColor') { + filterName = external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().isExisty(options.useAlpha) ? 'removeWhite' : 'colorFilter'; + } else if (type === 'blendColor') { + filterName = { + add: 'blend', + multiply: 'multiply', + tint: 'tint' + }[options.mode]; + } + + return filterName; + } + /** + * Add event for filter + * @param {Function} applyFilter - actions for firter + * @param {string} filterName - filter name + * @param {boolean} [isLast] - Is last change + */ + + }, { + key: "_changeFilterState", + value: function _changeFilterState(applyFilter, filterName) { + var isLast = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true; + var apply = this.checkedMap[filterName].checked; + var type = filterNameMap[filterName]; + var checkboxGroup = this.checkedMap[filterName].closest('.tui-image-editor-checkbox-group'); + + if (checkboxGroup) { + if (apply) { + checkboxGroup.classList.remove('tui-image-editor-disabled'); + } else { + checkboxGroup.classList.add('tui-image-editor-disabled'); + } + } + + applyFilter(apply, type, this._getFilterOption(filterName), !isLast); + } + /** + * Get filter option + * @param {String} type - filter type + * @returns {Object} filter option object + * @private + */ + // eslint-disable-next-line complexity + + }, { + key: "_getFilterOption", + value: function _getFilterOption(type) { + var option = {}; + + switch (type) { + case 'removeWhite': + option.color = '#FFFFFF'; + option.useAlpha = false; + option.distance = parse_float_default()(this._els.removewhiteDistanceRange.value); + break; + + case 'colorFilter': + option.color = '#FFFFFF'; + option.distance = parse_float_default()(this._els.colorfilterThresholdRange.value); + break; + + case 'pixelate': + option.blocksize = toInteger(this._els.pixelateRange.value); + break; + + case 'noise': + option.noise = toInteger(this._els.noiseRange.value); + break; + + case 'brightness': + option.brightness = parse_float_default()(this._els.brightnessRange.value); + break; + + case 'blend': + option.mode = 'add'; + option.color = this._els.filterBlendColor.color; + option.mode = this._els.blendType.value; + break; + + case 'multiply': + option.mode = 'multiply'; + option.color = this._els.filterMultiplyColor.color; + break; + + case 'tint': + option.mode = 'tint'; + option.color = this._els.filterTintColor.color; + option.alpha = this._els.tintOpacity.value; + break; + + case 'blur': + option.blur = this._els.blurRange.value; + break; + + default: + break; + } + + return option; + } + /** + * Make submenu range and colorpicker control + * @private + */ + + }, { + key: "_makeControlElement", + value: function _makeControlElement() { + this._els = { + removewhiteDistanceRange: new range({ + slider: this.selector('.tie-removewhite-distance-range') + }, defaultFilterRangeValues.removewhiteDistanceRange), + brightnessRange: new range({ + slider: this.selector('.tie-brightness-range') + }, defaultFilterRangeValues.brightnessRange), + noiseRange: new range({ + slider: this.selector('.tie-noise-range') + }, defaultFilterRangeValues.noiseRange), + pixelateRange: new range({ + slider: this.selector('.tie-pixelate-range') + }, defaultFilterRangeValues.pixelateRange), + colorfilterThresholdRange: new range({ + slider: this.selector('.tie-colorfilter-threshold-range') + }, defaultFilterRangeValues.colorfilterThresholdRange), + filterTintColor: new colorpicker(this.selector('.tie-filter-tint-color'), { + defaultColor: '#03bd9e', + toggleDirection: this.toggleDirection, + usageStatistics: this.usageStatistics + }), + filterMultiplyColor: new colorpicker(this.selector('.tie-filter-multiply-color'), { + defaultColor: '#515ce6', + toggleDirection: this.toggleDirection, + usageStatistics: this.usageStatistics + }), + filterBlendColor: new colorpicker(this.selector('.tie-filter-blend-color'), { + defaultColor: '#ffbb3b', + toggleDirection: this.toggleDirection, + usageStatistics: this.usageStatistics + }), + blurRange: defaultFilterRangeValues.blurFilterRange + }; + this._els.tintOpacity = this._pickerWithRange(this._els.filterTintColor.pickerControl); + this._els.blendType = this._pickerWithSelectbox(this._els.filterBlendColor.pickerControl); + this.colorPickerControls.push(this._els.filterTintColor); + this.colorPickerControls.push(this._els.filterMultiplyColor); + this.colorPickerControls.push(this._els.filterBlendColor); + this.colorPickerInputBoxes = []; + this.colorPickerInputBoxes.push(this._els.filterTintColor.colorpickerElement.querySelector(selectorNames.COLOR_PICKER_INPUT_BOX)); + this.colorPickerInputBoxes.push(this._els.filterMultiplyColor.colorpickerElement.querySelector(selectorNames.COLOR_PICKER_INPUT_BOX)); + this.colorPickerInputBoxes.push(this._els.filterBlendColor.colorpickerElement.querySelector(selectorNames.COLOR_PICKER_INPUT_BOX)); + } + /** + * Make submenu control for picker & range mixin + * @param {HTMLElement} pickerControl - pickerControl dom element + * @returns {Range} + * @private + */ + + }, { + key: "_pickerWithRange", + value: function _pickerWithRange(pickerControl) { + var rangeWrap = document.createElement('div'); + var rangeLabel = document.createElement('label'); + var slider = document.createElement('div'); + slider.id = 'tie-filter-tint-opacity'; + rangeLabel.innerHTML = 'Opacity'; + rangeWrap.appendChild(rangeLabel); + rangeWrap.appendChild(slider); + pickerControl.appendChild(rangeWrap); + pickerControl.style.height = PICKER_CONTROL_HEIGHT; + return new range({ + slider: slider + }, defaultFilterRangeValues.tintOpacityRange); + } + /** + * Make submenu control for picker & selectbox + * @param {HTMLElement} pickerControl - pickerControl dom element + * @returns {HTMLElement} + * @private + */ + + }, { + key: "_pickerWithSelectbox", + value: function _pickerWithSelectbox(pickerControl) { + var selectlistWrap = document.createElement('div'); + var selectlist = document.createElement('select'); + var optionlist = document.createElement('ul'); + selectlistWrap.className = 'tui-image-editor-selectlist-wrap'; + optionlist.className = 'tui-image-editor-selectlist'; + selectlistWrap.appendChild(selectlist); + selectlistWrap.appendChild(optionlist); + + this._makeSelectOptionList(selectlist); + + pickerControl.appendChild(selectlistWrap); + pickerControl.style.height = PICKER_CONTROL_HEIGHT; + + this._drawSelectOptionList(selectlist, optionlist); + + this._pickerWithSelectboxForAddEvent(selectlist, optionlist); + + return selectlist; + } + /** + * Make selectbox option list custom style + * @param {HTMLElement} selectlist - selectbox element + * @param {HTMLElement} optionlist - custom option list item element + * @private + */ + + }, { + key: "_drawSelectOptionList", + value: function _drawSelectOptionList(selectlist, optionlist) { + var options = selectlist.querySelectorAll('option'); + + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), options, function (option) { + var optionElement = document.createElement('li'); + optionElement.innerHTML = option.innerHTML; + optionElement.setAttribute('data-item', option.value); + optionlist.appendChild(optionElement); + }); + } + /** + * custom selectbox custom event + * @param {HTMLElement} selectlist - selectbox element + * @param {HTMLElement} optionlist - custom option list item element + * @private + */ + + }, { + key: "_pickerWithSelectboxForAddEvent", + value: function _pickerWithSelectboxForAddEvent(selectlist, optionlist) { + var _this5 = this; + + optionlist.addEventListener('click', function (event) { + var optionValue = event.target.getAttribute('data-item'); + var fireEvent = document.createEvent('HTMLEvents'); + selectlist.querySelector("[value=\"".concat(optionValue, "\"]")).selected = true; + fireEvent.initEvent('change', true, true); + selectlist.dispatchEvent(fireEvent); + _this5.selectBoxShow = false; + optionlist.style.display = 'none'; + }); + selectlist.addEventListener('mousedown', function (event) { + event.preventDefault(); + _this5.selectBoxShow = !_this5.selectBoxShow; + optionlist.style.display = _this5.selectBoxShow ? 'block' : 'none'; + optionlist.setAttribute('data-selectitem', selectlist.value); + optionlist.querySelector("[data-item='".concat(selectlist.value, "']")).classList.add('active'); + }); + } + /** + * Make option list for select control + * @param {HTMLElement} selectlist - blend option select list element + * @private + */ + + }, { + key: "_makeSelectOptionList", + value: function _makeSelectOptionList(selectlist) { + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), BLEND_OPTIONS, function (option) { + var selectOption = document.createElement('option'); + selectOption.setAttribute('value', option); + selectOption.innerHTML = option.replace(/^[a-z]/, function ($0) { + return $0.toUpperCase(); + }); + selectlist.appendChild(selectOption); + }); + } + }]); + + return Filter; +}(submenuBase); + +/* harmony default export */ var ui_filter = (Filter); +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js-stable/number/parse-int.js +var number_parse_int = __webpack_require__(4383); +var number_parse_int_default = /*#__PURE__*/__webpack_require__.n(number_parse_int); +;// CONCATENATED MODULE: ./src/js/ui/panelMenu.js + + + + +/** + * Menu Panel Class + * @class + * @ignore + */ +var Panel = /*#__PURE__*/function () { + /** + * @param {HTMLElement} menuElement - menu dom element + * @param {Object} options - menu options + * @param {string} options.name - name of panel menu + */ + function Panel(menuElement, _ref) { + var name = _ref.name; + + _classCallCheck(this, Panel); + + this.name = name; + this.items = []; + this.panelElement = this._makePanelElement(); + this.listElement = this._makeListElement(); + this.panelElement.appendChild(this.listElement); + menuElement.appendChild(this.panelElement); + } + /** + * Make Panel element + * @returns {HTMLElement} + */ + + + _createClass(Panel, [{ + key: "_makePanelElement", + value: function _makePanelElement() { + var panel = document.createElement('div'); + panel.className = "tie-panel-".concat(this.name); + return panel; + } + /** + * Make list element + * @returns {HTMLElement} list element + * @private + */ + + }, { + key: "_makeListElement", + value: function _makeListElement() { + var list = document.createElement('ol'); + list.className = "".concat(this.name, "-list"); + return list; + } + /** + * Make list item element + * @param {string} html - history list item html + * @returns {HTMLElement} list item element + */ + + }, { + key: "makeListItemElement", + value: function makeListItemElement(html) { + var listItem = document.createElement('li'); + listItem.innerHTML = html; + listItem.className = "".concat(this.name, "-item"); + listItem.setAttribute('data-index', this.items.length); + return listItem; + } + /** + * Push list item element + * @param {HTMLElement} item - list item element to add to the list + */ + + }, { + key: "pushListItemElement", + value: function pushListItemElement(item) { + this.listElement.appendChild(item); + this.listElement.scrollTop += item.offsetHeight; + this.items.push(item); + } + /** + * Delete list item element + * @param {number} start - start index to delete + * @param {number} end - end index to delete + */ + + }, { + key: "deleteListItemElement", + value: function deleteListItemElement(start, end) { + var items = this.items; + + for (var i = start; i < end; i += 1) { + this.listElement.removeChild(items[i]); + } + + splice_default()(items).call(items, start, end - start + 1); + } + /** + * Get list's length + * @returns {number} + */ + + }, { + key: "getListLength", + value: function getListLength() { + return this.items.length; + } + /** + * Add class name of item + * @param {number} index - index of item + * @param {string} className - class name to add + */ + + }, { + key: "addClass", + value: function addClass(index, className) { + if (this.items[index]) { + this.items[index].classList.add(className); + } + } + /** + * Remove class name of item + * @param {number} index - index of item + * @param {string} className - class name to remove + */ + + }, { + key: "removeClass", + value: function removeClass(index, className) { + if (this.items[index]) { + this.items[index].classList.remove(className); + } + } + /** + * Toggle class name of item + * @param {number} index - index of item + * @param {string} className - class name to remove + */ + + }, { + key: "toggleClass", + value: function toggleClass(index, className) { + if (this.items[index]) { + this.items[index].classList.toggle(className); + } + } + }]); + + return Panel; +}(); + +/* harmony default export */ var panelMenu = (Panel); +;// CONCATENATED MODULE: ./src/js/ui/template/submenu/history.js + + +/** + * @param {Object} submenuInfo - submenu info for make template + * @param {Locale} locale - Translate text + * @param {Function} makeSvgIcon - svg icon generator + * @param {string} name - history name + * @param {string} detail - history detail information + * @returns {string} + */ +/* harmony default export */ var submenu_history = (function (_ref) { + var _context, _context2, _context3; + + var locale = _ref.locale, + makeSvgIcon = _ref.makeSvgIcon, + name = _ref.name, + detail = _ref.detail; + return concat_default()(_context = concat_default()(_context2 = concat_default()(_context3 = "\n
          \n
          \n ".concat(makeSvgIcon(['normal', 'active'], "history-".concat(name.toLowerCase()), true), "\n
          \n \n ")).call(_context3, locale.localize(name), "\n ")).call(_context2, detail ? "(".concat(locale.localize(detail), ")") : '', "\n \n
          \n ")).call(_context, makeSvgIcon(['normal'], 'history-check', true), "\n
          \n
          \n"); +}); +;// CONCATENATED MODULE: ./src/js/ui/history.js + + + + + + + + +function history_createSuper(Derived) { var hasNativeReflectConstruct = history_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function history_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + + + + +var historyClassName = 'history-item'; +var selectedClassName = 'selected-item'; +var disabledClassName = 'disabled-item'; +/** + * History ui class + * @class + * @ignore + */ + +var History = /*#__PURE__*/function (_Panel) { + _inherits(History, _Panel); + + var _super = history_createSuper(History); + + function History(menuElement, _ref) { + var _this; + + var locale = _ref.locale, + makeSvgIcon = _ref.makeSvgIcon; + + _classCallCheck(this, History); + + _this = _super.call(this, menuElement, { + name: 'history' + }); + menuElement.classList.add('enabled'); + _this.locale = locale; + _this.makeSvgIcon = makeSvgIcon; + _this._eventHandler = {}; + _this._historyIndex = _this.getListLength(); + return _this; + } + /** + * Add history + * @param {string} name - name of history + * @param {?string} detail - detail information of history + */ + + + _createClass(History, [{ + key: "add", + value: function add(_ref2) { + var name = _ref2.name, + detail = _ref2.detail; + + if (this._hasDisabledItem()) { + this.deleteListItemElement(this._historyIndex + 1, this.getListLength()); + } + + var html = submenu_history({ + locale: this.locale, + makeSvgIcon: this.makeSvgIcon, + name: name, + detail: detail + }); + var item = this.makeListItemElement(html); + this.pushListItemElement(item); + this._historyIndex = this.getListLength() - 1; + + this._selectItem(this._historyIndex); + } + /** + * Init history + */ + + }, { + key: "init", + value: function init() { + this.deleteListItemElement(1, this.getListLength()); + this._historyIndex = 0; + + this._selectItem(this._historyIndex); + } + /** + * Clear history + */ + + }, { + key: "clear", + value: function clear() { + this.deleteListItemElement(0, this.getListLength()); + this._historyIndex = -1; + } + /** + * Select previous history of current selected history + */ + + }, { + key: "prev", + value: function prev() { + this._historyIndex -= 1; + + this._selectItem(this._historyIndex); + } + /** + * Select next history of current selected history + */ + + }, { + key: "next", + value: function next() { + this._historyIndex += 1; + + this._selectItem(this._historyIndex); + } + /** + * Whether history menu has disabled item + * @returns {boolean} + */ + + }, { + key: "_hasDisabledItem", + value: function _hasDisabledItem() { + return this.getListLength() - 1 > this._historyIndex; + } + /** + * Add history menu event + * @private + */ + + }, { + key: "_addHistoryEventListener", + value: function _addHistoryEventListener() { + var _this2 = this; + + this._eventHandler.history = function (event) { + return _this2._clickHistoryItem(event); + }; + + this.listElement.addEventListener('click', this._eventHandler.history); + } + /** + * Remove history menu event + * @private + */ + + }, { + key: "_removeHistoryEventListener", + value: function _removeHistoryEventListener() { + this.listElement.removeEventListener('click', this._eventHandler.history); + } + /** + * onClick history menu event listener + * @param {object} event - event object + * @private + */ + + }, { + key: "_clickHistoryItem", + value: function _clickHistoryItem(event) { + var target = event.target; + var item = target.closest(".".concat(historyClassName)); + + if (!item) { + return; + } + + var index = number_parse_int_default()(item.getAttribute('data-index'), 10); + + if (index !== this._historyIndex) { + var count = Math.abs(index - this._historyIndex); + + if (index < this._historyIndex) { + this._actions.undo(count); + } else { + this._actions.redo(count); + } + } + } + /** + * Change item's state to selected state + * @param {number} index - index of selected item + */ + + }, { + key: "_selectItem", + value: function _selectItem(index) { + for (var i = 0; i < this.getListLength(); i += 1) { + this.removeClass(i, selectedClassName); + this.removeClass(i, disabledClassName); + + if (i > index) { + this.addClass(i, disabledClassName); + } + } + + this.addClass(index, selectedClassName); + } + /** + * Destroys the instance. + */ + + }, { + key: "destroy", + value: function destroy() { + this.removeEvent(); + assignmentForDestroy(this); + } + /** + * Add event for history + * @param {Object} actions - actions for crop + * @param {Function} actions.undo - undo action + * @param {Function} actions.redo - redo action + */ + + }, { + key: "addEvent", + value: function addEvent(actions) { + this._actions = actions; + + this._addHistoryEventListener(); + } + /** + * Remove event + * @private + */ + + }, { + key: "removeEvent", + value: function removeEvent() { + this._removeHistoryEventListener(); + } + }]); + + return History; +}(panelMenu); + +/* harmony default export */ var ui_history = (History); +;// CONCATENATED MODULE: ./src/js/ui/locale/locale.js + + + +/** + * Translate messages + */ +var Locale = /*#__PURE__*/function () { + function Locale(locale) { + _classCallCheck(this, Locale); + + this._locale = locale; + } + /** + * localize message + * @param {string} message - message who will be localized + * @returns {string} + */ + + + _createClass(Locale, [{ + key: "localize", + value: function localize(message) { + return this._locale[message] || message; + } + }]); + + return Locale; +}(); + +/* harmony default export */ var locale = (Locale); +;// CONCATENATED MODULE: ./src/js/ui.js + + + + + + + + + + + + + + + + + + + + + + + + + +var SUB_UI_COMPONENT = { + Shape: ui_shape, + Crop: ui_crop, + Resize: ui_resize, + Flip: ui_flip, + Rotate: ui_rotate, + Text: ui_text, + Mask: ui_mask, + Icon: ui_icon, + Draw: ui_draw, + Filter: ui_filter +}; +var CustomEvents = (external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()).CustomEvents; +var BI_EXPRESSION_MINSIZE_WHEN_TOP_POSITION = '1300'; +var HISTORY_MENU = 'history'; +var HISTORY_PANEL_CLASS_NAME = 'tie-panel-history'; +var CLASS_NAME_ON = 'on'; +var ZOOM_BUTTON_TYPE = { + ZOOM_IN: 'zoomIn', + HAND: 'hand' +}; +/** + * Ui class + * @class + * @param {string|HTMLElement} element - Wrapper's element or selector + * @param {Object} [options] - Ui setting options + * @param {number} options.loadImage - Init default load image + * @param {number} options.initMenu - Init start menu + * @param {Boolean} [options.menuBarPosition=bottom] - Let + * @param {Boolean} [options.applyCropSelectionStyle=false] - Let + * @param {Boolean} [options.usageStatistics=false] - Use statistics or not + * @param {Object} [options.uiSize] - ui size of editor + * @param {string} options.uiSize.width - width of ui + * @param {string} options.uiSize.height - height of ui + * @param {Object} actions - ui action instance + */ + +var Ui = /*#__PURE__*/function () { + function Ui(element, options, actions) { + _classCallCheck(this, Ui); + + this.options = this._initializeOption(options); + this._actions = actions; + this.submenu = false; + this.imageSize = {}; + this.uiSize = {}; + this._locale = new locale(this.options.locale); + this.theme = new theme(this.options.theme); + this.eventHandler = {}; + this._submenuChangeTransection = false; + this._selectedElement = null; + this._mainElement = null; + this._editorElementWrap = null; + this._editorElement = null; + this._menuBarElement = null; + this._subMenuElement = null; + + this._makeUiElement(element); + + this._setUiSize(); + + this._initMenuEvent = false; + + this._makeSubMenu(); + + this._attachHistoryEvent(); + + this._attachZoomEvent(); + } + /** + * Destroys the instance. + */ + + + _createClass(Ui, [{ + key: "destroy", + value: function destroy() { + this._removeUiEvent(); + + this._destroyAllMenu(); + + this._selectedElement.innerHTML = ''; + assignmentForDestroy(this); + } + /** + * Set Default Selection for includeUI + * @param {Object} option - imageEditor options + * @returns {Object} - extends selectionStyle option + * @ignore + */ + + }, { + key: "setUiDefaultSelectionStyle", + value: function setUiDefaultSelectionStyle(option) { + return external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().extend({ + applyCropSelectionStyle: true, + applyGroupSelectionStyle: true, + selectionStyle: { + cornerStyle: 'circle', + cornerSize: 16, + cornerColor: '#fff', + cornerStrokeColor: '#fff', + transparentCorners: false, + lineWidth: 2, + borderColor: '#fff' + } + }, option); + } + /** + * Change editor size + * @param {Object} resizeInfo - ui & image size info + * @param {Object} [resizeInfo.uiSize] - image size dimension + * @param {string} resizeInfo.uiSize.width - ui width + * @param {string} resizeInfo.uiSize.height - ui height + * @param {Object} [resizeInfo.imageSize] - image size dimension + * @param {Number} resizeInfo.imageSize.oldWidth - old width + * @param {Number} resizeInfo.imageSize.oldHeight - old height + * @param {Number} resizeInfo.imageSize.newWidth - new width + * @param {Number} resizeInfo.imageSize.newHeight - new height + * @example + * // Change the image size and ui size, and change the affected ui state together. + * imageEditor.ui.resizeEditor({ + * imageSize: {oldWidth: 100, oldHeight: 100, newWidth: 700, newHeight: 700}, + * uiSize: {width: 1000, height: 1000} + * }); + * @example + * // Apply the ui state while preserving the previous attribute (for example, if responsive Ui) + * imageEditor.ui.resizeEditor(); + */ + + }, { + key: "resizeEditor", + value: function resizeEditor() { + var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}, + uiSize = _ref.uiSize, + _ref$imageSize = _ref.imageSize, + imageSize = _ref$imageSize === void 0 ? this.imageSize : _ref$imageSize; + + if (imageSize !== this.imageSize) { + this.imageSize = imageSize; + } + + if (uiSize) { + this._setUiSize(uiSize); + } + + var _this$_getCanvasMaxDi = this._getCanvasMaxDimension(), + width = _this$_getCanvasMaxDi.width, + height = _this$_getCanvasMaxDi.height; + + var editorElementStyle = this._editorElement.style; + var menuBarPosition = this.options.menuBarPosition; + editorElementStyle.height = "".concat(height, "px"); + editorElementStyle.width = "".concat(width, "px"); + + this._setEditorPosition(menuBarPosition); + + this._editorElementWrap.style.bottom = "0px"; + this._editorElementWrap.style.top = "0px"; + this._editorElementWrap.style.left = "0px"; + this._editorElementWrap.style.width = "100%"; + var selectElementClassList = this._selectedElement.classList; + + if (menuBarPosition === 'top' && this._selectedElement.offsetWidth < BI_EXPRESSION_MINSIZE_WHEN_TOP_POSITION) { + selectElementClassList.add('tui-image-editor-top-optimization'); + } else { + selectElementClassList.remove('tui-image-editor-top-optimization'); + } + } + /** + * Toggle zoom button status + * @param {string} type - type of zoom button + */ + + }, { + key: "toggleZoomButtonStatus", + value: function toggleZoomButtonStatus(type) { + var targetClassList = this._buttonElements[type].classList; + targetClassList.toggle(CLASS_NAME_ON); + + if (type === ZOOM_BUTTON_TYPE.ZOOM_IN) { + this._buttonElements[ZOOM_BUTTON_TYPE.HAND].classList.remove(CLASS_NAME_ON); + } else { + this._buttonElements[ZOOM_BUTTON_TYPE.ZOOM_IN].classList.remove(CLASS_NAME_ON); + } + } + /** + * Turn off zoom-in button status + */ + + }, { + key: "offZoomInButtonStatus", + value: function offZoomInButtonStatus() { + var zoomInClassList = this._buttonElements[ZOOM_BUTTON_TYPE.ZOOM_IN].classList; + zoomInClassList.remove(CLASS_NAME_ON); + } + /** + * Change hand button status + * @param {boolean} enabled - status to change + */ + + }, { + key: "changeHandButtonStatus", + value: function changeHandButtonStatus(enabled) { + var handClassList = this._buttonElements[ZOOM_BUTTON_TYPE.HAND].classList; + handClassList[enabled ? 'add' : 'remove'](CLASS_NAME_ON); + } + /** + * Change help button status + * @param {string} buttonType - target button type + * @param {Boolean} enableStatus - enabled status + * @ignore + */ + + }, { + key: "changeHelpButtonEnabled", + value: function changeHelpButtonEnabled(buttonType, enableStatus) { + var buttonClassList = this._buttonElements[buttonType].classList; + buttonClassList[enableStatus ? 'add' : 'remove']('enabled'); + } + /** + * Change delete button status + * @param {Object} [options] - Ui setting options + * @param {object} [options.loadImage] - Init default load image + * @param {string} [options.initMenu] - Init start menu + * @param {string} [options.menuBarPosition=bottom] - Let + * @param {boolean} [options.applyCropSelectionStyle=false] - Let + * @param {boolean} [options.usageStatistics=false] - Send statistics ping or not + * @returns {Object} initialize option + * @private + */ + + }, { + key: "_initializeOption", + value: function _initializeOption(options) { + return external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().extend({ + loadImage: { + path: '', + name: '' + }, + locale: {}, + menuIconPath: '', + menu: ['resize', 'crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'], + initMenu: '', + uiSize: { + width: '100%', + height: '100%' + }, + menuBarPosition: 'bottom' + }, options); + } + /** + * Set ui container size + * @param {Object} uiSize - ui dimension + * @param {string} uiSize.width - css width property + * @param {string} uiSize.height - css height property + * @private + */ + + }, { + key: "_setUiSize", + value: function _setUiSize() { + var uiSize = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.options.uiSize; + var elementDimension = this._selectedElement.style; + elementDimension.width = uiSize.width; + elementDimension.height = uiSize.height; + } + /** + * Make submenu dom element + * @private + */ + + }, { + key: "_makeSubMenu", + value: function _makeSubMenu() { + var _this = this; + + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), this.options.menu, function (menuName) { + var _context; + + var SubComponentClass = SUB_UI_COMPONENT[menuName.replace(/^[a-z]/, function ($0) { + return $0.toUpperCase(); + })]; // make menu element + + _this._makeMenuElement(menuName); // menu btn element + + + _this._buttonElements[menuName] = _this._menuBarElement.querySelector(".tie-btn-".concat(menuName)); // submenu ui instance + + _this[menuName] = new SubComponentClass(_this._subMenuElement, { + locale: _this._locale, + makeSvgIcon: bind_default()(_context = _this.theme.makeMenSvgIconSet).call(_context, _this.theme), + menuBarPosition: _this.options.menuBarPosition, + usageStatistics: _this.options.usageStatistics + }); + }); + } + /** + * Attach history event + * @private + */ + + }, { + key: "_attachHistoryEvent", + value: function _attachHistoryEvent() { + var _context2, _context3, _context4; + + this.on(eventNames.EXECUTE_COMMAND, bind_default()(_context2 = this._addHistory).call(_context2, this)); + this.on(eventNames.AFTER_UNDO, bind_default()(_context3 = this._selectPrevHistory).call(_context3, this)); + this.on(eventNames.AFTER_REDO, bind_default()(_context4 = this._selectNextHistory).call(_context4, this)); + } + /** + * Attach zoom event + * @private + */ + + }, { + key: "_attachZoomEvent", + value: function _attachZoomEvent() { + var _this2 = this; + + this.on(eventNames.HAND_STARTED, function () { + _this2.offZoomInButtonStatus(); + + _this2.changeHandButtonStatus(true); + }); + this.on(eventNames.HAND_STOPPED, function () { + return _this2.changeHandButtonStatus(false); + }); + } + /** + * Make primary ui dom element + * @param {string|HTMLElement} element - Wrapper's element or selector + * @private + */ + + }, { + key: "_makeUiElement", + value: function _makeUiElement(element) { + var _context5; + + var selectedElement; + window.snippet = (external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()); + + if (element.nodeType) { + selectedElement = element; + } else { + selectedElement = document.querySelector(element); + } + + var selector = getSelector(selectedElement); + selectedElement.classList.add('tui-image-editor-container'); + selectedElement.innerHTML = controls({ + locale: this._locale, + biImage: this.theme.getStyle('common.bi'), + loadButtonStyle: this.theme.getStyle('loadButton'), + downloadButtonStyle: this.theme.getStyle('downloadButton'), + menuBarPosition: this.options.menuBarPosition + }) + mainContainer({ + locale: this._locale, + biImage: this.theme.getStyle('common.bi'), + commonStyle: this.theme.getStyle('common'), + headerStyle: this.theme.getStyle('header'), + loadButtonStyle: this.theme.getStyle('loadButton'), + downloadButtonStyle: this.theme.getStyle('downloadButton'), + submenuStyle: this.theme.getStyle('submenu') + }); + this._selectedElement = selectedElement; + + this._selectedElement.classList.add(this.options.menuBarPosition); + + this._mainElement = selector('.tui-image-editor-main'); + this._editorElementWrap = selector('.tui-image-editor-wrap'); + this._editorElement = selector('.tui-image-editor'); + this._helpMenuBarElement = selector('.tui-image-editor-help-menu'); + this._menuBarElement = selector('.tui-image-editor-menu'); + this._subMenuElement = selector('.tui-image-editor-submenu'); + this._buttonElements = { + download: this._selectedElement.querySelectorAll('.tui-image-editor-download-btn'), + load: this._selectedElement.querySelectorAll('.tui-image-editor-load-btn') + }; + + this._addHelpMenus(); + + this._historyMenu = new ui_history(this._buttonElements[HISTORY_MENU], { + locale: this._locale, + makeSvgIcon: bind_default()(_context5 = this.theme.makeMenSvgIconSet).call(_context5, this.theme) + }); + + this._activateZoomMenus(); + } + /** + * Activate help menus for zoom. + * @private + */ + + }, { + key: "_activateZoomMenus", + value: function _activateZoomMenus() { + var _this3 = this; + + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), ZOOM_HELP_MENUS, function (menu) { + _this3.changeHelpButtonEnabled(menu, true); + }); + } + /** + * make array for help menu output, including partitions. + * @returns {Array} + * @private + */ + + }, { + key: "_makeHelpMenuWithPartition", + value: function _makeHelpMenuWithPartition() { + var _context6; + + return concat_default()(_context6 = []).call(_context6, _toConsumableArray(ZOOM_HELP_MENUS), [''], _toConsumableArray(COMMAND_HELP_MENUS), [''], _toConsumableArray(DELETE_HELP_MENUS)); + } + /** + * Add help menu + * @private + */ + + }, { + key: "_addHelpMenus", + value: function _addHelpMenus() { + var _this4 = this; + + var helpMenuWithPartition = this._makeHelpMenuWithPartition(); + + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), helpMenuWithPartition, function (menuName) { + if (!menuName) { + _this4._makeMenuPartitionElement(); + } else { + _this4._makeMenuElement(menuName, ['normal', 'disabled', 'hover'], 'help'); + + _this4._buttonElements[menuName] = _this4._helpMenuBarElement.querySelector(".tie-btn-".concat(menuName)); + } + }); + } + /** + * Make menu partition element + * @private + */ + + }, { + key: "_makeMenuPartitionElement", + value: function _makeMenuPartitionElement() { + var partitionElement = document.createElement('li'); + var partitionInnerElement = document.createElement('div'); + partitionElement.className = cls('item'); + partitionInnerElement.className = cls('icpartition'); + partitionElement.appendChild(partitionInnerElement); + + this._helpMenuBarElement.appendChild(partitionElement); + } + /** + * Make menu button element + * @param {string} menuName - menu name + * @param {Array} useIconTypes - Possible values are \['normal', 'active', 'hover', 'disabled'\] + * @param {string} menuType - 'normal' or 'help' + * @private + */ + + }, { + key: "_makeMenuElement", + value: function _makeMenuElement(menuName) { + var _context7, _context8; + + var useIconTypes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ['normal', 'active', 'hover']; + var menuType = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'normal'; + var btnElement = document.createElement('li'); + var menuItemHtml = this.theme.makeMenSvgIconSet(useIconTypes, menuName); + + this._addTooltipAttribute(btnElement, menuName); + + btnElement.className = concat_default()(_context7 = concat_default()(_context8 = "tie-btn-".concat(menuName, " ")).call(_context8, cls('item'), " ")).call(_context7, menuType); + btnElement.innerHTML = menuItemHtml; + + if (menuType === 'normal') { + this._menuBarElement.appendChild(btnElement); + } else { + this._helpMenuBarElement.appendChild(btnElement); + } + } + /** + * Add help action event + * @private + */ + + }, { + key: "_addHelpActionEvent", + value: function _addHelpActionEvent() { + var _this5 = this; + + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), HELP_MENUS, function (helpName) { + _this5.eventHandler[helpName] = function (event) { + return _this5._actions.main[helpName](event); + }; + + _this5._buttonElements[helpName].addEventListener('click', _this5.eventHandler[helpName]); + }); + } + /** + * Remove help action event + * @private + */ + + }, { + key: "_removeHelpActionEvent", + value: function _removeHelpActionEvent() { + var _this6 = this; + + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), HELP_MENUS, function (helpName) { + _this6._buttonElements[helpName].removeEventListener('click', _this6.eventHandler[helpName]); + }); + } + /** + * Add history + * @param {Command|string} command - command or command name + */ + + }, { + key: "_addHistory", + value: function _addHistory(command) { + if (!isSilentCommand(command)) { + var historyTitle = typeof command === 'string' ? { + name: command + } : getHistoryTitle(command); + + this._historyMenu.add(historyTitle); + } + } + /** + * Init history + */ + + }, { + key: "initHistory", + value: function initHistory() { + this._historyMenu.init(); + } + /** + * Clear history + */ + + }, { + key: "clearHistory", + value: function clearHistory() { + this._historyMenu.clear(); + } + /** + * Select prev history + */ + + }, { + key: "_selectPrevHistory", + value: function _selectPrevHistory() { + this._historyMenu.prev(); + } + /** + * Select next history + */ + + }, { + key: "_selectNextHistory", + value: function _selectNextHistory() { + this._historyMenu.next(); + } + /** + * Toggle history menu + * @param {object} event - event object + */ + + }, { + key: "toggleHistoryMenu", + value: function toggleHistoryMenu(event) { + var target = event.target; + var item = target.closest(".".concat(HISTORY_PANEL_CLASS_NAME)); + + if (item) { + return; + } + + var historyButtonClassList = this._buttonElements[HISTORY_MENU].classList; + historyButtonClassList.toggle('opened'); + } + /** + * Add attribute for menu tooltip + * @param {HTMLElement} element - menu element + * @param {string} tooltipName - tooltipName + * @private + */ + + }, { + key: "_addTooltipAttribute", + value: function _addTooltipAttribute(element, tooltipName) { + element.setAttribute('tooltip-content', this._locale.localize(tooltipName.replace(/^[a-z]/g, function ($0) { + return $0.toUpperCase(); + }))); + } + /** + * Add download event + * @private + */ + + }, { + key: "_addDownloadEvent", + value: function _addDownloadEvent() { + var _this7 = this; + + this.eventHandler.download = function () { + return _this7._actions.main.download(); + }; + + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), this._buttonElements.download, function (element) { + element.addEventListener('click', _this7.eventHandler.download); + }); + } + }, { + key: "_removeDownloadEvent", + value: function _removeDownloadEvent() { + var _this8 = this; + + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), this._buttonElements.download, function (element) { + element.removeEventListener('click', _this8.eventHandler.download); + }); + } + /** + * Add load event + * @private + */ + + }, { + key: "_addLoadEvent", + value: function _addLoadEvent() { + var _this9 = this; + + this.eventHandler.loadImage = function (event) { + return _this9._actions.main.load(event.target.files[0]); + }; + + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), this._buttonElements.load, function (element) { + element.addEventListener('change', _this9.eventHandler.loadImage); + }); + } + /** + * Remove load event + * @private + */ + + }, { + key: "_removeLoadEvent", + value: function _removeLoadEvent() { + var _this10 = this; + + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), this._buttonElements.load, function (element) { + element.removeEventListener('change', _this10.eventHandler.loadImage); + }); + } + /** + * Add menu event + * @param {string} menuName - menu name + * @private + */ + + }, { + key: "_addMainMenuEvent", + value: function _addMainMenuEvent(menuName) { + var _this11 = this; + + this.eventHandler[menuName] = function () { + return _this11.changeMenu(menuName); + }; + + this._buttonElements[menuName].addEventListener('click', this.eventHandler[menuName]); + } + /** + * Add menu event + * @param {string} menuName - menu name + * @private + */ + + }, { + key: "_addSubMenuEvent", + value: function _addSubMenuEvent(menuName) { + var _this12 = this; + + this[menuName].addEvent(this._actions[menuName]); + this[menuName].on(eventNames.INPUT_BOX_EDITING_STARTED, function () { + return _this12.fire(eventNames.INPUT_BOX_EDITING_STARTED); + }); + this[menuName].on(eventNames.INPUT_BOX_EDITING_STOPPED, function () { + return _this12.fire(eventNames.INPUT_BOX_EDITING_STOPPED); + }); + } + /** + * Add menu event + * @private + */ + + }, { + key: "_addMenuEvent", + value: function _addMenuEvent() { + var _this13 = this; + + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), this.options.menu, function (menuName) { + _this13._addMainMenuEvent(menuName); + + _this13._addSubMenuEvent(menuName); + }); + } + /** + * Remove menu event + * @private + */ + + }, { + key: "_removeMainMenuEvent", + value: function _removeMainMenuEvent() { + var _this14 = this; + + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), this.options.menu, function (menuName) { + _this14._buttonElements[menuName].removeEventListener('click', _this14.eventHandler[menuName]); + + _this14[menuName].off(eventNames.INPUT_BOX_EDITING_STARTED); + + _this14[menuName].off(eventNames.INPUT_BOX_EDITING_STOPPED); + }); + } + /** + * Get editor area element + * @returns {HTMLElement} editor area html element + * @ignore + */ + + }, { + key: "getEditorArea", + value: function getEditorArea() { + return this._editorElement; + } + /** + * Add event for menu items + * @ignore + */ + + }, { + key: "activeMenuEvent", + value: function activeMenuEvent() { + if (this._initMenuEvent) { + return; + } + + this._addHelpActionEvent(); + + this._addDownloadEvent(); + + this._addMenuEvent(); + + this._initMenu(); + + this._historyMenu.addEvent(this._actions.history); + + this._initMenuEvent = true; + } + /** + * Remove ui event + * @private + */ + + }, { + key: "_removeUiEvent", + value: function _removeUiEvent() { + this._removeHelpActionEvent(); + + this._removeDownloadEvent(); + + this._removeLoadEvent(); + + this._removeMainMenuEvent(); + + this._historyMenu.removeEvent(); + } + /** + * Destroy all menu instance + * @private + */ + + }, { + key: "_destroyAllMenu", + value: function _destroyAllMenu() { + var _this15 = this; + + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), this.options.menu, function (menuName) { + _this15[menuName].destroy(); + }); + + this._historyMenu.destroy(); + } + /** + * Init canvas + * @ignore + */ + + }, { + key: "initCanvas", + value: function initCanvas() { + var _this16 = this; + + var loadImageInfo = this._getLoadImage(); + + if (loadImageInfo.path) { + this._actions.main.initLoadImage(loadImageInfo.path, loadImageInfo.name).then(function () { + _this16.activeMenuEvent(); + }); + } + + this._addLoadEvent(); + + var gridVisual = document.createElement('div'); + gridVisual.className = cls('grid-visual'); + var grid = "\n \n \n \n
          "; + gridVisual.innerHTML = grid; + this._editorContainerElement = this._editorElement.querySelector('.tui-image-editor-canvas-container'); + + this._editorContainerElement.appendChild(gridVisual); + } + /** + * get editor area element + * @returns {Object} load image option + * @private + */ + + }, { + key: "_getLoadImage", + value: function _getLoadImage() { + return this.options.loadImage; + } + /** + * change menu + * @param {string} menuName - menu name + * @param {boolean} toggle - whether toogle or not + * @param {boolean} discardSelection - discard selection + * @ignore + */ + + }, { + key: "changeMenu", + value: function changeMenu(menuName) { + var toggle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; + var discardSelection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true; + + if (!this._submenuChangeTransection) { + this._submenuChangeTransection = true; + + this._changeMenu(menuName, toggle, discardSelection); + + this._submenuChangeTransection = false; + } + } + /** + * change menu + * @param {string} menuName - menu name + * @param {boolean} toggle - whether toggle or not + * @param {boolean} discardSelection - discard selection + * @private + */ + + }, { + key: "_changeMenu", + value: function _changeMenu(menuName, toggle, discardSelection) { + if (this.submenu) { + this._buttonElements[this.submenu].classList.remove('active'); + + this._mainElement.classList.remove("tui-image-editor-menu-".concat(this.submenu)); + + if (discardSelection) { + this._actions.main.discardSelection(); + } + + this._actions.main.changeSelectableAll(true); + + this[this.submenu].changeStandbyMode(); + } + + if (this.submenu === menuName && toggle) { + this.submenu = null; + } else { + this._buttonElements[menuName].classList.add('active'); + + this._mainElement.classList.add("tui-image-editor-menu-".concat(menuName)); + + this.submenu = menuName; + this[this.submenu].changeStartMode(); + } + + this.resizeEditor(); + } + /** + * Init menu + * @private + */ + + }, { + key: "_initMenu", + value: function _initMenu() { + if (this.options.initMenu) { + var evt = document.createEvent('MouseEvents'); + evt.initEvent('click', true, false); + + this._buttonElements[this.options.initMenu].dispatchEvent(evt); + } + + if (this.icon) { + this.icon.registerDefaultIcon(); + } + } + /** + * Get canvas max Dimension + * @returns {Object} - width & height of editor + * @private + */ + + }, { + key: "_getCanvasMaxDimension", + value: function _getCanvasMaxDimension() { + var _this$_editorContaine = this._editorContainerElement.style, + maxWidth = _this$_editorContaine.maxWidth, + maxHeight = _this$_editorContaine.maxHeight; + + var width = parse_float_default()(maxWidth); + + var height = parse_float_default()(maxHeight); + + return { + width: width, + height: height + }; + } + /** + * Set editor position + * @param {string} menuBarPosition - top or right or bottom or left + * @private + */ + // eslint-disable-next-line complexity + + }, { + key: "_setEditorPosition", + value: function _setEditorPosition(menuBarPosition) { + var _this$_getCanvasMaxDi2 = this._getCanvasMaxDimension(), + width = _this$_getCanvasMaxDi2.width, + height = _this$_getCanvasMaxDi2.height; + + var editorElementStyle = this._editorElement.style; + var top = 0; + var left = 0; + + if (this.submenu) { + if (menuBarPosition === 'bottom') { + if (height > this._editorElementWrap.scrollHeight - 150) { + top = (height - this._editorElementWrap.scrollHeight) / 2; + } else { + top = 150 / 2 * -1; + } + } else if (menuBarPosition === 'top') { + if (height > this._editorElementWrap.offsetHeight - 150) { + top = 150 / 2 - (height - (this._editorElementWrap.offsetHeight - 150)) / 2; + } else { + top = 150 / 2; + } + } else if (menuBarPosition === 'left') { + if (width > this._editorElementWrap.offsetWidth - 248) { + left = 248 / 2 - (width - (this._editorElementWrap.offsetWidth - 248)) / 2; + } else { + left = 248 / 2; + } + } else if (menuBarPosition === 'right') { + if (width > this._editorElementWrap.scrollWidth - 248) { + left = (width - this._editorElementWrap.scrollWidth) / 2; + } else { + left = 248 / 2 * -1; + } + } + } + + editorElementStyle.top = "".concat(top, "px"); + editorElementStyle.left = "".concat(left, "px"); + } + }]); + + return Ui; +}(); + +CustomEvents.mixin(Ui); +/* harmony default export */ var ui = (Ui); +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js-stable/instance/filter.js +var instance_filter = __webpack_require__(381); +var filter_default = /*#__PURE__*/__webpack_require__.n(instance_filter); +;// CONCATENATED MODULE: ./src/js/helper/imagetracer.js + + + + + +/* + imagetracer.js version 1.2.4 + Simple raster image tracer and vectorizer written in JavaScript. + andras@jankovics.net +*/ + +/* + The Unlicense / PUBLIC DOMAIN + This is free and unencumbered software released into the public domain. + Anyone is free to copy, modify, publish, use, compile, sell, or + distribute this software, either in source code form or as a compiled + binary, for any purpose, commercial or non-commercial, and by any + means. + In jurisdictions that recognize copyright laws, the author or authors + of this software dedicate any and all copyright interest in the + software to the public domain. We make this dedication for the benefit + of the public at large and to the detriment of our heirs and + successors. We intend this dedication to be an overt act of + relinquishment in perpetuity of all present and future rights to this + software under copyright law. + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, + EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF + MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. + IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR + OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, + ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR + OTHER DEALINGS IN THE SOFTWARE. + For more information, please refer to http://unlicense.org/ +*/ +var ImageTracer = /*#__PURE__*/function () { + /* eslint-disable */ + function ImageTracer() { + _classCallCheck(this, ImageTracer); + + this.versionnumber = '1.2.4'; + this.optionpresets = { + default: { + corsenabled: false, + ltres: 1, + qtres: 1, + pathomit: 8, + rightangleenhance: true, + colorsampling: 2, + numberofcolors: 16, + mincolorratio: 0, + colorquantcycles: 3, + layering: 0, + strokewidth: 1, + linefilter: false, + scale: 1, + roundcoords: 1, + viewbox: false, + desc: false, + lcpr: 0, + qcpr: 0, + blurradius: 0, + blurdelta: 20 + }, + posterized1: { + colorsampling: 0, + numberofcolors: 2 + }, + posterized2: { + numberofcolors: 4, + blurradius: 5 + }, + curvy: { + ltres: 0.01, + linefilter: true, + rightangleenhance: false + }, + sharp: { + qtres: 0.01, + linefilter: false + }, + detailed: { + pathomit: 0, + roundcoords: 2, + ltres: 0.5, + qtres: 0.5, + numberofcolors: 64 + }, + smoothed: { + blurradius: 5, + blurdelta: 64 + }, + grayscale: { + colorsampling: 0, + colorquantcycles: 1, + numberofcolors: 7 + }, + fixedpalette: { + colorsampling: 0, + colorquantcycles: 1, + numberofcolors: 27 + }, + randomsampling1: { + colorsampling: 1, + numberofcolors: 8 + }, + randomsampling2: { + colorsampling: 1, + numberofcolors: 64 + }, + artistic1: { + colorsampling: 0, + colorquantcycles: 1, + pathomit: 0, + blurradius: 5, + blurdelta: 64, + ltres: 0.01, + linefilter: true, + numberofcolors: 16, + strokewidth: 2 + }, + artistic2: { + qtres: 0.01, + colorsampling: 0, + colorquantcycles: 1, + numberofcolors: 4, + strokewidth: 0 + }, + artistic3: { + qtres: 10, + ltres: 10, + numberofcolors: 8 + }, + artistic4: { + qtres: 10, + ltres: 10, + numberofcolors: 64, + blurradius: 5, + blurdelta: 256, + strokewidth: 2 + }, + posterized3: { + ltres: 1, + qtres: 1, + pathomit: 20, + rightangleenhance: true, + colorsampling: 0, + numberofcolors: 3, + mincolorratio: 0, + colorquantcycles: 3, + blurradius: 3, + blurdelta: 20, + strokewidth: 0, + linefilter: false, + roundcoords: 1, + pal: [{ + r: 0, + g: 0, + b: 100, + a: 255 + }, { + r: 255, + g: 255, + b: 255, + a: 255 + }] + } + }; + this.pathscan_combined_lookup = [[[-1, -1, -1, -1], [-1, -1, -1, -1], [-1, -1, -1, -1], [-1, -1, -1, -1]], [[0, 1, 0, -1], [-1, -1, -1, -1], [-1, -1, -1, -1], [0, 2, -1, 0]], [[-1, -1, -1, -1], [-1, -1, -1, -1], [0, 1, 0, -1], [0, 0, 1, 0]], [[0, 0, 1, 0], [-1, -1, -1, -1], [0, 2, -1, 0], [-1, -1, -1, -1]], [[-1, -1, -1, -1], [0, 0, 1, 0], [0, 3, 0, 1], [-1, -1, -1, -1]], [[13, 3, 0, 1], [13, 2, -1, 0], [7, 1, 0, -1], [7, 0, 1, 0]], [[-1, -1, -1, -1], [0, 1, 0, -1], [-1, -1, -1, -1], [0, 3, 0, 1]], [[0, 3, 0, 1], [0, 2, -1, 0], [-1, -1, -1, -1], [-1, -1, -1, -1]], [[0, 3, 0, 1], [0, 2, -1, 0], [-1, -1, -1, -1], [-1, -1, -1, -1]], [[-1, -1, -1, -1], [0, 1, 0, -1], [-1, -1, -1, -1], [0, 3, 0, 1]], [[11, 1, 0, -1], [14, 0, 1, 0], [14, 3, 0, 1], [11, 2, -1, 0]], [[-1, -1, -1, -1], [0, 0, 1, 0], [0, 3, 0, 1], [-1, -1, -1, -1]], [[0, 0, 1, 0], [-1, -1, -1, -1], [0, 2, -1, 0], [-1, -1, -1, -1]], [[-1, -1, -1, -1], [-1, -1, -1, -1], [0, 1, 0, -1], [0, 0, 1, 0]], [[0, 1, 0, -1], [-1, -1, -1, -1], [-1, -1, -1, -1], [0, 2, -1, 0]], [[-1, -1, -1, -1], [-1, -1, -1, -1], [-1, -1, -1, -1], [-1, -1, -1, -1]]]; + this.gks = [[0.27901, 0.44198, 0.27901], [0.135336, 0.228569, 0.272192, 0.228569, 0.135336], [0.086776, 0.136394, 0.178908, 0.195843, 0.178908, 0.136394, 0.086776], [0.063327, 0.093095, 0.122589, 0.144599, 0.152781, 0.144599, 0.122589, 0.093095, 0.063327], [0.049692, 0.069304, 0.089767, 0.107988, 0.120651, 0.125194, 0.120651, 0.107988, 0.089767, 0.069304, 0.049692]]; + this.specpalette = [{ + r: 0, + g: 0, + b: 0, + a: 255 + }, { + r: 128, + g: 128, + b: 128, + a: 255 + }, { + r: 0, + g: 0, + b: 128, + a: 255 + }, { + r: 64, + g: 64, + b: 128, + a: 255 + }, { + r: 192, + g: 192, + b: 192, + a: 255 + }, { + r: 255, + g: 255, + b: 255, + a: 255 + }, { + r: 128, + g: 128, + b: 192, + a: 255 + }, { + r: 0, + g: 0, + b: 192, + a: 255 + }, { + r: 128, + g: 0, + b: 0, + a: 255 + }, { + r: 128, + g: 64, + b: 64, + a: 255 + }, { + r: 128, + g: 0, + b: 128, + a: 255 + }, { + r: 168, + g: 168, + b: 168, + a: 255 + }, { + r: 192, + g: 128, + b: 128, + a: 255 + }, { + r: 192, + g: 0, + b: 0, + a: 255 + }, { + r: 255, + g: 255, + b: 255, + a: 255 + }, { + r: 0, + g: 128, + b: 0, + a: 255 + }]; + } + + _createClass(ImageTracer, [{ + key: "imageToSVG", + value: function imageToSVG(url, callback, options) { + var _this = this; + + options = this.checkoptions(options); + this.loadImage(url, function (canvas) { + callback(_this.imagedataToSVG(_this.getImgdata(canvas), options)); + }, options); + } + }, { + key: "imagedataToSVG", + value: function imagedataToSVG(imgd, options) { + options = this.checkoptions(options); + var td = this.imagedataToTracedata(imgd, options); + return this.getsvgstring(td, options); + } + }, { + key: "imageToTracedata", + value: function imageToTracedata(url, callback, options) { + var _this2 = this; + + options = this.checkoptions(options); + this.loadImage(url, function (canvas) { + callback(_this2.imagedataToTracedata(_this2.getImgdata(canvas), options)); + }, options); + } + }, { + key: "imagedataToTracedata", + value: function imagedataToTracedata(imgd, options) { + options = this.checkoptions(options); + var ii = this.colorquantization(imgd, options); + var tracedata; + + if (options.layering === 0) { + tracedata = { + layers: [], + palette: ii.palette, + width: ii.array[0].length - 2, + height: ii.array.length - 2 + }; + + for (var colornum = 0; colornum < ii.palette.length; colornum += 1) { + var tracedlayer = this.batchtracepaths(this.internodes(this.pathscan(this.layeringstep(ii, colornum), options.pathomit), options), options.ltres, options.qtres); + tracedata.layers.push(tracedlayer); + } + } else { + var ls = this.layering(ii); + + if (options.layercontainerid) { + this.drawLayers(ls, this.specpalette, options.scale, options.layercontainerid); + } + + var bps = this.batchpathscan(ls, options.pathomit); + var bis = this.batchinternodes(bps, options); + tracedata = { + layers: this.batchtracelayers(bis, options.ltres, options.qtres), + palette: ii.palette, + width: imgd.width, + height: imgd.height + }; + } + + return tracedata; + } + }, { + key: "checkoptions", + value: function checkoptions(options) { + options = options || {}; + + if (typeof options === 'string') { + options = options.toLowerCase(); + + if (this.optionpresets[options]) { + options = this.optionpresets[options]; + } else { + options = {}; + } + } + + var ok = keys_default()(this.optionpresets['default']); + + for (var k = 0; k < ok.length; k += 1) { + if (!options.hasOwnProperty(ok[k])) { + options[ok[k]] = this.optionpresets['default'][ok[k]]; + } + } + + return options; + } + }, { + key: "colorquantization", + value: function colorquantization(imgd, options) { + var arr = []; + var idx = 0; + var cd; + var cdl; + var ci; + var paletteacc = []; + var pixelnum = imgd.width * imgd.height; + var i; + var j; + var k; + var cnt; + var palette; + + for (j = 0; j < imgd.height + 2; j += 1) { + arr[j] = []; + + for (i = 0; i < imgd.width + 2; i += 1) { + arr[j][i] = -1; + } + } + + if (options.pal) { + palette = options.pal; + } else if (options.colorsampling === 0) { + palette = this.generatepalette(options.numberofcolors); + } else if (options.colorsampling === 1) { + palette = this.samplepalette(options.numberofcolors, imgd); + } else { + palette = this.samplepalette2(options.numberofcolors, imgd); + } + + if (options.blurradius > 0) { + imgd = this.blur(imgd, options.blurradius, options.blurdelta); + } + + for (cnt = 0; cnt < options.colorquantcycles; cnt += 1) { + if (cnt > 0) { + for (k = 0; k < palette.length; k += 1) { + if (paletteacc[k].n > 0) { + palette[k] = { + r: Math.floor(paletteacc[k].r / paletteacc[k].n), + g: Math.floor(paletteacc[k].g / paletteacc[k].n), + b: Math.floor(paletteacc[k].b / paletteacc[k].n), + a: Math.floor(paletteacc[k].a / paletteacc[k].n) + }; + } + + if (paletteacc[k].n / pixelnum < options.mincolorratio && cnt < options.colorquantcycles - 1) { + palette[k] = { + r: Math.floor(Math.random() * 255), + g: Math.floor(Math.random() * 255), + b: Math.floor(Math.random() * 255), + a: Math.floor(Math.random() * 255) + }; + } + } + } + + for (i = 0; i < palette.length; i += 1) { + paletteacc[i] = { + r: 0, + g: 0, + b: 0, + a: 0, + n: 0 + }; + } + + for (j = 0; j < imgd.height; j += 1) { + for (i = 0; i < imgd.width; i += 1) { + idx = (j * imgd.width + i) * 4; + ci = 0; + cdl = 1024; + + for (k = 0; k < palette.length; k += 1) { + cd = Math.abs(palette[k].r - imgd.data[idx]) + Math.abs(palette[k].g - imgd.data[idx + 1]) + Math.abs(palette[k].b - imgd.data[idx + 2]) + Math.abs(palette[k].a - imgd.data[idx + 3]); + + if (cd < cdl) { + cdl = cd; + ci = k; + } + } + + paletteacc[ci].r += imgd.data[idx]; + paletteacc[ci].g += imgd.data[idx + 1]; + paletteacc[ci].b += imgd.data[idx + 2]; + paletteacc[ci].a += imgd.data[idx + 3]; + paletteacc[ci].n += 1; + arr[j + 1][i + 1] = ci; + } + } + } + + return { + array: arr, + palette: palette + }; + } + }, { + key: "samplepalette", + value: function samplepalette(numberofcolors, imgd) { + var idx; + var palette = []; + + for (var i = 0; i < numberofcolors; i += 1) { + idx = Math.floor(Math.random() * imgd.data.length / 4) * 4; + palette.push({ + r: imgd.data[idx], + g: imgd.data[idx + 1], + b: imgd.data[idx + 2], + a: imgd.data[idx + 3] + }); + } + + return palette; + } + }, { + key: "samplepalette2", + value: function samplepalette2(numberofcolors, imgd) { + var idx; + var palette = []; + var ni = Math.ceil(Math.sqrt(numberofcolors)); + var nj = Math.ceil(numberofcolors / ni); + var vx = imgd.width / (ni + 1); + var vy = imgd.height / (nj + 1); + + for (var j = 0; j < nj; j += 1) { + for (var i = 0; i < ni; i += 1) { + if (palette.length === numberofcolors) { + break; + } else { + idx = Math.floor((j + 1) * vy * imgd.width + (i + 1) * vx) * 4; + palette.push({ + r: imgd.data[idx], + g: imgd.data[idx + 1], + b: imgd.data[idx + 2], + a: imgd.data[idx + 3] + }); + } + } + } + + return palette; + } + }, { + key: "generatepalette", + value: function generatepalette(numberofcolors) { + var palette = []; + var rcnt; + var gcnt; + var bcnt; + + if (numberofcolors < 8) { + var graystep = Math.floor(255 / (numberofcolors - 1)); + + for (var i = 0; i < numberofcolors; i += 1) { + palette.push({ + r: i * graystep, + g: i * graystep, + b: i * graystep, + a: 255 + }); + } + } else { + var colorqnum = Math.floor(Math.pow(numberofcolors, 1 / 3)); + var colorstep = Math.floor(255 / (colorqnum - 1)); + var rndnum = numberofcolors - colorqnum * colorqnum * colorqnum; + + for (rcnt = 0; rcnt < colorqnum; rcnt += 1) { + for (gcnt = 0; gcnt < colorqnum; gcnt += 1) { + for (bcnt = 0; bcnt < colorqnum; bcnt += 1) { + palette.push({ + r: rcnt * colorstep, + g: gcnt * colorstep, + b: bcnt * colorstep, + a: 255 + }); + } + } + } + + for (rcnt = 0; rcnt < rndnum; rcnt += 1) { + palette.push({ + r: Math.floor(Math.random() * 255), + g: Math.floor(Math.random() * 255), + b: Math.floor(Math.random() * 255), + a: Math.floor(Math.random() * 255) + }); + } + } + + return palette; + } + }, { + key: "layering", + value: function layering(ii) { + var layers = []; + var val = 0; + var ah = ii.array.length; + var aw = ii.array[0].length; + var n1; + var n2; + var n3; + var n4; + var n5; + var n6; + var n7; + var n8; + var i; + var j; + var k; + + for (k = 0; k < ii.palette.length; k += 1) { + layers[k] = []; + + for (j = 0; j < ah; j += 1) { + layers[k][j] = []; + + for (i = 0; i < aw; i += 1) { + layers[k][j][i] = 0; + } + } + } + + for (j = 1; j < ah - 1; j += 1) { + for (i = 1; i < aw - 1; i += 1) { + val = ii.array[j][i]; + n1 = ii.array[j - 1][i - 1] === val ? 1 : 0; + n2 = ii.array[j - 1][i] === val ? 1 : 0; + n3 = ii.array[j - 1][i + 1] === val ? 1 : 0; + n4 = ii.array[j][i - 1] === val ? 1 : 0; + n5 = ii.array[j][i + 1] === val ? 1 : 0; + n6 = ii.array[j + 1][i - 1] === val ? 1 : 0; + n7 = ii.array[j + 1][i] === val ? 1 : 0; + n8 = ii.array[j + 1][i + 1] === val ? 1 : 0; + layers[val][j + 1][i + 1] = 1 + n5 * 2 + n8 * 4 + n7 * 8; + + if (!n4) { + layers[val][j + 1][i] = 0 + 2 + n7 * 4 + n6 * 8; + } + + if (!n2) { + layers[val][j][i + 1] = 0 + n3 * 2 + n5 * 4 + 8; + } + + if (!n1) { + layers[val][j][i] = 0 + n2 * 2 + 4 + n4 * 8; + } + } + } + + return layers; + } + }, { + key: "layeringstep", + value: function layeringstep(ii, cnum) { + var layer = []; + var ah = ii.array.length; + var aw = ii.array[0].length; + var i; + var j; + + for (j = 0; j < ah; j += 1) { + layer[j] = []; + + for (i = 0; i < aw; i += 1) { + layer[j][i] = 0; + } + } + + for (j = 1; j < ah; j += 1) { + for (i = 1; i < aw; i += 1) { + layer[j][i] = (ii.array[j - 1][i - 1] === cnum ? 1 : 0) + (ii.array[j - 1][i] === cnum ? 2 : 0) + (ii.array[j][i - 1] === cnum ? 8 : 0) + (ii.array[j][i] === cnum ? 4 : 0); + } + } + + return layer; + } + }, { + key: "pathscan", + value: function pathscan(arr, pathomit) { + var paths = []; + var pacnt = 0; + var pcnt = 0; + var px = 0; + var py = 0; + var w = arr[0].length; + var h = arr.length; + var dir = 0; + var pathfinished = true; + var holepath = false; + var lookuprow; + + for (var j = 0; j < h; j += 1) { + for (var i = 0; i < w; i += 1) { + if (arr[j][i] === 4 || arr[j][i] === 11) { + px = i; + py = j; + paths[pacnt] = {}; + paths[pacnt].points = []; + paths[pacnt].boundingbox = [px, py, px, py]; + paths[pacnt].holechildren = []; + pathfinished = false; + pcnt = 0; + holepath = arr[j][i] === 11; + dir = 1; + + while (!pathfinished) { + paths[pacnt].points[pcnt] = {}; + paths[pacnt].points[pcnt].x = px - 1; + paths[pacnt].points[pcnt].y = py - 1; + paths[pacnt].points[pcnt].t = arr[py][px]; + + if (px - 1 < paths[pacnt].boundingbox[0]) { + paths[pacnt].boundingbox[0] = px - 1; + } + + if (px - 1 > paths[pacnt].boundingbox[2]) { + paths[pacnt].boundingbox[2] = px - 1; + } + + if (py - 1 < paths[pacnt].boundingbox[1]) { + paths[pacnt].boundingbox[1] = py - 1; + } + + if (py - 1 > paths[pacnt].boundingbox[3]) { + paths[pacnt].boundingbox[3] = py - 1; + } + + lookuprow = this.pathscan_combined_lookup[arr[py][px]][dir]; + arr[py][px] = lookuprow[0]; + dir = lookuprow[1]; + px += lookuprow[2]; + py += lookuprow[3]; + + if (px - 1 === paths[pacnt].points[0].x && py - 1 === paths[pacnt].points[0].y) { + pathfinished = true; + + if (paths[pacnt].points.length < pathomit) { + paths.pop(); + } else { + paths[pacnt].isholepath = !!holepath; + + if (holepath) { + var parentidx = 0, + parentbbox = [-1, -1, w + 1, h + 1]; + + for (var parentcnt = 0; parentcnt < pacnt; parentcnt++) { + if (!paths[parentcnt].isholepath && this.boundingboxincludes(paths[parentcnt].boundingbox, paths[pacnt].boundingbox) && this.boundingboxincludes(parentbbox, paths[parentcnt].boundingbox)) { + parentidx = parentcnt; + parentbbox = paths[parentcnt].boundingbox; + } + } + + paths[parentidx].holechildren.push(pacnt); + } + + pacnt += 1; + } + } + + pcnt += 1; + } + } + } + } + + return paths; + } + }, { + key: "boundingboxincludes", + value: function boundingboxincludes(parentbbox, childbbox) { + return parentbbox[0] < childbbox[0] && parentbbox[1] < childbbox[1] && parentbbox[2] > childbbox[2] && parentbbox[3] > childbbox[3]; + } + }, { + key: "batchpathscan", + value: function batchpathscan(layers, pathomit) { + var bpaths = []; + + for (var k in layers) { + if (!layers.hasOwnProperty(k)) { + continue; + } + + bpaths[k] = this.pathscan(layers[k], pathomit); + } + + return bpaths; + } + }, { + key: "internodes", + value: function internodes(paths, options) { + var ins = []; + var palen = 0; + var nextidx = 0; + var nextidx2 = 0; + var previdx = 0; + var previdx2 = 0; + var pacnt; + var pcnt; + + for (pacnt = 0; pacnt < paths.length; pacnt += 1) { + ins[pacnt] = {}; + ins[pacnt].points = []; + ins[pacnt].boundingbox = paths[pacnt].boundingbox; + ins[pacnt].holechildren = paths[pacnt].holechildren; + ins[pacnt].isholepath = paths[pacnt].isholepath; + palen = paths[pacnt].points.length; + + for (pcnt = 0; pcnt < palen; pcnt += 1) { + nextidx = (pcnt + 1) % palen; + nextidx2 = (pcnt + 2) % palen; + previdx = (pcnt - 1 + palen) % palen; + previdx2 = (pcnt - 2 + palen) % palen; + + if (options.rightangleenhance && this.testrightangle(paths[pacnt], previdx2, previdx, pcnt, nextidx, nextidx2)) { + if (ins[pacnt].points.length > 0) { + ins[pacnt].points[ins[pacnt].points.length - 1].linesegment = this.getdirection(ins[pacnt].points[ins[pacnt].points.length - 1].x, ins[pacnt].points[ins[pacnt].points.length - 1].y, paths[pacnt].points[pcnt].x, paths[pacnt].points[pcnt].y); + } + + ins[pacnt].points.push({ + x: paths[pacnt].points[pcnt].x, + y: paths[pacnt].points[pcnt].y, + linesegment: this.getdirection(paths[pacnt].points[pcnt].x, paths[pacnt].points[pcnt].y, (paths[pacnt].points[pcnt].x + paths[pacnt].points[nextidx].x) / 2, (paths[pacnt].points[pcnt].y + paths[pacnt].points[nextidx].y) / 2) + }); + } + + ins[pacnt].points.push({ + x: (paths[pacnt].points[pcnt].x + paths[pacnt].points[nextidx].x) / 2, + y: (paths[pacnt].points[pcnt].y + paths[pacnt].points[nextidx].y) / 2, + linesegment: this.getdirection((paths[pacnt].points[pcnt].x + paths[pacnt].points[nextidx].x) / 2, (paths[pacnt].points[pcnt].y + paths[pacnt].points[nextidx].y) / 2, (paths[pacnt].points[nextidx].x + paths[pacnt].points[nextidx2].x) / 2, (paths[pacnt].points[nextidx].y + paths[pacnt].points[nextidx2].y) / 2) + }); + } + } + + return ins; + } + }, { + key: "testrightangle", + value: function testrightangle(path, idx1, idx2, idx3, idx4, idx5) { + return path.points[idx3].x === path.points[idx1].x && path.points[idx3].x === path.points[idx2].x && path.points[idx3].y === path.points[idx4].y && path.points[idx3].y === path.points[idx5].y || path.points[idx3].y === path.points[idx1].y && path.points[idx3].y === path.points[idx2].y && path.points[idx3].x === path.points[idx4].x && path.points[idx3].x === path.points[idx5].x; + } + }, { + key: "getdirection", + value: function getdirection(x1, y1, x2, y2) { + var val = 8; + + if (x1 < x2) { + if (y1 < y2) { + val = 1; + } else if (y1 > y2) { + val = 7; + } else { + val = 0; + } + } else if (x1 > x2) { + if (y1 < y2) { + val = 3; + } else if (y1 > y2) { + val = 5; + } else { + val = 4; + } + } else if (y1 < y2) { + val = 2; + } else if (y1 > y2) { + val = 6; + } else { + val = 8; + } + + return val; + } + }, { + key: "batchinternodes", + value: function batchinternodes(bpaths, options) { + var binternodes = []; + + for (var k in bpaths) { + if (!bpaths.hasOwnProperty(k)) { + continue; + } + + binternodes[k] = this.internodes(bpaths[k], options); + } + + return binternodes; + } + }, { + key: "tracepath", + value: function tracepath(path, ltres, qtres) { + var pcnt = 0; + var segtype1; + var segtype2; + var seqend; + var smp = {}; + smp.segments = []; + smp.boundingbox = path.boundingbox; + smp.holechildren = path.holechildren; + smp.isholepath = path.isholepath; + + while (pcnt < path.points.length) { + var _context; + + segtype1 = path.points[pcnt].linesegment; + segtype2 = -1; + seqend = pcnt + 1; + + while ((path.points[seqend].linesegment === segtype1 || path.points[seqend].linesegment === segtype2 || segtype2 === -1) && seqend < path.points.length - 1) { + if (path.points[seqend].linesegment !== segtype1 && segtype2 === -1) { + segtype2 = path.points[seqend].linesegment; + } + + seqend += 1; + } + + if (seqend === path.points.length - 1) { + seqend = 0; + } + + smp.segments = concat_default()(_context = smp.segments).call(_context, this.fitseq(path, ltres, qtres, pcnt, seqend)); + + if (seqend > 0) { + pcnt = seqend; + } else { + pcnt = path.points.length; + } + } + + return smp; + } + }, { + key: "fitseq", + value: function fitseq(path, ltres, qtres, seqstart, seqend) { + var _context2; + + if (seqend > path.points.length || seqend < 0) { + return []; + } + + var errorpoint = seqstart, + errorval = 0, + curvepass = true, + px, + py, + dist2; + var tl = seqend - seqstart; + + if (tl < 0) { + tl += path.points.length; + } + + var vx = (path.points[seqend].x - path.points[seqstart].x) / tl, + vy = (path.points[seqend].y - path.points[seqstart].y) / tl; + var pcnt = (seqstart + 1) % path.points.length, + pl; + + while (pcnt != seqend) { + pl = pcnt - seqstart; + + if (pl < 0) { + pl += path.points.length; + } + + px = path.points[seqstart].x + vx * pl; + py = path.points[seqstart].y + vy * pl; + dist2 = (path.points[pcnt].x - px) * (path.points[pcnt].x - px) + (path.points[pcnt].y - py) * (path.points[pcnt].y - py); + + if (dist2 > ltres) { + curvepass = false; + } + + if (dist2 > errorval) { + errorpoint = pcnt; + errorval = dist2; + } + + pcnt = (pcnt + 1) % path.points.length; + } + + if (curvepass) { + return [{ + type: 'L', + x1: path.points[seqstart].x, + y1: path.points[seqstart].y, + x2: path.points[seqend].x, + y2: path.points[seqend].y + }]; + } + + var fitpoint = errorpoint; + curvepass = true; + errorval = 0; + var t = (fitpoint - seqstart) / tl, + t1 = (1 - t) * (1 - t), + t2 = 2 * (1 - t) * t, + t3 = t * t; + var cpx = (t1 * path.points[seqstart].x + t3 * path.points[seqend].x - path.points[fitpoint].x) / -t2, + cpy = (t1 * path.points[seqstart].y + t3 * path.points[seqend].y - path.points[fitpoint].y) / -t2; + pcnt = seqstart + 1; + + while (pcnt != seqend) { + t = (pcnt - seqstart) / tl; + t1 = (1 - t) * (1 - t); + t2 = 2 * (1 - t) * t; + t3 = t * t; + px = t1 * path.points[seqstart].x + t2 * cpx + t3 * path.points[seqend].x; + py = t1 * path.points[seqstart].y + t2 * cpy + t3 * path.points[seqend].y; + dist2 = (path.points[pcnt].x - px) * (path.points[pcnt].x - px) + (path.points[pcnt].y - py) * (path.points[pcnt].y - py); + + if (dist2 > qtres) { + curvepass = false; + } + + if (dist2 > errorval) { + errorpoint = pcnt; + errorval = dist2; + } + + pcnt = (pcnt + 1) % path.points.length; + } + + if (curvepass) { + return [{ + type: 'Q', + x1: path.points[seqstart].x, + y1: path.points[seqstart].y, + x2: cpx, + y2: cpy, + x3: path.points[seqend].x, + y3: path.points[seqend].y + }]; + } + + var splitpoint = fitpoint; + return concat_default()(_context2 = this.fitseq(path, ltres, qtres, seqstart, splitpoint)).call(_context2, this.fitseq(path, ltres, qtres, splitpoint, seqend)); + } + }, { + key: "batchtracepaths", + value: function batchtracepaths(internodepaths, ltres, qtres) { + var btracedpaths = []; + + for (var k in internodepaths) { + if (!internodepaths.hasOwnProperty(k)) { + continue; + } + + btracedpaths.push(this.tracepath(internodepaths[k], ltres, qtres)); + } + + return btracedpaths; + } + }, { + key: "batchtracelayers", + value: function batchtracelayers(binternodes, ltres, qtres) { + var btbis = []; + + for (var k in binternodes) { + if (!binternodes.hasOwnProperty(k)) { + continue; + } + + btbis[k] = this.batchtracepaths(binternodes[k], ltres, qtres); + } + + return btbis; + } + }, { + key: "roundtodec", + value: function roundtodec(val, places) { + return Number(val.toFixed(places)); + } + }, { + key: "svgpathstring", + value: function svgpathstring(tracedata, lnum, pathnum, options) { + var _context3, _context4; + + var layer = tracedata.layers[lnum], + smp = layer[pathnum], + str = '', + pcnt; + + if (options.linefilter && smp.segments.length < 3) { + return str; + } + + str = concat_default()(_context3 = "= 0; pcnt--) { + var _context16; + + str += "".concat(hsmp.segments[pcnt].type, " "); + + if (hsmp.segments[pcnt].hasOwnProperty('x3')) { + var _context15; + + str += concat_default()(_context15 = "".concat(hsmp.segments[pcnt].x2 * options.scale, " ")).call(_context15, hsmp.segments[pcnt].y2 * options.scale, " "); + } + + str += concat_default()(_context16 = "".concat(hsmp.segments[pcnt].x1 * options.scale, " ")).call(_context16, hsmp.segments[pcnt].y1 * options.scale, " "); + } + } else { + if (hsmp.segments[hsmp.segments.length - 1].hasOwnProperty('x3')) { + var _context17; + + str += concat_default()(_context17 = "M ".concat(this.roundtodec(hsmp.segments[hsmp.segments.length - 1].x3 * options.scale), " ")).call(_context17, this.roundtodec(hsmp.segments[hsmp.segments.length - 1].y3 * options.scale), " "); + } else { + var _context18; + + str += concat_default()(_context18 = "M ".concat(this.roundtodec(hsmp.segments[hsmp.segments.length - 1].x2 * options.scale), " ")).call(_context18, this.roundtodec(hsmp.segments[hsmp.segments.length - 1].y2 * options.scale), " "); + } + + for (pcnt = hsmp.segments.length - 1; pcnt >= 0; pcnt--) { + var _context20; + + str += "".concat(hsmp.segments[pcnt].type, " "); + + if (hsmp.segments[pcnt].hasOwnProperty('x3')) { + var _context19; + + str += concat_default()(_context19 = "".concat(this.roundtodec(hsmp.segments[pcnt].x2 * options.scale), " ")).call(_context19, this.roundtodec(hsmp.segments[pcnt].y2 * options.scale), " "); + } + + str += concat_default()(_context20 = "".concat(this.roundtodec(hsmp.segments[pcnt].x1 * options.scale), " ")).call(_context20, this.roundtodec(hsmp.segments[pcnt].y1 * options.scale), " "); + } + } + + str += 'Z '; + } + + str += '" />'; + + if (options.lcpr || options.qcpr) { + for (pcnt = 0; pcnt < smp.segments.length; pcnt++) { + if (smp.segments[pcnt].hasOwnProperty('x3') && options.qcpr) { + var _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34; + + str += concat_default()(_context21 = concat_default()(_context22 = concat_default()(_context23 = ""); + str += concat_default()(_context24 = concat_default()(_context25 = concat_default()(_context26 = ""); + str += concat_default()(_context27 = concat_default()(_context28 = concat_default()(_context29 = concat_default()(_context30 = ""); + str += concat_default()(_context31 = concat_default()(_context32 = concat_default()(_context33 = concat_default()(_context34 = ""); + } + + if (!smp.segments[pcnt].hasOwnProperty('x3') && options.lcpr) { + var _context35, _context36, _context37; + + str += concat_default()(_context35 = concat_default()(_context36 = concat_default()(_context37 = ""); + } + } + + for (var hcnt = 0; hcnt < smp.holechildren.length; hcnt++) { + var hsmp = layer[smp.holechildren[hcnt]]; + + for (pcnt = 0; pcnt < hsmp.segments.length; pcnt++) { + if (hsmp.segments[pcnt].hasOwnProperty('x3') && options.qcpr) { + var _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51; + + str += concat_default()(_context38 = concat_default()(_context39 = concat_default()(_context40 = ""); + str += concat_default()(_context41 = concat_default()(_context42 = concat_default()(_context43 = ""); + str += concat_default()(_context44 = concat_default()(_context45 = concat_default()(_context46 = concat_default()(_context47 = ""); + str += concat_default()(_context48 = concat_default()(_context49 = concat_default()(_context50 = concat_default()(_context51 = ""); + } + + if (!hsmp.segments[pcnt].hasOwnProperty('x3') && options.lcpr) { + var _context52, _context53, _context54; + + str += concat_default()(_context52 = concat_default()(_context53 = concat_default()(_context54 = ""); + } + } + } + } + + return str; + } + }, { + key: "getsvgstring", + value: function getsvgstring(tracedata, options) { + var _context55, _context56, _context57; + + options = this.checkoptions(options); + var w = tracedata.width * options.scale; + var h = tracedata.height * options.scale; + + var svgstr = concat_default()(_context55 = ""); + + for (var lcnt = 0; lcnt < tracedata.layers.length; lcnt += 1) { + for (var pcnt = 0; pcnt < tracedata.layers[lcnt].length; pcnt += 1) { + if (!tracedata.layers[lcnt][pcnt].isholepath) { + svgstr += this.svgpathstring(tracedata, lcnt, pcnt, options); + } + } + } + + svgstr += ''; + return svgstr; + } + }, { + key: "compareNumbers", + value: function compareNumbers(a, b) { + return a - b; + } + }, { + key: "torgbastr", + value: function torgbastr(c) { + var _context58, _context59, _context60; + + return concat_default()(_context58 = concat_default()(_context59 = concat_default()(_context60 = "rgba(".concat(c.r, ",")).call(_context60, c.g, ",")).call(_context59, c.b, ",")).call(_context58, c.a, ")"); + } + }, { + key: "tosvgcolorstr", + value: function tosvgcolorstr(c, options) { + var _context61, _context62, _context63, _context64, _context65, _context66, _context67; + + return concat_default()(_context61 = concat_default()(_context62 = concat_default()(_context63 = concat_default()(_context64 = concat_default()(_context65 = concat_default()(_context66 = concat_default()(_context67 = "fill=\"rgb(".concat(c.r, ",")).call(_context67, c.g, ",")).call(_context66, c.b, ")\" stroke=\"rgb(")).call(_context65, c.r, ",")).call(_context64, c.g, ",")).call(_context63, c.b, ")\" stroke-width=\"")).call(_context62, options.strokewidth, "\" opacity=\"")).call(_context61, c.a / 255.0, "\" "); + } + }, { + key: "appendSVGString", + value: function appendSVGString(svgstr, parentid) { + var div; + + if (parentid) { + div = document.getElementById(parentid); + + if (!div) { + div = document.createElement('div'); + div.id = parentid; + document.body.appendChild(div); + } + } else { + div = document.createElement('div'); + document.body.appendChild(div); + } + + div.innerHTML += svgstr; + } + }, { + key: "blur", + value: function blur(imgd, radius, delta) { + var i, j, k, d, idx, racc, gacc, bacc, aacc, wacc; + var imgd2 = { + width: imgd.width, + height: imgd.height, + data: [] + }; + radius = Math.floor(radius); + + if (radius < 1) { + return imgd; + } + + if (radius > 5) { + radius = 5; + } + + delta = Math.abs(delta); + + if (delta > 1024) { + delta = 1024; + } + + var thisgk = this.gks[radius - 1]; + + for (j = 0; j < imgd.height; j++) { + for (i = 0; i < imgd.width; i++) { + racc = 0; + gacc = 0; + bacc = 0; + aacc = 0; + wacc = 0; + + for (k = -radius; k < radius + 1; k++) { + if (i + k > 0 && i + k < imgd.width) { + idx = (j * imgd.width + i + k) * 4; + racc += imgd.data[idx] * thisgk[k + radius]; + gacc += imgd.data[idx + 1] * thisgk[k + radius]; + bacc += imgd.data[idx + 2] * thisgk[k + radius]; + aacc += imgd.data[idx + 3] * thisgk[k + radius]; + wacc += thisgk[k + radius]; + } + } + + idx = (j * imgd.width + i) * 4; + imgd2.data[idx] = Math.floor(racc / wacc); + imgd2.data[idx + 1] = Math.floor(gacc / wacc); + imgd2.data[idx + 2] = Math.floor(bacc / wacc); + imgd2.data[idx + 3] = Math.floor(aacc / wacc); + } + } + + var himgd = new Uint8ClampedArray(imgd2.data); + + for (j = 0; j < imgd.height; j++) { + for (i = 0; i < imgd.width; i++) { + racc = 0; + gacc = 0; + bacc = 0; + aacc = 0; + wacc = 0; + + for (k = -radius; k < radius + 1; k++) { + if (j + k > 0 && j + k < imgd.height) { + idx = ((j + k) * imgd.width + i) * 4; + racc += himgd[idx] * thisgk[k + radius]; + gacc += himgd[idx + 1] * thisgk[k + radius]; + bacc += himgd[idx + 2] * thisgk[k + radius]; + aacc += himgd[idx + 3] * thisgk[k + radius]; + wacc += thisgk[k + radius]; + } + } + + idx = (j * imgd.width + i) * 4; + imgd2.data[idx] = Math.floor(racc / wacc); + imgd2.data[idx + 1] = Math.floor(gacc / wacc); + imgd2.data[idx + 2] = Math.floor(bacc / wacc); + imgd2.data[idx + 3] = Math.floor(aacc / wacc); + } + } + + for (j = 0; j < imgd.height; j++) { + for (i = 0; i < imgd.width; i++) { + idx = (j * imgd.width + i) * 4; + d = Math.abs(imgd2.data[idx] - imgd.data[idx]) + Math.abs(imgd2.data[idx + 1] - imgd.data[idx + 1]) + Math.abs(imgd2.data[idx + 2] - imgd.data[idx + 2]) + Math.abs(imgd2.data[idx + 3] - imgd.data[idx + 3]); + + if (d > delta) { + imgd2.data[idx] = imgd.data[idx]; + imgd2.data[idx + 1] = imgd.data[idx + 1]; + imgd2.data[idx + 2] = imgd.data[idx + 2]; + imgd2.data[idx + 3] = imgd.data[idx + 3]; + } + } + } + + return imgd2; + } + }, { + key: "loadImage", + value: function loadImage(url, callback, options) { + var img = new Image(); + + if (options && options.corsenabled) { + img.crossOrigin = 'Anonymous'; + } + + img.src = url; + + img.onload = function () { + var canvas = document.createElement('canvas'); + canvas.width = img.width; + canvas.height = img.height; + var context = canvas.getContext('2d'); + context.drawImage(img, 0, 0); + callback(canvas); + }; + } + }, { + key: "getImgdata", + value: function getImgdata(canvas) { + var context = canvas.getContext('2d'); + return context.getImageData(0, 0, canvas.width, canvas.height); + } + }, { + key: "drawLayers", + value: function drawLayers(layers, palette, scale, parentid) { + scale = scale || 1; + var w, h, i, j, k; + var div; + + if (parentid) { + div = document.getElementById(parentid); + + if (!div) { + div = document.createElement('div'); + div.id = parentid; + document.body.appendChild(div); + } + } else { + div = document.createElement('div'); + document.body.appendChild(div); + } + + for (k in layers) { + if (!layers.hasOwnProperty(k)) { + continue; + } + + w = layers[k][0].length; + h = layers[k].length; + var canvas = document.createElement('canvas'); + canvas.width = w * scale; + canvas.height = h * scale; + var context = canvas.getContext('2d'); + + for (j = 0; j < h; j += 1) { + for (i = 0; i < w; i += 1) { + context.fillStyle = this.torgbastr(palette[layers[k][j][i] % palette.length]); + context.fillRect(i * scale, j * scale, scale, scale); + } + } + + div.appendChild(canvas); + } + } + }], [{ + key: "tracerDefaultOption", + value: function tracerDefaultOption() { + return { + pathomit: 100, + ltres: 0.1, + qtres: 1, + scale: 1, + strokewidth: 5, + viewbox: false, + linefilter: true, + desc: false, + rightangleenhance: false, + pal: [{ + r: 0, + g: 0, + b: 0, + a: 255 + }, { + r: 255, + g: 255, + b: 255, + a: 255 + }] + }; + } + }]); + + return ImageTracer; +}(); + + +;// CONCATENATED MODULE: ./src/js/action.js + + + + + + + + + + + +/* harmony default export */ var action = ({ + /** + * Get ui actions + * @returns {Object} actions for ui + * @private + */ + getActions: function getActions() { + return { + main: this._mainAction(), + shape: this._shapeAction(), + crop: this._cropAction(), + resize: this._resizeAction(), + flip: this._flipAction(), + rotate: this._rotateAction(), + text: this._textAction(), + mask: this._maskAction(), + draw: this._drawAction(), + icon: this._iconAction(), + filter: this._filterAction(), + history: this._historyAction() + }; + }, + + /** + * Main Action + * @returns {Object} actions for ui main + * @private + */ + _mainAction: function _mainAction() { + var _this = this; + + var exitCropOnAction = function exitCropOnAction() { + if (_this.ui.submenu === 'crop') { + _this.stopDrawingMode(); + + _this.ui.changeMenu('crop'); + } + }; + + var setAngleRangeBarOnAction = function setAngleRangeBarOnAction(angle) { + if (_this.ui.submenu === 'rotate') { + _this.ui.rotate.setRangeBarAngle('setAngle', angle); + } + }; + + var setFilterStateRangeBarOnAction = function setFilterStateRangeBarOnAction(filterOptions) { + if (_this.ui.submenu === 'filter') { + filter_default()(_this.ui).setFilterState(filterOptions); + } + }; + + var onEndUndoRedo = function onEndUndoRedo(result) { + setAngleRangeBarOnAction(result); + setFilterStateRangeBarOnAction(result); + return result; + }; + + var toggleZoomMode = function toggleZoomMode() { + var zoomMode = _this._graphics.getZoomMode(); + + _this.stopDrawingMode(); + + if (zoomMode !== zoomModes.ZOOM) { + _this.startDrawingMode(drawingModes.ZOOM); + + _this._graphics.startZoomInMode(); + } else { + _this._graphics.endZoomInMode(); + } + }; + + var toggleHandMode = function toggleHandMode() { + var zoomMode = _this._graphics.getZoomMode(); + + _this.stopDrawingMode(); + + if (zoomMode !== zoomModes.HAND) { + _this.startDrawingMode(drawingModes.ZOOM); + + _this._graphics.startHandMode(); + } else { + _this._graphics.endHandMode(); + } + }; + + var initFilterState = function initFilterState() { + if (filter_default()(_this.ui)) { + filter_default()(_this.ui).initFilterCheckBoxState(); + } + }; + + return (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend)({ + initLoadImage: function initLoadImage(imagePath, imageName) { + return _this.loadImageFromURL(imagePath, imageName).then(function (sizeValue) { + exitCropOnAction(); + _this.ui.initializeImgUrl = imagePath; + + _this.ui.resizeEditor({ + imageSize: sizeValue + }); + + _this.clearUndoStack(); + + _this._invoker.fire(eventNames.EXECUTE_COMMAND, historyNames.LOAD_IMAGE); + }); + }, + undo: function undo() { + if (!_this.isEmptyUndoStack()) { + exitCropOnAction(); + + _this.deactivateAll(); + + _this.undo().then(onEndUndoRedo); + } + }, + redo: function redo() { + if (!_this.isEmptyRedoStack()) { + exitCropOnAction(); + + _this.deactivateAll(); + + _this.redo().then(onEndUndoRedo); + } + }, + reset: function reset() { + exitCropOnAction(); + + _this.loadImageFromURL(_this.ui.initializeImgUrl, 'resetImage').then(function (sizeValue) { + exitCropOnAction(); + initFilterState(); + + _this.ui.resizeEditor({ + imageSize: sizeValue + }); + + _this.clearUndoStack(); + + _this._initHistory(); + }); + }, + delete: function _delete() { + _this.ui.changeHelpButtonEnabled('delete', false); + + exitCropOnAction(); + + _this.removeActiveObject(); + + _this.activeObjectId = null; + }, + deleteAll: function deleteAll() { + exitCropOnAction(); + + _this.clearObjects(); + + _this.ui.changeHelpButtonEnabled('delete', false); + + _this.ui.changeHelpButtonEnabled('deleteAll', false); + }, + load: function load(file) { + if (!isSupportFileApi()) { + alert('This browser does not support file-api'); + } + + _this.ui.initializeImgUrl = url_default().createObjectURL(file); + + _this.loadImageFromFile(file).then(function (sizeValue) { + exitCropOnAction(); + initFilterState(); + + _this.clearUndoStack(); + + _this.ui.activeMenuEvent(); + + _this.ui.resizeEditor({ + imageSize: sizeValue + }); + + _this._clearHistory(); + + _this._invoker.fire(eventNames.EXECUTE_COMMAND, historyNames.LOAD_IMAGE); + })['catch'](function (message) { + return promise_default().reject(message); + }); + }, + download: function download() { + var dataURL = _this.toDataURL(); + + var imageName = _this.getImageName(); + + var blob, type, w; + + if (isSupportFileApi() && window.saveAs) { + blob = base64ToBlob(dataURL); + type = blob.type.split('/')[1]; + + if (imageName.split('.').pop() !== type) { + imageName += ".".concat(type); + } + + saveAs(blob, imageName); // eslint-disable-line + } else { + w = window.open(); + w.document.body.innerHTML = ""); + } + }, + history: function history(event) { + _this.ui.toggleHistoryMenu(event); + }, + zoomIn: function zoomIn() { + _this.ui.toggleZoomButtonStatus('zoomIn'); + + _this.deactivateAll(); + + toggleZoomMode(); + }, + zoomOut: function zoomOut() { + _this._graphics.zoomOut(); + }, + hand: function hand() { + _this.ui.offZoomInButtonStatus(); + + _this.ui.toggleZoomButtonStatus('hand'); + + _this.deactivateAll(); + + toggleHandMode(); + } + }, this._commonAction()); + }, + + /** + * Icon Action + * @returns {Object} actions for ui icon + * @private + */ + _iconAction: function _iconAction() { + var _this2 = this; + + return (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend)({ + changeColor: function changeColor(color) { + if (_this2.activeObjectId) { + _this2.changeIconColor(_this2.activeObjectId, color); + } + }, + addIcon: function addIcon(iconType, iconColor) { + _this2.startDrawingMode('ICON'); + + _this2.setDrawingIcon(iconType, iconColor); + }, + cancelAddIcon: function cancelAddIcon() { + _this2.ui.icon.clearIconType(); + + _this2.changeSelectableAll(true); + + _this2.changeCursor('default'); + + _this2.stopDrawingMode(); + }, + registerDefaultIcons: function registerDefaultIcons(type, path) { + var iconObj = {}; + iconObj[type] = path; + + _this2.registerIcons(iconObj); + }, + registerCustomIcon: function registerCustomIcon(imgUrl, file) { + var imagetracer = new ImageTracer(); + imagetracer.imageToSVG(imgUrl, function (svgstr) { + var _svgstr$match = svgstr.match(/path[^>]*d="([^"]*)"/), + _svgstr$match2 = _slicedToArray(_svgstr$match, 2), + svgPath = _svgstr$match2[1]; + + var iconObj = {}; + iconObj[file.name] = svgPath; + + _this2.registerIcons(iconObj); + + _this2.addIcon(file.name, { + left: 100, + top: 100 + }); + }, ImageTracer.tracerDefaultOption()); + } + }, this._commonAction()); + }, + + /** + * Draw Action + * @returns {Object} actions for ui draw + * @private + */ + _drawAction: function _drawAction() { + var _this3 = this; + + return (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend)({ + setDrawMode: function setDrawMode(type, settings) { + _this3.stopDrawingMode(); + + if (type === 'free') { + _this3.startDrawingMode('FREE_DRAWING', settings); + } else { + _this3.startDrawingMode('LINE_DRAWING', settings); + } + }, + setColor: function setColor(color) { + _this3.setBrush({ + color: color + }); + } + }, this._commonAction()); + }, + + /** + * Mask Action + * @returns {Object} actions for ui mask + * @private + */ + _maskAction: function _maskAction() { + var _this4 = this; + + return (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend)({ + loadImageFromURL: function loadImageFromURL(imgUrl, file) { + return _this4.loadImageFromURL(_this4.toDataURL(), 'FilterImage').then(function () { + _this4.addImageObject(imgUrl).then(function () { + url_default().revokeObjectURL(file); + }); + + _this4._invoker.fire(eventNames.EXECUTE_COMMAND, historyNames.LOAD_MASK_IMAGE); + }); + }, + applyFilter: function applyFilter() { + _this4.applyFilter('mask', { + maskObjId: _this4.activeObjectId + }); + } + }, this._commonAction()); + }, + + /** + * Text Action + * @returns {Object} actions for ui text + * @private + */ + _textAction: function _textAction() { + var _this5 = this; + + return (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend)({ + changeTextStyle: function changeTextStyle(styleObj, isSilent) { + if (_this5.activeObjectId) { + _this5.changeTextStyle(_this5.activeObjectId, styleObj, isSilent); + } + } + }, this._commonAction()); + }, + + /** + * Rotate Action + * @returns {Object} actions for ui rotate + * @private + */ + _rotateAction: function _rotateAction() { + var _this6 = this; + + return (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend)({ + rotate: function rotate(angle, isSilent) { + _this6.rotate(angle, isSilent); + + _this6.ui.resizeEditor(); + + _this6.ui.rotate.setRangeBarAngle('rotate', angle); + }, + setAngle: function setAngle(angle, isSilent) { + _this6.setAngle(angle, isSilent); + + _this6.ui.resizeEditor(); + + _this6.ui.rotate.setRangeBarAngle('setAngle', angle); + } + }, this._commonAction()); + }, + + /** + * Shape Action + * @returns {Object} actions for ui shape + * @private + */ + _shapeAction: function _shapeAction() { + var _this7 = this; + + return (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend)({ + changeShape: function changeShape(changeShapeObject, isSilent) { + if (_this7.activeObjectId) { + _this7.changeShape(_this7.activeObjectId, changeShapeObject, isSilent); + } + }, + setDrawingShape: function setDrawingShape(shapeType) { + _this7.setDrawingShape(shapeType); + } + }, this._commonAction()); + }, + + /** + * Crop Action + * @returns {Object} actions for ui crop + * @private + */ + _cropAction: function _cropAction() { + var _this8 = this; + + return (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend)({ + crop: function crop() { + var cropRect = _this8.getCropzoneRect(); + + if (cropRect && !isEmptyCropzone(cropRect)) { + _this8.crop(cropRect).then(function () { + _this8.stopDrawingMode(); + + _this8.ui.resizeEditor(); + + _this8.ui.changeMenu('crop'); + + _this8._invoker.fire(eventNames.EXECUTE_COMMAND, historyNames.CROP); + })['catch'](function (message) { + return promise_default().reject(message); + }); + } + }, + cancel: function cancel() { + _this8.stopDrawingMode(); + + _this8.ui.changeMenu('crop'); + }, + + /* eslint-disable */ + preset: function preset(presetType) { + switch (presetType) { + case 'preset-square': + _this8.setCropzoneRect(1 / 1); + + break; + + case 'preset-3-2': + _this8.setCropzoneRect(3 / 2); + + break; + + case 'preset-4-3': + _this8.setCropzoneRect(4 / 3); + + break; + + case 'preset-5-4': + _this8.setCropzoneRect(5 / 4); + + break; + + case 'preset-7-5': + _this8.setCropzoneRect(7 / 5); + + break; + + case 'preset-16-9': + _this8.setCropzoneRect(16 / 9); + + break; + + default: + _this8.setCropzoneRect(); + + _this8.ui.crop.changeApplyButtonStatus(false); + + break; + } + } + }, this._commonAction()); + }, + + /** + * Resize Action + * @returns {Object} actions for ui resize + * @private + */ + _resizeAction: function _resizeAction() { + var _this9 = this; + + return (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend)({ + getCurrentDimensions: function getCurrentDimensions() { + return _this9._graphics.getCurrentDimensions(); + }, + preview: function preview(actor, value, lockState) { + var currentDimensions = _this9._graphics.getCurrentDimensions(); + + var calcAspectRatio = function calcAspectRatio() { + return currentDimensions.width / currentDimensions.height; + }; + + var dimensions = {}; + + switch (actor) { + case 'width': + dimensions.width = value; + + if (lockState) { + dimensions.height = value / calcAspectRatio(); + } else { + dimensions.height = currentDimensions.height; + } + + break; + + case 'height': + dimensions.height = value; + + if (lockState) { + dimensions.width = value * calcAspectRatio(); + } else { + dimensions.width = currentDimensions.width; + } + + break; + + default: + dimensions = currentDimensions; + } + + _this9._graphics.resize(dimensions).then(function () { + _this9.ui.resizeEditor(); + }); + + if (lockState) { + _this9.ui.resize.setWidthValue(dimensions.width); + + _this9.ui.resize.setHeightValue(dimensions.height); + } + }, + lockAspectRatio: function lockAspectRatio(lockState, min, max) { + var _this9$_graphics$getC = _this9._graphics.getCurrentDimensions(), + width = _this9$_graphics$getC.width, + height = _this9$_graphics$getC.height; + + var aspectRatio = width / height; + + if (lockState) { + if (width > height) { + var pMax = max / aspectRatio; + var pMin = min * aspectRatio; + + _this9.ui.resize.setLimit({ + minWidth: pMin > min ? pMin : min, + minHeight: min, + maxWidth: max, + maxHeight: pMax < max ? pMax : max + }); + } else { + var _pMax = max * aspectRatio; + + var _pMin = min / aspectRatio; + + _this9.ui.resize.setLimit({ + minWidth: min, + minHeight: _pMin > min ? _pMin : min, + maxWidth: _pMax < max ? _pMax : max, + maxHeight: max + }); + } + } else { + _this9.ui.resize.setLimit({ + minWidth: min, + minHeight: min, + maxWidth: max, + maxHeight: max + }); + } + }, + resize: function resize() { + var dimensions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; + + if (!dimensions) { + dimensions = _this9._graphics.getCurrentDimensions(); + } + + _this9.resize(dimensions).then(function () { + _this9._graphics.setOriginalDimensions(dimensions); + + _this9.stopDrawingMode(); + + _this9.ui.resizeEditor(); + + _this9.ui.changeMenu('resize'); + })['catch'](function (message) { + return promise_default().reject(message); + }); + }, + reset: function reset() { + var standByMode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; + + var dimensions = _this9._graphics.getOriginalDimensions(); + + _this9.ui.resize.setWidthValue(dimensions.width, true); + + _this9.ui.resize.setHeightValue(dimensions.height, true); + + _this9._graphics.resize(dimensions).then(function () { + if (!standByMode) { + _this9.stopDrawingMode(); + + _this9.ui.resizeEditor(); + + _this9.ui.changeMenu('resize'); + } + }); + } + }, this._commonAction()); + }, + + /** + * Flip Action + * @returns {Object} actions for ui flip + * @private + */ + _flipAction: function _flipAction() { + var _this10 = this; + + return (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend)({ + flip: function flip(flipType) { + return _this10[flipType](); + } + }, this._commonAction()); + }, + + /** + * Filter Action + * @returns {Object} actions for ui filter + * @private + */ + _filterAction: function _filterAction() { + var _this11 = this; + + return (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend)({ + applyFilter: function applyFilter(applying, type, options, isSilent) { + if (applying) { + _this11.applyFilter(type, options, isSilent); + } else if (_this11.hasFilter(type)) { + _this11.removeFilter(type); + } + } + }, this._commonAction()); + }, + + /** + * Image Editor Event Observer + */ + setReAction: function setReAction() { + var _this12 = this; + + this.on({ + undoStackChanged: function undoStackChanged(length) { + if (length) { + _this12.ui.changeHelpButtonEnabled('undo', true); + + _this12.ui.changeHelpButtonEnabled('reset', true); + } else { + _this12.ui.changeHelpButtonEnabled('undo', false); + + _this12.ui.changeHelpButtonEnabled('reset', false); + } + + _this12.ui.resizeEditor(); + }, + redoStackChanged: function redoStackChanged(length) { + if (length) { + _this12.ui.changeHelpButtonEnabled('redo', true); + } else { + _this12.ui.changeHelpButtonEnabled('redo', false); + } + + _this12.ui.resizeEditor(); + }, + + /* eslint-disable complexity */ + objectActivated: function objectActivated(obj) { + var _context, _context2; + + _this12.activeObjectId = obj.id; + + _this12.ui.changeHelpButtonEnabled('delete', true); + + _this12.ui.changeHelpButtonEnabled('deleteAll', true); + + if (obj.type === 'cropzone') { + _this12.ui.crop.changeApplyButtonStatus(true); + } else if (index_of_default()(_context = ['rect', 'circle', 'triangle']).call(_context, obj.type) > -1) { + _this12.stopDrawingMode(); + + if (_this12.ui.submenu !== 'shape') { + _this12.ui.changeMenu('shape', false, false); + } + + _this12.ui.shape.setShapeStatus({ + strokeColor: obj.stroke, + strokeWidth: obj.strokeWidth, + fillColor: fill_default()(obj) + }); + + _this12.ui.shape.setMaxStrokeValue(Math.min(obj.width, obj.height)); + } else if (obj.type === 'path' || obj.type === 'line') { + if (_this12.ui.submenu !== 'draw') { + _this12.ui.changeMenu('draw', false, false); + + _this12.ui.draw.changeStandbyMode(); + } + } else if (index_of_default()(_context2 = ['i-text', 'text']).call(_context2, obj.type) > -1) { + if (_this12.ui.submenu !== 'text') { + _this12.ui.changeMenu('text', false, false); + } + + _this12.ui.text.setTextStyleStateOnAction(obj); + } else if (obj.type === 'icon') { + _this12.stopDrawingMode(); + + if (_this12.ui.submenu !== 'icon') { + _this12.ui.changeMenu('icon', false, false); + } + + _this12.ui.icon.setIconPickerColor(fill_default()(obj)); + } + }, + + /* eslint-enable complexity */ + addText: function addText(pos) { + var _this12$ui$text = _this12.ui.text, + fill = _this12$ui$text.textColor, + fontSize = _this12$ui$text.fontSize, + fontStyle = _this12$ui$text.fontStyle, + fontWeight = _this12$ui$text.fontWeight, + underline = _this12$ui$text.underline; + var fontFamily = 'Noto Sans'; + + _this12.addText('Double Click', { + position: pos.originPosition, + styles: { + fill: fill, + fontSize: fontSize, + fontFamily: fontFamily, + fontStyle: fontStyle, + fontWeight: fontWeight, + underline: underline + } + }).then(function () { + _this12.changeCursor('default'); + }); + }, + addObjectAfter: function addObjectAfter(obj) { + var _context3; + + if (obj.type === 'icon') { + _this12.ui.icon.changeStandbyMode(); + } else if (index_of_default()(_context3 = ['rect', 'circle', 'triangle']).call(_context3, obj.type) > -1) { + _this12.ui.shape.setMaxStrokeValue(Math.min(obj.width, obj.height)); + + _this12.ui.shape.changeStandbyMode(); + } + }, + objectScaled: function objectScaled(obj) { + var _context4, _context5; + + if (index_of_default()(_context4 = ['i-text', 'text']).call(_context4, obj.type) > -1) { + _this12.ui.text.fontSize = toInteger(obj.fontSize); + } else if (index_of_default()(_context5 = ['rect', 'circle', 'triangle']).call(_context5, obj.type) >= 0) { + var width = obj.width, + height = obj.height; + + var strokeValue = _this12.ui.shape.getStrokeValue(); + + if (width < strokeValue) { + _this12.ui.shape.setStrokeValue(width); + } + + if (height < strokeValue) { + _this12.ui.shape.setStrokeValue(height); + } + } + }, + selectionCleared: function selectionCleared() { + _this12.activeObjectId = null; + + if (_this12.ui.submenu === 'text') { + _this12.changeCursor('text'); + } else if (!includes(['draw', 'crop', 'resize'], _this12.ui.submenu)) { + _this12.stopDrawingMode(); + } + } + }); + }, + + /** + * History Action + * @returns {Object} history actions for ui + * @private + */ + _historyAction: function _historyAction() { + var _this13 = this; + + return { + undo: function undo(count) { + return _this13.undo(count); + }, + redo: function redo(count) { + return _this13.redo(count); + } + }; + }, + + /** + * Common Action + * @returns {Object} common actions for ui + * @private + */ + _commonAction: function _commonAction() { + var _this14 = this, + _context6, + _context7, + _context8, + _context9; + + var TEXT = drawingModes.TEXT, + CROPPER = drawingModes.CROPPER, + SHAPE = drawingModes.SHAPE, + ZOOM = drawingModes.ZOOM, + RESIZE = drawingModes.RESIZE; + return { + modeChange: function modeChange(menu) { + switch (menu) { + case drawingMenuNames.TEXT: + _this14._changeActivateMode(TEXT); + + break; + + case drawingMenuNames.CROP: + _this14.startDrawingMode(CROPPER); + + break; + + case drawingMenuNames.SHAPE: + _this14._changeActivateMode(SHAPE); + + _this14.setDrawingShape(_this14.ui.shape.type, _this14.ui.shape.options); + + break; + + case drawingMenuNames.ZOOM: + _this14.startDrawingMode(ZOOM); + + break; + + case drawingMenuNames.RESIZE: + _this14.startDrawingMode(RESIZE); + + break; + + default: + break; + } + }, + deactivateAll: bind_default()(_context6 = this.deactivateAll).call(_context6, this), + changeSelectableAll: bind_default()(_context7 = this.changeSelectableAll).call(_context7, this), + discardSelection: bind_default()(_context8 = this.discardSelection).call(_context8, this), + stopDrawingMode: bind_default()(_context9 = this.stopDrawingMode).call(_context9, this) + }; + }, + + /** + * Mixin + * @param {ImageEditor} ImageEditor instance + */ + mixin: function mixin(ImageEditor) { + (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend)(ImageEditor.prototype, this); + } +}); +// EXTERNAL MODULE: ../../node_modules/@babel/runtime-corejs3/core-js-stable/instance/map.js +var instance_map = __webpack_require__(899); +var map_default = /*#__PURE__*/__webpack_require__.n(instance_map); +;// CONCATENATED MODULE: ./src/js/interface/component.js + + + +/** + * @author NHN. FE Development Team + * @fileoverview Component interface + */ + +/** + * Component interface + * @class + * @param {string} name - component name + * @param {Graphics} graphics - Graphics instance + * @ignore + */ +var Component = /*#__PURE__*/function () { + function Component(name, graphics) { + _classCallCheck(this, Component); + + /** + * Component name + * @type {string} + */ + this.name = name; + /** + * Graphics instance + * @type {Graphics} + */ + + this.graphics = graphics; + } + /** + * Fire Graphics event + * @returns {Object} return value + */ + + + _createClass(Component, [{ + key: "fire", + value: function fire() { + var context = this.graphics; + + for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + return this.graphics.fire.apply(context, args); + } + /** + * Save image(background) of canvas + * @param {string} name - Name of image + * @param {fabric.Image} oImage - Fabric image instance + */ + + }, { + key: "setCanvasImage", + value: function setCanvasImage(name, oImage) { + this.graphics.setCanvasImage(name, oImage); + } + /** + * Returns canvas element of fabric.Canvas[[lower-canvas]] + * @returns {HTMLCanvasElement} + */ + + }, { + key: "getCanvasElement", + value: function getCanvasElement() { + return this.graphics.getCanvasElement(); + } + /** + * Get fabric.Canvas instance + * @returns {fabric.Canvas} + */ + + }, { + key: "getCanvas", + value: function getCanvas() { + return this.graphics.getCanvas(); + } + /** + * Get canvasImage (fabric.Image instance) + * @returns {fabric.Image} + */ + + }, { + key: "getCanvasImage", + value: function getCanvasImage() { + return this.graphics.getCanvasImage(); + } + /** + * Get image name + * @returns {string} + */ + + }, { + key: "getImageName", + value: function getImageName() { + return this.graphics.getImageName(); + } + /** + * Get image editor + * @returns {ImageEditor} + */ + + }, { + key: "getEditor", + value: function getEditor() { + return this.graphics.getEditor(); + } + /** + * Return component name + * @returns {string} + */ + + }, { + key: "getName", + value: function getName() { + return this.name; + } + /** + * Set image properties + * @param {Object} setting - Image properties + * @param {boolean} [withRendering] - If true, The changed image will be reflected in the canvas + */ + + }, { + key: "setImageProperties", + value: function setImageProperties(setting, withRendering) { + this.graphics.setImageProperties(setting, withRendering); + } + /** + * Set canvas dimension - css only + * @param {Object} dimension - Canvas css dimension + */ + + }, { + key: "setCanvasCssDimension", + value: function setCanvasCssDimension(dimension) { + this.graphics.setCanvasCssDimension(dimension); + } + /** + * Set canvas dimension - css only + * @param {Object} dimension - Canvas backstore dimension + */ + + }, { + key: "setCanvasBackstoreDimension", + value: function setCanvasBackstoreDimension(dimension) { + this.graphics.setCanvasBackstoreDimension(dimension); + } + /** + * Adjust canvas dimension with scaling image + */ + + }, { + key: "adjustCanvasDimension", + value: function adjustCanvasDimension() { + this.graphics.adjustCanvasDimension(); + } + }, { + key: "adjustCanvasDimensionBase", + value: function adjustCanvasDimensionBase() { + this.graphics.adjustCanvasDimensionBase(); + } + }]); + + return Component; +}(); + +/* harmony default export */ var component = (Component); +;// CONCATENATED MODULE: ./src/js/component/imageLoader.js + + + + + + + + +function imageLoader_createSuper(Derived) { var hasNativeReflectConstruct = imageLoader_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function imageLoader_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +/** + * @author NHN. FE Development Team + * @fileoverview Image loader + */ + + +var imageOption = { + padding: 0, + crossOrigin: 'Anonymous' +}; +/** + * ImageLoader components + * @extends {Component} + * @class ImageLoader + * @param {Graphics} graphics - Graphics instance + * @ignore + */ + +var ImageLoader = /*#__PURE__*/function (_Component) { + _inherits(ImageLoader, _Component); + + var _super = imageLoader_createSuper(ImageLoader); + + function ImageLoader(graphics) { + _classCallCheck(this, ImageLoader); + + return _super.call(this, componentNames.IMAGE_LOADER, graphics); + } + /** + * Load image from url + * @param {?string} imageName - File name + * @param {?(fabric.Image|string)} img - fabric.Image instance or URL of an image + * @returns {Promise} + */ + + + _createClass(ImageLoader, [{ + key: "load", + value: function load(imageName, img) { + var _this = this; + + var promise; + + if (!imageName && !img) { + // Back to the initial state, not error. + var canvas = this.getCanvas(); + canvas.backgroundImage = null; + canvas.renderAll(); + promise = new (promise_default())(function (resolve) { + _this.setCanvasImage('', null); + + resolve(); + }); + } else { + promise = this._setBackgroundImage(img).then(function (oImage) { + _this.setCanvasImage(imageName, oImage); + + _this.adjustCanvasDimension(); + + return oImage; + }); + } + + return promise; + } + /** + * Set background image + * @param {?(fabric.Image|String)} img fabric.Image instance or URL of an image to set background to + * @returns {Promise} + * @private + */ + + }, { + key: "_setBackgroundImage", + value: function _setBackgroundImage(img) { + var _this2 = this; + + if (!img) { + return promise_default().reject(rejectMessages.loadImage); + } + + return new (promise_default())(function (resolve, reject) { + var canvas = _this2.getCanvas(); + + canvas.setBackgroundImage(img, function () { + var oImage = canvas.backgroundImage; + + if (oImage && oImage.getElement()) { + resolve(oImage); + } else { + reject(rejectMessages.loadingImageFailed); + } + }, imageOption); + }); + } + }]); + + return ImageLoader; +}(component); + +/* harmony default export */ var imageLoader = (ImageLoader); +;// CONCATENATED MODULE: ./src/js/extension/cropzone.js + + + + + + + +/** + * @author NHN. FE Development Team + * @fileoverview Cropzone extending fabric.Rect + */ + + + + +var CORNER_TYPE_TOP_LEFT = 'tl'; +var CORNER_TYPE_TOP_RIGHT = 'tr'; +var CORNER_TYPE_MIDDLE_TOP = 'mt'; +var CORNER_TYPE_MIDDLE_LEFT = 'ml'; +var CORNER_TYPE_MIDDLE_RIGHT = 'mr'; +var CORNER_TYPE_MIDDLE_BOTTOM = 'mb'; +var CORNER_TYPE_BOTTOM_LEFT = 'bl'; +var CORNER_TYPE_BOTTOM_RIGHT = 'br'; +var CORNER_TYPE_LIST = [CORNER_TYPE_TOP_LEFT, CORNER_TYPE_TOP_RIGHT, CORNER_TYPE_MIDDLE_TOP, CORNER_TYPE_MIDDLE_LEFT, CORNER_TYPE_MIDDLE_RIGHT, CORNER_TYPE_MIDDLE_BOTTOM, CORNER_TYPE_BOTTOM_LEFT, CORNER_TYPE_BOTTOM_RIGHT]; + +var NOOP_FUNCTION = function NOOP_FUNCTION() {}; +/** + * Align with cropzone ratio + * @param {string} selectedCorner - selected corner type + * @returns {{width: number, height: number}} + * @private + */ + + +function cornerTypeValid(selectedCorner) { + return index_of_default()(CORNER_TYPE_LIST).call(CORNER_TYPE_LIST, selectedCorner) >= 0; +} +/** + * return scale basis type + * @param {number} diffX - X distance of the cursor and corner. + * @param {number} diffY - Y distance of the cursor and corner. + * @returns {string} + * @private + */ + + +function getScaleBasis(diffX, diffY) { + return diffX > diffY ? 'width' : 'height'; +} +/** + * Cropzone object + * Issue: IE7, 8(with excanvas) + * - Cropzone is a black zone without transparency. + * @class Cropzone + * @extends {fabric.Rect} + * @ignore + */ + + +var Cropzone = fabric.fabric.util.createClass(fabric.fabric.Rect, +/** @lends Cropzone.prototype */ +{ + /** + * Constructor + * @param {Object} canvas canvas + * @param {Object} options Options object + * @param {Object} extendsOptions object for extends "options" + * @override + */ + initialize: function initialize(canvas, options, extendsOptions) { + options = external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().extend(options, extendsOptions); + options.type = 'cropzone'; + this.callSuper('initialize', options); + + this._addEventHandler(); + + this.canvas = canvas; + this.options = options; + }, + canvasEventDelegation: function canvasEventDelegation(eventName) { + var _context; + + var delegationState = 'unregistered'; + var isRegistered = this.canvasEventTrigger[eventName] !== NOOP_FUNCTION; + + if (isRegistered) { + delegationState = 'registered'; + } else if (index_of_default()(_context = [eventNames.OBJECT_MOVED, eventNames.OBJECT_SCALED]).call(_context, eventName) < 0) { + delegationState = 'none'; + } + + return delegationState; + }, + canvasEventRegister: function canvasEventRegister(eventName, eventTrigger) { + this.canvasEventTrigger[eventName] = eventTrigger; + }, + _addEventHandler: function _addEventHandler() { + var _this$canvasEventTrig, _context2, _context3, _context4, _context5; + + this.canvasEventTrigger = (_this$canvasEventTrig = {}, _defineProperty(_this$canvasEventTrig, eventNames.OBJECT_MOVED, NOOP_FUNCTION), _defineProperty(_this$canvasEventTrig, eventNames.OBJECT_SCALED, NOOP_FUNCTION), _this$canvasEventTrig); + this.on({ + moving: bind_default()(_context2 = this._onMoving).call(_context2, this), + scaling: bind_default()(_context3 = this._onScaling).call(_context3, this) + }); + fabric.fabric.util.addListener(document, 'keydown', bind_default()(_context4 = this._onKeyDown).call(_context4, this)); + fabric.fabric.util.addListener(document, 'keyup', bind_default()(_context5 = this._onKeyUp).call(_context5, this)); + }, + _renderCropzone: function _renderCropzone(ctx) { + var cropzoneDashLineWidth = 7; + var cropzoneDashLineOffset = 7; // Calc original scale + + var originalFlipX = this.flipX ? -1 : 1; + var originalFlipY = this.flipY ? -1 : 1; + var originalScaleX = originalFlipX / this.scaleX; + var originalScaleY = originalFlipY / this.scaleY; // Set original scale + + ctx.scale(originalScaleX, originalScaleY); // Render outer rect + + this._fillOuterRect(ctx, 'rgba(0, 0, 0, 0.5)'); + + if (this.options.lineWidth) { + this._fillInnerRect(ctx); + + this._strokeBorder(ctx, 'rgb(255, 255, 255)', { + lineWidth: this.options.lineWidth + }); + } else { + // Black dash line + this._strokeBorder(ctx, 'rgb(0, 0, 0)', { + lineDashWidth: cropzoneDashLineWidth + }); // White dash line + + + this._strokeBorder(ctx, 'rgb(255, 255, 255)', { + lineDashWidth: cropzoneDashLineWidth, + lineDashOffset: cropzoneDashLineOffset + }); + } // Reset scale + + + ctx.scale(1 / originalScaleX, 1 / originalScaleY); + }, + + /** + * Render Crop-zone + * @private + * @override + */ + _render: function _render(ctx) { + this.callSuper('_render', ctx); + + this._renderCropzone(ctx); + }, + + /** + * Cropzone-coordinates with outer rectangle + * + * x0 x1 x2 x3 + * y0 +--------------------------+ + * |///////|//////////|///////| // <--- "Outer-rectangle" + * |///////|//////////|///////| + * y1 +-------+----------+-------+ + * |///////| Cropzone |///////| Cropzone is the "Inner-rectangle" + * |///////| (0, 0) |///////| Center point (0, 0) + * y2 +-------+----------+-------+ + * |///////|//////////|///////| + * |///////|//////////|///////| + * y3 +--------------------------+ + * + * @typedef {{x: Array, y: Array}} cropzoneCoordinates + * @ignore + */ + + /** + * Fill outer rectangle + * @param {CanvasRenderingContext2D} ctx - Context + * @param {string|CanvasGradient|CanvasPattern} fillStyle - Fill-style + * @private + */ + _fillOuterRect: function _fillOuterRect(ctx, fillStyle) { + var _this$_getCoordinates = this._getCoordinates(), + x = _this$_getCoordinates.x, + y = _this$_getCoordinates.y; + + ctx.save(); + ctx.fillStyle = fillStyle; + ctx.beginPath(); // Outer rectangle + // Numbers are +/-1 so that overlay edges don't get blurry. + + ctx.moveTo(x[0] - 1, y[0] - 1); + ctx.lineTo(x[3] + 1, y[0] - 1); + ctx.lineTo(x[3] + 1, y[3] + 1); + ctx.lineTo(x[0] - 1, y[3] + 1); + ctx.lineTo(x[0] - 1, y[0] - 1); + ctx.closePath(); // Inner rectangle + + ctx.moveTo(x[1], y[1]); + ctx.lineTo(x[1], y[2]); + ctx.lineTo(x[2], y[2]); + ctx.lineTo(x[2], y[1]); + ctx.lineTo(x[1], y[1]); + ctx.closePath(); + + fill_default()(ctx).call(ctx); + + ctx.restore(); + }, + + /** + * Draw Inner grid line + * @param {CanvasRenderingContext2D} ctx - Context + * @private + */ + _fillInnerRect: function _fillInnerRect(ctx) { + var _this$_getCoordinates2 = this._getCoordinates(), + outerX = _this$_getCoordinates2.x, + outerY = _this$_getCoordinates2.y; + + var x = this._caculateInnerPosition(outerX, (outerX[2] - outerX[1]) / 3); + + var y = this._caculateInnerPosition(outerY, (outerY[2] - outerY[1]) / 3); + + ctx.save(); + ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'; + ctx.lineWidth = this.options.lineWidth; + ctx.beginPath(); + ctx.moveTo(x[0], y[1]); + ctx.lineTo(x[3], y[1]); + ctx.moveTo(x[0], y[2]); + ctx.lineTo(x[3], y[2]); + ctx.moveTo(x[1], y[0]); + ctx.lineTo(x[1], y[3]); + ctx.moveTo(x[2], y[0]); + ctx.lineTo(x[2], y[3]); + ctx.stroke(); + ctx.closePath(); + ctx.restore(); + }, + + /** + * Calculate Inner Position + * @param {Array} outer - outer position + * @param {number} size - interval for calculate + * @returns {Array} - inner position + * @private + */ + _caculateInnerPosition: function _caculateInnerPosition(outer, size) { + var position = []; + position[0] = outer[1]; + position[1] = outer[1] + size; + position[2] = outer[1] + size * 2; + position[3] = outer[2]; + return position; + }, + + /** + * Get coordinates + * @returns {cropzoneCoordinates} - {@link cropzoneCoordinates} + * @private + */ + _getCoordinates: function _getCoordinates() { + var canvas = this.canvas, + width = this.width, + height = this.height, + left = this.left, + top = this.top; + var halfWidth = width / 2; + var halfHeight = height / 2; + var canvasHeight = canvas.getHeight(); // fabric object + + var canvasWidth = canvas.getWidth(); // fabric object + + return { + x: map_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), [-(halfWidth + left), // x0 + -halfWidth, // x1 + halfWidth, // x2 + halfWidth + (canvasWidth - left - width) // x3 + ], Math.ceil), + y: map_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), [-(halfHeight + top), // y0 + -halfHeight, // y1 + halfHeight, // y2 + halfHeight + (canvasHeight - top - height) // y3 + ], Math.ceil) + }; + }, + + /** + * Stroke border + * @param {CanvasRenderingContext2D} ctx - Context + * @param {string|CanvasGradient|CanvasPattern} strokeStyle - Stroke-style + * @param {number} lineDashWidth - Dash width + * @param {number} [lineDashOffset] - Dash offset + * @param {number} [lineWidth] - line width + * @private + */ + _strokeBorder: function _strokeBorder(ctx, strokeStyle, _ref) { + var lineDashWidth = _ref.lineDashWidth, + lineDashOffset = _ref.lineDashOffset, + lineWidth = _ref.lineWidth; + var halfWidth = this.width / 2; + var halfHeight = this.height / 2; + ctx.save(); + ctx.strokeStyle = strokeStyle; + + if (ctx.setLineDash) { + ctx.setLineDash([lineDashWidth, lineDashWidth]); + } + + if (lineDashOffset) { + ctx.lineDashOffset = lineDashOffset; + } + + if (lineWidth) { + ctx.lineWidth = lineWidth; + } + + ctx.beginPath(); + ctx.moveTo(-halfWidth, -halfHeight); + ctx.lineTo(halfWidth, -halfHeight); + ctx.lineTo(halfWidth, halfHeight); + ctx.lineTo(-halfWidth, halfHeight); + ctx.lineTo(-halfWidth, -halfHeight); + ctx.stroke(); + ctx.restore(); + }, + + /** + * onMoving event listener + * @private + */ + _onMoving: function _onMoving() { + var height = this.height, + width = this.width, + left = this.left, + top = this.top; + var maxLeft = this.canvas.getWidth() - width; + var maxTop = this.canvas.getHeight() - height; + this.left = clamp(left, 0, maxLeft); + this.top = clamp(top, 0, maxTop); + this.canvasEventTrigger[eventNames.OBJECT_MOVED](this); + }, + + /** + * onScaling event listener + * @param {{e: MouseEvent}} fEvent - Fabric event + * @private + */ + _onScaling: function _onScaling(fEvent) { + var selectedCorner = fEvent.transform.corner; + var pointer = this.canvas.getPointer(fEvent.e); + + var settings = this._calcScalingSizeFromPointer(pointer, selectedCorner); // On scaling cropzone, + // change real width and height and fix scaleFactor to 1 + + + this.scale(1).set(settings); + this.canvasEventTrigger[eventNames.OBJECT_SCALED](this); + }, + + /** + * Calc scaled size from mouse pointer with selected corner + * @param {{x: number, y: number}} pointer - Mouse position + * @param {string} selectedCorner - selected corner type + * @returns {Object} Having left or(and) top or(and) width or(and) height. + * @private + */ + _calcScalingSizeFromPointer: function _calcScalingSizeFromPointer(pointer, selectedCorner) { + var isCornerTypeValid = cornerTypeValid(selectedCorner); + return isCornerTypeValid && this._resizeCropZone(pointer, selectedCorner); + }, + + /** + * Align with cropzone ratio + * @param {number} width - cropzone width + * @param {number} height - cropzone height + * @param {number} maxWidth - limit max width + * @param {number} maxHeight - limit max height + * @param {number} scaleTo - cropzone ratio + * @returns {{width: number, height: number}} + * @private + */ + adjustRatioCropzoneSize: function adjustRatioCropzoneSize(_ref2) { + var width = _ref2.width, + height = _ref2.height, + leftMaker = _ref2.leftMaker, + topMaker = _ref2.topMaker, + maxWidth = _ref2.maxWidth, + maxHeight = _ref2.maxHeight, + scaleTo = _ref2.scaleTo; + width = maxWidth ? clamp(width, 1, maxWidth) : width; + height = maxHeight ? clamp(height, 1, maxHeight) : height; + + if (!this.presetRatio) { + if (this._withShiftKey) { + // make fixed ratio cropzone + if (width > height) { + height = width; + } else if (height > width) { + width = height; + } + } + + return { + width: width, + height: height, + left: leftMaker(width), + top: topMaker(height) + }; + } + + if (scaleTo === 'width') { + height = width / this.presetRatio; + } else { + width = height * this.presetRatio; + } + + var maxScaleFactor = Math.min(maxWidth / width, maxHeight / height); + + if (maxScaleFactor <= 1) { + var _context6; + + var _map = map_default()(_context6 = [width, height]).call(_context6, function (v) { + return v * maxScaleFactor; + }); + + var _map2 = _slicedToArray(_map, 2); + + width = _map2[0]; + height = _map2[1]; + } + + return { + width: width, + height: height, + left: leftMaker(width), + top: topMaker(height) + }; + }, + + /** + * Get dimension last state cropzone + * @returns {{rectTop: number, rectLeft: number, rectWidth: number, rectHeight: number}} + * @private + */ + _getCropzoneRectInfo: function _getCropzoneRectInfo() { + var _this$canvas = this.canvas, + canvasWidth = _this$canvas.width, + canvasHeight = _this$canvas.height; + + var _this$getBoundingRect = this.getBoundingRect(false, true), + rectTop = _this$getBoundingRect.top, + rectLeft = _this$getBoundingRect.left, + rectWidth = _this$getBoundingRect.width, + rectHeight = _this$getBoundingRect.height; + + return { + rectTop: rectTop, + rectLeft: rectLeft, + rectWidth: rectWidth, + rectHeight: rectHeight, + rectRight: rectLeft + rectWidth, + rectBottom: rectTop + rectHeight, + canvasWidth: canvasWidth, + canvasHeight: canvasHeight + }; + }, + + /** + * Calc scaling dimension + * @param {Object} position - Mouse position + * @param {string} corner - corner type + * @returns {{left: number, top: number, width: number, height: number}} + * @private + */ + _resizeCropZone: function _resizeCropZone(_ref3, corner) { + var x = _ref3.x, + y = _ref3.y; + + var _this$_getCropzoneRec = this._getCropzoneRectInfo(), + rectWidth = _this$_getCropzoneRec.rectWidth, + rectHeight = _this$_getCropzoneRec.rectHeight, + rectTop = _this$_getCropzoneRec.rectTop, + rectLeft = _this$_getCropzoneRec.rectLeft, + rectBottom = _this$_getCropzoneRec.rectBottom, + rectRight = _this$_getCropzoneRec.rectRight, + canvasWidth = _this$_getCropzoneRec.canvasWidth, + canvasHeight = _this$_getCropzoneRec.canvasHeight; + + var resizeInfoMap = { + tl: { + width: rectRight - x, + height: rectBottom - y, + leftMaker: function leftMaker(newWidth) { + return rectRight - newWidth; + }, + topMaker: function topMaker(newHeight) { + return rectBottom - newHeight; + }, + maxWidth: rectRight, + maxHeight: rectBottom, + scaleTo: getScaleBasis(rectLeft - x, rectTop - y) + }, + tr: { + width: x - rectLeft, + height: rectBottom - y, + leftMaker: function leftMaker() { + return rectLeft; + }, + topMaker: function topMaker(newHeight) { + return rectBottom - newHeight; + }, + maxWidth: canvasWidth - rectLeft, + maxHeight: rectBottom, + scaleTo: getScaleBasis(x - rectRight, rectTop - y) + }, + mt: { + width: rectWidth, + height: rectBottom - y, + leftMaker: function leftMaker() { + return rectLeft; + }, + topMaker: function topMaker(newHeight) { + return rectBottom - newHeight; + }, + maxWidth: canvasWidth - rectLeft, + maxHeight: rectBottom, + scaleTo: 'height' + }, + ml: { + width: rectRight - x, + height: rectHeight, + leftMaker: function leftMaker(newWidth) { + return rectRight - newWidth; + }, + topMaker: function topMaker() { + return rectTop; + }, + maxWidth: rectRight, + maxHeight: canvasHeight - rectTop, + scaleTo: 'width' + }, + mr: { + width: x - rectLeft, + height: rectHeight, + leftMaker: function leftMaker() { + return rectLeft; + }, + topMaker: function topMaker() { + return rectTop; + }, + maxWidth: canvasWidth - rectLeft, + maxHeight: canvasHeight - rectTop, + scaleTo: 'width' + }, + mb: { + width: rectWidth, + height: y - rectTop, + leftMaker: function leftMaker() { + return rectLeft; + }, + topMaker: function topMaker() { + return rectTop; + }, + maxWidth: canvasWidth - rectLeft, + maxHeight: canvasHeight - rectTop, + scaleTo: 'height' + }, + bl: { + width: rectRight - x, + height: y - rectTop, + leftMaker: function leftMaker(newWidth) { + return rectRight - newWidth; + }, + topMaker: function topMaker() { + return rectTop; + }, + maxWidth: rectRight, + maxHeight: canvasHeight - rectTop, + scaleTo: getScaleBasis(rectLeft - x, y - rectBottom) + }, + br: { + width: x - rectLeft, + height: y - rectTop, + leftMaker: function leftMaker() { + return rectLeft; + }, + topMaker: function topMaker() { + return rectTop; + }, + maxWidth: canvasWidth - rectLeft, + maxHeight: canvasHeight - rectTop, + scaleTo: getScaleBasis(x - rectRight, y - rectBottom) + } + }; + return this.adjustRatioCropzoneSize(resizeInfoMap[corner]); + }, + + /** + * Return the whether this cropzone is valid + * @returns {boolean} + */ + isValid: function isValid() { + return this.left >= 0 && this.top >= 0 && this.width > 0 && this.height > 0; + }, + + /** + * Keydown event handler + * @param {{number}} keyCode - Event keyCode + * @private + */ + _onKeyDown: function _onKeyDown(_ref4) { + var keyCode = _ref4.keyCode; + + if (keyCode === keyCodes.SHIFT) { + this._withShiftKey = true; + } + }, + + /** + * Keyup event handler + * @param {{number}} keyCode - Event keyCode + * @private + */ + _onKeyUp: function _onKeyUp(_ref5) { + var keyCode = _ref5.keyCode; + + if (keyCode === keyCodes.SHIFT) { + this._withShiftKey = false; + } + } +}); +/* harmony default export */ var cropzone = (Cropzone); +;// CONCATENATED MODULE: ./src/js/component/cropper.js + + + + + + + + + + + +function cropper_createSuper(Derived) { var hasNativeReflectConstruct = cropper_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function cropper_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +/** + * @author NHN. FE Development Team + * @fileoverview Image crop module (start cropping, end cropping) + */ + + + + + + +var MOUSE_MOVE_THRESHOLD = 10; +var DEFAULT_OPTION = { + presetRatio: null, + top: -10, + left: -10, + height: 1, + width: 1 +}; +/** + * Cropper components + * @param {Graphics} graphics - Graphics instance + * @extends {Component} + * @class Cropper + * @ignore + */ + +var Cropper = /*#__PURE__*/function (_Component) { + _inherits(Cropper, _Component); + + var _super = cropper_createSuper(Cropper); + + function Cropper(graphics) { + var _context, _context2, _context3, _context4, _context5; + + var _this; + + _classCallCheck(this, Cropper); + + _this = _super.call(this, componentNames.CROPPER, graphics); + /** + * Cropzone + * @type {Cropzone} + * @private + */ + + _this._cropzone = null; + /** + * StartX of Cropzone + * @type {number} + * @private + */ + + _this._startX = null; + /** + * StartY of Cropzone + * @type {number} + * @private + */ + + _this._startY = null; + /** + * State whether shortcut key is pressed or not + * @type {boolean} + * @private + */ + + _this._withShiftKey = false; + /** + * Listeners + * @type {object.} + * @private + */ + + _this._listeners = { + keydown: bind_default()(_context = _this._onKeyDown).call(_context, _assertThisInitialized(_this)), + keyup: bind_default()(_context2 = _this._onKeyUp).call(_context2, _assertThisInitialized(_this)), + mousedown: bind_default()(_context3 = _this._onFabricMouseDown).call(_context3, _assertThisInitialized(_this)), + mousemove: bind_default()(_context4 = _this._onFabricMouseMove).call(_context4, _assertThisInitialized(_this)), + mouseup: bind_default()(_context5 = _this._onFabricMouseUp).call(_context5, _assertThisInitialized(_this)) + }; + return _this; + } + /** + * Start cropping + */ + + + _createClass(Cropper, [{ + key: "start", + value: function start() { + if (this._cropzone) { + return; + } + + var canvas = this.getCanvas(); + canvas.forEachObject(function (obj) { + // {@link http://fabricjs.com/docs/fabric.Object.html#evented} + obj.evented = false; + }); + this._cropzone = new cropzone(canvas, external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().extend({ + left: 0, + top: 0, + width: 0.5, + height: 0.5, + strokeWidth: 0, + // {@link https://github.com/kangax/fabric.js/issues/2860} + cornerSize: 10, + cornerColor: 'black', + fill: 'transparent' + }, CROPZONE_DEFAULT_OPTIONS, this.graphics.cropSelectionStyle)); + canvas.discardActiveObject(); + canvas.add(this._cropzone); + canvas.on('mouse:down', this._listeners.mousedown); + canvas.selection = false; + canvas.defaultCursor = 'crosshair'; + fabric.fabric.util.addListener(document, 'keydown', this._listeners.keydown); + fabric.fabric.util.addListener(document, 'keyup', this._listeners.keyup); + } + /** + * End cropping + */ + + }, { + key: "end", + value: function end() { + var canvas = this.getCanvas(); + var cropzone = this._cropzone; + + if (!cropzone) { + return; + } + + canvas.remove(cropzone); + canvas.selection = true; + canvas.defaultCursor = 'default'; + canvas.off('mouse:down', this._listeners.mousedown); + canvas.forEachObject(function (obj) { + obj.evented = true; + }); + this._cropzone = null; + fabric.fabric.util.removeListener(document, 'keydown', this._listeners.keydown); + fabric.fabric.util.removeListener(document, 'keyup', this._listeners.keyup); + } + /** + * Change cropzone visible + * @param {boolean} visible - cropzone visible state + */ + + }, { + key: "changeVisibility", + value: function changeVisibility(visible) { + if (this._cropzone) { + this._cropzone.set({ + visible: visible + }); + } + } + /** + * onMousedown handler in fabric canvas + * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event + * @private + */ + + }, { + key: "_onFabricMouseDown", + value: function _onFabricMouseDown(fEvent) { + var canvas = this.getCanvas(); + + if (fEvent.target) { + return; + } + + canvas.selection = false; + var coord = canvas.getPointer(fEvent.e); + this._startX = coord.x; + this._startY = coord.y; + canvas.on({ + 'mouse:move': this._listeners.mousemove, + 'mouse:up': this._listeners.mouseup + }); + } + /** + * onMousemove handler in fabric canvas + * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event + * @private + */ + + }, { + key: "_onFabricMouseMove", + value: function _onFabricMouseMove(fEvent) { + var canvas = this.getCanvas(); + var pointer = canvas.getPointer(fEvent.e); + var x = pointer.x, + y = pointer.y; + var cropzone = this._cropzone; + + if (Math.abs(x - this._startX) + Math.abs(y - this._startY) > MOUSE_MOVE_THRESHOLD) { + canvas.remove(cropzone); + cropzone.set(this._calcRectDimensionFromPoint(x, y)); + canvas.add(cropzone); + canvas.setActiveObject(cropzone); + } + } + /** + * Get rect dimension setting from Canvas-Mouse-Position(x, y) + * @param {number} x - Canvas-Mouse-Position x + * @param {number} y - Canvas-Mouse-Position Y + * @returns {{left: number, top: number, width: number, height: number}} + * @private + */ + + }, { + key: "_calcRectDimensionFromPoint", + value: function _calcRectDimensionFromPoint(x, y) { + var canvas = this.getCanvas(); + var canvasWidth = canvas.getWidth(); + var canvasHeight = canvas.getHeight(); + var startX = this._startX; + var startY = this._startY; + var left = clamp(x, 0, startX); + var top = clamp(y, 0, startY); + var width = clamp(x, startX, canvasWidth) - left; // (startX <= x(mouse) <= canvasWidth) - left + + var height = clamp(y, startY, canvasHeight) - top; // (startY <= y(mouse) <= canvasHeight) - top + + if (this._withShiftKey) { + // make fixed ratio cropzone + if (width > height) { + height = width; + } else if (height > width) { + width = height; + } + + if (startX >= x) { + left = startX - width; + } + + if (startY >= y) { + top = startY - height; + } + } + + return { + left: left, + top: top, + width: width, + height: height + }; + } + /** + * onMouseup handler in fabric canvas + * @private + */ + + }, { + key: "_onFabricMouseUp", + value: function _onFabricMouseUp() { + var cropzone = this._cropzone; + var listeners = this._listeners; + var canvas = this.getCanvas(); + canvas.setActiveObject(cropzone); + canvas.off({ + 'mouse:move': listeners.mousemove, + 'mouse:up': listeners.mouseup + }); + } + /** + * Get cropped image data + * @param {Object} cropRect cropzone rect + * @param {Number} cropRect.left left position + * @param {Number} cropRect.top top position + * @param {Number} cropRect.width width + * @param {Number} cropRect.height height + * @returns {?{imageName: string, url: string}} cropped Image data + */ + + }, { + key: "getCroppedImageData", + value: function getCroppedImageData(cropRect) { + var canvas = this.getCanvas(); + var containsCropzone = canvas.contains(this._cropzone); + + if (!cropRect) { + return null; + } + + if (containsCropzone) { + canvas.remove(this._cropzone); + } + + var imageData = { + imageName: this.getImageName(), + url: canvas.toDataURL(cropRect) + }; + + if (containsCropzone) { + canvas.add(this._cropzone); + } + + return imageData; + } + /** + * Get cropped rect + * @returns {Object} rect + */ + + }, { + key: "getCropzoneRect", + value: function getCropzoneRect() { + var cropzone = this._cropzone; + + if (!cropzone.isValid()) { + return null; + } + + return { + left: cropzone.left, + top: cropzone.top, + width: cropzone.width, + height: cropzone.height + }; + } + /** + * Set a cropzone square + * @param {number} [presetRatio] - preset ratio + */ + + }, { + key: "setCropzoneRect", + value: function setCropzoneRect(presetRatio) { + var canvas = this.getCanvas(); + var cropzone = this._cropzone; + canvas.discardActiveObject(); + canvas.selection = false; + canvas.remove(cropzone); + cropzone.set(presetRatio ? this._getPresetPropertiesForCropSize(presetRatio) : DEFAULT_OPTION); + canvas.add(cropzone); + canvas.selection = true; + + if (presetRatio) { + canvas.setActiveObject(cropzone); + } + } + /** + * get a cropzone square info + * @param {number} presetRatio - preset ratio + * @returns {{presetRatio: number, left: number, top: number, width: number, height: number}} + * @private + */ + + }, { + key: "_getPresetPropertiesForCropSize", + value: function _getPresetPropertiesForCropSize(presetRatio) { + var canvas = this.getCanvas(); + var originalWidth = canvas.getWidth(); + var originalHeight = canvas.getHeight(); + var standardSize = originalWidth >= originalHeight ? originalWidth : originalHeight; + + var getScale = function getScale(value, orignalValue) { + return value > orignalValue ? orignalValue / value : 1; + }; + + var width = standardSize * presetRatio; + var height = standardSize; + var scaleWidth = getScale(width, originalWidth); + + var _snippet$map = map_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), [width, height], function (sizeValue) { + return sizeValue * scaleWidth; + }); + + var _snippet$map2 = _slicedToArray(_snippet$map, 2); + + width = _snippet$map2[0]; + height = _snippet$map2[1]; + var scaleHeight = getScale(height, originalHeight); + + var _snippet$map3 = map_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), [width, height], function (sizeValue) { + return fixFloatingPoint(sizeValue * scaleHeight); + }); + + var _snippet$map4 = _slicedToArray(_snippet$map3, 2); + + width = _snippet$map4[0]; + height = _snippet$map4[1]; + return { + presetRatio: presetRatio, + top: (originalHeight - height) / 2, + left: (originalWidth - width) / 2, + width: width, + height: height + }; + } + /** + * Keydown event handler + * @param {KeyboardEvent} e - Event object + * @private + */ + + }, { + key: "_onKeyDown", + value: function _onKeyDown(e) { + if (e.keyCode === keyCodes.SHIFT) { + this._withShiftKey = true; + } + } + /** + * Keyup event handler + * @param {KeyboardEvent} e - Event object + * @private + */ + + }, { + key: "_onKeyUp", + value: function _onKeyUp(e) { + if (e.keyCode === keyCodes.SHIFT) { + this._withShiftKey = false; + } + } + }]); + + return Cropper; +}(component); + +/* harmony default export */ var cropper = (Cropper); +;// CONCATENATED MODULE: ./src/js/component/flip.js + + + + + + + + + +function component_flip_createSuper(Derived) { var hasNativeReflectConstruct = component_flip_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function component_flip_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +/** + * @author NHN. FE Development Team + * @fileoverview Image flip module + */ + + + +/** + * Flip + * @class Flip + * @param {Graphics} graphics - Graphics instance + * @extends {Component} + * @ignore + */ + +var flip_Flip = /*#__PURE__*/function (_Component) { + _inherits(Flip, _Component); + + var _super = component_flip_createSuper(Flip); + + function Flip(graphics) { + _classCallCheck(this, Flip); + + return _super.call(this, componentNames.FLIP, graphics); + } + /** + * Get current flip settings + * @returns {{flipX: Boolean, flipY: Boolean}} + */ + + + _createClass(Flip, [{ + key: "getCurrentSetting", + value: function getCurrentSetting() { + var canvasImage = this.getCanvasImage(); + return { + flipX: canvasImage.flipX, + flipY: canvasImage.flipY + }; + } + /** + * Set flipX, flipY + * @param {{flipX: Boolean, flipY: Boolean}} newSetting - Flip setting + * @returns {Promise} + */ + + }, { + key: "set", + value: function set(newSetting) { + var setting = this.getCurrentSetting(); + var isChangingFlipX = setting.flipX !== newSetting.flipX; + var isChangingFlipY = setting.flipY !== newSetting.flipY; + + if (!isChangingFlipX && !isChangingFlipY) { + return promise_default().reject(rejectMessages.flip); + } + + external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().extend(setting, newSetting); + this.setImageProperties(setting, true); + + this._invertAngle(isChangingFlipX, isChangingFlipY); + + this._flipObjects(isChangingFlipX, isChangingFlipY); + + return promise_default().resolve({ + flipX: setting.flipX, + flipY: setting.flipY, + angle: this.getCanvasImage().angle + }); + } + /** + * Invert image angle for flip + * @param {boolean} isChangingFlipX - Change flipX + * @param {boolean} isChangingFlipY - Change flipY + */ + + }, { + key: "_invertAngle", + value: function _invertAngle(isChangingFlipX, isChangingFlipY) { + var canvasImage = this.getCanvasImage(); + var angle = canvasImage.angle; + + if (isChangingFlipX) { + angle *= -1; + } + + if (isChangingFlipY) { + angle *= -1; + } + + canvasImage.rotate(parse_float_default()(angle)).setCoords(); // parseFloat for -0 to 0 + } + /** + * Flip objects + * @param {boolean} isChangingFlipX - Change flipX + * @param {boolean} isChangingFlipY - Change flipY + * @private + */ + + }, { + key: "_flipObjects", + value: function _flipObjects(isChangingFlipX, isChangingFlipY) { + var canvas = this.getCanvas(); + + if (isChangingFlipX) { + canvas.forEachObject(function (obj) { + obj.set({ + angle: parse_float_default()(obj.angle * -1), + // parseFloat for -0 to 0 + flipX: !obj.flipX, + left: canvas.width - obj.left + }).setCoords(); + }); + } + + if (isChangingFlipY) { + canvas.forEachObject(function (obj) { + obj.set({ + angle: parse_float_default()(obj.angle * -1), + // parseFloat for -0 to 0 + flipY: !obj.flipY, + top: canvas.height - obj.top + }).setCoords(); + }); + } + + canvas.renderAll(); + } + /** + * Reset flip settings + * @returns {Promise} + */ + + }, { + key: "reset", + value: function reset() { + return this.set({ + flipX: false, + flipY: false + }); + } + /** + * Flip x + * @returns {Promise} + */ + + }, { + key: "flipX", + value: function flipX() { + var current = this.getCurrentSetting(); + return this.set({ + flipX: !current.flipX, + flipY: current.flipY + }); + } + /** + * Flip y + * @returns {Promise} + */ + + }, { + key: "flipY", + value: function flipY() { + var current = this.getCurrentSetting(); + return this.set({ + flipX: current.flipX, + flipY: !current.flipY + }); + } + }]); + + return Flip; +}(component); + +/* harmony default export */ var component_flip = (flip_Flip); +;// CONCATENATED MODULE: ./src/js/component/rotation.js + + + + + + + + +function rotation_createSuper(Derived) { var hasNativeReflectConstruct = rotation_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function rotation_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +/** + * @author NHN. FE Development Team + * @fileoverview Image rotation module + */ + + + +/** + * Image Rotation component + * @class Rotation + * @extends {Component} + * @param {Graphics} graphics - Graphics instance + * @ignore + */ + +var Rotation = /*#__PURE__*/function (_Component) { + _inherits(Rotation, _Component); + + var _super = rotation_createSuper(Rotation); + + function Rotation(graphics) { + _classCallCheck(this, Rotation); + + return _super.call(this, componentNames.ROTATION, graphics); + } + /** + * Get current angle + * @returns {Number} + */ + + + _createClass(Rotation, [{ + key: "getCurrentAngle", + value: function getCurrentAngle() { + return this.getCanvasImage().angle; + } + /** + * Set angle of the image + * + * Do not call "this.setImageProperties" for setting angle directly. + * Before setting angle, The originX,Y of image should be set to center. + * See "http://fabricjs.com/docs/fabric.Object.html#setAngle" + * + * @param {number} angle - Angle value + * @returns {Promise} + */ + + }, { + key: "setAngle", + value: function setAngle(angle) { + var oldAngle = this.getCurrentAngle() % 360; // The angle is lower than 2*PI(===360 degrees) + + angle %= 360; + var canvasImage = this.getCanvasImage(); + var oldImageCenter = canvasImage.getCenterPoint(); + canvasImage.set({ + angle: angle + }).setCoords(); + this.adjustCanvasDimension(); + var newImageCenter = canvasImage.getCenterPoint(); + + this._rotateForEachObject(oldImageCenter, newImageCenter, angle - oldAngle); + + return promise_default().resolve(angle); + } + /** + * Rotate for each object + * @param {fabric.Point} oldImageCenter - Image center point before rotation + * @param {fabric.Point} newImageCenter - Image center point after rotation + * @param {number} angleDiff - Image angle difference after rotation + * @private + */ + + }, { + key: "_rotateForEachObject", + value: function _rotateForEachObject(oldImageCenter, newImageCenter, angleDiff) { + var canvas = this.getCanvas(); + var centerDiff = { + x: oldImageCenter.x - newImageCenter.x, + y: oldImageCenter.y - newImageCenter.y + }; + canvas.forEachObject(function (obj) { + var objCenter = obj.getCenterPoint(); + var radian = fabric.fabric.util.degreesToRadians(angleDiff); + var newObjCenter = fabric.fabric.util.rotatePoint(objCenter, oldImageCenter, radian); + obj.set({ + left: newObjCenter.x - centerDiff.x, + top: newObjCenter.y - centerDiff.y, + angle: (obj.angle + angleDiff) % 360 + }); + obj.setCoords(); + }); + canvas.renderAll(); + } + /** + * Rotate the image + * @param {number} additionalAngle - Additional angle + * @returns {Promise} + */ + + }, { + key: "rotate", + value: function rotate(additionalAngle) { + var current = this.getCurrentAngle(); + return this.setAngle(current + additionalAngle); + } + }]); + + return Rotation; +}(component); + +/* harmony default export */ var rotation = (Rotation); +;// CONCATENATED MODULE: ./src/js/component/freeDrawing.js + + + + + + + +function freeDrawing_createSuper(Derived) { var hasNativeReflectConstruct = freeDrawing_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function freeDrawing_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +/** + * @author NHN. FE Development Team + * @fileoverview Free drawing module, Set brush + */ + + + +/** + * FreeDrawing + * @class FreeDrawing + * @param {Graphics} graphics - Graphics instance + * @extends {Component} + * @ignore + */ + +var FreeDrawing = /*#__PURE__*/function (_Component) { + _inherits(FreeDrawing, _Component); + + var _super = freeDrawing_createSuper(FreeDrawing); + + function FreeDrawing(graphics) { + var _this; + + _classCallCheck(this, FreeDrawing); + + _this = _super.call(this, componentNames.FREE_DRAWING, graphics); + /** + * Brush width + * @type {number} + */ + + _this.width = 12; + /** + * fabric.Color instance for brush color + * @type {fabric.Color} + */ + + _this.oColor = new fabric.fabric.Color('rgba(0, 0, 0, 0.5)'); + return _this; + } + /** + * Start free drawing mode + * @param {{width: ?number, color: ?string}} [setting] - Brush width & color + */ + + + _createClass(FreeDrawing, [{ + key: "start", + value: function start(setting) { + var canvas = this.getCanvas(); + canvas.isDrawingMode = true; + this.setBrush(setting); + } + /** + * Set brush + * @param {{width: ?number, color: ?string}} [setting] - Brush width & color + */ + + }, { + key: "setBrush", + value: function setBrush(setting) { + var brush = this.getCanvas().freeDrawingBrush; + setting = setting || {}; + this.width = setting.width || this.width; + + if (setting.color) { + this.oColor = new fabric.fabric.Color(setting.color); + } + + brush.width = this.width; + brush.color = this.oColor.toRgba(); + } + /** + * End free drawing mode + */ + + }, { + key: "end", + value: function end() { + var canvas = this.getCanvas(); + canvas.isDrawingMode = false; + } + }]); + + return FreeDrawing; +}(component); + +/* harmony default export */ var freeDrawing = (FreeDrawing); +;// CONCATENATED MODULE: ./src/js/extension/arrowLine.js + + + +/** + * @author NHN. FE Development Team + * @fileoverview Blur extending fabric.Image.filters.Convolute + */ + +var ARROW_ANGLE = 30; +var CHEVRON_SIZE_RATIO = 2.7; +var TRIANGLE_SIZE_RATIO = 1.7; +var RADIAN_CONVERSION_VALUE = 180; +var ArrowLine = fabric.fabric.util.createClass(fabric.fabric.Line, +/** @lends Convolute.prototype */ +{ + /** + * Line type + * @param {String} type + * @default + */ + type: 'line', + + /** + * Constructor + * @param {Array} [points] Array of points + * @param {Object} [options] Options object + * @override + */ + initialize: function initialize(points) { + var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; + this.callSuper('initialize', points, options); + this.arrowType = options.arrowType; + }, + + /** + * Render ArrowLine + * @private + * @override + */ + _render: function _render(ctx) { + var _this$calcLinePoints = this.calcLinePoints(), + fromX = _this$calcLinePoints.x1, + fromY = _this$calcLinePoints.y1, + toX = _this$calcLinePoints.x2, + toY = _this$calcLinePoints.y2; + + var linePosition = { + fromX: fromX, + fromY: fromY, + toX: toX, + toY: toY + }; + this.ctx = ctx; + ctx.lineWidth = this.strokeWidth; + + this._renderBasicLinePath(linePosition); + + this._drawDecoratorPath(linePosition); + + this._renderStroke(ctx); + }, + + /** + * Render Basic line path + * @param {Object} linePosition - line position + * @param {number} option.fromX - line start position x + * @param {number} option.fromY - line start position y + * @param {number} option.toX - line end position x + * @param {number} option.toY - line end position y + * @private + */ + _renderBasicLinePath: function _renderBasicLinePath(_ref) { + var fromX = _ref.fromX, + fromY = _ref.fromY, + toX = _ref.toX, + toY = _ref.toY; + this.ctx.beginPath(); + this.ctx.moveTo(fromX, fromY); + this.ctx.lineTo(toX, toY); + }, + + /** + * Render Arrow Head + * @param {Object} linePosition - line position + * @param {number} option.fromX - line start position x + * @param {number} option.fromY - line start position y + * @param {number} option.toX - line end position x + * @param {number} option.toY - line end position y + * @private + */ + _drawDecoratorPath: function _drawDecoratorPath(linePosition) { + this._drawDecoratorPathType('head', linePosition); + + this._drawDecoratorPathType('tail', linePosition); + }, + + /** + * Render Arrow Head + * @param {string} type - 'head' or 'tail' + * @param {Object} linePosition - line position + * @param {number} option.fromX - line start position x + * @param {number} option.fromY - line start position y + * @param {number} option.toX - line end position x + * @param {number} option.toY - line end position y + * @private + */ + _drawDecoratorPathType: function _drawDecoratorPathType(type, linePosition) { + switch (this.arrowType[type]) { + case 'triangle': + this._drawTrianglePath(type, linePosition); + + break; + + case 'chevron': + this._drawChevronPath(type, linePosition); + + break; + + default: + break; + } + }, + + /** + * Render Triangle Head + * @param {string} type - 'head' or 'tail' + * @param {Object} linePosition - line position + * @param {number} option.fromX - line start position x + * @param {number} option.fromY - line start position y + * @param {number} option.toX - line end position x + * @param {number} option.toY - line end position y + * @private + */ + _drawTrianglePath: function _drawTrianglePath(type, linePosition) { + var decorateSize = this.ctx.lineWidth * TRIANGLE_SIZE_RATIO; + + this._drawChevronPath(type, linePosition, decorateSize); + + this.ctx.closePath(); + }, + + /** + * Render Chevron Head + * @param {string} type - 'head' or 'tail' + * @param {Object} linePosition - line position + * @param {number} option.fromX - line start position x + * @param {number} option.fromY - line start position y + * @param {number} option.toX - line end position x + * @param {number} option.toY - line end position y + * @param {number} decorateSize - decorate size + * @private + */ + _drawChevronPath: function _drawChevronPath(type, _ref2, decorateSize) { + var _this = this; + + var fromX = _ref2.fromX, + fromY = _ref2.fromY, + toX = _ref2.toX, + toY = _ref2.toY; + var ctx = this.ctx; + + if (!decorateSize) { + decorateSize = this.ctx.lineWidth * CHEVRON_SIZE_RATIO; + } + + var _ref3 = type === 'head' ? [fromX, fromY] : [toX, toY], + _ref4 = _slicedToArray(_ref3, 2), + standardX = _ref4[0], + standardY = _ref4[1]; + + var _ref5 = type === 'head' ? [toX, toY] : [fromX, fromY], + _ref6 = _slicedToArray(_ref5, 2), + compareX = _ref6[0], + compareY = _ref6[1]; + + var angle = Math.atan2(compareY - standardY, compareX - standardX) * RADIAN_CONVERSION_VALUE / Math.PI; + + var rotatedPosition = function rotatedPosition(changeAngle) { + return _this.getRotatePosition(decorateSize, changeAngle, { + x: standardX, + y: standardY + }); + }; + + ctx.moveTo.apply(ctx, _toConsumableArray(rotatedPosition(angle + ARROW_ANGLE))); + ctx.lineTo(standardX, standardY); + ctx.lineTo.apply(ctx, _toConsumableArray(rotatedPosition(angle - ARROW_ANGLE))); + }, + + /** + * return position from change angle. + * @param {number} distance - change distance + * @param {number} angle - change angle + * @param {Object} referencePosition - reference position + * @returns {Array} + * @private + */ + getRotatePosition: function getRotatePosition(distance, angle, referencePosition) { + var radian = angle * Math.PI / RADIAN_CONVERSION_VALUE; + var x = referencePosition.x, + y = referencePosition.y; + return [distance * Math.cos(radian) + x, distance * Math.sin(radian) + y]; + } +}); +/* harmony default export */ var arrowLine = (ArrowLine); +;// CONCATENATED MODULE: ./src/js/component/line.js + + + + + + + + + +function line_createSuper(Derived) { var hasNativeReflectConstruct = line_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function line_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +/** + * @author NHN. FE Development Team + * @fileoverview Free drawing module, Set brush + */ + + + + + +/** + * Line + * @class Line + * @param {Graphics} graphics - Graphics instance + * @extends {Component} + * @ignore + */ + +var Line = /*#__PURE__*/function (_Component) { + _inherits(Line, _Component); + + var _super = line_createSuper(Line); + + function Line(graphics) { + var _context, _context2, _context3; + + var _this; + + _classCallCheck(this, Line); + + _this = _super.call(this, componentNames.LINE, graphics); + /** + * Brush width + * @type {number} + * @private + */ + + _this._width = 12; + /** + * fabric.Color instance for brush color + * @type {fabric.Color} + * @private + */ + + _this._oColor = new fabric.fabric.Color('rgba(0, 0, 0, 0.5)'); + /** + * Listeners + * @type {object.} + * @private + */ + + _this._listeners = { + mousedown: bind_default()(_context = _this._onFabricMouseDown).call(_context, _assertThisInitialized(_this)), + mousemove: bind_default()(_context2 = _this._onFabricMouseMove).call(_context2, _assertThisInitialized(_this)), + mouseup: bind_default()(_context3 = _this._onFabricMouseUp).call(_context3, _assertThisInitialized(_this)) + }; + return _this; + } + /** + * Start drawing line mode + * @param {{width: ?number, color: ?string}} [setting] - Brush width & color + */ + + + _createClass(Line, [{ + key: "setHeadOption", + value: function setHeadOption(setting) { + var _setting$arrowType = setting.arrowType, + arrowType = _setting$arrowType === void 0 ? { + head: null, + tail: null + } : _setting$arrowType; + this._arrowType = arrowType; + } + /** + * Start drawing line mode + * @param {{width: ?number, color: ?string}} [setting] - Brush width & color + */ + + }, { + key: "start", + value: function start() { + var setting = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; + var canvas = this.getCanvas(); + canvas.defaultCursor = 'crosshair'; + canvas.selection = false; + this.setHeadOption(setting); + this.setBrush(setting); + canvas.forEachObject(function (obj) { + obj.set({ + evented: false + }); + }); + canvas.on({ + 'mouse:down': this._listeners.mousedown + }); + } + /** + * Set brush + * @param {{width: ?number, color: ?string}} [setting] - Brush width & color + */ + + }, { + key: "setBrush", + value: function setBrush(setting) { + var brush = this.getCanvas().freeDrawingBrush; + setting = setting || {}; + this._width = setting.width || this._width; + + if (setting.color) { + this._oColor = new fabric.fabric.Color(setting.color); + } + + brush.width = this._width; + brush.color = this._oColor.toRgba(); + } + /** + * End drawing line mode + */ + + }, { + key: "end", + value: function end() { + var canvas = this.getCanvas(); + canvas.defaultCursor = 'default'; + canvas.selection = true; + canvas.forEachObject(function (obj) { + obj.set({ + evented: true + }); + }); + canvas.off('mouse:down', this._listeners.mousedown); + } + /** + * Mousedown event handler in fabric canvas + * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object + * @private + */ + + }, { + key: "_onFabricMouseDown", + value: function _onFabricMouseDown(fEvent) { + var canvas = this.getCanvas(); + + var _canvas$getPointer = canvas.getPointer(fEvent.e), + x = _canvas$getPointer.x, + y = _canvas$getPointer.y; + + var points = [x, y, x, y]; + this._line = new arrowLine(points, { + stroke: this._oColor.toRgba(), + strokeWidth: this._width, + arrowType: this._arrowType, + evented: false + }); + + this._line.set(fObjectOptions.SELECTION_STYLE); + + canvas.add(this._line); + canvas.on({ + 'mouse:move': this._listeners.mousemove, + 'mouse:up': this._listeners.mouseup + }); + this.fire(eventNames.ADD_OBJECT, this._createLineEventObjectProperties()); + } + /** + * Mousemove event handler in fabric canvas + * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object + * @private + */ + + }, { + key: "_onFabricMouseMove", + value: function _onFabricMouseMove(fEvent) { + var canvas = this.getCanvas(); + var pointer = canvas.getPointer(fEvent.e); + + this._line.set({ + x2: pointer.x, + y2: pointer.y + }); + + this._line.setCoords(); + + canvas.renderAll(); + } + /** + * Mouseup event handler in fabric canvas + * @private + */ + + }, { + key: "_onFabricMouseUp", + value: function _onFabricMouseUp() { + var canvas = this.getCanvas(); + this.fire(eventNames.OBJECT_ADDED, this._createLineEventObjectProperties()); + this._line = null; + canvas.off({ + 'mouse:move': this._listeners.mousemove, + 'mouse:up': this._listeners.mouseup + }); + } + /** + * create line event object properties + * @returns {Object} properties line object + * @private + */ + + }, { + key: "_createLineEventObjectProperties", + value: function _createLineEventObjectProperties() { + var params = this.graphics.createObjectProperties(this._line); + var _this$_line = this._line, + x1 = _this$_line.x1, + x2 = _this$_line.x2, + y1 = _this$_line.y1, + y2 = _this$_line.y2; + return external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().extend({}, params, { + startPosition: { + x: x1, + y: y1 + }, + endPosition: { + x: x2, + y: y2 + } + }); + } + }]); + + return Line; +}(component); + +/* harmony default export */ var line = (Line); +;// CONCATENATED MODULE: ./src/js/component/text.js + + + + + + + + + + + + + +function component_text_createSuper(Derived) { var hasNativeReflectConstruct = component_text_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function component_text_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +/** + * @author NHN. FE Development Team + * @fileoverview Text module + */ + + + + +var defaultStyles = { + fill: '#000000', + left: 0, + top: 0 +}; +var resetStyles = { + fill: '#000000', + fontStyle: 'normal', + fontWeight: 'normal', + textAlign: 'tie-text-align-left', + underline: false +}; +var DBCLICK_TIME = 500; +/** + * Text + * @class Text + * @param {Graphics} graphics - Graphics instance + * @extends {Component} + * @ignore + */ + +var text_Text = /*#__PURE__*/function (_Component) { + _inherits(Text, _Component); + + var _super = component_text_createSuper(Text); + + function Text(graphics) { + var _context, _context2, _context3, _context4, _context5; + + var _this; + + _classCallCheck(this, Text); + + _this = _super.call(this, componentNames.TEXT, graphics); + /** + * Default text style + * @type {Object} + */ + + _this._defaultStyles = defaultStyles; + /** + * Selected state + * @type {boolean} + */ + + _this._isSelected = false; + /** + * Selected text object + * @type {Object} + */ + + _this._selectedObj = {}; + /** + * Editing text object + * @type {Object} + */ + + _this._editingObj = {}; + /** + * Listeners for fabric event + * @type {Object} + */ + + _this._listeners = { + mousedown: bind_default()(_context = _this._onFabricMouseDown).call(_context, _assertThisInitialized(_this)), + select: bind_default()(_context2 = _this._onFabricSelect).call(_context2, _assertThisInitialized(_this)), + selectClear: bind_default()(_context3 = _this._onFabricSelectClear).call(_context3, _assertThisInitialized(_this)), + scaling: bind_default()(_context4 = _this._onFabricScaling).call(_context4, _assertThisInitialized(_this)), + textChanged: bind_default()(_context5 = _this._onFabricTextChanged).call(_context5, _assertThisInitialized(_this)) + }; + /** + * Textarea element for editing + * @type {HTMLElement} + */ + + _this._textarea = null; + /** + * Ratio of current canvas + * @type {number} + */ + + _this._ratio = 1; + /** + * Last click time + * @type {Date} + */ + + _this._lastClickTime = new Date().getTime(); + /** + * Text object infos before editing + * @type {Object} + */ + + _this._editingObjInfos = {}; + /** + * Previous state of editing + * @type {boolean} + */ + + _this.isPrevEditing = false; + return _this; + } + /** + * Start input text mode + */ + + + _createClass(Text, [{ + key: "start", + value: function start() { + var _this2 = this; + + var canvas = this.getCanvas(); + canvas.selection = false; + canvas.defaultCursor = 'text'; + canvas.on({ + 'mouse:down': this._listeners.mousedown, + 'selection:created': this._listeners.select, + 'selection:updated': this._listeners.select, + 'before:selection:cleared': this._listeners.selectClear, + 'object:scaling': this._listeners.scaling, + 'text:changed': this._listeners.textChanged + }); + canvas.forEachObject(function (obj) { + if (obj.type === 'i-text') { + _this2.adjustOriginPosition(obj, 'start'); + } + }); + this.setCanvasRatio(); + } + /** + * End input text mode + */ + + }, { + key: "end", + value: function end() { + var _this3 = this; + + var canvas = this.getCanvas(); + canvas.selection = true; + canvas.defaultCursor = 'default'; + canvas.forEachObject(function (obj) { + if (obj.type === 'i-text') { + if (obj.text === '') { + canvas.remove(obj); + } else { + _this3.adjustOriginPosition(obj, 'end'); + } + } + }); + canvas.off({ + 'mouse:down': this._listeners.mousedown, + 'selection:created': this._listeners.select, + 'selection:updated': this._listeners.select, + 'before:selection:cleared': this._listeners.selectClear, + 'object:selected': this._listeners.select, + 'object:scaling': this._listeners.scaling, + 'text:changed': this._listeners.textChanged + }); + } + /** + * Adjust the origin position + * @param {fabric.Object} text - text object + * @param {string} editStatus - 'start' or 'end' + */ + + }, { + key: "adjustOriginPosition", + value: function adjustOriginPosition(text, editStatus) { + var originX = 'center', + originY = 'center'; + + if (editStatus === 'start') { + originX = 'left'; + originY = 'top'; + } + + var _text$getPointByOrigi = text.getPointByOrigin(originX, originY), + left = _text$getPointByOrigi.x, + top = _text$getPointByOrigi.y; + + text.set({ + left: left, + top: top, + originX: originX, + originY: originY + }); + text.setCoords(); + } + /** + * Add new text on canvas image + * @param {string} text - Initial input text + * @param {Object} options - Options for generating text + * @param {Object} [options.styles] Initial styles + * @param {string} [options.styles.fill] Color + * @param {string} [options.styles.fontFamily] Font type for text + * @param {number} [options.styles.fontSize] Size + * @param {string} [options.styles.fontStyle] Type of inclination (normal / italic) + * @param {string} [options.styles.fontWeight] Type of thicker or thinner looking (normal / bold) + * @param {string} [options.styles.textAlign] Type of text align (left / center / right) + * @param {string} [options.styles.textDecoration] Type of line (underline / line-through / overline) + * @param {{x: number, y: number}} [options.position] - Initial position + * @returns {Promise} + */ + + }, { + key: "add", + value: function add(text, options) { + var _this4 = this; + + return new (promise_default())(function (resolve) { + var _context6; + + var canvas = _this4.getCanvas(); + + var newText = null; + var selectionStyle = fObjectOptions.SELECTION_STYLE; + var styles = _this4._defaultStyles; + + _this4._setInitPos(options.position); + + if (options.styles) { + styles = external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().extend(styles, options.styles); + } + + if (!external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().isExisty(options.autofocus)) { + options.autofocus = true; + } + + newText = new fabric.fabric.IText(text, styles); + selectionStyle = external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().extend({}, selectionStyle, { + originX: 'left', + originY: 'top' + }); + newText.set(selectionStyle); + newText.on({ + mouseup: bind_default()(_context6 = _this4._onFabricMouseUp).call(_context6, _this4) + }); + canvas.add(newText); + + if (options.autofocus) { + newText.enterEditing(); + newText.selectAll(); + } + + if (!canvas.getActiveObject()) { + canvas.setActiveObject(newText); + } + + _this4.isPrevEditing = true; + resolve(_this4.graphics.createObjectProperties(newText)); + }); + } + /** + * Change text of activate object on canvas image + * @param {Object} activeObj - Current selected text object + * @param {string} text - Changed text + * @returns {Promise} + */ + + }, { + key: "change", + value: function change(activeObj, text) { + var _this5 = this; + + return new (promise_default())(function (resolve) { + activeObj.set('text', text); + + _this5.getCanvas().renderAll(); + + resolve(); + }); + } + /** + * Set style + * @param {Object} activeObj - Current selected text object + * @param {Object} styleObj - Initial styles + * @param {string} [styleObj.fill] Color + * @param {string} [styleObj.fontFamily] Font type for text + * @param {number} [styleObj.fontSize] Size + * @param {string} [styleObj.fontStyle] Type of inclination (normal / italic) + * @param {string} [styleObj.fontWeight] Type of thicker or thinner looking (normal / bold) + * @param {string} [styleObj.textAlign] Type of text align (left / center / right) + * @param {string} [styleObj.textDecoration] Type of line (underline / line-through / overline) + * @returns {Promise} + */ + + }, { + key: "setStyle", + value: function setStyle(activeObj, styleObj) { + var _this6 = this; + + return new (promise_default())(function (resolve) { + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), styleObj, function (val, key) { + if (activeObj[key] === val && key !== 'fontSize') { + styleObj[key] = resetStyles[key] || ''; + } + }, _this6); + + if ('textDecoration' in styleObj) { + external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().extend(styleObj, _this6._getTextDecorationAdaptObject(styleObj.textDecoration)); + } + + activeObj.set(styleObj); + + _this6.getCanvas().renderAll(); + + resolve(); + }); + } + /** + * Get the text + * @param {Object} activeObj - Current selected text object + * @returns {String} text + */ + + }, { + key: "getText", + value: function getText(activeObj) { + return activeObj.text; + } + /** + * Set infos of the current selected object + * @param {fabric.Text} obj - Current selected text object + * @param {boolean} state - State of selecting + */ + + }, { + key: "setSelectedInfo", + value: function setSelectedInfo(obj, state) { + this._selectedObj = obj; + this._isSelected = state; + } + /** + * Whether object is selected or not + * @returns {boolean} State of selecting + */ + + }, { + key: "isSelected", + value: function isSelected() { + return this._isSelected; + } + /** + * Get current selected text object + * @returns {fabric.Text} Current selected text object + */ + + }, { + key: "getSelectedObj", + value: function getSelectedObj() { + return this._selectedObj; + } + /** + * Set ratio value of canvas + */ + + }, { + key: "setCanvasRatio", + value: function setCanvasRatio() { + var canvasElement = this.getCanvasElement(); + + var cssWidth = parse_int_default()(canvasElement.style.maxWidth, 10); + + var originWidth = canvasElement.width; + this._ratio = originWidth / cssWidth; + } + /** + * Get ratio value of canvas + * @returns {number} Ratio value + */ + + }, { + key: "getCanvasRatio", + value: function getCanvasRatio() { + return this._ratio; + } + /** + * Get text decoration adapt object + * @param {string} textDecoration - text decoration option string + * @returns {object} adapt object for override + */ + + }, { + key: "_getTextDecorationAdaptObject", + value: function _getTextDecorationAdaptObject(textDecoration) { + return { + underline: textDecoration === 'underline', + linethrough: textDecoration === 'line-through', + overline: textDecoration === 'overline' + }; + } + /** + * Set initial position on canvas image + * @param {{x: number, y: number}} [position] - Selected position + * @private + */ + + }, { + key: "_setInitPos", + value: function _setInitPos(position) { + position = position || this.getCanvasImage().getCenterPoint(); + this._defaultStyles.left = position.x; + this._defaultStyles.top = position.y; + } + /** + * Input event handler + * @private + */ + + }, { + key: "_onInput", + value: function _onInput() { + var ratio = this.getCanvasRatio(); + var obj = this._editingObj; + var textareaStyle = this._textarea.style; + textareaStyle.width = "".concat(Math.ceil(obj.width / ratio), "px"); + textareaStyle.height = "".concat(Math.ceil(obj.height / ratio), "px"); + } + /** + * Keydown event handler + * @private + */ + + }, { + key: "_onKeyDown", + value: function _onKeyDown() { + var _this7 = this; + + var ratio = this.getCanvasRatio(); + var obj = this._editingObj; + var textareaStyle = this._textarea.style; + + set_timeout_default()(function () { + obj.text(_this7._textarea.value); + textareaStyle.width = "".concat(Math.ceil(obj.width / ratio), "px"); + textareaStyle.height = "".concat(Math.ceil(obj.height / ratio), "px"); + }, 0); + } + /** + * Blur event handler + * @private + */ + + }, { + key: "_onBlur", + value: function _onBlur() { + var ratio = this.getCanvasRatio(); + var editingObj = this._editingObj; + var editingObjInfos = this._editingObjInfos; + var textContent = this._textarea.value; + var transWidth = editingObj.width / ratio - editingObjInfos.width / ratio; + var transHeight = editingObj.height / ratio - editingObjInfos.height / ratio; + + if (ratio === 1) { + transWidth /= 2; + transHeight /= 2; + } + + this._textarea.style.display = 'none'; + editingObj.set({ + left: editingObjInfos.left + transWidth, + top: editingObjInfos.top + transHeight + }); + + if (textContent.length) { + this.getCanvas().add(editingObj); + var params = { + id: external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().stamp(editingObj), + type: editingObj.type, + text: textContent + }; + this.fire(eventNames.TEXT_CHANGED, params); + } + } + /** + * Scroll event handler + * @private + */ + + }, { + key: "_onScroll", + value: function _onScroll() { + this._textarea.scrollLeft = 0; + this._textarea.scrollTop = 0; + } + /** + * Fabric scaling event handler + * @param {fabric.Event} fEvent - Current scaling event on selected object + * @private + */ + + }, { + key: "_onFabricScaling", + value: function _onFabricScaling(fEvent) { + var obj = fEvent.target; + obj.fontSize = obj.fontSize * obj.scaleY; + obj.scaleX = 1; + obj.scaleY = 1; + } + /** + * textChanged event handler + * @param {{target: fabric.Object}} props - changed text object + * @private + */ + + }, { + key: "_onFabricTextChanged", + value: function _onFabricTextChanged(props) { + this.fire(eventNames.TEXT_CHANGED, props.target); + } + /** + * onSelectClear handler in fabric canvas + * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event + * @private + */ + + }, { + key: "_onFabricSelectClear", + value: function _onFabricSelectClear(fEvent) { + var obj = this.getSelectedObj(); + this.isPrevEditing = true; + this.setSelectedInfo(fEvent.target, false); + + if (obj) { + // obj is empty object at initial time, will be set fabric object + if (obj.text === '') { + this.getCanvas().remove(obj); + } + } + } + /** + * onSelect handler in fabric canvas + * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event + * @private + */ + + }, { + key: "_onFabricSelect", + value: function _onFabricSelect(fEvent) { + this.isPrevEditing = true; + this.setSelectedInfo(fEvent.target, true); + } + /** + * Fabric 'mousedown' event handler + * @param {fabric.Event} fEvent - Current mousedown event on selected object + * @private + */ + + }, { + key: "_onFabricMouseDown", + value: function _onFabricMouseDown(fEvent) { + var obj = fEvent.target; + + if (obj && !obj.isType('text')) { + return; + } + + if (this.isPrevEditing) { + this.isPrevEditing = false; + return; + } + + this._fireAddText(fEvent); + } + /** + * Fire 'addText' event if object is not selected. + * @param {fabric.Event} fEvent - Current mousedown event on selected object + * @private + */ + + }, { + key: "_fireAddText", + value: function _fireAddText(fEvent) { + var obj = fEvent.target; + var e = fEvent.e || {}; + var originPointer = this.getCanvas().getPointer(e); + + if (!obj) { + this.fire(eventNames.ADD_TEXT, { + originPosition: { + x: originPointer.x, + y: originPointer.y + }, + clientPosition: { + x: e.clientX || 0, + y: e.clientY || 0 + } + }); + } + } + /** + * Fabric mouseup event handler + * @param {fabric.Event} fEvent - Current mousedown event on selected object + * @private + */ + + }, { + key: "_onFabricMouseUp", + value: function _onFabricMouseUp(fEvent) { + var target = fEvent.target; + var newClickTime = new Date().getTime(); + + if (this._isDoubleClick(newClickTime) && !target.isEditing) { + target.enterEditing(); + } + + if (target.isEditing) { + this.fire(eventNames.TEXT_EDITING); // fire editing text event + } + + this._lastClickTime = newClickTime; + } + /** + * Get state of firing double click event + * @param {Date} newClickTime - Current clicked time + * @returns {boolean} Whether double clicked or not + * @private + */ + + }, { + key: "_isDoubleClick", + value: function _isDoubleClick(newClickTime) { + return newClickTime - this._lastClickTime < DBCLICK_TIME; + } + }]); + + return Text; +}(component); + +/* harmony default export */ var component_text = (text_Text); +;// CONCATENATED MODULE: ./src/js/component/icon.js + + + + + + + + + + + + +function component_icon_createSuper(Derived) { var hasNativeReflectConstruct = component_icon_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function component_icon_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +/** + * @author NHN. FE Development Team + * @fileoverview Add icon module + */ + + + + +var pathMap = { + arrow: 'M 0 90 H 105 V 120 L 160 60 L 105 0 V 30 H 0 Z', + cancel: 'M 0 30 L 30 60 L 0 90 L 30 120 L 60 90 L 90 120 L 120 90 ' + 'L 90 60 L 120 30 L 90 0 L 60 30 L 30 0 Z' +}; +/** + * Icon + * @class Icon + * @param {Graphics} graphics - Graphics instance + * @extends {Component} + * @ignore + */ + +var icon_Icon = /*#__PURE__*/function (_Component) { + _inherits(Icon, _Component); + + var _super = component_icon_createSuper(Icon); + + function Icon(graphics) { + var _context, _context2, _context3; + + var _this; + + _classCallCheck(this, Icon); + + _this = _super.call(this, componentNames.ICON, graphics); + /** + * Default icon color + * @type {string} + */ + + _this._oColor = '#000000'; + /** + * Path value of each icon type + * @type {Object} + */ + + _this._pathMap = pathMap; + /** + * Type of the drawing icon + * @type {string} + * @private + */ + + _this._type = null; + /** + * Color of the drawing icon + * @type {string} + * @private + */ + + _this._iconColor = null; + /** + * Event handler list + * @type {Object} + * @private + */ + + _this._handlers = { + mousedown: bind_default()(_context = _this._onFabricMouseDown).call(_context, _assertThisInitialized(_this)), + mousemove: bind_default()(_context2 = _this._onFabricMouseMove).call(_context2, _assertThisInitialized(_this)), + mouseup: bind_default()(_context3 = _this._onFabricMouseUp).call(_context3, _assertThisInitialized(_this)) + }; + return _this; + } + /** + * Set states of the current drawing shape + * @ignore + * @param {string} type - Icon type ('arrow', 'cancel', custom icon name) + * @param {string} iconColor - Icon foreground color + */ + + + _createClass(Icon, [{ + key: "setStates", + value: function setStates(type, iconColor) { + this._type = type; + this._iconColor = iconColor; + } + /** + * Start to draw the icon on canvas + * @ignore + */ + + }, { + key: "start", + value: function start() { + var canvas = this.getCanvas(); + canvas.selection = false; + canvas.on('mouse:down', this._handlers.mousedown); + } + /** + * End to draw the icon on canvas + * @ignore + */ + + }, { + key: "end", + value: function end() { + var canvas = this.getCanvas(); + canvas.selection = true; + canvas.off({ + 'mouse:down': this._handlers.mousedown + }); + } + /** + * Add icon + * @param {string} type - Icon type + * @param {Object} options - Icon options + * @param {string} [options.fill] - Icon foreground color + * @param {string} [options.left] - Icon x position + * @param {string} [options.top] - Icon y position + * @returns {Promise} + */ + + }, { + key: "add", + value: function add(type, options) { + var _this2 = this; + + return new (promise_default())(function (resolve, reject) { + var canvas = _this2.getCanvas(); + + var path = _this2._pathMap[type]; + var selectionStyle = fObjectOptions.SELECTION_STYLE; + var icon = path ? _this2._createIcon(path) : null; + _this2._icon = icon; + + if (!icon) { + reject(rejectMessages.invalidParameters); + } + + icon.set(external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().extend({ + type: 'icon', + fill: _this2._oColor + }, selectionStyle, options, _this2.graphics.controlStyle)); + canvas.add(icon).setActiveObject(icon); + resolve(_this2.graphics.createObjectProperties(icon)); + }); + } + /** + * Register icon paths + * @param {{key: string, value: string}} pathInfos - Path infos + */ + + }, { + key: "registerPaths", + value: function registerPaths(pathInfos) { + var _this3 = this; + + for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), pathInfos, function (path, type) { + _this3._pathMap[type] = path; + }, this); + } + /** + * Set icon object color + * @param {string} color - Color to set + * @param {fabric.Path}[obj] - Current activated path object + */ + + }, { + key: "setColor", + value: function setColor(color, obj) { + this._oColor = color; + + if (obj && obj.get('type') === 'icon') { + obj.set({ + fill: this._oColor + }); + this.getCanvas().renderAll(); + } + } + /** + * Get icon color + * @param {fabric.Path}[obj] - Current activated path object + * @returns {string} color + */ + + }, { + key: "getColor", + value: function getColor(obj) { + return fill_default()(obj); + } + /** + * Create icon object + * @param {string} path - Path value to create icon + * @returns {fabric.Path} Path object + */ + + }, { + key: "_createIcon", + value: function _createIcon(path) { + return new fabric.fabric.Path(path); + } + /** + * MouseDown event handler on canvas + * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object + * @private + */ + + }, { + key: "_onFabricMouseDown", + value: function _onFabricMouseDown(fEvent) { + var _this4 = this; + + var canvas = this.getCanvas(); + this._startPoint = canvas.getPointer(fEvent.e); + var _this$_startPoint = this._startPoint, + left = _this$_startPoint.x, + top = _this$_startPoint.y; + this.add(this._type, { + left: left, + top: top, + fill: this._iconColor + }).then(function () { + _this4.fire(eventNames.ADD_OBJECT, _this4.graphics.createObjectProperties(_this4._icon)); + + canvas.on('mouse:move', _this4._handlers.mousemove); + canvas.on('mouse:up', _this4._handlers.mouseup); + }); + } + /** + * MouseMove event handler on canvas + * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object + * @private + */ + + }, { + key: "_onFabricMouseMove", + value: function _onFabricMouseMove(fEvent) { + var canvas = this.getCanvas(); + + if (!this._icon) { + return; + } + + var moveOriginPointer = canvas.getPointer(fEvent.e); + var scaleX = (moveOriginPointer.x - this._startPoint.x) / this._icon.width; + var scaleY = (moveOriginPointer.y - this._startPoint.y) / this._icon.height; + + this._icon.set({ + scaleX: Math.abs(scaleX * 2), + scaleY: Math.abs(scaleY * 2) + }); + + this._icon.setCoords(); + + canvas.renderAll(); + } + /** + * MouseUp event handler on canvas + * @private + */ + + }, { + key: "_onFabricMouseUp", + value: function _onFabricMouseUp() { + var canvas = this.getCanvas(); + this.fire(eventNames.OBJECT_ADDED, this.graphics.createObjectProperties(this._icon)); + this._icon = null; + canvas.off('mouse:down', this._handlers.mousedown); + canvas.off('mouse:move', this._handlers.mousemove); + canvas.off('mouse:up', this._handlers.mouseup); + } + }]); + + return Icon; +}(component); + +/* harmony default export */ var component_icon = (icon_Icon); +;// CONCATENATED MODULE: ./src/js/extension/mask.js +/** + * @author NHN. FE Development Team + * @fileoverview Mask extending fabric.Image.filters.Mask + */ + +/** + * Mask object + * @class Mask + * @extends {fabric.Image.filters.BlendImage} + * @ignore + */ + +var mask_Mask = fabric.fabric.util.createClass(fabric.fabric.Image.filters.BlendImage, +/** @lends Mask.prototype */ +{ + /** + * Apply filter to canvas element + * @param {Object} pipelineState - Canvas element to apply filter + * @override + */ + applyTo: function applyTo(pipelineState) { + if (!this.mask) { + return; + } + + var canvas = pipelineState.canvasEl; + var width = canvas.width, + height = canvas.height; + + var maskCanvasEl = this._createCanvasOfMask(width, height); + + var ctx = canvas.getContext('2d'); + var maskCtx = maskCanvasEl.getContext('2d'); + var imageData = ctx.getImageData(0, 0, width, height); + + this._drawMask(maskCtx, canvas, ctx); + + this._mapData(maskCtx, imageData, width, height); + + pipelineState.imageData = imageData; + }, + + /** + * Create canvas of mask image + * @param {number} width - Width of main canvas + * @param {number} height - Height of main canvas + * @returns {HTMLElement} Canvas element + * @private + */ + _createCanvasOfMask: function _createCanvasOfMask(width, height) { + var maskCanvasEl = fabric.fabric.util.createCanvasElement(); + maskCanvasEl.width = width; + maskCanvasEl.height = height; + return maskCanvasEl; + }, + + /** + * Draw mask image on canvas element + * @param {Object} maskCtx - Context of mask canvas + * @private + */ + _drawMask: function _drawMask(maskCtx) { + var mask = this.mask; + var maskImg = mask.getElement(); + var angle = mask.angle, + left = mask.left, + scaleX = mask.scaleX, + scaleY = mask.scaleY, + top = mask.top; + maskCtx.save(); + maskCtx.translate(left, top); + maskCtx.rotate(angle * Math.PI / 180); + maskCtx.scale(scaleX, scaleY); + maskCtx.drawImage(maskImg, -maskImg.width / 2, -maskImg.height / 2); + maskCtx.restore(); + }, + + /** + * Map mask image data to source image data + * @param {Object} maskCtx - Context of mask canvas + * @param {Object} imageData - Data of source image + * @param {number} width - Width of main canvas + * @param {number} height - Height of main canvas + * @private + */ + _mapData: function _mapData(maskCtx, imageData, width, height) { + var data = imageData.data, + imgHeight = imageData.height, + imgWidth = imageData.width; + var sourceData = data; + var len = imgWidth * imgHeight * 4; + var maskData = maskCtx.getImageData(0, 0, width, height).data; + + for (var i = 0; i < len; i += 4) { + sourceData[i + 3] = maskData[i]; // adjust value of alpha data + } + } +}); +/* harmony default export */ var extension_mask = (mask_Mask); +;// CONCATENATED MODULE: ./src/js/extension/sharpen.js +/** + * @author NHN. FE Development Team + * @fileoverview Sharpen extending fabric.Image.filters.Convolute + */ + +/** + * Sharpen object + * @class Sharpen + * @extends {fabric.Image.filters.Convolute} + * @ignore + */ + +var Sharpen = fabric.fabric.util.createClass(fabric.fabric.Image.filters.Convolute, +/** @lends Convolute.prototype */ +{ + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Sharpen', + + /** + * constructor + * @override + */ + initialize: function initialize() { + this.matrix = [0, -1, 0, -1, 5, -1, 0, -1, 0]; + } +}); +/* harmony default export */ var sharpen = (Sharpen); +;// CONCATENATED MODULE: ./src/js/extension/emboss.js +/** + * @author NHN. FE Development Team + * @fileoverview Emboss extending fabric.Image.filters.Convolute + */ + +/** + * Emboss object + * @class Emboss + * @extends {fabric.Image.filters.Convolute} + * @ignore + */ + +var Emboss = fabric.fabric.util.createClass(fabric.fabric.Image.filters.Convolute, +/** @lends Convolute.prototype */ +{ + /** + * Filter type + * @param {String} type + * @default + */ + type: 'Emboss', + + /** + * constructor + * @override + */ + initialize: function initialize() { + this.matrix = [1, 1, 1, 1, 0.7, -1, -1, -1, -1]; + } +}); +/* harmony default export */ var emboss = (Emboss); +;// CONCATENATED MODULE: ./src/js/extension/colorFilter.js +/** + * @author NHN. FE Development Team + * @fileoverview ColorFilter extending fabric.Image.filters.BaseFilter + */ + +/** + * ColorFilter object + * @class ColorFilter + * @extends {fabric.Image.filters.BaseFilter} + * @ignore + */ + +var ColorFilter = fabric.fabric.util.createClass(fabric.fabric.Image.filters.BaseFilter, +/** @lends BaseFilter.prototype */ +{ + /** + * Filter type + * @param {String} type + * @default + */ + type: 'ColorFilter', + + /** + * Constructor + * @member fabric.Image.filters.ColorFilter.prototype + * @param {Object} [options] Options object + * @param {Number} [options.color='#FFFFFF'] Value of color (0...255) + * @param {Number} [options.threshold=45] Value of threshold (0...255) + * @override + */ + initialize: function initialize(options) { + if (!options) { + options = {}; + } + + this.color = options.color || '#FFFFFF'; + this.threshold = options.threshold || 45; + this.x = options.x || null; + this.y = options.y || null; + }, + + /** + * Applies filter to canvas element + * @param {Object} canvas Canvas object passed by fabric + */ + // eslint-disable-next-line complexity + applyTo: function applyTo(canvas) { + var canvasEl = canvas.canvasEl; + var context = canvasEl.getContext('2d'); + var imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height); + var data = imageData.data; + var threshold = this.threshold; + var filterColor = fabric.fabric.Color.sourceFromHex(this.color); + var i, len; + + if (this.x && this.y) { + filterColor = this._getColor(imageData, this.x, this.y); + } + + for (i = 0, len = data.length; i < len; i += 4) { + if (this._isOutsideThreshold(data[i], filterColor[0], threshold) || this._isOutsideThreshold(data[i + 1], filterColor[1], threshold) || this._isOutsideThreshold(data[i + 2], filterColor[2], threshold)) { + continue; + } + + data[i] = data[i + 1] = data[i + 2] = data[i + 3] = 0; + } + + context.putImageData(imageData, 0, 0); + }, + + /** + * Check color if it is within threshold + * @param {Number} color1 source color + * @param {Number} color2 filtering color + * @param {Number} threshold threshold + * @returns {boolean} true if within threshold or false + */ + _isOutsideThreshold: function _isOutsideThreshold(color1, color2, threshold) { + var diff = color1 - color2; + return Math.abs(diff) > threshold; + }, + + /** + * Get color at (x, y) + * @param {Object} imageData of canvas + * @param {Number} x left position + * @param {Number} y top position + * @returns {Array} color array + */ + _getColor: function _getColor(imageData, x, y) { + var color = [0, 0, 0, 0]; + var data = imageData.data, + width = imageData.width; + var bytes = 4; + var position = (width * y + x) * bytes; + color[0] = data[position]; + color[1] = data[position + 1]; + color[2] = data[position + 2]; + color[3] = data[position + 3]; + return color; + } +}); +/* harmony default export */ var colorFilter = (ColorFilter); +;// CONCATENATED MODULE: ./src/js/component/filter.js + + + + + + + + + +function component_filter_createSuper(Derived) { var hasNativeReflectConstruct = component_filter_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function component_filter_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +/** + * @author NHN. FE Development Team + * @fileoverview Add filter module + */ + + + + + + + + +var filters = fabric.fabric.Image.filters; +filters.Mask = extension_mask; +filters.Sharpen = sharpen; +filters.Emboss = emboss; +filters.ColorFilter = colorFilter; +/** + * Filter + * @class Filter + * @param {Graphics} graphics - Graphics instance + * @extends {Component} + * @ignore + */ + +var filter_Filter = /*#__PURE__*/function (_Component) { + _inherits(Filter, _Component); + + var _super = component_filter_createSuper(Filter); + + function Filter(graphics) { + _classCallCheck(this, Filter); + + return _super.call(this, componentNames.FILTER, graphics); + } + /** + * Add filter to source image (a specific filter is added on fabric.js) + * @param {string} type - Filter type + * @param {Object} [options] - Options of filter + * @returns {Promise} + */ + + + _createClass(Filter, [{ + key: "add", + value: function add(type, options) { + var _this = this; + + return new (promise_default())(function (resolve, reject) { + var sourceImg = _this._getSourceImage(); + + var canvas = _this.getCanvas(); + + var imgFilter = _this._getFilter(sourceImg, type); + + if (!imgFilter) { + imgFilter = _this._createFilter(sourceImg, type, options); + } + + if (!imgFilter) { + reject(rejectMessages.invalidParameters); + } + + _this._changeFilterValues(imgFilter, options); + + _this._apply(sourceImg, function () { + canvas.renderAll(); + resolve({ + type: type, + action: 'add', + options: options + }); + }); + }); + } + /** + * Remove filter to source image + * @param {string} type - Filter type + * @returns {Promise} + */ + + }, { + key: "remove", + value: function remove(type) { + var _this2 = this; + + return new (promise_default())(function (resolve, reject) { + var sourceImg = _this2._getSourceImage(); + + var canvas = _this2.getCanvas(); + + var options = _this2.getOptions(type); + + if (!sourceImg.filters.length) { + reject(rejectMessages.unsupportedOperation); + } + + _this2._removeFilter(sourceImg, type); + + _this2._apply(sourceImg, function () { + canvas.renderAll(); + resolve({ + type: type, + action: 'remove', + options: options + }); + }); + }); + } + /** + * Whether this has the filter or not + * @param {string} type - Filter type + * @returns {boolean} true if it has the filter + */ + + }, { + key: "hasFilter", + value: function hasFilter(type) { + return !!this._getFilter(this._getSourceImage(), type); + } + /** + * Get a filter options + * @param {string} type - Filter type + * @returns {Object} filter options or null if there is no that filter + */ + + }, { + key: "getOptions", + value: function getOptions(type) { + var sourceImg = this._getSourceImage(); + + var imgFilter = this._getFilter(sourceImg, type); + + if (!imgFilter) { + return null; + } + + return (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend)({}, imgFilter.options); + } + /** + * Change filter values + * @param {Object} imgFilter object of filter + * @param {Object} options object + * @private + */ + + }, { + key: "_changeFilterValues", + value: function _changeFilterValues(imgFilter, options) { + (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.forEach)(options, function (value, key) { + if (!(0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.isUndefined)(imgFilter[key])) { + imgFilter[key] = value; + } + }); + (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.forEach)(imgFilter.options, function (value, key) { + if (!(0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.isUndefined)(options[key])) { + imgFilter.options[key] = options[key]; + } + }); + } + /** + * Apply filter + * @param {fabric.Image} sourceImg - Source image to apply filter + * @param {function} callback - Executed function after applying filter + * @private + */ + + }, { + key: "_apply", + value: function _apply(sourceImg, callback) { + sourceImg.filters.push(); + var result = sourceImg.applyFilters(); + + if (result) { + callback(); + } + } + /** + * Get source image on canvas + * @returns {fabric.Image} Current source image on canvas + * @private + */ + + }, { + key: "_getSourceImage", + value: function _getSourceImage() { + return this.getCanvasImage(); + } + /** + * Create filter instance + * @param {fabric.Image} sourceImg - Source image to apply filter + * @param {string} type - Filter type + * @param {Object} [options] - Options of filter + * @returns {Object} Fabric object of filter + * @private + */ + + }, { + key: "_createFilter", + value: function _createFilter(sourceImg, type, options) { + var filterObj; // capitalize first letter for matching with fabric image filter name + + var fabricType = this._getFabricFilterType(type); + + var ImageFilter = fabric.fabric.Image.filters[fabricType]; + + if (ImageFilter) { + filterObj = new ImageFilter(options); + filterObj.options = options; + sourceImg.filters.push(filterObj); + } + + return filterObj; + } + /** + * Get applied filter instance + * @param {fabric.Image} sourceImg - Source image to apply filter + * @param {string} type - Filter type + * @returns {Object} Fabric object of filter + * @private + */ + + }, { + key: "_getFilter", + value: function _getFilter(sourceImg, type) { + var imgFilter = null; + + if (sourceImg) { + var fabricType = this._getFabricFilterType(type); + + var length = sourceImg.filters.length; + var item, i; + + for (i = 0; i < length; i += 1) { + item = sourceImg.filters[i]; + + if (item.type === fabricType) { + imgFilter = item; + break; + } + } + } + + return imgFilter; + } + /** + * Remove applied filter instance + * @param {fabric.Image} sourceImg - Source image to apply filter + * @param {string} type - Filter type + * @private + */ + + }, { + key: "_removeFilter", + value: function _removeFilter(sourceImg, type) { + var fabricType = this._getFabricFilterType(type); + + sourceImg.filters = (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.filter)(sourceImg.filters, function (value) { + return value.type !== fabricType; + }); + } + /** + * Change filter class name to fabric's, especially capitalizing first letter + * @param {string} type - Filter type + * @example + * 'grayscale' -> 'Grayscale' + * @returns {string} Fabric filter class name + */ + + }, { + key: "_getFabricFilterType", + value: function _getFabricFilterType(type) { + return type.charAt(0).toUpperCase() + slice_default()(type).call(type, 1); + } + }]); + + return Filter; +}(component); + +/* harmony default export */ var component_filter = (filter_Filter); +// EXTERNAL MODULE: ./src/js/helper/shapeResizeHelper.js +var shapeResizeHelper = __webpack_require__(1801); +var shapeResizeHelper_default = /*#__PURE__*/__webpack_require__.n(shapeResizeHelper); +;// CONCATENATED MODULE: ./src/js/helper/shapeFilterFillHelper.js + + + + + + +/** + * @author NHN. FE Development Team + * @fileoverview Shape resize helper + */ + + + + +var FILTER_OPTION_MAP = { + pixelate: 'blocksize', + blur: 'blur' +}; +var POSITION_DIMENSION_MAP = { + x: 'width', + y: 'height' +}; +var FILTER_NAME_VALUE_MAP = flipObject(FILTER_OPTION_MAP); +/** + * Cached canvas image element for fill image + * @type {boolean} + * @private + */ + +var cachedCanvasImageElement = null; +/** + * Get background image of fill + * @param {fabric.Object} shapeObj - Shape object + * @returns {fabric.Image} + * @private + */ + +function getFillImageFromShape(shapeObj) { + var _getCustomProperty = getCustomProperty(shapeObj, 'patternSourceCanvas'), + patternSourceCanvas = _getCustomProperty.patternSourceCanvas; + + var _patternSourceCanvas$ = patternSourceCanvas.getObjects(), + _patternSourceCanvas$2 = _slicedToArray(_patternSourceCanvas$, 1), + fillImage = _patternSourceCanvas$2[0]; + + return fillImage; +} +/** + * Reset the image position in the filter type fill area. + * @param {fabric.Object} shapeObj - Shape object + * @private + */ + +function rePositionFilterTypeFillImage(shapeObj) { + var angle = shapeObj.angle, + flipX = shapeObj.flipX, + flipY = shapeObj.flipY; + var fillImage = getFillImageFromShape(shapeObj); + var rotatedShapeCornerDimension = getRotatedDimension(shapeObj); + var right = rotatedShapeCornerDimension.right, + bottom = rotatedShapeCornerDimension.bottom; + var width = rotatedShapeCornerDimension.width, + height = rotatedShapeCornerDimension.height; + var diffLeft = (width - shapeObj.width) / 2; + var diffTop = (height - shapeObj.height) / 2; + var cropX = shapeObj.left - shapeObj.width / 2 - diffLeft; + var cropY = shapeObj.top - shapeObj.height / 2 - diffTop; + var left = width / 2 - diffLeft; + var top = height / 2 - diffTop; + var fillImageMaxSize = Math.max(width, height) + Math.max(diffLeft, diffTop); + + var _calculateFillImageDi = calculateFillImageDimensionOutsideCanvas({ + shapeObj: shapeObj, + left: left, + top: top, + width: width, + height: height, + cropX: cropX, + cropY: cropY, + flipX: flipX, + flipY: flipY, + right: right, + bottom: bottom + }); + + var _calculateFillImageDi2 = _slicedToArray(_calculateFillImageDi, 4); + + left = _calculateFillImageDi2[0]; + top = _calculateFillImageDi2[1]; + width = _calculateFillImageDi2[2]; + height = _calculateFillImageDi2[3]; + fillImage.set({ + angle: flipX === flipY ? -angle : angle, + left: left, + top: top, + width: width, + height: height, + cropX: cropX, + cropY: cropY, + flipX: flipX, + flipY: flipY + }); + setCustomProperty(fillImage, { + fillImageMaxSize: fillImageMaxSize + }); +} +/** + * Make filter option from fabric image + * @param {fabric.Image} imageObject - fabric image object + * @returns {object} + */ + +function makeFilterOptionFromFabricImage(imageObject) { + return (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.map)(imageObject.filters, function (filter) { + var _Object$keys = keys_default()(filter), + _Object$keys2 = _slicedToArray(_Object$keys, 1), + key = _Object$keys2[0]; + + return _defineProperty({}, FILTER_NAME_VALUE_MAP[key], filter[key]); + }); +} +/** + * Calculate fill image position and size for out of Canvas + * @param {Object} options - options for position dimension calculate + * @param {fabric.Object} shapeObj - shape object + * @param {number} left - original left position + * @param {number} top - original top position + * @param {number} width - image width + * @param {number} height - image height + * @param {number} cropX - image cropX + * @param {number} cropY - image cropY + * @param {boolean} flipX - shape flipX + * @param {boolean} flipY - shape flipY + * @returns {Object} + */ + +function calculateFillImageDimensionOutsideCanvas(_ref2) { + var shapeObj = _ref2.shapeObj, + left = _ref2.left, + top = _ref2.top, + width = _ref2.width, + height = _ref2.height, + cropX = _ref2.cropX, + cropY = _ref2.cropY, + flipX = _ref2.flipX, + flipY = _ref2.flipY, + right = _ref2.right, + bottom = _ref2.bottom; + + var overflowAreaPositionFixer = function overflowAreaPositionFixer(type, outDistance, imageLeft, imageTop) { + return calculateDistanceOverflowPart({ + type: type, + outDistance: outDistance, + shapeObj: shapeObj, + flipX: flipX, + flipY: flipY, + left: imageLeft, + top: imageTop + }); + }; + + var originalWidth = width, + originalHeight = height; + + var _calculateDimensionLe = calculateDimensionLeftTopEdge(overflowAreaPositionFixer, { + left: left, + top: top, + width: width, + height: height, + cropX: cropX, + cropY: cropY + }); + + var _calculateDimensionLe2 = _slicedToArray(_calculateDimensionLe, 4); + + left = _calculateDimensionLe2[0]; + top = _calculateDimensionLe2[1]; + width = _calculateDimensionLe2[2]; + height = _calculateDimensionLe2[3]; + + var _calculateDimensionRi = calculateDimensionRightBottomEdge(overflowAreaPositionFixer, { + left: left, + top: top, + insideCanvasRealImageWidth: width, + insideCanvasRealImageHeight: height, + right: right, + bottom: bottom, + cropX: cropX, + cropY: cropY, + originalWidth: originalWidth, + originalHeight: originalHeight + }); + + var _calculateDimensionRi2 = _slicedToArray(_calculateDimensionRi, 4); + + left = _calculateDimensionRi2[0]; + top = _calculateDimensionRi2[1]; + width = _calculateDimensionRi2[2]; + height = _calculateDimensionRi2[3]; + return [left, top, width, height]; +} +/** + * Calculate fill image position and size for for right bottom edge + * @param {Function} overflowAreaPositionFixer - position fixer + * @param {Object} options - options for position dimension calculate + * @param {fabric.Object} shapeObj - shape object + * @param {number} left - original left position + * @param {number} top - original top position + * @param {number} width - image width + * @param {number} height - image height + * @param {number} right - image right + * @param {number} bottom - image bottom + * @param {number} cropX - image cropX + * @param {number} cropY - image cropY + * @param {boolean} originalWidth - image original width + * @param {boolean} originalHeight - image original height + * @returns {Object} + */ + + +function calculateDimensionRightBottomEdge(overflowAreaPositionFixer, _ref3) { + var left = _ref3.left, + top = _ref3.top, + insideCanvasRealImageWidth = _ref3.insideCanvasRealImageWidth, + insideCanvasRealImageHeight = _ref3.insideCanvasRealImageHeight, + right = _ref3.right, + bottom = _ref3.bottom, + cropX = _ref3.cropX, + cropY = _ref3.cropY, + originalWidth = _ref3.originalWidth, + originalHeight = _ref3.originalHeight; + var width = insideCanvasRealImageWidth, + height = insideCanvasRealImageHeight; + var _cachedCanvasImageEle = cachedCanvasImageElement, + canvasWidth = _cachedCanvasImageEle.width, + canvasHeight = _cachedCanvasImageEle.height; + + if (right > canvasWidth && cropX > 0) { + width = originalWidth - Math.abs(right - canvasWidth); + } + + if (bottom > canvasHeight && cropY > 0) { + height = originalHeight - Math.abs(bottom - canvasHeight); + } + + var diff = { + x: (insideCanvasRealImageWidth - width) / 2, + y: (insideCanvasRealImageHeight - height) / 2 + }; + (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.forEach)(['x', 'y'], function (type) { + var cropDistance2 = diff[type]; + + if (cropDistance2 > 0) { + var _overflowAreaPosition = overflowAreaPositionFixer(type, cropDistance2, left, top); + + var _overflowAreaPosition2 = _slicedToArray(_overflowAreaPosition, 2); + + left = _overflowAreaPosition2[0]; + top = _overflowAreaPosition2[1]; + } + }); + return [left, top, width, height]; +} +/** + * Calculate fill image position and size for for left top + * @param {Function} overflowAreaPositionFixer - position fixer + * @param {Object} options - options for position dimension calculate + * @param {fabric.Object} shapeObj - shape object + * @param {number} left - original left position + * @param {number} top - original top position + * @param {number} width - image width + * @param {number} height - image height + * @param {number} cropX - image cropX + * @param {number} cropY - image cropY + * @returns {Object} + */ + + +function calculateDimensionLeftTopEdge(overflowAreaPositionFixer, _ref4) { + var left = _ref4.left, + top = _ref4.top, + width = _ref4.width, + height = _ref4.height, + cropX = _ref4.cropX, + cropY = _ref4.cropY; + var dimension = { + width: width, + height: height + }; + (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.forEach)(['x', 'y'], function (type) { + var cropDistance = type === 'x' ? cropX : cropY; + var compareSize = dimension[POSITION_DIMENSION_MAP[type]]; + var standardSize = cachedCanvasImageElement[POSITION_DIMENSION_MAP[type]]; + + if (compareSize > standardSize) { + var outDistance = (compareSize - standardSize) / 2; + dimension[POSITION_DIMENSION_MAP[type]] = standardSize; + + var _overflowAreaPosition3 = overflowAreaPositionFixer(type, outDistance, left, top); + + var _overflowAreaPosition4 = _slicedToArray(_overflowAreaPosition3, 2); + + left = _overflowAreaPosition4[0]; + top = _overflowAreaPosition4[1]; + } + + if (cropDistance < 0) { + var _overflowAreaPosition5 = overflowAreaPositionFixer(type, cropDistance, left, top); + + var _overflowAreaPosition6 = _slicedToArray(_overflowAreaPosition5, 2); + + left = _overflowAreaPosition6[0]; + top = _overflowAreaPosition6[1]; + } + }); + return [left, top, dimension.width, dimension.height]; +} +/** + * Make fill property of dynamic pattern type + * @param {fabric.Image} canvasImage - canvas background image + * @param {Array} filterOption - filter option + * @param {fabric.StaticCanvas} patternSourceCanvas - fabric static canvas + * @returns {Object} + */ + + +function makeFillPatternForFilter(canvasImage, filterOption, patternSourceCanvas) { + var copiedCanvasElement = getCachedCanvasImageElement(canvasImage); + var fillImage = makeFillImage(copiedCanvasElement, canvasImage.angle, filterOption); + patternSourceCanvas.add(fillImage); + var fabricProperty = { + fill: new fabric.fabric.Pattern({ + source: patternSourceCanvas.getElement(), + repeat: 'no-repeat' + }) + }; + setCustomProperty(fabricProperty, { + patternSourceCanvas: patternSourceCanvas + }); + return fabricProperty; +} +/** + * Reset fill pattern canvas + * @param {fabric.StaticCanvas} patternSourceCanvas - fabric static canvas + */ + +function resetFillPatternCanvas(patternSourceCanvas) { + var _patternSourceCanvas$3 = patternSourceCanvas.getObjects(), + _patternSourceCanvas$4 = _slicedToArray(_patternSourceCanvas$3, 1), + innerImage = _patternSourceCanvas$4[0]; + + var _getCustomProperty2 = getCustomProperty(innerImage, 'fillImageMaxSize'), + fillImageMaxSize = _getCustomProperty2.fillImageMaxSize; + + fillImageMaxSize = Math.max(1, fillImageMaxSize); + patternSourceCanvas.setDimensions({ + width: fillImageMaxSize, + height: fillImageMaxSize + }); + patternSourceCanvas.renderAll(); +} +/** + * Remake filter pattern image source + * @param {fabric.Object} shapeObj - Shape object + * @param {fabric.Image} canvasImage - canvas background image + */ + +function reMakePatternImageSource(shapeObj, canvasImage) { + var _getCustomProperty3 = getCustomProperty(shapeObj, 'patternSourceCanvas'), + patternSourceCanvas = _getCustomProperty3.patternSourceCanvas; + + var _patternSourceCanvas$5 = patternSourceCanvas.getObjects(), + _patternSourceCanvas$6 = _slicedToArray(_patternSourceCanvas$5, 1), + fillImage = _patternSourceCanvas$6[0]; + + var filterOption = makeFilterOptionFromFabricImage(fillImage); + patternSourceCanvas.remove(fillImage); + var copiedCanvasElement = getCachedCanvasImageElement(canvasImage, true); + var newFillImage = makeFillImage(copiedCanvasElement, canvasImage.angle, filterOption); + patternSourceCanvas.add(newFillImage); +} +/** + * Calculate a point line outside the canvas. + * @param {fabric.Image} canvasImage - canvas background image + * @param {boolean} reset - default is false + * @returns {HTMLImageElement} + */ + +function getCachedCanvasImageElement(canvasImage) { + var reset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; + + if (!cachedCanvasImageElement || reset) { + cachedCanvasImageElement = canvasImage.toCanvasElement(); + } + + return cachedCanvasImageElement; +} +/** + * Calculate fill image position for out of Canvas + * @param {string} type - 'x' or 'y' + * @param {fabric.Object} shapeObj - shape object + * @param {number} outDistance - distance away + * @param {number} left - original left position + * @param {number} top - original top position + * @returns {Array} + */ + +function calculateDistanceOverflowPart(_ref5) { + var type = _ref5.type, + shapeObj = _ref5.shapeObj, + outDistance = _ref5.outDistance, + left = _ref5.left, + top = _ref5.top, + flipX = _ref5.flipX, + flipY = _ref5.flipY; + var shapePointNavigation = getShapeEdgePoint(shapeObj); + var shapeNeighborPointNavigation = [[1, 2], [0, 3], [0, 3], [1, 2]]; + var linePointsOutsideCanvas = calculateLinePointsOutsideCanvas(type, shapePointNavigation, shapeNeighborPointNavigation); + var reatAngles = calculateLineAngleOfOutsideCanvas(type, shapePointNavigation, linePointsOutsideCanvas); + var startPointIndex = linePointsOutsideCanvas.startPointIndex; + var diffPosition = getReversePositionForFlip({ + outDistance: outDistance, + startPointIndex: startPointIndex, + flipX: flipX, + flipY: flipY, + reatAngles: reatAngles + }); + return [left + diffPosition.left, top + diffPosition.top]; +} +/** + * Calculate fill image position for out of Canvas + * @param {number} outDistance - distance away + * @param {boolean} flipX - flip x statux + * @param {boolean} flipY - flip y statux + * @param {Array} reatAngles - Line angle of the rectangle vertex. + * @returns {Object} diffPosition + */ + + +function getReversePositionForFlip(_ref6) { + var outDistance = _ref6.outDistance, + startPointIndex = _ref6.startPointIndex, + flipX = _ref6.flipX, + flipY = _ref6.flipY, + reatAngles = _ref6.reatAngles; + var rotationChangePoint1 = outDistance * Math.cos(reatAngles[0] * Math.PI / 180); + var rotationChangePoint2 = outDistance * Math.cos(reatAngles[1] * Math.PI / 180); + var isForward = startPointIndex === 2 || startPointIndex === 3; + var diffPosition = { + top: isForward ? rotationChangePoint1 : rotationChangePoint2, + left: isForward ? rotationChangePoint2 : rotationChangePoint1 + }; + + if (isReverseLeftPositionForFlip(startPointIndex, flipX, flipY)) { + diffPosition.left = diffPosition.left * -1; + } + + if (isReverseTopPositionForFlip(startPointIndex, flipX, flipY)) { + diffPosition.top = diffPosition.top * -1; + } + + return diffPosition; +} +/** + * Calculate a point line outside the canvas. + * @param {string} type - 'x' or 'y' + * @param {Array} shapePointNavigation - shape edge positions + * @param {Object} shapePointNavigation.lefttop - left top position + * @param {Object} shapePointNavigation.righttop - right top position + * @param {Object} shapePointNavigation.leftbottom - lefttop position + * @param {Object} shapePointNavigation.rightbottom - rightbottom position + * @param {Array} shapeNeighborPointNavigation - Array to find adjacent edges. + * @returns {Object} + */ + + +function calculateLinePointsOutsideCanvas(type, shapePointNavigation, shapeNeighborPointNavigation) { + var minimumPoint = 0; + var minimumPointIndex = 0; + (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.forEach)(shapePointNavigation, function (point, index) { + if (point[type] < minimumPoint) { + minimumPoint = point[type]; + minimumPointIndex = index; + } + }); + + var _shapeNeighborPointNa = _slicedToArray(shapeNeighborPointNavigation[minimumPointIndex], 2), + endPointIndex1 = _shapeNeighborPointNa[0], + endPointIndex2 = _shapeNeighborPointNa[1]; + + return { + startPointIndex: minimumPointIndex, + endPointIndex1: endPointIndex1, + endPointIndex2: endPointIndex2 + }; +} +/** + * Calculate a point line outside the canvas. + * @param {string} type - 'x' or 'y' + * @param {Array} shapePointNavigation - shape edge positions + * @param {object} shapePointNavigation.lefttop - left top position + * @param {object} shapePointNavigation.righttop - right top position + * @param {object} shapePointNavigation.leftbottom - lefttop position + * @param {object} shapePointNavigation.rightbottom - rightbottom position + * @param {Object} linePointsOfOneVertexIndex - Line point of one vertex + * @param {Object} linePointsOfOneVertexIndex.startPoint - start point index + * @param {Object} linePointsOfOneVertexIndex.endPointIndex1 - end point index + * @param {Object} linePointsOfOneVertexIndex.endPointIndex2 - end point index + * @returns {Object} + */ + + +function calculateLineAngleOfOutsideCanvas(type, shapePointNavigation, linePointsOfOneVertexIndex) { + var startPointIndex = linePointsOfOneVertexIndex.startPointIndex, + endPointIndex1 = linePointsOfOneVertexIndex.endPointIndex1, + endPointIndex2 = linePointsOfOneVertexIndex.endPointIndex2; + var horizontalVerticalAngle = type === 'x' ? 180 : 270; + return (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.map)([endPointIndex1, endPointIndex2], function (pointIndex) { + var startPoint = shapePointNavigation[startPointIndex]; + var endPoint = shapePointNavigation[pointIndex]; + var diffY = startPoint.y - endPoint.y; + var diffX = startPoint.x - endPoint.x; + return Math.atan2(diffY, diffX) * 180 / Math.PI - horizontalVerticalAngle; + }); +} +/* eslint-disable complexity */ + +/** + * Calculate a point line outside the canvas for horizontal. + * @param {number} startPointIndex - start point index + * @param {boolean} flipX - flip x statux + * @param {boolean} flipY - flip y statux + * @returns {boolean} flipY - flip y statux + */ + + +function isReverseLeftPositionForFlip(startPointIndex, flipX, flipY) { + return (!flipX && flipY || !flipX && !flipY) && startPointIndex === 0 || (flipX && flipY || flipX && !flipY) && startPointIndex === 1 || (!flipX && !flipY || !flipX && flipY) && startPointIndex === 2 || (flipX && !flipY || flipX && flipY) && startPointIndex === 3; +} +/* eslint-enable complexity */ + +/* eslint-disable complexity */ + +/** + * Calculate a point line outside the canvas for vertical. + * @param {number} startPointIndex - start point index + * @param {boolean} flipX - flip x statux + * @param {boolean} flipY - flip y statux + * @returns {boolean} flipY - flip y statux + */ + + +function isReverseTopPositionForFlip(startPointIndex, flipX, flipY) { + return (flipX && !flipY || !flipX && !flipY) && startPointIndex === 0 || (!flipX && !flipY || flipX && !flipY) && startPointIndex === 1 || (flipX && flipY || !flipX && flipY) && startPointIndex === 2 || (!flipX && flipY || flipX && flipY) && startPointIndex === 3; +} +/* eslint-enable complexity */ + +/** + * Shape edge points + * @param {fabric.Object} shapeObj - Selected shape object on canvas + * @returns {Array} shapeEdgePoint - shape edge positions + */ + + +function getShapeEdgePoint(shapeObj) { + return [shapeObj.getPointByOrigin('left', 'top'), shapeObj.getPointByOrigin('right', 'top'), shapeObj.getPointByOrigin('left', 'bottom'), shapeObj.getPointByOrigin('right', 'bottom')]; +} +/** + * Rotated shape dimension + * @param {fabric.Object} shapeObj - Shape object + * @returns {Object} Rotated shape dimension + */ + + +function getRotatedDimension(shapeObj) { + var _getShapeEdgePoint = getShapeEdgePoint(shapeObj), + _getShapeEdgePoint2 = _slicedToArray(_getShapeEdgePoint, 4), + _getShapeEdgePoint2$ = _getShapeEdgePoint2[0], + ax = _getShapeEdgePoint2$.x, + ay = _getShapeEdgePoint2$.y, + _getShapeEdgePoint2$2 = _getShapeEdgePoint2[1], + bx = _getShapeEdgePoint2$2.x, + by = _getShapeEdgePoint2$2.y, + _getShapeEdgePoint2$3 = _getShapeEdgePoint2[2], + cx = _getShapeEdgePoint2$3.x, + cy = _getShapeEdgePoint2$3.y, + _getShapeEdgePoint2$4 = _getShapeEdgePoint2[3], + dx = _getShapeEdgePoint2$4.x, + dy = _getShapeEdgePoint2$4.y; + + var left = Math.min(ax, bx, cx, dx); + var top = Math.min(ay, by, cy, dy); + var right = Math.max(ax, bx, cx, dx); + var bottom = Math.max(ay, by, cy, dy); + return { + left: left, + top: top, + right: right, + bottom: bottom, + width: right - left, + height: bottom - top + }; +} +/** + * Make fill image + * @param {HTMLImageElement} copiedCanvasElement - html image element + * @param {number} currentCanvasImageAngle - current canvas angle + * @param {Array} filterOption - filter option + * @returns {fabric.Image} + * @private + */ + + +function makeFillImage(copiedCanvasElement, currentCanvasImageAngle, filterOption) { + var _context; + + var fillImage = new fabric.fabric.Image(copiedCanvasElement); + (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.forEach)(external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend.apply(void 0, concat_default()(_context = [{}]).call(_context, _toConsumableArray(filterOption))), function (value, key) { + var fabricFilterClassName = capitalizeString(key); + var filter = new fabric.fabric.Image.filters[fabricFilterClassName](_defineProperty({}, FILTER_OPTION_MAP[key], value)); + fillImage.filters.push(filter); + }); + fillImage.applyFilters(); + setCustomProperty(fillImage, { + originalAngle: currentCanvasImageAngle, + fillImageMaxSize: Math.max(fillImage.width, fillImage.height) + }); + shapeResizeHelper_default().adjustOriginToCenter(fillImage); + return fillImage; +} +;// CONCATENATED MODULE: ./src/js/component/shape.js + + + + + + + + +function shape_createSuper(Derived) { var hasNativeReflectConstruct = shape_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function shape_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + + + + + + +/** + * @author NHN. FE Development Team + * @fileoverview Shape component + */ + + + + + + + +var SHAPE_INIT_OPTIONS = (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend)({ + strokeWidth: 1, + stroke: '#000000', + fill: '#ffffff', + width: 1, + height: 1, + rx: 0, + ry: 0 +}, SHAPE_DEFAULT_OPTIONS); +var DEFAULT_TYPE = 'rect'; +var DEFAULT_WIDTH = 20; +var DEFAULT_HEIGHT = 20; +/** + * Make fill option + * @param {Object} options - Options to create the shape + * @param {Object.Image} canvasImage - canvas background image + * @param {Function} createStaticCanvas - static canvas creater + * @returns {Object} - shape option + * @private + */ + +function makeFabricFillOption(options, canvasImage, createStaticCanvas) { + var fillOption = fill_default()(options); + + var fillType = getFillTypeFromOption(fill_default()(options)); + var fill = fillOption; + + if (fillOption.color) { + fill = fillOption.color; + } + + var extOption = null; + + if (fillType === 'filter') { + var newStaticCanvas = createStaticCanvas(); + extOption = makeFillPatternForFilter(canvasImage, filter_default()(fillOption), newStaticCanvas); + } else { + extOption = { + fill: fill + }; + } + + return (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend)({}, options, extOption); +} +/** + * Shape + * @class Shape + * @param {Graphics} graphics - Graphics instance + * @extends {Component} + * @ignore + */ + + +var shape_Shape = /*#__PURE__*/function (_Component) { + _inherits(Shape, _Component); + + var _super = shape_createSuper(Shape); + + function Shape(graphics) { + var _context, _context2, _context3, _context4, _context5; + + var _this; + + _classCallCheck(this, Shape); + + _this = _super.call(this, componentNames.SHAPE, graphics); + /** + * Object of The drawing shape + * @type {fabric.Object} + * @private + */ + + _this._shapeObj = null; + /** + * Type of the drawing shape + * @type {string} + * @private + */ + + _this._type = DEFAULT_TYPE; + /** + * Options to draw the shape + * @type {Object} + * @private + */ + + _this._options = (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend)({}, SHAPE_INIT_OPTIONS); + /** + * Whether the shape object is selected or not + * @type {boolean} + * @private + */ + + _this._isSelected = false; + /** + * Pointer for drawing shape (x, y) + * @type {Object} + * @private + */ + + _this._startPoint = {}; + /** + * Using shortcut on drawing shape + * @type {boolean} + * @private + */ + + _this._withShiftKey = false; + /** + * Event handler list + * @type {Object} + * @private + */ + + _this._handlers = { + mousedown: bind_default()(_context = _this._onFabricMouseDown).call(_context, _assertThisInitialized(_this)), + mousemove: bind_default()(_context2 = _this._onFabricMouseMove).call(_context2, _assertThisInitialized(_this)), + mouseup: bind_default()(_context3 = _this._onFabricMouseUp).call(_context3, _assertThisInitialized(_this)), + keydown: bind_default()(_context4 = _this._onKeyDown).call(_context4, _assertThisInitialized(_this)), + keyup: bind_default()(_context5 = _this._onKeyUp).call(_context5, _assertThisInitialized(_this)) + }; + return _this; + } + /** + * Start to draw the shape on canvas + * @ignore + */ + + + _createClass(Shape, [{ + key: "start", + value: function start() { + var canvas = this.getCanvas(); + this._isSelected = false; + canvas.defaultCursor = 'crosshair'; + canvas.selection = false; + canvas.uniformScaling = true; + canvas.on({ + 'mouse:down': this._handlers.mousedown + }); + fabric.fabric.util.addListener(document, 'keydown', this._handlers.keydown); + fabric.fabric.util.addListener(document, 'keyup', this._handlers.keyup); + } + /** + * End to draw the shape on canvas + * @ignore + */ + + }, { + key: "end", + value: function end() { + var canvas = this.getCanvas(); + this._isSelected = false; + canvas.defaultCursor = 'default'; + canvas.selection = true; + canvas.uniformScaling = false; + canvas.off({ + 'mouse:down': this._handlers.mousedown + }); + fabric.fabric.util.removeListener(document, 'keydown', this._handlers.keydown); + fabric.fabric.util.removeListener(document, 'keyup', this._handlers.keyup); + } + /** + * Set states of the current drawing shape + * @ignore + * @param {string} type - Shape type (ex: 'rect', 'circle') + * @param {Object} [options] - Shape options + * @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or + * Shape foreground color (ex: '#fff', 'transparent') + * @param {string} [options.stoke] - Shape outline color + * @param {number} [options.strokeWidth] - Shape outline width + * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) + * @param {number} [options.height] - Height value (When type option is 'rect', this options can use) + * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) + * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) + */ + + }, { + key: "setStates", + value: function setStates(type, options) { + this._type = type; + + if (options) { + this._options = (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend)(this._options, options); + } + } + /** + * Add the shape + * @ignore + * @param {string} type - Shape type (ex: 'rect', 'circle') + * @param {Object} options - Shape options + * @param {(ShapeFillOption | string)} [options.fill] - ShapeFillOption or Shape foreground color (ex: '#fff', 'transparent') or ShapeFillOption object + * @param {string} [options.stroke] - Shape outline color + * @param {number} [options.strokeWidth] - Shape outline width + * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) + * @param {number} [options.height] - Height value (When type option is 'rect', this options can use) + * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) + * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) + * @param {number} [options.isRegular] - Whether scaling shape has 1:1 ratio or not + * @returns {Promise} + */ + + }, { + key: "add", + value: function add(type, options) { + var _this2 = this; + + return new (promise_default())(function (resolve) { + var canvas = _this2.getCanvas(); + + var extendOption = _this2._extendOptions(options); + + var shapeObj = _this2._createInstance(type, extendOption); + + var objectProperties = _this2.graphics.createObjectProperties(shapeObj); + + _this2._bindEventOnShape(shapeObj); + + canvas.add(shapeObj).setActiveObject(shapeObj); + + _this2._resetPositionFillFilter(shapeObj); + + resolve(objectProperties); + }); + } + /** + * Change the shape + * @ignore + * @param {fabric.Object} shapeObj - Selected shape object on canvas + * @param {Object} options - Shape options + * @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or + * Shape foreground color (ex: '#fff', 'transparent') + * @param {string} [options.stroke] - Shape outline color + * @param {number} [options.strokeWidth] - Shape outline width + * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) + * @param {number} [options.height] - Height value (When type option is 'rect', this options can use) + * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) + * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) + * @param {number} [options.isRegular] - Whether scaling shape has 1:1 ratio or not + * @returns {Promise} + */ + + }, { + key: "change", + value: function change(shapeObj, options) { + var _this3 = this; + + return new (promise_default())(function (resolve, reject) { + if (!isShape(shapeObj)) { + reject(rejectMessages.unsupportedType); + } + + var hasFillOption = getFillTypeFromOption(fill_default()(options)) === 'filter'; + var _this3$graphics = _this3.graphics, + canvasImage = _this3$graphics.canvasImage, + createStaticCanvas = _this3$graphics.createStaticCanvas; + shapeObj.set(hasFillOption ? makeFabricFillOption(options, canvasImage, createStaticCanvas) : options); + + if (hasFillOption) { + _this3._resetPositionFillFilter(shapeObj); + } + + _this3.getCanvas().renderAll(); + + resolve(); + }); + } + /** + * make fill property for user event + * @param {fabric.Object} shapeObj - fabric object + * @returns {Object} + */ + + }, { + key: "makeFillPropertyForUserEvent", + value: function makeFillPropertyForUserEvent(shapeObj) { + var fillType = getFillTypeFromObject(shapeObj); + var fillProp = {}; + + if (fillType === SHAPE_FILL_TYPE.FILTER) { + var fillImage = getFillImageFromShape(shapeObj); + var filterOption = makeFilterOptionFromFabricImage(fillImage); + fillProp.type = fillType; + fillProp.filter = filterOption; + } else { + fillProp.type = SHAPE_FILL_TYPE.COLOR; + fillProp.color = fill_default()(shapeObj) || 'transparent'; + } + + return fillProp; + } + /** + * Copy object handling. + * @param {fabric.Object} shapeObj - Shape object + * @param {fabric.Object} originalShapeObj - Shape object + */ + + }, { + key: "processForCopiedObject", + value: function processForCopiedObject(shapeObj, originalShapeObj) { + this._bindEventOnShape(shapeObj); + + if (getFillTypeFromObject(shapeObj) === 'filter') { + var fillImage = getFillImageFromShape(originalShapeObj); + var filterOption = makeFilterOptionFromFabricImage(fillImage); + var newStaticCanvas = this.graphics.createStaticCanvas(); + shapeObj.set(makeFillPatternForFilter(this.graphics.canvasImage, filterOption, newStaticCanvas)); + + this._resetPositionFillFilter(shapeObj); + } + } + /** + * Create the instance of shape + * @param {string} type - Shape type + * @param {Object} options - Options to creat the shape + * @returns {fabric.Object} Shape instance + * @private + */ + + }, { + key: "_createInstance", + value: function _createInstance(type, options) { + var instance; + + switch (type) { + case 'rect': + instance = new fabric.fabric.Rect(options); + break; + + case 'circle': + instance = new fabric.fabric.Ellipse((0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend)({ + type: 'circle' + }, options)); + break; + + case 'triangle': + instance = new fabric.fabric.Triangle(options); + break; + + default: + instance = {}; + } + + return instance; + } + /** + * Get the options to create the shape + * @param {Object} options - Options to creat the shape + * @returns {Object} Shape options + * @private + */ + + }, { + key: "_extendOptions", + value: function _extendOptions(options) { + var selectionStyles = fObjectOptions.SELECTION_STYLE; + var _this$graphics = this.graphics, + canvasImage = _this$graphics.canvasImage, + createStaticCanvas = _this$graphics.createStaticCanvas; + options = (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend)({}, SHAPE_INIT_OPTIONS, this._options, selectionStyles, options); + return makeFabricFillOption(options, canvasImage, createStaticCanvas); + } + /** + * Bind fabric events on the creating shape object + * @param {fabric.Object} shapeObj - Shape object + * @private + */ + + }, { + key: "_bindEventOnShape", + value: function _bindEventOnShape(shapeObj) { + var self = this; + var canvas = this.getCanvas(); + shapeObj.on({ + added: function added() { + self._shapeObj = this; + shapeResizeHelper_default().setOrigins(self._shapeObj); + }, + selected: function selected() { + self._isSelected = true; + self._shapeObj = this; + canvas.uniformScaling = true; + canvas.defaultCursor = 'default'; + shapeResizeHelper_default().setOrigins(self._shapeObj); + }, + deselected: function deselected() { + self._isSelected = false; + self._shapeObj = null; + canvas.defaultCursor = 'crosshair'; + canvas.uniformScaling = false; + }, + modified: function modified() { + var currentObj = self._shapeObj; + shapeResizeHelper_default().adjustOriginToCenter(currentObj); + shapeResizeHelper_default().setOrigins(currentObj); + }, + modifiedInGroup: function modifiedInGroup(activeSelection) { + self._fillFilterRePositionInGroupSelection(shapeObj, activeSelection); + }, + moving: function moving() { + self._resetPositionFillFilter(this); + }, + rotating: function rotating() { + self._resetPositionFillFilter(this); + }, + scaling: function scaling(fEvent) { + var pointer = canvas.getPointer(fEvent.e); + var currentObj = self._shapeObj; + canvas.setCursor('crosshair'); + shapeResizeHelper_default().resize(currentObj, pointer, true); + + self._resetPositionFillFilter(this); + } + }); + } + /** + * MouseDown event handler on canvas + * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object + * @private + */ + + }, { + key: "_onFabricMouseDown", + value: function _onFabricMouseDown(fEvent) { + if (!fEvent.target) { + this._isSelected = false; + this._shapeObj = false; + } + + if (!this._isSelected && !this._shapeObj) { + var canvas = this.getCanvas(); + this._startPoint = canvas.getPointer(fEvent.e); + canvas.on({ + 'mouse:move': this._handlers.mousemove, + 'mouse:up': this._handlers.mouseup + }); + } + } + /** + * MouseDown event handler on canvas + * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object + * @private + */ + + }, { + key: "_onFabricMouseMove", + value: function _onFabricMouseMove(fEvent) { + var _this4 = this; + + var canvas = this.getCanvas(); + var pointer = canvas.getPointer(fEvent.e); + var startPointX = this._startPoint.x; + var startPointY = this._startPoint.y; + var width = startPointX - pointer.x; + var height = startPointY - pointer.y; + var shape = this._shapeObj; + + if (!shape) { + this.add(this._type, { + left: startPointX, + top: startPointY, + width: width, + height: height + }).then(function (objectProps) { + _this4.fire(eventNames.ADD_OBJECT, objectProps); + }); + } else { + this._shapeObj.set({ + isRegular: this._withShiftKey + }); + + shapeResizeHelper_default().resize(shape, pointer); + canvas.renderAll(); + + this._resetPositionFillFilter(shape); + } + } + /** + * MouseUp event handler on canvas + * @private + */ + + }, { + key: "_onFabricMouseUp", + value: function _onFabricMouseUp() { + var _this5 = this; + + var canvas = this.getCanvas(); + var startPointX = this._startPoint.x; + var startPointY = this._startPoint.y; + var shape = this._shapeObj; + + if (!shape) { + this.add(this._type, { + left: startPointX, + top: startPointY, + width: DEFAULT_WIDTH, + height: DEFAULT_HEIGHT + }).then(function (objectProps) { + _this5.fire(eventNames.ADD_OBJECT, objectProps); + }); + } else if (shape) { + shapeResizeHelper_default().adjustOriginToCenter(shape); + this.fire(eventNames.OBJECT_ADDED, this.graphics.createObjectProperties(shape)); + } + + canvas.off({ + 'mouse:move': this._handlers.mousemove, + 'mouse:up': this._handlers.mouseup + }); + } + /** + * Keydown event handler on document + * @param {KeyboardEvent} e - Event object + * @private + */ + + }, { + key: "_onKeyDown", + value: function _onKeyDown(e) { + if (e.keyCode === keyCodes.SHIFT) { + this._withShiftKey = true; + + if (this._shapeObj) { + this._shapeObj.isRegular = true; + } + } + } + /** + * Keyup event handler on document + * @param {KeyboardEvent} e - Event object + * @private + */ + + }, { + key: "_onKeyUp", + value: function _onKeyUp(e) { + if (e.keyCode === keyCodes.SHIFT) { + this._withShiftKey = false; + + if (this._shapeObj) { + this._shapeObj.isRegular = false; + } + } + } + /** + * Reset shape position and internal proportions in the filter type fill area. + * @param {fabric.Object} shapeObj - Shape object + * @private + */ + + }, { + key: "_resetPositionFillFilter", + value: function _resetPositionFillFilter(shapeObj) { + if (getFillTypeFromObject(shapeObj) !== 'filter') { + return; + } + + var _getCustomProperty = getCustomProperty(shapeObj, 'patternSourceCanvas'), + patternSourceCanvas = _getCustomProperty.patternSourceCanvas; + + var fillImage = getFillImageFromShape(shapeObj); + + var _getCustomProperty2 = getCustomProperty(fillImage, 'originalAngle'), + originalAngle = _getCustomProperty2.originalAngle; + + if (this.graphics.canvasImage.angle !== originalAngle) { + reMakePatternImageSource(shapeObj, this.graphics.canvasImage); + } + + var originX = shapeObj.originX, + originY = shapeObj.originY; + shapeResizeHelper_default().adjustOriginToCenter(shapeObj); + shapeObj.width *= shapeObj.scaleX; + shapeObj.height *= shapeObj.scaleY; + shapeObj.rx *= shapeObj.scaleX; + shapeObj.ry *= shapeObj.scaleY; + shapeObj.scaleX = 1; + shapeObj.scaleY = 1; + rePositionFilterTypeFillImage(shapeObj); + changeOrigin(shapeObj, { + originX: originX, + originY: originY + }); + resetFillPatternCanvas(patternSourceCanvas); + } + /** + * Reset filter area position within group selection. + * @param {fabric.Object} shapeObj - Shape object + * @param {fabric.ActiveSelection} activeSelection - Shape object + * @private + */ + + }, { + key: "_fillFilterRePositionInGroupSelection", + value: function _fillFilterRePositionInGroupSelection(shapeObj, activeSelection) { + if (activeSelection.scaleX !== 1 || activeSelection.scaleY !== 1) { + // This is necessary because the group's scale transition state affects the relative size of the fill area. + // The only way to reset the object transformation scale state to neutral. + // {@link https://github.com/fabricjs/fabric.js/issues/5372} + activeSelection.addWithUpdate(); + } + + var angle = shapeObj.angle, + left = shapeObj.left, + top = shapeObj.top; + fabric.fabric.util.addTransformToObject(shapeObj, activeSelection.calcTransformMatrix()); + + this._resetPositionFillFilter(shapeObj); + + shapeObj.set({ + angle: angle, + left: left, + top: top + }); + } + }]); + + return Shape; +}(component); + + +;// CONCATENATED MODULE: ./src/js/component/zoom.js + + + + + + + + + + +function zoom_createSuper(Derived) { var hasNativeReflectConstruct = zoom_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function zoom_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +/** + * @author NHN. FE Development Team + * @fileoverview Image zoom module (start zoom, end zoom) + */ + + + + +var zoom_MOUSE_MOVE_THRESHOLD = 10; +var DEFAULT_SCROLL_OPTION = { + left: 0, + top: 0, + width: 0, + height: 0, + stroke: '#000000', + strokeWidth: 0, + fill: '#000000', + opacity: 0.4, + evented: false, + selectable: false, + hoverCursor: 'auto' +}; +var DEFAULT_VERTICAL_SCROLL_RATIO = { + SIZE: 0.0045, + MARGIN: 0.003, + BORDER_RADIUS: 0.003 +}; +var DEFAULT_HORIZONTAL_SCROLL_RATIO = { + SIZE: 0.0066, + MARGIN: 0.0044, + BORDER_RADIUS: 0.003 +}; +var DEFAULT_ZOOM_LEVEL = 1.0; +var ZOOM_CHANGED = eventNames.ZOOM_CHANGED, + ADD_TEXT = eventNames.ADD_TEXT, + TEXT_EDITING = eventNames.TEXT_EDITING, + OBJECT_MODIFIED = eventNames.OBJECT_MODIFIED, + KEY_DOWN = eventNames.KEY_DOWN, + KEY_UP = eventNames.KEY_UP, + HAND_STARTED = eventNames.HAND_STARTED, + HAND_STOPPED = eventNames.HAND_STOPPED; +/** + * Zoom components + * @param {Graphics} graphics - Graphics instance + * @extends {Component} + * @class Zoom + * @ignore + */ + +var Zoom = /*#__PURE__*/function (_Component) { + _inherits(Zoom, _Component); + + var _super = zoom_createSuper(Zoom); + + function Zoom(graphics) { + var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12; + + var _this; + + _classCallCheck(this, Zoom); + + _this = _super.call(this, componentNames.ZOOM, graphics); + /** + * zoomArea + * @type {?fabric.Rect} + * @private + */ + + _this.zoomArea = null; + /** + * Start point of zoom area + * @type {?{x: number, y: number}} + */ + + _this._startPoint = null; + /** + * Center point of every zoom + * @type {Array.<{prevZoomLevel: number, zoomLevel: number, x: number, y: number}>} + */ + + _this._centerPoints = []; + /** + * Zoom level (default: 100%(1.0), max: 400%(4.0)) + * @type {number} + */ + + _this.zoomLevel = DEFAULT_ZOOM_LEVEL; + /** + * Zoom mode ('normal', 'zoom', 'hand') + * @type {string} + */ + + _this.zoomMode = zoomModes.DEFAULT; + /** + * Listeners + * @type {Object.} + * @private + */ + + _this._listeners = { + startZoom: bind_default()(_context = _this._onMouseDownWithZoomMode).call(_context, _assertThisInitialized(_this)), + moveZoom: bind_default()(_context2 = _this._onMouseMoveWithZoomMode).call(_context2, _assertThisInitialized(_this)), + stopZoom: bind_default()(_context3 = _this._onMouseUpWithZoomMode).call(_context3, _assertThisInitialized(_this)), + startHand: bind_default()(_context4 = _this._onMouseDownWithHandMode).call(_context4, _assertThisInitialized(_this)), + moveHand: bind_default()(_context5 = _this._onMouseMoveWithHandMode).call(_context5, _assertThisInitialized(_this)), + stopHand: bind_default()(_context6 = _this._onMouseUpWithHandMode).call(_context6, _assertThisInitialized(_this)), + zoomChanged: bind_default()(_context7 = _this._changeScrollState).call(_context7, _assertThisInitialized(_this)), + keydown: bind_default()(_context8 = _this._startHandModeWithSpaceBar).call(_context8, _assertThisInitialized(_this)), + keyup: bind_default()(_context9 = _this._endHandModeWithSpaceBar).call(_context9, _assertThisInitialized(_this)) + }; + + var canvas = _this.getCanvas(); + /** + * Width:Height ratio (ex. width=1.5, height=1 -> aspectRatio=1.5) + * @private + */ + + + _this.aspectRatio = canvas.width / canvas.height; + /** + * vertical scroll bar + * @type {fabric.Rect} + * @private + */ + + _this._verticalScroll = new fabric.fabric.Rect(DEFAULT_SCROLL_OPTION); + /** + * horizontal scroll bar + * @type {fabric.Rect} + * @private + */ + + _this._horizontalScroll = new fabric.fabric.Rect(DEFAULT_SCROLL_OPTION); + canvas.on(ZOOM_CHANGED, _this._listeners.zoomChanged); + + _this.graphics.on(ADD_TEXT, bind_default()(_context10 = _this._startTextEditingHandler).call(_context10, _assertThisInitialized(_this))); + + _this.graphics.on(TEXT_EDITING, bind_default()(_context11 = _this._startTextEditingHandler).call(_context11, _assertThisInitialized(_this))); + + _this.graphics.on(OBJECT_MODIFIED, bind_default()(_context12 = _this._stopTextEditingHandler).call(_context12, _assertThisInitialized(_this))); + + return _this; + } + /** + * Attach zoom keyboard events + */ + + + _createClass(Zoom, [{ + key: "attachKeyboardZoomEvents", + value: function attachKeyboardZoomEvents() { + fabric.fabric.util.addListener(document, KEY_DOWN, this._listeners.keydown); + fabric.fabric.util.addListener(document, KEY_UP, this._listeners.keyup); + } + /** + * Detach zoom keyboard events + */ + + }, { + key: "detachKeyboardZoomEvents", + value: function detachKeyboardZoomEvents() { + fabric.fabric.util.removeListener(document, KEY_DOWN, this._listeners.keydown); + fabric.fabric.util.removeListener(document, KEY_UP, this._listeners.keyup); + } + /** + * Handler when you started editing text + * @private + */ + + }, { + key: "_startTextEditingHandler", + value: function _startTextEditingHandler() { + this.isTextEditing = true; + } + /** + * Handler when you stopped editing text + * @private + */ + + }, { + key: "_stopTextEditingHandler", + value: function _stopTextEditingHandler() { + this.isTextEditing = false; + } + /** + * Handler who turns on hand mode when the space bar is down + * @param {KeyboardEvent} e - Event object + * @private + */ + + }, { + key: "_startHandModeWithSpaceBar", + value: function _startHandModeWithSpaceBar(e) { + if (this.withSpace || this.isTextEditing) { + return; + } + + if (e.keyCode === keyCodes.SPACE) { + this.withSpace = true; + this.startHandMode(); + } + } + /** + * Handler who turns off hand mode when space bar is up + * @param {KeyboardEvent} e - Event object + * @private + */ + + }, { + key: "_endHandModeWithSpaceBar", + value: function _endHandModeWithSpaceBar(e) { + if (e.keyCode === keyCodes.SPACE) { + this.withSpace = false; + this.endHandMode(); + } + } + /** + * Start zoom-in mode + */ + + }, { + key: "startZoomInMode", + value: function startZoomInMode() { + if (this.zoomArea) { + return; + } + + this.endHandMode(); + this.zoomMode = zoomModes.ZOOM; + var canvas = this.getCanvas(); + + this._changeObjectsEventedState(false); + + this.zoomArea = new fabric.fabric.Rect({ + left: 0, + top: 0, + width: 0.5, + height: 0.5, + stroke: 'black', + strokeWidth: 1, + fill: 'transparent', + hoverCursor: 'zoom-in' + }); + canvas.discardActiveObject(); + canvas.add(this.zoomArea); + canvas.on('mouse:down', this._listeners.startZoom); + canvas.selection = false; + canvas.defaultCursor = 'zoom-in'; + } + /** + * End zoom-in mode + */ + + }, { + key: "endZoomInMode", + value: function endZoomInMode() { + this.zoomMode = zoomModes.DEFAULT; + var canvas = this.getCanvas(); + var _this$_listeners = this._listeners, + startZoom = _this$_listeners.startZoom, + moveZoom = _this$_listeners.moveZoom, + stopZoom = _this$_listeners.stopZoom; + canvas.selection = true; + canvas.defaultCursor = 'auto'; + canvas.off({ + 'mouse:down': startZoom, + 'mouse:move': moveZoom, + 'mouse:up': stopZoom + }); + + this._changeObjectsEventedState(true); + + canvas.remove(this.zoomArea); + this.zoomArea = null; + } + /** + * Start zoom drawing mode + */ + + }, { + key: "start", + value: function start() { + this.zoomArea = null; + this._startPoint = null; + this._startHandPoint = null; + } + /** + * Stop zoom drawing mode + */ + + }, { + key: "end", + value: function end() { + this.endZoomInMode(); + this.endHandMode(); + } + /** + * Start hand mode + */ + + }, { + key: "startHandMode", + value: function startHandMode() { + this.endZoomInMode(); + this.zoomMode = zoomModes.HAND; + var canvas = this.getCanvas(); + + this._changeObjectsEventedState(false); + + canvas.discardActiveObject(); + canvas.off('mouse:down', this._listeners.startHand); + canvas.on('mouse:down', this._listeners.startHand); + canvas.selection = false; + canvas.defaultCursor = 'grab'; + canvas.fire(HAND_STARTED); + } + /** + * Stop hand mode + */ + + }, { + key: "endHandMode", + value: function endHandMode() { + this.zoomMode = zoomModes.DEFAULT; + var canvas = this.getCanvas(); + + this._changeObjectsEventedState(true); + + canvas.off('mouse:down', this._listeners.startHand); + canvas.selection = true; + canvas.defaultCursor = 'auto'; + this._startHandPoint = null; + canvas.fire(HAND_STOPPED); + } + /** + * onMousedown handler in fabric canvas + * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event + * @private + */ + + }, { + key: "_onMouseDownWithZoomMode", + value: function _onMouseDownWithZoomMode(_ref) { + var target = _ref.target, + e = _ref.e; + + if (target) { + return; + } + + var canvas = this.getCanvas(); + canvas.selection = false; + this._startPoint = canvas.getPointer(e); + this.zoomArea.set({ + width: 0, + height: 0 + }); + var _this$_listeners2 = this._listeners, + moveZoom = _this$_listeners2.moveZoom, + stopZoom = _this$_listeners2.stopZoom; + canvas.on({ + 'mouse:move': moveZoom, + 'mouse:up': stopZoom + }); + } + /** + * onMousemove handler in fabric canvas + * @param {{e: MouseEvent}} fEvent - Fabric event + * @private + */ + + }, { + key: "_onMouseMoveWithZoomMode", + value: function _onMouseMoveWithZoomMode(_ref2) { + var e = _ref2.e; + var canvas = this.getCanvas(); + var pointer = canvas.getPointer(e); + var x = pointer.x, + y = pointer.y; + var zoomArea = this.zoomArea, + _startPoint = this._startPoint; + var deltaX = Math.abs(x - _startPoint.x); + var deltaY = Math.abs(y - _startPoint.y); + + if (deltaX + deltaY > zoom_MOUSE_MOVE_THRESHOLD) { + canvas.remove(zoomArea); + zoomArea.set(this._calcRectDimensionFromPoint(x, y)); + canvas.add(zoomArea); + } + } + /** + * Get rect dimension setting from Canvas-Mouse-Position(x, y) + * @param {number} x - Canvas-Mouse-Position x + * @param {number} y - Canvas-Mouse-Position Y + * @returns {{left: number, top: number, width: number, height: number}} + * @private + */ + + }, { + key: "_calcRectDimensionFromPoint", + value: function _calcRectDimensionFromPoint(x, y) { + var canvas = this.getCanvas(); + var canvasWidth = canvas.getWidth(); + var canvasHeight = canvas.getHeight(); + var _this$_startPoint = this._startPoint, + startX = _this$_startPoint.x, + startY = _this$_startPoint.y; + var min = Math.min; + var left = min(startX, x); + var top = min(startY, y); + var width = clamp(x, startX, canvasWidth) - left; // (startX <= x(mouse) <= canvasWidth) - left + + var height = clamp(y, startY, canvasHeight) - top; // (startY <= y(mouse) <= canvasHeight) - top + + return { + left: left, + top: top, + width: width, + height: height + }; + } + /** + * onMouseup handler in fabric canvas + * @private + */ + + }, { + key: "_onMouseUpWithZoomMode", + value: function _onMouseUpWithZoomMode() { + var zoomLevel = this.zoomLevel; + var zoomArea = this.zoomArea; + var _this$_listeners3 = this._listeners, + moveZoom = _this$_listeners3.moveZoom, + stopZoom = _this$_listeners3.stopZoom; + var canvas = this.getCanvas(); + + var center = this._getCenterPoint(); + + var x = center.x, + y = center.y; + + if (!this._isMaxZoomLevel()) { + this._centerPoints.push({ + x: x, + y: y, + prevZoomLevel: zoomLevel, + zoomLevel: zoomLevel + 1 + }); + + zoomLevel += 1; + canvas.zoomToPoint({ + x: x, + y: y + }, zoomLevel); + + this._fireZoomChanged(canvas, zoomLevel); + + this.zoomLevel = zoomLevel; + } + + canvas.off({ + 'mouse:move': moveZoom, + 'mouse:up': stopZoom + }); + canvas.remove(zoomArea); + this._startPoint = null; + } + /** + * Get center point + * @returns {{x: number, y: number}} + * @private + */ + + }, { + key: "_getCenterPoint", + value: function _getCenterPoint() { + var _this$zoomArea = this.zoomArea, + left = _this$zoomArea.left, + top = _this$zoomArea.top, + width = _this$zoomArea.width, + height = _this$zoomArea.height; + var _this$_startPoint2 = this._startPoint, + x = _this$_startPoint2.x, + y = _this$_startPoint2.y; + var aspectRatio = this.aspectRatio; + + if (width < zoom_MOUSE_MOVE_THRESHOLD && height < zoom_MOUSE_MOVE_THRESHOLD) { + return { + x: x, + y: y + }; + } + + return width > height ? { + x: left + aspectRatio * height / 2, + y: top + height / 2 + } : { + x: left + width / 2, + y: top + width / aspectRatio / 2 + }; + } + /** + * Zoom the canvas + * @param {{x: number, y: number}} center - center of zoom + * @param {?number} zoomLevel - zoom level + */ + + }, { + key: "zoom", + value: function zoom(_ref3) { + var x = _ref3.x, + y = _ref3.y; + var zoomLevel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.zoomLevel; + var canvas = this.getCanvas(); + var centerPoints = this._centerPoints; + + for (var i = centerPoints.length - 1; i >= 0; i -= 1) { + if (centerPoints[i].zoomLevel < zoomLevel) { + break; + } + + var _centerPoints$pop = centerPoints.pop(), + prevX = _centerPoints$pop.x, + prevY = _centerPoints$pop.y, + prevZoomLevel = _centerPoints$pop.prevZoomLevel; + + canvas.zoomToPoint({ + x: prevX, + y: prevY + }, prevZoomLevel); + this.zoomLevel = prevZoomLevel; + } + + canvas.zoomToPoint({ + x: x, + y: y + }, zoomLevel); + + if (!this._isDefaultZoomLevel(zoomLevel)) { + this._centerPoints.push({ + x: x, + y: y, + zoomLevel: zoomLevel, + prevZoomLevel: this.zoomLevel + }); + } + + this.zoomLevel = zoomLevel; + + this._fireZoomChanged(canvas, zoomLevel); + } + /** + * Zoom out one step + */ + + }, { + key: "zoomOut", + value: function zoomOut() { + var centerPoints = this._centerPoints; + + if (!centerPoints.length) { + return; + } + + var canvas = this.getCanvas(); + var point = centerPoints.pop(); + var x = point.x, + y = point.y, + prevZoomLevel = point.prevZoomLevel; + + if (this._isDefaultZoomLevel(prevZoomLevel)) { + canvas.setViewportTransform([1, 0, 0, 1, 0, 0]); + } else { + canvas.zoomToPoint({ + x: x, + y: y + }, prevZoomLevel); + } + + this.zoomLevel = prevZoomLevel; + + this._fireZoomChanged(canvas, this.zoomLevel); + } + /** + * Zoom reset + */ + + }, { + key: "resetZoom", + value: function resetZoom() { + var canvas = this.getCanvas(); + canvas.setViewportTransform([1, 0, 0, 1, 0, 0]); + this.zoomLevel = DEFAULT_ZOOM_LEVEL; + this._centerPoints = []; + + this._fireZoomChanged(canvas, this.zoomLevel); + } + /** + * Whether zoom level is max (5.0) + * @returns {boolean} + * @private + */ + + }, { + key: "_isMaxZoomLevel", + value: function _isMaxZoomLevel() { + return this.zoomLevel >= 5.0; + } + /** + * Move point of zoom + * @param {{x: number, y: number}} delta - move amount + * @private + */ + + }, { + key: "_movePointOfZoom", + value: function _movePointOfZoom(_ref4) { + var deltaX = _ref4.x, + deltaY = _ref4.y; + var centerPoints = this._centerPoints; + + if (!centerPoints.length) { + return; + } + + var canvas = this.getCanvas(); + var zoomLevel = this.zoomLevel; + var point = centerPoints.pop(); + var originX = point.x, + originY = point.y, + prevZoomLevel = point.prevZoomLevel; + var x = originX - deltaX; + var y = originY - deltaY; + canvas.zoomToPoint({ + x: originX, + y: originY + }, prevZoomLevel); + canvas.zoomToPoint({ + x: x, + y: y + }, zoomLevel); + centerPoints.push({ + x: x, + y: y, + prevZoomLevel: prevZoomLevel, + zoomLevel: zoomLevel + }); + + this._fireZoomChanged(canvas, zoomLevel); + } + /** + * onMouseDown handler in fabric canvas + * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event + * @private + */ + + }, { + key: "_onMouseDownWithHandMode", + value: function _onMouseDownWithHandMode(_ref5) { + var target = _ref5.target, + e = _ref5.e; + + if (target) { + return; + } + + var canvas = this.getCanvas(); + + if (this.zoomLevel <= DEFAULT_ZOOM_LEVEL) { + return; + } + + canvas.selection = false; + this._startHandPoint = canvas.getPointer(e); + var _this$_listeners4 = this._listeners, + moveHand = _this$_listeners4.moveHand, + stopHand = _this$_listeners4.stopHand; + canvas.on({ + 'mouse:move': moveHand, + 'mouse:up': stopHand + }); + } + /** + * onMouseMove handler in fabric canvas + * @param {{e: MouseEvent}} fEvent - Fabric event + * @private + */ + + }, { + key: "_onMouseMoveWithHandMode", + value: function _onMouseMoveWithHandMode(_ref6) { + var e = _ref6.e; + var canvas = this.getCanvas(); + + var _canvas$getPointer = canvas.getPointer(e), + x = _canvas$getPointer.x, + y = _canvas$getPointer.y; + + var deltaX = x - this._startHandPoint.x; + var deltaY = y - this._startHandPoint.y; + + this._movePointOfZoom({ + x: deltaX, + y: deltaY + }); + } + /** + * onMouseUp handler in fabric canvas + * @private + */ + + }, { + key: "_onMouseUpWithHandMode", + value: function _onMouseUpWithHandMode() { + var canvas = this.getCanvas(); + var _this$_listeners5 = this._listeners, + moveHand = _this$_listeners5.moveHand, + stopHand = _this$_listeners5.stopHand; + canvas.off({ + 'mouse:move': moveHand, + 'mouse:up': stopHand + }); + this._startHandPoint = null; + } + /** + * onChangeZoom handler in fabric canvas + * @private + */ + + }, { + key: "_changeScrollState", + value: function _changeScrollState(_ref7) { + var viewport = _ref7.viewport, + zoomLevel = _ref7.zoomLevel; + var canvas = this.getCanvas(); + canvas.remove(this._verticalScroll); + canvas.remove(this._horizontalScroll); + + if (this._isDefaultZoomLevel(zoomLevel)) { + return; + } + + var canvasWidth = canvas.width; + var canvasHeight = canvas.height; + var tl = viewport.tl, + tr = viewport.tr, + bl = viewport.bl; + var viewportWidth = tr.x - tl.x; + var viewportHeight = bl.y - tl.y; + var horizontalScrollWidth = viewportWidth * viewportWidth / canvasWidth; + var horizontalScrollHeight = viewportHeight * DEFAULT_HORIZONTAL_SCROLL_RATIO.SIZE; + var horizontalScrollLeft = clamp(tl.x + tl.x / canvasWidth * viewportWidth, tl.x, tr.x - horizontalScrollWidth); + var horizontalScrollMargin = viewportHeight * DEFAULT_HORIZONTAL_SCROLL_RATIO.MARGIN; + var horizontalScrollBorderRadius = viewportHeight * DEFAULT_HORIZONTAL_SCROLL_RATIO.BORDER_RADIUS; + + this._horizontalScroll.set({ + left: horizontalScrollLeft, + top: bl.y - horizontalScrollHeight - horizontalScrollMargin, + width: horizontalScrollWidth, + height: horizontalScrollHeight, + rx: horizontalScrollBorderRadius, + ry: horizontalScrollBorderRadius + }); + + var verticalScrollWidth = viewportWidth * DEFAULT_VERTICAL_SCROLL_RATIO.SIZE; + var verticalScrollHeight = viewportHeight * viewportHeight / canvasHeight; + var verticalScrollTop = clamp(tl.y + tl.y / canvasHeight * viewportHeight, tr.y, bl.y - verticalScrollHeight); + var verticalScrollMargin = viewportWidth * DEFAULT_VERTICAL_SCROLL_RATIO.MARGIN; + var verticalScrollBorderRadius = viewportWidth * DEFAULT_VERTICAL_SCROLL_RATIO.BORDER_RADIUS; + + this._verticalScroll.set({ + left: tr.x - verticalScrollWidth - verticalScrollMargin, + top: verticalScrollTop, + width: verticalScrollWidth, + height: verticalScrollHeight, + rx: verticalScrollBorderRadius, + ry: verticalScrollBorderRadius + }); + + this._addScrollBar(); + } + /** + * Change objects 'evented' state + * @param {boolean} [evented=true] - objects 'evented' state + */ + + }, { + key: "_changeObjectsEventedState", + value: function _changeObjectsEventedState() { + var evented = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true; + var canvas = this.getCanvas(); + canvas.forEachObject(function (obj) { + // {@link http://fabricjs.com/docs/fabric.Object.html#evented} + obj.evented = evented; + }); + } + /** + * Add scroll bar and set remove timer + */ + + }, { + key: "_addScrollBar", + value: function _addScrollBar() { + var _this2 = this; + + var canvas = this.getCanvas(); + canvas.add(this._horizontalScroll); + canvas.add(this._verticalScroll); + + if (this.scrollBarTid) { + clearTimeout(this.scrollBarTid); + } + + this.scrollBarTid = set_timeout_default()(function () { + canvas.remove(_this2._horizontalScroll); + canvas.remove(_this2._verticalScroll); + }, 3000); + } + /** + * Check zoom level is default zoom level (1.0) + * @param {number} zoomLevel - zoom level + * @returns {boolean} - whether zoom level is 1.0 + */ + + }, { + key: "_isDefaultZoomLevel", + value: function _isDefaultZoomLevel(zoomLevel) { + return zoomLevel === DEFAULT_ZOOM_LEVEL; + } + /** + * Fire 'zoomChanged' event + * @param {fabric.Canvas} canvas - fabric canvas + * @param {number} zoomLevel - 'zoomChanged' event params + */ + + }, { + key: "_fireZoomChanged", + value: function _fireZoomChanged(canvas, zoomLevel) { + canvas.fire(ZOOM_CHANGED, { + viewport: canvas.calcViewportBoundaries(), + zoomLevel: zoomLevel + }); + } + /** + * Get zoom mode + */ + + }, { + key: "mode", + get: function get() { + return this.zoomMode; + } + }]); + + return Zoom; +}(component); + +/* harmony default export */ var zoom = (Zoom); +;// CONCATENATED MODULE: ./src/js/interface/drawingMode.js + + + +/** + * @author NHN. FE Development Team + * @fileoverview DrawingMode interface + */ + +var drawingMode_createMessage = errorMessage.create; +var drawingMode_errorTypes = errorMessage.types; +/** + * DrawingMode interface + * @class + * @param {string} name - drawing mode name + * @ignore + */ + +var DrawingMode = /*#__PURE__*/function () { + function DrawingMode(name) { + _classCallCheck(this, DrawingMode); + + /** + * the name of drawing mode + * @type {string} + */ + this.name = name; + } + /** + * Get this drawing mode name; + * @returns {string} drawing mode name + */ + + + _createClass(DrawingMode, [{ + key: "getName", + value: function getName() { + return this.name; + } + /** + * start this drawing mode + * @param {Object} options - drawing mode options + * @abstract + */ + + }, { + key: "start", + value: function start() { + throw new Error(drawingMode_createMessage(drawingMode_errorTypes.UN_IMPLEMENTATION, 'start')); + } + /** + * stop this drawing mode + * @abstract + */ + + }, { + key: "end", + value: function end() { + throw new Error(drawingMode_createMessage(drawingMode_errorTypes.UN_IMPLEMENTATION, 'stop')); + } + }]); + + return DrawingMode; +}(); + +/* harmony default export */ var drawingMode = (DrawingMode); +;// CONCATENATED MODULE: ./src/js/drawingMode/cropper.js + + + + + + + +function drawingMode_cropper_createSuper(Derived) { var hasNativeReflectConstruct = drawingMode_cropper_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function drawingMode_cropper_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +/** + * @author NHN. FE Development Team + * @fileoverview CropperDrawingMode class + */ + + +/** + * CropperDrawingMode class + * @class + * @ignore + */ + +var CropperDrawingMode = /*#__PURE__*/function (_DrawingMode) { + _inherits(CropperDrawingMode, _DrawingMode); + + var _super = drawingMode_cropper_createSuper(CropperDrawingMode); + + function CropperDrawingMode() { + _classCallCheck(this, CropperDrawingMode); + + return _super.call(this, drawingModes.CROPPER); + } + /** + * start this drawing mode + * @param {Graphics} graphics - Graphics instance + * @override + */ + + + _createClass(CropperDrawingMode, [{ + key: "start", + value: function start(graphics) { + var cropper = graphics.getComponent(componentNames.CROPPER); + cropper.start(); + } + /** + * stop this drawing mode + * @param {Graphics} graphics - Graphics instance + * @override + */ + + }, { + key: "end", + value: function end(graphics) { + var cropper = graphics.getComponent(componentNames.CROPPER); + cropper.end(); + } + }]); + + return CropperDrawingMode; +}(drawingMode); + +/* harmony default export */ var drawingMode_cropper = (CropperDrawingMode); +;// CONCATENATED MODULE: ./src/js/drawingMode/freeDrawing.js + + + + + + + +function drawingMode_freeDrawing_createSuper(Derived) { var hasNativeReflectConstruct = drawingMode_freeDrawing_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function drawingMode_freeDrawing_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +/** + * @author NHN. FE Development Team + * @fileoverview FreeDrawingMode class + */ + + +/** + * FreeDrawingMode class + * @class + * @ignore + */ + +var FreeDrawingMode = /*#__PURE__*/function (_DrawingMode) { + _inherits(FreeDrawingMode, _DrawingMode); + + var _super = drawingMode_freeDrawing_createSuper(FreeDrawingMode); + + function FreeDrawingMode() { + _classCallCheck(this, FreeDrawingMode); + + return _super.call(this, drawingModes.FREE_DRAWING); + } + /** + * start this drawing mode + * @param {Graphics} graphics - Graphics instance + * @param {{width: ?number, color: ?string}} [options] - Brush width & color + * @override + */ + + + _createClass(FreeDrawingMode, [{ + key: "start", + value: function start(graphics, options) { + var freeDrawing = graphics.getComponent(componentNames.FREE_DRAWING); + freeDrawing.start(options); + } + /** + * stop this drawing mode + * @param {Graphics} graphics - Graphics instance + * @override + */ + + }, { + key: "end", + value: function end(graphics) { + var freeDrawing = graphics.getComponent(componentNames.FREE_DRAWING); + freeDrawing.end(); + } + }]); + + return FreeDrawingMode; +}(drawingMode); + +/* harmony default export */ var drawingMode_freeDrawing = (FreeDrawingMode); +;// CONCATENATED MODULE: ./src/js/drawingMode/lineDrawing.js + + + + + + + +function lineDrawing_createSuper(Derived) { var hasNativeReflectConstruct = lineDrawing_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function lineDrawing_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +/** + * @author NHN. FE Development Team + * @fileoverview LineDrawingMode class + */ + + +/** + * LineDrawingMode class + * @class + * @ignore + */ + +var LineDrawingMode = /*#__PURE__*/function (_DrawingMode) { + _inherits(LineDrawingMode, _DrawingMode); + + var _super = lineDrawing_createSuper(LineDrawingMode); + + function LineDrawingMode() { + _classCallCheck(this, LineDrawingMode); + + return _super.call(this, drawingModes.LINE_DRAWING); + } + /** + * start this drawing mode + * @param {Graphics} graphics - Graphics instance + * @param {{width: ?number, color: ?string}} [options] - Brush width & color + * @override + */ + + + _createClass(LineDrawingMode, [{ + key: "start", + value: function start(graphics, options) { + var lineDrawing = graphics.getComponent(componentNames.LINE); + lineDrawing.start(options); + } + /** + * stop this drawing mode + * @param {Graphics} graphics - Graphics instance + * @override + */ + + }, { + key: "end", + value: function end(graphics) { + var lineDrawing = graphics.getComponent(componentNames.LINE); + lineDrawing.end(); + } + }]); + + return LineDrawingMode; +}(drawingMode); + +/* harmony default export */ var lineDrawing = (LineDrawingMode); +;// CONCATENATED MODULE: ./src/js/drawingMode/shape.js + + + + + + + +function drawingMode_shape_createSuper(Derived) { var hasNativeReflectConstruct = drawingMode_shape_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function drawingMode_shape_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +/** + * @author NHN. FE Development Team + * @fileoverview ShapeDrawingMode class + */ + + +/** + * ShapeDrawingMode class + * @class + * @ignore + */ + +var ShapeDrawingMode = /*#__PURE__*/function (_DrawingMode) { + _inherits(ShapeDrawingMode, _DrawingMode); + + var _super = drawingMode_shape_createSuper(ShapeDrawingMode); + + function ShapeDrawingMode() { + _classCallCheck(this, ShapeDrawingMode); + + return _super.call(this, drawingModes.SHAPE); + } + /** + * start this drawing mode + * @param {Graphics} graphics - Graphics instance + * @override + */ + + + _createClass(ShapeDrawingMode, [{ + key: "start", + value: function start(graphics) { + var shape = graphics.getComponent(componentNames.SHAPE); + shape.start(); + } + /** + * stop this drawing mode + * @param {Graphics} graphics - Graphics instance + * @override + */ + + }, { + key: "end", + value: function end(graphics) { + var shape = graphics.getComponent(componentNames.SHAPE); + shape.end(); + } + }]); + + return ShapeDrawingMode; +}(drawingMode); + +/* harmony default export */ var drawingMode_shape = (ShapeDrawingMode); +;// CONCATENATED MODULE: ./src/js/drawingMode/text.js + + + + + + + +function drawingMode_text_createSuper(Derived) { var hasNativeReflectConstruct = drawingMode_text_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function drawingMode_text_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +/** + * @author NHN. FE Development Team + * @fileoverview TextDrawingMode class + */ + + +/** + * TextDrawingMode class + * @class + * @ignore + */ + +var TextDrawingMode = /*#__PURE__*/function (_DrawingMode) { + _inherits(TextDrawingMode, _DrawingMode); + + var _super = drawingMode_text_createSuper(TextDrawingMode); + + function TextDrawingMode() { + _classCallCheck(this, TextDrawingMode); + + return _super.call(this, drawingModes.TEXT); + } + /** + * start this drawing mode + * @param {Graphics} graphics - Graphics instance + * @override + */ + + + _createClass(TextDrawingMode, [{ + key: "start", + value: function start(graphics) { + var text = graphics.getComponent(componentNames.TEXT); + text.start(); + } + /** + * stop this drawing mode + * @param {Graphics} graphics - Graphics instance + * @override + */ + + }, { + key: "end", + value: function end(graphics) { + var text = graphics.getComponent(componentNames.TEXT); + text.end(); + } + }]); + + return TextDrawingMode; +}(drawingMode); + +/* harmony default export */ var drawingMode_text = (TextDrawingMode); +;// CONCATENATED MODULE: ./src/js/drawingMode/icon.js + + + + + + + +function drawingMode_icon_createSuper(Derived) { var hasNativeReflectConstruct = drawingMode_icon_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function drawingMode_icon_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +/** + * @author NHN. FE Development Team + * @fileoverview IconDrawingMode class + */ + + +/** + * IconDrawingMode class + * @class + * @ignore + */ + +var IconDrawingMode = /*#__PURE__*/function (_DrawingMode) { + _inherits(IconDrawingMode, _DrawingMode); + + var _super = drawingMode_icon_createSuper(IconDrawingMode); + + function IconDrawingMode() { + _classCallCheck(this, IconDrawingMode); + + return _super.call(this, drawingModes.ICON); + } + /** + * start this drawing mode + * @param {Graphics} graphics - Graphics instance + * @override + */ + + + _createClass(IconDrawingMode, [{ + key: "start", + value: function start(graphics) { + var icon = graphics.getComponent(componentNames.ICON); + icon.start(); + } + /** + * stop this drawing mode + * @param {Graphics} graphics - Graphics instance + * @override + */ + + }, { + key: "end", + value: function end(graphics) { + var icon = graphics.getComponent(componentNames.ICON); + icon.end(); + } + }]); + + return IconDrawingMode; +}(drawingMode); + +/* harmony default export */ var drawingMode_icon = (IconDrawingMode); +;// CONCATENATED MODULE: ./src/js/drawingMode/zoom.js + + + + + + + +function drawingMode_zoom_createSuper(Derived) { var hasNativeReflectConstruct = drawingMode_zoom_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function drawingMode_zoom_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +/** + * @author NHN. FE Development Team + * @fileoverview ZoomDrawingMode class + */ + + +/** + * ZoomDrawingMode class + * @class + * @ignore + */ + +var ZoomDrawingMode = /*#__PURE__*/function (_DrawingMode) { + _inherits(ZoomDrawingMode, _DrawingMode); + + var _super = drawingMode_zoom_createSuper(ZoomDrawingMode); + + function ZoomDrawingMode() { + _classCallCheck(this, ZoomDrawingMode); + + return _super.call(this, drawingModes.ZOOM); + } + /** + * start this drawing mode + * @param {Graphics} graphics - Graphics instance + * @override + */ + + + _createClass(ZoomDrawingMode, [{ + key: "start", + value: function start(graphics) { + var zoom = graphics.getComponent(componentNames.ZOOM); + zoom.start(); + } + /** + * stop this drawing mode + * @param {Graphics} graphics - Graphics instance + * @override + */ + + }, { + key: "end", + value: function end(graphics) { + var zoom = graphics.getComponent(componentNames.ZOOM); + zoom.end(); + } + }]); + + return ZoomDrawingMode; +}(drawingMode); + +/* harmony default export */ var drawingMode_zoom = (ZoomDrawingMode); +;// CONCATENATED MODULE: ./src/js/helper/selectionModifyHelper.js + + +/** + * @author NHN. FE Development Team + * @fileoverview Selection modification helper + */ + + +/** + * Cached selection's info + * @type {Array} + * @private + */ + +var cachedUndoDataForChangeDimension = null; +/** + * Set cached undo data + * @param {Array} undoData - selection object + * @private + */ + +function setCachedUndoDataForDimension(undoData) { + cachedUndoDataForChangeDimension = undoData; +} +/** + * Get cached undo data + * @returns {Object} cached undo data + * @private + */ + +function getCachedUndoDataForDimension() { + return cachedUndoDataForChangeDimension; +} +/** + * Make undo data + * @param {fabric.Object} obj - selection object + * @param {Function} undoDatumMaker - make undo datum + * @returns {Array} undoData + * @private + */ + +function makeSelectionUndoData(obj, undoDatumMaker) { + var undoData; + + if (obj.type === 'activeSelection') { + var _context; + + undoData = map_default()(_context = obj.getObjects()).call(_context, function (item) { + var angle = item.angle, + left = item.left, + top = item.top, + scaleX = item.scaleX, + scaleY = item.scaleY, + width = item.width, + height = item.height; + fabric.fabric.util.addTransformToObject(item, obj.calcTransformMatrix()); + var result = undoDatumMaker(item); + item.set({ + angle: angle, + left: left, + top: top, + width: width, + height: height, + scaleX: scaleX, + scaleY: scaleY + }); + return result; + }); + } else { + undoData = [undoDatumMaker(obj)]; + } + + return undoData; +} +/** + * Make undo datum + * @param {number} id - object id + * @param {fabric.Object} obj - selection object + * @param {boolean} isSelection - whether or not object is selection + * @returns {Object} undo datum + * @private + */ + +function makeSelectionUndoDatum(id, obj, isSelection) { + return isSelection ? { + id: id, + width: obj.width, + height: obj.height, + top: obj.top, + left: obj.left, + angle: obj.angle, + scaleX: obj.scaleX, + scaleY: obj.scaleY + } : (0,external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_.extend)({ + id: id + }, obj); +} +;// CONCATENATED MODULE: ./src/js/component/resize.js + + + + + + + + +function component_resize_createSuper(Derived) { var hasNativeReflectConstruct = component_resize_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function component_resize_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + + + +/** + * Resize components + * @param {Graphics} graphics - Graphics instance + * @extends {Component} + * @class Resize + * @ignore + */ + +var resize_Resize = /*#__PURE__*/function (_Component) { + _inherits(Resize, _Component); + + var _super = component_resize_createSuper(Resize); + + function Resize(graphics) { + var _this; + + _classCallCheck(this, Resize); + + _this = _super.call(this, componentNames.RESIZE, graphics); + /** + * Current dimensions + * @type {Object} + * @private + */ + + _this._dimensions = null; + /** + * Original dimensions + * @type {Object} + * @private + */ + + _this._originalDimensions = null; + return _this; + } + /** + * Get current dimensions + * @returns {object} + */ + + + _createClass(Resize, [{ + key: "getCurrentDimensions", + value: function getCurrentDimensions() { + var canvasImage = this.getCanvasImage(); + + if (!this._dimensions && canvasImage) { + var width = canvasImage.width, + height = canvasImage.height; + this._dimensions = { + width: width, + height: height + }; + } + + return this._dimensions; + } + /** + * Get original dimensions + * @returns {object} + */ + + }, { + key: "getOriginalDimensions", + value: function getOriginalDimensions() { + return this._originalDimensions; + } + /** + * Set original dimensions + * @param {object} dimensions - Dimensions + */ + + }, { + key: "setOriginalDimensions", + value: function setOriginalDimensions(dimensions) { + this._originalDimensions = dimensions; + } + /** + * Resize Image + * @param {Object} dimensions - Resize dimensions + * @returns {Promise} + */ + + }, { + key: "resize", + value: function resize(dimensions) { + var canvasImage = this.getCanvasImage(); + var width = canvasImage.width, + height = canvasImage.height, + scaleX = canvasImage.scaleX, + scaleY = canvasImage.scaleY; + var dimensionsWidth = dimensions.width, + dimensionsHeight = dimensions.height; + var scaleValues = { + scaleX: dimensionsWidth ? dimensionsWidth / width : scaleX, + scaleY: dimensionsHeight ? dimensionsHeight / height : scaleY + }; + + if (scaleX !== scaleValues.scaleX || scaleY !== scaleValues.scaleY) { + canvasImage.set(scaleValues).setCoords(); + this._dimensions = { + width: canvasImage.width * canvasImage.scaleX, + height: canvasImage.height * canvasImage.scaleY + }; + } + + this.adjustCanvasDimensionBase(); + return promise_default().resolve(); + } + /** + * Start resizing + */ + + }, { + key: "start", + value: function start() { + var dimensions = this.getCurrentDimensions(); + this.setOriginalDimensions(dimensions); + } + /** + * End resizing + */ + + }, { + key: "end", + value: function end() {} + }]); + + return Resize; +}(component); + +/* harmony default export */ var component_resize = (resize_Resize); +;// CONCATENATED MODULE: ./src/js/drawingMode/resize.js + + + + + + + +function drawingMode_resize_createSuper(Derived) { var hasNativeReflectConstruct = drawingMode_resize_isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = construct_default()(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function drawingMode_resize_isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !(construct_default())) return false; if ((construct_default()).sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(construct_default()(Boolean, [], function () {})); return true; } catch (e) { return false; } } + + + +/** + * ResizeDrawingMode class + * @class + * @ignore + */ + +var ResizeDrawingMode = /*#__PURE__*/function (_DrawingMode) { + _inherits(ResizeDrawingMode, _DrawingMode); + + var _super = drawingMode_resize_createSuper(ResizeDrawingMode); + + function ResizeDrawingMode() { + _classCallCheck(this, ResizeDrawingMode); + + return _super.call(this, drawingModes.RESIZE); + } + /** + * start this drawing mode + * @param {Graphics} graphics - Graphics instance + * @override + */ + + + _createClass(ResizeDrawingMode, [{ + key: "start", + value: function start(graphics) { + var resize = graphics.getComponent(componentNames.RESIZE); + resize.start(); + } + /** + * stop this drawing mode + * @param {Graphics} graphics - Graphics instance + * @override + */ + + }, { + key: "end", + value: function end(graphics) { + var resize = graphics.getComponent(componentNames.RESIZE); + resize.end(); + } + }]); + + return ResizeDrawingMode; +}(drawingMode); + +/* harmony default export */ var drawingMode_resize = (ResizeDrawingMode); +;// CONCATENATED MODULE: ./src/js/graphics.js + + + + + + + + + + +/** + * @author NHN. FE Development Team + * @fileoverview Graphics module + */ + + + + + + + + + + + + + + + + + + + + + + + + + +var extend = (external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()).extend, + stamp = (external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()).stamp, + isArray = (external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()).isArray, + isString = (external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()).isString, + forEachArray = (external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()).forEachArray, + forEachOwnProperties = (external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()).forEachOwnProperties, + graphics_CustomEvents = (external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()).CustomEvents; +var DEFAULT_CSS_MAX_WIDTH = 1000; +var DEFAULT_CSS_MAX_HEIGHT = 800; +var EXTRA_PX_FOR_PASTE = 10; +var cssOnly = { + cssOnly: true +}; +var backstoreOnly = { + backstoreOnly: true +}; +/** + * Graphics class + * @class + * @param {string|HTMLElement} wrapper - Wrapper's element or selector + * @param {Object} [option] - Canvas max width & height of css + * @param {number} option.cssMaxWidth - Canvas css-max-width + * @param {number} option.cssMaxHeight - Canvas css-max-height + * @ignore + */ + +var Graphics = /*#__PURE__*/function () { + function Graphics(element) { + var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11; + + var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}, + cssMaxWidth = _ref.cssMaxWidth, + cssMaxHeight = _ref.cssMaxHeight; + + _classCallCheck(this, Graphics); + + /** + * Fabric image instance + * @type {fabric.Image} + */ + this.canvasImage = null; + /** + * Max width of canvas elements + * @type {number} + */ + + this.cssMaxWidth = cssMaxWidth || DEFAULT_CSS_MAX_WIDTH; + /** + * Max height of canvas elements + * @type {number} + */ + + this.cssMaxHeight = cssMaxHeight || DEFAULT_CSS_MAX_HEIGHT; + /** + * cropper Selection Style + * @type {Object} + */ + + this.cropSelectionStyle = {}; + /** + * target fabric object for copy paste feature + * @type {fabric.Object} + * @private + */ + + this.targetObjectForCopyPaste = null; + /** + * Image name + * @type {string} + */ + + this.imageName = ''; + /** + * Object Map + * @type {Object} + * @private + */ + + this._objects = {}; + /** + * Fabric-Canvas instance + * @type {fabric.Canvas} + * @private + */ + + this._canvas = null; + /** + * Drawing mode + * @type {string} + * @private + */ + + this._drawingMode = drawingModes.NORMAL; + /** + * DrawingMode map + * @type {Object.} + * @private + */ + + this._drawingModeMap = {}; + /** + * Component map + * @type {Object.} + * @private + */ + + this._componentMap = {}; + /** + * fabric event handlers + * @type {Object.} + * @private + */ + + this._handler = { + onMouseDown: bind_default()(_context = this._onMouseDown).call(_context, this), + onObjectAdded: bind_default()(_context2 = this._onObjectAdded).call(_context2, this), + onObjectRemoved: bind_default()(_context3 = this._onObjectRemoved).call(_context3, this), + onObjectMoved: bind_default()(_context4 = this._onObjectMoved).call(_context4, this), + onObjectScaled: bind_default()(_context5 = this._onObjectScaled).call(_context5, this), + onObjectModified: bind_default()(_context6 = this._onObjectModified).call(_context6, this), + onObjectRotated: bind_default()(_context7 = this._onObjectRotated).call(_context7, this), + onObjectSelected: bind_default()(_context8 = this._onObjectSelected).call(_context8, this), + onPathCreated: bind_default()(_context9 = this._onPathCreated).call(_context9, this), + onSelectionCleared: bind_default()(_context10 = this._onSelectionCleared).call(_context10, this), + onSelectionCreated: bind_default()(_context11 = this._onSelectionCreated).call(_context11, this) + }; + + this._setObjectCachingToFalse(); + + this._setCanvasElement(element); + + this._createDrawingModeInstances(); + + this._createComponents(); + + this._attachCanvasEvents(); + + this._attachZoomEvents(); + } + /** + * Destroy canvas element + */ + + + _createClass(Graphics, [{ + key: "destroy", + value: function destroy() { + var wrapperEl = this._canvas.wrapperEl; + + this._canvas.clear(); + + wrapperEl.parentNode.removeChild(wrapperEl); + + this._detachZoomEvents(); + } + /** + * Attach zoom events + */ + + }, { + key: "_attachZoomEvents", + value: function _attachZoomEvents() { + var zoom = this.getComponent(componentNames.ZOOM); + zoom.attachKeyboardZoomEvents(); + } + /** + * Detach zoom events + */ + + }, { + key: "_detachZoomEvents", + value: function _detachZoomEvents() { + var zoom = this.getComponent(componentNames.ZOOM); + zoom.detachKeyboardZoomEvents(); + } + /** + * Deactivates all objects on canvas + * @returns {Graphics} this + */ + + }, { + key: "deactivateAll", + value: function deactivateAll() { + this._canvas.discardActiveObject(); + + return this; + } + /** + * Renders all objects on canvas + * @returns {Graphics} this + */ + + }, { + key: "renderAll", + value: function renderAll() { + this._canvas.renderAll(); + + return this; + } + /** + * Adds objects on canvas + * @param {Object|Array} objects - objects + */ + + }, { + key: "add", + value: function add(objects) { + var _this$_canvas; + + var theArgs = []; + + if (isArray(objects)) { + theArgs = objects; + } else { + theArgs.push(objects); + } + + (_this$_canvas = this._canvas).add.apply(_this$_canvas, _toConsumableArray(theArgs)); + } + /** + * Removes the object or group + * @param {Object} target - graphics object or group + * @returns {boolean} true if contains or false + */ + + }, { + key: "contains", + value: function contains(target) { + return this._canvas.contains(target); + } + /** + * Gets all objects or group + * @returns {Array} all objects, shallow copy + */ + + }, { + key: "getObjects", + value: function getObjects() { + var _context12; + + return slice_default()(_context12 = this._canvas.getObjects()).call(_context12); + } + /** + * Get an object by id + * @param {number} id - object id + * @returns {fabric.Object} object corresponding id + */ + + }, { + key: "getObject", + value: function getObject(id) { + return this._objects[id]; + } + /** + * Removes the object or group + * @param {Object} target - graphics object or group + */ + + }, { + key: "remove", + value: function remove(target) { + this._canvas.remove(target); + } + /** + * Removes all object or group + * @param {boolean} includesBackground - remove the background image or not + * @returns {Array} all objects array which is removed + */ + + }, { + key: "removeAll", + value: function removeAll(includesBackground) { + var _context13; + + var canvas = this._canvas; + + var objects = slice_default()(_context13 = canvas.getObjects()).call(_context13); + + canvas.remove.apply(canvas, _toConsumableArray(this._canvas.getObjects())); + + if (includesBackground) { + canvas.clear(); + } + + return objects; + } + /** + * Removes an object or group by id + * @param {number} id - object id + * @returns {Array} removed objects + */ + + }, { + key: "removeObjectById", + value: function removeObjectById(id) { + var objects = []; + var canvas = this._canvas; + var target = this.getObject(id); + var isValidGroup = target && target.isType('group') && !target.isEmpty(); + + if (isValidGroup) { + canvas.discardActiveObject(); // restore states for each objects + + target.forEachObject(function (obj) { + objects.push(obj); + canvas.remove(obj); + }); + } else if (canvas.contains(target)) { + objects.push(target); + canvas.remove(target); + } + + return objects; + } + /** + * Get an id by object instance + * @param {fabric.Object} object object + * @returns {number} object id if it exists or null + */ + + }, { + key: "getObjectId", + value: function getObjectId(object) { + var key = null; + + for (key in this._objects) { + if (this._objects.hasOwnProperty(key)) { + if (object === this._objects[key]) { + return key; + } + } + } + + return null; + } + /** + * Gets an active object or group + * @returns {Object} active object or group instance + */ + + }, { + key: "getActiveObject", + value: function getActiveObject() { + return this._canvas._activeObject; + } + /** + * Returns the object ID to delete the object. + * @returns {number} object id for remove + */ + + }, { + key: "getActiveObjectIdForRemove", + value: function getActiveObjectIdForRemove() { + var activeObject = this.getActiveObject(); + var type = activeObject.type, + left = activeObject.left, + top = activeObject.top; + var isSelection = type === 'activeSelection'; + + if (isSelection) { + var group = new fabric.fabric.Group(_toConsumableArray(activeObject.getObjects()), { + left: left, + top: top + }); + return this._addFabricObject(group); + } + + return this.getObjectId(activeObject); + } + /** + * Verify that you are ready to erase the object. + * @returns {boolean} ready for object remove + */ + + }, { + key: "isReadyRemoveObject", + value: function isReadyRemoveObject() { + var activeObject = this.getActiveObject(); + return activeObject && !activeObject.isEditing; + } + /** + * Gets an active group object + * @returns {Object} active group object instance + */ + + }, { + key: "getActiveObjects", + value: function getActiveObjects() { + var activeObject = this._canvas._activeObject; + return activeObject && activeObject.type === 'activeSelection' ? activeObject : null; + } + /** + * Get Active object Selection from object ids + * @param {Array.} objects - fabric objects + * @returns {Object} target - target object group + */ + + }, { + key: "getActiveSelectionFromObjects", + value: function getActiveSelectionFromObjects(objects) { + var canvas = this.getCanvas(); + return new fabric.fabric.ActiveSelection(objects, { + canvas: canvas + }); + } + /** + * Activates an object or group + * @param {Object} target - target object or group + */ + + }, { + key: "setActiveObject", + value: function setActiveObject(target) { + this._canvas.setActiveObject(target); + } + /** + * Set Crop selection style + * @param {Object} style - Selection styles + */ + + }, { + key: "setCropSelectionStyle", + value: function setCropSelectionStyle(style) { + this.cropSelectionStyle = style; + } + /** + * Get component + * @param {string} name - Component name + * @returns {Component} + */ + + }, { + key: "getComponent", + value: function getComponent(name) { + return this._componentMap[name]; + } + /** + * Get current drawing mode + * @returns {string} + */ + + }, { + key: "getDrawingMode", + value: function getDrawingMode() { + return this._drawingMode; + } + /** + * Start a drawing mode. If the current mode is not 'NORMAL', 'stopDrawingMode()' will be called first. + * @param {String} mode Can be one of 'CROPPER', 'FREE_DRAWING', 'LINE', 'TEXT', 'SHAPE' + * @param {Object} [option] parameters of drawing mode, it's available with 'FREE_DRAWING', 'LINE_DRAWING' + * @param {Number} [option.width] brush width + * @param {String} [option.color] brush color + * @returns {boolean} true if success or false + */ + + }, { + key: "startDrawingMode", + value: function startDrawingMode(mode, option) { + if (this._isSameDrawingMode(mode)) { + return true; + } // If the current mode is not 'NORMAL', 'stopDrawingMode()' will be called first. + + + this.stopDrawingMode(); + + var drawingModeInstance = this._getDrawingModeInstance(mode); + + if (drawingModeInstance && drawingModeInstance.start) { + drawingModeInstance.start(this, option); + this._drawingMode = mode; + } + + return !!drawingModeInstance; + } + /** + * Stop the current drawing mode and back to the 'NORMAL' mode + */ + + }, { + key: "stopDrawingMode", + value: function stopDrawingMode() { + if (this._isSameDrawingMode(drawingModes.NORMAL)) { + return; + } + + var drawingModeInstance = this._getDrawingModeInstance(this.getDrawingMode()); + + if (drawingModeInstance && drawingModeInstance.end) { + drawingModeInstance.end(this); + } + + this._drawingMode = drawingModes.NORMAL; + } + /** + * Change zoom of canvas + * @param {{x: number, y: number}} center - center of zoom + * @param {number} zoomLevel - zoom level + */ + + }, { + key: "zoom", + value: function zoom(_ref2, zoomLevel) { + var x = _ref2.x, + y = _ref2.y; + var zoom = this.getComponent(componentNames.ZOOM); + zoom.zoom({ + x: x, + y: y + }, zoomLevel); + } + /** + * Get zoom mode + * @returns {string} + */ + + }, { + key: "getZoomMode", + value: function getZoomMode() { + var zoom = this.getComponent(componentNames.ZOOM); + return zoom.mode; + } + /** + * Start zoom-in mode + */ + + }, { + key: "startZoomInMode", + value: function startZoomInMode() { + var zoom = this.getComponent(componentNames.ZOOM); + zoom.startZoomInMode(); + } + /** + * Stop zoom-in mode + */ + + }, { + key: "endZoomInMode", + value: function endZoomInMode() { + var zoom = this.getComponent(componentNames.ZOOM); + zoom.endZoomInMode(); + } + /** + * Zoom out one step + */ + + }, { + key: "zoomOut", + value: function zoomOut() { + var zoom = this.getComponent(componentNames.ZOOM); + zoom.zoomOut(); + } + /** + * Start hand mode + */ + + }, { + key: "startHandMode", + value: function startHandMode() { + var zoom = this.getComponent(componentNames.ZOOM); + zoom.startHandMode(); + } + /** + * Stop hand mode + */ + + }, { + key: "endHandMode", + value: function endHandMode() { + var zoom = this.getComponent(componentNames.ZOOM); + zoom.endHandMode(); + } + /** + * Zoom reset + */ + + }, { + key: "resetZoom", + value: function resetZoom() { + var zoom = this.getComponent(componentNames.ZOOM); + zoom.resetZoom(); + } + /** + * To data url from canvas + * @param {Object} options - options for toDataURL + * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png" + * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg. + * @param {Number} [options.multiplier=1] Multiplier to scale by + * @param {Number} [options.left] Cropping left offset. Introduced in fabric v1.2.14 + * @param {Number} [options.top] Cropping top offset. Introduced in fabric v1.2.14 + * @param {Number} [options.width] Cropping width. Introduced in fabric v1.2.14 + * @param {Number} [options.height] Cropping height. Introduced in fabric v1.2.14 + * @returns {string} A DOMString containing the requested data URI. + */ + + }, { + key: "toDataURL", + value: function toDataURL(options) { + var cropper = this.getComponent(componentNames.CROPPER); + cropper.changeVisibility(false); + + var dataUrl = this._canvas && this._canvas.toDataURL(options); + + cropper.changeVisibility(true); + return dataUrl; + } + /** + * Save image(background) of canvas + * @param {string} name - Name of image + * @param {?fabric.Image} canvasImage - Fabric image instance + */ + + }, { + key: "setCanvasImage", + value: function setCanvasImage(name, canvasImage) { + if (canvasImage) { + stamp(canvasImage); + } + + this.imageName = name; + this.canvasImage = canvasImage; + } + /** + * Set css max dimension + * @param {{width: number, height: number}} maxDimension - Max width & Max height + */ + + }, { + key: "setCssMaxDimension", + value: function setCssMaxDimension(maxDimension) { + this.cssMaxWidth = maxDimension.width || this.cssMaxWidth; + this.cssMaxHeight = maxDimension.height || this.cssMaxHeight; + } + /** + * Adjust canvas dimension with scaling image + */ + + }, { + key: "adjustCanvasDimension", + value: function adjustCanvasDimension() { + this.adjustCanvasDimensionBase(this.canvasImage.scale(1)); + } + }, { + key: "adjustCanvasDimensionBase", + value: function adjustCanvasDimensionBase() { + var canvasImage = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null; + + if (!canvasImage) { + canvasImage = this.canvasImage; + } + + var _canvasImage$getBound = canvasImage.getBoundingRect(), + width = _canvasImage$getBound.width, + height = _canvasImage$getBound.height; + + var maxDimension = this._calcMaxDimension(width, height); + + this.setCanvasCssDimension({ + width: '100%', + height: '100%', + // Set height '' for IE9 + 'max-width': "".concat(maxDimension.width, "px"), + 'max-height': "".concat(maxDimension.height, "px") + }); + this.setCanvasBackstoreDimension({ + width: width, + height: height + }); + + this._canvas.centerObject(canvasImage); + } + /** + * Set canvas dimension - css only + * {@link http://fabricjs.com/docs/fabric.Canvas.html#setDimensions} + * @param {Object} dimension - Canvas css dimension + */ + + }, { + key: "setCanvasCssDimension", + value: function setCanvasCssDimension(dimension) { + this._canvas.setDimensions(dimension, cssOnly); + } + /** + * Set canvas dimension - backstore only + * {@link http://fabricjs.com/docs/fabric.Canvas.html#setDimensions} + * @param {Object} dimension - Canvas backstore dimension + */ + + }, { + key: "setCanvasBackstoreDimension", + value: function setCanvasBackstoreDimension(dimension) { + this._canvas.setDimensions(dimension, backstoreOnly); + } + /** + * Set image properties + * {@link http://fabricjs.com/docs/fabric.Image.html#set} + * @param {Object} setting - Image properties + * @param {boolean} [withRendering] - If true, The changed image will be reflected in the canvas + */ + + }, { + key: "setImageProperties", + value: function setImageProperties(setting, withRendering) { + var canvasImage = this.canvasImage; + + if (!canvasImage) { + return; + } + + canvasImage.set(setting).setCoords(); + + if (withRendering) { + this._canvas.renderAll(); + } + } + /** + * Returns canvas element of fabric.Canvas[[lower-canvas]] + * @returns {HTMLCanvasElement} + */ + + }, { + key: "getCanvasElement", + value: function getCanvasElement() { + return this._canvas.getElement(); + } + /** + * Get fabric.Canvas instance + * @returns {fabric.Canvas} + */ + + }, { + key: "getCanvas", + value: function getCanvas() { + return this._canvas; + } + /** + * Get canvasImage (fabric.Image instance) + * @returns {fabric.Image} + */ + + }, { + key: "getCanvasImage", + value: function getCanvasImage() { + return this.canvasImage; + } + /** + * Get image name + * @returns {string} + */ + + }, { + key: "getImageName", + value: function getImageName() { + return this.imageName; + } + /** + * Add image object on canvas + * @param {string} imgUrl - Image url to make object + * @returns {Promise} + */ + + }, { + key: "addImageObject", + value: function addImageObject(imgUrl) { + var _context14, + _this = this; + + var callback = bind_default()(_context14 = this._callbackAfterLoadingImageObject).call(_context14, this); + + return new (promise_default())(function (resolve) { + fabric.fabric.Image.fromURL(imgUrl, function (image) { + callback(image); + resolve(_this.createObjectProperties(image)); + }, { + crossOrigin: 'Anonymous' + }); + }); + } + /** + * Get center position of canvas + * @returns {Object} {left, top} + */ + + }, { + key: "getCenter", + value: function getCenter() { + return this._canvas.getCenter(); + } + /** + * Get cropped rect + * @returns {Object} rect + */ + + }, { + key: "getCropzoneRect", + value: function getCropzoneRect() { + return this.getComponent(componentNames.CROPPER).getCropzoneRect(); + } + /** + * Get cropped rect + * @param {number} [mode] cropzone rect mode + */ + + }, { + key: "setCropzoneRect", + value: function setCropzoneRect(mode) { + this.getComponent(componentNames.CROPPER).setCropzoneRect(mode); + } + /** + * Get cropped image data + * @param {Object} cropRect cropzone rect + * @param {Number} cropRect.left left position + * @param {Number} cropRect.top top position + * @param {Number} cropRect.width width + * @param {Number} cropRect.height height + * @returns {?{imageName: string, url: string}} cropped Image data + */ + + }, { + key: "getCroppedImageData", + value: function getCroppedImageData(cropRect) { + return this.getComponent(componentNames.CROPPER).getCroppedImageData(cropRect); + } + /** + * Set brush option + * @param {Object} option brush option + * @param {Number} option.width width + * @param {String} option.color color like 'FFFFFF', 'rgba(0, 0, 0, 0.5)' + */ + + }, { + key: "setBrush", + value: function setBrush(option) { + var drawingMode = this._drawingMode; + var compName = componentNames.FREE_DRAWING; + + if (drawingMode === drawingModes.LINE_DRAWING) { + compName = componentNames.LINE; + } + + this.getComponent(compName).setBrush(option); + } + /** + * Set states of current drawing shape + * @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle') + * @param {Object} [options] - Shape options + * @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or + * Shape foreground color (ex: '#fff', 'transparent') + * @param {string} [options.stoke] - Shape outline color + * @param {number} [options.strokeWidth] - Shape outline width + * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) + * @param {number} [options.height] - Height value (When type option is 'rect', this options can use) + * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) + * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) + * @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not + */ + + }, { + key: "setDrawingShape", + value: function setDrawingShape(type, options) { + this.getComponent(componentNames.SHAPE).setStates(type, options); + } + /** + * Set style of current drawing icon + * @param {string} type - icon type (ex: 'icon-arrow', 'icon-star') + * @param {Object} [iconColor] - Icon color + */ + + }, { + key: "setIconStyle", + value: function setIconStyle(type, iconColor) { + this.getComponent(componentNames.ICON).setStates(type, iconColor); + } + /** + * Register icon paths + * @param {Object} pathInfos - Path infos + * @param {string} pathInfos.key - key + * @param {string} pathInfos.value - value + */ + + }, { + key: "registerPaths", + value: function registerPaths(pathInfos) { + this.getComponent(componentNames.ICON).registerPaths(pathInfos); + } + /** + * Change cursor style + * @param {string} cursorType - cursor type + */ + + }, { + key: "changeCursor", + value: function changeCursor(cursorType) { + var canvas = this.getCanvas(); + canvas.defaultCursor = cursorType; + canvas.renderAll(); + } + /** + * Whether it has the filter or not + * @param {string} type - Filter type + * @returns {boolean} true if it has the filter + */ + + }, { + key: "hasFilter", + value: function hasFilter(type) { + return this.getComponent(componentNames.FILTER).hasFilter(type); + } + /** + * Set selection style of fabric object by init option + * @param {Object} styles - Selection styles + */ + + }, { + key: "setSelectionStyle", + value: function setSelectionStyle(styles) { + extend(fObjectOptions.SELECTION_STYLE, styles); + } + /** + * Set object properties + * @param {number} id - object id + * @param {Object} props - props + * @param {string} [props.fill] Color + * @param {string} [props.fontFamily] Font type for text + * @param {number} [props.fontSize] Size + * @param {string} [props.fontStyle] Type of inclination (normal / italic) + * @param {string} [props.fontWeight] Type of thicker or thinner looking (normal / bold) + * @param {string} [props.textAlign] Type of text align (left / center / right) + * @param {string} [props.textDecoration] Type of line (underline / line-through / overline) + * @returns {Object} applied properties + */ + + }, { + key: "setObjectProperties", + value: function setObjectProperties(id, props) { + var object = this.getObject(id); + var clone = extend({}, props); + object.set(clone); + object.setCoords(); + this.getCanvas().renderAll(); + return clone; + } + /** + * Get object properties corresponding key + * @param {number} id - object id + * @param {Array|ObjectProps|string} keys - property's key + * @returns {Object} properties + */ + + }, { + key: "getObjectProperties", + value: function getObjectProperties(id, keys) { + var object = this.getObject(id); + var props = {}; + + if (isString(keys)) { + props[keys] = object[keys]; + } else if (isArray(keys)) { + forEachArray(keys, function (value) { + props[value] = object[value]; + }); + } else { + forEachOwnProperties(keys, function (value, key) { + props[key] = object[key]; + }); + } + + return props; + } + /** + * Get object position by originX, originY + * @param {number} id - object id + * @param {string} originX - can be 'left', 'center', 'right' + * @param {string} originY - can be 'top', 'center', 'bottom' + * @returns {Object} {{x:number, y: number}} position by origin if id is valid, or null + */ + + }, { + key: "getObjectPosition", + value: function getObjectPosition(id, originX, originY) { + var targetObj = this.getObject(id); + + if (!targetObj) { + return null; + } + + return targetObj.getPointByOrigin(originX, originY); + } + /** + * Set object position by originX, originY + * @param {number} id - object id + * @param {Object} posInfo - position object + * @param {number} posInfo.x - x position + * @param {number} posInfo.y - y position + * @param {string} posInfo.originX - can be 'left', 'center', 'right' + * @param {string} posInfo.originY - can be 'top', 'center', 'bottom' + * @returns {boolean} true if target id is valid or false + */ + + }, { + key: "setObjectPosition", + value: function setObjectPosition(id, posInfo) { + var targetObj = this.getObject(id); + var x = posInfo.x, + y = posInfo.y, + originX = posInfo.originX, + originY = posInfo.originY; + + if (!targetObj) { + return false; + } + + var targetOrigin = targetObj.getPointByOrigin(originX, originY); + var centerOrigin = targetObj.getPointByOrigin('center', 'center'); + var diffX = centerOrigin.x - targetOrigin.x; + var diffY = centerOrigin.y - targetOrigin.y; + targetObj.set({ + left: x + diffX, + top: y + diffY + }); + targetObj.setCoords(); + return true; + } + /** + * Get the canvas size + * @returns {Object} {{width: number, height: number}} image size + */ + + }, { + key: "getCanvasSize", + value: function getCanvasSize() { + var image = this.getCanvasImage(); + return { + width: image ? image.width : 0, + height: image ? image.height : 0 + }; + } + /** + * Create fabric static canvas + * @returns {Object} {{width: number, height: number}} image size + */ + + }, { + key: "createStaticCanvas", + value: function createStaticCanvas() { + var staticCanvas = new fabric.fabric.StaticCanvas(); + staticCanvas.set({ + enableRetinaScaling: false + }); + return staticCanvas; + } + /** + * Get a DrawingMode instance + * @param {string} modeName - DrawingMode Class Name + * @returns {DrawingMode} DrawingMode instance + * @private + */ + + }, { + key: "_getDrawingModeInstance", + value: function _getDrawingModeInstance(modeName) { + return this._drawingModeMap[modeName]; + } + /** + * Set object caching to false. This brought many bugs when draw Shape & cropzone + * @see http://fabricjs.com/fabric-object-caching + * @private + */ + + }, { + key: "_setObjectCachingToFalse", + value: function _setObjectCachingToFalse() { + fabric.fabric.Object.prototype.objectCaching = false; + } + /** + * Set canvas element to fabric.Canvas + * @param {Element|string} element - Wrapper or canvas element or selector + * @private + */ + + }, { + key: "_setCanvasElement", + value: function _setCanvasElement(element) { + var selectedElement; + var canvasElement; + + if (element.nodeType) { + selectedElement = element; + } else { + selectedElement = document.querySelector(element); + } + + if (selectedElement.nodeName.toUpperCase() !== 'CANVAS') { + canvasElement = document.createElement('canvas'); + selectedElement.appendChild(canvasElement); + } + + this._canvas = new fabric.fabric.Canvas(canvasElement, { + containerClass: 'tui-image-editor-canvas-container', + enableRetinaScaling: false + }); + } + /** + * Creates DrawingMode instances + * @private + */ + + }, { + key: "_createDrawingModeInstances", + value: function _createDrawingModeInstances() { + this._register(this._drawingModeMap, new drawingMode_cropper()); + + this._register(this._drawingModeMap, new drawingMode_freeDrawing()); + + this._register(this._drawingModeMap, new lineDrawing()); + + this._register(this._drawingModeMap, new drawingMode_shape()); + + this._register(this._drawingModeMap, new drawingMode_text()); + + this._register(this._drawingModeMap, new drawingMode_icon()); + + this._register(this._drawingModeMap, new drawingMode_zoom()); + + this._register(this._drawingModeMap, new drawingMode_resize()); + } + /** + * Create components + * @private + */ + + }, { + key: "_createComponents", + value: function _createComponents() { + this._register(this._componentMap, new imageLoader(this)); + + this._register(this._componentMap, new cropper(this)); + + this._register(this._componentMap, new component_flip(this)); + + this._register(this._componentMap, new rotation(this)); + + this._register(this._componentMap, new freeDrawing(this)); + + this._register(this._componentMap, new line(this)); + + this._register(this._componentMap, new component_text(this)); + + this._register(this._componentMap, new component_icon(this)); + + this._register(this._componentMap, new component_filter(this)); + + this._register(this._componentMap, new shape_Shape(this)); + + this._register(this._componentMap, new zoom(this)); + + this._register(this._componentMap, new component_resize(this)); + } + /** + * Register component + * @param {Object} map - map object + * @param {Object} module - module which has getName method + * @private + */ + + }, { + key: "_register", + value: function _register(map, module) { + map[module.getName()] = module; + } + /** + * Get the current drawing mode is same with given mode + * @param {string} mode drawing mode + * @returns {boolean} true if same or false + */ + + }, { + key: "_isSameDrawingMode", + value: function _isSameDrawingMode(mode) { + return this.getDrawingMode() === mode; + } + /** + * Calculate max dimension of canvas + * The css-max dimension is dynamically decided with maintaining image ratio + * The css-max dimension is lower than canvas dimension (attribute of canvas, not css) + * @param {number} width - Canvas width + * @param {number} height - Canvas height + * @returns {{width: number, height: number}} - Max width & Max height + * @private + */ + + }, { + key: "_calcMaxDimension", + value: function _calcMaxDimension(width, height) { + var wScaleFactor = this.cssMaxWidth / width; + var hScaleFactor = this.cssMaxHeight / height; + var cssMaxWidth = Math.min(width, this.cssMaxWidth); + var cssMaxHeight = Math.min(height, this.cssMaxHeight); + + if (wScaleFactor < 1 && wScaleFactor < hScaleFactor) { + cssMaxWidth = width * wScaleFactor; + cssMaxHeight = height * wScaleFactor; + } else if (hScaleFactor < 1 && hScaleFactor < wScaleFactor) { + cssMaxWidth = width * hScaleFactor; + cssMaxHeight = height * hScaleFactor; + } + + return { + width: Math.floor(cssMaxWidth), + height: Math.floor(cssMaxHeight) + }; + } + /** + * Callback function after loading image + * @param {fabric.Image} obj - Fabric image object + * @private + */ + + }, { + key: "_callbackAfterLoadingImageObject", + value: function _callbackAfterLoadingImageObject(obj) { + var centerPos = this.getCanvasImage().getCenterPoint(); + obj.set(fObjectOptions.SELECTION_STYLE); + obj.set({ + left: centerPos.x, + top: centerPos.y, + crossOrigin: 'Anonymous' + }); + this.getCanvas().add(obj).setActiveObject(obj); + } + /** + * Attach canvas's events + */ + + }, { + key: "_attachCanvasEvents", + value: function _attachCanvasEvents() { + var canvas = this._canvas; + var handler = this._handler; + canvas.on({ + 'mouse:down': handler.onMouseDown, + 'object:added': handler.onObjectAdded, + 'object:removed': handler.onObjectRemoved, + 'object:moving': handler.onObjectMoved, + 'object:scaling': handler.onObjectScaled, + 'object:modified': handler.onObjectModified, + 'object:rotating': handler.onObjectRotated, + 'path:created': handler.onPathCreated, + 'selection:cleared': handler.onSelectionCleared, + 'selection:created': handler.onSelectionCreated, + 'selection:updated': handler.onObjectSelected + }); + } + /** + * "mouse:down" canvas event handler + * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event + * @private + */ + + }, { + key: "_onMouseDown", + value: function _onMouseDown(fEvent) { + var _this2 = this; + + var event = fEvent.e, + target = fEvent.target; + + var originPointer = this._canvas.getPointer(event); + + if (target) { + var type = target.type; + var undoData = makeSelectionUndoData(target, function (item) { + return makeSelectionUndoDatum(_this2.getObjectId(item), item, type === 'activeSelection'); + }); + setCachedUndoDataForDimension(undoData); + } + + this.fire(eventNames.MOUSE_DOWN, event, originPointer); + } + /** + * "object:added" canvas event handler + * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event + * @private + */ + + }, { + key: "_onObjectAdded", + value: function _onObjectAdded(fEvent) { + var obj = fEvent.target; + + if (obj.isType('cropzone')) { + return; + } + + this._addFabricObject(obj); + } + /** + * "object:removed" canvas event handler + * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event + * @private + */ + + }, { + key: "_onObjectRemoved", + value: function _onObjectRemoved(fEvent) { + var obj = fEvent.target; + + this._removeFabricObject(stamp(obj)); + } + /** + * "object:moving" canvas event handler + * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event + * @private + */ + + }, { + key: "_onObjectMoved", + value: function _onObjectMoved(fEvent) { + var _this3 = this; + + this._lazyFire(eventNames.OBJECT_MOVED, function (object) { + return _this3.createObjectProperties(object); + }, fEvent.target); + } + /** + * "object:scaling" canvas event handler + * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event + * @private + */ + + }, { + key: "_onObjectScaled", + value: function _onObjectScaled(fEvent) { + var _this4 = this; + + this._lazyFire(eventNames.OBJECT_SCALED, function (object) { + return _this4.createObjectProperties(object); + }, fEvent.target); + } + /** + * "object:modified" canvas event handler + * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event + * @private + */ + + }, { + key: "_onObjectModified", + value: function _onObjectModified(fEvent) { + var target = fEvent.target; + + if (target.type === 'activeSelection') { + var items = target.getObjects(); + + for_each_default()(items).call(items, function (item) { + return item.fire('modifiedInGroup', target); + }); + } + + this.fire(eventNames.OBJECT_MODIFIED, target, this.getObjectId(target)); + } + /** + * "object:rotating" canvas event handler + * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event + * @private + */ + + }, { + key: "_onObjectRotated", + value: function _onObjectRotated(fEvent) { + var _this5 = this; + + this._lazyFire(eventNames.OBJECT_ROTATED, function (object) { + return _this5.createObjectProperties(object); + }, fEvent.target); + } + /** + * Lazy event emitter + * @param {string} eventName - event name + * @param {Function} paramsMaker - make param function + * @param {Object} [target] - Object of the event owner. + * @private + */ + + }, { + key: "_lazyFire", + value: function _lazyFire(eventName, paramsMaker, target) { + var _this6 = this; + + var existEventDelegation = target && target.canvasEventDelegation; + var delegationState = existEventDelegation ? target.canvasEventDelegation(eventName) : 'none'; + + if (delegationState === 'unregistered') { + target.canvasEventRegister(eventName, function (object) { + _this6.fire(eventName, paramsMaker(object)); + }); + } + + if (delegationState === 'none') { + this.fire(eventName, paramsMaker(target)); + } + } + /** + * "object:selected" canvas event handler + * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event + * @private + */ + + }, { + key: "_onObjectSelected", + value: function _onObjectSelected(fEvent) { + var target = fEvent.target; + var params = this.createObjectProperties(target); + this.fire(eventNames.OBJECT_ACTIVATED, params); + } + /** + * "path:created" canvas event handler + * @param {{path: fabric.Path}} obj - Path object + * @private + */ + + }, { + key: "_onPathCreated", + value: function _onPathCreated(obj) { + var _obj$path$getCenterPo = obj.path.getCenterPoint(), + left = _obj$path$getCenterPo.x, + top = _obj$path$getCenterPo.y; + + obj.path.set(extend({ + left: left, + top: top + }, fObjectOptions.SELECTION_STYLE)); + var params = this.createObjectProperties(obj.path); + this.fire(eventNames.ADD_OBJECT, params); + } + /** + * "selction:cleared" canvas event handler + * @private + */ + + }, { + key: "_onSelectionCleared", + value: function _onSelectionCleared() { + this.fire(eventNames.SELECTION_CLEARED); + } + /** + * "selction:created" canvas event handler + * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event + * @private + */ + + }, { + key: "_onSelectionCreated", + value: function _onSelectionCreated(fEvent) { + var target = fEvent.target; + var params = this.createObjectProperties(target); + this.fire(eventNames.OBJECT_ACTIVATED, params); + this.fire(eventNames.SELECTION_CREATED, fEvent.target); + } + /** + * Canvas discard selection all + */ + + }, { + key: "discardSelection", + value: function discardSelection() { + this._canvas.discardActiveObject(); + + this._canvas.renderAll(); + } + /** + * Canvas Selectable status change + * @param {boolean} selectable - expect status + */ + + }, { + key: "changeSelectableAll", + value: function changeSelectableAll(selectable) { + this._canvas.forEachObject(function (obj) { + obj.selectable = selectable; + obj.hoverCursor = selectable ? 'move' : 'crosshair'; + }); + } + /** + * Return object's properties + * @param {fabric.Object} obj - fabric object + * @returns {Object} properties object + */ + + }, { + key: "createObjectProperties", + value: function createObjectProperties(obj) { + var predefinedKeys = ['left', 'top', 'width', 'height', 'fill', 'stroke', 'strokeWidth', 'opacity', 'angle']; + var props = { + id: stamp(obj), + type: obj.type + }; + extend(props, getProperties(obj, predefinedKeys)); + + if (includes(['i-text', 'text'], obj.type)) { + extend(props, this._createTextProperties(obj, props)); + } else if (includes(['rect', 'triangle', 'circle'], obj.type)) { + var shapeComp = this.getComponent(componentNames.SHAPE); + extend(props, { + fill: shapeComp.makeFillPropertyForUserEvent(obj) + }); + } + + return props; + } + /** + * Get text object's properties + * @param {fabric.Object} obj - fabric text object + * @param {Object} props - properties + * @returns {Object} properties object + */ + + }, { + key: "_createTextProperties", + value: function _createTextProperties(obj) { + var predefinedKeys = ['text', 'fontFamily', 'fontSize', 'fontStyle', 'textAlign', 'textDecoration', 'fontWeight']; + var props = {}; + extend(props, getProperties(obj, predefinedKeys)); + return props; + } + /** + * Add object array by id + * @param {fabric.Object} obj - fabric object + * @returns {number} object id + */ + + }, { + key: "_addFabricObject", + value: function _addFabricObject(obj) { + var id = stamp(obj); + this._objects[id] = obj; + return id; + } + /** + * Remove an object in array yb id + * @param {number} id - object id + */ + + }, { + key: "_removeFabricObject", + value: function _removeFabricObject(id) { + delete this._objects[id]; + } + /** + * Reset targetObjectForCopyPaste value from activeObject + */ + + }, { + key: "resetTargetObjectForCopyPaste", + value: function resetTargetObjectForCopyPaste() { + var activeObject = this.getActiveObject(); + + if (activeObject) { + this.targetObjectForCopyPaste = activeObject; + } + } + /** + * Paste fabric object + * @returns {Promise} + */ + + }, { + key: "pasteObject", + value: function pasteObject() { + var _this7 = this; + + if (!this.targetObjectForCopyPaste) { + return promise_default().resolve([]); + } + + var targetObject = this.targetObjectForCopyPaste; + var isGroupSelect = targetObject.type === 'activeSelection'; + var targetObjects = isGroupSelect ? targetObject.getObjects() : [targetObject]; + var newTargetObject = null; + this.discardSelection(); + return this._cloneObject(targetObjects).then(function (addedObjects) { + if (addedObjects.length > 1) { + newTargetObject = _this7.getActiveSelectionFromObjects(addedObjects); + } else { + var _addedObjects = _slicedToArray(addedObjects, 1); + + newTargetObject = _addedObjects[0]; + } + + _this7.targetObjectForCopyPaste = newTargetObject; + + _this7.setActiveObject(newTargetObject); + }); + } + /** + * Clone object + * @param {fabric.Object} targetObjects - fabric object + * @returns {Promise} + * @private + */ + + }, { + key: "_cloneObject", + value: function _cloneObject(targetObjects) { + var _this8 = this; + + var addedObjects = map_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())).call((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()), targetObjects, function (targetObject) { + return _this8._cloneObjectItem(targetObject); + }); + + return promise_default().all(addedObjects); + } + /** + * Clone object one item + * @param {fabric.Object} targetObject - fabric object + * @returns {Promise} + * @private + */ + + }, { + key: "_cloneObjectItem", + value: function _cloneObjectItem(targetObject) { + var _this9 = this; + + return this._copyFabricObjectForPaste(targetObject).then(function (clonedObject) { + var objectProperties = _this9.createObjectProperties(clonedObject); + + _this9.add(clonedObject); + + _this9.fire(eventNames.ADD_OBJECT, objectProperties); + + return clonedObject; + }); + } + /** + * Copy fabric object with Changed position for copy and paste + * @param {fabric.Object} targetObject - fabric object + * @returns {Promise} + * @private + */ + + }, { + key: "_copyFabricObjectForPaste", + value: function _copyFabricObjectForPaste(targetObject) { + var _this10 = this; + + var addExtraPx = function addExtraPx(value, isReverse) { + return isReverse ? value - EXTRA_PX_FOR_PASTE : value + EXTRA_PX_FOR_PASTE; + }; + + return this._copyFabricObject(targetObject).then(function (clonedObject) { + var left = clonedObject.left, + top = clonedObject.top, + width = clonedObject.width, + height = clonedObject.height; + + var _this10$getCanvasSize = _this10.getCanvasSize(), + canvasWidth = _this10$getCanvasSize.width, + canvasHeight = _this10$getCanvasSize.height; + + var rightEdge = left + width / 2; + var bottomEdge = top + height / 2; + clonedObject.set(external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().extend({ + left: addExtraPx(left, rightEdge + EXTRA_PX_FOR_PASTE > canvasWidth), + top: addExtraPx(top, bottomEdge + EXTRA_PX_FOR_PASTE > canvasHeight) + }, fObjectOptions.SELECTION_STYLE)); + return clonedObject; + }); + } + /** + * Copy fabric object + * @param {fabric.Object} targetObject - fabric object + * @returns {Promise} + * @private + */ + + }, { + key: "_copyFabricObject", + value: function _copyFabricObject(targetObject) { + var _this11 = this; + + return new (promise_default())(function (resolve) { + targetObject.clone(function (cloned) { + var shapeComp = _this11.getComponent(componentNames.SHAPE); + + if (isShape(cloned)) { + shapeComp.processForCopiedObject(cloned, targetObject); + } + + resolve(cloned); + }); + }); + } + /** + * Get current dimensions + * @returns {object} + */ + + }, { + key: "getCurrentDimensions", + value: function getCurrentDimensions() { + var resize = this.getComponent(componentNames.RESIZE); + return resize.getCurrentDimensions(); + } + /** + * Get original dimensions + * @returns {object} + */ + + }, { + key: "getOriginalDimensions", + value: function getOriginalDimensions() { + var resize = this.getComponent(componentNames.RESIZE); + return resize.getOriginalDimensions(); + } + /** + * Set original dimensions + * @param {object} dimensions - Dimensions + */ + + }, { + key: "setOriginalDimensions", + value: function setOriginalDimensions(dimensions) { + var resize = this.getComponent(componentNames.RESIZE); + resize.setOriginalDimensions(dimensions); + } + /** + * Resize Image + * @param {Object} dimensions - Resize dimensions + * @returns {Promise} + */ + + }, { + key: "resize", + value: function resize(dimensions) { + var resize = this.getComponent(componentNames.RESIZE); + return resize.resize(dimensions); + } + }]); + + return Graphics; +}(); + +graphics_CustomEvents.mixin(Graphics); +/* harmony default export */ var graphics = (Graphics); +;// CONCATENATED MODULE: ./src/js/imageEditor.js + + + + + + + + + + +/** + * @author NHN. FE Development Team + * @fileoverview Image-editor application class + */ + + + + + + + + + + + +var isUndefined = (external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()).isUndefined, + imageEditor_forEach = for_each_default()((external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default())), + imageEditor_CustomEvents = (external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default()).CustomEvents; + +var MOUSE_DOWN = eventNames.MOUSE_DOWN, + OBJECT_MOVED = eventNames.OBJECT_MOVED, + OBJECT_SCALED = eventNames.OBJECT_SCALED, + OBJECT_ACTIVATED = eventNames.OBJECT_ACTIVATED, + OBJECT_ROTATED = eventNames.OBJECT_ROTATED, + OBJECT_ADDED = eventNames.OBJECT_ADDED, + imageEditor_OBJECT_MODIFIED = eventNames.OBJECT_MODIFIED, + imageEditor_ADD_TEXT = eventNames.ADD_TEXT, + ADD_OBJECT = eventNames.ADD_OBJECT, + imageEditor_TEXT_EDITING = eventNames.TEXT_EDITING, + TEXT_CHANGED = eventNames.TEXT_CHANGED, + ICON_CREATE_RESIZE = eventNames.ICON_CREATE_RESIZE, + ICON_CREATE_END = eventNames.ICON_CREATE_END, + SELECTION_CLEARED = eventNames.SELECTION_CLEARED, + SELECTION_CREATED = eventNames.SELECTION_CREATED, + ADD_OBJECT_AFTER = eventNames.ADD_OBJECT_AFTER; +/** + * Image filter result + * @typedef {object} FilterResult + * @property {string} type - filter type like 'mask', 'Grayscale' and so on + * @property {string} action - action type like 'add', 'remove' + */ + +/** + * Flip status + * @typedef {object} FlipStatus + * @property {boolean} flipX - x axis + * @property {boolean} flipY - y axis + * @property {Number} angle - angle + */ + +/** + * Rotation status + * @typedef {Number} RotateStatus + * @property {Number} angle - angle + */ + +/** + * Old and new Size + * @typedef {object} SizeChange + * @property {Number} oldWidth - old width + * @property {Number} oldHeight - old height + * @property {Number} newWidth - new width + * @property {Number} newHeight - new height + */ + +/** + * @typedef {string} ErrorMsg - {string} error message + */ + +/** + * @typedef {object} ObjectProps - graphics object properties + * @property {number} id - object id + * @property {string} type - object type + * @property {string} text - text content + * @property {(string | number)} left - Left + * @property {(string | number)} top - Top + * @property {(string | number)} width - Width + * @property {(string | number)} height - Height + * @property {string} fill - Color + * @property {string} stroke - Stroke + * @property {(string | number)} strokeWidth - StrokeWidth + * @property {string} fontFamily - Font type for text + * @property {number} fontSize - Font Size + * @property {string} fontStyle - Type of inclination (normal / italic) + * @property {string} fontWeight - Type of thicker or thinner looking (normal / bold) + * @property {string} textAlign - Type of text align (left / center / right) + * @property {string} textDecoration - Type of line (underline / line-through / overline) + */ + +/** + * Shape filter option + * @typedef {object.} ShapeFilterOption + */ + +/** + * Shape filter option + * @typedef {object} ShapeFillOption - fill option of shape + * @property {string} type - fill type ('color' or 'filter') + * @property {Array.} [filter] - {@link ShapeFilterOption} List. + * only applies to filter types + * (ex: \[\{pixelate: 20\}, \{blur: 0.3\}\]) + * @property {string} [color] - Shape foreground color (ex: '#fff', 'transparent') + */ + +/** + * Image editor + * @class + * @param {string|HTMLElement} wrapper - Wrapper's element or selector + * @param {Object} [options] - Canvas max width & height of css + * @param {number} [options.includeUI] - Use the provided UI + * @param {Object} [options.includeUI.loadImage] - Basic editing image + * @param {string} options.includeUI.loadImage.path - image path + * @param {string} options.includeUI.loadImage.name - image name + * @param {Object} [options.includeUI.theme] - Theme object + * @param {Array} [options.includeUI.menu] - It can be selected when only specific menu is used, Default values are \['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'\]. + * @param {string} [options.includeUI.initMenu] - The first menu to be selected and started. + * @param {Object} [options.includeUI.uiSize] - ui size of editor + * @param {string} options.includeUI.uiSize.width - width of ui + * @param {string} options.includeUI.uiSize.height - height of ui + * @param {string} [options.includeUI.menuBarPosition=bottom] - Menu bar position('top', 'bottom', 'left', 'right') + * @param {number} options.cssMaxWidth - Canvas css-max-width + * @param {number} options.cssMaxHeight - Canvas css-max-height + * @param {Object} [options.selectionStyle] - selection style + * @param {string} [options.selectionStyle.cornerStyle] - selection corner style + * @param {number} [options.selectionStyle.cornerSize] - selection corner size + * @param {string} [options.selectionStyle.cornerColor] - selection corner color + * @param {string} [options.selectionStyle.cornerStrokeColor] = selection corner stroke color + * @param {boolean} [options.selectionStyle.transparentCorners] - selection corner transparent + * @param {number} [options.selectionStyle.lineWidth] - selection line width + * @param {string} [options.selectionStyle.borderColor] - selection border color + * @param {number} [options.selectionStyle.rotatingPointOffset] - selection rotating point length + * @param {Boolean} [options.usageStatistics=true] - Let us know the hostname. If you don't want to send the hostname, please set to false. + * @example + * var ImageEditor = require('tui-image-editor'); + * var blackTheme = require('./js/theme/black-theme.js'); + * var instance = new ImageEditor(document.querySelector('#tui-image-editor'), { + * includeUI: { + * loadImage: { + * path: 'img/sampleImage.jpg', + * name: 'SampleImage' + * }, + * theme: blackTheme, // or whiteTheme + * menu: ['shape', 'filter'], + * initMenu: 'filter', + * uiSize: { + * width: '1000px', + * height: '700px' + * }, + * menuBarPosition: 'bottom' + * }, + * cssMaxWidth: 700, + * cssMaxHeight: 500, + * selectionStyle: { + * cornerSize: 20, + * rotatingPointOffset: 70 + * } + * }); + */ + +var ImageEditor = /*#__PURE__*/function () { + function ImageEditor(wrapper, options) { + var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16; + + _classCallCheck(this, ImageEditor); + + options = external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().extend({ + includeUI: false, + usageStatistics: true + }, options); + this.mode = null; + this.activeObjectId = null; + /** + * UI instance + * @type {Ui} + */ + + if (options.includeUI) { + var UIOption = options.includeUI; + UIOption.usageStatistics = options.usageStatistics; + this.ui = new ui(wrapper, UIOption, this.getActions()); + options = this.ui.setUiDefaultSelectionStyle(options); + } + /** + * Invoker + * @type {Invoker} + * @private + */ + + + this._invoker = new invoker(); + /** + * Graphics instance + * @type {Graphics} + * @private + */ + + this._graphics = new graphics(this.ui ? this.ui.getEditorArea() : wrapper, { + cssMaxWidth: options.cssMaxWidth, + cssMaxHeight: options.cssMaxHeight + }); + /** + * Event handler list + * @type {Object} + * @private + */ + + this._handlers = { + keydown: bind_default()(_context = this._onKeyDown).call(_context, this), + mousedown: bind_default()(_context2 = this._onMouseDown).call(_context2, this), + objectActivated: bind_default()(_context3 = this._onObjectActivated).call(_context3, this), + objectMoved: bind_default()(_context4 = this._onObjectMoved).call(_context4, this), + objectScaled: bind_default()(_context5 = this._onObjectScaled).call(_context5, this), + objectRotated: bind_default()(_context6 = this._onObjectRotated).call(_context6, this), + objectAdded: bind_default()(_context7 = this._onObjectAdded).call(_context7, this), + objectModified: bind_default()(_context8 = this._onObjectModified).call(_context8, this), + createdPath: this._onCreatedPath, + addText: bind_default()(_context9 = this._onAddText).call(_context9, this), + addObject: bind_default()(_context10 = this._onAddObject).call(_context10, this), + textEditing: bind_default()(_context11 = this._onTextEditing).call(_context11, this), + textChanged: bind_default()(_context12 = this._onTextChanged).call(_context12, this), + iconCreateResize: bind_default()(_context13 = this._onIconCreateResize).call(_context13, this), + iconCreateEnd: bind_default()(_context14 = this._onIconCreateEnd).call(_context14, this), + selectionCleared: bind_default()(_context15 = this._selectionCleared).call(_context15, this), + selectionCreated: bind_default()(_context16 = this._selectionCreated).call(_context16, this) + }; + + this._attachInvokerEvents(); + + this._attachGraphicsEvents(); + + this._attachDomEvents(); + + this._setSelectionStyle(options.selectionStyle, { + applyCropSelectionStyle: options.applyCropSelectionStyle, + applyGroupSelectionStyle: options.applyGroupSelectionStyle + }); + + if (options.usageStatistics) { + sendHostName(); + } + + if (this.ui) { + this.ui.initCanvas(); + this.setReAction(); + + this._attachColorPickerInputBoxEvents(); + } + + fabric.fabric.enableGLFiltering = false; + } + + _createClass(ImageEditor, [{ + key: "_attachColorPickerInputBoxEvents", + value: function _attachColorPickerInputBoxEvents() { + var _this = this; + + this.ui.on(eventNames.INPUT_BOX_EDITING_STARTED, function () { + _this.isColorPickerInputBoxEditing = true; + }); + this.ui.on(eventNames.INPUT_BOX_EDITING_STOPPED, function () { + _this.isColorPickerInputBoxEditing = false; + }); + } + }, { + key: "_detachColorPickerInputBoxEvents", + value: function _detachColorPickerInputBoxEvents() { + this.ui.off(eventNames.INPUT_BOX_EDITING_STARTED); + this.ui.off(eventNames.INPUT_BOX_EDITING_STOPPED); + } + /** + * Set selection style by init option + * @param {Object} selectionStyle - Selection styles + * @param {Object} applyTargets - Selection apply targets + * @param {boolean} applyCropSelectionStyle - whether apply with crop selection style or not + * @param {boolean} applyGroupSelectionStyle - whether apply with group selection style or not + * @private + */ + + }, { + key: "_setSelectionStyle", + value: function _setSelectionStyle(selectionStyle, _ref) { + var applyCropSelectionStyle = _ref.applyCropSelectionStyle, + applyGroupSelectionStyle = _ref.applyGroupSelectionStyle; + + if (selectionStyle) { + this._graphics.setSelectionStyle(selectionStyle); + } + + if (applyCropSelectionStyle) { + this._graphics.setCropSelectionStyle(selectionStyle); + } + + if (applyGroupSelectionStyle) { + this.on('selectionCreated', function (eventTarget) { + if (eventTarget.type === 'activeSelection') { + eventTarget.set(selectionStyle); + } + }); + } + } + /** + * Attach invoker events + * @private + */ + + }, { + key: "_attachInvokerEvents", + value: function _attachInvokerEvents() { + var _context17, + _context18, + _this2 = this; + + var UNDO_STACK_CHANGED = eventNames.UNDO_STACK_CHANGED, + REDO_STACK_CHANGED = eventNames.REDO_STACK_CHANGED, + EXECUTE_COMMAND = eventNames.EXECUTE_COMMAND, + AFTER_UNDO = eventNames.AFTER_UNDO, + AFTER_REDO = eventNames.AFTER_REDO, + HAND_STARTED = eventNames.HAND_STARTED, + HAND_STOPPED = eventNames.HAND_STOPPED; + /** + * Undo stack changed event + * @event ImageEditor#undoStackChanged + * @param {Number} length - undo stack length + * @example + * imageEditor.on('undoStackChanged', function(length) { + * console.log(length); + * }); + */ + + this._invoker.on(UNDO_STACK_CHANGED, bind_default()(_context17 = this.fire).call(_context17, this, UNDO_STACK_CHANGED)); + /** + * Redo stack changed event + * @event ImageEditor#redoStackChanged + * @param {Number} length - redo stack length + * @example + * imageEditor.on('redoStackChanged', function(length) { + * console.log(length); + * }); + */ + + + this._invoker.on(REDO_STACK_CHANGED, bind_default()(_context18 = this.fire).call(_context18, this, REDO_STACK_CHANGED)); + + if (this.ui) { + var canvas = this._graphics.getCanvas(); + + this._invoker.on(EXECUTE_COMMAND, function (command) { + return _this2.ui.fire(EXECUTE_COMMAND, command); + }); + + this._invoker.on(AFTER_UNDO, function (command) { + return _this2.ui.fire(AFTER_UNDO, command); + }); + + this._invoker.on(AFTER_REDO, function (command) { + return _this2.ui.fire(AFTER_REDO, command); + }); + + canvas.on(HAND_STARTED, function () { + return _this2.ui.fire(HAND_STARTED); + }); + canvas.on(HAND_STOPPED, function () { + return _this2.ui.fire(HAND_STOPPED); + }); + } + } + /** + * Attach canvas events + * @private + */ + + }, { + key: "_attachGraphicsEvents", + value: function _attachGraphicsEvents() { + var _this$_graphics$on; + + this._graphics.on((_this$_graphics$on = {}, _defineProperty(_this$_graphics$on, MOUSE_DOWN, this._handlers.mousedown), _defineProperty(_this$_graphics$on, OBJECT_MOVED, this._handlers.objectMoved), _defineProperty(_this$_graphics$on, OBJECT_SCALED, this._handlers.objectScaled), _defineProperty(_this$_graphics$on, OBJECT_ROTATED, this._handlers.objectRotated), _defineProperty(_this$_graphics$on, OBJECT_ACTIVATED, this._handlers.objectActivated), _defineProperty(_this$_graphics$on, OBJECT_ADDED, this._handlers.objectAdded), _defineProperty(_this$_graphics$on, imageEditor_OBJECT_MODIFIED, this._handlers.objectModified), _defineProperty(_this$_graphics$on, imageEditor_ADD_TEXT, this._handlers.addText), _defineProperty(_this$_graphics$on, ADD_OBJECT, this._handlers.addObject), _defineProperty(_this$_graphics$on, imageEditor_TEXT_EDITING, this._handlers.textEditing), _defineProperty(_this$_graphics$on, TEXT_CHANGED, this._handlers.textChanged), _defineProperty(_this$_graphics$on, ICON_CREATE_RESIZE, this._handlers.iconCreateResize), _defineProperty(_this$_graphics$on, ICON_CREATE_END, this._handlers.iconCreateEnd), _defineProperty(_this$_graphics$on, SELECTION_CLEARED, this._handlers.selectionCleared), _defineProperty(_this$_graphics$on, SELECTION_CREATED, this._handlers.selectionCreated), _this$_graphics$on)); + } + /** + * Attach dom events + * @private + */ + + }, { + key: "_attachDomEvents", + value: function _attachDomEvents() { + // ImageEditor supports IE 9 higher + document.addEventListener('keydown', this._handlers.keydown); + } + /** + * Detach dom events + * @private + */ + + }, { + key: "_detachDomEvents", + value: function _detachDomEvents() { + // ImageEditor supports IE 9 higher + document.removeEventListener('keydown', this._handlers.keydown); + } + /** + * Keydown event handler + * @param {KeyboardEvent} e - Event object + * @private + */ + + /* eslint-disable complexity */ + + }, { + key: "_onKeyDown", + value: function _onKeyDown(e) { + var ctrlKey = e.ctrlKey, + keyCode = e.keyCode, + metaKey = e.metaKey; + var isModifierKey = ctrlKey || metaKey; + + if (isModifierKey) { + if (keyCode === keyCodes.C) { + this._graphics.resetTargetObjectForCopyPaste(); + } else if (keyCode === keyCodes.V) { + this._graphics.pasteObject(); + + this.clearRedoStack(); + } else if (keyCode === keyCodes.Z) { + // There is no error message on shortcut when it's empty + this.undo()['catch'](function () {}); + } else if (keyCode === keyCodes.Y) { + // There is no error message on shortcut when it's empty + this.redo()['catch'](function () {}); + } + } + + var isDeleteKey = keyCode === keyCodes.BACKSPACE || keyCode === keyCodes.DEL; + + var isRemoveReady = this._graphics.isReadyRemoveObject(); + + if (!this.isColorPickerInputBoxEditing && isRemoveReady && isDeleteKey) { + e.preventDefault(); + this.removeActiveObject(); + } + } + /** + * Remove Active Object + */ + + }, { + key: "removeActiveObject", + value: function removeActiveObject() { + var activeObjectId = this._graphics.getActiveObjectIdForRemove(); + + this.removeObject(activeObjectId); + } + /** + * mouse down event handler + * @param {Event} event - mouse down event + * @param {Object} originPointer - origin pointer + * @param {Number} originPointer.x x position + * @param {Number} originPointer.y y position + * @private + */ + + }, { + key: "_onMouseDown", + value: function _onMouseDown(event, originPointer) { + /** + * The mouse down event with position x, y on canvas + * @event ImageEditor#mousedown + * @param {Object} event - browser mouse event object + * @param {Object} originPointer origin pointer + * @param {Number} originPointer.x x position + * @param {Number} originPointer.y y position + * @example + * imageEditor.on('mousedown', function(event, originPointer) { + * console.log(event); + * console.log(originPointer); + * if (imageEditor.hasFilter('colorFilter')) { + * imageEditor.applyFilter('colorFilter', { + * x: parseInt(originPointer.x, 10), + * y: parseInt(originPointer.y, 10) + * }); + * } + * }); + */ + this.fire(eventNames.MOUSE_DOWN, event, originPointer); + } + /** + * Add a 'addObject' command + * @param {Object} obj - Fabric object + * @private + */ + + }, { + key: "_pushAddObjectCommand", + value: function _pushAddObjectCommand(obj) { + var command = factory_command.create(commandNames.ADD_OBJECT, this._graphics, obj); + + this._invoker.pushUndoStack(command); + } + /** + * Add a 'changeSelection' command + * @param {fabric.Object} obj - selection object + * @private + */ + + }, { + key: "_pushModifyObjectCommand", + value: function _pushModifyObjectCommand(obj) { + var _this3 = this; + + var type = obj.type; + var props = makeSelectionUndoData(obj, function (item) { + return makeSelectionUndoDatum(_this3._graphics.getObjectId(item), item, type === 'activeSelection'); + }); + var command = factory_command.create(commandNames.CHANGE_SELECTION, this._graphics, props); + command.execute(this._graphics, props); + + this._invoker.pushUndoStack(command); + } + /** + * 'objectActivated' event handler + * @param {ObjectProps} props - object properties + * @private + */ + + }, { + key: "_onObjectActivated", + value: function _onObjectActivated(props) { + /** + * The event when object is selected(aka activated). + * @event ImageEditor#objectActivated + * @param {ObjectProps} objectProps - object properties + * @example + * imageEditor.on('objectActivated', function(props) { + * console.log(props); + * console.log(props.type); + * console.log(props.id); + * }); + */ + this.fire(eventNames.OBJECT_ACTIVATED, props); + } + /** + * 'objectMoved' event handler + * @param {ObjectProps} props - object properties + * @private + */ + + }, { + key: "_onObjectMoved", + value: function _onObjectMoved(props) { + /** + * The event when object is moved + * @event ImageEditor#objectMoved + * @param {ObjectProps} props - object properties + * @example + * imageEditor.on('objectMoved', function(props) { + * console.log(props); + * console.log(props.type); + * }); + */ + this.fire(eventNames.OBJECT_MOVED, props); + } + /** + * 'objectScaled' event handler + * @param {ObjectProps} props - object properties + * @private + */ + + }, { + key: "_onObjectScaled", + value: function _onObjectScaled(props) { + /** + * The event when scale factor is changed + * @event ImageEditor#objectScaled + * @param {ObjectProps} props - object properties + * @example + * imageEditor.on('objectScaled', function(props) { + * console.log(props); + * console.log(props.type); + * }); + */ + this.fire(eventNames.OBJECT_SCALED, props); + } + /** + * 'objectRotated' event handler + * @param {ObjectProps} props - object properties + * @private + */ + + }, { + key: "_onObjectRotated", + value: function _onObjectRotated(props) { + /** + * The event when object angle is changed + * @event ImageEditor#objectRotated + * @param {ObjectProps} props - object properties + * @example + * imageEditor.on('objectRotated', function(props) { + * console.log(props); + * console.log(props.type); + * }); + */ + this.fire(eventNames.OBJECT_ROTATED, props); + } + /** + * Get current drawing mode + * @returns {string} + * @example + * // Image editor drawing mode + * // + * // NORMAL: 'NORMAL' + * // CROPPER: 'CROPPER' + * // FREE_DRAWING: 'FREE_DRAWING' + * // LINE_DRAWING: 'LINE_DRAWING' + * // TEXT: 'TEXT' + * // + * if (imageEditor.getDrawingMode() === 'FREE_DRAWING') { + * imageEditor.stopDrawingMode(); + * } + */ + + }, { + key: "getDrawingMode", + value: function getDrawingMode() { + return this._graphics.getDrawingMode(); + } + /** + * Clear all objects + * @returns {Promise} + * @example + * imageEditor.clearObjects(); + */ + + }, { + key: "clearObjects", + value: function clearObjects() { + return this.execute(commandNames.CLEAR_OBJECTS); + } + /** + * Deactivate all objects + * @example + * imageEditor.deactivateAll(); + */ + + }, { + key: "deactivateAll", + value: function deactivateAll() { + this._graphics.deactivateAll(); + + this._graphics.renderAll(); + } + /** + * discard selction + * @example + * imageEditor.discardSelection(); + */ + + }, { + key: "discardSelection", + value: function discardSelection() { + this._graphics.discardSelection(); + } + /** + * selectable status change + * @param {boolean} selectable - selectable status + * @example + * imageEditor.changeSelectableAll(false); // or true + */ + + }, { + key: "changeSelectableAll", + value: function changeSelectableAll(selectable) { + this._graphics.changeSelectableAll(selectable); + } + /** + * Init history + */ + + }, { + key: "_initHistory", + value: function _initHistory() { + if (this.ui) { + this.ui.initHistory(); + } + } + /** + * Clear history + */ + + }, { + key: "_clearHistory", + value: function _clearHistory() { + if (this.ui) { + this.ui.clearHistory(); + } + } + /** + * Invoke command + * @param {String} commandName - Command name + * @param {...*} args - Arguments for creating command + * @returns {Promise} + * @private + */ + + }, { + key: "execute", + value: function execute(commandName) { + var _context19, _this$_invoker, _context20; + + for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; + } + + // Inject an Graphics instance as first parameter + var theArgs = concat_default()(_context19 = [this._graphics]).call(_context19, args); + + return (_this$_invoker = this._invoker).execute.apply(_this$_invoker, concat_default()(_context20 = [commandName]).call(_context20, _toConsumableArray(theArgs))); + } + /** + * Invoke command + * @param {String} commandName - Command name + * @param {...*} args - Arguments for creating command + * @returns {Promise} + * @private + */ + + }, { + key: "executeSilent", + value: function executeSilent(commandName) { + var _context21, _this$_invoker2, _context22; + + for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { + args[_key2 - 1] = arguments[_key2]; + } + + // Inject an Graphics instance as first parameter + var theArgs = concat_default()(_context21 = [this._graphics]).call(_context21, args); + + return (_this$_invoker2 = this._invoker).executeSilent.apply(_this$_invoker2, concat_default()(_context22 = [commandName]).call(_context22, _toConsumableArray(theArgs))); + } + /** + * Undo + * @param {number} [iterationCount=1] - Iteration count of undo + * @returns {Promise} + * @example + * imageEditor.undo(); + */ + + }, { + key: "undo", + value: function undo() { + var _this4 = this; + + var iterationCount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1; + + var promise = promise_default().resolve(); + + for (var i = 0; i < iterationCount; i += 1) { + promise = promise.then(function () { + return _this4._invoker.undo(); + }); + } + + return promise; + } + /** + * Redo + * @param {number} [iterationCount=1] - Iteration count of redo + * @returns {Promise} + * @example + * imageEditor.redo(); + */ + + }, { + key: "redo", + value: function redo() { + var _this5 = this; + + var iterationCount = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1; + + var promise = promise_default().resolve(); + + for (var i = 0; i < iterationCount; i += 1) { + promise = promise.then(function () { + return _this5._invoker.redo(); + }); + } + + return promise; + } + /** + * Zoom + * @param {number} x - x axis of center point for zoom + * @param {number} y - y axis of center point for zoom + * @param {number} zoomLevel - level of zoom(1.0 ~ 5.0) + */ + + }, { + key: "zoom", + value: function zoom(_ref2) { + var x = _ref2.x, + y = _ref2.y, + zoomLevel = _ref2.zoomLevel; + + this._graphics.zoom({ + x: x, + y: y + }, zoomLevel); + } + /** + * Reset zoom. Change zoom level to 1.0 + */ + + }, { + key: "resetZoom", + value: function resetZoom() { + this._graphics.resetZoom(); + } + /** + * Load image from file + * @param {File} imgFile - Image file + * @param {string} [imageName] - imageName + * @returns {Promise} + * @example + * imageEditor.loadImageFromFile(file).then(result => { + * console.log('old : ' + result.oldWidth + ', ' + result.oldHeight); + * console.log('new : ' + result.newWidth + ', ' + result.newHeight); + * }); + */ + + }, { + key: "loadImageFromFile", + value: function loadImageFromFile(imgFile, imageName) { + if (!imgFile) { + return promise_default().reject(rejectMessages.invalidParameters); + } + + var imgUrl = url_default().createObjectURL(imgFile); + + imageName = imageName || imgFile.name; + return this.loadImageFromURL(imgUrl, imageName).then(function (value) { + url_default().revokeObjectURL(imgFile); + + return value; + }); + } + /** + * Load image from url + * @param {string} url - File url + * @param {string} imageName - imageName + * @returns {Promise} + * @example + * imageEditor.loadImageFromURL('http://url/testImage.png', 'lena').then(result => { + * console.log('old : ' + result.oldWidth + ', ' + result.oldHeight); + * console.log('new : ' + result.newWidth + ', ' + result.newHeight); + * }); + */ + + }, { + key: "loadImageFromURL", + value: function loadImageFromURL(url, imageName) { + if (!imageName || !url) { + return promise_default().reject(rejectMessages.invalidParameters); + } + + return this.execute(commandNames.LOAD_IMAGE, imageName, url); + } + /** + * Add image object on canvas + * @param {string} imgUrl - Image url to make object + * @returns {Promise} + * @example + * imageEditor.addImageObject('path/fileName.jpg').then(objectProps => { + * console.log(ojectProps.id); + * }); + */ + + }, { + key: "addImageObject", + value: function addImageObject(imgUrl) { + if (!imgUrl) { + return promise_default().reject(rejectMessages.invalidParameters); + } + + return this.execute(commandNames.ADD_IMAGE_OBJECT, imgUrl); + } + /** + * Start a drawing mode. If the current mode is not 'NORMAL', 'stopDrawingMode()' will be called first. + * @param {String} mode Can be one of 'CROPPER', 'FREE_DRAWING', 'LINE_DRAWING', 'TEXT', 'SHAPE' + * @param {Object} [option] parameters of drawing mode, it's available with 'FREE_DRAWING', 'LINE_DRAWING' + * @param {Number} [option.width] brush width + * @param {String} [option.color] brush color + * @param {Object} [option.arrowType] arrow decorate + * @param {string} [option.arrowType.tail] arrow decorate for tail. 'chevron' or 'triangle' + * @param {string} [option.arrowType.head] arrow decorate for head. 'chevron' or 'triangle' + * @returns {boolean} true if success or false + * @example + * imageEditor.startDrawingMode('FREE_DRAWING', { + * width: 10, + * color: 'rgba(255,0,0,0.5)' + * }); + * imageEditor.startDrawingMode('LINE_DRAWING', { + * width: 10, + * color: 'rgba(255,0,0,0.5)', + * arrowType: { + * tail: 'chevron' // triangle + * } + * }); + * + */ + + }, { + key: "startDrawingMode", + value: function startDrawingMode(mode, option) { + return this._graphics.startDrawingMode(mode, option); + } + /** + * Stop the current drawing mode and back to the 'NORMAL' mode + * @example + * imageEditor.stopDrawingMode(); + */ + + }, { + key: "stopDrawingMode", + value: function stopDrawingMode() { + this._graphics.stopDrawingMode(); + } + /** + * Crop this image with rect + * @param {Object} rect crop rect + * @param {Number} rect.left left position + * @param {Number} rect.top top position + * @param {Number} rect.width width + * @param {Number} rect.height height + * @returns {Promise} + * @example + * imageEditor.crop(imageEditor.getCropzoneRect()); + */ + + }, { + key: "crop", + value: function crop(rect) { + var data = this._graphics.getCroppedImageData(rect); + + if (!data) { + return promise_default().reject(rejectMessages.invalidParameters); + } + + return this.loadImageFromURL(data.url, data.imageName); + } + /** + * Get the cropping rect + * @returns {Object} {{left: number, top: number, width: number, height: number}} rect + */ + + }, { + key: "getCropzoneRect", + value: function getCropzoneRect() { + return this._graphics.getCropzoneRect(); + } + /** + * Set the cropping rect + * @param {number} [mode] crop rect mode [1, 1.5, 1.3333333333333333, 1.25, 1.7777777777777777] + */ + + }, { + key: "setCropzoneRect", + value: function setCropzoneRect(mode) { + this._graphics.setCropzoneRect(mode); + } + /** + * Flip + * @returns {Promise} + * @param {string} type - 'flipX' or 'flipY' or 'reset' + * @returns {Promise} + * @private + */ + + }, { + key: "_flip", + value: function _flip(type) { + return this.execute(commandNames.FLIP_IMAGE, type); + } + /** + * Flip x + * @returns {Promise} + * @example + * imageEditor.flipX().then((status => { + * console.log('flipX: ', status.flipX); + * console.log('flipY: ', status.flipY); + * console.log('angle: ', status.angle); + * }).catch(message => { + * console.log('error: ', message); + * }); + */ + + }, { + key: "flipX", + value: function flipX() { + return this._flip('flipX'); + } + /** + * Flip y + * @returns {Promise} + * @example + * imageEditor.flipY().then(status => { + * console.log('flipX: ', status.flipX); + * console.log('flipY: ', status.flipY); + * console.log('angle: ', status.angle); + * }).catch(message => { + * console.log('error: ', message); + * }); + */ + + }, { + key: "flipY", + value: function flipY() { + return this._flip('flipY'); + } + /** + * Reset flip + * @returns {Promise} + * @example + * imageEditor.resetFlip().then(status => { + * console.log('flipX: ', status.flipX); + * console.log('flipY: ', status.flipY); + * console.log('angle: ', status.angle); + * }).catch(message => { + * console.log('error: ', message); + * });; + */ + + }, { + key: "resetFlip", + value: function resetFlip() { + return this._flip('reset'); + } + /** + * @param {string} type - 'rotate' or 'setAngle' + * @param {number} angle - angle value (degree) + * @param {boolean} isSilent - is silent execution or not + * @returns {Promise} + * @private + */ + + }, { + key: "_rotate", + value: function _rotate(type, angle, isSilent) { + var result = null; + + if (isSilent) { + result = this.executeSilent(commandNames.ROTATE_IMAGE, type, angle); + } else { + result = this.execute(commandNames.ROTATE_IMAGE, type, angle); + } + + return result; + } + /** + * Rotate image + * @returns {Promise} + * @param {number} angle - Additional angle to rotate image + * @param {boolean} isSilent - is silent execution or not + * @returns {Promise} + * @example + * imageEditor.rotate(10); // angle = 10 + * imageEditor.rotate(10); // angle = 20 + * imageEditor.rotate(5); // angle = 5 + * imageEditor.rotate(-95); // angle = -90 + * imageEditor.rotate(10).then(status => { + * console.log('angle: ', status.angle); + * })).catch(message => { + * console.log('error: ', message); + * }); + */ + + }, { + key: "rotate", + value: function rotate(angle, isSilent) { + return this._rotate('rotate', angle, isSilent); + } + /** + * Set angle + * @param {number} angle - Angle of image + * @param {boolean} isSilent - is silent execution or not + * @returns {Promise} + * @example + * imageEditor.setAngle(10); // angle = 10 + * imageEditor.rotate(10); // angle = 20 + * imageEditor.setAngle(5); // angle = 5 + * imageEditor.rotate(50); // angle = 55 + * imageEditor.setAngle(-40); // angle = -40 + * imageEditor.setAngle(10).then(status => { + * console.log('angle: ', status.angle); + * })).catch(message => { + * console.log('error: ', message); + * }); + */ + + }, { + key: "setAngle", + value: function setAngle(angle, isSilent) { + return this._rotate('setAngle', angle, isSilent); + } + /** + * Set drawing brush + * @param {Object} option brush option + * @param {Number} option.width width + * @param {String} option.color color like 'FFFFFF', 'rgba(0, 0, 0, 0.5)' + * @example + * imageEditor.startDrawingMode('FREE_DRAWING'); + * imageEditor.setBrush({ + * width: 12, + * color: 'rgba(0, 0, 0, 0.5)' + * }); + * imageEditor.setBrush({ + * width: 8, + * color: 'FFFFFF' + * }); + */ + + }, { + key: "setBrush", + value: function setBrush(option) { + this._graphics.setBrush(option); + } + /** + * Set states of current drawing shape + * @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle') + * @param {Object} [options] - Shape options + * @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or + * Shape foreground color (ex: '#fff', 'transparent') + * @param {string} [options.stoke] - Shape outline color + * @param {number} [options.strokeWidth] - Shape outline width + * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) + * @param {number} [options.height] - Height value (When type option is 'rect', this options can use) + * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) + * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) + * @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not + * @example + * imageEditor.setDrawingShape('rect', { + * fill: 'red', + * width: 100, + * height: 200 + * }); + * @example + * imageEditor.setDrawingShape('rect', { + * fill: { + * type: 'filter', + * filter: [{blur: 0.3}, {pixelate: 20}] + * }, + * width: 100, + * height: 200 + * }); + * @example + * imageEditor.setDrawingShape('circle', { + * fill: 'transparent', + * stroke: 'blue', + * strokeWidth: 3, + * rx: 10, + * ry: 100 + * }); + * @example + * imageEditor.setDrawingShape('triangle', { // When resizing, the shape keep the 1:1 ratio + * width: 1, + * height: 1, + * isRegular: true + * }); + * @example + * imageEditor.setDrawingShape('circle', { // When resizing, the shape keep the 1:1 ratio + * rx: 10, + * ry: 10, + * isRegular: true + * }); + */ + + }, { + key: "setDrawingShape", + value: function setDrawingShape(type, options) { + this._graphics.setDrawingShape(type, options); + } + }, { + key: "setDrawingIcon", + value: function setDrawingIcon(type, iconColor) { + this._graphics.setIconStyle(type, iconColor); + } + /** + * Add shape + * @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle') + * @param {Object} options - Shape options + * @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or + * Shape foreground color (ex: '#fff', 'transparent') + * @param {string} [options.stroke] - Shape outline color + * @param {number} [options.strokeWidth] - Shape outline width + * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) + * @param {number} [options.height] - Height value (When type option is 'rect', this options can use) + * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) + * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) + * @param {number} [options.left] - Shape x position + * @param {number} [options.top] - Shape y position + * @param {boolean} [options.isRegular] - Whether resizing shape has 1:1 ratio or not + * @returns {Promise} + * @example + * imageEditor.addShape('rect', { + * fill: 'red', + * stroke: 'blue', + * strokeWidth: 3, + * width: 100, + * height: 200, + * left: 10, + * top: 10, + * isRegular: true + * }); + * @example + * imageEditor.addShape('circle', { + * fill: 'red', + * stroke: 'blue', + * strokeWidth: 3, + * rx: 10, + * ry: 100, + * isRegular: false + * }).then(objectProps => { + * console.log(objectProps.id); + * }); + * @example + * imageEditor.addShape('rect', { + * fill: { + * type: 'filter', + * filter: [{blur: 0.3}, {pixelate: 20}] + * }, + * stroke: 'blue', + * strokeWidth: 3, + * rx: 10, + * ry: 100, + * isRegular: false + * }).then(objectProps => { + * console.log(objectProps.id); + * }); + */ + + }, { + key: "addShape", + value: function addShape(type, options) { + options = options || {}; + + this._setPositions(options); + + return this.execute(commandNames.ADD_SHAPE, type, options); + } + /** + * Change shape + * @param {number} id - object id + * @param {Object} options - Shape options + * @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or + * Shape foreground color (ex: '#fff', 'transparent') + * @param {string} [options.stroke] - Shape outline color + * @param {number} [options.strokeWidth] - Shape outline width + * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) + * @param {number} [options.height] - Height value (When type option is 'rect', this options can use) + * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) + * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) + * @param {boolean} [options.isRegular] - Whether resizing shape has 1:1 ratio or not + * @param {boolean} isSilent - is silent execution or not + * @returns {Promise} + * @example + * // call after selecting shape object on canvas + * imageEditor.changeShape(id, { // change rectagle or triangle + * fill: 'red', + * stroke: 'blue', + * strokeWidth: 3, + * width: 100, + * height: 200 + * }); + * @example + * // call after selecting shape object on canvas + * imageEditor.changeShape(id, { // change circle + * fill: 'red', + * stroke: 'blue', + * strokeWidth: 3, + * rx: 10, + * ry: 100 + * }); + */ - this._loadDefaultSvgIcon(); - } + }, { + key: "changeShape", + value: function changeShape(id, options, isSilent) { + var executeMethodName = isSilent ? 'executeSilent' : 'execute'; + return this[executeMethodName](commandNames.CHANGE_SHAPE, id, options); + } + /** + * Add text on image + * @param {string} text - Initial input text + * @param {Object} [options] Options for generating text + * @param {Object} [options.styles] Initial styles + * @param {string} [options.styles.fill] Color + * @param {string} [options.styles.fontFamily] Font type for text + * @param {number} [options.styles.fontSize] Size + * @param {string} [options.styles.fontStyle] Type of inclination (normal / italic) + * @param {string} [options.styles.fontWeight] Type of thicker or thinner looking (normal / bold) + * @param {string} [options.styles.textAlign] Type of text align (left / center / right) + * @param {string} [options.styles.textDecoration] Type of line (underline / line-through / overline) + * @param {{x: number, y: number}} [options.position] - Initial position + * @param {boolean} [options.autofocus] - text autofocus, default is true + * @returns {Promise} + * @example + * imageEditor.addText('init text'); + * @example + * imageEditor.addText('init text', { + * styles: { + * fill: '#000', + * fontSize: 20, + * fontWeight: 'bold' + * }, + * position: { + * x: 10, + * y: 10 + * } + * }).then(objectProps => { + * console.log(objectProps.id); + * }); + */ - /** - * Get a Style cssText or StyleObject - * @param {string} type - style type - * @returns {string|object} - cssText or StyleObject - */ - // eslint-disable-next-line complexity + }, { + key: "addText", + value: function addText(text, options) { + text = text || ''; + options = options || {}; + return this.execute(commandNames.ADD_TEXT, text, options); + } + /** + * Change contents of selected text object on image + * @param {number} id - object id + * @param {string} text - Changing text + * @returns {Promise} + * @example + * imageEditor.changeText(id, 'change text'); + */ + }, { + key: "changeText", + value: function changeText(id, text) { + text = text || ''; + return this.execute(commandNames.CHANGE_TEXT, id, text); + } + /** + * Set style + * @param {number} id - object id + * @param {Object} styleObj - text styles + * @param {string} [styleObj.fill] Color + * @param {string} [styleObj.fontFamily] Font type for text + * @param {number} [styleObj.fontSize] Size + * @param {string} [styleObj.fontStyle] Type of inclination (normal / italic) + * @param {string} [styleObj.fontWeight] Type of thicker or thinner looking (normal / bold) + * @param {string} [styleObj.textAlign] Type of text align (left / center / right) + * @param {string} [styleObj.textDecoration] Type of line (underline / line-through / overline) + * @param {boolean} isSilent - is silent execution or not + * @returns {Promise} + * @example + * imageEditor.changeTextStyle(id, { + * fontStyle: 'italic' + * }); + */ - _createClass(Theme, [{ - key: 'getStyle', - value: function getStyle(type) { - var result = null; - var firstProperty = type.replace(/\..+$/, ''); - var option = this.styles[type]; - switch (type) { - case 'common.bi': - result = this.styles[type].image; - break; - case 'menu.icon': - result = { - active: this.styles[firstProperty + '.activeIcon'], - normal: this.styles[firstProperty + '.normalIcon'], - hover: this.styles[firstProperty + '.hoverIcon'], - disabled: this.styles[firstProperty + '.disabledIcon'] - }; - break; - case 'submenu.icon': - result = { - active: this.styles[firstProperty + '.activeIcon'], - normal: this.styles[firstProperty + '.normalIcon'] - }; - break; - case 'submenu.label': - result = { - active: this._makeCssText(this.styles[firstProperty + '.activeLabel']), - normal: this._makeCssText(this.styles[firstProperty + '.normalLabel']) - }; - break; - case 'submenu.partition': - result = { - vertical: this._makeCssText((0, _tuiCodeSnippet.extend)({}, option, { borderLeft: '1px solid ' + option.color })), - horizontal: this._makeCssText((0, _tuiCodeSnippet.extend)({}, option, { borderBottom: '1px solid ' + option.color })) - }; - break; + }, { + key: "changeTextStyle", + value: function changeTextStyle(id, styleObj, isSilent) { + var executeMethodName = isSilent ? 'executeSilent' : 'execute'; + return this[executeMethodName](commandNames.CHANGE_TEXT_STYLE, id, styleObj); + } + /** + * change text mode + * @param {string} type - change type + * @private + */ - case 'range.disabledPointer': - case 'range.disabledBar': - case 'range.disabledSubbar': - case 'range.pointer': - case 'range.bar': - case 'range.subbar': - option.backgroundColor = option.color; - result = this._makeCssText(option); - break; - default: - result = this._makeCssText(option); - break; + }, { + key: "_changeActivateMode", + value: function _changeActivateMode(type) { + if (type !== 'ICON' && this.getDrawingMode() !== type) { + this.startDrawingMode(type); } - - return result; } + /** + * 'textChanged' event handler + * @param {Object} target - changed text object + * @private + */ + }, { + key: "_onTextChanged", + value: function _onTextChanged(target) { + this.fire(eventNames.TEXT_CHANGED, target); + } /** - * Make css resource - * @returns {string} - serialized css text + * 'iconCreateResize' event handler + * @param {Object} originPointer origin pointer + * @param {Number} originPointer.x x position + * @param {Number} originPointer.y y position * @private */ }, { - key: '_styleMaker', - value: function _styleMaker() { - var submenuLabelStyle = this.getStyle('submenu.label'); - var submenuPartitionStyle = this.getStyle('submenu.partition'); + key: "_onIconCreateResize", + value: function _onIconCreateResize(originPointer) { + this.fire(eventNames.ICON_CREATE_RESIZE, originPointer); + } + /** + * 'iconCreateEnd' event handler + * @param {Object} originPointer origin pointer + * @param {Number} originPointer.x x position + * @param {Number} originPointer.y y position + * @private + */ - return (0, _style2.default)({ - subMenuLabelActive: submenuLabelStyle.active, - subMenuLabelNormal: submenuLabelStyle.normal, - submenuPartitionVertical: submenuPartitionStyle.vertical, - submenuPartitionHorizontal: submenuPartitionStyle.horizontal, - biSize: this.getStyle('common.bisize'), - subMenuRangeTitle: this.getStyle('range.title'), - submenuRangePointer: this.getStyle('range.pointer'), - submenuRangeBar: this.getStyle('range.bar'), - submenuRangeSubbar: this.getStyle('range.subbar'), + }, { + key: "_onIconCreateEnd", + value: function _onIconCreateEnd(originPointer) { + this.fire(eventNames.ICON_CREATE_END, originPointer); + } + /** + * 'textEditing' event handler + * @private + */ - submenuDisabledRangePointer: this.getStyle('range.disabledPointer'), - submenuDisabledRangeBar: this.getStyle('range.disabledBar'), - submenuDisabledRangeSubbar: this.getStyle('range.disabledSubbar'), + }, { + key: "_onTextEditing", + value: function _onTextEditing() { + /** + * The event which starts to edit text object + * @event ImageEditor#textEditing + * @example + * imageEditor.on('textEditing', function() { + * console.log('text editing'); + * }); + */ + this.fire(eventNames.TEXT_EDITING); + } + /** + * Mousedown event handler in case of 'TEXT' drawing mode + * @param {fabric.Event} event - Current mousedown event object + * @private + */ - submenuRangeValue: this.getStyle('range.value'), - submenuColorpickerTitle: this.getStyle('colorpicker.title'), - submenuColorpickerButton: this.getStyle('colorpicker.button'), - submenuCheckbox: this.getStyle('checkbox'), - menuIconSize: this.getStyle('menu.iconSize'), - submenuIconSize: this.getStyle('submenu.iconSize'), - menuIconStyle: this.getStyle('menu.icon'), - submenuIconStyle: this.getStyle('submenu.icon') + }, { + key: "_onAddText", + value: function _onAddText(event) { + /** + * The event when 'TEXT' drawing mode is enabled and click non-object area. + * @event ImageEditor#addText + * @param {Object} pos + * @param {Object} pos.originPosition - Current position on origin canvas + * @param {Number} pos.originPosition.x - x + * @param {Number} pos.originPosition.y - y + * @param {Object} pos.clientPosition - Current position on client area + * @param {Number} pos.clientPosition.x - x + * @param {Number} pos.clientPosition.y - y + * @example + * imageEditor.on('addText', function(pos) { + * console.log('text position on canvas: ' + pos.originPosition); + * console.log('text position on brwoser: ' + pos.clientPosition); + * }); + */ + this.fire(eventNames.ADD_TEXT, { + originPosition: event.originPosition, + clientPosition: event.clientPosition }); } + /** + * 'addObject' event handler + * @param {Object} objectProps added object properties + * @private + */ + + }, { + key: "_onAddObject", + value: function _onAddObject(objectProps) { + var obj = this._graphics.getObject(objectProps.id); + + this._invoker.fire(eventNames.EXECUTE_COMMAND, getObjectType(obj.type)); + + this._pushAddObjectCommand(obj); + } + /** + * 'objectAdded' event handler + * @param {Object} objectProps added object properties + * @private + */ + + }, { + key: "_onObjectAdded", + value: function _onObjectAdded(objectProps) { + /** + * The event when object added + * @event ImageEditor#objectAdded + * @param {ObjectProps} props - object properties + * @example + * imageEditor.on('objectAdded', function(props) { + * console.log(props); + * }); + */ + this.fire(OBJECT_ADDED, objectProps); + /** + * The event when object added (deprecated) + * @event ImageEditor#addObjectAfter + * @param {ObjectProps} props - object properties + * @deprecated + */ + this.fire(ADD_OBJECT_AFTER, objectProps); + } /** - * Change to low dimensional object. - * @param {object} styleOptions - style object of user interface - * @returns {object} low level object for style apply + * 'objectModified' event handler + * @param {fabric.Object} obj - selection object * @private */ }, { - key: '_changeToObject', - value: function _changeToObject(styleOptions) { - var styleObject = {}; - (0, _tuiCodeSnippet.forEach)(styleOptions, function (value, key) { - var keyExplode = key.match(/^(.+)\.([a-z]+)$/i); - var property = keyExplode[1], - subProperty = keyExplode[2]; - - - if (!styleObject[property]) { - styleObject[property] = {}; - } - styleObject[property][subProperty] = value; - }); + key: "_onObjectModified", + value: function _onObjectModified(obj) { + if (obj.type !== OBJ_TYPE.CROPZONE) { + this._invoker.fire(eventNames.EXECUTE_COMMAND, getObjectType(obj.type)); - return styleObject; + this._pushModifyObjectCommand(obj); + } } - /** - * Style object to Csstext serialize - * @param {object} styleObject - style object - * @returns {string} - css text string + * 'selectionCleared' event handler * @private */ }, { - key: '_makeCssText', - value: function _makeCssText(styleObject) { - var _this = this; - - var converterStack = []; - - (0, _tuiCodeSnippet.forEach)(styleObject, function (value, key) { - if (['backgroundImage'].indexOf(key) > -1 && value !== 'none') { - value = 'url(' + value + ')'; - } - - converterStack.push(_this._toUnderScore(key) + ': ' + value); - }); - - return converterStack.join(';'); + key: "_selectionCleared", + value: function _selectionCleared() { + this.fire(SELECTION_CLEARED); } - /** - * Camel key string to Underscore string - * @param {string} targetString - change target - * @returns {string} + * 'selectionCreated' event handler + * @param {Object} eventTarget - Fabric object * @private */ }, { - key: '_toUnderScore', - value: function _toUnderScore(targetString) { - return targetString.replace(/([A-Z])/g, function ($0, $1) { - return '-' + $1.toLowerCase(); - }); + key: "_selectionCreated", + value: function _selectionCreated(eventTarget) { + this.fire(SELECTION_CREATED, eventTarget); } - /** - * Load default svg icon - * @private + * Register custom icons + * @param {{iconType: string, pathValue: string}} infos - Infos to register icons + * @example + * imageEditor.registerIcons({ + * customIcon: 'M 0 0 L 20 20 L 10 10 Z', + * customArrow: 'M 60 0 L 120 60 H 90 L 75 45 V 180 H 45 V 45 L 30 60 H 0 Z' + * }); */ }, { - key: '_loadDefaultSvgIcon', - value: function _loadDefaultSvgIcon() { - if (!document.getElementById('tui-image-editor-svg-default-icons')) { - var parser = new DOMParser(); - var dom = parser.parseFromString(_default2.default, 'text/xml'); - - document.body.appendChild(dom.documentElement); - } + key: "registerIcons", + value: function registerIcons(infos) { + this._graphics.registerPaths(infos); } - /** - * Make className for svg icon - * @param {string} iconType - normal' or 'active' or 'hover' or 'disabled - * @param {boolean} isSubmenu - submenu icon or not. - * @returns {string} - * @private + * Change canvas cursor type + * @param {string} cursorType - cursor type + * @example + * imageEditor.changeCursor('crosshair'); */ }, { - key: '_makeIconClassName', - value: function _makeIconClassName(iconType, isSubmenu) { - var iconStyleInfo = isSubmenu ? this.getStyle('submenu.icon') : this.getStyle('menu.icon'); - var _iconStyleInfo$iconTy = iconStyleInfo[iconType], - path = _iconStyleInfo$iconTy.path, - name = _iconStyleInfo$iconTy.name; - - - return path && name ? iconType : iconType + ' use-default'; + key: "changeCursor", + value: function changeCursor(cursorType) { + this._graphics.changeCursor(cursorType); } - /** - * Make svg use link path name - * @param {string} iconType - normal' or 'active' or 'hover' or 'disabled - * @param {boolean} isSubmenu - submenu icon or not. - * @returns {string} - * @private + * Add icon on canvas + * @param {string} type - Icon type ('arrow', 'cancel', custom icon name) + * @param {Object} options - Icon options + * @param {string} [options.fill] - Icon foreground color + * @param {number} [options.left] - Icon x position + * @param {number} [options.top] - Icon y position + * @returns {Promise} + * @example + * imageEditor.addIcon('arrow'); // The position is center on canvas + * @example + * imageEditor.addIcon('arrow', { + * left: 100, + * top: 100 + * }).then(objectProps => { + * console.log(objectProps.id); + * }); */ }, { - key: '_makeSvgIconPrefix', - value: function _makeSvgIconPrefix(iconType, isSubmenu) { - var iconStyleInfo = isSubmenu ? this.getStyle('submenu.icon') : this.getStyle('menu.icon'); - var _iconStyleInfo$iconTy2 = iconStyleInfo[iconType], - path = _iconStyleInfo$iconTy2.path, - name = _iconStyleInfo$iconTy2.name; + key: "addIcon", + value: function addIcon(type, options) { + options = options || {}; + this._setPositions(options); - return path && name ? path + '#' + name + '-' : '#'; + return this.execute(commandNames.ADD_ICON, type, options); } - /** - * Make svg use link path name - * @param {Array.} useIconTypes - normal' or 'active' or 'hover' or 'disabled - * @param {string} menuName - menu name - * @param {boolean} isSubmenu - submenu icon or not. - * @returns {string} - * @private + * Change icon color + * @param {number} id - object id + * @param {string} color - Color for icon + * @returns {Promise} + * @example + * imageEditor.changeIconColor(id, '#000000'); */ }, { - key: '_makeSvgItem', - value: function _makeSvgItem(useIconTypes, menuName, isSubmenu) { - var _this2 = this; - - return (0, _tuiCodeSnippet.map)(useIconTypes, function (iconType) { - var svgIconPrefix = _this2._makeSvgIconPrefix(iconType, isSubmenu); - var iconName = _this2._toUnderScore(menuName); - var svgIconClassName = _this2._makeIconClassName(iconType, isSubmenu); - - return ''; - }).join(''); + key: "changeIconColor", + value: function changeIconColor(id, color) { + return this.execute(commandNames.CHANGE_ICON_COLOR, id, color); } - /** - * Make svg icon set - * @param {Array.} useIconTypes - normal' or 'active' or 'hover' or 'disabled - * @param {string} menuName - menu name - * @param {boolean} isSubmenu - submenu icon or not. - * @returns {string} + * Remove an object or group by id + * @param {number} id - object id + * @returns {Promise} + * @example + * imageEditor.removeObject(id); */ }, { - key: 'makeMenSvgIconSet', - value: function makeMenSvgIconSet(useIconTypes, menuName) { - var isSubmenu = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; + key: "removeObject", + value: function removeObject(id) { + var _this$_graphics$getOb = this._graphics.getObject(id), + type = _this$_graphics$getOb.type; - return '' + this._makeSvgItem(useIconTypes, menuName, isSubmenu) + ''; + return this.execute(commandNames.REMOVE_OBJECT, id, getObjectType(type)); } - }]); - - return Theme; -}(); - -exports.default = Theme; - -/***/ }), - -/***/ "./src/js/ui/tools/colorpicker.js": -/*!****************************************!*\ - !*** ./src/js/ui/tools/colorpicker.js ***! - \****************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; - - -Object.defineProperty(exports, "__esModule", { - value: true -}); + /** + * Whether it has the filter or not + * @param {string} type - Filter type + * @returns {boolean} true if it has the filter + */ -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + }, { + key: "hasFilter", + value: function hasFilter(type) { + return this._graphics.hasFilter(type); + } + /** + * Remove filter on canvas image + * @param {string} type - Filter type + * @returns {Promise} + * @example + * imageEditor.removeFilter('Grayscale').then(obj => { + * console.log('filterType: ', obj.type); + * console.log('actType: ', obj.action); + * }).catch(message => { + * console.log('error: ', message); + * }); + */ -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); + }, { + key: "removeFilter", + value: function removeFilter(type) { + return this.execute(commandNames.REMOVE_FILTER, type); + } + /** + * Apply filter on canvas image + * @param {string} type - Filter type + * @param {object} options - Options to apply filter + * @param {boolean} isSilent - is silent execution or not + * @returns {Promise} + * @example + * imageEditor.applyFilter('Grayscale'); + * @example + * imageEditor.applyFilter('mask', {maskObjId: id}).then(obj => { + * console.log('filterType: ', obj.type); + * console.log('actType: ', obj.action); + * }).catch(message => { + * console.log('error: ', message); + * });; + */ -var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); + }, { + key: "applyFilter", + value: function applyFilter(type, options, isSilent) { + var executeMethodName = isSilent ? 'executeSilent' : 'execute'; + return this[executeMethodName](commandNames.APPLY_FILTER, type, options); + } + /** + * Get data url + * @param {Object} options - options for toDataURL + * @param {String} [options.format=png] The format of the output image. Either "jpeg" or "png" + * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg. + * @param {Number} [options.multiplier=1] Multiplier to scale by + * @param {Number} [options.left] Cropping left offset. Introduced in fabric v1.2.14 + * @param {Number} [options.top] Cropping top offset. Introduced in fabric v1.2.14 + * @param {Number} [options.width] Cropping width. Introduced in fabric v1.2.14 + * @param {Number} [options.height] Cropping height. Introduced in fabric v1.2.14 + * @returns {string} A DOMString containing the requested data URI + * @example + * imgEl.src = imageEditor.toDataURL(); + * + * imageEditor.loadImageFromURL(imageEditor.toDataURL(), 'FilterImage').then(() => { + * imageEditor.addImageObject(imgUrl); + * }); + */ -var _tuiColorPicker = __webpack_require__(/*! tui-color-picker */ "tui-color-picker"); + }, { + key: "toDataURL", + value: function toDataURL(options) { + return this._graphics.toDataURL(options); + } + /** + * Get image name + * @returns {string} image name + * @example + * console.log(imageEditor.getImageName()); + */ -var _tuiColorPicker2 = _interopRequireDefault(_tuiColorPicker); + }, { + key: "getImageName", + value: function getImageName() { + return this._graphics.getImageName(); + } + /** + * Clear undoStack + * @example + * imageEditor.clearUndoStack(); + */ -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + }, { + key: "clearUndoStack", + value: function clearUndoStack() { + this._invoker.clearUndoStack(); + } + /** + * Clear redoStack + * @example + * imageEditor.clearRedoStack(); + */ -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + }, { + key: "clearRedoStack", + value: function clearRedoStack() { + this._invoker.clearRedoStack(); + } + /** + * Whehter the undo stack is empty or not + * @returns {boolean} + * imageEditor.isEmptyUndoStack(); + */ -var PICKER_COLOR = ['#000000', '#2a2a2a', '#545454', '#7e7e7e', '#a8a8a8', '#d2d2d2', '#ffffff', '', '#ff4040', '#ff6518', '#ffbb3b', '#03bd9e', '#00a9ff', '#515ce6', '#9e5fff', '#ff5583']; + }, { + key: "isEmptyUndoStack", + value: function isEmptyUndoStack() { + return this._invoker.isEmptyUndoStack(); + } + /** + * Whehter the redo stack is empty or not + * @returns {boolean} + * imageEditor.isEmptyRedoStack(); + */ -/** - * Colorpicker control class - * @class - * @ignore - */ + }, { + key: "isEmptyRedoStack", + value: function isEmptyRedoStack() { + return this._invoker.isEmptyRedoStack(); + } + /** + * Resize canvas dimension + * @param {{width: number, height: number}} dimension - Max width & height + * @returns {Promise} + */ -var Colorpicker = function () { - function Colorpicker(colorpickerElement) { - var defaultColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '#7e7e7e'; - var toggleDirection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'up'; - var usageStatistics = arguments[3]; + }, { + key: "resizeCanvasDimension", + value: function resizeCanvasDimension(dimension) { + if (!dimension) { + return promise_default().reject(rejectMessages.invalidParameters); + } - _classCallCheck(this, Colorpicker); + return this.execute(commandNames.RESIZE_CANVAS_DIMENSION, dimension); + } + /** + * Destroy + */ - this.colorpickerElement = colorpickerElement; - this.usageStatistics = usageStatistics; + }, { + key: "destroy", + value: function destroy() { + var _this6 = this; - this._show = false; + this.stopDrawingMode(); - this._colorpickerElement = colorpickerElement; - this._toggleDirection = toggleDirection; - this._makePickerButtonElement(defaultColor); - this._makePickerLayerElement(colorpickerElement, colorpickerElement.getAttribute('title')); - this._color = defaultColor; - this.picker = _tuiColorPicker2.default.create({ - container: this.pickerElement, - preset: PICKER_COLOR, - color: defaultColor, - usageStatistics: this.usageStatistics - }); + this._detachDomEvents(); - this._addEvent(); - } + this._graphics.destroy(); - /** - * Destroys the instance. - */ + this._graphics = null; + if (this.ui) { + this._detachColorPickerInputBoxEvents(); - _createClass(Colorpicker, [{ - key: 'destroy', - value: function destroy() { - var _this = this; + this.ui.destroy(); + } - this._removeEvent(); - this.picker.destroy(); - this.colorpickerElement.innerHTML = ''; - _tuiCodeSnippet2.default.forEach(this, function (value, key) { - _this[key] = null; - }); + imageEditor_forEach(this, function (value, key) { + _this6[key] = null; + }, this); } - /** - * Get color - * @returns {Number} color value + * Set position + * @param {Object} options - Position options (left or top) + * @private */ }, { - key: '_changeColorElement', + key: "_setPositions", + value: function _setPositions(options) { + var centerPosition = this._graphics.getCenter(); + if (isUndefined(options.left)) { + options.left = centerPosition.left; + } - /** - * Change color element - * @param {string} color color value - * #private - */ - value: function _changeColorElement(color) { - if (color) { - this.colorElement.classList.remove('transparent'); - this.colorElement.style.backgroundColor = color; - } else { - this.colorElement.style.backgroundColor = '#fff'; - this.colorElement.classList.add('transparent'); + if (isUndefined(options.top)) { + options.top = centerPosition.top; } } - /** - * Make picker button element - * @param {string} defaultColor color value - * @private + * Set properties of active object + * @param {number} id - object id + * @param {Object} keyValue - key & value + * @returns {Promise} + * @example + * imageEditor.setObjectProperties(id, { + * left:100, + * top:100, + * width: 200, + * height: 200, + * opacity: 0.5 + * }); */ }, { - key: '_makePickerButtonElement', - value: function _makePickerButtonElement(defaultColor) { - this.colorpickerElement.classList.add('tui-image-editor-button'); - - this.colorElement = document.createElement('div'); - this.colorElement.className = 'color-picker-value'; - if (defaultColor) { - this.colorElement.style.backgroundColor = defaultColor; - } else { - this.colorElement.classList.add('transparent'); - } + key: "setObjectProperties", + value: function setObjectProperties(id, keyValue) { + return this.execute(commandNames.SET_OBJECT_PROPERTIES, id, keyValue); } + /** + * Set properties of active object, Do not leave an invoke history. + * @param {number} id - object id + * @param {Object} keyValue - key & value + * @example + * imageEditor.setObjectPropertiesQuietly(id, { + * left:100, + * top:100, + * width: 200, + * height: 200, + * opacity: 0.5 + * }); + */ + }, { + key: "setObjectPropertiesQuietly", + value: function setObjectPropertiesQuietly(id, keyValue) { + this._graphics.setObjectProperties(id, keyValue); + } /** - * Make picker layer element - * @param {HTMLElement} colorpickerElement color picker element - * @param {string} title picker title - * @private + * Get properties of active object corresponding key + * @param {number} id - object id + * @param {Array|ObjectProps|string} keys - property's key + * @returns {ObjectProps} properties if id is valid or null + * @example + * var props = imageEditor.getObjectProperties(id, 'left'); + * console.log(props); + * @example + * var props = imageEditor.getObjectProperties(id, ['left', 'top', 'width', 'height']); + * console.log(props); + * @example + * var props = imageEditor.getObjectProperties(id, { + * left: null, + * top: null, + * width: null, + * height: null, + * opacity: null + * }); + * console.log(props); */ }, { - key: '_makePickerLayerElement', - value: function _makePickerLayerElement(colorpickerElement, title) { - var label = document.createElement('label'); - var triangle = document.createElement('div'); + key: "getObjectProperties", + value: function getObjectProperties(id, keys) { + var object = this._graphics.getObject(id); - this.pickerControl = document.createElement('div'); - this.pickerControl.className = 'color-picker-control'; + if (!object) { + return null; + } - this.pickerElement = document.createElement('div'); - this.pickerElement.className = 'color-picker'; + return this._graphics.getObjectProperties(id, keys); + } + /** + * Get the canvas size + * @returns {Object} {{width: number, height: number}} canvas size + * @example + * var canvasSize = imageEditor.getCanvasSize(); + * console.log(canvasSize.width); + * console.height(canvasSize.height); + */ - label.innerHTML = title; - triangle.className = 'triangle'; + }, { + key: "getCanvasSize", + value: function getCanvasSize() { + return this._graphics.getCanvasSize(); + } + /** + * Get object position by originX, originY + * @param {number} id - object id + * @param {string} originX - can be 'left', 'center', 'right' + * @param {string} originY - can be 'top', 'center', 'bottom' + * @returns {Object} {{x:number, y: number}} position by origin if id is valid, or null + * @example + * var position = imageEditor.getObjectPosition(id, 'left', 'top'); + * console.log(position); + */ - this.pickerControl.appendChild(this.pickerElement); - this.pickerControl.appendChild(triangle); + }, { + key: "getObjectPosition", + value: function getObjectPosition(id, originX, originY) { + return this._graphics.getObjectPosition(id, originX, originY); + } + /** + * Set object position by originX, originY + * @param {number} id - object id + * @param {Object} posInfo - position object + * @param {number} posInfo.x - x position + * @param {number} posInfo.y - y position + * @param {string} posInfo.originX - can be 'left', 'center', 'right' + * @param {string} posInfo.originY - can be 'top', 'center', 'bottom' + * @returns {Promise} + * @example + * // align the object to 'left', 'top' + * imageEditor.setObjectPosition(id, { + * x: 0, + * y: 0, + * originX: 'left', + * originY: 'top' + * }); + * @example + * // align the object to 'right', 'top' + * var canvasSize = imageEditor.getCanvasSize(); + * imageEditor.setObjectPosition(id, { + * x: canvasSize.width, + * y: 0, + * originX: 'right', + * originY: 'top' + * }); + * @example + * // align the object to 'left', 'bottom' + * var canvasSize = imageEditor.getCanvasSize(); + * imageEditor.setObjectPosition(id, { + * x: 0, + * y: canvasSize.height, + * originX: 'left', + * originY: 'bottom' + * }); + * @example + * // align the object to 'right', 'bottom' + * var canvasSize = imageEditor.getCanvasSize(); + * imageEditor.setObjectPosition(id, { + * x: canvasSize.width, + * y: canvasSize.height, + * originX: 'right', + * originY: 'bottom' + * }); + */ - colorpickerElement.appendChild(this.pickerControl); - colorpickerElement.appendChild(this.colorElement); - colorpickerElement.appendChild(label); + }, { + key: "setObjectPosition", + value: function setObjectPosition(id, posInfo) { + return this.execute(commandNames.SET_OBJECT_POSITION, id, posInfo); } - /** - * Add event - * @private + * @param {object} dimensions - Image Dimensions + * @returns {Promise} */ }, { - key: '_addEvent', - value: function _addEvent() { - var _this2 = this; + key: "resize", + value: function resize(dimensions) { + return this.execute(commandNames.RESIZE_IMAGE, dimensions); + } + }]); - this.picker.on('selectColor', function (value) { - _this2._changeColorElement(value.color); - _this2._color = value.color; - _this2.fire('change', value.color); - }); + return ImageEditor; +}(); - this.eventHandler = { - pickerToggle: this._pickerToggleEventHandler.bind(this), - pickerHide: function pickerHide() { - return _this2.hide(); - } - }; +action.mixin(ImageEditor); +imageEditor_CustomEvents.mixin(ImageEditor); +/* harmony default export */ var imageEditor = (ImageEditor); +;// CONCATENATED MODULE: ./src/js/command/addIcon.js - this.colorpickerElement.addEventListener('click', this.eventHandler.pickerToggle); - document.body.addEventListener('click', this.eventHandler.pickerHide); - } - /** - * Remove event - * @private - */ +/** + * @author NHN. FE Development Team + * @fileoverview Add an icon + */ - }, { - key: '_removeEvent', - value: function _removeEvent() { - this.colorpickerElement.removeEventListener('click', this.eventHandler.pickerToggle); - document.body.removeEventListener('click', this.eventHandler.pickerHide); - this.picker.off(); - } - /** - * Picker toggle event handler - * @param {object} event - change event - * @private - */ +var ICON = componentNames.ICON; +var addIcon_command = { + name: commandNames.ADD_ICON, - }, { - key: '_pickerToggleEventHandler', - value: function _pickerToggleEventHandler(event) { - var target = event.target; + /** + * Add an icon + * @param {Graphics} graphics - Graphics instance + * @param {string} type - Icon type ('arrow', 'cancel', custom icon name) + * @param {Object} options - Icon options + * @param {string} [options.fill] - Icon foreground color + * @param {string} [options.left] - Icon x position + * @param {string} [options.top] - Icon y position + * @returns {Promise} + */ + execute: function execute(graphics, type, options) { + var _this = this; - var isInPickerControl = target && this._isElementInColorPickerControl(target); + var iconComp = graphics.getComponent(ICON); + return iconComp.add(type, options).then(function (objectProps) { + _this.undoData.object = graphics.getObject(objectProps.id); + return objectProps; + }); + }, - if (!isInPickerControl || isInPickerControl && this._isPaletteButton(target)) { - this._show = !this._show; - this.pickerControl.style.display = this._show ? 'block' : 'none'; - this._setPickerControlPosition(); - this.fire('changeShow', this); - } - event.stopPropagation(); - } + /** + * @param {Graphics} graphics - Graphics instance + * @returns {Promise} + */ + undo: function undo(graphics) { + graphics.remove(this.undoData.object); + return promise_default().resolve(); + } +}; +factory_command.register(addIcon_command); +/* harmony default export */ var addIcon = ((/* unused pure expression or super */ null && (addIcon_command))); +;// CONCATENATED MODULE: ./src/js/command/addImageObject.js - /** - * Check hex input or not - * @param {Element} target - Event target element - * @returns {boolean} - * @private - */ - }, { - key: '_isPaletteButton', - value: function _isPaletteButton(target) { - return target.className === 'tui-colorpicker-palette-button'; - } +/** + * @author NHN. FE Development Team + * @fileoverview Add an image object + */ - /** - * Check given element is in pickerControl element - * @param {Element} element - element to check - * @returns {boolean} - * @private - */ - }, { - key: '_isElementInColorPickerControl', - value: function _isElementInColorPickerControl(element) { - var parentNode = element; +var addImageObject_command = { + name: commandNames.ADD_IMAGE_OBJECT, - while (parentNode !== document.body) { - if (!parentNode) { - break; - } + /** + * Add an image object + * @param {Graphics} graphics - Graphics instance + * @param {string} imgUrl - Image url to make object + * @returns {Promise} + */ + execute: function execute(graphics, imgUrl) { + var _this = this; - if (parentNode === this.pickerControl) { - return true; - } + return graphics.addImageObject(imgUrl).then(function (objectProps) { + _this.undoData.object = graphics.getObject(objectProps.id); + return objectProps; + }); + }, - parentNode = parentNode.parentNode; - } + /** + * @param {Graphics} graphics - Graphics instance + * @returns {Promise} + */ + undo: function undo(graphics) { + graphics.remove(this.undoData.object); + return promise_default().resolve(); + } +}; +factory_command.register(addImageObject_command); +/* harmony default export */ var addImageObject = ((/* unused pure expression or super */ null && (addImageObject_command))); +;// CONCATENATED MODULE: ./src/js/command/addObject.js - return false; - } - }, { - key: 'hide', - value: function hide() { - this._show = false; - this.pickerControl.style.display = 'none'; - } - /** - * Set picker control position - * @private - */ +/** + * @author NHN. FE Development Team + * @fileoverview Add an object + */ - }, { - key: '_setPickerControlPosition', - value: function _setPickerControlPosition() { - var controlStyle = this.pickerControl.style; - var halfPickerWidth = this._colorpickerElement.clientWidth / 2 + 2; - var left = this.pickerControl.offsetWidth / 2 - halfPickerWidth; - var top = (this.pickerControl.offsetHeight + 10) * -1; - if (this._toggleDirection === 'down') { - top = 30; +var addObject_command = { + name: commandNames.ADD_OBJECT, + + /** + * Add an object + * @param {Graphics} graphics - Graphics instance + * @param {Object} object - Fabric object + * @returns {Promise} + */ + execute: function execute(graphics, object) { + return new (promise_default())(function (resolve, reject) { + if (!graphics.contains(object)) { + graphics.add(object); + resolve(object); + } else { + reject(rejectMessages.addedObject); } + }); + }, - controlStyle.top = top + 'px'; - controlStyle.left = '-' + left + 'px'; - } - }, { - key: 'color', - get: function get() { - return this._color; - } + /** + * @param {Graphics} graphics - Graphics instance + * @param {Object} object - Fabric object + * @returns {Promise} + */ + undo: function undo(graphics, object) { + return new (promise_default())(function (resolve, reject) { + if (graphics.contains(object)) { + graphics.remove(object); + resolve(object); + } else { + reject(rejectMessages.noObject); + } + }); + } +}; +factory_command.register(addObject_command); +/* harmony default export */ var addObject = ((/* unused pure expression or super */ null && (addObject_command))); +;// CONCATENATED MODULE: ./src/js/command/addShape.js - /** - * Set color - * @param {string} color color value - */ - , - set: function set(color) { - this._color = color; - this._changeColorElement(color); - } - }]); - return Colorpicker; -}(); +/** + * @author NHN. FE Development Team + * @fileoverview Add a shape + */ -_tuiCodeSnippet2.default.CustomEvents.mixin(Colorpicker); -exports.default = Colorpicker; -/***/ }), +var SHAPE = componentNames.SHAPE; +var addShape_command = { + name: commandNames.ADD_SHAPE, + + /** + * Add a shape + * @param {Graphics} graphics - Graphics instance + * @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle') + * @param {Object} options - Shape options + * @param {string} [options.fill] - Shape foreground color (ex: '#fff', 'transparent') + * @param {string} [options.stroke] - Shape outline color + * @param {number} [options.strokeWidth] - Shape outline width + * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) + * @param {number} [options.height] - Height value (When type option is 'rect', this options can use) + * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) + * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) + * @param {number} [options.left] - Shape x position + * @param {number} [options.top] - Shape y position + * @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not + * @returns {Promise} + */ + execute: function execute(graphics, type, options) { + var _this = this; + + var shapeComp = graphics.getComponent(SHAPE); + return shapeComp.add(type, options).then(function (objectProps) { + var id = objectProps.id; + _this.undoData.object = graphics.getObject(id); + return objectProps; + }); + }, -/***/ "./src/js/ui/tools/range.js": -/*!**********************************!*\ - !*** ./src/js/ui/tools/range.js ***! - \**********************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { + /** + * @param {Graphics} graphics - Graphics instance + * @returns {Promise} + */ + undo: function undo(graphics) { + graphics.remove(this.undoData.object); + return promise_default().resolve(); + } +}; +factory_command.register(addShape_command); +/* harmony default export */ var addShape = ((/* unused pure expression or super */ null && (addShape_command))); +;// CONCATENATED MODULE: ./src/js/command/addText.js -"use strict"; +/** + * @author NHN. FE Development Team + * @fileoverview Add a text object + */ -Object.defineProperty(exports, "__esModule", { - value: true -}); -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); +var TEXT = componentNames.TEXT; +var addText_command = { + name: commandNames.ADD_TEXT, -var _tuiCodeSnippet2 = _interopRequireDefault(_tuiCodeSnippet); + /** + * Add a text object + * @param {Graphics} graphics - Graphics instance + * @param {string} text - Initial input text + * @param {Object} [options] Options for text styles + * @param {Object} [options.styles] Initial styles + * @param {string} [options.styles.fill] Color + * @param {string} [options.styles.fontFamily] Font type for text + * @param {number} [options.styles.fontSize] Size + * @param {string} [options.styles.fontStyle] Type of inclination (normal / italic) + * @param {string} [options.styles.fontWeight] Type of thicker or thinner looking (normal / bold) + * @param {string} [options.styles.textAlign] Type of text align (left / center / right) + * @param {string} [options.styles.textDecoration] Type of line (underline / line-through / overline) + * @param {{x: number, y: number}} [options.position] - Initial position + * @returns {Promise} + */ + execute: function execute(graphics, text, options) { + var _this = this; -var _util = __webpack_require__(/*! @/util */ "./src/js/util.js"); + var textComp = graphics.getComponent(TEXT); -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); + if (this.undoData.object) { + var undoObject = this.undoData.object; + return new (promise_default())(function (resolve, reject) { + if (!graphics.contains(undoObject)) { + graphics.add(undoObject); + resolve(undoObject); + } else { + reject(rejectMessages.redo); + } + }); + } -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + return textComp.add(text, options).then(function (objectProps) { + var id = objectProps.id; + var textObject = graphics.getObject(id); + _this.undoData.object = textObject; + setCachedUndoDataForDimension(makeSelectionUndoData(textObject, function () { + return makeSelectionUndoDatum(id, textObject, false); + })); + return objectProps; + }); + }, -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + /** + * @param {Graphics} graphics - Graphics instance + * @returns {Promise} + */ + undo: function undo(graphics) { + graphics.remove(this.undoData.object); + return promise_default().resolve(); + } +}; +factory_command.register(addText_command); +/* harmony default export */ var addText = ((/* unused pure expression or super */ null && (addText_command))); +;// CONCATENATED MODULE: ./src/js/command/applyFilter.js -var INPUT_FILTER_REGEXP = /(-?)([0-9]*)[^0-9]*([0-9]*)/g; /** - * Range control class - * @class - * @ignore + * @author NHN. FE Development Team + * @fileoverview Apply a filter into an image */ -var Range = function () { - /** - * @constructor - * @extends {View} - * @param {Object} rangeElements - Html resources for creating sliders - * @param {HTMLElement} rangeElements.slider - b - * @param {HTMLElement} [rangeElements.input] - c - * @param {Object} options - Slider make options - * @param {number} options.min - min value - * @param {number} options.max - max value - * @param {number} options.value - default value - * @param {number} [options.useDecimal] - Decimal point processing. - * @param {boolean} [options.realTimeEvent] - Reflect live events. - */ - function Range(rangeElements) { - var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; - _classCallCheck(this, Range); - this._value = options.value || 0; +var FILTER = componentNames.FILTER; +/** + * Cached data for undo + * @type {Object} + */ - this.rangeElement = rangeElements.slider; - this.rangeInputElement = rangeElements.input; +var cachedUndoDataForSilent = null; +/** + * Make undoData + * @param {string} type - Filter type + * @param {Object} prevfilterOption - prev Filter options + * @param {Object} options - Filter options + * @returns {object} - undo data + */ - this._drawRangeElement(); +function makeUndoData(type, prevfilterOption, options) { + var undoData = {}; - this.rangeWidth = this._getRangeWidth(); - this._min = options.min || 0; - this._max = options.max || 100; - this._useDecimal = options.useDecimal; - this._absMax = this._min * -1 + this._max; - this.realTimeEvent = options.realTimeEvent || false; + if (type === 'mask') { + undoData.object = options.mask; + } - this.eventHandler = { - startChangingSlide: this._startChangingSlide.bind(this), - stopChangingSlide: this._stopChangingSlide.bind(this), - changeSlide: this._changeSlide.bind(this), - changeSlideFinally: this._changeSlideFinally.bind(this), - changeInput: this._changeValueWithInput.bind(this, false), - changeInputFinally: this._changeValueWithInput.bind(this, true), - changeInputWithArrow: this._changeValueWithInputKeyEvent.bind(this) - }; + undoData.options = prevfilterOption; + return undoData; +} - this._addClickEvent(); - this._addDragEvent(); - this._addInputEvent(); - this.value = options.value; - this.trigger('change'); - } +var applyFilter_command = { + name: commandNames.APPLY_FILTER, /** - * Destroys the instance. + * Apply a filter into an image + * @param {Graphics} graphics - Graphics instance + * @param {string} type - Filter type + * @param {Object} options - Filter options + * @param {number} options.maskObjId - masking image object id + * @param {boolean} isSilent - is silent execution or not + * @returns {Promise} */ + execute: function execute(graphics, type, options, isSilent) { + var filterComp = graphics.getComponent(FILTER); + if (type === 'mask') { + var maskObj = graphics.getObject(options.maskObjId); - _createClass(Range, [{ - key: 'destroy', - value: function destroy() { - var _this = this; + if (!(maskObj && maskObj.isType('image'))) { + return promise_default().reject(rejectMessages.invalidParameters); + } - this._removeClickEvent(); - this._removeDragEvent(); - this._removeInputEvent(); - this.rangeElement.innerHTML = ''; - _tuiCodeSnippet2.default.forEach(this, function (value, key) { - _this[key] = null; + external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().extend(options, { + mask: maskObj }); + graphics.remove(options.mask); } - /** - * Set range max value and re position cursor - * @param {number} maxValue - max value - */ - - }, { - key: 'trigger', - - - /** - * event trigger - * @param {string} type - type - */ - value: function trigger(type) { - this.fire(type, this._value); - } - - /** - * Calculate slider width - * @returns {number} - slider width - */ - - }, { - key: '_getRangeWidth', - value: function _getRangeWidth() { - var getElementWidth = function getElementWidth(element) { - return (0, _util.toInteger)(window.getComputedStyle(element, null).width); - }; - - return getElementWidth(this.rangeElement) - getElementWidth(this.pointer); + if (!this.isRedo) { + var prevfilterOption = filterComp.getOptions(type); + var undoData = makeUndoData(type, prevfilterOption, options); + cachedUndoDataForSilent = this.setUndoData(undoData, cachedUndoDataForSilent, isSilent); } - /** - * Make range element - * @private - */ - - }, { - key: '_drawRangeElement', - value: function _drawRangeElement() { - this.rangeElement.classList.add('tui-image-editor-range'); - - this.bar = document.createElement('div'); - this.bar.className = 'tui-image-editor-virtual-range-bar'; - - this.subbar = document.createElement('div'); - this.subbar.className = 'tui-image-editor-virtual-range-subbar'; - - this.pointer = document.createElement('div'); - this.pointer.className = 'tui-image-editor-virtual-range-pointer'; + return filterComp.add(type, options); + }, - this.bar.appendChild(this.subbar); - this.bar.appendChild(this.pointer); - this.rangeElement.appendChild(this.bar); - } + /** + * @param {Graphics} graphics - Graphics instance + * @param {string} type - Filter type + * @returns {Promise} + */ + undo: function undo(graphics, type) { + var filterComp = graphics.getComponent(FILTER); - /** - * Add range input editing event - * @private - */ + if (type === 'mask') { + var mask = this.undoData.object; + graphics.add(mask); + graphics.setActiveObject(mask); + return filterComp.remove(type); + } // options changed case - }, { - key: '_addInputEvent', - value: function _addInputEvent() { - if (this.rangeInputElement) { - this.rangeInputElement.addEventListener('keydown', this.eventHandler.changeInputWithArrow); - this.rangeInputElement.addEventListener('keyup', this.eventHandler.changeInput); - this.rangeInputElement.addEventListener('blur', this.eventHandler.changeInputFinally); - } - } - /** - * Remove range input editing event - * @private - */ + if (this.undoData.options) { + return filterComp.add(type, this.undoData.options); + } // filter added case - }, { - key: '_removeInputEvent', - value: function _removeInputEvent() { - if (this.rangeInputElement) { - this.rangeInputElement.removeEventListener('keydown', this.eventHandler.changeInputWithArrow); - this.rangeInputElement.removeEventListener('keyup', this.eventHandler.changeInput); - this.rangeInputElement.removeEventListener('blur', this.eventHandler.changeInputFinally); - } - } - /** - * change angle event - * @param {object} event - key event - * @private - */ + return filterComp.remove(type); + } +}; +factory_command.register(applyFilter_command); +/* harmony default export */ var applyFilter = ((/* unused pure expression or super */ null && (applyFilter_command))); +;// CONCATENATED MODULE: ./src/js/command/changeIconColor.js - }, { - key: '_changeValueWithInputKeyEvent', - value: function _changeValueWithInputKeyEvent(event) { - var keyCode = event.keyCode, - target = event.target; +/** + * @author NHN. FE Development Team + * @fileoverview Change icon color + */ - if ([_consts.keyCodes.ARROW_UP, _consts.keyCodes.ARROW_DOWN].indexOf(keyCode) < 0) { - return; - } - var value = Number(target.value); +var changeIconColor_ICON = componentNames.ICON; +var changeIconColor_command = { + name: commandNames.CHANGE_ICON_COLOR, - value = this._valueUpDownForKeyEvent(value, keyCode); + /** + * Change icon color + * @param {Graphics} graphics - Graphics instance + * @param {number} id - object id + * @param {string} color - Color for icon + * @returns {Promise} + */ + execute: function execute(graphics, id, color) { + var _this = this; - var unChanged = value < this._min || value > this._max; + return new (promise_default())(function (resolve, reject) { + var iconComp = graphics.getComponent(changeIconColor_ICON); + var targetObj = graphics.getObject(id); - if (!unChanged) { - var clampValue = (0, _util.clamp)(value, this._min, this.max); - this.value = clampValue; - this.fire('change', clampValue, false); + if (!targetObj) { + reject(rejectMessages.noObject); } - } - /** - * value up down for input - * @param {number} value - original value number - * @param {number} keyCode - input event key code - * @returns {number} value - changed value - * @private - */ + _this.undoData.object = targetObj; + _this.undoData.color = iconComp.getColor(targetObj); + iconComp.setColor(color, targetObj); + resolve(); + }); + }, - }, { - key: '_valueUpDownForKeyEvent', - value: function _valueUpDownForKeyEvent(value, keyCode) { - var step = this._useDecimal ? 0.1 : 1; + /** + * @param {Graphics} graphics - Graphics instance + * @returns {Promise} + */ + undo: function undo(graphics) { + var iconComp = graphics.getComponent(changeIconColor_ICON); + var _this$undoData = this.undoData, + icon = _this$undoData.object, + color = _this$undoData.color; + iconComp.setColor(color, icon); + return promise_default().resolve(); + } +}; +factory_command.register(changeIconColor_command); +/* harmony default export */ var changeIconColor = ((/* unused pure expression or super */ null && (changeIconColor_command))); +;// CONCATENATED MODULE: ./src/js/command/changeShape.js - if (keyCode === _consts.keyCodes.ARROW_UP) { - value += step; - } else if (keyCode === _consts.keyCodes.ARROW_DOWN) { - value -= step; - } - return value; - } +/** + * @author NHN. FE Development Team + * @fileoverview change a shape + */ - /** - * change angle event - * @param {boolean} isLast - Is last change - * @param {object} event - key event - * @private - */ - }, { - key: '_changeValueWithInput', - value: function _changeValueWithInput(isLast, event) { - var keyCode = event.keyCode, - target = event.target; +var changeShape_SHAPE = componentNames.SHAPE; +/** + * Cached data for undo + * @type {Object} + */ - if ([_consts.keyCodes.ARROW_UP, _consts.keyCodes.ARROW_DOWN].indexOf(keyCode) >= 0) { - return; - } +var changeShape_cachedUndoDataForSilent = null; +/** + * Make undoData + * @param {object} options - shape options + * @param {Component} targetObj - shape component + * @returns {object} - undo data + */ - var stringValue = this._filterForInputText(target.value); - var waitForChange = !stringValue || isNaN(stringValue); - target.value = stringValue; +function changeShape_makeUndoData(options, targetObj) { + var undoData = { + object: targetObj, + options: {} + }; + external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().forEachOwnProperties(options, function (value, key) { + undoData.options[key] = targetObj[key]; + }); + return undoData; +} - if (!waitForChange) { - var value = this._useDecimal ? Number(stringValue) : (0, _util.toInteger)(stringValue); - value = (0, _util.clamp)(value, this._min, this.max); +var changeShape_command = { + name: commandNames.CHANGE_SHAPE, - this.value = value; - this.fire('change', value, isLast); - } - } + /** + * Change a shape + * @param {Graphics} graphics - Graphics instance + * @param {number} id - object id + * @param {Object} options - Shape options + * @param {string} [options.fill] - Shape foreground color (ex: '#fff', 'transparent') + * @param {string} [options.stroke] - Shape outline color + * @param {number} [options.strokeWidth] - Shape outline width + * @param {number} [options.width] - Width value (When type option is 'rect', this options can use) + * @param {number} [options.height] - Height value (When type option is 'rect', this options can use) + * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use) + * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use) + * @param {number} [options.left] - Shape x position + * @param {number} [options.top] - Shape y position + * @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not + * @param {boolean} isSilent - is silent execution or not + * @returns {Promise} + */ + execute: function execute(graphics, id, options, isSilent) { + var shapeComp = graphics.getComponent(changeShape_SHAPE); + var targetObj = graphics.getObject(id); - /** - * Add Range click event - * @private - */ + if (!targetObj) { + return promise_default().reject(rejectMessages.noObject); + } - }, { - key: '_addClickEvent', - value: function _addClickEvent() { - this.rangeElement.addEventListener('click', this.eventHandler.changeSlideFinally); + if (!this.isRedo) { + var undoData = changeShape_makeUndoData(options, targetObj); + changeShape_cachedUndoDataForSilent = this.setUndoData(undoData, changeShape_cachedUndoDataForSilent, isSilent); } - /** - * Remove Range click event - * @private - */ + return shapeComp.change(targetObj, options); + }, - }, { - key: '_removeClickEvent', - value: function _removeClickEvent() { - this.rangeElement.removeEventListener('click', this.eventHandler.changeSlideFinally); - } + /** + * @param {Graphics} graphics - Graphics instance + * @returns {Promise} + */ + undo: function undo(graphics) { + var shapeComp = graphics.getComponent(changeShape_SHAPE); + var _this$undoData = this.undoData, + shape = _this$undoData.object, + options = _this$undoData.options; + return shapeComp.change(shape, options); + } +}; +factory_command.register(changeShape_command); +/* harmony default export */ var changeShape = ((/* unused pure expression or super */ null && (changeShape_command))); +;// CONCATENATED MODULE: ./src/js/command/changeText.js - /** - * Add Range drag event - * @private - */ - }, { - key: '_addDragEvent', - value: function _addDragEvent() { - this.pointer.addEventListener('mousedown', this.eventHandler.startChangingSlide); - } +/** + * @author NHN. FE Development Team + * @fileoverview Change a text + */ - /** - * Remove Range drag event - * @private - */ - }, { - key: '_removeDragEvent', - value: function _removeDragEvent() { - this.pointer.removeEventListener('mousedown', this.eventHandler.startChangingSlide); +var changeText_TEXT = componentNames.TEXT; +var changeText_command = { + name: commandNames.CHANGE_TEXT, + + /** + * Change a text + * @param {Graphics} graphics - Graphics instance + * @param {number} id - object id + * @param {string} text - Changing text + * @returns {Promise} + */ + execute: function execute(graphics, id, text) { + var textComp = graphics.getComponent(changeText_TEXT); + var targetObj = graphics.getObject(id); + + if (!targetObj) { + return promise_default().reject(rejectMessages.noObject); } - /** - * change angle event - * @param {object} event - change event - * @private - */ + this.undoData.object = targetObj; + this.undoData.text = textComp.getText(targetObj); + return textComp.change(targetObj, text); + }, - }, { - key: '_changeSlide', - value: function _changeSlide(event) { - var changePosition = event.screenX; - var diffPosition = changePosition - this.firstPosition; - var touchPx = this.firstLeft + diffPosition; - touchPx = touchPx > this.rangeWidth ? this.rangeWidth : touchPx; - touchPx = touchPx < 0 ? 0 : touchPx; + /** + * @param {Graphics} graphics - Graphics instance + * @returns {Promise} + */ + undo: function undo(graphics) { + var textComp = graphics.getComponent(changeText_TEXT); + var _this$undoData = this.undoData, + textObj = _this$undoData.object, + text = _this$undoData.text; + return textComp.change(textObj, text); + } +}; +factory_command.register(changeText_command); +/* harmony default export */ var changeText = ((/* unused pure expression or super */ null && (changeText_command))); +;// CONCATENATED MODULE: ./src/js/command/changeTextStyle.js - this.pointer.style.left = touchPx + 'px'; - this.subbar.style.right = this.rangeWidth - touchPx + 'px'; - var ratio = touchPx / this.rangeWidth; - var resultValue = this._absMax * ratio + this._min; - var value = this._useDecimal ? resultValue : (0, _util.toInteger)(resultValue); - var isValueChanged = this.value !== value; +/** + * @author NHN. FE Development Team + * @fileoverview Change text styles + */ - if (isValueChanged) { - this.value = value; - if (this.realTimeEvent) { - this.fire('change', this._value, false); - } - } - } - }, { - key: '_changeSlideFinally', - value: function _changeSlideFinally(event) { - event.stopPropagation(); - if (event.target.className !== 'tui-image-editor-range') { - return; - } - var touchPx = event.offsetX; - var ratio = touchPx / this.rangeWidth; - var value = this._absMax * ratio + this._min; - this.pointer.style.left = ratio * this.rangeWidth + 'px'; - this.subbar.style.right = (1 - ratio) * this.rangeWidth + 'px'; - this.value = value; - this.fire('change', value, true); - } - }, { - key: '_startChangingSlide', - value: function _startChangingSlide(event) { - this.firstPosition = event.screenX; - this.firstLeft = (0, _util.toInteger)(this.pointer.style.left) || 0; - document.addEventListener('mousemove', this.eventHandler.changeSlide); - document.addEventListener('mouseup', this.eventHandler.stopChangingSlide); - } +var changeTextStyle_TEXT = componentNames.TEXT; +/** + * Cached data for undo + * @type {Object} + */ - /** - * stop change angle event - * @private - */ +var changeTextStyle_cachedUndoDataForSilent = null; +/** + * Make undoData + * @param {object} styles - text styles + * @param {Component} targetObj - text component + * @returns {object} - undo data + */ - }, { - key: '_stopChangingSlide', - value: function _stopChangingSlide() { - this.fire('change', this._value, true); +function changeTextStyle_makeUndoData(styles, targetObj) { + var undoData = { + object: targetObj, + styles: {} + }; + external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().forEachOwnProperties(styles, function (value, key) { + var undoValue = targetObj[key]; + undoData.styles[key] = undoValue; + }); + return undoData; +} - document.removeEventListener('mousemove', this.eventHandler.changeSlide); - document.removeEventListener('mouseup', this.eventHandler.stopChangingSlide); - } +var changeTextStyle_command = { + name: commandNames.CHANGE_TEXT_STYLE, - /** - * Unnecessary string filtering. - * @param {string} inputValue - origin string of input - * @returns {string} filtered string - * @private - */ + /** + * Change text styles + * @param {Graphics} graphics - Graphics instance + * @param {number} id - object id + * @param {Object} styles - text styles + * @param {string} [styles.fill] Color + * @param {string} [styles.fontFamily] Font type for text + * @param {number} [styles.fontSize] Size + * @param {string} [styles.fontStyle] Type of inclination (normal / italic) + * @param {string} [styles.fontWeight] Type of thicker or thinner looking (normal / bold) + * @param {string} [styles.textAlign] Type of text align (left / center / right) + * @param {string} [styles.textDecoration] Type of line (underline / line-through / overline) + * @param {boolean} isSilent - is silent execution or not + * @returns {Promise} + */ + execute: function execute(graphics, id, styles, isSilent) { + var textComp = graphics.getComponent(changeTextStyle_TEXT); + var targetObj = graphics.getObject(id); - }, { - key: '_filterForInputText', - value: function _filterForInputText(inputValue) { - return inputValue.replace(INPUT_FILTER_REGEXP, '$1$2$3'); + if (!targetObj) { + return promise_default().reject(rejectMessages.noObject); } - }, { - key: 'max', - set: function set(maxValue) { - this._max = maxValue; - this._absMax = this._min * -1 + this._max; - this.value = this._value; - }, - get: function get() { - return this._max; + + if (!this.isRedo) { + var undoData = changeTextStyle_makeUndoData(styles, targetObj); + changeTextStyle_cachedUndoDataForSilent = this.setUndoData(undoData, changeTextStyle_cachedUndoDataForSilent, isSilent); } - /** - * Set range min value and re position cursor - * @param {number} minValue - min value - */ + return textComp.setStyle(targetObj, styles); + }, - }, { - key: 'min', - set: function set(minValue) { - this._min = minValue; - this.max = this._max; - }, - get: function get() { - return this._min; - } + /** + * @param {Graphics} graphics - Graphics instance + * @returns {Promise} + */ + undo: function undo(graphics) { + var textComp = graphics.getComponent(changeTextStyle_TEXT); + var _this$undoData = this.undoData, + textObj = _this$undoData.object, + styles = _this$undoData.styles; + return textComp.setStyle(textObj, styles); + } +}; +factory_command.register(changeTextStyle_command); +/* harmony default export */ var changeTextStyle = ((/* unused pure expression or super */ null && (changeTextStyle_command))); +;// CONCATENATED MODULE: ./src/js/command/clearObjects.js - /** - * Get range value - * @returns {Number} range value - */ - }, { - key: 'value', - get: function get() { - return this._value; - } +/** + * @author NHN. FE Development Team + * @fileoverview Clear all objects + */ - /** - * Set range value - * @param {Number} value range value - */ - , - set: function set(value) { - value = this._useDecimal ? value : (0, _util.toInteger)(value); - var absValue = value - this._min; - var leftPosition = absValue * this.rangeWidth / this._absMax; +var clearObjects_command = { + name: commandNames.CLEAR_OBJECTS, - if (this.rangeWidth < leftPosition) { - leftPosition = this.rangeWidth; - } + /** + * Clear all objects without background (main) image + * @param {Graphics} graphics - Graphics instance + * @returns {Promise} + */ + execute: function execute(graphics) { + var _this = this; - this.pointer.style.left = leftPosition + 'px'; - this.subbar.style.right = this.rangeWidth - leftPosition + 'px'; + return new (promise_default())(function (resolve) { + _this.undoData.objects = graphics.removeAll(); + resolve(); + }); + }, - this._value = value; - if (this.rangeInputElement) { - this.rangeInputElement.value = value; - } - } - }]); + /** + * @param {Graphics} graphics - Graphics instance + * @returns {Promise} + * @ignore + */ + undo: function undo(graphics) { + graphics.add(this.undoData.objects); + return promise_default().resolve(); + } +}; +factory_command.register(clearObjects_command); +/* harmony default export */ var clearObjects = ((/* unused pure expression or super */ null && (clearObjects_command))); +;// CONCATENATED MODULE: ./src/js/command/flip.js +/** + * @author NHN. FE Development Team + * @fileoverview Flip an image + */ - return Range; -}(); -_tuiCodeSnippet2.default.CustomEvents.mixin(Range); +var FLIP = componentNames.FLIP; +var flip_command = { + name: commandNames.FLIP_IMAGE, -exports.default = Range; + /** + * flip an image + * @param {Graphics} graphics - Graphics instance + * @param {string} type - 'flipX' or 'flipY' or 'reset' + * @returns {Promise} + */ + execute: function execute(graphics, type) { + var flipComp = graphics.getComponent(FLIP); + this.undoData.setting = flipComp.getCurrentSetting(); + return flipComp[type](); + }, -/***/ }), + /** + * @param {Graphics} graphics - Graphics instance + * @returns {Promise} + */ + undo: function undo(graphics) { + var flipComp = graphics.getComponent(FLIP); + return flipComp.set(this.undoData.setting); + } +}; +factory_command.register(flip_command); +/* harmony default export */ var command_flip = ((/* unused pure expression or super */ null && (flip_command))); +;// CONCATENATED MODULE: ./src/js/command/loadImage.js -/***/ "./src/js/util.js": -/*!************************!*\ - !*** ./src/js/util.js ***! - \************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { -"use strict"; +/** + * @author NHN. FE Development Team + * @fileoverview Load a background (main) image + */ -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.Promise = undefined; -exports.clamp = clamp; -exports.keyMirror = keyMirror; -exports.makeStyleText = makeStyleText; -exports.getProperties = getProperties; -exports.toInteger = toInteger; -exports.toCamelCase = toCamelCase; -exports.isSupportFileApi = isSupportFileApi; -exports.getRgb = getRgb; -exports.sendHostName = sendHostName; -exports.styleLoad = styleLoad; -exports.getSelector = getSelector; -exports.base64ToBlob = base64ToBlob; -exports.fixFloatingPoint = fixFloatingPoint; -exports.assignmentForDestroy = assignmentForDestroy; -exports.cls = cls; -exports.changeOrigin = changeOrigin; -exports.flipObject = flipObject; -exports.setCustomProperty = setCustomProperty; -exports.getCustomProperty = getCustomProperty; -exports.capitalizeString = capitalizeString; -exports.includes = includes; -exports.getFillTypeFromOption = getFillTypeFromOption; -exports.getFillTypeFromObject = getFillTypeFromObject; -exports.isShape = isShape; -exports.getObjectType = getObjectType; -exports.isSilentCommand = isSilentCommand; -exports.getHistoryTitle = getHistoryTitle; -exports.getHelpMenuBarPosition = getHelpMenuBarPosition; -exports.isEmptyCropzone = isEmptyCropzone; - -var _tuiCodeSnippet = __webpack_require__(/*! tui-code-snippet */ "tui-code-snippet"); - -var _promise = __webpack_require__(/*! core-js-pure/features/promise */ "./node_modules/core-js-pure/features/promise/index.js"); - -var _promise2 = _interopRequireDefault(_promise); - -var _consts = __webpack_require__(/*! @/consts */ "./src/js/consts.js"); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var FLOATING_POINT_DIGIT = 2; /** - * @author NHN. FE Development Team - * @fileoverview Util - */ -var CSS_PREFIX = 'tui-image-editor-'; -var min = Math.min, - max = Math.max; +var IMAGE_LOADER = componentNames.IMAGE_LOADER; +var loadImage_command = { + name: commandNames.LOAD_IMAGE, -var hostnameSent = false; + /** + * Load a background (main) image + * @param {Graphics} graphics - Graphics instance + * @param {string} imageName - Image name + * @param {string} imgUrl - Image Url + * @returns {Promise} + */ + execute: function execute(graphics, imageName, imgUrl) { + var _context; -/** - * Export Promise Class (for simplified module path) - * @returns {Promise} promise class - */ -exports.Promise = _promise2.default; + var loader = graphics.getComponent(IMAGE_LOADER); + var prevImage = loader.getCanvasImage(); + var prevImageWidth = prevImage ? prevImage.width : 0; + var prevImageHeight = prevImage ? prevImage.height : 0; -/** - * Clamp value - * @param {number} value - Value - * @param {number} minValue - Minimum value - * @param {number} maxValue - Maximum value - * @returns {number} clamped value - */ + var objects = filter_default()(_context = graphics.removeAll(true)).call(_context, function (objectItem) { + return objectItem.type !== 'cropzone'; + }); -function clamp(value, minValue, maxValue) { - if (minValue > maxValue) { - var _ref = [maxValue, minValue]; - minValue = _ref[0]; - maxValue = _ref[1]; - } + for_each_default()(objects).call(objects, function (objectItem) { + objectItem.evented = true; + }); - return max(minValue, min(value, maxValue)); -} + this.undoData = { + name: loader.getImageName(), + image: prevImage, + objects: objects + }; + return loader.load(imageName, imgUrl).then(function (newImage) { + return { + oldWidth: prevImageWidth, + oldHeight: prevImageHeight, + newWidth: newImage.width, + newHeight: newImage.height + }; + }); + }, + /** + * @param {Graphics} graphics - Graphics instance + * @returns {Promise} + */ + undo: function undo(graphics) { + var loader = graphics.getComponent(IMAGE_LOADER); + var _this$undoData = this.undoData, + objects = _this$undoData.objects, + name = _this$undoData.name, + image = _this$undoData.image; + graphics.removeAll(true); + graphics.add(objects); + return loader.load(name, image); + } +}; +factory_command.register(loadImage_command); +/* harmony default export */ var loadImage = ((/* unused pure expression or super */ null && (loadImage_command))); +;// CONCATENATED MODULE: ./src/js/command/removeFilter.js /** - * Make key-value object from arguments - * @returns {object.} + * @author NHN. FE Development Team + * @fileoverview Remove a filter from an image */ -function keyMirror() { - var obj = {}; - for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { - args[_key] = arguments[_key]; - } - (0, _tuiCodeSnippet.forEach)(args, function (key) { - obj[key] = key; - }); +var removeFilter_FILTER = componentNames.FILTER; +var removeFilter_command = { + name: commandNames.REMOVE_FILTER, + + /** + * Remove a filter from an image + * @param {Graphics} graphics - Graphics instance + * @param {string} type - Filter type + * @returns {Promise} + */ + execute: function execute(graphics, type) { + var filterComp = graphics.getComponent(removeFilter_FILTER); + this.undoData.options = filterComp.getOptions(type); + return filterComp.remove(type); + }, + + /** + * @param {Graphics} graphics - Graphics instance + * @param {string} type - Filter type + * @returns {Promise} + */ + undo: function undo(graphics, type) { + var filterComp = graphics.getComponent(removeFilter_FILTER); + var options = this.undoData.options; + return filterComp.add(type, options); + } +}; +factory_command.register(removeFilter_command); +/* harmony default export */ var removeFilter = ((/* unused pure expression or super */ null && (removeFilter_command))); +;// CONCATENATED MODULE: ./src/js/command/removeObject.js - return obj; -} /** - * Make CSSText - * @param {Object} styleObj - Style info object - * @returns {string} Connected string of style + * @author NHN. FE Development Team + * @fileoverview Remove an object */ -function makeStyleText(styleObj) { - var styleStr = ''; - (0, _tuiCodeSnippet.forEach)(styleObj, function (value, prop) { - styleStr += prop + ': ' + value + ';'; - }); - return styleStr; -} +var removeObject_command = { + name: commandNames.REMOVE_OBJECT, -/** - * Get object's properties - * @param {Object} obj - object - * @param {Array} keys - keys - * @returns {Object} properties object - */ -function getProperties(obj, keys) { - var props = {}; - var length = keys.length; + /** + * Remove an object + * @param {Graphics} graphics - Graphics instance + * @param {number} id - object id + * @returns {Promise} + */ + execute: function execute(graphics, id) { + var _this = this; - var i = 0; - var key = void 0; + return new (promise_default())(function (resolve, reject) { + _this.undoData.objects = graphics.removeObjectById(id); - for (i = 0; i < length; i += 1) { - key = keys[i]; - props[key] = obj[key]; + if (_this.undoData.objects.length) { + resolve(); + } else { + reject(rejectMessages.noObject); + } + }); + }, + + /** + * @param {Graphics} graphics - Graphics instance + * @returns {Promise} + */ + undo: function undo(graphics) { + graphics.add(this.undoData.objects); + return promise_default().resolve(); } +}; +factory_command.register(removeObject_command); +/* harmony default export */ var removeObject = ((/* unused pure expression or super */ null && (removeObject_command))); +;// CONCATENATED MODULE: ./src/js/command/resizeCanvasDimension.js - return props; -} /** - * ParseInt simpliment - * @param {number} value - Value - * @returns {number} + * @author NHN. FE Development Team + * @fileoverview Resize a canvas */ -function toInteger(value) { - return parseInt(value, 10); -} -/** - * String to camelcase string - * @param {string} targetString - change target - * @returns {string} - * @private - */ -function toCamelCase(targetString) { - return targetString.replace(/-([a-z])/g, function ($0, $1) { - return $1.toUpperCase(); - }); -} -/** - * Check browser file api support - * @returns {boolean} - * @private - */ -function isSupportFileApi() { - return !!(window.File && window.FileList && window.FileReader); -} +var resizeCanvasDimension_command = { + name: commandNames.RESIZE_CANVAS_DIMENSION, -/** - * hex to rgb - * @param {string} color - hex color - * @param {string} alpha - color alpha value - * @returns {string} rgb expression - */ -function getRgb(color, alpha) { - if (color.length === 4) { - color = '' + color + color.slice(1, 4); - } - var r = parseInt(color.slice(1, 3), 16); - var g = parseInt(color.slice(3, 5), 16); - var b = parseInt(color.slice(5, 7), 16); - var a = alpha || 1; + /** + * resize the canvas with given dimension + * @param {Graphics} graphics - Graphics instance + * @param {{width: number, height: number}} dimension - Max width & height + * @returns {Promise} + */ + execute: function execute(graphics, dimension) { + var _this = this; - return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')'; -} + return new (promise_default())(function (resolve) { + _this.undoData.size = { + width: graphics.cssMaxWidth, + height: graphics.cssMaxHeight + }; + graphics.setCssMaxDimension(dimension); + graphics.adjustCanvasDimension(); + resolve(); + }); + }, -/** - * send hostname - */ -function sendHostName() { - if (hostnameSent) { - return; + /** + * @param {Graphics} graphics - Graphics instance + * @returns {Promise} + */ + undo: function undo(graphics) { + graphics.setCssMaxDimension(this.undoData.size); + graphics.adjustCanvasDimension(); + return promise_default().resolve(); } - hostnameSent = true; +}; +factory_command.register(resizeCanvasDimension_command); +/* harmony default export */ var resizeCanvasDimension = ((/* unused pure expression or super */ null && (resizeCanvasDimension_command))); +;// CONCATENATED MODULE: ./src/js/command/rotate.js - (0, _tuiCodeSnippet.sendHostname)('image-editor', 'UA-129999381-1'); -} /** - * Apply css resource - * @param {string} styleBuffer - serialized css text - * @param {string} tagId - style tag id + * @author NHN. FE Development Team + * @fileoverview Rotate an image */ -function styleLoad(styleBuffer, tagId) { - var _document$getElements = document.getElementsByTagName('head'), - head = _document$getElements[0]; - var linkElement = document.createElement('link'); - var styleData = encodeURIComponent(styleBuffer); - if (tagId) { - linkElement.id = tagId; - // linkElement.id = 'tui-image-editor-theme-style'; - } - linkElement.setAttribute('rel', 'stylesheet'); - linkElement.setAttribute('type', 'text/css'); - linkElement.setAttribute('href', 'data:text/css;charset=UTF-8,' + styleData); - head.appendChild(linkElement); -} +var ROTATION = componentNames.ROTATION; /** - * Get selector - * @param {HTMLElement} targetElement - target element - * @returns {Function} selector + * Cached data for undo + * @type {Object} */ -function getSelector(targetElement) { - return function (str) { - return targetElement.querySelector(str); - }; -} +var rotate_cachedUndoDataForSilent = null; /** - * Change base64 to blob - * @param {String} data - base64 string data - * @returns {Blob} Blob Data + * Make undo data + * @param {Component} rotationComp - rotation component + * @returns {object} - undodata */ -function base64ToBlob(data) { - var rImageType = /data:(image\/.+);base64,/; - var mimeString = ''; - var raw = void 0, - uInt8Array = void 0, - i = void 0; - raw = data.replace(rImageType, function (header, imageType) { - mimeString = imageType; +function rotate_makeUndoData(rotationComp) { + return { + angle: rotationComp.getCurrentAngle() + }; +} - return ''; - }); +var rotate_command = { + name: commandNames.ROTATE_IMAGE, - raw = atob(raw); - var rawLength = raw.length; - uInt8Array = new Uint8Array(rawLength); // eslint-disable-line + /** + * Rotate an image + * @param {Graphics} graphics - Graphics instance + * @param {string} type - 'rotate' or 'setAngle' + * @param {number} angle - angle value (degree) + * @param {boolean} isSilent - is silent execution or not + * @returns {Promise} + */ + execute: function execute(graphics, type, angle, isSilent) { + var rotationComp = graphics.getComponent(ROTATION); - for (i = 0; i < rawLength; i += 1) { - uInt8Array[i] = raw.charCodeAt(i); - } + if (!this.isRedo) { + var undoData = rotate_makeUndoData(rotationComp); + rotate_cachedUndoDataForSilent = this.setUndoData(undoData, rotate_cachedUndoDataForSilent, isSilent); + } - return new Blob([uInt8Array], { type: mimeString }); -} + return rotationComp[type](angle); + }, -/** - * Fix floating point diff. - * @param {number} value - original value - * @returns {number} fixed value - */ -function fixFloatingPoint(value) { - return Number(value.toFixed(FLOATING_POINT_DIGIT)); -} + /** + * @param {Graphics} graphics - Graphics instance + * @returns {Promise} + */ + undo: function undo(graphics) { + var rotationComp = graphics.getComponent(ROTATION); -/** - * Assignment for destroying objects. - * @param {Object} targetObject - object to be removed. - */ -function assignmentForDestroy(targetObject) { - (0, _tuiCodeSnippet.forEach)(targetObject, function (value, key) { - targetObject[key] = null; - }); -} + var _this$args = _slicedToArray(this.args, 3), + type = _this$args[1], + angle = _this$args[2]; -/** - * Make class name for ui - * @param {String} str - main string of className - * @param {String} prefix - prefix string of className - * @returns {String} class name - */ -function cls() { - var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ''; - var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ''; + if (type === 'setAngle') { + return rotationComp[type](this.undoData.angle); + } - if (str.charAt(0) === '.') { - return '.' + CSS_PREFIX + prefix + str.slice(1); + return rotationComp.rotate(-angle); } +}; +factory_command.register(rotate_command); +/* harmony default export */ var command_rotate = ((/* unused pure expression or super */ null && (rotate_command))); +;// CONCATENATED MODULE: ./src/js/command/setObjectProperties.js - return '' + CSS_PREFIX + prefix + str; -} /** - * Change object origin - * @param {fabric.Object} fObject - fabric object - * @param {Object} origin - origin of fabric object - * @param {string} originX - horizontal basis. - * @param {string} originY - vertical basis. + * @author NHN. FE Development Team + * @fileoverview Set object properties */ -function changeOrigin(fObject, origin) { - var originX = origin.originX, - originY = origin.originY; - var _fObject$getPointByOr = fObject.getPointByOrigin(originX, originY), - left = _fObject$getPointByOr.x, - top = _fObject$getPointByOr.y; - fObject.set({ - left: left, - top: top, - originX: originX, - originY: originY - }); - fObject.setCoords(); -} +var setObjectProperties_command = { + name: commandNames.SET_OBJECT_PROPERTIES, -/** - * Object key value flip - * @param {Object} targetObject - The data object of the key value. - * @returns {Object} - */ -function flipObject(targetObject) { - var result = {}; + /** + * Set object properties + * @param {Graphics} graphics - Graphics instance + * @param {number} id - object id + * @param {Object} props - properties + * @param {string} [props.fill] Color + * @param {string} [props.fontFamily] Font type for text + * @param {number} [props.fontSize] Size + * @param {string} [props.fontStyle] Type of inclination (normal / italic) + * @param {string} [props.fontWeight] Type of thicker or thinner looking (normal / bold) + * @param {string} [props.textAlign] Type of text align (left / center / right) + * @param {string} [props.textDecoration] Type of line (underline / line-through / overline) + * @returns {Promise} + */ + execute: function execute(graphics, id, props) { + var _this = this; - Object.keys(targetObject).forEach(function (key) { - result[targetObject[key]] = key; - }); + var targetObj = graphics.getObject(id); - return result; -} + if (!targetObj) { + return promise_default().reject(rejectMessages.noObject); + } -/** - * Set custom properties - * @param {Object} targetObject - target object - * @param {Object} props - custom props object - */ -function setCustomProperty(targetObject, props) { - targetObject.customProps = targetObject.customProps || {}; - (0, _tuiCodeSnippet.extend)(targetObject.customProps, props); -} + this.undoData.props = {}; + external_commonjs_tui_code_snippet_commonjs2_tui_code_snippet_amd_tui_code_snippet_root_tui_util_default().forEachOwnProperties(props, function (value, key) { + _this.undoData.props[key] = targetObj[key]; + }); + graphics.setObjectProperties(id, props); + return promise_default().resolve(); + }, -/** - * Get custom property - * @param {fabric.Object} fObject - fabric object - * @param {Array|string} propNames - prop name array - * @returns {object | number | string} - */ -function getCustomProperty(fObject, propNames) { - var resultObject = {}; - if ((0, _tuiCodeSnippet.isString)(propNames)) { - propNames = [propNames]; + /** + * @param {Graphics} graphics - Graphics instance + * @param {number} id - object id + * @returns {Promise} + */ + undo: function undo(graphics, id) { + var props = this.undoData.props; + graphics.setObjectProperties(id, props); + return promise_default().resolve(); } - (0, _tuiCodeSnippet.forEach)(propNames, function (propName) { - resultObject[propName] = fObject.customProps[propName]; - }); +}; +factory_command.register(setObjectProperties_command); +/* harmony default export */ var setObjectProperties = ((/* unused pure expression or super */ null && (setObjectProperties_command))); +;// CONCATENATED MODULE: ./src/js/command/setObjectPosition.js - return resultObject; -} /** - * Capitalize string - * @param {string} targetString - target string - * @returns {string} + * @author NHN. FE Development Team + * @fileoverview Set object properties */ -function capitalizeString(targetString) { - return targetString.charAt(0).toUpperCase() + targetString.slice(1); -} -/** - * Array includes check - * @param {Array} targetArray - target array - * @param {string|number} compareValue - compare value - * @returns {boolean} - */ -function includes(targetArray, compareValue) { - return targetArray.indexOf(compareValue) >= 0; -} -/** - * Get fill type - * @param {Object | string} fillOption - shape fill option - * @returns {string} 'color' or 'filter' - */ -function getFillTypeFromOption() { - var fillOption = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; +var setObjectPosition_command = { + name: commandNames.SET_OBJECT_POSITION, - return (0, _tuiCodeSnippet.pick)(fillOption, 'type') || _consts.SHAPE_FILL_TYPE.COLOR; -} + /** + * Set object properties + * @param {Graphics} graphics - Graphics instance + * @param {number} id - object id + * @param {Object} posInfo - position object + * @param {number} posInfo.x - x position + * @param {number} posInfo.y - y position + * @param {string} posInfo.originX - can be 'left', 'center', 'right' + * @param {string} posInfo.originY - can be 'top', 'center', 'bottom' + * @returns {Promise} + */ + execute: function execute(graphics, id, posInfo) { + var targetObj = graphics.getObject(id); -/** - * Get fill type of shape type object - * @param {fabric.Object} shapeObj - fabric object - * @returns {string} 'transparent' or 'color' or 'filter' - */ -function getFillTypeFromObject(shapeObj) { - var _shapeObj$fill = shapeObj.fill, - fill = _shapeObj$fill === undefined ? {} : _shapeObj$fill; + if (!targetObj) { + return promise_default().reject(rejectMessages.noObject); + } - if (fill.source) { - return _consts.SHAPE_FILL_TYPE.FILTER; + this.undoData.objectId = id; + this.undoData.props = graphics.getObjectProperties(id, ['left', 'top']); + graphics.setObjectPosition(id, posInfo); + graphics.renderAll(); + return promise_default().resolve(); + }, + + /** + * @param {Graphics} graphics - Graphics instance + * @returns {Promise} + */ + undo: function undo(graphics) { + var _this$undoData = this.undoData, + objectId = _this$undoData.objectId, + props = _this$undoData.props; + graphics.setObjectProperties(objectId, props); + graphics.renderAll(); + return promise_default().resolve(); } +}; +factory_command.register(setObjectPosition_command); +/* harmony default export */ var setObjectPosition = ((/* unused pure expression or super */ null && (setObjectPosition_command))); +;// CONCATENATED MODULE: ./src/js/command/changeSelection.js - return _consts.SHAPE_FILL_TYPE.COLOR; -} -/** - * Check if the object is a shape object. - * @param {fabric.Object} obj - fabric object - * @returns {boolean} - */ -function isShape(obj) { - return (0, _tuiCodeSnippet.inArray)(obj.get('type'), _consts.SHAPE_TYPE) >= 0; -} /** - * Get object type - * @param {string} type - fabric object type - * @returns {string} type of object (ex: shape, icon, ...) + * @author NHN. FE Development Team + * @fileoverview change selection */ -function getObjectType(type) { - if (includes(_consts.SHAPE_TYPE, type)) { - return 'Shape'; - } - switch (type) { - case 'i-text': - return 'Text'; - case 'path': - case 'line': - return 'Draw'; - case 'activeSelection': - return 'Group'; - default: - return toStartOfCapital(type); - } -} -/** - * Get filter type - * @param {string} type - fabric filter type - * @param {object} [options] - filter type options - * @param {boolean} [options.useAlpha=true] - usage of alpha(true is 'color filter', false is 'remove white') - * @param {string} [options.mode] - mode of blendColor - * @returns {string} type of filter (ex: sepia, blur, ...) - */ -function getFilterType(type) { - var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}, - _ref2$useAlpha = _ref2.useAlpha, - useAlpha = _ref2$useAlpha === undefined ? true : _ref2$useAlpha, - mode = _ref2.mode; - var VINTAGE = _consts.filterType.VINTAGE, - REMOVE_COLOR = _consts.filterType.REMOVE_COLOR, - BLEND_COLOR = _consts.filterType.BLEND_COLOR, - SEPIA2 = _consts.filterType.SEPIA2, - COLOR_FILTER = _consts.filterType.COLOR_FILTER, - REMOVE_WHITE = _consts.filterType.REMOVE_WHITE, - BLEND = _consts.filterType.BLEND; +var changeSelection_command = { + name: commandNames.CHANGE_SELECTION, + execute: function execute(graphics, props) { + if (this.isRedo) { + for_each_default()(props).call(props, function (prop) { + graphics.setObjectProperties(prop.id, prop); + }); + } else { + this.undoData = getCachedUndoDataForDimension(); + } + return promise_default().resolve(); + }, + undo: function undo(graphics) { + var _context; - var filterName = void 0; + for_each_default()(_context = this.undoData).call(_context, function (datum) { + graphics.setObjectProperties(datum.id, datum); + }); - switch (type) { - case VINTAGE: - filterName = SEPIA2; - break; - case REMOVE_COLOR: - filterName = useAlpha ? COLOR_FILTER : REMOVE_WHITE; - break; - case BLEND_COLOR: - filterName = mode === 'add' ? BLEND : mode; - break; - default: - filterName = type; + return promise_default().resolve(); } - - return toStartOfCapital(filterName); -} - +}; +factory_command.register(changeSelection_command); +/* harmony default export */ var changeSelection = ((/* unused pure expression or super */ null && (changeSelection_command))); +;// CONCATENATED MODULE: ./src/js/command/resize.js /** - * Check if command is silent command - * @param {Command|string} command - command or command name - * @returns {boolean} + * @author NHN. FE Development Team + * @fileoverview Resize an image */ -function isSilentCommand(command) { - var LOAD_IMAGE = _consts.commandNames.LOAD_IMAGE; - return typeof command === 'string' ? LOAD_IMAGE === command : LOAD_IMAGE === command.name; -} +var RESIZE = componentNames.RESIZE; +var resize_command = { + name: commandNames.RESIZE_IMAGE, -/** - * Get command name - * @param {Command|string} command - command or command name - * @returns {{name: string, ?detail: string}} - */ -// eslint-disable-next-line complexity, require-jsdoc -function getHistoryTitle(command) { - var FLIP_IMAGE = _consts.commandNames.FLIP_IMAGE, - ROTATE_IMAGE = _consts.commandNames.ROTATE_IMAGE, - ADD_TEXT = _consts.commandNames.ADD_TEXT, - APPLY_FILTER = _consts.commandNames.APPLY_FILTER, - REMOVE_FILTER = _consts.commandNames.REMOVE_FILTER, - CHANGE_SHAPE = _consts.commandNames.CHANGE_SHAPE, - CHANGE_ICON_COLOR = _consts.commandNames.CHANGE_ICON_COLOR, - CHANGE_TEXT_STYLE = _consts.commandNames.CHANGE_TEXT_STYLE, - CLEAR_OBJECTS = _consts.commandNames.CLEAR_OBJECTS, - ADD_IMAGE_OBJECT = _consts.commandNames.ADD_IMAGE_OBJECT, - REMOVE_OBJECT = _consts.commandNames.REMOVE_OBJECT, - RESIZE_IMAGE = _consts.commandNames.RESIZE_IMAGE; - var name = command.name, - args = command.args; + /** + * Resize an image + * @param {Graphics} graphics - Graphics instance + * @param {object} dimensions - Image Dimensions + * @returns {Promise} + */ + execute: function execute(graphics, dimensions) { + var resizeComp = graphics.getComponent(RESIZE); + var originalDimensions = resizeComp.getOriginalDimensions(); - var historyInfo = void 0; + if (!originalDimensions) { + originalDimensions = resizeComp.getCurrentDimensions(); + } - switch (name) { - case FLIP_IMAGE: - historyInfo = { name: name, detail: args[1] === 'reset' ? args[1] : args[1].slice(4) }; - break; - case ROTATE_IMAGE: - historyInfo = { name: name, detail: args[2] }; - break; - case APPLY_FILTER: - historyInfo = { name: _consts.historyNames.APPLY_FILTER, detail: getFilterType(args[1], args[2]) }; - break; - case REMOVE_FILTER: - historyInfo = { name: _consts.historyNames.REMOVE_FILTER, detail: 'Remove' }; - break; - case CHANGE_SHAPE: - historyInfo = { name: _consts.historyNames.CHANGE_SHAPE, detail: 'Change' }; - break; - case CHANGE_ICON_COLOR: - historyInfo = { name: _consts.historyNames.CHANGE_ICON_COLOR, detail: 'Change' }; - break; - case CHANGE_TEXT_STYLE: - historyInfo = { name: _consts.historyNames.CHANGE_TEXT_STYLE, detail: 'Change' }; - break; - case REMOVE_OBJECT: - historyInfo = { name: _consts.historyNames.REMOVE_OBJECT, detail: args[2] }; - break; - case CLEAR_OBJECTS: - historyInfo = { name: _consts.historyNames.CLEAR_OBJECTS, detail: 'All' }; - break; - case ADD_IMAGE_OBJECT: - historyInfo = { name: _consts.historyNames.ADD_IMAGE_OBJECT, detail: 'Add' }; - break; - case ADD_TEXT: - historyInfo = { name: _consts.historyNames.ADD_TEXT }; - break; - case RESIZE_IMAGE: - historyInfo = { name: _consts.historyNames.RESIZE, detail: ~~args[1].width + 'x' + ~~args[1].height }; - break; + this.undoData.dimensions = originalDimensions; + return resizeComp.resize(dimensions); + }, - default: - historyInfo = { name: name }; - break; + /** + * @param {Graphics} graphics - Graphics instance + * @returns {Promise} + */ + undo: function undo(graphics) { + var resizeComp = graphics.getComponent(RESIZE); + return resizeComp.resize(this.undoData.dimensions); } +}; +factory_command.register(resize_command); +/* harmony default export */ var command_resize = ((/* unused pure expression or super */ null && (resize_command))); +;// CONCATENATED MODULE: ./src/index.js - if (args[1] === 'mask') { - historyInfo = { name: _consts.historyNames.LOAD_MASK_IMAGE, detail: 'Apply' }; - } - return historyInfo; -} + // commands -/** - * Get help menubar position(opposite of menubar) - * @param {string} position - position of menubar - * @returns {string} position of help menubar - */ -function getHelpMenuBarPosition(position) { - if (position === 'top') { - return 'bottom'; - } - if (position === 'left') { - return 'right'; - } - if (position === 'right') { - return 'left'; - } - return 'top'; -} -/** - * Change to capital start letter - * @param {string} str - string to change - * @returns {string} - */ -function toStartOfCapital(str) { - return str.replace(/[a-z]/, function (first) { - return first.toUpperCase(); - }); -} -/** - * Check if cropRect is Empty. - * @param {Object} cropRect - cropRect object - * @param {Number} cropRect.left - cropRect left position value - * @param {Number} cropRect.top - cropRect top position value - * @param {Number} cropRect.width - cropRect width value - * @param {Number} cropRect.height - cropRect height value - * @returns {boolean} - */ -function isEmptyCropzone(cropRect) { - var left = cropRect.left, - top = cropRect.top, - width = cropRect.width, - height = cropRect.height; - var LEFT = _consts.emptyCropRectValues.LEFT, - TOP = _consts.emptyCropRectValues.TOP, - WIDTH = _consts.emptyCropRectValues.WIDTH, - HEIGHT = _consts.emptyCropRectValues.HEIGHT; - return left === LEFT && top === TOP && width === WIDTH && height === HEIGHT; -} -/***/ }), -/***/ "./src/svg/default.svg": -/*!*****************************!*\ - !*** ./src/svg/default.svg ***! - \*****************************/ -/*! no static exports found */ -/***/ (function(module, exports) { -module.exports = "" -/***/ }), -/***/ "fabric": -/*!****************************************************************************************************************!*\ - !*** external {"commonjs":["fabric","fabric"],"commonjs2":["fabric","fabric"],"amd":"fabric","root":"fabric"} ***! - \****************************************************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { -module.exports = __WEBPACK_EXTERNAL_MODULE_fabric__; -/***/ }), -/***/ "tui-code-snippet": -/*!******************************************************************************************************************************!*\ - !*** external {"commonjs":"tui-code-snippet","commonjs2":"tui-code-snippet","amd":"tui-code-snippet","root":["tui","util"]} ***! - \******************************************************************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { -module.exports = __WEBPACK_EXTERNAL_MODULE_tui_code_snippet__; -/***/ }), -/***/ "tui-color-picker": -/*!*************************************************************************************************************************************!*\ - !*** external {"commonjs":"tui-color-picker","commonjs2":"tui-color-picker","amd":"tui-color-picker","root":["tui","colorPicker"]} ***! - \*************************************************************************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports) { -module.exports = __WEBPACK_EXTERNAL_MODULE_tui_color_picker__; -/***/ }) -/******/ }); -}); -//# sourceMappingURL=tui-image-editor.js.map \ No newline at end of file + + +/* harmony default export */ var src = (imageEditor); + +}(); +__webpack_exports__ = __webpack_exports__["default"]; +/******/ return __webpack_exports__; +/******/ })() +; +}); \ No newline at end of file diff --git a/apps/image-editor/dist/tui-image-editor.js.map b/apps/image-editor/dist/tui-image-editor.js.map deleted file mode 100644 index d244a8041..000000000 --- a/apps/image-editor/dist/tui-image-editor.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["webpack://tui.ImageEditor/webpack/universalModuleDefinition","webpack://tui.ImageEditor/webpack/bootstrap","webpack://tui.ImageEditor/./node_modules/core-js-pure/es/promise/index.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/features/promise/index.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/a-function.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/a-possible-prototype.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/add-to-unscopables.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/an-instance.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/an-object.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/array-includes.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/check-correctness-of-iteration.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/classof-raw.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/classof.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/correct-prototype-getter.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/create-iterator-constructor.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/create-non-enumerable-property.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/create-property-descriptor.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/define-iterator.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/descriptors.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/document-create-element.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/dom-iterables.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/engine-is-browser.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/engine-is-ios.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/engine-is-node.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/engine-is-webos-webkit.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/engine-user-agent.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/engine-v8-version.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/enum-bug-keys.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/export.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/fails.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/function-bind-context.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/get-built-in.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/get-iterator-method.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/global.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/has.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/hidden-keys.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/host-report-errors.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/html.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/ie8-dom-define.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/indexed-object.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/inspect-source.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/internal-state.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/is-array-iterator-method.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/is-forced.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/is-object.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/is-pure.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/iterate.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/iterator-close.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/iterators-core.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/iterators.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/microtask.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/native-promise-constructor.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/native-symbol.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/native-weak-map.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/new-promise-capability.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/object-create.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/object-define-properties.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/object-define-property.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/object-get-own-property-descriptor.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/object-get-prototype-of.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/object-keys-internal.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/object-keys.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/object-property-is-enumerable.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/object-set-prototype-of.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/object-to-string.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/path.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/perform.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/promise-resolve.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/redefine-all.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/redefine.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/require-object-coercible.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/set-global.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/set-species.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/set-to-string-tag.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/shared-key.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/shared-store.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/shared.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/species-constructor.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/string-multibyte.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/task.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/to-absolute-index.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/to-indexed-object.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/to-integer.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/to-length.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/to-object.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/to-primitive.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/to-string-tag-support.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/uid.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/use-symbol-as-uid.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/internals/well-known-symbol.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/modules/es.aggregate-error.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/modules/es.array.iterator.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/modules/es.object.to-string.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/modules/es.promise.all-settled.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/modules/es.promise.any.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/modules/es.promise.finally.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/modules/es.promise.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/modules/es.string.iterator.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/modules/esnext.aggregate-error.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/modules/esnext.promise.all-settled.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/modules/esnext.promise.any.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/modules/esnext.promise.try.js","webpack://tui.ImageEditor/./node_modules/core-js-pure/modules/web.dom-collections.iterator.js","webpack://tui.ImageEditor/(webpack)/buildin/global.js","webpack://tui.ImageEditor/./src/css/index.styl","webpack://tui.ImageEditor/./src/index.js","webpack://tui.ImageEditor/./src/js/action.js","webpack://tui.ImageEditor/./src/js/command/addIcon.js","webpack://tui.ImageEditor/./src/js/command/addImageObject.js","webpack://tui.ImageEditor/./src/js/command/addObject.js","webpack://tui.ImageEditor/./src/js/command/addShape.js","webpack://tui.ImageEditor/./src/js/command/addText.js","webpack://tui.ImageEditor/./src/js/command/applyFilter.js","webpack://tui.ImageEditor/./src/js/command/changeIconColor.js","webpack://tui.ImageEditor/./src/js/command/changeSelection.js","webpack://tui.ImageEditor/./src/js/command/changeShape.js","webpack://tui.ImageEditor/./src/js/command/changeText.js","webpack://tui.ImageEditor/./src/js/command/changeTextStyle.js","webpack://tui.ImageEditor/./src/js/command/clearObjects.js","webpack://tui.ImageEditor/./src/js/command/flip.js","webpack://tui.ImageEditor/./src/js/command/loadImage.js","webpack://tui.ImageEditor/./src/js/command/removeFilter.js","webpack://tui.ImageEditor/./src/js/command/removeObject.js","webpack://tui.ImageEditor/./src/js/command/resize.js","webpack://tui.ImageEditor/./src/js/command/resizeCanvasDimension.js","webpack://tui.ImageEditor/./src/js/command/rotate.js","webpack://tui.ImageEditor/./src/js/command/setObjectPosition.js","webpack://tui.ImageEditor/./src/js/command/setObjectProperties.js","webpack://tui.ImageEditor/./src/js/component/cropper.js","webpack://tui.ImageEditor/./src/js/component/filter.js","webpack://tui.ImageEditor/./src/js/component/flip.js","webpack://tui.ImageEditor/./src/js/component/freeDrawing.js","webpack://tui.ImageEditor/./src/js/component/icon.js","webpack://tui.ImageEditor/./src/js/component/imageLoader.js","webpack://tui.ImageEditor/./src/js/component/line.js","webpack://tui.ImageEditor/./src/js/component/resize.js","webpack://tui.ImageEditor/./src/js/component/rotation.js","webpack://tui.ImageEditor/./src/js/component/shape.js","webpack://tui.ImageEditor/./src/js/component/text.js","webpack://tui.ImageEditor/./src/js/component/zoom.js","webpack://tui.ImageEditor/./src/js/consts.js","webpack://tui.ImageEditor/./src/js/drawingMode/cropper.js","webpack://tui.ImageEditor/./src/js/drawingMode/freeDrawing.js","webpack://tui.ImageEditor/./src/js/drawingMode/icon.js","webpack://tui.ImageEditor/./src/js/drawingMode/lineDrawing.js","webpack://tui.ImageEditor/./src/js/drawingMode/resize.js","webpack://tui.ImageEditor/./src/js/drawingMode/shape.js","webpack://tui.ImageEditor/./src/js/drawingMode/text.js","webpack://tui.ImageEditor/./src/js/drawingMode/zoom.js","webpack://tui.ImageEditor/./src/js/extension/arrowLine.js","webpack://tui.ImageEditor/./src/js/extension/colorFilter.js","webpack://tui.ImageEditor/./src/js/extension/cropzone.js","webpack://tui.ImageEditor/./src/js/extension/emboss.js","webpack://tui.ImageEditor/./src/js/extension/mask.js","webpack://tui.ImageEditor/./src/js/extension/sharpen.js","webpack://tui.ImageEditor/./src/js/factory/command.js","webpack://tui.ImageEditor/./src/js/factory/errorMessage.js","webpack://tui.ImageEditor/./src/js/graphics.js","webpack://tui.ImageEditor/./src/js/helper/imagetracer.js","webpack://tui.ImageEditor/./src/js/helper/selectionModifyHelper.js","webpack://tui.ImageEditor/./src/js/helper/shapeFilterFillHelper.js","webpack://tui.ImageEditor/./src/js/helper/shapeResizeHelper.js","webpack://tui.ImageEditor/./src/js/imageEditor.js","webpack://tui.ImageEditor/./src/js/interface/command.js","webpack://tui.ImageEditor/./src/js/interface/component.js","webpack://tui.ImageEditor/./src/js/interface/drawingMode.js","webpack://tui.ImageEditor/./src/js/invoker.js","webpack://tui.ImageEditor/./src/js/polyfill.js","webpack://tui.ImageEditor/./src/js/ui.js","webpack://tui.ImageEditor/./src/js/ui/crop.js","webpack://tui.ImageEditor/./src/js/ui/draw.js","webpack://tui.ImageEditor/./src/js/ui/filter.js","webpack://tui.ImageEditor/./src/js/ui/flip.js","webpack://tui.ImageEditor/./src/js/ui/history.js","webpack://tui.ImageEditor/./src/js/ui/icon.js","webpack://tui.ImageEditor/./src/js/ui/locale/locale.js","webpack://tui.ImageEditor/./src/js/ui/mask.js","webpack://tui.ImageEditor/./src/js/ui/panelMenu.js","webpack://tui.ImageEditor/./src/js/ui/resize.js","webpack://tui.ImageEditor/./src/js/ui/rotate.js","webpack://tui.ImageEditor/./src/js/ui/shape.js","webpack://tui.ImageEditor/./src/js/ui/submenuBase.js","webpack://tui.ImageEditor/./src/js/ui/template/controls.js","webpack://tui.ImageEditor/./src/js/ui/template/mainContainer.js","webpack://tui.ImageEditor/./src/js/ui/template/style.js","webpack://tui.ImageEditor/./src/js/ui/template/submenu/crop.js","webpack://tui.ImageEditor/./src/js/ui/template/submenu/draw.js","webpack://tui.ImageEditor/./src/js/ui/template/submenu/filter.js","webpack://tui.ImageEditor/./src/js/ui/template/submenu/flip.js","webpack://tui.ImageEditor/./src/js/ui/template/submenu/history.js","webpack://tui.ImageEditor/./src/js/ui/template/submenu/icon.js","webpack://tui.ImageEditor/./src/js/ui/template/submenu/mask.js","webpack://tui.ImageEditor/./src/js/ui/template/submenu/resize.js","webpack://tui.ImageEditor/./src/js/ui/template/submenu/rotate.js","webpack://tui.ImageEditor/./src/js/ui/template/submenu/shape.js","webpack://tui.ImageEditor/./src/js/ui/template/submenu/text.js","webpack://tui.ImageEditor/./src/js/ui/text.js","webpack://tui.ImageEditor/./src/js/ui/theme/standard.js","webpack://tui.ImageEditor/./src/js/ui/theme/theme.js","webpack://tui.ImageEditor/./src/js/ui/tools/colorpicker.js","webpack://tui.ImageEditor/./src/js/ui/tools/range.js","webpack://tui.ImageEditor/./src/js/util.js","webpack://tui.ImageEditor/./src/svg/default.svg","webpack://tui.ImageEditor/external {\"commonjs\":[\"fabric\",\"fabric\"],\"commonjs2\":[\"fabric\",\"fabric\"],\"amd\":\"fabric\",\"root\":\"fabric\"}","webpack://tui.ImageEditor/external {\"commonjs\":\"tui-code-snippet\",\"commonjs2\":\"tui-code-snippet\",\"amd\":\"tui-code-snippet\",\"root\":[\"tui\",\"util\"]}","webpack://tui.ImageEditor/external {\"commonjs\":\"tui-color-picker\",\"commonjs2\":\"tui-color-picker\",\"amd\":\"tui-color-picker\",\"root\":[\"tui\",\"colorPicker\"]}"],"names":["module","exports","ImageEditor","getActions","main","_mainAction","shape","_shapeAction","crop","_cropAction","resize","_resizeAction","flip","_flipAction","rotate","_rotateAction","text","_textAction","mask","_maskAction","draw","_drawAction","icon","_iconAction","filter","_filterAction","history","_historyAction","exitCropOnAction","ui","submenu","stopDrawingMode","changeMenu","setAngleRangeBarOnAction","angle","setRangeBarAngle","setFilterStateRangeBarOnAction","filterOptions","setFilterState","onEndUndoRedo","result","toggleZoomMode","zoomMode","_graphics","getZoomMode","zoomModes","ZOOM","startDrawingMode","drawingModes","startZoomInMode","endZoomInMode","toggleHandMode","HAND","startHandMode","endHandMode","initFilterState","initFilterCheckBoxState","initLoadImage","imagePath","imageName","loadImageFromURL","then","sizeValue","initializeImgUrl","resizeEditor","imageSize","clearUndoStack","_invoker","fire","eventNames","EXECUTE_COMMAND","historyNames","LOAD_IMAGE","undo","isEmptyUndoStack","deactivateAll","redo","isEmptyRedoStack","reset","_initHistory","delete","changeHelpButtonEnabled","removeActiveObject","activeObjectId","deleteAll","clearObjects","load","file","alert","URL","createObjectURL","loadImageFromFile","activeMenuEvent","_clearHistory","message","Promise","reject","download","dataURL","toDataURL","getImageName","blob","type","w","window","saveAs","split","pop","open","document","body","innerHTML","event","toggleHistoryMenu","zoomIn","toggleZoomButtonStatus","zoomOut","hand","offZoomInButtonStatus","_commonAction","changeColor","color","changeIconColor","addIcon","iconType","iconColor","setDrawingIcon","cancelAddIcon","clearIconType","changeSelectableAll","changeCursor","registerDefaultIcons","path","iconObj","registerIcons","registerCustomIcon","imgUrl","imagetracer","Imagetracer","imageToSVG","svgstr","match","svgPath","name","left","top","tracerDefaultOption","setDrawMode","settings","setColor","setBrush","addImageObject","revokeObjectURL","LOAD_MASK_IMAGE","applyFilter","maskObjId","changeTextStyle","styleObj","isSilent","setAngle","changeShape","changeShapeObject","setDrawingShape","shapeType","cropRect","getCropzoneRect","CROP","cancel","preset","presetType","setCropzoneRect","changeApplyButtonStatus","getCurrentDimensions","preview","actor","value","lockState","currentDimensions","calcAspectRatio","width","height","dimensions","setWidthValue","setHeightValue","lockAspectRatio","min","max","aspectRatio","pMax","pMin","setLimit","minWidth","minHeight","maxWidth","maxHeight","setOriginalDimensions","standByMode","getOriginalDimensions","flipType","applying","options","hasFilter","removeFilter","setReAction","on","undoStackChanged","length","redoStackChanged","objectActivated","obj","id","indexOf","setShapeStatus","strokeColor","stroke","strokeWidth","fillColor","fill","setMaxStrokeValue","Math","changeStandbyMode","setTextStyleStateOnAction","setIconPickerColor","addText","pos","textColor","fontSize","fontStyle","fontWeight","underline","fontFamily","position","originPosition","styles","addObjectAfter","objectScaled","strokeValue","getStrokeValue","setStrokeValue","selectionCleared","count","TEXT","CROPPER","SHAPE","RESIZE","modeChange","menu","drawingMenuNames","_changeActivateMode","bind","discardSelection","mixin","prototype","ICON","componentNames","command","commandNames","ADD_ICON","execute","graphics","iconComp","getComponent","add","objectProps","undoData","object","getObject","remove","resolve","commandFactory","register","ADD_IMAGE_OBJECT","ADD_OBJECT","contains","rejectMessages","addedObject","noObject","ADD_SHAPE","shapeComp","ADD_TEXT","textComp","undoObject","textObject","FILTER","cachedUndoDataForSilent","makeUndoData","prevfilterOption","APPLY_FILTER","filterComp","maskObj","isType","invalidParameters","snippet","extend","isRedo","getOptions","setUndoData","setActiveObject","CHANGE_ICON_COLOR","targetObj","getColor","CHANGE_SELECTION","props","forEach","prop","setObjectProperties","datum","forEachOwnProperties","key","CHANGE_SHAPE","change","CHANGE_TEXT","getText","textObj","undoValue","CHANGE_TEXT_STYLE","setStyle","CLEAR_OBJECTS","objects","removeAll","FLIP","FLIP_IMAGE","flipComp","setting","getCurrentSetting","set","IMAGE_LOADER","loader","prevImage","getCanvasImage","prevImageWidth","prevImageHeight","objectItem","evented","image","newImage","oldWidth","oldHeight","newWidth","newHeight","REMOVE_FILTER","REMOVE_OBJECT","removeObjectById","RESIZE_IMAGE","resizeComp","originalDimensions","RESIZE_CANVAS_DIMENSION","dimension","size","cssMaxWidth","cssMaxHeight","setCssMaxDimension","adjustCanvasDimension","ROTATION","rotationComp","getCurrentAngle","ROTATE_IMAGE","args","SET_OBJECT_POSITION","posInfo","objectId","getObjectProperties","setObjectPosition","renderAll","SET_OBJECT_PROPERTIES","MOUSE_MOVE_THRESHOLD","DEFAULT_OPTION","presetRatio","Cropper","_cropzone","_startX","_startY","_withShiftKey","_listeners","keydown","_onKeyDown","keyup","_onKeyUp","mousedown","_onFabricMouseDown","mousemove","_onFabricMouseMove","mouseup","_onFabricMouseUp","canvas","getCanvas","forEachObject","Cropzone","cornerSize","cornerColor","CROPZONE_DEFAULT_OPTIONS","cropSelectionStyle","discardActiveObject","selection","defaultCursor","fabric","util","addListener","cropzone","off","removeListener","visible","fEvent","target","coord","getPointer","e","x","y","pointer","abs","_calcRectDimensionFromPoint","canvasWidth","getWidth","canvasHeight","getHeight","startX","startY","listeners","containsCropzone","imageData","url","isValid","_getPresetPropertiesForCropSize","originalWidth","originalHeight","standardSize","getScale","orignalValue","scaleWidth","map","scaleHeight","keyCode","keyCodes","SHIFT","Component","filters","Image","Mask","Sharpen","Emboss","ColorFilter","Filter","sourceImg","_getSourceImage","imgFilter","_getFilter","_createFilter","_changeFilterValues","_apply","action","unsupportedOperation","_removeFilter","callback","push","applyFilters","filterObj","fabricType","_getFabricFilterType","ImageFilter","item","i","charAt","toUpperCase","slice","Flip","canvasImage","flipX","flipY","newSetting","isChangingFlipX","isChangingFlipY","setImageProperties","_invertAngle","_flipObjects","parseFloat","setCoords","current","FreeDrawing","FREE_DRAWING","oColor","Color","isDrawingMode","brush","freeDrawingBrush","toRgba","pathMap","arrow","Icon","_oColor","_pathMap","_type","_iconColor","_handlers","selectionStyle","fObjectOptions","SELECTION_STYLE","_createIcon","_icon","controlStyle","createObjectProperties","pathInfos","get","Path","_startPoint","events","moveOriginPointer","scaleX","scaleY","OBJECT_ADDED","imageOption","padding","crossOrigin","ImageLoader","img","promise","backgroundImage","setCanvasImage","_setBackgroundImage","oImage","loadImage","setBackgroundImage","getElement","loadingImageFailed","Line","LINE","_width","arrowType","head","tail","_arrowType","setHeadOption","points","_line","ArrowLine","_createLineEventObjectProperties","x2","y2","params","x1","y1","startPosition","endPosition","Resize","_dimensions","_originalDimensions","dimensionsWidth","dimensionsHeight","scaleValues","adjustCanvasDimensionBase","Rotation","oldAngle","oldImageCenter","getCenterPoint","newImageCenter","_rotateForEachObject","angleDiff","centerDiff","objCenter","radian","degreesToRadians","newObjCenter","rotatePoint","additionalAngle","SHAPE_INIT_OPTIONS","rx","ry","SHAPE_DEFAULT_OPTIONS","DEFAULT_TYPE","DEFAULT_WIDTH","DEFAULT_HEIGHT","makeFabricFillOption","createStaticCanvas","fillOption","fillType","extOption","newStaticCanvas","Shape","_shapeObj","_options","_isSelected","uniformScaling","extendOption","_extendOptions","shapeObj","_createInstance","objectProperties","_bindEventOnShape","_resetPositionFillFilter","unsupportedType","hasFillOption","fillProp","SHAPE_FILL_TYPE","fillImage","filterOption","COLOR","originalShapeObj","instance","Rect","Ellipse","Triangle","selectionStyles","self","added","resizeHelper","setOrigins","selected","deselected","modified","currentObj","adjustOriginToCenter","modifiedInGroup","activeSelection","_fillFilterRePositionInGroupSelection","moving","rotating","scaling","setCursor","startPointX","startPointY","isRegular","KEY_CODES","patternSourceCanvas","originalAngle","originX","originY","addWithUpdate","addTransformToObject","calcTransformMatrix","defaultStyles","resetStyles","textAlign","DBCLICK_TIME","Text","_defaultStyles","_selectedObj","_editingObj","select","_onFabricSelect","selectClear","_onFabricSelectClear","_onFabricScaling","textChanged","_onFabricTextChanged","_textarea","_ratio","_lastClickTime","Date","getTime","_editingObjInfos","isPrevEditing","adjustOriginPosition","setCanvasRatio","editStatus","getPointByOrigin","newText","_setInitPos","isExisty","autofocus","IText","enterEditing","selectAll","getActiveObject","activeObj","val","_getTextDecorationAdaptObject","textDecoration","state","canvasElement","getCanvasElement","cssWidth","parseInt","style","originWidth","linethrough","overline","ratio","getCanvasRatio","textareaStyle","ceil","setTimeout","editingObj","editingObjInfos","textContent","transWidth","transHeight","display","stamp","TEXT_CHANGED","scrollLeft","scrollTop","getSelectedObj","setSelectedInfo","_fireAddText","originPointer","clientPosition","clientX","clientY","newClickTime","_isDoubleClick","isEditing","TEXT_EDITING","DEFAULT_SCROLL_OPTION","opacity","selectable","hoverCursor","DEFAULT_VERTICAL_SCROLL_RATIO","SIZE","MARGIN","BORDER_RADIUS","DEFAULT_HORIZONTAL_SCROLL_RATIO","DEFAULT_ZOOM_LEVEL","ZOOM_CHANGED","OBJECT_MODIFIED","KEY_DOWN","KEY_UP","HAND_STARTED","HAND_STOPPED","Zoom","zoomArea","_centerPoints","zoomLevel","DEFAULT","startZoom","_onMouseDownWithZoomMode","moveZoom","_onMouseMoveWithZoomMode","stopZoom","_onMouseUpWithZoomMode","startHand","_onMouseDownWithHandMode","moveHand","_onMouseMoveWithHandMode","stopHand","_onMouseUpWithHandMode","zoomChanged","_changeScrollState","_startHandModeWithSpaceBar","_endHandModeWithSpaceBar","_verticalScroll","_horizontalScroll","_startTextEditingHandler","_stopTextEditingHandler","isTextEditing","withSpace","SPACE","_changeObjectsEventedState","_startHandPoint","deltaX","deltaY","center","_getCenterPoint","_isMaxZoomLevel","prevZoomLevel","zoomToPoint","_fireZoomChanged","centerPoints","prevX","prevY","_isDefaultZoomLevel","point","setViewportTransform","_movePointOfZoom","viewport","tl","tr","bl","viewportWidth","viewportHeight","horizontalScrollWidth","horizontalScrollHeight","horizontalScrollLeft","horizontalScrollMargin","horizontalScrollBorderRadius","verticalScrollWidth","verticalScrollHeight","verticalScrollTop","verticalScrollMargin","verticalScrollBorderRadius","_addScrollBar","scrollBarTid","clearTimeout","calcViewportBoundaries","ZOOM_HELP_MENUS","COMMAND_HELP_MENUS","DELETE_HELP_MENUS","HELP_MENUS","SHAPE_TYPE","OBJ_TYPE","CROPZONE","filterType","VINTAGE","SEPIA2","REMOVE_COLOR","COLOR_FILTER","REMOVE_WHITE","BLEND_COLOR","BLEND","lockSkewingX","lockSkewingY","bringForward","hasRotatingPoint","hasBorders","lockScalingFlip","lockRotation","OBJECT_ACTIVATED","OBJECT_MOVED","OBJECT_SCALED","OBJECT_CREATED","OBJECT_ROTATED","ICON_CREATE_RESIZE","ICON_CREATE_END","ADD_OBJECT_AFTER","MOUSE_DOWN","MOUSE_UP","MOUSE_MOVE","REDO_STACK_CHANGED","UNDO_STACK_CHANGED","SELECTION_CLEARED","SELECTION_CREATED","AFTER_UNDO","AFTER_REDO","INPUT_BOX_EDITING_STARTED","INPUT_BOX_EDITING_STOPPED","FOCUS","BLUR","IMAGE_RESIZED","selectorNames","COLOR_PICKER_INPUT_BOX","ADD_MASK_IMAGE","Z","Y","C","V","BACKSPACE","DEL","ARROW_DOWN","ARROW_UP","borderColor","transparentCorners","invalidDrawingMode","isLock","noActiveObject","rotation","defaultIconPath","defaultRotateRangeValues","realTimeEvent","defaultDrawRangeValues","defaultShapeStrokeValues","defaultTextRangeValues","defaultFilterRangeValues","tintOpacityRange","useDecimal","removewhiteDistanceRange","brightnessRange","noiseRange","pixelateRange","colorfilterThresholdRange","blurFilterRange","emptyCropRectValues","LEFT","TOP","WIDTH","HEIGHT","defaultResizePixelValues","CropperDrawingMode","cropper","components","start","end","DrawingMode","FreeDrawingMode","freeDrawing","IconDrawingMode","LineDrawingMode","LINE_DRAWING","lineDrawing","ResizeDrawingMode","ShapeDrawingMode","TextDrawingMode","ZoomDrawingMode","zoom","ARROW_ANGLE","CHEVRON_SIZE_RATIO","TRIANGLE_SIZE_RATIO","RADIAN_CONVERSION_VALUE","createClass","initialize","callSuper","_render","ctx","calcLinePoints","fromX","fromY","toX","toY","linePosition","lineWidth","_renderBasicLinePath","_drawDecoratorPath","_renderStroke","beginPath","moveTo","lineTo","_drawDecoratorPathType","_drawTrianglePath","_drawChevronPath","decorateSize","closePath","standardX","standardY","compareX","compareY","atan2","PI","rotatedPosition","changeAngle","getRotatePosition","distance","referencePosition","cos","sin","BaseFilter","threshold","applyTo","canvasEl","context","getContext","getImageData","data","filterColor","sourceFromHex","len","_getColor","_isOutsideThreshold","putImageData","color1","color2","diff","bytes","CORNER_TYPE_TOP_LEFT","CORNER_TYPE_TOP_RIGHT","CORNER_TYPE_MIDDLE_TOP","CORNER_TYPE_MIDDLE_LEFT","CORNER_TYPE_MIDDLE_RIGHT","CORNER_TYPE_MIDDLE_BOTTOM","CORNER_TYPE_BOTTOM_LEFT","CORNER_TYPE_BOTTOM_RIGHT","CORNER_TYPE_LIST","NOOP_FUNCTION","cornerTypeValid","selectedCorner","getScaleBasis","diffX","diffY","extendsOptions","_addEventHandler","canvasEventDelegation","eventName","delegationState","isRegistered","canvasEventTrigger","canvasEventRegister","eventTrigger","_onMoving","_onScaling","_renderCropzone","cropzoneDashLineWidth","cropzoneDashLineOffset","originalFlipX","originalFlipY","originalScaleX","originalScaleY","scale","_fillOuterRect","_fillInnerRect","_strokeBorder","lineDashWidth","lineDashOffset","fillStyle","_getCoordinates","save","restore","outerX","outerY","_caculateInnerPosition","strokeStyle","outer","halfWidth","halfHeight","setLineDash","maxLeft","maxTop","transform","corner","_calcScalingSizeFromPointer","isCornerTypeValid","_resizeCropZone","adjustRatioCropzoneSize","leftMaker","topMaker","scaleTo","maxScaleFactor","v","_getCropzoneRectInfo","getBoundingRect","rectTop","rectLeft","rectWidth","rectHeight","rectRight","rectBottom","resizeInfoMap","mt","ml","mr","mb","br","Convolute","matrix","BlendImage","pipelineState","maskCanvasEl","_createCanvasOfMask","maskCtx","_drawMask","_mapData","createCanvasElement","maskImg","translate","drawImage","imgHeight","imgWidth","sourceData","maskData","commands","create","actions","Command","types","messages","UN_IMPLEMENTATION","NO_COMPONENT_NAME","methodName","toLowerCase","func","isArray","isString","forEachArray","CustomEvents","DEFAULT_CSS_MAX_WIDTH","DEFAULT_CSS_MAX_HEIGHT","EXTRA_PX_FOR_PASTE","cssOnly","backstoreOnly","Graphics","element","targetObjectForCopyPaste","_objects","_canvas","_drawingMode","NORMAL","_drawingModeMap","_componentMap","_handler","onMouseDown","_onMouseDown","onObjectAdded","_onObjectAdded","onObjectRemoved","_onObjectRemoved","onObjectMoved","_onObjectMoved","onObjectScaled","_onObjectScaled","onObjectModified","_onObjectModified","onObjectRotated","_onObjectRotated","onObjectSelected","_onObjectSelected","onPathCreated","_onPathCreated","onSelectionCleared","_onSelectionCleared","onSelectionCreated","_onSelectionCreated","_setObjectCachingToFalse","_setCanvasElement","_createDrawingModeInstances","_createComponents","_attachCanvasEvents","_attachZoomEvents","wrapperEl","clear","parentNode","removeChild","_detachZoomEvents","attachKeyboardZoomEvents","detachKeyboardZoomEvents","theArgs","getObjects","includesBackground","isValidGroup","isEmpty","hasOwnProperty","_activeObject","activeObject","isSelection","group","Group","_addFabricObject","getObjectId","ActiveSelection","mode","option","_isSameDrawingMode","drawingModeInstance","_getDrawingModeInstance","getDrawingMode","resetZoom","changeVisibility","dataUrl","maxDimension","_calcMaxDimension","setCanvasCssDimension","setCanvasBackstoreDimension","centerObject","setDimensions","withRendering","_callbackAfterLoadingImageObject","fromURL","getCenter","getCroppedImageData","drawingMode","compName","setStates","registerPaths","cursorType","clone","keys","targetOrigin","centerOrigin","staticCanvas","StaticCanvas","enableRetinaScaling","modeName","Object","objectCaching","selectedElement","nodeType","querySelector","nodeName","createElement","appendChild","Canvas","containerClass","_register","getName","wScaleFactor","hScaleFactor","floor","centerPos","handler","_removeFabricObject","_lazyFire","items","paramsMaker","existEventDelegation","predefinedKeys","_createTextProperties","makeFillPropertyForUserEvent","targetObject","isGroupSelect","targetObjects","newTargetObject","_cloneObject","addedObjects","getActiveSelectionFromObjects","_cloneObjectItem","all","_copyFabricObjectForPaste","clonedObject","addExtraPx","isReverse","_copyFabricObject","getCanvasSize","rightEdge","bottomEdge","cloned","processForCopiedObject","ImageTracer","pathomit","ltres","qtres","strokewidth","viewbox","linefilter","desc","rightangleenhance","pal","r","g","b","a","versionnumber","optionpresets","default","corsenabled","colorsampling","numberofcolors","mincolorratio","colorquantcycles","layering","roundcoords","lcpr","qcpr","blurradius","blurdelta","posterized1","posterized2","curvy","sharp","detailed","smoothed","grayscale","fixedpalette","randomsampling1","randomsampling2","artistic1","artistic2","artistic3","artistic4","posterized3","pathscan_combined_lookup","gks","specpalette","checkoptions","imagedataToSVG","getImgdata","imgd","td","imagedataToTracedata","getsvgstring","ii","colorquantization","tracedata","layers","palette","array","colornum","tracedlayer","batchtracepaths","internodes","pathscan","layeringstep","ls","layercontainerid","drawLayers","bps","batchpathscan","bis","batchinternodes","batchtracelayers","ok","k","arr","idx","cd","cdl","ci","paletteacc","pixelnum","j","cnt","generatepalette","samplepalette","samplepalette2","blur","n","random","ni","sqrt","nj","vx","vy","rcnt","gcnt","bcnt","graystep","colorqnum","pow","colorstep","rndnum","ah","aw","n1","n2","n3","n4","n5","n6","n7","n8","cnum","layer","paths","pacnt","pcnt","px","py","h","dir","pathfinished","holepath","lookuprow","boundingbox","holechildren","t","isholepath","parentidx","parentbbox","parentcnt","boundingboxincludes","childbbox","bpaths","ins","palen","nextidx","nextidx2","previdx","previdx2","testrightangle","linesegment","getdirection","idx1","idx2","idx3","idx4","idx5","binternodes","segtype1","segtype2","seqend","smp","segments","concat","fitseq","seqstart","errorpoint","errorval","curvepass","dist2","pl","fitpoint","t1","t2","t3","cpx","cpy","x3","y3","splitpoint","internodepaths","btracedpaths","tracepath","btbis","places","Number","toFixed","lnum","pathnum","str","tosvgcolorstr","roundtodec","hcnt","hsmp","lcnt","svgpathstring","c","parentid","div","getElementById","radius","delta","d","racc","gacc","bacc","aacc","wacc","imgd2","thisgk","himgd","Uint8ClampedArray","src","onload","torgbastr","fillRect","setCachedUndoDataForDimension","getCachedUndoDataForDimension","makeSelectionUndoData","makeSelectionUndoDatum","cachedUndoDataForChangeDimension","undoDatumMaker","getFillImageFromShape","rePositionFilterTypeFillImage","makeFilterOptionFromFabricImage","makeFillPatternForFilter","resetFillPatternCanvas","reMakePatternImageSource","getCachedCanvasImageElement","FILTER_OPTION_MAP","pixelate","POSITION_DIMENSION_MAP","FILTER_NAME_VALUE_MAP","cachedCanvasImageElement","rotatedShapeCornerDimension","getRotatedDimension","right","bottom","diffLeft","diffTop","cropX","cropY","fillImageMaxSize","calculateFillImageDimensionOutsideCanvas","imageObject","overflowAreaPositionFixer","outDistance","imageLeft","imageTop","calculateDistanceOverflowPart","calculateDimensionLeftTopEdge","calculateDimensionRightBottomEdge","insideCanvasRealImageWidth","insideCanvasRealImageHeight","cropDistance2","cropDistance","compareSize","copiedCanvasElement","makeFillImage","fabricProperty","Pattern","source","repeat","innerImage","newFillImage","toCanvasElement","shapePointNavigation","getShapeEdgePoint","shapeNeighborPointNavigation","linePointsOutsideCanvas","calculateLinePointsOutsideCanvas","reatAngles","calculateLineAngleOfOutsideCanvas","startPointIndex","diffPosition","getReversePositionForFlip","rotationChangePoint1","rotationChangePoint2","isForward","isReverseLeftPositionForFlip","isReverseTopPositionForFlip","minimumPoint","minimumPointIndex","index","endPointIndex1","endPointIndex2","linePointsOfOneVertexIndex","horizontalVerticalAngle","pointIndex","startPoint","endPoint","ax","ay","bx","by","cx","cy","dx","dy","currentCanvasImageAngle","fabricFilterClassName","DIVISOR","rect","circle","triangle","DIMENSION_KEYS","setStartPoint","originKey","substring","origins","getPositionsOfRotatedOrigin","origin","sx","sy","hasCenterOrigin","adjustOriginByStartPoint","centerPoint","originPositions","adjustOriginByMovingPointer","setPositionByOrigin","adjustDimensionOnScaling","dimensionKeys","maxScale","hasControls","adjustDimensionOnMouseMove","divisor","isTriangle","leftTopPoint","rightTopPoint","rightBottomPoint","leftBottomPoint","lt","rt","rb","lb","isScaling","isUndefined","wrapper","includeUI","usageStatistics","UIOption","UI","setUiDefaultSelectionStyle","Invoker","getEditorArea","_onObjectActivated","objectMoved","objectRotated","objectAdded","objectModified","createdPath","_onCreatedPath","_onAddText","addObject","_onAddObject","textEditing","_onTextEditing","_onTextChanged","iconCreateResize","_onIconCreateResize","iconCreateEnd","_onIconCreateEnd","_selectionCleared","selectionCreated","_selectionCreated","_attachInvokerEvents","_attachGraphicsEvents","_attachDomEvents","_setSelectionStyle","applyCropSelectionStyle","applyGroupSelectionStyle","initCanvas","_attachColorPickerInputBoxEvents","enableGLFiltering","isColorPickerInputBoxEditing","setSelectionStyle","setCropSelectionStyle","eventTarget","addEventListener","removeEventListener","ctrlKey","metaKey","isModifierKey","resetTargetObjectForCopyPaste","pasteObject","clearRedoStack","isDeleteKey","isRemoveReady","isReadyRemoveObject","preventDefault","getActiveObjectIdForRemove","removeObject","pushUndoStack","initHistory","clearHistory","commandName","executeSilent","iterationCount","imgFile","_flip","_rotate","setIconStyle","_setPositions","executeMethodName","_pushAddObjectCommand","_pushModifyObjectCommand","infos","_detachDomEvents","destroy","_detachColorPickerInputBoxEvents","centerPosition","keyValue","getObjectPosition","createMessage","errorMessage","errorTypes","executeCallback","undoCallback","Error","apply","getEditor","isFunction","_undoStack","_redoStack","_isLocked","_isSilent","lock","unlock","pushRedoStack","_invokeExecution","_fireUndoStackChanged","_invokeUndo","_fireRedoStackChanged","Element","matches","msMatchesSelector","webkitMatchesSelector","closest","s","el","documentElement","parentElement","createElementNS","view","classListProp","protoProp","elemCtrProto","objCtr","strTrim","String","trim","replace","arrIndexOf","Array","DOMEx","code","DOMException","checkTokenAndGetIndex","classList","token","test","call","ClassList","elem","trimmedClasses","getAttribute","classes","_updateClassName","setAttribute","toString","classListProto","classListGetter","tokens","arguments","l","updated","splice","toggle","force","method","join","defineProperty","classListPropDesc","enumerable","configurable","ex","number","undefined","__defineGetter__","testElement","createMethod","original","DOMTokenList","_toggle","cache","checkUseElems","tid","debouncedCheck","unobserveChanges","observeChanges","observer","MutationObserver","observe","childList","subtree","attributes","disconnect","ignore","createRequest","getOrigin","loc","protocol","href","host","Request","origin2","XMLHttpRequest","location","withCredentials","XDomainRequest","xlinkNS","base","bcr","fallback","hash","inProgressCount","isHidden","uses","xhr","observeIfDone","attrUpdateFunc","spec","useEl","setAttributeNS","hasAttribute","onloadFunc","svg","responseText","getElementsByTagName","overflow","insertBefore","firstChild","onErrorTimeout","onerror","ontimeout","getBoundingClientRect","getAttributeNS","send","abort","winLoad","readyState","SUB_UI_COMPONENT","Crop","Rotate","Draw","BI_EXPRESSION_MINSIZE_WHEN_TOP_POSITION","HISTORY_MENU","HISTORY_PANEL_CLASS_NAME","CLASS_NAME_ON","ZOOM_BUTTON_TYPE","ZOOM_IN","Ui","_initializeOption","_actions","uiSize","_locale","Locale","locale","theme","Theme","eventHandler","_submenuChangeTransection","_selectedElement","_mainElement","_editorElementWrap","_editorElement","_menuBarElement","_subMenuElement","_makeUiElement","_setUiSize","_initMenuEvent","_makeSubMenu","_attachHistoryEvent","_attachZoomEvent","_removeUiEvent","_destroyAllMenu","cornerStyle","cornerStrokeColor","_getCanvasMaxDimension","editorElementStyle","menuBarPosition","_setEditorPosition","selectElementClassList","offsetWidth","targetClassList","_buttonElements","zoomInClassList","enabled","handClassList","buttonType","enableStatus","buttonClassList","menuIconPath","initMenu","elementDimension","menuName","SubComponentClass","$0","_makeMenuElement","makeSvgIcon","makeMenSvgIconSet","_addHistory","_selectPrevHistory","_selectNextHistory","changeHandButtonStatus","selector","biImage","getStyle","loadButtonStyle","downloadButtonStyle","commonStyle","headerStyle","submenuStyle","_helpMenuBarElement","querySelectorAll","_addHelpMenus","_historyMenu","History","_activateZoomMenus","helpMenuWithPartition","_makeHelpMenuWithPartition","_makeMenuPartitionElement","partitionElement","partitionInnerElement","className","useIconTypes","menuType","btnElement","menuItemHtml","_addTooltipAttribute","helpName","historyTitle","init","prev","next","historyButtonClassList","tooltipName","localize","files","addEvent","_addMainMenuEvent","_addSubMenuEvent","_addHelpActionEvent","_addDownloadEvent","_addMenuEvent","_initMenu","_removeHelpActionEvent","_removeDownloadEvent","_removeLoadEvent","_removeMainMenuEvent","removeEvent","loadImageInfo","_getLoadImage","_addLoadEvent","gridVisual","grid","_editorContainerElement","_changeMenu","changeStartMode","evt","createEvent","initEvent","dispatchEvent","registerDefaultIcon","scrollHeight","offsetHeight","scrollWidth","subMenuElement","templateHtml","status","_els","defaultPresetButton","_removeEvent","_applyEventHandler","_cancelEventHandler","cropzonePreset","_cropzonePresetEventHandler","button","_setPresetButtonActive","presetButton","Submenu","DRAW_OPACITY","lineSelectButton","drawColorPicker","Colorpicker","toggleDirection","drawRange","Range","slider","input","colorPickerInputBox","colorpickerElement","changeDrawType","_changeDrawType","_changeDrawColor","_changeDrawRange","_onStartEditingInputBox","_onStopEditingInputBox","lineType","getButtonType","PICKER_CONTROL_HEIGHT","BLEND_OPTIONS","FILTER_OPTIONS","filterNameMap","invert","sepia","sharpen","emboss","removeWhite","brightness","contrast","saturation","vintage","polaroid","noise","colorFilter","tint","multiply","blend","hue","gamma","RANGE_INSTANCE_NAMES","COLORPICKER_INSTANCE_NAMES","selectBoxShow","checkedMap","_makeControlElement","_destroyToolInstance","filterCheckElement","filterNameCamelCase","instanceName","blendType","changeBlendFilter","colorPickerInputBoxes","inputBox","changeFilterState","filterName","_changeFilterState","changeFilterStateForRange","isLast","blandTypeClick","stopPropagation","filterBlendColor","filterMultiplyColor","filterTintColor","tintOpacity","colorPickerChangeShow","changedFilterInfos","_getFilterNameFromOptions","isRemove","_setFilterState","checked","blocksize","alpha","useAlpha","checkboxGroup","_getFilterOption","blurRange","FILTER_RANGE","_pickerWithRange","pickerControl","_pickerWithSelectbox","colorPickerControls","rangeWrap","rangeLabel","selectlistWrap","selectlist","optionlist","_makeSelectOptionList","_drawSelectOptionList","_pickerWithSelectboxForAddEvent","optionElement","optionValue","fireEvent","selectOption","flipStatus","flipButton","changeFlip","_changeFlip","flipClassList","historyClassName","selectedClassName","disabledClassName","menuElement","_eventHandler","_historyIndex","getListLength","detail","_hasDisabledItem","deleteListItemElement","html","makeListItemElement","pushListItemElement","_selectItem","_clickHistoryItem","listElement","removeClass","addClass","_addHistoryEventListener","_removeHistoryEventListener","Panel","_iconMap","registerIconButton","addIconButton","iconColorpicker","registerIcon","_registerIconHandler","_addIconHandler","_changeColorHandler","isSupportFileApi","applyButton","maskImageButton","loadMaskFile","_loadMaskFile","applyMask","_applyMask","panelElement","_makePanelElement","_makeListElement","panel","list","listItem","_lockState","widthRange","heightRange","limits","calcMinValue","calcMaxValue","maxValue","minValue","trigger","_changeWidthRangeHandler","_changeHeightRangeHandler","_changeLockAspectRatio","CLOCKWISE","COUNTERCLOCKWISE","_value","rotateButton","rotateRange","resultAngle","_setRangeBarRatio","rotationAngleChanged","_changeRotateForButton","_changeRotateForRange","rotateType","rotateAngle","clockwise","counterclockwise","newAngle","isRotatable","SHAPE_DEFAULT_OPTION","shapeSelectButton","shapeColorButton","strokeRange","fillColorpicker","strokeColorpicker","shapeTypeSelected","_changeShapeHandler","_changeStrokeRangeHandler","_changeFillColorHandler","_changeStrokeColorHandler","strokeMaxValue","currentTarget","_makeSubMenuElement","selectName","occurredControl","hide","buttonNames","RegExp","iconStyle","iconSubMenu","subMenuLabelActive","subMenuLabelNormal","subMenuRangeTitle","submenuPartitionVertical","submenuPartitionHorizontal","submenuCheckbox","submenuRangePointer","submenuRangeValue","submenuColorpickerTitle","submenuColorpickerButton","submenuRangeBar","submenuRangeSubbar","submenuDisabledRangePointer","submenuDisabledRangeBar","submenuDisabledRangeSubbar","submenuIconSize","menuIconSize","biSize","menuIconStyle","submenuIconStyle","normal","active","hover","disabled","effect","bold","italic","align","textEffectButton","textAlignButton","textColorpicker","textRange","setTextEffect","_setTextEffectHandler","setTextAlign","_setTextAlignHandler","_changeTextRnageHandler","textStyle","setEffectState","setAlignState","effectName","effectValue","styleType","styleTypeAlias","customTheme","_changeToObject","standardTheme","_styleMaker","_loadDefaultSvgIcon","firstProperty","_makeCssText","vertical","borderLeft","horizontal","borderBottom","backgroundColor","submenuLabelStyle","submenuPartitionStyle","styleOptions","styleObject","keyExplode","property","subProperty","converterStack","_toUnderScore","targetString","$1","parser","DOMParser","dom","parseFromString","isSubmenu","iconStyleInfo","svgIconPrefix","_makeSvgIconPrefix","iconName","svgIconClassName","_makeIconClassName","_makeSvgItem","PICKER_COLOR","defaultColor","_show","_colorpickerElement","_toggleDirection","_makePickerButtonElement","_makePickerLayerElement","_color","picker","tuiColorPicker","container","pickerElement","_addEvent","colorElement","title","label","_changeColorElement","pickerToggle","_pickerToggleEventHandler","pickerHide","isInPickerControl","_isElementInColorPickerControl","_isPaletteButton","_setPickerControlPosition","halfPickerWidth","clientWidth","INPUT_FILTER_REGEXP","rangeElements","rangeElement","rangeInputElement","_drawRangeElement","rangeWidth","_getRangeWidth","_min","_max","_useDecimal","_absMax","startChangingSlide","_startChangingSlide","stopChangingSlide","_stopChangingSlide","changeSlide","_changeSlide","changeSlideFinally","_changeSlideFinally","changeInput","_changeValueWithInput","changeInputFinally","changeInputWithArrow","_changeValueWithInputKeyEvent","_addClickEvent","_addDragEvent","_addInputEvent","_removeClickEvent","_removeDragEvent","_removeInputEvent","getElementWidth","getComputedStyle","bar","subbar","_valueUpDownForKeyEvent","unChanged","clampValue","step","stringValue","_filterForInputText","waitForChange","isNaN","changePosition","screenX","firstPosition","touchPx","firstLeft","resultValue","isValueChanged","offsetX","inputValue","absValue","leftPosition","clamp","keyMirror","makeStyleText","getProperties","toInteger","toCamelCase","getRgb","sendHostName","styleLoad","getSelector","base64ToBlob","fixFloatingPoint","assignmentForDestroy","cls","changeOrigin","flipObject","setCustomProperty","getCustomProperty","capitalizeString","includes","getFillTypeFromOption","getFillTypeFromObject","isShape","getObjectType","isSilentCommand","getHistoryTitle","getHelpMenuBarPosition","isEmptyCropzone","FLOATING_POINT_DIGIT","CSS_PREFIX","hostnameSent","styleStr","File","FileList","FileReader","styleBuffer","tagId","linkElement","styleData","encodeURIComponent","targetElement","rImageType","mimeString","raw","uInt8Array","header","imageType","atob","rawLength","Uint8Array","charCodeAt","Blob","prefix","fObject","customProps","propNames","resultObject","propName","targetArray","compareValue","toStartOfCapital","getFilterType","historyInfo","first"],"mappings":"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ACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;AClCA;;;;;;;;;;;;ACAA,gBAAgB,mBAAO,CAAC,kGAAgC;;AAExD;;;;;;;;;;;;ACFA,cAAc,mBAAO,CAAC,sFAA0B;AAChD,aAAa,mBAAO,CAAC,4EAAqB;;AAE1C;;;;;;;;;;;;ACHA,gBAAgB,mBAAO,CAAC,kGAAgC;;AAExD;;;;;;;;;;;;ACFA,iBAAiB,mBAAO,CAAC,wFAA2B;;AAEpD;;;;;;;;;;;;ACFA,aAAa,mBAAO,CAAC,4EAAqB;AAC1C,gBAAgB,mBAAO,CAAC,kGAAgC;;AAExD;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;;AAEA;;;;;;;;;;;;ACnBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;ACTa;AACb,aAAa,mBAAO,CAAC,4EAAqB;AAC1C,+BAA+B,mBAAO,CAAC,oIAAiD;AACxF,eAAe,mBAAO,CAAC,kFAAwB;AAC/C,WAAW,mBAAO,CAAC,wEAAmB;AACtC,WAAW,mBAAO,CAAC,0GAAoC;AACvD,kCAAkC,mBAAO,CAAC,4HAA6C;AACvF,UAAU,mBAAO,CAAC,sEAAkB;;AAEpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP,KAAK;AACL;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,sFAAsF;;AAEtF,iEAAiE;AACjE;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA,KAAK;;AAEL;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;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;AACA;;AAEA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;;;;;ACzDA,eAAe,mBAAO,CAAC,kFAAwB;;AAE/C;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;ACPa;AACb,YAAY,mBAAO,CAAC,0EAAoB;AACxC,qBAAqB,mBAAO,CAAC,8GAAsC;AACnE,kCAAkC,mBAAO,CAAC,4HAA6C;AACvF,UAAU,mBAAO,CAAC,sEAAkB;AACpC,sBAAsB,mBAAO,CAAC,kGAAgC;AAC9D,cAAc,mBAAO,CAAC,8EAAsB;;AAE5C;AACA;;AAEA,8BAA8B,aAAa;;AAE3C;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,CAAC;;AAED;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;;;;AC5CA;;;;;;;;;;;;ACAA,aAAa,mBAAO,CAAC,4EAAqB;AAC1C,+BAA+B,mBAAO,CAAC,oIAAiD;AACxF,gBAAgB,mBAAO,CAAC,wEAAmB;AAC3C,aAAa,mBAAO,CAAC,0FAA4B;AACjD,sBAAsB,mBAAO,CAAC,4GAAqC;AACnE,cAAc,mBAAO,CAAC,4FAA6B;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO;AACP;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,+CAA+C,sBAAsB;AACrE;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,cAAc;AACd;AACA;AACA;AACA;AACA,GAAG;AACH;;;;;;;;;;;;ACjFA,aAAa,mBAAO,CAAC,4EAAqB;;AAE1C;;;;;;;;;;;;ACFA;AA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AkB;;AAEpC;;AAEA;AACA;AACA;;;;;;;;;;;;ACPA,aAAa,mBAAO,CAAC,4EAAqB;AAC1C,gBAAgB,mBAAO,CAAC,oFAAyB;;AAEjD;AACA,kDAAkD;;AAElD;;;;;;;;;;;;ACNA,cAAc,mBAAO,CAAC,8EAAsB;AAC5C,YAAY,mBAAO,CAAC,wFAA2B;;AAE/C;AACA,qEAAqE;AACrE,CAAC;AACD;AACA;AACA;AACA,CAAC;;;;;;;;;;;;ACTD,eAAe,mBAAO,CAAC,kFAAwB;AAC/C,gBAAgB,mBAAO,CAAC,oFAAyB;AACjD,sBAAsB,mBAAO,CAAC,kGAAgC;;AAE9D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;ACZA,gBAAgB,mBAAO,CAAC,oFAAyB;AACjD,6BAA6B,mBAAO,CAAC,gHAAuC;;AAE5E,sBAAsB,kBAAkB;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;AC1BA,aAAa,mBAAO,CAAC,4EAAqB;AAC1C,YAAY,mBAAO,CAAC,0EAAoB;AACxC,WAAW,mBAAO,CAAC,0GAAoC;AACvD,WAAW,mBAAO,CAAC,wEAAmB;AACtC,oBAAoB,mBAAO,CAAC,8GAAsC;AAClE,aAAa,mBAAO,CAAC,0FAA4B;AACjD,cAAc,mBAAO,CAAC,4FAA6B;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AA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AA0B;AACnD,oBAAoB,mBAAO,CAAC,4FAA6B;AACzD,cAAc,mBAAO,CAAC,8EAAsB;AAC5C,kCAAkC,mBAAO,CAAC,4HAA6C;AACvF,yBAAyB,mBAAO,CAAC,sGAAkC;AACnE,WAAW,mBAAO,CAAC,wEAAmB;AACtC,gBAAgB,mBAAO,CAAC,kFAAwB;AAChD,qBAAqB,mBAAO,CAAC,8FAA8B;AAC3D,uBAAuB,mBAAO,CAAC,oGAAiC;AAChE,iCAAiC,mBAAO,CAAC,4GAAqC;AAC9E,cAAc,mBAAO,CAAC,8EAAsB;AAC5C,0BAA0B,mBAAO,CAAC,4FAA6B;AAC/D,eAAe,mBAAO,CAAC,kFAAwB;AAC/C,sBAAsB,mBAAO,CAAC,kGAAgC;AAC9D,iBAAiB,mBAAO,CAAC,kGAAgC;AACzD,cAAc,mBAAO,CAAC,4FAA6B;AACnD,iBAAiB,mBAAO,CAAC,kGAAgC;;AAEzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,2DAA2D,YAAY,EAAE;AACzE;AACA,sBAAsB,cAAc,eAAe,cAAc;AACjE;AACA;AACA;AACA,0CAA0C,cAAc;AACxD;AACA;AACA;AACA,CAAC;;AAED;AACA,yDAAyD,cAAc;AACvE,CAAC;;AAED;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oCAAoC;AACpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAW;AACX;AACA,WAAW;AACX,SAAS;AACT,OAAO;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAG,eAAe;AAClB;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT,OAAO;AACP;AACA;AACA;AACA;AACA,GAAG;AACH;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL,GAAG;AACH;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,uBAAuB;AACvB;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA;AACA,OAAO;AACP,KAAK;AACL;AACA;AACA;AACA;AACA,GAAG;AACH,oBAAoB,cAAc;AAClC;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,GAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS;AACT;AACA,OAAO,GAAG,eAAe;;AAEzB;AACA,uFAAuF,eAAe;AACtG;;AAEA;AACA;AACA;AACA,KAAK,gBAAgB;;AAErB;AACA;AACA;AACA;AACA;AACA;;AAEA,GAAG,2CAA2C;AAC9C;AACA,CAAC;;AAED;AACA;;AAEA;;AAEA;AACA,GAAG,8CAA8C;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;AAED,GAAG,yDAAyD;AAC5D;AACA;AACA;AACA;AACA;AACA,CAAC;;AAED,GAAG,2DAA2D;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC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","file":"tui-image-editor.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory(require(\"fabric\")[\"fabric\"], require(\"tui-code-snippet\"), require(\"tui-color-picker\"));\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([\"fabric\", \"tui-code-snippet\", \"tui-color-picker\"], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"ImageEditor\"] = factory(require(\"fabric\")[\"fabric\"], require(\"tui-code-snippet\"), require(\"tui-color-picker\"));\n\telse\n\t\troot[\"tui\"] = root[\"tui\"] || {}, root[\"tui\"][\"ImageEditor\"] = factory(root[\"fabric\"], root[\"tui\"][\"util\"], root[\"tui\"][\"colorPicker\"]);\n})(window, function(__WEBPACK_EXTERNAL_MODULE_fabric__, __WEBPACK_EXTERNAL_MODULE_tui_code_snippet__, __WEBPACK_EXTERNAL_MODULE_tui_color_picker__) {\nreturn "," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/dist\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = \"./src/index.js\");\n","require('../../modules/es.aggregate-error');\nrequire('../../modules/es.object.to-string');\nrequire('../../modules/es.promise');\nrequire('../../modules/es.promise.all-settled');\nrequire('../../modules/es.promise.any');\nrequire('../../modules/es.promise.finally');\nrequire('../../modules/es.string.iterator');\nrequire('../../modules/web.dom-collections.iterator');\nvar path = require('../../internals/path');\n\nmodule.exports = path.Promise;\n","var parent = require('../../es/promise');\nrequire('../../modules/esnext.aggregate-error');\n// TODO: Remove from `core-js@4`\nrequire('../../modules/esnext.promise.all-settled');\nrequire('../../modules/esnext.promise.try');\nrequire('../../modules/esnext.promise.any');\n\nmodule.exports = parent;\n","module.exports = function (it) {\n if (typeof it != 'function') {\n throw TypeError(String(it) + ' is not a function');\n } return it;\n};\n","var isObject = require('../internals/is-object');\n\nmodule.exports = function (it) {\n if (!isObject(it) && it !== null) {\n throw TypeError(\"Can't set \" + String(it) + ' as a prototype');\n } return it;\n};\n","module.exports = function () { /* empty */ };\n","module.exports = function (it, Constructor, name) {\n if (!(it instanceof Constructor)) {\n throw TypeError('Incorrect ' + (name ? name + ' ' : '') + 'invocation');\n } return it;\n};\n","var isObject = require('../internals/is-object');\n\nmodule.exports = function (it) {\n if (!isObject(it)) {\n throw TypeError(String(it) + ' is not an object');\n } return it;\n};\n","var toIndexedObject = require('../internals/to-indexed-object');\nvar toLength = require('../internals/to-length');\nvar toAbsoluteIndex = require('../internals/to-absolute-index');\n\n// `Array.prototype.{ indexOf, includes }` methods implementation\nvar createMethod = function (IS_INCLUDES) {\n return function ($this, el, fromIndex) {\n var O = toIndexedObject($this);\n var length = toLength(O.length);\n var index = toAbsoluteIndex(fromIndex, length);\n var value;\n // Array#includes uses SameValueZero equality algorithm\n // eslint-disable-next-line no-self-compare -- NaN check\n if (IS_INCLUDES && el != el) while (length > index) {\n value = O[index++];\n // eslint-disable-next-line no-self-compare -- NaN check\n if (value != value) return true;\n // Array#indexOf ignores holes, Array#includes - not\n } else for (;length > index; index++) {\n if ((IS_INCLUDES || index in O) && O[index] === el) return IS_INCLUDES || index || 0;\n } return !IS_INCLUDES && -1;\n };\n};\n\nmodule.exports = {\n // `Array.prototype.includes` method\n // https://tc39.es/ecma262/#sec-array.prototype.includes\n includes: createMethod(true),\n // `Array.prototype.indexOf` method\n // https://tc39.es/ecma262/#sec-array.prototype.indexof\n indexOf: createMethod(false)\n};\n","var wellKnownSymbol = require('../internals/well-known-symbol');\n\nvar ITERATOR = wellKnownSymbol('iterator');\nvar SAFE_CLOSING = false;\n\ntry {\n var called = 0;\n var iteratorWithReturn = {\n next: function () {\n return { done: !!called++ };\n },\n 'return': function () {\n SAFE_CLOSING = true;\n }\n };\n iteratorWithReturn[ITERATOR] = function () {\n return this;\n };\n // eslint-disable-next-line es/no-array-from, no-throw-literal -- required for testing\n Array.from(iteratorWithReturn, function () { throw 2; });\n} catch (error) { /* empty */ }\n\nmodule.exports = function (exec, SKIP_CLOSING) {\n if (!SKIP_CLOSING && !SAFE_CLOSING) return false;\n var ITERATION_SUPPORT = false;\n try {\n var object = {};\n object[ITERATOR] = function () {\n return {\n next: function () {\n return { done: ITERATION_SUPPORT = true };\n }\n };\n };\n exec(object);\n } catch (error) { /* empty */ }\n return ITERATION_SUPPORT;\n};\n","var toString = {}.toString;\n\nmodule.exports = function (it) {\n return toString.call(it).slice(8, -1);\n};\n","var TO_STRING_TAG_SUPPORT = require('../internals/to-string-tag-support');\nvar classofRaw = require('../internals/classof-raw');\nvar wellKnownSymbol = require('../internals/well-known-symbol');\n\nvar TO_STRING_TAG = wellKnownSymbol('toStringTag');\n// ES3 wrong here\nvar CORRECT_ARGUMENTS = classofRaw(function () { return arguments; }()) == 'Arguments';\n\n// fallback for IE11 Script Access Denied error\nvar tryGet = function (it, key) {\n try {\n return it[key];\n } catch (error) { /* empty */ }\n};\n\n// getting tag from ES6+ `Object.prototype.toString`\nmodule.exports = TO_STRING_TAG_SUPPORT ? classofRaw : function (it) {\n var O, tag, result;\n return it === undefined ? 'Undefined' : it === null ? 'Null'\n // @@toStringTag case\n : typeof (tag = tryGet(O = Object(it), TO_STRING_TAG)) == 'string' ? tag\n // builtinTag case\n : CORRECT_ARGUMENTS ? classofRaw(O)\n // ES3 arguments fallback\n : (result = classofRaw(O)) == 'Object' && typeof O.callee == 'function' ? 'Arguments' : result;\n};\n","var fails = require('../internals/fails');\n\nmodule.exports = !fails(function () {\n function F() { /* empty */ }\n F.prototype.constructor = null;\n // eslint-disable-next-line es/no-object-getprototypeof -- required for testing\n return Object.getPrototypeOf(new F()) !== F.prototype;\n});\n","'use strict';\nvar IteratorPrototype = require('../internals/iterators-core').IteratorPrototype;\nvar create = require('../internals/object-create');\nvar createPropertyDescriptor = require('../internals/create-property-descriptor');\nvar setToStringTag = require('../internals/set-to-string-tag');\nvar Iterators = require('../internals/iterators');\n\nvar returnThis = function () { return this; };\n\nmodule.exports = function (IteratorConstructor, NAME, next) {\n var TO_STRING_TAG = NAME + ' Iterator';\n IteratorConstructor.prototype = create(IteratorPrototype, { next: createPropertyDescriptor(1, next) });\n setToStringTag(IteratorConstructor, TO_STRING_TAG, false, true);\n Iterators[TO_STRING_TAG] = returnThis;\n return IteratorConstructor;\n};\n","var DESCRIPTORS = require('../internals/descriptors');\nvar definePropertyModule = require('../internals/object-define-property');\nvar createPropertyDescriptor = require('../internals/create-property-descriptor');\n\nmodule.exports = DESCRIPTORS ? function (object, key, value) {\n return definePropertyModule.f(object, key, createPropertyDescriptor(1, value));\n} : function (object, key, value) {\n object[key] = value;\n return object;\n};\n","module.exports = function (bitmap, value) {\n return {\n enumerable: !(bitmap & 1),\n configurable: !(bitmap & 2),\n writable: !(bitmap & 4),\n value: value\n };\n};\n","'use strict';\nvar $ = require('../internals/export');\nvar createIteratorConstructor = require('../internals/create-iterator-constructor');\nvar getPrototypeOf = require('../internals/object-get-prototype-of');\nvar setPrototypeOf = require('../internals/object-set-prototype-of');\nvar setToStringTag = require('../internals/set-to-string-tag');\nvar createNonEnumerableProperty = require('../internals/create-non-enumerable-property');\nvar redefine = require('../internals/redefine');\nvar wellKnownSymbol = require('../internals/well-known-symbol');\nvar IS_PURE = require('../internals/is-pure');\nvar Iterators = require('../internals/iterators');\nvar IteratorsCore = require('../internals/iterators-core');\n\nvar IteratorPrototype = IteratorsCore.IteratorPrototype;\nvar BUGGY_SAFARI_ITERATORS = IteratorsCore.BUGGY_SAFARI_ITERATORS;\nvar ITERATOR = wellKnownSymbol('iterator');\nvar KEYS = 'keys';\nvar VALUES = 'values';\nvar ENTRIES = 'entries';\n\nvar returnThis = function () { return this; };\n\nmodule.exports = function (Iterable, NAME, IteratorConstructor, next, DEFAULT, IS_SET, FORCED) {\n createIteratorConstructor(IteratorConstructor, NAME, next);\n\n var getIterationMethod = function (KIND) {\n if (KIND === DEFAULT && defaultIterator) return defaultIterator;\n if (!BUGGY_SAFARI_ITERATORS && KIND in IterablePrototype) return IterablePrototype[KIND];\n switch (KIND) {\n case KEYS: return function keys() { return new IteratorConstructor(this, KIND); };\n case VALUES: return function values() { return new IteratorConstructor(this, KIND); };\n case ENTRIES: return function entries() { return new IteratorConstructor(this, KIND); };\n } return function () { return new IteratorConstructor(this); };\n };\n\n var TO_STRING_TAG = NAME + ' Iterator';\n var INCORRECT_VALUES_NAME = false;\n var IterablePrototype = Iterable.prototype;\n var nativeIterator = IterablePrototype[ITERATOR]\n || IterablePrototype['@@iterator']\n || DEFAULT && IterablePrototype[DEFAULT];\n var defaultIterator = !BUGGY_SAFARI_ITERATORS && nativeIterator || getIterationMethod(DEFAULT);\n var anyNativeIterator = NAME == 'Array' ? IterablePrototype.entries || nativeIterator : nativeIterator;\n var CurrentIteratorPrototype, methods, KEY;\n\n // fix native\n if (anyNativeIterator) {\n CurrentIteratorPrototype = getPrototypeOf(anyNativeIterator.call(new Iterable()));\n if (IteratorPrototype !== Object.prototype && CurrentIteratorPrototype.next) {\n if (!IS_PURE && getPrototypeOf(CurrentIteratorPrototype) !== IteratorPrototype) {\n if (setPrototypeOf) {\n setPrototypeOf(CurrentIteratorPrototype, IteratorPrototype);\n } else if (typeof CurrentIteratorPrototype[ITERATOR] != 'function') {\n createNonEnumerableProperty(CurrentIteratorPrototype, ITERATOR, returnThis);\n }\n }\n // Set @@toStringTag to native iterators\n setToStringTag(CurrentIteratorPrototype, TO_STRING_TAG, true, true);\n if (IS_PURE) Iterators[TO_STRING_TAG] = returnThis;\n }\n }\n\n // fix Array#{values, @@iterator}.name in V8 / FF\n if (DEFAULT == VALUES && nativeIterator && nativeIterator.name !== VALUES) {\n INCORRECT_VALUES_NAME = true;\n defaultIterator = function values() { return nativeIterator.call(this); };\n }\n\n // define iterator\n if ((!IS_PURE || FORCED) && IterablePrototype[ITERATOR] !== defaultIterator) {\n createNonEnumerableProperty(IterablePrototype, ITERATOR, defaultIterator);\n }\n Iterators[NAME] = defaultIterator;\n\n // export additional methods\n if (DEFAULT) {\n methods = {\n values: getIterationMethod(VALUES),\n keys: IS_SET ? defaultIterator : getIterationMethod(KEYS),\n entries: getIterationMethod(ENTRIES)\n };\n if (FORCED) for (KEY in methods) {\n if (BUGGY_SAFARI_ITERATORS || INCORRECT_VALUES_NAME || !(KEY in IterablePrototype)) {\n redefine(IterablePrototype, KEY, methods[KEY]);\n }\n } else $({ target: NAME, proto: true, forced: BUGGY_SAFARI_ITERATORS || INCORRECT_VALUES_NAME }, methods);\n }\n\n return methods;\n};\n","var fails = require('../internals/fails');\n\n// Detect IE8's incomplete defineProperty implementation\nmodule.exports = !fails(function () {\n // eslint-disable-next-line es/no-object-defineproperty -- required for testing\n return Object.defineProperty({}, 1, { get: function () { return 7; } })[1] != 7;\n});\n","var global = require('../internals/global');\nvar isObject = require('../internals/is-object');\n\nvar document = global.document;\n// typeof document.createElement is 'object' in old IE\nvar EXISTS = isObject(document) && isObject(document.createElement);\n\nmodule.exports = function (it) {\n return EXISTS ? document.createElement(it) : {};\n};\n","// iterable DOM collections\n// flag - `iterable` interface - 'entries', 'keys', 'values', 'forEach' methods\nmodule.exports = {\n CSSRuleList: 0,\n CSSStyleDeclaration: 0,\n CSSValueList: 0,\n ClientRectList: 0,\n DOMRectList: 0,\n DOMStringList: 0,\n DOMTokenList: 1,\n DataTransferItemList: 0,\n FileList: 0,\n HTMLAllCollection: 0,\n HTMLCollection: 0,\n HTMLFormElement: 0,\n HTMLSelectElement: 0,\n MediaList: 0,\n MimeTypeArray: 0,\n NamedNodeMap: 0,\n NodeList: 1,\n PaintRequestList: 0,\n Plugin: 0,\n PluginArray: 0,\n SVGLengthList: 0,\n SVGNumberList: 0,\n SVGPathSegList: 0,\n SVGPointList: 0,\n SVGStringList: 0,\n SVGTransformList: 0,\n SourceBufferList: 0,\n StyleSheetList: 0,\n TextTrackCueList: 0,\n TextTrackList: 0,\n TouchList: 0\n};\n","module.exports = typeof window == 'object';\n","var userAgent = require('../internals/engine-user-agent');\n\nmodule.exports = /(?:iphone|ipod|ipad).*applewebkit/i.test(userAgent);\n","var classof = require('../internals/classof-raw');\nvar global = require('../internals/global');\n\nmodule.exports = classof(global.process) == 'process';\n","var userAgent = require('../internals/engine-user-agent');\n\nmodule.exports = /web0s(?!.*chrome)/i.test(userAgent);\n","var getBuiltIn = require('../internals/get-built-in');\n\nmodule.exports = getBuiltIn('navigator', 'userAgent') || '';\n","var global = require('../internals/global');\nvar userAgent = require('../internals/engine-user-agent');\n\nvar process = global.process;\nvar versions = process && process.versions;\nvar v8 = versions && versions.v8;\nvar match, version;\n\nif (v8) {\n match = v8.split('.');\n version = match[0] < 4 ? 1 : match[0] + match[1];\n} else if (userAgent) {\n match = userAgent.match(/Edge\\/(\\d+)/);\n if (!match || match[1] >= 74) {\n match = userAgent.match(/Chrome\\/(\\d+)/);\n if (match) version = match[1];\n }\n}\n\nmodule.exports = version && +version;\n","// IE8- don't enum bug keys\nmodule.exports = [\n 'constructor',\n 'hasOwnProperty',\n 'isPrototypeOf',\n 'propertyIsEnumerable',\n 'toLocaleString',\n 'toString',\n 'valueOf'\n];\n","'use strict';\nvar global = require('../internals/global');\nvar getOwnPropertyDescriptor = require('../internals/object-get-own-property-descriptor').f;\nvar isForced = require('../internals/is-forced');\nvar path = require('../internals/path');\nvar bind = require('../internals/function-bind-context');\nvar createNonEnumerableProperty = require('../internals/create-non-enumerable-property');\nvar has = require('../internals/has');\n\nvar wrapConstructor = function (NativeConstructor) {\n var Wrapper = function (a, b, c) {\n if (this instanceof NativeConstructor) {\n switch (arguments.length) {\n case 0: return new NativeConstructor();\n case 1: return new NativeConstructor(a);\n case 2: return new NativeConstructor(a, b);\n } return new NativeConstructor(a, b, c);\n } return NativeConstructor.apply(this, arguments);\n };\n Wrapper.prototype = NativeConstructor.prototype;\n return Wrapper;\n};\n\n/*\n options.target - name of the target object\n options.global - target is the global object\n options.stat - export as static methods of target\n options.proto - export as prototype methods of target\n options.real - real prototype method for the `pure` version\n options.forced - export even if the native feature is available\n options.bind - bind methods to the target, required for the `pure` version\n options.wrap - wrap constructors to preventing global pollution, required for the `pure` version\n options.unsafe - use the simple assignment of property instead of delete + defineProperty\n options.sham - add a flag to not completely full polyfills\n options.enumerable - export as enumerable property\n options.noTargetGet - prevent calling a getter on target\n*/\nmodule.exports = function (options, source) {\n var TARGET = options.target;\n var GLOBAL = options.global;\n var STATIC = options.stat;\n var PROTO = options.proto;\n\n var nativeSource = GLOBAL ? global : STATIC ? global[TARGET] : (global[TARGET] || {}).prototype;\n\n var target = GLOBAL ? path : path[TARGET] || (path[TARGET] = {});\n var targetPrototype = target.prototype;\n\n var FORCED, USE_NATIVE, VIRTUAL_PROTOTYPE;\n var key, sourceProperty, targetProperty, nativeProperty, resultProperty, descriptor;\n\n for (key in source) {\n FORCED = isForced(GLOBAL ? key : TARGET + (STATIC ? '.' : '#') + key, options.forced);\n // contains in native\n USE_NATIVE = !FORCED && nativeSource && has(nativeSource, key);\n\n targetProperty = target[key];\n\n if (USE_NATIVE) if (options.noTargetGet) {\n descriptor = getOwnPropertyDescriptor(nativeSource, key);\n nativeProperty = descriptor && descriptor.value;\n } else nativeProperty = nativeSource[key];\n\n // export native or implementation\n sourceProperty = (USE_NATIVE && nativeProperty) ? nativeProperty : source[key];\n\n if (USE_NATIVE && typeof targetProperty === typeof sourceProperty) continue;\n\n // bind timers to global for call from export context\n if (options.bind && USE_NATIVE) resultProperty = bind(sourceProperty, global);\n // wrap global constructors for prevent changs in this version\n else if (options.wrap && USE_NATIVE) resultProperty = wrapConstructor(sourceProperty);\n // make static versions for prototype methods\n else if (PROTO && typeof sourceProperty == 'function') resultProperty = bind(Function.call, sourceProperty);\n // default case\n else resultProperty = sourceProperty;\n\n // add a flag to not completely full polyfills\n if (options.sham || (sourceProperty && sourceProperty.sham) || (targetProperty && targetProperty.sham)) {\n createNonEnumerableProperty(resultProperty, 'sham', true);\n }\n\n target[key] = resultProperty;\n\n if (PROTO) {\n VIRTUAL_PROTOTYPE = TARGET + 'Prototype';\n if (!has(path, VIRTUAL_PROTOTYPE)) {\n createNonEnumerableProperty(path, VIRTUAL_PROTOTYPE, {});\n }\n // export virtual prototype methods\n path[VIRTUAL_PROTOTYPE][key] = sourceProperty;\n // export real prototype methods\n if (options.real && targetPrototype && !targetPrototype[key]) {\n createNonEnumerableProperty(targetPrototype, key, sourceProperty);\n }\n }\n }\n};\n","module.exports = function (exec) {\n try {\n return !!exec();\n } catch (error) {\n return true;\n }\n};\n","var aFunction = require('../internals/a-function');\n\n// optional / simple context binding\nmodule.exports = function (fn, that, length) {\n aFunction(fn);\n if (that === undefined) return fn;\n switch (length) {\n case 0: return function () {\n return fn.call(that);\n };\n case 1: return function (a) {\n return fn.call(that, a);\n };\n case 2: return function (a, b) {\n return fn.call(that, a, b);\n };\n case 3: return function (a, b, c) {\n return fn.call(that, a, b, c);\n };\n }\n return function (/* ...args */) {\n return fn.apply(that, arguments);\n };\n};\n","var path = require('../internals/path');\nvar global = require('../internals/global');\n\nvar aFunction = function (variable) {\n return typeof variable == 'function' ? variable : undefined;\n};\n\nmodule.exports = function (namespace, method) {\n return arguments.length < 2 ? aFunction(path[namespace]) || aFunction(global[namespace])\n : path[namespace] && path[namespace][method] || global[namespace] && global[namespace][method];\n};\n","var classof = require('../internals/classof');\nvar Iterators = require('../internals/iterators');\nvar wellKnownSymbol = require('../internals/well-known-symbol');\n\nvar ITERATOR = wellKnownSymbol('iterator');\n\nmodule.exports = function (it) {\n if (it != undefined) return it[ITERATOR]\n || it['@@iterator']\n || Iterators[classof(it)];\n};\n","var check = function (it) {\n return it && it.Math == Math && it;\n};\n\n// https://github.com/zloirock/core-js/issues/86#issuecomment-115759028\nmodule.exports =\n // eslint-disable-next-line es/no-global-this -- safe\n check(typeof globalThis == 'object' && globalThis) ||\n check(typeof window == 'object' && window) ||\n // eslint-disable-next-line no-restricted-globals -- safe\n check(typeof self == 'object' && self) ||\n check(typeof global == 'object' && global) ||\n // eslint-disable-next-line no-new-func -- fallback\n (function () { return this; })() || Function('return this')();\n","var toObject = require('../internals/to-object');\n\nvar hasOwnProperty = {}.hasOwnProperty;\n\nmodule.exports = function hasOwn(it, key) {\n return hasOwnProperty.call(toObject(it), key);\n};\n","module.exports = {};\n","var global = require('../internals/global');\n\nmodule.exports = function (a, b) {\n var console = global.console;\n if (console && console.error) {\n arguments.length === 1 ? console.error(a) : console.error(a, b);\n }\n};\n","var getBuiltIn = require('../internals/get-built-in');\n\nmodule.exports = getBuiltIn('document', 'documentElement');\n","var DESCRIPTORS = require('../internals/descriptors');\nvar fails = require('../internals/fails');\nvar createElement = require('../internals/document-create-element');\n\n// Thank's IE8 for his funny defineProperty\nmodule.exports = !DESCRIPTORS && !fails(function () {\n // eslint-disable-next-line es/no-object-defineproperty -- requied for testing\n return Object.defineProperty(createElement('div'), 'a', {\n get: function () { return 7; }\n }).a != 7;\n});\n","var fails = require('../internals/fails');\nvar classof = require('../internals/classof-raw');\n\nvar split = ''.split;\n\n// fallback for non-array-like ES3 and non-enumerable old V8 strings\nmodule.exports = fails(function () {\n // throws an error in rhino, see https://github.com/mozilla/rhino/issues/346\n // eslint-disable-next-line no-prototype-builtins -- safe\n return !Object('z').propertyIsEnumerable(0);\n}) ? function (it) {\n return classof(it) == 'String' ? split.call(it, '') : Object(it);\n} : Object;\n","var store = require('../internals/shared-store');\n\nvar functionToString = Function.toString;\n\n// this helper broken in `3.4.1-3.4.4`, so we can't use `shared` helper\nif (typeof store.inspectSource != 'function') {\n store.inspectSource = function (it) {\n return functionToString.call(it);\n };\n}\n\nmodule.exports = store.inspectSource;\n","var NATIVE_WEAK_MAP = require('../internals/native-weak-map');\nvar global = require('../internals/global');\nvar isObject = require('../internals/is-object');\nvar createNonEnumerableProperty = require('../internals/create-non-enumerable-property');\nvar objectHas = require('../internals/has');\nvar shared = require('../internals/shared-store');\nvar sharedKey = require('../internals/shared-key');\nvar hiddenKeys = require('../internals/hidden-keys');\n\nvar OBJECT_ALREADY_INITIALIZED = 'Object already initialized';\nvar WeakMap = global.WeakMap;\nvar set, get, has;\n\nvar enforce = function (it) {\n return has(it) ? get(it) : set(it, {});\n};\n\nvar getterFor = function (TYPE) {\n return function (it) {\n var state;\n if (!isObject(it) || (state = get(it)).type !== TYPE) {\n throw TypeError('Incompatible receiver, ' + TYPE + ' required');\n } return state;\n };\n};\n\nif (NATIVE_WEAK_MAP || shared.state) {\n var store = shared.state || (shared.state = new WeakMap());\n var wmget = store.get;\n var wmhas = store.has;\n var wmset = store.set;\n set = function (it, metadata) {\n if (wmhas.call(store, it)) throw new TypeError(OBJECT_ALREADY_INITIALIZED);\n metadata.facade = it;\n wmset.call(store, it, metadata);\n return metadata;\n };\n get = function (it) {\n return wmget.call(store, it) || {};\n };\n has = function (it) {\n return wmhas.call(store, it);\n };\n} else {\n var STATE = sharedKey('state');\n hiddenKeys[STATE] = true;\n set = function (it, metadata) {\n if (objectHas(it, STATE)) throw new TypeError(OBJECT_ALREADY_INITIALIZED);\n metadata.facade = it;\n createNonEnumerableProperty(it, STATE, metadata);\n return metadata;\n };\n get = function (it) {\n return objectHas(it, STATE) ? it[STATE] : {};\n };\n has = function (it) {\n return objectHas(it, STATE);\n };\n}\n\nmodule.exports = {\n set: set,\n get: get,\n has: has,\n enforce: enforce,\n getterFor: getterFor\n};\n","var wellKnownSymbol = require('../internals/well-known-symbol');\nvar Iterators = require('../internals/iterators');\n\nvar ITERATOR = wellKnownSymbol('iterator');\nvar ArrayPrototype = Array.prototype;\n\n// check on default Array iterator\nmodule.exports = function (it) {\n return it !== undefined && (Iterators.Array === it || ArrayPrototype[ITERATOR] === it);\n};\n","var fails = require('../internals/fails');\n\nvar replacement = /#|\\.prototype\\./;\n\nvar isForced = function (feature, detection) {\n var value = data[normalize(feature)];\n return value == POLYFILL ? true\n : value == NATIVE ? false\n : typeof detection == 'function' ? fails(detection)\n : !!detection;\n};\n\nvar normalize = isForced.normalize = function (string) {\n return String(string).replace(replacement, '.').toLowerCase();\n};\n\nvar data = isForced.data = {};\nvar NATIVE = isForced.NATIVE = 'N';\nvar POLYFILL = isForced.POLYFILL = 'P';\n\nmodule.exports = isForced;\n","module.exports = function (it) {\n return typeof it === 'object' ? it !== null : typeof it === 'function';\n};\n","module.exports = true;\n","var anObject = require('../internals/an-object');\nvar isArrayIteratorMethod = require('../internals/is-array-iterator-method');\nvar toLength = require('../internals/to-length');\nvar bind = require('../internals/function-bind-context');\nvar getIteratorMethod = require('../internals/get-iterator-method');\nvar iteratorClose = require('../internals/iterator-close');\n\nvar Result = function (stopped, result) {\n this.stopped = stopped;\n this.result = result;\n};\n\nmodule.exports = function (iterable, unboundFunction, options) {\n var that = options && options.that;\n var AS_ENTRIES = !!(options && options.AS_ENTRIES);\n var IS_ITERATOR = !!(options && options.IS_ITERATOR);\n var INTERRUPTED = !!(options && options.INTERRUPTED);\n var fn = bind(unboundFunction, that, 1 + AS_ENTRIES + INTERRUPTED);\n var iterator, iterFn, index, length, result, next, step;\n\n var stop = function (condition) {\n if (iterator) iteratorClose(iterator);\n return new Result(true, condition);\n };\n\n var callFn = function (value) {\n if (AS_ENTRIES) {\n anObject(value);\n return INTERRUPTED ? fn(value[0], value[1], stop) : fn(value[0], value[1]);\n } return INTERRUPTED ? fn(value, stop) : fn(value);\n };\n\n if (IS_ITERATOR) {\n iterator = iterable;\n } else {\n iterFn = getIteratorMethod(iterable);\n if (typeof iterFn != 'function') throw TypeError('Target is not iterable');\n // optimisation for array iterators\n if (isArrayIteratorMethod(iterFn)) {\n for (index = 0, length = toLength(iterable.length); length > index; index++) {\n result = callFn(iterable[index]);\n if (result && result instanceof Result) return result;\n } return new Result(false);\n }\n iterator = iterFn.call(iterable);\n }\n\n next = iterator.next;\n while (!(step = next.call(iterator)).done) {\n try {\n result = callFn(step.value);\n } catch (error) {\n iteratorClose(iterator);\n throw error;\n }\n if (typeof result == 'object' && result && result instanceof Result) return result;\n } return new Result(false);\n};\n","var anObject = require('../internals/an-object');\n\nmodule.exports = function (iterator) {\n var returnMethod = iterator['return'];\n if (returnMethod !== undefined) {\n return anObject(returnMethod.call(iterator)).value;\n }\n};\n","'use strict';\nvar fails = require('../internals/fails');\nvar getPrototypeOf = require('../internals/object-get-prototype-of');\nvar createNonEnumerableProperty = require('../internals/create-non-enumerable-property');\nvar has = require('../internals/has');\nvar wellKnownSymbol = require('../internals/well-known-symbol');\nvar IS_PURE = require('../internals/is-pure');\n\nvar ITERATOR = wellKnownSymbol('iterator');\nvar BUGGY_SAFARI_ITERATORS = false;\n\nvar returnThis = function () { return this; };\n\n// `%IteratorPrototype%` object\n// https://tc39.es/ecma262/#sec-%iteratorprototype%-object\nvar IteratorPrototype, PrototypeOfArrayIteratorPrototype, arrayIterator;\n\n/* eslint-disable es/no-array-prototype-keys -- safe */\nif ([].keys) {\n arrayIterator = [].keys();\n // Safari 8 has buggy iterators w/o `next`\n if (!('next' in arrayIterator)) BUGGY_SAFARI_ITERATORS = true;\n else {\n PrototypeOfArrayIteratorPrototype = getPrototypeOf(getPrototypeOf(arrayIterator));\n if (PrototypeOfArrayIteratorPrototype !== Object.prototype) IteratorPrototype = PrototypeOfArrayIteratorPrototype;\n }\n}\n\nvar NEW_ITERATOR_PROTOTYPE = IteratorPrototype == undefined || fails(function () {\n var test = {};\n // FF44- legacy iterators case\n return IteratorPrototype[ITERATOR].call(test) !== test;\n});\n\nif (NEW_ITERATOR_PROTOTYPE) IteratorPrototype = {};\n\n// 25.1.2.1.1 %IteratorPrototype%[@@iterator]()\nif ((!IS_PURE || NEW_ITERATOR_PROTOTYPE) && !has(IteratorPrototype, ITERATOR)) {\n createNonEnumerableProperty(IteratorPrototype, ITERATOR, returnThis);\n}\n\nmodule.exports = {\n IteratorPrototype: IteratorPrototype,\n BUGGY_SAFARI_ITERATORS: BUGGY_SAFARI_ITERATORS\n};\n","module.exports = {};\n","var global = require('../internals/global');\nvar getOwnPropertyDescriptor = require('../internals/object-get-own-property-descriptor').f;\nvar macrotask = require('../internals/task').set;\nvar IS_IOS = require('../internals/engine-is-ios');\nvar IS_WEBOS_WEBKIT = require('../internals/engine-is-webos-webkit');\nvar IS_NODE = require('../internals/engine-is-node');\n\nvar MutationObserver = global.MutationObserver || global.WebKitMutationObserver;\nvar document = global.document;\nvar process = global.process;\nvar Promise = global.Promise;\n// Node.js 11 shows ExperimentalWarning on getting `queueMicrotask`\nvar queueMicrotaskDescriptor = getOwnPropertyDescriptor(global, 'queueMicrotask');\nvar queueMicrotask = queueMicrotaskDescriptor && queueMicrotaskDescriptor.value;\n\nvar flush, head, last, notify, toggle, node, promise, then;\n\n// modern engines have queueMicrotask method\nif (!queueMicrotask) {\n flush = function () {\n var parent, fn;\n if (IS_NODE && (parent = process.domain)) parent.exit();\n while (head) {\n fn = head.fn;\n head = head.next;\n try {\n fn();\n } catch (error) {\n if (head) notify();\n else last = undefined;\n throw error;\n }\n } last = undefined;\n if (parent) parent.enter();\n };\n\n // browsers with MutationObserver, except iOS - https://github.com/zloirock/core-js/issues/339\n // also except WebOS Webkit https://github.com/zloirock/core-js/issues/898\n if (!IS_IOS && !IS_NODE && !IS_WEBOS_WEBKIT && MutationObserver && document) {\n toggle = true;\n node = document.createTextNode('');\n new MutationObserver(flush).observe(node, { characterData: true });\n notify = function () {\n node.data = toggle = !toggle;\n };\n // environments with maybe non-completely correct, but existent Promise\n } else if (Promise && Promise.resolve) {\n // Promise.resolve without an argument throws an error in LG WebOS 2\n promise = Promise.resolve(undefined);\n // workaround of WebKit ~ iOS Safari 10.1 bug\n promise.constructor = Promise;\n then = promise.then;\n notify = function () {\n then.call(promise, flush);\n };\n // Node.js without promises\n } else if (IS_NODE) {\n notify = function () {\n process.nextTick(flush);\n };\n // for other environments - macrotask based on:\n // - setImmediate\n // - MessageChannel\n // - window.postMessag\n // - onreadystatechange\n // - setTimeout\n } else {\n notify = function () {\n // strange IE + webpack dev server bug - use .call(global)\n macrotask.call(global, flush);\n };\n }\n}\n\nmodule.exports = queueMicrotask || function (fn) {\n var task = { fn: fn, next: undefined };\n if (last) last.next = task;\n if (!head) {\n head = task;\n notify();\n } last = task;\n};\n","var global = require('../internals/global');\n\nmodule.exports = global.Promise;\n","/* eslint-disable es/no-symbol -- required for testing */\nvar V8_VERSION = require('../internals/engine-v8-version');\nvar fails = require('../internals/fails');\n\n// eslint-disable-next-line es/no-object-getownpropertysymbols -- required for testing\nmodule.exports = !!Object.getOwnPropertySymbols && !fails(function () {\n return !String(Symbol()) ||\n // Chrome 38 Symbol has incorrect toString conversion\n // Chrome 38-40 symbols are not inherited from DOM collections prototypes to instances\n !Symbol.sham && V8_VERSION && V8_VERSION < 41;\n});\n","var global = require('../internals/global');\nvar inspectSource = require('../internals/inspect-source');\n\nvar WeakMap = global.WeakMap;\n\nmodule.exports = typeof WeakMap === 'function' && /native code/.test(inspectSource(WeakMap));\n","'use strict';\nvar aFunction = require('../internals/a-function');\n\nvar PromiseCapability = function (C) {\n var resolve, reject;\n this.promise = new C(function ($$resolve, $$reject) {\n if (resolve !== undefined || reject !== undefined) throw TypeError('Bad Promise constructor');\n resolve = $$resolve;\n reject = $$reject;\n });\n this.resolve = aFunction(resolve);\n this.reject = aFunction(reject);\n};\n\n// 25.4.1.5 NewPromiseCapability(C)\nmodule.exports.f = function (C) {\n return new PromiseCapability(C);\n};\n","var anObject = require('../internals/an-object');\nvar defineProperties = require('../internals/object-define-properties');\nvar enumBugKeys = require('../internals/enum-bug-keys');\nvar hiddenKeys = require('../internals/hidden-keys');\nvar html = require('../internals/html');\nvar documentCreateElement = require('../internals/document-create-element');\nvar sharedKey = require('../internals/shared-key');\n\nvar GT = '>';\nvar LT = '<';\nvar PROTOTYPE = 'prototype';\nvar SCRIPT = 'script';\nvar IE_PROTO = sharedKey('IE_PROTO');\n\nvar EmptyConstructor = function () { /* empty */ };\n\nvar scriptTag = function (content) {\n return LT + SCRIPT + GT + content + LT + '/' + SCRIPT + GT;\n};\n\n// Create object with fake `null` prototype: use ActiveX Object with cleared prototype\nvar NullProtoObjectViaActiveX = function (activeXDocument) {\n activeXDocument.write(scriptTag(''));\n activeXDocument.close();\n var temp = activeXDocument.parentWindow.Object;\n activeXDocument = null; // avoid memory leak\n return temp;\n};\n\n// Create object with fake `null` prototype: use iframe Object with cleared prototype\nvar NullProtoObjectViaIFrame = function () {\n // Thrash, waste and sodomy: IE GC bug\n var iframe = documentCreateElement('iframe');\n var JS = 'java' + SCRIPT + ':';\n var iframeDocument;\n iframe.style.display = 'none';\n html.appendChild(iframe);\n // https://github.com/zloirock/core-js/issues/475\n iframe.src = String(JS);\n iframeDocument = iframe.contentWindow.document;\n iframeDocument.open();\n iframeDocument.write(scriptTag('document.F=Object'));\n iframeDocument.close();\n return iframeDocument.F;\n};\n\n// Check for document.domain and active x support\n// No need to use active x approach when document.domain is not set\n// see https://github.com/es-shims/es5-shim/issues/150\n// variation of https://github.com/kitcambridge/es5-shim/commit/4f738ac066346\n// avoid IE GC bug\nvar activeXDocument;\nvar NullProtoObject = function () {\n try {\n /* global ActiveXObject -- old IE */\n activeXDocument = document.domain && new ActiveXObject('htmlfile');\n } catch (error) { /* ignore */ }\n NullProtoObject = activeXDocument ? NullProtoObjectViaActiveX(activeXDocument) : NullProtoObjectViaIFrame();\n var length = enumBugKeys.length;\n while (length--) delete NullProtoObject[PROTOTYPE][enumBugKeys[length]];\n return NullProtoObject();\n};\n\nhiddenKeys[IE_PROTO] = true;\n\n// `Object.create` method\n// https://tc39.es/ecma262/#sec-object.create\nmodule.exports = Object.create || function create(O, Properties) {\n var result;\n if (O !== null) {\n EmptyConstructor[PROTOTYPE] = anObject(O);\n result = new EmptyConstructor();\n EmptyConstructor[PROTOTYPE] = null;\n // add \"__proto__\" for Object.getPrototypeOf polyfill\n result[IE_PROTO] = O;\n } else result = NullProtoObject();\n return Properties === undefined ? result : defineProperties(result, Properties);\n};\n","var DESCRIPTORS = require('../internals/descriptors');\nvar definePropertyModule = require('../internals/object-define-property');\nvar anObject = require('../internals/an-object');\nvar objectKeys = require('../internals/object-keys');\n\n// `Object.defineProperties` method\n// https://tc39.es/ecma262/#sec-object.defineproperties\n// eslint-disable-next-line es/no-object-defineproperties -- safe\nmodule.exports = DESCRIPTORS ? Object.defineProperties : function defineProperties(O, Properties) {\n anObject(O);\n var keys = objectKeys(Properties);\n var length = keys.length;\n var index = 0;\n var key;\n while (length > index) definePropertyModule.f(O, key = keys[index++], Properties[key]);\n return O;\n};\n","var DESCRIPTORS = require('../internals/descriptors');\nvar IE8_DOM_DEFINE = require('../internals/ie8-dom-define');\nvar anObject = require('../internals/an-object');\nvar toPrimitive = require('../internals/to-primitive');\n\n// eslint-disable-next-line es/no-object-defineproperty -- safe\nvar $defineProperty = Object.defineProperty;\n\n// `Object.defineProperty` method\n// https://tc39.es/ecma262/#sec-object.defineproperty\nexports.f = DESCRIPTORS ? $defineProperty : function defineProperty(O, P, Attributes) {\n anObject(O);\n P = toPrimitive(P, true);\n anObject(Attributes);\n if (IE8_DOM_DEFINE) try {\n return $defineProperty(O, P, Attributes);\n } catch (error) { /* empty */ }\n if ('get' in Attributes || 'set' in Attributes) throw TypeError('Accessors not supported');\n if ('value' in Attributes) O[P] = Attributes.value;\n return O;\n};\n","var DESCRIPTORS = require('../internals/descriptors');\nvar propertyIsEnumerableModule = require('../internals/object-property-is-enumerable');\nvar createPropertyDescriptor = require('../internals/create-property-descriptor');\nvar toIndexedObject = require('../internals/to-indexed-object');\nvar toPrimitive = require('../internals/to-primitive');\nvar has = require('../internals/has');\nvar IE8_DOM_DEFINE = require('../internals/ie8-dom-define');\n\n// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe\nvar $getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;\n\n// `Object.getOwnPropertyDescriptor` method\n// https://tc39.es/ecma262/#sec-object.getownpropertydescriptor\nexports.f = DESCRIPTORS ? $getOwnPropertyDescriptor : function getOwnPropertyDescriptor(O, P) {\n O = toIndexedObject(O);\n P = toPrimitive(P, true);\n if (IE8_DOM_DEFINE) try {\n return $getOwnPropertyDescriptor(O, P);\n } catch (error) { /* empty */ }\n if (has(O, P)) return createPropertyDescriptor(!propertyIsEnumerableModule.f.call(O, P), O[P]);\n};\n","var has = require('../internals/has');\nvar toObject = require('../internals/to-object');\nvar sharedKey = require('../internals/shared-key');\nvar CORRECT_PROTOTYPE_GETTER = require('../internals/correct-prototype-getter');\n\nvar IE_PROTO = sharedKey('IE_PROTO');\nvar ObjectPrototype = Object.prototype;\n\n// `Object.getPrototypeOf` method\n// https://tc39.es/ecma262/#sec-object.getprototypeof\n// eslint-disable-next-line es/no-object-getprototypeof -- safe\nmodule.exports = CORRECT_PROTOTYPE_GETTER ? Object.getPrototypeOf : function (O) {\n O = toObject(O);\n if (has(O, IE_PROTO)) return O[IE_PROTO];\n if (typeof O.constructor == 'function' && O instanceof O.constructor) {\n return O.constructor.prototype;\n } return O instanceof Object ? ObjectPrototype : null;\n};\n","var has = require('../internals/has');\nvar toIndexedObject = require('../internals/to-indexed-object');\nvar indexOf = require('../internals/array-includes').indexOf;\nvar hiddenKeys = require('../internals/hidden-keys');\n\nmodule.exports = function (object, names) {\n var O = toIndexedObject(object);\n var i = 0;\n var result = [];\n var key;\n for (key in O) !has(hiddenKeys, key) && has(O, key) && result.push(key);\n // Don't enum bug & hidden keys\n while (names.length > i) if (has(O, key = names[i++])) {\n ~indexOf(result, key) || result.push(key);\n }\n return result;\n};\n","var internalObjectKeys = require('../internals/object-keys-internal');\nvar enumBugKeys = require('../internals/enum-bug-keys');\n\n// `Object.keys` method\n// https://tc39.es/ecma262/#sec-object.keys\n// eslint-disable-next-line es/no-object-keys -- safe\nmodule.exports = Object.keys || function keys(O) {\n return internalObjectKeys(O, enumBugKeys);\n};\n","'use strict';\nvar $propertyIsEnumerable = {}.propertyIsEnumerable;\n// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe\nvar getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;\n\n// Nashorn ~ JDK8 bug\nvar NASHORN_BUG = getOwnPropertyDescriptor && !$propertyIsEnumerable.call({ 1: 2 }, 1);\n\n// `Object.prototype.propertyIsEnumerable` method implementation\n// https://tc39.es/ecma262/#sec-object.prototype.propertyisenumerable\nexports.f = NASHORN_BUG ? function propertyIsEnumerable(V) {\n var descriptor = getOwnPropertyDescriptor(this, V);\n return !!descriptor && descriptor.enumerable;\n} : $propertyIsEnumerable;\n","/* eslint-disable no-proto -- safe */\nvar anObject = require('../internals/an-object');\nvar aPossiblePrototype = require('../internals/a-possible-prototype');\n\n// `Object.setPrototypeOf` method\n// https://tc39.es/ecma262/#sec-object.setprototypeof\n// Works with __proto__ only. Old v8 can't work with null proto objects.\n// eslint-disable-next-line es/no-object-setprototypeof -- safe\nmodule.exports = Object.setPrototypeOf || ('__proto__' in {} ? function () {\n var CORRECT_SETTER = false;\n var test = {};\n var setter;\n try {\n // eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe\n setter = Object.getOwnPropertyDescriptor(Object.prototype, '__proto__').set;\n setter.call(test, []);\n CORRECT_SETTER = test instanceof Array;\n } catch (error) { /* empty */ }\n return function setPrototypeOf(O, proto) {\n anObject(O);\n aPossiblePrototype(proto);\n if (CORRECT_SETTER) setter.call(O, proto);\n else O.__proto__ = proto;\n return O;\n };\n}() : undefined);\n","'use strict';\nvar TO_STRING_TAG_SUPPORT = require('../internals/to-string-tag-support');\nvar classof = require('../internals/classof');\n\n// `Object.prototype.toString` method implementation\n// https://tc39.es/ecma262/#sec-object.prototype.tostring\nmodule.exports = TO_STRING_TAG_SUPPORT ? {}.toString : function toString() {\n return '[object ' + classof(this) + ']';\n};\n","module.exports = {};\n","module.exports = function (exec) {\n try {\n return { error: false, value: exec() };\n } catch (error) {\n return { error: true, value: error };\n }\n};\n","var anObject = require('../internals/an-object');\nvar isObject = require('../internals/is-object');\nvar newPromiseCapability = require('../internals/new-promise-capability');\n\nmodule.exports = function (C, x) {\n anObject(C);\n if (isObject(x) && x.constructor === C) return x;\n var promiseCapability = newPromiseCapability.f(C);\n var resolve = promiseCapability.resolve;\n resolve(x);\n return promiseCapability.promise;\n};\n","var redefine = require('../internals/redefine');\n\nmodule.exports = function (target, src, options) {\n for (var key in src) {\n if (options && options.unsafe && target[key]) target[key] = src[key];\n else redefine(target, key, src[key], options);\n } return target;\n};\n","var createNonEnumerableProperty = require('../internals/create-non-enumerable-property');\n\nmodule.exports = function (target, key, value, options) {\n if (options && options.enumerable) target[key] = value;\n else createNonEnumerableProperty(target, key, value);\n};\n","// `RequireObjectCoercible` abstract operation\n// https://tc39.es/ecma262/#sec-requireobjectcoercible\nmodule.exports = function (it) {\n if (it == undefined) throw TypeError(\"Can't call method on \" + it);\n return it;\n};\n","var global = require('../internals/global');\nvar createNonEnumerableProperty = require('../internals/create-non-enumerable-property');\n\nmodule.exports = function (key, value) {\n try {\n createNonEnumerableProperty(global, key, value);\n } catch (error) {\n global[key] = value;\n } return value;\n};\n","'use strict';\nvar getBuiltIn = require('../internals/get-built-in');\nvar definePropertyModule = require('../internals/object-define-property');\nvar wellKnownSymbol = require('../internals/well-known-symbol');\nvar DESCRIPTORS = require('../internals/descriptors');\n\nvar SPECIES = wellKnownSymbol('species');\n\nmodule.exports = function (CONSTRUCTOR_NAME) {\n var Constructor = getBuiltIn(CONSTRUCTOR_NAME);\n var defineProperty = definePropertyModule.f;\n\n if (DESCRIPTORS && Constructor && !Constructor[SPECIES]) {\n defineProperty(Constructor, SPECIES, {\n configurable: true,\n get: function () { return this; }\n });\n }\n};\n","var TO_STRING_TAG_SUPPORT = require('../internals/to-string-tag-support');\nvar defineProperty = require('../internals/object-define-property').f;\nvar createNonEnumerableProperty = require('../internals/create-non-enumerable-property');\nvar has = require('../internals/has');\nvar toString = require('../internals/object-to-string');\nvar wellKnownSymbol = require('../internals/well-known-symbol');\n\nvar TO_STRING_TAG = wellKnownSymbol('toStringTag');\n\nmodule.exports = function (it, TAG, STATIC, SET_METHOD) {\n if (it) {\n var target = STATIC ? it : it.prototype;\n if (!has(target, TO_STRING_TAG)) {\n defineProperty(target, TO_STRING_TAG, { configurable: true, value: TAG });\n }\n if (SET_METHOD && !TO_STRING_TAG_SUPPORT) {\n createNonEnumerableProperty(target, 'toString', toString);\n }\n }\n};\n","var shared = require('../internals/shared');\nvar uid = require('../internals/uid');\n\nvar keys = shared('keys');\n\nmodule.exports = function (key) {\n return keys[key] || (keys[key] = uid(key));\n};\n","var global = require('../internals/global');\nvar setGlobal = require('../internals/set-global');\n\nvar SHARED = '__core-js_shared__';\nvar store = global[SHARED] || setGlobal(SHARED, {});\n\nmodule.exports = store;\n","var IS_PURE = require('../internals/is-pure');\nvar store = require('../internals/shared-store');\n\n(module.exports = function (key, value) {\n return store[key] || (store[key] = value !== undefined ? value : {});\n})('versions', []).push({\n version: '3.13.0',\n mode: IS_PURE ? 'pure' : 'global',\n copyright: '© 2021 Denis Pushkarev (zloirock.ru)'\n});\n","var anObject = require('../internals/an-object');\nvar aFunction = require('../internals/a-function');\nvar wellKnownSymbol = require('../internals/well-known-symbol');\n\nvar SPECIES = wellKnownSymbol('species');\n\n// `SpeciesConstructor` abstract operation\n// https://tc39.es/ecma262/#sec-speciesconstructor\nmodule.exports = function (O, defaultConstructor) {\n var C = anObject(O).constructor;\n var S;\n return C === undefined || (S = anObject(C)[SPECIES]) == undefined ? defaultConstructor : aFunction(S);\n};\n","var toInteger = require('../internals/to-integer');\nvar requireObjectCoercible = require('../internals/require-object-coercible');\n\n// `String.prototype.{ codePointAt, at }` methods implementation\nvar createMethod = function (CONVERT_TO_STRING) {\n return function ($this, pos) {\n var S = String(requireObjectCoercible($this));\n var position = toInteger(pos);\n var size = S.length;\n var first, second;\n if (position < 0 || position >= size) return CONVERT_TO_STRING ? '' : undefined;\n first = S.charCodeAt(position);\n return first < 0xD800 || first > 0xDBFF || position + 1 === size\n || (second = S.charCodeAt(position + 1)) < 0xDC00 || second > 0xDFFF\n ? CONVERT_TO_STRING ? S.charAt(position) : first\n : CONVERT_TO_STRING ? S.slice(position, position + 2) : (first - 0xD800 << 10) + (second - 0xDC00) + 0x10000;\n };\n};\n\nmodule.exports = {\n // `String.prototype.codePointAt` method\n // https://tc39.es/ecma262/#sec-string.prototype.codepointat\n codeAt: createMethod(false),\n // `String.prototype.at` method\n // https://github.com/mathiasbynens/String.prototype.at\n charAt: createMethod(true)\n};\n","var global = require('../internals/global');\nvar fails = require('../internals/fails');\nvar bind = require('../internals/function-bind-context');\nvar html = require('../internals/html');\nvar createElement = require('../internals/document-create-element');\nvar IS_IOS = require('../internals/engine-is-ios');\nvar IS_NODE = require('../internals/engine-is-node');\n\nvar location = global.location;\nvar set = global.setImmediate;\nvar clear = global.clearImmediate;\nvar process = global.process;\nvar MessageChannel = global.MessageChannel;\nvar Dispatch = global.Dispatch;\nvar counter = 0;\nvar queue = {};\nvar ONREADYSTATECHANGE = 'onreadystatechange';\nvar defer, channel, port;\n\nvar run = function (id) {\n // eslint-disable-next-line no-prototype-builtins -- safe\n if (queue.hasOwnProperty(id)) {\n var fn = queue[id];\n delete queue[id];\n fn();\n }\n};\n\nvar runner = function (id) {\n return function () {\n run(id);\n };\n};\n\nvar listener = function (event) {\n run(event.data);\n};\n\nvar post = function (id) {\n // old engines have not location.origin\n global.postMessage(id + '', location.protocol + '//' + location.host);\n};\n\n// Node.js 0.9+ & IE10+ has setImmediate, otherwise:\nif (!set || !clear) {\n set = function setImmediate(fn) {\n var args = [];\n var i = 1;\n while (arguments.length > i) args.push(arguments[i++]);\n queue[++counter] = function () {\n // eslint-disable-next-line no-new-func -- spec requirement\n (typeof fn == 'function' ? fn : Function(fn)).apply(undefined, args);\n };\n defer(counter);\n return counter;\n };\n clear = function clearImmediate(id) {\n delete queue[id];\n };\n // Node.js 0.8-\n if (IS_NODE) {\n defer = function (id) {\n process.nextTick(runner(id));\n };\n // Sphere (JS game engine) Dispatch API\n } else if (Dispatch && Dispatch.now) {\n defer = function (id) {\n Dispatch.now(runner(id));\n };\n // Browsers with MessageChannel, includes WebWorkers\n // except iOS - https://github.com/zloirock/core-js/issues/624\n } else if (MessageChannel && !IS_IOS) {\n channel = new MessageChannel();\n port = channel.port2;\n channel.port1.onmessage = listener;\n defer = bind(port.postMessage, port, 1);\n // Browsers with postMessage, skip WebWorkers\n // IE8 has postMessage, but it's sync & typeof its postMessage is 'object'\n } else if (\n global.addEventListener &&\n typeof postMessage == 'function' &&\n !global.importScripts &&\n location && location.protocol !== 'file:' &&\n !fails(post)\n ) {\n defer = post;\n global.addEventListener('message', listener, false);\n // IE8-\n } else if (ONREADYSTATECHANGE in createElement('script')) {\n defer = function (id) {\n html.appendChild(createElement('script'))[ONREADYSTATECHANGE] = function () {\n html.removeChild(this);\n run(id);\n };\n };\n // Rest old browsers\n } else {\n defer = function (id) {\n setTimeout(runner(id), 0);\n };\n }\n}\n\nmodule.exports = {\n set: set,\n clear: clear\n};\n","var toInteger = require('../internals/to-integer');\n\nvar max = Math.max;\nvar min = Math.min;\n\n// Helper for a popular repeating case of the spec:\n// Let integer be ? ToInteger(index).\n// If integer < 0, let result be max((length + integer), 0); else let result be min(integer, length).\nmodule.exports = function (index, length) {\n var integer = toInteger(index);\n return integer < 0 ? max(integer + length, 0) : min(integer, length);\n};\n","// toObject with fallback for non-array-like ES3 strings\nvar IndexedObject = require('../internals/indexed-object');\nvar requireObjectCoercible = require('../internals/require-object-coercible');\n\nmodule.exports = function (it) {\n return IndexedObject(requireObjectCoercible(it));\n};\n","var ceil = Math.ceil;\nvar floor = Math.floor;\n\n// `ToInteger` abstract operation\n// https://tc39.es/ecma262/#sec-tointeger\nmodule.exports = function (argument) {\n return isNaN(argument = +argument) ? 0 : (argument > 0 ? floor : ceil)(argument);\n};\n","var toInteger = require('../internals/to-integer');\n\nvar min = Math.min;\n\n// `ToLength` abstract operation\n// https://tc39.es/ecma262/#sec-tolength\nmodule.exports = function (argument) {\n return argument > 0 ? min(toInteger(argument), 0x1FFFFFFFFFFFFF) : 0; // 2 ** 53 - 1 == 9007199254740991\n};\n","var requireObjectCoercible = require('../internals/require-object-coercible');\n\n// `ToObject` abstract operation\n// https://tc39.es/ecma262/#sec-toobject\nmodule.exports = function (argument) {\n return Object(requireObjectCoercible(argument));\n};\n","var isObject = require('../internals/is-object');\n\n// `ToPrimitive` abstract operation\n// https://tc39.es/ecma262/#sec-toprimitive\n// instead of the ES6 spec version, we didn't implement @@toPrimitive case\n// and the second argument - flag - preferred type is a string\nmodule.exports = function (input, PREFERRED_STRING) {\n if (!isObject(input)) return input;\n var fn, val;\n if (PREFERRED_STRING && typeof (fn = input.toString) == 'function' && !isObject(val = fn.call(input))) return val;\n if (typeof (fn = input.valueOf) == 'function' && !isObject(val = fn.call(input))) return val;\n if (!PREFERRED_STRING && typeof (fn = input.toString) == 'function' && !isObject(val = fn.call(input))) return val;\n throw TypeError(\"Can't convert object to primitive value\");\n};\n","var wellKnownSymbol = require('../internals/well-known-symbol');\n\nvar TO_STRING_TAG = wellKnownSymbol('toStringTag');\nvar test = {};\n\ntest[TO_STRING_TAG] = 'z';\n\nmodule.exports = String(test) === '[object z]';\n","var id = 0;\nvar postfix = Math.random();\n\nmodule.exports = function (key) {\n return 'Symbol(' + String(key === undefined ? '' : key) + ')_' + (++id + postfix).toString(36);\n};\n","/* eslint-disable es/no-symbol -- required for testing */\nvar NATIVE_SYMBOL = require('../internals/native-symbol');\n\nmodule.exports = NATIVE_SYMBOL\n && !Symbol.sham\n && typeof Symbol.iterator == 'symbol';\n","var global = require('../internals/global');\nvar shared = require('../internals/shared');\nvar has = require('../internals/has');\nvar uid = require('../internals/uid');\nvar NATIVE_SYMBOL = require('../internals/native-symbol');\nvar USE_SYMBOL_AS_UID = require('../internals/use-symbol-as-uid');\n\nvar WellKnownSymbolsStore = shared('wks');\nvar Symbol = global.Symbol;\nvar createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol : Symbol && Symbol.withoutSetter || uid;\n\nmodule.exports = function (name) {\n if (!has(WellKnownSymbolsStore, name) || !(NATIVE_SYMBOL || typeof WellKnownSymbolsStore[name] == 'string')) {\n if (NATIVE_SYMBOL && has(Symbol, name)) {\n WellKnownSymbolsStore[name] = Symbol[name];\n } else {\n WellKnownSymbolsStore[name] = createWellKnownSymbol('Symbol.' + name);\n }\n } return WellKnownSymbolsStore[name];\n};\n","'use strict';\nvar $ = require('../internals/export');\nvar getPrototypeOf = require('../internals/object-get-prototype-of');\nvar setPrototypeOf = require('../internals/object-set-prototype-of');\nvar create = require('../internals/object-create');\nvar createNonEnumerableProperty = require('../internals/create-non-enumerable-property');\nvar createPropertyDescriptor = require('../internals/create-property-descriptor');\nvar iterate = require('../internals/iterate');\n\nvar $AggregateError = function AggregateError(errors, message) {\n var that = this;\n if (!(that instanceof $AggregateError)) return new $AggregateError(errors, message);\n if (setPrototypeOf) {\n // eslint-disable-next-line unicorn/error-message -- expected\n that = setPrototypeOf(new Error(undefined), getPrototypeOf(that));\n }\n if (message !== undefined) createNonEnumerableProperty(that, 'message', String(message));\n var errorsArray = [];\n iterate(errors, errorsArray.push, { that: errorsArray });\n createNonEnumerableProperty(that, 'errors', errorsArray);\n return that;\n};\n\n$AggregateError.prototype = create(Error.prototype, {\n constructor: createPropertyDescriptor(5, $AggregateError),\n message: createPropertyDescriptor(5, ''),\n name: createPropertyDescriptor(5, 'AggregateError')\n});\n\n// `AggregateError` constructor\n// https://tc39.es/ecma262/#sec-aggregate-error-constructor\n$({ global: true }, {\n AggregateError: $AggregateError\n});\n","'use strict';\nvar toIndexedObject = require('../internals/to-indexed-object');\nvar addToUnscopables = require('../internals/add-to-unscopables');\nvar Iterators = require('../internals/iterators');\nvar InternalStateModule = require('../internals/internal-state');\nvar defineIterator = require('../internals/define-iterator');\n\nvar ARRAY_ITERATOR = 'Array Iterator';\nvar setInternalState = InternalStateModule.set;\nvar getInternalState = InternalStateModule.getterFor(ARRAY_ITERATOR);\n\n// `Array.prototype.entries` method\n// https://tc39.es/ecma262/#sec-array.prototype.entries\n// `Array.prototype.keys` method\n// https://tc39.es/ecma262/#sec-array.prototype.keys\n// `Array.prototype.values` method\n// https://tc39.es/ecma262/#sec-array.prototype.values\n// `Array.prototype[@@iterator]` method\n// https://tc39.es/ecma262/#sec-array.prototype-@@iterator\n// `CreateArrayIterator` internal method\n// https://tc39.es/ecma262/#sec-createarrayiterator\nmodule.exports = defineIterator(Array, 'Array', function (iterated, kind) {\n setInternalState(this, {\n type: ARRAY_ITERATOR,\n target: toIndexedObject(iterated), // target\n index: 0, // next index\n kind: kind // kind\n });\n// `%ArrayIteratorPrototype%.next` method\n// https://tc39.es/ecma262/#sec-%arrayiteratorprototype%.next\n}, function () {\n var state = getInternalState(this);\n var target = state.target;\n var kind = state.kind;\n var index = state.index++;\n if (!target || index >= target.length) {\n state.target = undefined;\n return { value: undefined, done: true };\n }\n if (kind == 'keys') return { value: index, done: false };\n if (kind == 'values') return { value: target[index], done: false };\n return { value: [index, target[index]], done: false };\n}, 'values');\n\n// argumentsList[@@iterator] is %ArrayProto_values%\n// https://tc39.es/ecma262/#sec-createunmappedargumentsobject\n// https://tc39.es/ecma262/#sec-createmappedargumentsobject\nIterators.Arguments = Iterators.Array;\n\n// https://tc39.es/ecma262/#sec-array.prototype-@@unscopables\naddToUnscopables('keys');\naddToUnscopables('values');\naddToUnscopables('entries');\n","// empty\n","'use strict';\nvar $ = require('../internals/export');\nvar aFunction = require('../internals/a-function');\nvar newPromiseCapabilityModule = require('../internals/new-promise-capability');\nvar perform = require('../internals/perform');\nvar iterate = require('../internals/iterate');\n\n// `Promise.allSettled` method\n// https://tc39.es/ecma262/#sec-promise.allsettled\n$({ target: 'Promise', stat: true }, {\n allSettled: function allSettled(iterable) {\n var C = this;\n var capability = newPromiseCapabilityModule.f(C);\n var resolve = capability.resolve;\n var reject = capability.reject;\n var result = perform(function () {\n var promiseResolve = aFunction(C.resolve);\n var values = [];\n var counter = 0;\n var remaining = 1;\n iterate(iterable, function (promise) {\n var index = counter++;\n var alreadyCalled = false;\n values.push(undefined);\n remaining++;\n promiseResolve.call(C, promise).then(function (value) {\n if (alreadyCalled) return;\n alreadyCalled = true;\n values[index] = { status: 'fulfilled', value: value };\n --remaining || resolve(values);\n }, function (error) {\n if (alreadyCalled) return;\n alreadyCalled = true;\n values[index] = { status: 'rejected', reason: error };\n --remaining || resolve(values);\n });\n });\n --remaining || resolve(values);\n });\n if (result.error) reject(result.value);\n return capability.promise;\n }\n});\n","'use strict';\nvar $ = require('../internals/export');\nvar aFunction = require('../internals/a-function');\nvar getBuiltIn = require('../internals/get-built-in');\nvar newPromiseCapabilityModule = require('../internals/new-promise-capability');\nvar perform = require('../internals/perform');\nvar iterate = require('../internals/iterate');\n\nvar PROMISE_ANY_ERROR = 'No one promise resolved';\n\n// `Promise.any` method\n// https://tc39.es/ecma262/#sec-promise.any\n$({ target: 'Promise', stat: true }, {\n any: function any(iterable) {\n var C = this;\n var capability = newPromiseCapabilityModule.f(C);\n var resolve = capability.resolve;\n var reject = capability.reject;\n var result = perform(function () {\n var promiseResolve = aFunction(C.resolve);\n var errors = [];\n var counter = 0;\n var remaining = 1;\n var alreadyResolved = false;\n iterate(iterable, function (promise) {\n var index = counter++;\n var alreadyRejected = false;\n errors.push(undefined);\n remaining++;\n promiseResolve.call(C, promise).then(function (value) {\n if (alreadyRejected || alreadyResolved) return;\n alreadyResolved = true;\n resolve(value);\n }, function (error) {\n if (alreadyRejected || alreadyResolved) return;\n alreadyRejected = true;\n errors[index] = error;\n --remaining || reject(new (getBuiltIn('AggregateError'))(errors, PROMISE_ANY_ERROR));\n });\n });\n --remaining || reject(new (getBuiltIn('AggregateError'))(errors, PROMISE_ANY_ERROR));\n });\n if (result.error) reject(result.value);\n return capability.promise;\n }\n});\n","'use strict';\nvar $ = require('../internals/export');\nvar IS_PURE = require('../internals/is-pure');\nvar NativePromise = require('../internals/native-promise-constructor');\nvar fails = require('../internals/fails');\nvar getBuiltIn = require('../internals/get-built-in');\nvar speciesConstructor = require('../internals/species-constructor');\nvar promiseResolve = require('../internals/promise-resolve');\nvar redefine = require('../internals/redefine');\n\n// Safari bug https://bugs.webkit.org/show_bug.cgi?id=200829\nvar NON_GENERIC = !!NativePromise && fails(function () {\n NativePromise.prototype['finally'].call({ then: function () { /* empty */ } }, function () { /* empty */ });\n});\n\n// `Promise.prototype.finally` method\n// https://tc39.es/ecma262/#sec-promise.prototype.finally\n$({ target: 'Promise', proto: true, real: true, forced: NON_GENERIC }, {\n 'finally': function (onFinally) {\n var C = speciesConstructor(this, getBuiltIn('Promise'));\n var isFunction = typeof onFinally == 'function';\n return this.then(\n isFunction ? function (x) {\n return promiseResolve(C, onFinally()).then(function () { return x; });\n } : onFinally,\n isFunction ? function (e) {\n return promiseResolve(C, onFinally()).then(function () { throw e; });\n } : onFinally\n );\n }\n});\n\n// makes sure that native promise-based APIs `Promise#finally` properly works with patched `Promise#then`\nif (!IS_PURE && typeof NativePromise == 'function') {\n var method = getBuiltIn('Promise').prototype['finally'];\n if (NativePromise.prototype['finally'] !== method) {\n redefine(NativePromise.prototype, 'finally', method, { unsafe: true });\n }\n}\n","'use strict';\nvar $ = require('../internals/export');\nvar IS_PURE = require('../internals/is-pure');\nvar global = require('../internals/global');\nvar getBuiltIn = require('../internals/get-built-in');\nvar NativePromise = require('../internals/native-promise-constructor');\nvar redefine = require('../internals/redefine');\nvar redefineAll = require('../internals/redefine-all');\nvar setPrototypeOf = require('../internals/object-set-prototype-of');\nvar setToStringTag = require('../internals/set-to-string-tag');\nvar setSpecies = require('../internals/set-species');\nvar isObject = require('../internals/is-object');\nvar aFunction = require('../internals/a-function');\nvar anInstance = require('../internals/an-instance');\nvar inspectSource = require('../internals/inspect-source');\nvar iterate = require('../internals/iterate');\nvar checkCorrectnessOfIteration = require('../internals/check-correctness-of-iteration');\nvar speciesConstructor = require('../internals/species-constructor');\nvar task = require('../internals/task').set;\nvar microtask = require('../internals/microtask');\nvar promiseResolve = require('../internals/promise-resolve');\nvar hostReportErrors = require('../internals/host-report-errors');\nvar newPromiseCapabilityModule = require('../internals/new-promise-capability');\nvar perform = require('../internals/perform');\nvar InternalStateModule = require('../internals/internal-state');\nvar isForced = require('../internals/is-forced');\nvar wellKnownSymbol = require('../internals/well-known-symbol');\nvar IS_BROWSER = require('../internals/engine-is-browser');\nvar IS_NODE = require('../internals/engine-is-node');\nvar V8_VERSION = require('../internals/engine-v8-version');\n\nvar SPECIES = wellKnownSymbol('species');\nvar PROMISE = 'Promise';\nvar getInternalState = InternalStateModule.get;\nvar setInternalState = InternalStateModule.set;\nvar getInternalPromiseState = InternalStateModule.getterFor(PROMISE);\nvar NativePromisePrototype = NativePromise && NativePromise.prototype;\nvar PromiseConstructor = NativePromise;\nvar PromiseConstructorPrototype = NativePromisePrototype;\nvar TypeError = global.TypeError;\nvar document = global.document;\nvar process = global.process;\nvar newPromiseCapability = newPromiseCapabilityModule.f;\nvar newGenericPromiseCapability = newPromiseCapability;\nvar DISPATCH_EVENT = !!(document && document.createEvent && global.dispatchEvent);\nvar NATIVE_REJECTION_EVENT = typeof PromiseRejectionEvent == 'function';\nvar UNHANDLED_REJECTION = 'unhandledrejection';\nvar REJECTION_HANDLED = 'rejectionhandled';\nvar PENDING = 0;\nvar FULFILLED = 1;\nvar REJECTED = 2;\nvar HANDLED = 1;\nvar UNHANDLED = 2;\nvar SUBCLASSING = false;\nvar Internal, OwnPromiseCapability, PromiseWrapper, nativeThen;\n\nvar FORCED = isForced(PROMISE, function () {\n var GLOBAL_CORE_JS_PROMISE = inspectSource(PromiseConstructor) !== String(PromiseConstructor);\n // V8 6.6 (Node 10 and Chrome 66) have a bug with resolving custom thenables\n // https://bugs.chromium.org/p/chromium/issues/detail?id=830565\n // We can't detect it synchronously, so just check versions\n if (!GLOBAL_CORE_JS_PROMISE && V8_VERSION === 66) return true;\n // We need Promise#finally in the pure version for preventing prototype pollution\n if (IS_PURE && !PromiseConstructorPrototype['finally']) return true;\n // We can't use @@species feature detection in V8 since it causes\n // deoptimization and performance degradation\n // https://github.com/zloirock/core-js/issues/679\n if (V8_VERSION >= 51 && /native code/.test(PromiseConstructor)) return false;\n // Detect correctness of subclassing with @@species support\n var promise = new PromiseConstructor(function (resolve) { resolve(1); });\n var FakePromise = function (exec) {\n exec(function () { /* empty */ }, function () { /* empty */ });\n };\n var constructor = promise.constructor = {};\n constructor[SPECIES] = FakePromise;\n SUBCLASSING = promise.then(function () { /* empty */ }) instanceof FakePromise;\n if (!SUBCLASSING) return true;\n // Unhandled rejections tracking support, NodeJS Promise without it fails @@species test\n return !GLOBAL_CORE_JS_PROMISE && IS_BROWSER && !NATIVE_REJECTION_EVENT;\n});\n\nvar INCORRECT_ITERATION = FORCED || !checkCorrectnessOfIteration(function (iterable) {\n PromiseConstructor.all(iterable)['catch'](function () { /* empty */ });\n});\n\n// helpers\nvar isThenable = function (it) {\n var then;\n return isObject(it) && typeof (then = it.then) == 'function' ? then : false;\n};\n\nvar notify = function (state, isReject) {\n if (state.notified) return;\n state.notified = true;\n var chain = state.reactions;\n microtask(function () {\n var value = state.value;\n var ok = state.state == FULFILLED;\n var index = 0;\n // variable length - can't use forEach\n while (chain.length > index) {\n var reaction = chain[index++];\n var handler = ok ? reaction.ok : reaction.fail;\n var resolve = reaction.resolve;\n var reject = reaction.reject;\n var domain = reaction.domain;\n var result, then, exited;\n try {\n if (handler) {\n if (!ok) {\n if (state.rejection === UNHANDLED) onHandleUnhandled(state);\n state.rejection = HANDLED;\n }\n if (handler === true) result = value;\n else {\n if (domain) domain.enter();\n result = handler(value); // can throw\n if (domain) {\n domain.exit();\n exited = true;\n }\n }\n if (result === reaction.promise) {\n reject(TypeError('Promise-chain cycle'));\n } else if (then = isThenable(result)) {\n then.call(result, resolve, reject);\n } else resolve(result);\n } else reject(value);\n } catch (error) {\n if (domain && !exited) domain.exit();\n reject(error);\n }\n }\n state.reactions = [];\n state.notified = false;\n if (isReject && !state.rejection) onUnhandled(state);\n });\n};\n\nvar dispatchEvent = function (name, promise, reason) {\n var event, handler;\n if (DISPATCH_EVENT) {\n event = document.createEvent('Event');\n event.promise = promise;\n event.reason = reason;\n event.initEvent(name, false, true);\n global.dispatchEvent(event);\n } else event = { promise: promise, reason: reason };\n if (!NATIVE_REJECTION_EVENT && (handler = global['on' + name])) handler(event);\n else if (name === UNHANDLED_REJECTION) hostReportErrors('Unhandled promise rejection', reason);\n};\n\nvar onUnhandled = function (state) {\n task.call(global, function () {\n var promise = state.facade;\n var value = state.value;\n var IS_UNHANDLED = isUnhandled(state);\n var result;\n if (IS_UNHANDLED) {\n result = perform(function () {\n if (IS_NODE) {\n process.emit('unhandledRejection', value, promise);\n } else dispatchEvent(UNHANDLED_REJECTION, promise, value);\n });\n // Browsers should not trigger `rejectionHandled` event if it was handled here, NodeJS - should\n state.rejection = IS_NODE || isUnhandled(state) ? UNHANDLED : HANDLED;\n if (result.error) throw result.value;\n }\n });\n};\n\nvar isUnhandled = function (state) {\n return state.rejection !== HANDLED && !state.parent;\n};\n\nvar onHandleUnhandled = function (state) {\n task.call(global, function () {\n var promise = state.facade;\n if (IS_NODE) {\n process.emit('rejectionHandled', promise);\n } else dispatchEvent(REJECTION_HANDLED, promise, state.value);\n });\n};\n\nvar bind = function (fn, state, unwrap) {\n return function (value) {\n fn(state, value, unwrap);\n };\n};\n\nvar internalReject = function (state, value, unwrap) {\n if (state.done) return;\n state.done = true;\n if (unwrap) state = unwrap;\n state.value = value;\n state.state = REJECTED;\n notify(state, true);\n};\n\nvar internalResolve = function (state, value, unwrap) {\n if (state.done) return;\n state.done = true;\n if (unwrap) state = unwrap;\n try {\n if (state.facade === value) throw TypeError(\"Promise can't be resolved itself\");\n var then = isThenable(value);\n if (then) {\n microtask(function () {\n var wrapper = { done: false };\n try {\n then.call(value,\n bind(internalResolve, wrapper, state),\n bind(internalReject, wrapper, state)\n );\n } catch (error) {\n internalReject(wrapper, error, state);\n }\n });\n } else {\n state.value = value;\n state.state = FULFILLED;\n notify(state, false);\n }\n } catch (error) {\n internalReject({ done: false }, error, state);\n }\n};\n\n// constructor polyfill\nif (FORCED) {\n // 25.4.3.1 Promise(executor)\n PromiseConstructor = function Promise(executor) {\n anInstance(this, PromiseConstructor, PROMISE);\n aFunction(executor);\n Internal.call(this);\n var state = getInternalState(this);\n try {\n executor(bind(internalResolve, state), bind(internalReject, state));\n } catch (error) {\n internalReject(state, error);\n }\n };\n PromiseConstructorPrototype = PromiseConstructor.prototype;\n // eslint-disable-next-line no-unused-vars -- required for `.length`\n Internal = function Promise(executor) {\n setInternalState(this, {\n type: PROMISE,\n done: false,\n notified: false,\n parent: false,\n reactions: [],\n rejection: false,\n state: PENDING,\n value: undefined\n });\n };\n Internal.prototype = redefineAll(PromiseConstructorPrototype, {\n // `Promise.prototype.then` method\n // https://tc39.es/ecma262/#sec-promise.prototype.then\n then: function then(onFulfilled, onRejected) {\n var state = getInternalPromiseState(this);\n var reaction = newPromiseCapability(speciesConstructor(this, PromiseConstructor));\n reaction.ok = typeof onFulfilled == 'function' ? onFulfilled : true;\n reaction.fail = typeof onRejected == 'function' && onRejected;\n reaction.domain = IS_NODE ? process.domain : undefined;\n state.parent = true;\n state.reactions.push(reaction);\n if (state.state != PENDING) notify(state, false);\n return reaction.promise;\n },\n // `Promise.prototype.catch` method\n // https://tc39.es/ecma262/#sec-promise.prototype.catch\n 'catch': function (onRejected) {\n return this.then(undefined, onRejected);\n }\n });\n OwnPromiseCapability = function () {\n var promise = new Internal();\n var state = getInternalState(promise);\n this.promise = promise;\n this.resolve = bind(internalResolve, state);\n this.reject = bind(internalReject, state);\n };\n newPromiseCapabilityModule.f = newPromiseCapability = function (C) {\n return C === PromiseConstructor || C === PromiseWrapper\n ? new OwnPromiseCapability(C)\n : newGenericPromiseCapability(C);\n };\n\n if (!IS_PURE && typeof NativePromise == 'function' && NativePromisePrototype !== Object.prototype) {\n nativeThen = NativePromisePrototype.then;\n\n if (!SUBCLASSING) {\n // make `Promise#then` return a polyfilled `Promise` for native promise-based APIs\n redefine(NativePromisePrototype, 'then', function then(onFulfilled, onRejected) {\n var that = this;\n return new PromiseConstructor(function (resolve, reject) {\n nativeThen.call(that, resolve, reject);\n }).then(onFulfilled, onRejected);\n // https://github.com/zloirock/core-js/issues/640\n }, { unsafe: true });\n\n // makes sure that native promise-based APIs `Promise#catch` properly works with patched `Promise#then`\n redefine(NativePromisePrototype, 'catch', PromiseConstructorPrototype['catch'], { unsafe: true });\n }\n\n // make `.constructor === Promise` work for native promise-based APIs\n try {\n delete NativePromisePrototype.constructor;\n } catch (error) { /* empty */ }\n\n // make `instanceof Promise` work for native promise-based APIs\n if (setPrototypeOf) {\n setPrototypeOf(NativePromisePrototype, PromiseConstructorPrototype);\n }\n }\n}\n\n$({ global: true, wrap: true, forced: FORCED }, {\n Promise: PromiseConstructor\n});\n\nsetToStringTag(PromiseConstructor, PROMISE, false, true);\nsetSpecies(PROMISE);\n\nPromiseWrapper = getBuiltIn(PROMISE);\n\n// statics\n$({ target: PROMISE, stat: true, forced: FORCED }, {\n // `Promise.reject` method\n // https://tc39.es/ecma262/#sec-promise.reject\n reject: function reject(r) {\n var capability = newPromiseCapability(this);\n capability.reject.call(undefined, r);\n return capability.promise;\n }\n});\n\n$({ target: PROMISE, stat: true, forced: IS_PURE || FORCED }, {\n // `Promise.resolve` method\n // https://tc39.es/ecma262/#sec-promise.resolve\n resolve: function resolve(x) {\n return promiseResolve(IS_PURE && this === PromiseWrapper ? PromiseConstructor : this, x);\n }\n});\n\n$({ target: PROMISE, stat: true, forced: INCORRECT_ITERATION }, {\n // `Promise.all` method\n // https://tc39.es/ecma262/#sec-promise.all\n all: function all(iterable) {\n var C = this;\n var capability = newPromiseCapability(C);\n var resolve = capability.resolve;\n var reject = capability.reject;\n var result = perform(function () {\n var $promiseResolve = aFunction(C.resolve);\n var values = [];\n var counter = 0;\n var remaining = 1;\n iterate(iterable, function (promise) {\n var index = counter++;\n var alreadyCalled = false;\n values.push(undefined);\n remaining++;\n $promiseResolve.call(C, promise).then(function (value) {\n if (alreadyCalled) return;\n alreadyCalled = true;\n values[index] = value;\n --remaining || resolve(values);\n }, reject);\n });\n --remaining || resolve(values);\n });\n if (result.error) reject(result.value);\n return capability.promise;\n },\n // `Promise.race` method\n // https://tc39.es/ecma262/#sec-promise.race\n race: function race(iterable) {\n var C = this;\n var capability = newPromiseCapability(C);\n var reject = capability.reject;\n var result = perform(function () {\n var $promiseResolve = aFunction(C.resolve);\n iterate(iterable, function (promise) {\n $promiseResolve.call(C, promise).then(capability.resolve, reject);\n });\n });\n if (result.error) reject(result.value);\n return capability.promise;\n }\n});\n","'use strict';\nvar charAt = require('../internals/string-multibyte').charAt;\nvar InternalStateModule = require('../internals/internal-state');\nvar defineIterator = require('../internals/define-iterator');\n\nvar STRING_ITERATOR = 'String Iterator';\nvar setInternalState = InternalStateModule.set;\nvar getInternalState = InternalStateModule.getterFor(STRING_ITERATOR);\n\n// `String.prototype[@@iterator]` method\n// https://tc39.es/ecma262/#sec-string.prototype-@@iterator\ndefineIterator(String, 'String', function (iterated) {\n setInternalState(this, {\n type: STRING_ITERATOR,\n string: String(iterated),\n index: 0\n });\n// `%StringIteratorPrototype%.next` method\n// https://tc39.es/ecma262/#sec-%stringiteratorprototype%.next\n}, function next() {\n var state = getInternalState(this);\n var string = state.string;\n var index = state.index;\n var point;\n if (index >= string.length) return { value: undefined, done: true };\n point = charAt(string, index);\n state.index += point.length;\n return { value: point, done: false };\n});\n","// TODO: Remove from `core-js@4`\nrequire('./es.aggregate-error');\n","// TODO: Remove from `core-js@4`\nrequire('./es.promise.all-settled.js');\n","// TODO: Remove from `core-js@4`\nrequire('./es.promise.any');\n","'use strict';\nvar $ = require('../internals/export');\nvar newPromiseCapabilityModule = require('../internals/new-promise-capability');\nvar perform = require('../internals/perform');\n\n// `Promise.try` method\n// https://github.com/tc39/proposal-promise-try\n$({ target: 'Promise', stat: true }, {\n 'try': function (callbackfn) {\n var promiseCapability = newPromiseCapabilityModule.f(this);\n var result = perform(callbackfn);\n (result.error ? promiseCapability.reject : promiseCapability.resolve)(result.value);\n return promiseCapability.promise;\n }\n});\n","require('./es.array.iterator');\nvar DOMIterables = require('../internals/dom-iterables');\nvar global = require('../internals/global');\nvar classof = require('../internals/classof');\nvar createNonEnumerableProperty = require('../internals/create-non-enumerable-property');\nvar Iterators = require('../internals/iterators');\nvar wellKnownSymbol = require('../internals/well-known-symbol');\n\nvar TO_STRING_TAG = wellKnownSymbol('toStringTag');\n\nfor (var COLLECTION_NAME in DOMIterables) {\n var Collection = global[COLLECTION_NAME];\n var CollectionPrototype = Collection && Collection.prototype;\n if (CollectionPrototype && classof(CollectionPrototype) !== TO_STRING_TAG) {\n createNonEnumerableProperty(CollectionPrototype, TO_STRING_TAG, COLLECTION_NAME);\n }\n Iterators[COLLECTION_NAME] = Iterators.Array;\n}\n","var g;\n\n// This works in non-strict mode\ng = (function() {\n\treturn this;\n})();\n\ntry {\n\t// This works if eval is allowed (see CSP)\n\tg = g || new Function(\"return this\")();\n} catch (e) {\n\t// This works if the window reference is available\n\tif (typeof window === \"object\") g = window;\n}\n\n// g can still be undefined, but nothing to do about it...\n// We return undefined, instead of nothing here, so it's\n// easier to handle this case. if(!global) { ...}\n\nmodule.exports = g;\n","// extracted by mini-css-extract-plugin","import '@/polyfill';\nimport ImageEditor from '@/imageEditor';\nimport '@css/index.styl';\n\n// commands\nimport '@/command/addIcon';\nimport '@/command/addImageObject';\nimport '@/command/addObject';\nimport '@/command/addShape';\nimport '@/command/addText';\nimport '@/command/applyFilter';\nimport '@/command/changeIconColor';\nimport '@/command/changeShape';\nimport '@/command/changeText';\nimport '@/command/changeTextStyle';\nimport '@/command/clearObjects';\nimport '@/command/flip';\nimport '@/command/loadImage';\nimport '@/command/removeFilter';\nimport '@/command/removeObject';\nimport '@/command/resizeCanvasDimension';\nimport '@/command/rotate';\nimport '@/command/setObjectProperties';\nimport '@/command/setObjectPosition';\nimport '@/command/changeSelection';\nimport '@/command/resize';\n\nmodule.exports = ImageEditor;\n","import { extend } from 'tui-code-snippet';\nimport Imagetracer from '@/helper/imagetracer';\nimport { isSupportFileApi, base64ToBlob, toInteger, isEmptyCropzone, includes } from '@/util';\nimport { eventNames, historyNames, drawingModes, drawingMenuNames, zoomModes } from '@/consts';\n\nexport default {\n /**\n * Get ui actions\n * @returns {Object} actions for ui\n * @private\n */\n getActions() {\n return {\n main: this._mainAction(),\n shape: this._shapeAction(),\n crop: this._cropAction(),\n resize: this._resizeAction(),\n flip: this._flipAction(),\n rotate: this._rotateAction(),\n text: this._textAction(),\n mask: this._maskAction(),\n draw: this._drawAction(),\n icon: this._iconAction(),\n filter: this._filterAction(),\n history: this._historyAction(),\n };\n },\n\n /**\n * Main Action\n * @returns {Object} actions for ui main\n * @private\n */\n _mainAction() {\n const exitCropOnAction = () => {\n if (this.ui.submenu === 'crop') {\n this.stopDrawingMode();\n this.ui.changeMenu('crop');\n }\n };\n const setAngleRangeBarOnAction = (angle) => {\n if (this.ui.submenu === 'rotate') {\n this.ui.rotate.setRangeBarAngle('setAngle', angle);\n }\n };\n const setFilterStateRangeBarOnAction = (filterOptions) => {\n if (this.ui.submenu === 'filter') {\n this.ui.filter.setFilterState(filterOptions);\n }\n };\n const onEndUndoRedo = (result) => {\n setAngleRangeBarOnAction(result);\n setFilterStateRangeBarOnAction(result);\n\n return result;\n };\n const toggleZoomMode = () => {\n const zoomMode = this._graphics.getZoomMode();\n\n this.stopDrawingMode();\n if (zoomMode !== zoomModes.ZOOM) {\n this.startDrawingMode(drawingModes.ZOOM);\n this._graphics.startZoomInMode();\n } else {\n this._graphics.endZoomInMode();\n }\n };\n const toggleHandMode = () => {\n const zoomMode = this._graphics.getZoomMode();\n\n this.stopDrawingMode();\n if (zoomMode !== zoomModes.HAND) {\n this.startDrawingMode(drawingModes.ZOOM);\n this._graphics.startHandMode();\n } else {\n this._graphics.endHandMode();\n }\n };\n const initFilterState = () => {\n if (this.ui.filter) {\n this.ui.filter.initFilterCheckBoxState();\n }\n };\n\n return extend(\n {\n initLoadImage: (imagePath, imageName) =>\n this.loadImageFromURL(imagePath, imageName).then((sizeValue) => {\n exitCropOnAction();\n this.ui.initializeImgUrl = imagePath;\n this.ui.resizeEditor({ imageSize: sizeValue });\n this.clearUndoStack();\n this._invoker.fire(eventNames.EXECUTE_COMMAND, historyNames.LOAD_IMAGE);\n }),\n undo: () => {\n if (!this.isEmptyUndoStack()) {\n exitCropOnAction();\n this.deactivateAll();\n this.undo().then(onEndUndoRedo);\n }\n },\n redo: () => {\n if (!this.isEmptyRedoStack()) {\n exitCropOnAction();\n this.deactivateAll();\n this.redo().then(onEndUndoRedo);\n }\n },\n reset: () => {\n exitCropOnAction();\n this.loadImageFromURL(this.ui.initializeImgUrl, 'resetImage').then((sizeValue) => {\n exitCropOnAction();\n initFilterState();\n this.ui.resizeEditor({ imageSize: sizeValue });\n this.clearUndoStack();\n this._initHistory();\n });\n },\n delete: () => {\n this.ui.changeHelpButtonEnabled('delete', false);\n exitCropOnAction();\n this.removeActiveObject();\n this.activeObjectId = null;\n },\n deleteAll: () => {\n exitCropOnAction();\n this.clearObjects();\n this.ui.changeHelpButtonEnabled('delete', false);\n this.ui.changeHelpButtonEnabled('deleteAll', false);\n },\n load: (file) => {\n if (!isSupportFileApi()) {\n alert('This browser does not support file-api');\n }\n\n this.ui.initializeImgUrl = URL.createObjectURL(file);\n this.loadImageFromFile(file)\n .then((sizeValue) => {\n exitCropOnAction();\n initFilterState();\n this.clearUndoStack();\n this.ui.activeMenuEvent();\n this.ui.resizeEditor({ imageSize: sizeValue });\n this._clearHistory();\n this._invoker.fire(eventNames.EXECUTE_COMMAND, historyNames.LOAD_IMAGE);\n })\n ['catch']((message) => Promise.reject(message));\n },\n download: () => {\n const dataURL = this.toDataURL();\n let imageName = this.getImageName();\n let blob, type, w;\n\n if (isSupportFileApi() && window.saveAs) {\n blob = base64ToBlob(dataURL);\n type = blob.type.split('/')[1];\n if (imageName.split('.').pop() !== type) {\n imageName += `.${type}`;\n }\n saveAs(blob, imageName); // eslint-disable-line\n } else {\n w = window.open();\n w.document.body.innerHTML = ``;\n }\n },\n history: (event) => {\n this.ui.toggleHistoryMenu(event);\n },\n zoomIn: () => {\n this.ui.toggleZoomButtonStatus('zoomIn');\n this.deactivateAll();\n toggleZoomMode();\n },\n zoomOut: () => {\n this._graphics.zoomOut();\n },\n hand: () => {\n this.ui.offZoomInButtonStatus();\n this.ui.toggleZoomButtonStatus('hand');\n this.deactivateAll();\n toggleHandMode();\n },\n },\n this._commonAction()\n );\n },\n\n /**\n * Icon Action\n * @returns {Object} actions for ui icon\n * @private\n */\n _iconAction() {\n return extend(\n {\n changeColor: (color) => {\n if (this.activeObjectId) {\n this.changeIconColor(this.activeObjectId, color);\n }\n },\n addIcon: (iconType, iconColor) => {\n this.startDrawingMode('ICON');\n this.setDrawingIcon(iconType, iconColor);\n },\n cancelAddIcon: () => {\n this.ui.icon.clearIconType();\n this.changeSelectableAll(true);\n this.changeCursor('default');\n this.stopDrawingMode();\n },\n registerDefaultIcons: (type, path) => {\n const iconObj = {};\n iconObj[type] = path;\n this.registerIcons(iconObj);\n },\n registerCustomIcon: (imgUrl, file) => {\n const imagetracer = new Imagetracer();\n imagetracer.imageToSVG(\n imgUrl,\n (svgstr) => {\n const [, svgPath] = svgstr.match(/path[^>]*d=\"([^\"]*)\"/);\n const iconObj = {};\n iconObj[file.name] = svgPath;\n this.registerIcons(iconObj);\n this.addIcon(file.name, {\n left: 100,\n top: 100,\n });\n },\n Imagetracer.tracerDefaultOption()\n );\n },\n },\n this._commonAction()\n );\n },\n\n /**\n * Draw Action\n * @returns {Object} actions for ui draw\n * @private\n */\n _drawAction() {\n return extend(\n {\n setDrawMode: (type, settings) => {\n this.stopDrawingMode();\n if (type === 'free') {\n this.startDrawingMode('FREE_DRAWING', settings);\n } else {\n this.startDrawingMode('LINE_DRAWING', settings);\n }\n },\n setColor: (color) => {\n this.setBrush({\n color,\n });\n },\n },\n this._commonAction()\n );\n },\n\n /**\n * Mask Action\n * @returns {Object} actions for ui mask\n * @private\n */\n _maskAction() {\n return extend(\n {\n loadImageFromURL: (imgUrl, file) => {\n return this.loadImageFromURL(this.toDataURL(), 'FilterImage').then(() => {\n this.addImageObject(imgUrl).then(() => {\n URL.revokeObjectURL(file);\n });\n this._invoker.fire(eventNames.EXECUTE_COMMAND, historyNames.LOAD_MASK_IMAGE);\n });\n },\n applyFilter: () => {\n this.applyFilter('mask', {\n maskObjId: this.activeObjectId,\n });\n },\n },\n this._commonAction()\n );\n },\n\n /**\n * Text Action\n * @returns {Object} actions for ui text\n * @private\n */\n _textAction() {\n return extend(\n {\n changeTextStyle: (styleObj, isSilent) => {\n if (this.activeObjectId) {\n this.changeTextStyle(this.activeObjectId, styleObj, isSilent);\n }\n },\n },\n this._commonAction()\n );\n },\n\n /**\n * Rotate Action\n * @returns {Object} actions for ui rotate\n * @private\n */\n _rotateAction() {\n return extend(\n {\n rotate: (angle, isSilent) => {\n this.rotate(angle, isSilent);\n this.ui.resizeEditor();\n this.ui.rotate.setRangeBarAngle('rotate', angle);\n },\n setAngle: (angle, isSilent) => {\n this.setAngle(angle, isSilent);\n this.ui.resizeEditor();\n this.ui.rotate.setRangeBarAngle('setAngle', angle);\n },\n },\n this._commonAction()\n );\n },\n\n /**\n * Shape Action\n * @returns {Object} actions for ui shape\n * @private\n */\n _shapeAction() {\n return extend(\n {\n changeShape: (changeShapeObject, isSilent) => {\n if (this.activeObjectId) {\n this.changeShape(this.activeObjectId, changeShapeObject, isSilent);\n }\n },\n setDrawingShape: (shapeType) => {\n this.setDrawingShape(shapeType);\n },\n },\n this._commonAction()\n );\n },\n\n /**\n * Crop Action\n * @returns {Object} actions for ui crop\n * @private\n */\n _cropAction() {\n return extend(\n {\n crop: () => {\n const cropRect = this.getCropzoneRect();\n if (cropRect && !isEmptyCropzone(cropRect)) {\n this.crop(cropRect)\n .then(() => {\n this.stopDrawingMode();\n this.ui.resizeEditor();\n this.ui.changeMenu('crop');\n this._invoker.fire(eventNames.EXECUTE_COMMAND, historyNames.CROP);\n })\n ['catch']((message) => Promise.reject(message));\n }\n },\n cancel: () => {\n this.stopDrawingMode();\n this.ui.changeMenu('crop');\n },\n /* eslint-disable */\n preset: (presetType) => {\n switch (presetType) {\n case 'preset-square':\n this.setCropzoneRect(1 / 1);\n break;\n case 'preset-3-2':\n this.setCropzoneRect(3 / 2);\n break;\n case 'preset-4-3':\n this.setCropzoneRect(4 / 3);\n break;\n case 'preset-5-4':\n this.setCropzoneRect(5 / 4);\n break;\n case 'preset-7-5':\n this.setCropzoneRect(7 / 5);\n break;\n case 'preset-16-9':\n this.setCropzoneRect(16 / 9);\n break;\n default:\n this.setCropzoneRect();\n this.ui.crop.changeApplyButtonStatus(false);\n break;\n }\n },\n },\n this._commonAction()\n );\n },\n\n /**\n * Resize Action\n * @returns {Object} actions for ui resize\n * @private\n */\n _resizeAction() {\n return extend(\n {\n getCurrentDimensions: () => this._graphics.getCurrentDimensions(),\n preview: (actor, value, lockState) => {\n const currentDimensions = this._graphics.getCurrentDimensions();\n const calcAspectRatio = () => currentDimensions.width / currentDimensions.height;\n\n let dimensions = {};\n switch (actor) {\n case 'width':\n dimensions.width = value;\n if (lockState) {\n dimensions.height = value / calcAspectRatio();\n } else {\n dimensions.height = currentDimensions.height;\n }\n break;\n case 'height':\n dimensions.height = value;\n if (lockState) {\n dimensions.width = value * calcAspectRatio();\n } else {\n dimensions.width = currentDimensions.width;\n }\n break;\n default:\n dimensions = currentDimensions;\n }\n\n this._graphics.resize(dimensions).then(() => {\n this.ui.resizeEditor();\n });\n\n if (lockState) {\n this.ui.resize.setWidthValue(dimensions.width);\n this.ui.resize.setHeightValue(dimensions.height);\n }\n },\n lockAspectRatio: (lockState, min, max) => {\n const { width, height } = this._graphics.getCurrentDimensions();\n const aspectRatio = width / height;\n if (lockState) {\n if (width > height) {\n const pMax = max / aspectRatio;\n const pMin = min * aspectRatio;\n this.ui.resize.setLimit({\n minWidth: pMin > min ? pMin : min,\n minHeight: min,\n maxWidth: max,\n maxHeight: pMax < max ? pMax : max,\n });\n } else {\n const pMax = max * aspectRatio;\n const pMin = min / aspectRatio;\n this.ui.resize.setLimit({\n minWidth: min,\n minHeight: pMin > min ? pMin : min,\n maxWidth: pMax < max ? pMax : max,\n maxHeight: max,\n });\n }\n } else {\n this.ui.resize.setLimit({\n minWidth: min,\n minHeight: min,\n maxWidth: max,\n maxHeight: max,\n });\n }\n },\n resize: (dimensions = null) => {\n if (!dimensions) {\n dimensions = this._graphics.getCurrentDimensions();\n }\n\n this.resize(dimensions)\n .then(() => {\n this._graphics.setOriginalDimensions(dimensions);\n this.stopDrawingMode();\n this.ui.resizeEditor();\n this.ui.changeMenu('resize');\n })\n ['catch']((message) => Promise.reject(message));\n },\n reset: (standByMode = false) => {\n const dimensions = this._graphics.getOriginalDimensions();\n\n this.ui.resize.setWidthValue(dimensions.width, true);\n this.ui.resize.setHeightValue(dimensions.height, true);\n\n this._graphics.resize(dimensions).then(() => {\n if (!standByMode) {\n this.stopDrawingMode();\n this.ui.resizeEditor();\n this.ui.changeMenu('resize');\n }\n });\n },\n },\n this._commonAction()\n );\n },\n\n /**\n * Flip Action\n * @returns {Object} actions for ui flip\n * @private\n */\n _flipAction() {\n return extend(\n {\n flip: (flipType) => this[flipType](),\n },\n this._commonAction()\n );\n },\n\n /**\n * Filter Action\n * @returns {Object} actions for ui filter\n * @private\n */\n _filterAction() {\n return extend(\n {\n applyFilter: (applying, type, options, isSilent) => {\n if (applying) {\n this.applyFilter(type, options, isSilent);\n } else if (this.hasFilter(type)) {\n this.removeFilter(type);\n }\n },\n },\n this._commonAction()\n );\n },\n\n /**\n * Image Editor Event Observer\n */\n setReAction() {\n this.on({\n undoStackChanged: (length) => {\n if (length) {\n this.ui.changeHelpButtonEnabled('undo', true);\n this.ui.changeHelpButtonEnabled('reset', true);\n } else {\n this.ui.changeHelpButtonEnabled('undo', false);\n this.ui.changeHelpButtonEnabled('reset', false);\n }\n this.ui.resizeEditor();\n },\n redoStackChanged: (length) => {\n if (length) {\n this.ui.changeHelpButtonEnabled('redo', true);\n } else {\n this.ui.changeHelpButtonEnabled('redo', false);\n }\n this.ui.resizeEditor();\n },\n /* eslint-disable complexity */\n objectActivated: (obj) => {\n this.activeObjectId = obj.id;\n\n this.ui.changeHelpButtonEnabled('delete', true);\n this.ui.changeHelpButtonEnabled('deleteAll', true);\n\n if (obj.type === 'cropzone') {\n this.ui.crop.changeApplyButtonStatus(true);\n } else if (['rect', 'circle', 'triangle'].indexOf(obj.type) > -1) {\n this.stopDrawingMode();\n if (this.ui.submenu !== 'shape') {\n this.ui.changeMenu('shape', false, false);\n }\n this.ui.shape.setShapeStatus({\n strokeColor: obj.stroke,\n strokeWidth: obj.strokeWidth,\n fillColor: obj.fill,\n });\n\n this.ui.shape.setMaxStrokeValue(Math.min(obj.width, obj.height));\n } else if (obj.type === 'path' || obj.type === 'line') {\n if (this.ui.submenu !== 'draw') {\n this.ui.changeMenu('draw', false, false);\n this.ui.draw.changeStandbyMode();\n }\n } else if (['i-text', 'text'].indexOf(obj.type) > -1) {\n if (this.ui.submenu !== 'text') {\n this.ui.changeMenu('text', false, false);\n }\n\n this.ui.text.setTextStyleStateOnAction(obj);\n } else if (obj.type === 'icon') {\n this.stopDrawingMode();\n if (this.ui.submenu !== 'icon') {\n this.ui.changeMenu('icon', false, false);\n }\n this.ui.icon.setIconPickerColor(obj.fill);\n }\n },\n /* eslint-enable complexity */\n addText: (pos) => {\n const { textColor: fill, fontSize, fontStyle, fontWeight, underline } = this.ui.text;\n const fontFamily = 'Noto Sans';\n\n this.addText('Double Click', {\n position: pos.originPosition,\n styles: { fill, fontSize, fontFamily, fontStyle, fontWeight, underline },\n }).then(() => {\n this.changeCursor('default');\n });\n },\n addObjectAfter: (obj) => {\n if (obj.type === 'icon') {\n this.ui.icon.changeStandbyMode();\n } else if (['rect', 'circle', 'triangle'].indexOf(obj.type) > -1) {\n this.ui.shape.setMaxStrokeValue(Math.min(obj.width, obj.height));\n this.ui.shape.changeStandbyMode();\n }\n },\n objectScaled: (obj) => {\n if (['i-text', 'text'].indexOf(obj.type) > -1) {\n this.ui.text.fontSize = toInteger(obj.fontSize);\n } else if (['rect', 'circle', 'triangle'].indexOf(obj.type) >= 0) {\n const { width, height } = obj;\n const strokeValue = this.ui.shape.getStrokeValue();\n\n if (width < strokeValue) {\n this.ui.shape.setStrokeValue(width);\n }\n if (height < strokeValue) {\n this.ui.shape.setStrokeValue(height);\n }\n }\n },\n selectionCleared: () => {\n this.activeObjectId = null;\n if (this.ui.submenu === 'text') {\n this.changeCursor('text');\n } else if (!includes(['draw', 'crop', 'resize'], this.ui.submenu)) {\n this.stopDrawingMode();\n }\n },\n });\n },\n\n /**\n * History Action\n * @returns {Object} history actions for ui\n * @private\n */\n _historyAction() {\n return {\n undo: (count) => this.undo(count),\n redo: (count) => this.redo(count),\n };\n },\n\n /**\n * Common Action\n * @returns {Object} common actions for ui\n * @private\n */\n _commonAction() {\n const { TEXT, CROPPER, SHAPE, ZOOM, RESIZE } = drawingModes;\n\n return {\n modeChange: (menu) => {\n switch (menu) {\n case drawingMenuNames.TEXT:\n this._changeActivateMode(TEXT);\n break;\n case drawingMenuNames.CROP:\n this.startDrawingMode(CROPPER);\n break;\n case drawingMenuNames.SHAPE:\n this._changeActivateMode(SHAPE);\n this.setDrawingShape(this.ui.shape.type, this.ui.shape.options);\n break;\n case drawingMenuNames.ZOOM:\n this.startDrawingMode(ZOOM);\n break;\n case drawingMenuNames.RESIZE:\n this.startDrawingMode(RESIZE);\n break;\n default:\n break;\n }\n },\n deactivateAll: this.deactivateAll.bind(this),\n changeSelectableAll: this.changeSelectableAll.bind(this),\n discardSelection: this.discardSelection.bind(this),\n stopDrawingMode: this.stopDrawingMode.bind(this),\n };\n },\n\n /**\n * Mixin\n * @param {ImageEditor} ImageEditor instance\n */\n mixin(ImageEditor) {\n extend(ImageEditor.prototype, this);\n },\n};\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Add an icon\n */\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { componentNames, commandNames } from '@/consts';\n\nconst { ICON } = componentNames;\n\nconst command = {\n name: commandNames.ADD_ICON,\n\n /**\n * Add an icon\n * @param {Graphics} graphics - Graphics instance\n * @param {string} type - Icon type ('arrow', 'cancel', custom icon name)\n * @param {Object} options - Icon options\n * @param {string} [options.fill] - Icon foreground color\n * @param {string} [options.left] - Icon x position\n * @param {string} [options.top] - Icon y position\n * @returns {Promise}\n */\n execute(graphics, type, options) {\n const iconComp = graphics.getComponent(ICON);\n\n return iconComp.add(type, options).then((objectProps) => {\n this.undoData.object = graphics.getObject(objectProps.id);\n\n return objectProps;\n });\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n graphics.remove(this.undoData.object);\n\n return Promise.resolve();\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Add an image object\n */\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { commandNames } from '@/consts';\n\nconst command = {\n name: commandNames.ADD_IMAGE_OBJECT,\n\n /**\n * Add an image object\n * @param {Graphics} graphics - Graphics instance\n * @param {string} imgUrl - Image url to make object\n * @returns {Promise}\n */\n execute(graphics, imgUrl) {\n return graphics.addImageObject(imgUrl).then((objectProps) => {\n this.undoData.object = graphics.getObject(objectProps.id);\n\n return objectProps;\n });\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n graphics.remove(this.undoData.object);\n\n return Promise.resolve();\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Add an object\n */\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { commandNames, rejectMessages } from '@/consts';\n\nconst command = {\n name: commandNames.ADD_OBJECT,\n\n /**\n * Add an object\n * @param {Graphics} graphics - Graphics instance\n * @param {Object} object - Fabric object\n * @returns {Promise}\n */\n execute(graphics, object) {\n return new Promise((resolve, reject) => {\n if (!graphics.contains(object)) {\n graphics.add(object);\n resolve(object);\n } else {\n reject(rejectMessages.addedObject);\n }\n });\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @param {Object} object - Fabric object\n * @returns {Promise}\n */\n undo(graphics, object) {\n return new Promise((resolve, reject) => {\n if (graphics.contains(object)) {\n graphics.remove(object);\n resolve(object);\n } else {\n reject(rejectMessages.noObject);\n }\n });\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Add a shape\n */\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { componentNames, commandNames } from '@/consts';\n\nconst { SHAPE } = componentNames;\n\nconst command = {\n name: commandNames.ADD_SHAPE,\n\n /**\n * Add a shape\n * @param {Graphics} graphics - Graphics instance\n * @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle')\n * @param {Object} options - Shape options\n * @param {string} [options.fill] - Shape foreground color (ex: '#fff', 'transparent')\n * @param {string} [options.stroke] - Shape outline color\n * @param {number} [options.strokeWidth] - Shape outline width\n * @param {number} [options.width] - Width value (When type option is 'rect', this options can use)\n * @param {number} [options.height] - Height value (When type option is 'rect', this options can use)\n * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)\n * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)\n * @param {number} [options.left] - Shape x position\n * @param {number} [options.top] - Shape y position\n * @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not\n * @returns {Promise}\n */\n execute(graphics, type, options) {\n const shapeComp = graphics.getComponent(SHAPE);\n\n return shapeComp.add(type, options).then((objectProps) => {\n const { id } = objectProps;\n\n this.undoData.object = graphics.getObject(id);\n\n return objectProps;\n });\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n graphics.remove(this.undoData.object);\n\n return Promise.resolve();\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Add a text object\n */\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { componentNames, commandNames, rejectMessages } from '@/consts';\nimport {\n setCachedUndoDataForDimension,\n makeSelectionUndoData,\n makeSelectionUndoDatum,\n} from '@/helper/selectionModifyHelper';\n\nconst { TEXT } = componentNames;\n\nconst command = {\n name: commandNames.ADD_TEXT,\n\n /**\n * Add a text object\n * @param {Graphics} graphics - Graphics instance\n * @param {string} text - Initial input text\n * @param {Object} [options] Options for text styles\n * @param {Object} [options.styles] Initial styles\n * @param {string} [options.styles.fill] Color\n * @param {string} [options.styles.fontFamily] Font type for text\n * @param {number} [options.styles.fontSize] Size\n * @param {string} [options.styles.fontStyle] Type of inclination (normal / italic)\n * @param {string} [options.styles.fontWeight] Type of thicker or thinner looking (normal / bold)\n * @param {string} [options.styles.textAlign] Type of text align (left / center / right)\n * @param {string} [options.styles.textDecoration] Type of line (underline / line-through / overline)\n * @param {{x: number, y: number}} [options.position] - Initial position\n * @returns {Promise}\n */\n execute(graphics, text, options) {\n const textComp = graphics.getComponent(TEXT);\n\n if (this.undoData.object) {\n const undoObject = this.undoData.object;\n\n return new Promise((resolve, reject) => {\n if (!graphics.contains(undoObject)) {\n graphics.add(undoObject);\n resolve(undoObject);\n } else {\n reject(rejectMessages.redo);\n }\n });\n }\n\n return textComp.add(text, options).then((objectProps) => {\n const { id } = objectProps;\n const textObject = graphics.getObject(id);\n\n this.undoData.object = textObject;\n\n setCachedUndoDataForDimension(\n makeSelectionUndoData(textObject, () => makeSelectionUndoDatum(id, textObject, false))\n );\n\n return objectProps;\n });\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n graphics.remove(this.undoData.object);\n\n return Promise.resolve();\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Apply a filter into an image\n */\nimport snippet from 'tui-code-snippet';\nimport commandFactory from '@/factory/command';\nimport { componentNames, rejectMessages, commandNames } from '@/consts';\n\nconst { FILTER } = componentNames;\n\n/**\n * Cached data for undo\n * @type {Object}\n */\nlet cachedUndoDataForSilent = null;\n\n/**\n * Make undoData\n * @param {string} type - Filter type\n * @param {Object} prevfilterOption - prev Filter options\n * @param {Object} options - Filter options\n * @returns {object} - undo data\n */\nfunction makeUndoData(type, prevfilterOption, options) {\n const undoData = {};\n\n if (type === 'mask') {\n undoData.object = options.mask;\n }\n\n undoData.options = prevfilterOption;\n\n return undoData;\n}\n\nconst command = {\n name: commandNames.APPLY_FILTER,\n\n /**\n * Apply a filter into an image\n * @param {Graphics} graphics - Graphics instance\n * @param {string} type - Filter type\n * @param {Object} options - Filter options\n * @param {number} options.maskObjId - masking image object id\n * @param {boolean} isSilent - is silent execution or not\n * @returns {Promise}\n */\n execute(graphics, type, options, isSilent) {\n const filterComp = graphics.getComponent(FILTER);\n\n if (type === 'mask') {\n const maskObj = graphics.getObject(options.maskObjId);\n\n if (!(maskObj && maskObj.isType('image'))) {\n return Promise.reject(rejectMessages.invalidParameters);\n }\n\n snippet.extend(options, { mask: maskObj });\n graphics.remove(options.mask);\n }\n if (!this.isRedo) {\n const prevfilterOption = filterComp.getOptions(type);\n const undoData = makeUndoData(type, prevfilterOption, options);\n\n cachedUndoDataForSilent = this.setUndoData(undoData, cachedUndoDataForSilent, isSilent);\n }\n\n return filterComp.add(type, options);\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @param {string} type - Filter type\n * @returns {Promise}\n */\n undo(graphics, type) {\n const filterComp = graphics.getComponent(FILTER);\n\n if (type === 'mask') {\n const mask = this.undoData.object;\n graphics.add(mask);\n graphics.setActiveObject(mask);\n\n return filterComp.remove(type);\n }\n\n // options changed case\n if (this.undoData.options) {\n return filterComp.add(type, this.undoData.options);\n }\n\n // filter added case\n return filterComp.remove(type);\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Change icon color\n */\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { componentNames, rejectMessages, commandNames } from '@/consts';\n\nconst { ICON } = componentNames;\n\nconst command = {\n name: commandNames.CHANGE_ICON_COLOR,\n\n /**\n * Change icon color\n * @param {Graphics} graphics - Graphics instance\n * @param {number} id - object id\n * @param {string} color - Color for icon\n * @returns {Promise}\n */\n execute(graphics, id, color) {\n return new Promise((resolve, reject) => {\n const iconComp = graphics.getComponent(ICON);\n const targetObj = graphics.getObject(id);\n\n if (!targetObj) {\n reject(rejectMessages.noObject);\n }\n\n this.undoData.object = targetObj;\n this.undoData.color = iconComp.getColor(targetObj);\n iconComp.setColor(color, targetObj);\n resolve();\n });\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n const iconComp = graphics.getComponent(ICON);\n const { object: icon, color } = this.undoData;\n\n iconComp.setColor(color, icon);\n\n return Promise.resolve();\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview change selection\n */\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { commandNames } from '@/consts';\nimport { getCachedUndoDataForDimension } from '@/helper/selectionModifyHelper';\n\nconst command = {\n name: commandNames.CHANGE_SELECTION,\n\n execute(graphics, props) {\n if (this.isRedo) {\n props.forEach((prop) => {\n graphics.setObjectProperties(prop.id, prop);\n });\n } else {\n this.undoData = getCachedUndoDataForDimension();\n }\n\n return Promise.resolve();\n },\n\n undo(graphics) {\n this.undoData.forEach((datum) => {\n graphics.setObjectProperties(datum.id, datum);\n });\n\n return Promise.resolve();\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview change a shape\n */\nimport snippet from 'tui-code-snippet';\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { componentNames, rejectMessages, commandNames } from '@/consts';\n\nconst { SHAPE } = componentNames;\n\n/**\n * Cached data for undo\n * @type {Object}\n */\nlet cachedUndoDataForSilent = null;\n\n/**\n * Make undoData\n * @param {object} options - shape options\n * @param {Component} targetObj - shape component\n * @returns {object} - undo data\n */\nfunction makeUndoData(options, targetObj) {\n const undoData = {\n object: targetObj,\n options: {},\n };\n\n snippet.forEachOwnProperties(options, (value, key) => {\n undoData.options[key] = targetObj[key];\n });\n\n return undoData;\n}\n\nconst command = {\n name: commandNames.CHANGE_SHAPE,\n\n /**\n * Change a shape\n * @param {Graphics} graphics - Graphics instance\n * @param {number} id - object id\n * @param {Object} options - Shape options\n * @param {string} [options.fill] - Shape foreground color (ex: '#fff', 'transparent')\n * @param {string} [options.stroke] - Shape outline color\n * @param {number} [options.strokeWidth] - Shape outline width\n * @param {number} [options.width] - Width value (When type option is 'rect', this options can use)\n * @param {number} [options.height] - Height value (When type option is 'rect', this options can use)\n * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)\n * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)\n * @param {number} [options.left] - Shape x position\n * @param {number} [options.top] - Shape y position\n * @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not\n * @param {boolean} isSilent - is silent execution or not\n * @returns {Promise}\n */\n execute(graphics, id, options, isSilent) {\n const shapeComp = graphics.getComponent(SHAPE);\n const targetObj = graphics.getObject(id);\n\n if (!targetObj) {\n return Promise.reject(rejectMessages.noObject);\n }\n\n if (!this.isRedo) {\n const undoData = makeUndoData(options, targetObj);\n\n cachedUndoDataForSilent = this.setUndoData(undoData, cachedUndoDataForSilent, isSilent);\n }\n\n return shapeComp.change(targetObj, options);\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n const shapeComp = graphics.getComponent(SHAPE);\n const { object: shape, options } = this.undoData;\n\n return shapeComp.change(shape, options);\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Change a text\n */\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { componentNames, rejectMessages, commandNames } from '@/consts';\n\nconst { TEXT } = componentNames;\n\nconst command = {\n name: commandNames.CHANGE_TEXT,\n\n /**\n * Change a text\n * @param {Graphics} graphics - Graphics instance\n * @param {number} id - object id\n * @param {string} text - Changing text\n * @returns {Promise}\n */\n execute(graphics, id, text) {\n const textComp = graphics.getComponent(TEXT);\n const targetObj = graphics.getObject(id);\n\n if (!targetObj) {\n return Promise.reject(rejectMessages.noObject);\n }\n\n this.undoData.object = targetObj;\n this.undoData.text = textComp.getText(targetObj);\n\n return textComp.change(targetObj, text);\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n const textComp = graphics.getComponent(TEXT);\n const { object: textObj, text } = this.undoData;\n\n return textComp.change(textObj, text);\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Change text styles\n */\nimport snippet from 'tui-code-snippet';\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { componentNames, rejectMessages, commandNames } from '@/consts';\n\nconst { TEXT } = componentNames;\n\n/**\n * Cached data for undo\n * @type {Object}\n */\nlet cachedUndoDataForSilent = null;\n\n/**\n * Make undoData\n * @param {object} styles - text styles\n * @param {Component} targetObj - text component\n * @returns {object} - undo data\n */\nfunction makeUndoData(styles, targetObj) {\n const undoData = {\n object: targetObj,\n styles: {},\n };\n snippet.forEachOwnProperties(styles, (value, key) => {\n const undoValue = targetObj[key];\n undoData.styles[key] = undoValue;\n });\n\n return undoData;\n}\n\nconst command = {\n name: commandNames.CHANGE_TEXT_STYLE,\n\n /**\n * Change text styles\n * @param {Graphics} graphics - Graphics instance\n * @param {number} id - object id\n * @param {Object} styles - text styles\n * @param {string} [styles.fill] Color\n * @param {string} [styles.fontFamily] Font type for text\n * @param {number} [styles.fontSize] Size\n * @param {string} [styles.fontStyle] Type of inclination (normal / italic)\n * @param {string} [styles.fontWeight] Type of thicker or thinner looking (normal / bold)\n * @param {string} [styles.textAlign] Type of text align (left / center / right)\n * @param {string} [styles.textDecoration] Type of line (underline / line-through / overline)\n * @param {boolean} isSilent - is silent execution or not\n * @returns {Promise}\n */\n execute(graphics, id, styles, isSilent) {\n const textComp = graphics.getComponent(TEXT);\n const targetObj = graphics.getObject(id);\n\n if (!targetObj) {\n return Promise.reject(rejectMessages.noObject);\n }\n if (!this.isRedo) {\n const undoData = makeUndoData(styles, targetObj);\n\n cachedUndoDataForSilent = this.setUndoData(undoData, cachedUndoDataForSilent, isSilent);\n }\n\n return textComp.setStyle(targetObj, styles);\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n const textComp = graphics.getComponent(TEXT);\n const { object: textObj, styles } = this.undoData;\n\n return textComp.setStyle(textObj, styles);\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Clear all objects\n */\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { commandNames } from '@/consts';\n\nconst command = {\n name: commandNames.CLEAR_OBJECTS,\n\n /**\n * Clear all objects without background (main) image\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n execute(graphics) {\n return new Promise((resolve) => {\n this.undoData.objects = graphics.removeAll();\n resolve();\n });\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n * @ignore\n */\n undo(graphics) {\n graphics.add(this.undoData.objects);\n\n return Promise.resolve();\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Flip an image\n */\nimport commandFactory from '@/factory/command';\nimport { componentNames, commandNames } from '@/consts';\n\nconst { FLIP } = componentNames;\n\nconst command = {\n name: commandNames.FLIP_IMAGE,\n\n /**\n * flip an image\n * @param {Graphics} graphics - Graphics instance\n * @param {string} type - 'flipX' or 'flipY' or 'reset'\n * @returns {Promise}\n */\n execute(graphics, type) {\n const flipComp = graphics.getComponent(FLIP);\n\n this.undoData.setting = flipComp.getCurrentSetting();\n\n return flipComp[type]();\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n const flipComp = graphics.getComponent(FLIP);\n\n return flipComp.set(this.undoData.setting);\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Load a background (main) image\n */\nimport commandFactory from '@/factory/command';\nimport { componentNames, commandNames } from '@/consts';\n\nconst { IMAGE_LOADER } = componentNames;\n\nconst command = {\n name: commandNames.LOAD_IMAGE,\n\n /**\n * Load a background (main) image\n * @param {Graphics} graphics - Graphics instance\n * @param {string} imageName - Image name\n * @param {string} imgUrl - Image Url\n * @returns {Promise}\n */\n execute(graphics, imageName, imgUrl) {\n const loader = graphics.getComponent(IMAGE_LOADER);\n const prevImage = loader.getCanvasImage();\n const prevImageWidth = prevImage ? prevImage.width : 0;\n const prevImageHeight = prevImage ? prevImage.height : 0;\n const objects = graphics.removeAll(true).filter((objectItem) => objectItem.type !== 'cropzone');\n\n objects.forEach((objectItem) => {\n objectItem.evented = true;\n });\n\n this.undoData = {\n name: loader.getImageName(),\n image: prevImage,\n objects,\n };\n\n return loader.load(imageName, imgUrl).then((newImage) => ({\n oldWidth: prevImageWidth,\n oldHeight: prevImageHeight,\n newWidth: newImage.width,\n newHeight: newImage.height,\n }));\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n const loader = graphics.getComponent(IMAGE_LOADER);\n const { objects, name, image } = this.undoData;\n\n graphics.removeAll(true);\n graphics.add(objects);\n\n return loader.load(name, image);\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Remove a filter from an image\n */\nimport commandFactory from '@/factory/command';\nimport { componentNames, commandNames } from '@/consts';\n\nconst { FILTER } = componentNames;\n\nconst command = {\n name: commandNames.REMOVE_FILTER,\n\n /**\n * Remove a filter from an image\n * @param {Graphics} graphics - Graphics instance\n * @param {string} type - Filter type\n * @returns {Promise}\n */\n execute(graphics, type) {\n const filterComp = graphics.getComponent(FILTER);\n\n this.undoData.options = filterComp.getOptions(type);\n\n return filterComp.remove(type);\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @param {string} type - Filter type\n * @returns {Promise}\n */\n undo(graphics, type) {\n const filterComp = graphics.getComponent(FILTER);\n const { options } = this.undoData;\n\n return filterComp.add(type, options);\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Remove an object\n */\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { commandNames, rejectMessages } from '@/consts';\n\nconst command = {\n name: commandNames.REMOVE_OBJECT,\n\n /**\n * Remove an object\n * @param {Graphics} graphics - Graphics instance\n * @param {number} id - object id\n * @returns {Promise}\n */\n execute(graphics, id) {\n return new Promise((resolve, reject) => {\n this.undoData.objects = graphics.removeObjectById(id);\n if (this.undoData.objects.length) {\n resolve();\n } else {\n reject(rejectMessages.noObject);\n }\n });\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n graphics.add(this.undoData.objects);\n\n return Promise.resolve();\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Resize an image\n */\nimport commandFactory from '@/factory/command';\nimport { componentNames, commandNames } from '@/consts';\n\nconst { RESIZE } = componentNames;\n\nconst command = {\n name: commandNames.RESIZE_IMAGE,\n\n /**\n * Resize an image\n * @param {Graphics} graphics - Graphics instance\n * @param {object} dimensions - Image Dimensions\n * @returns {Promise}\n */\n execute(graphics, dimensions) {\n const resizeComp = graphics.getComponent(RESIZE);\n\n let originalDimensions = resizeComp.getOriginalDimensions();\n if (!originalDimensions) {\n originalDimensions = resizeComp.getCurrentDimensions();\n }\n\n this.undoData.dimensions = originalDimensions;\n\n return resizeComp.resize(dimensions);\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n const resizeComp = graphics.getComponent(RESIZE);\n\n return resizeComp.resize(this.undoData.dimensions);\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Resize a canvas\n */\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { commandNames } from '@/consts';\n\nconst command = {\n name: commandNames.RESIZE_CANVAS_DIMENSION,\n\n /**\n * resize the canvas with given dimension\n * @param {Graphics} graphics - Graphics instance\n * @param {{width: number, height: number}} dimension - Max width & height\n * @returns {Promise}\n */\n execute(graphics, dimension) {\n return new Promise((resolve) => {\n this.undoData.size = {\n width: graphics.cssMaxWidth,\n height: graphics.cssMaxHeight,\n };\n\n graphics.setCssMaxDimension(dimension);\n graphics.adjustCanvasDimension();\n resolve();\n });\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n graphics.setCssMaxDimension(this.undoData.size);\n graphics.adjustCanvasDimension();\n\n return Promise.resolve();\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Rotate an image\n */\nimport commandFactory from '@/factory/command';\nimport { componentNames, commandNames } from '@/consts';\n\nconst { ROTATION } = componentNames;\n\n/**\n * Cached data for undo\n * @type {Object}\n */\nlet cachedUndoDataForSilent = null;\n\n/**\n * Make undo data\n * @param {Component} rotationComp - rotation component\n * @returns {object} - undodata\n */\nfunction makeUndoData(rotationComp) {\n return {\n angle: rotationComp.getCurrentAngle(),\n };\n}\n\nconst command = {\n name: commandNames.ROTATE_IMAGE,\n\n /**\n * Rotate an image\n * @param {Graphics} graphics - Graphics instance\n * @param {string} type - 'rotate' or 'setAngle'\n * @param {number} angle - angle value (degree)\n * @param {boolean} isSilent - is silent execution or not\n * @returns {Promise}\n */\n execute(graphics, type, angle, isSilent) {\n const rotationComp = graphics.getComponent(ROTATION);\n\n if (!this.isRedo) {\n const undoData = makeUndoData(rotationComp);\n\n cachedUndoDataForSilent = this.setUndoData(undoData, cachedUndoDataForSilent, isSilent);\n }\n\n return rotationComp[type](angle);\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n const rotationComp = graphics.getComponent(ROTATION);\n const [, type, angle] = this.args;\n\n if (type === 'setAngle') {\n return rotationComp[type](this.undoData.angle);\n }\n\n return rotationComp.rotate(-angle);\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Set object properties\n */\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { commandNames, rejectMessages } from '@/consts';\n\nconst command = {\n name: commandNames.SET_OBJECT_POSITION,\n\n /**\n * Set object properties\n * @param {Graphics} graphics - Graphics instance\n * @param {number} id - object id\n * @param {Object} posInfo - position object\n * @param {number} posInfo.x - x position\n * @param {number} posInfo.y - y position\n * @param {string} posInfo.originX - can be 'left', 'center', 'right'\n * @param {string} posInfo.originY - can be 'top', 'center', 'bottom'\n * @returns {Promise}\n */\n execute(graphics, id, posInfo) {\n const targetObj = graphics.getObject(id);\n\n if (!targetObj) {\n return Promise.reject(rejectMessages.noObject);\n }\n\n this.undoData.objectId = id;\n this.undoData.props = graphics.getObjectProperties(id, ['left', 'top']);\n\n graphics.setObjectPosition(id, posInfo);\n graphics.renderAll();\n\n return Promise.resolve();\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n const { objectId, props } = this.undoData;\n\n graphics.setObjectProperties(objectId, props);\n graphics.renderAll();\n\n return Promise.resolve();\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Set object properties\n */\nimport snippet from 'tui-code-snippet';\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { commandNames, rejectMessages } from '@/consts';\n\nconst command = {\n name: commandNames.SET_OBJECT_PROPERTIES,\n\n /**\n * Set object properties\n * @param {Graphics} graphics - Graphics instance\n * @param {number} id - object id\n * @param {Object} props - properties\n * @param {string} [props.fill] Color\n * @param {string} [props.fontFamily] Font type for text\n * @param {number} [props.fontSize] Size\n * @param {string} [props.fontStyle] Type of inclination (normal / italic)\n * @param {string} [props.fontWeight] Type of thicker or thinner looking (normal / bold)\n * @param {string} [props.textAlign] Type of text align (left / center / right)\n * @param {string} [props.textDecoration] Type of line (underline / line-through / overline)\n * @returns {Promise}\n */\n execute(graphics, id, props) {\n const targetObj = graphics.getObject(id);\n\n if (!targetObj) {\n return Promise.reject(rejectMessages.noObject);\n }\n\n this.undoData.props = {};\n snippet.forEachOwnProperties(props, (value, key) => {\n this.undoData.props[key] = targetObj[key];\n });\n\n graphics.setObjectProperties(id, props);\n\n return Promise.resolve();\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @param {number} id - object id\n * @returns {Promise}\n */\n undo(graphics, id) {\n const { props } = this.undoData;\n\n graphics.setObjectProperties(id, props);\n\n return Promise.resolve();\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Image crop module (start cropping, end cropping)\n */\nimport snippet from 'tui-code-snippet';\nimport fabric from 'fabric';\nimport Component from '@/interface/component';\nimport Cropzone from '@/extension/cropzone';\nimport { keyCodes, componentNames, CROPZONE_DEFAULT_OPTIONS } from '@/consts';\nimport { clamp, fixFloatingPoint } from '@/util';\n\nconst MOUSE_MOVE_THRESHOLD = 10;\nconst DEFAULT_OPTION = {\n presetRatio: null,\n top: -10,\n left: -10,\n height: 1,\n width: 1,\n};\n\n/**\n * Cropper components\n * @param {Graphics} graphics - Graphics instance\n * @extends {Component}\n * @class Cropper\n * @ignore\n */\nclass Cropper extends Component {\n constructor(graphics) {\n super(componentNames.CROPPER, graphics);\n\n /**\n * Cropzone\n * @type {Cropzone}\n * @private\n */\n this._cropzone = null;\n\n /**\n * StartX of Cropzone\n * @type {number}\n * @private\n */\n this._startX = null;\n\n /**\n * StartY of Cropzone\n * @type {number}\n * @private\n */\n this._startY = null;\n\n /**\n * State whether shortcut key is pressed or not\n * @type {boolean}\n * @private\n */\n this._withShiftKey = false;\n\n /**\n * Listeners\n * @type {object.}\n * @private\n */\n this._listeners = {\n keydown: this._onKeyDown.bind(this),\n keyup: this._onKeyUp.bind(this),\n mousedown: this._onFabricMouseDown.bind(this),\n mousemove: this._onFabricMouseMove.bind(this),\n mouseup: this._onFabricMouseUp.bind(this),\n };\n }\n\n /**\n * Start cropping\n */\n start() {\n if (this._cropzone) {\n return;\n }\n const canvas = this.getCanvas();\n\n canvas.forEachObject((obj) => {\n // {@link http://fabricjs.com/docs/fabric.Object.html#evented}\n obj.evented = false;\n });\n\n this._cropzone = new Cropzone(\n canvas,\n snippet.extend(\n {\n left: 0,\n top: 0,\n width: 0.5,\n height: 0.5,\n strokeWidth: 0, // {@link https://github.com/kangax/fabric.js/issues/2860}\n cornerSize: 10,\n cornerColor: 'black',\n fill: 'transparent',\n },\n CROPZONE_DEFAULT_OPTIONS,\n this.graphics.cropSelectionStyle\n )\n );\n\n canvas.discardActiveObject();\n canvas.add(this._cropzone);\n canvas.on('mouse:down', this._listeners.mousedown);\n canvas.selection = false;\n canvas.defaultCursor = 'crosshair';\n\n fabric.util.addListener(document, 'keydown', this._listeners.keydown);\n fabric.util.addListener(document, 'keyup', this._listeners.keyup);\n }\n\n /**\n * End cropping\n */\n end() {\n const canvas = this.getCanvas();\n const cropzone = this._cropzone;\n\n if (!cropzone) {\n return;\n }\n canvas.remove(cropzone);\n canvas.selection = true;\n canvas.defaultCursor = 'default';\n canvas.off('mouse:down', this._listeners.mousedown);\n canvas.forEachObject((obj) => {\n obj.evented = true;\n });\n\n this._cropzone = null;\n\n fabric.util.removeListener(document, 'keydown', this._listeners.keydown);\n fabric.util.removeListener(document, 'keyup', this._listeners.keyup);\n }\n\n /**\n * Change cropzone visible\n * @param {boolean} visible - cropzone visible state\n */\n changeVisibility(visible) {\n if (this._cropzone) {\n this._cropzone.set({ visible });\n }\n }\n\n /**\n * onMousedown handler in fabric canvas\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onFabricMouseDown(fEvent) {\n const canvas = this.getCanvas();\n\n if (fEvent.target) {\n return;\n }\n\n canvas.selection = false;\n const coord = canvas.getPointer(fEvent.e);\n\n this._startX = coord.x;\n this._startY = coord.y;\n\n canvas.on({\n 'mouse:move': this._listeners.mousemove,\n 'mouse:up': this._listeners.mouseup,\n });\n }\n\n /**\n * onMousemove handler in fabric canvas\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onFabricMouseMove(fEvent) {\n const canvas = this.getCanvas();\n const pointer = canvas.getPointer(fEvent.e);\n const { x, y } = pointer;\n const cropzone = this._cropzone;\n\n if (Math.abs(x - this._startX) + Math.abs(y - this._startY) > MOUSE_MOVE_THRESHOLD) {\n canvas.remove(cropzone);\n cropzone.set(this._calcRectDimensionFromPoint(x, y));\n\n canvas.add(cropzone);\n canvas.setActiveObject(cropzone);\n }\n }\n\n /**\n * Get rect dimension setting from Canvas-Mouse-Position(x, y)\n * @param {number} x - Canvas-Mouse-Position x\n * @param {number} y - Canvas-Mouse-Position Y\n * @returns {{left: number, top: number, width: number, height: number}}\n * @private\n */\n _calcRectDimensionFromPoint(x, y) {\n const canvas = this.getCanvas();\n const canvasWidth = canvas.getWidth();\n const canvasHeight = canvas.getHeight();\n const startX = this._startX;\n const startY = this._startY;\n let left = clamp(x, 0, startX);\n let top = clamp(y, 0, startY);\n let width = clamp(x, startX, canvasWidth) - left; // (startX <= x(mouse) <= canvasWidth) - left\n let height = clamp(y, startY, canvasHeight) - top; // (startY <= y(mouse) <= canvasHeight) - top\n\n if (this._withShiftKey) {\n // make fixed ratio cropzone\n if (width > height) {\n height = width;\n } else if (height > width) {\n width = height;\n }\n\n if (startX >= x) {\n left = startX - width;\n }\n\n if (startY >= y) {\n top = startY - height;\n }\n }\n\n return {\n left,\n top,\n width,\n height,\n };\n }\n\n /**\n * onMouseup handler in fabric canvas\n * @private\n */\n _onFabricMouseUp() {\n const cropzone = this._cropzone;\n const listeners = this._listeners;\n const canvas = this.getCanvas();\n\n canvas.setActiveObject(cropzone);\n canvas.off({\n 'mouse:move': listeners.mousemove,\n 'mouse:up': listeners.mouseup,\n });\n }\n\n /**\n * Get cropped image data\n * @param {Object} cropRect cropzone rect\n * @param {Number} cropRect.left left position\n * @param {Number} cropRect.top top position\n * @param {Number} cropRect.width width\n * @param {Number} cropRect.height height\n * @returns {?{imageName: string, url: string}} cropped Image data\n */\n getCroppedImageData(cropRect) {\n const canvas = this.getCanvas();\n const containsCropzone = canvas.contains(this._cropzone);\n if (!cropRect) {\n return null;\n }\n\n if (containsCropzone) {\n canvas.remove(this._cropzone);\n }\n\n const imageData = {\n imageName: this.getImageName(),\n url: canvas.toDataURL(cropRect),\n };\n\n if (containsCropzone) {\n canvas.add(this._cropzone);\n }\n\n return imageData;\n }\n\n /**\n * Get cropped rect\n * @returns {Object} rect\n */\n getCropzoneRect() {\n const cropzone = this._cropzone;\n\n if (!cropzone.isValid()) {\n return null;\n }\n\n return {\n left: cropzone.left,\n top: cropzone.top,\n width: cropzone.width,\n height: cropzone.height,\n };\n }\n\n /**\n * Set a cropzone square\n * @param {number} [presetRatio] - preset ratio\n */\n setCropzoneRect(presetRatio) {\n const canvas = this.getCanvas();\n const cropzone = this._cropzone;\n\n canvas.discardActiveObject();\n canvas.selection = false;\n canvas.remove(cropzone);\n\n cropzone.set(presetRatio ? this._getPresetPropertiesForCropSize(presetRatio) : DEFAULT_OPTION);\n\n canvas.add(cropzone);\n canvas.selection = true;\n\n if (presetRatio) {\n canvas.setActiveObject(cropzone);\n }\n }\n\n /**\n * get a cropzone square info\n * @param {number} presetRatio - preset ratio\n * @returns {{presetRatio: number, left: number, top: number, width: number, height: number}}\n * @private\n */\n _getPresetPropertiesForCropSize(presetRatio) {\n const canvas = this.getCanvas();\n const originalWidth = canvas.getWidth();\n const originalHeight = canvas.getHeight();\n\n const standardSize = originalWidth >= originalHeight ? originalWidth : originalHeight;\n const getScale = (value, orignalValue) => (value > orignalValue ? orignalValue / value : 1);\n\n let width = standardSize * presetRatio;\n let height = standardSize;\n\n const scaleWidth = getScale(width, originalWidth);\n [width, height] = snippet.map([width, height], (sizeValue) => sizeValue * scaleWidth);\n\n const scaleHeight = getScale(height, originalHeight);\n [width, height] = snippet.map([width, height], (sizeValue) =>\n fixFloatingPoint(sizeValue * scaleHeight)\n );\n\n return {\n presetRatio,\n top: (originalHeight - height) / 2,\n left: (originalWidth - width) / 2,\n width,\n height,\n };\n }\n\n /**\n * Keydown event handler\n * @param {KeyboardEvent} e - Event object\n * @private\n */\n _onKeyDown(e) {\n if (e.keyCode === keyCodes.SHIFT) {\n this._withShiftKey = true;\n }\n }\n\n /**\n * Keyup event handler\n * @param {KeyboardEvent} e - Event object\n * @private\n */\n _onKeyUp(e) {\n if (e.keyCode === keyCodes.SHIFT) {\n this._withShiftKey = false;\n }\n }\n}\n\nexport default Cropper;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Add filter module\n */\nimport { isUndefined, extend, forEach, filter } from 'tui-code-snippet';\nimport fabric from 'fabric';\nimport Component from '@/interface/component';\nimport { Promise } from '@/util';\nimport { rejectMessages, componentNames } from '@/consts';\nimport Mask from '@/extension/mask';\nimport Sharpen from '@/extension/sharpen';\nimport Emboss from '@/extension/emboss';\nimport ColorFilter from '@/extension/colorFilter';\n\nconst { filters } = fabric.Image;\n\nfilters.Mask = Mask;\nfilters.Sharpen = Sharpen;\nfilters.Emboss = Emboss;\nfilters.ColorFilter = ColorFilter;\n\n/**\n * Filter\n * @class Filter\n * @param {Graphics} graphics - Graphics instance\n * @extends {Component}\n * @ignore\n */\nclass Filter extends Component {\n constructor(graphics) {\n super(componentNames.FILTER, graphics);\n }\n\n /**\n * Add filter to source image (a specific filter is added on fabric.js)\n * @param {string} type - Filter type\n * @param {Object} [options] - Options of filter\n * @returns {Promise}\n */\n add(type, options) {\n return new Promise((resolve, reject) => {\n const sourceImg = this._getSourceImage();\n const canvas = this.getCanvas();\n let imgFilter = this._getFilter(sourceImg, type);\n if (!imgFilter) {\n imgFilter = this._createFilter(sourceImg, type, options);\n }\n\n if (!imgFilter) {\n reject(rejectMessages.invalidParameters);\n }\n\n this._changeFilterValues(imgFilter, options);\n\n this._apply(sourceImg, () => {\n canvas.renderAll();\n resolve({\n type,\n action: 'add',\n options,\n });\n });\n });\n }\n\n /**\n * Remove filter to source image\n * @param {string} type - Filter type\n * @returns {Promise}\n */\n remove(type) {\n return new Promise((resolve, reject) => {\n const sourceImg = this._getSourceImage();\n const canvas = this.getCanvas();\n const options = this.getOptions(type);\n\n if (!sourceImg.filters.length) {\n reject(rejectMessages.unsupportedOperation);\n }\n\n this._removeFilter(sourceImg, type);\n\n this._apply(sourceImg, () => {\n canvas.renderAll();\n resolve({\n type,\n action: 'remove',\n options,\n });\n });\n });\n }\n\n /**\n * Whether this has the filter or not\n * @param {string} type - Filter type\n * @returns {boolean} true if it has the filter\n */\n hasFilter(type) {\n return !!this._getFilter(this._getSourceImage(), type);\n }\n\n /**\n * Get a filter options\n * @param {string} type - Filter type\n * @returns {Object} filter options or null if there is no that filter\n */\n getOptions(type) {\n const sourceImg = this._getSourceImage();\n const imgFilter = this._getFilter(sourceImg, type);\n if (!imgFilter) {\n return null;\n }\n\n return extend({}, imgFilter.options);\n }\n\n /**\n * Change filter values\n * @param {Object} imgFilter object of filter\n * @param {Object} options object\n * @private\n */\n _changeFilterValues(imgFilter, options) {\n forEach(options, (value, key) => {\n if (!isUndefined(imgFilter[key])) {\n imgFilter[key] = value;\n }\n });\n forEach(imgFilter.options, (value, key) => {\n if (!isUndefined(options[key])) {\n imgFilter.options[key] = options[key];\n }\n });\n }\n\n /**\n * Apply filter\n * @param {fabric.Image} sourceImg - Source image to apply filter\n * @param {function} callback - Executed function after applying filter\n * @private\n */\n _apply(sourceImg, callback) {\n sourceImg.filters.push();\n const result = sourceImg.applyFilters();\n if (result) {\n callback();\n }\n }\n\n /**\n * Get source image on canvas\n * @returns {fabric.Image} Current source image on canvas\n * @private\n */\n _getSourceImage() {\n return this.getCanvasImage();\n }\n\n /**\n * Create filter instance\n * @param {fabric.Image} sourceImg - Source image to apply filter\n * @param {string} type - Filter type\n * @param {Object} [options] - Options of filter\n * @returns {Object} Fabric object of filter\n * @private\n */\n _createFilter(sourceImg, type, options) {\n let filterObj;\n // capitalize first letter for matching with fabric image filter name\n const fabricType = this._getFabricFilterType(type);\n const ImageFilter = fabric.Image.filters[fabricType];\n if (ImageFilter) {\n filterObj = new ImageFilter(options);\n filterObj.options = options;\n sourceImg.filters.push(filterObj);\n }\n\n return filterObj;\n }\n\n /**\n * Get applied filter instance\n * @param {fabric.Image} sourceImg - Source image to apply filter\n * @param {string} type - Filter type\n * @returns {Object} Fabric object of filter\n * @private\n */\n _getFilter(sourceImg, type) {\n let imgFilter = null;\n\n if (sourceImg) {\n const fabricType = this._getFabricFilterType(type);\n const { length } = sourceImg.filters;\n let item, i;\n\n for (i = 0; i < length; i += 1) {\n item = sourceImg.filters[i];\n if (item.type === fabricType) {\n imgFilter = item;\n break;\n }\n }\n }\n\n return imgFilter;\n }\n\n /**\n * Remove applied filter instance\n * @param {fabric.Image} sourceImg - Source image to apply filter\n * @param {string} type - Filter type\n * @private\n */\n _removeFilter(sourceImg, type) {\n const fabricType = this._getFabricFilterType(type);\n sourceImg.filters = filter(sourceImg.filters, (value) => value.type !== fabricType);\n }\n\n /**\n * Change filter class name to fabric's, especially capitalizing first letter\n * @param {string} type - Filter type\n * @example\n * 'grayscale' -> 'Grayscale'\n * @returns {string} Fabric filter class name\n */\n _getFabricFilterType(type) {\n return type.charAt(0).toUpperCase() + type.slice(1);\n }\n}\n\nexport default Filter;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Image flip module\n */\nimport snippet from 'tui-code-snippet';\nimport Component from '@/interface/component';\nimport { Promise } from '@/util';\nimport { componentNames, rejectMessages } from '@/consts';\n\n/**\n * Flip\n * @class Flip\n * @param {Graphics} graphics - Graphics instance\n * @extends {Component}\n * @ignore\n */\nclass Flip extends Component {\n constructor(graphics) {\n super(componentNames.FLIP, graphics);\n }\n\n /**\n * Get current flip settings\n * @returns {{flipX: Boolean, flipY: Boolean}}\n */\n getCurrentSetting() {\n const canvasImage = this.getCanvasImage();\n\n return {\n flipX: canvasImage.flipX,\n flipY: canvasImage.flipY,\n };\n }\n\n /**\n * Set flipX, flipY\n * @param {{flipX: Boolean, flipY: Boolean}} newSetting - Flip setting\n * @returns {Promise}\n */\n set(newSetting) {\n const setting = this.getCurrentSetting();\n const isChangingFlipX = setting.flipX !== newSetting.flipX;\n const isChangingFlipY = setting.flipY !== newSetting.flipY;\n\n if (!isChangingFlipX && !isChangingFlipY) {\n return Promise.reject(rejectMessages.flip);\n }\n\n snippet.extend(setting, newSetting);\n this.setImageProperties(setting, true);\n this._invertAngle(isChangingFlipX, isChangingFlipY);\n this._flipObjects(isChangingFlipX, isChangingFlipY);\n\n return Promise.resolve({\n flipX: setting.flipX,\n flipY: setting.flipY,\n angle: this.getCanvasImage().angle,\n });\n }\n\n /**\n * Invert image angle for flip\n * @param {boolean} isChangingFlipX - Change flipX\n * @param {boolean} isChangingFlipY - Change flipY\n */\n _invertAngle(isChangingFlipX, isChangingFlipY) {\n const canvasImage = this.getCanvasImage();\n let { angle } = canvasImage;\n\n if (isChangingFlipX) {\n angle *= -1;\n }\n if (isChangingFlipY) {\n angle *= -1;\n }\n canvasImage.rotate(parseFloat(angle)).setCoords(); // parseFloat for -0 to 0\n }\n\n /**\n * Flip objects\n * @param {boolean} isChangingFlipX - Change flipX\n * @param {boolean} isChangingFlipY - Change flipY\n * @private\n */\n _flipObjects(isChangingFlipX, isChangingFlipY) {\n const canvas = this.getCanvas();\n\n if (isChangingFlipX) {\n canvas.forEachObject((obj) => {\n obj\n .set({\n angle: parseFloat(obj.angle * -1), // parseFloat for -0 to 0\n flipX: !obj.flipX,\n left: canvas.width - obj.left,\n })\n .setCoords();\n });\n }\n if (isChangingFlipY) {\n canvas.forEachObject((obj) => {\n obj\n .set({\n angle: parseFloat(obj.angle * -1), // parseFloat for -0 to 0\n flipY: !obj.flipY,\n top: canvas.height - obj.top,\n })\n .setCoords();\n });\n }\n canvas.renderAll();\n }\n\n /**\n * Reset flip settings\n * @returns {Promise}\n */\n reset() {\n return this.set({\n flipX: false,\n flipY: false,\n });\n }\n\n /**\n * Flip x\n * @returns {Promise}\n */\n flipX() {\n const current = this.getCurrentSetting();\n\n return this.set({\n flipX: !current.flipX,\n flipY: current.flipY,\n });\n }\n\n /**\n * Flip y\n * @returns {Promise}\n */\n flipY() {\n const current = this.getCurrentSetting();\n\n return this.set({\n flipX: current.flipX,\n flipY: !current.flipY,\n });\n }\n}\n\nexport default Flip;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Free drawing module, Set brush\n */\nimport fabric from 'fabric';\nimport Component from '@/interface/component';\nimport { componentNames } from '@/consts';\n\n/**\n * FreeDrawing\n * @class FreeDrawing\n * @param {Graphics} graphics - Graphics instance\n * @extends {Component}\n * @ignore\n */\nclass FreeDrawing extends Component {\n constructor(graphics) {\n super(componentNames.FREE_DRAWING, graphics);\n\n /**\n * Brush width\n * @type {number}\n */\n this.width = 12;\n\n /**\n * fabric.Color instance for brush color\n * @type {fabric.Color}\n */\n this.oColor = new fabric.Color('rgba(0, 0, 0, 0.5)');\n }\n\n /**\n * Start free drawing mode\n * @param {{width: ?number, color: ?string}} [setting] - Brush width & color\n */\n start(setting) {\n const canvas = this.getCanvas();\n\n canvas.isDrawingMode = true;\n this.setBrush(setting);\n }\n\n /**\n * Set brush\n * @param {{width: ?number, color: ?string}} [setting] - Brush width & color\n */\n setBrush(setting) {\n const brush = this.getCanvas().freeDrawingBrush;\n\n setting = setting || {};\n this.width = setting.width || this.width;\n if (setting.color) {\n this.oColor = new fabric.Color(setting.color);\n }\n brush.width = this.width;\n brush.color = this.oColor.toRgba();\n }\n\n /**\n * End free drawing mode\n */\n end() {\n const canvas = this.getCanvas();\n\n canvas.isDrawingMode = false;\n }\n}\n\nexport default FreeDrawing;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Add icon module\n */\nimport snippet from 'tui-code-snippet';\nimport fabric from 'fabric';\nimport Component from '@/interface/component';\nimport { Promise } from '@/util';\nimport { eventNames as events, rejectMessages, componentNames, fObjectOptions } from '@/consts';\n\nconst pathMap = {\n arrow: 'M 0 90 H 105 V 120 L 160 60 L 105 0 V 30 H 0 Z',\n cancel:\n 'M 0 30 L 30 60 L 0 90 L 30 120 L 60 90 L 90 120 L 120 90 ' +\n 'L 90 60 L 120 30 L 90 0 L 60 30 L 30 0 Z',\n};\n\n/**\n * Icon\n * @class Icon\n * @param {Graphics} graphics - Graphics instance\n * @extends {Component}\n * @ignore\n */\nclass Icon extends Component {\n constructor(graphics) {\n super(componentNames.ICON, graphics);\n\n /**\n * Default icon color\n * @type {string}\n */\n this._oColor = '#000000';\n\n /**\n * Path value of each icon type\n * @type {Object}\n */\n this._pathMap = pathMap;\n\n /**\n * Type of the drawing icon\n * @type {string}\n * @private\n */\n this._type = null;\n\n /**\n * Color of the drawing icon\n * @type {string}\n * @private\n */\n this._iconColor = null;\n\n /**\n * Event handler list\n * @type {Object}\n * @private\n */\n this._handlers = {\n mousedown: this._onFabricMouseDown.bind(this),\n mousemove: this._onFabricMouseMove.bind(this),\n mouseup: this._onFabricMouseUp.bind(this),\n };\n }\n\n /**\n * Set states of the current drawing shape\n * @ignore\n * @param {string} type - Icon type ('arrow', 'cancel', custom icon name)\n * @param {string} iconColor - Icon foreground color\n */\n setStates(type, iconColor) {\n this._type = type;\n this._iconColor = iconColor;\n }\n\n /**\n * Start to draw the icon on canvas\n * @ignore\n */\n start() {\n const canvas = this.getCanvas();\n canvas.selection = false;\n canvas.on('mouse:down', this._handlers.mousedown);\n }\n\n /**\n * End to draw the icon on canvas\n * @ignore\n */\n end() {\n const canvas = this.getCanvas();\n\n canvas.selection = true;\n canvas.off({\n 'mouse:down': this._handlers.mousedown,\n });\n }\n\n /**\n * Add icon\n * @param {string} type - Icon type\n * @param {Object} options - Icon options\n * @param {string} [options.fill] - Icon foreground color\n * @param {string} [options.left] - Icon x position\n * @param {string} [options.top] - Icon y position\n * @returns {Promise}\n */\n add(type, options) {\n return new Promise((resolve, reject) => {\n const canvas = this.getCanvas();\n const path = this._pathMap[type];\n const selectionStyle = fObjectOptions.SELECTION_STYLE;\n const icon = path ? this._createIcon(path) : null;\n this._icon = icon;\n\n if (!icon) {\n reject(rejectMessages.invalidParameters);\n }\n\n icon.set(\n snippet.extend(\n {\n type: 'icon',\n fill: this._oColor,\n },\n selectionStyle,\n options,\n this.graphics.controlStyle\n )\n );\n\n canvas.add(icon).setActiveObject(icon);\n\n resolve(this.graphics.createObjectProperties(icon));\n });\n }\n\n /**\n * Register icon paths\n * @param {{key: string, value: string}} pathInfos - Path infos\n */\n registerPaths(pathInfos) {\n snippet.forEach(\n pathInfos,\n (path, type) => {\n this._pathMap[type] = path;\n },\n this\n );\n }\n\n /**\n * Set icon object color\n * @param {string} color - Color to set\n * @param {fabric.Path}[obj] - Current activated path object\n */\n setColor(color, obj) {\n this._oColor = color;\n\n if (obj && obj.get('type') === 'icon') {\n obj.set({ fill: this._oColor });\n this.getCanvas().renderAll();\n }\n }\n\n /**\n * Get icon color\n * @param {fabric.Path}[obj] - Current activated path object\n * @returns {string} color\n */\n getColor(obj) {\n return obj.fill;\n }\n\n /**\n * Create icon object\n * @param {string} path - Path value to create icon\n * @returns {fabric.Path} Path object\n */\n _createIcon(path) {\n return new fabric.Path(path);\n }\n\n /**\n * MouseDown event handler on canvas\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object\n * @private\n */\n _onFabricMouseDown(fEvent) {\n const canvas = this.getCanvas();\n\n this._startPoint = canvas.getPointer(fEvent.e);\n const { x: left, y: top } = this._startPoint;\n\n this.add(this._type, {\n left,\n top,\n fill: this._iconColor,\n }).then(() => {\n this.fire(events.ADD_OBJECT, this.graphics.createObjectProperties(this._icon));\n canvas.on('mouse:move', this._handlers.mousemove);\n canvas.on('mouse:up', this._handlers.mouseup);\n });\n }\n\n /**\n * MouseMove event handler on canvas\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object\n * @private\n */\n _onFabricMouseMove(fEvent) {\n const canvas = this.getCanvas();\n\n if (!this._icon) {\n return;\n }\n const moveOriginPointer = canvas.getPointer(fEvent.e);\n\n const scaleX = (moveOriginPointer.x - this._startPoint.x) / this._icon.width;\n const scaleY = (moveOriginPointer.y - this._startPoint.y) / this._icon.height;\n\n this._icon.set({\n scaleX: Math.abs(scaleX * 2),\n scaleY: Math.abs(scaleY * 2),\n });\n\n this._icon.setCoords();\n canvas.renderAll();\n }\n\n /**\n * MouseUp event handler on canvas\n * @private\n */\n _onFabricMouseUp() {\n const canvas = this.getCanvas();\n\n this.fire(events.OBJECT_ADDED, this.graphics.createObjectProperties(this._icon));\n\n this._icon = null;\n\n canvas.off('mouse:down', this._handlers.mousedown);\n canvas.off('mouse:move', this._handlers.mousemove);\n canvas.off('mouse:up', this._handlers.mouseup);\n }\n}\n\nexport default Icon;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Image loader\n */\nimport Component from '@/interface/component';\nimport { Promise } from '@/util';\nimport { componentNames, rejectMessages } from '@/consts';\n\nconst imageOption = {\n padding: 0,\n crossOrigin: 'Anonymous',\n};\n\n/**\n * ImageLoader components\n * @extends {Component}\n * @class ImageLoader\n * @param {Graphics} graphics - Graphics instance\n * @ignore\n */\nclass ImageLoader extends Component {\n constructor(graphics) {\n super(componentNames.IMAGE_LOADER, graphics);\n }\n\n /**\n * Load image from url\n * @param {?string} imageName - File name\n * @param {?(fabric.Image|string)} img - fabric.Image instance or URL of an image\n * @returns {Promise}\n */\n load(imageName, img) {\n let promise;\n\n if (!imageName && !img) {\n // Back to the initial state, not error.\n const canvas = this.getCanvas();\n\n canvas.backgroundImage = null;\n canvas.renderAll();\n\n promise = new Promise((resolve) => {\n this.setCanvasImage('', null);\n resolve();\n });\n } else {\n promise = this._setBackgroundImage(img).then((oImage) => {\n this.setCanvasImage(imageName, oImage);\n this.adjustCanvasDimension();\n\n return oImage;\n });\n }\n\n return promise;\n }\n\n /**\n * Set background image\n * @param {?(fabric.Image|String)} img fabric.Image instance or URL of an image to set background to\n * @returns {Promise}\n * @private\n */\n _setBackgroundImage(img) {\n if (!img) {\n return Promise.reject(rejectMessages.loadImage);\n }\n\n return new Promise((resolve, reject) => {\n const canvas = this.getCanvas();\n\n canvas.setBackgroundImage(\n img,\n () => {\n const oImage = canvas.backgroundImage;\n\n if (oImage && oImage.getElement()) {\n resolve(oImage);\n } else {\n reject(rejectMessages.loadingImageFailed);\n }\n },\n imageOption\n );\n });\n }\n}\n\nexport default ImageLoader;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Free drawing module, Set brush\n */\nimport snippet from 'tui-code-snippet';\nimport fabric from 'fabric';\nimport Component from '@/interface/component';\nimport ArrowLine from '@/extension/arrowLine';\nimport { eventNames, componentNames, fObjectOptions } from '@/consts';\n\n/**\n * Line\n * @class Line\n * @param {Graphics} graphics - Graphics instance\n * @extends {Component}\n * @ignore\n */\nclass Line extends Component {\n constructor(graphics) {\n super(componentNames.LINE, graphics);\n\n /**\n * Brush width\n * @type {number}\n * @private\n */\n this._width = 12;\n\n /**\n * fabric.Color instance for brush color\n * @type {fabric.Color}\n * @private\n */\n this._oColor = new fabric.Color('rgba(0, 0, 0, 0.5)');\n\n /**\n * Listeners\n * @type {object.}\n * @private\n */\n this._listeners = {\n mousedown: this._onFabricMouseDown.bind(this),\n mousemove: this._onFabricMouseMove.bind(this),\n mouseup: this._onFabricMouseUp.bind(this),\n };\n }\n\n /**\n * Start drawing line mode\n * @param {{width: ?number, color: ?string}} [setting] - Brush width & color\n */\n setHeadOption(setting) {\n const {\n arrowType = {\n head: null,\n tail: null,\n },\n } = setting;\n\n this._arrowType = arrowType;\n }\n\n /**\n * Start drawing line mode\n * @param {{width: ?number, color: ?string}} [setting] - Brush width & color\n */\n start(setting = {}) {\n const canvas = this.getCanvas();\n\n canvas.defaultCursor = 'crosshair';\n canvas.selection = false;\n\n this.setHeadOption(setting);\n this.setBrush(setting);\n\n canvas.forEachObject((obj) => {\n obj.set({\n evented: false,\n });\n });\n\n canvas.on({\n 'mouse:down': this._listeners.mousedown,\n });\n }\n\n /**\n * Set brush\n * @param {{width: ?number, color: ?string}} [setting] - Brush width & color\n */\n setBrush(setting) {\n const brush = this.getCanvas().freeDrawingBrush;\n\n setting = setting || {};\n this._width = setting.width || this._width;\n\n if (setting.color) {\n this._oColor = new fabric.Color(setting.color);\n }\n brush.width = this._width;\n brush.color = this._oColor.toRgba();\n }\n\n /**\n * End drawing line mode\n */\n end() {\n const canvas = this.getCanvas();\n\n canvas.defaultCursor = 'default';\n canvas.selection = true;\n\n canvas.forEachObject((obj) => {\n obj.set({\n evented: true,\n });\n });\n\n canvas.off('mouse:down', this._listeners.mousedown);\n }\n\n /**\n * Mousedown event handler in fabric canvas\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object\n * @private\n */\n _onFabricMouseDown(fEvent) {\n const canvas = this.getCanvas();\n const { x, y } = canvas.getPointer(fEvent.e);\n const points = [x, y, x, y];\n\n this._line = new ArrowLine(points, {\n stroke: this._oColor.toRgba(),\n strokeWidth: this._width,\n arrowType: this._arrowType,\n evented: false,\n });\n\n this._line.set(fObjectOptions.SELECTION_STYLE);\n\n canvas.add(this._line);\n\n canvas.on({\n 'mouse:move': this._listeners.mousemove,\n 'mouse:up': this._listeners.mouseup,\n });\n\n this.fire(eventNames.ADD_OBJECT, this._createLineEventObjectProperties());\n }\n\n /**\n * Mousemove event handler in fabric canvas\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object\n * @private\n */\n _onFabricMouseMove(fEvent) {\n const canvas = this.getCanvas();\n const pointer = canvas.getPointer(fEvent.e);\n\n this._line.set({\n x2: pointer.x,\n y2: pointer.y,\n });\n\n this._line.setCoords();\n\n canvas.renderAll();\n }\n\n /**\n * Mouseup event handler in fabric canvas\n * @private\n */\n _onFabricMouseUp() {\n const canvas = this.getCanvas();\n\n this.fire(eventNames.OBJECT_ADDED, this._createLineEventObjectProperties());\n\n this._line = null;\n\n canvas.off({\n 'mouse:move': this._listeners.mousemove,\n 'mouse:up': this._listeners.mouseup,\n });\n }\n\n /**\n * create line event object properties\n * @returns {Object} properties line object\n * @private\n */\n _createLineEventObjectProperties() {\n const params = this.graphics.createObjectProperties(this._line);\n const { x1, x2, y1, y2 } = this._line;\n\n return snippet.extend({}, params, {\n startPosition: {\n x: x1,\n y: y1,\n },\n endPosition: {\n x: x2,\n y: y2,\n },\n });\n }\n}\n\nexport default Line;\n","import { Promise } from '@/util';\nimport Component from '@/interface/component';\nimport { componentNames } from '@/consts';\n\n/**\n * Resize components\n * @param {Graphics} graphics - Graphics instance\n * @extends {Component}\n * @class Resize\n * @ignore\n */\nclass Resize extends Component {\n constructor(graphics) {\n super(componentNames.RESIZE, graphics);\n\n /**\n * Current dimensions\n * @type {Object}\n * @private\n */\n this._dimensions = null;\n\n /**\n * Original dimensions\n * @type {Object}\n * @private\n */\n this._originalDimensions = null;\n }\n\n /**\n * Get current dimensions\n * @returns {object}\n */\n getCurrentDimensions() {\n const canvasImage = this.getCanvasImage();\n if (!this._dimensions && canvasImage) {\n const { width, height } = canvasImage;\n this._dimensions = { width, height };\n }\n\n return this._dimensions;\n }\n\n /**\n * Get original dimensions\n * @returns {object}\n */\n getOriginalDimensions() {\n return this._originalDimensions;\n }\n\n /**\n * Set original dimensions\n * @param {object} dimensions - Dimensions\n */\n setOriginalDimensions(dimensions) {\n this._originalDimensions = dimensions;\n }\n\n /**\n * Resize Image\n * @param {Object} dimensions - Resize dimensions\n * @returns {Promise}\n */\n resize(dimensions) {\n const canvasImage = this.getCanvasImage();\n const { width, height, scaleX, scaleY } = canvasImage;\n const { width: dimensionsWidth, height: dimensionsHeight } = dimensions;\n\n const scaleValues = {\n scaleX: dimensionsWidth ? dimensionsWidth / width : scaleX,\n scaleY: dimensionsHeight ? dimensionsHeight / height : scaleY,\n };\n\n if (scaleX !== scaleValues.scaleX || scaleY !== scaleValues.scaleY) {\n canvasImage.set(scaleValues).setCoords();\n\n this._dimensions = {\n width: canvasImage.width * canvasImage.scaleX,\n height: canvasImage.height * canvasImage.scaleY,\n };\n }\n\n this.adjustCanvasDimensionBase();\n\n return Promise.resolve();\n }\n\n /**\n * Start resizing\n */\n start() {\n const dimensions = this.getCurrentDimensions();\n this.setOriginalDimensions(dimensions);\n }\n\n /**\n * End resizing\n */\n end() {}\n}\n\nexport default Resize;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Image rotation module\n */\nimport fabric from 'fabric';\nimport Component from '@/interface/component';\nimport { Promise } from '@/util';\nimport { componentNames } from '@/consts';\n\n/**\n * Image Rotation component\n * @class Rotation\n * @extends {Component}\n * @param {Graphics} graphics - Graphics instance\n * @ignore\n */\nclass Rotation extends Component {\n constructor(graphics) {\n super(componentNames.ROTATION, graphics);\n }\n\n /**\n * Get current angle\n * @returns {Number}\n */\n getCurrentAngle() {\n return this.getCanvasImage().angle;\n }\n\n /**\n * Set angle of the image\n *\n * Do not call \"this.setImageProperties\" for setting angle directly.\n * Before setting angle, The originX,Y of image should be set to center.\n * See \"http://fabricjs.com/docs/fabric.Object.html#setAngle\"\n *\n * @param {number} angle - Angle value\n * @returns {Promise}\n */\n setAngle(angle) {\n const oldAngle = this.getCurrentAngle() % 360; // The angle is lower than 2*PI(===360 degrees)\n\n angle %= 360;\n\n const canvasImage = this.getCanvasImage();\n const oldImageCenter = canvasImage.getCenterPoint();\n canvasImage.set({ angle }).setCoords();\n this.adjustCanvasDimension();\n const newImageCenter = canvasImage.getCenterPoint();\n this._rotateForEachObject(oldImageCenter, newImageCenter, angle - oldAngle);\n\n return Promise.resolve(angle);\n }\n\n /**\n * Rotate for each object\n * @param {fabric.Point} oldImageCenter - Image center point before rotation\n * @param {fabric.Point} newImageCenter - Image center point after rotation\n * @param {number} angleDiff - Image angle difference after rotation\n * @private\n */\n _rotateForEachObject(oldImageCenter, newImageCenter, angleDiff) {\n const canvas = this.getCanvas();\n const centerDiff = {\n x: oldImageCenter.x - newImageCenter.x,\n y: oldImageCenter.y - newImageCenter.y,\n };\n\n canvas.forEachObject((obj) => {\n const objCenter = obj.getCenterPoint();\n const radian = fabric.util.degreesToRadians(angleDiff);\n const newObjCenter = fabric.util.rotatePoint(objCenter, oldImageCenter, radian);\n\n obj.set({\n left: newObjCenter.x - centerDiff.x,\n top: newObjCenter.y - centerDiff.y,\n angle: (obj.angle + angleDiff) % 360,\n });\n obj.setCoords();\n });\n canvas.renderAll();\n }\n\n /**\n * Rotate the image\n * @param {number} additionalAngle - Additional angle\n * @returns {Promise}\n */\n rotate(additionalAngle) {\n const current = this.getCurrentAngle();\n\n return this.setAngle(current + additionalAngle);\n }\n}\n\nexport default Rotation;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Shape component\n */\nimport { extend } from 'tui-code-snippet';\nimport fabric from 'fabric';\nimport Component from '@/interface/component';\nimport resizeHelper from '@/helper/shapeResizeHelper';\nimport {\n getFillImageFromShape,\n rePositionFilterTypeFillImage,\n reMakePatternImageSource,\n makeFillPatternForFilter,\n makeFilterOptionFromFabricImage,\n resetFillPatternCanvas,\n} from '@/helper/shapeFilterFillHelper';\nimport {\n Promise,\n changeOrigin,\n getCustomProperty,\n getFillTypeFromOption,\n getFillTypeFromObject,\n isShape,\n} from '@/util';\nimport {\n rejectMessages,\n eventNames,\n keyCodes as KEY_CODES,\n componentNames,\n fObjectOptions,\n SHAPE_DEFAULT_OPTIONS,\n SHAPE_FILL_TYPE,\n} from '@/consts';\n\nconst SHAPE_INIT_OPTIONS = extend(\n {\n strokeWidth: 1,\n stroke: '#000000',\n fill: '#ffffff',\n width: 1,\n height: 1,\n rx: 0,\n ry: 0,\n },\n SHAPE_DEFAULT_OPTIONS\n);\nconst DEFAULT_TYPE = 'rect';\nconst DEFAULT_WIDTH = 20;\nconst DEFAULT_HEIGHT = 20;\n\n/**\n * Make fill option\n * @param {Object} options - Options to create the shape\n * @param {Object.Image} canvasImage - canvas background image\n * @param {Function} createStaticCanvas - static canvas creater\n * @returns {Object} - shape option\n * @private\n */\nfunction makeFabricFillOption(options, canvasImage, createStaticCanvas) {\n const fillOption = options.fill;\n const fillType = getFillTypeFromOption(options.fill);\n let fill = fillOption;\n\n if (fillOption.color) {\n fill = fillOption.color;\n }\n\n let extOption = null;\n if (fillType === 'filter') {\n const newStaticCanvas = createStaticCanvas();\n extOption = makeFillPatternForFilter(canvasImage, fillOption.filter, newStaticCanvas);\n } else {\n extOption = { fill };\n }\n\n return extend({}, options, extOption);\n}\n\n/**\n * Shape\n * @class Shape\n * @param {Graphics} graphics - Graphics instance\n * @extends {Component}\n * @ignore\n */\nexport default class Shape extends Component {\n constructor(graphics) {\n super(componentNames.SHAPE, graphics);\n\n /**\n * Object of The drawing shape\n * @type {fabric.Object}\n * @private\n */\n this._shapeObj = null;\n\n /**\n * Type of the drawing shape\n * @type {string}\n * @private\n */\n this._type = DEFAULT_TYPE;\n\n /**\n * Options to draw the shape\n * @type {Object}\n * @private\n */\n this._options = extend({}, SHAPE_INIT_OPTIONS);\n\n /**\n * Whether the shape object is selected or not\n * @type {boolean}\n * @private\n */\n this._isSelected = false;\n\n /**\n * Pointer for drawing shape (x, y)\n * @type {Object}\n * @private\n */\n this._startPoint = {};\n\n /**\n * Using shortcut on drawing shape\n * @type {boolean}\n * @private\n */\n this._withShiftKey = false;\n\n /**\n * Event handler list\n * @type {Object}\n * @private\n */\n this._handlers = {\n mousedown: this._onFabricMouseDown.bind(this),\n mousemove: this._onFabricMouseMove.bind(this),\n mouseup: this._onFabricMouseUp.bind(this),\n keydown: this._onKeyDown.bind(this),\n keyup: this._onKeyUp.bind(this),\n };\n }\n\n /**\n * Start to draw the shape on canvas\n * @ignore\n */\n start() {\n const canvas = this.getCanvas();\n\n this._isSelected = false;\n\n canvas.defaultCursor = 'crosshair';\n canvas.selection = false;\n canvas.uniformScaling = true;\n canvas.on({\n 'mouse:down': this._handlers.mousedown,\n });\n\n fabric.util.addListener(document, 'keydown', this._handlers.keydown);\n fabric.util.addListener(document, 'keyup', this._handlers.keyup);\n }\n\n /**\n * End to draw the shape on canvas\n * @ignore\n */\n end() {\n const canvas = this.getCanvas();\n\n this._isSelected = false;\n\n canvas.defaultCursor = 'default';\n\n canvas.selection = true;\n canvas.uniformScaling = false;\n canvas.off({\n 'mouse:down': this._handlers.mousedown,\n });\n\n fabric.util.removeListener(document, 'keydown', this._handlers.keydown);\n fabric.util.removeListener(document, 'keyup', this._handlers.keyup);\n }\n\n /**\n * Set states of the current drawing shape\n * @ignore\n * @param {string} type - Shape type (ex: 'rect', 'circle')\n * @param {Object} [options] - Shape options\n * @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or\n * Shape foreground color (ex: '#fff', 'transparent')\n * @param {string} [options.stoke] - Shape outline color\n * @param {number} [options.strokeWidth] - Shape outline width\n * @param {number} [options.width] - Width value (When type option is 'rect', this options can use)\n * @param {number} [options.height] - Height value (When type option is 'rect', this options can use)\n * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)\n * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)\n */\n setStates(type, options) {\n this._type = type;\n\n if (options) {\n this._options = extend(this._options, options);\n }\n }\n\n /**\n * Add the shape\n * @ignore\n * @param {string} type - Shape type (ex: 'rect', 'circle')\n * @param {Object} options - Shape options\n * @param {(ShapeFillOption | string)} [options.fill] - ShapeFillOption or Shape foreground color (ex: '#fff', 'transparent') or ShapeFillOption object\n * @param {string} [options.stroke] - Shape outline color\n * @param {number} [options.strokeWidth] - Shape outline width\n * @param {number} [options.width] - Width value (When type option is 'rect', this options can use)\n * @param {number} [options.height] - Height value (When type option is 'rect', this options can use)\n * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)\n * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)\n * @param {number} [options.isRegular] - Whether scaling shape has 1:1 ratio or not\n * @returns {Promise}\n */\n add(type, options) {\n return new Promise((resolve) => {\n const canvas = this.getCanvas();\n const extendOption = this._extendOptions(options);\n\n const shapeObj = this._createInstance(type, extendOption);\n const objectProperties = this.graphics.createObjectProperties(shapeObj);\n\n this._bindEventOnShape(shapeObj);\n\n canvas.add(shapeObj).setActiveObject(shapeObj);\n\n this._resetPositionFillFilter(shapeObj);\n\n resolve(objectProperties);\n });\n }\n\n /**\n * Change the shape\n * @ignore\n * @param {fabric.Object} shapeObj - Selected shape object on canvas\n * @param {Object} options - Shape options\n * @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or\n * Shape foreground color (ex: '#fff', 'transparent')\n * @param {string} [options.stroke] - Shape outline color\n * @param {number} [options.strokeWidth] - Shape outline width\n * @param {number} [options.width] - Width value (When type option is 'rect', this options can use)\n * @param {number} [options.height] - Height value (When type option is 'rect', this options can use)\n * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)\n * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)\n * @param {number} [options.isRegular] - Whether scaling shape has 1:1 ratio or not\n * @returns {Promise}\n */\n change(shapeObj, options) {\n return new Promise((resolve, reject) => {\n if (!isShape(shapeObj)) {\n reject(rejectMessages.unsupportedType);\n }\n const hasFillOption = getFillTypeFromOption(options.fill) === 'filter';\n const { canvasImage, createStaticCanvas } = this.graphics;\n\n shapeObj.set(\n hasFillOption ? makeFabricFillOption(options, canvasImage, createStaticCanvas) : options\n );\n\n if (hasFillOption) {\n this._resetPositionFillFilter(shapeObj);\n }\n\n this.getCanvas().renderAll();\n resolve();\n });\n }\n\n /**\n * make fill property for user event\n * @param {fabric.Object} shapeObj - fabric object\n * @returns {Object}\n */\n makeFillPropertyForUserEvent(shapeObj) {\n const fillType = getFillTypeFromObject(shapeObj);\n const fillProp = {};\n\n if (fillType === SHAPE_FILL_TYPE.FILTER) {\n const fillImage = getFillImageFromShape(shapeObj);\n const filterOption = makeFilterOptionFromFabricImage(fillImage);\n\n fillProp.type = fillType;\n fillProp.filter = filterOption;\n } else {\n fillProp.type = SHAPE_FILL_TYPE.COLOR;\n fillProp.color = shapeObj.fill || 'transparent';\n }\n\n return fillProp;\n }\n\n /**\n * Copy object handling.\n * @param {fabric.Object} shapeObj - Shape object\n * @param {fabric.Object} originalShapeObj - Shape object\n */\n processForCopiedObject(shapeObj, originalShapeObj) {\n this._bindEventOnShape(shapeObj);\n\n if (getFillTypeFromObject(shapeObj) === 'filter') {\n const fillImage = getFillImageFromShape(originalShapeObj);\n const filterOption = makeFilterOptionFromFabricImage(fillImage);\n const newStaticCanvas = this.graphics.createStaticCanvas();\n\n shapeObj.set(\n makeFillPatternForFilter(this.graphics.canvasImage, filterOption, newStaticCanvas)\n );\n this._resetPositionFillFilter(shapeObj);\n }\n }\n\n /**\n * Create the instance of shape\n * @param {string} type - Shape type\n * @param {Object} options - Options to creat the shape\n * @returns {fabric.Object} Shape instance\n * @private\n */\n _createInstance(type, options) {\n let instance;\n\n switch (type) {\n case 'rect':\n instance = new fabric.Rect(options);\n break;\n case 'circle':\n instance = new fabric.Ellipse(\n extend(\n {\n type: 'circle',\n },\n options\n )\n );\n break;\n case 'triangle':\n instance = new fabric.Triangle(options);\n break;\n default:\n instance = {};\n }\n\n return instance;\n }\n\n /**\n * Get the options to create the shape\n * @param {Object} options - Options to creat the shape\n * @returns {Object} Shape options\n * @private\n */\n _extendOptions(options) {\n const selectionStyles = fObjectOptions.SELECTION_STYLE;\n const { canvasImage, createStaticCanvas } = this.graphics;\n\n options = extend({}, SHAPE_INIT_OPTIONS, this._options, selectionStyles, options);\n\n return makeFabricFillOption(options, canvasImage, createStaticCanvas);\n }\n\n /**\n * Bind fabric events on the creating shape object\n * @param {fabric.Object} shapeObj - Shape object\n * @private\n */\n _bindEventOnShape(shapeObj) {\n const self = this;\n const canvas = this.getCanvas();\n\n shapeObj.on({\n added() {\n self._shapeObj = this;\n resizeHelper.setOrigins(self._shapeObj);\n },\n selected() {\n self._isSelected = true;\n self._shapeObj = this;\n canvas.uniformScaling = true;\n canvas.defaultCursor = 'default';\n resizeHelper.setOrigins(self._shapeObj);\n },\n deselected() {\n self._isSelected = false;\n self._shapeObj = null;\n canvas.defaultCursor = 'crosshair';\n canvas.uniformScaling = false;\n },\n modified() {\n const currentObj = self._shapeObj;\n\n resizeHelper.adjustOriginToCenter(currentObj);\n resizeHelper.setOrigins(currentObj);\n },\n modifiedInGroup(activeSelection) {\n self._fillFilterRePositionInGroupSelection(shapeObj, activeSelection);\n },\n moving() {\n self._resetPositionFillFilter(this);\n },\n rotating() {\n self._resetPositionFillFilter(this);\n },\n scaling(fEvent) {\n const pointer = canvas.getPointer(fEvent.e);\n const currentObj = self._shapeObj;\n\n canvas.setCursor('crosshair');\n resizeHelper.resize(currentObj, pointer, true);\n\n self._resetPositionFillFilter(this);\n },\n });\n }\n\n /**\n * MouseDown event handler on canvas\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object\n * @private\n */\n _onFabricMouseDown(fEvent) {\n if (!fEvent.target) {\n this._isSelected = false;\n this._shapeObj = false;\n }\n\n if (!this._isSelected && !this._shapeObj) {\n const canvas = this.getCanvas();\n this._startPoint = canvas.getPointer(fEvent.e);\n\n canvas.on({\n 'mouse:move': this._handlers.mousemove,\n 'mouse:up': this._handlers.mouseup,\n });\n }\n }\n\n /**\n * MouseDown event handler on canvas\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object\n * @private\n */\n _onFabricMouseMove(fEvent) {\n const canvas = this.getCanvas();\n const pointer = canvas.getPointer(fEvent.e);\n const startPointX = this._startPoint.x;\n const startPointY = this._startPoint.y;\n const width = startPointX - pointer.x;\n const height = startPointY - pointer.y;\n const shape = this._shapeObj;\n\n if (!shape) {\n this.add(this._type, {\n left: startPointX,\n top: startPointY,\n width,\n height,\n }).then((objectProps) => {\n this.fire(eventNames.ADD_OBJECT, objectProps);\n });\n } else {\n this._shapeObj.set({\n isRegular: this._withShiftKey,\n });\n\n resizeHelper.resize(shape, pointer);\n canvas.renderAll();\n\n this._resetPositionFillFilter(shape);\n }\n }\n\n /**\n * MouseUp event handler on canvas\n * @private\n */\n _onFabricMouseUp() {\n const canvas = this.getCanvas();\n const startPointX = this._startPoint.x;\n const startPointY = this._startPoint.y;\n const shape = this._shapeObj;\n\n if (!shape) {\n this.add(this._type, {\n left: startPointX,\n top: startPointY,\n width: DEFAULT_WIDTH,\n height: DEFAULT_HEIGHT,\n }).then((objectProps) => {\n this.fire(eventNames.ADD_OBJECT, objectProps);\n });\n } else if (shape) {\n resizeHelper.adjustOriginToCenter(shape);\n this.fire(eventNames.OBJECT_ADDED, this.graphics.createObjectProperties(shape));\n }\n\n canvas.off({\n 'mouse:move': this._handlers.mousemove,\n 'mouse:up': this._handlers.mouseup,\n });\n }\n\n /**\n * Keydown event handler on document\n * @param {KeyboardEvent} e - Event object\n * @private\n */\n _onKeyDown(e) {\n if (e.keyCode === KEY_CODES.SHIFT) {\n this._withShiftKey = true;\n\n if (this._shapeObj) {\n this._shapeObj.isRegular = true;\n }\n }\n }\n\n /**\n * Keyup event handler on document\n * @param {KeyboardEvent} e - Event object\n * @private\n */\n _onKeyUp(e) {\n if (e.keyCode === KEY_CODES.SHIFT) {\n this._withShiftKey = false;\n\n if (this._shapeObj) {\n this._shapeObj.isRegular = false;\n }\n }\n }\n\n /**\n * Reset shape position and internal proportions in the filter type fill area.\n * @param {fabric.Object} shapeObj - Shape object\n * @private\n */\n _resetPositionFillFilter(shapeObj) {\n if (getFillTypeFromObject(shapeObj) !== 'filter') {\n return;\n }\n\n const { patternSourceCanvas } = getCustomProperty(shapeObj, 'patternSourceCanvas');\n\n const fillImage = getFillImageFromShape(shapeObj);\n const { originalAngle } = getCustomProperty(fillImage, 'originalAngle');\n\n if (this.graphics.canvasImage.angle !== originalAngle) {\n reMakePatternImageSource(shapeObj, this.graphics.canvasImage);\n }\n const { originX, originY } = shapeObj;\n\n resizeHelper.adjustOriginToCenter(shapeObj);\n\n shapeObj.width *= shapeObj.scaleX;\n shapeObj.height *= shapeObj.scaleY;\n shapeObj.rx *= shapeObj.scaleX;\n shapeObj.ry *= shapeObj.scaleY;\n shapeObj.scaleX = 1;\n shapeObj.scaleY = 1;\n\n rePositionFilterTypeFillImage(shapeObj);\n\n changeOrigin(shapeObj, {\n originX,\n originY,\n });\n\n resetFillPatternCanvas(patternSourceCanvas);\n }\n\n /**\n * Reset filter area position within group selection.\n * @param {fabric.Object} shapeObj - Shape object\n * @param {fabric.ActiveSelection} activeSelection - Shape object\n * @private\n */\n _fillFilterRePositionInGroupSelection(shapeObj, activeSelection) {\n if (activeSelection.scaleX !== 1 || activeSelection.scaleY !== 1) {\n // This is necessary because the group's scale transition state affects the relative size of the fill area.\n // The only way to reset the object transformation scale state to neutral.\n // {@link https://github.com/fabricjs/fabric.js/issues/5372}\n activeSelection.addWithUpdate();\n }\n\n const { angle, left, top } = shapeObj;\n\n fabric.util.addTransformToObject(shapeObj, activeSelection.calcTransformMatrix());\n this._resetPositionFillFilter(shapeObj);\n\n shapeObj.set({\n angle,\n left,\n top,\n });\n }\n}\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Text module\n */\nimport snippet from 'tui-code-snippet';\nimport fabric from 'fabric';\nimport Component from '@/interface/component';\nimport { Promise } from '@/util';\nimport { componentNames, eventNames as events, fObjectOptions } from '@/consts';\n\nconst defaultStyles = {\n fill: '#000000',\n left: 0,\n top: 0,\n};\nconst resetStyles = {\n fill: '#000000',\n fontStyle: 'normal',\n fontWeight: 'normal',\n textAlign: 'tie-text-align-left',\n underline: false,\n};\nconst DBCLICK_TIME = 500;\n\n/**\n * Text\n * @class Text\n * @param {Graphics} graphics - Graphics instance\n * @extends {Component}\n * @ignore\n */\nclass Text extends Component {\n constructor(graphics) {\n super(componentNames.TEXT, graphics);\n\n /**\n * Default text style\n * @type {Object}\n */\n this._defaultStyles = defaultStyles;\n\n /**\n * Selected state\n * @type {boolean}\n */\n this._isSelected = false;\n\n /**\n * Selected text object\n * @type {Object}\n */\n this._selectedObj = {};\n\n /**\n * Editing text object\n * @type {Object}\n */\n this._editingObj = {};\n\n /**\n * Listeners for fabric event\n * @type {Object}\n */\n this._listeners = {\n mousedown: this._onFabricMouseDown.bind(this),\n select: this._onFabricSelect.bind(this),\n selectClear: this._onFabricSelectClear.bind(this),\n scaling: this._onFabricScaling.bind(this),\n textChanged: this._onFabricTextChanged.bind(this),\n };\n\n /**\n * Textarea element for editing\n * @type {HTMLElement}\n */\n this._textarea = null;\n\n /**\n * Ratio of current canvas\n * @type {number}\n */\n this._ratio = 1;\n\n /**\n * Last click time\n * @type {Date}\n */\n this._lastClickTime = new Date().getTime();\n\n /**\n * Text object infos before editing\n * @type {Object}\n */\n this._editingObjInfos = {};\n\n /**\n * Previous state of editing\n * @type {boolean}\n */\n this.isPrevEditing = false;\n }\n\n /**\n * Start input text mode\n */\n start() {\n const canvas = this.getCanvas();\n\n canvas.selection = false;\n canvas.defaultCursor = 'text';\n canvas.on({\n 'mouse:down': this._listeners.mousedown,\n 'selection:created': this._listeners.select,\n 'selection:updated': this._listeners.select,\n 'before:selection:cleared': this._listeners.selectClear,\n 'object:scaling': this._listeners.scaling,\n 'text:changed': this._listeners.textChanged,\n });\n\n canvas.forEachObject((obj) => {\n if (obj.type === 'i-text') {\n this.adjustOriginPosition(obj, 'start');\n }\n });\n\n this.setCanvasRatio();\n }\n\n /**\n * End input text mode\n */\n end() {\n const canvas = this.getCanvas();\n\n canvas.selection = true;\n canvas.defaultCursor = 'default';\n\n canvas.forEachObject((obj) => {\n if (obj.type === 'i-text') {\n if (obj.text === '') {\n canvas.remove(obj);\n } else {\n this.adjustOriginPosition(obj, 'end');\n }\n }\n });\n\n canvas.off({\n 'mouse:down': this._listeners.mousedown,\n 'selection:created': this._listeners.select,\n 'selection:updated': this._listeners.select,\n 'before:selection:cleared': this._listeners.selectClear,\n 'object:selected': this._listeners.select,\n 'object:scaling': this._listeners.scaling,\n 'text:changed': this._listeners.textChanged,\n });\n }\n\n /**\n * Adjust the origin position\n * @param {fabric.Object} text - text object\n * @param {string} editStatus - 'start' or 'end'\n */\n adjustOriginPosition(text, editStatus) {\n let [originX, originY] = ['center', 'center'];\n if (editStatus === 'start') {\n [originX, originY] = ['left', 'top'];\n }\n\n const { x: left, y: top } = text.getPointByOrigin(originX, originY);\n text.set({\n left,\n top,\n originX,\n originY,\n });\n text.setCoords();\n }\n\n /**\n * Add new text on canvas image\n * @param {string} text - Initial input text\n * @param {Object} options - Options for generating text\n * @param {Object} [options.styles] Initial styles\n * @param {string} [options.styles.fill] Color\n * @param {string} [options.styles.fontFamily] Font type for text\n * @param {number} [options.styles.fontSize] Size\n * @param {string} [options.styles.fontStyle] Type of inclination (normal / italic)\n * @param {string} [options.styles.fontWeight] Type of thicker or thinner looking (normal / bold)\n * @param {string} [options.styles.textAlign] Type of text align (left / center / right)\n * @param {string} [options.styles.textDecoration] Type of line (underline / line-through / overline)\n * @param {{x: number, y: number}} [options.position] - Initial position\n * @returns {Promise}\n */\n add(text, options) {\n return new Promise((resolve) => {\n const canvas = this.getCanvas();\n let newText = null;\n let selectionStyle = fObjectOptions.SELECTION_STYLE;\n let styles = this._defaultStyles;\n\n this._setInitPos(options.position);\n\n if (options.styles) {\n styles = snippet.extend(styles, options.styles);\n }\n\n if (!snippet.isExisty(options.autofocus)) {\n options.autofocus = true;\n }\n\n newText = new fabric.IText(text, styles);\n selectionStyle = snippet.extend({}, selectionStyle, {\n originX: 'left',\n originY: 'top',\n });\n\n newText.set(selectionStyle);\n newText.on({\n mouseup: this._onFabricMouseUp.bind(this),\n });\n\n canvas.add(newText);\n\n if (options.autofocus) {\n newText.enterEditing();\n newText.selectAll();\n }\n\n if (!canvas.getActiveObject()) {\n canvas.setActiveObject(newText);\n }\n\n this.isPrevEditing = true;\n resolve(this.graphics.createObjectProperties(newText));\n });\n }\n\n /**\n * Change text of activate object on canvas image\n * @param {Object} activeObj - Current selected text object\n * @param {string} text - Changed text\n * @returns {Promise}\n */\n change(activeObj, text) {\n return new Promise((resolve) => {\n activeObj.set('text', text);\n\n this.getCanvas().renderAll();\n resolve();\n });\n }\n\n /**\n * Set style\n * @param {Object} activeObj - Current selected text object\n * @param {Object} styleObj - Initial styles\n * @param {string} [styleObj.fill] Color\n * @param {string} [styleObj.fontFamily] Font type for text\n * @param {number} [styleObj.fontSize] Size\n * @param {string} [styleObj.fontStyle] Type of inclination (normal / italic)\n * @param {string} [styleObj.fontWeight] Type of thicker or thinner looking (normal / bold)\n * @param {string} [styleObj.textAlign] Type of text align (left / center / right)\n * @param {string} [styleObj.textDecoration] Type of line (underline / line-through / overline)\n * @returns {Promise}\n */\n setStyle(activeObj, styleObj) {\n return new Promise((resolve) => {\n snippet.forEach(\n styleObj,\n (val, key) => {\n if (activeObj[key] === val && key !== 'fontSize') {\n styleObj[key] = resetStyles[key] || '';\n }\n },\n this\n );\n\n if ('textDecoration' in styleObj) {\n snippet.extend(styleObj, this._getTextDecorationAdaptObject(styleObj.textDecoration));\n }\n\n activeObj.set(styleObj);\n\n this.getCanvas().renderAll();\n resolve();\n });\n }\n\n /**\n * Get the text\n * @param {Object} activeObj - Current selected text object\n * @returns {String} text\n */\n getText(activeObj) {\n return activeObj.text;\n }\n\n /**\n * Set infos of the current selected object\n * @param {fabric.Text} obj - Current selected text object\n * @param {boolean} state - State of selecting\n */\n setSelectedInfo(obj, state) {\n this._selectedObj = obj;\n this._isSelected = state;\n }\n\n /**\n * Whether object is selected or not\n * @returns {boolean} State of selecting\n */\n isSelected() {\n return this._isSelected;\n }\n\n /**\n * Get current selected text object\n * @returns {fabric.Text} Current selected text object\n */\n getSelectedObj() {\n return this._selectedObj;\n }\n\n /**\n * Set ratio value of canvas\n */\n setCanvasRatio() {\n const canvasElement = this.getCanvasElement();\n const cssWidth = parseInt(canvasElement.style.maxWidth, 10);\n const originWidth = canvasElement.width;\n\n this._ratio = originWidth / cssWidth;\n }\n\n /**\n * Get ratio value of canvas\n * @returns {number} Ratio value\n */\n getCanvasRatio() {\n return this._ratio;\n }\n\n /**\n * Get text decoration adapt object\n * @param {string} textDecoration - text decoration option string\n * @returns {object} adapt object for override\n */\n _getTextDecorationAdaptObject(textDecoration) {\n return {\n underline: textDecoration === 'underline',\n linethrough: textDecoration === 'line-through',\n overline: textDecoration === 'overline',\n };\n }\n\n /**\n * Set initial position on canvas image\n * @param {{x: number, y: number}} [position] - Selected position\n * @private\n */\n _setInitPos(position) {\n position = position || this.getCanvasImage().getCenterPoint();\n\n this._defaultStyles.left = position.x;\n this._defaultStyles.top = position.y;\n }\n\n /**\n * Input event handler\n * @private\n */\n _onInput() {\n const ratio = this.getCanvasRatio();\n const obj = this._editingObj;\n const textareaStyle = this._textarea.style;\n\n textareaStyle.width = `${Math.ceil(obj.width / ratio)}px`;\n textareaStyle.height = `${Math.ceil(obj.height / ratio)}px`;\n }\n\n /**\n * Keydown event handler\n * @private\n */\n _onKeyDown() {\n const ratio = this.getCanvasRatio();\n const obj = this._editingObj;\n const textareaStyle = this._textarea.style;\n\n setTimeout(() => {\n obj.text(this._textarea.value);\n\n textareaStyle.width = `${Math.ceil(obj.width / ratio)}px`;\n textareaStyle.height = `${Math.ceil(obj.height / ratio)}px`;\n }, 0);\n }\n\n /**\n * Blur event handler\n * @private\n */\n _onBlur() {\n const ratio = this.getCanvasRatio();\n const editingObj = this._editingObj;\n const editingObjInfos = this._editingObjInfos;\n const textContent = this._textarea.value;\n let transWidth = editingObj.width / ratio - editingObjInfos.width / ratio;\n let transHeight = editingObj.height / ratio - editingObjInfos.height / ratio;\n\n if (ratio === 1) {\n transWidth /= 2;\n transHeight /= 2;\n }\n\n this._textarea.style.display = 'none';\n\n editingObj.set({\n left: editingObjInfos.left + transWidth,\n top: editingObjInfos.top + transHeight,\n });\n\n if (textContent.length) {\n this.getCanvas().add(editingObj);\n\n const params = {\n id: snippet.stamp(editingObj),\n type: editingObj.type,\n text: textContent,\n };\n\n this.fire(events.TEXT_CHANGED, params);\n }\n }\n\n /**\n * Scroll event handler\n * @private\n */\n _onScroll() {\n this._textarea.scrollLeft = 0;\n this._textarea.scrollTop = 0;\n }\n\n /**\n * Fabric scaling event handler\n * @param {fabric.Event} fEvent - Current scaling event on selected object\n * @private\n */\n _onFabricScaling(fEvent) {\n const obj = fEvent.target;\n\n obj.fontSize = obj.fontSize * obj.scaleY;\n obj.scaleX = 1;\n obj.scaleY = 1;\n }\n\n /**\n * textChanged event handler\n * @param {{target: fabric.Object}} props - changed text object\n * @private\n */\n _onFabricTextChanged(props) {\n this.fire(events.TEXT_CHANGED, props.target);\n }\n\n /**\n * onSelectClear handler in fabric canvas\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onFabricSelectClear(fEvent) {\n const obj = this.getSelectedObj();\n\n this.isPrevEditing = true;\n\n this.setSelectedInfo(fEvent.target, false);\n\n if (obj) {\n // obj is empty object at initial time, will be set fabric object\n if (obj.text === '') {\n this.getCanvas().remove(obj);\n }\n }\n }\n\n /**\n * onSelect handler in fabric canvas\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onFabricSelect(fEvent) {\n this.isPrevEditing = true;\n\n this.setSelectedInfo(fEvent.target, true);\n }\n\n /**\n * Fabric 'mousedown' event handler\n * @param {fabric.Event} fEvent - Current mousedown event on selected object\n * @private\n */\n _onFabricMouseDown(fEvent) {\n const obj = fEvent.target;\n\n if (obj && !obj.isType('text')) {\n return;\n }\n\n if (this.isPrevEditing) {\n this.isPrevEditing = false;\n\n return;\n }\n\n this._fireAddText(fEvent);\n }\n\n /**\n * Fire 'addText' event if object is not selected.\n * @param {fabric.Event} fEvent - Current mousedown event on selected object\n * @private\n */\n _fireAddText(fEvent) {\n const obj = fEvent.target;\n const e = fEvent.e || {};\n const originPointer = this.getCanvas().getPointer(e);\n\n if (!obj) {\n this.fire(events.ADD_TEXT, {\n originPosition: {\n x: originPointer.x,\n y: originPointer.y,\n },\n clientPosition: {\n x: e.clientX || 0,\n y: e.clientY || 0,\n },\n });\n }\n }\n\n /**\n * Fabric mouseup event handler\n * @param {fabric.Event} fEvent - Current mousedown event on selected object\n * @private\n */\n _onFabricMouseUp(fEvent) {\n const { target } = fEvent;\n const newClickTime = new Date().getTime();\n\n if (this._isDoubleClick(newClickTime) && !target.isEditing) {\n target.enterEditing();\n }\n\n if (target.isEditing) {\n this.fire(events.TEXT_EDITING); // fire editing text event\n }\n\n this._lastClickTime = newClickTime;\n }\n\n /**\n * Get state of firing double click event\n * @param {Date} newClickTime - Current clicked time\n * @returns {boolean} Whether double clicked or not\n * @private\n */\n _isDoubleClick(newClickTime) {\n return newClickTime - this._lastClickTime < DBCLICK_TIME;\n }\n}\n\nexport default Text;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Image zoom module (start zoom, end zoom)\n */\nimport fabric from 'fabric';\nimport Component from '@/interface/component';\nimport { clamp } from '@/util';\nimport { componentNames, eventNames, keyCodes, zoomModes } from '@/consts';\n\nconst MOUSE_MOVE_THRESHOLD = 10;\nconst DEFAULT_SCROLL_OPTION = {\n left: 0,\n top: 0,\n width: 0,\n height: 0,\n stroke: '#000000',\n strokeWidth: 0,\n fill: '#000000',\n opacity: 0.4,\n evented: false,\n selectable: false,\n hoverCursor: 'auto',\n};\nconst DEFAULT_VERTICAL_SCROLL_RATIO = {\n SIZE: 0.0045,\n MARGIN: 0.003,\n BORDER_RADIUS: 0.003,\n};\nconst DEFAULT_HORIZONTAL_SCROLL_RATIO = {\n SIZE: 0.0066,\n MARGIN: 0.0044,\n BORDER_RADIUS: 0.003,\n};\nconst DEFAULT_ZOOM_LEVEL = 1.0;\nconst {\n ZOOM_CHANGED,\n ADD_TEXT,\n TEXT_EDITING,\n OBJECT_MODIFIED,\n KEY_DOWN,\n KEY_UP,\n HAND_STARTED,\n HAND_STOPPED,\n} = eventNames;\n\n/**\n * Zoom components\n * @param {Graphics} graphics - Graphics instance\n * @extends {Component}\n * @class Zoom\n * @ignore\n */\nclass Zoom extends Component {\n constructor(graphics) {\n super(componentNames.ZOOM, graphics);\n\n /**\n * zoomArea\n * @type {?fabric.Rect}\n * @private\n */\n this.zoomArea = null;\n\n /**\n * Start point of zoom area\n * @type {?{x: number, y: number}}\n */\n this._startPoint = null;\n\n /**\n * Center point of every zoom\n * @type {Array.<{prevZoomLevel: number, zoomLevel: number, x: number, y: number}>}\n */\n this._centerPoints = [];\n\n /**\n * Zoom level (default: 100%(1.0), max: 400%(4.0))\n * @type {number}\n */\n this.zoomLevel = DEFAULT_ZOOM_LEVEL;\n\n /**\n * Zoom mode ('normal', 'zoom', 'hand')\n * @type {string}\n */\n this.zoomMode = zoomModes.DEFAULT;\n\n /**\n * Listeners\n * @type {Object.}\n * @private\n */\n this._listeners = {\n startZoom: this._onMouseDownWithZoomMode.bind(this),\n moveZoom: this._onMouseMoveWithZoomMode.bind(this),\n stopZoom: this._onMouseUpWithZoomMode.bind(this),\n startHand: this._onMouseDownWithHandMode.bind(this),\n moveHand: this._onMouseMoveWithHandMode.bind(this),\n stopHand: this._onMouseUpWithHandMode.bind(this),\n zoomChanged: this._changeScrollState.bind(this),\n keydown: this._startHandModeWithSpaceBar.bind(this),\n keyup: this._endHandModeWithSpaceBar.bind(this),\n };\n\n const canvas = this.getCanvas();\n\n /**\n * Width:Height ratio (ex. width=1.5, height=1 -> aspectRatio=1.5)\n * @private\n */\n this.aspectRatio = canvas.width / canvas.height;\n\n /**\n * vertical scroll bar\n * @type {fabric.Rect}\n * @private\n */\n this._verticalScroll = new fabric.Rect(DEFAULT_SCROLL_OPTION);\n\n /**\n * horizontal scroll bar\n * @type {fabric.Rect}\n * @private\n */\n this._horizontalScroll = new fabric.Rect(DEFAULT_SCROLL_OPTION);\n\n canvas.on(ZOOM_CHANGED, this._listeners.zoomChanged);\n\n this.graphics.on(ADD_TEXT, this._startTextEditingHandler.bind(this));\n this.graphics.on(TEXT_EDITING, this._startTextEditingHandler.bind(this));\n this.graphics.on(OBJECT_MODIFIED, this._stopTextEditingHandler.bind(this));\n }\n\n /**\n * Attach zoom keyboard events\n */\n attachKeyboardZoomEvents() {\n fabric.util.addListener(document, KEY_DOWN, this._listeners.keydown);\n fabric.util.addListener(document, KEY_UP, this._listeners.keyup);\n }\n\n /**\n * Detach zoom keyboard events\n */\n detachKeyboardZoomEvents() {\n fabric.util.removeListener(document, KEY_DOWN, this._listeners.keydown);\n fabric.util.removeListener(document, KEY_UP, this._listeners.keyup);\n }\n\n /**\n * Handler when you started editing text\n * @private\n */\n _startTextEditingHandler() {\n this.isTextEditing = true;\n }\n\n /**\n * Handler when you stopped editing text\n * @private\n */\n _stopTextEditingHandler() {\n this.isTextEditing = false;\n }\n\n /**\n * Handler who turns on hand mode when the space bar is down\n * @param {KeyboardEvent} e - Event object\n * @private\n */\n _startHandModeWithSpaceBar(e) {\n if (this.withSpace || this.isTextEditing) {\n return;\n }\n\n if (e.keyCode === keyCodes.SPACE) {\n this.withSpace = true;\n this.startHandMode();\n }\n }\n\n /**\n * Handler who turns off hand mode when space bar is up\n * @param {KeyboardEvent} e - Event object\n * @private\n */\n _endHandModeWithSpaceBar(e) {\n if (e.keyCode === keyCodes.SPACE) {\n this.withSpace = false;\n this.endHandMode();\n }\n }\n\n /**\n * Start zoom-in mode\n */\n startZoomInMode() {\n if (this.zoomArea) {\n return;\n }\n this.endHandMode();\n this.zoomMode = zoomModes.ZOOM;\n\n const canvas = this.getCanvas();\n\n this._changeObjectsEventedState(false);\n\n this.zoomArea = new fabric.Rect({\n left: 0,\n top: 0,\n width: 0.5,\n height: 0.5,\n stroke: 'black',\n strokeWidth: 1,\n fill: 'transparent',\n hoverCursor: 'zoom-in',\n });\n\n canvas.discardActiveObject();\n canvas.add(this.zoomArea);\n canvas.on('mouse:down', this._listeners.startZoom);\n canvas.selection = false;\n canvas.defaultCursor = 'zoom-in';\n }\n\n /**\n * End zoom-in mode\n */\n endZoomInMode() {\n this.zoomMode = zoomModes.DEFAULT;\n\n const canvas = this.getCanvas();\n const { startZoom, moveZoom, stopZoom } = this._listeners;\n\n canvas.selection = true;\n canvas.defaultCursor = 'auto';\n canvas.off({\n 'mouse:down': startZoom,\n 'mouse:move': moveZoom,\n 'mouse:up': stopZoom,\n });\n\n this._changeObjectsEventedState(true);\n\n canvas.remove(this.zoomArea);\n this.zoomArea = null;\n }\n\n /**\n * Start zoom drawing mode\n */\n start() {\n this.zoomArea = null;\n this._startPoint = null;\n this._startHandPoint = null;\n }\n\n /**\n * Stop zoom drawing mode\n */\n end() {\n this.endZoomInMode();\n this.endHandMode();\n }\n\n /**\n * Start hand mode\n */\n startHandMode() {\n this.endZoomInMode();\n this.zoomMode = zoomModes.HAND;\n\n const canvas = this.getCanvas();\n\n this._changeObjectsEventedState(false);\n\n canvas.discardActiveObject();\n canvas.off('mouse:down', this._listeners.startHand);\n canvas.on('mouse:down', this._listeners.startHand);\n canvas.selection = false;\n canvas.defaultCursor = 'grab';\n\n canvas.fire(HAND_STARTED);\n }\n\n /**\n * Stop hand mode\n */\n endHandMode() {\n this.zoomMode = zoomModes.DEFAULT;\n const canvas = this.getCanvas();\n\n this._changeObjectsEventedState(true);\n\n canvas.off('mouse:down', this._listeners.startHand);\n canvas.selection = true;\n canvas.defaultCursor = 'auto';\n\n this._startHandPoint = null;\n\n canvas.fire(HAND_STOPPED);\n }\n\n /**\n * onMousedown handler in fabric canvas\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onMouseDownWithZoomMode({ target, e }) {\n if (target) {\n return;\n }\n\n const canvas = this.getCanvas();\n\n canvas.selection = false;\n\n this._startPoint = canvas.getPointer(e);\n this.zoomArea.set({ width: 0, height: 0 });\n\n const { moveZoom, stopZoom } = this._listeners;\n canvas.on({\n 'mouse:move': moveZoom,\n 'mouse:up': stopZoom,\n });\n }\n\n /**\n * onMousemove handler in fabric canvas\n * @param {{e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onMouseMoveWithZoomMode({ e }) {\n const canvas = this.getCanvas();\n const pointer = canvas.getPointer(e);\n const { x, y } = pointer;\n const { zoomArea, _startPoint } = this;\n const deltaX = Math.abs(x - _startPoint.x);\n const deltaY = Math.abs(y - _startPoint.y);\n\n if (deltaX + deltaY > MOUSE_MOVE_THRESHOLD) {\n canvas.remove(zoomArea);\n zoomArea.set(this._calcRectDimensionFromPoint(x, y));\n canvas.add(zoomArea);\n }\n }\n\n /**\n * Get rect dimension setting from Canvas-Mouse-Position(x, y)\n * @param {number} x - Canvas-Mouse-Position x\n * @param {number} y - Canvas-Mouse-Position Y\n * @returns {{left: number, top: number, width: number, height: number}}\n * @private\n */\n _calcRectDimensionFromPoint(x, y) {\n const canvas = this.getCanvas();\n const canvasWidth = canvas.getWidth();\n const canvasHeight = canvas.getHeight();\n const { x: startX, y: startY } = this._startPoint;\n const { min } = Math;\n\n const left = min(startX, x);\n const top = min(startY, y);\n const width = clamp(x, startX, canvasWidth) - left; // (startX <= x(mouse) <= canvasWidth) - left\n const height = clamp(y, startY, canvasHeight) - top; // (startY <= y(mouse) <= canvasHeight) - top\n\n return { left, top, width, height };\n }\n\n /**\n * onMouseup handler in fabric canvas\n * @private\n */\n _onMouseUpWithZoomMode() {\n let { zoomLevel } = this;\n const { zoomArea } = this;\n const { moveZoom, stopZoom } = this._listeners;\n const canvas = this.getCanvas();\n const center = this._getCenterPoint();\n const { x, y } = center;\n\n if (!this._isMaxZoomLevel()) {\n this._centerPoints.push({\n x,\n y,\n prevZoomLevel: zoomLevel,\n zoomLevel: zoomLevel + 1,\n });\n zoomLevel += 1;\n canvas.zoomToPoint({ x, y }, zoomLevel);\n\n this._fireZoomChanged(canvas, zoomLevel);\n\n this.zoomLevel = zoomLevel;\n }\n\n canvas.off({\n 'mouse:move': moveZoom,\n 'mouse:up': stopZoom,\n });\n\n canvas.remove(zoomArea);\n this._startPoint = null;\n }\n\n /**\n * Get center point\n * @returns {{x: number, y: number}}\n * @private\n */\n _getCenterPoint() {\n const { left, top, width, height } = this.zoomArea;\n const { x, y } = this._startPoint;\n const { aspectRatio } = this;\n\n if (width < MOUSE_MOVE_THRESHOLD && height < MOUSE_MOVE_THRESHOLD) {\n return { x, y };\n }\n\n return width > height\n ? { x: left + (aspectRatio * height) / 2, y: top + height / 2 }\n : { x: left + width / 2, y: top + width / aspectRatio / 2 };\n }\n\n /**\n * Zoom the canvas\n * @param {{x: number, y: number}} center - center of zoom\n * @param {?number} zoomLevel - zoom level\n */\n zoom({ x, y }, zoomLevel = this.zoomLevel) {\n const canvas = this.getCanvas();\n const centerPoints = this._centerPoints;\n\n for (let i = centerPoints.length - 1; i >= 0; i -= 1) {\n if (centerPoints[i].zoomLevel < zoomLevel) {\n break;\n }\n\n const { x: prevX, y: prevY, prevZoomLevel } = centerPoints.pop();\n\n canvas.zoomToPoint({ x: prevX, y: prevY }, prevZoomLevel);\n this.zoomLevel = prevZoomLevel;\n }\n\n canvas.zoomToPoint({ x, y }, zoomLevel);\n if (!this._isDefaultZoomLevel(zoomLevel)) {\n this._centerPoints.push({\n x,\n y,\n zoomLevel,\n prevZoomLevel: this.zoomLevel,\n });\n }\n this.zoomLevel = zoomLevel;\n\n this._fireZoomChanged(canvas, zoomLevel);\n }\n\n /**\n * Zoom out one step\n */\n zoomOut() {\n const centerPoints = this._centerPoints;\n\n if (!centerPoints.length) {\n return;\n }\n\n const canvas = this.getCanvas();\n const point = centerPoints.pop();\n const { x, y, prevZoomLevel } = point;\n\n if (this._isDefaultZoomLevel(prevZoomLevel)) {\n canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);\n } else {\n canvas.zoomToPoint({ x, y }, prevZoomLevel);\n }\n\n this.zoomLevel = prevZoomLevel;\n\n this._fireZoomChanged(canvas, this.zoomLevel);\n }\n\n /**\n * Zoom reset\n */\n resetZoom() {\n const canvas = this.getCanvas();\n\n canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);\n\n this.zoomLevel = DEFAULT_ZOOM_LEVEL;\n this._centerPoints = [];\n\n this._fireZoomChanged(canvas, this.zoomLevel);\n }\n\n /**\n * Whether zoom level is max (5.0)\n * @returns {boolean}\n * @private\n */\n _isMaxZoomLevel() {\n return this.zoomLevel >= 5.0;\n }\n\n /**\n * Move point of zoom\n * @param {{x: number, y: number}} delta - move amount\n * @private\n */\n _movePointOfZoom({ x: deltaX, y: deltaY }) {\n const centerPoints = this._centerPoints;\n\n if (!centerPoints.length) {\n return;\n }\n\n const canvas = this.getCanvas();\n const { zoomLevel } = this;\n\n const point = centerPoints.pop();\n const { x: originX, y: originY, prevZoomLevel } = point;\n const x = originX - deltaX;\n const y = originY - deltaY;\n\n canvas.zoomToPoint({ x: originX, y: originY }, prevZoomLevel);\n canvas.zoomToPoint({ x, y }, zoomLevel);\n centerPoints.push({ x, y, prevZoomLevel, zoomLevel });\n\n this._fireZoomChanged(canvas, zoomLevel);\n }\n\n /**\n * onMouseDown handler in fabric canvas\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onMouseDownWithHandMode({ target, e }) {\n if (target) {\n return;\n }\n\n const canvas = this.getCanvas();\n\n if (this.zoomLevel <= DEFAULT_ZOOM_LEVEL) {\n return;\n }\n\n canvas.selection = false;\n\n this._startHandPoint = canvas.getPointer(e);\n\n const { moveHand, stopHand } = this._listeners;\n canvas.on({\n 'mouse:move': moveHand,\n 'mouse:up': stopHand,\n });\n }\n\n /**\n * onMouseMove handler in fabric canvas\n * @param {{e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onMouseMoveWithHandMode({ e }) {\n const canvas = this.getCanvas();\n const { x, y } = canvas.getPointer(e);\n const deltaX = x - this._startHandPoint.x;\n const deltaY = y - this._startHandPoint.y;\n\n this._movePointOfZoom({ x: deltaX, y: deltaY });\n }\n\n /**\n * onMouseUp handler in fabric canvas\n * @private\n */\n _onMouseUpWithHandMode() {\n const canvas = this.getCanvas();\n const { moveHand, stopHand } = this._listeners;\n\n canvas.off({\n 'mouse:move': moveHand,\n 'mouse:up': stopHand,\n });\n\n this._startHandPoint = null;\n }\n\n /**\n * onChangeZoom handler in fabric canvas\n * @private\n */\n _changeScrollState({ viewport, zoomLevel }) {\n const canvas = this.getCanvas();\n\n canvas.remove(this._verticalScroll);\n canvas.remove(this._horizontalScroll);\n\n if (this._isDefaultZoomLevel(zoomLevel)) {\n return;\n }\n\n const canvasWidth = canvas.width;\n const canvasHeight = canvas.height;\n\n const { tl, tr, bl } = viewport;\n const viewportWidth = tr.x - tl.x;\n const viewportHeight = bl.y - tl.y;\n\n const horizontalScrollWidth = (viewportWidth * viewportWidth) / canvasWidth;\n const horizontalScrollHeight = viewportHeight * DEFAULT_HORIZONTAL_SCROLL_RATIO.SIZE;\n const horizontalScrollLeft = clamp(\n tl.x + (tl.x / canvasWidth) * viewportWidth,\n tl.x,\n tr.x - horizontalScrollWidth\n );\n const horizontalScrollMargin = viewportHeight * DEFAULT_HORIZONTAL_SCROLL_RATIO.MARGIN;\n const horizontalScrollBorderRadius =\n viewportHeight * DEFAULT_HORIZONTAL_SCROLL_RATIO.BORDER_RADIUS;\n\n this._horizontalScroll.set({\n left: horizontalScrollLeft,\n top: bl.y - horizontalScrollHeight - horizontalScrollMargin,\n width: horizontalScrollWidth,\n height: horizontalScrollHeight,\n rx: horizontalScrollBorderRadius,\n ry: horizontalScrollBorderRadius,\n });\n\n const verticalScrollWidth = viewportWidth * DEFAULT_VERTICAL_SCROLL_RATIO.SIZE;\n const verticalScrollHeight = (viewportHeight * viewportHeight) / canvasHeight;\n const verticalScrollTop = clamp(\n tl.y + (tl.y / canvasHeight) * viewportHeight,\n tr.y,\n bl.y - verticalScrollHeight\n );\n const verticalScrollMargin = viewportWidth * DEFAULT_VERTICAL_SCROLL_RATIO.MARGIN;\n const verticalScrollBorderRadius = viewportWidth * DEFAULT_VERTICAL_SCROLL_RATIO.BORDER_RADIUS;\n\n this._verticalScroll.set({\n left: tr.x - verticalScrollWidth - verticalScrollMargin,\n top: verticalScrollTop,\n width: verticalScrollWidth,\n height: verticalScrollHeight,\n rx: verticalScrollBorderRadius,\n ry: verticalScrollBorderRadius,\n });\n\n this._addScrollBar();\n }\n\n /**\n * Change objects 'evented' state\n * @param {boolean} [evented=true] - objects 'evented' state\n */\n _changeObjectsEventedState(evented = true) {\n const canvas = this.getCanvas();\n\n canvas.forEachObject((obj) => {\n // {@link http://fabricjs.com/docs/fabric.Object.html#evented}\n obj.evented = evented;\n });\n }\n\n /**\n * Add scroll bar and set remove timer\n */\n _addScrollBar() {\n const canvas = this.getCanvas();\n\n canvas.add(this._horizontalScroll);\n canvas.add(this._verticalScroll);\n\n if (this.scrollBarTid) {\n clearTimeout(this.scrollBarTid);\n }\n\n this.scrollBarTid = setTimeout(() => {\n canvas.remove(this._horizontalScroll);\n canvas.remove(this._verticalScroll);\n }, 3000);\n }\n\n /**\n * Check zoom level is default zoom level (1.0)\n * @param {number} zoomLevel - zoom level\n * @returns {boolean} - whether zoom level is 1.0\n */\n _isDefaultZoomLevel(zoomLevel) {\n return zoomLevel === DEFAULT_ZOOM_LEVEL;\n }\n\n /**\n * Fire 'zoomChanged' event\n * @param {fabric.Canvas} canvas - fabric canvas\n * @param {number} zoomLevel - 'zoomChanged' event params\n */\n _fireZoomChanged(canvas, zoomLevel) {\n canvas.fire(ZOOM_CHANGED, { viewport: canvas.calcViewportBoundaries(), zoomLevel });\n }\n\n /**\n * Get zoom mode\n */\n get mode() {\n return this.zoomMode;\n }\n}\n\nexport default Zoom;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Constants\n */\nimport { keyMirror } from '@/util';\n\n/**\n * Help features for zoom\n * @type {Array.}\n */\nexport const ZOOM_HELP_MENUS = ['zoomIn', 'zoomOut', 'hand'];\n\n/**\n * Help features for command\n * @type {Array.}\n */\nexport const COMMAND_HELP_MENUS = ['history', 'undo', 'redo', 'reset'];\n\n/**\n * Help features for delete\n * @type {Array.}\n */\nexport const DELETE_HELP_MENUS = ['delete', 'deleteAll'];\n\n/**\n * Editor help features\n * @type {Array.}\n */\nexport const HELP_MENUS = [...ZOOM_HELP_MENUS, ...COMMAND_HELP_MENUS, ...DELETE_HELP_MENUS];\n\n/**\n * Fill type for shape\n * @type {Object.}\n */\nexport const SHAPE_FILL_TYPE = {\n FILTER: 'filter',\n COLOR: 'color',\n};\n\n/**\n * Shape type list\n * @type {Array.}\n */\nexport const SHAPE_TYPE = ['rect', 'circle', 'triangle'];\n\n/**\n * Object type\n * @type {Object.}\n */\nexport const OBJ_TYPE = {\n CROPZONE: 'cropzone',\n};\n\n/**\n * Filter type map\n * @type {Object.}\n */\nexport const filterType = {\n VINTAGE: 'vintage',\n SEPIA2: 'sepia2',\n REMOVE_COLOR: 'removeColor',\n COLOR_FILTER: 'colorFilter',\n REMOVE_WHITE: 'removeWhite',\n BLEND_COLOR: 'blendColor',\n BLEND: 'blend',\n};\n\n/**\n * Component names\n * @type {Object.}\n */\nexport const componentNames = keyMirror(\n 'IMAGE_LOADER',\n 'CROPPER',\n 'FLIP',\n 'ROTATION',\n 'FREE_DRAWING',\n 'LINE',\n 'TEXT',\n 'ICON',\n 'FILTER',\n 'SHAPE',\n 'ZOOM',\n 'RESIZE'\n);\n\n/**\n * Shape default option\n * @type {Object}\n */\nexport const SHAPE_DEFAULT_OPTIONS = {\n lockSkewingX: true,\n lockSkewingY: true,\n bringForward: true,\n isRegular: false,\n};\n\n/**\n * Cropzone default option\n * @type {Object}\n */\nexport const CROPZONE_DEFAULT_OPTIONS = {\n hasRotatingPoint: false,\n hasBorders: false,\n lockScalingFlip: true,\n lockRotation: true,\n lockSkewingX: true,\n lockSkewingY: true,\n};\n\n/**\n * Command names\n * @type {Object.}\n */\nexport const commandNames = {\n CLEAR_OBJECTS: 'clearObjects',\n LOAD_IMAGE: 'loadImage',\n FLIP_IMAGE: 'flip',\n ROTATE_IMAGE: 'rotate',\n ADD_OBJECT: 'addObject',\n REMOVE_OBJECT: 'removeObject',\n APPLY_FILTER: 'applyFilter',\n REMOVE_FILTER: 'removeFilter',\n ADD_ICON: 'addIcon',\n CHANGE_ICON_COLOR: 'changeIconColor',\n ADD_SHAPE: 'addShape',\n CHANGE_SHAPE: 'changeShape',\n ADD_TEXT: 'addText',\n CHANGE_TEXT: 'changeText',\n CHANGE_TEXT_STYLE: 'changeTextStyle',\n ADD_IMAGE_OBJECT: 'addImageObject',\n RESIZE_CANVAS_DIMENSION: 'resizeCanvasDimension',\n SET_OBJECT_PROPERTIES: 'setObjectProperties',\n SET_OBJECT_POSITION: 'setObjectPosition',\n CHANGE_SELECTION: 'changeSelection',\n RESIZE_IMAGE: 'resize',\n};\n\n/**\n * Event names\n * @type {Object.}\n */\nexport const eventNames = {\n OBJECT_ACTIVATED: 'objectActivated',\n OBJECT_MOVED: 'objectMoved',\n OBJECT_SCALED: 'objectScaled',\n OBJECT_CREATED: 'objectCreated',\n OBJECT_ROTATED: 'objectRotated',\n OBJECT_ADDED: 'objectAdded',\n OBJECT_MODIFIED: 'objectModified',\n TEXT_EDITING: 'textEditing',\n TEXT_CHANGED: 'textChanged',\n ICON_CREATE_RESIZE: 'iconCreateResize',\n ICON_CREATE_END: 'iconCreateEnd',\n ADD_TEXT: 'addText',\n ADD_OBJECT: 'addObject',\n ADD_OBJECT_AFTER: 'addObjectAfter',\n MOUSE_DOWN: 'mousedown',\n MOUSE_UP: 'mouseup',\n MOUSE_MOVE: 'mousemove',\n // UNDO/REDO Events\n REDO_STACK_CHANGED: 'redoStackChanged',\n UNDO_STACK_CHANGED: 'undoStackChanged',\n SELECTION_CLEARED: 'selectionCleared',\n SELECTION_CREATED: 'selectionCreated',\n EXECUTE_COMMAND: 'executeCommand',\n AFTER_UNDO: 'afterUndo',\n AFTER_REDO: 'afterRedo',\n ZOOM_CHANGED: 'zoomChanged',\n HAND_STARTED: 'handStarted',\n HAND_STOPPED: 'handStopped',\n KEY_DOWN: 'keydown',\n KEY_UP: 'keyup',\n INPUT_BOX_EDITING_STARTED: 'inputBoxEditingStarted',\n INPUT_BOX_EDITING_STOPPED: 'inputBoxEditingStopped',\n FOCUS: 'focus',\n BLUR: 'blur',\n IMAGE_RESIZED: 'imageResized',\n};\n\n/**\n * Selector names\n * @type {Object.}\n */\nexport const selectorNames = {\n COLOR_PICKER_INPUT_BOX: '.tui-colorpicker-palette-hex',\n};\n\n/**\n * History names\n * @type {Object.}\n */\nexport const historyNames = {\n LOAD_IMAGE: 'Load',\n LOAD_MASK_IMAGE: 'Mask',\n ADD_MASK_IMAGE: 'Mask',\n ADD_IMAGE_OBJECT: 'Mask',\n CROP: 'Crop',\n RESIZE: 'Resize',\n APPLY_FILTER: 'Filter',\n REMOVE_FILTER: 'Filter',\n CHANGE_SHAPE: 'Shape',\n CHANGE_ICON_COLOR: 'Icon',\n ADD_TEXT: 'Text',\n CHANGE_TEXT_STYLE: 'Text',\n REMOVE_OBJECT: 'Delete',\n CLEAR_OBJECTS: 'Delete',\n};\n\n/**\n * Editor states\n * @type {Object.}\n */\nexport const drawingModes = keyMirror(\n 'NORMAL',\n 'CROPPER',\n 'FREE_DRAWING',\n 'LINE_DRAWING',\n 'TEXT',\n 'SHAPE',\n 'ICON',\n 'ZOOM',\n 'RESIZE'\n);\n\n/**\n * Menu names with drawing mode\n * @type {Object.}\n */\nexport const drawingMenuNames = {\n TEXT: 'text',\n CROP: 'crop',\n RESIZE: 'resize',\n SHAPE: 'shape',\n ZOOM: 'zoom',\n};\n\n/**\n * Zoom modes\n * @type {Object.}\n */\nexport const zoomModes = {\n DEFAULT: 'normal',\n ZOOM: 'zoom',\n HAND: 'hand',\n};\n\n/**\n * Shortcut key values\n * @type {Object.}\n */\nexport const keyCodes = {\n Z: 90,\n Y: 89,\n C: 67,\n V: 86,\n SHIFT: 16,\n BACKSPACE: 8,\n DEL: 46,\n ARROW_DOWN: 40,\n ARROW_UP: 38,\n SPACE: 32,\n};\n\n/**\n * Fabric object options\n * @type {Object.}\n */\nexport const fObjectOptions = {\n SELECTION_STYLE: {\n borderColor: 'red',\n cornerColor: 'green',\n cornerSize: 10,\n originX: 'center',\n originY: 'center',\n transparentCorners: false,\n },\n};\n\n/**\n * Promise reject messages\n * @type {Object.}\n */\nexport const rejectMessages = {\n addedObject: 'The object is already added.',\n flip: 'The flipX and flipY setting values are not changed.',\n invalidDrawingMode: 'This operation is not supported in the drawing mode.',\n invalidParameters: 'Invalid parameters.',\n isLock: 'The executing command state is locked.',\n loadImage: 'The background image is empty.',\n loadingImageFailed: 'Invalid image loaded.',\n noActiveObject: 'There is no active object.',\n noObject: 'The object is not in canvas.',\n redo: 'The promise of redo command is reject.',\n rotation: 'The current angle is same the old angle.',\n undo: 'The promise of undo command is reject.',\n unsupportedOperation: 'Unsupported operation.',\n unsupportedType: 'Unsupported object type.',\n};\n\n/**\n * Default icon menu svg path\n * @type {Object.}\n */\nexport const defaultIconPath = {\n 'icon-arrow': 'M40 12V0l24 24-24 24V36H0V12h40z',\n 'icon-arrow-2': 'M49,32 H3 V22 h46 l-18,-18 h12 l23,23 L43,50 h-12 l18,-18 z ',\n 'icon-arrow-3':\n 'M43.349998,27 L17.354,53 H1.949999 l25.996,-26 L1.949999,1 h15.404 L43.349998,27 z ',\n 'icon-star':\n 'M35,54.557999 l-19.912001,10.468 l3.804,-22.172001 l-16.108,-15.7 l22.26,-3.236 L35,3.746 l9.956,20.172001 l22.26,3.236 l-16.108,15.7 l3.804,22.172001 z ',\n 'icon-star-2':\n 'M17,31.212 l-7.194,4.08 l-4.728,-6.83 l-8.234,0.524 l-1.328,-8.226 l-7.644,-3.14 l2.338,-7.992 l-5.54,-6.18 l5.54,-6.176 l-2.338,-7.994 l7.644,-3.138 l1.328,-8.226 l8.234,0.522 l4.728,-6.83 L17,-24.312 l7.194,-4.08 l4.728,6.83 l8.234,-0.522 l1.328,8.226 l7.644,3.14 l-2.338,7.992 l5.54,6.178 l-5.54,6.178 l2.338,7.992 l-7.644,3.14 l-1.328,8.226 l-8.234,-0.524 l-4.728,6.83 z ',\n 'icon-polygon': 'M3,31 L19,3 h32 l16,28 l-16,28 H19 z ',\n 'icon-location':\n 'M24 62C8 45.503 0 32.837 0 24 0 10.745 10.745 0 24 0s24 10.745 24 24c0 8.837-8 21.503-24 38zm0-28c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10z',\n 'icon-heart':\n 'M49.994999,91.349998 l-6.96,-6.333 C18.324001,62.606995 2.01,47.829002 2.01,29.690998 C2.01,14.912998 13.619999,3.299999 28.401001,3.299999 c8.349,0 16.362,5.859 21.594,12 c5.229,-6.141 13.242001,-12 21.591,-12 c14.778,0 26.390999,11.61 26.390999,26.390999 c0,18.138 -16.314001,32.916 -41.025002,55.374001 l-6.96,6.285 z ',\n 'icon-bubble':\n 'M44 48L34 58V48H12C5.373 48 0 42.627 0 36V12C0 5.373 5.373 0 12 0h40c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12h-8z',\n};\n\nexport const defaultRotateRangeValues = {\n realTimeEvent: true,\n min: -360,\n max: 360,\n value: 0,\n};\n\nexport const defaultDrawRangeValues = {\n min: 5,\n max: 30,\n value: 12,\n};\n\nexport const defaultShapeStrokeValues = {\n realTimeEvent: true,\n min: 2,\n max: 300,\n value: 3,\n};\n\nexport const defaultTextRangeValues = {\n realTimeEvent: true,\n min: 10,\n max: 100,\n value: 50,\n};\n\nexport const defaultFilterRangeValues = {\n tintOpacityRange: {\n realTimeEvent: true,\n min: 0,\n max: 1,\n value: 0.7,\n useDecimal: true,\n },\n removewhiteDistanceRange: {\n realTimeEvent: true,\n min: 0,\n max: 1,\n value: 0.2,\n useDecimal: true,\n },\n brightnessRange: {\n realTimeEvent: true,\n min: -1,\n max: 1,\n value: 0,\n useDecimal: true,\n },\n noiseRange: {\n realTimeEvent: true,\n min: 0,\n max: 1000,\n value: 100,\n },\n pixelateRange: {\n realTimeEvent: true,\n min: 2,\n max: 20,\n value: 4,\n },\n colorfilterThresholdRange: {\n realTimeEvent: true,\n min: 0,\n max: 1,\n value: 0.2,\n useDecimal: true,\n },\n blurFilterRange: {\n value: 0.1,\n },\n};\n\nexport const emptyCropRectValues = {\n LEFT: 0,\n TOP: 0,\n WIDTH: 0.5,\n HEIGHT: 0.5,\n};\n\nexport const defaultResizePixelValues = {\n realTimeEvent: true,\n min: 32,\n max: 4088,\n value: 800,\n};\n","/**\n * @author NHN. FE Development Team \n * @fileoverview CropperDrawingMode class\n */\nimport DrawingMode from '@/interface/drawingMode';\nimport { drawingModes, componentNames as components } from '@/consts';\n\n/**\n * CropperDrawingMode class\n * @class\n * @ignore\n */\nclass CropperDrawingMode extends DrawingMode {\n constructor() {\n super(drawingModes.CROPPER);\n }\n\n /**\n * start this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n start(graphics) {\n const cropper = graphics.getComponent(components.CROPPER);\n cropper.start();\n }\n\n /**\n * stop this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n end(graphics) {\n const cropper = graphics.getComponent(components.CROPPER);\n cropper.end();\n }\n}\n\nexport default CropperDrawingMode;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview FreeDrawingMode class\n */\nimport DrawingMode from '@/interface/drawingMode';\nimport { drawingModes, componentNames as components } from '@/consts';\n\n/**\n * FreeDrawingMode class\n * @class\n * @ignore\n */\nclass FreeDrawingMode extends DrawingMode {\n constructor() {\n super(drawingModes.FREE_DRAWING);\n }\n\n /**\n * start this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @param {{width: ?number, color: ?string}} [options] - Brush width & color\n * @override\n */\n start(graphics, options) {\n const freeDrawing = graphics.getComponent(components.FREE_DRAWING);\n freeDrawing.start(options);\n }\n\n /**\n * stop this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n end(graphics) {\n const freeDrawing = graphics.getComponent(components.FREE_DRAWING);\n freeDrawing.end();\n }\n}\n\nexport default FreeDrawingMode;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview IconDrawingMode class\n */\nimport DrawingMode from '@/interface/drawingMode';\nimport { drawingModes, componentNames as components } from '@/consts';\n\n/**\n * IconDrawingMode class\n * @class\n * @ignore\n */\nclass IconDrawingMode extends DrawingMode {\n constructor() {\n super(drawingModes.ICON);\n }\n\n /**\n * start this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n start(graphics) {\n const icon = graphics.getComponent(components.ICON);\n icon.start();\n }\n\n /**\n * stop this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n end(graphics) {\n const icon = graphics.getComponent(components.ICON);\n icon.end();\n }\n}\n\nexport default IconDrawingMode;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview LineDrawingMode class\n */\nimport DrawingMode from '@/interface/drawingMode';\nimport { drawingModes, componentNames as components } from '@/consts';\n\n/**\n * LineDrawingMode class\n * @class\n * @ignore\n */\nclass LineDrawingMode extends DrawingMode {\n constructor() {\n super(drawingModes.LINE_DRAWING);\n }\n\n /**\n * start this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @param {{width: ?number, color: ?string}} [options] - Brush width & color\n * @override\n */\n start(graphics, options) {\n const lineDrawing = graphics.getComponent(components.LINE);\n lineDrawing.start(options);\n }\n\n /**\n * stop this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n end(graphics) {\n const lineDrawing = graphics.getComponent(components.LINE);\n lineDrawing.end();\n }\n}\n\nexport default LineDrawingMode;\n","import DrawingMode from '@/interface/drawingMode';\nimport { drawingModes, componentNames as components } from '@/consts';\n\n/**\n * ResizeDrawingMode class\n * @class\n * @ignore\n */\nclass ResizeDrawingMode extends DrawingMode {\n constructor() {\n super(drawingModes.RESIZE);\n }\n\n /**\n * start this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n start(graphics) {\n const resize = graphics.getComponent(components.RESIZE);\n resize.start();\n }\n\n /**\n * stop this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n end(graphics) {\n const resize = graphics.getComponent(components.RESIZE);\n resize.end();\n }\n}\n\nexport default ResizeDrawingMode;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview ShapeDrawingMode class\n */\nimport DrawingMode from '@/interface/drawingMode';\nimport { drawingModes, componentNames as components } from '@/consts';\n\n/**\n * ShapeDrawingMode class\n * @class\n * @ignore\n */\nclass ShapeDrawingMode extends DrawingMode {\n constructor() {\n super(drawingModes.SHAPE);\n }\n\n /**\n * start this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n start(graphics) {\n const shape = graphics.getComponent(components.SHAPE);\n shape.start();\n }\n\n /**\n * stop this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n end(graphics) {\n const shape = graphics.getComponent(components.SHAPE);\n shape.end();\n }\n}\n\nexport default ShapeDrawingMode;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview TextDrawingMode class\n */\nimport DrawingMode from '@/interface/drawingMode';\nimport { drawingModes, componentNames as components } from '@/consts';\n\n/**\n * TextDrawingMode class\n * @class\n * @ignore\n */\nclass TextDrawingMode extends DrawingMode {\n constructor() {\n super(drawingModes.TEXT);\n }\n\n /**\n * start this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n start(graphics) {\n const text = graphics.getComponent(components.TEXT);\n text.start();\n }\n\n /**\n * stop this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n end(graphics) {\n const text = graphics.getComponent(components.TEXT);\n text.end();\n }\n}\n\nexport default TextDrawingMode;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview ZoomDrawingMode class\n */\nimport DrawingMode from '@/interface/drawingMode';\nimport { drawingModes, componentNames as components } from '@/consts';\n\n/**\n * ZoomDrawingMode class\n * @class\n * @ignore\n */\nclass ZoomDrawingMode extends DrawingMode {\n constructor() {\n super(drawingModes.ZOOM);\n }\n\n /**\n * start this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n start(graphics) {\n const zoom = graphics.getComponent(components.ZOOM);\n\n zoom.start();\n }\n\n /**\n * stop this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n end(graphics) {\n const zoom = graphics.getComponent(components.ZOOM);\n\n zoom.end();\n }\n}\n\nexport default ZoomDrawingMode;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Blur extending fabric.Image.filters.Convolute\n */\nimport fabric from 'fabric';\n\nconst ARROW_ANGLE = 30;\nconst CHEVRON_SIZE_RATIO = 2.7;\nconst TRIANGLE_SIZE_RATIO = 1.7;\nconst RADIAN_CONVERSION_VALUE = 180;\n\nconst ArrowLine = fabric.util.createClass(\n fabric.Line,\n /** @lends Convolute.prototype */ {\n /**\n * Line type\n * @param {String} type\n * @default\n */\n type: 'line',\n\n /**\n * Constructor\n * @param {Array} [points] Array of points\n * @param {Object} [options] Options object\n * @override\n */\n initialize(points, options = {}) {\n this.callSuper('initialize', points, options);\n\n this.arrowType = options.arrowType;\n },\n\n /**\n * Render ArrowLine\n * @private\n * @override\n */\n _render(ctx) {\n const { x1: fromX, y1: fromY, x2: toX, y2: toY } = this.calcLinePoints();\n const linePosition = {\n fromX,\n fromY,\n toX,\n toY,\n };\n this.ctx = ctx;\n ctx.lineWidth = this.strokeWidth;\n\n this._renderBasicLinePath(linePosition);\n this._drawDecoratorPath(linePosition);\n\n this._renderStroke(ctx);\n },\n\n /**\n * Render Basic line path\n * @param {Object} linePosition - line position\n * @param {number} option.fromX - line start position x\n * @param {number} option.fromY - line start position y\n * @param {number} option.toX - line end position x\n * @param {number} option.toY - line end position y\n * @private\n */\n _renderBasicLinePath({ fromX, fromY, toX, toY }) {\n this.ctx.beginPath();\n this.ctx.moveTo(fromX, fromY);\n this.ctx.lineTo(toX, toY);\n },\n\n /**\n * Render Arrow Head\n * @param {Object} linePosition - line position\n * @param {number} option.fromX - line start position x\n * @param {number} option.fromY - line start position y\n * @param {number} option.toX - line end position x\n * @param {number} option.toY - line end position y\n * @private\n */\n _drawDecoratorPath(linePosition) {\n this._drawDecoratorPathType('head', linePosition);\n this._drawDecoratorPathType('tail', linePosition);\n },\n\n /**\n * Render Arrow Head\n * @param {string} type - 'head' or 'tail'\n * @param {Object} linePosition - line position\n * @param {number} option.fromX - line start position x\n * @param {number} option.fromY - line start position y\n * @param {number} option.toX - line end position x\n * @param {number} option.toY - line end position y\n * @private\n */\n _drawDecoratorPathType(type, linePosition) {\n switch (this.arrowType[type]) {\n case 'triangle':\n this._drawTrianglePath(type, linePosition);\n break;\n case 'chevron':\n this._drawChevronPath(type, linePosition);\n break;\n default:\n break;\n }\n },\n\n /**\n * Render Triangle Head\n * @param {string} type - 'head' or 'tail'\n * @param {Object} linePosition - line position\n * @param {number} option.fromX - line start position x\n * @param {number} option.fromY - line start position y\n * @param {number} option.toX - line end position x\n * @param {number} option.toY - line end position y\n * @private\n */\n _drawTrianglePath(type, linePosition) {\n const decorateSize = this.ctx.lineWidth * TRIANGLE_SIZE_RATIO;\n\n this._drawChevronPath(type, linePosition, decorateSize);\n this.ctx.closePath();\n },\n\n /**\n * Render Chevron Head\n * @param {string} type - 'head' or 'tail'\n * @param {Object} linePosition - line position\n * @param {number} option.fromX - line start position x\n * @param {number} option.fromY - line start position y\n * @param {number} option.toX - line end position x\n * @param {number} option.toY - line end position y\n * @param {number} decorateSize - decorate size\n * @private\n */\n _drawChevronPath(type, { fromX, fromY, toX, toY }, decorateSize) {\n const { ctx } = this;\n if (!decorateSize) {\n decorateSize = this.ctx.lineWidth * CHEVRON_SIZE_RATIO;\n }\n\n const [standardX, standardY] = type === 'head' ? [fromX, fromY] : [toX, toY];\n const [compareX, compareY] = type === 'head' ? [toX, toY] : [fromX, fromY];\n\n const angle =\n (Math.atan2(compareY - standardY, compareX - standardX) * RADIAN_CONVERSION_VALUE) /\n Math.PI;\n const rotatedPosition = (changeAngle) =>\n this.getRotatePosition(decorateSize, changeAngle, {\n x: standardX,\n y: standardY,\n });\n\n ctx.moveTo(...rotatedPosition(angle + ARROW_ANGLE));\n ctx.lineTo(standardX, standardY);\n ctx.lineTo(...rotatedPosition(angle - ARROW_ANGLE));\n },\n\n /**\n * return position from change angle.\n * @param {number} distance - change distance\n * @param {number} angle - change angle\n * @param {Object} referencePosition - reference position\n * @returns {Array}\n * @private\n */\n getRotatePosition(distance, angle, referencePosition) {\n const radian = (angle * Math.PI) / RADIAN_CONVERSION_VALUE;\n const { x, y } = referencePosition;\n\n return [distance * Math.cos(radian) + x, distance * Math.sin(radian) + y];\n },\n }\n);\n\nexport default ArrowLine;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview ColorFilter extending fabric.Image.filters.BaseFilter\n */\nimport fabric from 'fabric';\n\n/**\n * ColorFilter object\n * @class ColorFilter\n * @extends {fabric.Image.filters.BaseFilter}\n * @ignore\n */\nconst ColorFilter = fabric.util.createClass(\n fabric.Image.filters.BaseFilter,\n /** @lends BaseFilter.prototype */ {\n /**\n * Filter type\n * @param {String} type\n * @default\n */\n type: 'ColorFilter',\n\n /**\n * Constructor\n * @member fabric.Image.filters.ColorFilter.prototype\n * @param {Object} [options] Options object\n * @param {Number} [options.color='#FFFFFF'] Value of color (0...255)\n * @param {Number} [options.threshold=45] Value of threshold (0...255)\n * @override\n */\n initialize(options) {\n if (!options) {\n options = {};\n }\n this.color = options.color || '#FFFFFF';\n this.threshold = options.threshold || 45;\n this.x = options.x || null;\n this.y = options.y || null;\n },\n\n /**\n * Applies filter to canvas element\n * @param {Object} canvas Canvas object passed by fabric\n */\n // eslint-disable-next-line complexity\n applyTo(canvas) {\n const { canvasEl } = canvas;\n const context = canvasEl.getContext('2d');\n const imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height);\n const { data } = imageData;\n const { threshold } = this;\n let filterColor = fabric.Color.sourceFromHex(this.color);\n let i, len;\n\n if (this.x && this.y) {\n filterColor = this._getColor(imageData, this.x, this.y);\n }\n\n for (i = 0, len = data.length; i < len; i += 4) {\n if (\n this._isOutsideThreshold(data[i], filterColor[0], threshold) ||\n this._isOutsideThreshold(data[i + 1], filterColor[1], threshold) ||\n this._isOutsideThreshold(data[i + 2], filterColor[2], threshold)\n ) {\n continue;\n }\n data[i] = data[i + 1] = data[i + 2] = data[i + 3] = 0;\n }\n context.putImageData(imageData, 0, 0);\n },\n\n /**\n * Check color if it is within threshold\n * @param {Number} color1 source color\n * @param {Number} color2 filtering color\n * @param {Number} threshold threshold\n * @returns {boolean} true if within threshold or false\n */\n _isOutsideThreshold(color1, color2, threshold) {\n const diff = color1 - color2;\n\n return Math.abs(diff) > threshold;\n },\n\n /**\n * Get color at (x, y)\n * @param {Object} imageData of canvas\n * @param {Number} x left position\n * @param {Number} y top position\n * @returns {Array} color array\n */\n _getColor(imageData, x, y) {\n const color = [0, 0, 0, 0];\n const { data, width } = imageData;\n const bytes = 4;\n const position = (width * y + x) * bytes;\n\n color[0] = data[position];\n color[1] = data[position + 1];\n color[2] = data[position + 2];\n color[3] = data[position + 3];\n\n return color;\n },\n }\n);\n\nexport default ColorFilter;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Cropzone extending fabric.Rect\n */\nimport snippet from 'tui-code-snippet';\nimport fabric from 'fabric';\nimport { clamp } from '@/util';\nimport { eventNames as events, keyCodes } from '@/consts';\n\nconst CORNER_TYPE_TOP_LEFT = 'tl';\nconst CORNER_TYPE_TOP_RIGHT = 'tr';\nconst CORNER_TYPE_MIDDLE_TOP = 'mt';\nconst CORNER_TYPE_MIDDLE_LEFT = 'ml';\nconst CORNER_TYPE_MIDDLE_RIGHT = 'mr';\nconst CORNER_TYPE_MIDDLE_BOTTOM = 'mb';\nconst CORNER_TYPE_BOTTOM_LEFT = 'bl';\nconst CORNER_TYPE_BOTTOM_RIGHT = 'br';\nconst CORNER_TYPE_LIST = [\n CORNER_TYPE_TOP_LEFT,\n CORNER_TYPE_TOP_RIGHT,\n CORNER_TYPE_MIDDLE_TOP,\n CORNER_TYPE_MIDDLE_LEFT,\n CORNER_TYPE_MIDDLE_RIGHT,\n CORNER_TYPE_MIDDLE_BOTTOM,\n CORNER_TYPE_BOTTOM_LEFT,\n CORNER_TYPE_BOTTOM_RIGHT,\n];\nconst NOOP_FUNCTION = () => {};\n\n/**\n * Align with cropzone ratio\n * @param {string} selectedCorner - selected corner type\n * @returns {{width: number, height: number}}\n * @private\n */\nfunction cornerTypeValid(selectedCorner) {\n return CORNER_TYPE_LIST.indexOf(selectedCorner) >= 0;\n}\n\n/**\n * return scale basis type\n * @param {number} diffX - X distance of the cursor and corner.\n * @param {number} diffY - Y distance of the cursor and corner.\n * @returns {string}\n * @private\n */\nfunction getScaleBasis(diffX, diffY) {\n return diffX > diffY ? 'width' : 'height';\n}\n\n/**\n * Cropzone object\n * Issue: IE7, 8(with excanvas)\n * - Cropzone is a black zone without transparency.\n * @class Cropzone\n * @extends {fabric.Rect}\n * @ignore\n */\nconst Cropzone = fabric.util.createClass(\n fabric.Rect,\n /** @lends Cropzone.prototype */ {\n /**\n * Constructor\n * @param {Object} canvas canvas\n * @param {Object} options Options object\n * @param {Object} extendsOptions object for extends \"options\"\n * @override\n */\n initialize(canvas, options, extendsOptions) {\n options = snippet.extend(options, extendsOptions);\n options.type = 'cropzone';\n\n this.callSuper('initialize', options);\n this._addEventHandler();\n\n this.canvas = canvas;\n this.options = options;\n },\n canvasEventDelegation(eventName) {\n let delegationState = 'unregistered';\n const isRegistered = this.canvasEventTrigger[eventName] !== NOOP_FUNCTION;\n if (isRegistered) {\n delegationState = 'registered';\n } else if ([events.OBJECT_MOVED, events.OBJECT_SCALED].indexOf(eventName) < 0) {\n delegationState = 'none';\n }\n\n return delegationState;\n },\n canvasEventRegister(eventName, eventTrigger) {\n this.canvasEventTrigger[eventName] = eventTrigger;\n },\n _addEventHandler() {\n this.canvasEventTrigger = {\n [events.OBJECT_MOVED]: NOOP_FUNCTION,\n [events.OBJECT_SCALED]: NOOP_FUNCTION,\n };\n this.on({\n moving: this._onMoving.bind(this),\n scaling: this._onScaling.bind(this),\n });\n fabric.util.addListener(document, 'keydown', this._onKeyDown.bind(this));\n fabric.util.addListener(document, 'keyup', this._onKeyUp.bind(this));\n },\n _renderCropzone(ctx) {\n const cropzoneDashLineWidth = 7;\n const cropzoneDashLineOffset = 7;\n\n // Calc original scale\n const originalFlipX = this.flipX ? -1 : 1;\n const originalFlipY = this.flipY ? -1 : 1;\n const originalScaleX = originalFlipX / this.scaleX;\n const originalScaleY = originalFlipY / this.scaleY;\n\n // Set original scale\n ctx.scale(originalScaleX, originalScaleY);\n\n // Render outer rect\n this._fillOuterRect(ctx, 'rgba(0, 0, 0, 0.5)');\n\n if (this.options.lineWidth) {\n this._fillInnerRect(ctx);\n this._strokeBorder(ctx, 'rgb(255, 255, 255)', {\n lineWidth: this.options.lineWidth,\n });\n } else {\n // Black dash line\n this._strokeBorder(ctx, 'rgb(0, 0, 0)', {\n lineDashWidth: cropzoneDashLineWidth,\n });\n\n // White dash line\n this._strokeBorder(ctx, 'rgb(255, 255, 255)', {\n lineDashWidth: cropzoneDashLineWidth,\n lineDashOffset: cropzoneDashLineOffset,\n });\n }\n\n // Reset scale\n ctx.scale(1 / originalScaleX, 1 / originalScaleY);\n },\n\n /**\n * Render Crop-zone\n * @private\n * @override\n */\n _render(ctx) {\n this.callSuper('_render', ctx);\n\n this._renderCropzone(ctx);\n },\n\n /**\n * Cropzone-coordinates with outer rectangle\n *\n * x0 x1 x2 x3\n * y0 +--------------------------+\n * |///////|//////////|///////| // <--- \"Outer-rectangle\"\n * |///////|//////////|///////|\n * y1 +-------+----------+-------+\n * |///////| Cropzone |///////| Cropzone is the \"Inner-rectangle\"\n * |///////| (0, 0) |///////| Center point (0, 0)\n * y2 +-------+----------+-------+\n * |///////|//////////|///////|\n * |///////|//////////|///////|\n * y3 +--------------------------+\n *\n * @typedef {{x: Array, y: Array}} cropzoneCoordinates\n * @ignore\n */\n\n /**\n * Fill outer rectangle\n * @param {CanvasRenderingContext2D} ctx - Context\n * @param {string|CanvasGradient|CanvasPattern} fillStyle - Fill-style\n * @private\n */\n _fillOuterRect(ctx, fillStyle) {\n const { x, y } = this._getCoordinates();\n\n ctx.save();\n ctx.fillStyle = fillStyle;\n ctx.beginPath();\n\n // Outer rectangle\n // Numbers are +/-1 so that overlay edges don't get blurry.\n ctx.moveTo(x[0] - 1, y[0] - 1);\n ctx.lineTo(x[3] + 1, y[0] - 1);\n ctx.lineTo(x[3] + 1, y[3] + 1);\n ctx.lineTo(x[0] - 1, y[3] + 1);\n ctx.lineTo(x[0] - 1, y[0] - 1);\n ctx.closePath();\n\n // Inner rectangle\n ctx.moveTo(x[1], y[1]);\n ctx.lineTo(x[1], y[2]);\n ctx.lineTo(x[2], y[2]);\n ctx.lineTo(x[2], y[1]);\n ctx.lineTo(x[1], y[1]);\n ctx.closePath();\n\n ctx.fill();\n ctx.restore();\n },\n\n /**\n * Draw Inner grid line\n * @param {CanvasRenderingContext2D} ctx - Context\n * @private\n */\n _fillInnerRect(ctx) {\n const { x: outerX, y: outerY } = this._getCoordinates();\n const x = this._caculateInnerPosition(outerX, (outerX[2] - outerX[1]) / 3);\n const y = this._caculateInnerPosition(outerY, (outerY[2] - outerY[1]) / 3);\n\n ctx.save();\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';\n ctx.lineWidth = this.options.lineWidth;\n ctx.beginPath();\n\n ctx.moveTo(x[0], y[1]);\n ctx.lineTo(x[3], y[1]);\n\n ctx.moveTo(x[0], y[2]);\n ctx.lineTo(x[3], y[2]);\n\n ctx.moveTo(x[1], y[0]);\n ctx.lineTo(x[1], y[3]);\n\n ctx.moveTo(x[2], y[0]);\n ctx.lineTo(x[2], y[3]);\n ctx.stroke();\n ctx.closePath();\n\n ctx.restore();\n },\n\n /**\n * Calculate Inner Position\n * @param {Array} outer - outer position\n * @param {number} size - interval for calculate\n * @returns {Array} - inner position\n * @private\n */\n _caculateInnerPosition(outer, size) {\n const position = [];\n position[0] = outer[1];\n position[1] = outer[1] + size;\n position[2] = outer[1] + size * 2;\n position[3] = outer[2];\n\n return position;\n },\n\n /**\n * Get coordinates\n * @returns {cropzoneCoordinates} - {@link cropzoneCoordinates}\n * @private\n */\n _getCoordinates() {\n const { canvas, width, height, left, top } = this;\n const halfWidth = width / 2;\n const halfHeight = height / 2;\n const canvasHeight = canvas.getHeight(); // fabric object\n const canvasWidth = canvas.getWidth(); // fabric object\n\n return {\n x: snippet.map(\n [\n -(halfWidth + left), // x0\n -halfWidth, // x1\n halfWidth, // x2\n halfWidth + (canvasWidth - left - width), // x3\n ],\n Math.ceil\n ),\n y: snippet.map(\n [\n -(halfHeight + top), // y0\n -halfHeight, // y1\n halfHeight, // y2\n halfHeight + (canvasHeight - top - height), // y3\n ],\n Math.ceil\n ),\n };\n },\n\n /**\n * Stroke border\n * @param {CanvasRenderingContext2D} ctx - Context\n * @param {string|CanvasGradient|CanvasPattern} strokeStyle - Stroke-style\n * @param {number} lineDashWidth - Dash width\n * @param {number} [lineDashOffset] - Dash offset\n * @param {number} [lineWidth] - line width\n * @private\n */\n _strokeBorder(ctx, strokeStyle, { lineDashWidth, lineDashOffset, lineWidth }) {\n const halfWidth = this.width / 2;\n const halfHeight = this.height / 2;\n\n ctx.save();\n ctx.strokeStyle = strokeStyle;\n\n if (ctx.setLineDash) {\n ctx.setLineDash([lineDashWidth, lineDashWidth]);\n }\n if (lineDashOffset) {\n ctx.lineDashOffset = lineDashOffset;\n }\n if (lineWidth) {\n ctx.lineWidth = lineWidth;\n }\n\n ctx.beginPath();\n ctx.moveTo(-halfWidth, -halfHeight);\n ctx.lineTo(halfWidth, -halfHeight);\n ctx.lineTo(halfWidth, halfHeight);\n ctx.lineTo(-halfWidth, halfHeight);\n ctx.lineTo(-halfWidth, -halfHeight);\n ctx.stroke();\n\n ctx.restore();\n },\n\n /**\n * onMoving event listener\n * @private\n */\n _onMoving() {\n const { height, width, left, top } = this;\n const maxLeft = this.canvas.getWidth() - width;\n const maxTop = this.canvas.getHeight() - height;\n\n this.left = clamp(left, 0, maxLeft);\n this.top = clamp(top, 0, maxTop);\n\n this.canvasEventTrigger[events.OBJECT_MOVED](this);\n },\n\n /**\n * onScaling event listener\n * @param {{e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onScaling(fEvent) {\n const selectedCorner = fEvent.transform.corner;\n const pointer = this.canvas.getPointer(fEvent.e);\n const settings = this._calcScalingSizeFromPointer(pointer, selectedCorner);\n\n // On scaling cropzone,\n // change real width and height and fix scaleFactor to 1\n this.scale(1).set(settings);\n\n this.canvasEventTrigger[events.OBJECT_SCALED](this);\n },\n\n /**\n * Calc scaled size from mouse pointer with selected corner\n * @param {{x: number, y: number}} pointer - Mouse position\n * @param {string} selectedCorner - selected corner type\n * @returns {Object} Having left or(and) top or(and) width or(and) height.\n * @private\n */\n _calcScalingSizeFromPointer(pointer, selectedCorner) {\n const isCornerTypeValid = cornerTypeValid(selectedCorner);\n\n return isCornerTypeValid && this._resizeCropZone(pointer, selectedCorner);\n },\n\n /**\n * Align with cropzone ratio\n * @param {number} width - cropzone width\n * @param {number} height - cropzone height\n * @param {number} maxWidth - limit max width\n * @param {number} maxHeight - limit max height\n * @param {number} scaleTo - cropzone ratio\n * @returns {{width: number, height: number}}\n * @private\n */\n adjustRatioCropzoneSize({ width, height, leftMaker, topMaker, maxWidth, maxHeight, scaleTo }) {\n width = maxWidth ? clamp(width, 1, maxWidth) : width;\n height = maxHeight ? clamp(height, 1, maxHeight) : height;\n\n if (!this.presetRatio) {\n if (this._withShiftKey) {\n // make fixed ratio cropzone\n if (width > height) {\n height = width;\n } else if (height > width) {\n width = height;\n }\n }\n\n return {\n width,\n height,\n left: leftMaker(width),\n top: topMaker(height),\n };\n }\n\n if (scaleTo === 'width') {\n height = width / this.presetRatio;\n } else {\n width = height * this.presetRatio;\n }\n\n const maxScaleFactor = Math.min(maxWidth / width, maxHeight / height);\n if (maxScaleFactor <= 1) {\n [width, height] = [width, height].map((v) => v * maxScaleFactor);\n }\n\n return {\n width,\n height,\n left: leftMaker(width),\n top: topMaker(height),\n };\n },\n\n /**\n * Get dimension last state cropzone\n * @returns {{rectTop: number, rectLeft: number, rectWidth: number, rectHeight: number}}\n * @private\n */\n _getCropzoneRectInfo() {\n const { width: canvasWidth, height: canvasHeight } = this.canvas;\n const {\n top: rectTop,\n left: rectLeft,\n width: rectWidth,\n height: rectHeight,\n } = this.getBoundingRect(false, true);\n\n return {\n rectTop,\n rectLeft,\n rectWidth,\n rectHeight,\n rectRight: rectLeft + rectWidth,\n rectBottom: rectTop + rectHeight,\n canvasWidth,\n canvasHeight,\n };\n },\n\n /**\n * Calc scaling dimension\n * @param {Object} position - Mouse position\n * @param {string} corner - corner type\n * @returns {{left: number, top: number, width: number, height: number}}\n * @private\n */\n _resizeCropZone({ x, y }, corner) {\n const {\n rectWidth,\n rectHeight,\n rectTop,\n rectLeft,\n rectBottom,\n rectRight,\n canvasWidth,\n canvasHeight,\n } = this._getCropzoneRectInfo();\n\n const resizeInfoMap = {\n tl: {\n width: rectRight - x,\n height: rectBottom - y,\n leftMaker: (newWidth) => rectRight - newWidth,\n topMaker: (newHeight) => rectBottom - newHeight,\n maxWidth: rectRight,\n maxHeight: rectBottom,\n scaleTo: getScaleBasis(rectLeft - x, rectTop - y),\n },\n tr: {\n width: x - rectLeft,\n height: rectBottom - y,\n leftMaker: () => rectLeft,\n topMaker: (newHeight) => rectBottom - newHeight,\n maxWidth: canvasWidth - rectLeft,\n maxHeight: rectBottom,\n scaleTo: getScaleBasis(x - rectRight, rectTop - y),\n },\n mt: {\n width: rectWidth,\n height: rectBottom - y,\n leftMaker: () => rectLeft,\n topMaker: (newHeight) => rectBottom - newHeight,\n maxWidth: canvasWidth - rectLeft,\n maxHeight: rectBottom,\n scaleTo: 'height',\n },\n ml: {\n width: rectRight - x,\n height: rectHeight,\n leftMaker: (newWidth) => rectRight - newWidth,\n topMaker: () => rectTop,\n maxWidth: rectRight,\n maxHeight: canvasHeight - rectTop,\n scaleTo: 'width',\n },\n mr: {\n width: x - rectLeft,\n height: rectHeight,\n leftMaker: () => rectLeft,\n topMaker: () => rectTop,\n maxWidth: canvasWidth - rectLeft,\n maxHeight: canvasHeight - rectTop,\n scaleTo: 'width',\n },\n mb: {\n width: rectWidth,\n height: y - rectTop,\n leftMaker: () => rectLeft,\n topMaker: () => rectTop,\n maxWidth: canvasWidth - rectLeft,\n maxHeight: canvasHeight - rectTop,\n scaleTo: 'height',\n },\n bl: {\n width: rectRight - x,\n height: y - rectTop,\n leftMaker: (newWidth) => rectRight - newWidth,\n topMaker: () => rectTop,\n maxWidth: rectRight,\n maxHeight: canvasHeight - rectTop,\n scaleTo: getScaleBasis(rectLeft - x, y - rectBottom),\n },\n br: {\n width: x - rectLeft,\n height: y - rectTop,\n leftMaker: () => rectLeft,\n topMaker: () => rectTop,\n maxWidth: canvasWidth - rectLeft,\n maxHeight: canvasHeight - rectTop,\n scaleTo: getScaleBasis(x - rectRight, y - rectBottom),\n },\n };\n\n return this.adjustRatioCropzoneSize(resizeInfoMap[corner]);\n },\n\n /**\n * Return the whether this cropzone is valid\n * @returns {boolean}\n */\n isValid() {\n return this.left >= 0 && this.top >= 0 && this.width > 0 && this.height > 0;\n },\n\n /**\n * Keydown event handler\n * @param {{number}} keyCode - Event keyCode\n * @private\n */\n _onKeyDown({ keyCode }) {\n if (keyCode === keyCodes.SHIFT) {\n this._withShiftKey = true;\n }\n },\n\n /**\n * Keyup event handler\n * @param {{number}} keyCode - Event keyCode\n * @private\n */\n _onKeyUp({ keyCode }) {\n if (keyCode === keyCodes.SHIFT) {\n this._withShiftKey = false;\n }\n },\n }\n);\n\nexport default Cropzone;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Emboss extending fabric.Image.filters.Convolute\n */\nimport fabric from 'fabric';\n\n/**\n * Emboss object\n * @class Emboss\n * @extends {fabric.Image.filters.Convolute}\n * @ignore\n */\nconst Emboss = fabric.util.createClass(\n fabric.Image.filters.Convolute,\n /** @lends Convolute.prototype */ {\n /**\n * Filter type\n * @param {String} type\n * @default\n */\n type: 'Emboss',\n\n /**\n * constructor\n * @override\n */\n initialize() {\n this.matrix = [1, 1, 1, 1, 0.7, -1, -1, -1, -1];\n },\n }\n);\n\nexport default Emboss;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Mask extending fabric.Image.filters.Mask\n */\nimport fabric from 'fabric';\n\n/**\n * Mask object\n * @class Mask\n * @extends {fabric.Image.filters.BlendImage}\n * @ignore\n */\nconst Mask = fabric.util.createClass(\n fabric.Image.filters.BlendImage,\n /** @lends Mask.prototype */ {\n /**\n * Apply filter to canvas element\n * @param {Object} pipelineState - Canvas element to apply filter\n * @override\n */\n applyTo(pipelineState) {\n if (!this.mask) {\n return;\n }\n\n const canvas = pipelineState.canvasEl;\n const { width, height } = canvas;\n const maskCanvasEl = this._createCanvasOfMask(width, height);\n const ctx = canvas.getContext('2d');\n const maskCtx = maskCanvasEl.getContext('2d');\n const imageData = ctx.getImageData(0, 0, width, height);\n\n this._drawMask(maskCtx, canvas, ctx);\n this._mapData(maskCtx, imageData, width, height);\n\n pipelineState.imageData = imageData;\n },\n\n /**\n * Create canvas of mask image\n * @param {number} width - Width of main canvas\n * @param {number} height - Height of main canvas\n * @returns {HTMLElement} Canvas element\n * @private\n */\n _createCanvasOfMask(width, height) {\n const maskCanvasEl = fabric.util.createCanvasElement();\n\n maskCanvasEl.width = width;\n maskCanvasEl.height = height;\n\n return maskCanvasEl;\n },\n\n /**\n * Draw mask image on canvas element\n * @param {Object} maskCtx - Context of mask canvas\n * @private\n */\n _drawMask(maskCtx) {\n const { mask } = this;\n const maskImg = mask.getElement();\n const { angle, left, scaleX, scaleY, top } = mask;\n\n maskCtx.save();\n maskCtx.translate(left, top);\n maskCtx.rotate((angle * Math.PI) / 180);\n maskCtx.scale(scaleX, scaleY);\n maskCtx.drawImage(maskImg, -maskImg.width / 2, -maskImg.height / 2);\n maskCtx.restore();\n },\n\n /**\n * Map mask image data to source image data\n * @param {Object} maskCtx - Context of mask canvas\n * @param {Object} imageData - Data of source image\n * @param {number} width - Width of main canvas\n * @param {number} height - Height of main canvas\n * @private\n */\n _mapData(maskCtx, imageData, width, height) {\n const { data, height: imgHeight, width: imgWidth } = imageData;\n const sourceData = data;\n const len = imgWidth * imgHeight * 4;\n const maskData = maskCtx.getImageData(0, 0, width, height).data;\n\n for (let i = 0; i < len; i += 4) {\n sourceData[i + 3] = maskData[i]; // adjust value of alpha data\n }\n },\n }\n);\n\nexport default Mask;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Sharpen extending fabric.Image.filters.Convolute\n */\nimport fabric from 'fabric';\n\n/**\n * Sharpen object\n * @class Sharpen\n * @extends {fabric.Image.filters.Convolute}\n * @ignore\n */\nconst Sharpen = fabric.util.createClass(\n fabric.Image.filters.Convolute,\n /** @lends Convolute.prototype */ {\n /**\n * Filter type\n * @param {String} type\n * @default\n */\n type: 'Sharpen',\n\n /**\n * constructor\n * @override\n */\n initialize() {\n this.matrix = [0, -1, 0, -1, 5, -1, 0, -1, 0];\n },\n }\n);\n\nexport default Sharpen;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Command factory\n */\nimport Command from '@/interface/command';\n\nconst commands = {};\n\n/**\n * Create a command\n * @param {string} name - Command name\n * @param {...*} args - Arguments for creating command\n * @returns {Command}\n * @ignore\n */\nfunction create(name, ...args) {\n const actions = commands[name];\n if (actions) {\n return new Command(actions, args);\n }\n\n return null;\n}\n\n/**\n * Register a command with name as a key\n * @param {Object} command - {name:{string}, execute: {function}, undo: {function}}\n * @param {string} command.name - command name\n * @param {function} command.execute - executable function\n * @param {function} command.undo - undo function\n * @ignore\n */\nfunction register(command) {\n commands[command.name] = command;\n}\n\nexport default {\n create,\n register,\n};\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Error-message factory\n */\nimport snippet from 'tui-code-snippet';\nimport { keyMirror } from '@/util';\n\nconst types = keyMirror('UN_IMPLEMENTATION', 'NO_COMPONENT_NAME');\nconst messages = {\n UN_IMPLEMENTATION: 'Should implement a method: ',\n NO_COMPONENT_NAME: 'Should set a component name',\n};\nconst map = {\n UN_IMPLEMENTATION(methodName) {\n return messages.UN_IMPLEMENTATION + methodName;\n },\n NO_COMPONENT_NAME() {\n return messages.NO_COMPONENT_NAME;\n },\n};\n\nexport default {\n types: snippet.extend({}, types),\n\n create(type, ...args) {\n type = type.toLowerCase();\n const func = map[type];\n\n return func(...args);\n },\n};\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Graphics module\n */\nimport snippet from 'tui-code-snippet';\nimport fabric from 'fabric';\nimport ImageLoader from '@/component/imageLoader';\nimport Cropper from '@/component/cropper';\nimport Flip from '@/component/flip';\nimport Rotation from '@/component/rotation';\nimport FreeDrawing from '@/component/freeDrawing';\nimport Line from '@/component/line';\nimport Text from '@/component/text';\nimport Icon from '@/component/icon';\nimport Filter from '@/component/filter';\nimport Shape from '@/component/shape';\nimport Zoom from '@/component/zoom';\nimport CropperDrawingMode from '@/drawingMode/cropper';\nimport FreeDrawingMode from '@/drawingMode/freeDrawing';\nimport LineDrawingMode from '@/drawingMode/lineDrawing';\nimport ShapeDrawingMode from '@/drawingMode/shape';\nimport TextDrawingMode from '@/drawingMode/text';\nimport IconDrawingMode from '@/drawingMode/icon';\nimport ZoomDrawingMode from '@/drawingMode/zoom';\nimport {\n makeSelectionUndoData,\n makeSelectionUndoDatum,\n setCachedUndoDataForDimension,\n} from '@/helper/selectionModifyHelper';\nimport { getProperties, includes, isShape, Promise } from '@/util';\nimport {\n componentNames as components,\n eventNames as events,\n drawingModes,\n fObjectOptions,\n} from '@/consts';\nimport Resize from '@/component/resize';\nimport ResizeDrawingMode from '@/drawingMode/resize';\n\nconst { extend, stamp, isArray, isString, forEachArray, forEachOwnProperties, CustomEvents } =\n snippet;\nconst DEFAULT_CSS_MAX_WIDTH = 1000;\nconst DEFAULT_CSS_MAX_HEIGHT = 800;\nconst EXTRA_PX_FOR_PASTE = 10;\n\nconst cssOnly = {\n cssOnly: true,\n};\nconst backstoreOnly = {\n backstoreOnly: true,\n};\n\n/**\n * Graphics class\n * @class\n * @param {string|HTMLElement} wrapper - Wrapper's element or selector\n * @param {Object} [option] - Canvas max width & height of css\n * @param {number} option.cssMaxWidth - Canvas css-max-width\n * @param {number} option.cssMaxHeight - Canvas css-max-height\n * @ignore\n */\nclass Graphics {\n constructor(element, { cssMaxWidth, cssMaxHeight } = {}) {\n /**\n * Fabric image instance\n * @type {fabric.Image}\n */\n this.canvasImage = null;\n\n /**\n * Max width of canvas elements\n * @type {number}\n */\n this.cssMaxWidth = cssMaxWidth || DEFAULT_CSS_MAX_WIDTH;\n\n /**\n * Max height of canvas elements\n * @type {number}\n */\n this.cssMaxHeight = cssMaxHeight || DEFAULT_CSS_MAX_HEIGHT;\n\n /**\n * cropper Selection Style\n * @type {Object}\n */\n this.cropSelectionStyle = {};\n\n /**\n * target fabric object for copy paste feature\n * @type {fabric.Object}\n * @private\n */\n this.targetObjectForCopyPaste = null;\n\n /**\n * Image name\n * @type {string}\n */\n this.imageName = '';\n\n /**\n * Object Map\n * @type {Object}\n * @private\n */\n this._objects = {};\n\n /**\n * Fabric-Canvas instance\n * @type {fabric.Canvas}\n * @private\n */\n this._canvas = null;\n\n /**\n * Drawing mode\n * @type {string}\n * @private\n */\n this._drawingMode = drawingModes.NORMAL;\n\n /**\n * DrawingMode map\n * @type {Object.}\n * @private\n */\n this._drawingModeMap = {};\n\n /**\n * Component map\n * @type {Object.}\n * @private\n */\n this._componentMap = {};\n\n /**\n * fabric event handlers\n * @type {Object.}\n * @private\n */\n this._handler = {\n onMouseDown: this._onMouseDown.bind(this),\n onObjectAdded: this._onObjectAdded.bind(this),\n onObjectRemoved: this._onObjectRemoved.bind(this),\n onObjectMoved: this._onObjectMoved.bind(this),\n onObjectScaled: this._onObjectScaled.bind(this),\n onObjectModified: this._onObjectModified.bind(this),\n onObjectRotated: this._onObjectRotated.bind(this),\n onObjectSelected: this._onObjectSelected.bind(this),\n onPathCreated: this._onPathCreated.bind(this),\n onSelectionCleared: this._onSelectionCleared.bind(this),\n onSelectionCreated: this._onSelectionCreated.bind(this),\n };\n\n this._setObjectCachingToFalse();\n this._setCanvasElement(element);\n this._createDrawingModeInstances();\n this._createComponents();\n this._attachCanvasEvents();\n this._attachZoomEvents();\n }\n\n /**\n * Destroy canvas element\n */\n destroy() {\n const { wrapperEl } = this._canvas;\n\n this._canvas.clear();\n\n wrapperEl.parentNode.removeChild(wrapperEl);\n\n this._detachZoomEvents();\n }\n\n /**\n * Attach zoom events\n */\n _attachZoomEvents() {\n const zoom = this.getComponent(components.ZOOM);\n\n zoom.attachKeyboardZoomEvents();\n }\n\n /**\n * Detach zoom events\n */\n _detachZoomEvents() {\n const zoom = this.getComponent(components.ZOOM);\n\n zoom.detachKeyboardZoomEvents();\n }\n\n /**\n * Deactivates all objects on canvas\n * @returns {Graphics} this\n */\n deactivateAll() {\n this._canvas.discardActiveObject();\n\n return this;\n }\n\n /**\n * Renders all objects on canvas\n * @returns {Graphics} this\n */\n renderAll() {\n this._canvas.renderAll();\n\n return this;\n }\n\n /**\n * Adds objects on canvas\n * @param {Object|Array} objects - objects\n */\n add(objects) {\n let theArgs = [];\n if (isArray(objects)) {\n theArgs = objects;\n } else {\n theArgs.push(objects);\n }\n\n this._canvas.add(...theArgs);\n }\n\n /**\n * Removes the object or group\n * @param {Object} target - graphics object or group\n * @returns {boolean} true if contains or false\n */\n contains(target) {\n return this._canvas.contains(target);\n }\n\n /**\n * Gets all objects or group\n * @returns {Array} all objects, shallow copy\n */\n getObjects() {\n return this._canvas.getObjects().slice();\n }\n\n /**\n * Get an object by id\n * @param {number} id - object id\n * @returns {fabric.Object} object corresponding id\n */\n getObject(id) {\n return this._objects[id];\n }\n\n /**\n * Removes the object or group\n * @param {Object} target - graphics object or group\n */\n remove(target) {\n this._canvas.remove(target);\n }\n\n /**\n * Removes all object or group\n * @param {boolean} includesBackground - remove the background image or not\n * @returns {Array} all objects array which is removed\n */\n removeAll(includesBackground) {\n const canvas = this._canvas;\n const objects = canvas.getObjects().slice();\n canvas.remove(...this._canvas.getObjects());\n\n if (includesBackground) {\n canvas.clear();\n }\n\n return objects;\n }\n\n /**\n * Removes an object or group by id\n * @param {number} id - object id\n * @returns {Array} removed objects\n */\n removeObjectById(id) {\n const objects = [];\n const canvas = this._canvas;\n const target = this.getObject(id);\n const isValidGroup = target && target.isType('group') && !target.isEmpty();\n\n if (isValidGroup) {\n canvas.discardActiveObject(); // restore states for each objects\n target.forEachObject((obj) => {\n objects.push(obj);\n canvas.remove(obj);\n });\n } else if (canvas.contains(target)) {\n objects.push(target);\n canvas.remove(target);\n }\n\n return objects;\n }\n\n /**\n * Get an id by object instance\n * @param {fabric.Object} object object\n * @returns {number} object id if it exists or null\n */\n getObjectId(object) {\n let key = null;\n for (key in this._objects) {\n if (this._objects.hasOwnProperty(key)) {\n if (object === this._objects[key]) {\n return key;\n }\n }\n }\n\n return null;\n }\n\n /**\n * Gets an active object or group\n * @returns {Object} active object or group instance\n */\n getActiveObject() {\n return this._canvas._activeObject;\n }\n\n /**\n * Returns the object ID to delete the object.\n * @returns {number} object id for remove\n */\n getActiveObjectIdForRemove() {\n const activeObject = this.getActiveObject();\n const { type, left, top } = activeObject;\n const isSelection = type === 'activeSelection';\n\n if (isSelection) {\n const group = new fabric.Group([...activeObject.getObjects()], {\n left,\n top,\n });\n\n return this._addFabricObject(group);\n }\n\n return this.getObjectId(activeObject);\n }\n\n /**\n * Verify that you are ready to erase the object.\n * @returns {boolean} ready for object remove\n */\n isReadyRemoveObject() {\n const activeObject = this.getActiveObject();\n\n return activeObject && !activeObject.isEditing;\n }\n\n /**\n * Gets an active group object\n * @returns {Object} active group object instance\n */\n getActiveObjects() {\n const activeObject = this._canvas._activeObject;\n\n return activeObject && activeObject.type === 'activeSelection' ? activeObject : null;\n }\n\n /**\n * Get Active object Selection from object ids\n * @param {Array.} objects - fabric objects\n * @returns {Object} target - target object group\n */\n getActiveSelectionFromObjects(objects) {\n const canvas = this.getCanvas();\n\n return new fabric.ActiveSelection(objects, { canvas });\n }\n\n /**\n * Activates an object or group\n * @param {Object} target - target object or group\n */\n setActiveObject(target) {\n this._canvas.setActiveObject(target);\n }\n\n /**\n * Set Crop selection style\n * @param {Object} style - Selection styles\n */\n setCropSelectionStyle(style) {\n this.cropSelectionStyle = style;\n }\n\n /**\n * Get component\n * @param {string} name - Component name\n * @returns {Component}\n */\n getComponent(name) {\n return this._componentMap[name];\n }\n\n /**\n * Get current drawing mode\n * @returns {string}\n */\n getDrawingMode() {\n return this._drawingMode;\n }\n\n /**\n * Start a drawing mode. If the current mode is not 'NORMAL', 'stopDrawingMode()' will be called first.\n * @param {String} mode Can be one of 'CROPPER', 'FREE_DRAWING', 'LINE', 'TEXT', 'SHAPE'\n * @param {Object} [option] parameters of drawing mode, it's available with 'FREE_DRAWING', 'LINE_DRAWING'\n * @param {Number} [option.width] brush width\n * @param {String} [option.color] brush color\n * @returns {boolean} true if success or false\n */\n startDrawingMode(mode, option) {\n if (this._isSameDrawingMode(mode)) {\n return true;\n }\n\n // If the current mode is not 'NORMAL', 'stopDrawingMode()' will be called first.\n this.stopDrawingMode();\n\n const drawingModeInstance = this._getDrawingModeInstance(mode);\n if (drawingModeInstance && drawingModeInstance.start) {\n drawingModeInstance.start(this, option);\n\n this._drawingMode = mode;\n }\n\n return !!drawingModeInstance;\n }\n\n /**\n * Stop the current drawing mode and back to the 'NORMAL' mode\n */\n stopDrawingMode() {\n if (this._isSameDrawingMode(drawingModes.NORMAL)) {\n return;\n }\n\n const drawingModeInstance = this._getDrawingModeInstance(this.getDrawingMode());\n if (drawingModeInstance && drawingModeInstance.end) {\n drawingModeInstance.end(this);\n }\n this._drawingMode = drawingModes.NORMAL;\n }\n\n /**\n * Change zoom of canvas\n * @param {{x: number, y: number}} center - center of zoom\n * @param {number} zoomLevel - zoom level\n */\n zoom({ x, y }, zoomLevel) {\n const zoom = this.getComponent(components.ZOOM);\n\n zoom.zoom({ x, y }, zoomLevel);\n }\n\n /**\n * Get zoom mode\n * @returns {string}\n */\n getZoomMode() {\n const zoom = this.getComponent(components.ZOOM);\n\n return zoom.mode;\n }\n\n /**\n * Start zoom-in mode\n */\n startZoomInMode() {\n const zoom = this.getComponent(components.ZOOM);\n\n zoom.startZoomInMode();\n }\n\n /**\n * Stop zoom-in mode\n */\n endZoomInMode() {\n const zoom = this.getComponent(components.ZOOM);\n\n zoom.endZoomInMode();\n }\n\n /**\n * Zoom out one step\n */\n zoomOut() {\n const zoom = this.getComponent(components.ZOOM);\n\n zoom.zoomOut();\n }\n\n /**\n * Start hand mode\n */\n startHandMode() {\n const zoom = this.getComponent(components.ZOOM);\n\n zoom.startHandMode();\n }\n\n /**\n * Stop hand mode\n */\n endHandMode() {\n const zoom = this.getComponent(components.ZOOM);\n\n zoom.endHandMode();\n }\n\n /**\n * Zoom reset\n */\n resetZoom() {\n const zoom = this.getComponent(components.ZOOM);\n\n zoom.resetZoom();\n }\n\n /**\n * To data url from canvas\n * @param {Object} options - options for toDataURL\n * @param {String} [options.format=png] The format of the output image. Either \"jpeg\" or \"png\"\n * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg.\n * @param {Number} [options.multiplier=1] Multiplier to scale by\n * @param {Number} [options.left] Cropping left offset. Introduced in fabric v1.2.14\n * @param {Number} [options.top] Cropping top offset. Introduced in fabric v1.2.14\n * @param {Number} [options.width] Cropping width. Introduced in fabric v1.2.14\n * @param {Number} [options.height] Cropping height. Introduced in fabric v1.2.14\n * @returns {string} A DOMString containing the requested data URI.\n */\n toDataURL(options) {\n const cropper = this.getComponent(components.CROPPER);\n cropper.changeVisibility(false);\n\n const dataUrl = this._canvas && this._canvas.toDataURL(options);\n cropper.changeVisibility(true);\n\n return dataUrl;\n }\n\n /**\n * Save image(background) of canvas\n * @param {string} name - Name of image\n * @param {?fabric.Image} canvasImage - Fabric image instance\n */\n setCanvasImage(name, canvasImage) {\n if (canvasImage) {\n stamp(canvasImage);\n }\n this.imageName = name;\n this.canvasImage = canvasImage;\n }\n\n /**\n * Set css max dimension\n * @param {{width: number, height: number}} maxDimension - Max width & Max height\n */\n setCssMaxDimension(maxDimension) {\n this.cssMaxWidth = maxDimension.width || this.cssMaxWidth;\n this.cssMaxHeight = maxDimension.height || this.cssMaxHeight;\n }\n\n /**\n * Adjust canvas dimension with scaling image\n */\n adjustCanvasDimension() {\n this.adjustCanvasDimensionBase(this.canvasImage.scale(1));\n }\n\n adjustCanvasDimensionBase(canvasImage = null) {\n if (!canvasImage) {\n canvasImage = this.canvasImage;\n }\n\n const { width, height } = canvasImage.getBoundingRect();\n const maxDimension = this._calcMaxDimension(width, height);\n\n this.setCanvasCssDimension({\n width: '100%',\n height: '100%', // Set height '' for IE9\n 'max-width': `${maxDimension.width}px`,\n 'max-height': `${maxDimension.height}px`,\n });\n\n this.setCanvasBackstoreDimension({\n width,\n height,\n });\n this._canvas.centerObject(canvasImage);\n }\n\n /**\n * Set canvas dimension - css only\n * {@link http://fabricjs.com/docs/fabric.Canvas.html#setDimensions}\n * @param {Object} dimension - Canvas css dimension\n */\n setCanvasCssDimension(dimension) {\n this._canvas.setDimensions(dimension, cssOnly);\n }\n\n /**\n * Set canvas dimension - backstore only\n * {@link http://fabricjs.com/docs/fabric.Canvas.html#setDimensions}\n * @param {Object} dimension - Canvas backstore dimension\n */\n setCanvasBackstoreDimension(dimension) {\n this._canvas.setDimensions(dimension, backstoreOnly);\n }\n\n /**\n * Set image properties\n * {@link http://fabricjs.com/docs/fabric.Image.html#set}\n * @param {Object} setting - Image properties\n * @param {boolean} [withRendering] - If true, The changed image will be reflected in the canvas\n */\n setImageProperties(setting, withRendering) {\n const { canvasImage } = this;\n\n if (!canvasImage) {\n return;\n }\n\n canvasImage.set(setting).setCoords();\n if (withRendering) {\n this._canvas.renderAll();\n }\n }\n\n /**\n * Returns canvas element of fabric.Canvas[[lower-canvas]]\n * @returns {HTMLCanvasElement}\n */\n getCanvasElement() {\n return this._canvas.getElement();\n }\n\n /**\n * Get fabric.Canvas instance\n * @returns {fabric.Canvas}\n */\n getCanvas() {\n return this._canvas;\n }\n\n /**\n * Get canvasImage (fabric.Image instance)\n * @returns {fabric.Image}\n */\n getCanvasImage() {\n return this.canvasImage;\n }\n\n /**\n * Get image name\n * @returns {string}\n */\n getImageName() {\n return this.imageName;\n }\n\n /**\n * Add image object on canvas\n * @param {string} imgUrl - Image url to make object\n * @returns {Promise}\n */\n addImageObject(imgUrl) {\n const callback = this._callbackAfterLoadingImageObject.bind(this);\n\n return new Promise((resolve) => {\n fabric.Image.fromURL(\n imgUrl,\n (image) => {\n callback(image);\n resolve(this.createObjectProperties(image));\n },\n {\n crossOrigin: 'Anonymous',\n }\n );\n });\n }\n\n /**\n * Get center position of canvas\n * @returns {Object} {left, top}\n */\n getCenter() {\n return this._canvas.getCenter();\n }\n\n /**\n * Get cropped rect\n * @returns {Object} rect\n */\n getCropzoneRect() {\n return this.getComponent(components.CROPPER).getCropzoneRect();\n }\n\n /**\n * Get cropped rect\n * @param {number} [mode] cropzone rect mode\n */\n setCropzoneRect(mode) {\n this.getComponent(components.CROPPER).setCropzoneRect(mode);\n }\n\n /**\n * Get cropped image data\n * @param {Object} cropRect cropzone rect\n * @param {Number} cropRect.left left position\n * @param {Number} cropRect.top top position\n * @param {Number} cropRect.width width\n * @param {Number} cropRect.height height\n * @returns {?{imageName: string, url: string}} cropped Image data\n */\n getCroppedImageData(cropRect) {\n return this.getComponent(components.CROPPER).getCroppedImageData(cropRect);\n }\n\n /**\n * Set brush option\n * @param {Object} option brush option\n * @param {Number} option.width width\n * @param {String} option.color color like 'FFFFFF', 'rgba(0, 0, 0, 0.5)'\n */\n setBrush(option) {\n const drawingMode = this._drawingMode;\n let compName = components.FREE_DRAWING;\n\n if (drawingMode === drawingModes.LINE_DRAWING) {\n compName = components.LINE;\n }\n\n this.getComponent(compName).setBrush(option);\n }\n\n /**\n * Set states of current drawing shape\n * @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle')\n * @param {Object} [options] - Shape options\n * @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or\n * Shape foreground color (ex: '#fff', 'transparent')\n * @param {string} [options.stoke] - Shape outline color\n * @param {number} [options.strokeWidth] - Shape outline width\n * @param {number} [options.width] - Width value (When type option is 'rect', this options can use)\n * @param {number} [options.height] - Height value (When type option is 'rect', this options can use)\n * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)\n * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)\n * @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not\n */\n setDrawingShape(type, options) {\n this.getComponent(components.SHAPE).setStates(type, options);\n }\n\n /**\n * Set style of current drawing icon\n * @param {string} type - icon type (ex: 'icon-arrow', 'icon-star')\n * @param {Object} [iconColor] - Icon color\n */\n setIconStyle(type, iconColor) {\n this.getComponent(components.ICON).setStates(type, iconColor);\n }\n\n /**\n * Register icon paths\n * @param {Object} pathInfos - Path infos\n * @param {string} pathInfos.key - key\n * @param {string} pathInfos.value - value\n */\n registerPaths(pathInfos) {\n this.getComponent(components.ICON).registerPaths(pathInfos);\n }\n\n /**\n * Change cursor style\n * @param {string} cursorType - cursor type\n */\n changeCursor(cursorType) {\n const canvas = this.getCanvas();\n canvas.defaultCursor = cursorType;\n canvas.renderAll();\n }\n\n /**\n * Whether it has the filter or not\n * @param {string} type - Filter type\n * @returns {boolean} true if it has the filter\n */\n hasFilter(type) {\n return this.getComponent(components.FILTER).hasFilter(type);\n }\n\n /**\n * Set selection style of fabric object by init option\n * @param {Object} styles - Selection styles\n */\n setSelectionStyle(styles) {\n extend(fObjectOptions.SELECTION_STYLE, styles);\n }\n\n /**\n * Set object properties\n * @param {number} id - object id\n * @param {Object} props - props\n * @param {string} [props.fill] Color\n * @param {string} [props.fontFamily] Font type for text\n * @param {number} [props.fontSize] Size\n * @param {string} [props.fontStyle] Type of inclination (normal / italic)\n * @param {string} [props.fontWeight] Type of thicker or thinner looking (normal / bold)\n * @param {string} [props.textAlign] Type of text align (left / center / right)\n * @param {string} [props.textDecoration] Type of line (underline / line-through / overline)\n * @returns {Object} applied properties\n */\n setObjectProperties(id, props) {\n const object = this.getObject(id);\n const clone = extend({}, props);\n\n object.set(clone);\n\n object.setCoords();\n\n this.getCanvas().renderAll();\n\n return clone;\n }\n\n /**\n * Get object properties corresponding key\n * @param {number} id - object id\n * @param {Array|ObjectProps|string} keys - property's key\n * @returns {Object} properties\n */\n getObjectProperties(id, keys) {\n const object = this.getObject(id);\n const props = {};\n\n if (isString(keys)) {\n props[keys] = object[keys];\n } else if (isArray(keys)) {\n forEachArray(keys, (value) => {\n props[value] = object[value];\n });\n } else {\n forEachOwnProperties(keys, (value, key) => {\n props[key] = object[key];\n });\n }\n\n return props;\n }\n\n /**\n * Get object position by originX, originY\n * @param {number} id - object id\n * @param {string} originX - can be 'left', 'center', 'right'\n * @param {string} originY - can be 'top', 'center', 'bottom'\n * @returns {Object} {{x:number, y: number}} position by origin if id is valid, or null\n */\n getObjectPosition(id, originX, originY) {\n const targetObj = this.getObject(id);\n if (!targetObj) {\n return null;\n }\n\n return targetObj.getPointByOrigin(originX, originY);\n }\n\n /**\n * Set object position by originX, originY\n * @param {number} id - object id\n * @param {Object} posInfo - position object\n * @param {number} posInfo.x - x position\n * @param {number} posInfo.y - y position\n * @param {string} posInfo.originX - can be 'left', 'center', 'right'\n * @param {string} posInfo.originY - can be 'top', 'center', 'bottom'\n * @returns {boolean} true if target id is valid or false\n */\n setObjectPosition(id, posInfo) {\n const targetObj = this.getObject(id);\n const { x, y, originX, originY } = posInfo;\n if (!targetObj) {\n return false;\n }\n\n const targetOrigin = targetObj.getPointByOrigin(originX, originY);\n const centerOrigin = targetObj.getPointByOrigin('center', 'center');\n const diffX = centerOrigin.x - targetOrigin.x;\n const diffY = centerOrigin.y - targetOrigin.y;\n\n targetObj.set({\n left: x + diffX,\n top: y + diffY,\n });\n\n targetObj.setCoords();\n\n return true;\n }\n\n /**\n * Get the canvas size\n * @returns {Object} {{width: number, height: number}} image size\n */\n getCanvasSize() {\n const image = this.getCanvasImage();\n\n return {\n width: image ? image.width : 0,\n height: image ? image.height : 0,\n };\n }\n\n /**\n * Create fabric static canvas\n * @returns {Object} {{width: number, height: number}} image size\n */\n createStaticCanvas() {\n const staticCanvas = new fabric.StaticCanvas();\n\n staticCanvas.set({\n enableRetinaScaling: false,\n });\n\n return staticCanvas;\n }\n\n /**\n * Get a DrawingMode instance\n * @param {string} modeName - DrawingMode Class Name\n * @returns {DrawingMode} DrawingMode instance\n * @private\n */\n _getDrawingModeInstance(modeName) {\n return this._drawingModeMap[modeName];\n }\n\n /**\n * Set object caching to false. This brought many bugs when draw Shape & cropzone\n * @see http://fabricjs.com/fabric-object-caching\n * @private\n */\n _setObjectCachingToFalse() {\n fabric.Object.prototype.objectCaching = false;\n }\n\n /**\n * Set canvas element to fabric.Canvas\n * @param {Element|string} element - Wrapper or canvas element or selector\n * @private\n */\n _setCanvasElement(element) {\n let selectedElement;\n let canvasElement;\n\n if (element.nodeType) {\n selectedElement = element;\n } else {\n selectedElement = document.querySelector(element);\n }\n\n if (selectedElement.nodeName.toUpperCase() !== 'CANVAS') {\n canvasElement = document.createElement('canvas');\n selectedElement.appendChild(canvasElement);\n }\n\n this._canvas = new fabric.Canvas(canvasElement, {\n containerClass: 'tui-image-editor-canvas-container',\n enableRetinaScaling: false,\n });\n }\n\n /**\n * Creates DrawingMode instances\n * @private\n */\n _createDrawingModeInstances() {\n this._register(this._drawingModeMap, new CropperDrawingMode());\n this._register(this._drawingModeMap, new FreeDrawingMode());\n this._register(this._drawingModeMap, new LineDrawingMode());\n this._register(this._drawingModeMap, new ShapeDrawingMode());\n this._register(this._drawingModeMap, new TextDrawingMode());\n this._register(this._drawingModeMap, new IconDrawingMode());\n this._register(this._drawingModeMap, new ZoomDrawingMode());\n this._register(this._drawingModeMap, new ResizeDrawingMode());\n }\n\n /**\n * Create components\n * @private\n */\n _createComponents() {\n this._register(this._componentMap, new ImageLoader(this));\n this._register(this._componentMap, new Cropper(this));\n this._register(this._componentMap, new Flip(this));\n this._register(this._componentMap, new Rotation(this));\n this._register(this._componentMap, new FreeDrawing(this));\n this._register(this._componentMap, new Line(this));\n this._register(this._componentMap, new Text(this));\n this._register(this._componentMap, new Icon(this));\n this._register(this._componentMap, new Filter(this));\n this._register(this._componentMap, new Shape(this));\n this._register(this._componentMap, new Zoom(this));\n this._register(this._componentMap, new Resize(this));\n }\n\n /**\n * Register component\n * @param {Object} map - map object\n * @param {Object} module - module which has getName method\n * @private\n */\n _register(map, module) {\n map[module.getName()] = module;\n }\n\n /**\n * Get the current drawing mode is same with given mode\n * @param {string} mode drawing mode\n * @returns {boolean} true if same or false\n */\n _isSameDrawingMode(mode) {\n return this.getDrawingMode() === mode;\n }\n\n /**\n * Calculate max dimension of canvas\n * The css-max dimension is dynamically decided with maintaining image ratio\n * The css-max dimension is lower than canvas dimension (attribute of canvas, not css)\n * @param {number} width - Canvas width\n * @param {number} height - Canvas height\n * @returns {{width: number, height: number}} - Max width & Max height\n * @private\n */\n _calcMaxDimension(width, height) {\n const wScaleFactor = this.cssMaxWidth / width;\n const hScaleFactor = this.cssMaxHeight / height;\n let cssMaxWidth = Math.min(width, this.cssMaxWidth);\n let cssMaxHeight = Math.min(height, this.cssMaxHeight);\n\n if (wScaleFactor < 1 && wScaleFactor < hScaleFactor) {\n cssMaxWidth = width * wScaleFactor;\n cssMaxHeight = height * wScaleFactor;\n } else if (hScaleFactor < 1 && hScaleFactor < wScaleFactor) {\n cssMaxWidth = width * hScaleFactor;\n cssMaxHeight = height * hScaleFactor;\n }\n\n return {\n width: Math.floor(cssMaxWidth),\n height: Math.floor(cssMaxHeight),\n };\n }\n\n /**\n * Callback function after loading image\n * @param {fabric.Image} obj - Fabric image object\n * @private\n */\n _callbackAfterLoadingImageObject(obj) {\n const centerPos = this.getCanvasImage().getCenterPoint();\n\n obj.set(fObjectOptions.SELECTION_STYLE);\n obj.set({\n left: centerPos.x,\n top: centerPos.y,\n crossOrigin: 'Anonymous',\n });\n\n this.getCanvas().add(obj).setActiveObject(obj);\n }\n\n /**\n * Attach canvas's events\n */\n _attachCanvasEvents() {\n const canvas = this._canvas;\n const handler = this._handler;\n canvas.on({\n 'mouse:down': handler.onMouseDown,\n 'object:added': handler.onObjectAdded,\n 'object:removed': handler.onObjectRemoved,\n 'object:moving': handler.onObjectMoved,\n 'object:scaling': handler.onObjectScaled,\n 'object:modified': handler.onObjectModified,\n 'object:rotating': handler.onObjectRotated,\n 'path:created': handler.onPathCreated,\n 'selection:cleared': handler.onSelectionCleared,\n 'selection:created': handler.onSelectionCreated,\n 'selection:updated': handler.onObjectSelected,\n });\n }\n\n /**\n * \"mouse:down\" canvas event handler\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onMouseDown(fEvent) {\n const { e: event, target } = fEvent;\n const originPointer = this._canvas.getPointer(event);\n\n if (target) {\n const { type } = target;\n const undoData = makeSelectionUndoData(target, (item) =>\n makeSelectionUndoDatum(this.getObjectId(item), item, type === 'activeSelection')\n );\n\n setCachedUndoDataForDimension(undoData);\n }\n\n this.fire(events.MOUSE_DOWN, event, originPointer);\n }\n\n /**\n * \"object:added\" canvas event handler\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onObjectAdded(fEvent) {\n const obj = fEvent.target;\n if (obj.isType('cropzone')) {\n return;\n }\n\n this._addFabricObject(obj);\n }\n\n /**\n * \"object:removed\" canvas event handler\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onObjectRemoved(fEvent) {\n const obj = fEvent.target;\n\n this._removeFabricObject(stamp(obj));\n }\n\n /**\n * \"object:moving\" canvas event handler\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onObjectMoved(fEvent) {\n this._lazyFire(\n events.OBJECT_MOVED,\n (object) => this.createObjectProperties(object),\n fEvent.target\n );\n }\n\n /**\n * \"object:scaling\" canvas event handler\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onObjectScaled(fEvent) {\n this._lazyFire(\n events.OBJECT_SCALED,\n (object) => this.createObjectProperties(object),\n fEvent.target\n );\n }\n\n /**\n * \"object:modified\" canvas event handler\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onObjectModified(fEvent) {\n const { target } = fEvent;\n if (target.type === 'activeSelection') {\n const items = target.getObjects();\n\n items.forEach((item) => item.fire('modifiedInGroup', target));\n }\n\n this.fire(events.OBJECT_MODIFIED, target, this.getObjectId(target));\n }\n\n /**\n * \"object:rotating\" canvas event handler\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onObjectRotated(fEvent) {\n this._lazyFire(\n events.OBJECT_ROTATED,\n (object) => this.createObjectProperties(object),\n fEvent.target\n );\n }\n\n /**\n * Lazy event emitter\n * @param {string} eventName - event name\n * @param {Function} paramsMaker - make param function\n * @param {Object} [target] - Object of the event owner.\n * @private\n */\n _lazyFire(eventName, paramsMaker, target) {\n const existEventDelegation = target && target.canvasEventDelegation;\n const delegationState = existEventDelegation ? target.canvasEventDelegation(eventName) : 'none';\n\n if (delegationState === 'unregistered') {\n target.canvasEventRegister(eventName, (object) => {\n this.fire(eventName, paramsMaker(object));\n });\n }\n\n if (delegationState === 'none') {\n this.fire(eventName, paramsMaker(target));\n }\n }\n\n /**\n * \"object:selected\" canvas event handler\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onObjectSelected(fEvent) {\n const { target } = fEvent;\n const params = this.createObjectProperties(target);\n\n this.fire(events.OBJECT_ACTIVATED, params);\n }\n\n /**\n * \"path:created\" canvas event handler\n * @param {{path: fabric.Path}} obj - Path object\n * @private\n */\n _onPathCreated(obj) {\n const { x: left, y: top } = obj.path.getCenterPoint();\n obj.path.set(\n extend(\n {\n left,\n top,\n },\n fObjectOptions.SELECTION_STYLE\n )\n );\n\n const params = this.createObjectProperties(obj.path);\n\n this.fire(events.ADD_OBJECT, params);\n }\n\n /**\n * \"selction:cleared\" canvas event handler\n * @private\n */\n _onSelectionCleared() {\n this.fire(events.SELECTION_CLEARED);\n }\n\n /**\n * \"selction:created\" canvas event handler\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onSelectionCreated(fEvent) {\n const { target } = fEvent;\n const params = this.createObjectProperties(target);\n\n this.fire(events.OBJECT_ACTIVATED, params);\n this.fire(events.SELECTION_CREATED, fEvent.target);\n }\n\n /**\n * Canvas discard selection all\n */\n discardSelection() {\n this._canvas.discardActiveObject();\n this._canvas.renderAll();\n }\n\n /**\n * Canvas Selectable status change\n * @param {boolean} selectable - expect status\n */\n changeSelectableAll(selectable) {\n this._canvas.forEachObject((obj) => {\n obj.selectable = selectable;\n obj.hoverCursor = selectable ? 'move' : 'crosshair';\n });\n }\n\n /**\n * Return object's properties\n * @param {fabric.Object} obj - fabric object\n * @returns {Object} properties object\n */\n createObjectProperties(obj) {\n const predefinedKeys = [\n 'left',\n 'top',\n 'width',\n 'height',\n 'fill',\n 'stroke',\n 'strokeWidth',\n 'opacity',\n 'angle',\n ];\n const props = {\n id: stamp(obj),\n type: obj.type,\n };\n\n extend(props, getProperties(obj, predefinedKeys));\n\n if (includes(['i-text', 'text'], obj.type)) {\n extend(props, this._createTextProperties(obj, props));\n } else if (includes(['rect', 'triangle', 'circle'], obj.type)) {\n const shapeComp = this.getComponent(components.SHAPE);\n extend(props, {\n fill: shapeComp.makeFillPropertyForUserEvent(obj),\n });\n }\n\n return props;\n }\n\n /**\n * Get text object's properties\n * @param {fabric.Object} obj - fabric text object\n * @param {Object} props - properties\n * @returns {Object} properties object\n */\n _createTextProperties(obj) {\n const predefinedKeys = [\n 'text',\n 'fontFamily',\n 'fontSize',\n 'fontStyle',\n 'textAlign',\n 'textDecoration',\n 'fontWeight',\n ];\n const props = {};\n extend(props, getProperties(obj, predefinedKeys));\n\n return props;\n }\n\n /**\n * Add object array by id\n * @param {fabric.Object} obj - fabric object\n * @returns {number} object id\n */\n _addFabricObject(obj) {\n const id = stamp(obj);\n this._objects[id] = obj;\n\n return id;\n }\n\n /**\n * Remove an object in array yb id\n * @param {number} id - object id\n */\n _removeFabricObject(id) {\n delete this._objects[id];\n }\n\n /**\n * Reset targetObjectForCopyPaste value from activeObject\n */\n resetTargetObjectForCopyPaste() {\n const activeObject = this.getActiveObject();\n\n if (activeObject) {\n this.targetObjectForCopyPaste = activeObject;\n }\n }\n\n /**\n * Paste fabric object\n * @returns {Promise}\n */\n pasteObject() {\n if (!this.targetObjectForCopyPaste) {\n return Promise.resolve([]);\n }\n\n const targetObject = this.targetObjectForCopyPaste;\n const isGroupSelect = targetObject.type === 'activeSelection';\n const targetObjects = isGroupSelect ? targetObject.getObjects() : [targetObject];\n let newTargetObject = null;\n\n this.discardSelection();\n\n return this._cloneObject(targetObjects).then((addedObjects) => {\n if (addedObjects.length > 1) {\n newTargetObject = this.getActiveSelectionFromObjects(addedObjects);\n } else {\n [newTargetObject] = addedObjects;\n }\n this.targetObjectForCopyPaste = newTargetObject;\n this.setActiveObject(newTargetObject);\n });\n }\n\n /**\n * Clone object\n * @param {fabric.Object} targetObjects - fabric object\n * @returns {Promise}\n * @private\n */\n _cloneObject(targetObjects) {\n const addedObjects = snippet.map(targetObjects, (targetObject) =>\n this._cloneObjectItem(targetObject)\n );\n\n return Promise.all(addedObjects);\n }\n\n /**\n * Clone object one item\n * @param {fabric.Object} targetObject - fabric object\n * @returns {Promise}\n * @private\n */\n _cloneObjectItem(targetObject) {\n return this._copyFabricObjectForPaste(targetObject).then((clonedObject) => {\n const objectProperties = this.createObjectProperties(clonedObject);\n this.add(clonedObject);\n\n this.fire(events.ADD_OBJECT, objectProperties);\n\n return clonedObject;\n });\n }\n\n /**\n * Copy fabric object with Changed position for copy and paste\n * @param {fabric.Object} targetObject - fabric object\n * @returns {Promise}\n * @private\n */\n _copyFabricObjectForPaste(targetObject) {\n const addExtraPx = (value, isReverse) =>\n isReverse ? value - EXTRA_PX_FOR_PASTE : value + EXTRA_PX_FOR_PASTE;\n\n return this._copyFabricObject(targetObject).then((clonedObject) => {\n const { left, top, width, height } = clonedObject;\n const { width: canvasWidth, height: canvasHeight } = this.getCanvasSize();\n const rightEdge = left + width / 2;\n const bottomEdge = top + height / 2;\n\n clonedObject.set(\n snippet.extend(\n {\n left: addExtraPx(left, rightEdge + EXTRA_PX_FOR_PASTE > canvasWidth),\n top: addExtraPx(top, bottomEdge + EXTRA_PX_FOR_PASTE > canvasHeight),\n },\n fObjectOptions.SELECTION_STYLE\n )\n );\n\n return clonedObject;\n });\n }\n\n /**\n * Copy fabric object\n * @param {fabric.Object} targetObject - fabric object\n * @returns {Promise}\n * @private\n */\n _copyFabricObject(targetObject) {\n return new Promise((resolve) => {\n targetObject.clone((cloned) => {\n const shapeComp = this.getComponent(components.SHAPE);\n if (isShape(cloned)) {\n shapeComp.processForCopiedObject(cloned, targetObject);\n }\n\n resolve(cloned);\n });\n });\n }\n\n /**\n * Get current dimensions\n * @returns {object}\n */\n getCurrentDimensions() {\n const resize = this.getComponent(components.RESIZE);\n\n return resize.getCurrentDimensions();\n }\n\n /**\n * Get original dimensions\n * @returns {object}\n */\n getOriginalDimensions() {\n const resize = this.getComponent(components.RESIZE);\n\n return resize.getOriginalDimensions();\n }\n\n /**\n * Set original dimensions\n * @param {object} dimensions - Dimensions\n */\n setOriginalDimensions(dimensions) {\n const resize = this.getComponent(components.RESIZE);\n resize.setOriginalDimensions(dimensions);\n }\n\n /**\n * Resize Image\n * @param {Object} dimensions - Resize dimensions\n * @returns {Promise}\n */\n resize(dimensions) {\n const resize = this.getComponent(components.RESIZE);\n\n return resize.resize(dimensions);\n }\n}\n\nCustomEvents.mixin(Graphics);\n\nexport default Graphics;\n","/*\n imagetracer.js version 1.2.4\n Simple raster image tracer and vectorizer written in JavaScript.\n andras@jankovics.net\n*/\n\n/*\n The Unlicense / PUBLIC DOMAIN\n This is free and unencumbered software released into the public domain.\n Anyone is free to copy, modify, publish, use, compile, sell, or\n distribute this software, either in source code form or as a compiled\n binary, for any purpose, commercial or non-commercial, and by any\n means.\n In jurisdictions that recognize copyright laws, the author or authors\n of this software dedicate any and all copyright interest in the\n software to the public domain. We make this dedication for the benefit\n of the public at large and to the detriment of our heirs and\n successors. We intend this dedication to be an overt act of\n relinquishment in perpetuity of all present and future rights to this\n software under copyright law.\n THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\n MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.\n IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR\n OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,\n ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n OTHER DEALINGS IN THE SOFTWARE.\n For more information, please refer to http://unlicense.org/\n*/\nexport default class ImageTracer {\n static tracerDefaultOption() {\n return {\n pathomit: 100,\n ltres: 0.1,\n qtres: 1,\n\n scale: 1,\n strokewidth: 5,\n viewbox: false,\n linefilter: true,\n desc: false,\n rightangleenhance: false,\n pal: [\n {\n r: 0,\n g: 0,\n b: 0,\n a: 255,\n },\n {\n r: 255,\n g: 255,\n b: 255,\n a: 255,\n },\n ],\n };\n }\n /* eslint-disable */\n constructor() {\n this.versionnumber = '1.2.4';\n this.optionpresets = {\n default: {\n corsenabled: false,\n ltres: 1,\n qtres: 1,\n pathomit: 8,\n rightangleenhance: true,\n colorsampling: 2,\n numberofcolors: 16,\n mincolorratio: 0,\n colorquantcycles: 3,\n layering: 0,\n strokewidth: 1,\n linefilter: false,\n scale: 1,\n roundcoords: 1,\n viewbox: false,\n desc: false,\n lcpr: 0,\n qcpr: 0,\n blurradius: 0,\n blurdelta: 20,\n },\n posterized1: {\n colorsampling: 0,\n numberofcolors: 2,\n },\n posterized2: {\n numberofcolors: 4,\n blurradius: 5,\n },\n curvy: {\n ltres: 0.01,\n linefilter: true,\n rightangleenhance: false,\n },\n sharp: { qtres: 0.01, linefilter: false },\n detailed: { pathomit: 0, roundcoords: 2, ltres: 0.5, qtres: 0.5, numberofcolors: 64 },\n smoothed: { blurradius: 5, blurdelta: 64 },\n grayscale: { colorsampling: 0, colorquantcycles: 1, numberofcolors: 7 },\n fixedpalette: { colorsampling: 0, colorquantcycles: 1, numberofcolors: 27 },\n randomsampling1: { colorsampling: 1, numberofcolors: 8 },\n randomsampling2: { colorsampling: 1, numberofcolors: 64 },\n artistic1: {\n colorsampling: 0,\n colorquantcycles: 1,\n pathomit: 0,\n blurradius: 5,\n blurdelta: 64,\n ltres: 0.01,\n linefilter: true,\n numberofcolors: 16,\n strokewidth: 2,\n },\n artistic2: {\n qtres: 0.01,\n colorsampling: 0,\n colorquantcycles: 1,\n numberofcolors: 4,\n strokewidth: 0,\n },\n artistic3: { qtres: 10, ltres: 10, numberofcolors: 8 },\n artistic4: {\n qtres: 10,\n ltres: 10,\n numberofcolors: 64,\n blurradius: 5,\n blurdelta: 256,\n strokewidth: 2,\n },\n posterized3: {\n ltres: 1,\n qtres: 1,\n pathomit: 20,\n rightangleenhance: true,\n colorsampling: 0,\n numberofcolors: 3,\n mincolorratio: 0,\n colorquantcycles: 3,\n blurradius: 3,\n blurdelta: 20,\n strokewidth: 0,\n linefilter: false,\n roundcoords: 1,\n pal: [\n { r: 0, g: 0, b: 100, a: 255 },\n { r: 255, g: 255, b: 255, a: 255 },\n ],\n },\n };\n\n this.pathscan_combined_lookup = [\n [\n [-1, -1, -1, -1],\n [-1, -1, -1, -1],\n [-1, -1, -1, -1],\n [-1, -1, -1, -1],\n ],\n [\n [0, 1, 0, -1],\n [-1, -1, -1, -1],\n [-1, -1, -1, -1],\n [0, 2, -1, 0],\n ],\n [\n [-1, -1, -1, -1],\n [-1, -1, -1, -1],\n [0, 1, 0, -1],\n [0, 0, 1, 0],\n ],\n [\n [0, 0, 1, 0],\n [-1, -1, -1, -1],\n [0, 2, -1, 0],\n [-1, -1, -1, -1],\n ],\n [\n [-1, -1, -1, -1],\n [0, 0, 1, 0],\n [0, 3, 0, 1],\n [-1, -1, -1, -1],\n ],\n [\n [13, 3, 0, 1],\n [13, 2, -1, 0],\n [7, 1, 0, -1],\n [7, 0, 1, 0],\n ],\n [\n [-1, -1, -1, -1],\n [0, 1, 0, -1],\n [-1, -1, -1, -1],\n [0, 3, 0, 1],\n ],\n [\n [0, 3, 0, 1],\n [0, 2, -1, 0],\n [-1, -1, -1, -1],\n [-1, -1, -1, -1],\n ],\n [\n [0, 3, 0, 1],\n [0, 2, -1, 0],\n [-1, -1, -1, -1],\n [-1, -1, -1, -1],\n ],\n [\n [-1, -1, -1, -1],\n [0, 1, 0, -1],\n [-1, -1, -1, -1],\n [0, 3, 0, 1],\n ],\n [\n [11, 1, 0, -1],\n [14, 0, 1, 0],\n [14, 3, 0, 1],\n [11, 2, -1, 0],\n ],\n [\n [-1, -1, -1, -1],\n [0, 0, 1, 0],\n [0, 3, 0, 1],\n [-1, -1, -1, -1],\n ],\n [\n [0, 0, 1, 0],\n [-1, -1, -1, -1],\n [0, 2, -1, 0],\n [-1, -1, -1, -1],\n ],\n [\n [-1, -1, -1, -1],\n [-1, -1, -1, -1],\n [0, 1, 0, -1],\n [0, 0, 1, 0],\n ],\n [\n [0, 1, 0, -1],\n [-1, -1, -1, -1],\n [-1, -1, -1, -1],\n [0, 2, -1, 0],\n ],\n [\n [-1, -1, -1, -1],\n [-1, -1, -1, -1],\n [-1, -1, -1, -1],\n [-1, -1, -1, -1],\n ],\n ];\n\n this.gks = [\n [0.27901, 0.44198, 0.27901],\n [0.135336, 0.228569, 0.272192, 0.228569, 0.135336],\n [0.086776, 0.136394, 0.178908, 0.195843, 0.178908, 0.136394, 0.086776],\n [0.063327, 0.093095, 0.122589, 0.144599, 0.152781, 0.144599, 0.122589, 0.093095, 0.063327],\n [\n 0.049692,\n 0.069304,\n 0.089767,\n 0.107988,\n 0.120651,\n 0.125194,\n 0.120651,\n 0.107988,\n 0.089767,\n 0.069304,\n 0.049692,\n ],\n ];\n\n this.specpalette = [\n { r: 0, g: 0, b: 0, a: 255 },\n { r: 128, g: 128, b: 128, a: 255 },\n { r: 0, g: 0, b: 128, a: 255 },\n { r: 64, g: 64, b: 128, a: 255 },\n { r: 192, g: 192, b: 192, a: 255 },\n { r: 255, g: 255, b: 255, a: 255 },\n { r: 128, g: 128, b: 192, a: 255 },\n { r: 0, g: 0, b: 192, a: 255 },\n { r: 128, g: 0, b: 0, a: 255 },\n { r: 128, g: 64, b: 64, a: 255 },\n { r: 128, g: 0, b: 128, a: 255 },\n { r: 168, g: 168, b: 168, a: 255 },\n { r: 192, g: 128, b: 128, a: 255 },\n { r: 192, g: 0, b: 0, a: 255 },\n { r: 255, g: 255, b: 255, a: 255 },\n { r: 0, g: 128, b: 0, a: 255 },\n ];\n }\n\n imageToSVG(url, callback, options) {\n options = this.checkoptions(options);\n this.loadImage(\n url,\n (canvas) => {\n callback(this.imagedataToSVG(this.getImgdata(canvas), options));\n },\n options\n );\n }\n\n imagedataToSVG(imgd, options) {\n options = this.checkoptions(options);\n const td = this.imagedataToTracedata(imgd, options);\n\n return this.getsvgstring(td, options);\n }\n\n imageToTracedata(url, callback, options) {\n options = this.checkoptions(options);\n this.loadImage(\n url,\n (canvas) => {\n callback(this.imagedataToTracedata(this.getImgdata(canvas), options));\n },\n options\n );\n }\n\n imagedataToTracedata(imgd, options) {\n options = this.checkoptions(options);\n const ii = this.colorquantization(imgd, options);\n let tracedata;\n if (options.layering === 0) {\n tracedata = {\n layers: [],\n palette: ii.palette,\n width: ii.array[0].length - 2,\n height: ii.array.length - 2,\n };\n\n for (let colornum = 0; colornum < ii.palette.length; colornum += 1) {\n const tracedlayer = this.batchtracepaths(\n this.internodes(\n this.pathscan(this.layeringstep(ii, colornum), options.pathomit),\n options\n ),\n options.ltres,\n options.qtres\n );\n tracedata.layers.push(tracedlayer);\n }\n } else {\n const ls = this.layering(ii);\n if (options.layercontainerid) {\n this.drawLayers(ls, this.specpalette, options.scale, options.layercontainerid);\n }\n const bps = this.batchpathscan(ls, options.pathomit);\n const bis = this.batchinternodes(bps, options);\n tracedata = {\n layers: this.batchtracelayers(bis, options.ltres, options.qtres),\n palette: ii.palette,\n width: imgd.width,\n height: imgd.height,\n };\n }\n\n return tracedata;\n }\n\n checkoptions(options) {\n options = options || {};\n if (typeof options === 'string') {\n options = options.toLowerCase();\n if (this.optionpresets[options]) {\n options = this.optionpresets[options];\n } else {\n options = {};\n }\n }\n const ok = Object.keys(this.optionpresets['default']);\n for (let k = 0; k < ok.length; k += 1) {\n if (!options.hasOwnProperty(ok[k])) {\n options[ok[k]] = this.optionpresets['default'][ok[k]];\n }\n }\n\n return options;\n }\n\n colorquantization(imgd, options) {\n const arr = [];\n let idx = 0;\n let cd;\n let cdl;\n let ci;\n const paletteacc = [];\n const pixelnum = imgd.width * imgd.height;\n let i;\n let j;\n let k;\n let cnt;\n let palette;\n\n for (j = 0; j < imgd.height + 2; j += 1) {\n arr[j] = [];\n for (i = 0; i < imgd.width + 2; i += 1) {\n arr[j][i] = -1;\n }\n }\n if (options.pal) {\n palette = options.pal;\n } else if (options.colorsampling === 0) {\n palette = this.generatepalette(options.numberofcolors);\n } else if (options.colorsampling === 1) {\n palette = this.samplepalette(options.numberofcolors, imgd);\n } else {\n palette = this.samplepalette2(options.numberofcolors, imgd);\n }\n if (options.blurradius > 0) {\n imgd = this.blur(imgd, options.blurradius, options.blurdelta);\n }\n for (cnt = 0; cnt < options.colorquantcycles; cnt += 1) {\n if (cnt > 0) {\n for (k = 0; k < palette.length; k += 1) {\n if (paletteacc[k].n > 0) {\n palette[k] = {\n r: Math.floor(paletteacc[k].r / paletteacc[k].n),\n g: Math.floor(paletteacc[k].g / paletteacc[k].n),\n b: Math.floor(paletteacc[k].b / paletteacc[k].n),\n a: Math.floor(paletteacc[k].a / paletteacc[k].n),\n };\n }\n\n if (\n paletteacc[k].n / pixelnum < options.mincolorratio &&\n cnt < options.colorquantcycles - 1\n ) {\n palette[k] = {\n r: Math.floor(Math.random() * 255),\n g: Math.floor(Math.random() * 255),\n b: Math.floor(Math.random() * 255),\n a: Math.floor(Math.random() * 255),\n };\n }\n }\n }\n\n for (i = 0; i < palette.length; i += 1) {\n paletteacc[i] = { r: 0, g: 0, b: 0, a: 0, n: 0 };\n }\n\n for (j = 0; j < imgd.height; j += 1) {\n for (i = 0; i < imgd.width; i += 1) {\n idx = (j * imgd.width + i) * 4;\n\n ci = 0;\n cdl = 1024;\n for (k = 0; k < palette.length; k += 1) {\n cd =\n Math.abs(palette[k].r - imgd.data[idx]) +\n Math.abs(palette[k].g - imgd.data[idx + 1]) +\n Math.abs(palette[k].b - imgd.data[idx + 2]) +\n Math.abs(palette[k].a - imgd.data[idx + 3]);\n\n if (cd < cdl) {\n cdl = cd;\n ci = k;\n }\n }\n\n paletteacc[ci].r += imgd.data[idx];\n paletteacc[ci].g += imgd.data[idx + 1];\n paletteacc[ci].b += imgd.data[idx + 2];\n paletteacc[ci].a += imgd.data[idx + 3];\n paletteacc[ci].n += 1;\n\n arr[j + 1][i + 1] = ci;\n }\n }\n }\n\n return { array: arr, palette };\n }\n\n samplepalette(numberofcolors, imgd) {\n let idx;\n const palette = [];\n for (let i = 0; i < numberofcolors; i += 1) {\n idx = Math.floor((Math.random() * imgd.data.length) / 4) * 4;\n palette.push({\n r: imgd.data[idx],\n g: imgd.data[idx + 1],\n b: imgd.data[idx + 2],\n a: imgd.data[idx + 3],\n });\n }\n\n return palette;\n }\n\n samplepalette2(numberofcolors, imgd) {\n let idx;\n const palette = [];\n const ni = Math.ceil(Math.sqrt(numberofcolors));\n const nj = Math.ceil(numberofcolors / ni);\n const vx = imgd.width / (ni + 1);\n const vy = imgd.height / (nj + 1);\n for (let j = 0; j < nj; j += 1) {\n for (let i = 0; i < ni; i += 1) {\n if (palette.length === numberofcolors) {\n break;\n } else {\n idx = Math.floor((j + 1) * vy * imgd.width + (i + 1) * vx) * 4;\n palette.push({\n r: imgd.data[idx],\n g: imgd.data[idx + 1],\n b: imgd.data[idx + 2],\n a: imgd.data[idx + 3],\n });\n }\n }\n }\n\n return palette;\n }\n\n generatepalette(numberofcolors) {\n const palette = [];\n let rcnt;\n let gcnt;\n let bcnt;\n if (numberofcolors < 8) {\n const graystep = Math.floor(255 / (numberofcolors - 1));\n for (let i = 0; i < numberofcolors; i += 1) {\n palette.push({ r: i * graystep, g: i * graystep, b: i * graystep, a: 255 });\n }\n } else {\n const colorqnum = Math.floor(Math.pow(numberofcolors, 1 / 3));\n const colorstep = Math.floor(255 / (colorqnum - 1));\n const rndnum = numberofcolors - colorqnum * colorqnum * colorqnum;\n for (rcnt = 0; rcnt < colorqnum; rcnt += 1) {\n for (gcnt = 0; gcnt < colorqnum; gcnt += 1) {\n for (bcnt = 0; bcnt < colorqnum; bcnt += 1) {\n palette.push({ r: rcnt * colorstep, g: gcnt * colorstep, b: bcnt * colorstep, a: 255 });\n }\n }\n }\n for (rcnt = 0; rcnt < rndnum; rcnt += 1) {\n palette.push({\n r: Math.floor(Math.random() * 255),\n g: Math.floor(Math.random() * 255),\n b: Math.floor(Math.random() * 255),\n a: Math.floor(Math.random() * 255),\n });\n }\n }\n\n return palette;\n }\n\n layering(ii) {\n const layers = [];\n let val = 0;\n const ah = ii.array.length;\n const aw = ii.array[0].length;\n let n1;\n let n2;\n let n3;\n let n4;\n let n5;\n let n6;\n let n7;\n let n8;\n let i;\n let j;\n let k;\n for (k = 0; k < ii.palette.length; k += 1) {\n layers[k] = [];\n for (j = 0; j < ah; j += 1) {\n layers[k][j] = [];\n for (i = 0; i < aw; i += 1) {\n layers[k][j][i] = 0;\n }\n }\n }\n for (j = 1; j < ah - 1; j += 1) {\n for (i = 1; i < aw - 1; i += 1) {\n val = ii.array[j][i];\n\n n1 = ii.array[j - 1][i - 1] === val ? 1 : 0;\n n2 = ii.array[j - 1][i] === val ? 1 : 0;\n n3 = ii.array[j - 1][i + 1] === val ? 1 : 0;\n n4 = ii.array[j][i - 1] === val ? 1 : 0;\n n5 = ii.array[j][i + 1] === val ? 1 : 0;\n n6 = ii.array[j + 1][i - 1] === val ? 1 : 0;\n n7 = ii.array[j + 1][i] === val ? 1 : 0;\n n8 = ii.array[j + 1][i + 1] === val ? 1 : 0;\n\n layers[val][j + 1][i + 1] = 1 + n5 * 2 + n8 * 4 + n7 * 8;\n if (!n4) {\n layers[val][j + 1][i] = 0 + 2 + n7 * 4 + n6 * 8;\n }\n if (!n2) {\n layers[val][j][i + 1] = 0 + n3 * 2 + n5 * 4 + 8;\n }\n if (!n1) {\n layers[val][j][i] = 0 + n2 * 2 + 4 + n4 * 8;\n }\n }\n }\n\n return layers;\n }\n\n layeringstep(ii, cnum) {\n const layer = [];\n const ah = ii.array.length;\n const aw = ii.array[0].length;\n let i;\n let j;\n for (j = 0; j < ah; j += 1) {\n layer[j] = [];\n for (i = 0; i < aw; i += 1) {\n layer[j][i] = 0;\n }\n }\n for (j = 1; j < ah; j += 1) {\n for (i = 1; i < aw; i += 1) {\n layer[j][i] =\n (ii.array[j - 1][i - 1] === cnum ? 1 : 0) +\n (ii.array[j - 1][i] === cnum ? 2 : 0) +\n (ii.array[j][i - 1] === cnum ? 8 : 0) +\n (ii.array[j][i] === cnum ? 4 : 0);\n }\n }\n\n return layer;\n }\n\n pathscan(arr, pathomit) {\n const paths = [];\n let pacnt = 0;\n let pcnt = 0;\n let px = 0;\n let py = 0;\n const w = arr[0].length;\n const h = arr.length;\n let dir = 0;\n let pathfinished = true;\n let holepath = false;\n let lookuprow;\n for (let j = 0; j < h; j += 1) {\n for (let i = 0; i < w; i += 1) {\n if (arr[j][i] === 4 || arr[j][i] === 11) {\n px = i;\n py = j;\n paths[pacnt] = {};\n paths[pacnt].points = [];\n paths[pacnt].boundingbox = [px, py, px, py];\n paths[pacnt].holechildren = [];\n pathfinished = false;\n pcnt = 0;\n holepath = arr[j][i] === 11;\n dir = 1;\n\n while (!pathfinished) {\n paths[pacnt].points[pcnt] = {};\n paths[pacnt].points[pcnt].x = px - 1;\n paths[pacnt].points[pcnt].y = py - 1;\n paths[pacnt].points[pcnt].t = arr[py][px];\n\n if (px - 1 < paths[pacnt].boundingbox[0]) {\n paths[pacnt].boundingbox[0] = px - 1;\n }\n if (px - 1 > paths[pacnt].boundingbox[2]) {\n paths[pacnt].boundingbox[2] = px - 1;\n }\n if (py - 1 < paths[pacnt].boundingbox[1]) {\n paths[pacnt].boundingbox[1] = py - 1;\n }\n if (py - 1 > paths[pacnt].boundingbox[3]) {\n paths[pacnt].boundingbox[3] = py - 1;\n }\n\n lookuprow = this.pathscan_combined_lookup[arr[py][px]][dir];\n arr[py][px] = lookuprow[0];\n dir = lookuprow[1];\n px += lookuprow[2];\n py += lookuprow[3];\n\n if (px - 1 === paths[pacnt].points[0].x && py - 1 === paths[pacnt].points[0].y) {\n pathfinished = true;\n\n if (paths[pacnt].points.length < pathomit) {\n paths.pop();\n } else {\n paths[pacnt].isholepath = !!holepath;\n\n if (holepath) {\n let parentidx = 0,\n parentbbox = [-1, -1, w + 1, h + 1];\n for (let parentcnt = 0; parentcnt < pacnt; parentcnt++) {\n if (\n !paths[parentcnt].isholepath &&\n this.boundingboxincludes(\n paths[parentcnt].boundingbox,\n paths[pacnt].boundingbox\n ) &&\n this.boundingboxincludes(parentbbox, paths[parentcnt].boundingbox)\n ) {\n parentidx = parentcnt;\n parentbbox = paths[parentcnt].boundingbox;\n }\n }\n paths[parentidx].holechildren.push(pacnt);\n }\n pacnt += 1;\n }\n }\n pcnt += 1;\n }\n }\n }\n }\n\n return paths;\n }\n\n boundingboxincludes(parentbbox, childbbox) {\n return (\n parentbbox[0] < childbbox[0] &&\n parentbbox[1] < childbbox[1] &&\n parentbbox[2] > childbbox[2] &&\n parentbbox[3] > childbbox[3]\n );\n }\n\n batchpathscan(layers, pathomit) {\n const bpaths = [];\n for (const k in layers) {\n if (!layers.hasOwnProperty(k)) {\n continue;\n }\n bpaths[k] = this.pathscan(layers[k], pathomit);\n }\n\n return bpaths;\n }\n\n internodes(paths, options) {\n const ins = [];\n let palen = 0;\n let nextidx = 0;\n let nextidx2 = 0;\n let previdx = 0;\n let previdx2 = 0;\n let pacnt;\n let pcnt;\n for (pacnt = 0; pacnt < paths.length; pacnt += 1) {\n ins[pacnt] = {};\n ins[pacnt].points = [];\n ins[pacnt].boundingbox = paths[pacnt].boundingbox;\n ins[pacnt].holechildren = paths[pacnt].holechildren;\n ins[pacnt].isholepath = paths[pacnt].isholepath;\n palen = paths[pacnt].points.length;\n\n for (pcnt = 0; pcnt < palen; pcnt += 1) {\n nextidx = (pcnt + 1) % palen;\n nextidx2 = (pcnt + 2) % palen;\n previdx = (pcnt - 1 + palen) % palen;\n previdx2 = (pcnt - 2 + palen) % palen;\n\n if (\n options.rightangleenhance &&\n this.testrightangle(paths[pacnt], previdx2, previdx, pcnt, nextidx, nextidx2)\n ) {\n if (ins[pacnt].points.length > 0) {\n ins[pacnt].points[ins[pacnt].points.length - 1].linesegment = this.getdirection(\n ins[pacnt].points[ins[pacnt].points.length - 1].x,\n ins[pacnt].points[ins[pacnt].points.length - 1].y,\n paths[pacnt].points[pcnt].x,\n paths[pacnt].points[pcnt].y\n );\n }\n\n ins[pacnt].points.push({\n x: paths[pacnt].points[pcnt].x,\n y: paths[pacnt].points[pcnt].y,\n linesegment: this.getdirection(\n paths[pacnt].points[pcnt].x,\n paths[pacnt].points[pcnt].y,\n (paths[pacnt].points[pcnt].x + paths[pacnt].points[nextidx].x) / 2,\n (paths[pacnt].points[pcnt].y + paths[pacnt].points[nextidx].y) / 2\n ),\n });\n }\n\n ins[pacnt].points.push({\n x: (paths[pacnt].points[pcnt].x + paths[pacnt].points[nextidx].x) / 2,\n y: (paths[pacnt].points[pcnt].y + paths[pacnt].points[nextidx].y) / 2,\n linesegment: this.getdirection(\n (paths[pacnt].points[pcnt].x + paths[pacnt].points[nextidx].x) / 2,\n (paths[pacnt].points[pcnt].y + paths[pacnt].points[nextidx].y) / 2,\n (paths[pacnt].points[nextidx].x + paths[pacnt].points[nextidx2].x) / 2,\n (paths[pacnt].points[nextidx].y + paths[pacnt].points[nextidx2].y) / 2\n ),\n });\n }\n }\n\n return ins;\n }\n\n testrightangle(path, idx1, idx2, idx3, idx4, idx5) {\n return (\n (path.points[idx3].x === path.points[idx1].x &&\n path.points[idx3].x === path.points[idx2].x &&\n path.points[idx3].y === path.points[idx4].y &&\n path.points[idx3].y === path.points[idx5].y) ||\n (path.points[idx3].y === path.points[idx1].y &&\n path.points[idx3].y === path.points[idx2].y &&\n path.points[idx3].x === path.points[idx4].x &&\n path.points[idx3].x === path.points[idx5].x)\n );\n }\n\n getdirection(x1, y1, x2, y2) {\n let val = 8;\n if (x1 < x2) {\n if (y1 < y2) {\n val = 1;\n } else if (y1 > y2) {\n val = 7;\n } else {\n val = 0;\n }\n } else if (x1 > x2) {\n if (y1 < y2) {\n val = 3;\n } else if (y1 > y2) {\n val = 5;\n } else {\n val = 4;\n }\n } else if (y1 < y2) {\n val = 2;\n } else if (y1 > y2) {\n val = 6;\n } else {\n val = 8;\n }\n\n return val;\n }\n\n batchinternodes(bpaths, options) {\n const binternodes = [];\n for (const k in bpaths) {\n if (!bpaths.hasOwnProperty(k)) {\n continue;\n }\n binternodes[k] = this.internodes(bpaths[k], options);\n }\n\n return binternodes;\n }\n\n tracepath(path, ltres, qtres) {\n let pcnt = 0;\n let segtype1;\n let segtype2;\n let seqend;\n const smp = {};\n smp.segments = [];\n smp.boundingbox = path.boundingbox;\n smp.holechildren = path.holechildren;\n smp.isholepath = path.isholepath;\n\n while (pcnt < path.points.length) {\n segtype1 = path.points[pcnt].linesegment;\n segtype2 = -1;\n seqend = pcnt + 1;\n while (\n (path.points[seqend].linesegment === segtype1 ||\n path.points[seqend].linesegment === segtype2 ||\n segtype2 === -1) &&\n seqend < path.points.length - 1\n ) {\n if (path.points[seqend].linesegment !== segtype1 && segtype2 === -1) {\n segtype2 = path.points[seqend].linesegment;\n }\n seqend += 1;\n }\n if (seqend === path.points.length - 1) {\n seqend = 0;\n }\n\n smp.segments = smp.segments.concat(this.fitseq(path, ltres, qtres, pcnt, seqend));\n\n if (seqend > 0) {\n pcnt = seqend;\n } else {\n pcnt = path.points.length;\n }\n }\n\n return smp;\n }\n\n fitseq(path, ltres, qtres, seqstart, seqend) {\n if (seqend > path.points.length || seqend < 0) {\n return [];\n }\n let errorpoint = seqstart,\n errorval = 0,\n curvepass = true,\n px,\n py,\n dist2;\n let tl = seqend - seqstart;\n if (tl < 0) {\n tl += path.points.length;\n }\n let vx = (path.points[seqend].x - path.points[seqstart].x) / tl,\n vy = (path.points[seqend].y - path.points[seqstart].y) / tl;\n let pcnt = (seqstart + 1) % path.points.length,\n pl;\n while (pcnt != seqend) {\n pl = pcnt - seqstart;\n if (pl < 0) {\n pl += path.points.length;\n }\n px = path.points[seqstart].x + vx * pl;\n py = path.points[seqstart].y + vy * pl;\n dist2 =\n (path.points[pcnt].x - px) * (path.points[pcnt].x - px) +\n (path.points[pcnt].y - py) * (path.points[pcnt].y - py);\n if (dist2 > ltres) {\n curvepass = false;\n }\n if (dist2 > errorval) {\n errorpoint = pcnt;\n errorval = dist2;\n }\n pcnt = (pcnt + 1) % path.points.length;\n }\n if (curvepass) {\n return [\n {\n type: 'L',\n x1: path.points[seqstart].x,\n y1: path.points[seqstart].y,\n x2: path.points[seqend].x,\n y2: path.points[seqend].y,\n },\n ];\n }\n const fitpoint = errorpoint;\n curvepass = true;\n errorval = 0;\n let t = (fitpoint - seqstart) / tl,\n t1 = (1 - t) * (1 - t),\n t2 = 2 * (1 - t) * t,\n t3 = t * t;\n let cpx =\n (t1 * path.points[seqstart].x + t3 * path.points[seqend].x - path.points[fitpoint].x) / -t2,\n cpy =\n (t1 * path.points[seqstart].y + t3 * path.points[seqend].y - path.points[fitpoint].y) / -t2;\n pcnt = seqstart + 1;\n while (pcnt != seqend) {\n t = (pcnt - seqstart) / tl;\n t1 = (1 - t) * (1 - t);\n t2 = 2 * (1 - t) * t;\n t3 = t * t;\n px = t1 * path.points[seqstart].x + t2 * cpx + t3 * path.points[seqend].x;\n py = t1 * path.points[seqstart].y + t2 * cpy + t3 * path.points[seqend].y;\n dist2 =\n (path.points[pcnt].x - px) * (path.points[pcnt].x - px) +\n (path.points[pcnt].y - py) * (path.points[pcnt].y - py);\n if (dist2 > qtres) {\n curvepass = false;\n }\n if (dist2 > errorval) {\n errorpoint = pcnt;\n errorval = dist2;\n }\n pcnt = (pcnt + 1) % path.points.length;\n }\n if (curvepass) {\n return [\n {\n type: 'Q',\n x1: path.points[seqstart].x,\n y1: path.points[seqstart].y,\n x2: cpx,\n y2: cpy,\n x3: path.points[seqend].x,\n y3: path.points[seqend].y,\n },\n ];\n }\n const splitpoint = fitpoint;\n\n return this.fitseq(path, ltres, qtres, seqstart, splitpoint).concat(\n this.fitseq(path, ltres, qtres, splitpoint, seqend)\n );\n }\n\n batchtracepaths(internodepaths, ltres, qtres) {\n const btracedpaths = [];\n for (const k in internodepaths) {\n if (!internodepaths.hasOwnProperty(k)) {\n continue;\n }\n btracedpaths.push(this.tracepath(internodepaths[k], ltres, qtres));\n }\n\n return btracedpaths;\n }\n\n batchtracelayers(binternodes, ltres, qtres) {\n const btbis = [];\n for (const k in binternodes) {\n if (!binternodes.hasOwnProperty(k)) {\n continue;\n }\n btbis[k] = this.batchtracepaths(binternodes[k], ltres, qtres);\n }\n\n return btbis;\n }\n\n roundtodec(val, places) {\n return Number(val.toFixed(places));\n }\n\n svgpathstring(tracedata, lnum, pathnum, options) {\n let layer = tracedata.layers[lnum],\n smp = layer[pathnum],\n str = '',\n pcnt;\n if (options.linefilter && smp.segments.length < 3) {\n return str;\n }\n str = `= 0; pcnt--) {\n str += `${hsmp.segments[pcnt].type} `;\n if (hsmp.segments[pcnt].hasOwnProperty('x3')) {\n str += `${hsmp.segments[pcnt].x2 * options.scale} ${\n hsmp.segments[pcnt].y2 * options.scale\n } `;\n }\n str += `${hsmp.segments[pcnt].x1 * options.scale} ${\n hsmp.segments[pcnt].y1 * options.scale\n } `;\n }\n } else {\n if (hsmp.segments[hsmp.segments.length - 1].hasOwnProperty('x3')) {\n str += `M ${this.roundtodec(\n hsmp.segments[hsmp.segments.length - 1].x3 * options.scale\n )} ${this.roundtodec(hsmp.segments[hsmp.segments.length - 1].y3 * options.scale)} `;\n } else {\n str += `M ${this.roundtodec(\n hsmp.segments[hsmp.segments.length - 1].x2 * options.scale\n )} ${this.roundtodec(hsmp.segments[hsmp.segments.length - 1].y2 * options.scale)} `;\n }\n for (pcnt = hsmp.segments.length - 1; pcnt >= 0; pcnt--) {\n str += `${hsmp.segments[pcnt].type} `;\n if (hsmp.segments[pcnt].hasOwnProperty('x3')) {\n str += `${this.roundtodec(hsmp.segments[pcnt].x2 * options.scale)} ${this.roundtodec(\n hsmp.segments[pcnt].y2 * options.scale\n )} `;\n }\n str += `${this.roundtodec(hsmp.segments[pcnt].x1 * options.scale)} ${this.roundtodec(\n hsmp.segments[pcnt].y1 * options.scale\n )} `;\n }\n }\n str += 'Z ';\n }\n str += '\" />';\n if (options.lcpr || options.qcpr) {\n for (pcnt = 0; pcnt < smp.segments.length; pcnt++) {\n if (smp.segments[pcnt].hasOwnProperty('x3') && options.qcpr) {\n str += ``;\n str += ``;\n str += ``;\n str += ``;\n }\n if (!smp.segments[pcnt].hasOwnProperty('x3') && options.lcpr) {\n str += ``;\n }\n }\n\n for (var hcnt = 0; hcnt < smp.holechildren.length; hcnt++) {\n var hsmp = layer[smp.holechildren[hcnt]];\n for (pcnt = 0; pcnt < hsmp.segments.length; pcnt++) {\n if (hsmp.segments[pcnt].hasOwnProperty('x3') && options.qcpr) {\n str += ``;\n str += ``;\n str += ``;\n str += ``;\n }\n if (!hsmp.segments[pcnt].hasOwnProperty('x3') && options.lcpr) {\n str += ``;\n }\n }\n }\n }\n\n return str;\n }\n\n getsvgstring(tracedata, options) {\n options = this.checkoptions(options);\n const w = tracedata.width * options.scale;\n const h = tracedata.height * options.scale;\n\n let svgstr = ``;\n for (let lcnt = 0; lcnt < tracedata.layers.length; lcnt += 1) {\n for (let pcnt = 0; pcnt < tracedata.layers[lcnt].length; pcnt += 1) {\n if (!tracedata.layers[lcnt][pcnt].isholepath) {\n svgstr += this.svgpathstring(tracedata, lcnt, pcnt, options);\n }\n }\n }\n svgstr += '';\n\n return svgstr;\n }\n\n compareNumbers(a, b) {\n return a - b;\n }\n\n torgbastr(c) {\n return `rgba(${c.r},${c.g},${c.b},${c.a})`;\n }\n\n tosvgcolorstr(c, options) {\n return `fill=\"rgb(${c.r},${c.g},${c.b})\" stroke=\"rgb(${c.r},${c.g},${c.b})\" stroke-width=\"${\n options.strokewidth\n }\" opacity=\"${c.a / 255.0}\" `;\n }\n\n appendSVGString(svgstr, parentid) {\n let div;\n if (parentid) {\n div = document.getElementById(parentid);\n if (!div) {\n div = document.createElement('div');\n div.id = parentid;\n document.body.appendChild(div);\n }\n } else {\n div = document.createElement('div');\n document.body.appendChild(div);\n }\n div.innerHTML += svgstr;\n }\n\n blur(imgd, radius, delta) {\n let i, j, k, d, idx, racc, gacc, bacc, aacc, wacc;\n const imgd2 = { width: imgd.width, height: imgd.height, data: [] };\n radius = Math.floor(radius);\n if (radius < 1) {\n return imgd;\n }\n if (radius > 5) {\n radius = 5;\n }\n delta = Math.abs(delta);\n if (delta > 1024) {\n delta = 1024;\n }\n const thisgk = this.gks[radius - 1];\n for (j = 0; j < imgd.height; j++) {\n for (i = 0; i < imgd.width; i++) {\n racc = 0;\n gacc = 0;\n bacc = 0;\n aacc = 0;\n wacc = 0;\n\n for (k = -radius; k < radius + 1; k++) {\n if (i + k > 0 && i + k < imgd.width) {\n idx = (j * imgd.width + i + k) * 4;\n racc += imgd.data[idx] * thisgk[k + radius];\n gacc += imgd.data[idx + 1] * thisgk[k + radius];\n bacc += imgd.data[idx + 2] * thisgk[k + radius];\n aacc += imgd.data[idx + 3] * thisgk[k + radius];\n wacc += thisgk[k + radius];\n }\n }\n\n idx = (j * imgd.width + i) * 4;\n imgd2.data[idx] = Math.floor(racc / wacc);\n imgd2.data[idx + 1] = Math.floor(gacc / wacc);\n imgd2.data[idx + 2] = Math.floor(bacc / wacc);\n imgd2.data[idx + 3] = Math.floor(aacc / wacc);\n }\n }\n const himgd = new Uint8ClampedArray(imgd2.data);\n for (j = 0; j < imgd.height; j++) {\n for (i = 0; i < imgd.width; i++) {\n racc = 0;\n gacc = 0;\n bacc = 0;\n aacc = 0;\n wacc = 0;\n\n for (k = -radius; k < radius + 1; k++) {\n if (j + k > 0 && j + k < imgd.height) {\n idx = ((j + k) * imgd.width + i) * 4;\n racc += himgd[idx] * thisgk[k + radius];\n gacc += himgd[idx + 1] * thisgk[k + radius];\n bacc += himgd[idx + 2] * thisgk[k + radius];\n aacc += himgd[idx + 3] * thisgk[k + radius];\n wacc += thisgk[k + radius];\n }\n }\n\n idx = (j * imgd.width + i) * 4;\n imgd2.data[idx] = Math.floor(racc / wacc);\n imgd2.data[idx + 1] = Math.floor(gacc / wacc);\n imgd2.data[idx + 2] = Math.floor(bacc / wacc);\n imgd2.data[idx + 3] = Math.floor(aacc / wacc);\n }\n }\n for (j = 0; j < imgd.height; j++) {\n for (i = 0; i < imgd.width; i++) {\n idx = (j * imgd.width + i) * 4;\n\n d =\n Math.abs(imgd2.data[idx] - imgd.data[idx]) +\n Math.abs(imgd2.data[idx + 1] - imgd.data[idx + 1]) +\n Math.abs(imgd2.data[idx + 2] - imgd.data[idx + 2]) +\n Math.abs(imgd2.data[idx + 3] - imgd.data[idx + 3]);\n\n if (d > delta) {\n imgd2.data[idx] = imgd.data[idx];\n imgd2.data[idx + 1] = imgd.data[idx + 1];\n imgd2.data[idx + 2] = imgd.data[idx + 2];\n imgd2.data[idx + 3] = imgd.data[idx + 3];\n }\n }\n }\n\n return imgd2;\n }\n\n loadImage(url, callback, options) {\n const img = new Image();\n if (options && options.corsenabled) {\n img.crossOrigin = 'Anonymous';\n }\n img.src = url;\n img.onload = function () {\n const canvas = document.createElement('canvas');\n canvas.width = img.width;\n canvas.height = img.height;\n const context = canvas.getContext('2d');\n context.drawImage(img, 0, 0);\n callback(canvas);\n };\n }\n\n getImgdata(canvas) {\n const context = canvas.getContext('2d');\n\n return context.getImageData(0, 0, canvas.width, canvas.height);\n }\n\n drawLayers(layers, palette, scale, parentid) {\n scale = scale || 1;\n let w, h, i, j, k;\n let div;\n if (parentid) {\n div = document.getElementById(parentid);\n if (!div) {\n div = document.createElement('div');\n div.id = parentid;\n document.body.appendChild(div);\n }\n } else {\n div = document.createElement('div');\n document.body.appendChild(div);\n }\n for (k in layers) {\n if (!layers.hasOwnProperty(k)) {\n continue;\n }\n\n w = layers[k][0].length;\n h = layers[k].length;\n\n const canvas = document.createElement('canvas');\n canvas.width = w * scale;\n canvas.height = h * scale;\n const context = canvas.getContext('2d');\n\n for (j = 0; j < h; j += 1) {\n for (i = 0; i < w; i += 1) {\n context.fillStyle = this.torgbastr(palette[layers[k][j][i] % palette.length]);\n context.fillRect(i * scale, j * scale, scale, scale);\n }\n }\n\n div.appendChild(canvas);\n }\n }\n}\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Selection modification helper\n */\n\nimport { extend } from 'tui-code-snippet';\nimport fabric from 'fabric';\n\n/**\n * Cached selection's info\n * @type {Array}\n * @private\n */\nlet cachedUndoDataForChangeDimension = null;\n\n/**\n * Set cached undo data\n * @param {Array} undoData - selection object\n * @private\n */\nexport function setCachedUndoDataForDimension(undoData) {\n cachedUndoDataForChangeDimension = undoData;\n}\n\n/**\n * Get cached undo data\n * @returns {Object} cached undo data\n * @private\n */\nexport function getCachedUndoDataForDimension() {\n return cachedUndoDataForChangeDimension;\n}\n\n/**\n * Make undo data\n * @param {fabric.Object} obj - selection object\n * @param {Function} undoDatumMaker - make undo datum\n * @returns {Array} undoData\n * @private\n */\nexport function makeSelectionUndoData(obj, undoDatumMaker) {\n let undoData;\n\n if (obj.type === 'activeSelection') {\n undoData = obj.getObjects().map((item) => {\n const { angle, left, top, scaleX, scaleY, width, height } = item;\n\n fabric.util.addTransformToObject(item, obj.calcTransformMatrix());\n const result = undoDatumMaker(item);\n\n item.set({\n angle,\n left,\n top,\n width,\n height,\n scaleX,\n scaleY,\n });\n\n return result;\n });\n } else {\n undoData = [undoDatumMaker(obj)];\n }\n\n return undoData;\n}\n\n/**\n * Make undo datum\n * @param {number} id - object id\n * @param {fabric.Object} obj - selection object\n * @param {boolean} isSelection - whether or not object is selection\n * @returns {Object} undo datum\n * @private\n */\nexport function makeSelectionUndoDatum(id, obj, isSelection) {\n return isSelection\n ? {\n id,\n width: obj.width,\n height: obj.height,\n top: obj.top,\n left: obj.left,\n angle: obj.angle,\n scaleX: obj.scaleX,\n scaleY: obj.scaleY,\n }\n : extend({ id }, obj);\n}\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Shape resize helper\n */\nimport { forEach, map, extend } from 'tui-code-snippet';\nimport resizeHelper from '@/helper/shapeResizeHelper';\nimport { capitalizeString, flipObject, setCustomProperty, getCustomProperty } from '@/util';\n\nconst FILTER_OPTION_MAP = {\n pixelate: 'blocksize',\n blur: 'blur',\n};\nconst POSITION_DIMENSION_MAP = {\n x: 'width',\n y: 'height',\n};\n\nconst FILTER_NAME_VALUE_MAP = flipObject(FILTER_OPTION_MAP);\n\n/**\n * Cached canvas image element for fill image\n * @type {boolean}\n * @private\n */\nlet cachedCanvasImageElement = null;\n\n/**\n * Get background image of fill\n * @param {fabric.Object} shapeObj - Shape object\n * @returns {fabric.Image}\n * @private\n */\nexport function getFillImageFromShape(shapeObj) {\n const { patternSourceCanvas } = getCustomProperty(shapeObj, 'patternSourceCanvas');\n const [fillImage] = patternSourceCanvas.getObjects();\n\n return fillImage;\n}\n\n/**\n * Reset the image position in the filter type fill area.\n * @param {fabric.Object} shapeObj - Shape object\n * @private\n */\nexport function rePositionFilterTypeFillImage(shapeObj) {\n const { angle, flipX, flipY } = shapeObj;\n const fillImage = getFillImageFromShape(shapeObj);\n const rotatedShapeCornerDimension = getRotatedDimension(shapeObj);\n const { right, bottom } = rotatedShapeCornerDimension;\n let { width, height } = rotatedShapeCornerDimension;\n const diffLeft = (width - shapeObj.width) / 2;\n const diffTop = (height - shapeObj.height) / 2;\n const cropX = shapeObj.left - shapeObj.width / 2 - diffLeft;\n const cropY = shapeObj.top - shapeObj.height / 2 - diffTop;\n let left = width / 2 - diffLeft;\n let top = height / 2 - diffTop;\n const fillImageMaxSize = Math.max(width, height) + Math.max(diffLeft, diffTop);\n\n [left, top, width, height] = calculateFillImageDimensionOutsideCanvas({\n shapeObj,\n left,\n top,\n width,\n height,\n cropX,\n cropY,\n flipX,\n flipY,\n right,\n bottom,\n });\n\n fillImage.set({\n angle: flipX === flipY ? -angle : angle,\n left,\n top,\n width,\n height,\n cropX,\n cropY,\n flipX,\n flipY,\n });\n\n setCustomProperty(fillImage, { fillImageMaxSize });\n}\n\n/**\n * Make filter option from fabric image\n * @param {fabric.Image} imageObject - fabric image object\n * @returns {object}\n */\nexport function makeFilterOptionFromFabricImage(imageObject) {\n return map(imageObject.filters, (filter) => {\n const [key] = Object.keys(filter);\n\n return {\n [FILTER_NAME_VALUE_MAP[key]]: filter[key],\n };\n });\n}\n\n/**\n * Calculate fill image position and size for out of Canvas\n * @param {Object} options - options for position dimension calculate\n * @param {fabric.Object} shapeObj - shape object\n * @param {number} left - original left position\n * @param {number} top - original top position\n * @param {number} width - image width\n * @param {number} height - image height\n * @param {number} cropX - image cropX\n * @param {number} cropY - image cropY\n * @param {boolean} flipX - shape flipX\n * @param {boolean} flipY - shape flipY\n * @returns {Object}\n */\nfunction calculateFillImageDimensionOutsideCanvas({\n shapeObj,\n left,\n top,\n width,\n height,\n cropX,\n cropY,\n flipX,\n flipY,\n right,\n bottom,\n}) {\n const overflowAreaPositionFixer = (type, outDistance, imageLeft, imageTop) =>\n calculateDistanceOverflowPart({\n type,\n outDistance,\n shapeObj,\n flipX,\n flipY,\n left: imageLeft,\n top: imageTop,\n });\n const [originalWidth, originalHeight] = [width, height];\n\n [left, top, width, height] = calculateDimensionLeftTopEdge(overflowAreaPositionFixer, {\n left,\n top,\n width,\n height,\n cropX,\n cropY,\n });\n\n [left, top, width, height] = calculateDimensionRightBottomEdge(overflowAreaPositionFixer, {\n left,\n top,\n insideCanvasRealImageWidth: width,\n insideCanvasRealImageHeight: height,\n right,\n bottom,\n cropX,\n cropY,\n originalWidth,\n originalHeight,\n });\n\n return [left, top, width, height];\n}\n\n/**\n * Calculate fill image position and size for for right bottom edge\n * @param {Function} overflowAreaPositionFixer - position fixer\n * @param {Object} options - options for position dimension calculate\n * @param {fabric.Object} shapeObj - shape object\n * @param {number} left - original left position\n * @param {number} top - original top position\n * @param {number} width - image width\n * @param {number} height - image height\n * @param {number} right - image right\n * @param {number} bottom - image bottom\n * @param {number} cropX - image cropX\n * @param {number} cropY - image cropY\n * @param {boolean} originalWidth - image original width\n * @param {boolean} originalHeight - image original height\n * @returns {Object}\n */\nfunction calculateDimensionRightBottomEdge(\n overflowAreaPositionFixer,\n {\n left,\n top,\n insideCanvasRealImageWidth,\n insideCanvasRealImageHeight,\n right,\n bottom,\n cropX,\n cropY,\n originalWidth,\n originalHeight,\n }\n) {\n let [width, height] = [insideCanvasRealImageWidth, insideCanvasRealImageHeight];\n const { width: canvasWidth, height: canvasHeight } = cachedCanvasImageElement;\n\n if (right > canvasWidth && cropX > 0) {\n width = originalWidth - Math.abs(right - canvasWidth);\n }\n if (bottom > canvasHeight && cropY > 0) {\n height = originalHeight - Math.abs(bottom - canvasHeight);\n }\n\n const diff = {\n x: (insideCanvasRealImageWidth - width) / 2,\n y: (insideCanvasRealImageHeight - height) / 2,\n };\n\n forEach(['x', 'y'], (type) => {\n const cropDistance2 = diff[type];\n if (cropDistance2 > 0) {\n [left, top] = overflowAreaPositionFixer(type, cropDistance2, left, top);\n }\n });\n\n return [left, top, width, height];\n}\n\n/**\n * Calculate fill image position and size for for left top\n * @param {Function} overflowAreaPositionFixer - position fixer\n * @param {Object} options - options for position dimension calculate\n * @param {fabric.Object} shapeObj - shape object\n * @param {number} left - original left position\n * @param {number} top - original top position\n * @param {number} width - image width\n * @param {number} height - image height\n * @param {number} cropX - image cropX\n * @param {number} cropY - image cropY\n * @returns {Object}\n */\nfunction calculateDimensionLeftTopEdge(\n overflowAreaPositionFixer,\n { left, top, width, height, cropX, cropY }\n) {\n const dimension = {\n width,\n height,\n };\n\n forEach(['x', 'y'], (type) => {\n const cropDistance = type === 'x' ? cropX : cropY;\n const compareSize = dimension[POSITION_DIMENSION_MAP[type]];\n const standardSize = cachedCanvasImageElement[POSITION_DIMENSION_MAP[type]];\n\n if (compareSize > standardSize) {\n const outDistance = (compareSize - standardSize) / 2;\n\n dimension[POSITION_DIMENSION_MAP[type]] = standardSize;\n [left, top] = overflowAreaPositionFixer(type, outDistance, left, top);\n }\n if (cropDistance < 0) {\n [left, top] = overflowAreaPositionFixer(type, cropDistance, left, top);\n }\n });\n\n return [left, top, dimension.width, dimension.height];\n}\n\n/**\n * Make fill property of dynamic pattern type\n * @param {fabric.Image} canvasImage - canvas background image\n * @param {Array} filterOption - filter option\n * @param {fabric.StaticCanvas} patternSourceCanvas - fabric static canvas\n * @returns {Object}\n */\nexport function makeFillPatternForFilter(canvasImage, filterOption, patternSourceCanvas) {\n const copiedCanvasElement = getCachedCanvasImageElement(canvasImage);\n const fillImage = makeFillImage(copiedCanvasElement, canvasImage.angle, filterOption);\n patternSourceCanvas.add(fillImage);\n\n const fabricProperty = {\n fill: new fabric.Pattern({\n source: patternSourceCanvas.getElement(),\n repeat: 'no-repeat',\n }),\n };\n\n setCustomProperty(fabricProperty, { patternSourceCanvas });\n\n return fabricProperty;\n}\n\n/**\n * Reset fill pattern canvas\n * @param {fabric.StaticCanvas} patternSourceCanvas - fabric static canvas\n */\nexport function resetFillPatternCanvas(patternSourceCanvas) {\n const [innerImage] = patternSourceCanvas.getObjects();\n let { fillImageMaxSize } = getCustomProperty(innerImage, 'fillImageMaxSize');\n fillImageMaxSize = Math.max(1, fillImageMaxSize);\n\n patternSourceCanvas.setDimensions({\n width: fillImageMaxSize,\n height: fillImageMaxSize,\n });\n patternSourceCanvas.renderAll();\n}\n\n/**\n * Remake filter pattern image source\n * @param {fabric.Object} shapeObj - Shape object\n * @param {fabric.Image} canvasImage - canvas background image\n */\nexport function reMakePatternImageSource(shapeObj, canvasImage) {\n const { patternSourceCanvas } = getCustomProperty(shapeObj, 'patternSourceCanvas');\n const [fillImage] = patternSourceCanvas.getObjects();\n const filterOption = makeFilterOptionFromFabricImage(fillImage);\n\n patternSourceCanvas.remove(fillImage);\n\n const copiedCanvasElement = getCachedCanvasImageElement(canvasImage, true);\n const newFillImage = makeFillImage(copiedCanvasElement, canvasImage.angle, filterOption);\n\n patternSourceCanvas.add(newFillImage);\n}\n\n/**\n * Calculate a point line outside the canvas.\n * @param {fabric.Image} canvasImage - canvas background image\n * @param {boolean} reset - default is false\n * @returns {HTMLImageElement}\n */\nexport function getCachedCanvasImageElement(canvasImage, reset = false) {\n if (!cachedCanvasImageElement || reset) {\n cachedCanvasImageElement = canvasImage.toCanvasElement();\n }\n\n return cachedCanvasImageElement;\n}\n\n/**\n * Calculate fill image position for out of Canvas\n * @param {string} type - 'x' or 'y'\n * @param {fabric.Object} shapeObj - shape object\n * @param {number} outDistance - distance away\n * @param {number} left - original left position\n * @param {number} top - original top position\n * @returns {Array}\n */\nfunction calculateDistanceOverflowPart({ type, shapeObj, outDistance, left, top, flipX, flipY }) {\n const shapePointNavigation = getShapeEdgePoint(shapeObj);\n const shapeNeighborPointNavigation = [\n [1, 2],\n [0, 3],\n [0, 3],\n [1, 2],\n ];\n const linePointsOutsideCanvas = calculateLinePointsOutsideCanvas(\n type,\n shapePointNavigation,\n shapeNeighborPointNavigation\n );\n const reatAngles = calculateLineAngleOfOutsideCanvas(\n type,\n shapePointNavigation,\n linePointsOutsideCanvas\n );\n const { startPointIndex } = linePointsOutsideCanvas;\n const diffPosition = getReversePositionForFlip({\n outDistance,\n startPointIndex,\n flipX,\n flipY,\n reatAngles,\n });\n\n return [left + diffPosition.left, top + diffPosition.top];\n}\n\n/**\n * Calculate fill image position for out of Canvas\n * @param {number} outDistance - distance away\n * @param {boolean} flipX - flip x statux\n * @param {boolean} flipY - flip y statux\n * @param {Array} reatAngles - Line angle of the rectangle vertex.\n * @returns {Object} diffPosition\n */\nfunction getReversePositionForFlip({ outDistance, startPointIndex, flipX, flipY, reatAngles }) {\n const rotationChangePoint1 = outDistance * Math.cos((reatAngles[0] * Math.PI) / 180);\n const rotationChangePoint2 = outDistance * Math.cos((reatAngles[1] * Math.PI) / 180);\n const isForward = startPointIndex === 2 || startPointIndex === 3;\n const diffPosition = {\n top: isForward ? rotationChangePoint1 : rotationChangePoint2,\n left: isForward ? rotationChangePoint2 : rotationChangePoint1,\n };\n\n if (isReverseLeftPositionForFlip(startPointIndex, flipX, flipY)) {\n diffPosition.left = diffPosition.left * -1;\n }\n if (isReverseTopPositionForFlip(startPointIndex, flipX, flipY)) {\n diffPosition.top = diffPosition.top * -1;\n }\n\n return diffPosition;\n}\n\n/**\n * Calculate a point line outside the canvas.\n * @param {string} type - 'x' or 'y'\n * @param {Array} shapePointNavigation - shape edge positions\n * @param {Object} shapePointNavigation.lefttop - left top position\n * @param {Object} shapePointNavigation.righttop - right top position\n * @param {Object} shapePointNavigation.leftbottom - lefttop position\n * @param {Object} shapePointNavigation.rightbottom - rightbottom position\n * @param {Array} shapeNeighborPointNavigation - Array to find adjacent edges.\n * @returns {Object}\n */\nfunction calculateLinePointsOutsideCanvas(\n type,\n shapePointNavigation,\n shapeNeighborPointNavigation\n) {\n let minimumPoint = 0;\n let minimumPointIndex = 0;\n forEach(shapePointNavigation, (point, index) => {\n if (point[type] < minimumPoint) {\n minimumPoint = point[type];\n minimumPointIndex = index;\n }\n });\n\n const [endPointIndex1, endPointIndex2] = shapeNeighborPointNavigation[minimumPointIndex];\n\n return {\n startPointIndex: minimumPointIndex,\n endPointIndex1,\n endPointIndex2,\n };\n}\n\n/**\n * Calculate a point line outside the canvas.\n * @param {string} type - 'x' or 'y'\n * @param {Array} shapePointNavigation - shape edge positions\n * @param {object} shapePointNavigation.lefttop - left top position\n * @param {object} shapePointNavigation.righttop - right top position\n * @param {object} shapePointNavigation.leftbottom - lefttop position\n * @param {object} shapePointNavigation.rightbottom - rightbottom position\n * @param {Object} linePointsOfOneVertexIndex - Line point of one vertex\n * @param {Object} linePointsOfOneVertexIndex.startPoint - start point index\n * @param {Object} linePointsOfOneVertexIndex.endPointIndex1 - end point index\n * @param {Object} linePointsOfOneVertexIndex.endPointIndex2 - end point index\n * @returns {Object}\n */\nfunction calculateLineAngleOfOutsideCanvas(type, shapePointNavigation, linePointsOfOneVertexIndex) {\n const { startPointIndex, endPointIndex1, endPointIndex2 } = linePointsOfOneVertexIndex;\n const horizontalVerticalAngle = type === 'x' ? 180 : 270;\n\n return map([endPointIndex1, endPointIndex2], (pointIndex) => {\n const startPoint = shapePointNavigation[startPointIndex];\n const endPoint = shapePointNavigation[pointIndex];\n const diffY = startPoint.y - endPoint.y;\n const diffX = startPoint.x - endPoint.x;\n\n return (Math.atan2(diffY, diffX) * 180) / Math.PI - horizontalVerticalAngle;\n });\n}\n\n/* eslint-disable complexity */\n/**\n * Calculate a point line outside the canvas for horizontal.\n * @param {number} startPointIndex - start point index\n * @param {boolean} flipX - flip x statux\n * @param {boolean} flipY - flip y statux\n * @returns {boolean} flipY - flip y statux\n */\nfunction isReverseLeftPositionForFlip(startPointIndex, flipX, flipY) {\n return (\n (((!flipX && flipY) || (!flipX && !flipY)) && startPointIndex === 0) ||\n (((flipX && flipY) || (flipX && !flipY)) && startPointIndex === 1) ||\n (((!flipX && !flipY) || (!flipX && flipY)) && startPointIndex === 2) ||\n (((flipX && !flipY) || (flipX && flipY)) && startPointIndex === 3)\n );\n}\n/* eslint-enable complexity */\n\n/* eslint-disable complexity */\n/**\n * Calculate a point line outside the canvas for vertical.\n * @param {number} startPointIndex - start point index\n * @param {boolean} flipX - flip x statux\n * @param {boolean} flipY - flip y statux\n * @returns {boolean} flipY - flip y statux\n */\nfunction isReverseTopPositionForFlip(startPointIndex, flipX, flipY) {\n return (\n (((flipX && !flipY) || (!flipX && !flipY)) && startPointIndex === 0) ||\n (((!flipX && !flipY) || (flipX && !flipY)) && startPointIndex === 1) ||\n (((flipX && flipY) || (!flipX && flipY)) && startPointIndex === 2) ||\n (((!flipX && flipY) || (flipX && flipY)) && startPointIndex === 3)\n );\n}\n/* eslint-enable complexity */\n\n/**\n * Shape edge points\n * @param {fabric.Object} shapeObj - Selected shape object on canvas\n * @returns {Array} shapeEdgePoint - shape edge positions\n */\nfunction getShapeEdgePoint(shapeObj) {\n return [\n shapeObj.getPointByOrigin('left', 'top'),\n shapeObj.getPointByOrigin('right', 'top'),\n shapeObj.getPointByOrigin('left', 'bottom'),\n shapeObj.getPointByOrigin('right', 'bottom'),\n ];\n}\n\n/**\n * Rotated shape dimension\n * @param {fabric.Object} shapeObj - Shape object\n * @returns {Object} Rotated shape dimension\n */\nfunction getRotatedDimension(shapeObj) {\n const [{ x: ax, y: ay }, { x: bx, y: by }, { x: cx, y: cy }, { x: dx, y: dy }] =\n getShapeEdgePoint(shapeObj);\n\n const left = Math.min(ax, bx, cx, dx);\n const top = Math.min(ay, by, cy, dy);\n const right = Math.max(ax, bx, cx, dx);\n const bottom = Math.max(ay, by, cy, dy);\n\n return {\n left,\n top,\n right,\n bottom,\n width: right - left,\n height: bottom - top,\n };\n}\n\n/**\n * Make fill image\n * @param {HTMLImageElement} copiedCanvasElement - html image element\n * @param {number} currentCanvasImageAngle - current canvas angle\n * @param {Array} filterOption - filter option\n * @returns {fabric.Image}\n * @private\n */\nfunction makeFillImage(copiedCanvasElement, currentCanvasImageAngle, filterOption) {\n const fillImage = new fabric.Image(copiedCanvasElement);\n\n forEach(extend({}, ...filterOption), (value, key) => {\n const fabricFilterClassName = capitalizeString(key);\n const filter = new fabric.Image.filters[fabricFilterClassName]({\n [FILTER_OPTION_MAP[key]]: value,\n });\n fillImage.filters.push(filter);\n });\n fillImage.applyFilters();\n\n setCustomProperty(fillImage, {\n originalAngle: currentCanvasImageAngle,\n fillImageMaxSize: Math.max(fillImage.width, fillImage.height),\n });\n resizeHelper.adjustOriginToCenter(fillImage);\n\n return fillImage;\n}\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Shape resize helper\n */\nconst DIVISOR = {\n rect: 1,\n circle: 2,\n triangle: 1,\n};\nconst DIMENSION_KEYS = {\n rect: {\n w: 'width',\n h: 'height',\n },\n circle: {\n w: 'rx',\n h: 'ry',\n },\n triangle: {\n w: 'width',\n h: 'height',\n },\n};\n\n/**\n * Set the start point value to the shape object\n * @param {fabric.Object} shape - Shape object\n * @ignore\n */\nfunction setStartPoint(shape) {\n const { originX, originY } = shape;\n const originKey = originX.substring(0, 1) + originY.substring(0, 1);\n\n shape.startPoint = shape.origins[originKey];\n}\n\n/**\n * Get the positions of ratated origin by the pointer value\n * @param {{x: number, y: number}} origin - Origin value\n * @param {{x: number, y: number}} pointer - Pointer value\n * @param {number} angle - Rotating angle\n * @returns {Object} Postions of origin\n * @ignore\n */\nfunction getPositionsOfRotatedOrigin(origin, pointer, angle) {\n const sx = origin.x;\n const sy = origin.y;\n const px = pointer.x;\n const py = pointer.y;\n const r = (angle * Math.PI) / 180;\n const rx = (px - sx) * Math.cos(r) - (py - sy) * Math.sin(r) + sx;\n const ry = (px - sx) * Math.sin(r) + (py - sy) * Math.cos(r) + sy;\n\n return {\n originX: sx > rx ? 'right' : 'left',\n originY: sy > ry ? 'bottom' : 'top',\n };\n}\n\n/**\n * Whether the shape has the center origin or not\n * @param {fabric.Object} shape - Shape object\n * @returns {boolean} State\n * @ignore\n */\nfunction hasCenterOrigin(shape) {\n return shape.originX === 'center' && shape.originY === 'center';\n}\n\n/**\n * Adjust the origin of shape by the start point\n * @param {{x: number, y: number}} pointer - Pointer value\n * @param {fabric.Object} shape - Shape object\n * @ignore\n */\nfunction adjustOriginByStartPoint(pointer, shape) {\n const centerPoint = shape.getPointByOrigin('center', 'center');\n const angle = -shape.angle;\n const originPositions = getPositionsOfRotatedOrigin(centerPoint, pointer, angle);\n const { originX, originY } = originPositions;\n const origin = shape.getPointByOrigin(originX, originY);\n const left = shape.left - (centerPoint.x - origin.x);\n const top = shape.top - (centerPoint.y - origin.y);\n\n shape.set({\n originX,\n originY,\n left,\n top,\n });\n\n shape.setCoords();\n}\n\n/**\n * Adjust the origin of shape by the moving pointer value\n * @param {{x: number, y: number}} pointer - Pointer value\n * @param {fabric.Object} shape - Shape object\n * @ignore\n */\nfunction adjustOriginByMovingPointer(pointer, shape) {\n const origin = shape.startPoint;\n const angle = -shape.angle;\n const originPositions = getPositionsOfRotatedOrigin(origin, pointer, angle);\n const { originX, originY } = originPositions;\n\n shape.setPositionByOrigin(origin, originX, originY);\n shape.setCoords();\n}\n\n/**\n * Adjust the dimension of shape on firing scaling event\n * @param {fabric.Object} shape - Shape object\n * @ignore\n */\nfunction adjustDimensionOnScaling(shape) {\n const { type, scaleX, scaleY } = shape;\n const dimensionKeys = DIMENSION_KEYS[type];\n let width = shape[dimensionKeys.w] * scaleX;\n let height = shape[dimensionKeys.h] * scaleY;\n\n if (shape.isRegular) {\n const maxScale = Math.max(scaleX, scaleY);\n\n width = shape[dimensionKeys.w] * maxScale;\n height = shape[dimensionKeys.h] * maxScale;\n }\n\n const options = {\n hasControls: false,\n hasBorders: false,\n scaleX: 1,\n scaleY: 1,\n };\n\n options[dimensionKeys.w] = width;\n options[dimensionKeys.h] = height;\n\n shape.set(options);\n}\n\n/**\n * Adjust the dimension of shape on firing mouse move event\n * @param {{x: number, y: number}} pointer - Pointer value\n * @param {fabric.Object} shape - Shape object\n * @ignore\n */\nfunction adjustDimensionOnMouseMove(pointer, shape) {\n const { type, strokeWidth, startPoint: origin } = shape;\n const divisor = DIVISOR[type];\n const dimensionKeys = DIMENSION_KEYS[type];\n const isTriangle = !!(shape.type === 'triangle');\n const options = {};\n let width = Math.abs(origin.x - pointer.x) / divisor;\n let height = Math.abs(origin.y - pointer.y) / divisor;\n\n if (width > strokeWidth) {\n width -= strokeWidth / divisor;\n }\n\n if (height > strokeWidth) {\n height -= strokeWidth / divisor;\n }\n\n if (shape.isRegular) {\n width = height = Math.max(width, height);\n\n if (isTriangle) {\n height = (Math.sqrt(3) / 2) * width;\n }\n }\n\n options[dimensionKeys.w] = width;\n options[dimensionKeys.h] = height;\n\n shape.set(options);\n}\n\nmodule.exports = {\n /**\n * Set each origin value to shape\n * @param {fabric.Object} shape - Shape object\n */\n setOrigins(shape) {\n const leftTopPoint = shape.getPointByOrigin('left', 'top');\n const rightTopPoint = shape.getPointByOrigin('right', 'top');\n const rightBottomPoint = shape.getPointByOrigin('right', 'bottom');\n const leftBottomPoint = shape.getPointByOrigin('left', 'bottom');\n\n shape.origins = {\n lt: leftTopPoint,\n rt: rightTopPoint,\n rb: rightBottomPoint,\n lb: leftBottomPoint,\n };\n },\n\n /**\n * Resize the shape\n * @param {fabric.Object} shape - Shape object\n * @param {{x: number, y: number}} pointer - Mouse pointer values on canvas\n * @param {boolean} isScaling - Whether the resizing action is scaling or not\n */\n resize(shape, pointer, isScaling) {\n if (hasCenterOrigin(shape)) {\n adjustOriginByStartPoint(pointer, shape);\n setStartPoint(shape);\n }\n\n if (isScaling) {\n adjustDimensionOnScaling(shape, pointer);\n } else {\n adjustDimensionOnMouseMove(pointer, shape);\n }\n\n adjustOriginByMovingPointer(pointer, shape);\n },\n\n /**\n * Adjust the origin position of shape to center\n * @param {fabric.Object} shape - Shape object\n */\n adjustOriginToCenter(shape) {\n const centerPoint = shape.getPointByOrigin('center', 'center');\n const { originX, originY } = shape;\n const origin = shape.getPointByOrigin(originX, originY);\n const left = shape.left + (centerPoint.x - origin.x);\n const top = shape.top + (centerPoint.y - origin.y);\n\n shape.set({\n hasControls: true,\n hasBorders: true,\n originX: 'center',\n originY: 'center',\n left,\n top,\n });\n\n shape.setCoords(); // For left, top properties\n },\n};\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Image-editor application class\n */\nimport snippet from 'tui-code-snippet';\nimport Invoker from '@/invoker';\nimport UI from '@/ui';\nimport action from '@/action';\nimport commandFactory from '@/factory/command';\nimport Graphics from '@/graphics';\nimport { makeSelectionUndoData, makeSelectionUndoDatum } from '@/helper/selectionModifyHelper';\nimport { sendHostName, Promise, getObjectType } from '@/util';\nimport {\n eventNames as events,\n commandNames as commands,\n keyCodes,\n rejectMessages,\n OBJ_TYPE,\n} from '@/consts';\n\nconst { isUndefined, forEach, CustomEvents } = snippet;\n\nconst {\n MOUSE_DOWN,\n OBJECT_MOVED,\n OBJECT_SCALED,\n OBJECT_ACTIVATED,\n OBJECT_ROTATED,\n OBJECT_ADDED,\n OBJECT_MODIFIED,\n ADD_TEXT,\n ADD_OBJECT,\n TEXT_EDITING,\n TEXT_CHANGED,\n ICON_CREATE_RESIZE,\n ICON_CREATE_END,\n SELECTION_CLEARED,\n SELECTION_CREATED,\n ADD_OBJECT_AFTER,\n} = events;\n\n/**\n * Image filter result\n * @typedef {object} FilterResult\n * @property {string} type - filter type like 'mask', 'Grayscale' and so on\n * @property {string} action - action type like 'add', 'remove'\n */\n\n/**\n * Flip status\n * @typedef {object} FlipStatus\n * @property {boolean} flipX - x axis\n * @property {boolean} flipY - y axis\n * @property {Number} angle - angle\n */\n/**\n * Rotation status\n * @typedef {Number} RotateStatus\n * @property {Number} angle - angle\n */\n\n/**\n * Old and new Size\n * @typedef {object} SizeChange\n * @property {Number} oldWidth - old width\n * @property {Number} oldHeight - old height\n * @property {Number} newWidth - new width\n * @property {Number} newHeight - new height\n */\n\n/**\n * @typedef {string} ErrorMsg - {string} error message\n */\n\n/**\n * @typedef {object} ObjectProps - graphics object properties\n * @property {number} id - object id\n * @property {string} type - object type\n * @property {string} text - text content\n * @property {(string | number)} left - Left\n * @property {(string | number)} top - Top\n * @property {(string | number)} width - Width\n * @property {(string | number)} height - Height\n * @property {string} fill - Color\n * @property {string} stroke - Stroke\n * @property {(string | number)} strokeWidth - StrokeWidth\n * @property {string} fontFamily - Font type for text\n * @property {number} fontSize - Font Size\n * @property {string} fontStyle - Type of inclination (normal / italic)\n * @property {string} fontWeight - Type of thicker or thinner looking (normal / bold)\n * @property {string} textAlign - Type of text align (left / center / right)\n * @property {string} textDecoration - Type of line (underline / line-through / overline)\n */\n\n/**\n * Shape filter option\n * @typedef {object.} ShapeFilterOption\n */\n\n/**\n * Shape filter option\n * @typedef {object} ShapeFillOption - fill option of shape\n * @property {string} type - fill type ('color' or 'filter')\n * @property {Array.} [filter] - {@link ShapeFilterOption} List.\n * only applies to filter types\n * (ex: \\[\\{pixelate: 20\\}, \\{blur: 0.3\\}\\])\n * @property {string} [color] - Shape foreground color (ex: '#fff', 'transparent')\n */\n\n/**\n * Image editor\n * @class\n * @param {string|HTMLElement} wrapper - Wrapper's element or selector\n * @param {Object} [options] - Canvas max width & height of css\n * @param {number} [options.includeUI] - Use the provided UI\n * @param {Object} [options.includeUI.loadImage] - Basic editing image\n * @param {string} options.includeUI.loadImage.path - image path\n * @param {string} options.includeUI.loadImage.name - image name\n * @param {Object} [options.includeUI.theme] - Theme object\n * @param {Array} [options.includeUI.menu] - It can be selected when only specific menu is used, Default values are \\['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'\\].\n * @param {string} [options.includeUI.initMenu] - The first menu to be selected and started.\n * @param {Object} [options.includeUI.uiSize] - ui size of editor\n * @param {string} options.includeUI.uiSize.width - width of ui\n * @param {string} options.includeUI.uiSize.height - height of ui\n * @param {string} [options.includeUI.menuBarPosition=bottom] - Menu bar position('top', 'bottom', 'left', 'right')\n * @param {number} options.cssMaxWidth - Canvas css-max-width\n * @param {number} options.cssMaxHeight - Canvas css-max-height\n * @param {Object} [options.selectionStyle] - selection style\n * @param {string} [options.selectionStyle.cornerStyle] - selection corner style\n * @param {number} [options.selectionStyle.cornerSize] - selection corner size\n * @param {string} [options.selectionStyle.cornerColor] - selection corner color\n * @param {string} [options.selectionStyle.cornerStrokeColor] = selection corner stroke color\n * @param {boolean} [options.selectionStyle.transparentCorners] - selection corner transparent\n * @param {number} [options.selectionStyle.lineWidth] - selection line width\n * @param {string} [options.selectionStyle.borderColor] - selection border color\n * @param {number} [options.selectionStyle.rotatingPointOffset] - selection rotating point length\n * @param {Boolean} [options.usageStatistics=true] - Let us know the hostname. If you don't want to send the hostname, please set to false.\n * @example\n * var ImageEditor = require('tui-image-editor');\n * var blackTheme = require('./js/theme/black-theme.js');\n * var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {\n * includeUI: {\n * loadImage: {\n * path: 'img/sampleImage.jpg',\n * name: 'SampleImage'\n * },\n * theme: blackTheme, // or whiteTheme\n * menu: ['shape', 'filter'],\n * initMenu: 'filter',\n * uiSize: {\n * width: '1000px',\n * height: '700px'\n * },\n * menuBarPosition: 'bottom'\n * },\n * cssMaxWidth: 700,\n * cssMaxHeight: 500,\n * selectionStyle: {\n * cornerSize: 20,\n * rotatingPointOffset: 70\n * }\n * });\n */\nclass ImageEditor {\n constructor(wrapper, options) {\n options = snippet.extend(\n {\n includeUI: false,\n usageStatistics: true,\n },\n options\n );\n\n this.mode = null;\n\n this.activeObjectId = null;\n\n /**\n * UI instance\n * @type {Ui}\n */\n if (options.includeUI) {\n const UIOption = options.includeUI;\n UIOption.usageStatistics = options.usageStatistics;\n\n this.ui = new UI(wrapper, UIOption, this.getActions());\n options = this.ui.setUiDefaultSelectionStyle(options);\n }\n\n /**\n * Invoker\n * @type {Invoker}\n * @private\n */\n this._invoker = new Invoker();\n\n /**\n * Graphics instance\n * @type {Graphics}\n * @private\n */\n this._graphics = new Graphics(this.ui ? this.ui.getEditorArea() : wrapper, {\n cssMaxWidth: options.cssMaxWidth,\n cssMaxHeight: options.cssMaxHeight,\n });\n\n /**\n * Event handler list\n * @type {Object}\n * @private\n */\n this._handlers = {\n keydown: this._onKeyDown.bind(this),\n mousedown: this._onMouseDown.bind(this),\n objectActivated: this._onObjectActivated.bind(this),\n objectMoved: this._onObjectMoved.bind(this),\n objectScaled: this._onObjectScaled.bind(this),\n objectRotated: this._onObjectRotated.bind(this),\n objectAdded: this._onObjectAdded.bind(this),\n objectModified: this._onObjectModified.bind(this),\n createdPath: this._onCreatedPath,\n addText: this._onAddText.bind(this),\n addObject: this._onAddObject.bind(this),\n textEditing: this._onTextEditing.bind(this),\n textChanged: this._onTextChanged.bind(this),\n iconCreateResize: this._onIconCreateResize.bind(this),\n iconCreateEnd: this._onIconCreateEnd.bind(this),\n selectionCleared: this._selectionCleared.bind(this),\n selectionCreated: this._selectionCreated.bind(this),\n };\n\n this._attachInvokerEvents();\n this._attachGraphicsEvents();\n this._attachDomEvents();\n this._setSelectionStyle(options.selectionStyle, {\n applyCropSelectionStyle: options.applyCropSelectionStyle,\n applyGroupSelectionStyle: options.applyGroupSelectionStyle,\n });\n\n if (options.usageStatistics) {\n sendHostName();\n }\n\n if (this.ui) {\n this.ui.initCanvas();\n this.setReAction();\n this._attachColorPickerInputBoxEvents();\n }\n fabric.enableGLFiltering = false;\n }\n\n _attachColorPickerInputBoxEvents() {\n this.ui.on(events.INPUT_BOX_EDITING_STARTED, () => {\n this.isColorPickerInputBoxEditing = true;\n });\n this.ui.on(events.INPUT_BOX_EDITING_STOPPED, () => {\n this.isColorPickerInputBoxEditing = false;\n });\n }\n\n _detachColorPickerInputBoxEvents() {\n this.ui.off(events.INPUT_BOX_EDITING_STARTED);\n this.ui.off(events.INPUT_BOX_EDITING_STOPPED);\n }\n\n /**\n * Set selection style by init option\n * @param {Object} selectionStyle - Selection styles\n * @param {Object} applyTargets - Selection apply targets\n * @param {boolean} applyCropSelectionStyle - whether apply with crop selection style or not\n * @param {boolean} applyGroupSelectionStyle - whether apply with group selection style or not\n * @private\n */\n _setSelectionStyle(selectionStyle, { applyCropSelectionStyle, applyGroupSelectionStyle }) {\n if (selectionStyle) {\n this._graphics.setSelectionStyle(selectionStyle);\n }\n\n if (applyCropSelectionStyle) {\n this._graphics.setCropSelectionStyle(selectionStyle);\n }\n\n if (applyGroupSelectionStyle) {\n this.on('selectionCreated', (eventTarget) => {\n if (eventTarget.type === 'activeSelection') {\n eventTarget.set(selectionStyle);\n }\n });\n }\n }\n\n /**\n * Attach invoker events\n * @private\n */\n _attachInvokerEvents() {\n const {\n UNDO_STACK_CHANGED,\n REDO_STACK_CHANGED,\n EXECUTE_COMMAND,\n AFTER_UNDO,\n AFTER_REDO,\n HAND_STARTED,\n HAND_STOPPED,\n } = events;\n\n /**\n * Undo stack changed event\n * @event ImageEditor#undoStackChanged\n * @param {Number} length - undo stack length\n * @example\n * imageEditor.on('undoStackChanged', function(length) {\n * console.log(length);\n * });\n */\n this._invoker.on(UNDO_STACK_CHANGED, this.fire.bind(this, UNDO_STACK_CHANGED));\n /**\n * Redo stack changed event\n * @event ImageEditor#redoStackChanged\n * @param {Number} length - redo stack length\n * @example\n * imageEditor.on('redoStackChanged', function(length) {\n * console.log(length);\n * });\n */\n this._invoker.on(REDO_STACK_CHANGED, this.fire.bind(this, REDO_STACK_CHANGED));\n\n if (this.ui) {\n const canvas = this._graphics.getCanvas();\n\n this._invoker.on(EXECUTE_COMMAND, (command) => this.ui.fire(EXECUTE_COMMAND, command));\n this._invoker.on(AFTER_UNDO, (command) => this.ui.fire(AFTER_UNDO, command));\n this._invoker.on(AFTER_REDO, (command) => this.ui.fire(AFTER_REDO, command));\n\n canvas.on(HAND_STARTED, () => this.ui.fire(HAND_STARTED));\n canvas.on(HAND_STOPPED, () => this.ui.fire(HAND_STOPPED));\n }\n }\n\n /**\n * Attach canvas events\n * @private\n */\n _attachGraphicsEvents() {\n this._graphics.on({\n [MOUSE_DOWN]: this._handlers.mousedown,\n [OBJECT_MOVED]: this._handlers.objectMoved,\n [OBJECT_SCALED]: this._handlers.objectScaled,\n [OBJECT_ROTATED]: this._handlers.objectRotated,\n [OBJECT_ACTIVATED]: this._handlers.objectActivated,\n [OBJECT_ADDED]: this._handlers.objectAdded,\n [OBJECT_MODIFIED]: this._handlers.objectModified,\n [ADD_TEXT]: this._handlers.addText,\n [ADD_OBJECT]: this._handlers.addObject,\n [TEXT_EDITING]: this._handlers.textEditing,\n [TEXT_CHANGED]: this._handlers.textChanged,\n [ICON_CREATE_RESIZE]: this._handlers.iconCreateResize,\n [ICON_CREATE_END]: this._handlers.iconCreateEnd,\n [SELECTION_CLEARED]: this._handlers.selectionCleared,\n [SELECTION_CREATED]: this._handlers.selectionCreated,\n });\n }\n\n /**\n * Attach dom events\n * @private\n */\n _attachDomEvents() {\n // ImageEditor supports IE 9 higher\n document.addEventListener('keydown', this._handlers.keydown);\n }\n\n /**\n * Detach dom events\n * @private\n */\n _detachDomEvents() {\n // ImageEditor supports IE 9 higher\n document.removeEventListener('keydown', this._handlers.keydown);\n }\n\n /**\n * Keydown event handler\n * @param {KeyboardEvent} e - Event object\n * @private\n */\n /* eslint-disable complexity */\n _onKeyDown(e) {\n const { ctrlKey, keyCode, metaKey } = e;\n const isModifierKey = ctrlKey || metaKey;\n\n if (isModifierKey) {\n if (keyCode === keyCodes.C) {\n this._graphics.resetTargetObjectForCopyPaste();\n } else if (keyCode === keyCodes.V) {\n this._graphics.pasteObject();\n this.clearRedoStack();\n } else if (keyCode === keyCodes.Z) {\n // There is no error message on shortcut when it's empty\n this.undo()['catch'](() => {});\n } else if (keyCode === keyCodes.Y) {\n // There is no error message on shortcut when it's empty\n this.redo()['catch'](() => {});\n }\n }\n\n const isDeleteKey = keyCode === keyCodes.BACKSPACE || keyCode === keyCodes.DEL;\n const isRemoveReady = this._graphics.isReadyRemoveObject();\n\n if (!this.isColorPickerInputBoxEditing && isRemoveReady && isDeleteKey) {\n e.preventDefault();\n this.removeActiveObject();\n }\n }\n\n /**\n * Remove Active Object\n */\n removeActiveObject() {\n const activeObjectId = this._graphics.getActiveObjectIdForRemove();\n\n this.removeObject(activeObjectId);\n }\n\n /**\n * mouse down event handler\n * @param {Event} event - mouse down event\n * @param {Object} originPointer - origin pointer\n * @param {Number} originPointer.x x position\n * @param {Number} originPointer.y y position\n * @private\n */\n _onMouseDown(event, originPointer) {\n /**\n * The mouse down event with position x, y on canvas\n * @event ImageEditor#mousedown\n * @param {Object} event - browser mouse event object\n * @param {Object} originPointer origin pointer\n * @param {Number} originPointer.x x position\n * @param {Number} originPointer.y y position\n * @example\n * imageEditor.on('mousedown', function(event, originPointer) {\n * console.log(event);\n * console.log(originPointer);\n * if (imageEditor.hasFilter('colorFilter')) {\n * imageEditor.applyFilter('colorFilter', {\n * x: parseInt(originPointer.x, 10),\n * y: parseInt(originPointer.y, 10)\n * });\n * }\n * });\n */\n\n this.fire(events.MOUSE_DOWN, event, originPointer);\n }\n\n /**\n * Add a 'addObject' command\n * @param {Object} obj - Fabric object\n * @private\n */\n _pushAddObjectCommand(obj) {\n const command = commandFactory.create(commands.ADD_OBJECT, this._graphics, obj);\n this._invoker.pushUndoStack(command);\n }\n\n /**\n * Add a 'changeSelection' command\n * @param {fabric.Object} obj - selection object\n * @private\n */\n _pushModifyObjectCommand(obj) {\n const { type } = obj;\n const props = makeSelectionUndoData(obj, (item) =>\n makeSelectionUndoDatum(this._graphics.getObjectId(item), item, type === 'activeSelection')\n );\n const command = commandFactory.create(commands.CHANGE_SELECTION, this._graphics, props);\n command.execute(this._graphics, props);\n\n this._invoker.pushUndoStack(command);\n }\n\n /**\n * 'objectActivated' event handler\n * @param {ObjectProps} props - object properties\n * @private\n */\n _onObjectActivated(props) {\n /**\n * The event when object is selected(aka activated).\n * @event ImageEditor#objectActivated\n * @param {ObjectProps} objectProps - object properties\n * @example\n * imageEditor.on('objectActivated', function(props) {\n * console.log(props);\n * console.log(props.type);\n * console.log(props.id);\n * });\n */\n this.fire(events.OBJECT_ACTIVATED, props);\n }\n\n /**\n * 'objectMoved' event handler\n * @param {ObjectProps} props - object properties\n * @private\n */\n _onObjectMoved(props) {\n /**\n * The event when object is moved\n * @event ImageEditor#objectMoved\n * @param {ObjectProps} props - object properties\n * @example\n * imageEditor.on('objectMoved', function(props) {\n * console.log(props);\n * console.log(props.type);\n * });\n */\n this.fire(events.OBJECT_MOVED, props);\n }\n\n /**\n * 'objectScaled' event handler\n * @param {ObjectProps} props - object properties\n * @private\n */\n _onObjectScaled(props) {\n /**\n * The event when scale factor is changed\n * @event ImageEditor#objectScaled\n * @param {ObjectProps} props - object properties\n * @example\n * imageEditor.on('objectScaled', function(props) {\n * console.log(props);\n * console.log(props.type);\n * });\n */\n this.fire(events.OBJECT_SCALED, props);\n }\n\n /**\n * 'objectRotated' event handler\n * @param {ObjectProps} props - object properties\n * @private\n */\n _onObjectRotated(props) {\n /**\n * The event when object angle is changed\n * @event ImageEditor#objectRotated\n * @param {ObjectProps} props - object properties\n * @example\n * imageEditor.on('objectRotated', function(props) {\n * console.log(props);\n * console.log(props.type);\n * });\n */\n this.fire(events.OBJECT_ROTATED, props);\n }\n\n /**\n * Get current drawing mode\n * @returns {string}\n * @example\n * // Image editor drawing mode\n * //\n * // NORMAL: 'NORMAL'\n * // CROPPER: 'CROPPER'\n * // FREE_DRAWING: 'FREE_DRAWING'\n * // LINE_DRAWING: 'LINE_DRAWING'\n * // TEXT: 'TEXT'\n * //\n * if (imageEditor.getDrawingMode() === 'FREE_DRAWING') {\n * imageEditor.stopDrawingMode();\n * }\n */\n getDrawingMode() {\n return this._graphics.getDrawingMode();\n }\n\n /**\n * Clear all objects\n * @returns {Promise}\n * @example\n * imageEditor.clearObjects();\n */\n clearObjects() {\n return this.execute(commands.CLEAR_OBJECTS);\n }\n\n /**\n * Deactivate all objects\n * @example\n * imageEditor.deactivateAll();\n */\n deactivateAll() {\n this._graphics.deactivateAll();\n this._graphics.renderAll();\n }\n\n /**\n * discard selction\n * @example\n * imageEditor.discardSelection();\n */\n discardSelection() {\n this._graphics.discardSelection();\n }\n\n /**\n * selectable status change\n * @param {boolean} selectable - selectable status\n * @example\n * imageEditor.changeSelectableAll(false); // or true\n */\n changeSelectableAll(selectable) {\n this._graphics.changeSelectableAll(selectable);\n }\n\n /**\n * Init history\n */\n _initHistory() {\n if (this.ui) {\n this.ui.initHistory();\n }\n }\n\n /**\n * Clear history\n */\n _clearHistory() {\n if (this.ui) {\n this.ui.clearHistory();\n }\n }\n\n /**\n * Invoke command\n * @param {String} commandName - Command name\n * @param {...*} args - Arguments for creating command\n * @returns {Promise}\n * @private\n */\n execute(commandName, ...args) {\n // Inject an Graphics instance as first parameter\n const theArgs = [this._graphics].concat(args);\n\n return this._invoker.execute(commandName, ...theArgs);\n }\n\n /**\n * Invoke command\n * @param {String} commandName - Command name\n * @param {...*} args - Arguments for creating command\n * @returns {Promise}\n * @private\n */\n executeSilent(commandName, ...args) {\n // Inject an Graphics instance as first parameter\n const theArgs = [this._graphics].concat(args);\n\n return this._invoker.executeSilent(commandName, ...theArgs);\n }\n\n /**\n * Undo\n * @param {number} [iterationCount=1] - Iteration count of undo\n * @returns {Promise}\n * @example\n * imageEditor.undo();\n */\n undo(iterationCount = 1) {\n let promise = Promise.resolve();\n\n for (let i = 0; i < iterationCount; i += 1) {\n promise = promise.then(() => this._invoker.undo());\n }\n\n return promise;\n }\n\n /**\n * Redo\n * @param {number} [iterationCount=1] - Iteration count of redo\n * @returns {Promise}\n * @example\n * imageEditor.redo();\n */\n redo(iterationCount = 1) {\n let promise = Promise.resolve();\n\n for (let i = 0; i < iterationCount; i += 1) {\n promise = promise.then(() => this._invoker.redo());\n }\n\n return promise;\n }\n\n /**\n * Zoom\n * @param {number} x - x axis of center point for zoom\n * @param {number} y - y axis of center point for zoom\n * @param {number} zoomLevel - level of zoom(1.0 ~ 5.0)\n */\n zoom({ x, y, zoomLevel }) {\n this._graphics.zoom({ x, y }, zoomLevel);\n }\n\n /**\n * Reset zoom. Change zoom level to 1.0\n */\n resetZoom() {\n this._graphics.resetZoom();\n }\n\n /**\n * Load image from file\n * @param {File} imgFile - Image file\n * @param {string} [imageName] - imageName\n * @returns {Promise}\n * @example\n * imageEditor.loadImageFromFile(file).then(result => {\n * console.log('old : ' + result.oldWidth + ', ' + result.oldHeight);\n * console.log('new : ' + result.newWidth + ', ' + result.newHeight);\n * });\n */\n loadImageFromFile(imgFile, imageName) {\n if (!imgFile) {\n return Promise.reject(rejectMessages.invalidParameters);\n }\n\n const imgUrl = URL.createObjectURL(imgFile);\n imageName = imageName || imgFile.name;\n\n return this.loadImageFromURL(imgUrl, imageName).then((value) => {\n URL.revokeObjectURL(imgFile);\n\n return value;\n });\n }\n\n /**\n * Load image from url\n * @param {string} url - File url\n * @param {string} imageName - imageName\n * @returns {Promise}\n * @example\n * imageEditor.loadImageFromURL('http://url/testImage.png', 'lena').then(result => {\n * console.log('old : ' + result.oldWidth + ', ' + result.oldHeight);\n * console.log('new : ' + result.newWidth + ', ' + result.newHeight);\n * });\n */\n loadImageFromURL(url, imageName) {\n if (!imageName || !url) {\n return Promise.reject(rejectMessages.invalidParameters);\n }\n\n return this.execute(commands.LOAD_IMAGE, imageName, url);\n }\n\n /**\n * Add image object on canvas\n * @param {string} imgUrl - Image url to make object\n * @returns {Promise}\n * @example\n * imageEditor.addImageObject('path/fileName.jpg').then(objectProps => {\n * console.log(ojectProps.id);\n * });\n */\n addImageObject(imgUrl) {\n if (!imgUrl) {\n return Promise.reject(rejectMessages.invalidParameters);\n }\n\n return this.execute(commands.ADD_IMAGE_OBJECT, imgUrl);\n }\n\n /**\n * Start a drawing mode. If the current mode is not 'NORMAL', 'stopDrawingMode()' will be called first.\n * @param {String} mode Can be one of 'CROPPER', 'FREE_DRAWING', 'LINE_DRAWING', 'TEXT', 'SHAPE'\n * @param {Object} [option] parameters of drawing mode, it's available with 'FREE_DRAWING', 'LINE_DRAWING'\n * @param {Number} [option.width] brush width\n * @param {String} [option.color] brush color\n * @param {Object} [option.arrowType] arrow decorate\n * @param {string} [option.arrowType.tail] arrow decorate for tail. 'chevron' or 'triangle'\n * @param {string} [option.arrowType.head] arrow decorate for head. 'chevron' or 'triangle'\n * @returns {boolean} true if success or false\n * @example\n * imageEditor.startDrawingMode('FREE_DRAWING', {\n * width: 10,\n * color: 'rgba(255,0,0,0.5)'\n * });\n * imageEditor.startDrawingMode('LINE_DRAWING', {\n * width: 10,\n * color: 'rgba(255,0,0,0.5)',\n * arrowType: {\n * tail: 'chevron' // triangle\n * }\n * });\n *\n */\n startDrawingMode(mode, option) {\n return this._graphics.startDrawingMode(mode, option);\n }\n\n /**\n * Stop the current drawing mode and back to the 'NORMAL' mode\n * @example\n * imageEditor.stopDrawingMode();\n */\n stopDrawingMode() {\n this._graphics.stopDrawingMode();\n }\n\n /**\n * Crop this image with rect\n * @param {Object} rect crop rect\n * @param {Number} rect.left left position\n * @param {Number} rect.top top position\n * @param {Number} rect.width width\n * @param {Number} rect.height height\n * @returns {Promise}\n * @example\n * imageEditor.crop(imageEditor.getCropzoneRect());\n */\n crop(rect) {\n const data = this._graphics.getCroppedImageData(rect);\n if (!data) {\n return Promise.reject(rejectMessages.invalidParameters);\n }\n\n return this.loadImageFromURL(data.url, data.imageName);\n }\n\n /**\n * Get the cropping rect\n * @returns {Object} {{left: number, top: number, width: number, height: number}} rect\n */\n getCropzoneRect() {\n return this._graphics.getCropzoneRect();\n }\n\n /**\n * Set the cropping rect\n * @param {number} [mode] crop rect mode [1, 1.5, 1.3333333333333333, 1.25, 1.7777777777777777]\n */\n setCropzoneRect(mode) {\n this._graphics.setCropzoneRect(mode);\n }\n\n /**\n * Flip\n * @returns {Promise}\n * @param {string} type - 'flipX' or 'flipY' or 'reset'\n * @returns {Promise}\n * @private\n */\n _flip(type) {\n return this.execute(commands.FLIP_IMAGE, type);\n }\n\n /**\n * Flip x\n * @returns {Promise}\n * @example\n * imageEditor.flipX().then((status => {\n * console.log('flipX: ', status.flipX);\n * console.log('flipY: ', status.flipY);\n * console.log('angle: ', status.angle);\n * }).catch(message => {\n * console.log('error: ', message);\n * });\n */\n flipX() {\n return this._flip('flipX');\n }\n\n /**\n * Flip y\n * @returns {Promise}\n * @example\n * imageEditor.flipY().then(status => {\n * console.log('flipX: ', status.flipX);\n * console.log('flipY: ', status.flipY);\n * console.log('angle: ', status.angle);\n * }).catch(message => {\n * console.log('error: ', message);\n * });\n */\n flipY() {\n return this._flip('flipY');\n }\n\n /**\n * Reset flip\n * @returns {Promise}\n * @example\n * imageEditor.resetFlip().then(status => {\n * console.log('flipX: ', status.flipX);\n * console.log('flipY: ', status.flipY);\n * console.log('angle: ', status.angle);\n * }).catch(message => {\n * console.log('error: ', message);\n * });;\n */\n resetFlip() {\n return this._flip('reset');\n }\n\n /**\n * @param {string} type - 'rotate' or 'setAngle'\n * @param {number} angle - angle value (degree)\n * @param {boolean} isSilent - is silent execution or not\n * @returns {Promise}\n * @private\n */\n _rotate(type, angle, isSilent) {\n let result = null;\n\n if (isSilent) {\n result = this.executeSilent(commands.ROTATE_IMAGE, type, angle);\n } else {\n result = this.execute(commands.ROTATE_IMAGE, type, angle);\n }\n\n return result;\n }\n\n /**\n * Rotate image\n * @returns {Promise}\n * @param {number} angle - Additional angle to rotate image\n * @param {boolean} isSilent - is silent execution or not\n * @returns {Promise}\n * @example\n * imageEditor.rotate(10); // angle = 10\n * imageEditor.rotate(10); // angle = 20\n * imageEditor.rotate(5); // angle = 5\n * imageEditor.rotate(-95); // angle = -90\n * imageEditor.rotate(10).then(status => {\n * console.log('angle: ', status.angle);\n * })).catch(message => {\n * console.log('error: ', message);\n * });\n */\n rotate(angle, isSilent) {\n return this._rotate('rotate', angle, isSilent);\n }\n\n /**\n * Set angle\n * @param {number} angle - Angle of image\n * @param {boolean} isSilent - is silent execution or not\n * @returns {Promise}\n * @example\n * imageEditor.setAngle(10); // angle = 10\n * imageEditor.rotate(10); // angle = 20\n * imageEditor.setAngle(5); // angle = 5\n * imageEditor.rotate(50); // angle = 55\n * imageEditor.setAngle(-40); // angle = -40\n * imageEditor.setAngle(10).then(status => {\n * console.log('angle: ', status.angle);\n * })).catch(message => {\n * console.log('error: ', message);\n * });\n */\n setAngle(angle, isSilent) {\n return this._rotate('setAngle', angle, isSilent);\n }\n\n /**\n * Set drawing brush\n * @param {Object} option brush option\n * @param {Number} option.width width\n * @param {String} option.color color like 'FFFFFF', 'rgba(0, 0, 0, 0.5)'\n * @example\n * imageEditor.startDrawingMode('FREE_DRAWING');\n * imageEditor.setBrush({\n * width: 12,\n * color: 'rgba(0, 0, 0, 0.5)'\n * });\n * imageEditor.setBrush({\n * width: 8,\n * color: 'FFFFFF'\n * });\n */\n setBrush(option) {\n this._graphics.setBrush(option);\n }\n\n /**\n * Set states of current drawing shape\n * @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle')\n * @param {Object} [options] - Shape options\n * @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or\n * Shape foreground color (ex: '#fff', 'transparent')\n * @param {string} [options.stoke] - Shape outline color\n * @param {number} [options.strokeWidth] - Shape outline width\n * @param {number} [options.width] - Width value (When type option is 'rect', this options can use)\n * @param {number} [options.height] - Height value (When type option is 'rect', this options can use)\n * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)\n * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)\n * @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not\n * @example\n * imageEditor.setDrawingShape('rect', {\n * fill: 'red',\n * width: 100,\n * height: 200\n * });\n * @example\n * imageEditor.setDrawingShape('rect', {\n * fill: {\n * type: 'filter',\n * filter: [{blur: 0.3}, {pixelate: 20}]\n * },\n * width: 100,\n * height: 200\n * });\n * @example\n * imageEditor.setDrawingShape('circle', {\n * fill: 'transparent',\n * stroke: 'blue',\n * strokeWidth: 3,\n * rx: 10,\n * ry: 100\n * });\n * @example\n * imageEditor.setDrawingShape('triangle', { // When resizing, the shape keep the 1:1 ratio\n * width: 1,\n * height: 1,\n * isRegular: true\n * });\n * @example\n * imageEditor.setDrawingShape('circle', { // When resizing, the shape keep the 1:1 ratio\n * rx: 10,\n * ry: 10,\n * isRegular: true\n * });\n */\n setDrawingShape(type, options) {\n this._graphics.setDrawingShape(type, options);\n }\n\n setDrawingIcon(type, iconColor) {\n this._graphics.setIconStyle(type, iconColor);\n }\n\n /**\n * Add shape\n * @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle')\n * @param {Object} options - Shape options\n * @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or\n * Shape foreground color (ex: '#fff', 'transparent')\n * @param {string} [options.stroke] - Shape outline color\n * @param {number} [options.strokeWidth] - Shape outline width\n * @param {number} [options.width] - Width value (When type option is 'rect', this options can use)\n * @param {number} [options.height] - Height value (When type option is 'rect', this options can use)\n * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)\n * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)\n * @param {number} [options.left] - Shape x position\n * @param {number} [options.top] - Shape y position\n * @param {boolean} [options.isRegular] - Whether resizing shape has 1:1 ratio or not\n * @returns {Promise}\n * @example\n * imageEditor.addShape('rect', {\n * fill: 'red',\n * stroke: 'blue',\n * strokeWidth: 3,\n * width: 100,\n * height: 200,\n * left: 10,\n * top: 10,\n * isRegular: true\n * });\n * @example\n * imageEditor.addShape('circle', {\n * fill: 'red',\n * stroke: 'blue',\n * strokeWidth: 3,\n * rx: 10,\n * ry: 100,\n * isRegular: false\n * }).then(objectProps => {\n * console.log(objectProps.id);\n * });\n * @example\n * imageEditor.addShape('rect', {\n * fill: {\n * type: 'filter',\n * filter: [{blur: 0.3}, {pixelate: 20}]\n * },\n * stroke: 'blue',\n * strokeWidth: 3,\n * rx: 10,\n * ry: 100,\n * isRegular: false\n * }).then(objectProps => {\n * console.log(objectProps.id);\n * });\n */\n addShape(type, options) {\n options = options || {};\n\n this._setPositions(options);\n\n return this.execute(commands.ADD_SHAPE, type, options);\n }\n\n /**\n * Change shape\n * @param {number} id - object id\n * @param {Object} options - Shape options\n * @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or\n * Shape foreground color (ex: '#fff', 'transparent')\n * @param {string} [options.stroke] - Shape outline color\n * @param {number} [options.strokeWidth] - Shape outline width\n * @param {number} [options.width] - Width value (When type option is 'rect', this options can use)\n * @param {number} [options.height] - Height value (When type option is 'rect', this options can use)\n * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)\n * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)\n * @param {boolean} [options.isRegular] - Whether resizing shape has 1:1 ratio or not\n * @param {boolean} isSilent - is silent execution or not\n * @returns {Promise}\n * @example\n * // call after selecting shape object on canvas\n * imageEditor.changeShape(id, { // change rectagle or triangle\n * fill: 'red',\n * stroke: 'blue',\n * strokeWidth: 3,\n * width: 100,\n * height: 200\n * });\n * @example\n * // call after selecting shape object on canvas\n * imageEditor.changeShape(id, { // change circle\n * fill: 'red',\n * stroke: 'blue',\n * strokeWidth: 3,\n * rx: 10,\n * ry: 100\n * });\n */\n changeShape(id, options, isSilent) {\n const executeMethodName = isSilent ? 'executeSilent' : 'execute';\n\n return this[executeMethodName](commands.CHANGE_SHAPE, id, options);\n }\n\n /**\n * Add text on image\n * @param {string} text - Initial input text\n * @param {Object} [options] Options for generating text\n * @param {Object} [options.styles] Initial styles\n * @param {string} [options.styles.fill] Color\n * @param {string} [options.styles.fontFamily] Font type for text\n * @param {number} [options.styles.fontSize] Size\n * @param {string} [options.styles.fontStyle] Type of inclination (normal / italic)\n * @param {string} [options.styles.fontWeight] Type of thicker or thinner looking (normal / bold)\n * @param {string} [options.styles.textAlign] Type of text align (left / center / right)\n * @param {string} [options.styles.textDecoration] Type of line (underline / line-through / overline)\n * @param {{x: number, y: number}} [options.position] - Initial position\n * @param {boolean} [options.autofocus] - text autofocus, default is true\n * @returns {Promise}\n * @example\n * imageEditor.addText('init text');\n * @example\n * imageEditor.addText('init text', {\n * styles: {\n * fill: '#000',\n * fontSize: 20,\n * fontWeight: 'bold'\n * },\n * position: {\n * x: 10,\n * y: 10\n * }\n * }).then(objectProps => {\n * console.log(objectProps.id);\n * });\n */\n addText(text, options) {\n text = text || '';\n options = options || {};\n\n return this.execute(commands.ADD_TEXT, text, options);\n }\n\n /**\n * Change contents of selected text object on image\n * @param {number} id - object id\n * @param {string} text - Changing text\n * @returns {Promise}\n * @example\n * imageEditor.changeText(id, 'change text');\n */\n changeText(id, text) {\n text = text || '';\n\n return this.execute(commands.CHANGE_TEXT, id, text);\n }\n\n /**\n * Set style\n * @param {number} id - object id\n * @param {Object} styleObj - text styles\n * @param {string} [styleObj.fill] Color\n * @param {string} [styleObj.fontFamily] Font type for text\n * @param {number} [styleObj.fontSize] Size\n * @param {string} [styleObj.fontStyle] Type of inclination (normal / italic)\n * @param {string} [styleObj.fontWeight] Type of thicker or thinner looking (normal / bold)\n * @param {string} [styleObj.textAlign] Type of text align (left / center / right)\n * @param {string} [styleObj.textDecoration] Type of line (underline / line-through / overline)\n * @param {boolean} isSilent - is silent execution or not\n * @returns {Promise}\n * @example\n * imageEditor.changeTextStyle(id, {\n * fontStyle: 'italic'\n * });\n */\n changeTextStyle(id, styleObj, isSilent) {\n const executeMethodName = isSilent ? 'executeSilent' : 'execute';\n\n return this[executeMethodName](commands.CHANGE_TEXT_STYLE, id, styleObj);\n }\n\n /**\n * change text mode\n * @param {string} type - change type\n * @private\n */\n _changeActivateMode(type) {\n if (type !== 'ICON' && this.getDrawingMode() !== type) {\n this.startDrawingMode(type);\n }\n }\n\n /**\n * 'textChanged' event handler\n * @param {Object} target - changed text object\n * @private\n */\n _onTextChanged(target) {\n this.fire(events.TEXT_CHANGED, target);\n }\n\n /**\n * 'iconCreateResize' event handler\n * @param {Object} originPointer origin pointer\n * @param {Number} originPointer.x x position\n * @param {Number} originPointer.y y position\n * @private\n */\n _onIconCreateResize(originPointer) {\n this.fire(events.ICON_CREATE_RESIZE, originPointer);\n }\n\n /**\n * 'iconCreateEnd' event handler\n * @param {Object} originPointer origin pointer\n * @param {Number} originPointer.x x position\n * @param {Number} originPointer.y y position\n * @private\n */\n _onIconCreateEnd(originPointer) {\n this.fire(events.ICON_CREATE_END, originPointer);\n }\n\n /**\n * 'textEditing' event handler\n * @private\n */\n _onTextEditing() {\n /**\n * The event which starts to edit text object\n * @event ImageEditor#textEditing\n * @example\n * imageEditor.on('textEditing', function() {\n * console.log('text editing');\n * });\n */\n\n this.fire(events.TEXT_EDITING);\n }\n\n /**\n * Mousedown event handler in case of 'TEXT' drawing mode\n * @param {fabric.Event} event - Current mousedown event object\n * @private\n */\n _onAddText(event) {\n /**\n * The event when 'TEXT' drawing mode is enabled and click non-object area.\n * @event ImageEditor#addText\n * @param {Object} pos\n * @param {Object} pos.originPosition - Current position on origin canvas\n * @param {Number} pos.originPosition.x - x\n * @param {Number} pos.originPosition.y - y\n * @param {Object} pos.clientPosition - Current position on client area\n * @param {Number} pos.clientPosition.x - x\n * @param {Number} pos.clientPosition.y - y\n * @example\n * imageEditor.on('addText', function(pos) {\n * console.log('text position on canvas: ' + pos.originPosition);\n * console.log('text position on brwoser: ' + pos.clientPosition);\n * });\n */\n\n this.fire(events.ADD_TEXT, {\n originPosition: event.originPosition,\n clientPosition: event.clientPosition,\n });\n }\n\n /**\n * 'addObject' event handler\n * @param {Object} objectProps added object properties\n * @private\n */\n _onAddObject(objectProps) {\n const obj = this._graphics.getObject(objectProps.id);\n this._invoker.fire(events.EXECUTE_COMMAND, getObjectType(obj.type));\n this._pushAddObjectCommand(obj);\n }\n\n /**\n * 'objectAdded' event handler\n * @param {Object} objectProps added object properties\n * @private\n */\n _onObjectAdded(objectProps) {\n /**\n * The event when object added\n * @event ImageEditor#objectAdded\n * @param {ObjectProps} props - object properties\n * @example\n * imageEditor.on('objectAdded', function(props) {\n * console.log(props);\n * });\n */\n this.fire(OBJECT_ADDED, objectProps);\n\n /**\n * The event when object added (deprecated)\n * @event ImageEditor#addObjectAfter\n * @param {ObjectProps} props - object properties\n * @deprecated\n */\n this.fire(ADD_OBJECT_AFTER, objectProps);\n }\n\n /**\n * 'objectModified' event handler\n * @param {fabric.Object} obj - selection object\n * @private\n */\n _onObjectModified(obj) {\n if (obj.type !== OBJ_TYPE.CROPZONE) {\n this._invoker.fire(events.EXECUTE_COMMAND, getObjectType(obj.type));\n this._pushModifyObjectCommand(obj);\n }\n }\n\n /**\n * 'selectionCleared' event handler\n * @private\n */\n _selectionCleared() {\n this.fire(SELECTION_CLEARED);\n }\n\n /**\n * 'selectionCreated' event handler\n * @param {Object} eventTarget - Fabric object\n * @private\n */\n _selectionCreated(eventTarget) {\n this.fire(SELECTION_CREATED, eventTarget);\n }\n\n /**\n * Register custom icons\n * @param {{iconType: string, pathValue: string}} infos - Infos to register icons\n * @example\n * imageEditor.registerIcons({\n * customIcon: 'M 0 0 L 20 20 L 10 10 Z',\n * customArrow: 'M 60 0 L 120 60 H 90 L 75 45 V 180 H 45 V 45 L 30 60 H 0 Z'\n * });\n */\n registerIcons(infos) {\n this._graphics.registerPaths(infos);\n }\n\n /**\n * Change canvas cursor type\n * @param {string} cursorType - cursor type\n * @example\n * imageEditor.changeCursor('crosshair');\n */\n changeCursor(cursorType) {\n this._graphics.changeCursor(cursorType);\n }\n\n /**\n * Add icon on canvas\n * @param {string} type - Icon type ('arrow', 'cancel', custom icon name)\n * @param {Object} options - Icon options\n * @param {string} [options.fill] - Icon foreground color\n * @param {number} [options.left] - Icon x position\n * @param {number} [options.top] - Icon y position\n * @returns {Promise}\n * @example\n * imageEditor.addIcon('arrow'); // The position is center on canvas\n * @example\n * imageEditor.addIcon('arrow', {\n * left: 100,\n * top: 100\n * }).then(objectProps => {\n * console.log(objectProps.id);\n * });\n */\n addIcon(type, options) {\n options = options || {};\n\n this._setPositions(options);\n\n return this.execute(commands.ADD_ICON, type, options);\n }\n\n /**\n * Change icon color\n * @param {number} id - object id\n * @param {string} color - Color for icon\n * @returns {Promise}\n * @example\n * imageEditor.changeIconColor(id, '#000000');\n */\n changeIconColor(id, color) {\n return this.execute(commands.CHANGE_ICON_COLOR, id, color);\n }\n\n /**\n * Remove an object or group by id\n * @param {number} id - object id\n * @returns {Promise}\n * @example\n * imageEditor.removeObject(id);\n */\n removeObject(id) {\n const { type } = this._graphics.getObject(id);\n\n return this.execute(commands.REMOVE_OBJECT, id, getObjectType(type));\n }\n\n /**\n * Whether it has the filter or not\n * @param {string} type - Filter type\n * @returns {boolean} true if it has the filter\n */\n hasFilter(type) {\n return this._graphics.hasFilter(type);\n }\n\n /**\n * Remove filter on canvas image\n * @param {string} type - Filter type\n * @returns {Promise}\n * @example\n * imageEditor.removeFilter('Grayscale').then(obj => {\n * console.log('filterType: ', obj.type);\n * console.log('actType: ', obj.action);\n * }).catch(message => {\n * console.log('error: ', message);\n * });\n */\n removeFilter(type) {\n return this.execute(commands.REMOVE_FILTER, type);\n }\n\n /**\n * Apply filter on canvas image\n * @param {string} type - Filter type\n * @param {object} options - Options to apply filter\n * @param {boolean} isSilent - is silent execution or not\n * @returns {Promise}\n * @example\n * imageEditor.applyFilter('Grayscale');\n * @example\n * imageEditor.applyFilter('mask', {maskObjId: id}).then(obj => {\n * console.log('filterType: ', obj.type);\n * console.log('actType: ', obj.action);\n * }).catch(message => {\n * console.log('error: ', message);\n * });;\n */\n applyFilter(type, options, isSilent) {\n const executeMethodName = isSilent ? 'executeSilent' : 'execute';\n\n return this[executeMethodName](commands.APPLY_FILTER, type, options);\n }\n\n /**\n * Get data url\n * @param {Object} options - options for toDataURL\n * @param {String} [options.format=png] The format of the output image. Either \"jpeg\" or \"png\"\n * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg.\n * @param {Number} [options.multiplier=1] Multiplier to scale by\n * @param {Number} [options.left] Cropping left offset. Introduced in fabric v1.2.14\n * @param {Number} [options.top] Cropping top offset. Introduced in fabric v1.2.14\n * @param {Number} [options.width] Cropping width. Introduced in fabric v1.2.14\n * @param {Number} [options.height] Cropping height. Introduced in fabric v1.2.14\n * @returns {string} A DOMString containing the requested data URI\n * @example\n * imgEl.src = imageEditor.toDataURL();\n *\n * imageEditor.loadImageFromURL(imageEditor.toDataURL(), 'FilterImage').then(() => {\n * imageEditor.addImageObject(imgUrl);\n * });\n */\n toDataURL(options) {\n return this._graphics.toDataURL(options);\n }\n\n /**\n * Get image name\n * @returns {string} image name\n * @example\n * console.log(imageEditor.getImageName());\n */\n getImageName() {\n return this._graphics.getImageName();\n }\n\n /**\n * Clear undoStack\n * @example\n * imageEditor.clearUndoStack();\n */\n clearUndoStack() {\n this._invoker.clearUndoStack();\n }\n\n /**\n * Clear redoStack\n * @example\n * imageEditor.clearRedoStack();\n */\n clearRedoStack() {\n this._invoker.clearRedoStack();\n }\n\n /**\n * Whehter the undo stack is empty or not\n * @returns {boolean}\n * imageEditor.isEmptyUndoStack();\n */\n isEmptyUndoStack() {\n return this._invoker.isEmptyUndoStack();\n }\n\n /**\n * Whehter the redo stack is empty or not\n * @returns {boolean}\n * imageEditor.isEmptyRedoStack();\n */\n isEmptyRedoStack() {\n return this._invoker.isEmptyRedoStack();\n }\n\n /**\n * Resize canvas dimension\n * @param {{width: number, height: number}} dimension - Max width & height\n * @returns {Promise}\n */\n resizeCanvasDimension(dimension) {\n if (!dimension) {\n return Promise.reject(rejectMessages.invalidParameters);\n }\n\n return this.execute(commands.RESIZE_CANVAS_DIMENSION, dimension);\n }\n\n /**\n * Destroy\n */\n destroy() {\n this.stopDrawingMode();\n this._detachDomEvents();\n this._graphics.destroy();\n this._graphics = null;\n\n if (this.ui) {\n this._detachColorPickerInputBoxEvents();\n this.ui.destroy();\n }\n\n forEach(\n this,\n (value, key) => {\n this[key] = null;\n },\n this\n );\n }\n\n /**\n * Set position\n * @param {Object} options - Position options (left or top)\n * @private\n */\n _setPositions(options) {\n const centerPosition = this._graphics.getCenter();\n\n if (isUndefined(options.left)) {\n options.left = centerPosition.left;\n }\n\n if (isUndefined(options.top)) {\n options.top = centerPosition.top;\n }\n }\n\n /**\n * Set properties of active object\n * @param {number} id - object id\n * @param {Object} keyValue - key & value\n * @returns {Promise}\n * @example\n * imageEditor.setObjectProperties(id, {\n * left:100,\n * top:100,\n * width: 200,\n * height: 200,\n * opacity: 0.5\n * });\n */\n setObjectProperties(id, keyValue) {\n return this.execute(commands.SET_OBJECT_PROPERTIES, id, keyValue);\n }\n\n /**\n * Set properties of active object, Do not leave an invoke history.\n * @param {number} id - object id\n * @param {Object} keyValue - key & value\n * @example\n * imageEditor.setObjectPropertiesQuietly(id, {\n * left:100,\n * top:100,\n * width: 200,\n * height: 200,\n * opacity: 0.5\n * });\n */\n setObjectPropertiesQuietly(id, keyValue) {\n this._graphics.setObjectProperties(id, keyValue);\n }\n\n /**\n * Get properties of active object corresponding key\n * @param {number} id - object id\n * @param {Array|ObjectProps|string} keys - property's key\n * @returns {ObjectProps} properties if id is valid or null\n * @example\n * var props = imageEditor.getObjectProperties(id, 'left');\n * console.log(props);\n * @example\n * var props = imageEditor.getObjectProperties(id, ['left', 'top', 'width', 'height']);\n * console.log(props);\n * @example\n * var props = imageEditor.getObjectProperties(id, {\n * left: null,\n * top: null,\n * width: null,\n * height: null,\n * opacity: null\n * });\n * console.log(props);\n */\n getObjectProperties(id, keys) {\n const object = this._graphics.getObject(id);\n if (!object) {\n return null;\n }\n\n return this._graphics.getObjectProperties(id, keys);\n }\n\n /**\n * Get the canvas size\n * @returns {Object} {{width: number, height: number}} canvas size\n * @example\n * var canvasSize = imageEditor.getCanvasSize();\n * console.log(canvasSize.width);\n * console.height(canvasSize.height);\n */\n getCanvasSize() {\n return this._graphics.getCanvasSize();\n }\n\n /**\n * Get object position by originX, originY\n * @param {number} id - object id\n * @param {string} originX - can be 'left', 'center', 'right'\n * @param {string} originY - can be 'top', 'center', 'bottom'\n * @returns {Object} {{x:number, y: number}} position by origin if id is valid, or null\n * @example\n * var position = imageEditor.getObjectPosition(id, 'left', 'top');\n * console.log(position);\n */\n getObjectPosition(id, originX, originY) {\n return this._graphics.getObjectPosition(id, originX, originY);\n }\n\n /**\n * Set object position by originX, originY\n * @param {number} id - object id\n * @param {Object} posInfo - position object\n * @param {number} posInfo.x - x position\n * @param {number} posInfo.y - y position\n * @param {string} posInfo.originX - can be 'left', 'center', 'right'\n * @param {string} posInfo.originY - can be 'top', 'center', 'bottom'\n * @returns {Promise}\n * @example\n * // align the object to 'left', 'top'\n * imageEditor.setObjectPosition(id, {\n * x: 0,\n * y: 0,\n * originX: 'left',\n * originY: 'top'\n * });\n * @example\n * // align the object to 'right', 'top'\n * var canvasSize = imageEditor.getCanvasSize();\n * imageEditor.setObjectPosition(id, {\n * x: canvasSize.width,\n * y: 0,\n * originX: 'right',\n * originY: 'top'\n * });\n * @example\n * // align the object to 'left', 'bottom'\n * var canvasSize = imageEditor.getCanvasSize();\n * imageEditor.setObjectPosition(id, {\n * x: 0,\n * y: canvasSize.height,\n * originX: 'left',\n * originY: 'bottom'\n * });\n * @example\n * // align the object to 'right', 'bottom'\n * var canvasSize = imageEditor.getCanvasSize();\n * imageEditor.setObjectPosition(id, {\n * x: canvasSize.width,\n * y: canvasSize.height,\n * originX: 'right',\n * originY: 'bottom'\n * });\n */\n setObjectPosition(id, posInfo) {\n return this.execute(commands.SET_OBJECT_POSITION, id, posInfo);\n }\n\n /**\n * @param {object} dimensions - Image Dimensions\n * @returns {Promise}\n */\n resize(dimensions) {\n return this.execute(commands.RESIZE_IMAGE, dimensions);\n }\n}\n\naction.mixin(ImageEditor);\nCustomEvents.mixin(ImageEditor);\n\nexport default ImageEditor;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Command interface\n */\nimport snippet from 'tui-code-snippet';\nimport errorMessage from '@/factory/errorMessage';\n\nconst createMessage = errorMessage.create;\nconst errorTypes = errorMessage.types;\n\n/**\n * Command class\n * @class\n * @param {{name:function, execute: function, undo: function,\n * executeCallback: function, undoCallback: function}} actions - Command actions\n * @param {Array} args - passing arguments on execute, undo\n * @ignore\n */\nclass Command {\n constructor(actions, args) {\n /**\n * command name\n * @type {string}\n */\n this.name = actions.name;\n\n /**\n * arguments\n * @type {Array}\n */\n this.args = args;\n\n /**\n * Execute function\n * @type {function}\n */\n this.execute = actions.execute;\n\n /**\n * Undo function\n * @type {function}\n */\n this.undo = actions.undo;\n\n /**\n * executeCallback\n * @type {function}\n */\n this.executeCallback = actions.executeCallback || null;\n\n /**\n * undoCallback\n * @type {function}\n */\n this.undoCallback = actions.undoCallback || null;\n\n /**\n * data for undo\n * @type {Object}\n */\n this.undoData = {};\n }\n\n /**\n * Execute action\n * @param {Object.} compMap - Components injection\n * @abstract\n */\n execute() {\n throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'execute'));\n }\n\n /**\n * Undo action\n * @param {Object.} compMap - Components injection\n * @abstract\n */\n undo() {\n throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'undo'));\n }\n\n /**\n * command for redo if undoData exists\n * @returns {boolean} isRedo\n */\n get isRedo() {\n return Object.keys(this.undoData).length > 0;\n }\n\n /**\n * Set undoData action\n * @param {Object} undoData - maked undo data\n * @param {Object} cachedUndoDataForSilent - cached undo data\n * @param {boolean} isSilent - is silent execution or not\n * @returns {Object} cachedUndoDataForSilent\n */\n setUndoData(undoData, cachedUndoDataForSilent, isSilent) {\n if (cachedUndoDataForSilent) {\n undoData = cachedUndoDataForSilent;\n }\n\n if (!isSilent) {\n snippet.extend(this.undoData, undoData);\n cachedUndoDataForSilent = null;\n } else if (!cachedUndoDataForSilent) {\n cachedUndoDataForSilent = undoData;\n }\n\n return cachedUndoDataForSilent;\n }\n\n /**\n * Attach execute callabck\n * @param {function} callback - Callback after execution\n * @returns {Command} this\n */\n setExecuteCallback(callback) {\n this.executeCallback = callback;\n\n return this;\n }\n\n /**\n * Attach undo callback\n * @param {function} callback - Callback after undo\n * @returns {Command} this\n */\n setUndoCallback(callback) {\n this.undoCallback = callback;\n\n return this;\n }\n}\n\nexport default Command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Component interface\n */\n\n/**\n * Component interface\n * @class\n * @param {string} name - component name\n * @param {Graphics} graphics - Graphics instance\n * @ignore\n */\nclass Component {\n constructor(name, graphics) {\n /**\n * Component name\n * @type {string}\n */\n this.name = name;\n\n /**\n * Graphics instance\n * @type {Graphics}\n */\n this.graphics = graphics;\n }\n\n /**\n * Fire Graphics event\n * @returns {Object} return value\n */\n fire(...args) {\n const context = this.graphics;\n\n return this.graphics.fire.apply(context, args);\n }\n\n /**\n * Save image(background) of canvas\n * @param {string} name - Name of image\n * @param {fabric.Image} oImage - Fabric image instance\n */\n setCanvasImage(name, oImage) {\n this.graphics.setCanvasImage(name, oImage);\n }\n\n /**\n * Returns canvas element of fabric.Canvas[[lower-canvas]]\n * @returns {HTMLCanvasElement}\n */\n getCanvasElement() {\n return this.graphics.getCanvasElement();\n }\n\n /**\n * Get fabric.Canvas instance\n * @returns {fabric.Canvas}\n */\n getCanvas() {\n return this.graphics.getCanvas();\n }\n\n /**\n * Get canvasImage (fabric.Image instance)\n * @returns {fabric.Image}\n */\n getCanvasImage() {\n return this.graphics.getCanvasImage();\n }\n\n /**\n * Get image name\n * @returns {string}\n */\n getImageName() {\n return this.graphics.getImageName();\n }\n\n /**\n * Get image editor\n * @returns {ImageEditor}\n */\n getEditor() {\n return this.graphics.getEditor();\n }\n\n /**\n * Return component name\n * @returns {string}\n */\n getName() {\n return this.name;\n }\n\n /**\n * Set image properties\n * @param {Object} setting - Image properties\n * @param {boolean} [withRendering] - If true, The changed image will be reflected in the canvas\n */\n setImageProperties(setting, withRendering) {\n this.graphics.setImageProperties(setting, withRendering);\n }\n\n /**\n * Set canvas dimension - css only\n * @param {Object} dimension - Canvas css dimension\n */\n setCanvasCssDimension(dimension) {\n this.graphics.setCanvasCssDimension(dimension);\n }\n\n /**\n * Set canvas dimension - css only\n * @param {Object} dimension - Canvas backstore dimension\n */\n setCanvasBackstoreDimension(dimension) {\n this.graphics.setCanvasBackstoreDimension(dimension);\n }\n\n /**\n * Adjust canvas dimension with scaling image\n */\n adjustCanvasDimension() {\n this.graphics.adjustCanvasDimension();\n }\n\n adjustCanvasDimensionBase() {\n this.graphics.adjustCanvasDimensionBase();\n }\n}\n\nexport default Component;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview DrawingMode interface\n */\nimport errorMessage from '@/factory/errorMessage';\n\nconst createMessage = errorMessage.create;\nconst errorTypes = errorMessage.types;\n\n/**\n * DrawingMode interface\n * @class\n * @param {string} name - drawing mode name\n * @ignore\n */\nclass DrawingMode {\n constructor(name) {\n /**\n * the name of drawing mode\n * @type {string}\n */\n this.name = name;\n }\n\n /**\n * Get this drawing mode name;\n * @returns {string} drawing mode name\n */\n getName() {\n return this.name;\n }\n\n /**\n * start this drawing mode\n * @param {Object} options - drawing mode options\n * @abstract\n */\n start() {\n throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'start'));\n }\n\n /**\n * stop this drawing mode\n * @abstract\n */\n end() {\n throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'stop'));\n }\n}\n\nexport default DrawingMode;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Invoker - invoke commands\n */\nimport snippet from 'tui-code-snippet';\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { eventNames, rejectMessages } from '@/consts';\n\nconst { isFunction, isString, CustomEvents } = snippet;\n\n/**\n * Invoker\n * @class\n * @ignore\n */\nclass Invoker {\n constructor() {\n /**\n * Undo stack\n * @type {Array.}\n * @private\n */\n this._undoStack = [];\n\n /**\n * Redo stack\n * @type {Array.}\n * @private\n */\n this._redoStack = [];\n\n /**\n * Lock-flag for executing command\n * @type {boolean}\n * @private\n */\n this._isLocked = false;\n\n this._isSilent = false;\n }\n\n /**\n * Invoke command execution\n * @param {Command} command - Command\n * @param {boolean} [isRedo=false] - check if command is redo\n * @returns {Promise}\n * @private\n */\n _invokeExecution(command, isRedo = false) {\n this.lock();\n\n let { args } = command;\n if (!args) {\n args = [];\n }\n\n return command\n .execute(...args)\n .then((value) => {\n if (!this._isSilent) {\n this.pushUndoStack(command);\n\n this.fire(isRedo ? eventNames.AFTER_REDO : eventNames.EXECUTE_COMMAND, command);\n }\n this.unlock();\n if (isFunction(command.executeCallback)) {\n command.executeCallback(value);\n }\n\n return value;\n })\n ['catch']((message) => {\n this.unlock();\n\n return Promise.reject(message);\n });\n }\n\n /**\n * Invoke command undo\n * @param {Command} command - Command\n * @returns {Promise}\n * @private\n */\n _invokeUndo(command) {\n this.lock();\n\n let { args } = command;\n if (!args) {\n args = [];\n }\n\n return command\n .undo(...args)\n .then((value) => {\n this.pushRedoStack(command);\n this.fire(eventNames.AFTER_UNDO, command);\n this.unlock();\n if (isFunction(command.undoCallback)) {\n command.undoCallback(value);\n }\n\n return value;\n })\n ['catch']((message) => {\n this.unlock();\n\n return Promise.reject(message);\n });\n }\n\n /**\n * fire REDO_STACK_CHANGED event\n * @private\n */\n _fireRedoStackChanged() {\n this.fire(eventNames.REDO_STACK_CHANGED, this._redoStack.length);\n }\n\n /**\n * fire UNDO_STACK_CHANGED event\n * @private\n */\n _fireUndoStackChanged() {\n this.fire(eventNames.UNDO_STACK_CHANGED, this._undoStack.length);\n }\n\n /**\n * Lock this invoker\n */\n lock() {\n this._isLocked = true;\n }\n\n /**\n * Unlock this invoker\n */\n unlock() {\n this._isLocked = false;\n }\n\n executeSilent(...args) {\n this._isSilent = true;\n\n return this.execute(...args, this._isSilent).then(() => {\n this._isSilent = false;\n });\n }\n\n /**\n * Invoke command\n * Store the command to the undoStack\n * Clear the redoStack\n * @param {String} commandName - Command name\n * @param {...*} args - Arguments for creating command\n * @returns {Promise}\n */\n execute(...args) {\n if (this._isLocked) {\n return Promise.reject(rejectMessages.isLock);\n }\n\n let [command] = args;\n if (isString(command)) {\n command = commandFactory.create(...args);\n }\n\n return this._invokeExecution(command).then((value) => {\n this.clearRedoStack();\n\n return value;\n });\n }\n\n /**\n * Undo command\n * @returns {Promise}\n */\n undo() {\n let command = this._undoStack.pop();\n let promise;\n let message = '';\n\n if (command && this._isLocked) {\n this.pushUndoStack(command, true);\n command = null;\n }\n if (command) {\n if (this.isEmptyUndoStack()) {\n this._fireUndoStackChanged();\n }\n promise = this._invokeUndo(command);\n } else {\n message = rejectMessages.undo;\n if (this._isLocked) {\n message = `${message} Because ${rejectMessages.isLock}`;\n }\n promise = Promise.reject(message);\n }\n\n return promise;\n }\n\n /**\n * Redo command\n * @returns {Promise}\n */\n redo() {\n let command = this._redoStack.pop();\n let promise;\n let message = '';\n\n if (command && this._isLocked) {\n this.pushRedoStack(command, true);\n command = null;\n }\n if (command) {\n if (this.isEmptyRedoStack()) {\n this._fireRedoStackChanged();\n }\n promise = this._invokeExecution(command, true);\n } else {\n message = rejectMessages.redo;\n if (this._isLocked) {\n message = `${message} Because ${rejectMessages.isLock}`;\n }\n promise = Promise.reject(message);\n }\n\n return promise;\n }\n\n /**\n * Push undo stack\n * @param {Command} command - command\n * @param {boolean} [isSilent] - Fire event or not\n */\n pushUndoStack(command, isSilent) {\n this._undoStack.push(command);\n if (!isSilent) {\n this._fireUndoStackChanged();\n }\n }\n\n /**\n * Push redo stack\n * @param {Command} command - command\n * @param {boolean} [isSilent] - Fire event or not\n */\n pushRedoStack(command, isSilent) {\n this._redoStack.push(command);\n if (!isSilent) {\n this._fireRedoStackChanged();\n }\n }\n\n /**\n * Return whether the redoStack is empty\n * @returns {boolean}\n */\n isEmptyRedoStack() {\n return this._redoStack.length === 0;\n }\n\n /**\n * Return whether the undoStack is empty\n * @returns {boolean}\n */\n isEmptyUndoStack() {\n return this._undoStack.length === 0;\n }\n\n /**\n * Clear undoStack\n */\n clearUndoStack() {\n if (!this.isEmptyUndoStack()) {\n this._undoStack = [];\n this._fireUndoStackChanged();\n }\n }\n\n /**\n * Clear redoStack\n */\n clearRedoStack() {\n if (!this.isEmptyRedoStack()) {\n this._redoStack = [];\n this._fireRedoStackChanged();\n }\n }\n}\n\nCustomEvents.mixin(Invoker);\n\nexport default Invoker;\n","// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest\n// Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/if (!Element.prototype.matches)\nElement.prototype.matches =\n Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;\n\nif (!Element.prototype.closest)\n Element.prototype.closest = function (s) {\n var el = this;\n if (!document.documentElement.contains(el)) return null;\n do {\n if (el.matches(s)) return el;\n el = el.parentElement || el.parentNode;\n } while (el !== null && el.nodeType === 1);\n return null;\n };\n\n/*\n * classList.js: Cross-browser full element.classList implementation.\n * 1.1.20170427\n *\n * By Eli Grey, http://eligrey.com\n * License: Dedicated to the public domain.\n * See https://github.com/eligrey/classList.js/blob/master/LICENSE.md\n */\n\n/*global self, document, DOMException */\n\n/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */\n\nif ('document' in window.self) {\n // Full polyfill for browsers with no classList support\n // Including IE < Edge missing SVGElement.classList\n if (\n !('classList' in document.createElement('_')) ||\n (document.createElementNS &&\n !('classList' in document.createElementNS('http://www.w3.org/2000/svg', 'g')))\n ) {\n (function (view) {\n 'use strict';\n\n if (!('Element' in view)) return;\n\n var classListProp = 'classList',\n protoProp = 'prototype',\n elemCtrProto = view.Element[protoProp],\n objCtr = Object,\n strTrim =\n String[protoProp].trim ||\n function () {\n return this.replace(/^\\s+|\\s+$/g, '');\n },\n arrIndexOf =\n Array[protoProp].indexOf ||\n function (item) {\n var i = 0,\n len = this.length;\n for (; i < len; i++) {\n if (i in this && this[i] === item) {\n return i;\n }\n }\n return -1;\n },\n // Vendors: please allow content code to instantiate DOMExceptions\n DOMEx = function (type, message) {\n this.name = type;\n this.code = DOMException[type];\n this.message = message;\n },\n checkTokenAndGetIndex = function (classList, token) {\n if (token === '') {\n throw new DOMEx('SYNTAX_ERR', 'An invalid or illegal string was specified');\n }\n if (/\\s/.test(token)) {\n throw new DOMEx('INVALID_CHARACTER_ERR', 'String contains an invalid character');\n }\n return arrIndexOf.call(classList, token);\n },\n ClassList = function (elem) {\n var trimmedClasses = strTrim.call(elem.getAttribute('class') || ''),\n classes = trimmedClasses ? trimmedClasses.split(/\\s+/) : [],\n i = 0,\n len = classes.length;\n for (; i < len; i++) {\n this.push(classes[i]);\n }\n this._updateClassName = function () {\n elem.setAttribute('class', this.toString());\n };\n },\n classListProto = (ClassList[protoProp] = []),\n classListGetter = function () {\n return new ClassList(this);\n };\n // Most DOMException implementations don't allow calling DOMException's toString()\n // on non-DOMExceptions. Error's toString() is sufficient here.\n DOMEx[protoProp] = Error[protoProp];\n classListProto.item = function (i) {\n return this[i] || null;\n };\n classListProto.contains = function (token) {\n token += '';\n return checkTokenAndGetIndex(this, token) !== -1;\n };\n classListProto.add = function () {\n var tokens = arguments,\n i = 0,\n l = tokens.length,\n token,\n updated = false;\n do {\n token = tokens[i] + '';\n if (checkTokenAndGetIndex(this, token) === -1) {\n this.push(token);\n updated = true;\n }\n } while (++i < l);\n\n if (updated) {\n this._updateClassName();\n }\n };\n classListProto.remove = function () {\n var tokens = arguments,\n i = 0,\n l = tokens.length,\n token,\n updated = false,\n index;\n do {\n token = tokens[i] + '';\n index = checkTokenAndGetIndex(this, token);\n while (index !== -1) {\n this.splice(index, 1);\n updated = true;\n index = checkTokenAndGetIndex(this, token);\n }\n } while (++i < l);\n\n if (updated) {\n this._updateClassName();\n }\n };\n classListProto.toggle = function (token, force) {\n token += '';\n\n var result = this.contains(token),\n method = result ? force !== true && 'remove' : force !== false && 'add';\n if (method) {\n this[method](token);\n }\n\n if (force === true || force === false) {\n return force;\n } else {\n return !result;\n }\n };\n classListProto.toString = function () {\n return this.join(' ');\n };\n\n if (objCtr.defineProperty) {\n var classListPropDesc = {\n get: classListGetter,\n enumerable: true,\n configurable: true,\n };\n try {\n objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);\n } catch (ex) {\n // IE 8 doesn't support enumerable:true\n // adding undefined to fight this issue https://github.com/eligrey/classList.js/issues/36\n // modernie IE8-MSW7 machine has IE8 8.0.6001.18702 and is affected\n if (ex.number === undefined || ex.number === -0x7ff5ec54) {\n classListPropDesc.enumerable = false;\n objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);\n }\n }\n } else if (objCtr[protoProp].__defineGetter__) {\n elemCtrProto.__defineGetter__(classListProp, classListGetter);\n }\n })(window.self);\n }\n\n // There is full or partial native classList support, so just check if we need\n // to normalize the add/remove and toggle APIs.\n\n (function () {\n 'use strict';\n\n var testElement = document.createElement('_');\n\n testElement.classList.add('c1', 'c2');\n\n // Polyfill for IE 10/11 and Firefox <26, where classList.add and\n // classList.remove exist but support only one argument at a time.\n if (!testElement.classList.contains('c2')) {\n var createMethod = function (method) {\n var original = DOMTokenList.prototype[method];\n\n DOMTokenList.prototype[method] = function (token) {\n var i,\n len = arguments.length;\n\n for (i = 0; i < len; i++) {\n token = arguments[i];\n original.call(this, token);\n }\n };\n };\n createMethod('add');\n createMethod('remove');\n }\n\n testElement.classList.toggle('c3', false);\n\n // Polyfill for IE 10 and Firefox <24, where classList.toggle does not\n // support the second argument.\n if (testElement.classList.contains('c3')) {\n var _toggle = DOMTokenList.prototype.toggle;\n\n DOMTokenList.prototype.toggle = function (token, force) {\n if (1 in arguments && !this.contains(token) === !force) {\n return force;\n } else {\n return _toggle.call(this, token);\n }\n };\n }\n\n testElement = null;\n })();\n}\n\n/*!\n * @copyright Copyright (c) 2017 IcoMoon.io\n * @license Licensed under MIT license\n * See https://github.com/Keyamoon/svgxuse\n * @version 1.2.6\n */\n/*jslint browser: true */\n/*global XDomainRequest, MutationObserver, window */\n(function () {\n 'use strict';\n if (typeof window !== 'undefined' && window.addEventListener) {\n var cache = Object.create(null); // holds xhr objects to prevent multiple requests\n var checkUseElems;\n var tid; // timeout id\n var debouncedCheck = function () {\n clearTimeout(tid);\n tid = setTimeout(checkUseElems, 100);\n };\n var unobserveChanges = function () {\n return;\n };\n var observeChanges = function () {\n var observer;\n window.addEventListener('resize', debouncedCheck, false);\n window.addEventListener('orientationchange', debouncedCheck, false);\n if (window.MutationObserver) {\n observer = new MutationObserver(debouncedCheck);\n observer.observe(document.documentElement, {\n childList: true,\n subtree: true,\n attributes: true,\n });\n unobserveChanges = function () {\n try {\n observer.disconnect();\n window.removeEventListener('resize', debouncedCheck, false);\n window.removeEventListener('orientationchange', debouncedCheck, false);\n } catch (ignore) {}\n };\n } else {\n document.documentElement.addEventListener('DOMSubtreeModified', debouncedCheck, false);\n unobserveChanges = function () {\n document.documentElement.removeEventListener('DOMSubtreeModified', debouncedCheck, false);\n window.removeEventListener('resize', debouncedCheck, false);\n window.removeEventListener('orientationchange', debouncedCheck, false);\n };\n }\n };\n var createRequest = function (url) {\n // In IE 9, cross origin requests can only be sent using XDomainRequest.\n // XDomainRequest would fail if CORS headers are not set.\n // Therefore, XDomainRequest should only be used with cross origin requests.\n function getOrigin(loc) {\n var a;\n if (loc.protocol !== undefined) {\n a = loc;\n } else {\n a = document.createElement('a');\n a.href = loc;\n }\n return a.protocol.replace(/:/g, '') + a.host;\n }\n var Request;\n var origin;\n var origin2;\n if (window.XMLHttpRequest) {\n Request = new XMLHttpRequest();\n origin = getOrigin(location);\n origin2 = getOrigin(url);\n if (Request.withCredentials === undefined && origin2 !== '' && origin2 !== origin) {\n Request = XDomainRequest || undefined;\n } else {\n Request = XMLHttpRequest;\n }\n }\n return Request;\n };\n var xlinkNS = 'http://www.w3.org/1999/xlink';\n checkUseElems = function () {\n var base;\n var bcr;\n var fallback = ''; // optional fallback URL in case no base path to SVG file was given and no symbol definition was found.\n var hash;\n var href;\n var i;\n var inProgressCount = 0;\n var isHidden;\n var Request;\n var url;\n var uses;\n var xhr;\n function observeIfDone() {\n // If done with making changes, start watching for chagnes in DOM again\n inProgressCount -= 1;\n if (inProgressCount === 0) {\n // if all xhrs were resolved\n unobserveChanges(); // make sure to remove old handlers\n observeChanges(); // watch for changes to DOM\n }\n }\n function attrUpdateFunc(spec) {\n return function () {\n if (cache[spec.base] !== true) {\n spec.useEl.setAttributeNS(xlinkNS, 'xlink:href', '#' + spec.hash);\n if (spec.useEl.hasAttribute('href')) {\n spec.useEl.setAttribute('href', '#' + spec.hash);\n }\n }\n };\n }\n function onloadFunc(xhr) {\n return function () {\n var body = document.body;\n var x = document.createElement('x');\n var svg;\n xhr.onload = null;\n x.innerHTML = xhr.responseText;\n svg = x.getElementsByTagName('svg')[0];\n if (svg) {\n svg.setAttribute('aria-hidden', 'true');\n svg.style.position = 'absolute';\n svg.style.width = 0;\n svg.style.height = 0;\n svg.style.overflow = 'hidden';\n body.insertBefore(svg, body.firstChild);\n }\n observeIfDone();\n };\n }\n function onErrorTimeout(xhr) {\n return function () {\n xhr.onerror = null;\n xhr.ontimeout = null;\n observeIfDone();\n };\n }\n unobserveChanges(); // stop watching for changes to DOM\n // find all use elements\n uses = document.getElementsByTagName('use');\n for (i = 0; i < uses.length; i += 1) {\n try {\n bcr = uses[i].getBoundingClientRect();\n } catch (ignore) {\n // failed to get bounding rectangle of the use element\n bcr = false;\n }\n href =\n uses[i].getAttribute('href') ||\n uses[i].getAttributeNS(xlinkNS, 'href') ||\n uses[i].getAttribute('xlink:href');\n if (href && href.split) {\n url = href.split('#');\n } else {\n url = ['', ''];\n }\n base = url[0];\n hash = url[1];\n isHidden = bcr && bcr.left === 0 && bcr.right === 0 && bcr.top === 0 && bcr.bottom === 0;\n if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) {\n // the use element is empty\n // if there is a reference to an external SVG, try to fetch it\n // use the optional fallback URL if there is no reference to an external SVG\n if (fallback && !base.length && hash && !document.getElementById(hash)) {\n base = fallback;\n }\n if (uses[i].hasAttribute('href')) {\n uses[i].setAttributeNS(xlinkNS, 'xlink:href', href);\n }\n if (base.length) {\n // schedule updating xlink:href\n xhr = cache[base];\n if (xhr !== true) {\n // true signifies that prepending the SVG was not required\n setTimeout(\n attrUpdateFunc({\n useEl: uses[i],\n base: base,\n hash: hash,\n }),\n 0\n );\n }\n if (xhr === undefined) {\n Request = createRequest(base);\n if (Request !== undefined) {\n xhr = new Request();\n cache[base] = xhr;\n xhr.onload = onloadFunc(xhr);\n xhr.onerror = onErrorTimeout(xhr);\n xhr.ontimeout = onErrorTimeout(xhr);\n xhr.open('GET', base);\n xhr.send();\n inProgressCount += 1;\n }\n }\n }\n } else {\n if (!isHidden) {\n if (cache[base] === undefined) {\n // remember this URL if the use element was not empty and no request was sent\n cache[base] = true;\n } else if (cache[base].onload) {\n // if it turns out that prepending the SVG is not necessary,\n // abort the in-progress xhr.\n cache[base].abort();\n delete cache[base].onload;\n cache[base] = true;\n }\n } else if (base.length && cache[base]) {\n setTimeout(\n attrUpdateFunc({\n useEl: uses[i],\n base: base,\n hash: hash,\n }),\n 0\n );\n }\n }\n }\n uses = '';\n inProgressCount += 1;\n observeIfDone();\n };\n var winLoad;\n winLoad = function () {\n window.removeEventListener('load', winLoad, false); // to prevent memory leaks\n tid = setTimeout(checkUseElems, 0);\n };\n if (document.readyState !== 'complete') {\n // The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty.\n window.addEventListener('load', winLoad, false);\n } else {\n // No need to add a listener if the document is already loaded, initialize immediately.\n winLoad();\n }\n }\n})();\n","import snippet from 'tui-code-snippet';\nimport { getSelector, assignmentForDestroy, cls, getHistoryTitle, isSilentCommand } from '@/util';\nimport {\n ZOOM_HELP_MENUS,\n COMMAND_HELP_MENUS,\n DELETE_HELP_MENUS,\n eventNames,\n HELP_MENUS,\n} from '@/consts';\nimport mainContainer from '@/ui/template/mainContainer';\nimport controls from '@/ui/template/controls';\n\nimport Theme from '@/ui/theme/theme';\nimport Shape from '@/ui/shape';\nimport Crop from '@/ui/crop';\nimport Resize from '@/ui/resize';\nimport Flip from '@/ui/flip';\nimport Rotate from '@/ui/rotate';\nimport Text from '@/ui/text';\nimport Mask from '@/ui/mask';\nimport Icon from '@/ui/icon';\nimport Draw from '@/ui/draw';\nimport Filter from '@/ui/filter';\nimport History from '@/ui/history';\nimport Locale from '@/ui/locale/locale';\n\nconst SUB_UI_COMPONENT = {\n Shape,\n Crop,\n Resize,\n Flip,\n Rotate,\n Text,\n Mask,\n Icon,\n Draw,\n Filter,\n};\n\nconst { CustomEvents } = snippet;\n\nconst BI_EXPRESSION_MINSIZE_WHEN_TOP_POSITION = '1300';\nconst HISTORY_MENU = 'history';\nconst HISTORY_PANEL_CLASS_NAME = 'tie-panel-history';\n\nconst CLASS_NAME_ON = 'on';\nconst ZOOM_BUTTON_TYPE = {\n ZOOM_IN: 'zoomIn',\n HAND: 'hand',\n};\n\n/**\n * Default UI Class\n * @class\n * @param {string|HTMLElement} element - Wrapper's element or selector\n * @param {Object} [options] - Ui setting options\n * @param {number} options.loadImage - Init default load image\n * @param {number} options.initMenu - Init start menu\n * @param {Boolean} [options.menuBarPosition=bottom] - Let\n * @param {Boolean} [options.applyCropSelectionStyle=false] - Let\n * @param {Boolean} [options.usageStatistics=false] - Use statistics or not\n * @param {Object} [options.uiSize] - ui size of editor\n * @param {string} options.uiSize.width - width of ui\n * @param {string} options.uiSize.height - height of ui\n * @param {Object} actions - ui action instance\n */\nclass Ui {\n constructor(element, options, actions) {\n this.options = this._initializeOption(options);\n this._actions = actions;\n this.submenu = false;\n this.imageSize = {};\n this.uiSize = {};\n this._locale = new Locale(this.options.locale);\n this.theme = new Theme(this.options.theme);\n this.eventHandler = {};\n this._submenuChangeTransection = false;\n this._selectedElement = null;\n this._mainElement = null;\n this._editorElementWrap = null;\n this._editorElement = null;\n this._menuBarElement = null;\n this._subMenuElement = null;\n this._makeUiElement(element);\n this._setUiSize();\n this._initMenuEvent = false;\n\n this._makeSubMenu();\n\n this._attachHistoryEvent();\n this._attachZoomEvent();\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeUiEvent();\n this._destroyAllMenu();\n this._selectedElement.innerHTML = '';\n\n assignmentForDestroy(this);\n }\n\n /**\n * Set Default Selection for includeUI\n * @param {Object} option - imageEditor options\n * @returns {Object} - extends selectionStyle option\n * @ignore\n */\n setUiDefaultSelectionStyle(option) {\n return snippet.extend(\n {\n applyCropSelectionStyle: true,\n applyGroupSelectionStyle: true,\n selectionStyle: {\n cornerStyle: 'circle',\n cornerSize: 16,\n cornerColor: '#fff',\n cornerStrokeColor: '#fff',\n transparentCorners: false,\n lineWidth: 2,\n borderColor: '#fff',\n },\n },\n option\n );\n }\n\n /**\n * Change editor size\n * @param {Object} resizeInfo - ui & image size info\n * @param {Object} [resizeInfo.uiSize] - image size dimension\n * @param {string} resizeInfo.uiSize.width - ui width\n * @param {string} resizeInfo.uiSize.height - ui height\n * @param {Object} [resizeInfo.imageSize] - image size dimension\n * @param {Number} resizeInfo.imageSize.oldWidth - old width\n * @param {Number} resizeInfo.imageSize.oldHeight - old height\n * @param {Number} resizeInfo.imageSize.newWidth - new width\n * @param {Number} resizeInfo.imageSize.newHeight - new height\n * @example\n * // Change the image size and ui size, and change the affected ui state together.\n * imageEditor.ui.resizeEditor({\n * imageSize: {oldWidth: 100, oldHeight: 100, newWidth: 700, newHeight: 700},\n * uiSize: {width: 1000, height: 1000}\n * });\n * @example\n * // Apply the ui state while preserving the previous attribute (for example, if responsive Ui)\n * imageEditor.ui.resizeEditor();\n */\n resizeEditor({ uiSize, imageSize = this.imageSize } = {}) {\n if (imageSize !== this.imageSize) {\n this.imageSize = imageSize;\n }\n if (uiSize) {\n this._setUiSize(uiSize);\n }\n\n const { width, height } = this._getCanvasMaxDimension();\n const editorElementStyle = this._editorElement.style;\n const { menuBarPosition } = this.options;\n\n editorElementStyle.height = `${height}px`;\n editorElementStyle.width = `${width}px`;\n\n this._setEditorPosition(menuBarPosition);\n\n this._editorElementWrap.style.bottom = `0px`;\n this._editorElementWrap.style.top = `0px`;\n this._editorElementWrap.style.left = `0px`;\n this._editorElementWrap.style.width = `100%`;\n\n const selectElementClassList = this._selectedElement.classList;\n\n if (\n menuBarPosition === 'top' &&\n this._selectedElement.offsetWidth < BI_EXPRESSION_MINSIZE_WHEN_TOP_POSITION\n ) {\n selectElementClassList.add('tui-image-editor-top-optimization');\n } else {\n selectElementClassList.remove('tui-image-editor-top-optimization');\n }\n }\n\n /**\n * Toggle zoom button status\n * @param {string} type - type of zoom button\n */\n toggleZoomButtonStatus(type) {\n const targetClassList = this._buttonElements[type].classList;\n\n targetClassList.toggle(CLASS_NAME_ON);\n\n if (type === ZOOM_BUTTON_TYPE.ZOOM_IN) {\n this._buttonElements[ZOOM_BUTTON_TYPE.HAND].classList.remove(CLASS_NAME_ON);\n } else {\n this._buttonElements[ZOOM_BUTTON_TYPE.ZOOM_IN].classList.remove(CLASS_NAME_ON);\n }\n }\n\n /**\n * Turn off zoom-in button status\n */\n offZoomInButtonStatus() {\n const zoomInClassList = this._buttonElements[ZOOM_BUTTON_TYPE.ZOOM_IN].classList;\n\n zoomInClassList.remove(CLASS_NAME_ON);\n }\n\n /**\n * Change hand button status\n * @param {boolean} enabled - status to change\n */\n changeHandButtonStatus(enabled) {\n const handClassList = this._buttonElements[ZOOM_BUTTON_TYPE.HAND].classList;\n\n handClassList[enabled ? 'add' : 'remove'](CLASS_NAME_ON);\n }\n\n /**\n * Change help button status\n * @param {string} buttonType - target button type\n * @param {Boolean} enableStatus - enabled status\n * @ignore\n */\n changeHelpButtonEnabled(buttonType, enableStatus) {\n const buttonClassList = this._buttonElements[buttonType].classList;\n\n buttonClassList[enableStatus ? 'add' : 'remove']('enabled');\n }\n\n /**\n * Change delete button status\n * @param {Object} [options] - Ui setting options\n * @param {object} [options.loadImage] - Init default load image\n * @param {string} [options.initMenu] - Init start menu\n * @param {string} [options.menuBarPosition=bottom] - Let\n * @param {boolean} [options.applyCropSelectionStyle=false] - Let\n * @param {boolean} [options.usageStatistics=false] - Send statistics ping or not\n * @returns {Object} initialize option\n * @private\n */\n _initializeOption(options) {\n return snippet.extend(\n {\n loadImage: {\n path: '',\n name: '',\n },\n locale: {},\n menuIconPath: '',\n menu: [\n 'resize',\n 'crop',\n 'flip',\n 'rotate',\n 'draw',\n 'shape',\n 'icon',\n 'text',\n 'mask',\n 'filter',\n ],\n initMenu: '',\n uiSize: {\n width: '100%',\n height: '100%',\n },\n menuBarPosition: 'bottom',\n },\n options\n );\n }\n\n /**\n * Set ui container size\n * @param {Object} uiSize - ui dimension\n * @param {string} uiSize.width - css width property\n * @param {string} uiSize.height - css height property\n * @private\n */\n _setUiSize(uiSize = this.options.uiSize) {\n const elementDimension = this._selectedElement.style;\n elementDimension.width = uiSize.width;\n elementDimension.height = uiSize.height;\n }\n\n /**\n * Make submenu dom element\n * @private\n */\n _makeSubMenu() {\n snippet.forEach(this.options.menu, (menuName) => {\n const SubComponentClass =\n SUB_UI_COMPONENT[menuName.replace(/^[a-z]/, ($0) => $0.toUpperCase())];\n\n // make menu element\n this._makeMenuElement(menuName);\n\n // menu btn element\n this._buttonElements[menuName] = this._menuBarElement.querySelector(`.tie-btn-${menuName}`);\n\n // submenu ui instance\n this[menuName] = new SubComponentClass(this._subMenuElement, {\n locale: this._locale,\n makeSvgIcon: this.theme.makeMenSvgIconSet.bind(this.theme),\n menuBarPosition: this.options.menuBarPosition,\n usageStatistics: this.options.usageStatistics,\n });\n });\n }\n\n /**\n * Attach history event\n * @private\n */\n _attachHistoryEvent() {\n this.on(eventNames.EXECUTE_COMMAND, this._addHistory.bind(this));\n this.on(eventNames.AFTER_UNDO, this._selectPrevHistory.bind(this));\n this.on(eventNames.AFTER_REDO, this._selectNextHistory.bind(this));\n }\n\n /**\n * Attach zoom event\n * @private\n */\n _attachZoomEvent() {\n this.on(eventNames.HAND_STARTED, () => {\n this.offZoomInButtonStatus();\n this.changeHandButtonStatus(true);\n });\n this.on(eventNames.HAND_STOPPED, () => this.changeHandButtonStatus(false));\n }\n\n /**\n * Make primary ui dom element\n * @param {string|HTMLElement} element - Wrapper's element or selector\n * @private\n */\n _makeUiElement(element) {\n let selectedElement;\n\n window.snippet = snippet;\n\n if (element.nodeType) {\n selectedElement = element;\n } else {\n selectedElement = document.querySelector(element);\n }\n const selector = getSelector(selectedElement);\n\n selectedElement.classList.add('tui-image-editor-container');\n selectedElement.innerHTML =\n controls({\n locale: this._locale,\n biImage: this.theme.getStyle('common.bi'),\n loadButtonStyle: this.theme.getStyle('loadButton'),\n downloadButtonStyle: this.theme.getStyle('downloadButton'),\n menuBarPosition: this.options.menuBarPosition,\n }) +\n mainContainer({\n locale: this._locale,\n biImage: this.theme.getStyle('common.bi'),\n commonStyle: this.theme.getStyle('common'),\n headerStyle: this.theme.getStyle('header'),\n loadButtonStyle: this.theme.getStyle('loadButton'),\n downloadButtonStyle: this.theme.getStyle('downloadButton'),\n submenuStyle: this.theme.getStyle('submenu'),\n });\n\n this._selectedElement = selectedElement;\n this._selectedElement.classList.add(this.options.menuBarPosition);\n\n this._mainElement = selector('.tui-image-editor-main');\n this._editorElementWrap = selector('.tui-image-editor-wrap');\n this._editorElement = selector('.tui-image-editor');\n this._helpMenuBarElement = selector('.tui-image-editor-help-menu');\n this._menuBarElement = selector('.tui-image-editor-menu');\n this._subMenuElement = selector('.tui-image-editor-submenu');\n this._buttonElements = {\n download: this._selectedElement.querySelectorAll('.tui-image-editor-download-btn'),\n load: this._selectedElement.querySelectorAll('.tui-image-editor-load-btn'),\n };\n\n this._addHelpMenus();\n\n this._historyMenu = new History(this._buttonElements[HISTORY_MENU], {\n locale: this._locale,\n makeSvgIcon: this.theme.makeMenSvgIconSet.bind(this.theme),\n });\n\n this._activateZoomMenus();\n }\n\n /**\n * Activate help menus for zoom.\n * @private\n */\n _activateZoomMenus() {\n snippet.forEach(ZOOM_HELP_MENUS, (menu) => {\n this.changeHelpButtonEnabled(menu, true);\n });\n }\n\n /**\n * make array for help menu output, including partitions.\n * @returns {Array}\n * @private\n */\n _makeHelpMenuWithPartition() {\n return [...ZOOM_HELP_MENUS, '', ...COMMAND_HELP_MENUS, '', ...DELETE_HELP_MENUS];\n }\n\n /**\n * Add help menu\n * @private\n */\n _addHelpMenus() {\n const helpMenuWithPartition = this._makeHelpMenuWithPartition();\n\n snippet.forEach(helpMenuWithPartition, (menuName) => {\n if (!menuName) {\n this._makeMenuPartitionElement();\n } else {\n this._makeMenuElement(menuName, ['normal', 'disabled', 'hover'], 'help');\n\n this._buttonElements[menuName] = this._helpMenuBarElement.querySelector(\n `.tie-btn-${menuName}`\n );\n }\n });\n }\n\n /**\n * Make menu partition element\n * @private\n */\n _makeMenuPartitionElement() {\n const partitionElement = document.createElement('li');\n const partitionInnerElement = document.createElement('div');\n partitionElement.className = cls('item');\n partitionInnerElement.className = cls('icpartition');\n partitionElement.appendChild(partitionInnerElement);\n\n this._helpMenuBarElement.appendChild(partitionElement);\n }\n\n /**\n * Make menu button element\n * @param {string} menuName - menu name\n * @param {Array} useIconTypes - Possible values are \\['normal', 'active', 'hover', 'disabled'\\]\n * @param {string} menuType - 'normal' or 'help'\n * @private\n */\n _makeMenuElement(menuName, useIconTypes = ['normal', 'active', 'hover'], menuType = 'normal') {\n const btnElement = document.createElement('li');\n const menuItemHtml = this.theme.makeMenSvgIconSet(useIconTypes, menuName);\n\n this._addTooltipAttribute(btnElement, menuName);\n btnElement.className = `tie-btn-${menuName} ${cls('item')} ${menuType}`;\n btnElement.innerHTML = menuItemHtml;\n\n if (menuType === 'normal') {\n this._menuBarElement.appendChild(btnElement);\n } else {\n this._helpMenuBarElement.appendChild(btnElement);\n }\n }\n\n /**\n * Add help action event\n * @private\n */\n _addHelpActionEvent() {\n snippet.forEach(HELP_MENUS, (helpName) => {\n this.eventHandler[helpName] = (event) => this._actions.main[helpName](event);\n this._buttonElements[helpName].addEventListener('click', this.eventHandler[helpName]);\n });\n }\n\n /**\n * Remove help action event\n * @private\n */\n _removeHelpActionEvent() {\n snippet.forEach(HELP_MENUS, (helpName) => {\n this._buttonElements[helpName].removeEventListener('click', this.eventHandler[helpName]);\n });\n }\n\n /**\n * Add history\n * @param {Command|string} command - command or command name\n */\n _addHistory(command) {\n if (!isSilentCommand(command)) {\n const historyTitle =\n typeof command === 'string' ? { name: command } : getHistoryTitle(command);\n\n this._historyMenu.add(historyTitle);\n }\n }\n\n /**\n * Init history\n */\n initHistory() {\n this._historyMenu.init();\n }\n\n /**\n * Clear history\n */\n clearHistory() {\n this._historyMenu.clear();\n }\n\n /**\n * Select prev history\n */\n _selectPrevHistory() {\n this._historyMenu.prev();\n }\n\n /**\n * Select next history\n */\n _selectNextHistory() {\n this._historyMenu.next();\n }\n\n /**\n * Toggle history menu\n * @param {object} event - event object\n */\n toggleHistoryMenu(event) {\n const { target } = event;\n const item = target.closest(`.${HISTORY_PANEL_CLASS_NAME}`);\n\n if (item) {\n return;\n }\n\n const historyButtonClassList = this._buttonElements[HISTORY_MENU].classList;\n\n historyButtonClassList.toggle('opened');\n }\n\n /**\n * Add attribute for menu tooltip\n * @param {HTMLElement} element - menu element\n * @param {string} tooltipName - tooltipName\n * @private\n */\n _addTooltipAttribute(element, tooltipName) {\n element.setAttribute(\n 'tooltip-content',\n this._locale.localize(tooltipName.replace(/^[a-z]/g, ($0) => $0.toUpperCase()))\n );\n }\n\n /**\n * Add download event\n * @private\n */\n _addDownloadEvent() {\n this.eventHandler.download = () => this._actions.main.download();\n snippet.forEach(this._buttonElements.download, (element) => {\n element.addEventListener('click', this.eventHandler.download);\n });\n }\n\n _removeDownloadEvent() {\n snippet.forEach(this._buttonElements.download, (element) => {\n element.removeEventListener('click', this.eventHandler.download);\n });\n }\n\n /**\n * Add load event\n * @private\n */\n _addLoadEvent() {\n this.eventHandler.loadImage = (event) => this._actions.main.load(event.target.files[0]);\n\n snippet.forEach(this._buttonElements.load, (element) => {\n element.addEventListener('change', this.eventHandler.loadImage);\n });\n }\n\n /**\n * Remove load event\n * @private\n */\n _removeLoadEvent() {\n snippet.forEach(this._buttonElements.load, (element) => {\n element.removeEventListener('change', this.eventHandler.loadImage);\n });\n }\n\n /**\n * Add menu event\n * @param {string} menuName - menu name\n * @private\n */\n _addMainMenuEvent(menuName) {\n this.eventHandler[menuName] = () => this.changeMenu(menuName);\n this._buttonElements[menuName].addEventListener('click', this.eventHandler[menuName]);\n }\n\n /**\n * Add menu event\n * @param {string} menuName - menu name\n * @private\n */\n _addSubMenuEvent(menuName) {\n this[menuName].addEvent(this._actions[menuName]);\n this[menuName].on(eventNames.INPUT_BOX_EDITING_STARTED, () =>\n this.fire(eventNames.INPUT_BOX_EDITING_STARTED)\n );\n this[menuName].on(eventNames.INPUT_BOX_EDITING_STOPPED, () =>\n this.fire(eventNames.INPUT_BOX_EDITING_STOPPED)\n );\n }\n\n /**\n * Add menu event\n * @private\n */\n _addMenuEvent() {\n snippet.forEach(this.options.menu, (menuName) => {\n this._addMainMenuEvent(menuName);\n this._addSubMenuEvent(menuName);\n });\n }\n\n /**\n * Remove menu event\n * @private\n */\n _removeMainMenuEvent() {\n snippet.forEach(this.options.menu, (menuName) => {\n this._buttonElements[menuName].removeEventListener('click', this.eventHandler[menuName]);\n this[menuName].off(eventNames.INPUT_BOX_EDITING_STARTED);\n this[menuName].off(eventNames.INPUT_BOX_EDITING_STOPPED);\n });\n }\n\n /**\n * Get editor area element\n * @returns {HTMLElement} editor area html element\n * @ignore\n */\n getEditorArea() {\n return this._editorElement;\n }\n\n /**\n * Add event for menu items\n * @ignore\n */\n activeMenuEvent() {\n if (this._initMenuEvent) {\n return;\n }\n\n this._addHelpActionEvent();\n this._addDownloadEvent();\n this._addMenuEvent();\n this._initMenu();\n this._historyMenu.addEvent(this._actions.history);\n this._initMenuEvent = true;\n }\n\n /**\n * Remove ui event\n * @private\n */\n _removeUiEvent() {\n this._removeHelpActionEvent();\n this._removeDownloadEvent();\n this._removeLoadEvent();\n this._removeMainMenuEvent();\n this._historyMenu.removeEvent();\n }\n\n /**\n * Destroy all menu instance\n * @private\n */\n _destroyAllMenu() {\n snippet.forEach(this.options.menu, (menuName) => {\n this[menuName].destroy();\n });\n\n this._historyMenu.destroy();\n }\n\n /**\n * Init canvas\n * @ignore\n */\n initCanvas() {\n const loadImageInfo = this._getLoadImage();\n if (loadImageInfo.path) {\n this._actions.main.initLoadImage(loadImageInfo.path, loadImageInfo.name).then(() => {\n this.activeMenuEvent();\n });\n }\n\n this._addLoadEvent();\n\n const gridVisual = document.createElement('div');\n\n gridVisual.className = cls('grid-visual');\n const grid = `\n \n \n \n
          `;\n gridVisual.innerHTML = grid;\n this._editorContainerElement = this._editorElement.querySelector(\n '.tui-image-editor-canvas-container'\n );\n this._editorContainerElement.appendChild(gridVisual);\n }\n\n /**\n * get editor area element\n * @returns {Object} load image option\n * @private\n */\n _getLoadImage() {\n return this.options.loadImage;\n }\n\n /**\n * change menu\n * @param {string} menuName - menu name\n * @param {boolean} toggle - whether toogle or not\n * @param {boolean} discardSelection - discard selection\n * @ignore\n */\n changeMenu(menuName, toggle = true, discardSelection = true) {\n if (!this._submenuChangeTransection) {\n this._submenuChangeTransection = true;\n this._changeMenu(menuName, toggle, discardSelection);\n this._submenuChangeTransection = false;\n }\n }\n\n /**\n * change menu\n * @param {string} menuName - menu name\n * @param {boolean} toggle - whether toggle or not\n * @param {boolean} discardSelection - discard selection\n * @private\n */\n _changeMenu(menuName, toggle, discardSelection) {\n if (this.submenu) {\n this._buttonElements[this.submenu].classList.remove('active');\n this._mainElement.classList.remove(`tui-image-editor-menu-${this.submenu}`);\n if (discardSelection) {\n this._actions.main.discardSelection();\n }\n this._actions.main.changeSelectableAll(true);\n this[this.submenu].changeStandbyMode();\n }\n\n if (this.submenu === menuName && toggle) {\n this.submenu = null;\n } else {\n this._buttonElements[menuName].classList.add('active');\n this._mainElement.classList.add(`tui-image-editor-menu-${menuName}`);\n this.submenu = menuName;\n this[this.submenu].changeStartMode();\n }\n\n this.resizeEditor();\n }\n\n /**\n * Init menu\n * @private\n */\n _initMenu() {\n if (this.options.initMenu) {\n const evt = document.createEvent('MouseEvents');\n evt.initEvent('click', true, false);\n this._buttonElements[this.options.initMenu].dispatchEvent(evt);\n }\n\n if (this.icon) {\n this.icon.registerDefaultIcon();\n }\n }\n\n /**\n * Get canvas max Dimension\n * @returns {Object} - width & height of editor\n * @private\n */\n _getCanvasMaxDimension() {\n const { maxWidth, maxHeight } = this._editorContainerElement.style;\n const width = parseFloat(maxWidth);\n const height = parseFloat(maxHeight);\n\n return {\n width,\n height,\n };\n }\n\n /**\n * Set editor position\n * @param {string} menuBarPosition - top or right or bottom or left\n * @private\n */\n // eslint-disable-next-line complexity\n _setEditorPosition(menuBarPosition) {\n const { width, height } = this._getCanvasMaxDimension();\n const editorElementStyle = this._editorElement.style;\n let top = 0;\n let left = 0;\n\n if (this.submenu) {\n if (menuBarPosition === 'bottom') {\n if (height > this._editorElementWrap.scrollHeight - 150) {\n top = (height - this._editorElementWrap.scrollHeight) / 2;\n } else {\n top = (150 / 2) * -1;\n }\n } else if (menuBarPosition === 'top') {\n if (height > this._editorElementWrap.offsetHeight - 150) {\n top = 150 / 2 - (height - (this._editorElementWrap.offsetHeight - 150)) / 2;\n } else {\n top = 150 / 2;\n }\n } else if (menuBarPosition === 'left') {\n if (width > this._editorElementWrap.offsetWidth - 248) {\n left = 248 / 2 - (width - (this._editorElementWrap.offsetWidth - 248)) / 2;\n } else {\n left = 248 / 2;\n }\n } else if (menuBarPosition === 'right') {\n if (width > this._editorElementWrap.scrollWidth - 248) {\n left = (width - this._editorElementWrap.scrollWidth) / 2;\n } else {\n left = (248 / 2) * -1;\n }\n }\n }\n editorElementStyle.top = `${top}px`;\n editorElementStyle.left = `${left}px`;\n }\n}\n\nCustomEvents.mixin(Ui);\n\nexport default Ui;\n","import snippet from 'tui-code-snippet';\nimport Submenu from '@/ui/submenuBase';\nimport templateHtml from '@/ui/template/submenu/crop';\nimport { assignmentForDestroy } from '@/util';\n\n/**\n * Crop ui class\n * @class\n * @ignore\n */\nclass Crop extends Submenu {\n constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {\n super(subMenuElement, {\n locale,\n name: 'crop',\n makeSvgIcon,\n menuBarPosition,\n templateHtml,\n usageStatistics,\n });\n\n this.status = 'active';\n\n this._els = {\n apply: this.selector('.tie-crop-button .apply'),\n cancel: this.selector('.tie-crop-button .cancel'),\n preset: this.selector('.tie-crop-preset-button'),\n };\n\n this.defaultPresetButton = this._els.preset.querySelector('.preset-none');\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeEvent();\n\n assignmentForDestroy(this);\n }\n\n /**\n * Add event for crop\n * @param {Object} actions - actions for crop\n * @param {Function} actions.crop - crop action\n * @param {Function} actions.cancel - cancel action\n * @param {Function} actions.preset - draw rectzone at a predefined ratio\n */\n addEvent(actions) {\n const apply = this._applyEventHandler.bind(this);\n const cancel = this._cancelEventHandler.bind(this);\n const cropzonePreset = this._cropzonePresetEventHandler.bind(this);\n\n this.eventHandler = {\n apply,\n cancel,\n cropzonePreset,\n };\n\n this.actions = actions;\n this._els.apply.addEventListener('click', apply);\n this._els.cancel.addEventListener('click', cancel);\n this._els.preset.addEventListener('click', cropzonePreset);\n }\n\n /**\n * Remove event\n * @private\n */\n _removeEvent() {\n this._els.apply.removeEventListener('click', this.eventHandler.apply);\n this._els.cancel.removeEventListener('click', this.eventHandler.cancel);\n this._els.preset.removeEventListener('click', this.eventHandler.cropzonePreset);\n }\n\n _applyEventHandler() {\n this.actions.crop();\n this._els.apply.classList.remove('active');\n }\n\n _cancelEventHandler() {\n this.actions.cancel();\n this._els.apply.classList.remove('active');\n }\n\n _cropzonePresetEventHandler(event) {\n const button = event.target.closest('.tui-image-editor-button.preset');\n if (button) {\n const [presetType] = button.className.match(/preset-[^\\s]+/);\n\n this._setPresetButtonActive(button);\n this.actions.preset(presetType);\n }\n }\n\n /**\n * Executed when the menu starts.\n */\n changeStartMode() {\n this.actions.modeChange('crop');\n }\n\n /**\n * Returns the menu to its default state.\n */\n changeStandbyMode() {\n this.actions.stopDrawingMode();\n this._setPresetButtonActive();\n }\n\n /**\n * Change apply button status\n * @param {Boolean} enableStatus - apply button status\n */\n changeApplyButtonStatus(enableStatus) {\n if (enableStatus) {\n this._els.apply.classList.add('active');\n } else {\n this._els.apply.classList.remove('active');\n }\n }\n\n /**\n * Set preset button to active status\n * @param {HTMLElement} button - event target element\n * @private\n */\n _setPresetButtonActive(button = this.defaultPresetButton) {\n snippet.forEach([].slice.call(this._els.preset.querySelectorAll('.preset')), (presetButton) => {\n presetButton.classList.remove('active');\n });\n\n if (button) {\n button.classList.add('active');\n }\n }\n}\n\nexport default Crop;\n","import Colorpicker from '@/ui/tools/colorpicker';\nimport Range from '@/ui/tools/range';\nimport Submenu from '@/ui/submenuBase';\nimport templateHtml from '@/ui/template/submenu/draw';\nimport { assignmentForDestroy, getRgb } from '@/util';\nimport { defaultDrawRangeValues, eventNames, selectorNames } from '@/consts';\n\nconst DRAW_OPACITY = 0.7;\n\n/**\n * Draw ui class\n * @class\n * @ignore\n */\nclass Draw extends Submenu {\n constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {\n super(subMenuElement, {\n locale,\n name: 'draw',\n makeSvgIcon,\n menuBarPosition,\n templateHtml,\n usageStatistics,\n });\n\n this._els = {\n lineSelectButton: this.selector('.tie-draw-line-select-button'),\n drawColorPicker: new Colorpicker(\n this.selector('.tie-draw-color'),\n '#00a9ff',\n this.toggleDirection,\n this.usageStatistics\n ),\n drawRange: new Range(\n {\n slider: this.selector('.tie-draw-range'),\n input: this.selector('.tie-draw-range-value'),\n },\n defaultDrawRangeValues\n ),\n };\n\n this.type = null;\n this.color = this._els.drawColorPicker.color;\n this.width = this._els.drawRange.value;\n\n this.colorPickerInputBox = this._els.drawColorPicker.colorpickerElement.querySelector(\n selectorNames.COLOR_PICKER_INPUT_BOX\n );\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeEvent();\n this._els.drawColorPicker.destroy();\n this._els.drawRange.destroy();\n\n assignmentForDestroy(this);\n }\n\n /**\n * Add event for draw\n * @param {Object} actions - actions for crop\n * @param {Function} actions.setDrawMode - set draw mode\n */\n addEvent(actions) {\n this.eventHandler.changeDrawType = this._changeDrawType.bind(this);\n\n this.actions = actions;\n this._els.lineSelectButton.addEventListener('click', this.eventHandler.changeDrawType);\n this._els.drawColorPicker.on('change', this._changeDrawColor.bind(this));\n this._els.drawRange.on('change', this._changeDrawRange.bind(this));\n\n this.colorPickerInputBox.addEventListener(\n eventNames.FOCUS,\n this._onStartEditingInputBox.bind(this)\n );\n this.colorPickerInputBox.addEventListener(\n eventNames.BLUR,\n this._onStopEditingInputBox.bind(this)\n );\n }\n\n /**\n * Remove event\n * @private\n */\n _removeEvent() {\n this._els.lineSelectButton.removeEventListener('click', this.eventHandler.changeDrawType);\n this._els.drawColorPicker.off();\n this._els.drawRange.off();\n\n this.colorPickerInputBox.removeEventListener(\n eventNames.FOCUS,\n this._onStartEditingInputBox.bind(this)\n );\n this.colorPickerInputBox.removeEventListener(\n eventNames.BLUR,\n this._onStopEditingInputBox.bind(this)\n );\n }\n\n /**\n * set draw mode - action runner\n */\n setDrawMode() {\n this.actions.setDrawMode(this.type, {\n width: this.width,\n color: getRgb(this.color, DRAW_OPACITY),\n });\n }\n\n /**\n * Returns the menu to its default state.\n */\n changeStandbyMode() {\n this.type = null;\n this.actions.stopDrawingMode();\n this.actions.changeSelectableAll(true);\n this._els.lineSelectButton.classList.remove('free');\n this._els.lineSelectButton.classList.remove('line');\n }\n\n /**\n * Executed when the menu starts.\n */\n changeStartMode() {\n this.type = 'free';\n this._els.lineSelectButton.classList.add('free');\n this.setDrawMode();\n }\n\n /**\n * Change draw type event\n * @param {object} event - line select event\n * @private\n */\n _changeDrawType(event) {\n const button = event.target.closest('.tui-image-editor-button');\n if (button) {\n const lineType = this.getButtonType(button, ['free', 'line']);\n this.actions.discardSelection();\n\n if (this.type === lineType) {\n this.changeStandbyMode();\n\n return;\n }\n\n this.changeStandbyMode();\n this.type = lineType;\n this._els.lineSelectButton.classList.add(lineType);\n this.setDrawMode();\n }\n }\n\n /**\n * Change drawing color\n * @param {string} color - select drawing color\n * @private\n */\n _changeDrawColor(color) {\n this.color = color || 'transparent';\n if (!this.type) {\n this.changeStartMode();\n } else {\n this.setDrawMode();\n }\n }\n\n /**\n * Change drawing Range\n * @param {number} value - select drawing range\n * @private\n */\n _changeDrawRange(value) {\n this.width = value;\n if (!this.type) {\n this.changeStartMode();\n } else {\n this.setDrawMode();\n }\n }\n}\n\nexport default Draw;\n","import snippet from 'tui-code-snippet';\nimport Colorpicker from '@/ui/tools/colorpicker';\nimport Range from '@/ui/tools/range';\nimport Submenu from '@/ui/submenuBase';\nimport templateHtml from '@/ui/template/submenu/filter';\nimport { toInteger, toCamelCase, assignmentForDestroy } from '@/util';\nimport { defaultFilterRangeValues as FILTER_RANGE, eventNames, selectorNames } from '@/consts';\n\nconst PICKER_CONTROL_HEIGHT = '130px';\nconst BLEND_OPTIONS = ['add', 'diff', 'subtract', 'multiply', 'screen', 'lighten', 'darken'];\nconst FILTER_OPTIONS = [\n 'grayscale',\n 'invert',\n 'sepia',\n 'vintage',\n 'blur',\n 'sharpen',\n 'emboss',\n 'remove-white',\n 'brightness',\n 'noise',\n 'pixelate',\n 'color-filter',\n 'tint',\n 'multiply',\n 'blend',\n];\nconst filterNameMap = {\n grayscale: 'grayscale',\n invert: 'invert',\n sepia: 'sepia',\n blur: 'blur',\n sharpen: 'sharpen',\n emboss: 'emboss',\n removeWhite: 'removeColor',\n brightness: 'brightness',\n contrast: 'contrast',\n saturation: 'saturation',\n vintage: 'vintage',\n polaroid: 'polaroid',\n noise: 'noise',\n pixelate: 'pixelate',\n colorFilter: 'removeColor',\n tint: 'blendColor',\n multiply: 'blendColor',\n blend: 'blendColor',\n hue: 'hue',\n gamma: 'gamma',\n};\nconst RANGE_INSTANCE_NAMES = [\n 'removewhiteDistanceRange',\n 'colorfilterThresholdRange',\n 'pixelateRange',\n 'noiseRange',\n 'brightnessRange',\n 'tintOpacity',\n];\nconst COLORPICKER_INSTANCE_NAMES = ['filterBlendColor', 'filterMultiplyColor', 'filterTintColor'];\n\n/**\n * Filter ui class\n * @class\n * @ignore\n */\nclass Filter extends Submenu {\n constructor(subMenuElement, { locale, menuBarPosition, usageStatistics }) {\n super(subMenuElement, {\n locale,\n name: 'filter',\n menuBarPosition,\n templateHtml,\n usageStatistics,\n });\n\n this.selectBoxShow = false;\n\n this.checkedMap = {};\n this._makeControlElement();\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeEvent();\n this._destroyToolInstance();\n\n assignmentForDestroy(this);\n }\n\n /**\n * Remove event for filter\n */\n _removeEvent() {\n snippet.forEach(FILTER_OPTIONS, (filter) => {\n const filterCheckElement = this.selector(`.tie-${filter}`);\n const filterNameCamelCase = toCamelCase(filter);\n\n filterCheckElement.removeEventListener('change', this.eventHandler[filterNameCamelCase]);\n });\n\n snippet.forEach([...RANGE_INSTANCE_NAMES, ...COLORPICKER_INSTANCE_NAMES], (instanceName) => {\n this._els[instanceName].off();\n });\n\n this._els.blendType.removeEventListener('change', this.eventHandler.changeBlendFilter);\n this._els.blendType.removeEventListener('click', this.eventHandler.changeBlendFilter);\n\n snippet.forEachArray(\n this.colorPickerInputBoxes,\n (inputBox) => {\n inputBox.removeEventListener(eventNames.FOCUS, this._onStartEditingInputBox.bind(this));\n inputBox.removeEventListener(eventNames.BLUR, this._onStopEditingInputBox.bind(this));\n },\n this\n );\n }\n\n _destroyToolInstance() {\n snippet.forEach([...RANGE_INSTANCE_NAMES, ...COLORPICKER_INSTANCE_NAMES], (instanceName) => {\n this._els[instanceName].destroy();\n });\n }\n\n /**\n * Add event for filter\n * @param {Object} actions - actions for crop\n * @param {Function} actions.applyFilter - apply filter option\n */\n addEvent({ applyFilter }) {\n const changeFilterState = (filterName) =>\n this._changeFilterState.bind(this, applyFilter, filterName);\n const changeFilterStateForRange = (filterName) => (value, isLast) =>\n this._changeFilterState(applyFilter, filterName, isLast);\n\n this.eventHandler = {\n changeBlendFilter: changeFilterState('blend'),\n blandTypeClick: (event) => event.stopPropagation(),\n };\n\n snippet.forEach(FILTER_OPTIONS, (filter) => {\n const filterCheckElement = this.selector(`.tie-${filter}`);\n const filterNameCamelCase = toCamelCase(filter);\n this.checkedMap[filterNameCamelCase] = filterCheckElement;\n this.eventHandler[filterNameCamelCase] = changeFilterState(filterNameCamelCase);\n\n filterCheckElement.addEventListener('change', this.eventHandler[filterNameCamelCase]);\n });\n\n this._els.removewhiteDistanceRange.on('change', changeFilterStateForRange('removeWhite'));\n this._els.colorfilterThresholdRange.on('change', changeFilterStateForRange('colorFilter'));\n this._els.pixelateRange.on('change', changeFilterStateForRange('pixelate'));\n this._els.noiseRange.on('change', changeFilterStateForRange('noise'));\n this._els.brightnessRange.on('change', changeFilterStateForRange('brightness'));\n\n this._els.filterBlendColor.on('change', this.eventHandler.changeBlendFilter);\n this._els.filterMultiplyColor.on('change', changeFilterState('multiply'));\n this._els.filterTintColor.on('change', changeFilterState('tint'));\n this._els.tintOpacity.on('change', changeFilterStateForRange('tint'));\n this._els.filterMultiplyColor.on('changeShow', this.colorPickerChangeShow.bind(this));\n this._els.filterTintColor.on('changeShow', this.colorPickerChangeShow.bind(this));\n this._els.filterBlendColor.on('changeShow', this.colorPickerChangeShow.bind(this));\n\n this._els.blendType.addEventListener('change', this.eventHandler.changeBlendFilter);\n this._els.blendType.addEventListener('click', this.eventHandler.blandTypeClick);\n\n snippet.forEachArray(\n this.colorPickerInputBoxes,\n (inputBox) => {\n inputBox.addEventListener(eventNames.FOCUS, this._onStartEditingInputBox.bind(this));\n inputBox.addEventListener(eventNames.BLUR, this._onStopEditingInputBox.bind(this));\n },\n this\n );\n }\n\n /**\n * Set filter for undo changed\n * @param {Object} changedFilterInfos - changed command infos\n * @param {string} type - filter type\n * @param {string} action - add or remove\n * @param {Object} options - filter options\n */\n setFilterState(changedFilterInfos) {\n const { type, options, action } = changedFilterInfos;\n const filterName = this._getFilterNameFromOptions(type, options);\n const isRemove = action === 'remove';\n\n if (!isRemove) {\n this._setFilterState(filterName, options);\n }\n\n this.checkedMap[filterName].checked = !isRemove;\n }\n\n /**\n * Init all filter's checkbox to unchecked state\n */\n initFilterCheckBoxState() {\n snippet.forEach(\n this.checkedMap,\n (filter) => {\n filter.checked = false;\n },\n this\n );\n }\n\n /**\n * Set filter for undo changed\n * @param {string} filterName - filter name\n * @param {Object} options - filter options\n * @private\n */\n // eslint-disable-next-line complexity\n _setFilterState(filterName, options) {\n if (filterName === 'colorFilter') {\n this._els.colorfilterThresholdRange.value = options.distance;\n } else if (filterName === 'removeWhite') {\n this._els.removewhiteDistanceRange.value = options.distance;\n } else if (filterName === 'pixelate') {\n this._els.pixelateRange.value = options.blocksize;\n } else if (filterName === 'brightness') {\n this._els.brightnessRange.value = options.brightness;\n } else if (filterName === 'noise') {\n this._els.noiseRange.value = options.noise;\n } else if (filterName === 'tint') {\n this._els.tintOpacity.value = options.alpha;\n this._els.filterTintColor.color = options.color;\n } else if (filterName === 'blend') {\n this._els.filterBlendColor.color = options.color;\n } else if (filterName === 'multiply') {\n this._els.filterMultiplyColor.color = options.color;\n }\n }\n\n /**\n * Get filter name\n * @param {string} type - filter type\n * @param {Object} options - filter options\n * @returns {string} filter name\n * @private\n */\n _getFilterNameFromOptions(type, options) {\n let filterName = type;\n\n if (type === 'removeColor') {\n filterName = snippet.isExisty(options.useAlpha) ? 'removeWhite' : 'colorFilter';\n } else if (type === 'blendColor') {\n filterName = {\n add: 'blend',\n multiply: 'multiply',\n tint: 'tint',\n }[options.mode];\n }\n\n return filterName;\n }\n\n /**\n * Add event for filter\n * @param {Function} applyFilter - actions for firter\n * @param {string} filterName - filter name\n * @param {boolean} [isLast] - Is last change\n */\n _changeFilterState(applyFilter, filterName, isLast = true) {\n const apply = this.checkedMap[filterName].checked;\n const type = filterNameMap[filterName];\n\n const checkboxGroup = this.checkedMap[filterName].closest('.tui-image-editor-checkbox-group');\n if (checkboxGroup) {\n if (apply) {\n checkboxGroup.classList.remove('tui-image-editor-disabled');\n } else {\n checkboxGroup.classList.add('tui-image-editor-disabled');\n }\n }\n applyFilter(apply, type, this._getFilterOption(filterName), !isLast);\n }\n\n /**\n * Get filter option\n * @param {String} type - filter type\n * @returns {Object} filter option object\n * @private\n */\n // eslint-disable-next-line complexity\n _getFilterOption(type) {\n const option = {};\n switch (type) {\n case 'removeWhite':\n option.color = '#FFFFFF';\n option.useAlpha = false;\n option.distance = parseFloat(this._els.removewhiteDistanceRange.value);\n break;\n case 'colorFilter':\n option.color = '#FFFFFF';\n option.distance = parseFloat(this._els.colorfilterThresholdRange.value);\n break;\n case 'pixelate':\n option.blocksize = toInteger(this._els.pixelateRange.value);\n break;\n case 'noise':\n option.noise = toInteger(this._els.noiseRange.value);\n break;\n case 'brightness':\n option.brightness = parseFloat(this._els.brightnessRange.value);\n break;\n case 'blend':\n option.mode = 'add';\n option.color = this._els.filterBlendColor.color;\n option.mode = this._els.blendType.value;\n break;\n case 'multiply':\n option.mode = 'multiply';\n option.color = this._els.filterMultiplyColor.color;\n break;\n case 'tint':\n option.mode = 'tint';\n option.color = this._els.filterTintColor.color;\n option.alpha = this._els.tintOpacity.value;\n break;\n case 'blur':\n option.blur = this._els.blurRange.value;\n break;\n default:\n break;\n }\n\n return option;\n }\n\n /**\n * Make submenu range and colorpicker control\n * @private\n */\n _makeControlElement() {\n this._els = {\n removewhiteDistanceRange: new Range(\n { slider: this.selector('.tie-removewhite-distance-range') },\n FILTER_RANGE.removewhiteDistanceRange\n ),\n brightnessRange: new Range(\n { slider: this.selector('.tie-brightness-range') },\n FILTER_RANGE.brightnessRange\n ),\n noiseRange: new Range({ slider: this.selector('.tie-noise-range') }, FILTER_RANGE.noiseRange),\n pixelateRange: new Range(\n { slider: this.selector('.tie-pixelate-range') },\n FILTER_RANGE.pixelateRange\n ),\n colorfilterThresholdRange: new Range(\n { slider: this.selector('.tie-colorfilter-threshold-range') },\n FILTER_RANGE.colorfilterThresholdRange\n ),\n filterTintColor: new Colorpicker(\n this.selector('.tie-filter-tint-color'),\n '#03bd9e',\n this.toggleDirection,\n this.usageStatistics\n ),\n filterMultiplyColor: new Colorpicker(\n this.selector('.tie-filter-multiply-color'),\n '#515ce6',\n this.toggleDirection,\n this.usageStatistics\n ),\n filterBlendColor: new Colorpicker(\n this.selector('.tie-filter-blend-color'),\n '#ffbb3b',\n this.toggleDirection,\n this.usageStatistics\n ),\n blurRange: FILTER_RANGE.blurFilterRange,\n };\n\n this._els.tintOpacity = this._pickerWithRange(this._els.filterTintColor.pickerControl);\n this._els.blendType = this._pickerWithSelectbox(this._els.filterBlendColor.pickerControl);\n\n this.colorPickerControls.push(this._els.filterTintColor);\n this.colorPickerControls.push(this._els.filterMultiplyColor);\n this.colorPickerControls.push(this._els.filterBlendColor);\n\n this.colorPickerInputBoxes = [];\n this.colorPickerInputBoxes.push(\n this._els.filterTintColor.colorpickerElement.querySelector(\n selectorNames.COLOR_PICKER_INPUT_BOX\n )\n );\n this.colorPickerInputBoxes.push(\n this._els.filterMultiplyColor.colorpickerElement.querySelector(\n selectorNames.COLOR_PICKER_INPUT_BOX\n )\n );\n this.colorPickerInputBoxes.push(\n this._els.filterBlendColor.colorpickerElement.querySelector(\n selectorNames.COLOR_PICKER_INPUT_BOX\n )\n );\n }\n\n /**\n * Make submenu control for picker & range mixin\n * @param {HTMLElement} pickerControl - pickerControl dom element\n * @returns {Range}\n * @private\n */\n _pickerWithRange(pickerControl) {\n const rangeWrap = document.createElement('div');\n const rangeLabel = document.createElement('label');\n const slider = document.createElement('div');\n\n slider.id = 'tie-filter-tint-opacity';\n rangeLabel.innerHTML = 'Opacity';\n rangeWrap.appendChild(rangeLabel);\n rangeWrap.appendChild(slider);\n pickerControl.appendChild(rangeWrap);\n pickerControl.style.height = PICKER_CONTROL_HEIGHT;\n\n return new Range({ slider }, FILTER_RANGE.tintOpacityRange);\n }\n\n /**\n * Make submenu control for picker & selectbox\n * @param {HTMLElement} pickerControl - pickerControl dom element\n * @returns {HTMLElement}\n * @private\n */\n _pickerWithSelectbox(pickerControl) {\n const selectlistWrap = document.createElement('div');\n const selectlist = document.createElement('select');\n const optionlist = document.createElement('ul');\n\n selectlistWrap.className = 'tui-image-editor-selectlist-wrap';\n optionlist.className = 'tui-image-editor-selectlist';\n\n selectlistWrap.appendChild(selectlist);\n selectlistWrap.appendChild(optionlist);\n\n this._makeSelectOptionList(selectlist);\n\n pickerControl.appendChild(selectlistWrap);\n pickerControl.style.height = PICKER_CONTROL_HEIGHT;\n\n this._drawSelectOptionList(selectlist, optionlist);\n this._pickerWithSelectboxForAddEvent(selectlist, optionlist);\n\n return selectlist;\n }\n\n /**\n * Make selectbox option list custom style\n * @param {HTMLElement} selectlist - selectbox element\n * @param {HTMLElement} optionlist - custom option list item element\n * @private\n */\n _drawSelectOptionList(selectlist, optionlist) {\n const options = selectlist.querySelectorAll('option');\n snippet.forEach(options, (option) => {\n const optionElement = document.createElement('li');\n optionElement.innerHTML = option.innerHTML;\n optionElement.setAttribute('data-item', option.value);\n optionlist.appendChild(optionElement);\n });\n }\n\n /**\n * custom selectbox custom event\n * @param {HTMLElement} selectlist - selectbox element\n * @param {HTMLElement} optionlist - custom option list item element\n * @private\n */\n _pickerWithSelectboxForAddEvent(selectlist, optionlist) {\n optionlist.addEventListener('click', (event) => {\n const optionValue = event.target.getAttribute('data-item');\n const fireEvent = document.createEvent('HTMLEvents');\n\n selectlist.querySelector(`[value=\"${optionValue}\"]`).selected = true;\n fireEvent.initEvent('change', true, true);\n\n selectlist.dispatchEvent(fireEvent);\n\n this.selectBoxShow = false;\n optionlist.style.display = 'none';\n });\n\n selectlist.addEventListener('mousedown', (event) => {\n event.preventDefault();\n this.selectBoxShow = !this.selectBoxShow;\n optionlist.style.display = this.selectBoxShow ? 'block' : 'none';\n optionlist.setAttribute('data-selectitem', selectlist.value);\n optionlist.querySelector(`[data-item='${selectlist.value}']`).classList.add('active');\n });\n }\n\n /**\n * Make option list for select control\n * @param {HTMLElement} selectlist - blend option select list element\n * @private\n */\n _makeSelectOptionList(selectlist) {\n snippet.forEach(BLEND_OPTIONS, (option) => {\n const selectOption = document.createElement('option');\n selectOption.setAttribute('value', option);\n selectOption.innerHTML = option.replace(/^[a-z]/, ($0) => $0.toUpperCase());\n selectlist.appendChild(selectOption);\n });\n }\n}\n\nexport default Filter;\n","import snippet from 'tui-code-snippet';\nimport Submenu from '@/ui/submenuBase';\nimport templateHtml from '@/ui/template/submenu/flip';\nimport { assignmentForDestroy } from '@/util';\n\n/**\n * Flip ui class\n * @class\n * @ignore\n */\nclass Flip extends Submenu {\n constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {\n super(subMenuElement, {\n locale,\n name: 'flip',\n makeSvgIcon,\n menuBarPosition,\n templateHtml,\n usageStatistics,\n });\n this.flipStatus = false;\n\n this._els = {\n flipButton: this.selector('.tie-flip-button'),\n };\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeEvent();\n\n assignmentForDestroy(this);\n }\n\n /**\n * Add event for flip\n * @param {Object} actions - actions for flip\n * @param {Function} actions.flip - flip action\n */\n addEvent(actions) {\n this.eventHandler.changeFlip = this._changeFlip.bind(this);\n this._actions = actions;\n this._els.flipButton.addEventListener('click', this.eventHandler.changeFlip);\n }\n\n /**\n * Remove event\n * @private\n */\n _removeEvent() {\n this._els.flipButton.removeEventListener('click', this.eventHandler.changeFlip);\n }\n\n /**\n * change Flip status\n * @param {object} event - change event\n * @private\n */\n _changeFlip(event) {\n const button = event.target.closest('.tui-image-editor-button');\n if (button) {\n const flipType = this.getButtonType(button, ['flipX', 'flipY', 'resetFlip']);\n if (!this.flipStatus && flipType === 'resetFlip') {\n return;\n }\n\n this._actions.flip(flipType).then((flipStatus) => {\n const flipClassList = this._els.flipButton.classList;\n this.flipStatus = false;\n\n flipClassList.remove('resetFlip');\n snippet.forEach(['flipX', 'flipY'], (type) => {\n flipClassList.remove(type);\n if (flipStatus[type]) {\n flipClassList.add(type);\n flipClassList.add('resetFlip');\n this.flipStatus = true;\n }\n });\n });\n }\n }\n}\n\nexport default Flip;\n","import Panel from '@/ui/panelMenu';\nimport templateHtml from '@/ui/template/submenu/history';\nimport { assignmentForDestroy } from '@/util';\n\nconst historyClassName = 'history-item';\nconst selectedClassName = 'selected-item';\nconst disabledClassName = 'disabled-item';\n\n/**\n * History ui class\n * @class\n * @ignore\n */\nclass History extends Panel {\n constructor(menuElement, { locale, makeSvgIcon }) {\n super(menuElement, { name: 'history' });\n menuElement.classList.add('enabled');\n\n this.locale = locale;\n this.makeSvgIcon = makeSvgIcon;\n this._eventHandler = {};\n this._historyIndex = this.getListLength();\n }\n\n /**\n * Add history\n * @param {string} name - name of history\n * @param {?string} detail - detail information of history\n */\n add({ name, detail }) {\n if (this._hasDisabledItem()) {\n this.deleteListItemElement(this._historyIndex + 1, this.getListLength());\n }\n\n const html = templateHtml({ locale: this.locale, makeSvgIcon: this.makeSvgIcon, name, detail });\n const item = this.makeListItemElement(html);\n\n this.pushListItemElement(item);\n this._historyIndex = this.getListLength() - 1;\n this._selectItem(this._historyIndex);\n }\n\n /**\n * Init history\n */\n init() {\n this.deleteListItemElement(1, this.getListLength());\n this._historyIndex = 0;\n this._selectItem(this._historyIndex);\n }\n\n /**\n * Clear history\n */\n clear() {\n this.deleteListItemElement(0, this.getListLength());\n this._historyIndex = -1;\n }\n\n /**\n * Select previous history of current selected history\n */\n prev() {\n this._historyIndex -= 1;\n this._selectItem(this._historyIndex);\n }\n\n /**\n * Select next history of current selected history\n */\n next() {\n this._historyIndex += 1;\n this._selectItem(this._historyIndex);\n }\n\n /**\n * Whether history menu has disabled item\n * @returns {boolean}\n */\n _hasDisabledItem() {\n return this.getListLength() - 1 > this._historyIndex;\n }\n\n /**\n * Add history menu event\n * @private\n */\n _addHistoryEventListener() {\n this._eventHandler.history = (event) => this._clickHistoryItem(event);\n this.listElement.addEventListener('click', this._eventHandler.history);\n }\n\n /**\n * Remove history menu event\n * @private\n */\n _removeHistoryEventListener() {\n this.listElement.removeEventListener('click', this._eventHandler.history);\n }\n\n /**\n * onClick history menu event listener\n * @param {object} event - event object\n * @private\n */\n _clickHistoryItem(event) {\n const { target } = event;\n const item = target.closest(`.${historyClassName}`);\n\n if (!item) {\n return;\n }\n\n const index = Number.parseInt(item.getAttribute('data-index'), 10);\n\n if (index !== this._historyIndex) {\n const count = Math.abs(index - this._historyIndex);\n\n if (index < this._historyIndex) {\n this._actions.undo(count);\n } else {\n this._actions.redo(count);\n }\n }\n }\n\n /**\n * Change item's state to selected state\n * @param {number} index - index of selected item\n */\n _selectItem(index) {\n for (let i = 0; i < this.getListLength(); i += 1) {\n this.removeClass(i, selectedClassName);\n this.removeClass(i, disabledClassName);\n if (i > index) {\n this.addClass(i, disabledClassName);\n }\n }\n this.addClass(index, selectedClassName);\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this.removeEvent();\n\n assignmentForDestroy(this);\n }\n\n /**\n * Add event for history\n * @param {Object} actions - actions for crop\n * @param {Function} actions.undo - undo action\n * @param {Function} actions.redo - redo action\n */\n addEvent(actions) {\n this._actions = actions;\n this._addHistoryEventListener();\n }\n\n /**\n * Remove event\n * @private\n */\n removeEvent() {\n this._removeHistoryEventListener();\n }\n}\n\nexport default History;\n","import snippet from 'tui-code-snippet';\nimport Colorpicker from '@/ui/tools/colorpicker';\nimport Submenu from '@/ui/submenuBase';\nimport templateHtml from '@/ui/template/submenu/icon';\nimport { isSupportFileApi, assignmentForDestroy } from '@/util';\nimport { defaultIconPath, eventNames, selectorNames } from '@/consts';\n\n/**\n * Icon ui class\n * @class\n * @ignore\n */\nclass Icon extends Submenu {\n constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {\n super(subMenuElement, {\n locale,\n name: 'icon',\n makeSvgIcon,\n menuBarPosition,\n templateHtml,\n usageStatistics,\n });\n\n this.iconType = null;\n this._iconMap = {};\n\n this._els = {\n registerIconButton: this.selector('.tie-icon-image-file'),\n addIconButton: this.selector('.tie-icon-add-button'),\n iconColorpicker: new Colorpicker(\n this.selector('.tie-icon-color'),\n '#ffbb3b',\n this.toggleDirection,\n this.usageStatistics\n ),\n };\n\n this.colorPickerInputBox = this._els.iconColorpicker.colorpickerElement.querySelector(\n selectorNames.COLOR_PICKER_INPUT_BOX\n );\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeEvent();\n this._els.iconColorpicker.destroy();\n\n assignmentForDestroy(this);\n }\n\n /**\n * Add event for icon\n * @param {Object} actions - actions for icon\n * @param {Function} actions.registerCustomIcon - register icon\n * @param {Function} actions.addIcon - add icon\n * @param {Function} actions.changeColor - change icon color\n */\n addEvent(actions) {\n const registerIcon = this._registerIconHandler.bind(this);\n const addIcon = this._addIconHandler.bind(this);\n\n this.eventHandler = {\n registerIcon,\n addIcon,\n };\n\n this.actions = actions;\n this._els.iconColorpicker.on('change', this._changeColorHandler.bind(this));\n this._els.registerIconButton.addEventListener('change', registerIcon);\n this._els.addIconButton.addEventListener('click', addIcon);\n\n this.colorPickerInputBox.addEventListener(\n eventNames.FOCUS,\n this._onStartEditingInputBox.bind(this)\n );\n this.colorPickerInputBox.addEventListener(\n eventNames.BLUR,\n this._onStopEditingInputBox.bind(this)\n );\n }\n\n /**\n * Remove event\n * @private\n */\n _removeEvent() {\n this._els.iconColorpicker.off();\n this._els.registerIconButton.removeEventListener('change', this.eventHandler.registerIcon);\n this._els.addIconButton.removeEventListener('click', this.eventHandler.addIcon);\n\n this.colorPickerInputBox.removeEventListener(\n eventNames.FOCUS,\n this._onStartEditingInputBox.bind(this)\n );\n this.colorPickerInputBox.removeEventListener(\n eventNames.BLUR,\n this._onStopEditingInputBox.bind(this)\n );\n }\n\n /**\n * Clear icon type\n */\n clearIconType() {\n this._els.addIconButton.classList.remove(this.iconType);\n this.iconType = null;\n }\n\n /**\n * Register default icon\n */\n registerDefaultIcon() {\n snippet.forEach(defaultIconPath, (path, type) => {\n this.actions.registerDefaultIcons(type, path);\n });\n }\n\n /**\n * Set icon picker color\n * @param {string} iconColor - rgb color string\n */\n setIconPickerColor(iconColor) {\n this._els.iconColorpicker.color = iconColor;\n }\n\n /**\n * Returns the menu to its default state.\n */\n changeStandbyMode() {\n this.clearIconType();\n this.actions.cancelAddIcon();\n }\n\n /**\n * Change icon color\n * @param {string} color - color for change\n * @private\n */\n _changeColorHandler(color) {\n color = color || 'transparent';\n this.actions.changeColor(color);\n }\n\n /**\n * Change icon color\n * @param {object} event - add button event object\n * @private\n */\n _addIconHandler(event) {\n const button = event.target.closest('.tui-image-editor-button');\n\n if (button) {\n const iconType = button.getAttribute('data-icontype');\n const iconColor = this._els.iconColorpicker.color;\n this.actions.discardSelection();\n this.actions.changeSelectableAll(false);\n this._els.addIconButton.classList.remove(this.iconType);\n this._els.addIconButton.classList.add(iconType);\n\n if (this.iconType === iconType) {\n this.changeStandbyMode();\n } else {\n this.actions.addIcon(iconType, iconColor);\n this.iconType = iconType;\n }\n }\n }\n\n /**\n * register icon\n * @param {object} event - file change event object\n * @private\n */\n _registerIconHandler(event) {\n let imgUrl;\n\n if (!isSupportFileApi) {\n alert('This browser does not support file-api');\n }\n\n const [file] = event.target.files;\n\n if (file) {\n imgUrl = URL.createObjectURL(file);\n this.actions.registerCustomIcon(imgUrl, file);\n }\n }\n}\n\nexport default Icon;\n","/**\n * Translate messages\n */\nclass Locale {\n /**\n * @constructor\n * @param {Object} locale - Locale object for initialise\n */\n constructor(locale) {\n this._locale = locale;\n }\n\n /**\n * localize message\n * @param {string} message - message who will be localized\n * @returns {string}\n */\n localize(message) {\n return this._locale[message] || message;\n }\n}\n\nexport default Locale;\n","import Submenu from '@/ui/submenuBase';\nimport templateHtml from '@/ui/template/submenu/mask';\nimport { assignmentForDestroy, isSupportFileApi } from '@/util';\n\n/**\n * Mask ui class\n * @class\n * @ignore\n */\nclass Mask extends Submenu {\n constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {\n super(subMenuElement, {\n locale,\n name: 'mask',\n makeSvgIcon,\n menuBarPosition,\n templateHtml,\n usageStatistics,\n });\n\n this._els = {\n applyButton: this.selector('.tie-mask-apply'),\n maskImageButton: this.selector('.tie-mask-image-file'),\n };\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeEvent();\n\n assignmentForDestroy(this);\n }\n\n /**\n * Add event for mask\n * @param {Object} actions - actions for crop\n * @param {Function} actions.loadImageFromURL - load image action\n * @param {Function} actions.applyFilter - apply filter action\n */\n addEvent(actions) {\n const loadMaskFile = this._loadMaskFile.bind(this);\n const applyMask = this._applyMask.bind(this);\n\n this.eventHandler = {\n loadMaskFile,\n applyMask,\n };\n\n this.actions = actions;\n this._els.maskImageButton.addEventListener('change', loadMaskFile);\n this._els.applyButton.addEventListener('click', applyMask);\n }\n\n /**\n * Remove event\n * @private\n */\n _removeEvent() {\n this._els.maskImageButton.removeEventListener('change', this.eventHandler.loadMaskFile);\n this._els.applyButton.removeEventListener('click', this.eventHandler.applyMask);\n }\n\n /**\n * Apply mask\n * @private\n */\n _applyMask() {\n this.actions.applyFilter();\n this._els.applyButton.classList.remove('active');\n }\n\n /**\n * Load mask file\n * @param {object} event - File change event object\n * @private\n */\n _loadMaskFile(event) {\n let imgUrl;\n\n if (!isSupportFileApi()) {\n alert('This browser does not support file-api');\n }\n\n const [file] = event.target.files;\n\n if (file) {\n imgUrl = URL.createObjectURL(file);\n this.actions.loadImageFromURL(imgUrl, file);\n this._els.applyButton.classList.add('active');\n }\n }\n}\n\nexport default Mask;\n","/**\n * Menu Panel Class\n * @class\n * @ignore\n */\n\nclass Panel {\n /**\n * @param {HTMLElement} menuElement - menu dom element\n * @param {Object} options - menu options\n * @param {string} options.name - name of panel menu\n */\n constructor(menuElement, { name }) {\n this.name = name;\n this.items = [];\n\n this.panelElement = this._makePanelElement();\n this.listElement = this._makeListElement();\n\n this.panelElement.appendChild(this.listElement);\n menuElement.appendChild(this.panelElement);\n }\n\n /**\n * Make Panel element\n * @returns {HTMLElement}\n */\n _makePanelElement() {\n const panel = document.createElement('div');\n\n panel.className = `tie-panel-${this.name}`;\n\n return panel;\n }\n\n /**\n * Make list element\n * @returns {HTMLElement} list element\n * @private\n */\n _makeListElement() {\n const list = document.createElement('ol');\n\n list.className = `${this.name}-list`;\n\n return list;\n }\n\n /**\n * Make list item element\n * @param {string} html - history list item html\n * @returns {HTMLElement} list item element\n */\n makeListItemElement(html) {\n const listItem = document.createElement('li');\n\n listItem.innerHTML = html;\n listItem.className = `${this.name}-item`;\n listItem.setAttribute('data-index', this.items.length);\n\n return listItem;\n }\n\n /**\n * Push list item element\n * @param {HTMLElement} item - list item element to add to the list\n */\n pushListItemElement(item) {\n this.listElement.appendChild(item);\n this.listElement.scrollTop += item.offsetHeight;\n this.items.push(item);\n }\n\n /**\n * Delete list item element\n * @param {number} start - start index to delete\n * @param {number} end - end index to delete\n */\n deleteListItemElement(start, end) {\n const { items } = this;\n\n for (let i = start; i < end; i += 1) {\n this.listElement.removeChild(items[i]);\n }\n items.splice(start, end - start + 1);\n }\n\n /**\n * Get list's length\n * @returns {number}\n */\n getListLength() {\n return this.items.length;\n }\n\n /**\n * Add class name of item\n * @param {number} index - index of item\n * @param {string} className - class name to add\n */\n addClass(index, className) {\n if (this.items[index]) {\n this.items[index].classList.add(className);\n }\n }\n\n /**\n * Remove class name of item\n * @param {number} index - index of item\n * @param {string} className - class name to remove\n */\n removeClass(index, className) {\n if (this.items[index]) {\n this.items[index].classList.remove(className);\n }\n }\n\n /**\n * Toggle class name of item\n * @param {number} index - index of item\n * @param {string} className - class name to remove\n */\n toggleClass(index, className) {\n if (this.items[index]) {\n this.items[index].classList.toggle(className);\n }\n }\n}\n\nexport default Panel;\n","import Submenu from '@/ui/submenuBase';\nimport templateHtml from '@/ui/template/submenu/resize';\nimport { assignmentForDestroy, toInteger } from '@/util';\nimport Range from '@/ui/tools/range';\nimport { defaultResizePixelValues } from '@/consts';\n\n/**\n * Resize ui class\n * @class\n * @ignore\n */\nclass Resize extends Submenu {\n constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {\n super(subMenuElement, {\n locale,\n name: 'resize',\n makeSvgIcon,\n menuBarPosition,\n templateHtml,\n usageStatistics,\n });\n\n this.status = 'active';\n\n this._lockState = false;\n\n /**\n * Original dimensions\n * @type {Object}\n * @private\n */\n this._originalDimensions = null;\n\n this._els = {\n widthRange: new Range(\n {\n slider: this.selector('.tie-width-range'),\n input: this.selector('.tie-width-range-value'),\n },\n defaultResizePixelValues\n ),\n heightRange: new Range(\n {\n slider: this.selector('.tie-height-range'),\n input: this.selector('.tie-height-range-value'),\n },\n defaultResizePixelValues\n ),\n lockAspectRatio: this.selector('.tie-lock-aspect-ratio'),\n apply: this.selector('.tie-resize-button .apply'),\n cancel: this.selector('.tie-resize-button .cancel'),\n };\n }\n\n /**\n * Executed when the menu starts.\n */\n changeStartMode() {\n this.actions.modeChange('resize');\n const dimensions = this.actions.getCurrentDimensions();\n\n this._originalDimensions = dimensions;\n\n this.setWidthValue(dimensions.width);\n this.setHeightValue(dimensions.height);\n }\n\n /**\n * Returns the menu to its default state.\n */\n changeStandbyMode() {\n this.actions.stopDrawingMode();\n this.actions.reset(true);\n }\n\n /**\n * Set dimension limits\n * @param {object} limits - expect dimension limits for change\n */\n setLimit(limits) {\n this._els.widthRange.min = this.calcMinValue(limits.minWidth);\n this._els.heightRange.min = this.calcMinValue(limits.minHeight);\n this._els.widthRange.max = this.calcMaxValue(limits.maxWidth);\n this._els.heightRange.max = this.calcMaxValue(limits.maxHeight);\n }\n\n /**\n * Calculate max value\n * @param {number} maxValue - max value\n * @returns {number}\n */\n calcMaxValue(maxValue) {\n if (maxValue <= 0) {\n maxValue = defaultResizePixelValues.max;\n }\n\n return maxValue;\n }\n\n /**\n * Calculate min value\n * @param {number} minValue - min value\n * @returns {number}\n */\n calcMinValue(minValue) {\n if (minValue <= 0) {\n minValue = defaultResizePixelValues.min;\n }\n\n return minValue;\n }\n\n /**\n * Set width value\n * @param {number} value - expect value for widthRange change\n * @param {boolean} trigger - fire change event control\n */\n setWidthValue(value, trigger = false) {\n this._els.widthRange.value = value;\n if (trigger) {\n this._els.widthRange.trigger('change');\n }\n }\n\n /**\n * Set height value\n * @param {number} value - expect value for heightRange change\n * @param {boolean} trigger - fire change event control\n */\n setHeightValue(value, trigger = false) {\n this._els.heightRange.value = value;\n if (trigger) {\n this._els.heightRange.trigger('change');\n }\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeEvent();\n\n assignmentForDestroy(this);\n }\n\n /**\n * Add event for resize\n * @param {Object} actions - actions for resize\n * @param {Function} actions.resize - resize action\n * @param {Function} actions.preview - preview action\n * @param {Function} actions.getCurrentDimensions - Get current dimensions action\n * @param {Function} actions.modeChange - change mode\n * @param {Function} actions.stopDrawingMode - stop drawing mode\n * @param {Function} actions.lockAspectRatio - lock aspect ratio\n * @param {Function} actions.reset - reset action\n */\n addEvent(actions) {\n this._els.widthRange.on('change', this._changeWidthRangeHandler.bind(this));\n this._els.heightRange.on('change', this._changeHeightRangeHandler.bind(this));\n this._els.lockAspectRatio.addEventListener('change', this._changeLockAspectRatio.bind(this));\n\n const apply = this._applyEventHandler.bind(this);\n const cancel = this._cancelEventHandler.bind(this);\n\n this.eventHandler = {\n apply,\n cancel,\n };\n\n this.actions = actions;\n this._els.apply.addEventListener('click', apply);\n this._els.cancel.addEventListener('click', cancel);\n }\n\n /**\n * Change width\n * @param {number} value - width range value\n * @private\n */\n _changeWidthRangeHandler(value) {\n this.actions.preview('width', toInteger(value), this._lockState);\n }\n\n /**\n * Change height\n * @param {number} value - height range value\n * @private\n */\n _changeHeightRangeHandler(value) {\n this.actions.preview('height', toInteger(value), this._lockState);\n }\n\n /**\n * Change lock aspect ratio state\n * @param {Event} event - aspect ratio check event\n * @private\n */\n _changeLockAspectRatio(event) {\n this._lockState = event.target.checked;\n this.actions.lockAspectRatio(\n this._lockState,\n defaultResizePixelValues.min,\n defaultResizePixelValues.max\n );\n }\n\n /**\n * Remove event\n * @private\n */\n _removeEvent() {\n this._els.apply.removeEventListener('click', this.eventHandler.apply);\n this._els.cancel.removeEventListener('click', this.eventHandler.cancel);\n }\n\n _applyEventHandler() {\n this.actions.resize();\n this._els.apply.classList.remove('active');\n }\n\n _cancelEventHandler() {\n this.actions.reset();\n this._els.cancel.classList.remove('active');\n }\n\n /**\n * Change apply button status\n * @param {Boolean} enableStatus - apply button status\n */\n changeApplyButtonStatus(enableStatus) {\n if (enableStatus) {\n this._els.apply.classList.add('active');\n } else {\n this._els.apply.classList.remove('active');\n }\n }\n}\n\nexport default Resize;\n","import Range from '@/ui/tools/range';\nimport Submenu from '@/ui/submenuBase';\nimport templateHtml from '@/ui/template/submenu/rotate';\nimport { toInteger, assignmentForDestroy } from '@/util';\nimport { defaultRotateRangeValues } from '@/consts';\n\nconst CLOCKWISE = 30;\nconst COUNTERCLOCKWISE = -30;\n\n/**\n * Rotate ui class\n * @class\n * @ignore\n */\nclass Rotate extends Submenu {\n constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {\n super(subMenuElement, {\n locale,\n name: 'rotate',\n makeSvgIcon,\n menuBarPosition,\n templateHtml,\n usageStatistics,\n });\n this._value = 0;\n\n this._els = {\n rotateButton: this.selector('.tie-rotate-button'),\n rotateRange: new Range(\n {\n slider: this.selector('.tie-rotate-range'),\n input: this.selector('.tie-rotate-range-value'),\n },\n defaultRotateRangeValues\n ),\n };\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeEvent();\n this._els.rotateRange.destroy();\n\n assignmentForDestroy(this);\n }\n\n setRangeBarAngle(type, angle) {\n let resultAngle = angle;\n\n if (type === 'rotate') {\n resultAngle = parseInt(this._els.rotateRange.value, 10) + angle;\n }\n\n this._setRangeBarRatio(resultAngle);\n }\n\n _setRangeBarRatio(angle) {\n this._els.rotateRange.value = angle;\n }\n\n /**\n * Add event for rotate\n * @param {Object} actions - actions for crop\n * @param {Function} actions.rotate - rotate action\n * @param {Function} actions.setAngle - set angle action\n */\n addEvent(actions) {\n this.eventHandler.rotationAngleChanged = this._changeRotateForButton.bind(this);\n\n // {rotate, setAngle}\n this.actions = actions;\n this._els.rotateButton.addEventListener('click', this.eventHandler.rotationAngleChanged);\n this._els.rotateRange.on('change', this._changeRotateForRange.bind(this));\n }\n\n /**\n * Remove event\n * @private\n */\n _removeEvent() {\n this._els.rotateButton.removeEventListener('click', this.eventHandler.rotationAngleChanged);\n this._els.rotateRange.off();\n }\n\n /**\n * Change rotate for range\n * @param {number} value - angle value\n * @param {boolean} isLast - Is last change\n * @private\n */\n _changeRotateForRange(value, isLast) {\n const angle = toInteger(value);\n this.actions.setAngle(angle, !isLast);\n this._value = angle;\n }\n\n /**\n * Change rotate for button\n * @param {object} event - add button event object\n * @private\n */\n _changeRotateForButton(event) {\n const button = event.target.closest('.tui-image-editor-button');\n const angle = this._els.rotateRange.value;\n\n if (button) {\n const rotateType = this.getButtonType(button, ['counterclockwise', 'clockwise']);\n const rotateAngle = {\n clockwise: CLOCKWISE,\n counterclockwise: COUNTERCLOCKWISE,\n }[rotateType];\n const newAngle = parseInt(angle, 10) + rotateAngle;\n const isRotatable = newAngle >= -360 && newAngle <= 360;\n if (isRotatable) {\n this.actions.rotate(rotateAngle);\n }\n }\n }\n}\n\nexport default Rotate;\n","import snippet from 'tui-code-snippet';\nimport Colorpicker from '@/ui/tools/colorpicker';\nimport Range from '@/ui/tools/range';\nimport Submenu from '@/ui/submenuBase';\nimport templateHtml from '@/ui/template/submenu/shape';\nimport { toInteger, assignmentForDestroy } from '@/util';\nimport { defaultShapeStrokeValues, eventNames, selectorNames } from '@/consts';\n\nconst SHAPE_DEFAULT_OPTION = {\n stroke: '#ffbb3b',\n fill: '',\n strokeWidth: 3,\n};\n\n/**\n * Shape ui class\n * @class\n * @ignore\n */\nclass Shape extends Submenu {\n constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {\n super(subMenuElement, {\n locale,\n name: 'shape',\n makeSvgIcon,\n menuBarPosition,\n templateHtml,\n usageStatistics,\n });\n this.type = null;\n this.options = SHAPE_DEFAULT_OPTION;\n\n this._els = {\n shapeSelectButton: this.selector('.tie-shape-button'),\n shapeColorButton: this.selector('.tie-shape-color-button'),\n strokeRange: new Range(\n {\n slider: this.selector('.tie-stroke-range'),\n input: this.selector('.tie-stroke-range-value'),\n },\n defaultShapeStrokeValues\n ),\n fillColorpicker: new Colorpicker(\n this.selector('.tie-color-fill'),\n '',\n this.toggleDirection,\n this.usageStatistics\n ),\n strokeColorpicker: new Colorpicker(\n this.selector('.tie-color-stroke'),\n '#ffbb3b',\n this.toggleDirection,\n this.usageStatistics\n ),\n };\n\n this.colorPickerControls.push(this._els.fillColorpicker);\n this.colorPickerControls.push(this._els.strokeColorpicker);\n\n this.colorPickerInputBoxes = [];\n this.colorPickerInputBoxes.push(\n this._els.fillColorpicker.colorpickerElement.querySelector(\n selectorNames.COLOR_PICKER_INPUT_BOX\n )\n );\n this.colorPickerInputBoxes.push(\n this._els.strokeColorpicker.colorpickerElement.querySelector(\n selectorNames.COLOR_PICKER_INPUT_BOX\n )\n );\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeEvent();\n this._els.strokeRange.destroy();\n this._els.fillColorpicker.destroy();\n this._els.strokeColorpicker.destroy();\n\n assignmentForDestroy(this);\n }\n\n /**\n * Add event for shape\n * @param {Object} actions - actions for shape\n * @param {Function} actions.changeShape - change shape mode\n * @param {Function} actions.setDrawingShape - set drawing shape\n */\n addEvent(actions) {\n this.eventHandler.shapeTypeSelected = this._changeShapeHandler.bind(this);\n this.actions = actions;\n\n this._els.shapeSelectButton.addEventListener('click', this.eventHandler.shapeTypeSelected);\n this._els.strokeRange.on('change', this._changeStrokeRangeHandler.bind(this));\n this._els.fillColorpicker.on('change', this._changeFillColorHandler.bind(this));\n this._els.strokeColorpicker.on('change', this._changeStrokeColorHandler.bind(this));\n this._els.fillColorpicker.on('changeShow', this.colorPickerChangeShow.bind(this));\n this._els.strokeColorpicker.on('changeShow', this.colorPickerChangeShow.bind(this));\n\n snippet.forEachArray(\n this.colorPickerInputBoxes,\n (inputBox) => {\n inputBox.addEventListener(eventNames.FOCUS, this._onStartEditingInputBox.bind(this));\n inputBox.addEventListener(eventNames.BLUR, this._onStopEditingInputBox.bind(this));\n },\n this\n );\n }\n\n /**\n * Remove event\n * @private\n */\n _removeEvent() {\n this._els.shapeSelectButton.removeEventListener('click', this.eventHandler.shapeTypeSelected);\n this._els.strokeRange.off();\n this._els.fillColorpicker.off();\n this._els.strokeColorpicker.off();\n\n snippet.forEachArray(\n this.colorPickerInputBoxes,\n (inputBox) => {\n inputBox.removeEventListener(eventNames.FOCUS, this._onStartEditingInputBox.bind(this));\n inputBox.removeEventListener(eventNames.BLUR, this._onStopEditingInputBox.bind(this));\n },\n this\n );\n }\n\n /**\n * Set Shape status\n * @param {Object} options - options of shape status\n * @param {string} strokeWidth - stroke width\n * @param {string} strokeColor - stroke color\n * @param {string} fillColor - fill color\n */\n setShapeStatus({ strokeWidth, strokeColor, fillColor }) {\n this._els.strokeRange.value = strokeWidth;\n this._els.strokeColorpicker.color = strokeColor;\n this._els.fillColorpicker.color = fillColor;\n this.options.stroke = strokeColor;\n this.options.fill = fillColor;\n this.options.strokeWidth = strokeWidth;\n\n this.actions.setDrawingShape(this.type, { strokeWidth });\n }\n\n /**\n * Executed when the menu starts.\n */\n changeStartMode() {\n this.actions.stopDrawingMode();\n }\n\n /**\n * Returns the menu to its default state.\n */\n changeStandbyMode() {\n this.type = null;\n this.actions.changeSelectableAll(true);\n this._els.shapeSelectButton.classList.remove('circle');\n this._els.shapeSelectButton.classList.remove('triangle');\n this._els.shapeSelectButton.classList.remove('rect');\n }\n\n /**\n * set range stroke max value\n * @param {number} maxValue - expect max value for change\n */\n setMaxStrokeValue(maxValue) {\n let strokeMaxValue = maxValue;\n if (strokeMaxValue <= 0) {\n strokeMaxValue = defaultShapeStrokeValues.max;\n }\n this._els.strokeRange.max = strokeMaxValue;\n }\n\n /**\n * Set stroke value\n * @param {number} value - expect value for strokeRange change\n */\n setStrokeValue(value) {\n this._els.strokeRange.value = value;\n this._els.strokeRange.trigger('change');\n }\n\n /**\n * Get stroke value\n * @returns {number} - stroke range value\n */\n getStrokeValue() {\n return this._els.strokeRange.value;\n }\n\n /**\n * Change icon color\n * @param {object} event - add button event object\n * @private\n */\n _changeShapeHandler(event) {\n const button = event.target.closest('.tui-image-editor-button');\n if (button) {\n this.actions.stopDrawingMode();\n this.actions.discardSelection();\n const shapeType = this.getButtonType(button, ['circle', 'triangle', 'rect']);\n\n if (this.type === shapeType) {\n this.changeStandbyMode();\n\n return;\n }\n this.changeStandbyMode();\n this.type = shapeType;\n event.currentTarget.classList.add(shapeType);\n this.actions.changeSelectableAll(false);\n this.actions.modeChange('shape');\n }\n }\n\n /**\n * Change stroke range\n * @param {number} value - stroke range value\n * @param {boolean} isLast - Is last change\n * @private\n */\n _changeStrokeRangeHandler(value, isLast) {\n this.options.strokeWidth = toInteger(value);\n this.actions.changeShape(\n {\n strokeWidth: value,\n },\n !isLast\n );\n\n this.actions.setDrawingShape(this.type, this.options);\n }\n\n /**\n * Change shape color\n * @param {string} color - fill color\n * @private\n */\n _changeFillColorHandler(color) {\n color = color || 'transparent';\n this.options.fill = color;\n this.actions.changeShape({\n fill: color,\n });\n }\n\n /**\n * Change shape stroke color\n * @param {string} color - fill color\n * @private\n */\n _changeStrokeColorHandler(color) {\n color = color || 'transparent';\n this.options.stroke = color;\n this.actions.changeShape({\n stroke: color,\n });\n }\n}\n\nexport default Shape;\n","import { CustomEvents } from 'tui-code-snippet';\nimport { eventNames } from '@/consts';\n\n/**\n * Submenu Base Class\n * @class\n * @ignore\n */\nclass Submenu {\n /**\n * @param {HTMLElement} subMenuElement - submenu dom element\n * @param {Locale} locale - translate text\n * @param {string} name - name of sub menu\n * @param {Object} iconStyle - style of icon\n * @param {string} menuBarPosition - position of menu\n * @param {*} templateHtml - template for SubMenuElement\n * @param {boolean} [usageStatistics=false] - template for SubMenuElement\n */\n constructor(\n subMenuElement,\n { locale, name, makeSvgIcon, menuBarPosition, templateHtml, usageStatistics }\n ) {\n this.subMenuElement = subMenuElement;\n this.menuBarPosition = menuBarPosition;\n this.toggleDirection = menuBarPosition === 'top' ? 'down' : 'up';\n this.colorPickerControls = [];\n this.usageStatistics = usageStatistics;\n this.eventHandler = {};\n this._makeSubMenuElement({\n locale,\n name,\n makeSvgIcon,\n templateHtml,\n });\n }\n\n /**\n * editor dom ui query selector\n * @param {string} selectName - query selector string name\n * @returns {HTMLElement}\n */\n selector(selectName) {\n return this.subMenuElement.querySelector(selectName);\n }\n\n /**\n * change show state change for colorpicker instance\n * @param {Colorpicker} occurredControl - target Colorpicker Instance\n */\n colorPickerChangeShow(occurredControl) {\n this.colorPickerControls.forEach((pickerControl) => {\n if (occurredControl !== pickerControl) {\n pickerControl.hide();\n }\n });\n }\n\n /**\n * Get button type\n * @param {HTMLElement} button - event target element\n * @param {array} buttonNames - Array of button names\n * @returns {string} - button type\n */\n getButtonType(button, buttonNames) {\n return button.className.match(RegExp(`(${buttonNames.join('|')})`))[0];\n }\n\n /**\n * Get button type\n * @param {HTMLElement} target - event target element\n * @param {string} removeClass - remove class name\n * @param {string} addClass - add class name\n */\n changeClass(target, removeClass, addClass) {\n target.classList.remove(removeClass);\n target.classList.add(addClass);\n }\n\n /**\n * Interface method whose implementation is optional.\n * Returns the menu to its default state.\n */\n changeStandbyMode() {}\n\n /**\n * Interface method whose implementation is optional.\n * Executed when the menu starts.\n */\n changeStartMode() {}\n\n /**\n * Make submenu dom element\n * @param {Locale} locale - translate text\n * @param {string} name - submenu name\n * @param {Object} iconStyle - icon style\n * @param {*} templateHtml - template for SubMenuElement\n * @private\n */\n _makeSubMenuElement({ locale, name, iconStyle, makeSvgIcon, templateHtml }) {\n const iconSubMenu = document.createElement('div');\n iconSubMenu.className = `tui-image-editor-menu-${name}`;\n iconSubMenu.innerHTML = templateHtml({\n locale,\n iconStyle,\n makeSvgIcon,\n });\n\n this.subMenuElement.appendChild(iconSubMenu);\n }\n\n _onStartEditingInputBox() {\n this.fire(eventNames.INPUT_BOX_EDITING_STARTED);\n }\n\n _onStopEditingInputBox() {\n this.fire(eventNames.INPUT_BOX_EDITING_STOPPED);\n }\n}\n\nCustomEvents.mixin(Submenu);\n\nexport default Submenu;\n","import { getHelpMenuBarPosition } from '@/util';\n\nexport default ({ locale, biImage, loadButtonStyle, downloadButtonStyle, menuBarPosition }) => `\n
            \n
            \n
            \n \n
            \n
              \n\n
              \n
              \n ${locale.localize('Load')}\n \n
              \n \n
              \n
              \n`;\n","export default ({\n locale,\n biImage,\n commonStyle,\n headerStyle,\n loadButtonStyle,\n downloadButtonStyle,\n submenuStyle,\n}) => `\n
              \n
              \n
              \n \n
              \n
              \n
              \n ${locale.localize('Load')}\n \n
              \n \n
              \n
              \n
              \n
              \n
              \n
              \n
              \n
              \n
              \n
              \n
              \n
              \n
              \n
              \n
              \n`;\n","export default ({\n subMenuLabelActive,\n subMenuLabelNormal,\n subMenuRangeTitle,\n submenuPartitionVertical,\n submenuPartitionHorizontal,\n submenuCheckbox,\n submenuRangePointer,\n submenuRangeValue,\n submenuColorpickerTitle,\n submenuColorpickerButton,\n submenuRangeBar,\n submenuRangeSubbar,\n submenuDisabledRangePointer,\n submenuDisabledRangeBar,\n submenuDisabledRangeSubbar,\n submenuIconSize,\n menuIconSize,\n biSize,\n menuIconStyle,\n submenuIconStyle,\n}) => `\n .tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype=\"icon-bubble\"] label,\n .tie-icon-add-button.icon-heart .tui-image-editor-button[data-icontype=\"icon-heart\"] label,\n .tie-icon-add-button.icon-location .tui-image-editor-button[data-icontype=\"icon-location\"] label,\n .tie-icon-add-button.icon-polygon .tui-image-editor-button[data-icontype=\"icon-polygon\"] label,\n .tie-icon-add-button.icon-star .tui-image-editor-button[data-icontype=\"icon-star\"] label,\n .tie-icon-add-button.icon-star-2 .tui-image-editor-button[data-icontype=\"icon-star-2\"] label,\n .tie-icon-add-button.icon-arrow-3 .tui-image-editor-button[data-icontype=\"icon-arrow-3\"] label,\n .tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype=\"icon-arrow-2\"] label,\n .tie-icon-add-button.icon-arrow .tui-image-editor-button[data-icontype=\"icon-arrow\"] label,\n .tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype=\"icon-bubble\"] label,\n .tie-draw-line-select-button.line .tui-image-editor-button.line label,\n .tie-draw-line-select-button.free .tui-image-editor-button.free label,\n .tie-flip-button.flipX .tui-image-editor-button.flipX label,\n .tie-flip-button.flipY .tui-image-editor-button.flipY label,\n .tie-flip-button.resetFlip .tui-image-editor-button.resetFlip label,\n .tie-crop-button .tui-image-editor-button.apply.active label,\n .tie-crop-preset-button .tui-image-editor-button.preset.active label,\n .tie-resize-button .tui-image-editor-button.apply.active label,\n .tie-resize-preset-button .tui-image-editor-button.preset.active label,\n .tie-shape-button.rect .tui-image-editor-button.rect label,\n .tie-shape-button.circle .tui-image-editor-button.circle label,\n .tie-shape-button.triangle .tui-image-editor-button.triangle label,\n .tie-text-effect-button .tui-image-editor-button.active label,\n .tie-text-align-button.tie-text-align-left .tui-image-editor-button.left label,\n .tie-text-align-button.tie-text-align-center .tui-image-editor-button.center label,\n .tie-text-align-button.tie-text-align-right .tui-image-editor-button.right label,\n .tie-mask-apply.apply.active .tui-image-editor-button.apply label,\n .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover > label,\n .tui-image-editor-container .tui-image-editor-checkbox label > span {\n ${subMenuLabelActive}\n }\n .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button > label,\n .tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label,\n .tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label > span {\n ${subMenuLabelNormal}\n }\n .tui-image-editor-container .tui-image-editor-range-wrap label > span {\n ${subMenuRangeTitle}\n }\n .tui-image-editor-container .tui-image-editor-partition > div {\n ${submenuPartitionVertical}\n }\n .tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition > div,\n .tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition > div {\n ${submenuPartitionHorizontal}\n }\n .tui-image-editor-container .tui-image-editor-checkbox label > span:before {\n ${submenuCheckbox}\n }\n .tui-image-editor-container .tui-image-editor-checkbox label > input:checked + span:before {\n border: 0;\n }\n .tui-image-editor-container .tui-image-editor-virtual-range-pointer {\n ${submenuRangePointer}\n }\n .tui-image-editor-container .tui-image-editor-virtual-range-bar {\n ${submenuRangeBar}\n }\n .tui-image-editor-container .tui-image-editor-virtual-range-subbar {\n ${submenuRangeSubbar}\n }\n .tui-image-editor-container .tui-image-editor-disabled .tui-image-editor-virtual-range-pointer {\n ${submenuDisabledRangePointer}\n }\n .tui-image-editor-container .tui-image-editor-disabled .tui-image-editor-virtual-range-subbar {\n ${submenuDisabledRangeSubbar}\n }\n .tui-image-editor-container .tui-image-editor-disabled .tui-image-editor-virtual-range-bar {\n ${submenuDisabledRangeBar}\n }\n .tui-image-editor-container .tui-image-editor-range-value {\n ${submenuRangeValue}\n }\n .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button .color-picker-value + label {\n ${submenuColorpickerTitle}\n }\n .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button .color-picker-value {\n ${submenuColorpickerButton}\n }\n .tui-image-editor-container .svg_ic-menu {\n ${menuIconSize}\n }\n .tui-image-editor-container .svg_ic-submenu {\n ${submenuIconSize}\n }\n .tui-image-editor-container .tui-image-editor-controls-logo > img,\n .tui-image-editor-container .tui-image-editor-header-logo > img {\n ${biSize}\n }\n .tui-image-editor-menu use.normal.use-default,\n .tui-image-editor-help-menu use.normal.use-default {\n fill-rule: evenodd;\n fill: ${menuIconStyle.normal.color};\n stroke: ${menuIconStyle.normal.color};\n }\n .tui-image-editor-menu use.active.use-default,\n .tui-image-editor-help-menu use.active.use-default {\n fill-rule: evenodd;\n fill: ${menuIconStyle.active.color};\n stroke: ${menuIconStyle.active.color};\n }\n .tui-image-editor-menu use.hover.use-default,\n .tui-image-editor-help-menu use.hover.use-default {\n fill-rule: evenodd;\n fill: ${menuIconStyle.hover.color};\n stroke: ${menuIconStyle.hover.color};\n }\n .tui-image-editor-menu use.disabled.use-default,\n .tui-image-editor-help-menu use.disabled.use-default {\n fill-rule: evenodd;\n fill: ${menuIconStyle.disabled.color};\n stroke: ${menuIconStyle.disabled.color};\n }\n .tui-image-editor-submenu use.normal.use-default {\n fill-rule: evenodd;\n fill: ${submenuIconStyle.normal.color};\n stroke: ${submenuIconStyle.normal.color};\n }\n .tui-image-editor-submenu use.active.use-default {\n fill-rule: evenodd;\n fill: ${submenuIconStyle.active.color};\n stroke: ${submenuIconStyle.active.color};\n }\n`;\n","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon }) => `\n
                \n
              • \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'shape-rectangle', true)}\n
                \n \n
                \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'crop', true)}\n
                \n \n
                \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'crop', true)}\n
                \n \n
                \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'crop', true)}\n
                \n \n
                \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'crop', true)}\n
                \n \n
                \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'crop', true)}\n
                \n \n
                \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'crop', true)}\n
                \n \n
                \n
                • \n
              • \n
                • \n
              • \n
                \n
                • \n
              • \n
                \n ${makeSvgIcon(['normal', 'active'], 'apply')}\n \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'cancel')}\n \n
                \n
                • \n
              \n`;\n","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon }) => `\n
                \n
              • \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'draw-free', true)}\n
                \n \n
                \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'draw-line', true)}\n
                \n \n
                \n
                • \n
              • \n
                \n
                • \n
              • \n
                \n
                • \n
              • \n
                \n
                • \n
              • \n \n
                \n \n
                • \n
              \n`;\n","/**\n * @param {Locale} locale - Translate text\n * @returns {string}\n */\nexport default ({ locale }) => `\n
                \n
              • \n
                \n
                \n \n
                \n
                \n \n
                \n
                \n \n
                \n
                \n \n
                \n
                \n \n
                \n
                \n \n
                \n
                \n \n
                \n
                \n
                • \n
              • \n
                \n
                • \n
              • \n
                \n
                \n
                \n \n
                \n
                \n
                \n \n
                \n
                \n
                \n
                \n
                \n \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n \n
                \n
                \n
                \n
                \n
                \n
                • \n
              • \n
                \n
                • \n
              • \n
                \n
                \n \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n
                \n \n
                \n
                \n
                \n \n
                \n
                \n
                \n
                • \n
              • \n
                \n
                • \n
              • \n
                \n
                \n
                \n \n
                \n
                \n
                \n
                \n
                \n \n
                \n
                \n
                \n
                \n
                \n \n
                \n
                \n
                • \n
              \n`;\n","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon }) => `\n
                \n
              • \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'flip-x', true)}\n
                \n \n
                \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'flip-y', true)}\n
                \n \n
                \n
                • \n
              • \n
                \n
                • \n
              • \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'flip-reset', true)}\n
                \n \n
                \n
                • \n
              \n`;\n","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @param {string} name - history name\n * @param {string} detail - history detail information\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon, name, detail }) => `\n
              \n
              \n ${makeSvgIcon(['normal', 'active'], `history-${name.toLowerCase()}`, true)}\n
              \n \n ${locale.localize(name)}\n ${detail ? `(${locale.localize(detail)})` : ''}\n \n
              \n ${makeSvgIcon(['normal'], 'history-check', true)}\n
              \n
              \n`;\n","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon }) => `\n
                \n
              • \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'icon-arrow', true)}\n
                \n \n
                \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'icon-arrow-2', true)}\n
                \n \n
                \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'icon-arrow-3', true)}\n
                \n \n
                \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'icon-star', true)}\n
                \n \n
                \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'icon-star-2', true)}\n
                \n \n
                \n\n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'icon-polygon', true)}\n
                \n \n
                \n\n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'icon-location', true)}\n
                \n \n
                \n\n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'icon-heart', true)}\n
                \n \n
                \n\n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'icon-bubble', true)}\n
                \n \n
                \n
                • \n
              • \n
                \n
                • \n
              • \n
                \n
                \n \n ${makeSvgIcon(['normal', 'active'], 'icon-load', true)}\n
                \n \n
                \n
                • \n
              • \n
                \n
                • \n
              • \n
                \n
                • \n
              \n`;\n","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon }) => `\n
                \n
              • \n
                \n
                \n \n ${makeSvgIcon(['normal', 'active'], 'mask-load', true)}\n
                \n \n
                \n
                • \n
              • \n
                \n
                • \n
              • \n
                \n ${makeSvgIcon(['normal', 'active'], 'apply')}\n \n
                \n
                • \n
              \n`;\n","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon }) => `\n
                \n
              • \n
                \n \n
                \n \n
                \n \n
                \n \n
                \n
                • \n
              • \n
              • \n
                \n
                • \n
              • \n
                \n
                \n \n
                \n
                \n
                • \n
              • \n
              • \n
                \n
                • \n
              • \n
              • \n
                \n ${makeSvgIcon(['normal', 'active'], 'apply')}\n \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'cancel')}\n \n
                \n
                • \n
              \n`;\n","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon }) => `\n
                \n
              • \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'rotate-clockwise', true)}\n
                \n \n
                \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'rotate-counterclockwise', true)}\n
                \n \n
                \n
                • \n
              • \n
                \n
                • \n
              • \n \n
                \n \n
                • \n
              \n`;\n","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon }) => `\n
                \n
              • \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'shape-rectangle', true)}\n
                \n \n
                \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'shape-circle', true)}\n
                \n \n
                \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'shape-triangle', true)}\n
                \n \n
                \n
                • \n
              • \n
                \n
                • \n
              • \n
                \n
                \n
                • \n
              • \n
                \n
                • \n
              • \n \n
                \n \n
                • \n
              \n`;\n","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon }) => `\n
                \n
              • \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'text-bold', true)}\n
                \n \n
                \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'text-italic', true)}\n
                \n \n
                \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'text-underline', true)}\n
                \n \n
                \n
                • \n
              • \n
                \n
                • \n
              • \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'text-align-left', true)}\n
                \n \n
                \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'text-align-center', true)}\n
                \n \n
                \n
                \n
                \n ${makeSvgIcon(['normal', 'active'], 'text-align-right', true)}\n
                \n \n
                \n
                • \n
              • \n
                \n
                • \n
              • \n
                \n
                • \n
              • \n
                \n
                • \n
              • \n \n
                \n \n
                • \n
              \n`;\n","import Range from '@/ui/tools/range';\nimport Colorpicker from '@/ui/tools/colorpicker';\nimport Submenu from '@/ui/submenuBase';\nimport templateHtml from '@/ui/template/submenu/text';\nimport { assignmentForDestroy } from '@/util';\nimport { defaultTextRangeValues, eventNames, selectorNames } from '@/consts';\n\n/**\n * Crop ui class\n * @class\n * @ignore\n */\nclass Text extends Submenu {\n constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {\n super(subMenuElement, {\n locale,\n name: 'text',\n makeSvgIcon,\n menuBarPosition,\n templateHtml,\n usageStatistics,\n });\n this.effect = {\n bold: false,\n italic: false,\n underline: false,\n };\n this.align = 'tie-text-align-left';\n this._els = {\n textEffectButton: this.selector('.tie-text-effect-button'),\n textAlignButton: this.selector('.tie-text-align-button'),\n textColorpicker: new Colorpicker(\n this.selector('.tie-text-color'),\n '#ffbb3b',\n this.toggleDirection,\n this.usageStatistics\n ),\n textRange: new Range(\n {\n slider: this.selector('.tie-text-range'),\n input: this.selector('.tie-text-range-value'),\n },\n defaultTextRangeValues\n ),\n };\n\n this.colorPickerInputBox = this._els.textColorpicker.colorpickerElement.querySelector(\n selectorNames.COLOR_PICKER_INPUT_BOX\n );\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeEvent();\n this._els.textColorpicker.destroy();\n this._els.textRange.destroy();\n\n assignmentForDestroy(this);\n }\n\n /**\n * Add event for text\n * @param {Object} actions - actions for text\n * @param {Function} actions.changeTextStyle - change text style\n */\n addEvent(actions) {\n const setTextEffect = this._setTextEffectHandler.bind(this);\n const setTextAlign = this._setTextAlignHandler.bind(this);\n\n this.eventHandler = {\n setTextEffect,\n setTextAlign,\n };\n\n this.actions = actions;\n this._els.textEffectButton.addEventListener('click', setTextEffect);\n this._els.textAlignButton.addEventListener('click', setTextAlign);\n this._els.textRange.on('change', this._changeTextRnageHandler.bind(this));\n this._els.textColorpicker.on('change', this._changeColorHandler.bind(this));\n\n this.colorPickerInputBox.addEventListener(\n eventNames.FOCUS,\n this._onStartEditingInputBox.bind(this)\n );\n this.colorPickerInputBox.addEventListener(\n eventNames.BLUR,\n this._onStopEditingInputBox.bind(this)\n );\n }\n\n /**\n * Remove event\n * @private\n */\n _removeEvent() {\n const { setTextEffect, setTextAlign } = this.eventHandler;\n\n this._els.textEffectButton.removeEventListener('click', setTextEffect);\n this._els.textAlignButton.removeEventListener('click', setTextAlign);\n this._els.textRange.off();\n this._els.textColorpicker.off();\n\n this.colorPickerInputBox.removeEventListener(\n eventNames.FOCUS,\n this._onStartEditingInputBox.bind(this)\n );\n this.colorPickerInputBox.removeEventListener(\n eventNames.BLUR,\n this._onStopEditingInputBox.bind(this)\n );\n }\n\n /**\n * Returns the menu to its default state.\n */\n changeStandbyMode() {\n this.actions.stopDrawingMode();\n }\n\n /**\n * Executed when the menu starts.\n */\n changeStartMode() {\n this.actions.modeChange('text');\n }\n\n set textColor(color) {\n this._els.textColorpicker.color = color;\n }\n\n /**\n * Get text color\n * @returns {string} - text color\n */\n get textColor() {\n return this._els.textColorpicker.color;\n }\n\n /**\n * Get text size\n * @returns {string} - text size\n */\n get fontSize() {\n return this._els.textRange.value;\n }\n\n /**\n * Set text size\n * @param {Number} value - text size\n */\n set fontSize(value) {\n this._els.textRange.value = value;\n }\n\n /**\n * get font style\n * @returns {string} - font style\n */\n get fontStyle() {\n return this.effect.italic ? 'italic' : 'normal';\n }\n\n /**\n * get font weight\n * @returns {string} - font weight\n */\n get fontWeight() {\n return this.effect.bold ? 'bold' : 'normal';\n }\n\n /**\n * get text underline text underline\n * @returns {boolean} - true or false\n */\n get underline() {\n return this.effect.underline;\n }\n\n setTextStyleStateOnAction(textStyle = {}) {\n const { fill, fontSize, fontStyle, fontWeight, textDecoration, textAlign } = textStyle;\n\n this.textColor = fill;\n this.fontSize = fontSize;\n this.setEffectState('italic', fontStyle);\n this.setEffectState('bold', fontWeight);\n this.setEffectState('underline', textDecoration);\n this.setAlignState(`tie-text-align-${textAlign}`);\n }\n\n setEffectState(effectName, value) {\n const effectValue = value === 'italic' || value === 'bold' || value === 'underline';\n const button = this._els.textEffectButton.querySelector(\n `.tui-image-editor-button.${effectName}`\n );\n\n this.effect[effectName] = effectValue;\n\n button.classList[effectValue ? 'add' : 'remove']('active');\n }\n\n setAlignState(value) {\n const button = this._els.textAlignButton;\n button.classList.remove(this.align);\n button.classList.add(value);\n this.align = value;\n }\n\n /**\n * text effect set handler\n * @param {object} event - add button event object\n * @private\n */\n _setTextEffectHandler(event) {\n const button = event.target.closest('.tui-image-editor-button');\n if (button) {\n const [styleType] = button.className.match(/(bold|italic|underline)/);\n const styleObj = {\n bold: { fontWeight: 'bold' },\n italic: { fontStyle: 'italic' },\n underline: { textDecoration: 'underline' },\n }[styleType];\n\n this.effect[styleType] = !this.effect[styleType];\n button.classList.toggle('active');\n this.actions.changeTextStyle(styleObj);\n }\n }\n\n /**\n * text effect set handler\n * @param {object} event - add button event object\n * @private\n */\n _setTextAlignHandler(event) {\n const button = event.target.closest('.tui-image-editor-button');\n if (button) {\n const styleType = this.getButtonType(button, ['left', 'center', 'right']);\n const styleTypeAlias = `tie-text-align-${styleType}`;\n\n event.currentTarget.classList.remove(this.align);\n if (this.align !== styleTypeAlias) {\n event.currentTarget.classList.add(styleTypeAlias);\n }\n this.actions.changeTextStyle({ textAlign: styleType });\n\n this.align = styleTypeAlias;\n }\n }\n\n /**\n * text align set handler\n * @param {number} value - range value\n * @param {boolean} isLast - Is last change\n * @private\n */\n _changeTextRnageHandler(value, isLast) {\n this.actions.changeTextStyle(\n {\n fontSize: value,\n },\n !isLast\n );\n }\n\n /**\n * change color handler\n * @param {string} color - change color string\n * @private\n */\n _changeColorHandler(color) {\n color = color || 'transparent';\n this.actions.changeTextStyle({\n fill: color,\n });\n }\n}\n\nexport default Text;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview The standard theme\n */\n\n/**\n * Full configuration for theme.
              \n * @typedef {object} themeConfig\n * @property {string} common.bi.image - Brand icon image\n * @property {string} common.bisize.width - Icon image width\n * @property {string} common.bisize.height - Icon Image Height\n * @property {string} common.backgroundImage - Background image\n * @property {string} common.backgroundColor - Background color\n * @property {string} common.border - Full area border style\n * @property {string} header.backgroundImage - header area background\n * @property {string} header.backgroundColor - header area background color\n * @property {string} header.border - header area border style\n * @property {string} loadButton.backgroundColor - load button background color\n * @property {string} loadButton.border - load button border style\n * @property {string} loadButton.color - load button foreground color\n * @property {string} loadButton.fontFamily - load button font type\n * @property {string} loadButton.fontSize - load button font size\n * @property {string} downloadButton.backgroundColor - download button background color\n * @property {string} downloadButton.border - download button border style\n * @property {string} downloadButton.color - download button foreground color\n * @property {string} downloadButton.fontFamily - download button font type\n * @property {string} downloadButton.fontSize - download button font size\n * @property {string} menu.normalIcon.color - Menu normal color for default icon\n * @property {string} menu.normalIcon.path - Menu normal icon svg bundle file path\n * @property {string} menu.normalIcon.name - Menu normal icon svg bundle name\n * @property {string} menu.activeIcon.color - Menu active color for default icon\n * @property {string} menu.activeIcon.path - Menu active icon svg bundle file path\n * @property {string} menu.activeIcon.name - Menu active icon svg bundle name\n * @property {string} menu.disabled.color - Menu disabled color for default icon\n * @property {string} menu.disabled.path - Menu disabled icon svg bundle file path\n * @property {string} menu.disabled.name - Menu disabled icon svg bundle name\n * @property {string} menu.hover.color - Menu default icon hover color\n * @property {string} menu.hover.path - Menu hover icon svg bundle file path\n * @property {string} menu.hover.name - Menu hover icon svg bundle name\n * @property {string} menu.iconSize.width - Menu icon Size Width\n * @property {string} menu.iconSize.height - Menu Icon Size Height\n * @property {string} submenu.backgroundColor - Sub-menu area background color\n * @property {string} submenu.partition.color - Submenu partition line color\n * @property {string} submenu.normalIcon.color - Submenu normal color for default icon\n * @property {string} submenu.normalIcon.path - Submenu default icon svg bundle file path\n * @property {string} submenu.normalIcon.name - Submenu default icon svg bundle name\n * @property {string} submenu.activeIcon.color - Submenu active color for default icon\n * @property {string} submenu.activeIcon.path - Submenu active icon svg bundle file path\n * @property {string} submenu.activeIcon.name - Submenu active icon svg bundle name\n * @property {string} submenu.iconSize.width - Submenu icon Size Width\n * @property {string} submenu.iconSize.height - Submenu Icon Size Height\n * @property {string} submenu.normalLabel.color - Submenu default label color\n * @property {string} submenu.normalLabel.fontWeight - Sub Menu Default Label Font Thickness\n * @property {string} submenu.activeLabel.color - Submenu active label color\n * @property {string} submenu.activeLabel.fontWeight - Submenu active label Font thickness\n * @property {string} checkbox.border - Checkbox border style\n * @property {string} checkbox.backgroundColor - Checkbox background color\n * @property {string} range.pointer.color - range control pointer color\n * @property {string} range.bar.color - range control bar color\n * @property {string} range.subbar.color - range control subbar color\n * @property {string} range.value.color - range number box font color\n * @property {string} range.value.fontWeight - range number box font thickness\n * @property {string} range.value.fontSize - range number box font size\n * @property {string} range.value.border - range number box border style\n * @property {string} range.value.backgroundColor - range number box background color\n * @property {string} range.title.color - range title font color\n * @property {string} range.title.fontWeight - range title font weight\n * @property {string} colorpicker.button.border - colorpicker button border style\n * @property {string} colorpicker.title.color - colorpicker button title font color\n * @example\n // default keys and styles\n var customTheme = {\n 'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',\n 'common.bisize.width': '251px',\n 'common.bisize.height': '21px',\n 'common.backgroundImage': 'none',\n 'common.backgroundColor': '#1e1e1e',\n 'common.border': '0px',\n\n // header\n 'header.backgroundImage': 'none',\n 'header.backgroundColor': 'transparent',\n 'header.border': '0px',\n\n // load button\n 'loadButton.backgroundColor': '#fff',\n 'loadButton.border': '1px solid #ddd',\n 'loadButton.color': '#222',\n 'loadButton.fontFamily': 'NotoSans, sans-serif',\n 'loadButton.fontSize': '12px',\n\n // download button\n 'downloadButton.backgroundColor': '#fdba3b',\n 'downloadButton.border': '1px solid #fdba3b',\n 'downloadButton.color': '#fff',\n 'downloadButton.fontFamily': 'NotoSans, sans-serif',\n 'downloadButton.fontSize': '12px',\n\n // icons default\n 'menu.normalIcon.color': '#8a8a8a',\n 'menu.activeIcon.color': '#555555',\n 'menu.disabledIcon.color': '#434343',\n 'menu.hoverIcon.color': '#e9e9e9',\n 'submenu.normalIcon.color': '#8a8a8a',\n 'submenu.activeIcon.color': '#e9e9e9',\n\n 'menu.iconSize.width': '24px',\n 'menu.iconSize.height': '24px',\n 'submenu.iconSize.width': '32px',\n 'submenu.iconSize.height': '32px',\n\n // submenu primary color\n 'submenu.backgroundColor': '#1e1e1e',\n 'submenu.partition.color': '#858585',\n\n // submenu labels\n 'submenu.normalLabel.color': '#858585',\n 'submenu.normalLabel.fontWeight': 'lighter',\n 'submenu.activeLabel.color': '#fff',\n 'submenu.activeLabel.fontWeight': 'lighter',\n\n // checkbox style\n 'checkbox.border': '1px solid #ccc',\n 'checkbox.backgroundColor': '#fff',\n\n // rango style\n 'range.pointer.color': '#fff',\n 'range.bar.color': '#666',\n 'range.subbar.color': '#d1d1d1',\n\n 'range.disabledPointer.color': '#414141',\n 'range.disabledBar.color': '#282828',\n 'range.disabledSubbar.color': '#414141',\n\n 'range.value.color': '#fff',\n 'range.value.fontWeight': 'lighter',\n 'range.value.fontSize': '11px',\n 'range.value.border': '1px solid #353535',\n 'range.value.backgroundColor': '#151515',\n 'range.title.color': '#fff',\n 'range.title.fontWeight': 'lighter',\n\n // colorpicker style\n 'colorpicker.button.border': '1px solid #1e1e1e',\n 'colorpicker.title.color': '#fff'\n};\n */\nexport default {\n 'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',\n 'common.bisize.width': '251px',\n 'common.bisize.height': '21px',\n 'common.backgroundImage': 'none',\n 'common.backgroundColor': '#1e1e1e',\n 'common.border': '0px',\n\n // header\n 'header.backgroundImage': 'none',\n 'header.backgroundColor': 'transparent',\n 'header.border': '0px',\n\n // load button\n 'loadButton.backgroundColor': '#fff',\n 'loadButton.border': '1px solid #ddd',\n 'loadButton.color': '#222',\n 'loadButton.fontFamily': \"'Noto Sans', sans-serif\",\n 'loadButton.fontSize': '12px',\n\n // download button\n 'downloadButton.backgroundColor': '#fdba3b',\n 'downloadButton.border': '1px solid #fdba3b',\n 'downloadButton.color': '#fff',\n 'downloadButton.fontFamily': \"'Noto Sans', sans-serif\",\n 'downloadButton.fontSize': '12px',\n\n // main icons\n 'menu.normalIcon.color': '#8a8a8a',\n 'menu.activeIcon.color': '#555555',\n 'menu.disabledIcon.color': '#434343',\n 'menu.hoverIcon.color': '#e9e9e9',\n\n // submenu icons\n 'submenu.normalIcon.color': '#8a8a8a',\n 'submenu.activeIcon.color': '#e9e9e9',\n\n 'menu.iconSize.width': '24px',\n 'menu.iconSize.height': '24px',\n\n 'submenu.iconSize.width': '32px',\n 'submenu.iconSize.height': '32px',\n\n // submenu primary color\n 'submenu.backgroundColor': '#1e1e1e',\n 'submenu.partition.color': '#3c3c3c',\n\n // submenu labels\n 'submenu.normalLabel.color': '#8a8a8a',\n 'submenu.normalLabel.fontWeight': 'lighter',\n 'submenu.activeLabel.color': '#fff',\n 'submenu.activeLabel.fontWeight': 'lighter',\n\n // checkbox style\n 'checkbox.border': '0px',\n 'checkbox.backgroundColor': '#fff',\n\n // range style\n 'range.pointer.color': '#fff',\n 'range.bar.color': '#666',\n 'range.subbar.color': '#d1d1d1',\n\n 'range.disabledPointer.color': '#414141',\n 'range.disabledBar.color': '#282828',\n 'range.disabledSubbar.color': '#414141',\n\n 'range.value.color': '#fff',\n 'range.value.fontWeight': 'lighter',\n 'range.value.fontSize': '11px',\n 'range.value.border': '1px solid #353535',\n 'range.value.backgroundColor': '#151515',\n 'range.title.color': '#fff',\n 'range.title.fontWeight': 'lighter',\n\n // colorpicker style\n 'colorpicker.button.border': '1px solid #1e1e1e',\n 'colorpicker.title.color': '#fff',\n};\n","import { extend, forEach, map } from 'tui-code-snippet';\nimport style from '@/ui/template/style';\nimport standardTheme from '@/ui/theme/standard';\nimport icon from '@svg/default.svg';\nimport { styleLoad } from '@/util';\n\n/**\n * Theme manager\n * @class\n * @param {Object} customTheme - custom theme\n * @ignore\n */\nclass Theme {\n constructor(customTheme) {\n this.styles = this._changeToObject(extend({}, standardTheme, customTheme));\n styleLoad(this._styleMaker());\n\n this._loadDefaultSvgIcon();\n }\n\n /**\n * Get a Style cssText or StyleObject\n * @param {string} type - style type\n * @returns {string|object} - cssText or StyleObject\n */\n // eslint-disable-next-line complexity\n getStyle(type) {\n let result = null;\n const firstProperty = type.replace(/\\..+$/, '');\n const option = this.styles[type];\n switch (type) {\n case 'common.bi':\n result = this.styles[type].image;\n break;\n case 'menu.icon':\n result = {\n active: this.styles[`${firstProperty}.activeIcon`],\n normal: this.styles[`${firstProperty}.normalIcon`],\n hover: this.styles[`${firstProperty}.hoverIcon`],\n disabled: this.styles[`${firstProperty}.disabledIcon`],\n };\n break;\n case 'submenu.icon':\n result = {\n active: this.styles[`${firstProperty}.activeIcon`],\n normal: this.styles[`${firstProperty}.normalIcon`],\n };\n break;\n case 'submenu.label':\n result = {\n active: this._makeCssText(this.styles[`${firstProperty}.activeLabel`]),\n normal: this._makeCssText(this.styles[`${firstProperty}.normalLabel`]),\n };\n break;\n case 'submenu.partition':\n result = {\n vertical: this._makeCssText(\n extend({}, option, { borderLeft: `1px solid ${option.color}` })\n ),\n horizontal: this._makeCssText(\n extend({}, option, { borderBottom: `1px solid ${option.color}` })\n ),\n };\n break;\n\n case 'range.disabledPointer':\n case 'range.disabledBar':\n case 'range.disabledSubbar':\n case 'range.pointer':\n case 'range.bar':\n case 'range.subbar':\n option.backgroundColor = option.color;\n result = this._makeCssText(option);\n break;\n default:\n result = this._makeCssText(option);\n break;\n }\n\n return result;\n }\n\n /**\n * Make css resource\n * @returns {string} - serialized css text\n * @private\n */\n _styleMaker() {\n const submenuLabelStyle = this.getStyle('submenu.label');\n const submenuPartitionStyle = this.getStyle('submenu.partition');\n\n return style({\n subMenuLabelActive: submenuLabelStyle.active,\n subMenuLabelNormal: submenuLabelStyle.normal,\n submenuPartitionVertical: submenuPartitionStyle.vertical,\n submenuPartitionHorizontal: submenuPartitionStyle.horizontal,\n biSize: this.getStyle('common.bisize'),\n subMenuRangeTitle: this.getStyle('range.title'),\n submenuRangePointer: this.getStyle('range.pointer'),\n submenuRangeBar: this.getStyle('range.bar'),\n submenuRangeSubbar: this.getStyle('range.subbar'),\n\n submenuDisabledRangePointer: this.getStyle('range.disabledPointer'),\n submenuDisabledRangeBar: this.getStyle('range.disabledBar'),\n submenuDisabledRangeSubbar: this.getStyle('range.disabledSubbar'),\n\n submenuRangeValue: this.getStyle('range.value'),\n submenuColorpickerTitle: this.getStyle('colorpicker.title'),\n submenuColorpickerButton: this.getStyle('colorpicker.button'),\n submenuCheckbox: this.getStyle('checkbox'),\n menuIconSize: this.getStyle('menu.iconSize'),\n submenuIconSize: this.getStyle('submenu.iconSize'),\n menuIconStyle: this.getStyle('menu.icon'),\n submenuIconStyle: this.getStyle('submenu.icon'),\n });\n }\n\n /**\n * Change to low dimensional object.\n * @param {object} styleOptions - style object of user interface\n * @returns {object} low level object for style apply\n * @private\n */\n _changeToObject(styleOptions) {\n const styleObject = {};\n forEach(styleOptions, (value, key) => {\n const keyExplode = key.match(/^(.+)\\.([a-z]+)$/i);\n const [, property, subProperty] = keyExplode;\n\n if (!styleObject[property]) {\n styleObject[property] = {};\n }\n styleObject[property][subProperty] = value;\n });\n\n return styleObject;\n }\n\n /**\n * Style object to Csstext serialize\n * @param {object} styleObject - style object\n * @returns {string} - css text string\n * @private\n */\n _makeCssText(styleObject) {\n const converterStack = [];\n\n forEach(styleObject, (value, key) => {\n if (['backgroundImage'].indexOf(key) > -1 && value !== 'none') {\n value = `url(${value})`;\n }\n\n converterStack.push(`${this._toUnderScore(key)}: ${value}`);\n });\n\n return converterStack.join(';');\n }\n\n /**\n * Camel key string to Underscore string\n * @param {string} targetString - change target\n * @returns {string}\n * @private\n */\n _toUnderScore(targetString) {\n return targetString.replace(/([A-Z])/g, ($0, $1) => `-${$1.toLowerCase()}`);\n }\n\n /**\n * Load default svg icon\n * @private\n */\n _loadDefaultSvgIcon() {\n if (!document.getElementById('tui-image-editor-svg-default-icons')) {\n const parser = new DOMParser();\n const dom = parser.parseFromString(icon, 'text/xml');\n\n document.body.appendChild(dom.documentElement);\n }\n }\n\n /**\n * Make className for svg icon\n * @param {string} iconType - normal' or 'active' or 'hover' or 'disabled\n * @param {boolean} isSubmenu - submenu icon or not.\n * @returns {string}\n * @private\n */\n _makeIconClassName(iconType, isSubmenu) {\n const iconStyleInfo = isSubmenu ? this.getStyle('submenu.icon') : this.getStyle('menu.icon');\n const { path, name } = iconStyleInfo[iconType];\n\n return path && name ? iconType : `${iconType} use-default`;\n }\n\n /**\n * Make svg use link path name\n * @param {string} iconType - normal' or 'active' or 'hover' or 'disabled\n * @param {boolean} isSubmenu - submenu icon or not.\n * @returns {string}\n * @private\n */\n _makeSvgIconPrefix(iconType, isSubmenu) {\n const iconStyleInfo = isSubmenu ? this.getStyle('submenu.icon') : this.getStyle('menu.icon');\n const { path, name } = iconStyleInfo[iconType];\n\n return path && name ? `${path}#${name}-` : '#';\n }\n\n /**\n * Make svg use link path name\n * @param {Array.} useIconTypes - normal' or 'active' or 'hover' or 'disabled\n * @param {string} menuName - menu name\n * @param {boolean} isSubmenu - submenu icon or not.\n * @returns {string}\n * @private\n */\n _makeSvgItem(useIconTypes, menuName, isSubmenu) {\n return map(useIconTypes, (iconType) => {\n const svgIconPrefix = this._makeSvgIconPrefix(iconType, isSubmenu);\n const iconName = this._toUnderScore(menuName);\n const svgIconClassName = this._makeIconClassName(iconType, isSubmenu);\n\n return ``;\n }).join('');\n }\n\n /**\n * Make svg icon set\n * @param {Array.} useIconTypes - normal' or 'active' or 'hover' or 'disabled\n * @param {string} menuName - menu name\n * @param {boolean} isSubmenu - submenu icon or not.\n * @returns {string}\n */\n makeMenSvgIconSet(useIconTypes, menuName, isSubmenu = false) {\n return `${this._makeSvgItem(\n useIconTypes,\n menuName,\n isSubmenu\n )}`;\n }\n}\n\nexport default Theme;\n","import snippet from 'tui-code-snippet';\nimport tuiColorPicker from 'tui-color-picker';\n\nconst PICKER_COLOR = [\n '#000000',\n '#2a2a2a',\n '#545454',\n '#7e7e7e',\n '#a8a8a8',\n '#d2d2d2',\n '#ffffff',\n '',\n '#ff4040',\n '#ff6518',\n '#ffbb3b',\n '#03bd9e',\n '#00a9ff',\n '#515ce6',\n '#9e5fff',\n '#ff5583',\n];\n\n/**\n * Colorpicker control class\n * @class\n * @ignore\n */\nclass Colorpicker {\n constructor(\n colorpickerElement,\n defaultColor = '#7e7e7e',\n toggleDirection = 'up',\n usageStatistics\n ) {\n this.colorpickerElement = colorpickerElement;\n this.usageStatistics = usageStatistics;\n\n this._show = false;\n\n this._colorpickerElement = colorpickerElement;\n this._toggleDirection = toggleDirection;\n this._makePickerButtonElement(defaultColor);\n this._makePickerLayerElement(colorpickerElement, colorpickerElement.getAttribute('title'));\n this._color = defaultColor;\n this.picker = tuiColorPicker.create({\n container: this.pickerElement,\n preset: PICKER_COLOR,\n color: defaultColor,\n usageStatistics: this.usageStatistics,\n });\n\n this._addEvent();\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeEvent();\n this.picker.destroy();\n this.colorpickerElement.innerHTML = '';\n snippet.forEach(this, (value, key) => {\n this[key] = null;\n });\n }\n\n /**\n * Get color\n * @returns {Number} color value\n */\n get color() {\n return this._color;\n }\n\n /**\n * Set color\n * @param {string} color color value\n */\n set color(color) {\n this._color = color;\n this._changeColorElement(color);\n }\n\n /**\n * Change color element\n * @param {string} color color value\n * #private\n */\n _changeColorElement(color) {\n if (color) {\n this.colorElement.classList.remove('transparent');\n this.colorElement.style.backgroundColor = color;\n } else {\n this.colorElement.style.backgroundColor = '#fff';\n this.colorElement.classList.add('transparent');\n }\n }\n\n /**\n * Make picker button element\n * @param {string} defaultColor color value\n * @private\n */\n _makePickerButtonElement(defaultColor) {\n this.colorpickerElement.classList.add('tui-image-editor-button');\n\n this.colorElement = document.createElement('div');\n this.colorElement.className = 'color-picker-value';\n if (defaultColor) {\n this.colorElement.style.backgroundColor = defaultColor;\n } else {\n this.colorElement.classList.add('transparent');\n }\n }\n\n /**\n * Make picker layer element\n * @param {HTMLElement} colorpickerElement color picker element\n * @param {string} title picker title\n * @private\n */\n _makePickerLayerElement(colorpickerElement, title) {\n const label = document.createElement('label');\n const triangle = document.createElement('div');\n\n this.pickerControl = document.createElement('div');\n this.pickerControl.className = 'color-picker-control';\n\n this.pickerElement = document.createElement('div');\n this.pickerElement.className = 'color-picker';\n\n label.innerHTML = title;\n triangle.className = 'triangle';\n\n this.pickerControl.appendChild(this.pickerElement);\n this.pickerControl.appendChild(triangle);\n\n colorpickerElement.appendChild(this.pickerControl);\n colorpickerElement.appendChild(this.colorElement);\n colorpickerElement.appendChild(label);\n }\n\n /**\n * Add event\n * @private\n */\n _addEvent() {\n this.picker.on('selectColor', (value) => {\n this._changeColorElement(value.color);\n this._color = value.color;\n this.fire('change', value.color);\n });\n\n this.eventHandler = {\n pickerToggle: this._pickerToggleEventHandler.bind(this),\n pickerHide: () => this.hide(),\n };\n\n this.colorpickerElement.addEventListener('click', this.eventHandler.pickerToggle);\n document.body.addEventListener('click', this.eventHandler.pickerHide);\n }\n\n /**\n * Remove event\n * @private\n */\n _removeEvent() {\n this.colorpickerElement.removeEventListener('click', this.eventHandler.pickerToggle);\n document.body.removeEventListener('click', this.eventHandler.pickerHide);\n this.picker.off();\n }\n\n /**\n * Picker toggle event handler\n * @param {object} event - change event\n * @private\n */\n _pickerToggleEventHandler(event) {\n const { target } = event;\n const isInPickerControl = target && this._isElementInColorPickerControl(target);\n\n if (!isInPickerControl || (isInPickerControl && this._isPaletteButton(target))) {\n this._show = !this._show;\n this.pickerControl.style.display = this._show ? 'block' : 'none';\n this._setPickerControlPosition();\n this.fire('changeShow', this);\n }\n event.stopPropagation();\n }\n\n /**\n * Check hex input or not\n * @param {Element} target - Event target element\n * @returns {boolean}\n * @private\n */\n _isPaletteButton(target) {\n return target.className === 'tui-colorpicker-palette-button';\n }\n\n /**\n * Check given element is in pickerControl element\n * @param {Element} element - element to check\n * @returns {boolean}\n * @private\n */\n _isElementInColorPickerControl(element) {\n let parentNode = element;\n\n while (parentNode !== document.body) {\n if (!parentNode) {\n break;\n }\n\n if (parentNode === this.pickerControl) {\n return true;\n }\n\n parentNode = parentNode.parentNode;\n }\n\n return false;\n }\n\n hide() {\n this._show = false;\n this.pickerControl.style.display = 'none';\n }\n\n /**\n * Set picker control position\n * @private\n */\n _setPickerControlPosition() {\n const controlStyle = this.pickerControl.style;\n const halfPickerWidth = this._colorpickerElement.clientWidth / 2 + 2;\n const left = this.pickerControl.offsetWidth / 2 - halfPickerWidth;\n let top = (this.pickerControl.offsetHeight + 10) * -1;\n\n if (this._toggleDirection === 'down') {\n top = 30;\n }\n\n controlStyle.top = `${top}px`;\n controlStyle.left = `-${left}px`;\n }\n}\n\nsnippet.CustomEvents.mixin(Colorpicker);\nexport default Colorpicker;\n","import snippet from 'tui-code-snippet';\nimport { toInteger, clamp } from '@/util';\nimport { keyCodes } from '@/consts';\n\nconst INPUT_FILTER_REGEXP = /(-?)([0-9]*)[^0-9]*([0-9]*)/g;\n\n/**\n * Range control class\n * @class\n * @ignore\n */\nclass Range {\n /**\n * @constructor\n * @extends {View}\n * @param {Object} rangeElements - Html resources for creating sliders\n * @param {HTMLElement} rangeElements.slider - b\n * @param {HTMLElement} [rangeElements.input] - c\n * @param {Object} options - Slider make options\n * @param {number} options.min - min value\n * @param {number} options.max - max value\n * @param {number} options.value - default value\n * @param {number} [options.useDecimal] - Decimal point processing.\n * @param {boolean} [options.realTimeEvent] - Reflect live events.\n */\n constructor(rangeElements, options = {}) {\n this._value = options.value || 0;\n\n this.rangeElement = rangeElements.slider;\n this.rangeInputElement = rangeElements.input;\n\n this._drawRangeElement();\n\n this.rangeWidth = this._getRangeWidth();\n this._min = options.min || 0;\n this._max = options.max || 100;\n this._useDecimal = options.useDecimal;\n this._absMax = this._min * -1 + this._max;\n this.realTimeEvent = options.realTimeEvent || false;\n\n this.eventHandler = {\n startChangingSlide: this._startChangingSlide.bind(this),\n stopChangingSlide: this._stopChangingSlide.bind(this),\n changeSlide: this._changeSlide.bind(this),\n changeSlideFinally: this._changeSlideFinally.bind(this),\n changeInput: this._changeValueWithInput.bind(this, false),\n changeInputFinally: this._changeValueWithInput.bind(this, true),\n changeInputWithArrow: this._changeValueWithInputKeyEvent.bind(this),\n };\n\n this._addClickEvent();\n this._addDragEvent();\n this._addInputEvent();\n this.value = options.value;\n this.trigger('change');\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeClickEvent();\n this._removeDragEvent();\n this._removeInputEvent();\n this.rangeElement.innerHTML = '';\n snippet.forEach(this, (value, key) => {\n this[key] = null;\n });\n }\n\n /**\n * Set range max value and re position cursor\n * @param {number} maxValue - max value\n */\n set max(maxValue) {\n this._max = maxValue;\n this._absMax = this._min * -1 + this._max;\n this.value = this._value;\n }\n\n get max() {\n return this._max;\n }\n\n /**\n * Set range min value and re position cursor\n * @param {number} minValue - min value\n */\n set min(minValue) {\n this._min = minValue;\n this.max = this._max;\n }\n\n get min() {\n return this._min;\n }\n\n /**\n * Get range value\n * @returns {Number} range value\n */\n get value() {\n return this._value;\n }\n\n /**\n * Set range value\n * @param {Number} value range value\n */\n set value(value) {\n value = this._useDecimal ? value : toInteger(value);\n\n const absValue = value - this._min;\n let leftPosition = (absValue * this.rangeWidth) / this._absMax;\n\n if (this.rangeWidth < leftPosition) {\n leftPosition = this.rangeWidth;\n }\n\n this.pointer.style.left = `${leftPosition}px`;\n this.subbar.style.right = `${this.rangeWidth - leftPosition}px`;\n\n this._value = value;\n if (this.rangeInputElement) {\n this.rangeInputElement.value = value;\n }\n }\n\n /**\n * event trigger\n * @param {string} type - type\n */\n trigger(type) {\n this.fire(type, this._value);\n }\n\n /**\n * Calculate slider width\n * @returns {number} - slider width\n */\n _getRangeWidth() {\n const getElementWidth = (element) => toInteger(window.getComputedStyle(element, null).width);\n\n return getElementWidth(this.rangeElement) - getElementWidth(this.pointer);\n }\n\n /**\n * Make range element\n * @private\n */\n _drawRangeElement() {\n this.rangeElement.classList.add('tui-image-editor-range');\n\n this.bar = document.createElement('div');\n this.bar.className = 'tui-image-editor-virtual-range-bar';\n\n this.subbar = document.createElement('div');\n this.subbar.className = 'tui-image-editor-virtual-range-subbar';\n\n this.pointer = document.createElement('div');\n this.pointer.className = 'tui-image-editor-virtual-range-pointer';\n\n this.bar.appendChild(this.subbar);\n this.bar.appendChild(this.pointer);\n this.rangeElement.appendChild(this.bar);\n }\n\n /**\n * Add range input editing event\n * @private\n */\n _addInputEvent() {\n if (this.rangeInputElement) {\n this.rangeInputElement.addEventListener('keydown', this.eventHandler.changeInputWithArrow);\n this.rangeInputElement.addEventListener('keyup', this.eventHandler.changeInput);\n this.rangeInputElement.addEventListener('blur', this.eventHandler.changeInputFinally);\n }\n }\n\n /**\n * Remove range input editing event\n * @private\n */\n _removeInputEvent() {\n if (this.rangeInputElement) {\n this.rangeInputElement.removeEventListener('keydown', this.eventHandler.changeInputWithArrow);\n this.rangeInputElement.removeEventListener('keyup', this.eventHandler.changeInput);\n this.rangeInputElement.removeEventListener('blur', this.eventHandler.changeInputFinally);\n }\n }\n\n /**\n * change angle event\n * @param {object} event - key event\n * @private\n */\n _changeValueWithInputKeyEvent(event) {\n const { keyCode, target } = event;\n\n if ([keyCodes.ARROW_UP, keyCodes.ARROW_DOWN].indexOf(keyCode) < 0) {\n return;\n }\n\n let value = Number(target.value);\n\n value = this._valueUpDownForKeyEvent(value, keyCode);\n\n const unChanged = value < this._min || value > this._max;\n\n if (!unChanged) {\n const clampValue = clamp(value, this._min, this.max);\n this.value = clampValue;\n this.fire('change', clampValue, false);\n }\n }\n\n /**\n * value up down for input\n * @param {number} value - original value number\n * @param {number} keyCode - input event key code\n * @returns {number} value - changed value\n * @private\n */\n _valueUpDownForKeyEvent(value, keyCode) {\n const step = this._useDecimal ? 0.1 : 1;\n\n if (keyCode === keyCodes.ARROW_UP) {\n value += step;\n } else if (keyCode === keyCodes.ARROW_DOWN) {\n value -= step;\n }\n\n return value;\n }\n\n /**\n * change angle event\n * @param {boolean} isLast - Is last change\n * @param {object} event - key event\n * @private\n */\n _changeValueWithInput(isLast, event) {\n const { keyCode, target } = event;\n\n if ([keyCodes.ARROW_UP, keyCodes.ARROW_DOWN].indexOf(keyCode) >= 0) {\n return;\n }\n\n const stringValue = this._filterForInputText(target.value);\n const waitForChange = !stringValue || isNaN(stringValue);\n target.value = stringValue;\n\n if (!waitForChange) {\n let value = this._useDecimal ? Number(stringValue) : toInteger(stringValue);\n value = clamp(value, this._min, this.max);\n\n this.value = value;\n this.fire('change', value, isLast);\n }\n }\n\n /**\n * Add Range click event\n * @private\n */\n _addClickEvent() {\n this.rangeElement.addEventListener('click', this.eventHandler.changeSlideFinally);\n }\n\n /**\n * Remove Range click event\n * @private\n */\n _removeClickEvent() {\n this.rangeElement.removeEventListener('click', this.eventHandler.changeSlideFinally);\n }\n\n /**\n * Add Range drag event\n * @private\n */\n _addDragEvent() {\n this.pointer.addEventListener('mousedown', this.eventHandler.startChangingSlide);\n }\n\n /**\n * Remove Range drag event\n * @private\n */\n _removeDragEvent() {\n this.pointer.removeEventListener('mousedown', this.eventHandler.startChangingSlide);\n }\n\n /**\n * change angle event\n * @param {object} event - change event\n * @private\n */\n _changeSlide(event) {\n const changePosition = event.screenX;\n const diffPosition = changePosition - this.firstPosition;\n let touchPx = this.firstLeft + diffPosition;\n touchPx = touchPx > this.rangeWidth ? this.rangeWidth : touchPx;\n touchPx = touchPx < 0 ? 0 : touchPx;\n\n this.pointer.style.left = `${touchPx}px`;\n this.subbar.style.right = `${this.rangeWidth - touchPx}px`;\n\n const ratio = touchPx / this.rangeWidth;\n const resultValue = this._absMax * ratio + this._min;\n const value = this._useDecimal ? resultValue : toInteger(resultValue);\n const isValueChanged = this.value !== value;\n\n if (isValueChanged) {\n this.value = value;\n if (this.realTimeEvent) {\n this.fire('change', this._value, false);\n }\n }\n }\n\n _changeSlideFinally(event) {\n event.stopPropagation();\n if (event.target.className !== 'tui-image-editor-range') {\n return;\n }\n const touchPx = event.offsetX;\n const ratio = touchPx / this.rangeWidth;\n const value = this._absMax * ratio + this._min;\n this.pointer.style.left = `${ratio * this.rangeWidth}px`;\n this.subbar.style.right = `${(1 - ratio) * this.rangeWidth}px`;\n this.value = value;\n\n this.fire('change', value, true);\n }\n\n _startChangingSlide(event) {\n this.firstPosition = event.screenX;\n this.firstLeft = toInteger(this.pointer.style.left) || 0;\n\n document.addEventListener('mousemove', this.eventHandler.changeSlide);\n document.addEventListener('mouseup', this.eventHandler.stopChangingSlide);\n }\n\n /**\n * stop change angle event\n * @private\n */\n _stopChangingSlide() {\n this.fire('change', this._value, true);\n\n document.removeEventListener('mousemove', this.eventHandler.changeSlide);\n document.removeEventListener('mouseup', this.eventHandler.stopChangingSlide);\n }\n\n /**\n * Unnecessary string filtering.\n * @param {string} inputValue - origin string of input\n * @returns {string} filtered string\n * @private\n */\n _filterForInputText(inputValue) {\n return inputValue.replace(INPUT_FILTER_REGEXP, '$1$2$3');\n }\n}\n\nsnippet.CustomEvents.mixin(Range);\n\nexport default Range;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Util\n */\nimport { forEach, sendHostname, extend, isString, pick, inArray } from 'tui-code-snippet';\nimport Promise from 'core-js-pure/features/promise';\nimport {\n commandNames,\n filterType,\n historyNames,\n SHAPE_FILL_TYPE,\n SHAPE_TYPE,\n emptyCropRectValues,\n} from '@/consts';\n\nconst FLOATING_POINT_DIGIT = 2;\nconst CSS_PREFIX = 'tui-image-editor-';\nconst { min, max } = Math;\nlet hostnameSent = false;\n\n/**\n * Export Promise Class (for simplified module path)\n * @returns {Promise} promise class\n */\nexport { Promise };\n\n/**\n * Clamp value\n * @param {number} value - Value\n * @param {number} minValue - Minimum value\n * @param {number} maxValue - Maximum value\n * @returns {number} clamped value\n */\nexport function clamp(value, minValue, maxValue) {\n if (minValue > maxValue) {\n [minValue, maxValue] = [maxValue, minValue];\n }\n\n return max(minValue, min(value, maxValue));\n}\n\n/**\n * Make key-value object from arguments\n * @returns {object.}\n */\nexport function keyMirror(...args) {\n const obj = {};\n\n forEach(args, (key) => {\n obj[key] = key;\n });\n\n return obj;\n}\n\n/**\n * Make CSSText\n * @param {Object} styleObj - Style info object\n * @returns {string} Connected string of style\n */\nexport function makeStyleText(styleObj) {\n let styleStr = '';\n\n forEach(styleObj, (value, prop) => {\n styleStr += `${prop}: ${value};`;\n });\n\n return styleStr;\n}\n\n/**\n * Get object's properties\n * @param {Object} obj - object\n * @param {Array} keys - keys\n * @returns {Object} properties object\n */\nexport function getProperties(obj, keys) {\n const props = {};\n const { length } = keys;\n let i = 0;\n let key;\n\n for (i = 0; i < length; i += 1) {\n key = keys[i];\n props[key] = obj[key];\n }\n\n return props;\n}\n\n/**\n * ParseInt simpliment\n * @param {number} value - Value\n * @returns {number}\n */\nexport function toInteger(value) {\n return parseInt(value, 10);\n}\n\n/**\n * String to camelcase string\n * @param {string} targetString - change target\n * @returns {string}\n * @private\n */\nexport function toCamelCase(targetString) {\n return targetString.replace(/-([a-z])/g, ($0, $1) => $1.toUpperCase());\n}\n\n/**\n * Check browser file api support\n * @returns {boolean}\n * @private\n */\nexport function isSupportFileApi() {\n return !!(window.File && window.FileList && window.FileReader);\n}\n\n/**\n * hex to rgb\n * @param {string} color - hex color\n * @param {string} alpha - color alpha value\n * @returns {string} rgb expression\n */\nexport function getRgb(color, alpha) {\n if (color.length === 4) {\n color = `${color}${color.slice(1, 4)}`;\n }\n const r = parseInt(color.slice(1, 3), 16);\n const g = parseInt(color.slice(3, 5), 16);\n const b = parseInt(color.slice(5, 7), 16);\n const a = alpha || 1;\n\n return `rgba(${r}, ${g}, ${b}, ${a})`;\n}\n\n/**\n * send hostname\n */\nexport function sendHostName() {\n if (hostnameSent) {\n return;\n }\n hostnameSent = true;\n\n sendHostname('image-editor', 'UA-129999381-1');\n}\n\n/**\n * Apply css resource\n * @param {string} styleBuffer - serialized css text\n * @param {string} tagId - style tag id\n */\nexport function styleLoad(styleBuffer, tagId) {\n const [head] = document.getElementsByTagName('head');\n const linkElement = document.createElement('link');\n const styleData = encodeURIComponent(styleBuffer);\n if (tagId) {\n linkElement.id = tagId;\n // linkElement.id = 'tui-image-editor-theme-style';\n }\n linkElement.setAttribute('rel', 'stylesheet');\n linkElement.setAttribute('type', 'text/css');\n linkElement.setAttribute('href', `data:text/css;charset=UTF-8,${styleData}`);\n head.appendChild(linkElement);\n}\n\n/**\n * Get selector\n * @param {HTMLElement} targetElement - target element\n * @returns {Function} selector\n */\nexport function getSelector(targetElement) {\n return (str) => targetElement.querySelector(str);\n}\n\n/**\n * Change base64 to blob\n * @param {String} data - base64 string data\n * @returns {Blob} Blob Data\n */\nexport function base64ToBlob(data) {\n const rImageType = /data:(image\\/.+);base64,/;\n let mimeString = '';\n let raw, uInt8Array, i;\n\n raw = data.replace(rImageType, (header, imageType) => {\n mimeString = imageType;\n\n return '';\n });\n\n raw = atob(raw);\n const rawLength = raw.length;\n uInt8Array = new Uint8Array(rawLength); // eslint-disable-line\n\n for (i = 0; i < rawLength; i += 1) {\n uInt8Array[i] = raw.charCodeAt(i);\n }\n\n return new Blob([uInt8Array], { type: mimeString });\n}\n\n/**\n * Fix floating point diff.\n * @param {number} value - original value\n * @returns {number} fixed value\n */\nexport function fixFloatingPoint(value) {\n return Number(value.toFixed(FLOATING_POINT_DIGIT));\n}\n\n/**\n * Assignment for destroying objects.\n * @param {Object} targetObject - object to be removed.\n */\nexport function assignmentForDestroy(targetObject) {\n forEach(targetObject, (value, key) => {\n targetObject[key] = null;\n });\n}\n\n/**\n * Make class name for ui\n * @param {String} str - main string of className\n * @param {String} prefix - prefix string of className\n * @returns {String} class name\n */\nexport function cls(str = '', prefix = '') {\n if (str.charAt(0) === '.') {\n return `.${CSS_PREFIX}${prefix}${str.slice(1)}`;\n }\n\n return `${CSS_PREFIX}${prefix}${str}`;\n}\n\n/**\n * Change object origin\n * @param {fabric.Object} fObject - fabric object\n * @param {Object} origin - origin of fabric object\n * @param {string} originX - horizontal basis.\n * @param {string} originY - vertical basis.\n */\nexport function changeOrigin(fObject, origin) {\n const { originX, originY } = origin;\n const { x: left, y: top } = fObject.getPointByOrigin(originX, originY);\n\n fObject.set({\n left,\n top,\n originX,\n originY,\n });\n\n fObject.setCoords();\n}\n\n/**\n * Object key value flip\n * @param {Object} targetObject - The data object of the key value.\n * @returns {Object}\n */\nexport function flipObject(targetObject) {\n const result = {};\n\n Object.keys(targetObject).forEach((key) => {\n result[targetObject[key]] = key;\n });\n\n return result;\n}\n\n/**\n * Set custom properties\n * @param {Object} targetObject - target object\n * @param {Object} props - custom props object\n */\nexport function setCustomProperty(targetObject, props) {\n targetObject.customProps = targetObject.customProps || {};\n extend(targetObject.customProps, props);\n}\n\n/**\n * Get custom property\n * @param {fabric.Object} fObject - fabric object\n * @param {Array|string} propNames - prop name array\n * @returns {object | number | string}\n */\nexport function getCustomProperty(fObject, propNames) {\n const resultObject = {};\n if (isString(propNames)) {\n propNames = [propNames];\n }\n forEach(propNames, (propName) => {\n resultObject[propName] = fObject.customProps[propName];\n });\n\n return resultObject;\n}\n\n/**\n * Capitalize string\n * @param {string} targetString - target string\n * @returns {string}\n */\nexport function capitalizeString(targetString) {\n return targetString.charAt(0).toUpperCase() + targetString.slice(1);\n}\n\n/**\n * Array includes check\n * @param {Array} targetArray - target array\n * @param {string|number} compareValue - compare value\n * @returns {boolean}\n */\nexport function includes(targetArray, compareValue) {\n return targetArray.indexOf(compareValue) >= 0;\n}\n\n/**\n * Get fill type\n * @param {Object | string} fillOption - shape fill option\n * @returns {string} 'color' or 'filter'\n */\nexport function getFillTypeFromOption(fillOption = {}) {\n return pick(fillOption, 'type') || SHAPE_FILL_TYPE.COLOR;\n}\n\n/**\n * Get fill type of shape type object\n * @param {fabric.Object} shapeObj - fabric object\n * @returns {string} 'transparent' or 'color' or 'filter'\n */\nexport function getFillTypeFromObject(shapeObj) {\n const { fill = {} } = shapeObj;\n if (fill.source) {\n return SHAPE_FILL_TYPE.FILTER;\n }\n\n return SHAPE_FILL_TYPE.COLOR;\n}\n\n/**\n * Check if the object is a shape object.\n * @param {fabric.Object} obj - fabric object\n * @returns {boolean}\n */\nexport function isShape(obj) {\n return inArray(obj.get('type'), SHAPE_TYPE) >= 0;\n}\n\n/**\n * Get object type\n * @param {string} type - fabric object type\n * @returns {string} type of object (ex: shape, icon, ...)\n */\nexport function getObjectType(type) {\n if (includes(SHAPE_TYPE, type)) {\n return 'Shape';\n }\n\n switch (type) {\n case 'i-text':\n return 'Text';\n case 'path':\n case 'line':\n return 'Draw';\n case 'activeSelection':\n return 'Group';\n default:\n return toStartOfCapital(type);\n }\n}\n\n/**\n * Get filter type\n * @param {string} type - fabric filter type\n * @param {object} [options] - filter type options\n * @param {boolean} [options.useAlpha=true] - usage of alpha(true is 'color filter', false is 'remove white')\n * @param {string} [options.mode] - mode of blendColor\n * @returns {string} type of filter (ex: sepia, blur, ...)\n */\nfunction getFilterType(type, { useAlpha = true, mode } = {}) {\n const { VINTAGE, REMOVE_COLOR, BLEND_COLOR, SEPIA2, COLOR_FILTER, REMOVE_WHITE, BLEND } =\n filterType;\n\n let filterName;\n\n switch (type) {\n case VINTAGE:\n filterName = SEPIA2;\n break;\n case REMOVE_COLOR:\n filterName = useAlpha ? COLOR_FILTER : REMOVE_WHITE;\n break;\n case BLEND_COLOR:\n filterName = mode === 'add' ? BLEND : mode;\n break;\n default:\n filterName = type;\n }\n\n return toStartOfCapital(filterName);\n}\n\n/**\n * Check if command is silent command\n * @param {Command|string} command - command or command name\n * @returns {boolean}\n */\nexport function isSilentCommand(command) {\n const { LOAD_IMAGE } = commandNames;\n\n return typeof command === 'string' ? LOAD_IMAGE === command : LOAD_IMAGE === command.name;\n}\n\n/**\n * Get command name\n * @param {Command|string} command - command or command name\n * @returns {{name: string, ?detail: string}}\n */\n// eslint-disable-next-line complexity, require-jsdoc\nexport function getHistoryTitle(command) {\n const {\n FLIP_IMAGE,\n ROTATE_IMAGE,\n ADD_TEXT,\n APPLY_FILTER,\n REMOVE_FILTER,\n CHANGE_SHAPE,\n CHANGE_ICON_COLOR,\n CHANGE_TEXT_STYLE,\n CLEAR_OBJECTS,\n ADD_IMAGE_OBJECT,\n REMOVE_OBJECT,\n RESIZE_IMAGE,\n } = commandNames;\n const { name, args } = command;\n let historyInfo;\n\n switch (name) {\n case FLIP_IMAGE:\n historyInfo = { name, detail: args[1] === 'reset' ? args[1] : args[1].slice(4) };\n break;\n case ROTATE_IMAGE:\n historyInfo = { name, detail: args[2] };\n break;\n case APPLY_FILTER:\n historyInfo = { name: historyNames.APPLY_FILTER, detail: getFilterType(args[1], args[2]) };\n break;\n case REMOVE_FILTER:\n historyInfo = { name: historyNames.REMOVE_FILTER, detail: 'Remove' };\n break;\n case CHANGE_SHAPE:\n historyInfo = { name: historyNames.CHANGE_SHAPE, detail: 'Change' };\n break;\n case CHANGE_ICON_COLOR:\n historyInfo = { name: historyNames.CHANGE_ICON_COLOR, detail: 'Change' };\n break;\n case CHANGE_TEXT_STYLE:\n historyInfo = { name: historyNames.CHANGE_TEXT_STYLE, detail: 'Change' };\n break;\n case REMOVE_OBJECT:\n historyInfo = { name: historyNames.REMOVE_OBJECT, detail: args[2] };\n break;\n case CLEAR_OBJECTS:\n historyInfo = { name: historyNames.CLEAR_OBJECTS, detail: 'All' };\n break;\n case ADD_IMAGE_OBJECT:\n historyInfo = { name: historyNames.ADD_IMAGE_OBJECT, detail: 'Add' };\n break;\n case ADD_TEXT:\n historyInfo = { name: historyNames.ADD_TEXT };\n break;\n case RESIZE_IMAGE:\n historyInfo = { name: historyNames.RESIZE, detail: `${~~args[1].width}x${~~args[1].height}` };\n break;\n\n default:\n historyInfo = { name };\n break;\n }\n\n if (args[1] === 'mask') {\n historyInfo = { name: historyNames.LOAD_MASK_IMAGE, detail: 'Apply' };\n }\n\n return historyInfo;\n}\n\n/**\n * Get help menubar position(opposite of menubar)\n * @param {string} position - position of menubar\n * @returns {string} position of help menubar\n */\nexport function getHelpMenuBarPosition(position) {\n if (position === 'top') {\n return 'bottom';\n }\n if (position === 'left') {\n return 'right';\n }\n if (position === 'right') {\n return 'left';\n }\n\n return 'top';\n}\n\n/**\n * Change to capital start letter\n * @param {string} str - string to change\n * @returns {string}\n */\nfunction toStartOfCapital(str) {\n return str.replace(/[a-z]/, (first) => first.toUpperCase());\n}\n\n/**\n * Check if cropRect is Empty.\n * @param {Object} cropRect - cropRect object\n * @param {Number} cropRect.left - cropRect left position value\n * @param {Number} cropRect.top - cropRect top position value\n * @param {Number} cropRect.width - cropRect width value\n * @param {Number} cropRect.height - cropRect height value\n * @returns {boolean}\n */\nexport function isEmptyCropzone(cropRect) {\n const { left, top, width, height } = cropRect;\n const { LEFT, TOP, WIDTH, HEIGHT } = emptyCropRectValues;\n\n return left === LEFT && top === TOP && width === WIDTH && height === HEIGHT;\n}\n","module.exports = \"\"","module.exports = __WEBPACK_EXTERNAL_MODULE_fabric__;","module.exports = __WEBPACK_EXTERNAL_MODULE_tui_code_snippet__;","module.exports = __WEBPACK_EXTERNAL_MODULE_tui_color_picker__;"],"sourceRoot":""} \ No newline at end of file diff --git a/apps/image-editor/dist/tui-image-editor.min.css b/apps/image-editor/dist/tui-image-editor.min.css index a55e4534e..3fb20dffd 100644 --- a/apps/image-editor/dist/tui-image-editor.min.css +++ b/apps/image-editor/dist/tui-image-editor.min.css @@ -1,7 +1,6 @@ /*! - * tui-image-editor.min.js - * @version 3.15.0 - * @author NHN. FE Development Lab + * TOAST UI ImageEditor + * @version 3.15.1 + * @author NHN. FE Development Team * @license MIT - */body>textarea{position:fixed!important}.tui-image-editor-container{margin:0;padding:0;box-sizing:border-box;min-height:300px;height:100%;position:relative;background-color:#282828;overflow:hidden;letter-spacing:.3px}.tui-image-editor-container div,.tui-image-editor-container input,.tui-image-editor-container label,.tui-image-editor-container li,.tui-image-editor-container ul{box-sizing:border-box;margin:0;padding:0;-ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none}.tui-image-editor-container .tui-image-editor-header{min-width:533px;position:absolute;background-color:#151515;top:0;width:100%}.tui-image-editor-container .tui-image-editor-controls-buttons,.tui-image-editor-container .tui-image-editor-header-buttons{float:right;margin:8px}.tui-image-editor-container .tui-image-editor-controls-logo,.tui-image-editor-container .tui-image-editor-header-logo{float:left;width:30%;padding:17px}.tui-image-editor-container .tui-image-editor-controls-buttons,.tui-image-editor-container .tui-image-editor-controls-logo{width:270px;height:100%;display:none}.tui-image-editor-container .tui-image-editor-controls-buttons button,.tui-image-editor-container .tui-image-editor-controls-buttons div,.tui-image-editor-container .tui-image-editor-header-buttons button,.tui-image-editor-container .tui-image-editor-header-buttons div{display:inline-block;position:relative;width:120px;height:40px;padding:0;line-height:40px;outline:none;border-radius:20px;border:1px solid #ddd;font-family:Noto Sans,sans-serif;font-size:12px;font-weight:700;cursor:pointer;vertical-align:middle;letter-spacing:.3px;text-align:center}.tui-image-editor-container .tui-image-editor-download-btn{background-color:#fdba3b;border-color:#fdba3b;color:#fff}.tui-image-editor-container .tui-image-editor-load-btn{position:absolute;left:0;right:0;display:inline-block;top:0;bottom:0;width:100%;cursor:pointer;opacity:0}.tui-image-editor-container .tui-image-editor-main-container{position:absolute;width:100%;top:0;bottom:64px}.tui-image-editor-container .tui-image-editor-main{position:absolute;text-align:center;top:64px;bottom:0;right:0;left:0}.tui-image-editor-container .tui-image-editor-wrap{bottom:0;width:100%;overflow:auto}.tui-image-editor-container .tui-image-editor-wrap .tui-image-editor-size-wrap{display:table;width:100%;height:100%}.tui-image-editor-container .tui-image-editor-wrap .tui-image-editor-size-wrap .tui-image-editor-align-wrap{display:table-cell;vertical-align:middle}.tui-image-editor-container .tui-image-editor{position:relative;display:inline-block}.tui-image-editor-container .tui-image-editor-help-menu,.tui-image-editor-container .tui-image-editor-menu{width:auto;list-style:none;padding:0;margin:0 auto;display:table-cell;text-align:center;vertical-align:middle;white-space:nowrap}.tui-image-editor-container .tui-image-editor-help-menu>.tui-image-editor-item,.tui-image-editor-container .tui-image-editor-menu>.tui-image-editor-item{position:relative;display:inline-block;border-radius:2px;padding:7px 8px 3px;cursor:pointer;margin:0 4px}.tui-image-editor-container .tui-image-editor-help-menu>.tui-image-editor-item[tooltip-content]:hover:before,.tui-image-editor-container .tui-image-editor-menu>.tui-image-editor-item[tooltip-content]:hover:before{content:"";position:absolute;display:inline-block;margin:0 auto;width:0;height:0;border-right:7px solid transparent;border-top:7px solid #2f2f2f;border-left:7px solid transparent;left:13px;top:-2px}.tui-image-editor-container .tui-image-editor-help-menu>.tui-image-editor-item[tooltip-content]:hover:after,.tui-image-editor-container .tui-image-editor-menu>.tui-image-editor-item[tooltip-content]:hover:after{content:attr(tooltip-content);position:absolute;display:inline-block;background-color:#2f2f2f;color:#fff;padding:5px 8px;font-size:11px;font-weight:lighter;border-radius:3px;max-height:23px;top:-25px;left:0;min-width:24px}.tui-image-editor-container .tui-image-editor-help-menu>.tui-image-editor-item.active,.tui-image-editor-container .tui-image-editor-menu>.tui-image-editor-item.active{background-color:#fff;transition:all .3s ease}.tui-image-editor-container .tui-image-editor-wrap{position:absolute}.tui-image-editor-container .tui-image-editor-grid-visual{display:none;position:absolute;width:100%;height:100%;border:1px solid hsla(0,0%,100%,.7)}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor{transition:none}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-grid-visual,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-resize .tui-image-editor-grid-visual,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-grid-visual{display:block}.tui-image-editor-container .tui-image-editor-grid-visual table{width:100%;height:100%;border-collapse:collapse}.tui-image-editor-container .tui-image-editor-grid-visual table td{border:1px solid hsla(0,0%,100%,.3)}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot:before{content:"";position:absolute;box-sizing:border-box;width:10px;height:10px;border:0;box-shadow:0 0 1px 0 rgba(0,0,0,.3);border-radius:100%;background-color:#fff}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-top:before{top:-5px;left:-5px}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-top:before{top:-5px;right:-5px}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-bottom:before{bottom:-5px;left:-5px}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-bottom:before{bottom:-5px;right:-5px}.tui-image-editor-container .tui-image-editor-submenu{display:none;position:absolute;bottom:0;width:100%;height:150px;white-space:nowrap;z-index:2}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover svg>use.active{display:block}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item li{display:inline-block;vertical-align:top}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-newline{display:block;margin-top:0}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button{position:relative;cursor:pointer;display:inline-block;font-weight:400;font-size:11px;margin:0 9px}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.preset{margin:0 9px 20px 5px}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item label>span{display:inline-block;cursor:pointer;padding-top:5px;font-family:Noto Sans,sans-serif;font-size:11px}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.apply label,.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.cancel label{vertical-align:7px}.tui-image-editor-container .tui-image-editor-submenu>div{display:none;vertical-align:bottom}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-style{opacity:.95;z-index:-1;position:absolute;top:0;bottom:0;left:0;right:0;display:block}.tui-image-editor-container .tui-image-editor-partition>div{width:1px;height:52px;border-left:1px solid #3c3c3c;margin:0 8px}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-partition>div{height:108px;margin:0 29px 0 0}.tui-image-editor-container .tui-image-editor-submenu-align{text-align:left;margin-right:30px}.tui-image-editor-container .tui-image-editor-submenu-align label>span{width:55px;white-space:nowrap}.tui-image-editor-container .tui-image-editor-submenu-align:first-child{margin-right:0}.tui-image-editor-container .tui-image-editor-submenu-align:first-child label>span{width:70px}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-crop .tui-image-editor-submenu>div.tui-image-editor-menu-crop,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-draw .tui-image-editor-submenu>div.tui-image-editor-menu-draw,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-submenu>div.tui-image-editor-menu-filter,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-submenu>div.tui-image-editor-menu-flip,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-icon .tui-image-editor-submenu>div.tui-image-editor-menu-icon,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-mask .tui-image-editor-submenu>div.tui-image-editor-menu-mask,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-resize .tui-image-editor-submenu>div.tui-image-editor-menu-resize,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-submenu>div.tui-image-editor-menu-rotate,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-shape .tui-image-editor-submenu>div.tui-image-editor-menu-shape,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-text .tui-image-editor-submenu>div.tui-image-editor-menu-text,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-zoom .tui-image-editor-submenu>div.tui-image-editor-menu-zoom{display:table-cell}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-crop .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-draw .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-icon .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-mask .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-resize .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-shape .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-text .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-zoom .tui-image-editor-submenu{display:table}.tui-image-editor-container .tui-image-editor-help-menu{list-style:none;padding:0;margin:0 auto;text-align:center;vertical-align:middle;border-radius:20px;background-color:hsla(0,0%,100%,.06);z-index:2;position:absolute}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history{display:none;background-color:#fff;color:#444;position:absolute;width:196px;height:276px;padding:4px 2px;box-shadow:0 2px 6px 0 rgba(0,0,0,.15);cursor:auto;transform:translateX(calc(-50% + 12px))}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list{height:268px;padding:0;overflow:hidden scroll;list-style:none}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item{height:24px;font-size:11px;line-height:24px}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item{position:relative;height:24px;cursor:pointer}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item svg{width:24px;height:24px}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item span{display:inline-block;width:128px;height:24px;text-align:left}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-icon{display:inline-block;width:24px;height:24px;position:absolute;top:6px;left:6px}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-checkbox{display:none;width:24px;height:24px;position:absolute;top:5px;right:-6px}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.selected-item{background-color:hsla(0,0%,46.7%,.12)}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.selected-item .history-item-checkbox{display:inline-block}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.disabled-item{color:#333;opacity:.3}.tui-image-editor-container .tui-image-editor-help-menu .opened .tie-panel-history{display:block}.tui-image-editor-container .tui-image-editor-help-menu .opened .tie-panel-history:before{content:"";position:absolute;display:inline-block;margin:0 auto;width:0;height:0}.tui-image-editor-container .filter-color-item{display:inline-block}.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox{display:block}.tui-image-editor-container .tui-image-editor-checkbox-wrap{display:inline-block!important;text-align:left}.tui-image-editor-container .tui-image-editor-checkbox-wrap.fixed-width{width:187px;white-space:normal}.tui-image-editor-container .tui-image-editor-checkbox{display:inline-block;margin:1px 0}.tui-image-editor-container .tui-image-editor-checkbox input{width:14px;height:14px;opacity:0}.tui-image-editor-container .tui-image-editor-checkbox>label>span{color:#fff;height:14px;position:relative}.tui-image-editor-container .tui-image-editor-checkbox>label>span:before,.tui-image-editor-container .tui-image-editor-checkbox input+label:before{content:"";position:absolute;width:14px;height:14px;background-color:#fff;top:6px;left:-19px;display:inline-block;margin:0;text-align:center;font-size:11px;border:0;border-radius:2px;padding-top:1px;box-sizing:border-box}.tui-image-editor-container .tui-image-editor-checkbox input[type=checkbox]:checked+span:before{background-size:cover;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAMBJREFUKBWVkjEOwjAMRe2WgZW7IIHEDdhghhuwcQ42rlJugAQS54Cxa5cq1QM5TUpByZfS2j9+dlJVt/tX5ZxbS4ZU9VLkQvSHKTIGRaVJYFmKrBbTCJxE2UgCdDzMZDkHrOV6b95V0US6UmgKodujEZbJg0B0ZgEModO5lrY1TMQf1TpyJGBEjD+E2NPN7ukIUDiF/BfEXgRiGEw8NgkffYGYwCi808fpn/6OvfUfsDr/Vc1IfRf8sKnFVqeiVQfDu0tf/nWH9gAAAABJRU5ErkJggg==")}.tui-image-editor-container .tui-image-editor-selectlist-wrap{position:relative}.tui-image-editor-container .tui-image-editor-selectlist-wrap select{width:100%;height:28px;margin-top:4px;outline:0;border-radius:0;border:1px solid #cbdbdb;background-color:#fff;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0 7px 0 10px}.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist{display:none;position:relative;top:-1px;border:1px solid #ccc;background-color:#fff;border-top:0;padding:4px 0}.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist li{display:block;text-align:left;padding:7px 10px;font-family:Noto Sans,sans-serif}.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist li:hover{background-color:rgba(81,92,230,.05)}.tui-image-editor-container .tui-image-editor-selectlist-wrap:before{content:"";position:absolute;display:inline-block;width:14px;height:14px;right:5px;top:10px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYBgFOEOAEVkmPDxc89+/f6eAYjzI4kD2FyYmJrOVK1deh4kzwRggGiQBVJCELAZig8SQNYHEmEEEMrh69eo1HR0dfqCYJUickZGxf9WqVf3IakBsFBthklpaWmVA9mEQhrJhUoTp0NBQCRAmrHL4qgAAuu4cWZOZIGsAAAAASUVORK5CYII=");background-size:cover}.tui-image-editor-container .tui-image-editor-selectlist-wrap select::-ms-expand{display:none}.tui-image-editor-container .tui-image-editor-virtual-range-bar .tui-image-editor-disabled,.tui-image-editor-container .tui-image-editor-virtual-range-pointer .tui-image-editor-disabled,.tui-image-editor-container .tui-image-editor-virtual-range-subbar .tui-image-editor-disabled{backbround-color:red}.tui-image-editor-container .tui-image-editor-range{position:relative;top:5px;width:166px;height:17px;display:inline-block}.tui-image-editor-container .tui-image-editor-virtual-range-bar{top:7px;position:absolute;width:100%;height:2px;background-color:#666}.tui-image-editor-container .tui-image-editor-virtual-range-subbar{position:absolute;height:100%;left:0;right:0;background-color:#d1d1d1}.tui-image-editor-container .tui-image-editor-virtual-range-pointer{position:absolute;cursor:pointer;top:-5px;left:0;width:12px;height:12px;background-color:#fff;border-radius:100%}.tui-image-editor-container .tui-image-editor-range-wrap{display:inline-block;margin-left:4px}.tui-image-editor-container .tui-image-editor-range-wrap.short .tui-image-editor-range{width:100px}.tui-image-editor-container .color-picker-control .tui-image-editor-range{width:108px;margin-left:10px}.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-pointer{background-color:#333}.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-bar{background-color:#ccc}.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-subbar{background-color:#606060}.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short{margin-top:-2px;margin-left:19px}.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label{color:#8e8e8e;font-weight:400}.tui-image-editor-container .tui-image-editor-range-wrap label{vertical-align:baseline;font-size:11px;margin-right:7px;color:#fff}.tui-image-editor-container .tui-image-editor-range-value{cursor:default;width:40px;height:24px;outline:none;border-radius:2px;box-shadow:none;border:1px solid #d5d5d5;text-align:center;background-color:#1c1c1c;color:#fff;font-weight:lighter;vertical-align:baseline;font-family:Noto Sans,sans-serif;margin-top:15px;margin-left:4px}.tui-image-editor-container .tui-image-editor-controls{position:absolute;background-color:#151515;width:100%;height:64px;display:table;bottom:0;z-index:2}.tui-image-editor-container .tui-image-editor-icpartition{display:inline-block;background-color:#444;width:1px;height:24px}.tui-image-editor-container.left .tui-image-editor-menu>.tui-image-editor-item[tooltip-content]:before{left:28px;top:11px;border-right:7px solid #2f2f2f;border-top:7px solid transparent;border-bottom:7px solid transparent}.tui-image-editor-container.left .tui-image-editor-menu>.tui-image-editor-item[tooltip-content]:after{top:7px;left:42px;white-space:nowrap}.tui-image-editor-container.left .tui-image-editor-submenu{left:0;height:100%;width:248px}.tui-image-editor-container.left .tui-image-editor-main-container{left:64px;width:calc(100% - 64px);height:100%}.tui-image-editor-container.left .tui-image-editor-controls{width:64px;height:100%;display:table}.tui-image-editor-container.left .tui-image-editor-menu,.tui-image-editor-container.right .tui-image-editor-menu{white-space:inherit}.tui-image-editor-container.left .tui-image-editor-submenu,.tui-image-editor-container.right .tui-image-editor-submenu{white-space:normal}.tui-image-editor-container.left .tui-image-editor-submenu>div,.tui-image-editor-container.right .tui-image-editor-submenu>div{vertical-align:middle}.tui-image-editor-container.left .tui-image-editor-controls li,.tui-image-editor-container.right .tui-image-editor-controls li{display:inline-block;margin:4px auto}.tui-image-editor-container.left .tui-image-editor-icpartition,.tui-image-editor-container.right .tui-image-editor-icpartition{position:relative;top:-7px;width:24px;height:1px}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition{display:block;width:75%;margin:auto}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition>div,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition>div{border-left:0;height:10px;border-bottom:1px solid #3c3c3c;width:100%;margin:0}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-align,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-align{margin-right:0}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-item li,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-item li{margin-top:15px}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-colorpicker-clearfix li,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-colorpicker-clearfix li{margin-top:0}.tui-image-editor-container.left .tui-image-editor-checkbox-wrap.fixed-width,.tui-image-editor-container.right .tui-image-editor-checkbox-wrap.fixed-width{width:182px;white-space:normal}.tui-image-editor-container.left .tui-image-editor-range-wrap.tui-image-editor-newline label.range,.tui-image-editor-container.right .tui-image-editor-range-wrap.tui-image-editor-newline label.range{display:block;text-align:left;width:75%;margin:auto}.tui-image-editor-container.left .tui-image-editor-range,.tui-image-editor-container.right .tui-image-editor-range{width:136px}.tui-image-editor-container.right .tui-image-editor-menu>.tui-image-editor-item[tooltip-content]:before{left:-3px;top:11px;border-left:7px solid #2f2f2f;border-top:7px solid transparent;border-bottom:7px solid transparent}.tui-image-editor-container.right .tui-image-editor-menu>.tui-image-editor-item[tooltip-content]:after{top:7px;left:unset;right:43px;white-space:nowrap}.tui-image-editor-container.right .tui-image-editor-submenu{right:0;height:100%;width:248px}.tui-image-editor-container.right .tui-image-editor-main-container{right:64px;width:calc(100% - 64px);height:100%}.tui-image-editor-container.right .tui-image-editor-controls{right:0;width:64px;height:100%;display:table}.tui-image-editor-container.bottom .tui-image-editor-submenu .tui-image-editor-partition.only-left-right,.tui-image-editor-container.top .tui-image-editor-submenu .tui-image-editor-partition.only-left-right{display:none}.tui-image-editor-container.bottom .tui-image-editor-submenu>div{padding-bottom:24px}.tui-image-editor-container.top .color-picker-control .triangle{top:-8px;border-right:7px solid transparent;border-top:0;border-left:7px solid transparent;border-bottom:8px solid #fff}.tui-image-editor-container.top .tui-image-editor-size-wrap{height:100%}.tui-image-editor-container.top .tui-image-editor-main-container{bottom:0}.tui-image-editor-container.top .tui-image-editor-menu>.tui-image-editor-item[tooltip-content]:before{left:13px;border-top:0;border-bottom:7px solid #2f2f2f;top:33px}.tui-image-editor-container.top .tui-image-editor-menu>.tui-image-editor-item[tooltip-content]:after{top:38px}.tui-image-editor-container.top .tui-image-editor-submenu{top:0;bottom:auto}.tui-image-editor-container.top .tui-image-editor-submenu>div{padding-top:24px;vertical-align:top}.tui-image-editor-container.top .tui-image-editor-controls-buttons,.tui-image-editor-container.top .tui-image-editor-controls-logo{display:table-cell}.tui-image-editor-container.top .tui-image-editor-main{top:64px;height:calc(100% - 64px)}.tui-image-editor-container.top .tui-image-editor-controls{top:0;bottom:inherit}.tui-image-editor-container .tui-image-editor-help-menu.top{white-space:nowrap;width:506px;height:40px;top:8px;left:50%;transform:translateX(-50%)}.tui-image-editor-container .tui-image-editor-help-menu.top .tie-panel-history{top:45px}.tui-image-editor-container .tui-image-editor-help-menu.top .opened .tie-panel-history:before{border-right:8px solid transparent;border-left:8px solid transparent;border-bottom:8px solid #fff;left:90px;top:-8px}.tui-image-editor-container .tui-image-editor-help-menu.top>.tui-image-editor-item[tooltip-content]:before{left:13px;top:35px;border:7px solid transparent;border-top:none;border-bottom:7px solid #2f2f2f}.tui-image-editor-container .tui-image-editor-help-menu.top>.tui-image-editor-item[tooltip-content]:after{top:41px;left:-4px;white-space:nowrap}.tui-image-editor-container .tui-image-editor-help-menu.top>.tui-image-editor-item[tooltip-content].opened:after,.tui-image-editor-container .tui-image-editor-help-menu.top>.tui-image-editor-item[tooltip-content].opened:before{content:none}.tui-image-editor-container .tui-image-editor-help-menu.bottom{white-space:nowrap;width:506px;height:40px;bottom:8px;left:50%;transform:translateX(-50%)}.tui-image-editor-container .tui-image-editor-help-menu.bottom .tie-panel-history{bottom:45px}.tui-image-editor-container .tui-image-editor-help-menu.bottom .opened .tie-panel-history:before{border-right:8px solid transparent;border-left:8px solid transparent;border-top:8px solid #fff;left:90px;bottom:-8px}.tui-image-editor-container .tui-image-editor-help-menu.bottom>.tui-image-editor-item[tooltip-content]:before{left:13px;top:auto;bottom:36px;border:7px solid transparent;border-top-color:#2f2f2f;border-bottom:none}.tui-image-editor-container .tui-image-editor-help-menu.bottom>.tui-image-editor-item[tooltip-content]:after{top:auto;left:-4px;bottom:41px;white-space:nowrap}.tui-image-editor-container .tui-image-editor-help-menu.bottom>.tui-image-editor-item[tooltip-content].opened:after,.tui-image-editor-container .tui-image-editor-help-menu.bottom>.tui-image-editor-item[tooltip-content].opened:before{content:none}.tui-image-editor-container .tui-image-editor-help-menu.left{white-space:inherit;width:40px;height:506px;left:8px;top:50%;transform:translateY(-50%)}.tui-image-editor-container .tui-image-editor-help-menu.left .tie-panel-history{left:140px;top:-4px}.tui-image-editor-container .tui-image-editor-help-menu.left .opened .tie-panel-history:before{border-top:8px solid transparent;border-bottom:8px solid transparent;border-right:8px solid #fff;left:-8px;top:14px}.tui-image-editor-container .tui-image-editor-help-menu.left .tui-image-editor-item{margin:4px auto;padding:6px 8px}.tui-image-editor-container .tui-image-editor-help-menu.left>.tui-image-editor-item[tooltip-content]:before{left:27px;top:11px;border:7px solid transparent;border-right-color:#2f2f2f;border-left:none}.tui-image-editor-container .tui-image-editor-help-menu.left>.tui-image-editor-item[tooltip-content]:after{top:7px;left:40px;white-space:nowrap}.tui-image-editor-container .tui-image-editor-help-menu.left>.tui-image-editor-item[tooltip-content].opened:after,.tui-image-editor-container .tui-image-editor-help-menu.left>.tui-image-editor-item[tooltip-content].opened:before{content:none}.tui-image-editor-container .tui-image-editor-help-menu.right{white-space:inherit;width:40px;height:506px;right:8px;top:50%;transform:translateY(-50%)}.tui-image-editor-container .tui-image-editor-help-menu.right .tie-panel-history{right:-30px;top:-4px}.tui-image-editor-container .tui-image-editor-help-menu.right .opened .tie-panel-history:before{border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:8px solid #fff;right:-8px;top:14px}.tui-image-editor-container .tui-image-editor-help-menu.right .tui-image-editor-item{margin:4px auto;padding:6px 8px}.tui-image-editor-container .tui-image-editor-help-menu.right>.tui-image-editor-item[tooltip-content]:before{left:-6px;top:11px;border:7px solid transparent;border-right:none;border-left:7px solid #2f2f2f}.tui-image-editor-container .tui-image-editor-help-menu.right>.tui-image-editor-item[tooltip-content]:after{top:7px;left:auto;right:39px;white-space:nowrap}.tui-image-editor-container .tui-image-editor-help-menu.right>.tui-image-editor-item[tooltip-content].opened:after,.tui-image-editor-container .tui-image-editor-help-menu.right>.tui-image-editor-item[tooltip-content].opened:before{content:none}.tui-image-editor-container .tie-icon-add-button .tui-image-editor-button{min-width:42px}.tui-image-editor-container .svg_ic-helpmenu,.tui-image-editor-container .svg_ic-menu{width:24px;height:24px}.tui-image-editor-container .svg_ic-submenu{width:32px;height:32px}.tui-image-editor-container .svg_img-bi{width:257px;height:26px}.tui-image-editor-container .tui-image-editor-controls svg>use,.tui-image-editor-container .tui-image-editor-help-menu svg>use{display:none}.tui-image-editor-container .tui-image-editor-controls .enabled svg:hover>use.hover,.tui-image-editor-container .tui-image-editor-controls .normal svg:hover>use.hover,.tui-image-editor-container .tui-image-editor-help-menu .enabled svg:hover>use.hover,.tui-image-editor-container .tui-image-editor-help-menu .normal svg:hover>use.hover{display:block}.tui-image-editor-container .tui-image-editor-controls .active svg:hover>use.hover,.tui-image-editor-container .tui-image-editor-help-menu .active svg:hover>use.hover{display:none}.tui-image-editor-container .tui-image-editor-controls .active svg>use.active,.tui-image-editor-container .tui-image-editor-controls .enabled svg>use.enabled,.tui-image-editor-container .tui-image-editor-controls .on svg>use.hover,.tui-image-editor-container .tui-image-editor-controls .opened svg>use.hover,.tui-image-editor-container .tui-image-editor-controls svg>use.normal,.tui-image-editor-container .tui-image-editor-help-menu .active svg>use.active,.tui-image-editor-container .tui-image-editor-help-menu .enabled svg>use.enabled,.tui-image-editor-container .tui-image-editor-help-menu .on svg>use.hover,.tui-image-editor-container .tui-image-editor-help-menu .opened svg>use.hover,.tui-image-editor-container .tui-image-editor-help-menu svg>use.normal{display:block}.tui-image-editor-container .tui-image-editor-controls .active svg>use.normal,.tui-image-editor-container .tui-image-editor-controls .enabled svg>use.normal,.tui-image-editor-container .tui-image-editor-help-menu .active svg>use.normal,.tui-image-editor-container .tui-image-editor-help-menu .enabled svg>use.normal{display:none}.tui-image-editor-container .tui-image-editor-controls .help.enabled svg>use.normal,.tui-image-editor-container .tui-image-editor-controls .help svg>use.disabled,.tui-image-editor-container .tui-image-editor-help-menu .help.enabled svg>use.normal,.tui-image-editor-container .tui-image-editor-help-menu .help svg>use.disabled{display:block}.tui-image-editor-container .tui-image-editor-controls .help.enabled svg>use.disabled,.tui-image-editor-container .tui-image-editor-help-menu .help.enabled svg>use.disabled{display:none}.tui-image-editor-container .tui-image-editor-controls:hover{z-index:3}.tui-image-editor-container div.tui-colorpicker-clearfix{width:159px;height:28px;border:1px solid #d5d5d5;border-radius:2px;background-color:#f5f5f5;margin-top:6px;padding:4px 7px}.tui-image-editor-container .tui-colorpicker-palette-hex{width:114px;background-color:#f5f5f5;border:0;font-size:11px;margin-top:2px;font-family:Noto Sans,sans-serif}.tui-image-editor-container .tui-colorpicker-palette-hex[value=""]+.tui-colorpicker-palette-preview,.tui-image-editor-container .tui-colorpicker-palette-hex[value="#ffffff"]+.tui-colorpicker-palette-preview{border:1px solid #ccc}.tui-image-editor-container .tui-colorpicker-palette-hex[value=""]+.tui-colorpicker-palette-preview{background-size:cover;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC")}.tui-image-editor-container .tui-colorpicker-palette-preview{border-radius:100%;float:left;width:17px;height:17px;border:0}.tui-image-editor-container .color-picker-control{position:absolute;display:none;z-index:99;width:192px;background-color:#fff;box-shadow:0 3px 22px 6px rgba(0,0,0,.15);padding:16px;border-radius:2px}.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-toggle-slider{display:none}.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button{border:0;border-radius:100%;margin:2px;background-size:cover;font-size:1px}.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button[title=""],.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button[title="#ffffff"]{border:1px solid #ccc}.tui-image-editor-container .color-picker-control .triangle{width:0;height:0;border-right:7px solid transparent;border-top:8px solid #fff;border-left:7px solid transparent;position:absolute;bottom:-8px;left:84px}.tui-image-editor-container .color-picker-control .tui-colorpicker-container,.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container,.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container ul{width:100%;height:auto}.tui-image-editor-container .filter-color-item .color-picker-control label{font-color:#333;font-weight:400;margin-right:7pxleft}.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox{margin-top:0}.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox>label:before,.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox input+label:before{left:-16px}.tui-image-editor-container .color-picker{width:100%;height:auto}.tui-image-editor-container .color-picker-value{width:32px;height:32px;border:0;border-radius:100%;margin:auto auto 1px}.tui-image-editor-container .color-picker-value.transparent{border:1px solid #cbcbcb;background-size:cover;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC")}.tui-image-editor-container .color-picker-value+label{color:#fff}.tui-image-editor-container .tui-image-editor-submenu svg>use{display:none}.tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype=icon-arrow-2] svg>use.active,.tie-icon-add-button.icon-arrow-3 .tui-image-editor-button[data-icontype=icon-arrow-3] svg>use.active,.tie-icon-add-button.icon-arrow .tui-image-editor-button[data-icontype=icon-arrow] svg>use.active,.tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype=icon-bubble] svg>use.active,.tie-icon-add-button.icon-heart .tui-image-editor-button[data-icontype=icon-heart] svg>use.active,.tie-icon-add-button.icon-location .tui-image-editor-button[data-icontype=icon-location] svg>use.active,.tie-icon-add-button.icon-polygon .tui-image-editor-button[data-icontype=icon-polygon] svg>use.active,.tie-icon-add-button.icon-star-2 .tui-image-editor-button[data-icontype=icon-star-2] svg>use.active,.tie-icon-add-button.icon-star .tui-image-editor-button[data-icontype=icon-star] svg>use.active,.tui-image-editor-container .tui-image-editor-submenu svg>use.normal{display:block}.tie-draw-line-select-button.free .tui-image-editor-button.free svg>use.normal,.tie-draw-line-select-button.line .tui-image-editor-button.line svg>use.normal{display:none}.tie-draw-line-select-button.free .tui-image-editor-button.free svg>use.active,.tie-draw-line-select-button.line .tui-image-editor-button.line svg>use.active{display:block}.tie-flip-button.flipX .tui-image-editor-button.flipX svg>use.normal,.tie-flip-button.flipY .tui-image-editor-button.flipY svg>use.normal,.tie-flip-button.resetFlip .tui-image-editor-button.resetFlip svg>use.normal{display:none}.tie-flip-button.flipX .tui-image-editor-button.flipX svg>use.active,.tie-flip-button.flipY .tui-image-editor-button.flipY svg>use.active,.tie-flip-button.resetFlip .tui-image-editor-button.resetFlip svg>use.active{display:block}.tie-mask-apply.apply.active .tui-image-editor-button.apply label{color:#fff}.tie-mask-apply.apply.active .tui-image-editor-button.apply svg>use.active{display:block}.tie-crop-button .tui-image-editor-button.apply,.tie-crop-preset-button .tui-image-editor-button.apply{margin-right:24px}.tie-crop-button .tui-image-editor-button.apply.active svg>use.active,.tie-crop-button .tui-image-editor-button.preset.active svg>use.active,.tie-crop-preset-button .tui-image-editor-button.apply.active svg>use.active,.tie-crop-preset-button .tui-image-editor-button.preset.active svg>use.active{display:block}.tie-resize-button .tui-image-editor-button.apply,.tie-resize-preset-button .tui-image-editor-button.apply{margin-right:24px}.tie-resize-button .tui-image-editor-button.apply.active svg>use.active,.tie-resize-button .tui-image-editor-button.preset.active svg>use.active,.tie-resize-preset-button .tui-image-editor-button.apply.active svg>use.active,.tie-resize-preset-button .tui-image-editor-button.preset.active svg>use.active{display:block}.tie-shape-button.circle .tui-image-editor-button.circle svg>use.normal,.tie-shape-button.rect .tui-image-editor-button.rect svg>use.normal,.tie-shape-button.triangle .tui-image-editor-button.triangle svg>use.normal{display:none}.tie-shape-button.circle .tui-image-editor-button.circle svg>use.active,.tie-shape-button.rect .tui-image-editor-button.rect svg>use.active,.tie-shape-button.triangle .tui-image-editor-button.triangle svg>use.active,.tie-text-align-button.tie-text-align-center .tui-image-editor-button.center svg>use.active,.tie-text-align-button.tie-text-align-left .tui-image-editor-button.left svg>use.active,.tie-text-align-button.tie-text-align-right .tui-image-editor-button.right svg>use.active,.tie-text-effect-button .tui-image-editor-button.active svg>use.active{display:block}.tie-icon-image-file,.tie-mask-image-file{opacity:0;position:absolute;width:100%;height:100%;border:1px solid green;cursor:inherit;left:0;top:0}.tie-zoom-button.flipX .tui-image-editor-button.flipX svg>use.normal,.tie-zoom-button.flipY .tui-image-editor-button.flipY svg>use.normal,.tie-zoom-button.resetFlip .tui-image-editor-button.resetFlip svg>use.normal{display:none}.tie-zoom-button.flipX .tui-image-editor-button.flipX svg>use.active,.tie-zoom-button.flipY .tui-image-editor-button.flipY svg>use.active,.tie-zoom-button.resetFlip .tui-image-editor-button.resetFlip svg>use.active{display:block}.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls ul{text-align:right}.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls-logo{display:none} -/*# sourceMappingURL=tui-image-editor.min.css.map */ \ No newline at end of file + */body>textarea{position:fixed!important}.tui-image-editor-container{background-color:#282828;box-sizing:border-box;height:100%;letter-spacing:.3px;margin:0;min-height:300px;overflow:hidden;padding:0;position:relative}.tui-image-editor-container div,.tui-image-editor-container input,.tui-image-editor-container label,.tui-image-editor-container li,.tui-image-editor-container ul{box-sizing:border-box;margin:0;padding:0;-ms-user-select:none;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;user-select:none}.tui-image-editor-container .tui-image-editor-header{background-color:#151515;min-width:533px;position:absolute;top:0;width:100%}.tui-image-editor-container .tui-image-editor-controls-buttons,.tui-image-editor-container .tui-image-editor-header-buttons{float:right;margin:8px}.tui-image-editor-container .tui-image-editor-controls-logo,.tui-image-editor-container .tui-image-editor-header-logo{float:left;padding:17px;width:30%}.tui-image-editor-container .tui-image-editor-controls-buttons,.tui-image-editor-container .tui-image-editor-controls-logo{display:none;height:100%;width:270px}.tui-image-editor-container .tui-image-editor-controls-buttons button,.tui-image-editor-container .tui-image-editor-controls-buttons div,.tui-image-editor-container .tui-image-editor-header-buttons button,.tui-image-editor-container .tui-image-editor-header-buttons div{border:1px solid #ddd;border-radius:20px;cursor:pointer;display:inline-block;font-family:Noto Sans,sans-serif;font-size:12px;font-weight:700;height:40px;letter-spacing:.3px;line-height:40px;outline:none;padding:0;position:relative;text-align:center;vertical-align:middle;width:120px}.tui-image-editor-container .tui-image-editor-download-btn{background-color:#fdba3b;border-color:#fdba3b;color:#fff}.tui-image-editor-container .tui-image-editor-load-btn{bottom:0;cursor:pointer;display:inline-block;left:0;opacity:0;position:absolute;right:0;top:0;width:100%}.tui-image-editor-container .tui-image-editor-main-container{bottom:64px;position:absolute;top:0;width:100%}.tui-image-editor-container .tui-image-editor-main{bottom:0;left:0;position:absolute;right:0;text-align:center;top:64px}.tui-image-editor-container .tui-image-editor-wrap{bottom:0;overflow:auto;width:100%}.tui-image-editor-container .tui-image-editor-wrap .tui-image-editor-size-wrap{display:table;height:100%;width:100%}.tui-image-editor-container .tui-image-editor-wrap .tui-image-editor-size-wrap .tui-image-editor-align-wrap{display:table-cell;vertical-align:middle}.tui-image-editor-container .tui-image-editor{display:inline-block;position:relative}.tui-image-editor-container .tui-image-editor-help-menu,.tui-image-editor-container .tui-image-editor-menu{display:table-cell;list-style:none;margin:0 auto;padding:0;text-align:center;vertical-align:middle;white-space:nowrap;width:auto}.tui-image-editor-container .tui-image-editor-help-menu>.tui-image-editor-item,.tui-image-editor-container .tui-image-editor-menu>.tui-image-editor-item{border-radius:2px;cursor:pointer;display:inline-block;margin:0 4px;padding:7px 8px 3px;position:relative}.tui-image-editor-container .tui-image-editor-help-menu>.tui-image-editor-item[tooltip-content]:hover:before,.tui-image-editor-container .tui-image-editor-menu>.tui-image-editor-item[tooltip-content]:hover:before{border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #2f2f2f;content:"";display:inline-block;height:0;left:13px;margin:0 auto;position:absolute;top:-2px;width:0}.tui-image-editor-container .tui-image-editor-help-menu>.tui-image-editor-item[tooltip-content]:hover:after,.tui-image-editor-container .tui-image-editor-menu>.tui-image-editor-item[tooltip-content]:hover:after{background-color:#2f2f2f;border-radius:3px;color:#fff;content:attr(tooltip-content);display:inline-block;font-size:11px;font-weight:lighter;left:0;max-height:23px;min-width:24px;padding:5px 8px;position:absolute;top:-25px}.tui-image-editor-container .tui-image-editor-help-menu>.tui-image-editor-item.active,.tui-image-editor-container .tui-image-editor-menu>.tui-image-editor-item.active{background-color:#fff;transition:all .3s ease}.tui-image-editor-container .tui-image-editor-wrap{position:absolute}.tui-image-editor-container .tui-image-editor-grid-visual{border:1px solid rgba(255,255,255,.7);display:none;height:100%;position:absolute;width:100%}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor{transition:none}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-grid-visual,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-resize .tui-image-editor-grid-visual,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-grid-visual{display:block}.tui-image-editor-container .tui-image-editor-grid-visual table{border-collapse:collapse;height:100%;width:100%}.tui-image-editor-container .tui-image-editor-grid-visual table td{border:1px solid rgba(255,255,255,.3)}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot:before{background-color:#fff;border:0;border-radius:100%;box-shadow:0 0 1px 0 rgba(0,0,0,.3);box-sizing:border-box;content:"";height:10px;position:absolute;width:10px}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-top:before{left:-5px;top:-5px}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-top:before{right:-5px;top:-5px}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-bottom:before{bottom:-5px;left:-5px}.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-bottom:before{bottom:-5px;right:-5px}.tui-image-editor-container .tui-image-editor-submenu{bottom:0;display:none;height:150px;position:absolute;white-space:nowrap;width:100%;z-index:2}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover svg>use.active{display:block}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item li{display:inline-block;vertical-align:top}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-newline{display:block;margin-top:0}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button{cursor:pointer;display:inline-block;font-size:11px;font-weight:400;margin:0 9px;position:relative}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.preset{margin:0 9px 20px 5px}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item label>span{cursor:pointer;display:inline-block;font-family:Noto Sans,sans-serif;font-size:11px;padding-top:5px}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.apply label,.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.cancel label{vertical-align:7px}.tui-image-editor-container .tui-image-editor-submenu>div{display:none;vertical-align:bottom}.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-style{bottom:0;display:block;left:0;opacity:.95;position:absolute;right:0;top:0;z-index:-1}.tui-image-editor-container .tui-image-editor-partition>div{border-left:1px solid #3c3c3c;height:52px;margin:0 8px;width:1px}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-partition>div{height:108px;margin:0 29px 0 0}.tui-image-editor-container .tui-image-editor-submenu-align{margin-right:30px;text-align:left}.tui-image-editor-container .tui-image-editor-submenu-align label>span{white-space:nowrap;width:55px}.tui-image-editor-container .tui-image-editor-submenu-align:first-child{margin-right:0}.tui-image-editor-container .tui-image-editor-submenu-align:first-child label>span{width:70px}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-crop .tui-image-editor-submenu>div.tui-image-editor-menu-crop,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-draw .tui-image-editor-submenu>div.tui-image-editor-menu-draw,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-submenu>div.tui-image-editor-menu-filter,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-submenu>div.tui-image-editor-menu-flip,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-icon .tui-image-editor-submenu>div.tui-image-editor-menu-icon,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-mask .tui-image-editor-submenu>div.tui-image-editor-menu-mask,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-resize .tui-image-editor-submenu>div.tui-image-editor-menu-resize,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-submenu>div.tui-image-editor-menu-rotate,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-shape .tui-image-editor-submenu>div.tui-image-editor-menu-shape,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-text .tui-image-editor-submenu>div.tui-image-editor-menu-text,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-zoom .tui-image-editor-submenu>div.tui-image-editor-menu-zoom{display:table-cell}.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-crop .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-draw .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-icon .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-mask .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-resize .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-shape .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-text .tui-image-editor-submenu,.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-zoom .tui-image-editor-submenu{display:table}.tui-image-editor-container .tui-image-editor-help-menu{background-color:rgba(255,255,255,.06);border-radius:20px;list-style:none;margin:0 auto;padding:0;position:absolute;text-align:center;vertical-align:middle;z-index:2}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history{background-color:#fff;box-shadow:0 2px 6px 0 rgba(0,0,0,.15);color:#444;cursor:auto;display:none;height:276px;padding:4px 2px;position:absolute;transform:translateX(calc(-50% + 12px));width:196px}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list{height:268px;list-style:none;overflow:hidden scroll;padding:0}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item{font-size:11px;height:24px;line-height:24px}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item{cursor:pointer;height:24px;position:relative}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item svg{height:24px;width:24px}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item span{display:inline-block;height:24px;text-align:left;width:128px}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-icon{display:inline-block;height:24px;left:6px;position:absolute;top:6px;width:24px}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-checkbox{display:none;height:24px;position:absolute;right:-6px;top:5px;width:24px}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.selected-item{background-color:rgba(119,119,119,.12)}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.selected-item .history-item-checkbox{display:inline-block}.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.disabled-item{color:#333;opacity:.3}.tui-image-editor-container .tui-image-editor-help-menu .opened .tie-panel-history{display:block}.tui-image-editor-container .tui-image-editor-help-menu .opened .tie-panel-history:before{content:"";display:inline-block;height:0;margin:0 auto;position:absolute;width:0}.tui-image-editor-container .filter-color-item{display:inline-block}.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox{display:block}.tui-image-editor-container .tui-image-editor-checkbox-wrap{display:inline-block!important;text-align:left}.tui-image-editor-container .tui-image-editor-checkbox-wrap.fixed-width{white-space:normal;width:187px}.tui-image-editor-container .tui-image-editor-checkbox{display:inline-block;margin:1px 0}.tui-image-editor-container .tui-image-editor-checkbox input{height:14px;opacity:0;width:14px}.tui-image-editor-container .tui-image-editor-checkbox>label>span{color:#fff;height:14px;position:relative}.tui-image-editor-container .tui-image-editor-checkbox>label>span:before,.tui-image-editor-container .tui-image-editor-checkbox input+label:before{background-color:#fff;border:0;border-radius:2px;box-sizing:border-box;content:"";display:inline-block;font-size:11px;height:14px;left:-19px;margin:0;padding-top:1px;position:absolute;text-align:center;top:6px;width:14px}.tui-image-editor-container .tui-image-editor-checkbox input[type=checkbox]:checked+span:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAMBJREFUKBWVkjEOwjAMRe2WgZW7IIHEDdhghhuwcQ42rlJugAQS54Cxa5cq1QM5TUpByZfS2j9+dlJVt/tX5ZxbS4ZU9VLkQvSHKTIGRaVJYFmKrBbTCJxE2UgCdDzMZDkHrOV6b95V0US6UmgKodujEZbJg0B0ZgEModO5lrY1TMQf1TpyJGBEjD+E2NPN7ukIUDiF/BfEXgRiGEw8NgkffYGYwCi808fpn/6OvfUfsDr/Vc1IfRf8sKnFVqeiVQfDu0tf/nWH9gAAAABJRU5ErkJggg==);background-size:cover}.tui-image-editor-container .tui-image-editor-selectlist-wrap{position:relative}.tui-image-editor-container .tui-image-editor-selectlist-wrap select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border:1px solid #cbdbdb;border-radius:0;height:28px;margin-top:4px;outline:0;padding:0 7px 0 10px;width:100%}.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist{background-color:#fff;border:1px solid #ccc;border-top:0;display:none;padding:4px 0;position:relative;top:-1px}.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist li{display:block;font-family:Noto Sans,sans-serif;padding:7px 10px;text-align:left}.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist li:hover{background-color:rgba(81,92,230,.05)}.tui-image-editor-container .tui-image-editor-selectlist-wrap:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYBgFOEOAEVkmPDxc89+/f6eAYjzI4kD2FyYmJrOVK1deh4kzwRggGiQBVJCELAZig8SQNYHEmEEEMrh69eo1HR0dfqCYJUickZGxf9WqVf3IakBsFBthklpaWmVA9mEQhrJhUoTp0NBQCRAmrHL4qgAAuu4cWZOZIGsAAAAASUVORK5CYII=);background-size:cover;content:"";display:inline-block;height:14px;position:absolute;right:5px;top:10px;width:14px}.tui-image-editor-container .tui-image-editor-selectlist-wrap select::-ms-expand{display:none}.tui-image-editor-container .tui-image-editor-virtual-range-bar .tui-image-editor-disabled,.tui-image-editor-container .tui-image-editor-virtual-range-pointer .tui-image-editor-disabled,.tui-image-editor-container .tui-image-editor-virtual-range-subbar .tui-image-editor-disabled{backbround-color:red}.tui-image-editor-container .tui-image-editor-range{display:inline-block;height:17px;position:relative;top:5px;width:166px}.tui-image-editor-container .tui-image-editor-virtual-range-bar{background-color:#666;height:2px;position:absolute;top:7px;width:100%}.tui-image-editor-container .tui-image-editor-virtual-range-subbar{background-color:#d1d1d1;height:100%;left:0;position:absolute;right:0}.tui-image-editor-container .tui-image-editor-virtual-range-pointer{background-color:#fff;border-radius:100%;cursor:pointer;height:12px;left:0;position:absolute;top:-5px;width:12px}.tui-image-editor-container .tui-image-editor-range-wrap{display:inline-block;margin-left:4px}.tui-image-editor-container .tui-image-editor-range-wrap.short .tui-image-editor-range{width:100px}.tui-image-editor-container .color-picker-control .tui-image-editor-range{margin-left:10px;width:108px}.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-pointer{background-color:#333}.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-bar{background-color:#ccc}.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-subbar{background-color:#606060}.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short{margin-left:19px;margin-top:-2px}.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label{color:#8e8e8e;font-weight:400}.tui-image-editor-container .tui-image-editor-range-wrap label{color:#fff;font-size:11px;margin-right:7px;vertical-align:baseline}.tui-image-editor-container .tui-image-editor-range-value{background-color:#1c1c1c;border:1px solid #d5d5d5;border-radius:2px;box-shadow:none;color:#fff;cursor:default;font-family:Noto Sans,sans-serif;font-weight:lighter;height:24px;margin-left:4px;margin-top:15px;outline:none;text-align:center;vertical-align:baseline;width:40px}.tui-image-editor-container .tui-image-editor-controls{background-color:#151515;bottom:0;display:table;height:64px;position:absolute;width:100%;z-index:2}.tui-image-editor-container .tui-image-editor-icpartition{background-color:#444;display:inline-block;height:24px;width:1px}.tui-image-editor-container.left .tui-image-editor-menu>.tui-image-editor-item[tooltip-content]:before{border-bottom:7px solid transparent;border-right:7px solid #2f2f2f;border-top:7px solid transparent;left:28px;top:11px}.tui-image-editor-container.left .tui-image-editor-menu>.tui-image-editor-item[tooltip-content]:after{left:42px;top:7px;white-space:nowrap}.tui-image-editor-container.left .tui-image-editor-submenu{height:100%;left:0;width:248px}.tui-image-editor-container.left .tui-image-editor-main-container{height:100%;left:64px;width:calc(100% - 64px)}.tui-image-editor-container.left .tui-image-editor-controls{display:table;height:100%;width:64px}.tui-image-editor-container.left .tui-image-editor-menu,.tui-image-editor-container.right .tui-image-editor-menu{white-space:inherit}.tui-image-editor-container.left .tui-image-editor-submenu,.tui-image-editor-container.right .tui-image-editor-submenu{white-space:normal}.tui-image-editor-container.left .tui-image-editor-submenu>div,.tui-image-editor-container.right .tui-image-editor-submenu>div{vertical-align:middle}.tui-image-editor-container.left .tui-image-editor-controls li,.tui-image-editor-container.right .tui-image-editor-controls li{display:inline-block;margin:4px auto}.tui-image-editor-container.left .tui-image-editor-icpartition,.tui-image-editor-container.right .tui-image-editor-icpartition{height:1px;position:relative;top:-7px;width:24px}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition{display:block;margin:auto;width:75%}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition>div,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition>div{border-bottom:1px solid #3c3c3c;border-left:0;height:10px;margin:0;width:100%}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-align,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-align{margin-right:0}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-item li,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-item li{margin-top:15px}.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-colorpicker-clearfix li,.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-colorpicker-clearfix li{margin-top:0}.tui-image-editor-container.left .tui-image-editor-checkbox-wrap.fixed-width,.tui-image-editor-container.right .tui-image-editor-checkbox-wrap.fixed-width{white-space:normal;width:182px}.tui-image-editor-container.left .tui-image-editor-range-wrap.tui-image-editor-newline label.range,.tui-image-editor-container.right .tui-image-editor-range-wrap.tui-image-editor-newline label.range{display:block;margin:auto;text-align:left;width:75%}.tui-image-editor-container.left .tui-image-editor-range,.tui-image-editor-container.right .tui-image-editor-range{width:136px}.tui-image-editor-container.right .tui-image-editor-menu>.tui-image-editor-item[tooltip-content]:before{border-bottom:7px solid transparent;border-left:7px solid #2f2f2f;border-top:7px solid transparent;left:-3px;top:11px}.tui-image-editor-container.right .tui-image-editor-menu>.tui-image-editor-item[tooltip-content]:after{left:unset;right:43px;top:7px;white-space:nowrap}.tui-image-editor-container.right .tui-image-editor-submenu{height:100%;right:0;width:248px}.tui-image-editor-container.right .tui-image-editor-main-container{height:100%;right:64px;width:calc(100% - 64px)}.tui-image-editor-container.right .tui-image-editor-controls{display:table;height:100%;right:0;width:64px}.tui-image-editor-container.bottom .tui-image-editor-submenu .tui-image-editor-partition.only-left-right,.tui-image-editor-container.top .tui-image-editor-submenu .tui-image-editor-partition.only-left-right{display:none}.tui-image-editor-container.bottom .tui-image-editor-submenu>div{padding-bottom:24px}.tui-image-editor-container.top .color-picker-control .triangle{border-bottom:8px solid #fff;border-left:7px solid transparent;border-right:7px solid transparent;border-top:0;top:-8px}.tui-image-editor-container.top .tui-image-editor-size-wrap{height:100%}.tui-image-editor-container.top .tui-image-editor-main-container{bottom:0}.tui-image-editor-container.top .tui-image-editor-menu>.tui-image-editor-item[tooltip-content]:before{border-bottom:7px solid #2f2f2f;border-top:0;left:13px;top:33px}.tui-image-editor-container.top .tui-image-editor-menu>.tui-image-editor-item[tooltip-content]:after{top:38px}.tui-image-editor-container.top .tui-image-editor-submenu{bottom:auto;top:0}.tui-image-editor-container.top .tui-image-editor-submenu>div{padding-top:24px;vertical-align:top}.tui-image-editor-container.top .tui-image-editor-controls-buttons,.tui-image-editor-container.top .tui-image-editor-controls-logo{display:table-cell}.tui-image-editor-container.top .tui-image-editor-main{height:calc(100% - 64px);top:64px}.tui-image-editor-container.top .tui-image-editor-controls{bottom:inherit;top:0}.tui-image-editor-container .tui-image-editor-help-menu.top{height:40px;left:50%;top:8px;transform:translateX(-50%);white-space:nowrap;width:506px}.tui-image-editor-container .tui-image-editor-help-menu.top .tie-panel-history{top:45px}.tui-image-editor-container .tui-image-editor-help-menu.top .opened .tie-panel-history:before{border-bottom:8px solid #fff;border-left:8px solid transparent;border-right:8px solid transparent;left:90px;top:-8px}.tui-image-editor-container .tui-image-editor-help-menu.top>.tui-image-editor-item[tooltip-content]:before{border:7px solid transparent;border-bottom:7px solid #2f2f2f;border-top:none;left:13px;top:35px}.tui-image-editor-container .tui-image-editor-help-menu.top>.tui-image-editor-item[tooltip-content]:after{left:-4px;top:41px;white-space:nowrap}.tui-image-editor-container .tui-image-editor-help-menu.top>.tui-image-editor-item[tooltip-content].opened:after,.tui-image-editor-container .tui-image-editor-help-menu.top>.tui-image-editor-item[tooltip-content].opened:before{content:none}.tui-image-editor-container .tui-image-editor-help-menu.bottom{bottom:8px;height:40px;left:50%;transform:translateX(-50%);white-space:nowrap;width:506px}.tui-image-editor-container .tui-image-editor-help-menu.bottom .tie-panel-history{bottom:45px}.tui-image-editor-container .tui-image-editor-help-menu.bottom .opened .tie-panel-history:before{border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #fff;bottom:-8px;left:90px}.tui-image-editor-container .tui-image-editor-help-menu.bottom>.tui-image-editor-item[tooltip-content]:before{border:7px solid transparent;border-bottom:none;border-top-color:#2f2f2f;bottom:36px;left:13px;top:auto}.tui-image-editor-container .tui-image-editor-help-menu.bottom>.tui-image-editor-item[tooltip-content]:after{bottom:41px;left:-4px;top:auto;white-space:nowrap}.tui-image-editor-container .tui-image-editor-help-menu.bottom>.tui-image-editor-item[tooltip-content].opened:after,.tui-image-editor-container .tui-image-editor-help-menu.bottom>.tui-image-editor-item[tooltip-content].opened:before{content:none}.tui-image-editor-container .tui-image-editor-help-menu.left{height:506px;left:8px;top:50%;transform:translateY(-50%);white-space:inherit;width:40px}.tui-image-editor-container .tui-image-editor-help-menu.left .tie-panel-history{left:140px;top:-4px}.tui-image-editor-container .tui-image-editor-help-menu.left .opened .tie-panel-history:before{border-bottom:8px solid transparent;border-right:8px solid #fff;border-top:8px solid transparent;left:-8px;top:14px}.tui-image-editor-container .tui-image-editor-help-menu.left .tui-image-editor-item{margin:4px auto;padding:6px 8px}.tui-image-editor-container .tui-image-editor-help-menu.left>.tui-image-editor-item[tooltip-content]:before{border:7px solid transparent;border-left:none;border-right-color:#2f2f2f;left:27px;top:11px}.tui-image-editor-container .tui-image-editor-help-menu.left>.tui-image-editor-item[tooltip-content]:after{left:40px;top:7px;white-space:nowrap}.tui-image-editor-container .tui-image-editor-help-menu.left>.tui-image-editor-item[tooltip-content].opened:after,.tui-image-editor-container .tui-image-editor-help-menu.left>.tui-image-editor-item[tooltip-content].opened:before{content:none}.tui-image-editor-container .tui-image-editor-help-menu.right{height:506px;right:8px;top:50%;transform:translateY(-50%);white-space:inherit;width:40px}.tui-image-editor-container .tui-image-editor-help-menu.right .tie-panel-history{right:-30px;top:-4px}.tui-image-editor-container .tui-image-editor-help-menu.right .opened .tie-panel-history:before{border-bottom:8px solid transparent;border-left:8px solid #fff;border-top:8px solid transparent;right:-8px;top:14px}.tui-image-editor-container .tui-image-editor-help-menu.right .tui-image-editor-item{margin:4px auto;padding:6px 8px}.tui-image-editor-container .tui-image-editor-help-menu.right>.tui-image-editor-item[tooltip-content]:before{border:7px solid transparent;border-left:7px solid #2f2f2f;border-right:none;left:-6px;top:11px}.tui-image-editor-container .tui-image-editor-help-menu.right>.tui-image-editor-item[tooltip-content]:after{left:auto;right:39px;top:7px;white-space:nowrap}.tui-image-editor-container .tui-image-editor-help-menu.right>.tui-image-editor-item[tooltip-content].opened:after,.tui-image-editor-container .tui-image-editor-help-menu.right>.tui-image-editor-item[tooltip-content].opened:before{content:none}.tui-image-editor-container .tie-icon-add-button .tui-image-editor-button{min-width:42px}.tui-image-editor-container .svg_ic-helpmenu,.tui-image-editor-container .svg_ic-menu{height:24px;width:24px}.tui-image-editor-container .svg_ic-submenu{height:32px;width:32px}.tui-image-editor-container .svg_img-bi{height:26px;width:257px}.tui-image-editor-container .tui-image-editor-controls svg>use,.tui-image-editor-container .tui-image-editor-help-menu svg>use{display:none}.tui-image-editor-container .tui-image-editor-controls .enabled svg:hover>use.hover,.tui-image-editor-container .tui-image-editor-controls .normal svg:hover>use.hover,.tui-image-editor-container .tui-image-editor-help-menu .enabled svg:hover>use.hover,.tui-image-editor-container .tui-image-editor-help-menu .normal svg:hover>use.hover{display:block}.tui-image-editor-container .tui-image-editor-controls .active svg:hover>use.hover,.tui-image-editor-container .tui-image-editor-help-menu .active svg:hover>use.hover{display:none}.tui-image-editor-container .tui-image-editor-controls .active svg>use.active,.tui-image-editor-container .tui-image-editor-controls .enabled svg>use.enabled,.tui-image-editor-container .tui-image-editor-controls .on svg>use.hover,.tui-image-editor-container .tui-image-editor-controls .opened svg>use.hover,.tui-image-editor-container .tui-image-editor-controls svg>use.normal,.tui-image-editor-container .tui-image-editor-help-menu .active svg>use.active,.tui-image-editor-container .tui-image-editor-help-menu .enabled svg>use.enabled,.tui-image-editor-container .tui-image-editor-help-menu .on svg>use.hover,.tui-image-editor-container .tui-image-editor-help-menu .opened svg>use.hover,.tui-image-editor-container .tui-image-editor-help-menu svg>use.normal{display:block}.tui-image-editor-container .tui-image-editor-controls .active svg>use.normal,.tui-image-editor-container .tui-image-editor-controls .enabled svg>use.normal,.tui-image-editor-container .tui-image-editor-help-menu .active svg>use.normal,.tui-image-editor-container .tui-image-editor-help-menu .enabled svg>use.normal{display:none}.tui-image-editor-container .tui-image-editor-controls .help.enabled svg>use.normal,.tui-image-editor-container .tui-image-editor-controls .help svg>use.disabled,.tui-image-editor-container .tui-image-editor-help-menu .help.enabled svg>use.normal,.tui-image-editor-container .tui-image-editor-help-menu .help svg>use.disabled{display:block}.tui-image-editor-container .tui-image-editor-controls .help.enabled svg>use.disabled,.tui-image-editor-container .tui-image-editor-help-menu .help.enabled svg>use.disabled{display:none}.tui-image-editor-container .tui-image-editor-controls:hover{z-index:3}.tui-image-editor-container div.tui-colorpicker-clearfix{background-color:#f5f5f5;border:1px solid #d5d5d5;border-radius:2px;height:28px;margin-top:6px;padding:4px 7px;width:159px}.tui-image-editor-container .tui-colorpicker-palette-hex{background-color:#f5f5f5;border:0;font-family:Noto Sans,sans-serif;font-size:11px;margin-top:2px;width:114px}.tui-image-editor-container .tui-colorpicker-palette-hex[value=""]+.tui-colorpicker-palette-preview,.tui-image-editor-container .tui-colorpicker-palette-hex[value="#ffffff"]+.tui-colorpicker-palette-preview{border:1px solid #ccc}.tui-image-editor-container .tui-colorpicker-palette-hex[value=""]+.tui-colorpicker-palette-preview{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC);background-size:cover}.tui-image-editor-container .tui-colorpicker-palette-preview{border:0;border-radius:100%;float:left;height:17px;width:17px}.tui-image-editor-container .color-picker-control{background-color:#fff;border-radius:2px;box-shadow:0 3px 22px 6px rgba(0,0,0,.15);display:none;padding:16px;position:absolute;width:192px;z-index:99}.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-toggle-slider{display:none}.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button{background-size:cover;border:0;border-radius:100%;font-size:1px;margin:2px}.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button[title=""],.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button[title="#ffffff"]{border:1px solid #ccc}.tui-image-editor-container .color-picker-control .triangle{border-left:7px solid transparent;border-right:7px solid transparent;border-top:8px solid #fff;bottom:-8px;height:0;left:84px;position:absolute;width:0}.tui-image-editor-container .color-picker-control .tui-colorpicker-container,.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container,.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container ul{height:auto;width:100%}.tui-image-editor-container .filter-color-item .color-picker-control label{font-color:#333;font-weight:400;margin-right:7pxleft}.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox{margin-top:0}.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox>label:before,.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox input+label:before{left:-16px}.tui-image-editor-container .color-picker{height:auto;width:100%}.tui-image-editor-container .color-picker-value{border:0;border-radius:100%;height:32px;margin:auto auto 1px;width:32px}.tui-image-editor-container .color-picker-value.transparent{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC);background-size:cover;border:1px solid #cbcbcb}.tui-image-editor-container .color-picker-value+label{color:#fff}.tui-image-editor-container .tui-image-editor-submenu svg>use{display:none}.tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype=icon-arrow-2] svg>use.active,.tie-icon-add-button.icon-arrow-3 .tui-image-editor-button[data-icontype=icon-arrow-3] svg>use.active,.tie-icon-add-button.icon-arrow .tui-image-editor-button[data-icontype=icon-arrow] svg>use.active,.tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype=icon-bubble] svg>use.active,.tie-icon-add-button.icon-heart .tui-image-editor-button[data-icontype=icon-heart] svg>use.active,.tie-icon-add-button.icon-location .tui-image-editor-button[data-icontype=icon-location] svg>use.active,.tie-icon-add-button.icon-polygon .tui-image-editor-button[data-icontype=icon-polygon] svg>use.active,.tie-icon-add-button.icon-star-2 .tui-image-editor-button[data-icontype=icon-star-2] svg>use.active,.tie-icon-add-button.icon-star .tui-image-editor-button[data-icontype=icon-star] svg>use.active,.tui-image-editor-container .tui-image-editor-submenu svg>use.normal{display:block}.tie-draw-line-select-button.free .tui-image-editor-button.free svg>use.normal,.tie-draw-line-select-button.line .tui-image-editor-button.line svg>use.normal{display:none}.tie-draw-line-select-button.free .tui-image-editor-button.free svg>use.active,.tie-draw-line-select-button.line .tui-image-editor-button.line svg>use.active{display:block}.tie-flip-button.flipX .tui-image-editor-button.flipX svg>use.normal,.tie-flip-button.flipY .tui-image-editor-button.flipY svg>use.normal,.tie-flip-button.resetFlip .tui-image-editor-button.resetFlip svg>use.normal{display:none}.tie-flip-button.flipX .tui-image-editor-button.flipX svg>use.active,.tie-flip-button.flipY .tui-image-editor-button.flipY svg>use.active,.tie-flip-button.resetFlip .tui-image-editor-button.resetFlip svg>use.active{display:block}.tie-mask-apply.apply.active .tui-image-editor-button.apply label{color:#fff}.tie-mask-apply.apply.active .tui-image-editor-button.apply svg>use.active{display:block}.tie-crop-button .tui-image-editor-button.apply,.tie-crop-preset-button .tui-image-editor-button.apply{margin-right:24px}.tie-crop-button .tui-image-editor-button.apply.active svg>use.active,.tie-crop-button .tui-image-editor-button.preset.active svg>use.active,.tie-crop-preset-button .tui-image-editor-button.apply.active svg>use.active,.tie-crop-preset-button .tui-image-editor-button.preset.active svg>use.active{display:block}.tie-resize-button .tui-image-editor-button.apply,.tie-resize-preset-button .tui-image-editor-button.apply{margin-right:24px}.tie-resize-button .tui-image-editor-button.apply.active svg>use.active,.tie-resize-button .tui-image-editor-button.preset.active svg>use.active,.tie-resize-preset-button .tui-image-editor-button.apply.active svg>use.active,.tie-resize-preset-button .tui-image-editor-button.preset.active svg>use.active{display:block}.tie-shape-button.circle .tui-image-editor-button.circle svg>use.normal,.tie-shape-button.rect .tui-image-editor-button.rect svg>use.normal,.tie-shape-button.triangle .tui-image-editor-button.triangle svg>use.normal{display:none}.tie-shape-button.circle .tui-image-editor-button.circle svg>use.active,.tie-shape-button.rect .tui-image-editor-button.rect svg>use.active,.tie-shape-button.triangle .tui-image-editor-button.triangle svg>use.active,.tie-text-align-button.tie-text-align-center .tui-image-editor-button.center svg>use.active,.tie-text-align-button.tie-text-align-left .tui-image-editor-button.left svg>use.active,.tie-text-align-button.tie-text-align-right .tui-image-editor-button.right svg>use.active,.tie-text-effect-button .tui-image-editor-button.active svg>use.active{display:block}.tie-icon-image-file,.tie-mask-image-file{border:1px solid green;cursor:inherit;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.tie-zoom-button.flipX .tui-image-editor-button.flipX svg>use.normal,.tie-zoom-button.flipY .tui-image-editor-button.flipY svg>use.normal,.tie-zoom-button.resetFlip .tui-image-editor-button.resetFlip svg>use.normal{display:none}.tie-zoom-button.flipX .tui-image-editor-button.flipX svg>use.active,.tie-zoom-button.flipY .tui-image-editor-button.flipY svg>use.active,.tie-zoom-button.resetFlip .tui-image-editor-button.resetFlip svg>use.active{display:block}.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls ul{text-align:right}.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls-logo{display:none} \ No newline at end of file diff --git a/apps/image-editor/dist/tui-image-editor.min.css.map b/apps/image-editor/dist/tui-image-editor.min.css.map deleted file mode 100644 index 920a2f749..000000000 --- a/apps/image-editor/dist/tui-image-editor.min.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["tui-image-editor.min.css","src/css/main.styl","index.styl","src/css/gridtable.styl","src/css/submenu.styl","src/css/checkbox.styl","src/css/range.styl","src/css/position.styl","src/css/icon.styl","src/css/colorpicker.styl","src/css/buttons.styl","src/css/index.styl"],"names":[],"mappings":"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","file":"tui-image-editor.min.css","sourcesContent":["/*!\n * tui-image-editor.min.js\n * @version 3.15.0\n * @author NHN. FE Development Lab \n * @license MIT\n */\nbody > textarea {\n position: fixed !important;\n}\n.tui-image-editor-container {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n min-height: 300px;\n height: 100%;\n position: relative;\n background-color: #282828;\n overflow: hidden;\n letter-spacing: 0.3px;\n}\n.tui-image-editor-container div,\n.tui-image-editor-container ul,\n.tui-image-editor-container label,\n.tui-image-editor-container input,\n.tui-image-editor-container li {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n -ms-user-select: none;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n}\n.tui-image-editor-container .tui-image-editor-header {\n/* BUTTON AND LOGO */\n min-width: 533px;\n position: absolute;\n background-color: #151515;\n top: 0;\n width: 100%;\n}\n.tui-image-editor-container .tui-image-editor-header-buttons,\n.tui-image-editor-container .tui-image-editor-controls-buttons {\n float: right;\n margin: 8px;\n}\n.tui-image-editor-container .tui-image-editor-header-logo,\n.tui-image-editor-container .tui-image-editor-controls-logo {\n float: left;\n width: 30%;\n padding: 17px;\n}\n.tui-image-editor-container .tui-image-editor-controls-logo,\n.tui-image-editor-container .tui-image-editor-controls-buttons {\n width: 270px;\n height: 100%;\n display: none;\n}\n.tui-image-editor-container .tui-image-editor-header-buttons button,\n.tui-image-editor-container .tui-image-editor-header-buttons div,\n.tui-image-editor-container .tui-image-editor-controls-buttons button,\n.tui-image-editor-container .tui-image-editor-controls-buttons div {\n display: inline-block;\n position: relative;\n width: 120px;\n height: 40px;\n padding: 0;\n line-height: 40px;\n outline: none;\n border-radius: 20px;\n border: 1px solid #ddd;\n font-family: 'Noto Sans', sans-serif;\n font-size: 12px;\n font-weight: bold;\n cursor: pointer;\n vertical-align: middle;\n letter-spacing: 0.3px;\n text-align: center;\n}\n.tui-image-editor-container .tui-image-editor-download-btn {\n background-color: #fdba3b;\n border-color: #fdba3b;\n color: #fff;\n}\n.tui-image-editor-container .tui-image-editor-load-btn {\n position: absolute;\n left: 0;\n right: 0;\n display: inline-block;\n top: 0;\n bottom: 0;\n width: 100%;\n cursor: pointer;\n opacity: 0;\n}\n.tui-image-editor-container .tui-image-editor-main-container {\n position: absolute;\n width: 100%;\n top: 0;\n bottom: 64px;\n}\n.tui-image-editor-container .tui-image-editor-main {\n position: absolute;\n text-align: center;\n top: 64px;\n bottom: 0;\n right: 0;\n left: 0;\n}\n.tui-image-editor-container .tui-image-editor-wrap {\n position: absolute;\n bottom: 0;\n width: 100%;\n overflow: auto;\n}\n.tui-image-editor-container .tui-image-editor-wrap .tui-image-editor-size-wrap {\n display: table;\n width: 100%;\n height: 100%;\n}\n.tui-image-editor-container .tui-image-editor-wrap .tui-image-editor-size-wrap .tui-image-editor-align-wrap {\n display: table-cell;\n vertical-align: middle;\n}\n.tui-image-editor-container .tui-image-editor {\n position: relative;\n display: inline-block;\n}\n.tui-image-editor-container .tui-image-editor-menu,\n.tui-image-editor-container .tui-image-editor-help-menu {\n width: auto;\n list-style: none;\n padding: 0;\n margin: 0 auto;\n display: table-cell;\n text-align: center;\n vertical-align: middle;\n white-space: nowrap;\n}\n.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item,\n.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item {\n position: relative;\n display: inline-block;\n border-radius: 2px;\n padding: 7px 8px 3px 8px;\n cursor: pointer;\n margin: 0 4px;\n}\n.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:hover:before,\n.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item[tooltip-content]:hover:before {\n content: '';\n position: absolute;\n display: inline-block;\n margin: 0 auto 0;\n width: 0;\n height: 0;\n border-right: 7px solid transparent;\n border-top: 7px solid #2f2f2f;\n border-left: 7px solid transparent;\n left: 13px;\n top: -2px;\n}\n.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:hover:after,\n.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item[tooltip-content]:hover:after {\n content: attr(tooltip-content);\n position: absolute;\n display: inline-block;\n background-color: #2f2f2f;\n color: #fff;\n padding: 5px 8px;\n font-size: 11px;\n font-weight: lighter;\n border-radius: 3px;\n max-height: 23px;\n top: -25px;\n left: 0;\n min-width: 24px;\n}\n.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item.active,\n.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item.active {\n background-color: #fff;\n transition: all 0.3s ease;\n}\n.tui-image-editor-container .tui-image-editor-wrap {\n position: absolute;\n}\n.tui-image-editor-container .tui-image-editor-grid-visual {\n display: none;\n position: absolute;\n width: 100%;\n height: 100%;\n border: 1px solid rgba(255,255,255,0.7);\n}\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor {\n transition: none;\n}\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-grid-visual,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-grid-visual,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-resize .tui-image-editor-grid-visual {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-grid-visual table {\n width: 100%;\n height: 100%;\n border-collapse: collapse;\n}\n.tui-image-editor-container .tui-image-editor-grid-visual table td {\n border: 1px solid rgba(255,255,255,0.3);\n}\n.tui-image-editor-container .tui-image-editor-grid-visual table td.dot:before {\n content: '';\n position: absolute;\n box-sizing: border-box;\n width: 10px;\n height: 10px;\n border: 0;\n box-shadow: 0 0 1px 0 rgba(0,0,0,0.3);\n border-radius: 100%;\n background-color: #fff;\n}\n.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-top:before {\n top: -5px;\n left: -5px;\n}\n.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-top:before {\n top: -5px;\n right: -5px;\n}\n.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-bottom:before {\n bottom: -5px;\n left: -5px;\n}\n.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-bottom:before {\n bottom: -5px;\n right: -5px;\n}\n.tui-image-editor-container .tui-image-editor-submenu {\n display: none;\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 150px;\n white-space: nowrap;\n z-index: 2;\n}\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover svg > use.active {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item li {\n display: inline-block;\n vertical-align: top;\n}\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-newline {\n display: block;\n margin-top: 0;\n}\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button {\n position: relative;\n cursor: pointer;\n display: inline-block;\n font-weight: normal;\n font-size: 11px;\n margin: 0 9px 0 9px;\n}\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.preset {\n margin: 0 9px 20px 5px;\n}\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item label > span {\n display: inline-block;\n cursor: pointer;\n padding-top: 5px;\n font-family: \"Noto Sans\", sans-serif;\n font-size: 11px;\n}\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.apply label,\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.cancel label {\n vertical-align: 7px;\n}\n.tui-image-editor-container .tui-image-editor-submenu > div {\n display: none;\n vertical-align: bottom;\n}\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-style {\n opacity: 0.95;\n z-index: -1;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-partition > div {\n width: 1px;\n height: 52px;\n border-left: 1px solid #3c3c3c;\n margin: 0 8px 0 8px;\n}\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-partition > div {\n height: 108px;\n margin: 0 29px 0 0px;\n}\n.tui-image-editor-container .tui-image-editor-submenu-align {\n text-align: left;\n margin-right: 30px;\n}\n.tui-image-editor-container .tui-image-editor-submenu-align label > span {\n width: 55px;\n white-space: nowrap;\n}\n.tui-image-editor-container .tui-image-editor-submenu-align:first-child {\n margin-right: 0;\n}\n.tui-image-editor-container .tui-image-editor-submenu-align:first-child label > span {\n width: 70px;\n}\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-crop .tui-image-editor-submenu > div.tui-image-editor-menu-crop,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-resize .tui-image-editor-submenu > div.tui-image-editor-menu-resize,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-submenu > div.tui-image-editor-menu-flip,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-submenu > div.tui-image-editor-menu-rotate,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-shape .tui-image-editor-submenu > div.tui-image-editor-menu-shape,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-text .tui-image-editor-submenu > div.tui-image-editor-menu-text,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-mask .tui-image-editor-submenu > div.tui-image-editor-menu-mask,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-icon .tui-image-editor-submenu > div.tui-image-editor-menu-icon,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-draw .tui-image-editor-submenu > div.tui-image-editor-menu-draw,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-submenu > div.tui-image-editor-menu-filter,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-zoom .tui-image-editor-submenu > div.tui-image-editor-menu-zoom {\n display: table-cell;\n}\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-crop .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-resize .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-shape .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-text .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-mask .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-icon .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-draw .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-zoom .tui-image-editor-submenu {\n display: table;\n}\n.tui-image-editor-container .tui-image-editor-help-menu {\n list-style: none;\n padding: 0;\n margin: 0 auto;\n text-align: center;\n vertical-align: middle;\n border-radius: 20px;\n background-color: rgba(255,255,255,0.06);\n z-index: 2;\n position: absolute;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history {\n display: none;\n background-color: #fff;\n color: #444;\n position: absolute;\n width: 196px;\n height: 276px;\n padding: 4px 2px;\n box-shadow: 0 2px 6px 0 rgba(0,0,0,0.15);\n cursor: auto;\n transform: translateX(calc(-50% + 12px));\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list {\n height: 268px;\n padding: 0;\n overflow: hidden scroll;\n list-style: none;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item {\n height: 24px;\n font-size: 11px;\n line-height: 24px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item {\n position: relative;\n height: 24px;\n cursor: pointer;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item svg {\n width: 24px;\n height: 24px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item span {\n display: inline-block;\n width: 128px;\n height: 24px;\n text-align: left;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-icon {\n display: inline-block;\n width: 24px;\n height: 24px;\n position: absolute;\n top: 6px;\n left: 6px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-checkbox {\n display: none;\n width: 24px;\n height: 24px;\n position: absolute;\n top: 5px;\n right: -6px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.selected-item {\n background-color: rgba(119,119,119,0.12);\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.selected-item .history-item-checkbox {\n display: inline-block;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.disabled-item {\n color: #333;\n opacity: 0.3;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .opened .tie-panel-history {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .opened .tie-panel-history:before {\n content: '';\n position: absolute;\n display: inline-block;\n margin: 0 auto;\n width: 0;\n height: 0;\n}\n.tui-image-editor-container .filter-color-item {\n display: inline-block;\n}\n.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-checkbox-wrap {\n display: inline-block !important;\n text-align: left;\n}\n.tui-image-editor-container .tui-image-editor-checkbox-wrap.fixed-width {\n width: 187px;\n white-space: normal;\n}\n.tui-image-editor-container .tui-image-editor-checkbox {\n display: inline-block;\n margin: 1px 0 1px 0;\n}\n.tui-image-editor-container .tui-image-editor-checkbox input {\n width: 14px;\n height: 14px;\n opacity: 0;\n}\n.tui-image-editor-container .tui-image-editor-checkbox > label > span {\n color: #fff;\n height: 14px;\n position: relative;\n}\n.tui-image-editor-container .tui-image-editor-checkbox input + label:before,\n.tui-image-editor-container .tui-image-editor-checkbox > label > span:before {\n content: '';\n position: absolute;\n width: 14px;\n height: 14px;\n background-color: #fff;\n top: 6px;\n left: -19px;\n display: inline-block;\n margin: 0;\n text-align: center;\n font-size: 11px;\n border: 0;\n border-radius: 2px;\n padding-top: 1px;\n box-sizing: border-box;\n}\n.tui-image-editor-container .tui-image-editor-checkbox input[type='checkbox']:checked + span:before {\n background-size: cover;\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAMBJREFUKBWVkjEOwjAMRe2WgZW7IIHEDdhghhuwcQ42rlJugAQS54Cxa5cq1QM5TUpByZfS2j9+dlJVt/tX5ZxbS4ZU9VLkQvSHKTIGRaVJYFmKrBbTCJxE2UgCdDzMZDkHrOV6b95V0US6UmgKodujEZbJg0B0ZgEModO5lrY1TMQf1TpyJGBEjD+E2NPN7ukIUDiF/BfEXgRiGEw8NgkffYGYwCi808fpn/6OvfUfsDr/Vc1IfRf8sKnFVqeiVQfDu0tf/nWH9gAAAABJRU5ErkJggg==\");\n}\n.tui-image-editor-container .tui-image-editor-selectlist-wrap {\n position: relative;\n}\n.tui-image-editor-container .tui-image-editor-selectlist-wrap select {\n width: 100%;\n height: 28px;\n margin-top: 4px;\n border: 0;\n outline: 0;\n border-radius: 0;\n border: 1px solid #cbdbdb;\n background-color: #fff;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0 7px 0 10px;\n}\n.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist {\n display: none;\n position: relative;\n top: -1px;\n border: 1px solid #ccc;\n background-color: #fff;\n border-top: 0px;\n padding: 4px 0;\n}\n.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist li {\n display: block;\n text-align: left;\n padding: 7px 10px;\n font-family: 'Noto Sans', sans-serif;\n}\n.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist li:hover {\n background-color: rgba(81,92,230,0.05);\n}\n.tui-image-editor-container .tui-image-editor-selectlist-wrap:before {\n content: '';\n position: absolute;\n display: inline-block;\n width: 14px;\n height: 14px;\n right: 5px;\n top: 10px;\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYBgFOEOAEVkmPDxc89+/f6eAYjzI4kD2FyYmJrOVK1deh4kzwRggGiQBVJCELAZig8SQNYHEmEEEMrh69eo1HR0dfqCYJUickZGxf9WqVf3IakBsFBthklpaWmVA9mEQhrJhUoTp0NBQCRAmrHL4qgAAuu4cWZOZIGsAAAAASUVORK5CYII=\");\n background-size: cover;\n}\n.tui-image-editor-container .tui-image-editor-selectlist-wrap select::-ms-expand {\n display: none;\n}\n.tui-image-editor-container .tui-image-editor-virtual-range-bar .tui-image-editor-disabled,\n.tui-image-editor-container .tui-image-editor-virtual-range-subbar .tui-image-editor-disabled,\n.tui-image-editor-container .tui-image-editor-virtual-range-pointer .tui-image-editor-disabled {\n backbround-color: #f00;\n}\n.tui-image-editor-container .tui-image-editor-range {\n position: relative;\n top: 5px;\n width: 166px;\n height: 17px;\n display: inline-block;\n}\n.tui-image-editor-container .tui-image-editor-virtual-range-bar {\n top: 7px;\n position: absolute;\n width: 100%;\n height: 2px;\n background-color: #666;\n}\n.tui-image-editor-container .tui-image-editor-virtual-range-subbar {\n position: absolute;\n height: 100%;\n left: 0;\n right: 0;\n background-color: #d1d1d1;\n}\n.tui-image-editor-container .tui-image-editor-virtual-range-pointer {\n position: absolute;\n cursor: pointer;\n top: -5px;\n left: 0;\n width: 12px;\n height: 12px;\n background-color: #fff;\n border-radius: 100%;\n}\n.tui-image-editor-container .tui-image-editor-range-wrap {\n display: inline-block;\n margin-left: 4px;\n}\n.tui-image-editor-container .tui-image-editor-range-wrap.short .tui-image-editor-range {\n width: 100px;\n}\n.tui-image-editor-container .color-picker-control .tui-image-editor-range {\n width: 108px;\n margin-left: 10px;\n}\n.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-pointer {\n background-color: #333;\n}\n.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-bar {\n background-color: #ccc;\n}\n.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-subbar {\n background-color: #606060;\n}\n.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short {\n margin-top: -2px;\n margin-left: 19px;\n}\n.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label {\n color: #8e8e8e;\n font-weight: normal;\n}\n.tui-image-editor-container .tui-image-editor-range-wrap label {\n vertical-align: baseline;\n font-size: 11px;\n margin-right: 7px;\n color: #fff;\n}\n.tui-image-editor-container .tui-image-editor-range-value {\n cursor: default;\n width: 40px;\n height: 24px;\n outline: none;\n border-radius: 2px;\n box-shadow: none;\n border: 1px solid #d5d5d5;\n text-align: center;\n background-color: #1c1c1c;\n color: #fff;\n font-weight: lighter;\n vertical-align: baseline;\n font-family: 'Noto Sans', sans-serif;\n margin-top: 15px;\n margin-left: 4px;\n}\n.tui-image-editor-container .tui-image-editor-controls {\n position: absolute;\n background-color: #151515;\n width: 100%;\n height: 64px;\n display: table;\n bottom: 0;\n z-index: 2;\n}\n.tui-image-editor-container .tui-image-editor-icpartition {\n display: inline-block;\n background-color: #444;\n width: 1px;\n height: 24px;\n}\n.tui-image-editor-container.left .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:before {\n left: 28px;\n top: 11px;\n border-right: 7px solid #2f2f2f;\n border-top: 7px solid transparent;\n border-bottom: 7px solid transparent;\n}\n.tui-image-editor-container.left .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:after {\n top: 7px;\n left: 42px;\n white-space: nowrap;\n}\n.tui-image-editor-container.left .tui-image-editor-submenu {\n left: 0;\n height: 100%;\n width: 248px;\n}\n.tui-image-editor-container.left .tui-image-editor-main-container {\n left: 64px;\n width: calc(100% - 64px);\n height: 100%;\n}\n.tui-image-editor-container.left .tui-image-editor-controls {\n width: 64px;\n height: 100%;\n display: table;\n}\n.tui-image-editor-container.left .tui-image-editor-menu,\n.tui-image-editor-container.right .tui-image-editor-menu {\n white-space: inherit;\n}\n.tui-image-editor-container.left .tui-image-editor-submenu,\n.tui-image-editor-container.right .tui-image-editor-submenu {\n white-space: normal;\n}\n.tui-image-editor-container.left .tui-image-editor-submenu > div,\n.tui-image-editor-container.right .tui-image-editor-submenu > div {\n vertical-align: middle;\n}\n.tui-image-editor-container.left .tui-image-editor-controls li,\n.tui-image-editor-container.right .tui-image-editor-controls li {\n display: inline-block;\n margin: 4px auto;\n}\n.tui-image-editor-container.left .tui-image-editor-icpartition,\n.tui-image-editor-container.right .tui-image-editor-icpartition {\n position: relative;\n top: -7px;\n width: 24px;\n height: 1px;\n}\n.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition,\n.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition {\n display: block;\n width: 75%;\n margin: auto;\n}\n.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition > div,\n.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition > div {\n border-left: 0;\n height: 10px;\n border-bottom: 1px solid #3c3c3c;\n width: 100%;\n margin: 0;\n}\n.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-align,\n.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-align {\n margin-right: 0;\n}\n.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-item li,\n.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-item li {\n margin-top: 15px;\n}\n.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-colorpicker-clearfix li,\n.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-colorpicker-clearfix li {\n margin-top: 0;\n}\n.tui-image-editor-container.left .tui-image-editor-checkbox-wrap.fixed-width,\n.tui-image-editor-container.right .tui-image-editor-checkbox-wrap.fixed-width {\n width: 182px;\n white-space: normal;\n}\n.tui-image-editor-container.left .tui-image-editor-range-wrap.tui-image-editor-newline label.range,\n.tui-image-editor-container.right .tui-image-editor-range-wrap.tui-image-editor-newline label.range {\n display: block;\n text-align: left;\n width: 75%;\n margin: auto;\n}\n.tui-image-editor-container.left .tui-image-editor-range,\n.tui-image-editor-container.right .tui-image-editor-range {\n width: 136px;\n}\n.tui-image-editor-container.right .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:before {\n left: -3px;\n top: 11px;\n border-left: 7px solid #2f2f2f;\n border-top: 7px solid transparent;\n border-bottom: 7px solid transparent;\n}\n.tui-image-editor-container.right .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:after {\n top: 7px;\n left: unset;\n right: 43px;\n white-space: nowrap;\n}\n.tui-image-editor-container.right .tui-image-editor-submenu {\n right: 0;\n height: 100%;\n width: 248px;\n}\n.tui-image-editor-container.right .tui-image-editor-main-container {\n right: 64px;\n width: calc(100% - 64px);\n height: 100%;\n}\n.tui-image-editor-container.right .tui-image-editor-controls {\n right: 0;\n width: 64px;\n height: 100%;\n display: table;\n}\n.tui-image-editor-container.top .tui-image-editor-submenu .tui-image-editor-partition.only-left-right,\n.tui-image-editor-container.bottom .tui-image-editor-submenu .tui-image-editor-partition.only-left-right {\n display: none;\n}\n.tui-image-editor-container.bottom .tui-image-editor-submenu > div {\n padding-bottom: 24px;\n}\n.tui-image-editor-container.top .color-picker-control .triangle {\n top: -8px;\n border-right: 7px solid transparent;\n border-top: 0px;\n border-left: 7px solid transparent;\n border-bottom: 8px solid #fff;\n}\n.tui-image-editor-container.top .tui-image-editor-size-wrap {\n height: 100%;\n}\n.tui-image-editor-container.top .tui-image-editor-main-container {\n bottom: 0;\n}\n.tui-image-editor-container.top .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:before {\n left: 13px;\n border-top: 0;\n border-bottom: 7px solid #2f2f2f;\n top: 33px;\n}\n.tui-image-editor-container.top .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:after {\n top: 38px;\n}\n.tui-image-editor-container.top .tui-image-editor-submenu {\n top: 0;\n bottom: auto;\n}\n.tui-image-editor-container.top .tui-image-editor-submenu > div {\n padding-top: 24px;\n vertical-align: top;\n}\n.tui-image-editor-container.top .tui-image-editor-controls-logo {\n display: table-cell;\n}\n.tui-image-editor-container.top .tui-image-editor-controls-buttons {\n display: table-cell;\n}\n.tui-image-editor-container.top .tui-image-editor-main {\n top: 64px;\n height: calc(100% - 64px);\n}\n.tui-image-editor-container.top .tui-image-editor-controls {\n top: 0;\n bottom: inherit;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.top {\n white-space: nowrap;\n width: 506px;\n height: 40px;\n top: 8px;\n left: 50%;\n transform: translateX(-50%);\n}\n.tui-image-editor-container .tui-image-editor-help-menu.top .tie-panel-history {\n top: 45px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.top .opened .tie-panel-history:before {\n border-right: 8px solid transparent;\n border-left: 8px solid transparent;\n border-bottom: 8px solid #fff;\n left: 90px;\n top: -8px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content]:before {\n left: 13px;\n top: 35px;\n border: none;\n border-bottom: 7px solid #2f2f2f;\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content]:after {\n top: 41px;\n left: -4px;\n white-space: nowrap;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content].opened:before,\n.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content].opened:after {\n content: none;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.bottom {\n white-space: nowrap;\n width: 506px;\n height: 40px;\n bottom: 8px;\n left: 50%;\n transform: translateX(-50%);\n}\n.tui-image-editor-container .tui-image-editor-help-menu.bottom .tie-panel-history {\n bottom: 45px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.bottom .opened .tie-panel-history:before {\n border-right: 8px solid transparent;\n border-left: 8px solid transparent;\n border-top: 8px solid #fff;\n left: 90px;\n bottom: -8px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content]:before {\n left: 13px;\n top: auto;\n bottom: 36px;\n border: none;\n border-top: 7px solid #2f2f2f;\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content]:after {\n top: auto;\n left: -4px;\n bottom: 41px;\n white-space: nowrap;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content].opened:before,\n.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content].opened:after {\n content: none;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.left {\n white-space: inherit;\n width: 40px;\n height: 506px;\n left: 8px;\n top: 50%;\n transform: translateY(-50%);\n}\n.tui-image-editor-container .tui-image-editor-help-menu.left .tie-panel-history {\n left: 140px;\n top: -4px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.left .opened .tie-panel-history:before {\n border-top: 8px solid transparent;\n border-bottom: 8px solid transparent;\n border-right: 8px solid #fff;\n left: -8px;\n top: 14px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.left .tui-image-editor-item {\n margin: 4px auto;\n padding: 6px 8px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content]:before {\n left: 27px;\n top: 11px;\n border: none;\n border-right: 7px solid #2f2f2f;\n border-top: 7px solid transparent;\n border-bottom: 7px solid transparent;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content]:after {\n top: 7px;\n left: 40px;\n white-space: nowrap;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content].opened:before,\n.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content].opened:after {\n content: none;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.right {\n white-space: inherit;\n width: 40px;\n height: 506px;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n}\n.tui-image-editor-container .tui-image-editor-help-menu.right .tie-panel-history {\n right: -30px;\n top: -4px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.right .opened .tie-panel-history:before {\n border-top: 8px solid transparent;\n border-bottom: 8px solid transparent;\n border-left: 8px solid #fff;\n right: -8px;\n top: 14px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.right .tui-image-editor-item {\n margin: 4px auto;\n padding: 6px 8px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content]:before {\n left: -6px;\n top: 11px;\n border: none;\n border-left: 7px solid #2f2f2f;\n border-top: 7px solid transparent;\n border-bottom: 7px solid transparent;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content]:after {\n top: 7px;\n left: auto;\n right: 39px;\n white-space: nowrap;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content].opened:before,\n.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content].opened:after {\n content: none;\n}\n.tui-image-editor-container .tie-icon-add-button .tui-image-editor-button {\n min-width: 42px;\n}\n.tui-image-editor-container .svg_ic-menu,\n.tui-image-editor-container .svg_ic-helpmenu {\n width: 24px;\n height: 24px;\n}\n.tui-image-editor-container .svg_ic-submenu {\n width: 32px;\n height: 32px;\n}\n.tui-image-editor-container .svg_img-bi {\n width: 257px;\n height: 26px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu svg > use,\n.tui-image-editor-container .tui-image-editor-controls svg > use {\n display: none;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .enabled svg:hover > use.hover,\n.tui-image-editor-container .tui-image-editor-controls .enabled svg:hover > use.hover,\n.tui-image-editor-container .tui-image-editor-help-menu .normal svg:hover > use.hover,\n.tui-image-editor-container .tui-image-editor-controls .normal svg:hover > use.hover {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .active svg:hover > use.hover,\n.tui-image-editor-container .tui-image-editor-controls .active svg:hover > use.hover {\n display: none;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .on svg > use.hover,\n.tui-image-editor-container .tui-image-editor-controls .on svg > use.hover,\n.tui-image-editor-container .tui-image-editor-help-menu .opened svg > use.hover,\n.tui-image-editor-container .tui-image-editor-controls .opened svg > use.hover {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-help-menu svg > use.normal,\n.tui-image-editor-container .tui-image-editor-controls svg > use.normal {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .active svg > use.active,\n.tui-image-editor-container .tui-image-editor-controls .active svg > use.active {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .enabled svg > use.enabled,\n.tui-image-editor-container .tui-image-editor-controls .enabled svg > use.enabled {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .active svg > use.normal,\n.tui-image-editor-container .tui-image-editor-controls .active svg > use.normal,\n.tui-image-editor-container .tui-image-editor-help-menu .enabled svg > use.normal,\n.tui-image-editor-container .tui-image-editor-controls .enabled svg > use.normal {\n display: none;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .help svg > use.disabled,\n.tui-image-editor-container .tui-image-editor-controls .help svg > use.disabled,\n.tui-image-editor-container .tui-image-editor-help-menu .help.enabled svg > use.normal,\n.tui-image-editor-container .tui-image-editor-controls .help.enabled svg > use.normal {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .help.enabled svg > use.disabled,\n.tui-image-editor-container .tui-image-editor-controls .help.enabled svg > use.disabled {\n display: none;\n}\n.tui-image-editor-container .tui-image-editor-controls:hover {\n z-index: 3;\n}\n.tui-image-editor-container div.tui-colorpicker-clearfix {\n width: 159px;\n height: 28px;\n border: 1px solid #d5d5d5;\n border-radius: 2px;\n background-color: #f5f5f5;\n margin-top: 6px;\n padding: 4px 7px 4px 7px;\n}\n.tui-image-editor-container .tui-colorpicker-palette-hex {\n width: 114px;\n background-color: #f5f5f5;\n border: 0;\n font-size: 11px;\n margin-top: 2px;\n font-family: 'Noto Sans', sans-serif;\n}\n.tui-image-editor-container .tui-colorpicker-palette-hex[value='#ffffff'] + .tui-colorpicker-palette-preview,\n.tui-image-editor-container .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview {\n border: 1px solid #ccc;\n}\n.tui-image-editor-container .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview {\n background-size: cover;\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC\");\n}\n.tui-image-editor-container .tui-colorpicker-palette-preview {\n border-radius: 100%;\n float: left;\n width: 17px;\n height: 17px;\n border: 0;\n}\n.tui-image-editor-container .color-picker-control {\n position: absolute;\n display: none;\n z-index: 99;\n width: 192px;\n background-color: #fff;\n box-shadow: 0 3px 22px 6px rgba(0,0,0,0.15);\n padding: 16px;\n border-radius: 2px;\n}\n.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-toggle-slider {\n display: none;\n}\n.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button {\n border: 0;\n border-radius: 100%;\n margin: 2px;\n background-size: cover;\n font-size: 1px;\n}\n.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button[title='#ffffff'] {\n border: 1px solid #ccc;\n}\n.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button[title=''] {\n border: 1px solid #ccc;\n}\n.tui-image-editor-container .color-picker-control .triangle {\n width: 0;\n height: 0;\n border-right: 7px solid transparent;\n border-top: 8px solid #fff;\n border-left: 7px solid transparent;\n position: absolute;\n bottom: -8px;\n left: 84px;\n}\n.tui-image-editor-container .color-picker-control .tui-colorpicker-container,\n.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container ul,\n.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container {\n width: 100%;\n height: auto;\n}\n.tui-image-editor-container .filter-color-item .color-picker-control label {\n font-color: #333;\n font-weight: normal;\n margin-right: 7pxleft;\n}\n.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox {\n margin-top: 0;\n}\n.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox input + label:before,\n.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox > label:before {\n left: -16px;\n}\n.tui-image-editor-container .color-picker {\n width: 100%;\n height: auto;\n}\n.tui-image-editor-container .color-picker-value {\n width: 32px;\n height: 32px;\n border: 0px;\n border-radius: 100%;\n margin: auto;\n margin-bottom: 1px;\n}\n.tui-image-editor-container .color-picker-value.transparent {\n border: 1px solid #cbcbcb;\n background-size: cover;\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC\");\n}\n.tui-image-editor-container .color-picker-value + label {\n color: #fff;\n}\n.tui-image-editor-container .tui-image-editor-submenu svg > use {\n display: none;\n}\n.tui-image-editor-container .tui-image-editor-submenu svg > use.normal {\n display: block;\n}\n.tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype=\"icon-bubble\"] svg > use.active,\n.tie-icon-add-button.icon-heart .tui-image-editor-button[data-icontype=\"icon-heart\"] svg > use.active,\n.tie-icon-add-button.icon-location .tui-image-editor-button[data-icontype=\"icon-location\"] svg > use.active,\n.tie-icon-add-button.icon-polygon .tui-image-editor-button[data-icontype=\"icon-polygon\"] svg > use.active,\n.tie-icon-add-button.icon-star .tui-image-editor-button[data-icontype=\"icon-star\"] svg > use.active,\n.tie-icon-add-button.icon-star-2 .tui-image-editor-button[data-icontype=\"icon-star-2\"] svg > use.active,\n.tie-icon-add-button.icon-arrow-3 .tui-image-editor-button[data-icontype=\"icon-arrow-3\"] svg > use.active,\n.tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype=\"icon-arrow-2\"] svg > use.active,\n.tie-icon-add-button.icon-arrow .tui-image-editor-button[data-icontype=\"icon-arrow\"] svg > use.active {\n display: block;\n}\n.tie-draw-line-select-button.line .tui-image-editor-button.line svg > use.normal,\n.tie-draw-line-select-button.free .tui-image-editor-button.free svg > use.normal {\n display: none;\n}\n.tie-draw-line-select-button.line .tui-image-editor-button.line svg > use.active,\n.tie-draw-line-select-button.free .tui-image-editor-button.free svg > use.active {\n display: block;\n}\n.tie-flip-button.resetFlip .tui-image-editor-button.resetFlip svg > use.normal,\n.tie-flip-button.flipX .tui-image-editor-button.flipX svg > use.normal,\n.tie-flip-button.flipY .tui-image-editor-button.flipY svg > use.normal {\n display: none;\n}\n.tie-flip-button.resetFlip .tui-image-editor-button.resetFlip svg > use.active,\n.tie-flip-button.flipX .tui-image-editor-button.flipX svg > use.active,\n.tie-flip-button.flipY .tui-image-editor-button.flipY svg > use.active {\n display: block;\n}\n.tie-mask-apply.apply.active .tui-image-editor-button.apply label {\n color: #fff;\n}\n.tie-mask-apply.apply.active .tui-image-editor-button.apply svg > use.active {\n display: block;\n}\n.tie-crop-button .tui-image-editor-button.apply,\n.tie-crop-preset-button .tui-image-editor-button.apply {\n margin-right: 24px;\n}\n.tie-crop-button .tui-image-editor-button.preset.active svg > use.active,\n.tie-crop-preset-button .tui-image-editor-button.preset.active svg > use.active {\n display: block;\n}\n.tie-crop-button .tui-image-editor-button.apply.active svg > use.active,\n.tie-crop-preset-button .tui-image-editor-button.apply.active svg > use.active {\n display: block;\n}\n.tie-resize-button .tui-image-editor-button.apply,\n.tie-resize-preset-button .tui-image-editor-button.apply {\n margin-right: 24px;\n}\n.tie-resize-button .tui-image-editor-button.preset.active svg > use.active,\n.tie-resize-preset-button .tui-image-editor-button.preset.active svg > use.active {\n display: block;\n}\n.tie-resize-button .tui-image-editor-button.apply.active svg > use.active,\n.tie-resize-preset-button .tui-image-editor-button.apply.active svg > use.active {\n display: block;\n}\n.tie-shape-button.rect .tui-image-editor-button.rect svg > use.normal,\n.tie-shape-button.circle .tui-image-editor-button.circle svg > use.normal,\n.tie-shape-button.triangle .tui-image-editor-button.triangle svg > use.normal {\n display: none;\n}\n.tie-shape-button.rect .tui-image-editor-button.rect svg > use.active,\n.tie-shape-button.circle .tui-image-editor-button.circle svg > use.active,\n.tie-shape-button.triangle .tui-image-editor-button.triangle svg > use.active {\n display: block;\n}\n.tie-text-effect-button .tui-image-editor-button.active svg > use.active {\n display: block;\n}\n.tie-text-align-button.tie-text-align-left .tui-image-editor-button.left svg > use.active,\n.tie-text-align-button.tie-text-align-center .tui-image-editor-button.center svg > use.active,\n.tie-text-align-button.tie-text-align-right .tui-image-editor-button.right svg > use.active {\n display: block;\n}\n.tie-mask-image-file,\n.tie-icon-image-file {\n opacity: 0;\n position: absolute;\n width: 100%;\n height: 100%;\n border: 1px solid #008000;\n cursor: inherit;\n left: 0;\n top: 0;\n}\n.tie-zoom-button.resetFlip .tui-image-editor-button.resetFlip svg > use.normal,\n.tie-zoom-button.flipX .tui-image-editor-button.flipX svg > use.normal,\n.tie-zoom-button.flipY .tui-image-editor-button.flipY svg > use.normal {\n display: none;\n}\n.tie-zoom-button.resetFlip .tui-image-editor-button.resetFlip svg > use.active,\n.tie-zoom-button.flipX .tui-image-editor-button.flipX svg > use.active,\n.tie-zoom-button.flipY .tui-image-editor-button.flipY svg > use.active {\n display: block;\n}\n.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls ul {\n text-align: right;\n}\n.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls-logo {\n display: none;\n}\n/*# sourceMappingURL=src/css/index.css.map */\n","body > textarea\n position: fixed !important;\n\n+prefix-classes(prefix)\n .-container\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n min-height: 300px;\n height: 100%;\n position: relative;\n background-color: #282828;\n overflow: hidden;\n letter-spacing: 0.3px;\n \n div, ul, label, input, li\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n -ms-user-select: none; \n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n \n .-header\n /* BUTTON AND LOGO */\n min-width: 533px;\n position: absolute;\n background-color: #151515;\n top: 0;\n width: 100%;\n .-header-buttons,\n .-controls-buttons\n float: right;\n margin: 8px;\n\n .-header-logo,\n .-controls-logo\n float: left;\n width: 30%;\n padding: 17px;\n\n .-controls-logo,\n .-controls-buttons\n width: 270px;\n height: 100%;\n display: none;\n\n .-header-buttons button,\n .-header-buttons div,\n .-controls-buttons button,\n .-controls-buttons div\n display: inline-block;\n position: relative;\n width: 120px;\n height: 40px;\n padding: 0;\n line-height: 40px;\n outline: none;\n border-radius: 20px;\n border: 1px solid #ddd;\n font-family: 'Noto Sans', sans-serif;\n font-size: 12px;\n font-weight: bold;\n cursor: pointer;\n vertical-align: middle;\n letter-spacing: 0.3px;\n text-align: center;\n\n .-download-btn\n background-color: #fdba3b;\n border-color: #fdba3b;\n color: #fff;\n .-load-btn\n position: absolute;\n left: 0;\n right: 0;\n display: inline-block;\n top: 0;\n bottom: 0;\n width: 100%;\n cursor: pointer;\n opacity: 0;\n .-main-container\n position: absolute;\n width: 100%;\n top: 0;\n bottom: 64px;\n .-main\n position: absolute;\n text-align: center;\n top: 64px;\n bottom: 0;\n right: 0;\n left: 0;\n .-wrap\n position: absolute;\n bottom: 0;\n width: 100%;\n overflow: auto;\n .-size-wrap\n display: table;\n width: 100%;\n height: 100%\n .-align-wrap\n display: table-cell;\n vertical-align: middle;\n .\n position: relative;\n display: inline-block;\n\n\n/* BIG MENU */\n.{prefix}-container\n .{prefix}-menu, .{prefix}-help-menu\n width: auto;\n list-style: none;\n padding: 0;\n margin: 0 auto;\n display: table-cell;\n text-align: center;\n vertical-align: middle;\n white-space: nowrap;\n > .{prefix}-item\n position: relative;\n display: inline-block;\n border-radius: 2px;\n padding: 7px 8px 3px 8px;\n cursor: pointer;\n margin: 0 4px;\n > .{prefix}-item[tooltip-content]:hover\n &:before\n content: '';\n position: absolute;\n display: inline-block;\n margin: 0 auto 0;\n width: 0;\n height: 0;\n border-right: 7px solid transparent;\n border-top: 7px solid #2f2f2f;\n border-left: 7px solid transparent;\n left: 13px;\n top: -2px;\n &:after\n content: attr(tooltip-content);\n position: absolute;\n display: inline-block;\n background-color: #2f2f2f;\n color: #fff;\n padding: 5px 8px;\n font-size: 11px;\n font-weight: lighter;\n border-radius: 3px;\n max-height: 23px;\n top: -25px;\n left: 0;\n min-width: 24px;\n > .{prefix}-item.active\n background-color: #fff;\n transition: all .3s ease;\n .{prefix}-wrap\n position: absolute;\n","body > textarea {\n position: fixed !important;\n}\n.tui-image-editor-container {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n min-height: 300px;\n height: 100%;\n position: relative;\n background-color: #282828;\n overflow: hidden;\n letter-spacing: 0.3px;\n}\n.tui-image-editor-container div,\n.tui-image-editor-container ul,\n.tui-image-editor-container label,\n.tui-image-editor-container input,\n.tui-image-editor-container li {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n -ms-user-select: none;\n -moz-user-select: -moz-none;\n -khtml-user-select: none;\n -webkit-user-select: none;\n user-select: none;\n}\n.tui-image-editor-container .tui-image-editor-header {\n/* BUTTON AND LOGO */\n min-width: 533px;\n position: absolute;\n background-color: #151515;\n top: 0;\n width: 100%;\n}\n.tui-image-editor-container .tui-image-editor-header-buttons,\n.tui-image-editor-container .tui-image-editor-controls-buttons {\n float: right;\n margin: 8px;\n}\n.tui-image-editor-container .tui-image-editor-header-logo,\n.tui-image-editor-container .tui-image-editor-controls-logo {\n float: left;\n width: 30%;\n padding: 17px;\n}\n.tui-image-editor-container .tui-image-editor-controls-logo,\n.tui-image-editor-container .tui-image-editor-controls-buttons {\n width: 270px;\n height: 100%;\n display: none;\n}\n.tui-image-editor-container .tui-image-editor-header-buttons button,\n.tui-image-editor-container .tui-image-editor-header-buttons div,\n.tui-image-editor-container .tui-image-editor-controls-buttons button,\n.tui-image-editor-container .tui-image-editor-controls-buttons div {\n display: inline-block;\n position: relative;\n width: 120px;\n height: 40px;\n padding: 0;\n line-height: 40px;\n outline: none;\n border-radius: 20px;\n border: 1px solid #ddd;\n font-family: 'Noto Sans', sans-serif;\n font-size: 12px;\n font-weight: bold;\n cursor: pointer;\n vertical-align: middle;\n letter-spacing: 0.3px;\n text-align: center;\n}\n.tui-image-editor-container .tui-image-editor-download-btn {\n background-color: #fdba3b;\n border-color: #fdba3b;\n color: #fff;\n}\n.tui-image-editor-container .tui-image-editor-load-btn {\n position: absolute;\n left: 0;\n right: 0;\n display: inline-block;\n top: 0;\n bottom: 0;\n width: 100%;\n cursor: pointer;\n opacity: 0;\n}\n.tui-image-editor-container .tui-image-editor-main-container {\n position: absolute;\n width: 100%;\n top: 0;\n bottom: 64px;\n}\n.tui-image-editor-container .tui-image-editor-main {\n position: absolute;\n text-align: center;\n top: 64px;\n bottom: 0;\n right: 0;\n left: 0;\n}\n.tui-image-editor-container .tui-image-editor-wrap {\n position: absolute;\n bottom: 0;\n width: 100%;\n overflow: auto;\n}\n.tui-image-editor-container .tui-image-editor-wrap .tui-image-editor-size-wrap {\n display: table;\n width: 100%;\n height: 100%;\n}\n.tui-image-editor-container .tui-image-editor-wrap .tui-image-editor-size-wrap .tui-image-editor-align-wrap {\n display: table-cell;\n vertical-align: middle;\n}\n.tui-image-editor-container .tui-image-editor {\n position: relative;\n display: inline-block;\n}\n.tui-image-editor-container .tui-image-editor-menu,\n.tui-image-editor-container .tui-image-editor-help-menu {\n width: auto;\n list-style: none;\n padding: 0;\n margin: 0 auto;\n display: table-cell;\n text-align: center;\n vertical-align: middle;\n white-space: nowrap;\n}\n.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item,\n.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item {\n position: relative;\n display: inline-block;\n border-radius: 2px;\n padding: 7px 8px 3px 8px;\n cursor: pointer;\n margin: 0 4px;\n}\n.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:hover:before,\n.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item[tooltip-content]:hover:before {\n content: '';\n position: absolute;\n display: inline-block;\n margin: 0 auto 0;\n width: 0;\n height: 0;\n border-right: 7px solid transparent;\n border-top: 7px solid #2f2f2f;\n border-left: 7px solid transparent;\n left: 13px;\n top: -2px;\n}\n.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:hover:after,\n.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item[tooltip-content]:hover:after {\n content: attr(tooltip-content);\n position: absolute;\n display: inline-block;\n background-color: #2f2f2f;\n color: #fff;\n padding: 5px 8px;\n font-size: 11px;\n font-weight: lighter;\n border-radius: 3px;\n max-height: 23px;\n top: -25px;\n left: 0;\n min-width: 24px;\n}\n.tui-image-editor-container .tui-image-editor-menu > .tui-image-editor-item.active,\n.tui-image-editor-container .tui-image-editor-help-menu > .tui-image-editor-item.active {\n background-color: #fff;\n transition: all 0.3s ease;\n}\n.tui-image-editor-container .tui-image-editor-wrap {\n position: absolute;\n}\n.tui-image-editor-container .tui-image-editor-grid-visual {\n display: none;\n position: absolute;\n width: 100%;\n height: 100%;\n border: 1px solid rgba(255,255,255,0.7);\n}\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor {\n transition: none;\n}\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-grid-visual,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-grid-visual,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-resize .tui-image-editor-grid-visual {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-grid-visual table {\n width: 100%;\n height: 100%;\n border-collapse: collapse;\n}\n.tui-image-editor-container .tui-image-editor-grid-visual table td {\n border: 1px solid rgba(255,255,255,0.3);\n}\n.tui-image-editor-container .tui-image-editor-grid-visual table td.dot:before {\n content: '';\n position: absolute;\n box-sizing: border-box;\n width: 10px;\n height: 10px;\n border: 0;\n box-shadow: 0 0 1px 0 rgba(0,0,0,0.3);\n border-radius: 100%;\n background-color: #fff;\n}\n.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-top:before {\n top: -5px;\n left: -5px;\n}\n.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-top:before {\n top: -5px;\n right: -5px;\n}\n.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.left-bottom:before {\n bottom: -5px;\n left: -5px;\n}\n.tui-image-editor-container .tui-image-editor-grid-visual table td.dot.right-bottom:before {\n bottom: -5px;\n right: -5px;\n}\n.tui-image-editor-container .tui-image-editor-submenu {\n display: none;\n position: absolute;\n bottom: 0;\n width: 100%;\n height: 150px;\n white-space: nowrap;\n z-index: 2;\n}\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover svg > use.active {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item li {\n display: inline-block;\n vertical-align: top;\n}\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-newline {\n display: block;\n margin-top: 0;\n}\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button {\n position: relative;\n cursor: pointer;\n display: inline-block;\n font-weight: normal;\n font-size: 11px;\n margin: 0 9px 0 9px;\n}\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.preset {\n margin: 0 9px 20px 5px;\n}\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item label > span {\n display: inline-block;\n cursor: pointer;\n padding-top: 5px;\n font-family: \"Noto Sans\", sans-serif;\n font-size: 11px;\n}\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.apply label,\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-image-editor-button.cancel label {\n vertical-align: 7px;\n}\n.tui-image-editor-container .tui-image-editor-submenu > div {\n display: none;\n vertical-align: bottom;\n}\n.tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-submenu-style {\n opacity: 0.95;\n z-index: -1;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-partition > div {\n width: 1px;\n height: 52px;\n border-left: 1px solid #3c3c3c;\n margin: 0 8px 0 8px;\n}\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-partition > div {\n height: 108px;\n margin: 0 29px 0 0px;\n}\n.tui-image-editor-container .tui-image-editor-submenu-align {\n text-align: left;\n margin-right: 30px;\n}\n.tui-image-editor-container .tui-image-editor-submenu-align label > span {\n width: 55px;\n white-space: nowrap;\n}\n.tui-image-editor-container .tui-image-editor-submenu-align:first-child {\n margin-right: 0;\n}\n.tui-image-editor-container .tui-image-editor-submenu-align:first-child label > span {\n width: 70px;\n}\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-crop .tui-image-editor-submenu > div.tui-image-editor-menu-crop,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-resize .tui-image-editor-submenu > div.tui-image-editor-menu-resize,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-submenu > div.tui-image-editor-menu-flip,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-submenu > div.tui-image-editor-menu-rotate,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-shape .tui-image-editor-submenu > div.tui-image-editor-menu-shape,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-text .tui-image-editor-submenu > div.tui-image-editor-menu-text,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-mask .tui-image-editor-submenu > div.tui-image-editor-menu-mask,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-icon .tui-image-editor-submenu > div.tui-image-editor-menu-icon,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-draw .tui-image-editor-submenu > div.tui-image-editor-menu-draw,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-submenu > div.tui-image-editor-menu-filter,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-zoom .tui-image-editor-submenu > div.tui-image-editor-menu-zoom {\n display: table-cell;\n}\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-crop .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-resize .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-flip .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-rotate .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-shape .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-text .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-mask .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-icon .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-draw .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-filter .tui-image-editor-submenu,\n.tui-image-editor-container .tui-image-editor-main.tui-image-editor-menu-zoom .tui-image-editor-submenu {\n display: table;\n}\n.tui-image-editor-container .tui-image-editor-help-menu {\n list-style: none;\n padding: 0;\n margin: 0 auto;\n text-align: center;\n vertical-align: middle;\n border-radius: 20px;\n background-color: rgba(255,255,255,0.06);\n z-index: 2;\n position: absolute;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history {\n display: none;\n background-color: #fff;\n color: #444;\n position: absolute;\n width: 196px;\n height: 276px;\n padding: 4px 2px;\n box-shadow: 0 2px 6px 0 rgba(0,0,0,0.15);\n cursor: auto;\n transform: translateX(calc(-50% + 12px));\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list {\n height: 268px;\n padding: 0;\n overflow: hidden scroll;\n list-style: none;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item {\n height: 24px;\n font-size: 11px;\n line-height: 24px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item {\n position: relative;\n height: 24px;\n cursor: pointer;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item svg {\n width: 24px;\n height: 24px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item span {\n display: inline-block;\n width: 128px;\n height: 24px;\n text-align: left;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-icon {\n display: inline-block;\n width: 24px;\n height: 24px;\n position: absolute;\n top: 6px;\n left: 6px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item .tui-image-editor-history-item .history-item-checkbox {\n display: none;\n width: 24px;\n height: 24px;\n position: absolute;\n top: 5px;\n right: -6px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.selected-item {\n background-color: rgba(119,119,119,0.12);\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.selected-item .history-item-checkbox {\n display: inline-block;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .tie-panel-history .history-list .history-item.disabled-item {\n color: #333;\n opacity: 0.3;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .opened .tie-panel-history {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .opened .tie-panel-history:before {\n content: '';\n position: absolute;\n display: inline-block;\n margin: 0 auto;\n width: 0;\n height: 0;\n}\n.tui-image-editor-container .filter-color-item {\n display: inline-block;\n}\n.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-checkbox-wrap {\n display: inline-block !important;\n text-align: left;\n}\n.tui-image-editor-container .tui-image-editor-checkbox-wrap.fixed-width {\n width: 187px;\n white-space: normal;\n}\n.tui-image-editor-container .tui-image-editor-checkbox {\n display: inline-block;\n margin: 1px 0 1px 0;\n}\n.tui-image-editor-container .tui-image-editor-checkbox input {\n width: 14px;\n height: 14px;\n opacity: 0;\n}\n.tui-image-editor-container .tui-image-editor-checkbox > label > span {\n color: #fff;\n height: 14px;\n position: relative;\n}\n.tui-image-editor-container .tui-image-editor-checkbox input + label:before,\n.tui-image-editor-container .tui-image-editor-checkbox > label > span:before {\n content: '';\n position: absolute;\n width: 14px;\n height: 14px;\n background-color: #fff;\n top: 6px;\n left: -19px;\n display: inline-block;\n margin: 0;\n text-align: center;\n font-size: 11px;\n border: 0;\n border-radius: 2px;\n padding-top: 1px;\n box-sizing: border-box;\n}\n.tui-image-editor-container .tui-image-editor-checkbox input[type='checkbox']:checked + span:before {\n background-size: cover;\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAMBJREFUKBWVkjEOwjAMRe2WgZW7IIHEDdhghhuwcQ42rlJugAQS54Cxa5cq1QM5TUpByZfS2j9+dlJVt/tX5ZxbS4ZU9VLkQvSHKTIGRaVJYFmKrBbTCJxE2UgCdDzMZDkHrOV6b95V0US6UmgKodujEZbJg0B0ZgEModO5lrY1TMQf1TpyJGBEjD+E2NPN7ukIUDiF/BfEXgRiGEw8NgkffYGYwCi808fpn/6OvfUfsDr/Vc1IfRf8sKnFVqeiVQfDu0tf/nWH9gAAAABJRU5ErkJggg==\");\n}\n.tui-image-editor-container .tui-image-editor-selectlist-wrap {\n position: relative;\n}\n.tui-image-editor-container .tui-image-editor-selectlist-wrap select {\n width: 100%;\n height: 28px;\n margin-top: 4px;\n border: 0;\n outline: 0;\n border-radius: 0;\n border: 1px solid #cbdbdb;\n background-color: #fff;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0 7px 0 10px;\n}\n.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist {\n display: none;\n position: relative;\n top: -1px;\n border: 1px solid #ccc;\n background-color: #fff;\n border-top: 0px;\n padding: 4px 0;\n}\n.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist li {\n display: block;\n text-align: left;\n padding: 7px 10px;\n font-family: 'Noto Sans', sans-serif;\n}\n.tui-image-editor-container .tui-image-editor-selectlist-wrap .tui-image-editor-selectlist li:hover {\n background-color: rgba(81,92,230,0.05);\n}\n.tui-image-editor-container .tui-image-editor-selectlist-wrap:before {\n content: '';\n position: absolute;\n display: inline-block;\n width: 14px;\n height: 14px;\n right: 5px;\n top: 10px;\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYBgFOEOAEVkmPDxc89+/f6eAYjzI4kD2FyYmJrOVK1deh4kzwRggGiQBVJCELAZig8SQNYHEmEEEMrh69eo1HR0dfqCYJUickZGxf9WqVf3IakBsFBthklpaWmVA9mEQhrJhUoTp0NBQCRAmrHL4qgAAuu4cWZOZIGsAAAAASUVORK5CYII=\");\n background-size: cover;\n}\n.tui-image-editor-container .tui-image-editor-selectlist-wrap select::-ms-expand {\n display: none;\n}\n.tui-image-editor-container .tui-image-editor-virtual-range-bar .tui-image-editor-disabled,\n.tui-image-editor-container .tui-image-editor-virtual-range-subbar .tui-image-editor-disabled,\n.tui-image-editor-container .tui-image-editor-virtual-range-pointer .tui-image-editor-disabled {\n backbround-color: #f00;\n}\n.tui-image-editor-container .tui-image-editor-range {\n position: relative;\n top: 5px;\n width: 166px;\n height: 17px;\n display: inline-block;\n}\n.tui-image-editor-container .tui-image-editor-virtual-range-bar {\n top: 7px;\n position: absolute;\n width: 100%;\n height: 2px;\n background-color: #666;\n}\n.tui-image-editor-container .tui-image-editor-virtual-range-subbar {\n position: absolute;\n height: 100%;\n left: 0;\n right: 0;\n background-color: #d1d1d1;\n}\n.tui-image-editor-container .tui-image-editor-virtual-range-pointer {\n position: absolute;\n cursor: pointer;\n top: -5px;\n left: 0;\n width: 12px;\n height: 12px;\n background-color: #fff;\n border-radius: 100%;\n}\n.tui-image-editor-container .tui-image-editor-range-wrap {\n display: inline-block;\n margin-left: 4px;\n}\n.tui-image-editor-container .tui-image-editor-range-wrap.short .tui-image-editor-range {\n width: 100px;\n}\n.tui-image-editor-container .color-picker-control .tui-image-editor-range {\n width: 108px;\n margin-left: 10px;\n}\n.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-pointer {\n background-color: #333;\n}\n.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-bar {\n background-color: #ccc;\n}\n.tui-image-editor-container .color-picker-control .tui-image-editor-virtual-range-subbar {\n background-color: #606060;\n}\n.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short {\n margin-top: -2px;\n margin-left: 19px;\n}\n.tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label {\n color: #8e8e8e;\n font-weight: normal;\n}\n.tui-image-editor-container .tui-image-editor-range-wrap label {\n vertical-align: baseline;\n font-size: 11px;\n margin-right: 7px;\n color: #fff;\n}\n.tui-image-editor-container .tui-image-editor-range-value {\n cursor: default;\n width: 40px;\n height: 24px;\n outline: none;\n border-radius: 2px;\n box-shadow: none;\n border: 1px solid #d5d5d5;\n text-align: center;\n background-color: #1c1c1c;\n color: #fff;\n font-weight: lighter;\n vertical-align: baseline;\n font-family: 'Noto Sans', sans-serif;\n margin-top: 15px;\n margin-left: 4px;\n}\n.tui-image-editor-container .tui-image-editor-controls {\n position: absolute;\n background-color: #151515;\n width: 100%;\n height: 64px;\n display: table;\n bottom: 0;\n z-index: 2;\n}\n.tui-image-editor-container .tui-image-editor-icpartition {\n display: inline-block;\n background-color: #444;\n width: 1px;\n height: 24px;\n}\n.tui-image-editor-container.left .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:before {\n left: 28px;\n top: 11px;\n border-right: 7px solid #2f2f2f;\n border-top: 7px solid transparent;\n border-bottom: 7px solid transparent;\n}\n.tui-image-editor-container.left .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:after {\n top: 7px;\n left: 42px;\n white-space: nowrap;\n}\n.tui-image-editor-container.left .tui-image-editor-submenu {\n left: 0;\n height: 100%;\n width: 248px;\n}\n.tui-image-editor-container.left .tui-image-editor-main-container {\n left: 64px;\n width: calc(100% - 64px);\n height: 100%;\n}\n.tui-image-editor-container.left .tui-image-editor-controls {\n width: 64px;\n height: 100%;\n display: table;\n}\n.tui-image-editor-container.left .tui-image-editor-menu,\n.tui-image-editor-container.right .tui-image-editor-menu {\n white-space: inherit;\n}\n.tui-image-editor-container.left .tui-image-editor-submenu,\n.tui-image-editor-container.right .tui-image-editor-submenu {\n white-space: normal;\n}\n.tui-image-editor-container.left .tui-image-editor-submenu > div,\n.tui-image-editor-container.right .tui-image-editor-submenu > div {\n vertical-align: middle;\n}\n.tui-image-editor-container.left .tui-image-editor-controls li,\n.tui-image-editor-container.right .tui-image-editor-controls li {\n display: inline-block;\n margin: 4px auto;\n}\n.tui-image-editor-container.left .tui-image-editor-icpartition,\n.tui-image-editor-container.right .tui-image-editor-icpartition {\n position: relative;\n top: -7px;\n width: 24px;\n height: 1px;\n}\n.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition,\n.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition {\n display: block;\n width: 75%;\n margin: auto;\n}\n.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition > div,\n.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition > div {\n border-left: 0;\n height: 10px;\n border-bottom: 1px solid #3c3c3c;\n width: 100%;\n margin: 0;\n}\n.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-align,\n.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-align {\n margin-right: 0;\n}\n.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-item li,\n.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-item li {\n margin-top: 15px;\n}\n.tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-colorpicker-clearfix li,\n.tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-submenu-item .tui-colorpicker-clearfix li {\n margin-top: 0;\n}\n.tui-image-editor-container.left .tui-image-editor-checkbox-wrap.fixed-width,\n.tui-image-editor-container.right .tui-image-editor-checkbox-wrap.fixed-width {\n width: 182px;\n white-space: normal;\n}\n.tui-image-editor-container.left .tui-image-editor-range-wrap.tui-image-editor-newline label.range,\n.tui-image-editor-container.right .tui-image-editor-range-wrap.tui-image-editor-newline label.range {\n display: block;\n text-align: left;\n width: 75%;\n margin: auto;\n}\n.tui-image-editor-container.left .tui-image-editor-range,\n.tui-image-editor-container.right .tui-image-editor-range {\n width: 136px;\n}\n.tui-image-editor-container.right .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:before {\n left: -3px;\n top: 11px;\n border-left: 7px solid #2f2f2f;\n border-top: 7px solid transparent;\n border-bottom: 7px solid transparent;\n}\n.tui-image-editor-container.right .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:after {\n top: 7px;\n left: unset;\n right: 43px;\n white-space: nowrap;\n}\n.tui-image-editor-container.right .tui-image-editor-submenu {\n right: 0;\n height: 100%;\n width: 248px;\n}\n.tui-image-editor-container.right .tui-image-editor-main-container {\n right: 64px;\n width: calc(100% - 64px);\n height: 100%;\n}\n.tui-image-editor-container.right .tui-image-editor-controls {\n right: 0;\n width: 64px;\n height: 100%;\n display: table;\n}\n.tui-image-editor-container.top .tui-image-editor-submenu .tui-image-editor-partition.only-left-right,\n.tui-image-editor-container.bottom .tui-image-editor-submenu .tui-image-editor-partition.only-left-right {\n display: none;\n}\n.tui-image-editor-container.bottom .tui-image-editor-submenu > div {\n padding-bottom: 24px;\n}\n.tui-image-editor-container.top .color-picker-control .triangle {\n top: -8px;\n border-right: 7px solid transparent;\n border-top: 0px;\n border-left: 7px solid transparent;\n border-bottom: 8px solid #fff;\n}\n.tui-image-editor-container.top .tui-image-editor-size-wrap {\n height: 100%;\n}\n.tui-image-editor-container.top .tui-image-editor-main-container {\n bottom: 0;\n}\n.tui-image-editor-container.top .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:before {\n left: 13px;\n border-top: 0;\n border-bottom: 7px solid #2f2f2f;\n top: 33px;\n}\n.tui-image-editor-container.top .tui-image-editor-menu > .tui-image-editor-item[tooltip-content]:after {\n top: 38px;\n}\n.tui-image-editor-container.top .tui-image-editor-submenu {\n top: 0;\n bottom: auto;\n}\n.tui-image-editor-container.top .tui-image-editor-submenu > div {\n padding-top: 24px;\n vertical-align: top;\n}\n.tui-image-editor-container.top .tui-image-editor-controls-logo {\n display: table-cell;\n}\n.tui-image-editor-container.top .tui-image-editor-controls-buttons {\n display: table-cell;\n}\n.tui-image-editor-container.top .tui-image-editor-main {\n top: 64px;\n height: calc(100% - 64px);\n}\n.tui-image-editor-container.top .tui-image-editor-controls {\n top: 0;\n bottom: inherit;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.top {\n white-space: nowrap;\n width: 506px;\n height: 40px;\n top: 8px;\n left: 50%;\n transform: translateX(-50%);\n}\n.tui-image-editor-container .tui-image-editor-help-menu.top .tie-panel-history {\n top: 45px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.top .opened .tie-panel-history:before {\n border-right: 8px solid transparent;\n border-left: 8px solid transparent;\n border-bottom: 8px solid #fff;\n left: 90px;\n top: -8px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content]:before {\n left: 13px;\n top: 35px;\n border: none;\n border-bottom: 7px solid #2f2f2f;\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content]:after {\n top: 41px;\n left: -4px;\n white-space: nowrap;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content].opened:before,\n.tui-image-editor-container .tui-image-editor-help-menu.top > .tui-image-editor-item[tooltip-content].opened:after {\n content: none;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.bottom {\n white-space: nowrap;\n width: 506px;\n height: 40px;\n bottom: 8px;\n left: 50%;\n transform: translateX(-50%);\n}\n.tui-image-editor-container .tui-image-editor-help-menu.bottom .tie-panel-history {\n bottom: 45px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.bottom .opened .tie-panel-history:before {\n border-right: 8px solid transparent;\n border-left: 8px solid transparent;\n border-top: 8px solid #fff;\n left: 90px;\n bottom: -8px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content]:before {\n left: 13px;\n top: auto;\n bottom: 36px;\n border: none;\n border-top: 7px solid #2f2f2f;\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content]:after {\n top: auto;\n left: -4px;\n bottom: 41px;\n white-space: nowrap;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content].opened:before,\n.tui-image-editor-container .tui-image-editor-help-menu.bottom > .tui-image-editor-item[tooltip-content].opened:after {\n content: none;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.left {\n white-space: inherit;\n width: 40px;\n height: 506px;\n left: 8px;\n top: 50%;\n transform: translateY(-50%);\n}\n.tui-image-editor-container .tui-image-editor-help-menu.left .tie-panel-history {\n left: 140px;\n top: -4px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.left .opened .tie-panel-history:before {\n border-top: 8px solid transparent;\n border-bottom: 8px solid transparent;\n border-right: 8px solid #fff;\n left: -8px;\n top: 14px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.left .tui-image-editor-item {\n margin: 4px auto;\n padding: 6px 8px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content]:before {\n left: 27px;\n top: 11px;\n border: none;\n border-right: 7px solid #2f2f2f;\n border-top: 7px solid transparent;\n border-bottom: 7px solid transparent;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content]:after {\n top: 7px;\n left: 40px;\n white-space: nowrap;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content].opened:before,\n.tui-image-editor-container .tui-image-editor-help-menu.left > .tui-image-editor-item[tooltip-content].opened:after {\n content: none;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.right {\n white-space: inherit;\n width: 40px;\n height: 506px;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n}\n.tui-image-editor-container .tui-image-editor-help-menu.right .tie-panel-history {\n right: -30px;\n top: -4px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.right .opened .tie-panel-history:before {\n border-top: 8px solid transparent;\n border-bottom: 8px solid transparent;\n border-left: 8px solid #fff;\n right: -8px;\n top: 14px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.right .tui-image-editor-item {\n margin: 4px auto;\n padding: 6px 8px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content]:before {\n left: -6px;\n top: 11px;\n border: none;\n border-left: 7px solid #2f2f2f;\n border-top: 7px solid transparent;\n border-bottom: 7px solid transparent;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content]:after {\n top: 7px;\n left: auto;\n right: 39px;\n white-space: nowrap;\n}\n.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content].opened:before,\n.tui-image-editor-container .tui-image-editor-help-menu.right > .tui-image-editor-item[tooltip-content].opened:after {\n content: none;\n}\n.tui-image-editor-container .tie-icon-add-button .tui-image-editor-button {\n min-width: 42px;\n}\n.tui-image-editor-container .svg_ic-menu,\n.tui-image-editor-container .svg_ic-helpmenu {\n width: 24px;\n height: 24px;\n}\n.tui-image-editor-container .svg_ic-submenu {\n width: 32px;\n height: 32px;\n}\n.tui-image-editor-container .svg_img-bi {\n width: 257px;\n height: 26px;\n}\n.tui-image-editor-container .tui-image-editor-help-menu svg > use,\n.tui-image-editor-container .tui-image-editor-controls svg > use {\n display: none;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .enabled svg:hover > use.hover,\n.tui-image-editor-container .tui-image-editor-controls .enabled svg:hover > use.hover,\n.tui-image-editor-container .tui-image-editor-help-menu .normal svg:hover > use.hover,\n.tui-image-editor-container .tui-image-editor-controls .normal svg:hover > use.hover {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .active svg:hover > use.hover,\n.tui-image-editor-container .tui-image-editor-controls .active svg:hover > use.hover {\n display: none;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .on svg > use.hover,\n.tui-image-editor-container .tui-image-editor-controls .on svg > use.hover,\n.tui-image-editor-container .tui-image-editor-help-menu .opened svg > use.hover,\n.tui-image-editor-container .tui-image-editor-controls .opened svg > use.hover {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-help-menu svg > use.normal,\n.tui-image-editor-container .tui-image-editor-controls svg > use.normal {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .active svg > use.active,\n.tui-image-editor-container .tui-image-editor-controls .active svg > use.active {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .enabled svg > use.enabled,\n.tui-image-editor-container .tui-image-editor-controls .enabled svg > use.enabled {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .active svg > use.normal,\n.tui-image-editor-container .tui-image-editor-controls .active svg > use.normal,\n.tui-image-editor-container .tui-image-editor-help-menu .enabled svg > use.normal,\n.tui-image-editor-container .tui-image-editor-controls .enabled svg > use.normal {\n display: none;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .help svg > use.disabled,\n.tui-image-editor-container .tui-image-editor-controls .help svg > use.disabled,\n.tui-image-editor-container .tui-image-editor-help-menu .help.enabled svg > use.normal,\n.tui-image-editor-container .tui-image-editor-controls .help.enabled svg > use.normal {\n display: block;\n}\n.tui-image-editor-container .tui-image-editor-help-menu .help.enabled svg > use.disabled,\n.tui-image-editor-container .tui-image-editor-controls .help.enabled svg > use.disabled {\n display: none;\n}\n.tui-image-editor-container .tui-image-editor-controls:hover {\n z-index: 3;\n}\n.tui-image-editor-container div.tui-colorpicker-clearfix {\n width: 159px;\n height: 28px;\n border: 1px solid #d5d5d5;\n border-radius: 2px;\n background-color: #f5f5f5;\n margin-top: 6px;\n padding: 4px 7px 4px 7px;\n}\n.tui-image-editor-container .tui-colorpicker-palette-hex {\n width: 114px;\n background-color: #f5f5f5;\n border: 0;\n font-size: 11px;\n margin-top: 2px;\n font-family: 'Noto Sans', sans-serif;\n}\n.tui-image-editor-container .tui-colorpicker-palette-hex[value='#ffffff'] + .tui-colorpicker-palette-preview,\n.tui-image-editor-container .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview {\n border: 1px solid #ccc;\n}\n.tui-image-editor-container .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview {\n background-size: cover;\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC\");\n}\n.tui-image-editor-container .tui-colorpicker-palette-preview {\n border-radius: 100%;\n float: left;\n width: 17px;\n height: 17px;\n border: 0;\n}\n.tui-image-editor-container .color-picker-control {\n position: absolute;\n display: none;\n z-index: 99;\n width: 192px;\n background-color: #fff;\n box-shadow: 0 3px 22px 6px rgba(0,0,0,0.15);\n padding: 16px;\n border-radius: 2px;\n}\n.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-toggle-slider {\n display: none;\n}\n.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button {\n border: 0;\n border-radius: 100%;\n margin: 2px;\n background-size: cover;\n font-size: 1px;\n}\n.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button[title='#ffffff'] {\n border: 1px solid #ccc;\n}\n.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button[title=''] {\n border: 1px solid #ccc;\n}\n.tui-image-editor-container .color-picker-control .triangle {\n width: 0;\n height: 0;\n border-right: 7px solid transparent;\n border-top: 8px solid #fff;\n border-left: 7px solid transparent;\n position: absolute;\n bottom: -8px;\n left: 84px;\n}\n.tui-image-editor-container .color-picker-control .tui-colorpicker-container,\n.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container ul,\n.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-container {\n width: 100%;\n height: auto;\n}\n.tui-image-editor-container .filter-color-item .color-picker-control label {\n font-color: #333;\n font-weight: normal;\n margin-right: 7pxleft;\n}\n.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox {\n margin-top: 0;\n}\n.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox input + label:before,\n.tui-image-editor-container .filter-color-item .tui-image-editor-checkbox > label:before {\n left: -16px;\n}\n.tui-image-editor-container .color-picker {\n width: 100%;\n height: auto;\n}\n.tui-image-editor-container .color-picker-value {\n width: 32px;\n height: 32px;\n border: 0px;\n border-radius: 100%;\n margin: auto;\n margin-bottom: 1px;\n}\n.tui-image-editor-container .color-picker-value.transparent {\n border: 1px solid #cbcbcb;\n background-size: cover;\n background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC\");\n}\n.tui-image-editor-container .color-picker-value + label {\n color: #fff;\n}\n.tui-image-editor-container .tui-image-editor-submenu svg > use {\n display: none;\n}\n.tui-image-editor-container .tui-image-editor-submenu svg > use.normal {\n display: block;\n}\n.tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype=\"icon-bubble\"] svg > use.active,\n.tie-icon-add-button.icon-heart .tui-image-editor-button[data-icontype=\"icon-heart\"] svg > use.active,\n.tie-icon-add-button.icon-location .tui-image-editor-button[data-icontype=\"icon-location\"] svg > use.active,\n.tie-icon-add-button.icon-polygon .tui-image-editor-button[data-icontype=\"icon-polygon\"] svg > use.active,\n.tie-icon-add-button.icon-star .tui-image-editor-button[data-icontype=\"icon-star\"] svg > use.active,\n.tie-icon-add-button.icon-star-2 .tui-image-editor-button[data-icontype=\"icon-star-2\"] svg > use.active,\n.tie-icon-add-button.icon-arrow-3 .tui-image-editor-button[data-icontype=\"icon-arrow-3\"] svg > use.active,\n.tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype=\"icon-arrow-2\"] svg > use.active,\n.tie-icon-add-button.icon-arrow .tui-image-editor-button[data-icontype=\"icon-arrow\"] svg > use.active {\n display: block;\n}\n.tie-draw-line-select-button.line .tui-image-editor-button.line svg > use.normal,\n.tie-draw-line-select-button.free .tui-image-editor-button.free svg > use.normal {\n display: none;\n}\n.tie-draw-line-select-button.line .tui-image-editor-button.line svg > use.active,\n.tie-draw-line-select-button.free .tui-image-editor-button.free svg > use.active {\n display: block;\n}\n.tie-flip-button.resetFlip .tui-image-editor-button.resetFlip svg > use.normal,\n.tie-flip-button.flipX .tui-image-editor-button.flipX svg > use.normal,\n.tie-flip-button.flipY .tui-image-editor-button.flipY svg > use.normal {\n display: none;\n}\n.tie-flip-button.resetFlip .tui-image-editor-button.resetFlip svg > use.active,\n.tie-flip-button.flipX .tui-image-editor-button.flipX svg > use.active,\n.tie-flip-button.flipY .tui-image-editor-button.flipY svg > use.active {\n display: block;\n}\n.tie-mask-apply.apply.active .tui-image-editor-button.apply label {\n color: #fff;\n}\n.tie-mask-apply.apply.active .tui-image-editor-button.apply svg > use.active {\n display: block;\n}\n.tie-crop-button .tui-image-editor-button.apply,\n.tie-crop-preset-button .tui-image-editor-button.apply {\n margin-right: 24px;\n}\n.tie-crop-button .tui-image-editor-button.preset.active svg > use.active,\n.tie-crop-preset-button .tui-image-editor-button.preset.active svg > use.active {\n display: block;\n}\n.tie-crop-button .tui-image-editor-button.apply.active svg > use.active,\n.tie-crop-preset-button .tui-image-editor-button.apply.active svg > use.active {\n display: block;\n}\n.tie-resize-button .tui-image-editor-button.apply,\n.tie-resize-preset-button .tui-image-editor-button.apply {\n margin-right: 24px;\n}\n.tie-resize-button .tui-image-editor-button.preset.active svg > use.active,\n.tie-resize-preset-button .tui-image-editor-button.preset.active svg > use.active {\n display: block;\n}\n.tie-resize-button .tui-image-editor-button.apply.active svg > use.active,\n.tie-resize-preset-button .tui-image-editor-button.apply.active svg > use.active {\n display: block;\n}\n.tie-shape-button.rect .tui-image-editor-button.rect svg > use.normal,\n.tie-shape-button.circle .tui-image-editor-button.circle svg > use.normal,\n.tie-shape-button.triangle .tui-image-editor-button.triangle svg > use.normal {\n display: none;\n}\n.tie-shape-button.rect .tui-image-editor-button.rect svg > use.active,\n.tie-shape-button.circle .tui-image-editor-button.circle svg > use.active,\n.tie-shape-button.triangle .tui-image-editor-button.triangle svg > use.active {\n display: block;\n}\n.tie-text-effect-button .tui-image-editor-button.active svg > use.active {\n display: block;\n}\n.tie-text-align-button.tie-text-align-left .tui-image-editor-button.left svg > use.active,\n.tie-text-align-button.tie-text-align-center .tui-image-editor-button.center svg > use.active,\n.tie-text-align-button.tie-text-align-right .tui-image-editor-button.right svg > use.active {\n display: block;\n}\n.tie-mask-image-file,\n.tie-icon-image-file {\n opacity: 0;\n position: absolute;\n width: 100%;\n height: 100%;\n border: 1px solid #008000;\n cursor: inherit;\n left: 0;\n top: 0;\n}\n.tie-zoom-button.resetFlip .tui-image-editor-button.resetFlip svg > use.normal,\n.tie-zoom-button.flipX .tui-image-editor-button.flipX svg > use.normal,\n.tie-zoom-button.flipY .tui-image-editor-button.flipY svg > use.normal {\n display: none;\n}\n.tie-zoom-button.resetFlip .tui-image-editor-button.resetFlip svg > use.active,\n.tie-zoom-button.flipX .tui-image-editor-button.flipX svg > use.active,\n.tie-zoom-button.flipY .tui-image-editor-button.flipY svg > use.active {\n display: block;\n}\n.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls ul {\n text-align: right;\n}\n.tui-image-editor-container.top.tui-image-editor-top-optimization .tui-image-editor-controls-logo {\n display: none;\n}\n/*# sourceMappingURL=src/css/index.css.map */","/* GRID VISUAL OF FLIP AND ROTATE MENU */\n.{prefix}-container\n .{prefix}-grid-visual\n display: none;\n position: absolute;\n width: 100%;\n height: 100%;\n border: 1px solid rgba(255,255,255,0.7);\n .{prefix}-main.{prefix}-menu-flip,\n .{prefix}-main.{prefix}-menu-rotate\n .tui-image-editor\n transition: none;\n .{prefix}-main.{prefix}-menu-flip .{prefix}-grid-visual,\n .{prefix}-main.{prefix}-menu-rotate .{prefix}-grid-visual,\n .{prefix}-main.{prefix}-menu-resize .{prefix}-grid-visual\n display: block;\n .{prefix}-grid-visual \n table\n width: 100%;\n height: 100%;\n border-collapse: collapse;\n td\n border: 1px solid rgba(255,255,255,0.3);\n td.dot:before\n content: '';\n position: absolute;\n box-sizing: border-box;\n width: 10px;\n height: 10px;\n border: 0;\n box-shadow: 0 0 1px 0 rgba(0,0,0,0.3);\n border-radius: 100%;\n background-color: #fff;\n td.dot.left-top:before\n top: -5px;\n left: -5px;\n td.dot.right-top:before\n top: -5px;\n right: -5px;\n td.dot.left-bottom:before\n bottom: -5px;\n left: -5px;\n td.dot.right-bottom:before\n bottom: -5px;\n right: -5px;\n","/* SUBMENU */\n.{prefix}-container\n .{prefix}-submenu\n display: none;\n position: absolute;\n bottom: 0;\n width:100%;\n height: 150px;\n white-space: nowrap;\n z-index: 2;\n .{prefix}-button:hover svg > use.active\n display: block;\n .{prefix}-submenu-item\n li\n display: inline-block;\n vertical-align: top;\n .{prefix}-newline\n display: block;\n margin-top: 0;\n .{prefix}-button\n position: relative;\n cursor: pointer;\n display: inline-block;\n font-weight: normal;\n font-size: 11px;\n margin: 0 9px 0 9px;\n .{prefix}-button.preset\n margin: 0 9px 20px 5px;\n label > span\n display: inline-block;\n cursor: pointer;\n padding-top: 5px;\n font-family: \"Noto Sans\", sans-serif;\n font-size: 11px;\n .{prefix}-button.apply label,\n .{prefix}-button.cancel label\n vertical-align: 7px;\n > div\n display: none;\n vertical-align: bottom;\n .{prefix}-submenu-style\n opacity: 0.95;\n z-index: -1;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: block;\n\n .{prefix}-partition > div\n width: 1px;\n height: 52px;\n border-left: 1px solid #3c3c3c;\n margin: 0 8px 0 8px;\n .{prefix}-main.{prefix}-menu-filter .{prefix}-partition > div\n height: 108px;\n margin: 0 29px 0 0px;\n .{prefix}-submenu-align\n text-align: left;\n margin-right: 30px;\n label > span\n width: 55px;\n white-space: nowrap;\n .{prefix}-submenu-align:first-child\n margin-right: 0;\n label > span\n width: 70px;\n .{prefix}-main.{prefix}-menu-crop .{prefix}-submenu > div.{prefix}-menu-crop,\n .{prefix}-main.{prefix}-menu-resize .{prefix}-submenu > div.{prefix}-menu-resize,\n .{prefix}-main.{prefix}-menu-flip .{prefix}-submenu > div.{prefix}-menu-flip,\n .{prefix}-main.{prefix}-menu-rotate .{prefix}-submenu > div.{prefix}-menu-rotate,\n .{prefix}-main.{prefix}-menu-shape .{prefix}-submenu > div.{prefix}-menu-shape,\n .{prefix}-main.{prefix}-menu-text .{prefix}-submenu > div.{prefix}-menu-text,\n .{prefix}-main.{prefix}-menu-mask .{prefix}-submenu > div.{prefix}-menu-mask,\n .{prefix}-main.{prefix}-menu-icon .{prefix}-submenu > div.{prefix}-menu-icon,\n .{prefix}-main.{prefix}-menu-draw .{prefix}-submenu > div.{prefix}-menu-draw,\n .{prefix}-main.{prefix}-menu-filter .{prefix}-submenu > div.{prefix}-menu-filter,\n .{prefix}-main.{prefix}-menu-zoom .{prefix}-submenu > div.{prefix}-menu-zoom\n display: table-cell;\n .{prefix}-main.{prefix}-menu-crop,\n .{prefix}-main.{prefix}-menu-resize,\n .{prefix}-main.{prefix}-menu-flip,\n .{prefix}-main.{prefix}-menu-rotate,\n .{prefix}-main.{prefix}-menu-shape,\n .{prefix}-main.{prefix}-menu-text,\n .{prefix}-main.{prefix}-menu-mask,\n .{prefix}-main.{prefix}-menu-icon,\n .{prefix}-main.{prefix}-menu-draw,\n .{prefix}-main.{prefix}-menu-filter,\n .{prefix}-main.{prefix}-menu-zoom\n .{prefix}-submenu\n display: table;\n\n/* Help menu bar */\n.{prefix}-container\n .{prefix}-help-menu\n list-style: none;\n padding: 0;\n margin: 0 auto;\n text-align: center;\n vertical-align: middle;\n border-radius: 20px;\n background-color: rgba(255, 255, 255, 0.06);\n z-index: 2;\n position: absolute;\n .tie-panel-history\n display: none;\n background-color: #fff;\n color: #444;\n position: absolute;\n width: 196px;\n height: 276px;\n padding: 4px 2px;\n box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);\n cursor: auto;\n transform: translateX(calc(-50% + 12px));\n .history-list\n height: 268px;\n padding: 0;\n overflow: hidden scroll;\n list-style: none;\n .history-item\n height: 24px;\n font-size: 11px;\n line-height: 24px;\n .{prefix}-history-item\n position: relative;\n height: 24px;\n cursor: pointer;\n svg\n width: 24px;\n height: 24px;\n span\n display: inline-block;\n width: 128px;\n height: 24px;\n text-align: left;\n .history-item-icon\n display: inline-block;\n width: 24px;\n height: 24px;\n position: absolute;\n top: 6px;\n left: 6px;\n .history-item-checkbox\n display: none;\n width: 24px;\n height: 24px;\n position: absolute;\n top: 5px;\n right: -6px;\n &.selected-item\n background-color: rgba(119, 119, 119, 0.12);\n .history-item-checkbox\n display: inline-block;\n &.disabled-item\n color: #333;\n opacity: 0.3;\n .opened .tie-panel-history\n display: block;\n &:before\n content: '';\n position: absolute;\n display: inline-block;\n margin: 0 auto;\n width: 0;\n height: 0;\n","/* VIRTUAL CHECKBOX */\n.{prefix}-container\n .filter-color-item\n display: inline-block;\n .tui-image-editor-checkbox\n display: block;\n .{prefix}-checkbox-wrap\n display: inline-block !important;\n text-align: left;\n .{prefix}-checkbox-wrap.fixed-width\n width: 187px;\n white-space: normal;\n .{prefix}-checkbox\n display: inline-block;\n margin: 1px 0 1px 0;\n input\n width: 14px;\n height: 14px;\n opacity: 0;\n > label > span\n color: #fff;\n height: 14px;\n position: relative;\n input + label:before,\n > label > span:before\n content: '';\n position: absolute;\n width: 14px;\n height: 14px;\n background-color: #fff;\n top: 6px;\n left: -19px;\n display: inline-block;\n margin: 0;\n text-align: center;\n font-size: 11px;\n border: 0;\n border-radius: 2px;\n padding-top: 1px;\n box-sizing: border-box;\n input[type='checkbox']:checked + span:before\n background-size: cover;\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAMBJREFUKBWVkjEOwjAMRe2WgZW7IIHEDdhghhuwcQ42rlJugAQS54Cxa5cq1QM5TUpByZfS2j9+dlJVt/tX5ZxbS4ZU9VLkQvSHKTIGRaVJYFmKrBbTCJxE2UgCdDzMZDkHrOV6b95V0US6UmgKodujEZbJg0B0ZgEModO5lrY1TMQf1TpyJGBEjD+E2NPN7ukIUDiF/BfEXgRiGEw8NgkffYGYwCi808fpn/6OvfUfsDr/Vc1IfRf8sKnFVqeiVQfDu0tf/nWH9gAAAABJRU5ErkJggg==');\n\n .{prefix}-selectlist-wrap\n position: relative;\n select\n width: 100%;\n height: 28px;\n margin-top: 4px;\n border: 0;\n outline: 0;\n border-radius: 0;\n border: 1px solid #cbdbdb;\n background-color: #fff;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0 7px 0 10px;\n .{prefix}-selectlist\n display: none;\n position: relative;\n top: -1px;\n border: 1px solid #ccc;\n background-color: #fff;\n border-top: 0px;\n padding: 4px 0;\n li\n display: block;\n text-align: left;\n padding: 7px 10px;\n font-family: 'Noto Sans', sans-serif;\n li:hover\n background-color: rgba(81, 92, 230, 0.05);\n .{prefix}-selectlist-wrap:before\n content: '';\n position: absolute;\n display: inline-block;\n width: 14px;\n height: 14px;\n right: 5px;\n top: 10px;\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYBgFOEOAEVkmPDxc89+/f6eAYjzI4kD2FyYmJrOVK1deh4kzwRggGiQBVJCELAZig8SQNYHEmEEEMrh69eo1HR0dfqCYJUickZGxf9WqVf3IakBsFBthklpaWmVA9mEQhrJhUoTp0NBQCRAmrHL4qgAAuu4cWZOZIGsAAAAASUVORK5CYII=');\n background-size: cover;\n .{prefix}-selectlist-wrap select::-ms-expand\n display:none;\n","/* VIRTUAL RANGE */\n.{prefix}-container\n\n .{prefix}-virtual-range-bar\n .{prefix}-virtual-range-subbar\n .{prefix}-virtual-range-pointer\n .{prefix}-disabled\n backbround-color: red;\n\n .{prefix}-range\n position: relative;\n top: 5px;\n width: 166px;\n height: 17px;\n display: inline-block;\n .{prefix}-virtual-range-bar\n top: 7px;\n position: absolute;\n width: 100%;\n height: 2px;\n background-color: #666666;\n .{prefix}-virtual-range-subbar\n position: absolute;\n height: 100%;\n left: 0;\n right: 0;\n background-color: #d1d1d1;\n .{prefix}-virtual-range-pointer\n position: absolute;\n cursor: pointer;\n top: -5px;\n left: 0;\n width: 12px;\n height: 12px;\n background-color: #fff;\n border-radius: 100%;\n .{prefix}-range-wrap\n display: inline-block;\n margin-left: 4px;\n &.short .tui-image-editor-range\n width: 100px;\n .color-picker-control\n .{prefix}-range\n width: 108px;\n margin-left: 10px;\n .{prefix}-virtual-range-pointer\n background-color: #333;\n .{prefix}-virtual-range-bar\n background-color: #ccc;\n .{prefix}-virtual-range-subbar\n background-color: #606060;\n .{prefix}-range-wrap.{prefix}-newline.short\n margin-top: -2px;\n margin-left: 19px;\n label\n color: #8e8e8e;\n font-weight: normal;\n .{prefix}-range-wrap label\n vertical-align: baseline;\n font-size: 11px;\n margin-right: 7px;\n color: #fff;\n .{prefix}-range-value\n cursor: default;\n width: 40px;\n height: 24px;\n outline: none;\n border-radius: 2px;\n box-shadow: none;\n border: 1px solid #d5d5d5;\n text-align: center;\n background-color: #1c1c1c;\n color: #fff;\n font-weight: lighter;\n vertical-align: baseline;\n font-family: 'Noto Sans', sans-serif;\n margin-top: 15px;\n margin-left: 4px;\n .{prefix}-controls\n position: absolute;\n background-color: #151515;\n width: 100%;\n height: 64px;\n display: table;\n bottom: 0;\n z-index: 2;\n .{prefix}-icpartition\n display: inline-block;\n background-color: #444;\n width: 1px;\n height: 24px;\n","/* POSITION LEFT */\n.{prefix}-container\n &.left\n .{prefix}-menu\n > .{prefix}-item[tooltip-content]\n &:before\n left: 28px;\n top: 11px;\n border-right: 7px solid #2f2f2f;\n border-top: 7px solid transparent;\n border-bottom: 7px solid transparent;\n &:after\n top: 7px;\n left: 42px;\n white-space: nowrap;\n .{prefix}-submenu\n left: 0;\n height: 100%;\n width: 248px;\n .{prefix}-main-container\n left: 64px;\n width: calc(100% - 64px);\n height: 100%;\n .{prefix}-controls\n width: 64px;\n height: 100%;\n display: table;\n\n/* POSITION LEFT & RIGHT */\n.{prefix}-container\n &.left, &.right\n .{prefix}-menu\n white-space: inherit;\n .{prefix}-submenu\n white-space: normal;\n > div\n vertical-align: middle;\n .{prefix}-controls li\n display: inline-block;\n margin: 4px auto;\n .{prefix}-icpartition\n position: relative;\n top: -7px;\n width: 24px;\n height: 1px;\n .{prefix}-submenu\n .{prefix}-partition\n display: block;\n width: 75%;\n margin: auto;\n > div\n border-left: 0;\n height:10px;\n border-bottom: 1px solid #3c3c3c;\n width: 100%;\n margin: 0;\n .{prefix}-submenu-align\n margin-right: 0;\n .{prefix}-submenu-item\n li\n margin-top: 15px;\n .tui-colorpicker-clearfix li\n margin-top: 0;\n\n .{prefix}-checkbox-wrap.fixed-width\n width: 182px;\n white-space: normal;\n .{prefix}-range-wrap.{prefix}-newline label.range\n display: block;\n text-align: left;\n width: 75%;\n margin: auto;\n .{prefix}-range\n width: 136px;\n\n\n/* POSITION RIGHT */\n.{prefix}-container\n &.right\n .{prefix}-menu\n > .{prefix}-item[tooltip-content]\n &:before\n left: -3px;\n top: 11px;\n border-left: 7px solid #2f2f2f;\n border-top: 7px solid transparent;\n border-bottom: 7px solid transparent;\n &:after\n top: 7px;\n left: unset;\n right: 43px;\n white-space: nowrap;\n .{prefix}-submenu\n right: 0;\n height: 100%;\n width: 248px;\n .{prefix}-main-container \n right: 64px;\n width: calc(100% - 64px);\n height: 100%;\n .{prefix}-controls\n right: 0;\n width: 64px;\n height: 100%;\n display: table;\n\n\n/* POSITION TOP & BOTTOM */\n.{prefix}-container\n &.top, &.bottom\n .{prefix}-submenu\n .{prefix}-partition.only-left-right\n display: none;\n\n\n/* POSITION BOTTOM */\n.{prefix}-container\n &.bottom .tui-image-editor-submenu > div\n padding-bottom: 24px;\n\n/* POSITION TOP */\n.{prefix}-container\n &.top\n .color-picker-control .triangle\n top: -8px;\n border-right: 7px solid transparent;\n border-top: 0px;\n border-left: 7px solid transparent;\n border-bottom: 8px solid #fff;\n .{prefix}-size-wrap\n height: 100%;\n .{prefix}-main-container\n bottom: 0;\n .{prefix}-menu\n > .{prefix}-item[tooltip-content]\n &:before\n left: 13px;\n border-top: 0;\n border-bottom: 7px solid #2f2f2f;\n top: 33px;\n &:after\n top: 38px;\n .{prefix}-submenu\n top: 0;\n bottom: auto;\n > div\n padding-top: 24px;\n vertical-align: top;\n .{prefix}-controls-logo\n display: table-cell;\n .{prefix}-controls-buttons\n display: table-cell;\n .{prefix}-main\n top: 64px;\n height: calc(100% - 64px);\n .{prefix}-controls\n top: 0;\n bottom: inherit;\n\n/* HELP MENUBAR POSITION TOP */\n.{prefix}-container\n .{prefix}-help-menu\n &.top\n white-space: nowrap;\n width: 506px;\n height: 40px;\n top: 8px;\n left: 50%;\n transform: translateX(-50%);\n .tie-panel-history\n top: 45px;\n .opened .tie-panel-history:before\n border-right: 8px solid transparent;\n border-left: 8px solid transparent;\n border-bottom: 8px solid #fff;\n left: 90px;\n top: -8px;\n > .{prefix}-item[tooltip-content]\n &:before\n left: 13px;\n top: 35px;\n border: none;\n border-bottom: 7px solid #2f2f2f;\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n &:after\n top: 41px;\n left: -4px;\n white-space: nowrap;\n > .{prefix}-item[tooltip-content].opened\n &:before,\n &:after\n content: none;\n\n/* HELP MENUBAR POSITION BOTTOM */\n.{prefix}-container\n .{prefix}-help-menu\n &.bottom\n white-space: nowrap;\n width: 506px;\n height: 40px;\n bottom: 8px;\n left: 50%;\n transform: translateX(-50%);\n .tie-panel-history\n bottom: 45px;\n .opened .tie-panel-history:before\n border-right: 8px solid transparent;\n border-left: 8px solid transparent;\n border-top: 8px solid #fff;\n left: 90px;\n bottom: -8px;\n > .{prefix}-item[tooltip-content]\n &:before\n left: 13px;\n top: auto;\n bottom: 36px;\n border: none;\n border-top: 7px solid #2f2f2f;\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n &:after\n top: auto;\n left: -4px;\n bottom: 41px;\n white-space: nowrap;\n > .{prefix}-item[tooltip-content].opened\n &:before,\n &:after\n content: none;\n\n/* HELP MENUBAR POSITION LEFT */\n.{prefix}-container\n .{prefix}-help-menu\n &.left\n white-space: inherit;\n width: 40px;\n height: 506px;\n left: 8px;\n top: 50%;\n transform: translateY(-50%);\n .tie-panel-history\n left: 140px;\n top: -4px;\n .opened .tie-panel-history:before\n border-top: 8px solid transparent;\n border-bottom: 8px solid transparent;\n border-right: 8px solid #fff;\n left: -8px;\n top: 14px;\n .{prefix}-item\n margin: 4px auto;\n padding: 6px 8px;\n > .{prefix}-item[tooltip-content]\n &:before\n left: 27px;\n top: 11px;\n border: none;\n border-right: 7px solid #2f2f2f;\n border-top: 7px solid transparent;\n border-bottom: 7px solid transparent;\n &:after\n top: 7px;\n left: 40px;\n white-space: nowrap;\n > .{prefix}-item[tooltip-content].opened\n &:before,\n &:after\n content: none;\n\n/* HELP MENUBAR POSITION RIGHT */\n.{prefix}-container\n .{prefix}-help-menu\n &.right\n white-space: inherit;\n width: 40px;\n height: 506px;\n right: 8px;\n top: 50%;\n transform: translateY(-50%);\n .tie-panel-history\n right: -30px;\n top: -4px;\n .opened .tie-panel-history:before\n border-top: 8px solid transparent;\n border-bottom: 8px solid transparent;\n border-left: 8px solid #fff;\n right: -8px;\n top: 14px;\n .{prefix}-item\n margin: 4px auto;\n padding: 6px 8px;\n > .{prefix}-item[tooltip-content]\n &:before\n left: -6px;\n top: 11px;\n border: none;\n border-left: 7px solid #2f2f2f;\n border-top: 7px solid transparent;\n border-bottom: 7px solid transparent;\n &:after\n top: 7px;\n left: auto;\n right: 39px;\n white-space: nowrap;\n > .{prefix}-item[tooltip-content].opened\n &:before,\n &:after\n content: none;\n","/* ICON */\n.{prefix}-container\n .tie-icon-add-button .{prefix}-button\n min-width: 42px;\n .svg_ic-menu\n .svg_ic-helpmenu\n width: 24px;\n height: 24px;\n .svg_ic-submenu\n width: 32px;\n height: 32px;\n .svg_img-bi\n width: 257px;\n height: 26px;\n\n .{prefix}-help-menu\n .{prefix}-controls\n svg > use\n display: none;\n .enabled svg:hover > use.hover\n .normal svg:hover > use.hover\n display: block;\n .active svg:hover > use.hover\n display: none;\n .on svg > use.hover,\n .opened svg > use.hover\n display: block;\n svg > use.normal\n display: block;\n .active svg > use.active\n display: block;\n .enabled svg > use.enabled\n display: block;\n .active svg > use.normal,\n .enabled svg > use.normal\n display: none;\n .help svg > use.disabled,\n .help.enabled svg > use.normal\n display: block;\n .help.enabled svg > use.disabled\n display: none;\n\n .{prefix}-controls:hover\n z-index: 3;\n","/* COLOR PICKER */\n.{prefix}-container\n div.tui-colorpicker-clearfix\n width: 159px;\n height: 28px;\n border: 1px solid #d5d5d5;\n border-radius: 2px;\n background-color: #f5f5f5;\n margin-top: 6px;\n padding: 4px 7px 4px 7px;\n .tui-colorpicker-palette-hex\n width: 114px;\n background-color: #f5f5f5;\n border: 0;\n font-size: 11px;\n margin-top: 2px;\n font-family: 'Noto Sans', sans-serif;\n .tui-colorpicker-palette-hex[value='#ffffff'] + .tui-colorpicker-palette-preview,\n .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview\n border: 1px solid #ccc;\n .tui-colorpicker-palette-hex[value=''] + .tui-colorpicker-palette-preview\n background-size: cover;\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC');\n .tui-colorpicker-palette-preview\n border-radius: 100%;\n float: left;\n width: 17px;\n height: 17px;\n border: 0;\n .color-picker-control\n position: absolute;\n display: none;\n z-index: 99;\n width: 192px;\n background-color: #fff;\n box-shadow: 0 3px 22px 6px rgba(0, 0, 0, .15);\n padding: 16px;\n border-radius: 2px;\n .tui-colorpicker-palette-toggle-slider\n display: none;\n .tui-colorpicker-palette-button\n border: 0;\n border-radius: 100%;\n margin: 2px;\n background-size: cover;\n font-size: 1px;\n &[title='#ffffff']\n border: 1px solid #ccc;\n &[title='']\n border: 1px solid #ccc;\n .triangle\n width: 0;\n height: 0;\n border-right: 7px solid transparent;\n border-top: 8px solid #fff;\n border-left: 7px solid transparent;\n position: absolute;\n bottom: -8px;\n left: 84px;\n .tui-colorpicker-container,\n .tui-colorpicker-palette-container ul,\n .tui-colorpicker-palette-container\n width: 100%;\n height: auto;\n\n\n .filter-color-item\n .color-picker-control label\n font-color: #333;\n font-weight: normal;\n margin-right: 7pxleft\n .tui-image-editor-checkbox\n margin-top: 0;\n input + label:before,\n > label:before\n left: -16px;\n .color-picker\n width: 100%;\n height: auto;\n .color-picker-value \n width: 32px;\n height: 32px;\n border: 0px;\n border-radius: 100%;\n margin: auto;\n margin-bottom: 1px;\n &.transparent\n border: 1px solid #cbcbcb;\n background-size: cover;\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAdBJREFUWAnFl0FuwjAQRZ0ukiugHqFSOQNdseuKW3ALzkA4BateICvUGyCxrtRFd4WuunH/TzykaYJrnLEYaTJJsP2+x8GZZCbQrLU5mj7Bn+EP8HvnCObd+R7xBV5lWfaNON4AnsA38E94qLEt+0yiFaBzAV/Bv+Cxxr4co7hKCDpw1q9wLeNYYdlAwyn8TYt8Hme3+8D5ozcTaMCZ68PXa2tnM2sbEcOZAJhrrpl2DAcTOGNjZPSfCdzkw6JrfbiMv+osBe4y9WOedhm4jZfhbENWuxS44H9Wz/xw4WzqLOAqh1+zycgAwzEMzr5k5gaHOa9ULBwuuDkFlHI1Kl4PJ66kgIpnoywOTmRFAYcbwYk9UMApWkD8zAV5ihcwHk4Rx7gl0IFTQL0EFc+CTQ9OZHWH3YhlVJiVpTHbrTGLhTHLZVgff6s9lyBsI9KduSS83oj+34rTwJutmBmCnMsvozRwZqB5GTkBw6/jdPDu69iJ6BYk6eCcfbcgcQIK/MByaaiMqm8rHcjol2TnpWDhyAKSGdA3FrxtJUToX0ODqatetfGE+8tyEUOV8GY5dGRwLP/MBS4RHQr4bT7NRAQjlcOTfZxmv2G+c4hI8nn+Ax5PG/zhI393AAAAAElFTkSuQmCC');\n\n .color-picker-value + label\n color: #fff;\n\n .{prefix}-submenu svg > use\n display: none;\n .{prefix}-submenu svg > use.normal\n display: block;\n","/* ICON BUTTON */\n.tie-icon-add-button\n &.icon-bubble .{prefix}-button[data-icontype=\"icon-bubble\"] svg > use.active,\n &.icon-heart .{prefix}-button[data-icontype=\"icon-heart\"] svg > use.active,\n &.icon-location .{prefix}-button[data-icontype=\"icon-location\"] svg > use.active,\n &.icon-polygon .{prefix}-button[data-icontype=\"icon-polygon\"] svg > use.active,\n &.icon-star .{prefix}-button[data-icontype=\"icon-star\"] svg > use.active,\n &.icon-star-2 .{prefix}-button[data-icontype=\"icon-star-2\"] svg > use.active,\n &.icon-arrow-3 .{prefix}-button[data-icontype=\"icon-arrow-3\"] svg > use.active,\n &.icon-arrow-2 .{prefix}-button[data-icontype=\"icon-arrow-2\"] svg > use.active,\n &.icon-arrow .{prefix}-button[data-icontype=\"icon-arrow\"] svg > use.active,\n &.icon-bubble .{prefix}-button[data-icontype=\"icon-bubble\"] svg > use.active\n display: block;\n\n/* DRAW BUTTON */\n.tie-draw-line-select-button\n &.line .{prefix}-button.line svg > use.normal,\n &.free .{prefix}-button.free svg > use.normal\n display: none;\n\n &.line .{prefix}-button.line svg > use.active,\n &.free .{prefix}-button.free svg > use.active\n display: block;\n\n/* FLIP BUTTON */\n.tie-flip-button\n &.resetFlip .{prefix}-button.resetFlip,\n &.flipX .{prefix}-button.flipX,\n &.flipY .{prefix}-button.flipY\n svg > use.normal\n display: none;\n svg > use.active\n display: block;\n\n/* MASK BUTTON */\n.tie-mask-apply.apply.active .{prefix}-button.apply\n label\n color: #fff;\n svg > use.active\n display: block;\n\n/* CROP BUTTON */\n.tie-crop-button,\n.tie-crop-preset-button\n .{prefix}-button.apply\n margin-right: 24px;\n .{prefix}-button.preset.active svg > use.active\n display: block;\n .{prefix}-button.apply.active svg > use.active\n display: block;\n\n/* RESIZE BUTTON */\n.tie-resize-button,\n.tie-resize-preset-button\n .{prefix}-button.apply\n margin-right: 24px;\n .{prefix}-button.preset.active svg > use.active\n display: block;\n .{prefix}-button.apply.active svg > use.active\n display: block;\n\n\n/* SHAPE BUTTON */\n.tie-shape-button\n &.rect .{prefix}-button.rect,\n &.circle .{prefix}-button.circle,\n &.triangle .{prefix}-button.triangle\n svg > use.normal\n display: none;\n svg > use.active\n display: block;\n\n/* TEXT BUTTON */\n.tie-text-effect-button\n .{prefix}-button.active svg > use.active\n display: block;\n.tie-text-align-button\n &.tie-text-align-left .{prefix}-button.left svg > use.active,\n &.tie-text-align-center .{prefix}-button.center svg > use.active,\n &.tie-text-align-right .{prefix}-button.right svg > use.active\n display: block;\n.tie-mask-image-file,\n.tie-icon-image-file\n opacity: 0;\n position: absolute;\n width: 100%;\n height: 100%;\n border: 1px solid green;\n cursor: inherit;\n left: 0;\n top: 0;\n\n\n/* FLIP BUTTON */\n.tie-zoom-button\n &.resetFlip .{prefix}-button.resetFlip,\n &.flipX .{prefix}-button.flipX,\n &.flipY .{prefix}-button.flipY\n svg > use.normal\n display: none;\n svg > use.active\n display: block;\n","prefix = 'tui-image-editor'\n\n@import 'main.styl'\n@import 'gridtable.styl'\n@import 'submenu.styl'\n@import 'checkbox.styl'\n@import 'range.styl'\n@import 'position.styl'\n@import 'icon.styl'\n@import 'colorpicker.styl'\n@import 'buttons.styl'\n.{prefix}-container.top\n &.{prefix}-top-optimization\n .{prefix}-controls ul\n text-align: right;\n .{prefix}-controls-logo\n display: none;\n"]} \ No newline at end of file diff --git a/apps/image-editor/dist/tui-image-editor.min.js b/apps/image-editor/dist/tui-image-editor.min.js index 361f5ae5e..40544d4a4 100644 --- a/apps/image-editor/dist/tui-image-editor.min.js +++ b/apps/image-editor/dist/tui-image-editor.min.js @@ -1,9 +1,16 @@ /*! - * tui-image-editor.min.js - * @version 3.15.0 - * @author NHN. FE Development Lab + * TOAST UI ImageEditor + * @version 3.15.1 + * @author NHN. FE Development Team * @license MIT */ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("tui-code-snippet"),require("fabric").fabric,require("tui-color-picker")):"function"==typeof define&&define.amd?define(["tui-code-snippet","fabric","tui-color-picker"],t):"object"==typeof exports?exports.ImageEditor=t(require("tui-code-snippet"),require("fabric").fabric,require("tui-color-picker")):(e.tui=e.tui||{},e.tui.ImageEditor=t(e.tui.util,e.fabric,e.tui.colorPicker))}(window,function(n,i,o){return s={},a.m=r=[function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.defaultResizePixelValues=t.emptyCropRectValues=t.defaultFilterRangeValues=t.defaultTextRangeValues=t.defaultShapeStrokeValues=t.defaultDrawRangeValues=t.defaultRotateRangeValues=t.defaultIconPath=t.rejectMessages=t.fObjectOptions=t.keyCodes=t.zoomModes=t.drawingMenuNames=t.drawingModes=t.historyNames=t.selectorNames=t.eventNames=t.commandNames=t.CROPZONE_DEFAULT_OPTIONS=t.SHAPE_DEFAULT_OPTIONS=t.componentNames=t.filterType=t.OBJ_TYPE=t.SHAPE_TYPE=t.SHAPE_FILL_TYPE=t.HELP_MENUS=t.DELETE_HELP_MENUS=t.COMMAND_HELP_MENUS=t.ZOOM_HELP_MENUS=void 0;var i=n(1),o=t.ZOOM_HELP_MENUS=["zoomIn","zoomOut","hand"],a=t.COMMAND_HELP_MENUS=["history","undo","redo","reset"],n=t.DELETE_HELP_MENUS=["delete","deleteAll"];t.HELP_MENUS=[].concat(o,a,n),t.SHAPE_FILL_TYPE={FILTER:"filter",COLOR:"color"},t.SHAPE_TYPE=["rect","circle","triangle"],t.OBJ_TYPE={CROPZONE:"cropzone"},t.filterType={VINTAGE:"vintage",SEPIA2:"sepia2",REMOVE_COLOR:"removeColor",COLOR_FILTER:"colorFilter",REMOVE_WHITE:"removeWhite",BLEND_COLOR:"blendColor",BLEND:"blend"},t.componentNames=(0,i.keyMirror)("IMAGE_LOADER","CROPPER","FLIP","ROTATION","FREE_DRAWING","LINE","TEXT","ICON","FILTER","SHAPE","ZOOM","RESIZE"),t.SHAPE_DEFAULT_OPTIONS={lockSkewingX:!0,lockSkewingY:!0,bringForward:!0,isRegular:!1},t.CROPZONE_DEFAULT_OPTIONS={hasRotatingPoint:!1,hasBorders:!1,lockScalingFlip:!0,lockRotation:!0,lockSkewingX:!0,lockSkewingY:!0},t.commandNames={CLEAR_OBJECTS:"clearObjects",LOAD_IMAGE:"loadImage",FLIP_IMAGE:"flip",ROTATE_IMAGE:"rotate",ADD_OBJECT:"addObject",REMOVE_OBJECT:"removeObject",APPLY_FILTER:"applyFilter",REMOVE_FILTER:"removeFilter",ADD_ICON:"addIcon",CHANGE_ICON_COLOR:"changeIconColor",ADD_SHAPE:"addShape",CHANGE_SHAPE:"changeShape",ADD_TEXT:"addText",CHANGE_TEXT:"changeText",CHANGE_TEXT_STYLE:"changeTextStyle",ADD_IMAGE_OBJECT:"addImageObject",RESIZE_CANVAS_DIMENSION:"resizeCanvasDimension",SET_OBJECT_PROPERTIES:"setObjectProperties",SET_OBJECT_POSITION:"setObjectPosition",CHANGE_SELECTION:"changeSelection",RESIZE_IMAGE:"resize"},t.eventNames={OBJECT_ACTIVATED:"objectActivated",OBJECT_MOVED:"objectMoved",OBJECT_SCALED:"objectScaled",OBJECT_CREATED:"objectCreated",OBJECT_ROTATED:"objectRotated",OBJECT_ADDED:"objectAdded",OBJECT_MODIFIED:"objectModified",TEXT_EDITING:"textEditing",TEXT_CHANGED:"textChanged",ICON_CREATE_RESIZE:"iconCreateResize",ICON_CREATE_END:"iconCreateEnd",ADD_TEXT:"addText",ADD_OBJECT:"addObject",ADD_OBJECT_AFTER:"addObjectAfter",MOUSE_DOWN:"mousedown",MOUSE_UP:"mouseup",MOUSE_MOVE:"mousemove",REDO_STACK_CHANGED:"redoStackChanged",UNDO_STACK_CHANGED:"undoStackChanged",SELECTION_CLEARED:"selectionCleared",SELECTION_CREATED:"selectionCreated",EXECUTE_COMMAND:"executeCommand",AFTER_UNDO:"afterUndo",AFTER_REDO:"afterRedo",ZOOM_CHANGED:"zoomChanged",HAND_STARTED:"handStarted",HAND_STOPPED:"handStopped",KEY_DOWN:"keydown",KEY_UP:"keyup",INPUT_BOX_EDITING_STARTED:"inputBoxEditingStarted",INPUT_BOX_EDITING_STOPPED:"inputBoxEditingStopped",FOCUS:"focus",BLUR:"blur",IMAGE_RESIZED:"imageResized"},t.selectorNames={COLOR_PICKER_INPUT_BOX:".tui-colorpicker-palette-hex"},t.historyNames={LOAD_IMAGE:"Load",LOAD_MASK_IMAGE:"Mask",ADD_MASK_IMAGE:"Mask",ADD_IMAGE_OBJECT:"Mask",CROP:"Crop",RESIZE:"Resize",APPLY_FILTER:"Filter",REMOVE_FILTER:"Filter",CHANGE_SHAPE:"Shape",CHANGE_ICON_COLOR:"Icon",ADD_TEXT:"Text",CHANGE_TEXT_STYLE:"Text",REMOVE_OBJECT:"Delete",CLEAR_OBJECTS:"Delete"},t.drawingModes=(0,i.keyMirror)("NORMAL","CROPPER","FREE_DRAWING","LINE_DRAWING","TEXT","SHAPE","ICON","ZOOM","RESIZE"),t.drawingMenuNames={TEXT:"text",CROP:"crop",RESIZE:"resize",SHAPE:"shape",ZOOM:"zoom"},t.zoomModes={DEFAULT:"normal",ZOOM:"zoom",HAND:"hand"},t.keyCodes={Z:90,Y:89,C:67,V:86,SHIFT:16,BACKSPACE:8,DEL:46,ARROW_DOWN:40,ARROW_UP:38,SPACE:32},t.fObjectOptions={SELECTION_STYLE:{borderColor:"red",cornerColor:"green",cornerSize:10,originX:"center",originY:"center",transparentCorners:!1}},t.rejectMessages={addedObject:"The object is already added.",flip:"The flipX and flipY setting values are not changed.",invalidDrawingMode:"This operation is not supported in the drawing mode.",invalidParameters:"Invalid parameters.",isLock:"The executing command state is locked.",loadImage:"The background image is empty.",loadingImageFailed:"Invalid image loaded.",noActiveObject:"There is no active object.",noObject:"The object is not in canvas.",redo:"The promise of redo command is reject.",rotation:"The current angle is same the old angle.",undo:"The promise of undo command is reject.",unsupportedOperation:"Unsupported operation.",unsupportedType:"Unsupported object type."},t.defaultIconPath={"icon-arrow":"M40 12V0l24 24-24 24V36H0V12h40z","icon-arrow-2":"M49,32 H3 V22 h46 l-18,-18 h12 l23,23 L43,50 h-12 l18,-18 z ","icon-arrow-3":"M43.349998,27 L17.354,53 H1.949999 l25.996,-26 L1.949999,1 h15.404 L43.349998,27 z ","icon-star":"M35,54.557999 l-19.912001,10.468 l3.804,-22.172001 l-16.108,-15.7 l22.26,-3.236 L35,3.746 l9.956,20.172001 l22.26,3.236 l-16.108,15.7 l3.804,22.172001 z ","icon-star-2":"M17,31.212 l-7.194,4.08 l-4.728,-6.83 l-8.234,0.524 l-1.328,-8.226 l-7.644,-3.14 l2.338,-7.992 l-5.54,-6.18 l5.54,-6.176 l-2.338,-7.994 l7.644,-3.138 l1.328,-8.226 l8.234,0.522 l4.728,-6.83 L17,-24.312 l7.194,-4.08 l4.728,6.83 l8.234,-0.522 l1.328,8.226 l7.644,3.14 l-2.338,7.992 l5.54,6.178 l-5.54,6.178 l2.338,7.992 l-7.644,3.14 l-1.328,8.226 l-8.234,-0.524 l-4.728,6.83 z ","icon-polygon":"M3,31 L19,3 h32 l16,28 l-16,28 H19 z ","icon-location":"M24 62C8 45.503 0 32.837 0 24 0 10.745 10.745 0 24 0s24 10.745 24 24c0 8.837-8 21.503-24 38zm0-28c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10z","icon-heart":"M49.994999,91.349998 l-6.96,-6.333 C18.324001,62.606995 2.01,47.829002 2.01,29.690998 C2.01,14.912998 13.619999,3.299999 28.401001,3.299999 c8.349,0 16.362,5.859 21.594,12 c5.229,-6.141 13.242001,-12 21.591,-12 c14.778,0 26.390999,11.61 26.390999,26.390999 c0,18.138 -16.314001,32.916 -41.025002,55.374001 l-6.96,6.285 z ","icon-bubble":"M44 48L34 58V48H12C5.373 48 0 42.627 0 36V12C0 5.373 5.373 0 12 0h40c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12h-8z"},t.defaultRotateRangeValues={realTimeEvent:!0,min:-360,max:360,value:0},t.defaultDrawRangeValues={min:5,max:30,value:12},t.defaultShapeStrokeValues={realTimeEvent:!0,min:2,max:300,value:3},t.defaultTextRangeValues={realTimeEvent:!0,min:10,max:100,value:50},t.defaultFilterRangeValues={tintOpacityRange:{realTimeEvent:!0,min:0,max:1,value:.7,useDecimal:!0},removewhiteDistanceRange:{realTimeEvent:!0,min:0,max:1,value:.2,useDecimal:!0},brightnessRange:{realTimeEvent:!0,min:-1,max:1,value:0,useDecimal:!0},noiseRange:{realTimeEvent:!0,min:0,max:1e3,value:100},pixelateRange:{realTimeEvent:!0,min:2,max:20,value:4},colorfilterThresholdRange:{realTimeEvent:!0,min:0,max:1,value:.2,useDecimal:!0},blurFilterRange:{value:.1}},t.emptyCropRectValues={LEFT:0,TOP:0,WIDTH:.5,HEIGHT:.5},t.defaultResizePixelValues={realTimeEvent:!0,min:32,max:4088,value:800}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.Promise=void 0,t.clamp=function(e,t,n){{var i;nthis._max||(e=(0,l.clamp)(e,this._min,this.max),this.value=e,this.fire("change",e,!1)))}},{key:"_valueUpDownForKeyEvent",value:function(e,t){var n=this._useDecimal?.1:1;return t===c.keyCodes.ARROW_UP?e+=n:t===c.keyCodes.ARROW_DOWN&&(e-=n),e}},{key:"_changeValueWithInput",value:function(e,t){var n=t.keyCode,i=t.target;0<=[c.keyCodes.ARROW_UP,c.keyCodes.ARROW_DOWN].indexOf(n)||(n=!(t=this._filterForInputText(i.value))||isNaN(t),i.value=t,n||(t=(this._useDecimal?Number:(0,l.toInteger))(t),t=(0,l.clamp)(t,this._min,this.max),this.value=t,this.fire("change",t,e)))}},{key:"_addClickEvent",value:function(){this.rangeElement.addEventListener("click",this.eventHandler.changeSlideFinally)}},{key:"_removeClickEvent",value:function(){this.rangeElement.removeEventListener("click",this.eventHandler.changeSlideFinally)}},{key:"_addDragEvent",value:function(){this.pointer.addEventListener("mousedown",this.eventHandler.startChangingSlide)}},{key:"_removeDragEvent",value:function(){this.pointer.removeEventListener("mousedown",this.eventHandler.startChangingSlide)}},{key:"_changeSlide",value:function(e){e=e.screenX-this.firstPosition,e=(e=this.firstLeft+e)>this.rangeWidth?this.rangeWidth:e;this.pointer.style.left=(e=e<0?0:e)+"px",this.subbar.style.right=this.rangeWidth-e+"px";e/=this.rangeWidth,e=this._absMax*e+this._min,e=this._useDecimal?e:(0,l.toInteger)(e);this.value!==e&&(this.value=e,this.realTimeEvent&&this.fire("change",this._value,!1))}},{key:"_changeSlideFinally",value:function(e){var t;e.stopPropagation(),"tui-image-editor-range"===e.target.className&&(t=e.offsetX/this.rangeWidth,e=this._absMax*t+this._min,this.pointer.style.left=t*this.rangeWidth+"px",this.subbar.style.right=(1-t)*this.rangeWidth+"px",this.value=e,this.fire("change",e,!0))}},{key:"_startChangingSlide",value:function(e){this.firstPosition=e.screenX,this.firstLeft=(0,l.toInteger)(this.pointer.style.left)||0,document.addEventListener("mousemove",this.eventHandler.changeSlide),document.addEventListener("mouseup",this.eventHandler.stopChangingSlide)}},{key:"_stopChangingSlide",value:function(){this.fire("change",this._value,!0),document.removeEventListener("mousemove",this.eventHandler.changeSlide),document.removeEventListener("mouseup",this.eventHandler.stopChangingSlide)}},{key:"_filterForInputText",value:function(e){return e.replace(u,"$1$2$3")}},{key:"max",set:function(e){this._max=e,this._absMax=-1*this._min+this._max,this.value=this._value},get:function(){return this._max}},{key:"min",set:function(e){this._min=e,this.max=this._max},get:function(){return this._min}},{key:"value",get:function(){return this._value},set:function(e){var t=((e=this._useDecimal?e:(0,l.toInteger)(e))-this._min)*this.rangeWidth/this._absMax;this.rangeWidth"+e+""}var a,r=n(12),s=n(87),l=n(59),c=n(41),u=n(60),h=n(33),n=n(37),d="prototype",f="script",p=n("IE_PROTO"),v=function(){try{a=document.domain&&new ActiveXObject("htmlfile")}catch(e){}var e;v=a?function(e){e.write(o("")),e.close();var t=e.parentWindow.Object;return e=null,t}(a):((e=h("iframe")).style.display="none",u.appendChild(e),e.src=String("javascript:"),(e=e.contentWindow.document).open(),e.write(o("document.F=Object")),e.close(),e.F);for(var t=l.length;t--;)delete v[d][l[t]];return v()};c[p]=!0,e.exports=Object.create||function(e,t){var n;return null!==e?(i[d]=r(e),n=new i,i[d]=null,n[p]=e):n=v(),void 0===t?n:s(n,t)}},function(e,t,n){var i=n(40),o=Math.min;e.exports=function(e){return 0o;)r(i,n=t[o++])&&(~l(a,n)||a.push(n));return a}},function(e,t,n){var l=n(25),c=n(58),u=n(91),n=function(s){return function(e,t,n){var i,o=l(e),a=c(o.length),r=u(n,a);if(s&&t!=t){for(;rn;){var i,o,a,r=f[n++],s=t?r.ok:r.fail,l=r.resolve,c=r.reject,u=r.domain;try{s?(t||(2===h.rejection&&ae(h),h.rejection=1),!0===s?i=e:(u&&u.enter(),i=s(e),u&&(u.exit(),a=!0)),i===r.promise?c(Y("Promise-chain cycle")):(o=p(i))?o.call(i,l,c):l(i)):c(e)}catch(e){u&&!a&&u.exit(),c(e)}}h.reactions=[],h.notified=!1,d&&!h.rejection&&ie(h)}))}function a(e,t,n){var i,o;Q?((i=q.createEvent("Event")).promise=t,i.reason=n,i.initEvent(e,!1,!0),f.dispatchEvent(i)):i={promise:t,reason:n},!ee&&(o=f["on"+e])?o(i):e===te&&I("Unhandled promise rejection",n)}function r(t,n,i){return function(e){t(n,e,i)}}function s(e,t,n){e.done||(e.done=!0,(e=n?n:e).value=t,e.state=2,o(e,!0))}var i,l,c,u,h=n(14),d=n(21),f=n(5),v=n(18),m=n(63),g=n(28),y=n(98),b=n(39),_=n(45),k=n(100),E=n(15),O=n(17),w=n(101),C=n(64),M=n(27),x=n(102),S=n(65),P=n(66).set,T=n(103),j=n(68),I=n(105),L=n(22),A=n(29),D=n(47),R=n(54),N=n(6),z=n(107),H=n(46),B=n(62),F=N("species"),V="Promise",U=D.get,W=D.set,X=D.getterFor(V),D=m&&m.prototype,Z=m,G=D,Y=f.TypeError,q=f.document,J=f.process,K=L.f,$=K,Q=!!(q&&q.createEvent&&f.dispatchEvent),ee="function"==typeof PromiseRejectionEvent,te="unhandledrejection",ne=!1,R=R(V,function(){var e=C(Z)!==String(Z);if(!e&&66===B)return!0;if(d&&!G.finally)return!0;if(51<=B&&/native code/.test(Z))return!1;function t(e){e(function(){},function(){})}var n=new Z(function(e){e(1)});return(n.constructor={})[F]=t,!(ne=n.then(function(){})instanceof t)||!e&&z&&!ee}),x=R||!x(function(e){Z.all(e).catch(function(){})}),ie=function(o){P.call(f,function(){var e,t=o.facade,n=o.value,i=oe(o);if(i&&(e=A(function(){H?J.emit("unhandledRejection",n,t):a(te,t,n)}),o.rejection=H||oe(o)?2:1,e.error))throw e.value})},oe=function(e){return 1!==e.rejection&&!e.parent},ae=function(t){P.call(f,function(){var e=t.facade;H?J.emit("rejectionHandled",e):a("rejectionhandled",e,t.value)})},re=function(n,e,t){if(!n.done){n.done=!0,t&&(n=t);try{if(n.facade===e)throw Y("Promise can't be resolved itself");var i=p(e);i?T(function(){var t={done:!1};try{i.call(e,r(re,t,n),r(s,t,n))}catch(e){s(t,e,n)}}):(n.value=e,n.state=1,o(n,!1))}catch(e){s({done:!1},e,n)}}};if(R&&(G=(Z=function(e){w(this,Z,V),O(e),i.call(this);var t=U(this);try{e(r(re,t),r(s,t))}catch(e){s(t,e)}}).prototype,(i=function(e){W(this,{type:V,done:!1,notified:!1,parent:!1,reactions:[],rejection:!1,state:0,value:void 0})}).prototype=y(G,{then:function(e,t){var n=X(this),i=K(S(this,Z));return i.ok="function"!=typeof e||e,i.fail="function"==typeof t&&t,i.domain=H?J.domain:void 0,n.parent=!0,n.reactions.push(i),0!=n.state&&o(n,!1),i.promise},catch:function(e){return this.then(void 0,e)}}),l=function(){var e=new i,t=U(e);this.promise=e,this.resolve=r(re,t),this.reject=r(s,t)},L.f=K=function(e){return e===Z||e===c?new l:$(e)},!d&&"function"==typeof m&&D!==Object.prototype)){u=D.then,ne||(g(D,"then",function(e,t){var n=this;return new Z(function(e,t){u.call(n,e,t)}).then(e,t)},{unsafe:!0}),g(D,"catch",G.catch,{unsafe:!0}));try{delete D.constructor}catch(e){}b&&b(D,G)}h({global:!0,wrap:!0,forced:R},{Promise:Z}),_(Z,V,!1,!0),k(V),c=v(V),h({target:V,stat:!0,forced:R},{reject:function(e){var t=K(this);return t.reject.call(void 0,e),t.promise}}),h({target:V,stat:!0,forced:d||R},{resolve:function(e){return j(d&&this===c?Z:this,e)}}),h({target:V,stat:!0,forced:x},{all:function(e){var s=this,t=K(s),l=t.resolve,c=t.reject,n=A(function(){var i=O(s.resolve),o=[],a=0,r=1;M(e,function(e){var t=a++,n=!1;o.push(void 0),r++,i.call(s,e).then(function(e){n||(n=!0,o[t]=e,--r||l(o))},c)}),--r||l(o)});return n.error&&c(n.value),t.promise},race:function(e){var n=this,i=K(n),o=i.reject,t=A(function(){var t=O(n.resolve);M(e,function(e){t.call(n,e).then(i.resolve,o)})});return t.error&&o(t.value),i.promise}})},function(e,t,n){var o=n(28);e.exports=function(e,t,n){for(var i in t)n&&n.unsafe&&e[i]?e[i]=t[i]:o(e,i,t[i],n);return e}},function(e,t,n){"use strict";var i=n(44),o=n(43);e.exports=i?{}.toString:function(){return"[object "+o(this)+"]"}},function(e,t,n){"use strict";var i=n(18),o=n(26),a=n(6),r=n(16),s=a("species");e.exports=function(e){var t=i(e),e=o.f;r&&t&&!t[s]&&e(t,s,{configurable:!0,get:function(){return this}})}},function(e,t){e.exports=function(e,t,n){if(!(e instanceof t))throw TypeError("Incorrect "+(n?n+" ":"")+"invocation");return e}},function(e,t,n){var o=n(6)("iterator"),a=!1;try{var i=0,r={next:function(){return{done:!!i++}},return:function(){a=!0}};r[o]=function(){return this},Array.from(r,function(){throw 2})}catch(e){}e.exports=function(e,t){if(!t&&!a)return!1;var n=!1;try{var i={};i[o]=function(){return{next:function(){return{done:n=!0}}}},e(i)}catch(e){}return n}},function(e,t,n){var i,o,a,r,s,l,c,u,h=n(5),d=n(50).f,f=n(66).set,p=n(67),v=n(104),m=n(46),g=h.MutationObserver||h.WebKitMutationObserver,y=h.document,b=h.process,n=h.Promise,d=d(h,"queueMicrotask"),d=d&&d.value;d||(i=function(){var e,t;for(m&&(e=b.domain)&&e.exit();o;){t=o.fn,o=o.next;try{t()}catch(e){throw o?r():a=void 0,e}}a=void 0,e&&e.enter()},r=p||m||v||!g||!y?n&&n.resolve?((c=n.resolve(void 0)).constructor=n,u=c.then,function(){u.call(c,i)}):m?function(){b.nextTick(i)}:function(){f.call(h,i)}:(s=!0,l=y.createTextNode(""),new g(i).observe(l,{characterData:!0}),function(){l.data=s=!s})),e.exports=d||function(e){e={fn:e,next:void 0};a&&(a.next=e),o||(o=e,r()),a=e}},function(e,t,n){n=n(42);e.exports=/web0s(?!.*chrome)/i.test(n)},function(e,t,n){var i=n(5);e.exports=function(e,t){var n=i.console;n&&n.error&&(1===arguments.length?n.error(e):n.error(e,t))}},function(e,t,n){var i=n(5),n=n(64),i=i.WeakMap;e.exports="function"==typeof i&&/native code/.test(n(i))},function(e,t){e.exports="object"==typeof window},function(e,t,n){"use strict";var i=n(14),o=n(21),a=n(63),r=n(9),s=n(18),l=n(65),c=n(68),n=n(28);i({target:"Promise",proto:!0,real:!0,forced:!!a&&r(function(){a.prototype.finally.call({then:function(){}},function(){})})},{finally:function(t){var n=l(this,s("Promise")),e="function"==typeof t;return this.then(e?function(e){return c(n,t()).then(function(){return e})}:t,e?function(e){return c(n,t()).then(function(){throw e})}:t)}}),o||"function"!=typeof a||(o=s("Promise").prototype.finally,a.prototype.finally!==o&&n(a.prototype,"finally",o,{unsafe:!0}))},function(e,t,n){"use strict";var i=n(110).charAt,o=n(47),n=n(71),a="String Iterator",r=o.set,s=o.getterFor(a);n(String,"String",function(e){r(this,{type:a,string:String(e),index:0})},function(){var e=s(this),t=e.string,n=e.index;return n>=t.length?{value:void 0,done:!0}:(n=i(t,n),e.index+=n.length,{value:n,done:!1})})},function(e,t,n){var r=n(40),s=n(32),n=function(a){return function(e,t){var n,i=String(s(e)),o=r(t),e=i.length;return o<0||e<=o?a?"":void 0:(t=i.charCodeAt(o))<55296||56319=t.length?{value:e.target=void 0,done:!0}:"keys"==n?{value:i,done:!1}:"values"==n?{value:t[i],done:!1}:{value:[i,t[i]],done:!1}},"values"),a.Arguments=a.Array,o("keys"),o("values"),o("entries")},function(e,t){e.exports=function(){}},function(e,t){e.exports={CSSRuleList:0,CSSStyleDeclaration:0,CSSValueList:0,ClientRectList:0,DOMRectList:0,DOMStringList:0,DOMTokenList:1,DataTransferItemList:0,FileList:0,HTMLAllCollection:0,HTMLCollection:0,HTMLFormElement:0,HTMLSelectElement:0,MediaList:0,MimeTypeArray:0,NamedNodeMap:0,NodeList:1,PaintRequestList:0,Plugin:0,PluginArray:0,SVGLengthList:0,SVGNumberList:0,SVGPathSegList:0,SVGPointList:0,SVGStringList:0,SVGTransformList:0,SourceBufferList:0,StyleSheetList:0,TextTrackCueList:0,TextTrackList:0,TouchList:0}},function(e,t,n){n(49)},function(e,t,n){n(69)},function(e,t,n){"use strict";var i=n(14),o=n(22),a=n(29);i({target:"Promise",stat:!0},{try:function(e){var t=o.f(this),e=a(e);return(e.error?t.reject:t.resolve)(e.value),t.promise}})},function(e,t,n){n(70)},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e};function o(e,t){for(var n=0;n\n \n \n \n ',this._editorContainerElement=this._editorElement.querySelector(".tui-image-editor-canvas-container"),this._editorContainerElement.appendChild(t)}},{key:"_getLoadImage",value:function(){return this.options.loadImage}},{key:"changeMenu",value:function(e){var t=!(1this._editorElementWrap.scrollHeight-150?(i-this._editorElementWrap.scrollHeight)/2:-75:"top"===e?a=i>this._editorElementWrap.offsetHeight-150?75-(i-(this._editorElementWrap.offsetHeight-150))/2:75:"left"===e?t=n>this._editorElementWrap.offsetWidth-248?124-(n-(this._editorElementWrap.offsetWidth-248))/2:124:"right"===e&&(t=n>this._editorElementWrap.scrollWidth-248?(n-this._editorElementWrap.scrollWidth)/2:-124)),o.top=a+"px",o.left=t+"px"}}]),P);function P(e,t,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,P),this.options=this._initializeOption(t),this._actions=n,this.submenu=!1,this.imageSize={},this.uiSize={},this._locale=new E.default(this.options.locale),this.theme=new u.default(this.options.theme),this.eventHandler={},this._submenuChangeTransection=!1,this._selectedElement=null,this._mainElement=null,this._editorElementWrap=null,this._editorElement=null,this._menuBarElement=null,this._subMenuElement=null,this._makeUiElement(e),this._setUiSize(),this._initMenuEvent=!1,this._makeSubMenu(),this._attachHistoryEvent(),this._attachZoomEvent()}_.mixin(i),t.default=i},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){var t=e.locale,n=e.biImage,i=e.commonStyle,o=e.headerStyle,a=e.loadButtonStyle,r=e.downloadButtonStyle,e=e.submenuStyle;return'\n
              \n
              \n \n
              \n
              \n '+t.localize("Load")+'\n \n
              \n \n
              \n
              \n
              \n
              \n
              \n
              \n
              \n
              \n
              \n
              \n
              \n
              \n
              \n
              \n
              \n'}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var a=n(1);t.default=function(e){var t=e.locale,n=e.biImage,i=e.loadButtonStyle,o=e.downloadButtonStyle,e=e.menuBarPosition;return'\n
                \n
                \n \n
                  \n\n
                  \n
                  \n '+t.localize("Load")+'\n \n
                  \n \n
                  \n
                  \n"}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e};function o(e,t){for(var n=0;n'}).join("")}},{key:"makeMenSvgIconSet",value:function(e,t){var n=2'+this._makeSvgItem(e,t,n)+""}}]),i=h;function h(e){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,h),this.styles=this._changeToObject((0,a.extend)({},s.default,e)),(0,c.styleLoad)(this._styleMaker()),this._loadDefaultSvgIcon()}t.default=i},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e){var t=e.subMenuLabelActive,n=e.subMenuLabelNormal,i=e.subMenuRangeTitle,o=e.submenuPartitionVertical,a=e.submenuPartitionHorizontal,r=e.submenuCheckbox,s=e.submenuRangePointer,l=e.submenuRangeValue,c=e.submenuColorpickerTitle,u=e.submenuColorpickerButton,h=e.submenuRangeBar,d=e.submenuRangeSubbar,f=e.submenuDisabledRangePointer,p=e.submenuDisabledRangeBar,v=e.submenuDisabledRangeSubbar,m=e.submenuIconSize,g=e.menuIconSize,y=e.biSize,b=e.menuIconStyle,e=e.submenuIconStyle;return'\n .tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype="icon-bubble"] label,\n .tie-icon-add-button.icon-heart .tui-image-editor-button[data-icontype="icon-heart"] label,\n .tie-icon-add-button.icon-location .tui-image-editor-button[data-icontype="icon-location"] label,\n .tie-icon-add-button.icon-polygon .tui-image-editor-button[data-icontype="icon-polygon"] label,\n .tie-icon-add-button.icon-star .tui-image-editor-button[data-icontype="icon-star"] label,\n .tie-icon-add-button.icon-star-2 .tui-image-editor-button[data-icontype="icon-star-2"] label,\n .tie-icon-add-button.icon-arrow-3 .tui-image-editor-button[data-icontype="icon-arrow-3"] label,\n .tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype="icon-arrow-2"] label,\n .tie-icon-add-button.icon-arrow .tui-image-editor-button[data-icontype="icon-arrow"] label,\n .tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype="icon-bubble"] label,\n .tie-draw-line-select-button.line .tui-image-editor-button.line label,\n .tie-draw-line-select-button.free .tui-image-editor-button.free label,\n .tie-flip-button.flipX .tui-image-editor-button.flipX label,\n .tie-flip-button.flipY .tui-image-editor-button.flipY label,\n .tie-flip-button.resetFlip .tui-image-editor-button.resetFlip label,\n .tie-crop-button .tui-image-editor-button.apply.active label,\n .tie-crop-preset-button .tui-image-editor-button.preset.active label,\n .tie-resize-button .tui-image-editor-button.apply.active label,\n .tie-resize-preset-button .tui-image-editor-button.preset.active label,\n .tie-shape-button.rect .tui-image-editor-button.rect label,\n .tie-shape-button.circle .tui-image-editor-button.circle label,\n .tie-shape-button.triangle .tui-image-editor-button.triangle label,\n .tie-text-effect-button .tui-image-editor-button.active label,\n .tie-text-align-button.tie-text-align-left .tui-image-editor-button.left label,\n .tie-text-align-button.tie-text-align-center .tui-image-editor-button.center label,\n .tie-text-align-button.tie-text-align-right .tui-image-editor-button.right label,\n .tie-mask-apply.apply.active .tui-image-editor-button.apply label,\n .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover > label,\n .tui-image-editor-container .tui-image-editor-checkbox label > span {\n '+t+"\n }\n .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button > label,\n .tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label,\n .tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label > span {\n "+n+"\n }\n .tui-image-editor-container .tui-image-editor-range-wrap label > span {\n "+i+"\n }\n .tui-image-editor-container .tui-image-editor-partition > div {\n "+o+"\n }\n .tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition > div,\n .tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition > div {\n "+a+"\n }\n .tui-image-editor-container .tui-image-editor-checkbox label > span:before {\n "+r+"\n }\n .tui-image-editor-container .tui-image-editor-checkbox label > input:checked + span:before {\n border: 0;\n }\n .tui-image-editor-container .tui-image-editor-virtual-range-pointer {\n "+s+"\n }\n .tui-image-editor-container .tui-image-editor-virtual-range-bar {\n "+h+"\n }\n .tui-image-editor-container .tui-image-editor-virtual-range-subbar {\n "+d+"\n }\n .tui-image-editor-container .tui-image-editor-disabled .tui-image-editor-virtual-range-pointer {\n "+f+"\n }\n .tui-image-editor-container .tui-image-editor-disabled .tui-image-editor-virtual-range-subbar {\n "+v+"\n }\n .tui-image-editor-container .tui-image-editor-disabled .tui-image-editor-virtual-range-bar {\n "+p+"\n }\n .tui-image-editor-container .tui-image-editor-range-value {\n "+l+"\n }\n .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button .color-picker-value + label {\n "+c+"\n }\n .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button .color-picker-value {\n "+u+"\n }\n .tui-image-editor-container .svg_ic-menu {\n "+g+"\n }\n .tui-image-editor-container .svg_ic-submenu {\n "+m+"\n }\n .tui-image-editor-container .tui-image-editor-controls-logo > img,\n .tui-image-editor-container .tui-image-editor-header-logo > img {\n "+y+"\n }\n .tui-image-editor-menu use.normal.use-default,\n .tui-image-editor-help-menu use.normal.use-default {\n fill-rule: evenodd;\n fill: "+b.normal.color+";\n stroke: "+b.normal.color+";\n }\n .tui-image-editor-menu use.active.use-default,\n .tui-image-editor-help-menu use.active.use-default {\n fill-rule: evenodd;\n fill: "+b.active.color+";\n stroke: "+b.active.color+";\n }\n .tui-image-editor-menu use.hover.use-default,\n .tui-image-editor-help-menu use.hover.use-default {\n fill-rule: evenodd;\n fill: "+b.hover.color+";\n stroke: "+b.hover.color+";\n }\n .tui-image-editor-menu use.disabled.use-default,\n .tui-image-editor-help-menu use.disabled.use-default {\n fill-rule: evenodd;\n fill: "+b.disabled.color+";\n stroke: "+b.disabled.color+";\n }\n .tui-image-editor-submenu use.normal.use-default {\n fill-rule: evenodd;\n fill: "+e.normal.color+";\n stroke: "+e.normal.color+";\n }\n .tui-image-editor-submenu use.active.use-default {\n fill-rule: evenodd;\n fill: "+e.active.color+";\n stroke: "+e.active.color+";\n }\n"}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={"common.bi.image":"https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png","common.bisize.width":"251px","common.bisize.height":"21px","common.backgroundImage":"none","common.backgroundColor":"#1e1e1e","common.border":"0px","header.backgroundImage":"none","header.backgroundColor":"transparent","header.border":"0px","loadButton.backgroundColor":"#fff","loadButton.border":"1px solid #ddd","loadButton.color":"#222","loadButton.fontFamily":"'Noto Sans', sans-serif","loadButton.fontSize":"12px","downloadButton.backgroundColor":"#fdba3b","downloadButton.border":"1px solid #fdba3b","downloadButton.color":"#fff","downloadButton.fontFamily":"'Noto Sans', sans-serif","downloadButton.fontSize":"12px","menu.normalIcon.color":"#8a8a8a","menu.activeIcon.color":"#555555","menu.disabledIcon.color":"#434343","menu.hoverIcon.color":"#e9e9e9","submenu.normalIcon.color":"#8a8a8a","submenu.activeIcon.color":"#e9e9e9","menu.iconSize.width":"24px","menu.iconSize.height":"24px","submenu.iconSize.width":"32px","submenu.iconSize.height":"32px","submenu.backgroundColor":"#1e1e1e","submenu.partition.color":"#3c3c3c","submenu.normalLabel.color":"#8a8a8a","submenu.normalLabel.fontWeight":"lighter","submenu.activeLabel.color":"#fff","submenu.activeLabel.fontWeight":"lighter","checkbox.border":"0px","checkbox.backgroundColor":"#fff","range.pointer.color":"#fff","range.bar.color":"#666","range.subbar.color":"#d1d1d1","range.disabledPointer.color":"#414141","range.disabledBar.color":"#282828","range.disabledSubbar.color":"#414141","range.value.color":"#fff","range.value.fontWeight":"lighter","range.value.fontSize":"11px","range.value.border":"1px solid #353535","range.value.backgroundColor":"#151515","range.title.color":"#fff","range.title.fontWeight":"lighter","colorpicker.button.border":"1px solid #1e1e1e","colorpicker.title.color":"#fff"}},function(e,t){e.exports=''},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e};function o(e,t){for(var n=0;n\n
                • \n
                  \n
                  \n '+e(["normal","active"],"shape-rectangle",!0)+"\n
                  \n \n
                  \n
                  \n
                  \n '+e(["normal","active"],"shape-circle",!0)+"\n
                  \n \n
                  \n
                  \n
                  \n '+e(["normal","active"],"shape-triangle",!0)+"\n
                  \n \n
                  \n
                  • \n
                • \n
                  \n
                  • \n
                • \n
                  \n
                  \n
                  • \n
                • \n
                  \n
                  • \n
                • \n \n
                  \n \n
                  • \n \n'}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e};function o(e,t){for(var n=0;n\n
                • \n
                  \n
                  \n '+e(["normal","active"],"shape-rectangle",!0)+"\n
                  \n \n
                  \n
                  \n
                  \n '+e(["normal","active"],"crop",!0)+"\n
                  \n \n
                  \n
                  \n
                  \n '+e(["normal","active"],"crop",!0)+"\n
                  \n \n
                  \n
                  \n
                  \n '+e(["normal","active"],"crop",!0)+"\n
                  \n \n
                  \n
                  \n
                  \n '+e(["normal","active"],"crop",!0)+"\n
                  \n \n
                  \n
                  \n
                  \n '+e(["normal","active"],"crop",!0)+"\n
                  \n \n
                  \n
                  \n
                  \n '+e(["normal","active"],"crop",!0)+"\n
                  \n \n
                  \n
                  • \n
                • \n
                  • \n
                • \n
                  \n
                  • \n
                • \n
                  \n '+e(["normal","active"],"apply")+"\n \n
                  \n
                  \n '+e(["normal","active"],"cancel")+"\n \n
                  \n
                  • \n \n"}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e};function o(e,t){for(var n=0;n\n
                • \n
                  \n \n
                  \n \n
                  \n \n
                  \n \n
                  \n
                  • \n
                • \n
                • \n
                  \n
                  • \n
                • \n
                  \n
                  \n \n
                  \n
                  \n
                  • \n
                • \n
                • \n
                  \n
                  • \n
                • \n
                • \n
                  \n '+e(["normal","active"],"apply")+"\n \n
                  \n
                  \n '+e(["normal","active"],"cancel")+"\n \n
                  \n
                  • \n \n"}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e};function o(e,t){for(var n=0;n\n
                • \n
                  \n
                  \n '+e(["normal","active"],"flip-x",!0)+"\n
                  \n \n
                  \n
                  \n
                  \n '+e(["normal","active"],"flip-y",!0)+"\n
                  \n \n
                  \n
                  • \n
                • \n
                  \n
                  • \n
                • \n
                  \n
                  \n '+e(["normal","active"],"flip-reset",!0)+"\n
                  \n \n
                  \n
                  • \n \n"}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e};function o(e,t){for(var n=0;n\n
                • \n
                  \n
                  \n '+e(["normal","active"],"rotate-clockwise",!0)+'\n
                  \n \n
                  \n
                  \n
                  \n '+e(["normal","active"],"rotate-counterclockwise",!0)+'\n
                  \n \n
                  \n
                  • \n
                • \n
                  \n
                  • \n
                • \n \n
                  \n \n
                  • \n \n'}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e};function o(e,t){for(var n=0;n\n
                • \n
                  \n
                  \n '+e(["normal","active"],"text-bold",!0)+"\n
                  \n \n
                  \n
                  \n
                  \n '+e(["normal","active"],"text-italic",!0)+"\n
                  \n \n
                  \n
                  \n
                  \n '+e(["normal","active"],"text-underline",!0)+"\n
                  \n \n
                  \n
                  • \n
                • \n
                  \n
                  • \n
                • \n
                  \n
                  \n '+e(["normal","active"],"text-align-left",!0)+"\n
                  \n \n
                  \n
                  \n
                  \n '+e(["normal","active"],"text-align-center",!0)+"\n
                  \n \n
                  \n
                  \n
                  \n '+e(["normal","active"],"text-align-right",!0)+"\n
                  \n \n
                  \n
                  • \n
                • \n
                  \n
                  • \n
                • \n
                  \n
                  • \n
                • \n
                  \n
                  • \n
                • \n \n
                  \n \n
                  • \n \n'}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e};function o(e,t){for(var n=0;n\n
                • \n
                  \n
                  \n \n '+e(["normal","active"],"mask-load",!0)+"\n
                  \n \n
                  \n
                  • \n
                • \n
                  \n
                  • \n
                • \n
                  \n '+e(["normal","active"],"apply")+"\n \n
                  \n
                  • \n \n"}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e};function o(e,t){for(var n=0;n\n
                • \n
                  \n
                  \n '+e(["normal","active"],"icon-arrow",!0)+"\n
                  \n \n
                  \n
                  \n
                  \n '+e(["normal","active"],"icon-arrow-2",!0)+"\n
                  \n \n
                  \n
                  \n
                  \n '+e(["normal","active"],"icon-arrow-3",!0)+"\n
                  \n \n
                  \n
                  \n
                  \n '+e(["normal","active"],"icon-star",!0)+"\n
                  \n \n
                  \n
                  \n
                  \n '+e(["normal","active"],"icon-star-2",!0)+"\n
                  \n \n
                  \n\n
                  \n
                  \n '+e(["normal","active"],"icon-polygon",!0)+"\n
                  \n \n
                  \n\n
                  \n
                  \n '+e(["normal","active"],"icon-location",!0)+"\n
                  \n \n
                  \n\n
                  \n
                  \n '+e(["normal","active"],"icon-heart",!0)+"\n
                  \n \n
                  \n\n
                  \n
                  \n '+e(["normal","active"],"icon-bubble",!0)+"\n
                  \n \n
                  \n
                  • \n
                • \n
                  \n
                  • \n
                • \n
                  \n
                  \n \n '+e(["normal","active"],"icon-load",!0)+"\n
                  \n \n
                  \n
                  • \n
                • \n
                  \n
                  • \n
                • \n
                  \n
                  • \n \n'}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e};function o(e,t){for(var n=0;n\n
                • \n
                  \n
                  \n '+e(["normal","active"],"draw-free",!0)+"\n
                  \n \n
                  \n
                  \n
                  \n '+e(["normal","active"],"draw-line",!0)+"\n
                  \n \n
                  \n
                  • \n
                • \n
                  \n
                  • \n
                • \n
                  \n
                  • \n
                • \n
                  \n
                  • \n
                • \n \n
                  \n \n
                  • \n \n'}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e};function o(e,t){for(var n=0;n\n
                • \n
                  \n
                  \n \n
                  \n
                  \n \n
                  \n
                  \n \n
                  \n
                  \n \n
                  \n
                  \n \n
                  \n
                  \n \n
                  \n
                  \n \n
                  \n
                  \n
                  • \n
                • \n
                  \n
                  • \n
                • \n
                  \n
                  \n
                  \n \n
                  \n
                  \n
                  \n \n
                  \n
                  \n
                  \n
                  \n
                  \n \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  • \n
                • \n
                  \n
                  • \n
                • \n
                  \n
                  \n \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n
                  \n \n
                  \n
                  \n
                  \n \n
                  \n
                  \n
                  \n
                  • \n
                • \n
                  \n
                  • \n
                • \n
                  \n
                  \n
                  \n \n
                  \n
                  \n
                  \n
                  \n
                  \n \n
                  \n
                  \n
                  \n
                  \n
                  \n \n
                  \n
                  \n
                  • \n \n'}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e};function o(e,t){for(var n=0;nthis._historyIndex}},{key:"_addHistoryEventListener",value:function(){var t=this;this._eventHandler.history=function(e){return t._clickHistoryItem(e)},this.listElement.addEventListener("click",this._eventHandler.history)}},{key:"_removeHistoryEventListener",value:function(){this.listElement.removeEventListener("click",this._eventHandler.history)}},{key:"_clickHistoryItem",value:function(e){var t=e.target.closest(".history-item");!t||(e=Number.parseInt(t.getAttribute("data-index"),10))!==this._historyIndex&&(t=Math.abs(e-this._historyIndex),e\n
                  \n '+n(["normal","active"],"history-"+i.toLowerCase(),!0)+"\n
                  \n \n "+t.localize(i)+"\n "+(e?"("+t.localize(e)+")":"")+'\n \n
                  \n '+n(["normal"],"history-check",!0)+"\n
                  \n \n"}},function(e,t,n){"use strict";function i(e,t){for(var n=0;n"},history:function(e){o.ui.toggleHistoryMenu(e)},zoomIn:function(){var e;o.ui.toggleZoomButtonStatus("zoomIn"),o.deactivateAll(),e=o._graphics.getZoomMode(),o.stopDrawingMode(),e!==l.zoomModes.ZOOM?(o.startDrawingMode(l.drawingModes.ZOOM),o._graphics.startZoomInMode()):o._graphics.endZoomInMode()},zoomOut:function(){o._graphics.zoomOut()},hand:function(){var e;o.ui.offZoomInButtonStatus(),o.ui.toggleZoomButtonStatus("hand"),o.deactivateAll(),e=o._graphics.getZoomMode(),o.stopDrawingMode(),e!==l.zoomModes.HAND?(o.startDrawingMode(l.drawingModes.ZOOM),o._graphics.startHandMode()):o._graphics.endHandMode()}},this._commonAction())},_iconAction:function(){var i=this;return(0,a.extend)({changeColor:function(e){i.activeObjectId&&i.changeIconColor(i.activeObjectId,e)},addIcon:function(e,t){i.startDrawingMode("ICON"),i.setDrawingIcon(e,t)},cancelAddIcon:function(){i.ui.icon.clearIconType(),i.changeSelectableAll(!0),i.changeCursor("default"),i.stopDrawingMode()},registerDefaultIcons:function(e,t){var n={};n[e]=t,i.registerIcons(n)},registerCustomIcon:function(e,n){(new r.default).imageToSVG(e,function(e){var t=e.match(/path[^>]*d="([^"]*)"/)[1],e={};e[n.name]=t,i.registerIcons(e),i.addIcon(n.name,{left:100,top:100})},r.default.tracerDefaultOption())}},this._commonAction())},_drawAction:function(){var n=this;return(0,a.extend)({setDrawMode:function(e,t){n.stopDrawingMode(),"free"===e?n.startDrawingMode("FREE_DRAWING",t):n.startDrawingMode("LINE_DRAWING",t)},setColor:function(e){n.setBrush({color:e})}},this._commonAction())},_maskAction:function(){var n=this;return(0,a.extend)({loadImageFromURL:function(e,t){return n.loadImageFromURL(n.toDataURL(),"FilterImage").then(function(){n.addImageObject(e).then(function(){URL.revokeObjectURL(t)}),n._invoker.fire(l.eventNames.EXECUTE_COMMAND,l.historyNames.LOAD_MASK_IMAGE)})},applyFilter:function(){n.applyFilter("mask",{maskObjId:n.activeObjectId})}},this._commonAction())},_textAction:function(){var n=this;return(0,a.extend)({changeTextStyle:function(e,t){n.activeObjectId&&n.changeTextStyle(n.activeObjectId,e,t)}},this._commonAction())},_rotateAction:function(){var n=this;return(0,a.extend)({rotate:function(e,t){n.rotate(e,t),n.ui.resizeEditor(),n.ui.rotate.setRangeBarAngle("rotate",e)},setAngle:function(e,t){n.setAngle(e,t),n.ui.resizeEditor(),n.ui.rotate.setRangeBarAngle("setAngle",e)}},this._commonAction())},_shapeAction:function(){var n=this;return(0,a.extend)({changeShape:function(e,t){n.activeObjectId&&n.changeShape(n.activeObjectId,e,t)},setDrawingShape:function(e){n.setDrawingShape(e)}},this._commonAction())},_cropAction:function(){var t=this;return(0,a.extend)({crop:function(){var e=t.getCropzoneRect();e&&!(0,s.isEmptyCropzone)(e)&&t.crop(e).then(function(){t.stopDrawingMode(),t.ui.resizeEditor(),t.ui.changeMenu("crop"),t._invoker.fire(l.eventNames.EXECUTE_COMMAND,l.historyNames.CROP)}).catch(function(e){return Promise.reject(e)})},cancel:function(){t.stopDrawingMode(),t.ui.changeMenu("crop")},preset:function(e){switch(e){case"preset-square":t.setCropzoneRect(1);break;case"preset-3-2":t.setCropzoneRect(1.5);break;case"preset-4-3":t.setCropzoneRect(4/3);break;case"preset-5-4":t.setCropzoneRect(5/4);break;case"preset-7-5":t.setCropzoneRect(1.4);break;case"preset-16-9":t.setCropzoneRect(16/9);break;default:t.setCropzoneRect(),t.ui.crop.changeApplyButtonStatus(!1)}}},this._commonAction())},_resizeAction:function(){var s=this;return(0,a.extend)({getCurrentDimensions:function(){return s._graphics.getCurrentDimensions()},preview:function(e,t,n){function i(){return o.width/o.height}var o=s._graphics.getCurrentDimensions(),a={};switch(e){case"width":a.width=t,a.height=n?t/i():o.height;break;case"height":a.height=t,a.width=n?t*i():o.width;break;default:a=o}s._graphics.resize(a).then(function(){s.ui.resizeEditor()}),n&&(s.ui.resize.setWidthValue(a.width),s.ui.resize.setHeightValue(a.height))},lockAspectRatio:function(e,t,n){var i,o=s._graphics.getCurrentDimensions(),a=o.width,r=o.height,o=a/r;e?ro[a].boundingbox[2]&&(o[a].boundingbox[2]=s-1),l-1o[a].boundingbox[3]&&(o[a].boundingbox[3]=l-1),i=this.pathscan_combined_lookup[e[l][s]][h],e[l][s]=i[0],h=i[1],s+=i[2],l+=i[3],s-1===o[a].points[0].x&&l-1===o[a].points[0].y)if(d=!0,o[a].points.lengtht[2]&&e[3]>t[3]}},{key:"batchpathscan",value:function(e,t){var n,i=[];for(n in e)e.hasOwnProperty(n)&&(i[n]=this.pathscan(e[n],t));return i}},{key:"internodes",value:function(e,t){for(var n,i,o,a=[],r=void 0,s=void 0,r=0;re.points.length||o<0)return[];var a=i,r=0,s=!0,l=void 0,c=void 0,u=void 0,h=o-i;h<0&&(h+=e.points.length);for(var d=(e.points[o].x-e.points[i].x)/h,f=(e.points[o].y-e.points[i].y)/h,p=(i+1)%e.points.length,v=void 0;p!=o;)(v=p-i)<0&&(v+=e.points.length),l=e.points[i].x+d*v,c=e.points[i].y+f*v,t<(u=(e.points[p].x-l)*(e.points[p].x-l)+(e.points[p].y-c)*(e.points[p].y-c))&&(s=!1),r',r+='',r+='',r+=''),!a.segments[s].hasOwnProperty("x3")&&i.lcpr&&(r+='');for(l=0;l',r+='',r+='',r+=''),!c.segments[s].hasOwnProperty("x3")&&i.lcpr&&(r+='')}return r}},{key:"getsvgstring",value:function(e,t){t=this.checkoptions(t);for(var n=e.width*t.scale,i=e.height*t.scale,o="',a=0;an},_getColor:function(e,t,n){var i=[0,0,0,0],o=e.data,t=4*(e.width*n+t);return i[0]=o[t],i[1]=o[1+t],i[2]=o[2+t],i[3]=o[3+t],i}});t.default=n},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=function(e,t,n){return t&&o(e.prototype,t),n&&o(e,n),e};function o(e,t){for(var n=0;n0,S.isLikelyNode="undefined"!=typeof Buffer&&"undefined"==typeof window,S.SHARED_ATTRIBUTES=["display","transform","fill","fill-opacity","fill-rule","opacity","stroke","stroke-dasharray","stroke-linecap","stroke-dashoffset","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke-width","id","paint-order","vector-effect","instantiated_by_use","clip-path"],S.DPI=96,S.reNum="(?:[-+]?(?:\\d+|\\d*\\.\\d+)(?:[eE][-+]?\\d+)?)",S.commaWsp="(?:\\s+,?\\s*|,\\s*)",S.rePathCommand=/([-+]?((\d+\.\d+)|((\d+)|(\.\d+)))(?:[eE][-+]?\d+)?)/gi,S.reNonWord=/[ \n\.,;!\?\-]/,S.fontPaths={},S.iMatrix=[1,0,0,1,0,0],S.svgNS="http://www.w3.org/2000/svg",S.perfLimitSizeTotal=2097152,S.maxCacheSideLimit=4096,S.minCacheSideLimit=256,S.charWidthsCache={},S.textureSize=2048,S.disableStyleCopyPaste=!1,S.enableGLFiltering=!0,S.devicePixelRatio=S.window.devicePixelRatio||S.window.webkitDevicePixelRatio||S.window.mozDevicePixelRatio||1,S.browserShadowBlurConstant=1,S.arcToSegmentsCache={},S.boundsOfCurveCache={},S.cachesBoundsOfCurve=!0,S.forceGLPutImageData=!1,S.initFilterBackend=function(){return S.enableGLFiltering&&S.isWebglSupported&&S.isWebglSupported(S.textureSize)?(console.log("max texture size: "+S.maxTextureSize),new S.WebglFilterBackend({tileSize:S.textureSize})):S.Canvas2dFilterBackend?new S.Canvas2dFilterBackend:void 0},"undefined"!=typeof document&&"undefined"!=typeof window&&(window.fabric=S),function(){function t(t,e){if(this.__eventListeners[t]){var i=this.__eventListeners[t];e?i[i.indexOf(e)]=!1:S.util.array.fill(i,!1)}}function e(t,e){var i=function(){e.apply(this,arguments),this.off(t,i)}.bind(this);this.on(t,i)}S.Observable={fire:function(t,e){if(!this.__eventListeners)return this;var i=this.__eventListeners[t];if(!i)return this;for(var n=0,r=i.length;n-1||!!e&&this._objects.some((function(e){return"function"==typeof e.contains&&e.contains(t,!0)}))},complexity:function(){return this._objects.reduce((function(t,e){return t+=e.complexity?e.complexity():0}),0)}},S.CommonMethods={_setOptions:function(t){for(var e in t)this.set(e,t[e])},_initGradient:function(t,e){!t||!t.colorStops||t instanceof S.Gradient||this.set(e,new S.Gradient(t))},_initPattern:function(t,e,i){!t||!t.source||t instanceof S.Pattern?i&&i():this.set(e,new S.Pattern(t,i))},_setObject:function(t){for(var e in t)this._set(e,t[e])},set:function(t,e){return"object"==typeof t?this._setObject(t):this._set(t,e),this},_set:function(t,e){this[t]=e},toggle:function(t){var e=this.get(t);return"boolean"==typeof e&&this.set(t,!e),this},get:function(t){return this[t]}},n=e,r=Math.sqrt,o=Math.atan2,a=Math.pow,s=Math.PI/180,l=Math.PI/2,S.util={cos:function(t){if(0===t)return 1;switch(t<0&&(t=-t),t/l){case 1:case 3:return 0;case 2:return-1}return Math.cos(t)},sin:function(t){if(0===t)return 0;var e=1;switch(t<0&&(e=-1),t/l){case 1:return e;case 2:return 0;case 3:return-e}return Math.sin(t)},removeFromArray:function(t,e){var i=t.indexOf(e);return-1!==i&&t.splice(i,1),t},getRandomInt:function(t,e){return Math.floor(Math.random()*(e-t+1))+t},degreesToRadians:function(t){return t*s},radiansToDegrees:function(t){return t/s},rotatePoint:function(t,e,i){var n=new S.Point(t.x-e.x,t.y-e.y),r=S.util.rotateVector(n,i);return new S.Point(r.x,r.y).addEquals(e)},rotateVector:function(t,e){var i=S.util.sin(e),n=S.util.cos(e);return{x:t.x*n-t.y*i,y:t.x*i+t.y*n}},transformPoint:function(t,e,i){return i?new S.Point(e[0]*t.x+e[2]*t.y,e[1]*t.x+e[3]*t.y):new S.Point(e[0]*t.x+e[2]*t.y+e[4],e[1]*t.x+e[3]*t.y+e[5])},makeBoundingBoxFromPoints:function(t,e){if(e)for(var i=0;ie;)(e+=s[g++%f])>u&&(e=u),t[d?"lineTo":"moveTo"](e,0),d=!d;t.restore()},createCanvasElement:function(){return S.document.createElement("canvas")},copyCanvasElement:function(t){var e=S.util.createCanvasElement();return e.width=t.width,e.height=t.height,e.getContext("2d").drawImage(t,0,0),e},toDataURL:function(t,e,i){return t.toDataURL("image/"+e,i)},createImage:function(){return S.document.createElement("img")},multiplyTransformMatrices:function(t,e,i){return[t[0]*e[0]+t[2]*e[1],t[1]*e[0]+t[3]*e[1],t[0]*e[2]+t[2]*e[3],t[1]*e[2]+t[3]*e[3],i?0:t[0]*e[4]+t[2]*e[5]+t[4],i?0:t[1]*e[4]+t[3]*e[5]+t[5]]},qrDecompose:function(t){var e=o(t[1],t[0]),i=a(t[0],2)+a(t[1],2),n=r(i),l=(t[0]*t[3]-t[2]*t[1])/n,c=o(t[0]*t[2]+t[1]*t[3],i);return{angle:e/s,scaleX:n,scaleY:l,skewX:c/s,skewY:0,translateX:t[4],translateY:t[5]}},calcRotateMatrix:function(t){if(!t.angle)return S.iMatrix.concat();var e=S.util.degreesToRadians(t.angle),i=S.util.cos(e),n=S.util.sin(e);return[i,n,-n,i,0,0]},calcDimensionsMatrix:function(t){var e=void 0===t.scaleX?1:t.scaleX,i=void 0===t.scaleY?1:t.scaleY,n=[t.flipX?-e:e,0,0,t.flipY?-i:i,0,0],r=S.util.multiplyTransformMatrices,o=S.util.degreesToRadians;return t.skewX&&(n=r(n,[1,0,Math.tan(o(t.skewX)),1],!0)),t.skewY&&(n=r(n,[1,Math.tan(o(t.skewY)),0,1],!0)),n},composeMatrix:function(t){var e=[1,0,0,1,t.translateX||0,t.translateY||0],i=S.util.multiplyTransformMatrices;return t.angle&&(e=i(e,S.util.calcRotateMatrix(t))),(1!==t.scaleX||1!==t.scaleY||t.skewX||t.skewY||t.flipX||t.flipY)&&(e=i(e,S.util.calcDimensionsMatrix(t))),e},resetObjectTransform:function(t){t.scaleX=1,t.scaleY=1,t.skewX=0,t.skewY=0,t.flipX=!1,t.flipY=!1,t.rotate(0)},saveObjectTransform:function(t){return{scaleX:t.scaleX,scaleY:t.scaleY,skewX:t.skewX,skewY:t.skewY,angle:t.angle,left:t.left,flipX:t.flipX,flipY:t.flipY,top:t.top}},isTransparent:function(t,e,i,n){n>0&&(e>n?e-=n:e=0,i>n?i-=n:i=0);var r,o=!0,a=t.getImageData(e,i,2*n||1,2*n||1),s=a.data.length;for(r=3;r0?A-=2*c:1===s&&A<0&&(A+=2*c);for(var j=Math.ceil(Math.abs(A/c*2)),O=[],E=A/j,L=8/3*Math.sin(E/4)*Math.sin(E/4)/Math.sin(E/2),N=D+E,P=0;P=r?o-r:2*Math.PI-(r-o)}function a(e,i,n,r,o,a,s,l){var c;if(S.cachesBoundsOfCurve&&(c=t.call(arguments),S.boundsOfCurveCache[c]))return S.boundsOfCurveCache[c];var u,h,f,g,d,v,p,m,y=Math.sqrt,b=Math.min,x=Math.max,C=Math.abs,I=[],_=[[],[]];h=6*e-12*n+6*o,u=-3*e+9*n-9*o+3*s,f=3*n-3*e;for(var M=0;M<2;++M)if(M>0&&(h=6*i-12*r+6*a,u=-3*i+9*r-9*a+3*l,f=3*r-3*i),C(u)<1e-12){if(C(h)<1e-12)continue;0<(g=-f/h)&&g<1&&I.push(g)}else(p=h*h-4*f*u)<0||(0<(d=(-h+(m=y(p)))/(2*u))&&d<1&&I.push(d),0<(v=(-h-m)/(2*u))&&v<1&&I.push(v));for(var w,k,T,D=I.length,A=D;D--;)w=(T=1-(g=I[D]))*T*T*e+3*T*T*g*n+3*T*g*g*o+g*g*g*s,_[0][D]=w,k=T*T*T*i+3*T*T*g*r+3*T*g*g*a+g*g*g*l,_[1][D]=k;_[0][A]=e,_[1][A]=i,_[0][A+1]=s,_[1][A+1]=l;var j=[{x:b.apply(null,_[0]),y:b.apply(null,_[1])},{x:x.apply(null,_[0]),y:x.apply(null,_[1])}];return S.cachesBoundsOfCurve&&(S.boundsOfCurveCache[c]=j),j}function s(t,e,i){for(var n=i[1],o=i[2],a=i[3],s=i[4],l=i[5],c=r(i[6]-t,i[7]-e,n,o,s,l,a),u=0,h=c.length;u1e-4;)i=s(o),r=o,(n=l(c.x,c.y,i.x,i.y))+a>e?o-=u/=2:(c=i,o+=u,a+=n);return i.angle=h(r),i}function v(t){for(var e,i,n,r,o=0,a=t.length,s=0,d=0,v=0,p=0,m=[],y=0;yI)for(var M=1,w=v.length;M2;for(e=e||0,c&&(s=t[2].xt[i-2].x?1:r.x===t[i-2].x?0:-1,l=r.y>t[i-2].y?1:r.y===t[i-2].y?0:-1),n.push(["L",r.x+s*e,r.y+l*e]),n},S.util.getPathSegmentsInfo=v,S.util.getBoundsOfCurve=a,S.util.getPointOnPath=function(t,e,i){i||(i=v(t));for(var n=0;e-i[n].length>0&&n=e}))}}}(),function(){function t(e,i,n){if(n)if(!S.isLikelyNode&&i instanceof Element)e=i;else if(i instanceof Array){e=[];for(var r=0,o=i.length;r57343)return t.charAt(e);if(55296<=i&&i<=56319){if(t.length<=e+1)throw"High surrogate without following low surrogate";var n=t.charCodeAt(e+1);if(56320>n||n>57343)throw"High surrogate without following low surrogate";return t.charAt(e)+t.charAt(e+1)}if(0===e)throw"Low surrogate without preceding high surrogate";var r=t.charCodeAt(e-1);if(55296>r||r>56319)throw"Low surrogate without preceding high surrogate";return!1}S.util.string={camelize:function(t){return t.replace(/-+(.)?/g,(function(t,e){return e?e.toUpperCase():""}))},capitalize:function(t,e){return t.charAt(0).toUpperCase()+(e?t.slice(1):t.slice(1).toLowerCase())},escapeXml:function(t){return t.replace(/&/g,"&").replace(/"/g,""").replace(/'/g,"'").replace(//g,">")},graphemeSplit:function(e){var i,n=0,r=[];for(n=0;n-1?t.prototype[r]=function(t){return function(){var i=this.constructor.superclass;this.constructor.superclass=n;var r=e[t].apply(this,arguments);if(this.constructor.superclass=i,"initialize"!==t)return r}}(r):t.prototype[r]=e[r],i&&(e.toString!==Object.prototype.toString&&(t.prototype.toString=e.toString),e.valueOf!==Object.prototype.valueOf&&(t.prototype.valueOf=e.valueOf))};function r(){}function o(e){for(var i=null,n=this;n.constructor.superclass;){var r=n.constructor.superclass.prototype[e];if(n[e]!==r){i=r;break}n=n.constructor.superclass.prototype}return i?arguments.length>1?i.apply(this,t.call(arguments,1)):i.call(this):console.log("tried to callSuper "+e+", method not found in prototype chain",this)}S.util.createClass=function(){var i=null,a=t.call(arguments,0);function s(){this.initialize.apply(this,arguments)}"function"==typeof a[0]&&(i=a.shift()),s.superclass=i,s.subclasses=[],i&&(r.prototype=i.prototype,s.prototype=new r,i.subclasses.push(s));for(var l=0,c=a.length;l-1||"touch"===t.pointerType},h=S.document.createElement("div"),f="string"==typeof h.style.opacity,g="string"==typeof h.style.filter,d=/alpha\s*\(\s*opacity\s*=\s*([^\)]+)\)/,v=function(t){return t},f?v=function(t,e){return t.style.opacity=e,t}:g&&(v=function(t,e){var i=t.style;return t.currentStyle&&!t.currentStyle.hasLayout&&(i.zoom=1),d.test(i.filter)?(e=e>=.9999?"":"alpha(opacity="+100*e+")",i.filter=i.filter.replace(d,e)):i.filter+=" alpha(opacity="+100*e+")",t}),S.util.setStyle=function(t,e){var i=t.style;if(!i)return t;if("string"==typeof e)return t.style.cssText+=";"+e,e.indexOf("opacity")>-1?v(t,e.match(/opacity:\s*(\d?\.?\d*)/)[1]):t;for(var n in e)"opacity"===n?v(t,e[n]):i["float"===n||"cssFloat"===n?void 0===i.styleFloat?"cssFloat":"styleFloat":n]=e[n];return t},function(){var t=Array.prototype.slice;var e,i,n,r,o=function(e){return t.call(e,0)};try{e=o(S.document.childNodes)instanceof Array}catch(t){}function a(t,e){var i=S.document.createElement(t);for(var n in e)"class"===n?i.className=e[n]:"for"===n?i.htmlFor=e[n]:i.setAttribute(n,e[n]);return i}function s(t){for(var e=0,i=0,n=S.document.documentElement,r=S.document.body||{scrollLeft:0,scrollTop:0};t&&(t.parentNode||t.host)&&((t=t.parentNode||t.host)===S.document?(e=r.scrollLeft||n.scrollLeft||0,i=r.scrollTop||n.scrollTop||0):(e+=t.scrollLeft||0,i+=t.scrollTop||0),1!==t.nodeType||"fixed"!==t.style.position););return{left:e,top:i}}e||(o=function(t){for(var e=new Array(t.length),i=t.length;i--;)e[i]=t[i];return e}),i=S.document.defaultView&&S.document.defaultView.getComputedStyle?function(t,e){var i=S.document.defaultView.getComputedStyle(t,null);return i?i[e]:void 0}:function(t,e){var i=t.style[e];return!i&&t.currentStyle&&(i=t.currentStyle[e]),i},n=S.document.documentElement.style,r="userSelect"in n?"userSelect":"MozUserSelect"in n?"MozUserSelect":"WebkitUserSelect"in n?"WebkitUserSelect":"KhtmlUserSelect"in n?"KhtmlUserSelect":"",S.util.makeElementUnselectable=function(t){return void 0!==t.onselectstart&&(t.onselectstart=S.util.falseFunction),r?t.style[r]="none":"string"==typeof t.unselectable&&(t.unselectable="on"),t},S.util.makeElementSelectable=function(t){return void 0!==t.onselectstart&&(t.onselectstart=null),r?t.style[r]="":"string"==typeof t.unselectable&&(t.unselectable=""),t},S.util.setImageSmoothing=function(t,e){t.imageSmoothingEnabled=t.imageSmoothingEnabled||t.webkitImageSmoothingEnabled||t.mozImageSmoothingEnabled||t.msImageSmoothingEnabled||t.oImageSmoothingEnabled,t.imageSmoothingEnabled=e},S.util.getById=function(t){return"string"==typeof t?S.document.getElementById(t):t},S.util.toArray=o,S.util.addClass=function(t,e){t&&-1===(" "+t.className+" ").indexOf(" "+e+" ")&&(t.className+=(t.className?" ":"")+e)},S.util.makeElement=a,S.util.wrapElement=function(t,e,i){return"string"==typeof e&&(e=a(e,i)),t.parentNode&&t.parentNode.replaceChild(e,t),e.appendChild(t),e},S.util.getScrollLeftTop=s,S.util.getElementOffset=function(t){var e,n,r=t&&t.ownerDocument,o={left:0,top:0},a={left:0,top:0},l={borderLeftWidth:"left",borderTopWidth:"top",paddingLeft:"left",paddingTop:"top"};if(!r)return a;for(var c in l)a[l[c]]+=parseInt(i(t,c),10)||0;return e=r.documentElement,void 0!==t.getBoundingClientRect&&(o=t.getBoundingClientRect()),n=s(t),{left:o.left+n.left-(e.clientLeft||0)+a.left,top:o.top+n.top-(e.clientTop||0)+a.top}},S.util.getNodeCanvas=function(t){var e=S.jsdomImplForWrapper(t);return e._canvas||e._image},S.util.cleanUpJsdomNode=function(t){if(S.isLikelyNode){var e=S.jsdomImplForWrapper(t);e&&(e._image=null,e._canvas=null,e._currentSrc=null,e._attributes=null,e._classList=null)}}}(),function(){function t(){}S.util.request=function(e,i){i||(i={});var n=i.method?i.method.toUpperCase():"GET",r=i.onComplete||function(){},o=new S.window.XMLHttpRequest,a=i.body||i.parameters;return o.onreadystatechange=function(){4===o.readyState&&(r(o),o.onreadystatechange=t)},"GET"===n&&(a=null,"string"==typeof i.parameters&&(e=function(t,e){return t+(/\?/.test(t)?"&":"?")+e}(e,i.parameters))),o.open(n,e,!0),"POST"!==n&&"PUT"!==n||o.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),o.send(a),o}}(),S.log=console.log,S.warn=console.warn,function(){function t(){return!1}function e(t,e,i,n){return-i*Math.cos(t/n*(Math.PI/2))+i+e}var i=S.window.requestAnimationFrame||S.window.webkitRequestAnimationFrame||S.window.mozRequestAnimationFrame||S.window.oRequestAnimationFrame||S.window.msRequestAnimationFrame||function(t){return S.window.setTimeout(t,1e3/60)},n=S.window.cancelAnimationFrame||S.window.clearTimeout;function r(){return i.apply(S.window,arguments)}S.util.animate=function(i){var n=!1;return r((function(o){i||(i={});var a,s=o||+new Date,l=i.duration||500,c=s+l,u=i.onChange||t,h=i.abort||t,f=i.onComplete||t,g=i.easing||e,d="startValue"in i?i.startValue:0,v="endValue"in i?i.endValue:100,p=i.byValue||v-d;i.onStart&&i.onStart(),function t(e){var i=(a=e||+new Date)>c?l:a-s,o=i/l,m=g(i,d,p,l),y=Math.abs((m-d)/p);if(!n){if(!h(m,y,o))return a>c?(u(v,1,1),void f(v,1,1)):(u(m,y,o),void r(t));f(v,1,1)}}(s)})),function(){n=!0}},S.util.requestAnimFrame=r,S.util.cancelAnimFrame=function(){return n.apply(S.window,arguments)}}(),function(){function t(t,e,i){var n="rgba("+parseInt(t[0]+i*(e[0]-t[0]),10)+","+parseInt(t[1]+i*(e[1]-t[1]),10)+","+parseInt(t[2]+i*(e[2]-t[2]),10);return n+=","+(t&&e?parseFloat(t[3]+i*(e[3]-t[3])):1),n+=")"}S.util.animateColor=function(e,i,n,r){var o=new S.Color(e).getSource(),a=new S.Color(i).getSource(),s=r.onComplete,l=r.onChange;return r=r||{},S.util.animate(S.util.object.extend(r,{duration:n||500,startValue:o,endValue:a,byValue:a,easing:function(e,i,n,o){return t(i,n,r.colorEasing?r.colorEasing(e,o):1-Math.cos(e/o*(Math.PI/2)))},onComplete:function(e,i,n){if(s)return s(t(a,a,0),i,n)},onChange:function(e,i,n){if(l){if(Array.isArray(e))return l(t(e,e,0),i,n);l(e,i,n)}}}))}}(),function(){function t(t,e,i,n){return t-1&&u>-1&&u-1)&&(i="stroke")}else{if("href"===t||"xlink:href"===t||"font"===t)return i;if("imageSmoothing"===t)return"optimizeQuality"===i;s=l?i.map(o):o(i,r)}}else i="";return!l&&isNaN(s)?i:s}function g(t){return new RegExp("^("+t.join("|")+")\\b","i")}function d(t,e){var i,n,r,o,a=[];for(r=0,o=e.length;r1;)l.shift(),c=e.util.multiplyTransformMatrices(c,l[0]);return c}}();var y=new RegExp("^\\s*("+e.reNum+"+)\\s*,?\\s*("+e.reNum+"+)\\s*,?\\s*("+e.reNum+"+)\\s*,?\\s*("+e.reNum+"+)\\s*$");function b(t){if(!e.svgViewBoxElementsRegEx.test(t.nodeName))return{};var i,n,r,a,s,l,c=t.getAttribute("viewBox"),u=1,h=1,f=t.getAttribute("width"),g=t.getAttribute("height"),d=t.getAttribute("x")||0,v=t.getAttribute("y")||0,p=t.getAttribute("preserveAspectRatio")||"",m=!c||!(c=c.match(y)),b=!f||!g||"100%"===f||"100%"===g,x=m&&b,C={},I="",_=0,M=0;if(C.width=0,C.height=0,C.toBeParsed=x,m&&(d||v)&&t.parentNode&&"#document"!==t.parentNode.nodeName&&(I=" translate("+o(d)+" "+o(v)+") ",s=(t.getAttribute("transform")||"")+I,t.setAttribute("transform",s),t.removeAttribute("x"),t.removeAttribute("y")),x)return C;if(m)return C.width=o(f),C.height=o(g),C;if(i=-parseFloat(c[1]),n=-parseFloat(c[2]),r=parseFloat(c[3]),a=parseFloat(c[4]),C.minX=i,C.minY=n,C.viewBoxWidth=r,C.viewBoxHeight=a,b?(C.width=r,C.height=a):(C.width=o(f),C.height=o(g),u=C.width/r,h=C.height/a),"none"!==(p=e.util.parsePreserveAspectRatioAttribute(p)).alignX&&("meet"===p.meetOrSlice&&(h=u=u>h?h:u),"slice"===p.meetOrSlice&&(h=u=u>h?u:h),_=C.width-r*u,M=C.height-a*u,"Mid"===p.alignX&&(_/=2),"Mid"===p.alignY&&(M/=2),"Min"===p.alignX&&(_=0),"Min"===p.alignY&&(M=0)),1===u&&1===h&&0===i&&0===n&&0===d&&0===v)return C;if((d||v)&&"#document"!==t.parentNode.nodeName&&(I=" translate("+o(d)+" "+o(v)+") "),s=I+" matrix("+u+" 0 0 "+h+" "+(i*u+_)+" "+(n*h+M)+") ","svg"===t.nodeName){for(l=t.ownerDocument.createElementNS(e.svgNS,"g");t.firstChild;)l.appendChild(t.firstChild);t.appendChild(l)}else(l=t).removeAttribute("x"),l.removeAttribute("y"),s=l.getAttribute("transform")+s;return l.setAttribute("transform",s),C}function x(t,e){var i="xlink:href",n=m(t,e.getAttribute(i).substr(1));if(n&&n.getAttribute(i)&&x(t,n),["gradientTransform","x1","x2","y1","y2","gradientUnits","cx","cy","r","fx","fy"].forEach((function(t){n&&!e.hasAttribute(t)&&n.hasAttribute(t)&&e.setAttribute(t,n.getAttribute(t))})),!e.children.length)for(var r=n.cloneNode(!0);r.firstChild;)e.appendChild(r.firstChild);e.removeAttribute(i)}e.parseSVGDocument=function(t,i,r,o){if(t){!function(t){for(var i=d(t,["use","svg:use"]),n=0;i.length&&nt.x&&this.y>t.y},gte:function(t){return this.x>=t.x&&this.y>=t.y},lerp:function(t,e){return void 0===e&&(e=.5),e=Math.max(Math.min(1,e),0),new i(this.x+(t.x-this.x)*e,this.y+(t.y-this.y)*e)},distanceFrom:function(t){var e=this.x-t.x,i=this.y-t.y;return Math.sqrt(e*e+i*i)},midPointFrom:function(t){return this.lerp(t)},min:function(t){return new i(Math.min(this.x,t.x),Math.min(this.y,t.y))},max:function(t){return new i(Math.max(this.x,t.x),Math.max(this.y,t.y))},toString:function(){return this.x+","+this.y},setXY:function(t,e){return this.x=t,this.y=e,this},setX:function(t){return this.x=t,this},setY:function(t){return this.y=t,this},setFromPoint:function(t){return this.x=t.x,this.y=t.y,this},swap:function(t){var e=this.x,i=this.y;this.x=t.x,this.y=t.y,t.x=e,t.y=i},clone:function(){return new i(this.x,this.y)}})}(e),function(t){"use strict";var e=t.fabric||(t.fabric={});function i(t){this.status=t,this.points=[]}e.Intersection?e.warn("fabric.Intersection is already defined"):(e.Intersection=i,e.Intersection.prototype={constructor:i,appendPoint:function(t){return this.points.push(t),this},appendPoints:function(t){return this.points=this.points.concat(t),this}},e.Intersection.intersectLineLine=function(t,n,r,o){var a,s=(o.x-r.x)*(t.y-r.y)-(o.y-r.y)*(t.x-r.x),l=(n.x-t.x)*(t.y-r.y)-(n.y-t.y)*(t.x-r.x),c=(o.y-r.y)*(n.x-t.x)-(o.x-r.x)*(n.y-t.y);if(0!==c){var u=s/c,h=l/c;0<=u&&u<=1&&0<=h&&h<=1?(a=new i("Intersection")).appendPoint(new e.Point(t.x+u*(n.x-t.x),t.y+u*(n.y-t.y))):a=new i}else a=new i(0===s||0===l?"Coincident":"Parallel");return a},e.Intersection.intersectLinePolygon=function(t,e,n){var r,o,a,s,l=new i,c=n.length;for(s=0;s0&&(l.status="Intersection"),l},e.Intersection.intersectPolygonPolygon=function(t,e){var n,r=new i,o=t.length;for(n=0;n0&&(r.status="Intersection"),r},e.Intersection.intersectPolygonRectangle=function(t,n,r){var o=n.min(r),a=n.max(r),s=new e.Point(a.x,o.y),l=new e.Point(o.x,a.y),c=i.intersectLinePolygon(o,s,t),u=i.intersectLinePolygon(s,a,t),h=i.intersectLinePolygon(a,l,t),f=i.intersectLinePolygon(l,o,t),g=new i;return g.appendPoints(c.points),g.appendPoints(u.points),g.appendPoints(h.points),g.appendPoints(f.points),g.points.length>0&&(g.status="Intersection"),g})}(e),function(t){"use strict";var e=t.fabric||(t.fabric={});function i(t){t?this._tryParsingColor(t):this.setSource([0,0,0,1])}function n(t,e,i){return i<0&&(i+=1),i>1&&(i-=1),i<1/6?t+6*(e-t)*i:i<.5?e:i<2/3?t+(e-t)*(2/3-i)*6:t}e.Color?e.warn("fabric.Color is already defined."):(e.Color=i,e.Color.prototype={_tryParsingColor:function(t){var e;t in i.colorNameMap&&(t=i.colorNameMap[t]),"transparent"===t&&(e=[255,255,255,0]),e||(e=i.sourceFromHex(t)),e||(e=i.sourceFromRgb(t)),e||(e=i.sourceFromHsl(t)),e||(e=[0,0,0,1]),e&&this.setSource(e)},_rgbToHsl:function(t,i,n){t/=255,i/=255,n/=255;var r,o,a,s=e.util.array.max([t,i,n]),l=e.util.array.min([t,i,n]);if(a=(s+l)/2,s===l)r=o=0;else{var c=s-l;switch(o=a>.5?c/(2-s-l):c/(s+l),s){case t:r=(i-n)/c+(i0)-(t<0)||+t};function g(t,e){var i=t.angle+h(Math.atan2(e.y,e.x))+360;return Math.round(i%360/45)}function d(t,i){var n=i.transform.target,r=n.canvas,o=e.util.object.clone(i);o.target=n,r&&r.fire("object:"+t,o),n.fire(t,i)}function v(t,e){var i=e.canvas,n=t[i.uniScaleKey];return i.uniformScaling&&!n||!i.uniformScaling&&n}function p(t){return t.originX===c&&t.originY===c}function m(t,e,i){var n=t.lockScalingX,r=t.lockScalingY;return!(!n||!r)||(!(e||!n&&!r||!i)||(!(!n||"x"!==e)||!(!r||"y"!==e)))}function y(t,e,i,n){return{e:t,transform:e,pointer:{x:i,y:n}}}function b(t){return function(e,i,n,r){var o=i.target,a=o.getCenterPoint(),s=o.translateToOriginPoint(a,i.originX,i.originY),l=t(e,i,n,r);return o.setPositionByOrigin(s,i.originX,i.originY),l}}function x(t,e){return function(i,n,r,o){var a=e(i,n,r,o);return a&&d(t,y(i,n,r,o)),a}}function C(t,i,n,r,o){var a=t.target,s=a.controls[t.corner],l=a.canvas.getZoom(),c=a.padding/l,u=a.toLocalPoint(new e.Point(r,o),i,n);return u.x>=c&&(u.x-=c),u.x<=-c&&(u.x+=c),u.y>=c&&(u.y-=c),u.y<=c&&(u.y+=c),u.x-=s.offsetX,u.y-=s.offsetY,u}function I(t){return t.flipX!==t.flipY}function _(t,e,i,n,r){if(0!==t[e]){var o=r/t._getTransformedDimensions()[n]*t[i];t.set(i,o)}}function M(t,e,i,n){var r,c=e.target,u=c._getTransformedDimensions(0,c.skewY),f=C(e,e.originX,e.originY,i,n),g=Math.abs(2*f.x)-u.x,d=c.skewX;g<2?r=0:(r=h(Math.atan2(g/c.scaleX,u.y/c.scaleY)),e.originX===o&&e.originY===l&&(r=-r),e.originX===s&&e.originY===a&&(r=-r),I(c)&&(r=-r));var v=d!==r;if(v){var p=c._getTransformedDimensions().y;c.set("skewX",r),_(c,"skewY","scaleY","y",p)}return v}function S(t,e,i,n){var r,c=e.target,u=c._getTransformedDimensions(c.skewX,0),f=C(e,e.originX,e.originY,i,n),g=Math.abs(2*f.y)-u.y,d=c.skewY;g<2?r=0:(r=h(Math.atan2(g/c.scaleY,u.x/c.scaleX)),e.originX===o&&e.originY===l&&(r=-r),e.originX===s&&e.originY===a&&(r=-r),I(c)&&(r=-r));var v=d!==r;if(v){var p=c._getTransformedDimensions().x;c.set("skewY",r),_(c,"skewX","scaleX","x",p)}return v}function w(t,e,i,n,r){r=r||{};var o,a,s,l,c,h,g=e.target,d=g.lockScalingX,y=g.lockScalingY,b=r.by,x=v(t,g),I=m(g,b,x),_=e.gestureScale;if(I)return!1;if(_)a=e.scaleX*_,s=e.scaleY*_;else{if(o=C(e,e.originX,e.originY,i,n),c="y"!==b?f(o.x):1,h="x"!==b?f(o.y):1,e.signX||(e.signX=c),e.signY||(e.signY=h),g.lockScalingFlip&&(e.signX!==c||e.signY!==h))return!1;if(l=g._getTransformedDimensions(),x&&!b){var M=Math.abs(o.x)+Math.abs(o.y),S=e.original,w=M/(Math.abs(l.x*S.scaleX/g.scaleX)+Math.abs(l.y*S.scaleY/g.scaleY));a=S.scaleX*w,s=S.scaleY*w}else a=Math.abs(o.x*g.scaleX/l.x),s=Math.abs(o.y*g.scaleY/l.y);p(e)&&(a*=2,s*=2),e.signX!==c&&"y"!==b&&(e.originX=u[e.originX],a*=-1,e.signX=c),e.signY!==h&&"x"!==b&&(e.originY=u[e.originY],s*=-1,e.signY=h)}var k=g.scaleX,T=g.scaleY;return b?("x"===b&&g.set("scaleX",a),"y"===b&&g.set("scaleY",s)):(!d&&g.set("scaleX",a),!y&&g.set("scaleY",s)),k!==g.scaleX||T!==g.scaleY}r.scaleCursorStyleHandler=function(t,e,n){var r=v(t,n),o="";if(0!==e.x&&0===e.y?o="x":0===e.x&&0!==e.y&&(o="y"),m(n,o,r))return"not-allowed";var a=g(n,e);return i[a]+"-resize"},r.skewCursorStyleHandler=function(t,e,i){var r="not-allowed";if(0!==e.x&&i.lockSkewingY)return r;if(0!==e.y&&i.lockSkewingX)return r;var o=g(i,e)%4;return n[o]+"-resize"},r.scaleSkewCursorStyleHandler=function(t,e,i){return t[i.canvas.altActionKey]?r.skewCursorStyleHandler(t,e,i):r.scaleCursorStyleHandler(t,e,i)},r.rotationWithSnapping=x("rotating",b((function(t,e,i,n){var r=e,o=r.target,a=o.translateToOriginPoint(o.getCenterPoint(),r.originX,r.originY);if(o.lockRotation)return!1;var s,l=Math.atan2(r.ey-a.y,r.ex-a.x),c=Math.atan2(n-a.y,i-a.x),u=h(c-l+r.theta);if(o.snapAngle>0){var f=o.snapAngle,g=o.snapThreshold||f,d=Math.ceil(u/f)*f,v=Math.floor(u/f)*f;Math.abs(u-v)0?o:s:(u>0&&(r=h===a?o:s),u<0&&(r=h===a?s:o),I(l)&&(r=r===o?s:o)),e.originX=r,x("skewing",b(M))(t,e,i,n))},r.skewHandlerY=function(t,e,i,n){var r,s=e.target,u=s.skewY,h=e.originX;return!s.lockSkewingY&&(0===u?r=C(e,c,c,i,n).y>0?a:l:(u>0&&(r=h===o?a:l),u<0&&(r=h===o?l:a),I(s)&&(r=r===a?l:a)),e.originY=r,x("skewing",b(S))(t,e,i,n))},r.dragHandler=function(t,e,i,n){var r=e.target,o=i-e.offsetX,a=n-e.offsetY,s=!r.get("lockMovementX")&&r.left!==o,l=!r.get("lockMovementY")&&r.top!==a;return s&&r.set("left",o),l&&r.set("top",a),(s||l)&&d("moving",y(t,e,i,n)),s||l},r.scaleOrSkewActionName=function(t,e,i){var n=t[i.canvas.altActionKey];return 0===e.x?n?"skewX":"scaleY":0===e.y?n?"skewY":"scaleX":void 0},r.rotationStyleHandler=function(t,e,i){return i.lockRotation?"not-allowed":e.cursorStyle},r.fireEvent=d,r.wrapWithFixedAnchor=b,r.wrapWithFireEvent=x,r.getLocalPoint=C,e.controlsUtils=r}(e),function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.util.degreesToRadians,n=e.controlsUtils;n.renderCircleControl=function(t,e,i,n,r){n=n||{};var o,a=this.sizeX||n.cornerSize||r.cornerSize,s=this.sizeY||n.cornerSize||r.cornerSize,l=void 0!==n.transparentCorners?n.transparentCorners:r.transparentCorners,c=l?"stroke":"fill",u=!l&&(n.cornerStrokeColor||r.cornerStrokeColor),h=e,f=i;t.save(),t.fillStyle=n.cornerColor||r.cornerColor,t.strokeStyle=n.cornerStrokeColor||r.cornerStrokeColor,a>s?(o=a,t.scale(1,s/a),f=i*a/s):s>a?(o=s,t.scale(a/s,1),h=e*s/a):o=a,t.lineWidth=1,t.beginPath(),t.arc(h,f,o/2,0,2*Math.PI,!1),t[c](),u&&t.stroke(),t.restore()},n.renderSquareControl=function(t,e,n,r,o){r=r||{};var a=this.sizeX||r.cornerSize||o.cornerSize,s=this.sizeY||r.cornerSize||o.cornerSize,l=void 0!==r.transparentCorners?r.transparentCorners:o.transparentCorners,c=l?"stroke":"fill",u=!l&&(r.cornerStrokeColor||o.cornerStrokeColor),h=a/2,f=s/2;t.save(),t.fillStyle=r.cornerColor||o.cornerColor,t.strokeStyle=r.cornerStrokeColor||o.cornerStrokeColor,t.lineWidth=1,t.translate(e,n),t.rotate(i(o.angle)),t[c+"Rect"](-h,-f,a,s),u&&t.strokeRect(-h,-f,a,s),t.restore()}}(e),function(t){"use strict";var e=t.fabric||(t.fabric={});e.Control=function(t){for(var e in t)this[e]=t[e]},e.Control.prototype={visible:!0,actionName:"scale",angle:0,x:0,y:0,offsetX:0,offsetY:0,sizeX:null,sizeY:null,touchSizeX:null,touchSizeY:null,cursorStyle:"crosshair",withConnection:!1,actionHandler:function(){},mouseDownHandler:function(){},mouseUpHandler:function(){},getActionHandler:function(){return this.actionHandler},getMouseDownHandler:function(){return this.mouseDownHandler},getMouseUpHandler:function(){return this.mouseUpHandler},cursorStyleHandler:function(t,e){return e.cursorStyle},getActionName:function(t,e){return e.actionName},getVisibility:function(t,e){var i=t._controlsVisibility;return i&&void 0!==i[e]?i[e]:this.visible},setVisibility:function(t){this.visible=t},positionHandler:function(t,i){return e.util.transformPoint({x:this.x*t.x+this.offsetX,y:this.y*t.y+this.offsetY},i)},calcCornerCoords:function(t,i,n,r,o){var a,s,l,c,u=o?this.touchSizeX:this.sizeX,h=o?this.touchSizeY:this.sizeY;if(u&&h&&u!==h){var f=Math.atan2(h,u),g=Math.sqrt(u*u+h*h)/2,d=f-e.util.degreesToRadians(t),v=Math.PI/2-f-e.util.degreesToRadians(t);a=g*e.util.cos(d),s=g*e.util.sin(d),l=g*e.util.cos(v),c=g*e.util.sin(v)}else{g=.7071067812*(u&&h?u:i);d=e.util.degreesToRadians(45-t);a=l=g*e.util.cos(d),s=c=g*e.util.sin(d)}return{tl:{x:n-c,y:r-l},tr:{x:n+a,y:r-s},bl:{x:n-a,y:r+s},br:{x:n+c,y:r+l}}},render:function(t,i,n,r,o){if("circle"===((r=r||{}).cornerStyle||o.cornerStyle))e.controlsUtils.renderCircleControl.call(this,t,i,n,r,o);else e.controlsUtils.renderSquareControl.call(this,t,i,n,r,o)}}}(e),function(){function t(t,e){var i,n,r,o,a=t.getAttribute("style"),s=t.getAttribute("offset")||0;if(s=(s=parseFloat(s)/(/%$/.test(s)?100:1))<0?0:s>1?1:s,a){var l=a.split(/\s*;\s*/);for(""===l[l.length-1]&&l.pop(),o=l.length;o--;){var c=l[o].split(/\s*:\s*/),u=c[0].trim(),h=c[1].trim();"stop-color"===u?i=h:"stop-opacity"===u&&(r=h)}}return i||(i=t.getAttribute("stop-color")||"rgb(0,0,0)"),r||(r=t.getAttribute("stop-opacity")),n=(i=new S.Color(i)).getAlpha(),r=isNaN(parseFloat(r))?1:parseFloat(r),r*=n*e,{offset:s,color:i.toRgb(),opacity:r}}var e=S.util.object.clone;S.Gradient=S.util.createClass({offsetX:0,offsetY:0,gradientTransform:null,gradientUnits:"pixels",type:"linear",initialize:function(t){t||(t={}),t.coords||(t.coords={});var e,i=this;Object.keys(t).forEach((function(e){i[e]=t[e]})),this.id?this.id+="_"+S.Object.__uid++:this.id=S.Object.__uid++,e={x1:t.coords.x1||0,y1:t.coords.y1||0,x2:t.coords.x2||0,y2:t.coords.y2||0},"radial"===this.type&&(e.r1=t.coords.r1||0,e.r2=t.coords.r2||0),this.coords=e,this.colorStops=t.colorStops.slice()},addColorStop:function(t){for(var e in t){var i=new S.Color(t[e]);this.colorStops.push({offset:parseFloat(e),color:i.toRgb(),opacity:i.getAlpha()})}return this},toObject:function(t){var e={type:this.type,coords:this.coords,colorStops:this.colorStops,offsetX:this.offsetX,offsetY:this.offsetY,gradientUnits:this.gradientUnits,gradientTransform:this.gradientTransform?this.gradientTransform.concat():this.gradientTransform};return S.util.populateWithProperties(this,e,t),e},toSVG:function(t,i){var n,r,o,a,s=e(this.coords,!0),l=(i=i||{},e(this.colorStops,!0)),c=s.r1>s.r2,u=this.gradientTransform?this.gradientTransform.concat():S.iMatrix.concat(),h=-this.offsetX,f=-this.offsetY,g=!!i.additionalTransform,d="pixels"===this.gradientUnits?"userSpaceOnUse":"objectBoundingBox";if(l.sort((function(t,e){return t.offset-e.offset})),"objectBoundingBox"===d?(h/=t.width,f/=t.height):(h+=t.width/2,f+=t.height/2),"path"===t.type&&"percentage"!==this.gradientUnits&&(h-=t.pathOffset.x,f-=t.pathOffset.y),u[4]-=h,u[5]-=f,a='id="SVGID_'+this.id+'" gradientUnits="'+d+'"',a+=' gradientTransform="'+(g?i.additionalTransform+" ":"")+S.util.matrixToSVG(u)+'" ',"linear"===this.type?o=["\n']:"radial"===this.type&&(o=["\n']),"radial"===this.type){if(c)for((l=l.concat()).reverse(),n=0,r=l.length;n0){var p=v/Math.max(s.r1,s.r2);for(n=0,r=l.length;n\n')}return o.push("linear"===this.type?"\n":"\n"),o.join("")},toLive:function(t){var e,i,n,r=S.util.object.clone(this.coords);if(this.type){for("linear"===this.type?e=t.createLinearGradient(r.x1,r.y1,r.x2,r.y2):"radial"===this.type&&(e=t.createRadialGradient(r.x1,r.y1,r.r1,r.x2,r.y2,r.r2)),i=0,n=this.colorStops.length;i1?1:o,isNaN(o)&&(o=1);var a,s,l,c,u=e.getElementsByTagName("stop"),h="userSpaceOnUse"===e.getAttribute("gradientUnits")?"pixels":"percentage",f=e.getAttribute("gradientTransform")||"",g=[],d=0,v=0;for("linearGradient"===e.nodeName||"LINEARGRADIENT"===e.nodeName?(a="linear",s=function(t){return{x1:t.getAttribute("x1")||0,y1:t.getAttribute("y1")||0,x2:t.getAttribute("x2")||"100%",y2:t.getAttribute("y2")||0}}(e)):(a="radial",s=function(t){return{x1:t.getAttribute("fx")||t.getAttribute("cx")||"50%",y1:t.getAttribute("fy")||t.getAttribute("cy")||"50%",r1:0,x2:t.getAttribute("cx")||"50%",y2:t.getAttribute("cy")||"50%",r2:t.getAttribute("r")||"50%"}}(e)),l=u.length;l--;)g.push(t(u[l],o));return c=S.parseTransformAttribute(f),function(t,e,i,n){var r,o;Object.keys(e).forEach((function(t){"Infinity"===(r=e[t])?o=1:"-Infinity"===r?o=0:(o=parseFloat(e[t],10),"string"==typeof r&&/^(\d+\.\d+)%|(\d+)%$/.test(r)&&(o*=.01,"pixels"===n&&("x1"!==t&&"x2"!==t&&"r2"!==t||(o*=i.viewBoxWidth||i.width),"y1"!==t&&"y2"!==t||(o*=i.viewBoxHeight||i.height)))),e[t]=o}))}(0,s,r,h),"pixels"===h&&(d=-i.left,v=-i.top),new S.Gradient({id:e.getAttribute("id"),type:a,coords:s,colorStops:g,gradientUnits:h,gradientTransform:c,offsetX:d,offsetY:v})}})}(),function(){"use strict";var t=S.util.toFixed;S.Pattern=S.util.createClass({repeat:"repeat",offsetX:0,offsetY:0,crossOrigin:"",patternTransform:null,initialize:function(t,e){if(t||(t={}),this.id=S.Object.__uid++,this.setOptions(t),!t.source||t.source&&"string"!=typeof t.source)e&&e(this);else{var i=this;this.source=S.util.createImage(),S.util.loadImage(t.source,(function(t,n){i.source=t,e&&e(i,n)}),null,this.crossOrigin)}},toObject:function(e){var i,n,r=S.Object.NUM_FRACTION_DIGITS;return"string"==typeof this.source.src?i=this.source.src:"object"==typeof this.source&&this.source.toDataURL&&(i=this.source.toDataURL()),n={type:"pattern",source:i,repeat:this.repeat,crossOrigin:this.crossOrigin,offsetX:t(this.offsetX,r),offsetY:t(this.offsetY,r),patternTransform:this.patternTransform?this.patternTransform.concat():null},S.util.populateWithProperties(this,n,e),n},toSVG:function(t){var e="function"==typeof this.source?this.source():this.source,i=e.width/t.width,n=e.height/t.height,r=this.offsetX/t.width,o=this.offsetY/t.height,a="";return"repeat-x"!==this.repeat&&"no-repeat"!==this.repeat||(n=1,o&&(n+=Math.abs(o))),"repeat-y"!==this.repeat&&"no-repeat"!==this.repeat||(i=1,r&&(i+=Math.abs(r))),e.src?a=e.src:e.toDataURL&&(a=e.toDataURL()),'\n\n\n'},setOptions:function(t){for(var e in t)this[e]=t[e]},toLive:function(t){var e=this.source;if(!e)return"";if(void 0!==e.src){if(!e.complete)return"";if(0===e.naturalWidth||0===e.naturalHeight)return""}return t.createPattern(e,this.repeat)}})}(),function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.util.toFixed;e.Shadow?e.warn("fabric.Shadow is already defined."):(e.Shadow=e.util.createClass({color:"rgb(0,0,0)",blur:0,offsetX:0,offsetY:0,affectStroke:!1,includeDefaultValues:!0,nonScaling:!1,initialize:function(t){for(var i in"string"==typeof t&&(t=this._parseShadow(t)),t)this[i]=t[i];this.id=e.Object.__uid++},_parseShadow:function(t){var i=t.trim(),n=e.Shadow.reOffsetsAndBlur.exec(i)||[];return{color:(i.replace(e.Shadow.reOffsetsAndBlur,"")||"rgb(0,0,0)").trim(),offsetX:parseFloat(n[1],10)||0,offsetY:parseFloat(n[2],10)||0,blur:parseFloat(n[3],10)||0}},toString:function(){return[this.offsetX,this.offsetY,this.blur,this.color].join("px ")},toSVG:function(t){var n=40,r=40,o=e.Object.NUM_FRACTION_DIGITS,a=e.util.rotateVector({x:this.offsetX,y:this.offsetY},e.util.degreesToRadians(-t.angle)),s=new e.Color(this.color);return t.width&&t.height&&(n=100*i((Math.abs(a.x)+this.blur)/t.width,o)+20,r=100*i((Math.abs(a.y)+this.blur)/t.height,o)+20),t.flipX&&(a.x*=-1),t.flipY&&(a.y*=-1),'\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\n\n'},toObject:function(){if(this.includeDefaultValues)return{color:this.color,blur:this.blur,offsetX:this.offsetX,offsetY:this.offsetY,affectStroke:this.affectStroke,nonScaling:this.nonScaling};var t={},i=e.Shadow.prototype;return["color","blur","offsetX","offsetY","affectStroke","nonScaling"].forEach((function(e){this[e]!==i[e]&&(t[e]=this[e])}),this),t}}),e.Shadow.reOffsetsAndBlur=/(?:\s|^)(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(-?\d+(?:\.\d*)?(?:px)?(?:\s?|$))?(\d+(?:\.\d*)?(?:px)?)?(?:\s?|$)(?:$|\s)/)}(e),function(){"use strict";if(S.StaticCanvas)S.warn("fabric.StaticCanvas is already defined.");else{var t=S.util.object.extend,e=S.util.getElementOffset,i=S.util.removeFromArray,n=S.util.toFixed,r=S.util.transformPoint,o=S.util.invertTransform,a=S.util.getNodeCanvas,s=S.util.createCanvasElement,l=new Error("Could not initialize `canvas` element");S.StaticCanvas=S.util.createClass(S.CommonMethods,{initialize:function(t,e){e||(e={}),this.renderAndResetBound=this.renderAndReset.bind(this),this.requestRenderAllBound=this.requestRenderAll.bind(this),this._initStatic(t,e)},backgroundColor:"",backgroundImage:null,overlayColor:"",overlayImage:null,includeDefaultValues:!0,stateful:!1,renderOnAddRemove:!0,controlsAboveOverlay:!1,allowTouchScrolling:!1,imageSmoothingEnabled:!0,viewportTransform:S.iMatrix.concat(),backgroundVpt:!0,overlayVpt:!0,enableRetinaScaling:!0,vptCoords:{},skipOffscreen:!0,clipPath:void 0,_initStatic:function(t,e){var i=this.requestRenderAllBound;this._objects=[],this._createLowerCanvas(t),this._initOptions(e),this.interactive||this._initRetinaScaling(),e.overlayImage&&this.setOverlayImage(e.overlayImage,i),e.backgroundImage&&this.setBackgroundImage(e.backgroundImage,i),e.backgroundColor&&this.setBackgroundColor(e.backgroundColor,i),e.overlayColor&&this.setOverlayColor(e.overlayColor,i),this.calcOffset()},_isRetinaScaling:function(){return 1!==S.devicePixelRatio&&this.enableRetinaScaling},getRetinaScaling:function(){return this._isRetinaScaling()?S.devicePixelRatio:1},_initRetinaScaling:function(){if(this._isRetinaScaling()){var t=S.devicePixelRatio;this.__initRetinaScaling(t,this.lowerCanvasEl,this.contextContainer),this.upperCanvasEl&&this.__initRetinaScaling(t,this.upperCanvasEl,this.contextTop)}},__initRetinaScaling:function(t,e,i){e.setAttribute("width",this.width*t),e.setAttribute("height",this.height*t),i.scale(t,t)},calcOffset:function(){return this._offset=e(this.lowerCanvasEl),this},setOverlayImage:function(t,e,i){return this.__setBgOverlayImage("overlayImage",t,e,i)},setBackgroundImage:function(t,e,i){return this.__setBgOverlayImage("backgroundImage",t,e,i)},setOverlayColor:function(t,e){return this.__setBgOverlayColor("overlayColor",t,e)},setBackgroundColor:function(t,e){return this.__setBgOverlayColor("backgroundColor",t,e)},__setBgOverlayImage:function(t,e,i,n){return"string"==typeof e?S.util.loadImage(e,(function(e,r){if(e){var o=new S.Image(e,n);this[t]=o,o.canvas=this}i&&i(e,r)}),this,n&&n.crossOrigin):(n&&e.setOptions(n),this[t]=e,e&&(e.canvas=this),i&&i(e,!1)),this},__setBgOverlayColor:function(t,e,i){return this[t]=e,this._initGradient(e,t),this._initPattern(e,t,i),this},_createCanvasElement:function(){var t=s();if(!t)throw l;if(t.style||(t.style={}),void 0===t.getContext)throw l;return t},_initOptions:function(t){var e=this.lowerCanvasEl;this._setOptions(t),this.width=this.width||parseInt(e.width,10)||0,this.height=this.height||parseInt(e.height,10)||0,this.lowerCanvasEl.style&&(e.width=this.width,e.height=this.height,e.style.width=this.width+"px",e.style.height=this.height+"px",this.viewportTransform=this.viewportTransform.slice())},_createLowerCanvas:function(t){t&&t.getContext?this.lowerCanvasEl=t:this.lowerCanvasEl=S.util.getById(t)||this._createCanvasElement(),S.util.addClass(this.lowerCanvasEl,"lower-canvas"),this._originalCanvasStyle=this.lowerCanvasEl.style,this.interactive&&this._applyCanvasStyle(this.lowerCanvasEl),this.contextContainer=this.lowerCanvasEl.getContext("2d")},getWidth:function(){return this.width},getHeight:function(){return this.height},setWidth:function(t,e){return this.setDimensions({width:t},e)},setHeight:function(t,e){return this.setDimensions({height:t},e)},setDimensions:function(t,e){var i;for(var n in e=e||{},t)i=t[n],e.cssOnly||(this._setBackstoreDimension(n,t[n]),i+="px",this.hasLostContext=!0),e.backstoreOnly||this._setCssDimension(n,i);return this._isCurrentlyDrawing&&this.freeDrawingBrush&&this.freeDrawingBrush._setBrushStyles(),this._initRetinaScaling(),this.calcOffset(),e.cssOnly||this.requestRenderAll(),this},_setBackstoreDimension:function(t,e){return this.lowerCanvasEl[t]=e,this.upperCanvasEl&&(this.upperCanvasEl[t]=e),this.cacheCanvasEl&&(this.cacheCanvasEl[t]=e),this[t]=e,this},_setCssDimension:function(t,e){return this.lowerCanvasEl.style[t]=e,this.upperCanvasEl&&(this.upperCanvasEl.style[t]=e),this.wrapperEl&&(this.wrapperEl.style[t]=e),this},getZoom:function(){return this.viewportTransform[0]},setViewportTransform:function(t){var e,i,n,r=this._activeObject,o=this.backgroundImage,a=this.overlayImage;for(this.viewportTransform=t,i=0,n=this._objects.length;i\n'),this._setSVGBgOverlayColor(i,"background"),this._setSVGBgOverlayImage(i,"backgroundImage",e),this._setSVGObjects(i,e),this.clipPath&&i.push("\n"),this._setSVGBgOverlayColor(i,"overlay"),this._setSVGBgOverlayImage(i,"overlayImage",e),i.push(""),i.join("")},_setSVGPreamble:function(t,e){e.suppressPreamble||t.push('\n','\n')},_setSVGHeader:function(t,e){var i,r=e.width||this.width,o=e.height||this.height,a='viewBox="0 0 '+this.width+" "+this.height+'" ',s=S.Object.NUM_FRACTION_DIGITS;e.viewBox?a='viewBox="'+e.viewBox.x+" "+e.viewBox.y+" "+e.viewBox.width+" "+e.viewBox.height+'" ':this.svgViewportTransformation&&(i=this.viewportTransform,a='viewBox="'+n(-i[4]/i[0],s)+" "+n(-i[5]/i[3],s)+" "+n(this.width/i[0],s)+" "+n(this.height/i[3],s)+'" '),t.push("\n',"Created with Fabric.js ",S.version,"\n","\n",this.createSVGFontFacesMarkup(),this.createSVGRefElementsMarkup(),this.createSVGClipPathMarkup(e),"\n")},createSVGClipPathMarkup:function(t){var e=this.clipPath;return e?(e.clipPathId="CLIPPATH_"+S.Object.__uid++,'\n'+this.clipPath.toClipPathSVG(t.reviver)+"\n"):""},createSVGRefElementsMarkup:function(){var t=this;return["background","overlay"].map((function(e){var i=t[e+"Color"];if(i&&i.toLive){var n=t[e+"Vpt"],r=t.viewportTransform,o={width:t.width/(n?r[0]:1),height:t.height/(n?r[3]:1)};return i.toSVG(o,{additionalTransform:n?S.util.matrixToSVG(r):""})}})).join("")},createSVGFontFacesMarkup:function(){var t,e,i,n,r,o,a,s,l="",c={},u=S.fontPaths,h=[];for(this._objects.forEach((function t(e){h.push(e),e._objects&&e._objects.forEach(t)})),a=0,s=h.length;a',"\n",l,"","\n"].join("")),l},_setSVGObjects:function(t,e){var i,n,r,o=this._objects;for(n=0,r=o.length;n\n")}else t.push('\n")},sendToBack:function(t){if(!t)return this;var e,n,r,o=this._activeObject;if(t===o&&"activeSelection"===t.type)for(e=(r=o._objects).length;e--;)n=r[e],i(this._objects,n),this._objects.unshift(n);else i(this._objects,t),this._objects.unshift(t);return this.renderOnAddRemove&&this.requestRenderAll(),this},bringToFront:function(t){if(!t)return this;var e,n,r,o=this._activeObject;if(t===o&&"activeSelection"===t.type)for(r=o._objects,e=0;e0+c&&(a=o-1,i(this._objects,r),this._objects.splice(a,0,r)),c++;else 0!==(o=this._objects.indexOf(t))&&(a=this._findNewLowerIndex(t,o,e),i(this._objects,t),this._objects.splice(a,0,t));return this.renderOnAddRemove&&this.requestRenderAll(),this},_findNewLowerIndex:function(t,e,i){var n,r;if(i)for(n=e,r=e-1;r>=0;--r){if(t.intersectsWithObject(this._objects[r])||t.isContainedWithinObject(this._objects[r])||this._objects[r].isContainedWithinObject(t)){n=r;break}}else n=e-1;return n},bringForward:function(t,e){if(!t)return this;var n,r,o,a,s,l=this._activeObject,c=0;if(t===l&&"activeSelection"===t.type)for(n=(s=l._objects).length;n--;)r=s[n],(o=this._objects.indexOf(r))"}}),t(S.StaticCanvas.prototype,S.Observable),t(S.StaticCanvas.prototype,S.Collection),t(S.StaticCanvas.prototype,S.DataURLExporter),t(S.StaticCanvas,{EMPTY_JSON:'{"objects": [], "background": "white"}',supports:function(t){var e=s();if(!e||!e.getContext)return null;var i=e.getContext("2d");return i&&"setLineDash"===t?void 0!==i.setLineDash:null}}),S.StaticCanvas.prototype.toJSON=S.StaticCanvas.prototype.toObject,S.isLikelyNode&&(S.StaticCanvas.prototype.createPNGStream=function(){var t=a(this.lowerCanvasEl);return t&&t.createPNGStream()},S.StaticCanvas.prototype.createJPEGStream=function(t){var e=a(this.lowerCanvasEl);return e&&e.createJPEGStream(t)})}}(),S.BaseBrush=S.util.createClass({color:"rgb(0, 0, 0)",width:1,shadow:null,strokeLineCap:"round",strokeLineJoin:"round",strokeMiterLimit:10,strokeDashArray:null,limitedToCanvasSize:!1,_setBrushStyles:function(){var t=this.canvas.contextTop;t.strokeStyle=this.color,t.lineWidth=this.width,t.lineCap=this.strokeLineCap,t.miterLimit=this.strokeMiterLimit,t.lineJoin=this.strokeLineJoin,t.setLineDash(this.strokeDashArray||[])},_saveAndTransform:function(t){var e=this.canvas.viewportTransform;t.save(),t.transform(e[0],e[1],e[2],e[3],e[4],e[5])},_setShadow:function(){if(this.shadow){var t=this.canvas,e=this.shadow,i=t.contextTop,n=t.getZoom();t&&t._isRetinaScaling()&&(n*=S.devicePixelRatio),i.shadowColor=e.color,i.shadowBlur=e.blur*n,i.shadowOffsetX=e.offsetX*n,i.shadowOffsetY=e.offsetY*n}},needsFullRender:function(){return new S.Color(this.color).getAlpha()<1||!!this.shadow},_resetShadow:function(){var t=this.canvas.contextTop;t.shadowColor="",t.shadowBlur=t.shadowOffsetX=t.shadowOffsetY=0},_isOutSideCanvas:function(t){return t.x<0||t.x>this.canvas.getWidth()||t.y<0||t.y>this.canvas.getHeight()}}),S.PencilBrush=S.util.createClass(S.BaseBrush,{decimate:.4,initialize:function(t){this.canvas=t,this._points=[]},_drawSegment:function(t,e,i){var n=e.midPointFrom(i);return t.quadraticCurveTo(e.x,e.y,n.x,n.y),n},onMouseDown:function(t,e){this.canvas._isMainEvent(e.e)&&(this._prepareForDrawing(t),this._captureDrawingPath(t),this._render())},onMouseMove:function(t,e){if(this.canvas._isMainEvent(e.e)&&(!0!==this.limitedToCanvasSize||!this._isOutSideCanvas(t))&&this._captureDrawingPath(t)&&this._points.length>1)if(this.needsFullRender())this.canvas.clearContext(this.canvas.contextTop),this._render();else{var i=this._points,n=i.length,r=this.canvas.contextTop;this._saveAndTransform(r),this.oldEnd&&(r.beginPath(),r.moveTo(this.oldEnd.x,this.oldEnd.y)),this.oldEnd=this._drawSegment(r,i[n-2],i[n-1],!0),r.stroke(),r.restore()}},onMouseUp:function(t){return!this.canvas._isMainEvent(t.e)||(this.oldEnd=void 0,this._finalizeAndAddPath(),!1)},_prepareForDrawing:function(t){var e=new S.Point(t.x,t.y);this._reset(),this._addPoint(e),this.canvas.contextTop.moveTo(e.x,e.y)},_addPoint:function(t){return!(this._points.length>1&&t.eq(this._points[this._points.length-1])||(this._points.push(t),0))},_reset:function(){this._points=[],this._setBrushStyles(),this._setShadow()},_captureDrawingPath:function(t){var e=new S.Point(t.x,t.y);return this._addPoint(e)},_render:function(){var t,e,i=this.canvas.contextTop,n=this._points[0],r=this._points[1];if(this._saveAndTransform(i),i.beginPath(),2===this._points.length&&n.x===r.x&&n.y===r.y){var o=this.width/1e3;n=new S.Point(n.x,n.y),r=new S.Point(r.x,r.y),n.x-=o,r.x+=o}for(i.moveTo(n.x,n.y),t=1,e=this._points.length;t=r&&(a=t[i],s.push(a));return s.push(t[o]),s},_finalizeAndAddPath:function(){this.canvas.contextTop.closePath(),this.decimate&&(this._points=this.decimatePoints(this._points,this.decimate));var t=this.convertPointsToSVGPath(this._points);if(this._isEmptySVGPath(t))this.canvas.requestRenderAll();else{var e=this.createPath(t);this.canvas.clearContext(this.canvas.contextTop),this.canvas.fire("before:path:created",{path:e}),this.canvas.add(e),this.canvas.requestRenderAll(),e.setCoords(),this._resetShadow(),this.canvas.fire("path:created",{path:e})}}}),S.CircleBrush=S.util.createClass(S.BaseBrush,{width:10,initialize:function(t){this.canvas=t,this.points=[]},drawDot:function(t){var e=this.addPoint(t),i=this.canvas.contextTop;this._saveAndTransform(i),this.dot(i,e),i.restore()},dot:function(t,e){t.fillStyle=e.fill,t.beginPath(),t.arc(e.x,e.y,e.radius,0,2*Math.PI,!1),t.closePath(),t.fill()},onMouseDown:function(t){this.points.length=0,this.canvas.clearContext(this.canvas.contextTop),this._setShadow(),this.drawDot(t)},_render:function(){var t,e,i=this.canvas.contextTop,n=this.points;for(this._saveAndTransform(i),t=0,e=n.length;t0&&!this.preserveObjectStacking){e=[],i=[];for(var r=0,o=this._objects.length;r1&&(this._activeObject._objects=i),e.push.apply(e,i)}else e=this._objects;return e},renderAll:function(){!this.contextTopDirty||this._groupSelector||this.isDrawingMode||(this.clearContext(this.contextTop),this.contextTopDirty=!1),this.hasLostContext&&this.renderTopLayer(this.contextTop);var t=this.contextContainer;return this.renderCanvas(t,this._chooseObjectsToRender()),this},renderTopLayer:function(t){t.save(),this.isDrawingMode&&this._isCurrentlyDrawing&&(this.freeDrawingBrush&&this.freeDrawingBrush._render(),this.contextTopDirty=!0),this.selection&&this._groupSelector&&(this._drawSelection(t),this.contextTopDirty=!0),t.restore()},renderTop:function(){var t=this.contextTop;return this.clearContext(t),this.renderTopLayer(t),this.fire("after:render"),this},_normalizePointer:function(t,e){var i=t.calcTransformMatrix(),n=S.util.invertTransform(i),r=this.restorePointerVpt(e);return S.util.transformPoint(r,n)},isTargetTransparent:function(t,e,i){if(t.shouldCache()&&t._cacheCanvas&&t!==this._activeObject){var n=this._normalizePointer(t,{x:e,y:i}),r=Math.max(t.cacheTranslationX+n.x*t.zoomX,0),o=Math.max(t.cacheTranslationY+n.y*t.zoomY,0);return S.util.isTransparent(t._cacheContext,Math.round(r),Math.round(o),this.targetFindTolerance)}var a=this.contextCache,s=t.selectionBackgroundColor,l=this.viewportTransform;return t.selectionBackgroundColor="",this.clearContext(a),a.save(),a.transform(l[0],l[1],l[2],l[3],l[4],l[5]),t.render(a),a.restore(),t.selectionBackgroundColor=s,S.util.isTransparent(a,e,i,this.targetFindTolerance)},_isSelectionKeyPressed:function(t){return"[object Array]"===Object.prototype.toString.call(this.selectionKey)?!!this.selectionKey.find((function(e){return!0===t[e]})):t[this.selectionKey]},_shouldClearSelection:function(t,e){var i=this.getActiveObjects(),n=this._activeObject;return!e||e&&n&&i.length>1&&-1===i.indexOf(e)&&n!==e&&!this._isSelectionKeyPressed(t)||e&&!e.evented||e&&!e.selectable&&n&&n!==e},_shouldCenterTransform:function(t,e,i){var n;if(t)return"scale"===e||"scaleX"===e||"scaleY"===e||"resizing"===e?n=this.centeredScaling||t.centeredScaling:"rotate"===e&&(n=this.centeredRotation||t.centeredRotation),n?!i:i},_getOriginFromCorner:function(t,e){var i={x:t.originX,y:t.originY};return"ml"===e||"tl"===e||"bl"===e?i.x="right":"mr"!==e&&"tr"!==e&&"br"!==e||(i.x="left"),"tl"===e||"mt"===e||"tr"===e?i.y="bottom":"bl"!==e&&"mb"!==e&&"br"!==e||(i.y="top"),i},_getActionFromCorner:function(t,e,i,n){if(!e||!t)return"drag";var r=n.controls[e];return r.getActionName(i,r,n)},_setupCurrentTransform:function(t,i,n){if(i){var r=this.getPointer(t),o=i.__corner,a=i.controls[o],s=n&&o?a.getActionHandler(t,i,a):S.controlsUtils.dragHandler,l=this._getActionFromCorner(n,o,t,i),c=this._getOriginFromCorner(i,o),u=t[this.centeredKey],h={target:i,action:l,actionHandler:s,corner:o,scaleX:i.scaleX,scaleY:i.scaleY,skewX:i.skewX,skewY:i.skewY,offsetX:r.x-i.left,offsetY:r.y-i.top,originX:c.x,originY:c.y,ex:r.x,ey:r.y,lastX:r.x,lastY:r.y,theta:e(i.angle),width:i.width*i.scaleX,shiftKey:t.shiftKey,altKey:u,original:S.util.saveObjectTransform(i)};this._shouldCenterTransform(i,l,u)&&(h.originX="center",h.originY="center"),h.original.originX=c.x,h.original.originY=c.y,this._currentTransform=h,this._beforeTransform(t)}},setCursor:function(t){this.upperCanvasEl.style.cursor=t},_drawSelection:function(t){var e=this._groupSelector,i=new S.Point(e.ex,e.ey),n=S.util.transformPoint(i,this.viewportTransform),r=new S.Point(e.ex+e.left,e.ey+e.top),o=S.util.transformPoint(r,this.viewportTransform),a=Math.min(n.x,o.x),s=Math.min(n.y,o.y),l=Math.max(n.x,o.x),c=Math.max(n.y,o.y),u=this.selectionLineWidth/2;this.selectionColor&&(t.fillStyle=this.selectionColor,t.fillRect(a,s,l-a,c-s)),this.selectionLineWidth&&this.selectionBorderColor&&(t.lineWidth=this.selectionLineWidth,t.strokeStyle=this.selectionBorderColor,a+=u,s+=u,l-=u,c-=u,S.Object.prototype._setLineDash.call(this,t,this.selectionDashArray),t.strokeRect(a,s,l-a,c-s))},findTarget:function(t,e){if(!this.skipTargetFind){var n,r,o=this.getPointer(t,!0),a=this._activeObject,s=this.getActiveObjects(),l=i(t),c=s.length>1&&!e||1===s.length;if(this.targets=[],c&&a._findTargetCorner(o,l))return a;if(s.length>1&&!e&&a===this._searchPossibleTargets([a],o))return a;if(1===s.length&&a===this._searchPossibleTargets([a],o)){if(!this.preserveObjectStacking)return a;n=a,r=this.targets,this.targets=[]}var u=this._searchPossibleTargets(this._objects,o);return t[this.altSelectionKey]&&u&&n&&u!==n&&(u=n,this.targets=r),u}},_checkTarget:function(t,e,i){if(e&&e.visible&&e.evented&&e.containsPoint(t)){if(!this.perPixelTargetFind&&!e.perPixelTargetFind||e.isEditing)return!0;if(!this.isTargetTransparent(e,i.x,i.y))return!0}},_searchPossibleTargets:function(t,e){for(var i,n,r=t.length;r--;){var o=t[r],a=o.group?this._normalizePointer(o.group,e):e;if(this._checkTarget(a,o,e)){(i=t[r]).subTargetCheck&&i instanceof S.Group&&(n=this._searchPossibleTargets(i._objects,e))&&this.targets.push(n);break}}return i},restorePointerVpt:function(t){return S.util.transformPoint(t,S.util.invertTransform(this.viewportTransform))},getPointer:function(e,i){if(this._absolutePointer&&!i)return this._absolutePointer;if(this._pointer&&i)return this._pointer;var n,r=t(e),o=this.upperCanvasEl,a=o.getBoundingClientRect(),s=a.width||0,l=a.height||0;s&&l||("top"in a&&"bottom"in a&&(l=Math.abs(a.top-a.bottom)),"right"in a&&"left"in a&&(s=Math.abs(a.right-a.left))),this.calcOffset(),r.x=r.x-this._offset.left,r.y=r.y-this._offset.top,i||(r=this.restorePointerVpt(r));var c=this.getRetinaScaling();return 1!==c&&(r.x/=c,r.y/=c),n=0===s||0===l?{width:1,height:1}:{width:o.width/s,height:o.height/l},{x:r.x*n.width,y:r.y*n.height}},_createUpperCanvas:function(){var t=this.lowerCanvasEl.className.replace(/\s*lower-canvas\s*/,""),e=this.lowerCanvasEl,i=this.upperCanvasEl;i?i.className="":(i=this._createCanvasElement(),this.upperCanvasEl=i),S.util.addClass(i,"upper-canvas "+t),this.wrapperEl.appendChild(i),this._copyCanvasStyle(e,i),this._applyCanvasStyle(i),this.contextTop=i.getContext("2d")},_createCacheCanvas:function(){this.cacheCanvasEl=this._createCanvasElement(),this.cacheCanvasEl.setAttribute("width",this.width),this.cacheCanvasEl.setAttribute("height",this.height),this.contextCache=this.cacheCanvasEl.getContext("2d")},_initWrapperElement:function(){this.wrapperEl=S.util.wrapElement(this.lowerCanvasEl,"div",{class:this.containerClass}),S.util.setStyle(this.wrapperEl,{width:this.width+"px",height:this.height+"px",position:"relative"}),S.util.makeElementUnselectable(this.wrapperEl)},_applyCanvasStyle:function(t){var e=this.width||t.width,i=this.height||t.height;S.util.setStyle(t,{position:"absolute",width:e+"px",height:i+"px",left:0,top:0,"touch-action":this.allowTouchScrolling?"manipulation":"none","-ms-touch-action":this.allowTouchScrolling?"manipulation":"none"}),t.width=e,t.height=i,S.util.makeElementUnselectable(t)},_copyCanvasStyle:function(t,e){e.style.cssText=t.style.cssText},getSelectionContext:function(){return this.contextTop},getSelectionElement:function(){return this.upperCanvasEl},getActiveObject:function(){return this._activeObject},getActiveObjects:function(){var t=this._activeObject;return t?"activeSelection"===t.type&&t._objects?t._objects.slice(0):[t]:[]},_onObjectRemoved:function(t){t===this._activeObject&&(this.fire("before:selection:cleared",{target:t}),this._discardActiveObject(),this.fire("selection:cleared",{target:t}),t.fire("deselected")),t===this._hoveredTarget&&(this._hoveredTarget=null,this._hoveredTargets=[]),this.callSuper("_onObjectRemoved",t)},_fireSelectionEvents:function(t,e){var i=!1,n=this.getActiveObjects(),r=[],o=[];t.forEach((function(t){-1===n.indexOf(t)&&(i=!0,t.fire("deselected",{e:e,target:t}),o.push(t))})),n.forEach((function(n){-1===t.indexOf(n)&&(i=!0,n.fire("selected",{e:e,target:n}),r.push(n))})),t.length>0&&n.length>0?i&&this.fire("selection:updated",{e:e,selected:r,deselected:o,updated:r[0]||o[0],target:this._activeObject}):n.length>0?this.fire("selection:created",{e:e,selected:r,target:this._activeObject}):t.length>0&&this.fire("selection:cleared",{e:e,deselected:o})},setActiveObject:function(t,e){var i=this.getActiveObjects();return this._setActiveObject(t,e),this._fireSelectionEvents(i,e),this},_setActiveObject:function(t,e){return this._activeObject!==t&&(!!this._discardActiveObject(e,t)&&(!t.onSelect({e:e})&&(this._activeObject=t,!0)))},_discardActiveObject:function(t,e){var i=this._activeObject;if(i){if(i.onDeselect({e:t,object:e}))return!1;this._activeObject=null}return!0},discardActiveObject:function(t){var e=this.getActiveObjects(),i=this.getActiveObject();return e.length&&this.fire("before:selection:cleared",{target:i,e:t}),this._discardActiveObject(t),this._fireSelectionEvents(e,t),this},dispose:function(){var t=this.wrapperEl;return this.removeListeners(),t.removeChild(this.upperCanvasEl),t.removeChild(this.lowerCanvasEl),this.contextCache=null,this.contextTop=null,["upperCanvasEl","cacheCanvasEl"].forEach(function(t){S.util.cleanUpJsdomNode(this[t]),this[t]=void 0}.bind(this)),t.parentNode&&t.parentNode.replaceChild(this.lowerCanvasEl,this.wrapperEl),delete this.wrapperEl,S.StaticCanvas.prototype.dispose.call(this),this},clear:function(){return this.discardActiveObject(),this.clearContext(this.contextTop),this.callSuper("clear")},drawControls:function(t){var e=this._activeObject;e&&e._renderControls(t)},_toObject:function(t,e,i){var n=this._realizeGroupTransformOnObject(t),r=this.callSuper("_toObject",t,e,i);return this._unwindGroupTransformOnObject(t,n),r},_realizeGroupTransformOnObject:function(t){if(t.group&&"activeSelection"===t.group.type&&this._activeObject===t.group){var e={};return["angle","flipX","flipY","left","scaleX","scaleY","skewX","skewY","top"].forEach((function(i){e[i]=t[i]})),S.util.addTransformToObject(t,this._activeObject.calcOwnMatrix()),e}return null},_unwindGroupTransformOnObject:function(t,e){e&&t.set(e)},_setSVGObject:function(t,e,i){var n=this._realizeGroupTransformOnObject(e);this.callSuper("_setSVGObject",t,e,i),this._unwindGroupTransformOnObject(e,n)},setViewportTransform:function(t){this.renderOnAddRemove&&this._activeObject&&this._activeObject.isEditing&&this._activeObject.clearContextTop(),S.StaticCanvas.prototype.setViewportTransform.call(this,t)}}),S.StaticCanvas)"prototype"!==n&&(S.Canvas[n]=S.StaticCanvas[n])}(),function(){var t=S.util.addListener,e=S.util.removeListener,i={passive:!1};function n(t,e){return t.button&&t.button===e-1}S.util.object.extend(S.Canvas.prototype,{mainTouchId:null,_initEventListeners:function(){this.removeListeners(),this._bindEvents(),this.addOrRemove(t,"add")},_getEventPrefix:function(){return this.enablePointerEvents?"pointer":"mouse"},addOrRemove:function(t,e){var n=this.upperCanvasEl,r=this._getEventPrefix();t(S.window,"resize",this._onResize),t(n,r+"down",this._onMouseDown),t(n,r+"move",this._onMouseMove,i),t(n,r+"out",this._onMouseOut),t(n,r+"enter",this._onMouseEnter),t(n,"wheel",this._onMouseWheel),t(n,"contextmenu",this._onContextMenu),t(n,"dblclick",this._onDoubleClick),t(n,"dragover",this._onDragOver),t(n,"dragenter",this._onDragEnter),t(n,"dragleave",this._onDragLeave),t(n,"drop",this._onDrop),this.enablePointerEvents||t(n,"touchstart",this._onTouchStart,i),"undefined"!=typeof eventjs&&e in eventjs&&(eventjs[e](n,"gesture",this._onGesture),eventjs[e](n,"drag",this._onDrag),eventjs[e](n,"orientation",this._onOrientationChange),eventjs[e](n,"shake",this._onShake),eventjs[e](n,"longpress",this._onLongPress))},removeListeners:function(){this.addOrRemove(e,"remove");var t=this._getEventPrefix();e(S.document,t+"up",this._onMouseUp),e(S.document,"touchend",this._onTouchEnd,i),e(S.document,t+"move",this._onMouseMove,i),e(S.document,"touchmove",this._onMouseMove,i)},_bindEvents:function(){this.eventsBound||(this._onMouseDown=this._onMouseDown.bind(this),this._onTouchStart=this._onTouchStart.bind(this),this._onMouseMove=this._onMouseMove.bind(this),this._onMouseUp=this._onMouseUp.bind(this),this._onTouchEnd=this._onTouchEnd.bind(this),this._onResize=this._onResize.bind(this),this._onGesture=this._onGesture.bind(this),this._onDrag=this._onDrag.bind(this),this._onShake=this._onShake.bind(this),this._onLongPress=this._onLongPress.bind(this),this._onOrientationChange=this._onOrientationChange.bind(this),this._onMouseWheel=this._onMouseWheel.bind(this),this._onMouseOut=this._onMouseOut.bind(this),this._onMouseEnter=this._onMouseEnter.bind(this),this._onContextMenu=this._onContextMenu.bind(this),this._onDoubleClick=this._onDoubleClick.bind(this),this._onDragOver=this._onDragOver.bind(this),this._onDragEnter=this._simpleEventHandler.bind(this,"dragenter"),this._onDragLeave=this._simpleEventHandler.bind(this,"dragleave"),this._onDrop=this._simpleEventHandler.bind(this,"drop"),this.eventsBound=!0)},_onGesture:function(t,e){this.__onTransformGesture&&this.__onTransformGesture(t,e)},_onDrag:function(t,e){this.__onDrag&&this.__onDrag(t,e)},_onMouseWheel:function(t){this.__onMouseWheel(t)},_onMouseOut:function(t){var e=this._hoveredTarget;this.fire("mouse:out",{target:e,e:t}),this._hoveredTarget=null,e&&e.fire("mouseout",{e:t});var i=this;this._hoveredTargets.forEach((function(n){i.fire("mouse:out",{target:e,e:t}),n&&e.fire("mouseout",{e:t})})),this._hoveredTargets=[],this._iTextInstances&&this._iTextInstances.forEach((function(t){t.isEditing&&t.hiddenTextarea.focus()}))},_onMouseEnter:function(t){this._currentTransform||this.findTarget(t)||(this.fire("mouse:over",{target:null,e:t}),this._hoveredTarget=null,this._hoveredTargets=[])},_onOrientationChange:function(t,e){this.__onOrientationChange&&this.__onOrientationChange(t,e)},_onShake:function(t,e){this.__onShake&&this.__onShake(t,e)},_onLongPress:function(t,e){this.__onLongPress&&this.__onLongPress(t,e)},_onDragOver:function(t){t.preventDefault();var e=this._simpleEventHandler("dragover",t);this._fireEnterLeaveEvents(e,t)},_onContextMenu:function(t){return this.stopContextMenu&&(t.stopPropagation(),t.preventDefault()),!1},_onDoubleClick:function(t){this._cacheTransformEventData(t),this._handleEvent(t,"dblclick"),this._resetTransformEventData(t)},getPointerId:function(t){var e=t.changedTouches;return e?e[0]&&e[0].identifier:this.enablePointerEvents?t.pointerId:-1},_isMainEvent:function(t){return!0===t.isPrimary||!1!==t.isPrimary&&("touchend"===t.type&&0===t.touches.length||(!t.changedTouches||t.changedTouches[0].identifier===this.mainTouchId))},_onTouchStart:function(n){n.preventDefault(),null===this.mainTouchId&&(this.mainTouchId=this.getPointerId(n)),this.__onMouseDown(n),this._resetTransformEventData();var r=this.upperCanvasEl,o=this._getEventPrefix();t(S.document,"touchend",this._onTouchEnd,i),t(S.document,"touchmove",this._onMouseMove,i),e(r,o+"down",this._onMouseDown)},_onMouseDown:function(n){this.__onMouseDown(n),this._resetTransformEventData();var r=this.upperCanvasEl,o=this._getEventPrefix();e(r,o+"move",this._onMouseMove,i),t(S.document,o+"up",this._onMouseUp),t(S.document,o+"move",this._onMouseMove,i)},_onTouchEnd:function(n){if(!(n.touches.length>0)){this.__onMouseUp(n),this._resetTransformEventData(),this.mainTouchId=null;var r=this._getEventPrefix();e(S.document,"touchend",this._onTouchEnd,i),e(S.document,"touchmove",this._onMouseMove,i);var o=this;this._willAddMouseDown&&clearTimeout(this._willAddMouseDown),this._willAddMouseDown=setTimeout((function(){t(o.upperCanvasEl,r+"down",o._onMouseDown),o._willAddMouseDown=0}),400)}},_onMouseUp:function(n){this.__onMouseUp(n),this._resetTransformEventData();var r=this.upperCanvasEl,o=this._getEventPrefix();this._isMainEvent(n)&&(e(S.document,o+"up",this._onMouseUp),e(S.document,o+"move",this._onMouseMove,i),t(r,o+"move",this._onMouseMove,i))},_onMouseMove:function(t){!this.allowTouchScrolling&&t.preventDefault&&t.preventDefault(),this.__onMouseMove(t)},_onResize:function(){this.calcOffset()},_shouldRender:function(t){var e=this._activeObject;return!!(!!e!=!!t||e&&t&&e!==t)||(e&&e.isEditing,!1)},__onMouseUp:function(t){var e,i=this._currentTransform,r=this._groupSelector,o=!1,a=!r||0===r.left&&0===r.top;if(this._cacheTransformEventData(t),e=this._target,this._handleEvent(t,"up:before"),n(t,3))this.fireRightClick&&this._handleEvent(t,"up",3,a);else{if(n(t,2))return this.fireMiddleClick&&this._handleEvent(t,"up",2,a),void this._resetTransformEventData();if(this.isDrawingMode&&this._isCurrentlyDrawing)this._onMouseUpInDrawingMode(t);else if(this._isMainEvent(t)){if(i&&(this._finalizeCurrentTransform(t),o=i.actionPerformed),!a){var s=e===this._activeObject;this._maybeGroupObjects(t),o||(o=this._shouldRender(e)||!s&&e===this._activeObject)}if(e){if(e.selectable&&e!==this._activeObject&&"up"===e.activeOn)this.setActiveObject(e,t),o=!0;else{var l=e._findTargetCorner(this.getPointer(t,!0),S.util.isTouchEvent(t)),c=e.controls[l],u=c&&c.getMouseUpHandler(t,e,c);if(u){var h=this.getPointer(t);u(t,i,h.x,h.y)}}e.isMoving=!1}this._setCursorFromEvent(t,e),this._handleEvent(t,"up",1,a),this._groupSelector=null,this._currentTransform=null,e&&(e.__corner=0),o?this.requestRenderAll():a||this.renderTop()}}},_simpleEventHandler:function(t,e){var i=this.findTarget(e),n=this.targets,r={e:e,target:i,subTargets:n};if(this.fire(t,r),i&&i.fire(t,r),!n)return i;for(var o=0;o1&&(e=new S.ActiveSelection(i.reverse(),{canvas:this}),this.setActiveObject(e,t))},_collectObjects:function(t){for(var e,i=[],n=this._groupSelector.ex,r=this._groupSelector.ey,o=n+this._groupSelector.left,a=r+this._groupSelector.top,s=new S.Point(m(n,o),m(r,a)),l=new S.Point(y(n,o),y(r,a)),c=!this.selectionFullyContained,u=n===o&&r===a,h=this._objects.length;h--&&!((e=this._objects[h])&&e.selectable&&e.visible&&(c&&e.intersectsWithRect(s,l,!0)||e.isContainedWithinRect(s,l,!0)||c&&e.containsPoint(s,null,!0)||c&&e.containsPoint(l,null,!0))&&(i.push(e),u)););return i.length>1&&(i=i.filter((function(e){return!e.onSelect({e:t})}))),i},_maybeGroupObjects:function(t){this.selection&&this._groupSelector&&this._groupSelectedObjects(t),this.setCursor(this.defaultCursor),this._groupSelector=null}}),S.util.object.extend(S.StaticCanvas.prototype,{toDataURL:function(t){t||(t={});var e=t.format||"png",i=t.quality||1,n=(t.multiplier||1)*(t.enableRetinaScaling?this.getRetinaScaling():1),r=this.toCanvasElement(n,t);return S.util.toDataURL(r,e,i)},toCanvasElement:function(t,e){t=t||1;var i=((e=e||{}).width||this.width)*t,n=(e.height||this.height)*t,r=this.getZoom(),o=this.width,a=this.height,s=r*t,l=this.viewportTransform,c=(l[4]-(e.left||0))*t,u=(l[5]-(e.top||0))*t,h=this.interactive,f=[s,0,0,s,c,u],g=this.enableRetinaScaling,d=S.util.createCanvasElement(),v=this.contextTop;return d.width=i,d.height=n,this.contextTop=null,this.enableRetinaScaling=!1,this.interactive=!1,this.viewportTransform=f,this.width=i,this.height=n,this.calcViewportBoundaries(),this.renderCanvas(d.getContext("2d"),this._objects),this.viewportTransform=l,this.width=o,this.height=a,this.calcViewportBoundaries(),this.interactive=h,this.enableRetinaScaling=g,this.contextTop=v,d}}),S.util.object.extend(S.StaticCanvas.prototype,{loadFromJSON:function(t,e,i){if(t){var n="string"==typeof t?JSON.parse(t):S.util.object.clone(t),r=this,o=n.clipPath,a=this.renderOnAddRemove;return this.renderOnAddRemove=!1,delete n.clipPath,this._enlivenObjects(n.objects,(function(t){r.clear(),r._setBgOverlay(n,(function(){o?r._enlivenObjects([o],(function(i){r.clipPath=i[0],r.__setupCanvas.call(r,n,t,a,e)})):r.__setupCanvas.call(r,n,t,a,e)}))}),i),this}},__setupCanvas:function(t,e,i,n){var r=this;e.forEach((function(t,e){r.insertAt(t,e)})),this.renderOnAddRemove=i,delete t.objects,delete t.backgroundImage,delete t.overlayImage,delete t.background,delete t.overlay,this._setOptions(t),this.renderAll(),n&&n()},_setBgOverlay:function(t,e){var i={backgroundColor:!1,overlayColor:!1,backgroundImage:!1,overlayImage:!1};if(t.backgroundImage||t.overlayImage||t.background||t.overlay){var n=function(){i.backgroundImage&&i.overlayImage&&i.backgroundColor&&i.overlayColor&&e&&e()};this.__setBgOverlay("backgroundImage",t.backgroundImage,i,n),this.__setBgOverlay("overlayImage",t.overlayImage,i,n),this.__setBgOverlay("backgroundColor",t.background,i,n),this.__setBgOverlay("overlayColor",t.overlay,i,n)}else e&&e()},__setBgOverlay:function(t,e,i,n){var r=this;if(!e)return i[t]=!0,void(n&&n());"backgroundImage"===t||"overlayImage"===t?S.util.enlivenObjects([e],(function(e){r[t]=e[0],i[t]=!0,n&&n()})):this["set"+S.util.string.capitalize(t,!0)](e,(function(){i[t]=!0,n&&n()}))},_enlivenObjects:function(t,e,i){t&&0!==t.length?S.util.enlivenObjects(t,(function(t){e&&e(t)}),null,i):e&&e([])},_toDataURL:function(t,e){this.clone((function(i){e(i.toDataURL(t))}))},_toDataURLWithMultiplier:function(t,e,i){this.clone((function(n){i(n.toDataURLWithMultiplier(t,e))}))},clone:function(t,e){var i=JSON.stringify(this.toJSON(e));this.cloneWithoutData((function(e){e.loadFromJSON(i,(function(){t&&t(e)}))}))},cloneWithoutData:function(t){var e=S.util.createCanvasElement();e.width=this.width,e.height=this.height;var i=new S.Canvas(e);this.backgroundImage?(i.setBackgroundImage(this.backgroundImage.src,(function(){i.renderAll(),t&&t(i)})),i.backgroundImageOpacity=this.backgroundImageOpacity,i.backgroundImageStretch=this.backgroundImageStretch):t&&t(i)}}),function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.util.object.extend,n=e.util.object.clone,r=e.util.toFixed,o=e.util.string.capitalize,a=e.util.degreesToRadians,s=!e.isLikelyNode;e.Object||(e.Object=e.util.createClass(e.CommonMethods,{type:"object",originX:"left",originY:"top",top:0,left:0,width:0,height:0,scaleX:1,scaleY:1,flipX:!1,flipY:!1,opacity:1,angle:0,skewX:0,skewY:0,cornerSize:13,touchCornerSize:24,transparentCorners:!0,hoverCursor:null,moveCursor:null,padding:0,borderColor:"rgb(178,204,255)",borderDashArray:null,cornerColor:"rgb(178,204,255)",cornerStrokeColor:null,cornerStyle:"rect",cornerDashArray:null,centeredScaling:!1,centeredRotation:!0,fill:"rgb(0,0,0)",fillRule:"nonzero",globalCompositeOperation:"source-over",backgroundColor:"",selectionBackgroundColor:"",stroke:null,strokeWidth:1,strokeDashArray:null,strokeDashOffset:0,strokeLineCap:"butt",strokeLineJoin:"miter",strokeMiterLimit:4,shadow:null,borderOpacityWhenMoving:.4,borderScaleFactor:1,minScaleLimit:0,selectable:!0,evented:!0,visible:!0,hasControls:!0,hasBorders:!0,perPixelTargetFind:!1,includeDefaultValues:!0,lockMovementX:!1,lockMovementY:!1,lockRotation:!1,lockScalingX:!1,lockScalingY:!1,lockSkewingX:!1,lockSkewingY:!1,lockScalingFlip:!1,excludeFromExport:!1,objectCaching:s,statefullCache:!1,noScaleCache:!0,strokeUniform:!1,dirty:!0,__corner:0,paintFirst:"fill",activeOn:"down",stateProperties:"top left width height scaleX scaleY flipX flipY originX originY transformMatrix stroke strokeWidth strokeDashArray strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit angle opacity fill globalCompositeOperation shadow visible backgroundColor skewX skewY fillRule paintFirst clipPath strokeUniform".split(" "),cacheProperties:"fill stroke strokeWidth strokeDashArray width height paintFirst strokeUniform strokeLineCap strokeDashOffset strokeLineJoin strokeMiterLimit backgroundColor clipPath".split(" "),colorProperties:"fill stroke backgroundColor".split(" "),clipPath:void 0,inverted:!1,absolutePositioned:!1,initialize:function(t){t&&this.setOptions(t)},_createCacheCanvas:function(){this._cacheProperties={},this._cacheCanvas=e.util.createCanvasElement(),this._cacheContext=this._cacheCanvas.getContext("2d"),this._updateCacheCanvas(),this.dirty=!0},_limitCacheSize:function(t){var i=e.perfLimitSizeTotal,n=t.width,r=t.height,o=e.maxCacheSideLimit,a=e.minCacheSideLimit;if(n<=o&&r<=o&&n*r<=i)return nu&&(t.zoomX/=n/u,t.width=u,t.capped=!0),r>h&&(t.zoomY/=r/h,t.height=h,t.capped=!0),t},_getCacheCanvasDimensions:function(){var t=this.getTotalObjectScaling(),e=this._getTransformedDimensions(0,0),i=e.x*t.scaleX/this.scaleX,n=e.y*t.scaleY/this.scaleY;return{width:i+2,height:n+2,zoomX:t.scaleX,zoomY:t.scaleY,x:i,y:n}},_updateCacheCanvas:function(){var t=this.canvas;if(this.noScaleCache&&t&&t._currentTransform){var i=t._currentTransform.target,n=t._currentTransform.action;if(this===i&&n.slice&&"scale"===n.slice(0,5))return!1}var r,o,a=this._cacheCanvas,s=this._limitCacheSize(this._getCacheCanvasDimensions()),l=e.minCacheSideLimit,c=s.width,u=s.height,h=s.zoomX,f=s.zoomY,g=c!==this.cacheWidth||u!==this.cacheHeight,d=this.zoomX!==h||this.zoomY!==f,v=g||d,p=0,m=0,y=!1;if(g){var b=this._cacheCanvas.width,x=this._cacheCanvas.height,C=c>b||u>x;y=C||(c<.9*b||u<.9*x)&&b>l&&x>l,C&&!s.capped&&(c>l||u>l)&&(p=.1*c,m=.1*u)}return this instanceof e.Text&&this.path&&(v=!0,y=!0,p+=this.getHeightOfLine(0)*this.zoomX,m+=this.getHeightOfLine(0)*this.zoomY),!!v&&(y?(a.width=Math.ceil(c+p),a.height=Math.ceil(u+m)):(this._cacheContext.setTransform(1,0,0,1,0,0),this._cacheContext.clearRect(0,0,a.width,a.height)),r=s.x/2,o=s.y/2,this.cacheTranslationX=Math.round(a.width/2-r)+r,this.cacheTranslationY=Math.round(a.height/2-o)+o,this.cacheWidth=c,this.cacheHeight=u,this._cacheContext.translate(this.cacheTranslationX,this.cacheTranslationY),this._cacheContext.scale(h,f),this.zoomX=h,this.zoomY=f,!0)},setOptions:function(t){this._setOptions(t),this._initGradient(t.fill,"fill"),this._initGradient(t.stroke,"stroke"),this._initPattern(t.fill,"fill"),this._initPattern(t.stroke,"stroke")},transform:function(t){var e=this.group&&!this.group._transformDone||this.group&&this.canvas&&t===this.canvas.contextTop,i=this.calcTransformMatrix(!e);t.transform(i[0],i[1],i[2],i[3],i[4],i[5])},toObject:function(t){var i=e.Object.NUM_FRACTION_DIGITS,n={type:this.type,version:e.version,originX:this.originX,originY:this.originY,left:r(this.left,i),top:r(this.top,i),width:r(this.width,i),height:r(this.height,i),fill:this.fill&&this.fill.toObject?this.fill.toObject():this.fill,stroke:this.stroke&&this.stroke.toObject?this.stroke.toObject():this.stroke,strokeWidth:r(this.strokeWidth,i),strokeDashArray:this.strokeDashArray?this.strokeDashArray.concat():this.strokeDashArray,strokeLineCap:this.strokeLineCap,strokeDashOffset:this.strokeDashOffset,strokeLineJoin:this.strokeLineJoin,strokeUniform:this.strokeUniform,strokeMiterLimit:r(this.strokeMiterLimit,i),scaleX:r(this.scaleX,i),scaleY:r(this.scaleY,i),angle:r(this.angle,i),flipX:this.flipX,flipY:this.flipY,opacity:r(this.opacity,i),shadow:this.shadow&&this.shadow.toObject?this.shadow.toObject():this.shadow,visible:this.visible,backgroundColor:this.backgroundColor,fillRule:this.fillRule,paintFirst:this.paintFirst,globalCompositeOperation:this.globalCompositeOperation,skewX:r(this.skewX,i),skewY:r(this.skewY,i)};return this.clipPath&&!this.clipPath.excludeFromExport&&(n.clipPath=this.clipPath.toObject(t),n.clipPath.inverted=this.clipPath.inverted,n.clipPath.absolutePositioned=this.clipPath.absolutePositioned),e.util.populateWithProperties(this,n,t),this.includeDefaultValues||(n=this._removeDefaultValues(n)),n},toDatalessObject:function(t){return this.toObject(t)},_removeDefaultValues:function(t){var i=e.util.getKlass(t.type).prototype;return i.stateProperties.forEach((function(e){"left"!==e&&"top"!==e&&(t[e]===i[e]&&delete t[e],"[object Array]"===Object.prototype.toString.call(t[e])&&"[object Array]"===Object.prototype.toString.call(i[e])&&0===t[e].length&&0===i[e].length&&delete t[e])})),t},toString:function(){return"#"},getObjectScaling:function(){if(!this.group)return{scaleX:this.scaleX,scaleY:this.scaleY};var t=e.util.qrDecompose(this.calcTransformMatrix());return{scaleX:Math.abs(t.scaleX),scaleY:Math.abs(t.scaleY)}},getTotalObjectScaling:function(){var t=this.getObjectScaling(),e=t.scaleX,i=t.scaleY;if(this.canvas){var n=this.canvas.getZoom(),r=this.canvas.getRetinaScaling();e*=n*r,i*=n*r}return{scaleX:e,scaleY:i}},getObjectOpacity:function(){var t=this.opacity;return this.group&&(t*=this.group.getObjectOpacity()),t},_set:function(t,i){var n="scaleX"===t||"scaleY"===t,r=this[t]!==i,o=!1;return n&&(i=this._constrainScale(i)),"scaleX"===t&&i<0?(this.flipX=!this.flipX,i*=-1):"scaleY"===t&&i<0?(this.flipY=!this.flipY,i*=-1):"shadow"!==t||!i||i instanceof e.Shadow?"dirty"===t&&this.group&&this.group.set("dirty",i):i=new e.Shadow(i),this[t]=i,r&&(o=this.group&&this.group.isOnACache(),this.cacheProperties.indexOf(t)>-1?(this.dirty=!0,o&&this.group.set("dirty",!0)):o&&this.stateProperties.indexOf(t)>-1&&this.group.set("dirty",!0)),this},setOnGroup:function(){},getViewportTransform:function(){return this.canvas&&this.canvas.viewportTransform?this.canvas.viewportTransform:e.iMatrix.concat()},isNotVisible:function(){return 0===this.opacity||!this.width&&!this.height&&0===this.strokeWidth||!this.visible},render:function(t){this.isNotVisible()||this.canvas&&this.canvas.skipOffscreen&&!this.group&&!this.isOnScreen()||(t.save(),this._setupCompositeOperation(t),this.drawSelectionBackground(t),this.transform(t),this._setOpacity(t),this._setShadow(t,this),this.shouldCache()?(this.renderCache(),this.drawCacheOnCanvas(t)):(this._removeCacheCanvas(),this.dirty=!1,this.drawObject(t),this.objectCaching&&this.statefullCache&&this.saveState({propertySet:"cacheProperties"})),t.restore())},renderCache:function(t){t=t||{},this._cacheCanvas||this._createCacheCanvas(),this.isCacheDirty()&&(this.statefullCache&&this.saveState({propertySet:"cacheProperties"}),this.drawObject(this._cacheContext,t.forClipping),this.dirty=!1)},_removeCacheCanvas:function(){this._cacheCanvas=null,this.cacheWidth=0,this.cacheHeight=0},hasStroke:function(){return this.stroke&&"transparent"!==this.stroke&&0!==this.strokeWidth},hasFill:function(){return this.fill&&"transparent"!==this.fill},needsItsOwnCache:function(){return!("stroke"!==this.paintFirst||!this.hasFill()||!this.hasStroke()||"object"!=typeof this.shadow)||!!this.clipPath},shouldCache:function(){return this.ownCaching=this.needsItsOwnCache()||this.objectCaching&&(!this.group||!this.group.isOnACache()),this.ownCaching},willDrawShadow:function(){return!!this.shadow&&(0!==this.shadow.offsetX||0!==this.shadow.offsetY)},drawClipPathOnCache:function(t){var i=this.clipPath;if(t.save(),i.inverted?t.globalCompositeOperation="destination-out":t.globalCompositeOperation="destination-in",i.absolutePositioned){var n=e.util.invertTransform(this.calcTransformMatrix());t.transform(n[0],n[1],n[2],n[3],n[4],n[5])}i.transform(t),t.scale(1/i.zoomX,1/i.zoomY),t.drawImage(i._cacheCanvas,-i.cacheTranslationX,-i.cacheTranslationY),t.restore()},drawObject:function(t,e){var i=this.fill,n=this.stroke;e?(this.fill="black",this.stroke="",this._setClippingProperties(t)):this._renderBackground(t),this._render(t),this._drawClipPath(t),this.fill=i,this.stroke=n},_drawClipPath:function(t){var e=this.clipPath;e&&(e.canvas=this.canvas,e.shouldCache(),e._transformDone=!0,e.renderCache({forClipping:!0}),this.drawClipPathOnCache(t))},drawCacheOnCanvas:function(t){t.scale(1/this.zoomX,1/this.zoomY),t.drawImage(this._cacheCanvas,-this.cacheTranslationX,-this.cacheTranslationY)},isCacheDirty:function(t){if(this.isNotVisible())return!1;if(this._cacheCanvas&&!t&&this._updateCacheCanvas())return!0;if(this.dirty||this.clipPath&&this.clipPath.absolutePositioned||this.statefullCache&&this.hasStateChanged("cacheProperties")){if(this._cacheCanvas&&!t){var e=this.cacheWidth/this.zoomX,i=this.cacheHeight/this.zoomY;this._cacheContext.clearRect(-e/2,-i/2,e,i)}return!0}return!1},_renderBackground:function(t){if(this.backgroundColor){var e=this._getNonTransformedDimensions();t.fillStyle=this.backgroundColor,t.fillRect(-e.x/2,-e.y/2,e.x,e.y),this._removeShadow(t)}},_setOpacity:function(t){this.group&&!this.group._transformDone?t.globalAlpha=this.getObjectOpacity():t.globalAlpha*=this.opacity},_setStrokeStyles:function(t,e){var i=e.stroke;i&&(t.lineWidth=e.strokeWidth,t.lineCap=e.strokeLineCap,t.lineDashOffset=e.strokeDashOffset,t.lineJoin=e.strokeLineJoin,t.miterLimit=e.strokeMiterLimit,i.toLive?"percentage"===i.gradientUnits||i.gradientTransform||i.patternTransform?this._applyPatternForTransformedGradient(t,i):(t.strokeStyle=i.toLive(t,this),this._applyPatternGradientTransform(t,i)):t.strokeStyle=e.stroke)},_setFillStyles:function(t,e){var i=e.fill;i&&(i.toLive?(t.fillStyle=i.toLive(t,this),this._applyPatternGradientTransform(t,e.fill)):t.fillStyle=i)},_setClippingProperties:function(t){t.globalAlpha=1,t.strokeStyle="transparent",t.fillStyle="#000000"},_setLineDash:function(t,e){e&&0!==e.length&&(1&e.length&&e.push.apply(e,e),t.setLineDash(e))},_renderControls:function(t,i){var n,r,o,s=this.getViewportTransform(),l=this.calcTransformMatrix();r=void 0!==(i=i||{}).hasBorders?i.hasBorders:this.hasBorders,o=void 0!==i.hasControls?i.hasControls:this.hasControls,l=e.util.multiplyTransformMatrices(s,l),n=e.util.qrDecompose(l),t.save(),t.translate(n.translateX,n.translateY),t.lineWidth=1*this.borderScaleFactor,this.group||(t.globalAlpha=this.isMoving?this.borderOpacityWhenMoving:1),t.rotate(a(n.angle)),i.forActiveSelection||this.group?r&&this.drawBordersInGroup(t,n,i):r&&this.drawBorders(t,i),o&&this.drawControls(t,i),t.restore()},_setShadow:function(t){if(this.shadow){var i,n=this.shadow,r=this.canvas,o=r&&r.viewportTransform[0]||1,a=r&&r.viewportTransform[3]||1;i=n.nonScaling?{scaleX:1,scaleY:1}:this.getObjectScaling(),r&&r._isRetinaScaling()&&(o*=e.devicePixelRatio,a*=e.devicePixelRatio),t.shadowColor=n.color,t.shadowBlur=n.blur*e.browserShadowBlurConstant*(o+a)*(i.scaleX+i.scaleY)/4,t.shadowOffsetX=n.offsetX*o*i.scaleX,t.shadowOffsetY=n.offsetY*a*i.scaleY}},_removeShadow:function(t){this.shadow&&(t.shadowColor="",t.shadowBlur=t.shadowOffsetX=t.shadowOffsetY=0)},_applyPatternGradientTransform:function(t,e){if(!e||!e.toLive)return{offsetX:0,offsetY:0};var i=e.gradientTransform||e.patternTransform,n=-this.width/2+e.offsetX||0,r=-this.height/2+e.offsetY||0;return"percentage"===e.gradientUnits?t.transform(this.width,0,0,this.height,n,r):t.transform(1,0,0,1,n,r),i&&t.transform(i[0],i[1],i[2],i[3],i[4],i[5]),{offsetX:n,offsetY:r}},_renderPaintInOrder:function(t){"stroke"===this.paintFirst?(this._renderStroke(t),this._renderFill(t)):(this._renderFill(t),this._renderStroke(t))},_render:function(){},_renderFill:function(t){this.fill&&(t.save(),this._setFillStyles(t,this),"evenodd"===this.fillRule?t.fill("evenodd"):t.fill(),t.restore())},_renderStroke:function(t){if(this.stroke&&0!==this.strokeWidth){if(this.shadow&&!this.shadow.affectStroke&&this._removeShadow(t),t.save(),this.strokeUniform&&this.group){var e=this.getObjectScaling();t.scale(1/e.scaleX,1/e.scaleY)}else this.strokeUniform&&t.scale(1/this.scaleX,1/this.scaleY);this._setLineDash(t,this.strokeDashArray),this._setStrokeStyles(t,this),t.stroke(),t.restore()}},_applyPatternForTransformedGradient:function(t,i){var n,r=this._limitCacheSize(this._getCacheCanvasDimensions()),o=e.util.createCanvasElement(),a=this.canvas.getRetinaScaling(),s=r.x/this.scaleX/a,l=r.y/this.scaleY/a;o.width=s,o.height=l,(n=o.getContext("2d")).beginPath(),n.moveTo(0,0),n.lineTo(s,0),n.lineTo(s,l),n.lineTo(0,l),n.closePath(),n.translate(s/2,l/2),n.scale(r.zoomX/this.scaleX/a,r.zoomY/this.scaleY/a),this._applyPatternGradientTransform(n,i),n.fillStyle=i.toLive(t),n.fill(),t.translate(-this.width/2-this.strokeWidth/2,-this.height/2-this.strokeWidth/2),t.scale(a*this.scaleX/r.zoomX,a*this.scaleY/r.zoomY),t.strokeStyle=n.createPattern(o,"no-repeat")},_findCenterFromElement:function(){return{x:this.left+this.width/2,y:this.top+this.height/2}},_assignTransformMatrixProps:function(){if(this.transformMatrix){var t=e.util.qrDecompose(this.transformMatrix);this.flipX=!1,this.flipY=!1,this.set("scaleX",t.scaleX),this.set("scaleY",t.scaleY),this.angle=t.angle,this.skewX=t.skewX,this.skewY=0}},_removeTransformMatrix:function(t){var i=this._findCenterFromElement();this.transformMatrix&&(this._assignTransformMatrixProps(),i=e.util.transformPoint(i,this.transformMatrix)),this.transformMatrix=null,t&&(this.scaleX*=t.scaleX,this.scaleY*=t.scaleY,this.cropX=t.cropX,this.cropY=t.cropY,i.x+=t.offsetLeft,i.y+=t.offsetTop,this.width=t.width,this.height=t.height),this.setPositionByOrigin(i,"center","center")},clone:function(t,i){var n=this.toObject(i);this.constructor.fromObject?this.constructor.fromObject(n,t):e.Object._fromObject("Object",n,t)},cloneAsImage:function(t,i){var n=this.toCanvasElement(i);return t&&t(new e.Image(n)),this},toCanvasElement:function(t){t||(t={});var i=e.util,n=i.saveObjectTransform(this),r=this.group,o=this.shadow,a=Math.abs,s=(t.multiplier||1)*(t.enableRetinaScaling?e.devicePixelRatio:1);delete this.group,t.withoutTransform&&i.resetObjectTransform(this),t.withoutShadow&&(this.shadow=null);var l,c,u,h,f=e.util.createCanvasElement(),g=this.getBoundingRect(!0,!0),d=this.shadow,v={x:0,y:0};d&&(c=d.blur,l=d.nonScaling?{scaleX:1,scaleY:1}:this.getObjectScaling(),v.x=2*Math.round(a(d.offsetX)+c)*a(l.scaleX),v.y=2*Math.round(a(d.offsetY)+c)*a(l.scaleY)),u=g.width+v.x,h=g.height+v.y,f.width=Math.ceil(u),f.height=Math.ceil(h);var p=new e.StaticCanvas(f,{enableRetinaScaling:!1,renderOnAddRemove:!1,skipOffscreen:!1});"jpeg"===t.format&&(p.backgroundColor="#fff"),this.setPositionByOrigin(new e.Point(p.width/2,p.height/2),"center","center");var m=this.canvas;p.add(this);var y=p.toCanvasElement(s||1,t);return this.shadow=o,this.set("canvas",m),r&&(this.group=r),this.set(n).setCoords(),p._objects=[],p.dispose(),p=null,y},toDataURL:function(t){return t||(t={}),e.util.toDataURL(this.toCanvasElement(t),t.format||"png",t.quality||1)},isType:function(t){return this.type===t},complexity:function(){return 1},toJSON:function(t){return this.toObject(t)},rotate:function(t){var e=("center"!==this.originX||"center"!==this.originY)&&this.centeredRotation;return e&&this._setOriginToCenter(),this.set("angle",t),e&&this._resetOrigin(),this},centerH:function(){return this.canvas&&this.canvas.centerObjectH(this),this},viewportCenterH:function(){return this.canvas&&this.canvas.viewportCenterObjectH(this),this},centerV:function(){return this.canvas&&this.canvas.centerObjectV(this),this},viewportCenterV:function(){return this.canvas&&this.canvas.viewportCenterObjectV(this),this},center:function(){return this.canvas&&this.canvas.centerObject(this),this},viewportCenter:function(){return this.canvas&&this.canvas.viewportCenterObject(this),this},getLocalPointer:function(t,i){i=i||this.canvas.getPointer(t);var n=new e.Point(i.x,i.y),r=this._getLeftTopCoords();return this.angle&&(n=e.util.rotatePoint(n,r,a(-this.angle))),{x:n.x-r.x,y:n.y-r.y}},_setupCompositeOperation:function(t){this.globalCompositeOperation&&(t.globalCompositeOperation=this.globalCompositeOperation)}}),e.util.createAccessors&&e.util.createAccessors(e.Object),i(e.Object.prototype,e.Observable),e.Object.NUM_FRACTION_DIGITS=2,e.Object._fromObject=function(t,i,r,o){var a=e[t];i=n(i,!0),e.util.enlivenPatterns([i.fill,i.stroke],(function(t){void 0!==t[0]&&(i.fill=t[0]),void 0!==t[1]&&(i.stroke=t[1]),e.util.enlivenObjects([i.clipPath],(function(t){i.clipPath=t[0];var e=o?new a(i[o],i):new a(i);r&&r(e)}))}))},e.Object.__uid=0)}(e),b=S.util.degreesToRadians,x={left:-.5,center:0,right:.5},C={top:-.5,center:0,bottom:.5},S.util.object.extend(S.Object.prototype,{translateToGivenOrigin:function(t,e,i,n,r){var o,a,s,l=t.x,c=t.y;return"string"==typeof e?e=x[e]:e-=.5,"string"==typeof n?n=x[n]:n-=.5,"string"==typeof i?i=C[i]:i-=.5,"string"==typeof r?r=C[r]:r-=.5,a=r-i,((o=n-e)||a)&&(s=this._getTransformedDimensions(),l=t.x+o*s.x,c=t.y+a*s.y),new S.Point(l,c)},translateToCenterPoint:function(t,e,i){var n=this.translateToGivenOrigin(t,e,i,"center","center");return this.angle?S.util.rotatePoint(n,t,b(this.angle)):n},translateToOriginPoint:function(t,e,i){var n=this.translateToGivenOrigin(t,"center","center",e,i);return this.angle?S.util.rotatePoint(n,t,b(this.angle)):n},getCenterPoint:function(){var t=new S.Point(this.left,this.top);return this.translateToCenterPoint(t,this.originX,this.originY)},getPointByOrigin:function(t,e){var i=this.getCenterPoint();return this.translateToOriginPoint(i,t,e)},toLocalPoint:function(t,e,i){var n,r,o=this.getCenterPoint();return n=void 0!==e&&void 0!==i?this.translateToGivenOrigin(o,"center","center",e,i):new S.Point(this.left,this.top),r=new S.Point(t.x,t.y),this.angle&&(r=S.util.rotatePoint(r,o,-b(this.angle))),r.subtractEquals(n)},setPositionByOrigin:function(t,e,i){var n=this.translateToCenterPoint(t,e,i),r=this.translateToOriginPoint(n,this.originX,this.originY);this.set("left",r.x),this.set("top",r.y)},adjustPosition:function(t){var e,i,n=b(this.angle),r=this.getScaledWidth(),o=S.util.cos(n)*r,a=S.util.sin(n)*r;e="string"==typeof this.originX?x[this.originX]:this.originX-.5,i="string"==typeof t?x[t]:t-.5,this.left+=o*(i-e),this.top+=a*(i-e),this.setCoords(),this.originX=t},_setOriginToCenter:function(){this._originalOriginX=this.originX,this._originalOriginY=this.originY;var t=this.getCenterPoint();this.originX="center",this.originY="center",this.left=t.x,this.top=t.y},_resetOrigin:function(){var t=this.translateToOriginPoint(this.getCenterPoint(),this._originalOriginX,this._originalOriginY);this.originX=this._originalOriginX,this.originY=this._originalOriginY,this.left=t.x,this.top=t.y,this._originalOriginX=null,this._originalOriginY=null},_getLeftTopCoords:function(){return this.translateToOriginPoint(this.getCenterPoint(),"left","top")}}),function(){var t=S.util,e=t.degreesToRadians,i=t.multiplyTransformMatrices,n=t.transformPoint;t.object.extend(S.Object.prototype,{oCoords:null,aCoords:null,lineCoords:null,ownMatrixCache:null,matrixCache:null,controls:{},_getCoords:function(t,e){return e?t?this.calcACoords():this.calcLineCoords():(this.aCoords&&this.lineCoords||this.setCoords(!0),t?this.aCoords:this.lineCoords)},getCoords:function(t,e){return i=this._getCoords(t,e),[new S.Point(i.tl.x,i.tl.y),new S.Point(i.tr.x,i.tr.y),new S.Point(i.br.x,i.br.y),new S.Point(i.bl.x,i.bl.y)];var i},intersectsWithRect:function(t,e,i,n){var r=this.getCoords(i,n);return"Intersection"===S.Intersection.intersectPolygonRectangle(r,t,e).status},intersectsWithObject:function(t,e,i){return"Intersection"===S.Intersection.intersectPolygonPolygon(this.getCoords(e,i),t.getCoords(e,i)).status||t.isContainedWithinObject(this,e,i)||this.isContainedWithinObject(t,e,i)},isContainedWithinObject:function(t,e,i){for(var n=this.getCoords(e,i),r=e?t.aCoords:t.lineCoords,o=0,a=t._getImageLines(r);o<4;o++)if(!t.containsPoint(n[o],a))return!1;return!0},isContainedWithinRect:function(t,e,i,n){var r=this.getBoundingRect(i,n);return r.left>=t.x&&r.left+r.width<=e.x&&r.top>=t.y&&r.top+r.height<=e.y},containsPoint:function(t,e,i,n){var r=this._getCoords(i,n),o=(e=e||this._getImageLines(r),this._findCrossPoints(t,e));return 0!==o&&o%2==1},isOnScreen:function(t){if(!this.canvas)return!1;var e=this.canvas.vptCoords.tl,i=this.canvas.vptCoords.br;return!!this.getCoords(!0,t).some((function(t){return t.x<=i.x&&t.x>=e.x&&t.y<=i.y&&t.y>=e.y}))||(!!this.intersectsWithRect(e,i,!0,t)||this._containsCenterOfCanvas(e,i,t))},_containsCenterOfCanvas:function(t,e,i){var n={x:(t.x+e.x)/2,y:(t.y+e.y)/2};return!!this.containsPoint(n,null,!0,i)},isPartiallyOnScreen:function(t){if(!this.canvas)return!1;var e=this.canvas.vptCoords.tl,i=this.canvas.vptCoords.br;return!!this.intersectsWithRect(e,i,!0,t)||this.getCoords(!0,t).every((function(t){return(t.x>=i.x||t.x<=e.x)&&(t.y>=i.y||t.y<=e.y)}))&&this._containsCenterOfCanvas(e,i,t)},_getImageLines:function(t){return{topline:{o:t.tl,d:t.tr},rightline:{o:t.tr,d:t.br},bottomline:{o:t.br,d:t.bl},leftline:{o:t.bl,d:t.tl}}},_findCrossPoints:function(t,e){var i,n,r,o=0;for(var a in e)if(!((r=e[a]).o.y=t.y&&r.d.y>=t.y||(r.o.x===r.d.x&&r.o.x>=t.x?n=r.o.x:(0,i=(r.d.y-r.o.y)/(r.d.x-r.o.x),n=-(t.y-0*t.x-(r.o.y-i*r.o.x))/(0-i)),n>=t.x&&(o+=1),2!==o)))break;return o},getBoundingRect:function(e,i){var n=this.getCoords(e,i);return t.makeBoundingBoxFromPoints(n)},getScaledWidth:function(){return this._getTransformedDimensions().x},getScaledHeight:function(){return this._getTransformedDimensions().y},_constrainScale:function(t){return Math.abs(t)\n')}},toSVG:function(t){return this._createBaseSVGMarkup(this._toSVG(t),{reviver:t})},toClipPathSVG:function(t){return"\t"+this._createBaseClipPathSVGMarkup(this._toSVG(t),{reviver:t})},_createBaseClipPathSVGMarkup:function(t,e){var i=(e=e||{}).reviver,n=e.additionalTransform||"",r=[this.getSvgTransform(!0,n),this.getSvgCommons()].join(""),o=t.indexOf("COMMON_PARTS");return t[o]=r,i?i(t.join("")):t.join("")},_createBaseSVGMarkup:function(t,e){var i,n,r=(e=e||{}).noStyle,o=e.reviver,a=r?"":'style="'+this.getSvgStyles()+'" ',s=e.withShadow?'style="'+this.getSvgFilter()+'" ':"",l=this.clipPath,c=this.strokeUniform?'vector-effect="non-scaling-stroke" ':"",u=l&&l.absolutePositioned,h=this.stroke,f=this.fill,g=this.shadow,d=[],v=t.indexOf("COMMON_PARTS"),p=e.additionalTransform;return l&&(l.clipPathId="CLIPPATH_"+S.Object.__uid++,n='\n'+l.toClipPathSVG(o)+"\n"),u&&d.push("\n"),d.push("\n"),i=[a,c,r?"":this.addPaintOrder()," ",p?'transform="'+p+'" ':""].join(""),t[v]=i,f&&f.toLive&&d.push(f.toSVG(this)),h&&h.toLive&&d.push(h.toSVG(this)),g&&d.push(g.toSVG(this)),l&&d.push(n),d.push(t.join("")),d.push("\n"),u&&d.push("\n"),o?o(d.join("")):d.join("")},addPaintOrder:function(){return"fill"!==this.paintFirst?' paint-order="'+this.paintFirst+'" ':""}})}(),function(){var t=S.util.object.extend,e="stateProperties";function i(e,i,n){var r={};n.forEach((function(t){r[t]=e[t]})),t(e[i],r,!0)}function n(t,e,i){if(t===e)return!0;if(Array.isArray(t)){if(!Array.isArray(e)||t.length!==e.length)return!1;for(var r=0,o=t.length;r=0;l--)if(r=s[l],this.isControlVisible(r)&&(n=this._getImageLines(e?this.oCoords[r].touchCorner:this.oCoords[r].corner),0!==(i=this._findCrossPoints({x:o,y:a},n))&&i%2==1))return this.__corner=r,r;return!1},forEachControl:function(t){for(var e in this.controls)t(this.controls[e],e,this)},_setCornerCoords:function(){var t=this.oCoords;for(var e in t){var i=this.controls[e];t[e].corner=i.calcCornerCoords(this.angle,this.cornerSize,t[e].x,t[e].y,!1),t[e].touchCorner=i.calcCornerCoords(this.angle,this.touchCornerSize,t[e].x,t[e].y,!0)}},drawSelectionBackground:function(e){if(!this.selectionBackgroundColor||this.canvas&&!this.canvas.interactive||this.canvas&&this.canvas._activeObject!==this)return this;e.save();var i=this.getCenterPoint(),n=this._calculateCurrentDimensions(),r=this.canvas.viewportTransform;return e.translate(i.x,i.y),e.scale(1/r[0],1/r[3]),e.rotate(t(this.angle)),e.fillStyle=this.selectionBackgroundColor,e.fillRect(-n.x/2,-n.y/2,n.x,n.y),e.restore(),this},drawBorders:function(t,e){e=e||{};var i=this._calculateCurrentDimensions(),n=this.borderScaleFactor,r=i.x+n,o=i.y+n,a=void 0!==e.hasControls?e.hasControls:this.hasControls,s=!1;return t.save(),t.strokeStyle=e.borderColor||this.borderColor,this._setLineDash(t,e.borderDashArray||this.borderDashArray),t.strokeRect(-r/2,-o/2,r,o),a&&(t.beginPath(),this.forEachControl((function(e,i,n){e.withConnection&&e.getVisibility(n,i)&&(s=!0,t.moveTo(e.x*r,e.y*o),t.lineTo(e.x*r+e.offsetX,e.y*o+e.offsetY))})),s&&t.stroke()),t.restore(),this},drawBordersInGroup:function(t,e,i){i=i||{};var n=S.util.sizeAfterTransform(this.width,this.height,e),r=this.strokeWidth,o=this.strokeUniform,a=this.borderScaleFactor,s=n.x+r*(o?this.canvas.getZoom():e.scaleX)+a,l=n.y+r*(o?this.canvas.getZoom():e.scaleY)+a;return t.save(),this._setLineDash(t,i.borderDashArray||this.borderDashArray),t.strokeStyle=i.borderColor||this.borderColor,t.strokeRect(-s/2,-l/2,s,l),t.restore(),this},drawControls:function(t,e){e=e||{},t.save();var i,n,r=this.canvas.getRetinaScaling();return t.setTransform(r,0,0,r,0,0),t.strokeStyle=t.fillStyle=e.cornerColor||this.cornerColor,this.transparentCorners||(t.strokeStyle=e.cornerStrokeColor||this.cornerStrokeColor),this._setLineDash(t,e.cornerDashArray||this.cornerDashArray),this.setCoords(),this.group&&(i=this.group.calcTransformMatrix()),this.forEachControl((function(r,o,a){n=a.oCoords[o],r.getVisibility(a,o)&&(i&&(n=S.util.transformPoint(n,i)),r.render(t,n.x,n.y,e,a))})),t.restore(),this},isControlVisible:function(t){return this.controls[t]&&this.controls[t].getVisibility(this,t)},setControlVisible:function(t,e){return this._controlsVisibility||(this._controlsVisibility={}),this._controlsVisibility[t]=e,this},setControlsVisibility:function(t){for(var e in t||(t={}),t)this.setControlVisible(e,t[e]);return this},onDeselect:function(){},onSelect:function(){}})}(),S.util.object.extend(S.StaticCanvas.prototype,{FX_DURATION:500,fxCenterObjectH:function(t,e){var i=function(){},n=(e=e||{}).onComplete||i,r=e.onChange||i,o=this;return S.util.animate({startValue:t.left,endValue:this.getCenter().left,duration:this.FX_DURATION,onChange:function(e){t.set("left",e),o.requestRenderAll(),r()},onComplete:function(){t.setCoords(),n()}}),this},fxCenterObjectV:function(t,e){var i=function(){},n=(e=e||{}).onComplete||i,r=e.onChange||i,o=this;return S.util.animate({startValue:t.top,endValue:this.getCenter().top,duration:this.FX_DURATION,onChange:function(e){t.set("top",e),o.requestRenderAll(),r()},onComplete:function(){t.setCoords(),n()}}),this},fxRemove:function(t,e){var i=function(){},n=(e=e||{}).onComplete||i,r=e.onChange||i,o=this;return S.util.animate({startValue:t.opacity,endValue:0,duration:this.FX_DURATION,onChange:function(e){t.set("opacity",e),o.requestRenderAll(),r()},onComplete:function(){o.remove(t),n()}}),this}}),S.util.object.extend(S.Object.prototype,{animate:function(){if(arguments[0]&&"object"==typeof arguments[0]){var t,e,i=[];for(t in arguments[0])i.push(t);for(var n=0,r=i.length;n-1||r&&o.colorProperties.indexOf(r[1])>-1,s=r?this.get(r[0])[r[1]]:this.get(t);"from"in i||(i.from=s),a||(e=~e.indexOf("=")?s+parseFloat(e.replace("=","")):parseFloat(e));var l={startValue:i.from,endValue:e,byValue:i.by,easing:i.easing,duration:i.duration,abort:i.abort&&function(t,e,n){return i.abort.call(o,t,e,n)},onChange:function(e,a,s){r?o[r[0]][r[1]]=e:o.set(t,e),n||i.onChange&&i.onChange(e,a,s)},onComplete:function(t,e,r){n||(o.setCoords(),i.onComplete&&i.onComplete(t,e,r))}};return a?S.util.animateColor(l.startValue,l.endValue,l.duration,l):S.util.animate(l)}}),function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.util.object.extend,n=e.util.object.clone,r={x1:1,x2:1,y1:1,y2:1};function o(t,e){var i=t.origin,n=t.axis1,r=t.axis2,o=t.dimension,a=e.nearest,s=e.center,l=e.farthest;return function(){switch(this.get(i)){case a:return Math.min(this.get(n),this.get(r));case s:return Math.min(this.get(n),this.get(r))+.5*this.get(o);case l:return Math.max(this.get(n),this.get(r))}}}e.Line?e.warn("fabric.Line is already defined"):(e.Line=e.util.createClass(e.Object,{type:"line",x1:0,y1:0,x2:0,y2:0,cacheProperties:e.Object.prototype.cacheProperties.concat("x1","x2","y1","y2"),initialize:function(t,e){t||(t=[0,0,0,0]),this.callSuper("initialize",e),this.set("x1",t[0]),this.set("y1",t[1]),this.set("x2",t[2]),this.set("y2",t[3]),this._setWidthHeight(e)},_setWidthHeight:function(t){t||(t={}),this.width=Math.abs(this.x2-this.x1),this.height=Math.abs(this.y2-this.y1),this.left="left"in t?t.left:this._getLeftToOriginX(),this.top="top"in t?t.top:this._getTopToOriginY()},_set:function(t,e){return this.callSuper("_set",t,e),void 0!==r[t]&&this._setWidthHeight(),this},_getLeftToOriginX:o({origin:"originX",axis1:"x1",axis2:"x2",dimension:"width"},{nearest:"left",center:"center",farthest:"right"}),_getTopToOriginY:o({origin:"originY",axis1:"y1",axis2:"y2",dimension:"height"},{nearest:"top",center:"center",farthest:"bottom"}),_render:function(t){t.beginPath();var e=this.calcLinePoints();t.moveTo(e.x1,e.y1),t.lineTo(e.x2,e.y2),t.lineWidth=this.strokeWidth;var i=t.strokeStyle;t.strokeStyle=this.stroke||t.fillStyle,this.stroke&&this._renderStroke(t),t.strokeStyle=i},_findCenterFromElement:function(){return{x:(this.x1+this.x2)/2,y:(this.y1+this.y2)/2}},toObject:function(t){return i(this.callSuper("toObject",t),this.calcLinePoints())},_getNonTransformedDimensions:function(){var t=this.callSuper("_getNonTransformedDimensions");return"butt"===this.strokeLineCap&&(0===this.width&&(t.y-=this.strokeWidth),0===this.height&&(t.x-=this.strokeWidth)),t},calcLinePoints:function(){var t=this.x1<=this.x2?-1:1,e=this.y1<=this.y2?-1:1,i=t*this.width*.5,n=e*this.height*.5;return{x1:i,x2:t*this.width*-.5,y1:n,y2:e*this.height*-.5}},_toSVG:function(){var t=this.calcLinePoints();return["\n']}}),e.Line.ATTRIBUTE_NAMES=e.SHARED_ATTRIBUTES.concat("x1 y1 x2 y2".split(" ")),e.Line.fromElement=function(t,n,r){r=r||{};var o=e.parseAttributes(t,e.Line.ATTRIBUTE_NAMES),a=[o.x1||0,o.y1||0,o.x2||0,o.y2||0];n(new e.Line(a,i(o,r)))},e.Line.fromObject=function(t,i){var r=n(t,!0);r.points=[t.x1,t.y1,t.x2,t.y2],e.Object._fromObject("Line",r,(function(t){delete t.points,i&&i(t)}),"points")})}(e),function(t){"use strict";var e=t.fabric||(t.fabric={}),i=Math.PI;e.Circle?e.warn("fabric.Circle is already defined."):(e.Circle=e.util.createClass(e.Object,{type:"circle",radius:0,startAngle:0,endAngle:2*i,cacheProperties:e.Object.prototype.cacheProperties.concat("radius","startAngle","endAngle"),_set:function(t,e){return this.callSuper("_set",t,e),"radius"===t&&this.setRadius(e),this},toObject:function(t){return this.callSuper("toObject",["radius","startAngle","endAngle"].concat(t))},_toSVG:function(){var t,n=(this.endAngle-this.startAngle)%(2*i);if(0===n)t=["\n'];else{var r=e.util.cos(this.startAngle)*this.radius,o=e.util.sin(this.startAngle)*this.radius,a=e.util.cos(this.endAngle)*this.radius,s=e.util.sin(this.endAngle)*this.radius,l=n>i?"1":"0";t=['\n"]}return t},_render:function(t){t.beginPath(),t.arc(0,0,this.radius,this.startAngle,this.endAngle,!1),this._renderPaintInOrder(t)},getRadiusX:function(){return this.get("radius")*this.get("scaleX")},getRadiusY:function(){return this.get("radius")*this.get("scaleY")},setRadius:function(t){return this.radius=t,this.set("width",2*t).set("height",2*t)}}),e.Circle.ATTRIBUTE_NAMES=e.SHARED_ATTRIBUTES.concat("cx cy r".split(" ")),e.Circle.fromElement=function(t,i){var n,r=e.parseAttributes(t,e.Circle.ATTRIBUTE_NAMES);if(!("radius"in(n=r)&&n.radius>=0))throw new Error("value of `r` attribute is required and can not be negative");r.left=(r.left||0)-r.radius,r.top=(r.top||0)-r.radius,i(new e.Circle(r))},e.Circle.fromObject=function(t,i){e.Object._fromObject("Circle",t,i)})}(e),function(t){"use strict";var e=t.fabric||(t.fabric={});e.Triangle?e.warn("fabric.Triangle is already defined"):(e.Triangle=e.util.createClass(e.Object,{type:"triangle",width:100,height:100,_render:function(t){var e=this.width/2,i=this.height/2;t.beginPath(),t.moveTo(-e,i),t.lineTo(0,-i),t.lineTo(e,i),t.closePath(),this._renderPaintInOrder(t)},_toSVG:function(){var t=this.width/2,e=this.height/2;return["']}}),e.Triangle.fromObject=function(t,i){return e.Object._fromObject("Triangle",t,i)})}(e),function(t){"use strict";var e=t.fabric||(t.fabric={}),i=2*Math.PI;e.Ellipse?e.warn("fabric.Ellipse is already defined."):(e.Ellipse=e.util.createClass(e.Object,{type:"ellipse",rx:0,ry:0,cacheProperties:e.Object.prototype.cacheProperties.concat("rx","ry"),initialize:function(t){this.callSuper("initialize",t),this.set("rx",t&&t.rx||0),this.set("ry",t&&t.ry||0)},_set:function(t,e){switch(this.callSuper("_set",t,e),t){case"rx":this.rx=e,this.set("width",2*e);break;case"ry":this.ry=e,this.set("height",2*e)}return this},getRx:function(){return this.get("rx")*this.get("scaleX")},getRy:function(){return this.get("ry")*this.get("scaleY")},toObject:function(t){return this.callSuper("toObject",["rx","ry"].concat(t))},_toSVG:function(){return["\n']},_render:function(t){t.beginPath(),t.save(),t.transform(1,0,0,this.ry/this.rx,0,0),t.arc(0,0,this.rx,0,i,!1),t.restore(),this._renderPaintInOrder(t)}}),e.Ellipse.ATTRIBUTE_NAMES=e.SHARED_ATTRIBUTES.concat("cx cy rx ry".split(" ")),e.Ellipse.fromElement=function(t,i){var n=e.parseAttributes(t,e.Ellipse.ATTRIBUTE_NAMES);n.left=(n.left||0)-n.rx,n.top=(n.top||0)-n.ry,i(new e.Ellipse(n))},e.Ellipse.fromObject=function(t,i){e.Object._fromObject("Ellipse",t,i)})}(e),function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.util.object.extend;e.Rect?e.warn("fabric.Rect is already defined"):(e.Rect=e.util.createClass(e.Object,{stateProperties:e.Object.prototype.stateProperties.concat("rx","ry"),type:"rect",rx:0,ry:0,cacheProperties:e.Object.prototype.cacheProperties.concat("rx","ry"),initialize:function(t){this.callSuper("initialize",t),this._initRxRy()},_initRxRy:function(){this.rx&&!this.ry?this.ry=this.rx:this.ry&&!this.rx&&(this.rx=this.ry)},_render:function(t){var e=this.rx?Math.min(this.rx,this.width/2):0,i=this.ry?Math.min(this.ry,this.height/2):0,n=this.width,r=this.height,o=-this.width/2,a=-this.height/2,s=0!==e||0!==i,l=.4477152502;t.beginPath(),t.moveTo(o+e,a),t.lineTo(o+n-e,a),s&&t.bezierCurveTo(o+n-l*e,a,o+n,a+l*i,o+n,a+i),t.lineTo(o+n,a+r-i),s&&t.bezierCurveTo(o+n,a+r-l*i,o+n-l*e,a+r,o+n-e,a+r),t.lineTo(o+e,a+r),s&&t.bezierCurveTo(o+l*e,a+r,o,a+r-l*i,o,a+r-i),t.lineTo(o,a+i),s&&t.bezierCurveTo(o,a+l*i,o+l*e,a,o+e,a),t.closePath(),this._renderPaintInOrder(t)},toObject:function(t){return this.callSuper("toObject",["rx","ry"].concat(t))},_toSVG:function(){return["\n']}}),e.Rect.ATTRIBUTE_NAMES=e.SHARED_ATTRIBUTES.concat("x y rx ry width height".split(" ")),e.Rect.fromElement=function(t,n,r){if(!t)return n(null);r=r||{};var o=e.parseAttributes(t,e.Rect.ATTRIBUTE_NAMES);o.left=o.left||0,o.top=o.top||0,o.height=o.height||0,o.width=o.width||0;var a=new e.Rect(i(r?e.util.object.clone(r):{},o));a.visible=a.visible&&a.width>0&&a.height>0,n(a)},e.Rect.fromObject=function(t,i){return e.Object._fromObject("Rect",t,i)})}(e),function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.util.object.extend,n=e.util.array.min,r=e.util.array.max,o=e.util.toFixed;e.Polyline?e.warn("fabric.Polyline is already defined"):(e.Polyline=e.util.createClass(e.Object,{type:"polyline",points:null,cacheProperties:e.Object.prototype.cacheProperties.concat("points"),initialize:function(t,e){e=e||{},this.points=t||[],this.callSuper("initialize",e),this._setPositionDimensions(e)},_setPositionDimensions:function(t){var e,i=this._calcDimensions(t);this.width=i.width,this.height=i.height,t.fromSVG||(e=this.translateToGivenOrigin({x:i.left-this.strokeWidth/2,y:i.top-this.strokeWidth/2},"left","top",this.originX,this.originY)),void 0===t.left&&(this.left=t.fromSVG?i.left:e.x),void 0===t.top&&(this.top=t.fromSVG?i.top:e.y),this.pathOffset={x:i.left+this.width/2,y:i.top+this.height/2}},_calcDimensions:function(){var t=this.points,e=n(t,"x")||0,i=n(t,"y")||0;return{left:e,top:i,width:(r(t,"x")||0)-e,height:(r(t,"y")||0)-i}},toObject:function(t){return i(this.callSuper("toObject",t),{points:this.points.concat()})},_toSVG:function(){for(var t=[],i=this.pathOffset.x,n=this.pathOffset.y,r=e.Object.NUM_FRACTION_DIGITS,a=0,s=this.points.length;a\n']},commonRender:function(t){var e,i=this.points.length,n=this.pathOffset.x,r=this.pathOffset.y;if(!i||isNaN(this.points[i-1].y))return!1;t.beginPath(),t.moveTo(this.points[0].x-n,this.points[0].y-r);for(var o=0;o"},toObject:function(t){return r(this.callSuper("toObject",t),{path:this.path.map((function(t){return t.slice()}))})},toDatalessObject:function(t){var e=this.toObject(["sourcePath"].concat(t));return e.sourcePath&&delete e.path,e},_toSVG:function(){return["\n"]},_getOffsetTransform:function(){var t=e.Object.NUM_FRACTION_DIGITS;return" translate("+a(-this.pathOffset.x,t)+", "+a(-this.pathOffset.y,t)+")"},toClipPathSVG:function(t){var e=this._getOffsetTransform();return"\t"+this._createBaseClipPathSVGMarkup(this._toSVG(),{reviver:t,additionalTransform:e})},toSVG:function(t){var e=this._getOffsetTransform();return this._createBaseSVGMarkup(this._toSVG(),{reviver:t,additionalTransform:e})},complexity:function(){return this.path.length},_calcDimensions:function(){for(var t,r,o=[],a=[],s=0,l=0,c=0,u=0,h=0,f=this.path.length;h"},addWithUpdate:function(t){var i=!!this.group;return this._restoreObjectsState(),e.util.resetObjectTransform(this),t&&(i&&e.util.removeTransformFromObject(t,this.group.calcTransformMatrix()),this._objects.push(t),t.group=this,t._set("canvas",this.canvas)),this._calcBounds(),this._updateObjectsCoords(),this.dirty=!0,i?this.group.addWithUpdate():this.setCoords(),this},removeWithUpdate:function(t){return this._restoreObjectsState(),e.util.resetObjectTransform(this),this.remove(t),this._calcBounds(),this._updateObjectsCoords(),this.setCoords(),this.dirty=!0,this},_onObjectAdded:function(t){this.dirty=!0,t.group=this,t._set("canvas",this.canvas)},_onObjectRemoved:function(t){this.dirty=!0,delete t.group},_set:function(t,i){var n=this._objects.length;if(this.useSetOnGroup)for(;n--;)this._objects[n].setOnGroup(t,i);if("canvas"===t)for(;n--;)this._objects[n]._set(t,i);e.Object.prototype._set.call(this,t,i)},toObject:function(t){var i=this.includeDefaultValues,n=this._objects.filter((function(t){return!t.excludeFromExport})).map((function(e){var n=e.includeDefaultValues;e.includeDefaultValues=i;var r=e.toObject(t);return e.includeDefaultValues=n,r})),r=e.Object.prototype.toObject.call(this,t);return r.objects=n,r},toDatalessObject:function(t){var i,n=this.sourcePath;if(n)i=n;else{var r=this.includeDefaultValues;i=this._objects.map((function(e){var i=e.includeDefaultValues;e.includeDefaultValues=r;var n=e.toDatalessObject(t);return e.includeDefaultValues=i,n}))}var o=e.Object.prototype.toDatalessObject.call(this,t);return o.objects=i,o},render:function(t){this._transformDone=!0,this.callSuper("render",t),this._transformDone=!1},shouldCache:function(){var t=e.Object.prototype.shouldCache.call(this);if(t)for(var i=0,n=this._objects.length;i\n"],i=0,n=this._objects.length;i\n"),e},getSvgStyles:function(){var t=void 0!==this.opacity&&1!==this.opacity?"opacity: "+this.opacity+";":"",e=this.visible?"":" visibility: hidden;";return[t,this.getSvgFilter(),e].join("")},toClipPathSVG:function(t){for(var e=[],i=0,n=this._objects.length;i"},shouldCache:function(){return!1},isOnACache:function(){return!1},_renderControls:function(t,e,i){t.save(),t.globalAlpha=this.isMoving?this.borderOpacityWhenMoving:1,this.callSuper("_renderControls",t,e),void 0===(i=i||{}).hasControls&&(i.hasControls=!1),i.forActiveSelection=!0;for(var n=0,r=this._objects.length;n\n','\t\n',"\n"),a=' clip-path="url(#imageCrop_'+l+')" '}if(this.imageSmoothing||(s='" image-rendering="optimizeSpeed'),i.push("\t\n"),this.stroke||this.strokeDashArray){var c=this.fill;this.fill=null,t=["\t\n'],this.fill=c}return e="fill"!==this.paintFirst?e.concat(t,i):e.concat(i,t)},getSrc:function(t){var e=t?this._element:this._originalElement;return e?e.toDataURL?e.toDataURL():this.srcFromAttribute?e.getAttribute("src"):e.src:this.src||""},setSrc:function(t,e,i){return S.util.loadImage(t,(function(t,n){this.setElement(t,i),this._setWidthHeight(),e&&e(this,n)}),this,i&&i.crossOrigin),this},toString:function(){return'#'},applyResizeFilters:function(){var t=this.resizeFilter,e=this.minimumScaleTrigger,i=this.getTotalObjectScaling(),n=i.scaleX,r=i.scaleY,o=this._filteredEl||this._originalElement;if(this.group&&this.set("dirty",!0),!t||n>e&&r>e)return this._element=o,this._filterScalingX=1,this._filterScalingY=1,this._lastScaleX=n,void(this._lastScaleY=r);S.filterBackend||(S.filterBackend=S.initFilterBackend());var a=S.util.createCanvasElement(),s=this._filteredEl?this.cacheKey+"_filtered":this.cacheKey,l=o.width,c=o.height;a.width=l,a.height=c,this._element=a,this._lastScaleX=t.scaleX=n,this._lastScaleY=t.scaleY=r,S.filterBackend.applyFilters([t],o,l,c,this._element,s),this._filterScalingX=a.width/this._originalElement.width,this._filterScalingY=a.height/this._originalElement.height},applyFilters:function(t){if(t=(t=t||this.filters||[]).filter((function(t){return t&&!t.isNeutralState()})),this.set("dirty",!0),this.removeTexture(this.cacheKey+"_filtered"),0===t.length)return this._element=this._originalElement,this._filteredEl=null,this._filterScalingX=1,this._filterScalingY=1,this;var e=this._originalElement,i=e.naturalWidth||e.width,n=e.naturalHeight||e.height;if(this._element===this._originalElement){var r=S.util.createCanvasElement();r.width=i,r.height=n,this._element=r,this._filteredEl=r}else this._element=this._filteredEl,this._filteredEl.getContext("2d").clearRect(0,0,i,n),this._lastScaleX=1,this._lastScaleY=1;return S.filterBackend||(S.filterBackend=S.initFilterBackend()),S.filterBackend.applyFilters(t,this._originalElement,i,n,this._element,this.cacheKey),this._originalElement.width===this._element.width&&this._originalElement.height===this._element.height||(this._filterScalingX=this._element.width/this._originalElement.width,this._filterScalingY=this._element.height/this._originalElement.height),this},_render:function(t){S.util.setImageSmoothing(t,this.imageSmoothing),!0!==this.isMoving&&this.resizeFilter&&this._needsResize()&&this.applyResizeFilters(),this._stroke(t),this._renderPaintInOrder(t)},drawCacheOnCanvas:function(t){S.util.setImageSmoothing(t,this.imageSmoothing),S.Object.prototype.drawCacheOnCanvas.call(this,t)},shouldCache:function(){return this.needsItsOwnCache()},_renderFill:function(t){var e=this._element;if(e){var i=this._filterScalingX,n=this._filterScalingY,r=this.width,o=this.height,a=Math.min,s=Math.max,l=s(this.cropX,0),c=s(this.cropY,0),u=e.naturalWidth||e.width,h=e.naturalHeight||e.height,f=l*i,g=c*n,d=a(r*i,u-f),v=a(o*n,h-g),p=-r/2,m=-o/2,y=a(r,u/i-l),b=a(o,h/n-c);e&&t.drawImage(e,f,g,d,v,p,m,y,b)}},_needsResize:function(){var t=this.getTotalObjectScaling();return t.scaleX!==this._lastScaleX||t.scaleY!==this._lastScaleY},_resetWidthHeight:function(){this.set(this.getOriginalSize())},_initElement:function(t,e){this.setElement(S.util.getById(t),e),S.util.addClass(this.getElement(),S.Image.CSS_CANVAS)},_initConfig:function(t){t||(t={}),this.setOptions(t),this._setWidthHeight(t)},_initFilters:function(t,e){t&&t.length?S.util.enlivenObjects(t,(function(t){e&&e(t)}),"fabric.Image.filters"):e&&e()},_setWidthHeight:function(t){t||(t={});var e=this.getElement();this.width=t.width||e.naturalWidth||e.width||0,this.height=t.height||e.naturalHeight||e.height||0},parsePreserveAspectRatioAttribute:function(){var t,e=S.util.parsePreserveAspectRatioAttribute(this.preserveAspectRatio||""),i=this._element.width,n=this._element.height,r=1,o=1,a=0,s=0,l=0,c=0,u=this.width,h=this.height,f={width:u,height:h};return!e||"none"===e.alignX&&"none"===e.alignY?(r=u/i,o=h/n):("meet"===e.meetOrSlice&&(t=(u-i*(r=o=S.util.findScaleToFit(this._element,f)))/2,"Min"===e.alignX&&(a=-t),"Max"===e.alignX&&(a=t),t=(h-n*o)/2,"Min"===e.alignY&&(s=-t),"Max"===e.alignY&&(s=t)),"slice"===e.meetOrSlice&&(t=i-u/(r=o=S.util.findScaleToCover(this._element,f)),"Mid"===e.alignX&&(l=t/2),"Max"===e.alignX&&(l=t),t=n-h/o,"Mid"===e.alignY&&(c=t/2),"Max"===e.alignY&&(c=t),i=u/r,n=h/o)),{width:i,height:n,scaleX:r,scaleY:o,offsetLeft:a,offsetTop:s,cropX:l,cropY:c}}}),S.Image.CSS_CANVAS="canvas-img",S.Image.prototype.getSvgSrc=S.Image.prototype.getSrc,S.Image.fromObject=function(t,e){var i=S.util.object.clone(t);S.util.loadImage(i.src,(function(t,n){n?e&&e(null,!0):S.Image.prototype._initFilters.call(i,i.filters,(function(n){i.filters=n||[],S.Image.prototype._initFilters.call(i,[i.resizeFilter],(function(n){i.resizeFilter=n[0],S.util.enlivenObjects([i.clipPath],(function(n){i.clipPath=n[0];var r=new S.Image(t,i);e(r,!1)}))}))}))}),null,i.crossOrigin)},S.Image.fromURL=function(t,e,i){S.util.loadImage(t,(function(t,n){e&&e(new S.Image(t,i),n)}),null,i&&i.crossOrigin)},S.Image.ATTRIBUTE_NAMES=S.SHARED_ATTRIBUTES.concat("x y width height preserveAspectRatio xlink:href crossOrigin image-rendering".split(" ")),S.Image.fromElement=function(t,i,n){var r=S.parseAttributes(t,S.Image.ATTRIBUTE_NAMES);S.Image.fromURL(r["xlink:href"],i,e(n?S.util.object.clone(n):{},r))})}(e),S.util.object.extend(S.Object.prototype,{_getAngleValueForStraighten:function(){var t=this.angle%360;return t>0?90*Math.round((t-1)/90):90*Math.round(t/90)},straighten:function(){return this.rotate(this._getAngleValueForStraighten()),this},fxStraighten:function(t){var e=function(){},i=(t=t||{}).onComplete||e,n=t.onChange||e,r=this;return S.util.animate({startValue:this.get("angle"),endValue:this._getAngleValueForStraighten(),duration:this.FX_DURATION,onChange:function(t){r.rotate(t),n()},onComplete:function(){r.setCoords(),i()}}),this}}),S.util.object.extend(S.StaticCanvas.prototype,{straightenObject:function(t){return t.straighten(),this.requestRenderAll(),this},fxStraightenObject:function(t){return t.fxStraighten({onChange:this.requestRenderAllBound}),this}}),function(){"use strict";function t(t,e){var i="precision "+e+" float;\nvoid main(){}",n=t.createShader(t.FRAGMENT_SHADER);return t.shaderSource(n,i),t.compileShader(n),!!t.getShaderParameter(n,t.COMPILE_STATUS)}function e(t){t&&t.tileSize&&(this.tileSize=t.tileSize),this.setupGLContext(this.tileSize,this.tileSize),this.captureGPUInfo()}S.isWebglSupported=function(e){if(S.isLikelyNode)return!1;e=e||S.WebglFilterBackend.prototype.tileSize;var i=document.createElement("canvas"),n=i.getContext("webgl")||i.getContext("experimental-webgl"),r=!1;if(n){S.maxTextureSize=n.getParameter(n.MAX_TEXTURE_SIZE),r=S.maxTextureSize>=e;for(var o=["highp","mediump","lowp"],a=0;a<3;a++)if(t(n,o[a])){S.webGlPrecision=o[a];break}}return this.isSupported=r,r},S.WebglFilterBackend=e,e.prototype={tileSize:2048,resources:{},setupGLContext:function(t,e){this.dispose(),this.createWebGLCanvas(t,e),this.aPosition=new Float32Array([0,0,0,1,1,0,1,1]),this.chooseFastestCopyGLTo2DMethod(t,e)},chooseFastestCopyGLTo2DMethod:function(t,e){var i,n=void 0!==window.performance;try{new ImageData(1,1),i=!0}catch(t){i=!1}var r="undefined"!=typeof ArrayBuffer,o="undefined"!=typeof Uint8ClampedArray;if(n&&i&&r&&o){var a=S.util.createCanvasElement(),s=new ArrayBuffer(t*e*4);if(S.forceGLPutImageData)return this.imageBuffer=s,void(this.copyGLTo2D=T);var l,c,u={imageBuffer:s,destinationWidth:t,destinationHeight:e,targetCanvas:a};a.width=t,a.height=e,l=window.performance.now(),k.call(u,this.gl,u),c=window.performance.now()-l,l=window.performance.now(),T.call(u,this.gl,u),c>window.performance.now()-l?(this.imageBuffer=s,this.copyGLTo2D=T):this.copyGLTo2D=k}},createWebGLCanvas:function(t,e){var i=S.util.createCanvasElement();i.width=t,i.height=e;var n={alpha:!0,premultipliedAlpha:!1,depth:!1,stencil:!1,antialias:!1},r=i.getContext("webgl",n);r||(r=i.getContext("experimental-webgl",n)),r&&(r.clearColor(0,0,0,0),this.canvas=i,this.gl=r)},applyFilters:function(t,e,i,n,r,o){var a,s=this.gl;o&&(a=this.getCachedTexture(o,e));var l={originalWidth:e.width||e.originalWidth,originalHeight:e.height||e.originalHeight,sourceWidth:i,sourceHeight:n,destinationWidth:i,destinationHeight:n,context:s,sourceTexture:this.createTexture(s,i,n,!a&&e),targetTexture:this.createTexture(s,i,n),originalTexture:a||this.createTexture(s,i,n,!a&&e),passes:t.length,webgl:!0,aPosition:this.aPosition,programCache:this.programCache,pass:0,filterBackend:this,targetCanvas:r},c=s.createFramebuffer();return s.bindFramebuffer(s.FRAMEBUFFER,c),t.forEach((function(t){t&&t.applyTo(l)})),function(t){var e=t.targetCanvas,i=e.width,n=e.height,r=t.destinationWidth,o=t.destinationHeight;i===r&&n===o||(e.width=r,e.height=o)}(l),this.copyGLTo2D(s,l),s.bindTexture(s.TEXTURE_2D,null),s.deleteTexture(l.sourceTexture),s.deleteTexture(l.targetTexture),s.deleteFramebuffer(c),r.getContext("2d").setTransform(1,0,0,1,0,0),l},dispose:function(){this.canvas&&(this.canvas=null,this.gl=null),this.clearWebGLCaches()},clearWebGLCaches:function(){this.programCache={},this.textureCache={}},createTexture:function(t,e,i,n){var r=t.createTexture();return t.bindTexture(t.TEXTURE_2D,r),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MAG_FILTER,t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_MIN_FILTER,t.NEAREST),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_S,t.CLAMP_TO_EDGE),t.texParameteri(t.TEXTURE_2D,t.TEXTURE_WRAP_T,t.CLAMP_TO_EDGE),n?t.texImage2D(t.TEXTURE_2D,0,t.RGBA,t.RGBA,t.UNSIGNED_BYTE,n):t.texImage2D(t.TEXTURE_2D,0,t.RGBA,e,i,0,t.RGBA,t.UNSIGNED_BYTE,null),r},getCachedTexture:function(t,e){if(this.textureCache[t])return this.textureCache[t];var i=this.createTexture(this.gl,e.width,e.height,e);return this.textureCache[t]=i,i},evictCachesForKey:function(t){this.textureCache[t]&&(this.gl.deleteTexture(this.textureCache[t]),delete this.textureCache[t])},copyGLTo2D:k,captureGPUInfo:function(){if(this.gpuInfo)return this.gpuInfo;var t=this.gl,e={renderer:"",vendor:""};if(!t)return e;var i=t.getExtension("WEBGL_debug_renderer_info");if(i){var n=t.getParameter(i.UNMASKED_RENDERER_WEBGL),r=t.getParameter(i.UNMASKED_VENDOR_WEBGL);n&&(e.renderer=n.toLowerCase()),r&&(e.vendor=r.toLowerCase())}return this.gpuInfo=e,e}}}(),function(){"use strict";var t=function(){};function e(){}S.Canvas2dFilterBackend=e,e.prototype={evictCachesForKey:t,dispose:t,clearWebGLCaches:t,resources:{},applyFilters:function(t,e,i,n,r){var o=r.getContext("2d");o.drawImage(e,0,0,i,n);var a={sourceWidth:i,sourceHeight:n,imageData:o.getImageData(0,0,i,n),originalEl:e,originalImageData:o.getImageData(0,0,i,n),canvasEl:r,ctx:o,filterBackend:this};return t.forEach((function(t){t.applyTo(a)})),a.imageData.width===i&&a.imageData.height===n||(r.width=a.imageData.width,r.height=a.imageData.height),o.putImageData(a.imageData,0,0),a}}}(),S.Image=S.Image||{},S.Image.filters=S.Image.filters||{},S.Image.filters.BaseFilter=S.util.createClass({type:"BaseFilter",vertexSource:"attribute vec2 aPosition;\nvarying vec2 vTexCoord;\nvoid main() {\nvTexCoord = aPosition;\ngl_Position = vec4(aPosition * 2.0 - 1.0, 0.0, 1.0);\n}",fragmentSource:"precision highp float;\nvarying vec2 vTexCoord;\nuniform sampler2D uTexture;\nvoid main() {\ngl_FragColor = texture2D(uTexture, vTexCoord);\n}",initialize:function(t){t&&this.setOptions(t)},setOptions:function(t){for(var e in t)this[e]=t[e]},createProgram:function(t,e,i){e=e||this.fragmentSource,i=i||this.vertexSource,"highp"!==S.webGlPrecision&&(e=e.replace(/precision highp float/g,"precision "+S.webGlPrecision+" float"));var n=t.createShader(t.VERTEX_SHADER);if(t.shaderSource(n,i),t.compileShader(n),!t.getShaderParameter(n,t.COMPILE_STATUS))throw new Error("Vertex shader compile error for "+this.type+": "+t.getShaderInfoLog(n));var r=t.createShader(t.FRAGMENT_SHADER);if(t.shaderSource(r,e),t.compileShader(r),!t.getShaderParameter(r,t.COMPILE_STATUS))throw new Error("Fragment shader compile error for "+this.type+": "+t.getShaderInfoLog(r));var o=t.createProgram();if(t.attachShader(o,n),t.attachShader(o,r),t.linkProgram(o),!t.getProgramParameter(o,t.LINK_STATUS))throw new Error('Shader link error for "${this.type}" '+t.getProgramInfoLog(o));var a=this.getAttributeLocations(t,o),s=this.getUniformLocations(t,o)||{};return s.uStepW=t.getUniformLocation(o,"uStepW"),s.uStepH=t.getUniformLocation(o,"uStepH"),{program:o,attributeLocations:a,uniformLocations:s}},getAttributeLocations:function(t,e){return{aPosition:t.getAttribLocation(e,"aPosition")}},getUniformLocations:function(){return{}},sendAttributeData:function(t,e,i){var n=e.aPosition,r=t.createBuffer();t.bindBuffer(t.ARRAY_BUFFER,r),t.enableVertexAttribArray(n),t.vertexAttribPointer(n,2,t.FLOAT,!1,0,0),t.bufferData(t.ARRAY_BUFFER,i,t.STATIC_DRAW)},_setupFrameBuffer:function(t){var e,i,n=t.context;t.passes>1?(e=t.destinationWidth,i=t.destinationHeight,t.sourceWidth===e&&t.sourceHeight===i||(n.deleteTexture(t.targetTexture),t.targetTexture=t.filterBackend.createTexture(n,e,i)),n.framebufferTexture2D(n.FRAMEBUFFER,n.COLOR_ATTACHMENT0,n.TEXTURE_2D,t.targetTexture,0)):(n.bindFramebuffer(n.FRAMEBUFFER,null),n.finish())},_swapTextures:function(t){t.passes--,t.pass++;var e=t.targetTexture;t.targetTexture=t.sourceTexture,t.sourceTexture=e},isNeutralState:function(){var t=this.mainParameter,e=S.Image.filters[this.type].prototype;if(t){if(Array.isArray(e[t])){for(var i=e[t].length;i--;)if(this[t][i]!==e[t][i])return!1;return!0}return e[t]===this[t]}return!1},applyTo:function(t){t.webgl?(this._setupFrameBuffer(t),this.applyToWebGL(t),this._swapTextures(t)):this.applyTo2d(t)},retrieveShader:function(t){return t.programCache.hasOwnProperty(this.type)||(t.programCache[this.type]=this.createProgram(t.context)),t.programCache[this.type]},applyToWebGL:function(t){var e=t.context,i=this.retrieveShader(t);0===t.pass&&t.originalTexture?e.bindTexture(e.TEXTURE_2D,t.originalTexture):e.bindTexture(e.TEXTURE_2D,t.sourceTexture),e.useProgram(i.program),this.sendAttributeData(e,i.attributeLocations,t.aPosition),e.uniform1f(i.uniformLocations.uStepW,1/t.sourceWidth),e.uniform1f(i.uniformLocations.uStepH,1/t.sourceHeight),this.sendUniformData(e,i.uniformLocations),e.viewport(0,0,t.destinationWidth,t.destinationHeight),e.drawArrays(e.TRIANGLE_STRIP,0,4)},bindAdditionalTexture:function(t,e,i){t.activeTexture(i),t.bindTexture(t.TEXTURE_2D,e),t.activeTexture(t.TEXTURE0)},unbindAdditionalTexture:function(t,e){t.activeTexture(e),t.bindTexture(t.TEXTURE_2D,null),t.activeTexture(t.TEXTURE0)},getMainParameter:function(){return this[this.mainParameter]},setMainParameter:function(t){this[this.mainParameter]=t},sendUniformData:function(){},createHelpLayer:function(t){if(!t.helpLayer){var e=document.createElement("canvas");e.width=t.sourceWidth,e.height=t.sourceHeight,t.helpLayer=e}},toObject:function(){var t={type:this.type},e=this.mainParameter;return e&&(t[e]=this[e]),t},toJSON:function(){return this.toObject()}}),S.Image.filters.BaseFilter.fromObject=function(t,e){var i=new S.Image.filters[t.type](t);return e&&e(i),i},function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.Image.filters,n=e.util.createClass;i.ColorMatrix=n(i.BaseFilter,{type:"ColorMatrix",fragmentSource:"precision highp float;\nuniform sampler2D uTexture;\nvarying vec2 vTexCoord;\nuniform mat4 uColorMatrix;\nuniform vec4 uConstants;\nvoid main() {\nvec4 color = texture2D(uTexture, vTexCoord);\ncolor *= uColorMatrix;\ncolor += uConstants;\ngl_FragColor = color;\n}",matrix:[1,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,1,0],mainParameter:"matrix",colorsOnly:!0,initialize:function(t){this.callSuper("initialize",t),this.matrix=this.matrix.slice(0)},applyTo2d:function(t){var e,i,n,r,o,a=t.imageData.data,s=a.length,l=this.matrix,c=this.colorsOnly;for(o=0;o=x||a<0||a>=b||(l=4*(s*b+a),c=p[g*m+f],e+=v[l]*c,i+=v[l+1]*c,n+=v[l+2]*c,_||(r+=v[l+3]*c));I[o]=e,I[o+1]=i,I[o+2]=n,I[o+3]=_?v[o+3]:r}t.imageData=C},getUniformLocations:function(t,e){return{uMatrix:t.getUniformLocation(e,"uMatrix"),uOpaque:t.getUniformLocation(e,"uOpaque"),uHalfSize:t.getUniformLocation(e,"uHalfSize"),uSize:t.getUniformLocation(e,"uSize")}},sendUniformData:function(t,e){t.uniform1fv(e.uMatrix,this.matrix)},toObject:function(){return i(this.callSuper("toObject"),{opaque:this.opaque,matrix:this.matrix})}}),e.Image.filters.Convolute.fromObject=e.Image.filters.BaseFilter.fromObject}(e),function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.Image.filters,n=e.util.createClass;i.Grayscale=n(i.BaseFilter,{type:"Grayscale",fragmentSource:{average:"precision highp float;\nuniform sampler2D uTexture;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 color = texture2D(uTexture, vTexCoord);\nfloat average = (color.r + color.b + color.g) / 3.0;\ngl_FragColor = vec4(average, average, average, color.a);\n}",lightness:"precision highp float;\nuniform sampler2D uTexture;\nuniform int uMode;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 col = texture2D(uTexture, vTexCoord);\nfloat average = (max(max(col.r, col.g),col.b) + min(min(col.r, col.g),col.b)) / 2.0;\ngl_FragColor = vec4(average, average, average, col.a);\n}",luminosity:"precision highp float;\nuniform sampler2D uTexture;\nuniform int uMode;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 col = texture2D(uTexture, vTexCoord);\nfloat average = 0.21 * col.r + 0.72 * col.g + 0.07 * col.b;\ngl_FragColor = vec4(average, average, average, col.a);\n}"},mode:"average",mainParameter:"mode",applyTo2d:function(t){var e,i,n=t.imageData.data,r=n.length,o=this.mode;for(e=0;ec[0]&&r>c[1]&&o>c[2]&&n 0.0) {\n"+this.fragmentSource[t]+"}\n}"},retrieveShader:function(t){var e,i=this.type+"_"+this.mode;return t.programCache.hasOwnProperty(i)||(e=this.buildSource(this.mode),t.programCache[i]=this.createProgram(t.context,e)),t.programCache[i]},applyTo2d:function(t){var i,n,r,o,a,s,l,c=t.imageData.data,u=c.length,h=1-this.alpha;i=(l=new e.Color(this.color).getSource())[0]*this.alpha,n=l[1]*this.alpha,r=l[2]*this.alpha;for(var f=0;f=t||e<=-t)return 0;if(e<1.1920929e-7&&e>-1.1920929e-7)return 1;var i=(e*=Math.PI)/t;return s(e)/e*s(i)/i}},applyTo2d:function(t){var e=t.imageData,i=this.scaleX,n=this.scaleY;this.rcpScaleX=1/i,this.rcpScaleY=1/n;var r,o=e.width,s=e.height,l=a(o*i),c=a(s*n);"sliceHack"===this.resizeType?r=this.sliceByTwo(t,o,s,l,c):"hermite"===this.resizeType?r=this.hermiteFastResize(t,o,s,l,c):"bilinear"===this.resizeType?r=this.bilinearFiltering(t,o,s,l,c):"lanczos"===this.resizeType&&(r=this.lanczosResize(t,o,s,l,c)),t.imageData=r},sliceByTwo:function(t,i,r,o,a){var s,l,c=t.imageData,u=.5,h=!1,f=!1,g=i*u,d=r*u,v=e.filterBackend.resources,p=0,m=0,y=i,b=0;for(v.sliceByTwo||(v.sliceByTwo=document.createElement("canvas")),((s=v.sliceByTwo).width<1.5*i||s.height=e)){O=n(1e3*o(M-C.x)),x[O]||(x[O]={});for(var L=I.y-b;L<=I.y+b;L++)L<0||L>=a||(E=n(1e3*o(L-C.y)),x[O][E]||(x[O][E]=g(r(i(O*p,2)+i(E*m,2))/1e3)),(S=x[O][E])>0&&(k+=S,T+=S*u[w=4*(L*e+M)],D+=S*u[w+1],A+=S*u[w+2],j+=S*u[w+3]))}f[w=4*(_*s+l)]=T/k,f[w+1]=D/k,f[w+2]=A/k,f[w+3]=j/k}return++l1&&E<-1||(b=2*E*E*E-3*E*E+1)>0&&(S+=b*g[(O=4*(j+k*e))+3],C+=b,g[O+3]<255&&(b=b*g[O+3]/250),I+=b*g[O],_+=b*g[O+1],M+=b*g[O+2],x+=b)}v[y]=I/x,v[y+1]=_/x,v[y+2]=M/x,v[y+3]=S/C}return d},toObject:function(){return{type:this.type,scaleX:this.scaleX,scaleY:this.scaleY,resizeType:this.resizeType,lanczosLobes:this.lanczosLobes}}}),e.Image.filters.Resize.fromObject=e.Image.filters.BaseFilter.fromObject}(e),function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.Image.filters,n=e.util.createClass;i.Contrast=n(i.BaseFilter,{type:"Contrast",fragmentSource:"precision highp float;\nuniform sampler2D uTexture;\nuniform float uContrast;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 color = texture2D(uTexture, vTexCoord);\nfloat contrastF = 1.015 * (uContrast + 1.0) / (1.0 * (1.015 - uContrast));\ncolor.rgb = contrastF * (color.rgb - 0.5) + 0.5;\ngl_FragColor = color;\n}",contrast:0,mainParameter:"contrast",applyTo2d:function(t){if(0!==this.contrast){var e,i=t.imageData.data,n=i.length,r=Math.floor(255*this.contrast),o=259*(r+255)/(255*(259-r));for(e=0;e1&&(e=1/this.aspectRatio):this.aspectRatio<1&&(e=this.aspectRatio),t=e*this.blur*.12,this.horizontal?i[0]=t:i[1]=t,i}}),i.Blur.fromObject=e.Image.filters.BaseFilter.fromObject}(e),function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.Image.filters,n=e.util.createClass;i.Gamma=n(i.BaseFilter,{type:"Gamma",fragmentSource:"precision highp float;\nuniform sampler2D uTexture;\nuniform vec3 uGamma;\nvarying vec2 vTexCoord;\nvoid main() {\nvec4 color = texture2D(uTexture, vTexCoord);\nvec3 correction = (1.0 / uGamma);\ncolor.r = pow(color.r, correction.r);\ncolor.g = pow(color.g, correction.g);\ncolor.b = pow(color.b, correction.b);\ngl_FragColor = color;\ngl_FragColor.rgb *= color.a;\n}",gamma:[1,1,1],mainParameter:"gamma",initialize:function(t){this.gamma=[1,1,1],i.BaseFilter.prototype.initialize.call(this,t)},applyTo2d:function(t){var e,i=t.imageData.data,n=this.gamma,r=i.length,o=1/n[0],a=1/n[1],s=1/n[2];for(this.rVals||(this.rVals=new Uint8Array(256),this.gVals=new Uint8Array(256),this.bVals=new Uint8Array(256)),e=0,r=256;e'},_getCacheCanvasDimensions:function(){var t=this.callSuper("_getCacheCanvasDimensions"),e=this.fontSize;return t.width+=e*t.zoomX,t.height+=e*t.zoomY,t},_render:function(t){var e=this.path;e&&!e.isNotVisible()&&e._render(t),this._setTextStyles(t),this._renderTextLinesBackground(t),this._renderTextDecoration(t,"underline"),this._renderText(t),this._renderTextDecoration(t,"overline"),this._renderTextDecoration(t,"linethrough")},_renderText:function(t){"stroke"===this.paintFirst?(this._renderTextStroke(t),this._renderTextFill(t)):(this._renderTextFill(t),this._renderTextStroke(t))},_setTextStyles:function(t,e,i){t.textBaseline="alphabetic",t.font=this._getFontDeclaration(e,i)},calcTextWidth:function(){for(var t=this.getLineWidth(0),e=1,i=this._textLines.length;et&&(t=n)}return t},_renderTextLine:function(t,e,i,n,r,o){this._renderChars(t,e,i,n,r,o)},_renderTextLinesBackground:function(t){if(this.textBackgroundColor||this.styleHas("textBackgroundColor")){for(var e,i,n,r,o,a,s,l=t.fillStyle,c=this._getLeftOffset(),u=this._getTopOffset(),h=0,f=0,g=this.path,d=0,v=this._textLines.length;d=0:is?h%=s:h<0&&(h+=s),this._setGraphemeOnPath(h,o,a),h+=o.kernedWidth}return{width:l,numOfSpaces:0}},_setGraphemeOnPath:function(t,i,n){var r=t+i.kernedWidth/2,o=this.path,a=e.util.getPointOnPath(o.path,r,o.segmentsInfo);i.renderLeft=a.x-n.x,i.renderTop=a.y-n.y,i.angle=a.angle+("right"===this.pathSide?Math.PI:0)},_getGraphemeBox:function(t,e,i,n,r){var o,a=this.getCompleteStyleDeclaration(e,i),s=n?this.getCompleteStyleDeclaration(e,i-1):{},l=this._measureChar(t,a,n,s),c=l.kernedWidth,u=l.width;0!==this.charSpacing&&(u+=o=this._getWidthOfCharSpacing(),c+=o);var h={width:u,left:0,height:a.fontSize,kernedWidth:c,deltaY:a.deltaY};if(i>0&&!r){var f=this.__charBounds[e][i-1];h.left=f.left+f.width+l.kernedWidth-l.width}return h},getHeightOfLine:function(t){if(this.__lineHeights[t])return this.__lineHeights[t];for(var e=this._textLines[t],i=this.getHeightOfChar(t,0),n=1,r=e.length;n0){var k=y+o+h;"rtl"===this.direction&&(k=this.width-k-f),c&&m&&(t.fillStyle=m,t.fillRect(k,u+I*n+a,f,this.fontSize/15)),h=g.left,f=g.width,c=d,m=p,n=r,a=s}else f+=g.kernedWidth;k=y+o+h;"rtl"===this.direction&&(k=this.width-k-f),t.fillStyle=p,d&&p&&t.fillRect(k,u+I*n+a,f-C,this.fontSize/15),b+=i}else b+=i;this._removeShadow(t)}},_getFontDeclaration:function(t,i){var n=t||this,r=this.fontFamily,o=e.Text.genericFonts.indexOf(r.toLowerCase())>-1,a=void 0===r||r.indexOf("'")>-1||r.indexOf(",")>-1||r.indexOf('"')>-1||o?n.fontFamily:'"'+n.fontFamily+'"';return[e.isLikelyNode?n.fontWeight:n.fontStyle,e.isLikelyNode?n.fontStyle:n.fontWeight,i?this.CACHE_FONT_SIZE+"px":n.fontSize+"px",a].join(" ")},render:function(t){this.visible&&(this.canvas&&this.canvas.skipOffscreen&&!this.group&&!this.isOnScreen()||(this._shouldClearDimensionCache()&&this.initDimensions(),this.callSuper("render",t)))},_splitTextIntoLines:function(t){for(var i=t.split(this._reNewline),n=new Array(i.length),r=["\n"],o=[],a=0;a-1&&(t.underline=!0),t.textDecoration.indexOf("line-through")>-1&&(t.linethrough=!0),t.textDecoration.indexOf("overline")>-1&&(t.overline=!0),delete t.textDecoration)}S.IText=S.util.createClass(S.Text,S.Observable,{type:"i-text",selectionStart:0,selectionEnd:0,selectionColor:"rgba(17,119,255,0.3)",isEditing:!1,editable:!0,editingBorderColor:"rgba(102,153,255,0.25)",cursorWidth:2,cursorColor:"",cursorDelay:1e3,cursorDuration:600,caching:!0,hiddenTextareaContainer:null,_reSpace:/\s|\n/,_currentCursorOpacity:0,_selectionDirection:null,_abortCursorAnimation:!1,__widthOfSpace:[],inCompositionMode:!1,initialize:function(t,e){this.callSuper("initialize",t,e),this.initBehavior()},setSelectionStart:function(t){t=Math.max(t,0),this._updateAndFire("selectionStart",t)},setSelectionEnd:function(t){t=Math.min(t,this.text.length),this._updateAndFire("selectionEnd",t)},_updateAndFire:function(t,e){this[t]!==e&&(this._fireSelectionChanged(),this[t]=e),this._updateTextarea()},_fireSelectionChanged:function(){this.fire("selection:changed"),this.canvas&&this.canvas.fire("text:selection:changed",{target:this})},initDimensions:function(){this.isEditing&&this.initDelayedCursor(),this.clearContextTop(),this.callSuper("initDimensions")},render:function(t){this.clearContextTop(),this.callSuper("render",t),this.cursorOffsetCache={},this.renderCursorOrSelection()},_render:function(t){this.callSuper("_render",t)},clearContextTop:function(t){if(this.isEditing&&this.canvas&&this.canvas.contextTop){var e=this.canvas.contextTop,i=this.canvas.viewportTransform;e.save(),e.transform(i[0],i[1],i[2],i[3],i[4],i[5]),this.transform(e),this._clearTextArea(e),t||e.restore()}},renderCursorOrSelection:function(){if(this.isEditing&&this.canvas&&this.canvas.contextTop){var t=this._getCursorBoundaries(),e=this.canvas.contextTop;this.clearContextTop(!0),this.selectionStart===this.selectionEnd?this.renderCursor(t,e):this.renderSelection(t,e),e.restore()}},_clearTextArea:function(t){var e=this.width+4,i=this.height+4;t.clearRect(-e/2,-i/2,e,i)},_getCursorBoundaries:function(t){void 0===t&&(t=this.selectionStart);var e=this._getLeftOffset(),i=this._getTopOffset(),n=this._getCursorBoundariesOffsets(t);return{left:e,top:i,leftOffset:n.left,topOffset:n.top}},_getCursorBoundariesOffsets:function(t){if(this.cursorOffsetCache&&"top"in this.cursorOffsetCache)return this.cursorOffsetCache;var e,i,n,r,o=0,a=0,s=this.get2DCursorLocation(t);n=s.charIndex,i=s.lineIndex;for(var l=0;l0?a:0)},"rtl"===this.direction&&(r.left*=-1),this.cursorOffsetCache=r,this.cursorOffsetCache},renderCursor:function(t,e){var i=this.get2DCursorLocation(),n=i.lineIndex,r=i.charIndex>0?i.charIndex-1:0,o=this.getValueOfPropertyAt(n,r,"fontSize"),a=this.scaleX*this.canvas.getZoom(),s=this.cursorWidth/a,l=t.topOffset,c=this.getValueOfPropertyAt(n,r,"deltaY");l+=(1-this._fontSizeFraction)*this.getHeightOfLine(n)/this.lineHeight-o*(1-this._fontSizeFraction),this.inCompositionMode&&this.renderSelection(t,e),e.fillStyle=this.cursorColor||this.getValueOfPropertyAt(n,r,"fill"),e.globalAlpha=this.__isMousedown?1:this._currentCursorOpacity,e.fillRect(t.left+t.leftOffset-s/2,l+t.top+c,s,o)},renderSelection:function(t,e){for(var i=this.inCompositionMode?this.hiddenTextarea.selectionStart:this.selectionStart,n=this.inCompositionMode?this.hiddenTextarea.selectionEnd:this.selectionEnd,r=-1!==this.textAlign.indexOf("justify"),o=this.get2DCursorLocation(i),a=this.get2DCursorLocation(n),s=o.lineIndex,l=a.lineIndex,c=o.charIndex<0?0:o.charIndex,u=a.charIndex<0?0:a.charIndex,h=s;h<=l;h++){var f,g=this._getLineLeftOffset(h)||0,d=this.getHeightOfLine(h),v=0,p=0;if(h===s&&(v=this.__charBounds[s][c].left),h>=s&&h1)&&(d/=this.lineHeight);var y=t.left+g+v,b=p-v,x=d,C=0;this.inCompositionMode?(e.fillStyle=this.compositionColor||"black",x=1,C=d):e.fillStyle=this.selectionColor,"rtl"===this.direction&&(y=this.width-y-b),e.fillRect(y,t.top+t.topOffset+C,b,x),t.topOffset+=f}},getCurrentCharFontSize:function(){var t=this._getCurrentCharIndex();return this.getValueOfPropertyAt(t.l,t.c,"fontSize")},getCurrentCharColor:function(){var t=this._getCurrentCharIndex();return this.getValueOfPropertyAt(t.l,t.c,"fill")},_getCurrentCharIndex:function(){var t=this.get2DCursorLocation(this.selectionStart,!0),e=t.charIndex>0?t.charIndex-1:0;return{l:t.lineIndex,c:e}}}),S.IText.fromObject=function(e,i){if(t(e),e.styles)for(var n in e.styles)for(var r in e.styles[n])t(e.styles[n][r]);S.Object._fromObject("IText",e,i,"text")}}(),I=S.util.object.clone,S.util.object.extend(S.IText.prototype,{initBehavior:function(){this.initAddedHandler(),this.initRemovedHandler(),this.initCursorSelectionHandlers(),this.initDoubleClickSimulation(),this.mouseMoveHandler=this.mouseMoveHandler.bind(this)},onDeselect:function(){this.isEditing&&this.exitEditing(),this.selected=!1},initAddedHandler:function(){var t=this;this.on("added",(function(){var e=t.canvas;e&&(e._hasITextHandlers||(e._hasITextHandlers=!0,t._initCanvasHandlers(e)),e._iTextInstances=e._iTextInstances||[],e._iTextInstances.push(t))}))},initRemovedHandler:function(){var t=this;this.on("removed",(function(){var e=t.canvas;e&&(e._iTextInstances=e._iTextInstances||[],S.util.removeFromArray(e._iTextInstances,t),0===e._iTextInstances.length&&(e._hasITextHandlers=!1,t._removeCanvasHandlers(e)))}))},_initCanvasHandlers:function(t){t._mouseUpITextHandler=function(){t._iTextInstances&&t._iTextInstances.forEach((function(t){t.__isMousedown=!1}))},t.on("mouse:up",t._mouseUpITextHandler)},_removeCanvasHandlers:function(t){t.off("mouse:up",t._mouseUpITextHandler)},_tick:function(){this._currentTickState=this._animateCursor(this,1,this.cursorDuration,"_onTickComplete")},_animateCursor:function(t,e,i,n){var r;return r={isAborted:!1,abort:function(){this.isAborted=!0}},t.animate("_currentCursorOpacity",e,{duration:i,onComplete:function(){r.isAborted||t[n]()},onChange:function(){t.canvas&&t.selectionStart===t.selectionEnd&&t.renderCursorOrSelection()},abort:function(){return r.isAborted}}),r},_onTickComplete:function(){var t=this;this._cursorTimeout1&&clearTimeout(this._cursorTimeout1),this._cursorTimeout1=setTimeout((function(){t._currentTickCompleteState=t._animateCursor(t,0,this.cursorDuration/2,"_tick")}),100)},initDelayedCursor:function(t){var e=this,i=t?0:this.cursorDelay;this.abortCursorAnimation(),this._currentCursorOpacity=1,this._cursorTimeout2=setTimeout((function(){e._tick()}),i)},abortCursorAnimation:function(){var t=this._currentTickState||this._currentTickCompleteState,e=this.canvas;this._currentTickState&&this._currentTickState.abort(),this._currentTickCompleteState&&this._currentTickCompleteState.abort(),clearTimeout(this._cursorTimeout1),clearTimeout(this._cursorTimeout2),this._currentCursorOpacity=0,t&&e&&e.clearContext(e.contextTop||e.contextContainer)},selectAll:function(){return this.selectionStart=0,this.selectionEnd=this._text.length,this._fireSelectionChanged(),this._updateTextarea(),this},getSelectedText:function(){return this._text.slice(this.selectionStart,this.selectionEnd).join("")},findWordBoundaryLeft:function(t){var e=0,i=t-1;if(this._reSpace.test(this._text[i]))for(;this._reSpace.test(this._text[i]);)e++,i--;for(;/\S/.test(this._text[i])&&i>-1;)e++,i--;return t-e},findWordBoundaryRight:function(t){var e=0,i=t;if(this._reSpace.test(this._text[i]))for(;this._reSpace.test(this._text[i]);)e++,i++;for(;/\S/.test(this._text[i])&&i-1;)e++,i--;return t-e},findLineBoundaryRight:function(t){for(var e=0,i=t;!/\n/.test(this._text[i])&&i0&&nthis.__selectionStartOnMouseDown?(this.selectionStart=this.__selectionStartOnMouseDown,this.selectionEnd=e):(this.selectionStart=e,this.selectionEnd=this.__selectionStartOnMouseDown),this.selectionStart===i&&this.selectionEnd===n||(this.restartCursorIfNeeded(),this._fireSelectionChanged(),this._updateTextarea(),this.renderCursorOrSelection()))}},_setEditingProps:function(){this.hoverCursor="text",this.canvas&&(this.canvas.defaultCursor=this.canvas.moveCursor="text"),this.borderColor=this.editingBorderColor,this.hasControls=this.selectable=!1,this.lockMovementX=this.lockMovementY=!0},fromStringToGraphemeSelection:function(t,e,i){var n=i.slice(0,t),r=S.util.string.graphemeSplit(n).length;if(t===e)return{selectionStart:r,selectionEnd:r};var o=i.slice(t,e);return{selectionStart:r,selectionEnd:r+S.util.string.graphemeSplit(o).length}},fromGraphemeToStringSelection:function(t,e,i){var n=i.slice(0,t).join("").length;return t===e?{selectionStart:n,selectionEnd:n}:{selectionStart:n,selectionEnd:n+i.slice(t,e).join("").length}},_updateTextarea:function(){if(this.cursorOffsetCache={},this.hiddenTextarea){if(!this.inCompositionMode){var t=this.fromGraphemeToStringSelection(this.selectionStart,this.selectionEnd,this._text);this.hiddenTextarea.selectionStart=t.selectionStart,this.hiddenTextarea.selectionEnd=t.selectionEnd}this.updateTextareaPosition()}},updateFromTextArea:function(){if(this.hiddenTextarea){this.cursorOffsetCache={},this.text=this.hiddenTextarea.value,this._shouldClearDimensionCache()&&(this.initDimensions(),this.setCoords());var t=this.fromStringToGraphemeSelection(this.hiddenTextarea.selectionStart,this.hiddenTextarea.selectionEnd,this.hiddenTextarea.value);this.selectionEnd=this.selectionStart=t.selectionEnd,this.inCompositionMode||(this.selectionStart=t.selectionStart),this.updateTextareaPosition()}},updateTextareaPosition:function(){if(this.selectionStart===this.selectionEnd){var t=this._calcTextareaPosition();this.hiddenTextarea.style.left=t.left,this.hiddenTextarea.style.top=t.top}},_calcTextareaPosition:function(){if(!this.canvas)return{x:1,y:1};var t=this.inCompositionMode?this.compositionStart:this.selectionStart,e=this._getCursorBoundaries(t),i=this.get2DCursorLocation(t),n=i.lineIndex,r=i.charIndex,o=this.getValueOfPropertyAt(n,r,"fontSize")*this.lineHeight,a=e.leftOffset,s=this.calcTransformMatrix(),l={x:e.left+a,y:e.top+e.topOffset+o},c=this.canvas.getRetinaScaling(),u=this.canvas.upperCanvasEl,h=u.width/c,f=u.height/c,g=h-o,d=f-o,v=u.clientWidth/h,p=u.clientHeight/f;return l=S.util.transformPoint(l,s),(l=S.util.transformPoint(l,this.canvas.viewportTransform)).x*=v,l.y*=p,l.x<0&&(l.x=0),l.x>g&&(l.x=g),l.y<0&&(l.y=0),l.y>d&&(l.y=d),l.x+=this.canvas._offset.left,l.y+=this.canvas._offset.top,{left:l.x+"px",top:l.y+"px",fontSize:o+"px",charHeight:o}},_saveEditingProps:function(){this._savedProps={hasControls:this.hasControls,borderColor:this.borderColor,lockMovementX:this.lockMovementX,lockMovementY:this.lockMovementY,hoverCursor:this.hoverCursor,selectable:this.selectable,defaultCursor:this.canvas&&this.canvas.defaultCursor,moveCursor:this.canvas&&this.canvas.moveCursor}},_restoreEditingProps:function(){this._savedProps&&(this.hoverCursor=this._savedProps.hoverCursor,this.hasControls=this._savedProps.hasControls,this.borderColor=this._savedProps.borderColor,this.selectable=this._savedProps.selectable,this.lockMovementX=this._savedProps.lockMovementX,this.lockMovementY=this._savedProps.lockMovementY,this.canvas&&(this.canvas.defaultCursor=this._savedProps.defaultCursor,this.canvas.moveCursor=this._savedProps.moveCursor))},exitEditing:function(){var t=this._textBeforeEdit!==this.text,e=this.hiddenTextarea;return this.selected=!1,this.isEditing=!1,this.selectionEnd=this.selectionStart,e&&(e.blur&&e.blur(),e.parentNode&&e.parentNode.removeChild(e)),this.hiddenTextarea=null,this.abortCursorAnimation(),this._restoreEditingProps(),this._currentCursorOpacity=0,this._shouldClearDimensionCache()&&(this.initDimensions(),this.setCoords()),this.fire("editing:exited"),t&&this.fire("modified"),this.canvas&&(this.canvas.off("mouse:move",this.mouseMoveHandler),this.canvas.fire("text:editing:exited",{target:this}),t&&this.canvas.fire("object:modified",{target:this})),this},_removeExtraneousStyles:function(){for(var t in this.styles)this._textLines[t]||delete this.styles[t]},removeStyleFromTo:function(t,e){var i,n,r=this.get2DCursorLocation(t,!0),o=this.get2DCursorLocation(e,!0),a=r.lineIndex,s=r.charIndex,l=o.lineIndex,c=o.charIndex;if(a!==l){if(this.styles[a])for(i=s;i=c&&(n[u-f]=n[h],delete n[h])}},shiftLineStyles:function(t,e){var i=I(this.styles);for(var n in this.styles){var r=parseInt(n,10);r>t&&(this.styles[r+e]=i[r],i[r-e]||delete this.styles[r])}},restartCursorIfNeeded:function(){this._currentTickState&&!this._currentTickState.isAborted&&this._currentTickCompleteState&&!this._currentTickCompleteState.isAborted||this.initDelayedCursor()},insertNewlineStyleObject:function(t,e,i,n){var r,o={},a=!1,s=this._unwrappedTextLines[t].length===e;for(var l in i||(i=1),this.shiftLineStyles(t,i),this.styles[t]&&(r=this.styles[t][0===e?e:e-1]),this.styles[t]){var c=parseInt(l,10);c>=e&&(a=!0,o[c-e]=this.styles[t][l],s&&0===e||delete this.styles[t][l])}var u=!1;for(a&&!s&&(this.styles[t+i]=o,u=!0),u&&i--;i>0;)n&&n[i-1]?this.styles[t+i]={0:I(n[i-1])}:r?this.styles[t+i]={0:I(r)}:delete this.styles[t+i],i--;this._forceClearCache=!0},insertCharStyleObject:function(t,e,i,n){this.styles||(this.styles={});var r=this.styles[t],o=r?I(r):{};for(var a in i||(i=1),o){var s=parseInt(a,10);s>=e&&(r[s+i]=o[s],o[s-i]||delete r[s])}if(this._forceClearCache=!0,n)for(;i--;)Object.keys(n[i]).length&&(this.styles[t]||(this.styles[t]={}),this.styles[t][e+i]=I(n[i]));else if(r)for(var l=r[e?e-1:1];l&&i--;)this.styles[t][e+i]=I(l)},insertNewStyleBlock:function(t,e,i){for(var n=this.get2DCursorLocation(e,!0),r=[0],o=0,a=0;a0&&(this.insertCharStyleObject(n.lineIndex,n.charIndex,r[0],i),i=i&&i.slice(r[0]+1)),o&&this.insertNewlineStyleObject(n.lineIndex,n.charIndex+r[0],o),a=1;a0?this.insertCharStyleObject(n.lineIndex+a,0,r[a],i):i&&(this.styles[n.lineIndex+a][0]=i[0]),i=i&&i.slice(r[a]+1);r[a]>0&&this.insertCharStyleObject(n.lineIndex+a,0,r[a],i)},setSelectionStartEndWithShift:function(t,e,i){i<=t?(e===t?this._selectionDirection="left":"right"===this._selectionDirection&&(this._selectionDirection="left",this.selectionEnd=t),this.selectionStart=i):i>t&&it?this.selectionStart=t:this.selectionStart<0&&(this.selectionStart=0),this.selectionEnd>t?this.selectionEnd=t:this.selectionEnd<0&&(this.selectionEnd=0)}}),S.util.object.extend(S.IText.prototype,{initDoubleClickSimulation:function(){this.__lastClickTime=+new Date,this.__lastLastClickTime=+new Date,this.__lastPointer={},this.on("mousedown",this.onMouseDown)},onMouseDown:function(t){if(this.canvas){this.__newClickTime=+new Date;var e=t.pointer;this.isTripleClick(e)&&(this.fire("tripleclick",t),this._stopEvent(t.e)),this.__lastLastClickTime=this.__lastClickTime,this.__lastClickTime=this.__newClickTime,this.__lastPointer=e,this.__lastIsEditing=this.isEditing,this.__lastSelected=this.selected}},isTripleClick:function(t){return this.__newClickTime-this.__lastClickTime<500&&this.__lastClickTime-this.__lastLastClickTime<500&&this.__lastPointer.x===t.x&&this.__lastPointer.y===t.y},_stopEvent:function(t){t.preventDefault&&t.preventDefault(),t.stopPropagation&&t.stopPropagation()},initCursorSelectionHandlers:function(){this.initMousedownHandler(),this.initMouseupHandler(),this.initClicks()},doubleClickHandler:function(t){this.isEditing&&this.selectWord(this.getSelectionStartFromPointer(t.e))},tripleClickHandler:function(t){this.isEditing&&this.selectLine(this.getSelectionStartFromPointer(t.e))},initClicks:function(){this.on("mousedblclick",this.doubleClickHandler),this.on("tripleclick",this.tripleClickHandler)},_mouseDownHandler:function(t){!this.canvas||!this.editable||t.e.button&&1!==t.e.button||(this.__isMousedown=!0,this.selected&&(this.inCompositionMode=!1,this.setCursorByClick(t.e)),this.isEditing&&(this.__selectionStartOnMouseDown=this.selectionStart,this.selectionStart===this.selectionEnd&&this.abortCursorAnimation(),this.renderCursorOrSelection()))},_mouseDownHandlerBefore:function(t){!this.canvas||!this.editable||t.e.button&&1!==t.e.button||(this.selected=this===this.canvas._activeObject)},initMousedownHandler:function(){this.on("mousedown",this._mouseDownHandler),this.on("mousedown:before",this._mouseDownHandlerBefore)},initMouseupHandler:function(){this.on("mouseup",this.mouseUpHandler)},mouseUpHandler:function(t){if(this.__isMousedown=!1,!(!this.editable||this.group||t.transform&&t.transform.actionPerformed||t.e.button&&1!==t.e.button)){if(this.canvas){var e=this.canvas._activeObject;if(e&&e!==this)return}this.__lastSelected&&!this.__corner?(this.selected=!1,this.__lastSelected=!1,this.enterEditing(t.e),this.selectionStart===this.selectionEnd?this.initDelayedCursor(!0):this.renderCursorOrSelection()):this.selected=!0}},setCursorByClick:function(t){var e=this.getSelectionStartFromPointer(t),i=this.selectionStart,n=this.selectionEnd;t.shiftKey?this.setSelectionStartEndWithShift(i,n,e):(this.selectionStart=e,this.selectionEnd=e),this.isEditing&&(this._fireSelectionChanged(),this._updateTextarea())},getSelectionStartFromPointer:function(t){for(var e,i=this.getLocalPointer(t),n=0,r=0,o=0,a=0,s=0,l=0,c=this._textLines.length;l0&&(a+=this._textLines[l-1].length+this.missingNewlineOffset(l-1));r=this._getLineLeftOffset(s)*this.scaleX,e=this._textLines[s],"rtl"===this.direction&&(i.x=this.width*this.scaleX-i.x+r);for(var u=0,h=e.length;uo||a<0?0:1);return this.flipX&&(s=r-s),s>this._text.length&&(s=this._text.length),s}}),S.util.object.extend(S.IText.prototype,{initHiddenTextarea:function(){this.hiddenTextarea=S.document.createElement("textarea"),this.hiddenTextarea.setAttribute("autocapitalize","off"),this.hiddenTextarea.setAttribute("autocorrect","off"),this.hiddenTextarea.setAttribute("autocomplete","off"),this.hiddenTextarea.setAttribute("spellcheck","false"),this.hiddenTextarea.setAttribute("data-fabric-hiddentextarea",""),this.hiddenTextarea.setAttribute("wrap","off");var t=this._calcTextareaPosition();this.hiddenTextarea.style.cssText="position: absolute; top: "+t.top+"; left: "+t.left+"; z-index: -999; opacity: 0; width: 1px; height: 1px; font-size: 1px; paddingｰtop: "+t.fontSize+";",this.hiddenTextareaContainer?this.hiddenTextareaContainer.appendChild(this.hiddenTextarea):S.document.body.appendChild(this.hiddenTextarea),S.util.addListener(this.hiddenTextarea,"keydown",this.onKeyDown.bind(this)),S.util.addListener(this.hiddenTextarea,"keyup",this.onKeyUp.bind(this)),S.util.addListener(this.hiddenTextarea,"input",this.onInput.bind(this)),S.util.addListener(this.hiddenTextarea,"copy",this.copy.bind(this)),S.util.addListener(this.hiddenTextarea,"cut",this.copy.bind(this)),S.util.addListener(this.hiddenTextarea,"paste",this.paste.bind(this)),S.util.addListener(this.hiddenTextarea,"compositionstart",this.onCompositionStart.bind(this)),S.util.addListener(this.hiddenTextarea,"compositionupdate",this.onCompositionUpdate.bind(this)),S.util.addListener(this.hiddenTextarea,"compositionend",this.onCompositionEnd.bind(this)),!this._clickHandlerInitialized&&this.canvas&&(S.util.addListener(this.canvas.upperCanvasEl,"click",this.onClick.bind(this)),this._clickHandlerInitialized=!0)},keysMap:{9:"exitEditing",27:"exitEditing",33:"moveCursorUp",34:"moveCursorDown",35:"moveCursorRight",36:"moveCursorLeft",37:"moveCursorLeft",38:"moveCursorUp",39:"moveCursorRight",40:"moveCursorDown"},keysMapRtl:{9:"exitEditing",27:"exitEditing",33:"moveCursorUp",34:"moveCursorDown",35:"moveCursorLeft",36:"moveCursorRight",37:"moveCursorRight",38:"moveCursorUp",39:"moveCursorLeft",40:"moveCursorDown"},ctrlKeysMapUp:{67:"copy",88:"cut"},ctrlKeysMapDown:{65:"selectAll"},onClick:function(){this.hiddenTextarea&&this.hiddenTextarea.focus()},onKeyDown:function(t){if(this.isEditing){var e="rtl"===this.direction?this.keysMapRtl:this.keysMap;if(t.keyCode in e)this[e[t.keyCode]](t);else{if(!(t.keyCode in this.ctrlKeysMapDown)||!t.ctrlKey&&!t.metaKey)return;this[this.ctrlKeysMapDown[t.keyCode]](t)}t.stopImmediatePropagation(),t.preventDefault(),t.keyCode>=33&&t.keyCode<=40?(this.inCompositionMode=!1,this.clearContextTop(),this.renderCursorOrSelection()):this.canvas&&this.canvas.requestRenderAll()}},onKeyUp:function(t){!this.isEditing||this._copyDone||this.inCompositionMode?this._copyDone=!1:t.keyCode in this.ctrlKeysMapUp&&(t.ctrlKey||t.metaKey)&&(this[this.ctrlKeysMapUp[t.keyCode]](t),t.stopImmediatePropagation(),t.preventDefault(),this.canvas&&this.canvas.requestRenderAll())},onInput:function(t){var e=this.fromPaste;if(this.fromPaste=!1,t&&t.stopPropagation(),this.isEditing){var i,n,r,o,a,s=this._splitTextIntoLines(this.hiddenTextarea.value).graphemeText,l=this._text.length,c=s.length,u=c-l,h=this.selectionStart,f=this.selectionEnd,g=h!==f;if(""===this.hiddenTextarea.value)return this.styles={},this.updateFromTextArea(),this.fire("changed"),void(this.canvas&&(this.canvas.fire("text:changed",{target:this}),this.canvas.requestRenderAll()));var d=this.fromStringToGraphemeSelection(this.hiddenTextarea.selectionStart,this.hiddenTextarea.selectionEnd,this.hiddenTextarea.value),v=h>d.selectionStart;g?(i=this._text.slice(h,f),u+=f-h):c0&&(n+=(i=this.__charBounds[t][e-1]).left+i.width),n},getDownCursorOffset:function(t,e){var i=this._getSelectionForOffset(t,e),n=this.get2DCursorLocation(i),r=n.lineIndex;if(r===this._textLines.length-1||t.metaKey||34===t.keyCode)return this._text.length-i;var o=n.charIndex,a=this._getWidthBeforeCursor(r,o),s=this._getIndexOnLine(r+1,a);return this._textLines[r].slice(o).length+s+1+this.missingNewlineOffset(r)},_getSelectionForOffset:function(t,e){return t.shiftKey&&this.selectionStart!==this.selectionEnd&&e?this.selectionEnd:this.selectionStart},getUpCursorOffset:function(t,e){var i=this._getSelectionForOffset(t,e),n=this.get2DCursorLocation(i),r=n.lineIndex;if(0===r||t.metaKey||33===t.keyCode)return-i;var o=n.charIndex,a=this._getWidthBeforeCursor(r,o),s=this._getIndexOnLine(r-1,a),l=this._textLines[r].slice(0,o),c=this.missingNewlineOffset(r-1);return-this._textLines[r-1].length+s-l.length+(1-c)},_getIndexOnLine:function(t,e){for(var i,n,r=this._textLines[t],o=this._getLineLeftOffset(t),a=0,s=0,l=r.length;se){n=!0;var c=o-i,u=o,h=Math.abs(c-e);a=Math.abs(u-e)=this._text.length&&this.selectionEnd>=this._text.length||this._moveCursorUpOrDown("Down",t)},moveCursorUp:function(t){0===this.selectionStart&&0===this.selectionEnd||this._moveCursorUpOrDown("Up",t)},_moveCursorUpOrDown:function(t,e){var i=this["get"+t+"CursorOffset"](e,"right"===this._selectionDirection);e.shiftKey?this.moveCursorWithShift(i):this.moveCursorWithoutShift(i),0!==i&&(this.setSelectionInBoundaries(),this.abortCursorAnimation(),this._currentCursorOpacity=1,this.initDelayedCursor(),this._fireSelectionChanged(),this._updateTextarea())},moveCursorWithShift:function(t){var e="left"===this._selectionDirection?this.selectionStart+t:this.selectionEnd+t;return this.setSelectionStartEndWithShift(this.selectionStart,this.selectionEnd,e),0!==t},moveCursorWithoutShift:function(t){return t<0?(this.selectionStart+=t,this.selectionEnd=this.selectionStart):(this.selectionEnd+=t,this.selectionStart=this.selectionEnd),0!==t},moveCursorLeft:function(t){0===this.selectionStart&&0===this.selectionEnd||this._moveCursorLeftOrRight("Left",t)},_move:function(t,e,i){var n;if(t.altKey)n=this["findWordBoundary"+i](this[e]);else{if(!t.metaKey&&35!==t.keyCode&&36!==t.keyCode)return this[e]+="Left"===i?-1:1,!0;n=this["findLineBoundary"+i](this[e])}if(void 0!==typeof n&&this[e]!==n)return this[e]=n,!0},_moveLeft:function(t,e){return this._move(t,e,"Left")},_moveRight:function(t,e){return this._move(t,e,"Right")},moveCursorLeftWithoutShift:function(t){var e=!0;return this._selectionDirection="left",this.selectionEnd===this.selectionStart&&0!==this.selectionStart&&(e=this._moveLeft(t,"selectionStart")),this.selectionEnd=this.selectionStart,e},moveCursorLeftWithShift:function(t){return"right"===this._selectionDirection&&this.selectionStart!==this.selectionEnd?this._moveLeft(t,"selectionEnd"):0!==this.selectionStart?(this._selectionDirection="left",this._moveLeft(t,"selectionStart")):void 0},moveCursorRight:function(t){this.selectionStart>=this._text.length&&this.selectionEnd>=this._text.length||this._moveCursorLeftOrRight("Right",t)},_moveCursorLeftOrRight:function(t,e){var i="moveCursor"+t+"With";this._currentCursorOpacity=1,e.shiftKey?i+="Shift":i+="outShift",this[i](e)&&(this.abortCursorAnimation(),this.initDelayedCursor(),this._fireSelectionChanged(),this._updateTextarea())},moveCursorRightWithShift:function(t){return"left"===this._selectionDirection&&this.selectionStart!==this.selectionEnd?this._moveRight(t,"selectionStart"):this.selectionEnd!==this._text.length?(this._selectionDirection="right",this._moveRight(t,"selectionEnd")):void 0},moveCursorRightWithoutShift:function(t){var e=!0;return this._selectionDirection="right",this.selectionStart===this.selectionEnd?(e=this._moveRight(t,"selectionStart"),this.selectionEnd=this.selectionStart):this.selectionStart=this.selectionEnd,e},removeChars:function(t,e){void 0===e&&(e=t+1),this.removeStyleFromTo(t,e),this._text.splice(t,e-t),this.text=this._text.join(""),this.set("dirty",!0),this._shouldClearDimensionCache()&&(this.initDimensions(),this.setCoords()),this._removeExtraneousStyles()},insertChars:function(t,e,i,n){void 0===n&&(n=i),n>i&&this.removeStyleFromTo(i,n);var r=S.util.string.graphemeSplit(t);this.insertNewStyleBlock(r,i,e),this._text=[].concat(this._text.slice(0,i),r,this._text.slice(n)),this.text=this._text.join(""),this.set("dirty",!0),this._shouldClearDimensionCache()&&(this.initDimensions(),this.setCoords()),this._removeExtraneousStyles()}}),_=S.util.toFixed,M=/ +/g,S.util.object.extend(S.Text.prototype,{_toSVG:function(){var t=this._getSVGLeftTopOffsets(),e=this._getSVGTextAndBg(t.textTop,t.textLeft);return this._wrapSVGTextAndBg(e)},toSVG:function(t){return this._createBaseSVGMarkup(this._toSVG(),{reviver:t,noStyle:!0,withShadow:!0})},_getSVGLeftTopOffsets:function(){return{textLeft:-this.width/2,textTop:-this.height/2,lineTop:this.getHeightOfLine(0)}},_wrapSVGTextAndBg:function(t){var e=this.getSvgTextDecoration(this);return[t.textBgRects.join(""),'\t\t",t.textSpans.join(""),"\n"]},_getSVGTextAndBg:function(t,e){var i,n=[],r=[],o=t;this._setSVGBg(r);for(var a=0,s=this._textLines.length;a",S.util.string.escapeXml(t),""].join("")},_setSVGTextLineText:function(t,e,i,n){var r,o,a,s,l,c=this.getHeightOfLine(e),u=-1!==this.textAlign.indexOf("justify"),h="",f=0,g=this._textLines[e];n+=c*(1-this._fontSizeFraction)/this.lineHeight;for(var d=0,v=g.length-1;d<=v;d++)l=d===v||this.charSpacing,h+=g[d],a=this.__charBounds[e][d],0===f?(i+=a.kernedWidth-a.width,f+=a.width):f+=a.kernedWidth,u&&!l&&this._reSpaceAndTab.test(g[d])&&(l=!0),l||(r=r||this.getCompleteStyleDeclaration(e,d),o=this.getCompleteStyleDeclaration(e,d+1),l=this._hasStyleChangedForSvg(r,o)),l&&(s=this._getStyleDeclaration(e,d)||{},t.push(this._createTextCharSpan(h,s,i,n)),h="",r=o,i+=f,f=0)},_pushTextBgRect:function(t,e,i,n,r,o){var a=S.Object.NUM_FRACTION_DIGITS;t.push("\t\t\n')},_setSVGTextLineBg:function(t,e,i,n){for(var r,o,a=this._textLines[e],s=this.getHeightOfLine(e)/this.lineHeight,l=0,c=0,u=this.getValueOfPropertyAt(e,0,"textBackgroundColor"),h=0,f=a.length;hthis.width&&this._set("width",this.dynamicMinWidth),-1!==this.textAlign.indexOf("justify")&&this.enlargeSpaces(),this.height=this.calcTextHeight(),this.saveState({propertySet:"_dimensionAffectingProps"}))},_generateStyleMap:function(t){for(var e=0,i=0,n=0,r={},o=0;o0?(i=0,n++,e++):!this.splitByGrapheme&&this._reSpaceAndTab.test(t.graphemeText[n])&&o>0&&(i++,n++),r[o]={line:e,offset:i},n+=t.graphemeLines[o].length,i+=t.graphemeLines[o].length;return r},styleHas:function(t,i){if(this._styleMap&&!this.isWrapping){var n=this._styleMap[i];n&&(i=n.line)}return e.Text.prototype.styleHas.call(this,t,i)},isEmptyStyles:function(t){if(!this.styles)return!0;var e,i,n=0,r=!1,o=this._styleMap[t],a=this._styleMap[t+1];for(var s in o&&(t=o.line,n=o.offset),a&&(r=a.line===t,e=a.offset),i=void 0===t?this.styles:{line:this.styles[t]})for(var l in i[s])if(l>=n&&(!r||ln&&!p?(s.push(l),l=[],o=g,p=!0):o+=m,p||a||l.push(f),l=l.concat(u),d=a?0:this._measureWord([f],i,h),h++,p=!1,g>v&&(v=g);return y&&s.push(l),v+r>this.dynamicMinWidth&&(this.dynamicMinWidth=v-m+r),s},isEndOfWrapping:function(t){return!this._styleMap[t+1]||this._styleMap[t+1].line!==this._styleMap[t].line},missingNewlineOffset:function(t){return this.splitByGrapheme?this.isEndOfWrapping(t)?1:0:1},_splitTextIntoLines:function(t){for(var i=e.Text.prototype._splitTextIntoLines.call(this,t),n=this._wrapText(i.lines,this.width),r=new Array(n.length),o=0;o(o-n)*Math.cos(s)-(a-r)*Math.sin(s)+n?"right":"left",originY:r>(o-n)*Math.sin(s)+(a-r)*Math.cos(s)+r?"bottom":"top"}}t.exports={setOrigins:function(t){var e=t.getPointByOrigin("left","top"),i=t.getPointByOrigin("right","top"),n=t.getPointByOrigin("right","bottom"),r=t.getPointByOrigin("left","bottom");t.origins={lt:e,rt:i,rb:n,lb:r}},resize:function(t,r,o){(function(t){return"center"===t.originX&&"center"===t.originY})(t)&&(function(t,e){var i=e.getPointByOrigin("center","center"),r=n(i,t,-e.angle),o=r.originX,a=r.originY,s=e.getPointByOrigin(o,a),l=e.left-(i.x-s.x),c=e.top-(i.y-s.y);e.set({originX:o,originY:a,left:l,top:c}),e.setCoords()}(r,t),function(t){var e=t.originX,i=t.originY,n=e.substring(0,1)+i.substring(0,1);t.startPoint=t.origins[n]}(t)),o?function(t){var e=t.type,n=t.scaleX,r=t.scaleY,o=i[e],a=t[o.w]*n,s=t[o.h]*r;if(t.isRegular){var l=Math.max(n,r);a=t[o.w]*l,s=t[o.h]*l}var c={hasControls:!1,hasBorders:!1,scaleX:1,scaleY:1};c[o.w]=a,c[o.h]=s,t.set(c)}(t):function(t,n){var r=n.type,o=n.strokeWidth,a=n.startPoint,s=e[r],l=i[r],c=!("triangle"!==n.type),u={},h=Math.abs(a.x-t.x)/s,f=Math.abs(a.y-t.y)/s;h>o&&(h-=o/s),f>o&&(f-=o/s),n.isRegular&&(h=f=Math.max(h,f),c&&(f=Math.sqrt(3)/2*h)),u[l.w]=h,u[l.h]=f,n.set(u)}(r,t),function(t,e){var i=e.startPoint,r=n(i,t,-e.angle),o=r.originX,a=r.originY;e.setPositionByOrigin(i,o,a),e.setCoords()}(r,t)},adjustOriginToCenter:function(t){var e=t.getPointByOrigin("center","center"),i=t.originX,n=t.originY,r=t.getPointByOrigin(i,n),o=t.left+(e.x-r.x),a=t.top+(e.y-r.y);t.set({hasControls:!0,hasBorders:!0,originX:"center",originY:"center",left:o,top:a}),t.setCoords()}}},2221:function(t,e,i){i(5454),i(9173);var n=i(7545);t.exports=n.Array.from},5078:function(t,e,i){i(8118);var n=i(7545);t.exports=n.Array.isArray},6135:function(t,e,i){i(9106);var n=i(5607);t.exports=n("Array").concat},9510:function(t,e,i){i(1710);var n=i(5607);t.exports=n("Array").fill},3971:function(t,e,i){i(3436);var n=i(5607);t.exports=n("Array").filter},98:function(t,e,i){i(9823);var n=i(5607);t.exports=n("Array").forEach},2089:function(t,e,i){i(2276);var n=i(5607);t.exports=n("Array").indexOf},6209:function(t,e,i){i(3838);var n=i(5607);t.exports=n("Array").map},2671:function(t,e,i){i(5818);var n=i(5607);t.exports=n("Array").slice},1375:function(t,e,i){i(2178);var n=i(5607);t.exports=n("Array").splice},3528:function(t,e,i){i(665);var n=i(5607);t.exports=n("Function").bind},5739:function(t,e,i){i(8939),i(5454);var n=i(8703);t.exports=n},278:function(t,e,i){var n=i(3528),r=Function.prototype;t.exports=function(t){var e=t.bind;return t===r||t instanceof Function&&e===r.bind?n:e}},1484:function(t,e,i){var n=i(6135),r=Array.prototype;t.exports=function(t){var e=t.concat;return t===r||t instanceof Array&&e===r.concat?n:e}},7731:function(t,e,i){var n=i(9510),r=Array.prototype;t.exports=function(t){var e=t.fill;return t===r||t instanceof Array&&e===r.fill?n:e}},3669:function(t,e,i){var n=i(3971),r=Array.prototype;t.exports=function(t){var e=t.filter;return t===r||t instanceof Array&&e===r.filter?n:e}},2604:function(t,e,i){var n=i(2089),r=Array.prototype;t.exports=function(t){var e=t.indexOf;return t===r||t instanceof Array&&e===r.indexOf?n:e}},263:function(t,e,i){var n=i(6209),r=Array.prototype;t.exports=function(t){var e=t.map;return t===r||t instanceof Array&&e===r.map?n:e}},7663:function(t,e,i){var n=i(2671),r=Array.prototype;t.exports=function(t){var e=t.slice;return t===r||t instanceof Array&&e===r.slice?n:e}},5063:function(t,e,i){var n=i(1375),r=Array.prototype;t.exports=function(t){var e=t.splice;return t===r||t instanceof Array&&e===r.splice?n:e}},6813:function(t,e,i){var n=i(3842),r=String.prototype;t.exports=function(t){var e=t.trim;return"string"==typeof t||t===r||t instanceof String&&e===r.trim?n:e}},6285:function(t,e,i){i(2666);var n=i(7545);t.exports=n.Number.parseInt},3213:function(t,e,i){i(3113);var n=i(7545).Object;t.exports=function(t,e){return n.create(t,e)}},3512:function(t,e,i){i(297);var n=i(7545).Object,r=t.exports=function(t,e,i){return n.defineProperty(t,e,i)};n.defineProperty.sham&&(r.sham=!0)},8168:function(t,e,i){i(9234);var n=i(7545);t.exports=n.Object.getPrototypeOf},8651:function(t,e,i){i(2647);var n=i(7545);t.exports=n.Object.keys},3083:function(t,e,i){i(3222);var n=i(7545);t.exports=n.Object.setPrototypeOf},2987:function(t,e,i){i(4859);var n=i(7545);t.exports=n.parseFloat},2239:function(t,e,i){i(5706);var n=i(7545);t.exports=n.parseInt},3154:function(t,e,i){i(4242),i(8939),i(6663),i(9021),i(7884),i(8885),i(1868),i(5454);var n=i(7545);t.exports=n.Promise},6577:function(t,e,i){i(5397);var n=i(7545);t.exports=n.Reflect.construct},3842:function(t,e,i){i(957);var n=i(5607);t.exports=n("String").trim},5008:function(t,e,i){i(9106),i(6663),i(6187),i(9781),i(492),i(6681),i(9594),i(3665),i(9017),i(1250),i(9786),i(503),i(6565),i(9322),i(3610),i(6886),i(3514),i(8671),i(8556),i(1367);var n=i(7545);t.exports=n.Symbol},994:function(t,e,i){i(8939),i(6663),i(5454),i(3665);var n=i(9207);t.exports=n.f("iterator")},2813:function(t,e,i){var n=i(3822);t.exports=n},8664:function(t,e,i){var n=i(1434);t.exports=n},1457:function(t,e,i){var n=i(7710);t.exports=n},2937:function(t,e,i){var n=i(4741);t.exports=n},9297:function(t,e,i){var n=i(4963);t.exports=n},8026:function(t,e,i){var n=i(7820);t.exports=n},2044:function(t,e,i){var n=i(8980);t.exports=n},2214:function(t,e,i){var n=i(6672);t.exports=n},9256:function(t,e,i){var n=i(2285);i(177),i(9031),i(6658),i(1875),i(8658),i(4592),i(6680),t.exports=n},5659:function(t,e,i){var n=i(8535);t.exports=n},6235:function(t,e,i){var n=i(6447),r=i(9288);t.exports=function(t){if(n(t))return t;throw TypeError(r(t)+" is not a function")}},1404:function(t,e,i){var n=i(2091),r=i(9288);t.exports=function(t){if(n(t))return t;throw TypeError(r(t)+" is not a constructor")}},7757:function(t,e,i){var n=i(6447);t.exports=function(t){if("object"==typeof t||n(t))return t;throw TypeError("Can't set "+String(t)+" as a prototype")}},7423:function(t){t.exports=function(){}},6961:function(t){t.exports=function(t,e,i){if(t instanceof e)return t;throw TypeError("Incorrect "+(i?i+" ":"")+"invocation")}},1138:function(t,e,i){var n=i(5744);t.exports=function(t){if(n(t))return t;throw TypeError(String(t)+" is not an object")}},2724:function(t,e,i){"use strict";var n=i(1795),r=i(7739),o=i(4104);t.exports=function(t){for(var e=n(this),i=o(e),a=arguments.length,s=r(a>1?arguments[1]:void 0,i),l=a>2?arguments[2]:void 0,c=void 0===l?i:r(l,i);c>s;)e[s++]=t;return e}},7397:function(t,e,i){"use strict";var n=i(454).forEach,r=i(424)("forEach");t.exports=r?[].forEach:function(t){return n(this,t,arguments.length>1?arguments[1]:void 0)}},841:function(t,e,i){"use strict";var n=i(8043),r=i(1795),o=i(1635),a=i(6109),s=i(2091),l=i(4104),c=i(9361),u=i(1669),h=i(8703);t.exports=function(t){var e=r(t),i=s(this),f=arguments.length,g=f>1?arguments[1]:void 0,d=void 0!==g;d&&(g=n(g,f>2?arguments[2]:void 0,2));var v,p,m,y,b,x,C=h(e),I=0;if(!C||this==Array&&a(C))for(v=l(e),p=i?new this(v):Array(v);v>I;I++)x=d?g(e[I],I):e[I],c(p,I,x);else for(b=(y=u(e,C)).next,p=i?new this:[];!(m=b.call(y)).done;I++)x=d?o(y,g,[m.value,I],!0):m.value,c(p,I,x);return p.length=I,p}},8180:function(t,e,i){var n=i(101),r=i(7739),o=i(4104),a=function(t){return function(e,i,a){var s,l=n(e),c=o(l),u=r(a,c);if(t&&i!=i){for(;c>u;)if((s=l[u++])!=s)return!0}else for(;c>u;u++)if((t||u in l)&&l[u]===i)return t||u||0;return!t&&-1}};t.exports={includes:a(!0),indexOf:a(!1)}},454:function(t,e,i){var n=i(8043),r=i(2202),o=i(1795),a=i(4104),s=i(1321),l=[].push,c=function(t){var e=1==t,i=2==t,c=3==t,u=4==t,h=6==t,f=7==t,g=5==t||h;return function(d,v,p,m){for(var y,b,x=o(d),C=r(x),I=n(v,p,3),_=a(C),M=0,S=m||s,w=e?S(d,_):i||f?S(d,0):void 0;_>M;M++)if((g||M in C)&&(b=I(y=C[M],M,x),t))if(e)w[M]=b;else if(b)switch(t){case 3:return!0;case 5:return y;case 6:return M;case 2:l.call(w,y)}else switch(t){case 4:return!1;case 7:l.call(w,y)}return h?-1:c||u?u:w}};t.exports={forEach:c(0),map:c(1),filter:c(2),some:c(3),every:c(4),find:c(5),findIndex:c(6),filterReject:c(7)}},242:function(t,e,i){var n=i(6192),r=i(8182),o=i(4218),a=r("species");t.exports=function(t){return o>=51||!n((function(){var e=[];return(e.constructor={})[a]=function(){return{foo:1}},1!==e[t](Boolean).foo}))}},424:function(t,e,i){"use strict";var n=i(6192);t.exports=function(t,e){var i=[][t];return!!i&&n((function(){i.call(null,e||function(){throw 1},1)}))}},3712:function(t,e,i){var n=i(4770),r=i(2091),o=i(5744),a=i(8182)("species");t.exports=function(t){var e;return n(t)&&(e=t.constructor,(r(e)&&(e===Array||n(e.prototype))||o(e)&&null===(e=e[a]))&&(e=void 0)),void 0===e?Array:e}},1321:function(t,e,i){var n=i(3712);t.exports=function(t,e){return new(n(t))(0===e?0:e)}},1635:function(t,e,i){var n=i(1138),r=i(6639);t.exports=function(t,e,i,o){try{return o?e(n(i)[0],i[1]):e(i)}catch(e){r(t,"throw",e)}}},9770:function(t,e,i){var n=i(8182)("iterator"),r=!1;try{var o=0,a={next:function(){return{done:!!o++}},return:function(){r=!0}};a[n]=function(){return this},Array.from(a,(function(){throw 2}))}catch(t){}t.exports=function(t,e){if(!e&&!r)return!1;var i=!1;try{var o={};o[n]=function(){return{next:function(){return{done:i=!0}}}},t(o)}catch(t){}return i}},9272:function(t){var e={}.toString;t.exports=function(t){return e.call(t).slice(8,-1)}},4696:function(t,e,i){var n=i(3471),r=i(6447),o=i(9272),a=i(8182)("toStringTag"),s="Arguments"==o(function(){return arguments}());t.exports=n?o:function(t){var e,i,n;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(i=function(t,e){try{return t[e]}catch(t){}}(e=Object(t),a))?i:s?o(e):"Object"==(n=o(e))&&r(e.callee)?"Arguments":n}},4635:function(t,e,i){var n=i(6192);t.exports=!n((function(){function t(){}return t.prototype.constructor=null,Object.getPrototypeOf(new t)!==t.prototype}))},5148:function(t,e,i){"use strict";var n=i(4413).IteratorPrototype,r=i(2853),o=i(774),a=i(1284),s=i(7771),l=function(){return this};t.exports=function(t,e,i){var c=e+" Iterator";return t.prototype=r(n,{next:o(1,i)}),a(t,c,!1,!0),s[c]=l,t}},8711:function(t,e,i){var n=i(69),r=i(2760),o=i(774);t.exports=n?function(t,e,i){return r.f(t,e,o(1,i))}:function(t,e,i){return t[e]=i,t}},774:function(t){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},9361:function(t,e,i){"use strict";var n=i(77),r=i(2760),o=i(774);t.exports=function(t,e,i){var a=n(e);a in t?r.f(t,a,o(0,i)):t[a]=i}},7218:function(t,e,i){"use strict";var n=i(3085),r=i(5546),o=i(2282),a=i(6447),s=i(5148),l=i(9341),c=i(4469),u=i(1284),h=i(8711),f=i(9482),g=i(8182),d=i(7771),v=i(4413),p=o.PROPER,m=o.CONFIGURABLE,y=v.IteratorPrototype,b=v.BUGGY_SAFARI_ITERATORS,x=g("iterator"),C="keys",I="values",_="entries",M=function(){return this};t.exports=function(t,e,i,o,g,v,S){s(i,e,o);var w,k,T,D=function(t){if(t===g&&L)return L;if(!b&&t in O)return O[t];switch(t){case C:case I:case _:return function(){return new i(this,t)}}return function(){return new i(this)}},A=e+" Iterator",j=!1,O=t.prototype,E=O[x]||O["@@iterator"]||g&&O[g],L=!b&&E||D(g),N="Array"==e&&O.entries||E;if(N&&(w=l(N.call(new t)))!==Object.prototype&&w.next&&(r||l(w)===y||(c?c(w,y):a(w[x])||f(w,x,M)),u(w,A,!0,!0),r&&(d[A]=M)),p&&g==I&&E&&E.name!==I&&(!r&&m?h(O,"name",I):(j=!0,L=function(){return E.call(this)})),g)if(k={values:D(I),keys:v?L:D(C),entries:D(_)},S)for(T in k)(b||j||!(T in O))&&f(O,T,k[T]);else n({target:e,proto:!0,forced:b||j},k);return r&&!S||O[x]===L||f(O,x,L,{name:g}),d[e]=L,k}},1488:function(t,e,i){var n=i(7545),r=i(4500),o=i(9207),a=i(2760).f;t.exports=function(t){var e=n.Symbol||(n.Symbol={});r(e,t)||a(e,t,{value:o.f(t)})}},69:function(t,e,i){var n=i(6192);t.exports=!n((function(){return 7!=Object.defineProperty({},1,{get:function(){return 7}})[1]}))},7449:function(t,e,i){var n=i(8576),r=i(5744),o=n.document,a=r(o)&&r(o.createElement);t.exports=function(t){return a?o.createElement(t):{}}},7365:function(t){t.exports={CSSRuleList:0,CSSStyleDeclaration:0,CSSValueList:0,ClientRectList:0,DOMRectList:0,DOMStringList:0,DOMTokenList:1,DataTransferItemList:0,FileList:0,HTMLAllCollection:0,HTMLCollection:0,HTMLFormElement:0,HTMLSelectElement:0,MediaList:0,MimeTypeArray:0,NamedNodeMap:0,NodeList:1,PaintRequestList:0,Plugin:0,PluginArray:0,SVGLengthList:0,SVGNumberList:0,SVGPathSegList:0,SVGPointList:0,SVGStringList:0,SVGTransformList:0,SourceBufferList:0,StyleSheetList:0,TextTrackCueList:0,TextTrackList:0,TouchList:0}},2957:function(t){t.exports="object"==typeof window},9347:function(t,e,i){var n=i(8989),r=i(8576);t.exports=/ipad|iphone|ipod/i.test(n)&&void 0!==r.Pebble},9536:function(t,e,i){var n=i(8989);t.exports=/(?:ipad|iphone|ipod).*applewebkit/i.test(n)},224:function(t,e,i){var n=i(9272),r=i(8576);t.exports="process"==n(r.process)},5914:function(t,e,i){var n=i(8989);t.exports=/web0s(?!.*chrome)/i.test(n)},8989:function(t,e,i){var n=i(150);t.exports=n("navigator","userAgent")||""},4218:function(t,e,i){var n,r,o=i(8576),a=i(8989),s=o.process,l=o.Deno,c=s&&s.versions||l&&l.version,u=c&&c.v8;u?r=(n=u.split("."))[0]<4?1:n[0]+n[1]:a&&(!(n=a.match(/Edge\/(\d+)/))||n[1]>=74)&&(n=a.match(/Chrome\/(\d+)/))&&(r=n[1]),t.exports=r&&+r},5607:function(t,e,i){var n=i(7545);t.exports=function(t){return n[t+"Prototype"]}},2952:function(t){t.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},3085:function(t,e,i){"use strict";var n=i(8576),r=i(6447),o=i(5141).f,a=i(9245),s=i(7545),l=i(8043),c=i(8711),u=i(4500),h=function(t){var e=function(e,i,n){if(this instanceof t){switch(arguments.length){case 0:return new t;case 1:return new t(e);case 2:return new t(e,i)}return new t(e,i,n)}return t.apply(this,arguments)};return e.prototype=t.prototype,e};t.exports=function(t,e){var i,f,g,d,v,p,m,y,b=t.target,x=t.global,C=t.stat,I=t.proto,_=x?n:C?n[b]:(n[b]||{}).prototype,M=x?s:s[b]||c(s,b,{})[b],S=M.prototype;for(g in e)i=!a(x?g:b+(C?".":"#")+g,t.forced)&&_&&u(_,g),v=M[g],i&&(p=t.noTargetGet?(y=o(_,g))&&y.value:_[g]),d=i&&p?p:e[g],i&&typeof v==typeof d||(m=t.bind&&i?l(d,n):t.wrap&&i?h(d):I&&r(d)?l(Function.call,d):d,(t.sham||d&&d.sham||v&&v.sham)&&c(m,"sham",!0),c(M,g,m),I&&(u(s,f=b+"Prototype")||c(s,f,{}),c(s[f],g,d),t.real&&S&&!S[g]&&c(S,g,d)))}},6192:function(t){t.exports=function(t){try{return!!t()}catch(t){return!0}}},8043:function(t,e,i){var n=i(6235);t.exports=function(t,e,i){if(n(t),void 0===e)return t;switch(i){case 0:return function(){return t.call(e)};case 1:return function(i){return t.call(e,i)};case 2:return function(i,n){return t.call(e,i,n)};case 3:return function(i,n,r){return t.call(e,i,n,r)}}return function(){return t.apply(e,arguments)}}},6782:function(t,e,i){"use strict";var n=i(6235),r=i(5744),o=[].slice,a={},s=function(t,e,i){if(!(e in a)){for(var n=[],r=0;rg;g++)if((v=M(t[g]))&&v instanceof u)return v;return new u(!1)}h=s(t,f)}for(p=h.next;!(m=p.call(h)).done;){try{v=M(m.value)}catch(t){c(h,"throw",t)}if("object"==typeof v&&v&&v instanceof u)return v}return new u(!1)}},6639:function(t,e,i){var n=i(1138),r=i(5037);t.exports=function(t,e,i){var o,a;n(t);try{if(!(o=r(t,"return"))){if("throw"===e)throw i;return i}o=o.call(t)}catch(t){a=!0,o=t}if("throw"===e)throw i;if(a)throw o;return n(o),i}},4413:function(t,e,i){"use strict";var n,r,o,a=i(6192),s=i(6447),l=i(2853),c=i(9341),u=i(9482),h=i(8182),f=i(5546),g=h("iterator"),d=!1;[].keys&&("next"in(o=[].keys())?(r=c(c(o)))!==Object.prototype&&(n=r):d=!0),null==n||a((function(){var t={};return n[g].call(t)!==t}))?n={}:f&&(n=l(n)),s(n[g])||u(n,g,(function(){return this})),t.exports={IteratorPrototype:n,BUGGY_SAFARI_ITERATORS:d}},7771:function(t){t.exports={}},4104:function(t,e,i){var n=i(8445);t.exports=function(t){return n(t.length)}},2950:function(t,e,i){var n,r,o,a,s,l,c,u,h=i(8576),f=i(5141).f,g=i(7160).set,d=i(9536),v=i(9347),p=i(5914),m=i(224),y=h.MutationObserver||h.WebKitMutationObserver,b=h.document,x=h.process,C=h.Promise,I=f(h,"queueMicrotask"),_=I&&I.value;_||(n=function(){var t,e;for(m&&(t=x.domain)&&t.exit();r;){e=r.fn,r=r.next;try{e()}catch(t){throw r?a():o=void 0,t}}o=void 0,t&&t.enter()},d||m||p||!y||!b?!v&&C&&C.resolve?((c=C.resolve(void 0)).constructor=C,u=c.then,a=function(){u.call(c,n)}):a=m?function(){x.nextTick(n)}:function(){g.call(h,n)}:(s=!0,l=b.createTextNode(""),new y(n).observe(l,{characterData:!0}),a=function(){l.data=s=!s})),t.exports=_||function(t){var e={fn:t,next:void 0};o&&(o.next=e),r||(r=e,a()),o=e}},4471:function(t,e,i){var n=i(8576);t.exports=n.Promise},3045:function(t,e,i){var n=i(4218),r=i(6192);t.exports=!!Object.getOwnPropertySymbols&&!r((function(){var t=Symbol();return!String(t)||!(Object(t)instanceof Symbol)||!Symbol.sham&&n&&n<41}))},4551:function(t,e,i){var n=i(6192),r=i(8182),o=i(5546),a=r("iterator");t.exports=!n((function(){var t=new URL("b?a=1&b=2&c=3","http://a"),e=t.searchParams,i="";return t.pathname="c%20d",e.forEach((function(t,n){e.delete("b"),i+=n+t})),o&&!t.toJSON||!e.sort||"http://a/c%20d?a=1&c=3"!==t.href||"3"!==e.get("c")||"a=1"!==String(new URLSearchParams("?a=1"))||!e[a]||"a"!==new URL("https://a@b").username||"b"!==new URLSearchParams(new URLSearchParams("a=b")).get("a")||"xn--e1aybc"!==new URL("http://тест").host||"#%D0%B1"!==new URL("http://a#б").hash||"a1c3"!==i||"x"!==new URL("http://x",void 0).host}))},8921:function(t,e,i){var n=i(8576),r=i(6447),o=i(9516),a=n.WeakMap;t.exports=r(a)&&/native code/.test(o(a))},9438:function(t,e,i){"use strict";var n=i(6235),r=function(t){var e,i;this.promise=new t((function(t,n){if(void 0!==e||void 0!==i)throw TypeError("Bad Promise constructor");e=t,i=n})),this.resolve=n(e),this.reject=n(i)};t.exports.f=function(t){return new r(t)}},15:function(t,e,i){var n=i(8576),r=i(6192),o=i(4845),a=i(4277).trim,s=i(1450),l=n.parseFloat,c=n.Symbol,u=c&&c.iterator,h=1/l(s+"-0")!=-1/0||u&&!r((function(){l(Object(u))}));t.exports=h?function(t){var e=a(o(t)),i=l(e);return 0===i&&"-"==e.charAt(0)?-0:i}:l},2558:function(t,e,i){var n=i(8576),r=i(6192),o=i(4845),a=i(4277).trim,s=i(1450),l=n.parseInt,c=n.Symbol,u=c&&c.iterator,h=/^[+-]?0[Xx]/,f=8!==l(s+"08")||22!==l(s+"0x16")||u&&!r((function(){l(Object(u))}));t.exports=f?function(t,e){var i=a(o(t));return l(i,e>>>0||(h.test(i)?16:10))}:l},2503:function(t,e,i){"use strict";var n=i(69),r=i(6192),o=i(7653),a=i(4750),s=i(6007),l=i(1795),c=i(2202),u=Object.assign,h=Object.defineProperty;t.exports=!u||r((function(){if(n&&1!==u({b:1},u(h({},"a",{enumerable:!0,get:function(){h(this,"b",{value:3,enumerable:!1})}}),{b:2})).b)return!0;var t={},e={},i=Symbol(),r="abcdefghijklmnopqrst";return t[i]=7,r.split("").forEach((function(t){e[t]=t})),7!=u({},t)[i]||o(u({},e)).join("")!=r}))?function(t,e){for(var i=l(t),r=arguments.length,u=1,h=a.f,f=s.f;r>u;)for(var g,d=c(arguments[u++]),v=h?o(d).concat(h(d)):o(d),p=v.length,m=0;p>m;)g=v[m++],n&&!f.call(d,g)||(i[g]=d[g]);return i}:u},2853:function(t,e,i){var n,r=i(1138),o=i(1187),a=i(2952),s=i(4535),l=i(7403),c=i(7449),u=i(9766),h=u("IE_PROTO"),f=function(){},g=function(t){return"
                    \n
                  • \n
                    \n
                    \n '.concat(u(["normal","active"],"shape-rectangle",!0),"\n
                    \n \n
                    \n
                    \n
                    \n ')).call(s,u(["normal","active"],"shape-circle",!0),"\n
                    \n \n
                    \n
                    \n
                    \n ')).call(o,u(["normal","active"],"shape-triangle",!0),"\n
                    \n \n
                    \n
                    • \n
                  • \n
                    \n
                    • \n
                  • \n
                    \n
                    \n
                    • \n
                  • \n
                    \n
                    • \n
                  • \n \n
                    \n \n
                    • \n
                  \n')};function Mn(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var Sn={stroke:"#ffbb3b",fill:"",strokeWidth:3},wn=function(t){an(i,t);var e=Mn(i);function i(t,n){var r,o=n.locale,a=n.makeSvgIcon,s=n.menuBarPosition,l=n.usageStatistics;return w(this,i),(r=e.call(this,t,{locale:o,name:"shape",makeSvgIcon:a,menuBarPosition:s,templateHtml:_n,usageStatistics:l})).type=null,r.options=Sn,r._els={shapeSelectButton:r.selector(".tie-shape-button"),shapeColorButton:r.selector(".tie-shape-color-button"),strokeRange:new xn({slider:r.selector(".tie-stroke-range"),input:r.selector(".tie-stroke-range-value")},ri),fillColorpicker:new mn(r.selector(".tie-color-fill"),{defaultColor:"",toggleDirection:r.toggleDirection,usageStatistics:r.usageStatistics}),strokeColorpicker:new mn(r.selector(".tie-color-stroke"),{defaultColor:"#ffbb3b",toggleDirection:r.toggleDirection,usageStatistics:r.usageStatistics})},r.colorPickerControls.push(r._els.fillColorpicker),r.colorPickerControls.push(r._els.strokeColorpicker),r.colorPickerInputBoxes=[],r.colorPickerInputBoxes.push(r._els.fillColorpicker.colorpickerElement.querySelector(ue)),r.colorPickerInputBoxes.push(r._els.strokeColorpicker.colorpickerElement.querySelector(ue)),r}return T(i,[{key:"destroy",value:function(){this._removeEvent(),this._els.strokeRange.destroy(),this._els.fillColorpicker.destroy(),this._els.strokeColorpicker.destroy(),Mi(this)}},{key:"addEvent",value:function(t){var e,i,n,r,o,a,s=this;this.eventHandler.shapeTypeSelected=O()(e=this._changeShapeHandler).call(e,this),this.actions=t,this._els.shapeSelectButton.addEventListener("click",this.eventHandler.shapeTypeSelected),this._els.strokeRange.on("change",O()(i=this._changeStrokeRangeHandler).call(i,this)),this._els.fillColorpicker.on("change",O()(n=this._changeFillColorHandler).call(n,this)),this._els.strokeColorpicker.on("change",O()(r=this._changeStrokeColorHandler).call(r,this)),this._els.fillColorpicker.on("changeShow",O()(o=this.colorPickerChangeShow).call(o,this)),this._els.strokeColorpicker.on("changeShow",O()(a=this.colorPickerChangeShow).call(a,this)),F().forEachArray(this.colorPickerInputBoxes,(function(t){var e,i;t.addEventListener(le,O()(e=s._onStartEditingInputBox).call(e,s)),t.addEventListener(ce,O()(i=s._onStopEditingInputBox).call(i,s))}),this)}},{key:"_removeEvent",value:function(){var t=this;this._els.shapeSelectButton.removeEventListener("click",this.eventHandler.shapeTypeSelected),this._els.strokeRange.off(),this._els.fillColorpicker.off(),this._els.strokeColorpicker.off(),F().forEachArray(this.colorPickerInputBoxes,(function(e){var i,n;e.removeEventListener(le,O()(i=t._onStartEditingInputBox).call(i,t)),e.removeEventListener(ce,O()(n=t._onStopEditingInputBox).call(n,t))}),this)}},{key:"setShapeStatus",value:function(t){var e=t.strokeWidth,i=t.strokeColor,n=t.fillColor;this._els.strokeRange.value=e,this._els.strokeColorpicker.color=i,this._els.fillColorpicker.color=n,this.options.stroke=i,this.options.fill=n,this.options.strokeWidth=e,this.actions.setDrawingShape(this.type,{strokeWidth:e})}},{key:"changeStartMode",value:function(){this.actions.stopDrawingMode()}},{key:"changeStandbyMode",value:function(){this.type=null,this.actions.changeSelectableAll(!0),this._els.shapeSelectButton.classList.remove("circle"),this._els.shapeSelectButton.classList.remove("triangle"),this._els.shapeSelectButton.classList.remove("rect")}},{key:"setMaxStrokeValue",value:function(t){var e=t;e<=0&&(e=ri.max),this._els.strokeRange.max=e}},{key:"setStrokeValue",value:function(t){this._els.strokeRange.value=t,this._els.strokeRange.trigger("change")}},{key:"getStrokeValue",value:function(){return this._els.strokeRange.value}},{key:"_changeShapeHandler",value:function(t){var e=t.target.closest(".tui-image-editor-button");if(e){this.actions.stopDrawingMode(),this.actions.discardSelection();var i=this.getButtonType(e,["circle","triangle","rect"]);if(this.type===i)return void this.changeStandbyMode();this.changeStandbyMode(),this.type=i,t.currentTarget.classList.add(i),this.actions.changeSelectableAll(!1),this.actions.modeChange("shape")}}},{key:"_changeStrokeRangeHandler",value:function(t,e){this.options.strokeWidth=xi(t),this.actions.changeShape({strokeWidth:t},!e),this.actions.setDrawingShape(this.type,this.options)}},{key:"_changeFillColorHandler",value:function(t){t=t||"transparent",this.options.fill=t,this.actions.changeShape({fill:t})}},{key:"_changeStrokeColorHandler",value:function(t){t=t||"transparent",this.options.stroke=t,this.actions.changeShape({stroke:t})}}]),i}(In),kn=wn,Tn=function(t){var e,i,n,r,o,a,s,l,c,u,h,f,g,d,v,p,m,y=t.locale,b=t.makeSvgIcon;return L()(e=L()(i=L()(n=L()(r=L()(o=L()(a=L()(s=L()(l=L()(c=L()(u=L()(h=L()(f=L()(g=L()(d=L()(v=L()(p=L()(m='\n
                    \n
                  • \n
                    \n
                    \n '.concat(b(["normal","active"],"shape-rectangle",!0),"\n
                    \n \n
                    \n
                    \n
                    \n ')).call(p,b(["normal","active"],"crop",!0),"\n
                    \n \n
                    \n
                    \n
                    \n ')).call(d,b(["normal","active"],"crop",!0),"\n
                    \n \n
                    \n
                    \n
                    \n ')).call(f,b(["normal","active"],"crop",!0),"\n
                    \n \n
                    \n
                    \n
                    \n ')).call(u,b(["normal","active"],"crop",!0),"\n
                    \n \n
                    \n
                    \n
                    \n ')).call(l,b(["normal","active"],"crop",!0),"\n
                    \n \n
                    \n
                    \n
                    \n ')).call(a,b(["normal","active"],"crop",!0),"\n
                    \n \n
                    \n
                    • \n
                  • \n
                    • \n
                  • \n
                    \n
                    • \n
                  • \n
                    \n ')).call(r,b(["normal","active"],"apply"),"\n \n
                    \n
                    \n ')).call(i,b(["normal","active"],"cancel"),"\n \n
                    \n
                    • \n
                  \n")};function Dn(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var An=function(t){an(i,t);var e=Dn(i);function i(t,n){var r,o=n.locale,a=n.makeSvgIcon,s=n.menuBarPosition,l=n.usageStatistics;return w(this,i),(r=e.call(this,t,{locale:o,name:"crop",makeSvgIcon:a,menuBarPosition:s,templateHtml:Tn,usageStatistics:l})).status="active",r._els={apply:r.selector(".tie-crop-button .apply"),cancel:r.selector(".tie-crop-button .cancel"),preset:r.selector(".tie-crop-preset-button")},r.defaultPresetButton=r._els.preset.querySelector(".preset-none"),r}return T(i,[{key:"destroy",value:function(){this._removeEvent(),Mi(this)}},{key:"addEvent",value:function(t){var e,i,n,r=O()(e=this._applyEventHandler).call(e,this),o=O()(i=this._cancelEventHandler).call(i,this),a=O()(n=this._cropzonePresetEventHandler).call(n,this);this.eventHandler={apply:r,cancel:o,cropzonePreset:a},this.actions=t,this._els.apply.addEventListener("click",r),this._els.cancel.addEventListener("click",o),this._els.preset.addEventListener("click",a)}},{key:"_removeEvent",value:function(){this._els.apply.removeEventListener("click",this.eventHandler.apply),this._els.cancel.removeEventListener("click",this.eventHandler.cancel),this._els.preset.removeEventListener("click",this.eventHandler.cropzonePreset)}},{key:"_applyEventHandler",value:function(){this.actions.crop(),this._els.apply.classList.remove("active")}},{key:"_cancelEventHandler",value:function(){this.actions.cancel(),this._els.apply.classList.remove("active")}},{key:"_cropzonePresetEventHandler",value:function(t){var e=t.target.closest(".tui-image-editor-button.preset");if(e){var i=U(e.className.match(/preset-[^\s]+/),1)[0];this._setPresetButtonActive(e),this.actions.preset(i)}}},{key:"changeStartMode",value:function(){this.actions.modeChange("crop")}},{key:"changeStandbyMode",value:function(){this.actions.stopDrawingMode(),this._setPresetButtonActive()}},{key:"changeApplyButtonStatus",value:function(t){t?this._els.apply.classList.add("active"):this._els.apply.classList.remove("active")}},{key:"_setPresetButtonActive",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.defaultPresetButton;A()(F()).call(F(),h()([]).call(this._els.preset.querySelectorAll(".preset")),(function(t){t.classList.remove("active")})),t&&t.classList.add("active")}}]),i}(In),jn=An,On=function(t){var e,i,n,r,o,a,s=t.locale,l=t.makeSvgIcon;return L()(e=L()(i=L()(n=L()(r=L()(o=L()(a='\n
                    \n
                  • \n
                    \n \n
                    \n \n
                    \n \n
                    \n \n
                    \n
                    • \n
                  • \n
                  • \n
                    \n
                    • \n
                  • \n
                    \n
                    \n \n
                    \n
                    \n
                    • \n
                  • \n
                  • \n
                    \n
                    • \n
                  • \n
                  • \n
                    \n ')).call(r,l(["normal","active"],"apply"),"\n \n
                    \n
                    \n ')).call(i,l(["normal","active"],"cancel"),"\n \n
                    \n
                    • \n
                  \n")};function En(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var Ln=function(t){an(i,t);var e=En(i);function i(t,n){var r,o=n.locale,a=n.makeSvgIcon,s=n.menuBarPosition,l=n.usageStatistics;return w(this,i),(r=e.call(this,t,{locale:o,name:"resize",makeSvgIcon:a,menuBarPosition:s,templateHtml:On,usageStatistics:l})).status="active",r._lockState=!1,r._originalDimensions=null,r._els={widthRange:new xn({slider:r.selector(".tie-width-range"),input:r.selector(".tie-width-range-value")},hi),heightRange:new xn({slider:r.selector(".tie-height-range"),input:r.selector(".tie-height-range-value")},hi),lockAspectRatio:r.selector(".tie-lock-aspect-ratio"),apply:r.selector(".tie-resize-button .apply"),cancel:r.selector(".tie-resize-button .cancel")},r}return T(i,[{key:"changeStartMode",value:function(){this.actions.modeChange("resize");var t=this.actions.getCurrentDimensions();this._originalDimensions=t,this.setWidthValue(t.width),this.setHeightValue(t.height)}},{key:"changeStandbyMode",value:function(){this.actions.stopDrawingMode(),this.actions.reset(!0)}},{key:"setLimit",value:function(t){this._els.widthRange.min=this.calcMinValue(t.minWidth),this._els.heightRange.min=this.calcMinValue(t.minHeight),this._els.widthRange.max=this.calcMaxValue(t.maxWidth),this._els.heightRange.max=this.calcMaxValue(t.maxHeight)}},{key:"calcMaxValue",value:function(t){return t<=0&&(t=hi.max),t}},{key:"calcMinValue",value:function(t){return t<=0&&(t=hi.min),t}},{key:"setWidthValue",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this._els.widthRange.value=t,e&&this._els.widthRange.trigger("change")}},{key:"setHeightValue",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this._els.heightRange.value=t,e&&this._els.heightRange.trigger("change")}},{key:"destroy",value:function(){this._removeEvent(),Mi(this)}},{key:"addEvent",value:function(t){var e,i,n,r,o;this._els.widthRange.on("change",O()(e=this._changeWidthRangeHandler).call(e,this)),this._els.heightRange.on("change",O()(i=this._changeHeightRangeHandler).call(i,this)),this._els.lockAspectRatio.addEventListener("change",O()(n=this._changeLockAspectRatio).call(n,this));var a=O()(r=this._applyEventHandler).call(r,this),s=O()(o=this._cancelEventHandler).call(o,this);this.eventHandler={apply:a,cancel:s},this.actions=t,this._els.apply.addEventListener("click",a),this._els.cancel.addEventListener("click",s)}},{key:"_changeWidthRangeHandler",value:function(t){this.actions.preview("width",xi(t),this._lockState)}},{key:"_changeHeightRangeHandler",value:function(t){this.actions.preview("height",xi(t),this._lockState)}},{key:"_changeLockAspectRatio",value:function(t){this._lockState=t.target.checked,this.actions.lockAspectRatio(this._lockState,hi.min,hi.max)}},{key:"_removeEvent",value:function(){this._els.apply.removeEventListener("click",this.eventHandler.apply),this._els.cancel.removeEventListener("click",this.eventHandler.cancel)}},{key:"_applyEventHandler",value:function(){this.actions.resize(),this._els.apply.classList.remove("active")}},{key:"_cancelEventHandler",value:function(){this.actions.reset(),this._els.cancel.classList.remove("active")}},{key:"changeApplyButtonStatus",value:function(t){t?this._els.apply.classList.add("active"):this._els.apply.classList.remove("active")}}]),i}(In),Nn=Ln,Pn=function(t){var e,i,n,r,o,a=t.locale,s=t.makeSvgIcon;return L()(e=L()(i=L()(n=L()(r=L()(o='\n
                    \n
                  • \n
                    \n
                    \n '.concat(s(["normal","active"],"flip-x",!0),"\n
                    \n \n
                    \n
                    \n
                    \n ')).call(r,s(["normal","active"],"flip-y",!0),"\n
                    \n \n
                    \n
                    • \n
                  • \n
                    \n
                    • \n
                  • \n
                    \n
                    \n ')).call(i,s(["normal","active"],"flip-reset",!0),"\n
                    \n \n
                    \n
                    • \n
                  \n")};function zn(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var Bn=function(t){an(i,t);var e=zn(i);function i(t,n){var r,o=n.locale,a=n.makeSvgIcon,s=n.menuBarPosition,l=n.usageStatistics;return w(this,i),(r=e.call(this,t,{locale:o,name:"flip",makeSvgIcon:a,menuBarPosition:s,templateHtml:Pn,usageStatistics:l})).flipStatus=!1,r._els={flipButton:r.selector(".tie-flip-button")},r}return T(i,[{key:"destroy",value:function(){this._removeEvent(),Mi(this)}},{key:"addEvent",value:function(t){var e;this.eventHandler.changeFlip=O()(e=this._changeFlip).call(e,this),this._actions=t,this._els.flipButton.addEventListener("click",this.eventHandler.changeFlip)}},{key:"_removeEvent",value:function(){this._els.flipButton.removeEventListener("click",this.eventHandler.changeFlip)}},{key:"_changeFlip",value:function(t){var e=this,i=t.target.closest(".tui-image-editor-button");if(i){var n=this.getButtonType(i,["flipX","flipY","resetFlip"]);if(!this.flipStatus&&"resetFlip"===n)return;this._actions.flip(n).then((function(t){var i=e._els.flipButton.classList;e.flipStatus=!1,i.remove("resetFlip"),A()(F()).call(F(),["flipX","flipY"],(function(n){i.remove(n),t[n]&&(i.add(n),i.add("resetFlip"),e.flipStatus=!0)}))}))}}}]),i}(In),Rn=Bn,Fn=function(t){var e,i,n=t.locale,r=t.makeSvgIcon;return L()(e=L()(i='\n
                    \n
                  • \n
                    \n
                    \n '.concat(r(["normal","active"],"rotate-clockwise",!0),'\n
                    \n \n
                    \n
                    \n
                    \n ')).call(i,r(["normal","active"],"rotate-counterclockwise",!0),'\n
                    \n \n
                    \n
                    • \n
                  • \n
                    \n
                    • \n
                  • \n \n
                    \n \n
                    • \n
                  \n')};function Yn(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var Wn=function(t){an(i,t);var e=Yn(i);function i(t,n){var r,o=n.locale,a=n.makeSvgIcon,s=n.menuBarPosition,l=n.usageStatistics;return w(this,i),(r=e.call(this,t,{locale:o,name:"rotate",makeSvgIcon:a,menuBarPosition:s,templateHtml:Fn,usageStatistics:l}))._value=0,r._els={rotateButton:r.selector(".tie-rotate-button"),rotateRange:new xn({slider:r.selector(".tie-rotate-range"),input:r.selector(".tie-rotate-range-value")},ii)},r}return T(i,[{key:"destroy",value:function(){this._removeEvent(),this._els.rotateRange.destroy(),Mi(this)}},{key:"setRangeBarAngle",value:function(t,e){var i=e;"rotate"===t&&(i=Z()(this._els.rotateRange.value,10)+e),this._setRangeBarRatio(i)}},{key:"_setRangeBarRatio",value:function(t){this._els.rotateRange.value=t}},{key:"addEvent",value:function(t){var e,i;this.eventHandler.rotationAngleChanged=O()(e=this._changeRotateForButton).call(e,this),this.actions=t,this._els.rotateButton.addEventListener("click",this.eventHandler.rotationAngleChanged),this._els.rotateRange.on("change",O()(i=this._changeRotateForRange).call(i,this))}},{key:"_removeEvent",value:function(){this._els.rotateButton.removeEventListener("click",this.eventHandler.rotationAngleChanged),this._els.rotateRange.off()}},{key:"_changeRotateForRange",value:function(t,e){var i=xi(t);this.actions.setAngle(i,!e),this._value=i}},{key:"_changeRotateForButton",value:function(t){var e=t.target.closest(".tui-image-editor-button"),i=this._els.rotateRange.value;if(e){var n={clockwise:30,counterclockwise:-30}[this.getButtonType(e,["counterclockwise","clockwise"])],r=Z()(i,10)+n;r>=-360&&r<=360&&this.actions.rotate(n)}}}]),i}(In),Hn=Wn,Un=function(t){var e,i,n,r,o,a,s,l,c,u,h,f,g,d=t.locale,v=t.makeSvgIcon;return L()(e=L()(i=L()(n=L()(r=L()(o=L()(a=L()(s=L()(l=L()(c=L()(u=L()(h=L()(f=L()(g='\n
                    \n
                  • \n
                    \n
                    \n '.concat(v(["normal","active"],"text-bold",!0),"\n
                    \n \n
                    \n
                    \n
                    \n ')).call(f,v(["normal","active"],"text-italic",!0),"\n
                    \n \n
                    \n
                    \n
                    \n ')).call(u,v(["normal","active"],"text-underline",!0),"\n
                    \n \n
                    \n
                    • \n
                  • \n
                    \n
                    • \n
                  • \n
                    \n
                    \n ')).call(l,v(["normal","active"],"text-align-left",!0),"\n
                    \n \n
                    \n
                    \n
                    \n ')).call(a,v(["normal","active"],"text-align-center",!0),"\n
                    \n \n
                    \n
                    \n
                    \n ')).call(r,v(["normal","active"],"text-align-right",!0),"\n
                    \n \n
                    \n
                    • \n
                  • \n
                    \n
                    • \n
                  • \n
                    \n
                    • \n
                  • \n
                    \n
                    • \n
                  • \n \n
                    \n \n
                    • \n
                  \n')};function Gn(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var Xn=function(t){an(i,t);var e=Gn(i);function i(t,n){var r,o=n.locale,a=n.makeSvgIcon,s=n.menuBarPosition,l=n.usageStatistics;return w(this,i),(r=e.call(this,t,{locale:o,name:"text",makeSvgIcon:a,menuBarPosition:s,templateHtml:Un,usageStatistics:l})).effect={bold:!1,italic:!1,underline:!1},r.align="tie-text-align-left",r._els={textEffectButton:r.selector(".tie-text-effect-button"),textAlignButton:r.selector(".tie-text-align-button"),textColorpicker:new mn(r.selector(".tie-text-color"),{defaultColor:"#ffbb3b",toggleDirection:r.toggleDirection,usageStatistics:r.usageStatistics}),textRange:new xn({slider:r.selector(".tie-text-range"),input:r.selector(".tie-text-range-value")},oi)},r.colorPickerInputBox=r._els.textColorpicker.colorpickerElement.querySelector(ue),r}return T(i,[{key:"destroy",value:function(){this._removeEvent(),this._els.textColorpicker.destroy(),this._els.textRange.destroy(),Mi(this)}},{key:"addEvent",value:function(t){var e,i,n,r,o,a,s=O()(e=this._setTextEffectHandler).call(e,this),l=O()(i=this._setTextAlignHandler).call(i,this);this.eventHandler={setTextEffect:s,setTextAlign:l},this.actions=t,this._els.textEffectButton.addEventListener("click",s),this._els.textAlignButton.addEventListener("click",l),this._els.textRange.on("change",O()(n=this._changeTextRnageHandler).call(n,this)),this._els.textColorpicker.on("change",O()(r=this._changeColorHandler).call(r,this)),this.colorPickerInputBox.addEventListener(le,O()(o=this._onStartEditingInputBox).call(o,this)),this.colorPickerInputBox.addEventListener(ce,O()(a=this._onStopEditingInputBox).call(a,this))}},{key:"_removeEvent",value:function(){var t,e,i=this.eventHandler,n=i.setTextEffect,r=i.setTextAlign;this._els.textEffectButton.removeEventListener("click",n),this._els.textAlignButton.removeEventListener("click",r),this._els.textRange.off(),this._els.textColorpicker.off(),this.colorPickerInputBox.removeEventListener(le,O()(t=this._onStartEditingInputBox).call(t,this)),this.colorPickerInputBox.removeEventListener(ce,O()(e=this._onStopEditingInputBox).call(e,this))}},{key:"changeStandbyMode",value:function(){this.actions.stopDrawingMode()}},{key:"changeStartMode",value:function(){this.actions.modeChange("text")}},{key:"textColor",get:function(){return this._els.textColorpicker.color},set:function(t){this._els.textColorpicker.color=t}},{key:"fontSize",get:function(){return this._els.textRange.value},set:function(t){this._els.textRange.value=t}},{key:"fontStyle",get:function(){return this.effect.italic?"italic":"normal"}},{key:"fontWeight",get:function(){return this.effect.bold?"bold":"normal"}},{key:"underline",get:function(){return this.effect.underline}},{key:"setTextStyleStateOnAction",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=J()(t),i=t.fontSize,n=t.fontStyle,r=t.fontWeight,o=t.textDecoration,a=t.textAlign;this.textColor=e,this.fontSize=i,this.setEffectState("italic",n),this.setEffectState("bold",r),this.setEffectState("underline",o),this.setAlignState("tie-text-align-".concat(a))}},{key:"setEffectState",value:function(t,e){var i="italic"===e||"bold"===e||"underline"===e,n=this._els.textEffectButton.querySelector(".tui-image-editor-button.".concat(t));this.effect[t]=i,n.classList[i?"add":"remove"]("active")}},{key:"setAlignState",value:function(t){var e=this._els.textAlignButton;e.classList.remove(this.align),e.classList.add(t),this.align=t}},{key:"_setTextEffectHandler",value:function(t){var e=t.target.closest(".tui-image-editor-button");if(e){var i=U(e.className.match(/(bold|italic|underline)/),1)[0],n={bold:{fontWeight:"bold"},italic:{fontStyle:"italic"},underline:{textDecoration:"underline"}}[i];this.effect[i]=!this.effect[i],e.classList.toggle("active"),this.actions.changeTextStyle(n)}}},{key:"_setTextAlignHandler",value:function(t){var e=t.target.closest(".tui-image-editor-button");if(e){var i=this.getButtonType(e,["left","center","right"]),n="tie-text-align-".concat(i);t.currentTarget.classList.remove(this.align),this.align!==n&&t.currentTarget.classList.add(n),this.actions.changeTextStyle({textAlign:i}),this.align=n}}},{key:"_changeTextRnageHandler",value:function(t,e){this.actions.changeTextStyle({fontSize:t},!e)}},{key:"_changeColorHandler",value:function(t){t=t||"transparent",this.actions.changeTextStyle({fill:t})}}]),i}(In),Zn=Xn,Vn=function(t){var e,i,n,r=t.locale,o=t.makeSvgIcon;return L()(e=L()(i=L()(n='\n
                    \n
                  • \n
                    \n
                    \n \n '.concat(o(["normal","active"],"mask-load",!0),"\n
                    \n \n
                    \n
                    • \n
                  • \n
                    \n
                    • \n
                  • \n
                    \n ')).call(i,o(["normal","active"],"apply"),"\n \n
                    \n
                    • \n
                  \n")};function Jn(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var Qn=function(t){an(i,t);var e=Jn(i);function i(t,n){var r,o=n.locale,a=n.makeSvgIcon,s=n.menuBarPosition,l=n.usageStatistics;return w(this,i),(r=e.call(this,t,{locale:o,name:"mask",makeSvgIcon:a,menuBarPosition:s,templateHtml:Vn,usageStatistics:l}))._els={applyButton:r.selector(".tie-mask-apply"),maskImageButton:r.selector(".tie-mask-image-file")},r}return T(i,[{key:"destroy",value:function(){this._removeEvent(),Mi(this)}},{key:"addEvent",value:function(t){var e,i,n=O()(e=this._loadMaskFile).call(e,this),r=O()(i=this._applyMask).call(i,this);this.eventHandler={loadMaskFile:n,applyMask:r},this.actions=t,this._els.maskImageButton.addEventListener("change",n),this._els.applyButton.addEventListener("click",r)}},{key:"_removeEvent",value:function(){this._els.maskImageButton.removeEventListener("change",this.eventHandler.loadMaskFile),this._els.applyButton.removeEventListener("click",this.eventHandler.applyMask)}},{key:"_applyMask",value:function(){this.actions.applyFilter(),this._els.applyButton.classList.remove("active")}},{key:"_loadMaskFile",value:function(t){var e;Ii()||alert("This browser does not support file-api");var i=U(t.target.files,1)[0];i&&(e=B().createObjectURL(i),this.actions.loadImageFromURL(e,i),this._els.applyButton.classList.add("active"))}}]),i}(In),Kn=Qn,qn=function(t){var e,i,n,r,o,a,s,l,c,u,h,f,g,d,v,p,m,y,b,x,C=t.locale,I=t.makeSvgIcon;return L()(e=L()(i=L()(n=L()(r=L()(o=L()(a=L()(s=L()(l=L()(c=L()(u=L()(h=L()(f=L()(g=L()(d=L()(v=L()(p=L()(m=L()(y=L()(b=L()(x='\n
                    \n
                  • \n
                    \n
                    \n '.concat(I(["normal","active"],"icon-arrow",!0),"\n
                    \n \n
                    \n
                    \n
                    \n ')).call(b,I(["normal","active"],"icon-arrow-2",!0),"\n
                    \n \n
                    \n
                    \n
                    \n ')).call(m,I(["normal","active"],"icon-arrow-3",!0),"\n
                    \n \n
                    \n
                    \n
                    \n ')).call(v,I(["normal","active"],"icon-star",!0),"\n
                    \n \n
                    \n
                    \n
                    \n ')).call(g,I(["normal","active"],"icon-star-2",!0),"\n
                    \n \n
                    \n\n
                    \n
                    \n ')).call(h,I(["normal","active"],"icon-polygon",!0),"\n
                    \n \n
                    \n\n
                    \n
                    \n ')).call(c,I(["normal","active"],"icon-location",!0),"\n
                    \n \n
                    \n\n
                    \n
                    \n ')).call(s,I(["normal","active"],"icon-heart",!0),"\n
                    \n \n
                    \n\n
                    \n
                    \n ')).call(o,I(["normal","active"],"icon-bubble",!0),"\n
                    \n \n
                    \n
                    • \n
                  • \n
                    \n
                    • \n
                  • \n
                    \n
                    \n \n ')).call(n,I(["normal","active"],"icon-load",!0),"\n
                    \n \n
                    \n
                    • \n
                  • \n
                    \n
                    • \n
                  • \n
                    \n
                    • \n
                  \n')};function $n(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var tr=function(t){an(i,t);var e=$n(i);function i(t,n){var r,o=n.locale,a=n.makeSvgIcon,s=n.menuBarPosition,l=n.usageStatistics;return w(this,i),(r=e.call(this,t,{locale:o,name:"icon",makeSvgIcon:a,menuBarPosition:s,templateHtml:qn,usageStatistics:l})).iconType=null,r._iconMap={},r._els={registerIconButton:r.selector(".tie-icon-image-file"),addIconButton:r.selector(".tie-icon-add-button"),iconColorpicker:new mn(r.selector(".tie-icon-color"),{defaultColor:"#ffbb3b",toggleDirection:r.toggleDirection,usageStatistics:r.usageStatistics})},r.colorPickerInputBox=r._els.iconColorpicker.colorpickerElement.querySelector(ue),r}return T(i,[{key:"destroy",value:function(){this._removeEvent(),this._els.iconColorpicker.destroy(),Mi(this)}},{key:"addEvent",value:function(t){var e,i,n,r,o,a=O()(e=this._registerIconHandler).call(e,this),s=O()(i=this._addIconHandler).call(i,this);this.eventHandler={registerIcon:a,addIcon:s},this.actions=t,this._els.iconColorpicker.on("change",O()(n=this._changeColorHandler).call(n,this)),this._els.registerIconButton.addEventListener("change",a),this._els.addIconButton.addEventListener("click",s),this.colorPickerInputBox.addEventListener(le,O()(r=this._onStartEditingInputBox).call(r,this)),this.colorPickerInputBox.addEventListener(ce,O()(o=this._onStopEditingInputBox).call(o,this))}},{key:"_removeEvent",value:function(){var t,e;this._els.iconColorpicker.off(),this._els.registerIconButton.removeEventListener("change",this.eventHandler.registerIcon),this._els.addIconButton.removeEventListener("click",this.eventHandler.addIcon),this.colorPickerInputBox.removeEventListener(le,O()(t=this._onStartEditingInputBox).call(t,this)),this.colorPickerInputBox.removeEventListener(ce,O()(e=this._onStopEditingInputBox).call(e,this))}},{key:"clearIconType",value:function(){this._els.addIconButton.classList.remove(this.iconType),this.iconType=null}},{key:"registerDefaultIcon",value:function(){var t=this;A()(F()).call(F(),ei,(function(e,i){t.actions.registerDefaultIcons(i,e)}))}},{key:"setIconPickerColor",value:function(t){this._els.iconColorpicker.color=t}},{key:"changeStandbyMode",value:function(){this.clearIconType(),this.actions.cancelAddIcon()}},{key:"_changeColorHandler",value:function(t){t=t||"transparent",this.actions.changeColor(t)}},{key:"_addIconHandler",value:function(t){var e=t.target.closest(".tui-image-editor-button");if(e){var i=e.getAttribute("data-icontype"),n=this._els.iconColorpicker.color;this.actions.discardSelection(),this.actions.changeSelectableAll(!1),this._els.addIconButton.classList.remove(this.iconType),this._els.addIconButton.classList.add(i),this.iconType===i?this.changeStandbyMode():(this.actions.addIcon(i,n),this.iconType=i)}}},{key:"_registerIconHandler",value:function(t){var e;Ii||alert("This browser does not support file-api");var i=U(t.target.files,1)[0];i&&(e=B().createObjectURL(i),this.actions.registerCustomIcon(e,i))}}]),i}(In),er=tr,ir=function(t){var e,i,n,r,o,a=t.locale,s=t.makeSvgIcon;return L()(e=L()(i=L()(n=L()(r=L()(o='\n
                    \n
                  • \n
                    \n
                    \n '.concat(s(["normal","active"],"draw-free",!0),"\n
                    \n \n
                    \n
                    \n
                    \n ')).call(r,s(["normal","active"],"draw-line",!0),"\n
                    \n \n
                    \n
                    • \n
                  • \n
                    \n
                    • \n
                  • \n
                    \n
                    • \n
                  • \n
                    \n
                    • \n
                  • \n \n
                    \n \n
                    • \n
                  \n')};function nr(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var rr=function(t){an(i,t);var e=nr(i);function i(t,n){var r,o=n.locale,a=n.makeSvgIcon,s=n.menuBarPosition,l=n.usageStatistics;return w(this,i),(r=e.call(this,t,{locale:o,name:"draw",makeSvgIcon:a,menuBarPosition:s,templateHtml:ir,usageStatistics:l}))._els={lineSelectButton:r.selector(".tie-draw-line-select-button"),drawColorPicker:new mn(r.selector(".tie-draw-color"),{defaultColor:"#00a9ff",toggleDirection:r.toggleDirection,usageStatistics:r.usageStatistics}),drawRange:new xn({slider:r.selector(".tie-draw-range"),input:r.selector(".tie-draw-range-value")},ni)},r.type=null,r.color=r._els.drawColorPicker.color,r.width=r._els.drawRange.value,r.colorPickerInputBox=r._els.drawColorPicker.colorpickerElement.querySelector(ue),r}return T(i,[{key:"destroy",value:function(){this._removeEvent(),this._els.drawColorPicker.destroy(),this._els.drawRange.destroy(),Mi(this)}},{key:"addEvent",value:function(t){var e,i,n,r,o;this.eventHandler.changeDrawType=O()(e=this._changeDrawType).call(e,this),this.actions=t,this._els.lineSelectButton.addEventListener("click",this.eventHandler.changeDrawType),this._els.drawColorPicker.on("change",O()(i=this._changeDrawColor).call(i,this)),this._els.drawRange.on("change",O()(n=this._changeDrawRange).call(n,this)),this.colorPickerInputBox.addEventListener(le,O()(r=this._onStartEditingInputBox).call(r,this)),this.colorPickerInputBox.addEventListener(ce,O()(o=this._onStopEditingInputBox).call(o,this))}},{key:"_removeEvent",value:function(){var t,e;this._els.lineSelectButton.removeEventListener("click",this.eventHandler.changeDrawType),this._els.drawColorPicker.off(),this._els.drawRange.off(),this.colorPickerInputBox.removeEventListener(le,O()(t=this._onStartEditingInputBox).call(t,this)),this.colorPickerInputBox.removeEventListener(ce,O()(e=this._onStopEditingInputBox).call(e,this))}},{key:"setDrawMode",value:function(){this.actions.setDrawMode(this.type,{width:this.width,color:_i(this.color,.7)})}},{key:"changeStandbyMode",value:function(){this.type=null,this.actions.stopDrawingMode(),this.actions.changeSelectableAll(!0),this._els.lineSelectButton.classList.remove("free"),this._els.lineSelectButton.classList.remove("line")}},{key:"changeStartMode",value:function(){this.type="free",this._els.lineSelectButton.classList.add("free"),this.setDrawMode()}},{key:"_changeDrawType",value:function(t){var e=t.target.closest(".tui-image-editor-button");if(e){var i=this.getButtonType(e,["free","line"]);if(this.actions.discardSelection(),this.type===i)return void this.changeStandbyMode();this.changeStandbyMode(),this.type=i,this._els.lineSelectButton.classList.add(i),this.setDrawMode()}}},{key:"_changeDrawColor",value:function(t){this.color=t||"transparent",this.type?this.setDrawMode():this.changeStartMode()}},{key:"_changeDrawRange",value:function(t){this.width=t,this.type?this.setDrawMode():this.changeStartMode()}}]),i}(In),or=rr,ar=function(t){var e,i,n,r,o,a,s,l,c,u,h,f,g,d,v,p,m=t.locale;return L()(e=L()(i=L()(n=L()(r=L()(o=L()(a=L()(s=L()(l=L()(c=L()(u=L()(h=L()(f=L()(g=L()(d=L()(v=L()(p='\n
                    \n
                  • \n
                    \n
                    \n \n
                    \n
                    \n \n
                    \n
                    \n \n
                    \n
                    \n \n
                    \n
                    \n \n
                    \n
                    \n \n
                    \n
                    \n \n
                    \n
                    \n
                    • \n
                  • \n
                    \n
                    • \n
                  • \n
                    \n
                    \n
                    \n \n
                    \n
                    \n
                    \n \n
                    \n
                    \n
                    \n
                    \n
                    \n \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    • \n
                  • \n
                    \n
                    • \n
                  • \n
                    \n
                    \n \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n
                    \n \n
                    \n
                    \n
                    \n \n
                    \n
                    \n
                    \n
                    • \n
                  • \n
                    \n
                    • \n
                  • \n
                    \n
                    \n
                    \n \n
                    \n
                    \n
                    \n
                    \n
                    \n \n
                    \n
                    \n
                    \n
                    \n
                    \n \n
                    \n
                    \n
                    • \n
                  \n')};function sr(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var lr="130px",cr=["add","diff","subtract","multiply","screen","lighten","darken"],ur=["grayscale","invert","sepia","vintage","blur","sharpen","emboss","remove-white","brightness","noise","pixelate","color-filter","tint","multiply","blend"],hr={grayscale:"grayscale",invert:"invert",sepia:"sepia",blur:"blur",sharpen:"sharpen",emboss:"emboss",removeWhite:"removeColor",brightness:"brightness",contrast:"contrast",saturation:"saturation",vintage:"vintage",polaroid:"polaroid",noise:"noise",pixelate:"pixelate",colorFilter:"removeColor",tint:"blendColor",multiply:"blendColor",blend:"blendColor",hue:"hue",gamma:"gamma"},fr=["removewhiteDistanceRange","colorfilterThresholdRange","pixelateRange","noiseRange","brightnessRange","tintOpacity"],gr=["filterBlendColor","filterMultiplyColor","filterTintColor"],dr=function(t){an(i,t);var e=sr(i);function i(t,n){var r,o=n.locale,a=n.menuBarPosition,s=n.usageStatistics;return w(this,i),(r=e.call(this,t,{locale:o,name:"filter",menuBarPosition:a,templateHtml:ar,usageStatistics:s})).selectBoxShow=!1,r.checkedMap={},r._makeControlElement(),r}return T(i,[{key:"destroy",value:function(){this._removeEvent(),this._destroyToolInstance(),Mi(this)}},{key:"_removeEvent",value:function(){var t,e=this;A()(F()).call(F(),ur,(function(t){var i=e.selector(".tie-".concat(t)),n=Ci(t);i.removeEventListener("change",e.eventHandler[n])})),A()(F()).call(F(),L()(t=[]).call(t,fr,gr),(function(t){e._els[t].off()})),this._els.blendType.removeEventListener("change",this.eventHandler.changeBlendFilter),this._els.blendType.removeEventListener("click",this.eventHandler.changeBlendFilter),F().forEachArray(this.colorPickerInputBoxes,(function(t){var i,n;t.removeEventListener(le,O()(i=e._onStartEditingInputBox).call(i,e)),t.removeEventListener(ce,O()(n=e._onStopEditingInputBox).call(n,e))}),this)}},{key:"_destroyToolInstance",value:function(){var t,e=this;A()(F()).call(F(),L()(t=[]).call(t,fr,gr),(function(t){e._els[t].destroy()}))}},{key:"addEvent",value:function(t){var e,i,n,r=this,o=t.applyFilter,a=function(t){var e;return O()(e=r._changeFilterState).call(e,r,o,t)},s=function(t){return function(e,i){return r._changeFilterState(o,t,i)}};this.eventHandler={changeBlendFilter:a("blend"),blandTypeClick:function(t){return t.stopPropagation()}},A()(F()).call(F(),ur,(function(t){var e=r.selector(".tie-".concat(t)),i=Ci(t);r.checkedMap[i]=e,r.eventHandler[i]=a(i),e.addEventListener("change",r.eventHandler[i])})),this._els.removewhiteDistanceRange.on("change",s("removeWhite")),this._els.colorfilterThresholdRange.on("change",s("colorFilter")),this._els.pixelateRange.on("change",s("pixelate")),this._els.noiseRange.on("change",s("noise")),this._els.brightnessRange.on("change",s("brightness")),this._els.filterBlendColor.on("change",this.eventHandler.changeBlendFilter),this._els.filterMultiplyColor.on("change",a("multiply")),this._els.filterTintColor.on("change",a("tint")),this._els.tintOpacity.on("change",s("tint")),this._els.filterMultiplyColor.on("changeShow",O()(e=this.colorPickerChangeShow).call(e,this)),this._els.filterTintColor.on("changeShow",O()(i=this.colorPickerChangeShow).call(i,this)),this._els.filterBlendColor.on("changeShow",O()(n=this.colorPickerChangeShow).call(n,this)),this._els.blendType.addEventListener("change",this.eventHandler.changeBlendFilter),this._els.blendType.addEventListener("click",this.eventHandler.blandTypeClick),F().forEachArray(this.colorPickerInputBoxes,(function(t){var e,i;t.addEventListener(le,O()(e=r._onStartEditingInputBox).call(e,r)),t.addEventListener(ce,O()(i=r._onStopEditingInputBox).call(i,r))}),this)}},{key:"setFilterState",value:function(t){var e=t.type,i=t.options,n=t.action,r=this._getFilterNameFromOptions(e,i),o="remove"===n;o||this._setFilterState(r,i),this.checkedMap[r].checked=!o}},{key:"initFilterCheckBoxState",value:function(){A()(F()).call(F(),this.checkedMap,(function(t){t.checked=!1}),this)}},{key:"_setFilterState",value:function(t,e){"colorFilter"===t?this._els.colorfilterThresholdRange.value=e.distance:"removeWhite"===t?this._els.removewhiteDistanceRange.value=e.distance:"pixelate"===t?this._els.pixelateRange.value=e.blocksize:"brightness"===t?this._els.brightnessRange.value=e.brightness:"noise"===t?this._els.noiseRange.value=e.noise:"tint"===t?(this._els.tintOpacity.value=e.alpha,this._els.filterTintColor.color=e.color):"blend"===t?this._els.filterBlendColor.color=e.color:"multiply"===t&&(this._els.filterMultiplyColor.color=e.color)}},{key:"_getFilterNameFromOptions",value:function(t,e){var i=t;return"removeColor"===t?i=F().isExisty(e.useAlpha)?"removeWhite":"colorFilter":"blendColor"===t&&(i={add:"blend",multiply:"multiply",tint:"tint"}[e.mode]),i}},{key:"_changeFilterState",value:function(t,e){var i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],n=this.checkedMap[e].checked,r=hr[e],o=this.checkedMap[e].closest(".tui-image-editor-checkbox-group");o&&(n?o.classList.remove("tui-image-editor-disabled"):o.classList.add("tui-image-editor-disabled")),t(n,r,this._getFilterOption(e),!i)}},{key:"_getFilterOption",value:function(t){var e={};switch(t){case"removeWhite":e.color="#FFFFFF",e.useAlpha=!1,e.distance=Ji()(this._els.removewhiteDistanceRange.value);break;case"colorFilter":e.color="#FFFFFF",e.distance=Ji()(this._els.colorfilterThresholdRange.value);break;case"pixelate":e.blocksize=xi(this._els.pixelateRange.value);break;case"noise":e.noise=xi(this._els.noiseRange.value);break;case"brightness":e.brightness=Ji()(this._els.brightnessRange.value);break;case"blend":e.mode="add",e.color=this._els.filterBlendColor.color,e.mode=this._els.blendType.value;break;case"multiply":e.mode="multiply",e.color=this._els.filterMultiplyColor.color;break;case"tint":e.mode="tint",e.color=this._els.filterTintColor.color,e.alpha=this._els.tintOpacity.value;break;case"blur":e.blur=this._els.blurRange.value}return e}},{key:"_makeControlElement",value:function(){this._els={removewhiteDistanceRange:new xn({slider:this.selector(".tie-removewhite-distance-range")},ai.removewhiteDistanceRange),brightnessRange:new xn({slider:this.selector(".tie-brightness-range")},ai.brightnessRange),noiseRange:new xn({slider:this.selector(".tie-noise-range")},ai.noiseRange),pixelateRange:new xn({slider:this.selector(".tie-pixelate-range")},ai.pixelateRange),colorfilterThresholdRange:new xn({slider:this.selector(".tie-colorfilter-threshold-range")},ai.colorfilterThresholdRange),filterTintColor:new mn(this.selector(".tie-filter-tint-color"),{defaultColor:"#03bd9e",toggleDirection:this.toggleDirection,usageStatistics:this.usageStatistics}),filterMultiplyColor:new mn(this.selector(".tie-filter-multiply-color"),{defaultColor:"#515ce6",toggleDirection:this.toggleDirection,usageStatistics:this.usageStatistics}),filterBlendColor:new mn(this.selector(".tie-filter-blend-color"),{defaultColor:"#ffbb3b",toggleDirection:this.toggleDirection,usageStatistics:this.usageStatistics}),blurRange:ai.blurFilterRange},this._els.tintOpacity=this._pickerWithRange(this._els.filterTintColor.pickerControl),this._els.blendType=this._pickerWithSelectbox(this._els.filterBlendColor.pickerControl),this.colorPickerControls.push(this._els.filterTintColor),this.colorPickerControls.push(this._els.filterMultiplyColor),this.colorPickerControls.push(this._els.filterBlendColor),this.colorPickerInputBoxes=[],this.colorPickerInputBoxes.push(this._els.filterTintColor.colorpickerElement.querySelector(ue)),this.colorPickerInputBoxes.push(this._els.filterMultiplyColor.colorpickerElement.querySelector(ue)),this.colorPickerInputBoxes.push(this._els.filterBlendColor.colorpickerElement.querySelector(ue))}},{key:"_pickerWithRange",value:function(t){var e=document.createElement("div"),i=document.createElement("label"),n=document.createElement("div");return n.id="tie-filter-tint-opacity",i.innerHTML="Opacity",e.appendChild(i),e.appendChild(n),t.appendChild(e),t.style.height=lr,new xn({slider:n},ai.tintOpacityRange)}},{key:"_pickerWithSelectbox",value:function(t){var e=document.createElement("div"),i=document.createElement("select"),n=document.createElement("ul");return e.className="tui-image-editor-selectlist-wrap",n.className="tui-image-editor-selectlist",e.appendChild(i),e.appendChild(n),this._makeSelectOptionList(i),t.appendChild(e),t.style.height=lr,this._drawSelectOptionList(i,n),this._pickerWithSelectboxForAddEvent(i,n),i}},{key:"_drawSelectOptionList",value:function(t,e){var i=t.querySelectorAll("option");A()(F()).call(F(),i,(function(t){var i=document.createElement("li");i.innerHTML=t.innerHTML,i.setAttribute("data-item",t.value),e.appendChild(i)}))}},{key:"_pickerWithSelectboxForAddEvent",value:function(t,e){var i=this;e.addEventListener("click",(function(n){var r=n.target.getAttribute("data-item"),o=document.createEvent("HTMLEvents");t.querySelector('[value="'.concat(r,'"]')).selected=!0,o.initEvent("change",!0,!0),t.dispatchEvent(o),i.selectBoxShow=!1,e.style.display="none"})),t.addEventListener("mousedown",(function(n){n.preventDefault(),i.selectBoxShow=!i.selectBoxShow,e.style.display=i.selectBoxShow?"block":"none",e.setAttribute("data-selectitem",t.value),e.querySelector("[data-item='".concat(t.value,"']")).classList.add("active")}))}},{key:"_makeSelectOptionList",value:function(t){A()(F()).call(F(),cr,(function(e){var i=document.createElement("option");i.setAttribute("value",e),i.innerHTML=e.replace(/^[a-z]/,(function(t){return t.toUpperCase()})),t.appendChild(i)}))}}]),i}(In),vr=dr,pr=r(4383),mr=r.n(pr);function yr(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var br="selected-item",xr="disabled-item",Cr=function(t){an(i,t);var e=yr(i);function i(t,n){var r,o=n.locale,a=n.makeSvgIcon;return w(this,i),r=e.call(this,t,{name:"history"}),t.classList.add("enabled"),r.locale=o,r.makeSvgIcon=a,r._eventHandler={},r._historyIndex=r.getListLength(),r}return T(i,[{key:"add",value:function(t){var e=t.name,i=t.detail;this._hasDisabledItem()&&this.deleteListItemElement(this._historyIndex+1,this.getListLength());var n=function(t){var e,i,n,r=t.locale,o=t.makeSvgIcon,a=t.name,s=t.detail;return L()(e=L()(i=L()(n='\n
                  \n
                  \n '.concat(o(["normal","active"],"history-".concat(a.toLowerCase()),!0),"\n
                  \n \n ")).call(n,r.localize(a),"\n ")).call(i,s?"(".concat(r.localize(s),")"):"",'\n \n
                  \n ')).call(e,o(["normal"],"history-check",!0),"\n
                  \n
                  \n")}({locale:this.locale,makeSvgIcon:this.makeSvgIcon,name:e,detail:i}),r=this.makeListItemElement(n);this.pushListItemElement(r),this._historyIndex=this.getListLength()-1,this._selectItem(this._historyIndex)}},{key:"init",value:function(){this.deleteListItemElement(1,this.getListLength()),this._historyIndex=0,this._selectItem(this._historyIndex)}},{key:"clear",value:function(){this.deleteListItemElement(0,this.getListLength()),this._historyIndex=-1}},{key:"prev",value:function(){this._historyIndex-=1,this._selectItem(this._historyIndex)}},{key:"next",value:function(){this._historyIndex+=1,this._selectItem(this._historyIndex)}},{key:"_hasDisabledItem",value:function(){return this.getListLength()-1>this._historyIndex}},{key:"_addHistoryEventListener",value:function(){var t=this;this._eventHandler.history=function(e){return t._clickHistoryItem(e)},this.listElement.addEventListener("click",this._eventHandler.history)}},{key:"_removeHistoryEventListener",value:function(){this.listElement.removeEventListener("click",this._eventHandler.history)}},{key:"_clickHistoryItem",value:function(t){var e=t.target.closest(".".concat("history-item"));if(e){var i=mr()(e.getAttribute("data-index"),10);if(i!==this._historyIndex){var n=Math.abs(i-this._historyIndex);it&&this.addClass(e,xr);this.addClass(t,br)}},{key:"destroy",value:function(){this.removeEvent(),Mi(this)}},{key:"addEvent",value:function(t){this._actions=t,this._addHistoryEventListener()}},{key:"removeEvent",value:function(){this._removeHistoryEventListener()}}]),i}(function(){function t(e,i){var n=i.name;w(this,t),this.name=n,this.items=[],this.panelElement=this._makePanelElement(),this.listElement=this._makeListElement(),this.panelElement.appendChild(this.listElement),e.appendChild(this.panelElement)}return T(t,[{key:"_makePanelElement",value:function(){var t=document.createElement("div");return t.className="tie-panel-".concat(this.name),t}},{key:"_makeListElement",value:function(){var t=document.createElement("ol");return t.className="".concat(this.name,"-list"),t}},{key:"makeListItemElement",value:function(t){var e=document.createElement("li");return e.innerHTML=t,e.className="".concat(this.name,"-item"),e.setAttribute("data-index",this.items.length),e}},{key:"pushListItemElement",value:function(t){this.listElement.appendChild(t),this.listElement.scrollTop+=t.offsetHeight,this.items.push(t)}},{key:"deleteListItemElement",value:function(t,e){for(var i=this.items,n=t;n0&&void 0!==arguments[0]?arguments[0]:{},e=t.uiSize,i=t.imageSize,n=void 0===i?this.imageSize:i;n!==this.imageSize&&(this.imageSize=n),e&&this._setUiSize(e);var r=this._getCanvasMaxDimension(),o=r.width,a=r.height,s=this._editorElement.style,l=this.options.menuBarPosition;s.height="".concat(a,"px"),s.width="".concat(o,"px"),this._setEditorPosition(l),this._editorElementWrap.style.bottom="0px",this._editorElementWrap.style.top="0px",this._editorElementWrap.style.left="0px",this._editorElementWrap.style.width="100%";var c=this._selectedElement.classList;"top"===l&&this._selectedElement.offsetWidth0&&void 0!==arguments[0]?arguments[0]:this.options.uiSize,e=this._selectedElement.style;e.width=t.width,e.height=t.height}},{key:"_makeSubMenu",value:function(){var t=this;A()(F()).call(F(),this.options.menu,(function(e){var i,n=Sr[e.replace(/^[a-z]/,(function(t){return t.toUpperCase()}))];t._makeMenuElement(e),t._buttonElements[e]=t._menuBarElement.querySelector(".tie-btn-".concat(e)),t[e]=new n(t._subMenuElement,{locale:t._locale,makeSvgIcon:O()(i=t.theme.makeMenSvgIconSet).call(i,t.theme),menuBarPosition:t.options.menuBarPosition,usageStatistics:t.options.usageStatistics})}))}},{key:"_attachHistoryEvent",value:function(){var t,e,i;this.on(qt,O()(t=this._addHistory).call(t,this)),this.on($t,O()(e=this._selectPrevHistory).call(e,this)),this.on(te,O()(i=this._selectNextHistory).call(i,this))}},{key:"_attachZoomEvent",value:function(){var t=this;this.on(ie,(function(){t.offZoomInButtonStatus(),t.changeHandButtonStatus(!0)})),this.on(ne,(function(){return t.changeHandButtonStatus(!1)}))}},{key:"_makeUiElement",value:function(t){var e,i;window.snippet=F(),i=t.nodeType?t:document.querySelector(t);var n,r=(n=i,function(t){return n.querySelector(t)});i.classList.add("tui-image-editor-container"),i.innerHTML=function(t){var e,i,n,r,o,a,s=t.locale,l=t.biImage,c=t.loadButtonStyle,u=t.downloadButtonStyle,h=t.menuBarPosition;return L()(e=L()(i=L()(n=L()(r=L()(o='\n
                    \n
                    \n \n
                      \n\n
                      \n
                      \n ')).call(n,s.localize("Load"),'\n \n
                      \n \n
                      \n
                      \n")}({locale:this._locale,biImage:this.theme.getStyle("common.bi"),loadButtonStyle:this.theme.getStyle("loadButton"),downloadButtonStyle:this.theme.getStyle("downloadButton"),menuBarPosition:this.options.menuBarPosition})+function(t){var e,i,n,r,o,a,s,l=t.locale,c=t.biImage,u=t.commonStyle,h=t.headerStyle,f=t.loadButtonStyle,g=t.downloadButtonStyle,d=t.submenuStyle;return L()(e=L()(i=L()(n=L()(r=L()(o=L()(a=L()(s='\n
                      \n
                      \n \n
                      \n
                      \n ')).call(r,l.localize("Load"),'\n \n
                      \n \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n')}({locale:this._locale,biImage:this.theme.getStyle("common.bi"),commonStyle:this.theme.getStyle("common"),headerStyle:this.theme.getStyle("header"),loadButtonStyle:this.theme.getStyle("loadButton"),downloadButtonStyle:this.theme.getStyle("downloadButton"),submenuStyle:this.theme.getStyle("submenu")}),this._selectedElement=i,this._selectedElement.classList.add(this.options.menuBarPosition),this._mainElement=r(".tui-image-editor-main"),this._editorElementWrap=r(".tui-image-editor-wrap"),this._editorElement=r(".tui-image-editor"),this._helpMenuBarElement=r(".tui-image-editor-help-menu"),this._menuBarElement=r(".tui-image-editor-menu"),this._subMenuElement=r(".tui-image-editor-submenu"),this._buttonElements={download:this._selectedElement.querySelectorAll(".tui-image-editor-download-btn"),load:this._selectedElement.querySelectorAll(".tui-image-editor-load-btn")},this._addHelpMenus(),this._historyMenu=new Ir(this._buttonElements.history,{locale:this._locale,makeSvgIcon:O()(e=this.theme.makeMenSvgIconSet).call(e,this.theme)}),this._activateZoomMenus()}},{key:"_activateZoomMenus",value:function(){var t=this;A()(F()).call(F(),Q,(function(e){t.changeHelpButtonEnabled(e,!0)}))}},{key:"_makeHelpMenuWithPartition",value:function(){var t;return L()(t=[]).call(t,_(Q),[""],_(K),[""],_(q))}},{key:"_addHelpMenus",value:function(){var t=this,e=this._makeHelpMenuWithPartition();A()(F()).call(F(),e,(function(e){e?(t._makeMenuElement(e,["normal","disabled","hover"],"help"),t._buttonElements[e]=t._helpMenuBarElement.querySelector(".tie-btn-".concat(e))):t._makeMenuPartitionElement()}))}},{key:"_makeMenuPartitionElement",value:function(){var t=document.createElement("li"),e=document.createElement("div");t.className=Si("item"),e.className=Si("icpartition"),t.appendChild(e),this._helpMenuBarElement.appendChild(t)}},{key:"_makeMenuElement",value:function(t){var e,i,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:["normal","active","hover"],r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"normal",o=document.createElement("li"),a=this.theme.makeMenSvgIconSet(n,t);this._addTooltipAttribute(o,t),o.className=L()(e=L()(i="tie-btn-".concat(t," ")).call(i,Si("item")," ")).call(e,r),o.innerHTML=a,"normal"===r?this._menuBarElement.appendChild(o):this._helpMenuBarElement.appendChild(o)}},{key:"_addHelpActionEvent",value:function(){var t=this;A()(F()).call(F(),$,(function(e){t.eventHandler[e]=function(i){return t._actions.main[e](i)},t._buttonElements[e].addEventListener("click",t.eventHandler[e])}))}},{key:"_removeHelpActionEvent",value:function(){var t=this;A()(F()).call(F(),$,(function(e){t._buttonElements[e].removeEventListener("click",t.eventHandler[e])}))}},{key:"_addHistory",value:function(t){if(!function(t){return"string"==typeof t?dt===t:dt===t.name}(t)){var e="string"==typeof t?{name:t}:function(t){var e,i,n,r=vt,o=pt,a=St,s=bt,l=xt,c=Mt,u=It,f=kt,g=gt,d=Tt,v=yt,p=Et,m=t.name,y=t.args;switch(m){case r:n={name:m,detail:"reset"===y[1]?y[1]:h()(e=y[1]).call(e,4)};break;case o:n={name:m,detail:y[2]};break;case s:n={name:pe,detail:Ei(y[1],y[2])};break;case l:n={name:me,detail:"Remove"};break;case c:n={name:ye,detail:"Change"};break;case u:n={name:be,detail:"Change"};break;case f:n={name:Ce,detail:"Change"};break;case v:n={name:Ie,detail:y[2]};break;case g:n={name:_e,detail:"All"};break;case d:n={name:ge,detail:"Add"};break;case a:n={name:xe};break;case p:n={name:ve,detail:L()(i="".concat(~~y[1].width,"x")).call(i,~~y[1].height)};break;default:n={name:m}}return"mask"===y[1]&&(n={name:fe,detail:"Apply"}),n}(t);this._historyMenu.add(e)}}},{key:"initHistory",value:function(){this._historyMenu.init()}},{key:"clearHistory",value:function(){this._historyMenu.clear()}},{key:"_selectPrevHistory",value:function(){this._historyMenu.prev()}},{key:"_selectNextHistory",value:function(){this._historyMenu.next()}},{key:"toggleHistoryMenu",value:function(t){t.target.closest(".".concat("tie-panel-history"))||this._buttonElements.history.classList.toggle("opened")}},{key:"_addTooltipAttribute",value:function(t,e){t.setAttribute("tooltip-content",this._locale.localize(e.replace(/^[a-z]/g,(function(t){return t.toUpperCase()}))))}},{key:"_addDownloadEvent",value:function(){var t=this;this.eventHandler.download=function(){return t._actions.main.download()},A()(F()).call(F(),this._buttonElements.download,(function(e){e.addEventListener("click",t.eventHandler.download)}))}},{key:"_removeDownloadEvent",value:function(){var t=this;A()(F()).call(F(),this._buttonElements.download,(function(e){e.removeEventListener("click",t.eventHandler.download)}))}},{key:"_addLoadEvent",value:function(){var t=this;this.eventHandler.loadImage=function(e){return t._actions.main.load(e.target.files[0])},A()(F()).call(F(),this._buttonElements.load,(function(e){e.addEventListener("change",t.eventHandler.loadImage)}))}},{key:"_removeLoadEvent",value:function(){var t=this;A()(F()).call(F(),this._buttonElements.load,(function(e){e.removeEventListener("change",t.eventHandler.loadImage)}))}},{key:"_addMainMenuEvent",value:function(t){var e=this;this.eventHandler[t]=function(){return e.changeMenu(t)},this._buttonElements[t].addEventListener("click",this.eventHandler[t])}},{key:"_addSubMenuEvent",value:function(t){var e=this;this[t].addEvent(this._actions[t]),this[t].on(ae,(function(){return e.fire(ae)})),this[t].on(se,(function(){return e.fire(se)}))}},{key:"_addMenuEvent",value:function(){var t=this;A()(F()).call(F(),this.options.menu,(function(e){t._addMainMenuEvent(e),t._addSubMenuEvent(e)}))}},{key:"_removeMainMenuEvent",value:function(){var t=this;A()(F()).call(F(),this.options.menu,(function(e){t._buttonElements[e].removeEventListener("click",t.eventHandler[e]),t[e].off(ae),t[e].off(se)}))}},{key:"getEditorArea",value:function(){return this._editorElement}},{key:"activeMenuEvent",value:function(){this._initMenuEvent||(this._addHelpActionEvent(),this._addDownloadEvent(),this._addMenuEvent(),this._initMenu(),this._historyMenu.addEvent(this._actions.history),this._initMenuEvent=!0)}},{key:"_removeUiEvent",value:function(){this._removeHelpActionEvent(),this._removeDownloadEvent(),this._removeLoadEvent(),this._removeMainMenuEvent(),this._historyMenu.removeEvent()}},{key:"_destroyAllMenu",value:function(){var t=this;A()(F()).call(F(),this.options.menu,(function(e){t[e].destroy()})),this._historyMenu.destroy()}},{key:"initCanvas",value:function(){var t=this,e=this._getLoadImage();e.path&&this._actions.main.initLoadImage(e.path,e.name).then((function(){t.activeMenuEvent()})),this._addLoadEvent();var i=document.createElement("div");i.className=Si("grid-visual");i.innerHTML='\n \n \n \n
                      ',this._editorContainerElement=this._editorElement.querySelector(".tui-image-editor-canvas-container"),this._editorContainerElement.appendChild(i)}},{key:"_getLoadImage",value:function(){return this.options.loadImage}},{key:"changeMenu",value:function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=!(arguments.length>2&&void 0!==arguments[2])||arguments[2];this._submenuChangeTransection||(this._submenuChangeTransection=!0,this._changeMenu(t,e,i),this._submenuChangeTransection=!1)}},{key:"_changeMenu",value:function(t,e,i){this.submenu&&(this._buttonElements[this.submenu].classList.remove("active"),this._mainElement.classList.remove("tui-image-editor-menu-".concat(this.submenu)),i&&this._actions.main.discardSelection(),this._actions.main.changeSelectableAll(!0),this[this.submenu].changeStandbyMode()),this.submenu===t&&e?this.submenu=null:(this._buttonElements[t].classList.add("active"),this._mainElement.classList.add("tui-image-editor-menu-".concat(t)),this.submenu=t,this[this.submenu].changeStartMode()),this.resizeEditor()}},{key:"_initMenu",value:function(){if(this.options.initMenu){var t=document.createEvent("MouseEvents");t.initEvent("click",!0,!1),this._buttonElements[this.options.initMenu].dispatchEvent(t)}this.icon&&this.icon.registerDefaultIcon()}},{key:"_getCanvasMaxDimension",value:function(){var t=this._editorContainerElement.style,e=t.maxWidth,i=t.maxHeight;return{width:Ji()(e),height:Ji()(i)}}},{key:"_setEditorPosition",value:function(t){var e=this._getCanvasMaxDimension(),i=e.width,n=e.height,r=this._editorElement.style,o=0,a=0;this.submenu&&("bottom"===t?o=n>this._editorElementWrap.scrollHeight-150?(n-this._editorElementWrap.scrollHeight)/2:-75:"top"===t?o=n>this._editorElementWrap.offsetHeight-150?75-(n-(this._editorElementWrap.offsetHeight-150))/2:75:"left"===t?a=i>this._editorElementWrap.offsetWidth-248?124-(i-(this._editorElementWrap.offsetWidth-248))/2:124:"right"===t&&(a=i>this._editorElementWrap.scrollWidth-248?(i-this._editorElementWrap.scrollWidth)/2:-124)),r.top="".concat(o,"px"),r.left="".concat(a,"px")}}]),t}();wr.mixin(jr);var Or=jr,Er=r(381),Lr=r.n(Er),Nr=function(){function t(){w(this,t),this.versionnumber="1.2.4",this.optionpresets={default:{corsenabled:!1,ltres:1,qtres:1,pathomit:8,rightangleenhance:!0,colorsampling:2,numberofcolors:16,mincolorratio:0,colorquantcycles:3,layering:0,strokewidth:1,linefilter:!1,scale:1,roundcoords:1,viewbox:!1,desc:!1,lcpr:0,qcpr:0,blurradius:0,blurdelta:20},posterized1:{colorsampling:0,numberofcolors:2},posterized2:{numberofcolors:4,blurradius:5},curvy:{ltres:.01,linefilter:!0,rightangleenhance:!1},sharp:{qtres:.01,linefilter:!1},detailed:{pathomit:0,roundcoords:2,ltres:.5,qtres:.5,numberofcolors:64},smoothed:{blurradius:5,blurdelta:64},grayscale:{colorsampling:0,colorquantcycles:1,numberofcolors:7},fixedpalette:{colorsampling:0,colorquantcycles:1,numberofcolors:27},randomsampling1:{colorsampling:1,numberofcolors:8},randomsampling2:{colorsampling:1,numberofcolors:64},artistic1:{colorsampling:0,colorquantcycles:1,pathomit:0,blurradius:5,blurdelta:64,ltres:.01,linefilter:!0,numberofcolors:16,strokewidth:2},artistic2:{qtres:.01,colorsampling:0,colorquantcycles:1,numberofcolors:4,strokewidth:0},artistic3:{qtres:10,ltres:10,numberofcolors:8},artistic4:{qtres:10,ltres:10,numberofcolors:64,blurradius:5,blurdelta:256,strokewidth:2},posterized3:{ltres:1,qtres:1,pathomit:20,rightangleenhance:!0,colorsampling:0,numberofcolors:3,mincolorratio:0,colorquantcycles:3,blurradius:3,blurdelta:20,strokewidth:0,linefilter:!1,roundcoords:1,pal:[{r:0,g:0,b:100,a:255},{r:255,g:255,b:255,a:255}]}},this.pathscan_combined_lookup=[[[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1]],[[0,1,0,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],[0,2,-1,0]],[[-1,-1,-1,-1],[-1,-1,-1,-1],[0,1,0,-1],[0,0,1,0]],[[0,0,1,0],[-1,-1,-1,-1],[0,2,-1,0],[-1,-1,-1,-1]],[[-1,-1,-1,-1],[0,0,1,0],[0,3,0,1],[-1,-1,-1,-1]],[[13,3,0,1],[13,2,-1,0],[7,1,0,-1],[7,0,1,0]],[[-1,-1,-1,-1],[0,1,0,-1],[-1,-1,-1,-1],[0,3,0,1]],[[0,3,0,1],[0,2,-1,0],[-1,-1,-1,-1],[-1,-1,-1,-1]],[[0,3,0,1],[0,2,-1,0],[-1,-1,-1,-1],[-1,-1,-1,-1]],[[-1,-1,-1,-1],[0,1,0,-1],[-1,-1,-1,-1],[0,3,0,1]],[[11,1,0,-1],[14,0,1,0],[14,3,0,1],[11,2,-1,0]],[[-1,-1,-1,-1],[0,0,1,0],[0,3,0,1],[-1,-1,-1,-1]],[[0,0,1,0],[-1,-1,-1,-1],[0,2,-1,0],[-1,-1,-1,-1]],[[-1,-1,-1,-1],[-1,-1,-1,-1],[0,1,0,-1],[0,0,1,0]],[[0,1,0,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],[0,2,-1,0]],[[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1],[-1,-1,-1,-1]]],this.gks=[[.27901,.44198,.27901],[.135336,.228569,.272192,.228569,.135336],[.086776,.136394,.178908,.195843,.178908,.136394,.086776],[.063327,.093095,.122589,.144599,.152781,.144599,.122589,.093095,.063327],[.049692,.069304,.089767,.107988,.120651,.125194,.120651,.107988,.089767,.069304,.049692]],this.specpalette=[{r:0,g:0,b:0,a:255},{r:128,g:128,b:128,a:255},{r:0,g:0,b:128,a:255},{r:64,g:64,b:128,a:255},{r:192,g:192,b:192,a:255},{r:255,g:255,b:255,a:255},{r:128,g:128,b:192,a:255},{r:0,g:0,b:192,a:255},{r:128,g:0,b:0,a:255},{r:128,g:64,b:64,a:255},{r:128,g:0,b:128,a:255},{r:168,g:168,b:168,a:255},{r:192,g:128,b:128,a:255},{r:192,g:0,b:0,a:255},{r:255,g:255,b:255,a:255},{r:0,g:128,b:0,a:255}]}return T(t,[{key:"imageToSVG",value:function(t,e,i){var n=this;i=this.checkoptions(i),this.loadImage(t,(function(t){e(n.imagedataToSVG(n.getImgdata(t),i))}),i)}},{key:"imagedataToSVG",value:function(t,e){e=this.checkoptions(e);var i=this.imagedataToTracedata(t,e);return this.getsvgstring(i,e)}},{key:"imageToTracedata",value:function(t,e,i){var n=this;i=this.checkoptions(i),this.loadImage(t,(function(t){e(n.imagedataToTracedata(n.getImgdata(t),i))}),i)}},{key:"imagedataToTracedata",value:function(t,e){e=this.checkoptions(e);var i,n=this.colorquantization(t,e);if(0===e.layering){i={layers:[],palette:n.palette,width:n.array[0].length-2,height:n.array.length-2};for(var r=0;r0&&(t=this.blur(t,e.blurradius,e.blurdelta)),l=0;l0)for(s=0;s0&&(c[s]={r:Math.floor(f[s].r/f[s].n),g:Math.floor(f[s].g/f[s].n),b:Math.floor(f[s].b/f[s].n),a:Math.floor(f[s].a/f[s].n)}),f[s].n/gn[r].boundingbox[2]&&(n[r].boundingbox[2]=a-1),s-1n[r].boundingbox[3]&&(n[r].boundingbox[3]=s-1),i=this.pathscan_combined_lookup[t[s][a]][u],t[s][a]=i[0],u=i[1],a+=i[2],s+=i[3],a-1===n[r].points[0].x&&s-1===n[r].points[0].y)if(h=!0,n[r].points.lengthe[2]&&t[3]>e[3]}},{key:"batchpathscan",value:function(t,e){var i=[];for(var n in t)t.hasOwnProperty(n)&&(i[n]=this.pathscan(t[n],e));return i}},{key:"internodes",value:function(t,e){var i,n,r=[],o=0,a=0,s=0,l=0,c=0;for(i=0;i0&&(r[i].points[r[i].points.length-1].linesegment=this.getdirection(r[i].points[r[i].points.length-1].x,r[i].points[r[i].points.length-1].y,t[i].points[n].x,t[i].points[n].y)),r[i].points.push({x:t[i].points[n].x,y:t[i].points[n].y,linesegment:this.getdirection(t[i].points[n].x,t[i].points[n].y,(t[i].points[n].x+t[i].points[a].x)/2,(t[i].points[n].y+t[i].points[a].y)/2)})),r[i].points.push({x:(t[i].points[n].x+t[i].points[a].x)/2,y:(t[i].points[n].y+t[i].points[a].y)/2,linesegment:this.getdirection((t[i].points[n].x+t[i].points[a].x)/2,(t[i].points[n].y+t[i].points[a].y)/2,(t[i].points[a].x+t[i].points[s].x)/2,(t[i].points[a].y+t[i].points[s].y)/2)});return r}},{key:"testrightangle",value:function(t,e,i,n,r,o){return t.points[n].x===t.points[e].x&&t.points[n].x===t.points[i].x&&t.points[n].y===t.points[r].y&&t.points[n].y===t.points[o].y||t.points[n].y===t.points[e].y&&t.points[n].y===t.points[i].y&&t.points[n].x===t.points[r].x&&t.points[n].x===t.points[o].x}},{key:"getdirection",value:function(t,e,i,n){return tn?7:0:t>i?en?5:4:en?6:8}},{key:"batchinternodes",value:function(t,e){var i=[];for(var n in t)t.hasOwnProperty(n)&&(i[n]=this.internodes(t[n],e));return i}},{key:"tracepath",value:function(t,e,i){var n,r,o,a=0,s={segments:[]};for(s.boundingbox=t.boundingbox,s.holechildren=t.holechildren,s.isholepath=t.isholepath;a0?o:t.points.length}return s}},{key:"fitseq",value:function(t,e,i,n,r){var o;if(r>t.points.length||r<0)return[];var a,s,l,c=n,u=0,h=!0,f=r-n;f<0&&(f+=t.points.length);for(var g,d=(t.points[r].x-t.points[n].x)/f,v=(t.points[r].y-t.points[n].y)/f,p=(n+1)%t.points.length;p!=r;)(g=p-n)<0&&(g+=t.points.length),a=t.points[n].x+d*g,s=t.points[n].y+v*g,(l=(t.points[p].x-a)*(t.points[p].x-a)+(t.points[p].y-s)*(t.points[p].y-s))>e&&(h=!1),l>u&&(c=p,u=l),p=(p+1)%t.points.length;if(h)return[{type:"L",x1:t.points[n].x,y1:t.points[n].y,x2:t.points[r].x,y2:t.points[r].y}];var m=c;h=!0,u=0;var y=(m-n)/f,b=(1-y)*(1-y),x=2*(1-y)*y,C=y*y,I=(b*t.points[n].x+C*t.points[r].x-t.points[m].x)/-x,_=(b*t.points[n].y+C*t.points[r].y-t.points[m].y)/-x;for(p=n+1;p!=r;)x=2*(1-(y=(p-n)/f))*y,C=y*y,a=(b=(1-y)*(1-y))*t.points[n].x+x*I+C*t.points[r].x,s=b*t.points[n].y+x*_+C*t.points[r].y,(l=(t.points[p].x-a)*(t.points[p].x-a)+(t.points[p].y-s)*(t.points[p].y-s))>i&&(h=!1),l>u&&(c=p,u=l),p=(p+1)%t.points.length;if(h)return[{type:"Q",x1:t.points[n].x,y1:t.points[n].y,x2:I,y2:_,x3:t.points[r].x,y3:t.points[r].y}];var M=m;return L()(o=this.fitseq(t,e,i,n,M)).call(o,this.fitseq(t,e,i,M,r))}},{key:"batchtracepaths",value:function(t,e,i){var n=[];for(var r in t)t.hasOwnProperty(r)&&n.push(this.tracepath(t[r],e,i));return n}},{key:"batchtracelayers",value:function(t,e,i){var n=[];for(var r in t)t.hasOwnProperty(r)&&(n[r]=this.batchtracepaths(t[r],e,i));return n}},{key:"roundtodec",value:function(t,e){return Number(t.toFixed(e))}},{key:"svgpathstring",value:function(t,e,i,n){var r,o,a,s=t.layers[e],l=s[i],c="";if(n.linefilter&&l.segments.length<3)return c;if(c=L()(r="=0;a--){var I,_;if(c+="".concat(b.segments[a].type," "),b.segments[a].hasOwnProperty("x3"))c+=L()(_="".concat(b.segments[a].x2*n.scale," ")).call(_,b.segments[a].y2*n.scale," ");c+=L()(I="".concat(b.segments[a].x1*n.scale," ")).call(I,b.segments[a].y1*n.scale," ")}}else{var M,S;if(b.segments[b.segments.length-1].hasOwnProperty("x3"))c+=L()(M="M ".concat(this.roundtodec(b.segments[b.segments.length-1].x3*n.scale)," ")).call(M,this.roundtodec(b.segments[b.segments.length-1].y3*n.scale)," ");else c+=L()(S="M ".concat(this.roundtodec(b.segments[b.segments.length-1].x2*n.scale)," ")).call(S,this.roundtodec(b.segments[b.segments.length-1].y2*n.scale)," ");for(a=b.segments.length-1;a>=0;a--){var w,k;if(c+="".concat(b.segments[a].type," "),b.segments[a].hasOwnProperty("x3"))c+=L()(k="".concat(this.roundtodec(b.segments[a].x2*n.scale)," ")).call(k,this.roundtodec(b.segments[a].y2*n.scale)," ");c+=L()(w="".concat(this.roundtodec(b.segments[a].x1*n.scale)," ")).call(w,this.roundtodec(b.segments[a].y1*n.scale)," ")}}c+="Z "}if(c+='" />',n.lcpr||n.qcpr){for(a=0;a'),c+=L()(j=L()(O=L()(E=''),c+=L()(N=L()(P=L()(z=L()(B=''),c+=L()(R=L()(F=L()(Y=L()(W='');if(!l.segments[a].hasOwnProperty("x3")&&n.lcpr)c+=L()(H=L()(U=L()(G='')}for(y=0;y'),c+=L()(J=L()(Q=L()(K=''),c+=L()(q=L()($=L()(tt=L()(et=''),c+=L()(it=L()(nt=L()(rt=L()(ot='');if(!b.segments[a].hasOwnProperty("x3")&&n.lcpr)c+=L()(at=L()(st=L()(lt='')}}}return c}},{key:"getsvgstring",value:function(t,e){var i,n,r;e=this.checkoptions(e);for(var o=t.width*e.scale,a=t.height*e.scale,s=L()(i="'),l=0;l5&&(e=5),(i=Math.abs(i))>1024&&(i=1024);var g=this.gks[e-1];for(r=0;r0&&n+o0&&r+oi&&(f.data[a]=t.data[a],f.data[a+1]=t.data[a+1],f.data[a+2]=t.data[a+2],f.data[a+3]=t.data[a+3]);return f}},{key:"loadImage",value:function(t,e,i){var n=new Image;i&&i.corsenabled&&(n.crossOrigin="Anonymous"),n.src=t,n.onload=function(){var t=document.createElement("canvas");t.width=n.width,t.height=n.height,t.getContext("2d").drawImage(n,0,0),e(t)}}},{key:"getImgdata",value:function(t){return t.getContext("2d").getImageData(0,0,t.width,t.height)}},{key:"drawLayers",value:function(t,e,i,n){var r,o,a,s,l,c;for(l in i=i||1,n?(c=document.getElementById(n))||((c=document.createElement("div")).id=n,document.body.appendChild(c)):(c=document.createElement("div"),document.body.appendChild(c)),t)if(t.hasOwnProperty(l)){r=t[l][0].length,o=t[l].length;var u=document.createElement("canvas");u.width=r*i,u.height=o*i;var h=u.getContext("2d");for(s=0;s")},history:function(e){t.ui.toggleHistoryMenu(e)},zoomIn:function(){var e;t.ui.toggleZoomButtonStatus("zoomIn"),t.deactivateAll(),e=t._graphics.getZoomMode(),t.stopDrawingMode(),e!==je?(t.startDrawingMode(Me.ZOOM),t._graphics.startZoomInMode()):t._graphics.endZoomInMode()},zoomOut:function(){t._graphics.zoomOut()},hand:function(){var e;t.ui.offZoomInButtonStatus(),t.ui.toggleZoomButtonStatus("hand"),t.deactivateAll(),e=t._graphics.getZoomMode(),t.stopDrawingMode(),e!==Oe?(t.startDrawingMode(Me.ZOOM),t._graphics.startHandMode()):t._graphics.endHandMode()}},this._commonAction())},_iconAction:function(){var t=this;return(0,R.extend)({changeColor:function(e){t.activeObjectId&&t.changeIconColor(t.activeObjectId,e)},addIcon:function(e,i){t.startDrawingMode("ICON"),t.setDrawingIcon(e,i)},cancelAddIcon:function(){t.ui.icon.clearIconType(),t.changeSelectableAll(!0),t.changeCursor("default"),t.stopDrawingMode()},registerDefaultIcons:function(e,i){var n={};n[e]=i,t.registerIcons(n)},registerCustomIcon:function(e,i){(new Nr).imageToSVG(e,(function(e){var n=U(e.match(/path[^>]*d="([^"]*)"/),2)[1],r={};r[i.name]=n,t.registerIcons(r),t.addIcon(i.name,{left:100,top:100})}),Nr.tracerDefaultOption())}},this._commonAction())},_drawAction:function(){var t=this;return(0,R.extend)({setDrawMode:function(e,i){t.stopDrawingMode(),"free"===e?t.startDrawingMode("FREE_DRAWING",i):t.startDrawingMode("LINE_DRAWING",i)},setColor:function(e){t.setBrush({color:e})}},this._commonAction())},_maskAction:function(){var t=this;return(0,R.extend)({loadImageFromURL:function(e,i){return t.loadImageFromURL(t.toDataURL(),"FilterImage").then((function(){t.addImageObject(e).then((function(){B().revokeObjectURL(i)})),t._invoker.fire(qt,fe)}))},applyFilter:function(){t.applyFilter("mask",{maskObjId:t.activeObjectId})}},this._commonAction())},_textAction:function(){var t=this;return(0,R.extend)({changeTextStyle:function(e,i){t.activeObjectId&&t.changeTextStyle(t.activeObjectId,e,i)}},this._commonAction())},_rotateAction:function(){var t=this;return(0,R.extend)({rotate:function(e,i){t.rotate(e,i),t.ui.resizeEditor(),t.ui.rotate.setRangeBarAngle("rotate",e)},setAngle:function(e,i){t.setAngle(e,i),t.ui.resizeEditor(),t.ui.rotate.setRangeBarAngle("setAngle",e)}},this._commonAction())},_shapeAction:function(){var t=this;return(0,R.extend)({changeShape:function(e,i){t.activeObjectId&&t.changeShape(t.activeObjectId,e,i)},setDrawingShape:function(e){t.setDrawingShape(e)}},this._commonAction())},_cropAction:function(){var t=this;return(0,R.extend)({crop:function(){var e=t.getCropzoneRect();e&&!function(t){var e=t.left,i=t.top,n=t.width,r=t.height;return e===si&&i===li&&n===ci&&r===ui}(e)&&t.crop(e).then((function(){t.stopDrawingMode(),t.ui.resizeEditor(),t.ui.changeMenu("crop"),t._invoker.fire(qt,de)})).catch((function(t){return P().reject(t)}))},cancel:function(){t.stopDrawingMode(),t.ui.changeMenu("crop")},preset:function(e){switch(e){case"preset-square":t.setCropzoneRect(1);break;case"preset-3-2":t.setCropzoneRect(1.5);break;case"preset-4-3":t.setCropzoneRect(4/3);break;case"preset-5-4":t.setCropzoneRect(5/4);break;case"preset-7-5":t.setCropzoneRect(1.4);break;case"preset-16-9":t.setCropzoneRect(16/9);break;default:t.setCropzoneRect(),t.ui.crop.changeApplyButtonStatus(!1)}}},this._commonAction())},_resizeAction:function(){var t=this;return(0,R.extend)({getCurrentDimensions:function(){return t._graphics.getCurrentDimensions()},preview:function(e,i,n){var r=t._graphics.getCurrentDimensions(),o=function(){return r.width/r.height},a={};switch(e){case"width":a.width=i,a.height=n?i/o():r.height;break;case"height":a.height=i,a.width=n?i*o():r.width;break;default:a=r}t._graphics.resize(a).then((function(){t.ui.resizeEditor()})),n&&(t.ui.resize.setWidthValue(a.width),t.ui.resize.setHeightValue(a.height))},lockAspectRatio:function(e,i,n){var r=t._graphics.getCurrentDimensions(),o=r.width,a=r.height,s=o/a;if(e)if(o>a){var l=n/s,c=i*s;t.ui.resize.setLimit({minWidth:c>i?c:i,minHeight:i,maxWidth:n,maxHeight:li?h:i,maxWidth:u0&&void 0!==arguments[0]?arguments[0]:null;e||(e=t._graphics.getCurrentDimensions()),t.resize(e).then((function(){t._graphics.setOriginalDimensions(e),t.stopDrawingMode(),t.ui.resizeEditor(),t.ui.changeMenu("resize")})).catch((function(t){return P().reject(t)}))},reset:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],i=t._graphics.getOriginalDimensions();t.ui.resize.setWidthValue(i.width,!0),t.ui.resize.setHeightValue(i.height,!0),t._graphics.resize(i).then((function(){e||(t.stopDrawingMode(),t.ui.resizeEditor(),t.ui.changeMenu("resize"))}))}},this._commonAction())},_flipAction:function(){var t=this;return(0,R.extend)({flip:function(e){return t[e]()}},this._commonAction())},_filterAction:function(){var t=this;return(0,R.extend)({applyFilter:function(e,i,n,r){e?t.applyFilter(i,n,r):t.hasFilter(i)&&t.removeFilter(i)}},this._commonAction())},setReAction:function(){var t=this;this.on({undoStackChanged:function(e){e?(t.ui.changeHelpButtonEnabled("undo",!0),t.ui.changeHelpButtonEnabled("reset",!0)):(t.ui.changeHelpButtonEnabled("undo",!1),t.ui.changeHelpButtonEnabled("reset",!1)),t.ui.resizeEditor()},redoStackChanged:function(e){e?t.ui.changeHelpButtonEnabled("redo",!0):t.ui.changeHelpButtonEnabled("redo",!1),t.ui.resizeEditor()},objectActivated:function(e){var i,r;t.activeObjectId=e.id,t.ui.changeHelpButtonEnabled("delete",!0),t.ui.changeHelpButtonEnabled("deleteAll",!0),"cropzone"===e.type?t.ui.crop.changeApplyButtonStatus(!0):n()(i=["rect","circle","triangle"]).call(i,e.type)>-1?(t.stopDrawingMode(),"shape"!==t.ui.submenu&&t.ui.changeMenu("shape",!1,!1),t.ui.shape.setShapeStatus({strokeColor:e.stroke,strokeWidth:e.strokeWidth,fillColor:J()(e)}),t.ui.shape.setMaxStrokeValue(Math.min(e.width,e.height))):"path"===e.type||"line"===e.type?"draw"!==t.ui.submenu&&(t.ui.changeMenu("draw",!1,!1),t.ui.draw.changeStandbyMode()):n()(r=["i-text","text"]).call(r,e.type)>-1?("text"!==t.ui.submenu&&t.ui.changeMenu("text",!1,!1),t.ui.text.setTextStyleStateOnAction(e)):"icon"===e.type&&(t.stopDrawingMode(),"icon"!==t.ui.submenu&&t.ui.changeMenu("icon",!1,!1),t.ui.icon.setIconPickerColor(J()(e)))},addText:function(e){var i=t.ui.text,n=i.textColor,r=i.fontSize,o=i.fontStyle,a=i.fontWeight,s=i.underline;t.addText("Double Click",{position:e.originPosition,styles:{fill:n,fontSize:r,fontFamily:"Noto Sans",fontStyle:o,fontWeight:a,underline:s}}).then((function(){t.changeCursor("default")}))},addObjectAfter:function(e){var i;"icon"===e.type?t.ui.icon.changeStandbyMode():n()(i=["rect","circle","triangle"]).call(i,e.type)>-1&&(t.ui.shape.setMaxStrokeValue(Math.min(e.width,e.height)),t.ui.shape.changeStandbyMode())},objectScaled:function(e){var i,r;if(n()(i=["i-text","text"]).call(i,e.type)>-1)t.ui.text.fontSize=xi(e.fontSize);else if(n()(r=["rect","circle","triangle"]).call(r,e.type)>=0){var o=e.width,a=e.height,s=t.ui.shape.getStrokeValue();oe?"width":"height"}var Vr=Y.fabric.util.createClass(Y.fabric.Rect,{initialize:function(t,e,i){(e=F().extend(e,i)).type="cropzone",this.callSuper("initialize",e),this._addEventHandler(),this.canvas=t,this.options=e},canvasEventDelegation:function(t){var e,i="unregistered";return this.canvasEventTrigger[t]!==Xr?i="registered":n()(e=[Nt,Pt]).call(e,t)<0&&(i="none"),i},canvasEventRegister:function(t,e){this.canvasEventTrigger[t]=e},_addEventHandler:function(){var t,e,i,n,r;this.canvasEventTrigger=(S(t={},Nt,Xr),S(t,Pt,Xr),t),this.on({moving:O()(e=this._onMoving).call(e,this),scaling:O()(i=this._onScaling).call(i,this)}),Y.fabric.util.addListener(document,"keydown",O()(n=this._onKeyDown).call(n,this)),Y.fabric.util.addListener(document,"keyup",O()(r=this._onKeyUp).call(r,this))},_renderCropzone:function(t){var e=this.flipX?-1:1,i=this.flipY?-1:1,n=e/this.scaleX,r=i/this.scaleY;t.scale(n,r),this._fillOuterRect(t,"rgba(0, 0, 0, 0.5)"),this.options.lineWidth?(this._fillInnerRect(t),this._strokeBorder(t,"rgb(255, 255, 255)",{lineWidth:this.options.lineWidth})):(this._strokeBorder(t,"rgb(0, 0, 0)",{lineDashWidth:7}),this._strokeBorder(t,"rgb(255, 255, 255)",{lineDashWidth:7,lineDashOffset:7})),t.scale(1/n,1/r)},_render:function(t){this.callSuper("_render",t),this._renderCropzone(t)},_fillOuterRect:function(t,e){var i=this._getCoordinates(),n=i.x,r=i.y;t.save(),t.fillStyle=e,t.beginPath(),t.moveTo(n[0]-1,r[0]-1),t.lineTo(n[3]+1,r[0]-1),t.lineTo(n[3]+1,r[3]+1),t.lineTo(n[0]-1,r[3]+1),t.lineTo(n[0]-1,r[0]-1),t.closePath(),t.moveTo(n[1],r[1]),t.lineTo(n[1],r[2]),t.lineTo(n[2],r[2]),t.lineTo(n[2],r[1]),t.lineTo(n[1],r[1]),t.closePath(),J()(t).call(t),t.restore()},_fillInnerRect:function(t){var e=this._getCoordinates(),i=e.x,n=e.y,r=this._caculateInnerPosition(i,(i[2]-i[1])/3),o=this._caculateInnerPosition(n,(n[2]-n[1])/3);t.save(),t.strokeStyle="rgba(255, 255, 255, 0.7)",t.lineWidth=this.options.lineWidth,t.beginPath(),t.moveTo(r[0],o[1]),t.lineTo(r[3],o[1]),t.moveTo(r[0],o[2]),t.lineTo(r[3],o[2]),t.moveTo(r[1],o[0]),t.lineTo(r[1],o[3]),t.moveTo(r[2],o[0]),t.lineTo(r[2],o[3]),t.stroke(),t.closePath(),t.restore()},_caculateInnerPosition:function(t,e){var i=[];return i[0]=t[1],i[1]=t[1]+e,i[2]=t[1]+2*e,i[3]=t[2],i},_getCoordinates:function(){var t=this.canvas,e=this.width,i=this.height,n=this.left,r=this.top,o=e/2,a=i/2,s=t.getHeight(),l=t.getWidth();return{x:Br()(F()).call(F(),[-(o+n),-o,o,o+(l-n-e)],Math.ceil),y:Br()(F()).call(F(),[-(a+r),-a,a,a+(s-r-i)],Math.ceil)}},_strokeBorder:function(t,e,i){var n=i.lineDashWidth,r=i.lineDashOffset,o=i.lineWidth,a=this.width/2,s=this.height/2;t.save(),t.strokeStyle=e,t.setLineDash&&t.setLineDash([n,n]),r&&(t.lineDashOffset=r),o&&(t.lineWidth=o),t.beginPath(),t.moveTo(-a,-s),t.lineTo(a,-s),t.lineTo(a,s),t.lineTo(-a,s),t.lineTo(-a,-s),t.stroke(),t.restore()},_onMoving:function(){var t=this.height,e=this.width,i=this.left,n=this.top,r=this.canvas.getWidth()-e,o=this.canvas.getHeight()-t;this.left=mi(i,0,r),this.top=mi(n,0,o),this.canvasEventTrigger[Nt](this)},_onScaling:function(t){var e=t.transform.corner,i=this.canvas.getPointer(t.e),n=this._calcScalingSizeFromPointer(i,e);this.scale(1).set(n),this.canvasEventTrigger[Pt](this)},_calcScalingSizeFromPointer:function(t,e){var i=function(t){return n()(Gr).call(Gr,t)>=0}(e);return i&&this._resizeCropZone(t,e)},adjustRatioCropzoneSize:function(t){var e=t.width,i=t.height,n=t.leftMaker,r=t.topMaker,o=t.maxWidth,a=t.maxHeight,s=t.scaleTo;if(e=o?mi(e,1,o):e,i=a?mi(i,1,a):i,!this.presetRatio)return this._withShiftKey&&(e>i?i=e:i>e&&(e=i)),{width:e,height:i,left:n(e),top:r(i)};"width"===s?i=e/this.presetRatio:e=i*this.presetRatio;var l=Math.min(o/e,a/i);if(l<=1){var c,u=U(Br()(c=[e,i]).call(c,(function(t){return t*l})),2);e=u[0],i=u[1]}return{width:e,height:i,left:n(e),top:r(i)}},_getCropzoneRectInfo:function(){var t=this.canvas,e=t.width,i=t.height,n=this.getBoundingRect(!1,!0),r=n.top,o=n.left,a=n.width,s=n.height;return{rectTop:r,rectLeft:o,rectWidth:a,rectHeight:s,rectRight:o+a,rectBottom:r+s,canvasWidth:e,canvasHeight:i}},_resizeCropZone:function(t,e){var i=t.x,n=t.y,r=this._getCropzoneRectInfo(),o=r.rectWidth,a=r.rectHeight,s=r.rectTop,l=r.rectLeft,c=r.rectBottom,u=r.rectRight,h=r.canvasWidth,f=r.canvasHeight,g={tl:{width:u-i,height:c-n,leftMaker:function(t){return u-t},topMaker:function(t){return c-t},maxWidth:u,maxHeight:c,scaleTo:Zr(l-i,s-n)},tr:{width:i-l,height:c-n,leftMaker:function(){return l},topMaker:function(t){return c-t},maxWidth:h-l,maxHeight:c,scaleTo:Zr(i-u,s-n)},mt:{width:o,height:c-n,leftMaker:function(){return l},topMaker:function(t){return c-t},maxWidth:h-l,maxHeight:c,scaleTo:"height"},ml:{width:u-i,height:a,leftMaker:function(t){return u-t},topMaker:function(){return s},maxWidth:u,maxHeight:f-s,scaleTo:"width"},mr:{width:i-l,height:a,leftMaker:function(){return l},topMaker:function(){return s},maxWidth:h-l,maxHeight:f-s,scaleTo:"width"},mb:{width:o,height:n-s,leftMaker:function(){return l},topMaker:function(){return s},maxWidth:h-l,maxHeight:f-s,scaleTo:"height"},bl:{width:u-i,height:n-s,leftMaker:function(t){return u-t},topMaker:function(){return s},maxWidth:u,maxHeight:f-s,scaleTo:Zr(l-i,n-c)},br:{width:i-l,height:n-s,leftMaker:function(){return l},topMaker:function(){return s},maxWidth:h-l,maxHeight:f-s,scaleTo:Zr(i-u,n-c)}};return this.adjustRatioCropzoneSize(g[e])},isValid:function(){return this.left>=0&&this.top>=0&&this.width>0&&this.height>0},_onKeyDown:function(t){t.keyCode===ze&&(this._withShiftKey=!0)},_onKeyUp:function(t){t.keyCode===ze&&(this._withShiftKey=!1)}}),Jr=Vr;function Qr(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var Kr={presetRatio:null,top:-10,left:-10,height:1,width:1},qr=function(t){an(i,t);var e=Qr(i);function i(t){var n,r,o,a,s,l;return w(this,i),(l=e.call(this,ht.CROPPER,t))._cropzone=null,l._startX=null,l._startY=null,l._withShiftKey=!1,l._listeners={keydown:O()(n=l._onKeyDown).call(n,cn(l)),keyup:O()(r=l._onKeyUp).call(r,cn(l)),mousedown:O()(o=l._onFabricMouseDown).call(o,cn(l)),mousemove:O()(a=l._onFabricMouseMove).call(a,cn(l)),mouseup:O()(s=l._onFabricMouseUp).call(s,cn(l))},l}return T(i,[{key:"start",value:function(){if(!this._cropzone){var t=this.getCanvas();t.forEachObject((function(t){t.evented=!1})),this._cropzone=new Jr(t,F().extend({left:0,top:0,width:.5,height:.5,strokeWidth:0,cornerSize:10,cornerColor:"black",fill:"transparent"},ft,this.graphics.cropSelectionStyle)),t.discardActiveObject(),t.add(this._cropzone),t.on("mouse:down",this._listeners.mousedown),t.selection=!1,t.defaultCursor="crosshair",Y.fabric.util.addListener(document,"keydown",this._listeners.keydown),Y.fabric.util.addListener(document,"keyup",this._listeners.keyup)}}},{key:"end",value:function(){var t=this.getCanvas(),e=this._cropzone;e&&(t.remove(e),t.selection=!0,t.defaultCursor="default",t.off("mouse:down",this._listeners.mousedown),t.forEachObject((function(t){t.evented=!0})),this._cropzone=null,Y.fabric.util.removeListener(document,"keydown",this._listeners.keydown),Y.fabric.util.removeListener(document,"keyup",this._listeners.keyup))}},{key:"changeVisibility",value:function(t){this._cropzone&&this._cropzone.set({visible:t})}},{key:"_onFabricMouseDown",value:function(t){var e=this.getCanvas();if(!t.target){e.selection=!1;var i=e.getPointer(t.e);this._startX=i.x,this._startY=i.y,e.on({"mouse:move":this._listeners.mousemove,"mouse:up":this._listeners.mouseup})}}},{key:"_onFabricMouseMove",value:function(t){var e=this.getCanvas(),i=e.getPointer(t.e),n=i.x,r=i.y,o=this._cropzone;Math.abs(n-this._startX)+Math.abs(r-this._startY)>10&&(e.remove(o),o.set(this._calcRectDimensionFromPoint(n,r)),e.add(o),e.setActiveObject(o))}},{key:"_calcRectDimensionFromPoint",value:function(t,e){var i=this.getCanvas(),n=i.getWidth(),r=i.getHeight(),o=this._startX,a=this._startY,s=mi(t,0,o),l=mi(e,0,a),c=mi(t,o,n)-s,u=mi(e,a,r)-l;return this._withShiftKey&&(c>u?u=c:u>c&&(c=u),o>=t&&(s=o-c),a>=e&&(l=a-u)),{left:s,top:l,width:c,height:u}}},{key:"_onFabricMouseUp",value:function(){var t=this._cropzone,e=this._listeners,i=this.getCanvas();i.setActiveObject(t),i.off({"mouse:move":e.mousemove,"mouse:up":e.mouseup})}},{key:"getCroppedImageData",value:function(t){var e=this.getCanvas(),i=e.contains(this._cropzone);if(!t)return null;i&&e.remove(this._cropzone);var n={imageName:this.getImageName(),url:e.toDataURL(t)};return i&&e.add(this._cropzone),n}},{key:"getCropzoneRect",value:function(){var t=this._cropzone;return t.isValid()?{left:t.left,top:t.top,width:t.width,height:t.height}:null}},{key:"setCropzoneRect",value:function(t){var e=this.getCanvas(),i=this._cropzone;e.discardActiveObject(),e.selection=!1,e.remove(i),i.set(t?this._getPresetPropertiesForCropSize(t):Kr),e.add(i),e.selection=!0,t&&e.setActiveObject(i)}},{key:"_getPresetPropertiesForCropSize",value:function(t){var e=this.getCanvas(),i=e.getWidth(),n=e.getHeight(),r=i>=n?i:n,o=function(t,e){return t>e?e/t:1},a=r*t,s=r,l=o(a,i),c=U(Br()(F()).call(F(),[a,s],(function(t){return t*l})),2);a=c[0];var u=o(s=c[1],n),h=U(Br()(F()).call(F(),[a,s],(function(t){return Number((t*u).toFixed(2))})),2);return a=h[0],{presetRatio:t,top:(n-(s=h[1]))/2,left:(i-a)/2,width:a,height:s}}},{key:"_onKeyDown",value:function(t){t.keyCode===ze&&(this._withShiftKey=!0)}},{key:"_onKeyUp",value:function(t){t.keyCode===ze&&(this._withShiftKey=!1)}}]),i}(Fr),$r=qr;function to(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var eo=function(t){an(i,t);var e=to(i);function i(t){return w(this,i),e.call(this,ht.FLIP,t)}return T(i,[{key:"getCurrentSetting",value:function(){var t=this.getCanvasImage();return{flipX:t.flipX,flipY:t.flipY}}},{key:"set",value:function(t){var e=this.getCurrentSetting(),i=e.flipX!==t.flipX,n=e.flipY!==t.flipY;return i||n?(F().extend(e,t),this.setImageProperties(e,!0),this._invertAngle(i,n),this._flipObjects(i,n),P().resolve({flipX:e.flipX,flipY:e.flipY,angle:this.getCanvasImage().angle})):P().reject(Ge)}},{key:"_invertAngle",value:function(t,e){var i=this.getCanvasImage(),n=i.angle;t&&(n*=-1),e&&(n*=-1),i.rotate(Ji()(n)).setCoords()}},{key:"_flipObjects",value:function(t,e){var i=this.getCanvas();t&&i.forEachObject((function(t){t.set({angle:Ji()(-1*t.angle),flipX:!t.flipX,left:i.width-t.left}).setCoords()})),e&&i.forEachObject((function(t){t.set({angle:Ji()(-1*t.angle),flipY:!t.flipY,top:i.height-t.top}).setCoords()})),i.renderAll()}},{key:"reset",value:function(){return this.set({flipX:!1,flipY:!1})}},{key:"flipX",value:function(){var t=this.getCurrentSetting();return this.set({flipX:!t.flipX,flipY:t.flipY})}},{key:"flipY",value:function(){var t=this.getCurrentSetting();return this.set({flipX:t.flipX,flipY:!t.flipY})}}]),i}(Fr),io=eo;function no(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var ro=function(t){an(i,t);var e=no(i);function i(t){return w(this,i),e.call(this,ht.ROTATION,t)}return T(i,[{key:"getCurrentAngle",value:function(){return this.getCanvasImage().angle}},{key:"setAngle",value:function(t){var e=this.getCurrentAngle()%360;t%=360;var i=this.getCanvasImage(),n=i.getCenterPoint();i.set({angle:t}).setCoords(),this.adjustCanvasDimension();var r=i.getCenterPoint();return this._rotateForEachObject(n,r,t-e),P().resolve(t)}},{key:"_rotateForEachObject",value:function(t,e,i){var n=this.getCanvas(),r=t.x-e.x,o=t.y-e.y;n.forEachObject((function(e){var n=e.getCenterPoint(),a=Y.fabric.util.degreesToRadians(i),s=Y.fabric.util.rotatePoint(n,t,a);e.set({left:s.x-r,top:s.y-o,angle:(e.angle+i)%360}),e.setCoords()})),n.renderAll()}},{key:"rotate",value:function(t){var e=this.getCurrentAngle();return this.setAngle(e+t)}}]),i}(Fr),oo=ro;function ao(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var so=function(t){an(i,t);var e=ao(i);function i(t){var n;return w(this,i),(n=e.call(this,ht.FREE_DRAWING,t)).width=12,n.oColor=new Y.fabric.Color("rgba(0, 0, 0, 0.5)"),n}return T(i,[{key:"start",value:function(t){this.getCanvas().isDrawingMode=!0,this.setBrush(t)}},{key:"setBrush",value:function(t){var e=this.getCanvas().freeDrawingBrush;t=t||{},this.width=t.width||this.width,t.color&&(this.oColor=new Y.fabric.Color(t.color)),e.width=this.width,e.color=this.oColor.toRgba()}},{key:"end",value:function(){this.getCanvas().isDrawingMode=!1}}]),i}(Fr),lo=so,co=Y.fabric.util.createClass(Y.fabric.Line,{type:"line",initialize:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.callSuper("initialize",t,e),this.arrowType=e.arrowType},_render:function(t){var e=this.calcLinePoints(),i={fromX:e.x1,fromY:e.y1,toX:e.x2,toY:e.y2};this.ctx=t,t.lineWidth=this.strokeWidth,this._renderBasicLinePath(i),this._drawDecoratorPath(i),this._renderStroke(t)},_renderBasicLinePath:function(t){var e=t.fromX,i=t.fromY,n=t.toX,r=t.toY;this.ctx.beginPath(),this.ctx.moveTo(e,i),this.ctx.lineTo(n,r)},_drawDecoratorPath:function(t){this._drawDecoratorPathType("head",t),this._drawDecoratorPathType("tail",t)},_drawDecoratorPathType:function(t,e){switch(this.arrowType[t]){case"triangle":this._drawTrianglePath(t,e);break;case"chevron":this._drawChevronPath(t,e)}},_drawTrianglePath:function(t,e){var i=1.7*this.ctx.lineWidth;this._drawChevronPath(t,e,i),this.ctx.closePath()},_drawChevronPath:function(t,e,i){var n=this,r=e.fromX,o=e.fromY,a=e.toX,s=e.toY,l=this.ctx;i||(i=2.7*this.ctx.lineWidth);var c=U("head"===t?[r,o]:[a,s],2),u=c[0],h=c[1],f=U("head"===t?[a,s]:[r,o],2),g=f[0],d=f[1],v=180*Math.atan2(d-h,g-u)/Math.PI,p=function(t){return n.getRotatePosition(i,t,{x:u,y:h})};l.moveTo.apply(l,_(p(v+30))),l.lineTo(u,h),l.lineTo.apply(l,_(p(v-30)))},getRotatePosition:function(t,e,i){var n=e*Math.PI/180,r=i.x,o=i.y;return[t*Math.cos(n)+r,t*Math.sin(n)+o]}}),uo=co;function ho(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var fo=function(t){an(i,t);var e=ho(i);function i(t){var n,r,o,a;return w(this,i),(a=e.call(this,ht.LINE,t))._width=12,a._oColor=new Y.fabric.Color("rgba(0, 0, 0, 0.5)"),a._listeners={mousedown:O()(n=a._onFabricMouseDown).call(n,cn(a)),mousemove:O()(r=a._onFabricMouseMove).call(r,cn(a)),mouseup:O()(o=a._onFabricMouseUp).call(o,cn(a))},a}return T(i,[{key:"setHeadOption",value:function(t){var e=t.arrowType,i=void 0===e?{head:null,tail:null}:e;this._arrowType=i}},{key:"start",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=this.getCanvas();e.defaultCursor="crosshair",e.selection=!1,this.setHeadOption(t),this.setBrush(t),e.forEachObject((function(t){t.set({evented:!1})})),e.on({"mouse:down":this._listeners.mousedown})}},{key:"setBrush",value:function(t){var e=this.getCanvas().freeDrawingBrush;t=t||{},this._width=t.width||this._width,t.color&&(this._oColor=new Y.fabric.Color(t.color)),e.width=this._width,e.color=this._oColor.toRgba()}},{key:"end",value:function(){var t=this.getCanvas();t.defaultCursor="default",t.selection=!0,t.forEachObject((function(t){t.set({evented:!0})})),t.off("mouse:down",this._listeners.mousedown)}},{key:"_onFabricMouseDown",value:function(t){var e=this.getCanvas(),i=e.getPointer(t.e),n=i.x,r=i.y,o=[n,r,n,r];this._line=new uo(o,{stroke:this._oColor.toRgba(),strokeWidth:this._width,arrowType:this._arrowType,evented:!1}),this._line.set(He),e.add(this._line),e.on({"mouse:move":this._listeners.mousemove,"mouse:up":this._listeners.mouseup}),this.fire(Gt,this._createLineEventObjectProperties())}},{key:"_onFabricMouseMove",value:function(t){var e=this.getCanvas(),i=e.getPointer(t.e);this._line.set({x2:i.x,y2:i.y}),this._line.setCoords(),e.renderAll()}},{key:"_onFabricMouseUp",value:function(){var t=this.getCanvas();this.fire(Bt,this._createLineEventObjectProperties()),this._line=null,t.off({"mouse:move":this._listeners.mousemove,"mouse:up":this._listeners.mouseup})}},{key:"_createLineEventObjectProperties",value:function(){var t=this.graphics.createObjectProperties(this._line),e=this._line,i=e.x1,n=e.x2,r=e.y1,o=e.y2;return F().extend({},t,{startPosition:{x:i,y:r},endPosition:{x:n,y:o}})}}]),i}(Fr),go=fo;function vo(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var po={fill:"#000000",left:0,top:0},mo={fill:"#000000",fontStyle:"normal",fontWeight:"normal",textAlign:"tie-text-align-left",underline:!1},yo=function(t){an(i,t);var e=vo(i);function i(t){var n,r,o,a,s,l;return w(this,i),(l=e.call(this,ht.TEXT,t))._defaultStyles=po,l._isSelected=!1,l._selectedObj={},l._editingObj={},l._listeners={mousedown:O()(n=l._onFabricMouseDown).call(n,cn(l)),select:O()(r=l._onFabricSelect).call(r,cn(l)),selectClear:O()(o=l._onFabricSelectClear).call(o,cn(l)),scaling:O()(a=l._onFabricScaling).call(a,cn(l)),textChanged:O()(s=l._onFabricTextChanged).call(s,cn(l))},l._textarea=null,l._ratio=1,l._lastClickTime=(new Date).getTime(),l._editingObjInfos={},l.isPrevEditing=!1,l}return T(i,[{key:"start",value:function(){var t=this,e=this.getCanvas();e.selection=!1,e.defaultCursor="text",e.on({"mouse:down":this._listeners.mousedown,"selection:created":this._listeners.select,"selection:updated":this._listeners.select,"before:selection:cleared":this._listeners.selectClear,"object:scaling":this._listeners.scaling,"text:changed":this._listeners.textChanged}),e.forEachObject((function(e){"i-text"===e.type&&t.adjustOriginPosition(e,"start")})),this.setCanvasRatio()}},{key:"end",value:function(){var t=this,e=this.getCanvas();e.selection=!0,e.defaultCursor="default",e.forEachObject((function(i){"i-text"===i.type&&(""===i.text?e.remove(i):t.adjustOriginPosition(i,"end"))})),e.off({"mouse:down":this._listeners.mousedown,"selection:created":this._listeners.select,"selection:updated":this._listeners.select,"before:selection:cleared":this._listeners.selectClear,"object:selected":this._listeners.select,"object:scaling":this._listeners.scaling,"text:changed":this._listeners.textChanged})}},{key:"adjustOriginPosition",value:function(t,e){var i="center",n="center";"start"===e&&(i="left",n="top");var r=t.getPointByOrigin(i,n),o=r.x,a=r.y;t.set({left:o,top:a,originX:i,originY:n}),t.setCoords()}},{key:"add",value:function(t,e){var i=this;return new(P())((function(n){var r,o=i.getCanvas(),a=null,s=He,l=i._defaultStyles;i._setInitPos(e.position),e.styles&&(l=F().extend(l,e.styles)),F().isExisty(e.autofocus)||(e.autofocus=!0),a=new Y.fabric.IText(t,l),s=F().extend({},s,{originX:"left",originY:"top"}),a.set(s),a.on({mouseup:O()(r=i._onFabricMouseUp).call(r,i)}),o.add(a),e.autofocus&&(a.enterEditing(),a.selectAll()),o.getActiveObject()||o.setActiveObject(a),i.isPrevEditing=!0,n(i.graphics.createObjectProperties(a))}))}},{key:"change",value:function(t,e){var i=this;return new(P())((function(n){t.set("text",e),i.getCanvas().renderAll(),n()}))}},{key:"setStyle",value:function(t,e){var i=this;return new(P())((function(n){A()(F()).call(F(),e,(function(i,n){t[n]===i&&"fontSize"!==n&&(e[n]=mo[n]||"")}),i),"textDecoration"in e&&F().extend(e,i._getTextDecorationAdaptObject(e.textDecoration)),t.set(e),i.getCanvas().renderAll(),n()}))}},{key:"getText",value:function(t){return t.text}},{key:"setSelectedInfo",value:function(t,e){this._selectedObj=t,this._isSelected=e}},{key:"isSelected",value:function(){return this._isSelected}},{key:"getSelectedObj",value:function(){return this._selectedObj}},{key:"setCanvasRatio",value:function(){var t=this.getCanvasElement(),e=Z()(t.style.maxWidth,10),i=t.width;this._ratio=i/e}},{key:"getCanvasRatio",value:function(){return this._ratio}},{key:"_getTextDecorationAdaptObject",value:function(t){return{underline:"underline"===t,linethrough:"line-through"===t,overline:"overline"===t}}},{key:"_setInitPos",value:function(t){t=t||this.getCanvasImage().getCenterPoint(),this._defaultStyles.left=t.x,this._defaultStyles.top=t.y}},{key:"_onInput",value:function(){var t=this.getCanvasRatio(),e=this._editingObj,i=this._textarea.style;i.width="".concat(Math.ceil(e.width/t),"px"),i.height="".concat(Math.ceil(e.height/t),"px")}},{key:"_onKeyDown",value:function(){var t=this,e=this.getCanvasRatio(),i=this._editingObj,n=this._textarea.style;v()((function(){i.text(t._textarea.value),n.width="".concat(Math.ceil(i.width/e),"px"),n.height="".concat(Math.ceil(i.height/e),"px")}),0)}},{key:"_onBlur",value:function(){var t=this.getCanvasRatio(),e=this._editingObj,i=this._editingObjInfos,n=this._textarea.value,r=e.width/t-i.width/t,o=e.height/t-i.height/t;if(1===t&&(r/=2,o/=2),this._textarea.style.display="none",e.set({left:i.left+r,top:i.top+o}),n.length){this.getCanvas().add(e);var a={id:F().stamp(e),type:e.type,text:n};this.fire(Yt,a)}}},{key:"_onScroll",value:function(){this._textarea.scrollLeft=0,this._textarea.scrollTop=0}},{key:"_onFabricScaling",value:function(t){var e=t.target;e.fontSize=e.fontSize*e.scaleY,e.scaleX=1,e.scaleY=1}},{key:"_onFabricTextChanged",value:function(t){this.fire(Yt,t.target)}},{key:"_onFabricSelectClear",value:function(t){var e=this.getSelectedObj();this.isPrevEditing=!0,this.setSelectedInfo(t.target,!1),e&&""===e.text&&this.getCanvas().remove(e)}},{key:"_onFabricSelect",value:function(t){this.isPrevEditing=!0,this.setSelectedInfo(t.target,!0)}},{key:"_onFabricMouseDown",value:function(t){var e=t.target;e&&!e.isType("text")||(this.isPrevEditing?this.isPrevEditing=!1:this._fireAddText(t))}},{key:"_fireAddText",value:function(t){var e=t.target,i=t.e||{},n=this.getCanvas().getPointer(i);e||this.fire(Ut,{originPosition:{x:n.x,y:n.y},clientPosition:{x:i.clientX||0,y:i.clientY||0}})}},{key:"_onFabricMouseUp",value:function(t){var e=t.target,i=(new Date).getTime();this._isDoubleClick(i)&&!e.isEditing&&e.enterEditing(),e.isEditing&&this.fire(Ft),this._lastClickTime=i}},{key:"_isDoubleClick",value:function(t){return t-this._lastClickTime<500}}]),i}(Fr),bo=yo;function xo(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var Co={arrow:"M 0 90 H 105 V 120 L 160 60 L 105 0 V 30 H 0 Z",cancel:"M 0 30 L 30 60 L 0 90 L 30 120 L 60 90 L 90 120 L 120 90 L 90 60 L 120 30 L 90 0 L 60 30 L 30 0 Z"},Io=function(t){an(i,t);var e=xo(i);function i(t){var n,r,o,a;return w(this,i),(a=e.call(this,ht.ICON,t))._oColor="#000000",a._pathMap=Co,a._type=null,a._iconColor=null,a._handlers={mousedown:O()(n=a._onFabricMouseDown).call(n,cn(a)),mousemove:O()(r=a._onFabricMouseMove).call(r,cn(a)),mouseup:O()(o=a._onFabricMouseUp).call(o,cn(a))},a}return T(i,[{key:"setStates",value:function(t,e){this._type=t,this._iconColor=e}},{key:"start",value:function(){var t=this.getCanvas();t.selection=!1,t.on("mouse:down",this._handlers.mousedown)}},{key:"end",value:function(){var t=this.getCanvas();t.selection=!0,t.off({"mouse:down":this._handlers.mousedown})}},{key:"add",value:function(t,e){var i=this;return new(P())((function(n,r){var o=i.getCanvas(),a=i._pathMap[t],s=He,l=a?i._createIcon(a):null;i._icon=l,l||r(Xe),l.set(F().extend({type:"icon",fill:i._oColor},s,e,i.graphics.controlStyle)),o.add(l).setActiveObject(l),n(i.graphics.createObjectProperties(l))}))}},{key:"registerPaths",value:function(t){var e=this;A()(F()).call(F(),t,(function(t,i){e._pathMap[i]=t}),this)}},{key:"setColor",value:function(t,e){this._oColor=t,e&&"icon"===e.get("type")&&(e.set({fill:this._oColor}),this.getCanvas().renderAll())}},{key:"getColor",value:function(t){return J()(t)}},{key:"_createIcon",value:function(t){return new Y.fabric.Path(t)}},{key:"_onFabricMouseDown",value:function(t){var e=this,i=this.getCanvas();this._startPoint=i.getPointer(t.e);var n=this._startPoint,r=n.x,o=n.y;this.add(this._type,{left:r,top:o,fill:this._iconColor}).then((function(){e.fire(Gt,e.graphics.createObjectProperties(e._icon)),i.on("mouse:move",e._handlers.mousemove),i.on("mouse:up",e._handlers.mouseup)}))}},{key:"_onFabricMouseMove",value:function(t){var e=this.getCanvas();if(this._icon){var i=e.getPointer(t.e),n=(i.x-this._startPoint.x)/this._icon.width,r=(i.y-this._startPoint.y)/this._icon.height;this._icon.set({scaleX:Math.abs(2*n),scaleY:Math.abs(2*r)}),this._icon.setCoords(),e.renderAll()}}},{key:"_onFabricMouseUp",value:function(){var t=this.getCanvas();this.fire(Bt,this.graphics.createObjectProperties(this._icon)),this._icon=null,t.off("mouse:down",this._handlers.mousedown),t.off("mouse:move",this._handlers.mousemove),t.off("mouse:up",this._handlers.mouseup)}}]),i}(Fr),_o=Io,Mo=Y.fabric.util.createClass(Y.fabric.Image.filters.BlendImage,{applyTo:function(t){if(this.mask){var e=t.canvasEl,i=e.width,n=e.height,r=this._createCanvasOfMask(i,n),o=e.getContext("2d"),a=r.getContext("2d"),s=o.getImageData(0,0,i,n);this._drawMask(a,e,o),this._mapData(a,s,i,n),t.imageData=s}},_createCanvasOfMask:function(t,e){var i=Y.fabric.util.createCanvasElement();return i.width=t,i.height=e,i},_drawMask:function(t){var e=this.mask,i=e.getElement(),n=e.angle,r=e.left,o=e.scaleX,a=e.scaleY,s=e.top;t.save(),t.translate(r,s),t.rotate(n*Math.PI/180),t.scale(o,a),t.drawImage(i,-i.width/2,-i.height/2),t.restore()},_mapData:function(t,e,i,n){for(var r=e.data,o=e.height,a=r,s=e.width*o*4,l=t.getImageData(0,0,i,n).data,c=0;ci},_getColor:function(t,e,i){var n=[0,0,0,0],r=t.data,o=4*(t.width*i+e);return n[0]=r[o],n[1]=r[o+1],n[2]=r[o+2],n[3]=r[o+3],n}});function Do(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var Ao=Y.fabric.Image.filters;Ao.Mask=So,Ao.Sharpen=wo,Ao.Emboss=ko,Ao.ColorFilter=To;var jo,Oo,Eo,Lo=function(t){an(i,t);var e=Do(i);function i(t){return w(this,i),e.call(this,ht.FILTER,t)}return T(i,[{key:"add",value:function(t,e){var i=this;return new(P())((function(n,r){var o=i._getSourceImage(),a=i.getCanvas(),s=i._getFilter(o,t);s||(s=i._createFilter(o,t,e)),s||r(Xe),i._changeFilterValues(s,e),i._apply(o,(function(){a.renderAll(),n({type:t,action:"add",options:e})}))}))}},{key:"remove",value:function(t){var e=this;return new(P())((function(i,n){var r=e._getSourceImage(),o=e.getCanvas(),a=e.getOptions(t);r.filters.length||n($e),e._removeFilter(r,t),e._apply(r,(function(){o.renderAll(),i({type:t,action:"remove",options:a})}))}))}},{key:"hasFilter",value:function(t){return!!this._getFilter(this._getSourceImage(),t)}},{key:"getOptions",value:function(t){var e=this._getSourceImage(),i=this._getFilter(e,t);return i?(0,R.extend)({},i.options):null}},{key:"_changeFilterValues",value:function(t,e){(0,R.forEach)(e,(function(e,i){(0,R.isUndefined)(t[i])||(t[i]=e)})),(0,R.forEach)(t.options,(function(i,n){(0,R.isUndefined)(e[n])||(t.options[n]=e[n])}))}},{key:"_apply",value:function(t,e){t.filters.push(),t.applyFilters()&&e()}},{key:"_getSourceImage",value:function(){return this.getCanvasImage()}},{key:"_createFilter",value:function(t,e,i){var n,r=this._getFabricFilterType(e),o=Y.fabric.Image.filters[r];return o&&((n=new o(i)).options=i,t.filters.push(n)),n}},{key:"_getFilter",value:function(t,e){var i=null;if(t){var n,r,o=this._getFabricFilterType(e),a=t.filters.length;for(r=0;rc){var u=(o-c)/2;l[Ro[e]]=c;var h=U(t(e,u,i,n),2);i=h[0],n=h[1]}if(r<0){var f=U(t(e,r,i,n),2);i=f[0],n=f[1]}})),[i,n,l.width,l.height]}(f,{left:i,top:n,width:r,height:o,cropX:a,cropY:s}),4);i=v[0],n=v[1],r=v[2],o=v[3];var p=U(function(t,e){var i=e.left,n=e.top,r=e.insideCanvasRealImageWidth,o=e.insideCanvasRealImageHeight,a=e.right,s=e.bottom,l=e.cropX,c=e.cropY,u=e.originalWidth,h=e.originalHeight,f=r,g=o,d=Yo,v=d.width,p=d.height;a>v&&l>0&&(f=u-Math.abs(a-v));s>p&&c>0&&(g=h-Math.abs(s-p));var m={x:(r-f)/2,y:(o-g)/2};return(0,R.forEach)(["x","y"],(function(e){var r=m[e];if(r>0){var o=U(t(e,r,i,n),2);i=o[0],n=o[1]}})),[i,n,f,g]}(f,{left:i,top:n,insideCanvasRealImageWidth:r,insideCanvasRealImageHeight:o,right:u,bottom:h,cropX:a,cropY:s,originalWidth:g,originalHeight:d}),4);return i=p[0],n=p[1],r=p[2],o=p[3],[i,n,r,o]}({shapeObj:t,left:d,top:v,width:l,height:c,cropX:f,cropY:g,flipX:i,flipY:n,right:a,bottom:s}),y=U(m,4);d=y[0],v=y[1],l=y[2],c=y[3],r.set({angle:i===n?-e:e,left:d,top:v,width:l,height:c,cropX:f,cropY:g,flipX:i,flipY:n}),wi(r,{fillImageMaxSize:p})}function Uo(t){return(0,R.map)(t.filters,(function(t){var e=U(H()(t),1)[0];return S({},Fo[e],t[e])}))}function Go(t,e,i){var n=Vo(Xo(t),t.angle,e);i.add(n);var r={fill:new Y.fabric.Pattern({source:i.getElement(),repeat:"no-repeat"})};return wi(r,{patternSourceCanvas:i}),r}function Xo(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return Yo&&!e||(Yo=t.toCanvasElement()),Yo}function Zo(t){return[t.getPointByOrigin("left","top"),t.getPointByOrigin("right","top"),t.getPointByOrigin("left","bottom"),t.getPointByOrigin("right","bottom")]}function Vo(t,e,i){var n,r=new Y.fabric.Image(t);return(0,R.forEach)(R.extend.apply(void 0,L()(n=[{}]).call(n,_(i))),(function(t,e){var i,n=(i=e).charAt(0).toUpperCase()+h()(i).call(i,1),o=new Y.fabric.Image.filters[n](S({},Bo[e],t));r.filters.push(o)})),r.applyFilters(),wi(r,{originalAngle:e,fillImageMaxSize:Math.max(r.width,r.height)}),zo().adjustOriginToCenter(r),r}function Jo(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var Qo=(0,R.extend)({strokeWidth:1,stroke:"#000000",fill:"#ffffff",width:1,height:1,rx:0,ry:0},{lockSkewingX:!0,lockSkewingY:!0,bringForward:!0,isRegular:!1});function Ko(t,e,i){var n=J()(t),r=Di(J()(t)),o=n;n.color&&(o=n.color);var a=null;if("filter"===r){var s=i();a=Go(e,Lr()(n),s)}else a={fill:o};return(0,R.extend)({},t,a)}var qo=function(t){an(i,t);var e=Jo(i);function i(t){var n,r,o,a,s,l;return w(this,i),(l=e.call(this,ht.SHAPE,t))._shapeObj=null,l._type="rect",l._options=(0,R.extend)({},Qo),l._isSelected=!1,l._startPoint={},l._withShiftKey=!1,l._handlers={mousedown:O()(n=l._onFabricMouseDown).call(n,cn(l)),mousemove:O()(r=l._onFabricMouseMove).call(r,cn(l)),mouseup:O()(o=l._onFabricMouseUp).call(o,cn(l)),keydown:O()(a=l._onKeyDown).call(a,cn(l)),keyup:O()(s=l._onKeyUp).call(s,cn(l))},l}return T(i,[{key:"start",value:function(){var t=this.getCanvas();this._isSelected=!1,t.defaultCursor="crosshair",t.selection=!1,t.uniformScaling=!0,t.on({"mouse:down":this._handlers.mousedown}),Y.fabric.util.addListener(document,"keydown",this._handlers.keydown),Y.fabric.util.addListener(document,"keyup",this._handlers.keyup)}},{key:"end",value:function(){var t=this.getCanvas();this._isSelected=!1,t.defaultCursor="default",t.selection=!0,t.uniformScaling=!1,t.off({"mouse:down":this._handlers.mousedown}),Y.fabric.util.removeListener(document,"keydown",this._handlers.keydown),Y.fabric.util.removeListener(document,"keyup",this._handlers.keyup)}},{key:"setStates",value:function(t,e){this._type=t,e&&(this._options=(0,R.extend)(this._options,e))}},{key:"add",value:function(t,e){var i=this;return new(P())((function(n){var r=i.getCanvas(),o=i._extendOptions(e),a=i._createInstance(t,o),s=i.graphics.createObjectProperties(a);i._bindEventOnShape(a),r.add(a).setActiveObject(a),i._resetPositionFillFilter(a),n(s)}))}},{key:"change",value:function(t,e){var i=this;return new(P())((function(n,r){ji(t)||r(ti);var o="filter"===Di(J()(e)),a=i.graphics,s=a.canvasImage,l=a.createStaticCanvas;t.set(o?Ko(e,s,l):e),o&&i._resetPositionFillFilter(t),i.getCanvas().renderAll(),n()}))}},{key:"makeFillPropertyForUserEvent",value:function(t){var e=Ai(t),i={};if(e===tt){var n=Uo(Wo(t));i.type=e,i.filter=n}else i.type=et,i.color=J()(t)||"transparent";return i}},{key:"processForCopiedObject",value:function(t,e){if(this._bindEventOnShape(t),"filter"===Ai(t)){var i=Uo(Wo(e)),n=this.graphics.createStaticCanvas();t.set(Go(this.graphics.canvasImage,i,n)),this._resetPositionFillFilter(t)}}},{key:"_createInstance",value:function(t,e){var i;switch(t){case"rect":i=new Y.fabric.Rect(e);break;case"circle":i=new Y.fabric.Ellipse((0,R.extend)({type:"circle"},e));break;case"triangle":i=new Y.fabric.Triangle(e);break;default:i={}}return i}},{key:"_extendOptions",value:function(t){var e=He,i=this.graphics,n=i.canvasImage,r=i.createStaticCanvas;return Ko(t=(0,R.extend)({},Qo,this._options,e,t),n,r)}},{key:"_bindEventOnShape",value:function(t){var e=this,i=this.getCanvas();t.on({added:function(){e._shapeObj=this,zo().setOrigins(e._shapeObj)},selected:function(){e._isSelected=!0,e._shapeObj=this,i.uniformScaling=!0,i.defaultCursor="default",zo().setOrigins(e._shapeObj)},deselected:function(){e._isSelected=!1,e._shapeObj=null,i.defaultCursor="crosshair",i.uniformScaling=!1},modified:function(){var t=e._shapeObj;zo().adjustOriginToCenter(t),zo().setOrigins(t)},modifiedInGroup:function(i){e._fillFilterRePositionInGroupSelection(t,i)},moving:function(){e._resetPositionFillFilter(this)},rotating:function(){e._resetPositionFillFilter(this)},scaling:function(t){var n=i.getPointer(t.e),r=e._shapeObj;i.setCursor("crosshair"),zo().resize(r,n,!0),e._resetPositionFillFilter(this)}})}},{key:"_onFabricMouseDown",value:function(t){if(t.target||(this._isSelected=!1,this._shapeObj=!1),!this._isSelected&&!this._shapeObj){var e=this.getCanvas();this._startPoint=e.getPointer(t.e),e.on({"mouse:move":this._handlers.mousemove,"mouse:up":this._handlers.mouseup})}}},{key:"_onFabricMouseMove",value:function(t){var e=this,i=this.getCanvas(),n=i.getPointer(t.e),r=this._startPoint.x,o=this._startPoint.y,a=r-n.x,s=o-n.y,l=this._shapeObj;l?(this._shapeObj.set({isRegular:this._withShiftKey}),zo().resize(l,n),i.renderAll(),this._resetPositionFillFilter(l)):this.add(this._type,{left:r,top:o,width:a,height:s}).then((function(t){e.fire(Gt,t)}))}},{key:"_onFabricMouseUp",value:function(){var t=this,e=this.getCanvas(),i=this._startPoint.x,n=this._startPoint.y,r=this._shapeObj;r?r&&(zo().adjustOriginToCenter(r),this.fire(Bt,this.graphics.createObjectProperties(r))):this.add(this._type,{left:i,top:n,width:20,height:20}).then((function(e){t.fire(Gt,e)})),e.off({"mouse:move":this._handlers.mousemove,"mouse:up":this._handlers.mouseup})}},{key:"_onKeyDown",value:function(t){t.keyCode===ze&&(this._withShiftKey=!0,this._shapeObj&&(this._shapeObj.isRegular=!0))}},{key:"_onKeyUp",value:function(t){t.keyCode===ze&&(this._withShiftKey=!1,this._shapeObj&&(this._shapeObj.isRegular=!1))}},{key:"_resetPositionFillFilter",value:function(t){if("filter"===Ai(t)){var e=ki(t,"patternSourceCanvas").patternSourceCanvas,i=ki(Wo(t),"originalAngle").originalAngle;this.graphics.canvasImage.angle!==i&&function(t,e){var i=ki(t,"patternSourceCanvas").patternSourceCanvas,n=U(i.getObjects(),1)[0],r=Uo(n);i.remove(n);var o=Vo(Xo(e,!0),e.angle,r);i.add(o)}(t,this.graphics.canvasImage);var n=t.originX,r=t.originY;zo().adjustOriginToCenter(t),t.width*=t.scaleX,t.height*=t.scaleY,t.rx*=t.scaleX,t.ry*=t.scaleY,t.scaleX=1,t.scaleY=1,Ho(t),function(t,e){var i=e.originX,n=e.originY,r=t.getPointByOrigin(i,n),o=r.x,a=r.y;t.set({left:o,top:a,originX:i,originY:n}),t.setCoords()}(t,{originX:n,originY:r}),function(t){var e=ki(U(t.getObjects(),1)[0],"fillImageMaxSize").fillImageMaxSize;e=Math.max(1,e),t.setDimensions({width:e,height:e}),t.renderAll()}(e)}}},{key:"_fillFilterRePositionInGroupSelection",value:function(t,e){1===e.scaleX&&1===e.scaleY||e.addWithUpdate();var i=t.angle,n=t.left,r=t.top;Y.fabric.util.addTransformToObject(t,e.calcTransformMatrix()),this._resetPositionFillFilter(t),t.set({angle:i,left:n,top:r})}}]),i}(Fr);function $o(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var ta={left:0,top:0,width:0,height:0,stroke:"#000000",strokeWidth:0,fill:"#000000",opacity:.4,evented:!1,selectable:!1,hoverCursor:"auto"},ea=.0045,ia=.003,na=.003,ra=.0066,oa=.0044,aa=.003,sa=ee,la=Ut,ca=Ft,ua=Rt,ha=re,fa=oe,ga=ie,da=ne,va=function(t){an(i,t);var e=$o(i);function i(t){var n,r,o,a,s,l,c,u,h,f,g,d,v;w(this,i),(v=e.call(this,ht.ZOOM,t)).zoomArea=null,v._startPoint=null,v._centerPoints=[],v.zoomLevel=1,v.zoomMode=Ae,v._listeners={startZoom:O()(n=v._onMouseDownWithZoomMode).call(n,cn(v)),moveZoom:O()(r=v._onMouseMoveWithZoomMode).call(r,cn(v)),stopZoom:O()(o=v._onMouseUpWithZoomMode).call(o,cn(v)),startHand:O()(a=v._onMouseDownWithHandMode).call(a,cn(v)),moveHand:O()(s=v._onMouseMoveWithHandMode).call(s,cn(v)),stopHand:O()(l=v._onMouseUpWithHandMode).call(l,cn(v)),zoomChanged:O()(c=v._changeScrollState).call(c,cn(v)),keydown:O()(u=v._startHandModeWithSpaceBar).call(u,cn(v)),keyup:O()(h=v._endHandModeWithSpaceBar).call(h,cn(v))};var p=v.getCanvas();return v.aspectRatio=p.width/p.height,v._verticalScroll=new Y.fabric.Rect(ta),v._horizontalScroll=new Y.fabric.Rect(ta),p.on(sa,v._listeners.zoomChanged),v.graphics.on(la,O()(f=v._startTextEditingHandler).call(f,cn(v))),v.graphics.on(ca,O()(g=v._startTextEditingHandler).call(g,cn(v))),v.graphics.on(ua,O()(d=v._stopTextEditingHandler).call(d,cn(v))),v}return T(i,[{key:"attachKeyboardZoomEvents",value:function(){Y.fabric.util.addListener(document,ha,this._listeners.keydown),Y.fabric.util.addListener(document,fa,this._listeners.keyup)}},{key:"detachKeyboardZoomEvents",value:function(){Y.fabric.util.removeListener(document,ha,this._listeners.keydown),Y.fabric.util.removeListener(document,fa,this._listeners.keyup)}},{key:"_startTextEditingHandler",value:function(){this.isTextEditing=!0}},{key:"_stopTextEditingHandler",value:function(){this.isTextEditing=!1}},{key:"_startHandModeWithSpaceBar",value:function(t){this.withSpace||this.isTextEditing||t.keyCode===We&&(this.withSpace=!0,this.startHandMode())}},{key:"_endHandModeWithSpaceBar",value:function(t){t.keyCode===We&&(this.withSpace=!1,this.endHandMode())}},{key:"startZoomInMode",value:function(){if(!this.zoomArea){this.endHandMode(),this.zoomMode=je;var t=this.getCanvas();this._changeObjectsEventedState(!1),this.zoomArea=new Y.fabric.Rect({left:0,top:0,width:.5,height:.5,stroke:"black",strokeWidth:1,fill:"transparent",hoverCursor:"zoom-in"}),t.discardActiveObject(),t.add(this.zoomArea),t.on("mouse:down",this._listeners.startZoom),t.selection=!1,t.defaultCursor="zoom-in"}}},{key:"endZoomInMode",value:function(){this.zoomMode=Ae;var t=this.getCanvas(),e=this._listeners,i=e.startZoom,n=e.moveZoom,r=e.stopZoom;t.selection=!0,t.defaultCursor="auto",t.off({"mouse:down":i,"mouse:move":n,"mouse:up":r}),this._changeObjectsEventedState(!0),t.remove(this.zoomArea),this.zoomArea=null}},{key:"start",value:function(){this.zoomArea=null,this._startPoint=null,this._startHandPoint=null}},{key:"end",value:function(){this.endZoomInMode(),this.endHandMode()}},{key:"startHandMode",value:function(){this.endZoomInMode(),this.zoomMode=Oe;var t=this.getCanvas();this._changeObjectsEventedState(!1),t.discardActiveObject(),t.off("mouse:down",this._listeners.startHand),t.on("mouse:down",this._listeners.startHand),t.selection=!1,t.defaultCursor="grab",t.fire(ga)}},{key:"endHandMode",value:function(){this.zoomMode=Ae;var t=this.getCanvas();this._changeObjectsEventedState(!0),t.off("mouse:down",this._listeners.startHand),t.selection=!0,t.defaultCursor="auto",this._startHandPoint=null,t.fire(da)}},{key:"_onMouseDownWithZoomMode",value:function(t){var e=t.target,i=t.e;if(!e){var n=this.getCanvas();n.selection=!1,this._startPoint=n.getPointer(i),this.zoomArea.set({width:0,height:0});var r=this._listeners,o=r.moveZoom,a=r.stopZoom;n.on({"mouse:move":o,"mouse:up":a})}}},{key:"_onMouseMoveWithZoomMode",value:function(t){var e=t.e,i=this.getCanvas(),n=i.getPointer(e),r=n.x,o=n.y,a=this.zoomArea,s=this._startPoint;Math.abs(r-s.x)+Math.abs(o-s.y)>10&&(i.remove(a),a.set(this._calcRectDimensionFromPoint(r,o)),i.add(a))}},{key:"_calcRectDimensionFromPoint",value:function(t,e){var i=this.getCanvas(),n=i.getWidth(),r=i.getHeight(),o=this._startPoint,a=o.x,s=o.y,l=Math.min,c=l(a,t),u=l(s,e);return{left:c,top:u,width:mi(t,a,n)-c,height:mi(e,s,r)-u}}},{key:"_onMouseUpWithZoomMode",value:function(){var t=this.zoomLevel,e=this.zoomArea,i=this._listeners,n=i.moveZoom,r=i.stopZoom,o=this.getCanvas(),a=this._getCenterPoint(),s=a.x,l=a.y;this._isMaxZoomLevel()||(this._centerPoints.push({x:s,y:l,prevZoomLevel:t,zoomLevel:t+1}),t+=1,o.zoomToPoint({x:s,y:l},t),this._fireZoomChanged(o,t),this.zoomLevel=t),o.off({"mouse:move":n,"mouse:up":r}),o.remove(e),this._startPoint=null}},{key:"_getCenterPoint",value:function(){var t=this.zoomArea,e=t.left,i=t.top,n=t.width,r=t.height,o=this._startPoint,a=o.x,s=o.y,l=this.aspectRatio;return n<10&&r<10?{x:a,y:s}:n>r?{x:e+l*r/2,y:i+r/2}:{x:e+n/2,y:i+n/l/2}}},{key:"zoom",value:function(t){for(var e=t.x,i=t.y,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.zoomLevel,r=this.getCanvas(),o=this._centerPoints,a=o.length-1;a>=0&&!(o[a].zoomLevel=5}},{key:"_movePointOfZoom",value:function(t){var e=t.x,i=t.y,n=this._centerPoints;if(n.length){var r=this.getCanvas(),o=this.zoomLevel,a=n.pop(),s=a.x,l=a.y,c=a.prevZoomLevel,u=s-e,h=l-i;r.zoomToPoint({x:s,y:l},c),r.zoomToPoint({x:u,y:h},o),n.push({x:u,y:h,prevZoomLevel:c,zoomLevel:o}),this._fireZoomChanged(r,o)}}},{key:"_onMouseDownWithHandMode",value:function(t){var e=t.target,i=t.e;if(!e){var n=this.getCanvas();if(!(this.zoomLevel<=1)){n.selection=!1,this._startHandPoint=n.getPointer(i);var r=this._listeners,o=r.moveHand,a=r.stopHand;n.on({"mouse:move":o,"mouse:up":a})}}}},{key:"_onMouseMoveWithHandMode",value:function(t){var e=t.e,i=this.getCanvas().getPointer(e),n=i.x,r=i.y,o=n-this._startHandPoint.x,a=r-this._startHandPoint.y;this._movePointOfZoom({x:o,y:a})}},{key:"_onMouseUpWithHandMode",value:function(){var t=this.getCanvas(),e=this._listeners,i=e.moveHand,n=e.stopHand;t.off({"mouse:move":i,"mouse:up":n}),this._startHandPoint=null}},{key:"_changeScrollState",value:function(t){var e=t.viewport,i=t.zoomLevel,n=this.getCanvas();if(n.remove(this._verticalScroll),n.remove(this._horizontalScroll),!this._isDefaultZoomLevel(i)){var r=n.width,o=n.height,a=e.tl,s=e.tr,l=e.bl,c=s.x-a.x,u=l.y-a.y,h=c*c/r,f=u*ra,g=mi(a.x+a.x/r*c,a.x,s.x-h),d=u*oa,v=u*aa;this._horizontalScroll.set({left:g,top:l.y-f-d,width:h,height:f,rx:v,ry:v});var p=c*ea,m=u*u/o,y=mi(a.y+a.y/o*u,s.y,l.y-m),b=c*ia,x=c*na;this._verticalScroll.set({left:s.x-p-b,top:y,width:p,height:m,rx:x,ry:x}),this._addScrollBar()}}},{key:"_changeObjectsEventedState",value:function(){var t=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],e=this.getCanvas();e.forEachObject((function(e){e.evented=t}))}},{key:"_addScrollBar",value:function(){var t=this,e=this.getCanvas();e.add(this._horizontalScroll),e.add(this._verticalScroll),this.scrollBarTid&&clearTimeout(this.scrollBarTid),this.scrollBarTid=v()((function(){e.remove(t._horizontalScroll),e.remove(t._verticalScroll)}),3e3)}},{key:"_isDefaultZoomLevel",value:function(t){return 1===t}},{key:"_fireZoomChanged",value:function(t,e){t.fire(sa,{viewport:t.calcViewportBoundaries(),zoomLevel:e})}},{key:"mode",get:function(){return this.zoomMode}}]),i}(Fr),pa=va,ma=Ri.create,ya=Ri.types,ba=function(){function t(e){w(this,t),this.name=e}return T(t,[{key:"getName",value:function(){return this.name}},{key:"start",value:function(){throw new Error(ma(ya.UN_IMPLEMENTATION,"start"))}},{key:"end",value:function(){throw new Error(ma(ya.UN_IMPLEMENTATION,"stop"))}}]),t}();function xa(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var Ca=function(t){an(i,t);var e=xa(i);function i(){return w(this,i),e.call(this,Me.CROPPER)}return T(i,[{key:"start",value:function(t){t.getComponent(ht.CROPPER).start()}},{key:"end",value:function(t){t.getComponent(ht.CROPPER).end()}}]),i}(ba),Ia=Ca;function _a(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var Ma=function(t){an(i,t);var e=_a(i);function i(){return w(this,i),e.call(this,Me.FREE_DRAWING)}return T(i,[{key:"start",value:function(t,e){t.getComponent(ht.FREE_DRAWING).start(e)}},{key:"end",value:function(t){t.getComponent(ht.FREE_DRAWING).end()}}]),i}(ba),Sa=Ma;function wa(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var ka=function(t){an(i,t);var e=wa(i);function i(){return w(this,i),e.call(this,Me.LINE_DRAWING)}return T(i,[{key:"start",value:function(t,e){t.getComponent(ht.LINE).start(e)}},{key:"end",value:function(t){t.getComponent(ht.LINE).end()}}]),i}(ba),Ta=ka;function Da(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var Aa=function(t){an(i,t);var e=Da(i);function i(){return w(this,i),e.call(this,Me.SHAPE)}return T(i,[{key:"start",value:function(t){t.getComponent(ht.SHAPE).start()}},{key:"end",value:function(t){t.getComponent(ht.SHAPE).end()}}]),i}(ba),ja=Aa;function Oa(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var Ea=function(t){an(i,t);var e=Oa(i);function i(){return w(this,i),e.call(this,Me.TEXT)}return T(i,[{key:"start",value:function(t){t.getComponent(ht.TEXT).start()}},{key:"end",value:function(t){t.getComponent(ht.TEXT).end()}}]),i}(ba),La=Ea;function Na(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var Pa=function(t){an(i,t);var e=Na(i);function i(){return w(this,i),e.call(this,Me.ICON)}return T(i,[{key:"start",value:function(t){t.getComponent(ht.ICON).start()}},{key:"end",value:function(t){t.getComponent(ht.ICON).end()}}]),i}(ba),za=Pa;function Ba(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var Ra=function(t){an(i,t);var e=Ba(i);function i(){return w(this,i),e.call(this,Me.ZOOM)}return T(i,[{key:"start",value:function(t){t.getComponent(ht.ZOOM).start()}},{key:"end",value:function(t){t.getComponent(ht.ZOOM).end()}}]),i}(ba),Fa=Ra,Ya=null;function Wa(t){Ya=t}function Ha(t,e){var i,n;"activeSelection"===t.type?i=Br()(n=t.getObjects()).call(n,(function(i){var n=i.angle,r=i.left,o=i.top,a=i.scaleX,s=i.scaleY,l=i.width,c=i.height;Y.fabric.util.addTransformToObject(i,t.calcTransformMatrix());var u=e(i);return i.set({angle:n,left:r,top:o,width:l,height:c,scaleX:a,scaleY:s}),u})):i=[e(t)];return i}function Ua(t,e,i){return i?{id:t,width:e.width,height:e.height,top:e.top,left:e.left,angle:e.angle,scaleX:e.scaleX,scaleY:e.scaleY}:(0,R.extend)({id:t},e)}function Ga(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var Xa=function(t){an(i,t);var e=Ga(i);function i(t){var n;return w(this,i),(n=e.call(this,ht.RESIZE,t))._dimensions=null,n._originalDimensions=null,n}return T(i,[{key:"getCurrentDimensions",value:function(){var t=this.getCanvasImage();if(!this._dimensions&&t){var e=t.width,i=t.height;this._dimensions={width:e,height:i}}return this._dimensions}},{key:"getOriginalDimensions",value:function(){return this._originalDimensions}},{key:"setOriginalDimensions",value:function(t){this._originalDimensions=t}},{key:"resize",value:function(t){var e=this.getCanvasImage(),i=e.width,n=e.height,r=e.scaleX,o=e.scaleY,a=t.width,s=t.height,l={scaleX:a?a/i:r,scaleY:s?s/n:o};return r===l.scaleX&&o===l.scaleY||(e.set(l).setCoords(),this._dimensions={width:e.width*e.scaleX,height:e.height*e.scaleY}),this.adjustCanvasDimensionBase(),P().resolve()}},{key:"start",value:function(){var t=this.getCurrentDimensions();this.setOriginalDimensions(t)}},{key:"end",value:function(){}}]),i}(Fr),Za=Xa;function Va(t){var e=function(){if("undefined"==typeof Reflect||!en())return!1;if(en().sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(en()(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var i,n=fn(t);if(e){var r=fn(this).constructor;i=en()(n,arguments,r)}else i=n.apply(this,arguments);return un(this,i)}}var Ja=function(t){an(i,t);var e=Va(i);function i(){return w(this,i),e.call(this,Me.RESIZE)}return T(i,[{key:"start",value:function(t){t.getComponent(ht.RESIZE).start()}},{key:"end",value:function(t){t.getComponent(ht.RESIZE).end()}}]),i}(ba),Qa=Ja,Ka=F().extend,qa=F().stamp,$a=F().isArray,ts=F().isString,es=F().forEachArray,is=F().forEachOwnProperties,ns=F().CustomEvents,rs={cssOnly:!0},os={backstoreOnly:!0},as=function(){function t(e){var i,n,r,o,a,s,l,c,u,h,f,g=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},d=g.cssMaxWidth,v=g.cssMaxHeight;w(this,t),this.canvasImage=null,this.cssMaxWidth=d||1e3,this.cssMaxHeight=v||800,this.cropSelectionStyle={},this.targetObjectForCopyPaste=null,this.imageName="",this._objects={},this._canvas=null,this._drawingMode=Me.NORMAL,this._drawingModeMap={},this._componentMap={},this._handler={onMouseDown:O()(i=this._onMouseDown).call(i,this),onObjectAdded:O()(n=this._onObjectAdded).call(n,this),onObjectRemoved:O()(r=this._onObjectRemoved).call(r,this),onObjectMoved:O()(o=this._onObjectMoved).call(o,this),onObjectScaled:O()(a=this._onObjectScaled).call(a,this),onObjectModified:O()(s=this._onObjectModified).call(s,this),onObjectRotated:O()(l=this._onObjectRotated).call(l,this),onObjectSelected:O()(c=this._onObjectSelected).call(c,this),onPathCreated:O()(u=this._onPathCreated).call(u,this),onSelectionCleared:O()(h=this._onSelectionCleared).call(h,this),onSelectionCreated:O()(f=this._onSelectionCreated).call(f,this)},this._setObjectCachingToFalse(),this._setCanvasElement(e),this._createDrawingModeInstances(),this._createComponents(),this._attachCanvasEvents(),this._attachZoomEvents()}return T(t,[{key:"destroy",value:function(){var t=this._canvas.wrapperEl;this._canvas.clear(),t.parentNode.removeChild(t),this._detachZoomEvents()}},{key:"_attachZoomEvents",value:function(){this.getComponent(ht.ZOOM).attachKeyboardZoomEvents()}},{key:"_detachZoomEvents",value:function(){this.getComponent(ht.ZOOM).detachKeyboardZoomEvents()}},{key:"deactivateAll",value:function(){return this._canvas.discardActiveObject(),this}},{key:"renderAll",value:function(){return this._canvas.renderAll(),this}},{key:"add",value:function(t){var e,i=[];$a(t)?i=t:i.push(t),(e=this._canvas).add.apply(e,_(i))}},{key:"contains",value:function(t){return this._canvas.contains(t)}},{key:"getObjects",value:function(){var t;return h()(t=this._canvas.getObjects()).call(t)}},{key:"getObject",value:function(t){return this._objects[t]}},{key:"remove",value:function(t){this._canvas.remove(t)}},{key:"removeAll",value:function(t){var e,i=this._canvas,n=h()(e=i.getObjects()).call(e);return i.remove.apply(i,_(this._canvas.getObjects())),t&&i.clear(),n}},{key:"removeObjectById",value:function(t){var e=[],i=this._canvas,n=this.getObject(t);return n&&n.isType("group")&&!n.isEmpty()?(i.discardActiveObject(),n.forEachObject((function(t){e.push(t),i.remove(t)}))):i.contains(n)&&(e.push(n),i.remove(n)),e}},{key:"getObjectId",value:function(t){var e=null;for(e in this._objects)if(this._objects.hasOwnProperty(e)&&t===this._objects[e])return e;return null}},{key:"getActiveObject",value:function(){return this._canvas._activeObject}},{key:"getActiveObjectIdForRemove",value:function(){var t=this.getActiveObject(),e=t.type,i=t.left,n=t.top;if("activeSelection"===e){var r=new Y.fabric.Group(_(t.getObjects()),{left:i,top:n});return this._addFabricObject(r)}return this.getObjectId(t)}},{key:"isReadyRemoveObject",value:function(){var t=this.getActiveObject();return t&&!t.isEditing}},{key:"getActiveObjects",value:function(){var t=this._canvas._activeObject;return t&&"activeSelection"===t.type?t:null}},{key:"getActiveSelectionFromObjects",value:function(t){var e=this.getCanvas();return new Y.fabric.ActiveSelection(t,{canvas:e})}},{key:"setActiveObject",value:function(t){this._canvas.setActiveObject(t)}},{key:"setCropSelectionStyle",value:function(t){this.cropSelectionStyle=t}},{key:"getComponent",value:function(t){return this._componentMap[t]}},{key:"getDrawingMode",value:function(){return this._drawingMode}},{key:"startDrawingMode",value:function(t,e){if(this._isSameDrawingMode(t))return!0;this.stopDrawingMode();var i=this._getDrawingModeInstance(t);return i&&i.start&&(i.start(this,e),this._drawingMode=t),!!i}},{key:"stopDrawingMode",value:function(){if(!this._isSameDrawingMode(Me.NORMAL)){var t=this._getDrawingModeInstance(this.getDrawingMode());t&&t.end&&t.end(this),this._drawingMode=Me.NORMAL}}},{key:"zoom",value:function(t,e){var i=t.x,n=t.y,r=this.getComponent(ht.ZOOM);r.zoom({x:i,y:n},e)}},{key:"getZoomMode",value:function(){return this.getComponent(ht.ZOOM).mode}},{key:"startZoomInMode",value:function(){this.getComponent(ht.ZOOM).startZoomInMode()}},{key:"endZoomInMode",value:function(){this.getComponent(ht.ZOOM).endZoomInMode()}},{key:"zoomOut",value:function(){this.getComponent(ht.ZOOM).zoomOut()}},{key:"startHandMode",value:function(){this.getComponent(ht.ZOOM).startHandMode()}},{key:"endHandMode",value:function(){this.getComponent(ht.ZOOM).endHandMode()}},{key:"resetZoom",value:function(){this.getComponent(ht.ZOOM).resetZoom()}},{key:"toDataURL",value:function(t){var e=this.getComponent(ht.CROPPER);e.changeVisibility(!1);var i=this._canvas&&this._canvas.toDataURL(t);return e.changeVisibility(!0),i}},{key:"setCanvasImage",value:function(t,e){e&&qa(e),this.imageName=t,this.canvasImage=e}},{key:"setCssMaxDimension",value:function(t){this.cssMaxWidth=t.width||this.cssMaxWidth,this.cssMaxHeight=t.height||this.cssMaxHeight}},{key:"adjustCanvasDimension",value:function(){this.adjustCanvasDimensionBase(this.canvasImage.scale(1))}},{key:"adjustCanvasDimensionBase",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;t||(t=this.canvasImage);var e=t.getBoundingRect(),i=e.width,n=e.height,r=this._calcMaxDimension(i,n);this.setCanvasCssDimension({width:"100%",height:"100%","max-width":"".concat(r.width,"px"),"max-height":"".concat(r.height,"px")}),this.setCanvasBackstoreDimension({width:i,height:n}),this._canvas.centerObject(t)}},{key:"setCanvasCssDimension",value:function(t){this._canvas.setDimensions(t,rs)}},{key:"setCanvasBackstoreDimension",value:function(t){this._canvas.setDimensions(t,os)}},{key:"setImageProperties",value:function(t,e){var i=this.canvasImage;i&&(i.set(t).setCoords(),e&&this._canvas.renderAll())}},{key:"getCanvasElement",value:function(){return this._canvas.getElement()}},{key:"getCanvas",value:function(){return this._canvas}},{key:"getCanvasImage",value:function(){return this.canvasImage}},{key:"getImageName",value:function(){return this.imageName}},{key:"addImageObject",value:function(t){var e,i=this,n=O()(e=this._callbackAfterLoadingImageObject).call(e,this);return new(P())((function(e){Y.fabric.Image.fromURL(t,(function(t){n(t),e(i.createObjectProperties(t))}),{crossOrigin:"Anonymous"})}))}},{key:"getCenter",value:function(){return this._canvas.getCenter()}},{key:"getCropzoneRect",value:function(){return this.getComponent(ht.CROPPER).getCropzoneRect()}},{key:"setCropzoneRect",value:function(t){this.getComponent(ht.CROPPER).setCropzoneRect(t)}},{key:"getCroppedImageData",value:function(t){return this.getComponent(ht.CROPPER).getCroppedImageData(t)}},{key:"setBrush",value:function(t){var e=this._drawingMode,i=ht.FREE_DRAWING;e===Me.LINE_DRAWING&&(i=ht.LINE),this.getComponent(i).setBrush(t)}},{key:"setDrawingShape",value:function(t,e){this.getComponent(ht.SHAPE).setStates(t,e)}},{key:"setIconStyle",value:function(t,e){this.getComponent(ht.ICON).setStates(t,e)}},{key:"registerPaths",value:function(t){this.getComponent(ht.ICON).registerPaths(t)}},{key:"changeCursor",value:function(t){var e=this.getCanvas();e.defaultCursor=t,e.renderAll()}},{key:"hasFilter",value:function(t){return this.getComponent(ht.FILTER).hasFilter(t)}},{key:"setSelectionStyle",value:function(t){Ka(He,t)}},{key:"setObjectProperties",value:function(t,e){var i=this.getObject(t),n=Ka({},e);return i.set(n),i.setCoords(),this.getCanvas().renderAll(),n}},{key:"getObjectProperties",value:function(t,e){var i=this.getObject(t),n={};return ts(e)?n[e]=i[e]:$a(e)?es(e,(function(t){n[t]=i[t]})):is(e,(function(t,e){n[e]=i[e]})),n}},{key:"getObjectPosition",value:function(t,e,i){var n=this.getObject(t);return n?n.getPointByOrigin(e,i):null}},{key:"setObjectPosition",value:function(t,e){var i=this.getObject(t),n=e.x,r=e.y,o=e.originX,a=e.originY;if(!i)return!1;var s=i.getPointByOrigin(o,a),l=i.getPointByOrigin("center","center"),c=l.x-s.x,u=l.y-s.y;return i.set({left:n+c,top:r+u}),i.setCoords(),!0}},{key:"getCanvasSize",value:function(){var t=this.getCanvasImage();return{width:t?t.width:0,height:t?t.height:0}}},{key:"createStaticCanvas",value:function(){var t=new Y.fabric.StaticCanvas;return t.set({enableRetinaScaling:!1}),t}},{key:"_getDrawingModeInstance",value:function(t){return this._drawingModeMap[t]}},{key:"_setObjectCachingToFalse",value:function(){Y.fabric.Object.prototype.objectCaching=!1}},{key:"_setCanvasElement",value:function(t){var e,i;"CANVAS"!==(e=t.nodeType?t:document.querySelector(t)).nodeName.toUpperCase()&&(i=document.createElement("canvas"),e.appendChild(i)),this._canvas=new Y.fabric.Canvas(i,{containerClass:"tui-image-editor-canvas-container",enableRetinaScaling:!1})}},{key:"_createDrawingModeInstances",value:function(){this._register(this._drawingModeMap,new Ia),this._register(this._drawingModeMap,new Sa),this._register(this._drawingModeMap,new Ta),this._register(this._drawingModeMap,new ja),this._register(this._drawingModeMap,new La),this._register(this._drawingModeMap,new za),this._register(this._drawingModeMap,new Fa),this._register(this._drawingModeMap,new Qa)}},{key:"_createComponents",value:function(){this._register(this._componentMap,new Ur(this)),this._register(this._componentMap,new $r(this)),this._register(this._componentMap,new io(this)),this._register(this._componentMap,new oo(this)),this._register(this._componentMap,new lo(this)),this._register(this._componentMap,new go(this)),this._register(this._componentMap,new bo(this)),this._register(this._componentMap,new _o(this)),this._register(this._componentMap,new No(this)),this._register(this._componentMap,new qo(this)),this._register(this._componentMap,new pa(this)),this._register(this._componentMap,new Za(this))}},{key:"_register",value:function(t,e){t[e.getName()]=e}},{key:"_isSameDrawingMode",value:function(t){return this.getDrawingMode()===t}},{key:"_calcMaxDimension",value:function(t,e){var i=this.cssMaxWidth/t,n=this.cssMaxHeight/e,r=Math.min(t,this.cssMaxWidth),o=Math.min(e,this.cssMaxHeight);return i<1&&i1)n=t.getActiveSelectionFromObjects(e);else{var i=U(e,1);n=i[0]}t.targetObjectForCopyPaste=n,t.setActiveObject(n)}))}},{key:"_cloneObject",value:function(t){var e=this,i=Br()(F()).call(F(),t,(function(t){return e._cloneObjectItem(t)}));return P().all(i)}},{key:"_cloneObjectItem",value:function(t){var e=this;return this._copyFabricObjectForPaste(t).then((function(t){var i=e.createObjectProperties(t);return e.add(t),e.fire(Gt,i),t}))}},{key:"_copyFabricObjectForPaste",value:function(t){var e=this,i=function(t,e){return e?t-10:t+10};return this._copyFabricObject(t).then((function(t){var n=t.left,r=t.top,o=t.width,a=t.height,s=e.getCanvasSize(),l=s.width,c=s.height,u=n+o/2,h=r+a/2;return t.set(F().extend({left:i(n,u+10>l),top:i(r,h+10>c)},He)),t}))}},{key:"_copyFabricObject",value:function(t){var e=this;return new(P())((function(i){t.clone((function(n){var r=e.getComponent(ht.SHAPE);ji(n)&&r.processForCopiedObject(n,t),i(n)}))}))}},{key:"getCurrentDimensions",value:function(){return this.getComponent(ht.RESIZE).getCurrentDimensions()}},{key:"getOriginalDimensions",value:function(){return this.getComponent(ht.RESIZE).getOriginalDimensions()}},{key:"setOriginalDimensions",value:function(t){this.getComponent(ht.RESIZE).setOriginalDimensions(t)}},{key:"resize",value:function(t){var e=this.getComponent(ht.RESIZE);return e.resize(t)}}]),t}();ns.mixin(as);var ss=as,ls=F().isUndefined,cs=A()(F()),us=F().CustomEvents,hs=Zt,fs=Nt,gs=Pt,ds=Lt,vs=zt,ps=Bt,ms=Rt,ys=Ut,bs=Gt,xs=Ft,Cs=Yt,Is=Wt,_s=Ht,Ms=Qt,Ss=Kt,ws=Xt,ks=function(){function t(e,i){var n,r,o,a,s,l,c,u,h,f,g,d,v,p,m,y;if(w(this,t),i=F().extend({includeUI:!1,usageStatistics:!0},i),this.mode=null,this.activeObjectId=null,i.includeUI){var b=i.includeUI;b.usageStatistics=i.usageStatistics,this.ui=new Or(e,b,this.getActions()),i=this.ui.setUiDefaultSelectionStyle(i)}this._invoker=new Zi,this._graphics=new ss(this.ui?this.ui.getEditorArea():e,{cssMaxWidth:i.cssMaxWidth,cssMaxHeight:i.cssMaxHeight}),this._handlers={keydown:O()(n=this._onKeyDown).call(n,this),mousedown:O()(r=this._onMouseDown).call(r,this),objectActivated:O()(o=this._onObjectActivated).call(o,this),objectMoved:O()(a=this._onObjectMoved).call(a,this),objectScaled:O()(s=this._onObjectScaled).call(s,this),objectRotated:O()(l=this._onObjectRotated).call(l,this),objectAdded:O()(c=this._onObjectAdded).call(c,this),objectModified:O()(u=this._onObjectModified).call(u,this),createdPath:this._onCreatedPath,addText:O()(h=this._onAddText).call(h,this),addObject:O()(f=this._onAddObject).call(f,this),textEditing:O()(g=this._onTextEditing).call(g,this),textChanged:O()(d=this._onTextChanged).call(d,this),iconCreateResize:O()(v=this._onIconCreateResize).call(v,this),iconCreateEnd:O()(p=this._onIconCreateEnd).call(p,this),selectionCleared:O()(m=this._selectionCleared).call(m,this),selectionCreated:O()(y=this._selectionCreated).call(y,this)},this._attachInvokerEvents(),this._attachGraphicsEvents(),this._attachDomEvents(),this._setSelectionStyle(i.selectionStyle,{applyCropSelectionStyle:i.applyCropSelectionStyle,applyGroupSelectionStyle:i.applyGroupSelectionStyle}),i.usageStatistics&&(vi||(vi=!0,(0,R.sendHostname)("image-editor","UA-129999381-1"))),this.ui&&(this.ui.initCanvas(),this.setReAction(),this._attachColorPickerInputBoxEvents()),Y.fabric.enableGLFiltering=!1}return T(t,[{key:"_attachColorPickerInputBoxEvents",value:function(){var t=this;this.ui.on(ae,(function(){t.isColorPickerInputBoxEditing=!0})),this.ui.on(se,(function(){t.isColorPickerInputBoxEditing=!1}))}},{key:"_detachColorPickerInputBoxEvents",value:function(){this.ui.off(ae),this.ui.off(se)}},{key:"_setSelectionStyle",value:function(t,e){var i=e.applyCropSelectionStyle,n=e.applyGroupSelectionStyle;t&&this._graphics.setSelectionStyle(t),i&&this._graphics.setCropSelectionStyle(t),n&&this.on("selectionCreated",(function(e){"activeSelection"===e.type&&e.set(t)}))}},{key:"_attachInvokerEvents",value:function(){var t,e,i=this,n=Jt,r=Vt,o=qt,a=$t,s=te,l=ie,c=ne;if(this._invoker.on(n,O()(t=this.fire).call(t,this,n)),this._invoker.on(r,O()(e=this.fire).call(e,this,r)),this.ui){var u=this._graphics.getCanvas();this._invoker.on(o,(function(t){return i.ui.fire(o,t)})),this._invoker.on(a,(function(t){return i.ui.fire(a,t)})),this._invoker.on(s,(function(t){return i.ui.fire(s,t)})),u.on(l,(function(){return i.ui.fire(l)})),u.on(c,(function(){return i.ui.fire(c)}))}}},{key:"_attachGraphicsEvents",value:function(){var t;this._graphics.on((S(t={},hs,this._handlers.mousedown),S(t,fs,this._handlers.objectMoved),S(t,gs,this._handlers.objectScaled),S(t,vs,this._handlers.objectRotated),S(t,ds,this._handlers.objectActivated),S(t,ps,this._handlers.objectAdded),S(t,ms,this._handlers.objectModified),S(t,ys,this._handlers.addText),S(t,bs,this._handlers.addObject),S(t,xs,this._handlers.textEditing),S(t,Cs,this._handlers.textChanged),S(t,Is,this._handlers.iconCreateResize),S(t,_s,this._handlers.iconCreateEnd),S(t,Ms,this._handlers.selectionCleared),S(t,Ss,this._handlers.selectionCreated),t))}},{key:"_attachDomEvents",value:function(){document.addEventListener("keydown",this._handlers.keydown)}},{key:"_detachDomEvents",value:function(){document.removeEventListener("keydown",this._handlers.keydown)}},{key:"_onKeyDown",value:function(t){var e=t.ctrlKey,i=t.keyCode,n=t.metaKey;(e||n)&&(i===Ne?this._graphics.resetTargetObjectForCopyPaste():i===Pe?(this._graphics.pasteObject(),this.clearRedoStack()):i===Ee?this.undo().catch((function(){})):i===Le&&this.redo().catch((function(){})));var r=i===Be||i===Re,o=this._graphics.isReadyRemoveObject();!this.isColorPickerInputBoxEditing&&o&&r&&(t.preventDefault(),this.removeActiveObject())}},{key:"removeActiveObject",value:function(){var t=this._graphics.getActiveObjectIdForRemove();this.removeObject(t)}},{key:"_onMouseDown",value:function(t,e){this.fire(Zt,t,e)}},{key:"_pushAddObjectCommand",value:function(t){var e=Gi.create(mt,this._graphics,t);this._invoker.pushUndoStack(e)}},{key:"_pushModifyObjectCommand",value:function(t){var e=this,i=t.type,n=Ha(t,(function(t){return Ua(e._graphics.getObjectId(t),t,"activeSelection"===i)})),r=Gi.create(Ot,this._graphics,n);r.execute(this._graphics,n),this._invoker.pushUndoStack(r)}},{key:"_onObjectActivated",value:function(t){this.fire(Lt,t)}},{key:"_onObjectMoved",value:function(t){this.fire(Nt,t)}},{key:"_onObjectScaled",value:function(t){this.fire(Pt,t)}},{key:"_onObjectRotated",value:function(t){this.fire(zt,t)}},{key:"getDrawingMode",value:function(){return this._graphics.getDrawingMode()}},{key:"clearObjects",value:function(){return this.execute(gt)}},{key:"deactivateAll",value:function(){this._graphics.deactivateAll(),this._graphics.renderAll()}},{key:"discardSelection",value:function(){this._graphics.discardSelection()}},{key:"changeSelectableAll",value:function(t){this._graphics.changeSelectableAll(t)}},{key:"_initHistory",value:function(){this.ui&&this.ui.initHistory()}},{key:"_clearHistory",value:function(){this.ui&&this.ui.clearHistory()}},{key:"execute",value:function(t){for(var e,i,n,r=arguments.length,o=new Array(r>1?r-1:0),a=1;a1?r-1:0),a=1;a0&&void 0!==arguments[0]?arguments[0]:1,i=P().resolve(),n=0;n0&&void 0!==arguments[0]?arguments[0]:1,i=P().resolve(),n=0;n\n * @fileoverview Constants\n */\nimport { keyMirror } from '@/util';\n\n/**\n * Help features for zoom\n * @type {Array.}\n */\nexport const ZOOM_HELP_MENUS = ['zoomIn', 'zoomOut', 'hand'];\n\n/**\n * Help features for command\n * @type {Array.}\n */\nexport const COMMAND_HELP_MENUS = ['history', 'undo', 'redo', 'reset'];\n\n/**\n * Help features for delete\n * @type {Array.}\n */\nexport const DELETE_HELP_MENUS = ['delete', 'deleteAll'];\n\n/**\n * Editor help features\n * @type {Array.}\n */\nexport const HELP_MENUS = [...ZOOM_HELP_MENUS, ...COMMAND_HELP_MENUS, ...DELETE_HELP_MENUS];\n\n/**\n * Fill type for shape\n * @type {Object.}\n */\nexport const SHAPE_FILL_TYPE = {\n FILTER: 'filter',\n COLOR: 'color',\n};\n\n/**\n * Shape type list\n * @type {Array.}\n */\nexport const SHAPE_TYPE = ['rect', 'circle', 'triangle'];\n\n/**\n * Object type\n * @type {Object.}\n */\nexport const OBJ_TYPE = {\n CROPZONE: 'cropzone',\n};\n\n/**\n * Filter type map\n * @type {Object.}\n */\nexport const filterType = {\n VINTAGE: 'vintage',\n SEPIA2: 'sepia2',\n REMOVE_COLOR: 'removeColor',\n COLOR_FILTER: 'colorFilter',\n REMOVE_WHITE: 'removeWhite',\n BLEND_COLOR: 'blendColor',\n BLEND: 'blend',\n};\n\n/**\n * Component names\n * @type {Object.}\n */\nexport const componentNames = keyMirror(\n 'IMAGE_LOADER',\n 'CROPPER',\n 'FLIP',\n 'ROTATION',\n 'FREE_DRAWING',\n 'LINE',\n 'TEXT',\n 'ICON',\n 'FILTER',\n 'SHAPE',\n 'ZOOM',\n 'RESIZE'\n);\n\n/**\n * Shape default option\n * @type {Object}\n */\nexport const SHAPE_DEFAULT_OPTIONS = {\n lockSkewingX: true,\n lockSkewingY: true,\n bringForward: true,\n isRegular: false,\n};\n\n/**\n * Cropzone default option\n * @type {Object}\n */\nexport const CROPZONE_DEFAULT_OPTIONS = {\n hasRotatingPoint: false,\n hasBorders: false,\n lockScalingFlip: true,\n lockRotation: true,\n lockSkewingX: true,\n lockSkewingY: true,\n};\n\n/**\n * Command names\n * @type {Object.}\n */\nexport const commandNames = {\n CLEAR_OBJECTS: 'clearObjects',\n LOAD_IMAGE: 'loadImage',\n FLIP_IMAGE: 'flip',\n ROTATE_IMAGE: 'rotate',\n ADD_OBJECT: 'addObject',\n REMOVE_OBJECT: 'removeObject',\n APPLY_FILTER: 'applyFilter',\n REMOVE_FILTER: 'removeFilter',\n ADD_ICON: 'addIcon',\n CHANGE_ICON_COLOR: 'changeIconColor',\n ADD_SHAPE: 'addShape',\n CHANGE_SHAPE: 'changeShape',\n ADD_TEXT: 'addText',\n CHANGE_TEXT: 'changeText',\n CHANGE_TEXT_STYLE: 'changeTextStyle',\n ADD_IMAGE_OBJECT: 'addImageObject',\n RESIZE_CANVAS_DIMENSION: 'resizeCanvasDimension',\n SET_OBJECT_PROPERTIES: 'setObjectProperties',\n SET_OBJECT_POSITION: 'setObjectPosition',\n CHANGE_SELECTION: 'changeSelection',\n RESIZE_IMAGE: 'resize',\n};\n\n/**\n * Event names\n * @type {Object.}\n */\nexport const eventNames = {\n OBJECT_ACTIVATED: 'objectActivated',\n OBJECT_MOVED: 'objectMoved',\n OBJECT_SCALED: 'objectScaled',\n OBJECT_CREATED: 'objectCreated',\n OBJECT_ROTATED: 'objectRotated',\n OBJECT_ADDED: 'objectAdded',\n OBJECT_MODIFIED: 'objectModified',\n TEXT_EDITING: 'textEditing',\n TEXT_CHANGED: 'textChanged',\n ICON_CREATE_RESIZE: 'iconCreateResize',\n ICON_CREATE_END: 'iconCreateEnd',\n ADD_TEXT: 'addText',\n ADD_OBJECT: 'addObject',\n ADD_OBJECT_AFTER: 'addObjectAfter',\n MOUSE_DOWN: 'mousedown',\n MOUSE_UP: 'mouseup',\n MOUSE_MOVE: 'mousemove',\n // UNDO/REDO Events\n REDO_STACK_CHANGED: 'redoStackChanged',\n UNDO_STACK_CHANGED: 'undoStackChanged',\n SELECTION_CLEARED: 'selectionCleared',\n SELECTION_CREATED: 'selectionCreated',\n EXECUTE_COMMAND: 'executeCommand',\n AFTER_UNDO: 'afterUndo',\n AFTER_REDO: 'afterRedo',\n ZOOM_CHANGED: 'zoomChanged',\n HAND_STARTED: 'handStarted',\n HAND_STOPPED: 'handStopped',\n KEY_DOWN: 'keydown',\n KEY_UP: 'keyup',\n INPUT_BOX_EDITING_STARTED: 'inputBoxEditingStarted',\n INPUT_BOX_EDITING_STOPPED: 'inputBoxEditingStopped',\n FOCUS: 'focus',\n BLUR: 'blur',\n IMAGE_RESIZED: 'imageResized',\n};\n\n/**\n * Selector names\n * @type {Object.}\n */\nexport const selectorNames = {\n COLOR_PICKER_INPUT_BOX: '.tui-colorpicker-palette-hex',\n};\n\n/**\n * History names\n * @type {Object.}\n */\nexport const historyNames = {\n LOAD_IMAGE: 'Load',\n LOAD_MASK_IMAGE: 'Mask',\n ADD_MASK_IMAGE: 'Mask',\n ADD_IMAGE_OBJECT: 'Mask',\n CROP: 'Crop',\n RESIZE: 'Resize',\n APPLY_FILTER: 'Filter',\n REMOVE_FILTER: 'Filter',\n CHANGE_SHAPE: 'Shape',\n CHANGE_ICON_COLOR: 'Icon',\n ADD_TEXT: 'Text',\n CHANGE_TEXT_STYLE: 'Text',\n REMOVE_OBJECT: 'Delete',\n CLEAR_OBJECTS: 'Delete',\n};\n\n/**\n * Editor states\n * @type {Object.}\n */\nexport const drawingModes = keyMirror(\n 'NORMAL',\n 'CROPPER',\n 'FREE_DRAWING',\n 'LINE_DRAWING',\n 'TEXT',\n 'SHAPE',\n 'ICON',\n 'ZOOM',\n 'RESIZE'\n);\n\n/**\n * Menu names with drawing mode\n * @type {Object.}\n */\nexport const drawingMenuNames = {\n TEXT: 'text',\n CROP: 'crop',\n RESIZE: 'resize',\n SHAPE: 'shape',\n ZOOM: 'zoom',\n};\n\n/**\n * Zoom modes\n * @type {Object.}\n */\nexport const zoomModes = {\n DEFAULT: 'normal',\n ZOOM: 'zoom',\n HAND: 'hand',\n};\n\n/**\n * Shortcut key values\n * @type {Object.}\n */\nexport const keyCodes = {\n Z: 90,\n Y: 89,\n C: 67,\n V: 86,\n SHIFT: 16,\n BACKSPACE: 8,\n DEL: 46,\n ARROW_DOWN: 40,\n ARROW_UP: 38,\n SPACE: 32,\n};\n\n/**\n * Fabric object options\n * @type {Object.}\n */\nexport const fObjectOptions = {\n SELECTION_STYLE: {\n borderColor: 'red',\n cornerColor: 'green',\n cornerSize: 10,\n originX: 'center',\n originY: 'center',\n transparentCorners: false,\n },\n};\n\n/**\n * Promise reject messages\n * @type {Object.}\n */\nexport const rejectMessages = {\n addedObject: 'The object is already added.',\n flip: 'The flipX and flipY setting values are not changed.',\n invalidDrawingMode: 'This operation is not supported in the drawing mode.',\n invalidParameters: 'Invalid parameters.',\n isLock: 'The executing command state is locked.',\n loadImage: 'The background image is empty.',\n loadingImageFailed: 'Invalid image loaded.',\n noActiveObject: 'There is no active object.',\n noObject: 'The object is not in canvas.',\n redo: 'The promise of redo command is reject.',\n rotation: 'The current angle is same the old angle.',\n undo: 'The promise of undo command is reject.',\n unsupportedOperation: 'Unsupported operation.',\n unsupportedType: 'Unsupported object type.',\n};\n\n/**\n * Default icon menu svg path\n * @type {Object.}\n */\nexport const defaultIconPath = {\n 'icon-arrow': 'M40 12V0l24 24-24 24V36H0V12h40z',\n 'icon-arrow-2': 'M49,32 H3 V22 h46 l-18,-18 h12 l23,23 L43,50 h-12 l18,-18 z ',\n 'icon-arrow-3':\n 'M43.349998,27 L17.354,53 H1.949999 l25.996,-26 L1.949999,1 h15.404 L43.349998,27 z ',\n 'icon-star':\n 'M35,54.557999 l-19.912001,10.468 l3.804,-22.172001 l-16.108,-15.7 l22.26,-3.236 L35,3.746 l9.956,20.172001 l22.26,3.236 l-16.108,15.7 l3.804,22.172001 z ',\n 'icon-star-2':\n 'M17,31.212 l-7.194,4.08 l-4.728,-6.83 l-8.234,0.524 l-1.328,-8.226 l-7.644,-3.14 l2.338,-7.992 l-5.54,-6.18 l5.54,-6.176 l-2.338,-7.994 l7.644,-3.138 l1.328,-8.226 l8.234,0.522 l4.728,-6.83 L17,-24.312 l7.194,-4.08 l4.728,6.83 l8.234,-0.522 l1.328,8.226 l7.644,3.14 l-2.338,7.992 l5.54,6.178 l-5.54,6.178 l2.338,7.992 l-7.644,3.14 l-1.328,8.226 l-8.234,-0.524 l-4.728,6.83 z ',\n 'icon-polygon': 'M3,31 L19,3 h32 l16,28 l-16,28 H19 z ',\n 'icon-location':\n 'M24 62C8 45.503 0 32.837 0 24 0 10.745 10.745 0 24 0s24 10.745 24 24c0 8.837-8 21.503-24 38zm0-28c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10z',\n 'icon-heart':\n 'M49.994999,91.349998 l-6.96,-6.333 C18.324001,62.606995 2.01,47.829002 2.01,29.690998 C2.01,14.912998 13.619999,3.299999 28.401001,3.299999 c8.349,0 16.362,5.859 21.594,12 c5.229,-6.141 13.242001,-12 21.591,-12 c14.778,0 26.390999,11.61 26.390999,26.390999 c0,18.138 -16.314001,32.916 -41.025002,55.374001 l-6.96,6.285 z ',\n 'icon-bubble':\n 'M44 48L34 58V48H12C5.373 48 0 42.627 0 36V12C0 5.373 5.373 0 12 0h40c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12h-8z',\n};\n\nexport const defaultRotateRangeValues = {\n realTimeEvent: true,\n min: -360,\n max: 360,\n value: 0,\n};\n\nexport const defaultDrawRangeValues = {\n min: 5,\n max: 30,\n value: 12,\n};\n\nexport const defaultShapeStrokeValues = {\n realTimeEvent: true,\n min: 2,\n max: 300,\n value: 3,\n};\n\nexport const defaultTextRangeValues = {\n realTimeEvent: true,\n min: 10,\n max: 100,\n value: 50,\n};\n\nexport const defaultFilterRangeValues = {\n tintOpacityRange: {\n realTimeEvent: true,\n min: 0,\n max: 1,\n value: 0.7,\n useDecimal: true,\n },\n removewhiteDistanceRange: {\n realTimeEvent: true,\n min: 0,\n max: 1,\n value: 0.2,\n useDecimal: true,\n },\n brightnessRange: {\n realTimeEvent: true,\n min: -1,\n max: 1,\n value: 0,\n useDecimal: true,\n },\n noiseRange: {\n realTimeEvent: true,\n min: 0,\n max: 1000,\n value: 100,\n },\n pixelateRange: {\n realTimeEvent: true,\n min: 2,\n max: 20,\n value: 4,\n },\n colorfilterThresholdRange: {\n realTimeEvent: true,\n min: 0,\n max: 1,\n value: 0.2,\n useDecimal: true,\n },\n blurFilterRange: {\n value: 0.1,\n },\n};\n\nexport const emptyCropRectValues = {\n LEFT: 0,\n TOP: 0,\n WIDTH: 0.5,\n HEIGHT: 0.5,\n};\n\nexport const defaultResizePixelValues = {\n realTimeEvent: true,\n min: 32,\n max: 4088,\n value: 800,\n};\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Util\n */\nimport { forEach, sendHostname, extend, isString, pick, inArray } from 'tui-code-snippet';\nimport Promise from 'core-js-pure/features/promise';\nimport {\n commandNames,\n filterType,\n historyNames,\n SHAPE_FILL_TYPE,\n SHAPE_TYPE,\n emptyCropRectValues,\n} from '@/consts';\n\nconst FLOATING_POINT_DIGIT = 2;\nconst CSS_PREFIX = 'tui-image-editor-';\nconst { min, max } = Math;\nlet hostnameSent = false;\n\n/**\n * Export Promise Class (for simplified module path)\n * @returns {Promise} promise class\n */\nexport { Promise };\n\n/**\n * Clamp value\n * @param {number} value - Value\n * @param {number} minValue - Minimum value\n * @param {number} maxValue - Maximum value\n * @returns {number} clamped value\n */\nexport function clamp(value, minValue, maxValue) {\n if (minValue > maxValue) {\n [minValue, maxValue] = [maxValue, minValue];\n }\n\n return max(minValue, min(value, maxValue));\n}\n\n/**\n * Make key-value object from arguments\n * @returns {object.}\n */\nexport function keyMirror(...args) {\n const obj = {};\n\n forEach(args, (key) => {\n obj[key] = key;\n });\n\n return obj;\n}\n\n/**\n * Make CSSText\n * @param {Object} styleObj - Style info object\n * @returns {string} Connected string of style\n */\nexport function makeStyleText(styleObj) {\n let styleStr = '';\n\n forEach(styleObj, (value, prop) => {\n styleStr += `${prop}: ${value};`;\n });\n\n return styleStr;\n}\n\n/**\n * Get object's properties\n * @param {Object} obj - object\n * @param {Array} keys - keys\n * @returns {Object} properties object\n */\nexport function getProperties(obj, keys) {\n const props = {};\n const { length } = keys;\n let i = 0;\n let key;\n\n for (i = 0; i < length; i += 1) {\n key = keys[i];\n props[key] = obj[key];\n }\n\n return props;\n}\n\n/**\n * ParseInt simpliment\n * @param {number} value - Value\n * @returns {number}\n */\nexport function toInteger(value) {\n return parseInt(value, 10);\n}\n\n/**\n * String to camelcase string\n * @param {string} targetString - change target\n * @returns {string}\n * @private\n */\nexport function toCamelCase(targetString) {\n return targetString.replace(/-([a-z])/g, ($0, $1) => $1.toUpperCase());\n}\n\n/**\n * Check browser file api support\n * @returns {boolean}\n * @private\n */\nexport function isSupportFileApi() {\n return !!(window.File && window.FileList && window.FileReader);\n}\n\n/**\n * hex to rgb\n * @param {string} color - hex color\n * @param {string} alpha - color alpha value\n * @returns {string} rgb expression\n */\nexport function getRgb(color, alpha) {\n if (color.length === 4) {\n color = `${color}${color.slice(1, 4)}`;\n }\n const r = parseInt(color.slice(1, 3), 16);\n const g = parseInt(color.slice(3, 5), 16);\n const b = parseInt(color.slice(5, 7), 16);\n const a = alpha || 1;\n\n return `rgba(${r}, ${g}, ${b}, ${a})`;\n}\n\n/**\n * send hostname\n */\nexport function sendHostName() {\n if (hostnameSent) {\n return;\n }\n hostnameSent = true;\n\n sendHostname('image-editor', 'UA-129999381-1');\n}\n\n/**\n * Apply css resource\n * @param {string} styleBuffer - serialized css text\n * @param {string} tagId - style tag id\n */\nexport function styleLoad(styleBuffer, tagId) {\n const [head] = document.getElementsByTagName('head');\n const linkElement = document.createElement('link');\n const styleData = encodeURIComponent(styleBuffer);\n if (tagId) {\n linkElement.id = tagId;\n // linkElement.id = 'tui-image-editor-theme-style';\n }\n linkElement.setAttribute('rel', 'stylesheet');\n linkElement.setAttribute('type', 'text/css');\n linkElement.setAttribute('href', `data:text/css;charset=UTF-8,${styleData}`);\n head.appendChild(linkElement);\n}\n\n/**\n * Get selector\n * @param {HTMLElement} targetElement - target element\n * @returns {Function} selector\n */\nexport function getSelector(targetElement) {\n return (str) => targetElement.querySelector(str);\n}\n\n/**\n * Change base64 to blob\n * @param {String} data - base64 string data\n * @returns {Blob} Blob Data\n */\nexport function base64ToBlob(data) {\n const rImageType = /data:(image\\/.+);base64,/;\n let mimeString = '';\n let raw, uInt8Array, i;\n\n raw = data.replace(rImageType, (header, imageType) => {\n mimeString = imageType;\n\n return '';\n });\n\n raw = atob(raw);\n const rawLength = raw.length;\n uInt8Array = new Uint8Array(rawLength); // eslint-disable-line\n\n for (i = 0; i < rawLength; i += 1) {\n uInt8Array[i] = raw.charCodeAt(i);\n }\n\n return new Blob([uInt8Array], { type: mimeString });\n}\n\n/**\n * Fix floating point diff.\n * @param {number} value - original value\n * @returns {number} fixed value\n */\nexport function fixFloatingPoint(value) {\n return Number(value.toFixed(FLOATING_POINT_DIGIT));\n}\n\n/**\n * Assignment for destroying objects.\n * @param {Object} targetObject - object to be removed.\n */\nexport function assignmentForDestroy(targetObject) {\n forEach(targetObject, (value, key) => {\n targetObject[key] = null;\n });\n}\n\n/**\n * Make class name for ui\n * @param {String} str - main string of className\n * @param {String} prefix - prefix string of className\n * @returns {String} class name\n */\nexport function cls(str = '', prefix = '') {\n if (str.charAt(0) === '.') {\n return `.${CSS_PREFIX}${prefix}${str.slice(1)}`;\n }\n\n return `${CSS_PREFIX}${prefix}${str}`;\n}\n\n/**\n * Change object origin\n * @param {fabric.Object} fObject - fabric object\n * @param {Object} origin - origin of fabric object\n * @param {string} originX - horizontal basis.\n * @param {string} originY - vertical basis.\n */\nexport function changeOrigin(fObject, origin) {\n const { originX, originY } = origin;\n const { x: left, y: top } = fObject.getPointByOrigin(originX, originY);\n\n fObject.set({\n left,\n top,\n originX,\n originY,\n });\n\n fObject.setCoords();\n}\n\n/**\n * Object key value flip\n * @param {Object} targetObject - The data object of the key value.\n * @returns {Object}\n */\nexport function flipObject(targetObject) {\n const result = {};\n\n Object.keys(targetObject).forEach((key) => {\n result[targetObject[key]] = key;\n });\n\n return result;\n}\n\n/**\n * Set custom properties\n * @param {Object} targetObject - target object\n * @param {Object} props - custom props object\n */\nexport function setCustomProperty(targetObject, props) {\n targetObject.customProps = targetObject.customProps || {};\n extend(targetObject.customProps, props);\n}\n\n/**\n * Get custom property\n * @param {fabric.Object} fObject - fabric object\n * @param {Array|string} propNames - prop name array\n * @returns {object | number | string}\n */\nexport function getCustomProperty(fObject, propNames) {\n const resultObject = {};\n if (isString(propNames)) {\n propNames = [propNames];\n }\n forEach(propNames, (propName) => {\n resultObject[propName] = fObject.customProps[propName];\n });\n\n return resultObject;\n}\n\n/**\n * Capitalize string\n * @param {string} targetString - target string\n * @returns {string}\n */\nexport function capitalizeString(targetString) {\n return targetString.charAt(0).toUpperCase() + targetString.slice(1);\n}\n\n/**\n * Array includes check\n * @param {Array} targetArray - target array\n * @param {string|number} compareValue - compare value\n * @returns {boolean}\n */\nexport function includes(targetArray, compareValue) {\n return targetArray.indexOf(compareValue) >= 0;\n}\n\n/**\n * Get fill type\n * @param {Object | string} fillOption - shape fill option\n * @returns {string} 'color' or 'filter'\n */\nexport function getFillTypeFromOption(fillOption = {}) {\n return pick(fillOption, 'type') || SHAPE_FILL_TYPE.COLOR;\n}\n\n/**\n * Get fill type of shape type object\n * @param {fabric.Object} shapeObj - fabric object\n * @returns {string} 'transparent' or 'color' or 'filter'\n */\nexport function getFillTypeFromObject(shapeObj) {\n const { fill = {} } = shapeObj;\n if (fill.source) {\n return SHAPE_FILL_TYPE.FILTER;\n }\n\n return SHAPE_FILL_TYPE.COLOR;\n}\n\n/**\n * Check if the object is a shape object.\n * @param {fabric.Object} obj - fabric object\n * @returns {boolean}\n */\nexport function isShape(obj) {\n return inArray(obj.get('type'), SHAPE_TYPE) >= 0;\n}\n\n/**\n * Get object type\n * @param {string} type - fabric object type\n * @returns {string} type of object (ex: shape, icon, ...)\n */\nexport function getObjectType(type) {\n if (includes(SHAPE_TYPE, type)) {\n return 'Shape';\n }\n\n switch (type) {\n case 'i-text':\n return 'Text';\n case 'path':\n case 'line':\n return 'Draw';\n case 'activeSelection':\n return 'Group';\n default:\n return toStartOfCapital(type);\n }\n}\n\n/**\n * Get filter type\n * @param {string} type - fabric filter type\n * @param {object} [options] - filter type options\n * @param {boolean} [options.useAlpha=true] - usage of alpha(true is 'color filter', false is 'remove white')\n * @param {string} [options.mode] - mode of blendColor\n * @returns {string} type of filter (ex: sepia, blur, ...)\n */\nfunction getFilterType(type, { useAlpha = true, mode } = {}) {\n const { VINTAGE, REMOVE_COLOR, BLEND_COLOR, SEPIA2, COLOR_FILTER, REMOVE_WHITE, BLEND } =\n filterType;\n\n let filterName;\n\n switch (type) {\n case VINTAGE:\n filterName = SEPIA2;\n break;\n case REMOVE_COLOR:\n filterName = useAlpha ? COLOR_FILTER : REMOVE_WHITE;\n break;\n case BLEND_COLOR:\n filterName = mode === 'add' ? BLEND : mode;\n break;\n default:\n filterName = type;\n }\n\n return toStartOfCapital(filterName);\n}\n\n/**\n * Check if command is silent command\n * @param {Command|string} command - command or command name\n * @returns {boolean}\n */\nexport function isSilentCommand(command) {\n const { LOAD_IMAGE } = commandNames;\n\n return typeof command === 'string' ? LOAD_IMAGE === command : LOAD_IMAGE === command.name;\n}\n\n/**\n * Get command name\n * @param {Command|string} command - command or command name\n * @returns {{name: string, ?detail: string}}\n */\n// eslint-disable-next-line complexity, require-jsdoc\nexport function getHistoryTitle(command) {\n const {\n FLIP_IMAGE,\n ROTATE_IMAGE,\n ADD_TEXT,\n APPLY_FILTER,\n REMOVE_FILTER,\n CHANGE_SHAPE,\n CHANGE_ICON_COLOR,\n CHANGE_TEXT_STYLE,\n CLEAR_OBJECTS,\n ADD_IMAGE_OBJECT,\n REMOVE_OBJECT,\n RESIZE_IMAGE,\n } = commandNames;\n const { name, args } = command;\n let historyInfo;\n\n switch (name) {\n case FLIP_IMAGE:\n historyInfo = { name, detail: args[1] === 'reset' ? args[1] : args[1].slice(4) };\n break;\n case ROTATE_IMAGE:\n historyInfo = { name, detail: args[2] };\n break;\n case APPLY_FILTER:\n historyInfo = { name: historyNames.APPLY_FILTER, detail: getFilterType(args[1], args[2]) };\n break;\n case REMOVE_FILTER:\n historyInfo = { name: historyNames.REMOVE_FILTER, detail: 'Remove' };\n break;\n case CHANGE_SHAPE:\n historyInfo = { name: historyNames.CHANGE_SHAPE, detail: 'Change' };\n break;\n case CHANGE_ICON_COLOR:\n historyInfo = { name: historyNames.CHANGE_ICON_COLOR, detail: 'Change' };\n break;\n case CHANGE_TEXT_STYLE:\n historyInfo = { name: historyNames.CHANGE_TEXT_STYLE, detail: 'Change' };\n break;\n case REMOVE_OBJECT:\n historyInfo = { name: historyNames.REMOVE_OBJECT, detail: args[2] };\n break;\n case CLEAR_OBJECTS:\n historyInfo = { name: historyNames.CLEAR_OBJECTS, detail: 'All' };\n break;\n case ADD_IMAGE_OBJECT:\n historyInfo = { name: historyNames.ADD_IMAGE_OBJECT, detail: 'Add' };\n break;\n case ADD_TEXT:\n historyInfo = { name: historyNames.ADD_TEXT };\n break;\n case RESIZE_IMAGE:\n historyInfo = { name: historyNames.RESIZE, detail: `${~~args[1].width}x${~~args[1].height}` };\n break;\n\n default:\n historyInfo = { name };\n break;\n }\n\n if (args[1] === 'mask') {\n historyInfo = { name: historyNames.LOAD_MASK_IMAGE, detail: 'Apply' };\n }\n\n return historyInfo;\n}\n\n/**\n * Get help menubar position(opposite of menubar)\n * @param {string} position - position of menubar\n * @returns {string} position of help menubar\n */\nexport function getHelpMenuBarPosition(position) {\n if (position === 'top') {\n return 'bottom';\n }\n if (position === 'left') {\n return 'right';\n }\n if (position === 'right') {\n return 'left';\n }\n\n return 'top';\n}\n\n/**\n * Change to capital start letter\n * @param {string} str - string to change\n * @returns {string}\n */\nfunction toStartOfCapital(str) {\n return str.replace(/[a-z]/, (first) => first.toUpperCase());\n}\n\n/**\n * Check if cropRect is Empty.\n * @param {Object} cropRect - cropRect object\n * @param {Number} cropRect.left - cropRect left position value\n * @param {Number} cropRect.top - cropRect top position value\n * @param {Number} cropRect.width - cropRect width value\n * @param {Number} cropRect.height - cropRect height value\n * @returns {boolean}\n */\nexport function isEmptyCropzone(cropRect) {\n const { left, top, width, height } = cropRect;\n const { LEFT, TOP, WIDTH, HEIGHT } = emptyCropRectValues;\n\n return left === LEFT && top === TOP && width === WIDTH && height === HEIGHT;\n}\n","module.exports = __WEBPACK_EXTERNAL_MODULE__2__;","/**\n * @author NHN. FE Development Team \n * @fileoverview Command factory\n */\nimport Command from '@/interface/command';\n\nconst commands = {};\n\n/**\n * Create a command\n * @param {string} name - Command name\n * @param {...*} args - Arguments for creating command\n * @returns {Command}\n * @ignore\n */\nfunction create(name, ...args) {\n const actions = commands[name];\n if (actions) {\n return new Command(actions, args);\n }\n\n return null;\n}\n\n/**\n * Register a command with name as a key\n * @param {Object} command - {name:{string}, execute: {function}, undo: {function}}\n * @param {string} command.name - command name\n * @param {function} command.execute - executable function\n * @param {function} command.undo - undo function\n * @ignore\n */\nfunction register(command) {\n commands[command.name] = command;\n}\n\nexport default {\n create,\n register,\n};\n","module.exports = __WEBPACK_EXTERNAL_MODULE__4__;","var check = function (it) {\n return it && it.Math == Math && it;\n};\n\n// https://github.com/zloirock/core-js/issues/86#issuecomment-115759028\nmodule.exports =\n // eslint-disable-next-line es/no-global-this -- safe\n check(typeof globalThis == 'object' && globalThis) ||\n check(typeof window == 'object' && window) ||\n // eslint-disable-next-line no-restricted-globals -- safe\n check(typeof self == 'object' && self) ||\n check(typeof global == 'object' && global) ||\n // eslint-disable-next-line no-new-func -- fallback\n (function () { return this; })() || Function('return this')();\n","var global = require('../internals/global');\nvar shared = require('../internals/shared');\nvar has = require('../internals/has');\nvar uid = require('../internals/uid');\nvar NATIVE_SYMBOL = require('../internals/native-symbol');\nvar USE_SYMBOL_AS_UID = require('../internals/use-symbol-as-uid');\n\nvar WellKnownSymbolsStore = shared('wks');\nvar Symbol = global.Symbol;\nvar createWellKnownSymbol = USE_SYMBOL_AS_UID ? Symbol : Symbol && Symbol.withoutSetter || uid;\n\nmodule.exports = function (name) {\n if (!has(WellKnownSymbolsStore, name) || !(NATIVE_SYMBOL || typeof WellKnownSymbolsStore[name] == 'string')) {\n if (NATIVE_SYMBOL && has(Symbol, name)) {\n WellKnownSymbolsStore[name] = Symbol[name];\n } else {\n WellKnownSymbolsStore[name] = createWellKnownSymbol('Symbol.' + name);\n }\n } return WellKnownSymbolsStore[name];\n};\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Component interface\n */\n\n/**\n * Component interface\n * @class\n * @param {string} name - component name\n * @param {Graphics} graphics - Graphics instance\n * @ignore\n */\nclass Component {\n constructor(name, graphics) {\n /**\n * Component name\n * @type {string}\n */\n this.name = name;\n\n /**\n * Graphics instance\n * @type {Graphics}\n */\n this.graphics = graphics;\n }\n\n /**\n * Fire Graphics event\n * @returns {Object} return value\n */\n fire(...args) {\n const context = this.graphics;\n\n return this.graphics.fire.apply(context, args);\n }\n\n /**\n * Save image(background) of canvas\n * @param {string} name - Name of image\n * @param {fabric.Image} oImage - Fabric image instance\n */\n setCanvasImage(name, oImage) {\n this.graphics.setCanvasImage(name, oImage);\n }\n\n /**\n * Returns canvas element of fabric.Canvas[[lower-canvas]]\n * @returns {HTMLCanvasElement}\n */\n getCanvasElement() {\n return this.graphics.getCanvasElement();\n }\n\n /**\n * Get fabric.Canvas instance\n * @returns {fabric.Canvas}\n */\n getCanvas() {\n return this.graphics.getCanvas();\n }\n\n /**\n * Get canvasImage (fabric.Image instance)\n * @returns {fabric.Image}\n */\n getCanvasImage() {\n return this.graphics.getCanvasImage();\n }\n\n /**\n * Get image name\n * @returns {string}\n */\n getImageName() {\n return this.graphics.getImageName();\n }\n\n /**\n * Get image editor\n * @returns {ImageEditor}\n */\n getEditor() {\n return this.graphics.getEditor();\n }\n\n /**\n * Return component name\n * @returns {string}\n */\n getName() {\n return this.name;\n }\n\n /**\n * Set image properties\n * @param {Object} setting - Image properties\n * @param {boolean} [withRendering] - If true, The changed image will be reflected in the canvas\n */\n setImageProperties(setting, withRendering) {\n this.graphics.setImageProperties(setting, withRendering);\n }\n\n /**\n * Set canvas dimension - css only\n * @param {Object} dimension - Canvas css dimension\n */\n setCanvasCssDimension(dimension) {\n this.graphics.setCanvasCssDimension(dimension);\n }\n\n /**\n * Set canvas dimension - css only\n * @param {Object} dimension - Canvas backstore dimension\n */\n setCanvasBackstoreDimension(dimension) {\n this.graphics.setCanvasBackstoreDimension(dimension);\n }\n\n /**\n * Adjust canvas dimension with scaling image\n */\n adjustCanvasDimension() {\n this.graphics.adjustCanvasDimension();\n }\n\n adjustCanvasDimensionBase() {\n this.graphics.adjustCanvasDimensionBase();\n }\n}\n\nexport default Component;\n","import { CustomEvents } from 'tui-code-snippet';\nimport { eventNames } from '@/consts';\n\n/**\n * Submenu Base Class\n * @class\n * @ignore\n */\nclass Submenu {\n /**\n * @param {HTMLElement} subMenuElement - submenu dom element\n * @param {Locale} locale - translate text\n * @param {string} name - name of sub menu\n * @param {Object} iconStyle - style of icon\n * @param {string} menuBarPosition - position of menu\n * @param {*} templateHtml - template for SubMenuElement\n * @param {boolean} [usageStatistics=false] - template for SubMenuElement\n */\n constructor(\n subMenuElement,\n { locale, name, makeSvgIcon, menuBarPosition, templateHtml, usageStatistics }\n ) {\n this.subMenuElement = subMenuElement;\n this.menuBarPosition = menuBarPosition;\n this.toggleDirection = menuBarPosition === 'top' ? 'down' : 'up';\n this.colorPickerControls = [];\n this.usageStatistics = usageStatistics;\n this.eventHandler = {};\n this._makeSubMenuElement({\n locale,\n name,\n makeSvgIcon,\n templateHtml,\n });\n }\n\n /**\n * editor dom ui query selector\n * @param {string} selectName - query selector string name\n * @returns {HTMLElement}\n */\n selector(selectName) {\n return this.subMenuElement.querySelector(selectName);\n }\n\n /**\n * change show state change for colorpicker instance\n * @param {Colorpicker} occurredControl - target Colorpicker Instance\n */\n colorPickerChangeShow(occurredControl) {\n this.colorPickerControls.forEach((pickerControl) => {\n if (occurredControl !== pickerControl) {\n pickerControl.hide();\n }\n });\n }\n\n /**\n * Get button type\n * @param {HTMLElement} button - event target element\n * @param {array} buttonNames - Array of button names\n * @returns {string} - button type\n */\n getButtonType(button, buttonNames) {\n return button.className.match(RegExp(`(${buttonNames.join('|')})`))[0];\n }\n\n /**\n * Get button type\n * @param {HTMLElement} target - event target element\n * @param {string} removeClass - remove class name\n * @param {string} addClass - add class name\n */\n changeClass(target, removeClass, addClass) {\n target.classList.remove(removeClass);\n target.classList.add(addClass);\n }\n\n /**\n * Interface method whose implementation is optional.\n * Returns the menu to its default state.\n */\n changeStandbyMode() {}\n\n /**\n * Interface method whose implementation is optional.\n * Executed when the menu starts.\n */\n changeStartMode() {}\n\n /**\n * Make submenu dom element\n * @param {Locale} locale - translate text\n * @param {string} name - submenu name\n * @param {Object} iconStyle - icon style\n * @param {*} templateHtml - template for SubMenuElement\n * @private\n */\n _makeSubMenuElement({ locale, name, iconStyle, makeSvgIcon, templateHtml }) {\n const iconSubMenu = document.createElement('div');\n iconSubMenu.className = `tui-image-editor-menu-${name}`;\n iconSubMenu.innerHTML = templateHtml({\n locale,\n iconStyle,\n makeSvgIcon,\n });\n\n this.subMenuElement.appendChild(iconSubMenu);\n }\n\n _onStartEditingInputBox() {\n this.fire(eventNames.INPUT_BOX_EDITING_STARTED);\n }\n\n _onStopEditingInputBox() {\n this.fire(eventNames.INPUT_BOX_EDITING_STOPPED);\n }\n}\n\nCustomEvents.mixin(Submenu);\n\nexport default Submenu;\n","module.exports = function (exec) {\n try {\n return !!exec();\n } catch (error) {\n return true;\n }\n};\n","var DESCRIPTORS = require('../internals/descriptors');\nvar definePropertyModule = require('../internals/object-define-property');\nvar createPropertyDescriptor = require('../internals/create-property-descriptor');\n\nmodule.exports = DESCRIPTORS ? function (object, key, value) {\n return definePropertyModule.f(object, key, createPropertyDescriptor(1, value));\n} : function (object, key, value) {\n object[key] = value;\n return object;\n};\n","var toObject = require('../internals/to-object');\n\nvar hasOwnProperty = {}.hasOwnProperty;\n\nmodule.exports = function hasOwn(it, key) {\n return hasOwnProperty.call(toObject(it), key);\n};\n","var isObject = require('../internals/is-object');\n\nmodule.exports = function (it) {\n if (!isObject(it)) {\n throw TypeError(String(it) + ' is not an object');\n } return it;\n};\n","/**\n * @author NHN. FE Development Team \n * @fileoverview DrawingMode interface\n */\nimport errorMessage from '@/factory/errorMessage';\n\nconst createMessage = errorMessage.create;\nconst errorTypes = errorMessage.types;\n\n/**\n * DrawingMode interface\n * @class\n * @param {string} name - drawing mode name\n * @ignore\n */\nclass DrawingMode {\n constructor(name) {\n /**\n * the name of drawing mode\n * @type {string}\n */\n this.name = name;\n }\n\n /**\n * Get this drawing mode name;\n * @returns {string} drawing mode name\n */\n getName() {\n return this.name;\n }\n\n /**\n * start this drawing mode\n * @param {Object} options - drawing mode options\n * @abstract\n */\n start() {\n throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'start'));\n }\n\n /**\n * stop this drawing mode\n * @abstract\n */\n end() {\n throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'stop'));\n }\n}\n\nexport default DrawingMode;\n","'use strict';\nvar global = require('../internals/global');\nvar getOwnPropertyDescriptor = require('../internals/object-get-own-property-descriptor').f;\nvar isForced = require('../internals/is-forced');\nvar path = require('../internals/path');\nvar bind = require('../internals/function-bind-context');\nvar createNonEnumerableProperty = require('../internals/create-non-enumerable-property');\nvar has = require('../internals/has');\n\nvar wrapConstructor = function (NativeConstructor) {\n var Wrapper = function (a, b, c) {\n if (this instanceof NativeConstructor) {\n switch (arguments.length) {\n case 0: return new NativeConstructor();\n case 1: return new NativeConstructor(a);\n case 2: return new NativeConstructor(a, b);\n } return new NativeConstructor(a, b, c);\n } return NativeConstructor.apply(this, arguments);\n };\n Wrapper.prototype = NativeConstructor.prototype;\n return Wrapper;\n};\n\n/*\n options.target - name of the target object\n options.global - target is the global object\n options.stat - export as static methods of target\n options.proto - export as prototype methods of target\n options.real - real prototype method for the `pure` version\n options.forced - export even if the native feature is available\n options.bind - bind methods to the target, required for the `pure` version\n options.wrap - wrap constructors to preventing global pollution, required for the `pure` version\n options.unsafe - use the simple assignment of property instead of delete + defineProperty\n options.sham - add a flag to not completely full polyfills\n options.enumerable - export as enumerable property\n options.noTargetGet - prevent calling a getter on target\n*/\nmodule.exports = function (options, source) {\n var TARGET = options.target;\n var GLOBAL = options.global;\n var STATIC = options.stat;\n var PROTO = options.proto;\n\n var nativeSource = GLOBAL ? global : STATIC ? global[TARGET] : (global[TARGET] || {}).prototype;\n\n var target = GLOBAL ? path : path[TARGET] || (path[TARGET] = {});\n var targetPrototype = target.prototype;\n\n var FORCED, USE_NATIVE, VIRTUAL_PROTOTYPE;\n var key, sourceProperty, targetProperty, nativeProperty, resultProperty, descriptor;\n\n for (key in source) {\n FORCED = isForced(GLOBAL ? key : TARGET + (STATIC ? '.' : '#') + key, options.forced);\n // contains in native\n USE_NATIVE = !FORCED && nativeSource && has(nativeSource, key);\n\n targetProperty = target[key];\n\n if (USE_NATIVE) if (options.noTargetGet) {\n descriptor = getOwnPropertyDescriptor(nativeSource, key);\n nativeProperty = descriptor && descriptor.value;\n } else nativeProperty = nativeSource[key];\n\n // export native or implementation\n sourceProperty = (USE_NATIVE && nativeProperty) ? nativeProperty : source[key];\n\n if (USE_NATIVE && typeof targetProperty === typeof sourceProperty) continue;\n\n // bind timers to global for call from export context\n if (options.bind && USE_NATIVE) resultProperty = bind(sourceProperty, global);\n // wrap global constructors for prevent changs in this version\n else if (options.wrap && USE_NATIVE) resultProperty = wrapConstructor(sourceProperty);\n // make static versions for prototype methods\n else if (PROTO && typeof sourceProperty == 'function') resultProperty = bind(Function.call, sourceProperty);\n // default case\n else resultProperty = sourceProperty;\n\n // add a flag to not completely full polyfills\n if (options.sham || (sourceProperty && sourceProperty.sham) || (targetProperty && targetProperty.sham)) {\n createNonEnumerableProperty(resultProperty, 'sham', true);\n }\n\n target[key] = resultProperty;\n\n if (PROTO) {\n VIRTUAL_PROTOTYPE = TARGET + 'Prototype';\n if (!has(path, VIRTUAL_PROTOTYPE)) {\n createNonEnumerableProperty(path, VIRTUAL_PROTOTYPE, {});\n }\n // export virtual prototype methods\n path[VIRTUAL_PROTOTYPE][key] = sourceProperty;\n // export real prototype methods\n if (options.real && targetPrototype && !targetPrototype[key]) {\n createNonEnumerableProperty(targetPrototype, key, sourceProperty);\n }\n }\n }\n};\n","module.exports = function (it) {\n return typeof it === 'object' ? it !== null : typeof it === 'function';\n};\n","var fails = require('../internals/fails');\n\n// Detect IE8's incomplete defineProperty implementation\nmodule.exports = !fails(function () {\n // eslint-disable-next-line es/no-object-defineproperty -- required for testing\n return Object.defineProperty({}, 1, { get: function () { return 7; } })[1] != 7;\n});\n","module.exports = function (it) {\n if (typeof it != 'function') {\n throw TypeError(String(it) + ' is not a function');\n } return it;\n};\n","var path = require('../internals/path');\nvar global = require('../internals/global');\n\nvar aFunction = function (variable) {\n return typeof variable == 'function' ? variable : undefined;\n};\n\nmodule.exports = function (namespace, method) {\n return arguments.length < 2 ? aFunction(path[namespace]) || aFunction(global[namespace])\n : path[namespace] && path[namespace][method] || global[namespace] && global[namespace][method];\n};\n","module.exports = {};\n","import snippet from 'tui-code-snippet';\nimport { toInteger, clamp } from '@/util';\nimport { keyCodes } from '@/consts';\n\nconst INPUT_FILTER_REGEXP = /(-?)([0-9]*)[^0-9]*([0-9]*)/g;\n\n/**\n * Range control class\n * @class\n * @ignore\n */\nclass Range {\n /**\n * @constructor\n * @extends {View}\n * @param {Object} rangeElements - Html resources for creating sliders\n * @param {HTMLElement} rangeElements.slider - b\n * @param {HTMLElement} [rangeElements.input] - c\n * @param {Object} options - Slider make options\n * @param {number} options.min - min value\n * @param {number} options.max - max value\n * @param {number} options.value - default value\n * @param {number} [options.useDecimal] - Decimal point processing.\n * @param {boolean} [options.realTimeEvent] - Reflect live events.\n */\n constructor(rangeElements, options = {}) {\n this._value = options.value || 0;\n\n this.rangeElement = rangeElements.slider;\n this.rangeInputElement = rangeElements.input;\n\n this._drawRangeElement();\n\n this.rangeWidth = this._getRangeWidth();\n this._min = options.min || 0;\n this._max = options.max || 100;\n this._useDecimal = options.useDecimal;\n this._absMax = this._min * -1 + this._max;\n this.realTimeEvent = options.realTimeEvent || false;\n\n this.eventHandler = {\n startChangingSlide: this._startChangingSlide.bind(this),\n stopChangingSlide: this._stopChangingSlide.bind(this),\n changeSlide: this._changeSlide.bind(this),\n changeSlideFinally: this._changeSlideFinally.bind(this),\n changeInput: this._changeValueWithInput.bind(this, false),\n changeInputFinally: this._changeValueWithInput.bind(this, true),\n changeInputWithArrow: this._changeValueWithInputKeyEvent.bind(this),\n };\n\n this._addClickEvent();\n this._addDragEvent();\n this._addInputEvent();\n this.value = options.value;\n this.trigger('change');\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeClickEvent();\n this._removeDragEvent();\n this._removeInputEvent();\n this.rangeElement.innerHTML = '';\n snippet.forEach(this, (value, key) => {\n this[key] = null;\n });\n }\n\n /**\n * Set range max value and re position cursor\n * @param {number} maxValue - max value\n */\n set max(maxValue) {\n this._max = maxValue;\n this._absMax = this._min * -1 + this._max;\n this.value = this._value;\n }\n\n get max() {\n return this._max;\n }\n\n /**\n * Set range min value and re position cursor\n * @param {number} minValue - min value\n */\n set min(minValue) {\n this._min = minValue;\n this.max = this._max;\n }\n\n get min() {\n return this._min;\n }\n\n /**\n * Get range value\n * @returns {Number} range value\n */\n get value() {\n return this._value;\n }\n\n /**\n * Set range value\n * @param {Number} value range value\n */\n set value(value) {\n value = this._useDecimal ? value : toInteger(value);\n\n const absValue = value - this._min;\n let leftPosition = (absValue * this.rangeWidth) / this._absMax;\n\n if (this.rangeWidth < leftPosition) {\n leftPosition = this.rangeWidth;\n }\n\n this.pointer.style.left = `${leftPosition}px`;\n this.subbar.style.right = `${this.rangeWidth - leftPosition}px`;\n\n this._value = value;\n if (this.rangeInputElement) {\n this.rangeInputElement.value = value;\n }\n }\n\n /**\n * event trigger\n * @param {string} type - type\n */\n trigger(type) {\n this.fire(type, this._value);\n }\n\n /**\n * Calculate slider width\n * @returns {number} - slider width\n */\n _getRangeWidth() {\n const getElementWidth = (element) => toInteger(window.getComputedStyle(element, null).width);\n\n return getElementWidth(this.rangeElement) - getElementWidth(this.pointer);\n }\n\n /**\n * Make range element\n * @private\n */\n _drawRangeElement() {\n this.rangeElement.classList.add('tui-image-editor-range');\n\n this.bar = document.createElement('div');\n this.bar.className = 'tui-image-editor-virtual-range-bar';\n\n this.subbar = document.createElement('div');\n this.subbar.className = 'tui-image-editor-virtual-range-subbar';\n\n this.pointer = document.createElement('div');\n this.pointer.className = 'tui-image-editor-virtual-range-pointer';\n\n this.bar.appendChild(this.subbar);\n this.bar.appendChild(this.pointer);\n this.rangeElement.appendChild(this.bar);\n }\n\n /**\n * Add range input editing event\n * @private\n */\n _addInputEvent() {\n if (this.rangeInputElement) {\n this.rangeInputElement.addEventListener('keydown', this.eventHandler.changeInputWithArrow);\n this.rangeInputElement.addEventListener('keyup', this.eventHandler.changeInput);\n this.rangeInputElement.addEventListener('blur', this.eventHandler.changeInputFinally);\n }\n }\n\n /**\n * Remove range input editing event\n * @private\n */\n _removeInputEvent() {\n if (this.rangeInputElement) {\n this.rangeInputElement.removeEventListener('keydown', this.eventHandler.changeInputWithArrow);\n this.rangeInputElement.removeEventListener('keyup', this.eventHandler.changeInput);\n this.rangeInputElement.removeEventListener('blur', this.eventHandler.changeInputFinally);\n }\n }\n\n /**\n * change angle event\n * @param {object} event - key event\n * @private\n */\n _changeValueWithInputKeyEvent(event) {\n const { keyCode, target } = event;\n\n if ([keyCodes.ARROW_UP, keyCodes.ARROW_DOWN].indexOf(keyCode) < 0) {\n return;\n }\n\n let value = Number(target.value);\n\n value = this._valueUpDownForKeyEvent(value, keyCode);\n\n const unChanged = value < this._min || value > this._max;\n\n if (!unChanged) {\n const clampValue = clamp(value, this._min, this.max);\n this.value = clampValue;\n this.fire('change', clampValue, false);\n }\n }\n\n /**\n * value up down for input\n * @param {number} value - original value number\n * @param {number} keyCode - input event key code\n * @returns {number} value - changed value\n * @private\n */\n _valueUpDownForKeyEvent(value, keyCode) {\n const step = this._useDecimal ? 0.1 : 1;\n\n if (keyCode === keyCodes.ARROW_UP) {\n value += step;\n } else if (keyCode === keyCodes.ARROW_DOWN) {\n value -= step;\n }\n\n return value;\n }\n\n /**\n * change angle event\n * @param {boolean} isLast - Is last change\n * @param {object} event - key event\n * @private\n */\n _changeValueWithInput(isLast, event) {\n const { keyCode, target } = event;\n\n if ([keyCodes.ARROW_UP, keyCodes.ARROW_DOWN].indexOf(keyCode) >= 0) {\n return;\n }\n\n const stringValue = this._filterForInputText(target.value);\n const waitForChange = !stringValue || isNaN(stringValue);\n target.value = stringValue;\n\n if (!waitForChange) {\n let value = this._useDecimal ? Number(stringValue) : toInteger(stringValue);\n value = clamp(value, this._min, this.max);\n\n this.value = value;\n this.fire('change', value, isLast);\n }\n }\n\n /**\n * Add Range click event\n * @private\n */\n _addClickEvent() {\n this.rangeElement.addEventListener('click', this.eventHandler.changeSlideFinally);\n }\n\n /**\n * Remove Range click event\n * @private\n */\n _removeClickEvent() {\n this.rangeElement.removeEventListener('click', this.eventHandler.changeSlideFinally);\n }\n\n /**\n * Add Range drag event\n * @private\n */\n _addDragEvent() {\n this.pointer.addEventListener('mousedown', this.eventHandler.startChangingSlide);\n }\n\n /**\n * Remove Range drag event\n * @private\n */\n _removeDragEvent() {\n this.pointer.removeEventListener('mousedown', this.eventHandler.startChangingSlide);\n }\n\n /**\n * change angle event\n * @param {object} event - change event\n * @private\n */\n _changeSlide(event) {\n const changePosition = event.screenX;\n const diffPosition = changePosition - this.firstPosition;\n let touchPx = this.firstLeft + diffPosition;\n touchPx = touchPx > this.rangeWidth ? this.rangeWidth : touchPx;\n touchPx = touchPx < 0 ? 0 : touchPx;\n\n this.pointer.style.left = `${touchPx}px`;\n this.subbar.style.right = `${this.rangeWidth - touchPx}px`;\n\n const ratio = touchPx / this.rangeWidth;\n const resultValue = this._absMax * ratio + this._min;\n const value = this._useDecimal ? resultValue : toInteger(resultValue);\n const isValueChanged = this.value !== value;\n\n if (isValueChanged) {\n this.value = value;\n if (this.realTimeEvent) {\n this.fire('change', this._value, false);\n }\n }\n }\n\n _changeSlideFinally(event) {\n event.stopPropagation();\n if (event.target.className !== 'tui-image-editor-range') {\n return;\n }\n const touchPx = event.offsetX;\n const ratio = touchPx / this.rangeWidth;\n const value = this._absMax * ratio + this._min;\n this.pointer.style.left = `${ratio * this.rangeWidth}px`;\n this.subbar.style.right = `${(1 - ratio) * this.rangeWidth}px`;\n this.value = value;\n\n this.fire('change', value, true);\n }\n\n _startChangingSlide(event) {\n this.firstPosition = event.screenX;\n this.firstLeft = toInteger(this.pointer.style.left) || 0;\n\n document.addEventListener('mousemove', this.eventHandler.changeSlide);\n document.addEventListener('mouseup', this.eventHandler.stopChangingSlide);\n }\n\n /**\n * stop change angle event\n * @private\n */\n _stopChangingSlide() {\n this.fire('change', this._value, true);\n\n document.removeEventListener('mousemove', this.eventHandler.changeSlide);\n document.removeEventListener('mouseup', this.eventHandler.stopChangingSlide);\n }\n\n /**\n * Unnecessary string filtering.\n * @param {string} inputValue - origin string of input\n * @returns {string} filtered string\n * @private\n */\n _filterForInputText(inputValue) {\n return inputValue.replace(INPUT_FILTER_REGEXP, '$1$2$3');\n }\n}\n\nsnippet.CustomEvents.mixin(Range);\n\nexport default Range;\n","module.exports = true;\n","'use strict';\nvar aFunction = require('../internals/a-function');\n\nvar PromiseCapability = function (C) {\n var resolve, reject;\n this.promise = new C(function ($$resolve, $$reject) {\n if (resolve !== undefined || reject !== undefined) throw TypeError('Bad Promise constructor');\n resolve = $$resolve;\n reject = $$reject;\n });\n this.resolve = aFunction(resolve);\n this.reject = aFunction(reject);\n};\n\n// 25.4.1.5 NewPromiseCapability(C)\nmodule.exports.f = function (C) {\n return new PromiseCapability(C);\n};\n","import snippet from 'tui-code-snippet';\nimport tuiColorPicker from 'tui-color-picker';\n\nconst PICKER_COLOR = [\n '#000000',\n '#2a2a2a',\n '#545454',\n '#7e7e7e',\n '#a8a8a8',\n '#d2d2d2',\n '#ffffff',\n '',\n '#ff4040',\n '#ff6518',\n '#ffbb3b',\n '#03bd9e',\n '#00a9ff',\n '#515ce6',\n '#9e5fff',\n '#ff5583',\n];\n\n/**\n * Colorpicker control class\n * @class\n * @ignore\n */\nclass Colorpicker {\n constructor(\n colorpickerElement,\n defaultColor = '#7e7e7e',\n toggleDirection = 'up',\n usageStatistics\n ) {\n this.colorpickerElement = colorpickerElement;\n this.usageStatistics = usageStatistics;\n\n this._show = false;\n\n this._colorpickerElement = colorpickerElement;\n this._toggleDirection = toggleDirection;\n this._makePickerButtonElement(defaultColor);\n this._makePickerLayerElement(colorpickerElement, colorpickerElement.getAttribute('title'));\n this._color = defaultColor;\n this.picker = tuiColorPicker.create({\n container: this.pickerElement,\n preset: PICKER_COLOR,\n color: defaultColor,\n usageStatistics: this.usageStatistics,\n });\n\n this._addEvent();\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeEvent();\n this.picker.destroy();\n this.colorpickerElement.innerHTML = '';\n snippet.forEach(this, (value, key) => {\n this[key] = null;\n });\n }\n\n /**\n * Get color\n * @returns {Number} color value\n */\n get color() {\n return this._color;\n }\n\n /**\n * Set color\n * @param {string} color color value\n */\n set color(color) {\n this._color = color;\n this._changeColorElement(color);\n }\n\n /**\n * Change color element\n * @param {string} color color value\n * #private\n */\n _changeColorElement(color) {\n if (color) {\n this.colorElement.classList.remove('transparent');\n this.colorElement.style.backgroundColor = color;\n } else {\n this.colorElement.style.backgroundColor = '#fff';\n this.colorElement.classList.add('transparent');\n }\n }\n\n /**\n * Make picker button element\n * @param {string} defaultColor color value\n * @private\n */\n _makePickerButtonElement(defaultColor) {\n this.colorpickerElement.classList.add('tui-image-editor-button');\n\n this.colorElement = document.createElement('div');\n this.colorElement.className = 'color-picker-value';\n if (defaultColor) {\n this.colorElement.style.backgroundColor = defaultColor;\n } else {\n this.colorElement.classList.add('transparent');\n }\n }\n\n /**\n * Make picker layer element\n * @param {HTMLElement} colorpickerElement color picker element\n * @param {string} title picker title\n * @private\n */\n _makePickerLayerElement(colorpickerElement, title) {\n const label = document.createElement('label');\n const triangle = document.createElement('div');\n\n this.pickerControl = document.createElement('div');\n this.pickerControl.className = 'color-picker-control';\n\n this.pickerElement = document.createElement('div');\n this.pickerElement.className = 'color-picker';\n\n label.innerHTML = title;\n triangle.className = 'triangle';\n\n this.pickerControl.appendChild(this.pickerElement);\n this.pickerControl.appendChild(triangle);\n\n colorpickerElement.appendChild(this.pickerControl);\n colorpickerElement.appendChild(this.colorElement);\n colorpickerElement.appendChild(label);\n }\n\n /**\n * Add event\n * @private\n */\n _addEvent() {\n this.picker.on('selectColor', (value) => {\n this._changeColorElement(value.color);\n this._color = value.color;\n this.fire('change', value.color);\n });\n\n this.eventHandler = {\n pickerToggle: this._pickerToggleEventHandler.bind(this),\n pickerHide: () => this.hide(),\n };\n\n this.colorpickerElement.addEventListener('click', this.eventHandler.pickerToggle);\n document.body.addEventListener('click', this.eventHandler.pickerHide);\n }\n\n /**\n * Remove event\n * @private\n */\n _removeEvent() {\n this.colorpickerElement.removeEventListener('click', this.eventHandler.pickerToggle);\n document.body.removeEventListener('click', this.eventHandler.pickerHide);\n this.picker.off();\n }\n\n /**\n * Picker toggle event handler\n * @param {object} event - change event\n * @private\n */\n _pickerToggleEventHandler(event) {\n const { target } = event;\n const isInPickerControl = target && this._isElementInColorPickerControl(target);\n\n if (!isInPickerControl || (isInPickerControl && this._isPaletteButton(target))) {\n this._show = !this._show;\n this.pickerControl.style.display = this._show ? 'block' : 'none';\n this._setPickerControlPosition();\n this.fire('changeShow', this);\n }\n event.stopPropagation();\n }\n\n /**\n * Check hex input or not\n * @param {Element} target - Event target element\n * @returns {boolean}\n * @private\n */\n _isPaletteButton(target) {\n return target.className === 'tui-colorpicker-palette-button';\n }\n\n /**\n * Check given element is in pickerControl element\n * @param {Element} element - element to check\n * @returns {boolean}\n * @private\n */\n _isElementInColorPickerControl(element) {\n let parentNode = element;\n\n while (parentNode !== document.body) {\n if (!parentNode) {\n break;\n }\n\n if (parentNode === this.pickerControl) {\n return true;\n }\n\n parentNode = parentNode.parentNode;\n }\n\n return false;\n }\n\n hide() {\n this._show = false;\n this.pickerControl.style.display = 'none';\n }\n\n /**\n * Set picker control position\n * @private\n */\n _setPickerControlPosition() {\n const controlStyle = this.pickerControl.style;\n const halfPickerWidth = this._colorpickerElement.clientWidth / 2 + 2;\n const left = this.pickerControl.offsetWidth / 2 - halfPickerWidth;\n let top = (this.pickerControl.offsetHeight + 10) * -1;\n\n if (this._toggleDirection === 'down') {\n top = 30;\n }\n\n controlStyle.top = `${top}px`;\n controlStyle.left = `-${left}px`;\n }\n}\n\nsnippet.CustomEvents.mixin(Colorpicker);\nexport default Colorpicker;\n","module.exports = function (bitmap, value) {\n return {\n enumerable: !(bitmap & 1),\n configurable: !(bitmap & 2),\n writable: !(bitmap & 4),\n value: value\n };\n};\n","// toObject with fallback for non-array-like ES3 strings\nvar IndexedObject = require('../internals/indexed-object');\nvar requireObjectCoercible = require('../internals/require-object-coercible');\n\nmodule.exports = function (it) {\n return IndexedObject(requireObjectCoercible(it));\n};\n","var DESCRIPTORS = require('../internals/descriptors');\nvar IE8_DOM_DEFINE = require('../internals/ie8-dom-define');\nvar anObject = require('../internals/an-object');\nvar toPrimitive = require('../internals/to-primitive');\n\n// eslint-disable-next-line es/no-object-defineproperty -- safe\nvar $defineProperty = Object.defineProperty;\n\n// `Object.defineProperty` method\n// https://tc39.es/ecma262/#sec-object.defineproperty\nexports.f = DESCRIPTORS ? $defineProperty : function defineProperty(O, P, Attributes) {\n anObject(O);\n P = toPrimitive(P, true);\n anObject(Attributes);\n if (IE8_DOM_DEFINE) try {\n return $defineProperty(O, P, Attributes);\n } catch (error) { /* empty */ }\n if ('get' in Attributes || 'set' in Attributes) throw TypeError('Accessors not supported');\n if ('value' in Attributes) O[P] = Attributes.value;\n return O;\n};\n","var anObject = require('../internals/an-object');\nvar isArrayIteratorMethod = require('../internals/is-array-iterator-method');\nvar toLength = require('../internals/to-length');\nvar bind = require('../internals/function-bind-context');\nvar getIteratorMethod = require('../internals/get-iterator-method');\nvar iteratorClose = require('../internals/iterator-close');\n\nvar Result = function (stopped, result) {\n this.stopped = stopped;\n this.result = result;\n};\n\nmodule.exports = function (iterable, unboundFunction, options) {\n var that = options && options.that;\n var AS_ENTRIES = !!(options && options.AS_ENTRIES);\n var IS_ITERATOR = !!(options && options.IS_ITERATOR);\n var INTERRUPTED = !!(options && options.INTERRUPTED);\n var fn = bind(unboundFunction, that, 1 + AS_ENTRIES + INTERRUPTED);\n var iterator, iterFn, index, length, result, next, step;\n\n var stop = function (condition) {\n if (iterator) iteratorClose(iterator);\n return new Result(true, condition);\n };\n\n var callFn = function (value) {\n if (AS_ENTRIES) {\n anObject(value);\n return INTERRUPTED ? fn(value[0], value[1], stop) : fn(value[0], value[1]);\n } return INTERRUPTED ? fn(value, stop) : fn(value);\n };\n\n if (IS_ITERATOR) {\n iterator = iterable;\n } else {\n iterFn = getIteratorMethod(iterable);\n if (typeof iterFn != 'function') throw TypeError('Target is not iterable');\n // optimisation for array iterators\n if (isArrayIteratorMethod(iterFn)) {\n for (index = 0, length = toLength(iterable.length); length > index; index++) {\n result = callFn(iterable[index]);\n if (result && result instanceof Result) return result;\n } return new Result(false);\n }\n iterator = iterFn.call(iterable);\n }\n\n next = iterator.next;\n while (!(step = next.call(iterator)).done) {\n try {\n result = callFn(step.value);\n } catch (error) {\n iteratorClose(iterator);\n throw error;\n }\n if (typeof result == 'object' && result && result instanceof Result) return result;\n } return new Result(false);\n};\n","var createNonEnumerableProperty = require('../internals/create-non-enumerable-property');\n\nmodule.exports = function (target, key, value, options) {\n if (options && options.enumerable) target[key] = value;\n else createNonEnumerableProperty(target, key, value);\n};\n","module.exports = function (exec) {\n try {\n return { error: false, value: exec() };\n } catch (error) {\n return { error: true, value: error };\n }\n};\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Selection modification helper\n */\n\nimport { extend } from 'tui-code-snippet';\nimport fabric from 'fabric';\n\n/**\n * Cached selection's info\n * @type {Array}\n * @private\n */\nlet cachedUndoDataForChangeDimension = null;\n\n/**\n * Set cached undo data\n * @param {Array} undoData - selection object\n * @private\n */\nexport function setCachedUndoDataForDimension(undoData) {\n cachedUndoDataForChangeDimension = undoData;\n}\n\n/**\n * Get cached undo data\n * @returns {Object} cached undo data\n * @private\n */\nexport function getCachedUndoDataForDimension() {\n return cachedUndoDataForChangeDimension;\n}\n\n/**\n * Make undo data\n * @param {fabric.Object} obj - selection object\n * @param {Function} undoDatumMaker - make undo datum\n * @returns {Array} undoData\n * @private\n */\nexport function makeSelectionUndoData(obj, undoDatumMaker) {\n let undoData;\n\n if (obj.type === 'activeSelection') {\n undoData = obj.getObjects().map((item) => {\n const { angle, left, top, scaleX, scaleY, width, height } = item;\n\n fabric.util.addTransformToObject(item, obj.calcTransformMatrix());\n const result = undoDatumMaker(item);\n\n item.set({\n angle,\n left,\n top,\n width,\n height,\n scaleX,\n scaleY,\n });\n\n return result;\n });\n } else {\n undoData = [undoDatumMaker(obj)];\n }\n\n return undoData;\n}\n\n/**\n * Make undo datum\n * @param {number} id - object id\n * @param {fabric.Object} obj - selection object\n * @param {boolean} isSelection - whether or not object is selection\n * @returns {Object} undo datum\n * @private\n */\nexport function makeSelectionUndoDatum(id, obj, isSelection) {\n return isSelection\n ? {\n id,\n width: obj.width,\n height: obj.height,\n top: obj.top,\n left: obj.left,\n angle: obj.angle,\n scaleX: obj.scaleX,\n scaleY: obj.scaleY,\n }\n : extend({ id }, obj);\n}\n","var toString = {}.toString;\n\nmodule.exports = function (it) {\n return toString.call(it).slice(8, -1);\n};\n","// `RequireObjectCoercible` abstract operation\n// https://tc39.es/ecma262/#sec-requireobjectcoercible\nmodule.exports = function (it) {\n if (it == undefined) throw TypeError(\"Can't call method on \" + it);\n return it;\n};\n","var global = require('../internals/global');\nvar isObject = require('../internals/is-object');\n\nvar document = global.document;\n// typeof document.createElement is 'object' in old IE\nvar EXISTS = isObject(document) && isObject(document.createElement);\n\nmodule.exports = function (it) {\n return EXISTS ? document.createElement(it) : {};\n};\n","module.exports = {};\n","var aFunction = require('../internals/a-function');\n\n// optional / simple context binding\nmodule.exports = function (fn, that, length) {\n aFunction(fn);\n if (that === undefined) return fn;\n switch (length) {\n case 0: return function () {\n return fn.call(that);\n };\n case 1: return function (a) {\n return fn.call(that, a);\n };\n case 2: return function (a, b) {\n return fn.call(that, a, b);\n };\n case 3: return function (a, b, c) {\n return fn.call(that, a, b, c);\n };\n }\n return function (/* ...args */) {\n return fn.apply(that, arguments);\n };\n};\n","var has = require('../internals/has');\nvar toObject = require('../internals/to-object');\nvar sharedKey = require('../internals/shared-key');\nvar CORRECT_PROTOTYPE_GETTER = require('../internals/correct-prototype-getter');\n\nvar IE_PROTO = sharedKey('IE_PROTO');\nvar ObjectPrototype = Object.prototype;\n\n// `Object.getPrototypeOf` method\n// https://tc39.es/ecma262/#sec-object.getprototypeof\n// eslint-disable-next-line es/no-object-getprototypeof -- safe\nmodule.exports = CORRECT_PROTOTYPE_GETTER ? Object.getPrototypeOf : function (O) {\n O = toObject(O);\n if (has(O, IE_PROTO)) return O[IE_PROTO];\n if (typeof O.constructor == 'function' && O instanceof O.constructor) {\n return O.constructor.prototype;\n } return O instanceof Object ? ObjectPrototype : null;\n};\n","var shared = require('../internals/shared');\nvar uid = require('../internals/uid');\n\nvar keys = shared('keys');\n\nmodule.exports = function (key) {\n return keys[key] || (keys[key] = uid(key));\n};\n","var global = require('../internals/global');\nvar setGlobal = require('../internals/set-global');\n\nvar SHARED = '__core-js_shared__';\nvar store = global[SHARED] || setGlobal(SHARED, {});\n\nmodule.exports = store;\n","/* eslint-disable no-proto -- safe */\nvar anObject = require('../internals/an-object');\nvar aPossiblePrototype = require('../internals/a-possible-prototype');\n\n// `Object.setPrototypeOf` method\n// https://tc39.es/ecma262/#sec-object.setprototypeof\n// Works with __proto__ only. Old v8 can't work with null proto objects.\n// eslint-disable-next-line es/no-object-setprototypeof -- safe\nmodule.exports = Object.setPrototypeOf || ('__proto__' in {} ? function () {\n var CORRECT_SETTER = false;\n var test = {};\n var setter;\n try {\n // eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe\n setter = Object.getOwnPropertyDescriptor(Object.prototype, '__proto__').set;\n setter.call(test, []);\n CORRECT_SETTER = test instanceof Array;\n } catch (error) { /* empty */ }\n return function setPrototypeOf(O, proto) {\n anObject(O);\n aPossiblePrototype(proto);\n if (CORRECT_SETTER) setter.call(O, proto);\n else O.__proto__ = proto;\n return O;\n };\n}() : undefined);\n","var ceil = Math.ceil;\nvar floor = Math.floor;\n\n// `ToInteger` abstract operation\n// https://tc39.es/ecma262/#sec-tointeger\nmodule.exports = function (argument) {\n return isNaN(argument = +argument) ? 0 : (argument > 0 ? floor : ceil)(argument);\n};\n","module.exports = {};\n","var getBuiltIn = require('../internals/get-built-in');\n\nmodule.exports = getBuiltIn('navigator', 'userAgent') || '';\n","var TO_STRING_TAG_SUPPORT = require('../internals/to-string-tag-support');\nvar classofRaw = require('../internals/classof-raw');\nvar wellKnownSymbol = require('../internals/well-known-symbol');\n\nvar TO_STRING_TAG = wellKnownSymbol('toStringTag');\n// ES3 wrong here\nvar CORRECT_ARGUMENTS = classofRaw(function () { return arguments; }()) == 'Arguments';\n\n// fallback for IE11 Script Access Denied error\nvar tryGet = function (it, key) {\n try {\n return it[key];\n } catch (error) { /* empty */ }\n};\n\n// getting tag from ES6+ `Object.prototype.toString`\nmodule.exports = TO_STRING_TAG_SUPPORT ? classofRaw : function (it) {\n var O, tag, result;\n return it === undefined ? 'Undefined' : it === null ? 'Null'\n // @@toStringTag case\n : typeof (tag = tryGet(O = Object(it), TO_STRING_TAG)) == 'string' ? tag\n // builtinTag case\n : CORRECT_ARGUMENTS ? classofRaw(O)\n // ES3 arguments fallback\n : (result = classofRaw(O)) == 'Object' && typeof O.callee == 'function' ? 'Arguments' : result;\n};\n","var wellKnownSymbol = require('../internals/well-known-symbol');\n\nvar TO_STRING_TAG = wellKnownSymbol('toStringTag');\nvar test = {};\n\ntest[TO_STRING_TAG] = 'z';\n\nmodule.exports = String(test) === '[object z]';\n","var TO_STRING_TAG_SUPPORT = require('../internals/to-string-tag-support');\nvar defineProperty = require('../internals/object-define-property').f;\nvar createNonEnumerableProperty = require('../internals/create-non-enumerable-property');\nvar has = require('../internals/has');\nvar toString = require('../internals/object-to-string');\nvar wellKnownSymbol = require('../internals/well-known-symbol');\n\nvar TO_STRING_TAG = wellKnownSymbol('toStringTag');\n\nmodule.exports = function (it, TAG, STATIC, SET_METHOD) {\n if (it) {\n var target = STATIC ? it : it.prototype;\n if (!has(target, TO_STRING_TAG)) {\n defineProperty(target, TO_STRING_TAG, { configurable: true, value: TAG });\n }\n if (SET_METHOD && !TO_STRING_TAG_SUPPORT) {\n createNonEnumerableProperty(target, 'toString', toString);\n }\n }\n};\n","var classof = require('../internals/classof-raw');\nvar global = require('../internals/global');\n\nmodule.exports = classof(global.process) == 'process';\n","var NATIVE_WEAK_MAP = require('../internals/native-weak-map');\nvar global = require('../internals/global');\nvar isObject = require('../internals/is-object');\nvar createNonEnumerableProperty = require('../internals/create-non-enumerable-property');\nvar objectHas = require('../internals/has');\nvar shared = require('../internals/shared-store');\nvar sharedKey = require('../internals/shared-key');\nvar hiddenKeys = require('../internals/hidden-keys');\n\nvar OBJECT_ALREADY_INITIALIZED = 'Object already initialized';\nvar WeakMap = global.WeakMap;\nvar set, get, has;\n\nvar enforce = function (it) {\n return has(it) ? get(it) : set(it, {});\n};\n\nvar getterFor = function (TYPE) {\n return function (it) {\n var state;\n if (!isObject(it) || (state = get(it)).type !== TYPE) {\n throw TypeError('Incompatible receiver, ' + TYPE + ' required');\n } return state;\n };\n};\n\nif (NATIVE_WEAK_MAP || shared.state) {\n var store = shared.state || (shared.state = new WeakMap());\n var wmget = store.get;\n var wmhas = store.has;\n var wmset = store.set;\n set = function (it, metadata) {\n if (wmhas.call(store, it)) throw new TypeError(OBJECT_ALREADY_INITIALIZED);\n metadata.facade = it;\n wmset.call(store, it, metadata);\n return metadata;\n };\n get = function (it) {\n return wmget.call(store, it) || {};\n };\n has = function (it) {\n return wmhas.call(store, it);\n };\n} else {\n var STATE = sharedKey('state');\n hiddenKeys[STATE] = true;\n set = function (it, metadata) {\n if (objectHas(it, STATE)) throw new TypeError(OBJECT_ALREADY_INITIALIZED);\n metadata.facade = it;\n createNonEnumerableProperty(it, STATE, metadata);\n return metadata;\n };\n get = function (it) {\n return objectHas(it, STATE) ? it[STATE] : {};\n };\n has = function (it) {\n return objectHas(it, STATE);\n };\n}\n\nmodule.exports = {\n set: set,\n get: get,\n has: has,\n enforce: enforce,\n getterFor: getterFor\n};\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Error-message factory\n */\nimport snippet from 'tui-code-snippet';\nimport { keyMirror } from '@/util';\n\nconst types = keyMirror('UN_IMPLEMENTATION', 'NO_COMPONENT_NAME');\nconst messages = {\n UN_IMPLEMENTATION: 'Should implement a method: ',\n NO_COMPONENT_NAME: 'Should set a component name',\n};\nconst map = {\n UN_IMPLEMENTATION(methodName) {\n return messages.UN_IMPLEMENTATION + methodName;\n },\n NO_COMPONENT_NAME() {\n return messages.NO_COMPONENT_NAME;\n },\n};\n\nexport default {\n types: snippet.extend({}, types),\n\n create(type, ...args) {\n type = type.toLowerCase();\n const func = map[type];\n\n return func(...args);\n },\n};\n","'use strict';\nvar $ = require('../internals/export');\nvar getPrototypeOf = require('../internals/object-get-prototype-of');\nvar setPrototypeOf = require('../internals/object-set-prototype-of');\nvar create = require('../internals/object-create');\nvar createNonEnumerableProperty = require('../internals/create-non-enumerable-property');\nvar createPropertyDescriptor = require('../internals/create-property-descriptor');\nvar iterate = require('../internals/iterate');\n\nvar $AggregateError = function AggregateError(errors, message) {\n var that = this;\n if (!(that instanceof $AggregateError)) return new $AggregateError(errors, message);\n if (setPrototypeOf) {\n // eslint-disable-next-line unicorn/error-message -- expected\n that = setPrototypeOf(new Error(undefined), getPrototypeOf(that));\n }\n if (message !== undefined) createNonEnumerableProperty(that, 'message', String(message));\n var errorsArray = [];\n iterate(errors, errorsArray.push, { that: errorsArray });\n createNonEnumerableProperty(that, 'errors', errorsArray);\n return that;\n};\n\n$AggregateError.prototype = create(Error.prototype, {\n constructor: createPropertyDescriptor(5, $AggregateError),\n message: createPropertyDescriptor(5, ''),\n name: createPropertyDescriptor(5, 'AggregateError')\n});\n\n// `AggregateError` constructor\n// https://tc39.es/ecma262/#sec-aggregate-error-constructor\n$({ global: true }, {\n AggregateError: $AggregateError\n});\n","var DESCRIPTORS = require('../internals/descriptors');\nvar propertyIsEnumerableModule = require('../internals/object-property-is-enumerable');\nvar createPropertyDescriptor = require('../internals/create-property-descriptor');\nvar toIndexedObject = require('../internals/to-indexed-object');\nvar toPrimitive = require('../internals/to-primitive');\nvar has = require('../internals/has');\nvar IE8_DOM_DEFINE = require('../internals/ie8-dom-define');\n\n// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe\nvar $getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;\n\n// `Object.getOwnPropertyDescriptor` method\n// https://tc39.es/ecma262/#sec-object.getownpropertydescriptor\nexports.f = DESCRIPTORS ? $getOwnPropertyDescriptor : function getOwnPropertyDescriptor(O, P) {\n O = toIndexedObject(O);\n P = toPrimitive(P, true);\n if (IE8_DOM_DEFINE) try {\n return $getOwnPropertyDescriptor(O, P);\n } catch (error) { /* empty */ }\n if (has(O, P)) return createPropertyDescriptor(!propertyIsEnumerableModule.f.call(O, P), O[P]);\n};\n","var isObject = require('../internals/is-object');\n\n// `ToPrimitive` abstract operation\n// https://tc39.es/ecma262/#sec-toprimitive\n// instead of the ES6 spec version, we didn't implement @@toPrimitive case\n// and the second argument - flag - preferred type is a string\nmodule.exports = function (input, PREFERRED_STRING) {\n if (!isObject(input)) return input;\n var fn, val;\n if (PREFERRED_STRING && typeof (fn = input.toString) == 'function' && !isObject(val = fn.call(input))) return val;\n if (typeof (fn = input.valueOf) == 'function' && !isObject(val = fn.call(input))) return val;\n if (!PREFERRED_STRING && typeof (fn = input.toString) == 'function' && !isObject(val = fn.call(input))) return val;\n throw TypeError(\"Can't convert object to primitive value\");\n};\n","var requireObjectCoercible = require('../internals/require-object-coercible');\n\n// `ToObject` abstract operation\n// https://tc39.es/ecma262/#sec-toobject\nmodule.exports = function (argument) {\n return Object(requireObjectCoercible(argument));\n};\n","var DESCRIPTORS = require('../internals/descriptors');\nvar fails = require('../internals/fails');\nvar createElement = require('../internals/document-create-element');\n\n// Thank's IE8 for his funny defineProperty\nmodule.exports = !DESCRIPTORS && !fails(function () {\n // eslint-disable-next-line es/no-object-defineproperty -- requied for testing\n return Object.defineProperty(createElement('div'), 'a', {\n get: function () { return 7; }\n }).a != 7;\n});\n","var fails = require('../internals/fails');\n\nvar replacement = /#|\\.prototype\\./;\n\nvar isForced = function (feature, detection) {\n var value = data[normalize(feature)];\n return value == POLYFILL ? true\n : value == NATIVE ? false\n : typeof detection == 'function' ? fails(detection)\n : !!detection;\n};\n\nvar normalize = isForced.normalize = function (string) {\n return String(string).replace(replacement, '.').toLowerCase();\n};\n\nvar data = isForced.data = {};\nvar NATIVE = isForced.NATIVE = 'N';\nvar POLYFILL = isForced.POLYFILL = 'P';\n\nmodule.exports = isForced;\n","var IS_PURE = require('../internals/is-pure');\nvar store = require('../internals/shared-store');\n\n(module.exports = function (key, value) {\n return store[key] || (store[key] = value !== undefined ? value : {});\n})('versions', []).push({\n version: '3.13.0',\n mode: IS_PURE ? 'pure' : 'global',\n copyright: '© 2021 Denis Pushkarev (zloirock.ru)'\n});\n","var id = 0;\nvar postfix = Math.random();\n\nmodule.exports = function (key) {\n return 'Symbol(' + String(key === undefined ? '' : key) + ')_' + (++id + postfix).toString(36);\n};\n","var anObject = require('../internals/an-object');\nvar defineProperties = require('../internals/object-define-properties');\nvar enumBugKeys = require('../internals/enum-bug-keys');\nvar hiddenKeys = require('../internals/hidden-keys');\nvar html = require('../internals/html');\nvar documentCreateElement = require('../internals/document-create-element');\nvar sharedKey = require('../internals/shared-key');\n\nvar GT = '>';\nvar LT = '<';\nvar PROTOTYPE = 'prototype';\nvar SCRIPT = 'script';\nvar IE_PROTO = sharedKey('IE_PROTO');\n\nvar EmptyConstructor = function () { /* empty */ };\n\nvar scriptTag = function (content) {\n return LT + SCRIPT + GT + content + LT + '/' + SCRIPT + GT;\n};\n\n// Create object with fake `null` prototype: use ActiveX Object with cleared prototype\nvar NullProtoObjectViaActiveX = function (activeXDocument) {\n activeXDocument.write(scriptTag(''));\n activeXDocument.close();\n var temp = activeXDocument.parentWindow.Object;\n activeXDocument = null; // avoid memory leak\n return temp;\n};\n\n// Create object with fake `null` prototype: use iframe Object with cleared prototype\nvar NullProtoObjectViaIFrame = function () {\n // Thrash, waste and sodomy: IE GC bug\n var iframe = documentCreateElement('iframe');\n var JS = 'java' + SCRIPT + ':';\n var iframeDocument;\n iframe.style.display = 'none';\n html.appendChild(iframe);\n // https://github.com/zloirock/core-js/issues/475\n iframe.src = String(JS);\n iframeDocument = iframe.contentWindow.document;\n iframeDocument.open();\n iframeDocument.write(scriptTag('document.F=Object'));\n iframeDocument.close();\n return iframeDocument.F;\n};\n\n// Check for document.domain and active x support\n// No need to use active x approach when document.domain is not set\n// see https://github.com/es-shims/es5-shim/issues/150\n// variation of https://github.com/kitcambridge/es5-shim/commit/4f738ac066346\n// avoid IE GC bug\nvar activeXDocument;\nvar NullProtoObject = function () {\n try {\n /* global ActiveXObject -- old IE */\n activeXDocument = document.domain && new ActiveXObject('htmlfile');\n } catch (error) { /* ignore */ }\n NullProtoObject = activeXDocument ? NullProtoObjectViaActiveX(activeXDocument) : NullProtoObjectViaIFrame();\n var length = enumBugKeys.length;\n while (length--) delete NullProtoObject[PROTOTYPE][enumBugKeys[length]];\n return NullProtoObject();\n};\n\nhiddenKeys[IE_PROTO] = true;\n\n// `Object.create` method\n// https://tc39.es/ecma262/#sec-object.create\nmodule.exports = Object.create || function create(O, Properties) {\n var result;\n if (O !== null) {\n EmptyConstructor[PROTOTYPE] = anObject(O);\n result = new EmptyConstructor();\n EmptyConstructor[PROTOTYPE] = null;\n // add \"__proto__\" for Object.getPrototypeOf polyfill\n result[IE_PROTO] = O;\n } else result = NullProtoObject();\n return Properties === undefined ? result : defineProperties(result, Properties);\n};\n","var toInteger = require('../internals/to-integer');\n\nvar min = Math.min;\n\n// `ToLength` abstract operation\n// https://tc39.es/ecma262/#sec-tolength\nmodule.exports = function (argument) {\n return argument > 0 ? min(toInteger(argument), 0x1FFFFFFFFFFFFF) : 0; // 2 ** 53 - 1 == 9007199254740991\n};\n","// IE8- don't enum bug keys\nmodule.exports = [\n 'constructor',\n 'hasOwnProperty',\n 'isPrototypeOf',\n 'propertyIsEnumerable',\n 'toLocaleString',\n 'toString',\n 'valueOf'\n];\n","var getBuiltIn = require('../internals/get-built-in');\n\nmodule.exports = getBuiltIn('document', 'documentElement');\n","/* eslint-disable es/no-symbol -- required for testing */\nvar V8_VERSION = require('../internals/engine-v8-version');\nvar fails = require('../internals/fails');\n\n// eslint-disable-next-line es/no-object-getownpropertysymbols -- required for testing\nmodule.exports = !!Object.getOwnPropertySymbols && !fails(function () {\n return !String(Symbol()) ||\n // Chrome 38 Symbol has incorrect toString conversion\n // Chrome 38-40 symbols are not inherited from DOM collections prototypes to instances\n !Symbol.sham && V8_VERSION && V8_VERSION < 41;\n});\n","var global = require('../internals/global');\nvar userAgent = require('../internals/engine-user-agent');\n\nvar process = global.process;\nvar versions = process && process.versions;\nvar v8 = versions && versions.v8;\nvar match, version;\n\nif (v8) {\n match = v8.split('.');\n version = match[0] < 4 ? 1 : match[0] + match[1];\n} else if (userAgent) {\n match = userAgent.match(/Edge\\/(\\d+)/);\n if (!match || match[1] >= 74) {\n match = userAgent.match(/Chrome\\/(\\d+)/);\n if (match) version = match[1];\n }\n}\n\nmodule.exports = version && +version;\n","var global = require('../internals/global');\n\nmodule.exports = global.Promise;\n","var store = require('../internals/shared-store');\n\nvar functionToString = Function.toString;\n\n// this helper broken in `3.4.1-3.4.4`, so we can't use `shared` helper\nif (typeof store.inspectSource != 'function') {\n store.inspectSource = function (it) {\n return functionToString.call(it);\n };\n}\n\nmodule.exports = store.inspectSource;\n","var anObject = require('../internals/an-object');\nvar aFunction = require('../internals/a-function');\nvar wellKnownSymbol = require('../internals/well-known-symbol');\n\nvar SPECIES = wellKnownSymbol('species');\n\n// `SpeciesConstructor` abstract operation\n// https://tc39.es/ecma262/#sec-speciesconstructor\nmodule.exports = function (O, defaultConstructor) {\n var C = anObject(O).constructor;\n var S;\n return C === undefined || (S = anObject(C)[SPECIES]) == undefined ? defaultConstructor : aFunction(S);\n};\n","var global = require('../internals/global');\nvar fails = require('../internals/fails');\nvar bind = require('../internals/function-bind-context');\nvar html = require('../internals/html');\nvar createElement = require('../internals/document-create-element');\nvar IS_IOS = require('../internals/engine-is-ios');\nvar IS_NODE = require('../internals/engine-is-node');\n\nvar location = global.location;\nvar set = global.setImmediate;\nvar clear = global.clearImmediate;\nvar process = global.process;\nvar MessageChannel = global.MessageChannel;\nvar Dispatch = global.Dispatch;\nvar counter = 0;\nvar queue = {};\nvar ONREADYSTATECHANGE = 'onreadystatechange';\nvar defer, channel, port;\n\nvar run = function (id) {\n // eslint-disable-next-line no-prototype-builtins -- safe\n if (queue.hasOwnProperty(id)) {\n var fn = queue[id];\n delete queue[id];\n fn();\n }\n};\n\nvar runner = function (id) {\n return function () {\n run(id);\n };\n};\n\nvar listener = function (event) {\n run(event.data);\n};\n\nvar post = function (id) {\n // old engines have not location.origin\n global.postMessage(id + '', location.protocol + '//' + location.host);\n};\n\n// Node.js 0.9+ & IE10+ has setImmediate, otherwise:\nif (!set || !clear) {\n set = function setImmediate(fn) {\n var args = [];\n var i = 1;\n while (arguments.length > i) args.push(arguments[i++]);\n queue[++counter] = function () {\n // eslint-disable-next-line no-new-func -- spec requirement\n (typeof fn == 'function' ? fn : Function(fn)).apply(undefined, args);\n };\n defer(counter);\n return counter;\n };\n clear = function clearImmediate(id) {\n delete queue[id];\n };\n // Node.js 0.8-\n if (IS_NODE) {\n defer = function (id) {\n process.nextTick(runner(id));\n };\n // Sphere (JS game engine) Dispatch API\n } else if (Dispatch && Dispatch.now) {\n defer = function (id) {\n Dispatch.now(runner(id));\n };\n // Browsers with MessageChannel, includes WebWorkers\n // except iOS - https://github.com/zloirock/core-js/issues/624\n } else if (MessageChannel && !IS_IOS) {\n channel = new MessageChannel();\n port = channel.port2;\n channel.port1.onmessage = listener;\n defer = bind(port.postMessage, port, 1);\n // Browsers with postMessage, skip WebWorkers\n // IE8 has postMessage, but it's sync & typeof its postMessage is 'object'\n } else if (\n global.addEventListener &&\n typeof postMessage == 'function' &&\n !global.importScripts &&\n location && location.protocol !== 'file:' &&\n !fails(post)\n ) {\n defer = post;\n global.addEventListener('message', listener, false);\n // IE8-\n } else if (ONREADYSTATECHANGE in createElement('script')) {\n defer = function (id) {\n html.appendChild(createElement('script'))[ONREADYSTATECHANGE] = function () {\n html.removeChild(this);\n run(id);\n };\n };\n // Rest old browsers\n } else {\n defer = function (id) {\n setTimeout(runner(id), 0);\n };\n }\n}\n\nmodule.exports = {\n set: set,\n clear: clear\n};\n","var userAgent = require('../internals/engine-user-agent');\n\nmodule.exports = /(?:iphone|ipod|ipad).*applewebkit/i.test(userAgent);\n","var anObject = require('../internals/an-object');\nvar isObject = require('../internals/is-object');\nvar newPromiseCapability = require('../internals/new-promise-capability');\n\nmodule.exports = function (C, x) {\n anObject(C);\n if (isObject(x) && x.constructor === C) return x;\n var promiseCapability = newPromiseCapability.f(C);\n var resolve = promiseCapability.resolve;\n resolve(x);\n return promiseCapability.promise;\n};\n","'use strict';\nvar $ = require('../internals/export');\nvar aFunction = require('../internals/a-function');\nvar newPromiseCapabilityModule = require('../internals/new-promise-capability');\nvar perform = require('../internals/perform');\nvar iterate = require('../internals/iterate');\n\n// `Promise.allSettled` method\n// https://tc39.es/ecma262/#sec-promise.allsettled\n$({ target: 'Promise', stat: true }, {\n allSettled: function allSettled(iterable) {\n var C = this;\n var capability = newPromiseCapabilityModule.f(C);\n var resolve = capability.resolve;\n var reject = capability.reject;\n var result = perform(function () {\n var promiseResolve = aFunction(C.resolve);\n var values = [];\n var counter = 0;\n var remaining = 1;\n iterate(iterable, function (promise) {\n var index = counter++;\n var alreadyCalled = false;\n values.push(undefined);\n remaining++;\n promiseResolve.call(C, promise).then(function (value) {\n if (alreadyCalled) return;\n alreadyCalled = true;\n values[index] = { status: 'fulfilled', value: value };\n --remaining || resolve(values);\n }, function (error) {\n if (alreadyCalled) return;\n alreadyCalled = true;\n values[index] = { status: 'rejected', reason: error };\n --remaining || resolve(values);\n });\n });\n --remaining || resolve(values);\n });\n if (result.error) reject(result.value);\n return capability.promise;\n }\n});\n","'use strict';\nvar $ = require('../internals/export');\nvar aFunction = require('../internals/a-function');\nvar getBuiltIn = require('../internals/get-built-in');\nvar newPromiseCapabilityModule = require('../internals/new-promise-capability');\nvar perform = require('../internals/perform');\nvar iterate = require('../internals/iterate');\n\nvar PROMISE_ANY_ERROR = 'No one promise resolved';\n\n// `Promise.any` method\n// https://tc39.es/ecma262/#sec-promise.any\n$({ target: 'Promise', stat: true }, {\n any: function any(iterable) {\n var C = this;\n var capability = newPromiseCapabilityModule.f(C);\n var resolve = capability.resolve;\n var reject = capability.reject;\n var result = perform(function () {\n var promiseResolve = aFunction(C.resolve);\n var errors = [];\n var counter = 0;\n var remaining = 1;\n var alreadyResolved = false;\n iterate(iterable, function (promise) {\n var index = counter++;\n var alreadyRejected = false;\n errors.push(undefined);\n remaining++;\n promiseResolve.call(C, promise).then(function (value) {\n if (alreadyRejected || alreadyResolved) return;\n alreadyResolved = true;\n resolve(value);\n }, function (error) {\n if (alreadyRejected || alreadyResolved) return;\n alreadyRejected = true;\n errors[index] = error;\n --remaining || reject(new (getBuiltIn('AggregateError'))(errors, PROMISE_ANY_ERROR));\n });\n });\n --remaining || reject(new (getBuiltIn('AggregateError'))(errors, PROMISE_ANY_ERROR));\n });\n if (result.error) reject(result.value);\n return capability.promise;\n }\n});\n","'use strict';\nvar $ = require('../internals/export');\nvar createIteratorConstructor = require('../internals/create-iterator-constructor');\nvar getPrototypeOf = require('../internals/object-get-prototype-of');\nvar setPrototypeOf = require('../internals/object-set-prototype-of');\nvar setToStringTag = require('../internals/set-to-string-tag');\nvar createNonEnumerableProperty = require('../internals/create-non-enumerable-property');\nvar redefine = require('../internals/redefine');\nvar wellKnownSymbol = require('../internals/well-known-symbol');\nvar IS_PURE = require('../internals/is-pure');\nvar Iterators = require('../internals/iterators');\nvar IteratorsCore = require('../internals/iterators-core');\n\nvar IteratorPrototype = IteratorsCore.IteratorPrototype;\nvar BUGGY_SAFARI_ITERATORS = IteratorsCore.BUGGY_SAFARI_ITERATORS;\nvar ITERATOR = wellKnownSymbol('iterator');\nvar KEYS = 'keys';\nvar VALUES = 'values';\nvar ENTRIES = 'entries';\n\nvar returnThis = function () { return this; };\n\nmodule.exports = function (Iterable, NAME, IteratorConstructor, next, DEFAULT, IS_SET, FORCED) {\n createIteratorConstructor(IteratorConstructor, NAME, next);\n\n var getIterationMethod = function (KIND) {\n if (KIND === DEFAULT && defaultIterator) return defaultIterator;\n if (!BUGGY_SAFARI_ITERATORS && KIND in IterablePrototype) return IterablePrototype[KIND];\n switch (KIND) {\n case KEYS: return function keys() { return new IteratorConstructor(this, KIND); };\n case VALUES: return function values() { return new IteratorConstructor(this, KIND); };\n case ENTRIES: return function entries() { return new IteratorConstructor(this, KIND); };\n } return function () { return new IteratorConstructor(this); };\n };\n\n var TO_STRING_TAG = NAME + ' Iterator';\n var INCORRECT_VALUES_NAME = false;\n var IterablePrototype = Iterable.prototype;\n var nativeIterator = IterablePrototype[ITERATOR]\n || IterablePrototype['@@iterator']\n || DEFAULT && IterablePrototype[DEFAULT];\n var defaultIterator = !BUGGY_SAFARI_ITERATORS && nativeIterator || getIterationMethod(DEFAULT);\n var anyNativeIterator = NAME == 'Array' ? IterablePrototype.entries || nativeIterator : nativeIterator;\n var CurrentIteratorPrototype, methods, KEY;\n\n // fix native\n if (anyNativeIterator) {\n CurrentIteratorPrototype = getPrototypeOf(anyNativeIterator.call(new Iterable()));\n if (IteratorPrototype !== Object.prototype && CurrentIteratorPrototype.next) {\n if (!IS_PURE && getPrototypeOf(CurrentIteratorPrototype) !== IteratorPrototype) {\n if (setPrototypeOf) {\n setPrototypeOf(CurrentIteratorPrototype, IteratorPrototype);\n } else if (typeof CurrentIteratorPrototype[ITERATOR] != 'function') {\n createNonEnumerableProperty(CurrentIteratorPrototype, ITERATOR, returnThis);\n }\n }\n // Set @@toStringTag to native iterators\n setToStringTag(CurrentIteratorPrototype, TO_STRING_TAG, true, true);\n if (IS_PURE) Iterators[TO_STRING_TAG] = returnThis;\n }\n }\n\n // fix Array#{values, @@iterator}.name in V8 / FF\n if (DEFAULT == VALUES && nativeIterator && nativeIterator.name !== VALUES) {\n INCORRECT_VALUES_NAME = true;\n defaultIterator = function values() { return nativeIterator.call(this); };\n }\n\n // define iterator\n if ((!IS_PURE || FORCED) && IterablePrototype[ITERATOR] !== defaultIterator) {\n createNonEnumerableProperty(IterablePrototype, ITERATOR, defaultIterator);\n }\n Iterators[NAME] = defaultIterator;\n\n // export additional methods\n if (DEFAULT) {\n methods = {\n values: getIterationMethod(VALUES),\n keys: IS_SET ? defaultIterator : getIterationMethod(KEYS),\n entries: getIterationMethod(ENTRIES)\n };\n if (FORCED) for (KEY in methods) {\n if (BUGGY_SAFARI_ITERATORS || INCORRECT_VALUES_NAME || !(KEY in IterablePrototype)) {\n redefine(IterablePrototype, KEY, methods[KEY]);\n }\n } else $({ target: NAME, proto: true, forced: BUGGY_SAFARI_ITERATORS || INCORRECT_VALUES_NAME }, methods);\n }\n\n return methods;\n};\n","'use strict';\nvar fails = require('../internals/fails');\nvar getPrototypeOf = require('../internals/object-get-prototype-of');\nvar createNonEnumerableProperty = require('../internals/create-non-enumerable-property');\nvar has = require('../internals/has');\nvar wellKnownSymbol = require('../internals/well-known-symbol');\nvar IS_PURE = require('../internals/is-pure');\n\nvar ITERATOR = wellKnownSymbol('iterator');\nvar BUGGY_SAFARI_ITERATORS = false;\n\nvar returnThis = function () { return this; };\n\n// `%IteratorPrototype%` object\n// https://tc39.es/ecma262/#sec-%iteratorprototype%-object\nvar IteratorPrototype, PrototypeOfArrayIteratorPrototype, arrayIterator;\n\n/* eslint-disable es/no-array-prototype-keys -- safe */\nif ([].keys) {\n arrayIterator = [].keys();\n // Safari 8 has buggy iterators w/o `next`\n if (!('next' in arrayIterator)) BUGGY_SAFARI_ITERATORS = true;\n else {\n PrototypeOfArrayIteratorPrototype = getPrototypeOf(getPrototypeOf(arrayIterator));\n if (PrototypeOfArrayIteratorPrototype !== Object.prototype) IteratorPrototype = PrototypeOfArrayIteratorPrototype;\n }\n}\n\nvar NEW_ITERATOR_PROTOTYPE = IteratorPrototype == undefined || fails(function () {\n var test = {};\n // FF44- legacy iterators case\n return IteratorPrototype[ITERATOR].call(test) !== test;\n});\n\nif (NEW_ITERATOR_PROTOTYPE) IteratorPrototype = {};\n\n// 25.1.2.1.1 %IteratorPrototype%[@@iterator]()\nif ((!IS_PURE || NEW_ITERATOR_PROTOTYPE) && !has(IteratorPrototype, ITERATOR)) {\n createNonEnumerableProperty(IteratorPrototype, ITERATOR, returnThis);\n}\n\nmodule.exports = {\n IteratorPrototype: IteratorPrototype,\n BUGGY_SAFARI_ITERATORS: BUGGY_SAFARI_ITERATORS\n};\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Shape resize helper\n */\nconst DIVISOR = {\n rect: 1,\n circle: 2,\n triangle: 1,\n};\nconst DIMENSION_KEYS = {\n rect: {\n w: 'width',\n h: 'height',\n },\n circle: {\n w: 'rx',\n h: 'ry',\n },\n triangle: {\n w: 'width',\n h: 'height',\n },\n};\n\n/**\n * Set the start point value to the shape object\n * @param {fabric.Object} shape - Shape object\n * @ignore\n */\nfunction setStartPoint(shape) {\n const { originX, originY } = shape;\n const originKey = originX.substring(0, 1) + originY.substring(0, 1);\n\n shape.startPoint = shape.origins[originKey];\n}\n\n/**\n * Get the positions of ratated origin by the pointer value\n * @param {{x: number, y: number}} origin - Origin value\n * @param {{x: number, y: number}} pointer - Pointer value\n * @param {number} angle - Rotating angle\n * @returns {Object} Postions of origin\n * @ignore\n */\nfunction getPositionsOfRotatedOrigin(origin, pointer, angle) {\n const sx = origin.x;\n const sy = origin.y;\n const px = pointer.x;\n const py = pointer.y;\n const r = (angle * Math.PI) / 180;\n const rx = (px - sx) * Math.cos(r) - (py - sy) * Math.sin(r) + sx;\n const ry = (px - sx) * Math.sin(r) + (py - sy) * Math.cos(r) + sy;\n\n return {\n originX: sx > rx ? 'right' : 'left',\n originY: sy > ry ? 'bottom' : 'top',\n };\n}\n\n/**\n * Whether the shape has the center origin or not\n * @param {fabric.Object} shape - Shape object\n * @returns {boolean} State\n * @ignore\n */\nfunction hasCenterOrigin(shape) {\n return shape.originX === 'center' && shape.originY === 'center';\n}\n\n/**\n * Adjust the origin of shape by the start point\n * @param {{x: number, y: number}} pointer - Pointer value\n * @param {fabric.Object} shape - Shape object\n * @ignore\n */\nfunction adjustOriginByStartPoint(pointer, shape) {\n const centerPoint = shape.getPointByOrigin('center', 'center');\n const angle = -shape.angle;\n const originPositions = getPositionsOfRotatedOrigin(centerPoint, pointer, angle);\n const { originX, originY } = originPositions;\n const origin = shape.getPointByOrigin(originX, originY);\n const left = shape.left - (centerPoint.x - origin.x);\n const top = shape.top - (centerPoint.y - origin.y);\n\n shape.set({\n originX,\n originY,\n left,\n top,\n });\n\n shape.setCoords();\n}\n\n/**\n * Adjust the origin of shape by the moving pointer value\n * @param {{x: number, y: number}} pointer - Pointer value\n * @param {fabric.Object} shape - Shape object\n * @ignore\n */\nfunction adjustOriginByMovingPointer(pointer, shape) {\n const origin = shape.startPoint;\n const angle = -shape.angle;\n const originPositions = getPositionsOfRotatedOrigin(origin, pointer, angle);\n const { originX, originY } = originPositions;\n\n shape.setPositionByOrigin(origin, originX, originY);\n shape.setCoords();\n}\n\n/**\n * Adjust the dimension of shape on firing scaling event\n * @param {fabric.Object} shape - Shape object\n * @ignore\n */\nfunction adjustDimensionOnScaling(shape) {\n const { type, scaleX, scaleY } = shape;\n const dimensionKeys = DIMENSION_KEYS[type];\n let width = shape[dimensionKeys.w] * scaleX;\n let height = shape[dimensionKeys.h] * scaleY;\n\n if (shape.isRegular) {\n const maxScale = Math.max(scaleX, scaleY);\n\n width = shape[dimensionKeys.w] * maxScale;\n height = shape[dimensionKeys.h] * maxScale;\n }\n\n const options = {\n hasControls: false,\n hasBorders: false,\n scaleX: 1,\n scaleY: 1,\n };\n\n options[dimensionKeys.w] = width;\n options[dimensionKeys.h] = height;\n\n shape.set(options);\n}\n\n/**\n * Adjust the dimension of shape on firing mouse move event\n * @param {{x: number, y: number}} pointer - Pointer value\n * @param {fabric.Object} shape - Shape object\n * @ignore\n */\nfunction adjustDimensionOnMouseMove(pointer, shape) {\n const { type, strokeWidth, startPoint: origin } = shape;\n const divisor = DIVISOR[type];\n const dimensionKeys = DIMENSION_KEYS[type];\n const isTriangle = !!(shape.type === 'triangle');\n const options = {};\n let width = Math.abs(origin.x - pointer.x) / divisor;\n let height = Math.abs(origin.y - pointer.y) / divisor;\n\n if (width > strokeWidth) {\n width -= strokeWidth / divisor;\n }\n\n if (height > strokeWidth) {\n height -= strokeWidth / divisor;\n }\n\n if (shape.isRegular) {\n width = height = Math.max(width, height);\n\n if (isTriangle) {\n height = (Math.sqrt(3) / 2) * width;\n }\n }\n\n options[dimensionKeys.w] = width;\n options[dimensionKeys.h] = height;\n\n shape.set(options);\n}\n\nmodule.exports = {\n /**\n * Set each origin value to shape\n * @param {fabric.Object} shape - Shape object\n */\n setOrigins(shape) {\n const leftTopPoint = shape.getPointByOrigin('left', 'top');\n const rightTopPoint = shape.getPointByOrigin('right', 'top');\n const rightBottomPoint = shape.getPointByOrigin('right', 'bottom');\n const leftBottomPoint = shape.getPointByOrigin('left', 'bottom');\n\n shape.origins = {\n lt: leftTopPoint,\n rt: rightTopPoint,\n rb: rightBottomPoint,\n lb: leftBottomPoint,\n };\n },\n\n /**\n * Resize the shape\n * @param {fabric.Object} shape - Shape object\n * @param {{x: number, y: number}} pointer - Mouse pointer values on canvas\n * @param {boolean} isScaling - Whether the resizing action is scaling or not\n */\n resize(shape, pointer, isScaling) {\n if (hasCenterOrigin(shape)) {\n adjustOriginByStartPoint(pointer, shape);\n setStartPoint(shape);\n }\n\n if (isScaling) {\n adjustDimensionOnScaling(shape, pointer);\n } else {\n adjustDimensionOnMouseMove(pointer, shape);\n }\n\n adjustOriginByMovingPointer(pointer, shape);\n },\n\n /**\n * Adjust the origin position of shape to center\n * @param {fabric.Object} shape - Shape object\n */\n adjustOriginToCenter(shape) {\n const centerPoint = shape.getPointByOrigin('center', 'center');\n const { originX, originY } = shape;\n const origin = shape.getPointByOrigin(originX, originY);\n const left = shape.left + (centerPoint.x - origin.x);\n const top = shape.top + (centerPoint.y - origin.y);\n\n shape.set({\n hasControls: true,\n hasBorders: true,\n originX: 'center',\n originY: 'center',\n left,\n top,\n });\n\n shape.setCoords(); // For left, top properties\n },\n};\n","import '@/polyfill';\nimport ImageEditor from '@/imageEditor';\nimport '@css/index.styl';\n\n// commands\nimport '@/command/addIcon';\nimport '@/command/addImageObject';\nimport '@/command/addObject';\nimport '@/command/addShape';\nimport '@/command/addText';\nimport '@/command/applyFilter';\nimport '@/command/changeIconColor';\nimport '@/command/changeShape';\nimport '@/command/changeText';\nimport '@/command/changeTextStyle';\nimport '@/command/clearObjects';\nimport '@/command/flip';\nimport '@/command/loadImage';\nimport '@/command/removeFilter';\nimport '@/command/removeObject';\nimport '@/command/resizeCanvasDimension';\nimport '@/command/rotate';\nimport '@/command/setObjectProperties';\nimport '@/command/setObjectPosition';\nimport '@/command/changeSelection';\nimport '@/command/resize';\n\nmodule.exports = ImageEditor;\n","// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest\n// Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/if (!Element.prototype.matches)\nElement.prototype.matches =\n Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;\n\nif (!Element.prototype.closest)\n Element.prototype.closest = function (s) {\n var el = this;\n if (!document.documentElement.contains(el)) return null;\n do {\n if (el.matches(s)) return el;\n el = el.parentElement || el.parentNode;\n } while (el !== null && el.nodeType === 1);\n return null;\n };\n\n/*\n * classList.js: Cross-browser full element.classList implementation.\n * 1.1.20170427\n *\n * By Eli Grey, http://eligrey.com\n * License: Dedicated to the public domain.\n * See https://github.com/eligrey/classList.js/blob/master/LICENSE.md\n */\n\n/*global self, document, DOMException */\n\n/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */\n\nif ('document' in window.self) {\n // Full polyfill for browsers with no classList support\n // Including IE < Edge missing SVGElement.classList\n if (\n !('classList' in document.createElement('_')) ||\n (document.createElementNS &&\n !('classList' in document.createElementNS('http://www.w3.org/2000/svg', 'g')))\n ) {\n (function (view) {\n 'use strict';\n\n if (!('Element' in view)) return;\n\n var classListProp = 'classList',\n protoProp = 'prototype',\n elemCtrProto = view.Element[protoProp],\n objCtr = Object,\n strTrim =\n String[protoProp].trim ||\n function () {\n return this.replace(/^\\s+|\\s+$/g, '');\n },\n arrIndexOf =\n Array[protoProp].indexOf ||\n function (item) {\n var i = 0,\n len = this.length;\n for (; i < len; i++) {\n if (i in this && this[i] === item) {\n return i;\n }\n }\n return -1;\n },\n // Vendors: please allow content code to instantiate DOMExceptions\n DOMEx = function (type, message) {\n this.name = type;\n this.code = DOMException[type];\n this.message = message;\n },\n checkTokenAndGetIndex = function (classList, token) {\n if (token === '') {\n throw new DOMEx('SYNTAX_ERR', 'An invalid or illegal string was specified');\n }\n if (/\\s/.test(token)) {\n throw new DOMEx('INVALID_CHARACTER_ERR', 'String contains an invalid character');\n }\n return arrIndexOf.call(classList, token);\n },\n ClassList = function (elem) {\n var trimmedClasses = strTrim.call(elem.getAttribute('class') || ''),\n classes = trimmedClasses ? trimmedClasses.split(/\\s+/) : [],\n i = 0,\n len = classes.length;\n for (; i < len; i++) {\n this.push(classes[i]);\n }\n this._updateClassName = function () {\n elem.setAttribute('class', this.toString());\n };\n },\n classListProto = (ClassList[protoProp] = []),\n classListGetter = function () {\n return new ClassList(this);\n };\n // Most DOMException implementations don't allow calling DOMException's toString()\n // on non-DOMExceptions. Error's toString() is sufficient here.\n DOMEx[protoProp] = Error[protoProp];\n classListProto.item = function (i) {\n return this[i] || null;\n };\n classListProto.contains = function (token) {\n token += '';\n return checkTokenAndGetIndex(this, token) !== -1;\n };\n classListProto.add = function () {\n var tokens = arguments,\n i = 0,\n l = tokens.length,\n token,\n updated = false;\n do {\n token = tokens[i] + '';\n if (checkTokenAndGetIndex(this, token) === -1) {\n this.push(token);\n updated = true;\n }\n } while (++i < l);\n\n if (updated) {\n this._updateClassName();\n }\n };\n classListProto.remove = function () {\n var tokens = arguments,\n i = 0,\n l = tokens.length,\n token,\n updated = false,\n index;\n do {\n token = tokens[i] + '';\n index = checkTokenAndGetIndex(this, token);\n while (index !== -1) {\n this.splice(index, 1);\n updated = true;\n index = checkTokenAndGetIndex(this, token);\n }\n } while (++i < l);\n\n if (updated) {\n this._updateClassName();\n }\n };\n classListProto.toggle = function (token, force) {\n token += '';\n\n var result = this.contains(token),\n method = result ? force !== true && 'remove' : force !== false && 'add';\n if (method) {\n this[method](token);\n }\n\n if (force === true || force === false) {\n return force;\n } else {\n return !result;\n }\n };\n classListProto.toString = function () {\n return this.join(' ');\n };\n\n if (objCtr.defineProperty) {\n var classListPropDesc = {\n get: classListGetter,\n enumerable: true,\n configurable: true,\n };\n try {\n objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);\n } catch (ex) {\n // IE 8 doesn't support enumerable:true\n // adding undefined to fight this issue https://github.com/eligrey/classList.js/issues/36\n // modernie IE8-MSW7 machine has IE8 8.0.6001.18702 and is affected\n if (ex.number === undefined || ex.number === -0x7ff5ec54) {\n classListPropDesc.enumerable = false;\n objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);\n }\n }\n } else if (objCtr[protoProp].__defineGetter__) {\n elemCtrProto.__defineGetter__(classListProp, classListGetter);\n }\n })(window.self);\n }\n\n // There is full or partial native classList support, so just check if we need\n // to normalize the add/remove and toggle APIs.\n\n (function () {\n 'use strict';\n\n var testElement = document.createElement('_');\n\n testElement.classList.add('c1', 'c2');\n\n // Polyfill for IE 10/11 and Firefox <26, where classList.add and\n // classList.remove exist but support only one argument at a time.\n if (!testElement.classList.contains('c2')) {\n var createMethod = function (method) {\n var original = DOMTokenList.prototype[method];\n\n DOMTokenList.prototype[method] = function (token) {\n var i,\n len = arguments.length;\n\n for (i = 0; i < len; i++) {\n token = arguments[i];\n original.call(this, token);\n }\n };\n };\n createMethod('add');\n createMethod('remove');\n }\n\n testElement.classList.toggle('c3', false);\n\n // Polyfill for IE 10 and Firefox <24, where classList.toggle does not\n // support the second argument.\n if (testElement.classList.contains('c3')) {\n var _toggle = DOMTokenList.prototype.toggle;\n\n DOMTokenList.prototype.toggle = function (token, force) {\n if (1 in arguments && !this.contains(token) === !force) {\n return force;\n } else {\n return _toggle.call(this, token);\n }\n };\n }\n\n testElement = null;\n })();\n}\n\n/*!\n * @copyright Copyright (c) 2017 IcoMoon.io\n * @license Licensed under MIT license\n * See https://github.com/Keyamoon/svgxuse\n * @version 1.2.6\n */\n/*jslint browser: true */\n/*global XDomainRequest, MutationObserver, window */\n(function () {\n 'use strict';\n if (typeof window !== 'undefined' && window.addEventListener) {\n var cache = Object.create(null); // holds xhr objects to prevent multiple requests\n var checkUseElems;\n var tid; // timeout id\n var debouncedCheck = function () {\n clearTimeout(tid);\n tid = setTimeout(checkUseElems, 100);\n };\n var unobserveChanges = function () {\n return;\n };\n var observeChanges = function () {\n var observer;\n window.addEventListener('resize', debouncedCheck, false);\n window.addEventListener('orientationchange', debouncedCheck, false);\n if (window.MutationObserver) {\n observer = new MutationObserver(debouncedCheck);\n observer.observe(document.documentElement, {\n childList: true,\n subtree: true,\n attributes: true,\n });\n unobserveChanges = function () {\n try {\n observer.disconnect();\n window.removeEventListener('resize', debouncedCheck, false);\n window.removeEventListener('orientationchange', debouncedCheck, false);\n } catch (ignore) {}\n };\n } else {\n document.documentElement.addEventListener('DOMSubtreeModified', debouncedCheck, false);\n unobserveChanges = function () {\n document.documentElement.removeEventListener('DOMSubtreeModified', debouncedCheck, false);\n window.removeEventListener('resize', debouncedCheck, false);\n window.removeEventListener('orientationchange', debouncedCheck, false);\n };\n }\n };\n var createRequest = function (url) {\n // In IE 9, cross origin requests can only be sent using XDomainRequest.\n // XDomainRequest would fail if CORS headers are not set.\n // Therefore, XDomainRequest should only be used with cross origin requests.\n function getOrigin(loc) {\n var a;\n if (loc.protocol !== undefined) {\n a = loc;\n } else {\n a = document.createElement('a');\n a.href = loc;\n }\n return a.protocol.replace(/:/g, '') + a.host;\n }\n var Request;\n var origin;\n var origin2;\n if (window.XMLHttpRequest) {\n Request = new XMLHttpRequest();\n origin = getOrigin(location);\n origin2 = getOrigin(url);\n if (Request.withCredentials === undefined && origin2 !== '' && origin2 !== origin) {\n Request = XDomainRequest || undefined;\n } else {\n Request = XMLHttpRequest;\n }\n }\n return Request;\n };\n var xlinkNS = 'http://www.w3.org/1999/xlink';\n checkUseElems = function () {\n var base;\n var bcr;\n var fallback = ''; // optional fallback URL in case no base path to SVG file was given and no symbol definition was found.\n var hash;\n var href;\n var i;\n var inProgressCount = 0;\n var isHidden;\n var Request;\n var url;\n var uses;\n var xhr;\n function observeIfDone() {\n // If done with making changes, start watching for chagnes in DOM again\n inProgressCount -= 1;\n if (inProgressCount === 0) {\n // if all xhrs were resolved\n unobserveChanges(); // make sure to remove old handlers\n observeChanges(); // watch for changes to DOM\n }\n }\n function attrUpdateFunc(spec) {\n return function () {\n if (cache[spec.base] !== true) {\n spec.useEl.setAttributeNS(xlinkNS, 'xlink:href', '#' + spec.hash);\n if (spec.useEl.hasAttribute('href')) {\n spec.useEl.setAttribute('href', '#' + spec.hash);\n }\n }\n };\n }\n function onloadFunc(xhr) {\n return function () {\n var body = document.body;\n var x = document.createElement('x');\n var svg;\n xhr.onload = null;\n x.innerHTML = xhr.responseText;\n svg = x.getElementsByTagName('svg')[0];\n if (svg) {\n svg.setAttribute('aria-hidden', 'true');\n svg.style.position = 'absolute';\n svg.style.width = 0;\n svg.style.height = 0;\n svg.style.overflow = 'hidden';\n body.insertBefore(svg, body.firstChild);\n }\n observeIfDone();\n };\n }\n function onErrorTimeout(xhr) {\n return function () {\n xhr.onerror = null;\n xhr.ontimeout = null;\n observeIfDone();\n };\n }\n unobserveChanges(); // stop watching for changes to DOM\n // find all use elements\n uses = document.getElementsByTagName('use');\n for (i = 0; i < uses.length; i += 1) {\n try {\n bcr = uses[i].getBoundingClientRect();\n } catch (ignore) {\n // failed to get bounding rectangle of the use element\n bcr = false;\n }\n href =\n uses[i].getAttribute('href') ||\n uses[i].getAttributeNS(xlinkNS, 'href') ||\n uses[i].getAttribute('xlink:href');\n if (href && href.split) {\n url = href.split('#');\n } else {\n url = ['', ''];\n }\n base = url[0];\n hash = url[1];\n isHidden = bcr && bcr.left === 0 && bcr.right === 0 && bcr.top === 0 && bcr.bottom === 0;\n if (bcr && bcr.width === 0 && bcr.height === 0 && !isHidden) {\n // the use element is empty\n // if there is a reference to an external SVG, try to fetch it\n // use the optional fallback URL if there is no reference to an external SVG\n if (fallback && !base.length && hash && !document.getElementById(hash)) {\n base = fallback;\n }\n if (uses[i].hasAttribute('href')) {\n uses[i].setAttributeNS(xlinkNS, 'xlink:href', href);\n }\n if (base.length) {\n // schedule updating xlink:href\n xhr = cache[base];\n if (xhr !== true) {\n // true signifies that prepending the SVG was not required\n setTimeout(\n attrUpdateFunc({\n useEl: uses[i],\n base: base,\n hash: hash,\n }),\n 0\n );\n }\n if (xhr === undefined) {\n Request = createRequest(base);\n if (Request !== undefined) {\n xhr = new Request();\n cache[base] = xhr;\n xhr.onload = onloadFunc(xhr);\n xhr.onerror = onErrorTimeout(xhr);\n xhr.ontimeout = onErrorTimeout(xhr);\n xhr.open('GET', base);\n xhr.send();\n inProgressCount += 1;\n }\n }\n }\n } else {\n if (!isHidden) {\n if (cache[base] === undefined) {\n // remember this URL if the use element was not empty and no request was sent\n cache[base] = true;\n } else if (cache[base].onload) {\n // if it turns out that prepending the SVG is not necessary,\n // abort the in-progress xhr.\n cache[base].abort();\n delete cache[base].onload;\n cache[base] = true;\n }\n } else if (base.length && cache[base]) {\n setTimeout(\n attrUpdateFunc({\n useEl: uses[i],\n base: base,\n hash: hash,\n }),\n 0\n );\n }\n }\n }\n uses = '';\n inProgressCount += 1;\n observeIfDone();\n };\n var winLoad;\n winLoad = function () {\n window.removeEventListener('load', winLoad, false); // to prevent memory leaks\n tid = setTimeout(checkUseElems, 0);\n };\n if (document.readyState !== 'complete') {\n // The load event fires when all resources have finished loading, which allows detecting whether SVG use elements are empty.\n window.addEventListener('load', winLoad, false);\n } else {\n // No need to add a listener if the document is already loaded, initialize immediately.\n winLoad();\n }\n }\n})();\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Image-editor application class\n */\nimport snippet from 'tui-code-snippet';\nimport Invoker from '@/invoker';\nimport UI from '@/ui';\nimport action from '@/action';\nimport commandFactory from '@/factory/command';\nimport Graphics from '@/graphics';\nimport { makeSelectionUndoData, makeSelectionUndoDatum } from '@/helper/selectionModifyHelper';\nimport { sendHostName, Promise, getObjectType } from '@/util';\nimport {\n eventNames as events,\n commandNames as commands,\n keyCodes,\n rejectMessages,\n OBJ_TYPE,\n} from '@/consts';\n\nconst { isUndefined, forEach, CustomEvents } = snippet;\n\nconst {\n MOUSE_DOWN,\n OBJECT_MOVED,\n OBJECT_SCALED,\n OBJECT_ACTIVATED,\n OBJECT_ROTATED,\n OBJECT_ADDED,\n OBJECT_MODIFIED,\n ADD_TEXT,\n ADD_OBJECT,\n TEXT_EDITING,\n TEXT_CHANGED,\n ICON_CREATE_RESIZE,\n ICON_CREATE_END,\n SELECTION_CLEARED,\n SELECTION_CREATED,\n ADD_OBJECT_AFTER,\n} = events;\n\n/**\n * Image filter result\n * @typedef {object} FilterResult\n * @property {string} type - filter type like 'mask', 'Grayscale' and so on\n * @property {string} action - action type like 'add', 'remove'\n */\n\n/**\n * Flip status\n * @typedef {object} FlipStatus\n * @property {boolean} flipX - x axis\n * @property {boolean} flipY - y axis\n * @property {Number} angle - angle\n */\n/**\n * Rotation status\n * @typedef {Number} RotateStatus\n * @property {Number} angle - angle\n */\n\n/**\n * Old and new Size\n * @typedef {object} SizeChange\n * @property {Number} oldWidth - old width\n * @property {Number} oldHeight - old height\n * @property {Number} newWidth - new width\n * @property {Number} newHeight - new height\n */\n\n/**\n * @typedef {string} ErrorMsg - {string} error message\n */\n\n/**\n * @typedef {object} ObjectProps - graphics object properties\n * @property {number} id - object id\n * @property {string} type - object type\n * @property {string} text - text content\n * @property {(string | number)} left - Left\n * @property {(string | number)} top - Top\n * @property {(string | number)} width - Width\n * @property {(string | number)} height - Height\n * @property {string} fill - Color\n * @property {string} stroke - Stroke\n * @property {(string | number)} strokeWidth - StrokeWidth\n * @property {string} fontFamily - Font type for text\n * @property {number} fontSize - Font Size\n * @property {string} fontStyle - Type of inclination (normal / italic)\n * @property {string} fontWeight - Type of thicker or thinner looking (normal / bold)\n * @property {string} textAlign - Type of text align (left / center / right)\n * @property {string} textDecoration - Type of line (underline / line-through / overline)\n */\n\n/**\n * Shape filter option\n * @typedef {object.} ShapeFilterOption\n */\n\n/**\n * Shape filter option\n * @typedef {object} ShapeFillOption - fill option of shape\n * @property {string} type - fill type ('color' or 'filter')\n * @property {Array.} [filter] - {@link ShapeFilterOption} List.\n * only applies to filter types\n * (ex: \\[\\{pixelate: 20\\}, \\{blur: 0.3\\}\\])\n * @property {string} [color] - Shape foreground color (ex: '#fff', 'transparent')\n */\n\n/**\n * Image editor\n * @class\n * @param {string|HTMLElement} wrapper - Wrapper's element or selector\n * @param {Object} [options] - Canvas max width & height of css\n * @param {number} [options.includeUI] - Use the provided UI\n * @param {Object} [options.includeUI.loadImage] - Basic editing image\n * @param {string} options.includeUI.loadImage.path - image path\n * @param {string} options.includeUI.loadImage.name - image name\n * @param {Object} [options.includeUI.theme] - Theme object\n * @param {Array} [options.includeUI.menu] - It can be selected when only specific menu is used, Default values are \\['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'\\].\n * @param {string} [options.includeUI.initMenu] - The first menu to be selected and started.\n * @param {Object} [options.includeUI.uiSize] - ui size of editor\n * @param {string} options.includeUI.uiSize.width - width of ui\n * @param {string} options.includeUI.uiSize.height - height of ui\n * @param {string} [options.includeUI.menuBarPosition=bottom] - Menu bar position('top', 'bottom', 'left', 'right')\n * @param {number} options.cssMaxWidth - Canvas css-max-width\n * @param {number} options.cssMaxHeight - Canvas css-max-height\n * @param {Object} [options.selectionStyle] - selection style\n * @param {string} [options.selectionStyle.cornerStyle] - selection corner style\n * @param {number} [options.selectionStyle.cornerSize] - selection corner size\n * @param {string} [options.selectionStyle.cornerColor] - selection corner color\n * @param {string} [options.selectionStyle.cornerStrokeColor] = selection corner stroke color\n * @param {boolean} [options.selectionStyle.transparentCorners] - selection corner transparent\n * @param {number} [options.selectionStyle.lineWidth] - selection line width\n * @param {string} [options.selectionStyle.borderColor] - selection border color\n * @param {number} [options.selectionStyle.rotatingPointOffset] - selection rotating point length\n * @param {Boolean} [options.usageStatistics=true] - Let us know the hostname. If you don't want to send the hostname, please set to false.\n * @example\n * var ImageEditor = require('tui-image-editor');\n * var blackTheme = require('./js/theme/black-theme.js');\n * var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {\n * includeUI: {\n * loadImage: {\n * path: 'img/sampleImage.jpg',\n * name: 'SampleImage'\n * },\n * theme: blackTheme, // or whiteTheme\n * menu: ['shape', 'filter'],\n * initMenu: 'filter',\n * uiSize: {\n * width: '1000px',\n * height: '700px'\n * },\n * menuBarPosition: 'bottom'\n * },\n * cssMaxWidth: 700,\n * cssMaxHeight: 500,\n * selectionStyle: {\n * cornerSize: 20,\n * rotatingPointOffset: 70\n * }\n * });\n */\nclass ImageEditor {\n constructor(wrapper, options) {\n options = snippet.extend(\n {\n includeUI: false,\n usageStatistics: true,\n },\n options\n );\n\n this.mode = null;\n\n this.activeObjectId = null;\n\n /**\n * UI instance\n * @type {Ui}\n */\n if (options.includeUI) {\n const UIOption = options.includeUI;\n UIOption.usageStatistics = options.usageStatistics;\n\n this.ui = new UI(wrapper, UIOption, this.getActions());\n options = this.ui.setUiDefaultSelectionStyle(options);\n }\n\n /**\n * Invoker\n * @type {Invoker}\n * @private\n */\n this._invoker = new Invoker();\n\n /**\n * Graphics instance\n * @type {Graphics}\n * @private\n */\n this._graphics = new Graphics(this.ui ? this.ui.getEditorArea() : wrapper, {\n cssMaxWidth: options.cssMaxWidth,\n cssMaxHeight: options.cssMaxHeight,\n });\n\n /**\n * Event handler list\n * @type {Object}\n * @private\n */\n this._handlers = {\n keydown: this._onKeyDown.bind(this),\n mousedown: this._onMouseDown.bind(this),\n objectActivated: this._onObjectActivated.bind(this),\n objectMoved: this._onObjectMoved.bind(this),\n objectScaled: this._onObjectScaled.bind(this),\n objectRotated: this._onObjectRotated.bind(this),\n objectAdded: this._onObjectAdded.bind(this),\n objectModified: this._onObjectModified.bind(this),\n createdPath: this._onCreatedPath,\n addText: this._onAddText.bind(this),\n addObject: this._onAddObject.bind(this),\n textEditing: this._onTextEditing.bind(this),\n textChanged: this._onTextChanged.bind(this),\n iconCreateResize: this._onIconCreateResize.bind(this),\n iconCreateEnd: this._onIconCreateEnd.bind(this),\n selectionCleared: this._selectionCleared.bind(this),\n selectionCreated: this._selectionCreated.bind(this),\n };\n\n this._attachInvokerEvents();\n this._attachGraphicsEvents();\n this._attachDomEvents();\n this._setSelectionStyle(options.selectionStyle, {\n applyCropSelectionStyle: options.applyCropSelectionStyle,\n applyGroupSelectionStyle: options.applyGroupSelectionStyle,\n });\n\n if (options.usageStatistics) {\n sendHostName();\n }\n\n if (this.ui) {\n this.ui.initCanvas();\n this.setReAction();\n this._attachColorPickerInputBoxEvents();\n }\n fabric.enableGLFiltering = false;\n }\n\n _attachColorPickerInputBoxEvents() {\n this.ui.on(events.INPUT_BOX_EDITING_STARTED, () => {\n this.isColorPickerInputBoxEditing = true;\n });\n this.ui.on(events.INPUT_BOX_EDITING_STOPPED, () => {\n this.isColorPickerInputBoxEditing = false;\n });\n }\n\n _detachColorPickerInputBoxEvents() {\n this.ui.off(events.INPUT_BOX_EDITING_STARTED);\n this.ui.off(events.INPUT_BOX_EDITING_STOPPED);\n }\n\n /**\n * Set selection style by init option\n * @param {Object} selectionStyle - Selection styles\n * @param {Object} applyTargets - Selection apply targets\n * @param {boolean} applyCropSelectionStyle - whether apply with crop selection style or not\n * @param {boolean} applyGroupSelectionStyle - whether apply with group selection style or not\n * @private\n */\n _setSelectionStyle(selectionStyle, { applyCropSelectionStyle, applyGroupSelectionStyle }) {\n if (selectionStyle) {\n this._graphics.setSelectionStyle(selectionStyle);\n }\n\n if (applyCropSelectionStyle) {\n this._graphics.setCropSelectionStyle(selectionStyle);\n }\n\n if (applyGroupSelectionStyle) {\n this.on('selectionCreated', (eventTarget) => {\n if (eventTarget.type === 'activeSelection') {\n eventTarget.set(selectionStyle);\n }\n });\n }\n }\n\n /**\n * Attach invoker events\n * @private\n */\n _attachInvokerEvents() {\n const {\n UNDO_STACK_CHANGED,\n REDO_STACK_CHANGED,\n EXECUTE_COMMAND,\n AFTER_UNDO,\n AFTER_REDO,\n HAND_STARTED,\n HAND_STOPPED,\n } = events;\n\n /**\n * Undo stack changed event\n * @event ImageEditor#undoStackChanged\n * @param {Number} length - undo stack length\n * @example\n * imageEditor.on('undoStackChanged', function(length) {\n * console.log(length);\n * });\n */\n this._invoker.on(UNDO_STACK_CHANGED, this.fire.bind(this, UNDO_STACK_CHANGED));\n /**\n * Redo stack changed event\n * @event ImageEditor#redoStackChanged\n * @param {Number} length - redo stack length\n * @example\n * imageEditor.on('redoStackChanged', function(length) {\n * console.log(length);\n * });\n */\n this._invoker.on(REDO_STACK_CHANGED, this.fire.bind(this, REDO_STACK_CHANGED));\n\n if (this.ui) {\n const canvas = this._graphics.getCanvas();\n\n this._invoker.on(EXECUTE_COMMAND, (command) => this.ui.fire(EXECUTE_COMMAND, command));\n this._invoker.on(AFTER_UNDO, (command) => this.ui.fire(AFTER_UNDO, command));\n this._invoker.on(AFTER_REDO, (command) => this.ui.fire(AFTER_REDO, command));\n\n canvas.on(HAND_STARTED, () => this.ui.fire(HAND_STARTED));\n canvas.on(HAND_STOPPED, () => this.ui.fire(HAND_STOPPED));\n }\n }\n\n /**\n * Attach canvas events\n * @private\n */\n _attachGraphicsEvents() {\n this._graphics.on({\n [MOUSE_DOWN]: this._handlers.mousedown,\n [OBJECT_MOVED]: this._handlers.objectMoved,\n [OBJECT_SCALED]: this._handlers.objectScaled,\n [OBJECT_ROTATED]: this._handlers.objectRotated,\n [OBJECT_ACTIVATED]: this._handlers.objectActivated,\n [OBJECT_ADDED]: this._handlers.objectAdded,\n [OBJECT_MODIFIED]: this._handlers.objectModified,\n [ADD_TEXT]: this._handlers.addText,\n [ADD_OBJECT]: this._handlers.addObject,\n [TEXT_EDITING]: this._handlers.textEditing,\n [TEXT_CHANGED]: this._handlers.textChanged,\n [ICON_CREATE_RESIZE]: this._handlers.iconCreateResize,\n [ICON_CREATE_END]: this._handlers.iconCreateEnd,\n [SELECTION_CLEARED]: this._handlers.selectionCleared,\n [SELECTION_CREATED]: this._handlers.selectionCreated,\n });\n }\n\n /**\n * Attach dom events\n * @private\n */\n _attachDomEvents() {\n // ImageEditor supports IE 9 higher\n document.addEventListener('keydown', this._handlers.keydown);\n }\n\n /**\n * Detach dom events\n * @private\n */\n _detachDomEvents() {\n // ImageEditor supports IE 9 higher\n document.removeEventListener('keydown', this._handlers.keydown);\n }\n\n /**\n * Keydown event handler\n * @param {KeyboardEvent} e - Event object\n * @private\n */\n /* eslint-disable complexity */\n _onKeyDown(e) {\n const { ctrlKey, keyCode, metaKey } = e;\n const isModifierKey = ctrlKey || metaKey;\n\n if (isModifierKey) {\n if (keyCode === keyCodes.C) {\n this._graphics.resetTargetObjectForCopyPaste();\n } else if (keyCode === keyCodes.V) {\n this._graphics.pasteObject();\n this.clearRedoStack();\n } else if (keyCode === keyCodes.Z) {\n // There is no error message on shortcut when it's empty\n this.undo()['catch'](() => {});\n } else if (keyCode === keyCodes.Y) {\n // There is no error message on shortcut when it's empty\n this.redo()['catch'](() => {});\n }\n }\n\n const isDeleteKey = keyCode === keyCodes.BACKSPACE || keyCode === keyCodes.DEL;\n const isRemoveReady = this._graphics.isReadyRemoveObject();\n\n if (!this.isColorPickerInputBoxEditing && isRemoveReady && isDeleteKey) {\n e.preventDefault();\n this.removeActiveObject();\n }\n }\n\n /**\n * Remove Active Object\n */\n removeActiveObject() {\n const activeObjectId = this._graphics.getActiveObjectIdForRemove();\n\n this.removeObject(activeObjectId);\n }\n\n /**\n * mouse down event handler\n * @param {Event} event - mouse down event\n * @param {Object} originPointer - origin pointer\n * @param {Number} originPointer.x x position\n * @param {Number} originPointer.y y position\n * @private\n */\n _onMouseDown(event, originPointer) {\n /**\n * The mouse down event with position x, y on canvas\n * @event ImageEditor#mousedown\n * @param {Object} event - browser mouse event object\n * @param {Object} originPointer origin pointer\n * @param {Number} originPointer.x x position\n * @param {Number} originPointer.y y position\n * @example\n * imageEditor.on('mousedown', function(event, originPointer) {\n * console.log(event);\n * console.log(originPointer);\n * if (imageEditor.hasFilter('colorFilter')) {\n * imageEditor.applyFilter('colorFilter', {\n * x: parseInt(originPointer.x, 10),\n * y: parseInt(originPointer.y, 10)\n * });\n * }\n * });\n */\n\n this.fire(events.MOUSE_DOWN, event, originPointer);\n }\n\n /**\n * Add a 'addObject' command\n * @param {Object} obj - Fabric object\n * @private\n */\n _pushAddObjectCommand(obj) {\n const command = commandFactory.create(commands.ADD_OBJECT, this._graphics, obj);\n this._invoker.pushUndoStack(command);\n }\n\n /**\n * Add a 'changeSelection' command\n * @param {fabric.Object} obj - selection object\n * @private\n */\n _pushModifyObjectCommand(obj) {\n const { type } = obj;\n const props = makeSelectionUndoData(obj, (item) =>\n makeSelectionUndoDatum(this._graphics.getObjectId(item), item, type === 'activeSelection')\n );\n const command = commandFactory.create(commands.CHANGE_SELECTION, this._graphics, props);\n command.execute(this._graphics, props);\n\n this._invoker.pushUndoStack(command);\n }\n\n /**\n * 'objectActivated' event handler\n * @param {ObjectProps} props - object properties\n * @private\n */\n _onObjectActivated(props) {\n /**\n * The event when object is selected(aka activated).\n * @event ImageEditor#objectActivated\n * @param {ObjectProps} objectProps - object properties\n * @example\n * imageEditor.on('objectActivated', function(props) {\n * console.log(props);\n * console.log(props.type);\n * console.log(props.id);\n * });\n */\n this.fire(events.OBJECT_ACTIVATED, props);\n }\n\n /**\n * 'objectMoved' event handler\n * @param {ObjectProps} props - object properties\n * @private\n */\n _onObjectMoved(props) {\n /**\n * The event when object is moved\n * @event ImageEditor#objectMoved\n * @param {ObjectProps} props - object properties\n * @example\n * imageEditor.on('objectMoved', function(props) {\n * console.log(props);\n * console.log(props.type);\n * });\n */\n this.fire(events.OBJECT_MOVED, props);\n }\n\n /**\n * 'objectScaled' event handler\n * @param {ObjectProps} props - object properties\n * @private\n */\n _onObjectScaled(props) {\n /**\n * The event when scale factor is changed\n * @event ImageEditor#objectScaled\n * @param {ObjectProps} props - object properties\n * @example\n * imageEditor.on('objectScaled', function(props) {\n * console.log(props);\n * console.log(props.type);\n * });\n */\n this.fire(events.OBJECT_SCALED, props);\n }\n\n /**\n * 'objectRotated' event handler\n * @param {ObjectProps} props - object properties\n * @private\n */\n _onObjectRotated(props) {\n /**\n * The event when object angle is changed\n * @event ImageEditor#objectRotated\n * @param {ObjectProps} props - object properties\n * @example\n * imageEditor.on('objectRotated', function(props) {\n * console.log(props);\n * console.log(props.type);\n * });\n */\n this.fire(events.OBJECT_ROTATED, props);\n }\n\n /**\n * Get current drawing mode\n * @returns {string}\n * @example\n * // Image editor drawing mode\n * //\n * // NORMAL: 'NORMAL'\n * // CROPPER: 'CROPPER'\n * // FREE_DRAWING: 'FREE_DRAWING'\n * // LINE_DRAWING: 'LINE_DRAWING'\n * // TEXT: 'TEXT'\n * //\n * if (imageEditor.getDrawingMode() === 'FREE_DRAWING') {\n * imageEditor.stopDrawingMode();\n * }\n */\n getDrawingMode() {\n return this._graphics.getDrawingMode();\n }\n\n /**\n * Clear all objects\n * @returns {Promise}\n * @example\n * imageEditor.clearObjects();\n */\n clearObjects() {\n return this.execute(commands.CLEAR_OBJECTS);\n }\n\n /**\n * Deactivate all objects\n * @example\n * imageEditor.deactivateAll();\n */\n deactivateAll() {\n this._graphics.deactivateAll();\n this._graphics.renderAll();\n }\n\n /**\n * discard selction\n * @example\n * imageEditor.discardSelection();\n */\n discardSelection() {\n this._graphics.discardSelection();\n }\n\n /**\n * selectable status change\n * @param {boolean} selectable - selectable status\n * @example\n * imageEditor.changeSelectableAll(false); // or true\n */\n changeSelectableAll(selectable) {\n this._graphics.changeSelectableAll(selectable);\n }\n\n /**\n * Init history\n */\n _initHistory() {\n if (this.ui) {\n this.ui.initHistory();\n }\n }\n\n /**\n * Clear history\n */\n _clearHistory() {\n if (this.ui) {\n this.ui.clearHistory();\n }\n }\n\n /**\n * Invoke command\n * @param {String} commandName - Command name\n * @param {...*} args - Arguments for creating command\n * @returns {Promise}\n * @private\n */\n execute(commandName, ...args) {\n // Inject an Graphics instance as first parameter\n const theArgs = [this._graphics].concat(args);\n\n return this._invoker.execute(commandName, ...theArgs);\n }\n\n /**\n * Invoke command\n * @param {String} commandName - Command name\n * @param {...*} args - Arguments for creating command\n * @returns {Promise}\n * @private\n */\n executeSilent(commandName, ...args) {\n // Inject an Graphics instance as first parameter\n const theArgs = [this._graphics].concat(args);\n\n return this._invoker.executeSilent(commandName, ...theArgs);\n }\n\n /**\n * Undo\n * @param {number} [iterationCount=1] - Iteration count of undo\n * @returns {Promise}\n * @example\n * imageEditor.undo();\n */\n undo(iterationCount = 1) {\n let promise = Promise.resolve();\n\n for (let i = 0; i < iterationCount; i += 1) {\n promise = promise.then(() => this._invoker.undo());\n }\n\n return promise;\n }\n\n /**\n * Redo\n * @param {number} [iterationCount=1] - Iteration count of redo\n * @returns {Promise}\n * @example\n * imageEditor.redo();\n */\n redo(iterationCount = 1) {\n let promise = Promise.resolve();\n\n for (let i = 0; i < iterationCount; i += 1) {\n promise = promise.then(() => this._invoker.redo());\n }\n\n return promise;\n }\n\n /**\n * Zoom\n * @param {number} x - x axis of center point for zoom\n * @param {number} y - y axis of center point for zoom\n * @param {number} zoomLevel - level of zoom(1.0 ~ 5.0)\n */\n zoom({ x, y, zoomLevel }) {\n this._graphics.zoom({ x, y }, zoomLevel);\n }\n\n /**\n * Reset zoom. Change zoom level to 1.0\n */\n resetZoom() {\n this._graphics.resetZoom();\n }\n\n /**\n * Load image from file\n * @param {File} imgFile - Image file\n * @param {string} [imageName] - imageName\n * @returns {Promise}\n * @example\n * imageEditor.loadImageFromFile(file).then(result => {\n * console.log('old : ' + result.oldWidth + ', ' + result.oldHeight);\n * console.log('new : ' + result.newWidth + ', ' + result.newHeight);\n * });\n */\n loadImageFromFile(imgFile, imageName) {\n if (!imgFile) {\n return Promise.reject(rejectMessages.invalidParameters);\n }\n\n const imgUrl = URL.createObjectURL(imgFile);\n imageName = imageName || imgFile.name;\n\n return this.loadImageFromURL(imgUrl, imageName).then((value) => {\n URL.revokeObjectURL(imgFile);\n\n return value;\n });\n }\n\n /**\n * Load image from url\n * @param {string} url - File url\n * @param {string} imageName - imageName\n * @returns {Promise}\n * @example\n * imageEditor.loadImageFromURL('http://url/testImage.png', 'lena').then(result => {\n * console.log('old : ' + result.oldWidth + ', ' + result.oldHeight);\n * console.log('new : ' + result.newWidth + ', ' + result.newHeight);\n * });\n */\n loadImageFromURL(url, imageName) {\n if (!imageName || !url) {\n return Promise.reject(rejectMessages.invalidParameters);\n }\n\n return this.execute(commands.LOAD_IMAGE, imageName, url);\n }\n\n /**\n * Add image object on canvas\n * @param {string} imgUrl - Image url to make object\n * @returns {Promise}\n * @example\n * imageEditor.addImageObject('path/fileName.jpg').then(objectProps => {\n * console.log(ojectProps.id);\n * });\n */\n addImageObject(imgUrl) {\n if (!imgUrl) {\n return Promise.reject(rejectMessages.invalidParameters);\n }\n\n return this.execute(commands.ADD_IMAGE_OBJECT, imgUrl);\n }\n\n /**\n * Start a drawing mode. If the current mode is not 'NORMAL', 'stopDrawingMode()' will be called first.\n * @param {String} mode Can be one of 'CROPPER', 'FREE_DRAWING', 'LINE_DRAWING', 'TEXT', 'SHAPE'\n * @param {Object} [option] parameters of drawing mode, it's available with 'FREE_DRAWING', 'LINE_DRAWING'\n * @param {Number} [option.width] brush width\n * @param {String} [option.color] brush color\n * @param {Object} [option.arrowType] arrow decorate\n * @param {string} [option.arrowType.tail] arrow decorate for tail. 'chevron' or 'triangle'\n * @param {string} [option.arrowType.head] arrow decorate for head. 'chevron' or 'triangle'\n * @returns {boolean} true if success or false\n * @example\n * imageEditor.startDrawingMode('FREE_DRAWING', {\n * width: 10,\n * color: 'rgba(255,0,0,0.5)'\n * });\n * imageEditor.startDrawingMode('LINE_DRAWING', {\n * width: 10,\n * color: 'rgba(255,0,0,0.5)',\n * arrowType: {\n * tail: 'chevron' // triangle\n * }\n * });\n *\n */\n startDrawingMode(mode, option) {\n return this._graphics.startDrawingMode(mode, option);\n }\n\n /**\n * Stop the current drawing mode and back to the 'NORMAL' mode\n * @example\n * imageEditor.stopDrawingMode();\n */\n stopDrawingMode() {\n this._graphics.stopDrawingMode();\n }\n\n /**\n * Crop this image with rect\n * @param {Object} rect crop rect\n * @param {Number} rect.left left position\n * @param {Number} rect.top top position\n * @param {Number} rect.width width\n * @param {Number} rect.height height\n * @returns {Promise}\n * @example\n * imageEditor.crop(imageEditor.getCropzoneRect());\n */\n crop(rect) {\n const data = this._graphics.getCroppedImageData(rect);\n if (!data) {\n return Promise.reject(rejectMessages.invalidParameters);\n }\n\n return this.loadImageFromURL(data.url, data.imageName);\n }\n\n /**\n * Get the cropping rect\n * @returns {Object} {{left: number, top: number, width: number, height: number}} rect\n */\n getCropzoneRect() {\n return this._graphics.getCropzoneRect();\n }\n\n /**\n * Set the cropping rect\n * @param {number} [mode] crop rect mode [1, 1.5, 1.3333333333333333, 1.25, 1.7777777777777777]\n */\n setCropzoneRect(mode) {\n this._graphics.setCropzoneRect(mode);\n }\n\n /**\n * Flip\n * @returns {Promise}\n * @param {string} type - 'flipX' or 'flipY' or 'reset'\n * @returns {Promise}\n * @private\n */\n _flip(type) {\n return this.execute(commands.FLIP_IMAGE, type);\n }\n\n /**\n * Flip x\n * @returns {Promise}\n * @example\n * imageEditor.flipX().then((status => {\n * console.log('flipX: ', status.flipX);\n * console.log('flipY: ', status.flipY);\n * console.log('angle: ', status.angle);\n * }).catch(message => {\n * console.log('error: ', message);\n * });\n */\n flipX() {\n return this._flip('flipX');\n }\n\n /**\n * Flip y\n * @returns {Promise}\n * @example\n * imageEditor.flipY().then(status => {\n * console.log('flipX: ', status.flipX);\n * console.log('flipY: ', status.flipY);\n * console.log('angle: ', status.angle);\n * }).catch(message => {\n * console.log('error: ', message);\n * });\n */\n flipY() {\n return this._flip('flipY');\n }\n\n /**\n * Reset flip\n * @returns {Promise}\n * @example\n * imageEditor.resetFlip().then(status => {\n * console.log('flipX: ', status.flipX);\n * console.log('flipY: ', status.flipY);\n * console.log('angle: ', status.angle);\n * }).catch(message => {\n * console.log('error: ', message);\n * });;\n */\n resetFlip() {\n return this._flip('reset');\n }\n\n /**\n * @param {string} type - 'rotate' or 'setAngle'\n * @param {number} angle - angle value (degree)\n * @param {boolean} isSilent - is silent execution or not\n * @returns {Promise}\n * @private\n */\n _rotate(type, angle, isSilent) {\n let result = null;\n\n if (isSilent) {\n result = this.executeSilent(commands.ROTATE_IMAGE, type, angle);\n } else {\n result = this.execute(commands.ROTATE_IMAGE, type, angle);\n }\n\n return result;\n }\n\n /**\n * Rotate image\n * @returns {Promise}\n * @param {number} angle - Additional angle to rotate image\n * @param {boolean} isSilent - is silent execution or not\n * @returns {Promise}\n * @example\n * imageEditor.rotate(10); // angle = 10\n * imageEditor.rotate(10); // angle = 20\n * imageEditor.rotate(5); // angle = 5\n * imageEditor.rotate(-95); // angle = -90\n * imageEditor.rotate(10).then(status => {\n * console.log('angle: ', status.angle);\n * })).catch(message => {\n * console.log('error: ', message);\n * });\n */\n rotate(angle, isSilent) {\n return this._rotate('rotate', angle, isSilent);\n }\n\n /**\n * Set angle\n * @param {number} angle - Angle of image\n * @param {boolean} isSilent - is silent execution or not\n * @returns {Promise}\n * @example\n * imageEditor.setAngle(10); // angle = 10\n * imageEditor.rotate(10); // angle = 20\n * imageEditor.setAngle(5); // angle = 5\n * imageEditor.rotate(50); // angle = 55\n * imageEditor.setAngle(-40); // angle = -40\n * imageEditor.setAngle(10).then(status => {\n * console.log('angle: ', status.angle);\n * })).catch(message => {\n * console.log('error: ', message);\n * });\n */\n setAngle(angle, isSilent) {\n return this._rotate('setAngle', angle, isSilent);\n }\n\n /**\n * Set drawing brush\n * @param {Object} option brush option\n * @param {Number} option.width width\n * @param {String} option.color color like 'FFFFFF', 'rgba(0, 0, 0, 0.5)'\n * @example\n * imageEditor.startDrawingMode('FREE_DRAWING');\n * imageEditor.setBrush({\n * width: 12,\n * color: 'rgba(0, 0, 0, 0.5)'\n * });\n * imageEditor.setBrush({\n * width: 8,\n * color: 'FFFFFF'\n * });\n */\n setBrush(option) {\n this._graphics.setBrush(option);\n }\n\n /**\n * Set states of current drawing shape\n * @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle')\n * @param {Object} [options] - Shape options\n * @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or\n * Shape foreground color (ex: '#fff', 'transparent')\n * @param {string} [options.stoke] - Shape outline color\n * @param {number} [options.strokeWidth] - Shape outline width\n * @param {number} [options.width] - Width value (When type option is 'rect', this options can use)\n * @param {number} [options.height] - Height value (When type option is 'rect', this options can use)\n * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)\n * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)\n * @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not\n * @example\n * imageEditor.setDrawingShape('rect', {\n * fill: 'red',\n * width: 100,\n * height: 200\n * });\n * @example\n * imageEditor.setDrawingShape('rect', {\n * fill: {\n * type: 'filter',\n * filter: [{blur: 0.3}, {pixelate: 20}]\n * },\n * width: 100,\n * height: 200\n * });\n * @example\n * imageEditor.setDrawingShape('circle', {\n * fill: 'transparent',\n * stroke: 'blue',\n * strokeWidth: 3,\n * rx: 10,\n * ry: 100\n * });\n * @example\n * imageEditor.setDrawingShape('triangle', { // When resizing, the shape keep the 1:1 ratio\n * width: 1,\n * height: 1,\n * isRegular: true\n * });\n * @example\n * imageEditor.setDrawingShape('circle', { // When resizing, the shape keep the 1:1 ratio\n * rx: 10,\n * ry: 10,\n * isRegular: true\n * });\n */\n setDrawingShape(type, options) {\n this._graphics.setDrawingShape(type, options);\n }\n\n setDrawingIcon(type, iconColor) {\n this._graphics.setIconStyle(type, iconColor);\n }\n\n /**\n * Add shape\n * @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle')\n * @param {Object} options - Shape options\n * @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or\n * Shape foreground color (ex: '#fff', 'transparent')\n * @param {string} [options.stroke] - Shape outline color\n * @param {number} [options.strokeWidth] - Shape outline width\n * @param {number} [options.width] - Width value (When type option is 'rect', this options can use)\n * @param {number} [options.height] - Height value (When type option is 'rect', this options can use)\n * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)\n * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)\n * @param {number} [options.left] - Shape x position\n * @param {number} [options.top] - Shape y position\n * @param {boolean} [options.isRegular] - Whether resizing shape has 1:1 ratio or not\n * @returns {Promise}\n * @example\n * imageEditor.addShape('rect', {\n * fill: 'red',\n * stroke: 'blue',\n * strokeWidth: 3,\n * width: 100,\n * height: 200,\n * left: 10,\n * top: 10,\n * isRegular: true\n * });\n * @example\n * imageEditor.addShape('circle', {\n * fill: 'red',\n * stroke: 'blue',\n * strokeWidth: 3,\n * rx: 10,\n * ry: 100,\n * isRegular: false\n * }).then(objectProps => {\n * console.log(objectProps.id);\n * });\n * @example\n * imageEditor.addShape('rect', {\n * fill: {\n * type: 'filter',\n * filter: [{blur: 0.3}, {pixelate: 20}]\n * },\n * stroke: 'blue',\n * strokeWidth: 3,\n * rx: 10,\n * ry: 100,\n * isRegular: false\n * }).then(objectProps => {\n * console.log(objectProps.id);\n * });\n */\n addShape(type, options) {\n options = options || {};\n\n this._setPositions(options);\n\n return this.execute(commands.ADD_SHAPE, type, options);\n }\n\n /**\n * Change shape\n * @param {number} id - object id\n * @param {Object} options - Shape options\n * @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or\n * Shape foreground color (ex: '#fff', 'transparent')\n * @param {string} [options.stroke] - Shape outline color\n * @param {number} [options.strokeWidth] - Shape outline width\n * @param {number} [options.width] - Width value (When type option is 'rect', this options can use)\n * @param {number} [options.height] - Height value (When type option is 'rect', this options can use)\n * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)\n * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)\n * @param {boolean} [options.isRegular] - Whether resizing shape has 1:1 ratio or not\n * @param {boolean} isSilent - is silent execution or not\n * @returns {Promise}\n * @example\n * // call after selecting shape object on canvas\n * imageEditor.changeShape(id, { // change rectagle or triangle\n * fill: 'red',\n * stroke: 'blue',\n * strokeWidth: 3,\n * width: 100,\n * height: 200\n * });\n * @example\n * // call after selecting shape object on canvas\n * imageEditor.changeShape(id, { // change circle\n * fill: 'red',\n * stroke: 'blue',\n * strokeWidth: 3,\n * rx: 10,\n * ry: 100\n * });\n */\n changeShape(id, options, isSilent) {\n const executeMethodName = isSilent ? 'executeSilent' : 'execute';\n\n return this[executeMethodName](commands.CHANGE_SHAPE, id, options);\n }\n\n /**\n * Add text on image\n * @param {string} text - Initial input text\n * @param {Object} [options] Options for generating text\n * @param {Object} [options.styles] Initial styles\n * @param {string} [options.styles.fill] Color\n * @param {string} [options.styles.fontFamily] Font type for text\n * @param {number} [options.styles.fontSize] Size\n * @param {string} [options.styles.fontStyle] Type of inclination (normal / italic)\n * @param {string} [options.styles.fontWeight] Type of thicker or thinner looking (normal / bold)\n * @param {string} [options.styles.textAlign] Type of text align (left / center / right)\n * @param {string} [options.styles.textDecoration] Type of line (underline / line-through / overline)\n * @param {{x: number, y: number}} [options.position] - Initial position\n * @param {boolean} [options.autofocus] - text autofocus, default is true\n * @returns {Promise}\n * @example\n * imageEditor.addText('init text');\n * @example\n * imageEditor.addText('init text', {\n * styles: {\n * fill: '#000',\n * fontSize: 20,\n * fontWeight: 'bold'\n * },\n * position: {\n * x: 10,\n * y: 10\n * }\n * }).then(objectProps => {\n * console.log(objectProps.id);\n * });\n */\n addText(text, options) {\n text = text || '';\n options = options || {};\n\n return this.execute(commands.ADD_TEXT, text, options);\n }\n\n /**\n * Change contents of selected text object on image\n * @param {number} id - object id\n * @param {string} text - Changing text\n * @returns {Promise}\n * @example\n * imageEditor.changeText(id, 'change text');\n */\n changeText(id, text) {\n text = text || '';\n\n return this.execute(commands.CHANGE_TEXT, id, text);\n }\n\n /**\n * Set style\n * @param {number} id - object id\n * @param {Object} styleObj - text styles\n * @param {string} [styleObj.fill] Color\n * @param {string} [styleObj.fontFamily] Font type for text\n * @param {number} [styleObj.fontSize] Size\n * @param {string} [styleObj.fontStyle] Type of inclination (normal / italic)\n * @param {string} [styleObj.fontWeight] Type of thicker or thinner looking (normal / bold)\n * @param {string} [styleObj.textAlign] Type of text align (left / center / right)\n * @param {string} [styleObj.textDecoration] Type of line (underline / line-through / overline)\n * @param {boolean} isSilent - is silent execution or not\n * @returns {Promise}\n * @example\n * imageEditor.changeTextStyle(id, {\n * fontStyle: 'italic'\n * });\n */\n changeTextStyle(id, styleObj, isSilent) {\n const executeMethodName = isSilent ? 'executeSilent' : 'execute';\n\n return this[executeMethodName](commands.CHANGE_TEXT_STYLE, id, styleObj);\n }\n\n /**\n * change text mode\n * @param {string} type - change type\n * @private\n */\n _changeActivateMode(type) {\n if (type !== 'ICON' && this.getDrawingMode() !== type) {\n this.startDrawingMode(type);\n }\n }\n\n /**\n * 'textChanged' event handler\n * @param {Object} target - changed text object\n * @private\n */\n _onTextChanged(target) {\n this.fire(events.TEXT_CHANGED, target);\n }\n\n /**\n * 'iconCreateResize' event handler\n * @param {Object} originPointer origin pointer\n * @param {Number} originPointer.x x position\n * @param {Number} originPointer.y y position\n * @private\n */\n _onIconCreateResize(originPointer) {\n this.fire(events.ICON_CREATE_RESIZE, originPointer);\n }\n\n /**\n * 'iconCreateEnd' event handler\n * @param {Object} originPointer origin pointer\n * @param {Number} originPointer.x x position\n * @param {Number} originPointer.y y position\n * @private\n */\n _onIconCreateEnd(originPointer) {\n this.fire(events.ICON_CREATE_END, originPointer);\n }\n\n /**\n * 'textEditing' event handler\n * @private\n */\n _onTextEditing() {\n /**\n * The event which starts to edit text object\n * @event ImageEditor#textEditing\n * @example\n * imageEditor.on('textEditing', function() {\n * console.log('text editing');\n * });\n */\n\n this.fire(events.TEXT_EDITING);\n }\n\n /**\n * Mousedown event handler in case of 'TEXT' drawing mode\n * @param {fabric.Event} event - Current mousedown event object\n * @private\n */\n _onAddText(event) {\n /**\n * The event when 'TEXT' drawing mode is enabled and click non-object area.\n * @event ImageEditor#addText\n * @param {Object} pos\n * @param {Object} pos.originPosition - Current position on origin canvas\n * @param {Number} pos.originPosition.x - x\n * @param {Number} pos.originPosition.y - y\n * @param {Object} pos.clientPosition - Current position on client area\n * @param {Number} pos.clientPosition.x - x\n * @param {Number} pos.clientPosition.y - y\n * @example\n * imageEditor.on('addText', function(pos) {\n * console.log('text position on canvas: ' + pos.originPosition);\n * console.log('text position on brwoser: ' + pos.clientPosition);\n * });\n */\n\n this.fire(events.ADD_TEXT, {\n originPosition: event.originPosition,\n clientPosition: event.clientPosition,\n });\n }\n\n /**\n * 'addObject' event handler\n * @param {Object} objectProps added object properties\n * @private\n */\n _onAddObject(objectProps) {\n const obj = this._graphics.getObject(objectProps.id);\n this._invoker.fire(events.EXECUTE_COMMAND, getObjectType(obj.type));\n this._pushAddObjectCommand(obj);\n }\n\n /**\n * 'objectAdded' event handler\n * @param {Object} objectProps added object properties\n * @private\n */\n _onObjectAdded(objectProps) {\n /**\n * The event when object added\n * @event ImageEditor#objectAdded\n * @param {ObjectProps} props - object properties\n * @example\n * imageEditor.on('objectAdded', function(props) {\n * console.log(props);\n * });\n */\n this.fire(OBJECT_ADDED, objectProps);\n\n /**\n * The event when object added (deprecated)\n * @event ImageEditor#addObjectAfter\n * @param {ObjectProps} props - object properties\n * @deprecated\n */\n this.fire(ADD_OBJECT_AFTER, objectProps);\n }\n\n /**\n * 'objectModified' event handler\n * @param {fabric.Object} obj - selection object\n * @private\n */\n _onObjectModified(obj) {\n if (obj.type !== OBJ_TYPE.CROPZONE) {\n this._invoker.fire(events.EXECUTE_COMMAND, getObjectType(obj.type));\n this._pushModifyObjectCommand(obj);\n }\n }\n\n /**\n * 'selectionCleared' event handler\n * @private\n */\n _selectionCleared() {\n this.fire(SELECTION_CLEARED);\n }\n\n /**\n * 'selectionCreated' event handler\n * @param {Object} eventTarget - Fabric object\n * @private\n */\n _selectionCreated(eventTarget) {\n this.fire(SELECTION_CREATED, eventTarget);\n }\n\n /**\n * Register custom icons\n * @param {{iconType: string, pathValue: string}} infos - Infos to register icons\n * @example\n * imageEditor.registerIcons({\n * customIcon: 'M 0 0 L 20 20 L 10 10 Z',\n * customArrow: 'M 60 0 L 120 60 H 90 L 75 45 V 180 H 45 V 45 L 30 60 H 0 Z'\n * });\n */\n registerIcons(infos) {\n this._graphics.registerPaths(infos);\n }\n\n /**\n * Change canvas cursor type\n * @param {string} cursorType - cursor type\n * @example\n * imageEditor.changeCursor('crosshair');\n */\n changeCursor(cursorType) {\n this._graphics.changeCursor(cursorType);\n }\n\n /**\n * Add icon on canvas\n * @param {string} type - Icon type ('arrow', 'cancel', custom icon name)\n * @param {Object} options - Icon options\n * @param {string} [options.fill] - Icon foreground color\n * @param {number} [options.left] - Icon x position\n * @param {number} [options.top] - Icon y position\n * @returns {Promise}\n * @example\n * imageEditor.addIcon('arrow'); // The position is center on canvas\n * @example\n * imageEditor.addIcon('arrow', {\n * left: 100,\n * top: 100\n * }).then(objectProps => {\n * console.log(objectProps.id);\n * });\n */\n addIcon(type, options) {\n options = options || {};\n\n this._setPositions(options);\n\n return this.execute(commands.ADD_ICON, type, options);\n }\n\n /**\n * Change icon color\n * @param {number} id - object id\n * @param {string} color - Color for icon\n * @returns {Promise}\n * @example\n * imageEditor.changeIconColor(id, '#000000');\n */\n changeIconColor(id, color) {\n return this.execute(commands.CHANGE_ICON_COLOR, id, color);\n }\n\n /**\n * Remove an object or group by id\n * @param {number} id - object id\n * @returns {Promise}\n * @example\n * imageEditor.removeObject(id);\n */\n removeObject(id) {\n const { type } = this._graphics.getObject(id);\n\n return this.execute(commands.REMOVE_OBJECT, id, getObjectType(type));\n }\n\n /**\n * Whether it has the filter or not\n * @param {string} type - Filter type\n * @returns {boolean} true if it has the filter\n */\n hasFilter(type) {\n return this._graphics.hasFilter(type);\n }\n\n /**\n * Remove filter on canvas image\n * @param {string} type - Filter type\n * @returns {Promise}\n * @example\n * imageEditor.removeFilter('Grayscale').then(obj => {\n * console.log('filterType: ', obj.type);\n * console.log('actType: ', obj.action);\n * }).catch(message => {\n * console.log('error: ', message);\n * });\n */\n removeFilter(type) {\n return this.execute(commands.REMOVE_FILTER, type);\n }\n\n /**\n * Apply filter on canvas image\n * @param {string} type - Filter type\n * @param {object} options - Options to apply filter\n * @param {boolean} isSilent - is silent execution or not\n * @returns {Promise}\n * @example\n * imageEditor.applyFilter('Grayscale');\n * @example\n * imageEditor.applyFilter('mask', {maskObjId: id}).then(obj => {\n * console.log('filterType: ', obj.type);\n * console.log('actType: ', obj.action);\n * }).catch(message => {\n * console.log('error: ', message);\n * });;\n */\n applyFilter(type, options, isSilent) {\n const executeMethodName = isSilent ? 'executeSilent' : 'execute';\n\n return this[executeMethodName](commands.APPLY_FILTER, type, options);\n }\n\n /**\n * Get data url\n * @param {Object} options - options for toDataURL\n * @param {String} [options.format=png] The format of the output image. Either \"jpeg\" or \"png\"\n * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg.\n * @param {Number} [options.multiplier=1] Multiplier to scale by\n * @param {Number} [options.left] Cropping left offset. Introduced in fabric v1.2.14\n * @param {Number} [options.top] Cropping top offset. Introduced in fabric v1.2.14\n * @param {Number} [options.width] Cropping width. Introduced in fabric v1.2.14\n * @param {Number} [options.height] Cropping height. Introduced in fabric v1.2.14\n * @returns {string} A DOMString containing the requested data URI\n * @example\n * imgEl.src = imageEditor.toDataURL();\n *\n * imageEditor.loadImageFromURL(imageEditor.toDataURL(), 'FilterImage').then(() => {\n * imageEditor.addImageObject(imgUrl);\n * });\n */\n toDataURL(options) {\n return this._graphics.toDataURL(options);\n }\n\n /**\n * Get image name\n * @returns {string} image name\n * @example\n * console.log(imageEditor.getImageName());\n */\n getImageName() {\n return this._graphics.getImageName();\n }\n\n /**\n * Clear undoStack\n * @example\n * imageEditor.clearUndoStack();\n */\n clearUndoStack() {\n this._invoker.clearUndoStack();\n }\n\n /**\n * Clear redoStack\n * @example\n * imageEditor.clearRedoStack();\n */\n clearRedoStack() {\n this._invoker.clearRedoStack();\n }\n\n /**\n * Whehter the undo stack is empty or not\n * @returns {boolean}\n * imageEditor.isEmptyUndoStack();\n */\n isEmptyUndoStack() {\n return this._invoker.isEmptyUndoStack();\n }\n\n /**\n * Whehter the redo stack is empty or not\n * @returns {boolean}\n * imageEditor.isEmptyRedoStack();\n */\n isEmptyRedoStack() {\n return this._invoker.isEmptyRedoStack();\n }\n\n /**\n * Resize canvas dimension\n * @param {{width: number, height: number}} dimension - Max width & height\n * @returns {Promise}\n */\n resizeCanvasDimension(dimension) {\n if (!dimension) {\n return Promise.reject(rejectMessages.invalidParameters);\n }\n\n return this.execute(commands.RESIZE_CANVAS_DIMENSION, dimension);\n }\n\n /**\n * Destroy\n */\n destroy() {\n this.stopDrawingMode();\n this._detachDomEvents();\n this._graphics.destroy();\n this._graphics = null;\n\n if (this.ui) {\n this._detachColorPickerInputBoxEvents();\n this.ui.destroy();\n }\n\n forEach(\n this,\n (value, key) => {\n this[key] = null;\n },\n this\n );\n }\n\n /**\n * Set position\n * @param {Object} options - Position options (left or top)\n * @private\n */\n _setPositions(options) {\n const centerPosition = this._graphics.getCenter();\n\n if (isUndefined(options.left)) {\n options.left = centerPosition.left;\n }\n\n if (isUndefined(options.top)) {\n options.top = centerPosition.top;\n }\n }\n\n /**\n * Set properties of active object\n * @param {number} id - object id\n * @param {Object} keyValue - key & value\n * @returns {Promise}\n * @example\n * imageEditor.setObjectProperties(id, {\n * left:100,\n * top:100,\n * width: 200,\n * height: 200,\n * opacity: 0.5\n * });\n */\n setObjectProperties(id, keyValue) {\n return this.execute(commands.SET_OBJECT_PROPERTIES, id, keyValue);\n }\n\n /**\n * Set properties of active object, Do not leave an invoke history.\n * @param {number} id - object id\n * @param {Object} keyValue - key & value\n * @example\n * imageEditor.setObjectPropertiesQuietly(id, {\n * left:100,\n * top:100,\n * width: 200,\n * height: 200,\n * opacity: 0.5\n * });\n */\n setObjectPropertiesQuietly(id, keyValue) {\n this._graphics.setObjectProperties(id, keyValue);\n }\n\n /**\n * Get properties of active object corresponding key\n * @param {number} id - object id\n * @param {Array|ObjectProps|string} keys - property's key\n * @returns {ObjectProps} properties if id is valid or null\n * @example\n * var props = imageEditor.getObjectProperties(id, 'left');\n * console.log(props);\n * @example\n * var props = imageEditor.getObjectProperties(id, ['left', 'top', 'width', 'height']);\n * console.log(props);\n * @example\n * var props = imageEditor.getObjectProperties(id, {\n * left: null,\n * top: null,\n * width: null,\n * height: null,\n * opacity: null\n * });\n * console.log(props);\n */\n getObjectProperties(id, keys) {\n const object = this._graphics.getObject(id);\n if (!object) {\n return null;\n }\n\n return this._graphics.getObjectProperties(id, keys);\n }\n\n /**\n * Get the canvas size\n * @returns {Object} {{width: number, height: number}} canvas size\n * @example\n * var canvasSize = imageEditor.getCanvasSize();\n * console.log(canvasSize.width);\n * console.height(canvasSize.height);\n */\n getCanvasSize() {\n return this._graphics.getCanvasSize();\n }\n\n /**\n * Get object position by originX, originY\n * @param {number} id - object id\n * @param {string} originX - can be 'left', 'center', 'right'\n * @param {string} originY - can be 'top', 'center', 'bottom'\n * @returns {Object} {{x:number, y: number}} position by origin if id is valid, or null\n * @example\n * var position = imageEditor.getObjectPosition(id, 'left', 'top');\n * console.log(position);\n */\n getObjectPosition(id, originX, originY) {\n return this._graphics.getObjectPosition(id, originX, originY);\n }\n\n /**\n * Set object position by originX, originY\n * @param {number} id - object id\n * @param {Object} posInfo - position object\n * @param {number} posInfo.x - x position\n * @param {number} posInfo.y - y position\n * @param {string} posInfo.originX - can be 'left', 'center', 'right'\n * @param {string} posInfo.originY - can be 'top', 'center', 'bottom'\n * @returns {Promise}\n * @example\n * // align the object to 'left', 'top'\n * imageEditor.setObjectPosition(id, {\n * x: 0,\n * y: 0,\n * originX: 'left',\n * originY: 'top'\n * });\n * @example\n * // align the object to 'right', 'top'\n * var canvasSize = imageEditor.getCanvasSize();\n * imageEditor.setObjectPosition(id, {\n * x: canvasSize.width,\n * y: 0,\n * originX: 'right',\n * originY: 'top'\n * });\n * @example\n * // align the object to 'left', 'bottom'\n * var canvasSize = imageEditor.getCanvasSize();\n * imageEditor.setObjectPosition(id, {\n * x: 0,\n * y: canvasSize.height,\n * originX: 'left',\n * originY: 'bottom'\n * });\n * @example\n * // align the object to 'right', 'bottom'\n * var canvasSize = imageEditor.getCanvasSize();\n * imageEditor.setObjectPosition(id, {\n * x: canvasSize.width,\n * y: canvasSize.height,\n * originX: 'right',\n * originY: 'bottom'\n * });\n */\n setObjectPosition(id, posInfo) {\n return this.execute(commands.SET_OBJECT_POSITION, id, posInfo);\n }\n\n /**\n * @param {object} dimensions - Image Dimensions\n * @returns {Promise}\n */\n resize(dimensions) {\n return this.execute(commands.RESIZE_IMAGE, dimensions);\n }\n}\n\naction.mixin(ImageEditor);\nCustomEvents.mixin(ImageEditor);\n\nexport default ImageEditor;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Invoker - invoke commands\n */\nimport snippet from 'tui-code-snippet';\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { eventNames, rejectMessages } from '@/consts';\n\nconst { isFunction, isString, CustomEvents } = snippet;\n\n/**\n * Invoker\n * @class\n * @ignore\n */\nclass Invoker {\n constructor() {\n /**\n * Undo stack\n * @type {Array.}\n * @private\n */\n this._undoStack = [];\n\n /**\n * Redo stack\n * @type {Array.}\n * @private\n */\n this._redoStack = [];\n\n /**\n * Lock-flag for executing command\n * @type {boolean}\n * @private\n */\n this._isLocked = false;\n\n this._isSilent = false;\n }\n\n /**\n * Invoke command execution\n * @param {Command} command - Command\n * @param {boolean} [isRedo=false] - check if command is redo\n * @returns {Promise}\n * @private\n */\n _invokeExecution(command, isRedo = false) {\n this.lock();\n\n let { args } = command;\n if (!args) {\n args = [];\n }\n\n return command\n .execute(...args)\n .then((value) => {\n if (!this._isSilent) {\n this.pushUndoStack(command);\n\n this.fire(isRedo ? eventNames.AFTER_REDO : eventNames.EXECUTE_COMMAND, command);\n }\n this.unlock();\n if (isFunction(command.executeCallback)) {\n command.executeCallback(value);\n }\n\n return value;\n })\n ['catch']((message) => {\n this.unlock();\n\n return Promise.reject(message);\n });\n }\n\n /**\n * Invoke command undo\n * @param {Command} command - Command\n * @returns {Promise}\n * @private\n */\n _invokeUndo(command) {\n this.lock();\n\n let { args } = command;\n if (!args) {\n args = [];\n }\n\n return command\n .undo(...args)\n .then((value) => {\n this.pushRedoStack(command);\n this.fire(eventNames.AFTER_UNDO, command);\n this.unlock();\n if (isFunction(command.undoCallback)) {\n command.undoCallback(value);\n }\n\n return value;\n })\n ['catch']((message) => {\n this.unlock();\n\n return Promise.reject(message);\n });\n }\n\n /**\n * fire REDO_STACK_CHANGED event\n * @private\n */\n _fireRedoStackChanged() {\n this.fire(eventNames.REDO_STACK_CHANGED, this._redoStack.length);\n }\n\n /**\n * fire UNDO_STACK_CHANGED event\n * @private\n */\n _fireUndoStackChanged() {\n this.fire(eventNames.UNDO_STACK_CHANGED, this._undoStack.length);\n }\n\n /**\n * Lock this invoker\n */\n lock() {\n this._isLocked = true;\n }\n\n /**\n * Unlock this invoker\n */\n unlock() {\n this._isLocked = false;\n }\n\n executeSilent(...args) {\n this._isSilent = true;\n\n return this.execute(...args, this._isSilent).then(() => {\n this._isSilent = false;\n });\n }\n\n /**\n * Invoke command\n * Store the command to the undoStack\n * Clear the redoStack\n * @param {String} commandName - Command name\n * @param {...*} args - Arguments for creating command\n * @returns {Promise}\n */\n execute(...args) {\n if (this._isLocked) {\n return Promise.reject(rejectMessages.isLock);\n }\n\n let [command] = args;\n if (isString(command)) {\n command = commandFactory.create(...args);\n }\n\n return this._invokeExecution(command).then((value) => {\n this.clearRedoStack();\n\n return value;\n });\n }\n\n /**\n * Undo command\n * @returns {Promise}\n */\n undo() {\n let command = this._undoStack.pop();\n let promise;\n let message = '';\n\n if (command && this._isLocked) {\n this.pushUndoStack(command, true);\n command = null;\n }\n if (command) {\n if (this.isEmptyUndoStack()) {\n this._fireUndoStackChanged();\n }\n promise = this._invokeUndo(command);\n } else {\n message = rejectMessages.undo;\n if (this._isLocked) {\n message = `${message} Because ${rejectMessages.isLock}`;\n }\n promise = Promise.reject(message);\n }\n\n return promise;\n }\n\n /**\n * Redo command\n * @returns {Promise}\n */\n redo() {\n let command = this._redoStack.pop();\n let promise;\n let message = '';\n\n if (command && this._isLocked) {\n this.pushRedoStack(command, true);\n command = null;\n }\n if (command) {\n if (this.isEmptyRedoStack()) {\n this._fireRedoStackChanged();\n }\n promise = this._invokeExecution(command, true);\n } else {\n message = rejectMessages.redo;\n if (this._isLocked) {\n message = `${message} Because ${rejectMessages.isLock}`;\n }\n promise = Promise.reject(message);\n }\n\n return promise;\n }\n\n /**\n * Push undo stack\n * @param {Command} command - command\n * @param {boolean} [isSilent] - Fire event or not\n */\n pushUndoStack(command, isSilent) {\n this._undoStack.push(command);\n if (!isSilent) {\n this._fireUndoStackChanged();\n }\n }\n\n /**\n * Push redo stack\n * @param {Command} command - command\n * @param {boolean} [isSilent] - Fire event or not\n */\n pushRedoStack(command, isSilent) {\n this._redoStack.push(command);\n if (!isSilent) {\n this._fireRedoStackChanged();\n }\n }\n\n /**\n * Return whether the redoStack is empty\n * @returns {boolean}\n */\n isEmptyRedoStack() {\n return this._redoStack.length === 0;\n }\n\n /**\n * Return whether the undoStack is empty\n * @returns {boolean}\n */\n isEmptyUndoStack() {\n return this._undoStack.length === 0;\n }\n\n /**\n * Clear undoStack\n */\n clearUndoStack() {\n if (!this.isEmptyUndoStack()) {\n this._undoStack = [];\n this._fireUndoStackChanged();\n }\n }\n\n /**\n * Clear redoStack\n */\n clearRedoStack() {\n if (!this.isEmptyRedoStack()) {\n this._redoStack = [];\n this._fireRedoStackChanged();\n }\n }\n}\n\nCustomEvents.mixin(Invoker);\n\nexport default Invoker;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Command interface\n */\nimport snippet from 'tui-code-snippet';\nimport errorMessage from '@/factory/errorMessage';\n\nconst createMessage = errorMessage.create;\nconst errorTypes = errorMessage.types;\n\n/**\n * Command class\n * @class\n * @param {{name:function, execute: function, undo: function,\n * executeCallback: function, undoCallback: function}} actions - Command actions\n * @param {Array} args - passing arguments on execute, undo\n * @ignore\n */\nclass Command {\n constructor(actions, args) {\n /**\n * command name\n * @type {string}\n */\n this.name = actions.name;\n\n /**\n * arguments\n * @type {Array}\n */\n this.args = args;\n\n /**\n * Execute function\n * @type {function}\n */\n this.execute = actions.execute;\n\n /**\n * Undo function\n * @type {function}\n */\n this.undo = actions.undo;\n\n /**\n * executeCallback\n * @type {function}\n */\n this.executeCallback = actions.executeCallback || null;\n\n /**\n * undoCallback\n * @type {function}\n */\n this.undoCallback = actions.undoCallback || null;\n\n /**\n * data for undo\n * @type {Object}\n */\n this.undoData = {};\n }\n\n /**\n * Execute action\n * @param {Object.} compMap - Components injection\n * @abstract\n */\n execute() {\n throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'execute'));\n }\n\n /**\n * Undo action\n * @param {Object.} compMap - Components injection\n * @abstract\n */\n undo() {\n throw new Error(createMessage(errorTypes.UN_IMPLEMENTATION, 'undo'));\n }\n\n /**\n * command for redo if undoData exists\n * @returns {boolean} isRedo\n */\n get isRedo() {\n return Object.keys(this.undoData).length > 0;\n }\n\n /**\n * Set undoData action\n * @param {Object} undoData - maked undo data\n * @param {Object} cachedUndoDataForSilent - cached undo data\n * @param {boolean} isSilent - is silent execution or not\n * @returns {Object} cachedUndoDataForSilent\n */\n setUndoData(undoData, cachedUndoDataForSilent, isSilent) {\n if (cachedUndoDataForSilent) {\n undoData = cachedUndoDataForSilent;\n }\n\n if (!isSilent) {\n snippet.extend(this.undoData, undoData);\n cachedUndoDataForSilent = null;\n } else if (!cachedUndoDataForSilent) {\n cachedUndoDataForSilent = undoData;\n }\n\n return cachedUndoDataForSilent;\n }\n\n /**\n * Attach execute callabck\n * @param {function} callback - Callback after execution\n * @returns {Command} this\n */\n setExecuteCallback(callback) {\n this.executeCallback = callback;\n\n return this;\n }\n\n /**\n * Attach undo callback\n * @param {function} callback - Callback after undo\n * @returns {Command} this\n */\n setUndoCallback(callback) {\n this.undoCallback = callback;\n\n return this;\n }\n}\n\nexport default Command;\n","var parent = require('../../es/promise');\nrequire('../../modules/esnext.aggregate-error');\n// TODO: Remove from `core-js@4`\nrequire('../../modules/esnext.promise.all-settled');\nrequire('../../modules/esnext.promise.try');\nrequire('../../modules/esnext.promise.any');\n\nmodule.exports = parent;\n","require('../../modules/es.aggregate-error');\nrequire('../../modules/es.object.to-string');\nrequire('../../modules/es.promise');\nrequire('../../modules/es.promise.all-settled');\nrequire('../../modules/es.promise.any');\nrequire('../../modules/es.promise.finally');\nrequire('../../modules/es.string.iterator');\nrequire('../../modules/web.dom-collections.iterator');\nvar path = require('../../internals/path');\n\nmodule.exports = path.Promise;\n","var g;\n\n// This works in non-strict mode\ng = (function() {\n\treturn this;\n})();\n\ntry {\n\t// This works if eval is allowed (see CSP)\n\tg = g || new Function(\"return this\")();\n} catch (e) {\n\t// This works if the window reference is available\n\tif (typeof window === \"object\") g = window;\n}\n\n// g can still be undefined, but nothing to do about it...\n// We return undefined, instead of nothing here, so it's\n// easier to handle this case. if(!global) { ...}\n\nmodule.exports = g;\n","'use strict';\nvar $propertyIsEnumerable = {}.propertyIsEnumerable;\n// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe\nvar getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;\n\n// Nashorn ~ JDK8 bug\nvar NASHORN_BUG = getOwnPropertyDescriptor && !$propertyIsEnumerable.call({ 1: 2 }, 1);\n\n// `Object.prototype.propertyIsEnumerable` method implementation\n// https://tc39.es/ecma262/#sec-object.prototype.propertyisenumerable\nexports.f = NASHORN_BUG ? function propertyIsEnumerable(V) {\n var descriptor = getOwnPropertyDescriptor(this, V);\n return !!descriptor && descriptor.enumerable;\n} : $propertyIsEnumerable;\n","var fails = require('../internals/fails');\nvar classof = require('../internals/classof-raw');\n\nvar split = ''.split;\n\n// fallback for non-array-like ES3 and non-enumerable old V8 strings\nmodule.exports = fails(function () {\n // throws an error in rhino, see https://github.com/mozilla/rhino/issues/346\n // eslint-disable-next-line no-prototype-builtins -- safe\n return !Object('z').propertyIsEnumerable(0);\n}) ? function (it) {\n return classof(it) == 'String' ? split.call(it, '') : Object(it);\n} : Object;\n","var global = require('../internals/global');\nvar createNonEnumerableProperty = require('../internals/create-non-enumerable-property');\n\nmodule.exports = function (key, value) {\n try {\n createNonEnumerableProperty(global, key, value);\n } catch (error) {\n global[key] = value;\n } return value;\n};\n","var fails = require('../internals/fails');\n\nmodule.exports = !fails(function () {\n function F() { /* empty */ }\n F.prototype.constructor = null;\n // eslint-disable-next-line es/no-object-getprototypeof -- required for testing\n return Object.getPrototypeOf(new F()) !== F.prototype;\n});\n","var isObject = require('../internals/is-object');\n\nmodule.exports = function (it) {\n if (!isObject(it) && it !== null) {\n throw TypeError(\"Can't set \" + String(it) + ' as a prototype');\n } return it;\n};\n","var DESCRIPTORS = require('../internals/descriptors');\nvar definePropertyModule = require('../internals/object-define-property');\nvar anObject = require('../internals/an-object');\nvar objectKeys = require('../internals/object-keys');\n\n// `Object.defineProperties` method\n// https://tc39.es/ecma262/#sec-object.defineproperties\n// eslint-disable-next-line es/no-object-defineproperties -- safe\nmodule.exports = DESCRIPTORS ? Object.defineProperties : function defineProperties(O, Properties) {\n anObject(O);\n var keys = objectKeys(Properties);\n var length = keys.length;\n var index = 0;\n var key;\n while (length > index) definePropertyModule.f(O, key = keys[index++], Properties[key]);\n return O;\n};\n","var internalObjectKeys = require('../internals/object-keys-internal');\nvar enumBugKeys = require('../internals/enum-bug-keys');\n\n// `Object.keys` method\n// https://tc39.es/ecma262/#sec-object.keys\n// eslint-disable-next-line es/no-object-keys -- safe\nmodule.exports = Object.keys || function keys(O) {\n return internalObjectKeys(O, enumBugKeys);\n};\n","var has = require('../internals/has');\nvar toIndexedObject = require('../internals/to-indexed-object');\nvar indexOf = require('../internals/array-includes').indexOf;\nvar hiddenKeys = require('../internals/hidden-keys');\n\nmodule.exports = function (object, names) {\n var O = toIndexedObject(object);\n var i = 0;\n var result = [];\n var key;\n for (key in O) !has(hiddenKeys, key) && has(O, key) && result.push(key);\n // Don't enum bug & hidden keys\n while (names.length > i) if (has(O, key = names[i++])) {\n ~indexOf(result, key) || result.push(key);\n }\n return result;\n};\n","var toIndexedObject = require('../internals/to-indexed-object');\nvar toLength = require('../internals/to-length');\nvar toAbsoluteIndex = require('../internals/to-absolute-index');\n\n// `Array.prototype.{ indexOf, includes }` methods implementation\nvar createMethod = function (IS_INCLUDES) {\n return function ($this, el, fromIndex) {\n var O = toIndexedObject($this);\n var length = toLength(O.length);\n var index = toAbsoluteIndex(fromIndex, length);\n var value;\n // Array#includes uses SameValueZero equality algorithm\n // eslint-disable-next-line no-self-compare -- NaN check\n if (IS_INCLUDES && el != el) while (length > index) {\n value = O[index++];\n // eslint-disable-next-line no-self-compare -- NaN check\n if (value != value) return true;\n // Array#indexOf ignores holes, Array#includes - not\n } else for (;length > index; index++) {\n if ((IS_INCLUDES || index in O) && O[index] === el) return IS_INCLUDES || index || 0;\n } return !IS_INCLUDES && -1;\n };\n};\n\nmodule.exports = {\n // `Array.prototype.includes` method\n // https://tc39.es/ecma262/#sec-array.prototype.includes\n includes: createMethod(true),\n // `Array.prototype.indexOf` method\n // https://tc39.es/ecma262/#sec-array.prototype.indexof\n indexOf: createMethod(false)\n};\n","var toInteger = require('../internals/to-integer');\n\nvar max = Math.max;\nvar min = Math.min;\n\n// Helper for a popular repeating case of the spec:\n// Let integer be ? ToInteger(index).\n// If integer < 0, let result be max((length + integer), 0); else let result be min(integer, length).\nmodule.exports = function (index, length) {\n var integer = toInteger(index);\n return integer < 0 ? max(integer + length, 0) : min(integer, length);\n};\n","var wellKnownSymbol = require('../internals/well-known-symbol');\nvar Iterators = require('../internals/iterators');\n\nvar ITERATOR = wellKnownSymbol('iterator');\nvar ArrayPrototype = Array.prototype;\n\n// check on default Array iterator\nmodule.exports = function (it) {\n return it !== undefined && (Iterators.Array === it || ArrayPrototype[ITERATOR] === it);\n};\n","/* eslint-disable es/no-symbol -- required for testing */\nvar NATIVE_SYMBOL = require('../internals/native-symbol');\n\nmodule.exports = NATIVE_SYMBOL\n && !Symbol.sham\n && typeof Symbol.iterator == 'symbol';\n","var classof = require('../internals/classof');\nvar Iterators = require('../internals/iterators');\nvar wellKnownSymbol = require('../internals/well-known-symbol');\n\nvar ITERATOR = wellKnownSymbol('iterator');\n\nmodule.exports = function (it) {\n if (it != undefined) return it[ITERATOR]\n || it['@@iterator']\n || Iterators[classof(it)];\n};\n","var anObject = require('../internals/an-object');\n\nmodule.exports = function (iterator) {\n var returnMethod = iterator['return'];\n if (returnMethod !== undefined) {\n return anObject(returnMethod.call(iterator)).value;\n }\n};\n","'use strict';\nvar $ = require('../internals/export');\nvar IS_PURE = require('../internals/is-pure');\nvar global = require('../internals/global');\nvar getBuiltIn = require('../internals/get-built-in');\nvar NativePromise = require('../internals/native-promise-constructor');\nvar redefine = require('../internals/redefine');\nvar redefineAll = require('../internals/redefine-all');\nvar setPrototypeOf = require('../internals/object-set-prototype-of');\nvar setToStringTag = require('../internals/set-to-string-tag');\nvar setSpecies = require('../internals/set-species');\nvar isObject = require('../internals/is-object');\nvar aFunction = require('../internals/a-function');\nvar anInstance = require('../internals/an-instance');\nvar inspectSource = require('../internals/inspect-source');\nvar iterate = require('../internals/iterate');\nvar checkCorrectnessOfIteration = require('../internals/check-correctness-of-iteration');\nvar speciesConstructor = require('../internals/species-constructor');\nvar task = require('../internals/task').set;\nvar microtask = require('../internals/microtask');\nvar promiseResolve = require('../internals/promise-resolve');\nvar hostReportErrors = require('../internals/host-report-errors');\nvar newPromiseCapabilityModule = require('../internals/new-promise-capability');\nvar perform = require('../internals/perform');\nvar InternalStateModule = require('../internals/internal-state');\nvar isForced = require('../internals/is-forced');\nvar wellKnownSymbol = require('../internals/well-known-symbol');\nvar IS_BROWSER = require('../internals/engine-is-browser');\nvar IS_NODE = require('../internals/engine-is-node');\nvar V8_VERSION = require('../internals/engine-v8-version');\n\nvar SPECIES = wellKnownSymbol('species');\nvar PROMISE = 'Promise';\nvar getInternalState = InternalStateModule.get;\nvar setInternalState = InternalStateModule.set;\nvar getInternalPromiseState = InternalStateModule.getterFor(PROMISE);\nvar NativePromisePrototype = NativePromise && NativePromise.prototype;\nvar PromiseConstructor = NativePromise;\nvar PromiseConstructorPrototype = NativePromisePrototype;\nvar TypeError = global.TypeError;\nvar document = global.document;\nvar process = global.process;\nvar newPromiseCapability = newPromiseCapabilityModule.f;\nvar newGenericPromiseCapability = newPromiseCapability;\nvar DISPATCH_EVENT = !!(document && document.createEvent && global.dispatchEvent);\nvar NATIVE_REJECTION_EVENT = typeof PromiseRejectionEvent == 'function';\nvar UNHANDLED_REJECTION = 'unhandledrejection';\nvar REJECTION_HANDLED = 'rejectionhandled';\nvar PENDING = 0;\nvar FULFILLED = 1;\nvar REJECTED = 2;\nvar HANDLED = 1;\nvar UNHANDLED = 2;\nvar SUBCLASSING = false;\nvar Internal, OwnPromiseCapability, PromiseWrapper, nativeThen;\n\nvar FORCED = isForced(PROMISE, function () {\n var GLOBAL_CORE_JS_PROMISE = inspectSource(PromiseConstructor) !== String(PromiseConstructor);\n // V8 6.6 (Node 10 and Chrome 66) have a bug with resolving custom thenables\n // https://bugs.chromium.org/p/chromium/issues/detail?id=830565\n // We can't detect it synchronously, so just check versions\n if (!GLOBAL_CORE_JS_PROMISE && V8_VERSION === 66) return true;\n // We need Promise#finally in the pure version for preventing prototype pollution\n if (IS_PURE && !PromiseConstructorPrototype['finally']) return true;\n // We can't use @@species feature detection in V8 since it causes\n // deoptimization and performance degradation\n // https://github.com/zloirock/core-js/issues/679\n if (V8_VERSION >= 51 && /native code/.test(PromiseConstructor)) return false;\n // Detect correctness of subclassing with @@species support\n var promise = new PromiseConstructor(function (resolve) { resolve(1); });\n var FakePromise = function (exec) {\n exec(function () { /* empty */ }, function () { /* empty */ });\n };\n var constructor = promise.constructor = {};\n constructor[SPECIES] = FakePromise;\n SUBCLASSING = promise.then(function () { /* empty */ }) instanceof FakePromise;\n if (!SUBCLASSING) return true;\n // Unhandled rejections tracking support, NodeJS Promise without it fails @@species test\n return !GLOBAL_CORE_JS_PROMISE && IS_BROWSER && !NATIVE_REJECTION_EVENT;\n});\n\nvar INCORRECT_ITERATION = FORCED || !checkCorrectnessOfIteration(function (iterable) {\n PromiseConstructor.all(iterable)['catch'](function () { /* empty */ });\n});\n\n// helpers\nvar isThenable = function (it) {\n var then;\n return isObject(it) && typeof (then = it.then) == 'function' ? then : false;\n};\n\nvar notify = function (state, isReject) {\n if (state.notified) return;\n state.notified = true;\n var chain = state.reactions;\n microtask(function () {\n var value = state.value;\n var ok = state.state == FULFILLED;\n var index = 0;\n // variable length - can't use forEach\n while (chain.length > index) {\n var reaction = chain[index++];\n var handler = ok ? reaction.ok : reaction.fail;\n var resolve = reaction.resolve;\n var reject = reaction.reject;\n var domain = reaction.domain;\n var result, then, exited;\n try {\n if (handler) {\n if (!ok) {\n if (state.rejection === UNHANDLED) onHandleUnhandled(state);\n state.rejection = HANDLED;\n }\n if (handler === true) result = value;\n else {\n if (domain) domain.enter();\n result = handler(value); // can throw\n if (domain) {\n domain.exit();\n exited = true;\n }\n }\n if (result === reaction.promise) {\n reject(TypeError('Promise-chain cycle'));\n } else if (then = isThenable(result)) {\n then.call(result, resolve, reject);\n } else resolve(result);\n } else reject(value);\n } catch (error) {\n if (domain && !exited) domain.exit();\n reject(error);\n }\n }\n state.reactions = [];\n state.notified = false;\n if (isReject && !state.rejection) onUnhandled(state);\n });\n};\n\nvar dispatchEvent = function (name, promise, reason) {\n var event, handler;\n if (DISPATCH_EVENT) {\n event = document.createEvent('Event');\n event.promise = promise;\n event.reason = reason;\n event.initEvent(name, false, true);\n global.dispatchEvent(event);\n } else event = { promise: promise, reason: reason };\n if (!NATIVE_REJECTION_EVENT && (handler = global['on' + name])) handler(event);\n else if (name === UNHANDLED_REJECTION) hostReportErrors('Unhandled promise rejection', reason);\n};\n\nvar onUnhandled = function (state) {\n task.call(global, function () {\n var promise = state.facade;\n var value = state.value;\n var IS_UNHANDLED = isUnhandled(state);\n var result;\n if (IS_UNHANDLED) {\n result = perform(function () {\n if (IS_NODE) {\n process.emit('unhandledRejection', value, promise);\n } else dispatchEvent(UNHANDLED_REJECTION, promise, value);\n });\n // Browsers should not trigger `rejectionHandled` event if it was handled here, NodeJS - should\n state.rejection = IS_NODE || isUnhandled(state) ? UNHANDLED : HANDLED;\n if (result.error) throw result.value;\n }\n });\n};\n\nvar isUnhandled = function (state) {\n return state.rejection !== HANDLED && !state.parent;\n};\n\nvar onHandleUnhandled = function (state) {\n task.call(global, function () {\n var promise = state.facade;\n if (IS_NODE) {\n process.emit('rejectionHandled', promise);\n } else dispatchEvent(REJECTION_HANDLED, promise, state.value);\n });\n};\n\nvar bind = function (fn, state, unwrap) {\n return function (value) {\n fn(state, value, unwrap);\n };\n};\n\nvar internalReject = function (state, value, unwrap) {\n if (state.done) return;\n state.done = true;\n if (unwrap) state = unwrap;\n state.value = value;\n state.state = REJECTED;\n notify(state, true);\n};\n\nvar internalResolve = function (state, value, unwrap) {\n if (state.done) return;\n state.done = true;\n if (unwrap) state = unwrap;\n try {\n if (state.facade === value) throw TypeError(\"Promise can't be resolved itself\");\n var then = isThenable(value);\n if (then) {\n microtask(function () {\n var wrapper = { done: false };\n try {\n then.call(value,\n bind(internalResolve, wrapper, state),\n bind(internalReject, wrapper, state)\n );\n } catch (error) {\n internalReject(wrapper, error, state);\n }\n });\n } else {\n state.value = value;\n state.state = FULFILLED;\n notify(state, false);\n }\n } catch (error) {\n internalReject({ done: false }, error, state);\n }\n};\n\n// constructor polyfill\nif (FORCED) {\n // 25.4.3.1 Promise(executor)\n PromiseConstructor = function Promise(executor) {\n anInstance(this, PromiseConstructor, PROMISE);\n aFunction(executor);\n Internal.call(this);\n var state = getInternalState(this);\n try {\n executor(bind(internalResolve, state), bind(internalReject, state));\n } catch (error) {\n internalReject(state, error);\n }\n };\n PromiseConstructorPrototype = PromiseConstructor.prototype;\n // eslint-disable-next-line no-unused-vars -- required for `.length`\n Internal = function Promise(executor) {\n setInternalState(this, {\n type: PROMISE,\n done: false,\n notified: false,\n parent: false,\n reactions: [],\n rejection: false,\n state: PENDING,\n value: undefined\n });\n };\n Internal.prototype = redefineAll(PromiseConstructorPrototype, {\n // `Promise.prototype.then` method\n // https://tc39.es/ecma262/#sec-promise.prototype.then\n then: function then(onFulfilled, onRejected) {\n var state = getInternalPromiseState(this);\n var reaction = newPromiseCapability(speciesConstructor(this, PromiseConstructor));\n reaction.ok = typeof onFulfilled == 'function' ? onFulfilled : true;\n reaction.fail = typeof onRejected == 'function' && onRejected;\n reaction.domain = IS_NODE ? process.domain : undefined;\n state.parent = true;\n state.reactions.push(reaction);\n if (state.state != PENDING) notify(state, false);\n return reaction.promise;\n },\n // `Promise.prototype.catch` method\n // https://tc39.es/ecma262/#sec-promise.prototype.catch\n 'catch': function (onRejected) {\n return this.then(undefined, onRejected);\n }\n });\n OwnPromiseCapability = function () {\n var promise = new Internal();\n var state = getInternalState(promise);\n this.promise = promise;\n this.resolve = bind(internalResolve, state);\n this.reject = bind(internalReject, state);\n };\n newPromiseCapabilityModule.f = newPromiseCapability = function (C) {\n return C === PromiseConstructor || C === PromiseWrapper\n ? new OwnPromiseCapability(C)\n : newGenericPromiseCapability(C);\n };\n\n if (!IS_PURE && typeof NativePromise == 'function' && NativePromisePrototype !== Object.prototype) {\n nativeThen = NativePromisePrototype.then;\n\n if (!SUBCLASSING) {\n // make `Promise#then` return a polyfilled `Promise` for native promise-based APIs\n redefine(NativePromisePrototype, 'then', function then(onFulfilled, onRejected) {\n var that = this;\n return new PromiseConstructor(function (resolve, reject) {\n nativeThen.call(that, resolve, reject);\n }).then(onFulfilled, onRejected);\n // https://github.com/zloirock/core-js/issues/640\n }, { unsafe: true });\n\n // makes sure that native promise-based APIs `Promise#catch` properly works with patched `Promise#then`\n redefine(NativePromisePrototype, 'catch', PromiseConstructorPrototype['catch'], { unsafe: true });\n }\n\n // make `.constructor === Promise` work for native promise-based APIs\n try {\n delete NativePromisePrototype.constructor;\n } catch (error) { /* empty */ }\n\n // make `instanceof Promise` work for native promise-based APIs\n if (setPrototypeOf) {\n setPrototypeOf(NativePromisePrototype, PromiseConstructorPrototype);\n }\n }\n}\n\n$({ global: true, wrap: true, forced: FORCED }, {\n Promise: PromiseConstructor\n});\n\nsetToStringTag(PromiseConstructor, PROMISE, false, true);\nsetSpecies(PROMISE);\n\nPromiseWrapper = getBuiltIn(PROMISE);\n\n// statics\n$({ target: PROMISE, stat: true, forced: FORCED }, {\n // `Promise.reject` method\n // https://tc39.es/ecma262/#sec-promise.reject\n reject: function reject(r) {\n var capability = newPromiseCapability(this);\n capability.reject.call(undefined, r);\n return capability.promise;\n }\n});\n\n$({ target: PROMISE, stat: true, forced: IS_PURE || FORCED }, {\n // `Promise.resolve` method\n // https://tc39.es/ecma262/#sec-promise.resolve\n resolve: function resolve(x) {\n return promiseResolve(IS_PURE && this === PromiseWrapper ? PromiseConstructor : this, x);\n }\n});\n\n$({ target: PROMISE, stat: true, forced: INCORRECT_ITERATION }, {\n // `Promise.all` method\n // https://tc39.es/ecma262/#sec-promise.all\n all: function all(iterable) {\n var C = this;\n var capability = newPromiseCapability(C);\n var resolve = capability.resolve;\n var reject = capability.reject;\n var result = perform(function () {\n var $promiseResolve = aFunction(C.resolve);\n var values = [];\n var counter = 0;\n var remaining = 1;\n iterate(iterable, function (promise) {\n var index = counter++;\n var alreadyCalled = false;\n values.push(undefined);\n remaining++;\n $promiseResolve.call(C, promise).then(function (value) {\n if (alreadyCalled) return;\n alreadyCalled = true;\n values[index] = value;\n --remaining || resolve(values);\n }, reject);\n });\n --remaining || resolve(values);\n });\n if (result.error) reject(result.value);\n return capability.promise;\n },\n // `Promise.race` method\n // https://tc39.es/ecma262/#sec-promise.race\n race: function race(iterable) {\n var C = this;\n var capability = newPromiseCapability(C);\n var reject = capability.reject;\n var result = perform(function () {\n var $promiseResolve = aFunction(C.resolve);\n iterate(iterable, function (promise) {\n $promiseResolve.call(C, promise).then(capability.resolve, reject);\n });\n });\n if (result.error) reject(result.value);\n return capability.promise;\n }\n});\n","var redefine = require('../internals/redefine');\n\nmodule.exports = function (target, src, options) {\n for (var key in src) {\n if (options && options.unsafe && target[key]) target[key] = src[key];\n else redefine(target, key, src[key], options);\n } return target;\n};\n","'use strict';\nvar TO_STRING_TAG_SUPPORT = require('../internals/to-string-tag-support');\nvar classof = require('../internals/classof');\n\n// `Object.prototype.toString` method implementation\n// https://tc39.es/ecma262/#sec-object.prototype.tostring\nmodule.exports = TO_STRING_TAG_SUPPORT ? {}.toString : function toString() {\n return '[object ' + classof(this) + ']';\n};\n","'use strict';\nvar getBuiltIn = require('../internals/get-built-in');\nvar definePropertyModule = require('../internals/object-define-property');\nvar wellKnownSymbol = require('../internals/well-known-symbol');\nvar DESCRIPTORS = require('../internals/descriptors');\n\nvar SPECIES = wellKnownSymbol('species');\n\nmodule.exports = function (CONSTRUCTOR_NAME) {\n var Constructor = getBuiltIn(CONSTRUCTOR_NAME);\n var defineProperty = definePropertyModule.f;\n\n if (DESCRIPTORS && Constructor && !Constructor[SPECIES]) {\n defineProperty(Constructor, SPECIES, {\n configurable: true,\n get: function () { return this; }\n });\n }\n};\n","module.exports = function (it, Constructor, name) {\n if (!(it instanceof Constructor)) {\n throw TypeError('Incorrect ' + (name ? name + ' ' : '') + 'invocation');\n } return it;\n};\n","var wellKnownSymbol = require('../internals/well-known-symbol');\n\nvar ITERATOR = wellKnownSymbol('iterator');\nvar SAFE_CLOSING = false;\n\ntry {\n var called = 0;\n var iteratorWithReturn = {\n next: function () {\n return { done: !!called++ };\n },\n 'return': function () {\n SAFE_CLOSING = true;\n }\n };\n iteratorWithReturn[ITERATOR] = function () {\n return this;\n };\n // eslint-disable-next-line es/no-array-from, no-throw-literal -- required for testing\n Array.from(iteratorWithReturn, function () { throw 2; });\n} catch (error) { /* empty */ }\n\nmodule.exports = function (exec, SKIP_CLOSING) {\n if (!SKIP_CLOSING && !SAFE_CLOSING) return false;\n var ITERATION_SUPPORT = false;\n try {\n var object = {};\n object[ITERATOR] = function () {\n return {\n next: function () {\n return { done: ITERATION_SUPPORT = true };\n }\n };\n };\n exec(object);\n } catch (error) { /* empty */ }\n return ITERATION_SUPPORT;\n};\n","var global = require('../internals/global');\nvar getOwnPropertyDescriptor = require('../internals/object-get-own-property-descriptor').f;\nvar macrotask = require('../internals/task').set;\nvar IS_IOS = require('../internals/engine-is-ios');\nvar IS_WEBOS_WEBKIT = require('../internals/engine-is-webos-webkit');\nvar IS_NODE = require('../internals/engine-is-node');\n\nvar MutationObserver = global.MutationObserver || global.WebKitMutationObserver;\nvar document = global.document;\nvar process = global.process;\nvar Promise = global.Promise;\n// Node.js 11 shows ExperimentalWarning on getting `queueMicrotask`\nvar queueMicrotaskDescriptor = getOwnPropertyDescriptor(global, 'queueMicrotask');\nvar queueMicrotask = queueMicrotaskDescriptor && queueMicrotaskDescriptor.value;\n\nvar flush, head, last, notify, toggle, node, promise, then;\n\n// modern engines have queueMicrotask method\nif (!queueMicrotask) {\n flush = function () {\n var parent, fn;\n if (IS_NODE && (parent = process.domain)) parent.exit();\n while (head) {\n fn = head.fn;\n head = head.next;\n try {\n fn();\n } catch (error) {\n if (head) notify();\n else last = undefined;\n throw error;\n }\n } last = undefined;\n if (parent) parent.enter();\n };\n\n // browsers with MutationObserver, except iOS - https://github.com/zloirock/core-js/issues/339\n // also except WebOS Webkit https://github.com/zloirock/core-js/issues/898\n if (!IS_IOS && !IS_NODE && !IS_WEBOS_WEBKIT && MutationObserver && document) {\n toggle = true;\n node = document.createTextNode('');\n new MutationObserver(flush).observe(node, { characterData: true });\n notify = function () {\n node.data = toggle = !toggle;\n };\n // environments with maybe non-completely correct, but existent Promise\n } else if (Promise && Promise.resolve) {\n // Promise.resolve without an argument throws an error in LG WebOS 2\n promise = Promise.resolve(undefined);\n // workaround of WebKit ~ iOS Safari 10.1 bug\n promise.constructor = Promise;\n then = promise.then;\n notify = function () {\n then.call(promise, flush);\n };\n // Node.js without promises\n } else if (IS_NODE) {\n notify = function () {\n process.nextTick(flush);\n };\n // for other environments - macrotask based on:\n // - setImmediate\n // - MessageChannel\n // - window.postMessag\n // - onreadystatechange\n // - setTimeout\n } else {\n notify = function () {\n // strange IE + webpack dev server bug - use .call(global)\n macrotask.call(global, flush);\n };\n }\n}\n\nmodule.exports = queueMicrotask || function (fn) {\n var task = { fn: fn, next: undefined };\n if (last) last.next = task;\n if (!head) {\n head = task;\n notify();\n } last = task;\n};\n","var userAgent = require('../internals/engine-user-agent');\n\nmodule.exports = /web0s(?!.*chrome)/i.test(userAgent);\n","var global = require('../internals/global');\n\nmodule.exports = function (a, b) {\n var console = global.console;\n if (console && console.error) {\n arguments.length === 1 ? console.error(a) : console.error(a, b);\n }\n};\n","var global = require('../internals/global');\nvar inspectSource = require('../internals/inspect-source');\n\nvar WeakMap = global.WeakMap;\n\nmodule.exports = typeof WeakMap === 'function' && /native code/.test(inspectSource(WeakMap));\n","module.exports = typeof window == 'object';\n","'use strict';\nvar $ = require('../internals/export');\nvar IS_PURE = require('../internals/is-pure');\nvar NativePromise = require('../internals/native-promise-constructor');\nvar fails = require('../internals/fails');\nvar getBuiltIn = require('../internals/get-built-in');\nvar speciesConstructor = require('../internals/species-constructor');\nvar promiseResolve = require('../internals/promise-resolve');\nvar redefine = require('../internals/redefine');\n\n// Safari bug https://bugs.webkit.org/show_bug.cgi?id=200829\nvar NON_GENERIC = !!NativePromise && fails(function () {\n NativePromise.prototype['finally'].call({ then: function () { /* empty */ } }, function () { /* empty */ });\n});\n\n// `Promise.prototype.finally` method\n// https://tc39.es/ecma262/#sec-promise.prototype.finally\n$({ target: 'Promise', proto: true, real: true, forced: NON_GENERIC }, {\n 'finally': function (onFinally) {\n var C = speciesConstructor(this, getBuiltIn('Promise'));\n var isFunction = typeof onFinally == 'function';\n return this.then(\n isFunction ? function (x) {\n return promiseResolve(C, onFinally()).then(function () { return x; });\n } : onFinally,\n isFunction ? function (e) {\n return promiseResolve(C, onFinally()).then(function () { throw e; });\n } : onFinally\n );\n }\n});\n\n// makes sure that native promise-based APIs `Promise#finally` properly works with patched `Promise#then`\nif (!IS_PURE && typeof NativePromise == 'function') {\n var method = getBuiltIn('Promise').prototype['finally'];\n if (NativePromise.prototype['finally'] !== method) {\n redefine(NativePromise.prototype, 'finally', method, { unsafe: true });\n }\n}\n","'use strict';\nvar charAt = require('../internals/string-multibyte').charAt;\nvar InternalStateModule = require('../internals/internal-state');\nvar defineIterator = require('../internals/define-iterator');\n\nvar STRING_ITERATOR = 'String Iterator';\nvar setInternalState = InternalStateModule.set;\nvar getInternalState = InternalStateModule.getterFor(STRING_ITERATOR);\n\n// `String.prototype[@@iterator]` method\n// https://tc39.es/ecma262/#sec-string.prototype-@@iterator\ndefineIterator(String, 'String', function (iterated) {\n setInternalState(this, {\n type: STRING_ITERATOR,\n string: String(iterated),\n index: 0\n });\n// `%StringIteratorPrototype%.next` method\n// https://tc39.es/ecma262/#sec-%stringiteratorprototype%.next\n}, function next() {\n var state = getInternalState(this);\n var string = state.string;\n var index = state.index;\n var point;\n if (index >= string.length) return { value: undefined, done: true };\n point = charAt(string, index);\n state.index += point.length;\n return { value: point, done: false };\n});\n","var toInteger = require('../internals/to-integer');\nvar requireObjectCoercible = require('../internals/require-object-coercible');\n\n// `String.prototype.{ codePointAt, at }` methods implementation\nvar createMethod = function (CONVERT_TO_STRING) {\n return function ($this, pos) {\n var S = String(requireObjectCoercible($this));\n var position = toInteger(pos);\n var size = S.length;\n var first, second;\n if (position < 0 || position >= size) return CONVERT_TO_STRING ? '' : undefined;\n first = S.charCodeAt(position);\n return first < 0xD800 || first > 0xDBFF || position + 1 === size\n || (second = S.charCodeAt(position + 1)) < 0xDC00 || second > 0xDFFF\n ? CONVERT_TO_STRING ? S.charAt(position) : first\n : CONVERT_TO_STRING ? S.slice(position, position + 2) : (first - 0xD800 << 10) + (second - 0xDC00) + 0x10000;\n };\n};\n\nmodule.exports = {\n // `String.prototype.codePointAt` method\n // https://tc39.es/ecma262/#sec-string.prototype.codepointat\n codeAt: createMethod(false),\n // `String.prototype.at` method\n // https://github.com/mathiasbynens/String.prototype.at\n charAt: createMethod(true)\n};\n","'use strict';\nvar IteratorPrototype = require('../internals/iterators-core').IteratorPrototype;\nvar create = require('../internals/object-create');\nvar createPropertyDescriptor = require('../internals/create-property-descriptor');\nvar setToStringTag = require('../internals/set-to-string-tag');\nvar Iterators = require('../internals/iterators');\n\nvar returnThis = function () { return this; };\n\nmodule.exports = function (IteratorConstructor, NAME, next) {\n var TO_STRING_TAG = NAME + ' Iterator';\n IteratorConstructor.prototype = create(IteratorPrototype, { next: createPropertyDescriptor(1, next) });\n setToStringTag(IteratorConstructor, TO_STRING_TAG, false, true);\n Iterators[TO_STRING_TAG] = returnThis;\n return IteratorConstructor;\n};\n","require('./es.array.iterator');\nvar DOMIterables = require('../internals/dom-iterables');\nvar global = require('../internals/global');\nvar classof = require('../internals/classof');\nvar createNonEnumerableProperty = require('../internals/create-non-enumerable-property');\nvar Iterators = require('../internals/iterators');\nvar wellKnownSymbol = require('../internals/well-known-symbol');\n\nvar TO_STRING_TAG = wellKnownSymbol('toStringTag');\n\nfor (var COLLECTION_NAME in DOMIterables) {\n var Collection = global[COLLECTION_NAME];\n var CollectionPrototype = Collection && Collection.prototype;\n if (CollectionPrototype && classof(CollectionPrototype) !== TO_STRING_TAG) {\n createNonEnumerableProperty(CollectionPrototype, TO_STRING_TAG, COLLECTION_NAME);\n }\n Iterators[COLLECTION_NAME] = Iterators.Array;\n}\n","'use strict';\nvar toIndexedObject = require('../internals/to-indexed-object');\nvar addToUnscopables = require('../internals/add-to-unscopables');\nvar Iterators = require('../internals/iterators');\nvar InternalStateModule = require('../internals/internal-state');\nvar defineIterator = require('../internals/define-iterator');\n\nvar ARRAY_ITERATOR = 'Array Iterator';\nvar setInternalState = InternalStateModule.set;\nvar getInternalState = InternalStateModule.getterFor(ARRAY_ITERATOR);\n\n// `Array.prototype.entries` method\n// https://tc39.es/ecma262/#sec-array.prototype.entries\n// `Array.prototype.keys` method\n// https://tc39.es/ecma262/#sec-array.prototype.keys\n// `Array.prototype.values` method\n// https://tc39.es/ecma262/#sec-array.prototype.values\n// `Array.prototype[@@iterator]` method\n// https://tc39.es/ecma262/#sec-array.prototype-@@iterator\n// `CreateArrayIterator` internal method\n// https://tc39.es/ecma262/#sec-createarrayiterator\nmodule.exports = defineIterator(Array, 'Array', function (iterated, kind) {\n setInternalState(this, {\n type: ARRAY_ITERATOR,\n target: toIndexedObject(iterated), // target\n index: 0, // next index\n kind: kind // kind\n });\n// `%ArrayIteratorPrototype%.next` method\n// https://tc39.es/ecma262/#sec-%arrayiteratorprototype%.next\n}, function () {\n var state = getInternalState(this);\n var target = state.target;\n var kind = state.kind;\n var index = state.index++;\n if (!target || index >= target.length) {\n state.target = undefined;\n return { value: undefined, done: true };\n }\n if (kind == 'keys') return { value: index, done: false };\n if (kind == 'values') return { value: target[index], done: false };\n return { value: [index, target[index]], done: false };\n}, 'values');\n\n// argumentsList[@@iterator] is %ArrayProto_values%\n// https://tc39.es/ecma262/#sec-createunmappedargumentsobject\n// https://tc39.es/ecma262/#sec-createmappedargumentsobject\nIterators.Arguments = Iterators.Array;\n\n// https://tc39.es/ecma262/#sec-array.prototype-@@unscopables\naddToUnscopables('keys');\naddToUnscopables('values');\naddToUnscopables('entries');\n","module.exports = function () { /* empty */ };\n","// iterable DOM collections\n// flag - `iterable` interface - 'entries', 'keys', 'values', 'forEach' methods\nmodule.exports = {\n CSSRuleList: 0,\n CSSStyleDeclaration: 0,\n CSSValueList: 0,\n ClientRectList: 0,\n DOMRectList: 0,\n DOMStringList: 0,\n DOMTokenList: 1,\n DataTransferItemList: 0,\n FileList: 0,\n HTMLAllCollection: 0,\n HTMLCollection: 0,\n HTMLFormElement: 0,\n HTMLSelectElement: 0,\n MediaList: 0,\n MimeTypeArray: 0,\n NamedNodeMap: 0,\n NodeList: 1,\n PaintRequestList: 0,\n Plugin: 0,\n PluginArray: 0,\n SVGLengthList: 0,\n SVGNumberList: 0,\n SVGPathSegList: 0,\n SVGPointList: 0,\n SVGStringList: 0,\n SVGTransformList: 0,\n SourceBufferList: 0,\n StyleSheetList: 0,\n TextTrackCueList: 0,\n TextTrackList: 0,\n TouchList: 0\n};\n","// TODO: Remove from `core-js@4`\nrequire('./es.aggregate-error');\n","// TODO: Remove from `core-js@4`\nrequire('./es.promise.all-settled.js');\n","'use strict';\nvar $ = require('../internals/export');\nvar newPromiseCapabilityModule = require('../internals/new-promise-capability');\nvar perform = require('../internals/perform');\n\n// `Promise.try` method\n// https://github.com/tc39/proposal-promise-try\n$({ target: 'Promise', stat: true }, {\n 'try': function (callbackfn) {\n var promiseCapability = newPromiseCapabilityModule.f(this);\n var result = perform(callbackfn);\n (result.error ? promiseCapability.reject : promiseCapability.resolve)(result.value);\n return promiseCapability.promise;\n }\n});\n","// TODO: Remove from `core-js@4`\nrequire('./es.promise.any');\n","import snippet from 'tui-code-snippet';\nimport { getSelector, assignmentForDestroy, cls, getHistoryTitle, isSilentCommand } from '@/util';\nimport {\n ZOOM_HELP_MENUS,\n COMMAND_HELP_MENUS,\n DELETE_HELP_MENUS,\n eventNames,\n HELP_MENUS,\n} from '@/consts';\nimport mainContainer from '@/ui/template/mainContainer';\nimport controls from '@/ui/template/controls';\n\nimport Theme from '@/ui/theme/theme';\nimport Shape from '@/ui/shape';\nimport Crop from '@/ui/crop';\nimport Resize from '@/ui/resize';\nimport Flip from '@/ui/flip';\nimport Rotate from '@/ui/rotate';\nimport Text from '@/ui/text';\nimport Mask from '@/ui/mask';\nimport Icon from '@/ui/icon';\nimport Draw from '@/ui/draw';\nimport Filter from '@/ui/filter';\nimport History from '@/ui/history';\nimport Locale from '@/ui/locale/locale';\n\nconst SUB_UI_COMPONENT = {\n Shape,\n Crop,\n Resize,\n Flip,\n Rotate,\n Text,\n Mask,\n Icon,\n Draw,\n Filter,\n};\n\nconst { CustomEvents } = snippet;\n\nconst BI_EXPRESSION_MINSIZE_WHEN_TOP_POSITION = '1300';\nconst HISTORY_MENU = 'history';\nconst HISTORY_PANEL_CLASS_NAME = 'tie-panel-history';\n\nconst CLASS_NAME_ON = 'on';\nconst ZOOM_BUTTON_TYPE = {\n ZOOM_IN: 'zoomIn',\n HAND: 'hand',\n};\n\n/**\n * Default UI Class\n * @class\n * @param {string|HTMLElement} element - Wrapper's element or selector\n * @param {Object} [options] - Ui setting options\n * @param {number} options.loadImage - Init default load image\n * @param {number} options.initMenu - Init start menu\n * @param {Boolean} [options.menuBarPosition=bottom] - Let\n * @param {Boolean} [options.applyCropSelectionStyle=false] - Let\n * @param {Boolean} [options.usageStatistics=false] - Use statistics or not\n * @param {Object} [options.uiSize] - ui size of editor\n * @param {string} options.uiSize.width - width of ui\n * @param {string} options.uiSize.height - height of ui\n * @param {Object} actions - ui action instance\n */\nclass Ui {\n constructor(element, options, actions) {\n this.options = this._initializeOption(options);\n this._actions = actions;\n this.submenu = false;\n this.imageSize = {};\n this.uiSize = {};\n this._locale = new Locale(this.options.locale);\n this.theme = new Theme(this.options.theme);\n this.eventHandler = {};\n this._submenuChangeTransection = false;\n this._selectedElement = null;\n this._mainElement = null;\n this._editorElementWrap = null;\n this._editorElement = null;\n this._menuBarElement = null;\n this._subMenuElement = null;\n this._makeUiElement(element);\n this._setUiSize();\n this._initMenuEvent = false;\n\n this._makeSubMenu();\n\n this._attachHistoryEvent();\n this._attachZoomEvent();\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeUiEvent();\n this._destroyAllMenu();\n this._selectedElement.innerHTML = '';\n\n assignmentForDestroy(this);\n }\n\n /**\n * Set Default Selection for includeUI\n * @param {Object} option - imageEditor options\n * @returns {Object} - extends selectionStyle option\n * @ignore\n */\n setUiDefaultSelectionStyle(option) {\n return snippet.extend(\n {\n applyCropSelectionStyle: true,\n applyGroupSelectionStyle: true,\n selectionStyle: {\n cornerStyle: 'circle',\n cornerSize: 16,\n cornerColor: '#fff',\n cornerStrokeColor: '#fff',\n transparentCorners: false,\n lineWidth: 2,\n borderColor: '#fff',\n },\n },\n option\n );\n }\n\n /**\n * Change editor size\n * @param {Object} resizeInfo - ui & image size info\n * @param {Object} [resizeInfo.uiSize] - image size dimension\n * @param {string} resizeInfo.uiSize.width - ui width\n * @param {string} resizeInfo.uiSize.height - ui height\n * @param {Object} [resizeInfo.imageSize] - image size dimension\n * @param {Number} resizeInfo.imageSize.oldWidth - old width\n * @param {Number} resizeInfo.imageSize.oldHeight - old height\n * @param {Number} resizeInfo.imageSize.newWidth - new width\n * @param {Number} resizeInfo.imageSize.newHeight - new height\n * @example\n * // Change the image size and ui size, and change the affected ui state together.\n * imageEditor.ui.resizeEditor({\n * imageSize: {oldWidth: 100, oldHeight: 100, newWidth: 700, newHeight: 700},\n * uiSize: {width: 1000, height: 1000}\n * });\n * @example\n * // Apply the ui state while preserving the previous attribute (for example, if responsive Ui)\n * imageEditor.ui.resizeEditor();\n */\n resizeEditor({ uiSize, imageSize = this.imageSize } = {}) {\n if (imageSize !== this.imageSize) {\n this.imageSize = imageSize;\n }\n if (uiSize) {\n this._setUiSize(uiSize);\n }\n\n const { width, height } = this._getCanvasMaxDimension();\n const editorElementStyle = this._editorElement.style;\n const { menuBarPosition } = this.options;\n\n editorElementStyle.height = `${height}px`;\n editorElementStyle.width = `${width}px`;\n\n this._setEditorPosition(menuBarPosition);\n\n this._editorElementWrap.style.bottom = `0px`;\n this._editorElementWrap.style.top = `0px`;\n this._editorElementWrap.style.left = `0px`;\n this._editorElementWrap.style.width = `100%`;\n\n const selectElementClassList = this._selectedElement.classList;\n\n if (\n menuBarPosition === 'top' &&\n this._selectedElement.offsetWidth < BI_EXPRESSION_MINSIZE_WHEN_TOP_POSITION\n ) {\n selectElementClassList.add('tui-image-editor-top-optimization');\n } else {\n selectElementClassList.remove('tui-image-editor-top-optimization');\n }\n }\n\n /**\n * Toggle zoom button status\n * @param {string} type - type of zoom button\n */\n toggleZoomButtonStatus(type) {\n const targetClassList = this._buttonElements[type].classList;\n\n targetClassList.toggle(CLASS_NAME_ON);\n\n if (type === ZOOM_BUTTON_TYPE.ZOOM_IN) {\n this._buttonElements[ZOOM_BUTTON_TYPE.HAND].classList.remove(CLASS_NAME_ON);\n } else {\n this._buttonElements[ZOOM_BUTTON_TYPE.ZOOM_IN].classList.remove(CLASS_NAME_ON);\n }\n }\n\n /**\n * Turn off zoom-in button status\n */\n offZoomInButtonStatus() {\n const zoomInClassList = this._buttonElements[ZOOM_BUTTON_TYPE.ZOOM_IN].classList;\n\n zoomInClassList.remove(CLASS_NAME_ON);\n }\n\n /**\n * Change hand button status\n * @param {boolean} enabled - status to change\n */\n changeHandButtonStatus(enabled) {\n const handClassList = this._buttonElements[ZOOM_BUTTON_TYPE.HAND].classList;\n\n handClassList[enabled ? 'add' : 'remove'](CLASS_NAME_ON);\n }\n\n /**\n * Change help button status\n * @param {string} buttonType - target button type\n * @param {Boolean} enableStatus - enabled status\n * @ignore\n */\n changeHelpButtonEnabled(buttonType, enableStatus) {\n const buttonClassList = this._buttonElements[buttonType].classList;\n\n buttonClassList[enableStatus ? 'add' : 'remove']('enabled');\n }\n\n /**\n * Change delete button status\n * @param {Object} [options] - Ui setting options\n * @param {object} [options.loadImage] - Init default load image\n * @param {string} [options.initMenu] - Init start menu\n * @param {string} [options.menuBarPosition=bottom] - Let\n * @param {boolean} [options.applyCropSelectionStyle=false] - Let\n * @param {boolean} [options.usageStatistics=false] - Send statistics ping or not\n * @returns {Object} initialize option\n * @private\n */\n _initializeOption(options) {\n return snippet.extend(\n {\n loadImage: {\n path: '',\n name: '',\n },\n locale: {},\n menuIconPath: '',\n menu: [\n 'resize',\n 'crop',\n 'flip',\n 'rotate',\n 'draw',\n 'shape',\n 'icon',\n 'text',\n 'mask',\n 'filter',\n ],\n initMenu: '',\n uiSize: {\n width: '100%',\n height: '100%',\n },\n menuBarPosition: 'bottom',\n },\n options\n );\n }\n\n /**\n * Set ui container size\n * @param {Object} uiSize - ui dimension\n * @param {string} uiSize.width - css width property\n * @param {string} uiSize.height - css height property\n * @private\n */\n _setUiSize(uiSize = this.options.uiSize) {\n const elementDimension = this._selectedElement.style;\n elementDimension.width = uiSize.width;\n elementDimension.height = uiSize.height;\n }\n\n /**\n * Make submenu dom element\n * @private\n */\n _makeSubMenu() {\n snippet.forEach(this.options.menu, (menuName) => {\n const SubComponentClass =\n SUB_UI_COMPONENT[menuName.replace(/^[a-z]/, ($0) => $0.toUpperCase())];\n\n // make menu element\n this._makeMenuElement(menuName);\n\n // menu btn element\n this._buttonElements[menuName] = this._menuBarElement.querySelector(`.tie-btn-${menuName}`);\n\n // submenu ui instance\n this[menuName] = new SubComponentClass(this._subMenuElement, {\n locale: this._locale,\n makeSvgIcon: this.theme.makeMenSvgIconSet.bind(this.theme),\n menuBarPosition: this.options.menuBarPosition,\n usageStatistics: this.options.usageStatistics,\n });\n });\n }\n\n /**\n * Attach history event\n * @private\n */\n _attachHistoryEvent() {\n this.on(eventNames.EXECUTE_COMMAND, this._addHistory.bind(this));\n this.on(eventNames.AFTER_UNDO, this._selectPrevHistory.bind(this));\n this.on(eventNames.AFTER_REDO, this._selectNextHistory.bind(this));\n }\n\n /**\n * Attach zoom event\n * @private\n */\n _attachZoomEvent() {\n this.on(eventNames.HAND_STARTED, () => {\n this.offZoomInButtonStatus();\n this.changeHandButtonStatus(true);\n });\n this.on(eventNames.HAND_STOPPED, () => this.changeHandButtonStatus(false));\n }\n\n /**\n * Make primary ui dom element\n * @param {string|HTMLElement} element - Wrapper's element or selector\n * @private\n */\n _makeUiElement(element) {\n let selectedElement;\n\n window.snippet = snippet;\n\n if (element.nodeType) {\n selectedElement = element;\n } else {\n selectedElement = document.querySelector(element);\n }\n const selector = getSelector(selectedElement);\n\n selectedElement.classList.add('tui-image-editor-container');\n selectedElement.innerHTML =\n controls({\n locale: this._locale,\n biImage: this.theme.getStyle('common.bi'),\n loadButtonStyle: this.theme.getStyle('loadButton'),\n downloadButtonStyle: this.theme.getStyle('downloadButton'),\n menuBarPosition: this.options.menuBarPosition,\n }) +\n mainContainer({\n locale: this._locale,\n biImage: this.theme.getStyle('common.bi'),\n commonStyle: this.theme.getStyle('common'),\n headerStyle: this.theme.getStyle('header'),\n loadButtonStyle: this.theme.getStyle('loadButton'),\n downloadButtonStyle: this.theme.getStyle('downloadButton'),\n submenuStyle: this.theme.getStyle('submenu'),\n });\n\n this._selectedElement = selectedElement;\n this._selectedElement.classList.add(this.options.menuBarPosition);\n\n this._mainElement = selector('.tui-image-editor-main');\n this._editorElementWrap = selector('.tui-image-editor-wrap');\n this._editorElement = selector('.tui-image-editor');\n this._helpMenuBarElement = selector('.tui-image-editor-help-menu');\n this._menuBarElement = selector('.tui-image-editor-menu');\n this._subMenuElement = selector('.tui-image-editor-submenu');\n this._buttonElements = {\n download: this._selectedElement.querySelectorAll('.tui-image-editor-download-btn'),\n load: this._selectedElement.querySelectorAll('.tui-image-editor-load-btn'),\n };\n\n this._addHelpMenus();\n\n this._historyMenu = new History(this._buttonElements[HISTORY_MENU], {\n locale: this._locale,\n makeSvgIcon: this.theme.makeMenSvgIconSet.bind(this.theme),\n });\n\n this._activateZoomMenus();\n }\n\n /**\n * Activate help menus for zoom.\n * @private\n */\n _activateZoomMenus() {\n snippet.forEach(ZOOM_HELP_MENUS, (menu) => {\n this.changeHelpButtonEnabled(menu, true);\n });\n }\n\n /**\n * make array for help menu output, including partitions.\n * @returns {Array}\n * @private\n */\n _makeHelpMenuWithPartition() {\n return [...ZOOM_HELP_MENUS, '', ...COMMAND_HELP_MENUS, '', ...DELETE_HELP_MENUS];\n }\n\n /**\n * Add help menu\n * @private\n */\n _addHelpMenus() {\n const helpMenuWithPartition = this._makeHelpMenuWithPartition();\n\n snippet.forEach(helpMenuWithPartition, (menuName) => {\n if (!menuName) {\n this._makeMenuPartitionElement();\n } else {\n this._makeMenuElement(menuName, ['normal', 'disabled', 'hover'], 'help');\n\n this._buttonElements[menuName] = this._helpMenuBarElement.querySelector(\n `.tie-btn-${menuName}`\n );\n }\n });\n }\n\n /**\n * Make menu partition element\n * @private\n */\n _makeMenuPartitionElement() {\n const partitionElement = document.createElement('li');\n const partitionInnerElement = document.createElement('div');\n partitionElement.className = cls('item');\n partitionInnerElement.className = cls('icpartition');\n partitionElement.appendChild(partitionInnerElement);\n\n this._helpMenuBarElement.appendChild(partitionElement);\n }\n\n /**\n * Make menu button element\n * @param {string} menuName - menu name\n * @param {Array} useIconTypes - Possible values are \\['normal', 'active', 'hover', 'disabled'\\]\n * @param {string} menuType - 'normal' or 'help'\n * @private\n */\n _makeMenuElement(menuName, useIconTypes = ['normal', 'active', 'hover'], menuType = 'normal') {\n const btnElement = document.createElement('li');\n const menuItemHtml = this.theme.makeMenSvgIconSet(useIconTypes, menuName);\n\n this._addTooltipAttribute(btnElement, menuName);\n btnElement.className = `tie-btn-${menuName} ${cls('item')} ${menuType}`;\n btnElement.innerHTML = menuItemHtml;\n\n if (menuType === 'normal') {\n this._menuBarElement.appendChild(btnElement);\n } else {\n this._helpMenuBarElement.appendChild(btnElement);\n }\n }\n\n /**\n * Add help action event\n * @private\n */\n _addHelpActionEvent() {\n snippet.forEach(HELP_MENUS, (helpName) => {\n this.eventHandler[helpName] = (event) => this._actions.main[helpName](event);\n this._buttonElements[helpName].addEventListener('click', this.eventHandler[helpName]);\n });\n }\n\n /**\n * Remove help action event\n * @private\n */\n _removeHelpActionEvent() {\n snippet.forEach(HELP_MENUS, (helpName) => {\n this._buttonElements[helpName].removeEventListener('click', this.eventHandler[helpName]);\n });\n }\n\n /**\n * Add history\n * @param {Command|string} command - command or command name\n */\n _addHistory(command) {\n if (!isSilentCommand(command)) {\n const historyTitle =\n typeof command === 'string' ? { name: command } : getHistoryTitle(command);\n\n this._historyMenu.add(historyTitle);\n }\n }\n\n /**\n * Init history\n */\n initHistory() {\n this._historyMenu.init();\n }\n\n /**\n * Clear history\n */\n clearHistory() {\n this._historyMenu.clear();\n }\n\n /**\n * Select prev history\n */\n _selectPrevHistory() {\n this._historyMenu.prev();\n }\n\n /**\n * Select next history\n */\n _selectNextHistory() {\n this._historyMenu.next();\n }\n\n /**\n * Toggle history menu\n * @param {object} event - event object\n */\n toggleHistoryMenu(event) {\n const { target } = event;\n const item = target.closest(`.${HISTORY_PANEL_CLASS_NAME}`);\n\n if (item) {\n return;\n }\n\n const historyButtonClassList = this._buttonElements[HISTORY_MENU].classList;\n\n historyButtonClassList.toggle('opened');\n }\n\n /**\n * Add attribute for menu tooltip\n * @param {HTMLElement} element - menu element\n * @param {string} tooltipName - tooltipName\n * @private\n */\n _addTooltipAttribute(element, tooltipName) {\n element.setAttribute(\n 'tooltip-content',\n this._locale.localize(tooltipName.replace(/^[a-z]/g, ($0) => $0.toUpperCase()))\n );\n }\n\n /**\n * Add download event\n * @private\n */\n _addDownloadEvent() {\n this.eventHandler.download = () => this._actions.main.download();\n snippet.forEach(this._buttonElements.download, (element) => {\n element.addEventListener('click', this.eventHandler.download);\n });\n }\n\n _removeDownloadEvent() {\n snippet.forEach(this._buttonElements.download, (element) => {\n element.removeEventListener('click', this.eventHandler.download);\n });\n }\n\n /**\n * Add load event\n * @private\n */\n _addLoadEvent() {\n this.eventHandler.loadImage = (event) => this._actions.main.load(event.target.files[0]);\n\n snippet.forEach(this._buttonElements.load, (element) => {\n element.addEventListener('change', this.eventHandler.loadImage);\n });\n }\n\n /**\n * Remove load event\n * @private\n */\n _removeLoadEvent() {\n snippet.forEach(this._buttonElements.load, (element) => {\n element.removeEventListener('change', this.eventHandler.loadImage);\n });\n }\n\n /**\n * Add menu event\n * @param {string} menuName - menu name\n * @private\n */\n _addMainMenuEvent(menuName) {\n this.eventHandler[menuName] = () => this.changeMenu(menuName);\n this._buttonElements[menuName].addEventListener('click', this.eventHandler[menuName]);\n }\n\n /**\n * Add menu event\n * @param {string} menuName - menu name\n * @private\n */\n _addSubMenuEvent(menuName) {\n this[menuName].addEvent(this._actions[menuName]);\n this[menuName].on(eventNames.INPUT_BOX_EDITING_STARTED, () =>\n this.fire(eventNames.INPUT_BOX_EDITING_STARTED)\n );\n this[menuName].on(eventNames.INPUT_BOX_EDITING_STOPPED, () =>\n this.fire(eventNames.INPUT_BOX_EDITING_STOPPED)\n );\n }\n\n /**\n * Add menu event\n * @private\n */\n _addMenuEvent() {\n snippet.forEach(this.options.menu, (menuName) => {\n this._addMainMenuEvent(menuName);\n this._addSubMenuEvent(menuName);\n });\n }\n\n /**\n * Remove menu event\n * @private\n */\n _removeMainMenuEvent() {\n snippet.forEach(this.options.menu, (menuName) => {\n this._buttonElements[menuName].removeEventListener('click', this.eventHandler[menuName]);\n this[menuName].off(eventNames.INPUT_BOX_EDITING_STARTED);\n this[menuName].off(eventNames.INPUT_BOX_EDITING_STOPPED);\n });\n }\n\n /**\n * Get editor area element\n * @returns {HTMLElement} editor area html element\n * @ignore\n */\n getEditorArea() {\n return this._editorElement;\n }\n\n /**\n * Add event for menu items\n * @ignore\n */\n activeMenuEvent() {\n if (this._initMenuEvent) {\n return;\n }\n\n this._addHelpActionEvent();\n this._addDownloadEvent();\n this._addMenuEvent();\n this._initMenu();\n this._historyMenu.addEvent(this._actions.history);\n this._initMenuEvent = true;\n }\n\n /**\n * Remove ui event\n * @private\n */\n _removeUiEvent() {\n this._removeHelpActionEvent();\n this._removeDownloadEvent();\n this._removeLoadEvent();\n this._removeMainMenuEvent();\n this._historyMenu.removeEvent();\n }\n\n /**\n * Destroy all menu instance\n * @private\n */\n _destroyAllMenu() {\n snippet.forEach(this.options.menu, (menuName) => {\n this[menuName].destroy();\n });\n\n this._historyMenu.destroy();\n }\n\n /**\n * Init canvas\n * @ignore\n */\n initCanvas() {\n const loadImageInfo = this._getLoadImage();\n if (loadImageInfo.path) {\n this._actions.main.initLoadImage(loadImageInfo.path, loadImageInfo.name).then(() => {\n this.activeMenuEvent();\n });\n }\n\n this._addLoadEvent();\n\n const gridVisual = document.createElement('div');\n\n gridVisual.className = cls('grid-visual');\n const grid = `\n \n \n \n
                      `;\n gridVisual.innerHTML = grid;\n this._editorContainerElement = this._editorElement.querySelector(\n '.tui-image-editor-canvas-container'\n );\n this._editorContainerElement.appendChild(gridVisual);\n }\n\n /**\n * get editor area element\n * @returns {Object} load image option\n * @private\n */\n _getLoadImage() {\n return this.options.loadImage;\n }\n\n /**\n * change menu\n * @param {string} menuName - menu name\n * @param {boolean} toggle - whether toogle or not\n * @param {boolean} discardSelection - discard selection\n * @ignore\n */\n changeMenu(menuName, toggle = true, discardSelection = true) {\n if (!this._submenuChangeTransection) {\n this._submenuChangeTransection = true;\n this._changeMenu(menuName, toggle, discardSelection);\n this._submenuChangeTransection = false;\n }\n }\n\n /**\n * change menu\n * @param {string} menuName - menu name\n * @param {boolean} toggle - whether toggle or not\n * @param {boolean} discardSelection - discard selection\n * @private\n */\n _changeMenu(menuName, toggle, discardSelection) {\n if (this.submenu) {\n this._buttonElements[this.submenu].classList.remove('active');\n this._mainElement.classList.remove(`tui-image-editor-menu-${this.submenu}`);\n if (discardSelection) {\n this._actions.main.discardSelection();\n }\n this._actions.main.changeSelectableAll(true);\n this[this.submenu].changeStandbyMode();\n }\n\n if (this.submenu === menuName && toggle) {\n this.submenu = null;\n } else {\n this._buttonElements[menuName].classList.add('active');\n this._mainElement.classList.add(`tui-image-editor-menu-${menuName}`);\n this.submenu = menuName;\n this[this.submenu].changeStartMode();\n }\n\n this.resizeEditor();\n }\n\n /**\n * Init menu\n * @private\n */\n _initMenu() {\n if (this.options.initMenu) {\n const evt = document.createEvent('MouseEvents');\n evt.initEvent('click', true, false);\n this._buttonElements[this.options.initMenu].dispatchEvent(evt);\n }\n\n if (this.icon) {\n this.icon.registerDefaultIcon();\n }\n }\n\n /**\n * Get canvas max Dimension\n * @returns {Object} - width & height of editor\n * @private\n */\n _getCanvasMaxDimension() {\n const { maxWidth, maxHeight } = this._editorContainerElement.style;\n const width = parseFloat(maxWidth);\n const height = parseFloat(maxHeight);\n\n return {\n width,\n height,\n };\n }\n\n /**\n * Set editor position\n * @param {string} menuBarPosition - top or right or bottom or left\n * @private\n */\n // eslint-disable-next-line complexity\n _setEditorPosition(menuBarPosition) {\n const { width, height } = this._getCanvasMaxDimension();\n const editorElementStyle = this._editorElement.style;\n let top = 0;\n let left = 0;\n\n if (this.submenu) {\n if (menuBarPosition === 'bottom') {\n if (height > this._editorElementWrap.scrollHeight - 150) {\n top = (height - this._editorElementWrap.scrollHeight) / 2;\n } else {\n top = (150 / 2) * -1;\n }\n } else if (menuBarPosition === 'top') {\n if (height > this._editorElementWrap.offsetHeight - 150) {\n top = 150 / 2 - (height - (this._editorElementWrap.offsetHeight - 150)) / 2;\n } else {\n top = 150 / 2;\n }\n } else if (menuBarPosition === 'left') {\n if (width > this._editorElementWrap.offsetWidth - 248) {\n left = 248 / 2 - (width - (this._editorElementWrap.offsetWidth - 248)) / 2;\n } else {\n left = 248 / 2;\n }\n } else if (menuBarPosition === 'right') {\n if (width > this._editorElementWrap.scrollWidth - 248) {\n left = (width - this._editorElementWrap.scrollWidth) / 2;\n } else {\n left = (248 / 2) * -1;\n }\n }\n }\n editorElementStyle.top = `${top}px`;\n editorElementStyle.left = `${left}px`;\n }\n}\n\nCustomEvents.mixin(Ui);\n\nexport default Ui;\n","export default ({\n locale,\n biImage,\n commonStyle,\n headerStyle,\n loadButtonStyle,\n downloadButtonStyle,\n submenuStyle,\n}) => `\n
                      \n
                      \n
                      \n \n
                      \n
                      \n
                      \n ${locale.localize('Load')}\n \n
                      \n \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n
                      \n`;\n","import { getHelpMenuBarPosition } from '@/util';\n\nexport default ({ locale, biImage, loadButtonStyle, downloadButtonStyle, menuBarPosition }) => `\n
                        \n
                        \n
                        \n \n
                        \n
                          \n\n
                          \n
                          \n ${locale.localize('Load')}\n \n
                          \n \n
                          \n
                          \n`;\n","import { extend, forEach, map } from 'tui-code-snippet';\nimport style from '@/ui/template/style';\nimport standardTheme from '@/ui/theme/standard';\nimport icon from '@svg/default.svg';\nimport { styleLoad } from '@/util';\n\n/**\n * Theme manager\n * @class\n * @param {Object} customTheme - custom theme\n * @ignore\n */\nclass Theme {\n constructor(customTheme) {\n this.styles = this._changeToObject(extend({}, standardTheme, customTheme));\n styleLoad(this._styleMaker());\n\n this._loadDefaultSvgIcon();\n }\n\n /**\n * Get a Style cssText or StyleObject\n * @param {string} type - style type\n * @returns {string|object} - cssText or StyleObject\n */\n // eslint-disable-next-line complexity\n getStyle(type) {\n let result = null;\n const firstProperty = type.replace(/\\..+$/, '');\n const option = this.styles[type];\n switch (type) {\n case 'common.bi':\n result = this.styles[type].image;\n break;\n case 'menu.icon':\n result = {\n active: this.styles[`${firstProperty}.activeIcon`],\n normal: this.styles[`${firstProperty}.normalIcon`],\n hover: this.styles[`${firstProperty}.hoverIcon`],\n disabled: this.styles[`${firstProperty}.disabledIcon`],\n };\n break;\n case 'submenu.icon':\n result = {\n active: this.styles[`${firstProperty}.activeIcon`],\n normal: this.styles[`${firstProperty}.normalIcon`],\n };\n break;\n case 'submenu.label':\n result = {\n active: this._makeCssText(this.styles[`${firstProperty}.activeLabel`]),\n normal: this._makeCssText(this.styles[`${firstProperty}.normalLabel`]),\n };\n break;\n case 'submenu.partition':\n result = {\n vertical: this._makeCssText(\n extend({}, option, { borderLeft: `1px solid ${option.color}` })\n ),\n horizontal: this._makeCssText(\n extend({}, option, { borderBottom: `1px solid ${option.color}` })\n ),\n };\n break;\n\n case 'range.disabledPointer':\n case 'range.disabledBar':\n case 'range.disabledSubbar':\n case 'range.pointer':\n case 'range.bar':\n case 'range.subbar':\n option.backgroundColor = option.color;\n result = this._makeCssText(option);\n break;\n default:\n result = this._makeCssText(option);\n break;\n }\n\n return result;\n }\n\n /**\n * Make css resource\n * @returns {string} - serialized css text\n * @private\n */\n _styleMaker() {\n const submenuLabelStyle = this.getStyle('submenu.label');\n const submenuPartitionStyle = this.getStyle('submenu.partition');\n\n return style({\n subMenuLabelActive: submenuLabelStyle.active,\n subMenuLabelNormal: submenuLabelStyle.normal,\n submenuPartitionVertical: submenuPartitionStyle.vertical,\n submenuPartitionHorizontal: submenuPartitionStyle.horizontal,\n biSize: this.getStyle('common.bisize'),\n subMenuRangeTitle: this.getStyle('range.title'),\n submenuRangePointer: this.getStyle('range.pointer'),\n submenuRangeBar: this.getStyle('range.bar'),\n submenuRangeSubbar: this.getStyle('range.subbar'),\n\n submenuDisabledRangePointer: this.getStyle('range.disabledPointer'),\n submenuDisabledRangeBar: this.getStyle('range.disabledBar'),\n submenuDisabledRangeSubbar: this.getStyle('range.disabledSubbar'),\n\n submenuRangeValue: this.getStyle('range.value'),\n submenuColorpickerTitle: this.getStyle('colorpicker.title'),\n submenuColorpickerButton: this.getStyle('colorpicker.button'),\n submenuCheckbox: this.getStyle('checkbox'),\n menuIconSize: this.getStyle('menu.iconSize'),\n submenuIconSize: this.getStyle('submenu.iconSize'),\n menuIconStyle: this.getStyle('menu.icon'),\n submenuIconStyle: this.getStyle('submenu.icon'),\n });\n }\n\n /**\n * Change to low dimensional object.\n * @param {object} styleOptions - style object of user interface\n * @returns {object} low level object for style apply\n * @private\n */\n _changeToObject(styleOptions) {\n const styleObject = {};\n forEach(styleOptions, (value, key) => {\n const keyExplode = key.match(/^(.+)\\.([a-z]+)$/i);\n const [, property, subProperty] = keyExplode;\n\n if (!styleObject[property]) {\n styleObject[property] = {};\n }\n styleObject[property][subProperty] = value;\n });\n\n return styleObject;\n }\n\n /**\n * Style object to Csstext serialize\n * @param {object} styleObject - style object\n * @returns {string} - css text string\n * @private\n */\n _makeCssText(styleObject) {\n const converterStack = [];\n\n forEach(styleObject, (value, key) => {\n if (['backgroundImage'].indexOf(key) > -1 && value !== 'none') {\n value = `url(${value})`;\n }\n\n converterStack.push(`${this._toUnderScore(key)}: ${value}`);\n });\n\n return converterStack.join(';');\n }\n\n /**\n * Camel key string to Underscore string\n * @param {string} targetString - change target\n * @returns {string}\n * @private\n */\n _toUnderScore(targetString) {\n return targetString.replace(/([A-Z])/g, ($0, $1) => `-${$1.toLowerCase()}`);\n }\n\n /**\n * Load default svg icon\n * @private\n */\n _loadDefaultSvgIcon() {\n if (!document.getElementById('tui-image-editor-svg-default-icons')) {\n const parser = new DOMParser();\n const dom = parser.parseFromString(icon, 'text/xml');\n\n document.body.appendChild(dom.documentElement);\n }\n }\n\n /**\n * Make className for svg icon\n * @param {string} iconType - normal' or 'active' or 'hover' or 'disabled\n * @param {boolean} isSubmenu - submenu icon or not.\n * @returns {string}\n * @private\n */\n _makeIconClassName(iconType, isSubmenu) {\n const iconStyleInfo = isSubmenu ? this.getStyle('submenu.icon') : this.getStyle('menu.icon');\n const { path, name } = iconStyleInfo[iconType];\n\n return path && name ? iconType : `${iconType} use-default`;\n }\n\n /**\n * Make svg use link path name\n * @param {string} iconType - normal' or 'active' or 'hover' or 'disabled\n * @param {boolean} isSubmenu - submenu icon or not.\n * @returns {string}\n * @private\n */\n _makeSvgIconPrefix(iconType, isSubmenu) {\n const iconStyleInfo = isSubmenu ? this.getStyle('submenu.icon') : this.getStyle('menu.icon');\n const { path, name } = iconStyleInfo[iconType];\n\n return path && name ? `${path}#${name}-` : '#';\n }\n\n /**\n * Make svg use link path name\n * @param {Array.} useIconTypes - normal' or 'active' or 'hover' or 'disabled\n * @param {string} menuName - menu name\n * @param {boolean} isSubmenu - submenu icon or not.\n * @returns {string}\n * @private\n */\n _makeSvgItem(useIconTypes, menuName, isSubmenu) {\n return map(useIconTypes, (iconType) => {\n const svgIconPrefix = this._makeSvgIconPrefix(iconType, isSubmenu);\n const iconName = this._toUnderScore(menuName);\n const svgIconClassName = this._makeIconClassName(iconType, isSubmenu);\n\n return ``;\n }).join('');\n }\n\n /**\n * Make svg icon set\n * @param {Array.} useIconTypes - normal' or 'active' or 'hover' or 'disabled\n * @param {string} menuName - menu name\n * @param {boolean} isSubmenu - submenu icon or not.\n * @returns {string}\n */\n makeMenSvgIconSet(useIconTypes, menuName, isSubmenu = false) {\n return `${this._makeSvgItem(\n useIconTypes,\n menuName,\n isSubmenu\n )}`;\n }\n}\n\nexport default Theme;\n","export default ({\n subMenuLabelActive,\n subMenuLabelNormal,\n subMenuRangeTitle,\n submenuPartitionVertical,\n submenuPartitionHorizontal,\n submenuCheckbox,\n submenuRangePointer,\n submenuRangeValue,\n submenuColorpickerTitle,\n submenuColorpickerButton,\n submenuRangeBar,\n submenuRangeSubbar,\n submenuDisabledRangePointer,\n submenuDisabledRangeBar,\n submenuDisabledRangeSubbar,\n submenuIconSize,\n menuIconSize,\n biSize,\n menuIconStyle,\n submenuIconStyle,\n}) => `\n .tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype=\"icon-bubble\"] label,\n .tie-icon-add-button.icon-heart .tui-image-editor-button[data-icontype=\"icon-heart\"] label,\n .tie-icon-add-button.icon-location .tui-image-editor-button[data-icontype=\"icon-location\"] label,\n .tie-icon-add-button.icon-polygon .tui-image-editor-button[data-icontype=\"icon-polygon\"] label,\n .tie-icon-add-button.icon-star .tui-image-editor-button[data-icontype=\"icon-star\"] label,\n .tie-icon-add-button.icon-star-2 .tui-image-editor-button[data-icontype=\"icon-star-2\"] label,\n .tie-icon-add-button.icon-arrow-3 .tui-image-editor-button[data-icontype=\"icon-arrow-3\"] label,\n .tie-icon-add-button.icon-arrow-2 .tui-image-editor-button[data-icontype=\"icon-arrow-2\"] label,\n .tie-icon-add-button.icon-arrow .tui-image-editor-button[data-icontype=\"icon-arrow\"] label,\n .tie-icon-add-button.icon-bubble .tui-image-editor-button[data-icontype=\"icon-bubble\"] label,\n .tie-draw-line-select-button.line .tui-image-editor-button.line label,\n .tie-draw-line-select-button.free .tui-image-editor-button.free label,\n .tie-flip-button.flipX .tui-image-editor-button.flipX label,\n .tie-flip-button.flipY .tui-image-editor-button.flipY label,\n .tie-flip-button.resetFlip .tui-image-editor-button.resetFlip label,\n .tie-crop-button .tui-image-editor-button.apply.active label,\n .tie-crop-preset-button .tui-image-editor-button.preset.active label,\n .tie-resize-button .tui-image-editor-button.apply.active label,\n .tie-resize-preset-button .tui-image-editor-button.preset.active label,\n .tie-shape-button.rect .tui-image-editor-button.rect label,\n .tie-shape-button.circle .tui-image-editor-button.circle label,\n .tie-shape-button.triangle .tui-image-editor-button.triangle label,\n .tie-text-effect-button .tui-image-editor-button.active label,\n .tie-text-align-button.tie-text-align-left .tui-image-editor-button.left label,\n .tie-text-align-button.tie-text-align-center .tui-image-editor-button.center label,\n .tie-text-align-button.tie-text-align-right .tui-image-editor-button.right label,\n .tie-mask-apply.apply.active .tui-image-editor-button.apply label,\n .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button:hover > label,\n .tui-image-editor-container .tui-image-editor-checkbox label > span {\n ${subMenuLabelActive}\n }\n .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button > label,\n .tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label,\n .tui-image-editor-container .tui-image-editor-range-wrap.tui-image-editor-newline.short label > span {\n ${subMenuLabelNormal}\n }\n .tui-image-editor-container .tui-image-editor-range-wrap label > span {\n ${subMenuRangeTitle}\n }\n .tui-image-editor-container .tui-image-editor-partition > div {\n ${submenuPartitionVertical}\n }\n .tui-image-editor-container.left .tui-image-editor-submenu .tui-image-editor-partition > div,\n .tui-image-editor-container.right .tui-image-editor-submenu .tui-image-editor-partition > div {\n ${submenuPartitionHorizontal}\n }\n .tui-image-editor-container .tui-image-editor-checkbox label > span:before {\n ${submenuCheckbox}\n }\n .tui-image-editor-container .tui-image-editor-checkbox label > input:checked + span:before {\n border: 0;\n }\n .tui-image-editor-container .tui-image-editor-virtual-range-pointer {\n ${submenuRangePointer}\n }\n .tui-image-editor-container .tui-image-editor-virtual-range-bar {\n ${submenuRangeBar}\n }\n .tui-image-editor-container .tui-image-editor-virtual-range-subbar {\n ${submenuRangeSubbar}\n }\n .tui-image-editor-container .tui-image-editor-disabled .tui-image-editor-virtual-range-pointer {\n ${submenuDisabledRangePointer}\n }\n .tui-image-editor-container .tui-image-editor-disabled .tui-image-editor-virtual-range-subbar {\n ${submenuDisabledRangeSubbar}\n }\n .tui-image-editor-container .tui-image-editor-disabled .tui-image-editor-virtual-range-bar {\n ${submenuDisabledRangeBar}\n }\n .tui-image-editor-container .tui-image-editor-range-value {\n ${submenuRangeValue}\n }\n .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button .color-picker-value + label {\n ${submenuColorpickerTitle}\n }\n .tui-image-editor-container .tui-image-editor-submenu .tui-image-editor-button .color-picker-value {\n ${submenuColorpickerButton}\n }\n .tui-image-editor-container .svg_ic-menu {\n ${menuIconSize}\n }\n .tui-image-editor-container .svg_ic-submenu {\n ${submenuIconSize}\n }\n .tui-image-editor-container .tui-image-editor-controls-logo > img,\n .tui-image-editor-container .tui-image-editor-header-logo > img {\n ${biSize}\n }\n .tui-image-editor-menu use.normal.use-default,\n .tui-image-editor-help-menu use.normal.use-default {\n fill-rule: evenodd;\n fill: ${menuIconStyle.normal.color};\n stroke: ${menuIconStyle.normal.color};\n }\n .tui-image-editor-menu use.active.use-default,\n .tui-image-editor-help-menu use.active.use-default {\n fill-rule: evenodd;\n fill: ${menuIconStyle.active.color};\n stroke: ${menuIconStyle.active.color};\n }\n .tui-image-editor-menu use.hover.use-default,\n .tui-image-editor-help-menu use.hover.use-default {\n fill-rule: evenodd;\n fill: ${menuIconStyle.hover.color};\n stroke: ${menuIconStyle.hover.color};\n }\n .tui-image-editor-menu use.disabled.use-default,\n .tui-image-editor-help-menu use.disabled.use-default {\n fill-rule: evenodd;\n fill: ${menuIconStyle.disabled.color};\n stroke: ${menuIconStyle.disabled.color};\n }\n .tui-image-editor-submenu use.normal.use-default {\n fill-rule: evenodd;\n fill: ${submenuIconStyle.normal.color};\n stroke: ${submenuIconStyle.normal.color};\n }\n .tui-image-editor-submenu use.active.use-default {\n fill-rule: evenodd;\n fill: ${submenuIconStyle.active.color};\n stroke: ${submenuIconStyle.active.color};\n }\n`;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview The standard theme\n */\n\n/**\n * Full configuration for theme.
                          \n * @typedef {object} themeConfig\n * @property {string} common.bi.image - Brand icon image\n * @property {string} common.bisize.width - Icon image width\n * @property {string} common.bisize.height - Icon Image Height\n * @property {string} common.backgroundImage - Background image\n * @property {string} common.backgroundColor - Background color\n * @property {string} common.border - Full area border style\n * @property {string} header.backgroundImage - header area background\n * @property {string} header.backgroundColor - header area background color\n * @property {string} header.border - header area border style\n * @property {string} loadButton.backgroundColor - load button background color\n * @property {string} loadButton.border - load button border style\n * @property {string} loadButton.color - load button foreground color\n * @property {string} loadButton.fontFamily - load button font type\n * @property {string} loadButton.fontSize - load button font size\n * @property {string} downloadButton.backgroundColor - download button background color\n * @property {string} downloadButton.border - download button border style\n * @property {string} downloadButton.color - download button foreground color\n * @property {string} downloadButton.fontFamily - download button font type\n * @property {string} downloadButton.fontSize - download button font size\n * @property {string} menu.normalIcon.color - Menu normal color for default icon\n * @property {string} menu.normalIcon.path - Menu normal icon svg bundle file path\n * @property {string} menu.normalIcon.name - Menu normal icon svg bundle name\n * @property {string} menu.activeIcon.color - Menu active color for default icon\n * @property {string} menu.activeIcon.path - Menu active icon svg bundle file path\n * @property {string} menu.activeIcon.name - Menu active icon svg bundle name\n * @property {string} menu.disabled.color - Menu disabled color for default icon\n * @property {string} menu.disabled.path - Menu disabled icon svg bundle file path\n * @property {string} menu.disabled.name - Menu disabled icon svg bundle name\n * @property {string} menu.hover.color - Menu default icon hover color\n * @property {string} menu.hover.path - Menu hover icon svg bundle file path\n * @property {string} menu.hover.name - Menu hover icon svg bundle name\n * @property {string} menu.iconSize.width - Menu icon Size Width\n * @property {string} menu.iconSize.height - Menu Icon Size Height\n * @property {string} submenu.backgroundColor - Sub-menu area background color\n * @property {string} submenu.partition.color - Submenu partition line color\n * @property {string} submenu.normalIcon.color - Submenu normal color for default icon\n * @property {string} submenu.normalIcon.path - Submenu default icon svg bundle file path\n * @property {string} submenu.normalIcon.name - Submenu default icon svg bundle name\n * @property {string} submenu.activeIcon.color - Submenu active color for default icon\n * @property {string} submenu.activeIcon.path - Submenu active icon svg bundle file path\n * @property {string} submenu.activeIcon.name - Submenu active icon svg bundle name\n * @property {string} submenu.iconSize.width - Submenu icon Size Width\n * @property {string} submenu.iconSize.height - Submenu Icon Size Height\n * @property {string} submenu.normalLabel.color - Submenu default label color\n * @property {string} submenu.normalLabel.fontWeight - Sub Menu Default Label Font Thickness\n * @property {string} submenu.activeLabel.color - Submenu active label color\n * @property {string} submenu.activeLabel.fontWeight - Submenu active label Font thickness\n * @property {string} checkbox.border - Checkbox border style\n * @property {string} checkbox.backgroundColor - Checkbox background color\n * @property {string} range.pointer.color - range control pointer color\n * @property {string} range.bar.color - range control bar color\n * @property {string} range.subbar.color - range control subbar color\n * @property {string} range.value.color - range number box font color\n * @property {string} range.value.fontWeight - range number box font thickness\n * @property {string} range.value.fontSize - range number box font size\n * @property {string} range.value.border - range number box border style\n * @property {string} range.value.backgroundColor - range number box background color\n * @property {string} range.title.color - range title font color\n * @property {string} range.title.fontWeight - range title font weight\n * @property {string} colorpicker.button.border - colorpicker button border style\n * @property {string} colorpicker.title.color - colorpicker button title font color\n * @example\n // default keys and styles\n var customTheme = {\n 'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',\n 'common.bisize.width': '251px',\n 'common.bisize.height': '21px',\n 'common.backgroundImage': 'none',\n 'common.backgroundColor': '#1e1e1e',\n 'common.border': '0px',\n\n // header\n 'header.backgroundImage': 'none',\n 'header.backgroundColor': 'transparent',\n 'header.border': '0px',\n\n // load button\n 'loadButton.backgroundColor': '#fff',\n 'loadButton.border': '1px solid #ddd',\n 'loadButton.color': '#222',\n 'loadButton.fontFamily': 'NotoSans, sans-serif',\n 'loadButton.fontSize': '12px',\n\n // download button\n 'downloadButton.backgroundColor': '#fdba3b',\n 'downloadButton.border': '1px solid #fdba3b',\n 'downloadButton.color': '#fff',\n 'downloadButton.fontFamily': 'NotoSans, sans-serif',\n 'downloadButton.fontSize': '12px',\n\n // icons default\n 'menu.normalIcon.color': '#8a8a8a',\n 'menu.activeIcon.color': '#555555',\n 'menu.disabledIcon.color': '#434343',\n 'menu.hoverIcon.color': '#e9e9e9',\n 'submenu.normalIcon.color': '#8a8a8a',\n 'submenu.activeIcon.color': '#e9e9e9',\n\n 'menu.iconSize.width': '24px',\n 'menu.iconSize.height': '24px',\n 'submenu.iconSize.width': '32px',\n 'submenu.iconSize.height': '32px',\n\n // submenu primary color\n 'submenu.backgroundColor': '#1e1e1e',\n 'submenu.partition.color': '#858585',\n\n // submenu labels\n 'submenu.normalLabel.color': '#858585',\n 'submenu.normalLabel.fontWeight': 'lighter',\n 'submenu.activeLabel.color': '#fff',\n 'submenu.activeLabel.fontWeight': 'lighter',\n\n // checkbox style\n 'checkbox.border': '1px solid #ccc',\n 'checkbox.backgroundColor': '#fff',\n\n // rango style\n 'range.pointer.color': '#fff',\n 'range.bar.color': '#666',\n 'range.subbar.color': '#d1d1d1',\n\n 'range.disabledPointer.color': '#414141',\n 'range.disabledBar.color': '#282828',\n 'range.disabledSubbar.color': '#414141',\n\n 'range.value.color': '#fff',\n 'range.value.fontWeight': 'lighter',\n 'range.value.fontSize': '11px',\n 'range.value.border': '1px solid #353535',\n 'range.value.backgroundColor': '#151515',\n 'range.title.color': '#fff',\n 'range.title.fontWeight': 'lighter',\n\n // colorpicker style\n 'colorpicker.button.border': '1px solid #1e1e1e',\n 'colorpicker.title.color': '#fff'\n};\n */\nexport default {\n 'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',\n 'common.bisize.width': '251px',\n 'common.bisize.height': '21px',\n 'common.backgroundImage': 'none',\n 'common.backgroundColor': '#1e1e1e',\n 'common.border': '0px',\n\n // header\n 'header.backgroundImage': 'none',\n 'header.backgroundColor': 'transparent',\n 'header.border': '0px',\n\n // load button\n 'loadButton.backgroundColor': '#fff',\n 'loadButton.border': '1px solid #ddd',\n 'loadButton.color': '#222',\n 'loadButton.fontFamily': \"'Noto Sans', sans-serif\",\n 'loadButton.fontSize': '12px',\n\n // download button\n 'downloadButton.backgroundColor': '#fdba3b',\n 'downloadButton.border': '1px solid #fdba3b',\n 'downloadButton.color': '#fff',\n 'downloadButton.fontFamily': \"'Noto Sans', sans-serif\",\n 'downloadButton.fontSize': '12px',\n\n // main icons\n 'menu.normalIcon.color': '#8a8a8a',\n 'menu.activeIcon.color': '#555555',\n 'menu.disabledIcon.color': '#434343',\n 'menu.hoverIcon.color': '#e9e9e9',\n\n // submenu icons\n 'submenu.normalIcon.color': '#8a8a8a',\n 'submenu.activeIcon.color': '#e9e9e9',\n\n 'menu.iconSize.width': '24px',\n 'menu.iconSize.height': '24px',\n\n 'submenu.iconSize.width': '32px',\n 'submenu.iconSize.height': '32px',\n\n // submenu primary color\n 'submenu.backgroundColor': '#1e1e1e',\n 'submenu.partition.color': '#3c3c3c',\n\n // submenu labels\n 'submenu.normalLabel.color': '#8a8a8a',\n 'submenu.normalLabel.fontWeight': 'lighter',\n 'submenu.activeLabel.color': '#fff',\n 'submenu.activeLabel.fontWeight': 'lighter',\n\n // checkbox style\n 'checkbox.border': '0px',\n 'checkbox.backgroundColor': '#fff',\n\n // range style\n 'range.pointer.color': '#fff',\n 'range.bar.color': '#666',\n 'range.subbar.color': '#d1d1d1',\n\n 'range.disabledPointer.color': '#414141',\n 'range.disabledBar.color': '#282828',\n 'range.disabledSubbar.color': '#414141',\n\n 'range.value.color': '#fff',\n 'range.value.fontWeight': 'lighter',\n 'range.value.fontSize': '11px',\n 'range.value.border': '1px solid #353535',\n 'range.value.backgroundColor': '#151515',\n 'range.title.color': '#fff',\n 'range.title.fontWeight': 'lighter',\n\n // colorpicker style\n 'colorpicker.button.border': '1px solid #1e1e1e',\n 'colorpicker.title.color': '#fff',\n};\n","module.exports = \"\"","import snippet from 'tui-code-snippet';\nimport Colorpicker from '@/ui/tools/colorpicker';\nimport Range from '@/ui/tools/range';\nimport Submenu from '@/ui/submenuBase';\nimport templateHtml from '@/ui/template/submenu/shape';\nimport { toInteger, assignmentForDestroy } from '@/util';\nimport { defaultShapeStrokeValues, eventNames, selectorNames } from '@/consts';\n\nconst SHAPE_DEFAULT_OPTION = {\n stroke: '#ffbb3b',\n fill: '',\n strokeWidth: 3,\n};\n\n/**\n * Shape ui class\n * @class\n * @ignore\n */\nclass Shape extends Submenu {\n constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {\n super(subMenuElement, {\n locale,\n name: 'shape',\n makeSvgIcon,\n menuBarPosition,\n templateHtml,\n usageStatistics,\n });\n this.type = null;\n this.options = SHAPE_DEFAULT_OPTION;\n\n this._els = {\n shapeSelectButton: this.selector('.tie-shape-button'),\n shapeColorButton: this.selector('.tie-shape-color-button'),\n strokeRange: new Range(\n {\n slider: this.selector('.tie-stroke-range'),\n input: this.selector('.tie-stroke-range-value'),\n },\n defaultShapeStrokeValues\n ),\n fillColorpicker: new Colorpicker(\n this.selector('.tie-color-fill'),\n '',\n this.toggleDirection,\n this.usageStatistics\n ),\n strokeColorpicker: new Colorpicker(\n this.selector('.tie-color-stroke'),\n '#ffbb3b',\n this.toggleDirection,\n this.usageStatistics\n ),\n };\n\n this.colorPickerControls.push(this._els.fillColorpicker);\n this.colorPickerControls.push(this._els.strokeColorpicker);\n\n this.colorPickerInputBoxes = [];\n this.colorPickerInputBoxes.push(\n this._els.fillColorpicker.colorpickerElement.querySelector(\n selectorNames.COLOR_PICKER_INPUT_BOX\n )\n );\n this.colorPickerInputBoxes.push(\n this._els.strokeColorpicker.colorpickerElement.querySelector(\n selectorNames.COLOR_PICKER_INPUT_BOX\n )\n );\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeEvent();\n this._els.strokeRange.destroy();\n this._els.fillColorpicker.destroy();\n this._els.strokeColorpicker.destroy();\n\n assignmentForDestroy(this);\n }\n\n /**\n * Add event for shape\n * @param {Object} actions - actions for shape\n * @param {Function} actions.changeShape - change shape mode\n * @param {Function} actions.setDrawingShape - set drawing shape\n */\n addEvent(actions) {\n this.eventHandler.shapeTypeSelected = this._changeShapeHandler.bind(this);\n this.actions = actions;\n\n this._els.shapeSelectButton.addEventListener('click', this.eventHandler.shapeTypeSelected);\n this._els.strokeRange.on('change', this._changeStrokeRangeHandler.bind(this));\n this._els.fillColorpicker.on('change', this._changeFillColorHandler.bind(this));\n this._els.strokeColorpicker.on('change', this._changeStrokeColorHandler.bind(this));\n this._els.fillColorpicker.on('changeShow', this.colorPickerChangeShow.bind(this));\n this._els.strokeColorpicker.on('changeShow', this.colorPickerChangeShow.bind(this));\n\n snippet.forEachArray(\n this.colorPickerInputBoxes,\n (inputBox) => {\n inputBox.addEventListener(eventNames.FOCUS, this._onStartEditingInputBox.bind(this));\n inputBox.addEventListener(eventNames.BLUR, this._onStopEditingInputBox.bind(this));\n },\n this\n );\n }\n\n /**\n * Remove event\n * @private\n */\n _removeEvent() {\n this._els.shapeSelectButton.removeEventListener('click', this.eventHandler.shapeTypeSelected);\n this._els.strokeRange.off();\n this._els.fillColorpicker.off();\n this._els.strokeColorpicker.off();\n\n snippet.forEachArray(\n this.colorPickerInputBoxes,\n (inputBox) => {\n inputBox.removeEventListener(eventNames.FOCUS, this._onStartEditingInputBox.bind(this));\n inputBox.removeEventListener(eventNames.BLUR, this._onStopEditingInputBox.bind(this));\n },\n this\n );\n }\n\n /**\n * Set Shape status\n * @param {Object} options - options of shape status\n * @param {string} strokeWidth - stroke width\n * @param {string} strokeColor - stroke color\n * @param {string} fillColor - fill color\n */\n setShapeStatus({ strokeWidth, strokeColor, fillColor }) {\n this._els.strokeRange.value = strokeWidth;\n this._els.strokeColorpicker.color = strokeColor;\n this._els.fillColorpicker.color = fillColor;\n this.options.stroke = strokeColor;\n this.options.fill = fillColor;\n this.options.strokeWidth = strokeWidth;\n\n this.actions.setDrawingShape(this.type, { strokeWidth });\n }\n\n /**\n * Executed when the menu starts.\n */\n changeStartMode() {\n this.actions.stopDrawingMode();\n }\n\n /**\n * Returns the menu to its default state.\n */\n changeStandbyMode() {\n this.type = null;\n this.actions.changeSelectableAll(true);\n this._els.shapeSelectButton.classList.remove('circle');\n this._els.shapeSelectButton.classList.remove('triangle');\n this._els.shapeSelectButton.classList.remove('rect');\n }\n\n /**\n * set range stroke max value\n * @param {number} maxValue - expect max value for change\n */\n setMaxStrokeValue(maxValue) {\n let strokeMaxValue = maxValue;\n if (strokeMaxValue <= 0) {\n strokeMaxValue = defaultShapeStrokeValues.max;\n }\n this._els.strokeRange.max = strokeMaxValue;\n }\n\n /**\n * Set stroke value\n * @param {number} value - expect value for strokeRange change\n */\n setStrokeValue(value) {\n this._els.strokeRange.value = value;\n this._els.strokeRange.trigger('change');\n }\n\n /**\n * Get stroke value\n * @returns {number} - stroke range value\n */\n getStrokeValue() {\n return this._els.strokeRange.value;\n }\n\n /**\n * Change icon color\n * @param {object} event - add button event object\n * @private\n */\n _changeShapeHandler(event) {\n const button = event.target.closest('.tui-image-editor-button');\n if (button) {\n this.actions.stopDrawingMode();\n this.actions.discardSelection();\n const shapeType = this.getButtonType(button, ['circle', 'triangle', 'rect']);\n\n if (this.type === shapeType) {\n this.changeStandbyMode();\n\n return;\n }\n this.changeStandbyMode();\n this.type = shapeType;\n event.currentTarget.classList.add(shapeType);\n this.actions.changeSelectableAll(false);\n this.actions.modeChange('shape');\n }\n }\n\n /**\n * Change stroke range\n * @param {number} value - stroke range value\n * @param {boolean} isLast - Is last change\n * @private\n */\n _changeStrokeRangeHandler(value, isLast) {\n this.options.strokeWidth = toInteger(value);\n this.actions.changeShape(\n {\n strokeWidth: value,\n },\n !isLast\n );\n\n this.actions.setDrawingShape(this.type, this.options);\n }\n\n /**\n * Change shape color\n * @param {string} color - fill color\n * @private\n */\n _changeFillColorHandler(color) {\n color = color || 'transparent';\n this.options.fill = color;\n this.actions.changeShape({\n fill: color,\n });\n }\n\n /**\n * Change shape stroke color\n * @param {string} color - fill color\n * @private\n */\n _changeStrokeColorHandler(color) {\n color = color || 'transparent';\n this.options.stroke = color;\n this.actions.changeShape({\n stroke: color,\n });\n }\n}\n\nexport default Shape;\n","module.exports = __WEBPACK_EXTERNAL_MODULE__128__;","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon }) => `\n
                            \n
                          • \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'shape-rectangle', true)}\n
                            \n \n
                            \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'shape-circle', true)}\n
                            \n \n
                            \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'shape-triangle', true)}\n
                            \n \n
                            \n
                            • \n
                          • \n
                            \n
                            • \n
                          • \n
                            \n
                            \n
                            • \n
                          • \n
                            \n
                            • \n
                          • \n \n
                            \n \n
                            • \n
                          \n`;\n","import snippet from 'tui-code-snippet';\nimport Submenu from '@/ui/submenuBase';\nimport templateHtml from '@/ui/template/submenu/crop';\nimport { assignmentForDestroy } from '@/util';\n\n/**\n * Crop ui class\n * @class\n * @ignore\n */\nclass Crop extends Submenu {\n constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {\n super(subMenuElement, {\n locale,\n name: 'crop',\n makeSvgIcon,\n menuBarPosition,\n templateHtml,\n usageStatistics,\n });\n\n this.status = 'active';\n\n this._els = {\n apply: this.selector('.tie-crop-button .apply'),\n cancel: this.selector('.tie-crop-button .cancel'),\n preset: this.selector('.tie-crop-preset-button'),\n };\n\n this.defaultPresetButton = this._els.preset.querySelector('.preset-none');\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeEvent();\n\n assignmentForDestroy(this);\n }\n\n /**\n * Add event for crop\n * @param {Object} actions - actions for crop\n * @param {Function} actions.crop - crop action\n * @param {Function} actions.cancel - cancel action\n * @param {Function} actions.preset - draw rectzone at a predefined ratio\n */\n addEvent(actions) {\n const apply = this._applyEventHandler.bind(this);\n const cancel = this._cancelEventHandler.bind(this);\n const cropzonePreset = this._cropzonePresetEventHandler.bind(this);\n\n this.eventHandler = {\n apply,\n cancel,\n cropzonePreset,\n };\n\n this.actions = actions;\n this._els.apply.addEventListener('click', apply);\n this._els.cancel.addEventListener('click', cancel);\n this._els.preset.addEventListener('click', cropzonePreset);\n }\n\n /**\n * Remove event\n * @private\n */\n _removeEvent() {\n this._els.apply.removeEventListener('click', this.eventHandler.apply);\n this._els.cancel.removeEventListener('click', this.eventHandler.cancel);\n this._els.preset.removeEventListener('click', this.eventHandler.cropzonePreset);\n }\n\n _applyEventHandler() {\n this.actions.crop();\n this._els.apply.classList.remove('active');\n }\n\n _cancelEventHandler() {\n this.actions.cancel();\n this._els.apply.classList.remove('active');\n }\n\n _cropzonePresetEventHandler(event) {\n const button = event.target.closest('.tui-image-editor-button.preset');\n if (button) {\n const [presetType] = button.className.match(/preset-[^\\s]+/);\n\n this._setPresetButtonActive(button);\n this.actions.preset(presetType);\n }\n }\n\n /**\n * Executed when the menu starts.\n */\n changeStartMode() {\n this.actions.modeChange('crop');\n }\n\n /**\n * Returns the menu to its default state.\n */\n changeStandbyMode() {\n this.actions.stopDrawingMode();\n this._setPresetButtonActive();\n }\n\n /**\n * Change apply button status\n * @param {Boolean} enableStatus - apply button status\n */\n changeApplyButtonStatus(enableStatus) {\n if (enableStatus) {\n this._els.apply.classList.add('active');\n } else {\n this._els.apply.classList.remove('active');\n }\n }\n\n /**\n * Set preset button to active status\n * @param {HTMLElement} button - event target element\n * @private\n */\n _setPresetButtonActive(button = this.defaultPresetButton) {\n snippet.forEach([].slice.call(this._els.preset.querySelectorAll('.preset')), (presetButton) => {\n presetButton.classList.remove('active');\n });\n\n if (button) {\n button.classList.add('active');\n }\n }\n}\n\nexport default Crop;\n","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon }) => `\n
                            \n
                          • \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'shape-rectangle', true)}\n
                            \n \n
                            \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'crop', true)}\n
                            \n \n
                            \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'crop', true)}\n
                            \n \n
                            \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'crop', true)}\n
                            \n \n
                            \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'crop', true)}\n
                            \n \n
                            \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'crop', true)}\n
                            \n \n
                            \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'crop', true)}\n
                            \n \n
                            \n
                            • \n
                          • \n
                            • \n
                          • \n
                            \n
                            • \n
                          • \n
                            \n ${makeSvgIcon(['normal', 'active'], 'apply')}\n \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'cancel')}\n \n
                            \n
                            • \n
                          \n`;\n","import Submenu from '@/ui/submenuBase';\nimport templateHtml from '@/ui/template/submenu/resize';\nimport { assignmentForDestroy, toInteger } from '@/util';\nimport Range from '@/ui/tools/range';\nimport { defaultResizePixelValues } from '@/consts';\n\n/**\n * Resize ui class\n * @class\n * @ignore\n */\nclass Resize extends Submenu {\n constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {\n super(subMenuElement, {\n locale,\n name: 'resize',\n makeSvgIcon,\n menuBarPosition,\n templateHtml,\n usageStatistics,\n });\n\n this.status = 'active';\n\n this._lockState = false;\n\n /**\n * Original dimensions\n * @type {Object}\n * @private\n */\n this._originalDimensions = null;\n\n this._els = {\n widthRange: new Range(\n {\n slider: this.selector('.tie-width-range'),\n input: this.selector('.tie-width-range-value'),\n },\n defaultResizePixelValues\n ),\n heightRange: new Range(\n {\n slider: this.selector('.tie-height-range'),\n input: this.selector('.tie-height-range-value'),\n },\n defaultResizePixelValues\n ),\n lockAspectRatio: this.selector('.tie-lock-aspect-ratio'),\n apply: this.selector('.tie-resize-button .apply'),\n cancel: this.selector('.tie-resize-button .cancel'),\n };\n }\n\n /**\n * Executed when the menu starts.\n */\n changeStartMode() {\n this.actions.modeChange('resize');\n const dimensions = this.actions.getCurrentDimensions();\n\n this._originalDimensions = dimensions;\n\n this.setWidthValue(dimensions.width);\n this.setHeightValue(dimensions.height);\n }\n\n /**\n * Returns the menu to its default state.\n */\n changeStandbyMode() {\n this.actions.stopDrawingMode();\n this.actions.reset(true);\n }\n\n /**\n * Set dimension limits\n * @param {object} limits - expect dimension limits for change\n */\n setLimit(limits) {\n this._els.widthRange.min = this.calcMinValue(limits.minWidth);\n this._els.heightRange.min = this.calcMinValue(limits.minHeight);\n this._els.widthRange.max = this.calcMaxValue(limits.maxWidth);\n this._els.heightRange.max = this.calcMaxValue(limits.maxHeight);\n }\n\n /**\n * Calculate max value\n * @param {number} maxValue - max value\n * @returns {number}\n */\n calcMaxValue(maxValue) {\n if (maxValue <= 0) {\n maxValue = defaultResizePixelValues.max;\n }\n\n return maxValue;\n }\n\n /**\n * Calculate min value\n * @param {number} minValue - min value\n * @returns {number}\n */\n calcMinValue(minValue) {\n if (minValue <= 0) {\n minValue = defaultResizePixelValues.min;\n }\n\n return minValue;\n }\n\n /**\n * Set width value\n * @param {number} value - expect value for widthRange change\n * @param {boolean} trigger - fire change event control\n */\n setWidthValue(value, trigger = false) {\n this._els.widthRange.value = value;\n if (trigger) {\n this._els.widthRange.trigger('change');\n }\n }\n\n /**\n * Set height value\n * @param {number} value - expect value for heightRange change\n * @param {boolean} trigger - fire change event control\n */\n setHeightValue(value, trigger = false) {\n this._els.heightRange.value = value;\n if (trigger) {\n this._els.heightRange.trigger('change');\n }\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeEvent();\n\n assignmentForDestroy(this);\n }\n\n /**\n * Add event for resize\n * @param {Object} actions - actions for resize\n * @param {Function} actions.resize - resize action\n * @param {Function} actions.preview - preview action\n * @param {Function} actions.getCurrentDimensions - Get current dimensions action\n * @param {Function} actions.modeChange - change mode\n * @param {Function} actions.stopDrawingMode - stop drawing mode\n * @param {Function} actions.lockAspectRatio - lock aspect ratio\n * @param {Function} actions.reset - reset action\n */\n addEvent(actions) {\n this._els.widthRange.on('change', this._changeWidthRangeHandler.bind(this));\n this._els.heightRange.on('change', this._changeHeightRangeHandler.bind(this));\n this._els.lockAspectRatio.addEventListener('change', this._changeLockAspectRatio.bind(this));\n\n const apply = this._applyEventHandler.bind(this);\n const cancel = this._cancelEventHandler.bind(this);\n\n this.eventHandler = {\n apply,\n cancel,\n };\n\n this.actions = actions;\n this._els.apply.addEventListener('click', apply);\n this._els.cancel.addEventListener('click', cancel);\n }\n\n /**\n * Change width\n * @param {number} value - width range value\n * @private\n */\n _changeWidthRangeHandler(value) {\n this.actions.preview('width', toInteger(value), this._lockState);\n }\n\n /**\n * Change height\n * @param {number} value - height range value\n * @private\n */\n _changeHeightRangeHandler(value) {\n this.actions.preview('height', toInteger(value), this._lockState);\n }\n\n /**\n * Change lock aspect ratio state\n * @param {Event} event - aspect ratio check event\n * @private\n */\n _changeLockAspectRatio(event) {\n this._lockState = event.target.checked;\n this.actions.lockAspectRatio(\n this._lockState,\n defaultResizePixelValues.min,\n defaultResizePixelValues.max\n );\n }\n\n /**\n * Remove event\n * @private\n */\n _removeEvent() {\n this._els.apply.removeEventListener('click', this.eventHandler.apply);\n this._els.cancel.removeEventListener('click', this.eventHandler.cancel);\n }\n\n _applyEventHandler() {\n this.actions.resize();\n this._els.apply.classList.remove('active');\n }\n\n _cancelEventHandler() {\n this.actions.reset();\n this._els.cancel.classList.remove('active');\n }\n\n /**\n * Change apply button status\n * @param {Boolean} enableStatus - apply button status\n */\n changeApplyButtonStatus(enableStatus) {\n if (enableStatus) {\n this._els.apply.classList.add('active');\n } else {\n this._els.apply.classList.remove('active');\n }\n }\n}\n\nexport default Resize;\n","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon }) => `\n
                            \n
                          • \n
                            \n \n
                            \n \n
                            \n \n
                            \n \n
                            \n
                            • \n
                          • \n
                          • \n
                            \n
                            • \n
                          • \n
                            \n
                            \n \n
                            \n
                            \n
                            • \n
                          • \n
                          • \n
                            \n
                            • \n
                          • \n
                          • \n
                            \n ${makeSvgIcon(['normal', 'active'], 'apply')}\n \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'cancel')}\n \n
                            \n
                            • \n
                          \n`;\n","import snippet from 'tui-code-snippet';\nimport Submenu from '@/ui/submenuBase';\nimport templateHtml from '@/ui/template/submenu/flip';\nimport { assignmentForDestroy } from '@/util';\n\n/**\n * Flip ui class\n * @class\n * @ignore\n */\nclass Flip extends Submenu {\n constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {\n super(subMenuElement, {\n locale,\n name: 'flip',\n makeSvgIcon,\n menuBarPosition,\n templateHtml,\n usageStatistics,\n });\n this.flipStatus = false;\n\n this._els = {\n flipButton: this.selector('.tie-flip-button'),\n };\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeEvent();\n\n assignmentForDestroy(this);\n }\n\n /**\n * Add event for flip\n * @param {Object} actions - actions for flip\n * @param {Function} actions.flip - flip action\n */\n addEvent(actions) {\n this.eventHandler.changeFlip = this._changeFlip.bind(this);\n this._actions = actions;\n this._els.flipButton.addEventListener('click', this.eventHandler.changeFlip);\n }\n\n /**\n * Remove event\n * @private\n */\n _removeEvent() {\n this._els.flipButton.removeEventListener('click', this.eventHandler.changeFlip);\n }\n\n /**\n * change Flip status\n * @param {object} event - change event\n * @private\n */\n _changeFlip(event) {\n const button = event.target.closest('.tui-image-editor-button');\n if (button) {\n const flipType = this.getButtonType(button, ['flipX', 'flipY', 'resetFlip']);\n if (!this.flipStatus && flipType === 'resetFlip') {\n return;\n }\n\n this._actions.flip(flipType).then((flipStatus) => {\n const flipClassList = this._els.flipButton.classList;\n this.flipStatus = false;\n\n flipClassList.remove('resetFlip');\n snippet.forEach(['flipX', 'flipY'], (type) => {\n flipClassList.remove(type);\n if (flipStatus[type]) {\n flipClassList.add(type);\n flipClassList.add('resetFlip');\n this.flipStatus = true;\n }\n });\n });\n }\n }\n}\n\nexport default Flip;\n","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon }) => `\n
                            \n
                          • \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'flip-x', true)}\n
                            \n \n
                            \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'flip-y', true)}\n
                            \n \n
                            \n
                            • \n
                          • \n
                            \n
                            • \n
                          • \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'flip-reset', true)}\n
                            \n \n
                            \n
                            • \n
                          \n`;\n","import Range from '@/ui/tools/range';\nimport Submenu from '@/ui/submenuBase';\nimport templateHtml from '@/ui/template/submenu/rotate';\nimport { toInteger, assignmentForDestroy } from '@/util';\nimport { defaultRotateRangeValues } from '@/consts';\n\nconst CLOCKWISE = 30;\nconst COUNTERCLOCKWISE = -30;\n\n/**\n * Rotate ui class\n * @class\n * @ignore\n */\nclass Rotate extends Submenu {\n constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {\n super(subMenuElement, {\n locale,\n name: 'rotate',\n makeSvgIcon,\n menuBarPosition,\n templateHtml,\n usageStatistics,\n });\n this._value = 0;\n\n this._els = {\n rotateButton: this.selector('.tie-rotate-button'),\n rotateRange: new Range(\n {\n slider: this.selector('.tie-rotate-range'),\n input: this.selector('.tie-rotate-range-value'),\n },\n defaultRotateRangeValues\n ),\n };\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeEvent();\n this._els.rotateRange.destroy();\n\n assignmentForDestroy(this);\n }\n\n setRangeBarAngle(type, angle) {\n let resultAngle = angle;\n\n if (type === 'rotate') {\n resultAngle = parseInt(this._els.rotateRange.value, 10) + angle;\n }\n\n this._setRangeBarRatio(resultAngle);\n }\n\n _setRangeBarRatio(angle) {\n this._els.rotateRange.value = angle;\n }\n\n /**\n * Add event for rotate\n * @param {Object} actions - actions for crop\n * @param {Function} actions.rotate - rotate action\n * @param {Function} actions.setAngle - set angle action\n */\n addEvent(actions) {\n this.eventHandler.rotationAngleChanged = this._changeRotateForButton.bind(this);\n\n // {rotate, setAngle}\n this.actions = actions;\n this._els.rotateButton.addEventListener('click', this.eventHandler.rotationAngleChanged);\n this._els.rotateRange.on('change', this._changeRotateForRange.bind(this));\n }\n\n /**\n * Remove event\n * @private\n */\n _removeEvent() {\n this._els.rotateButton.removeEventListener('click', this.eventHandler.rotationAngleChanged);\n this._els.rotateRange.off();\n }\n\n /**\n * Change rotate for range\n * @param {number} value - angle value\n * @param {boolean} isLast - Is last change\n * @private\n */\n _changeRotateForRange(value, isLast) {\n const angle = toInteger(value);\n this.actions.setAngle(angle, !isLast);\n this._value = angle;\n }\n\n /**\n * Change rotate for button\n * @param {object} event - add button event object\n * @private\n */\n _changeRotateForButton(event) {\n const button = event.target.closest('.tui-image-editor-button');\n const angle = this._els.rotateRange.value;\n\n if (button) {\n const rotateType = this.getButtonType(button, ['counterclockwise', 'clockwise']);\n const rotateAngle = {\n clockwise: CLOCKWISE,\n counterclockwise: COUNTERCLOCKWISE,\n }[rotateType];\n const newAngle = parseInt(angle, 10) + rotateAngle;\n const isRotatable = newAngle >= -360 && newAngle <= 360;\n if (isRotatable) {\n this.actions.rotate(rotateAngle);\n }\n }\n }\n}\n\nexport default Rotate;\n","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon }) => `\n
                            \n
                          • \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'rotate-clockwise', true)}\n
                            \n \n
                            \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'rotate-counterclockwise', true)}\n
                            \n \n
                            \n
                            • \n
                          • \n
                            \n
                            • \n
                          • \n \n
                            \n \n
                            • \n
                          \n`;\n","import Range from '@/ui/tools/range';\nimport Colorpicker from '@/ui/tools/colorpicker';\nimport Submenu from '@/ui/submenuBase';\nimport templateHtml from '@/ui/template/submenu/text';\nimport { assignmentForDestroy } from '@/util';\nimport { defaultTextRangeValues, eventNames, selectorNames } from '@/consts';\n\n/**\n * Crop ui class\n * @class\n * @ignore\n */\nclass Text extends Submenu {\n constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {\n super(subMenuElement, {\n locale,\n name: 'text',\n makeSvgIcon,\n menuBarPosition,\n templateHtml,\n usageStatistics,\n });\n this.effect = {\n bold: false,\n italic: false,\n underline: false,\n };\n this.align = 'tie-text-align-left';\n this._els = {\n textEffectButton: this.selector('.tie-text-effect-button'),\n textAlignButton: this.selector('.tie-text-align-button'),\n textColorpicker: new Colorpicker(\n this.selector('.tie-text-color'),\n '#ffbb3b',\n this.toggleDirection,\n this.usageStatistics\n ),\n textRange: new Range(\n {\n slider: this.selector('.tie-text-range'),\n input: this.selector('.tie-text-range-value'),\n },\n defaultTextRangeValues\n ),\n };\n\n this.colorPickerInputBox = this._els.textColorpicker.colorpickerElement.querySelector(\n selectorNames.COLOR_PICKER_INPUT_BOX\n );\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeEvent();\n this._els.textColorpicker.destroy();\n this._els.textRange.destroy();\n\n assignmentForDestroy(this);\n }\n\n /**\n * Add event for text\n * @param {Object} actions - actions for text\n * @param {Function} actions.changeTextStyle - change text style\n */\n addEvent(actions) {\n const setTextEffect = this._setTextEffectHandler.bind(this);\n const setTextAlign = this._setTextAlignHandler.bind(this);\n\n this.eventHandler = {\n setTextEffect,\n setTextAlign,\n };\n\n this.actions = actions;\n this._els.textEffectButton.addEventListener('click', setTextEffect);\n this._els.textAlignButton.addEventListener('click', setTextAlign);\n this._els.textRange.on('change', this._changeTextRnageHandler.bind(this));\n this._els.textColorpicker.on('change', this._changeColorHandler.bind(this));\n\n this.colorPickerInputBox.addEventListener(\n eventNames.FOCUS,\n this._onStartEditingInputBox.bind(this)\n );\n this.colorPickerInputBox.addEventListener(\n eventNames.BLUR,\n this._onStopEditingInputBox.bind(this)\n );\n }\n\n /**\n * Remove event\n * @private\n */\n _removeEvent() {\n const { setTextEffect, setTextAlign } = this.eventHandler;\n\n this._els.textEffectButton.removeEventListener('click', setTextEffect);\n this._els.textAlignButton.removeEventListener('click', setTextAlign);\n this._els.textRange.off();\n this._els.textColorpicker.off();\n\n this.colorPickerInputBox.removeEventListener(\n eventNames.FOCUS,\n this._onStartEditingInputBox.bind(this)\n );\n this.colorPickerInputBox.removeEventListener(\n eventNames.BLUR,\n this._onStopEditingInputBox.bind(this)\n );\n }\n\n /**\n * Returns the menu to its default state.\n */\n changeStandbyMode() {\n this.actions.stopDrawingMode();\n }\n\n /**\n * Executed when the menu starts.\n */\n changeStartMode() {\n this.actions.modeChange('text');\n }\n\n set textColor(color) {\n this._els.textColorpicker.color = color;\n }\n\n /**\n * Get text color\n * @returns {string} - text color\n */\n get textColor() {\n return this._els.textColorpicker.color;\n }\n\n /**\n * Get text size\n * @returns {string} - text size\n */\n get fontSize() {\n return this._els.textRange.value;\n }\n\n /**\n * Set text size\n * @param {Number} value - text size\n */\n set fontSize(value) {\n this._els.textRange.value = value;\n }\n\n /**\n * get font style\n * @returns {string} - font style\n */\n get fontStyle() {\n return this.effect.italic ? 'italic' : 'normal';\n }\n\n /**\n * get font weight\n * @returns {string} - font weight\n */\n get fontWeight() {\n return this.effect.bold ? 'bold' : 'normal';\n }\n\n /**\n * get text underline text underline\n * @returns {boolean} - true or false\n */\n get underline() {\n return this.effect.underline;\n }\n\n setTextStyleStateOnAction(textStyle = {}) {\n const { fill, fontSize, fontStyle, fontWeight, textDecoration, textAlign } = textStyle;\n\n this.textColor = fill;\n this.fontSize = fontSize;\n this.setEffectState('italic', fontStyle);\n this.setEffectState('bold', fontWeight);\n this.setEffectState('underline', textDecoration);\n this.setAlignState(`tie-text-align-${textAlign}`);\n }\n\n setEffectState(effectName, value) {\n const effectValue = value === 'italic' || value === 'bold' || value === 'underline';\n const button = this._els.textEffectButton.querySelector(\n `.tui-image-editor-button.${effectName}`\n );\n\n this.effect[effectName] = effectValue;\n\n button.classList[effectValue ? 'add' : 'remove']('active');\n }\n\n setAlignState(value) {\n const button = this._els.textAlignButton;\n button.classList.remove(this.align);\n button.classList.add(value);\n this.align = value;\n }\n\n /**\n * text effect set handler\n * @param {object} event - add button event object\n * @private\n */\n _setTextEffectHandler(event) {\n const button = event.target.closest('.tui-image-editor-button');\n if (button) {\n const [styleType] = button.className.match(/(bold|italic|underline)/);\n const styleObj = {\n bold: { fontWeight: 'bold' },\n italic: { fontStyle: 'italic' },\n underline: { textDecoration: 'underline' },\n }[styleType];\n\n this.effect[styleType] = !this.effect[styleType];\n button.classList.toggle('active');\n this.actions.changeTextStyle(styleObj);\n }\n }\n\n /**\n * text effect set handler\n * @param {object} event - add button event object\n * @private\n */\n _setTextAlignHandler(event) {\n const button = event.target.closest('.tui-image-editor-button');\n if (button) {\n const styleType = this.getButtonType(button, ['left', 'center', 'right']);\n const styleTypeAlias = `tie-text-align-${styleType}`;\n\n event.currentTarget.classList.remove(this.align);\n if (this.align !== styleTypeAlias) {\n event.currentTarget.classList.add(styleTypeAlias);\n }\n this.actions.changeTextStyle({ textAlign: styleType });\n\n this.align = styleTypeAlias;\n }\n }\n\n /**\n * text align set handler\n * @param {number} value - range value\n * @param {boolean} isLast - Is last change\n * @private\n */\n _changeTextRnageHandler(value, isLast) {\n this.actions.changeTextStyle(\n {\n fontSize: value,\n },\n !isLast\n );\n }\n\n /**\n * change color handler\n * @param {string} color - change color string\n * @private\n */\n _changeColorHandler(color) {\n color = color || 'transparent';\n this.actions.changeTextStyle({\n fill: color,\n });\n }\n}\n\nexport default Text;\n","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon }) => `\n
                            \n
                          • \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'text-bold', true)}\n
                            \n \n
                            \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'text-italic', true)}\n
                            \n \n
                            \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'text-underline', true)}\n
                            \n \n
                            \n
                            • \n
                          • \n
                            \n
                            • \n
                          • \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'text-align-left', true)}\n
                            \n \n
                            \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'text-align-center', true)}\n
                            \n \n
                            \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'text-align-right', true)}\n
                            \n \n
                            \n
                            • \n
                          • \n
                            \n
                            • \n
                          • \n
                            \n
                            • \n
                          • \n
                            \n
                            • \n
                          • \n \n
                            \n \n
                            • \n
                          \n`;\n","import Submenu from '@/ui/submenuBase';\nimport templateHtml from '@/ui/template/submenu/mask';\nimport { assignmentForDestroy, isSupportFileApi } from '@/util';\n\n/**\n * Mask ui class\n * @class\n * @ignore\n */\nclass Mask extends Submenu {\n constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {\n super(subMenuElement, {\n locale,\n name: 'mask',\n makeSvgIcon,\n menuBarPosition,\n templateHtml,\n usageStatistics,\n });\n\n this._els = {\n applyButton: this.selector('.tie-mask-apply'),\n maskImageButton: this.selector('.tie-mask-image-file'),\n };\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeEvent();\n\n assignmentForDestroy(this);\n }\n\n /**\n * Add event for mask\n * @param {Object} actions - actions for crop\n * @param {Function} actions.loadImageFromURL - load image action\n * @param {Function} actions.applyFilter - apply filter action\n */\n addEvent(actions) {\n const loadMaskFile = this._loadMaskFile.bind(this);\n const applyMask = this._applyMask.bind(this);\n\n this.eventHandler = {\n loadMaskFile,\n applyMask,\n };\n\n this.actions = actions;\n this._els.maskImageButton.addEventListener('change', loadMaskFile);\n this._els.applyButton.addEventListener('click', applyMask);\n }\n\n /**\n * Remove event\n * @private\n */\n _removeEvent() {\n this._els.maskImageButton.removeEventListener('change', this.eventHandler.loadMaskFile);\n this._els.applyButton.removeEventListener('click', this.eventHandler.applyMask);\n }\n\n /**\n * Apply mask\n * @private\n */\n _applyMask() {\n this.actions.applyFilter();\n this._els.applyButton.classList.remove('active');\n }\n\n /**\n * Load mask file\n * @param {object} event - File change event object\n * @private\n */\n _loadMaskFile(event) {\n let imgUrl;\n\n if (!isSupportFileApi()) {\n alert('This browser does not support file-api');\n }\n\n const [file] = event.target.files;\n\n if (file) {\n imgUrl = URL.createObjectURL(file);\n this.actions.loadImageFromURL(imgUrl, file);\n this._els.applyButton.classList.add('active');\n }\n }\n}\n\nexport default Mask;\n","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon }) => `\n
                            \n
                          • \n
                            \n
                            \n \n ${makeSvgIcon(['normal', 'active'], 'mask-load', true)}\n
                            \n \n
                            \n
                            • \n
                          • \n
                            \n
                            • \n
                          • \n
                            \n ${makeSvgIcon(['normal', 'active'], 'apply')}\n \n
                            \n
                            • \n
                          \n`;\n","import snippet from 'tui-code-snippet';\nimport Colorpicker from '@/ui/tools/colorpicker';\nimport Submenu from '@/ui/submenuBase';\nimport templateHtml from '@/ui/template/submenu/icon';\nimport { isSupportFileApi, assignmentForDestroy } from '@/util';\nimport { defaultIconPath, eventNames, selectorNames } from '@/consts';\n\n/**\n * Icon ui class\n * @class\n * @ignore\n */\nclass Icon extends Submenu {\n constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {\n super(subMenuElement, {\n locale,\n name: 'icon',\n makeSvgIcon,\n menuBarPosition,\n templateHtml,\n usageStatistics,\n });\n\n this.iconType = null;\n this._iconMap = {};\n\n this._els = {\n registerIconButton: this.selector('.tie-icon-image-file'),\n addIconButton: this.selector('.tie-icon-add-button'),\n iconColorpicker: new Colorpicker(\n this.selector('.tie-icon-color'),\n '#ffbb3b',\n this.toggleDirection,\n this.usageStatistics\n ),\n };\n\n this.colorPickerInputBox = this._els.iconColorpicker.colorpickerElement.querySelector(\n selectorNames.COLOR_PICKER_INPUT_BOX\n );\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeEvent();\n this._els.iconColorpicker.destroy();\n\n assignmentForDestroy(this);\n }\n\n /**\n * Add event for icon\n * @param {Object} actions - actions for icon\n * @param {Function} actions.registerCustomIcon - register icon\n * @param {Function} actions.addIcon - add icon\n * @param {Function} actions.changeColor - change icon color\n */\n addEvent(actions) {\n const registerIcon = this._registerIconHandler.bind(this);\n const addIcon = this._addIconHandler.bind(this);\n\n this.eventHandler = {\n registerIcon,\n addIcon,\n };\n\n this.actions = actions;\n this._els.iconColorpicker.on('change', this._changeColorHandler.bind(this));\n this._els.registerIconButton.addEventListener('change', registerIcon);\n this._els.addIconButton.addEventListener('click', addIcon);\n\n this.colorPickerInputBox.addEventListener(\n eventNames.FOCUS,\n this._onStartEditingInputBox.bind(this)\n );\n this.colorPickerInputBox.addEventListener(\n eventNames.BLUR,\n this._onStopEditingInputBox.bind(this)\n );\n }\n\n /**\n * Remove event\n * @private\n */\n _removeEvent() {\n this._els.iconColorpicker.off();\n this._els.registerIconButton.removeEventListener('change', this.eventHandler.registerIcon);\n this._els.addIconButton.removeEventListener('click', this.eventHandler.addIcon);\n\n this.colorPickerInputBox.removeEventListener(\n eventNames.FOCUS,\n this._onStartEditingInputBox.bind(this)\n );\n this.colorPickerInputBox.removeEventListener(\n eventNames.BLUR,\n this._onStopEditingInputBox.bind(this)\n );\n }\n\n /**\n * Clear icon type\n */\n clearIconType() {\n this._els.addIconButton.classList.remove(this.iconType);\n this.iconType = null;\n }\n\n /**\n * Register default icon\n */\n registerDefaultIcon() {\n snippet.forEach(defaultIconPath, (path, type) => {\n this.actions.registerDefaultIcons(type, path);\n });\n }\n\n /**\n * Set icon picker color\n * @param {string} iconColor - rgb color string\n */\n setIconPickerColor(iconColor) {\n this._els.iconColorpicker.color = iconColor;\n }\n\n /**\n * Returns the menu to its default state.\n */\n changeStandbyMode() {\n this.clearIconType();\n this.actions.cancelAddIcon();\n }\n\n /**\n * Change icon color\n * @param {string} color - color for change\n * @private\n */\n _changeColorHandler(color) {\n color = color || 'transparent';\n this.actions.changeColor(color);\n }\n\n /**\n * Change icon color\n * @param {object} event - add button event object\n * @private\n */\n _addIconHandler(event) {\n const button = event.target.closest('.tui-image-editor-button');\n\n if (button) {\n const iconType = button.getAttribute('data-icontype');\n const iconColor = this._els.iconColorpicker.color;\n this.actions.discardSelection();\n this.actions.changeSelectableAll(false);\n this._els.addIconButton.classList.remove(this.iconType);\n this._els.addIconButton.classList.add(iconType);\n\n if (this.iconType === iconType) {\n this.changeStandbyMode();\n } else {\n this.actions.addIcon(iconType, iconColor);\n this.iconType = iconType;\n }\n }\n }\n\n /**\n * register icon\n * @param {object} event - file change event object\n * @private\n */\n _registerIconHandler(event) {\n let imgUrl;\n\n if (!isSupportFileApi) {\n alert('This browser does not support file-api');\n }\n\n const [file] = event.target.files;\n\n if (file) {\n imgUrl = URL.createObjectURL(file);\n this.actions.registerCustomIcon(imgUrl, file);\n }\n }\n}\n\nexport default Icon;\n","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon }) => `\n
                            \n
                          • \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'icon-arrow', true)}\n
                            \n \n
                            \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'icon-arrow-2', true)}\n
                            \n \n
                            \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'icon-arrow-3', true)}\n
                            \n \n
                            \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'icon-star', true)}\n
                            \n \n
                            \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'icon-star-2', true)}\n
                            \n \n
                            \n\n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'icon-polygon', true)}\n
                            \n \n
                            \n\n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'icon-location', true)}\n
                            \n \n
                            \n\n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'icon-heart', true)}\n
                            \n \n
                            \n\n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'icon-bubble', true)}\n
                            \n \n
                            \n
                            • \n
                          • \n
                            \n
                            • \n
                          • \n
                            \n
                            \n \n ${makeSvgIcon(['normal', 'active'], 'icon-load', true)}\n
                            \n \n
                            \n
                            • \n
                          • \n
                            \n
                            • \n
                          • \n
                            \n
                            • \n
                          \n`;\n","import Colorpicker from '@/ui/tools/colorpicker';\nimport Range from '@/ui/tools/range';\nimport Submenu from '@/ui/submenuBase';\nimport templateHtml from '@/ui/template/submenu/draw';\nimport { assignmentForDestroy, getRgb } from '@/util';\nimport { defaultDrawRangeValues, eventNames, selectorNames } from '@/consts';\n\nconst DRAW_OPACITY = 0.7;\n\n/**\n * Draw ui class\n * @class\n * @ignore\n */\nclass Draw extends Submenu {\n constructor(subMenuElement, { locale, makeSvgIcon, menuBarPosition, usageStatistics }) {\n super(subMenuElement, {\n locale,\n name: 'draw',\n makeSvgIcon,\n menuBarPosition,\n templateHtml,\n usageStatistics,\n });\n\n this._els = {\n lineSelectButton: this.selector('.tie-draw-line-select-button'),\n drawColorPicker: new Colorpicker(\n this.selector('.tie-draw-color'),\n '#00a9ff',\n this.toggleDirection,\n this.usageStatistics\n ),\n drawRange: new Range(\n {\n slider: this.selector('.tie-draw-range'),\n input: this.selector('.tie-draw-range-value'),\n },\n defaultDrawRangeValues\n ),\n };\n\n this.type = null;\n this.color = this._els.drawColorPicker.color;\n this.width = this._els.drawRange.value;\n\n this.colorPickerInputBox = this._els.drawColorPicker.colorpickerElement.querySelector(\n selectorNames.COLOR_PICKER_INPUT_BOX\n );\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeEvent();\n this._els.drawColorPicker.destroy();\n this._els.drawRange.destroy();\n\n assignmentForDestroy(this);\n }\n\n /**\n * Add event for draw\n * @param {Object} actions - actions for crop\n * @param {Function} actions.setDrawMode - set draw mode\n */\n addEvent(actions) {\n this.eventHandler.changeDrawType = this._changeDrawType.bind(this);\n\n this.actions = actions;\n this._els.lineSelectButton.addEventListener('click', this.eventHandler.changeDrawType);\n this._els.drawColorPicker.on('change', this._changeDrawColor.bind(this));\n this._els.drawRange.on('change', this._changeDrawRange.bind(this));\n\n this.colorPickerInputBox.addEventListener(\n eventNames.FOCUS,\n this._onStartEditingInputBox.bind(this)\n );\n this.colorPickerInputBox.addEventListener(\n eventNames.BLUR,\n this._onStopEditingInputBox.bind(this)\n );\n }\n\n /**\n * Remove event\n * @private\n */\n _removeEvent() {\n this._els.lineSelectButton.removeEventListener('click', this.eventHandler.changeDrawType);\n this._els.drawColorPicker.off();\n this._els.drawRange.off();\n\n this.colorPickerInputBox.removeEventListener(\n eventNames.FOCUS,\n this._onStartEditingInputBox.bind(this)\n );\n this.colorPickerInputBox.removeEventListener(\n eventNames.BLUR,\n this._onStopEditingInputBox.bind(this)\n );\n }\n\n /**\n * set draw mode - action runner\n */\n setDrawMode() {\n this.actions.setDrawMode(this.type, {\n width: this.width,\n color: getRgb(this.color, DRAW_OPACITY),\n });\n }\n\n /**\n * Returns the menu to its default state.\n */\n changeStandbyMode() {\n this.type = null;\n this.actions.stopDrawingMode();\n this.actions.changeSelectableAll(true);\n this._els.lineSelectButton.classList.remove('free');\n this._els.lineSelectButton.classList.remove('line');\n }\n\n /**\n * Executed when the menu starts.\n */\n changeStartMode() {\n this.type = 'free';\n this._els.lineSelectButton.classList.add('free');\n this.setDrawMode();\n }\n\n /**\n * Change draw type event\n * @param {object} event - line select event\n * @private\n */\n _changeDrawType(event) {\n const button = event.target.closest('.tui-image-editor-button');\n if (button) {\n const lineType = this.getButtonType(button, ['free', 'line']);\n this.actions.discardSelection();\n\n if (this.type === lineType) {\n this.changeStandbyMode();\n\n return;\n }\n\n this.changeStandbyMode();\n this.type = lineType;\n this._els.lineSelectButton.classList.add(lineType);\n this.setDrawMode();\n }\n }\n\n /**\n * Change drawing color\n * @param {string} color - select drawing color\n * @private\n */\n _changeDrawColor(color) {\n this.color = color || 'transparent';\n if (!this.type) {\n this.changeStartMode();\n } else {\n this.setDrawMode();\n }\n }\n\n /**\n * Change drawing Range\n * @param {number} value - select drawing range\n * @private\n */\n _changeDrawRange(value) {\n this.width = value;\n if (!this.type) {\n this.changeStartMode();\n } else {\n this.setDrawMode();\n }\n }\n}\n\nexport default Draw;\n","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon }) => `\n
                            \n
                          • \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'draw-free', true)}\n
                            \n \n
                            \n
                            \n
                            \n ${makeSvgIcon(['normal', 'active'], 'draw-line', true)}\n
                            \n \n
                            \n
                            • \n
                          • \n
                            \n
                            • \n
                          • \n
                            \n
                            • \n
                          • \n
                            \n
                            • \n
                          • \n \n
                            \n \n
                            • \n
                          \n`;\n","import snippet from 'tui-code-snippet';\nimport Colorpicker from '@/ui/tools/colorpicker';\nimport Range from '@/ui/tools/range';\nimport Submenu from '@/ui/submenuBase';\nimport templateHtml from '@/ui/template/submenu/filter';\nimport { toInteger, toCamelCase, assignmentForDestroy } from '@/util';\nimport { defaultFilterRangeValues as FILTER_RANGE, eventNames, selectorNames } from '@/consts';\n\nconst PICKER_CONTROL_HEIGHT = '130px';\nconst BLEND_OPTIONS = ['add', 'diff', 'subtract', 'multiply', 'screen', 'lighten', 'darken'];\nconst FILTER_OPTIONS = [\n 'grayscale',\n 'invert',\n 'sepia',\n 'vintage',\n 'blur',\n 'sharpen',\n 'emboss',\n 'remove-white',\n 'brightness',\n 'noise',\n 'pixelate',\n 'color-filter',\n 'tint',\n 'multiply',\n 'blend',\n];\nconst filterNameMap = {\n grayscale: 'grayscale',\n invert: 'invert',\n sepia: 'sepia',\n blur: 'blur',\n sharpen: 'sharpen',\n emboss: 'emboss',\n removeWhite: 'removeColor',\n brightness: 'brightness',\n contrast: 'contrast',\n saturation: 'saturation',\n vintage: 'vintage',\n polaroid: 'polaroid',\n noise: 'noise',\n pixelate: 'pixelate',\n colorFilter: 'removeColor',\n tint: 'blendColor',\n multiply: 'blendColor',\n blend: 'blendColor',\n hue: 'hue',\n gamma: 'gamma',\n};\nconst RANGE_INSTANCE_NAMES = [\n 'removewhiteDistanceRange',\n 'colorfilterThresholdRange',\n 'pixelateRange',\n 'noiseRange',\n 'brightnessRange',\n 'tintOpacity',\n];\nconst COLORPICKER_INSTANCE_NAMES = ['filterBlendColor', 'filterMultiplyColor', 'filterTintColor'];\n\n/**\n * Filter ui class\n * @class\n * @ignore\n */\nclass Filter extends Submenu {\n constructor(subMenuElement, { locale, menuBarPosition, usageStatistics }) {\n super(subMenuElement, {\n locale,\n name: 'filter',\n menuBarPosition,\n templateHtml,\n usageStatistics,\n });\n\n this.selectBoxShow = false;\n\n this.checkedMap = {};\n this._makeControlElement();\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this._removeEvent();\n this._destroyToolInstance();\n\n assignmentForDestroy(this);\n }\n\n /**\n * Remove event for filter\n */\n _removeEvent() {\n snippet.forEach(FILTER_OPTIONS, (filter) => {\n const filterCheckElement = this.selector(`.tie-${filter}`);\n const filterNameCamelCase = toCamelCase(filter);\n\n filterCheckElement.removeEventListener('change', this.eventHandler[filterNameCamelCase]);\n });\n\n snippet.forEach([...RANGE_INSTANCE_NAMES, ...COLORPICKER_INSTANCE_NAMES], (instanceName) => {\n this._els[instanceName].off();\n });\n\n this._els.blendType.removeEventListener('change', this.eventHandler.changeBlendFilter);\n this._els.blendType.removeEventListener('click', this.eventHandler.changeBlendFilter);\n\n snippet.forEachArray(\n this.colorPickerInputBoxes,\n (inputBox) => {\n inputBox.removeEventListener(eventNames.FOCUS, this._onStartEditingInputBox.bind(this));\n inputBox.removeEventListener(eventNames.BLUR, this._onStopEditingInputBox.bind(this));\n },\n this\n );\n }\n\n _destroyToolInstance() {\n snippet.forEach([...RANGE_INSTANCE_NAMES, ...COLORPICKER_INSTANCE_NAMES], (instanceName) => {\n this._els[instanceName].destroy();\n });\n }\n\n /**\n * Add event for filter\n * @param {Object} actions - actions for crop\n * @param {Function} actions.applyFilter - apply filter option\n */\n addEvent({ applyFilter }) {\n const changeFilterState = (filterName) =>\n this._changeFilterState.bind(this, applyFilter, filterName);\n const changeFilterStateForRange = (filterName) => (value, isLast) =>\n this._changeFilterState(applyFilter, filterName, isLast);\n\n this.eventHandler = {\n changeBlendFilter: changeFilterState('blend'),\n blandTypeClick: (event) => event.stopPropagation(),\n };\n\n snippet.forEach(FILTER_OPTIONS, (filter) => {\n const filterCheckElement = this.selector(`.tie-${filter}`);\n const filterNameCamelCase = toCamelCase(filter);\n this.checkedMap[filterNameCamelCase] = filterCheckElement;\n this.eventHandler[filterNameCamelCase] = changeFilterState(filterNameCamelCase);\n\n filterCheckElement.addEventListener('change', this.eventHandler[filterNameCamelCase]);\n });\n\n this._els.removewhiteDistanceRange.on('change', changeFilterStateForRange('removeWhite'));\n this._els.colorfilterThresholdRange.on('change', changeFilterStateForRange('colorFilter'));\n this._els.pixelateRange.on('change', changeFilterStateForRange('pixelate'));\n this._els.noiseRange.on('change', changeFilterStateForRange('noise'));\n this._els.brightnessRange.on('change', changeFilterStateForRange('brightness'));\n\n this._els.filterBlendColor.on('change', this.eventHandler.changeBlendFilter);\n this._els.filterMultiplyColor.on('change', changeFilterState('multiply'));\n this._els.filterTintColor.on('change', changeFilterState('tint'));\n this._els.tintOpacity.on('change', changeFilterStateForRange('tint'));\n this._els.filterMultiplyColor.on('changeShow', this.colorPickerChangeShow.bind(this));\n this._els.filterTintColor.on('changeShow', this.colorPickerChangeShow.bind(this));\n this._els.filterBlendColor.on('changeShow', this.colorPickerChangeShow.bind(this));\n\n this._els.blendType.addEventListener('change', this.eventHandler.changeBlendFilter);\n this._els.blendType.addEventListener('click', this.eventHandler.blandTypeClick);\n\n snippet.forEachArray(\n this.colorPickerInputBoxes,\n (inputBox) => {\n inputBox.addEventListener(eventNames.FOCUS, this._onStartEditingInputBox.bind(this));\n inputBox.addEventListener(eventNames.BLUR, this._onStopEditingInputBox.bind(this));\n },\n this\n );\n }\n\n /**\n * Set filter for undo changed\n * @param {Object} changedFilterInfos - changed command infos\n * @param {string} type - filter type\n * @param {string} action - add or remove\n * @param {Object} options - filter options\n */\n setFilterState(changedFilterInfos) {\n const { type, options, action } = changedFilterInfos;\n const filterName = this._getFilterNameFromOptions(type, options);\n const isRemove = action === 'remove';\n\n if (!isRemove) {\n this._setFilterState(filterName, options);\n }\n\n this.checkedMap[filterName].checked = !isRemove;\n }\n\n /**\n * Init all filter's checkbox to unchecked state\n */\n initFilterCheckBoxState() {\n snippet.forEach(\n this.checkedMap,\n (filter) => {\n filter.checked = false;\n },\n this\n );\n }\n\n /**\n * Set filter for undo changed\n * @param {string} filterName - filter name\n * @param {Object} options - filter options\n * @private\n */\n // eslint-disable-next-line complexity\n _setFilterState(filterName, options) {\n if (filterName === 'colorFilter') {\n this._els.colorfilterThresholdRange.value = options.distance;\n } else if (filterName === 'removeWhite') {\n this._els.removewhiteDistanceRange.value = options.distance;\n } else if (filterName === 'pixelate') {\n this._els.pixelateRange.value = options.blocksize;\n } else if (filterName === 'brightness') {\n this._els.brightnessRange.value = options.brightness;\n } else if (filterName === 'noise') {\n this._els.noiseRange.value = options.noise;\n } else if (filterName === 'tint') {\n this._els.tintOpacity.value = options.alpha;\n this._els.filterTintColor.color = options.color;\n } else if (filterName === 'blend') {\n this._els.filterBlendColor.color = options.color;\n } else if (filterName === 'multiply') {\n this._els.filterMultiplyColor.color = options.color;\n }\n }\n\n /**\n * Get filter name\n * @param {string} type - filter type\n * @param {Object} options - filter options\n * @returns {string} filter name\n * @private\n */\n _getFilterNameFromOptions(type, options) {\n let filterName = type;\n\n if (type === 'removeColor') {\n filterName = snippet.isExisty(options.useAlpha) ? 'removeWhite' : 'colorFilter';\n } else if (type === 'blendColor') {\n filterName = {\n add: 'blend',\n multiply: 'multiply',\n tint: 'tint',\n }[options.mode];\n }\n\n return filterName;\n }\n\n /**\n * Add event for filter\n * @param {Function} applyFilter - actions for firter\n * @param {string} filterName - filter name\n * @param {boolean} [isLast] - Is last change\n */\n _changeFilterState(applyFilter, filterName, isLast = true) {\n const apply = this.checkedMap[filterName].checked;\n const type = filterNameMap[filterName];\n\n const checkboxGroup = this.checkedMap[filterName].closest('.tui-image-editor-checkbox-group');\n if (checkboxGroup) {\n if (apply) {\n checkboxGroup.classList.remove('tui-image-editor-disabled');\n } else {\n checkboxGroup.classList.add('tui-image-editor-disabled');\n }\n }\n applyFilter(apply, type, this._getFilterOption(filterName), !isLast);\n }\n\n /**\n * Get filter option\n * @param {String} type - filter type\n * @returns {Object} filter option object\n * @private\n */\n // eslint-disable-next-line complexity\n _getFilterOption(type) {\n const option = {};\n switch (type) {\n case 'removeWhite':\n option.color = '#FFFFFF';\n option.useAlpha = false;\n option.distance = parseFloat(this._els.removewhiteDistanceRange.value);\n break;\n case 'colorFilter':\n option.color = '#FFFFFF';\n option.distance = parseFloat(this._els.colorfilterThresholdRange.value);\n break;\n case 'pixelate':\n option.blocksize = toInteger(this._els.pixelateRange.value);\n break;\n case 'noise':\n option.noise = toInteger(this._els.noiseRange.value);\n break;\n case 'brightness':\n option.brightness = parseFloat(this._els.brightnessRange.value);\n break;\n case 'blend':\n option.mode = 'add';\n option.color = this._els.filterBlendColor.color;\n option.mode = this._els.blendType.value;\n break;\n case 'multiply':\n option.mode = 'multiply';\n option.color = this._els.filterMultiplyColor.color;\n break;\n case 'tint':\n option.mode = 'tint';\n option.color = this._els.filterTintColor.color;\n option.alpha = this._els.tintOpacity.value;\n break;\n case 'blur':\n option.blur = this._els.blurRange.value;\n break;\n default:\n break;\n }\n\n return option;\n }\n\n /**\n * Make submenu range and colorpicker control\n * @private\n */\n _makeControlElement() {\n this._els = {\n removewhiteDistanceRange: new Range(\n { slider: this.selector('.tie-removewhite-distance-range') },\n FILTER_RANGE.removewhiteDistanceRange\n ),\n brightnessRange: new Range(\n { slider: this.selector('.tie-brightness-range') },\n FILTER_RANGE.brightnessRange\n ),\n noiseRange: new Range({ slider: this.selector('.tie-noise-range') }, FILTER_RANGE.noiseRange),\n pixelateRange: new Range(\n { slider: this.selector('.tie-pixelate-range') },\n FILTER_RANGE.pixelateRange\n ),\n colorfilterThresholdRange: new Range(\n { slider: this.selector('.tie-colorfilter-threshold-range') },\n FILTER_RANGE.colorfilterThresholdRange\n ),\n filterTintColor: new Colorpicker(\n this.selector('.tie-filter-tint-color'),\n '#03bd9e',\n this.toggleDirection,\n this.usageStatistics\n ),\n filterMultiplyColor: new Colorpicker(\n this.selector('.tie-filter-multiply-color'),\n '#515ce6',\n this.toggleDirection,\n this.usageStatistics\n ),\n filterBlendColor: new Colorpicker(\n this.selector('.tie-filter-blend-color'),\n '#ffbb3b',\n this.toggleDirection,\n this.usageStatistics\n ),\n blurRange: FILTER_RANGE.blurFilterRange,\n };\n\n this._els.tintOpacity = this._pickerWithRange(this._els.filterTintColor.pickerControl);\n this._els.blendType = this._pickerWithSelectbox(this._els.filterBlendColor.pickerControl);\n\n this.colorPickerControls.push(this._els.filterTintColor);\n this.colorPickerControls.push(this._els.filterMultiplyColor);\n this.colorPickerControls.push(this._els.filterBlendColor);\n\n this.colorPickerInputBoxes = [];\n this.colorPickerInputBoxes.push(\n this._els.filterTintColor.colorpickerElement.querySelector(\n selectorNames.COLOR_PICKER_INPUT_BOX\n )\n );\n this.colorPickerInputBoxes.push(\n this._els.filterMultiplyColor.colorpickerElement.querySelector(\n selectorNames.COLOR_PICKER_INPUT_BOX\n )\n );\n this.colorPickerInputBoxes.push(\n this._els.filterBlendColor.colorpickerElement.querySelector(\n selectorNames.COLOR_PICKER_INPUT_BOX\n )\n );\n }\n\n /**\n * Make submenu control for picker & range mixin\n * @param {HTMLElement} pickerControl - pickerControl dom element\n * @returns {Range}\n * @private\n */\n _pickerWithRange(pickerControl) {\n const rangeWrap = document.createElement('div');\n const rangeLabel = document.createElement('label');\n const slider = document.createElement('div');\n\n slider.id = 'tie-filter-tint-opacity';\n rangeLabel.innerHTML = 'Opacity';\n rangeWrap.appendChild(rangeLabel);\n rangeWrap.appendChild(slider);\n pickerControl.appendChild(rangeWrap);\n pickerControl.style.height = PICKER_CONTROL_HEIGHT;\n\n return new Range({ slider }, FILTER_RANGE.tintOpacityRange);\n }\n\n /**\n * Make submenu control for picker & selectbox\n * @param {HTMLElement} pickerControl - pickerControl dom element\n * @returns {HTMLElement}\n * @private\n */\n _pickerWithSelectbox(pickerControl) {\n const selectlistWrap = document.createElement('div');\n const selectlist = document.createElement('select');\n const optionlist = document.createElement('ul');\n\n selectlistWrap.className = 'tui-image-editor-selectlist-wrap';\n optionlist.className = 'tui-image-editor-selectlist';\n\n selectlistWrap.appendChild(selectlist);\n selectlistWrap.appendChild(optionlist);\n\n this._makeSelectOptionList(selectlist);\n\n pickerControl.appendChild(selectlistWrap);\n pickerControl.style.height = PICKER_CONTROL_HEIGHT;\n\n this._drawSelectOptionList(selectlist, optionlist);\n this._pickerWithSelectboxForAddEvent(selectlist, optionlist);\n\n return selectlist;\n }\n\n /**\n * Make selectbox option list custom style\n * @param {HTMLElement} selectlist - selectbox element\n * @param {HTMLElement} optionlist - custom option list item element\n * @private\n */\n _drawSelectOptionList(selectlist, optionlist) {\n const options = selectlist.querySelectorAll('option');\n snippet.forEach(options, (option) => {\n const optionElement = document.createElement('li');\n optionElement.innerHTML = option.innerHTML;\n optionElement.setAttribute('data-item', option.value);\n optionlist.appendChild(optionElement);\n });\n }\n\n /**\n * custom selectbox custom event\n * @param {HTMLElement} selectlist - selectbox element\n * @param {HTMLElement} optionlist - custom option list item element\n * @private\n */\n _pickerWithSelectboxForAddEvent(selectlist, optionlist) {\n optionlist.addEventListener('click', (event) => {\n const optionValue = event.target.getAttribute('data-item');\n const fireEvent = document.createEvent('HTMLEvents');\n\n selectlist.querySelector(`[value=\"${optionValue}\"]`).selected = true;\n fireEvent.initEvent('change', true, true);\n\n selectlist.dispatchEvent(fireEvent);\n\n this.selectBoxShow = false;\n optionlist.style.display = 'none';\n });\n\n selectlist.addEventListener('mousedown', (event) => {\n event.preventDefault();\n this.selectBoxShow = !this.selectBoxShow;\n optionlist.style.display = this.selectBoxShow ? 'block' : 'none';\n optionlist.setAttribute('data-selectitem', selectlist.value);\n optionlist.querySelector(`[data-item='${selectlist.value}']`).classList.add('active');\n });\n }\n\n /**\n * Make option list for select control\n * @param {HTMLElement} selectlist - blend option select list element\n * @private\n */\n _makeSelectOptionList(selectlist) {\n snippet.forEach(BLEND_OPTIONS, (option) => {\n const selectOption = document.createElement('option');\n selectOption.setAttribute('value', option);\n selectOption.innerHTML = option.replace(/^[a-z]/, ($0) => $0.toUpperCase());\n selectlist.appendChild(selectOption);\n });\n }\n}\n\nexport default Filter;\n","/**\n * @param {Locale} locale - Translate text\n * @returns {string}\n */\nexport default ({ locale }) => `\n
                            \n
                          • \n
                            \n
                            \n \n
                            \n
                            \n \n
                            \n
                            \n \n
                            \n
                            \n \n
                            \n
                            \n \n
                            \n
                            \n \n
                            \n
                            \n \n
                            \n
                            \n
                            • \n
                          • \n
                            \n
                            • \n
                          • \n
                            \n
                            \n
                            \n \n
                            \n
                            \n
                            \n \n
                            \n
                            \n
                            \n
                            \n
                            \n \n
                            \n
                            \n
                            \n
                            \n
                            \n
                            \n
                            \n \n
                            \n
                            \n
                            \n
                            \n
                            \n
                            • \n
                          • \n
                            \n
                            • \n
                          • \n
                            \n
                            \n \n
                            \n
                            \n
                            \n
                            \n
                            \n
                            \n
                            \n
                            \n \n
                            \n
                            \n
                            \n \n
                            \n
                            \n
                            \n
                            • \n
                          • \n
                            \n
                            • \n
                          • \n
                            \n
                            \n
                            \n \n
                            \n
                            \n
                            \n
                            \n
                            \n \n
                            \n
                            \n
                            \n
                            \n
                            \n \n
                            \n
                            \n
                            • \n
                          \n`;\n","import Panel from '@/ui/panelMenu';\nimport templateHtml from '@/ui/template/submenu/history';\nimport { assignmentForDestroy } from '@/util';\n\nconst historyClassName = 'history-item';\nconst selectedClassName = 'selected-item';\nconst disabledClassName = 'disabled-item';\n\n/**\n * History ui class\n * @class\n * @ignore\n */\nclass History extends Panel {\n constructor(menuElement, { locale, makeSvgIcon }) {\n super(menuElement, { name: 'history' });\n menuElement.classList.add('enabled');\n\n this.locale = locale;\n this.makeSvgIcon = makeSvgIcon;\n this._eventHandler = {};\n this._historyIndex = this.getListLength();\n }\n\n /**\n * Add history\n * @param {string} name - name of history\n * @param {?string} detail - detail information of history\n */\n add({ name, detail }) {\n if (this._hasDisabledItem()) {\n this.deleteListItemElement(this._historyIndex + 1, this.getListLength());\n }\n\n const html = templateHtml({ locale: this.locale, makeSvgIcon: this.makeSvgIcon, name, detail });\n const item = this.makeListItemElement(html);\n\n this.pushListItemElement(item);\n this._historyIndex = this.getListLength() - 1;\n this._selectItem(this._historyIndex);\n }\n\n /**\n * Init history\n */\n init() {\n this.deleteListItemElement(1, this.getListLength());\n this._historyIndex = 0;\n this._selectItem(this._historyIndex);\n }\n\n /**\n * Clear history\n */\n clear() {\n this.deleteListItemElement(0, this.getListLength());\n this._historyIndex = -1;\n }\n\n /**\n * Select previous history of current selected history\n */\n prev() {\n this._historyIndex -= 1;\n this._selectItem(this._historyIndex);\n }\n\n /**\n * Select next history of current selected history\n */\n next() {\n this._historyIndex += 1;\n this._selectItem(this._historyIndex);\n }\n\n /**\n * Whether history menu has disabled item\n * @returns {boolean}\n */\n _hasDisabledItem() {\n return this.getListLength() - 1 > this._historyIndex;\n }\n\n /**\n * Add history menu event\n * @private\n */\n _addHistoryEventListener() {\n this._eventHandler.history = (event) => this._clickHistoryItem(event);\n this.listElement.addEventListener('click', this._eventHandler.history);\n }\n\n /**\n * Remove history menu event\n * @private\n */\n _removeHistoryEventListener() {\n this.listElement.removeEventListener('click', this._eventHandler.history);\n }\n\n /**\n * onClick history menu event listener\n * @param {object} event - event object\n * @private\n */\n _clickHistoryItem(event) {\n const { target } = event;\n const item = target.closest(`.${historyClassName}`);\n\n if (!item) {\n return;\n }\n\n const index = Number.parseInt(item.getAttribute('data-index'), 10);\n\n if (index !== this._historyIndex) {\n const count = Math.abs(index - this._historyIndex);\n\n if (index < this._historyIndex) {\n this._actions.undo(count);\n } else {\n this._actions.redo(count);\n }\n }\n }\n\n /**\n * Change item's state to selected state\n * @param {number} index - index of selected item\n */\n _selectItem(index) {\n for (let i = 0; i < this.getListLength(); i += 1) {\n this.removeClass(i, selectedClassName);\n this.removeClass(i, disabledClassName);\n if (i > index) {\n this.addClass(i, disabledClassName);\n }\n }\n this.addClass(index, selectedClassName);\n }\n\n /**\n * Destroys the instance.\n */\n destroy() {\n this.removeEvent();\n\n assignmentForDestroy(this);\n }\n\n /**\n * Add event for history\n * @param {Object} actions - actions for crop\n * @param {Function} actions.undo - undo action\n * @param {Function} actions.redo - redo action\n */\n addEvent(actions) {\n this._actions = actions;\n this._addHistoryEventListener();\n }\n\n /**\n * Remove event\n * @private\n */\n removeEvent() {\n this._removeHistoryEventListener();\n }\n}\n\nexport default History;\n","/**\n * Menu Panel Class\n * @class\n * @ignore\n */\n\nclass Panel {\n /**\n * @param {HTMLElement} menuElement - menu dom element\n * @param {Object} options - menu options\n * @param {string} options.name - name of panel menu\n */\n constructor(menuElement, { name }) {\n this.name = name;\n this.items = [];\n\n this.panelElement = this._makePanelElement();\n this.listElement = this._makeListElement();\n\n this.panelElement.appendChild(this.listElement);\n menuElement.appendChild(this.panelElement);\n }\n\n /**\n * Make Panel element\n * @returns {HTMLElement}\n */\n _makePanelElement() {\n const panel = document.createElement('div');\n\n panel.className = `tie-panel-${this.name}`;\n\n return panel;\n }\n\n /**\n * Make list element\n * @returns {HTMLElement} list element\n * @private\n */\n _makeListElement() {\n const list = document.createElement('ol');\n\n list.className = `${this.name}-list`;\n\n return list;\n }\n\n /**\n * Make list item element\n * @param {string} html - history list item html\n * @returns {HTMLElement} list item element\n */\n makeListItemElement(html) {\n const listItem = document.createElement('li');\n\n listItem.innerHTML = html;\n listItem.className = `${this.name}-item`;\n listItem.setAttribute('data-index', this.items.length);\n\n return listItem;\n }\n\n /**\n * Push list item element\n * @param {HTMLElement} item - list item element to add to the list\n */\n pushListItemElement(item) {\n this.listElement.appendChild(item);\n this.listElement.scrollTop += item.offsetHeight;\n this.items.push(item);\n }\n\n /**\n * Delete list item element\n * @param {number} start - start index to delete\n * @param {number} end - end index to delete\n */\n deleteListItemElement(start, end) {\n const { items } = this;\n\n for (let i = start; i < end; i += 1) {\n this.listElement.removeChild(items[i]);\n }\n items.splice(start, end - start + 1);\n }\n\n /**\n * Get list's length\n * @returns {number}\n */\n getListLength() {\n return this.items.length;\n }\n\n /**\n * Add class name of item\n * @param {number} index - index of item\n * @param {string} className - class name to add\n */\n addClass(index, className) {\n if (this.items[index]) {\n this.items[index].classList.add(className);\n }\n }\n\n /**\n * Remove class name of item\n * @param {number} index - index of item\n * @param {string} className - class name to remove\n */\n removeClass(index, className) {\n if (this.items[index]) {\n this.items[index].classList.remove(className);\n }\n }\n\n /**\n * Toggle class name of item\n * @param {number} index - index of item\n * @param {string} className - class name to remove\n */\n toggleClass(index, className) {\n if (this.items[index]) {\n this.items[index].classList.toggle(className);\n }\n }\n}\n\nexport default Panel;\n","/**\n * @param {Object} submenuInfo - submenu info for make template\n * @param {Locale} locale - Translate text\n * @param {Function} makeSvgIcon - svg icon generator\n * @param {string} name - history name\n * @param {string} detail - history detail information\n * @returns {string}\n */\nexport default ({ locale, makeSvgIcon, name, detail }) => `\n
                          \n
                          \n ${makeSvgIcon(['normal', 'active'], `history-${name.toLowerCase()}`, true)}\n
                          \n \n ${locale.localize(name)}\n ${detail ? `(${locale.localize(detail)})` : ''}\n \n
                          \n ${makeSvgIcon(['normal'], 'history-check', true)}\n
                          \n
                          \n`;\n","/**\n * Translate messages\n */\nclass Locale {\n /**\n * @constructor\n * @param {Object} locale - Locale object for initialise\n */\n constructor(locale) {\n this._locale = locale;\n }\n\n /**\n * localize message\n * @param {string} message - message who will be localized\n * @returns {string}\n */\n localize(message) {\n return this._locale[message] || message;\n }\n}\n\nexport default Locale;\n","import { extend } from 'tui-code-snippet';\nimport Imagetracer from '@/helper/imagetracer';\nimport { isSupportFileApi, base64ToBlob, toInteger, isEmptyCropzone, includes } from '@/util';\nimport { eventNames, historyNames, drawingModes, drawingMenuNames, zoomModes } from '@/consts';\n\nexport default {\n /**\n * Get ui actions\n * @returns {Object} actions for ui\n * @private\n */\n getActions() {\n return {\n main: this._mainAction(),\n shape: this._shapeAction(),\n crop: this._cropAction(),\n resize: this._resizeAction(),\n flip: this._flipAction(),\n rotate: this._rotateAction(),\n text: this._textAction(),\n mask: this._maskAction(),\n draw: this._drawAction(),\n icon: this._iconAction(),\n filter: this._filterAction(),\n history: this._historyAction(),\n };\n },\n\n /**\n * Main Action\n * @returns {Object} actions for ui main\n * @private\n */\n _mainAction() {\n const exitCropOnAction = () => {\n if (this.ui.submenu === 'crop') {\n this.stopDrawingMode();\n this.ui.changeMenu('crop');\n }\n };\n const setAngleRangeBarOnAction = (angle) => {\n if (this.ui.submenu === 'rotate') {\n this.ui.rotate.setRangeBarAngle('setAngle', angle);\n }\n };\n const setFilterStateRangeBarOnAction = (filterOptions) => {\n if (this.ui.submenu === 'filter') {\n this.ui.filter.setFilterState(filterOptions);\n }\n };\n const onEndUndoRedo = (result) => {\n setAngleRangeBarOnAction(result);\n setFilterStateRangeBarOnAction(result);\n\n return result;\n };\n const toggleZoomMode = () => {\n const zoomMode = this._graphics.getZoomMode();\n\n this.stopDrawingMode();\n if (zoomMode !== zoomModes.ZOOM) {\n this.startDrawingMode(drawingModes.ZOOM);\n this._graphics.startZoomInMode();\n } else {\n this._graphics.endZoomInMode();\n }\n };\n const toggleHandMode = () => {\n const zoomMode = this._graphics.getZoomMode();\n\n this.stopDrawingMode();\n if (zoomMode !== zoomModes.HAND) {\n this.startDrawingMode(drawingModes.ZOOM);\n this._graphics.startHandMode();\n } else {\n this._graphics.endHandMode();\n }\n };\n const initFilterState = () => {\n if (this.ui.filter) {\n this.ui.filter.initFilterCheckBoxState();\n }\n };\n\n return extend(\n {\n initLoadImage: (imagePath, imageName) =>\n this.loadImageFromURL(imagePath, imageName).then((sizeValue) => {\n exitCropOnAction();\n this.ui.initializeImgUrl = imagePath;\n this.ui.resizeEditor({ imageSize: sizeValue });\n this.clearUndoStack();\n this._invoker.fire(eventNames.EXECUTE_COMMAND, historyNames.LOAD_IMAGE);\n }),\n undo: () => {\n if (!this.isEmptyUndoStack()) {\n exitCropOnAction();\n this.deactivateAll();\n this.undo().then(onEndUndoRedo);\n }\n },\n redo: () => {\n if (!this.isEmptyRedoStack()) {\n exitCropOnAction();\n this.deactivateAll();\n this.redo().then(onEndUndoRedo);\n }\n },\n reset: () => {\n exitCropOnAction();\n this.loadImageFromURL(this.ui.initializeImgUrl, 'resetImage').then((sizeValue) => {\n exitCropOnAction();\n initFilterState();\n this.ui.resizeEditor({ imageSize: sizeValue });\n this.clearUndoStack();\n this._initHistory();\n });\n },\n delete: () => {\n this.ui.changeHelpButtonEnabled('delete', false);\n exitCropOnAction();\n this.removeActiveObject();\n this.activeObjectId = null;\n },\n deleteAll: () => {\n exitCropOnAction();\n this.clearObjects();\n this.ui.changeHelpButtonEnabled('delete', false);\n this.ui.changeHelpButtonEnabled('deleteAll', false);\n },\n load: (file) => {\n if (!isSupportFileApi()) {\n alert('This browser does not support file-api');\n }\n\n this.ui.initializeImgUrl = URL.createObjectURL(file);\n this.loadImageFromFile(file)\n .then((sizeValue) => {\n exitCropOnAction();\n initFilterState();\n this.clearUndoStack();\n this.ui.activeMenuEvent();\n this.ui.resizeEditor({ imageSize: sizeValue });\n this._clearHistory();\n this._invoker.fire(eventNames.EXECUTE_COMMAND, historyNames.LOAD_IMAGE);\n })\n ['catch']((message) => Promise.reject(message));\n },\n download: () => {\n const dataURL = this.toDataURL();\n let imageName = this.getImageName();\n let blob, type, w;\n\n if (isSupportFileApi() && window.saveAs) {\n blob = base64ToBlob(dataURL);\n type = blob.type.split('/')[1];\n if (imageName.split('.').pop() !== type) {\n imageName += `.${type}`;\n }\n saveAs(blob, imageName); // eslint-disable-line\n } else {\n w = window.open();\n w.document.body.innerHTML = ``;\n }\n },\n history: (event) => {\n this.ui.toggleHistoryMenu(event);\n },\n zoomIn: () => {\n this.ui.toggleZoomButtonStatus('zoomIn');\n this.deactivateAll();\n toggleZoomMode();\n },\n zoomOut: () => {\n this._graphics.zoomOut();\n },\n hand: () => {\n this.ui.offZoomInButtonStatus();\n this.ui.toggleZoomButtonStatus('hand');\n this.deactivateAll();\n toggleHandMode();\n },\n },\n this._commonAction()\n );\n },\n\n /**\n * Icon Action\n * @returns {Object} actions for ui icon\n * @private\n */\n _iconAction() {\n return extend(\n {\n changeColor: (color) => {\n if (this.activeObjectId) {\n this.changeIconColor(this.activeObjectId, color);\n }\n },\n addIcon: (iconType, iconColor) => {\n this.startDrawingMode('ICON');\n this.setDrawingIcon(iconType, iconColor);\n },\n cancelAddIcon: () => {\n this.ui.icon.clearIconType();\n this.changeSelectableAll(true);\n this.changeCursor('default');\n this.stopDrawingMode();\n },\n registerDefaultIcons: (type, path) => {\n const iconObj = {};\n iconObj[type] = path;\n this.registerIcons(iconObj);\n },\n registerCustomIcon: (imgUrl, file) => {\n const imagetracer = new Imagetracer();\n imagetracer.imageToSVG(\n imgUrl,\n (svgstr) => {\n const [, svgPath] = svgstr.match(/path[^>]*d=\"([^\"]*)\"/);\n const iconObj = {};\n iconObj[file.name] = svgPath;\n this.registerIcons(iconObj);\n this.addIcon(file.name, {\n left: 100,\n top: 100,\n });\n },\n Imagetracer.tracerDefaultOption()\n );\n },\n },\n this._commonAction()\n );\n },\n\n /**\n * Draw Action\n * @returns {Object} actions for ui draw\n * @private\n */\n _drawAction() {\n return extend(\n {\n setDrawMode: (type, settings) => {\n this.stopDrawingMode();\n if (type === 'free') {\n this.startDrawingMode('FREE_DRAWING', settings);\n } else {\n this.startDrawingMode('LINE_DRAWING', settings);\n }\n },\n setColor: (color) => {\n this.setBrush({\n color,\n });\n },\n },\n this._commonAction()\n );\n },\n\n /**\n * Mask Action\n * @returns {Object} actions for ui mask\n * @private\n */\n _maskAction() {\n return extend(\n {\n loadImageFromURL: (imgUrl, file) => {\n return this.loadImageFromURL(this.toDataURL(), 'FilterImage').then(() => {\n this.addImageObject(imgUrl).then(() => {\n URL.revokeObjectURL(file);\n });\n this._invoker.fire(eventNames.EXECUTE_COMMAND, historyNames.LOAD_MASK_IMAGE);\n });\n },\n applyFilter: () => {\n this.applyFilter('mask', {\n maskObjId: this.activeObjectId,\n });\n },\n },\n this._commonAction()\n );\n },\n\n /**\n * Text Action\n * @returns {Object} actions for ui text\n * @private\n */\n _textAction() {\n return extend(\n {\n changeTextStyle: (styleObj, isSilent) => {\n if (this.activeObjectId) {\n this.changeTextStyle(this.activeObjectId, styleObj, isSilent);\n }\n },\n },\n this._commonAction()\n );\n },\n\n /**\n * Rotate Action\n * @returns {Object} actions for ui rotate\n * @private\n */\n _rotateAction() {\n return extend(\n {\n rotate: (angle, isSilent) => {\n this.rotate(angle, isSilent);\n this.ui.resizeEditor();\n this.ui.rotate.setRangeBarAngle('rotate', angle);\n },\n setAngle: (angle, isSilent) => {\n this.setAngle(angle, isSilent);\n this.ui.resizeEditor();\n this.ui.rotate.setRangeBarAngle('setAngle', angle);\n },\n },\n this._commonAction()\n );\n },\n\n /**\n * Shape Action\n * @returns {Object} actions for ui shape\n * @private\n */\n _shapeAction() {\n return extend(\n {\n changeShape: (changeShapeObject, isSilent) => {\n if (this.activeObjectId) {\n this.changeShape(this.activeObjectId, changeShapeObject, isSilent);\n }\n },\n setDrawingShape: (shapeType) => {\n this.setDrawingShape(shapeType);\n },\n },\n this._commonAction()\n );\n },\n\n /**\n * Crop Action\n * @returns {Object} actions for ui crop\n * @private\n */\n _cropAction() {\n return extend(\n {\n crop: () => {\n const cropRect = this.getCropzoneRect();\n if (cropRect && !isEmptyCropzone(cropRect)) {\n this.crop(cropRect)\n .then(() => {\n this.stopDrawingMode();\n this.ui.resizeEditor();\n this.ui.changeMenu('crop');\n this._invoker.fire(eventNames.EXECUTE_COMMAND, historyNames.CROP);\n })\n ['catch']((message) => Promise.reject(message));\n }\n },\n cancel: () => {\n this.stopDrawingMode();\n this.ui.changeMenu('crop');\n },\n /* eslint-disable */\n preset: (presetType) => {\n switch (presetType) {\n case 'preset-square':\n this.setCropzoneRect(1 / 1);\n break;\n case 'preset-3-2':\n this.setCropzoneRect(3 / 2);\n break;\n case 'preset-4-3':\n this.setCropzoneRect(4 / 3);\n break;\n case 'preset-5-4':\n this.setCropzoneRect(5 / 4);\n break;\n case 'preset-7-5':\n this.setCropzoneRect(7 / 5);\n break;\n case 'preset-16-9':\n this.setCropzoneRect(16 / 9);\n break;\n default:\n this.setCropzoneRect();\n this.ui.crop.changeApplyButtonStatus(false);\n break;\n }\n },\n },\n this._commonAction()\n );\n },\n\n /**\n * Resize Action\n * @returns {Object} actions for ui resize\n * @private\n */\n _resizeAction() {\n return extend(\n {\n getCurrentDimensions: () => this._graphics.getCurrentDimensions(),\n preview: (actor, value, lockState) => {\n const currentDimensions = this._graphics.getCurrentDimensions();\n const calcAspectRatio = () => currentDimensions.width / currentDimensions.height;\n\n let dimensions = {};\n switch (actor) {\n case 'width':\n dimensions.width = value;\n if (lockState) {\n dimensions.height = value / calcAspectRatio();\n } else {\n dimensions.height = currentDimensions.height;\n }\n break;\n case 'height':\n dimensions.height = value;\n if (lockState) {\n dimensions.width = value * calcAspectRatio();\n } else {\n dimensions.width = currentDimensions.width;\n }\n break;\n default:\n dimensions = currentDimensions;\n }\n\n this._graphics.resize(dimensions).then(() => {\n this.ui.resizeEditor();\n });\n\n if (lockState) {\n this.ui.resize.setWidthValue(dimensions.width);\n this.ui.resize.setHeightValue(dimensions.height);\n }\n },\n lockAspectRatio: (lockState, min, max) => {\n const { width, height } = this._graphics.getCurrentDimensions();\n const aspectRatio = width / height;\n if (lockState) {\n if (width > height) {\n const pMax = max / aspectRatio;\n const pMin = min * aspectRatio;\n this.ui.resize.setLimit({\n minWidth: pMin > min ? pMin : min,\n minHeight: min,\n maxWidth: max,\n maxHeight: pMax < max ? pMax : max,\n });\n } else {\n const pMax = max * aspectRatio;\n const pMin = min / aspectRatio;\n this.ui.resize.setLimit({\n minWidth: min,\n minHeight: pMin > min ? pMin : min,\n maxWidth: pMax < max ? pMax : max,\n maxHeight: max,\n });\n }\n } else {\n this.ui.resize.setLimit({\n minWidth: min,\n minHeight: min,\n maxWidth: max,\n maxHeight: max,\n });\n }\n },\n resize: (dimensions = null) => {\n if (!dimensions) {\n dimensions = this._graphics.getCurrentDimensions();\n }\n\n this.resize(dimensions)\n .then(() => {\n this._graphics.setOriginalDimensions(dimensions);\n this.stopDrawingMode();\n this.ui.resizeEditor();\n this.ui.changeMenu('resize');\n })\n ['catch']((message) => Promise.reject(message));\n },\n reset: (standByMode = false) => {\n const dimensions = this._graphics.getOriginalDimensions();\n\n this.ui.resize.setWidthValue(dimensions.width, true);\n this.ui.resize.setHeightValue(dimensions.height, true);\n\n this._graphics.resize(dimensions).then(() => {\n if (!standByMode) {\n this.stopDrawingMode();\n this.ui.resizeEditor();\n this.ui.changeMenu('resize');\n }\n });\n },\n },\n this._commonAction()\n );\n },\n\n /**\n * Flip Action\n * @returns {Object} actions for ui flip\n * @private\n */\n _flipAction() {\n return extend(\n {\n flip: (flipType) => this[flipType](),\n },\n this._commonAction()\n );\n },\n\n /**\n * Filter Action\n * @returns {Object} actions for ui filter\n * @private\n */\n _filterAction() {\n return extend(\n {\n applyFilter: (applying, type, options, isSilent) => {\n if (applying) {\n this.applyFilter(type, options, isSilent);\n } else if (this.hasFilter(type)) {\n this.removeFilter(type);\n }\n },\n },\n this._commonAction()\n );\n },\n\n /**\n * Image Editor Event Observer\n */\n setReAction() {\n this.on({\n undoStackChanged: (length) => {\n if (length) {\n this.ui.changeHelpButtonEnabled('undo', true);\n this.ui.changeHelpButtonEnabled('reset', true);\n } else {\n this.ui.changeHelpButtonEnabled('undo', false);\n this.ui.changeHelpButtonEnabled('reset', false);\n }\n this.ui.resizeEditor();\n },\n redoStackChanged: (length) => {\n if (length) {\n this.ui.changeHelpButtonEnabled('redo', true);\n } else {\n this.ui.changeHelpButtonEnabled('redo', false);\n }\n this.ui.resizeEditor();\n },\n /* eslint-disable complexity */\n objectActivated: (obj) => {\n this.activeObjectId = obj.id;\n\n this.ui.changeHelpButtonEnabled('delete', true);\n this.ui.changeHelpButtonEnabled('deleteAll', true);\n\n if (obj.type === 'cropzone') {\n this.ui.crop.changeApplyButtonStatus(true);\n } else if (['rect', 'circle', 'triangle'].indexOf(obj.type) > -1) {\n this.stopDrawingMode();\n if (this.ui.submenu !== 'shape') {\n this.ui.changeMenu('shape', false, false);\n }\n this.ui.shape.setShapeStatus({\n strokeColor: obj.stroke,\n strokeWidth: obj.strokeWidth,\n fillColor: obj.fill,\n });\n\n this.ui.shape.setMaxStrokeValue(Math.min(obj.width, obj.height));\n } else if (obj.type === 'path' || obj.type === 'line') {\n if (this.ui.submenu !== 'draw') {\n this.ui.changeMenu('draw', false, false);\n this.ui.draw.changeStandbyMode();\n }\n } else if (['i-text', 'text'].indexOf(obj.type) > -1) {\n if (this.ui.submenu !== 'text') {\n this.ui.changeMenu('text', false, false);\n }\n\n this.ui.text.setTextStyleStateOnAction(obj);\n } else if (obj.type === 'icon') {\n this.stopDrawingMode();\n if (this.ui.submenu !== 'icon') {\n this.ui.changeMenu('icon', false, false);\n }\n this.ui.icon.setIconPickerColor(obj.fill);\n }\n },\n /* eslint-enable complexity */\n addText: (pos) => {\n const { textColor: fill, fontSize, fontStyle, fontWeight, underline } = this.ui.text;\n const fontFamily = 'Noto Sans';\n\n this.addText('Double Click', {\n position: pos.originPosition,\n styles: { fill, fontSize, fontFamily, fontStyle, fontWeight, underline },\n }).then(() => {\n this.changeCursor('default');\n });\n },\n addObjectAfter: (obj) => {\n if (obj.type === 'icon') {\n this.ui.icon.changeStandbyMode();\n } else if (['rect', 'circle', 'triangle'].indexOf(obj.type) > -1) {\n this.ui.shape.setMaxStrokeValue(Math.min(obj.width, obj.height));\n this.ui.shape.changeStandbyMode();\n }\n },\n objectScaled: (obj) => {\n if (['i-text', 'text'].indexOf(obj.type) > -1) {\n this.ui.text.fontSize = toInteger(obj.fontSize);\n } else if (['rect', 'circle', 'triangle'].indexOf(obj.type) >= 0) {\n const { width, height } = obj;\n const strokeValue = this.ui.shape.getStrokeValue();\n\n if (width < strokeValue) {\n this.ui.shape.setStrokeValue(width);\n }\n if (height < strokeValue) {\n this.ui.shape.setStrokeValue(height);\n }\n }\n },\n selectionCleared: () => {\n this.activeObjectId = null;\n if (this.ui.submenu === 'text') {\n this.changeCursor('text');\n } else if (!includes(['draw', 'crop', 'resize'], this.ui.submenu)) {\n this.stopDrawingMode();\n }\n },\n });\n },\n\n /**\n * History Action\n * @returns {Object} history actions for ui\n * @private\n */\n _historyAction() {\n return {\n undo: (count) => this.undo(count),\n redo: (count) => this.redo(count),\n };\n },\n\n /**\n * Common Action\n * @returns {Object} common actions for ui\n * @private\n */\n _commonAction() {\n const { TEXT, CROPPER, SHAPE, ZOOM, RESIZE } = drawingModes;\n\n return {\n modeChange: (menu) => {\n switch (menu) {\n case drawingMenuNames.TEXT:\n this._changeActivateMode(TEXT);\n break;\n case drawingMenuNames.CROP:\n this.startDrawingMode(CROPPER);\n break;\n case drawingMenuNames.SHAPE:\n this._changeActivateMode(SHAPE);\n this.setDrawingShape(this.ui.shape.type, this.ui.shape.options);\n break;\n case drawingMenuNames.ZOOM:\n this.startDrawingMode(ZOOM);\n break;\n case drawingMenuNames.RESIZE:\n this.startDrawingMode(RESIZE);\n break;\n default:\n break;\n }\n },\n deactivateAll: this.deactivateAll.bind(this),\n changeSelectableAll: this.changeSelectableAll.bind(this),\n discardSelection: this.discardSelection.bind(this),\n stopDrawingMode: this.stopDrawingMode.bind(this),\n };\n },\n\n /**\n * Mixin\n * @param {ImageEditor} ImageEditor instance\n */\n mixin(ImageEditor) {\n extend(ImageEditor.prototype, this);\n },\n};\n","/*\n imagetracer.js version 1.2.4\n Simple raster image tracer and vectorizer written in JavaScript.\n andras@jankovics.net\n*/\n\n/*\n The Unlicense / PUBLIC DOMAIN\n This is free and unencumbered software released into the public domain.\n Anyone is free to copy, modify, publish, use, compile, sell, or\n distribute this software, either in source code form or as a compiled\n binary, for any purpose, commercial or non-commercial, and by any\n means.\n In jurisdictions that recognize copyright laws, the author or authors\n of this software dedicate any and all copyright interest in the\n software to the public domain. We make this dedication for the benefit\n of the public at large and to the detriment of our heirs and\n successors. We intend this dedication to be an overt act of\n relinquishment in perpetuity of all present and future rights to this\n software under copyright law.\n THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\n MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.\n IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR\n OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,\n ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR\n OTHER DEALINGS IN THE SOFTWARE.\n For more information, please refer to http://unlicense.org/\n*/\nexport default class ImageTracer {\n static tracerDefaultOption() {\n return {\n pathomit: 100,\n ltres: 0.1,\n qtres: 1,\n\n scale: 1,\n strokewidth: 5,\n viewbox: false,\n linefilter: true,\n desc: false,\n rightangleenhance: false,\n pal: [\n {\n r: 0,\n g: 0,\n b: 0,\n a: 255,\n },\n {\n r: 255,\n g: 255,\n b: 255,\n a: 255,\n },\n ],\n };\n }\n /* eslint-disable */\n constructor() {\n this.versionnumber = '1.2.4';\n this.optionpresets = {\n default: {\n corsenabled: false,\n ltres: 1,\n qtres: 1,\n pathomit: 8,\n rightangleenhance: true,\n colorsampling: 2,\n numberofcolors: 16,\n mincolorratio: 0,\n colorquantcycles: 3,\n layering: 0,\n strokewidth: 1,\n linefilter: false,\n scale: 1,\n roundcoords: 1,\n viewbox: false,\n desc: false,\n lcpr: 0,\n qcpr: 0,\n blurradius: 0,\n blurdelta: 20,\n },\n posterized1: {\n colorsampling: 0,\n numberofcolors: 2,\n },\n posterized2: {\n numberofcolors: 4,\n blurradius: 5,\n },\n curvy: {\n ltres: 0.01,\n linefilter: true,\n rightangleenhance: false,\n },\n sharp: { qtres: 0.01, linefilter: false },\n detailed: { pathomit: 0, roundcoords: 2, ltres: 0.5, qtres: 0.5, numberofcolors: 64 },\n smoothed: { blurradius: 5, blurdelta: 64 },\n grayscale: { colorsampling: 0, colorquantcycles: 1, numberofcolors: 7 },\n fixedpalette: { colorsampling: 0, colorquantcycles: 1, numberofcolors: 27 },\n randomsampling1: { colorsampling: 1, numberofcolors: 8 },\n randomsampling2: { colorsampling: 1, numberofcolors: 64 },\n artistic1: {\n colorsampling: 0,\n colorquantcycles: 1,\n pathomit: 0,\n blurradius: 5,\n blurdelta: 64,\n ltres: 0.01,\n linefilter: true,\n numberofcolors: 16,\n strokewidth: 2,\n },\n artistic2: {\n qtres: 0.01,\n colorsampling: 0,\n colorquantcycles: 1,\n numberofcolors: 4,\n strokewidth: 0,\n },\n artistic3: { qtres: 10, ltres: 10, numberofcolors: 8 },\n artistic4: {\n qtres: 10,\n ltres: 10,\n numberofcolors: 64,\n blurradius: 5,\n blurdelta: 256,\n strokewidth: 2,\n },\n posterized3: {\n ltres: 1,\n qtres: 1,\n pathomit: 20,\n rightangleenhance: true,\n colorsampling: 0,\n numberofcolors: 3,\n mincolorratio: 0,\n colorquantcycles: 3,\n blurradius: 3,\n blurdelta: 20,\n strokewidth: 0,\n linefilter: false,\n roundcoords: 1,\n pal: [\n { r: 0, g: 0, b: 100, a: 255 },\n { r: 255, g: 255, b: 255, a: 255 },\n ],\n },\n };\n\n this.pathscan_combined_lookup = [\n [\n [-1, -1, -1, -1],\n [-1, -1, -1, -1],\n [-1, -1, -1, -1],\n [-1, -1, -1, -1],\n ],\n [\n [0, 1, 0, -1],\n [-1, -1, -1, -1],\n [-1, -1, -1, -1],\n [0, 2, -1, 0],\n ],\n [\n [-1, -1, -1, -1],\n [-1, -1, -1, -1],\n [0, 1, 0, -1],\n [0, 0, 1, 0],\n ],\n [\n [0, 0, 1, 0],\n [-1, -1, -1, -1],\n [0, 2, -1, 0],\n [-1, -1, -1, -1],\n ],\n [\n [-1, -1, -1, -1],\n [0, 0, 1, 0],\n [0, 3, 0, 1],\n [-1, -1, -1, -1],\n ],\n [\n [13, 3, 0, 1],\n [13, 2, -1, 0],\n [7, 1, 0, -1],\n [7, 0, 1, 0],\n ],\n [\n [-1, -1, -1, -1],\n [0, 1, 0, -1],\n [-1, -1, -1, -1],\n [0, 3, 0, 1],\n ],\n [\n [0, 3, 0, 1],\n [0, 2, -1, 0],\n [-1, -1, -1, -1],\n [-1, -1, -1, -1],\n ],\n [\n [0, 3, 0, 1],\n [0, 2, -1, 0],\n [-1, -1, -1, -1],\n [-1, -1, -1, -1],\n ],\n [\n [-1, -1, -1, -1],\n [0, 1, 0, -1],\n [-1, -1, -1, -1],\n [0, 3, 0, 1],\n ],\n [\n [11, 1, 0, -1],\n [14, 0, 1, 0],\n [14, 3, 0, 1],\n [11, 2, -1, 0],\n ],\n [\n [-1, -1, -1, -1],\n [0, 0, 1, 0],\n [0, 3, 0, 1],\n [-1, -1, -1, -1],\n ],\n [\n [0, 0, 1, 0],\n [-1, -1, -1, -1],\n [0, 2, -1, 0],\n [-1, -1, -1, -1],\n ],\n [\n [-1, -1, -1, -1],\n [-1, -1, -1, -1],\n [0, 1, 0, -1],\n [0, 0, 1, 0],\n ],\n [\n [0, 1, 0, -1],\n [-1, -1, -1, -1],\n [-1, -1, -1, -1],\n [0, 2, -1, 0],\n ],\n [\n [-1, -1, -1, -1],\n [-1, -1, -1, -1],\n [-1, -1, -1, -1],\n [-1, -1, -1, -1],\n ],\n ];\n\n this.gks = [\n [0.27901, 0.44198, 0.27901],\n [0.135336, 0.228569, 0.272192, 0.228569, 0.135336],\n [0.086776, 0.136394, 0.178908, 0.195843, 0.178908, 0.136394, 0.086776],\n [0.063327, 0.093095, 0.122589, 0.144599, 0.152781, 0.144599, 0.122589, 0.093095, 0.063327],\n [\n 0.049692,\n 0.069304,\n 0.089767,\n 0.107988,\n 0.120651,\n 0.125194,\n 0.120651,\n 0.107988,\n 0.089767,\n 0.069304,\n 0.049692,\n ],\n ];\n\n this.specpalette = [\n { r: 0, g: 0, b: 0, a: 255 },\n { r: 128, g: 128, b: 128, a: 255 },\n { r: 0, g: 0, b: 128, a: 255 },\n { r: 64, g: 64, b: 128, a: 255 },\n { r: 192, g: 192, b: 192, a: 255 },\n { r: 255, g: 255, b: 255, a: 255 },\n { r: 128, g: 128, b: 192, a: 255 },\n { r: 0, g: 0, b: 192, a: 255 },\n { r: 128, g: 0, b: 0, a: 255 },\n { r: 128, g: 64, b: 64, a: 255 },\n { r: 128, g: 0, b: 128, a: 255 },\n { r: 168, g: 168, b: 168, a: 255 },\n { r: 192, g: 128, b: 128, a: 255 },\n { r: 192, g: 0, b: 0, a: 255 },\n { r: 255, g: 255, b: 255, a: 255 },\n { r: 0, g: 128, b: 0, a: 255 },\n ];\n }\n\n imageToSVG(url, callback, options) {\n options = this.checkoptions(options);\n this.loadImage(\n url,\n (canvas) => {\n callback(this.imagedataToSVG(this.getImgdata(canvas), options));\n },\n options\n );\n }\n\n imagedataToSVG(imgd, options) {\n options = this.checkoptions(options);\n const td = this.imagedataToTracedata(imgd, options);\n\n return this.getsvgstring(td, options);\n }\n\n imageToTracedata(url, callback, options) {\n options = this.checkoptions(options);\n this.loadImage(\n url,\n (canvas) => {\n callback(this.imagedataToTracedata(this.getImgdata(canvas), options));\n },\n options\n );\n }\n\n imagedataToTracedata(imgd, options) {\n options = this.checkoptions(options);\n const ii = this.colorquantization(imgd, options);\n let tracedata;\n if (options.layering === 0) {\n tracedata = {\n layers: [],\n palette: ii.palette,\n width: ii.array[0].length - 2,\n height: ii.array.length - 2,\n };\n\n for (let colornum = 0; colornum < ii.palette.length; colornum += 1) {\n const tracedlayer = this.batchtracepaths(\n this.internodes(\n this.pathscan(this.layeringstep(ii, colornum), options.pathomit),\n options\n ),\n options.ltres,\n options.qtres\n );\n tracedata.layers.push(tracedlayer);\n }\n } else {\n const ls = this.layering(ii);\n if (options.layercontainerid) {\n this.drawLayers(ls, this.specpalette, options.scale, options.layercontainerid);\n }\n const bps = this.batchpathscan(ls, options.pathomit);\n const bis = this.batchinternodes(bps, options);\n tracedata = {\n layers: this.batchtracelayers(bis, options.ltres, options.qtres),\n palette: ii.palette,\n width: imgd.width,\n height: imgd.height,\n };\n }\n\n return tracedata;\n }\n\n checkoptions(options) {\n options = options || {};\n if (typeof options === 'string') {\n options = options.toLowerCase();\n if (this.optionpresets[options]) {\n options = this.optionpresets[options];\n } else {\n options = {};\n }\n }\n const ok = Object.keys(this.optionpresets['default']);\n for (let k = 0; k < ok.length; k += 1) {\n if (!options.hasOwnProperty(ok[k])) {\n options[ok[k]] = this.optionpresets['default'][ok[k]];\n }\n }\n\n return options;\n }\n\n colorquantization(imgd, options) {\n const arr = [];\n let idx = 0;\n let cd;\n let cdl;\n let ci;\n const paletteacc = [];\n const pixelnum = imgd.width * imgd.height;\n let i;\n let j;\n let k;\n let cnt;\n let palette;\n\n for (j = 0; j < imgd.height + 2; j += 1) {\n arr[j] = [];\n for (i = 0; i < imgd.width + 2; i += 1) {\n arr[j][i] = -1;\n }\n }\n if (options.pal) {\n palette = options.pal;\n } else if (options.colorsampling === 0) {\n palette = this.generatepalette(options.numberofcolors);\n } else if (options.colorsampling === 1) {\n palette = this.samplepalette(options.numberofcolors, imgd);\n } else {\n palette = this.samplepalette2(options.numberofcolors, imgd);\n }\n if (options.blurradius > 0) {\n imgd = this.blur(imgd, options.blurradius, options.blurdelta);\n }\n for (cnt = 0; cnt < options.colorquantcycles; cnt += 1) {\n if (cnt > 0) {\n for (k = 0; k < palette.length; k += 1) {\n if (paletteacc[k].n > 0) {\n palette[k] = {\n r: Math.floor(paletteacc[k].r / paletteacc[k].n),\n g: Math.floor(paletteacc[k].g / paletteacc[k].n),\n b: Math.floor(paletteacc[k].b / paletteacc[k].n),\n a: Math.floor(paletteacc[k].a / paletteacc[k].n),\n };\n }\n\n if (\n paletteacc[k].n / pixelnum < options.mincolorratio &&\n cnt < options.colorquantcycles - 1\n ) {\n palette[k] = {\n r: Math.floor(Math.random() * 255),\n g: Math.floor(Math.random() * 255),\n b: Math.floor(Math.random() * 255),\n a: Math.floor(Math.random() * 255),\n };\n }\n }\n }\n\n for (i = 0; i < palette.length; i += 1) {\n paletteacc[i] = { r: 0, g: 0, b: 0, a: 0, n: 0 };\n }\n\n for (j = 0; j < imgd.height; j += 1) {\n for (i = 0; i < imgd.width; i += 1) {\n idx = (j * imgd.width + i) * 4;\n\n ci = 0;\n cdl = 1024;\n for (k = 0; k < palette.length; k += 1) {\n cd =\n Math.abs(palette[k].r - imgd.data[idx]) +\n Math.abs(palette[k].g - imgd.data[idx + 1]) +\n Math.abs(palette[k].b - imgd.data[idx + 2]) +\n Math.abs(palette[k].a - imgd.data[idx + 3]);\n\n if (cd < cdl) {\n cdl = cd;\n ci = k;\n }\n }\n\n paletteacc[ci].r += imgd.data[idx];\n paletteacc[ci].g += imgd.data[idx + 1];\n paletteacc[ci].b += imgd.data[idx + 2];\n paletteacc[ci].a += imgd.data[idx + 3];\n paletteacc[ci].n += 1;\n\n arr[j + 1][i + 1] = ci;\n }\n }\n }\n\n return { array: arr, palette };\n }\n\n samplepalette(numberofcolors, imgd) {\n let idx;\n const palette = [];\n for (let i = 0; i < numberofcolors; i += 1) {\n idx = Math.floor((Math.random() * imgd.data.length) / 4) * 4;\n palette.push({\n r: imgd.data[idx],\n g: imgd.data[idx + 1],\n b: imgd.data[idx + 2],\n a: imgd.data[idx + 3],\n });\n }\n\n return palette;\n }\n\n samplepalette2(numberofcolors, imgd) {\n let idx;\n const palette = [];\n const ni = Math.ceil(Math.sqrt(numberofcolors));\n const nj = Math.ceil(numberofcolors / ni);\n const vx = imgd.width / (ni + 1);\n const vy = imgd.height / (nj + 1);\n for (let j = 0; j < nj; j += 1) {\n for (let i = 0; i < ni; i += 1) {\n if (palette.length === numberofcolors) {\n break;\n } else {\n idx = Math.floor((j + 1) * vy * imgd.width + (i + 1) * vx) * 4;\n palette.push({\n r: imgd.data[idx],\n g: imgd.data[idx + 1],\n b: imgd.data[idx + 2],\n a: imgd.data[idx + 3],\n });\n }\n }\n }\n\n return palette;\n }\n\n generatepalette(numberofcolors) {\n const palette = [];\n let rcnt;\n let gcnt;\n let bcnt;\n if (numberofcolors < 8) {\n const graystep = Math.floor(255 / (numberofcolors - 1));\n for (let i = 0; i < numberofcolors; i += 1) {\n palette.push({ r: i * graystep, g: i * graystep, b: i * graystep, a: 255 });\n }\n } else {\n const colorqnum = Math.floor(Math.pow(numberofcolors, 1 / 3));\n const colorstep = Math.floor(255 / (colorqnum - 1));\n const rndnum = numberofcolors - colorqnum * colorqnum * colorqnum;\n for (rcnt = 0; rcnt < colorqnum; rcnt += 1) {\n for (gcnt = 0; gcnt < colorqnum; gcnt += 1) {\n for (bcnt = 0; bcnt < colorqnum; bcnt += 1) {\n palette.push({ r: rcnt * colorstep, g: gcnt * colorstep, b: bcnt * colorstep, a: 255 });\n }\n }\n }\n for (rcnt = 0; rcnt < rndnum; rcnt += 1) {\n palette.push({\n r: Math.floor(Math.random() * 255),\n g: Math.floor(Math.random() * 255),\n b: Math.floor(Math.random() * 255),\n a: Math.floor(Math.random() * 255),\n });\n }\n }\n\n return palette;\n }\n\n layering(ii) {\n const layers = [];\n let val = 0;\n const ah = ii.array.length;\n const aw = ii.array[0].length;\n let n1;\n let n2;\n let n3;\n let n4;\n let n5;\n let n6;\n let n7;\n let n8;\n let i;\n let j;\n let k;\n for (k = 0; k < ii.palette.length; k += 1) {\n layers[k] = [];\n for (j = 0; j < ah; j += 1) {\n layers[k][j] = [];\n for (i = 0; i < aw; i += 1) {\n layers[k][j][i] = 0;\n }\n }\n }\n for (j = 1; j < ah - 1; j += 1) {\n for (i = 1; i < aw - 1; i += 1) {\n val = ii.array[j][i];\n\n n1 = ii.array[j - 1][i - 1] === val ? 1 : 0;\n n2 = ii.array[j - 1][i] === val ? 1 : 0;\n n3 = ii.array[j - 1][i + 1] === val ? 1 : 0;\n n4 = ii.array[j][i - 1] === val ? 1 : 0;\n n5 = ii.array[j][i + 1] === val ? 1 : 0;\n n6 = ii.array[j + 1][i - 1] === val ? 1 : 0;\n n7 = ii.array[j + 1][i] === val ? 1 : 0;\n n8 = ii.array[j + 1][i + 1] === val ? 1 : 0;\n\n layers[val][j + 1][i + 1] = 1 + n5 * 2 + n8 * 4 + n7 * 8;\n if (!n4) {\n layers[val][j + 1][i] = 0 + 2 + n7 * 4 + n6 * 8;\n }\n if (!n2) {\n layers[val][j][i + 1] = 0 + n3 * 2 + n5 * 4 + 8;\n }\n if (!n1) {\n layers[val][j][i] = 0 + n2 * 2 + 4 + n4 * 8;\n }\n }\n }\n\n return layers;\n }\n\n layeringstep(ii, cnum) {\n const layer = [];\n const ah = ii.array.length;\n const aw = ii.array[0].length;\n let i;\n let j;\n for (j = 0; j < ah; j += 1) {\n layer[j] = [];\n for (i = 0; i < aw; i += 1) {\n layer[j][i] = 0;\n }\n }\n for (j = 1; j < ah; j += 1) {\n for (i = 1; i < aw; i += 1) {\n layer[j][i] =\n (ii.array[j - 1][i - 1] === cnum ? 1 : 0) +\n (ii.array[j - 1][i] === cnum ? 2 : 0) +\n (ii.array[j][i - 1] === cnum ? 8 : 0) +\n (ii.array[j][i] === cnum ? 4 : 0);\n }\n }\n\n return layer;\n }\n\n pathscan(arr, pathomit) {\n const paths = [];\n let pacnt = 0;\n let pcnt = 0;\n let px = 0;\n let py = 0;\n const w = arr[0].length;\n const h = arr.length;\n let dir = 0;\n let pathfinished = true;\n let holepath = false;\n let lookuprow;\n for (let j = 0; j < h; j += 1) {\n for (let i = 0; i < w; i += 1) {\n if (arr[j][i] === 4 || arr[j][i] === 11) {\n px = i;\n py = j;\n paths[pacnt] = {};\n paths[pacnt].points = [];\n paths[pacnt].boundingbox = [px, py, px, py];\n paths[pacnt].holechildren = [];\n pathfinished = false;\n pcnt = 0;\n holepath = arr[j][i] === 11;\n dir = 1;\n\n while (!pathfinished) {\n paths[pacnt].points[pcnt] = {};\n paths[pacnt].points[pcnt].x = px - 1;\n paths[pacnt].points[pcnt].y = py - 1;\n paths[pacnt].points[pcnt].t = arr[py][px];\n\n if (px - 1 < paths[pacnt].boundingbox[0]) {\n paths[pacnt].boundingbox[0] = px - 1;\n }\n if (px - 1 > paths[pacnt].boundingbox[2]) {\n paths[pacnt].boundingbox[2] = px - 1;\n }\n if (py - 1 < paths[pacnt].boundingbox[1]) {\n paths[pacnt].boundingbox[1] = py - 1;\n }\n if (py - 1 > paths[pacnt].boundingbox[3]) {\n paths[pacnt].boundingbox[3] = py - 1;\n }\n\n lookuprow = this.pathscan_combined_lookup[arr[py][px]][dir];\n arr[py][px] = lookuprow[0];\n dir = lookuprow[1];\n px += lookuprow[2];\n py += lookuprow[3];\n\n if (px - 1 === paths[pacnt].points[0].x && py - 1 === paths[pacnt].points[0].y) {\n pathfinished = true;\n\n if (paths[pacnt].points.length < pathomit) {\n paths.pop();\n } else {\n paths[pacnt].isholepath = !!holepath;\n\n if (holepath) {\n let parentidx = 0,\n parentbbox = [-1, -1, w + 1, h + 1];\n for (let parentcnt = 0; parentcnt < pacnt; parentcnt++) {\n if (\n !paths[parentcnt].isholepath &&\n this.boundingboxincludes(\n paths[parentcnt].boundingbox,\n paths[pacnt].boundingbox\n ) &&\n this.boundingboxincludes(parentbbox, paths[parentcnt].boundingbox)\n ) {\n parentidx = parentcnt;\n parentbbox = paths[parentcnt].boundingbox;\n }\n }\n paths[parentidx].holechildren.push(pacnt);\n }\n pacnt += 1;\n }\n }\n pcnt += 1;\n }\n }\n }\n }\n\n return paths;\n }\n\n boundingboxincludes(parentbbox, childbbox) {\n return (\n parentbbox[0] < childbbox[0] &&\n parentbbox[1] < childbbox[1] &&\n parentbbox[2] > childbbox[2] &&\n parentbbox[3] > childbbox[3]\n );\n }\n\n batchpathscan(layers, pathomit) {\n const bpaths = [];\n for (const k in layers) {\n if (!layers.hasOwnProperty(k)) {\n continue;\n }\n bpaths[k] = this.pathscan(layers[k], pathomit);\n }\n\n return bpaths;\n }\n\n internodes(paths, options) {\n const ins = [];\n let palen = 0;\n let nextidx = 0;\n let nextidx2 = 0;\n let previdx = 0;\n let previdx2 = 0;\n let pacnt;\n let pcnt;\n for (pacnt = 0; pacnt < paths.length; pacnt += 1) {\n ins[pacnt] = {};\n ins[pacnt].points = [];\n ins[pacnt].boundingbox = paths[pacnt].boundingbox;\n ins[pacnt].holechildren = paths[pacnt].holechildren;\n ins[pacnt].isholepath = paths[pacnt].isholepath;\n palen = paths[pacnt].points.length;\n\n for (pcnt = 0; pcnt < palen; pcnt += 1) {\n nextidx = (pcnt + 1) % palen;\n nextidx2 = (pcnt + 2) % palen;\n previdx = (pcnt - 1 + palen) % palen;\n previdx2 = (pcnt - 2 + palen) % palen;\n\n if (\n options.rightangleenhance &&\n this.testrightangle(paths[pacnt], previdx2, previdx, pcnt, nextidx, nextidx2)\n ) {\n if (ins[pacnt].points.length > 0) {\n ins[pacnt].points[ins[pacnt].points.length - 1].linesegment = this.getdirection(\n ins[pacnt].points[ins[pacnt].points.length - 1].x,\n ins[pacnt].points[ins[pacnt].points.length - 1].y,\n paths[pacnt].points[pcnt].x,\n paths[pacnt].points[pcnt].y\n );\n }\n\n ins[pacnt].points.push({\n x: paths[pacnt].points[pcnt].x,\n y: paths[pacnt].points[pcnt].y,\n linesegment: this.getdirection(\n paths[pacnt].points[pcnt].x,\n paths[pacnt].points[pcnt].y,\n (paths[pacnt].points[pcnt].x + paths[pacnt].points[nextidx].x) / 2,\n (paths[pacnt].points[pcnt].y + paths[pacnt].points[nextidx].y) / 2\n ),\n });\n }\n\n ins[pacnt].points.push({\n x: (paths[pacnt].points[pcnt].x + paths[pacnt].points[nextidx].x) / 2,\n y: (paths[pacnt].points[pcnt].y + paths[pacnt].points[nextidx].y) / 2,\n linesegment: this.getdirection(\n (paths[pacnt].points[pcnt].x + paths[pacnt].points[nextidx].x) / 2,\n (paths[pacnt].points[pcnt].y + paths[pacnt].points[nextidx].y) / 2,\n (paths[pacnt].points[nextidx].x + paths[pacnt].points[nextidx2].x) / 2,\n (paths[pacnt].points[nextidx].y + paths[pacnt].points[nextidx2].y) / 2\n ),\n });\n }\n }\n\n return ins;\n }\n\n testrightangle(path, idx1, idx2, idx3, idx4, idx5) {\n return (\n (path.points[idx3].x === path.points[idx1].x &&\n path.points[idx3].x === path.points[idx2].x &&\n path.points[idx3].y === path.points[idx4].y &&\n path.points[idx3].y === path.points[idx5].y) ||\n (path.points[idx3].y === path.points[idx1].y &&\n path.points[idx3].y === path.points[idx2].y &&\n path.points[idx3].x === path.points[idx4].x &&\n path.points[idx3].x === path.points[idx5].x)\n );\n }\n\n getdirection(x1, y1, x2, y2) {\n let val = 8;\n if (x1 < x2) {\n if (y1 < y2) {\n val = 1;\n } else if (y1 > y2) {\n val = 7;\n } else {\n val = 0;\n }\n } else if (x1 > x2) {\n if (y1 < y2) {\n val = 3;\n } else if (y1 > y2) {\n val = 5;\n } else {\n val = 4;\n }\n } else if (y1 < y2) {\n val = 2;\n } else if (y1 > y2) {\n val = 6;\n } else {\n val = 8;\n }\n\n return val;\n }\n\n batchinternodes(bpaths, options) {\n const binternodes = [];\n for (const k in bpaths) {\n if (!bpaths.hasOwnProperty(k)) {\n continue;\n }\n binternodes[k] = this.internodes(bpaths[k], options);\n }\n\n return binternodes;\n }\n\n tracepath(path, ltres, qtres) {\n let pcnt = 0;\n let segtype1;\n let segtype2;\n let seqend;\n const smp = {};\n smp.segments = [];\n smp.boundingbox = path.boundingbox;\n smp.holechildren = path.holechildren;\n smp.isholepath = path.isholepath;\n\n while (pcnt < path.points.length) {\n segtype1 = path.points[pcnt].linesegment;\n segtype2 = -1;\n seqend = pcnt + 1;\n while (\n (path.points[seqend].linesegment === segtype1 ||\n path.points[seqend].linesegment === segtype2 ||\n segtype2 === -1) &&\n seqend < path.points.length - 1\n ) {\n if (path.points[seqend].linesegment !== segtype1 && segtype2 === -1) {\n segtype2 = path.points[seqend].linesegment;\n }\n seqend += 1;\n }\n if (seqend === path.points.length - 1) {\n seqend = 0;\n }\n\n smp.segments = smp.segments.concat(this.fitseq(path, ltres, qtres, pcnt, seqend));\n\n if (seqend > 0) {\n pcnt = seqend;\n } else {\n pcnt = path.points.length;\n }\n }\n\n return smp;\n }\n\n fitseq(path, ltres, qtres, seqstart, seqend) {\n if (seqend > path.points.length || seqend < 0) {\n return [];\n }\n let errorpoint = seqstart,\n errorval = 0,\n curvepass = true,\n px,\n py,\n dist2;\n let tl = seqend - seqstart;\n if (tl < 0) {\n tl += path.points.length;\n }\n let vx = (path.points[seqend].x - path.points[seqstart].x) / tl,\n vy = (path.points[seqend].y - path.points[seqstart].y) / tl;\n let pcnt = (seqstart + 1) % path.points.length,\n pl;\n while (pcnt != seqend) {\n pl = pcnt - seqstart;\n if (pl < 0) {\n pl += path.points.length;\n }\n px = path.points[seqstart].x + vx * pl;\n py = path.points[seqstart].y + vy * pl;\n dist2 =\n (path.points[pcnt].x - px) * (path.points[pcnt].x - px) +\n (path.points[pcnt].y - py) * (path.points[pcnt].y - py);\n if (dist2 > ltres) {\n curvepass = false;\n }\n if (dist2 > errorval) {\n errorpoint = pcnt;\n errorval = dist2;\n }\n pcnt = (pcnt + 1) % path.points.length;\n }\n if (curvepass) {\n return [\n {\n type: 'L',\n x1: path.points[seqstart].x,\n y1: path.points[seqstart].y,\n x2: path.points[seqend].x,\n y2: path.points[seqend].y,\n },\n ];\n }\n const fitpoint = errorpoint;\n curvepass = true;\n errorval = 0;\n let t = (fitpoint - seqstart) / tl,\n t1 = (1 - t) * (1 - t),\n t2 = 2 * (1 - t) * t,\n t3 = t * t;\n let cpx =\n (t1 * path.points[seqstart].x + t3 * path.points[seqend].x - path.points[fitpoint].x) / -t2,\n cpy =\n (t1 * path.points[seqstart].y + t3 * path.points[seqend].y - path.points[fitpoint].y) / -t2;\n pcnt = seqstart + 1;\n while (pcnt != seqend) {\n t = (pcnt - seqstart) / tl;\n t1 = (1 - t) * (1 - t);\n t2 = 2 * (1 - t) * t;\n t3 = t * t;\n px = t1 * path.points[seqstart].x + t2 * cpx + t3 * path.points[seqend].x;\n py = t1 * path.points[seqstart].y + t2 * cpy + t3 * path.points[seqend].y;\n dist2 =\n (path.points[pcnt].x - px) * (path.points[pcnt].x - px) +\n (path.points[pcnt].y - py) * (path.points[pcnt].y - py);\n if (dist2 > qtres) {\n curvepass = false;\n }\n if (dist2 > errorval) {\n errorpoint = pcnt;\n errorval = dist2;\n }\n pcnt = (pcnt + 1) % path.points.length;\n }\n if (curvepass) {\n return [\n {\n type: 'Q',\n x1: path.points[seqstart].x,\n y1: path.points[seqstart].y,\n x2: cpx,\n y2: cpy,\n x3: path.points[seqend].x,\n y3: path.points[seqend].y,\n },\n ];\n }\n const splitpoint = fitpoint;\n\n return this.fitseq(path, ltres, qtres, seqstart, splitpoint).concat(\n this.fitseq(path, ltres, qtres, splitpoint, seqend)\n );\n }\n\n batchtracepaths(internodepaths, ltres, qtres) {\n const btracedpaths = [];\n for (const k in internodepaths) {\n if (!internodepaths.hasOwnProperty(k)) {\n continue;\n }\n btracedpaths.push(this.tracepath(internodepaths[k], ltres, qtres));\n }\n\n return btracedpaths;\n }\n\n batchtracelayers(binternodes, ltres, qtres) {\n const btbis = [];\n for (const k in binternodes) {\n if (!binternodes.hasOwnProperty(k)) {\n continue;\n }\n btbis[k] = this.batchtracepaths(binternodes[k], ltres, qtres);\n }\n\n return btbis;\n }\n\n roundtodec(val, places) {\n return Number(val.toFixed(places));\n }\n\n svgpathstring(tracedata, lnum, pathnum, options) {\n let layer = tracedata.layers[lnum],\n smp = layer[pathnum],\n str = '',\n pcnt;\n if (options.linefilter && smp.segments.length < 3) {\n return str;\n }\n str = `= 0; pcnt--) {\n str += `${hsmp.segments[pcnt].type} `;\n if (hsmp.segments[pcnt].hasOwnProperty('x3')) {\n str += `${hsmp.segments[pcnt].x2 * options.scale} ${\n hsmp.segments[pcnt].y2 * options.scale\n } `;\n }\n str += `${hsmp.segments[pcnt].x1 * options.scale} ${\n hsmp.segments[pcnt].y1 * options.scale\n } `;\n }\n } else {\n if (hsmp.segments[hsmp.segments.length - 1].hasOwnProperty('x3')) {\n str += `M ${this.roundtodec(\n hsmp.segments[hsmp.segments.length - 1].x3 * options.scale\n )} ${this.roundtodec(hsmp.segments[hsmp.segments.length - 1].y3 * options.scale)} `;\n } else {\n str += `M ${this.roundtodec(\n hsmp.segments[hsmp.segments.length - 1].x2 * options.scale\n )} ${this.roundtodec(hsmp.segments[hsmp.segments.length - 1].y2 * options.scale)} `;\n }\n for (pcnt = hsmp.segments.length - 1; pcnt >= 0; pcnt--) {\n str += `${hsmp.segments[pcnt].type} `;\n if (hsmp.segments[pcnt].hasOwnProperty('x3')) {\n str += `${this.roundtodec(hsmp.segments[pcnt].x2 * options.scale)} ${this.roundtodec(\n hsmp.segments[pcnt].y2 * options.scale\n )} `;\n }\n str += `${this.roundtodec(hsmp.segments[pcnt].x1 * options.scale)} ${this.roundtodec(\n hsmp.segments[pcnt].y1 * options.scale\n )} `;\n }\n }\n str += 'Z ';\n }\n str += '\" />';\n if (options.lcpr || options.qcpr) {\n for (pcnt = 0; pcnt < smp.segments.length; pcnt++) {\n if (smp.segments[pcnt].hasOwnProperty('x3') && options.qcpr) {\n str += ``;\n str += ``;\n str += ``;\n str += ``;\n }\n if (!smp.segments[pcnt].hasOwnProperty('x3') && options.lcpr) {\n str += ``;\n }\n }\n\n for (var hcnt = 0; hcnt < smp.holechildren.length; hcnt++) {\n var hsmp = layer[smp.holechildren[hcnt]];\n for (pcnt = 0; pcnt < hsmp.segments.length; pcnt++) {\n if (hsmp.segments[pcnt].hasOwnProperty('x3') && options.qcpr) {\n str += ``;\n str += ``;\n str += ``;\n str += ``;\n }\n if (!hsmp.segments[pcnt].hasOwnProperty('x3') && options.lcpr) {\n str += ``;\n }\n }\n }\n }\n\n return str;\n }\n\n getsvgstring(tracedata, options) {\n options = this.checkoptions(options);\n const w = tracedata.width * options.scale;\n const h = tracedata.height * options.scale;\n\n let svgstr = ``;\n for (let lcnt = 0; lcnt < tracedata.layers.length; lcnt += 1) {\n for (let pcnt = 0; pcnt < tracedata.layers[lcnt].length; pcnt += 1) {\n if (!tracedata.layers[lcnt][pcnt].isholepath) {\n svgstr += this.svgpathstring(tracedata, lcnt, pcnt, options);\n }\n }\n }\n svgstr += '';\n\n return svgstr;\n }\n\n compareNumbers(a, b) {\n return a - b;\n }\n\n torgbastr(c) {\n return `rgba(${c.r},${c.g},${c.b},${c.a})`;\n }\n\n tosvgcolorstr(c, options) {\n return `fill=\"rgb(${c.r},${c.g},${c.b})\" stroke=\"rgb(${c.r},${c.g},${c.b})\" stroke-width=\"${\n options.strokewidth\n }\" opacity=\"${c.a / 255.0}\" `;\n }\n\n appendSVGString(svgstr, parentid) {\n let div;\n if (parentid) {\n div = document.getElementById(parentid);\n if (!div) {\n div = document.createElement('div');\n div.id = parentid;\n document.body.appendChild(div);\n }\n } else {\n div = document.createElement('div');\n document.body.appendChild(div);\n }\n div.innerHTML += svgstr;\n }\n\n blur(imgd, radius, delta) {\n let i, j, k, d, idx, racc, gacc, bacc, aacc, wacc;\n const imgd2 = { width: imgd.width, height: imgd.height, data: [] };\n radius = Math.floor(radius);\n if (radius < 1) {\n return imgd;\n }\n if (radius > 5) {\n radius = 5;\n }\n delta = Math.abs(delta);\n if (delta > 1024) {\n delta = 1024;\n }\n const thisgk = this.gks[radius - 1];\n for (j = 0; j < imgd.height; j++) {\n for (i = 0; i < imgd.width; i++) {\n racc = 0;\n gacc = 0;\n bacc = 0;\n aacc = 0;\n wacc = 0;\n\n for (k = -radius; k < radius + 1; k++) {\n if (i + k > 0 && i + k < imgd.width) {\n idx = (j * imgd.width + i + k) * 4;\n racc += imgd.data[idx] * thisgk[k + radius];\n gacc += imgd.data[idx + 1] * thisgk[k + radius];\n bacc += imgd.data[idx + 2] * thisgk[k + radius];\n aacc += imgd.data[idx + 3] * thisgk[k + radius];\n wacc += thisgk[k + radius];\n }\n }\n\n idx = (j * imgd.width + i) * 4;\n imgd2.data[idx] = Math.floor(racc / wacc);\n imgd2.data[idx + 1] = Math.floor(gacc / wacc);\n imgd2.data[idx + 2] = Math.floor(bacc / wacc);\n imgd2.data[idx + 3] = Math.floor(aacc / wacc);\n }\n }\n const himgd = new Uint8ClampedArray(imgd2.data);\n for (j = 0; j < imgd.height; j++) {\n for (i = 0; i < imgd.width; i++) {\n racc = 0;\n gacc = 0;\n bacc = 0;\n aacc = 0;\n wacc = 0;\n\n for (k = -radius; k < radius + 1; k++) {\n if (j + k > 0 && j + k < imgd.height) {\n idx = ((j + k) * imgd.width + i) * 4;\n racc += himgd[idx] * thisgk[k + radius];\n gacc += himgd[idx + 1] * thisgk[k + radius];\n bacc += himgd[idx + 2] * thisgk[k + radius];\n aacc += himgd[idx + 3] * thisgk[k + radius];\n wacc += thisgk[k + radius];\n }\n }\n\n idx = (j * imgd.width + i) * 4;\n imgd2.data[idx] = Math.floor(racc / wacc);\n imgd2.data[idx + 1] = Math.floor(gacc / wacc);\n imgd2.data[idx + 2] = Math.floor(bacc / wacc);\n imgd2.data[idx + 3] = Math.floor(aacc / wacc);\n }\n }\n for (j = 0; j < imgd.height; j++) {\n for (i = 0; i < imgd.width; i++) {\n idx = (j * imgd.width + i) * 4;\n\n d =\n Math.abs(imgd2.data[idx] - imgd.data[idx]) +\n Math.abs(imgd2.data[idx + 1] - imgd.data[idx + 1]) +\n Math.abs(imgd2.data[idx + 2] - imgd.data[idx + 2]) +\n Math.abs(imgd2.data[idx + 3] - imgd.data[idx + 3]);\n\n if (d > delta) {\n imgd2.data[idx] = imgd.data[idx];\n imgd2.data[idx + 1] = imgd.data[idx + 1];\n imgd2.data[idx + 2] = imgd.data[idx + 2];\n imgd2.data[idx + 3] = imgd.data[idx + 3];\n }\n }\n }\n\n return imgd2;\n }\n\n loadImage(url, callback, options) {\n const img = new Image();\n if (options && options.corsenabled) {\n img.crossOrigin = 'Anonymous';\n }\n img.src = url;\n img.onload = function () {\n const canvas = document.createElement('canvas');\n canvas.width = img.width;\n canvas.height = img.height;\n const context = canvas.getContext('2d');\n context.drawImage(img, 0, 0);\n callback(canvas);\n };\n }\n\n getImgdata(canvas) {\n const context = canvas.getContext('2d');\n\n return context.getImageData(0, 0, canvas.width, canvas.height);\n }\n\n drawLayers(layers, palette, scale, parentid) {\n scale = scale || 1;\n let w, h, i, j, k;\n let div;\n if (parentid) {\n div = document.getElementById(parentid);\n if (!div) {\n div = document.createElement('div');\n div.id = parentid;\n document.body.appendChild(div);\n }\n } else {\n div = document.createElement('div');\n document.body.appendChild(div);\n }\n for (k in layers) {\n if (!layers.hasOwnProperty(k)) {\n continue;\n }\n\n w = layers[k][0].length;\n h = layers[k].length;\n\n const canvas = document.createElement('canvas');\n canvas.width = w * scale;\n canvas.height = h * scale;\n const context = canvas.getContext('2d');\n\n for (j = 0; j < h; j += 1) {\n for (i = 0; i < w; i += 1) {\n context.fillStyle = this.torgbastr(palette[layers[k][j][i] % palette.length]);\n context.fillRect(i * scale, j * scale, scale, scale);\n }\n }\n\n div.appendChild(canvas);\n }\n }\n}\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Graphics module\n */\nimport snippet from 'tui-code-snippet';\nimport fabric from 'fabric';\nimport ImageLoader from '@/component/imageLoader';\nimport Cropper from '@/component/cropper';\nimport Flip from '@/component/flip';\nimport Rotation from '@/component/rotation';\nimport FreeDrawing from '@/component/freeDrawing';\nimport Line from '@/component/line';\nimport Text from '@/component/text';\nimport Icon from '@/component/icon';\nimport Filter from '@/component/filter';\nimport Shape from '@/component/shape';\nimport Zoom from '@/component/zoom';\nimport CropperDrawingMode from '@/drawingMode/cropper';\nimport FreeDrawingMode from '@/drawingMode/freeDrawing';\nimport LineDrawingMode from '@/drawingMode/lineDrawing';\nimport ShapeDrawingMode from '@/drawingMode/shape';\nimport TextDrawingMode from '@/drawingMode/text';\nimport IconDrawingMode from '@/drawingMode/icon';\nimport ZoomDrawingMode from '@/drawingMode/zoom';\nimport {\n makeSelectionUndoData,\n makeSelectionUndoDatum,\n setCachedUndoDataForDimension,\n} from '@/helper/selectionModifyHelper';\nimport { getProperties, includes, isShape, Promise } from '@/util';\nimport {\n componentNames as components,\n eventNames as events,\n drawingModes,\n fObjectOptions,\n} from '@/consts';\nimport Resize from '@/component/resize';\nimport ResizeDrawingMode from '@/drawingMode/resize';\n\nconst { extend, stamp, isArray, isString, forEachArray, forEachOwnProperties, CustomEvents } =\n snippet;\nconst DEFAULT_CSS_MAX_WIDTH = 1000;\nconst DEFAULT_CSS_MAX_HEIGHT = 800;\nconst EXTRA_PX_FOR_PASTE = 10;\n\nconst cssOnly = {\n cssOnly: true,\n};\nconst backstoreOnly = {\n backstoreOnly: true,\n};\n\n/**\n * Graphics class\n * @class\n * @param {string|HTMLElement} wrapper - Wrapper's element or selector\n * @param {Object} [option] - Canvas max width & height of css\n * @param {number} option.cssMaxWidth - Canvas css-max-width\n * @param {number} option.cssMaxHeight - Canvas css-max-height\n * @ignore\n */\nclass Graphics {\n constructor(element, { cssMaxWidth, cssMaxHeight } = {}) {\n /**\n * Fabric image instance\n * @type {fabric.Image}\n */\n this.canvasImage = null;\n\n /**\n * Max width of canvas elements\n * @type {number}\n */\n this.cssMaxWidth = cssMaxWidth || DEFAULT_CSS_MAX_WIDTH;\n\n /**\n * Max height of canvas elements\n * @type {number}\n */\n this.cssMaxHeight = cssMaxHeight || DEFAULT_CSS_MAX_HEIGHT;\n\n /**\n * cropper Selection Style\n * @type {Object}\n */\n this.cropSelectionStyle = {};\n\n /**\n * target fabric object for copy paste feature\n * @type {fabric.Object}\n * @private\n */\n this.targetObjectForCopyPaste = null;\n\n /**\n * Image name\n * @type {string}\n */\n this.imageName = '';\n\n /**\n * Object Map\n * @type {Object}\n * @private\n */\n this._objects = {};\n\n /**\n * Fabric-Canvas instance\n * @type {fabric.Canvas}\n * @private\n */\n this._canvas = null;\n\n /**\n * Drawing mode\n * @type {string}\n * @private\n */\n this._drawingMode = drawingModes.NORMAL;\n\n /**\n * DrawingMode map\n * @type {Object.}\n * @private\n */\n this._drawingModeMap = {};\n\n /**\n * Component map\n * @type {Object.}\n * @private\n */\n this._componentMap = {};\n\n /**\n * fabric event handlers\n * @type {Object.}\n * @private\n */\n this._handler = {\n onMouseDown: this._onMouseDown.bind(this),\n onObjectAdded: this._onObjectAdded.bind(this),\n onObjectRemoved: this._onObjectRemoved.bind(this),\n onObjectMoved: this._onObjectMoved.bind(this),\n onObjectScaled: this._onObjectScaled.bind(this),\n onObjectModified: this._onObjectModified.bind(this),\n onObjectRotated: this._onObjectRotated.bind(this),\n onObjectSelected: this._onObjectSelected.bind(this),\n onPathCreated: this._onPathCreated.bind(this),\n onSelectionCleared: this._onSelectionCleared.bind(this),\n onSelectionCreated: this._onSelectionCreated.bind(this),\n };\n\n this._setObjectCachingToFalse();\n this._setCanvasElement(element);\n this._createDrawingModeInstances();\n this._createComponents();\n this._attachCanvasEvents();\n this._attachZoomEvents();\n }\n\n /**\n * Destroy canvas element\n */\n destroy() {\n const { wrapperEl } = this._canvas;\n\n this._canvas.clear();\n\n wrapperEl.parentNode.removeChild(wrapperEl);\n\n this._detachZoomEvents();\n }\n\n /**\n * Attach zoom events\n */\n _attachZoomEvents() {\n const zoom = this.getComponent(components.ZOOM);\n\n zoom.attachKeyboardZoomEvents();\n }\n\n /**\n * Detach zoom events\n */\n _detachZoomEvents() {\n const zoom = this.getComponent(components.ZOOM);\n\n zoom.detachKeyboardZoomEvents();\n }\n\n /**\n * Deactivates all objects on canvas\n * @returns {Graphics} this\n */\n deactivateAll() {\n this._canvas.discardActiveObject();\n\n return this;\n }\n\n /**\n * Renders all objects on canvas\n * @returns {Graphics} this\n */\n renderAll() {\n this._canvas.renderAll();\n\n return this;\n }\n\n /**\n * Adds objects on canvas\n * @param {Object|Array} objects - objects\n */\n add(objects) {\n let theArgs = [];\n if (isArray(objects)) {\n theArgs = objects;\n } else {\n theArgs.push(objects);\n }\n\n this._canvas.add(...theArgs);\n }\n\n /**\n * Removes the object or group\n * @param {Object} target - graphics object or group\n * @returns {boolean} true if contains or false\n */\n contains(target) {\n return this._canvas.contains(target);\n }\n\n /**\n * Gets all objects or group\n * @returns {Array} all objects, shallow copy\n */\n getObjects() {\n return this._canvas.getObjects().slice();\n }\n\n /**\n * Get an object by id\n * @param {number} id - object id\n * @returns {fabric.Object} object corresponding id\n */\n getObject(id) {\n return this._objects[id];\n }\n\n /**\n * Removes the object or group\n * @param {Object} target - graphics object or group\n */\n remove(target) {\n this._canvas.remove(target);\n }\n\n /**\n * Removes all object or group\n * @param {boolean} includesBackground - remove the background image or not\n * @returns {Array} all objects array which is removed\n */\n removeAll(includesBackground) {\n const canvas = this._canvas;\n const objects = canvas.getObjects().slice();\n canvas.remove(...this._canvas.getObjects());\n\n if (includesBackground) {\n canvas.clear();\n }\n\n return objects;\n }\n\n /**\n * Removes an object or group by id\n * @param {number} id - object id\n * @returns {Array} removed objects\n */\n removeObjectById(id) {\n const objects = [];\n const canvas = this._canvas;\n const target = this.getObject(id);\n const isValidGroup = target && target.isType('group') && !target.isEmpty();\n\n if (isValidGroup) {\n canvas.discardActiveObject(); // restore states for each objects\n target.forEachObject((obj) => {\n objects.push(obj);\n canvas.remove(obj);\n });\n } else if (canvas.contains(target)) {\n objects.push(target);\n canvas.remove(target);\n }\n\n return objects;\n }\n\n /**\n * Get an id by object instance\n * @param {fabric.Object} object object\n * @returns {number} object id if it exists or null\n */\n getObjectId(object) {\n let key = null;\n for (key in this._objects) {\n if (this._objects.hasOwnProperty(key)) {\n if (object === this._objects[key]) {\n return key;\n }\n }\n }\n\n return null;\n }\n\n /**\n * Gets an active object or group\n * @returns {Object} active object or group instance\n */\n getActiveObject() {\n return this._canvas._activeObject;\n }\n\n /**\n * Returns the object ID to delete the object.\n * @returns {number} object id for remove\n */\n getActiveObjectIdForRemove() {\n const activeObject = this.getActiveObject();\n const { type, left, top } = activeObject;\n const isSelection = type === 'activeSelection';\n\n if (isSelection) {\n const group = new fabric.Group([...activeObject.getObjects()], {\n left,\n top,\n });\n\n return this._addFabricObject(group);\n }\n\n return this.getObjectId(activeObject);\n }\n\n /**\n * Verify that you are ready to erase the object.\n * @returns {boolean} ready for object remove\n */\n isReadyRemoveObject() {\n const activeObject = this.getActiveObject();\n\n return activeObject && !activeObject.isEditing;\n }\n\n /**\n * Gets an active group object\n * @returns {Object} active group object instance\n */\n getActiveObjects() {\n const activeObject = this._canvas._activeObject;\n\n return activeObject && activeObject.type === 'activeSelection' ? activeObject : null;\n }\n\n /**\n * Get Active object Selection from object ids\n * @param {Array.} objects - fabric objects\n * @returns {Object} target - target object group\n */\n getActiveSelectionFromObjects(objects) {\n const canvas = this.getCanvas();\n\n return new fabric.ActiveSelection(objects, { canvas });\n }\n\n /**\n * Activates an object or group\n * @param {Object} target - target object or group\n */\n setActiveObject(target) {\n this._canvas.setActiveObject(target);\n }\n\n /**\n * Set Crop selection style\n * @param {Object} style - Selection styles\n */\n setCropSelectionStyle(style) {\n this.cropSelectionStyle = style;\n }\n\n /**\n * Get component\n * @param {string} name - Component name\n * @returns {Component}\n */\n getComponent(name) {\n return this._componentMap[name];\n }\n\n /**\n * Get current drawing mode\n * @returns {string}\n */\n getDrawingMode() {\n return this._drawingMode;\n }\n\n /**\n * Start a drawing mode. If the current mode is not 'NORMAL', 'stopDrawingMode()' will be called first.\n * @param {String} mode Can be one of 'CROPPER', 'FREE_DRAWING', 'LINE', 'TEXT', 'SHAPE'\n * @param {Object} [option] parameters of drawing mode, it's available with 'FREE_DRAWING', 'LINE_DRAWING'\n * @param {Number} [option.width] brush width\n * @param {String} [option.color] brush color\n * @returns {boolean} true if success or false\n */\n startDrawingMode(mode, option) {\n if (this._isSameDrawingMode(mode)) {\n return true;\n }\n\n // If the current mode is not 'NORMAL', 'stopDrawingMode()' will be called first.\n this.stopDrawingMode();\n\n const drawingModeInstance = this._getDrawingModeInstance(mode);\n if (drawingModeInstance && drawingModeInstance.start) {\n drawingModeInstance.start(this, option);\n\n this._drawingMode = mode;\n }\n\n return !!drawingModeInstance;\n }\n\n /**\n * Stop the current drawing mode and back to the 'NORMAL' mode\n */\n stopDrawingMode() {\n if (this._isSameDrawingMode(drawingModes.NORMAL)) {\n return;\n }\n\n const drawingModeInstance = this._getDrawingModeInstance(this.getDrawingMode());\n if (drawingModeInstance && drawingModeInstance.end) {\n drawingModeInstance.end(this);\n }\n this._drawingMode = drawingModes.NORMAL;\n }\n\n /**\n * Change zoom of canvas\n * @param {{x: number, y: number}} center - center of zoom\n * @param {number} zoomLevel - zoom level\n */\n zoom({ x, y }, zoomLevel) {\n const zoom = this.getComponent(components.ZOOM);\n\n zoom.zoom({ x, y }, zoomLevel);\n }\n\n /**\n * Get zoom mode\n * @returns {string}\n */\n getZoomMode() {\n const zoom = this.getComponent(components.ZOOM);\n\n return zoom.mode;\n }\n\n /**\n * Start zoom-in mode\n */\n startZoomInMode() {\n const zoom = this.getComponent(components.ZOOM);\n\n zoom.startZoomInMode();\n }\n\n /**\n * Stop zoom-in mode\n */\n endZoomInMode() {\n const zoom = this.getComponent(components.ZOOM);\n\n zoom.endZoomInMode();\n }\n\n /**\n * Zoom out one step\n */\n zoomOut() {\n const zoom = this.getComponent(components.ZOOM);\n\n zoom.zoomOut();\n }\n\n /**\n * Start hand mode\n */\n startHandMode() {\n const zoom = this.getComponent(components.ZOOM);\n\n zoom.startHandMode();\n }\n\n /**\n * Stop hand mode\n */\n endHandMode() {\n const zoom = this.getComponent(components.ZOOM);\n\n zoom.endHandMode();\n }\n\n /**\n * Zoom reset\n */\n resetZoom() {\n const zoom = this.getComponent(components.ZOOM);\n\n zoom.resetZoom();\n }\n\n /**\n * To data url from canvas\n * @param {Object} options - options for toDataURL\n * @param {String} [options.format=png] The format of the output image. Either \"jpeg\" or \"png\"\n * @param {Number} [options.quality=1] Quality level (0..1). Only used for jpeg.\n * @param {Number} [options.multiplier=1] Multiplier to scale by\n * @param {Number} [options.left] Cropping left offset. Introduced in fabric v1.2.14\n * @param {Number} [options.top] Cropping top offset. Introduced in fabric v1.2.14\n * @param {Number} [options.width] Cropping width. Introduced in fabric v1.2.14\n * @param {Number} [options.height] Cropping height. Introduced in fabric v1.2.14\n * @returns {string} A DOMString containing the requested data URI.\n */\n toDataURL(options) {\n const cropper = this.getComponent(components.CROPPER);\n cropper.changeVisibility(false);\n\n const dataUrl = this._canvas && this._canvas.toDataURL(options);\n cropper.changeVisibility(true);\n\n return dataUrl;\n }\n\n /**\n * Save image(background) of canvas\n * @param {string} name - Name of image\n * @param {?fabric.Image} canvasImage - Fabric image instance\n */\n setCanvasImage(name, canvasImage) {\n if (canvasImage) {\n stamp(canvasImage);\n }\n this.imageName = name;\n this.canvasImage = canvasImage;\n }\n\n /**\n * Set css max dimension\n * @param {{width: number, height: number}} maxDimension - Max width & Max height\n */\n setCssMaxDimension(maxDimension) {\n this.cssMaxWidth = maxDimension.width || this.cssMaxWidth;\n this.cssMaxHeight = maxDimension.height || this.cssMaxHeight;\n }\n\n /**\n * Adjust canvas dimension with scaling image\n */\n adjustCanvasDimension() {\n this.adjustCanvasDimensionBase(this.canvasImage.scale(1));\n }\n\n adjustCanvasDimensionBase(canvasImage = null) {\n if (!canvasImage) {\n canvasImage = this.canvasImage;\n }\n\n const { width, height } = canvasImage.getBoundingRect();\n const maxDimension = this._calcMaxDimension(width, height);\n\n this.setCanvasCssDimension({\n width: '100%',\n height: '100%', // Set height '' for IE9\n 'max-width': `${maxDimension.width}px`,\n 'max-height': `${maxDimension.height}px`,\n });\n\n this.setCanvasBackstoreDimension({\n width,\n height,\n });\n this._canvas.centerObject(canvasImage);\n }\n\n /**\n * Set canvas dimension - css only\n * {@link http://fabricjs.com/docs/fabric.Canvas.html#setDimensions}\n * @param {Object} dimension - Canvas css dimension\n */\n setCanvasCssDimension(dimension) {\n this._canvas.setDimensions(dimension, cssOnly);\n }\n\n /**\n * Set canvas dimension - backstore only\n * {@link http://fabricjs.com/docs/fabric.Canvas.html#setDimensions}\n * @param {Object} dimension - Canvas backstore dimension\n */\n setCanvasBackstoreDimension(dimension) {\n this._canvas.setDimensions(dimension, backstoreOnly);\n }\n\n /**\n * Set image properties\n * {@link http://fabricjs.com/docs/fabric.Image.html#set}\n * @param {Object} setting - Image properties\n * @param {boolean} [withRendering] - If true, The changed image will be reflected in the canvas\n */\n setImageProperties(setting, withRendering) {\n const { canvasImage } = this;\n\n if (!canvasImage) {\n return;\n }\n\n canvasImage.set(setting).setCoords();\n if (withRendering) {\n this._canvas.renderAll();\n }\n }\n\n /**\n * Returns canvas element of fabric.Canvas[[lower-canvas]]\n * @returns {HTMLCanvasElement}\n */\n getCanvasElement() {\n return this._canvas.getElement();\n }\n\n /**\n * Get fabric.Canvas instance\n * @returns {fabric.Canvas}\n */\n getCanvas() {\n return this._canvas;\n }\n\n /**\n * Get canvasImage (fabric.Image instance)\n * @returns {fabric.Image}\n */\n getCanvasImage() {\n return this.canvasImage;\n }\n\n /**\n * Get image name\n * @returns {string}\n */\n getImageName() {\n return this.imageName;\n }\n\n /**\n * Add image object on canvas\n * @param {string} imgUrl - Image url to make object\n * @returns {Promise}\n */\n addImageObject(imgUrl) {\n const callback = this._callbackAfterLoadingImageObject.bind(this);\n\n return new Promise((resolve) => {\n fabric.Image.fromURL(\n imgUrl,\n (image) => {\n callback(image);\n resolve(this.createObjectProperties(image));\n },\n {\n crossOrigin: 'Anonymous',\n }\n );\n });\n }\n\n /**\n * Get center position of canvas\n * @returns {Object} {left, top}\n */\n getCenter() {\n return this._canvas.getCenter();\n }\n\n /**\n * Get cropped rect\n * @returns {Object} rect\n */\n getCropzoneRect() {\n return this.getComponent(components.CROPPER).getCropzoneRect();\n }\n\n /**\n * Get cropped rect\n * @param {number} [mode] cropzone rect mode\n */\n setCropzoneRect(mode) {\n this.getComponent(components.CROPPER).setCropzoneRect(mode);\n }\n\n /**\n * Get cropped image data\n * @param {Object} cropRect cropzone rect\n * @param {Number} cropRect.left left position\n * @param {Number} cropRect.top top position\n * @param {Number} cropRect.width width\n * @param {Number} cropRect.height height\n * @returns {?{imageName: string, url: string}} cropped Image data\n */\n getCroppedImageData(cropRect) {\n return this.getComponent(components.CROPPER).getCroppedImageData(cropRect);\n }\n\n /**\n * Set brush option\n * @param {Object} option brush option\n * @param {Number} option.width width\n * @param {String} option.color color like 'FFFFFF', 'rgba(0, 0, 0, 0.5)'\n */\n setBrush(option) {\n const drawingMode = this._drawingMode;\n let compName = components.FREE_DRAWING;\n\n if (drawingMode === drawingModes.LINE_DRAWING) {\n compName = components.LINE;\n }\n\n this.getComponent(compName).setBrush(option);\n }\n\n /**\n * Set states of current drawing shape\n * @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle')\n * @param {Object} [options] - Shape options\n * @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or\n * Shape foreground color (ex: '#fff', 'transparent')\n * @param {string} [options.stoke] - Shape outline color\n * @param {number} [options.strokeWidth] - Shape outline width\n * @param {number} [options.width] - Width value (When type option is 'rect', this options can use)\n * @param {number} [options.height] - Height value (When type option is 'rect', this options can use)\n * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)\n * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)\n * @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not\n */\n setDrawingShape(type, options) {\n this.getComponent(components.SHAPE).setStates(type, options);\n }\n\n /**\n * Set style of current drawing icon\n * @param {string} type - icon type (ex: 'icon-arrow', 'icon-star')\n * @param {Object} [iconColor] - Icon color\n */\n setIconStyle(type, iconColor) {\n this.getComponent(components.ICON).setStates(type, iconColor);\n }\n\n /**\n * Register icon paths\n * @param {Object} pathInfos - Path infos\n * @param {string} pathInfos.key - key\n * @param {string} pathInfos.value - value\n */\n registerPaths(pathInfos) {\n this.getComponent(components.ICON).registerPaths(pathInfos);\n }\n\n /**\n * Change cursor style\n * @param {string} cursorType - cursor type\n */\n changeCursor(cursorType) {\n const canvas = this.getCanvas();\n canvas.defaultCursor = cursorType;\n canvas.renderAll();\n }\n\n /**\n * Whether it has the filter or not\n * @param {string} type - Filter type\n * @returns {boolean} true if it has the filter\n */\n hasFilter(type) {\n return this.getComponent(components.FILTER).hasFilter(type);\n }\n\n /**\n * Set selection style of fabric object by init option\n * @param {Object} styles - Selection styles\n */\n setSelectionStyle(styles) {\n extend(fObjectOptions.SELECTION_STYLE, styles);\n }\n\n /**\n * Set object properties\n * @param {number} id - object id\n * @param {Object} props - props\n * @param {string} [props.fill] Color\n * @param {string} [props.fontFamily] Font type for text\n * @param {number} [props.fontSize] Size\n * @param {string} [props.fontStyle] Type of inclination (normal / italic)\n * @param {string} [props.fontWeight] Type of thicker or thinner looking (normal / bold)\n * @param {string} [props.textAlign] Type of text align (left / center / right)\n * @param {string} [props.textDecoration] Type of line (underline / line-through / overline)\n * @returns {Object} applied properties\n */\n setObjectProperties(id, props) {\n const object = this.getObject(id);\n const clone = extend({}, props);\n\n object.set(clone);\n\n object.setCoords();\n\n this.getCanvas().renderAll();\n\n return clone;\n }\n\n /**\n * Get object properties corresponding key\n * @param {number} id - object id\n * @param {Array|ObjectProps|string} keys - property's key\n * @returns {Object} properties\n */\n getObjectProperties(id, keys) {\n const object = this.getObject(id);\n const props = {};\n\n if (isString(keys)) {\n props[keys] = object[keys];\n } else if (isArray(keys)) {\n forEachArray(keys, (value) => {\n props[value] = object[value];\n });\n } else {\n forEachOwnProperties(keys, (value, key) => {\n props[key] = object[key];\n });\n }\n\n return props;\n }\n\n /**\n * Get object position by originX, originY\n * @param {number} id - object id\n * @param {string} originX - can be 'left', 'center', 'right'\n * @param {string} originY - can be 'top', 'center', 'bottom'\n * @returns {Object} {{x:number, y: number}} position by origin if id is valid, or null\n */\n getObjectPosition(id, originX, originY) {\n const targetObj = this.getObject(id);\n if (!targetObj) {\n return null;\n }\n\n return targetObj.getPointByOrigin(originX, originY);\n }\n\n /**\n * Set object position by originX, originY\n * @param {number} id - object id\n * @param {Object} posInfo - position object\n * @param {number} posInfo.x - x position\n * @param {number} posInfo.y - y position\n * @param {string} posInfo.originX - can be 'left', 'center', 'right'\n * @param {string} posInfo.originY - can be 'top', 'center', 'bottom'\n * @returns {boolean} true if target id is valid or false\n */\n setObjectPosition(id, posInfo) {\n const targetObj = this.getObject(id);\n const { x, y, originX, originY } = posInfo;\n if (!targetObj) {\n return false;\n }\n\n const targetOrigin = targetObj.getPointByOrigin(originX, originY);\n const centerOrigin = targetObj.getPointByOrigin('center', 'center');\n const diffX = centerOrigin.x - targetOrigin.x;\n const diffY = centerOrigin.y - targetOrigin.y;\n\n targetObj.set({\n left: x + diffX,\n top: y + diffY,\n });\n\n targetObj.setCoords();\n\n return true;\n }\n\n /**\n * Get the canvas size\n * @returns {Object} {{width: number, height: number}} image size\n */\n getCanvasSize() {\n const image = this.getCanvasImage();\n\n return {\n width: image ? image.width : 0,\n height: image ? image.height : 0,\n };\n }\n\n /**\n * Create fabric static canvas\n * @returns {Object} {{width: number, height: number}} image size\n */\n createStaticCanvas() {\n const staticCanvas = new fabric.StaticCanvas();\n\n staticCanvas.set({\n enableRetinaScaling: false,\n });\n\n return staticCanvas;\n }\n\n /**\n * Get a DrawingMode instance\n * @param {string} modeName - DrawingMode Class Name\n * @returns {DrawingMode} DrawingMode instance\n * @private\n */\n _getDrawingModeInstance(modeName) {\n return this._drawingModeMap[modeName];\n }\n\n /**\n * Set object caching to false. This brought many bugs when draw Shape & cropzone\n * @see http://fabricjs.com/fabric-object-caching\n * @private\n */\n _setObjectCachingToFalse() {\n fabric.Object.prototype.objectCaching = false;\n }\n\n /**\n * Set canvas element to fabric.Canvas\n * @param {Element|string} element - Wrapper or canvas element or selector\n * @private\n */\n _setCanvasElement(element) {\n let selectedElement;\n let canvasElement;\n\n if (element.nodeType) {\n selectedElement = element;\n } else {\n selectedElement = document.querySelector(element);\n }\n\n if (selectedElement.nodeName.toUpperCase() !== 'CANVAS') {\n canvasElement = document.createElement('canvas');\n selectedElement.appendChild(canvasElement);\n }\n\n this._canvas = new fabric.Canvas(canvasElement, {\n containerClass: 'tui-image-editor-canvas-container',\n enableRetinaScaling: false,\n });\n }\n\n /**\n * Creates DrawingMode instances\n * @private\n */\n _createDrawingModeInstances() {\n this._register(this._drawingModeMap, new CropperDrawingMode());\n this._register(this._drawingModeMap, new FreeDrawingMode());\n this._register(this._drawingModeMap, new LineDrawingMode());\n this._register(this._drawingModeMap, new ShapeDrawingMode());\n this._register(this._drawingModeMap, new TextDrawingMode());\n this._register(this._drawingModeMap, new IconDrawingMode());\n this._register(this._drawingModeMap, new ZoomDrawingMode());\n this._register(this._drawingModeMap, new ResizeDrawingMode());\n }\n\n /**\n * Create components\n * @private\n */\n _createComponents() {\n this._register(this._componentMap, new ImageLoader(this));\n this._register(this._componentMap, new Cropper(this));\n this._register(this._componentMap, new Flip(this));\n this._register(this._componentMap, new Rotation(this));\n this._register(this._componentMap, new FreeDrawing(this));\n this._register(this._componentMap, new Line(this));\n this._register(this._componentMap, new Text(this));\n this._register(this._componentMap, new Icon(this));\n this._register(this._componentMap, new Filter(this));\n this._register(this._componentMap, new Shape(this));\n this._register(this._componentMap, new Zoom(this));\n this._register(this._componentMap, new Resize(this));\n }\n\n /**\n * Register component\n * @param {Object} map - map object\n * @param {Object} module - module which has getName method\n * @private\n */\n _register(map, module) {\n map[module.getName()] = module;\n }\n\n /**\n * Get the current drawing mode is same with given mode\n * @param {string} mode drawing mode\n * @returns {boolean} true if same or false\n */\n _isSameDrawingMode(mode) {\n return this.getDrawingMode() === mode;\n }\n\n /**\n * Calculate max dimension of canvas\n * The css-max dimension is dynamically decided with maintaining image ratio\n * The css-max dimension is lower than canvas dimension (attribute of canvas, not css)\n * @param {number} width - Canvas width\n * @param {number} height - Canvas height\n * @returns {{width: number, height: number}} - Max width & Max height\n * @private\n */\n _calcMaxDimension(width, height) {\n const wScaleFactor = this.cssMaxWidth / width;\n const hScaleFactor = this.cssMaxHeight / height;\n let cssMaxWidth = Math.min(width, this.cssMaxWidth);\n let cssMaxHeight = Math.min(height, this.cssMaxHeight);\n\n if (wScaleFactor < 1 && wScaleFactor < hScaleFactor) {\n cssMaxWidth = width * wScaleFactor;\n cssMaxHeight = height * wScaleFactor;\n } else if (hScaleFactor < 1 && hScaleFactor < wScaleFactor) {\n cssMaxWidth = width * hScaleFactor;\n cssMaxHeight = height * hScaleFactor;\n }\n\n return {\n width: Math.floor(cssMaxWidth),\n height: Math.floor(cssMaxHeight),\n };\n }\n\n /**\n * Callback function after loading image\n * @param {fabric.Image} obj - Fabric image object\n * @private\n */\n _callbackAfterLoadingImageObject(obj) {\n const centerPos = this.getCanvasImage().getCenterPoint();\n\n obj.set(fObjectOptions.SELECTION_STYLE);\n obj.set({\n left: centerPos.x,\n top: centerPos.y,\n crossOrigin: 'Anonymous',\n });\n\n this.getCanvas().add(obj).setActiveObject(obj);\n }\n\n /**\n * Attach canvas's events\n */\n _attachCanvasEvents() {\n const canvas = this._canvas;\n const handler = this._handler;\n canvas.on({\n 'mouse:down': handler.onMouseDown,\n 'object:added': handler.onObjectAdded,\n 'object:removed': handler.onObjectRemoved,\n 'object:moving': handler.onObjectMoved,\n 'object:scaling': handler.onObjectScaled,\n 'object:modified': handler.onObjectModified,\n 'object:rotating': handler.onObjectRotated,\n 'path:created': handler.onPathCreated,\n 'selection:cleared': handler.onSelectionCleared,\n 'selection:created': handler.onSelectionCreated,\n 'selection:updated': handler.onObjectSelected,\n });\n }\n\n /**\n * \"mouse:down\" canvas event handler\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onMouseDown(fEvent) {\n const { e: event, target } = fEvent;\n const originPointer = this._canvas.getPointer(event);\n\n if (target) {\n const { type } = target;\n const undoData = makeSelectionUndoData(target, (item) =>\n makeSelectionUndoDatum(this.getObjectId(item), item, type === 'activeSelection')\n );\n\n setCachedUndoDataForDimension(undoData);\n }\n\n this.fire(events.MOUSE_DOWN, event, originPointer);\n }\n\n /**\n * \"object:added\" canvas event handler\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onObjectAdded(fEvent) {\n const obj = fEvent.target;\n if (obj.isType('cropzone')) {\n return;\n }\n\n this._addFabricObject(obj);\n }\n\n /**\n * \"object:removed\" canvas event handler\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onObjectRemoved(fEvent) {\n const obj = fEvent.target;\n\n this._removeFabricObject(stamp(obj));\n }\n\n /**\n * \"object:moving\" canvas event handler\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onObjectMoved(fEvent) {\n this._lazyFire(\n events.OBJECT_MOVED,\n (object) => this.createObjectProperties(object),\n fEvent.target\n );\n }\n\n /**\n * \"object:scaling\" canvas event handler\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onObjectScaled(fEvent) {\n this._lazyFire(\n events.OBJECT_SCALED,\n (object) => this.createObjectProperties(object),\n fEvent.target\n );\n }\n\n /**\n * \"object:modified\" canvas event handler\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onObjectModified(fEvent) {\n const { target } = fEvent;\n if (target.type === 'activeSelection') {\n const items = target.getObjects();\n\n items.forEach((item) => item.fire('modifiedInGroup', target));\n }\n\n this.fire(events.OBJECT_MODIFIED, target, this.getObjectId(target));\n }\n\n /**\n * \"object:rotating\" canvas event handler\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onObjectRotated(fEvent) {\n this._lazyFire(\n events.OBJECT_ROTATED,\n (object) => this.createObjectProperties(object),\n fEvent.target\n );\n }\n\n /**\n * Lazy event emitter\n * @param {string} eventName - event name\n * @param {Function} paramsMaker - make param function\n * @param {Object} [target] - Object of the event owner.\n * @private\n */\n _lazyFire(eventName, paramsMaker, target) {\n const existEventDelegation = target && target.canvasEventDelegation;\n const delegationState = existEventDelegation ? target.canvasEventDelegation(eventName) : 'none';\n\n if (delegationState === 'unregistered') {\n target.canvasEventRegister(eventName, (object) => {\n this.fire(eventName, paramsMaker(object));\n });\n }\n\n if (delegationState === 'none') {\n this.fire(eventName, paramsMaker(target));\n }\n }\n\n /**\n * \"object:selected\" canvas event handler\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onObjectSelected(fEvent) {\n const { target } = fEvent;\n const params = this.createObjectProperties(target);\n\n this.fire(events.OBJECT_ACTIVATED, params);\n }\n\n /**\n * \"path:created\" canvas event handler\n * @param {{path: fabric.Path}} obj - Path object\n * @private\n */\n _onPathCreated(obj) {\n const { x: left, y: top } = obj.path.getCenterPoint();\n obj.path.set(\n extend(\n {\n left,\n top,\n },\n fObjectOptions.SELECTION_STYLE\n )\n );\n\n const params = this.createObjectProperties(obj.path);\n\n this.fire(events.ADD_OBJECT, params);\n }\n\n /**\n * \"selction:cleared\" canvas event handler\n * @private\n */\n _onSelectionCleared() {\n this.fire(events.SELECTION_CLEARED);\n }\n\n /**\n * \"selction:created\" canvas event handler\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onSelectionCreated(fEvent) {\n const { target } = fEvent;\n const params = this.createObjectProperties(target);\n\n this.fire(events.OBJECT_ACTIVATED, params);\n this.fire(events.SELECTION_CREATED, fEvent.target);\n }\n\n /**\n * Canvas discard selection all\n */\n discardSelection() {\n this._canvas.discardActiveObject();\n this._canvas.renderAll();\n }\n\n /**\n * Canvas Selectable status change\n * @param {boolean} selectable - expect status\n */\n changeSelectableAll(selectable) {\n this._canvas.forEachObject((obj) => {\n obj.selectable = selectable;\n obj.hoverCursor = selectable ? 'move' : 'crosshair';\n });\n }\n\n /**\n * Return object's properties\n * @param {fabric.Object} obj - fabric object\n * @returns {Object} properties object\n */\n createObjectProperties(obj) {\n const predefinedKeys = [\n 'left',\n 'top',\n 'width',\n 'height',\n 'fill',\n 'stroke',\n 'strokeWidth',\n 'opacity',\n 'angle',\n ];\n const props = {\n id: stamp(obj),\n type: obj.type,\n };\n\n extend(props, getProperties(obj, predefinedKeys));\n\n if (includes(['i-text', 'text'], obj.type)) {\n extend(props, this._createTextProperties(obj, props));\n } else if (includes(['rect', 'triangle', 'circle'], obj.type)) {\n const shapeComp = this.getComponent(components.SHAPE);\n extend(props, {\n fill: shapeComp.makeFillPropertyForUserEvent(obj),\n });\n }\n\n return props;\n }\n\n /**\n * Get text object's properties\n * @param {fabric.Object} obj - fabric text object\n * @param {Object} props - properties\n * @returns {Object} properties object\n */\n _createTextProperties(obj) {\n const predefinedKeys = [\n 'text',\n 'fontFamily',\n 'fontSize',\n 'fontStyle',\n 'textAlign',\n 'textDecoration',\n 'fontWeight',\n ];\n const props = {};\n extend(props, getProperties(obj, predefinedKeys));\n\n return props;\n }\n\n /**\n * Add object array by id\n * @param {fabric.Object} obj - fabric object\n * @returns {number} object id\n */\n _addFabricObject(obj) {\n const id = stamp(obj);\n this._objects[id] = obj;\n\n return id;\n }\n\n /**\n * Remove an object in array yb id\n * @param {number} id - object id\n */\n _removeFabricObject(id) {\n delete this._objects[id];\n }\n\n /**\n * Reset targetObjectForCopyPaste value from activeObject\n */\n resetTargetObjectForCopyPaste() {\n const activeObject = this.getActiveObject();\n\n if (activeObject) {\n this.targetObjectForCopyPaste = activeObject;\n }\n }\n\n /**\n * Paste fabric object\n * @returns {Promise}\n */\n pasteObject() {\n if (!this.targetObjectForCopyPaste) {\n return Promise.resolve([]);\n }\n\n const targetObject = this.targetObjectForCopyPaste;\n const isGroupSelect = targetObject.type === 'activeSelection';\n const targetObjects = isGroupSelect ? targetObject.getObjects() : [targetObject];\n let newTargetObject = null;\n\n this.discardSelection();\n\n return this._cloneObject(targetObjects).then((addedObjects) => {\n if (addedObjects.length > 1) {\n newTargetObject = this.getActiveSelectionFromObjects(addedObjects);\n } else {\n [newTargetObject] = addedObjects;\n }\n this.targetObjectForCopyPaste = newTargetObject;\n this.setActiveObject(newTargetObject);\n });\n }\n\n /**\n * Clone object\n * @param {fabric.Object} targetObjects - fabric object\n * @returns {Promise}\n * @private\n */\n _cloneObject(targetObjects) {\n const addedObjects = snippet.map(targetObjects, (targetObject) =>\n this._cloneObjectItem(targetObject)\n );\n\n return Promise.all(addedObjects);\n }\n\n /**\n * Clone object one item\n * @param {fabric.Object} targetObject - fabric object\n * @returns {Promise}\n * @private\n */\n _cloneObjectItem(targetObject) {\n return this._copyFabricObjectForPaste(targetObject).then((clonedObject) => {\n const objectProperties = this.createObjectProperties(clonedObject);\n this.add(clonedObject);\n\n this.fire(events.ADD_OBJECT, objectProperties);\n\n return clonedObject;\n });\n }\n\n /**\n * Copy fabric object with Changed position for copy and paste\n * @param {fabric.Object} targetObject - fabric object\n * @returns {Promise}\n * @private\n */\n _copyFabricObjectForPaste(targetObject) {\n const addExtraPx = (value, isReverse) =>\n isReverse ? value - EXTRA_PX_FOR_PASTE : value + EXTRA_PX_FOR_PASTE;\n\n return this._copyFabricObject(targetObject).then((clonedObject) => {\n const { left, top, width, height } = clonedObject;\n const { width: canvasWidth, height: canvasHeight } = this.getCanvasSize();\n const rightEdge = left + width / 2;\n const bottomEdge = top + height / 2;\n\n clonedObject.set(\n snippet.extend(\n {\n left: addExtraPx(left, rightEdge + EXTRA_PX_FOR_PASTE > canvasWidth),\n top: addExtraPx(top, bottomEdge + EXTRA_PX_FOR_PASTE > canvasHeight),\n },\n fObjectOptions.SELECTION_STYLE\n )\n );\n\n return clonedObject;\n });\n }\n\n /**\n * Copy fabric object\n * @param {fabric.Object} targetObject - fabric object\n * @returns {Promise}\n * @private\n */\n _copyFabricObject(targetObject) {\n return new Promise((resolve) => {\n targetObject.clone((cloned) => {\n const shapeComp = this.getComponent(components.SHAPE);\n if (isShape(cloned)) {\n shapeComp.processForCopiedObject(cloned, targetObject);\n }\n\n resolve(cloned);\n });\n });\n }\n\n /**\n * Get current dimensions\n * @returns {object}\n */\n getCurrentDimensions() {\n const resize = this.getComponent(components.RESIZE);\n\n return resize.getCurrentDimensions();\n }\n\n /**\n * Get original dimensions\n * @returns {object}\n */\n getOriginalDimensions() {\n const resize = this.getComponent(components.RESIZE);\n\n return resize.getOriginalDimensions();\n }\n\n /**\n * Set original dimensions\n * @param {object} dimensions - Dimensions\n */\n setOriginalDimensions(dimensions) {\n const resize = this.getComponent(components.RESIZE);\n resize.setOriginalDimensions(dimensions);\n }\n\n /**\n * Resize Image\n * @param {Object} dimensions - Resize dimensions\n * @returns {Promise}\n */\n resize(dimensions) {\n const resize = this.getComponent(components.RESIZE);\n\n return resize.resize(dimensions);\n }\n}\n\nCustomEvents.mixin(Graphics);\n\nexport default Graphics;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Image loader\n */\nimport Component from '@/interface/component';\nimport { Promise } from '@/util';\nimport { componentNames, rejectMessages } from '@/consts';\n\nconst imageOption = {\n padding: 0,\n crossOrigin: 'Anonymous',\n};\n\n/**\n * ImageLoader components\n * @extends {Component}\n * @class ImageLoader\n * @param {Graphics} graphics - Graphics instance\n * @ignore\n */\nclass ImageLoader extends Component {\n constructor(graphics) {\n super(componentNames.IMAGE_LOADER, graphics);\n }\n\n /**\n * Load image from url\n * @param {?string} imageName - File name\n * @param {?(fabric.Image|string)} img - fabric.Image instance or URL of an image\n * @returns {Promise}\n */\n load(imageName, img) {\n let promise;\n\n if (!imageName && !img) {\n // Back to the initial state, not error.\n const canvas = this.getCanvas();\n\n canvas.backgroundImage = null;\n canvas.renderAll();\n\n promise = new Promise((resolve) => {\n this.setCanvasImage('', null);\n resolve();\n });\n } else {\n promise = this._setBackgroundImage(img).then((oImage) => {\n this.setCanvasImage(imageName, oImage);\n this.adjustCanvasDimension();\n\n return oImage;\n });\n }\n\n return promise;\n }\n\n /**\n * Set background image\n * @param {?(fabric.Image|String)} img fabric.Image instance or URL of an image to set background to\n * @returns {Promise}\n * @private\n */\n _setBackgroundImage(img) {\n if (!img) {\n return Promise.reject(rejectMessages.loadImage);\n }\n\n return new Promise((resolve, reject) => {\n const canvas = this.getCanvas();\n\n canvas.setBackgroundImage(\n img,\n () => {\n const oImage = canvas.backgroundImage;\n\n if (oImage && oImage.getElement()) {\n resolve(oImage);\n } else {\n reject(rejectMessages.loadingImageFailed);\n }\n },\n imageOption\n );\n });\n }\n}\n\nexport default ImageLoader;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Image crop module (start cropping, end cropping)\n */\nimport snippet from 'tui-code-snippet';\nimport fabric from 'fabric';\nimport Component from '@/interface/component';\nimport Cropzone from '@/extension/cropzone';\nimport { keyCodes, componentNames, CROPZONE_DEFAULT_OPTIONS } from '@/consts';\nimport { clamp, fixFloatingPoint } from '@/util';\n\nconst MOUSE_MOVE_THRESHOLD = 10;\nconst DEFAULT_OPTION = {\n presetRatio: null,\n top: -10,\n left: -10,\n height: 1,\n width: 1,\n};\n\n/**\n * Cropper components\n * @param {Graphics} graphics - Graphics instance\n * @extends {Component}\n * @class Cropper\n * @ignore\n */\nclass Cropper extends Component {\n constructor(graphics) {\n super(componentNames.CROPPER, graphics);\n\n /**\n * Cropzone\n * @type {Cropzone}\n * @private\n */\n this._cropzone = null;\n\n /**\n * StartX of Cropzone\n * @type {number}\n * @private\n */\n this._startX = null;\n\n /**\n * StartY of Cropzone\n * @type {number}\n * @private\n */\n this._startY = null;\n\n /**\n * State whether shortcut key is pressed or not\n * @type {boolean}\n * @private\n */\n this._withShiftKey = false;\n\n /**\n * Listeners\n * @type {object.}\n * @private\n */\n this._listeners = {\n keydown: this._onKeyDown.bind(this),\n keyup: this._onKeyUp.bind(this),\n mousedown: this._onFabricMouseDown.bind(this),\n mousemove: this._onFabricMouseMove.bind(this),\n mouseup: this._onFabricMouseUp.bind(this),\n };\n }\n\n /**\n * Start cropping\n */\n start() {\n if (this._cropzone) {\n return;\n }\n const canvas = this.getCanvas();\n\n canvas.forEachObject((obj) => {\n // {@link http://fabricjs.com/docs/fabric.Object.html#evented}\n obj.evented = false;\n });\n\n this._cropzone = new Cropzone(\n canvas,\n snippet.extend(\n {\n left: 0,\n top: 0,\n width: 0.5,\n height: 0.5,\n strokeWidth: 0, // {@link https://github.com/kangax/fabric.js/issues/2860}\n cornerSize: 10,\n cornerColor: 'black',\n fill: 'transparent',\n },\n CROPZONE_DEFAULT_OPTIONS,\n this.graphics.cropSelectionStyle\n )\n );\n\n canvas.discardActiveObject();\n canvas.add(this._cropzone);\n canvas.on('mouse:down', this._listeners.mousedown);\n canvas.selection = false;\n canvas.defaultCursor = 'crosshair';\n\n fabric.util.addListener(document, 'keydown', this._listeners.keydown);\n fabric.util.addListener(document, 'keyup', this._listeners.keyup);\n }\n\n /**\n * End cropping\n */\n end() {\n const canvas = this.getCanvas();\n const cropzone = this._cropzone;\n\n if (!cropzone) {\n return;\n }\n canvas.remove(cropzone);\n canvas.selection = true;\n canvas.defaultCursor = 'default';\n canvas.off('mouse:down', this._listeners.mousedown);\n canvas.forEachObject((obj) => {\n obj.evented = true;\n });\n\n this._cropzone = null;\n\n fabric.util.removeListener(document, 'keydown', this._listeners.keydown);\n fabric.util.removeListener(document, 'keyup', this._listeners.keyup);\n }\n\n /**\n * Change cropzone visible\n * @param {boolean} visible - cropzone visible state\n */\n changeVisibility(visible) {\n if (this._cropzone) {\n this._cropzone.set({ visible });\n }\n }\n\n /**\n * onMousedown handler in fabric canvas\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onFabricMouseDown(fEvent) {\n const canvas = this.getCanvas();\n\n if (fEvent.target) {\n return;\n }\n\n canvas.selection = false;\n const coord = canvas.getPointer(fEvent.e);\n\n this._startX = coord.x;\n this._startY = coord.y;\n\n canvas.on({\n 'mouse:move': this._listeners.mousemove,\n 'mouse:up': this._listeners.mouseup,\n });\n }\n\n /**\n * onMousemove handler in fabric canvas\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onFabricMouseMove(fEvent) {\n const canvas = this.getCanvas();\n const pointer = canvas.getPointer(fEvent.e);\n const { x, y } = pointer;\n const cropzone = this._cropzone;\n\n if (Math.abs(x - this._startX) + Math.abs(y - this._startY) > MOUSE_MOVE_THRESHOLD) {\n canvas.remove(cropzone);\n cropzone.set(this._calcRectDimensionFromPoint(x, y));\n\n canvas.add(cropzone);\n canvas.setActiveObject(cropzone);\n }\n }\n\n /**\n * Get rect dimension setting from Canvas-Mouse-Position(x, y)\n * @param {number} x - Canvas-Mouse-Position x\n * @param {number} y - Canvas-Mouse-Position Y\n * @returns {{left: number, top: number, width: number, height: number}}\n * @private\n */\n _calcRectDimensionFromPoint(x, y) {\n const canvas = this.getCanvas();\n const canvasWidth = canvas.getWidth();\n const canvasHeight = canvas.getHeight();\n const startX = this._startX;\n const startY = this._startY;\n let left = clamp(x, 0, startX);\n let top = clamp(y, 0, startY);\n let width = clamp(x, startX, canvasWidth) - left; // (startX <= x(mouse) <= canvasWidth) - left\n let height = clamp(y, startY, canvasHeight) - top; // (startY <= y(mouse) <= canvasHeight) - top\n\n if (this._withShiftKey) {\n // make fixed ratio cropzone\n if (width > height) {\n height = width;\n } else if (height > width) {\n width = height;\n }\n\n if (startX >= x) {\n left = startX - width;\n }\n\n if (startY >= y) {\n top = startY - height;\n }\n }\n\n return {\n left,\n top,\n width,\n height,\n };\n }\n\n /**\n * onMouseup handler in fabric canvas\n * @private\n */\n _onFabricMouseUp() {\n const cropzone = this._cropzone;\n const listeners = this._listeners;\n const canvas = this.getCanvas();\n\n canvas.setActiveObject(cropzone);\n canvas.off({\n 'mouse:move': listeners.mousemove,\n 'mouse:up': listeners.mouseup,\n });\n }\n\n /**\n * Get cropped image data\n * @param {Object} cropRect cropzone rect\n * @param {Number} cropRect.left left position\n * @param {Number} cropRect.top top position\n * @param {Number} cropRect.width width\n * @param {Number} cropRect.height height\n * @returns {?{imageName: string, url: string}} cropped Image data\n */\n getCroppedImageData(cropRect) {\n const canvas = this.getCanvas();\n const containsCropzone = canvas.contains(this._cropzone);\n if (!cropRect) {\n return null;\n }\n\n if (containsCropzone) {\n canvas.remove(this._cropzone);\n }\n\n const imageData = {\n imageName: this.getImageName(),\n url: canvas.toDataURL(cropRect),\n };\n\n if (containsCropzone) {\n canvas.add(this._cropzone);\n }\n\n return imageData;\n }\n\n /**\n * Get cropped rect\n * @returns {Object} rect\n */\n getCropzoneRect() {\n const cropzone = this._cropzone;\n\n if (!cropzone.isValid()) {\n return null;\n }\n\n return {\n left: cropzone.left,\n top: cropzone.top,\n width: cropzone.width,\n height: cropzone.height,\n };\n }\n\n /**\n * Set a cropzone square\n * @param {number} [presetRatio] - preset ratio\n */\n setCropzoneRect(presetRatio) {\n const canvas = this.getCanvas();\n const cropzone = this._cropzone;\n\n canvas.discardActiveObject();\n canvas.selection = false;\n canvas.remove(cropzone);\n\n cropzone.set(presetRatio ? this._getPresetPropertiesForCropSize(presetRatio) : DEFAULT_OPTION);\n\n canvas.add(cropzone);\n canvas.selection = true;\n\n if (presetRatio) {\n canvas.setActiveObject(cropzone);\n }\n }\n\n /**\n * get a cropzone square info\n * @param {number} presetRatio - preset ratio\n * @returns {{presetRatio: number, left: number, top: number, width: number, height: number}}\n * @private\n */\n _getPresetPropertiesForCropSize(presetRatio) {\n const canvas = this.getCanvas();\n const originalWidth = canvas.getWidth();\n const originalHeight = canvas.getHeight();\n\n const standardSize = originalWidth >= originalHeight ? originalWidth : originalHeight;\n const getScale = (value, orignalValue) => (value > orignalValue ? orignalValue / value : 1);\n\n let width = standardSize * presetRatio;\n let height = standardSize;\n\n const scaleWidth = getScale(width, originalWidth);\n [width, height] = snippet.map([width, height], (sizeValue) => sizeValue * scaleWidth);\n\n const scaleHeight = getScale(height, originalHeight);\n [width, height] = snippet.map([width, height], (sizeValue) =>\n fixFloatingPoint(sizeValue * scaleHeight)\n );\n\n return {\n presetRatio,\n top: (originalHeight - height) / 2,\n left: (originalWidth - width) / 2,\n width,\n height,\n };\n }\n\n /**\n * Keydown event handler\n * @param {KeyboardEvent} e - Event object\n * @private\n */\n _onKeyDown(e) {\n if (e.keyCode === keyCodes.SHIFT) {\n this._withShiftKey = true;\n }\n }\n\n /**\n * Keyup event handler\n * @param {KeyboardEvent} e - Event object\n * @private\n */\n _onKeyUp(e) {\n if (e.keyCode === keyCodes.SHIFT) {\n this._withShiftKey = false;\n }\n }\n}\n\nexport default Cropper;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Cropzone extending fabric.Rect\n */\nimport snippet from 'tui-code-snippet';\nimport fabric from 'fabric';\nimport { clamp } from '@/util';\nimport { eventNames as events, keyCodes } from '@/consts';\n\nconst CORNER_TYPE_TOP_LEFT = 'tl';\nconst CORNER_TYPE_TOP_RIGHT = 'tr';\nconst CORNER_TYPE_MIDDLE_TOP = 'mt';\nconst CORNER_TYPE_MIDDLE_LEFT = 'ml';\nconst CORNER_TYPE_MIDDLE_RIGHT = 'mr';\nconst CORNER_TYPE_MIDDLE_BOTTOM = 'mb';\nconst CORNER_TYPE_BOTTOM_LEFT = 'bl';\nconst CORNER_TYPE_BOTTOM_RIGHT = 'br';\nconst CORNER_TYPE_LIST = [\n CORNER_TYPE_TOP_LEFT,\n CORNER_TYPE_TOP_RIGHT,\n CORNER_TYPE_MIDDLE_TOP,\n CORNER_TYPE_MIDDLE_LEFT,\n CORNER_TYPE_MIDDLE_RIGHT,\n CORNER_TYPE_MIDDLE_BOTTOM,\n CORNER_TYPE_BOTTOM_LEFT,\n CORNER_TYPE_BOTTOM_RIGHT,\n];\nconst NOOP_FUNCTION = () => {};\n\n/**\n * Align with cropzone ratio\n * @param {string} selectedCorner - selected corner type\n * @returns {{width: number, height: number}}\n * @private\n */\nfunction cornerTypeValid(selectedCorner) {\n return CORNER_TYPE_LIST.indexOf(selectedCorner) >= 0;\n}\n\n/**\n * return scale basis type\n * @param {number} diffX - X distance of the cursor and corner.\n * @param {number} diffY - Y distance of the cursor and corner.\n * @returns {string}\n * @private\n */\nfunction getScaleBasis(diffX, diffY) {\n return diffX > diffY ? 'width' : 'height';\n}\n\n/**\n * Cropzone object\n * Issue: IE7, 8(with excanvas)\n * - Cropzone is a black zone without transparency.\n * @class Cropzone\n * @extends {fabric.Rect}\n * @ignore\n */\nconst Cropzone = fabric.util.createClass(\n fabric.Rect,\n /** @lends Cropzone.prototype */ {\n /**\n * Constructor\n * @param {Object} canvas canvas\n * @param {Object} options Options object\n * @param {Object} extendsOptions object for extends \"options\"\n * @override\n */\n initialize(canvas, options, extendsOptions) {\n options = snippet.extend(options, extendsOptions);\n options.type = 'cropzone';\n\n this.callSuper('initialize', options);\n this._addEventHandler();\n\n this.canvas = canvas;\n this.options = options;\n },\n canvasEventDelegation(eventName) {\n let delegationState = 'unregistered';\n const isRegistered = this.canvasEventTrigger[eventName] !== NOOP_FUNCTION;\n if (isRegistered) {\n delegationState = 'registered';\n } else if ([events.OBJECT_MOVED, events.OBJECT_SCALED].indexOf(eventName) < 0) {\n delegationState = 'none';\n }\n\n return delegationState;\n },\n canvasEventRegister(eventName, eventTrigger) {\n this.canvasEventTrigger[eventName] = eventTrigger;\n },\n _addEventHandler() {\n this.canvasEventTrigger = {\n [events.OBJECT_MOVED]: NOOP_FUNCTION,\n [events.OBJECT_SCALED]: NOOP_FUNCTION,\n };\n this.on({\n moving: this._onMoving.bind(this),\n scaling: this._onScaling.bind(this),\n });\n fabric.util.addListener(document, 'keydown', this._onKeyDown.bind(this));\n fabric.util.addListener(document, 'keyup', this._onKeyUp.bind(this));\n },\n _renderCropzone(ctx) {\n const cropzoneDashLineWidth = 7;\n const cropzoneDashLineOffset = 7;\n\n // Calc original scale\n const originalFlipX = this.flipX ? -1 : 1;\n const originalFlipY = this.flipY ? -1 : 1;\n const originalScaleX = originalFlipX / this.scaleX;\n const originalScaleY = originalFlipY / this.scaleY;\n\n // Set original scale\n ctx.scale(originalScaleX, originalScaleY);\n\n // Render outer rect\n this._fillOuterRect(ctx, 'rgba(0, 0, 0, 0.5)');\n\n if (this.options.lineWidth) {\n this._fillInnerRect(ctx);\n this._strokeBorder(ctx, 'rgb(255, 255, 255)', {\n lineWidth: this.options.lineWidth,\n });\n } else {\n // Black dash line\n this._strokeBorder(ctx, 'rgb(0, 0, 0)', {\n lineDashWidth: cropzoneDashLineWidth,\n });\n\n // White dash line\n this._strokeBorder(ctx, 'rgb(255, 255, 255)', {\n lineDashWidth: cropzoneDashLineWidth,\n lineDashOffset: cropzoneDashLineOffset,\n });\n }\n\n // Reset scale\n ctx.scale(1 / originalScaleX, 1 / originalScaleY);\n },\n\n /**\n * Render Crop-zone\n * @private\n * @override\n */\n _render(ctx) {\n this.callSuper('_render', ctx);\n\n this._renderCropzone(ctx);\n },\n\n /**\n * Cropzone-coordinates with outer rectangle\n *\n * x0 x1 x2 x3\n * y0 +--------------------------+\n * |///////|//////////|///////| // <--- \"Outer-rectangle\"\n * |///////|//////////|///////|\n * y1 +-------+----------+-------+\n * |///////| Cropzone |///////| Cropzone is the \"Inner-rectangle\"\n * |///////| (0, 0) |///////| Center point (0, 0)\n * y2 +-------+----------+-------+\n * |///////|//////////|///////|\n * |///////|//////////|///////|\n * y3 +--------------------------+\n *\n * @typedef {{x: Array, y: Array}} cropzoneCoordinates\n * @ignore\n */\n\n /**\n * Fill outer rectangle\n * @param {CanvasRenderingContext2D} ctx - Context\n * @param {string|CanvasGradient|CanvasPattern} fillStyle - Fill-style\n * @private\n */\n _fillOuterRect(ctx, fillStyle) {\n const { x, y } = this._getCoordinates();\n\n ctx.save();\n ctx.fillStyle = fillStyle;\n ctx.beginPath();\n\n // Outer rectangle\n // Numbers are +/-1 so that overlay edges don't get blurry.\n ctx.moveTo(x[0] - 1, y[0] - 1);\n ctx.lineTo(x[3] + 1, y[0] - 1);\n ctx.lineTo(x[3] + 1, y[3] + 1);\n ctx.lineTo(x[0] - 1, y[3] + 1);\n ctx.lineTo(x[0] - 1, y[0] - 1);\n ctx.closePath();\n\n // Inner rectangle\n ctx.moveTo(x[1], y[1]);\n ctx.lineTo(x[1], y[2]);\n ctx.lineTo(x[2], y[2]);\n ctx.lineTo(x[2], y[1]);\n ctx.lineTo(x[1], y[1]);\n ctx.closePath();\n\n ctx.fill();\n ctx.restore();\n },\n\n /**\n * Draw Inner grid line\n * @param {CanvasRenderingContext2D} ctx - Context\n * @private\n */\n _fillInnerRect(ctx) {\n const { x: outerX, y: outerY } = this._getCoordinates();\n const x = this._caculateInnerPosition(outerX, (outerX[2] - outerX[1]) / 3);\n const y = this._caculateInnerPosition(outerY, (outerY[2] - outerY[1]) / 3);\n\n ctx.save();\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)';\n ctx.lineWidth = this.options.lineWidth;\n ctx.beginPath();\n\n ctx.moveTo(x[0], y[1]);\n ctx.lineTo(x[3], y[1]);\n\n ctx.moveTo(x[0], y[2]);\n ctx.lineTo(x[3], y[2]);\n\n ctx.moveTo(x[1], y[0]);\n ctx.lineTo(x[1], y[3]);\n\n ctx.moveTo(x[2], y[0]);\n ctx.lineTo(x[2], y[3]);\n ctx.stroke();\n ctx.closePath();\n\n ctx.restore();\n },\n\n /**\n * Calculate Inner Position\n * @param {Array} outer - outer position\n * @param {number} size - interval for calculate\n * @returns {Array} - inner position\n * @private\n */\n _caculateInnerPosition(outer, size) {\n const position = [];\n position[0] = outer[1];\n position[1] = outer[1] + size;\n position[2] = outer[1] + size * 2;\n position[3] = outer[2];\n\n return position;\n },\n\n /**\n * Get coordinates\n * @returns {cropzoneCoordinates} - {@link cropzoneCoordinates}\n * @private\n */\n _getCoordinates() {\n const { canvas, width, height, left, top } = this;\n const halfWidth = width / 2;\n const halfHeight = height / 2;\n const canvasHeight = canvas.getHeight(); // fabric object\n const canvasWidth = canvas.getWidth(); // fabric object\n\n return {\n x: snippet.map(\n [\n -(halfWidth + left), // x0\n -halfWidth, // x1\n halfWidth, // x2\n halfWidth + (canvasWidth - left - width), // x3\n ],\n Math.ceil\n ),\n y: snippet.map(\n [\n -(halfHeight + top), // y0\n -halfHeight, // y1\n halfHeight, // y2\n halfHeight + (canvasHeight - top - height), // y3\n ],\n Math.ceil\n ),\n };\n },\n\n /**\n * Stroke border\n * @param {CanvasRenderingContext2D} ctx - Context\n * @param {string|CanvasGradient|CanvasPattern} strokeStyle - Stroke-style\n * @param {number} lineDashWidth - Dash width\n * @param {number} [lineDashOffset] - Dash offset\n * @param {number} [lineWidth] - line width\n * @private\n */\n _strokeBorder(ctx, strokeStyle, { lineDashWidth, lineDashOffset, lineWidth }) {\n const halfWidth = this.width / 2;\n const halfHeight = this.height / 2;\n\n ctx.save();\n ctx.strokeStyle = strokeStyle;\n\n if (ctx.setLineDash) {\n ctx.setLineDash([lineDashWidth, lineDashWidth]);\n }\n if (lineDashOffset) {\n ctx.lineDashOffset = lineDashOffset;\n }\n if (lineWidth) {\n ctx.lineWidth = lineWidth;\n }\n\n ctx.beginPath();\n ctx.moveTo(-halfWidth, -halfHeight);\n ctx.lineTo(halfWidth, -halfHeight);\n ctx.lineTo(halfWidth, halfHeight);\n ctx.lineTo(-halfWidth, halfHeight);\n ctx.lineTo(-halfWidth, -halfHeight);\n ctx.stroke();\n\n ctx.restore();\n },\n\n /**\n * onMoving event listener\n * @private\n */\n _onMoving() {\n const { height, width, left, top } = this;\n const maxLeft = this.canvas.getWidth() - width;\n const maxTop = this.canvas.getHeight() - height;\n\n this.left = clamp(left, 0, maxLeft);\n this.top = clamp(top, 0, maxTop);\n\n this.canvasEventTrigger[events.OBJECT_MOVED](this);\n },\n\n /**\n * onScaling event listener\n * @param {{e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onScaling(fEvent) {\n const selectedCorner = fEvent.transform.corner;\n const pointer = this.canvas.getPointer(fEvent.e);\n const settings = this._calcScalingSizeFromPointer(pointer, selectedCorner);\n\n // On scaling cropzone,\n // change real width and height and fix scaleFactor to 1\n this.scale(1).set(settings);\n\n this.canvasEventTrigger[events.OBJECT_SCALED](this);\n },\n\n /**\n * Calc scaled size from mouse pointer with selected corner\n * @param {{x: number, y: number}} pointer - Mouse position\n * @param {string} selectedCorner - selected corner type\n * @returns {Object} Having left or(and) top or(and) width or(and) height.\n * @private\n */\n _calcScalingSizeFromPointer(pointer, selectedCorner) {\n const isCornerTypeValid = cornerTypeValid(selectedCorner);\n\n return isCornerTypeValid && this._resizeCropZone(pointer, selectedCorner);\n },\n\n /**\n * Align with cropzone ratio\n * @param {number} width - cropzone width\n * @param {number} height - cropzone height\n * @param {number} maxWidth - limit max width\n * @param {number} maxHeight - limit max height\n * @param {number} scaleTo - cropzone ratio\n * @returns {{width: number, height: number}}\n * @private\n */\n adjustRatioCropzoneSize({ width, height, leftMaker, topMaker, maxWidth, maxHeight, scaleTo }) {\n width = maxWidth ? clamp(width, 1, maxWidth) : width;\n height = maxHeight ? clamp(height, 1, maxHeight) : height;\n\n if (!this.presetRatio) {\n if (this._withShiftKey) {\n // make fixed ratio cropzone\n if (width > height) {\n height = width;\n } else if (height > width) {\n width = height;\n }\n }\n\n return {\n width,\n height,\n left: leftMaker(width),\n top: topMaker(height),\n };\n }\n\n if (scaleTo === 'width') {\n height = width / this.presetRatio;\n } else {\n width = height * this.presetRatio;\n }\n\n const maxScaleFactor = Math.min(maxWidth / width, maxHeight / height);\n if (maxScaleFactor <= 1) {\n [width, height] = [width, height].map((v) => v * maxScaleFactor);\n }\n\n return {\n width,\n height,\n left: leftMaker(width),\n top: topMaker(height),\n };\n },\n\n /**\n * Get dimension last state cropzone\n * @returns {{rectTop: number, rectLeft: number, rectWidth: number, rectHeight: number}}\n * @private\n */\n _getCropzoneRectInfo() {\n const { width: canvasWidth, height: canvasHeight } = this.canvas;\n const {\n top: rectTop,\n left: rectLeft,\n width: rectWidth,\n height: rectHeight,\n } = this.getBoundingRect(false, true);\n\n return {\n rectTop,\n rectLeft,\n rectWidth,\n rectHeight,\n rectRight: rectLeft + rectWidth,\n rectBottom: rectTop + rectHeight,\n canvasWidth,\n canvasHeight,\n };\n },\n\n /**\n * Calc scaling dimension\n * @param {Object} position - Mouse position\n * @param {string} corner - corner type\n * @returns {{left: number, top: number, width: number, height: number}}\n * @private\n */\n _resizeCropZone({ x, y }, corner) {\n const {\n rectWidth,\n rectHeight,\n rectTop,\n rectLeft,\n rectBottom,\n rectRight,\n canvasWidth,\n canvasHeight,\n } = this._getCropzoneRectInfo();\n\n const resizeInfoMap = {\n tl: {\n width: rectRight - x,\n height: rectBottom - y,\n leftMaker: (newWidth) => rectRight - newWidth,\n topMaker: (newHeight) => rectBottom - newHeight,\n maxWidth: rectRight,\n maxHeight: rectBottom,\n scaleTo: getScaleBasis(rectLeft - x, rectTop - y),\n },\n tr: {\n width: x - rectLeft,\n height: rectBottom - y,\n leftMaker: () => rectLeft,\n topMaker: (newHeight) => rectBottom - newHeight,\n maxWidth: canvasWidth - rectLeft,\n maxHeight: rectBottom,\n scaleTo: getScaleBasis(x - rectRight, rectTop - y),\n },\n mt: {\n width: rectWidth,\n height: rectBottom - y,\n leftMaker: () => rectLeft,\n topMaker: (newHeight) => rectBottom - newHeight,\n maxWidth: canvasWidth - rectLeft,\n maxHeight: rectBottom,\n scaleTo: 'height',\n },\n ml: {\n width: rectRight - x,\n height: rectHeight,\n leftMaker: (newWidth) => rectRight - newWidth,\n topMaker: () => rectTop,\n maxWidth: rectRight,\n maxHeight: canvasHeight - rectTop,\n scaleTo: 'width',\n },\n mr: {\n width: x - rectLeft,\n height: rectHeight,\n leftMaker: () => rectLeft,\n topMaker: () => rectTop,\n maxWidth: canvasWidth - rectLeft,\n maxHeight: canvasHeight - rectTop,\n scaleTo: 'width',\n },\n mb: {\n width: rectWidth,\n height: y - rectTop,\n leftMaker: () => rectLeft,\n topMaker: () => rectTop,\n maxWidth: canvasWidth - rectLeft,\n maxHeight: canvasHeight - rectTop,\n scaleTo: 'height',\n },\n bl: {\n width: rectRight - x,\n height: y - rectTop,\n leftMaker: (newWidth) => rectRight - newWidth,\n topMaker: () => rectTop,\n maxWidth: rectRight,\n maxHeight: canvasHeight - rectTop,\n scaleTo: getScaleBasis(rectLeft - x, y - rectBottom),\n },\n br: {\n width: x - rectLeft,\n height: y - rectTop,\n leftMaker: () => rectLeft,\n topMaker: () => rectTop,\n maxWidth: canvasWidth - rectLeft,\n maxHeight: canvasHeight - rectTop,\n scaleTo: getScaleBasis(x - rectRight, y - rectBottom),\n },\n };\n\n return this.adjustRatioCropzoneSize(resizeInfoMap[corner]);\n },\n\n /**\n * Return the whether this cropzone is valid\n * @returns {boolean}\n */\n isValid() {\n return this.left >= 0 && this.top >= 0 && this.width > 0 && this.height > 0;\n },\n\n /**\n * Keydown event handler\n * @param {{number}} keyCode - Event keyCode\n * @private\n */\n _onKeyDown({ keyCode }) {\n if (keyCode === keyCodes.SHIFT) {\n this._withShiftKey = true;\n }\n },\n\n /**\n * Keyup event handler\n * @param {{number}} keyCode - Event keyCode\n * @private\n */\n _onKeyUp({ keyCode }) {\n if (keyCode === keyCodes.SHIFT) {\n this._withShiftKey = false;\n }\n },\n }\n);\n\nexport default Cropzone;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Image flip module\n */\nimport snippet from 'tui-code-snippet';\nimport Component from '@/interface/component';\nimport { Promise } from '@/util';\nimport { componentNames, rejectMessages } from '@/consts';\n\n/**\n * Flip\n * @class Flip\n * @param {Graphics} graphics - Graphics instance\n * @extends {Component}\n * @ignore\n */\nclass Flip extends Component {\n constructor(graphics) {\n super(componentNames.FLIP, graphics);\n }\n\n /**\n * Get current flip settings\n * @returns {{flipX: Boolean, flipY: Boolean}}\n */\n getCurrentSetting() {\n const canvasImage = this.getCanvasImage();\n\n return {\n flipX: canvasImage.flipX,\n flipY: canvasImage.flipY,\n };\n }\n\n /**\n * Set flipX, flipY\n * @param {{flipX: Boolean, flipY: Boolean}} newSetting - Flip setting\n * @returns {Promise}\n */\n set(newSetting) {\n const setting = this.getCurrentSetting();\n const isChangingFlipX = setting.flipX !== newSetting.flipX;\n const isChangingFlipY = setting.flipY !== newSetting.flipY;\n\n if (!isChangingFlipX && !isChangingFlipY) {\n return Promise.reject(rejectMessages.flip);\n }\n\n snippet.extend(setting, newSetting);\n this.setImageProperties(setting, true);\n this._invertAngle(isChangingFlipX, isChangingFlipY);\n this._flipObjects(isChangingFlipX, isChangingFlipY);\n\n return Promise.resolve({\n flipX: setting.flipX,\n flipY: setting.flipY,\n angle: this.getCanvasImage().angle,\n });\n }\n\n /**\n * Invert image angle for flip\n * @param {boolean} isChangingFlipX - Change flipX\n * @param {boolean} isChangingFlipY - Change flipY\n */\n _invertAngle(isChangingFlipX, isChangingFlipY) {\n const canvasImage = this.getCanvasImage();\n let { angle } = canvasImage;\n\n if (isChangingFlipX) {\n angle *= -1;\n }\n if (isChangingFlipY) {\n angle *= -1;\n }\n canvasImage.rotate(parseFloat(angle)).setCoords(); // parseFloat for -0 to 0\n }\n\n /**\n * Flip objects\n * @param {boolean} isChangingFlipX - Change flipX\n * @param {boolean} isChangingFlipY - Change flipY\n * @private\n */\n _flipObjects(isChangingFlipX, isChangingFlipY) {\n const canvas = this.getCanvas();\n\n if (isChangingFlipX) {\n canvas.forEachObject((obj) => {\n obj\n .set({\n angle: parseFloat(obj.angle * -1), // parseFloat for -0 to 0\n flipX: !obj.flipX,\n left: canvas.width - obj.left,\n })\n .setCoords();\n });\n }\n if (isChangingFlipY) {\n canvas.forEachObject((obj) => {\n obj\n .set({\n angle: parseFloat(obj.angle * -1), // parseFloat for -0 to 0\n flipY: !obj.flipY,\n top: canvas.height - obj.top,\n })\n .setCoords();\n });\n }\n canvas.renderAll();\n }\n\n /**\n * Reset flip settings\n * @returns {Promise}\n */\n reset() {\n return this.set({\n flipX: false,\n flipY: false,\n });\n }\n\n /**\n * Flip x\n * @returns {Promise}\n */\n flipX() {\n const current = this.getCurrentSetting();\n\n return this.set({\n flipX: !current.flipX,\n flipY: current.flipY,\n });\n }\n\n /**\n * Flip y\n * @returns {Promise}\n */\n flipY() {\n const current = this.getCurrentSetting();\n\n return this.set({\n flipX: current.flipX,\n flipY: !current.flipY,\n });\n }\n}\n\nexport default Flip;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Image rotation module\n */\nimport fabric from 'fabric';\nimport Component from '@/interface/component';\nimport { Promise } from '@/util';\nimport { componentNames } from '@/consts';\n\n/**\n * Image Rotation component\n * @class Rotation\n * @extends {Component}\n * @param {Graphics} graphics - Graphics instance\n * @ignore\n */\nclass Rotation extends Component {\n constructor(graphics) {\n super(componentNames.ROTATION, graphics);\n }\n\n /**\n * Get current angle\n * @returns {Number}\n */\n getCurrentAngle() {\n return this.getCanvasImage().angle;\n }\n\n /**\n * Set angle of the image\n *\n * Do not call \"this.setImageProperties\" for setting angle directly.\n * Before setting angle, The originX,Y of image should be set to center.\n * See \"http://fabricjs.com/docs/fabric.Object.html#setAngle\"\n *\n * @param {number} angle - Angle value\n * @returns {Promise}\n */\n setAngle(angle) {\n const oldAngle = this.getCurrentAngle() % 360; // The angle is lower than 2*PI(===360 degrees)\n\n angle %= 360;\n\n const canvasImage = this.getCanvasImage();\n const oldImageCenter = canvasImage.getCenterPoint();\n canvasImage.set({ angle }).setCoords();\n this.adjustCanvasDimension();\n const newImageCenter = canvasImage.getCenterPoint();\n this._rotateForEachObject(oldImageCenter, newImageCenter, angle - oldAngle);\n\n return Promise.resolve(angle);\n }\n\n /**\n * Rotate for each object\n * @param {fabric.Point} oldImageCenter - Image center point before rotation\n * @param {fabric.Point} newImageCenter - Image center point after rotation\n * @param {number} angleDiff - Image angle difference after rotation\n * @private\n */\n _rotateForEachObject(oldImageCenter, newImageCenter, angleDiff) {\n const canvas = this.getCanvas();\n const centerDiff = {\n x: oldImageCenter.x - newImageCenter.x,\n y: oldImageCenter.y - newImageCenter.y,\n };\n\n canvas.forEachObject((obj) => {\n const objCenter = obj.getCenterPoint();\n const radian = fabric.util.degreesToRadians(angleDiff);\n const newObjCenter = fabric.util.rotatePoint(objCenter, oldImageCenter, radian);\n\n obj.set({\n left: newObjCenter.x - centerDiff.x,\n top: newObjCenter.y - centerDiff.y,\n angle: (obj.angle + angleDiff) % 360,\n });\n obj.setCoords();\n });\n canvas.renderAll();\n }\n\n /**\n * Rotate the image\n * @param {number} additionalAngle - Additional angle\n * @returns {Promise}\n */\n rotate(additionalAngle) {\n const current = this.getCurrentAngle();\n\n return this.setAngle(current + additionalAngle);\n }\n}\n\nexport default Rotation;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Free drawing module, Set brush\n */\nimport fabric from 'fabric';\nimport Component from '@/interface/component';\nimport { componentNames } from '@/consts';\n\n/**\n * FreeDrawing\n * @class FreeDrawing\n * @param {Graphics} graphics - Graphics instance\n * @extends {Component}\n * @ignore\n */\nclass FreeDrawing extends Component {\n constructor(graphics) {\n super(componentNames.FREE_DRAWING, graphics);\n\n /**\n * Brush width\n * @type {number}\n */\n this.width = 12;\n\n /**\n * fabric.Color instance for brush color\n * @type {fabric.Color}\n */\n this.oColor = new fabric.Color('rgba(0, 0, 0, 0.5)');\n }\n\n /**\n * Start free drawing mode\n * @param {{width: ?number, color: ?string}} [setting] - Brush width & color\n */\n start(setting) {\n const canvas = this.getCanvas();\n\n canvas.isDrawingMode = true;\n this.setBrush(setting);\n }\n\n /**\n * Set brush\n * @param {{width: ?number, color: ?string}} [setting] - Brush width & color\n */\n setBrush(setting) {\n const brush = this.getCanvas().freeDrawingBrush;\n\n setting = setting || {};\n this.width = setting.width || this.width;\n if (setting.color) {\n this.oColor = new fabric.Color(setting.color);\n }\n brush.width = this.width;\n brush.color = this.oColor.toRgba();\n }\n\n /**\n * End free drawing mode\n */\n end() {\n const canvas = this.getCanvas();\n\n canvas.isDrawingMode = false;\n }\n}\n\nexport default FreeDrawing;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Free drawing module, Set brush\n */\nimport snippet from 'tui-code-snippet';\nimport fabric from 'fabric';\nimport Component from '@/interface/component';\nimport ArrowLine from '@/extension/arrowLine';\nimport { eventNames, componentNames, fObjectOptions } from '@/consts';\n\n/**\n * Line\n * @class Line\n * @param {Graphics} graphics - Graphics instance\n * @extends {Component}\n * @ignore\n */\nclass Line extends Component {\n constructor(graphics) {\n super(componentNames.LINE, graphics);\n\n /**\n * Brush width\n * @type {number}\n * @private\n */\n this._width = 12;\n\n /**\n * fabric.Color instance for brush color\n * @type {fabric.Color}\n * @private\n */\n this._oColor = new fabric.Color('rgba(0, 0, 0, 0.5)');\n\n /**\n * Listeners\n * @type {object.}\n * @private\n */\n this._listeners = {\n mousedown: this._onFabricMouseDown.bind(this),\n mousemove: this._onFabricMouseMove.bind(this),\n mouseup: this._onFabricMouseUp.bind(this),\n };\n }\n\n /**\n * Start drawing line mode\n * @param {{width: ?number, color: ?string}} [setting] - Brush width & color\n */\n setHeadOption(setting) {\n const {\n arrowType = {\n head: null,\n tail: null,\n },\n } = setting;\n\n this._arrowType = arrowType;\n }\n\n /**\n * Start drawing line mode\n * @param {{width: ?number, color: ?string}} [setting] - Brush width & color\n */\n start(setting = {}) {\n const canvas = this.getCanvas();\n\n canvas.defaultCursor = 'crosshair';\n canvas.selection = false;\n\n this.setHeadOption(setting);\n this.setBrush(setting);\n\n canvas.forEachObject((obj) => {\n obj.set({\n evented: false,\n });\n });\n\n canvas.on({\n 'mouse:down': this._listeners.mousedown,\n });\n }\n\n /**\n * Set brush\n * @param {{width: ?number, color: ?string}} [setting] - Brush width & color\n */\n setBrush(setting) {\n const brush = this.getCanvas().freeDrawingBrush;\n\n setting = setting || {};\n this._width = setting.width || this._width;\n\n if (setting.color) {\n this._oColor = new fabric.Color(setting.color);\n }\n brush.width = this._width;\n brush.color = this._oColor.toRgba();\n }\n\n /**\n * End drawing line mode\n */\n end() {\n const canvas = this.getCanvas();\n\n canvas.defaultCursor = 'default';\n canvas.selection = true;\n\n canvas.forEachObject((obj) => {\n obj.set({\n evented: true,\n });\n });\n\n canvas.off('mouse:down', this._listeners.mousedown);\n }\n\n /**\n * Mousedown event handler in fabric canvas\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object\n * @private\n */\n _onFabricMouseDown(fEvent) {\n const canvas = this.getCanvas();\n const { x, y } = canvas.getPointer(fEvent.e);\n const points = [x, y, x, y];\n\n this._line = new ArrowLine(points, {\n stroke: this._oColor.toRgba(),\n strokeWidth: this._width,\n arrowType: this._arrowType,\n evented: false,\n });\n\n this._line.set(fObjectOptions.SELECTION_STYLE);\n\n canvas.add(this._line);\n\n canvas.on({\n 'mouse:move': this._listeners.mousemove,\n 'mouse:up': this._listeners.mouseup,\n });\n\n this.fire(eventNames.ADD_OBJECT, this._createLineEventObjectProperties());\n }\n\n /**\n * Mousemove event handler in fabric canvas\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object\n * @private\n */\n _onFabricMouseMove(fEvent) {\n const canvas = this.getCanvas();\n const pointer = canvas.getPointer(fEvent.e);\n\n this._line.set({\n x2: pointer.x,\n y2: pointer.y,\n });\n\n this._line.setCoords();\n\n canvas.renderAll();\n }\n\n /**\n * Mouseup event handler in fabric canvas\n * @private\n */\n _onFabricMouseUp() {\n const canvas = this.getCanvas();\n\n this.fire(eventNames.OBJECT_ADDED, this._createLineEventObjectProperties());\n\n this._line = null;\n\n canvas.off({\n 'mouse:move': this._listeners.mousemove,\n 'mouse:up': this._listeners.mouseup,\n });\n }\n\n /**\n * create line event object properties\n * @returns {Object} properties line object\n * @private\n */\n _createLineEventObjectProperties() {\n const params = this.graphics.createObjectProperties(this._line);\n const { x1, x2, y1, y2 } = this._line;\n\n return snippet.extend({}, params, {\n startPosition: {\n x: x1,\n y: y1,\n },\n endPosition: {\n x: x2,\n y: y2,\n },\n });\n }\n}\n\nexport default Line;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Blur extending fabric.Image.filters.Convolute\n */\nimport fabric from 'fabric';\n\nconst ARROW_ANGLE = 30;\nconst CHEVRON_SIZE_RATIO = 2.7;\nconst TRIANGLE_SIZE_RATIO = 1.7;\nconst RADIAN_CONVERSION_VALUE = 180;\n\nconst ArrowLine = fabric.util.createClass(\n fabric.Line,\n /** @lends Convolute.prototype */ {\n /**\n * Line type\n * @param {String} type\n * @default\n */\n type: 'line',\n\n /**\n * Constructor\n * @param {Array} [points] Array of points\n * @param {Object} [options] Options object\n * @override\n */\n initialize(points, options = {}) {\n this.callSuper('initialize', points, options);\n\n this.arrowType = options.arrowType;\n },\n\n /**\n * Render ArrowLine\n * @private\n * @override\n */\n _render(ctx) {\n const { x1: fromX, y1: fromY, x2: toX, y2: toY } = this.calcLinePoints();\n const linePosition = {\n fromX,\n fromY,\n toX,\n toY,\n };\n this.ctx = ctx;\n ctx.lineWidth = this.strokeWidth;\n\n this._renderBasicLinePath(linePosition);\n this._drawDecoratorPath(linePosition);\n\n this._renderStroke(ctx);\n },\n\n /**\n * Render Basic line path\n * @param {Object} linePosition - line position\n * @param {number} option.fromX - line start position x\n * @param {number} option.fromY - line start position y\n * @param {number} option.toX - line end position x\n * @param {number} option.toY - line end position y\n * @private\n */\n _renderBasicLinePath({ fromX, fromY, toX, toY }) {\n this.ctx.beginPath();\n this.ctx.moveTo(fromX, fromY);\n this.ctx.lineTo(toX, toY);\n },\n\n /**\n * Render Arrow Head\n * @param {Object} linePosition - line position\n * @param {number} option.fromX - line start position x\n * @param {number} option.fromY - line start position y\n * @param {number} option.toX - line end position x\n * @param {number} option.toY - line end position y\n * @private\n */\n _drawDecoratorPath(linePosition) {\n this._drawDecoratorPathType('head', linePosition);\n this._drawDecoratorPathType('tail', linePosition);\n },\n\n /**\n * Render Arrow Head\n * @param {string} type - 'head' or 'tail'\n * @param {Object} linePosition - line position\n * @param {number} option.fromX - line start position x\n * @param {number} option.fromY - line start position y\n * @param {number} option.toX - line end position x\n * @param {number} option.toY - line end position y\n * @private\n */\n _drawDecoratorPathType(type, linePosition) {\n switch (this.arrowType[type]) {\n case 'triangle':\n this._drawTrianglePath(type, linePosition);\n break;\n case 'chevron':\n this._drawChevronPath(type, linePosition);\n break;\n default:\n break;\n }\n },\n\n /**\n * Render Triangle Head\n * @param {string} type - 'head' or 'tail'\n * @param {Object} linePosition - line position\n * @param {number} option.fromX - line start position x\n * @param {number} option.fromY - line start position y\n * @param {number} option.toX - line end position x\n * @param {number} option.toY - line end position y\n * @private\n */\n _drawTrianglePath(type, linePosition) {\n const decorateSize = this.ctx.lineWidth * TRIANGLE_SIZE_RATIO;\n\n this._drawChevronPath(type, linePosition, decorateSize);\n this.ctx.closePath();\n },\n\n /**\n * Render Chevron Head\n * @param {string} type - 'head' or 'tail'\n * @param {Object} linePosition - line position\n * @param {number} option.fromX - line start position x\n * @param {number} option.fromY - line start position y\n * @param {number} option.toX - line end position x\n * @param {number} option.toY - line end position y\n * @param {number} decorateSize - decorate size\n * @private\n */\n _drawChevronPath(type, { fromX, fromY, toX, toY }, decorateSize) {\n const { ctx } = this;\n if (!decorateSize) {\n decorateSize = this.ctx.lineWidth * CHEVRON_SIZE_RATIO;\n }\n\n const [standardX, standardY] = type === 'head' ? [fromX, fromY] : [toX, toY];\n const [compareX, compareY] = type === 'head' ? [toX, toY] : [fromX, fromY];\n\n const angle =\n (Math.atan2(compareY - standardY, compareX - standardX) * RADIAN_CONVERSION_VALUE) /\n Math.PI;\n const rotatedPosition = (changeAngle) =>\n this.getRotatePosition(decorateSize, changeAngle, {\n x: standardX,\n y: standardY,\n });\n\n ctx.moveTo(...rotatedPosition(angle + ARROW_ANGLE));\n ctx.lineTo(standardX, standardY);\n ctx.lineTo(...rotatedPosition(angle - ARROW_ANGLE));\n },\n\n /**\n * return position from change angle.\n * @param {number} distance - change distance\n * @param {number} angle - change angle\n * @param {Object} referencePosition - reference position\n * @returns {Array}\n * @private\n */\n getRotatePosition(distance, angle, referencePosition) {\n const radian = (angle * Math.PI) / RADIAN_CONVERSION_VALUE;\n const { x, y } = referencePosition;\n\n return [distance * Math.cos(radian) + x, distance * Math.sin(radian) + y];\n },\n }\n);\n\nexport default ArrowLine;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Text module\n */\nimport snippet from 'tui-code-snippet';\nimport fabric from 'fabric';\nimport Component from '@/interface/component';\nimport { Promise } from '@/util';\nimport { componentNames, eventNames as events, fObjectOptions } from '@/consts';\n\nconst defaultStyles = {\n fill: '#000000',\n left: 0,\n top: 0,\n};\nconst resetStyles = {\n fill: '#000000',\n fontStyle: 'normal',\n fontWeight: 'normal',\n textAlign: 'tie-text-align-left',\n underline: false,\n};\nconst DBCLICK_TIME = 500;\n\n/**\n * Text\n * @class Text\n * @param {Graphics} graphics - Graphics instance\n * @extends {Component}\n * @ignore\n */\nclass Text extends Component {\n constructor(graphics) {\n super(componentNames.TEXT, graphics);\n\n /**\n * Default text style\n * @type {Object}\n */\n this._defaultStyles = defaultStyles;\n\n /**\n * Selected state\n * @type {boolean}\n */\n this._isSelected = false;\n\n /**\n * Selected text object\n * @type {Object}\n */\n this._selectedObj = {};\n\n /**\n * Editing text object\n * @type {Object}\n */\n this._editingObj = {};\n\n /**\n * Listeners for fabric event\n * @type {Object}\n */\n this._listeners = {\n mousedown: this._onFabricMouseDown.bind(this),\n select: this._onFabricSelect.bind(this),\n selectClear: this._onFabricSelectClear.bind(this),\n scaling: this._onFabricScaling.bind(this),\n textChanged: this._onFabricTextChanged.bind(this),\n };\n\n /**\n * Textarea element for editing\n * @type {HTMLElement}\n */\n this._textarea = null;\n\n /**\n * Ratio of current canvas\n * @type {number}\n */\n this._ratio = 1;\n\n /**\n * Last click time\n * @type {Date}\n */\n this._lastClickTime = new Date().getTime();\n\n /**\n * Text object infos before editing\n * @type {Object}\n */\n this._editingObjInfos = {};\n\n /**\n * Previous state of editing\n * @type {boolean}\n */\n this.isPrevEditing = false;\n }\n\n /**\n * Start input text mode\n */\n start() {\n const canvas = this.getCanvas();\n\n canvas.selection = false;\n canvas.defaultCursor = 'text';\n canvas.on({\n 'mouse:down': this._listeners.mousedown,\n 'selection:created': this._listeners.select,\n 'selection:updated': this._listeners.select,\n 'before:selection:cleared': this._listeners.selectClear,\n 'object:scaling': this._listeners.scaling,\n 'text:changed': this._listeners.textChanged,\n });\n\n canvas.forEachObject((obj) => {\n if (obj.type === 'i-text') {\n this.adjustOriginPosition(obj, 'start');\n }\n });\n\n this.setCanvasRatio();\n }\n\n /**\n * End input text mode\n */\n end() {\n const canvas = this.getCanvas();\n\n canvas.selection = true;\n canvas.defaultCursor = 'default';\n\n canvas.forEachObject((obj) => {\n if (obj.type === 'i-text') {\n if (obj.text === '') {\n canvas.remove(obj);\n } else {\n this.adjustOriginPosition(obj, 'end');\n }\n }\n });\n\n canvas.off({\n 'mouse:down': this._listeners.mousedown,\n 'selection:created': this._listeners.select,\n 'selection:updated': this._listeners.select,\n 'before:selection:cleared': this._listeners.selectClear,\n 'object:selected': this._listeners.select,\n 'object:scaling': this._listeners.scaling,\n 'text:changed': this._listeners.textChanged,\n });\n }\n\n /**\n * Adjust the origin position\n * @param {fabric.Object} text - text object\n * @param {string} editStatus - 'start' or 'end'\n */\n adjustOriginPosition(text, editStatus) {\n let [originX, originY] = ['center', 'center'];\n if (editStatus === 'start') {\n [originX, originY] = ['left', 'top'];\n }\n\n const { x: left, y: top } = text.getPointByOrigin(originX, originY);\n text.set({\n left,\n top,\n originX,\n originY,\n });\n text.setCoords();\n }\n\n /**\n * Add new text on canvas image\n * @param {string} text - Initial input text\n * @param {Object} options - Options for generating text\n * @param {Object} [options.styles] Initial styles\n * @param {string} [options.styles.fill] Color\n * @param {string} [options.styles.fontFamily] Font type for text\n * @param {number} [options.styles.fontSize] Size\n * @param {string} [options.styles.fontStyle] Type of inclination (normal / italic)\n * @param {string} [options.styles.fontWeight] Type of thicker or thinner looking (normal / bold)\n * @param {string} [options.styles.textAlign] Type of text align (left / center / right)\n * @param {string} [options.styles.textDecoration] Type of line (underline / line-through / overline)\n * @param {{x: number, y: number}} [options.position] - Initial position\n * @returns {Promise}\n */\n add(text, options) {\n return new Promise((resolve) => {\n const canvas = this.getCanvas();\n let newText = null;\n let selectionStyle = fObjectOptions.SELECTION_STYLE;\n let styles = this._defaultStyles;\n\n this._setInitPos(options.position);\n\n if (options.styles) {\n styles = snippet.extend(styles, options.styles);\n }\n\n if (!snippet.isExisty(options.autofocus)) {\n options.autofocus = true;\n }\n\n newText = new fabric.IText(text, styles);\n selectionStyle = snippet.extend({}, selectionStyle, {\n originX: 'left',\n originY: 'top',\n });\n\n newText.set(selectionStyle);\n newText.on({\n mouseup: this._onFabricMouseUp.bind(this),\n });\n\n canvas.add(newText);\n\n if (options.autofocus) {\n newText.enterEditing();\n newText.selectAll();\n }\n\n if (!canvas.getActiveObject()) {\n canvas.setActiveObject(newText);\n }\n\n this.isPrevEditing = true;\n resolve(this.graphics.createObjectProperties(newText));\n });\n }\n\n /**\n * Change text of activate object on canvas image\n * @param {Object} activeObj - Current selected text object\n * @param {string} text - Changed text\n * @returns {Promise}\n */\n change(activeObj, text) {\n return new Promise((resolve) => {\n activeObj.set('text', text);\n\n this.getCanvas().renderAll();\n resolve();\n });\n }\n\n /**\n * Set style\n * @param {Object} activeObj - Current selected text object\n * @param {Object} styleObj - Initial styles\n * @param {string} [styleObj.fill] Color\n * @param {string} [styleObj.fontFamily] Font type for text\n * @param {number} [styleObj.fontSize] Size\n * @param {string} [styleObj.fontStyle] Type of inclination (normal / italic)\n * @param {string} [styleObj.fontWeight] Type of thicker or thinner looking (normal / bold)\n * @param {string} [styleObj.textAlign] Type of text align (left / center / right)\n * @param {string} [styleObj.textDecoration] Type of line (underline / line-through / overline)\n * @returns {Promise}\n */\n setStyle(activeObj, styleObj) {\n return new Promise((resolve) => {\n snippet.forEach(\n styleObj,\n (val, key) => {\n if (activeObj[key] === val && key !== 'fontSize') {\n styleObj[key] = resetStyles[key] || '';\n }\n },\n this\n );\n\n if ('textDecoration' in styleObj) {\n snippet.extend(styleObj, this._getTextDecorationAdaptObject(styleObj.textDecoration));\n }\n\n activeObj.set(styleObj);\n\n this.getCanvas().renderAll();\n resolve();\n });\n }\n\n /**\n * Get the text\n * @param {Object} activeObj - Current selected text object\n * @returns {String} text\n */\n getText(activeObj) {\n return activeObj.text;\n }\n\n /**\n * Set infos of the current selected object\n * @param {fabric.Text} obj - Current selected text object\n * @param {boolean} state - State of selecting\n */\n setSelectedInfo(obj, state) {\n this._selectedObj = obj;\n this._isSelected = state;\n }\n\n /**\n * Whether object is selected or not\n * @returns {boolean} State of selecting\n */\n isSelected() {\n return this._isSelected;\n }\n\n /**\n * Get current selected text object\n * @returns {fabric.Text} Current selected text object\n */\n getSelectedObj() {\n return this._selectedObj;\n }\n\n /**\n * Set ratio value of canvas\n */\n setCanvasRatio() {\n const canvasElement = this.getCanvasElement();\n const cssWidth = parseInt(canvasElement.style.maxWidth, 10);\n const originWidth = canvasElement.width;\n\n this._ratio = originWidth / cssWidth;\n }\n\n /**\n * Get ratio value of canvas\n * @returns {number} Ratio value\n */\n getCanvasRatio() {\n return this._ratio;\n }\n\n /**\n * Get text decoration adapt object\n * @param {string} textDecoration - text decoration option string\n * @returns {object} adapt object for override\n */\n _getTextDecorationAdaptObject(textDecoration) {\n return {\n underline: textDecoration === 'underline',\n linethrough: textDecoration === 'line-through',\n overline: textDecoration === 'overline',\n };\n }\n\n /**\n * Set initial position on canvas image\n * @param {{x: number, y: number}} [position] - Selected position\n * @private\n */\n _setInitPos(position) {\n position = position || this.getCanvasImage().getCenterPoint();\n\n this._defaultStyles.left = position.x;\n this._defaultStyles.top = position.y;\n }\n\n /**\n * Input event handler\n * @private\n */\n _onInput() {\n const ratio = this.getCanvasRatio();\n const obj = this._editingObj;\n const textareaStyle = this._textarea.style;\n\n textareaStyle.width = `${Math.ceil(obj.width / ratio)}px`;\n textareaStyle.height = `${Math.ceil(obj.height / ratio)}px`;\n }\n\n /**\n * Keydown event handler\n * @private\n */\n _onKeyDown() {\n const ratio = this.getCanvasRatio();\n const obj = this._editingObj;\n const textareaStyle = this._textarea.style;\n\n setTimeout(() => {\n obj.text(this._textarea.value);\n\n textareaStyle.width = `${Math.ceil(obj.width / ratio)}px`;\n textareaStyle.height = `${Math.ceil(obj.height / ratio)}px`;\n }, 0);\n }\n\n /**\n * Blur event handler\n * @private\n */\n _onBlur() {\n const ratio = this.getCanvasRatio();\n const editingObj = this._editingObj;\n const editingObjInfos = this._editingObjInfos;\n const textContent = this._textarea.value;\n let transWidth = editingObj.width / ratio - editingObjInfos.width / ratio;\n let transHeight = editingObj.height / ratio - editingObjInfos.height / ratio;\n\n if (ratio === 1) {\n transWidth /= 2;\n transHeight /= 2;\n }\n\n this._textarea.style.display = 'none';\n\n editingObj.set({\n left: editingObjInfos.left + transWidth,\n top: editingObjInfos.top + transHeight,\n });\n\n if (textContent.length) {\n this.getCanvas().add(editingObj);\n\n const params = {\n id: snippet.stamp(editingObj),\n type: editingObj.type,\n text: textContent,\n };\n\n this.fire(events.TEXT_CHANGED, params);\n }\n }\n\n /**\n * Scroll event handler\n * @private\n */\n _onScroll() {\n this._textarea.scrollLeft = 0;\n this._textarea.scrollTop = 0;\n }\n\n /**\n * Fabric scaling event handler\n * @param {fabric.Event} fEvent - Current scaling event on selected object\n * @private\n */\n _onFabricScaling(fEvent) {\n const obj = fEvent.target;\n\n obj.fontSize = obj.fontSize * obj.scaleY;\n obj.scaleX = 1;\n obj.scaleY = 1;\n }\n\n /**\n * textChanged event handler\n * @param {{target: fabric.Object}} props - changed text object\n * @private\n */\n _onFabricTextChanged(props) {\n this.fire(events.TEXT_CHANGED, props.target);\n }\n\n /**\n * onSelectClear handler in fabric canvas\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onFabricSelectClear(fEvent) {\n const obj = this.getSelectedObj();\n\n this.isPrevEditing = true;\n\n this.setSelectedInfo(fEvent.target, false);\n\n if (obj) {\n // obj is empty object at initial time, will be set fabric object\n if (obj.text === '') {\n this.getCanvas().remove(obj);\n }\n }\n }\n\n /**\n * onSelect handler in fabric canvas\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onFabricSelect(fEvent) {\n this.isPrevEditing = true;\n\n this.setSelectedInfo(fEvent.target, true);\n }\n\n /**\n * Fabric 'mousedown' event handler\n * @param {fabric.Event} fEvent - Current mousedown event on selected object\n * @private\n */\n _onFabricMouseDown(fEvent) {\n const obj = fEvent.target;\n\n if (obj && !obj.isType('text')) {\n return;\n }\n\n if (this.isPrevEditing) {\n this.isPrevEditing = false;\n\n return;\n }\n\n this._fireAddText(fEvent);\n }\n\n /**\n * Fire 'addText' event if object is not selected.\n * @param {fabric.Event} fEvent - Current mousedown event on selected object\n * @private\n */\n _fireAddText(fEvent) {\n const obj = fEvent.target;\n const e = fEvent.e || {};\n const originPointer = this.getCanvas().getPointer(e);\n\n if (!obj) {\n this.fire(events.ADD_TEXT, {\n originPosition: {\n x: originPointer.x,\n y: originPointer.y,\n },\n clientPosition: {\n x: e.clientX || 0,\n y: e.clientY || 0,\n },\n });\n }\n }\n\n /**\n * Fabric mouseup event handler\n * @param {fabric.Event} fEvent - Current mousedown event on selected object\n * @private\n */\n _onFabricMouseUp(fEvent) {\n const { target } = fEvent;\n const newClickTime = new Date().getTime();\n\n if (this._isDoubleClick(newClickTime) && !target.isEditing) {\n target.enterEditing();\n }\n\n if (target.isEditing) {\n this.fire(events.TEXT_EDITING); // fire editing text event\n }\n\n this._lastClickTime = newClickTime;\n }\n\n /**\n * Get state of firing double click event\n * @param {Date} newClickTime - Current clicked time\n * @returns {boolean} Whether double clicked or not\n * @private\n */\n _isDoubleClick(newClickTime) {\n return newClickTime - this._lastClickTime < DBCLICK_TIME;\n }\n}\n\nexport default Text;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Add icon module\n */\nimport snippet from 'tui-code-snippet';\nimport fabric from 'fabric';\nimport Component from '@/interface/component';\nimport { Promise } from '@/util';\nimport { eventNames as events, rejectMessages, componentNames, fObjectOptions } from '@/consts';\n\nconst pathMap = {\n arrow: 'M 0 90 H 105 V 120 L 160 60 L 105 0 V 30 H 0 Z',\n cancel:\n 'M 0 30 L 30 60 L 0 90 L 30 120 L 60 90 L 90 120 L 120 90 ' +\n 'L 90 60 L 120 30 L 90 0 L 60 30 L 30 0 Z',\n};\n\n/**\n * Icon\n * @class Icon\n * @param {Graphics} graphics - Graphics instance\n * @extends {Component}\n * @ignore\n */\nclass Icon extends Component {\n constructor(graphics) {\n super(componentNames.ICON, graphics);\n\n /**\n * Default icon color\n * @type {string}\n */\n this._oColor = '#000000';\n\n /**\n * Path value of each icon type\n * @type {Object}\n */\n this._pathMap = pathMap;\n\n /**\n * Type of the drawing icon\n * @type {string}\n * @private\n */\n this._type = null;\n\n /**\n * Color of the drawing icon\n * @type {string}\n * @private\n */\n this._iconColor = null;\n\n /**\n * Event handler list\n * @type {Object}\n * @private\n */\n this._handlers = {\n mousedown: this._onFabricMouseDown.bind(this),\n mousemove: this._onFabricMouseMove.bind(this),\n mouseup: this._onFabricMouseUp.bind(this),\n };\n }\n\n /**\n * Set states of the current drawing shape\n * @ignore\n * @param {string} type - Icon type ('arrow', 'cancel', custom icon name)\n * @param {string} iconColor - Icon foreground color\n */\n setStates(type, iconColor) {\n this._type = type;\n this._iconColor = iconColor;\n }\n\n /**\n * Start to draw the icon on canvas\n * @ignore\n */\n start() {\n const canvas = this.getCanvas();\n canvas.selection = false;\n canvas.on('mouse:down', this._handlers.mousedown);\n }\n\n /**\n * End to draw the icon on canvas\n * @ignore\n */\n end() {\n const canvas = this.getCanvas();\n\n canvas.selection = true;\n canvas.off({\n 'mouse:down': this._handlers.mousedown,\n });\n }\n\n /**\n * Add icon\n * @param {string} type - Icon type\n * @param {Object} options - Icon options\n * @param {string} [options.fill] - Icon foreground color\n * @param {string} [options.left] - Icon x position\n * @param {string} [options.top] - Icon y position\n * @returns {Promise}\n */\n add(type, options) {\n return new Promise((resolve, reject) => {\n const canvas = this.getCanvas();\n const path = this._pathMap[type];\n const selectionStyle = fObjectOptions.SELECTION_STYLE;\n const icon = path ? this._createIcon(path) : null;\n this._icon = icon;\n\n if (!icon) {\n reject(rejectMessages.invalidParameters);\n }\n\n icon.set(\n snippet.extend(\n {\n type: 'icon',\n fill: this._oColor,\n },\n selectionStyle,\n options,\n this.graphics.controlStyle\n )\n );\n\n canvas.add(icon).setActiveObject(icon);\n\n resolve(this.graphics.createObjectProperties(icon));\n });\n }\n\n /**\n * Register icon paths\n * @param {{key: string, value: string}} pathInfos - Path infos\n */\n registerPaths(pathInfos) {\n snippet.forEach(\n pathInfos,\n (path, type) => {\n this._pathMap[type] = path;\n },\n this\n );\n }\n\n /**\n * Set icon object color\n * @param {string} color - Color to set\n * @param {fabric.Path}[obj] - Current activated path object\n */\n setColor(color, obj) {\n this._oColor = color;\n\n if (obj && obj.get('type') === 'icon') {\n obj.set({ fill: this._oColor });\n this.getCanvas().renderAll();\n }\n }\n\n /**\n * Get icon color\n * @param {fabric.Path}[obj] - Current activated path object\n * @returns {string} color\n */\n getColor(obj) {\n return obj.fill;\n }\n\n /**\n * Create icon object\n * @param {string} path - Path value to create icon\n * @returns {fabric.Path} Path object\n */\n _createIcon(path) {\n return new fabric.Path(path);\n }\n\n /**\n * MouseDown event handler on canvas\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object\n * @private\n */\n _onFabricMouseDown(fEvent) {\n const canvas = this.getCanvas();\n\n this._startPoint = canvas.getPointer(fEvent.e);\n const { x: left, y: top } = this._startPoint;\n\n this.add(this._type, {\n left,\n top,\n fill: this._iconColor,\n }).then(() => {\n this.fire(events.ADD_OBJECT, this.graphics.createObjectProperties(this._icon));\n canvas.on('mouse:move', this._handlers.mousemove);\n canvas.on('mouse:up', this._handlers.mouseup);\n });\n }\n\n /**\n * MouseMove event handler on canvas\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object\n * @private\n */\n _onFabricMouseMove(fEvent) {\n const canvas = this.getCanvas();\n\n if (!this._icon) {\n return;\n }\n const moveOriginPointer = canvas.getPointer(fEvent.e);\n\n const scaleX = (moveOriginPointer.x - this._startPoint.x) / this._icon.width;\n const scaleY = (moveOriginPointer.y - this._startPoint.y) / this._icon.height;\n\n this._icon.set({\n scaleX: Math.abs(scaleX * 2),\n scaleY: Math.abs(scaleY * 2),\n });\n\n this._icon.setCoords();\n canvas.renderAll();\n }\n\n /**\n * MouseUp event handler on canvas\n * @private\n */\n _onFabricMouseUp() {\n const canvas = this.getCanvas();\n\n this.fire(events.OBJECT_ADDED, this.graphics.createObjectProperties(this._icon));\n\n this._icon = null;\n\n canvas.off('mouse:down', this._handlers.mousedown);\n canvas.off('mouse:move', this._handlers.mousemove);\n canvas.off('mouse:up', this._handlers.mouseup);\n }\n}\n\nexport default Icon;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Add filter module\n */\nimport { isUndefined, extend, forEach, filter } from 'tui-code-snippet';\nimport fabric from 'fabric';\nimport Component from '@/interface/component';\nimport { Promise } from '@/util';\nimport { rejectMessages, componentNames } from '@/consts';\nimport Mask from '@/extension/mask';\nimport Sharpen from '@/extension/sharpen';\nimport Emboss from '@/extension/emboss';\nimport ColorFilter from '@/extension/colorFilter';\n\nconst { filters } = fabric.Image;\n\nfilters.Mask = Mask;\nfilters.Sharpen = Sharpen;\nfilters.Emboss = Emboss;\nfilters.ColorFilter = ColorFilter;\n\n/**\n * Filter\n * @class Filter\n * @param {Graphics} graphics - Graphics instance\n * @extends {Component}\n * @ignore\n */\nclass Filter extends Component {\n constructor(graphics) {\n super(componentNames.FILTER, graphics);\n }\n\n /**\n * Add filter to source image (a specific filter is added on fabric.js)\n * @param {string} type - Filter type\n * @param {Object} [options] - Options of filter\n * @returns {Promise}\n */\n add(type, options) {\n return new Promise((resolve, reject) => {\n const sourceImg = this._getSourceImage();\n const canvas = this.getCanvas();\n let imgFilter = this._getFilter(sourceImg, type);\n if (!imgFilter) {\n imgFilter = this._createFilter(sourceImg, type, options);\n }\n\n if (!imgFilter) {\n reject(rejectMessages.invalidParameters);\n }\n\n this._changeFilterValues(imgFilter, options);\n\n this._apply(sourceImg, () => {\n canvas.renderAll();\n resolve({\n type,\n action: 'add',\n options,\n });\n });\n });\n }\n\n /**\n * Remove filter to source image\n * @param {string} type - Filter type\n * @returns {Promise}\n */\n remove(type) {\n return new Promise((resolve, reject) => {\n const sourceImg = this._getSourceImage();\n const canvas = this.getCanvas();\n const options = this.getOptions(type);\n\n if (!sourceImg.filters.length) {\n reject(rejectMessages.unsupportedOperation);\n }\n\n this._removeFilter(sourceImg, type);\n\n this._apply(sourceImg, () => {\n canvas.renderAll();\n resolve({\n type,\n action: 'remove',\n options,\n });\n });\n });\n }\n\n /**\n * Whether this has the filter or not\n * @param {string} type - Filter type\n * @returns {boolean} true if it has the filter\n */\n hasFilter(type) {\n return !!this._getFilter(this._getSourceImage(), type);\n }\n\n /**\n * Get a filter options\n * @param {string} type - Filter type\n * @returns {Object} filter options or null if there is no that filter\n */\n getOptions(type) {\n const sourceImg = this._getSourceImage();\n const imgFilter = this._getFilter(sourceImg, type);\n if (!imgFilter) {\n return null;\n }\n\n return extend({}, imgFilter.options);\n }\n\n /**\n * Change filter values\n * @param {Object} imgFilter object of filter\n * @param {Object} options object\n * @private\n */\n _changeFilterValues(imgFilter, options) {\n forEach(options, (value, key) => {\n if (!isUndefined(imgFilter[key])) {\n imgFilter[key] = value;\n }\n });\n forEach(imgFilter.options, (value, key) => {\n if (!isUndefined(options[key])) {\n imgFilter.options[key] = options[key];\n }\n });\n }\n\n /**\n * Apply filter\n * @param {fabric.Image} sourceImg - Source image to apply filter\n * @param {function} callback - Executed function after applying filter\n * @private\n */\n _apply(sourceImg, callback) {\n sourceImg.filters.push();\n const result = sourceImg.applyFilters();\n if (result) {\n callback();\n }\n }\n\n /**\n * Get source image on canvas\n * @returns {fabric.Image} Current source image on canvas\n * @private\n */\n _getSourceImage() {\n return this.getCanvasImage();\n }\n\n /**\n * Create filter instance\n * @param {fabric.Image} sourceImg - Source image to apply filter\n * @param {string} type - Filter type\n * @param {Object} [options] - Options of filter\n * @returns {Object} Fabric object of filter\n * @private\n */\n _createFilter(sourceImg, type, options) {\n let filterObj;\n // capitalize first letter for matching with fabric image filter name\n const fabricType = this._getFabricFilterType(type);\n const ImageFilter = fabric.Image.filters[fabricType];\n if (ImageFilter) {\n filterObj = new ImageFilter(options);\n filterObj.options = options;\n sourceImg.filters.push(filterObj);\n }\n\n return filterObj;\n }\n\n /**\n * Get applied filter instance\n * @param {fabric.Image} sourceImg - Source image to apply filter\n * @param {string} type - Filter type\n * @returns {Object} Fabric object of filter\n * @private\n */\n _getFilter(sourceImg, type) {\n let imgFilter = null;\n\n if (sourceImg) {\n const fabricType = this._getFabricFilterType(type);\n const { length } = sourceImg.filters;\n let item, i;\n\n for (i = 0; i < length; i += 1) {\n item = sourceImg.filters[i];\n if (item.type === fabricType) {\n imgFilter = item;\n break;\n }\n }\n }\n\n return imgFilter;\n }\n\n /**\n * Remove applied filter instance\n * @param {fabric.Image} sourceImg - Source image to apply filter\n * @param {string} type - Filter type\n * @private\n */\n _removeFilter(sourceImg, type) {\n const fabricType = this._getFabricFilterType(type);\n sourceImg.filters = filter(sourceImg.filters, (value) => value.type !== fabricType);\n }\n\n /**\n * Change filter class name to fabric's, especially capitalizing first letter\n * @param {string} type - Filter type\n * @example\n * 'grayscale' -> 'Grayscale'\n * @returns {string} Fabric filter class name\n */\n _getFabricFilterType(type) {\n return type.charAt(0).toUpperCase() + type.slice(1);\n }\n}\n\nexport default Filter;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Mask extending fabric.Image.filters.Mask\n */\nimport fabric from 'fabric';\n\n/**\n * Mask object\n * @class Mask\n * @extends {fabric.Image.filters.BlendImage}\n * @ignore\n */\nconst Mask = fabric.util.createClass(\n fabric.Image.filters.BlendImage,\n /** @lends Mask.prototype */ {\n /**\n * Apply filter to canvas element\n * @param {Object} pipelineState - Canvas element to apply filter\n * @override\n */\n applyTo(pipelineState) {\n if (!this.mask) {\n return;\n }\n\n const canvas = pipelineState.canvasEl;\n const { width, height } = canvas;\n const maskCanvasEl = this._createCanvasOfMask(width, height);\n const ctx = canvas.getContext('2d');\n const maskCtx = maskCanvasEl.getContext('2d');\n const imageData = ctx.getImageData(0, 0, width, height);\n\n this._drawMask(maskCtx, canvas, ctx);\n this._mapData(maskCtx, imageData, width, height);\n\n pipelineState.imageData = imageData;\n },\n\n /**\n * Create canvas of mask image\n * @param {number} width - Width of main canvas\n * @param {number} height - Height of main canvas\n * @returns {HTMLElement} Canvas element\n * @private\n */\n _createCanvasOfMask(width, height) {\n const maskCanvasEl = fabric.util.createCanvasElement();\n\n maskCanvasEl.width = width;\n maskCanvasEl.height = height;\n\n return maskCanvasEl;\n },\n\n /**\n * Draw mask image on canvas element\n * @param {Object} maskCtx - Context of mask canvas\n * @private\n */\n _drawMask(maskCtx) {\n const { mask } = this;\n const maskImg = mask.getElement();\n const { angle, left, scaleX, scaleY, top } = mask;\n\n maskCtx.save();\n maskCtx.translate(left, top);\n maskCtx.rotate((angle * Math.PI) / 180);\n maskCtx.scale(scaleX, scaleY);\n maskCtx.drawImage(maskImg, -maskImg.width / 2, -maskImg.height / 2);\n maskCtx.restore();\n },\n\n /**\n * Map mask image data to source image data\n * @param {Object} maskCtx - Context of mask canvas\n * @param {Object} imageData - Data of source image\n * @param {number} width - Width of main canvas\n * @param {number} height - Height of main canvas\n * @private\n */\n _mapData(maskCtx, imageData, width, height) {\n const { data, height: imgHeight, width: imgWidth } = imageData;\n const sourceData = data;\n const len = imgWidth * imgHeight * 4;\n const maskData = maskCtx.getImageData(0, 0, width, height).data;\n\n for (let i = 0; i < len; i += 4) {\n sourceData[i + 3] = maskData[i]; // adjust value of alpha data\n }\n },\n }\n);\n\nexport default Mask;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Sharpen extending fabric.Image.filters.Convolute\n */\nimport fabric from 'fabric';\n\n/**\n * Sharpen object\n * @class Sharpen\n * @extends {fabric.Image.filters.Convolute}\n * @ignore\n */\nconst Sharpen = fabric.util.createClass(\n fabric.Image.filters.Convolute,\n /** @lends Convolute.prototype */ {\n /**\n * Filter type\n * @param {String} type\n * @default\n */\n type: 'Sharpen',\n\n /**\n * constructor\n * @override\n */\n initialize() {\n this.matrix = [0, -1, 0, -1, 5, -1, 0, -1, 0];\n },\n }\n);\n\nexport default Sharpen;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Emboss extending fabric.Image.filters.Convolute\n */\nimport fabric from 'fabric';\n\n/**\n * Emboss object\n * @class Emboss\n * @extends {fabric.Image.filters.Convolute}\n * @ignore\n */\nconst Emboss = fabric.util.createClass(\n fabric.Image.filters.Convolute,\n /** @lends Convolute.prototype */ {\n /**\n * Filter type\n * @param {String} type\n * @default\n */\n type: 'Emboss',\n\n /**\n * constructor\n * @override\n */\n initialize() {\n this.matrix = [1, 1, 1, 1, 0.7, -1, -1, -1, -1];\n },\n }\n);\n\nexport default Emboss;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview ColorFilter extending fabric.Image.filters.BaseFilter\n */\nimport fabric from 'fabric';\n\n/**\n * ColorFilter object\n * @class ColorFilter\n * @extends {fabric.Image.filters.BaseFilter}\n * @ignore\n */\nconst ColorFilter = fabric.util.createClass(\n fabric.Image.filters.BaseFilter,\n /** @lends BaseFilter.prototype */ {\n /**\n * Filter type\n * @param {String} type\n * @default\n */\n type: 'ColorFilter',\n\n /**\n * Constructor\n * @member fabric.Image.filters.ColorFilter.prototype\n * @param {Object} [options] Options object\n * @param {Number} [options.color='#FFFFFF'] Value of color (0...255)\n * @param {Number} [options.threshold=45] Value of threshold (0...255)\n * @override\n */\n initialize(options) {\n if (!options) {\n options = {};\n }\n this.color = options.color || '#FFFFFF';\n this.threshold = options.threshold || 45;\n this.x = options.x || null;\n this.y = options.y || null;\n },\n\n /**\n * Applies filter to canvas element\n * @param {Object} canvas Canvas object passed by fabric\n */\n // eslint-disable-next-line complexity\n applyTo(canvas) {\n const { canvasEl } = canvas;\n const context = canvasEl.getContext('2d');\n const imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height);\n const { data } = imageData;\n const { threshold } = this;\n let filterColor = fabric.Color.sourceFromHex(this.color);\n let i, len;\n\n if (this.x && this.y) {\n filterColor = this._getColor(imageData, this.x, this.y);\n }\n\n for (i = 0, len = data.length; i < len; i += 4) {\n if (\n this._isOutsideThreshold(data[i], filterColor[0], threshold) ||\n this._isOutsideThreshold(data[i + 1], filterColor[1], threshold) ||\n this._isOutsideThreshold(data[i + 2], filterColor[2], threshold)\n ) {\n continue;\n }\n data[i] = data[i + 1] = data[i + 2] = data[i + 3] = 0;\n }\n context.putImageData(imageData, 0, 0);\n },\n\n /**\n * Check color if it is within threshold\n * @param {Number} color1 source color\n * @param {Number} color2 filtering color\n * @param {Number} threshold threshold\n * @returns {boolean} true if within threshold or false\n */\n _isOutsideThreshold(color1, color2, threshold) {\n const diff = color1 - color2;\n\n return Math.abs(diff) > threshold;\n },\n\n /**\n * Get color at (x, y)\n * @param {Object} imageData of canvas\n * @param {Number} x left position\n * @param {Number} y top position\n * @returns {Array} color array\n */\n _getColor(imageData, x, y) {\n const color = [0, 0, 0, 0];\n const { data, width } = imageData;\n const bytes = 4;\n const position = (width * y + x) * bytes;\n\n color[0] = data[position];\n color[1] = data[position + 1];\n color[2] = data[position + 2];\n color[3] = data[position + 3];\n\n return color;\n },\n }\n);\n\nexport default ColorFilter;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Shape component\n */\nimport { extend } from 'tui-code-snippet';\nimport fabric from 'fabric';\nimport Component from '@/interface/component';\nimport resizeHelper from '@/helper/shapeResizeHelper';\nimport {\n getFillImageFromShape,\n rePositionFilterTypeFillImage,\n reMakePatternImageSource,\n makeFillPatternForFilter,\n makeFilterOptionFromFabricImage,\n resetFillPatternCanvas,\n} from '@/helper/shapeFilterFillHelper';\nimport {\n Promise,\n changeOrigin,\n getCustomProperty,\n getFillTypeFromOption,\n getFillTypeFromObject,\n isShape,\n} from '@/util';\nimport {\n rejectMessages,\n eventNames,\n keyCodes as KEY_CODES,\n componentNames,\n fObjectOptions,\n SHAPE_DEFAULT_OPTIONS,\n SHAPE_FILL_TYPE,\n} from '@/consts';\n\nconst SHAPE_INIT_OPTIONS = extend(\n {\n strokeWidth: 1,\n stroke: '#000000',\n fill: '#ffffff',\n width: 1,\n height: 1,\n rx: 0,\n ry: 0,\n },\n SHAPE_DEFAULT_OPTIONS\n);\nconst DEFAULT_TYPE = 'rect';\nconst DEFAULT_WIDTH = 20;\nconst DEFAULT_HEIGHT = 20;\n\n/**\n * Make fill option\n * @param {Object} options - Options to create the shape\n * @param {Object.Image} canvasImage - canvas background image\n * @param {Function} createStaticCanvas - static canvas creater\n * @returns {Object} - shape option\n * @private\n */\nfunction makeFabricFillOption(options, canvasImage, createStaticCanvas) {\n const fillOption = options.fill;\n const fillType = getFillTypeFromOption(options.fill);\n let fill = fillOption;\n\n if (fillOption.color) {\n fill = fillOption.color;\n }\n\n let extOption = null;\n if (fillType === 'filter') {\n const newStaticCanvas = createStaticCanvas();\n extOption = makeFillPatternForFilter(canvasImage, fillOption.filter, newStaticCanvas);\n } else {\n extOption = { fill };\n }\n\n return extend({}, options, extOption);\n}\n\n/**\n * Shape\n * @class Shape\n * @param {Graphics} graphics - Graphics instance\n * @extends {Component}\n * @ignore\n */\nexport default class Shape extends Component {\n constructor(graphics) {\n super(componentNames.SHAPE, graphics);\n\n /**\n * Object of The drawing shape\n * @type {fabric.Object}\n * @private\n */\n this._shapeObj = null;\n\n /**\n * Type of the drawing shape\n * @type {string}\n * @private\n */\n this._type = DEFAULT_TYPE;\n\n /**\n * Options to draw the shape\n * @type {Object}\n * @private\n */\n this._options = extend({}, SHAPE_INIT_OPTIONS);\n\n /**\n * Whether the shape object is selected or not\n * @type {boolean}\n * @private\n */\n this._isSelected = false;\n\n /**\n * Pointer for drawing shape (x, y)\n * @type {Object}\n * @private\n */\n this._startPoint = {};\n\n /**\n * Using shortcut on drawing shape\n * @type {boolean}\n * @private\n */\n this._withShiftKey = false;\n\n /**\n * Event handler list\n * @type {Object}\n * @private\n */\n this._handlers = {\n mousedown: this._onFabricMouseDown.bind(this),\n mousemove: this._onFabricMouseMove.bind(this),\n mouseup: this._onFabricMouseUp.bind(this),\n keydown: this._onKeyDown.bind(this),\n keyup: this._onKeyUp.bind(this),\n };\n }\n\n /**\n * Start to draw the shape on canvas\n * @ignore\n */\n start() {\n const canvas = this.getCanvas();\n\n this._isSelected = false;\n\n canvas.defaultCursor = 'crosshair';\n canvas.selection = false;\n canvas.uniformScaling = true;\n canvas.on({\n 'mouse:down': this._handlers.mousedown,\n });\n\n fabric.util.addListener(document, 'keydown', this._handlers.keydown);\n fabric.util.addListener(document, 'keyup', this._handlers.keyup);\n }\n\n /**\n * End to draw the shape on canvas\n * @ignore\n */\n end() {\n const canvas = this.getCanvas();\n\n this._isSelected = false;\n\n canvas.defaultCursor = 'default';\n\n canvas.selection = true;\n canvas.uniformScaling = false;\n canvas.off({\n 'mouse:down': this._handlers.mousedown,\n });\n\n fabric.util.removeListener(document, 'keydown', this._handlers.keydown);\n fabric.util.removeListener(document, 'keyup', this._handlers.keyup);\n }\n\n /**\n * Set states of the current drawing shape\n * @ignore\n * @param {string} type - Shape type (ex: 'rect', 'circle')\n * @param {Object} [options] - Shape options\n * @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or\n * Shape foreground color (ex: '#fff', 'transparent')\n * @param {string} [options.stoke] - Shape outline color\n * @param {number} [options.strokeWidth] - Shape outline width\n * @param {number} [options.width] - Width value (When type option is 'rect', this options can use)\n * @param {number} [options.height] - Height value (When type option is 'rect', this options can use)\n * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)\n * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)\n */\n setStates(type, options) {\n this._type = type;\n\n if (options) {\n this._options = extend(this._options, options);\n }\n }\n\n /**\n * Add the shape\n * @ignore\n * @param {string} type - Shape type (ex: 'rect', 'circle')\n * @param {Object} options - Shape options\n * @param {(ShapeFillOption | string)} [options.fill] - ShapeFillOption or Shape foreground color (ex: '#fff', 'transparent') or ShapeFillOption object\n * @param {string} [options.stroke] - Shape outline color\n * @param {number} [options.strokeWidth] - Shape outline width\n * @param {number} [options.width] - Width value (When type option is 'rect', this options can use)\n * @param {number} [options.height] - Height value (When type option is 'rect', this options can use)\n * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)\n * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)\n * @param {number} [options.isRegular] - Whether scaling shape has 1:1 ratio or not\n * @returns {Promise}\n */\n add(type, options) {\n return new Promise((resolve) => {\n const canvas = this.getCanvas();\n const extendOption = this._extendOptions(options);\n\n const shapeObj = this._createInstance(type, extendOption);\n const objectProperties = this.graphics.createObjectProperties(shapeObj);\n\n this._bindEventOnShape(shapeObj);\n\n canvas.add(shapeObj).setActiveObject(shapeObj);\n\n this._resetPositionFillFilter(shapeObj);\n\n resolve(objectProperties);\n });\n }\n\n /**\n * Change the shape\n * @ignore\n * @param {fabric.Object} shapeObj - Selected shape object on canvas\n * @param {Object} options - Shape options\n * @param {(ShapeFillOption | string)} [options.fill] - {@link ShapeFillOption} or\n * Shape foreground color (ex: '#fff', 'transparent')\n * @param {string} [options.stroke] - Shape outline color\n * @param {number} [options.strokeWidth] - Shape outline width\n * @param {number} [options.width] - Width value (When type option is 'rect', this options can use)\n * @param {number} [options.height] - Height value (When type option is 'rect', this options can use)\n * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)\n * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)\n * @param {number} [options.isRegular] - Whether scaling shape has 1:1 ratio or not\n * @returns {Promise}\n */\n change(shapeObj, options) {\n return new Promise((resolve, reject) => {\n if (!isShape(shapeObj)) {\n reject(rejectMessages.unsupportedType);\n }\n const hasFillOption = getFillTypeFromOption(options.fill) === 'filter';\n const { canvasImage, createStaticCanvas } = this.graphics;\n\n shapeObj.set(\n hasFillOption ? makeFabricFillOption(options, canvasImage, createStaticCanvas) : options\n );\n\n if (hasFillOption) {\n this._resetPositionFillFilter(shapeObj);\n }\n\n this.getCanvas().renderAll();\n resolve();\n });\n }\n\n /**\n * make fill property for user event\n * @param {fabric.Object} shapeObj - fabric object\n * @returns {Object}\n */\n makeFillPropertyForUserEvent(shapeObj) {\n const fillType = getFillTypeFromObject(shapeObj);\n const fillProp = {};\n\n if (fillType === SHAPE_FILL_TYPE.FILTER) {\n const fillImage = getFillImageFromShape(shapeObj);\n const filterOption = makeFilterOptionFromFabricImage(fillImage);\n\n fillProp.type = fillType;\n fillProp.filter = filterOption;\n } else {\n fillProp.type = SHAPE_FILL_TYPE.COLOR;\n fillProp.color = shapeObj.fill || 'transparent';\n }\n\n return fillProp;\n }\n\n /**\n * Copy object handling.\n * @param {fabric.Object} shapeObj - Shape object\n * @param {fabric.Object} originalShapeObj - Shape object\n */\n processForCopiedObject(shapeObj, originalShapeObj) {\n this._bindEventOnShape(shapeObj);\n\n if (getFillTypeFromObject(shapeObj) === 'filter') {\n const fillImage = getFillImageFromShape(originalShapeObj);\n const filterOption = makeFilterOptionFromFabricImage(fillImage);\n const newStaticCanvas = this.graphics.createStaticCanvas();\n\n shapeObj.set(\n makeFillPatternForFilter(this.graphics.canvasImage, filterOption, newStaticCanvas)\n );\n this._resetPositionFillFilter(shapeObj);\n }\n }\n\n /**\n * Create the instance of shape\n * @param {string} type - Shape type\n * @param {Object} options - Options to creat the shape\n * @returns {fabric.Object} Shape instance\n * @private\n */\n _createInstance(type, options) {\n let instance;\n\n switch (type) {\n case 'rect':\n instance = new fabric.Rect(options);\n break;\n case 'circle':\n instance = new fabric.Ellipse(\n extend(\n {\n type: 'circle',\n },\n options\n )\n );\n break;\n case 'triangle':\n instance = new fabric.Triangle(options);\n break;\n default:\n instance = {};\n }\n\n return instance;\n }\n\n /**\n * Get the options to create the shape\n * @param {Object} options - Options to creat the shape\n * @returns {Object} Shape options\n * @private\n */\n _extendOptions(options) {\n const selectionStyles = fObjectOptions.SELECTION_STYLE;\n const { canvasImage, createStaticCanvas } = this.graphics;\n\n options = extend({}, SHAPE_INIT_OPTIONS, this._options, selectionStyles, options);\n\n return makeFabricFillOption(options, canvasImage, createStaticCanvas);\n }\n\n /**\n * Bind fabric events on the creating shape object\n * @param {fabric.Object} shapeObj - Shape object\n * @private\n */\n _bindEventOnShape(shapeObj) {\n const self = this;\n const canvas = this.getCanvas();\n\n shapeObj.on({\n added() {\n self._shapeObj = this;\n resizeHelper.setOrigins(self._shapeObj);\n },\n selected() {\n self._isSelected = true;\n self._shapeObj = this;\n canvas.uniformScaling = true;\n canvas.defaultCursor = 'default';\n resizeHelper.setOrigins(self._shapeObj);\n },\n deselected() {\n self._isSelected = false;\n self._shapeObj = null;\n canvas.defaultCursor = 'crosshair';\n canvas.uniformScaling = false;\n },\n modified() {\n const currentObj = self._shapeObj;\n\n resizeHelper.adjustOriginToCenter(currentObj);\n resizeHelper.setOrigins(currentObj);\n },\n modifiedInGroup(activeSelection) {\n self._fillFilterRePositionInGroupSelection(shapeObj, activeSelection);\n },\n moving() {\n self._resetPositionFillFilter(this);\n },\n rotating() {\n self._resetPositionFillFilter(this);\n },\n scaling(fEvent) {\n const pointer = canvas.getPointer(fEvent.e);\n const currentObj = self._shapeObj;\n\n canvas.setCursor('crosshair');\n resizeHelper.resize(currentObj, pointer, true);\n\n self._resetPositionFillFilter(this);\n },\n });\n }\n\n /**\n * MouseDown event handler on canvas\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object\n * @private\n */\n _onFabricMouseDown(fEvent) {\n if (!fEvent.target) {\n this._isSelected = false;\n this._shapeObj = false;\n }\n\n if (!this._isSelected && !this._shapeObj) {\n const canvas = this.getCanvas();\n this._startPoint = canvas.getPointer(fEvent.e);\n\n canvas.on({\n 'mouse:move': this._handlers.mousemove,\n 'mouse:up': this._handlers.mouseup,\n });\n }\n }\n\n /**\n * MouseDown event handler on canvas\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event object\n * @private\n */\n _onFabricMouseMove(fEvent) {\n const canvas = this.getCanvas();\n const pointer = canvas.getPointer(fEvent.e);\n const startPointX = this._startPoint.x;\n const startPointY = this._startPoint.y;\n const width = startPointX - pointer.x;\n const height = startPointY - pointer.y;\n const shape = this._shapeObj;\n\n if (!shape) {\n this.add(this._type, {\n left: startPointX,\n top: startPointY,\n width,\n height,\n }).then((objectProps) => {\n this.fire(eventNames.ADD_OBJECT, objectProps);\n });\n } else {\n this._shapeObj.set({\n isRegular: this._withShiftKey,\n });\n\n resizeHelper.resize(shape, pointer);\n canvas.renderAll();\n\n this._resetPositionFillFilter(shape);\n }\n }\n\n /**\n * MouseUp event handler on canvas\n * @private\n */\n _onFabricMouseUp() {\n const canvas = this.getCanvas();\n const startPointX = this._startPoint.x;\n const startPointY = this._startPoint.y;\n const shape = this._shapeObj;\n\n if (!shape) {\n this.add(this._type, {\n left: startPointX,\n top: startPointY,\n width: DEFAULT_WIDTH,\n height: DEFAULT_HEIGHT,\n }).then((objectProps) => {\n this.fire(eventNames.ADD_OBJECT, objectProps);\n });\n } else if (shape) {\n resizeHelper.adjustOriginToCenter(shape);\n this.fire(eventNames.OBJECT_ADDED, this.graphics.createObjectProperties(shape));\n }\n\n canvas.off({\n 'mouse:move': this._handlers.mousemove,\n 'mouse:up': this._handlers.mouseup,\n });\n }\n\n /**\n * Keydown event handler on document\n * @param {KeyboardEvent} e - Event object\n * @private\n */\n _onKeyDown(e) {\n if (e.keyCode === KEY_CODES.SHIFT) {\n this._withShiftKey = true;\n\n if (this._shapeObj) {\n this._shapeObj.isRegular = true;\n }\n }\n }\n\n /**\n * Keyup event handler on document\n * @param {KeyboardEvent} e - Event object\n * @private\n */\n _onKeyUp(e) {\n if (e.keyCode === KEY_CODES.SHIFT) {\n this._withShiftKey = false;\n\n if (this._shapeObj) {\n this._shapeObj.isRegular = false;\n }\n }\n }\n\n /**\n * Reset shape position and internal proportions in the filter type fill area.\n * @param {fabric.Object} shapeObj - Shape object\n * @private\n */\n _resetPositionFillFilter(shapeObj) {\n if (getFillTypeFromObject(shapeObj) !== 'filter') {\n return;\n }\n\n const { patternSourceCanvas } = getCustomProperty(shapeObj, 'patternSourceCanvas');\n\n const fillImage = getFillImageFromShape(shapeObj);\n const { originalAngle } = getCustomProperty(fillImage, 'originalAngle');\n\n if (this.graphics.canvasImage.angle !== originalAngle) {\n reMakePatternImageSource(shapeObj, this.graphics.canvasImage);\n }\n const { originX, originY } = shapeObj;\n\n resizeHelper.adjustOriginToCenter(shapeObj);\n\n shapeObj.width *= shapeObj.scaleX;\n shapeObj.height *= shapeObj.scaleY;\n shapeObj.rx *= shapeObj.scaleX;\n shapeObj.ry *= shapeObj.scaleY;\n shapeObj.scaleX = 1;\n shapeObj.scaleY = 1;\n\n rePositionFilterTypeFillImage(shapeObj);\n\n changeOrigin(shapeObj, {\n originX,\n originY,\n });\n\n resetFillPatternCanvas(patternSourceCanvas);\n }\n\n /**\n * Reset filter area position within group selection.\n * @param {fabric.Object} shapeObj - Shape object\n * @param {fabric.ActiveSelection} activeSelection - Shape object\n * @private\n */\n _fillFilterRePositionInGroupSelection(shapeObj, activeSelection) {\n if (activeSelection.scaleX !== 1 || activeSelection.scaleY !== 1) {\n // This is necessary because the group's scale transition state affects the relative size of the fill area.\n // The only way to reset the object transformation scale state to neutral.\n // {@link https://github.com/fabricjs/fabric.js/issues/5372}\n activeSelection.addWithUpdate();\n }\n\n const { angle, left, top } = shapeObj;\n\n fabric.util.addTransformToObject(shapeObj, activeSelection.calcTransformMatrix());\n this._resetPositionFillFilter(shapeObj);\n\n shapeObj.set({\n angle,\n left,\n top,\n });\n }\n}\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Shape resize helper\n */\nimport { forEach, map, extend } from 'tui-code-snippet';\nimport resizeHelper from '@/helper/shapeResizeHelper';\nimport { capitalizeString, flipObject, setCustomProperty, getCustomProperty } from '@/util';\n\nconst FILTER_OPTION_MAP = {\n pixelate: 'blocksize',\n blur: 'blur',\n};\nconst POSITION_DIMENSION_MAP = {\n x: 'width',\n y: 'height',\n};\n\nconst FILTER_NAME_VALUE_MAP = flipObject(FILTER_OPTION_MAP);\n\n/**\n * Cached canvas image element for fill image\n * @type {boolean}\n * @private\n */\nlet cachedCanvasImageElement = null;\n\n/**\n * Get background image of fill\n * @param {fabric.Object} shapeObj - Shape object\n * @returns {fabric.Image}\n * @private\n */\nexport function getFillImageFromShape(shapeObj) {\n const { patternSourceCanvas } = getCustomProperty(shapeObj, 'patternSourceCanvas');\n const [fillImage] = patternSourceCanvas.getObjects();\n\n return fillImage;\n}\n\n/**\n * Reset the image position in the filter type fill area.\n * @param {fabric.Object} shapeObj - Shape object\n * @private\n */\nexport function rePositionFilterTypeFillImage(shapeObj) {\n const { angle, flipX, flipY } = shapeObj;\n const fillImage = getFillImageFromShape(shapeObj);\n const rotatedShapeCornerDimension = getRotatedDimension(shapeObj);\n const { right, bottom } = rotatedShapeCornerDimension;\n let { width, height } = rotatedShapeCornerDimension;\n const diffLeft = (width - shapeObj.width) / 2;\n const diffTop = (height - shapeObj.height) / 2;\n const cropX = shapeObj.left - shapeObj.width / 2 - diffLeft;\n const cropY = shapeObj.top - shapeObj.height / 2 - diffTop;\n let left = width / 2 - diffLeft;\n let top = height / 2 - diffTop;\n const fillImageMaxSize = Math.max(width, height) + Math.max(diffLeft, diffTop);\n\n [left, top, width, height] = calculateFillImageDimensionOutsideCanvas({\n shapeObj,\n left,\n top,\n width,\n height,\n cropX,\n cropY,\n flipX,\n flipY,\n right,\n bottom,\n });\n\n fillImage.set({\n angle: flipX === flipY ? -angle : angle,\n left,\n top,\n width,\n height,\n cropX,\n cropY,\n flipX,\n flipY,\n });\n\n setCustomProperty(fillImage, { fillImageMaxSize });\n}\n\n/**\n * Make filter option from fabric image\n * @param {fabric.Image} imageObject - fabric image object\n * @returns {object}\n */\nexport function makeFilterOptionFromFabricImage(imageObject) {\n return map(imageObject.filters, (filter) => {\n const [key] = Object.keys(filter);\n\n return {\n [FILTER_NAME_VALUE_MAP[key]]: filter[key],\n };\n });\n}\n\n/**\n * Calculate fill image position and size for out of Canvas\n * @param {Object} options - options for position dimension calculate\n * @param {fabric.Object} shapeObj - shape object\n * @param {number} left - original left position\n * @param {number} top - original top position\n * @param {number} width - image width\n * @param {number} height - image height\n * @param {number} cropX - image cropX\n * @param {number} cropY - image cropY\n * @param {boolean} flipX - shape flipX\n * @param {boolean} flipY - shape flipY\n * @returns {Object}\n */\nfunction calculateFillImageDimensionOutsideCanvas({\n shapeObj,\n left,\n top,\n width,\n height,\n cropX,\n cropY,\n flipX,\n flipY,\n right,\n bottom,\n}) {\n const overflowAreaPositionFixer = (type, outDistance, imageLeft, imageTop) =>\n calculateDistanceOverflowPart({\n type,\n outDistance,\n shapeObj,\n flipX,\n flipY,\n left: imageLeft,\n top: imageTop,\n });\n const [originalWidth, originalHeight] = [width, height];\n\n [left, top, width, height] = calculateDimensionLeftTopEdge(overflowAreaPositionFixer, {\n left,\n top,\n width,\n height,\n cropX,\n cropY,\n });\n\n [left, top, width, height] = calculateDimensionRightBottomEdge(overflowAreaPositionFixer, {\n left,\n top,\n insideCanvasRealImageWidth: width,\n insideCanvasRealImageHeight: height,\n right,\n bottom,\n cropX,\n cropY,\n originalWidth,\n originalHeight,\n });\n\n return [left, top, width, height];\n}\n\n/**\n * Calculate fill image position and size for for right bottom edge\n * @param {Function} overflowAreaPositionFixer - position fixer\n * @param {Object} options - options for position dimension calculate\n * @param {fabric.Object} shapeObj - shape object\n * @param {number} left - original left position\n * @param {number} top - original top position\n * @param {number} width - image width\n * @param {number} height - image height\n * @param {number} right - image right\n * @param {number} bottom - image bottom\n * @param {number} cropX - image cropX\n * @param {number} cropY - image cropY\n * @param {boolean} originalWidth - image original width\n * @param {boolean} originalHeight - image original height\n * @returns {Object}\n */\nfunction calculateDimensionRightBottomEdge(\n overflowAreaPositionFixer,\n {\n left,\n top,\n insideCanvasRealImageWidth,\n insideCanvasRealImageHeight,\n right,\n bottom,\n cropX,\n cropY,\n originalWidth,\n originalHeight,\n }\n) {\n let [width, height] = [insideCanvasRealImageWidth, insideCanvasRealImageHeight];\n const { width: canvasWidth, height: canvasHeight } = cachedCanvasImageElement;\n\n if (right > canvasWidth && cropX > 0) {\n width = originalWidth - Math.abs(right - canvasWidth);\n }\n if (bottom > canvasHeight && cropY > 0) {\n height = originalHeight - Math.abs(bottom - canvasHeight);\n }\n\n const diff = {\n x: (insideCanvasRealImageWidth - width) / 2,\n y: (insideCanvasRealImageHeight - height) / 2,\n };\n\n forEach(['x', 'y'], (type) => {\n const cropDistance2 = diff[type];\n if (cropDistance2 > 0) {\n [left, top] = overflowAreaPositionFixer(type, cropDistance2, left, top);\n }\n });\n\n return [left, top, width, height];\n}\n\n/**\n * Calculate fill image position and size for for left top\n * @param {Function} overflowAreaPositionFixer - position fixer\n * @param {Object} options - options for position dimension calculate\n * @param {fabric.Object} shapeObj - shape object\n * @param {number} left - original left position\n * @param {number} top - original top position\n * @param {number} width - image width\n * @param {number} height - image height\n * @param {number} cropX - image cropX\n * @param {number} cropY - image cropY\n * @returns {Object}\n */\nfunction calculateDimensionLeftTopEdge(\n overflowAreaPositionFixer,\n { left, top, width, height, cropX, cropY }\n) {\n const dimension = {\n width,\n height,\n };\n\n forEach(['x', 'y'], (type) => {\n const cropDistance = type === 'x' ? cropX : cropY;\n const compareSize = dimension[POSITION_DIMENSION_MAP[type]];\n const standardSize = cachedCanvasImageElement[POSITION_DIMENSION_MAP[type]];\n\n if (compareSize > standardSize) {\n const outDistance = (compareSize - standardSize) / 2;\n\n dimension[POSITION_DIMENSION_MAP[type]] = standardSize;\n [left, top] = overflowAreaPositionFixer(type, outDistance, left, top);\n }\n if (cropDistance < 0) {\n [left, top] = overflowAreaPositionFixer(type, cropDistance, left, top);\n }\n });\n\n return [left, top, dimension.width, dimension.height];\n}\n\n/**\n * Make fill property of dynamic pattern type\n * @param {fabric.Image} canvasImage - canvas background image\n * @param {Array} filterOption - filter option\n * @param {fabric.StaticCanvas} patternSourceCanvas - fabric static canvas\n * @returns {Object}\n */\nexport function makeFillPatternForFilter(canvasImage, filterOption, patternSourceCanvas) {\n const copiedCanvasElement = getCachedCanvasImageElement(canvasImage);\n const fillImage = makeFillImage(copiedCanvasElement, canvasImage.angle, filterOption);\n patternSourceCanvas.add(fillImage);\n\n const fabricProperty = {\n fill: new fabric.Pattern({\n source: patternSourceCanvas.getElement(),\n repeat: 'no-repeat',\n }),\n };\n\n setCustomProperty(fabricProperty, { patternSourceCanvas });\n\n return fabricProperty;\n}\n\n/**\n * Reset fill pattern canvas\n * @param {fabric.StaticCanvas} patternSourceCanvas - fabric static canvas\n */\nexport function resetFillPatternCanvas(patternSourceCanvas) {\n const [innerImage] = patternSourceCanvas.getObjects();\n let { fillImageMaxSize } = getCustomProperty(innerImage, 'fillImageMaxSize');\n fillImageMaxSize = Math.max(1, fillImageMaxSize);\n\n patternSourceCanvas.setDimensions({\n width: fillImageMaxSize,\n height: fillImageMaxSize,\n });\n patternSourceCanvas.renderAll();\n}\n\n/**\n * Remake filter pattern image source\n * @param {fabric.Object} shapeObj - Shape object\n * @param {fabric.Image} canvasImage - canvas background image\n */\nexport function reMakePatternImageSource(shapeObj, canvasImage) {\n const { patternSourceCanvas } = getCustomProperty(shapeObj, 'patternSourceCanvas');\n const [fillImage] = patternSourceCanvas.getObjects();\n const filterOption = makeFilterOptionFromFabricImage(fillImage);\n\n patternSourceCanvas.remove(fillImage);\n\n const copiedCanvasElement = getCachedCanvasImageElement(canvasImage, true);\n const newFillImage = makeFillImage(copiedCanvasElement, canvasImage.angle, filterOption);\n\n patternSourceCanvas.add(newFillImage);\n}\n\n/**\n * Calculate a point line outside the canvas.\n * @param {fabric.Image} canvasImage - canvas background image\n * @param {boolean} reset - default is false\n * @returns {HTMLImageElement}\n */\nexport function getCachedCanvasImageElement(canvasImage, reset = false) {\n if (!cachedCanvasImageElement || reset) {\n cachedCanvasImageElement = canvasImage.toCanvasElement();\n }\n\n return cachedCanvasImageElement;\n}\n\n/**\n * Calculate fill image position for out of Canvas\n * @param {string} type - 'x' or 'y'\n * @param {fabric.Object} shapeObj - shape object\n * @param {number} outDistance - distance away\n * @param {number} left - original left position\n * @param {number} top - original top position\n * @returns {Array}\n */\nfunction calculateDistanceOverflowPart({ type, shapeObj, outDistance, left, top, flipX, flipY }) {\n const shapePointNavigation = getShapeEdgePoint(shapeObj);\n const shapeNeighborPointNavigation = [\n [1, 2],\n [0, 3],\n [0, 3],\n [1, 2],\n ];\n const linePointsOutsideCanvas = calculateLinePointsOutsideCanvas(\n type,\n shapePointNavigation,\n shapeNeighborPointNavigation\n );\n const reatAngles = calculateLineAngleOfOutsideCanvas(\n type,\n shapePointNavigation,\n linePointsOutsideCanvas\n );\n const { startPointIndex } = linePointsOutsideCanvas;\n const diffPosition = getReversePositionForFlip({\n outDistance,\n startPointIndex,\n flipX,\n flipY,\n reatAngles,\n });\n\n return [left + diffPosition.left, top + diffPosition.top];\n}\n\n/**\n * Calculate fill image position for out of Canvas\n * @param {number} outDistance - distance away\n * @param {boolean} flipX - flip x statux\n * @param {boolean} flipY - flip y statux\n * @param {Array} reatAngles - Line angle of the rectangle vertex.\n * @returns {Object} diffPosition\n */\nfunction getReversePositionForFlip({ outDistance, startPointIndex, flipX, flipY, reatAngles }) {\n const rotationChangePoint1 = outDistance * Math.cos((reatAngles[0] * Math.PI) / 180);\n const rotationChangePoint2 = outDistance * Math.cos((reatAngles[1] * Math.PI) / 180);\n const isForward = startPointIndex === 2 || startPointIndex === 3;\n const diffPosition = {\n top: isForward ? rotationChangePoint1 : rotationChangePoint2,\n left: isForward ? rotationChangePoint2 : rotationChangePoint1,\n };\n\n if (isReverseLeftPositionForFlip(startPointIndex, flipX, flipY)) {\n diffPosition.left = diffPosition.left * -1;\n }\n if (isReverseTopPositionForFlip(startPointIndex, flipX, flipY)) {\n diffPosition.top = diffPosition.top * -1;\n }\n\n return diffPosition;\n}\n\n/**\n * Calculate a point line outside the canvas.\n * @param {string} type - 'x' or 'y'\n * @param {Array} shapePointNavigation - shape edge positions\n * @param {Object} shapePointNavigation.lefttop - left top position\n * @param {Object} shapePointNavigation.righttop - right top position\n * @param {Object} shapePointNavigation.leftbottom - lefttop position\n * @param {Object} shapePointNavigation.rightbottom - rightbottom position\n * @param {Array} shapeNeighborPointNavigation - Array to find adjacent edges.\n * @returns {Object}\n */\nfunction calculateLinePointsOutsideCanvas(\n type,\n shapePointNavigation,\n shapeNeighborPointNavigation\n) {\n let minimumPoint = 0;\n let minimumPointIndex = 0;\n forEach(shapePointNavigation, (point, index) => {\n if (point[type] < minimumPoint) {\n minimumPoint = point[type];\n minimumPointIndex = index;\n }\n });\n\n const [endPointIndex1, endPointIndex2] = shapeNeighborPointNavigation[minimumPointIndex];\n\n return {\n startPointIndex: minimumPointIndex,\n endPointIndex1,\n endPointIndex2,\n };\n}\n\n/**\n * Calculate a point line outside the canvas.\n * @param {string} type - 'x' or 'y'\n * @param {Array} shapePointNavigation - shape edge positions\n * @param {object} shapePointNavigation.lefttop - left top position\n * @param {object} shapePointNavigation.righttop - right top position\n * @param {object} shapePointNavigation.leftbottom - lefttop position\n * @param {object} shapePointNavigation.rightbottom - rightbottom position\n * @param {Object} linePointsOfOneVertexIndex - Line point of one vertex\n * @param {Object} linePointsOfOneVertexIndex.startPoint - start point index\n * @param {Object} linePointsOfOneVertexIndex.endPointIndex1 - end point index\n * @param {Object} linePointsOfOneVertexIndex.endPointIndex2 - end point index\n * @returns {Object}\n */\nfunction calculateLineAngleOfOutsideCanvas(type, shapePointNavigation, linePointsOfOneVertexIndex) {\n const { startPointIndex, endPointIndex1, endPointIndex2 } = linePointsOfOneVertexIndex;\n const horizontalVerticalAngle = type === 'x' ? 180 : 270;\n\n return map([endPointIndex1, endPointIndex2], (pointIndex) => {\n const startPoint = shapePointNavigation[startPointIndex];\n const endPoint = shapePointNavigation[pointIndex];\n const diffY = startPoint.y - endPoint.y;\n const diffX = startPoint.x - endPoint.x;\n\n return (Math.atan2(diffY, diffX) * 180) / Math.PI - horizontalVerticalAngle;\n });\n}\n\n/* eslint-disable complexity */\n/**\n * Calculate a point line outside the canvas for horizontal.\n * @param {number} startPointIndex - start point index\n * @param {boolean} flipX - flip x statux\n * @param {boolean} flipY - flip y statux\n * @returns {boolean} flipY - flip y statux\n */\nfunction isReverseLeftPositionForFlip(startPointIndex, flipX, flipY) {\n return (\n (((!flipX && flipY) || (!flipX && !flipY)) && startPointIndex === 0) ||\n (((flipX && flipY) || (flipX && !flipY)) && startPointIndex === 1) ||\n (((!flipX && !flipY) || (!flipX && flipY)) && startPointIndex === 2) ||\n (((flipX && !flipY) || (flipX && flipY)) && startPointIndex === 3)\n );\n}\n/* eslint-enable complexity */\n\n/* eslint-disable complexity */\n/**\n * Calculate a point line outside the canvas for vertical.\n * @param {number} startPointIndex - start point index\n * @param {boolean} flipX - flip x statux\n * @param {boolean} flipY - flip y statux\n * @returns {boolean} flipY - flip y statux\n */\nfunction isReverseTopPositionForFlip(startPointIndex, flipX, flipY) {\n return (\n (((flipX && !flipY) || (!flipX && !flipY)) && startPointIndex === 0) ||\n (((!flipX && !flipY) || (flipX && !flipY)) && startPointIndex === 1) ||\n (((flipX && flipY) || (!flipX && flipY)) && startPointIndex === 2) ||\n (((!flipX && flipY) || (flipX && flipY)) && startPointIndex === 3)\n );\n}\n/* eslint-enable complexity */\n\n/**\n * Shape edge points\n * @param {fabric.Object} shapeObj - Selected shape object on canvas\n * @returns {Array} shapeEdgePoint - shape edge positions\n */\nfunction getShapeEdgePoint(shapeObj) {\n return [\n shapeObj.getPointByOrigin('left', 'top'),\n shapeObj.getPointByOrigin('right', 'top'),\n shapeObj.getPointByOrigin('left', 'bottom'),\n shapeObj.getPointByOrigin('right', 'bottom'),\n ];\n}\n\n/**\n * Rotated shape dimension\n * @param {fabric.Object} shapeObj - Shape object\n * @returns {Object} Rotated shape dimension\n */\nfunction getRotatedDimension(shapeObj) {\n const [{ x: ax, y: ay }, { x: bx, y: by }, { x: cx, y: cy }, { x: dx, y: dy }] =\n getShapeEdgePoint(shapeObj);\n\n const left = Math.min(ax, bx, cx, dx);\n const top = Math.min(ay, by, cy, dy);\n const right = Math.max(ax, bx, cx, dx);\n const bottom = Math.max(ay, by, cy, dy);\n\n return {\n left,\n top,\n right,\n bottom,\n width: right - left,\n height: bottom - top,\n };\n}\n\n/**\n * Make fill image\n * @param {HTMLImageElement} copiedCanvasElement - html image element\n * @param {number} currentCanvasImageAngle - current canvas angle\n * @param {Array} filterOption - filter option\n * @returns {fabric.Image}\n * @private\n */\nfunction makeFillImage(copiedCanvasElement, currentCanvasImageAngle, filterOption) {\n const fillImage = new fabric.Image(copiedCanvasElement);\n\n forEach(extend({}, ...filterOption), (value, key) => {\n const fabricFilterClassName = capitalizeString(key);\n const filter = new fabric.Image.filters[fabricFilterClassName]({\n [FILTER_OPTION_MAP[key]]: value,\n });\n fillImage.filters.push(filter);\n });\n fillImage.applyFilters();\n\n setCustomProperty(fillImage, {\n originalAngle: currentCanvasImageAngle,\n fillImageMaxSize: Math.max(fillImage.width, fillImage.height),\n });\n resizeHelper.adjustOriginToCenter(fillImage);\n\n return fillImage;\n}\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Image zoom module (start zoom, end zoom)\n */\nimport fabric from 'fabric';\nimport Component from '@/interface/component';\nimport { clamp } from '@/util';\nimport { componentNames, eventNames, keyCodes, zoomModes } from '@/consts';\n\nconst MOUSE_MOVE_THRESHOLD = 10;\nconst DEFAULT_SCROLL_OPTION = {\n left: 0,\n top: 0,\n width: 0,\n height: 0,\n stroke: '#000000',\n strokeWidth: 0,\n fill: '#000000',\n opacity: 0.4,\n evented: false,\n selectable: false,\n hoverCursor: 'auto',\n};\nconst DEFAULT_VERTICAL_SCROLL_RATIO = {\n SIZE: 0.0045,\n MARGIN: 0.003,\n BORDER_RADIUS: 0.003,\n};\nconst DEFAULT_HORIZONTAL_SCROLL_RATIO = {\n SIZE: 0.0066,\n MARGIN: 0.0044,\n BORDER_RADIUS: 0.003,\n};\nconst DEFAULT_ZOOM_LEVEL = 1.0;\nconst {\n ZOOM_CHANGED,\n ADD_TEXT,\n TEXT_EDITING,\n OBJECT_MODIFIED,\n KEY_DOWN,\n KEY_UP,\n HAND_STARTED,\n HAND_STOPPED,\n} = eventNames;\n\n/**\n * Zoom components\n * @param {Graphics} graphics - Graphics instance\n * @extends {Component}\n * @class Zoom\n * @ignore\n */\nclass Zoom extends Component {\n constructor(graphics) {\n super(componentNames.ZOOM, graphics);\n\n /**\n * zoomArea\n * @type {?fabric.Rect}\n * @private\n */\n this.zoomArea = null;\n\n /**\n * Start point of zoom area\n * @type {?{x: number, y: number}}\n */\n this._startPoint = null;\n\n /**\n * Center point of every zoom\n * @type {Array.<{prevZoomLevel: number, zoomLevel: number, x: number, y: number}>}\n */\n this._centerPoints = [];\n\n /**\n * Zoom level (default: 100%(1.0), max: 400%(4.0))\n * @type {number}\n */\n this.zoomLevel = DEFAULT_ZOOM_LEVEL;\n\n /**\n * Zoom mode ('normal', 'zoom', 'hand')\n * @type {string}\n */\n this.zoomMode = zoomModes.DEFAULT;\n\n /**\n * Listeners\n * @type {Object.}\n * @private\n */\n this._listeners = {\n startZoom: this._onMouseDownWithZoomMode.bind(this),\n moveZoom: this._onMouseMoveWithZoomMode.bind(this),\n stopZoom: this._onMouseUpWithZoomMode.bind(this),\n startHand: this._onMouseDownWithHandMode.bind(this),\n moveHand: this._onMouseMoveWithHandMode.bind(this),\n stopHand: this._onMouseUpWithHandMode.bind(this),\n zoomChanged: this._changeScrollState.bind(this),\n keydown: this._startHandModeWithSpaceBar.bind(this),\n keyup: this._endHandModeWithSpaceBar.bind(this),\n };\n\n const canvas = this.getCanvas();\n\n /**\n * Width:Height ratio (ex. width=1.5, height=1 -> aspectRatio=1.5)\n * @private\n */\n this.aspectRatio = canvas.width / canvas.height;\n\n /**\n * vertical scroll bar\n * @type {fabric.Rect}\n * @private\n */\n this._verticalScroll = new fabric.Rect(DEFAULT_SCROLL_OPTION);\n\n /**\n * horizontal scroll bar\n * @type {fabric.Rect}\n * @private\n */\n this._horizontalScroll = new fabric.Rect(DEFAULT_SCROLL_OPTION);\n\n canvas.on(ZOOM_CHANGED, this._listeners.zoomChanged);\n\n this.graphics.on(ADD_TEXT, this._startTextEditingHandler.bind(this));\n this.graphics.on(TEXT_EDITING, this._startTextEditingHandler.bind(this));\n this.graphics.on(OBJECT_MODIFIED, this._stopTextEditingHandler.bind(this));\n }\n\n /**\n * Attach zoom keyboard events\n */\n attachKeyboardZoomEvents() {\n fabric.util.addListener(document, KEY_DOWN, this._listeners.keydown);\n fabric.util.addListener(document, KEY_UP, this._listeners.keyup);\n }\n\n /**\n * Detach zoom keyboard events\n */\n detachKeyboardZoomEvents() {\n fabric.util.removeListener(document, KEY_DOWN, this._listeners.keydown);\n fabric.util.removeListener(document, KEY_UP, this._listeners.keyup);\n }\n\n /**\n * Handler when you started editing text\n * @private\n */\n _startTextEditingHandler() {\n this.isTextEditing = true;\n }\n\n /**\n * Handler when you stopped editing text\n * @private\n */\n _stopTextEditingHandler() {\n this.isTextEditing = false;\n }\n\n /**\n * Handler who turns on hand mode when the space bar is down\n * @param {KeyboardEvent} e - Event object\n * @private\n */\n _startHandModeWithSpaceBar(e) {\n if (this.withSpace || this.isTextEditing) {\n return;\n }\n\n if (e.keyCode === keyCodes.SPACE) {\n this.withSpace = true;\n this.startHandMode();\n }\n }\n\n /**\n * Handler who turns off hand mode when space bar is up\n * @param {KeyboardEvent} e - Event object\n * @private\n */\n _endHandModeWithSpaceBar(e) {\n if (e.keyCode === keyCodes.SPACE) {\n this.withSpace = false;\n this.endHandMode();\n }\n }\n\n /**\n * Start zoom-in mode\n */\n startZoomInMode() {\n if (this.zoomArea) {\n return;\n }\n this.endHandMode();\n this.zoomMode = zoomModes.ZOOM;\n\n const canvas = this.getCanvas();\n\n this._changeObjectsEventedState(false);\n\n this.zoomArea = new fabric.Rect({\n left: 0,\n top: 0,\n width: 0.5,\n height: 0.5,\n stroke: 'black',\n strokeWidth: 1,\n fill: 'transparent',\n hoverCursor: 'zoom-in',\n });\n\n canvas.discardActiveObject();\n canvas.add(this.zoomArea);\n canvas.on('mouse:down', this._listeners.startZoom);\n canvas.selection = false;\n canvas.defaultCursor = 'zoom-in';\n }\n\n /**\n * End zoom-in mode\n */\n endZoomInMode() {\n this.zoomMode = zoomModes.DEFAULT;\n\n const canvas = this.getCanvas();\n const { startZoom, moveZoom, stopZoom } = this._listeners;\n\n canvas.selection = true;\n canvas.defaultCursor = 'auto';\n canvas.off({\n 'mouse:down': startZoom,\n 'mouse:move': moveZoom,\n 'mouse:up': stopZoom,\n });\n\n this._changeObjectsEventedState(true);\n\n canvas.remove(this.zoomArea);\n this.zoomArea = null;\n }\n\n /**\n * Start zoom drawing mode\n */\n start() {\n this.zoomArea = null;\n this._startPoint = null;\n this._startHandPoint = null;\n }\n\n /**\n * Stop zoom drawing mode\n */\n end() {\n this.endZoomInMode();\n this.endHandMode();\n }\n\n /**\n * Start hand mode\n */\n startHandMode() {\n this.endZoomInMode();\n this.zoomMode = zoomModes.HAND;\n\n const canvas = this.getCanvas();\n\n this._changeObjectsEventedState(false);\n\n canvas.discardActiveObject();\n canvas.off('mouse:down', this._listeners.startHand);\n canvas.on('mouse:down', this._listeners.startHand);\n canvas.selection = false;\n canvas.defaultCursor = 'grab';\n\n canvas.fire(HAND_STARTED);\n }\n\n /**\n * Stop hand mode\n */\n endHandMode() {\n this.zoomMode = zoomModes.DEFAULT;\n const canvas = this.getCanvas();\n\n this._changeObjectsEventedState(true);\n\n canvas.off('mouse:down', this._listeners.startHand);\n canvas.selection = true;\n canvas.defaultCursor = 'auto';\n\n this._startHandPoint = null;\n\n canvas.fire(HAND_STOPPED);\n }\n\n /**\n * onMousedown handler in fabric canvas\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onMouseDownWithZoomMode({ target, e }) {\n if (target) {\n return;\n }\n\n const canvas = this.getCanvas();\n\n canvas.selection = false;\n\n this._startPoint = canvas.getPointer(e);\n this.zoomArea.set({ width: 0, height: 0 });\n\n const { moveZoom, stopZoom } = this._listeners;\n canvas.on({\n 'mouse:move': moveZoom,\n 'mouse:up': stopZoom,\n });\n }\n\n /**\n * onMousemove handler in fabric canvas\n * @param {{e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onMouseMoveWithZoomMode({ e }) {\n const canvas = this.getCanvas();\n const pointer = canvas.getPointer(e);\n const { x, y } = pointer;\n const { zoomArea, _startPoint } = this;\n const deltaX = Math.abs(x - _startPoint.x);\n const deltaY = Math.abs(y - _startPoint.y);\n\n if (deltaX + deltaY > MOUSE_MOVE_THRESHOLD) {\n canvas.remove(zoomArea);\n zoomArea.set(this._calcRectDimensionFromPoint(x, y));\n canvas.add(zoomArea);\n }\n }\n\n /**\n * Get rect dimension setting from Canvas-Mouse-Position(x, y)\n * @param {number} x - Canvas-Mouse-Position x\n * @param {number} y - Canvas-Mouse-Position Y\n * @returns {{left: number, top: number, width: number, height: number}}\n * @private\n */\n _calcRectDimensionFromPoint(x, y) {\n const canvas = this.getCanvas();\n const canvasWidth = canvas.getWidth();\n const canvasHeight = canvas.getHeight();\n const { x: startX, y: startY } = this._startPoint;\n const { min } = Math;\n\n const left = min(startX, x);\n const top = min(startY, y);\n const width = clamp(x, startX, canvasWidth) - left; // (startX <= x(mouse) <= canvasWidth) - left\n const height = clamp(y, startY, canvasHeight) - top; // (startY <= y(mouse) <= canvasHeight) - top\n\n return { left, top, width, height };\n }\n\n /**\n * onMouseup handler in fabric canvas\n * @private\n */\n _onMouseUpWithZoomMode() {\n let { zoomLevel } = this;\n const { zoomArea } = this;\n const { moveZoom, stopZoom } = this._listeners;\n const canvas = this.getCanvas();\n const center = this._getCenterPoint();\n const { x, y } = center;\n\n if (!this._isMaxZoomLevel()) {\n this._centerPoints.push({\n x,\n y,\n prevZoomLevel: zoomLevel,\n zoomLevel: zoomLevel + 1,\n });\n zoomLevel += 1;\n canvas.zoomToPoint({ x, y }, zoomLevel);\n\n this._fireZoomChanged(canvas, zoomLevel);\n\n this.zoomLevel = zoomLevel;\n }\n\n canvas.off({\n 'mouse:move': moveZoom,\n 'mouse:up': stopZoom,\n });\n\n canvas.remove(zoomArea);\n this._startPoint = null;\n }\n\n /**\n * Get center point\n * @returns {{x: number, y: number}}\n * @private\n */\n _getCenterPoint() {\n const { left, top, width, height } = this.zoomArea;\n const { x, y } = this._startPoint;\n const { aspectRatio } = this;\n\n if (width < MOUSE_MOVE_THRESHOLD && height < MOUSE_MOVE_THRESHOLD) {\n return { x, y };\n }\n\n return width > height\n ? { x: left + (aspectRatio * height) / 2, y: top + height / 2 }\n : { x: left + width / 2, y: top + width / aspectRatio / 2 };\n }\n\n /**\n * Zoom the canvas\n * @param {{x: number, y: number}} center - center of zoom\n * @param {?number} zoomLevel - zoom level\n */\n zoom({ x, y }, zoomLevel = this.zoomLevel) {\n const canvas = this.getCanvas();\n const centerPoints = this._centerPoints;\n\n for (let i = centerPoints.length - 1; i >= 0; i -= 1) {\n if (centerPoints[i].zoomLevel < zoomLevel) {\n break;\n }\n\n const { x: prevX, y: prevY, prevZoomLevel } = centerPoints.pop();\n\n canvas.zoomToPoint({ x: prevX, y: prevY }, prevZoomLevel);\n this.zoomLevel = prevZoomLevel;\n }\n\n canvas.zoomToPoint({ x, y }, zoomLevel);\n if (!this._isDefaultZoomLevel(zoomLevel)) {\n this._centerPoints.push({\n x,\n y,\n zoomLevel,\n prevZoomLevel: this.zoomLevel,\n });\n }\n this.zoomLevel = zoomLevel;\n\n this._fireZoomChanged(canvas, zoomLevel);\n }\n\n /**\n * Zoom out one step\n */\n zoomOut() {\n const centerPoints = this._centerPoints;\n\n if (!centerPoints.length) {\n return;\n }\n\n const canvas = this.getCanvas();\n const point = centerPoints.pop();\n const { x, y, prevZoomLevel } = point;\n\n if (this._isDefaultZoomLevel(prevZoomLevel)) {\n canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);\n } else {\n canvas.zoomToPoint({ x, y }, prevZoomLevel);\n }\n\n this.zoomLevel = prevZoomLevel;\n\n this._fireZoomChanged(canvas, this.zoomLevel);\n }\n\n /**\n * Zoom reset\n */\n resetZoom() {\n const canvas = this.getCanvas();\n\n canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);\n\n this.zoomLevel = DEFAULT_ZOOM_LEVEL;\n this._centerPoints = [];\n\n this._fireZoomChanged(canvas, this.zoomLevel);\n }\n\n /**\n * Whether zoom level is max (5.0)\n * @returns {boolean}\n * @private\n */\n _isMaxZoomLevel() {\n return this.zoomLevel >= 5.0;\n }\n\n /**\n * Move point of zoom\n * @param {{x: number, y: number}} delta - move amount\n * @private\n */\n _movePointOfZoom({ x: deltaX, y: deltaY }) {\n const centerPoints = this._centerPoints;\n\n if (!centerPoints.length) {\n return;\n }\n\n const canvas = this.getCanvas();\n const { zoomLevel } = this;\n\n const point = centerPoints.pop();\n const { x: originX, y: originY, prevZoomLevel } = point;\n const x = originX - deltaX;\n const y = originY - deltaY;\n\n canvas.zoomToPoint({ x: originX, y: originY }, prevZoomLevel);\n canvas.zoomToPoint({ x, y }, zoomLevel);\n centerPoints.push({ x, y, prevZoomLevel, zoomLevel });\n\n this._fireZoomChanged(canvas, zoomLevel);\n }\n\n /**\n * onMouseDown handler in fabric canvas\n * @param {{target: fabric.Object, e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onMouseDownWithHandMode({ target, e }) {\n if (target) {\n return;\n }\n\n const canvas = this.getCanvas();\n\n if (this.zoomLevel <= DEFAULT_ZOOM_LEVEL) {\n return;\n }\n\n canvas.selection = false;\n\n this._startHandPoint = canvas.getPointer(e);\n\n const { moveHand, stopHand } = this._listeners;\n canvas.on({\n 'mouse:move': moveHand,\n 'mouse:up': stopHand,\n });\n }\n\n /**\n * onMouseMove handler in fabric canvas\n * @param {{e: MouseEvent}} fEvent - Fabric event\n * @private\n */\n _onMouseMoveWithHandMode({ e }) {\n const canvas = this.getCanvas();\n const { x, y } = canvas.getPointer(e);\n const deltaX = x - this._startHandPoint.x;\n const deltaY = y - this._startHandPoint.y;\n\n this._movePointOfZoom({ x: deltaX, y: deltaY });\n }\n\n /**\n * onMouseUp handler in fabric canvas\n * @private\n */\n _onMouseUpWithHandMode() {\n const canvas = this.getCanvas();\n const { moveHand, stopHand } = this._listeners;\n\n canvas.off({\n 'mouse:move': moveHand,\n 'mouse:up': stopHand,\n });\n\n this._startHandPoint = null;\n }\n\n /**\n * onChangeZoom handler in fabric canvas\n * @private\n */\n _changeScrollState({ viewport, zoomLevel }) {\n const canvas = this.getCanvas();\n\n canvas.remove(this._verticalScroll);\n canvas.remove(this._horizontalScroll);\n\n if (this._isDefaultZoomLevel(zoomLevel)) {\n return;\n }\n\n const canvasWidth = canvas.width;\n const canvasHeight = canvas.height;\n\n const { tl, tr, bl } = viewport;\n const viewportWidth = tr.x - tl.x;\n const viewportHeight = bl.y - tl.y;\n\n const horizontalScrollWidth = (viewportWidth * viewportWidth) / canvasWidth;\n const horizontalScrollHeight = viewportHeight * DEFAULT_HORIZONTAL_SCROLL_RATIO.SIZE;\n const horizontalScrollLeft = clamp(\n tl.x + (tl.x / canvasWidth) * viewportWidth,\n tl.x,\n tr.x - horizontalScrollWidth\n );\n const horizontalScrollMargin = viewportHeight * DEFAULT_HORIZONTAL_SCROLL_RATIO.MARGIN;\n const horizontalScrollBorderRadius =\n viewportHeight * DEFAULT_HORIZONTAL_SCROLL_RATIO.BORDER_RADIUS;\n\n this._horizontalScroll.set({\n left: horizontalScrollLeft,\n top: bl.y - horizontalScrollHeight - horizontalScrollMargin,\n width: horizontalScrollWidth,\n height: horizontalScrollHeight,\n rx: horizontalScrollBorderRadius,\n ry: horizontalScrollBorderRadius,\n });\n\n const verticalScrollWidth = viewportWidth * DEFAULT_VERTICAL_SCROLL_RATIO.SIZE;\n const verticalScrollHeight = (viewportHeight * viewportHeight) / canvasHeight;\n const verticalScrollTop = clamp(\n tl.y + (tl.y / canvasHeight) * viewportHeight,\n tr.y,\n bl.y - verticalScrollHeight\n );\n const verticalScrollMargin = viewportWidth * DEFAULT_VERTICAL_SCROLL_RATIO.MARGIN;\n const verticalScrollBorderRadius = viewportWidth * DEFAULT_VERTICAL_SCROLL_RATIO.BORDER_RADIUS;\n\n this._verticalScroll.set({\n left: tr.x - verticalScrollWidth - verticalScrollMargin,\n top: verticalScrollTop,\n width: verticalScrollWidth,\n height: verticalScrollHeight,\n rx: verticalScrollBorderRadius,\n ry: verticalScrollBorderRadius,\n });\n\n this._addScrollBar();\n }\n\n /**\n * Change objects 'evented' state\n * @param {boolean} [evented=true] - objects 'evented' state\n */\n _changeObjectsEventedState(evented = true) {\n const canvas = this.getCanvas();\n\n canvas.forEachObject((obj) => {\n // {@link http://fabricjs.com/docs/fabric.Object.html#evented}\n obj.evented = evented;\n });\n }\n\n /**\n * Add scroll bar and set remove timer\n */\n _addScrollBar() {\n const canvas = this.getCanvas();\n\n canvas.add(this._horizontalScroll);\n canvas.add(this._verticalScroll);\n\n if (this.scrollBarTid) {\n clearTimeout(this.scrollBarTid);\n }\n\n this.scrollBarTid = setTimeout(() => {\n canvas.remove(this._horizontalScroll);\n canvas.remove(this._verticalScroll);\n }, 3000);\n }\n\n /**\n * Check zoom level is default zoom level (1.0)\n * @param {number} zoomLevel - zoom level\n * @returns {boolean} - whether zoom level is 1.0\n */\n _isDefaultZoomLevel(zoomLevel) {\n return zoomLevel === DEFAULT_ZOOM_LEVEL;\n }\n\n /**\n * Fire 'zoomChanged' event\n * @param {fabric.Canvas} canvas - fabric canvas\n * @param {number} zoomLevel - 'zoomChanged' event params\n */\n _fireZoomChanged(canvas, zoomLevel) {\n canvas.fire(ZOOM_CHANGED, { viewport: canvas.calcViewportBoundaries(), zoomLevel });\n }\n\n /**\n * Get zoom mode\n */\n get mode() {\n return this.zoomMode;\n }\n}\n\nexport default Zoom;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview CropperDrawingMode class\n */\nimport DrawingMode from '@/interface/drawingMode';\nimport { drawingModes, componentNames as components } from '@/consts';\n\n/**\n * CropperDrawingMode class\n * @class\n * @ignore\n */\nclass CropperDrawingMode extends DrawingMode {\n constructor() {\n super(drawingModes.CROPPER);\n }\n\n /**\n * start this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n start(graphics) {\n const cropper = graphics.getComponent(components.CROPPER);\n cropper.start();\n }\n\n /**\n * stop this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n end(graphics) {\n const cropper = graphics.getComponent(components.CROPPER);\n cropper.end();\n }\n}\n\nexport default CropperDrawingMode;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview FreeDrawingMode class\n */\nimport DrawingMode from '@/interface/drawingMode';\nimport { drawingModes, componentNames as components } from '@/consts';\n\n/**\n * FreeDrawingMode class\n * @class\n * @ignore\n */\nclass FreeDrawingMode extends DrawingMode {\n constructor() {\n super(drawingModes.FREE_DRAWING);\n }\n\n /**\n * start this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @param {{width: ?number, color: ?string}} [options] - Brush width & color\n * @override\n */\n start(graphics, options) {\n const freeDrawing = graphics.getComponent(components.FREE_DRAWING);\n freeDrawing.start(options);\n }\n\n /**\n * stop this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n end(graphics) {\n const freeDrawing = graphics.getComponent(components.FREE_DRAWING);\n freeDrawing.end();\n }\n}\n\nexport default FreeDrawingMode;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview LineDrawingMode class\n */\nimport DrawingMode from '@/interface/drawingMode';\nimport { drawingModes, componentNames as components } from '@/consts';\n\n/**\n * LineDrawingMode class\n * @class\n * @ignore\n */\nclass LineDrawingMode extends DrawingMode {\n constructor() {\n super(drawingModes.LINE_DRAWING);\n }\n\n /**\n * start this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @param {{width: ?number, color: ?string}} [options] - Brush width & color\n * @override\n */\n start(graphics, options) {\n const lineDrawing = graphics.getComponent(components.LINE);\n lineDrawing.start(options);\n }\n\n /**\n * stop this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n end(graphics) {\n const lineDrawing = graphics.getComponent(components.LINE);\n lineDrawing.end();\n }\n}\n\nexport default LineDrawingMode;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview ShapeDrawingMode class\n */\nimport DrawingMode from '@/interface/drawingMode';\nimport { drawingModes, componentNames as components } from '@/consts';\n\n/**\n * ShapeDrawingMode class\n * @class\n * @ignore\n */\nclass ShapeDrawingMode extends DrawingMode {\n constructor() {\n super(drawingModes.SHAPE);\n }\n\n /**\n * start this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n start(graphics) {\n const shape = graphics.getComponent(components.SHAPE);\n shape.start();\n }\n\n /**\n * stop this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n end(graphics) {\n const shape = graphics.getComponent(components.SHAPE);\n shape.end();\n }\n}\n\nexport default ShapeDrawingMode;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview TextDrawingMode class\n */\nimport DrawingMode from '@/interface/drawingMode';\nimport { drawingModes, componentNames as components } from '@/consts';\n\n/**\n * TextDrawingMode class\n * @class\n * @ignore\n */\nclass TextDrawingMode extends DrawingMode {\n constructor() {\n super(drawingModes.TEXT);\n }\n\n /**\n * start this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n start(graphics) {\n const text = graphics.getComponent(components.TEXT);\n text.start();\n }\n\n /**\n * stop this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n end(graphics) {\n const text = graphics.getComponent(components.TEXT);\n text.end();\n }\n}\n\nexport default TextDrawingMode;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview IconDrawingMode class\n */\nimport DrawingMode from '@/interface/drawingMode';\nimport { drawingModes, componentNames as components } from '@/consts';\n\n/**\n * IconDrawingMode class\n * @class\n * @ignore\n */\nclass IconDrawingMode extends DrawingMode {\n constructor() {\n super(drawingModes.ICON);\n }\n\n /**\n * start this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n start(graphics) {\n const icon = graphics.getComponent(components.ICON);\n icon.start();\n }\n\n /**\n * stop this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n end(graphics) {\n const icon = graphics.getComponent(components.ICON);\n icon.end();\n }\n}\n\nexport default IconDrawingMode;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview ZoomDrawingMode class\n */\nimport DrawingMode from '@/interface/drawingMode';\nimport { drawingModes, componentNames as components } from '@/consts';\n\n/**\n * ZoomDrawingMode class\n * @class\n * @ignore\n */\nclass ZoomDrawingMode extends DrawingMode {\n constructor() {\n super(drawingModes.ZOOM);\n }\n\n /**\n * start this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n start(graphics) {\n const zoom = graphics.getComponent(components.ZOOM);\n\n zoom.start();\n }\n\n /**\n * stop this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n end(graphics) {\n const zoom = graphics.getComponent(components.ZOOM);\n\n zoom.end();\n }\n}\n\nexport default ZoomDrawingMode;\n","import { Promise } from '@/util';\nimport Component from '@/interface/component';\nimport { componentNames } from '@/consts';\n\n/**\n * Resize components\n * @param {Graphics} graphics - Graphics instance\n * @extends {Component}\n * @class Resize\n * @ignore\n */\nclass Resize extends Component {\n constructor(graphics) {\n super(componentNames.RESIZE, graphics);\n\n /**\n * Current dimensions\n * @type {Object}\n * @private\n */\n this._dimensions = null;\n\n /**\n * Original dimensions\n * @type {Object}\n * @private\n */\n this._originalDimensions = null;\n }\n\n /**\n * Get current dimensions\n * @returns {object}\n */\n getCurrentDimensions() {\n const canvasImage = this.getCanvasImage();\n if (!this._dimensions && canvasImage) {\n const { width, height } = canvasImage;\n this._dimensions = { width, height };\n }\n\n return this._dimensions;\n }\n\n /**\n * Get original dimensions\n * @returns {object}\n */\n getOriginalDimensions() {\n return this._originalDimensions;\n }\n\n /**\n * Set original dimensions\n * @param {object} dimensions - Dimensions\n */\n setOriginalDimensions(dimensions) {\n this._originalDimensions = dimensions;\n }\n\n /**\n * Resize Image\n * @param {Object} dimensions - Resize dimensions\n * @returns {Promise}\n */\n resize(dimensions) {\n const canvasImage = this.getCanvasImage();\n const { width, height, scaleX, scaleY } = canvasImage;\n const { width: dimensionsWidth, height: dimensionsHeight } = dimensions;\n\n const scaleValues = {\n scaleX: dimensionsWidth ? dimensionsWidth / width : scaleX,\n scaleY: dimensionsHeight ? dimensionsHeight / height : scaleY,\n };\n\n if (scaleX !== scaleValues.scaleX || scaleY !== scaleValues.scaleY) {\n canvasImage.set(scaleValues).setCoords();\n\n this._dimensions = {\n width: canvasImage.width * canvasImage.scaleX,\n height: canvasImage.height * canvasImage.scaleY,\n };\n }\n\n this.adjustCanvasDimensionBase();\n\n return Promise.resolve();\n }\n\n /**\n * Start resizing\n */\n start() {\n const dimensions = this.getCurrentDimensions();\n this.setOriginalDimensions(dimensions);\n }\n\n /**\n * End resizing\n */\n end() {}\n}\n\nexport default Resize;\n","import DrawingMode from '@/interface/drawingMode';\nimport { drawingModes, componentNames as components } from '@/consts';\n\n/**\n * ResizeDrawingMode class\n * @class\n * @ignore\n */\nclass ResizeDrawingMode extends DrawingMode {\n constructor() {\n super(drawingModes.RESIZE);\n }\n\n /**\n * start this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n start(graphics) {\n const resize = graphics.getComponent(components.RESIZE);\n resize.start();\n }\n\n /**\n * stop this drawing mode\n * @param {Graphics} graphics - Graphics instance\n * @override\n */\n end(graphics) {\n const resize = graphics.getComponent(components.RESIZE);\n resize.end();\n }\n}\n\nexport default ResizeDrawingMode;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Add an icon\n */\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { componentNames, commandNames } from '@/consts';\n\nconst { ICON } = componentNames;\n\nconst command = {\n name: commandNames.ADD_ICON,\n\n /**\n * Add an icon\n * @param {Graphics} graphics - Graphics instance\n * @param {string} type - Icon type ('arrow', 'cancel', custom icon name)\n * @param {Object} options - Icon options\n * @param {string} [options.fill] - Icon foreground color\n * @param {string} [options.left] - Icon x position\n * @param {string} [options.top] - Icon y position\n * @returns {Promise}\n */\n execute(graphics, type, options) {\n const iconComp = graphics.getComponent(ICON);\n\n return iconComp.add(type, options).then((objectProps) => {\n this.undoData.object = graphics.getObject(objectProps.id);\n\n return objectProps;\n });\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n graphics.remove(this.undoData.object);\n\n return Promise.resolve();\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Add an image object\n */\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { commandNames } from '@/consts';\n\nconst command = {\n name: commandNames.ADD_IMAGE_OBJECT,\n\n /**\n * Add an image object\n * @param {Graphics} graphics - Graphics instance\n * @param {string} imgUrl - Image url to make object\n * @returns {Promise}\n */\n execute(graphics, imgUrl) {\n return graphics.addImageObject(imgUrl).then((objectProps) => {\n this.undoData.object = graphics.getObject(objectProps.id);\n\n return objectProps;\n });\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n graphics.remove(this.undoData.object);\n\n return Promise.resolve();\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Add an object\n */\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { commandNames, rejectMessages } from '@/consts';\n\nconst command = {\n name: commandNames.ADD_OBJECT,\n\n /**\n * Add an object\n * @param {Graphics} graphics - Graphics instance\n * @param {Object} object - Fabric object\n * @returns {Promise}\n */\n execute(graphics, object) {\n return new Promise((resolve, reject) => {\n if (!graphics.contains(object)) {\n graphics.add(object);\n resolve(object);\n } else {\n reject(rejectMessages.addedObject);\n }\n });\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @param {Object} object - Fabric object\n * @returns {Promise}\n */\n undo(graphics, object) {\n return new Promise((resolve, reject) => {\n if (graphics.contains(object)) {\n graphics.remove(object);\n resolve(object);\n } else {\n reject(rejectMessages.noObject);\n }\n });\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Add a shape\n */\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { componentNames, commandNames } from '@/consts';\n\nconst { SHAPE } = componentNames;\n\nconst command = {\n name: commandNames.ADD_SHAPE,\n\n /**\n * Add a shape\n * @param {Graphics} graphics - Graphics instance\n * @param {string} type - Shape type (ex: 'rect', 'circle', 'triangle')\n * @param {Object} options - Shape options\n * @param {string} [options.fill] - Shape foreground color (ex: '#fff', 'transparent')\n * @param {string} [options.stroke] - Shape outline color\n * @param {number} [options.strokeWidth] - Shape outline width\n * @param {number} [options.width] - Width value (When type option is 'rect', this options can use)\n * @param {number} [options.height] - Height value (When type option is 'rect', this options can use)\n * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)\n * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)\n * @param {number} [options.left] - Shape x position\n * @param {number} [options.top] - Shape y position\n * @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not\n * @returns {Promise}\n */\n execute(graphics, type, options) {\n const shapeComp = graphics.getComponent(SHAPE);\n\n return shapeComp.add(type, options).then((objectProps) => {\n const { id } = objectProps;\n\n this.undoData.object = graphics.getObject(id);\n\n return objectProps;\n });\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n graphics.remove(this.undoData.object);\n\n return Promise.resolve();\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Add a text object\n */\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { componentNames, commandNames, rejectMessages } from '@/consts';\nimport {\n setCachedUndoDataForDimension,\n makeSelectionUndoData,\n makeSelectionUndoDatum,\n} from '@/helper/selectionModifyHelper';\n\nconst { TEXT } = componentNames;\n\nconst command = {\n name: commandNames.ADD_TEXT,\n\n /**\n * Add a text object\n * @param {Graphics} graphics - Graphics instance\n * @param {string} text - Initial input text\n * @param {Object} [options] Options for text styles\n * @param {Object} [options.styles] Initial styles\n * @param {string} [options.styles.fill] Color\n * @param {string} [options.styles.fontFamily] Font type for text\n * @param {number} [options.styles.fontSize] Size\n * @param {string} [options.styles.fontStyle] Type of inclination (normal / italic)\n * @param {string} [options.styles.fontWeight] Type of thicker or thinner looking (normal / bold)\n * @param {string} [options.styles.textAlign] Type of text align (left / center / right)\n * @param {string} [options.styles.textDecoration] Type of line (underline / line-through / overline)\n * @param {{x: number, y: number}} [options.position] - Initial position\n * @returns {Promise}\n */\n execute(graphics, text, options) {\n const textComp = graphics.getComponent(TEXT);\n\n if (this.undoData.object) {\n const undoObject = this.undoData.object;\n\n return new Promise((resolve, reject) => {\n if (!graphics.contains(undoObject)) {\n graphics.add(undoObject);\n resolve(undoObject);\n } else {\n reject(rejectMessages.redo);\n }\n });\n }\n\n return textComp.add(text, options).then((objectProps) => {\n const { id } = objectProps;\n const textObject = graphics.getObject(id);\n\n this.undoData.object = textObject;\n\n setCachedUndoDataForDimension(\n makeSelectionUndoData(textObject, () => makeSelectionUndoDatum(id, textObject, false))\n );\n\n return objectProps;\n });\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n graphics.remove(this.undoData.object);\n\n return Promise.resolve();\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Apply a filter into an image\n */\nimport snippet from 'tui-code-snippet';\nimport commandFactory from '@/factory/command';\nimport { componentNames, rejectMessages, commandNames } from '@/consts';\n\nconst { FILTER } = componentNames;\n\n/**\n * Cached data for undo\n * @type {Object}\n */\nlet cachedUndoDataForSilent = null;\n\n/**\n * Make undoData\n * @param {string} type - Filter type\n * @param {Object} prevfilterOption - prev Filter options\n * @param {Object} options - Filter options\n * @returns {object} - undo data\n */\nfunction makeUndoData(type, prevfilterOption, options) {\n const undoData = {};\n\n if (type === 'mask') {\n undoData.object = options.mask;\n }\n\n undoData.options = prevfilterOption;\n\n return undoData;\n}\n\nconst command = {\n name: commandNames.APPLY_FILTER,\n\n /**\n * Apply a filter into an image\n * @param {Graphics} graphics - Graphics instance\n * @param {string} type - Filter type\n * @param {Object} options - Filter options\n * @param {number} options.maskObjId - masking image object id\n * @param {boolean} isSilent - is silent execution or not\n * @returns {Promise}\n */\n execute(graphics, type, options, isSilent) {\n const filterComp = graphics.getComponent(FILTER);\n\n if (type === 'mask') {\n const maskObj = graphics.getObject(options.maskObjId);\n\n if (!(maskObj && maskObj.isType('image'))) {\n return Promise.reject(rejectMessages.invalidParameters);\n }\n\n snippet.extend(options, { mask: maskObj });\n graphics.remove(options.mask);\n }\n if (!this.isRedo) {\n const prevfilterOption = filterComp.getOptions(type);\n const undoData = makeUndoData(type, prevfilterOption, options);\n\n cachedUndoDataForSilent = this.setUndoData(undoData, cachedUndoDataForSilent, isSilent);\n }\n\n return filterComp.add(type, options);\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @param {string} type - Filter type\n * @returns {Promise}\n */\n undo(graphics, type) {\n const filterComp = graphics.getComponent(FILTER);\n\n if (type === 'mask') {\n const mask = this.undoData.object;\n graphics.add(mask);\n graphics.setActiveObject(mask);\n\n return filterComp.remove(type);\n }\n\n // options changed case\n if (this.undoData.options) {\n return filterComp.add(type, this.undoData.options);\n }\n\n // filter added case\n return filterComp.remove(type);\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Change icon color\n */\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { componentNames, rejectMessages, commandNames } from '@/consts';\n\nconst { ICON } = componentNames;\n\nconst command = {\n name: commandNames.CHANGE_ICON_COLOR,\n\n /**\n * Change icon color\n * @param {Graphics} graphics - Graphics instance\n * @param {number} id - object id\n * @param {string} color - Color for icon\n * @returns {Promise}\n */\n execute(graphics, id, color) {\n return new Promise((resolve, reject) => {\n const iconComp = graphics.getComponent(ICON);\n const targetObj = graphics.getObject(id);\n\n if (!targetObj) {\n reject(rejectMessages.noObject);\n }\n\n this.undoData.object = targetObj;\n this.undoData.color = iconComp.getColor(targetObj);\n iconComp.setColor(color, targetObj);\n resolve();\n });\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n const iconComp = graphics.getComponent(ICON);\n const { object: icon, color } = this.undoData;\n\n iconComp.setColor(color, icon);\n\n return Promise.resolve();\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview change a shape\n */\nimport snippet from 'tui-code-snippet';\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { componentNames, rejectMessages, commandNames } from '@/consts';\n\nconst { SHAPE } = componentNames;\n\n/**\n * Cached data for undo\n * @type {Object}\n */\nlet cachedUndoDataForSilent = null;\n\n/**\n * Make undoData\n * @param {object} options - shape options\n * @param {Component} targetObj - shape component\n * @returns {object} - undo data\n */\nfunction makeUndoData(options, targetObj) {\n const undoData = {\n object: targetObj,\n options: {},\n };\n\n snippet.forEachOwnProperties(options, (value, key) => {\n undoData.options[key] = targetObj[key];\n });\n\n return undoData;\n}\n\nconst command = {\n name: commandNames.CHANGE_SHAPE,\n\n /**\n * Change a shape\n * @param {Graphics} graphics - Graphics instance\n * @param {number} id - object id\n * @param {Object} options - Shape options\n * @param {string} [options.fill] - Shape foreground color (ex: '#fff', 'transparent')\n * @param {string} [options.stroke] - Shape outline color\n * @param {number} [options.strokeWidth] - Shape outline width\n * @param {number} [options.width] - Width value (When type option is 'rect', this options can use)\n * @param {number} [options.height] - Height value (When type option is 'rect', this options can use)\n * @param {number} [options.rx] - Radius x value (When type option is 'circle', this options can use)\n * @param {number} [options.ry] - Radius y value (When type option is 'circle', this options can use)\n * @param {number} [options.left] - Shape x position\n * @param {number} [options.top] - Shape y position\n * @param {number} [options.isRegular] - Whether resizing shape has 1:1 ratio or not\n * @param {boolean} isSilent - is silent execution or not\n * @returns {Promise}\n */\n execute(graphics, id, options, isSilent) {\n const shapeComp = graphics.getComponent(SHAPE);\n const targetObj = graphics.getObject(id);\n\n if (!targetObj) {\n return Promise.reject(rejectMessages.noObject);\n }\n\n if (!this.isRedo) {\n const undoData = makeUndoData(options, targetObj);\n\n cachedUndoDataForSilent = this.setUndoData(undoData, cachedUndoDataForSilent, isSilent);\n }\n\n return shapeComp.change(targetObj, options);\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n const shapeComp = graphics.getComponent(SHAPE);\n const { object: shape, options } = this.undoData;\n\n return shapeComp.change(shape, options);\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Change a text\n */\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { componentNames, rejectMessages, commandNames } from '@/consts';\n\nconst { TEXT } = componentNames;\n\nconst command = {\n name: commandNames.CHANGE_TEXT,\n\n /**\n * Change a text\n * @param {Graphics} graphics - Graphics instance\n * @param {number} id - object id\n * @param {string} text - Changing text\n * @returns {Promise}\n */\n execute(graphics, id, text) {\n const textComp = graphics.getComponent(TEXT);\n const targetObj = graphics.getObject(id);\n\n if (!targetObj) {\n return Promise.reject(rejectMessages.noObject);\n }\n\n this.undoData.object = targetObj;\n this.undoData.text = textComp.getText(targetObj);\n\n return textComp.change(targetObj, text);\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n const textComp = graphics.getComponent(TEXT);\n const { object: textObj, text } = this.undoData;\n\n return textComp.change(textObj, text);\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Change text styles\n */\nimport snippet from 'tui-code-snippet';\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { componentNames, rejectMessages, commandNames } from '@/consts';\n\nconst { TEXT } = componentNames;\n\n/**\n * Cached data for undo\n * @type {Object}\n */\nlet cachedUndoDataForSilent = null;\n\n/**\n * Make undoData\n * @param {object} styles - text styles\n * @param {Component} targetObj - text component\n * @returns {object} - undo data\n */\nfunction makeUndoData(styles, targetObj) {\n const undoData = {\n object: targetObj,\n styles: {},\n };\n snippet.forEachOwnProperties(styles, (value, key) => {\n const undoValue = targetObj[key];\n undoData.styles[key] = undoValue;\n });\n\n return undoData;\n}\n\nconst command = {\n name: commandNames.CHANGE_TEXT_STYLE,\n\n /**\n * Change text styles\n * @param {Graphics} graphics - Graphics instance\n * @param {number} id - object id\n * @param {Object} styles - text styles\n * @param {string} [styles.fill] Color\n * @param {string} [styles.fontFamily] Font type for text\n * @param {number} [styles.fontSize] Size\n * @param {string} [styles.fontStyle] Type of inclination (normal / italic)\n * @param {string} [styles.fontWeight] Type of thicker or thinner looking (normal / bold)\n * @param {string} [styles.textAlign] Type of text align (left / center / right)\n * @param {string} [styles.textDecoration] Type of line (underline / line-through / overline)\n * @param {boolean} isSilent - is silent execution or not\n * @returns {Promise}\n */\n execute(graphics, id, styles, isSilent) {\n const textComp = graphics.getComponent(TEXT);\n const targetObj = graphics.getObject(id);\n\n if (!targetObj) {\n return Promise.reject(rejectMessages.noObject);\n }\n if (!this.isRedo) {\n const undoData = makeUndoData(styles, targetObj);\n\n cachedUndoDataForSilent = this.setUndoData(undoData, cachedUndoDataForSilent, isSilent);\n }\n\n return textComp.setStyle(targetObj, styles);\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n const textComp = graphics.getComponent(TEXT);\n const { object: textObj, styles } = this.undoData;\n\n return textComp.setStyle(textObj, styles);\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Clear all objects\n */\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { commandNames } from '@/consts';\n\nconst command = {\n name: commandNames.CLEAR_OBJECTS,\n\n /**\n * Clear all objects without background (main) image\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n execute(graphics) {\n return new Promise((resolve) => {\n this.undoData.objects = graphics.removeAll();\n resolve();\n });\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n * @ignore\n */\n undo(graphics) {\n graphics.add(this.undoData.objects);\n\n return Promise.resolve();\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Flip an image\n */\nimport commandFactory from '@/factory/command';\nimport { componentNames, commandNames } from '@/consts';\n\nconst { FLIP } = componentNames;\n\nconst command = {\n name: commandNames.FLIP_IMAGE,\n\n /**\n * flip an image\n * @param {Graphics} graphics - Graphics instance\n * @param {string} type - 'flipX' or 'flipY' or 'reset'\n * @returns {Promise}\n */\n execute(graphics, type) {\n const flipComp = graphics.getComponent(FLIP);\n\n this.undoData.setting = flipComp.getCurrentSetting();\n\n return flipComp[type]();\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n const flipComp = graphics.getComponent(FLIP);\n\n return flipComp.set(this.undoData.setting);\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Load a background (main) image\n */\nimport commandFactory from '@/factory/command';\nimport { componentNames, commandNames } from '@/consts';\n\nconst { IMAGE_LOADER } = componentNames;\n\nconst command = {\n name: commandNames.LOAD_IMAGE,\n\n /**\n * Load a background (main) image\n * @param {Graphics} graphics - Graphics instance\n * @param {string} imageName - Image name\n * @param {string} imgUrl - Image Url\n * @returns {Promise}\n */\n execute(graphics, imageName, imgUrl) {\n const loader = graphics.getComponent(IMAGE_LOADER);\n const prevImage = loader.getCanvasImage();\n const prevImageWidth = prevImage ? prevImage.width : 0;\n const prevImageHeight = prevImage ? prevImage.height : 0;\n const objects = graphics.removeAll(true).filter((objectItem) => objectItem.type !== 'cropzone');\n\n objects.forEach((objectItem) => {\n objectItem.evented = true;\n });\n\n this.undoData = {\n name: loader.getImageName(),\n image: prevImage,\n objects,\n };\n\n return loader.load(imageName, imgUrl).then((newImage) => ({\n oldWidth: prevImageWidth,\n oldHeight: prevImageHeight,\n newWidth: newImage.width,\n newHeight: newImage.height,\n }));\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n const loader = graphics.getComponent(IMAGE_LOADER);\n const { objects, name, image } = this.undoData;\n\n graphics.removeAll(true);\n graphics.add(objects);\n\n return loader.load(name, image);\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Remove a filter from an image\n */\nimport commandFactory from '@/factory/command';\nimport { componentNames, commandNames } from '@/consts';\n\nconst { FILTER } = componentNames;\n\nconst command = {\n name: commandNames.REMOVE_FILTER,\n\n /**\n * Remove a filter from an image\n * @param {Graphics} graphics - Graphics instance\n * @param {string} type - Filter type\n * @returns {Promise}\n */\n execute(graphics, type) {\n const filterComp = graphics.getComponent(FILTER);\n\n this.undoData.options = filterComp.getOptions(type);\n\n return filterComp.remove(type);\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @param {string} type - Filter type\n * @returns {Promise}\n */\n undo(graphics, type) {\n const filterComp = graphics.getComponent(FILTER);\n const { options } = this.undoData;\n\n return filterComp.add(type, options);\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Remove an object\n */\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { commandNames, rejectMessages } from '@/consts';\n\nconst command = {\n name: commandNames.REMOVE_OBJECT,\n\n /**\n * Remove an object\n * @param {Graphics} graphics - Graphics instance\n * @param {number} id - object id\n * @returns {Promise}\n */\n execute(graphics, id) {\n return new Promise((resolve, reject) => {\n this.undoData.objects = graphics.removeObjectById(id);\n if (this.undoData.objects.length) {\n resolve();\n } else {\n reject(rejectMessages.noObject);\n }\n });\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n graphics.add(this.undoData.objects);\n\n return Promise.resolve();\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Resize a canvas\n */\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { commandNames } from '@/consts';\n\nconst command = {\n name: commandNames.RESIZE_CANVAS_DIMENSION,\n\n /**\n * resize the canvas with given dimension\n * @param {Graphics} graphics - Graphics instance\n * @param {{width: number, height: number}} dimension - Max width & height\n * @returns {Promise}\n */\n execute(graphics, dimension) {\n return new Promise((resolve) => {\n this.undoData.size = {\n width: graphics.cssMaxWidth,\n height: graphics.cssMaxHeight,\n };\n\n graphics.setCssMaxDimension(dimension);\n graphics.adjustCanvasDimension();\n resolve();\n });\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n graphics.setCssMaxDimension(this.undoData.size);\n graphics.adjustCanvasDimension();\n\n return Promise.resolve();\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Rotate an image\n */\nimport commandFactory from '@/factory/command';\nimport { componentNames, commandNames } from '@/consts';\n\nconst { ROTATION } = componentNames;\n\n/**\n * Cached data for undo\n * @type {Object}\n */\nlet cachedUndoDataForSilent = null;\n\n/**\n * Make undo data\n * @param {Component} rotationComp - rotation component\n * @returns {object} - undodata\n */\nfunction makeUndoData(rotationComp) {\n return {\n angle: rotationComp.getCurrentAngle(),\n };\n}\n\nconst command = {\n name: commandNames.ROTATE_IMAGE,\n\n /**\n * Rotate an image\n * @param {Graphics} graphics - Graphics instance\n * @param {string} type - 'rotate' or 'setAngle'\n * @param {number} angle - angle value (degree)\n * @param {boolean} isSilent - is silent execution or not\n * @returns {Promise}\n */\n execute(graphics, type, angle, isSilent) {\n const rotationComp = graphics.getComponent(ROTATION);\n\n if (!this.isRedo) {\n const undoData = makeUndoData(rotationComp);\n\n cachedUndoDataForSilent = this.setUndoData(undoData, cachedUndoDataForSilent, isSilent);\n }\n\n return rotationComp[type](angle);\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n const rotationComp = graphics.getComponent(ROTATION);\n const [, type, angle] = this.args;\n\n if (type === 'setAngle') {\n return rotationComp[type](this.undoData.angle);\n }\n\n return rotationComp.rotate(-angle);\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Set object properties\n */\nimport snippet from 'tui-code-snippet';\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { commandNames, rejectMessages } from '@/consts';\n\nconst command = {\n name: commandNames.SET_OBJECT_PROPERTIES,\n\n /**\n * Set object properties\n * @param {Graphics} graphics - Graphics instance\n * @param {number} id - object id\n * @param {Object} props - properties\n * @param {string} [props.fill] Color\n * @param {string} [props.fontFamily] Font type for text\n * @param {number} [props.fontSize] Size\n * @param {string} [props.fontStyle] Type of inclination (normal / italic)\n * @param {string} [props.fontWeight] Type of thicker or thinner looking (normal / bold)\n * @param {string} [props.textAlign] Type of text align (left / center / right)\n * @param {string} [props.textDecoration] Type of line (underline / line-through / overline)\n * @returns {Promise}\n */\n execute(graphics, id, props) {\n const targetObj = graphics.getObject(id);\n\n if (!targetObj) {\n return Promise.reject(rejectMessages.noObject);\n }\n\n this.undoData.props = {};\n snippet.forEachOwnProperties(props, (value, key) => {\n this.undoData.props[key] = targetObj[key];\n });\n\n graphics.setObjectProperties(id, props);\n\n return Promise.resolve();\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @param {number} id - object id\n * @returns {Promise}\n */\n undo(graphics, id) {\n const { props } = this.undoData;\n\n graphics.setObjectProperties(id, props);\n\n return Promise.resolve();\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Set object properties\n */\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { commandNames, rejectMessages } from '@/consts';\n\nconst command = {\n name: commandNames.SET_OBJECT_POSITION,\n\n /**\n * Set object properties\n * @param {Graphics} graphics - Graphics instance\n * @param {number} id - object id\n * @param {Object} posInfo - position object\n * @param {number} posInfo.x - x position\n * @param {number} posInfo.y - y position\n * @param {string} posInfo.originX - can be 'left', 'center', 'right'\n * @param {string} posInfo.originY - can be 'top', 'center', 'bottom'\n * @returns {Promise}\n */\n execute(graphics, id, posInfo) {\n const targetObj = graphics.getObject(id);\n\n if (!targetObj) {\n return Promise.reject(rejectMessages.noObject);\n }\n\n this.undoData.objectId = id;\n this.undoData.props = graphics.getObjectProperties(id, ['left', 'top']);\n\n graphics.setObjectPosition(id, posInfo);\n graphics.renderAll();\n\n return Promise.resolve();\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n const { objectId, props } = this.undoData;\n\n graphics.setObjectProperties(objectId, props);\n graphics.renderAll();\n\n return Promise.resolve();\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview change selection\n */\nimport commandFactory from '@/factory/command';\nimport { Promise } from '@/util';\nimport { commandNames } from '@/consts';\nimport { getCachedUndoDataForDimension } from '@/helper/selectionModifyHelper';\n\nconst command = {\n name: commandNames.CHANGE_SELECTION,\n\n execute(graphics, props) {\n if (this.isRedo) {\n props.forEach((prop) => {\n graphics.setObjectProperties(prop.id, prop);\n });\n } else {\n this.undoData = getCachedUndoDataForDimension();\n }\n\n return Promise.resolve();\n },\n\n undo(graphics) {\n this.undoData.forEach((datum) => {\n graphics.setObjectProperties(datum.id, datum);\n });\n\n return Promise.resolve();\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n","/**\n * @author NHN. FE Development Team \n * @fileoverview Resize an image\n */\nimport commandFactory from '@/factory/command';\nimport { componentNames, commandNames } from '@/consts';\n\nconst { RESIZE } = componentNames;\n\nconst command = {\n name: commandNames.RESIZE_IMAGE,\n\n /**\n * Resize an image\n * @param {Graphics} graphics - Graphics instance\n * @param {object} dimensions - Image Dimensions\n * @returns {Promise}\n */\n execute(graphics, dimensions) {\n const resizeComp = graphics.getComponent(RESIZE);\n\n let originalDimensions = resizeComp.getOriginalDimensions();\n if (!originalDimensions) {\n originalDimensions = resizeComp.getCurrentDimensions();\n }\n\n this.undoData.dimensions = originalDimensions;\n\n return resizeComp.resize(dimensions);\n },\n\n /**\n * @param {Graphics} graphics - Graphics instance\n * @returns {Promise}\n */\n undo(graphics) {\n const resizeComp = graphics.getComponent(RESIZE);\n\n return resizeComp.resize(this.undoData.dimensions);\n },\n};\n\ncommandFactory.register(command);\n\nexport default command;\n"],"sourceRoot":""} \ No newline at end of file diff --git a/apps/image-editor/index.d.ts b/apps/image-editor/index.d.ts index 456af015e..92dbd522b 100644 --- a/apps/image-editor/index.d.ts +++ b/apps/image-editor/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for TOAST UI Image Editor v3.14.1 +// Type definitions for TOAST UI Image Editor v3.15.1 // TypeScript Version: 3.2.2 declare namespace tuiImageEditor {