vviinn-widgets 0.6.7 → 0.7.1

package/dist/cjs/{Rectangle-3098312c.js → Rectangle-75cfbeb8.js}

@@ -251,6 +251,30 @@ var semigroupSum = {
     concat: function (x, y) { return x + y; }
 };
 
+var ObjectMemberName;
+(function (ObjectMemberName) {
+  ObjectMemberName["eform"] = "eform";
+  ObjectMemberName["etype"] = "etype";
+  ObjectMemberName["form"] = "form";
+  ObjectMemberName["href"] = "href";
+  ObjectMemberName["method"] = "method";
+  ObjectMemberName["accepts"] = "accepts";
+  ObjectMemberName["produces"] = "produces";
+  ObjectMemberName["rel"] = "rel";
+  ObjectMemberName["type"] = "type";
+  ObjectMemberName["value"] = "value";
+})(ObjectMemberName || (ObjectMemberName = {}));
+const foldValueObject = (i) => {
+  switch (i.type) {
+    case "array": {
+      return i.value.map(foldValueObject);
+    }
+    default: {
+      return i.value;
+    }
+  }
+};
+
 const semigroupDiff = {
   concat: (x, y) => x - y,
 };
@@ -365,30 +389,6 @@ const fromRectangle = (r) => [
   },
 ];
 
