作成日: 2023/11/24 最終更新日: 2024/10/16
文書種別
制限事項
状況
現象確認済み
詳細
次の条件の場合にマーキーの枠がスクロール時に移動してしまいます。
- cloneFrozenCellsプロパティがtrueに設定されており、固定列が存在する
- DPIスケーリングが150%に設定されている
回避方法
完全に回避する方法はございませんが、次善策としてカスタムしたmarqueeクラスを利用する方法がございます。
次善策では、マーキーが固定セル上にある時のみ、マーキーが移動しなくなります。
(マーキーが固定列と普通のセルに跨ぐ、または通常セルにのみある場合は機能しません)
次善策では、マーキーが固定セル上にある時のみ、マーキーが移動しなくなります。
(マーキーが固定列と普通のセルに跨ぐ、または通常セルにのみある場合は機能しません)
import { marqueeCustomized } from './flexgrid.marquee'
initGrid(grid: wjGrid.FlexGrid) {
if(grid.cloneFrozenCells){
// カスタムマーキークラスを有効にする
new marqueeCustomized(grid);
}
}
【marqueeCustomized クラスの実装】
import * as wjCore from '@mescius/wijmo';
import { CollectionView, setCss, Rect} from '@mescius/wijmo';
import * as wjGrid from '@mescius/wijmo.grid';
export class marqueeCustomized{
grid: any;
selectionMode: number;
constructor(grid:wjGrid.FlexGrid) {
this.grid = grid;
grid._updateMarquee = this._updateMarquee.bind(this);
}
_hideMarquee() {
let m = this.grid._eMarquee
setCss(m, {
display: 'none'
});
}
_updateMarquee(){
if(this.grid.activePanelType != wjGrid.CellType.Cell){
this._hideMarquee();
return;
}
const node = this.grid._eMarquee;
const rect = this._getMarqueeRect(this.grid);
if (!rect || !rect.width || !rect.height) {
node.style.display = 'none';
} else {
const host = this.grid.cells.hostElement;
const child = node.firstChild as HTMLElement;
const dx = node.offsetWidth - child.offsetWidth;
const dy = node.offsetHeight - child.offsetHeight;
setCss(node, {
width: rect.width + dx,
height: rect.height + dy,
top: rect.top + host.offsetTop - dy / 2,
left: rect.left + host.offsetLeft - dx / 2,
display: ''
});
}
}
_getAdjustedSelection(sel: wjGrid.CellRange, gdPanel: wjGrid.GridPanel): wjGrid.CellRange {
let g = this.grid,
rng = new wjGrid.CellRange(),
SM = wjGrid.SelectionMode;
switch (g.selectionMode) {
case SM.Cell:
rng.setRange(sel.row, sel.col, sel.row, sel.col);
break;
case SM.Row:
rng.setRange(sel.row, 0, sel.row, g.columns.length - 1);
break;
case SM.RowRange:
case SM.ListBox:
rng.setRange(sel.row, 0, sel.row2, g.columns.length - 1);
break;
default:
rng.copy(sel);
}
return rng;
}
_getMarqueeRect(grid: wjGrid.FlexGrid){
if (!grid.showMarquee || !grid.selectionMode) {
return null;
}
let selectionMode = this._getSelectionMode(grid);
if(selectionMode != this.selectionMode){
this._fixMarqueeControl(grid,selectionMode);
this.selectionMode = selectionMode;
}
let rng = grid._selHdl.selection;
if (!grid.isRangeValid(rng)) {
return null;
}
this._getAdjustedSelection(rng, grid.cells);
rng = rng.combine(grid.getMergedRange(grid.cells, rng.topRow, rng.leftCol, false));
rng = rng.combine(grid.getMergedRange(grid.cells, rng.bottomRow, rng.rightCol, false));
let rc1 = grid.cells.getCellBoundingRect(rng.topRow, rng.leftCol, true),
rc2 = grid.cells.getCellBoundingRect(rng.bottomRow, rng.rightCol, true);
if(this.selectionMode > 0){
rc1.left += grid.scrollPosition.x;
rc2.left +=grid.scrollPosition.x;
rc1.top += grid.scrollPosition.y;
rc2.top +=grid.scrollPosition.y;
}
if(grid.frozenColumns>0){
let rct1 = grid.cells.getCellBoundingRect(0, 0, true);
let rct2 = grid.cells.getCellBoundingRect(0, grid.frozenColumns - 1, true);
if(this.selectionMode > 0){
if(grid.selection.leftCol > grid.frozenColumns && rc1.left < rct2.right - rct1.left)
rc1.left = rct2.right - rct1.left;
if(grid.selection.rightCol > grid.frozenColumns && rc2.right < rct2.right - rct1.left){
rc2.left = rct2.right - rct1.left;
rc2.width = 0;
}
}else{
if(grid.selection.leftCol > grid.frozenColumns && rc1.left < rct2.right - grid.scrollPosition.x - rct1.left)
rc1.left = rct2.right - grid.scrollPosition.x - rct1.left;
if(grid.selection.rightCol > grid.frozenColumns && rc2.right < rct2.right - grid.scrollPosition.x - rct1.left){
rc2.left = rct2.right - grid.scrollPosition.x - rct1.left;
rc2.width = 0;
}
}
}
if(grid.frozenRows>0){
let rct1 = grid.cells.getCellBoundingRect(0, 0, true);
let rct2 = grid.cells.getCellBoundingRect(grid.frozenRows-1, 0, true);
if(this.selectionMode > 0){
if(grid.selection.topRow > grid.frozenRows && rc1.top < rct2.bottom - rct1.top)
rc1.top = rct2.bottom - rct1.top;
if(grid.selection.bottomRow > grid.frozenRows && rc2.bottom < rct2.bottom - rct1.top){
rc2.top = rct2.bottom - rct1.top;
rc2.height = 0;
}
}else{
if(grid.selection.topRow > grid.frozenRows && rc1.top < rct2.bottom - grid.scrollPosition.y - rct1.top)
rc1.top = rct2.bottom - grid.scrollPosition.y - rct1.top;
if(grid.selection.bottomRow > grid.frozenRows && rc2.bottom < rct2.bottom - grid.scrollPosition.y - rct1.top){
rc2.top = rct2.bottom - grid.scrollPosition.y - rct1.top;
rc2.height = 0;
}
}
}
return grid.rightToLeft
? new Rect(rc2.left, rc1.top, rc1.right - rc2.left, rc2.bottom - rc1.top)
: new Rect(rc1.left, rc1.top, rc2.right - rc1.left, rc2.bottom - rc1.top);
}
_fixMarqueeControl(grid: wjGrid.FlexGrid, selectionMode:number){
if(selectionMode == 0){
if(grid._root.children.length == 1){
var mq = grid._eMarquee;
grid.hostElement.firstChild.removeChild(mq);
grid._root.append(mq,hd)
}
}
else{
if(grid._root.children.length == 2){
var mq = grid._eMarquee;
grid._root.removeChild(mq);
var hd = grid._eRHdr;
grid.hostElement.firstChild.insertBefore(mq,hd);
}
}
}
_getSelectionMode(grid: wjGrid.FlexGrid) {
let unFrozenArea = new Rect(0,0,grid.columns.length, grid.rows.length),
unFrozenPixelArea = new Rect(0,0,0,0),
widthAdjustment = 0,
selectionMode = 0;
if(grid.frozenColumns > 0 || grid.frozenRows > 0)
{
unFrozenArea.left = (grid.frozenColumns)?grid.frozenColumns:0;
unFrozenArea.top = (grid.frozenRows)?grid.frozenRows:0;
unFrozenArea.width = grid.columns.length -1 - unFrozenArea.left;
unFrozenArea.height = grid.rows.length -1 - unFrozenArea.top;
}
let rc1 = grid.cells.getCellBoundingRect(unFrozenArea.top, unFrozenArea.left, true),
rc2 = grid.cells.getCellBoundingRect(unFrozenArea.bottom, unFrozenArea.right, true);
unFrozenPixelArea = grid.rightToLeft
? new Rect(rc2.left, rc1.top, rc1.right - rc2.left - widthAdjustment, rc2.bottom - rc1.top)
: new Rect(rc1.left, rc1.top, rc2.right - rc1.left - widthAdjustment, rc2.bottom - rc1.top);
if(grid.selection.leftCol < unFrozenArea.left
|| grid.selection.topRow < unFrozenArea.top
){
if((grid.selection.leftCol < unFrozenArea.left && grid.selection.rightCol < unFrozenArea.left)
|| (grid.selection.topRow < unFrozenArea.top && grid.selection.bottomRow < unFrozenArea.top)
)
{
selectionMode = 2;
}
else{
selectionMode = 1;
}
}
return selectionMode;
}
}