@bigplay/tree-view-vue2 0.1.0 → 0.2.0

package/dist/BracketCard.d.ts

@@ -0,0 +1,20 @@
+import { default as Vue, VNode } from 'vue';
+import { BracketCardMatch, BracketCardRow } from '@bigplay/tree-view-core';
+/**
+ * Карточка матча для Vue 2. Разметка и классы один в один как в Vue 3 —
+ * строки считает та же функция из core, стили общие.
+ */
+declare const _default: import('vue/types/vue').ExtendedVue<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue>, {
+    hoveredKey: string | null;
+}, {
+    renderRow(h: typeof Vue.prototype.$createElement, row: BracketCardRow): VNode;
+}, {
+    card: import('@bigplay/tree-view-core').BracketCardModel;
+}, {
+    match: BracketCardMatch | null;
+    rows: number;
+    myTeamHint: string;
+    techDefeatLabel: string;
+    techDefeatHint: string;
+}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin>;
+export default _default;

package/dist/TreeView.d.ts

@@ -1,12 +1,20 @@
 import { default as Vue, VNode } from 'vue';
-import { Layout, LayoutNode, ScaleLimits, Transform, TreeViewOptions } from '@bigplay/tree-view-core';
+import { Layout, LayoutNode, Rect, ScaleLimits, Transform, TreeViewOptions } from '@bigplay/tree-view-core';
 /** Данные узла могут быть какими угодно — библиотека читает их только аксессорами. */
 type NodeData = any;
 declare const _default: import('vue/types/vue').ExtendedVue<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue>, {
     /** Массив, а не Set: Vue 2 не умеет наблюдать за Set. */
     collapsedIds: string[];
     transform: Transform;
+    /**
+     * Видимая часть холста; `null` — рисуем всё.
+     * До первого измерения берём размер окна: иначе первый кадр
+     * нарисует дерево целиком и тут же выбросит лишнее.
+     */
+    visibleRect: Rect | null;
 }, {
+    /** Пересчитывает, какая часть холста сейчас видна на экране. */
+    updateVisibleRect(): void;
     /** Вписывает дерево в видимую область. */
     fit(padding?: number): void;
     zoomIn(): void;
@@ -27,11 +35,12 @@ declare const _default: import('vue/types/vue').ExtendedVue<Vue<Record<string, a
     renderNodeContent(h: typeof Vue.prototype.$createElement, node: LayoutNode<NodeData>): VNode | VNode[];
 }, {
     layout: Layout<any>;
+    drawn: Layout<any>;
     canvasStyle: Record<string, string>;
     rootStyle: Record<string, string> | undefined;
 }, {
     data: any;
-    options: Partial<TreeViewOptions>;
+    options: Partial<TreeViewOptions<any>>;
     getId: ((item: any) => string | number | null | undefined) | undefined;
     getChildren: ((item: any) => any[] | null | undefined) | undefined;
     getParentId: ((item: any) => string | number | null | undefined) | undefined;
@@ -42,5 +51,7 @@ declare const _default: import('vue/types/vue').ExtendedVue<Vue<Record<string, a
     size: string;
     scaleLimits: ScaleLimits;
     nodeClass: string | ((node: LayoutNode<NodeData>) => string);
+    virtualize: boolean;
+    overscan: number;
 }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin>;
 export default _default;

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),s=require("@bigplay/tree-view-core"),a=n.extend({name:"TreeNodeCard",props:{label:{type:String,required:!0},hasChildren:{type:Boolean,default:!1},collapsed:{type:Boolean,default:!1}},render(e){const t=[e("span",{class:"tree-view-card__label"},this.label)];return this.hasChildren&&t.push(e("button",{class:"tree-view-card__toggle",attrs:{type:"button","data-tv-no-pan":"","aria-label":this.collapsed?"Развернуть":"Свернуть"},on:{click:l=>{l.stopPropagation(),this.$emit("toggle")}}},this.collapsed?"+":"−")),e("div",{class:"tree-view-card"},t)}}),o=new WeakMap,r=n.extend({name:"TreeView",props:{data:{type:[Object,Array],default:null},options:{type:Object,default:void 0},getId:{type:Function,default:void 0},getChildren:{type:Function,default:void 0},getParentId:{type:Function,default:void 0},collapsible:{type:Boolean,default:!1},pannable:{type:Boolean,default:!0},zoomable:{type:Boolean,default:!0},fitOnMount:{type:Boolean,default:!0},size:{type:String,default:"fill"},scaleLimits:{type:Object,default:void 0},nodeClass:{type:[String,Function],default:void 0}},data(){return{collapsedIds:[],transform:{x:0,y:0,scale:1}}},computed:{layout(){const e=s.toTree(this.data,{getId:this.getId,getChildren:this.getChildren,getParentId:this.getParentId});return s.layoutTree(s.applyCollapsed(e,new Set(this.collapsedIds)),this.options)},canvasStyle(){return{width:`${this.layout.width}px`,height:`${this.layout.height}px`,transform:s.toCssTransform(this.transform)}},rootStyle(){if(this.size==="content")return{width:`${this.layout.width*this.transform.scale}px`,height:`${this.layout.height*this.transform.scale}px`,overflow:"visible"}}},mounted(){const e=new s.PanZoomController({pannable:()=>this.pannable,zoomable:()=>this.zoomable,limits:this.scaleLimits?()=>this.scaleLimits:void 0,onChange:t=>{this.transform=t,this.$emit("transform",t)}});e.attach(this.$el),o.set(this,e),this.fitOnMount&&this.$nextTick(()=>this.fit())},beforeDestroy(){o.get(this)?.detach(),o.delete(this)},methods:{fit(e){o.get(this)?.fit({width:this.layout.width,height:this.layout.height},e)},zoomIn(){o.get(this)?.zoomIn()},zoomOut(){o.get(this)?.zoomOut()},resetTransform(){o.get(this)?.reset()},setTransform(e){o.get(this)?.set(e)},expandAll(){this.collapsedIds=[]},toggle(e){this.collapsedIds=[...s.toggleCollapsed(new Set(this.collapsedIds),e)]},toggleNode(e){this.toggle(e.id),this.$emit("toggle",e,this.collapsedIds.includes(e.id))},onNodeClick(e,t){this.$emit("node-click",e,t),this.collapsible&&e.hasChildren&&this.toggleNode(e)},nodeStyle(e){return{left:`${e.x}px`,top:`${e.y}px`,width:`${e.width}px`,height:`${e.height}px`}},nodeClassOf(e){return typeof this.nodeClass=="function"?this.nodeClass(e):this.nodeClass},labelOf(e){const t=e.data;return t?.name??t?.title??t?.label??e.id},renderNodeContent(e,t){const l=this.$scopedSlots.node;return l?l({node:t,data:t.data,depth:t.depth,collapsed:t.collapsed,hasChildren:t.hasChildren,toggle:()=>this.toggleNode(t)})??[]:e(a,{props:{label:this.labelOf(t),hasChildren:t.hasChildren,collapsed:t.collapsed},on:{toggle:()=>this.toggleNode(t)}})}},render(e){const t=this.layout,l=this.$scopedSlots.link,h=t.links.map(i=>l?l({link:i})??[]:e("path",{key:i.id,class:"tree-view__link",attrs:{d:i.path}})),c=t.nodes.map(i=>e("div",{key:i.id,class:["tree-view__node",this.nodeClassOf(i)],style:this.nodeStyle(i),on:{click:p=>this.onNodeClick(i,p)}},[].concat(this.renderNodeContent(e,i))));return e("div",{class:["tree-view",{"tree-view--pannable":this.pannable,"tree-view--content":this.size==="content"}],style:this.rootStyle},[e("div",{class:"tree-view__canvas",style:this.canvasStyle},[e("svg",{class:"tree-view__links",attrs:{width:t.width,height:t.height}},h),...c])])}}),u=".tree-view{--tv-link-color: #cbd5e1;--tv-link-width: 2px;--tv-node-bg: #ffffff;--tv-node-color: #0f172a;--tv-node-border: 1px solid #e2e8f0;--tv-node-radius: 10px;--tv-node-shadow: 0 1px 2px rgb(15 23 42 / 8%);--tv-node-padding: 8px 12px;--tv-accent: #2563eb;position:relative;width:100%;height:100%;overflow:hidden;touch-action:none}.tree-view--pannable{cursor:grab}.tree-view--content{width:auto;height:auto;overflow:visible}.tree-view__canvas{position:absolute;top:0;left:0;transform-origin:0 0}.tree-view__links{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}.tree-view__link{fill:none;stroke:var(--tv-link-color);stroke-width:var(--tv-link-width)}.tree-view__node{position:absolute;box-sizing:border-box;display:flex;align-items:stretch;justify-content:stretch}.tree-view-card{box-sizing:border-box;display:flex;gap:8px;align-items:center;justify-content:space-between;width:100%;height:100%;padding:var(--tv-node-padding);overflow:hidden;color:var(--tv-node-color);background:var(--tv-node-bg);border:var(--tv-node-border);border-radius:var(--tv-node-radius);box-shadow:var(--tv-node-shadow)}.tree-view-card__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-view-card__toggle{flex:none;width:20px;height:20px;padding:0;font:inherit;line-height:1;color:var(--tv-accent);cursor:pointer;background:none;border:none}";s.injectStyles(u);const d={install(e){e.component("TreeView",r),e.component("TreeNodeCard",a)}};Object.defineProperty(exports,"DEFAULT_OPTIONS",{enumerable:!0,get:()=>s.DEFAULT_OPTIONS});exports.TreeNodeCard=a;exports.TreeView=r;exports.TreeViewPlugin=d;exports.default=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("vue"),r=require("@bigplay/tree-view-core"),n=l.extend({name:"TreeNodeCard",props:{label:{type:String,required:!0},hasChildren:{type:Boolean,default:!1},collapsed:{type:Boolean,default:!1}},render(e){const t=[e("span",{class:"tree-view-card__label"},this.label)];return this.hasChildren&&t.push(e("button",{class:"tree-view-card__toggle",attrs:{type:"button","data-tv-no-pan":"","aria-label":this.collapsed?"Развернуть":"Свернуть"},on:{click:i=>{i.stopPropagation(),this.$emit("toggle")}}},this.collapsed?"+":"−")),e("div",{class:"tree-view-card"},t)}}),o=new WeakMap,d=l.extend({name:"TreeView",props:{data:{type:[Object,Array],default:null},options:{type:Object,default:void 0},getId:{type:Function,default:void 0},getChildren:{type:Function,default:void 0},getParentId:{type:Function,default:void 0},collapsible:{type:Boolean,default:!1},pannable:{type:Boolean,default:!0},zoomable:{type:Boolean,default:!0},fitOnMount:{type:Boolean,default:!0},size:{type:String,default:"fill"},scaleLimits:{type:Object,default:void 0},nodeClass:{type:[String,Function],default:void 0},virtualize:{type:Boolean,default:!0},overscan:{type:Number,default:r.DEFAULT_OVERSCAN}},data(){return{collapsedIds:[],transform:{x:0,y:0,scale:1},visibleRect:this.virtualize?r.estimateVisibleRect():null}},computed:{layout(){const e=r.toTree(this.data,{getId:this.getId,getChildren:this.getChildren,getParentId:this.getParentId});return r.layoutTree(r.applyCollapsed(e,new Set(this.collapsedIds)),this.options)},drawn(){return this.virtualize?r.visibleLayout(this.layout,this.visibleRect,this.overscan):this.layout},canvasStyle(){return{width:`${this.layout.width}px`,height:`${this.layout.height}px`,transform:r.toCssTransform(this.transform)}},rootStyle(){if(this.size==="content")return{width:`${this.layout.width*this.transform.scale}px`,height:`${this.layout.height*this.transform.scale}px`,overflow:"visible"}}},watch:{layout(){this.$nextTick(()=>this.updateVisibleRect())}},mounted(){const e=new r.PanZoomController({pannable:()=>this.pannable,zoomable:()=>this.zoomable,limits:this.scaleLimits?()=>this.scaleLimits:void 0,onChange:t=>{this.transform=t,this.updateVisibleRect(),this.$emit("transform",t)}});e.attach(this.$el),o.set(this,e),this.updateVisibleRect(),window.addEventListener("scroll",this.updateVisibleRect,{passive:!0,capture:!0}),window.addEventListener("resize",this.updateVisibleRect,{passive:!0}),this.fitOnMount&&this.$nextTick(()=>this.fit())},beforeDestroy(){o.get(this)?.detach(),o.delete(this),window.removeEventListener("scroll",this.updateVisibleRect,{capture:!0}),window.removeEventListener("resize",this.updateVisibleRect)},methods:{updateVisibleRect(){this.visibleRect=this.virtualize?r.measureVisibleRect(this.$refs.canvas,this.transform.scale):null},fit(e){o.get(this)?.fit({width:this.layout.width,height:this.layout.height},e)},zoomIn(){o.get(this)?.zoomIn()},zoomOut(){o.get(this)?.zoomOut()},resetTransform(){o.get(this)?.reset()},setTransform(e){o.get(this)?.set(e)},expandAll(){this.collapsedIds=[]},toggle(e){this.collapsedIds=[...r.toggleCollapsed(new Set(this.collapsedIds),e)]},toggleNode(e){this.toggle(e.id),this.$emit("toggle",e,this.collapsedIds.includes(e.id))},onNodeClick(e,t){this.$emit("node-click",e,t),this.collapsible&&e.hasChildren&&this.toggleNode(e)},nodeStyle(e){return{left:`${e.x}px`,top:`${e.y}px`,width:`${e.width}px`,height:`${e.height}px`}},nodeClassOf(e){return typeof this.nodeClass=="function"?this.nodeClass(e):this.nodeClass},labelOf(e){const t=e.data;return t?.name??t?.title??t?.label??e.id},renderNodeContent(e,t){const i=this.$scopedSlots.node;return i?i({node:t,data:t.data,depth:t.depth,collapsed:t.collapsed,hasChildren:t.hasChildren,toggle:()=>this.toggleNode(t)})??[]:e(n,{props:{label:this.labelOf(t),hasChildren:t.hasChildren,collapsed:t.collapsed},on:{toggle:()=>this.toggleNode(t)}})}},render(e){const t=this.layout,i=this.drawn,s=this.$scopedSlots.link,p=i.links.map(a=>s?s({link:a})??[]:e("path",{key:a.id,class:"tree-view__link",attrs:{d:a.path}})),v=i.nodes.map(a=>e("div",{key:a.id,class:["tree-view__node",this.nodeClassOf(a)],style:this.nodeStyle(a),on:{click:u=>this.onNodeClick(a,u)}},[].concat(this.renderNodeContent(e,a))));return e("div",{class:["tree-view",{"tree-view--pannable":this.pannable,"tree-view--content":this.size==="content"}],style:this.rootStyle},[e("div",{ref:"canvas",class:"tree-view__canvas",style:this.canvasStyle},[e("svg",{class:"tree-view__links",attrs:{width:t.width,height:t.height}},p),...v])])}}),c=l.extend({name:"BracketCard",props:{match:{type:Object,default:null},rows:{type:Number,default:void 0},myTeamHint:{type:String,default:"Нажми для перехода в матч 👇"},techDefeatLabel:{type:String,default:"ТП"},techDefeatHint:{type:String,default:"Техническое поражение"}},data(){return{hoveredKey:null}},computed:{card(){return r.buildBracketCard(this.match,{rows:this.rows,techDefeatLabel:this.techDefeatLabel})}},methods:{renderRow(e,t){const i=[];return t.team&&(t.isTechDefeat&&this.hoveredKey===t.key&&i.push(e("span",{class:"tv-bracket__tooltip"},this.techDefeatHint)),i.push(e("span",{class:"tv-bracket__name"},t.team.name)),i.push(e("span",{class:"tv-bracket__score"},t.score))),e("div",{key:t.key,class:["tv-bracket__row",{"tv-bracket__row--winner":t.isWinner,"tv-bracket__row--loser":t.isLoser&&!t.isEmpty,"tv-bracket__row--my":t.isMyTeam,"tv-bracket__row--empty":t.isEmpty}],attrs:t.isMyTeam?{title:"Моя команда"}:{},on:{click:()=>{t.team&&this.$emit("select",t.team,t)},mouseenter:()=>{this.hoveredKey=t.key},mouseleave:()=>{this.hoveredKey=null}}},i)}},render(e){const t=this.card,i=[];t.hasMyTeam&&this.myTeamHint&&i.push(e("div",{class:"tv-bracket__hint"},this.myTeamHint));for(const s of t.rows)i.push(this.renderRow(e,s));return e("div",{class:["tv-bracket",{"tv-bracket--my-team":t.hasMyTeam}]},i)}}),b=".tree-view{--tv-link-color: #cbd5e1;--tv-link-width: 2px;--tv-node-bg: #ffffff;--tv-node-color: #0f172a;--tv-node-border: 1px solid #e2e8f0;--tv-node-radius: 10px;--tv-node-shadow: 0 1px 2px rgb(15 23 42 / 8%);--tv-node-padding: 8px 12px;--tv-accent: #2563eb;position:relative;width:100%;height:100%;overflow:hidden;touch-action:none}.tree-view--pannable{cursor:grab}.tree-view--content{width:auto;height:auto;overflow:visible}.tree-view__canvas{position:absolute;top:0;left:0;transform-origin:0 0}.tree-view__links{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}.tree-view__link{fill:none;stroke:var(--tv-link-color);stroke-width:var(--tv-link-width)}.tree-view__node{position:absolute;box-sizing:border-box;display:flex;align-items:stretch;justify-content:stretch}.tree-view-card{box-sizing:border-box;display:flex;gap:8px;align-items:center;justify-content:space-between;width:100%;height:100%;padding:var(--tv-node-padding);overflow:hidden;color:var(--tv-node-color);background:var(--tv-node-bg);border:var(--tv-node-border);border-radius:var(--tv-node-radius);box-shadow:var(--tv-node-shadow)}.tree-view-card__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-view-card__toggle{flex:none;width:20px;height:20px;padding:0;font:inherit;line-height:1;color:var(--tv-accent);cursor:pointer;background:none;border:none}.tv-bracket{--tv-bracket-winner-bg: #0427c4;--tv-bracket-winner-color: #ffffff;--tv-bracket-loser-bg: #e5e5e5;--tv-bracket-loser-color: #7d7d8d;--tv-bracket-my-bg: #00146c;--tv-bracket-my-color: #ffffff;--tv-bracket-radius: 6px;position:relative;box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;font-size:12px}.tv-bracket--my-team{border-radius:var(--tv-bracket-radius);outline:2px solid var(--tv-bracket-my-bg)}.tv-bracket__hint{position:absolute;right:0;bottom:100%;left:0;padding:3px 8px;overflow:hidden;font-size:11px;font-weight:600;line-height:1.2;color:var(--tv-bracket-my-color);text-align:center;text-overflow:ellipsis;white-space:nowrap;background:var(--tv-bracket-my-bg);border-radius:var(--tv-bracket-radius) var(--tv-bracket-radius) 0 0}.tv-bracket__row{position:relative;box-sizing:border-box;display:flex;flex:1 1 0;align-items:center;justify-content:space-between;min-height:0;padding:4px 8px;cursor:pointer;transition:all 75ms}.tv-bracket__row--winner{font-weight:700;color:var(--tv-bracket-winner-color);background:var(--tv-bracket-winner-bg)}.tv-bracket__row--loser{color:var(--tv-bracket-loser-color);background:var(--tv-bracket-loser-bg)}.tv-bracket__row--my{color:var(--tv-bracket-my-color);background:var(--tv-bracket-my-bg)}.tv-bracket__row--empty{cursor:default;background:var(--tv-bracket-loser-bg)}.tv-bracket__name{max-width:120px;overflow:hidden;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.tv-bracket__score{display:flex;flex:none;align-items:center;justify-content:center;width:20px;height:20px;font-weight:700;font-variant-numeric:tabular-nums}.tv-bracket__tooltip{position:absolute;top:-26px;left:6px;z-index:5000;padding:4px 8px;font-weight:400;color:var(--tv-bracket-loser-color);white-space:nowrap;background:#fff;border:1px solid #d1d5db;border-radius:4px;box-shadow:0 4px 10px #0f172a26}";r.injectStyles(b);const h={install(e){e.component("TreeView",d),e.component("TreeNodeCard",n),e.component("BracketCard",c)}};Object.defineProperty(exports,"DEFAULT_OPTIONS",{enumerable:!0,get:()=>r.DEFAULT_OPTIONS});Object.defineProperty(exports,"bracketCardHeight",{enumerable:!0,get:()=>r.bracketCardHeight});Object.defineProperty(exports,"buildBracketCard",{enumerable:!0,get:()=>r.buildBracketCard});exports.BracketCard=c;exports.TreeNodeCard=n;exports.TreeView=d;exports.TreeViewPlugin=h;exports.default=h;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/TreeNodeCard.ts","../src/TreeView.ts","../src/index.ts"],"sourcesContent":["import Vue from 'vue'\n\n/**\n * Карточка узла по умолчанию для Vue 2.\n * Разметка и классы один в один как в Vue 3 — стили общие.\n */\nexport default Vue.extend({\n  name: 'TreeNodeCard',\n  props: {\n    label: { type: String, required: true },\n    hasChildren: { type: Boolean, default: false },\n    collapsed: { type: Boolean, default: false },\n  },\n  render(h) {\n    const children = [h('span', { class: 'tree-view-card__label' }, this.label)]\n\n    if (this.hasChildren) {\n      children.push(\n        h(\n          'button',\n          {\n            class: 'tree-view-card__toggle',\n            attrs: {\n              type: 'button',\n              'data-tv-no-pan': '',\n              'aria-label': this.collapsed ? 'Развернуть' : 'Свернуть',\n            },\n            on: {\n              click: (event: MouseEvent) => {\n                event.stopPropagation()\n                this.$emit('toggle')\n              },\n            },\n          },\n          this.collapsed ? '+' : '−',\n        ),\n      )\n    }\n\n    return h('div', { class: 'tree-view-card' }, children)\n  },\n})\n","import Vue, { type PropType, type VNode } from 'vue'\nimport {\n  applyCollapsed,\n  layoutTree,\n  PanZoomController,\n  toCssTransform,\n  toggleCollapsed,\n  toTree,\n  type Accessors,\n  type Layout,\n  type LayoutNode,\n  type ScaleLimits,\n  type Transform,\n  type TreeViewOptions,\n} from '@bigplay/tree-view-core'\nimport TreeNodeCard from './TreeNodeCard'\n\n/** Данные узла могут быть какими угодно — библиотека читает их только аксессорами. */\ntype NodeData = any\n\n/**\n * Контроллеры держим здесь, а не в data(): Vue 2 сделал бы объект реактивным,\n * а внутри него DOM-элемент и Map — наблюдать за ними незачем.\n */\nconst controllers = new WeakMap<Vue, PanZoomController>()\n\nexport default Vue.extend({\n  name: 'TreeView',\n  props: {\n    /** Объект, массив объектов или плоский список (вместе с `getParentId`). */\n    data: { type: [Object, Array] as PropType<NodeData>, default: null },\n    /** Размеры и направление. Можно передать только часть полей. */\n    options: { type: Object as PropType<Partial<TreeViewOptions>>, default: undefined },\n    /** Как достать id узла. По умолчанию — поле `id`. */\n    getId: { type: Function as PropType<Accessors<NodeData>['getId']>, default: undefined },\n    /** Как достать детей. По умолчанию — поле `children`. */\n    getChildren: { type: Function as PropType<Accessors<NodeData>['getChildren']>, default: undefined },\n    /** Как достать id родителя. Передан — значит данные плоские. */\n    getParentId: { type: Function as PropType<Accessors<NodeData>['getParentId']>, default: undefined },\n    /** Клик по узлу сворачивает/разворачивает ветку. */\n    collapsible: { type: Boolean, default: false },\n    /** Разрешить перетаскивание холста. */\n    pannable: { type: Boolean, default: true },\n    /** Разрешить зум колесом и «щипком». */\n    zoomable: { type: Boolean, default: true },\n    /** Вписать дерево в контейнер при первом отображении. */\n    fitOnMount: { type: Boolean, default: true },\n    /**\n     * Как компонент занимает место:\n     *  - `'fill'` (по умолчанию) — растягивается на родителя, лишнее обрезается;\n     *  - `'content'` — контейнер принимает размер дерева и ничего не обрезает.\n     */\n    size: { type: String as PropType<'fill' | 'content'>, default: 'fill' },\n    /** Пределы масштаба. */\n    scaleLimits: { type: Object as PropType<ScaleLimits>, default: undefined },\n    /** Дополнительный класс на обёртке узла — строкой или функцией. */\n    nodeClass: {\n      type: [String, Function] as PropType<string | ((node: LayoutNode<NodeData>) => string)>,\n      default: undefined,\n    },\n  },\n\n  data() {\n    return {\n      /** Массив, а не Set: Vue 2 не умеет наблюдать за Set. */\n      collapsedIds: [] as string[],\n      transform: { x: 0, y: 0, scale: 1 } as Transform,\n    }\n  },\n\n  computed: {\n    layout(): Layout<NodeData> {\n      const tree = toTree<NodeData>(this.data, {\n        getId: this.getId,\n        getChildren: this.getChildren,\n        getParentId: this.getParentId,\n      })\n\n      return layoutTree(applyCollapsed(tree, new Set(this.collapsedIds)), this.options)\n    },\n\n    canvasStyle(): Record<string, string> {\n      return {\n        width: `${this.layout.width}px`,\n        height: `${this.layout.height}px`,\n        transform: toCssTransform(this.transform),\n      }\n    },\n\n    rootStyle(): Record<string, string> | undefined {\n      if (this.size !== 'content') return undefined\n\n      return {\n        width: `${this.layout.width * this.transform.scale}px`,\n        height: `${this.layout.height * this.transform.scale}px`,\n        overflow: 'visible',\n      }\n    },\n  },\n\n  mounted() {\n    const controller = new PanZoomController({\n      pannable: () => this.pannable,\n      zoomable: () => this.zoomable,\n      limits: this.scaleLimits ? () => this.scaleLimits : undefined,\n      onChange: (transform) => {\n        this.transform = transform\n        this.$emit('transform', transform)\n      },\n    })\n\n    controller.attach(this.$el as HTMLElement)\n    controllers.set(this, controller)\n\n    if (this.fitOnMount) this.$nextTick(() => this.fit())\n  },\n\n  beforeDestroy() {\n    controllers.get(this)?.detach()\n    controllers.delete(this)\n  },\n\n  methods: {\n    /** Вписывает дерево в видимую область. */\n    fit(padding?: number): void {\n      controllers.get(this)?.fit({ width: this.layout.width, height: this.layout.height }, padding)\n    },\n    zoomIn(): void {\n      controllers.get(this)?.zoomIn()\n    },\n    zoomOut(): void {\n      controllers.get(this)?.zoomOut()\n    },\n    resetTransform(): void {\n      controllers.get(this)?.reset()\n    },\n    setTransform(transform: Transform): void {\n      controllers.get(this)?.set(transform)\n    },\n    /** Развернуть все свёрнутые ветки. */\n    expandAll(): void {\n      this.collapsedIds = []\n    },\n    /** Свернуть или развернуть узел по id. */\n    toggle(id: string): void {\n      this.collapsedIds = [...toggleCollapsed(new Set(this.collapsedIds), id)]\n    },\n\n    toggleNode(node: LayoutNode<NodeData>): void {\n      this.toggle(node.id)\n      this.$emit('toggle', node, this.collapsedIds.includes(node.id))\n    },\n\n    onNodeClick(node: LayoutNode<NodeData>, event: MouseEvent): void {\n      this.$emit('node-click', node, event)\n      if (this.collapsible && node.hasChildren) this.toggleNode(node)\n    },\n\n    nodeStyle(node: LayoutNode<NodeData>): Record<string, string> {\n      return {\n        left: `${node.x}px`,\n        top: `${node.y}px`,\n        width: `${node.width}px`,\n        height: `${node.height}px`,\n      }\n    },\n\n    nodeClassOf(node: LayoutNode<NodeData>): string | undefined {\n      return typeof this.nodeClass === 'function' ? this.nodeClass(node) : this.nodeClass\n    },\n\n    /** Подпись карточки по умолчанию: name → title → label → id. */\n    labelOf(node: LayoutNode<NodeData>): string {\n      const data = node.data as { name?: string; title?: string; label?: string } | null\n      return data?.name ?? data?.title ?? data?.label ?? node.id\n    },\n\n    /** Своя карточка из scoped-слота или карточка по умолчанию. */\n    renderNodeContent(h: typeof Vue.prototype.$createElement, node: LayoutNode<NodeData>): VNode | VNode[] {\n      const slot = this.$scopedSlots.node\n\n      if (slot) {\n        return (slot({\n          node,\n          data: node.data,\n          depth: node.depth,\n          collapsed: node.collapsed,\n          hasChildren: node.hasChildren,\n          toggle: () => this.toggleNode(node),\n        }) ?? []) as VNode[]\n      }\n\n      return h(TreeNodeCard, {\n        props: { label: this.labelOf(node), hasChildren: node.hasChildren, collapsed: node.collapsed },\n        on: { toggle: () => this.toggleNode(node) },\n      })\n    },\n  },\n\n  render(h): VNode {\n    const layout = this.layout\n    const linkSlot = this.$scopedSlots.link\n\n    const links = layout.links.map((link) =>\n      linkSlot\n        ? ((linkSlot({ link }) ?? []) as VNode[])\n        : h('path', { key: link.id, class: 'tree-view__link', attrs: { d: link.path } }),\n    )\n\n    const nodes = layout.nodes.map((node) =>\n      h(\n        'div',\n        {\n          key: node.id,\n          class: ['tree-view__node', this.nodeClassOf(node)],\n          style: this.nodeStyle(node),\n          on: { click: (event: MouseEvent) => this.onNodeClick(node, event) },\n        },\n        ([] as VNode[]).concat(this.renderNodeContent(h, node)),\n      ),\n    )\n\n    return h(\n      'div',\n      {\n        class: [\n          'tree-view',\n          { 'tree-view--pannable': this.pannable, 'tree-view--content': this.size === 'content' },\n        ],\n        style: this.rootStyle,\n      },\n      [\n        h('div', { class: 'tree-view__canvas', style: this.canvasStyle }, [\n          h(\n            'svg',\n            {\n              class: 'tree-view__links',\n              attrs: { width: layout.width, height: layout.height },\n            },\n            links as VNode[],\n          ),\n          ...nodes,\n        ]),\n      ],\n    )\n  },\n})\n","import type { VueConstructor } from 'vue'\nimport TreeView from './TreeView'\nimport TreeNodeCard from './TreeNodeCard'\n// Стили общие для Vue 2 и Vue 3 — лежат в core, чтобы не расходились.\n// Они попадают прямо в бандл и подключаются сами: отдельный импорт в проекте не нужен.\nimport { injectStyles } from '@bigplay/tree-view-core'\nimport styles from '@bigplay/tree-view-core/style.css?inline'\n\ninjectStyles(styles)\n\nexport { TreeView, TreeNodeCard }\n\nexport type {\n  Accessors,\n  Direction,\n  Layout,\n  LayoutLink,\n  LayoutNode,\n  LinkStyle,\n  ScaleLimits,\n  Transform,\n  TreeNode,\n  TreeViewOptions,\n} from '@bigplay/tree-view-core'\nexport { DEFAULT_OPTIONS } from '@bigplay/tree-view-core'\n\n/** Плагин: `Vue.use(TreeViewPlugin)` регистрирует компоненты глобально. */\nexport const TreeViewPlugin = {\n  install(Vue: VueConstructor) {\n    Vue.component('TreeView', TreeView)\n    Vue.component('TreeNodeCard', TreeNodeCard)\n  },\n}\n\nexport default TreeViewPlugin\n"],"names":["TreeNodeCard","Vue","h","children","event","controllers","TreeView","tree","toTree","layoutTree","applyCollapsed","toCssTransform","controller","PanZoomController","transform","padding","id","toggleCollapsed","node","data","slot","layout","linkSlot","links","link","nodes","injectStyles","styles","TreeViewPlugin"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../src/TreeNodeCard.ts","../src/TreeView.ts","../src/BracketCard.ts","../src/index.ts"],"sourcesContent":["import Vue from 'vue'\n\n/**\n * Карточка узла по умолчанию для Vue 2.\n * Разметка и классы один в один как в Vue 3 — стили общие.\n */\nexport default Vue.extend({\n  name: 'TreeNodeCard',\n  props: {\n    label: { type: String, required: true },\n    hasChildren: { type: Boolean, default: false },\n    collapsed: { type: Boolean, default: false },\n  },\n  render(h) {\n    const children = [h('span', { class: 'tree-view-card__label' }, this.label)]\n\n    if (this.hasChildren) {\n      children.push(\n        h(\n          'button',\n          {\n            class: 'tree-view-card__toggle',\n            attrs: {\n              type: 'button',\n              'data-tv-no-pan': '',\n              'aria-label': this.collapsed ? 'Развернуть' : 'Свернуть',\n            },\n            on: {\n              click: (event: MouseEvent) => {\n                event.stopPropagation()\n                this.$emit('toggle')\n              },\n            },\n          },\n          this.collapsed ? '+' : '−',\n        ),\n      )\n    }\n\n    return h('div', { class: 'tree-view-card' }, children)\n  },\n})\n","import Vue, { type PropType, type VNode } from 'vue'\nimport {\n  applyCollapsed,\n  DEFAULT_OVERSCAN,\n  estimateVisibleRect,\n  layoutTree,\n  measureVisibleRect,\n  PanZoomController,\n  toCssTransform,\n  toggleCollapsed,\n  toTree,\n  visibleLayout,\n  type Accessors,\n  type Layout,\n  type LayoutNode,\n  type Rect,\n  type ScaleLimits,\n  type Transform,\n  type TreeViewOptions,\n} from '@bigplay/tree-view-core'\nimport TreeNodeCard from './TreeNodeCard'\n\n/** Данные узла могут быть какими угодно — библиотека читает их только аксессорами. */\ntype NodeData = any\n\n/**\n * Контроллеры держим здесь, а не в data(): Vue 2 сделал бы объект реактивным,\n * а внутри него DOM-элемент и Map — наблюдать за ними незачем.\n */\nconst controllers = new WeakMap<Vue, PanZoomController>()\n\nexport default Vue.extend({\n  name: 'TreeView',\n  props: {\n    /** Объект, массив объектов или плоский список (вместе с `getParentId`). */\n    data: { type: [Object, Array] as PropType<NodeData>, default: null },\n    /** Размеры и направление. Можно передать только часть полей. */\n    options: { type: Object as PropType<Partial<TreeViewOptions>>, default: undefined },\n    /** Как достать id узла. По умолчанию — поле `id`. */\n    getId: { type: Function as PropType<Accessors<NodeData>['getId']>, default: undefined },\n    /** Как достать детей. По умолчанию — поле `children`. */\n    getChildren: { type: Function as PropType<Accessors<NodeData>['getChildren']>, default: undefined },\n    /** Как достать id родителя. Передан — значит данные плоские. */\n    getParentId: { type: Function as PropType<Accessors<NodeData>['getParentId']>, default: undefined },\n    /** Клик по узлу сворачивает/разворачивает ветку. */\n    collapsible: { type: Boolean, default: false },\n    /** Разрешить перетаскивание холста. */\n    pannable: { type: Boolean, default: true },\n    /** Разрешить зум колесом и «щипком». */\n    zoomable: { type: Boolean, default: true },\n    /** Вписать дерево в контейнер при первом отображении. */\n    fitOnMount: { type: Boolean, default: true },\n    /**\n     * Как компонент занимает место:\n     *  - `'fill'` (по умолчанию) — растягивается на родителя, лишнее обрезается;\n     *  - `'content'` — контейнер принимает размер дерева и ничего не обрезает.\n     */\n    size: { type: String as PropType<'fill' | 'content'>, default: 'fill' },\n    /** Пределы масштаба. */\n    scaleLimits: { type: Object as PropType<ScaleLimits>, default: undefined },\n    /** Дополнительный класс на обёртке узла — строкой или функцией. */\n    nodeClass: {\n      type: [String, Function] as PropType<string | ((node: LayoutNode<NodeData>) => string)>,\n      default: undefined,\n    },\n    /**\n     * Рисовать только то, что видно на экране. На больших сетках в DOM\n     * попадает несколько десятков карточек вместо тысячи.\n     */\n    virtualize: { type: Boolean, default: true },\n    /** Запас вокруг видимой области в пикселях. */\n    overscan: { type: Number, default: DEFAULT_OVERSCAN },\n  },\n\n  data() {\n    return {\n      /** Массив, а не Set: Vue 2 не умеет наблюдать за Set. */\n      collapsedIds: [] as string[],\n      transform: { x: 0, y: 0, scale: 1 } as Transform,\n      /**\n       * Видимая часть холста; `null` — рисуем всё.\n       * До первого измерения берём размер окна: иначе первый кадр\n       * нарисует дерево целиком и тут же выбросит лишнее.\n       */\n      visibleRect: (this.virtualize ? estimateVisibleRect() : null) as Rect | null,\n    }\n  },\n\n  computed: {\n    layout(): Layout<NodeData> {\n      const tree = toTree<NodeData>(this.data, {\n        getId: this.getId,\n        getChildren: this.getChildren,\n        getParentId: this.getParentId,\n      })\n\n      return layoutTree(applyCollapsed(tree, new Set(this.collapsedIds)), this.options)\n    },\n\n    /** То, что реально попадёт в DOM: при `virtualize` — только видимая часть. */\n    drawn(): Layout<NodeData> {\n      return this.virtualize ? visibleLayout(this.layout, this.visibleRect, this.overscan) : this.layout\n    },\n\n    canvasStyle(): Record<string, string> {\n      return {\n        width: `${this.layout.width}px`,\n        height: `${this.layout.height}px`,\n        transform: toCssTransform(this.transform),\n      }\n    },\n\n    rootStyle(): Record<string, string> | undefined {\n      if (this.size !== 'content') return undefined\n\n      return {\n        width: `${this.layout.width * this.transform.scale}px`,\n        height: `${this.layout.height * this.transform.scale}px`,\n        overflow: 'visible',\n      }\n    },\n  },\n\n  watch: {\n    // Новые данные — видимую часть надо пересчитать уже по ним.\n    layout() {\n      this.$nextTick(() => this.updateVisibleRect())\n    },\n  },\n\n  mounted() {\n    const controller = new PanZoomController({\n      pannable: () => this.pannable,\n      zoomable: () => this.zoomable,\n      limits: this.scaleLimits ? () => this.scaleLimits : undefined,\n      onChange: (transform) => {\n        this.transform = transform\n        // Холст поехал — видимая часть стала другой.\n        this.updateVisibleRect()\n        this.$emit('transform', transform)\n      },\n    })\n\n    controller.attach(this.$el as HTMLElement)\n    controllers.set(this, controller)\n\n    this.updateVisibleRect()\n    window.addEventListener('scroll', this.updateVisibleRect, { passive: true, capture: true })\n    window.addEventListener('resize', this.updateVisibleRect, { passive: true })\n\n    if (this.fitOnMount) this.$nextTick(() => this.fit())\n  },\n\n  beforeDestroy() {\n    controllers.get(this)?.detach()\n    controllers.delete(this)\n    window.removeEventListener('scroll', this.updateVisibleRect, { capture: true } as EventListenerOptions)\n    window.removeEventListener('resize', this.updateVisibleRect)\n  },\n\n  methods: {\n    /** Пересчитывает, какая часть холста сейчас видна на экране. */\n    updateVisibleRect(): void {\n      this.visibleRect = this.virtualize\n        ? measureVisibleRect(this.$refs.canvas as Element | undefined, this.transform.scale)\n        : null\n    },\n\n    /** Вписывает дерево в видимую область. */\n    fit(padding?: number): void {\n      controllers.get(this)?.fit({ width: this.layout.width, height: this.layout.height }, padding)\n    },\n    zoomIn(): void {\n      controllers.get(this)?.zoomIn()\n    },\n    zoomOut(): void {\n      controllers.get(this)?.zoomOut()\n    },\n    resetTransform(): void {\n      controllers.get(this)?.reset()\n    },\n    setTransform(transform: Transform): void {\n      controllers.get(this)?.set(transform)\n    },\n    /** Развернуть все свёрнутые ветки. */\n    expandAll(): void {\n      this.collapsedIds = []\n    },\n    /** Свернуть или развернуть узел по id. */\n    toggle(id: string): void {\n      this.collapsedIds = [...toggleCollapsed(new Set(this.collapsedIds), id)]\n    },\n\n    toggleNode(node: LayoutNode<NodeData>): void {\n      this.toggle(node.id)\n      this.$emit('toggle', node, this.collapsedIds.includes(node.id))\n    },\n\n    onNodeClick(node: LayoutNode<NodeData>, event: MouseEvent): void {\n      this.$emit('node-click', node, event)\n      if (this.collapsible && node.hasChildren) this.toggleNode(node)\n    },\n\n    nodeStyle(node: LayoutNode<NodeData>): Record<string, string> {\n      return {\n        left: `${node.x}px`,\n        top: `${node.y}px`,\n        width: `${node.width}px`,\n        height: `${node.height}px`,\n      }\n    },\n\n    nodeClassOf(node: LayoutNode<NodeData>): string | undefined {\n      return typeof this.nodeClass === 'function' ? this.nodeClass(node) : this.nodeClass\n    },\n\n    /** Подпись карточки по умолчанию: name → title → label → id. */\n    labelOf(node: LayoutNode<NodeData>): string {\n      const data = node.data as { name?: string; title?: string; label?: string } | null\n      return data?.name ?? data?.title ?? data?.label ?? node.id\n    },\n\n    /** Своя карточка из scoped-слота или карточка по умолчанию. */\n    renderNodeContent(h: typeof Vue.prototype.$createElement, node: LayoutNode<NodeData>): VNode | VNode[] {\n      const slot = this.$scopedSlots.node\n\n      if (slot) {\n        return (slot({\n          node,\n          data: node.data,\n          depth: node.depth,\n          collapsed: node.collapsed,\n          hasChildren: node.hasChildren,\n          toggle: () => this.toggleNode(node),\n        }) ?? []) as VNode[]\n      }\n\n      return h(TreeNodeCard, {\n        props: { label: this.labelOf(node), hasChildren: node.hasChildren, collapsed: node.collapsed },\n        on: { toggle: () => this.toggleNode(node) },\n      })\n    },\n  },\n\n  render(h): VNode {\n    const layout = this.layout\n    const drawn = this.drawn\n    const linkSlot = this.$scopedSlots.link\n\n    const links = drawn.links.map((link) =>\n      linkSlot\n        ? ((linkSlot({ link }) ?? []) as VNode[])\n        : h('path', { key: link.id, class: 'tree-view__link', attrs: { d: link.path } }),\n    )\n\n    const nodes = drawn.nodes.map((node) =>\n      h(\n        'div',\n        {\n          key: node.id,\n          class: ['tree-view__node', this.nodeClassOf(node)],\n          style: this.nodeStyle(node),\n          on: { click: (event: MouseEvent) => this.onNodeClick(node, event) },\n        },\n        ([] as VNode[]).concat(this.renderNodeContent(h, node)),\n      ),\n    )\n\n    return h(\n      'div',\n      {\n        class: [\n          'tree-view',\n          { 'tree-view--pannable': this.pannable, 'tree-view--content': this.size === 'content' },\n        ],\n        style: this.rootStyle,\n      },\n      [\n        h('div', { ref: 'canvas', class: 'tree-view__canvas', style: this.canvasStyle }, [\n          h(\n            'svg',\n            {\n              class: 'tree-view__links',\n              attrs: { width: layout.width, height: layout.height },\n            },\n            links as VNode[],\n          ),\n          ...nodes,\n        ]),\n      ],\n    )\n  },\n})\n","import Vue, { type PropType, type VNode } from 'vue'\nimport {\n  buildBracketCard,\n  type BracketCardMatch,\n  type BracketCardRow,\n} from '@bigplay/tree-view-core'\n\n/**\n * Карточка матча для Vue 2. Разметка и классы один в один как в Vue 3 —\n * строки считает та же функция из core, стили общие.\n */\nexport default Vue.extend({\n  name: 'BracketCard',\n  props: {\n    /** Матч: нужны только команды. */\n    match: { type: Object as PropType<BracketCardMatch | null>, default: null },\n    /** Сколько строк рисовать. У финала — одна. */\n    rows: { type: Number, default: undefined },\n    /** Подсказка над карточкой с моей командой. Пустая строка — не показывать. */\n    myTeamHint: { type: String, default: 'Нажми для перехода в матч 👇' },\n    /** Текст в ячейке счёта при техническом поражении. */\n    techDefeatLabel: { type: String, default: 'ТП' },\n    /** Подсказка по наведению на техническое поражение. */\n    techDefeatHint: { type: String, default: 'Техническое поражение' },\n  },\n\n  data() {\n    return { hoveredKey: null as string | null }\n  },\n\n  computed: {\n    card(): ReturnType<typeof buildBracketCard> {\n      return buildBracketCard(this.match, { rows: this.rows, techDefeatLabel: this.techDefeatLabel })\n    },\n  },\n\n  methods: {\n    renderRow(h: typeof Vue.prototype.$createElement, row: BracketCardRow): VNode {\n      const content: VNode[] = []\n\n      if (row.team) {\n        if (row.isTechDefeat && this.hoveredKey === row.key) {\n          content.push(h('span', { class: 'tv-bracket__tooltip' }, this.techDefeatHint))\n        }\n        content.push(h('span', { class: 'tv-bracket__name' }, row.team.name))\n        content.push(h('span', { class: 'tv-bracket__score' }, row.score))\n      }\n\n      return h(\n        'div',\n        {\n          key: row.key,\n          class: [\n            'tv-bracket__row',\n            {\n              'tv-bracket__row--winner': row.isWinner,\n              'tv-bracket__row--loser': row.isLoser && !row.isEmpty,\n              'tv-bracket__row--my': row.isMyTeam,\n              'tv-bracket__row--empty': row.isEmpty,\n            },\n          ],\n          attrs: row.isMyTeam ? { title: 'Моя команда' } : {},\n          on: {\n            click: () => {\n              if (row.team) this.$emit('select', row.team, row)\n            },\n            mouseenter: () => {\n              this.hoveredKey = row.key\n            },\n            mouseleave: () => {\n              this.hoveredKey = null\n            },\n          },\n        },\n        content,\n      )\n    },\n  },\n\n  render(h): VNode {\n    const card = this.card\n    const children: VNode[] = []\n\n    if (card.hasMyTeam && this.myTeamHint) {\n      children.push(h('div', { class: 'tv-bracket__hint' }, this.myTeamHint))\n    }\n\n    for (const row of card.rows) children.push(this.renderRow(h, row))\n\n    return h('div', { class: ['tv-bracket', { 'tv-bracket--my-team': card.hasMyTeam }] }, children)\n  },\n})\n","import type { VueConstructor } from 'vue'\nimport TreeView from './TreeView'\nimport TreeNodeCard from './TreeNodeCard'\nimport BracketCard from './BracketCard'\n// Стили общие для Vue 2 и Vue 3 — лежат в core, чтобы не расходились.\n// Они попадают прямо в бандл и подключаются сами: отдельный импорт в проекте не нужен.\nimport { injectStyles } from '@bigplay/tree-view-core'\nimport styles from '@bigplay/tree-view-core/style.css?inline'\n\ninjectStyles(styles)\n\nexport { TreeView, TreeNodeCard, BracketCard }\n\nexport type {\n  Accessors,\n  BracketCardMatch,\n  BracketCardModel,\n  BracketCardOptions,\n  BracketCardRow,\n  BracketCardTeam,\n  Direction,\n  Layout,\n  LayoutLink,\n  LayoutNode,\n  LinkStyle,\n  ScaleLimits,\n  Transform,\n  TreeNode,\n  TreeViewOptions,\n} from '@bigplay/tree-view-core'\nexport { DEFAULT_OPTIONS, buildBracketCard, bracketCardHeight } from '@bigplay/tree-view-core'\n\n/** Плагин: `Vue.use(TreeViewPlugin)` регистрирует компоненты глобально. */\nexport const TreeViewPlugin = {\n  install(Vue: VueConstructor) {\n    Vue.component('TreeView', TreeView)\n    Vue.component('TreeNodeCard', TreeNodeCard)\n    Vue.component('BracketCard', BracketCard)\n  },\n}\n\nexport default TreeViewPlugin\n"],"names":["TreeNodeCard","Vue","h","children","event","controllers","TreeView","DEFAULT_OVERSCAN","estimateVisibleRect","tree","toTree","layoutTree","applyCollapsed","visibleLayout","toCssTransform","controller","PanZoomController","transform","measureVisibleRect","padding","id","toggleCollapsed","node","data","slot","layout","drawn","linkSlot","links","link","nodes","BracketCard","buildBracketCard","row","content","card","injectStyles","styles","TreeViewPlugin"],"mappings":"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"}

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import { VueConstructor } from 'vue';
 import { default as TreeView } from './TreeView';
 import { default as TreeNodeCard } from './TreeNodeCard';
