UNPKG

ng-cw-v12

Version:

Angular UI Component Library

806 lines (793 loc) 44.1 kB
(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) : typeof define === 'function' && define.amd ? define('ng-cw-v12/splitter', ['exports', '@angular/core', '@angular/common'], factory) : (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"].splitter = {}), global.ng.core, global.ng.common)); })(this, (function (exports, i0, i1) { 'use strict'; function _interopNamespace(e) { if (e && e.__esModule) return e; var n = Object.create(null); if (e) { Object.keys(e).forEach(function (k) { if (k !== 'default') { var d = Object.getOwnPropertyDescriptor(e, k); Object.defineProperty(n, k, d.get ? d : { enumerable: true, get: function () { return e[k]; } }); } }); } n["default"] = e; return Object.freeze(n); } var i0__namespace = /*#__PURE__*/_interopNamespace(i0); var i1__namespace = /*#__PURE__*/_interopNamespace(i1); /****************************************************************************** Copyright (c) Microsoft Corporation. Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. ***************************************************************************** */ /* global Reflect, Promise */ var extendStatics = function (d, b) { extendStatics = Object.setPrototypeOf || ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; return extendStatics(d, b); }; function __extends(d, b) { if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); extendStatics(d, b); function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); } var __assign = function () { __assign = Object.assign || function __assign(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; return __assign.apply(this, arguments); }; function __rest(s, e) { var t = {}; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; } return t; } function __decorate(decorators, target, key, desc) { var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; return c > 3 && r && Object.defineProperty(target, key, r), r; } function __param(paramIndex, decorator) { return function (target, key) { decorator(target, key, paramIndex); }; } function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) { function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; } var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value"; var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null; var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {}); var _, done = false; for (var i = decorators.length - 1; i >= 0; i--) { var context = {}; for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p]; for (var p in contextIn.access) context.access[p] = contextIn.access[p]; context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); }; var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context); if (kind === "accessor") { if (result === void 0) continue; if (result === null || typeof result !== "object") throw new TypeError("Object expected"); if (_ = accept(result.get)) descriptor.get = _; if (_ = accept(result.set)) descriptor.set = _; if (_ = accept(result.init)) initializers.push(_); } else if (_ = accept(result)) { if (kind === "field") initializers.push(_); else descriptor[key] = _; } } if (target) Object.defineProperty(target, contextIn.name, descriptor); done = true; } ; function __runInitializers(thisArg, initializers, value) { var useValue = arguments.length > 2; for (var i = 0; i < initializers.length; i++) { value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg); } return useValue ? value : void 0; } ; function __propKey(x) { return typeof x === "symbol" ? x : "".concat(x); } ; function __setFunctionName(f, name, prefix) { if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : ""; return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name }); } ; function __metadata(metadataKey, metadataValue) { if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue); } function __awaiter(thisArg, _arguments, P, generator) { function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } return new (P || (P = Promise))(function (resolve, reject) { function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } step((generator = generator.apply(thisArg, _arguments || [])).next()); }); } function __generator(thisArg, body) { var _ = { label: 0, sent: function () { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g; function verb(n) { return function (v) { return step([n, v]); }; } function step(op) { if (f) throw new TypeError("Generator is already executing."); while (g && (g = 0, op[0] && (_ = 0)), _) try { if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; if (y = 0, t) op = [op[0] & 2, t.value]; switch (op[0]) { case 0: case 1: t = op; break; case 4: _.label++; return { value: op[1], done: false }; case 5: _.label++; y = op[1]; op = [0]; continue; case 7: op = _.ops.pop(); _.trys.pop(); continue; default: if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } if (t[2]) _.ops.pop(); _.trys.pop(); continue; } op = body.call(thisArg, _); } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; } } var __createBinding = Object.create ? (function (o, m, k, k2) { if (k2 === undefined) k2 = k; var desc = Object.getOwnPropertyDescriptor(m, k); if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { desc = { enumerable: true, get: function () { return m[k]; } }; } Object.defineProperty(o, k2, desc); }) : (function (o, m, k, k2) { if (k2 === undefined) k2 = k; o[k2] = m[k]; }); function __exportStar(m, o) { for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p); } function __values(o) { var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0; if (m) return m.call(o); if (o && typeof o.length === "number") return { next: function () { if (o && i >= o.length) o = void 0; return { value: o && o[i++], done: !o }; } }; throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined."); } function __read(o, n) { var m = typeof Symbol === "function" && o[Symbol.iterator]; if (!m) return o; var i = m.call(o), r, ar = [], e; try { while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value); } catch (error) { e = { error: error }; } finally { try { if (r && !r.done && (m = i["return"])) m.call(i); } finally { if (e) throw e.error; } } return ar; } /** @deprecated */ function __spread() { for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i])); return ar; } /** @deprecated */ function __spreadArrays() { for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length; for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j]; return r; } function __spreadArray(to, from, pack) { if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { if (ar || !(i in from)) { if (!ar) ar = Array.prototype.slice.call(from, 0, i); ar[i] = from[i]; } } return to.concat(ar || Array.prototype.slice.call(from)); } function __await(v) { return this instanceof __await ? (this.v = v, this) : new __await(v); } function __asyncGenerator(thisArg, _arguments, generator) { if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined."); var g = generator.apply(thisArg, _arguments || []), i, q = []; return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i; function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; } function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } } function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); } function fulfill(value) { resume("next", value); } function reject(value) { resume("throw", value); } function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); } } function __asyncDelegator(o) { var i, p; return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i; function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; } } function __asyncValues(o) { if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined."); var m = o[Symbol.asyncIterator], i; return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i); function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; } function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); } } function __makeTemplateObject(cooked, raw) { if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } return cooked; } ; var __setModuleDefault = Object.create ? (function (o, v) { Object.defineProperty(o, "default", { enumerable: true, value: v }); }) : function (o, v) { o["default"] = v; }; function __importStar(mod) { if (mod && mod.__esModule) return mod; var result = {}; if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); __setModuleDefault(result, mod); return result; } function __importDefault(mod) { return (mod && mod.__esModule) ? mod : { default: mod }; } function __classPrivateFieldGet(receiver, state, kind, f) { if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter"); if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it"); return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver); } function __classPrivateFieldSet(receiver, state, value, kind, f) { if (kind === "m") throw new TypeError("Private method is not writable"); if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter"); if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it"); return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value; } function __classPrivateFieldIn(state, receiver) { if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function")) throw new TypeError("Cannot use 'in' operator on non-object"); return typeof state === "function" ? receiver === state : state.has(receiver); } var SplitterPanelComponent = /** @class */ (function () { function SplitterPanelComponent() { } return SplitterPanelComponent; }()); SplitterPanelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: SplitterPanelComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component }); SplitterPanelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: SplitterPanelComponent, selector: "nc-splitter-panel", inputs: { ncPanelSize: "ncPanelSize", ncMinSize: "ncMinSize" }, viewQueries: [{ propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }], ngImport: i0__namespace, template: "\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n ", isInline: true, styles: ["\n :host {\n display: flex;\n overflow: auto;\n width: 100%;\n height: 100%;\n }\n "] }); i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: SplitterPanelComponent, decorators: [{ type: i0.Component, args: [{ selector: 'nc-splitter-panel', template: "\n <ng-template #content>\n <ng-content></ng-content>\n </ng-template>\n ", styles: ["\n :host {\n display: flex;\n overflow: auto;\n width: 100%;\n height: 100%;\n }\n "] }] }], propDecorators: { ncPanelSize: [{ type: i0.Input }], ncMinSize: [{ type: i0.Input }], contentTemplate: [{ type: i0.ViewChild, args: ['content'] }] } }); var SplitterComponent = /** @class */ (function () { function SplitterComponent(cdr, el) { var _this = this; this.cdr = cdr; this.el = el; /** 布局方向 */ this.ncLayout = 'horizontal'; /** 分割线大小 */ this.ncGutterSize = 2; /** 分割线热区大小(可点击区域),默认为分割线大小的3倍 */ this.ncGutterHitSize = this.ncGutterSize * 3; /** 分割线颜色 */ this.ncGutterColor = 'rgba(0, 0, 0, 0.04)'; /** 分割线悬停颜色 */ this.ncGutterHoverColor = 'rgb(230, 244, 255)'; /** 分割线移动颜色 */ this.ncGutterMoveColor = 'rgb(186, 224, 255)'; /** 分割线图标颜色 */ this.ncGutterIconColor = 'rgba(0, 0, 0, 0.15)'; /** 延迟渲染模式 */ this._lazy = false; /** 分割线移动事件 */ this.ncResize = new i0.EventEmitter(); /** 分割线开始移动事件 */ this.ncResizeStart = new i0.EventEmitter(); /** 分割线结束移动事件 */ this.ncResizeEnd = new i0.EventEmitter(); this.panels = []; this.isResizing = false; this.resizingIndex = -1; this.startPosition = 0; this.startSizes = []; this.curGutterDom = null; // 懒加载模式相关属性 this.lazySizes = []; // 懒加载模式下计算的临时尺寸 this.lazyOffset = 0; // 分割线的偏移量 this.previewLine = null; // 预览线元素 this.onMouseMove = function (event) { _this.handleMove(event, 'mouse'); }; this.onTouchMove = function (event) { // 防止页面滚动 event.preventDefault(); _this.handleMove(event, 'touch'); }; this.onMouseUp = function (event) { _this.endResize(event, 'mouse'); }; this.onTouchEnd = function (event) { _this.endResize(event, 'touch'); }; } Object.defineProperty(SplitterComponent.prototype, "ncLazy", { get: function () { return this._lazy; }, set: function (val) { this._lazy = val !== null && val !== undefined && val !== false && val !== 'false'; }, enumerable: false, configurable: true }); SplitterComponent.prototype.ngAfterViewInit = function () { this.panels = this.panelComponents.toArray(); this.normalizeSizes(); this.cdr.detectChanges(); }; SplitterComponent.prototype.normalizeSizes = function () { // 计算已设置尺寸的面板总和 var configuredPanels = this.panels.filter(function (panel) { return panel.ncPanelSize; }); var configuredSize = configuredPanels.reduce(function (sum, panel) { return sum + panel.ncPanelSize; }, 0); // 计算未设置尺寸的面板数量 var unconfiguredCount = this.panels.length - configuredPanels.length; // 为未设置尺寸的面板平均分配剩余空间 var remainingSize = 100 - configuredSize; var defaultSize = unconfiguredCount > 0 ? remainingSize / unconfiguredCount : 0; // 设置每个面板的最终尺寸 this.panels.forEach(function (panel) { if (!panel.ncPanelSize) { panel.ncPanelSize = defaultSize; } }); // 若面板的最小尺寸大于面板的尺寸,则将面板的尺寸设置为最小尺寸,即无法再缩小 this.panels.forEach(function (panel) { if (panel.ncMinSize && panel.ncMinSize > panel.ncPanelSize) { panel.ncMinSize = panel.ncPanelSize; } }); }; SplitterComponent.prototype.onMouseDown = function (event, index) { this.startResize(event, index, 'mouse'); }; SplitterComponent.prototype.onTouchStart = function (event, index) { // 防止默认的滚动行为 event.preventDefault(); this.startResize(event, index, 'touch'); }; SplitterComponent.prototype.startResize = function (event, index, type) { event.preventDefault(); // 防止默认行为 this.curGutterDom = event.target; this.curGutterDom.style.backgroundColor = this.ncGutterMoveColor; this.isResizing = true; this.resizingIndex = index; // 获取初始位置(兼容鼠标和触摸事件) var clientX = type === 'mouse' ? event.clientX : event.touches[0].clientX; var clientY = type === 'mouse' ? event.clientY : event.touches[0].clientY; this.startPosition = this.ncLayout === 'horizontal' ? clientX : clientY; this.startSizes = this.panels.map(function (panel) { return panel.ncPanelSize || 0; }); // 禁用文本选择 document.body.style.userSelect = 'none'; document.body.style.webkitUserSelect = 'none'; // 设置鼠标指针样式(仅对鼠标事件有效) if (type === 'mouse') { document.body.style.cursor = this.ncLayout === 'horizontal' ? 'col-resize' : 'row-resize'; } // 对于触摸事件,防止页面滚动和缩放 if (type === 'touch') { // 禁用触摸滚动 document.body.style.overflow = 'hidden'; document.body.style.touchAction = 'none'; } // 添加对应的事件监听器 if (type === 'mouse') { document.addEventListener('mousemove', this.onMouseMove); document.addEventListener('mouseup', this.onMouseUp); } else { document.addEventListener('touchmove', this.onTouchMove, { passive: false }); document.addEventListener('touchend', this.onTouchEnd); document.addEventListener('touchcancel', this.onTouchEnd); } this.ncResizeStart.emit({ gutterIndex: index, sizes: this.panels.map(function (panel) { return panel.ncPanelSize || 0; }), mouseEvent: event, containerSize: [this.el.nativeElement.offsetWidth, this.el.nativeElement.offsetHeight] }); }; SplitterComponent.prototype.handleMove = function (event, type) { if (!this.isResizing) return; // 获取当前位置(兼容鼠标和触摸事件) var clientX = type === 'mouse' ? event.clientX : event.touches[0].clientX; var clientY = type === 'mouse' ? event.clientY : event.touches[0].clientY; var currentPosition = this.ncLayout === 'horizontal' ? clientX : clientY; var delta = ((currentPosition - this.startPosition) / this.getContainerSize()) * 100; var newSizes = __spreadArray([], __read(this.startSizes)); var leftPanelMinSize = this.panels[this.resizingIndex].ncMinSize || 0; var rightPanelMinSize = this.panels[this.resizingIndex + 1].ncMinSize || 0; // 计算实际可移动的范围,限制delta //左面板最多能扩展多少(受右面板最小尺寸限制) var maxLeftExpansion = this.startSizes[this.resizingIndex + 1] - rightPanelMinSize; //右面板最多能扩展多少(受左面板最小尺寸限制) var maxRightExpansion = this.startSizes[this.resizingIndex] - leftPanelMinSize; // 限制delta在有效范围内 if (delta > maxLeftExpansion) { //如果delta > maxLeftExpansion,说明左面板想要扩展得太多,会导致右面板小于最小尺寸,所以限制delta = maxLeftExpansion delta = maxLeftExpansion; } else if (delta < -maxRightExpansion) { //如果delta < -maxRightExpansion,说明右面板想要扩展得太多,会导致左面板小于最小尺寸,所以限制delta = -maxRightExpansion delta = -maxRightExpansion; } newSizes[this.resizingIndex] = this.startSizes[this.resizingIndex] + delta; newSizes[this.resizingIndex + 1] = this.startSizes[this.resizingIndex + 1] - delta; if (this.ncLazy) { // 懒加载模式:显示预览线,不改变面板尺寸 this.lazySizes = __spreadArray([], __read(newSizes)); this.lazyOffset = (delta / 100) * this.getContainerSize(); // 创建或更新预览线 if (!this.previewLine) { this.previewLine = this.createPreviewLine(); this.el.nativeElement.appendChild(this.previewLine); } // 计算预览线的位置 var gutterRect = this.curGutterDom.getBoundingClientRect(); var containerRect = this.el.nativeElement.getBoundingClientRect(); if (this.ncLayout === 'horizontal') { var originalLeft = gutterRect.left - containerRect.left; this.previewLine.style.left = originalLeft + this.lazyOffset + "px"; } else { var originalTop = gutterRect.top - containerRect.top; this.previewLine.style.top = originalTop + this.lazyOffset + "px"; } } else { // 正常模式:实时更新面板尺寸 var totalSize_1 = newSizes.reduce(function (sum, size) { return sum + size; }, 0); this.panels.forEach(function (panel, i) { return panel.ncPanelSize = (newSizes[i] / totalSize_1) * 100; }); this.cdr.detectChanges(); } this.ncResize.emit({ gutterIndex: this.resizingIndex, sizes: this.ncLazy ? this.lazySizes : this.panels.map(function (panel) { return panel.ncPanelSize || 0; }), delta: delta, mouseEvent: event, containerSize: [this.el.nativeElement.offsetWidth, this.el.nativeElement.offsetHeight] }); }; SplitterComponent.prototype.endResize = function (event, type) { var _this = this; if (this.curGutterDom) { this.curGutterDom.style.backgroundColor = ''; // 清空内联样式,让CSS样式生效 if (this.ncLazy) { // 懒加载模式:移除预览线,应用最终面板尺寸 this.removePreviewLine(); if (this.lazySizes.length > 0) { var totalSize_2 = this.lazySizes.reduce(function (sum, size) { return sum + size; }, 0); this.panels.forEach(function (panel, i) { return panel.ncPanelSize = (_this.lazySizes[i] / totalSize_2) * 100; }); this.cdr.detectChanges(); } // 清空懒加载状态 this.lazySizes = []; this.lazyOffset = 0; } } // 恢复文本选择和鼠标指针 document.body.style.userSelect = ''; document.body.style.webkitUserSelect = ''; document.body.style.cursor = ''; // 对于触摸事件,恢复页面滚动和缩放 if (type === 'touch') { document.body.style.overflow = ''; document.body.style.touchAction = ''; } this.isResizing = false; // 移除对应的事件监听器 if (type === 'mouse') { document.removeEventListener('mousemove', this.onMouseMove); document.removeEventListener('mouseup', this.onMouseUp); } else { document.removeEventListener('touchmove', this.onTouchMove); document.removeEventListener('touchend', this.onTouchEnd); document.removeEventListener('touchcancel', this.onTouchEnd); } this.ncResizeEnd.emit({ gutterIndex: this.resizingIndex, sizes: this.panels.map(function (panel) { return panel.ncPanelSize || 0; }), mouseEvent: event, containerSize: [this.el.nativeElement.offsetWidth, this.el.nativeElement.offsetHeight] }); }; SplitterComponent.prototype.getContainerSize = function () { return this.ncLayout === 'horizontal' ? this.el.nativeElement.offsetWidth : this.el.nativeElement.offsetHeight; }; // 创建预览线 SplitterComponent.prototype.createPreviewLine = function () { var previewLine = document.createElement('div'); previewLine.className = "nc-splitter-preview-line nc-splitter-preview-line-" + this.ncLayout; previewLine.style.position = 'absolute'; previewLine.style.backgroundColor = this.ncGutterHoverColor; previewLine.style.pointerEvents = 'none'; previewLine.style.zIndex = '1000'; if (this.ncLayout === 'horizontal') { previewLine.style.width = this.ncGutterSize + "px"; previewLine.style.height = '100%'; previewLine.style.top = '0'; } else { previewLine.style.height = this.ncGutterSize + "px"; previewLine.style.width = '100%'; previewLine.style.left = '0'; } return previewLine; }; // 移除预览线 SplitterComponent.prototype.removePreviewLine = function () { if (this.previewLine && this.previewLine.parentNode) { this.previewLine.parentNode.removeChild(this.previewLine); this.previewLine = null; } }; SplitterComponent.prototype.ngOnDestroy = function () { // 清理预览线 this.removePreviewLine(); // 清理所有事件监听器 document.removeEventListener('mousemove', this.onMouseMove); document.removeEventListener('mouseup', this.onMouseUp); document.removeEventListener('touchmove', this.onTouchMove); document.removeEventListener('touchend', this.onTouchEnd); document.removeEventListener('touchcancel', this.onTouchEnd); // 恢复所有样式 document.body.style.userSelect = ''; document.body.style.webkitUserSelect = ''; document.body.style.cursor = ''; document.body.style.overflow = ''; document.body.style.touchAction = ''; }; return SplitterComponent; }()); SplitterComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: SplitterComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Component }); SplitterComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: SplitterComponent, selector: "nc-splitter", inputs: { ncLayout: "ncLayout", ncGutterSize: "ncGutterSize", ncGutterHitSize: "ncGutterHitSize", ncGutterColor: "ncGutterColor", ncGutterHoverColor: "ncGutterHoverColor", ncGutterMoveColor: "ncGutterMoveColor", ncGutterIconColor: "ncGutterIconColor", ncLazy: "ncLazy" }, outputs: { ncResize: "ncResize", ncResizeStart: "ncResizeStart", ncResizeEnd: "ncResizeEnd" }, queries: [{ propertyName: "panelComponents", predicate: SplitterPanelComponent }], ngImport: i0__namespace, template: "<div class=\"nc-splitter\" [ngClass]=\"'nc-splitter-' + ncLayout\" style=\"--ncGutterSize: {{ncGutterSize + 'px'}};\r\n --ncGutterColor: {{ncGutterColor}};\r\n --ncGutterHoverColor: {{ncGutterHoverColor}};\r\n --ncGutterIconColor: {{ncGutterIconColor}};\r\n --ncGutterHitSize: {{ncGutterHitSize + 'px'}};\">\r\n <ng-container *ngFor=\"let panel of panels; let i = index; let last = last\">\r\n <div class=\"panel\" [style.flexBasis.%]=\"panel.ncPanelSize\">\r\n <ng-container *ngTemplateOutlet=\"panel.contentTemplate\"></ng-container>\r\n </div>\r\n <div *ngIf=\"!last\" class=\"nc-splitter-gutter\" [ngClass]=\"'nc-splitter-gutter-' + ncLayout\"\r\n (mousedown)=\"onMouseDown($event, i)\" (touchstart)=\"onTouchStart($event, i)\"></div>\r\n </ng-container>\r\n</div>", styles: [":host{width:100%;height:100%}.nc-splitter{display:flex;width:100%;height:100%;overflow:hidden}.nc-splitter .panel{flex:1 1 auto;overflow:auto;display:flex}.nc-splitter .nc-splitter-gutter{background:var(--ncGutterColor);flex:0 0 var(--ncGutterSize);position:relative;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.nc-splitter .nc-splitter-gutter:hover{background:var(--ncGutterHoverColor)}.nc-splitter .nc-splitter-gutter:before{content:\"\";position:absolute;z-index:1}.nc-splitter .nc-splitter-gutter:after{position:absolute;content:\"\";background:var(--ncGutterIconColor);z-index:2;top:50%;left:50%;transform:translate(-50%,-50%)}.nc-splitter .nc-splitter-gutter-horizontal{cursor:col-resize}.nc-splitter .nc-splitter-gutter-horizontal:before{top:0;left:50%;width:var(--ncGutterHitSize);height:100%;transform:translate(-50%)}.nc-splitter .nc-splitter-gutter-horizontal:after{width:var(--ncGutterSize);height:20px}.nc-splitter .nc-splitter-gutter-vertical{cursor:row-resize}.nc-splitter .nc-splitter-gutter-vertical:before{top:50%;left:0;width:100%;height:var(--ncGutterHitSize);transform:translateY(-50%)}.nc-splitter .nc-splitter-gutter-vertical:after{width:20px;height:var(--ncGutterSize)}.nc-splitter-horizontal{flex-direction:row}.nc-splitter-vertical{flex-direction:column}.nc-splitter-preview-line{position:absolute;pointer-events:none;z-index:1000;opacity:.8;transition:opacity .1s ease}.nc-splitter-preview-line.nc-splitter-preview-line-horizontal{cursor:col-resize}.nc-splitter-preview-line.nc-splitter-preview-line-vertical{cursor:row-resize}\n"], directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush }); i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: SplitterComponent, decorators: [{ type: i0.Component, args: [{ selector: 'nc-splitter', templateUrl: './splitter.component.html', styleUrls: ['./splitter.component.less'], changeDetection: i0.ChangeDetectionStrategy.OnPush }] }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ElementRef }]; }, propDecorators: { ncLayout: [{ type: i0.Input }], ncGutterSize: [{ type: i0.Input }], ncGutterHitSize: [{ type: i0.Input }], ncGutterColor: [{ type: i0.Input }], ncGutterHoverColor: [{ type: i0.Input }], ncGutterMoveColor: [{ type: i0.Input }], ncGutterIconColor: [{ type: i0.Input }], ncLazy: [{ type: i0.Input }], panelComponents: [{ type: i0.ContentChildren, args: [SplitterPanelComponent] }], ncResize: [{ type: i0.Output }], ncResizeStart: [{ type: i0.Output }], ncResizeEnd: [{ type: i0.Output }] } }); var NcSplitterModule = /** @class */ (function () { function NcSplitterModule() { } return NcSplitterModule; }()); NcSplitterModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcSplitterModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule }); NcSplitterModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcSplitterModule, declarations: [SplitterComponent, SplitterPanelComponent], imports: [i1.CommonModule], exports: [SplitterComponent, SplitterPanelComponent] }); NcSplitterModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcSplitterModule, imports: [[ i1.CommonModule ]] }); i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcSplitterModule, decorators: [{ type: i0.NgModule, args: [{ declarations: [ SplitterComponent, SplitterPanelComponent ], imports: [ i1.CommonModule ], exports: [ SplitterComponent, SplitterPanelComponent ] }] }] }); /** * Generated bundle index. Do not edit. */ exports.NcSplitterModule = NcSplitterModule; exports.SplitterComponent = SplitterComponent; exports.SplitterPanelComponent = SplitterPanelComponent; Object.defineProperty(exports, '__esModule', { value: true }); })); //# sourceMappingURL=ng-cw-v12-splitter.umd.js.map