glimmer-dsl-swt 4.24.0.1 → 4.24.1.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -1077,7 +1077,7 @@ You may check out a more full-fledged example in [Hello, Sash Form!](/docs/refer
1077
1077
 
1078
1078
  ![Hello Browser](/images/glimmer-hello-browser.png)
1079
1079
 
1080
- Glimmer supports the [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 can even be instrumented with JavaScript when needed (though highly discouraged since it defeats the purpose of using Ruby except in very rare cases like leveraging a pre-existing web codebase in a desktop app).
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 the [SWT Browser widget](https://help.eclipse.org/2020-12/topic/org.eclipse.platform.doc.isv/reference/api/org/eclipse/swt/browser/Browser.html) API.
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
- include Glimmer::GUI::CustomWindow # alias for Glimmer::UI::CustomShell
2299
-
2300
- CANVAS_WIDTH = 300
2301
- CANVAS_HEIGHT = 300
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
- attr_accessor :x1_value, :y1_value, :x2_value, :y2_value, :foreground_red, :foreground_green, :foreground_blue, :line_width_value, :line_style_value
2314
+ class LinePathShape < PathShape
2315
+ attr_accessor :x1_value, :y1_value, :x2_value, :y2_value
2316
+ end
2304
2317
 
2305
- def foreground_value
2306
- rgb(foreground_red, foreground_green, foreground_blue)
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
- def line_style_value_options
2310
- [:solid, :dash, :dot, :dashdot, :dashdotdot]
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
- self.x1_value = 0
2315
- self.y1_value = 0
2316
- self.x2_value = CANVAS_WIDTH
2317
- self.y2_value = CANVAS_HEIGHT
2318
- self.foreground_red = 28
2319
- self.foreground_green = 128
2320
- self.foreground_blue = 228
2321
- self.line_width_value = 3
2322
- self.line_style_value = :dot
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 'line'
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 <=> [self, :x1_value]
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 <=> [self, :y1_value]
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 <=> [self, :x2_value]
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 <=> [self, :y2_value]
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 <=> [self, :foreground_red]
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 <=> [self, :foreground_green]
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 <=> [self, :foreground_blue]
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 <=> [self, :line_width_value]
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 <=> [self, :line_style_value]
2522
+ selection <=> [@line, :line_style_value]
2461
2523
  }
2462
- canvas {
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 <= [self, :x1_value]
2472
- y1 <= [self, :y1_value]
2473
- x2 <= [self, :x2_value]
2474
- y2 <= [self, :y2_value]
2475
- foreground <= [self, :foreground_value, computed_by: [:foreground_red, :foreground_green, :foreground_blue]]
2476
- line_width <= [self, :line_width_value]
2477
- line_style <= [self, :line_style_value]
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
- ![Glimmer Example Canvas Data-Binding Line Changed](/images/glimmer-hello-canvas-data-binding-line-changed.png)
3151
+ ![Glimmer Example Canvas Data-Binding](/images/glimmer-hello-canvas-data-binding.gif)
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 new Canvas Path DSL (Early Alpha) via the new `path { }` keyword and by nesting one of the following path segment keywords underneath:
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
  ```