diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts index 9c465ea115..3f85f732be 100644 --- a/src/chart/bar/BarView.ts +++ b/src/chart/bar/BarView.ts @@ -30,7 +30,7 @@ import { traverseElements } from '../../util/graphic'; import { getECData } from '../../util/innerStore'; -import { enableHoverEmphasis, setStatesStylesFromModel } from '../../util/states'; +import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states'; import { setLabelStyle, getLabelStatesModels, setLabelValueAnimation, labelInner } from '../../label/labelStyle'; import {throttle} from '../../util/throttle'; import {createClipPath} from '../helper/createClipPathFromCoordSys'; @@ -1037,7 +1037,7 @@ function updateStyle( ); const emphasisModel = itemModel.getModel(['emphasis']); - enableHoverEmphasis(el, emphasisModel.get('focus'), emphasisModel.get('blurScope')); + toggleHoverEmphasis(el, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled')); setStatesStylesFromModel(el, itemModel); if (isZeroOnPolar(layout as SectorLayout)) { diff --git a/src/chart/bar/PictorialBarView.ts b/src/chart/bar/PictorialBarView.ts index 1a81fed829..7f7ad1b833 100644 --- a/src/chart/bar/PictorialBarView.ts +++ b/src/chart/bar/PictorialBarView.ts @@ -19,9 +19,7 @@ import * as zrUtil from 'zrender/src/core/util'; import * as graphic from '../../util/graphic'; -import { - enableHoverEmphasis -} from '../../util/states'; +import { toggleHoverEmphasis } from '../../util/states'; import {createSymbol, normalizeSymbolOffset} from '../../util/symbol'; import {parsePercent, isNumeric} from '../../util/number'; import ChartView from '../../view/Chart'; @@ -928,7 +926,7 @@ function updateCommon( } ); - enableHoverEmphasis(bar, focus, blurScope); + toggleHoverEmphasis(bar, focus, blurScope, emphasisModel.get('disabled')); } function toIntTimes(times: number) { diff --git a/src/chart/boxplot/BoxplotView.ts b/src/chart/boxplot/BoxplotView.ts index 748ff6ed20..f217e8af7f 100644 --- a/src/chart/boxplot/BoxplotView.ts +++ b/src/chart/boxplot/BoxplotView.ts @@ -20,7 +20,7 @@ import * as zrUtil from 'zrender/src/core/util'; import ChartView from '../../view/Chart'; import * as graphic from '../../util/graphic'; -import { setStatesStylesFromModel, enableHoverEmphasis } from '../../util/states'; +import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states'; import Path, { PathProps } from 'zrender/src/graphic/Path'; import BoxplotSeriesModel, { BoxplotDataItemOption } from './BoxplotSeries'; import GlobalModel from '../../model/Global'; @@ -184,10 +184,11 @@ function updateNormalBoxData( el.z2 = 100; const itemModel = data.getItemModel(dataIndex); + const emphasisModel = itemModel.getModel('emphasis'); setStatesStylesFromModel(el, itemModel); - enableHoverEmphasis(el, itemModel.get(['emphasis', 'focus']), itemModel.get(['emphasis', 'blurScope'])); + toggleHoverEmphasis(el, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled')); } function transInit(points: number[][], dim: number, itemLayout: BoxplotItemLayout) { diff --git a/src/chart/custom/CustomSeries.ts b/src/chart/custom/CustomSeries.ts index 6477df2817..29014e1a6a 100644 --- a/src/chart/custom/CustomSeries.ts +++ b/src/chart/custom/CustomSeries.ts @@ -243,6 +243,8 @@ export type CustomElementOption = CustomPathOption export type CustomRootElementOption = CustomElementOption & { focus?: 'none' | 'self' | 'series' | ArrayLike blurScope?: BlurScope + + emphasisDisabled?: boolean }; export type CustomElementOptionOnState = CustomDisplayableOptionOnState diff --git a/src/chart/custom/CustomView.ts b/src/chart/custom/CustomView.ts index 0d6b5a351b..096e885a65 100644 --- a/src/chart/custom/CustomView.ts +++ b/src/chart/custom/CustomView.ts @@ -21,7 +21,7 @@ import { hasOwn, assert, isString, retrieve2, retrieve3, defaults, each, indexOf } from 'zrender/src/core/util'; import * as graphicUtil from '../../util/graphic'; -import { setDefaultStateProxy, enableHoverEmphasis } from '../../util/states'; +import { setDefaultStateProxy, toggleHoverEmphasis } from '../../util/states'; import * as labelStyleHelper from '../../label/labelStyle'; import {getDefaultLabel} from '../helper/labelHelper'; import {getLayoutOnAxis} from '../../layout/barGrid'; @@ -932,7 +932,12 @@ function createOrUpdateItem( const el = doCreateOrUpdateEl(api, existsEl, dataIndex, elOption, seriesModel, group); el && data.setItemGraphicEl(dataIndex, el); - el && enableHoverEmphasis(el, elOption.focus, elOption.blurScope); + el && toggleHoverEmphasis( + el, + elOption.focus, + elOption.blurScope, + elOption.emphasisDisabled + ); return el; } diff --git a/src/chart/funnel/FunnelView.ts b/src/chart/funnel/FunnelView.ts index e379e64f34..673c53ceb2 100644 --- a/src/chart/funnel/FunnelView.ts +++ b/src/chart/funnel/FunnelView.ts @@ -18,7 +18,7 @@ */ import * as graphic from '../../util/graphic'; -import { setStatesStylesFromModel, enableHoverEmphasis } from '../../util/states'; +import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states'; import ChartView from '../../view/Chart'; import FunnelSeriesModel, {FunnelDataItemOption} from './FunnelSeries'; import GlobalModel from '../../model/Global'; @@ -92,7 +92,12 @@ class FunnelPiece extends graphic.Polygon { this._updateLabel(data, idx); - enableHoverEmphasis(this, emphasisModel.get('focus'), emphasisModel.get('blurScope')); + toggleHoverEmphasis( + this, + emphasisModel.get('focus'), + emphasisModel.get('blurScope'), + emphasisModel.get('disabled') + ); } _updateLabel(data: SeriesData, idx: number) { diff --git a/src/chart/gauge/GaugeView.ts b/src/chart/gauge/GaugeView.ts index 85b7416e36..f9fd24ddf9 100644 --- a/src/chart/gauge/GaugeView.ts +++ b/src/chart/gauge/GaugeView.ts @@ -19,7 +19,7 @@ import PointerPath from './PointerPath'; import * as graphic from '../../util/graphic'; -import { setStatesStylesFromModel, enableHoverEmphasis } from '../../util/states'; +import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states'; import {createTextStyle, setLabelValueAnimation, animateLabelValue} from '../../label/labelStyle'; import ChartView from '../../view/Chart'; import {parsePercent, round, linearMap} from '../../util/number'; @@ -489,6 +489,9 @@ class GaugeView extends ChartView { data.each(function (idx) { const itemModel = data.getItemModel(idx); const emphasisModel = itemModel.getModel('emphasis'); + const focus = emphasisModel.get('focus'); + const blurScope = emphasisModel.get('blurScope'); + const emphasisDisabled = emphasisModel.get('disabled'); if (showPointer) { const pointer = data.getItemGraphicEl(idx) as ECSymbol; const symbolStyle = data.getItemVisual(idx, 'style'); @@ -517,7 +520,7 @@ class GaugeView extends ChartView { (pointer as ECElement).z2EmphasisLift = 0; setStatesStylesFromModel(pointer, itemModel); - enableHoverEmphasis(pointer, emphasisModel.get('focus'), emphasisModel.get('blurScope')); + toggleHoverEmphasis(pointer, focus, blurScope, emphasisDisabled); } if (showProgress) { @@ -526,7 +529,7 @@ class GaugeView extends ChartView { progress.setStyle(itemModel.getModel(['progress', 'itemStyle']).getItemStyle()); (progress as ECElement).z2EmphasisLift = 0; setStatesStylesFromModel(progress, itemModel); - enableHoverEmphasis(progress, emphasisModel.get('focus'), emphasisModel.get('blurScope')); + toggleHoverEmphasis(progress, focus, blurScope, emphasisDisabled); } }); diff --git a/src/chart/heatmap/HeatmapView.ts b/src/chart/heatmap/HeatmapView.ts index f4061baf11..253fe50e6a 100644 --- a/src/chart/heatmap/HeatmapView.ts +++ b/src/chart/heatmap/HeatmapView.ts @@ -18,7 +18,7 @@ */ import * as graphic from '../../util/graphic'; -import { enableHoverEmphasis } from '../../util/states'; +import { toggleHoverEmphasis } from '../../util/states'; import HeatmapLayer from './HeatmapLayer'; import * as zrUtil from 'zrender/src/core/util'; import ChartView from '../../view/Chart'; @@ -206,8 +206,10 @@ class HeatmapView extends ChartView { let blurStyle = seriesModel.getModel(['blur', 'itemStyle']).getItemStyle(); let selectStyle = seriesModel.getModel(['select', 'itemStyle']).getItemStyle(); let labelStatesModels = getLabelStatesModels(seriesModel); - let focus = seriesModel.get(['emphasis', 'focus']); - let blurScope = seriesModel.get(['emphasis', 'blurScope']); + const emphasisModel = seriesModel.getModel('emphasis'); + let focus = emphasisModel.get('focus'); + let blurScope = emphasisModel.get('blurScope'); + let emphasisDisabled = emphasisModel.get('disabled'); const dataDims = isCoordinateSystemType(coordSys, 'cartesian2d') ? [ @@ -277,6 +279,7 @@ class HeatmapView extends ChartView { focus = emphasisModel.get('focus'); blurScope = emphasisModel.get('blurScope'); + emphasisDisabled = emphasisModel.get('disabled'); labelStatesModels = getLabelStatesModels(itemModel); } @@ -301,7 +304,7 @@ class HeatmapView extends ChartView { rect.ensureState('blur').style = blurStyle; rect.ensureState('select').style = selectStyle; - enableHoverEmphasis(rect, focus, blurScope); + toggleHoverEmphasis(rect, focus, blurScope, emphasisDisabled); rect.incremental = incremental; // PENDING diff --git a/src/chart/helper/EffectSymbol.ts b/src/chart/helper/EffectSymbol.ts index d36a6ec4d8..e43703c6e3 100644 --- a/src/chart/helper/EffectSymbol.ts +++ b/src/chart/helper/EffectSymbol.ts @@ -19,7 +19,7 @@ import {createSymbol, normalizeSymbolOffset, normalizeSymbolSize} from '../../util/symbol'; import {Group, Path} from '../../util/graphic'; -import { enterEmphasis, leaveEmphasis, enableHoverEmphasis } from '../../util/states'; +import { enterEmphasis, leaveEmphasis, toggleHoverEmphasis } from '../../util/states'; import SymbolClz from './Symbol'; import SeriesData from '../../data/SeriesData'; import type { ZRColor, ECElement } from '../../util/types'; @@ -173,6 +173,7 @@ class EffectSymbol extends Group { const symbolStyle = data.getItemVisual(idx, 'style'); const color = symbolStyle && symbolStyle.fill; + const emphasisModel = itemModel.getModel('emphasis'); rippleGroup.setScale(symbolSize); @@ -203,8 +204,6 @@ class EffectSymbol extends Group { effectCfg.rippleEffectColor = itemModel.get(['rippleEffect', 'color']); effectCfg.rippleNumber = itemModel.get(['rippleEffect', 'number']); - this.off('mouseover').off('mouseout').off('emphasis').off('normal'); - if (effectCfg.showEffectOn === 'render') { this._effectCfg ? this.updateEffectAnimation(effectCfg) @@ -234,11 +233,15 @@ class EffectSymbol extends Group { this._effectCfg = effectCfg; - enableHoverEmphasis(this); + toggleHoverEmphasis( + this, + emphasisModel.get('focus'), + emphasisModel.get('blurScope'), + emphasisModel.get('disabled') + ); }; fadeOut(cb: () => void) { - this.off('mouseover').off('mouseout'); cb && cb(); }; diff --git a/src/chart/helper/Line.ts b/src/chart/helper/Line.ts index b806d0f7b8..961502bda2 100644 --- a/src/chart/helper/Line.ts +++ b/src/chart/helper/Line.ts @@ -22,11 +22,18 @@ import * as vector from 'zrender/src/core/vector'; import * as symbolUtil from '../../util/symbol'; import ECLinePath from './LinePath'; import * as graphic from '../../util/graphic'; -import { enableHoverEmphasis, enterEmphasis, leaveEmphasis, SPECIAL_STATES } from '../../util/states'; +import { toggleHoverEmphasis, enterEmphasis, leaveEmphasis, SPECIAL_STATES } from '../../util/states'; import {getLabelStatesModels, setLabelStyle} from '../../label/labelStyle'; import {round} from '../../util/number'; import SeriesData from '../../data/SeriesData'; -import { ZRTextAlign, ZRTextVerticalAlign, LineLabelOption, ColorString } from '../../util/types'; +import { + ZRTextAlign, + ZRTextVerticalAlign, + LineLabelOption, + ColorString, + DefaultEmphasisFocus, + BlurScope +} from '../../util/types'; import SeriesModel from '../../model/Series'; import type { LineDrawSeriesScope, LineDrawModelOption } from './LineDraw'; import { TextStyleProps } from 'zrender/src/graphic/Text'; @@ -206,13 +213,21 @@ class Line extends graphic.Group { let labelStatesModels = seriesScope && seriesScope.labelStatesModels; + let emphasisDisabled = seriesScope && seriesScope.emphasisDisabled; + let focus = (seriesScope && seriesScope.focus) as DefaultEmphasisFocus; + let blurScope = (seriesScope && seriesScope.blurScope) as BlurScope; + // Optimization for large dataset if (!seriesScope || lineData.hasItemOption) { const itemModel = lineData.getItemModel(idx); + const emphasisModel = itemModel.getModel('emphasis'); - emphasisLineStyle = itemModel.getModel(['emphasis', 'lineStyle']).getLineStyle(); + emphasisLineStyle = emphasisModel.getModel('lineStyle').getLineStyle(); blurLineStyle = itemModel.getModel(['blur', 'lineStyle']).getLineStyle(); selectLineStyle = itemModel.getModel(['select', 'lineStyle']).getLineStyle(); + emphasisDisabled = emphasisModel.get('disabled'); + focus = emphasisModel.get('focus'); + blurScope = emphasisModel.get('blurScope'); labelStatesModels = getLabelStatesModels(itemModel); } @@ -296,7 +311,7 @@ class Line extends graphic.Group { inside: false // Can't be inside for stroke element. }); - enableHoverEmphasis(this); + toggleHoverEmphasis(this, focus, blurScope, emphasisDisabled); } highlight() { diff --git a/src/chart/helper/LineDraw.ts b/src/chart/helper/LineDraw.ts index 52f54985be..d96595395b 100644 --- a/src/chart/helper/LineDraw.ts +++ b/src/chart/helper/LineDraw.ts @@ -30,7 +30,8 @@ import { StatesOptionMixin, DisplayState, LabelOption, - StatesMixinBase + DefaultEmphasisFocus, + BlurScope } from '../../util/types'; import Displayable from 'zrender/src/graphic/Displayable'; import Model from '../../model/Model'; @@ -53,7 +54,11 @@ interface LineDrawStateOption { } export interface LineDrawModelOption extends LineDrawStateOption, - StatesOptionMixin { + StatesOptionMixin { // If has effect effect?: { show?: boolean @@ -88,6 +93,10 @@ export interface LineDrawSeriesScope { selectLineStyle?: ZRStyleProps labelStatesModels: Record> + + focus?: DefaultEmphasisFocus + blurScope?: BlurScope + emphasisDisabled?: boolean; } class LineDraw { @@ -237,12 +246,17 @@ function isEffectObject(el: Displayable) { function makeSeriesScope(lineData: ListForLineDraw): LineDrawSeriesScope { const hostModel = lineData.hostModel; + const emphasisModel = hostModel.getModel('emphasis'); return { lineStyle: hostModel.getModel('lineStyle').getLineStyle(), - emphasisLineStyle: hostModel.getModel(['emphasis', 'lineStyle']).getLineStyle(), + emphasisLineStyle: emphasisModel.getModel(['lineStyle']).getLineStyle(), blurLineStyle: hostModel.getModel(['blur', 'lineStyle']).getLineStyle(), selectLineStyle: hostModel.getModel(['select', 'lineStyle']).getLineStyle(), + emphasisDisabled: emphasisModel.get('disabled'), + blurScope: emphasisModel.get('blurScope'), + focus: emphasisModel.get('focus'), + labelStatesModels: getLabelStatesModels(hostModel) }; } diff --git a/src/chart/helper/Polyline.ts b/src/chart/helper/Polyline.ts index a371edcfdd..731f262fc8 100644 --- a/src/chart/helper/Polyline.ts +++ b/src/chart/helper/Polyline.ts @@ -18,9 +18,10 @@ */ import * as graphic from '../../util/graphic'; -import { enableHoverEmphasis } from '../../util/states'; +import { toggleHoverEmphasis } from '../../util/states'; import type { LineDrawSeriesScope, LineDrawModelOption } from './LineDraw'; import type SeriesData from '../../data/SeriesData'; +import { BlurScope, DefaultEmphasisFocus } from '../../util/types'; class Polyline extends graphic.Group { constructor(lineData: SeriesData, idx: number, seriesScope: LineDrawSeriesScope) { @@ -62,19 +63,27 @@ class Polyline extends graphic.Group { const itemModel = lineData.getItemModel(idx); - let hoverLineStyle = seriesScope && seriesScope.emphasisLineStyle; + let emphasisLineStyle = seriesScope && seriesScope.emphasisLineStyle; + let focus = (seriesScope && seriesScope.focus) as DefaultEmphasisFocus; + let blurScope = (seriesScope && seriesScope.blurScope) as BlurScope; + let emphasisDisabled = seriesScope && seriesScope.emphasisDisabled; + if (!seriesScope || lineData.hasItemOption) { - hoverLineStyle = itemModel.getModel(['emphasis', 'lineStyle']).getLineStyle(); + const emphasisModel = itemModel.getModel('emphasis'); + emphasisLineStyle = emphasisModel.getModel('lineStyle').getLineStyle(); + emphasisDisabled = emphasisModel.get('disabled'); + focus = emphasisModel.get('focus'); + blurScope = emphasisModel.get('blurScope'); } line.useStyle(lineData.getItemVisual(idx, 'style')); line.style.fill = null; line.style.strokeNoScale = true; const lineEmphasisState = line.ensureState('emphasis'); - lineEmphasisState.style = hoverLineStyle; + lineEmphasisState.style = emphasisLineStyle; - enableHoverEmphasis(this); + toggleHoverEmphasis(this, focus, blurScope, emphasisDisabled); }; updateLayout(lineData: SeriesData, idx: number) { diff --git a/src/chart/helper/Symbol.ts b/src/chart/helper/Symbol.ts index 8f994eb6b8..c9d6affd26 100644 --- a/src/chart/helper/Symbol.ts +++ b/src/chart/helper/Symbol.ts @@ -20,7 +20,7 @@ import {createSymbol, normalizeSymbolOffset, normalizeSymbolSize} from '../../util/symbol'; import * as graphic from '../../util/graphic'; import {getECData} from '../../util/innerStore'; -import { enterEmphasis, leaveEmphasis, enableHoverEmphasis } from '../../util/states'; +import { enterEmphasis, leaveEmphasis, toggleHoverEmphasis } from '../../util/states'; import {getDefaultLabel} from './labelHelper'; import SeriesData from '../../data/SeriesData'; import { ColorString, BlurScope, AnimationOption, ZRColor } from '../../util/types'; @@ -220,6 +220,7 @@ class Symbol extends graphic.Group { let selectItemStyle; let focus; let blurScope: BlurScope; + let emphasisDisabled: boolean; let labelStatesModels; @@ -237,6 +238,7 @@ class Symbol extends graphic.Group { hoverScale = seriesScope.hoverScale; cursorStyle = seriesScope.cursorStyle; + emphasisDisabled = seriesScope.emphasisDisabled; } if (!seriesScope || data.hasItemOption) { @@ -250,6 +252,7 @@ class Symbol extends graphic.Group { focus = emphasisModel.get('focus'); blurScope = emphasisModel.get('blurScope'); + emphasisDisabled = emphasisModel.get('disabled'); labelStatesModels = getLabelStatesModels(itemModel); @@ -343,7 +346,7 @@ class Symbol extends graphic.Group { } this.setSymbolScale(1); - enableHoverEmphasis(this, focus, blurScope); + toggleHoverEmphasis(this, focus, blurScope, emphasisDisabled); } setSymbolScale(scale: number) { diff --git a/src/chart/helper/SymbolDraw.ts b/src/chart/helper/SymbolDraw.ts index 1f27f1a708..77d2f4c330 100644 --- a/src/chart/helper/SymbolDraw.ts +++ b/src/chart/helper/SymbolDraw.ts @@ -120,6 +120,7 @@ export interface SymbolDrawSeriesScope { focus?: DefaultEmphasisFocus blurScope?: BlurScope + emphasisDisabled?: boolean labelStatesModels: Record> @@ -141,6 +142,7 @@ function makeSeriesScope(data: SeriesData): SymbolDrawSeriesScope { focus: emphasisModel.get('focus'), blurScope: emphasisModel.get('blurScope'), + emphasisDisabled: emphasisModel.get('disabled'), hoverScale: emphasisModel.get('scale'), diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts index df90a45196..c6cc7b628e 100644 --- a/src/chart/line/LineView.ts +++ b/src/chart/line/LineView.ts @@ -43,12 +43,12 @@ import type { ECElement, DisplayState, LabelOption, - ParsedValue, + ParsedValue } from '../../util/types'; import type OrdinalScale from '../../scale/Ordinal'; import type Axis2D from '../../coord/cartesian/Axis2D'; import { CoordinateSystemClipArea, isCoordinateSystemType } from '../../coord/CoordinateSystem'; -import { setStatesStylesFromModel, setStatesFlag, enableHoverEmphasis, SPECIAL_STATES } from '../../util/states'; +import { setStatesStylesFromModel, setStatesFlag, toggleHoverEmphasis, SPECIAL_STATES } from '../../util/states'; import Model from '../../model/Model'; import { setLabelStyle, getLabelStatesModels, labelInner } from '../../label/labelStyle'; import { getDefaultLabel, getDefaultInterpolatedLabel } from '../helper/labelHelper'; @@ -803,8 +803,10 @@ class LineView extends ChartView { } } - const focus = seriesModel.get(['emphasis', 'focus']); - const blurScope = seriesModel.get(['emphasis', 'blurScope']); + const emphasisModel = seriesModel.getModel('emphasis'); + const focus = emphasisModel.get('focus'); + const blurScope = emphasisModel.get('blurScope'); + const emphasisDisabled = emphasisModel.get('disabled'); polyline.useStyle(zrUtil.defaults( // Use color in lineStyle first @@ -825,7 +827,7 @@ class LineView extends ChartView { // Needs seriesIndex for focus getECData(polyline).seriesIndex = seriesModel.seriesIndex; - enableHoverEmphasis(polyline, focus, blurScope); + toggleHoverEmphasis(polyline, focus, blurScope, emphasisDisabled); const smooth = getSmooth(seriesModel.get('smooth')); const smoothMonotone = seriesModel.get('smoothMonotone'); @@ -864,7 +866,7 @@ class LineView extends ChartView { setStatesStylesFromModel(polygon, seriesModel, 'areaStyle'); // Needs seriesIndex for focus getECData(polygon).seriesIndex = seriesModel.seriesIndex; - enableHoverEmphasis(polygon, focus, blurScope); + toggleHoverEmphasis(polygon, focus, blurScope, emphasisDisabled); } const changePolyState = (toState: DisplayState) => { @@ -899,7 +901,7 @@ class LineView extends ChartView { componentIndex: seriesModel.componentIndex, seriesIndex: seriesModel.seriesIndex, seriesName: seriesModel.name, - seriesType: 'line', + seriesType: 'line' }; } diff --git a/src/chart/parallel/ParallelView.ts b/src/chart/parallel/ParallelView.ts index adb970e571..4f00445c28 100644 --- a/src/chart/parallel/ParallelView.ts +++ b/src/chart/parallel/ParallelView.ts @@ -18,7 +18,7 @@ */ import * as graphic from '../../util/graphic'; -import { setStatesStylesFromModel, enableHoverEmphasis } from '../../util/states'; +import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states'; import ChartView from '../../view/Chart'; import SeriesData from '../../data/SeriesData'; import ParallelSeriesModel, { ParallelSeriesDataItemOption } from './ParallelSeries'; @@ -218,7 +218,9 @@ function updateElCommon( const emphasisModel = itemModel.getModel('emphasis'); setStatesStylesFromModel(el, itemModel, 'lineStyle'); - enableHoverEmphasis(el, emphasisModel.get('focus'), emphasisModel.get('blurScope')); + toggleHoverEmphasis( + el, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled') + ); } // function simpleDiff(oldData, newData, dimensions) { diff --git a/src/chart/pie/PieView.ts b/src/chart/pie/PieView.ts index e464755ecd..5dc6294049 100644 --- a/src/chart/pie/PieView.ts +++ b/src/chart/pie/PieView.ts @@ -21,7 +21,7 @@ import { extend, retrieve3 } from 'zrender/src/core/util'; import * as graphic from '../../util/graphic'; -import { setStatesStylesFromModel, enableHoverEmphasis } from '../../util/states'; +import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states'; import ChartView from '../../view/Chart'; import GlobalModel from '../../model/Global'; import ExtensionAPI from '../../core/ExtensionAPI'; @@ -164,7 +164,9 @@ class PiePiece extends graphic.Sector { y: dy }); - enableHoverEmphasis(this, emphasisModel.get('focus'), emphasisModel.get('blurScope')); + toggleHoverEmphasis( + this, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled') + ); } private _updateLabel(seriesModel: PieSeriesModel, data: SeriesData, idx: number): void { diff --git a/src/chart/radar/RadarView.ts b/src/chart/radar/RadarView.ts index f38d1df866..429b5a50e4 100644 --- a/src/chart/radar/RadarView.ts +++ b/src/chart/radar/RadarView.ts @@ -18,7 +18,7 @@ */ import * as graphic from '../../util/graphic'; -import { setStatesStylesFromModel, enableHoverEmphasis } from '../../util/states'; +import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states'; import * as zrUtil from 'zrender/src/core/util'; import * as symbolUtil from '../../util/symbol'; import ChartView from '../../view/Chart'; @@ -259,7 +259,9 @@ class RadarView extends ChartView { ); }); - enableHoverEmphasis(itemGroup, emphasisModel.get('focus'), emphasisModel.get('blurScope')); + toggleHoverEmphasis( + itemGroup, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled') + ); }); this._data = data; diff --git a/src/chart/sankey/SankeyView.ts b/src/chart/sankey/SankeyView.ts index f7e3852d3a..5a9110f760 100644 --- a/src/chart/sankey/SankeyView.ts +++ b/src/chart/sankey/SankeyView.ts @@ -18,7 +18,7 @@ */ import * as graphic from '../../util/graphic'; -import { enterEmphasis, leaveEmphasis, enableHoverEmphasis, setStatesStylesFromModel } from '../../util/states'; +import { enterEmphasis, leaveEmphasis, toggleHoverEmphasis, setStatesStylesFromModel } from '../../util/states'; import { LayoutOrient, ECElement } from '../../util/types'; import { PathProps } from 'zrender/src/graphic/Path'; import SankeySeriesModel, { SankeyEdgeItemOption, SankeyNodeItemOption } from './SankeySeries'; @@ -229,10 +229,11 @@ class SankeyView extends ChartView { edgeData.setItemGraphicEl(edge.dataIndex, curve); const focus = emphasisModel.get('focus'); - enableHoverEmphasis( + toggleHoverEmphasis( curve, focus === 'adjacency' ? edge.getAdjacentDataIndices() : focus, - emphasisModel.get('blurScope') + emphasisModel.get('blurScope'), + emphasisModel.get('disabled') ); getECData(curve).dataType = 'edge'; @@ -280,10 +281,11 @@ class SankeyView extends ChartView { getECData(rect).dataType = 'node'; const focus = emphasisModel.get('focus'); - enableHoverEmphasis( + toggleHoverEmphasis( rect, focus === 'adjacency' ? node.getAdjacentDataIndices() : focus, - emphasisModel.get('blurScope') + emphasisModel.get('blurScope'), + emphasisModel.get('disabled') ); }); diff --git a/src/chart/sunburst/SunburstPiece.ts b/src/chart/sunburst/SunburstPiece.ts index e507a056a6..ba6a334c63 100644 --- a/src/chart/sunburst/SunburstPiece.ts +++ b/src/chart/sunburst/SunburstPiece.ts @@ -19,7 +19,7 @@ import * as zrUtil from 'zrender/src/core/util'; import * as graphic from '../../util/graphic'; -import { enableHoverEmphasis, SPECIAL_STATES, DISPLAY_STATES } from '../../util/states'; +import { toggleHoverEmphasis, SPECIAL_STATES, DISPLAY_STATES } from '../../util/states'; import {createTextStyle} from '../../label/labelStyle'; import { TreeNode } from '../../data/Tree'; import SunburstSeriesModel, { SunburstSeriesNodeItemOption, SunburstSeriesOption } from './SunburstSeries'; @@ -154,7 +154,7 @@ class SunburstPiece extends graphic.Sector { : focus === 'descendant' ? node.getDescendantIndices() : focus; - enableHoverEmphasis(this, focusOrIndices, emphasisModel.get('blurScope')); + toggleHoverEmphasis(this, focusOrIndices, emphasisModel.get('blurScope'), emphasisModel.get('disabled')); } _updateLabel( diff --git a/src/chart/themeRiver/ThemeRiverView.ts b/src/chart/themeRiver/ThemeRiverView.ts index ba0f149cbf..754eb2bf7f 100644 --- a/src/chart/themeRiver/ThemeRiverView.ts +++ b/src/chart/themeRiver/ThemeRiverView.ts @@ -19,7 +19,7 @@ import {ECPolygon} from '../line/poly'; import * as graphic from '../../util/graphic'; -import { setStatesStylesFromModel, enableHoverEmphasis } from '../../util/states'; +import { setStatesStylesFromModel, toggleHoverEmphasis } from '../../util/states'; import {setLabelStyle, getLabelStatesModels} from '../../label/labelStyle'; import {bind} from 'zrender/src/core/util'; import DataDiffer from '../../data/DataDiffer'; @@ -166,7 +166,9 @@ class ThemeRiverView extends ChartView { data.setItemGraphicEl(idx, polygon); setStatesStylesFromModel(polygon, seriesModel); - enableHoverEmphasis(polygon, emphasisModel.get('focus'), emphasisModel.get('blurScope')); + toggleHoverEmphasis( + polygon, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled') + ); } this._layersSeries = layersSeries; diff --git a/src/chart/treemap/TreemapView.ts b/src/chart/treemap/TreemapView.ts index b9e2e9c72b..02c8f3bcee 100644 --- a/src/chart/treemap/TreemapView.ts +++ b/src/chart/treemap/TreemapView.ts @@ -206,8 +206,7 @@ class TreemapView extends ChartView { const renderResult = this._doRender(containerGroup, seriesModel, reRoot); ( - hasAnimation && - !isInit && ( + hasAnimation && !isInit && ( !payloadType || payloadType === 'treemapZoomToNode' || payloadType === 'treemapRootToNode' @@ -800,8 +799,10 @@ function renderNode( const bg = giveGraphic('background', Rect, depth, Z2_BG); bg && renderBackground(group, bg, isParent && thisLayout.upperLabelHeight); - const focus = nodeModel.get(['emphasis', 'focus']); - const blurScope = nodeModel.get(['emphasis', 'blurScope']); + const emphasisModel = nodeModel.getModel('emphasis'); + const focus = emphasisModel.get('focus'); + const blurScope = emphasisModel.get('blurScope'); + const isDisabled = emphasisModel.get('disabled'); const focusOrIndices = focus === 'ancestor' ? thisNode.getAncestorsIndices() @@ -817,7 +818,7 @@ function renderNode( setAsHighDownDispatcher(group, false); } if (bg) { - setAsHighDownDispatcher(bg, true); + setAsHighDownDispatcher(bg, !isDisabled); // Only for enabling highlight/downplay. data.setItemGraphicEl(thisNode.dataIndex, bg); @@ -833,7 +834,7 @@ function renderNode( if (bg && isHighDownDispatcher(bg)) { setAsHighDownDispatcher(bg, false); } - setAsHighDownDispatcher(group, true); + setAsHighDownDispatcher(group, !isDisabled); // Only for enabling highlight/downplay. data.setItemGraphicEl(thisNode.dataIndex, group); diff --git a/src/component/helper/MapDraw.ts b/src/component/helper/MapDraw.ts index f9a97f85a4..daca759596 100644 --- a/src/component/helper/MapDraw.ts +++ b/src/component/helper/MapDraw.ts @@ -23,7 +23,7 @@ import * as roamHelper from '../../component/helper/roamHelper'; import {onIrrelevantElement} from '../../component/helper/cursorHelper'; import * as graphic from '../../util/graphic'; import { - enableHoverEmphasis, + toggleHoverEmphasis, enableComponentHighDownFeatures, setDefaultStateProxy } from '../../util/states'; @@ -836,9 +836,7 @@ function resetStateTriggerForRegion( // @ts-ignore FIXME:TS fix the "compatible with each other"? const emphasisModel = regionModel.getModel('emphasis'); const focus = emphasisModel.get('focus'); - enableHoverEmphasis( - el, focus, emphasisModel.get('blurScope') - ); + toggleHoverEmphasis(el, focus, emphasisModel.get('blurScope'), emphasisModel.get('disabled')); if (viewBuildCtx.isGeo) { enableComponentHighDownFeatures(el, mapOrGeoModel as GeoModel, regionName); } diff --git a/src/component/marker/MarkAreaView.ts b/src/component/marker/MarkAreaView.ts index f98c59c2f9..1968d02360 100644 --- a/src/component/marker/MarkAreaView.ts +++ b/src/component/marker/MarkAreaView.ts @@ -23,11 +23,11 @@ import * as colorUtil from 'zrender/src/tool/color'; import SeriesData from '../../data/SeriesData'; import * as numberUtil from '../../util/number'; import * as graphic from '../../util/graphic'; -import { enableHoverEmphasis, setStatesStylesFromModel } from '../../util/states'; +import { toggleHoverEmphasis, setStatesStylesFromModel } from '../../util/states'; import * as markerHelper from './markerHelper'; import MarkerView from './MarkerView'; import { retrieve, mergeAll, map, curry, filter, HashMap, extend, isString } from 'zrender/src/core/util'; -import { ParsedValue, ScaleDataValue, ZRColor } from '../../util/types'; +import { ScaleDataValue, ZRColor } from '../../util/types'; import { CoordinateSystem, isCoordinateSystemType } from '../../coord/CoordinateSystem'; import MarkAreaModel, { MarkArea2DDataItemOption } from './MarkAreaModel'; import SeriesModel from '../../model/Series'; @@ -346,7 +346,7 @@ class MarkAreaView extends MarkerView { setStatesStylesFromModel(polygon, itemModel); - enableHoverEmphasis(polygon); + toggleHoverEmphasis(polygon, null, null, itemModel.get(['emphasis', 'disabled'])); getECData(polygon).dataModel = maModel; }); diff --git a/src/core/echarts.ts b/src/core/echarts.ts index bb1dd88296..696ef7e3dc 100644 --- a/src/core/echarts.ts +++ b/src/core/echarts.ts @@ -78,7 +78,7 @@ import { findComponentHighDownDispatchers, blurComponent, handleGlobalMouseOverForHighDown, - handleGlboalMouseOutForHighDown + handleGlobalMouseOutForHighDown } from '../util/states'; import * as modelUtil from '../util/model'; import {throttle} from '../util/throttle'; @@ -1554,7 +1554,10 @@ class ECharts extends Eventful { }; if (isHighDownPayload(payload)) { if (model instanceof SeriesModel) { - if (payload.type === HIGHLIGHT_ACTION_TYPE && !payload.notBlur) { + if ( + payload.type === HIGHLIGHT_ACTION_TYPE + && !payload.notBlur && !model.get(['emphasis', 'disabled']) + ) { blurSeriesFromHighlightPayload(model, payload, ecIns._api); } } @@ -2006,7 +2009,7 @@ class ECharts extends Eventful { const el = e.target; const dispatcher = findEventDispatcher(el, isHighDownDispatcher); if (dispatcher) { - handleGlboalMouseOutForHighDown(dispatcher, e, ecIns._api); + handleGlobalMouseOutForHighDown(dispatcher, e, ecIns._api); markStatusToUpdate(ecIns); } }).on('click', function (e) { diff --git a/src/legacy/dataSelectAction.ts b/src/legacy/dataSelectAction.ts index 9a543ceb51..20aa742144 100644 --- a/src/legacy/dataSelectAction.ts +++ b/src/legacy/dataSelectAction.ts @@ -17,7 +17,7 @@ * under the License. */ -import { Dictionary, Payload, SelectChangedPayload } from '../util/types'; +import { Payload, SelectChangedPayload } from '../util/types'; import SeriesModel from '../model/Series'; import { extend, each, isArray, isString } from 'zrender/src/core/util'; import GlobalModel from '../model/Global'; diff --git a/src/model/Series.ts b/src/model/Series.ts index dc97df40c5..4c9b14186e 100644 --- a/src/model/Series.ts +++ b/src/model/Series.ts @@ -571,7 +571,7 @@ class SeriesModel extends ComponentMode const data = this.getData(dataType); return (selectedMap === 'all' || selectedMap[getSelectionKey(data, dataIndex)]) - && !data.getItemModel>(dataIndex).get(['select', 'disabled']) + && !data.getItemModel>(dataIndex).get(['select', 'disabled']); } isUniversalTransitionEnabled(): boolean { diff --git a/src/util/states.ts b/src/util/states.ts index 0f8a16d0c6..5ec316f93f 100644 --- a/src/util/states.ts +++ b/src/util/states.ts @@ -62,7 +62,6 @@ import ExtensionAPI from '../core/ExtensionAPI'; import ComponentModel from '../model/Component'; import { error } from './log'; - // Reserve 0 as default. let _highlightNextDigit = 1; @@ -75,6 +74,10 @@ const getSavedStates = makeInner<{ selectStroke?: ZRColor }, Path>(); +const getComponentStates = makeInner<{ + isBlured: boolean +}, SeriesModel | ComponentModel>(); + export const HOVER_STATE_NORMAL: 0 = 0; export const HOVER_STATE_BLUR: 1 = 1; export const HOVER_STATE_EMPHASIS: 2 = 2; @@ -425,13 +428,17 @@ function shouldSilent(el: Element, e: ElementEvent) { export function allLeaveBlur(api: ExtensionAPI) { const model = api.getModel(); model.eachComponent(function (componentType, componentModel) { - const view = componentType === 'series' - ? api.getViewOfSeriesModel(componentModel as SeriesModel) - : api.getViewOfComponentModel(componentModel); - // Leave blur anyway - view.group.traverse(function (child) { - singleLeaveBlur(child); - }); + const componentStates = getComponentStates(componentModel); + if (componentStates.isBlured) { + const view = componentType === 'series' + ? api.getViewOfSeriesModel(componentModel as SeriesModel) + : api.getViewOfComponentModel(componentModel); + // Leave blur anyway + view.group.traverse(function (child) { + singleLeaveBlur(child); + }); + } + componentStates.isBlured = false; }); } @@ -502,6 +509,8 @@ export function blurSeries( } blurredSeries.push(seriesModel); + + getComponentStates(seriesModel).isBlured = true; } }); @@ -530,6 +539,8 @@ export function blurComponent( return; } + getComponentStates(componentModel).isBlured = true; + const view = api.getViewOfComponentModel(componentModel); if (!view || !view.focusBlurEnabled) { return; @@ -663,7 +674,7 @@ export function handleGlobalMouseOverForHighDown( } } -export function handleGlboalMouseOutForHighDown( +export function handleGlobalMouseOutForHighDown( dispatcher: Element, e: ElementEvent, api: ExtensionAPI @@ -758,6 +769,15 @@ export function enableHoverEmphasis(el: Element, focus?: InnerFocus, blurScope?: enableHoverFocus(el, focus, blurScope); } +export function disableHoverEmphasis(el: Element) { + setAsHighDownDispatcher(el, false); +} + +export function toggleHoverEmphasis(el: Element, focus: InnerFocus, blurScope: BlurScope, isDisabled: boolean) { + isDisabled ? disableHoverEmphasis(el) + : enableHoverEmphasis(el, focus, blurScope); +} + export function enableHoverFocus(el: Element, focus: InnerFocus, blurScope: BlurScope) { const ecData = getECData(el); if (focus != null) { @@ -804,7 +824,12 @@ export function setStatesStylesFromModel( /** - * @parame el + * + * Set element as highlight / downplay dispatcher. + * It will be checked when element recieved mouseover event or from highlight action. + * It's in change of all highlight/downplay behavior of it's children. + * + * @param el * @param el.highDownSilentOnTouch * In touch device, mouseover event will be trigger on touchstart event * (see module:zrender/dom/HandlerProxy). By this mechanism, we can diff --git a/src/util/types.ts b/src/util/types.ts index 35bd515b1a..4c00203ea0 100644 --- a/src/util/types.ts +++ b/src/util/types.ts @@ -1503,6 +1503,11 @@ export interface StatesOptionMixin< * Default to be coordinate system. */ blurScope?: BlurScope + + /** + * If emphasis state is disabled. + */ + disabled?: boolean } /** * Select states diff --git a/src/view/Chart.ts b/src/view/Chart.ts index e305651b7d..8151096f2d 100644 --- a/src/view/Chart.ts +++ b/src/view/Chart.ts @@ -22,7 +22,7 @@ import Group from 'zrender/src/graphic/Group'; import * as componentUtil from '../util/component'; import * as clazzUtil from '../util/clazz'; import * as modelUtil from '../util/model'; -import { enterEmphasis, leaveEmphasis, getHighlightDigit } from '../util/states'; +import { enterEmphasis, leaveEmphasis, getHighlightDigit, isHighDownDispatcher } from '../util/states'; import {createTask, TaskResetCallbackReturn} from '../core/task'; import createRenderPlanner from '../chart/helper/createRenderPlanner'; import SeriesModel from '../model/Series'; @@ -216,7 +216,7 @@ class ChartView { * Set state of single element */ function elSetState(el: Element, state: DisplayState, highlightDigit: number) { - if (el) { + if (el && isHighDownDispatcher(el)) { (state === 'emphasis' ? enterEmphasis : leaveEmphasis)(el, highlightDigit); } } diff --git a/test/emphasis-disabled.html b/test/emphasis-disabled.html new file mode 100644 index 0000000000..352ef6cd92 --- /dev/null +++ b/test/emphasis-disabled.html @@ -0,0 +1,142 @@ + + + + + + + + + + + + + + + + + + + + + + + +
+

Tests for focus and blurScope

+
+ + + + + + + + diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json index d46c880bac..a20b5533ac 100644 --- a/test/runTest/actions/__meta__.json +++ b/test/runTest/actions/__meta__.json @@ -84,6 +84,7 @@ "drag-out": 3, "dynamic-splitNumber": 1, "ec-event": 4, + "emphasis-disabled": 13, "emphasis-inherit": 1, "funnel": 2, "gauge-simple": 2, @@ -121,7 +122,7 @@ "line-case": 1, "line-crash": 1, "line-endLabel": 1, - "line-visual2": 1, + "line-visual2": 2, "lines-bus": 1, "map": 3, "map-contour": 2, diff --git a/test/runTest/actions/emphasis-disabled.json b/test/runTest/actions/emphasis-disabled.json new file mode 100644 index 0000000000..79ced172e5 --- /dev/null +++ b/test/runTest/actions/emphasis-disabled.json @@ -0,0 +1 @@ +[{"name":"Action 1","ops":[{"type":"mousedown","time":536,"x":404,"y":207},{"type":"mouseup","time":682,"x":404,"y":207},{"time":683,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1057,"x":403,"y":207},{"type":"mousemove","time":1257,"x":334,"y":207},{"type":"mousemove","time":1462,"x":293,"y":214},{"type":"mousedown","time":1571,"x":292,"y":214},{"type":"mousemove","time":1674,"x":292,"y":214},{"type":"mouseup","time":1687,"x":292,"y":214},{"time":1688,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2006,"x":293,"y":214},{"type":"mousemove","time":2207,"x":318,"y":198},{"type":"mousemove","time":2414,"x":398,"y":139},{"type":"mousemove","time":2624,"x":406,"y":95},{"type":"mousemove","time":2877,"x":408,"y":91},{"type":"screenshot","time":3464}],"scrollY":0,"scrollX":0,"timestamp":1642065894921},{"name":"Action 2","ops":[{"type":"mousedown","time":823,"x":465,"y":236},{"type":"mouseup","time":941,"x":465,"y":236},{"time":942,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1034,"x":465,"y":236},{"type":"mousemove","time":1234,"x":391,"y":247},{"type":"mousemove","time":1434,"x":341,"y":247},{"type":"mousedown","time":1529,"x":339,"y":247},{"type":"mousemove","time":1634,"x":339,"y":247},{"type":"mouseup","time":1672,"x":339,"y":247},{"time":1673,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1767,"x":340,"y":247},{"type":"mousemove","time":1967,"x":327,"y":186},{"type":"mousemove","time":2167,"x":311,"y":154},{"type":"mousemove","time":2367,"x":309,"y":147},{"type":"mousemove","time":2567,"x":309,"y":140},{"type":"screenshot","time":3357}],"scrollY":418,"scrollX":0,"timestamp":1642065953964},{"name":"Action 3","ops":[{"type":"mousemove","time":147,"x":581,"y":221},{"type":"mousemove","time":350,"x":581,"y":219},{"type":"screenshot","time":808},{"type":"mousemove","time":847,"x":580,"y":220},{"type":"mousemove","time":1050,"x":527,"y":221},{"type":"mousemove","time":1267,"x":497,"y":226},{"type":"mousemove","time":2013,"x":498,"y":226},{"type":"mousemove","time":2219,"x":658,"y":350},{"type":"mousemove","time":2429,"x":661,"y":357},{"type":"mousedown","time":2545,"x":661,"y":357},{"type":"mouseup","time":2677,"x":661,"y":357},{"time":2678,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2947,"x":661,"y":357},{"type":"mousemove","time":3147,"x":651,"y":406},{"type":"mousemove","time":3297,"x":651,"y":406}],"scrollY":711,"scrollX":0,"timestamp":1642065966069},{"name":"Action 4","ops":[{"type":"mousedown","time":242,"x":472,"y":243},{"type":"mouseup","time":325,"x":472,"y":243},{"time":326,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":387,"x":472,"y":243},{"type":"mousemove","time":587,"x":358,"y":249},{"type":"mousemove","time":791,"x":347,"y":252},{"type":"mousedown","time":843,"x":347,"y":252},{"type":"mouseup","time":942,"x":347,"y":252},{"time":943,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1003,"x":346,"y":251},{"type":"mousemove","time":1203,"x":180,"y":153},{"type":"mousemove","time":1410,"x":4,"y":135},{"type":"mousemove","time":1654,"x":1,"y":130},{"type":"mousemove","time":1854,"x":17,"y":135},{"type":"mousemove","time":2058,"x":18,"y":135},{"type":"screenshot","time":2492}],"scrollY":1257,"scrollX":0,"timestamp":1642065997747},{"name":"Action 5","ops":[{"type":"mousemove","time":151,"x":476,"y":254},{"type":"mousemove","time":351,"x":476,"y":256},{"type":"mousedown","time":490,"x":476,"y":262},{"type":"mousemove","time":556,"x":476,"y":262},{"type":"mouseup","time":615,"x":476,"y":262},{"time":616,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":751,"x":476,"y":262},{"type":"mousemove","time":953,"x":454,"y":209},{"type":"mousemove","time":1170,"x":440,"y":209},{"type":"mousemove","time":1401,"x":447,"y":211},{"type":"mousedown","time":1460,"x":447,"y":211},{"type":"mouseup","time":1576,"x":447,"y":211},{"time":1577,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1650,"x":447,"y":210},{"type":"mousemove","time":1850,"x":408,"y":131},{"type":"mousemove","time":2084,"x":365,"y":80},{"type":"mousemove","time":2307,"x":373,"y":118},{"type":"screenshot","time":2934}],"scrollY":2077,"scrollX":0,"timestamp":1642066040536},{"name":"Action 6","ops":[{"type":"mousemove","time":80,"x":408,"y":382},{"type":"mousemove","time":280,"x":410,"y":393},{"type":"mousemove","time":480,"x":400,"y":399},{"type":"mousemove","time":683,"x":400,"y":399},{"type":"mousedown","time":710,"x":400,"y":399},{"type":"mouseup","time":827,"x":400,"y":399},{"time":828,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":929,"x":400,"y":399},{"type":"mousemove","time":1129,"x":376,"y":398},{"type":"mousemove","time":1330,"x":367,"y":398},{"type":"mousedown","time":1435,"x":365,"y":398},{"type":"mousemove","time":1533,"x":365,"y":398},{"type":"mouseup","time":1537,"x":365,"y":398},{"time":1538,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1647,"x":365,"y":397},{"type":"mousemove","time":1847,"x":439,"y":295},{"type":"mousemove","time":2047,"x":448,"y":281},{"type":"mousemove","time":2252,"x":450,"y":268},{"type":"mousedown","time":2529,"x":450,"y":268},{"type":"mouseup","time":2688,"x":450,"y":268},{"time":2689,"delay":400,"type":"screenshot-auto"}],"scrollY":2520,"scrollX":0,"timestamp":1642066050374},{"name":"Action 7","ops":[{"type":"mousedown","time":284,"x":409,"y":142},{"type":"mouseup","time":367,"x":409,"y":142},{"time":368,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":494,"x":410,"y":142},{"type":"mousemove","time":695,"x":601,"y":255},{"type":"mousemove","time":895,"x":609,"y":279},{"type":"mousemove","time":1095,"x":610,"y":289},{"type":"mousedown","time":1177,"x":608,"y":288},{"type":"mouseup","time":1234,"x":608,"y":288},{"time":1235,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1301,"x":608,"y":288}],"scrollY":2937,"scrollX":0,"timestamp":1642066058909},{"name":"Action 8","ops":[{"type":"mousemove","time":201,"x":429,"y":415},{"type":"mousemove","time":406,"x":430,"y":413},{"type":"screenshot","time":974},{"type":"mousemove","time":1050,"x":431,"y":413},{"type":"mousemove","time":1255,"x":473,"y":390},{"type":"mousedown","time":2223,"x":473,"y":390},{"type":"mouseup","time":2333,"x":473,"y":390},{"time":2334,"delay":400,"type":"screenshot-auto"}],"scrollY":3642,"scrollX":0,"timestamp":1642066063854},{"name":"Action 9","ops":[{"type":"mousemove","time":121,"x":393,"y":203},{"type":"mousemove","time":325,"x":344,"y":202},{"type":"mousemove","time":591,"x":338,"y":202},{"type":"mousemove","time":1053,"x":338,"y":202},{"type":"mousemove","time":1253,"x":508,"y":223},{"type":"mousemove","time":1454,"x":510,"y":222},{"type":"mousemove","time":1486,"x":510,"y":222},{"type":"mousedown","time":2412,"x":510,"y":222},{"type":"mouseup","time":2496,"x":510,"y":222},{"time":2497,"delay":400,"type":"screenshot-auto"}],"scrollY":4233.875,"scrollX":0,"timestamp":1642066092686},{"name":"Action 10","ops":[{"type":"mousemove","time":143,"x":378,"y":373},{"type":"mousemove","time":343,"x":233,"y":377},{"type":"mousedown","time":436,"x":233,"y":377},{"type":"mouseup","time":552,"x":233,"y":377},{"time":553,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":778,"x":233,"y":377},{"type":"mousemove","time":983,"x":216,"y":299},{"type":"mousemove","time":1194,"x":360,"y":266},{"type":"mousemove","time":1399,"x":565,"y":226},{"type":"mousedown","time":1454,"x":565,"y":226},{"type":"mouseup","time":1571,"x":565,"y":226},{"time":1572,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1793,"x":565,"y":226},{"type":"mousemove","time":1993,"x":59,"y":240},{"type":"mousemove","time":2194,"x":54,"y":241},{"type":"mousemove","time":2398,"x":39,"y":242},{"type":"screenshot","time":2989}],"scrollY":4522.875,"scrollX":0,"timestamp":1642066137936},{"name":"Action 11","ops":[{"type":"mousedown","time":359,"x":372,"y":148},{"type":"mouseup","time":476,"x":372,"y":148},{"time":477,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":603,"x":373,"y":148},{"type":"mousemove","time":804,"x":562,"y":148},{"type":"mousedown","time":976,"x":582,"y":144},{"type":"mousemove","time":1004,"x":582,"y":144},{"type":"mouseup","time":1075,"x":582,"y":144},{"time":1076,"delay":400,"type":"screenshot-auto"}],"scrollY":5115.875,"scrollX":0,"timestamp":1642066152177},{"name":"Action 12","ops":[{"type":"mousedown","time":507,"x":459,"y":141},{"type":"mouseup","time":591,"x":459,"y":141},{"time":592,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":700,"x":459,"y":140},{"type":"mousemove","time":904,"x":438,"y":79},{"type":"mousemove","time":1116,"x":438,"y":68},{"type":"mousemove","time":1317,"x":437,"y":58},{"type":"mousemove","time":1538,"x":438,"y":58},{"type":"screenshot","time":1889}],"scrollY":5495.875,"scrollX":0,"timestamp":1642066179265},{"name":"Action 13","ops":[{"type":"mousedown","time":237,"x":450,"y":461},{"type":"mouseup","time":338,"x":450,"y":461},{"time":339,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":383,"x":449,"y":459},{"type":"mousemove","time":583,"x":421,"y":334},{"type":"mousedown","time":660,"x":420,"y":332},{"type":"mousemove","time":788,"x":420,"y":332},{"type":"mouseup","time":821,"x":420,"y":332},{"time":822,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":932,"x":420,"y":333},{"type":"mousemove","time":1132,"x":95,"y":478},{"type":"mousemove","time":1332,"x":45,"y":506},{"type":"mousemove","time":1532,"x":25,"y":520},{"type":"mousemove","time":1740,"x":15,"y":527},{"type":"mousedown","time":1874,"x":15,"y":527},{"type":"mouseup","time":1971,"x":15,"y":527},{"time":1972,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2183,"x":15,"y":527}],"scrollY":5760,"scrollX":0,"timestamp":1642066209267}] \ No newline at end of file diff --git a/test/runTest/actions/line-visual2.json b/test/runTest/actions/line-visual2.json index f5286b345a..b36d7992d0 100644 --- a/test/runTest/actions/line-visual2.json +++ b/test/runTest/actions/line-visual2.json @@ -1 +1 @@ -[{"name":"Action 1","ops":[{"type":"mousedown","time":425,"x":45,"y":185},{"type":"mouseup","time":524,"x":45,"y":185},{"time":525,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":737,"x":45,"y":185},{"type":"mousemove","time":937,"x":112,"y":182},{"type":"mousemove","time":1174,"x":116,"y":182},{"type":"mousedown","time":1709,"x":116,"y":182},{"type":"mouseup","time":1770,"x":116,"y":182},{"time":1771,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2054,"x":116,"y":182},{"type":"mousemove","time":2254,"x":190,"y":179},{"type":"mousemove","time":2461,"x":223,"y":178},{"type":"mousedown","time":2963,"x":223,"y":178},{"type":"mouseup","time":3045,"x":223,"y":178},{"time":3046,"delay":400,"type":"screenshot-auto"}],"scrollY":1345,"scrollX":0,"timestamp":1631512007469}] \ No newline at end of file +[{"name":"Action 1","ops":[{"type":"mousedown","time":425,"x":45,"y":185},{"type":"mouseup","time":524,"x":45,"y":185},{"time":525,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":737,"x":45,"y":185},{"type":"mousemove","time":937,"x":112,"y":182},{"type":"mousemove","time":1174,"x":116,"y":182},{"type":"mousedown","time":1709,"x":116,"y":182},{"type":"mouseup","time":1770,"x":116,"y":182},{"time":1771,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2054,"x":116,"y":182},{"type":"mousemove","time":2254,"x":190,"y":179},{"type":"mousemove","time":2461,"x":223,"y":178},{"type":"mousedown","time":2963,"x":223,"y":178},{"type":"mouseup","time":3045,"x":223,"y":178},{"time":3046,"delay":400,"type":"screenshot-auto"}],"scrollY":1345,"scrollX":0,"timestamp":1631512007469},{"name":"Action 2","ops":[{"type":"mousedown","time":669,"x":403,"y":230},{"type":"mouseup","time":684,"x":403,"y":230},{"time":685,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1046,"x":401,"y":230},{"type":"mousemove","time":1251,"x":250,"y":195},{"type":"mousedown","time":1472,"x":250,"y":195},{"type":"mouseup","time":1476,"x":250,"y":195},{"time":1477,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1812,"x":253,"y":193},{"type":"mousemove","time":2013,"x":375,"y":111},{"type":"mousemove","time":2214,"x":372,"y":98},{"type":"mousemove","time":2419,"x":370,"y":96},{"type":"mousemove","time":2747,"x":370,"y":96},{"type":"mousemove","time":2947,"x":370,"y":91},{"type":"mousedown","time":3486,"x":370,"y":91},{"type":"mouseup","time":3491,"x":370,"y":91},{"time":3492,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":4355,"x":370,"y":91},{"type":"mouseup","time":4363,"x":370,"y":91},{"time":4364,"delay":400,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1642163581167}] \ No newline at end of file