samcan 0.0.2 → 0.1.0

package/dist/shared/chunk-d6gxvapt.js

@@ -0,0 +1,500 @@
+import {
+  camera_frustum,
+  pan_camera,
+  screen_to_world_camera,
+  set_camera,
+  world_to_screen_camera,
+  zoom_at_camera,
+  zoom_camera
+} from "./chunk-hewznwbd.js";
+import {
+  element_type_image,
+  element_type_shape,
+  element_type_stroke,
+  element_type_text,
+  shape_type_arrow,
+  shape_type_ellipse,
+  shape_type_frame,
+  shape_type_line,
+  shape_type_rectangle,
+  text_align_center,
+  text_align_right
+} from "./chunk-jdvrd5tv.js";
+import {
+  to_rgba_string_color
+} from "./chunk-v53jprrn.js";
+
+// engine/shared.ts
+var default_background = [1, 1, 1, 1];
+var default_element_fill = [0.95, 0.97, 1, 1];
+var default_element_stroke = [0.18, 0.22, 0.31, 1];
+var min_zoom_engine = 0.0001;
+var max_zoom_engine = 1e6;
+var scratch_camera = [0, 0, 1, 0];
+var scratch_frustum = [0, 0, 0, 0, 0, 0];
+var scratch_transform = [1, 0, 0, 1, 0, 0];
+var scratch_world = [0, 0];
+var scratch_screen = [0, 0];
+
+// engine/camera.ts
+function set_camera_engine(state, x, y, zoom, rotation = 0) {
+  set_camera(sanitize_number_engine(x, state.camera[0]), sanitize_number_engine(y, state.camera[1]), sanitize_zoom_engine(zoom, state.camera[2]), sanitize_number_engine(rotation, state.camera[3]), state.camera);
+  return state;
+}
+function pan_engine(state, dx, dy) {
+  pan_camera(state.camera, dx, dy, scratch_camera);
+  copy_camera_into_engine(state, scratch_camera);
+  return state;
+}
+function zoom_engine(state, factor) {
+  zoom_camera(state.camera, factor, scratch_camera);
+  copy_camera_into_engine(state, scratch_camera);
+  return state;
+}
+function zoom_at_engine(state, factor, screen_x, screen_y) {
+  scratch_screen[0] = screen_x;
+  scratch_screen[1] = screen_y;
+  screen_to_world_camera(state.camera, state.viewport, scratch_screen, scratch_world);
+  zoom_at_camera(state.camera, factor, {
+    screen_x,
+    screen_y,
+    world_x: scratch_world[0],
+    world_y: scratch_world[1]
+  }, scratch_camera);
+  copy_camera_into_engine(state, scratch_camera);
+  return state;
+}
+function resize_engine(state, width, height, pixel_ratio = Math.max(1, globalThis.devicePixelRatio || 1)) {
+  const safe_width = Math.max(1, width);
+  const safe_height = Math.max(1, height);
+  const safe_pixel_ratio = Math.max(1, pixel_ratio);
+  state.viewport[0] = safe_width;
+  state.viewport[1] = safe_height;
+  state.viewport[2] = safe_pixel_ratio;
+  state.renderer.resize(safe_width, safe_height, safe_pixel_ratio);
+  return state;
+}
+function world_to_screen_engine(state, world, out) {
+  return world_to_screen_camera(state.camera, state.viewport, world, out);
+}
+function screen_to_world_engine(state, screen, out) {
+  return screen_to_world_camera(state.camera, state.viewport, screen, out);
+}
+function visible_bounds_world_engine(state) {
+  camera_frustum(state.camera, state.viewport, scratch_frustum);
+  return [
+    scratch_frustum[0],
+    scratch_frustum[3],
+    scratch_frustum[1] - scratch_frustum[0],
+    scratch_frustum[2] - scratch_frustum[3]
+  ];
+}
+function camera_to_screen_transform_engine(c, v, out) {
+  const cos_r = Math.cos(c[3]);
+  const sin_r = Math.sin(c[3]);
+  const zoom = c[2];
+  out[0] = cos_r * zoom;
+  out[1] = sin_r * zoom;
+  out[2] = -sin_r * zoom;
+  out[3] = cos_r * zoom;
+  out[4] = v[0] / 2 - c[0] * cos_r * zoom + c[1] * sin_r * zoom;
+  out[5] = v[1] / 2 - c[0] * sin_r * zoom - c[1] * cos_r * zoom;
+  return out;
+}
+function sanitize_number_engine(value, fallback) {
+  if (Number.isFinite(value)) {
+    return value;
+  }
+  return Number.isFinite(fallback) ? fallback : 0;
+}
+function sanitize_zoom_engine(value, fallback) {
+  const safe_value = Number.isFinite(value) ? value : fallback;
+  if (!Number.isFinite(safe_value) || safe_value <= 0) {
+    return 1;
+  }
+  return Math.min(max_zoom_engine, Math.max(min_zoom_engine, safe_value));
+}
+function copy_camera_into_engine(state, value) {
+  state.camera[0] = sanitize_number_engine(value[0], state.camera[0]);
+  state.camera[1] = sanitize_number_engine(value[1], state.camera[1]);
+  state.camera[2] = sanitize_zoom_engine(value[2], state.camera[2]);
+  state.camera[3] = sanitize_number_engine(value[3], state.camera[3]);
+}
+
+// document/query.ts
+function elements_in_bounds_document(doc, bounds) {
+  const results = [];
+  for (const el of doc.elements.values()) {
+    const el_bounds = el.bounds;
+    if (el_bounds[0] < bounds[0] + bounds[2] && el_bounds[0] + el_bounds[2] > bounds[0] && el_bounds[1] < bounds[1] + bounds[3] && el_bounds[1] + el_bounds[3] > bounds[1]) {
+      results.push(el);
+    }
+  }
+  return results;
+}
+
+// engine/elements.ts
+var loaded_images_engine = new Map;
+var text_bitmap_cache_engine = new Map;
+var text_bitmap_cache_limit_engine = 128;
+function render_element_engine(drawer, el, asset_src = null) {
+  if (el.type === element_type_stroke) {
+    render_stroke_element_engine(drawer, el);
+    return;
+  }
+  if (el.type === element_type_shape) {
+    render_shape_element_engine(drawer, el);
+    return;
+  }
+  if (el.type === element_type_image) {
+    render_image_element_engine(drawer, el, asset_src);
+    return;
+  }
+  if (el.type === element_type_text) {
+    render_text_element_engine(drawer, el);
+  }
+}
+function render_stroke_element_engine(drawer, el) {
+  const style = {
+    fill: null,
+    stroke: el.color,
+    stroke_width: el.width,
+    line_cap: 1,
+    line_join: 1,
+    miter_limit: 10,
+    alpha: el.color[3]
+  };
+  const points = el.simplified_points && el.simplified_points.length > 1 ? el.simplified_points : el.points;
+  if (points.length === 1) {
+    const p = points[0];
+    if (p !== undefined) {
+      drawer.draw_circle([p[0], p[1], Math.max(0.5, el.width * 0.5)], style);
+    }
+    return;
+  }
+  if (points.length > 1) {
+    drawer.draw_polyline(points, style);
+  }
+}
+function render_shape_element_engine(drawer, el) {
+  const style = {
+    fill: el.fill_color,
+    stroke: el.stroke_color,
+    stroke_width: el.stroke_width,
+    line_cap: 1,
+    line_join: 1,
+    miter_limit: 10,
+    alpha: 1
+  };
+  if (el.shape_type === shape_type_rectangle) {
+    drawer.draw_rectangle(el.bounds, style);
+    return;
+  }
+  if (el.shape_type === shape_type_frame) {
+    const header_height = Math.max(20, Math.min(36, el.bounds[3] * 0.18));
+    const header_style = {
+      fill: style.stroke,
+      stroke: style.stroke,
+      stroke_width: Math.max(1, style.stroke_width),
+      line_cap: style.line_cap,
+      line_join: style.line_join,
+      miter_limit: style.miter_limit,
+      alpha: 0.12
+    };
+    const outline_style = {
+      ...style,
+      fill: null,
+      alpha: 1
+    };
+    drawer.draw_rectangle(el.bounds, outline_style);
+    drawer.draw_rectangle([el.bounds[0], el.bounds[1], el.bounds[2], header_height], header_style);
+    return;
+  }
+  if (el.shape_type === shape_type_ellipse) {
+    const cx = el.bounds[0] + el.bounds[2] / 2;
+    const cy = el.bounds[1] + el.bounds[3] / 2;
+    const rx = Math.max(0.5, Math.abs(el.bounds[2]) / 2);
+    const ry = Math.max(0.5, Math.abs(el.bounds[3]) / 2);
+    const segments = 40;
+    const points = [];
+    for (let i = 0;i <= segments; i = i + 1) {
+      const t = i / segments * Math.PI * 2;
+      points.push([cx + Math.cos(t) * rx, cy + Math.sin(t) * ry]);
+    }
+    drawer.draw_polyline(points, style);
+    return;
+  }
+  if (el.shape_type === shape_type_line || el.shape_type === shape_type_arrow) {
+    const from = el.start_point ?? [el.bounds[0], el.bounds[1]];
+    const to = el.end_point ?? [el.bounds[0] + el.bounds[2], el.bounds[1] + el.bounds[3]];
+    drawer.draw_line(from, to, style);
+    if (el.shape_type === shape_type_arrow) {
+      draw_arrowhead_engine(drawer, from, to, style);
+    }
+  }
+}
+function render_image_element_engine(drawer, el, asset_src) {
+  const image = resolve_image_source_engine(el, asset_src);
+  const opacity = Math.max(0, Math.min(1, el.opacity));
+  if (image.status === "loaded" && image.source !== null) {
+    drawer.draw_image(image.source, fit_image_bounds_engine(el.bounds, image.source), opacity);
+    return;
+  }
+  const style = {
+    fill: default_element_fill,
+    stroke: default_element_stroke,
+    stroke_width: 1,
+    line_cap: 1,
+    line_join: 1,
+    miter_limit: 10,
+    alpha: opacity
+  };
+  drawer.draw_rectangle(el.bounds, style);
+  if (image.status === "error") {
+    const mark_style = {
+      fill: null,
+      stroke: default_element_stroke,
+      stroke_width: 1.5,
+      line_cap: 1,
+      line_join: 1,
+      miter_limit: 10,
+      alpha: opacity
+    };
+    const inset = Math.max(8, Math.min(el.bounds[2], el.bounds[3]) * 0.12);
+    const x0 = el.bounds[0] + inset;
+    const y0 = el.bounds[1] + inset;
+    const x1 = el.bounds[0] + el.bounds[2] - inset;
+    const y1 = el.bounds[1] + el.bounds[3] - inset;
+    drawer.draw_line([x0, y0], [x1, y1], mark_style);
+    drawer.draw_line([x1, y0], [x0, y1], mark_style);
+  }
+}
+function render_text_element_engine(drawer, el) {
+  const key = [
+    el.content,
+    el.font_family,
+    el.font_size,
+    el.color.join(","),
+    el.align,
+    Math.max(1, Math.round(el.bounds[2])),
+    Math.max(1, Math.round(el.bounds[3])),
+    Math.max(1, Math.round(drawer.pixel_ratio))
+  ].join("|");
+  let bitmap = text_bitmap_cache_engine.get(key);
+  if (bitmap === undefined) {
+    bitmap = rasterize_text_engine(el, Math.max(1, Math.round(drawer.pixel_ratio)));
+    text_bitmap_cache_engine.set(key, bitmap);
+    trim_text_bitmap_cache_engine();
+  }
+  drawer.draw_image(bitmap, el.bounds, 1);
+}
+function resolve_image_source_engine(el, asset_src) {
+  if (el.bitmap !== null) {
+    return { status: "loaded", source: el.bitmap };
+  }
+  const src = (asset_src ?? el.src).trim();
+  if (src.length === 0 || typeof Image === "undefined") {
+    return { status: "empty", source: null };
+  }
+  let cached = loaded_images_engine.get(src);
+  if (cached === undefined) {
+    const image = new Image;
+    cached = { image, status: "loading" };
+    loaded_images_engine.set(src, cached);
+    image.onload = () => {
+      const current = loaded_images_engine.get(src);
+      if (current !== undefined)
+        current.status = "loaded";
+    };
+    image.onerror = () => {
+      const current = loaded_images_engine.get(src);
+      if (current !== undefined)
+        current.status = "error";
+    };
+    image.src = src;
+    return { status: "loading", source: null };
+  }
+  if (cached.status === "loaded") {
+    return { status: "loaded", source: cached.image };
+  }
+  return { status: cached.status, source: null };
+}
+function fit_image_bounds_engine(bounds, source) {
+  const source_w = source instanceof HTMLImageElement ? source.naturalWidth : source.width;
+  const source_h = source instanceof HTMLImageElement ? source.naturalHeight : source.height;
+  const x = bounds[0];
+  const y = bounds[1];
+  const w = Math.max(1, bounds[2]);
+  const h = Math.max(1, bounds[3]);
+  if (source_w <= 0 || source_h <= 0) {
+    return [x, y, w, h];
+  }
+  const scale = Math.min(w / source_w, h / source_h);
+  const draw_w = source_w * scale;
+  const draw_h = source_h * scale;
+  const draw_x = x + (w - draw_w) * 0.5;
+  const draw_y = y + (h - draw_h) * 0.5;
+  return [draw_x, draw_y, draw_w, draw_h];
+}
+function draw_arrowhead_engine(drawer, from, to, style) {
+  const dx = to[0] - from[0];
+  const dy = to[1] - from[1];
+  const len = Math.hypot(dx, dy);
+  if (len < 0.0001)
+    return;
+  const ux = dx / len;
+  const uy = dy / len;
+  const size = Math.max(8, style.stroke_width * 5);
+  const wing_angle = Math.PI / 7;
+  const cos = Math.cos(wing_angle);
+  const sin = Math.sin(wing_angle);
+  const lx = to[0] - (ux * cos - uy * sin) * size;
+  const ly = to[1] - (uy * cos + ux * sin) * size;
+  const rx = to[0] - (ux * cos + uy * sin) * size;
+  const ry = to[1] - (uy * cos - ux * sin) * size;
+  drawer.draw_line(to, [lx, ly], style);
+  drawer.draw_line(to, [rx, ry], style);
+}
+function rasterize_text_engine(el, scale) {
+  const canvas = document.createElement("canvas");
+  const width = Math.max(1, Math.ceil(el.bounds[2] * scale));
+  const height = Math.max(1, Math.ceil(el.bounds[3] * scale));
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (ctx === null)
+    return canvas;
+  const font_size = Math.max(1, el.font_size);
+  const line_height = font_size * 1.3;
+  const padding = Math.max(4, Math.round(font_size * 0.35));
+  const max_text_width = Math.max(1, el.bounds[2] - padding * 2);
+  ctx.scale(scale, scale);
+  ctx.font = `${font_size}px ${el.font_family}`;
+  ctx.textBaseline = "top";
+  ctx.fillStyle = to_rgba_string_color(el.color);
+  const lines = wrap_text_lines_engine(ctx, el.content, max_text_width);
+  const base_x = el.bounds[0];
+  const base_y = el.bounds[1];
+  const text_top = base_y + padding;
+  const text_bottom = base_y + el.bounds[3] - padding;
+  let y = text_top;
+  for (let i = 0;i < lines.length; i = i + 1) {
+    const line = lines[i];
+    if (line === undefined)
+      continue;
+    if (y + line_height > text_bottom + 0.5)
+      break;
+    const line_width = ctx.measureText(line).width;
+    let x = base_x + padding;
+    if (el.align === text_align_center) {
+      x = base_x + el.bounds[2] * 0.5 - line_width * 0.5;
+    } else if (el.align === text_align_right) {
+      x = base_x + el.bounds[2] - padding - line_width;
+    }
+    ctx.fillText(line, x - base_x, y - base_y);
+    y = y + line_height;
+  }
+  return canvas;
+}
+function wrap_text_lines_engine(ctx, content, max_width) {
+  const normalized = content.length > 0 ? content : "";
+  const paragraphs = normalized.split(/\r?\n/);
+  const lines = [];
+  for (let i = 0;i < paragraphs.length; i = i + 1) {
+    const paragraph = paragraphs[i];
+    if (paragraph === undefined)
+      continue;
+    if (paragraph.length === 0) {
+      lines.push("");
+      continue;
+    }
+    const words = paragraph.split(/(\s+)/).filter((word) => word.length > 0);
+    let current = "";
+    for (let j = 0;j < words.length; j = j + 1) {
+      const word = words[j];
+      if (word === undefined)
+        continue;
+      const candidate = current.length === 0 ? word : `${current}${word}`;
+      if (ctx.measureText(candidate).width <= max_width || current.length === 0) {
+        current = candidate;
+      } else {
+        lines.push(current.trimEnd());
+        current = word.trimStart();
+      }
+    }
+    lines.push(current.length > 0 ? current : "");
+  }
+  return lines;
+}
+function trim_text_bitmap_cache_engine() {
+  if (text_bitmap_cache_engine.size <= text_bitmap_cache_limit_engine) {
+    return;
+  }
+  const remove_count = Math.ceil(text_bitmap_cache_engine.size / 3);
+  let removed = 0;
+  for (const key of text_bitmap_cache_engine.keys()) {
+    text_bitmap_cache_engine.delete(key);
+    removed = removed + 1;
+    if (removed >= remove_count)
+      return;
+  }
+}
+
+// engine/render.ts
+function render_engine(state) {
+  render_engine_with_overlay(state, null);
+}
+function render_engine_with_overlay(state, overlay) {
+  const view_bounds = visible_bounds_world_engine(state);
+  const visible_elements = elements_in_bounds_document(state.document, view_bounds);
+  const layer_info = build_layer_render_info_map_engine(state.document);
+  const renderable_elements = [];
+  for (let i = 0;i < visible_elements.length; i = i + 1) {
+    const el = visible_elements[i];
+    if (el === undefined) {
+      continue;
+    }
+    const info = layer_info.get(el.layer_id);
+    if (info === undefined || info.visible) {
+      renderable_elements.push(el);
+    }
+  }
+  renderable_elements.sort((a, b) => {
+    const a_order = layer_info.get(a.layer_id)?.order ?? Number.MAX_SAFE_INTEGER;
+    const b_order = layer_info.get(b.layer_id)?.order ?? Number.MAX_SAFE_INTEGER;
+    if (a_order !== b_order) {
+      return a_order - b_order;
+    }
+    return a.z_index - b.z_index;
+  });
+  state.renderer.begin_frame();
+  state.renderer.clear(state.background);
+  camera_to_screen_transform_engine(state.camera, state.viewport, scratch_transform);
+  state.renderer.set_transform(scratch_transform);
+  if (state.background_image !== null) {
+    state.renderer.draw_image(state.background_image, [0, 0, state.background_image.width, state.background_image.height], 1);
+  }
+  for (let i = 0;i < renderable_elements.length; i = i + 1) {
+    const el = renderable_elements[i];
+    if (el !== undefined) {
+      const asset_src = el.type === element_type_image && el.asset_id !== null ? state.document.assets.get(el.asset_id)?.src ?? null : null;
+      render_element_engine(state.renderer, el, asset_src);
+    }
+  }
+  if (overlay !== null) {
+    overlay(state.renderer);
+  }
+  state.renderer.end_frame();
+}
+function build_layer_render_info_map_engine(doc) {
+  const map = new Map;
+  for (let i = 0;i < doc.layers.length; i = i + 1) {
+    const layer = doc.layers[i];
+    if (layer !== undefined) {
+      map.set(layer.id, { order: i, visible: layer.visible });
+    }
+  }
+  return map;
+}
+
+export { default_background, set_camera_engine, pan_engine, zoom_engine, zoom_at_engine, resize_engine, world_to_screen_engine, screen_to_world_engine, visible_bounds_world_engine, sanitize_number_engine, sanitize_zoom_engine, elements_in_bounds_document, render_engine, render_engine_with_overlay };