-export { TreeView, TreeNodeCard };
-export type { Accessors, Direction, Layout, LayoutLink, LayoutNode, LinkStyle, ScaleLimits, Transform, TreeNode, TreeViewOptions, } from '@bigplay/tree-view-core';
-export { DEFAULT_OPTIONS } from '@bigplay/tree-view-core';
+import { default as BracketCard } from './BracketCard';
+export { TreeView, TreeNodeCard, BracketCard };
+export type { Accessors, BracketCardMatch, BracketCardModel, BracketCardOptions, BracketCardRow, BracketCardTeam, Direction, Layout, LayoutLink, LayoutNode, LinkStyle, ScaleLimits, Transform, TreeNode, TreeViewOptions, } from '@bigplay/tree-view-core';
+export { DEFAULT_OPTIONS, buildBracketCard, bracketCardHeight } from '@bigplay/tree-view-core';
 /** Плагин: `Vue.use(TreeViewPlugin)` регистрирует компоненты глобально. */
 export declare const TreeViewPlugin: {
     install(Vue: VueConstructor): void;

package/dist/index.js

@@ -1,7 +1,7 @@
-import l from "vue";
-import { toggleCollapsed as h, PanZoomController as c, toCssTransform as p, toTree as g, layoutTree as v, applyCollapsed as f, injectStyles as u } from "@bigplay/tree-view-core";
-import { DEFAULT_OPTIONS as k } from "@bigplay/tree-view-core";
-const a = l.extend({
+import s from "vue";
+import { DEFAULT_OVERSCAN as h, toggleCollapsed as p, measureVisibleRect as v, PanZoomController as b, toCssTransform as u, visibleLayout as f, toTree as g, layoutTree as m, applyCollapsed as w, estimateVisibleRect as y, buildBracketCard as k, injectStyles as x } from "@bigplay/tree-view-core";
+import { DEFAULT_OPTIONS as N, bracketCardHeight as O, buildBracketCard as L } from "@bigplay/tree-view-core";
+const l = s.extend({
   name: "TreeNodeCard",
   props: {
     label: { type: String, required: !0 },
@@ -21,8 +21,8 @@ const a = l.extend({
             "aria-label": this.collapsed ? "Развернуть" : "Свернуть"
           },
           on: {
-            click: (s) => {
-              s.stopPropagation(), this.$emit("toggle");
+            click: (i) => {
+              i.stopPropagation(), this.$emit("toggle");
             }
           }
         },
@@ -30,7 +30,7 @@ const a = l.extend({
       )
     ), e("div", { class: "tree-view-card" }, t);
   }
-}), o = /* @__PURE__ */ new WeakMap(), w = l.extend({
+}), r = /* @__PURE__ */ new WeakMap(), _ = s.extend({
   name: "TreeView",
   props: {
     /** Объект, массив объектов или плоский список (вместе с `getParentId`). */
@@ -63,13 +63,26 @@ const a = l.extend({
     nodeClass: {
       type: [String, Function],
       default: void 0
-    }
+    },
+    /**
+     * Рисовать только то, что видно на экране. На больших сетках в DOM
+     * попадает несколько десятков карточек вместо тысячи.
+     */
+    virtualize: { type: Boolean, default: !0 },
+    /** Запас вокруг видимой области в пикселях. */
+    overscan: { type: Number, default: h }
   },
   data() {
     return {
       /** Массив, а не Set: Vue 2 не умеет наблюдать за Set. */
       collapsedIds: [],
-      transform: { x: 0, y: 0, scale: 1 }
+      transform: { x: 0, y: 0, scale: 1 },
+      /**
+       * Видимая часть холста; `null` — рисуем всё.
+       * До первого измерения берём размер окна: иначе первый кадр
+       * нарисует дерево целиком и тут же выбросит лишнее.
+       */
+      visibleRect: this.virtualize ? y() : null
     };
   },
   computed: {
@@ -79,13 +92,17 @@ const a = l.extend({
         getChildren: this.getChildren,
         getParentId: this.getParentId
       });
-      return v(f(e, new Set(this.collapsedIds)), this.options);
+      return m(w(e, new Set(this.collapsedIds)), this.options);
+    },
+    /** То, что реально попадёт в DOM: при `virtualize` — только видимая часть. */
+    drawn() {
+      return this.virtualize ? f(this.layout, this.visibleRect, this.overscan) : this.layout;
     },
     canvasStyle() {
       return {
         width: `${this.layout.width}px`,
         height: `${this.layout.height}px`,
-        transform: p(this.transform)
+        transform: u(this.transform)
       };
     },
     rootStyle() {
@@ -97,36 +114,46 @@ const a = l.extend({
         };
     }
   },
+  watch: {
+    // Новые данные — видимую часть надо пересчитать уже по ним.
+    layout() {
+      this.$nextTick(() => this.updateVisibleRect());
+    }
+  },
   mounted() {
-    const e = new c({
+    const e = new b({
       pannable: () => this.pannable,
       zoomable: () => this.zoomable,
       limits: this.scaleLimits ? () => this.scaleLimits : void 0,
       onChange: (t) => {
-        this.transform = t, this.$emit("transform", t);
+        this.transform = t, this.updateVisibleRect(), this.$emit("transform", t);
       }
     });
-    e.attach(this.$el), o.set(this, e), this.fitOnMount && this.$nextTick(() => this.fit());
+    e.attach(this.$el), r.set(this, e), this.updateVisibleRect(), window.addEventListener("scroll", this.updateVisibleRect, { passive: !0, capture: !0 }), window.addEventListener("resize", this.updateVisibleRect, { passive: !0 }), this.fitOnMount && this.$nextTick(() => this.fit());
   },
   beforeDestroy() {
-    o.get(this)?.detach(), o.delete(this);
+    r.get(this)?.detach(), r.delete(this), window.removeEventListener("scroll", this.updateVisibleRect, { capture: !0 }), window.removeEventListener("resize", this.updateVisibleRect);
   },
   methods: {
+    /** Пересчитывает, какая часть холста сейчас видна на экране. */
+    updateVisibleRect() {
+      this.visibleRect = this.virtualize ? v(this.$refs.canvas, this.transform.scale) : null;
+    },
     /** Вписывает дерево в видимую область. */
     fit(e) {
-      o.get(this)?.fit({ width: this.layout.width, height: this.layout.height }, e);
+      r.get(this)?.fit({ width: this.layout.width, height: this.layout.height }, e);
     },
     zoomIn() {
-      o.get(this)?.zoomIn();
+      r.get(this)?.zoomIn();
     },
     zoomOut() {
-      o.get(this)?.zoomOut();
+      r.get(this)?.zoomOut();
     },
     resetTransform() {
-      o.get(this)?.reset();
+      r.get(this)?.reset();
     },
     setTransform(e) {
-      o.get(this)?.set(e);
+      r.get(this)?.set(e);
     },
     /** Развернуть все свёрнутые ветки. */
     expandAll() {
@@ -134,7 +161,7 @@ const a = l.extend({
     },
     /** Свернуть или развернуть узел по id. */
     toggle(e) {
-      this.collapsedIds = [...h(new Set(this.collapsedIds), e)];
+      this.collapsedIds = [...p(new Set(this.collapsedIds), e)];
     },
     toggleNode(e) {
       this.toggle(e.id), this.$emit("toggle", e, this.collapsedIds.includes(e.id));
@@ -160,33 +187,33 @@ const a = l.extend({
     },
     /** Своя карточка из scoped-слота или карточка по умолчанию. */
     renderNodeContent(e, t) {
-      const s = this.$scopedSlots.node;
-      return s ? s({
+      const i = this.$scopedSlots.node;
+      return i ? i({
         node: t,
         data: t.data,
         depth: t.depth,
         collapsed: t.collapsed,
         hasChildren: t.hasChildren,
         toggle: () => this.toggleNode(t)
-      }) ?? [] : e(a, {
+      }) ?? [] : e(l, {
         props: { label: this.labelOf(t), hasChildren: t.hasChildren, collapsed: t.collapsed },
         on: { toggle: () => this.toggleNode(t) }
       });
     }
   },
   render(e) {
-    const t = this.layout, s = this.$scopedSlots.link, n = t.links.map(
-      (i) => s ? s({ link: i }) ?? [] : e("path", { key: i.id, class: "tree-view__link", attrs: { d: i.path } })
-    ), r = t.nodes.map(
-      (i) => e(
+    const t = this.layout, i = this.drawn, o = this.$scopedSlots.link, n = i.links.map(
+      (a) => o ? o({ link: a }) ?? [] : e("path", { key: a.id, class: "tree-view__link", attrs: { d: a.path } })
+    ), d = i.nodes.map(
+      (a) => e(
         "div",
         {
-          key: i.id,
-          class: ["tree-view__node", this.nodeClassOf(i)],
-          style: this.nodeStyle(i),
-          on: { click: (d) => this.onNodeClick(i, d) }
+          key: a.id,
+          class: ["tree-view__node", this.nodeClassOf(a)],
+          style: this.nodeStyle(a),
+          on: { click: (c) => this.onNodeClick(a, c) }
         },
-        [].concat(this.renderNodeContent(e, i))
+        [].concat(this.renderNodeContent(e, a))
       )
     );
     return e(
@@ -199,7 +226,7 @@ const a = l.extend({
         style: this.rootStyle
       },
       [
-        e("div", { class: "tree-view__canvas", style: this.canvasStyle }, [
+        e("div", { ref: "canvas", class: "tree-view__canvas", style: this.canvasStyle }, [
           e(
             "svg",
             {
@@ -208,23 +235,87 @@ const a = l.extend({
             },
             n
           ),
-          ...r
+          ...d
         ])
       ]
     );
   }
-}), b = ".tree-view{--tv-link-color: #cbd5e1;--tv-link-width: 2px;--tv-node-bg: #ffffff;--tv-node-color: #0f172a;--tv-node-border: 1px solid #e2e8f0;--tv-node-radius: 10px;--tv-node-shadow: 0 1px 2px rgb(15 23 42 / 8%);--tv-node-padding: 8px 12px;--tv-accent: #2563eb;position:relative;width:100%;height:100%;overflow:hidden;touch-action:none}.tree-view--pannable{cursor:grab}.tree-view--content{width:auto;height:auto;overflow:visible}.tree-view__canvas{position:absolute;top:0;left:0;transform-origin:0 0}.tree-view__links{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}.tree-view__link{fill:none;stroke:var(--tv-link-color);stroke-width:var(--tv-link-width)}.tree-view__node{position:absolute;box-sizing:border-box;display:flex;align-items:stretch;justify-content:stretch}.tree-view-card{box-sizing:border-box;display:flex;gap:8px;align-items:center;justify-content:space-between;width:100%;height:100%;padding:var(--tv-node-padding);overflow:hidden;color:var(--tv-node-color);background:var(--tv-node-bg);border:var(--tv-node-border);border-radius:var(--tv-node-radius);box-shadow:var(--tv-node-shadow)}.tree-view-card__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-view-card__toggle{flex:none;width:20px;height:20px;padding:0;font:inherit;line-height:1;color:var(--tv-accent);cursor:pointer;background:none;border:none}";
-u(b);
-const x = {
+}), C = s.extend({
+  name: "BracketCard",
+  props: {
+    /** Матч: нужны только команды. */
+    match: { type: Object, default: null },
+    /** Сколько строк рисовать. У финала — одна. */
+    rows: { type: Number, default: void 0 },
+    /** Подсказка над карточкой с моей командой. Пустая строка — не показывать. */
+    myTeamHint: { type: String, default: "Нажми для перехода в матч 👇" },
+    /** Текст в ячейке счёта при техническом поражении. */
+    techDefeatLabel: { type: String, default: "ТП" },
+    /** Подсказка по наведению на техническое поражение. */
+    techDefeatHint: { type: String, default: "Техническое поражение" }
+  },
+  data() {
+    return { hoveredKey: null };
+  },
+  computed: {
+    card() {
+      return k(this.match, { rows: this.rows, techDefeatLabel: this.techDefeatLabel });
+    }
+  },
+  methods: {
+    renderRow(e, t) {
+      const i = [];
+      return t.team && (t.isTechDefeat && this.hoveredKey === t.key && i.push(e("span", { class: "tv-bracket__tooltip" }, this.techDefeatHint)), i.push(e("span", { class: "tv-bracket__name" }, t.team.name)), i.push(e("span", { class: "tv-bracket__score" }, t.score))), e(
+        "div",
+        {
+          key: t.key,
+          class: [
+            "tv-bracket__row",
+            {
+              "tv-bracket__row--winner": t.isWinner,
+              "tv-bracket__row--loser": t.isLoser && !t.isEmpty,
+              "tv-bracket__row--my": t.isMyTeam,
+              "tv-bracket__row--empty": t.isEmpty
+            }
+          ],
+          attrs: t.isMyTeam ? { title: "Моя команда" } : {},
+          on: {
+            click: () => {
+              t.team && this.$emit("select", t.team, t);
+            },
+            mouseenter: () => {
+              this.hoveredKey = t.key;
+            },
+            mouseleave: () => {
+              this.hoveredKey = null;
+            }
+          }
+        },
+        i
+      );
+    }
+  },
+  render(e) {
+    const t = this.card, i = [];
+    t.hasMyTeam && this.myTeamHint && i.push(e("div", { class: "tv-bracket__hint" }, this.myTeamHint));
+    for (const o of t.rows) i.push(this.renderRow(e, o));
+    return e("div", { class: ["tv-bracket", { "tv-bracket--my-team": t.hasMyTeam }] }, i);
+  }
+}), T = ".tree-view{--tv-link-color: #cbd5e1;--tv-link-width: 2px;--tv-node-bg: #ffffff;--tv-node-color: #0f172a;--tv-node-border: 1px solid #e2e8f0;--tv-node-radius: 10px;--tv-node-shadow: 0 1px 2px rgb(15 23 42 / 8%);--tv-node-padding: 8px 12px;--tv-accent: #2563eb;position:relative;width:100%;height:100%;overflow:hidden;touch-action:none}.tree-view--pannable{cursor:grab}.tree-view--content{width:auto;height:auto;overflow:visible}.tree-view__canvas{position:absolute;top:0;left:0;transform-origin:0 0}.tree-view__links{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}.tree-view__link{fill:none;stroke:var(--tv-link-color);stroke-width:var(--tv-link-width)}.tree-view__node{position:absolute;box-sizing:border-box;display:flex;align-items:stretch;justify-content:stretch}.tree-view-card{box-sizing:border-box;display:flex;gap:8px;align-items:center;justify-content:space-between;width:100%;height:100%;padding:var(--tv-node-padding);overflow:hidden;color:var(--tv-node-color);background:var(--tv-node-bg);border:var(--tv-node-border);border-radius:var(--tv-node-radius);box-shadow:var(--tv-node-shadow)}.tree-view-card__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-view-card__toggle{flex:none;width:20px;height:20px;padding:0;font:inherit;line-height:1;color:var(--tv-accent);cursor:pointer;background:none;border:none}.tv-bracket{--tv-bracket-winner-bg: #0427c4;--tv-bracket-winner-color: #ffffff;--tv-bracket-loser-bg: #e5e5e5;--tv-bracket-loser-color: #7d7d8d;--tv-bracket-my-bg: #00146c;--tv-bracket-my-color: #ffffff;--tv-bracket-radius: 6px;position:relative;box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;font-size:12px}.tv-bracket--my-team{border-radius:var(--tv-bracket-radius);outline:2px solid var(--tv-bracket-my-bg)}.tv-bracket__hint{position:absolute;right:0;bottom:100%;left:0;padding:3px 8px;overflow:hidden;font-size:11px;font-weight:600;line-height:1.2;color:var(--tv-bracket-my-color);text-align:center;text-overflow:ellipsis;white-space:nowrap;background:var(--tv-bracket-my-bg);border-radius:var(--tv-bracket-radius) var(--tv-bracket-radius) 0 0}.tv-bracket__row{position:relative;box-sizing:border-box;display:flex;flex:1 1 0;align-items:center;justify-content:space-between;min-height:0;padding:4px 8px;cursor:pointer;transition:all 75ms}.tv-bracket__row--winner{font-weight:700;color:var(--tv-bracket-winner-color);background:var(--tv-bracket-winner-bg)}.tv-bracket__row--loser{color:var(--tv-bracket-loser-color);background:var(--tv-bracket-loser-bg)}.tv-bracket__row--my{color:var(--tv-bracket-my-color);background:var(--tv-bracket-my-bg)}.tv-bracket__row--empty{cursor:default;background:var(--tv-bracket-loser-bg)}.tv-bracket__name{max-width:120px;overflow:hidden;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.tv-bracket__score{display:flex;flex:none;align-items:center;justify-content:center;width:20px;height:20px;font-weight:700;font-variant-numeric:tabular-nums}.tv-bracket__tooltip{position:absolute;top:-26px;left:6px;z-index:5000;padding:4px 8px;font-weight:400;color:var(--tv-bracket-loser-color);white-space:nowrap;background:#fff;border:1px solid #d1d5db;border-radius:4px;box-shadow:0 4px 10px #0f172a26}";
+x(T);
+const $ = {
   install(e) {
-    e.component("TreeView", w), e.component("TreeNodeCard", a);
+    e.component("TreeView", _), e.component("TreeNodeCard", l), e.component("BracketCard", C);
   }
 };
 export {
-  k as DEFAULT_OPTIONS,
-  a as TreeNodeCard,
-  w as TreeView,
-  x as TreeViewPlugin,
-  x as default
+  C as BracketCard,
+  N as DEFAULT_OPTIONS,
+  l as TreeNodeCard,
+  _ as TreeView,
+  $ as TreeViewPlugin,
+  O as bracketCardHeight,
+  L as buildBracketCard,
+  $ as default
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/TreeNodeCard.ts","../src/TreeView.ts","../src/index.ts"],"sourcesContent":["import Vue from 'vue'\n\n/**\n * Карточка узла по умолчанию для Vue 2.\n * Разметка и классы один в один как в Vue 3 — стили общие.\n */\nexport default Vue.extend({\n  name: 'TreeNodeCard',\n  props: {\n    label: { type: String, required: true },\n    hasChildren: { type: Boolean, default: false },\n    collapsed: { type: Boolean, default: false },\n  },\n  render(h) {\n    const children = [h('span', { class: 'tree-view-card__label' }, this.label)]\n\n    if (this.hasChildren) {\n      children.push(\n        h(\n          'button',\n          {\n            class: 'tree-view-card__toggle',\n            attrs: {\n              type: 'button',\n              'data-tv-no-pan': '',\n              'aria-label': this.collapsed ? 'Развернуть' : 'Свернуть',\n            },\n            on: {\n              click: (event: MouseEvent) => {\n                event.stopPropagation()\n                this.$emit('toggle')\n              },\n            },\n          },\n          this.collapsed ? '+' : '−',\n        ),\n      )\n    }\n\n    return h('div', { class: 'tree-view-card' }, children)\n  },\n})\n","import Vue, { type PropType, type VNode } from 'vue'\nimport {\n  applyCollapsed,\n  layoutTree,\n  PanZoomController,\n  toCssTransform,\n  toggleCollapsed,\n  toTree,\n  type Accessors,\n  type Layout,\n  type LayoutNode,\n  type ScaleLimits,\n  type Transform,\n  type TreeViewOptions,\n} from '@bigplay/tree-view-core'\nimport TreeNodeCard from './TreeNodeCard'\n\n/** Данные узла могут быть какими угодно — библиотека читает их только аксессорами. */\ntype NodeData = any\n\n/**\n * Контроллеры держим здесь, а не в data(): Vue 2 сделал бы объект реактивным,\n * а внутри него DOM-элемент и Map — наблюдать за ними незачем.\n */\nconst controllers = new WeakMap<Vue, PanZoomController>()\n\nexport default Vue.extend({\n  name: 'TreeView',\n  props: {\n    /** Объект, массив объектов или плоский список (вместе с `getParentId`). */\n    data: { type: [Object, Array] as PropType<NodeData>, default: null },\n    /** Размеры и направление. Можно передать только часть полей. */\n    options: { type: Object as PropType<Partial<TreeViewOptions>>, default: undefined },\n    /** Как достать id узла. По умолчанию — поле `id`. */\n    getId: { type: Function as PropType<Accessors<NodeData>['getId']>, default: undefined },\n    /** Как достать детей. По умолчанию — поле `children`. */\n    getChildren: { type: Function as PropType<Accessors<NodeData>['getChildren']>, default: undefined },\n    /** Как достать id родителя. Передан — значит данные плоские. */\n    getParentId: { type: Function as PropType<Accessors<NodeData>['getParentId']>, default: undefined },\n    /** Клик по узлу сворачивает/разворачивает ветку. */\n    collapsible: { type: Boolean, default: false },\n    /** Разрешить перетаскивание холста. */\n    pannable: { type: Boolean, default: true },\n    /** Разрешить зум колесом и «щипком». */\n    zoomable: { type: Boolean, default: true },\n    /** Вписать дерево в контейнер при первом отображении. */\n    fitOnMount: { type: Boolean, default: true },\n    /**\n     * Как компонент занимает место:\n     *  - `'fill'` (по умолчанию) — растягивается на родителя, лишнее обрезается;\n     *  - `'content'` — контейнер принимает размер дерева и ничего не обрезает.\n     */\n    size: { type: String as PropType<'fill' | 'content'>, default: 'fill' },\n    /** Пределы масштаба. */\n    scaleLimits: { type: Object as PropType<ScaleLimits>, default: undefined },\n    /** Дополнительный класс на обёртке узла — строкой или функцией. */\n    nodeClass: {\n      type: [String, Function] as PropType<string | ((node: LayoutNode<NodeData>) => string)>,\n      default: undefined,\n    },\n  },\n\n  data() {\n    return {\n      /** Массив, а не Set: Vue 2 не умеет наблюдать за Set. */\n      collapsedIds: [] as string[],\n      transform: { x: 0, y: 0, scale: 1 } as Transform,\n    }\n  },\n\n  computed: {\n    layout(): Layout<NodeData> {\n      const tree = toTree<NodeData>(this.data, {\n        getId: this.getId,\n        getChildren: this.getChildren,\n        getParentId: this.getParentId,\n      })\n\n      return layoutTree(applyCollapsed(tree, new Set(this.collapsedIds)), this.options)\n    },\n\n    canvasStyle(): Record<string, string> {\n      return {\n        width: `${this.layout.width}px`,\n        height: `${this.layout.height}px`,\n        transform: toCssTransform(this.transform),\n      }\n    },\n\n    rootStyle(): Record<string, string> | undefined {\n      if (this.size !== 'content') return undefined\n\n      return {\n        width: `${this.layout.width * this.transform.scale}px`,\n        height: `${this.layout.height * this.transform.scale}px`,\n        overflow: 'visible',\n      }\n    },\n  },\n\n  mounted() {\n    const controller = new PanZoomController({\n      pannable: () => this.pannable,\n      zoomable: () => this.zoomable,\n      limits: this.scaleLimits ? () => this.scaleLimits : undefined,\n      onChange: (transform) => {\n        this.transform = transform\n        this.$emit('transform', transform)\n      },\n    })\n\n    controller.attach(this.$el as HTMLElement)\n    controllers.set(this, controller)\n\n    if (this.fitOnMount) this.$nextTick(() => this.fit())\n  },\n\n  beforeDestroy() {\n    controllers.get(this)?.detach()\n    controllers.delete(this)\n  },\n\n  methods: {\n    /** Вписывает дерево в видимую область. */\n    fit(padding?: number): void {\n      controllers.get(this)?.fit({ width: this.layout.width, height: this.layout.height }, padding)\n    },\n    zoomIn(): void {\n      controllers.get(this)?.zoomIn()\n    },\n    zoomOut(): void {\n      controllers.get(this)?.zoomOut()\n    },\n    resetTransform(): void {\n      controllers.get(this)?.reset()\n    },\n    setTransform(transform: Transform): void {\n      controllers.get(this)?.set(transform)\n    },\n    /** Развернуть все свёрнутые ветки. */\n    expandAll(): void {\n      this.collapsedIds = []\n    },\n    /** Свернуть или развернуть узел по id. */\n    toggle(id: string): void {\n      this.collapsedIds = [...toggleCollapsed(new Set(this.collapsedIds), id)]\n    },\n\n    toggleNode(node: LayoutNode<NodeData>): void {\n      this.toggle(node.id)\n      this.$emit('toggle', node, this.collapsedIds.includes(node.id))\n    },\n\n    onNodeClick(node: LayoutNode<NodeData>, event: MouseEvent): void {\n      this.$emit('node-click', node, event)\n      if (this.collapsible && node.hasChildren) this.toggleNode(node)\n    },\n\n    nodeStyle(node: LayoutNode<NodeData>): Record<string, string> {\n      return {\n        left: `${node.x}px`,\n        top: `${node.y}px`,\n        width: `${node.width}px`,\n        height: `${node.height}px`,\n      }\n    },\n\n    nodeClassOf(node: LayoutNode<NodeData>): string | undefined {\n      return typeof this.nodeClass === 'function' ? this.nodeClass(node) : this.nodeClass\n    },\n\n    /** Подпись карточки по умолчанию: name → title → label → id. */\n    labelOf(node: LayoutNode<NodeData>): string {\n      const data = node.data as { name?: string; title?: string; label?: string } | null\n      return data?.name ?? data?.title ?? data?.label ?? node.id\n    },\n\n    /** Своя карточка из scoped-слота или карточка по умолчанию. */\n    renderNodeContent(h: typeof Vue.prototype.$createElement, node: LayoutNode<NodeData>): VNode | VNode[] {\n      const slot = this.$scopedSlots.node\n\n      if (slot) {\n        return (slot({\n          node,\n          data: node.data,\n          depth: node.depth,\n          collapsed: node.collapsed,\n          hasChildren: node.hasChildren,\n          toggle: () => this.toggleNode(node),\n        }) ?? []) as VNode[]\n      }\n\n      return h(TreeNodeCard, {\n        props: { label: this.labelOf(node), hasChildren: node.hasChildren, collapsed: node.collapsed },\n        on: { toggle: () => this.toggleNode(node) },\n      })\n    },\n  },\n\n  render(h): VNode {\n    const layout = this.layout\n    const linkSlot = this.$scopedSlots.link\n\n    const links = layout.links.map((link) =>\n      linkSlot\n        ? ((linkSlot({ link }) ?? []) as VNode[])\n        : h('path', { key: link.id, class: 'tree-view__link', attrs: { d: link.path } }),\n    )\n\n    const nodes = layout.nodes.map((node) =>\n      h(\n        'div',\n        {\n          key: node.id,\n          class: ['tree-view__node', this.nodeClassOf(node)],\n          style: this.nodeStyle(node),\n          on: { click: (event: MouseEvent) => this.onNodeClick(node, event) },\n        },\n        ([] as VNode[]).concat(this.renderNodeContent(h, node)),\n      ),\n    )\n\n    return h(\n      'div',\n      {\n        class: [\n          'tree-view',\n          { 'tree-view--pannable': this.pannable, 'tree-view--content': this.size === 'content' },\n        ],\n        style: this.rootStyle,\n      },\n      [\n        h('div', { class: 'tree-view__canvas', style: this.canvasStyle }, [\n          h(\n            'svg',\n            {\n              class: 'tree-view__links',\n              attrs: { width: layout.width, height: layout.height },\n            },\n            links as VNode[],\n          ),\n          ...nodes,\n        ]),\n      ],\n    )\n  },\n})\n","import type { VueConstructor } from 'vue'\nimport TreeView from './TreeView'\nimport TreeNodeCard from './TreeNodeCard'\n// Стили общие для Vue 2 и Vue 3 — лежат в core, чтобы не расходились.\n// Они попадают прямо в бандл и подключаются сами: отдельный импорт в проекте не нужен.\nimport { injectStyles } from '@bigplay/tree-view-core'\nimport styles from '@bigplay/tree-view-core/style.css?inline'\n\ninjectStyles(styles)\n\nexport { TreeView, TreeNodeCard }\n\nexport type {\n  Accessors,\n  Direction,\n  Layout,\n  LayoutLink,\n  LayoutNode,\n  LinkStyle,\n  ScaleLimits,\n  Transform,\n  TreeNode,\n  TreeViewOptions,\n} from '@bigplay/tree-view-core'\nexport { DEFAULT_OPTIONS } from '@bigplay/tree-view-core'\n\n/** Плагин: `Vue.use(TreeViewPlugin)` регистрирует компоненты глобально. */\nexport const TreeViewPlugin = {\n  install(Vue: VueConstructor) {\n    Vue.component('TreeView', TreeView)\n    Vue.component('TreeNodeCard', TreeNodeCard)\n  },\n}\n\nexport default TreeViewPlugin\n"],"names":["TreeNodeCard","Vue","h","children","event","controllers","TreeView","tree","toTree","layoutTree","applyCollapsed","toCssTransform","controller","PanZoomController","transform","padding","id","toggleCollapsed","node","data","slot","layout","linkSlot","links","link","nodes","injectStyles","styles","TreeViewPlugin"],"mappings":";;;AAMA,MAAAA,IAAeC,EAAI,OAAO;AAAA,EACxB,MAAM;AAAA,EACN,OAAO;AAAA,IACL,OAAO,EAAE,MAAM,QAAQ,UAAU,GAAA;AAAA,IACjC,aAAa,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,IACvC,WAAW,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA,EAAM;AAAA,EAE7C,OAAOC,GAAG;AACR,UAAMC,IAAW,CAACD,EAAE,QAAQ,EAAE,OAAO,wBAAA,GAA2B,KAAK,KAAK,CAAC;AAE3E,WAAI,KAAK,eACPC,EAAS;AAAA,MACPD;AAAA,QACE;AAAA,QACA;AAAA,UACE,OAAO;AAAA,UACP,OAAO;AAAA,YACL,MAAM;AAAA,YACN,kBAAkB;AAAA,YAClB,cAAc,KAAK,YAAY,eAAe;AAAA,UAAA;AAAA,UAEhD,IAAI;AAAA,YACF,OAAO,CAACE,MAAsB;AAC5B,cAAAA,EAAM,gBAAA,GACN,KAAK,MAAM,QAAQ;AAAA,YACrB;AAAA,UAAA;AAAA,QACF;AAAA,QAEF,KAAK,YAAY,MAAM;AAAA,MAAA;AAAA,IACzB,GAIGF,EAAE,OAAO,EAAE,OAAO,iBAAA,GAAoBC,CAAQ;AAAA,EACvD;AACF,CAAC,GCjBKE,wBAAkB,QAAA,GAExBC,IAAeL,EAAI,OAAO;AAAA,EACxB,MAAM;AAAA,EACN,OAAO;AAAA;AAAA,IAEL,MAAM,EAAE,MAAM,CAAC,QAAQ,KAAK,GAAyB,SAAS,KAAA;AAAA;AAAA,IAE9D,SAAS,EAAE,MAAM,QAA8C,SAAS,OAAA;AAAA;AAAA,IAExE,OAAO,EAAE,MAAM,UAAoD,SAAS,OAAA;AAAA;AAAA,IAE5E,aAAa,EAAE,MAAM,UAA0D,SAAS,OAAA;AAAA;AAAA,IAExF,aAAa,EAAE,MAAM,UAA0D,SAAS,OAAA;AAAA;AAAA,IAExF,aAAa,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA,IAEvC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA,IAEpC,UAAU,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA,IAEpC,YAAY,EAAE,MAAM,SAAS,SAAS,GAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMtC,MAAM,EAAE,MAAM,QAAwC,SAAS,OAAA;AAAA;AAAA,IAE/D,aAAa,EAAE,MAAM,QAAiC,SAAS,OAAA;AAAA;AAAA,IAE/D,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,QAAQ;AAAA,MACvB,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAGF,OAAO;AACL,WAAO;AAAA;AAAA,MAEL,cAAc,CAAA;AAAA,MACd,WAAW,EAAE,GAAG,GAAG,GAAG,GAAG,OAAO,EAAA;AAAA,IAAE;AAAA,EAEtC;AAAA,EAEA,UAAU;AAAA,IACR,SAA2B;AACzB,YAAMM,IAAOC,EAAiB,KAAK,MAAM;AAAA,QACvC,OAAO,KAAK;AAAA,QACZ,aAAa,KAAK;AAAA,QAClB,aAAa,KAAK;AAAA,MAAA,CACnB;AAED,aAAOC,EAAWC,EAAeH,GAAM,IAAI,IAAI,KAAK,YAAY,CAAC,GAAG,KAAK,OAAO;AAAA,IAClF;AAAA,IAEA,cAAsC;AACpC,aAAO;AAAA,QACL,OAAO,GAAG,KAAK,OAAO,KAAK;AAAA,QAC3B,QAAQ,GAAG,KAAK,OAAO,MAAM;AAAA,QAC7B,WAAWI,EAAe,KAAK,SAAS;AAAA,MAAA;AAAA,IAE5C;AAAA,IAEA,YAAgD;AAC9C,UAAI,KAAK,SAAS;AAElB,eAAO;AAAA,UACL,OAAO,GAAG,KAAK,OAAO,QAAQ,KAAK,UAAU,KAAK;AAAA,UAClD,QAAQ,GAAG,KAAK,OAAO,SAAS,KAAK,UAAU,KAAK;AAAA,UACpD,UAAU;AAAA,QAAA;AAAA,IAEd;AAAA,EAAA;AAAA,EAGF,UAAU;AACR,UAAMC,IAAa,IAAIC,EAAkB;AAAA,MACvC,UAAU,MAAM,KAAK;AAAA,MACrB,UAAU,MAAM,KAAK;AAAA,MACrB,QAAQ,KAAK,cAAc,MAAM,KAAK,cAAc;AAAA,MACpD,UAAU,CAACC,MAAc;AACvB,aAAK,YAAYA,GACjB,KAAK,MAAM,aAAaA,CAAS;AAAA,MACnC;AAAA,IAAA,CACD;AAED,IAAAF,EAAW,OAAO,KAAK,GAAkB,GACzCP,EAAY,IAAI,MAAMO,CAAU,GAE5B,KAAK,cAAY,KAAK,UAAU,MAAM,KAAK,KAAK;AAAA,EACtD;AAAA,EAEA,gBAAgB;AACd,IAAAP,EAAY,IAAI,IAAI,GAAG,OAAA,GACvBA,EAAY,OAAO,IAAI;AAAA,EACzB;AAAA,EAEA,SAAS;AAAA;AAAA,IAEP,IAAIU,GAAwB;AAC1B,MAAAV,EAAY,IAAI,IAAI,GAAG,IAAI,EAAE,OAAO,KAAK,OAAO,OAAO,QAAQ,KAAK,OAAO,OAAA,GAAUU,CAAO;AAAA,IAC9F;AAAA,IACA,SAAe;AACb,MAAAV,EAAY,IAAI,IAAI,GAAG,OAAA;AAAA,IACzB;AAAA,IACA,UAAgB;AACd,MAAAA,EAAY,IAAI,IAAI,GAAG,QAAA;AAAA,IACzB;AAAA,IACA,iBAAuB;AACrB,MAAAA,EAAY,IAAI,IAAI,GAAG,MAAA;AAAA,IACzB;AAAA,IACA,aAAaS,GAA4B;AACvC,MAAAT,EAAY,IAAI,IAAI,GAAG,IAAIS,CAAS;AAAA,IACtC;AAAA;AAAA,IAEA,YAAkB;AAChB,WAAK,eAAe,CAAA;AAAA,IACtB;AAAA;AAAA,IAEA,OAAOE,GAAkB;AACvB,WAAK,eAAe,CAAC,GAAGC,EAAgB,IAAI,IAAI,KAAK,YAAY,GAAGD,CAAE,CAAC;AAAA,IACzE;AAAA,IAEA,WAAWE,GAAkC;AAC3C,WAAK,OAAOA,EAAK,EAAE,GACnB,KAAK,MAAM,UAAUA,GAAM,KAAK,aAAa,SAASA,EAAK,EAAE,CAAC;AAAA,IAChE;AAAA,IAEA,YAAYA,GAA4Bd,GAAyB;AAC/D,WAAK,MAAM,cAAcc,GAAMd,CAAK,GAChC,KAAK,eAAec,EAAK,eAAa,KAAK,WAAWA,CAAI;AAAA,IAChE;AAAA,IAEA,UAAUA,GAAoD;AAC5D,aAAO;AAAA,QACL,MAAM,GAAGA,EAAK,CAAC;AAAA,QACf,KAAK,GAAGA,EAAK,CAAC;AAAA,QACd,OAAO,GAAGA,EAAK,KAAK;AAAA,QACpB,QAAQ,GAAGA,EAAK,MAAM;AAAA,MAAA;AAAA,IAE1B;AAAA,IAEA,YAAYA,GAAgD;AAC1D,aAAO,OAAO,KAAK,aAAc,aAAa,KAAK,UAAUA,CAAI,IAAI,KAAK;AAAA,IAC5E;AAAA;AAAA,IAGA,QAAQA,GAAoC;AAC1C,YAAMC,IAAOD,EAAK;AAClB,aAAOC,GAAM,QAAQA,GAAM,SAASA,GAAM,SAASD,EAAK;AAAA,IAC1D;AAAA;AAAA,IAGA,kBAAkBhB,GAAwCgB,GAA6C;AACrG,YAAME,IAAO,KAAK,aAAa;AAE/B,aAAIA,IACMA,EAAK;AAAA,QACX,MAAAF;AAAA,QACA,MAAMA,EAAK;AAAA,QACX,OAAOA,EAAK;AAAA,QACZ,WAAWA,EAAK;AAAA,QAChB,aAAaA,EAAK;AAAA,QAClB,QAAQ,MAAM,KAAK,WAAWA,CAAI;AAAA,MAAA,CACnC,KAAK,CAAA,IAGDhB,EAAEF,GAAc;AAAA,QACrB,OAAO,EAAE,OAAO,KAAK,QAAQkB,CAAI,GAAG,aAAaA,EAAK,aAAa,WAAWA,EAAK,UAAA;AAAA,QACnF,IAAI,EAAE,QAAQ,MAAM,KAAK,WAAWA,CAAI,EAAA;AAAA,MAAE,CAC3C;AAAA,IACH;AAAA,EAAA;AAAA,EAGF,OAAOhB,GAAU;AACf,UAAMmB,IAAS,KAAK,QACdC,IAAW,KAAK,aAAa,MAE7BC,IAAQF,EAAO,MAAM;AAAA,MAAI,CAACG,MAC9BF,IACMA,EAAS,EAAE,MAAAE,GAAM,KAAK,CAAA,IACxBtB,EAAE,QAAQ,EAAE,KAAKsB,EAAK,IAAI,OAAO,mBAAmB,OAAO,EAAE,GAAGA,EAAK,OAAK,CAAG;AAAA,IAAA,GAG7EC,IAAQJ,EAAO,MAAM;AAAA,MAAI,CAACH,MAC9BhB;AAAA,QACE;AAAA,QACA;AAAA,UACE,KAAKgB,EAAK;AAAA,UACV,OAAO,CAAC,mBAAmB,KAAK,YAAYA,CAAI,CAAC;AAAA,UACjD,OAAO,KAAK,UAAUA,CAAI;AAAA,UAC1B,IAAI,EAAE,OAAO,CAACd,MAAsB,KAAK,YAAYc,GAAMd,CAAK,EAAA;AAAA,QAAE;AAAA,QAEnE,CAAA,EAAe,OAAO,KAAK,kBAAkBF,GAAGgB,CAAI,CAAC;AAAA,MAAA;AAAA,IACxD;AAGF,WAAOhB;AAAA,MACL;AAAA,MACA;AAAA,QACE,OAAO;AAAA,UACL;AAAA,UACA,EAAE,uBAAuB,KAAK,UAAU,sBAAsB,KAAK,SAAS,UAAA;AAAA,QAAU;AAAA,QAExF,OAAO,KAAK;AAAA,MAAA;AAAA,MAEd;AAAA,QACEA,EAAE,OAAO,EAAE,OAAO,qBAAqB,OAAO,KAAK,eAAe;AAAA,UAChEA;AAAA,YACE;AAAA,YACA;AAAA,cACE,OAAO;AAAA,cACP,OAAO,EAAE,OAAOmB,EAAO,OAAO,QAAQA,EAAO,OAAA;AAAA,YAAO;AAAA,YAEtDE;AAAA,UAAA;AAAA,UAEF,GAAGE;AAAA,QAAA,CACJ;AAAA,MAAA;AAAA,IACH;AAAA,EAEJ;AACF,CAAC;AC9ODC,EAAaC,CAAM;AAmBZ,MAAMC,IAAiB;AAAA,EAC5B,QAAQ3B,GAAqB;AAC3B,IAAAA,EAAI,UAAU,YAAYK,CAAQ,GAClCL,EAAI,UAAU,gBAAgBD,CAAY;AAAA,EAC5C;AACF;"}
+{"version":3,"file":"index.js","sources":["../src/TreeNodeCard.ts","../src/TreeView.ts","../src/BracketCard.ts","../src/index.ts"],"sourcesContent":["import Vue from 'vue'\n\n/**\n * Карточка узла по умолчанию для Vue 2.\n * Разметка и классы один в один как в Vue 3 — стили общие.\n */\nexport default Vue.extend({\n  name: 'TreeNodeCard',\n  props: {\n    label: { type: String, required: true },\n    hasChildren: { type: Boolean, default: false },\n    collapsed: { type: Boolean, default: false },\n  },\n  render(h) {\n    const children = [h('span', { class: 'tree-view-card__label' }, this.label)]\n\n    if (this.hasChildren) {\n      children.push(\n        h(\n          'button',\n          {\n            class: 'tree-view-card__toggle',\n            attrs: {\n              type: 'button',\n              'data-tv-no-pan': '',\n              'aria-label': this.collapsed ? 'Развернуть' : 'Свернуть',\n            },\n            on: {\n              click: (event: MouseEvent) => {\n                event.stopPropagation()\n                this.$emit('toggle')\n              },\n            },\n          },\n          this.collapsed ? '+' : '−',\n        ),\n      )\n    }\n\n    return h('div', { class: 'tree-view-card' }, children)\n  },\n})\n","import Vue, { type PropType, type VNode } from 'vue'\nimport {\n  applyCollapsed,\n  DEFAULT_OVERSCAN,\n  estimateVisibleRect,\n  layoutTree,\n  measureVisibleRect,\n  PanZoomController,\n  toCssTransform,\n  toggleCollapsed,\n  toTree,\n  visibleLayout,\n  type Accessors,\n  type Layout,\n  type LayoutNode,\n  type Rect,\n  type ScaleLimits,\n  type Transform,\n  type TreeViewOptions,\n} from '@bigplay/tree-view-core'\nimport TreeNodeCard from './TreeNodeCard'\n\n/** Данные узла могут быть какими угодно — библиотека читает их только аксессорами. */\ntype NodeData = any\n\n/**\n * Контроллеры держим здесь, а не в data(): Vue 2 сделал бы объект реактивным,\n * а внутри него DOM-элемент и Map — наблюдать за ними незачем.\n */\nconst controllers = new WeakMap<Vue, PanZoomController>()\n\nexport default Vue.extend({\n  name: 'TreeView',\n  props: {\n    /** Объект, массив объектов или плоский список (вместе с `getParentId`). */\n    data: { type: [Object, Array] as PropType<NodeData>, default: null },\n    /** Размеры и направление. Можно передать только часть полей. */\n    options: { type: Object as PropType<Partial<TreeViewOptions>>, default: undefined },\n    /** Как достать id узла. По умолчанию — поле `id`. */\n    getId: { type: Function as PropType<Accessors<NodeData>['getId']>, default: undefined },\n    /** Как достать детей. По умолчанию — поле `children`. */\n    getChildren: { type: Function as PropType<Accessors<NodeData>['getChildren']>, default: undefined },\n    /** Как достать id родителя. Передан — значит данные плоские. */\n    getParentId: { type: Function as PropType<Accessors<NodeData>['getParentId']>, default: undefined },\n    /** Клик по узлу сворачивает/разворачивает ветку. */\n    collapsible: { type: Boolean, default: false },\n    /** Разрешить перетаскивание холста. */\n    pannable: { type: Boolean, default: true },\n    /** Разрешить зум колесом и «щипком». */\n    zoomable: { type: Boolean, default: true },\n    /** Вписать дерево в контейнер при первом отображении. */\n    fitOnMount: { type: Boolean, default: true },\n    /**\n     * Как компонент занимает место:\n     *  - `'fill'` (по умолчанию) — растягивается на родителя, лишнее обрезается;\n     *  - `'content'` — контейнер принимает размер дерева и ничего не обрезает.\n     */\n    size: { type: String as PropType<'fill' | 'content'>, default: 'fill' },\n    /** Пределы масштаба. */\n    scaleLimits: { type: Object as PropType<ScaleLimits>, default: undefined },\n    /** Дополнительный класс на обёртке узла — строкой или функцией. */\n    nodeClass: {\n      type: [String, Function] as PropType<string | ((node: LayoutNode<NodeData>) => string)>,\n      default: undefined,\n    },\n    /**\n     * Рисовать только то, что видно на экране. На больших сетках в DOM\n     * попадает несколько десятков карточек вместо тысячи.\n     */\n    virtualize: { type: Boolean, default: true },\n    /** Запас вокруг видимой области в пикселях. */\n    overscan: { type: Number, default: DEFAULT_OVERSCAN },\n  },\n\n  data() {\n    return {\n      /** Массив, а не Set: Vue 2 не умеет наблюдать за Set. */\n      collapsedIds: [] as string[],\n      transform: { x: 0, y: 0, scale: 1 } as Transform,\n      /**\n       * Видимая часть холста; `null` — рисуем всё.\n       * До первого измерения берём размер окна: иначе первый кадр\n       * нарисует дерево целиком и тут же выбросит лишнее.\n       */\n      visibleRect: (this.virtualize ? estimateVisibleRect() : null) as Rect | null,\n    }\n  },\n\n  computed: {\n    layout(): Layout<NodeData> {\n      const tree = toTree<NodeData>(this.data, {\n        getId: this.getId,\n        getChildren: this.getChildren,\n        getParentId: this.getParentId,\n      })\n\n      return layoutTree(applyCollapsed(tree, new Set(this.collapsedIds)), this.options)\n    },\n\n    /** То, что реально попадёт в DOM: при `virtualize` — только видимая часть. */\n    drawn(): Layout<NodeData> {\n      return this.virtualize ? visibleLayout(this.layout, this.visibleRect, this.overscan) : this.layout\n    },\n\n    canvasStyle(): Record<string, string> {\n      return {\n        width: `${this.layout.width}px`,\n        height: `${this.layout.height}px`,\n        transform: toCssTransform(this.transform),\n      }\n    },\n\n    rootStyle(): Record<string, string> | undefined {\n      if (this.size !== 'content') return undefined\n\n      return {\n        width: `${this.layout.width * this.transform.scale}px`,\n        height: `${this.layout.height * this.transform.scale}px`,\n        overflow: 'visible',\n      }\n    },\n  },\n\n  watch: {\n    // Новые данные — видимую часть надо пересчитать уже по ним.\n    layout() {\n      this.$nextTick(() => this.updateVisibleRect())\n    },\n  },\n\n  mounted() {\n    const controller = new PanZoomController({\n      pannable: () => this.pannable,\n      zoomable: () => this.zoomable,\n      limits: this.scaleLimits ? () => this.scaleLimits : undefined,\n      onChange: (transform) => {\n        this.transform = transform\n        // Холст поехал — видимая часть стала другой.\n        this.updateVisibleRect()\n        this.$emit('transform', transform)\n      },\n    })\n\n    controller.attach(this.$el as HTMLElement)\n    controllers.set(this, controller)\n\n    this.updateVisibleRect()\n    window.addEventListener('scroll', this.updateVisibleRect, { passive: true, capture: true })\n    window.addEventListener('resize', this.updateVisibleRect, { passive: true })\n\n    if (this.fitOnMount) this.$nextTick(() => this.fit())\n  },\n\n  beforeDestroy() {\n    controllers.get(this)?.detach()\n    controllers.delete(this)\n    window.removeEventListener('scroll', this.updateVisibleRect, { capture: true } as EventListenerOptions)\n    window.removeEventListener('resize', this.updateVisibleRect)\n  },\n\n  methods: {\n    /** Пересчитывает, какая часть холста сейчас видна на экране. */\n    updateVisibleRect(): void {\n      this.visibleRect = this.virtualize\n        ? measureVisibleRect(this.$refs.canvas as Element | undefined, this.transform.scale)\n        : null\n    },\n\n    /** Вписывает дерево в видимую область. */\n    fit(padding?: number): void {\n      controllers.get(this)?.fit({ width: this.layout.width, height: this.layout.height }, padding)\n    },\n    zoomIn(): void {\n      controllers.get(this)?.zoomIn()\n    },\n    zoomOut(): void {\n      controllers.get(this)?.zoomOut()\n    },\n    resetTransform(): void {\n      controllers.get(this)?.reset()\n    },\n    setTransform(transform: Transform): void {\n      controllers.get(this)?.set(transform)\n    },\n    /** Развернуть все свёрнутые ветки. */\n    expandAll(): void {\n      this.collapsedIds = []\n    },\n    /** Свернуть или развернуть узел по id. */\n    toggle(id: string): void {\n      this.collapsedIds = [...toggleCollapsed(new Set(this.collapsedIds), id)]\n    },\n\n    toggleNode(node: LayoutNode<NodeData>): void {\n      this.toggle(node.id)\n      this.$emit('toggle', node, this.collapsedIds.includes(node.id))\n    },\n\n    onNodeClick(node: LayoutNode<NodeData>, event: MouseEvent): void {\n      this.$emit('node-click', node, event)\n      if (this.collapsible && node.hasChildren) this.toggleNode(node)\n    },\n\n    nodeStyle(node: LayoutNode<NodeData>): Record<string, string> {\n      return {\n        left: `${node.x}px`,\n        top: `${node.y}px`,\n        width: `${node.width}px`,\n        height: `${node.height}px`,\n      }\n    },\n\n    nodeClassOf(node: LayoutNode<NodeData>): string | undefined {\n      return typeof this.nodeClass === 'function' ? this.nodeClass(node) : this.nodeClass\n    },\n\n    /** Подпись карточки по умолчанию: name → title → label → id. */\n    labelOf(node: LayoutNode<NodeData>): string {\n      const data = node.data as { name?: string; title?: string; label?: string } | null\n      return data?.name ?? data?.title ?? data?.label ?? node.id\n    },\n\n    /** Своя карточка из scoped-слота или карточка по умолчанию. */\n    renderNodeContent(h: typeof Vue.prototype.$createElement, node: LayoutNode<NodeData>): VNode | VNode[] {\n      const slot = this.$scopedSlots.node\n\n      if (slot) {\n        return (slot({\n          node,\n          data: node.data,\n          depth: node.depth,\n          collapsed: node.collapsed,\n          hasChildren: node.hasChildren,\n          toggle: () => this.toggleNode(node),\n        }) ?? []) as VNode[]\n      }\n\n      return h(TreeNodeCard, {\n        props: { label: this.labelOf(node), hasChildren: node.hasChildren, collapsed: node.collapsed },\n        on: { toggle: () => this.toggleNode(node) },\n      })\n    },\n  },\n\n  render(h): VNode {\n    const layout = this.layout\n    const drawn = this.drawn\n    const linkSlot = this.$scopedSlots.link\n\n    const links = drawn.links.map((link) =>\n      linkSlot\n        ? ((linkSlot({ link }) ?? []) as VNode[])\n        : h('path', { key: link.id, class: 'tree-view__link', attrs: { d: link.path } }),\n    )\n\n    const nodes = drawn.nodes.map((node) =>\n      h(\n        'div',\n        {\n          key: node.id,\n          class: ['tree-view__node', this.nodeClassOf(node)],\n          style: this.nodeStyle(node),\n          on: { click: (event: MouseEvent) => this.onNodeClick(node, event) },\n        },\n        ([] as VNode[]).concat(this.renderNodeContent(h, node)),\n      ),\n    )\n\n    return h(\n      'div',\n      {\n        class: [\n          'tree-view',\n          { 'tree-view--pannable': this.pannable, 'tree-view--content': this.size === 'content' },\n        ],\n        style: this.rootStyle,\n      },\n      [\n        h('div', { ref: 'canvas', class: 'tree-view__canvas', style: this.canvasStyle }, [\n          h(\n            'svg',\n            {\n              class: 'tree-view__links',\n              attrs: { width: layout.width, height: layout.height },\n            },\n            links as VNode[],\n          ),\n          ...nodes,\n        ]),\n      ],\n    )\n  },\n})\n","import Vue, { type PropType, type VNode } from 'vue'\nimport {\n  buildBracketCard,\n  type BracketCardMatch,\n  type BracketCardRow,\n} from '@bigplay/tree-view-core'\n\n/**\n * Карточка матча для Vue 2. Разметка и классы один в один как в Vue 3 —\n * строки считает та же функция из core, стили общие.\n */\nexport default Vue.extend({\n  name: 'BracketCard',\n  props: {\n    /** Матч: нужны только команды. */\n    match: { type: Object as PropType<BracketCardMatch | null>, default: null },\n    /** Сколько строк рисовать. У финала — одна. */\n    rows: { type: Number, default: undefined },\n    /** Подсказка над карточкой с моей командой. Пустая строка — не показывать. */\n    myTeamHint: { type: String, default: 'Нажми для перехода в матч 👇' },\n    /** Текст в ячейке счёта при техническом поражении. */\n    techDefeatLabel: { type: String, default: 'ТП' },\n    /** Подсказка по наведению на техническое поражение. */\n    techDefeatHint: { type: String, default: 'Техническое поражение' },\n  },\n\n  data() {\n    return { hoveredKey: null as string | null }\n  },\n\n  computed: {\n    card(): ReturnType<typeof buildBracketCard> {\n      return buildBracketCard(this.match, { rows: this.rows, techDefeatLabel: this.techDefeatLabel })\n    },\n  },\n\n  methods: {\n    renderRow(h: typeof Vue.prototype.$createElement, row: BracketCardRow): VNode {\n      const content: VNode[] = []\n\n      if (row.team) {\n        if (row.isTechDefeat && this.hoveredKey === row.key) {\n          content.push(h('span', { class: 'tv-bracket__tooltip' }, this.techDefeatHint))\n        }\n        content.push(h('span', { class: 'tv-bracket__name' }, row.team.name))\n        content.push(h('span', { class: 'tv-bracket__score' }, row.score))\n      }\n\n      return h(\n        'div',\n        {\n          key: row.key,\n          class: [\n            'tv-bracket__row',\n            {\n              'tv-bracket__row--winner': row.isWinner,\n              'tv-bracket__row--loser': row.isLoser && !row.isEmpty,\n              'tv-bracket__row--my': row.isMyTeam,\n              'tv-bracket__row--empty': row.isEmpty,\n            },\n          ],\n          attrs: row.isMyTeam ? { title: 'Моя команда' } : {},\n          on: {\n            click: () => {\n              if (row.team) this.$emit('select', row.team, row)\n            },\n            mouseenter: () => {\n              this.hoveredKey = row.key\n            },\n            mouseleave: () => {\n              this.hoveredKey = null\n            },\n          },\n        },\n        content,\n      )\n    },\n  },\n\n  render(h): VNode {\n    const card = this.card\n    const children: VNode[] = []\n\n    if (card.hasMyTeam && this.myTeamHint) {\n      children.push(h('div', { class: 'tv-bracket__hint' }, this.myTeamHint))\n    }\n\n    for (const row of card.rows) children.push(this.renderRow(h, row))\n\n    return h('div', { class: ['tv-bracket', { 'tv-bracket--my-team': card.hasMyTeam }] }, children)\n  },\n})\n","import type { VueConstructor } from 'vue'\nimport TreeView from './TreeView'\nimport TreeNodeCard from './TreeNodeCard'\nimport BracketCard from './BracketCard'\n// Стили общие для Vue 2 и Vue 3 — лежат в core, чтобы не расходились.\n// Они попадают прямо в бандл и подключаются сами: отдельный импорт в проекте не нужен.\nimport { injectStyles } from '@bigplay/tree-view-core'\nimport styles from '@bigplay/tree-view-core/style.css?inline'\n\ninjectStyles(styles)\n\nexport { TreeView, TreeNodeCard, BracketCard }\n\nexport type {\n  Accessors,\n  BracketCardMatch,\n  BracketCardModel,\n  BracketCardOptions,\n  BracketCardRow,\n  BracketCardTeam,\n  Direction,\n  Layout,\n  LayoutLink,\n  LayoutNode,\n  LinkStyle,\n  ScaleLimits,\n  Transform,\n  TreeNode,\n  TreeViewOptions,\n} from '@bigplay/tree-view-core'\nexport { DEFAULT_OPTIONS, buildBracketCard, bracketCardHeight } from '@bigplay/tree-view-core'\n\n/** Плагин: `Vue.use(TreeViewPlugin)` регистрирует компоненты глобально. */\nexport const TreeViewPlugin = {\n  install(Vue: VueConstructor) {\n    Vue.component('TreeView', TreeView)\n    Vue.component('TreeNodeCard', TreeNodeCard)\n    Vue.component('BracketCard', BracketCard)\n  },\n}\n\nexport default TreeViewPlugin\n"],"names":["TreeNodeCard","Vue","h","children","event","controllers","TreeView","DEFAULT_OVERSCAN","estimateVisibleRect","tree","toTree","layoutTree","applyCollapsed","visibleLayout","toCssTransform","controller","PanZoomController","transform","measureVisibleRect","padding","id","toggleCollapsed","node","data","slot","layout","drawn","linkSlot","links","link","nodes","BracketCard","buildBracketCard","row","content","card","injectStyles","styles","TreeViewPlugin"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigplay/tree-view-vue2",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Компонент дерева и турнирных сеток для Vue 2.6 / 2.7",
   "license": "MIT",
   "type": "module",
@@ -35,7 +35,7 @@
     "typecheck": "tsc --noEmit -p tsconfig.json"
   },
   "dependencies": {
-    "@bigplay/tree-view-core": "^0.1.0"
+    "@bigplay/tree-view-core": "^0.2.0"
   },
   "peerDependencies": {
     "vue": "^2.6.0 || ^2.7.0"