-var ObjectMemberName;
-(function (ObjectMemberName) {
-  ObjectMemberName["eform"] = "eform";
-  ObjectMemberName["etype"] = "etype";
-  ObjectMemberName["form"] = "form";
-  ObjectMemberName["href"] = "href";
-  ObjectMemberName["method"] = "method";
-  ObjectMemberName["accepts"] = "accepts";
-  ObjectMemberName["produces"] = "produces";
-  ObjectMemberName["rel"] = "rel";
-  ObjectMemberName["type"] = "type";
-  ObjectMemberName["value"] = "value";
-})(ObjectMemberName || (ObjectMemberName = {}));
-const foldValueObject = (i) => {
-  switch (i.type) {
-    case "array": {
-      return i.value.map(foldValueObject);
-    }
-    default: {
-      return i.value;
-    }
-  }
-};
-
 const move = (origin, position) => {
   const originPosition = fromRectangle$1(origin);
   const newPosition = pointSumSemigroup.concat(originPosition, position);

package/dist/cjs/{app-globals-85991bd7.js → app-globals-16a92f55.js}

@@ -9204,7 +9204,7 @@ addExtensionMethods();
 
 const setupSentry = () => {
   init({
-    dsn: "https://2e48bb2503b749daae7628504d02853a@o731435.ingest.sentry.io/5783489",
+    dsn: "https://70bcf561598b44148bd3cabc7c142a6c@o1015876.ingest.sentry.io/5983034",
     integrations: [new Integrations.BrowserTracing()],
     tracesSampleRate: 1.0,
     maxBreadcrumbs: 4,

package/dist/cjs/cropper-handler_3.cjs.entry.js

@@ -0,0 +1,195 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-7ef269de.js');
+const Rectangle = require('./Rectangle-75cfbeb8.js');
+const imageSearch_store = require('./imageSearch.store-184be02f.js');
+
+const cropperHandlerCss = ":host{--x:0;--y:0;--size:20px;background:transparent;border:4px solid white;box-sizing:content-box;display:block;height:var(--size);position:absolute;touch-action:none;transition-duration:0.25s;transition-property:border-color, opacity;transition-timing-function:ease-in-out;width:var(--size);z-index:4}:host(.disabled){opacity:0.25}:host(.nw-resize){transform:translate(calc(var(--x) - 4px), calc(var(--y) - 4px));border-bottom:none;border-right:none}:host(.n-resize){transform:translate(calc(var(--x) - calc(var(--size) / 2)), var(--y));border:none}:host(.w-resize){transform:translate(var(--x), calc(var(--y) - calc(var(--size) / 2)));border:none}:host(.ne-resize){transform:translate(calc(var(--x) - var(--size)), calc(var(--y) - 4px));border-left:none;border-bottom:none}:host(.e-resize){transform:translate(calc(var(--x) - var(--size)), calc(var(--y) - calc(var(--size) / 2)));border:none}:host(.sw-resize){transform:translate(calc(var(--x) - 4px), calc(var(--y) - var(--size)));border-right:none;border-top:none}:host(.s-resize){transform:translate(calc(var(--x) - calc(var(--size) / 2)), calc(var(--y) - var(--size)));border:none}:host(.se-resize){transform:translate(calc(var(--x) - var(--size)), calc(var(--y) - var(--size)));border-left:none;border-top:none}";
+
+const CropperHandler = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.handlerMoved = index.createEvent(this, "handlerMoved", 7);
+    this.searchAreaChangeStart = index.createEvent(this, "searchAreaChangeStart", 7);
+    this.handlerReleased = index.createEvent(this, "handlerReleased", 7);
+    this.handleMove = false;
+    this.disabled = false;
+  }
+  handlePointerStart(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.id = event.pointerId;
+    this.handleMove = true;
+    this.startPoint = Rectangle.fromMouseEvent(event);
+    this.searchAreaChangeStart.emit(true);
+  }
+  handlePointerEnd(event) {
+    event.stopPropagation();
+    const { pointerId } = event;
+    if (pointerId !== this.id) {
+      return;
+    }
+    this.searchAreaChangeStart.emit(false);
+    this.handlerReleased.emit();
+    this.handleMove = false;
+    this.startPoint = undefined;
+  }
+  handlePointerMove(event) {
+    if (!this.handleMove)
+      return;
+    requestAnimationFrame(() => {
+      const destination = Rectangle.fromMouseEvent(event);
+      if (this.startPoint !== undefined) {
+        const distance = Rectangle.pointDiffSemigroup.concat(destination, this.startPoint);
+        this.handlerMoved.emit({
+          position: distance,
+          direction: this.handler.direction,
+        });
+      }
+      this.startPoint = destination;
+    });
+  }
+  render() {
+    return (index.h(index.Host, { part: `handle ${Rectangle.getCursorValue(this.handler.direction)}`, class: {
+        active: this.handleMove,
+        disabled: this.disabled,
+        [Rectangle.getCursorValue(this.handler.direction)]: true,
+      }, style: {
+        "--x": `${this.handler.position.x}px`,
+        "--y": `${this.handler.position.y}px`,
+        "--size": "20px",
+        cursor: Rectangle.getCursorValue(this.handler.direction),
+      } }));
+  }
+};
+CropperHandler.style = cropperHandlerCss;
+
+const fromRectangle = (shape, target) => {
+  const top = `${shape.y}px`;
+  const left = `${shape.x}px`;
+  const right = `${target.width - (shape.x + shape.width)}px`;
+  const bottom = `${target.height - (shape.y + shape.height)}px`;
+  return {
+    top,
+    right,
+    bottom,
+    left,
+  };
+};
+const printClip = (clip) => `inset(${clip.top} ${clip.right} ${clip.bottom} ${clip.left})`;
+const getClipValue = (shape, target) => printClip(fromRectangle(shape, target));
+
+const highlightBoxCss = ":host{display:grid;position:absolute;box-sizing:border-box;border:none;width:100%;height:100%;--size:10px;--x-position:0;--y-position:0}.pointer{position:absolute;width:var(--size);height:var(--size);background:black;border-radius:50%;z-index:2;cursor:pointer;transform:translate(var(--x-position), var(--y-position)) scale(0);-webkit-animation:0.25s linear fadein;animation:0.25s linear fadein;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.pointer::after{content:\"\";cursor:pointer;border:5px solid black;border-radius:50%;width:var(--size);height:var(--size);display:block;transform:translate(calc(-50% + var(--size) * 0.5), calc(-50% + var(--size) * 0.5));padding:calc(var(--size) * 0.5);opacity:.75}@-webkit-keyframes fadein{from{transform:translate(var(--x-position), var(--y-position)) scale(0)}to{transform:translate(var(--x-position), var(--y-position)) scale(1)}}@keyframes fadein{from{transform:translate(var(--x-position), var(--y-position)) scale(0)}to{transform:translate(var(--x-position), var(--y-position)) scale(1)}}";
+
+const HighlightBox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  getInsetValue() {
+    return Rectangle.pipe(imageSearch_store.sequenceToOption(imageSearch_store.imageSearchState.searchArea, imageSearch_store.imageSearchState.imageBounds), imageSearch_store.Option.map(([selection, image]) => getClipValue(selection, image)), imageSearch_store.Option.getOrElse(() => ""));
+  }
+  renderImage() {
+    return Rectangle.pipe(imageSearch_store.sequenceToOption(imageSearch_store.imageSearchState.imageUrl, imageSearch_store.imageSearchState.imageBounds), imageSearch_store.Option.map(([url, bounds]) => (index.h("img", { src: url, width: bounds.width, height: bounds.height, style: { "clip-path": `${this.getInsetValue()}` } }))), imageSearch_store.Option.getOrElse(() => ""));
+  }
+  render() {
+    return index.h(index.Host, null, this.renderImage());
+  }
+};
+HighlightBox.style = highlightBoxCss;
+
+const imageCropperCss = ":host{display:block;height:100%;left:0;position:absolute;top:0;width:100%}:host(.hidden){visibility:hidden}.wrapper{height:100%;position:relative;width:100%}.crop-area{border:1px solid white;box-sizing:border-box;position:absolute;touch-action:none;transition-property:border-color, opacity;transition-duration:.25s;transition-timing-function:ease-in-out;z-index:2}.crop-area.active{border-color:whitesmoke}.crop-area.disabled{opacity:0.25}";
+
+const ImageCropper = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.mouseRelease = index.createEvent(this, "mouseRelease", 7);
+    this.cropperMoved = index.createEvent(this, "cropperMoved", 7);
+    this.searchAreaChangeStart = index.createEvent(this, "searchAreaChangeStart", 7);
+    this.disabled = false;
+    this.handleMove = false;
+    this.mouseStartPoint = undefined;
+  }
+  handleObjectSelection({ detail }) {
+    const scale = Rectangle.scaleWithSized(this.bounds);
+    const rect = Rectangle.fromAlt(Rectangle.foldValueObject(detail).rectangle);
+    imageSearch_store.imageSearchState.searchArea = imageSearch_store.Option.some(scale(rect));
+  }
+  handleHandlerMove(event) {
+    imageSearch_store._function.pipe(imageSearch_store.imageSearchState.searchArea, imageSearch_store.Option.map((area) => {
+      const newSearchArea = Rectangle.transform(area, event.detail);
+      if (!this.checkBounds(newSearchArea)) {
+        return;
+      }
+      requestAnimationFrame(() => {
+        imageSearch_store.imageSearchState.searchArea = imageSearch_store.Option.some(newSearchArea);
+      });
+      imageSearch_store.imageSearchState.detectedObject = undefined;
+    }));
+  }
+  handleMouseMove(ev) {
+    if (!this.handleMove)
+      return;
+    const destination = Rectangle.fromMouseEvent(ev);
+    const distance = Rectangle.pointDiffSemigroup.concat(destination, this.mouseStartPoint);
+    imageSearch_store._function.pipe(imageSearch_store.imageSearchState.searchArea, imageSearch_store.Option.map((searchArea) => {
+      const newSearchArea = Rectangle.move(searchArea, distance);
+      if (!this.checkBounds(newSearchArea)) {
+        return;
+      }
+      imageSearch_store.imageSearchState.searchArea = imageSearch_store.Option.some(newSearchArea);
+      imageSearch_store.imageSearchState.detectedObject = undefined;
+      this.mouseStartPoint = destination;
+    }));
+  }
+  handlePointerDown(event) {
+    this.handleMove = true;
+    this.mouseStartPoint = Rectangle.fromMouseEvent(event);
+  }
+  checkBounds(rectangle) {
+    const bounds = this.el.getBoundingClientRect();
+    const inTopBound = rectangle.y >= 0;
+    const inLeftBound = rectangle.x >= 0;
+    const inRightBound = rectangle.x + rectangle.width <= bounds.width;
+    const inBottomBound = rectangle.y + rectangle.height <= bounds.height;
+    const minWidth = rectangle.width > 20;
+    const minHeight = rectangle.height > 20;
+    return (inTopBound &&
+      inLeftBound &&
+      inRightBound &&
+      inBottomBound &&
+      minHeight &&
+      minWidth);
+  }
+  handleSearchAreaRelease() {
+    this.handleMove = false;
+    this.mouseStartPoint = undefined;
+    imageSearch_store.makeRectangularSearchRequest();
+  }
+  getStyleMap() {
+    return imageSearch_store._function.pipe(imageSearch_store.imageSearchState.searchArea, imageSearch_store.Option.map((rectangle) => {
+      return {
+        width: `${rectangle.width}px`,
+        height: `${rectangle.height}px`,
+        transform: `translate(${rectangle.x}px, ${rectangle.y}px)`,
+        cursor: this.handleMove ? "move" : "default",
+      };
+    }), imageSearch_store.Option.getOrElse(() => {
+      return {};
+    }));
+  }
+  render() {
+    return (index.h(index.Host, { exportparts: "handle, e-resize, n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, w-resize" }, index.h("div", { class: {
+        "crop-area": true,
+        active: this.handleMove,
+        disabled: this.disabled,
+      }, style: this.getStyleMap(), onPointerDown: (ev) => this.handlePointerDown(ev), onPointerUp: (ev) => { ev.stopPropagation(); this.handleSearchAreaRelease(); } }), index.h("div", { class: "wrapper" }, imageSearch_store.imageSearchState.cropperHandlers.map((handler) => (index.h("cropper-handler", { disabled: this.disabled, handler: handler, bounds: this.bounds, onHandlerMoved: (e) => this.handleHandlerMove(e), onHandlerReleased: () => this.handleSearchAreaRelease() }))))));
+  }
+  get el() { return index.getElement(this); }
+};
+ImageCropper.style = imageCropperCss;
+
+exports.cropper_handler = CropperHandler;
+exports.highlight_box = HighlightBox;
+exports.image_cropper = ImageCropper;

package/dist/cjs/image-view.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7ef269de.js');
-const Rectangle = require('./Rectangle-3098312c.js');
+const Rectangle = require('./Rectangle-75cfbeb8.js');
 
 const imageViewCss = ":host{display:grid;position:relative}:host(.hidden){display:none}:host(.dimmed) img{filter:brightness(60%);position:relative;z-index:-1}.detected-object{position:absolute}img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}@-webkit-keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}.loader{-webkit-animation:1.5s cubic-bezier(.68, -0.55, .27, 1.55) 0s infinite spin;animation:1.5s cubic-bezier(.68, -0.55, .27, 1.55) 0s infinite spin;display:grid;filter:box-shadow(1px 1px 2px black);height:1rem;margin-left:-0.5rem;margin-top:-0.5rem;position:absolute;width:1rem;z-index:10}";