glimmer-dsl-swt 4.24.0.0 → 4.24.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +18 -0
- data/README.md +51 -12
- data/RUBY_VERSION +1 -1
- data/VERSION +1 -1
- data/docs/reference/GLIMMER_GUI_DSL_SYNTAX.md +704 -43
- data/docs/reference/GLIMMER_SAMPLES.md +2 -22
- data/glimmer-dsl-swt.gemspec +0 -0
- data/lib/glimmer/rake_task/scaffold.rb +10 -18
- data/lib/glimmer/swt/custom/shape/path_segment.rb +1 -0
- data/lib/glimmer/swt/custom/shape.rb +5 -2
- data/samples/elaborate/game_of_life.rb +2 -2
- data/samples/elaborate/meta_sample/tutorials.yml +4 -0
- data/samples/hello/hello_canvas_data_binding.rb +695 -38
- data/samples/hello/hello_canvas_drag_and_drop.rb +31 -2
- data/samples/hello/hello_canvas_path.rb +93 -89
- metadata +16 -2
@@ -1077,7 +1077,7 @@ You may check out a more full-fledged example in [Hello, Sash Form!](/docs/refer
|
|
1077
1077
|
|
1078
1078
|

|
1079
1079
|
|
1080
|
-
Glimmer
|
1080
|
+
Glimmer DSL for SWT includes a basic [SWT Browser widget](https://help.eclipse.org/2020-12/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/browser/Browser.html), which can load URLs or render HTML. It supports WebKit, IE, and Edge browsers out of the box. Its JavaScript engine can even be instrumented with Ruby code if needed.
|
1081
1081
|
|
1082
1082
|
Example loading a URL (you may copy/paste in [`girb`](GLIMMER_GIRB.md)):
|
1083
1083
|
|
@@ -1114,7 +1114,11 @@ shell {
|
|
1114
1114
|
|
1115
1115
|
This relies on Glimmer's [Multi-DSL Support](#multi-dsl-support) for building the HTML text using [Glimmer XML DSL](https://github.com/AndyObtiva/glimmer-dsl-xml).
|
1116
1116
|
|
1117
|
-
Learn more at
|
1117
|
+
Learn more at:
|
1118
|
+
- [SWT Browser API](https://help.eclipse.org/2020-12/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/browser/Browser.html)
|
1119
|
+
- [SWT Browser FAQ](https://www.eclipse.org/swt/faq.php#whatisbrowser).
|
1120
|
+
|
1121
|
+
The built-in basic SWT `browser` widget might not satisfy all your needs. If so, consider the advanced 3rd-party browser widget [JxBrowser](https://www.teamdev.com/jxbrowser), which utilizes Google Chromium.
|
1118
1122
|
|
1119
1123
|
### Widget Styles
|
1120
1124
|
|
@@ -2295,35 +2299,86 @@ Example of canvas shape parameter data-binding (you may copy/paste in [`girb`](G
|
|
2295
2299
|
require 'glimmer-dsl-swt'
|
2296
2300
|
|
2297
2301
|
class HelloCanvasDataBinding
|
2298
|
-
|
2299
|
-
|
2300
|
-
|
2301
|
-
|
2302
|
+
class PathShape
|
2303
|
+
attr_accessor :foreground_red, :foreground_green, :foreground_blue, :line_width_value, :line_style_value
|
2304
|
+
|
2305
|
+
def foreground_value
|
2306
|
+
[foreground_red, foreground_green, foreground_blue]
|
2307
|
+
end
|
2308
|
+
|
2309
|
+
def line_style_value_options
|
2310
|
+
[:solid, :dash, :dot, :dashdot, :dashdotdot]
|
2311
|
+
end
|
2312
|
+
end
|
2302
2313
|
|
2303
|
-
|
2314
|
+
class LinePathShape < PathShape
|
2315
|
+
attr_accessor :x1_value, :y1_value, :x2_value, :y2_value
|
2316
|
+
end
|
2304
2317
|
|
2305
|
-
|
2306
|
-
|
2318
|
+
class QuadPathShape < PathShape
|
2319
|
+
attr_accessor :x1_value, :y1_value, :cx_value, :cy_value, :x2_value, :y2_value
|
2320
|
+
|
2321
|
+
def point_array
|
2322
|
+
[x1_value, y1_value, cx_value, cy_value, x2_value, y2_value]
|
2323
|
+
end
|
2307
2324
|
end
|
2308
2325
|
|
2309
|
-
|
2310
|
-
|
2326
|
+
class CubicPathShape < PathShape
|
2327
|
+
attr_accessor :x1_value, :y1_value, :cx1_value, :cy1_value, :cx2_value, :cy2_value, :x2_value, :y2_value
|
2328
|
+
|
2329
|
+
def point_array
|
2330
|
+
[x1_value, y1_value, cx1_value, cy1_value, cx2_value, cy2_value, x2_value, y2_value]
|
2331
|
+
end
|
2311
2332
|
end
|
2312
2333
|
|
2334
|
+
include Glimmer::GUI::Application # alias for Glimmer::UI::CustomShell / Glimmer::UI::CustomWindow
|
2335
|
+
|
2336
|
+
CANVAS_WIDTH = 300
|
2337
|
+
CANVAS_HEIGHT = 300
|
2338
|
+
|
2313
2339
|
before_body do
|
2314
|
-
|
2315
|
-
|
2316
|
-
|
2317
|
-
|
2318
|
-
|
2319
|
-
|
2320
|
-
|
2321
|
-
|
2322
|
-
|
2340
|
+
@line = LinePathShape.new
|
2341
|
+
@line.x1_value = 5
|
2342
|
+
@line.y1_value = 5
|
2343
|
+
@line.x2_value = CANVAS_WIDTH - 5
|
2344
|
+
@line.y2_value = CANVAS_HEIGHT - 5
|
2345
|
+
@line.foreground_red = 28
|
2346
|
+
@line.foreground_green = 128
|
2347
|
+
@line.foreground_blue = 228
|
2348
|
+
@line.line_width_value = 3
|
2349
|
+
@line.line_style_value = :dash
|
2350
|
+
|
2351
|
+
@quad = QuadPathShape.new
|
2352
|
+
@quad.x1_value = 5
|
2353
|
+
@quad.y1_value = CANVAS_HEIGHT - 5
|
2354
|
+
@quad.cx_value = (CANVAS_WIDTH - 10)/2.0
|
2355
|
+
@quad.cy_value = 5
|
2356
|
+
@quad.x2_value = CANVAS_WIDTH - 5
|
2357
|
+
@quad.y2_value = CANVAS_HEIGHT - 5
|
2358
|
+
@quad.foreground_red = 28
|
2359
|
+
@quad.foreground_green = 128
|
2360
|
+
@quad.foreground_blue = 228
|
2361
|
+
@quad.line_width_value = 3
|
2362
|
+
@quad.line_style_value = :dot
|
2363
|
+
|
2364
|
+
@cubic = CubicPathShape.new
|
2365
|
+
@cubic.x1_value = 5
|
2366
|
+
@cubic.y1_value = (CANVAS_WIDTH - 10)/2.0
|
2367
|
+
@cubic.cx1_value = (CANVAS_WIDTH - 10)*0.25
|
2368
|
+
@cubic.cy1_value = (CANVAS_WIDTH - 10)*0.25
|
2369
|
+
@cubic.cx2_value = (CANVAS_WIDTH - 10)*0.75
|
2370
|
+
@cubic.cy2_value = (CANVAS_WIDTH - 10)*0.75
|
2371
|
+
@cubic.x2_value = CANVAS_WIDTH - 5
|
2372
|
+
@cubic.y2_value = (CANVAS_WIDTH - 10)/2.0
|
2373
|
+
@cubic.foreground_red = 28
|
2374
|
+
@cubic.foreground_green = 128
|
2375
|
+
@cubic.foreground_blue = 228
|
2376
|
+
@cubic.line_width_value = 3
|
2377
|
+
@cubic.line_style_value = :dashdot
|
2323
2378
|
end
|
2324
2379
|
|
2325
2380
|
body {
|
2326
|
-
shell {
|
2381
|
+
shell(:no_resize) {
|
2327
2382
|
text 'Hello, Canvas Data-Binding!'
|
2328
2383
|
|
2329
2384
|
tab_folder {
|
@@ -2334,7 +2389,7 @@ class HelloCanvasDataBinding
|
|
2334
2389
|
horizontal_spacing 0
|
2335
2390
|
vertical_spacing 0
|
2336
2391
|
}
|
2337
|
-
text '
|
2392
|
+
text 'Line'
|
2338
2393
|
|
2339
2394
|
label {
|
2340
2395
|
layout_data(:fill, :center, false, false) {
|
@@ -2348,13 +2403,14 @@ class HelloCanvasDataBinding
|
|
2348
2403
|
}
|
2349
2404
|
text 'y1'
|
2350
2405
|
}
|
2406
|
+
|
2351
2407
|
spinner {
|
2352
2408
|
layout_data(:fill, :center, false, false) {
|
2353
2409
|
horizontal_span 3
|
2354
2410
|
}
|
2355
2411
|
maximum CANVAS_WIDTH
|
2356
2412
|
increment 3
|
2357
|
-
selection <=> [
|
2413
|
+
selection <=> [@line, :x1_value]
|
2358
2414
|
}
|
2359
2415
|
spinner {
|
2360
2416
|
layout_data(:fill, :center, false, false) {
|
@@ -2362,8 +2418,9 @@ class HelloCanvasDataBinding
|
|
2362
2418
|
}
|
2363
2419
|
maximum CANVAS_HEIGHT
|
2364
2420
|
increment 3
|
2365
|
-
selection <=> [
|
2421
|
+
selection <=> [@line, :y1_value]
|
2366
2422
|
}
|
2423
|
+
|
2367
2424
|
label {
|
2368
2425
|
layout_data(:fill, :center, false, false) {
|
2369
2426
|
horizontal_span 3
|
@@ -2376,13 +2433,14 @@ class HelloCanvasDataBinding
|
|
2376
2433
|
}
|
2377
2434
|
text 'y2'
|
2378
2435
|
}
|
2436
|
+
|
2379
2437
|
spinner {
|
2380
2438
|
layout_data(:fill, :center, false, false) {
|
2381
2439
|
horizontal_span 3
|
2382
2440
|
}
|
2383
2441
|
maximum CANVAS_WIDTH
|
2384
2442
|
increment 3
|
2385
|
-
selection <=> [
|
2443
|
+
selection <=> [@line, :x2_value]
|
2386
2444
|
}
|
2387
2445
|
spinner {
|
2388
2446
|
layout_data(:fill, :center, false, false) {
|
@@ -2390,8 +2448,9 @@ class HelloCanvasDataBinding
|
|
2390
2448
|
}
|
2391
2449
|
maximum CANVAS_HEIGHT
|
2392
2450
|
increment 3
|
2393
|
-
selection <=> [
|
2451
|
+
selection <=> [@line, :y2_value]
|
2394
2452
|
}
|
2453
|
+
|
2395
2454
|
label {
|
2396
2455
|
layout_data(:fill, :center, false, false) {
|
2397
2456
|
horizontal_span 2
|
@@ -2410,13 +2469,14 @@ class HelloCanvasDataBinding
|
|
2410
2469
|
}
|
2411
2470
|
text 'foreground blue'
|
2412
2471
|
}
|
2472
|
+
|
2413
2473
|
spinner {
|
2414
2474
|
layout_data(:fill, :center, false, false) {
|
2415
2475
|
horizontal_span 2
|
2416
2476
|
}
|
2417
2477
|
maximum 255
|
2418
2478
|
increment 10
|
2419
|
-
selection <=> [
|
2479
|
+
selection <=> [@line, :foreground_red]
|
2420
2480
|
}
|
2421
2481
|
spinner {
|
2422
2482
|
layout_data(:fill, :center, false, false) {
|
@@ -2424,7 +2484,7 @@ class HelloCanvasDataBinding
|
|
2424
2484
|
}
|
2425
2485
|
maximum 255
|
2426
2486
|
increment 10
|
2427
|
-
selection <=> [
|
2487
|
+
selection <=> [@line, :foreground_green]
|
2428
2488
|
}
|
2429
2489
|
spinner {
|
2430
2490
|
layout_data(:fill, :center, false, false) {
|
@@ -2432,8 +2492,9 @@ class HelloCanvasDataBinding
|
|
2432
2492
|
}
|
2433
2493
|
maximum 255
|
2434
2494
|
increment 10
|
2435
|
-
selection <=> [
|
2495
|
+
selection <=> [@line, :foreground_blue]
|
2436
2496
|
}
|
2497
|
+
|
2437
2498
|
label {
|
2438
2499
|
layout_data(:fill, :center, false, false) {
|
2439
2500
|
horizontal_span 3
|
@@ -2446,48 +2507,648 @@ class HelloCanvasDataBinding
|
|
2446
2507
|
}
|
2447
2508
|
text 'line style'
|
2448
2509
|
}
|
2510
|
+
|
2449
2511
|
spinner {
|
2450
2512
|
layout_data(:fill, :center, false, false) {
|
2451
2513
|
horizontal_span 3
|
2452
2514
|
}
|
2453
2515
|
maximum 255
|
2454
|
-
selection <=> [
|
2516
|
+
selection <=> [@line, :line_width_value]
|
2455
2517
|
}
|
2456
2518
|
combo(:read_only) {
|
2457
2519
|
layout_data(:fill, :center, false, false) {
|
2458
2520
|
horizontal_span 3
|
2459
2521
|
}
|
2460
|
-
selection <=> [
|
2522
|
+
selection <=> [@line, :line_style_value]
|
2461
2523
|
}
|
2462
|
-
|
2524
|
+
|
2525
|
+
@line_canvas = canvas {
|
2463
2526
|
layout_data(:center, :center, false, false) {
|
2464
2527
|
horizontal_span 6
|
2465
2528
|
width_hint CANVAS_WIDTH
|
2466
2529
|
height_hint CANVAS_WIDTH
|
2467
2530
|
}
|
2531
|
+
|
2468
2532
|
background :white
|
2469
2533
|
|
2470
2534
|
line {
|
2471
|
-
x1
|
2472
|
-
y1
|
2473
|
-
x2
|
2474
|
-
y2
|
2475
|
-
foreground <= [
|
2476
|
-
line_width <= [
|
2477
|
-
line_style <= [
|
2535
|
+
x1 <= [@line, :x1_value]
|
2536
|
+
y1 <= [@line, :y1_value]
|
2537
|
+
x2 <= [@line, :x2_value]
|
2538
|
+
y2 <= [@line, :y2_value]
|
2539
|
+
foreground <= [@line, :foreground_value, computed_by: [:foreground_red, :foreground_green, :foreground_blue]]
|
2540
|
+
line_width <= [@line, :line_width_value]
|
2541
|
+
line_style <= [@line, :line_style_value]
|
2542
|
+
}
|
2543
|
+
|
2544
|
+
@line_oval1 = oval {
|
2545
|
+
x <= [@line, :x1_value, on_read: ->(val) {val - 5}]
|
2546
|
+
y <= [@line, :y1_value, on_read: ->(val) {val - 5}]
|
2547
|
+
width 10
|
2548
|
+
height 10
|
2549
|
+
background :black
|
2550
|
+
}
|
2551
|
+
|
2552
|
+
@line_oval2 = oval {
|
2553
|
+
x <= [@line, :x2_value, on_read: ->(val) {val - 5}]
|
2554
|
+
y <= [@line, :y2_value, on_read: ->(val) {val - 5}]
|
2555
|
+
width 10
|
2556
|
+
height 10
|
2557
|
+
background :black
|
2558
|
+
}
|
2559
|
+
|
2560
|
+
on_mouse_down do |mouse_event|
|
2561
|
+
@selected_shape = @line_canvas.shape_at_location(mouse_event.x, mouse_event.y)
|
2562
|
+
@selected_shape = nil unless @selected_shape.is_a?(Glimmer::SWT::Custom::Shape::Oval)
|
2563
|
+
@line_canvas.cursor = :hand if @selected_shape
|
2564
|
+
end
|
2565
|
+
|
2566
|
+
on_drag_detected do |drag_detect_event|
|
2567
|
+
@drag_detected = true
|
2568
|
+
@drag_current_x = drag_detect_event.x
|
2569
|
+
@drag_current_y = drag_detect_event.y
|
2570
|
+
end
|
2571
|
+
|
2572
|
+
on_mouse_move do |mouse_event|
|
2573
|
+
if @drag_detected && @selected_shape
|
2574
|
+
delta_x = mouse_event.x - @drag_current_x
|
2575
|
+
delta_y = mouse_event.y - @drag_current_y
|
2576
|
+
case @selected_shape
|
2577
|
+
when @line_oval1
|
2578
|
+
@line.x1_value += delta_x
|
2579
|
+
@line.y1_value += delta_y
|
2580
|
+
when @line_oval2
|
2581
|
+
@line.x2_value += delta_x
|
2582
|
+
@line.y2_value += delta_y
|
2583
|
+
end
|
2584
|
+
@drag_current_x = mouse_event.x
|
2585
|
+
@drag_current_y = mouse_event.y
|
2586
|
+
end
|
2587
|
+
end
|
2588
|
+
|
2589
|
+
on_mouse_up do |mouse_event|
|
2590
|
+
@line_canvas.cursor = :arrow
|
2591
|
+
@drag_detected = false
|
2592
|
+
@selected_shape = nil
|
2593
|
+
end
|
2594
|
+
}
|
2595
|
+
}
|
2596
|
+
|
2597
|
+
tab_item {
|
2598
|
+
grid_layout(6, true) {
|
2599
|
+
margin_width 0
|
2600
|
+
margin_height 0
|
2601
|
+
horizontal_spacing 0
|
2602
|
+
vertical_spacing 0
|
2603
|
+
}
|
2604
|
+
text 'Quad'
|
2605
|
+
|
2606
|
+
label {
|
2607
|
+
layout_data(:fill, :center, false, false) {
|
2608
|
+
horizontal_span 3
|
2609
|
+
}
|
2610
|
+
text 'x1'
|
2611
|
+
}
|
2612
|
+
label {
|
2613
|
+
layout_data(:fill, :center, false, false) {
|
2614
|
+
horizontal_span 3
|
2615
|
+
}
|
2616
|
+
text 'y1'
|
2617
|
+
}
|
2618
|
+
|
2619
|
+
spinner {
|
2620
|
+
layout_data(:fill, :center, false, false) {
|
2621
|
+
horizontal_span 3
|
2622
|
+
}
|
2623
|
+
maximum CANVAS_WIDTH
|
2624
|
+
increment 3
|
2625
|
+
selection <=> [@quad, :x1_value]
|
2626
|
+
}
|
2627
|
+
spinner {
|
2628
|
+
layout_data(:fill, :center, false, false) {
|
2629
|
+
horizontal_span 3
|
2630
|
+
}
|
2631
|
+
maximum CANVAS_HEIGHT
|
2632
|
+
increment 3
|
2633
|
+
selection <=> [@quad, :y1_value]
|
2634
|
+
}
|
2635
|
+
|
2636
|
+
label {
|
2637
|
+
layout_data(:fill, :center, false, false) {
|
2638
|
+
horizontal_span 3
|
2639
|
+
}
|
2640
|
+
text 'control x'
|
2641
|
+
}
|
2642
|
+
label {
|
2643
|
+
layout_data(:fill, :center, false, false) {
|
2644
|
+
horizontal_span 3
|
2645
|
+
}
|
2646
|
+
text 'control y'
|
2647
|
+
}
|
2648
|
+
|
2649
|
+
spinner {
|
2650
|
+
layout_data(:fill, :center, false, false) {
|
2651
|
+
horizontal_span 3
|
2652
|
+
}
|
2653
|
+
maximum CANVAS_WIDTH
|
2654
|
+
increment 3
|
2655
|
+
selection <=> [@quad, :cx_value]
|
2656
|
+
}
|
2657
|
+
spinner {
|
2658
|
+
layout_data(:fill, :center, false, false) {
|
2659
|
+
horizontal_span 3
|
2660
|
+
}
|
2661
|
+
maximum CANVAS_HEIGHT
|
2662
|
+
increment 3
|
2663
|
+
selection <=> [@quad, :cy_value]
|
2664
|
+
}
|
2665
|
+
|
2666
|
+
label {
|
2667
|
+
layout_data(:fill, :center, false, false) {
|
2668
|
+
horizontal_span 3
|
2669
|
+
}
|
2670
|
+
text 'x2'
|
2671
|
+
}
|
2672
|
+
label {
|
2673
|
+
layout_data(:fill, :center, false, false) {
|
2674
|
+
horizontal_span 3
|
2675
|
+
}
|
2676
|
+
text 'y2'
|
2677
|
+
}
|
2678
|
+
|
2679
|
+
spinner {
|
2680
|
+
layout_data(:fill, :center, false, false) {
|
2681
|
+
horizontal_span 3
|
2682
|
+
}
|
2683
|
+
maximum CANVAS_WIDTH
|
2684
|
+
increment 3
|
2685
|
+
selection <=> [@quad, :x2_value]
|
2686
|
+
}
|
2687
|
+
spinner {
|
2688
|
+
layout_data(:fill, :center, false, false) {
|
2689
|
+
horizontal_span 3
|
2690
|
+
}
|
2691
|
+
maximum CANVAS_HEIGHT
|
2692
|
+
increment 3
|
2693
|
+
selection <=> [@quad, :y2_value]
|
2694
|
+
}
|
2695
|
+
|
2696
|
+
label {
|
2697
|
+
layout_data(:fill, :center, false, false) {
|
2698
|
+
horizontal_span 2
|
2699
|
+
}
|
2700
|
+
text 'foreground red'
|
2701
|
+
}
|
2702
|
+
label {
|
2703
|
+
layout_data(:fill, :center, false, false) {
|
2704
|
+
horizontal_span 2
|
2705
|
+
}
|
2706
|
+
text 'foreground green'
|
2707
|
+
}
|
2708
|
+
label {
|
2709
|
+
layout_data(:fill, :center, false, false) {
|
2710
|
+
horizontal_span 2
|
2711
|
+
}
|
2712
|
+
text 'foreground blue'
|
2713
|
+
}
|
2714
|
+
|
2715
|
+
spinner {
|
2716
|
+
layout_data(:fill, :center, false, false) {
|
2717
|
+
horizontal_span 2
|
2718
|
+
}
|
2719
|
+
maximum 255
|
2720
|
+
increment 10
|
2721
|
+
selection <=> [@quad, :foreground_red]
|
2722
|
+
}
|
2723
|
+
spinner {
|
2724
|
+
layout_data(:fill, :center, false, false) {
|
2725
|
+
horizontal_span 2
|
2726
|
+
}
|
2727
|
+
maximum 255
|
2728
|
+
increment 10
|
2729
|
+
selection <=> [@quad, :foreground_green]
|
2730
|
+
}
|
2731
|
+
spinner {
|
2732
|
+
layout_data(:fill, :center, false, false) {
|
2733
|
+
horizontal_span 2
|
2734
|
+
}
|
2735
|
+
maximum 255
|
2736
|
+
increment 10
|
2737
|
+
selection <=> [@quad, :foreground_blue]
|
2738
|
+
}
|
2739
|
+
|
2740
|
+
label {
|
2741
|
+
layout_data(:fill, :center, false, false) {
|
2742
|
+
horizontal_span 3
|
2743
|
+
}
|
2744
|
+
text 'line width'
|
2745
|
+
}
|
2746
|
+
label {
|
2747
|
+
layout_data(:fill, :center, false, false) {
|
2748
|
+
horizontal_span 3
|
2749
|
+
}
|
2750
|
+
text 'line style'
|
2751
|
+
}
|
2752
|
+
|
2753
|
+
spinner {
|
2754
|
+
layout_data(:fill, :center, false, false) {
|
2755
|
+
horizontal_span 3
|
2756
|
+
}
|
2757
|
+
maximum 255
|
2758
|
+
selection <=> [@quad, :line_width_value]
|
2759
|
+
}
|
2760
|
+
combo(:read_only) {
|
2761
|
+
layout_data(:fill, :center, false, false) {
|
2762
|
+
horizontal_span 3
|
2763
|
+
}
|
2764
|
+
selection <=> [@quad, :line_style_value]
|
2765
|
+
}
|
2766
|
+
|
2767
|
+
@quad_canvas = canvas {
|
2768
|
+
layout_data(:center, :center, false, false) {
|
2769
|
+
horizontal_span 6
|
2770
|
+
width_hint CANVAS_WIDTH
|
2771
|
+
height_hint CANVAS_WIDTH
|
2772
|
+
}
|
2773
|
+
|
2774
|
+
background :white
|
2775
|
+
|
2776
|
+
path {
|
2777
|
+
foreground <= [@quad, :foreground_value, computed_by: [:foreground_red, :foreground_green, :foreground_blue]]
|
2778
|
+
line_width <= [@quad, :line_width_value]
|
2779
|
+
line_style <= [@quad, :line_style_value]
|
2780
|
+
|
2781
|
+
quad {
|
2782
|
+
point_array <= [@quad, :point_array, computed_by: [:x1_value, :y1_value, :cx_value, :cy_value, :x2_value, :y2_value]]
|
2783
|
+
}
|
2784
|
+
}
|
2785
|
+
|
2786
|
+
@quad_oval1 = oval {
|
2787
|
+
x <= [@quad, :x1_value, on_read: ->(val) {val - 5}]
|
2788
|
+
y <= [@quad, :y1_value, on_read: ->(val) {val - 5}]
|
2789
|
+
width 10
|
2790
|
+
height 10
|
2791
|
+
background :black
|
2792
|
+
}
|
2793
|
+
|
2794
|
+
@quad_oval2 = oval {
|
2795
|
+
x <= [@quad, :cx_value, on_read: ->(val) {val - 5}]
|
2796
|
+
y <= [@quad, :cy_value, on_read: ->(val) {val - 5}]
|
2797
|
+
width 10
|
2798
|
+
height 10
|
2799
|
+
background :dark_gray
|
2800
|
+
}
|
2801
|
+
|
2802
|
+
@quad_oval3 = oval {
|
2803
|
+
x <= [@quad, :x2_value, on_read: ->(val) {val - 5}]
|
2804
|
+
y <= [@quad, :y2_value, on_read: ->(val) {val - 5}]
|
2805
|
+
width 10
|
2806
|
+
height 10
|
2807
|
+
background :black
|
2808
|
+
}
|
2809
|
+
|
2810
|
+
on_mouse_down do |mouse_event|
|
2811
|
+
@selected_shape = @quad_canvas.shape_at_location(mouse_event.x, mouse_event.y)
|
2812
|
+
@selected_shape = nil unless @selected_shape.is_a?(Glimmer::SWT::Custom::Shape::Oval)
|
2813
|
+
@quad_canvas.cursor = :hand if @selected_shape
|
2814
|
+
end
|
2815
|
+
|
2816
|
+
on_drag_detected do |drag_detect_event|
|
2817
|
+
@drag_detected = true
|
2818
|
+
@drag_current_x = drag_detect_event.x
|
2819
|
+
@drag_current_y = drag_detect_event.y
|
2820
|
+
end
|
2821
|
+
|
2822
|
+
on_mouse_move do |mouse_event|
|
2823
|
+
if @drag_detected && @selected_shape
|
2824
|
+
delta_x = mouse_event.x - @drag_current_x
|
2825
|
+
delta_y = mouse_event.y - @drag_current_y
|
2826
|
+
case @selected_shape
|
2827
|
+
when @quad_oval1
|
2828
|
+
@quad.x1_value += delta_x
|
2829
|
+
@quad.y1_value += delta_y
|
2830
|
+
when @quad_oval2
|
2831
|
+
@quad.cx_value += delta_x
|
2832
|
+
@quad.cy_value += delta_y
|
2833
|
+
when @quad_oval3
|
2834
|
+
@quad.x2_value += delta_x
|
2835
|
+
@quad.y2_value += delta_y
|
2836
|
+
end
|
2837
|
+
@drag_current_x = mouse_event.x
|
2838
|
+
@drag_current_y = mouse_event.y
|
2839
|
+
end
|
2840
|
+
end
|
2841
|
+
|
2842
|
+
on_mouse_up do |mouse_event|
|
2843
|
+
@quad_canvas.cursor = :arrow
|
2844
|
+
@drag_detected = false
|
2845
|
+
@selected_shape = nil
|
2846
|
+
end
|
2847
|
+
}
|
2848
|
+
}
|
2849
|
+
|
2850
|
+
tab_item {
|
2851
|
+
grid_layout(6, true) {
|
2852
|
+
margin_width 0
|
2853
|
+
margin_height 0
|
2854
|
+
horizontal_spacing 0
|
2855
|
+
vertical_spacing 0
|
2856
|
+
}
|
2857
|
+
text 'Cubic'
|
2858
|
+
|
2859
|
+
label {
|
2860
|
+
layout_data(:fill, :center, false, false) {
|
2861
|
+
horizontal_span 3
|
2862
|
+
}
|
2863
|
+
text 'x1'
|
2864
|
+
}
|
2865
|
+
label {
|
2866
|
+
layout_data(:fill, :center, false, false) {
|
2867
|
+
horizontal_span 3
|
2868
|
+
}
|
2869
|
+
text 'y1'
|
2870
|
+
}
|
2871
|
+
|
2872
|
+
spinner {
|
2873
|
+
layout_data(:fill, :center, false, false) {
|
2874
|
+
horizontal_span 3
|
2875
|
+
}
|
2876
|
+
maximum CANVAS_WIDTH
|
2877
|
+
increment 3
|
2878
|
+
selection <=> [@cubic, :x1_value]
|
2879
|
+
}
|
2880
|
+
spinner {
|
2881
|
+
layout_data(:fill, :center, false, false) {
|
2882
|
+
horizontal_span 3
|
2883
|
+
}
|
2884
|
+
maximum CANVAS_HEIGHT
|
2885
|
+
increment 3
|
2886
|
+
selection <=> [@cubic, :y1_value]
|
2887
|
+
}
|
2888
|
+
|
2889
|
+
label {
|
2890
|
+
layout_data(:fill, :center, false, false) {
|
2891
|
+
horizontal_span 3
|
2892
|
+
}
|
2893
|
+
text 'control 1 x'
|
2894
|
+
}
|
2895
|
+
label {
|
2896
|
+
layout_data(:fill, :center, false, false) {
|
2897
|
+
horizontal_span 3
|
2478
2898
|
}
|
2899
|
+
text 'control 1 y'
|
2900
|
+
}
|
2901
|
+
|
2902
|
+
spinner {
|
2903
|
+
layout_data(:fill, :center, false, false) {
|
2904
|
+
horizontal_span 3
|
2905
|
+
}
|
2906
|
+
maximum CANVAS_WIDTH
|
2907
|
+
increment 3
|
2908
|
+
selection <=> [@cubic, :cx1_value]
|
2909
|
+
}
|
2910
|
+
spinner {
|
2911
|
+
layout_data(:fill, :center, false, false) {
|
2912
|
+
horizontal_span 3
|
2913
|
+
}
|
2914
|
+
maximum CANVAS_HEIGHT
|
2915
|
+
increment 3
|
2916
|
+
selection <=> [@cubic, :cy1_value]
|
2917
|
+
}
|
2918
|
+
|
2919
|
+
label {
|
2920
|
+
layout_data(:fill, :center, false, false) {
|
2921
|
+
horizontal_span 3
|
2922
|
+
}
|
2923
|
+
text 'control 2 x'
|
2924
|
+
}
|
2925
|
+
label {
|
2926
|
+
layout_data(:fill, :center, false, false) {
|
2927
|
+
horizontal_span 3
|
2928
|
+
}
|
2929
|
+
text 'control 2 y'
|
2930
|
+
}
|
2931
|
+
|
2932
|
+
spinner {
|
2933
|
+
layout_data(:fill, :center, false, false) {
|
2934
|
+
horizontal_span 3
|
2935
|
+
}
|
2936
|
+
maximum CANVAS_WIDTH
|
2937
|
+
increment 3
|
2938
|
+
selection <=> [@cubic, :cx2_value]
|
2939
|
+
}
|
2940
|
+
spinner {
|
2941
|
+
layout_data(:fill, :center, false, false) {
|
2942
|
+
horizontal_span 3
|
2943
|
+
}
|
2944
|
+
maximum CANVAS_HEIGHT
|
2945
|
+
increment 3
|
2946
|
+
selection <=> [@cubic, :cy2_value]
|
2947
|
+
}
|
2948
|
+
|
2949
|
+
label {
|
2950
|
+
layout_data(:fill, :center, false, false) {
|
2951
|
+
horizontal_span 3
|
2952
|
+
}
|
2953
|
+
text 'x2'
|
2954
|
+
}
|
2955
|
+
label {
|
2956
|
+
layout_data(:fill, :center, false, false) {
|
2957
|
+
horizontal_span 3
|
2958
|
+
}
|
2959
|
+
text 'y2'
|
2960
|
+
}
|
2961
|
+
|
2962
|
+
spinner {
|
2963
|
+
layout_data(:fill, :center, false, false) {
|
2964
|
+
horizontal_span 3
|
2965
|
+
}
|
2966
|
+
maximum CANVAS_WIDTH
|
2967
|
+
increment 3
|
2968
|
+
selection <=> [@cubic, :x2_value]
|
2969
|
+
}
|
2970
|
+
spinner {
|
2971
|
+
layout_data(:fill, :center, false, false) {
|
2972
|
+
horizontal_span 3
|
2973
|
+
}
|
2974
|
+
maximum CANVAS_HEIGHT
|
2975
|
+
increment 3
|
2976
|
+
selection <=> [@cubic, :y2_value]
|
2977
|
+
}
|
2978
|
+
|
2979
|
+
label {
|
2980
|
+
layout_data(:fill, :center, false, false) {
|
2981
|
+
horizontal_span 2
|
2982
|
+
}
|
2983
|
+
text 'foreground red'
|
2984
|
+
}
|
2985
|
+
label {
|
2986
|
+
layout_data(:fill, :center, false, false) {
|
2987
|
+
horizontal_span 2
|
2988
|
+
}
|
2989
|
+
text 'foreground green'
|
2990
|
+
}
|
2991
|
+
label {
|
2992
|
+
layout_data(:fill, :center, false, false) {
|
2993
|
+
horizontal_span 2
|
2994
|
+
}
|
2995
|
+
text 'foreground blue'
|
2996
|
+
}
|
2997
|
+
|
2998
|
+
spinner {
|
2999
|
+
layout_data(:fill, :center, false, false) {
|
3000
|
+
horizontal_span 2
|
3001
|
+
}
|
3002
|
+
maximum 255
|
3003
|
+
increment 10
|
3004
|
+
selection <=> [@cubic, :foreground_red]
|
3005
|
+
}
|
3006
|
+
spinner {
|
3007
|
+
layout_data(:fill, :center, false, false) {
|
3008
|
+
horizontal_span 2
|
3009
|
+
}
|
3010
|
+
maximum 255
|
3011
|
+
increment 10
|
3012
|
+
selection <=> [@cubic, :foreground_green]
|
3013
|
+
}
|
3014
|
+
spinner {
|
3015
|
+
layout_data(:fill, :center, false, false) {
|
3016
|
+
horizontal_span 2
|
3017
|
+
}
|
3018
|
+
maximum 255
|
3019
|
+
increment 10
|
3020
|
+
selection <=> [@cubic, :foreground_blue]
|
3021
|
+
}
|
3022
|
+
|
3023
|
+
label {
|
3024
|
+
layout_data(:fill, :center, false, false) {
|
3025
|
+
horizontal_span 3
|
3026
|
+
}
|
3027
|
+
text 'line width'
|
3028
|
+
}
|
3029
|
+
label {
|
3030
|
+
layout_data(:fill, :center, false, false) {
|
3031
|
+
horizontal_span 3
|
3032
|
+
}
|
3033
|
+
text 'line style'
|
3034
|
+
}
|
3035
|
+
|
3036
|
+
spinner {
|
3037
|
+
layout_data(:fill, :center, false, false) {
|
3038
|
+
horizontal_span 3
|
3039
|
+
}
|
3040
|
+
maximum 255
|
3041
|
+
selection <=> [@cubic, :line_width_value]
|
3042
|
+
}
|
3043
|
+
combo(:read_only) {
|
3044
|
+
layout_data(:fill, :center, false, false) {
|
3045
|
+
horizontal_span 3
|
3046
|
+
}
|
3047
|
+
selection <=> [@cubic, :line_style_value]
|
3048
|
+
}
|
3049
|
+
|
3050
|
+
@cubic_canvas = canvas {
|
3051
|
+
layout_data(:center, :center, false, false) {
|
3052
|
+
horizontal_span 6
|
3053
|
+
width_hint CANVAS_WIDTH
|
3054
|
+
height_hint CANVAS_WIDTH
|
3055
|
+
}
|
3056
|
+
|
3057
|
+
background :white
|
3058
|
+
|
3059
|
+
path {
|
3060
|
+
foreground <= [@cubic, :foreground_value, computed_by: [:foreground_red, :foreground_green, :foreground_blue]]
|
3061
|
+
line_width <= [@cubic, :line_width_value]
|
3062
|
+
line_style <= [@cubic, :line_style_value]
|
3063
|
+
|
3064
|
+
cubic {
|
3065
|
+
point_array <= [@cubic, :point_array, computed_by: [:x1_value, :y1_value, :cx1_value, :cy1_value, :cx2_value, :cy2_value, :x2_value, :y2_value]]
|
3066
|
+
}
|
3067
|
+
}
|
3068
|
+
|
3069
|
+
@cubic_oval1 = oval {
|
3070
|
+
x <= [@cubic, :x1_value, on_read: ->(val) {val - 5}]
|
3071
|
+
y <= [@cubic, :y1_value, on_read: ->(val) {val - 5}]
|
3072
|
+
width 10
|
3073
|
+
height 10
|
3074
|
+
background :black
|
3075
|
+
}
|
3076
|
+
|
3077
|
+
@cubic_oval2 = oval {
|
3078
|
+
x <= [@cubic, :cx1_value, on_read: ->(val) {val - 5}]
|
3079
|
+
y <= [@cubic, :cy1_value, on_read: ->(val) {val - 5}]
|
3080
|
+
width 10
|
3081
|
+
height 10
|
3082
|
+
background :dark_gray
|
3083
|
+
}
|
3084
|
+
|
3085
|
+
@cubic_oval3 = oval {
|
3086
|
+
x <= [@cubic, :cx2_value, on_read: ->(val) {val - 5}]
|
3087
|
+
y <= [@cubic, :cy2_value, on_read: ->(val) {val - 5}]
|
3088
|
+
width 10
|
3089
|
+
height 10
|
3090
|
+
background :dark_gray
|
3091
|
+
}
|
3092
|
+
|
3093
|
+
@cubic_oval4 = oval {
|
3094
|
+
x <= [@cubic, :x2_value, on_read: ->(val) {val - 5}]
|
3095
|
+
y <= [@cubic, :y2_value, on_read: ->(val) {val - 5}]
|
3096
|
+
width 10
|
3097
|
+
height 10
|
3098
|
+
background :black
|
3099
|
+
}
|
3100
|
+
|
3101
|
+
on_mouse_down do |mouse_event|
|
3102
|
+
@selected_shape = @cubic_canvas.shape_at_location(mouse_event.x, mouse_event.y)
|
3103
|
+
@selected_shape = nil unless @selected_shape.is_a?(Glimmer::SWT::Custom::Shape::Oval)
|
3104
|
+
@cubic_canvas.cursor = :hand if @selected_shape
|
3105
|
+
end
|
3106
|
+
|
3107
|
+
on_drag_detected do |drag_detect_event|
|
3108
|
+
@drag_detected = true
|
3109
|
+
@drag_current_x = drag_detect_event.x
|
3110
|
+
@drag_current_y = drag_detect_event.y
|
3111
|
+
end
|
3112
|
+
|
3113
|
+
on_mouse_move do |mouse_event|
|
3114
|
+
if @drag_detected && @selected_shape
|
3115
|
+
delta_x = mouse_event.x - @drag_current_x
|
3116
|
+
delta_y = mouse_event.y - @drag_current_y
|
3117
|
+
case @selected_shape
|
3118
|
+
when @cubic_oval1
|
3119
|
+
@cubic.x1_value += delta_x
|
3120
|
+
@cubic.y1_value += delta_y
|
3121
|
+
when @cubic_oval2
|
3122
|
+
@cubic.cx1_value += delta_x
|
3123
|
+
@cubic.cy1_value += delta_y
|
3124
|
+
when @cubic_oval3
|
3125
|
+
@cubic.cx2_value += delta_x
|
3126
|
+
@cubic.cy2_value += delta_y
|
3127
|
+
when @cubic_oval4
|
3128
|
+
@cubic.x2_value += delta_x
|
3129
|
+
@cubic.y2_value += delta_y
|
3130
|
+
end
|
3131
|
+
@drag_current_x = mouse_event.x
|
3132
|
+
@drag_current_y = mouse_event.y
|
3133
|
+
end
|
3134
|
+
end
|
3135
|
+
|
3136
|
+
on_mouse_up do |mouse_event|
|
3137
|
+
@cubic_canvas.cursor = :arrow
|
3138
|
+
@drag_detected = false
|
3139
|
+
@selected_shape = nil
|
3140
|
+
end
|
2479
3141
|
}
|
2480
3142
|
}
|
2481
3143
|
}
|
2482
3144
|
}
|
2483
3145
|
}
|
2484
|
-
|
2485
3146
|
end
|
2486
3147
|
|
2487
3148
|
HelloCanvasDataBinding.launch
|
2488
3149
|
```
|
2489
3150
|
|
2490
|
-

|
2491
3152
|
|
2492
3153
|
If you ever have special needs for optimization, you could always default to direct SWT painting via [org.eclipse.swt.graphics.GC](https://help.eclipse.org/2020-12/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/graphics/GC.html) instead. Learn more at the [SWT Graphics Guide](https://www.eclipse.org/articles/Article-SWT-graphics/SWT_graphics.html) and [SWT Image Guide](https://www.eclipse.org/articles/Article-SWT-images/graphics-resources.html#Saving%20Images).
|
2493
3154
|
|
@@ -2905,7 +3566,7 @@ As they say, there are many ways to skin a cat! This is in line with the Ruby wa
|
|
2905
3566
|
|
2906
3567
|
### Canvas Path DSL
|
2907
3568
|
|
2908
|
-
Unlike common imperative GUI graphing toolkits, Glimmer enables declarative rendering of paths with the
|
3569
|
+
Unlike common imperative GUI graphing toolkits, Glimmer enables declarative rendering of paths with the Canvas Path DSL via the new `path { }` keyword and by nesting one of the following path segment keywords underneath:
|
2909
3570
|
- `point(x1, y1)`: renders a Point (Dot) as part of a path.
|
2910
3571
|
- `line(x1, y1, x2=nil, y2=nil)`: renders a Line as part of a path. If you drop x2, y2, it joins to the previous point automatically. You may repeat for a series of lines forming a curve.
|
2911
3572
|
- `quad(x1, y1, x2, y2, x3=nil, y3=nil)`: renders a Quadratic Bezier Curve. If you drop x3 and y3, it joins to the previous point automatically.
|
@@ -3579,7 +4240,7 @@ Example:
|
|
3579
4240
|
shell {
|
3580
4241
|
@tree = tree {
|
3581
4242
|
items <= [company, :owner, tree_properties: {children: :coworkers, text: :name}]
|
3582
|
-
selection <=> [company, :selected_coworker]
|
4243
|
+
selection <=> [company, :selected_coworker]
|
3583
4244
|
}
|
3584
4245
|
}
|
3585
4246
|
```
|