Skip to content

Commit

Permalink
update examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@NailxSharipov
NailxSharipov committed Aug 30, 2024
1 parent a81344e commit ae0a656
Show file tree
Hide file tree
Showing 9 changed files with 293 additions and 69 deletions.
17 changes: 12 additions & 5 deletions docs-gen/src/js/overlay/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const overlayRuleSelect = document.getElementById('overlayRule');
const fillRuleSelect = document.getElementById('fillRule');
const snapTextField = document.getElementById('snap');
const fillTextField = document.getElementById('fill');
const arrowsTextField = document.getElementById('arrows');
const prevButton = document.getElementById('test-prev');
const nextButton = document.getElementById('test-next');
const testTitle = document.getElementById('test-name');
Expand Down Expand Up @@ -90,6 +91,10 @@ fillTextField.addEventListener('change', function (event) {
requestAnimationFrame(draw);
});

arrowsTextField.addEventListener('change', function (event) {
requestAnimationFrame(draw);
});

canvas.addEventListener('touchstart', function (event) {
event.preventDefault();
const touch = event.touches[0];
Expand Down Expand Up @@ -168,8 +173,8 @@ function move(eX, eY) {
const isSnap = snapTextField.checked;

if (isSnap) {
x = Math.round(x * 0.1) * 10;
y = Math.round(y * 0.1) * 10;
x = Math.round(x * 0.2) * 5;
y = Math.round(y * 0.2) * 5;
}

const rect = workingArea();
Expand Down Expand Up @@ -247,12 +252,14 @@ function draw() {

drawWorkingAreaSplitLine(ctx);

const isArrows = arrowsTextField.checked;

test.subjs.forEach((shape) => {
drawShape(ctx, shape, subjFill, subjStrokeOpacity, 4.0, 0.0, fill_rule, true);
drawShape(ctx, shape, subjFill, subjStrokeOpacity, 4.0, 0.0, fill_rule, isArrows);
});

test.clips.forEach((shape) => {
drawShape(ctx, shape, clipFill, clipStrokeOpacity, 4.0, 0.0, fill_rule, true);
drawShape(ctx, shape, clipFill, clipStrokeOpacity, 4.0, 0.0, fill_rule, isArrows);
});

const isFill = fillTextField.checked;
Expand Down Expand Up @@ -404,7 +411,7 @@ function drawPoints(ctx, shapes, color) {
for (let i = 0; i < points.length; i++) {
const [x, y] = points[i];
ctx.beginPath();
ctx.arc(x, y, 3, 0, twoPI);
ctx.arc(x, y, 2, 0, twoPI);
ctx.fill();
}
});
Expand Down
150 changes: 123 additions & 27 deletions docs-gen/src/js/overlay/editor_data.js
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,35 @@
export const tests = [
{
name: "Sand Clock",
name: "Split",
subjs: [[
[[200, 400], [200, 100], [550, 100], [550, 400]]
[[200, 425], [200, 125], [550, 125], [550, 425]],
[[250, 375], [250, 175], [500, 175], [500, 375]]
]],
clips: [[
[[250, 350], [500, 150], [250, 150], [500, 350]]
]]
clips: [[[[350, 475], [350, 75], [400, 75], [400, 475]]]]
},
{
name: "Split",
name: "Sand Clock",
subjs: [[
[[200, 400], [200, 100], [550, 100], [550, 400]],
[[250, 350], [250, 150], [500, 150], [500, 350]]
[[200, 425], [200, 125], [550, 125], [550, 425]]
]],
clips: [[[[350, 450], [350, 50], [400, 50], [400, 450]]]]
clips: [[
[[250, 375], [500, 175], [250, 175], [500, 375]]
]]
},
{
name: "Simple",
subjs: [[[[200, 300], [200, 100], [400, 100], [400, 300]]]],
clips: [[[[300, 400], [300, 200], [500, 200], [500, 400]]]]
subjs: [[[[225, 325], [225, 125], [425, 125], [425, 325]]]],
clips: [[[[325, 425], [325, 225], [525, 225], [525, 425]]]]
},
{
name: "Overlap",
subjs: [[[[200, 350], [200, 150], [400, 150], [400, 350]]]],
clips: [[[[300, 350], [300, 150], [500, 150], [500, 350]]]]
subjs: [[[[225, 375], [225, 175], [425, 175], [425, 375]]]],
clips: [[[[325, 375], [325, 175], [525, 175], [525, 375]]]]
},
{
name: "Hole",
subjs: [[[[300, 150], [300, 350], [500, 350], [500, 150]]]],
clips: [[[[350, 200], [350, 300], [450, 300], [450, 200]]]]
subjs: [[[[300, 175], [300, 375], [500, 375], [500, 175]]]],
clips: [[[[350, 225], [350, 325], [450, 325], [450, 225]]]]
},
{
name: "Disjoint Polygons",
Expand Down Expand Up @@ -71,25 +71,14 @@ export const tests = [
clips: [[[[250, 100], [250, 400], [550, 400], [550, 100]]]]
},
{
name: "Many Holes in Sybject",
name: "Many Holes in Subject",
subjs: [[
[[250, 100], [250, 400], [550, 400], [550, 100]],
[[300, 150], [300, 250], [400, 250], [400, 150]],
[[400, 250], [400, 350], [500, 350], [500, 250]]
]],
clips: [[[[350, 200], [350, 300], [450, 300], [450, 200]]]]
},
{
name: "Intersecting Holes in Subject and Clip",
subjs: [[
[[200, 50], [200, 450], [600, 450], [600, 50]],
[[300, 150], [300, 350], [500, 350], [500, 150]]
]],
clips: [[
[[250, 100], [250, 400], [550, 400], [550, 100]],
[[350, 200], [350, 300], [450, 300], [450, 200]]
]]
},
{
name: "Create a Hole",
subjs: [[[[300, 150], [300, 350], [450, 350], [450, 300], [350, 300], [350, 200], [450, 200], [450, 150]]]],
Expand All @@ -99,5 +88,112 @@ export const tests = [
name: "Self Intersections",
subjs: [[[[100, 300], [200, 100], [300, 300], [100, 300], [150, 300], [200, 200], [250, 300], [200, 400]]]],
clips: [[[[500, 300], [500, 200], [550, 200], [550, 250], [400, 250], [400, 350], [600, 350], [600, 150], [450, 150], [450, 300]]]]
},
{
name: "Checkerboard",
subjs: [
[[[175, 475], [175, 375], [275, 375], [275, 475]]],
[[[175, 325], [175, 225], [275, 225], [275, 325]]],
[[[175, 175], [175, 75], [275, 75], [275, 175]]],
[[[325, 475], [325, 375], [425, 375], [425, 475]]],
[[[325, 325], [325, 225], [425, 225], [425, 325]]],
[[[325, 175], [325, 75], [425, 75], [425, 175]]],
[[[475, 475], [475, 375], [575, 375], [575, 475]]],
[[[475, 325], [475, 225], [575, 225], [575, 325]]],
[[[475, 175], [475, 75], [575, 75], [575, 175]]],
],
clips: [
[[[250, 400], [250, 300], [350, 300], [350, 400]]],
[[[250, 250], [250, 150], [350, 150], [350, 250]]],
[[[400, 400], [400, 300], [500, 300], [500, 400]]],
[[[400, 250], [400, 150], [500, 150], [500, 250]]],
]
},
{
name: "Not Overlap",
subjs: [
[[[200, 450], [200, 400], [250, 400], [250, 450]]],
[[[200, 300], [200, 250], [250, 250], [250, 300]]],
[[[200, 150], [200, 100], [250, 100], [250, 150]]],

[[[350, 450], [350, 400], [400, 400], [400, 450]]],
[[[350, 300], [350, 250], [400, 250], [400, 300]]],
[[[350, 150], [350, 100], [400, 100], [400, 150]]],

[[[500, 450], [500, 400], [550, 400], [550, 450]]],
[[[500, 300], [500, 250], [550, 250], [550, 300]]],
[[[500, 150], [500, 100], [550, 100], [550, 150]]],
],
clips: [
[[[275, 375], [275, 325], [325, 325], [325, 375]]],
[[[275, 225], [275, 175], [325, 175], [325, 225]]],

[[[425, 375], [425, 325], [475, 325], [475, 375]]],
[[[425, 225], [425, 175], [475, 175], [475, 225]]],
]
},
{
name: "Lines Net",
subjs: [
[[[200, 150], [200, 100], [550, 100], [550, 150]]],
[[[200, 250], [200, 200], [550, 200], [550, 250]]],
[[[200, 350], [200, 300], [550, 300], [550, 350]]],
[[[200, 450], [200, 400], [550, 400], [550, 450]]],
],
clips: [
[[[200, 450], [200, 100], [250, 100], [250, 450]]],
[[[300, 450], [300, 100], [350, 100], [350, 450]]],
[[[400, 450], [400, 100], [450, 100], [450, 450]]],
[[[500, 450], [500, 100], [550, 100], [550, 450]]],
]
},
{
name: "Spiral",
subjs: [[[
[355.8, 255.5], [415.8, 255.5], [411.9, 263.7], [377.8, 223.4], [378.9, 224.3], [331.5, 193.0], [338.2, 191.9], [306.5, 233.9], [306.6, 233.7], [275.0, 280.3], [274.4, 273.9], [311.9, 310.9], [312.2, 311.1], [349.0, 353.3], [343.0, 352.1], [390.2, 328.5], [390.9, 328.2], [444.0, 311.4], [440.5, 316.1], [440.5, 263.3], [440.6, 262.3], [452.3, 208.0], [454.5, 213.3], [409.7, 185.3], [408.7, 184.5], [370.8, 144.1], [376.2, 145.3], [327.1, 164.8], [325.7, 165.2], [270.6, 169.9], [274.9, 166.5], [258.4, 216.7], [257.7, 218.2], [224.8, 262.5], [225.2, 257.1], [251.0, 303.3], [251.6, 304.9], [260.6, 359.4], [257.1, 355.4], [308.0, 369.8], [309.6, 370.6], [353.7, 403.6], [348.5, 403.2], [395.7, 379.1], [397.5, 378.6], [452.4, 373.8], [448.2, 376.9], [468.0, 327.7], [469.1, 326.1], [507.8, 287.0], [506.6, 292.1], [490.6, 241.5], [490.4, 239.4], [496.3, 184.8], [498.5, 189.5], [454.7, 159.4], [453.3, 157.9], [424.8, 110.9], [429.3, 113.3], [376.3, 115.4], [374.1, 115.1], [323.5, 93.9], [328.5, 93.2], [286.6, 125.8], [284.6, 126.7], [231.0, 138.4], [234.7, 135.1], [218.7, 185.7], [217.5, 187.6], [179.7, 227.3], [180.9, 222.4], [195.5, 273.5], [195.6, 275.8], [185.5, 329.7], [183.9, 325.0], [223.8, 360.1], [225.2, 362.0], [245.4, 412.9], [241.6, 409.8], [294.0, 418.5], [296.2, 419.5], [339.9, 452.3], [335.1, 451.7], [384.5, 432.1], [386.9, 431.8], [441.3, 437.6], [436.8, 439.5], [469.5, 397.6], [471.5, 396.1], [521.5, 374.0], [518.5, 377.8], [526.2, 325.2], [527.1, 322.9], [559.8, 279.1], [559.1, 283.9], [540.2, 234.2], [539.9, 231.7], [547.4, 177.6], [549.1, 182.0], [508.7, 147.4], [515.2, 139.8], [555.6, 174.4], [557.3, 178.9], [549.8, 233.1], [549.5, 230.6], [568.5, 280.3], [567.8, 285.1], [535.1, 328.9], [536.1, 326.6], [528.4, 379.3], [525.5, 383.1], [475.5, 405.3], [477.4, 403.8], [444.7, 445.7], [440.2, 447.6], [385.8, 441.7], [388.2, 441.4], [338.8, 461.0], [333.9, 460.3], [290.2, 427.5], [292.3, 428.4], [239.9, 419.7], [236.1, 416.6], [215.9, 365.7], [217.2, 367.6], [177.3, 332.5], [175.7, 327.8], [185.8, 274.0], [185.9, 276.3], [171.3, 225.2], [172.4, 220.4], [210.3, 180.7], [209.1, 182.7], [225.2, 132.0], [228.9, 128.7], [282.5, 117.0], [280.5, 117.9], [322.4, 85.3], [327.4, 84.7], [378.0, 105.8], [375.9, 105.4], [428.9, 103.3], [433.4, 105.7], [461.8, 152.7], [460.4, 151.2], [504.1, 181.2], [506.3, 185.9], [500.4, 240.5], [500.2, 238.5], [516.1, 289.1], [514.9, 294.1], [476.2, 333.1], [477.3, 331.4], [457.4, 380.6], [453.2, 383.7], [398.4, 388.6], [400.2, 388.0], [353.0, 412.1], [347.8, 411.6], [303.6, 378.7], [305.3, 379.5], [254.3, 365.0], [250.8, 361.0], [241.7, 306.6], [242.3, 308.2], [216.4, 262.0], [216.8, 256.6], [249.7, 212.2], [248.9, 213.6], [265.4, 163.4], [269.7, 159.9], [324.8, 155.2], [323.4, 155.5], [372.6, 136.0], [378.0, 137.2], [416.0, 177.6], [415.0, 176.8], [459.8, 204.8], [462.1, 210.1], [450.3, 264.4], [450.5, 263.3], [450.5, 316.1], [447.0, 320.9], [393.9, 337.8], [394.6, 337.5], [347.5, 361.0], [341.5, 359.8], [304.6, 317.7], [304.9, 318.0], [267.3, 281.0], [266.7, 274.6], [298.3, 228.1], [298.5, 227.9], [330.2, 185.8], [337.0, 184.7], [384.4, 216.0], [385.5, 216.9], [419.6, 257.3], [415.8, 265.5], [355.8, 265.5]
]]],
clips: []
},
{
name: "Windows",
subjs: [
[[[175, 475], [175, 375], [275, 375], [275, 475]]],
[[[175, 325], [175, 225], [275, 225], [275, 325]]],
[[[175, 175], [175, 75], [275, 75], [275, 175]]],
[[[325, 475], [325, 375], [425, 375], [425, 475]]],
[[[325, 325], [325, 225], [425, 225], [425, 325]]],
[[[325, 175], [325, 75], [425, 75], [425, 175]]],
[[[475, 475], [475, 375], [575, 375], [575, 475]]],
[[[475, 325], [475, 225], [575, 225], [575, 325]]],
[[[475, 175], [475, 75], [575, 75], [575, 175]]],
],
clips: [
[[[200, 450], [200, 400], [250, 400], [250, 450]]],
[[[200, 300], [200, 250], [250, 250], [250, 300]]],
[[[200, 150], [200, 100], [250, 100], [250, 150]]],

[[[350, 450], [350, 400], [400, 400], [400, 450]]],
[[[350, 300], [350, 250], [400, 250], [400, 300]]],
[[[350, 150], [350, 100], [400, 100], [400, 150]]],

[[[500, 450], [500, 400], [550, 400], [550, 450]]],
[[[500, 300], [500, 250], [550, 250], [550, 300]]],
[[[500, 150], [500, 100], [550, 100], [550, 150]]],
]
},
{
name: "Nested Squares",
subjs: [[
[[175, 75], [175, 475], [575, 475], [575, 75]],
[[225, 125], [225, 425], [525, 425], [525, 125]],
[[275, 175], [275, 375], [475, 375], [475, 175]],
[[325, 225], [325, 325], [425, 325], [425, 225]],
]],
clips: [[
[[200, 100], [200, 450], [550, 450], [550, 100]],
[[250, 150], [250, 400], [500, 400], [500, 150]],
[[300, 200], [300, 350], [450, 350], [450, 200]],
[[350, 250], [350, 300], [400, 300], [400, 250]],
]]
}
]
8 changes: 7 additions & 1 deletion docs-gen/src/overlay/shapes_editor.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,11 +152,17 @@ async function fileExists(path) {
<input type="checkbox" id="fill" name="fill" value="true" checked>
</div>
</div>
<div class="editor-input-group">
<div class="input-wrapper">
<label for="arrows">Show Arrows: </label>
<input type="checkbox" id="arrows" name="arrows" value="true" checked>
</div>
</div>
</div>
<div class="editor-input-container">
<button type="button" class="nav-button" id="test-prev">Prev</button>
<h3 class="test-title" id="test-name">Title</h3>
<button type="button" class="nav-button" id="test-next">Next</button>
</div>
<canvas id="editorCanvas" width="750" height="900"></canvas>
<canvas id="editorCanvas" width="750" height="1000"></canvas>
</div>
17 changes: 12 additions & 5 deletions docs/js/overlay/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const overlayRuleSelect = document.getElementById('overlayRule');
const fillRuleSelect = document.getElementById('fillRule');
const snapTextField = document.getElementById('snap');
const fillTextField = document.getElementById('fill');
const arrowsTextField = document.getElementById('arrows');
const prevButton = document.getElementById('test-prev');
const nextButton = document.getElementById('test-next');
const testTitle = document.getElementById('test-name');
Expand Down Expand Up @@ -90,6 +91,10 @@ fillTextField.addEventListener('change', function (event) {
requestAnimationFrame(draw);
});

arrowsTextField.addEventListener('change', function (event) {
requestAnimationFrame(draw);
});

canvas.addEventListener('touchstart', function (event) {
event.preventDefault();
const touch = event.touches[0];
Expand Down Expand Up @@ -168,8 +173,8 @@ function move(eX, eY) {
const isSnap = snapTextField.checked;

if (isSnap) {
x = Math.round(x * 0.1) * 10;
y = Math.round(y * 0.1) * 10;
x = Math.round(x * 0.2) * 5;
y = Math.round(y * 0.2) * 5;
}

const rect = workingArea();
Expand Down Expand Up @@ -247,12 +252,14 @@ function draw() {

drawWorkingAreaSplitLine(ctx);

const isArrows = arrowsTextField.checked;

test.subjs.forEach((shape) => {
drawShape(ctx, shape, subjFill, subjStrokeOpacity, 4.0, 0.0, fill_rule, true);
drawShape(ctx, shape, subjFill, subjStrokeOpacity, 4.0, 0.0, fill_rule, isArrows);
});

test.clips.forEach((shape) => {
drawShape(ctx, shape, clipFill, clipStrokeOpacity, 4.0, 0.0, fill_rule, true);
drawShape(ctx, shape, clipFill, clipStrokeOpacity, 4.0, 0.0, fill_rule, isArrows);
});

const isFill = fillTextField.checked;
Expand Down Expand Up @@ -404,7 +411,7 @@ function drawPoints(ctx, shapes, color) {
for (let i = 0; i < points.length; i++) {
const [x, y] = points[i];
ctx.beginPath();
ctx.arc(x, y, 3, 0, twoPI);
ctx.arc(x, y, 2, 0, twoPI);
ctx.fill();
}
});
Expand Down
Loading

0 comments on commit ae0a656

Please sign in to comment.