viliusle#311 bezier curve

images/test-collection.json

@@ -1720,6 +1720,54 @@
  "callout",
  "render"
  ]
+ },
+ {
+ "id": 48,
+ "parent_id": 0,
+ "name": "Bezier_curve #48",
+ "type": "bezier_curve",
+ "link": null,
+ "x": 0,
+ "y": 0,
+ "width": null,
+ "width_original": null,
+ "height": null,
+ "height_original": null,
+ "visible": true,
+ "is_vector": true,
+ "hide_selection_if_active": true,
+ "opacity": 100,
+ "order": 48,
+ "composition": "source-over",
+ "rotate": null,
+ "data": {
+ "start": {
+ "x": 400,
+ "y": 660.5
+ },
+ "cp1": {
+ "x": 477.5,
+ "y": 661.5
+ },
+ "cp2": {
+ "x": 400,
+ "y": 708
+ },
+ "end": {
+ "x": 480,
+ "y": 707.5
+ }
+ },
+ "params": {
+ "size": 4
+ },
+ "status": null,
+ "color": "#ff0000",
+ "filters": [],
+ "render_function": [
+ "bezier_curve",
+ "render"
+ ]
  }
  ],
  "data": [

src/js/config.js

@@ -21,6 +21,7 @@ config.layer = null;
 config.need_render = false;
 config.need_render_changed_params = false; // Set specifically when param change in layer details triggered render
 config.mouse = {};
+config.mouse_lock = null;
 config.swatches = {
  default: [] // Only default used right now, object format for swatch swapping in future.
 };
@@ -346,6 +347,13 @@ config.TOOLS = [
  fill_color: '#555555',
  },
  },
+ {
+ name: 'bezier_curve',
+ visible: false,
+ attributes: {
+ size: 4,
+ },
+ },
  {
  name: 'moon',
  visible: false,

src/js/core/base-tools.js

@@ -134,10 +134,12 @@ class Base_tools_class {
  }
 
  if (eventType === 'mousedown' || eventType === 'touchstart') {
- if ((event.target.id != 'canvas_minipaint' && event.target.id != 'main_wrapper') || (event.which != 1 && eventType !== 'touchstart'))
+ if ((event.target.id != 'canvas_minipaint' && event.target.id != 'main_wrapper') || (event.which != 1 && eventType !== 'touchstart')) {
  this.mouse_click_valid = false;
- else
+ }
+ else {
  this.mouse_click_valid = true;
+ }
  this.mouse_valid = true;
  }
 

src/js/libs/helpers.js

@@ -636,6 +636,35 @@ class Helper_class {
  ctx.stroke();
  }
 
+ /**
+ * draws control point that is visible on white and black backgrounds.
+ *
+ * @param ctx
+ * @param x
+ * @param y
+ * @returns {Path2D}
+ */
+ draw_control_point(ctx, x, y) {
+ var dx = 0;
+ var dy = 0;
+ var block_size = 12 / config.ZOOM;
+ const wholeLineWidth = 2 / config.ZOOM;
+
+ ctx.strokeStyle = "#000000";
+ ctx.fillStyle = "#ffffff";
+ ctx.lineWidth = wholeLineWidth;
+
+ //create path
+ const circle = new Path2D();
+ circle.arc(x + dx * block_size, y + dy * block_size, block_size / 2, 0, 2 * Math.PI);
+
+ //draw
+ ctx.fill(circle);
+ ctx.stroke(circle);
+
+ return circle;
+ }
+
  /**
  * converts internal unit (pixel) to user defined
  *

src/js/tools/select.js

@@ -137,8 +137,9 @@ class Select_tool_class extends Base_tools_class {
 
  async mousedown(e) {
  var mouse = this.get_mouse_info(e);
- if (mouse.click_valid == false)
+ if (mouse.click_valid == false || config.mouse_lock === true) {
  return;
+ }
 
  this.rotate_initial = config.layer.rotate;
 
@@ -166,9 +167,7 @@ class Select_tool_class extends Base_tools_class {
 
  mousemove(e) {
  var mouse = this.get_mouse_info(e);
- if (mouse.is_drag == false)
- return;
- if (mouse.click_valid == false) {
+ if (mouse.is_drag == false || mouse.click_valid == false || config.mouse_lock === true) {
  return;
  }
  if (this.resizing) {
@@ -203,7 +202,7 @@ class Select_tool_class extends Base_tools_class {
 
  mouseup(e) {
  var mouse = this.get_mouse_info(e);
- if (mouse.click_valid == false) {
+ if (mouse.click_valid == false || config.mouse_lock === true) {
  return;
  }
  if (this.resizing) {
@@ -281,6 +280,21 @@ class Select_tool_class extends Base_tools_class {
  var ctx = this.Base_layers.ctx;
  var mouse = this.get_mouse_info(event);
 
+ //maybe related tool have additional overlay render handlers?
+ if(config.layer.render_function != null) {
+ var render_class = config.layer.render_function[0];
+ var render_function = 'select';
+ if (
+ typeof this.Base_gui.GUI_tools.tools_modules[render_class].object[
+ render_function
+ ] != "undefined"
+ ) {
+ this.Base_gui.GUI_tools.tools_modules[render_class].object[
+ render_function
+ ](this.ctx);
+ }
+ }
+
  if (mouse.is_drag == false)
  return;