Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
C
coopwire-hypothesis
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
孙灵跃 Leon Sun
coopwire-hypothesis
Commits
7650093f
Commit
7650093f
authored
Jan 31, 2022
by
Eduardo
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Apply suggestions from code review
Co-authored-by:
Robert Knight
<
robertknight@gmail.com
>
parent
a608f06e
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
66 additions
and
46 deletions
+66
-46
bucket-bar-client.js
src/annotator/bucket-bar-client.js
+2
-2
sidebar.js
src/annotator/sidebar.js
+1
-0
sidebar-test.js
src/annotator/test/sidebar-test.js
+3
-2
buckets-test.js
src/annotator/util/test/buckets-test.js
+58
-40
annotator.js
src/types/annotator.js
+2
-2
No files found.
src/annotator/bucket-bar-client.js
View file @
7650093f
...
@@ -65,8 +65,8 @@ export class BucketBarClient {
...
@@ -65,8 +65,8 @@ export class BucketBarClient {
this
.
_updatePending
=
true
;
this
.
_updatePending
=
true
;
requestAnimationFrame
(()
=>
{
requestAnimationFrame
(()
=>
{
//
In document with many annotations computing the anchor positions can
//
Computing anchor positions may be expensive when there are many
//
block the JS event loop for up to 200 ms.
//
annotations or a forced layout reflow
const
positions
=
computeAnchorPositions
(
this
.
_anchors
);
const
positions
=
computeAnchorPositions
(
this
.
_anchors
);
this
.
_hostRPC
.
call
(
'anchorsChanged'
,
positions
);
this
.
_hostRPC
.
call
(
'anchorsChanged'
,
positions
);
this
.
_updatePending
=
false
;
this
.
_updatePending
=
false
;
...
...
src/annotator/sidebar.js
View file @
7650093f
...
@@ -302,6 +302,7 @@ export default class Sidebar {
...
@@ -302,6 +302,7 @@ export default class Sidebar {
'anchorsChanged'
,
'anchorsChanged'
,
/** @param {AnchorPosition[]} positions */
/** @param {AnchorPosition[]} positions */
positions
=>
{
positions
=>
{
// Currently, only one guest frame sends anchor positions to the bucket bar
this
.
bucketBar
?.
update
(
positions
);
this
.
bucketBar
?.
update
(
positions
);
}
}
);
);
...
...
src/annotator/test/sidebar-test.js
View file @
7650093f
...
@@ -478,10 +478,11 @@ describe('Sidebar', () => {
...
@@ -478,10 +478,11 @@ describe('Sidebar', () => {
const
sidebar
=
createSidebar
();
const
sidebar
=
createSidebar
();
connectGuest
(
sidebar
);
connectGuest
(
sidebar
);
emitGuestEvent
(
'anchorsChanged'
,
[
1
,
2
]);
const
anchorPositions
=
[{
tag
:
't0'
,
top
:
1
,
bottom
:
2
}];
emitGuestEvent
(
'anchorsChanged'
,
anchorPositions
);
assert
.
calledOnce
(
sidebar
.
bucketBar
.
update
);
assert
.
calledOnce
(
sidebar
.
bucketBar
.
update
);
assert
.
calledWith
(
sidebar
.
bucketBar
.
update
,
[
1
,
2
]
);
assert
.
calledWith
(
sidebar
.
bucketBar
.
update
,
anchorPositions
);
});
});
});
});
});
});
...
...
src/annotator/util/test/buckets-test.js
View file @
7650093f
...
@@ -2,16 +2,20 @@ import {
...
@@ -2,16 +2,20 @@ import {
findClosestOffscreenAnchor
,
findClosestOffscreenAnchor
,
computeAnchorPositions
,
computeAnchorPositions
,
computeBuckets
,
computeBuckets
,
$imports
,
}
from
'../buckets'
;
}
from
'../buckets'
;
import
{
$imports
}
from
'../buckets'
;
describe
(
'annotator/util/buckets'
,
()
=>
{
describe
(
'annotator/util/buckets'
,
()
=>
{
let
fakeAnchors
;
let
fakeAnchors
;
let
fakeAnchorPositions
;
let
fakeGetBoundingClientRect
;
let
fakeGetBoundingClientRect
;
let
stubbedInnerHeight
;
let
stubbedInnerHeight
;
beforeEach
(()
=>
{
beforeEach
(()
=>
{
// In a normal `Anchor` object, `highlights` would be an array of
// DOM elements. Here, `highlights[0]` is the vertical offset (top) of the
// fake anchor's highlight box and `highlights[1]` is the height of the
// box. This is in used in conjunction with the mock for
// `getBoundingClientRect`, below.
fakeAnchors
=
[
fakeAnchors
=
[
// top: 1, bottom: 51 — above screen
// top: 1, bottom: 51 — above screen
{
annotation
:
{
$tag
:
't0'
},
highlights
:
[
1
,
50
]
},
{
annotation
:
{
$tag
:
't0'
},
highlights
:
[
1
,
50
]
},
...
@@ -27,39 +31,6 @@ describe('annotator/util/buckets', () => {
...
@@ -27,39 +31,6 @@ describe('annotator/util/buckets', () => {
{
annotation
:
{
$tag
:
't5'
},
highlights
:
[
501
,
50
]
},
{
annotation
:
{
$tag
:
't5'
},
highlights
:
[
501
,
50
]
},
];
];
fakeAnchorPositions
=
[
{
tag
:
't0'
,
top
:
1
,
bottom
:
51
,
},
{
tag
:
't1'
,
top
:
101
,
bottom
:
151
,
},
{
tag
:
't2'
,
top
:
201
,
bottom
:
251
,
},
{
tag
:
't3'
,
top
:
301
,
bottom
:
351
,
},
{
tag
:
't4'
,
top
:
401
,
bottom
:
451
,
},
{
tag
:
't5'
,
top
:
501
,
bottom
:
551
,
},
];
stubbedInnerHeight
=
sinon
.
stub
(
window
,
'innerHeight'
).
value
(
410
);
stubbedInnerHeight
=
sinon
.
stub
(
window
,
'innerHeight'
).
value
(
410
);
fakeGetBoundingClientRect
=
sinon
.
stub
().
callsFake
(
highlights
=>
{
fakeGetBoundingClientRect
=
sinon
.
stub
().
callsFake
(
highlights
=>
{
...
@@ -138,7 +109,7 @@ describe('annotator/util/buckets', () => {
...
@@ -138,7 +109,7 @@ describe('annotator/util/buckets', () => {
});
});
});
});
describe
(
'computeAnchorPosition'
,
()
=>
{
describe
(
'computeAnchorPosition
s
'
,
()
=>
{
it
(
'ignores anchors with no highlights'
,
()
=>
{
it
(
'ignores anchors with no highlights'
,
()
=>
{
const
anchorPositions
=
computeAnchorPositions
([
const
anchorPositions
=
computeAnchorPositions
([
{
highlights
:
undefined
},
{
highlights
:
undefined
},
...
@@ -156,9 +127,20 @@ describe('annotator/util/buckets', () => {
...
@@ -156,9 +127,20 @@ describe('annotator/util/buckets', () => {
});
});
it
(
'computes anchor positions'
,
()
=>
{
it
(
'computes anchor positions'
,
()
=>
{
const
anchorPositions
=
computeAnchorPositions
(
fakeAnchors
);
const
anchorPositions
=
computeAnchorPositions
(
fakeAnchors
.
slice
(
0
,
2
));
assert
.
deepEqual
(
anchorPositions
,
fakeAnchorPositions
);
assert
.
deepEqual
(
anchorPositions
,
[
{
tag
:
't0'
,
top
:
1
,
bottom
:
51
,
},
{
tag
:
't1'
,
top
:
101
,
bottom
:
151
,
},
]);
});
});
it
(
'computes anchor positions sorted vertically'
,
()
=>
{
it
(
'computes anchor positions sorted vertically'
,
()
=>
{
...
@@ -175,6 +157,43 @@ describe('annotator/util/buckets', () => {
...
@@ -175,6 +157,43 @@ describe('annotator/util/buckets', () => {
});
});
describe
(
'computeBuckets'
,
()
=>
{
describe
(
'computeBuckets'
,
()
=>
{
let
fakeAnchorPositions
;
beforeEach
(()
=>
{
fakeAnchorPositions
=
[
{
tag
:
't0'
,
top
:
1
,
bottom
:
51
,
},
{
tag
:
't1'
,
top
:
101
,
bottom
:
151
,
},
{
tag
:
't2'
,
top
:
201
,
bottom
:
251
,
},
{
tag
:
't3'
,
top
:
301
,
bottom
:
351
,
},
{
tag
:
't4'
,
top
:
401
,
bottom
:
451
,
},
{
tag
:
't5'
,
top
:
501
,
bottom
:
551
,
},
];
});
it
(
'puts anchors that are above the screen into the `above` bucket'
,
()
=>
{
it
(
'puts anchors that are above the screen into the `above` bucket'
,
()
=>
{
const
bucketSet
=
computeBuckets
(
fakeAnchorPositions
);
const
bucketSet
=
computeBuckets
(
fakeAnchorPositions
);
assert
.
deepEqual
([...
bucketSet
.
above
.
tags
],
[
't0'
,
't1'
]);
assert
.
deepEqual
([...
bucketSet
.
above
.
tags
],
[
't0'
,
't1'
]);
...
@@ -193,7 +212,6 @@ describe('annotator/util/buckets', () => {
...
@@ -193,7 +212,6 @@ describe('annotator/util/buckets', () => {
it
(
'puts anchors into separate buckets if more than 60px separates their boxes'
,
()
=>
{
it
(
'puts anchors into separate buckets if more than 60px separates their boxes'
,
()
=>
{
fakeAnchorPositions
[
2
].
bottom
=
216
;
fakeAnchorPositions
[
2
].
bottom
=
216
;
fakeAnchorPositions
[
3
].
top
=
301
;
// more than 60px from 216
fakeAnchorPositions
[
3
].
top
=
301
;
// more than 60px from 216
fakeAnchorPositions
[
3
].
top
=
316
;
const
bucketSet
=
computeBuckets
(
fakeAnchorPositions
);
const
bucketSet
=
computeBuckets
(
fakeAnchorPositions
);
assert
.
deepEqual
([...
bucketSet
.
buckets
[
0
].
tags
],
[
't2'
]);
assert
.
deepEqual
([...
bucketSet
.
buckets
[
0
].
tags
],
[
't2'
]);
...
...
src/types/annotator.js
View file @
7650093f
...
@@ -59,8 +59,8 @@
...
@@ -59,8 +59,8 @@
*
*
* @typedef AnchorPosition
* @typedef AnchorPosition
* @prop {string} tag - annotation tag
* @prop {string} tag - annotation tag
* @prop {number} top
* @prop {number} top
- in pixel
* @prop {number} bottom
* @prop {number} bottom
- in pixel
*/
*/
/**
/**
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment