Skip to content

Commit c8844c9

Browse files
BeksOmegaBeksOmega
committed
feat: remove debounce and move to batch system for rendering
1 parent 7a88b71 commit c8844c9

File tree

2 files changed

+330
-34
lines changed

2 files changed

+330
-34
lines changed

‎demo.html

Lines changed: 138 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
flex-direction: column;
1010
align-items: center;
1111
justify-content: center;
12-
height: 100vh;
1312
margin: 0;
1413
}
1514
.annotated-text {
@@ -18,15 +17,133 @@
1817
border: 1px solid #ccc;
1918
cursor: pointer;
2019
margin: 8px;
20+
transition: font-size 0.1s;
2121
}
2222
.instructions {
2323
margin-top: 20px;
2424
font-size: 1em;
2525
color: #555;
2626
}
27+
.controls {
28+
margin: 20px;
29+
}
30+
button {
31+
padding: 10px 20px;
32+
margin: 5px;
33+
font-size: 1em;
34+
cursor: pointer;
35+
}
36+
.resize-text {
37+
font-size: 1.5em;
38+
}
39+
#log {
40+
position: fixed;
41+
top: 10px;
42+
right: 10px;
43+
width: 300px;
44+
height: 200px;
45+
background: #f0f0f0;
46+
border: 1px solid #ccc;
47+
padding: 10px;
48+
font-family: monospace;
49+
font-size: 12px;
50+
overflow-y: auto;
51+
}
2752
</style>
2853
</head>
2954
<body>
55+
<div class="controls">
56+
<button onclick="toggleAnnotations()">Toggle All Annotations</button>
57+
<button onclick="resizeElements()">Resize Elements</button>
58+
</div>
59+
60+
<div class="instructions">
61+
This demo shows both batched resize handling and SVG translation
62+
optimization.<br />
63+
- <strong>Resize Elements</strong>: Size changes → Full re-render (paths
64+
recreated)<br />
65+
</div>
66+
67+
<div class="annotated-text">Click me to toggle the annotation.</div>
68+
<div class="annotated-text">Click me to toggle the annotation.</div>
69+
<div class="annotated-text">Click me to toggle the annotation.</div>
70+
<div class="annotated-text">Click me to toggle the annotation.</div>
71+
<div class="annotated-text">Click me to toggle the annotation.</div>
72+
<div class="annotated-text">Click me to toggle the annotation.</div>
73+
<div class="annotated-text">Click me to toggle the annotation.</div>
74+
<div class="annotated-text">Click me to toggle the annotation.</div>
75+
<div class="annotated-text">Click me to toggle the annotation.</div>
76+
<div class="annotated-text">Click me to toggle the annotation.</div>
77+
<div class="annotated-text">Click me to toggle the annotation.</div>
78+
<div class="annotated-text">Click me to toggle the annotation.</div>
79+
<div class="annotated-text">Click me to toggle the annotation.</div>
80+
<div class="annotated-text">Click me to toggle the annotation.</div>
81+
<div class="annotated-text">Click me to toggle the annotation.</div>
82+
<div class="annotated-text">Click me to toggle the annotation.</div>
83+
<div class="annotated-text">Click me to toggle the annotation.</div>
84+
<div class="annotated-text">Click me to toggle the annotation.</div>
85+
<div class="annotated-text">Click me to toggle the annotation.</div>
86+
<div class="annotated-text">Click me to toggle the annotation.</div>
87+
<div class="annotated-text">Click me to toggle the annotation.</div>
88+
<div class="annotated-text">Click me to toggle the annotation.</div>
89+
<div class="annotated-text">Click me to toggle the annotation.</div>
90+
<div class="annotated-text">Click me to toggle the annotation.</div>
91+
<div class="annotated-text">Click me to toggle the annotation.</div>
92+
<div class="annotated-text">Click me to toggle the annotation.</div>
93+
<div class="annotated-text">Click me to toggle the annotation.</div>
94+
<div class="annotated-text">Click me to toggle the annotation.</div>
95+
<div class="annotated-text">Click me to toggle the annotation.</div>
96+
<div class="annotated-text">Click me to toggle the annotation.</div>
97+
<div class="annotated-text">Click me to toggle the annotation.</div>
98+
<div class="annotated-text">Click me to toggle the annotation.</div>
99+
<div class="annotated-text">Click me to toggle the annotation.</div>
100+
<div class="annotated-text">Click me to toggle the annotation.</div>
101+
<div class="annotated-text">Click me to toggle the annotation.</div>
102+
<div class="annotated-text">Click me to toggle the annotation.</div>
103+
<div class="annotated-text">Click me to toggle the annotation.</div>
104+
<div class="annotated-text">Click me to toggle the annotation.</div>
105+
<div class="annotated-text">Click me to toggle the annotation.</div>
106+
<div class="annotated-text">Click me to toggle the annotation.</div>
107+
<div class="annotated-text">Click me to toggle the annotation.</div>
108+
<div class="annotated-text">Click me to toggle the annotation.</div>
109+
<div class="annotated-text">Click me to toggle the annotation.</div>
110+
<div class="annotated-text">Click me to toggle the annotation.</div>
111+
<div class="annotated-text">Click me to toggle the annotation.</div>
112+
<div class="annotated-text">Click me to toggle the annotation.</div>
113+
<div class="annotated-text">Click me to toggle the annotation.</div>
114+
<div class="annotated-text">Click me to toggle the annotation.</div>
115+
<div class="annotated-text">Click me to toggle the annotation.</div>
116+
<div class="annotated-text">Click me to toggle the annotation.</div>
117+
<div class="annotated-text">Click me to toggle the annotation.</div>
118+
<div class="annotated-text">Click me to toggle the annotation.</div>
119+
<div class="annotated-text">Click me to toggle the annotation.</div>
120+
<div class="annotated-text">Click me to toggle the annotation.</div>
121+
<div class="annotated-text">Click me to toggle the annotation.</div>
122+
<div class="annotated-text">Click me to toggle the annotation.</div>
123+
<div class="annotated-text">Click me to toggle the annotation.</div>
124+
<div class="annotated-text">Click me to toggle the annotation.</div>
125+
<div class="annotated-text">Click me to toggle the annotation.</div>
126+
<div class="annotated-text">Click me to toggle the annotation.</div>
127+
<div class="annotated-text">Click me to toggle the annotation.</div>
128+
<div class="annotated-text">Click me to toggle the annotation.</div>
129+
<div class="annotated-text">Click me to toggle the annotation.</div>
130+
<div class="annotated-text">Click me to toggle the annotation.</div>
131+
<div class="annotated-text">Click me to toggle the annotation.</div>
132+
<div class="annotated-text">Click me to toggle the annotation.</div>
133+
<div class="annotated-text">Click me to toggle the annotation.</div>
134+
<div class="annotated-text">Click me to toggle the annotation.</div>
135+
<div class="annotated-text">Click me to toggle the annotation.</div>
136+
<div class="annotated-text">Click me to toggle the annotation.</div>
137+
<div class="annotated-text">Click me to toggle the annotation.</div>
138+
<div class="annotated-text">Click me to toggle the annotation.</div>
139+
<div class="annotated-text">Click me to toggle the annotation.</div>
140+
<div class="annotated-text">Click me to toggle the annotation.</div>
141+
<div class="annotated-text">Click me to toggle the annotation.</div>
142+
<div class="annotated-text">Click me to toggle the annotation.</div>
143+
<div class="annotated-text">Click me to toggle the annotation.</div>
144+
<div class="annotated-text">Click me to toggle the annotation.</div>
145+
<div class="annotated-text">Click me to toggle the annotation.</div>
146+
<div class="annotated-text">Click me to toggle the annotation.</div>
30147
<div class="annotated-text">Click me to toggle the annotation.</div>
31148
<div class="annotated-text">Click me to toggle the annotation.</div>
32149
<div class="annotated-text">Click me to toggle the annotation.</div>
@@ -48,10 +165,6 @@
48165
<div class="annotated-text">Click me to toggle the annotation.</div>
49166
<div class="annotated-text">Click me to toggle the annotation.</div>
50167
<div class="annotated-text">Click me to toggle the annotation.</div>
51-
52-
<div class="instructions">
53-
This demo shows the animated `hide()` method.
54-
</div>
55168

56169
<script src="lib/rough-notation.iife.js"></script>
57170
<script>
@@ -79,8 +192,26 @@
79192
});
80193
}
81194

82-
// Initially show the annotation
83-
annotation.show();
195+
function toggleAnnotations() {
196+
annotations.forEach((annotation) => {
197+
if (annotation.isShowing()) {
198+
annotation.hide();
199+
} else {
200+
annotation.show();
201+
}
202+
});
203+
}
204+
205+
function resizeElements() {
206+
Array.from(els).forEach((el, i) => {
207+
const currentSize = parseFloat(window.getComputedStyle(el).fontSize);
208+
const newSize = currentSize === 32 ? 24 : 32;
209+
el.style.fontSize = newSize + "px";
210+
});
211+
}
212+
213+
// Initially show annotations
214+
annotations.forEach((annotation) => annotation.show());
84215
</script>
85216
</body>
86217
</html>

0 commit comments

Comments
 (0)